@cascivo/react 0.16.1 → 0.17.1

package/dist/node/side-nav/side-nav.js

@@ -4,21 +4,21 @@ import { Tooltip as e } from "../tooltip/tooltip.js";
 import { usePopover as t } from "../popover/use-popover.js";
 import n from "./side-nav.module.js";
 import { Fragment as r, useId as i } from "react";
-import { cn as a, focusElement as o, getLinkComponent as s, useSignal as c, useSignals as l } from "@cascivo/core";
-import { builtin as u, t as d } from "@cascivo/i18n";
-import { Fragment as f, jsx as p, jsxs as m } from "react/jsx-runtime";
+import { cn as a, focusElement as o, getLinkComponent as s, useControllableSignal as c, useSignal as l, useSignals as u } from "@cascivo/core";
+import { builtin as d, t as f } from "@cascivo/i18n";
+import { Fragment as p, jsx as m, jsxs as h } from "react/jsx-runtime";
 //#region ../components/src/side-nav/side-nav.tsx
-function h(e) {
+function g(e) {
 	return !("type" in e);
 }
-function g() {
-	return /* @__PURE__ */ p("svg", {
+function _() {
+	return /* @__PURE__ */ m("svg", {
 		viewBox: "0 0 16 16",
 		width: "14",
 		height: "14",
 		"aria-hidden": "true",
 		className: n.checkMark,
-		children: /* @__PURE__ */ p("path", {
+		children: /* @__PURE__ */ m("path", {
 			d: "M3.5 8.5l3 3 6-7",
 			fill: "none",
 			stroke: "currentColor",
@@ -28,20 +28,20 @@ function g() {
 		})
 	});
 }
-function _(e, { inMenu: t, onActivate: r, extraClass: i }) {
-	let o = t ? "menuitem" : void 0, c = a(n.link, n.sublink, i), l = /* @__PURE__ */ m(f, { children: [
-		e.icon ? /* @__PURE__ */ p("span", {
+function v(e, { inMenu: t, onActivate: r, extraClass: i }) {
+	let o = t ? "menuitem" : void 0, c = a(n.link, n.sublink, i), l = /* @__PURE__ */ h(p, { children: [
+		e.icon ? /* @__PURE__ */ m("span", {
 			className: n.icon,
 			"aria-hidden": "true",
 			children: e.icon
 		}) : null,
-		/* @__PURE__ */ p("span", {
+		/* @__PURE__ */ m("span", {
 			className: n.label,
 			children: e.label
 		}),
-		e.selected ? /* @__PURE__ */ p(g, {}) : null
+		e.selected ? /* @__PURE__ */ m(_, {}) : null
 	] });
-	return e.onSelect && !e.href ? /* @__PURE__ */ p("button", {
+	return e.onSelect && !e.href ? /* @__PURE__ */ m("button", {
 		type: "button",
 		role: o,
 		"aria-current": e.active ? "page" : void 0,
@@ -53,7 +53,7 @@ function _(e, { inMenu: t, onActivate: r, extraClass: i }) {
 			e.onSelect?.(), r?.();
 		},
 		children: l
-	}) : /* @__PURE__ */ p(s(), {
+	}) : /* @__PURE__ */ m(s(), {
 		href: e.disabled ? void 0 : e.href,
 		role: o,
 		"aria-current": e.active ? "page" : void 0,
@@ -72,16 +72,16 @@ function _(e, { inMenu: t, onActivate: r, extraClass: i }) {
 		children: l
 	});
 }
-function v(e) {
+function y(e) {
 	if (typeof Intl < "u" && "Segmenter" in Intl) {
 		let t = new Intl.Segmenter(void 0, { granularity: "grapheme" });
 		for (let n of t.segment(e)) return n.segment;
 	}
 	return [...e][0] ?? "";
 }
-function y({ item: e }) {
-	let { triggerRef: i, popoverRef: a, isOpen: s, anchorName: c, open: l, close: u, toggle: d } = t(), g = "[role=\"menuitem\"]:not([disabled]):not([aria-disabled=\"true\"])";
-	return /* @__PURE__ */ m(f, { children: [/* @__PURE__ */ p("button", {
+function b({ item: e }) {
+	let { triggerRef: i, popoverRef: a, isOpen: s, anchorName: c, open: l, close: u, toggle: d } = t(), f = "[role=\"menuitem\"]:not([disabled]):not([aria-disabled=\"true\"])";
+	return /* @__PURE__ */ h(p, { children: [/* @__PURE__ */ m("button", {
 		ref: i,
 		type: "button",
 		"aria-haspopup": "menu",
@@ -96,21 +96,21 @@ function y({ item: e }) {
 				e.preventDefault(), s.value || l();
 				let t = a.current;
 				t && setTimeout(() => {
-					t.querySelector(g)?.focus();
+					t.querySelector(f)?.focus();
 				}, 0);
 			} else e.key === "Escape" && u();
 		},
-		children: e.icon ? /* @__PURE__ */ p("span", {
+		children: e.icon ? /* @__PURE__ */ m("span", {
 			className: n.icon,
 			"aria-hidden": "true",
 			children: e.icon
-		}) : /* @__PURE__ */ p("span", {
+		}) : /* @__PURE__ */ m("span", {
 			className: n.fallbackIcon,
 			"data-fallback-icon": !0,
 			"aria-hidden": "true",
-			children: v(e.label)
+			children: y(e.label)
 		})
-	}), /* @__PURE__ */ m("div", {
+	}), /* @__PURE__ */ h("div", {
 		ref: a,
 		popover: "auto",
 		role: "menu",
@@ -120,93 +120,94 @@ function y({ item: e }) {
 		onKeyDown: (e) => {
 			let t = a.current;
 			if (!t) return;
-			let n = Array.from(t.querySelectorAll(g)), r = n.indexOf(e.target);
+			let n = Array.from(t.querySelectorAll(f)), r = n.indexOf(e.target);
 			e.key === "ArrowDown" ? (e.preventDefault(), n[(r + 1) % n.length]?.focus()) : e.key === "ArrowUp" ? (e.preventDefault(), n[(r - 1 + n.length) % n.length]?.focus()) : e.key === "Escape" && (e.preventDefault(), u(), o(i.current));
 		},
-		children: [/* @__PURE__ */ p("div", {
+		children: [/* @__PURE__ */ m("div", {
 			className: n.railFlyoutCaption,
 			"aria-hidden": "true",
 			children: e.label
-		}), e.items.map((e, t) => h(e) ? /* @__PURE__ */ p(r, { children: _(e, {
+		}), e.items.map((e, t) => g(e) ? /* @__PURE__ */ m(r, { children: v(e, {
 			inMenu: !0,
 			onActivate: u,
 			extraClass: n.flyoutItem
-		}) }, t) : e.type === "separator" ? /* @__PURE__ */ p("div", {
+		}) }, t) : e.type === "separator" ? /* @__PURE__ */ m("div", {
 			role: "separator",
 			className: n.flyoutSeparator
-		}, t) : /* @__PURE__ */ p("div", {
+		}, t) : /* @__PURE__ */ m("div", {
 			className: n.railFlyoutCaption,
 			"aria-hidden": "true",
 			children: e.label
 		}, t))]
 	})] });
 }
-function b({ items: t, groups: r, collapsed: o, defaultCollapsed: g = !1, onCollapsedChange: b, ariaLabel: x, collapseLabel: S, expandLabel: C, expandOnHover: w = !1, showCollapseToggle: T = !0, header: E, footer: D, className: O }) {
-	l();
-	let k = x ?? d(u.sideNav.nav), A = S ?? d(u.sideNav.collapse), j = C ?? d(u.sideNav.expand), M = i(), N = c(o ?? g);
-	o !== void 0 && (N.value = o);
-	let P = r ?? (t ? [{ items: t }] : [{ items: [] }]), F = c(P.flatMap((e) => e.items).filter((e) => e.items?.some((e) => h(e) && e.active)).map((e) => e.label)), I = (e) => {
-		let t = F.value;
-		F.value = t.includes(e) ? t.filter((t) => t !== e) : [...t, e];
-	}, L = () => {
-		let e = !N.value;
-		o === void 0 && (N.value = e), b?.(e);
-	}, R = N.value;
-	return /* @__PURE__ */ m("nav", {
-		"aria-label": k,
-		"data-state": R ? "collapsed" : "expanded",
-		"data-expand-on-hover": R && w ? "" : void 0,
-		className: a(n.sideNav, O),
+function x({ items: t, groups: r, collapsed: o, defaultCollapsed: _ = !1, onCollapsedChange: x, ariaLabel: S, collapseLabel: C, expandLabel: w, expandOnHover: T = !1, showCollapseToggle: E = !0, header: D, footer: O, className: k }) {
+	u();
+	let A = S ?? f(d.sideNav.nav), j = C ?? f(d.sideNav.collapse), M = w ?? f(d.sideNav.expand), N = i(), [P] = c({
+		value: o,
+		defaultValue: _
+	}), F = r ?? (t ? [{ items: t }] : [{ items: [] }]), I = l(F.flatMap((e) => e.items).filter((e) => e.items?.some((e) => g(e) && e.active)).map((e) => e.label)), L = (e) => {
+		let t = I.value;
+		I.value = t.includes(e) ? t.filter((t) => t !== e) : [...t, e];
+	}, R = () => {
+		let e = !P.value;
+		o === void 0 && (P.value = e), x?.(e);
+	}, z = P.value;
+	return /* @__PURE__ */ h("nav", {
+		"aria-label": A,
+		"data-state": z ? "collapsed" : "expanded",
+		"data-expand-on-hover": z && T ? "" : void 0,
+		className: a(n.sideNav, k),
 		children: [
-			E && /* @__PURE__ */ p("div", {
+			D && /* @__PURE__ */ m("div", {
 				className: n.header,
-				children: E
+				children: D
 			}),
-			/* @__PURE__ */ p("ul", {
+			/* @__PURE__ */ m("ul", {
 				className: n.list,
-				children: P.map((t, r) => /* @__PURE__ */ m("li", {
+				children: F.map((t, r) => /* @__PURE__ */ h("li", {
 					className: n.group,
-					children: [t.label && /* @__PURE__ */ p("h3", {
+					children: [t.label && /* @__PURE__ */ m("h3", {
 						className: n.groupLabel,
 						children: t.label
-					}), /* @__PURE__ */ p("ul", {
+					}), /* @__PURE__ */ m("ul", {
 						className: n.groupItems,
 						children: t.items.map((t, i) => {
 							let a = `${r}-${i}`;
 							if (t.items) {
-								if (R && !w) return /* @__PURE__ */ p("li", { children: /* @__PURE__ */ p(y, { item: t }) }, t.id ?? a);
-								let e = F.value.includes(t.label), r = `${M}-group-${a}`;
-								return /* @__PURE__ */ m("li", { children: [/* @__PURE__ */ m("button", {
+								if (z && !T) return /* @__PURE__ */ m("li", { children: /* @__PURE__ */ m(b, { item: t }) }, t.id ?? a);
+								let e = I.value.includes(t.label), r = `${N}-group-${a}`;
+								return /* @__PURE__ */ h("li", { children: [/* @__PURE__ */ h("button", {
 									type: "button",
 									"aria-expanded": e,
 									"aria-controls": r,
-									"aria-label": R ? t.label : void 0,
+									"aria-label": z ? t.label : void 0,
 									"data-state": e ? "open" : "closed",
 									className: n.groupTrigger,
-									onClick: () => I(t.label),
+									onClick: () => L(t.label),
 									children: [
-										t.icon ? /* @__PURE__ */ p("span", {
+										t.icon ? /* @__PURE__ */ m("span", {
 											className: n.icon,
 											"aria-hidden": "true",
 											children: t.icon
-										}) : R ? /* @__PURE__ */ p("span", {
+										}) : z ? /* @__PURE__ */ m("span", {
 											className: n.fallbackIcon,
 											"data-fallback-icon": !0,
 											"aria-hidden": "true",
-											children: v(t.label)
+											children: y(t.label)
 										}) : null,
-										/* @__PURE__ */ p("span", {
+										/* @__PURE__ */ m("span", {
 											className: n.label,
-											"data-rail-hidden": R || void 0,
+											"data-rail-hidden": z || void 0,
 											children: t.label
 										}),
-										/* @__PURE__ */ p("svg", {
+										/* @__PURE__ */ m("svg", {
 											viewBox: "0 0 16 16",
 											width: "12",
 											height: "12",
 											"aria-hidden": "true",
 											className: n.groupIndicator,
-											children: /* @__PURE__ */ p("path", {
+											children: /* @__PURE__ */ m("path", {
 												d: "M4 6l4 4 4-4",
 												fill: "none",
 												stroke: "currentColor",
@@ -216,47 +217,47 @@ function b({ items: t, groups: r, collapsed: o, defaultCollapsed: g = !1, onColl
 											})
 										})
 									]
-								}), /* @__PURE__ */ p("div", {
+								}), /* @__PURE__ */ m("div", {
 									id: r,
 									"data-state": e ? "open" : "closed",
 									className: n.sublist,
-									children: /* @__PURE__ */ p("ul", {
+									children: /* @__PURE__ */ m("ul", {
 										className: n.sublistInner,
-										children: t.items.map((e, t) => h(e) ? /* @__PURE__ */ p("li", { children: _(e, { inMenu: !1 }) }, t) : e.type === "separator" ? /* @__PURE__ */ p("li", {
+										children: t.items.map((e, t) => g(e) ? /* @__PURE__ */ m("li", { children: v(e, { inMenu: !1 }) }, t) : e.type === "separator" ? /* @__PURE__ */ m("li", {
 											role: "separator",
 											className: n.subSeparator
-										}, t) : /* @__PURE__ */ p("li", {
+										}, t) : /* @__PURE__ */ m("li", {
 											className: n.subGroupLabel,
 											children: e.label
 										}, t))
 									})
 								})] }, t.id ?? a);
 							}
-							let o = /* @__PURE__ */ m(f, { children: [
-								t.icon ? /* @__PURE__ */ p("span", {
+							let o = /* @__PURE__ */ h(p, { children: [
+								t.icon ? /* @__PURE__ */ m("span", {
 									className: n.icon,
 									"aria-hidden": "true",
 									children: t.icon
-								}) : R ? /* @__PURE__ */ p("span", {
+								}) : z ? /* @__PURE__ */ m("span", {
 									className: n.fallbackIcon,
 									"data-fallback-icon": !0,
 									"aria-hidden": "true",
-									children: v(t.label)
+									children: y(t.label)
 								}) : null,
-								/* @__PURE__ */ p("span", {
+								/* @__PURE__ */ m("span", {
 									className: n.label,
-									"data-rail-hidden": R || void 0,
+									"data-rail-hidden": z || void 0,
 									children: t.label
 								}),
-								t.trailing == null ? null : /* @__PURE__ */ p("span", {
+								t.trailing == null ? null : /* @__PURE__ */ m("span", {
 									className: n.trailing,
-									"data-rail-hidden": R || void 0,
+									"data-rail-hidden": z || void 0,
 									children: t.trailing
 								})
 							] }), c = t.tone && t.tone !== "default" ? t.tone : void 0, l = {
 								href: t.disabled ? void 0 : t.href,
 								"aria-current": t.active ? "page" : void 0,
-								"aria-label": R ? t.label : void 0,
+								"aria-label": z ? t.label : void 0,
 								"aria-disabled": t.disabled || void 0,
 								tabIndex: t.disabled ? -1 : void 0,
 								"data-state": t.active ? "active" : void 0,
@@ -270,29 +271,29 @@ function b({ items: t, groups: r, collapsed: o, defaultCollapsed: g = !1, onColl
 									t.onClick?.(e);
 								}
 							};
-							if (t.render) return /* @__PURE__ */ p("li", {
+							if (t.render) return /* @__PURE__ */ m("li", {
 								className: n.customItem,
 								children: t.render({
-									collapsed: R,
+									collapsed: z,
 									children: o,
 									linkProps: l
 								})
 							}, t.id ?? a);
-							let u = s(), d = t.onClick && !t.href ? /* @__PURE__ */ p("button", {
+							let u = s(), d = t.onClick && !t.href ? /* @__PURE__ */ m("button", {
 								type: "button",
 								"aria-current": t.active ? "page" : void 0,
-								"aria-label": R ? t.label : void 0,
+								"aria-label": z ? t.label : void 0,
 								"data-state": t.active ? "active" : void 0,
 								"data-tone": c,
 								className: n.link,
 								disabled: t.disabled,
 								onClick: (e) => t.onClick?.(e),
 								children: o
-							}) : /* @__PURE__ */ p(u, {
+							}) : /* @__PURE__ */ m(u, {
 								...l,
 								children: o
 							});
-							return /* @__PURE__ */ p("li", { children: R && !w ? /* @__PURE__ */ p(e, {
+							return /* @__PURE__ */ m("li", { children: z && !T ? /* @__PURE__ */ m(e, {
 								content: t.label,
 								placement: "right",
 								children: d
@@ -301,22 +302,22 @@ function b({ items: t, groups: r, collapsed: o, defaultCollapsed: g = !1, onColl
 					})]
 				}, r))
 			}),
-			D && /* @__PURE__ */ p("div", {
+			O && /* @__PURE__ */ m("div", {
 				className: n.footer,
-				children: D
+				children: O
 			}),
-			T && /* @__PURE__ */ p("button", {
+			E && /* @__PURE__ */ m("button", {
 				type: "button",
-				"aria-label": R ? j : A,
+				"aria-label": z ? M : j,
 				className: n.collapseToggle,
-				onClick: L,
-				children: /* @__PURE__ */ p("svg", {
+				onClick: R,
+				children: /* @__PURE__ */ m("svg", {
 					viewBox: "0 0 16 16",
 					width: "14",
 					height: "14",
 					"aria-hidden": "true",
 					className: n.collapseIcon,
-					children: /* @__PURE__ */ p("path", {
+					children: /* @__PURE__ */ m("path", {
 						d: "M10 4l-4 4 4 4",
 						fill: "none",
 						stroke: "currentColor",
@@ -330,4 +331,4 @@ function b({ items: t, groups: r, collapsed: o, defaultCollapsed: g = !1, onColl
 	});
 }
 //#endregion
-export { b as SideNav };
+export { x as SideNav };

package/dist/node/swap/swap.js

@@ -1,11 +1,12 @@
+"use client";
+
 import e from "./swap.module.js";
-import { useSignal as t, useSignals as n } from "@cascivo/core";
+import { useControllableSignal 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, onValueChange: c, onChange: l, mode: u = "rotate", className: d, ariaLabel: f, ...p }) {
 	n();
-	let m = t(s);
-	m.value = s;
+	let [m] = t({ value: s });
 	function h() {
 		let e = !m.value;
 		(c ?? l)?.(e);

package/dist/node/switcher/switcher.js

@@ -25,7 +25,7 @@ function c({ items: c, label: l, className: u }) {
 				"aria-hidden": "true",
 				children: t.icon
 			}), t.label]
-		}) }, t.href))
+		}) }, t.id ?? t.href))
 	});
 }
 //#endregion

package/dist/node/tabs/tabs.js

@@ -2,14 +2,15 @@
 
 import e from "./tabs.module.js";
 import { createContext as t, forwardRef as n, useId as r, useRef as i } from "react";
-import { Slot as a, cn as o, useSignal as s, useSignals as c } from "@cascivo/core";
+import { Slot as a, cn as o, useControllableSignal as s, useSignals as c } from "@cascivo/core";
 import { jsx as l } from "react/jsx-runtime";
 //#region ../components/src/tabs/tabs.tsx
 var u = t(null);
 function d({ defaultValue: t, value: n, onValueChange: i, className: a, children: c }) {
-	let d = r(), f = s(n ?? t ?? "");
-	n !== void 0 && (f.value = n);
-	let p = {
+	let d = r(), [f] = s({
+		value: n,
+		defaultValue: t ?? ""
+	}), p = {
 		active: f,
 		baseId: d,
 		setValue: (e) => {

package/dist/node/toc/toc.js

@@ -2,15 +2,16 @@
 
 import e from "./toc.module.js";
 import { useRef as t } from "react";
-import { cn as n, useSignal as r, useSignalEffect as i, useSignals as a } from "@cascivo/core";
+import { cn as n, useControllableSignal as r, useSignalEffect as i, useSignals as a } from "@cascivo/core";
 import { builtin as o, t as s } from "@cascivo/i18n";
 import { jsx as c } from "react/jsx-runtime";
 //#region ../components/src/toc/toc.tsx
 function l({ items: l, activeId: u, onActiveChange: d, labels: f, className: p }) {
 	a();
-	let m = u !== void 0, h = r(u ?? l[0]?.id ?? "");
-	m && (h.value = u);
-	let g = t(d);
+	let m = u !== void 0, [h] = r({
+		value: u,
+		defaultValue: l[0]?.id ?? ""
+	}), g = t(d);
 	return g.current = d, i(() => {
 		if (m || typeof document > "u" || typeof IntersectionObserver > "u") return;
 		let e = l.map((e) => document.getElementById(e.id)).filter((e) => e !== null);

package/dist/search/search.js

@@ -2,7 +2,7 @@
 
 import e from "./search.module.js";
 import { useRef as t } from "react";
-import { cn as n, focusElement as r, useId as i, useSignal as a, useSignalEffect as o, useSignals as s } from "@cascivo/core";
+import { cn as n, focusElement as r, useControllableSignal as i, useId as a, useSignalEffect 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/search/search.tsx
@@ -30,9 +30,10 @@ function f() {
 }
 function p({ value: p, defaultValue: m = "", onValueChange: h, onChange: g, onSearch: _, debounceMs: v = 300, placeholder: y, size: b = "md", label: x, disabled: S = !1, clearLabel: C, id: w, className: T }) {
 	s();
-	let E = y ?? l(c.search.placeholder), D = x ?? l(c.search.label), O = C ?? l(c.search.clear), k = t(null), A = i("cascade-search"), j = w ?? A, M = p !== void 0, N = a(M ? p : m);
-	M && (N.value = p);
-	let P = t(_);
+	let E = y ?? l(c.search.placeholder), D = x ?? l(c.search.label), O = C ?? l(c.search.clear), k = t(null), A = a("cascade-search"), j = w ?? A, M = p !== void 0, [N] = i({
+		value: p,
+		defaultValue: m
+	}), P = t(_);
 	P.current = _;
 	let F = t(null), I = () => {
 		F.current !== null && (clearTimeout(F.current), F.current = null);