@cascivo/react 0.13.0 → 0.13.1

package/dist/node/multi-select/multi-select.js

@@ -2,98 +2,98 @@
 
 import { usePopover as e } from "../popover/use-popover.js";
 import t from "./multi-select.module.js";
-import { cn as n, useComputed as r, useSignal as i, useSignalEffect 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";
-import { useRef as d } from "react";
+import { cn as n, focusElement as r, useComputed as i, useSignal as a, useSignalEffect as o, useSignals as s } from "@cascivo/core";
+import { useRef as c } from "react";
+import { builtin as l, t as u } from "@cascivo/i18n";
+import { jsx as d, jsxs as f } from "react/jsx-runtime";
 //#region ../components/src/multi-select/multi-select.tsx
-function f({ options: f, value: p, onValueChange: m, placeholder: h, disabled: g = !1, labels: _, className: v, ...y }) {
-	o();
-	let b = e({ placement: "bottom" }), x = i(""), S = i(-1), C = d(null), w = d(null), T = r(() => {
-		let e = x.value.toLowerCase();
-		return e ? f.filter((t) => t.label.toLowerCase().includes(e)) : f;
+function p({ options: p, value: m, onValueChange: h, placeholder: g, disabled: _ = !1, labels: v, className: y, ...b }) {
+	s();
+	let x = e({ placement: "bottom" }), S = a(""), C = a(-1), w = c(null), T = c(null), E = i(() => {
+		let e = S.value.toLowerCase();
+		return e ? p.filter((t) => t.label.toLowerCase().includes(e)) : p;
 	});
-	a(() => {
-		b.isOpen.value ? (S.value = -1, setTimeout(() => w.current?.focus(), 0)) : x.value = "";
-	}), a(() => {
-		let e = C.current;
-		if (!e || !b.isOpen.value) return;
+	o(() => {
+		x.isOpen.value ? (C.value = -1, setTimeout(() => r(T.current), 0)) : S.value = "";
+	}), o(() => {
+		let e = w.current;
+		if (!e || !x.isOpen.value) return;
 		let t = (e) => {
-			let t = T.value;
-			if (e.key === "ArrowDown") e.preventDefault(), S.value = Math.min(S.value + 1, t.length - 1);
-			else if (e.key === "ArrowUp") e.preventDefault(), S.value = Math.max(S.value - 1, -1);
+			let t = E.value;
+			if (e.key === "ArrowDown") e.preventDefault(), C.value = Math.min(C.value + 1, t.length - 1);
+			else if (e.key === "ArrowUp") e.preventDefault(), C.value = Math.max(C.value - 1, -1);
 			else if (e.key === " " || e.key === "Enter") {
-				let n = t[S.value];
-				n && !n.disabled && (e.preventDefault(), E(n.value));
-			} else e.key === "Escape" && b.close();
+				let n = t[C.value];
+				n && !n.disabled && (e.preventDefault(), D(n.value));
+			} else e.key === "Escape" && x.close();
 		};
 		return e.addEventListener("keydown", t), () => e.removeEventListener("keydown", t);
 	});
-	function E(e) {
-		p.includes(e) ? m(p.filter((t) => t !== e)) : m([...p, e]);
+	function D(e) {
+		m.includes(e) ? h(m.filter((t) => t !== e)) : h([...m, e]);
 	}
-	let D = p.length === 0 ? h ?? _?.placeholder ?? c(s.multiSelect.placeholder) : _?.selected ? _.selected(p.length) : c(s.multiSelect.selected, { count: String(p.length) }), O = _?.search ?? c(s.multiSelect.search), k = _?.noResults ?? c(s.multiSelect.noResults);
-	return /* @__PURE__ */ u("div", {
-		className: n(t.wrapper, v),
-		...y,
-		children: [/* @__PURE__ */ u("button", {
-			ref: b.triggerRef,
+	let O = m.length === 0 ? g ?? v?.placeholder ?? u(l.multiSelect.placeholder) : v?.selected ? v.selected(m.length) : u(l.multiSelect.selected, { count: String(m.length) }), k = v?.search ?? u(l.multiSelect.search), A = v?.noResults ?? u(l.multiSelect.noResults);
+	return /* @__PURE__ */ f("div", {
+		className: n(t.wrapper, y),
+		...b,
+		children: [/* @__PURE__ */ f("button", {
+			ref: x.triggerRef,
 			type: "button",
 			className: t.trigger,
 			"aria-haspopup": "listbox",
-			"aria-expanded": b.isOpen.value,
-			disabled: g,
-			style: { anchorName: b.anchorName },
-			onClick: () => b.toggle(),
-			children: [/* @__PURE__ */ l("span", {
+			"aria-expanded": x.isOpen.value,
+			disabled: _,
+			style: { anchorName: x.anchorName },
+			onClick: () => x.toggle(),
+			children: [/* @__PURE__ */ d("span", {
 				className: t["trigger-label"],
-				children: D
-			}), /* @__PURE__ */ l("span", {
+				children: O
+			}), /* @__PURE__ */ d("span", {
 				className: t.chevron,
 				"aria-hidden": "true"
 			})]
-		}), /* @__PURE__ */ u("div", {
-			ref: b.popoverRef,
+		}), /* @__PURE__ */ f("div", {
+			ref: x.popoverRef,
 			popover: "auto",
 			className: t.panel,
-			style: { positionAnchor: b.anchorName },
+			style: { positionAnchor: x.anchorName },
 			tabIndex: -1,
-			children: [/* @__PURE__ */ l("div", {
+			children: [/* @__PURE__ */ d("div", {
 				className: t["search-row"],
-				children: /* @__PURE__ */ l("input", {
-					ref: w,
+				children: /* @__PURE__ */ d("input", {
+					ref: T,
 					type: "search",
 					className: t.search,
-					placeholder: O,
-					value: x.value,
+					placeholder: k,
+					value: S.value,
 					onChange: (e) => {
-						x.value = e.currentTarget.value, S.value = -1;
+						S.value = e.currentTarget.value, C.value = -1;
 					}
 				})
-			}), /* @__PURE__ */ l("div", {
-				ref: C,
+			}), /* @__PURE__ */ d("div", {
+				ref: w,
 				role: "listbox",
 				"aria-multiselectable": "true",
-				"aria-label": _?.label ?? c(s.multiSelect.label),
+				"aria-label": v?.label ?? u(l.multiSelect.label),
 				className: t.options,
-				children: T.value.length === 0 ? /* @__PURE__ */ l("div", {
+				children: E.value.length === 0 ? /* @__PURE__ */ d("div", {
 					className: t["no-results"],
-					children: k
-				}) : T.value.map((e, n) => /* @__PURE__ */ u("div", {
+					children: A
+				}) : E.value.map((e, n) => /* @__PURE__ */ f("div", {
 					role: "option",
-					"aria-selected": p.includes(e.value),
+					"aria-selected": m.includes(e.value),
 					"aria-disabled": e.disabled,
-					"data-active": n === S.value ? "" : void 0,
-					"data-selected": p.includes(e.value) ? "" : void 0,
+					"data-active": n === C.value ? "" : void 0,
+					"data-selected": m.includes(e.value) ? "" : void 0,
 					"data-disabled": e.disabled ? "" : void 0,
 					className: t.option,
 					onMouseDown: (t) => {
-						t.preventDefault(), e.disabled || E(e.value);
+						t.preventDefault(), e.disabled || D(e.value);
 					},
 					onMouseEnter: () => {
-						S.value = n;
+						C.value = n;
 					},
-					children: [/* @__PURE__ */ l("span", {
+					children: [/* @__PURE__ */ d("span", {
 						className: t.checkbox,
 						"aria-hidden": "true"
 					}), e.label]
@@ -103,4 +103,4 @@ function f({ options: f, value: p, onValueChange: m, placeholder: h, disabled: g
 	});
 }
 //#endregion
-export { f as MultiSelect };
+export { p as MultiSelect };

package/dist/node/multi-select/multi-select.module.js

@@ -1,17 +1,17 @@
 "use client";
 
 var e = {
-	wrapper: "_wrapper_1r5fv_2",
-	trigger: "_trigger_1r5fv_12",
-	"trigger-label": "_trigger-label_1r5fv_51",
-	chevron: "_chevron_1r5fv_63",
-	panel: "_panel_1r5fv_83",
-	"search-row": "_search-row_1r5fv_121",
-	search: "_search_1r5fv_121",
-	options: "_options_1r5fv_142",
-	option: "_option_1r5fv_142",
-	checkbox: "_checkbox_1r5fv_170",
-	"no-results": "_no-results_1r5fv_185"
+	wrapper: "_wrapper_1fi6e_2",
+	trigger: "_trigger_1fi6e_12",
+	"trigger-label": "_trigger-label_1fi6e_51",
+	chevron: "_chevron_1fi6e_63",
+	panel: "_panel_1fi6e_83",
+	"search-row": "_search-row_1fi6e_128",
+	search: "_search_1fi6e_128",
+	options: "_options_1fi6e_149",
+	option: "_option_1fi6e_149",
+	checkbox: "_checkbox_1fi6e_177",
+	"no-results": "_no-results_1fi6e_192"
 };
 //#endregion
 export { e as default };

package/dist/node/native-select/native-select.js

@@ -2,36 +2,38 @@
 
 import e from "./native-select.module.js";
 import { cn as t } from "@cascivo/core";
-import { jsx as n, jsxs as r } from "react/jsx-runtime";
+import { forwardRef as n } from "react";
+import { jsx as r, jsxs as i } from "react/jsx-runtime";
 //#region ../components/src/native-select/native-select.tsx
-function i({ options: i, children: a, size: o = "md", invalid: s, disabled: c, placeholder: l, value: u, defaultValue: d, className: f, ...p }) {
-	let m = u !== void 0, h = l !== void 0;
-	return /* @__PURE__ */ r("div", {
+var a = n(function({ options: n, children: a, size: o = "md", invalid: s, disabled: c, placeholder: l, value: u, defaultValue: d, className: f, ...p }, m) {
+	let h = u !== void 0, g = l !== void 0;
+	return /* @__PURE__ */ i("div", {
 		className: t(e.root, f),
 		"data-size": o,
 		"data-invalid": s || void 0,
-		children: [/* @__PURE__ */ r("select", {
+		children: [/* @__PURE__ */ i("select", {
+			ref: m,
 			className: e.select,
 			disabled: c,
 			"aria-invalid": s || void 0,
 			value: u,
-			defaultValue: !m && h ? d ?? "" : d,
+			defaultValue: !h && g ? d ?? "" : d,
 			...p,
-			children: [h && /* @__PURE__ */ n("option", {
+			children: [g && /* @__PURE__ */ r("option", {
 				value: "",
 				disabled: !0,
 				hidden: !0,
 				children: l
-			}), i ? i.map((e) => /* @__PURE__ */ n("option", {
+			}), n ? n.map((e) => /* @__PURE__ */ r("option", {
 				value: e.value,
 				disabled: e.disabled,
 				children: e.label
 			}, e.value)) : a]
-		}), /* @__PURE__ */ n("span", {
+		}), /* @__PURE__ */ r("span", {
 			className: e.chevron,
 			"aria-hidden": "true"
 		})]
 	});
-}
+});
 //#endregion
-export { i as NativeSelect };
+export { a as NativeSelect };

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

@@ -1,92 +1,92 @@
 "use client";
 
 import e from "./navigation-menu.module.js";
-import { DismissableLayer as t, Presence as n, cn as r, getLinkComponent as i, useAnchorPosition as a, useRovingFocus as o, useSignal as s, useSignals as c } from "@cascivo/core";
-import { jsx as l, jsxs as u } from "react/jsx-runtime";
-import { useId as d, useRef as f } from "react";
+import { DismissableLayer as t, Presence as n, cn as r, focusElement as i, getLinkComponent as a, useAnchorPosition as o, useRovingFocus as s, useSignal as c, useSignals as l } from "@cascivo/core";
+import { useId as u, useRef as d } from "react";
+import { jsx as f, jsxs as p } from "react/jsx-runtime";
 //#region ../components/src/navigation-menu/navigation-menu.tsx
-function p({ items: t, "aria-label": n, orientation: i = "horizontal", className: a }) {
-	c();
-	let u = d(), f = s(null), p = o({
+function m({ items: t, "aria-label": n, orientation: i = "horizontal", className: a }) {
+	l();
+	let o = u(), d = c(null), p = s({
 		orientation: i,
 		loop: !0
 	});
-	return /* @__PURE__ */ l("nav", {
+	return /* @__PURE__ */ f("nav", {
 		"aria-label": n,
 		className: r(e.nav, a),
 		"data-orientation": i,
-		children: /* @__PURE__ */ l("ul", {
+		children: /* @__PURE__ */ f("ul", {
 			role: "list",
 			className: e.list,
-			children: t.map((e, t) => /* @__PURE__ */ l(m, {
+			children: t.map((e, t) => /* @__PURE__ */ f(h, {
 				item: e,
-				baseId: u,
-				openId: f,
+				baseId: o,
+				openId: d,
 				itemProps: p.getItemProps(t)
 			}, e.id))
 		})
 	});
 }
-function m({ item: t, baseId: r, openId: o, itemProps: s }) {
-	c();
-	let d = f(null), p = f(null), m = t.content != null, g = o.value === t.id, _ = `${r}-panel-${t.id}`, { anchorStyle: v, floatingStyle: y } = a({
-		anchorRef: d,
-		floatingRef: p,
+function h({ item: t, baseId: r, openId: s, itemProps: c }) {
+	l();
+	let u = d(null), m = d(null), h = t.content != null, _ = s.value === t.id, v = `${r}-panel-${t.id}`, { anchorStyle: y, floatingStyle: b } = o({
+		anchorRef: u,
+		floatingRef: m,
 		placement: "bottom-start",
-		enabled: g
-	}), { ref: b, onKeyDown: x, ...S } = s;
-	if (!m) {
-		let n = i();
-		return /* @__PURE__ */ l("li", {
+		enabled: _
+	}), { ref: x, onKeyDown: S, ...C } = c;
+	if (!h) {
+		let n = a();
+		return /* @__PURE__ */ f("li", {
 			className: e.item,
-			children: /* @__PURE__ */ l(n, {
-				ref: (e) => b(e),
+			children: /* @__PURE__ */ f(n, {
+				ref: (e) => x(e),
 				href: t.href,
 				className: e.link,
-				onKeyDown: x,
-				...S,
+				onKeyDown: S,
+				...C,
 				children: t.label
 			})
 		});
 	}
-	return /* @__PURE__ */ u("li", {
+	return /* @__PURE__ */ p("li", {
 		className: e.item,
-		children: [/* @__PURE__ */ l("button", {
+		children: [/* @__PURE__ */ f("button", {
 			ref: (e) => {
-				d.current = e, b(e);
+				u.current = e, x(e);
 			},
 			type: "button",
-			"aria-expanded": g,
-			"aria-controls": _,
-			"data-state": g ? "open" : "closed",
+			"aria-expanded": _,
+			"aria-controls": v,
+			"data-state": _ ? "open" : "closed",
 			className: e.trigger,
-			style: v,
+			style: y,
 			onClick: () => {
-				o.value = g ? null : t.id;
+				s.value = _ ? null : t.id;
 			},
 			onKeyDown: (e) => {
-				x(e), !e.defaultPrevented && e.key === "Escape" && (o.value = null);
+				S(e), !e.defaultPrevented && e.key === "Escape" && (s.value = null);
 			},
-			...S,
+			...C,
 			children: t.label
-		}), /* @__PURE__ */ l(n, {
-			present: g,
-			children: /* @__PURE__ */ l(h, {
-				panelId: _,
-				floatingRef: p,
-				floatingStyle: y,
+		}), /* @__PURE__ */ f(n, {
+			present: _,
+			children: /* @__PURE__ */ f(g, {
+				panelId: v,
+				floatingRef: m,
+				floatingStyle: b,
 				onClose: () => {
-					o.value = null, d.current?.focus();
+					s.value = null, i(u.current);
 				},
 				children: t.content
 			})
 		})]
 	});
 }
-function h({ panelId: n, floatingRef: r, floatingStyle: i, onClose: a, children: o }) {
-	return /* @__PURE__ */ l(t, {
+function g({ panelId: n, floatingRef: r, floatingStyle: i, onClose: a, children: o }) {
+	return /* @__PURE__ */ f(t, {
 		onDismiss: a,
-		children: /* @__PURE__ */ l("div", {
+		children: /* @__PURE__ */ f("div", {
 			ref: r,
 			id: n,
 			className: e.panel,
@@ -96,4 +96,4 @@ function h({ panelId: n, floatingRef: r, floatingStyle: i, onClose: a, children:
 	});
 }
 //#endregion
-export { p as NavigationMenu };
+export { m as NavigationMenu };

package/dist/node/notification/notification.js

@@ -2,9 +2,9 @@
 
 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 { builtin as o, t as s } from "@cascivo/i18n";
-import { jsx as c, jsxs as l } from "react/jsx-runtime";
-import { useRef as u } from "react";
+import { useRef as o } from "react";
+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
 var d = {
 	neutral: "neutral",
@@ -14,73 +14,73 @@ var d = {
 	danger: "error"
 }, f = new Set(["warning", "error"]), p = 160;
 function m({ variant: e }) {
-	return e === "success" ? /* @__PURE__ */ l("svg", {
+	return e === "success" ? /* @__PURE__ */ u("svg", {
 		viewBox: "0 0 20 20",
 		width: "20",
 		height: "20",
 		fill: "none",
 		"aria-hidden": "true",
-		children: [/* @__PURE__ */ c("circle", {
+		children: [/* @__PURE__ */ l("circle", {
 			cx: "10",
 			cy: "10",
 			r: "8",
 			stroke: "currentColor",
 			strokeWidth: "1.5"
-		}), /* @__PURE__ */ c("path", {
+		}), /* @__PURE__ */ l("path", {
 			d: "M6.5 10.5l2.5 2.5 4.5-5",
 			stroke: "currentColor",
 			strokeWidth: "1.5",
 			strokeLinecap: "round",
 			strokeLinejoin: "round"
 		})]
-	}) : e === "warning" ? /* @__PURE__ */ l("svg", {
+	}) : e === "warning" ? /* @__PURE__ */ u("svg", {
 		viewBox: "0 0 20 20",
 		width: "20",
 		height: "20",
 		fill: "none",
 		"aria-hidden": "true",
-		children: [/* @__PURE__ */ c("path", {
+		children: [/* @__PURE__ */ l("path", {
 			d: "M10 2.5L18.5 17H1.5L10 2.5z",
 			stroke: "currentColor",
 			strokeWidth: "1.5",
 			strokeLinejoin: "round"
-		}), /* @__PURE__ */ c("path", {
+		}), /* @__PURE__ */ l("path", {
 			d: "M10 8v3.5M10 14h.01",
 			stroke: "currentColor",
 			strokeWidth: "1.5",
 			strokeLinecap: "round"
 		})]
-	}) : e === "error" ? /* @__PURE__ */ l("svg", {
+	}) : e === "error" ? /* @__PURE__ */ u("svg", {
 		viewBox: "0 0 20 20",
 		width: "20",
 		height: "20",
 		fill: "none",
 		"aria-hidden": "true",
-		children: [/* @__PURE__ */ c("circle", {
+		children: [/* @__PURE__ */ l("circle", {
 			cx: "10",
 			cy: "10",
 			r: "8",
 			stroke: "currentColor",
 			strokeWidth: "1.5"
-		}), /* @__PURE__ */ c("path", {
+		}), /* @__PURE__ */ l("path", {
 			d: "M10 6v4.5M10 13.5h.01",
 			stroke: "currentColor",
 			strokeWidth: "1.5",
 			strokeLinecap: "round"
 		})]
-	}) : /* @__PURE__ */ l("svg", {
+	}) : /* @__PURE__ */ u("svg", {
 		viewBox: "0 0 20 20",
 		width: "20",
 		height: "20",
 		fill: "none",
 		"aria-hidden": "true",
-		children: [/* @__PURE__ */ c("circle", {
+		children: [/* @__PURE__ */ l("circle", {
 			cx: "10",
 			cy: "10",
 			r: "8",
 			stroke: "currentColor",
 			strokeWidth: "1.5"
-		}), /* @__PURE__ */ c("path", {
+		}), /* @__PURE__ */ l("path", {
 			d: "M10 9v5M10 6.5h.01",
 			stroke: "currentColor",
 			strokeWidth: "1.5",
@@ -90,45 +90,45 @@ 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 = u(y);
+	let T = d[r(_)] ?? _, E = i(!0), D = o(y);
 	D.current = y;
 	let O = v || y !== void 0, k = () => {
 		E.value = !1, setTimeout(() => D.current?.(), p);
 	};
-	return /* @__PURE__ */ c(t, {
+	return /* @__PURE__ */ l(t, {
 		present: E,
-		children: /* @__PURE__ */ l("div", {
+		children: /* @__PURE__ */ u("div", {
 			role: f.has(T) ? "alert" : "status",
 			"data-variant": T,
 			className: n(e.notification, C),
 			...w,
 			children: [
-				/* @__PURE__ */ c("span", {
+				/* @__PURE__ */ l("span", {
 					className: e.icon,
 					"aria-hidden": "true",
-					children: x ?? /* @__PURE__ */ c(m, { variant: T })
+					children: x ?? /* @__PURE__ */ l(m, { variant: T })
 				}),
-				/* @__PURE__ */ l("div", {
+				/* @__PURE__ */ u("div", {
 					className: e.body,
 					children: [
-						/* @__PURE__ */ c("div", {
+						/* @__PURE__ */ l("div", {
 							className: e.title,
 							children: h
 						}),
-						g && /* @__PURE__ */ c("div", {
+						g && /* @__PURE__ */ l("div", {
 							className: e.description,
 							children: g
 						}),
-						b && /* @__PURE__ */ c("div", {
+						b && /* @__PURE__ */ l("div", {
 							className: e.actions,
 							children: b
 						})
 					]
 				}),
-				O && /* @__PURE__ */ c("button", {
+				O && /* @__PURE__ */ l("button", {
 					type: "button",
 					className: e.dismiss,
-					"aria-label": S?.dismiss ?? s(o.notification.dismiss),
+					"aria-label": S?.dismiss ?? c(s.notification.dismiss),
 					onClick: k,
 					children: "✕"
 				})