@cascivo/react 0.13.0 → 0.14.0

package/dist/input/input.js

@@ -2,53 +2,54 @@
 
 import e from "./input.module.js";
 import { cn as t, createMachine as n, useMachine as r } from "@cascivo/core";
-import { jsx as i, jsxs as a } from "react/jsx-runtime";
+import { forwardRef as i } from "react";
+import { jsx as a, jsxs as o } from "react/jsx-runtime";
 //#region ../components/src/input/input.tsx
-var o = n({
+var s = n({
 	initial: "idle",
 	states: {
 		idle: { on: { FOCUS: "focused" } },
 		focused: { on: { BLUR: "idle" } }
 	}
-});
-function s({ label: n, hint: s, error: c, size: l = "md", className: u, id: d, onFocus: f, onBlur: p, ...m }) {
-	let [h, g] = r(o), _ = d ?? (n ? `cascade-input-${n.toLowerCase().replace(/\s+/g, "-")}` : void 0);
-	return /* @__PURE__ */ a("div", {
+}), c = i(function({ label: n, hint: i, error: c, size: l = "md", className: u, id: d, onFocus: f, onBlur: p, ...m }, h) {
+	let [g, _] = r(s), v = d ?? (n ? `cascade-input-${n.toLowerCase().replace(/\s+/g, "-")}` : void 0);
+	return /* @__PURE__ */ o("div", {
 		className: t(e.wrapper, u),
-		"data-state": c ? "error" : h.value,
+		"data-state": c ? "error" : g.value,
 		"data-size": l,
 		children: [
-			n && /* @__PURE__ */ i("label", {
+			n && /* @__PURE__ */ a("label", {
 				className: e.label,
-				htmlFor: _,
+				htmlFor: v,
 				children: n
 			}),
-			/* @__PURE__ */ i("input", {
-				id: _,
+			/* @__PURE__ */ a("input", {
+				ref: h,
+				id: v,
 				className: e.input,
 				"aria-invalid": c ? !0 : void 0,
-				"aria-describedby": c ? `${_}-error` : s ? `${_}-hint` : void 0,
+				"aria-describedby": c ? `${v}-error` : i ? `${v}-hint` : void 0,
 				onFocus: (e) => {
-					g("FOCUS"), f?.(e);
+					_("FOCUS"), f?.(e);
 				},
 				onBlur: (e) => {
-					g("BLUR"), p?.(e);
+					_("BLUR"), p?.(e);
 				},
 				...m
 			}),
-			c && /* @__PURE__ */ i("span", {
-				id: `${_}-error`,
+			c && /* @__PURE__ */ a("span", {
+				id: `${v}-error`,
 				className: e.error,
 				role: "alert",
 				children: c
 			}),
-			!c && s && /* @__PURE__ */ i("span", {
-				id: `${_}-hint`,
+			!c && i && /* @__PURE__ */ a("span", {
+				id: `${v}-hint`,
 				className: e.hint,
-				children: s
+				children: i
 			})
 		]
 	});
-}
+});
 //#endregion
-export { s as Input };
+export { c as Input };

package/dist/link/link.js

@@ -2,11 +2,12 @@
 
 import e from "./link.module.js";
 import { Slot as t, cn as n } from "@cascivo/core";
-import { jsx as r } from "react/jsx-runtime";
+import { forwardRef as r } from "react";
+import { jsx as i } from "react/jsx-runtime";
 //#region ../components/src/link/link.tsx
-function i({ variant: i = "standalone", size: a = "md", external: o = !1, asChild: s = !1, className: c, children: l, ...u }) {
-	return /* @__PURE__ */ r(s ? t : "a", {
-		"data-variant": i,
+var a = r(function({ variant: r = "standalone", size: a = "md", external: o = !1, asChild: s = !1, className: c, children: l, ...u }, d) {
+	return /* @__PURE__ */ i(s ? t : "a", {
+		"data-variant": r,
 		"data-size": a,
 		"data-external": o || void 0,
 		className: n(e.link, c),
@@ -14,9 +15,10 @@ function i({ variant: i = "standalone", size: a = "md", external: o = !1, asChil
 			target: "_blank",
 			rel: "noreferrer"
 		} : {},
+		ref: d,
 		...u,
 		children: l
 	});
-}
+});
 //#endregion
-export { i as Link };
+export { a as Link };

package/dist/log-viewer/log-viewer.js

@@ -2,9 +2,9 @@
 
 import e from "./log-viewer.module.js";
 import { VisuallyHidden as t, cn as n, useClipboard as r, useComputed as i, useControllableSignal as a, useResizeObserver 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 { Fragment as m } from "react";
+import { Fragment as u } from "react";
+import { builtin as d, t as f } from "@cascivo/i18n";
+import { jsx as p, jsxs as m } from "react/jsx-runtime";
 //#region ../components/src/log-viewer/log-viewer.tsx
 var h = {
 	30: "black",
@@ -52,11 +52,11 @@ function g(e) {
 function _(e, t, n) {
 	if (!t) return e;
 	let r = e.toLowerCase(), i = t.toLowerCase(), a = [], o = 0, s = r.indexOf(i, o), c = 0;
-	for (; s !== -1;) s > o && a.push(e.slice(o, s)), a.push(/* @__PURE__ */ f("mark", { children: e.slice(s, s + i.length) }, `${n}-${c++}`)), o = s + i.length, s = r.indexOf(i, o);
+	for (; s !== -1;) s > o && a.push(e.slice(o, s)), a.push(/* @__PURE__ */ p("mark", { children: e.slice(s, s + i.length) }, `${n}-${c++}`)), o = s + i.length, s = r.indexOf(i, o);
 	return o < e.length && a.push(e.slice(o)), a;
 }
 function v(t, n, r) {
-	return (n ? g(t.text) : [{ text: t.text }]).map((n, i) => /* @__PURE__ */ f("span", {
+	return (n ? g(t.text) : [{ text: t.text }]).map((n, i) => /* @__PURE__ */ p("span", {
 		"data-ansi": n.color,
 		style: n.bold ? { fontWeight: 700 } : void 0,
 		className: n.color ? e.ansi : void 0,
@@ -66,13 +66,13 @@ function v(t, n, r) {
 function y({ lines: h, rowHeight: g = 20, overscan: _ = 8, follow: y, onFollowChange: b, ansi: x = !1, search: S, maxHeight: C = "24rem", labels: w, className: T, ...E }) {
 	l();
 	let D = {
-		searchPlaceholder: w?.searchPlaceholder ?? d(u.logViewer.search),
-		follow: w?.follow ?? d(u.logViewer.follow),
-		paused: w?.paused ?? d(u.logViewer.paused),
-		copy: w?.copy ?? d(u.logViewer.copy),
-		copied: w?.copied ?? d(u.logViewer.copied),
-		empty: w?.empty ?? d(u.logViewer.empty),
-		label: d(u.logViewer.label)
+		searchPlaceholder: w?.searchPlaceholder ?? f(d.logViewer.search),
+		follow: w?.follow ?? f(d.logViewer.follow),
+		paused: w?.paused ?? f(d.logViewer.paused),
+		copy: w?.copy ?? f(d.logViewer.copy),
+		copied: w?.copied ?? f(d.logViewer.copied),
+		empty: w?.empty ?? f(d.logViewer.empty),
+		label: f(d.logViewer.label)
 	}, O = s(Array.isArray(h) ? h : []);
 	Array.isArray(h) && (O.value = h);
 	let k = Array.isArray(h) ? O : h, { ref: A, size: j } = o(), M = s(0), [N, P] = a({
@@ -103,14 +103,14 @@ function y({ lines: h, rowHeight: g = 20, overscan: _ = 8, follow: y, onFollowCh
 		let t = e.currentTarget;
 		M.value = t.scrollTop, P(t.scrollHeight - t.clientHeight - t.scrollTop <= g);
 	}, V = R.value, H = F.value.trim();
-	return /* @__PURE__ */ p("div", {
+	return /* @__PURE__ */ m("div", {
 		className: n(e.root, T),
 		...E,
 		children: [
-			/* @__PURE__ */ p("div", {
+			/* @__PURE__ */ m("div", {
 				className: e.toolbar,
 				children: [
-					/* @__PURE__ */ f("input", {
+					/* @__PURE__ */ p("input", {
 						type: "search",
 						className: e.search,
 						placeholder: D.searchPlaceholder,
@@ -120,13 +120,13 @@ function y({ lines: h, rowHeight: g = 20, overscan: _ = 8, follow: y, onFollowCh
 							F.value = e.currentTarget.value;
 						}
 					}),
-					H ? /* @__PURE__ */ f("span", {
+					H ? /* @__PURE__ */ p("span", {
 						className: e.count,
 						"aria-live": "polite",
-						children: d(u.logViewer.matches, { count: z.value })
+						children: f(d.logViewer.matches, { count: z.value })
 					}) : null,
-					/* @__PURE__ */ f("span", { className: e.spacer }),
-					/* @__PURE__ */ f("button", {
+					/* @__PURE__ */ p("span", { className: e.spacer }),
+					/* @__PURE__ */ p("button", {
 						type: "button",
 						className: e.toggle,
 						"aria-pressed": N.value,
@@ -139,7 +139,7 @@ function y({ lines: h, rowHeight: g = 20, overscan: _ = 8, follow: y, onFollowCh
 						},
 						children: N.value ? D.follow : D.paused
 					}),
-					/* @__PURE__ */ f("button", {
+					/* @__PURE__ */ p("button", {
 						type: "button",
 						className: e.copy,
 						onClick: () => void L(k.value.map((e) => e.text).join("\n")),
@@ -147,7 +147,7 @@ function y({ lines: h, rowHeight: g = 20, overscan: _ = 8, follow: y, onFollowCh
 					})
 				]
 			}),
-			/* @__PURE__ */ f("div", {
+			/* @__PURE__ */ p("div", {
 				ref: A,
 				className: e.scroll,
 				role: "log",
@@ -156,13 +156,13 @@ function y({ lines: h, rowHeight: g = 20, overscan: _ = 8, follow: y, onFollowCh
 				tabIndex: 0,
 				style: { maxBlockSize: C },
 				onScroll: B,
-				children: V.total === 0 ? /* @__PURE__ */ f("div", {
+				children: V.total === 0 ? /* @__PURE__ */ p("div", {
 					className: e.empty,
 					children: D.empty
-				}) : /* @__PURE__ */ f("div", {
+				}) : /* @__PURE__ */ p("div", {
 					className: e.sizer,
 					style: { blockSize: V.total * g },
-					children: V.rows.map((t, n) => /* @__PURE__ */ f(m, { children: /* @__PURE__ */ f("div", {
+					children: V.rows.map((t, n) => /* @__PURE__ */ p(u, { children: /* @__PURE__ */ p("div", {
 						className: e.line,
 						"data-level": t.level,
 						style: {
@@ -173,9 +173,9 @@ function y({ lines: h, rowHeight: g = 20, overscan: _ = 8, follow: y, onFollowCh
 					}) }, t.id))
 				})
 			}),
-			/* @__PURE__ */ f(t, {
+			/* @__PURE__ */ p(t, {
 				"aria-live": "polite",
-				children: d(u.logViewer.lines, { count: V.total })
+				children: f(d.logViewer.lines, { count: V.total })
 			})
 		]
 	});

package/dist/menu/menu.js

@@ -3,11 +3,11 @@
 import { usePopover as e } from "../popover/use-popover.js";
 import t from "./menu.module.js";
 import { useSignalEffect as n, useSignals as r, useTypeahead as i } from "@cascivo/core";
-import { jsx as a, jsxs as o } from "react/jsx-runtime";
-import { createContext as s } from "react";
+import { createContext as a } from "react";
+import { jsx as o, jsxs as s } from "react/jsx-runtime";
 //#region ../components/src/menu/menu.tsx
-var c = s(null);
-function l({ ctx: e, children: o }) {
+var c = a(null);
+function l({ ctx: e, children: a }) {
 	r();
 	let { popoverRef: s, anchorName: c, isOpen: l } = e, u = () => {
 		let e = s.current;
@@ -22,7 +22,7 @@ function l({ ctx: e, children: o }) {
 		if (!l.value) return;
 		let e = s.current;
 		e && e.querySelector("[role=\"menuitem\"]:not([aria-disabled=\"true\"])")?.focus();
-	}), /* @__PURE__ */ a("div", {
+	}), /* @__PURE__ */ o("div", {
 		ref: s,
 		popover: "auto",
 		role: "menu",
@@ -46,13 +46,13 @@ function l({ ctx: e, children: o }) {
 				default: f.onKeyDown(e);
 			}
 		},
-		children: o
+		children: a
 	});
 }
 function u({ children: e }) {
-	return /* @__PURE__ */ a(c.Consumer, { children: (t) => {
+	return /* @__PURE__ */ o(c.Consumer, { children: (t) => {
 		if (!t) throw Error("MenuPanel must be inside <Menu>");
-		return /* @__PURE__ */ a(l, {
+		return /* @__PURE__ */ o(l, {
 			ctx: t,
 			children: e
 		});
@@ -60,16 +60,16 @@ function u({ children: e }) {
 }
 function d({ children: t }) {
 	let n = e(), [r, ...i] = Array.isArray(t) ? t : [t];
-	return /* @__PURE__ */ o(c.Provider, {
+	return /* @__PURE__ */ s(c.Provider, {
 		value: n,
-		children: [r, /* @__PURE__ */ a(u, { children: i })]
+		children: [r, /* @__PURE__ */ o(u, { children: i })]
 	});
 }
 function f({ ctx: e, children: n, "aria-label": i }) {
 	r();
-	let { triggerRef: o, toggle: s, anchorName: c, isOpen: l } = e;
-	return /* @__PURE__ */ a("button", {
-		ref: o,
+	let { triggerRef: a, toggle: s, anchorName: c, isOpen: l } = e;
+	return /* @__PURE__ */ o("button", {
+		ref: a,
 		type: "button",
 		"aria-haspopup": "menu",
 		"aria-expanded": l.value,
@@ -81,9 +81,9 @@ function f({ ctx: e, children: n, "aria-label": i }) {
 	});
 }
 function p({ children: e, "aria-label": t }) {
-	return /* @__PURE__ */ a(c.Consumer, { children: (n) => {
+	return /* @__PURE__ */ o(c.Consumer, { children: (n) => {
 		if (!n) throw Error("MenuTrigger must be inside <Menu>");
-		return /* @__PURE__ */ a(f, {
+		return /* @__PURE__ */ o(f, {
 			ctx: n,
 			...t !== void 0 && { "aria-label": t },
 			children: e
@@ -91,16 +91,16 @@ function p({ children: e, "aria-label": t }) {
 	} });
 }
 function m({ children: e, onSelect: n, disabled: r }) {
-	return /* @__PURE__ */ a(c.Consumer, { children: (i) => {
+	return /* @__PURE__ */ o(c.Consumer, { children: (i) => {
 		if (!i) throw Error("MenuItem must be inside <Menu>");
-		let { close: o } = i;
+		let { close: a } = i;
 		function s() {
-			r || (n(), o());
+			r || (n(), a());
 		}
 		function c(e) {
 			(e.key === "Enter" || e.key === " ") && (e.preventDefault(), e.stopPropagation(), s());
 		}
-		return /* @__PURE__ */ a("div", {
+		return /* @__PURE__ */ o("div", {
 			role: "menuitem",
 			tabIndex: r ? -1 : 0,
 			"aria-disabled": r,
@@ -112,7 +112,7 @@ function m({ children: e, onSelect: n, disabled: r }) {
 	} });
 }
 function h() {
-	return /* @__PURE__ */ a("div", {
+	return /* @__PURE__ */ o("div", {
 		role: "separator",
 		className: t.separator
 	});

package/dist/menu-button/menu-button.js

@@ -1,86 +1,86 @@
 "use client";
 
 import e from "./menu-button.module.js";
-import { DismissableLayer as t, cn as n, useAnchorPosition 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 { useId as l, useRef as u } from "react";
+import { DismissableLayer as t, cn as n, focusElement as r, useAnchorPosition as i, useSignal as a, useSignalEffect as o, useSignals as s } from "@cascivo/core";
+import { useId as c, useRef as l } from "react";
+import { jsx as u, jsxs as d } from "react/jsx-runtime";
 //#region ../components/src/menu-button/menu-button.tsx
-function d(e, t) {
+function f(e, t) {
 	if (!e) return;
 	let n = e.querySelectorAll("[role=\"menuitem\"]:not([aria-disabled=\"true\"])");
 	n[t < 0 ? n.length - 1 : t % n.length]?.focus();
 }
-function f({ label: f, items: p, variant: m = "secondary", size: h = "md", disabled: g = !1, align: _ = "start", labels: v, className: y }) {
-	o();
-	let b = i(!1), x = u(null), S = u(null), C = l(), { anchorStyle: w, floatingStyle: T } = r({
-		anchorRef: x,
-		floatingRef: S,
-		placement: _ === "end" ? "bottom-end" : "bottom-start",
-		enabled: b
+function p({ label: p, items: m, variant: h = "secondary", size: g = "md", disabled: _ = !1, align: v = "start", labels: y, className: b }) {
+	s();
+	let x = a(!1), S = l(null), C = l(null), w = c(), { anchorStyle: T, floatingStyle: E } = i({
+		anchorRef: S,
+		floatingRef: C,
+		placement: v === "end" ? "bottom-end" : "bottom-start",
+		enabled: x
 	});
-	a(() => {
-		b.value && d(S.current, 0);
+	o(() => {
+		x.value && f(C.current, 0);
 	});
-	function E(e) {
-		g || (b.value = !0, queueMicrotask(() => d(S.current, e)));
-	}
 	function D(e) {
-		b.value = !1, e && x.current?.focus();
+		_ || (x.value = !0, queueMicrotask(() => f(C.current, e)));
 	}
 	function O(e) {
-		e.key === "ArrowDown" || e.key === "Enter" || e.key === " " ? (e.preventDefault(), E(0)) : e.key === "ArrowUp" && (e.preventDefault(), E(-1));
+		x.value = !1, e && r(S.current);
 	}
 	function k(e) {
+		e.key === "ArrowDown" || e.key === "Enter" || e.key === " " ? (e.preventDefault(), D(0)) : e.key === "ArrowUp" && (e.preventDefault(), D(-1));
+	}
+	function A(e) {
 		if (e.key === "ArrowDown") {
 			e.preventDefault();
 			let t = e.currentTarget.nextElementSibling;
-			t ? t.focus() : d(S.current, 0);
+			t ? t.focus() : f(C.current, 0);
 		} else if (e.key === "ArrowUp") {
 			e.preventDefault();
 			let t = e.currentTarget.previousElementSibling;
-			t ? t.focus() : d(S.current, -1);
-		} else e.key === "Escape" ? (e.preventDefault(), D(!0)) : e.key === "Tab" && D(!1);
+			t ? t.focus() : f(C.current, -1);
+		} else e.key === "Escape" ? (e.preventDefault(), O(!0)) : e.key === "Tab" && O(!1);
 	}
-	function A(e) {
-		e.disabled || (e.onSelect?.(), D(!0));
+	function j(e) {
+		e.disabled || (e.onSelect?.(), O(!0));
 	}
-	return /* @__PURE__ */ c("div", {
-		className: n(e.root, y),
-		children: [/* @__PURE__ */ s("button", {
-			ref: x,
+	return /* @__PURE__ */ d("div", {
+		className: n(e.root, b),
+		children: [/* @__PURE__ */ u("button", {
+			ref: S,
 			type: "button",
 			className: e.trigger,
-			"data-variant": m,
-			"data-size": h,
-			disabled: g,
+			"data-variant": h,
+			"data-size": g,
+			disabled: _,
 			"aria-haspopup": "menu",
-			"aria-expanded": b.value,
-			"aria-controls": C,
-			...v?.open !== void 0 && { "aria-label": v.open },
-			style: w,
+			"aria-expanded": x.value,
+			"aria-controls": w,
+			...y?.open !== void 0 && { "aria-label": y.open },
+			style: T,
 			onClick: () => {
-				b.value ? D(!1) : E(0);
+				x.value ? O(!1) : D(0);
 			},
-			onKeyDown: O,
-			children: f
-		}), b.value ? /* @__PURE__ */ s(t, {
-			onDismiss: () => D(!0),
-			children: /* @__PURE__ */ s("div", {
-				ref: S,
-				id: C,
+			onKeyDown: k,
+			children: p
+		}), x.value ? /* @__PURE__ */ u(t, {
+			onDismiss: () => O(!0),
+			children: /* @__PURE__ */ u("div", {
+				ref: C,
+				id: w,
 				role: "menu",
 				"data-state": "open",
-				"data-align": _,
+				"data-align": v,
 				className: e.menu,
-				style: T,
-				children: p.map((t) => /* @__PURE__ */ s("div", {
+				style: E,
+				children: m.map((t) => /* @__PURE__ */ u("div", {
 					role: "menuitem",
 					tabIndex: -1,
 					"aria-disabled": t.disabled,
 					className: e.item,
-					onClick: () => A(t),
+					onClick: () => j(t),
 					onKeyDown: (e) => {
-						e.key === "Enter" || e.key === " " ? (e.preventDefault(), A(t)) : k(e);
+						e.key === "Enter" || e.key === " " ? (e.preventDefault(), j(t)) : A(e);
 					},
 					children: t.label
 				}, t.id))
@@ -89,4 +89,4 @@ function f({ label: f, items: p, variant: m = "secondary", size: h = "md", disab
 	});
 }
 //#endregion
-export { f as MenuButton };
+export { p as MenuButton };

package/dist/menubar/menubar.js

@@ -1,89 +1,89 @@
 "use client";
 
 import e from "./menubar.module.js";
-import { DismissableLayer as t, Presence as n, cn as r, useAnchorPosition as i, useRovingFocus as a, useSignal as o, useSignals as s } from "@cascivo/core";
-import { Fragment as c, 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, useAnchorPosition as a, useRovingFocus as o, useSignal as s, useSignals as c } from "@cascivo/core";
+import { useId as l, useRef as u } from "react";
+import { Fragment as d, jsx as f, jsxs as p } from "react/jsx-runtime";
 //#region ../components/src/menubar/menubar.tsx
-function p({ menus: t, "aria-label": n, className: i }) {
-	s();
-	let c = d(), u = o(null), f = a({
+function m({ menus: t, "aria-label": n, className: i }) {
+	c();
+	let a = l(), u = s(null), d = o({
 		orientation: "horizontal",
 		loop: !0
 	});
-	return /* @__PURE__ */ l("div", {
+	return /* @__PURE__ */ f("div", {
 		role: "menubar",
 		"aria-label": n,
 		className: r(e.menubar, i),
-		children: t.map((e, t) => /* @__PURE__ */ l(m, {
+		children: t.map((e, t) => /* @__PURE__ */ f(h, {
 			menu: e,
 			index: t,
-			baseId: c,
+			baseId: a,
 			openId: u,
-			itemProps: f.getItemProps(t)
+			itemProps: d.getItemProps(t)
 		}, e.id))
 	});
 }
-function m({ menu: t, baseId: r, openId: a, itemProps: o }) {
-	s();
-	let d = f(null), p = f(null), m = a.value === t.id, g = `${r}-menu-${t.id}`, { anchorStyle: _, floatingStyle: v } = i({
-		anchorRef: d,
-		floatingRef: p,
+function h({ menu: t, baseId: r, openId: o, itemProps: s }) {
+	c();
+	let l = u(null), m = u(null), h = o.value === t.id, _ = `${r}-menu-${t.id}`, { anchorStyle: v, floatingStyle: y } = a({
+		anchorRef: l,
+		floatingRef: m,
 		placement: "bottom-start",
-		enabled: m
-	}), y = () => {
-		(p.current?.querySelector("[role=\"menuitem\"]:not([aria-disabled=\"true\"])"))?.focus();
-	}, b = (e) => {
-		o.onKeyDown(e), !e.defaultPrevented && (e.key === "ArrowDown" || e.key === "Enter" || e.key === " " ? (e.preventDefault(), a.value = t.id, requestAnimationFrame(y)) : e.key === "Escape" && (a.value = null));
-	}, { ref: x, onKeyDown: S, ...C } = o;
-	return /* @__PURE__ */ u(c, { children: [/* @__PURE__ */ l("button", {
+		enabled: h
+	}), b = () => {
+		(m.current?.querySelector("[role=\"menuitem\"]:not([aria-disabled=\"true\"])"))?.focus();
+	}, x = (e) => {
+		s.onKeyDown(e), !e.defaultPrevented && (e.key === "ArrowDown" || e.key === "Enter" || e.key === " " ? (e.preventDefault(), o.value = t.id, requestAnimationFrame(b)) : e.key === "Escape" && (o.value = null));
+	}, { ref: S, onKeyDown: C, ...w } = s;
+	return /* @__PURE__ */ p(d, { children: [/* @__PURE__ */ f("button", {
 		ref: (e) => {
-			d.current = e, x(e);
+			l.current = e, S(e);
 		},
 		type: "button",
 		role: "menuitem",
 		"aria-haspopup": "menu",
-		"aria-expanded": m,
-		"aria-controls": g,
-		"data-state": m ? "open" : "closed",
+		"aria-expanded": h,
+		"aria-controls": _,
+		"data-state": h ? "open" : "closed",
 		className: e.trigger,
-		style: _,
+		style: v,
 		onClick: () => {
-			a.value = m ? null : t.id;
+			o.value = h ? null : t.id;
 		},
-		onKeyDown: b,
-		...C,
+		onKeyDown: x,
+		...w,
 		children: t.label
-	}), /* @__PURE__ */ l(n, {
-		present: m,
-		children: /* @__PURE__ */ l(h, {
+	}), /* @__PURE__ */ f(n, {
+		present: h,
+		children: /* @__PURE__ */ f(g, {
 			menu: t,
-			menuId: g,
-			floatingRef: p,
-			floatingStyle: v,
+			menuId: _,
+			floatingRef: m,
+			floatingStyle: y,
 			onClose: () => {
-				a.value = null, d.current?.focus();
+				o.value = null, i(l.current);
 			}
 		})
 	})] });
 }
-function h({ menu: n, menuId: r, floatingRef: i, floatingStyle: a, onClose: o }) {
+function g({ menu: n, menuId: r, floatingRef: i, floatingStyle: a, onClose: o }) {
 	let s = (e) => {
 		let t = Array.from(i.current?.querySelectorAll("[role=\"menuitem\"]:not([aria-disabled=\"true\"])") ?? []);
 		if (t.length === 0) return;
 		let n = t.indexOf(e.currentTarget);
 		e.key === "ArrowDown" ? (e.preventDefault(), t[(n + 1) % t.length]?.focus()) : e.key === "ArrowUp" ? (e.preventDefault(), t[(n - 1 + t.length) % t.length]?.focus()) : e.key === "Home" ? (e.preventDefault(), t[0]?.focus()) : e.key === "End" && (e.preventDefault(), t[t.length - 1]?.focus());
 	};
-	return /* @__PURE__ */ l(t, {
+	return /* @__PURE__ */ f(t, {
 		onDismiss: o,
-		children: /* @__PURE__ */ l("div", {
+		children: /* @__PURE__ */ f("div", {
 			ref: i,
 			id: r,
 			role: "menu",
 			"aria-label": typeof n.label == "string" ? n.label : void 0,
 			className: e.panel,
 			style: a,
-			children: n.items.map((t) => /* @__PURE__ */ l("div", {
+			children: n.items.map((t) => /* @__PURE__ */ f("div", {
 				role: "menuitem",
 				tabIndex: -1,
 				"aria-disabled": t.disabled,
@@ -100,4 +100,4 @@ function h({ menu: n, menuId: r, floatingRef: i, floatingStyle: a, onClose: o })
 	});
 }
 //#endregion
-export { p as Menubar };
+export { m as Menubar };

package/dist/modal/modal.css

@@ -1 +1 @@
-@layer cascivo.component{._dialog_t1gwg_2{border-radius:var(--cascivo-radius-overlay);max-height:calc(100dvh - var(--cascivo-space-16));opacity:0;transition:opacity var(--cascivo-motion-exit), scale var(--cascivo-motion-exit), display var(--cascivo-duration-150) allow-discrete, overlay var(--cascivo-duration-150) allow-discrete;background:0 0;border:none;padding:0;overflow:visible;scale:.96}._dialog_t1gwg_2[open]{opacity:1;transition:opacity var(--cascivo-motion-enter), scale var(--cascivo-motion-enter), display var(--cascivo-duration-200) allow-discrete, overlay var(--cascivo-duration-200) allow-discrete;scale:1}@starting-style{._dialog_t1gwg_2[open]{opacity:0;scale:.96}}._dialog_t1gwg_2::backdrop{-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px);opacity:0;transition:opacity var(--cascivo-motion-exit), display var(--cascivo-duration-150) allow-discrete, overlay var(--cascivo-duration-150) allow-discrete;background-color:#00000080}._dialog_t1gwg_2[open]::backdrop{opacity:1;transition:opacity var(--cascivo-motion-enter), display var(--cascivo-duration-200) allow-discrete, overlay var(--cascivo-duration-200) allow-discrete}@starting-style{._dialog_t1gwg_2[open]::backdrop{opacity:0}}._dialog_t1gwg_2[data-size=sm]{--_modal-width:24rem}._dialog_t1gwg_2[data-size=md]{--_modal-width:32rem}._dialog_t1gwg_2[data-size=lg]{--_modal-width:48rem}._panel_t1gwg_69{width:var(--_modal-width,32rem);max-width:calc(100vw - var(--cascivo-space-8));background-color:var(--cascivo-color-surface-overlay);border-radius:var(--cascivo-radius-overlay);border:1px solid var(--cascivo-color-border);box-shadow:var(--cascivo-shadow-overlay);overflow:hidden}._header_t1gwg_79{padding:var(--cascivo-space-6);border-block-end:1px solid var(--cascivo-color-border);justify-content:space-between;align-items:center;padding-block-end:var(--cascivo-space-4);display:flex}._dialog_t1gwg_2[data-draggable]{translate:var(--modal-x,0) var(--modal-y,0)}._dialog_t1gwg_2[data-draggable] ._header_t1gwg_79{cursor:grab;touch-action:none;-webkit-user-select:none;user-select:none}._dialog_t1gwg_2[data-draggable] ._header_t1gwg_79:active{cursor:grabbing}._title_t1gwg_101{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}._close_t1gwg_110{width:2rem;height:2rem;font-size:var(--cascivo-text-sm);color:var(--cascivo-color-text-muted);border-radius:var(--cascivo-radius-control);cursor:pointer;transition:color var(--cascivo-duration-150) var(--cascivo-ease-out), background-color var(--cascivo-duration-150) var(--cascivo-ease-out);background:0 0;border:none;justify-content:center;align-items:center;padding:0;display:flex}._close_t1gwg_110:hover{color:var(--cascivo-color-text);background-color:var(--cascivo-color-bg-subtle)}._close_t1gwg_110:focus-visible{box-shadow:var(--cascivo-focus-ring);outline:none}._description_t1gwg_138{padding-inline:var(--cascivo-space-6);font-family:var(--cascivo-font-sans);font-size:var(--cascivo-text-sm);color:var(--cascivo-color-text-subtle);line-height:var(--cascivo-leading-relaxed);margin:0;padding-block-start:var(--cascivo-space-4)}._body_t1gwg_148{padding:var(--cascivo-space-6)}@media (width<=40rem){._dialog_t1gwg_2{max-block-size:90dvh;margin:0}._panel_t1gwg_69{max-block-size:90dvh;inline-size:100%;max-inline-size:100%;border-start-start-radius:var(--cascivo-radius-overlay);border-start-end-radius:var(--cascivo-radius-overlay);border-end-end-radius:0;border-end-start-radius:0;padding-block-end:env(safe-area-inset-bottom,0);overflow-y:auto}}@media (prefers-reduced-motion:reduce){._dialog_t1gwg_2,._dialog_t1gwg_2[open]{transition:none}}}@media (forced-colors:active){._panel_t1gwg_69{border:1px solid buttontext}._close_t1gwg_110:focus-visible{outline-offset:2px;outline:2px solid highlight}}
+@layer cascivo.component{._dialog_hywey_2{border-radius:var(--cascivo-radius-overlay);max-height:calc(100dvh - var(--cascivo-space-16));opacity:0;transition:opacity var(--cascivo-motion-exit), scale var(--cascivo-motion-exit), display var(--cascivo-duration-150) allow-discrete, overlay var(--cascivo-duration-150) allow-discrete;background:0 0;border:none;padding:0;overflow:visible;scale:.96}._dialog_hywey_2[open]{opacity:1;transition:opacity var(--cascivo-motion-enter), scale var(--cascivo-motion-enter), display var(--cascivo-duration-200) allow-discrete, overlay var(--cascivo-duration-200) allow-discrete;scale:1}@starting-style{._dialog_hywey_2[open]{opacity:0;scale:.96}}._dialog_hywey_2::backdrop{-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px);opacity:0;transition:opacity var(--cascivo-motion-exit), display var(--cascivo-duration-150) allow-discrete, overlay var(--cascivo-duration-150) allow-discrete;background-color:#00000080}._dialog_hywey_2[open]::backdrop{opacity:1;transition:opacity var(--cascivo-motion-enter), display var(--cascivo-duration-200) allow-discrete, overlay var(--cascivo-duration-200) allow-discrete}@starting-style{._dialog_hywey_2[open]::backdrop{opacity:0}}._dialog_hywey_2[data-size=sm]{--_modal-width:24rem}._dialog_hywey_2[data-size=md]{--_modal-width:32rem}._dialog_hywey_2[data-size=lg]{--_modal-width:48rem}._panel_hywey_69{width:var(--_modal-width,32rem);max-width:calc(100vw - var(--cascivo-space-8));background-color:var(--cascivo-color-surface-overlay);border-radius:var(--cascivo-radius-overlay);border:1px solid var(--cascivo-color-border);box-shadow:var(--cascivo-shadow-overlay);overflow:hidden}._header_hywey_79{padding:var(--cascivo-space-6);border-block-end:1px solid var(--cascivo-color-border);justify-content:space-between;align-items:center;padding-block-end:var(--cascivo-space-4);display:flex}._dialog_hywey_2[data-draggable]{translate:var(--modal-x,0) var(--modal-y,0)}._dialog_hywey_2[data-draggable] ._header_hywey_79{cursor:grab;touch-action:none;-webkit-user-select:none;user-select:none}._dialog_hywey_2[data-draggable] ._header_hywey_79:active{cursor:grabbing}._title_hywey_101{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}._close_hywey_110{width:2rem;height:2rem;font-size:var(--cascivo-text-sm);color:var(--cascivo-color-text-muted);border-radius:var(--cascivo-radius-control);cursor:pointer;transition:color var(--cascivo-duration-150) var(--cascivo-ease-out), background-color var(--cascivo-duration-150) var(--cascivo-ease-out);background:0 0;border:none;justify-content:center;align-items:center;padding:0;display:flex}._close_hywey_110:hover{color:var(--cascivo-color-text);background-color:var(--cascivo-color-bg-subtle)}._close_hywey_110:focus-visible{box-shadow:var(--cascivo-focus-ring);outline:none}._description_hywey_138{padding-inline:var(--cascivo-space-6);font-family:var(--cascivo-font-sans);font-size:var(--cascivo-text-sm);color:var(--cascivo-color-text-subtle);line-height:var(--cascivo-leading-relaxed);margin:0;padding-block-start:var(--cascivo-space-4)}._body_hywey_148{gap:var(--cascivo-dialog-body-gap,var(--cascivo-space-5));padding:var(--cascivo-space-6);flex-direction:column;display:flex}._footer_hywey_166{justify-content:flex-end;gap:var(--cascivo-space-2);padding:var(--cascivo-space-4) var(--cascivo-space-6);border-block-start:1px solid var(--cascivo-color-border);flex-wrap:wrap;display:flex}@media (width<=40rem){._dialog_hywey_2{max-block-size:90dvh;margin:0}._panel_hywey_69{max-block-size:90dvh;inline-size:100%;max-inline-size:100%;border-start-start-radius:var(--cascivo-radius-overlay);border-start-end-radius:var(--cascivo-radius-overlay);border-end-end-radius:0;border-end-start-radius:0;padding-block-end:env(safe-area-inset-bottom,0);overflow-y:auto}}@media (prefers-reduced-motion:reduce){._dialog_hywey_2,._dialog_hywey_2[open]{transition:none}}}@media (forced-colors:active){._panel_hywey_69{border:1px solid buttontext}._close_hywey_110:focus-visible{outline-offset:2px;outline:2px solid highlight}}