4f:I[707087,["/_next/static/immutable/chunks/3arlv5bvukoo2.js","/_next/static/immutable/chunks/39v64hmfyo-sr.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/04j_o97cgxn2x.js","/_next/static/immutable/chunks/3upr08c9vtj8w.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/3j06ow7w40nxu.js","/_next/static/immutable/chunks/31nn7jwsjvqii.js","/_next/static/immutable/chunks/43_s7jweyypoh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1lo-zn37dolb5.js","/_next/static/immutable/chunks/1v8k6yxw1rg0u.js"],"RegistryDependencies"] 50:I[314491,["/_next/static/immutable/chunks/3arlv5bvukoo2.js","/_next/static/immutable/chunks/39v64hmfyo-sr.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/04j_o97cgxn2x.js","/_next/static/immutable/chunks/3upr08c9vtj8w.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/3j06ow7w40nxu.js","/_next/static/immutable/chunks/31nn7jwsjvqii.js","/_next/static/immutable/chunks/43_s7jweyypoh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1lo-zn37dolb5.js","/_next/static/immutable/chunks/1v8k6yxw1rg0u.js"],"FilesView"] 51:T3830,"use client"; /* 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 */ import { Popover } from "@base-ui/react/popover"; import { ColorPickerIcon, Copy01Icon, Tick02Icon, } from "@hugeicons/core-free-icons"; import { HugeiconsIcon } from "@hugeicons/react"; import type { CSSProperties, KeyboardEvent, PointerEvent } from "react"; import { useState } from "react"; import { cn } from "@/lib/utils"; export interface ColorPickerProps { /** Controlled hex value, e.g. "#00e599". */ value?: string; /** Uncontrolled initial hex value. */ defaultValue?: string; onValueChange?: (hex: string) => void; /** Preset swatches rendered under the field. */ swatches?: string[]; disabled?: boolean; className?: string; /** Accessible label for the trigger. */ label?: string; } /* ───────────────────────────────────────────────────────── * COLOR MATH — HSV internally, hex at the edges. Hue is * kept in state (not re-derived) so the rail doesn't snap * to 0 when saturation or value hit their extremes. * ───────────────────────────────────────────────────────── */ export interface Hsv { h: number; s: number; v: number; } const HEX_RE = /^#?(?[0-9a-f]{6})$/iu; const clamp01 = (x: number) => Math.min(1, Math.max(0, x)); export const hexToHsv = (hex: string): Hsv | null => { const match = HEX_RE.exec(hex.trim()); if (!match?.groups?.hex) { return null; } const int = Number.parseInt(match.groups.hex, 16); const r = Math.floor(int / 65_536) / 255; const g = Math.floor((int % 65_536) / 256) / 255; const b = (int % 256) / 255; const max = Math.max(r, g, b); const min = Math.min(r, g, b); const delta = max - min; let h = 0; if (delta > 0) { if (max === r) { h = 60 * (((g - b) / delta) % 6); } else if (max === g) { h = 60 * ((b - r) / delta + 2); } else { h = 60 * ((r - g) / delta + 4); } } return { h: (h + 360) % 360, s: max === 0 ? 0 : delta / max, v: max, }; }; export const hsvToHex = ({ h, s, v }: Hsv): string => { const f = (n: number) => { const k = (n + h / 60) % 6; const channel = v - v * s * Math.max(0, Math.min(k, 4 - k, 1)); return Math.round(channel * 255) .toString(16) .padStart(2, "0"); }; return `#${f(5)}${f(3)}${f(1)}`; }; /** * Shared square thumb: filled with the color it points at, white ring, * transform-centered. Swells slightly while its plane is being dragged so * the hand feels the grab; settles back on release. */ const Thumb = ({ dragging, style, }: { dragging?: boolean; style: CSSProperties; }) => ( ); interface EyeDropperResult { sRGBHex: string; } type EyeDropperConstructor = new () => { open: () => Promise; }; const getEyeDropper = (): EyeDropperConstructor | null => { if (typeof window === "undefined") { return null; } const candidate = (window as { EyeDropper?: EyeDropperConstructor }) .EyeDropper; return candidate ?? null; }; /** Turn a pointer event into 0-1 coordinates within the target. */ const fraction = (event: PointerEvent) => { const rect = event.currentTarget.getBoundingClientRect(); return { x: clamp01((event.clientX - rect.left) / rect.width), y: clamp01((event.clientY - rect.top) / rect.height), }; }; const arrowDelta = (key: string): [number, number] | null => { switch (key) { case "ArrowUp": { return [0, -1]; } case "ArrowDown": { return [0, 1]; } case "ArrowLeft": { return [-1, 0]; } case "ArrowRight": { return [1, 0]; } default: { return null; } } }; export const ColorPicker = ({ className, defaultValue = "#00e599", disabled = false, label = "Color", onValueChange, swatches, value, ...props }: ColorPickerProps) => { const [hsv, setHsv] = useState( () => hexToHsv(defaultValue) ?? { h: 160, s: 1, v: 0.9 } ); // Hex input draft, only while the field is being edited. const [draft, setDraft] = useState(null); // Controlled value changes re-seed HSV during render (no effect needed). const [seenValue, setSeenValue] = useState(value); if (value !== seenValue) { setSeenValue(value); const parsed = value ? hexToHsv(value) : null; if (parsed) { setHsv(parsed); } } const hex = (value ?? hsvToHex(hsv)).toLowerCase(); const [dragging, setDragging] = useState<"field" | "hue" | null>(null); const [copied, setCopied] = useState(false); const eyeDropper = getEyeDropper(); const commit = (next: Hsv) => { setHsv(next); setDraft(null); onValueChange?.(hsvToHex(next)); }; const commitHex = (candidate: string) => { const parsed = hexToHsv(candidate); if (parsed) { commit(parsed); } else { setDraft(null); } }; const pickFromScreen = async () => { if (!eyeDropper) { return; } try { const result = await new eyeDropper().open(); commitHex(result.sRGBHex); } catch { // Dismissed the eyedropper; keep the current color. } }; const copyHex = async () => { await navigator.clipboard.writeText(hex); setCopied(true); window.setTimeout(() => setCopied(false), 1200); }; const handleFieldPointer = (event: PointerEvent) => { event.currentTarget.setPointerCapture(event.pointerId); setDragging("field"); const { x, y } = fraction(event); commit({ ...hsv, s: x, v: 1 - y }); }; const handleFieldKey = (event: KeyboardEvent) => { const delta = arrowDelta(event.key); if (!delta) { return; } event.preventDefault(); const step = event.shiftKey ? 0.1 : 0.02; commit({ ...hsv, s: clamp01(hsv.s + delta[0] * step), v: clamp01(hsv.v - delta[1] * step), }); }; const handleHuePointer = (event: PointerEvent) => { event.currentTarget.setPointerCapture(event.pointerId); setDragging("hue"); commit({ ...hsv, h: fraction(event).x * 360 }); }; const handleHueKey = (event: KeyboardEvent) => { const delta = arrowDelta(event.key); if (!delta) { return; } event.preventDefault(); const step = event.shiftKey ? 30 : 4; commit({ ...hsv, h: (hsv.h + delta[0] * step + 360) % 360 }); }; const hueOnly = hsvToHex({ h: hsv.h, s: 1, v: 1 }); return (

{ if (event.buttons > 0) { handleFieldPointer(event); } }} onPointerUp={() => setDragging(null)} role="slider" style={{ background: `linear-gradient(to top, #000, transparent), linear-gradient(to right, #fff, transparent), ${hueOnly}`, }} tabIndex={disabled ? -1 : 0} >

{ if (event.buttons > 0) { handleHuePointer(event); } }} onPointerUp={() => setDragging(null)} role="slider" style={{ background: "linear-gradient(to right, #f00, #ff0, #0f0, #0ff, #00f, #f0f, #f00)", }} tabIndex={disabled ? -1 : 0} >

# commitHex(draft ?? hex)} onChange={(event) => setDraft(event.target.value)} onKeyDown={(event) => { if (event.key === "Enter") { commitHex(draft ?? hex); } }} spellCheck={false} value={(draft ?? hex).replace("#", "")} /> {eyeDropper ? ( ) : null}

{swatches?.length ? (

{swatches.map((swatch) => (

) : null} ); }; 4e:["$","div",null,{"className":"mt-3 flex min-h-0 min-w-0 flex-1 flex-col gap-3","children":[["$","div",null,{"className":"flex shrink-0 items-start gap-3","children":[["$","div",null,{"className":"flex max-h-28 min-w-0 flex-1 flex-wrap items-center gap-2 overflow-y-auto","children":[["$","ul",null,{"className":"flex min-w-0 flex-wrap gap-2","aria-label":"Package dependencies","children":[["$","li","@base-ui/react",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/%40base-ui%2Freact","target":"_blank","rel":"noopener noreferrer","className":"flex max-w-full min-w-0 items-center gap-1.5 rounded-md border px-2 py-1.5 text-xs","children":[["$","svg",null,{"viewBox":"0 0 24 24","className":"size-3 shrink-0","children":["$","path",null,{"d":"M1.763 0C.786 0 0 .786 0 1.763v20.474C0 23.214.786 24 1.763 24h20.474c.977 0 1.763-.786 1.763-1.763V1.763C24 .786 23.214 0 22.237 0zM5.13 5.323l13.837.019-.009 13.836h-3.464l.01-10.382h-3.456L12.04 19.17H5.113z","fill":"currentColor"}]}],["$","span",null,{"className":"min-w-0 break-all text-xs font-medium","children":"@base-ui/react"}]]}]}],["$","li","@hugeicons/core-free-icons",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/%40hugeicons%2Fcore-free-icons","target":"_blank","rel":"noopener noreferrer","className":"flex max-w-full min-w-0 items-center gap-1.5 rounded-md border px-2 py-1.5 text-xs","children":[["$","svg",null,{"viewBox":"0 0 24 24","className":"size-3 shrink-0","children":["$","path",null,{"d":"M1.763 0C.786 0 0 .786 0 1.763v20.474C0 23.214.786 24 1.763 24h20.474c.977 0 1.763-.786 1.763-1.763V1.763C24 .786 23.214 0 22.237 0zM5.13 5.323l13.837.019-.009 13.836h-3.464l.01-10.382h-3.456L12.04 19.17H5.113z","fill":"currentColor"}]}],["$","span",null,{"className":"min-w-0 break-all text-xs font-medium","children":"@hugeicons/core-free-icons"}]]}]}],["$","li","@hugeicons/react",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/%40hugeicons%2Freact","target":"_blank","rel":"noopener noreferrer","className":"flex max-w-full min-w-0 items-center gap-1.5 rounded-md border px-2 py-1.5 text-xs","children":[["$","svg",null,{"viewBox":"0 0 24 24","className":"size-3 shrink-0","children":["$","path",null,{"d":"M1.763 0C.786 0 0 .786 0 1.763v20.474C0 23.214.786 24 1.763 24h20.474c.977 0 1.763-.786 1.763-1.763V1.763C24 .786 23.214 0 22.237 0zM5.13 5.323l13.837.019-.009 13.836h-3.464l.01-10.382h-3.456L12.04 19.17H5.113z","fill":"currentColor"}]}],["$","span",null,{"className":"min-w-0 break-all text-xs font-medium","children":"@hugeicons/react"}]]}]}]]}],["$","$L4f",null,{"namespace":"@neon-ui","registryDependencies":["utils","https://ui.neon.com/r/neon-tokens.json"]}]]}],null]}],["$","$L50",null,{"files":[{"path":"src/components/color-picker/color-picker.tsx","content":"$51","type":"registry:component"}],"className":"h-[70svh] min-h-80"}]]}]