@etus/ui 0.4.0-beta.2 → 0.4.0-beta.20

package/dist/chunk-BUCXPZYE.js

@@ -0,0 +1,643 @@
+import { Popover, PopoverTrigger, PopoverContent } from './chunk-EQ4YAADN.js';
+import { cn } from './chunk-RVAYDRMA.js';
+import { Palette } from 'lucide-react';
+import * as React from 'react';
+import { cva } from 'class-variance-authority';
+import { jsxs, jsx } from 'react/jsx-runtime';
+
+var colorPickerTriggerVariants = cva(
+  // Base styles
+  [
+    "inline-flex w-full items-center justify-between gap-2 rounded-[var(--color-picker-trigger-radius)] border bg-transparent font-normal transition-[color,box-shadow] outline-none",
+    "text-left",
+    "placeholder:text-muted-foreground",
+    "disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50",
+    "focus-visible:border-[color:var(--color-picker-focus-ring-primary)] focus-visible:ring-[color:var(--color-picker-focus-ring-primary)]/50 focus-visible:ring-[length:var(--color-picker-focus-ring-width)]",
+    "aria-invalid:ring-[color:var(--color-picker-focus-ring-destructive)]/20 dark:aria-invalid:ring-[color:var(--color-picker-focus-ring-destructive)]/40 aria-invalid:border-[color:var(--color-picker-focus-ring-destructive)]"
+  ],
+  {
+    variants: {
+      size: {
+        sm: "h-9 px-2.5 py-1 text-sm",
+        md: "h-[var(--color-picker-trigger-size)] px-3 py-1 text-base md:text-sm",
+        lg: "h-11 px-3.5 py-1.5 text-base"
+      },
+      variant: {
+        default: "border-input shadow-xs dark:bg-input/30",
+        filled: "border-transparent bg-muted",
+        flushed: "rounded-none border-x-0 border-t-0 border-b-input px-0"
+      }
+    },
+    defaultVariants: {
+      size: "md",
+      variant: "default"
+    }
+  }
+);
+var colorPickerSwatchVariants = cva(
+  // Base styles
+  [
+    "rounded-[var(--color-picker-swatch-radius)] border border-input cursor-pointer transition-all",
+    "hover:scale-110 hover:border-ring",
+    "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2"
+  ],
+  {
+    variants: {
+      size: {
+        sm: "size-5",
+        md: "size-[var(--color-picker-swatch-size)]",
+        lg: "size-7"
+      }
+    },
+    defaultVariants: {
+      size: "md"
+    }
+  }
+);
+var colorPickerPreviewVariants = cva(
+  // Base styles
+  [
+    "rounded-[var(--color-picker-swatch-radius)] border border-input shrink-0"
+  ],
+  {
+    variants: {
+      size: {
+        sm: "size-4",
+        md: "size-5",
+        lg: "size-6"
+      }
+    },
+    defaultVariants: {
+      size: "md"
+    }
+  }
+);
+
+// src/components/forms/ColorPicker/colorMath.ts
+var clamp = (n, min, max) => Math.min(max, Math.max(min, n));
+function hexToRgba(hex) {
+  const match = /^#?([0-9a-f]{3,8})$/i.exec(hex.trim());
+  if (!match?.[1]) return null;
+  let h = match[1];
+  if (h.length === 3 || h.length === 4) {
+    h = h.replaceAll(/./g, (c) => c + c);
+  }
+  if (h.length !== 6 && h.length !== 8) return null;
+  return {
+    r: Number.parseInt(h.slice(0, 2), 16),
+    g: Number.parseInt(h.slice(2, 4), 16),
+    b: Number.parseInt(h.slice(4, 6), 16),
+    a: h.length === 8 ? Number.parseInt(h.slice(6, 8), 16) / 255 : 1
+  };
+}
+var toHex2 = (n) => clamp(Math.round(n), 0, 255).toString(16).padStart(2, "0");
+function rgbaToHex({ r, g, b, a }) {
+  const base = `#${toHex2(r)}${toHex2(g)}${toHex2(b)}`;
+  return a >= 1 ? base : base + toHex2(clamp(a, 0, 1) * 255);
+}
+function chromaToRgb(h, c, x, m) {
+  const [rp, gp, bp] = h < 60 ? [c, x, 0] : h < 120 ? [x, c, 0] : h < 180 ? [0, c, x] : h < 240 ? [0, x, c] : h < 300 ? [x, 0, c] : [c, 0, x];
+  return {
+    r: Math.round((rp + m) * 255),
+    g: Math.round((gp + m) * 255),
+    b: Math.round((bp + m) * 255),
+    a: 1
+  };
+}
+function rgbToHsv(r, g, b) {
+  const rn = r / 255;
+  const gn = g / 255;
+  const bn = b / 255;
+  const max = Math.max(rn, gn, bn);
+  const min = Math.min(rn, gn, bn);
+  const d = max - min;
+  let h = 0;
+  if (d !== 0) {
+    if (max === rn) h = (gn - bn) / d % 6;
+    else if (max === gn) h = (bn - rn) / d + 2;
+    else h = (rn - gn) / d + 4;
+    h *= 60;
+    if (h < 0) h += 360;
+  }
+  return { h, s: (max === 0 ? 0 : d / max) * 100, v: max * 100 };
+}
+function hsvToRgb(h, s, v) {
+  const sn = s / 100;
+  const vn = v / 100;
+  const c = vn * sn;
+  const x = c * (1 - Math.abs(h / 60 % 2 - 1));
+  return chromaToRgb(h, c, x, vn - c);
+}
+function rgbToHsl(r, g, b) {
+  const rn = r / 255;
+  const gn = g / 255;
+  const bn = b / 255;
+  const max = Math.max(rn, gn, bn);
+  const min = Math.min(rn, gn, bn);
+  const d = max - min;
+  const l = (max + min) / 2;
+  let h = 0;
+  let s = 0;
+  if (d !== 0) {
+    s = d / (1 - Math.abs(2 * l - 1));
+    if (max === rn) h = (gn - bn) / d % 6;
+    else if (max === gn) h = (bn - rn) / d + 2;
+    else h = (rn - gn) / d + 4;
+    h *= 60;
+    if (h < 0) h += 360;
+  }
+  return { h, s: s * 100, l: l * 100 };
+}
+function hslToRgb(h, s, l) {
+  const sn = s / 100;
+  const ln = l / 100;
+  const c = (1 - Math.abs(2 * ln - 1)) * sn;
+  const x = c * (1 - Math.abs(h / 60 % 2 - 1));
+  return chromaToRgb(h, c, x, ln - c / 2);
+}
+function formatColor(rgba, format) {
+  const { r, g, b, a } = rgba;
+  if (format === "hex") return rgbaToHex(rgba).toUpperCase();
+  if (format === "rgb") {
+    const rgb = `${String(Math.round(r))}, ${String(Math.round(g))}, ${String(Math.round(b))}`;
+    return a >= 1 ? `rgb(${rgb})` : `rgba(${rgb}, ${String(Number(a.toFixed(2)))})`;
+  }
+  const { h, s, l } = rgbToHsl(r, g, b);
+  const hsl = `${String(Math.round(h))}, ${String(Math.round(s))}%, ${String(Math.round(l))}%`;
+  return a >= 1 ? `hsl(${hsl})` : `hsla(${hsl}, ${String(Number(a.toFixed(2)))})`;
+}
+function parseColor(input, format) {
+  const str = input.trim();
+  if (format === "hex") return hexToRgba(str);
+  if (format === "rgb") {
+    const m2 = /^rgba?\(\s*([\d.]+)\s*,\s*([\d.]+)\s*,\s*([\d.]+)\s*(?:,\s*([\d.]+)\s*)?\)$/i.exec(
+      str
+    );
+    if (!m2) return null;
+    return {
+      r: clamp(Math.round(Number(m2[1])), 0, 255),
+      g: clamp(Math.round(Number(m2[2])), 0, 255),
+      b: clamp(Math.round(Number(m2[3])), 0, 255),
+      a: m2[4] === void 0 ? 1 : clamp(Number(m2[4]), 0, 1)
+    };
+  }
+  const m = /^hsla?\(\s*([\d.]+)\s*,\s*([\d.]+)%?\s*,\s*([\d.]+)%?\s*(?:,\s*([\d.]+)\s*)?\)$/i.exec(
+    str
+  );
+  if (!m) return null;
+  const rgb = hslToRgb(
+    Number(m[1]),
+    clamp(Number(m[2]), 0, 100),
+    clamp(Number(m[3]), 0, 100)
+  );
+  return { ...rgb, a: m[4] === void 0 ? 1 : clamp(Number(m[4]), 0, 1) };
+}
+var FORMATS = ["hex", "rgb", "hsl"];
+var clampPct = (n) => Math.min(100, Math.max(0, n));
+var HUE_TRACK = "linear-gradient(to right, #f00 0%, #ff0 17%, #0f0 33%, #0ff 50%, #00f 67%, #f0f 83%, #f00 100%)";
+var CHECKERBOARD = "repeating-conic-gradient(#bbb 0% 25%, #fff 0% 50%) 50% / 12px 12px";
+var SATURATION_WHITE = "linear-gradient(to right, #fff, rgba(255,255,255,0))";
+var SATURATION_BLACK = "linear-gradient(to top, #000, rgba(0,0,0,0))";
+var thumbClass = "pointer-events-none absolute -translate-x-1/2 -translate-y-1/2 rounded-full border-2 border-white ring-1 ring-black/30";
+function SaturationArea({ hue, s, v, onChange }) {
+  const ref = React.useRef(null);
+  const setFromPoint = (clientX, clientY) => {
+    const el = ref.current;
+    if (!el) return;
+    const rect = el.getBoundingClientRect();
+    onChange(
+      clampPct((clientX - rect.left) / rect.width * 100),
+      clampPct((1 - (clientY - rect.top) / rect.height) * 100)
+    );
+  };
+  const handlePointerDown = (e) => {
+    e.currentTarget.setPointerCapture(e.pointerId);
+    setFromPoint(e.clientX, e.clientY);
+  };
+  const handlePointerMove = (e) => {
+    if (e.buttons !== 1) return;
+    setFromPoint(e.clientX, e.clientY);
+  };
+  const handleKeyDown = (e) => {
+    const step = e.shiftKey ? 10 : 1;
+    let ns = s;
+    let nv = v;
+    let handled = true;
+    if (e.key === "ArrowRight") ns = clampPct(s + step);
+    else if (e.key === "ArrowLeft") ns = clampPct(s - step);
+    else if (e.key === "ArrowUp") nv = clampPct(v + step);
+    else if (e.key === "ArrowDown") nv = clampPct(v - step);
+    else handled = false;
+    if (handled) {
+      e.preventDefault();
+      onChange(ns, nv);
+    }
+  };
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      ref,
+      "aria-label": "Saturation and brightness",
+      "aria-valuetext": `Saturation ${String(Math.round(s))}%, brightness ${String(Math.round(v))}%`,
+      className: "relative h-40 w-full touch-none cursor-crosshair overflow-hidden rounded-md outline-none focus-visible:ring-[length:var(--color-picker-focus-ring-width)] focus-visible:ring-[color:var(--color-picker-focus-ring-primary)]/50",
+      "data-slot": "color-picker-area",
+      role: "slider",
+      style: { backgroundColor: `hsl(${String(hue)}, 100%, 50%)` },
+      tabIndex: 0,
+      onKeyDown: handleKeyDown,
+      onPointerDown: handlePointerDown,
+      onPointerMove: handlePointerMove,
+      children: [
+        /* @__PURE__ */ jsx("div", { className: "absolute inset-0", style: { background: SATURATION_WHITE } }),
+        /* @__PURE__ */ jsx("div", { className: "absolute inset-0", style: { background: SATURATION_BLACK } }),
+        /* @__PURE__ */ jsx(
+          "span",
+          {
+            style: {
+              left: `${String(s)}%`,
+              top: `${String(100 - v)}%`,
+              backgroundColor: rgbaToHex(hsvToRgb(hue, s, v))
+            },
+            className: cn(thumbClass, "size-3.5"),
+            "data-slot": "color-picker-area-thumb"
+          }
+        )
+      ]
+    }
+  );
+}
+function ColorSlider({
+  ariaLabel,
+  max,
+  thumbColor,
+  trackStyle,
+  value,
+  onChange
+}) {
+  const ref = React.useRef(null);
+  const setFromPoint = (clientX) => {
+    const el = ref.current;
+    if (!el) return;
+    const rect = el.getBoundingClientRect();
+    const next = (clientX - rect.left) / rect.width * max;
+    onChange(Math.min(max, Math.max(0, next)));
+  };
+  const handlePointerDown = (e) => {
+    e.currentTarget.setPointerCapture(e.pointerId);
+    setFromPoint(e.clientX);
+  };
+  const handlePointerMove = (e) => {
+    if (e.buttons !== 1) return;
+    setFromPoint(e.clientX);
+  };
+  const handleKeyDown = (e) => {
+    const step = (e.shiftKey ? 10 : 1) * (max / 100);
+    let next = value;
+    let handled = true;
+    if (e.key === "ArrowRight" || e.key === "ArrowUp") next = Math.min(max, value + step);
+    else if (e.key === "ArrowLeft" || e.key === "ArrowDown") next = Math.max(0, value - step);
+    else if (e.key === "Home") next = 0;
+    else if (e.key === "End") next = max;
+    else handled = false;
+    if (handled) {
+      e.preventDefault();
+      onChange(next);
+    }
+  };
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      ref,
+      "aria-label": ariaLabel,
+      "aria-valuemax": max,
+      "aria-valuemin": 0,
+      "aria-valuenow": Math.round(value),
+      className: "relative h-3 w-full touch-none cursor-pointer rounded-full outline-none focus-visible:ring-[length:var(--color-picker-focus-ring-width)] focus-visible:ring-[color:var(--color-picker-focus-ring-primary)]/50",
+      role: "slider",
+      style: trackStyle,
+      tabIndex: 0,
+      onKeyDown: handleKeyDown,
+      onPointerDown: handlePointerDown,
+      onPointerMove: handlePointerMove,
+      children: /* @__PURE__ */ jsx(
+        "span",
+        {
+          className: cn(thumbClass, "top-1/2 size-4"),
+          style: { left: `${String(value / max * 100)}%`, backgroundColor: thumbColor }
+        }
+      )
+    }
+  );
+}
+function ColorPickerPanel({
+  showAlpha,
+  showInput,
+  value,
+  onChange
+}) {
+  const initial = hexToRgba(value) ?? { r: 0, g: 0, b: 0, a: 1 };
+  const [hsv, setHsv] = React.useState(() => rgbToHsv(initial.r, initial.g, initial.b));
+  const [alpha, setAlpha] = React.useState(initial.a);
+  const [format, setFormat] = React.useState("hex");
+  const [draft, setDraft] = React.useState("");
+  const lastEmittedRef = React.useRef(value);
+  const rgba = { ...hsvToRgb(hsv.h, hsv.s, hsv.v), a: alpha };
+  const formatted = formatColor(rgba, format);
+  React.useEffect(() => {
+    if (value === lastEmittedRef.current) return;
+    const next = hexToRgba(value);
+    if (!next) return;
+    setHsv(rgbToHsv(next.r, next.g, next.b));
+    setAlpha(next.a);
+  }, [value]);
+  React.useEffect(() => {
+    setDraft(formatted);
+  }, [formatted]);
+  const emit = (nextHsv, nextAlpha) => {
+    setHsv(nextHsv);
+    setAlpha(nextAlpha);
+    const hex = rgbaToHex({ ...hsvToRgb(nextHsv.h, nextHsv.s, nextHsv.v), a: nextAlpha });
+    lastEmittedRef.current = hex;
+    onChange(hex);
+  };
+  const handleInputChange = (e) => {
+    const raw = e.target.value;
+    setDraft(raw);
+    if (format === "hex" && !/^#?[0-9a-f]{6}(?:[0-9a-f]{2})?$/i.test(raw.trim())) return;
+    const parsed = parseColor(raw, format);
+    if (parsed) emit(rgbToHsv(parsed.r, parsed.g, parsed.b), parsed.a);
+  };
+  const handleInputBlur = () => {
+    const parsed = parseColor(draft, format);
+    if (parsed) emit(rgbToHsv(parsed.r, parsed.g, parsed.b), parsed.a);
+    else setDraft(formatted);
+  };
+  const solidHex = rgbaToHex(hsvToRgb(hsv.h, hsv.s, hsv.v));
+  return /* @__PURE__ */ jsxs("div", { className: "space-y-3", "data-slot": "color-picker-panel", children: [
+    /* @__PURE__ */ jsx(
+      SaturationArea,
+      {
+        hue: hsv.h,
+        s: hsv.s,
+        v: hsv.v,
+        onChange: (s, v) => {
+          emit({ h: hsv.h, s, v }, alpha);
+        }
+      }
+    ),
+    /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-3", children: [
+      /* @__PURE__ */ jsx(
+        "span",
+        {
+          style: {
+            background: `linear-gradient(${rgbaToHex(rgba)}, ${rgbaToHex(rgba)}), ${CHECKERBOARD}`
+          },
+          "aria-hidden": "true",
+          className: "size-9 shrink-0 rounded-full border border-[color:var(--color-picker-trigger-border)]",
+          "data-slot": "color-picker-panel-preview"
+        }
+      ),
+      /* @__PURE__ */ jsxs("div", { className: "flex-1 space-y-2", children: [
+        /* @__PURE__ */ jsx(
+          ColorSlider,
+          {
+            ariaLabel: "Hue",
+            max: 360,
+            thumbColor: `hsl(${String(hsv.h)}, 100%, 50%)`,
+            trackStyle: { background: HUE_TRACK },
+            value: hsv.h,
+            onChange: (h) => {
+              emit({ h, s: hsv.s, v: hsv.v }, alpha);
+            }
+          }
+        ),
+        showAlpha && /* @__PURE__ */ jsx("div", { className: "relative rounded-full", style: { background: CHECKERBOARD }, children: /* @__PURE__ */ jsx(
+          ColorSlider,
+          {
+            trackStyle: {
+              background: `linear-gradient(to right, rgba(0,0,0,0), ${solidHex})`
+            },
+            ariaLabel: "Alpha",
+            max: 1,
+            thumbColor: solidHex,
+            value: alpha,
+            onChange: (a) => {
+              emit(hsv, a);
+            }
+          }
+        ) })
+      ] })
+    ] }),
+    /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
+      /* @__PURE__ */ jsx("div", { "aria-label": "Color format", className: "flex gap-1", role: "group", children: FORMATS.map((f) => /* @__PURE__ */ jsx(
+        "button",
+        {
+          className: cn(
+            "rounded-md px-2 py-1 text-xs font-medium uppercase transition-colors",
+            format === f ? "bg-accent text-accent-foreground" : "text-muted-foreground hover:bg-accent/50"
+          ),
+          "aria-pressed": format === f,
+          type: "button",
+          onClick: () => {
+            setFormat(f);
+          },
+          children: f
+        },
+        f
+      )) }),
+      showInput && /* @__PURE__ */ jsx(
+        "input",
+        {
+          "aria-label": `Color value (${format})`,
+          className: "flex h-9 w-full min-w-0 flex-1 rounded-md border border-input bg-transparent px-3 py-1 font-mono text-sm uppercase shadow-xs transition-[color,box-shadow] outline-none placeholder:text-muted-foreground focus-visible:border-ring focus-visible:ring-[color:var(--color-picker-focus-ring-primary)]/50 focus-visible:ring-[length:var(--color-picker-focus-ring-width)]",
+          "data-slot": "color-picker-input",
+          spellCheck: false,
+          value: draft,
+          onBlur: handleInputBlur,
+          onChange: handleInputChange
+        }
+      )
+    ] })
+  ] });
+}
+function normalizeHexColor(color) {
+  let normalized = color;
+  if (!normalized.startsWith("#")) {
+    normalized = `#${normalized}`;
+  }
+  if (normalized.length === 4) {
+    const r = normalized[1] ?? "";
+    const g = normalized[2] ?? "";
+    const b = normalized[3] ?? "";
+    return `#${r}${r}${g}${g}${b}${b}`.toLowerCase();
+  }
+  return normalized.toLowerCase();
+}
+var DEFAULT_SWATCHES = [
+  "#ef4444",
+  // red
+  "#f97316",
+  // orange
+  "#eab308",
+  // yellow
+  "#22c55e",
+  // green
+  "#14b8a6",
+  // teal
+  "#3b82f6",
+  // blue
+  "#8b5cf6",
+  // violet
+  "#ec4899",
+  // pink
+  "#000000",
+  // black
+  "#ffffff"
+  // white
+];
+function ColorPicker({
+  className,
+  value,
+  defaultValue,
+  placeholder = "Select color",
+  disabled = false,
+  swatches = DEFAULT_SWATCHES,
+  showInput = true,
+  showAlpha = true,
+  showPreview = true,
+  onChange,
+  onOpenChange,
+  size = "md",
+  variant = "default",
+  required = false,
+  invalid = false,
+  id,
+  name,
+  "aria-label": ariaLabel,
+  "aria-labelledby": ariaLabelledby,
+  ...props
+}) {
+  const [open, setOpen] = React.useState(false);
+  const [internalColor, setInternalColor] = React.useState(defaultValue);
+  const selectedColor = value ?? internalColor;
+  const handleColorChange = (color) => {
+    const normalizedColor = normalizeHexColor(color);
+    if (value === void 0) {
+      setInternalColor(normalizedColor);
+    }
+    onChange?.(normalizedColor);
+  };
+  const handleSwatchClick = (color) => {
+    handleColorChange(color);
+  };
+  const handleOpenChange = (isOpen) => {
+    setOpen(isOpen);
+    onOpenChange?.(isOpen);
+  };
+  return /* @__PURE__ */ jsxs("div", { className: cn("relative", className), "data-slot": "color-picker", ...props, children: [
+    /* @__PURE__ */ jsxs(Popover, { open, onOpenChange: handleOpenChange, children: [
+      /* @__PURE__ */ jsx(PopoverTrigger, { asChild: true, children: /* @__PURE__ */ jsxs(
+        "button",
+        {
+          className: cn(
+            colorPickerTriggerVariants({ size, variant }),
+            !selectedColor && "text-muted-foreground"
+          ),
+          "aria-expanded": open,
+          "aria-haspopup": "dialog",
+          "aria-invalid": invalid,
+          "aria-label": ariaLabel,
+          "aria-labelledby": ariaLabelledby,
+          "aria-required": required,
+          "data-has-value": !!selectedColor,
+          "data-size": size,
+          "data-slot": "color-picker-trigger",
+          "data-state": open ? "open" : "closed",
+          "data-variant": variant,
+          disabled,
+          id,
+          role: "combobox",
+          type: "button",
+          children: [
+            /* @__PURE__ */ jsxs("span", { className: "flex items-center gap-2 flex-1 truncate", children: [
+              showPreview && selectedColor && /* @__PURE__ */ jsx(
+                "span",
+                {
+                  "aria-hidden": "true",
+                  className: cn(colorPickerPreviewVariants({ size })),
+                  "data-slot": "color-picker-preview",
+                  style: { backgroundColor: selectedColor }
+                }
+              ),
+              /* @__PURE__ */ jsx("span", { className: "truncate", children: selectedColor ?? placeholder })
+            ] }),
+            /* @__PURE__ */ jsx(Palette, { "aria-hidden": "true", className: "size-4 shrink-0 opacity-50" })
+          ]
+        }
+      ) }),
+      /* @__PURE__ */ jsx(
+        PopoverContent,
+        {
+          align: "start",
+          className: "w-[var(--color-picker-content-width)] p-[var(--color-picker-content-padding)]",
+          "data-slot": "color-picker-content",
+          children: /* @__PURE__ */ jsxs("div", { className: "space-y-3", children: [
+            /* @__PURE__ */ jsx(
+              ColorPickerPanel,
+              {
+                showAlpha,
+                showInput,
+                value: selectedColor ?? "#000000",
+                onChange: handleColorChange
+              }
+            ),
+            swatches.length > 0 ? /* @__PURE__ */ jsxs("div", { className: "space-y-1.5", children: [
+              /* @__PURE__ */ jsx("span", { className: "text-xs text-muted-foreground font-medium", children: "Preset colors" }),
+              /* @__PURE__ */ jsx(
+                "div",
+                {
+                  "aria-label": "Color swatches",
+                  className: "grid grid-cols-5 gap-2",
+                  "data-slot": "color-picker-swatches",
+                  role: "group",
+                  children: swatches.map((color, index) => /* @__PURE__ */ jsx(
+                    "button",
+                    {
+                      className: cn(
+                        colorPickerSwatchVariants({ size }),
+                        selectedColor === color && "ring-2 ring-ring ring-offset-2"
+                      ),
+                      "aria-label": `Select color ${color}`,
+                      "aria-pressed": selectedColor === color,
+                      "data-color": color,
+                      "data-selected": selectedColor === color,
+                      "data-slot": "color-picker-swatch",
+                      style: { backgroundColor: color },
+                      type: "button",
+                      onClick: () => {
+                        handleSwatchClick(color);
+                      }
+                    },
+                    `${color}-${String(index)}`
+                  ))
+                }
+              )
+            ] }) : null
+          ] })
+        }
+      )
+    ] }),
+    name && /* @__PURE__ */ jsx(
+      "input",
+      {
+        name,
+        type: "hidden",
+        value: selectedColor ?? ""
+      }
+    )
+  ] });
+}
+
+export { ColorPicker, colorPickerPreviewVariants, colorPickerSwatchVariants, colorPickerTriggerVariants };
+//# sourceMappingURL=chunk-BUCXPZYE.js.map
+//# sourceMappingURL=chunk-BUCXPZYE.js.map