@andreagiugni/tailwind-dashboard-ui 1.0.31 → 1.0.32

package/README.md

@@ -65,6 +65,12 @@ its own stylesheet — import it once in your app:
 import 'react-beautiful-color/dist/react-beautiful-color.css';
 ```
 
+Pass `palette` to render reusable hex colors as selectable swatches below the hue and opacity sliders:
+
+```tsx
+<ColorPicker palette={["#465fff", "#12b76a", "#f79009", "#f04438"]} />
+```
+
 ## Tailwind setup
 
 The library ships its design tokens as an importable stylesheet. Add this line to your app's
@@ -213,7 +219,7 @@ Legend: **(+native)** = also extends the element's native HTML attributes.
 | `DatePicker` | `id`, `mode` (single/multiple/range/time), `defaultDate`, `onChange`, `label`, `placeholder` — calendar is appended to `document.body` to avoid clipping inside cards/overflow containers |
 | `DateTimePicker` | `id`, `label?`, `placeholder?`, `defaultDate?`, `defaultTime?` (`"HH:MM"`), `onChange?({ date, time })` — flatpickr date calendar appended to `document.body` + a compact `HH:MM` time input |
 | `Slider` | `value` / `defaultValue`, `onChange(value)`, `min`, `max`, `step`, `color`, `label?`, `showValue?`, `disabled` |
-| `ColorPicker` | `defaultValue?` (hex), `defaultFormat?` / `formats?` (`hex`/`rgb`/`rgba`/`hsl`/`hsla`), `showInput?`, `withEyeDropper?`, `label?`, `onChange?(value, color)` — compact swatch + formatted value trigger opening a saturation/hue/alpha popup with a value input, format switcher and clear-value button; built on `react-beautiful-color` (bundled), client-only, **import its CSS** (see ColorPicker note above) |
+| `ColorPicker` | `defaultValue?` (hex), `defaultFormat?` / `formats?` (`hex`/`rgb`/`rgba`/`hsl`/`hsla`), `showInput?`, `withEyeDropper?`, `palette?` (hex colors), `label?`, `onChange?(value, color)` — compact swatch + formatted value trigger opening a saturation/hue/alpha popup with selectable palette colors, value input, format switcher and clear-value button; built on `react-beautiful-color` (bundled), client-only, **import its CSS** (see ColorPicker note above) |
 | `Editor` (WYSIWYG) | `content`, `onChange(html)`, `placeholder?`, `editable?`, `toolbar?` (ordered tool ids or custom buttons), `rows?` (minimum visible text rows, default `8`), `editorClassName?` — optional Tiptap peers; render client-only (see Data viz) |
 
 ### Data viz

package/dist/{chunk-F2L2DNNL.cjs → chunk-VYBFCH6U.cjs}

@@ -58,6 +58,7 @@ var ColorPicker = ({
   formats = ALL_FORMATS,
   showInput = true,
   withEyeDropper = false,
+  palette = [],
   label,
   onChange,
   className,
@@ -180,6 +181,22 @@ var ColorPicker = ({
     setIsCleared(true);
     onChange?.("", currentColor);
   };
+  const handlePaletteColorSelect = (value) => {
+    const parsed = parseValue(value, "hex");
+    if (!parsed) return;
+    const color = new reactBeautifulColor.Color(parsed);
+    setHsva(color.getHsva());
+    setExact({ format: "hex", value });
+    setDraft(null);
+    setIsCleared(false);
+    onChange?.(format === "hex" ? value : colorToString(color, format), color);
+  };
+  const isPaletteColorSelected = (value) => {
+    const parsed = parseValue(value, "hex");
+    if (!parsed) return false;
+    const paletteColor = new reactBeautifulColor.Color(parsed).getHsva();
+    return paletteColor.h === hsva.h && paletteColor.s === hsva.s && paletteColor.v === hsva.v && paletteColor.a === hsva.a;
+  };
   return /* @__PURE__ */ jsxRuntime.jsxs(
     "div",
     {
@@ -257,6 +274,26 @@ var ColorPicker = ({
                     ]
                   }
                 ),
+                palette.length > 0 && /* @__PURE__ */ jsxRuntime.jsx("div", { "aria-label": "Color palette", className: "mt-4 flex flex-wrap gap-2", children: palette.map((color, index) => {
+                  const isValid = parseValue(color, "hex") !== null;
+                  return /* @__PURE__ */ jsxRuntime.jsx(
+                    "button",
+                    {
+                      type: "button",
+                      "aria-label": `Select ${color} color`,
+                      "aria-pressed": isPaletteColorSelected(color),
+                      disabled: !isValid,
+                      onClick: () => handlePaletteColorSelect(color),
+                      className: chunkYERNSNT4_cjs.cn(
+                        "h-8 w-8 rounded-md border border-gray-200 shadow-theme-xs transition hover:scale-105 focus:outline-hidden focus:ring-3 focus:ring-brand-500/20 disabled:cursor-not-allowed disabled:opacity-40 dark:border-gray-700",
+                        isPaletteColorSelected(color) && "ring-2 ring-brand-500 ring-offset-2 dark:ring-offset-gray-900"
+                      ),
+                      style: { backgroundColor: isValid ? color : void 0 },
+                      title: color
+                    },
+                    `${color}-${index}`
+                  );
+                }) }),
                 showInput && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "mt-4 flex items-stretch gap-2", children: [
                   formats.length > 1 && /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "relative shrink-0", children: [
                     /* @__PURE__ */ jsxRuntime.jsx(
@@ -265,7 +302,7 @@ var ColorPicker = ({
                         "aria-label": "Color format",
                         value: format,
                         onChange: (e) => handleFormatChange(e.target.value),
-                        className: "h-11 appearance-none rounded-lg border border-gray-300 bg-white pl-3 pr-8 text-sm text-gray-700 focus:outline-hidden dark:border-gray-700 dark:bg-gray-900 dark:text-gray-300",
+                        className: "h-11 appearance-none rounded-lg border border-gray-300 bg-white pl-3 pr-8 text-sm leading-none text-gray-700 focus:outline-hidden dark:border-gray-700 dark:bg-gray-900 dark:text-gray-300",
                         children: formats.map((f) => /* @__PURE__ */ jsxRuntime.jsx("option", { value: f, children: f.toUpperCase() }, f))
                       }
                     ),
@@ -284,7 +321,7 @@ var ColorPicker = ({
                       value: inputValue,
                       onChange: (e) => handleInputChange(e.target.value),
                       onBlur: () => setDraft(null),
-                      className: "h-11 min-w-0 flex-1 rounded-lg border border-gray-300 bg-white px-3 font-mono text-sm text-gray-800 focus:outline-hidden dark:border-gray-700 dark:bg-gray-900 dark:text-white/90"
+                      className: "h-11 min-w-0 flex-1 rounded-lg border border-gray-300 bg-white px-3 font-mono text-sm leading-none text-gray-800 focus:outline-hidden dark:border-gray-700 dark:bg-gray-900 dark:text-white/90"
                     }
                   ),
                   /* @__PURE__ */ jsxRuntime.jsx(
@@ -309,5 +346,5 @@ var ColorPicker = ({
 };
 
 exports.ColorPicker = ColorPicker;
-//# sourceMappingURL=chunk-F2L2DNNL.cjs.map
-//# sourceMappingURL=chunk-F2L2DNNL.cjs.map
+//# sourceMappingURL=chunk-VYBFCH6U.cjs.map
+//# sourceMappingURL=chunk-VYBFCH6U.cjs.map

package/dist/chunk-VYBFCH6U.cjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/ColorPicker/ColorPicker.tsx"],"names":["useState","Color","useMemo","useRef","useEffect","useCallback","useLayoutEffect","jsxs","cn","jsx","ChevronDown","createPortal","layers","RBColorPicker","Pipette","Trash2"],"mappings":"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","file":"chunk-VYBFCH6U.cjs","sourcesContent":["\"use client\";\nimport React, {\n  useCallback,\n  useEffect,\n  useLayoutEffect,\n  useMemo,\n  useRef,\n  useState,\n} from \"react\";\nimport { createPortal } from \"react-dom\";\nimport { ColorPicker as RBColorPicker, Color } from \"react-beautiful-color\";\nimport { ChevronDown, Pipette, Trash2 } from \"lucide-react\";\nimport { cn } from \"../../lib/cn\";\nimport { layers } from \"../../lib/layers\";\n\n// `react-beautiful-color` doesn't re-export these types from its entry, so\n// derive them from the values its API does expose.\ntype Hsva = ReturnType<Color[\"getHsva\"]>;\ntype ColorInput = ConstructorParameters<typeof Color>[0] & { type: string };\n\nexport type ColorPickerFormat = \"hex\" | \"rgb\" | \"rgba\" | \"hsl\" | \"hsla\";\n\nexport interface ColorPickerProps\n  extends Omit<React.HTMLAttributes<HTMLDivElement>, \"onChange\"> {\n  /** Initial color (uncontrolled). Any hex string, e.g. `\"#3641f5\"`. */\n  defaultValue?: string;\n  /** Format selected on first render. Default: `\"hex\"`. */\n  defaultFormat?: ColorPickerFormat;\n  /** Formats offered in the switcher. Default: all five. */\n  formats?: ColorPickerFormat[];\n  /** Render the value input + format switcher. Default: `true`. */\n  showInput?: boolean;\n  /** Show the native eye-dropper button (browser support varies). */\n  withEyeDropper?: boolean;\n  /** Optional hex colors rendered as selectable swatches below the sliders. */\n  palette?: string[];\n  /** Optional label rendered above the picker. */\n  label?: string;\n  /** Fires on every change with the formatted string and the `Color` instance. */\n  onChange?: (value: string, color: Color) => void;\n}\n\nconst ALL_FORMATS: ColorPickerFormat[] = [\"hex\", \"rgb\", \"rgba\", \"hsl\", \"hsla\"];\n\n/** Parse the text in the input back into a `ColorInput`, or `null` if invalid. */\nfunction parseValue(text: string, format: ColorPickerFormat): ColorInput | null {\n  const t = text.trim();\n  if (format === \"hex\") {\n    return /^#([0-9a-f]{3}|[0-9a-f]{6}|[0-9a-f]{8})$/i.test(t)\n      ? { type: \"hex\", value: t }\n      : null;\n  }\n  const n = t.match(/-?\\d*\\.?\\d+/g)?.map(Number) ?? [];\n  if (format === \"rgb\" && n.length >= 3) return { type: \"rgb\", r: n[0], g: n[1], b: n[2] };\n  if (format === \"rgba\" && n.length >= 4)\n    return { type: \"rgba\", r: n[0], g: n[1], b: n[2], a: n[3] };\n  if (format === \"hsl\" && n.length >= 3) return { type: \"hsl\", h: n[0], s: n[1], l: n[2] };\n  if (format === \"hsla\" && n.length >= 4)\n    return { type: \"hsla\", h: n[0], s: n[1], l: n[2], a: n[3] };\n  return null;\n}\n\n/** Format a `Color` into the requested CSS string. */\nfunction colorToString(color: Color, format: ColorPickerFormat): string {\n  switch (format) {\n    case \"hex\": {\n      const { r, g, b } = color.getRgb();\n      const a = color.getRgba().a;\n      const hex = `#${[r, g, b].map((v) => Math.round(v).toString(16).padStart(2, \"0\")).join(\"\")}`;\n      return a < 1\n        ? `${hex}${Math.round(a * 255).toString(16).padStart(2, \"0\")}`\n        : hex;\n    }\n    case \"rgb\": {\n      const { r, g, b } = color.getRgb();\n      return `rgb(${r}, ${g}, ${b})`;\n    }\n    case \"rgba\": {\n      const { r, g, b, a } = color.getRgba();\n      return `rgba(${r}, ${g}, ${b}, ${a})`;\n    }\n    case \"hsl\": {\n      const { h, s, l } = color.getHsl();\n      return `hsl(${h}, ${s}%, ${l}%)`;\n    }\n    case \"hsla\": {\n      const { h, s, l, a } = color.getHsla();\n      return `hsla(${h}, ${s}%, ${l}%, ${a})`;\n    }\n    default:\n      return color.getHex();\n  }\n}\n\nexport const ColorPicker: React.FC<ColorPickerProps> = ({\n  defaultValue = \"#3641f5\",\n  defaultFormat = \"hex\",\n  formats = ALL_FORMATS,\n  showInput = true,\n  withEyeDropper = false,\n  palette = [],\n  label,\n  onChange,\n  className,\n  ...rest\n}) => {\n  // Internal state lives in full-fidelity HSVA — the picker's native space.\n  // Feeding anything lossier (e.g. hex) back into the controlled picker makes\n  // the knobs fight the cursor (hue/alpha collapse on round-trip), which is\n  // why drag would freeze or snap.\n  const [hsva, setHsva] = useState<Hsva>(() =>\n    new Color({ type: \"hex\", value: defaultValue }).getHsva()\n  );\n  const [format, setFormat] = useState<ColorPickerFormat>(defaultFormat);\n  const [isOpen, setIsOpen] = useState(false);\n  const [popupPosition, setPopupPosition] = useState({\n    left: 0,\n    top: 0,\n    width: 320,\n  });\n  // While the input is focused we keep a raw draft so partial/invalid typing\n  // isn't clobbered by the normalized value.\n  const [draft, setDraft] = useState<string | null>(null);\n  // HSVA is integer-quantized, so we keep the user's exact text (defaultValue\n  // or typed) and show it verbatim until the picker actually changes color.\n  const [exact, setExact] = useState<{ format: ColorPickerFormat; value: string } | null>(\n    () => ({ format: \"hex\", value: defaultValue })\n  );\n  const [isCleared, setIsCleared] = useState(false);\n\n  const colorInput = useMemo(() => ({ type: \"hsva\" as const, ...hsva }), [hsva]);\n  const currentColor = useMemo(() => new Color(colorInput), [colorInput]);\n  const display = isCleared\n    ? \"\"\n    : exact && exact.format === format\n      ? exact.value\n      : colorToString(currentColor, format);\n  const inputValue = draft ?? display;\n\n  // The picker's internal drag layer unbinds its document listeners whenever\n  // the `onChange` identity changes (its cleanup effect depends on it), which\n  // would kill an in-flight drag after the first tick. Keep the handler\n  // identity-stable and read mutable values through refs.\n  const hsvaRef = useRef(hsva);\n  hsvaRef.current = hsva;\n  const formatRef = useRef(format);\n  formatRef.current = format;\n  const onChangeRef = useRef(onChange);\n  onChangeRef.current = onChange;\n  const rootRef = useRef<HTMLDivElement>(null);\n  const triggerRef = useRef<HTMLButtonElement>(null);\n  const popupRef = useRef<HTMLDivElement>(null);\n\n  useEffect(() => {\n    if (!isOpen) return;\n\n    const handlePointerDown = (event: MouseEvent) => {\n      const target = event.target as Node;\n      if (\n        rootRef.current &&\n        !rootRef.current.contains(target) &&\n        !popupRef.current?.contains(target)\n      ) {\n        setIsOpen(false);\n      }\n    };\n    const handleEscape = (event: KeyboardEvent) => {\n      if (event.key === \"Escape\") setIsOpen(false);\n    };\n\n    document.addEventListener(\"mousedown\", handlePointerDown);\n    document.addEventListener(\"keydown\", handleEscape);\n    return () => {\n      document.removeEventListener(\"mousedown\", handlePointerDown);\n      document.removeEventListener(\"keydown\", handleEscape);\n    };\n  }, [isOpen]);\n\n  const updatePopupPosition = useCallback(() => {\n    const trigger = triggerRef.current;\n    if (!trigger) return;\n\n    const rect = trigger.getBoundingClientRect();\n    const viewportPadding = 16;\n    const gap = 8;\n    const width = Math.min(320, window.innerWidth - viewportPadding * 2);\n    const popupHeight = popupRef.current?.offsetHeight ?? 306;\n    const fitsBelow = window.innerHeight - rect.bottom - gap >= popupHeight;\n    const top = fitsBelow || rect.top < popupHeight + gap\n      ? rect.bottom + gap\n      : rect.top - popupHeight - gap;\n    const left = Math.min(\n      Math.max(rect.right - width, viewportPadding),\n      window.innerWidth - width - viewportPadding\n    );\n\n    setPopupPosition({ left, top: Math.max(viewportPadding, top), width });\n  }, []);\n\n  useLayoutEffect(() => {\n    if (!isOpen) return;\n\n    updatePopupPosition();\n    window.addEventListener(\"resize\", updatePopupPosition);\n    window.addEventListener(\"scroll\", updatePopupPosition, true);\n    return () => {\n      window.removeEventListener(\"resize\", updatePopupPosition);\n      window.removeEventListener(\"scroll\", updatePopupPosition, true);\n    };\n  }, [isOpen, updatePopupPosition]);\n\n  const handlePickerChange = useCallback((next: Color) => {\n    const nv = next.getHsva();\n    const cur = hsvaRef.current;\n    // The picker re-emits the current color on mount; ignore no-op changes so\n    // the exact defaultValue isn't clobbered.\n    if (nv.h === cur.h && nv.s === cur.s && nv.v === cur.v && nv.a === cur.a) return;\n    setHsva(nv);\n    setExact(null);\n    setDraft(null);\n    setIsCleared(false);\n    onChangeRef.current?.(colorToString(next, formatRef.current), next);\n  }, []);\n\n  const handleFormatChange = (f: ColorPickerFormat) => {\n    setFormat(f);\n    setDraft(null);\n    if (isCleared) {\n      onChange?.(\"\", currentColor);\n      return;\n    }\n    onChange?.(\n      exact && exact.format === f ? exact.value : colorToString(currentColor, f),\n      currentColor\n    );\n  };\n\n  const handleInputChange = (text: string) => {\n    setDraft(text);\n    if (text.trim() === \"\") {\n      setExact(null);\n      setIsCleared(true);\n      onChange?.(\"\", currentColor);\n      return;\n    }\n    setIsCleared(false);\n    const parsed = parseValue(text, format);\n    if (parsed) {\n      const c = new Color(parsed);\n      setHsva(c.getHsva());\n      setExact({ format, value: text.trim() });\n      onChange?.(text.trim(), c);\n    }\n  };\n\n  const handleClearValue = () => {\n    setDraft(\"\");\n    setExact(null);\n    setIsCleared(true);\n    onChange?.(\"\", currentColor);\n  };\n\n  const handlePaletteColorSelect = (value: string) => {\n    const parsed = parseValue(value, \"hex\");\n    if (!parsed) return;\n\n    const color = new Color(parsed);\n    setHsva(color.getHsva());\n    setExact({ format: \"hex\", value });\n    setDraft(null);\n    setIsCleared(false);\n    onChange?.(format === \"hex\" ? value : colorToString(color, format), color);\n  };\n\n  const isPaletteColorSelected = (value: string) => {\n    const parsed = parseValue(value, \"hex\");\n    if (!parsed) return false;\n\n    const paletteColor = new Color(parsed).getHsva();\n    return (\n      paletteColor.h === hsva.h &&\n      paletteColor.s === hsva.s &&\n      paletteColor.v === hsva.v &&\n      paletteColor.a === hsva.a\n    );\n  };\n\n  return (\n    <div\n      ref={rootRef}\n      className={cn(\"relative w-full max-w-sm\", className)}\n      {...rest}\n    >\n      {label && (\n        <span className=\"mb-1.5 block text-sm font-medium text-gray-700 dark:text-gray-400\">\n          {label}\n        </span>\n      )}\n      <button\n        ref={triggerRef}\n        type=\"button\"\n        aria-haspopup=\"dialog\"\n        aria-expanded={isOpen}\n        aria-label={label ? `Open ${label} color picker` : \"Open color picker\"}\n        onClick={() => setIsOpen((open) => !open)}\n        className=\"flex h-11 w-full items-center gap-3 rounded-lg border border-gray-300 bg-white px-3 text-left shadow-theme-xs transition hover:bg-gray-50 focus:border-brand-300 focus:outline-hidden focus:ring-3 focus:ring-brand-500/10 dark:border-gray-700 dark:bg-gray-900 dark:hover:bg-white/[0.03] dark:focus:border-brand-800\"\n      >\n        <span\n          aria-hidden=\"true\"\n          data-testid=\"color-swatch\"\n          className=\"h-7 w-7 shrink-0 rounded-md border border-gray-200 dark:border-gray-700\"\n          style={{ backgroundColor: isCleared ? \"transparent\" : currentColor.format(\"rgba\") }}\n        />\n        <span className=\"min-w-0 flex-1 truncate font-mono text-sm text-gray-800 dark:text-white/90\">\n          {display}\n        </span>\n        <ChevronDown\n          aria-hidden=\"true\"\n          className={cn(\n            \"size-4 shrink-0 text-gray-500 transition-transform dark:text-gray-400\",\n            isOpen && \"rotate-180\"\n          )}\n        />\n      </button>\n\n      {isOpen && typeof document !== \"undefined\" && createPortal(\n        <div\n          ref={popupRef}\n          role=\"dialog\"\n          aria-label={label ? `${label} color picker` : \"Color picker\"}\n          className={cn(\n            \"fixed rounded-2xl border border-gray-200 bg-white p-3 shadow-theme-lg dark:border-gray-700 dark:bg-gray-900\",\n            layers.portal\n          )}\n          style={{\n            left: popupPosition.left,\n            top: popupPosition.top,\n            width: popupPosition.width,\n          }}\n        >\n          <RBColorPicker\n            color={colorInput}\n            onChange={handlePickerChange}\n            className=\"tdui-color-picker-controls h-auto w-full\"\n          >\n            {/* Overflow would clip the drag knobs beyond the track bounds. */}\n            <RBColorPicker.Saturation className=\"mb-4 h-40 rounded-lg\" />\n            <div className=\"flex items-center gap-3\">\n              {withEyeDropper && (\n                <RBColorPicker.EyeDropper className=\"flex h-9 w-9 shrink-0 items-center justify-center rounded-lg border border-gray-300 text-gray-600 hover:bg-gray-50 dark:border-gray-700 dark:text-gray-300 dark:hover:bg-white/[0.03]\">\n                  <Pipette className=\"size-4\" aria-hidden=\"true\" />\n                </RBColorPicker.EyeDropper>\n              )}\n              <div className=\"flex flex-1 flex-col gap-3\">\n                <RBColorPicker.Hue className=\"h-4\" />\n                <RBColorPicker.Alpha className=\"tdui-color-picker-alpha h-4\" />\n              </div>\n            </div>\n          </RBColorPicker>\n\n          {palette.length > 0 && (\n            <div aria-label=\"Color palette\" className=\"mt-4 flex flex-wrap gap-2\">\n              {palette.map((color, index) => {\n                const isValid = parseValue(color, \"hex\") !== null;\n\n                return (\n                  <button\n                    key={`${color}-${index}`}\n                    type=\"button\"\n                    aria-label={`Select ${color} color`}\n                    aria-pressed={isPaletteColorSelected(color)}\n                    disabled={!isValid}\n                    onClick={() => handlePaletteColorSelect(color)}\n                    className={cn(\n                      \"h-8 w-8 rounded-md border border-gray-200 shadow-theme-xs transition hover:scale-105 focus:outline-hidden focus:ring-3 focus:ring-brand-500/20 disabled:cursor-not-allowed disabled:opacity-40 dark:border-gray-700\",\n                      isPaletteColorSelected(color) && \"ring-2 ring-brand-500 ring-offset-2 dark:ring-offset-gray-900\"\n                    )}\n                    style={{ backgroundColor: isValid ? color : undefined }}\n                    title={color}\n                  />\n                );\n              })}\n            </div>\n          )}\n\n          {showInput && (\n            <div className=\"mt-4 flex items-stretch gap-2\">\n              {formats.length > 1 && (\n                <span className=\"relative shrink-0\">\n                  <select\n                    aria-label=\"Color format\"\n                    value={format}\n                    onChange={(e) => handleFormatChange(e.target.value as ColorPickerFormat)}\n                    className=\"h-11 appearance-none rounded-lg border border-gray-300 bg-white pl-3 pr-8 text-sm leading-none text-gray-700 focus:outline-hidden dark:border-gray-700 dark:bg-gray-900 dark:text-gray-300\"\n                  >\n                    {formats.map((f) => (\n                      <option key={f} value={f}>\n                        {f.toUpperCase()}\n                      </option>\n                    ))}\n                  </select>\n                  <ChevronDown\n                    aria-hidden=\"true\"\n                    className=\"pointer-events-none absolute right-2.5 top-1/2 size-4 -translate-y-1/2 text-gray-500 dark:text-gray-400\"\n                  />\n                </span>\n              )}\n              <input\n                aria-label=\"Color value\"\n                value={inputValue}\n                onChange={(e) => handleInputChange(e.target.value)}\n                onBlur={() => setDraft(null)}\n                className=\"h-11 min-w-0 flex-1 rounded-lg border border-gray-300 bg-white px-3 font-mono text-sm leading-none text-gray-800 focus:outline-hidden dark:border-gray-700 dark:bg-gray-900 dark:text-white/90\"\n              />\n              <button\n                type=\"button\"\n                aria-label=\"Clear color value\"\n                onClick={handleClearValue}\n                className=\"inline-flex h-11 w-11 shrink-0 items-center justify-center rounded-lg border border-gray-300 bg-white text-gray-500 transition hover:bg-gray-50 hover:text-gray-700 focus:outline-hidden focus:ring-3 focus:ring-brand-500/10 dark:border-gray-700 dark:bg-gray-900 dark:text-gray-400 dark:hover:bg-white/[0.03] dark:hover:text-gray-200\"\n              >\n                <Trash2 className=\"size-4\" aria-hidden=\"true\" />\n              </button>\n            </div>\n          )}\n        </div>,\n        document.body\n      )}\n    </div>\n  );\n};\n"]}

package/dist/{chunk-KKDLEGKJ.js → chunk-WZHMDNHY.js}

@@ -56,6 +56,7 @@ var ColorPicker = ({
   formats = ALL_FORMATS,
   showInput = true,
   withEyeDropper = false,
+  palette = [],
   label,
   onChange,
   className,
@@ -178,6 +179,22 @@ var ColorPicker = ({
     setIsCleared(true);
     onChange?.("", currentColor);
   };
+  const handlePaletteColorSelect = (value) => {
+    const parsed = parseValue(value, "hex");
+    if (!parsed) return;
+    const color = new Color(parsed);
+    setHsva(color.getHsva());
+    setExact({ format: "hex", value });
+    setDraft(null);
+    setIsCleared(false);
+    onChange?.(format === "hex" ? value : colorToString(color, format), color);
+  };
+  const isPaletteColorSelected = (value) => {
+    const parsed = parseValue(value, "hex");
+    if (!parsed) return false;
+    const paletteColor = new Color(parsed).getHsva();
+    return paletteColor.h === hsva.h && paletteColor.s === hsva.s && paletteColor.v === hsva.v && paletteColor.a === hsva.a;
+  };
   return /* @__PURE__ */ jsxs(
     "div",
     {
@@ -255,6 +272,26 @@ var ColorPicker = ({
                     ]
                   }
                 ),
+                palette.length > 0 && /* @__PURE__ */ jsx("div", { "aria-label": "Color palette", className: "mt-4 flex flex-wrap gap-2", children: palette.map((color, index) => {
+                  const isValid = parseValue(color, "hex") !== null;
+                  return /* @__PURE__ */ jsx(
+                    "button",
+                    {
+                      type: "button",
+                      "aria-label": `Select ${color} color`,
+                      "aria-pressed": isPaletteColorSelected(color),
+                      disabled: !isValid,
+                      onClick: () => handlePaletteColorSelect(color),
+                      className: cn(
+                        "h-8 w-8 rounded-md border border-gray-200 shadow-theme-xs transition hover:scale-105 focus:outline-hidden focus:ring-3 focus:ring-brand-500/20 disabled:cursor-not-allowed disabled:opacity-40 dark:border-gray-700",
+                        isPaletteColorSelected(color) && "ring-2 ring-brand-500 ring-offset-2 dark:ring-offset-gray-900"
+                      ),
+                      style: { backgroundColor: isValid ? color : void 0 },
+                      title: color
+                    },
+                    `${color}-${index}`
+                  );
+                }) }),
                 showInput && /* @__PURE__ */ jsxs("div", { className: "mt-4 flex items-stretch gap-2", children: [
                   formats.length > 1 && /* @__PURE__ */ jsxs("span", { className: "relative shrink-0", children: [
                     /* @__PURE__ */ jsx(
@@ -263,7 +300,7 @@ var ColorPicker = ({
                         "aria-label": "Color format",
                         value: format,
                         onChange: (e) => handleFormatChange(e.target.value),
-                        className: "h-11 appearance-none rounded-lg border border-gray-300 bg-white pl-3 pr-8 text-sm text-gray-700 focus:outline-hidden dark:border-gray-700 dark:bg-gray-900 dark:text-gray-300",
+                        className: "h-11 appearance-none rounded-lg border border-gray-300 bg-white pl-3 pr-8 text-sm leading-none text-gray-700 focus:outline-hidden dark:border-gray-700 dark:bg-gray-900 dark:text-gray-300",
                         children: formats.map((f) => /* @__PURE__ */ jsx("option", { value: f, children: f.toUpperCase() }, f))
                       }
                     ),
@@ -282,7 +319,7 @@ var ColorPicker = ({
                       value: inputValue,
                       onChange: (e) => handleInputChange(e.target.value),
                       onBlur: () => setDraft(null),
-                      className: "h-11 min-w-0 flex-1 rounded-lg border border-gray-300 bg-white px-3 font-mono text-sm text-gray-800 focus:outline-hidden dark:border-gray-700 dark:bg-gray-900 dark:text-white/90"
+                      className: "h-11 min-w-0 flex-1 rounded-lg border border-gray-300 bg-white px-3 font-mono text-sm leading-none text-gray-800 focus:outline-hidden dark:border-gray-700 dark:bg-gray-900 dark:text-white/90"
                     }
                   ),
                   /* @__PURE__ */ jsx(
@@ -307,5 +344,5 @@ var ColorPicker = ({
 };
 
 export { ColorPicker };
-//# sourceMappingURL=chunk-KKDLEGKJ.js.map
-//# sourceMappingURL=chunk-KKDLEGKJ.js.map
+//# sourceMappingURL=chunk-WZHMDNHY.js.map
+//# sourceMappingURL=chunk-WZHMDNHY.js.map

package/dist/chunk-WZHMDNHY.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/ColorPicker/ColorPicker.tsx"],"names":["RBColorPicker"],"mappings":"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","file":"chunk-WZHMDNHY.js","sourcesContent":["\"use client\";\nimport React, {\n  useCallback,\n  useEffect,\n  useLayoutEffect,\n  useMemo,\n  useRef,\n  useState,\n} from \"react\";\nimport { createPortal } from \"react-dom\";\nimport { ColorPicker as RBColorPicker, Color } from \"react-beautiful-color\";\nimport { ChevronDown, Pipette, Trash2 } from \"lucide-react\";\nimport { cn } from \"../../lib/cn\";\nimport { layers } from \"../../lib/layers\";\n\n// `react-beautiful-color` doesn't re-export these types from its entry, so\n// derive them from the values its API does expose.\ntype Hsva = ReturnType<Color[\"getHsva\"]>;\ntype ColorInput = ConstructorParameters<typeof Color>[0] & { type: string };\n\nexport type ColorPickerFormat = \"hex\" | \"rgb\" | \"rgba\" | \"hsl\" | \"hsla\";\n\nexport interface ColorPickerProps\n  extends Omit<React.HTMLAttributes<HTMLDivElement>, \"onChange\"> {\n  /** Initial color (uncontrolled). Any hex string, e.g. `\"#3641f5\"`. */\n  defaultValue?: string;\n  /** Format selected on first render. Default: `\"hex\"`. */\n  defaultFormat?: ColorPickerFormat;\n  /** Formats offered in the switcher. Default: all five. */\n  formats?: ColorPickerFormat[];\n  /** Render the value input + format switcher. Default: `true`. */\n  showInput?: boolean;\n  /** Show the native eye-dropper button (browser support varies). */\n  withEyeDropper?: boolean;\n  /** Optional hex colors rendered as selectable swatches below the sliders. */\n  palette?: string[];\n  /** Optional label rendered above the picker. */\n  label?: string;\n  /** Fires on every change with the formatted string and the `Color` instance. */\n  onChange?: (value: string, color: Color) => void;\n}\n\nconst ALL_FORMATS: ColorPickerFormat[] = [\"hex\", \"rgb\", \"rgba\", \"hsl\", \"hsla\"];\n\n/** Parse the text in the input back into a `ColorInput`, or `null` if invalid. */\nfunction parseValue(text: string, format: ColorPickerFormat): ColorInput | null {\n  const t = text.trim();\n  if (format === \"hex\") {\n    return /^#([0-9a-f]{3}|[0-9a-f]{6}|[0-9a-f]{8})$/i.test(t)\n      ? { type: \"hex\", value: t }\n      : null;\n  }\n  const n = t.match(/-?\\d*\\.?\\d+/g)?.map(Number) ?? [];\n  if (format === \"rgb\" && n.length >= 3) return { type: \"rgb\", r: n[0], g: n[1], b: n[2] };\n  if (format === \"rgba\" && n.length >= 4)\n    return { type: \"rgba\", r: n[0], g: n[1], b: n[2], a: n[3] };\n  if (format === \"hsl\" && n.length >= 3) return { type: \"hsl\", h: n[0], s: n[1], l: n[2] };\n  if (format === \"hsla\" && n.length >= 4)\n    return { type: \"hsla\", h: n[0], s: n[1], l: n[2], a: n[3] };\n  return null;\n}\n\n/** Format a `Color` into the requested CSS string. */\nfunction colorToString(color: Color, format: ColorPickerFormat): string {\n  switch (format) {\n    case \"hex\": {\n      const { r, g, b } = color.getRgb();\n      const a = color.getRgba().a;\n      const hex = `#${[r, g, b].map((v) => Math.round(v).toString(16).padStart(2, \"0\")).join(\"\")}`;\n      return a < 1\n        ? `${hex}${Math.round(a * 255).toString(16).padStart(2, \"0\")}`\n        : hex;\n    }\n    case \"rgb\": {\n      const { r, g, b } = color.getRgb();\n      return `rgb(${r}, ${g}, ${b})`;\n    }\n    case \"rgba\": {\n      const { r, g, b, a } = color.getRgba();\n      return `rgba(${r}, ${g}, ${b}, ${a})`;\n    }\n    case \"hsl\": {\n      const { h, s, l } = color.getHsl();\n      return `hsl(${h}, ${s}%, ${l}%)`;\n    }\n    case \"hsla\": {\n      const { h, s, l, a } = color.getHsla();\n      return `hsla(${h}, ${s}%, ${l}%, ${a})`;\n    }\n    default:\n      return color.getHex();\n  }\n}\n\nexport const ColorPicker: React.FC<ColorPickerProps> = ({\n  defaultValue = \"#3641f5\",\n  defaultFormat = \"hex\",\n  formats = ALL_FORMATS,\n  showInput = true,\n  withEyeDropper = false,\n  palette = [],\n  label,\n  onChange,\n  className,\n  ...rest\n}) => {\n  // Internal state lives in full-fidelity HSVA — the picker's native space.\n  // Feeding anything lossier (e.g. hex) back into the controlled picker makes\n  // the knobs fight the cursor (hue/alpha collapse on round-trip), which is\n  // why drag would freeze or snap.\n  const [hsva, setHsva] = useState<Hsva>(() =>\n    new Color({ type: \"hex\", value: defaultValue }).getHsva()\n  );\n  const [format, setFormat] = useState<ColorPickerFormat>(defaultFormat);\n  const [isOpen, setIsOpen] = useState(false);\n  const [popupPosition, setPopupPosition] = useState({\n    left: 0,\n    top: 0,\n    width: 320,\n  });\n  // While the input is focused we keep a raw draft so partial/invalid typing\n  // isn't clobbered by the normalized value.\n  const [draft, setDraft] = useState<string | null>(null);\n  // HSVA is integer-quantized, so we keep the user's exact text (defaultValue\n  // or typed) and show it verbatim until the picker actually changes color.\n  const [exact, setExact] = useState<{ format: ColorPickerFormat; value: string } | null>(\n    () => ({ format: \"hex\", value: defaultValue })\n  );\n  const [isCleared, setIsCleared] = useState(false);\n\n  const colorInput = useMemo(() => ({ type: \"hsva\" as const, ...hsva }), [hsva]);\n  const currentColor = useMemo(() => new Color(colorInput), [colorInput]);\n  const display = isCleared\n    ? \"\"\n    : exact && exact.format === format\n      ? exact.value\n      : colorToString(currentColor, format);\n  const inputValue = draft ?? display;\n\n  // The picker's internal drag layer unbinds its document listeners whenever\n  // the `onChange` identity changes (its cleanup effect depends on it), which\n  // would kill an in-flight drag after the first tick. Keep the handler\n  // identity-stable and read mutable values through refs.\n  const hsvaRef = useRef(hsva);\n  hsvaRef.current = hsva;\n  const formatRef = useRef(format);\n  formatRef.current = format;\n  const onChangeRef = useRef(onChange);\n  onChangeRef.current = onChange;\n  const rootRef = useRef<HTMLDivElement>(null);\n  const triggerRef = useRef<HTMLButtonElement>(null);\n  const popupRef = useRef<HTMLDivElement>(null);\n\n  useEffect(() => {\n    if (!isOpen) return;\n\n    const handlePointerDown = (event: MouseEvent) => {\n      const target = event.target as Node;\n      if (\n        rootRef.current &&\n        !rootRef.current.contains(target) &&\n        !popupRef.current?.contains(target)\n      ) {\n        setIsOpen(false);\n      }\n    };\n    const handleEscape = (event: KeyboardEvent) => {\n      if (event.key === \"Escape\") setIsOpen(false);\n    };\n\n    document.addEventListener(\"mousedown\", handlePointerDown);\n    document.addEventListener(\"keydown\", handleEscape);\n    return () => {\n      document.removeEventListener(\"mousedown\", handlePointerDown);\n      document.removeEventListener(\"keydown\", handleEscape);\n    };\n  }, [isOpen]);\n\n  const updatePopupPosition = useCallback(() => {\n    const trigger = triggerRef.current;\n    if (!trigger) return;\n\n    const rect = trigger.getBoundingClientRect();\n    const viewportPadding = 16;\n    const gap = 8;\n    const width = Math.min(320, window.innerWidth - viewportPadding * 2);\n    const popupHeight = popupRef.current?.offsetHeight ?? 306;\n    const fitsBelow = window.innerHeight - rect.bottom - gap >= popupHeight;\n    const top = fitsBelow || rect.top < popupHeight + gap\n      ? rect.bottom + gap\n      : rect.top - popupHeight - gap;\n    const left = Math.min(\n      Math.max(rect.right - width, viewportPadding),\n      window.innerWidth - width - viewportPadding\n    );\n\n    setPopupPosition({ left, top: Math.max(viewportPadding, top), width });\n  }, []);\n\n  useLayoutEffect(() => {\n    if (!isOpen) return;\n\n    updatePopupPosition();\n    window.addEventListener(\"resize\", updatePopupPosition);\n    window.addEventListener(\"scroll\", updatePopupPosition, true);\n    return () => {\n      window.removeEventListener(\"resize\", updatePopupPosition);\n      window.removeEventListener(\"scroll\", updatePopupPosition, true);\n    };\n  }, [isOpen, updatePopupPosition]);\n\n  const handlePickerChange = useCallback((next: Color) => {\n    const nv = next.getHsva();\n    const cur = hsvaRef.current;\n    // The picker re-emits the current color on mount; ignore no-op changes so\n    // the exact defaultValue isn't clobbered.\n    if (nv.h === cur.h && nv.s === cur.s && nv.v === cur.v && nv.a === cur.a) return;\n    setHsva(nv);\n    setExact(null);\n    setDraft(null);\n    setIsCleared(false);\n    onChangeRef.current?.(colorToString(next, formatRef.current), next);\n  }, []);\n\n  const handleFormatChange = (f: ColorPickerFormat) => {\n    setFormat(f);\n    setDraft(null);\n    if (isCleared) {\n      onChange?.(\"\", currentColor);\n      return;\n    }\n    onChange?.(\n      exact && exact.format === f ? exact.value : colorToString(currentColor, f),\n      currentColor\n    );\n  };\n\n  const handleInputChange = (text: string) => {\n    setDraft(text);\n    if (text.trim() === \"\") {\n      setExact(null);\n      setIsCleared(true);\n      onChange?.(\"\", currentColor);\n      return;\n    }\n    setIsCleared(false);\n    const parsed = parseValue(text, format);\n    if (parsed) {\n      const c = new Color(parsed);\n      setHsva(c.getHsva());\n      setExact({ format, value: text.trim() });\n      onChange?.(text.trim(), c);\n    }\n  };\n\n  const handleClearValue = () => {\n    setDraft(\"\");\n    setExact(null);\n    setIsCleared(true);\n    onChange?.(\"\", currentColor);\n  };\n\n  const handlePaletteColorSelect = (value: string) => {\n    const parsed = parseValue(value, \"hex\");\n    if (!parsed) return;\n\n    const color = new Color(parsed);\n    setHsva(color.getHsva());\n    setExact({ format: \"hex\", value });\n    setDraft(null);\n    setIsCleared(false);\n    onChange?.(format === \"hex\" ? value : colorToString(color, format), color);\n  };\n\n  const isPaletteColorSelected = (value: string) => {\n    const parsed = parseValue(value, \"hex\");\n    if (!parsed) return false;\n\n    const paletteColor = new Color(parsed).getHsva();\n    return (\n      paletteColor.h === hsva.h &&\n      paletteColor.s === hsva.s &&\n      paletteColor.v === hsva.v &&\n      paletteColor.a === hsva.a\n    );\n  };\n\n  return (\n    <div\n      ref={rootRef}\n      className={cn(\"relative w-full max-w-sm\", className)}\n      {...rest}\n    >\n      {label && (\n        <span className=\"mb-1.5 block text-sm font-medium text-gray-700 dark:text-gray-400\">\n          {label}\n        </span>\n      )}\n      <button\n        ref={triggerRef}\n        type=\"button\"\n        aria-haspopup=\"dialog\"\n        aria-expanded={isOpen}\n        aria-label={label ? `Open ${label} color picker` : \"Open color picker\"}\n        onClick={() => setIsOpen((open) => !open)}\n        className=\"flex h-11 w-full items-center gap-3 rounded-lg border border-gray-300 bg-white px-3 text-left shadow-theme-xs transition hover:bg-gray-50 focus:border-brand-300 focus:outline-hidden focus:ring-3 focus:ring-brand-500/10 dark:border-gray-700 dark:bg-gray-900 dark:hover:bg-white/[0.03] dark:focus:border-brand-800\"\n      >\n        <span\n          aria-hidden=\"true\"\n          data-testid=\"color-swatch\"\n          className=\"h-7 w-7 shrink-0 rounded-md border border-gray-200 dark:border-gray-700\"\n          style={{ backgroundColor: isCleared ? \"transparent\" : currentColor.format(\"rgba\") }}\n        />\n        <span className=\"min-w-0 flex-1 truncate font-mono text-sm text-gray-800 dark:text-white/90\">\n          {display}\n        </span>\n        <ChevronDown\n          aria-hidden=\"true\"\n          className={cn(\n            \"size-4 shrink-0 text-gray-500 transition-transform dark:text-gray-400\",\n            isOpen && \"rotate-180\"\n          )}\n        />\n      </button>\n\n      {isOpen && typeof document !== \"undefined\" && createPortal(\n        <div\n          ref={popupRef}\n          role=\"dialog\"\n          aria-label={label ? `${label} color picker` : \"Color picker\"}\n          className={cn(\n            \"fixed rounded-2xl border border-gray-200 bg-white p-3 shadow-theme-lg dark:border-gray-700 dark:bg-gray-900\",\n            layers.portal\n          )}\n          style={{\n            left: popupPosition.left,\n            top: popupPosition.top,\n            width: popupPosition.width,\n          }}\n        >\n          <RBColorPicker\n            color={colorInput}\n            onChange={handlePickerChange}\n            className=\"tdui-color-picker-controls h-auto w-full\"\n          >\n            {/* Overflow would clip the drag knobs beyond the track bounds. */}\n            <RBColorPicker.Saturation className=\"mb-4 h-40 rounded-lg\" />\n            <div className=\"flex items-center gap-3\">\n              {withEyeDropper && (\n                <RBColorPicker.EyeDropper className=\"flex h-9 w-9 shrink-0 items-center justify-center rounded-lg border border-gray-300 text-gray-600 hover:bg-gray-50 dark:border-gray-700 dark:text-gray-300 dark:hover:bg-white/[0.03]\">\n                  <Pipette className=\"size-4\" aria-hidden=\"true\" />\n                </RBColorPicker.EyeDropper>\n              )}\n              <div className=\"flex flex-1 flex-col gap-3\">\n                <RBColorPicker.Hue className=\"h-4\" />\n                <RBColorPicker.Alpha className=\"tdui-color-picker-alpha h-4\" />\n              </div>\n            </div>\n          </RBColorPicker>\n\n          {palette.length > 0 && (\n            <div aria-label=\"Color palette\" className=\"mt-4 flex flex-wrap gap-2\">\n              {palette.map((color, index) => {\n                const isValid = parseValue(color, \"hex\") !== null;\n\n                return (\n                  <button\n                    key={`${color}-${index}`}\n                    type=\"button\"\n                    aria-label={`Select ${color} color`}\n                    aria-pressed={isPaletteColorSelected(color)}\n                    disabled={!isValid}\n                    onClick={() => handlePaletteColorSelect(color)}\n                    className={cn(\n                      \"h-8 w-8 rounded-md border border-gray-200 shadow-theme-xs transition hover:scale-105 focus:outline-hidden focus:ring-3 focus:ring-brand-500/20 disabled:cursor-not-allowed disabled:opacity-40 dark:border-gray-700\",\n                      isPaletteColorSelected(color) && \"ring-2 ring-brand-500 ring-offset-2 dark:ring-offset-gray-900\"\n                    )}\n                    style={{ backgroundColor: isValid ? color : undefined }}\n                    title={color}\n                  />\n                );\n              })}\n            </div>\n          )}\n\n          {showInput && (\n            <div className=\"mt-4 flex items-stretch gap-2\">\n              {formats.length > 1 && (\n                <span className=\"relative shrink-0\">\n                  <select\n                    aria-label=\"Color format\"\n                    value={format}\n                    onChange={(e) => handleFormatChange(e.target.value as ColorPickerFormat)}\n                    className=\"h-11 appearance-none rounded-lg border border-gray-300 bg-white pl-3 pr-8 text-sm leading-none text-gray-700 focus:outline-hidden dark:border-gray-700 dark:bg-gray-900 dark:text-gray-300\"\n                  >\n                    {formats.map((f) => (\n                      <option key={f} value={f}>\n                        {f.toUpperCase()}\n                      </option>\n                    ))}\n                  </select>\n                  <ChevronDown\n                    aria-hidden=\"true\"\n                    className=\"pointer-events-none absolute right-2.5 top-1/2 size-4 -translate-y-1/2 text-gray-500 dark:text-gray-400\"\n                  />\n                </span>\n              )}\n              <input\n                aria-label=\"Color value\"\n                value={inputValue}\n                onChange={(e) => handleInputChange(e.target.value)}\n                onBlur={() => setDraft(null)}\n                className=\"h-11 min-w-0 flex-1 rounded-lg border border-gray-300 bg-white px-3 font-mono text-sm leading-none text-gray-800 focus:outline-hidden dark:border-gray-700 dark:bg-gray-900 dark:text-white/90\"\n              />\n              <button\n                type=\"button\"\n                aria-label=\"Clear color value\"\n                onClick={handleClearValue}\n                className=\"inline-flex h-11 w-11 shrink-0 items-center justify-center rounded-lg border border-gray-300 bg-white text-gray-500 transition hover:bg-gray-50 hover:text-gray-700 focus:outline-hidden focus:ring-3 focus:ring-brand-500/10 dark:border-gray-700 dark:bg-gray-900 dark:text-gray-400 dark:hover:bg-white/[0.03] dark:hover:text-gray-200\"\n              >\n                <Trash2 className=\"size-4\" aria-hidden=\"true\" />\n              </button>\n            </div>\n          )}\n        </div>,\n        document.body\n      )}\n    </div>\n  );\n};\n"]}

package/dist/components/ColorPicker/ColorPicker.cjs

@@ -1,7 +1,7 @@
 "use client";
 'use strict';
 
-var chunkF2L2DNNL_cjs = require('../../chunk-F2L2DNNL.cjs');
+var chunkVYBFCH6U_cjs = require('../../chunk-VYBFCH6U.cjs');
 require('../../chunk-TF3G3E72.cjs');
 require('../../chunk-YERNSNT4.cjs');
 
@@ -9,7 +9,7 @@ require('../../chunk-YERNSNT4.cjs');
 
 Object.defineProperty(exports, "ColorPicker", {
   enumerable: true,
-  get: function () { return chunkF2L2DNNL_cjs.ColorPicker; }
+  get: function () { return chunkVYBFCH6U_cjs.ColorPicker; }
 });
 //# sourceMappingURL=ColorPicker.cjs.map
 //# sourceMappingURL=ColorPicker.cjs.map

package/dist/components/ColorPicker/ColorPicker.d.cts

@@ -13,6 +13,8 @@ interface ColorPickerProps extends Omit<React.HTMLAttributes<HTMLDivElement>, "o
     showInput?: boolean;
     /** Show the native eye-dropper button (browser support varies). */
     withEyeDropper?: boolean;
+    /** Optional hex colors rendered as selectable swatches below the sliders. */
+    palette?: string[];
     /** Optional label rendered above the picker. */
     label?: string;
     /** Fires on every change with the formatted string and the `Color` instance. */

package/dist/components/ColorPicker/ColorPicker.d.ts

@@ -13,6 +13,8 @@ interface ColorPickerProps extends Omit<React.HTMLAttributes<HTMLDivElement>, "o
     showInput?: boolean;
     /** Show the native eye-dropper button (browser support varies). */
     withEyeDropper?: boolean;
+    /** Optional hex colors rendered as selectable swatches below the sliders. */
+    palette?: string[];
     /** Optional label rendered above the picker. */
     label?: string;
     /** Fires on every change with the formatted string and the `Color` instance. */

package/dist/components/ColorPicker/ColorPicker.js

@@ -1,5 +1,5 @@
 "use client";
-export { ColorPicker } from '../../chunk-KKDLEGKJ.js';
+export { ColorPicker } from '../../chunk-WZHMDNHY.js';
 import '../../chunk-VX7S6VYG.js';
 import '../../chunk-ZLIYUUA4.js';
 //# sourceMappingURL=ColorPicker.js.map

package/dist/index.cjs

@@ -5,7 +5,7 @@ var chunkHBQCQWQW_cjs = require('./chunk-HBQCQWQW.cjs');
 var chunkXB2NE3EA_cjs = require('./chunk-XB2NE3EA.cjs');
 var chunkGBQCVSZU_cjs = require('./chunk-GBQCVSZU.cjs');
 var chunkETOOIXCY_cjs = require('./chunk-ETOOIXCY.cjs');
-var chunkF2L2DNNL_cjs = require('./chunk-F2L2DNNL.cjs');
+var chunkVYBFCH6U_cjs = require('./chunk-VYBFCH6U.cjs');
 var chunkTF3G3E72_cjs = require('./chunk-TF3G3E72.cjs');
 var chunkYERNSNT4_cjs = require('./chunk-YERNSNT4.cjs');
 var jsxRuntime = require('react/jsx-runtime');
@@ -3254,7 +3254,7 @@ Object.defineProperty(exports, "Editor", {
 });
 Object.defineProperty(exports, "ColorPicker", {
   enumerable: true,
-  get: function () { return chunkF2L2DNNL_cjs.ColorPicker; }
+  get: function () { return chunkVYBFCH6U_cjs.ColorPicker; }
 });
 Object.defineProperty(exports, "cn", {
   enumerable: true,

package/dist/index.js

@@ -3,7 +3,7 @@ export { BarChart } from './chunk-AMSZD2ZE.js';
 export { LineChart } from './chunk-N4BZYVL4.js';
 export { Calendar, Modal } from './chunk-NJBVRPWW.js';
 export { Editor } from './chunk-PFCUA2W2.js';
-export { ColorPicker } from './chunk-KKDLEGKJ.js';
+export { ColorPicker } from './chunk-WZHMDNHY.js';
 import { layers } from './chunk-VX7S6VYG.js';
 import { cn } from './chunk-ZLIYUUA4.js';
 export { cn } from './chunk-ZLIYUUA4.js';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@andreagiugni/tailwind-dashboard-ui",
-  "version": "1.0.31",
+  "version": "1.0.32",
   "description": "Reusable React + Tailwind CSS v4 dashboard components extracted from TailAdmin.",
   "homepage": "https://taildashboardui.com",
   "author": "Andrea Giugni",

package/dist/chunk-F2L2DNNL.cjs.map

@@ -1 +0,0 @@
-{"version":3,"sources":["../src/components/ColorPicker/ColorPicker.tsx"],"names":["useState","Color","useMemo","useRef","useEffect","useCallback","useLayoutEffect","jsxs","cn","jsx","ChevronDown","createPortal","layers","RBColorPicker","Pipette","Trash2"],"mappings":"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","file":"chunk-F2L2DNNL.cjs","sourcesContent":["\"use client\";\nimport React, {\n  useCallback,\n  useEffect,\n  useLayoutEffect,\n  useMemo,\n  useRef,\n  useState,\n} from \"react\";\nimport { createPortal } from \"react-dom\";\nimport { ColorPicker as RBColorPicker, Color } from \"react-beautiful-color\";\nimport { ChevronDown, Pipette, Trash2 } from \"lucide-react\";\nimport { cn } from \"../../lib/cn\";\nimport { layers } from \"../../lib/layers\";\n\n// `react-beautiful-color` doesn't re-export these types from its entry, so\n// derive them from the values its API does expose.\ntype Hsva = ReturnType<Color[\"getHsva\"]>;\ntype ColorInput = ConstructorParameters<typeof Color>[0] & { type: string };\n\nexport type ColorPickerFormat = \"hex\" | \"rgb\" | \"rgba\" | \"hsl\" | \"hsla\";\n\nexport interface ColorPickerProps\n  extends Omit<React.HTMLAttributes<HTMLDivElement>, \"onChange\"> {\n  /** Initial color (uncontrolled). Any hex string, e.g. `\"#3641f5\"`. */\n  defaultValue?: string;\n  /** Format selected on first render. Default: `\"hex\"`. */\n  defaultFormat?: ColorPickerFormat;\n  /** Formats offered in the switcher. Default: all five. */\n  formats?: ColorPickerFormat[];\n  /** Render the value input + format switcher. Default: `true`. */\n  showInput?: boolean;\n  /** Show the native eye-dropper button (browser support varies). */\n  withEyeDropper?: boolean;\n  /** Optional label rendered above the picker. */\n  label?: string;\n  /** Fires on every change with the formatted string and the `Color` instance. */\n  onChange?: (value: string, color: Color) => void;\n}\n\nconst ALL_FORMATS: ColorPickerFormat[] = [\"hex\", \"rgb\", \"rgba\", \"hsl\", \"hsla\"];\n\n/** Parse the text in the input back into a `ColorInput`, or `null` if invalid. */\nfunction parseValue(text: string, format: ColorPickerFormat): ColorInput | null {\n  const t = text.trim();\n  if (format === \"hex\") {\n    return /^#([0-9a-f]{3}|[0-9a-f]{6}|[0-9a-f]{8})$/i.test(t)\n      ? { type: \"hex\", value: t }\n      : null;\n  }\n  const n = t.match(/-?\\d*\\.?\\d+/g)?.map(Number) ?? [];\n  if (format === \"rgb\" && n.length >= 3) return { type: \"rgb\", r: n[0], g: n[1], b: n[2] };\n  if (format === \"rgba\" && n.length >= 4)\n    return { type: \"rgba\", r: n[0], g: n[1], b: n[2], a: n[3] };\n  if (format === \"hsl\" && n.length >= 3) return { type: \"hsl\", h: n[0], s: n[1], l: n[2] };\n  if (format === \"hsla\" && n.length >= 4)\n    return { type: \"hsla\", h: n[0], s: n[1], l: n[2], a: n[3] };\n  return null;\n}\n\n/** Format a `Color` into the requested CSS string. */\nfunction colorToString(color: Color, format: ColorPickerFormat): string {\n  switch (format) {\n    case \"hex\": {\n      const { r, g, b } = color.getRgb();\n      const a = color.getRgba().a;\n      const hex = `#${[r, g, b].map((v) => Math.round(v).toString(16).padStart(2, \"0\")).join(\"\")}`;\n      return a < 1\n        ? `${hex}${Math.round(a * 255).toString(16).padStart(2, \"0\")}`\n        : hex;\n    }\n    case \"rgb\": {\n      const { r, g, b } = color.getRgb();\n      return `rgb(${r}, ${g}, ${b})`;\n    }\n    case \"rgba\": {\n      const { r, g, b, a } = color.getRgba();\n      return `rgba(${r}, ${g}, ${b}, ${a})`;\n    }\n    case \"hsl\": {\n      const { h, s, l } = color.getHsl();\n      return `hsl(${h}, ${s}%, ${l}%)`;\n    }\n    case \"hsla\": {\n      const { h, s, l, a } = color.getHsla();\n      return `hsla(${h}, ${s}%, ${l}%, ${a})`;\n    }\n    default:\n      return color.getHex();\n  }\n}\n\nexport const ColorPicker: React.FC<ColorPickerProps> = ({\n  defaultValue = \"#3641f5\",\n  defaultFormat = \"hex\",\n  formats = ALL_FORMATS,\n  showInput = true,\n  withEyeDropper = false,\n  label,\n  onChange,\n  className,\n  ...rest\n}) => {\n  // Internal state lives in full-fidelity HSVA — the picker's native space.\n  // Feeding anything lossier (e.g. hex) back into the controlled picker makes\n  // the knobs fight the cursor (hue/alpha collapse on round-trip), which is\n  // why drag would freeze or snap.\n  const [hsva, setHsva] = useState<Hsva>(() =>\n    new Color({ type: \"hex\", value: defaultValue }).getHsva()\n  );\n  const [format, setFormat] = useState<ColorPickerFormat>(defaultFormat);\n  const [isOpen, setIsOpen] = useState(false);\n  const [popupPosition, setPopupPosition] = useState({\n    left: 0,\n    top: 0,\n    width: 320,\n  });\n  // While the input is focused we keep a raw draft so partial/invalid typing\n  // isn't clobbered by the normalized value.\n  const [draft, setDraft] = useState<string | null>(null);\n  // HSVA is integer-quantized, so we keep the user's exact text (defaultValue\n  // or typed) and show it verbatim until the picker actually changes color.\n  const [exact, setExact] = useState<{ format: ColorPickerFormat; value: string } | null>(\n    () => ({ format: \"hex\", value: defaultValue })\n  );\n  const [isCleared, setIsCleared] = useState(false);\n\n  const colorInput = useMemo(() => ({ type: \"hsva\" as const, ...hsva }), [hsva]);\n  const currentColor = useMemo(() => new Color(colorInput), [colorInput]);\n  const display = isCleared\n    ? \"\"\n    : exact && exact.format === format\n      ? exact.value\n      : colorToString(currentColor, format);\n  const inputValue = draft ?? display;\n\n  // The picker's internal drag layer unbinds its document listeners whenever\n  // the `onChange` identity changes (its cleanup effect depends on it), which\n  // would kill an in-flight drag after the first tick. Keep the handler\n  // identity-stable and read mutable values through refs.\n  const hsvaRef = useRef(hsva);\n  hsvaRef.current = hsva;\n  const formatRef = useRef(format);\n  formatRef.current = format;\n  const onChangeRef = useRef(onChange);\n  onChangeRef.current = onChange;\n  const rootRef = useRef<HTMLDivElement>(null);\n  const triggerRef = useRef<HTMLButtonElement>(null);\n  const popupRef = useRef<HTMLDivElement>(null);\n\n  useEffect(() => {\n    if (!isOpen) return;\n\n    const handlePointerDown = (event: MouseEvent) => {\n      const target = event.target as Node;\n      if (\n        rootRef.current &&\n        !rootRef.current.contains(target) &&\n        !popupRef.current?.contains(target)\n      ) {\n        setIsOpen(false);\n      }\n    };\n    const handleEscape = (event: KeyboardEvent) => {\n      if (event.key === \"Escape\") setIsOpen(false);\n    };\n\n    document.addEventListener(\"mousedown\", handlePointerDown);\n    document.addEventListener(\"keydown\", handleEscape);\n    return () => {\n      document.removeEventListener(\"mousedown\", handlePointerDown);\n      document.removeEventListener(\"keydown\", handleEscape);\n    };\n  }, [isOpen]);\n\n  const updatePopupPosition = useCallback(() => {\n    const trigger = triggerRef.current;\n    if (!trigger) return;\n\n    const rect = trigger.getBoundingClientRect();\n    const viewportPadding = 16;\n    const gap = 8;\n    const width = Math.min(320, window.innerWidth - viewportPadding * 2);\n    const popupHeight = popupRef.current?.offsetHeight ?? 306;\n    const fitsBelow = window.innerHeight - rect.bottom - gap >= popupHeight;\n    const top = fitsBelow || rect.top < popupHeight + gap\n      ? rect.bottom + gap\n      : rect.top - popupHeight - gap;\n    const left = Math.min(\n      Math.max(rect.right - width, viewportPadding),\n      window.innerWidth - width - viewportPadding\n    );\n\n    setPopupPosition({ left, top: Math.max(viewportPadding, top), width });\n  }, []);\n\n  useLayoutEffect(() => {\n    if (!isOpen) return;\n\n    updatePopupPosition();\n    window.addEventListener(\"resize\", updatePopupPosition);\n    window.addEventListener(\"scroll\", updatePopupPosition, true);\n    return () => {\n      window.removeEventListener(\"resize\", updatePopupPosition);\n      window.removeEventListener(\"scroll\", updatePopupPosition, true);\n    };\n  }, [isOpen, updatePopupPosition]);\n\n  const handlePickerChange = useCallback((next: Color) => {\n    const nv = next.getHsva();\n    const cur = hsvaRef.current;\n    // The picker re-emits the current color on mount; ignore no-op changes so\n    // the exact defaultValue isn't clobbered.\n    if (nv.h === cur.h && nv.s === cur.s && nv.v === cur.v && nv.a === cur.a) return;\n    setHsva(nv);\n    setExact(null);\n    setDraft(null);\n    setIsCleared(false);\n    onChangeRef.current?.(colorToString(next, formatRef.current), next);\n  }, []);\n\n  const handleFormatChange = (f: ColorPickerFormat) => {\n    setFormat(f);\n    setDraft(null);\n    if (isCleared) {\n      onChange?.(\"\", currentColor);\n      return;\n    }\n    onChange?.(\n      exact && exact.format === f ? exact.value : colorToString(currentColor, f),\n      currentColor\n    );\n  };\n\n  const handleInputChange = (text: string) => {\n    setDraft(text);\n    if (text.trim() === \"\") {\n      setExact(null);\n      setIsCleared(true);\n      onChange?.(\"\", currentColor);\n      return;\n    }\n    setIsCleared(false);\n    const parsed = parseValue(text, format);\n    if (parsed) {\n      const c = new Color(parsed);\n      setHsva(c.getHsva());\n      setExact({ format, value: text.trim() });\n      onChange?.(text.trim(), c);\n    }\n  };\n\n  const handleClearValue = () => {\n    setDraft(\"\");\n    setExact(null);\n    setIsCleared(true);\n    onChange?.(\"\", currentColor);\n  };\n\n  return (\n    <div\n      ref={rootRef}\n      className={cn(\"relative w-full max-w-sm\", className)}\n      {...rest}\n    >\n      {label && (\n        <span className=\"mb-1.5 block text-sm font-medium text-gray-700 dark:text-gray-400\">\n          {label}\n        </span>\n      )}\n      <button\n        ref={triggerRef}\n        type=\"button\"\n        aria-haspopup=\"dialog\"\n        aria-expanded={isOpen}\n        aria-label={label ? `Open ${label} color picker` : \"Open color picker\"}\n        onClick={() => setIsOpen((open) => !open)}\n        className=\"flex h-11 w-full items-center gap-3 rounded-lg border border-gray-300 bg-white px-3 text-left shadow-theme-xs transition hover:bg-gray-50 focus:border-brand-300 focus:outline-hidden focus:ring-3 focus:ring-brand-500/10 dark:border-gray-700 dark:bg-gray-900 dark:hover:bg-white/[0.03] dark:focus:border-brand-800\"\n      >\n        <span\n          aria-hidden=\"true\"\n          data-testid=\"color-swatch\"\n          className=\"h-7 w-7 shrink-0 rounded-md border border-gray-200 dark:border-gray-700\"\n          style={{ backgroundColor: isCleared ? \"transparent\" : currentColor.format(\"rgba\") }}\n        />\n        <span className=\"min-w-0 flex-1 truncate font-mono text-sm text-gray-800 dark:text-white/90\">\n          {display}\n        </span>\n        <ChevronDown\n          aria-hidden=\"true\"\n          className={cn(\n            \"size-4 shrink-0 text-gray-500 transition-transform dark:text-gray-400\",\n            isOpen && \"rotate-180\"\n          )}\n        />\n      </button>\n\n      {isOpen && typeof document !== \"undefined\" && createPortal(\n        <div\n          ref={popupRef}\n          role=\"dialog\"\n          aria-label={label ? `${label} color picker` : \"Color picker\"}\n          className={cn(\n            \"fixed rounded-2xl border border-gray-200 bg-white p-3 shadow-theme-lg dark:border-gray-700 dark:bg-gray-900\",\n            layers.portal\n          )}\n          style={{\n            left: popupPosition.left,\n            top: popupPosition.top,\n            width: popupPosition.width,\n          }}\n        >\n          <RBColorPicker\n            color={colorInput}\n            onChange={handlePickerChange}\n            className=\"tdui-color-picker-controls h-auto w-full\"\n          >\n            {/* Overflow would clip the drag knobs beyond the track bounds. */}\n            <RBColorPicker.Saturation className=\"mb-4 h-40 rounded-lg\" />\n            <div className=\"flex items-center gap-3\">\n              {withEyeDropper && (\n                <RBColorPicker.EyeDropper className=\"flex h-9 w-9 shrink-0 items-center justify-center rounded-lg border border-gray-300 text-gray-600 hover:bg-gray-50 dark:border-gray-700 dark:text-gray-300 dark:hover:bg-white/[0.03]\">\n                  <Pipette className=\"size-4\" aria-hidden=\"true\" />\n                </RBColorPicker.EyeDropper>\n              )}\n              <div className=\"flex flex-1 flex-col gap-3\">\n                <RBColorPicker.Hue className=\"h-4\" />\n                <RBColorPicker.Alpha className=\"tdui-color-picker-alpha h-4\" />\n              </div>\n            </div>\n          </RBColorPicker>\n\n          {showInput && (\n            <div className=\"mt-4 flex items-stretch gap-2\">\n              {formats.length > 1 && (\n                <span className=\"relative shrink-0\">\n                  <select\n                    aria-label=\"Color format\"\n                    value={format}\n                    onChange={(e) => handleFormatChange(e.target.value as ColorPickerFormat)}\n                    className=\"h-11 appearance-none rounded-lg border border-gray-300 bg-white pl-3 pr-8 text-sm text-gray-700 focus:outline-hidden dark:border-gray-700 dark:bg-gray-900 dark:text-gray-300\"\n                  >\n                    {formats.map((f) => (\n                      <option key={f} value={f}>\n                        {f.toUpperCase()}\n                      </option>\n                    ))}\n                  </select>\n                  <ChevronDown\n                    aria-hidden=\"true\"\n                    className=\"pointer-events-none absolute right-2.5 top-1/2 size-4 -translate-y-1/2 text-gray-500 dark:text-gray-400\"\n                  />\n                </span>\n              )}\n              <input\n                aria-label=\"Color value\"\n                value={inputValue}\n                onChange={(e) => handleInputChange(e.target.value)}\n                onBlur={() => setDraft(null)}\n                className=\"h-11 min-w-0 flex-1 rounded-lg border border-gray-300 bg-white px-3 font-mono text-sm text-gray-800 focus:outline-hidden dark:border-gray-700 dark:bg-gray-900 dark:text-white/90\"\n              />\n              <button\n                type=\"button\"\n                aria-label=\"Clear color value\"\n                onClick={handleClearValue}\n                className=\"inline-flex h-11 w-11 shrink-0 items-center justify-center rounded-lg border border-gray-300 bg-white text-gray-500 transition hover:bg-gray-50 hover:text-gray-700 focus:outline-hidden focus:ring-3 focus:ring-brand-500/10 dark:border-gray-700 dark:bg-gray-900 dark:text-gray-400 dark:hover:bg-white/[0.03] dark:hover:text-gray-200\"\n              >\n                <Trash2 className=\"size-4\" aria-hidden=\"true\" />\n              </button>\n            </div>\n          )}\n        </div>,\n        document.body\n      )}\n    </div>\n  );\n};\n"]}

package/dist/chunk-KKDLEGKJ.js.map

@@ -1 +0,0 @@
-{"version":3,"sources":["../src/components/ColorPicker/ColorPicker.tsx"],"names":["RBColorPicker"],"mappings":"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","file":"chunk-KKDLEGKJ.js","sourcesContent":["\"use client\";\nimport React, {\n  useCallback,\n  useEffect,\n  useLayoutEffect,\n  useMemo,\n  useRef,\n  useState,\n} from \"react\";\nimport { createPortal } from \"react-dom\";\nimport { ColorPicker as RBColorPicker, Color } from \"react-beautiful-color\";\nimport { ChevronDown, Pipette, Trash2 } from \"lucide-react\";\nimport { cn } from \"../../lib/cn\";\nimport { layers } from \"../../lib/layers\";\n\n// `react-beautiful-color` doesn't re-export these types from its entry, so\n// derive them from the values its API does expose.\ntype Hsva = ReturnType<Color[\"getHsva\"]>;\ntype ColorInput = ConstructorParameters<typeof Color>[0] & { type: string };\n\nexport type ColorPickerFormat = \"hex\" | \"rgb\" | \"rgba\" | \"hsl\" | \"hsla\";\n\nexport interface ColorPickerProps\n  extends Omit<React.HTMLAttributes<HTMLDivElement>, \"onChange\"> {\n  /** Initial color (uncontrolled). Any hex string, e.g. `\"#3641f5\"`. */\n  defaultValue?: string;\n  /** Format selected on first render. Default: `\"hex\"`. */\n  defaultFormat?: ColorPickerFormat;\n  /** Formats offered in the switcher. Default: all five. */\n  formats?: ColorPickerFormat[];\n  /** Render the value input + format switcher. Default: `true`. */\n  showInput?: boolean;\n  /** Show the native eye-dropper button (browser support varies). */\n  withEyeDropper?: boolean;\n  /** Optional label rendered above the picker. */\n  label?: string;\n  /** Fires on every change with the formatted string and the `Color` instance. */\n  onChange?: (value: string, color: Color) => void;\n}\n\nconst ALL_FORMATS: ColorPickerFormat[] = [\"hex\", \"rgb\", \"rgba\", \"hsl\", \"hsla\"];\n\n/** Parse the text in the input back into a `ColorInput`, or `null` if invalid. */\nfunction parseValue(text: string, format: ColorPickerFormat): ColorInput | null {\n  const t = text.trim();\n  if (format === \"hex\") {\n    return /^#([0-9a-f]{3}|[0-9a-f]{6}|[0-9a-f]{8})$/i.test(t)\n      ? { type: \"hex\", value: t }\n      : null;\n  }\n  const n = t.match(/-?\\d*\\.?\\d+/g)?.map(Number) ?? [];\n  if (format === \"rgb\" && n.length >= 3) return { type: \"rgb\", r: n[0], g: n[1], b: n[2] };\n  if (format === \"rgba\" && n.length >= 4)\n    return { type: \"rgba\", r: n[0], g: n[1], b: n[2], a: n[3] };\n  if (format === \"hsl\" && n.length >= 3) return { type: \"hsl\", h: n[0], s: n[1], l: n[2] };\n  if (format === \"hsla\" && n.length >= 4)\n    return { type: \"hsla\", h: n[0], s: n[1], l: n[2], a: n[3] };\n  return null;\n}\n\n/** Format a `Color` into the requested CSS string. */\nfunction colorToString(color: Color, format: ColorPickerFormat): string {\n  switch (format) {\n    case \"hex\": {\n      const { r, g, b } = color.getRgb();\n      const a = color.getRgba().a;\n      const hex = `#${[r, g, b].map((v) => Math.round(v).toString(16).padStart(2, \"0\")).join(\"\")}`;\n      return a < 1\n        ? `${hex}${Math.round(a * 255).toString(16).padStart(2, \"0\")}`\n        : hex;\n    }\n    case \"rgb\": {\n      const { r, g, b } = color.getRgb();\n      return `rgb(${r}, ${g}, ${b})`;\n    }\n    case \"rgba\": {\n      const { r, g, b, a } = color.getRgba();\n      return `rgba(${r}, ${g}, ${b}, ${a})`;\n    }\n    case \"hsl\": {\n      const { h, s, l } = color.getHsl();\n      return `hsl(${h}, ${s}%, ${l}%)`;\n    }\n    case \"hsla\": {\n      const { h, s, l, a } = color.getHsla();\n      return `hsla(${h}, ${s}%, ${l}%, ${a})`;\n    }\n    default:\n      return color.getHex();\n  }\n}\n\nexport const ColorPicker: React.FC<ColorPickerProps> = ({\n  defaultValue = \"#3641f5\",\n  defaultFormat = \"hex\",\n  formats = ALL_FORMATS,\n  showInput = true,\n  withEyeDropper = false,\n  label,\n  onChange,\n  className,\n  ...rest\n}) => {\n  // Internal state lives in full-fidelity HSVA — the picker's native space.\n  // Feeding anything lossier (e.g. hex) back into the controlled picker makes\n  // the knobs fight the cursor (hue/alpha collapse on round-trip), which is\n  // why drag would freeze or snap.\n  const [hsva, setHsva] = useState<Hsva>(() =>\n    new Color({ type: \"hex\", value: defaultValue }).getHsva()\n  );\n  const [format, setFormat] = useState<ColorPickerFormat>(defaultFormat);\n  const [isOpen, setIsOpen] = useState(false);\n  const [popupPosition, setPopupPosition] = useState({\n    left: 0,\n    top: 0,\n    width: 320,\n  });\n  // While the input is focused we keep a raw draft so partial/invalid typing\n  // isn't clobbered by the normalized value.\n  const [draft, setDraft] = useState<string | null>(null);\n  // HSVA is integer-quantized, so we keep the user's exact text (defaultValue\n  // or typed) and show it verbatim until the picker actually changes color.\n  const [exact, setExact] = useState<{ format: ColorPickerFormat; value: string } | null>(\n    () => ({ format: \"hex\", value: defaultValue })\n  );\n  const [isCleared, setIsCleared] = useState(false);\n\n  const colorInput = useMemo(() => ({ type: \"hsva\" as const, ...hsva }), [hsva]);\n  const currentColor = useMemo(() => new Color(colorInput), [colorInput]);\n  const display = isCleared\n    ? \"\"\n    : exact && exact.format === format\n      ? exact.value\n      : colorToString(currentColor, format);\n  const inputValue = draft ?? display;\n\n  // The picker's internal drag layer unbinds its document listeners whenever\n  // the `onChange` identity changes (its cleanup effect depends on it), which\n  // would kill an in-flight drag after the first tick. Keep the handler\n  // identity-stable and read mutable values through refs.\n  const hsvaRef = useRef(hsva);\n  hsvaRef.current = hsva;\n  const formatRef = useRef(format);\n  formatRef.current = format;\n  const onChangeRef = useRef(onChange);\n  onChangeRef.current = onChange;\n  const rootRef = useRef<HTMLDivElement>(null);\n  const triggerRef = useRef<HTMLButtonElement>(null);\n  const popupRef = useRef<HTMLDivElement>(null);\n\n  useEffect(() => {\n    if (!isOpen) return;\n\n    const handlePointerDown = (event: MouseEvent) => {\n      const target = event.target as Node;\n      if (\n        rootRef.current &&\n        !rootRef.current.contains(target) &&\n        !popupRef.current?.contains(target)\n      ) {\n        setIsOpen(false);\n      }\n    };\n    const handleEscape = (event: KeyboardEvent) => {\n      if (event.key === \"Escape\") setIsOpen(false);\n    };\n\n    document.addEventListener(\"mousedown\", handlePointerDown);\n    document.addEventListener(\"keydown\", handleEscape);\n    return () => {\n      document.removeEventListener(\"mousedown\", handlePointerDown);\n      document.removeEventListener(\"keydown\", handleEscape);\n    };\n  }, [isOpen]);\n\n  const updatePopupPosition = useCallback(() => {\n    const trigger = triggerRef.current;\n    if (!trigger) return;\n\n    const rect = trigger.getBoundingClientRect();\n    const viewportPadding = 16;\n    const gap = 8;\n    const width = Math.min(320, window.innerWidth - viewportPadding * 2);\n    const popupHeight = popupRef.current?.offsetHeight ?? 306;\n    const fitsBelow = window.innerHeight - rect.bottom - gap >= popupHeight;\n    const top = fitsBelow || rect.top < popupHeight + gap\n      ? rect.bottom + gap\n      : rect.top - popupHeight - gap;\n    const left = Math.min(\n      Math.max(rect.right - width, viewportPadding),\n      window.innerWidth - width - viewportPadding\n    );\n\n    setPopupPosition({ left, top: Math.max(viewportPadding, top), width });\n  }, []);\n\n  useLayoutEffect(() => {\n    if (!isOpen) return;\n\n    updatePopupPosition();\n    window.addEventListener(\"resize\", updatePopupPosition);\n    window.addEventListener(\"scroll\", updatePopupPosition, true);\n    return () => {\n      window.removeEventListener(\"resize\", updatePopupPosition);\n      window.removeEventListener(\"scroll\", updatePopupPosition, true);\n    };\n  }, [isOpen, updatePopupPosition]);\n\n  const handlePickerChange = useCallback((next: Color) => {\n    const nv = next.getHsva();\n    const cur = hsvaRef.current;\n    // The picker re-emits the current color on mount; ignore no-op changes so\n    // the exact defaultValue isn't clobbered.\n    if (nv.h === cur.h && nv.s === cur.s && nv.v === cur.v && nv.a === cur.a) return;\n    setHsva(nv);\n    setExact(null);\n    setDraft(null);\n    setIsCleared(false);\n    onChangeRef.current?.(colorToString(next, formatRef.current), next);\n  }, []);\n\n  const handleFormatChange = (f: ColorPickerFormat) => {\n    setFormat(f);\n    setDraft(null);\n    if (isCleared) {\n      onChange?.(\"\", currentColor);\n      return;\n    }\n    onChange?.(\n      exact && exact.format === f ? exact.value : colorToString(currentColor, f),\n      currentColor\n    );\n  };\n\n  const handleInputChange = (text: string) => {\n    setDraft(text);\n    if (text.trim() === \"\") {\n      setExact(null);\n      setIsCleared(true);\n      onChange?.(\"\", currentColor);\n      return;\n    }\n    setIsCleared(false);\n    const parsed = parseValue(text, format);\n    if (parsed) {\n      const c = new Color(parsed);\n      setHsva(c.getHsva());\n      setExact({ format, value: text.trim() });\n      onChange?.(text.trim(), c);\n    }\n  };\n\n  const handleClearValue = () => {\n    setDraft(\"\");\n    setExact(null);\n    setIsCleared(true);\n    onChange?.(\"\", currentColor);\n  };\n\n  return (\n    <div\n      ref={rootRef}\n      className={cn(\"relative w-full max-w-sm\", className)}\n      {...rest}\n    >\n      {label && (\n        <span className=\"mb-1.5 block text-sm font-medium text-gray-700 dark:text-gray-400\">\n          {label}\n        </span>\n      )}\n      <button\n        ref={triggerRef}\n        type=\"button\"\n        aria-haspopup=\"dialog\"\n        aria-expanded={isOpen}\n        aria-label={label ? `Open ${label} color picker` : \"Open color picker\"}\n        onClick={() => setIsOpen((open) => !open)}\n        className=\"flex h-11 w-full items-center gap-3 rounded-lg border border-gray-300 bg-white px-3 text-left shadow-theme-xs transition hover:bg-gray-50 focus:border-brand-300 focus:outline-hidden focus:ring-3 focus:ring-brand-500/10 dark:border-gray-700 dark:bg-gray-900 dark:hover:bg-white/[0.03] dark:focus:border-brand-800\"\n      >\n        <span\n          aria-hidden=\"true\"\n          data-testid=\"color-swatch\"\n          className=\"h-7 w-7 shrink-0 rounded-md border border-gray-200 dark:border-gray-700\"\n          style={{ backgroundColor: isCleared ? \"transparent\" : currentColor.format(\"rgba\") }}\n        />\n        <span className=\"min-w-0 flex-1 truncate font-mono text-sm text-gray-800 dark:text-white/90\">\n          {display}\n        </span>\n        <ChevronDown\n          aria-hidden=\"true\"\n          className={cn(\n            \"size-4 shrink-0 text-gray-500 transition-transform dark:text-gray-400\",\n            isOpen && \"rotate-180\"\n          )}\n        />\n      </button>\n\n      {isOpen && typeof document !== \"undefined\" && createPortal(\n        <div\n          ref={popupRef}\n          role=\"dialog\"\n          aria-label={label ? `${label} color picker` : \"Color picker\"}\n          className={cn(\n            \"fixed rounded-2xl border border-gray-200 bg-white p-3 shadow-theme-lg dark:border-gray-700 dark:bg-gray-900\",\n            layers.portal\n          )}\n          style={{\n            left: popupPosition.left,\n            top: popupPosition.top,\n            width: popupPosition.width,\n          }}\n        >\n          <RBColorPicker\n            color={colorInput}\n            onChange={handlePickerChange}\n            className=\"tdui-color-picker-controls h-auto w-full\"\n          >\n            {/* Overflow would clip the drag knobs beyond the track bounds. */}\n            <RBColorPicker.Saturation className=\"mb-4 h-40 rounded-lg\" />\n            <div className=\"flex items-center gap-3\">\n              {withEyeDropper && (\n                <RBColorPicker.EyeDropper className=\"flex h-9 w-9 shrink-0 items-center justify-center rounded-lg border border-gray-300 text-gray-600 hover:bg-gray-50 dark:border-gray-700 dark:text-gray-300 dark:hover:bg-white/[0.03]\">\n                  <Pipette className=\"size-4\" aria-hidden=\"true\" />\n                </RBColorPicker.EyeDropper>\n              )}\n              <div className=\"flex flex-1 flex-col gap-3\">\n                <RBColorPicker.Hue className=\"h-4\" />\n                <RBColorPicker.Alpha className=\"tdui-color-picker-alpha h-4\" />\n              </div>\n            </div>\n          </RBColorPicker>\n\n          {showInput && (\n            <div className=\"mt-4 flex items-stretch gap-2\">\n              {formats.length > 1 && (\n                <span className=\"relative shrink-0\">\n                  <select\n                    aria-label=\"Color format\"\n                    value={format}\n                    onChange={(e) => handleFormatChange(e.target.value as ColorPickerFormat)}\n                    className=\"h-11 appearance-none rounded-lg border border-gray-300 bg-white pl-3 pr-8 text-sm text-gray-700 focus:outline-hidden dark:border-gray-700 dark:bg-gray-900 dark:text-gray-300\"\n                  >\n                    {formats.map((f) => (\n                      <option key={f} value={f}>\n                        {f.toUpperCase()}\n                      </option>\n                    ))}\n                  </select>\n                  <ChevronDown\n                    aria-hidden=\"true\"\n                    className=\"pointer-events-none absolute right-2.5 top-1/2 size-4 -translate-y-1/2 text-gray-500 dark:text-gray-400\"\n                  />\n                </span>\n              )}\n              <input\n                aria-label=\"Color value\"\n                value={inputValue}\n                onChange={(e) => handleInputChange(e.target.value)}\n                onBlur={() => setDraft(null)}\n                className=\"h-11 min-w-0 flex-1 rounded-lg border border-gray-300 bg-white px-3 font-mono text-sm text-gray-800 focus:outline-hidden dark:border-gray-700 dark:bg-gray-900 dark:text-white/90\"\n              />\n              <button\n                type=\"button\"\n                aria-label=\"Clear color value\"\n                onClick={handleClearValue}\n                className=\"inline-flex h-11 w-11 shrink-0 items-center justify-center rounded-lg border border-gray-300 bg-white text-gray-500 transition hover:bg-gray-50 hover:text-gray-700 focus:outline-hidden focus:ring-3 focus:ring-brand-500/10 dark:border-gray-700 dark:bg-gray-900 dark:text-gray-400 dark:hover:bg-white/[0.03] dark:hover:text-gray-200\"\n              >\n                <Trash2 className=\"size-4\" aria-hidden=\"true\" />\n              </button>\n            </div>\n          )}\n        </div>,\n        document.body\n      )}\n    </div>\n  );\n};\n"]}