@andreagiugni/tailwind-dashboard-ui 0.5.3 → 0.5.4

package/README.md

@@ -205,7 +205,7 @@ Legend: **(+native)** = also extends the element's native HTML attributes.
 | `DatePicker` | `id`, `mode` (single/multiple/range/time), `defaultDate`, `onChange`, `label`, `placeholder` |
 | `DateTimePicker` | `id`, `label?`, `placeholder?`, `defaultDate?`, `defaultTime?` (`"HH:MM"`), `onChange?({ date, time })` — flatpickr date calendar + 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)` — saturation/hue/alpha picker + value input with a format switcher; 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?`, `label?`, `onChange?(value, color)` — compact swatch + formatted value trigger opening a saturation/hue/alpha popup with a value input and format switcher; 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), `editorClassName?` — optional Tiptap peers; render client-only (see Data viz) |
 
 ### Data viz

package/dist/chunk-LXA5UOBC.js

@@ -0,0 +1,291 @@
+"use client";
+import { cn } from './chunk-ZLIYUUA4.js';
+import { useState, useMemo, useRef, useEffect, useCallback, useLayoutEffect } from 'react';
+import { createPortal } from 'react-dom';
+import { Color, ColorPicker as ColorPicker$1 } from 'react-beautiful-color';
+import { jsxs, jsx } from 'react/jsx-runtime';
+
+var ALL_FORMATS = ["hex", "rgb", "rgba", "hsl", "hsla"];
+function parseValue(text, format) {
+  const t = text.trim();
+  if (format === "hex") {
+    return /^#([0-9a-f]{3}|[0-9a-f]{6}|[0-9a-f]{8})$/i.test(t) ? { type: "hex", value: t } : null;
+  }
+  const n = t.match(/-?\d*\.?\d+/g)?.map(Number) ?? [];
+  if (format === "rgb" && n.length >= 3) return { type: "rgb", r: n[0], g: n[1], b: n[2] };
+  if (format === "rgba" && n.length >= 4)
+    return { type: "rgba", r: n[0], g: n[1], b: n[2], a: n[3] };
+  if (format === "hsl" && n.length >= 3) return { type: "hsl", h: n[0], s: n[1], l: n[2] };
+  if (format === "hsla" && n.length >= 4)
+    return { type: "hsla", h: n[0], s: n[1], l: n[2], a: n[3] };
+  return null;
+}
+function colorToString(color, format) {
+  switch (format) {
+    case "hex": {
+      const { r, g, b } = color.getRgb();
+      const a = color.getRgba().a;
+      const hex = `#${[r, g, b].map((v) => Math.round(v).toString(16).padStart(2, "0")).join("")}`;
+      return a < 1 ? `${hex}${Math.round(a * 255).toString(16).padStart(2, "0")}` : hex;
+    }
+    case "rgb": {
+      const { r, g, b } = color.getRgb();
+      return `rgb(${r}, ${g}, ${b})`;
+    }
+    case "rgba": {
+      const { r, g, b, a } = color.getRgba();
+      return `rgba(${r}, ${g}, ${b}, ${a})`;
+    }
+    case "hsl": {
+      const { h, s, l } = color.getHsl();
+      return `hsl(${h}, ${s}%, ${l}%)`;
+    }
+    case "hsla": {
+      const { h, s, l, a } = color.getHsla();
+      return `hsla(${h}, ${s}%, ${l}%, ${a})`;
+    }
+    default:
+      return color.getHex();
+  }
+}
+var pipetteIcon = /* @__PURE__ */ jsx("svg", { width: "16", height: "16", viewBox: "0 0 24 24", fill: "none", "aria-hidden": "true", children: /* @__PURE__ */ jsx(
+  "path",
+  {
+    d: "M19.5 3.5a2.12 2.12 0 0 0-3 0l-2.3 2.3-1-1-1.4 1.4 1 1L4 14.9V19h4.1l7.7-7.7 1 1 1.4-1.4-1-1 2.3-2.3a2.12 2.12 0 0 0 0-3ZM7.3 17.6H6v-1.3l6.6-6.6 1.3 1.3-6.6 6.6Z",
+    fill: "currentColor"
+  }
+) });
+var ColorPicker = ({
+  defaultValue = "#3641f5",
+  defaultFormat = "hex",
+  formats = ALL_FORMATS,
+  showInput = true,
+  withEyeDropper = false,
+  label,
+  onChange,
+  className,
+  ...rest
+}) => {
+  const [hsva, setHsva] = useState(
+    () => new Color({ type: "hex", value: defaultValue }).getHsva()
+  );
+  const [format, setFormat] = useState(defaultFormat);
+  const [isOpen, setIsOpen] = useState(false);
+  const [popupPosition, setPopupPosition] = useState({
+    left: 0,
+    top: 0,
+    width: 320
+  });
+  const [draft, setDraft] = useState(null);
+  const [exact, setExact] = useState(
+    () => ({ format: "hex", value: defaultValue })
+  );
+  const colorInput = useMemo(() => ({ type: "hsva", ...hsva }), [hsva]);
+  const currentColor = useMemo(() => new Color(colorInput), [colorInput]);
+  const display = exact && exact.format === format ? exact.value : colorToString(currentColor, format);
+  const inputValue = draft ?? display;
+  const hsvaRef = useRef(hsva);
+  hsvaRef.current = hsva;
+  const formatRef = useRef(format);
+  formatRef.current = format;
+  const onChangeRef = useRef(onChange);
+  onChangeRef.current = onChange;
+  const rootRef = useRef(null);
+  const triggerRef = useRef(null);
+  const popupRef = useRef(null);
+  useEffect(() => {
+    if (!isOpen) return;
+    const handlePointerDown = (event) => {
+      const target = event.target;
+      if (rootRef.current && !rootRef.current.contains(target) && !popupRef.current?.contains(target)) {
+        setIsOpen(false);
+      }
+    };
+    const handleEscape = (event) => {
+      if (event.key === "Escape") setIsOpen(false);
+    };
+    document.addEventListener("mousedown", handlePointerDown);
+    document.addEventListener("keydown", handleEscape);
+    return () => {
+      document.removeEventListener("mousedown", handlePointerDown);
+      document.removeEventListener("keydown", handleEscape);
+    };
+  }, [isOpen]);
+  const updatePopupPosition = useCallback(() => {
+    const trigger = triggerRef.current;
+    if (!trigger) return;
+    const rect = trigger.getBoundingClientRect();
+    const viewportPadding = 16;
+    const gap = 8;
+    const width = Math.min(320, window.innerWidth - viewportPadding * 2);
+    const popupHeight = popupRef.current?.offsetHeight ?? 306;
+    const fitsBelow = window.innerHeight - rect.bottom - gap >= popupHeight;
+    const top = fitsBelow || rect.top < popupHeight + gap ? rect.bottom + gap : rect.top - popupHeight - gap;
+    const left = Math.min(
+      Math.max(rect.left, viewportPadding),
+      window.innerWidth - width - viewportPadding
+    );
+    setPopupPosition({ left, top: Math.max(viewportPadding, top), width });
+  }, []);
+  useLayoutEffect(() => {
+    if (!isOpen) return;
+    updatePopupPosition();
+    window.addEventListener("resize", updatePopupPosition);
+    window.addEventListener("scroll", updatePopupPosition, true);
+    return () => {
+      window.removeEventListener("resize", updatePopupPosition);
+      window.removeEventListener("scroll", updatePopupPosition, true);
+    };
+  }, [isOpen, updatePopupPosition]);
+  const handlePickerChange = useCallback((next) => {
+    const nv = next.getHsva();
+    const cur = hsvaRef.current;
+    if (nv.h === cur.h && nv.s === cur.s && nv.v === cur.v && nv.a === cur.a) return;
+    setHsva(nv);
+    setExact(null);
+    setDraft(null);
+    onChangeRef.current?.(colorToString(next, formatRef.current), next);
+  }, []);
+  const handleFormatChange = (f) => {
+    setFormat(f);
+    setDraft(null);
+    onChange?.(
+      exact && exact.format === f ? exact.value : colorToString(currentColor, f),
+      currentColor
+    );
+  };
+  const handleInputChange = (text) => {
+    setDraft(text);
+    const parsed = parseValue(text, format);
+    if (parsed) {
+      const c = new Color(parsed);
+      setHsva(c.getHsva());
+      setExact({ format, value: text.trim() });
+      onChange?.(text.trim(), c);
+    }
+  };
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      ref: rootRef,
+      className: cn("relative w-full max-w-xs", className),
+      ...rest,
+      children: [
+        label && /* @__PURE__ */ jsx("span", { className: "mb-1.5 block text-sm font-medium text-gray-700 dark:text-gray-400", children: label }),
+        /* @__PURE__ */ jsxs(
+          "button",
+          {
+            ref: triggerRef,
+            type: "button",
+            "aria-haspopup": "dialog",
+            "aria-expanded": isOpen,
+            "aria-label": label ? `Open ${label} color picker` : "Open color picker",
+            onClick: () => setIsOpen((open) => !open),
+            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",
+            children: [
+              /* @__PURE__ */ jsx(
+                "span",
+                {
+                  "aria-hidden": "true",
+                  className: "h-7 w-7 shrink-0 rounded-md border border-gray-200 dark:border-gray-700",
+                  style: { backgroundColor: currentColor.format("rgba") }
+                }
+              ),
+              /* @__PURE__ */ jsx("span", { className: "min-w-0 flex-1 truncate font-mono text-sm text-gray-800 dark:text-white/90", children: display }),
+              /* @__PURE__ */ jsx(
+                "svg",
+                {
+                  "aria-hidden": "true",
+                  className: cn(
+                    "h-4 w-4 shrink-0 text-gray-500 transition-transform dark:text-gray-400",
+                    isOpen && "rotate-180"
+                  ),
+                  viewBox: "0 0 24 24",
+                  fill: "none",
+                  children: /* @__PURE__ */ jsx("path", { d: "m6 9 6 6 6-6", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" })
+                }
+              )
+            ]
+          }
+        ),
+        isOpen && typeof document !== "undefined" && createPortal(
+          /* @__PURE__ */ jsxs(
+            "div",
+            {
+              ref: popupRef,
+              role: "dialog",
+              "aria-label": label ? `${label} color picker` : "Color picker",
+              className: "fixed z-999 rounded-2xl border border-gray-200 bg-white p-3 shadow-theme-lg dark:border-gray-700 dark:bg-gray-900",
+              style: {
+                left: popupPosition.left,
+                top: popupPosition.top,
+                width: popupPosition.width
+              },
+              children: [
+                /* @__PURE__ */ jsxs(
+                  ColorPicker$1,
+                  {
+                    color: colorInput,
+                    onChange: handlePickerChange,
+                    className: "h-auto w-full",
+                    children: [
+                      /* @__PURE__ */ jsx(ColorPicker$1.Saturation, { className: "mb-4 h-40 rounded-lg" }),
+                      /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-3", children: [
+                        withEyeDropper && /* @__PURE__ */ jsx(ColorPicker$1.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]", children: pipetteIcon }),
+                        /* @__PURE__ */ jsxs("div", { className: "flex flex-1 flex-col gap-3", children: [
+                          /* @__PURE__ */ jsx(ColorPicker$1.Hue, { className: "h-4" }),
+                          /* @__PURE__ */ jsx(ColorPicker$1.Alpha, { className: "h-4" })
+                        ] })
+                      ] })
+                    ]
+                  }
+                ),
+                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(
+                      "select",
+                      {
+                        "aria-label": "Color format",
+                        value: format,
+                        onChange: (e) => handleFormatChange(e.target.value),
+                        className: "h-11 appearance-none rounded-lg border border-gray-300 bg-transparent pl-3 pr-8 text-sm text-gray-700 focus:outline-hidden dark:border-gray-700 dark:text-gray-300",
+                        children: formats.map((f) => /* @__PURE__ */ jsx("option", { value: f, children: f.toUpperCase() }, f))
+                      }
+                    ),
+                    /* @__PURE__ */ jsx(
+                      "svg",
+                      {
+                        "aria-hidden": "true",
+                        className: "pointer-events-none absolute right-2.5 top-1/2 -translate-y-1/2 text-gray-500 dark:text-gray-400",
+                        width: "14",
+                        height: "14",
+                        viewBox: "0 0 24 24",
+                        fill: "none",
+                        children: /* @__PURE__ */ jsx("path", { d: "m6 9 6 6 6-6", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" })
+                      }
+                    )
+                  ] }),
+                  /* @__PURE__ */ jsx(
+                    "input",
+                    {
+                      "aria-label": "Color value",
+                      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-transparent px-3 font-mono text-sm text-gray-800 focus:outline-hidden dark:border-gray-700 dark:text-white/90"
+                    }
+                  )
+                ] })
+              ]
+            }
+          ),
+          document.body
+        )
+      ]
+    }
+  );
+};
+
+export { ColorPicker };
+//# sourceMappingURL=chunk-LXA5UOBC.js.map
+//# sourceMappingURL=chunk-LXA5UOBC.js.map

package/dist/chunk-LXA5UOBC.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/ColorPicker/ColorPicker.tsx"],"names":["RBColorPicker"],"mappings":"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","file":"chunk-LXA5UOBC.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 { cn } from \"../../lib/cn\";\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\nconst pipetteIcon = (\n  <svg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\" aria-hidden=\"true\">\n    <path\n      d=\"M19.5 3.5a2.12 2.12 0 0 0-3 0l-2.3 2.3-1-1-1.4 1.4 1 1L4 14.9V19h4.1l7.7-7.7 1 1 1.4-1.4-1-1 2.3-2.3a2.12 2.12 0 0 0 0-3ZM7.3 17.6H6v-1.3l6.6-6.6 1.3 1.3-6.6 6.6Z\"\n      fill=\"currentColor\"\n    />\n  </svg>\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\n  const colorInput = useMemo(() => ({ type: \"hsva\" as const, ...hsva }), [hsva]);\n  const currentColor = useMemo(() => new Color(colorInput), [colorInput]);\n  const display =\n    exact && exact.format === format ? exact.value : 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.left, 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    onChangeRef.current?.(colorToString(next, formatRef.current), next);\n  }, []);\n\n  const handleFormatChange = (f: ColorPickerFormat) => {\n    setFormat(f);\n    setDraft(null);\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    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  return (\n    <div\n      ref={rootRef}\n      className={cn(\"relative w-full max-w-xs\", 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          className=\"h-7 w-7 shrink-0 rounded-md border border-gray-200 dark:border-gray-700\"\n          style={{ backgroundColor: 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        <svg\n          aria-hidden=\"true\"\n          className={cn(\n            \"h-4 w-4 shrink-0 text-gray-500 transition-transform dark:text-gray-400\",\n            isOpen && \"rotate-180\"\n          )}\n          viewBox=\"0 0 24 24\"\n          fill=\"none\"\n        >\n          <path d=\"m6 9 6 6 6-6\" stroke=\"currentColor\" strokeWidth=\"2\" strokeLinecap=\"round\" strokeLinejoin=\"round\" />\n        </svg>\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=\"fixed z-999 rounded-2xl border border-gray-200 bg-white p-3 shadow-theme-lg dark:border-gray-700 dark:bg-gray-900\"\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=\"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                  {pipetteIcon}\n                </RBColorPicker.EyeDropper>\n              )}\n              <div className=\"flex flex-1 flex-col gap-3\">\n                <RBColorPicker.Hue className=\"h-4\" />\n                <RBColorPicker.Alpha className=\"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-transparent pl-3 pr-8 text-sm text-gray-700 focus:outline-hidden dark:border-gray-700 dark:text-gray-300\"\n                  >\n                    {formats.map((f) => (\n                      <option key={f} value={f}>\n                        {f.toUpperCase()}\n                      </option>\n                    ))}\n                  </select>\n                  <svg\n                    aria-hidden=\"true\"\n                    className=\"pointer-events-none absolute right-2.5 top-1/2 -translate-y-1/2 text-gray-500 dark:text-gray-400\"\n                    width=\"14\"\n                    height=\"14\"\n                    viewBox=\"0 0 24 24\"\n                    fill=\"none\"\n                  >\n                    <path d=\"m6 9 6 6 6-6\" stroke=\"currentColor\" strokeWidth=\"2\" strokeLinecap=\"round\" strokeLinejoin=\"round\" />\n                  </svg>\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-transparent px-3 font-mono text-sm text-gray-800 focus:outline-hidden dark:border-gray-700 dark:text-white/90\"\n              />\n            </div>\n          )}\n        </div>,\n        document.body\n      )}\n    </div>\n  );\n};\n"]}

package/dist/chunk-T55WXZNL.cjs

@@ -0,0 +1,293 @@
+"use client";
+'use strict';
+
+var chunkYERNSNT4_cjs = require('./chunk-YERNSNT4.cjs');
+var react = require('react');
+var reactDom = require('react-dom');
+var reactBeautifulColor = require('react-beautiful-color');
+var jsxRuntime = require('react/jsx-runtime');
+
+var ALL_FORMATS = ["hex", "rgb", "rgba", "hsl", "hsla"];
+function parseValue(text, format) {
+  const t = text.trim();
+  if (format === "hex") {
+    return /^#([0-9a-f]{3}|[0-9a-f]{6}|[0-9a-f]{8})$/i.test(t) ? { type: "hex", value: t } : null;
+  }
+  const n = t.match(/-?\d*\.?\d+/g)?.map(Number) ?? [];
+  if (format === "rgb" && n.length >= 3) return { type: "rgb", r: n[0], g: n[1], b: n[2] };
+  if (format === "rgba" && n.length >= 4)
+    return { type: "rgba", r: n[0], g: n[1], b: n[2], a: n[3] };
+  if (format === "hsl" && n.length >= 3) return { type: "hsl", h: n[0], s: n[1], l: n[2] };
+  if (format === "hsla" && n.length >= 4)
+    return { type: "hsla", h: n[0], s: n[1], l: n[2], a: n[3] };
+  return null;
+}
+function colorToString(color, format) {
+  switch (format) {
+    case "hex": {
+      const { r, g, b } = color.getRgb();
+      const a = color.getRgba().a;
+      const hex = `#${[r, g, b].map((v) => Math.round(v).toString(16).padStart(2, "0")).join("")}`;
+      return a < 1 ? `${hex}${Math.round(a * 255).toString(16).padStart(2, "0")}` : hex;
+    }
+    case "rgb": {
+      const { r, g, b } = color.getRgb();
+      return `rgb(${r}, ${g}, ${b})`;
+    }
+    case "rgba": {
+      const { r, g, b, a } = color.getRgba();
+      return `rgba(${r}, ${g}, ${b}, ${a})`;
+    }
+    case "hsl": {
+      const { h, s, l } = color.getHsl();
+      return `hsl(${h}, ${s}%, ${l}%)`;
+    }
+    case "hsla": {
+      const { h, s, l, a } = color.getHsla();
+      return `hsla(${h}, ${s}%, ${l}%, ${a})`;
+    }
+    default:
+      return color.getHex();
+  }
+}
+var pipetteIcon = /* @__PURE__ */ jsxRuntime.jsx("svg", { width: "16", height: "16", viewBox: "0 0 24 24", fill: "none", "aria-hidden": "true", children: /* @__PURE__ */ jsxRuntime.jsx(
+  "path",
+  {
+    d: "M19.5 3.5a2.12 2.12 0 0 0-3 0l-2.3 2.3-1-1-1.4 1.4 1 1L4 14.9V19h4.1l7.7-7.7 1 1 1.4-1.4-1-1 2.3-2.3a2.12 2.12 0 0 0 0-3ZM7.3 17.6H6v-1.3l6.6-6.6 1.3 1.3-6.6 6.6Z",
+    fill: "currentColor"
+  }
+) });
+var ColorPicker = ({
+  defaultValue = "#3641f5",
+  defaultFormat = "hex",
+  formats = ALL_FORMATS,
+  showInput = true,
+  withEyeDropper = false,
+  label,
+  onChange,
+  className,
+  ...rest
+}) => {
+  const [hsva, setHsva] = react.useState(
+    () => new reactBeautifulColor.Color({ type: "hex", value: defaultValue }).getHsva()
+  );
+  const [format, setFormat] = react.useState(defaultFormat);
+  const [isOpen, setIsOpen] = react.useState(false);
+  const [popupPosition, setPopupPosition] = react.useState({
+    left: 0,
+    top: 0,
+    width: 320
+  });
+  const [draft, setDraft] = react.useState(null);
+  const [exact, setExact] = react.useState(
+    () => ({ format: "hex", value: defaultValue })
+  );
+  const colorInput = react.useMemo(() => ({ type: "hsva", ...hsva }), [hsva]);
+  const currentColor = react.useMemo(() => new reactBeautifulColor.Color(colorInput), [colorInput]);
+  const display = exact && exact.format === format ? exact.value : colorToString(currentColor, format);
+  const inputValue = draft ?? display;
+  const hsvaRef = react.useRef(hsva);
+  hsvaRef.current = hsva;
+  const formatRef = react.useRef(format);
+  formatRef.current = format;
+  const onChangeRef = react.useRef(onChange);
+  onChangeRef.current = onChange;
+  const rootRef = react.useRef(null);
+  const triggerRef = react.useRef(null);
+  const popupRef = react.useRef(null);
+  react.useEffect(() => {
+    if (!isOpen) return;
+    const handlePointerDown = (event) => {
+      const target = event.target;
+      if (rootRef.current && !rootRef.current.contains(target) && !popupRef.current?.contains(target)) {
+        setIsOpen(false);
+      }
+    };
+    const handleEscape = (event) => {
+      if (event.key === "Escape") setIsOpen(false);
+    };
+    document.addEventListener("mousedown", handlePointerDown);
+    document.addEventListener("keydown", handleEscape);
+    return () => {
+      document.removeEventListener("mousedown", handlePointerDown);
+      document.removeEventListener("keydown", handleEscape);
+    };
+  }, [isOpen]);
+  const updatePopupPosition = react.useCallback(() => {
+    const trigger = triggerRef.current;
+    if (!trigger) return;
+    const rect = trigger.getBoundingClientRect();
+    const viewportPadding = 16;
+    const gap = 8;
+    const width = Math.min(320, window.innerWidth - viewportPadding * 2);
+    const popupHeight = popupRef.current?.offsetHeight ?? 306;
+    const fitsBelow = window.innerHeight - rect.bottom - gap >= popupHeight;
+    const top = fitsBelow || rect.top < popupHeight + gap ? rect.bottom + gap : rect.top - popupHeight - gap;
+    const left = Math.min(
+      Math.max(rect.left, viewportPadding),
+      window.innerWidth - width - viewportPadding
+    );
+    setPopupPosition({ left, top: Math.max(viewportPadding, top), width });
+  }, []);
+  react.useLayoutEffect(() => {
+    if (!isOpen) return;
+    updatePopupPosition();
+    window.addEventListener("resize", updatePopupPosition);
+    window.addEventListener("scroll", updatePopupPosition, true);
+    return () => {
+      window.removeEventListener("resize", updatePopupPosition);
+      window.removeEventListener("scroll", updatePopupPosition, true);
+    };
+  }, [isOpen, updatePopupPosition]);
+  const handlePickerChange = react.useCallback((next) => {
+    const nv = next.getHsva();
+    const cur = hsvaRef.current;
+    if (nv.h === cur.h && nv.s === cur.s && nv.v === cur.v && nv.a === cur.a) return;
+    setHsva(nv);
+    setExact(null);
+    setDraft(null);
+    onChangeRef.current?.(colorToString(next, formatRef.current), next);
+  }, []);
+  const handleFormatChange = (f) => {
+    setFormat(f);
+    setDraft(null);
+    onChange?.(
+      exact && exact.format === f ? exact.value : colorToString(currentColor, f),
+      currentColor
+    );
+  };
+  const handleInputChange = (text) => {
+    setDraft(text);
+    const parsed = parseValue(text, format);
+    if (parsed) {
+      const c = new reactBeautifulColor.Color(parsed);
+      setHsva(c.getHsva());
+      setExact({ format, value: text.trim() });
+      onChange?.(text.trim(), c);
+    }
+  };
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    "div",
+    {
+      ref: rootRef,
+      className: chunkYERNSNT4_cjs.cn("relative w-full max-w-xs", className),
+      ...rest,
+      children: [
+        label && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "mb-1.5 block text-sm font-medium text-gray-700 dark:text-gray-400", children: label }),
+        /* @__PURE__ */ jsxRuntime.jsxs(
+          "button",
+          {
+            ref: triggerRef,
+            type: "button",
+            "aria-haspopup": "dialog",
+            "aria-expanded": isOpen,
+            "aria-label": label ? `Open ${label} color picker` : "Open color picker",
+            onClick: () => setIsOpen((open) => !open),
+            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",
+            children: [
+              /* @__PURE__ */ jsxRuntime.jsx(
+                "span",
+                {
+                  "aria-hidden": "true",
+                  className: "h-7 w-7 shrink-0 rounded-md border border-gray-200 dark:border-gray-700",
+                  style: { backgroundColor: currentColor.format("rgba") }
+                }
+              ),
+              /* @__PURE__ */ jsxRuntime.jsx("span", { className: "min-w-0 flex-1 truncate font-mono text-sm text-gray-800 dark:text-white/90", children: display }),
+              /* @__PURE__ */ jsxRuntime.jsx(
+                "svg",
+                {
+                  "aria-hidden": "true",
+                  className: chunkYERNSNT4_cjs.cn(
+                    "h-4 w-4 shrink-0 text-gray-500 transition-transform dark:text-gray-400",
+                    isOpen && "rotate-180"
+                  ),
+                  viewBox: "0 0 24 24",
+                  fill: "none",
+                  children: /* @__PURE__ */ jsxRuntime.jsx("path", { d: "m6 9 6 6 6-6", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" })
+                }
+              )
+            ]
+          }
+        ),
+        isOpen && typeof document !== "undefined" && reactDom.createPortal(
+          /* @__PURE__ */ jsxRuntime.jsxs(
+            "div",
+            {
+              ref: popupRef,
+              role: "dialog",
+              "aria-label": label ? `${label} color picker` : "Color picker",
+              className: "fixed z-999 rounded-2xl border border-gray-200 bg-white p-3 shadow-theme-lg dark:border-gray-700 dark:bg-gray-900",
+              style: {
+                left: popupPosition.left,
+                top: popupPosition.top,
+                width: popupPosition.width
+              },
+              children: [
+                /* @__PURE__ */ jsxRuntime.jsxs(
+                  reactBeautifulColor.ColorPicker,
+                  {
+                    color: colorInput,
+                    onChange: handlePickerChange,
+                    className: "h-auto w-full",
+                    children: [
+                      /* @__PURE__ */ jsxRuntime.jsx(reactBeautifulColor.ColorPicker.Saturation, { className: "mb-4 h-40 rounded-lg" }),
+                      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-3", children: [
+                        withEyeDropper && /* @__PURE__ */ jsxRuntime.jsx(reactBeautifulColor.ColorPicker.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]", children: pipetteIcon }),
+                        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-1 flex-col gap-3", children: [
+                          /* @__PURE__ */ jsxRuntime.jsx(reactBeautifulColor.ColorPicker.Hue, { className: "h-4" }),
+                          /* @__PURE__ */ jsxRuntime.jsx(reactBeautifulColor.ColorPicker.Alpha, { className: "h-4" })
+                        ] })
+                      ] })
+                    ]
+                  }
+                ),
+                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(
+                      "select",
+                      {
+                        "aria-label": "Color format",
+                        value: format,
+                        onChange: (e) => handleFormatChange(e.target.value),
+                        className: "h-11 appearance-none rounded-lg border border-gray-300 bg-transparent pl-3 pr-8 text-sm text-gray-700 focus:outline-hidden dark:border-gray-700 dark:text-gray-300",
+                        children: formats.map((f) => /* @__PURE__ */ jsxRuntime.jsx("option", { value: f, children: f.toUpperCase() }, f))
+                      }
+                    ),
+                    /* @__PURE__ */ jsxRuntime.jsx(
+                      "svg",
+                      {
+                        "aria-hidden": "true",
+                        className: "pointer-events-none absolute right-2.5 top-1/2 -translate-y-1/2 text-gray-500 dark:text-gray-400",
+                        width: "14",
+                        height: "14",
+                        viewBox: "0 0 24 24",
+                        fill: "none",
+                        children: /* @__PURE__ */ jsxRuntime.jsx("path", { d: "m6 9 6 6 6-6", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" })
+                      }
+                    )
+                  ] }),
+                  /* @__PURE__ */ jsxRuntime.jsx(
+                    "input",
+                    {
+                      "aria-label": "Color value",
+                      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-transparent px-3 font-mono text-sm text-gray-800 focus:outline-hidden dark:border-gray-700 dark:text-white/90"
+                    }
+                  )
+                ] })
+              ]
+            }
+          ),
+          document.body
+        )
+      ]
+    }
+  );
+};
+
+exports.ColorPicker = ColorPicker;
+//# sourceMappingURL=chunk-T55WXZNL.cjs.map
+//# sourceMappingURL=chunk-T55WXZNL.cjs.map