@devalok/shilp-sutra 0.34.0 → 0.36.0

package/dist/ui/color-input.js

@@ -1,380 +1,463 @@
 "use client";
-import { jsx as r, jsxs as f } from "react/jsx-runtime";
-import * as g 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 x, A as V } from "../_chunks/framer.js";
-function B(l) {
-  const a = /^#?([0-9a-f]{6})$/i.exec(l);
-  if (!a) return null;
-  const s = parseInt(a[1], 16);
-  return { r: s >> 16 & 255, g: s >> 8 & 255, b: s & 255 };
+import { a as e, c as t } from "../_chunks/framer.js";
+import { durations as n, springs as r } from "./lib/motion.js";
+import { cn as i } from "./lib/utils.js";
+import { t as a } from "../_chunks/vendor-client.js";
+import { i as o, r as s, t as c } from "../_chunks/popover.js";
+import * as l from "react";
+import { jsx as u, jsxs as d } from "react/jsx-runtime";
+//#region src/ui/color-input.tsx
+function f(e) {
+	let t = /^#?([0-9a-f]{6})$/i.exec(e);
+	if (!t) return null;
+	let n = parseInt(t[1], 16);
+	return {
+		r: n >> 16 & 255,
+		g: n >> 8 & 255,
+		b: n & 255
+	};
 }
-function O(l, a, s) {
-  return "#" + [l, a, s].map((t) => Math.max(0, Math.min(255, Math.round(t))).toString(16).padStart(2, "0")).join("");
+function p(e, t, n) {
+	return "#" + [
+		e,
+		t,
+		n
+	].map((e) => Math.max(0, Math.min(255, Math.round(e))).toString(16).padStart(2, "0")).join("");
 }
-function ee(l) {
-  const a = B(l);
-  if (!a) return null;
-  const s = a.r / 255, t = a.g / 255, i = a.b / 255, c = Math.max(s, t, i), o = Math.min(s, t, i), p = (c + o) / 2;
-  if (c === o) return { h: 0, s: 0, l: Math.round(p * 100) };
-  const h = c - o, N = p > 0.5 ? h / (2 - c - o) : h / (c - o);
-  let M = 0;
-  return c === s ? M = ((t - i) / h + (t < i ? 6 : 0)) / 6 : c === t ? M = ((i - s) / h + 2) / 6 : M = ((s - t) / h + 4) / 6, { h: Math.round(M * 360), s: Math.round(N * 100), l: Math.round(p * 100) };
+function m(e) {
+	let t = f(e);
+	if (!t) return null;
+	let n = t.r / 255, r = t.g / 255, i = t.b / 255, a = Math.max(n, r, i), o = Math.min(n, r, i), s = (a + o) / 2;
+	if (a === o) return {
+		h: 0,
+		s: 0,
+		l: Math.round(s * 100)
+	};
+	let c = a - o, l = s > .5 ? c / (2 - a - o) : c / (a - o), u = 0;
+	return u = a === n ? ((r - i) / c + (r < i ? 6 : 0)) / 6 : a === r ? ((i - n) / c + 2) / 6 : ((n - r) / c + 4) / 6, {
+		h: Math.round(u * 360),
+		s: Math.round(l * 100),
+		l: Math.round(s * 100)
+	};
 }
-function te(l, a, s) {
-  const t = a / 100, i = s / 100, c = t * Math.min(i, 1 - i), o = (p) => {
-    const h = (p + l / 30) % 12, N = i - c * Math.max(Math.min(h - 3, 9 - h, 1), -1);
-    return Math.round(255 * N);
-  };
-  return O(o(0), o(8), o(4));
+function h(e, t, n) {
+	let r = t / 100, i = n / 100, a = r * Math.min(i, 1 - i), o = (t) => {
+		let n = (t + e / 30) % 12, r = i - a * Math.max(Math.min(n - 3, 9 - n, 1), -1);
+		return Math.round(255 * r);
+	};
+	return p(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" }
+var g = [
+	{
+		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 a = B(l);
-  if (!a) return !1;
-  const [s, t, i] = [a.r, a.g, a.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 * s + 0.7152 * t + 0.0722 * i > 0.4;
+function _(e) {
+	let t = f(e);
+	if (!t) return !1;
+	let [n, r, i] = [
+		t.r,
+		t.g,
+		t.b
+	].map((e) => {
+		let t = e / 255;
+		return t <= .03928 ? t / 12.92 : ((t + .055) / 1.055) ** 2.4;
+	});
+	return .2126 * n + .7152 * r + .0722 * i > .4;
 }
-function w({
-  label: l,
-  value: a,
-  onChange: s,
-  onBlur: t,
-  disabled: i,
-  maxLength: c = 3,
-  prefix: o,
-  className: p,
-  id: h
-}) {
-  return /* @__PURE__ */ f("div", { className: k("flex flex-col gap-ds-01", p), children: [
-    /* @__PURE__ */ r("label", { htmlFor: h, className: "text-ds-xs font-medium uppercase tracking-wider text-surface-fg-muted", children: l }),
-    /* @__PURE__ */ f("div", { className: "flex items-center", children: [
-      o && /* @__PURE__ */ r("span", { className: "text-ds-sm text-surface-fg-muted", children: o }),
-      /* @__PURE__ */ r(
-        "input",
-        {
-          id: h,
-          type: "text",
-          value: a,
-          disabled: i,
-          onChange: (N) => s(N.target.value),
-          onBlur: t,
-          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-hidden focus:ring-1 focus:ring-accent-9",
-            i && "cursor-not-allowed opacity-50"
-          )
-        }
-      )
-    ] })
-  ] });
+function v({ label: e, value: t, onChange: n, onBlur: r, disabled: a, maxLength: o = 3, prefix: s, className: c, id: l }) {
+	return /* @__PURE__ */ d("div", {
+		className: i("flex flex-col gap-ds-01", c),
+		children: [/* @__PURE__ */ u("label", {
+			htmlFor: l,
+			className: "text-ds-xs font-medium uppercase tracking-wider text-surface-fg-muted",
+			children: e
+		}), /* @__PURE__ */ d("div", {
+			className: "flex items-center",
+			children: [s && /* @__PURE__ */ u("span", {
+				className: "text-ds-sm text-surface-fg-muted",
+				children: s
+			}), /* @__PURE__ */ u("input", {
+				id: l,
+				type: "text",
+				value: t,
+				disabled: a,
+				onChange: (e) => n(e.target.value),
+				onBlur: r,
+				maxLength: o,
+				className: i("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-hidden focus:ring-1 focus:ring-accent-9", a && "cursor-not-allowed opacity-50")
+			})]
+		})]
+	});
 }
-const ne = g.forwardRef(
-  ({
-    value: l = "#000000",
-    onChange: a,
-    presets: s,
-    disabled: t = !1,
-    showPicker: i = !0,
-    defaultFormat: c = "hex",
-    align: o = "start",
-    variant: p = "default",
-    className: h,
-    ...N
-  }, M) => {
-    const [$, A] = g.useState(c), [j, D] = g.useState(!1), b = g.useId(), [n, S] = g.useState(l);
-    g.useEffect(() => {
-      S(l);
-    }, [l]);
-    const [v, W] = g.useState(l), [I, F] = g.useState([]), H = g.useRef(!1), G = (e) => {
-      t || (e && (W(n), F([])), D(e));
-    }, P = (e) => {
-      if (t) return;
-      const d = (e.startsWith("#") ? e : `#${e}`).toLowerCase();
-      F((u) => u[u.length - 1] === n ? u : [...u.slice(-19), n]), S(d), a?.(d);
-    }, Z = (e) => {
-      if (t) return;
-      const d = (e.startsWith("#") ? e : `#${e}`).toLowerCase();
-      H.current || (H.current = !0, F((u) => u[u.length - 1] === n ? u : [...u.slice(-19), n])), S(d), a?.(d);
-    }, E = () => {
-      H.current = !1;
-    }, _ = () => {
-      if (I.length === 0) return;
-      const e = I[I.length - 1];
-      F((m) => m.slice(0, -1)), S(e), a?.(e);
-    }, q = () => {
-      S(v), a?.(v), F([]);
-    }, z = s === !1 ? [] : s ? s.map(
-      (e) => typeof e == "string" ? { hex: e, label: e } : e
-    ) : re, y = B(n), C = ee(n), L = (e, m) => {
-      if (!y) return;
-      const d = parseInt(m, 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, m) => {
-      if (!C) return;
-      const d = parseInt(m, 10);
-      if (isNaN(d)) return;
-      const U = Math.max(0, Math.min(e === "h" ? 360 : 100, d));
-      P(te(
-        e === "h" ? U : C.h,
-        e === "s" ? U : C.s,
-        e === "l" ? U : C.l
-      ));
-    }, J = ["hex", "rgb", "hsl"];
-    return /* @__PURE__ */ r("div", { ref: M, className: k("inline-flex flex-col", h), ...N, children: /* @__PURE__ */ f(Q, { open: j, onOpenChange: G, children: [
-      /* @__PURE__ */ r(X, { asChild: !0, children: p === "inline" ? /* @__PURE__ */ r(
-        x.button,
-        {
-          type: "button",
-          disabled: t,
-          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-hidden focus:ring-2 focus:ring-accent-9 focus:ring-offset-2 focus:ring-offset-surface-base",
-            t && "cursor-not-allowed opacity-50"
-          ),
-          animate: {
-            backgroundColor: n,
-            color: ae(n) ? "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: ${n}`,
-          children: n.toUpperCase()
-        }
-      ) : /* @__PURE__ */ f(
-        x.button,
-        {
-          type: "button",
-          disabled: t,
-          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-hidden focus:ring-1 focus:ring-accent-9",
-            t && "cursor-not-allowed opacity-50"
-          ),
-          whileHover: { scale: 1.02 },
-          whileTap: { scale: 0.98 },
-          transition: R.snappy,
-          "aria-label": `Color picker: ${n}`,
-          children: [
-            /* @__PURE__ */ r(
-              x.span,
-              {
-                className: "absolute inset-0",
-                animate: {
-                  background: `linear-gradient(to right, ${n} 0%, ${n} 35%, transparent 70%)`
-                },
-                transition: { duration: 0.3 }
-              }
-            ),
-            /* @__PURE__ */ r("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__ */ r("span", { className: "relative z-10 py-ds-02 pl-6 pr-ds-03 font-mono text-ds-sm text-surface-fg", children: n.toUpperCase() })
-          ]
-        }
-      ) }),
-      /* @__PURE__ */ r(
-        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__ */ f("div", { className: "flex flex-col", children: [
-            i && /* @__PURE__ */ r("div", { className: "p-ds-04 pb-ds-03", onPointerUp: E, onPointerLeave: E, children: /* @__PURE__ */ r(
-              K,
-              {
-                color: n,
-                onChange: Z,
-                className: "w-full!",
-                style: { height: 160 }
-              }
-            ) }),
-            /* @__PURE__ */ f("div", { className: "border-t border-surface-border px-ds-04 py-ds-03", children: [
-              /* @__PURE__ */ r("div", { className: "mb-ds-03 flex items-center gap-ds-01", children: J.map((e) => /* @__PURE__ */ f(
-                "button",
-                {
-                  type: "button",
-                  onClick: () => A(e),
-                  className: k(
-                    "relative min-h-6 rounded-ds-sm px-ds-02 py-px text-ds-xs font-semibold uppercase tracking-wider transition-colors",
-                    $ === e ? "text-accent-11" : "text-surface-fg-muted hover:text-surface-fg"
-                  ),
-                  children: [
-                    $ === e && /* @__PURE__ */ r(
-                      x.span,
-                      {
-                        layoutId: `color-input-format-pill-${b}`,
-                        className: "absolute inset-0 rounded-ds-sm bg-accent-3",
-                        transition: R.snappy
-                      }
-                    ),
-                    /* @__PURE__ */ r("span", { className: "relative z-10", children: e })
-                  ]
-                },
-                e
-              )) }),
-              /* @__PURE__ */ f(V, { mode: "wait", children: [
-                $ === "hex" && /* @__PURE__ */ r(
-                  x.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__ */ r(
-                      w,
-                      {
-                        id: `${b}-hex`,
-                        label: "Hex",
-                        value: n.replace("#", "").toUpperCase(),
-                        onChange: (e) => {
-                          const m = e.replace(/[^0-9a-fA-F]/g, "").slice(0, 6);
-                          m.length === 6 && P(`#${m}`);
-                        },
-                        onBlur: () => {
-                          n.replace("#", "").toUpperCase().length !== 6 && S(n);
-                        },
-                        disabled: t,
-                        maxLength: 6,
-                        prefix: "#",
-                        className: "flex-1"
-                      }
-                    )
-                  },
-                  "hex"
-                ),
-                $ === "rgb" && y && /* @__PURE__ */ f(
-                  x.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__ */ r(w, { id: `${b}-r`, label: "R", value: String(y.r), onChange: (e) => L("r", e), disabled: t, className: "flex-1" }),
-                      /* @__PURE__ */ r(w, { id: `${b}-g`, label: "G", value: String(y.g), onChange: (e) => L("g", e), disabled: t, className: "flex-1" }),
-                      /* @__PURE__ */ r(w, { id: `${b}-b`, label: "B", value: String(y.b), onChange: (e) => L("b", e), disabled: t, className: "flex-1" })
-                    ]
-                  },
-                  "rgb"
-                ),
-                $ === "hsl" && C && /* @__PURE__ */ f(
-                  x.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__ */ r(w, { id: `${b}-h`, label: "H", value: String(C.h), onChange: (e) => T("h", e), disabled: t, className: "flex-1" }),
-                      /* @__PURE__ */ r(w, { id: `${b}-s`, label: "S", value: String(C.s), onChange: (e) => T("s", e), disabled: t, className: "flex-1" }),
-                      /* @__PURE__ */ r(w, { id: `${b}-l`, label: "L", value: String(C.l), onChange: (e) => T("l", e), disabled: t, className: "flex-1" })
-                    ]
-                  },
-                  "hsl"
-                )
-              ] })
-            ] }),
-            z.length > 0 && /* @__PURE__ */ r("div", { className: "border-t border-surface-border px-ds-04 py-ds-03", children: /* @__PURE__ */ r("div", { className: "flex flex-wrap gap-ds-02", children: z.map((e, m) => {
-              const d = n.toLowerCase() === e.hex.toLowerCase();
-              return /* @__PURE__ */ r(
-                x.button,
-                {
-                  type: "button",
-                  disabled: t,
-                  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: m * 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",
-                    t && "cursor-not-allowed opacity-50"
-                  ),
-                  style: { backgroundColor: e.hex },
-                  title: e.label,
-                  "aria-label": `${e.label}: ${e.hex}`
-                },
-                e.hex
-              );
-            }) }) }),
-            (I.length > 0 || n !== v) && /* @__PURE__ */ f(
-              x.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__ */ r(
-                    "span",
-                    {
-                      className: "h-4 w-4 shrink-0 rounded-full border border-surface-border",
-                      style: { backgroundColor: v },
-                      title: `Original: ${v}`
-                    }
-                  ),
-                  /* @__PURE__ */ r("span", { className: "text-ds-xs text-surface-fg-muted", children: v.toUpperCase() }),
-                  /* @__PURE__ */ r("span", { className: "flex-1" }),
-                  I.length > 0 && /* @__PURE__ */ r(
-                    "button",
-                    {
-                      type: "button",
-                      onClick: _,
-                      className: "min-h-6 rounded-ds-sm px-ds-02 py-px text-ds-xs font-medium text-surface-fg-muted transition-colors hover:text-surface-fg",
-                      children: "Undo"
-                    }
-                  ),
-                  n !== v && /* @__PURE__ */ r(
-                    "button",
-                    {
-                      type: "button",
-                      onClick: q,
-                      className: "min-h-6 rounded-ds-sm px-ds-02 py-px text-ds-xs font-medium text-surface-fg-muted transition-colors hover:text-error-11",
-                      children: "Reset"
-                    }
-                  )
-                ]
-              }
-            )
-          ] })
-        }
-      )
-    ] }) });
-  }
-);
-ne.displayName = "ColorInput";
-export {
-  ne as ColorInput
-};
+var y = l.forwardRef(({ value: y = "#000000", onChange: b, presets: x, disabled: S = !1, showPicker: C = !0, defaultFormat: w = "hex", align: T = "start", variant: E = "default", className: D, ...O }, k) => {
+	let [A, j] = l.useState(w), [M, N] = l.useState(!1), P = l.useId(), [F, I] = l.useState(y);
+	l.useEffect(() => {
+		I(y);
+	}, [y]);
+	let [L, R] = l.useState(y), [z, B] = l.useState([]), V = l.useRef(!1), H = (e) => {
+		S || (e && (R(F), B([])), N(e));
+	}, U = (e) => {
+		if (S) return;
+		let t = (e.startsWith("#") ? e : `#${e}`).toLowerCase();
+		B((e) => e[e.length - 1] === F ? e : [...e.slice(-19), F]), I(t), b?.(t);
+	}, W = (e) => {
+		if (S) return;
+		let t = (e.startsWith("#") ? e : `#${e}`).toLowerCase();
+		V.current || (V.current = !0, B((e) => e[e.length - 1] === F ? e : [...e.slice(-19), F])), I(t), b?.(t);
+	}, G = () => {
+		V.current = !1;
+	}, K = () => {
+		if (z.length === 0) return;
+		let e = z[z.length - 1];
+		B((e) => e.slice(0, -1)), I(e), b?.(e);
+	}, q = () => {
+		I(L), b?.(L), B([]);
+	}, J = x === !1 ? [] : x ? x.map((e) => typeof e == "string" ? {
+		hex: e,
+		label: e
+	} : e) : g, Y = f(F), X = m(F), Z = (e, t) => {
+		if (!Y) return;
+		let n = parseInt(t, 10);
+		if (isNaN(n)) return;
+		let r = Math.max(0, Math.min(255, n));
+		U(p(e === "r" ? r : Y.r, e === "g" ? r : Y.g, e === "b" ? r : Y.b));
+	}, Q = (e, t) => {
+		if (!X) return;
+		let n = parseInt(t, 10);
+		if (isNaN(n)) return;
+		let r = Math.max(0, Math.min(e === "h" ? 360 : 100, n));
+		U(h(e === "h" ? r : X.h, e === "s" ? r : X.s, e === "l" ? r : X.l));
+	}, $ = [
+		"hex",
+		"rgb",
+		"hsl"
+	];
+	return /* @__PURE__ */ u("div", {
+		ref: k,
+		className: i("inline-flex flex-col", D),
+		...O,
+		children: /* @__PURE__ */ d(c, {
+			open: M,
+			onOpenChange: H,
+			children: [/* @__PURE__ */ u(o, {
+				asChild: !0,
+				children: E === "inline" ? /* @__PURE__ */ u(e.button, {
+					type: "button",
+					disabled: S,
+					className: i("group flex items-center justify-center rounded-ds-md px-ds-04 py-ds-02 font-mono text-ds-sm font-medium", "focus:outline-hidden focus:ring-2 focus:ring-accent-9 focus:ring-offset-2 focus:ring-offset-surface-base", S && "cursor-not-allowed opacity-50"),
+					animate: {
+						backgroundColor: F,
+						color: _(F) ? "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: .97 },
+					transition: r.smooth,
+					"aria-label": `Color picker: ${F}`,
+					children: F.toUpperCase()
+				}) : /* @__PURE__ */ d(e.button, {
+					type: "button",
+					disabled: S,
+					className: i("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-hidden focus:ring-1 focus:ring-accent-9", S && "cursor-not-allowed opacity-50"),
+					whileHover: { scale: 1.02 },
+					whileTap: { scale: .98 },
+					transition: r.snappy,
+					"aria-label": `Color picker: ${F}`,
+					children: [
+						/* @__PURE__ */ u(e.span, {
+							className: "absolute inset-0",
+							animate: { background: `linear-gradient(to right, ${F} 0%, ${F} 35%, transparent 70%)` },
+							transition: { duration: .3 }
+						}),
+						/* @__PURE__ */ u("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__ */ u("span", {
+							className: "relative z-10 py-ds-02 pl-6 pr-ds-03 font-mono text-ds-sm text-surface-fg",
+							children: F.toUpperCase()
+						})
+					]
+				})
+			}), /* @__PURE__ */ u(s, {
+				role: "dialog",
+				"aria-label": "Color picker",
+				align: T,
+				sideOffset: 8,
+				className: "w-[272px] rounded-ds-xl border border-surface-border-strong bg-surface-overlay p-0 shadow-floating",
+				children: /* @__PURE__ */ d("div", {
+					className: "flex flex-col",
+					children: [
+						C && /* @__PURE__ */ u("div", {
+							className: "p-ds-04 pb-ds-03",
+							onPointerUp: G,
+							onPointerLeave: G,
+							children: /* @__PURE__ */ u(a, {
+								color: F,
+								onChange: W,
+								className: "w-full!",
+								style: { height: 160 }
+							})
+						}),
+						/* @__PURE__ */ d("div", {
+							className: "border-t border-surface-border px-ds-04 py-ds-03",
+							children: [/* @__PURE__ */ u("div", {
+								className: "mb-ds-03 flex items-center gap-ds-01",
+								children: $.map((t) => /* @__PURE__ */ d("button", {
+									type: "button",
+									onClick: () => j(t),
+									className: i("relative min-h-6 rounded-ds-sm px-ds-02 py-px text-ds-xs font-semibold uppercase tracking-wider transition-colors", A === t ? "text-accent-11" : "text-surface-fg-muted hover:text-surface-fg"),
+									children: [A === t && /* @__PURE__ */ u(e.span, {
+										layoutId: `color-input-format-pill-${P}`,
+										className: "absolute inset-0 rounded-ds-sm bg-accent-3",
+										transition: r.snappy
+									}), /* @__PURE__ */ u("span", {
+										className: "relative z-10",
+										children: t
+									})]
+								}, t))
+							}), /* @__PURE__ */ d(t, {
+								mode: "wait",
+								children: [
+									A === "hex" && /* @__PURE__ */ u(e.div, {
+										initial: {
+											opacity: 0,
+											y: 4
+										},
+										animate: {
+											opacity: 1,
+											y: 0
+										},
+										exit: {
+											opacity: 0,
+											y: -4
+										},
+										transition: { duration: n.moderate01 },
+										className: "flex gap-ds-02",
+										children: /* @__PURE__ */ u(v, {
+											id: `${P}-hex`,
+											label: "Hex",
+											value: F.replace("#", "").toUpperCase(),
+											onChange: (e) => {
+												let t = e.replace(/[^0-9a-fA-F]/g, "").slice(0, 6);
+												t.length === 6 && U(`#${t}`);
+											},
+											onBlur: () => {
+												F.replace("#", "").toUpperCase().length !== 6 && I(F);
+											},
+											disabled: S,
+											maxLength: 6,
+											prefix: "#",
+											className: "flex-1"
+										})
+									}, "hex"),
+									A === "rgb" && Y && /* @__PURE__ */ d(e.div, {
+										initial: {
+											opacity: 0,
+											y: 4
+										},
+										animate: {
+											opacity: 1,
+											y: 0
+										},
+										exit: {
+											opacity: 0,
+											y: -4
+										},
+										transition: { duration: n.moderate01 },
+										className: "flex gap-ds-02",
+										children: [
+											/* @__PURE__ */ u(v, {
+												id: `${P}-r`,
+												label: "R",
+												value: String(Y.r),
+												onChange: (e) => Z("r", e),
+												disabled: S,
+												className: "flex-1"
+											}),
+											/* @__PURE__ */ u(v, {
+												id: `${P}-g`,
+												label: "G",
+												value: String(Y.g),
+												onChange: (e) => Z("g", e),
+												disabled: S,
+												className: "flex-1"
+											}),
+											/* @__PURE__ */ u(v, {
+												id: `${P}-b`,
+												label: "B",
+												value: String(Y.b),
+												onChange: (e) => Z("b", e),
+												disabled: S,
+												className: "flex-1"
+											})
+										]
+									}, "rgb"),
+									A === "hsl" && X && /* @__PURE__ */ d(e.div, {
+										initial: {
+											opacity: 0,
+											y: 4
+										},
+										animate: {
+											opacity: 1,
+											y: 0
+										},
+										exit: {
+											opacity: 0,
+											y: -4
+										},
+										transition: { duration: n.moderate01 },
+										className: "flex gap-ds-02",
+										children: [
+											/* @__PURE__ */ u(v, {
+												id: `${P}-h`,
+												label: "H",
+												value: String(X.h),
+												onChange: (e) => Q("h", e),
+												disabled: S,
+												className: "flex-1"
+											}),
+											/* @__PURE__ */ u(v, {
+												id: `${P}-s`,
+												label: "S",
+												value: String(X.s),
+												onChange: (e) => Q("s", e),
+												disabled: S,
+												className: "flex-1"
+											}),
+											/* @__PURE__ */ u(v, {
+												id: `${P}-l`,
+												label: "L",
+												value: String(X.l),
+												onChange: (e) => Q("l", e),
+												disabled: S,
+												className: "flex-1"
+											})
+										]
+									}, "hsl")
+								]
+							})]
+						}),
+						J.length > 0 && /* @__PURE__ */ u("div", {
+							className: "border-t border-surface-border px-ds-04 py-ds-03",
+							children: /* @__PURE__ */ u("div", {
+								className: "flex flex-wrap gap-ds-02",
+								children: J.map((t, n) => {
+									let a = F.toLowerCase() === t.hex.toLowerCase();
+									return /* @__PURE__ */ u(e.button, {
+										type: "button",
+										disabled: S,
+										onClick: () => U(t.hex),
+										initial: {
+											opacity: 0,
+											scale: .8
+										},
+										animate: {
+											opacity: 1,
+											scale: a ? 1.15 : 1
+										},
+										whileHover: { scale: a ? 1.15 : 1.1 },
+										whileTap: { scale: .9 },
+										transition: {
+											...r.bouncy,
+											delay: n * .02
+										},
+										className: i("h-6 w-6 rounded-ds-sm border", a ? "border-accent-7 ring-2 ring-accent-9/30" : "border-surface-border hover:border-surface-border-strong", S && "cursor-not-allowed opacity-50"),
+										style: { backgroundColor: t.hex },
+										title: t.label,
+										"aria-label": `${t.label}: ${t.hex}`
+									}, t.hex);
+								})
+							})
+						}),
+						(z.length > 0 || F !== L) && /* @__PURE__ */ d(e.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__ */ u("span", {
+									className: "h-4 w-4 shrink-0 rounded-full border border-surface-border",
+									style: { backgroundColor: L },
+									title: `Original: ${L}`
+								}),
+								/* @__PURE__ */ u("span", {
+									className: "text-ds-xs text-surface-fg-muted",
+									children: L.toUpperCase()
+								}),
+								/* @__PURE__ */ u("span", { className: "flex-1" }),
+								z.length > 0 && /* @__PURE__ */ u("button", {
+									type: "button",
+									onClick: K,
+									className: "min-h-6 rounded-ds-sm px-ds-02 py-px text-ds-xs font-medium text-surface-fg-muted transition-colors hover:text-surface-fg",
+									children: "Undo"
+								}),
+								F !== L && /* @__PURE__ */ u("button", {
+									type: "button",
+									onClick: q,
+									className: "min-h-6 rounded-ds-sm px-ds-02 py-px text-ds-xs font-medium text-surface-fg-muted transition-colors hover:text-error-11",
+									children: "Reset"
+								})
+							]
+						})
+					]
+				})
+			})]
+		})
+	});
+});
+y.displayName = "ColorInput";
+//#endregion
+export { y as ColorInput };