@devalok/shilp-sutra 0.27.2 → 0.28.0

package/dist/composed/multi-select-popover.js

@@ -25,44 +25,44 @@ const _ = r.forwardRef(
     className: K,
     ...$
   }, z) => {
-    const [f, G] = r.useState(!1), [i, S] = r.useState(""), [u, m] = r.useState(null), [C, y] = r.useState(!1), [a, p] = r.useState(-1), g = r.useRef(), I = r.useRef(null);
+    const [f, G] = r.useState(!1), [a, S] = r.useState(""), [u, m] = r.useState(null), [C, y] = r.useState(!1), [i, p] = r.useState(-1), g = r.useRef(), I = r.useRef(null);
     r.useEffect(() => {
       f || (S(""), m(null), p(-1));
     }, [f]), r.useEffect(() => {
       if (!(!c || !f)) {
-        if (!i.trim()) {
+        if (!a.trim()) {
           m(null), y(!1);
           return;
         }
         return y(!0), clearTimeout(g.current), g.current = setTimeout(() => {
-          c(i).then((e) => m(e)).catch(() => m([])).finally(() => y(!1));
+          c(a).then((e) => m(e)).catch(() => m([])).finally(() => y(!1));
         }, v), () => clearTimeout(g.current);
       }
-    }, [i, c, v, f]);
+    }, [a, c, v, f]);
     const b = r.useMemo(() => u || (o ? o.flatMap((e) => e.items) : w ?? []), [w, o, u]), x = r.useMemo(() => {
       if (c) return b;
-      const e = i.toLowerCase();
+      const e = a.toLowerCase();
       return e ? b.filter((s) => s.label.toLowerCase().includes(e)) : b;
-    }, [b, i, c]), R = r.useMemo(() => {
+    }, [b, a, c]), R = r.useMemo(() => {
       if (!o || c || u) return null;
-      const e = i.toLowerCase();
+      const e = a.toLowerCase();
       return o.map((s) => ({
         ...s,
         items: e ? s.items.filter((t) => t.label.toLowerCase().includes(e)) : s.items
       })).filter((s) => s.items.length > 0);
-    }, [o, i, c, u]);
+    }, [o, a, c, u]);
     function M(e) {
       d.includes(e) ? h(d.filter((t) => t !== e)) : k && d.length >= k ? h([...d.slice(1), e]) : h([...d, e]);
     }
     r.useEffect(() => {
       p(-1);
-    }, [i]), r.useEffect(() => {
+    }, [a]), r.useEffect(() => {
       var t;
-      if (a < 0) return;
+      if (i < 0) return;
       const e = I.current;
       if (!e) return;
-      (t = e.querySelectorAll("[data-multiselect-item]")[a]) == null || t.scrollIntoView({ block: "nearest" });
-    }, [a]);
+      (t = e.querySelectorAll("[data-multiselect-item]")[i]) == null || t.scrollIntoView({ block: "nearest" });
+    }, [i]);
     function U(e) {
       const s = x.length;
       if (s !== 0) {
@@ -70,16 +70,16 @@ const _ = r.forwardRef(
           e.preventDefault(), p((t) => t < s - 1 ? t + 1 : 0);
         else if (e.key === "ArrowUp")
           e.preventDefault(), p((t) => t <= 0 ? s - 1 : t - 1);
-        else if (e.key === "Enter" && a >= 0) {
+        else if (e.key === "Enter" && i >= 0) {
           e.preventDefault();
-          const t = x[a];
+          const t = x[i];
           t && !t.disabled && M(t.id);
         }
       }
     }
     let B = 0;
     function D(e) {
-      const s = d.includes(e.id), t = B++, E = t === a;
+      const s = d.includes(e.id), t = B++, E = t === i;
       return /* @__PURE__ */ l(
         A.button,
         {
@@ -129,7 +129,7 @@ const _ = r.forwardRef(
         e.id
       );
     }
-    return /* @__PURE__ */ l(J, { open: f, onOpenChange: G, children: [
+    return /* @__PURE__ */ l(J, { open: f, onOpenChange: G, modal: !1, children: [
       /* @__PURE__ */ n(Q, { asChild: !0, children: O }),
       /* @__PURE__ */ l(
         W,
@@ -151,11 +151,11 @@ const _ = r.forwardRef(
                 {
                   type: "text",
                   placeholder: T,
-                  value: i,
+                  value: a,
                   onChange: (e) => S(e.target.value),
                   onKeyDown: U,
                   "aria-label": "Search",
-                  "aria-activedescendant": a >= 0 ? `msp-item-${a}` : void 0,
+                  "aria-activedescendant": i >= 0 ? `msp-item-${i}` : void 0,
                   className: "w-full bg-transparent text-ds-md font-body text-surface-fg placeholder:text-surface-fg-subtle outline-none"
                 }
               ),

package/dist/ui/color-input.d.ts

@@ -1,17 +1,31 @@
 "use client";
 import * as React from 'react';
+type ColorFormat = 'hex' | 'rgb' | 'hsl';
 export interface ColorInputProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'onChange'> {
     /** Current color value (hex string, e.g. "#d33163") */
     value?: string;
     /** Called when the color changes */
     onChange?: (value: string) => void;
-    /** Optional preset color swatches */
-    presets?: string[];
+    /** Preset color swatches. Defaults to 10 named colors. Pass `false` to hide. */
+    presets?: {
+        hex: string;
+        label: string;
+    }[] | string[] | false;
     /** Whether the input is disabled */
     disabled?: boolean;
-    /** Additional className for the wrapper */
-    className?: string;
+    /** Show the interactive color picker. Default: true. */
+    showPicker?: boolean;
+    /** Default format for the input fields. Default: 'hex'. */
+    defaultFormat?: ColorFormat;
+    /** Popover alignment. Default: 'start'. */
+    align?: 'start' | 'center' | 'end';
+    /**
+     * Trigger style variant.
+     * - `default`: Swatch bleeds to left edge + hex text
+     * - `inline`: Entire trigger is the selected color with hex text overlaid
+     */
+    variant?: 'default' | 'inline';
 }
-declare const ColorInput: React.ForwardRefExoticComponent<ColorInputProps & React.RefAttributes<HTMLInputElement>>;
+declare const ColorInput: React.ForwardRefExoticComponent<ColorInputProps & React.RefAttributes<HTMLDivElement>>;
 export { ColorInput };
 //# sourceMappingURL=color-input.d.ts.map

package/dist/ui/color-input.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"color-input.d.ts","sourceRoot":"","sources":["../../src/ui/color-input.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAG9B,MAAM,WAAW,eAAgB,SAAQ,IAAI,CAAC,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC,EAAE,UAAU,CAAC;IAC7F,uDAAuD;IACvD,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,oCAAoC;IACpC,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAA;IAClC,qCAAqC;IACrC,OAAO,CAAC,EAAE,MAAM,EAAE,CAAA;IAClB,oCAAoC;IACpC,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,2CAA2C;IAC3C,SAAS,CAAC,EAAE,MAAM,CAAA;CACnB;AAED,QAAA,MAAM,UAAU,0FAmFf,CAAA;AAGD,OAAO,EAAE,UAAU,EAAE,CAAA"}
+{"version":3,"file":"color-input.d.ts","sourceRoot":"","sources":["../../src/ui/color-input.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAiF9B,KAAK,WAAW,GAAG,KAAK,GAAG,KAAK,GAAG,KAAK,CAAA;AAIxC,MAAM,WAAW,eAAgB,SAAQ,IAAI,CAAC,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC,EAAE,UAAU,CAAC;IAC7F,uDAAuD;IACvD,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,oCAAoC;IACpC,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAA;IAClC,gFAAgF;IAChF,OAAO,CAAC,EAAE;QAAE,GAAG,EAAE,MAAM,CAAC;QAAC,KAAK,EAAE,MAAM,CAAA;KAAE,EAAE,GAAG,MAAM,EAAE,GAAG,KAAK,CAAA;IAC7D,oCAAoC;IACpC,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,wDAAwD;IACxD,UAAU,CAAC,EAAE,OAAO,CAAA;IACpB,2DAA2D;IAC3D,aAAa,CAAC,EAAE,WAAW,CAAA;IAC3B,2CAA2C;IAC3C,KAAK,CAAC,EAAE,OAAO,GAAG,QAAQ,GAAG,KAAK,CAAA;IAClC;;;;OAIG;IACH,OAAO,CAAC,EAAE,SAAS,GAAG,QAAQ,CAAA;CAC/B;AAuDD,QAAA,MAAM,UAAU,wFAqXf,CAAA;AAGD,OAAO,EAAE,UAAU,EAAE,CAAA"}

package/dist/ui/color-input.js

@@ -1,88 +1,380 @@
 "use client";
-import { jsxs as d, jsx as t } from "react/jsx-runtime";
-import * as m from "react";
-import { cn as c } from "./lib/utils.js";
-const b = m.forwardRef(
-  ({ value: s = "#000000", onChange: l, presets: n, disabled: o = !1, className: i, ...u }, f) => {
-    const a = (r) => {
-      l == null || l(r);
-    };
-    return /* @__PURE__ */ d("div", { className: c("flex flex-col gap-ds-03", i), ...u, children: [
-      /* @__PURE__ */ d("div", { className: "flex items-center gap-ds-03", children: [
-        /* @__PURE__ */ d(
-          "label",
-          {
-            "aria-label": "Pick a color",
-            className: c(
-              "relative flex h-ds-sm w-ds-sm shrink-0 cursor-pointer items-center justify-center overflow-hidden rounded-ds-md border border-surface-border-strong transition-colors hover:border-surface-border-strong",
-              o && "cursor-not-allowed opacity-50"
+import { jsx as a, jsxs as p } from "react/jsx-runtime";
+import * as x from "react";
+import { Z as K } from "../_chunks/vendor-client.js";
+import { cn as k } from "./lib/utils.js";
+import { springs as R } from "./lib/motion.js";
+import { Popover as Q, PopoverTrigger as X, PopoverContent as Y } from "./popover.js";
+import { m as g, A as V } from "../_chunks/framer.js";
+function B(l) {
+  const t = /^#?([0-9a-f]{6})$/i.exec(l);
+  if (!t) return null;
+  const n = parseInt(t[1], 16);
+  return { r: n >> 16 & 255, g: n >> 8 & 255, b: n & 255 };
+}
+function O(l, t, n) {
+  return "#" + [l, t, n].map((r) => Math.max(0, Math.min(255, Math.round(r))).toString(16).padStart(2, "0")).join("");
+}
+function ee(l) {
+  const t = B(l);
+  if (!t) return null;
+  const n = t.r / 255, r = t.g / 255, i = t.b / 255, c = Math.max(n, r, i), o = Math.min(n, r, i), h = (c + o) / 2;
+  if (c === o) return { h: 0, s: 0, l: Math.round(h * 100) };
+  const m = c - o, v = h > 0.5 ? m / (2 - c - o) : m / (c - o);
+  let M = 0;
+  return c === n ? M = ((r - i) / m + (r < i ? 6 : 0)) / 6 : c === r ? M = ((i - n) / m + 2) / 6 : M = ((n - r) / m + 4) / 6, { h: Math.round(M * 360), s: Math.round(v * 100), l: Math.round(h * 100) };
+}
+function te(l, t, n) {
+  const r = t / 100, i = n / 100, c = r * Math.min(i, 1 - i), o = (h) => {
+    const m = (h + l / 30) % 12, v = i - c * Math.max(Math.min(m - 3, 9 - m, 1), -1);
+    return Math.round(255 * v);
+  };
+  return O(o(0), o(8), o(4));
+}
+const re = [
+  { hex: "#EF4444", label: "Red" },
+  { hex: "#F59E0B", label: "Amber" },
+  { hex: "#10B981", label: "Emerald" },
+  { hex: "#3B82F6", label: "Blue" },
+  { hex: "#8B5CF6", label: "Violet" },
+  { hex: "#EC4899", label: "Pink" },
+  { hex: "#06B6D4", label: "Cyan" },
+  { hex: "#F97316", label: "Orange" },
+  { hex: "#84CC16", label: "Lime" },
+  { hex: "#6366F1", label: "Indigo" }
+];
+function ae(l) {
+  const t = B(l);
+  if (!t) return !1;
+  const [n, r, i] = [t.r, t.g, t.b].map((c) => {
+    const o = c / 255;
+    return o <= 0.03928 ? o / 12.92 : Math.pow((o + 0.055) / 1.055, 2.4);
+  });
+  return 0.2126 * n + 0.7152 * r + 0.0722 * i > 0.4;
+}
+function w({
+  label: l,
+  value: t,
+  onChange: n,
+  onBlur: r,
+  disabled: i,
+  maxLength: c = 3,
+  prefix: o,
+  className: h,
+  id: m
+}) {
+  return /* @__PURE__ */ p("div", { className: k("flex flex-col gap-ds-01", h), children: [
+    /* @__PURE__ */ a("label", { htmlFor: m, className: "text-[10px] font-medium uppercase tracking-wider text-surface-fg-muted", children: l }),
+    /* @__PURE__ */ p("div", { className: "flex items-center", children: [
+      o && /* @__PURE__ */ a("span", { className: "text-ds-sm text-surface-fg-muted", children: o }),
+      /* @__PURE__ */ a(
+        "input",
+        {
+          id: m,
+          type: "text",
+          value: t,
+          disabled: i,
+          onChange: (v) => n(v.target.value),
+          onBlur: r,
+          maxLength: c,
+          className: k(
+            "h-ds-xs-plus w-full rounded-ds-sm border border-surface-border bg-surface-overlay px-ds-02 font-mono text-ds-sm text-surface-fg transition-colors",
+            "focus:border-accent-7 focus:outline-none focus:ring-1 focus:ring-accent-9",
+            i && "cursor-not-allowed opacity-50"
+          )
+        }
+      )
+    ] })
+  ] });
+}
+const se = x.forwardRef(
+  ({
+    value: l = "#000000",
+    onChange: t,
+    presets: n,
+    disabled: r = !1,
+    showPicker: i = !0,
+    defaultFormat: c = "hex",
+    align: o = "start",
+    variant: h = "default",
+    className: m,
+    ...v
+  }, M) => {
+    const [$, A] = x.useState(c), [j, D] = x.useState(!1), b = x.useId(), [s, S] = x.useState(l);
+    x.useEffect(() => {
+      S(l);
+    }, [l]);
+    const [C, W] = x.useState(l), [I, F] = x.useState([]), H = x.useRef(!1), G = (e) => {
+      r || (e && (W(s), F([])), D(e));
+    }, P = (e) => {
+      if (r) return;
+      const d = (e.startsWith("#") ? e : `#${e}`).toLowerCase();
+      F((u) => u[u.length - 1] === s ? u : [...u.slice(-19), s]), S(d), t == null || t(d);
+    }, Z = (e) => {
+      if (r) return;
+      const d = (e.startsWith("#") ? e : `#${e}`).toLowerCase();
+      H.current || (H.current = !0, F((u) => u[u.length - 1] === s ? u : [...u.slice(-19), s])), S(d), t == null || t(d);
+    }, E = () => {
+      H.current = !1;
+    }, _ = () => {
+      if (I.length === 0) return;
+      const e = I[I.length - 1];
+      F((f) => f.slice(0, -1)), S(e), t == null || t(e);
+    }, q = () => {
+      S(C), t == null || t(C), F([]);
+    }, z = n === !1 ? [] : n ? n.map(
+      (e) => typeof e == "string" ? { hex: e, label: e } : e
+    ) : re, y = B(s), N = ee(s), L = (e, f) => {
+      if (!y) return;
+      const d = parseInt(f, 10);
+      if (isNaN(d)) return;
+      const u = Math.max(0, Math.min(255, d));
+      P(O(
+        e === "r" ? u : y.r,
+        e === "g" ? u : y.g,
+        e === "b" ? u : y.b
+      ));
+    }, T = (e, f) => {
+      if (!N) return;
+      const d = parseInt(f, 10);
+      if (isNaN(d)) return;
+      const U = Math.max(0, Math.min(e === "h" ? 360 : 100, d));
+      P(te(
+        e === "h" ? U : N.h,
+        e === "s" ? U : N.s,
+        e === "l" ? U : N.l
+      ));
+    }, J = ["hex", "rgb", "hsl"];
+    return /* @__PURE__ */ a("div", { ref: M, className: k("inline-flex flex-col", m), ...v, children: /* @__PURE__ */ p(Q, { open: j, onOpenChange: G, children: [
+      /* @__PURE__ */ a(X, { asChild: !0, children: h === "inline" ? /* @__PURE__ */ a(
+        g.button,
+        {
+          type: "button",
+          disabled: r,
+          className: k(
+            "group flex items-center justify-center rounded-ds-md px-ds-04 py-ds-02 font-mono text-ds-sm font-medium",
+            "focus:outline-none focus:ring-2 focus:ring-accent-9 focus:ring-offset-2 focus:ring-offset-surface-base",
+            r && "cursor-not-allowed opacity-50"
+          ),
+          animate: {
+            backgroundColor: s,
+            color: ae(s) ? "rgba(0,0,0,0.8)" : "rgba(255,255,255,0.95)"
+          },
+          whileHover: { y: -1, boxShadow: "0 4px 12px rgba(0,0,0,0.12)" },
+          whileTap: { scale: 0.97 },
+          transition: R.smooth,
+          "aria-label": `Color picker: ${s}`,
+          children: s.toUpperCase()
+        }
+      ) : /* @__PURE__ */ p(
+        g.button,
+        {
+          type: "button",
+          disabled: r,
+          className: k(
+            "group relative flex items-center overflow-hidden rounded-ds-md border border-surface-border-strong",
+            "hover:border-accent-7 focus:border-accent-7 focus:outline-none focus:ring-1 focus:ring-accent-9",
+            r && "cursor-not-allowed opacity-50"
+          ),
+          whileHover: { scale: 1.02 },
+          whileTap: { scale: 0.98 },
+          transition: R.snappy,
+          "aria-label": `Color picker: ${s}`,
+          children: [
+            /* @__PURE__ */ a(
+              g.span,
+              {
+                className: "absolute inset-0",
+                animate: {
+                  background: `linear-gradient(to right, ${s} 0%, ${s} 35%, transparent 70%)`
+                },
+                transition: { duration: 0.3 }
+              }
             ),
-            children: [
-              /* @__PURE__ */ t(
-                "input",
+            /* @__PURE__ */ a("span", { className: "absolute inset-0 bg-surface-overlay/60", style: {
+              maskImage: "linear-gradient(to right, transparent 0%, black 40%)",
+              WebkitMaskImage: "linear-gradient(to right, transparent 0%, black 40%)"
+            } }),
+            /* @__PURE__ */ a("span", { className: "relative z-10 py-ds-02 pl-6 pr-ds-03 font-mono text-ds-sm text-surface-fg", children: s.toUpperCase() })
+          ]
+        }
+      ) }),
+      /* @__PURE__ */ a(
+        Y,
+        {
+          align: o,
+          sideOffset: 8,
+          className: "w-[272px] rounded-ds-xl border border-surface-border-strong bg-surface-overlay p-0 shadow-floating",
+          children: /* @__PURE__ */ p("div", { className: "flex flex-col", children: [
+            i && /* @__PURE__ */ a("div", { className: "p-ds-04 pb-ds-03", onPointerUp: E, onPointerLeave: E, children: /* @__PURE__ */ a(
+              K,
+              {
+                color: s,
+                onChange: Z,
+                className: "!w-full",
+                style: { height: 160 }
+              }
+            ) }),
+            /* @__PURE__ */ p("div", { className: "border-t border-surface-border px-ds-04 py-ds-03", children: [
+              /* @__PURE__ */ a("div", { className: "mb-ds-03 flex items-center gap-ds-01", children: J.map((e) => /* @__PURE__ */ p(
+                "button",
                 {
-                  ref: f,
-                  type: "color",
-                  value: s,
-                  disabled: o,
-                  onChange: (r) => a(r.target.value),
-                  className: "absolute inset-0 h-full w-full cursor-pointer opacity-0"
-                }
-              ),
-              /* @__PURE__ */ t(
-                "span",
+                  type: "button",
+                  onClick: () => A(e),
+                  className: k(
+                    "relative rounded-ds-sm px-ds-02 py-px text-[10px] font-semibold uppercase tracking-wider transition-colors",
+                    $ === e ? "text-accent-11" : "text-surface-fg-muted hover:text-surface-fg"
+                  ),
+                  children: [
+                    $ === e && /* @__PURE__ */ a(
+                      g.span,
+                      {
+                        layoutId: `color-input-format-pill-${b}`,
+                        className: "absolute inset-0 rounded-ds-sm bg-accent-3",
+                        transition: R.snappy
+                      }
+                    ),
+                    /* @__PURE__ */ a("span", { className: "relative z-10", children: e })
+                  ]
+                },
+                e
+              )) }),
+              /* @__PURE__ */ p(V, { mode: "wait", children: [
+                $ === "hex" && /* @__PURE__ */ a(
+                  g.div,
+                  {
+                    initial: { opacity: 0, y: 4 },
+                    animate: { opacity: 1, y: 0 },
+                    exit: { opacity: 0, y: -4 },
+                    transition: { duration: 0.15 },
+                    className: "flex gap-ds-02",
+                    children: /* @__PURE__ */ a(
+                      w,
+                      {
+                        id: `${b}-hex`,
+                        label: "Hex",
+                        value: s.replace("#", "").toUpperCase(),
+                        onChange: (e) => {
+                          const f = e.replace(/[^0-9a-fA-F]/g, "").slice(0, 6);
+                          f.length === 6 && P(`#${f}`);
+                        },
+                        onBlur: () => {
+                          s.replace("#", "").toUpperCase().length !== 6 && S(s);
+                        },
+                        disabled: r,
+                        maxLength: 6,
+                        prefix: "#",
+                        className: "flex-1"
+                      }
+                    )
+                  },
+                  "hex"
+                ),
+                $ === "rgb" && y && /* @__PURE__ */ p(
+                  g.div,
+                  {
+                    initial: { opacity: 0, y: 4 },
+                    animate: { opacity: 1, y: 0 },
+                    exit: { opacity: 0, y: -4 },
+                    transition: { duration: 0.15 },
+                    className: "flex gap-ds-02",
+                    children: [
+                      /* @__PURE__ */ a(w, { id: `${b}-r`, label: "R", value: String(y.r), onChange: (e) => L("r", e), disabled: r, className: "flex-1" }),
+                      /* @__PURE__ */ a(w, { id: `${b}-g`, label: "G", value: String(y.g), onChange: (e) => L("g", e), disabled: r, className: "flex-1" }),
+                      /* @__PURE__ */ a(w, { id: `${b}-b`, label: "B", value: String(y.b), onChange: (e) => L("b", e), disabled: r, className: "flex-1" })
+                    ]
+                  },
+                  "rgb"
+                ),
+                $ === "hsl" && N && /* @__PURE__ */ p(
+                  g.div,
+                  {
+                    initial: { opacity: 0, y: 4 },
+                    animate: { opacity: 1, y: 0 },
+                    exit: { opacity: 0, y: -4 },
+                    transition: { duration: 0.15 },
+                    className: "flex gap-ds-02",
+                    children: [
+                      /* @__PURE__ */ a(w, { id: `${b}-h`, label: "H", value: String(N.h), onChange: (e) => T("h", e), disabled: r, className: "flex-1" }),
+                      /* @__PURE__ */ a(w, { id: `${b}-s`, label: "S", value: String(N.s), onChange: (e) => T("s", e), disabled: r, className: "flex-1" }),
+                      /* @__PURE__ */ a(w, { id: `${b}-l`, label: "L", value: String(N.l), onChange: (e) => T("l", e), disabled: r, className: "flex-1" })
+                    ]
+                  },
+                  "hsl"
+                )
+              ] })
+            ] }),
+            z.length > 0 && /* @__PURE__ */ a("div", { className: "border-t border-surface-border px-ds-04 py-ds-03", children: /* @__PURE__ */ a("div", { className: "flex flex-wrap gap-ds-02", children: z.map((e, f) => {
+              const d = s.toLowerCase() === e.hex.toLowerCase();
+              return /* @__PURE__ */ a(
+                g.button,
                 {
-                  className: "h-full w-full rounded-[inherit]",
-                  style: { backgroundColor: s }
-                }
-              )
-            ]
-          }
-        ),
-        /* @__PURE__ */ t(
-          "input",
-          {
-            type: "text",
-            "aria-label": "Hex color value",
-            value: s,
-            disabled: o,
-            onChange: (r) => {
-              const e = r.target.value;
-              /^#[0-9a-fA-F]{0,6}$/.test(e) && a(e);
-            },
-            onBlur: (r) => {
-              const e = r.target.value;
-              /^#[0-9a-fA-F]{6}$/.test(e) && a(e);
-            },
-            maxLength: 7,
-            className: c(
-              "h-ds-sm w-[90px] rounded-ds-md border border-surface-border-strong bg-surface-overlay px-ds-03 font-mono text-ds-md text-surface-fg transition-colors",
-              "focus:border-accent-7 focus:outline-none focus:ring-1 focus:ring-accent-9",
-              o && "cursor-not-allowed opacity-50"
+                  type: "button",
+                  disabled: r,
+                  onClick: () => P(e.hex),
+                  initial: { opacity: 0, scale: 0.8 },
+                  animate: { opacity: 1, scale: d ? 1.15 : 1 },
+                  whileHover: { scale: d ? 1.15 : 1.1 },
+                  whileTap: { scale: 0.9 },
+                  transition: { ...R.bouncy, delay: f * 0.02 },
+                  className: k(
+                    "h-6 w-6 rounded-ds-sm border",
+                    d ? "border-accent-7 ring-2 ring-accent-9/30" : "border-surface-border hover:border-surface-border-strong",
+                    r && "cursor-not-allowed opacity-50"
+                  ),
+                  style: { backgroundColor: e.hex },
+                  title: e.label,
+                  "aria-label": `${e.label}: ${e.hex}`
+                },
+                e.hex
+              );
+            }) }) }),
+            (I.length > 0 || s !== C) && /* @__PURE__ */ p(
+              g.div,
+              {
+                initial: { opacity: 0, height: 0 },
+                animate: { opacity: 1, height: "auto" },
+                exit: { opacity: 0, height: 0 },
+                className: "flex items-center gap-ds-02 border-t border-surface-border px-ds-04 py-ds-02",
+                children: [
+                  /* @__PURE__ */ a(
+                    "span",
+                    {
+                      className: "h-4 w-4 shrink-0 rounded-full border border-surface-border",
+                      style: { backgroundColor: C },
+                      title: `Original: ${C}`
+                    }
+                  ),
+                  /* @__PURE__ */ a("span", { className: "text-[10px] text-surface-fg-muted", children: C.toUpperCase() }),
+                  /* @__PURE__ */ a("span", { className: "flex-1" }),
+                  I.length > 0 && /* @__PURE__ */ a(
+                    "button",
+                    {
+                      type: "button",
+                      onClick: _,
+                      className: "rounded-ds-sm px-ds-02 py-px text-[10px] font-medium text-surface-fg-muted transition-colors hover:text-surface-fg",
+                      children: "Undo"
+                    }
+                  ),
+                  s !== C && /* @__PURE__ */ a(
+                    "button",
+                    {
+                      type: "button",
+                      onClick: q,
+                      className: "rounded-ds-sm px-ds-02 py-px text-[10px] font-medium text-surface-fg-muted transition-colors hover:text-error-11",
+                      children: "Reset"
+                    }
+                  )
+                ]
+              }
             )
-          }
-        )
-      ] }),
-      n && n.length > 0 && /* @__PURE__ */ t("div", { className: "flex flex-wrap gap-ds-02", children: n.map((r) => /* @__PURE__ */ t(
-        "button",
-        {
-          type: "button",
-          disabled: o,
-          onClick: () => a(r),
-          className: c(
-            "h-ds-xs w-ds-xs rounded-ds-sm border transition-colors",
-            s === r ? "border-accent-7 ring-1 ring-accent-9" : "border-surface-border-strong hover:border-surface-border-strong",
-            o && "cursor-not-allowed opacity-50"
-          ),
-          style: { backgroundColor: r },
-          "aria-label": `Select color ${r}`
-        },
-        r
-      )) })
-    ] });
+          ] })
+        }
+      )
+    ] }) });
   }
 );
-b.displayName = "ColorInput";
+se.displayName = "ColorInput";
 export {
-  b as ColorInput
+  se as ColorInput
 };

package/dist/ui/dialog.js

@@ -1,7 +1,7 @@
 "use client";
 import { jsx as o, jsxs as d } from "react/jsx-runtime";
 import * as t from "react";
-import { a9 as g, aa as C, ab as f, ac as y, ad as x, ae as v, af as R, ag as j } from "../_chunks/primitives.js";
+import { aa as g, ab as C, ac as f, ad as y, ae as x, af as v, ag as R, ah as j } from "../_chunks/primitives.js";
 import { IconX as M } from "@tabler/icons-react";
 import { cn as i } from "./lib/utils.js";
 import { tweens as p, springs as T } from "./lib/motion.js";
@@ -12,13 +12,13 @@ const N = t.createContext({ open: !1 }), z = () => t.useContext(N), A = ({
   onOpenChange: e,
   ...r
 }) => {
-  const [l, b] = t.useState(s ?? !1), n = a !== void 0, c = n ? a : l, h = t.useCallback(
+  const [l, h] = t.useState(s ?? !1), n = a !== void 0, c = n ? a : l, b = t.useCallback(
     (m) => {
-      n || b(m), e == null || e(m);
+      n || h(m), e == null || e(m);
     },
     [n, e]
   ), w = t.useMemo(() => ({ open: c }), [c]);
-  return /* @__PURE__ */ o(N.Provider, { value: w, children: /* @__PURE__ */ o(R, { open: c, onOpenChange: h, ...r }) });
+  return /* @__PURE__ */ o(N.Provider, { value: w, children: /* @__PURE__ */ o(R, { open: c, onOpenChange: b, ...r }) });
 };
 A.displayName = "Dialog";
 const K = j, F = C, L = y, D = t.forwardRef(({ className: a, ...s }, e) => /* @__PURE__ */ o(