"use client"; import * as React from "react"; import { cn, useControllableState, useMounted } from "@kineticui/core"; type HSV = { h: number; s: number; v: number }; function hexToHsv(hex: string): HSV { const m = hex.replace("#", "").match(/^([0-9a-f]{6})$/i); const n = m ? parseInt(m[1]!, 16) : 0; const r = ((n >> 16) & 255) / 255; const g = ((n >> 8) & 255) / 255; const b = (n & 255) / 255; const max = Math.max(r, g, b); const d = max - Math.min(r, g, b); let h = 0; if (d) { if (max === r) h = ((g - b) / d) % 6; else if (max === g) h = (b - r) / d + 2; else h = (r - g) / d + 4; } return { h: (h * 60 + 360) % 360, s: max ? d / max : 0, v: max }; } function hsvToHex({ h, s, v }: HSV): string { const f = (n: number) => { const k = (n + h / 60) % 6; return Math.round((v - v * s * Math.max(0, Math.min(k, 4 - k, 1))) * 255); }; return "#" + [f(5), f(3), f(1)].map((x) => x.toString(16).padStart(2, "0")).join("").toUpperCase(); } function useDrag(onMove: (x: number, y: number) => void) { const ref = React.useRef(null); const handle = (e: React.PointerEvent) => { const r = ref.current!.getBoundingClientRect(); onMove(Math.min(1, Math.max(0, (e.clientX - r.left) / r.width)), Math.min(1, Math.max(0, (e.clientY - r.top) / r.height))); }; return { ref, onPointerDown: (e: React.PointerEvent) => { (e.target as HTMLElement).setPointerCapture(e.pointerId); handle(e); }, onPointerMove: (e: React.PointerEvent) => { if (e.buttons) handle(e); }, }; } export type ColorPickerProps = { value?: string; defaultValue?: string; onValueChange?: (hex: string) => void; /** Preset swatches. */ swatches?: string[]; className?: string; }; /** Saturation/brightness area, hue slider, hex field, eyedropper and swatches. */ export function ColorPicker({ value, defaultValue = "#C6F432", onValueChange, swatches = ["#C6F432", "#7C8CFF", "#F4A86A", "#F0A3D0", "#6EE7A0", "#FBBF5A", "#FF8A8A", "#F4F4F5"], className, }: ColorPickerProps) { const [hex, setHex] = useControllableState({ value, defaultValue, onChange: onValueChange }); const [hsv, setHsv] = React.useState(() => hexToHsv(hex)); const [draft, setDraft] = React.useState(hex); React.useEffect(() => { if (hsvToHex(hsv) !== hex.toUpperCase()) setHsv(hexToHsv(hex)); setDraft(hex.toUpperCase()); // eslint-disable-next-line react-hooks/exhaustive-deps }, [hex]); const update = (next: HSV) => { setHsv(next); setHex(hsvToHex(next)); }; const area = useDrag((x, y) => update({ ...hsv, s: x, v: 1 - y })); const hue = useDrag((x) => update({ ...hsv, h: x * 360 })); // Feature-detect after mount so server and client render the same markup. const mounted = useMounted(); const hasEyeDropper = mounted && "EyeDropper" in window; return (

{ const step = 0.02; if (e.key === "ArrowRight") update({ ...hsv, s: Math.min(1, hsv.s + step) }); if (e.key === "ArrowLeft") update({ ...hsv, s: Math.max(0, hsv.s - step) }); if (e.key === "ArrowUp") update({ ...hsv, v: Math.min(1, hsv.v + step) }); if (e.key === "ArrowDown") update({ ...hsv, v: Math.max(0, hsv.v - step) }); }} className="relative h-36 cursor-crosshair touch-none rounded-xl outline-none focus-visible:ring-2 focus-visible:ring-foreground" style={{ background: `linear-gradient(to top, #000, transparent), linear-gradient(to right, #fff, hsl(${hsv.h} 100% 50%))` }} >

{ if (e.key === "ArrowRight") update({ ...hsv, h: (hsv.h + 4) % 360 }); if (e.key === "ArrowLeft") update({ ...hsv, h: (hsv.h + 356) % 360 }); }} className="relative h-3 cursor-pointer touch-none rounded-full outline-none focus-visible:ring-2 focus-visible:ring-foreground" style={{ background: "linear-gradient(to right,#f00,#ff0,#0f0,#0ff,#00f,#f0f,#f00)" }} >

{ setDraft(e.target.value); if (/^#[0-9a-f]{6}$/i.test(e.target.value)) setHex(e.target.value.toUpperCase()); }} className="h-9 min-w-0 flex-1 rounded-lg border border-border bg-background px-2.5 font-mono text-sm uppercase text-foreground outline-none focus:border-accent" /> {hasEyeDropper ? ( ) : null}

{swatches.map((s) => (

); }

Color Picker

Installation

Exports