@cascivo/react 0.8.0 → 0.10.0

package/dist/node/tree-view/tree-view.js

@@ -0,0 +1,201 @@
+"use client";
+
+import e from "./tree-view.module.js";
+import { cn as t, useControllableSignal as n, useSignal as r, useSignals as i } from "@cascivo/core";
+import { builtin as a, t as o } from "@cascivo/i18n";
+import { jsx as s, jsxs as c } from "react/jsx-runtime";
+import { useRef as l } from "react";
+//#region ../components/src/tree-view/tree-view.tsx
+function u(e, t) {
+	let n = [], r = (e, i, a) => {
+		for (let o of e) {
+			let e = !!o.children && o.children.length > 0, s = t.has(o.id);
+			n.push({
+				id: o.id,
+				level: i,
+				parentId: a,
+				hasChildren: e,
+				expanded: s
+			}), e && s && r(o.children, i + 1, o.id);
+		}
+	};
+	return r(e, 1, null), n;
+}
+function d(e) {
+	return e === void 0 ? [] : Array.isArray(e) ? e : e === "" ? [] : [e];
+}
+function f({ items: a, selectionMode: o = "single", selected: c, defaultSelected: f, onSelectChange: h, expanded: g, defaultExpanded: _, onExpandedChange: v, className: y, "aria-label": b }) {
+	i();
+	let [x, S] = n({
+		value: g,
+		defaultValue: _ ?? [],
+		onChange: v
+	}), [C, w] = n({
+		value: c,
+		defaultValue: f ?? (o === "multi" ? [] : ""),
+		onChange: h
+	}), T = r(null), E = l(/* @__PURE__ */ new Map()), D = new Set(x.value), O = u(a, D), k = new Map(O.map((e, t) => [e.id, t])), A = d(C.value), j = new Set(A), M = T.value ?? A[0] ?? O[0]?.id ?? null, N = (e) => S([...e]), P = (e) => {
+		if (D.has(e)) return;
+		let t = new Set(D);
+		t.add(e), N(t);
+	}, F = (e) => {
+		if (!D.has(e)) return;
+		let t = new Set(D);
+		t.delete(e), N(t);
+	}, I = (e) => {
+		T.value = e, E.current.get(e)?.focus();
+	}, L = (e) => {
+		if (o === "multi") {
+			let t = new Set(j);
+			t.has(e) ? t.delete(e) : t.add(e), w([...t]);
+		} else w(e);
+	}, R = l({
+		buffer: "",
+		at: 0
+	}), z = (e, t) => {
+		let n = k.get(t.id);
+		if (n === void 0) return;
+		let { hasChildren: r, level: i, parentId: o, expanded: s } = O[n];
+		switch (e.key) {
+			case "ArrowDown": {
+				e.preventDefault();
+				let t = O[n + 1];
+				t && I(t.id);
+				break;
+			}
+			case "ArrowUp": {
+				e.preventDefault();
+				let t = O[n - 1];
+				t && I(t.id);
+				break;
+			}
+			case "ArrowRight":
+				if (e.preventDefault(), r && !s) P(t.id);
+				else if (r && s) {
+					let e = O[n + 1];
+					e && e.level > i && I(e.id);
+				}
+				break;
+			case "ArrowLeft":
+				e.preventDefault(), r && s ? F(t.id) : o && I(o);
+				break;
+			case "Home":
+				e.preventDefault(), O[0] && I(O[0].id);
+				break;
+			case "End": {
+				e.preventDefault();
+				let t = O[O.length - 1];
+				t && I(t.id);
+				break;
+			}
+			case "Enter":
+			case " ":
+				e.preventDefault(), L(t.id);
+				break;
+			default:
+				if (e.key.length === 1 && !e.metaKey && !e.ctrlKey && !e.altKey) {
+					let t = R.current, r = Date.now();
+					t.buffer = r - t.at > 500 ? e.key : t.buffer + e.key, t.at = r;
+					let i = t.buffer.toLowerCase(), o = (e) => typeof e.label == "string" && e.label.toLowerCase().startsWith(i), s = p(a, D), c = [...O.slice(n + 1), ...O.slice(0, n + 1)].find((e) => {
+						let t = s.get(e.id);
+						return t ? o(t) : !1;
+					});
+					c && I(c.id);
+				}
+				break;
+		}
+	}, B = (e, t, n, r) => {
+		let i = !!e.children && e.children.length > 0, a = D.has(e.id), o = j.has(e.id), c = M === e.id, l = e.children?.length ?? 0;
+		return /* @__PURE__ */ s(m, {
+			node: e,
+			level: t,
+			posInSet: n,
+			setSize: r,
+			hasChildren: i,
+			isExpanded: a,
+			isSelected: o,
+			isTabbable: c,
+			itemRefs: E,
+			onFocusNode: () => T.value = e.id,
+			onKeyDown: (t) => z(t, e),
+			onActivate: () => {
+				I(e.id), i && (a ? F : P)(e.id), L(e.id);
+			},
+			children: i && e.children.map((e, n) => B(e, t + 1, n + 1, l))
+		}, e.id);
+	};
+	return /* @__PURE__ */ s("ul", {
+		role: "tree",
+		"aria-label": b,
+		className: t(e.tree, y),
+		children: a.map((e, t) => B(e, 1, t + 1, a.length))
+	});
+}
+function p(e, t) {
+	let n = /* @__PURE__ */ new Map(), r = (e) => {
+		for (let i of e) n.set(i.id, i), i.children && i.children.length > 0 && t.has(i.id) && r(i.children);
+	};
+	return r(e), n;
+}
+function m({ node: t, level: n, posInSet: r, setSize: i, hasChildren: a, isExpanded: o, isSelected: l, isTabbable: u, itemRefs: d, onFocusNode: f, onKeyDown: p, onActivate: m, children: h }) {
+	return /* @__PURE__ */ c("li", {
+		role: "treeitem",
+		"aria-level": n,
+		"aria-posinset": r,
+		"aria-setsize": i,
+		"aria-selected": l,
+		"aria-expanded": a ? o : void 0,
+		tabIndex: u ? 0 : -1,
+		"data-selected": l || void 0,
+		"data-state": a ? o ? "open" : "closed" : void 0,
+		style: { "--cascivo-tree-level": n },
+		className: e.item,
+		ref: (e) => {
+			e ? d.current.set(t.id, e) : d.current.delete(t.id);
+		},
+		onFocus: (e) => {
+			e.target === e.currentTarget && f();
+		},
+		onKeyDown: p,
+		onClick: (e) => {
+			e.stopPropagation(), m();
+		},
+		children: [/* @__PURE__ */ c("span", {
+			className: e.row,
+			children: [
+				a ? /* @__PURE__ */ s("span", {
+					className: e.twisty,
+					"aria-hidden": "true",
+					"data-state": o ? "open" : "closed"
+				}) : /* @__PURE__ */ s("span", {
+					className: e.twistySpacer,
+					"aria-hidden": "true"
+				}),
+				t.icon && /* @__PURE__ */ s("span", {
+					className: e.icon,
+					"aria-hidden": "true",
+					children: t.icon
+				}),
+				/* @__PURE__ */ s("span", {
+					className: e.label,
+					children: t.label
+				})
+			]
+		}), a && /* @__PURE__ */ s("div", {
+			className: e.groupWrap,
+			"data-state": o ? "open" : "closed",
+			children: /* @__PURE__ */ s("ul", {
+				role: "group",
+				className: e.group,
+				children: h
+			})
+		})]
+	});
+}
+var h = {
+	loading: () => o(a.treeView.loading),
+	expand: () => o(a.treeView.expand),
+	collapse: () => o(a.treeView.collapse)
+};
+//#endregion
+export { f as TreeView, h as treeViewMessages };

package/dist/node/tree-view/tree-view.module.js

@@ -0,0 +1,15 @@
+"use client";
+
+var e = {
+	tree: "_tree_ufkml_2",
+	item: "_item_ufkml_12",
+	row: "_row_ufkml_16",
+	twisty: "_twisty_ufkml_47",
+	twistySpacer: "_twistySpacer_ufkml_61",
+	icon: "_icon_ufkml_67",
+	label: "_label_ufkml_75",
+	groupWrap: "_groupWrap_ufkml_83",
+	group: "_group_ufkml_83"
+};
+//#endregion
+export { e as default };

package/dist/node/user/user.js

@@ -0,0 +1,37 @@
+"use client";
+
+import { Avatar as e } from "../avatar/avatar.js";
+import t from "./user.module.js";
+import { cn as n } from "@cascivo/core";
+import { jsx as r, jsxs as i } from "react/jsx-runtime";
+//#region ../components/src/user/user.tsx
+function a({ name: a, description: o, avatarProps: s, className: c, children: l, ...u }) {
+	let d = typeof a == "string" && s?.name === void 0 && s?.fallback === void 0 ? { name: a } : {};
+	return /* @__PURE__ */ i("div", {
+		role: "group",
+		className: n(t.user, c),
+		...u,
+		children: [
+			/* @__PURE__ */ r(e, {
+				...d,
+				...s
+			}),
+			/* @__PURE__ */ i("span", {
+				className: t.text,
+				children: [/* @__PURE__ */ r("span", {
+					className: t.name,
+					children: a
+				}), o != null && /* @__PURE__ */ r("span", {
+					className: t.description,
+					children: o
+				})]
+			}),
+			l != null && /* @__PURE__ */ r("span", {
+				className: t.action,
+				children: l
+			})
+		]
+	});
+}
+//#endregion
+export { a as User };

package/dist/node/user/user.module.js

@@ -0,0 +1,11 @@
+"use client";
+
+var e = {
+	user: "_user_uuj1b_2",
+	text: "_text_uuj1b_10",
+	name: "_name_uuj1b_17",
+	description: "_description_uuj1b_26",
+	action: "_action_uuj1b_34"
+};
+//#endregion
+export { e as default };

package/dist/node/visually-hidden/visually-hidden.js

@@ -0,0 +1,15 @@
+"use client";
+
+import e from "./visually-hidden.module.js";
+import { cn as t } from "@cascivo/core";
+import { jsx as n } from "react/jsx-runtime";
+//#region ../components/src/visually-hidden/visually-hidden.tsx
+function r({ children: r, className: i, ...a }) {
+	return /* @__PURE__ */ n("span", {
+		className: t(e.visuallyHidden, i),
+		...a,
+		children: r
+	});
+}
+//#endregion
+export { r as VisuallyHidden };

package/dist/node/visually-hidden/visually-hidden.module.js

@@ -0,0 +1,5 @@
+"use client";
+
+var e = { visuallyHidden: "_visuallyHidden_1iva7_2" };
+//#endregion
+export { e as default };

package/dist/number-input/number-input.js

@@ -30,66 +30,66 @@ function m(e) {
 	let n = Number(t);
 	return Number.isFinite(n) ? n : null;
 }
-function h({ value: n, defaultValue: h, onChange: g, min: _, max: v, step: y = 1, precision: b, formatOptions: x, label: S, hint: C, error: w, size: T = "md", disabled: E, incrementLabel: D, decrementLabel: O, className: k, id: A, onFocus: j, onBlur: M, onKeyDown: N, ...P }) {
+function h({ value: n, defaultValue: h, onValueChange: g, onChange: _, min: v, max: y, step: b = 1, precision: x, formatOptions: S, label: C, hint: w, error: T, size: E = "md", disabled: D, incrementLabel: O, decrementLabel: k, className: A, id: j, onFocus: M, onBlur: N, onKeyDown: P, ...F }) {
 	a();
-	let F = D ?? s(o.numberInput.increment), I = O ?? s(o.numberInput.decrement), [L, R] = r(u), z = n !== void 0, B = i(h ?? null), V = i(""), H = z ? n : B.value, U = A ?? (S ? `cascade-number-input-${S.toLowerCase().replace(/\s+/g, "-")}` : void 0), W = (e) => {
-		z || (B.value = e), V.value = e == null ? "" : String(e), e !== H && g?.(e);
-	}, G = () => {
-		let e = m(V.value);
-		e != null && (e = d(e, _, v), b !== void 0 && (e = p(e, b))), W(e);
-	}, K = (e) => {
-		let t = (L.value === "focused" ? m(V.value) : H) ?? 0, n = b ?? Math.max(f(y), f(t));
-		W(d(p(t + e * y, n), _, v));
-	}, q = L.value === "focused" ? V.value : ((e) => e == null ? "" : x ? new Intl.NumberFormat(void 0, x).format(e) : String(e))(H), J = H != null && v !== void 0 && H >= v, Y = H != null && _ !== void 0 && H <= _;
+	let I = O ?? s(o.numberInput.increment), L = k ?? s(o.numberInput.decrement), [R, z] = r(u), B = n !== void 0, V = i(h ?? null), H = i(""), U = B ? n : V.value, W = j ?? (C ? `cascade-number-input-${C.toLowerCase().replace(/\s+/g, "-")}` : void 0), G = (e) => {
+		B || (V.value = e), H.value = e == null ? "" : String(e), e !== U && (g ?? _)?.(e);
+	}, K = () => {
+		let e = m(H.value);
+		e != null && (e = d(e, v, y), x !== void 0 && (e = p(e, x))), G(e);
+	}, q = (e) => {
+		let t = (R.value === "focused" ? m(H.value) : U) ?? 0, n = x ?? Math.max(f(b), f(t));
+		G(d(p(t + e * b, n), v, y));
+	}, J = R.value === "focused" ? H.value : ((e) => e == null ? "" : S ? new Intl.NumberFormat(void 0, S).format(e) : String(e))(U), Y = U != null && y !== void 0 && U >= y, X = U != null && v !== void 0 && U <= v;
 	return /* @__PURE__ */ l("div", {
-		className: t(e.wrapper, k),
-		"data-state": w ? "error" : L.value,
-		"data-size": T,
+		className: t(e.wrapper, A),
+		"data-state": T ? "error" : R.value,
+		"data-size": E,
 		children: [
-			S && /* @__PURE__ */ c("label", {
+			C && /* @__PURE__ */ c("label", {
 				className: e.label,
-				htmlFor: U,
-				children: S
+				htmlFor: W,
+				children: C
 			}),
 			/* @__PURE__ */ l("div", {
 				className: e.field,
 				children: [/* @__PURE__ */ c("input", {
-					id: U,
+					id: W,
 					type: "text",
 					inputMode: "decimal",
 					autoComplete: "off",
 					role: "spinbutton",
 					className: e.input,
-					value: q,
-					disabled: E,
-					"aria-valuenow": H ?? void 0,
-					"aria-valuemin": _,
-					"aria-valuemax": v,
-					"aria-invalid": w ? !0 : void 0,
-					"aria-describedby": w ? `${U}-error` : C ? `${U}-hint` : void 0,
+					value: J,
+					disabled: D,
+					"aria-valuenow": U ?? void 0,
+					"aria-valuemin": v,
+					"aria-valuemax": y,
+					"aria-invalid": T ? !0 : void 0,
+					"aria-describedby": T ? `${W}-error` : w ? `${W}-hint` : void 0,
 					onChange: (e) => {
-						V.value = e.target.value;
+						H.value = e.target.value;
 					},
 					onFocus: (e) => {
-						V.value = H == null ? "" : String(H), R("FOCUS"), j?.(e);
+						H.value = U == null ? "" : String(U), z("FOCUS"), M?.(e);
 					},
 					onBlur: (e) => {
-						G(), R("BLUR"), M?.(e);
+						K(), z("BLUR"), N?.(e);
 					},
 					onKeyDown: (e) => {
-						e.key === "ArrowUp" ? (e.preventDefault(), K(1)) : e.key === "ArrowDown" ? (e.preventDefault(), K(-1)) : e.key === "Enter" && G(), N?.(e);
+						e.key === "ArrowUp" ? (e.preventDefault(), q(1)) : e.key === "ArrowDown" ? (e.preventDefault(), q(-1)) : e.key === "Enter" && K(), P?.(e);
 					},
-					...P
+					...F
 				}), /* @__PURE__ */ l("div", {
 					className: e.steppers,
 					children: [/* @__PURE__ */ c("button", {
 						type: "button",
 						className: e.stepper,
-						"aria-label": F,
+						"aria-label": I,
 						tabIndex: -1,
-						disabled: E || J,
+						disabled: D || Y,
 						onMouseDown: (e) => e.preventDefault(),
-						onClick: () => K(1),
+						onClick: () => q(1),
 						children: /* @__PURE__ */ c("svg", {
 							viewBox: "0 0 10 10",
 							"aria-hidden": "true",
@@ -106,11 +106,11 @@ function h({ value: n, defaultValue: h, onChange: g, min: _, max: v, step: y = 1
 					}), /* @__PURE__ */ c("button", {
 						type: "button",
 						className: e.stepper,
-						"aria-label": I,
+						"aria-label": L,
 						tabIndex: -1,
-						disabled: E || Y,
+						disabled: D || X,
 						onMouseDown: (e) => e.preventDefault(),
-						onClick: () => K(-1),
+						onClick: () => q(-1),
 						children: /* @__PURE__ */ c("svg", {
 							viewBox: "0 0 10 10",
 							"aria-hidden": "true",
@@ -127,16 +127,16 @@ function h({ value: n, defaultValue: h, onChange: g, min: _, max: v, step: y = 1
 					})]
 				})]
 			}),
-			w && /* @__PURE__ */ c("span", {
-				id: `${U}-error`,
+			T && /* @__PURE__ */ c("span", {
+				id: `${W}-error`,
 				className: e.error,
 				role: "alert",
-				children: w
+				children: T
 			}),
-			!w && C && /* @__PURE__ */ c("span", {
-				id: `${U}-hint`,
+			!T && w && /* @__PURE__ */ c("span", {
+				id: `${W}-hint`,
 				className: e.hint,
-				children: C
+				children: w
 			})
 		]
 	});

package/dist/react/src/theme.js

@@ -2,42 +2,53 @@
 
 import { persistedSignal as e } from "../../storage/src/persisted-signal.js";
 import { useSignalEffect as t, useSignals as n } from "@cascivo/core";
-import { Fragment as r, jsx as i } from "react/jsx-runtime";
-import { useRef as a } from "react";
+import { Fragment as r, jsx as i, jsxs as a } from "react/jsx-runtime";
+import { useRef as o } from "react";
 //#region src/theme.tsx
-var o = "cascivo-theme", s = "data-theme", c = null, l = {
-	storageKey: o,
-	defaultTheme: "light"
+var s = "cascivo-theme", c = "data-theme", l = null, u = {
+	storageKey: s,
+	defaultTheme: "light",
+	explicit: !1
 };
-function u(e) {
+function d(e) {
 	return typeof window > "u" || typeof window.matchMedia != "function" ? e : window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : window.matchMedia("(prefers-color-scheme: light)").matches ? "light" : e;
 }
-function d() {
-	return c ??= e(l.storageKey, u(l.defaultTheme)), c;
-}
-function f(e) {
-	d().value = e;
+function f() {
+	return u.explicit ? u.defaultTheme : d(u.defaultTheme);
 }
 function p() {
-	return n(), [d(), f];
-}
-function m({ defaultTheme: e, value: n, storageKey: u = o, attribute: f = s, target: p, onChange: m, children: h }) {
-	let g = a(!1);
-	g.current || (g.current = !0, (c === null || l.storageKey !== u) && (l = {
-		storageKey: u,
-		defaultTheme: e ?? "light"
-	}, c = null));
-	let _ = d();
-	n !== void 0 && (_.value = n);
-	let v = a(m);
-	return v.current = m, t(() => {
-		let e = _.value;
-		(p ? p.current : typeof document < "u" ? document.documentElement : null)?.setAttribute(f, e), v.current?.(e);
-	}), /* @__PURE__ */ i(r, { children: h });
-}
-function h(e = {}) {
-	let t = JSON.stringify(e.storageKey ?? o), n = JSON.stringify(e.attribute ?? s);
-	return `(function(){try{var v=${JSON.stringify(e.defaultTheme ?? "light")};if(typeof matchMedia==='function'){if(matchMedia('(prefers-color-scheme: dark)').matches)v='dark';else if(matchMedia('(prefers-color-scheme: light)').matches)v='light';}var raw=localStorage.getItem(${t});if(raw){v=raw;try{var e=JSON.parse(raw);if(e&&typeof e==='object'&&'value'in e)v=e.value;}catch(_){}}document.documentElement.setAttribute(${n},v);}catch(_){}})();`;
+	return l ??= e(u.storageKey, f()), l;
+}
+function m(e) {
+	p().value = e;
+}
+function h() {
+	return n(), [p(), m];
+}
+function g(e) {
+	return JSON.stringify(e).replace(/</g, "\\u003c");
+}
+function _({ defaultTheme: e, value: n, storageKey: d = s, attribute: f = c, target: m, onChange: h, nonce: _, children: v }) {
+	let y = o(!1);
+	y.current || (y.current = !0, (l === null || u.storageKey !== d) && (u = {
+		storageKey: d,
+		defaultTheme: e ?? "light",
+		explicit: e !== void 0
+	}, l = null));
+	let b = p();
+	n !== void 0 && (b.value = n);
+	let x = o(h);
+	return x.current = h, t(() => {
+		let e = b.value;
+		(m ? m.current : typeof document < "u" ? document.documentElement : null)?.setAttribute(f, e), x.current?.(e);
+	}), n !== void 0 && !m ? /* @__PURE__ */ a(r, { children: [/* @__PURE__ */ i("script", {
+		nonce: _,
+		dangerouslySetInnerHTML: { __html: `document.documentElement.setAttribute(${g(f)},${g(n)})` }
+	}), v] }) : /* @__PURE__ */ i(r, { children: v });
+}
+function v(e = {}) {
+	let t = JSON.stringify(e.storageKey ?? s), n = JSON.stringify(e.attribute ?? c), r = JSON.stringify(e.defaultTheme ?? "light"), i = e.defaultTheme === void 0 ? "if(typeof matchMedia==='function'){if(matchMedia('(prefers-color-scheme: dark)').matches)v='dark';else if(matchMedia('(prefers-color-scheme: light)').matches)v='light';}" : "";
+	return `(function(){try{var v=${r};` + i + `var raw=localStorage.getItem(${t});if(raw){v=raw;try{var e=JSON.parse(raw);if(e&&typeof e==='object'&&'value'in e)v=e.value;}catch(_){}}document.documentElement.setAttribute(${n},v);}catch(_){}})();`;
 }
 //#endregion
-export { m as ThemeProvider, f as setTheme, h as themePreloadScript, p as useTheme };
+export { _ as ThemeProvider, m as setTheme, v as themePreloadScript, h as useTheme };

package/dist/search/search.js

@@ -29,59 +29,59 @@ function d() {
 		})]
 	});
 }
-function f({ value: f, defaultValue: p = "", onChange: m, onSearch: h, debounceMs: g = 300, placeholder: _, size: v = "md", label: y, disabled: b = !1, clearLabel: x, id: S, className: C }) {
+function f({ value: f, defaultValue: p = "", onValueChange: m, onChange: h, onSearch: g, debounceMs: _ = 300, placeholder: v, size: y = "md", label: b, disabled: x = !1, clearLabel: S, id: C, className: w }) {
 	i();
-	let w = _ ?? o(a.search.placeholder), T = y ?? o(a.search.label), E = x ?? o(a.search.clear), D = l(null), O = l("");
-	O.current === "" && (u += 1, O.current = `cascade-search-${u}`);
-	let k = S ?? O.current, A = f !== void 0, j = n(A ? f : p);
-	A && (j.value = f);
-	let M = l(h);
-	M.current = h;
-	let N = l(null), P = () => {
-		N.current !== null && (clearTimeout(N.current), N.current = null);
+	let T = v ?? o(a.search.placeholder), E = b ?? o(a.search.label), D = S ?? o(a.search.clear), O = l(null), k = l("");
+	k.current === "" && (u += 1, k.current = `cascade-search-${u}`);
+	let A = C ?? k.current, j = f !== void 0, M = n(j ? f : p);
+	j && (M.value = f);
+	let N = l(g);
+	N.current = g;
+	let P = l(null), F = () => {
+		P.current !== null && (clearTimeout(P.current), P.current = null);
 	};
-	r(() => P);
-	let F = (e) => {
+	r(() => F);
+	let I = (e) => {
 		let t = e.target.value;
-		A || (j.value = t), m?.(t), P(), N.current = setTimeout(() => {
-			N.current = null, M.current?.(t);
-		}, g);
-	}, I = (e) => {
-		e.key === "Enter" && (P(), h?.(j.value));
-	}, L = () => {
-		P(), A || (j.value = ""), m?.(""), h?.(""), D.current?.focus();
-	}, R = j.value !== "";
+		j || (M.value = t), (m ?? h)?.(t), F(), P.current = setTimeout(() => {
+			P.current = null, N.current?.(t);
+		}, _);
+	}, L = (e) => {
+		e.key === "Enter" && (F(), g?.(M.value));
+	}, R = () => {
+		F(), j || (M.value = ""), (m ?? h)?.(""), g?.(""), O.current?.focus();
+	}, z = M.value !== "";
 	return /* @__PURE__ */ c("div", {
-		className: t(e.root, C),
-		"data-size": v,
-		"data-state": R ? "filled" : "empty",
+		className: t(e.root, w),
+		"data-size": y,
+		"data-state": z ? "filled" : "empty",
 		children: [
 			/* @__PURE__ */ s("label", {
 				className: e.label,
-				htmlFor: k,
-				children: T
+				htmlFor: A,
+				children: E
 			}),
 			/* @__PURE__ */ s("span", {
 				className: e.icon,
 				children: /* @__PURE__ */ s(d, {})
 			}),
 			/* @__PURE__ */ s("input", {
-				ref: D,
-				id: k,
+				ref: O,
+				id: A,
 				type: "search",
 				className: e.input,
-				value: j.value,
-				placeholder: w,
-				disabled: b,
-				onChange: F,
-				onKeyDown: I
+				value: M.value,
+				placeholder: T,
+				disabled: x,
+				onChange: I,
+				onKeyDown: L
 			}),
-			R && /* @__PURE__ */ s("button", {
+			z && /* @__PURE__ */ s("button", {
 				type: "button",
 				className: e.clear,
-				"aria-label": E,
-				disabled: b,
-				onClick: L,
+				"aria-label": D,
+				disabled: x,
+				onClick: R,
 				children: /* @__PURE__ */ s("span", {
 					"aria-hidden": "true",
 					children: "✕"

package/dist/swap/swap.js

@@ -4,23 +4,23 @@ import e from "./swap.module.js";
 import { useSignal as t, useSignals as n } from "@cascivo/core";
 import { jsx as r, jsxs as i } from "react/jsx-runtime";
 //#region ../components/src/swap/swap.tsx
-function a({ on: a, off: o, checked: s = !1, onChange: c, mode: l = "rotate", className: u, ...d }) {
+function a({ on: a, off: o, checked: s = !1, onValueChange: c, onChange: l, mode: u = "rotate", className: d, ...f }) {
 	n();
-	let f = t(s);
-	f.value = s;
-	function p() {
-		let e = !f.value;
-		c?.(e);
+	let p = t(s);
+	p.value = s;
+	function m() {
+		let e = !p.value;
+		(c ?? l)?.(e);
 	}
 	return /* @__PURE__ */ i("button", {
 		type: "button",
 		role: "switch",
-		"aria-checked": f.value,
-		className: [e.swap, u].filter(Boolean).join(" "),
-		"data-checked": f.value || void 0,
-		"data-mode": l,
-		onClick: p,
-		...d,
+		"aria-checked": p.value,
+		className: [e.swap, d].filter(Boolean).join(" "),
+		"data-checked": p.value || void 0,
+		"data-mode": u,
+		onClick: m,
+		...f,
 		children: [/* @__PURE__ */ r("span", {
 			className: e.on,
 			"aria-hidden": "true",