@cascivo/react 0.16.0 → 0.17.0

package/dist/node/card/card.module.js

@@ -1,12 +1,12 @@
 var e = {
-	card: "_card_ssezx_2",
-	header: "_header_ssezx_12",
-	content: "_content_ssezx_12",
-	footer: "_footer_ssezx_12",
-	headerRow: "_headerRow_ssezx_67",
-	headerMain: "_headerMain_ssezx_75",
-	headerActions: "_headerActions_ssezx_82",
-	title: "_title_ssezx_90"
+	card: "_card_ipz9f_2",
+	header: "_header_ipz9f_19",
+	content: "_content_ipz9f_19",
+	footer: "_footer_ipz9f_19",
+	headerRow: "_headerRow_ipz9f_74",
+	headerMain: "_headerMain_ipz9f_82",
+	headerActions: "_headerActions_ipz9f_89",
+	title: "_title_ipz9f_97"
 };
 //#endregion
 export { e as default };

package/dist/node/checkbox/checkbox.module.js

@@ -1,8 +1,8 @@
 var e = {
-	wrapper: "_wrapper_tw120_2",
-	input: "_input_tw120_15",
-	control: "_control_tw120_28",
-	label: "_label_tw120_72"
+	wrapper: "_wrapper_4zlmw_2",
+	input: "_input_4zlmw_15",
+	control: "_control_4zlmw_28",
+	label: "_label_4zlmw_78"
 };
 //#endregion
 export { e as default };

package/dist/node/combobox/combobox.js

@@ -2,45 +2,46 @@
 
 import e from "./combobox.module.js";
 import { useId as t, useRef as n } from "react";
-import { cn as r, createMachine as i, focusElement as a, useMachine as o, useSignal as s, useSignalEffect as c, useSignals as l } from "@cascivo/core";
-import { builtin as u, t as d } from "@cascivo/i18n";
-import { jsx as f, jsxs as p } from "react/jsx-runtime";
+import { cn as r, createMachine as i, focusElement as a, useControllableSignal as o, useMachine as s, useSignal as c, useSignalEffect as l, useSignals as u } from "@cascivo/core";
+import { builtin as d, t as f } from "@cascivo/i18n";
+import { jsx as p, jsxs as m } from "react/jsx-runtime";
 //#region ../components/src/combobox/combobox.tsx
-var m = i({
+var h = i({
 	initial: "closed",
 	states: {
 		closed: { on: { OPEN: "open" } },
 		open: { on: { CLOSE: "closed" } }
 	}
 });
-function h({ options: i, value: h, defaultValue: g, onValueChange: _, onChange: v, clearable: y = !1, searchable: b = !0, label: x, hint: S, error: C, size: w = "md", disabled: T = !1, labels: E, className: D, id: O }) {
-	l();
-	let [k, A] = o(m), j = t(), M = O ?? `cascade-combobox-${j}`, N = `${j}-listbox`, P = n(null), F = E?.placeholder ?? d(u.combobox.placeholder), I = E?.empty ?? d(u.combobox.empty), L = E?.clear ?? d(u.combobox.clear), R = E?.search ?? d(u.combobox.search), z = s(h ?? g);
-	h !== void 0 && (z.value = h);
-	let B = s(""), V = s(0), H = k.value === "open", U = i.filter((e) => !b || !B.value ? !0 : e.label.toLowerCase().includes(B.value.toLowerCase())), W = i.find((e) => e.value === z.value);
-	c(() => {
+function g({ options: i, value: g, defaultValue: _, onValueChange: v, onChange: y, clearable: b = !1, searchable: x = !0, label: S, hint: C, error: w, size: T = "md", disabled: E = !1, labels: D, className: O, id: k }) {
+	u();
+	let [A, j] = s(h), M = t(), N = k ?? `cascade-combobox-${M}`, P = `${M}-listbox`, F = n(null), ee = D?.placeholder ?? f(d.combobox.placeholder), I = D?.empty ?? f(d.combobox.empty), L = D?.clear ?? f(d.combobox.clear), R = D?.search ?? f(d.combobox.search), [z] = o({
+		value: g,
+		defaultValue: _
+	}), B = c(""), V = c(0), H = A.value === "open", U = i.filter((e) => !x || !B.value ? !0 : e.label.toLowerCase().includes(B.value.toLowerCase())), W = i.find((e) => e.value === z.value);
+	l(() => {
 		if (!H) return;
 		let e = (e) => {
-			let t = document.getElementById(`${j}-root`);
-			t && !t.contains(e.target) && A("CLOSE");
+			let t = document.getElementById(`${M}-root`);
+			t && !t.contains(e.target) && j("CLOSE");
 		};
 		return document.addEventListener("mousedown", e), () => document.removeEventListener("mousedown", e);
 	});
 	let G = () => {
-		T || (B.value = "", V.value = 0, A("OPEN"), setTimeout(() => a(P.current), 0));
+		E || (B.value = "", V.value = 0, j("OPEN"), setTimeout(() => a(F.current), 0));
 	}, K = () => {
-		A("CLOSE"), B.value = "";
-	}, q = _ ?? v, J = (e) => {
-		h === void 0 && (z.value = e), q?.(e), K();
+		j("CLOSE"), B.value = "";
+	}, q = v ?? y, J = (e) => {
+		g === void 0 && (z.value = e), q?.(e), K();
 	}, Y = () => {
-		h === void 0 && (z.value = void 0), q?.(void 0);
+		g === void 0 && (z.value = void 0), q?.(void 0);
 	}, X = U.flatMap((e, t) => e.disabled ? [] : [t]), Z = (e) => {
 		if (X.length === 0) return;
 		let t = X[(X.indexOf(V.value) + e + X.length) % X.length];
 		t !== void 0 && (V.value = t);
 	}, Q = (e) => {
 		(e.key === "Enter" || e.key === " " || e.key === "ArrowDown") && (e.preventDefault(), G());
-	}, ee = (e) => {
+	}, te = (e) => {
 		switch (e.key) {
 			case "ArrowDown":
 				e.preventDefault(), Z(1);
@@ -61,42 +62,42 @@ function h({ options: i, value: h, defaultValue: g, onValueChange: _, onChange:
 				K();
 				break;
 		}
-	}, $ = (e) => `${j}-option-${e}`;
-	return /* @__PURE__ */ p("div", {
-		id: `${j}-root`,
-		className: r(e.wrapper, D),
-		"data-state": C ? "error" : k.value,
-		"data-size": w,
+	}, $ = (e) => `${M}-option-${e}`;
+	return /* @__PURE__ */ m("div", {
+		id: `${M}-root`,
+		className: r(e.wrapper, O),
+		"data-state": w ? "error" : A.value,
+		"data-size": T,
 		children: [
-			x && /* @__PURE__ */ f("label", {
+			S && /* @__PURE__ */ p("label", {
 				className: e.label,
-				htmlFor: M,
-				children: x
+				htmlFor: N,
+				children: S
 			}),
-			/* @__PURE__ */ p("div", {
+			/* @__PURE__ */ m("div", {
 				className: e.field,
-				children: [/* @__PURE__ */ p("button", {
-					id: M,
+				children: [/* @__PURE__ */ m("button", {
+					id: N,
 					type: "button",
 					role: "combobox",
 					"aria-expanded": H,
-					"aria-controls": N,
+					"aria-controls": P,
 					"aria-haspopup": "listbox",
 					"aria-activedescendant": H && V.value >= 0 ? $(V.value) : void 0,
-					"aria-invalid": C ? !0 : void 0,
-					"aria-describedby": C ? `${j}-error` : S ? `${j}-hint` : void 0,
+					"aria-invalid": w ? !0 : void 0,
+					"aria-describedby": w ? `${M}-error` : C ? `${M}-hint` : void 0,
 					className: e.trigger,
-					disabled: T,
+					disabled: E,
 					onKeyDown: Q,
 					onClick: H ? K : G,
-					children: [/* @__PURE__ */ f("span", {
+					children: [/* @__PURE__ */ p("span", {
 						className: r(e.value, W ? void 0 : e.placeholder),
-						children: W?.label ?? F
-					}), /* @__PURE__ */ f("span", {
+						children: W?.label ?? ee
+					}), /* @__PURE__ */ p("span", {
 						className: e.chevron,
 						"aria-hidden": "true"
 					})]
-				}), y && z.value !== void 0 && /* @__PURE__ */ f("button", {
+				}), b && z.value !== void 0 && /* @__PURE__ */ p("button", {
 					type: "button",
 					className: e.clear,
 					"aria-label": L,
@@ -106,30 +107,30 @@ function h({ options: i, value: h, defaultValue: g, onValueChange: _, onChange:
 					children: "✕"
 				})]
 			}),
-			/* @__PURE__ */ p("div", {
+			/* @__PURE__ */ m("div", {
 				role: "listbox",
-				id: N,
+				id: P,
 				className: e.listbox,
 				"data-state": H ? "open" : "closed",
-				"aria-label": x,
-				children: [b && H && /* @__PURE__ */ f("div", {
+				"aria-label": S,
+				children: [x && H && /* @__PURE__ */ p("div", {
 					className: e.searchWrapper,
-					children: /* @__PURE__ */ f("input", {
-						ref: P,
+					children: /* @__PURE__ */ p("input", {
+						ref: F,
 						type: "text",
 						className: e.search,
 						value: B.value,
 						onChange: (e) => {
 							B.value = e.target.value, V.value = 0;
 						},
-						onKeyDown: ee,
+						onKeyDown: te,
 						"aria-label": R,
 						autoComplete: "off"
 					})
-				}), U.length === 0 ? /* @__PURE__ */ f("div", {
+				}), U.length === 0 ? /* @__PURE__ */ p("div", {
 					className: e.empty,
 					children: I
-				}) : U.map((t, n) => /* @__PURE__ */ f("div", {
+				}) : U.map((t, n) => /* @__PURE__ */ p("div", {
 					id: $(n),
 					role: "option",
 					"aria-selected": t.value === z.value,
@@ -146,19 +147,19 @@ function h({ options: i, value: h, defaultValue: g, onValueChange: _, onChange:
 					children: t.label
 				}, t.value))]
 			}),
-			C && /* @__PURE__ */ f("span", {
-				id: `${j}-error`,
+			w && /* @__PURE__ */ p("span", {
+				id: `${M}-error`,
 				className: e.error,
 				role: "alert",
-				children: C
+				children: w
 			}),
-			!C && S && /* @__PURE__ */ f("span", {
-				id: `${j}-hint`,
+			!w && C && /* @__PURE__ */ p("span", {
+				id: `${M}-hint`,
 				className: e.hint,
-				children: S
+				children: C
 			})
 		]
 	});
 }
 //#endregion
-export { h as Combobox };
+export { g as Combobox };

package/dist/node/context-menu/context-menu.js

@@ -1,89 +1,93 @@
 "use client";
 
 import e from "./context-menu.module.js";
-import { useRef as t } from "react";
-import { useSignal as n, useSignalEffect as r, useSignals as i } from "@cascivo/core";
-import { jsx as a, jsxs as o } from "react/jsx-runtime";
+import { Children as t, isValidElement as n, useRef as r } from "react";
+import { useSignal as i, useSignalEffect as a, useSignals as o } from "@cascivo/core";
+import { jsx as s, jsxs as c } from "react/jsx-runtime";
 //#region ../components/src/context-menu/context-menu.tsx
-function s({ children: s }) {
-	i();
-	let c = t(null), l = t(null), u = n(!1), d = () => {
-		let e = c.current;
+function l() {
+	return globalThis.process?.env?.NODE_ENV !== "production";
+}
+function u({ children: u }) {
+	o();
+	let f = r(null), p = r(null), m = i(!1), h = () => {
+		let e = f.current;
 		return e ? Array.from(e.querySelectorAll("[role=\"menuitem\"]:not([aria-disabled=\"true\"])")) : [];
-	}, f = (e) => {
-		let t = d();
+	}, g = (e) => {
+		let t = h();
 		t.length !== 0 && t[e(t, t.indexOf(document.activeElement))]?.focus();
-	}, p = (e) => {
+	}, _ = (e) => {
 		switch (e.key) {
 			case "ArrowDown":
-				e.preventDefault(), f((e, t) => t < 0 ? 0 : (t + 1) % e.length);
+				e.preventDefault(), g((e, t) => t < 0 ? 0 : (t + 1) % e.length);
 				break;
 			case "ArrowUp":
-				e.preventDefault(), f((e, t) => t < 0 ? e.length - 1 : (t - 1 + e.length) % e.length);
+				e.preventDefault(), g((e, t) => t < 0 ? e.length - 1 : (t - 1 + e.length) % e.length);
 				break;
 			case "Home":
-				e.preventDefault(), f(() => 0);
+				e.preventDefault(), g(() => 0);
 				break;
 			case "End":
-				e.preventDefault(), f((e) => e.length - 1);
+				e.preventDefault(), g((e) => e.length - 1);
 				break;
 		}
 	};
-	r(() => {
-		let e = c.current;
-		if (e) if (u.value) {
+	a(() => {
+		let e = f.current;
+		if (e) if (m.value) {
 			try {
 				e.showPopover();
 			} catch {}
-			d()[0]?.focus();
+			h()[0]?.focus();
 		} else try {
 			e.hidePopover();
 		} catch {}
-	}), r(() => {
-		let e = c.current;
+	}), a(() => {
+		let e = f.current;
 		if (!e) return;
 		let t = (e) => {
-			e.newState === "closed" && (u.value = !1);
+			e.newState === "closed" && (m.value = !1);
 		};
 		return e.addEventListener("toggle", t), () => e.removeEventListener("toggle", t);
 	});
-	function m(e) {
+	function v(e) {
 		e.preventDefault();
-		let t = l.current;
-		t && (t.style.setProperty("--cascivo-context-x", `${e.clientX}px`), t.style.setProperty("--cascivo-context-y", `${e.clientY}px`), u.value = !0);
+		let t = p.current;
+		t && (t.style.setProperty("--cascivo-context-x", `${e.clientX}px`), t.style.setProperty("--cascivo-context-y", `${e.clientY}px`), m.value = !0);
 	}
-	let [h, ...g] = Array.isArray(s) ? s : [s];
-	return /* @__PURE__ */ o("div", {
-		ref: l,
-		onContextMenu: m,
+	let y = t.toArray(u), b = y.filter((e) => n(e) && e.type === d), x = y.filter((e) => !b.includes(e));
+	if (b.length === 0 && l()) throw Error("<ContextMenu> requires at least one <ContextMenuItem> child. Items are matched by component identity, so they must be direct children — not wrapped in a fragment or another component.");
+	return /* @__PURE__ */ c("div", {
+		ref: p,
+		onContextMenu: v,
 		className: e.wrapper,
-		children: [h, /* @__PURE__ */ a("div", {
-			ref: c,
+		children: [x, /* @__PURE__ */ s("div", {
+			ref: f,
 			popover: "auto",
 			role: "menu",
-			"data-state": u.value ? "open" : "closed",
+			"data-state": m.value ? "open" : "closed",
 			className: e.menu,
-			onKeyDown: p,
-			children: g
+			onKeyDown: _,
+			children: b
 		})]
 	});
 }
-function c({ children: t, onSelect: n, disabled: r }) {
+function d({ children: t, onSelect: n, disabled: r }) {
 	function i() {
 		r || n();
 	}
-	function o(e) {
+	function a(e) {
 		(e.key === "Enter" || e.key === " ") && (e.preventDefault(), i());
 	}
-	return /* @__PURE__ */ a("div", {
+	return /* @__PURE__ */ s("div", {
 		role: "menuitem",
 		tabIndex: r ? -1 : 0,
 		"aria-disabled": r,
 		onClick: i,
-		onKeyDown: o,
+		onKeyDown: a,
 		className: e.item,
 		children: t
 	});
 }
 //#endregion
-export { s as ContextMenu, c as ContextMenuItem };
+export { u as ContextMenu, d as ContextMenuItem };