@prototyperco/ui 0.5.0-alpha.0 → 0.5.0

package/dist/components/color-picker.js

@@ -0,0 +1,939 @@
+"use client";
+
+// src/components/color-picker.tsx
+import * as React from "react";
+import { Popover as PopoverPrimitive } from "@base-ui/react/popover";
+import { Pipette } from "lucide-react";
+
+// src/lib/utils.ts
+import { clsx } from "clsx";
+import { twMerge } from "tailwind-merge";
+function cn(...inputs) {
+  return twMerge(clsx(inputs));
+}
+
+// src/lib/color-utils.ts
+var DEG = Math.PI / 180;
+var MAX_CHROMA = 0.4;
+function clamp(v, min, max) {
+  return Math.min(max, Math.max(min, v));
+}
+function round(v, d) {
+  const f = 10 ** d;
+  return Math.round(v * f) / f;
+}
+function oklchToOklab(l, c, h) {
+  const hRad = h * DEG;
+  return { L: l, a: c * Math.cos(hRad), b: c * Math.sin(hRad) };
+}
+function oklabToOklch(L, a, b) {
+  const c = Math.sqrt(a * a + b * b);
+  let h = Math.atan2(b, a) / DEG;
+  if (h < 0) h += 360;
+  return { l: L, c, h };
+}
+function oklabToLinearRgb(L, a, b) {
+  const l_ = L + 0.3963377774 * a + 0.2158037573 * b;
+  const m_ = L - 0.1055613458 * a - 0.0638541728 * b;
+  const s_ = L - 0.0894841775 * a - 1.291485548 * b;
+  const l = l_ * l_ * l_;
+  const m = m_ * m_ * m_;
+  const s = s_ * s_ * s_;
+  return {
+    r: 4.0767416621 * l - 3.3077115913 * m + 0.2309699292 * s,
+    g: -1.2684380046 * l + 2.6097574011 * m - 0.3413193965 * s,
+    b: -0.0041960863 * l - 0.7034186147 * m + 1.707614701 * s
+  };
+}
+function linearRgbToOklab(r, g, b) {
+  const l = Math.cbrt(0.4122214708 * r + 0.5363325363 * g + 0.0514459929 * b);
+  const m = Math.cbrt(0.2119034982 * r + 0.6806995451 * g + 0.1073969566 * b);
+  const s = Math.cbrt(0.0883024619 * r + 0.2817188376 * g + 0.6299787005 * b);
+  return {
+    L: 0.2104542553 * l + 0.793617785 * m - 0.0040720468 * s,
+    a: 1.9779984951 * l - 2.428592205 * m + 0.4505937099 * s,
+    b: 0.0259040371 * l + 0.7827717662 * m - 0.808675766 * s
+  };
+}
+function linearToSrgb(c) {
+  return c <= 31308e-7 ? 12.92 * c : 1.055 * Math.pow(c, 1 / 2.4) - 0.055;
+}
+function srgbToLinear(c) {
+  return c <= 0.04045 ? c / 12.92 : Math.pow((c + 0.055) / 1.055, 2.4);
+}
+function oklchToRgb(l, c, h) {
+  const lab = oklchToOklab(l, c, h);
+  const lin = oklabToLinearRgb(lab.L, lab.a, lab.b);
+  return [
+    clamp(Math.round(linearToSrgb(lin.r) * 255), 0, 255),
+    clamp(Math.round(linearToSrgb(lin.g) * 255), 0, 255),
+    clamp(Math.round(linearToSrgb(lin.b) * 255), 0, 255)
+  ];
+}
+function rgbToOklch(r, g, b) {
+  const lr = srgbToLinear(r / 255);
+  const lg = srgbToLinear(g / 255);
+  const lb = srgbToLinear(b / 255);
+  const lab = linearRgbToOklab(lr, lg, lb);
+  return oklabToOklch(lab.L, lab.a, lab.b);
+}
+function isInGamut(l, c, h) {
+  const lab = oklchToOklab(l, c, h);
+  const lin = oklabToLinearRgb(lab.L, lab.a, lab.b);
+  const eps = 1e-3;
+  return lin.r >= -eps && lin.r <= 1 + eps && lin.g >= -eps && lin.g <= 1 + eps && lin.b >= -eps && lin.b <= 1 + eps;
+}
+function gamutMapChroma(l, c, h) {
+  if (isInGamut(l, c, h)) return c;
+  let lo = 0;
+  let hi = c;
+  while (hi - lo > 1e-3) {
+    const mid = (lo + hi) / 2;
+    if (isInGamut(l, mid, h)) lo = mid;
+    else hi = mid;
+  }
+  return lo;
+}
+function hexToRgb(hex) {
+  hex = hex.replace(/^#/, "");
+  if (hex.length === 3 || hex.length === 4) {
+    hex = hex.split("").map((c) => c + c).join("");
+  }
+  const r = parseInt(hex.slice(0, 2), 16);
+  const g = parseInt(hex.slice(2, 4), 16);
+  const b = parseInt(hex.slice(4, 6), 16);
+  const a = hex.length === 8 ? parseInt(hex.slice(6, 8), 16) / 255 : 1;
+  return [r, g, b, a];
+}
+function rgbToHex(r, g, b, a) {
+  const hex = [r, g, b].map((v) => clamp(Math.round(v), 0, 255).toString(16).padStart(2, "0")).join("");
+  if (a !== void 0 && a < 1) {
+    return `#${hex}${clamp(Math.round(a * 255), 0, 255).toString(16).padStart(2, "0")}`;
+  }
+  return `#${hex}`;
+}
+function parseColor(input) {
+  const s = input.trim().toLowerCase();
+  if (s.startsWith("#")) {
+    const [r, g, b, a] = hexToRgb(s);
+    if (isNaN(r) || isNaN(g) || isNaN(b)) return null;
+    const oklch = rgbToOklch(r, g, b);
+    return { l: oklch.l, c: oklch.c, h: oklch.h, a };
+  }
+  const oklchMatch = s.match(
+    /oklch\(\s*([\d.]+)%?\s+([\d.]+)\s+([\d.]+)(?:\s*\/\s*([\d.]+%?))?\s*\)/
+  );
+  if (oklchMatch) {
+    let l = parseFloat(oklchMatch[1]);
+    if (l > 1) l /= 100;
+    const c = parseFloat(oklchMatch[2]);
+    const h = parseFloat(oklchMatch[3]);
+    let a = 1;
+    if (oklchMatch[4]) {
+      a = oklchMatch[4].endsWith("%") ? parseFloat(oklchMatch[4]) / 100 : parseFloat(oklchMatch[4]);
+    }
+    return { l, c, h, a };
+  }
+  const rgbMatch = s.match(
+    /rgba?\(\s*([\d.]+)[,\s]+([\d.]+)[,\s]+([\d.]+)(?:[,\s/]+([\d.]+%?))?\s*\)/
+  );
+  if (rgbMatch) {
+    const r = parseFloat(rgbMatch[1]);
+    const g = parseFloat(rgbMatch[2]);
+    const b = parseFloat(rgbMatch[3]);
+    let a = 1;
+    if (rgbMatch[4]) {
+      a = rgbMatch[4].endsWith("%") ? parseFloat(rgbMatch[4]) / 100 : parseFloat(rgbMatch[4]);
+    }
+    const oklch = rgbToOklch(r, g, b);
+    return { l: oklch.l, c: oklch.c, h: oklch.h, a };
+  }
+  const hslMatch = s.match(
+    /hsla?\(\s*([\d.]+)[,\s]+([\d.]+)%[,\s]+([\d.]+)%(?:[,\s/]+([\d.]+%?))?\s*\)/
+  );
+  if (hslMatch) {
+    const [r, g, b] = hslToRgb(
+      parseFloat(hslMatch[1]),
+      parseFloat(hslMatch[2]),
+      parseFloat(hslMatch[3])
+    );
+    let a = 1;
+    if (hslMatch[4]) {
+      a = hslMatch[4].endsWith("%") ? parseFloat(hslMatch[4]) / 100 : parseFloat(hslMatch[4]);
+    }
+    const oklch = rgbToOklch(r, g, b);
+    return { l: oklch.l, c: oklch.c, h: oklch.h, a };
+  }
+  const named = {
+    white: "#ffffff",
+    black: "#000000",
+    red: "#ff0000",
+    green: "#008000",
+    blue: "#0000ff",
+    yellow: "#ffff00",
+    cyan: "#00ffff",
+    magenta: "#ff00ff",
+    orange: "#ffa500",
+    transparent: "#00000000"
+  };
+  if (named[s]) return parseColor(named[s]);
+  return null;
+}
+function hslToRgb(h, s, l) {
+  s /= 100;
+  l /= 100;
+  const c = (1 - Math.abs(2 * l - 1)) * s;
+  const x = c * (1 - Math.abs(h / 60 % 2 - 1));
+  const m = l - c / 2;
+  let r = 0, g = 0, b = 0;
+  if (h < 60) {
+    r = c;
+    g = x;
+  } else if (h < 120) {
+    r = x;
+    g = c;
+  } else if (h < 180) {
+    g = c;
+    b = x;
+  } else if (h < 240) {
+    g = x;
+    b = c;
+  } else if (h < 300) {
+    r = x;
+    b = c;
+  } else {
+    r = c;
+    b = x;
+  }
+  return [
+    Math.round((r + m) * 255),
+    Math.round((g + m) * 255),
+    Math.round((b + m) * 255)
+  ];
+}
+function rgbToHsl(r, g, b) {
+  r /= 255;
+  g /= 255;
+  b /= 255;
+  const max = Math.max(r, g, b);
+  const min = Math.min(r, g, b);
+  const l = (max + min) / 2;
+  if (max === min) return [0, 0, l * 100];
+  const d = max - min;
+  const s = l > 0.5 ? d / (2 - max - min) : d / (max + min);
+  let h = 0;
+  if (max === r) h = ((g - b) / d + (g < b ? 6 : 0)) / 6;
+  else if (max === g) h = ((b - r) / d + 2) / 6;
+  else h = ((r - g) / d + 4) / 6;
+  return [h * 360, s * 100, l * 100];
+}
+function formatColor(color, format) {
+  const hasAlpha = color.a < 1;
+  switch (format) {
+    case "hex": {
+      const [r, g, b] = oklchToRgb(color.l, color.c, color.h);
+      return rgbToHex(r, g, b, hasAlpha ? color.a : void 0);
+    }
+    case "oklch": {
+      const l = round(color.l * 100, 1);
+      const c = round(color.c, 3);
+      const h = round(color.h, 1);
+      return hasAlpha ? `oklch(${l}% ${c} ${h} / ${round(color.a, 2)})` : `oklch(${l}% ${c} ${h})`;
+    }
+    case "rgb": {
+      const [r, g, b] = oklchToRgb(color.l, color.c, color.h);
+      return hasAlpha ? `rgba(${r}, ${g}, ${b}, ${round(color.a, 2)})` : `rgb(${r}, ${g}, ${b})`;
+    }
+    case "hsl": {
+      const [r, g, b] = oklchToRgb(color.l, color.c, color.h);
+      const [h, s, l] = rgbToHsl(r, g, b);
+      return hasAlpha ? `hsla(${round(h, 0)}, ${round(s, 1)}%, ${round(l, 1)}%, ${round(color.a, 2)})` : `hsl(${round(h, 0)}, ${round(s, 1)}%, ${round(l, 1)}%)`;
+    }
+  }
+}
+function renderAreaGradient(width, height, hue) {
+  const data = new ImageData(width, height);
+  const buf = data.data;
+  for (let y = 0; y < height; y++) {
+    const l = 1 - y / (height - 1);
+    for (let x = 0; x < width; x++) {
+      const c = x / (width - 1) * MAX_CHROMA;
+      const [r, g, b] = oklchToRgb(l, c, hue);
+      const idx = (y * width + x) * 4;
+      buf[idx] = r;
+      buf[idx + 1] = g;
+      buf[idx + 2] = b;
+      buf[idx + 3] = 255;
+    }
+  }
+  return data;
+}
+
+// src/components/color-picker.tsx
+import { jsx, jsxs } from "react/jsx-runtime";
+var ColorPickerCtx = React.createContext(
+  null
+);
+function useColorPicker() {
+  const ctx = React.useContext(ColorPickerCtx);
+  if (!ctx)
+    throw new Error(
+      "ColorPicker sub-components must be used within <ColorPicker>"
+    );
+  return ctx;
+}
+function ColorPicker({
+  value: controlledValue,
+  defaultValue = "#6366f1",
+  onValueChange,
+  onValueCommit,
+  outputFormat = "hex",
+  name,
+  disabled = false,
+  enableAlpha = false,
+  open,
+  onOpenChange,
+  children,
+  className
+}) {
+  const [internal, setInternal] = React.useState(
+    () => parseColor(controlledValue ?? defaultValue) ?? {
+      l: 0.55,
+      c: 0.25,
+      h: 264,
+      a: 1
+    }
+  );
+  const [isDragging, setIsDragging] = React.useState(false);
+  const prevControlled = React.useRef(controlledValue);
+  React.useEffect(() => {
+    if (controlledValue !== void 0 && controlledValue !== prevControlled.current) {
+      prevControlled.current = controlledValue;
+      const parsed = parseColor(controlledValue);
+      if (parsed) setInternal(parsed);
+    }
+  }, [controlledValue]);
+  const color = React.useMemo(() => {
+    if (controlledValue !== void 0) {
+      return parseColor(controlledValue) ?? internal;
+    }
+    return internal;
+  }, [controlledValue, internal]);
+  const cssValue = React.useMemo(
+    () => formatColor(color, outputFormat),
+    [color, outputFormat]
+  );
+  const updateColor = React.useCallback(
+    (next) => {
+      setInternal(next);
+      const formatted = formatColor(next, outputFormat);
+      onValueChange?.(formatted);
+    },
+    [outputFormat, onValueChange]
+  );
+  const setChannel = React.useCallback(
+    (channel, value) => {
+      updateColor({ ...color, [channel]: value });
+    },
+    [color, updateColor]
+  );
+  const setColor = React.useCallback(
+    (next) => {
+      updateColor(next);
+    },
+    [updateColor]
+  );
+  const setColorFromString = React.useCallback(
+    (css) => {
+      const parsed = parseColor(css);
+      if (parsed) updateColor(parsed);
+    },
+    [updateColor]
+  );
+  const onInteractionEnd = React.useCallback(() => {
+    const formatted = formatColor(color, outputFormat);
+    onValueCommit?.(formatted);
+  }, [color, outputFormat, onValueCommit]);
+  const ctx = React.useMemo(
+    () => ({
+      color,
+      setChannel,
+      setColor,
+      setColorFromString,
+      cssValue,
+      outputFormat,
+      disabled,
+      enableAlpha,
+      isDragging,
+      setIsDragging,
+      onInteractionEnd
+    }),
+    [
+      color,
+      setChannel,
+      setColor,
+      setColorFromString,
+      cssValue,
+      outputFormat,
+      disabled,
+      enableAlpha,
+      isDragging,
+      setIsDragging,
+      onInteractionEnd
+    ]
+  );
+  return /* @__PURE__ */ jsx(ColorPickerCtx, { value: ctx, children: /* @__PURE__ */ jsx(PopoverPrimitive.Root, { open, onOpenChange, children: /* @__PURE__ */ jsxs("div", { "data-slot": "color-picker", className: cn("inline-flex", className), children: [
+    children,
+    name && /* @__PURE__ */ jsx("input", { type: "hidden", name, value: cssValue })
+  ] }) }) });
+}
+function ColorPickerTrigger({
+  className,
+  children,
+  ...props
+}) {
+  const { cssValue, disabled } = useColorPicker();
+  return /* @__PURE__ */ jsxs(
+    PopoverPrimitive.Trigger,
+    {
+      "data-slot": "color-picker-trigger",
+      disabled,
+      className: cn(
+        "inline-flex items-center gap-2 rounded-md border border-border bg-surface px-3 py-2 text-sm",
+        "focus-visible:focus-ring",
+        "disabled:status-disabled",
+        "transition-colors duration-150 motion-reduce:transition-none",
+        className
+      ),
+      ...props,
+      children: [
+        /* @__PURE__ */ jsx(
+          "span",
+          {
+            className: "size-5 shrink-0 rounded-sm border border-border/50 shadow-sm",
+            style: { backgroundColor: cssValue }
+          }
+        ),
+        children ?? /* @__PURE__ */ jsx("span", { className: "font-mono text-xs uppercase", children: cssValue })
+      ]
+    }
+  );
+}
+function ColorPickerContent({
+  className,
+  sideOffset = 8,
+  align = "start",
+  ...props
+}) {
+  return /* @__PURE__ */ jsx(PopoverPrimitive.Portal, { children: /* @__PURE__ */ jsx(
+    PopoverPrimitive.Positioner,
+    {
+      sideOffset,
+      align,
+      className: "isolate z-50",
+      children: /* @__PURE__ */ jsx(
+        PopoverPrimitive.Popup,
+        {
+          "data-slot": "color-picker-content",
+          className: cn(
+            "flex w-64 flex-col gap-3 rounded-lg bg-overlay p-3 shadow-overlay outline-none",
+            "origin-(--transform-origin)",
+            "data-open:animate-in data-open:duration-150 data-open:[animation-timing-function:var(--ease-out-fluid)]",
+            "data-closed:animate-out data-closed:duration-100 data-closed:[animation-timing-function:var(--ease-in-quart)]",
+            "data-closed:fade-out-0 data-open:fade-in-0 data-closed:zoom-out-95 data-open:zoom-in-95",
+            "data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
+            "data-entering:will-change-[opacity,transform] data-exiting:will-change-[opacity,transform]",
+            "motion-reduce:animate-none motion-reduce:transition-none",
+            className
+          ),
+          ...props
+        }
+      )
+    }
+  ) });
+}
+function ColorPickerArea({
+  className,
+  children,
+  ...props
+}) {
+  const { color, setColor, disabled, setIsDragging, onInteractionEnd } = useColorPicker();
+  const canvasRef = React.useRef(null);
+  const containerRef = React.useRef(null);
+  const prevHue = React.useRef(color.h);
+  React.useEffect(() => {
+    const canvas = canvasRef.current;
+    if (!canvas) return;
+    const ctx = canvas.getContext("2d", { willReadFrequently: true });
+    if (!ctx) return;
+    const w = 128;
+    const h = 128;
+    canvas.width = w;
+    canvas.height = h;
+    const imageData = renderAreaGradient(w, h, color.h);
+    ctx.putImageData(imageData, 0, 0);
+    prevHue.current = color.h;
+  }, [color.h]);
+  const computeFromPointer = React.useCallback(
+    (clientX, clientY) => {
+      const el = containerRef.current;
+      if (!el) return;
+      const rect = el.getBoundingClientRect();
+      const x = clamp((clientX - rect.left) / rect.width, 0, 1);
+      const y = clamp((clientY - rect.top) / rect.height, 0, 1);
+      const c = x * 0.4;
+      const l = 1 - y;
+      const clamped = gamutMapChroma(l, c, color.h);
+      setColor({ ...color, l, c: Math.min(c, clamped) });
+    },
+    [color, setColor]
+  );
+  const handlePointerDown = React.useCallback(
+    (e) => {
+      if (disabled) return;
+      e.preventDefault();
+      e.currentTarget.setPointerCapture(e.pointerId);
+      setIsDragging(true);
+      computeFromPointer(e.clientX, e.clientY);
+    },
+    [disabled, setIsDragging, computeFromPointer]
+  );
+  const handlePointerMove = React.useCallback(
+    (e) => {
+      if (!e.currentTarget.hasPointerCapture(e.pointerId))
+        return;
+      computeFromPointer(e.clientX, e.clientY);
+    },
+    [computeFromPointer]
+  );
+  const handlePointerUp = React.useCallback(() => {
+    setIsDragging(false);
+    onInteractionEnd();
+  }, [setIsDragging, onInteractionEnd]);
+  const handleKeyDown = React.useCallback(
+    (e) => {
+      if (disabled) return;
+      const step = e.shiftKey ? 5e-3 : 0.02;
+      let { l, c } = color;
+      let handled = true;
+      switch (e.key) {
+        case "ArrowRight":
+          c = Math.min(c + step, 0.4);
+          break;
+        case "ArrowLeft":
+          c = Math.max(c - step, 0);
+          break;
+        case "ArrowUp":
+          l = Math.min(l + step, 1);
+          break;
+        case "ArrowDown":
+          l = Math.max(l - step, 0);
+          break;
+        case "Home":
+          c = 0;
+          break;
+        case "End":
+          c = 0.4;
+          break;
+        case "PageUp":
+          l = 1;
+          break;
+        case "PageDown":
+          l = 0;
+          break;
+        default:
+          handled = false;
+      }
+      if (handled) {
+        e.preventDefault();
+        const clamped = gamutMapChroma(l, c, color.h);
+        setColor({ ...color, l, c: Math.min(c, clamped) });
+        onInteractionEnd();
+      }
+    },
+    [color, setColor, disabled, onInteractionEnd]
+  );
+  const thumbX = clamp(color.c / 0.4, 0, 1) * 100;
+  const thumbY = (1 - color.l) * 100;
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      ref: containerRef,
+      "data-slot": "color-picker-area",
+      role: "slider",
+      "aria-label": "Color area",
+      "aria-valuetext": `Lightness ${Math.round(color.l * 100)}%, Chroma ${Math.round(color.c / 0.4 * 100)}%`,
+      tabIndex: disabled ? -1 : 0,
+      className: cn(
+        "relative aspect-square w-full cursor-crosshair overflow-hidden rounded-md touch-none select-none",
+        "focus-visible:focus-ring",
+        disabled && "pointer-events-none opacity-50",
+        className
+      ),
+      onPointerDown: handlePointerDown,
+      onPointerMove: handlePointerMove,
+      onPointerUp: handlePointerUp,
+      onKeyDown: handleKeyDown,
+      ...props,
+      children: [
+        /* @__PURE__ */ jsx(
+          "canvas",
+          {
+            ref: canvasRef,
+            className: "pointer-events-none absolute inset-0 size-full",
+            style: { imageRendering: "auto" }
+          }
+        ),
+        children ?? /* @__PURE__ */ jsx(
+          ColorPickerAreaThumb,
+          {
+            style: { left: `${thumbX}%`, top: `${thumbY}%` }
+          }
+        )
+      ]
+    }
+  );
+}
+function ColorPickerAreaThumb({
+  className,
+  style,
+  ...props
+}) {
+  const { color, isDragging } = useColorPicker();
+  const [r, g, b] = oklchToRgb(color.l, color.c, color.h);
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      "data-slot": "color-picker-area-thumb",
+      className: cn(
+        "pointer-events-none absolute size-4 -translate-x-1/2 -translate-y-1/2 rounded-full border-2 border-white shadow-md",
+        "transition-transform duration-150 ease-smooth motion-reduce:transition-none",
+        isDragging && "scale-110 shadow-lg",
+        className
+      ),
+      style: {
+        backgroundColor: `rgb(${r}, ${g}, ${b})`,
+        ...style
+      },
+      ...props
+    }
+  );
+}
+function ColorPickerSlider({
+  channel,
+  className,
+  children,
+  ...props
+}) {
+  const {
+    color,
+    setChannel,
+    disabled,
+    setIsDragging,
+    onInteractionEnd,
+    enableAlpha
+  } = useColorPicker();
+  const trackRef = React.useRef(null);
+  if (channel === "alpha" && !enableAlpha) return null;
+  const isHue = channel === "hue";
+  const value = isHue ? color.h : color.a;
+  const min = 0;
+  const max = isHue ? 360 : 1;
+  const pct = (value - min) / (max - min) * 100;
+  const computeValue = React.useCallback(
+    (clientX) => {
+      const el = trackRef.current;
+      if (!el) return value;
+      const rect = el.getBoundingClientRect();
+      const ratio = clamp((clientX - rect.left) / rect.width, 0, 1);
+      return min + ratio * (max - min);
+    },
+    [min, max, value]
+  );
+  const handlePointerDown = React.useCallback(
+    (e) => {
+      if (disabled) return;
+      e.preventDefault();
+      e.currentTarget.setPointerCapture(e.pointerId);
+      setIsDragging(true);
+      const v = computeValue(e.clientX);
+      setChannel(isHue ? "h" : "a", v);
+    },
+    [disabled, setIsDragging, computeValue, setChannel, isHue]
+  );
+  const handlePointerMove = React.useCallback(
+    (e) => {
+      if (!e.currentTarget.hasPointerCapture(e.pointerId))
+        return;
+      const v = computeValue(e.clientX);
+      setChannel(isHue ? "h" : "a", v);
+    },
+    [computeValue, setChannel, isHue]
+  );
+  const handlePointerUp = React.useCallback(() => {
+    setIsDragging(false);
+    onInteractionEnd();
+  }, [setIsDragging, onInteractionEnd]);
+  const handleKeyDown = React.useCallback(
+    (e) => {
+      if (disabled) return;
+      const coarseStep = isHue ? 10 : 0.05;
+      const fineStep = isHue ? 1 : 0.01;
+      const step = e.shiftKey ? fineStep : coarseStep;
+      let v = value;
+      let handled = true;
+      switch (e.key) {
+        case "ArrowRight":
+        case "ArrowUp":
+          v = Math.min(v + step, max);
+          break;
+        case "ArrowLeft":
+        case "ArrowDown":
+          v = Math.max(v - step, min);
+          break;
+        case "Home":
+          v = min;
+          break;
+        case "End":
+          v = max;
+          break;
+        default:
+          handled = false;
+      }
+      if (handled) {
+        e.preventDefault();
+        setChannel(isHue ? "h" : "a", v);
+        onInteractionEnd();
+      }
+    },
+    [disabled, isHue, value, min, max, setChannel, onInteractionEnd]
+  );
+  const gradient = isHue ? `linear-gradient(to right, ${Array.from({ length: 13 }, (_, i) => {
+    const h = i / 12 * 360;
+    const [r, g, b] = oklchToRgb(0.7, 0.15, h);
+    return `rgb(${r},${g},${b})`;
+  }).join(",")})` : (() => {
+    const [r, g, b] = oklchToRgb(color.l, color.c, color.h);
+    return `linear-gradient(to right, transparent, rgb(${r},${g},${b}))`;
+  })();
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      ref: trackRef,
+      "data-slot": "color-picker-slider",
+      "data-channel": channel,
+      role: "slider",
+      tabIndex: disabled ? -1 : 0,
+      "aria-label": isHue ? "Hue" : "Alpha",
+      "aria-valuemin": min,
+      "aria-valuemax": max,
+      "aria-valuenow": Math.round(isHue ? value : value * 100),
+      className: cn(
+        "group relative h-3 w-full cursor-pointer rounded-full touch-none select-none",
+        "focus-visible:focus-ring",
+        disabled && "pointer-events-none opacity-50",
+        !isHue && "checkerboard",
+        className
+      ),
+      style: isHue ? { background: gradient } : void 0,
+      onPointerDown: handlePointerDown,
+      onPointerMove: handlePointerMove,
+      onPointerUp: handlePointerUp,
+      onKeyDown: handleKeyDown,
+      ...props,
+      children: [
+        !isHue && /* @__PURE__ */ jsx(
+          "div",
+          {
+            className: "absolute inset-0 rounded-full",
+            style: { background: gradient }
+          }
+        ),
+        children ?? /* @__PURE__ */ jsx(ColorPickerSliderThumb, { style: { left: `${pct}%` } })
+      ]
+    }
+  );
+}
+function ColorPickerSliderThumb({
+  className,
+  style,
+  ...props
+}) {
+  const { isDragging } = useColorPicker();
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      "data-slot": "color-picker-slider-thumb",
+      className: cn(
+        "pointer-events-none absolute top-1/2 size-4 -translate-x-1/2 -translate-y-1/2 rounded-full border-2 border-white bg-white shadow-md",
+        "transition-transform duration-150 ease-smooth motion-reduce:transition-none",
+        isDragging && "scale-110 shadow-lg",
+        className
+      ),
+      style,
+      ...props
+    }
+  );
+}
+function ColorPickerInput({
+  className,
+  ...props
+}) {
+  const { cssValue, setColorFromString, disabled, onInteractionEnd } = useColorPicker();
+  const [local, setLocal] = React.useState(cssValue);
+  const [focused, setFocused] = React.useState(false);
+  React.useEffect(() => {
+    if (!focused) setLocal(cssValue);
+  }, [cssValue, focused]);
+  const handleChange = React.useCallback(
+    (e) => {
+      const v = e.target.value;
+      setLocal(v);
+      setColorFromString(v);
+    },
+    [setColorFromString]
+  );
+  const handleBlur = React.useCallback(() => {
+    setFocused(false);
+    setLocal(cssValue);
+    onInteractionEnd();
+  }, [cssValue, onInteractionEnd]);
+  const handleKeyDown = React.useCallback(
+    (e) => {
+      if (e.key === "Enter") {
+        setColorFromString(local);
+        onInteractionEnd();
+        e.target.blur();
+      }
+    },
+    [local, setColorFromString, onInteractionEnd]
+  );
+  return /* @__PURE__ */ jsx(
+    "input",
+    {
+      "data-slot": "color-picker-input",
+      type: "text",
+      value: local,
+      disabled,
+      className: cn(
+        "h-8 w-full min-w-0 flex-1 rounded-md border border-field-border bg-field-background shadow-field px-2 font-mono text-xs",
+        "hover-only:hover:border-field-border-hover",
+        "focus-visible:focus-field-ring",
+        "disabled:status-disabled",
+        className
+      ),
+      onChange: handleChange,
+      onFocus: () => setFocused(true),
+      onBlur: handleBlur,
+      onKeyDown: handleKeyDown,
+      ...props
+    }
+  );
+}
+function ColorPickerEyeDropper({
+  className,
+  ...props
+}) {
+  const { setColorFromString, disabled, onInteractionEnd } = useColorPicker();
+  const [supported, setSupported] = React.useState(false);
+  React.useEffect(() => {
+    setSupported("EyeDropper" in window);
+  }, []);
+  const handleClick = React.useCallback(async () => {
+    try {
+      const dropper = new window.EyeDropper();
+      const result = await dropper.open();
+      if (result?.sRGBHex) {
+        setColorFromString(result.sRGBHex);
+        onInteractionEnd();
+      }
+    } catch {
+    }
+  }, [setColorFromString, onInteractionEnd]);
+  if (!supported) return null;
+  return /* @__PURE__ */ jsx(
+    "button",
+    {
+      type: "button",
+      "data-slot": "color-picker-eye-dropper",
+      "aria-label": "Pick color from screen",
+      disabled,
+      className: cn(
+        "inline-flex size-8 shrink-0 items-center justify-center rounded-md border border-border bg-surface text-muted-foreground",
+        "hover-only:hover:bg-surface-secondary hover-only:hover:text-foreground",
+        "focus-visible:focus-ring",
+        "disabled:status-disabled",
+        "transition-colors duration-150 motion-reduce:transition-none",
+        className
+      ),
+      onClick: handleClick,
+      ...props,
+      children: /* @__PURE__ */ jsx(Pipette, { className: "size-3.5" })
+    }
+  );
+}
+function ColorPickerSwatches({
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      "data-slot": "color-picker-swatches",
+      className: cn("flex flex-wrap gap-1", className),
+      ...props
+    }
+  );
+}
+function ColorPickerSwatch({
+  value,
+  className,
+  ...props
+}) {
+  const { setColorFromString, disabled, onInteractionEnd, cssValue } = useColorPicker();
+  const parsed = React.useMemo(() => parseColor(value), [value]);
+  const swatchCss = React.useMemo(
+    () => parsed ? formatColor(parsed, "hex") : value,
+    [parsed, value]
+  );
+  const handleClick = React.useCallback(() => {
+    setColorFromString(value);
+    onInteractionEnd();
+  }, [value, setColorFromString, onInteractionEnd]);
+  const isActive = cssValue.toLowerCase() === swatchCss.toLowerCase();
+  return /* @__PURE__ */ jsx(
+    "button",
+    {
+      type: "button",
+      "data-slot": "color-picker-swatch",
+      "data-active": isActive || void 0,
+      disabled,
+      className: cn(
+        "size-6 rounded-sm border border-border/50 shadow-sm",
+        "motion-safe:hover-only:hover:scale-110 focus-visible:focus-ring",
+        "disabled:status-disabled",
+        "transition-transform duration-150 ease-smooth motion-reduce:transition-none",
+        "data-active:ring-2 data-active:ring-ring data-active:ring-offset-1 data-active:ring-offset-overlay",
+        className
+      ),
+      style: { backgroundColor: value },
+      onClick: handleClick,
+      title: value,
+      ...props
+    }
+  );
+}
+export {
+  ColorPicker,
+  ColorPickerArea,
+  ColorPickerAreaThumb,
+  ColorPickerContent,
+  ColorPickerEyeDropper,
+  ColorPickerInput,
+  ColorPickerSlider,
+  ColorPickerSliderThumb,
+  ColorPickerSwatch,
+  ColorPickerSwatches,
+  ColorPickerTrigger
+};
+//# sourceMappingURL=color-picker.js.map