ColorPicker

1"use client";
2 
3/* 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 */
4 
5import { Popover } from "@base-ui/react/popover";
6import {
7  ColorPickerIcon,
8  Copy01Icon,
9  Tick02Icon,
10} from "@hugeicons/core-free-icons";
11import { HugeiconsIcon } from "@hugeicons/react";
12import type { CSSProperties, KeyboardEvent, PointerEvent } from "react";
13import { useState } from "react";
14 
15import { cn } from "@/lib/utils";
16 
17export interface ColorPickerProps {
18  /** Controlled hex value, e.g. "#00e599". */
19  value?: string;
20  /** Uncontrolled initial hex value. */
21  defaultValue?: string;
22  onValueChange?: (hex: string) => void;
23  /** Preset swatches rendered under the field. */
24  swatches?: string[];
25  disabled?: boolean;
26  className?: string;
27  /** Accessible label for the trigger. */
28  label?: string;
29}
30 
31/* ─────────────────────────────────────────────────────────
32 * COLOR MATH — HSV internally, hex at the edges. Hue is
33 * kept in state (not re-derived) so the rail doesn't snap
34 * to 0 when saturation or value hit their extremes.
35 * ───────────────────────────────────────────────────────── */
36export interface Hsv {
37  h: number;
38  s: number;
39  v: number;
40}
41 
42const HEX_RE = /^#?(?<hex>[0-9a-f]{6})$/iu;
43 
44const clamp01 = (x: number) => Math.min(1, Math.max(0, x));
45 
46export const hexToHsv = (hex: string): Hsv | null => {
47  const match = HEX_RE.exec(hex.trim());
48 
49  if (!match?.groups?.hex) {
50    return null;
51  }
52 
53  const int = Number.parseInt(match.groups.hex, 16);
54  const r = Math.floor(int / 65_536) / 255;
55  const g = Math.floor((int % 65_536) / 256) / 255;
56  const b = (int % 256) / 255;
57  const max = Math.max(r, g, b);
58  const min = Math.min(r, g, b);
59  const delta = max - min;
60  let h = 0;
61 
62  if (delta > 0) {
63    if (max === r) {
64      h = 60 * (((g - b) / delta) % 6);
65    } else if (max === g) {
66      h = 60 * ((b - r) / delta + 2);
67    } else {
68      h = 60 * ((r - g) / delta + 4);
69    }
70  }
71 
72  return {
73    h: (h + 360) % 360,
74    s: max === 0 ? 0 : delta / max,
75    v: max,
76  };
77};
78 
79export const hsvToHex = ({ h, s, v }: Hsv): string => {
80  const f = (n: number) => {
81    const k = (n + h / 60) % 6;
82// … truncated