@open-mercato/ui 0.6.4-develop.4178.1.aad9ddaa95 → 0.6.4-develop.4210.1.d412061cfe

package/dist/primitives/color-picker.js

@@ -0,0 +1,520 @@
+"use client";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import * as React from "react";
+import * as PopoverPrimitive from "@radix-ui/react-popover";
+import { Pipette, Plus, Trash2 } from "lucide-react";
+import { cva } from "class-variance-authority";
+import { cn } from "@open-mercato/shared/lib/utils";
+import { useT } from "@open-mercato/shared/lib/i18n/context";
+const COLOR_PICKER_DEFAULT_SWATCHES = [
+  "#71777C",
+  // Gray
+  "#6366F1",
+  // Blue (= DS OM accent-indigo)
+  "#F59E0B",
+  // Orange
+  "#EF4343",
+  // Red
+  "#22C55E",
+  // Green
+  "#F6B51E",
+  // Yellow (= Rating amber)
+  "#7D52F3",
+  // Purple
+  "#47C2FF",
+  // Sky
+  "#FB4BA3",
+  // Pink
+  "#22D3BB"
+  // Teal
+];
+const HEX_PATTERN_3 = /^#?[0-9a-fA-F]{3}$/;
+const HEX_PATTERN_6 = /^#?[0-9a-fA-F]{6}$/;
+function normalizeHex(input) {
+  const trimmed = input.trim();
+  if (HEX_PATTERN_6.test(trimmed)) {
+    return ("#" + trimmed.replace(/^#/, "")).toUpperCase();
+  }
+  if (HEX_PATTERN_3.test(trimmed)) {
+    const stripped = trimmed.replace(/^#/, "");
+    return ("#" + stripped[0] + stripped[0] + stripped[1] + stripped[1] + stripped[2] + stripped[2]).toUpperCase();
+  }
+  return null;
+}
+function hexToRgb(hex) {
+  const normalized = normalizeHex(hex);
+  if (!normalized) return null;
+  const stripped = normalized.replace(/^#/, "");
+  return {
+    r: parseInt(stripped.slice(0, 2), 16),
+    g: parseInt(stripped.slice(2, 4), 16),
+    b: parseInt(stripped.slice(4, 6), 16)
+  };
+}
+function rgbToHsl(r, g, b) {
+  const rN = r / 255;
+  const gN = g / 255;
+  const bN = b / 255;
+  const max = Math.max(rN, gN, bN);
+  const min = Math.min(rN, gN, bN);
+  const delta = max - min;
+  let h = 0;
+  let s = 0;
+  const l = (max + min) / 2;
+  if (delta !== 0) {
+    s = l > 0.5 ? delta / (2 - max - min) : delta / (max + min);
+    if (max === rN) h = (gN - bN) / delta + (gN < bN ? 6 : 0);
+    else if (max === gN) h = (bN - rN) / delta + 2;
+    else h = (rN - gN) / delta + 4;
+    h /= 6;
+  }
+  return { h: Math.round(h * 360), s: Math.round(s * 100), l: Math.round(l * 100) };
+}
+function hslToRgb(h, s, l) {
+  const sN = s / 100;
+  const lN = l / 100;
+  const k = (n) => (n + h / 30) % 12;
+  const a = sN * Math.min(lN, 1 - lN);
+  const f = (n) => lN - a * Math.max(-1, Math.min(k(n) - 3, Math.min(9 - k(n), 1)));
+  return {
+    r: Math.round(255 * f(0)),
+    g: Math.round(255 * f(8)),
+    b: Math.round(255 * f(4))
+  };
+}
+function rgbToHex(r, g, b) {
+  return "#" + [r, g, b].map((v) => v.toString(16).padStart(2, "0")).join("").toUpperCase();
+}
+function hexToHueDegrees(hex) {
+  const rgb = hexToRgb(hex);
+  if (!rgb) return 0;
+  return rgbToHsl(rgb.r, rgb.g, rgb.b).h;
+}
+const triggerVariants = cva(
+  "inline-flex items-center gap-2 rounded-md border border-input bg-background px-2.5 py-1.5 text-sm shadow-xs outline-none transition-colors hover:bg-muted/40 focus-visible:shadow-focus disabled:cursor-not-allowed disabled:opacity-60",
+  {
+    variants: {
+      size: {
+        sm: "h-8",
+        default: "h-9"
+      }
+    },
+    defaultVariants: { size: "default" }
+  }
+);
+const swatchVariants = cva(
+  "inline-flex size-6 items-center justify-center rounded-full outline-none focus-visible:shadow-focus disabled:cursor-not-allowed disabled:opacity-50"
+);
+const swatchDotVariants = cva(
+  // Subtle hairline border keeps very-light / white swatches visible on
+  // a white popover background. The Figma `Color Dots [1.1]` ellipse
+  // does NOT carry a border by default (only on Selected, via an inset
+  // white stroke), but in practice palettes routinely include #FFFFFF
+  // and other near-white values that vanish without a 1px outline.
+  // We use `border-foreground/10` so the outline stays invisible on
+  // saturated colors and only "appears" on light values.
+  "inline-block size-4 rounded-full border border-foreground/10 transition-transform group-enabled/swatch:group-hover/swatch:scale-[0.875]",
+  {
+    variants: {
+      selected: {
+        true: "ring-2 ring-inset ring-background",
+        false: ""
+      }
+    },
+    defaultVariants: { selected: false }
+  }
+);
+const ColorPicker = React.forwardRef(
+  ({
+    className,
+    value,
+    onChange,
+    swatches: swatchesProp,
+    defaultSwatches,
+    persistKey,
+    onAddSwatch,
+    allowCustom = true,
+    size,
+    disabled,
+    enableEyedropper = true,
+    onRemoveColor,
+    onEditSavedColors,
+    showOpacity = false,
+    chooseLabel = "Choose color",
+    savedLabel = "Saved colors",
+    addLabel = "Add new color",
+    editLabel = "Edit",
+    removeAriaLabel = "Remove color",
+    ...props
+  }, ref) => {
+    const t = useT();
+    const normalizedValue = React.useMemo(() => normalizeHex(value) ?? value, [value]);
+    const [hexInput, setHexInput] = React.useState(normalizedValue);
+    const [hexError, setHexError] = React.useState(null);
+    const [open, setOpen] = React.useState(false);
+    const [eyedropperSupported, setEyedropperSupported] = React.useState(false);
+    const initialUncontrolled = React.useMemo(
+      () => [...defaultSwatches ?? COLOR_PICKER_DEFAULT_SWATCHES],
+      [defaultSwatches]
+    );
+    const [internalSwatches, setInternalSwatches] = React.useState(initialUncontrolled);
+    React.useEffect(() => {
+      if (!persistKey || typeof window === "undefined") return;
+      try {
+        const raw = window.localStorage.getItem(persistKey);
+        if (!raw) return;
+        const parsed = JSON.parse(raw);
+        if (Array.isArray(parsed) && parsed.every((c) => typeof c === "string" && normalizeHex(c) !== null)) {
+          setInternalSwatches(parsed.map((c) => normalizeHex(c)));
+        }
+      } catch {
+      }
+    }, [persistKey]);
+    const isControlled = swatchesProp !== void 0;
+    const effectiveSwatches = isControlled ? swatchesProp : internalSwatches;
+    const persistSwatches = React.useCallback(
+      (next) => {
+        if (!persistKey || typeof window === "undefined") return;
+        try {
+          window.localStorage.setItem(persistKey, JSON.stringify(next));
+        } catch {
+        }
+      },
+      [persistKey]
+    );
+    const handleAddSwatch = React.useCallback(
+      (color) => {
+        const normalized = normalizeHex(color) ?? color;
+        if (!isControlled) {
+          setInternalSwatches((prev) => {
+            if (prev.some((c) => c.toUpperCase() === normalized.toUpperCase())) return prev;
+            const next = [...prev, normalized];
+            persistSwatches(next);
+            return next;
+          });
+        }
+        onAddSwatch?.(normalized);
+      },
+      [isControlled, persistSwatches, onAddSwatch]
+    );
+    const handleRemoveColor = React.useCallback(
+      (color) => {
+        const normalized = normalizeHex(color) ?? color;
+        if (!isControlled) {
+          setInternalSwatches((prev) => {
+            const next = prev.filter((c) => c.toUpperCase() !== normalized.toUpperCase());
+            persistSwatches(next);
+            return next;
+          });
+        }
+        onRemoveColor?.(normalized);
+      },
+      [isControlled, persistSwatches, onRemoveColor]
+    );
+    const showAddButton = Boolean(onAddSwatch) || Boolean(persistKey);
+    const showRemoveButton = Boolean(onRemoveColor) || Boolean(persistKey);
+    React.useEffect(() => {
+      if (typeof window === "undefined") return;
+      setEyedropperSupported(typeof window.EyeDropper === "function");
+    }, []);
+    React.useEffect(() => {
+      if (!open) {
+        setHexInput(normalizedValue);
+        setHexError(null);
+      }
+    }, [normalizedValue, open]);
+    const commitHex = React.useCallback(
+      (raw) => {
+        const next = normalizeHex(raw);
+        if (next === null) {
+          setHexError(t("ui.colorPicker.error.invalidHex", "Invalid hex"));
+          return;
+        }
+        setHexError(null);
+        setHexInput(next);
+        if (next !== normalizedValue) onChange(next);
+      },
+      [normalizedValue, onChange, t]
+    );
+    const handleHueChange = React.useCallback(
+      (hueDeg) => {
+        const rgb = hslToRgb(hueDeg, 100, 50);
+        onChange(rgbToHex(rgb.r, rgb.g, rgb.b));
+      },
+      [onChange]
+    );
+    const handleEyedropper = React.useCallback(async () => {
+      if (!eyedropperSupported) return;
+      const Ctor = window.EyeDropper;
+      if (!Ctor) return;
+      try {
+        const dropper = new Ctor();
+        const result = await dropper.open();
+        if (result && typeof result.sRGBHex === "string") {
+          const next = normalizeHex(result.sRGBHex);
+          if (next) onChange(next);
+        }
+      } catch {
+      }
+    }, [eyedropperSupported, onChange]);
+    const currentHue = React.useMemo(() => hexToHueDegrees(normalizedValue), [normalizedValue]);
+    return /* @__PURE__ */ jsxs(PopoverPrimitive.Root, { open, onOpenChange: setOpen, children: [
+      /* @__PURE__ */ jsx(PopoverPrimitive.Trigger, { asChild: true, children: /* @__PURE__ */ jsxs(
+        "button",
+        {
+          ref,
+          type: "button",
+          disabled,
+          "data-slot": "color-picker-trigger",
+          className: cn(triggerVariants({ size }), className),
+          ...props,
+          children: [
+            /* @__PURE__ */ jsx(
+              "span",
+              {
+                "data-slot": "color-picker-preview",
+                "aria-hidden": "true",
+                className: "inline-block size-4 shrink-0 rounded-full border border-border/30",
+                style: { backgroundColor: normalizedValue }
+              }
+            ),
+            /* @__PURE__ */ jsx("span", { className: "font-mono uppercase tracking-tight", children: normalizedValue })
+          ]
+        }
+      ) }),
+      /* @__PURE__ */ jsx(PopoverPrimitive.Portal, { children: /* @__PURE__ */ jsxs(
+        PopoverPrimitive.Content,
+        {
+          sideOffset: 6,
+          align: "start",
+          "data-slot": "color-picker-popover",
+          className: cn(
+            "z-popover w-80 rounded-xl border border-input bg-popover p-0 text-popover-foreground shadow-md outline-none",
+            "data-[state=open]:animate-in data-[state=closed]:animate-out",
+            "data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0"
+          ),
+          children: [
+            /* @__PURE__ */ jsxs(
+              "div",
+              {
+                "data-slot": "color-picker-section-choose",
+                className: "space-y-2.5 px-5 pt-4 pb-5",
+                children: [
+                  /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between", children: [
+                    /* @__PURE__ */ jsx("span", { className: "text-sm text-muted-foreground", children: chooseLabel }),
+                    /* @__PURE__ */ jsx("span", { className: "font-mono text-xs uppercase tracking-tight text-muted-foreground/80", children: normalizedValue })
+                  ] }),
+                  /* @__PURE__ */ jsx(
+                    "input",
+                    {
+                      type: "range",
+                      min: 0,
+                      max: 360,
+                      step: 1,
+                      value: currentHue,
+                      disabled,
+                      onChange: (event) => handleHueChange(Number(event.target.value)),
+                      "data-slot": "color-picker-hue-slider",
+                      "aria-label": `${chooseLabel} hue`,
+                      className: cn(
+                        "block h-3 w-full cursor-pointer appearance-none rounded-full outline-none",
+                        // Native range styling. The track is the gradient itself.
+                        "[background-image:linear-gradient(to_right,hsl(0,100%,50%),hsl(60,100%,50%),hsl(120,100%,50%),hsl(180,100%,50%),hsl(240,100%,50%),hsl(300,100%,50%),hsl(360,100%,50%))]",
+                        // Thumb: small white pill with shadow per Figma.
+                        "[&::-webkit-slider-thumb]:appearance-none [&::-webkit-slider-thumb]:size-3 [&::-webkit-slider-thumb]:rounded-full [&::-webkit-slider-thumb]:bg-background [&::-webkit-slider-thumb]:shadow-sm",
+                        "[&::-moz-range-thumb]:size-3 [&::-moz-range-thumb]:rounded-full [&::-moz-range-thumb]:border-0 [&::-moz-range-thumb]:bg-background [&::-moz-range-thumb]:shadow-sm",
+                        "focus-visible:shadow-focus",
+                        "disabled:cursor-not-allowed disabled:opacity-50"
+                      )
+                    }
+                  )
+                ]
+              }
+            ),
+            /* @__PURE__ */ jsx("div", { className: "h-px w-full bg-border/60", "aria-hidden": "true" }),
+            allowCustom ? /* @__PURE__ */ jsxs(
+              "div",
+              {
+                "data-slot": "color-picker-section-input",
+                className: "flex w-full min-w-0 items-center gap-2.5 px-5 py-4",
+                children: [
+                  /* @__PURE__ */ jsxs("div", { className: "flex h-9 min-w-0 flex-1 items-center gap-2 rounded-md border border-input bg-background px-2 shadow-xs", children: [
+                    /* @__PURE__ */ jsx(
+                      "span",
+                      {
+                        "aria-hidden": "true",
+                        "data-slot": "color-picker-current-dot",
+                        className: "inline-block size-4 shrink-0 rounded-full border border-foreground/10",
+                        style: { backgroundColor: normalizedValue }
+                      }
+                    ),
+                    /* @__PURE__ */ jsx(
+                      "input",
+                      {
+                        type: "text",
+                        "data-slot": "color-picker-hex",
+                        value: hexInput,
+                        onChange: (event) => {
+                          setHexInput(event.target.value);
+                          setHexError(null);
+                        },
+                        onBlur: (event) => commitHex(event.target.value),
+                        onKeyDown: (event) => {
+                          if (event.key === "Enter") {
+                            event.preventDefault();
+                            commitHex(event.currentTarget.value);
+                          } else if (event.key === "Escape") {
+                            event.preventDefault();
+                            setHexInput(normalizedValue);
+                            setHexError(null);
+                            setOpen(false);
+                          }
+                        },
+                        className: cn(
+                          "h-full min-w-0 flex-1 bg-transparent font-mono text-sm uppercase tracking-tight outline-none",
+                          "placeholder:text-muted-foreground",
+                          hexError && "text-destructive"
+                        )
+                      }
+                    ),
+                    showOpacity ? /* @__PURE__ */ jsx(
+                      "span",
+                      {
+                        "data-slot": "color-picker-opacity",
+                        "aria-hidden": "true",
+                        className: "shrink-0 font-mono text-xs text-muted-foreground tabular-nums",
+                        children: "100%"
+                      }
+                    ) : null
+                  ] }),
+                  !showRemoveButton && enableEyedropper && eyedropperSupported ? /* @__PURE__ */ jsx(
+                    "button",
+                    {
+                      type: "button",
+                      onClick: handleEyedropper,
+                      "data-slot": "color-picker-eyedropper",
+                      "aria-label": t("ui.colorPicker.eyedropper.ariaLabel", "Pick color from screen"),
+                      className: cn(
+                        "inline-flex size-9 shrink-0 items-center justify-center rounded-md border border-input bg-background text-muted-foreground shadow-xs transition-colors",
+                        "hover:bg-muted/40 hover:text-foreground",
+                        "focus-visible:shadow-focus focus-visible:outline-none"
+                      ),
+                      children: /* @__PURE__ */ jsx(Pipette, { "aria-hidden": "true", className: "size-4" })
+                    }
+                  ) : null,
+                  showRemoveButton ? /* @__PURE__ */ jsx(
+                    "button",
+                    {
+                      type: "button",
+                      onClick: () => handleRemoveColor(normalizedValue),
+                      "data-slot": "color-picker-remove",
+                      "aria-label": removeAriaLabel,
+                      className: cn(
+                        "inline-flex size-9 shrink-0 items-center justify-center rounded-md border border-input bg-background text-muted-foreground shadow-xs transition-colors",
+                        "hover:bg-status-error-bg hover:text-status-error-text hover:border-status-error-border",
+                        "focus-visible:shadow-focus focus-visible:outline-none"
+                      ),
+                      children: /* @__PURE__ */ jsx(Trash2, { "aria-hidden": "true", className: "size-4" })
+                    }
+                  ) : null
+                ]
+              }
+            ) : null,
+            hexError ? /* @__PURE__ */ jsx(
+              "p",
+              {
+                "data-slot": "color-picker-error",
+                className: "px-5 pb-3 -mt-2 text-xs text-status-error-text",
+                children: hexError
+              }
+            ) : null,
+            /* @__PURE__ */ jsx("div", { className: "h-px w-full bg-border/60", "aria-hidden": "true" }),
+            /* @__PURE__ */ jsxs("div", { "data-slot": "color-picker-section-saved", className: "px-5 pt-4 pb-5", children: [
+              /* @__PURE__ */ jsxs("div", { className: "mb-3 flex items-center justify-between", children: [
+                /* @__PURE__ */ jsx("span", { className: "text-sm text-muted-foreground", children: savedLabel }),
+                onEditSavedColors ? /* @__PURE__ */ jsx(
+                  "button",
+                  {
+                    type: "button",
+                    onClick: () => onEditSavedColors(),
+                    "data-slot": "color-picker-edit",
+                    className: cn(
+                      "text-sm font-medium text-accent-indigo outline-none transition-colors",
+                      "hover:underline focus-visible:underline",
+                      "focus-visible:shadow-focus rounded-sm"
+                    ),
+                    children: editLabel
+                  }
+                ) : null
+              ] }),
+              /* @__PURE__ */ jsx("div", { className: "flex flex-wrap gap-3", role: "radiogroup", children: effectiveSwatches.map((swatch) => {
+                const normalized = normalizeHex(swatch) ?? swatch;
+                const selected = normalized.toUpperCase() === normalizedValue.toUpperCase();
+                return /* @__PURE__ */ jsxs(
+                  "button",
+                  {
+                    type: "button",
+                    role: "radio",
+                    "aria-checked": selected,
+                    "aria-label": normalized,
+                    "data-slot": "color-picker-swatch",
+                    "data-state": selected ? "on" : "off",
+                    className: cn(swatchVariants(), "group/swatch"),
+                    onClick: () => {
+                      onChange(normalized);
+                      if (!allowCustom && !showAddButton) setOpen(false);
+                    },
+                    children: [
+                      /* @__PURE__ */ jsx(
+                        "span",
+                        {
+                          "aria-hidden": "true",
+                          "data-slot": "color-picker-swatch-dot",
+                          className: swatchDotVariants({ selected }),
+                          style: { backgroundColor: normalized }
+                        }
+                      ),
+                      selected ? /* @__PURE__ */ jsx("span", { className: "sr-only", children: "Selected" }) : null
+                    ]
+                  },
+                  normalized
+                );
+              }) })
+            ] }),
+            showAddButton ? /* @__PURE__ */ jsxs(Fragment, { children: [
+              /* @__PURE__ */ jsx("div", { className: "h-px w-full bg-border/60", "aria-hidden": "true" }),
+              /* @__PURE__ */ jsxs(
+                "button",
+                {
+                  type: "button",
+                  onClick: () => handleAddSwatch(normalizedValue),
+                  "data-slot": "color-picker-add",
+                  className: cn(
+                    "flex w-full items-center gap-1.5 rounded-b-xl px-4 py-3.5 text-left text-sm text-muted-foreground outline-none transition-colors",
+                    "hover:bg-muted/40 hover:text-foreground",
+                    "focus-visible:shadow-focus focus-visible:outline-none"
+                  ),
+                  children: [
+                    /* @__PURE__ */ jsx(Plus, { "aria-hidden": "true", className: "size-5 text-muted-foreground/70" }),
+                    /* @__PURE__ */ jsx("span", { children: addLabel })
+                  ]
+                }
+              )
+            ] }) : null,
+            /* @__PURE__ */ jsx(PopoverPrimitive.Arrow, { className: "fill-popover stroke-input" })
+          ]
+        }
+      ) })
+    ] });
+  }
+);
+ColorPicker.displayName = "ColorPicker";
+export {
+  COLOR_PICKER_DEFAULT_SWATCHES,
+  ColorPicker,
+  swatchDotVariants as colorPickerSwatchDotVariants,
+  swatchVariants as colorPickerSwatchVariants,
+  triggerVariants as colorPickerTriggerVariants,
+  normalizeHex
+};
+//# sourceMappingURL=color-picker.js.map

package/dist/primitives/color-picker.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../src/primitives/color-picker.tsx"],
+  "sourcesContent": ["\"use client\"\n\nimport * as React from 'react'\nimport * as PopoverPrimitive from '@radix-ui/react-popover'\nimport { Pipette, Plus, Trash2 } from 'lucide-react'\nimport { cva, type VariantProps } from 'class-variance-authority'\n\nimport { cn } from '@open-mercato/shared/lib/utils'\nimport { useT } from '@open-mercato/shared/lib/i18n/context'\n\n// Local types for the experimental EyeDropper API (no DOM lib coverage yet).\ninterface EyeDropperResult { sRGBHex: string }\ninterface EyeDropperAPI { open(): Promise<EyeDropperResult> }\ninterface WindowWithEyeDropper extends Window { EyeDropper?: new () => EyeDropperAPI }\n\n/**\n * Color picker per Figma `Color Picker` frame (DS Open Mercato\n * `167184:38583`, doc page `553:22078`). 4-section layout 316\u00D7334:\n *\n *   1. Choose Color  \u2014 header row (\"Choose color\" label + hex preview\n *                       on the right) + a single pill hue slider\n *                       (gradient rainbow, draggable white thumb).\n *   2. Input         \u2014 hex input field + eyedropper button (Sip).\n *   3. Saved Colors  \u2014 title + row of swatch dots (24\u00D724, rounded-full).\n *   4. Action        \u2014 \"+ Add new color\" footer button (optional).\n *\n * No 2D HSV spectrum, no opacity slider, no format dropdown \u2014 those\n * belong to a heavier picker layout that's not in this DS source.\n * Implementation is vanilla (no `react-colorful`): hue is a native\n * `<input type=\"range\">` styled as a gradient pill, hex \u2192 RGB \u2192 HSL\n * conversion done inline so we can keep dependencies minimal.\n *\n * ```tsx\n * const [color, setColor] = React.useState('#6366F1')\n *\n * // Basic\n * <ColorPicker value={color} onChange={setColor} />\n *\n * // Saved-colors editor (user can append the current color)\n * const [swatches, setSwatches] = React.useState<string[]>([])\n * <ColorPicker\n *   value={color}\n *   onChange={setColor}\n *   swatches={swatches}\n *   onAddSwatch={(c) => setSwatches([...swatches, c])}\n * />\n *\n * // Locked palette \u2014 no hex input, no add button\n * <ColorPicker\n *   value={color}\n *   onChange={setColor}\n *   swatches={['#22C55E', '#F59E0B', '#EF4343']}\n *   allowCustom={false}\n * />\n * ```\n */\n\n/**\n * Default swatch list anchored on the Figma `Color Dots [1.1]`\n * component set (DS OM `3365:22464`) \u2014 10 brand-curated colors that\n * also drive the Tag colors. Kept inline so the primitive ships with\n * a sensible default; consumers can override via `swatches`.\n */\nexport const COLOR_PICKER_DEFAULT_SWATCHES: readonly string[] = [\n  '#71777C', // Gray\n  '#6366F1', // Blue (= DS OM accent-indigo)\n  '#F59E0B', // Orange\n  '#EF4343', // Red\n  '#22C55E', // Green\n  '#F6B51E', // Yellow (= Rating amber)\n  '#7D52F3', // Purple\n  '#47C2FF', // Sky\n  '#FB4BA3', // Pink\n  '#22D3BB', // Teal\n]\n\nconst HEX_PATTERN_3 = /^#?[0-9a-fA-F]{3}$/\nconst HEX_PATTERN_6 = /^#?[0-9a-fA-F]{6}$/\n\nexport function normalizeHex(input: string): string | null {\n  const trimmed = input.trim()\n  if (HEX_PATTERN_6.test(trimmed)) {\n    return ('#' + trimmed.replace(/^#/, '')).toUpperCase()\n  }\n  if (HEX_PATTERN_3.test(trimmed)) {\n    const stripped = trimmed.replace(/^#/, '')\n    return ('#' + stripped[0] + stripped[0] + stripped[1] + stripped[1] + stripped[2] + stripped[2]).toUpperCase()\n  }\n  return null\n}\n\nfunction hexToRgb(hex: string): { r: number; g: number; b: number } | null {\n  const normalized = normalizeHex(hex)\n  if (!normalized) return null\n  const stripped = normalized.replace(/^#/, '')\n  return {\n    r: parseInt(stripped.slice(0, 2), 16),\n    g: parseInt(stripped.slice(2, 4), 16),\n    b: parseInt(stripped.slice(4, 6), 16),\n  }\n}\n\nfunction rgbToHsl(r: number, g: number, b: number): { h: number; s: number; l: number } {\n  const rN = r / 255\n  const gN = g / 255\n  const bN = b / 255\n  const max = Math.max(rN, gN, bN)\n  const min = Math.min(rN, gN, bN)\n  const delta = max - min\n  let h = 0\n  let s = 0\n  const l = (max + min) / 2\n  if (delta !== 0) {\n    s = l > 0.5 ? delta / (2 - max - min) : delta / (max + min)\n    if (max === rN) h = ((gN - bN) / delta + (gN < bN ? 6 : 0))\n    else if (max === gN) h = (bN - rN) / delta + 2\n    else h = (rN - gN) / delta + 4\n    h /= 6\n  }\n  return { h: Math.round(h * 360), s: Math.round(s * 100), l: Math.round(l * 100) }\n}\n\nfunction hslToRgb(h: number, s: number, l: number): { r: number; g: number; b: number } {\n  const sN = s / 100\n  const lN = l / 100\n  const k = (n: number) => (n + h / 30) % 12\n  const a = sN * Math.min(lN, 1 - lN)\n  const f = (n: number) => lN - a * Math.max(-1, Math.min(k(n) - 3, Math.min(9 - k(n), 1)))\n  return {\n    r: Math.round(255 * f(0)),\n    g: Math.round(255 * f(8)),\n    b: Math.round(255 * f(4)),\n  }\n}\n\nfunction rgbToHex(r: number, g: number, b: number): string {\n  return (\n    '#' +\n    [r, g, b]\n      .map((v) => v.toString(16).padStart(2, '0'))\n      .join('')\n      .toUpperCase()\n  )\n}\n\n/**\n * Extract a pure-hue degree (0..360) from a hex color, ignoring its\n * saturation / lightness. Used to position the hue-slider thumb when\n * the controlled `value` changes via swatch click or hex input.\n */\nfunction hexToHueDegrees(hex: string): number {\n  const rgb = hexToRgb(hex)\n  if (!rgb) return 0\n  return rgbToHsl(rgb.r, rgb.g, rgb.b).h\n}\n\nconst triggerVariants = cva(\n  'inline-flex items-center gap-2 rounded-md border border-input bg-background px-2.5 py-1.5 text-sm shadow-xs outline-none transition-colors ' +\n    'hover:bg-muted/40 ' +\n    'focus-visible:shadow-focus ' +\n    'disabled:cursor-not-allowed disabled:opacity-60',\n  {\n    variants: {\n      size: {\n        sm: 'h-8',\n        default: 'h-9',\n      },\n    },\n    defaultVariants: { size: 'default' },\n  },\n)\n\nconst swatchVariants = cva(\n  'inline-flex size-6 items-center justify-center rounded-full outline-none ' +\n    'focus-visible:shadow-focus ' +\n    'disabled:cursor-not-allowed disabled:opacity-50',\n)\n\nconst swatchDotVariants = cva(\n  // Subtle hairline border keeps very-light / white swatches visible on\n  // a white popover background. The Figma `Color Dots [1.1]` ellipse\n  // does NOT carry a border by default (only on Selected, via an inset\n  // white stroke), but in practice palettes routinely include #FFFFFF\n  // and other near-white values that vanish without a 1px outline.\n  // We use `border-foreground/10` so the outline stays invisible on\n  // saturated colors and only \"appears\" on light values.\n  'inline-block size-4 rounded-full border border-foreground/10 transition-transform ' +\n    'group-enabled/swatch:group-hover/swatch:scale-[0.875]',\n  {\n    variants: {\n      selected: {\n        true: 'ring-2 ring-inset ring-background',\n        false: '',\n      },\n    },\n    defaultVariants: { selected: false },\n  },\n)\n\nexport type ColorPickerProps = Omit<\n  React.HTMLAttributes<HTMLButtonElement>,\n  'value' | 'onChange'\n> &\n  VariantProps<typeof triggerVariants> & {\n    /** Current selected color, `#RRGGBB`. */\n    value: string\n    /** Fired when the user picks a swatch, drags the hue slider, or\n     *  commits a hex input. */\n    onChange: (next: string) => void\n    /** Optional palette (\"Saved colors\" row). When provided, the primitive\n     *  runs in **controlled mode** \u2014 the consumer owns the list. When\n     *  omitted (and `persistKey` is also absent) the primitive falls back\n     *  to `COLOR_PICKER_DEFAULT_SWATCHES` read-only. */\n    swatches?: readonly string[]\n    /** Initial palette for the uncontrolled / persisted mode. Used when\n     *  `swatches` is omitted. Defaults to `COLOR_PICKER_DEFAULT_SWATCHES`. */\n    defaultSwatches?: readonly string[]\n    /** When set, the primitive switches to **persisted mode**: hydrates\n     *  the swatch list from `localStorage[persistKey]` on mount, and\n     *  auto-saves after every `onAddSwatch` / `onRemoveColor`. Pair with\n     *  no `swatches` prop. The \"+ Add new color\" footer and trash button\n     *  render automatically when `persistKey` is provided (no need to\n     *  wire `onAddSwatch` / `onRemoveColor` callbacks for the buttons to\n     *  appear \u2014 they still fire as notification callbacks). */\n    persistKey?: string\n    /** Optional callback for the \"+ Add new color\" footer button. When\n     *  omitted, the button is hidden \u2014 unless `persistKey` is set, in\n     *  which case the primitive renders + handles the button itself. */\n    onAddSwatch?: (next: string) => void\n    /** Allow free-form hex input. Default `true`. */\n    allowCustom?: boolean\n    /** Block the popover when true; trigger dims. */\n    disabled?: boolean\n    /** Optional label for screen readers. */\n    'aria-label'?: string\n    /** Show the eyedropper button in the input row. Default `true`. The\n     *  button auto-hides when `window.EyeDropper` is unavailable. */\n    enableEyedropper?: boolean\n    /** Optional callback. When provided, renders a trash icon button\n     *  after the hex container; click fires with the current value\n     *  (consumer decides whether to remove from `swatches`, clear the\n     *  field, or otherwise act). */\n    onRemoveColor?: (current: string) => void\n    /** Optional callback. When provided, renders an \"Edit\" link button\n     *  at the right of the \"Saved colors\" header. Click fires this\n     *  callback so the consumer can open a separate management UI. */\n    onEditSavedColors?: () => void\n    /** Show an opacity percentage badge inside the hex container.\n     *  Default `false`. v5 always shows 100% \u2014 surface kept for\n     *  forward-compatibility with an alpha-aware follow-up release. */\n    showOpacity?: boolean\n    /** Section title above the hue slider. Default `\"Choose color\"`. */\n    chooseLabel?: string\n    /** Section title above the swatch row. Default `\"Saved colors\"`. */\n    savedLabel?: string\n    /** Label for the \"+ Add new color\" footer. Default `\"Add new color\"`. */\n    addLabel?: string\n    /** Label for the \"Edit\" link in the saved-colors header. Default `\"Edit\"`. */\n    editLabel?: string\n    /** ARIA label for the trash button. Default `\"Remove color\"`. */\n    removeAriaLabel?: string\n  }\n\nexport const ColorPicker = React.forwardRef<HTMLButtonElement, ColorPickerProps>(\n  (\n    {\n      className,\n      value,\n      onChange,\n      swatches: swatchesProp,\n      defaultSwatches,\n      persistKey,\n      onAddSwatch,\n      allowCustom = true,\n      size,\n      disabled,\n      enableEyedropper = true,\n      onRemoveColor,\n      onEditSavedColors,\n      showOpacity = false,\n      chooseLabel = 'Choose color',\n      savedLabel = 'Saved colors',\n      addLabel = 'Add new color',\n      editLabel = 'Edit',\n      removeAriaLabel = 'Remove color',\n      ...props\n    },\n    ref,\n  ) => {\n    const t = useT()\n    const normalizedValue = React.useMemo(() => normalizeHex(value) ?? value, [value])\n    const [hexInput, setHexInput] = React.useState(normalizedValue)\n    const [hexError, setHexError] = React.useState<string | null>(null)\n    const [open, setOpen] = React.useState(false)\n    const [eyedropperSupported, setEyedropperSupported] = React.useState(false)\n\n    // Swatches state cascade:\n    //   1. `swatches` prop  \u2192 controlled, primitive never mutates the list.\n    //   2. `persistKey` set \u2192 uncontrolled + auto-save to localStorage.\n    //   3. otherwise        \u2192 uncontrolled in-memory only (lost on remount).\n    const initialUncontrolled = React.useMemo(\n      () => [...(defaultSwatches ?? COLOR_PICKER_DEFAULT_SWATCHES)],\n      [defaultSwatches],\n    )\n    const [internalSwatches, setInternalSwatches] = React.useState<string[]>(initialUncontrolled)\n\n    // Hydrate from localStorage on mount when persistKey is set. We do this\n    // in an effect (not initialState) so SSR rendering matches the initial\n    // hydration pass \u2014 otherwise React warns about mismatched output.\n    React.useEffect(() => {\n      if (!persistKey || typeof window === 'undefined') return\n      try {\n        const raw = window.localStorage.getItem(persistKey)\n        if (!raw) return\n        const parsed = JSON.parse(raw)\n        if (\n          Array.isArray(parsed) &&\n          parsed.every((c) => typeof c === 'string' && normalizeHex(c) !== null)\n        ) {\n          setInternalSwatches(parsed.map((c) => normalizeHex(c) as string))\n        }\n      } catch {\n        // Corrupt JSON or storage disabled \u2014 fall through to the in-memory\n        // default. No-op, no flash to user.\n      }\n    }, [persistKey])\n\n    const isControlled = swatchesProp !== undefined\n    const effectiveSwatches = isControlled ? swatchesProp! : internalSwatches\n\n    const persistSwatches = React.useCallback(\n      (next: string[]) => {\n        if (!persistKey || typeof window === 'undefined') return\n        try {\n          window.localStorage.setItem(persistKey, JSON.stringify(next))\n        } catch {\n          // Storage quota exceeded or disabled \u2014 silent no-op.\n        }\n      },\n      [persistKey],\n    )\n\n    const handleAddSwatch = React.useCallback(\n      (color: string) => {\n        const normalized = normalizeHex(color) ?? color\n        if (!isControlled) {\n          setInternalSwatches((prev) => {\n            if (prev.some((c) => c.toUpperCase() === normalized.toUpperCase())) return prev\n            const next = [...prev, normalized]\n            persistSwatches(next)\n            return next\n          })\n        }\n        onAddSwatch?.(normalized)\n      },\n      [isControlled, persistSwatches, onAddSwatch],\n    )\n\n    const handleRemoveColor = React.useCallback(\n      (color: string) => {\n        const normalized = normalizeHex(color) ?? color\n        if (!isControlled) {\n          setInternalSwatches((prev) => {\n            const next = prev.filter((c) => c.toUpperCase() !== normalized.toUpperCase())\n            persistSwatches(next)\n            return next\n          })\n        }\n        onRemoveColor?.(normalized)\n      },\n      [isControlled, persistSwatches, onRemoveColor],\n    )\n\n    // Auto-render the add + trash buttons when persistKey is set, even if\n    // the consumer omitted the callbacks. The primitive owns the list in\n    // that mode, so the callbacks are purely \"notification\" channels.\n    const showAddButton = Boolean(onAddSwatch) || Boolean(persistKey)\n    const showRemoveButton = Boolean(onRemoveColor) || Boolean(persistKey)\n\n    React.useEffect(() => {\n      if (typeof window === 'undefined') return\n      setEyedropperSupported(typeof (window as WindowWithEyeDropper).EyeDropper === 'function')\n    }, [])\n\n    React.useEffect(() => {\n      if (!open) {\n        setHexInput(normalizedValue)\n        setHexError(null)\n      }\n    }, [normalizedValue, open])\n\n    const commitHex = React.useCallback(\n      (raw: string) => {\n        const next = normalizeHex(raw)\n        if (next === null) {\n          setHexError(t('ui.colorPicker.error.invalidHex', 'Invalid hex'))\n          return\n        }\n        setHexError(null)\n        setHexInput(next)\n        if (next !== normalizedValue) onChange(next)\n      },\n      [normalizedValue, onChange, t],\n    )\n\n    const handleHueChange = React.useCallback(\n      (hueDeg: number) => {\n        // Pure saturated color at the picked hue (s=100%, l=50%).\n        const rgb = hslToRgb(hueDeg, 100, 50)\n        onChange(rgbToHex(rgb.r, rgb.g, rgb.b))\n      },\n      [onChange],\n    )\n\n    const handleEyedropper = React.useCallback(async () => {\n      if (!eyedropperSupported) return\n      const Ctor = (window as WindowWithEyeDropper).EyeDropper\n      if (!Ctor) return\n      try {\n        const dropper = new Ctor()\n        const result = await dropper.open()\n        if (result && typeof result.sRGBHex === 'string') {\n          const next = normalizeHex(result.sRGBHex)\n          if (next) onChange(next)\n        }\n      } catch {\n        // User cancelled \u2014 no-op.\n      }\n    }, [eyedropperSupported, onChange])\n\n    const currentHue = React.useMemo(() => hexToHueDegrees(normalizedValue), [normalizedValue])\n\n    return (\n      <PopoverPrimitive.Root open={open} onOpenChange={setOpen}>\n        <PopoverPrimitive.Trigger asChild>\n          <button\n            ref={ref}\n            type=\"button\"\n            disabled={disabled}\n            data-slot=\"color-picker-trigger\"\n            className={cn(triggerVariants({ size }), className)}\n            {...props}\n          >\n            <span\n              data-slot=\"color-picker-preview\"\n              aria-hidden=\"true\"\n              className=\"inline-block size-4 shrink-0 rounded-full border border-border/30\"\n              style={{ backgroundColor: normalizedValue }}\n            />\n            <span className=\"font-mono uppercase tracking-tight\">{normalizedValue}</span>\n          </button>\n        </PopoverPrimitive.Trigger>\n\n        <PopoverPrimitive.Portal>\n          <PopoverPrimitive.Content\n            sideOffset={6}\n            align=\"start\"\n            data-slot=\"color-picker-popover\"\n            className={cn(\n              'z-popover w-80 rounded-xl border border-input bg-popover p-0 text-popover-foreground shadow-md outline-none',\n              'data-[state=open]:animate-in data-[state=closed]:animate-out',\n              'data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0',\n            )}\n          >\n            {/* Section 1 \u2014 Choose color */}\n            <div\n              data-slot=\"color-picker-section-choose\"\n              className=\"space-y-2.5 px-5 pt-4 pb-5\"\n            >\n              <div className=\"flex items-center justify-between\">\n                <span className=\"text-sm text-muted-foreground\">{chooseLabel}</span>\n                <span className=\"font-mono text-xs uppercase tracking-tight text-muted-foreground/80\">\n                  {normalizedValue}\n                </span>\n              </div>\n              <input\n                type=\"range\"\n                min={0}\n                max={360}\n                step={1}\n                value={currentHue}\n                disabled={disabled}\n                onChange={(event) => handleHueChange(Number(event.target.value))}\n                data-slot=\"color-picker-hue-slider\"\n                aria-label={`${chooseLabel} hue`}\n                className={cn(\n                  'block h-3 w-full cursor-pointer appearance-none rounded-full outline-none',\n                  // Native range styling. The track is the gradient itself.\n                  '[background-image:linear-gradient(to_right,hsl(0,100%,50%),hsl(60,100%,50%),hsl(120,100%,50%),hsl(180,100%,50%),hsl(240,100%,50%),hsl(300,100%,50%),hsl(360,100%,50%))]',\n                  // Thumb: small white pill with shadow per Figma.\n                  '[&::-webkit-slider-thumb]:appearance-none [&::-webkit-slider-thumb]:size-3 [&::-webkit-slider-thumb]:rounded-full [&::-webkit-slider-thumb]:bg-background [&::-webkit-slider-thumb]:shadow-sm',\n                  '[&::-moz-range-thumb]:size-3 [&::-moz-range-thumb]:rounded-full [&::-moz-range-thumb]:border-0 [&::-moz-range-thumb]:bg-background [&::-moz-range-thumb]:shadow-sm',\n                  'focus-visible:shadow-focus',\n                  'disabled:cursor-not-allowed disabled:opacity-50',\n                )}\n              />\n            </div>\n\n            <div className=\"h-px w-full bg-border/60\" aria-hidden=\"true\" />\n\n            {/* Section 2 \u2014 Hex input row.\n             *\n             * Layout matches Figma `Color Picker` frame 167184:38583 \u00A7 2:\n             *\n             *   [\u25CF colored-bullet] [#HEX text] [opacity %?]   (container)\n             *   [eyedropper]?\n             *   [trash]?\n             *\n             * The bullet, hex field, and optional opacity badge live\n             * INSIDE the rounded container. Eyedropper + trash render\n             * as separate icon buttons after the container.\n             */}\n            {allowCustom ? (\n              <div\n                data-slot=\"color-picker-section-input\"\n                className=\"flex w-full min-w-0 items-center gap-2.5 px-5 py-4\"\n              >\n                <div className=\"flex h-9 min-w-0 flex-1 items-center gap-2 rounded-md border border-input bg-background px-2 shadow-xs\">\n                  <span\n                    aria-hidden=\"true\"\n                    data-slot=\"color-picker-current-dot\"\n                    className=\"inline-block size-4 shrink-0 rounded-full border border-foreground/10\"\n                    style={{ backgroundColor: normalizedValue }}\n                  />\n                  <input\n                    type=\"text\"\n                    data-slot=\"color-picker-hex\"\n                    value={hexInput}\n                    onChange={(event) => {\n                      setHexInput(event.target.value)\n                      setHexError(null)\n                    }}\n                    onBlur={(event) => commitHex(event.target.value)}\n                    onKeyDown={(event) => {\n                      if (event.key === 'Enter') {\n                        event.preventDefault()\n                        commitHex(event.currentTarget.value)\n                      } else if (event.key === 'Escape') {\n                        event.preventDefault()\n                        setHexInput(normalizedValue)\n                        setHexError(null)\n                        setOpen(false)\n                      }\n                    }}\n                    className={cn(\n                      'h-full min-w-0 flex-1 bg-transparent font-mono text-sm uppercase tracking-tight outline-none',\n                      'placeholder:text-muted-foreground',\n                      hexError && 'text-destructive',\n                    )}\n                  />\n                  {showOpacity ? (\n                    <span\n                      data-slot=\"color-picker-opacity\"\n                      aria-hidden=\"true\"\n                      className=\"shrink-0 font-mono text-xs text-muted-foreground tabular-nums\"\n                    >\n                      100%\n                    </span>\n                  ) : null}\n                </div>\n                {/* Eyedropper and trash are mutually exclusive \u2014 Figma\n                 *  section 2 renders ONE button on the right (trash).\n                 *  When the consumer wires `onRemoveColor`, the\n                 *  eyedropper steps aside so we stay 1:1 with the\n                 *  Figma layout. */}\n                {!showRemoveButton && enableEyedropper && eyedropperSupported ? (\n                  <button\n                    type=\"button\"\n                    onClick={handleEyedropper}\n                    data-slot=\"color-picker-eyedropper\"\n                    aria-label={t('ui.colorPicker.eyedropper.ariaLabel', 'Pick color from screen')}\n                    className={cn(\n                      'inline-flex size-9 shrink-0 items-center justify-center rounded-md border border-input bg-background text-muted-foreground shadow-xs transition-colors',\n                      'hover:bg-muted/40 hover:text-foreground',\n                      'focus-visible:shadow-focus focus-visible:outline-none',\n                    )}\n                  >\n                    <Pipette aria-hidden=\"true\" className=\"size-4\" />\n                  </button>\n                ) : null}\n                {showRemoveButton ? (\n                  <button\n                    type=\"button\"\n                    onClick={() => handleRemoveColor(normalizedValue)}\n                    data-slot=\"color-picker-remove\"\n                    aria-label={removeAriaLabel}\n                    className={cn(\n                      'inline-flex size-9 shrink-0 items-center justify-center rounded-md border border-input bg-background text-muted-foreground shadow-xs transition-colors',\n                      'hover:bg-status-error-bg hover:text-status-error-text hover:border-status-error-border',\n                      'focus-visible:shadow-focus focus-visible:outline-none',\n                    )}\n                  >\n                    <Trash2 aria-hidden=\"true\" className=\"size-4\" />\n                  </button>\n                ) : null}\n              </div>\n            ) : null}\n            {hexError ? (\n              <p\n                data-slot=\"color-picker-error\"\n                className=\"px-5 pb-3 -mt-2 text-xs text-status-error-text\"\n              >\n                {hexError}\n              </p>\n            ) : null}\n\n            <div className=\"h-px w-full bg-border/60\" aria-hidden=\"true\" />\n\n            {/* Section 3 \u2014 Saved colors */}\n            <div data-slot=\"color-picker-section-saved\" className=\"px-5 pt-4 pb-5\">\n              <div className=\"mb-3 flex items-center justify-between\">\n                <span className=\"text-sm text-muted-foreground\">{savedLabel}</span>\n                {onEditSavedColors ? (\n                  <button\n                    type=\"button\"\n                    onClick={() => onEditSavedColors()}\n                    data-slot=\"color-picker-edit\"\n                    className={cn(\n                      'text-sm font-medium text-accent-indigo outline-none transition-colors',\n                      'hover:underline focus-visible:underline',\n                      'focus-visible:shadow-focus rounded-sm',\n                    )}\n                  >\n                    {editLabel}\n                  </button>\n                ) : null}\n              </div>\n              <div className=\"flex flex-wrap gap-3\" role=\"radiogroup\">\n                {effectiveSwatches.map((swatch) => {\n                  const normalized = normalizeHex(swatch) ?? swatch\n                  const selected = normalized.toUpperCase() === normalizedValue.toUpperCase()\n                  return (\n                    <button\n                      key={normalized}\n                      type=\"button\"\n                      role=\"radio\"\n                      aria-checked={selected}\n                      aria-label={normalized}\n                      data-slot=\"color-picker-swatch\"\n                      data-state={selected ? 'on' : 'off'}\n                      className={cn(swatchVariants(), 'group/swatch')}\n                      onClick={() => {\n                        onChange(normalized)\n                        if (!allowCustom && !showAddButton) setOpen(false)\n                      }}\n                    >\n                      <span\n                        aria-hidden=\"true\"\n                        data-slot=\"color-picker-swatch-dot\"\n                        className={swatchDotVariants({ selected })}\n                        style={{ backgroundColor: normalized }}\n                      />\n                      {selected ? <span className=\"sr-only\">Selected</span> : null}\n                    </button>\n                  )\n                })}\n              </div>\n            </div>\n\n            {/* Section 4 \u2014 Add new color (optional) */}\n            {showAddButton ? (\n              <>\n                <div className=\"h-px w-full bg-border/60\" aria-hidden=\"true\" />\n                <button\n                  type=\"button\"\n                  onClick={() => handleAddSwatch(normalizedValue)}\n                  data-slot=\"color-picker-add\"\n                  className={cn(\n                    'flex w-full items-center gap-1.5 rounded-b-xl px-4 py-3.5 text-left text-sm text-muted-foreground outline-none transition-colors',\n                    'hover:bg-muted/40 hover:text-foreground',\n                    'focus-visible:shadow-focus focus-visible:outline-none',\n                  )}\n                >\n                  <Plus aria-hidden=\"true\" className=\"size-5 text-muted-foreground/70\" />\n                  <span>{addLabel}</span>\n                </button>\n              </>\n            ) : null}\n\n            <PopoverPrimitive.Arrow className=\"fill-popover stroke-input\" />\n          </PopoverPrimitive.Content>\n        </PopoverPrimitive.Portal>\n      </PopoverPrimitive.Root>\n    )\n  },\n)\nColorPicker.displayName = 'ColorPicker'\n\nexport {\n  triggerVariants as colorPickerTriggerVariants,\n  swatchVariants as colorPickerSwatchVariants,\n  swatchDotVariants as colorPickerSwatchDotVariants,\n}\n"],
+  "mappings": "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",
+  "names": []
+}