@cascivo/react 0.14.0 → 0.16.1

package/dist/node/toggle-group/toggle-group.js

@@ -1,53 +1,53 @@
 "use client";
 
 import e from "./toggle-group.module.js";
-import { cn as t, useControllableSignal as n, useRovingFocus as r, useSignals as i } from "@cascivo/core";
-import { forwardRef as a } from "react";
+import { forwardRef as t } from "react";
+import { cn as n, useControllableSignal as r, useRovingFocus as i, useSignals as a } from "@cascivo/core";
 import { jsx as o, jsxs as s } from "react/jsx-runtime";
 //#region ../components/src/toggle-group/toggle-group.tsx
 function c(e, t) {
 	return Array.isArray(e) ? e.includes(t) : e === t;
 }
-var l = a(function({ type: a, value: l, defaultValue: u, onValueChange: d, items: f, orientation: p = "horizontal", size: m = "md", disabled: h = !1, className: g, ..._ }, v) {
-	i();
-	let [y, b] = n({
+var l = t(function({ type: t, value: l, defaultValue: u, onValueChange: d, items: f, orientation: p = "horizontal", size: m = "md", disabled: h = !1, className: g, ..._ }, v) {
+	a();
+	let [y, b] = r({
 		value: l,
-		defaultValue: u ?? (a === "multiple" ? [] : ""),
+		defaultValue: u ?? (t === "multiple" ? [] : ""),
 		onChange: d
-	}), x = r({
+	}), x = i({
 		orientation: p,
 		loop: !0
 	}), S = (e) => {
-		let t = y.value;
-		if (a === "multiple") {
-			let n = Array.isArray(t) ? t : [];
-			b(n.includes(e) ? n.filter((t) => t !== e) : [...n, e]);
-		} else b(t === e ? "" : e);
+		let n = y.value;
+		if (t === "multiple") {
+			let t = Array.isArray(n) ? n : [];
+			b(t.includes(e) ? t.filter((t) => t !== e) : [...t, e]);
+		} else b(n === e ? "" : e);
 	};
 	return /* @__PURE__ */ o("div", {
-		role: a === "single" ? "radiogroup" : "group",
+		role: t === "single" ? "radiogroup" : "group",
 		"data-orientation": p,
 		"data-size": m,
-		className: t(e.toggleGroup, g),
+		className: n(e.toggleGroup, g),
 		ref: v,
 		..._,
-		children: f.map((t, n) => {
-			let r = c(y.value, t.value), i = h || t.disabled, { ref: l, ...u } = x.getItemProps(n);
+		children: f.map((n, r) => {
+			let i = c(y.value, n.value), a = h || n.disabled, { ref: l, ...u } = x.getItemProps(r);
 			return /* @__PURE__ */ s("button", {
 				type: "button",
-				...a === "single" ? {
+				...t === "single" ? {
 					role: "radio",
-					"aria-checked": r
-				} : { "aria-pressed": r },
+					"aria-checked": i
+				} : { "aria-pressed": i },
 				...u,
 				ref: l,
-				"data-state": r ? "on" : "off",
-				disabled: i,
-				"aria-label": t.icon && !t.label ? t.value : void 0,
+				"data-state": i ? "on" : "off",
+				disabled: a,
+				"aria-label": n.icon && !n.label ? n.value : void 0,
 				className: e.item,
-				onClick: () => S(t.value),
-				children: [t.icon, t.label && /* @__PURE__ */ o("span", { children: t.label })]
-			}, t.value);
+				onClick: () => S(n.value),
+				children: [n.icon, n.label && /* @__PURE__ */ o("span", { children: n.label })]
+			}, n.value);
 		})
 	});
 });

package/dist/node/toggle-group/toggle-group.module.js

@@ -1,5 +1,3 @@
-"use client";
-
 var e = {
 	toggleGroup: "_toggleGroup_s4o5x_2",
 	item: "_item_s4o5x_33"

package/dist/node/toggletip/toggletip.js

@@ -1,25 +1,25 @@
 "use client";
 
 import e from "./toggletip.module.js";
-import { DismissableLayer as t, cn as n, useAnchorPosition as r, useControllableSignal as i, useSignals as a } from "@cascivo/core";
-import { useId as o, useRef as s } from "react";
+import { useId as t, useRef as n } from "react";
+import { DismissableLayer as r, cn as i, useAnchorPosition as a, useControllableSignal as o, useSignals as s } from "@cascivo/core";
 import { builtin as c, t as l } from "@cascivo/i18n";
 import { jsx as u, jsxs as d } from "react/jsx-runtime";
 //#region ../components/src/toggletip/toggletip.tsx
 function f({ trigger: f, children: p, placement: m = "top", defaultOpen: h = !1, open: g, onOpenChange: _, labels: v, className: y }) {
-	a();
-	let [b, x] = i({
+	s();
+	let [b, x] = o({
 		...g !== void 0 && { value: g },
 		defaultValue: h,
 		..._ && { onChange: _ }
-	}), S = s(null), C = s(null), w = o(), { anchorStyle: T, floatingStyle: E } = r({
+	}), S = n(null), C = n(null), w = t(), { anchorStyle: T, floatingStyle: E } = a({
 		anchorRef: S,
 		floatingRef: C,
 		placement: m,
 		enabled: b
 	});
 	return /* @__PURE__ */ d("span", {
-		className: n(e.root, y),
+		className: i(e.root, y),
 		children: [/* @__PURE__ */ u("button", {
 			ref: S,
 			type: "button",
@@ -30,7 +30,7 @@ function f({ trigger: f, children: p, placement: m = "top", defaultOpen: h = !1,
 			style: T,
 			onClick: () => x(!b.value),
 			children: f
-		}), b.value ? /* @__PURE__ */ u(t, {
+		}), b.value ? /* @__PURE__ */ u(r, {
 			onDismiss: () => x(!1),
 			children: /* @__PURE__ */ u("div", {
 				ref: C,

package/dist/node/toggletip/toggletip.module.js

@@ -1,5 +1,3 @@
-"use client";
-
 var e = {
 	root: "_root_1t09l_2",
 	trigger: "_trigger_1t09l_7",

package/dist/node/tooltip/tooltip.js

@@ -1,25 +1,25 @@
 "use client";
 
 import e from "./tooltip.module.js";
-import { createMachine as t, useId as n, useMachine as r, useSignalEffect as i, useSignals as a } from "@cascivo/core";
-import { cloneElement as o, useRef as s } from "react";
+import { cloneElement as t, useRef as n } from "react";
+import { createMachine as r, useId as i, useMachine as a, useSignalEffect as o, useSignals as s } from "@cascivo/core";
 import { jsx as c, jsxs as l } from "react/jsx-runtime";
 //#region ../components/src/tooltip/tooltip.tsx
-var u = t({
+var u = r({
 	initial: "hidden",
 	states: {
 		hidden: { on: { SHOW: "visible" } },
 		visible: { on: { HIDE: "hidden" } }
 	}
 });
-function d({ content: t, placement: d = "top", children: f, delay: p = 200 }) {
-	a();
-	let [m, h] = r(u), g = n("cascivo-tooltip"), _ = n("cascivo-anchor"), v = s(void 0), y = s(null), b = m.value === "visible", x = () => {
+function d({ content: r, placement: d = "top", children: f, delay: p = 200 }) {
+	s();
+	let [m, h] = a(u), g = i("cascivo-tooltip"), _ = i("cascivo-anchor"), v = n(void 0), y = n(null), b = m.value === "visible", x = () => {
 		clearTimeout(v.current), v.current = setTimeout(() => h("SHOW"), p);
 	}, S = () => {
 		clearTimeout(v.current), h("HIDE");
 	};
-	i(() => () => clearTimeout(v.current)), i(() => {
+	o(() => () => clearTimeout(v.current)), o(() => {
 		m.value === "visible" ? y.current?.showPopover() : y.current?.hidePopover();
 	});
 	let C = f, w = C.props, T = {
@@ -41,7 +41,7 @@ function d({ content: t, placement: d = "top", children: f, delay: p = 200 }) {
 	};
 	return /* @__PURE__ */ l("span", {
 		className: e.root,
-		children: [o(C, T), /* @__PURE__ */ c("span", {
+		children: [t(C, T), /* @__PURE__ */ c("span", {
 			ref: y,
 			popover: "manual",
 			role: "tooltip",
@@ -50,7 +50,7 @@ function d({ content: t, placement: d = "top", children: f, delay: p = 200 }) {
 			"data-state": b ? "visible" : "hidden",
 			"data-anchor": `--tooltip-${_}`,
 			className: e.tooltip,
-			children: t
+			children: r
 		})]
 	});
 }

package/dist/node/tooltip/tooltip.module.js

@@ -1,5 +1,3 @@
-"use client";
-
 var e = {
 	root: "_root_1t9q1_2",
 	tooltip: "_tooltip_1t9q1_7"

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

@@ -1,8 +1,8 @@
 "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 { useRef as a } from "react";
+import { useRef as t } from "react";
+import { cn as n, useControllableSignal as r, useSignal as i, useSignals as a } from "@cascivo/core";
 import { builtin as o, t as s } from "@cascivo/i18n";
 import { jsx as c, jsxs as l } from "react/jsx-runtime";
 //#region ../components/src/tree-view/tree-view.tsx
@@ -24,88 +24,88 @@ function u(e, t) {
 function d(e) {
 	return e === void 0 ? [] : Array.isArray(e) ? e : e === "" ? [] : [e];
 }
-function f({ items: o, selectionMode: s = "single", selected: l, defaultSelected: f, onSelectChange: h, expanded: g, defaultExpanded: _, onExpandedChange: v, className: y, "aria-label": b }) {
-	i();
-	let [x, S] = n({
+function f({ items: o, selectionMode: s = "single", selected: l, defaultSelected: f, onSelectChange: h, expanded: g, defaultExpanded: _, onExpandedChange: v, className: y, "aria-label": b, ariaLabel: x }) {
+	a();
+	let [S, C] = r({
 		value: g,
 		defaultValue: _ ?? [],
 		onChange: v
-	}), [C, w] = n({
+	}), [w, T] = r({
 		value: l,
 		defaultValue: f ?? (s === "multi" ? [] : ""),
 		onChange: h
-	}), T = r(null), E = a(/* @__PURE__ */ new Map()), D = new Set(x.value), O = u(o, 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);
+	}), E = i(null), D = t(/* @__PURE__ */ new Map()), O = new Set(S.value), k = u(o, O), A = new Map(k.map((e, t) => [e.id, t])), j = d(w.value), M = new Set(j), N = E.value ?? j[0] ?? k[0]?.id ?? null, P = (e) => C([...e]), F = (e) => {
+		if (O.has(e)) return;
+		let t = new Set(O);
+		t.add(e), P(t);
 	}, I = (e) => {
-		T.value = e, E.current.get(e)?.focus();
+		if (!O.has(e)) return;
+		let t = new Set(O);
+		t.delete(e), P(t);
 	}, L = (e) => {
+		E.value = e, D.current.get(e)?.focus();
+	}, R = (e) => {
 		if (s === "multi") {
-			let t = new Set(j);
-			t.has(e) ? t.delete(e) : t.add(e), w([...t]);
-		} else w(e);
-	}, R = a({
+			let t = new Set(M);
+			t.has(e) ? t.delete(e) : t.add(e), T([...t]);
+		} else T(e);
+	}, z = t({
 		buffer: "",
 		at: 0
-	}), z = (e, t) => {
-		let n = k.get(t.id);
+	}), B = (e, t) => {
+		let n = A.get(t.id);
 		if (n === void 0) return;
-		let { hasChildren: r, level: i, parentId: a, expanded: s } = O[n];
+		let { hasChildren: r, level: i, parentId: a, expanded: s } = k[n];
 		switch (e.key) {
 			case "ArrowDown": {
 				e.preventDefault();
-				let t = O[n + 1];
-				t && I(t.id);
+				let t = k[n + 1];
+				t && L(t.id);
 				break;
 			}
 			case "ArrowUp": {
 				e.preventDefault();
-				let t = O[n - 1];
-				t && I(t.id);
+				let t = k[n - 1];
+				t && L(t.id);
 				break;
 			}
 			case "ArrowRight":
-				if (e.preventDefault(), r && !s) P(t.id);
+				if (e.preventDefault(), r && !s) F(t.id);
 				else if (r && s) {
-					let e = O[n + 1];
-					e && e.level > i && I(e.id);
+					let e = k[n + 1];
+					e && e.level > i && L(e.id);
 				}
 				break;
 			case "ArrowLeft":
-				e.preventDefault(), r && s ? F(t.id) : a && I(a);
+				e.preventDefault(), r && s ? I(t.id) : a && L(a);
 				break;
 			case "Home":
-				e.preventDefault(), O[0] && I(O[0].id);
+				e.preventDefault(), k[0] && L(k[0].id);
 				break;
 			case "End": {
 				e.preventDefault();
-				let t = O[O.length - 1];
-				t && I(t.id);
+				let t = k[k.length - 1];
+				t && L(t.id);
 				break;
 			}
 			case "Enter":
 			case " ":
-				e.preventDefault(), L(t.id);
+				e.preventDefault(), R(t.id);
 				break;
 			default:
 				if (e.key.length === 1 && !e.metaKey && !e.ctrlKey && !e.altKey) {
-					let t = R.current, r = Date.now();
+					let t = z.current, r = Date.now();
 					t.buffer = r - t.at > 500 ? e.key : t.buffer + e.key, t.at = r;
-					let i = t.buffer.toLowerCase(), a = (e) => typeof e.label == "string" && e.label.toLowerCase().startsWith(i), s = p(o, D), c = [...O.slice(n + 1), ...O.slice(0, n + 1)].find((e) => {
+					let i = t.buffer.toLowerCase(), a = (e) => typeof e.label == "string" && e.label.toLowerCase().startsWith(i), s = p(o, O), c = [...k.slice(n + 1), ...k.slice(0, n + 1)].find((e) => {
 						let t = s.get(e.id);
 						return t ? a(t) : !1;
 					});
-					c && I(c.id);
+					c && L(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), s = M === e.id, l = e.children?.length ?? 0;
+	}, V = (e, t, n, r) => {
+		let i = !!e.children && e.children.length > 0, a = O.has(e.id), o = M.has(e.id), s = N === e.id, l = e.children?.length ?? 0;
 		return /* @__PURE__ */ c(m, {
 			node: e,
 			level: t,
@@ -115,20 +115,20 @@ function f({ items: o, selectionMode: s = "single", selected: l, defaultSelected
 			isExpanded: a,
 			isSelected: o,
 			isTabbable: s,
-			itemRefs: E,
-			onFocusNode: () => T.value = e.id,
-			onKeyDown: (t) => z(t, e),
+			itemRefs: D,
+			onFocusNode: () => E.value = e.id,
+			onKeyDown: (t) => B(t, e),
 			onActivate: () => {
-				I(e.id), i && (a ? F : P)(e.id), L(e.id);
+				L(e.id), i && (a ? I : F)(e.id), R(e.id);
 			},
-			children: i && e.children.map((e, n) => B(e, t + 1, n + 1, l))
+			children: i && e.children.map((e, n) => V(e, t + 1, n + 1, l))
 		}, e.id);
 	};
 	return /* @__PURE__ */ c("ul", {
 		role: "tree",
-		"aria-label": b,
-		className: t(e.tree, y),
-		children: o.map((e, t) => B(e, 1, t + 1, o.length))
+		"aria-label": x ?? b,
+		className: n(e.tree, y),
+		children: o.map((e, t) => V(e, 1, t + 1, o.length))
 	});
 }
 function p(e, t) {

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

@@ -1,5 +1,3 @@
-"use client";
-
 var e = {
 	tree: "_tree_ufkml_2",
 	item: "_item_ufkml_12",

package/dist/node/user/user.js

@@ -1,8 +1,6 @@
-"use client";
-
 import { Avatar as e } from "../avatar/avatar.js";
 import t from "./user.module.js";
-import { cn as n } from "@cascivo/core";
+import { cn as n } from "@cascivo/core/pure";
 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 }) {

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

@@ -1,5 +1,3 @@
-"use client";
-
 var e = {
 	user: "_user_uuj1b_2",
 	text: "_text_uuj1b_10",

package/dist/node/virtual-list/virtual-list.js

@@ -0,0 +1,40 @@
+"use client";
+
+import e from "./virtual-list.module.js";
+import { cn as t, useSignal as n, useSignals as r } from "@cascivo/core";
+import { jsx as i } from "react/jsx-runtime";
+//#region ../components/src/virtual-list/virtual-list.tsx
+function a({ items: a, itemHeight: o, height: s, renderItem: c, overscan: l = 3, ariaLabel: u, className: d }) {
+	r();
+	let f = n(0), p = Math.ceil(s / o), m = Math.floor(f.value / o), h = Math.max(0, m - l), g = Math.min(a.length, m + p + l), _ = a.slice(h, g), v = (e) => {
+		f.value = e.currentTarget.scrollTop;
+	}, y = { blockSize: `${s}px` };
+	return /* @__PURE__ */ i("div", {
+		className: t(e.viewport, d),
+		style: y,
+		onScroll: v,
+		role: "list",
+		"aria-label": u,
+		tabIndex: 0,
+		children: /* @__PURE__ */ i("div", {
+			className: e.canvas,
+			style: { blockSize: `${a.length * o}px` },
+			children: _.map((t, n) => {
+				let r = h + n;
+				return /* @__PURE__ */ i("div", {
+					role: "listitem",
+					"aria-setsize": a.length,
+					"aria-posinset": r + 1,
+					className: e.row,
+					style: {
+						blockSize: `${o}px`,
+						transform: `translateY(${r * o}px)`
+					},
+					children: c(t, r)
+				}, r);
+			})
+		})
+	});
+}
+//#endregion
+export { a as VirtualList };

package/dist/node/virtual-list/virtual-list.module.js

@@ -0,0 +1,7 @@
+var e = {
+	viewport: "_viewport_1wmsq_2",
+	canvas: "_canvas_1wmsq_14",
+	row: "_row_1wmsq_19"
+};
+//#endregion
+export { e as default };

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

@@ -1,4 +1,2 @@
-"use client";
-
-import "@cascivo/core";
+import "@cascivo/core/pure";
 import "react/jsx-runtime";

package/dist/node/wheel-picker/wheel-picker.js

@@ -0,0 +1,84 @@
+"use client";
+
+import e from "./wheel-picker.module.js";
+import { useRef as t } from "react";
+import { cn as n, useEffectPropSignal as r, useId as i, useSignalEffect as a } from "@cascivo/core";
+import { jsx as o, jsxs as s } from "react/jsx-runtime";
+//#region ../components/src/wheel-picker/wheel-picker.tsx
+var c = 120;
+function l({ options: l, value: u, onValueChange: d, visibleCount: f = 5, itemHeight: p = 36, ariaLabel: m, className: h }) {
+	let g = t(null), _ = i(), v = Math.max(0, l.findIndex((e) => e.value === u)), y = t(l);
+	y.current = l;
+	let b = t(d);
+	b.current = d;
+	let x = t(p);
+	x.current = p;
+	let S = t(u);
+	S.current = u;
+	let C = (e, t) => {
+		let n = g.current;
+		n && n.scrollTo({
+			top: e * x.current,
+			behavior: t ? "smooth" : "instant"
+		});
+	}, w = r(u);
+	a(() => {
+		let e = w.value, t = y.current.findIndex((t) => t.value === e);
+		t >= 0 && C(t, !1);
+	}), a(() => {
+		let e = g.current;
+		if (!e) return;
+		let t, n = () => {
+			clearTimeout(t), t = setTimeout(() => {
+				let t = Math.round(e.scrollTop / x.current), n = y.current[t];
+				n && n.value !== S.current && b.current(n.value);
+			}, c);
+		};
+		return e.addEventListener("scroll", n, { passive: !0 }), () => {
+			clearTimeout(t), e.removeEventListener("scroll", n);
+		};
+	});
+	let T = (e) => {
+		let t = Math.max(0, Math.min(l.length - 1, e)), n = l[t];
+		!n || n.value === u || (d(n.value), C(t, !0));
+	}, E = (e) => {
+		let t = {
+			ArrowDown: v + 1,
+			ArrowUp: v - 1,
+			Home: 0,
+			End: l.length - 1,
+			PageDown: v + f,
+			PageUp: v - f
+		}[e.key];
+		t !== void 0 && (e.preventDefault(), T(t));
+	}, D = (f - 1) / 2 * p, O = {
+		"--_item-height": `${p}px`,
+		"--_pad": `${D}px`,
+		"--_column-height": `${f * p}px`
+	};
+	return /* @__PURE__ */ s("div", {
+		className: n(e.root, h),
+		style: O,
+		children: [/* @__PURE__ */ o("div", {
+			ref: g,
+			role: "listbox",
+			tabIndex: 0,
+			"aria-label": m,
+			"aria-activedescendant": `${_}-${v}`,
+			className: e.column,
+			onKeyDown: E,
+			children: l.map((t, n) => /* @__PURE__ */ o("div", {
+				id: `${_}-${n}`,
+				role: "option",
+				"aria-selected": n === v,
+				className: e.option,
+				children: t.label
+			}, t.value))
+		}), /* @__PURE__ */ o("div", {
+			"aria-hidden": "true",
+			className: e.band
+		})]
+	});
+}
+//#endregion
+export { l as WheelPicker };

package/dist/node/wheel-picker/wheel-picker.module.js

@@ -0,0 +1,8 @@
+var e = {
+	root: "_root_11q00_2",
+	column: "_column_11q00_7",
+	option: "_option_11q00_29",
+	band: "_band_11q00_48"
+};
+//#endregion
+export { e as default };

package/dist/notification/notification.js

@@ -1,8 +1,8 @@
 "use client";
 
 import e from "./notification.module.js";
-import { Presence as t, cn as n, normalizeTone as r, useSignal as i, useSignals as a } from "@cascivo/core";
-import { useRef as o } from "react";
+import { useRef as t } from "react";
+import { Presence as n, cn as r, normalizeTone as i, useSignal as a, useSignals as o } from "@cascivo/core";
 import { builtin as s, t as c } from "@cascivo/i18n";
 import { jsx as l, jsxs as u } from "react/jsx-runtime";
 //#region ../components/src/notification/notification.tsx
@@ -89,18 +89,18 @@ function m({ variant: e }) {
 	});
 }
 function h({ title: h, description: g, variant: _ = "info", dismissible: v = !1, onDismiss: y, actions: b, icon: x, labels: S, className: C, ...w }) {
-	a();
-	let T = d[r(_)] ?? _, E = i(!0), D = o(y);
+	o();
+	let T = d[i(_)] ?? _, E = a(!0), D = t(y);
 	D.current = y;
 	let O = v || y !== void 0, k = () => {
 		E.value = !1, setTimeout(() => D.current?.(), p);
 	};
-	return /* @__PURE__ */ l(t, {
+	return /* @__PURE__ */ l(n, {
 		present: E,
 		children: /* @__PURE__ */ u("div", {
 			role: f.has(T) ? "alert" : "status",
 			"data-variant": T,
-			className: n(e.notification, C),
+			className: r(e.notification, C),
 			...w,
 			children: [
 				/* @__PURE__ */ l("span", {

package/dist/notification/notification.module.js

@@ -1,5 +1,3 @@
-"use client";
-
 import './notification.css';
 var e = {
 	notification: "_notification_imxvx_2",

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

@@ -1,12 +1,12 @@
 "use client";
 
 import e from "./number-input.module.js";
-import { cn as t, createMachine as n, useMachine as r, useSignal as i, useSignals as a } from "@cascivo/core";
-import { forwardRef as o } from "react";
+import { forwardRef as t } from "react";
+import { cn as n, createMachine as r, useMachine as i, useSignal as a, useSignals as o } from "@cascivo/core";
 import { builtin as s, t as c } from "@cascivo/i18n";
 import { jsx as l, jsxs as u } from "react/jsx-runtime";
 //#region ../components/src/number-input/number-input.tsx
-var d = n({
+var d = r({
 	initial: "idle",
 	states: {
 		idle: { on: { FOCUS: "focused" } },
@@ -31,9 +31,9 @@ function h(e) {
 	let n = Number(t);
 	return Number.isFinite(n) ? n : null;
 }
-var g = o(function({ value: n, defaultValue: o, 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 }, I) {
-	a();
-	let L = O ?? c(s.numberInput.increment), R = k ?? c(s.numberInput.decrement), [z, B] = r(d), V = n !== void 0, H = i(o ?? null), U = i(""), W = V ? n : H.value, G = j ?? (C ? `cascade-number-input-${C.toLowerCase().replace(/\s+/g, "-")}` : void 0), K = (e) => {
+var g = t(function({ value: t, defaultValue: r, 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 }, I) {
+	o();
+	let L = O ?? c(s.numberInput.increment), R = k ?? c(s.numberInput.decrement), [z, B] = i(d), V = t !== void 0, H = a(r ?? null), U = a(""), W = V ? t : H.value, G = j ?? (C ? `cascade-number-input-${C.toLowerCase().replace(/\s+/g, "-")}` : void 0), K = (e) => {
 		V || (H.value = e), U.value = e == null ? "" : String(e), e !== W && (g ?? _)?.(e);
 	}, q = () => {
 		let e = h(U.value);
@@ -43,7 +43,7 @@ var g = o(function({ value: n, defaultValue: o, onValueChange: g, onChange: _, m
 		K(f(m(t + e * b, n), v, y));
 	}, Y = z.value === "focused" ? U.value : ((e) => e == null ? "" : S ? new Intl.NumberFormat(void 0, S).format(e) : String(e))(W), X = W != null && y !== void 0 && W >= y, Z = W != null && v !== void 0 && W <= v;
 	return /* @__PURE__ */ u("div", {
-		className: t(e.wrapper, A),
+		className: n(e.wrapper, A),
 		"data-state": T ? "error" : z.value,
 		"data-size": E,
 		children: [

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

@@ -1,5 +1,3 @@
-"use client";
-
 import './number-input.css';
 var e = {
 	wrapper: "_wrapper_aavdw_2",

package/dist/otp-input/otp-input.js

@@ -1,14 +1,14 @@
 "use client";
 
 import e from "./otp-input.module.js";
-import { cn as t, useSignal as n, useSignals as r } from "@cascivo/core";
-import { useRef as i } from "react";
+import { useRef as t } from "react";
+import { cn 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 } from "react/jsx-runtime";
 //#region ../components/src/otp-input/otp-input.tsx
 function c({ length: c = 6, value: l, onValueChange: u, disabled: d = !1, type: f = "numeric", className: p, ...m }) {
-	r();
-	let h = n(Array.from({ length: c }, (e, t) => l[t] ?? "")), g = i([]), _ = Array.from({ length: c }, (e, t) => l[t] ?? "");
+	i();
+	let h = r(Array.from({ length: c }, (e, t) => l[t] ?? "")), g = t([]), _ = Array.from({ length: c }, (e, t) => l[t] ?? "");
 	JSON.stringify(h.value) !== JSON.stringify(_) && (h.value = _);
 	function v(e) {
 		u(e.join("")), h.value = e;
@@ -39,7 +39,7 @@ function c({ length: c = 6, value: l, onValueChange: u, disabled: d = !1, type:
 	}
 	let C = o(a.otpInput.label);
 	return /* @__PURE__ */ s("div", {
-		className: t(e.wrapper, p),
+		className: n(e.wrapper, p),
 		role: "group",
 		"aria-label": C,
 		...m,