{ "$schema": "https://ui.shadcn.com/schema/registry-item.json", "name": "color-picker", "title": "ColorPicker", "description": "Swatch-and-hex trigger opening an HSV field, hue rail, hex input, and preset swatches.", "dependencies": [ "@base-ui/react", "@hugeicons/core-free-icons", "@hugeicons/react" ], "registryDependencies": [ "utils", "https://ui.neon.com/r/neon-tokens.json" ], "files": [ { "path": "src/components/color-picker/color-picker.tsx", "content": "\"use client\";\n\n/* oxlint-disable jsx-a11y/prefer-tag-over-role -- the 2D saturation/brightness plane and styled hue rail have no native input equivalent; both implement the full slider keyboard contract */\n\nimport { Popover } from \"@base-ui/react/popover\";\nimport {\n ColorPickerIcon,\n Copy01Icon,\n Tick02Icon,\n} from \"@hugeicons/core-free-icons\";\nimport { HugeiconsIcon } from \"@hugeicons/react\";\nimport type { CSSProperties, KeyboardEvent, PointerEvent } from \"react\";\nimport { useState } from \"react\";\n\nimport { cn } from \"@/lib/utils\";\n\nexport interface ColorPickerProps {\n /** Controlled hex value, e.g. \"#00e599\". */\n value?: string;\n /** Uncontrolled initial hex value. */\n defaultValue?: string;\n onValueChange?: (hex: string) => void;\n /** Preset swatches rendered under the field. */\n swatches?: string[];\n disabled?: boolean;\n className?: string;\n /** Accessible label for the trigger. */\n label?: string;\n}\n\n/* ─────────────────────────────────────────────────────────\n * COLOR MATH — HSV internally, hex at the edges. Hue is\n * kept in state (not re-derived) so the rail doesn't snap\n * to 0 when saturation or value hit their extremes.\n * ───────────────────────────────────────────────────────── */\nexport interface Hsv {\n h: number;\n s: number;\n v: number;\n}\n\nconst HEX_RE = /^#?(?[0-9a-f]{6})$/iu;\n\nconst clamp01 = (x: number) => Math.min(1, Math.max(0, x));\n\nexport const hexToHsv = (hex: string): Hsv | null => {\n const match = HEX_RE.exec(hex.trim());\n\n if (!match?.groups?.hex) {\n return null;\n }\n\n const int = Number.parseInt(match.groups.hex, 16);\n const r = Math.floor(int / 65_536) / 255;\n const g = Math.floor((int % 65_536) / 256) / 255;\n const b = (int % 256) / 255;\n const max = Math.max(r, g, b);\n const min = Math.min(r, g, b);\n const delta = max - min;\n let h = 0;\n\n if (delta > 0) {\n if (max === r) {\n h = 60 * (((g - b) / delta) % 6);\n } else if (max === g) {\n h = 60 * ((b - r) / delta + 2);\n } else {\n h = 60 * ((r - g) / delta + 4);\n }\n }\n\n return {\n h: (h + 360) % 360,\n s: max === 0 ? 0 : delta / max,\n v: max,\n };\n};\n\nexport const hsvToHex = ({ h, s, v }: Hsv): string => {\n const f = (n: number) => {\n const k = (n + h / 60) % 6;\n const channel = v - v * s * Math.max(0, Math.min(k, 4 - k, 1));\n return Math.round(channel * 255)\n .toString(16)\n .padStart(2, \"0\");\n };\n\n return `#${f(5)}${f(3)}${f(1)}`;\n};\n\n/**\n * Shared square thumb: filled with the color it points at, white ring,\n * transform-centered. Swells slightly while its plane is being dragged so\n * the hand feels the grab; settles back on release.\n */\nconst Thumb = ({\n dragging,\n style,\n}: {\n dragging?: boolean;\n style: CSSProperties;\n}) => (\n \n);\n\ninterface EyeDropperResult {\n sRGBHex: string;\n}\n\ntype EyeDropperConstructor = new () => {\n open: () => Promise;\n};\n\nconst getEyeDropper = (): EyeDropperConstructor | null => {\n if (typeof window === \"undefined\") {\n return null;\n }\n\n const candidate = (window as { EyeDropper?: EyeDropperConstructor })\n .EyeDropper;\n return candidate ?? null;\n};\n\n/** Turn a pointer event into 0-1 coordinates within the target. */\nconst fraction = (event: PointerEvent) => {\n const rect = event.currentTarget.getBoundingClientRect();\n return {\n x: clamp01((event.clientX - rect.left) / rect.width),\n y: clamp01((event.clientY - rect.top) / rect.height),\n };\n};\n\nconst arrowDelta = (key: string): [number, number] | null => {\n switch (key) {\n case \"ArrowUp\": {\n return [0, -1];\n }\n case \"ArrowDown\": {\n return [0, 1];\n }\n case \"ArrowLeft\": {\n return [-1, 0];\n }\n case \"ArrowRight\": {\n return [1, 0];\n }\n default: {\n return null;\n }\n }\n};\n\nexport const ColorPicker = ({\n className,\n defaultValue = \"#00e599\",\n disabled = false,\n label = \"Color\",\n onValueChange,\n swatches,\n value,\n ...props\n}: ColorPickerProps) => {\n const [hsv, setHsv] = useState(\n () => hexToHsv(defaultValue) ?? { h: 160, s: 1, v: 0.9 }\n );\n // Hex input draft, only while the field is being edited.\n const [draft, setDraft] = useState(null);\n // Controlled value changes re-seed HSV during render (no effect needed).\n const [seenValue, setSeenValue] = useState(value);\n\n if (value !== seenValue) {\n setSeenValue(value);\n const parsed = value ? hexToHsv(value) : null;\n\n if (parsed) {\n setHsv(parsed);\n }\n }\n\n const hex = (value ?? hsvToHex(hsv)).toLowerCase();\n const [dragging, setDragging] = useState<\"field\" | \"hue\" | null>(null);\n const [copied, setCopied] = useState(false);\n const eyeDropper = getEyeDropper();\n\n const commit = (next: Hsv) => {\n setHsv(next);\n setDraft(null);\n onValueChange?.(hsvToHex(next));\n };\n\n const commitHex = (candidate: string) => {\n const parsed = hexToHsv(candidate);\n\n if (parsed) {\n commit(parsed);\n } else {\n setDraft(null);\n }\n };\n\n const pickFromScreen = async () => {\n if (!eyeDropper) {\n return;\n }\n\n try {\n const result = await new eyeDropper().open();\n commitHex(result.sRGBHex);\n } catch {\n // Dismissed the eyedropper; keep the current color.\n }\n };\n\n const copyHex = async () => {\n await navigator.clipboard.writeText(hex);\n setCopied(true);\n window.setTimeout(() => setCopied(false), 1200);\n };\n\n const handleFieldPointer = (event: PointerEvent) => {\n event.currentTarget.setPointerCapture(event.pointerId);\n setDragging(\"field\");\n const { x, y } = fraction(event);\n commit({ ...hsv, s: x, v: 1 - y });\n };\n\n const handleFieldKey = (event: KeyboardEvent) => {\n const delta = arrowDelta(event.key);\n\n if (!delta) {\n return;\n }\n\n event.preventDefault();\n const step = event.shiftKey ? 0.1 : 0.02;\n commit({\n ...hsv,\n s: clamp01(hsv.s + delta[0] * step),\n v: clamp01(hsv.v - delta[1] * step),\n });\n };\n\n const handleHuePointer = (event: PointerEvent) => {\n event.currentTarget.setPointerCapture(event.pointerId);\n setDragging(\"hue\");\n commit({ ...hsv, h: fraction(event).x * 360 });\n };\n\n const handleHueKey = (event: KeyboardEvent) => {\n const delta = arrowDelta(event.key);\n\n if (!delta) {\n return;\n }\n\n event.preventDefault();\n const step = event.shiftKey ? 30 : 4;\n commit({ ...hsv, h: (hsv.h + delta[0] * step + 360) % 360 });\n };\n\n const hueOnly = hsvToHex({ h: hsv.h, s: 1, v: 1 });\n\n return (\n \n \n \n {hex}\n \n \n \n \n {\n if (event.buttons > 0) {\n handleFieldPointer(event);\n }\n }}\n onPointerUp={() => setDragging(null)}\n role=\"slider\"\n style={{\n background: `linear-gradient(to top, #000, transparent), linear-gradient(to right, #fff, transparent), ${hueOnly}`,\n }}\n tabIndex={disabled ? -1 : 0}\n >\n \n \n\n {\n if (event.buttons > 0) {\n handleHuePointer(event);\n }\n }}\n onPointerUp={() => setDragging(null)}\n role=\"slider\"\n style={{\n background:\n \"linear-gradient(to right, #f00, #ff0, #0f0, #0ff, #00f, #f0f, #f00)\",\n }}\n tabIndex={disabled ? -1 : 0}\n >\n \n \n\n
\n #\n commitHex(draft ?? hex)}\n onChange={(event) => setDraft(event.target.value)}\n onKeyDown={(event) => {\n if (event.key === \"Enter\") {\n commitHex(draft ?? hex);\n }\n }}\n spellCheck={false}\n value={(draft ?? hex).replace(\"#\", \"\")}\n />\n \n {copied ? (\n \n ) : (\n \n )}\n \n {eyeDropper ? (\n \n \n \n ) : null}\n
\n\n {swatches?.length ? (\n
\n {swatches.map((swatch) => (\n commitHex(swatch)}\n style={{ backgroundColor: swatch }}\n type=\"button\"\n />\n ))}\n
\n ) : null}\n \n \n \n \n );\n};\n", "type": "registry:component" } ], "type": "registry:component" }