@devalok/shilp-sutra 0.49.4 → 0.49.5

package/dist/ui/color-input.js

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