@cascivo/react 0.11.1 → 0.12.0

package/README.md

@@ -407,7 +407,7 @@ routing break after adding one of these, check that the import resolves to
 - **Cta** — Call-to-action band — quiet hairline-bordered section with title, description, and centered actions. Replace demo content before shipping.
 - **DashboardLayout** — Dashboard page layout with stats strip, main content area, and optional aside.
 - **FeatureGrid** — Feature section — AutoGrid of items with optional title, description, and icon slots. Icons are optional; the grid works text-only. Replace demo content before shipping.
-- **Flex** — Flex layout primitive for vertical or horizontal stacking with gap control.
+- **Flex** — Flex layout primitive for vertical or horizontal stacking with gap control. ⚠ Unlike CSS `flex-direction`, `direction` defaults to `vertical` — pass `direction="horizontal"` for a row.
 - **Grid** — CSS grid layout primitive with responsive column collapsing. Establishes its own containment, so responsive `cols` adapt to the grid’s own slot width with no wrapper or container ancestor required.
 - **Hero** — Page hero section — centered or split layout with eyebrow, title, description, actions and media slots. Replace demo content before shipping.
 - **Indicator** — Positions an overlay element (badge, dot, count) at a corner of its child

package/dist/alert-dialog/alert-dialog.js

@@ -1,15 +1,13 @@
 "use client";
 
 import e from "./alert-dialog.module.js";
-import { useId as t, useSignal as n, useSignalEffect as r } from "@cascivo/core";
+import { useEffectPropSignal as t, useId as n, useSignalEffect as r } from "@cascivo/core";
 import { builtin as i, t as a } from "@cascivo/i18n";
 import { jsx as o, jsxs as s } from "react/jsx-runtime";
 import { useRef as c } from "react";
 //#region ../components/src/alert-dialog/alert-dialog.tsx
 function l({ open: l, title: u, description: d, onConfirm: f, onCancel: p, labels: m, variant: h = "default" }) {
-	let g = c(null), _ = t("cascivo-alert-dialog-title"), v = t("cascivo-alert-dialog-desc"), y = n(l);
-	y.value = l;
-	let b = c(null), x = c(p);
+	let g = c(null), _ = n("cascivo-alert-dialog-title"), v = n("cascivo-alert-dialog-desc"), y = t(l), b = c(null), x = c(p);
 	x.current = p;
 	let S = c(f);
 	return S.current = f, r(() => {

package/dist/card/card.css

@@ -1 +1 @@
-@layer cascivo.component{._card_16415_2{background-color:var(--cascivo-color-surface);border-radius:var(--cascivo-radius-surface);padding:var(--_card-p,0);overflow:hidden}._card_16415_2[data-padding=none]{--_card-p:0}._card_16415_2[data-padding=sm]{--_card-p:var(--cascivo-space-4)}._card_16415_2[data-padding=md]{--_card-p:var(--cascivo-space-6)}._card_16415_2[data-padding=lg]{--_card-p:var(--cascivo-space-8)}._card_16415_2[data-variant=default]{border:1px solid var(--cascivo-color-border)}._card_16415_2[data-variant=outlined]{border:1.5px solid var(--cascivo-color-border-strong)}._card_16415_2[data-variant=elevated]{box-shadow:var(--cascivo-shadow-md);border:none}._header_16415_35{padding:var(--_card-p,var(--cascivo-space-6));gap:var(--cascivo-space-1);flex-direction:column;min-inline-size:0;padding-block-end:0;display:flex}._title_16415_46{font-family:var(--cascivo-font-sans);font-size:var(--cascivo-text-lg);font-weight:var(--cascivo-font-semibold);color:var(--cascivo-color-text);line-height:var(--cascivo-leading-tight);margin:0}._content_16415_55{padding:var(--_card-p,var(--cascivo-space-6));color:var(--cascivo-color-text-subtle);font-family:var(--cascivo-font-sans);font-size:var(--cascivo-text-sm);line-height:var(--cascivo-leading-relaxed)}._footer_16415_63{padding:var(--_card-p,var(--cascivo-space-6));align-items:center;gap:var(--cascivo-space-2);min-inline-size:0;padding-block-start:0;display:flex}._footer_16415_63>*{min-inline-size:0}}
+@layer cascivo.component{._card_4huda_2{background-color:var(--cascivo-color-surface);border-radius:var(--cascivo-radius-surface);padding:var(--_card-p,0);overflow:hidden}._card_4huda_2[data-padding=none]{--_card-p:0}._card_4huda_2[data-padding=sm]{--_card-p:var(--cascivo-space-4)}._card_4huda_2[data-padding=md]{--_card-p:var(--cascivo-space-6)}._card_4huda_2[data-padding=lg]{--_card-p:var(--cascivo-space-8)}._card_4huda_2[data-variant=default]{border:1px solid var(--cascivo-color-border)}._card_4huda_2[data-variant=outlined]{border:1.5px solid var(--cascivo-color-border-strong)}._card_4huda_2[data-variant=elevated]{box-shadow:var(--cascivo-shadow-md);border:none}._header_4huda_35{padding:var(--_card-p,var(--cascivo-space-6));gap:var(--cascivo-space-1);flex-direction:column;min-inline-size:0;padding-block-end:0;display:flex}._headerRow_4huda_49{justify-content:space-between;align-items:flex-start;gap:var(--cascivo-space-3);flex-direction:row}._headerRow_4huda_49 ._headerMain_4huda_57{gap:var(--cascivo-space-1);flex-direction:column;min-inline-size:0;display:flex}._headerRow_4huda_49 ._headerActions_4huda_64{align-items:center;gap:var(--cascivo-space-1);flex-shrink:0;display:flex}._title_4huda_72{font-family:var(--cascivo-font-sans);font-size:var(--cascivo-text-lg);font-weight:var(--cascivo-font-semibold);color:var(--cascivo-color-text);line-height:var(--cascivo-leading-tight);margin:0}._content_4huda_81{padding:var(--_card-p,var(--cascivo-space-6));color:var(--cascivo-color-text-subtle);font-family:var(--cascivo-font-sans);font-size:var(--cascivo-text-sm);line-height:var(--cascivo-leading-relaxed)}._footer_4huda_89{padding:var(--_card-p,var(--cascivo-space-6));align-items:center;gap:var(--cascivo-space-2);min-inline-size:0;padding-block-start:0;display:flex}._footer_4huda_89>*{min-inline-size:0}}

package/dist/card/card.js

@@ -2,9 +2,9 @@
 
 import e from "./card.module.js";
 import { cn as t } from "@cascivo/core";
-import { jsx as n } from "react/jsx-runtime";
+import { jsx as n, jsxs as r } from "react/jsx-runtime";
 //#region ../components/src/card/card.tsx
-function r({ variant: r = "default", padding: i = "md", className: a, children: o, ...s }) {
+function i({ variant: r = "default", padding: i = "md", className: a, children: o, ...s }) {
 	return /* @__PURE__ */ n("div", {
 		"data-variant": r,
 		"data-padding": i,
@@ -13,28 +13,38 @@ function r({ variant: r = "default", padding: i = "md", className: a, children:
 		children: o
 	});
 }
-function i({ className: r, children: i, ...a }) {
-	return /* @__PURE__ */ n("div", {
-		className: t(e.header, r),
-		...a,
-		children: i
+function a({ actions: i, className: a, children: o, ...s }) {
+	return i === void 0 ? /* @__PURE__ */ n("div", {
+		className: t(e.header, a),
+		...s,
+		children: o
+	}) : /* @__PURE__ */ r("div", {
+		className: t(e.header, e.headerRow, a),
+		...s,
+		children: [/* @__PURE__ */ n("div", {
+			className: e.headerMain,
+			children: o
+		}), /* @__PURE__ */ n("div", {
+			className: e.headerActions,
+			children: i
+		})]
 	});
 }
-function a({ className: r, children: i, ...a }) {
+function o({ className: r, children: i, ...a }) {
 	return /* @__PURE__ */ n("h3", {
 		className: t(e.title, r),
 		...a,
 		children: i
 	});
 }
-function o({ className: r, children: i, ...a }) {
+function s({ className: r, children: i, ...a }) {
 	return /* @__PURE__ */ n("div", {
 		className: t(e.content, r),
 		...a,
 		children: i
 	});
 }
-function s({ className: r, children: i, ...a }) {
+function c({ className: r, children: i, ...a }) {
 	return /* @__PURE__ */ n("div", {
 		className: t(e.footer, r),
 		...a,
@@ -42,4 +52,4 @@ function s({ className: r, children: i, ...a }) {
 	});
 }
 //#endregion
-export { r as Card, o as CardContent, s as CardFooter, i as CardHeader, a as CardTitle };
+export { i as Card, s as CardContent, c as CardFooter, a as CardHeader, o as CardTitle };

package/dist/card/card.module.js

@@ -2,11 +2,14 @@
 
 import './card.css';
 var e = {
-	card: "_card_16415_2",
-	header: "_header_16415_35",
-	title: "_title_16415_46",
-	content: "_content_16415_55",
-	footer: "_footer_16415_63"
+	card: "_card_4huda_2",
+	header: "_header_4huda_35",
+	headerRow: "_headerRow_4huda_49",
+	headerMain: "_headerMain_4huda_57",
+	headerActions: "_headerActions_4huda_64",
+	title: "_title_4huda_72",
+	content: "_content_4huda_81",
+	footer: "_footer_4huda_89"
 };
 //#endregion
 export { e as default };

package/dist/checkbox/checkbox.js

@@ -1,13 +1,13 @@
 "use client";
 
 import e from "./checkbox.module.js";
-import { cn as t, useSignal as n, useSignalEffect as r } from "@cascivo/core";
+import { cn as t, useEffectPropSignal as n, useSignalEffect as r } from "@cascivo/core";
 import { jsx as i, jsxs as a } from "react/jsx-runtime";
 import { useRef as o } from "react";
 //#region ../components/src/checkbox/checkbox.tsx
 function s({ label: s, indeterminate: c = !1, className: l, id: u, disabled: d, ...f }) {
 	let p = o(null), m = n(c);
-	m.value = c, r(() => {
+	r(() => {
 		p.current && (p.current.indeterminate = m.value);
 	});
 	let h = u ?? (s ? `cascade-checkbox-${s.toLowerCase().replace(/\s+/g, "-")}` : void 0);

package/dist/command-menu/command-menu.js

@@ -3,10 +3,10 @@
 import { Spinner as e } from "../spinner/spinner.js";
 import { Kbd as t } from "../kbd/kbd.js";
 import n from "./command-menu.module.js";
-import { batch as r, cn as i, useSignal as a, useSignalEffect as o, useSignals as s } from "@cascivo/core";
+import { batch as r, cn as i, useEffectPropSignal as a, useSignal as o, useSignalEffect as s, useSignals as ee } from "@cascivo/core";
 import { builtin as c, t as l } from "@cascivo/i18n";
 import { jsx as u, jsxs as d } from "react/jsx-runtime";
-import { useId as ee, useRef as f } from "react";
+import { useId as te, useRef as f } from "react";
 //#region ../components/src/command-menu/command-menu.tsx
 function p(e, t) {
 	if (e.length === 0) return {
@@ -66,46 +66,42 @@ function _(e, t) {
 	}
 	return null;
 }
-function v({ open: m, onOpenChange: v, groups: te, placeholder: y, emptyLabel: b, hotkey: x = !0, label: S, loading: C = !1, onQueryChange: w, scopes: T = [], className: E }) {
-	s();
-	let D = S ?? l(c.commandMenu.label), ne = b ?? l(c.commandMenu.empty), O = ee(), k = `${O}-listbox`, A = f(null), j = f(null), M = f([]), N = f(v);
-	N.current = v;
-	let P = f(w);
-	P.current = w;
-	let F = a(m);
-	F.value = m;
-	let I = a(x);
-	I.value = x;
-	let L = a(""), R = a(0), z = a([]), B = a(null), re = z.value.at(-1)?.groups ?? te, ie = y ?? z.value.at(-1)?.placeholder ?? l(c.commandMenu.placeholder), V = T.find((e) => e.id === B.value) ?? null, H = re.filter((e) => !B.value || !e.scope || e.scope === B.value).map((e) => ({
+function v({ open: m, onOpenChange: v, groups: ne, placeholder: re, emptyLabel: ie, hotkey: y = !0, label: b, loading: x = !1, onQueryChange: S, scopes: C = [], className: ae }) {
+	ee();
+	let w = b ?? l(c.commandMenu.label), T = ie ?? l(c.commandMenu.empty), E = te(), D = `${E}-listbox`, O = f(null), k = f(null), A = f([]), j = f(v);
+	j.current = v;
+	let M = f(S);
+	M.current = S;
+	let N = a(m), P = a(y), F = o(""), I = o(0), L = o([]), R = o(null), z = L.value.at(-1)?.groups ?? ne, B = re ?? L.value.at(-1)?.placeholder ?? l(c.commandMenu.placeholder), V = C.find((e) => e.id === R.value) ?? null, H = z.filter((e) => !R.value || !e.scope || e.scope === R.value).map((e) => ({
 		heading: e.heading,
 		items: e.items.map((e) => ({
 			item: e,
-			score: h(L.value, e)
+			score: h(F.value, e)
 		})).filter(({ score: e }) => e > 0).sort((e, t) => t.score - e.score).map(({ item: e }) => ({
 			item: e,
-			indices: p(L.value, e.label)?.indices ?? []
+			indices: p(F.value, e.label)?.indices ?? []
 		}))
-	})).filter((e) => e.items.length > 0), U = H.flatMap((e) => e.items.map((e) => e.item)), W = U.flatMap((e, t) => e.disabled ? [] : [t]), G = W.includes(R.value) ? R.value : W[0] ?? -1, K = (e) => `${O}-option-${e}`;
-	o(() => {
-		let e = A.current;
-		e && (F.value ? e.open || (r(() => {
-			L.value = "", R.value = 0, z.value = [], B.value = null;
-		}), typeof e.showModal == "function" && e.showModal(), j.current?.focus()) : e.open && (z.value = [], e.close()));
-	}), o(() => {
-		let e = A.current;
+	})).filter((e) => e.items.length > 0), U = H.flatMap((e) => e.items.map((e) => e.item)), W = U.flatMap((e, t) => e.disabled ? [] : [t]), G = W.includes(I.value) ? I.value : W[0] ?? -1, K = (e) => `${E}-option-${e}`;
+	s(() => {
+		let e = O.current;
+		e && (N.value ? e.open || (r(() => {
+			F.value = "", I.value = 0, L.value = [], R.value = null;
+		}), typeof e.showModal == "function" && e.showModal(), k.current?.focus()) : e.open && (L.value = [], e.close()));
+	}), s(() => {
+		let e = O.current;
 		if (!e) return;
-		let t = () => N.current(!1);
+		let t = () => j.current(!1);
 		return e.addEventListener("close", t), () => e.removeEventListener("close", t);
-	}), o(() => {
-		if (!I.value) return;
+	}), s(() => {
+		if (!P.value) return;
 		let e = (e) => {
-			(e.metaKey || e.ctrlKey) && e.key.toLowerCase() === "k" && (e.preventDefault(), N.current(!F.value));
+			(e.metaKey || e.ctrlKey) && e.key.toLowerCase() === "k" && (e.preventDefault(), j.current(!N.value));
 		};
 		return window.addEventListener("keydown", e), () => window.removeEventListener("keydown", e);
 	});
 	let q = (e) => {
-		R.value = e;
-		let t = M.current[e];
+		I.value = e;
+		let t = A.current[e];
 		t && typeof t.scrollIntoView == "function" && t.scrollIntoView({ block: "nearest" });
 	}, J = (e) => {
 		if (W.length === 0) return;
@@ -118,7 +114,7 @@ function v({ open: m, onOpenChange: v, groups: te, placeholder: y, emptyLabel: b
 			if (e.page) {
 				if (t === "secondary") return;
 				r(() => {
-					z.value = [...z.value, e.page], L.value = "", R.value = 0;
+					L.value = [...L.value, e.page], F.value = "", I.value = 0;
 				});
 				return;
 			}
@@ -129,21 +125,21 @@ function v({ open: m, onOpenChange: v, groups: te, placeholder: y, emptyLabel: b
 			}
 			t !== "secondary" && (e.onSelect?.(), v(!1));
 		}
-	}, ae = (e) => {
-		if (T.length === 0) return;
-		let t = [null, ...T.map((e) => e.id)], n = t[(t.indexOf(B.value) + e + t.length) % t.length];
+	}, oe = (e) => {
+		if (C.length === 0) return;
+		let t = [null, ...C.map((e) => e.id)], n = t[(t.indexOf(R.value) + e + t.length) % t.length];
 		r(() => {
-			B.value = n ?? null, R.value = 0;
+			R.value = n ?? null, I.value = 0;
 		});
 	}, Z = () => {
 		r(() => {
-			B.value = null, R.value = 0;
-		}), j.current?.focus();
+			R.value = null, I.value = 0;
+		}), k.current?.focus();
 	}, Q = () => {
 		r(() => {
-			z.value = z.value.slice(0, -1), L.value = "", R.value = 0;
+			L.value = L.value.slice(0, -1), F.value = "", I.value = 0;
 		});
-	}, oe = (e) => {
+	}, se = (e) => {
 		switch (e.key) {
 			case "ArrowDown":
 				e.preventDefault(), J(1);
@@ -152,7 +148,7 @@ function v({ open: m, onOpenChange: v, groups: te, placeholder: y, emptyLabel: b
 				e.preventDefault(), J(-1);
 				break;
 			case "Tab":
-				T.length > 0 && (e.preventDefault(), ae(e.shiftKey ? -1 : 1));
+				C.length > 0 && (e.preventDefault(), oe(e.shiftKey ? -1 : 1));
 				break;
 			case "Home":
 				e.preventDefault(), W[0] !== void 0 && q(W[0]);
@@ -167,20 +163,20 @@ function v({ open: m, onOpenChange: v, groups: te, placeholder: y, emptyLabel: b
 				e.preventDefault(), G >= 0 && X(U[G], e.metaKey || e.ctrlKey ? "secondary" : "primary");
 				break;
 			case "Backspace":
-				L.value === "" && (z.value.length > 0 ? (e.preventDefault(), Q()) : B.value && (e.preventDefault(), Z()));
+				F.value === "" && (L.value.length > 0 ? (e.preventDefault(), Q()) : R.value && (e.preventDefault(), Z()));
 				break;
 		}
-	}, se = (e) => {
-		e.key === "Escape" && (e.preventDefault(), z.value.length > 0 ? Q() : A.current?.close());
 	}, ce = (e) => {
-		e.target === A.current && A.current?.close();
+		e.key === "Escape" && (e.preventDefault(), L.value.length > 0 ? Q() : O.current?.close());
+	}, le = (e) => {
+		e.target === O.current && O.current?.close();
 	}, $ = -1;
 	return /* @__PURE__ */ u("dialog", {
-		ref: A,
-		"aria-label": D,
-		className: i(n.dialog, E),
-		onClick: ce,
-		onKeyDown: se,
+		ref: O,
+		"aria-label": w,
+		className: i(n.dialog, ae),
+		onClick: le,
+		onKeyDown: ce,
 		children: /* @__PURE__ */ d("div", {
 			className: n.panel,
 			children: [
@@ -231,44 +227,44 @@ function v({ open: m, onOpenChange: v, groups: te, placeholder: y, emptyLabel: b
 							})]
 						}),
 						/* @__PURE__ */ u("input", {
-							ref: j,
+							ref: k,
 							type: "text",
 							role: "combobox",
 							"aria-expanded": "true",
-							"aria-controls": k,
+							"aria-controls": D,
 							"aria-activedescendant": G >= 0 ? K(G) : void 0,
 							"aria-autocomplete": "list",
-							"aria-label": D,
+							"aria-label": w,
 							autoComplete: "off",
 							spellCheck: !1,
 							className: n.input,
-							placeholder: ie,
-							value: L.value,
+							placeholder: B,
+							value: F.value,
 							onChange: (e) => {
 								let t = e.target.value;
-								if (!B.value && T.length > 0) {
-									let e = _(t, T);
-									e && (B.value = e.scope.id, t = e.rest);
+								if (!R.value && C.length > 0) {
+									let e = _(t, C);
+									e && (R.value = e.scope.id, t = e.rest);
 								}
-								L.value = t, R.value = 0, P.current?.(t);
+								F.value = t, I.value = 0, M.current?.(t);
 							},
-							onKeyDown: oe
+							onKeyDown: se
 						})
 					]
 				}),
-				T.length > 0 && /* @__PURE__ */ d("div", {
+				C.length > 0 && /* @__PURE__ */ d("div", {
 					className: n.scopes,
 					children: [/* @__PURE__ */ u("span", {
 						className: n.scopesLabel,
 						children: l(c.commandMenu.scopeLabel)
-					}), T.map((e) => /* @__PURE__ */ d("button", {
+					}), C.map((e) => /* @__PURE__ */ d("button", {
 						type: "button",
 						className: n.scopePill,
-						"data-active": e.id === B.value || void 0,
+						"data-active": e.id === R.value || void 0,
 						onClick: () => {
 							r(() => {
-								B.value = B.value === e.id ? null : e.id, R.value = 0;
-							}), j.current?.focus();
+								R.value = R.value === e.id ? null : e.id, I.value = 0;
+							}), k.current?.focus();
 						},
 						children: [e.prefix && /* @__PURE__ */ u("span", {
 							className: n.scopePrefix,
@@ -280,8 +276,8 @@ function v({ open: m, onOpenChange: v, groups: te, placeholder: y, emptyLabel: b
 					className: n.list,
 					children: [/* @__PURE__ */ u("div", {
 						role: "listbox",
-						id: k,
-						"aria-label": S,
+						id: D,
+						"aria-label": b,
 						tabIndex: 0,
 						children: H.map((e, r) => /* @__PURE__ */ d("div", {
 							role: "group",
@@ -290,7 +286,7 @@ function v({ open: m, onOpenChange: v, groups: te, placeholder: y, emptyLabel: b
 							children: [e.heading && /* @__PURE__ */ d("div", {
 								className: n.heading,
 								"aria-hidden": "true",
-								children: [/* @__PURE__ */ u("span", { children: e.heading }), L.value !== "" && /* @__PURE__ */ u("span", {
+								children: [/* @__PURE__ */ u("span", { children: e.heading }), F.value !== "" && /* @__PURE__ */ u("span", {
 									className: n.count,
 									children: l(c.commandMenu.matches, { count: e.items.length })
 								})]
@@ -300,7 +296,7 @@ function v({ open: m, onOpenChange: v, groups: te, placeholder: y, emptyLabel: b
 								let a = $;
 								return /* @__PURE__ */ d("div", {
 									ref: (e) => {
-										M.current[a] = e;
+										A.current[a] = e;
 									},
 									id: K(a),
 									role: "option",
@@ -310,7 +306,7 @@ function v({ open: m, onOpenChange: v, groups: te, placeholder: y, emptyLabel: b
 									"data-disabled": r.disabled || void 0,
 									className: n.option,
 									onMouseEnter: () => {
-										r.disabled || (R.value = a);
+										r.disabled || (I.value = a);
 									},
 									onClick: () => X(r, "primary"),
 									children: [
@@ -366,14 +362,14 @@ function v({ open: m, onOpenChange: v, groups: te, placeholder: y, emptyLabel: b
 								}, r.id);
 							})]
 						}, e.heading ?? `group-${r}`))
-					}), U.length === 0 && (C ? /* @__PURE__ */ d("div", {
+					}), U.length === 0 && (x ? /* @__PURE__ */ d("div", {
 						role: "status",
 						className: n.empty,
 						children: [/* @__PURE__ */ u(e, { size: "sm" }), l(c.commandMenu.loading)]
 					}) : /* @__PURE__ */ u("div", {
 						role: "status",
 						className: n.empty,
-						children: ne
+						children: T
 					}))]
 				}),
 				/* @__PURE__ */ d("div", {
@@ -401,7 +397,7 @@ function v({ open: m, onOpenChange: v, groups: te, placeholder: y, emptyLabel: b
 								children: "↵"
 							}), " open"]
 						}),
-						T.length > 0 && /* @__PURE__ */ d("span", {
+						C.length > 0 && /* @__PURE__ */ d("span", {
 							className: n.hint,
 							children: [/* @__PURE__ */ u(t, {
 								size: "sm",

package/dist/dropdown/dropdown.js

@@ -1,102 +1,100 @@
 "use client";
 
 import e from "./dropdown.module.js";
-import { composeRefs as t, createMachine as n, useMachine as r, useSignal as i, useSignalEffect as a, useSignals as o } from "@cascivo/core";
-import { jsx as s, jsxs as c } from "react/jsx-runtime";
-import { cloneElement as l, useRef as u } from "react";
+import { composeRefs as t, createMachine as n, useEffectPropSignal as r, useMachine as i, useSignal as a, useSignalEffect as o, useSignals as s } from "@cascivo/core";
+import { jsx as c, jsxs as l } from "react/jsx-runtime";
+import { cloneElement as u, useRef as d } from "react";
 //#region ../components/src/dropdown/dropdown.tsx
-var d = n({
+var f = n({
 	initial: "closed",
 	states: {
 		closed: { on: { OPEN: "open" } },
 		open: { on: { CLOSE: "closed" } }
 	}
 });
-function f({ trigger: n, items: f, onSelect: p, placement: m = "bottom-start", open: h, onOpenChange: g }) {
-	o();
-	let [_, v] = r(d), y = u(null), b = u(null), x = u(null), S = u([]), C = i(-1), w = h !== void 0, T = w ? h : _.value === "open", E = i(T);
-	E.value = T;
-	let D = f.map((e, t) => ({
+function p({ trigger: n, items: p, onSelect: m, placement: h = "bottom-start", open: g, onOpenChange: _ }) {
+	s();
+	let [v, y] = i(f), b = d(null), x = d(null), S = d(null), C = d([]), w = a(-1), T = g !== void 0, E = T ? g : v.value === "open", D = r(E), O = p.map((e, t) => ({
 		item: e,
 		index: t
-	})).filter(({ item: e }) => !e.separator && !e.disabled).map(({ index: e }) => e), O = (e) => {
-		w || v(e ? "OPEN" : "CLOSE"), g?.(e);
+	})).filter(({ item: e }) => !e.separator && !e.disabled).map(({ index: e }) => e), k = (e) => {
+		T || y(e ? "OPEN" : "CLOSE"), _?.(e);
 	};
-	a(() => {
-		let e = C.value;
-		E.value && e >= 0 && S.current[e]?.focus();
-	}), a(() => {
-		E.value ? C.value = D[0] ?? -1 : C.value = -1;
-	}), a(() => {
-		E.value ? x.current?.showPopover() : x.current?.hidePopover();
-	}), a(() => {
-		let e = x.current;
+	o(() => {
+		let e = w.value;
+		D.value && e >= 0 && C.current[e]?.focus();
+	}), o(() => {
+		D.value ? w.value = O[0] ?? -1 : w.value = -1;
+	}), o(() => {
+		D.value ? S.current?.showPopover() : S.current?.hidePopover();
+	}), o(() => {
+		let e = S.current;
 		if (!e) return;
 		let t = (e) => {
-			e.newState === "closed" && O(!1);
+			e.newState === "closed" && k(!1);
 		};
 		return e.addEventListener("toggle", t), () => e.removeEventListener("toggle", t);
 	});
-	let k = (e) => {
-		let t = f[e];
-		!t || t.separator || t.disabled || (p?.(t.value), O(!1), b.current?.focus());
-	}, A = (e) => {
-		D.length !== 0 && (C.value = D[(D.indexOf(C.value) + e + D.length) % D.length] ?? -1);
+	let A = (e) => {
+		let t = p[e];
+		!t || t.separator || t.disabled || (m?.(t.value), k(!1), x.current?.focus());
 	}, j = (e) => {
+		O.length !== 0 && (w.value = O[(O.indexOf(w.value) + e + O.length) % O.length] ?? -1);
+	}, M = (e) => {
 		switch (e.key) {
 			case "ArrowDown":
-				e.preventDefault(), A(1);
+				e.preventDefault(), j(1);
 				break;
 			case "ArrowUp":
-				e.preventDefault(), A(-1);
+				e.preventDefault(), j(-1);
 				break;
 			case "Home":
-				e.preventDefault(), C.value = D[0] ?? -1;
+				e.preventDefault(), w.value = O[0] ?? -1;
 				break;
 			case "End":
-				e.preventDefault(), C.value = D[D.length - 1] ?? -1;
+				e.preventDefault(), w.value = O[O.length - 1] ?? -1;
 				break;
 			case "Escape":
-				e.preventDefault(), O(!1), b.current?.focus();
+				e.preventDefault(), k(!1), x.current?.focus();
 				break;
 			case "Enter":
 			case " ":
-				e.preventDefault(), k(C.value);
+				e.preventDefault(), A(w.value);
 				break;
 		}
-	}, M = n, N = l(M, {
-		ref: t(b, M.props.ref),
+	}, N = n, P = u(N, {
+		ref: t(x, N.props.ref),
 		onClick: (e) => {
-			M.props.onClick?.(e), O(!T);
+			N.props.onClick?.(e), k(!E);
 		},
 		"aria-haspopup": "menu",
-		"aria-expanded": T
+		"aria-expanded": E
 	});
-	return /* @__PURE__ */ c("div", {
-		ref: y,
+	return /* @__PURE__ */ l("div", {
+		ref: b,
 		className: e.root,
-		children: [N, /* @__PURE__ */ s("div", {
-			ref: x,
+		children: [P, /* @__PURE__ */ c("div", {
+			ref: S,
 			popover: "auto",
 			role: "menu",
-			"data-placement": m,
-			"data-state": T ? "open" : "closed",
+			"data-placement": h,
+			"data-state": E ? "open" : "closed",
 			className: e.menu,
-			onKeyDown: j,
-			children: f.map((t, n) => t.separator ? /* @__PURE__ */ s("div", {
+			onKeyDown: M,
+			children: p.map((t, n) => t.separator ? /* @__PURE__ */ c("div", {
 				role: "separator",
 				className: e.separator
-			}, `sep-${n}`) : /* @__PURE__ */ c("button", {
+			}, `sep-${n}`) : /* @__PURE__ */ l("button", {
 				type: "button",
 				role: "menuitem",
 				ref: (e) => {
-					S.current[n] = e;
+					C.current[n] = e;
 				},
-				tabIndex: C.value === n ? 0 : -1,
+				tabIndex: w.value === n ? 0 : -1,
 				disabled: t.disabled,
 				className: e.item,
-				onClick: () => k(n),
-				children: [t.icon && /* @__PURE__ */ s("span", {
+				onClick: () => A(n),
+				children: [t.icon && /* @__PURE__ */ c("span", {
 					className: e.icon,
 					"aria-hidden": "true",
 					children: t.icon
@@ -106,4 +104,4 @@ function f({ trigger: n, items: f, onSelect: p, placement: m = "bottom-start", o
 	});
 }
 //#endregion
-export { f as Dropdown };
+export { p as Dropdown };

package/dist/header-panel/header-panel.js

@@ -1,16 +1,14 @@
 "use client";
 
 import e from "./header-panel.module.js";
-import { cn as t, useSignal as n, useSignalEffect as r, useSignals as i } from "@cascivo/core";
+import { cn as t, useEffectPropSignal as n, useSignalEffect 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/header-panel/header-panel.tsx
 function u({ open: u, onClose: d, label: f, children: p, labels: m, className: h }) {
 	i();
-	let g = l(null), _ = l(null), v = n(u);
-	v.value = u;
-	let y = l(d);
+	let g = l(null), _ = l(null), v = n(u), y = l(d);
 	return y.current = d, r(() => {
 		let e = g.current;
 		if (e) if (v.value) {

package/dist/icon-button/icon-button.js

@@ -5,16 +5,16 @@ import { Slot as t, cn as n } from "@cascivo/core";
 import { jsx as r } from "react/jsx-runtime";
 import { forwardRef as i } from "react";
 //#region ../components/src/icon-button/icon-button.tsx
-var a = i(function({ label: i, icon: a, size: o = "md", variant: s = "ghost", asChild: c = !1, className: l, children: u, ...d }, f) {
-	return /* @__PURE__ */ r(c ? t : "button", {
-		type: c ? void 0 : "button",
-		"aria-label": i,
-		"data-size": o,
-		"data-variant": s,
-		className: n(e.iconButton, l),
-		ref: f,
-		...d,
-		children: u ?? a
+var a = i(function({ label: i, ariaLabel: a, icon: o, size: s = "md", variant: c = "ghost", asChild: l = !1, className: u, children: d, ...f }, p) {
+	return /* @__PURE__ */ r(l ? t : "button", {
+		type: l ? void 0 : "button",
+		"aria-label": i ?? a,
+		"data-size": s,
+		"data-variant": c,
+		className: n(e.iconButton, u),
+		ref: p,
+		...f,
+		children: d ?? o
 	});
 });
 //#endregion