@devalok/shilp-sutra 0.56.0 → 0.59.0

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":"AAGA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAoF9B,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,wFA2Yf,CAAA;AAGD,OAAO,EAAE,UAAU,EAAE,CAAA"}
+{"version":3,"file":"color-input.d.ts","sourceRoot":"","sources":["../../src/ui/color-input.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAqF9B,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,wFA6Yf,CAAA;AAGD,OAAO,EAAE,UAAU,EAAE,CAAA"}

package/dist/ui/color-input.js

@@ -1,14 +1,15 @@
 "use client";
 import { durations as e, springs as t } from "./lib/motion.js";
-import { cn as n } from "./lib/utils.js";
-import { useFormField as r } from "./form.js";
-import { Z as i } from "../_chunks/vendor-client.js";
-import { Popover as a, PopoverContent as o, PopoverTrigger as s } from "../_chunks/popover.js";
-import * as c from "react";
-import { jsx as l, jsxs as u } from "react/jsx-runtime";
-import { AnimatePresence as d, motion as f } from "framer-motion";
+import { MotionPreference as n } from "../_chunks/motion-preference.js";
+import { cn as r } from "./lib/utils.js";
+import { useFormField as i } from "./form.js";
+import { Z as a } from "../_chunks/vendor-client.js";
+import { Popover as o, PopoverContent as s, PopoverTrigger as c } from "../_chunks/popover.js";
+import * as l from "react";
+import { jsx as u, jsxs as d } from "react/jsx-runtime";
+import { AnimatePresence as f, motion as p } from "framer-motion";
 //#region src/ui/color-input.tsx
-function p(e) {
+function m(e) {
 	let t = /^#?([0-9a-f]{6})$/i.exec(e);
 	if (!t) return null;
 	let n = parseInt(t[1], 16);
@@ -18,15 +19,15 @@ function p(e) {
 		b: n & 255
 	};
 }
-function m(e, t, n) {
+function h(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 h(e) {
-	let t = p(e);
+function ee(e) {
+	let t = m(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 {
@@ -41,14 +42,14 @@ function h(e) {
 		l: Math.round(s * 100)
 	};
 }
-function g(e, t, n) {
+function te(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 m(o(0), o(8), o(4));
+	return h(o(0), o(8), o(4));
 }
-var ee = [
+var g = [
 	{
 		hex: "#C53637",
 		label: "Red"
@@ -90,8 +91,8 @@ var ee = [
 		label: "Pink"
 	}
 ];
-function te(e) {
-	let t = p(e);
+function _(e) {
+	let t = m(e);
 	if (!t) return !1;
 	let [n, r, i] = [
 		t.r,
@@ -103,90 +104,90 @@ function te(e) {
 	});
 	return .2126 * n + .7152 * r + .0722 * i > .4;
 }
-function _({ label: e, value: t, onChange: r, onBlur: i, disabled: a, maxLength: o = 3, prefix: s, className: c, id: d }) {
-	return /* @__PURE__ */ u("div", {
-		className: n("flex flex-col gap-ds-01", c),
-		children: [/* @__PURE__ */ l("label", {
-			htmlFor: d,
+function v({ label: e, value: t, onChange: n, onBlur: i, disabled: a, maxLength: o = 3, prefix: s, className: c, id: l }) {
+	return /* @__PURE__ */ d("div", {
+		className: r("flex flex-col gap-ds-01", c),
+		children: [/* @__PURE__ */ u("label", {
+			htmlFor: l,
 			className: "text-label-xs font-medium uppercase tracking-wider text-surface-fg-muted",
 			children: e
-		}), /* @__PURE__ */ u("div", {
+		}), /* @__PURE__ */ d("div", {
 			className: "flex items-center",
-			children: [s && /* @__PURE__ */ l("span", {
+			children: [s && /* @__PURE__ */ u("span", {
 				className: "text-body-sm text-surface-fg-muted",
 				children: s
-			}), /* @__PURE__ */ l("input", {
-				id: d,
+			}), /* @__PURE__ */ u("input", {
+				id: l,
 				type: "text",
 				value: t,
 				disabled: a,
-				onChange: (e) => r(e.target.value),
+				onChange: (e) => n(e.target.value),
 				onBlur: i,
 				maxLength: o,
-				className: n("h-ds-xs-plus w-full rounded-control-inner border border-surface-border bg-surface-overlay px-ds-02 font-mono text-body-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")
+				className: r("h-ds-xs-plus w-full rounded-control-inner border border-surface-border-interactive bg-surface-overlay px-ds-02 font-mono text-body-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")
 			})]
 		})]
 	});
 }
-var v = c.forwardRef(({ value: v = "#000000", onChange: y, presets: b, disabled: x = !1, showPicker: S = !0, defaultFormat: C = "hex", align: ne = "start", variant: re = "default", className: w, id: ie, ...T }, E) => {
-	let [D, O] = c.useState(C), [k, A] = c.useState(!1), j = c.useId(), M = r(), N = ie ?? M.inputId, [P, F] = c.useState(v), [I, L] = c.useState(null);
-	c.useEffect(() => {
-		F(v), L(null);
-	}, [v]);
-	let [R, z] = c.useState(v), [B, V] = c.useState([]), H = c.useRef(!1), U = (e) => {
-		x || (e && (z(P), V([])), L(null), A(e));
-	}, W = (e) => {
-		if (x) return;
-		let t = (e.startsWith("#") ? e : `#${e}`).toLowerCase();
-		V((e) => e[e.length - 1] === P ? e : [...e.slice(-19), P]), F(t), L(null), y?.(t);
+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, id: O, ...k }, A) => {
+	let [j, ne] = l.useState(w), [re, ie] = l.useState(!1), M = l.useId(), N = i(), P = O ?? N.inputId, [F, I] = l.useState(y), [L, R] = l.useState(null);
+	l.useEffect(() => {
+		I(y), R(null);
+	}, [y]);
+	let [z, B] = l.useState(y), [V, H] = l.useState([]), U = l.useRef(!1), W = (e) => {
+		S || (e && (B(F), H([])), R(null), ie(e));
 	}, G = (e) => {
-		if (x) return;
+		if (S) return;
+		let t = (e.startsWith("#") ? e : `#${e}`).toLowerCase();
+		H((e) => e[e.length - 1] === F ? e : [...e.slice(-19), F]), I(t), R(null), b?.(t);
+	}, K = (e) => {
+		if (S) return;
 		let t = (e.startsWith("#") ? e : `#${e}`).toLowerCase();
-		H.current || (H.current = !0, V((e) => e[e.length - 1] === P ? e : [...e.slice(-19), P])), F(t), y?.(t);
-	}, K = () => {
-		H.current = !1;
+		U.current || (U.current = !0, H((e) => e[e.length - 1] === F ? e : [...e.slice(-19), F])), I(t), b?.(t);
 	}, q = () => {
-		if (B.length === 0) return;
-		let e = B[B.length - 1];
-		V((e) => e.slice(0, -1)), F(e), y?.(e);
+		U.current = !1;
 	}, J = () => {
-		F(R), y?.(R), V([]);
-	}, Y = b === !1 ? [] : b ? b.map((e) => typeof e == "string" ? {
+		if (V.length === 0) return;
+		let e = V[V.length - 1];
+		H((e) => e.slice(0, -1)), I(e), b?.(e);
+	}, ae = () => {
+		I(z), b?.(z), H([]);
+	}, Y = x === !1 ? [] : x ? x.map((e) => typeof e == "string" ? {
 		hex: e,
 		label: e
-	} : e) : ee, X = p(P), Z = h(P), Q = (e, t) => {
+	} : e) : g, X = m(F), Z = ee(F), Q = (e, t) => {
 		if (!X) return;
 		let n = parseInt(t, 10);
 		if (isNaN(n)) return;
 		let r = Math.max(0, Math.min(255, n));
-		W(m(e === "r" ? r : X.r, e === "g" ? r : X.g, e === "b" ? r : X.b));
+		G(h(e === "r" ? r : X.r, e === "g" ? r : X.g, e === "b" ? r : X.b));
 	}, $ = (e, t) => {
 		if (!Z) return;
 		let n = parseInt(t, 10);
 		if (isNaN(n)) return;
 		let r = Math.max(0, Math.min(e === "h" ? 360 : 100, n));
-		W(g(e === "h" ? r : Z.h, e === "s" ? r : Z.s, e === "l" ? r : Z.l));
-	}, ae = [
+		G(te(e === "h" ? r : Z.h, e === "s" ? r : Z.s, e === "l" ? r : Z.l));
+	}, oe = [
 		"hex",
 		"rgb",
 		"hsl"
 	];
-	return /* @__PURE__ */ l("div", {
-		ref: E,
-		className: n("inline-flex flex-col", w),
-		...T,
-		children: /* @__PURE__ */ u(a, {
-			open: k,
-			onOpenChange: U,
-			children: [/* @__PURE__ */ l(s, {
+	return /* @__PURE__ */ u(n, { children: /* @__PURE__ */ u("div", {
+		ref: A,
+		className: r("inline-flex flex-col", D),
+		...k,
+		children: /* @__PURE__ */ d(o, {
+			open: re,
+			onOpenChange: W,
+			children: [/* @__PURE__ */ u(c, {
 				asChild: !0,
-				children: re === "inline" ? /* @__PURE__ */ l(f.button, {
+				children: E === "inline" ? /* @__PURE__ */ u(p.button, {
 					type: "button",
-					disabled: x,
-					className: n("group flex items-center justify-center rounded-control px-ds-04 py-ds-02 font-mono text-body-sm font-medium", "focus:outline-hidden focus:ring-2 focus:ring-accent-9 focus:ring-offset-2 focus:ring-offset-surface-base", x && "cursor-not-allowed opacity-50"),
+					disabled: S,
+					className: r("group flex items-center justify-center rounded-control px-ds-04 py-ds-02 font-mono text-body-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: P,
-						color: te(P) ? "rgba(0,0,0,0.8)" : "rgba(255,255,255,0.95)"
+						backgroundColor: F,
+						color: _(F) ? "rgba(0,0,0,0.8)" : "rgba(255,255,255,0.95)"
 					},
 					whileHover: {
 						y: -1,
@@ -194,82 +195,82 @@ var v = c.forwardRef(({ value: v = "#000000", onChange: y, presets: b, disabled:
 					},
 					whileTap: { scale: .97 },
 					transition: t.smooth,
-					id: N,
-					"aria-describedby": M.helperTextId,
-					"aria-invalid": M.state === "error" || void 0,
-					"aria-label": M.inputId ? void 0 : `Color picker: ${P}`,
-					children: P.toUpperCase()
-				}) : /* @__PURE__ */ u(f.button, {
+					id: P,
+					"aria-describedby": N.helperTextId,
+					"aria-invalid": N.state === "error" || void 0,
+					"aria-label": N.inputId ? void 0 : `Color picker: ${F}`,
+					children: F.toUpperCase()
+				}) : /* @__PURE__ */ d(p.button, {
 					type: "button",
-					disabled: x,
-					className: n("group relative flex items-center overflow-hidden rounded-control border border-surface-border-strong", "hover:border-accent-7 focus:border-accent-7 focus:outline-hidden focus:ring-1 focus:ring-accent-9", x && "cursor-not-allowed opacity-50"),
+					disabled: S,
+					className: r("group relative flex items-center overflow-hidden rounded-control border border-surface-border-interactive", "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: t.snappy,
-					id: N,
-					"aria-describedby": M.helperTextId,
-					"aria-invalid": M.state === "error" || void 0,
-					"aria-label": M.inputId ? void 0 : `Color picker: ${P}`,
+					id: P,
+					"aria-describedby": N.helperTextId,
+					"aria-invalid": N.state === "error" || void 0,
+					"aria-label": N.inputId ? void 0 : `Color picker: ${F}`,
 					children: [
-						/* @__PURE__ */ l(f.span, {
+						/* @__PURE__ */ u(p.span, {
 							className: "absolute inset-0",
-							animate: { background: `linear-gradient(to right, ${P} 0%, ${P} 35%, transparent 70%)` },
+							animate: { background: `linear-gradient(to right, ${F} 0%, ${F} 35%, transparent 70%)` },
 							transition: { duration: .3 }
 						}),
-						/* @__PURE__ */ l("span", {
+						/* @__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__ */ l("span", {
+						/* @__PURE__ */ u("span", {
 							className: "relative z-10 py-ds-02 pl-6 pr-ds-03 font-mono text-body-sm text-surface-fg",
-							children: P.toUpperCase()
+							children: F.toUpperCase()
 						})
 					]
 				})
-			}), /* @__PURE__ */ l(o, {
+			}), /* @__PURE__ */ u(s, {
 				role: "dialog",
 				"aria-label": "Color picker",
-				align: ne,
+				align: T,
 				sideOffset: 8,
 				className: "w-[272px] rounded-overlay-lg bg-surface-overlay p-0 shadow-floating",
-				children: /* @__PURE__ */ u("div", {
+				children: /* @__PURE__ */ d("div", {
 					className: "flex flex-col",
 					children: [
-						S && /* @__PURE__ */ l("div", {
+						C && /* @__PURE__ */ u("div", {
 							className: "p-ds-04 pb-ds-03",
-							onPointerUp: K,
-							onPointerLeave: K,
-							children: /* @__PURE__ */ l(i, {
-								color: P,
-								onChange: G,
+							onPointerUp: q,
+							onPointerLeave: q,
+							children: /* @__PURE__ */ u(a, {
+								color: F,
+								onChange: K,
 								className: "w-full!",
 								style: { height: 160 }
 							})
 						}),
-						/* @__PURE__ */ u("div", {
+						/* @__PURE__ */ d("div", {
 							className: "border-t border-surface-border px-ds-04 py-ds-03",
-							children: [/* @__PURE__ */ l("div", {
+							children: [/* @__PURE__ */ u("div", {
 								className: "mb-ds-03 flex items-center gap-ds-01",
-								children: ae.map((e) => /* @__PURE__ */ u("button", {
+								children: oe.map((e) => /* @__PURE__ */ d("button", {
 									type: "button",
-									onClick: () => O(e),
-									className: n("relative min-h-6 rounded-control-inner px-ds-02 py-px text-label-xs font-semibold uppercase tracking-wider transition-colors", D === e ? "text-accent-11" : "text-surface-fg-muted hover:text-surface-fg"),
-									children: [D === e && /* @__PURE__ */ l(f.span, {
-										layoutId: `color-input-format-pill-${j}`,
-										className: "absolute inset-0 rounded-control-inner bg-accent-3",
+									onClick: () => ne(e),
+									className: r("relative min-h-6 rounded-control-inner px-ds-02 py-px text-label-xs font-semibold uppercase tracking-wider transition-colors", j === e ? "text-accent-11" : "text-surface-fg-muted hover:text-surface-fg"),
+									children: [j === e && /* @__PURE__ */ u(p.span, {
+										layoutId: `color-input-format-pill-${M}`,
+										className: "absolute inset-0 rounded-control-inner bg-accent-4",
 										transition: t.snappy
-									}), /* @__PURE__ */ l("span", {
+									}), /* @__PURE__ */ u("span", {
 										className: "relative z-10",
 										children: e
 									})]
 								}, e))
-							}), /* @__PURE__ */ u(d, {
+							}), /* @__PURE__ */ d(f, {
 								mode: "wait",
 								children: [
-									D === "hex" && /* @__PURE__ */ l(f.div, {
+									j === "hex" && /* @__PURE__ */ u(p.div, {
 										initial: {
 											opacity: 0,
 											y: 4
@@ -284,24 +285,24 @@ var v = c.forwardRef(({ value: v = "#000000", onChange: y, presets: b, disabled:
 										},
 										transition: { duration: e.moderate01 },
 										className: "flex gap-ds-02",
-										children: /* @__PURE__ */ l(_, {
-											id: `${j}-hex`,
+										children: /* @__PURE__ */ u(v, {
+											id: `${M}-hex`,
 											label: "Hex",
-											value: I ?? P.replace("#", "").toUpperCase(),
+											value: L ?? F.replace("#", "").toUpperCase(),
 											onChange: (e) => {
 												let t = e.replace(/[^0-9a-fA-F]/g, "").slice(0, 6);
-												L(t.toUpperCase()), t.length === 6 && W(`#${t}`);
+												R(t.toUpperCase()), t.length === 6 && G(`#${t}`);
 											},
 											onBlur: () => {
-												L(null);
+												R(null);
 											},
-											disabled: x,
+											disabled: S,
 											maxLength: 6,
 											prefix: "#",
 											className: "flex-1"
 										})
 									}, "hex"),
-									D === "rgb" && X && /* @__PURE__ */ u(f.div, {
+									j === "rgb" && X && /* @__PURE__ */ d(p.div, {
 										initial: {
 											opacity: 0,
 											y: 4
@@ -317,33 +318,33 @@ var v = c.forwardRef(({ value: v = "#000000", onChange: y, presets: b, disabled:
 										transition: { duration: e.moderate01 },
 										className: "flex gap-ds-02",
 										children: [
-											/* @__PURE__ */ l(_, {
-												id: `${j}-r`,
+											/* @__PURE__ */ u(v, {
+												id: `${M}-r`,
 												label: "R",
 												value: String(X.r),
 												onChange: (e) => Q("r", e),
-												disabled: x,
+												disabled: S,
 												className: "flex-1"
 											}),
-											/* @__PURE__ */ l(_, {
-												id: `${j}-g`,
+											/* @__PURE__ */ u(v, {
+												id: `${M}-g`,
 												label: "G",
 												value: String(X.g),
 												onChange: (e) => Q("g", e),
-												disabled: x,
+												disabled: S,
 												className: "flex-1"
 											}),
-											/* @__PURE__ */ l(_, {
-												id: `${j}-b`,
+											/* @__PURE__ */ u(v, {
+												id: `${M}-b`,
 												label: "B",
 												value: String(X.b),
 												onChange: (e) => Q("b", e),
-												disabled: x,
+												disabled: S,
 												className: "flex-1"
 											})
 										]
 									}, "rgb"),
-									D === "hsl" && Z && /* @__PURE__ */ u(f.div, {
+									j === "hsl" && Z && /* @__PURE__ */ d(p.div, {
 										initial: {
 											opacity: 0,
 											y: 4
@@ -359,28 +360,28 @@ var v = c.forwardRef(({ value: v = "#000000", onChange: y, presets: b, disabled:
 										transition: { duration: e.moderate01 },
 										className: "flex gap-ds-02",
 										children: [
-											/* @__PURE__ */ l(_, {
-												id: `${j}-h`,
+											/* @__PURE__ */ u(v, {
+												id: `${M}-h`,
 												label: "H",
 												value: String(Z.h),
 												onChange: (e) => $("h", e),
-												disabled: x,
+												disabled: S,
 												className: "flex-1"
 											}),
-											/* @__PURE__ */ l(_, {
-												id: `${j}-s`,
+											/* @__PURE__ */ u(v, {
+												id: `${M}-s`,
 												label: "S",
 												value: String(Z.s),
 												onChange: (e) => $("s", e),
-												disabled: x,
+												disabled: S,
 												className: "flex-1"
 											}),
-											/* @__PURE__ */ l(_, {
-												id: `${j}-l`,
+											/* @__PURE__ */ u(v, {
+												id: `${M}-l`,
 												label: "L",
 												value: String(Z.l),
 												onChange: (e) => $("l", e),
-												disabled: x,
+												disabled: S,
 												className: "flex-1"
 											})
 										]
@@ -388,16 +389,16 @@ var v = c.forwardRef(({ value: v = "#000000", onChange: y, presets: b, disabled:
 								]
 							})]
 						}),
-						Y.length > 0 && /* @__PURE__ */ l("div", {
+						Y.length > 0 && /* @__PURE__ */ u("div", {
 							className: "border-t border-surface-border px-ds-04 py-ds-03",
-							children: /* @__PURE__ */ l("div", {
+							children: /* @__PURE__ */ u("div", {
 								className: "flex flex-wrap gap-ds-02",
-								children: Y.map((e, r) => {
-									let i = P.toLowerCase() === e.hex.toLowerCase();
-									return /* @__PURE__ */ l(f.button, {
+								children: Y.map((e, n) => {
+									let i = F.toLowerCase() === e.hex.toLowerCase();
+									return /* @__PURE__ */ u(p.button, {
 										type: "button",
-										disabled: x,
-										onClick: () => W(e.hex),
+										disabled: S,
+										onClick: () => G(e.hex),
 										initial: {
 											opacity: 0,
 											scale: .8
@@ -410,9 +411,9 @@ var v = c.forwardRef(({ value: v = "#000000", onChange: y, presets: b, disabled:
 										whileTap: { scale: .9 },
 										transition: {
 											...t.bouncy,
-											delay: r * .02
+											delay: n * .02
 										},
-										className: n("h-6 w-6 rounded-control-inner border", i ? "border-accent-7 ring-2 ring-accent-9/30" : "border-surface-border hover:border-surface-border-strong", x && "cursor-not-allowed opacity-50"),
+										className: r("h-6 w-6 rounded-control-inner border", i ? "border-accent-7 ring-2 ring-accent-9/30" : "border-surface-border-interactive hover:border-surface-border-interactive-strong", S && "cursor-not-allowed opacity-50"),
 										style: { backgroundColor: e.hex },
 										title: e.label,
 										"aria-label": `${e.label}: ${e.hex}`
@@ -420,7 +421,7 @@ var v = c.forwardRef(({ value: v = "#000000", onChange: y, presets: b, disabled:
 								})
 							})
 						}),
-						(B.length > 0 || P !== R) && /* @__PURE__ */ u(f.div, {
+						(V.length > 0 || F !== z) && /* @__PURE__ */ d(p.div, {
 							initial: {
 								opacity: 0,
 								height: 0
@@ -435,25 +436,25 @@ var v = c.forwardRef(({ value: v = "#000000", onChange: y, presets: b, disabled:
 							},
 							className: "flex items-center gap-ds-02 border-t border-surface-border px-ds-04 py-ds-02",
 							children: [
-								/* @__PURE__ */ l("span", {
+								/* @__PURE__ */ u("span", {
 									className: "h-4 w-4 shrink-0 rounded-pill border border-surface-border",
-									style: { backgroundColor: R },
-									title: `Original: ${R}`
+									style: { backgroundColor: z },
+									title: `Original: ${z}`
 								}),
-								/* @__PURE__ */ l("span", {
+								/* @__PURE__ */ u("span", {
 									className: "text-caption text-surface-fg-muted",
-									children: R.toUpperCase()
+									children: z.toUpperCase()
 								}),
-								/* @__PURE__ */ l("span", { className: "flex-1" }),
-								B.length > 0 && /* @__PURE__ */ l("button", {
+								/* @__PURE__ */ u("span", { className: "flex-1" }),
+								V.length > 0 && /* @__PURE__ */ u("button", {
 									type: "button",
-									onClick: q,
+									onClick: J,
 									className: "min-h-6 rounded-control-inner px-ds-02 py-px text-caption font-medium text-surface-fg-muted transition-colors hover:text-surface-fg",
 									children: "Undo"
 								}),
-								P !== R && /* @__PURE__ */ l("button", {
+								F !== z && /* @__PURE__ */ u("button", {
 									type: "button",
-									onClick: J,
+									onClick: ae,
 									className: "min-h-6 rounded-control-inner px-ds-02 py-px text-caption font-medium text-surface-fg-muted transition-colors hover:text-error-11",
 									children: "Reset"
 								})
@@ -463,8 +464,8 @@ var v = c.forwardRef(({ value: v = "#000000", onChange: y, presets: b, disabled:
 				})
 			})]
 		})
-	});
+	}) });
 });
-v.displayName = "ColorInput";
+y.displayName = "ColorInput";
 //#endregion
-export { v as ColorInput };
+export { y as ColorInput };