"use client"; import * as React from "react"; import { motion } from "motion/react"; import { cn } from "@kineticui/core"; import { CopyIcon, CheckIcon, PlusIcon, TrashIcon } from "@kineticui/icons"; export type GradientStop = { id: string; color: string; pos: number }; export type Gradient = { type: "linear" | "radial" | "conic"; angle: number; stops: GradientStop[] }; export const gradientToCss = (g: Gradient) => { const s = [...g.stops].sort((a, b) => a.pos - b.pos).map((x) => `${x.color} ${Math.round(x.pos)}%`).join(", "); return g.type === "linear" ? `linear-gradient(${g.angle}deg, ${s})` : g.type === "radial" ? `radial-gradient(circle, ${s})` : `conic-gradient(from ${g.angle}deg, ${s})`; }; const presets: Gradient[] = [ { type: "linear", angle: 135, stops: [{ id: "a", color: "#C6F432", pos: 0 }, { id: "b", color: "#1d2a4a", pos: 100 }] }, { type: "linear", angle: 90, stops: [{ id: "a", color: "#F0A3D0", pos: 0 }, { id: "b", color: "#7C8CFF", pos: 50 }, { id: "c", color: "#6EE7A0", pos: 100 }] }, { type: "radial", angle: 0, stops: [{ id: "a", color: "#F5C451", pos: 0 }, { id: "b", color: "#F4A86A", pos: 45 }, { id: "c", color: "#3a1230", pos: 100 }] }, { type: "conic", angle: 0, stops: [{ id: "a", color: "#7C8CFF", pos: 0 }, { id: "b", color: "#F0A3D0", pos: 33 }, { id: "c", color: "#C6F432", pos: 66 }, { id: "d", color: "#7C8CFF", pos: 100 }] }, ]; export type GradientPickerProps = { value?: Gradient; defaultValue?: Gradient; onChange?: (g: Gradient, css: string) => void; className?: string; }; /** Gradient builder: draggable stops, linear/radial/conic, angle dial, presets and copy-as-CSS. */ export function GradientPicker({ value, defaultValue = presets[0]!, onChange, className }: GradientPickerProps) { const [inner, setInner] = React.useState(defaultValue); const g = value ?? inner; const [sel, setSel] = React.useState(g.stops[0]!.id); const [copied, setCopied] = React.useState(false); const bar = React.useRef(null); const dial = React.useRef(null); const css = gradientToCss(g); const set = (next: Gradient) => { if (!value) setInner(next); onChange?.(next, gradientToCss(next)); }; const selected = g.stops.find((s) => s.id === sel) ?? g.stops[0]!; const updateStop = (id: string, patch: Partial) => set({ ...g, stops: g.stops.map((s) => (s.id === id ? { ...s, ...patch } : s)) }); const posFrom = (clientX: number) => { const r = bar.current!.getBoundingClientRect(); return Math.max(0, Math.min(100, ((clientX - r.left) / r.width) * 100)); }; return (

{(["linear", "radial", "conic"] as const).map((t) => ( ))} {g.type !== "radial" ? (

{ if (e.key === "ArrowRight" || e.key === "ArrowUp") set({ ...g, angle: (g.angle + 5) % 360 }); if (e.key === "ArrowLeft" || e.key === "ArrowDown") set({ ...g, angle: (g.angle + 355) % 360 }); }} onPointerDown={(e) => e.currentTarget.setPointerCapture(e.pointerId)} onPointerMove={(e) => { if (!e.currentTarget.hasPointerCapture(e.pointerId)) return; const r = dial.current!.getBoundingClientRect(); const a = (Math.atan2(e.clientY - (r.top + r.height / 2), e.clientX - (r.left + r.width / 2)) * 180) / Math.PI + 90; set({ ...g, angle: Math.round((a + 360) % 360) }); }} className="relative ml-auto size-9 cursor-grab rounded-full border border-border-strong bg-background outline-none focus-visible:ring-2 focus-visible:ring-accent" >

) : null} {g.type !== "radial" ? {g.angle}° : null}

{ const id = Math.random().toString(36).slice(2, 7); set({ ...g, stops: [...g.stops, { id, color: selected.color, pos: posFrom(e.clientX) }] }); setSel(id); }} title="Double-click to add a stop" > {g.stops.map((s) => ( { setSel(s.id); e.currentTarget.setPointerCapture(e.pointerId); }} onPointerMove={(e) => e.currentTarget.hasPointerCapture(e.pointerId) && updateStop(s.id, { pos: posFrom(e.clientX) })} onKeyDown={(e) => { if (e.key === "ArrowRight") updateStop(s.id, { pos: Math.min(100, s.pos + 1) }); if (e.key === "ArrowLeft") updateStop(s.id, { pos: Math.max(0, s.pos - 1) }); }} className={cn("absolute top-1/2 size-6 -translate-x-1/2 -translate-y-1/2 cursor-ew-resize rounded-full border-[3px] shadow-md", sel === s.id ? "border-white ring-2 ring-accent" : "border-white/80")} style={{ left: `${s.pos}%`, background: s.color }} /> ))}

updateStop(selected.id, { color: e.target.value })} aria-label="Stop colour" className="absolute inset-0 cursor-pointer opacity-0" /> updateStop(selected.id, { color: e.target.value })} aria-label="Hex" className="h-9 w-24 rounded-lg border border-border bg-background px-2 font-mono text-xs uppercase outline-none focus:border-accent" /> {Math.round(selected.pos)}%

{presets.map((p, i) => (

); }

Gradient Picker

Installation

Exports