@cascivo/react 0.13.0 → 0.13.1

package/dist/node/accordion/accordion.js

@@ -2,94 +2,96 @@
 
 import e from "./accordion.module.js";
 import { cn as t, useSignal as n, useSignals as r } from "@cascivo/core";
-import { jsx as i, jsxs as a } from "react/jsx-runtime";
-import { createContext as o, useId as s } from "react";
+import { createContext as i, forwardRef as a, useId as o } from "react";
+import { jsx as s, jsxs as c } from "react/jsx-runtime";
 //#region ../components/src/accordion/accordion.tsx
-var c = o(null), l = o(null);
-function u(e) {
+var l = i(null), u = i(null);
+function d(e) {
 	return e === void 0 ? [] : Array.isArray(e) ? e : [e];
 }
-function d({ type: r = "single", defaultValue: a, value: o, onValueChange: l, className: d, children: f }) {
-	let p = s(), m = n(u(o ?? a));
-	o !== void 0 && (m.value = u(o));
+function f({ type: r = "single", defaultValue: i, value: a, onValueChange: c, className: u, children: f }) {
+	let p = o(), m = n(d(a ?? i));
+	a !== void 0 && (m.value = d(a));
 	let h = {
 		open: m,
 		baseId: p,
 		toggle: (e) => {
 			let t = m.value, n;
-			n = r === "multiple" ? t.includes(e) ? t.filter((t) => t !== e) : [...t, e] : t.includes(e) ? [] : [e], o === void 0 && (m.value = n), l?.(r === "multiple" ? n : n[0] ?? "");
+			n = r === "multiple" ? t.includes(e) ? t.filter((t) => t !== e) : [...t, e] : t.includes(e) ? [] : [e], a === void 0 && (m.value = n), c?.(r === "multiple" ? n : n[0] ?? "");
 		}
 	};
-	return /* @__PURE__ */ i(c.Provider, {
+	return /* @__PURE__ */ s(l.Provider, {
 		value: h,
-		children: /* @__PURE__ */ i("div", {
+		children: /* @__PURE__ */ s("div", {
 			"data-type": r,
-			className: t(e.accordion, d),
+			className: t(e.accordion, u),
 			children: f
 		})
 	});
 }
-function f({ value: n, className: r, children: a, ...o }) {
-	return /* @__PURE__ */ i(l.Provider, {
+function p({ value: n, className: r, children: i, ...a }) {
+	return /* @__PURE__ */ s(u.Provider, {
 		value: { value: n },
-		children: /* @__PURE__ */ i("div", {
+		children: /* @__PURE__ */ s("div", {
 			"data-value": n,
 			className: t(e.item, r),
-			...o,
-			children: a
+			...a,
+			children: i
 		})
 	});
 }
-function p(e) {
-	return /* @__PURE__ */ i(c.Consumer, { children: (t) => /* @__PURE__ */ i(l.Consumer, { children: (n) => t && n ? /* @__PURE__ */ i(m, {
-		store: t,
-		item: n,
+var m = a(function(e, t) {
+	return /* @__PURE__ */ s(l.Consumer, { children: (n) => /* @__PURE__ */ s(u.Consumer, { children: (r) => n && r ? /* @__PURE__ */ s(h, {
+		store: n,
+		item: r,
+		buttonRef: t,
 		...e
 	}) : null }) });
-}
-function m({ store: n, item: o, className: s, children: c, ...l }) {
+});
+function h({ store: n, item: i, className: a, children: o, buttonRef: l, ...u }) {
 	r();
-	let u = n.open.value.includes(o.value);
-	return /* @__PURE__ */ i("h3", {
+	let d = n.open.value.includes(i.value);
+	return /* @__PURE__ */ s("h3", {
 		className: e.heading,
-		children: /* @__PURE__ */ a("button", {
+		children: /* @__PURE__ */ c("button", {
 			type: "button",
-			id: `${n.baseId}-trigger-${o.value}`,
-			"aria-expanded": u,
-			"aria-controls": `${n.baseId}-content-${o.value}`,
-			"data-state": u ? "open" : "closed",
-			className: t(e.trigger, s),
-			onClick: () => n.toggle(o.value),
-			...l,
-			children: [/* @__PURE__ */ i("span", { children: c }), /* @__PURE__ */ i("span", {
+			id: `${n.baseId}-trigger-${i.value}`,
+			"aria-expanded": d,
+			"aria-controls": `${n.baseId}-content-${i.value}`,
+			"data-state": d ? "open" : "closed",
+			className: t(e.trigger, a),
+			onClick: () => n.toggle(i.value),
+			ref: l,
+			...u,
+			children: [/* @__PURE__ */ s("span", { children: o }), /* @__PURE__ */ s("span", {
 				className: e.indicator,
 				"aria-hidden": "true"
 			})]
 		})
 	});
 }
-function h(e) {
-	return /* @__PURE__ */ i(c.Consumer, { children: (t) => /* @__PURE__ */ i(l.Consumer, { children: (n) => t && n ? /* @__PURE__ */ i(g, {
+function g(e) {
+	return /* @__PURE__ */ s(l.Consumer, { children: (t) => /* @__PURE__ */ s(u.Consumer, { children: (n) => t && n ? /* @__PURE__ */ s(_, {
 		store: t,
 		item: n,
 		...e
 	}) : null }) });
 }
-function g({ store: n, item: a, className: o, children: s, ...c }) {
+function _({ store: n, item: i, className: a, children: o, ...c }) {
 	r();
-	let l = n.open.value.includes(a.value);
-	return /* @__PURE__ */ i("div", {
+	let l = n.open.value.includes(i.value);
+	return /* @__PURE__ */ s("div", {
 		role: "region",
-		id: `${n.baseId}-content-${a.value}`,
-		"aria-labelledby": `${n.baseId}-trigger-${a.value}`,
+		id: `${n.baseId}-content-${i.value}`,
+		"aria-labelledby": `${n.baseId}-trigger-${i.value}`,
 		"data-state": l ? "open" : "closed",
-		className: t(e.content, o),
+		className: t(e.content, a),
 		...c,
-		children: /* @__PURE__ */ i("div", {
+		children: /* @__PURE__ */ s("div", {
 			className: e.contentInner,
-			children: s
+			children: o
 		})
 	});
 }
 //#endregion
-export { d as Accordion, h as AccordionContent, f as AccordionItem, p as AccordionTrigger };
+export { f as Accordion, g as AccordionContent, p as AccordionItem, m as AccordionTrigger };

package/dist/node/action-sheet/action-sheet.js

@@ -2,9 +2,9 @@
 
 import e from "./action-sheet.module.js";
 import { DismissableLayer as t, FocusScope as n, Portal as r, Presence as i, cn as a, useControllableSignal as o, useRovingFocus as s, useSignals as c } from "@cascivo/core";
-import { builtin as l, t as u } from "@cascivo/i18n";
-import { jsx as d, jsxs as f } from "react/jsx-runtime";
-import { useId as p } from "react";
+import { useId as l } from "react";
+import { builtin as u, t as d } from "@cascivo/i18n";
+import { jsx as f, jsxs as p } from "react/jsx-runtime";
 //#region ../components/src/action-sheet/action-sheet.tsx
 function m({ open: m, defaultOpen: h, onOpenChange: g, actions: _, title: v, description: y, showCancel: b = !0, labels: x, className: S }) {
 	c();
@@ -15,42 +15,42 @@ function m({ open: m, defaultOpen: h, onOpenChange: g, actions: _, title: v, des
 	}), T = s({
 		orientation: "vertical",
 		loop: !0
-	}), E = p(), D = p(), O = x?.cancel ?? u(l.actionSheet.cancel), k = x?.label ?? u(l.actionSheet.label), A = (e) => {
+	}), E = l(), D = l(), O = x?.cancel ?? d(u.actionSheet.cancel), k = x?.label ?? d(u.actionSheet.label), A = (e) => {
 		e.disabled || (e.onSelect(), w(!1));
 	}, j = _.length;
-	return /* @__PURE__ */ d(r, { children: /* @__PURE__ */ d(i, {
+	return /* @__PURE__ */ f(r, { children: /* @__PURE__ */ f(i, {
 		present: C,
-		children: /* @__PURE__ */ d("div", {
+		children: /* @__PURE__ */ f("div", {
 			className: e.overlay,
-			children: /* @__PURE__ */ d(t, {
+			children: /* @__PURE__ */ f(t, {
 				onDismiss: () => w(!1),
-				children: /* @__PURE__ */ d(n, {
+				children: /* @__PURE__ */ f(n, {
 					trapped: !0,
 					restoreFocus: !0,
 					autoFocus: !0,
-					children: /* @__PURE__ */ f("div", {
+					children: /* @__PURE__ */ p("div", {
 						role: "menu",
 						"aria-label": v ? void 0 : k,
 						"aria-labelledby": v ? E : void 0,
 						"aria-describedby": y ? D : void 0,
 						className: a(e.sheet, S),
-						children: [/* @__PURE__ */ f("div", {
+						children: [/* @__PURE__ */ p("div", {
 							className: e.group,
-							children: [(v || y) && /* @__PURE__ */ f("div", {
+							children: [(v || y) && /* @__PURE__ */ p("div", {
 								className: e.heading,
 								role: "presentation",
-								children: [v && /* @__PURE__ */ d("p", {
+								children: [v && /* @__PURE__ */ f("p", {
 									id: E,
 									className: e.title,
 									children: v
-								}), y && /* @__PURE__ */ d("p", {
+								}), y && /* @__PURE__ */ f("p", {
 									id: D,
 									className: e.description,
 									children: y
 								})]
 							}), _.map((t, n) => {
 								let r = T.getItemProps(n);
-								return /* @__PURE__ */ d("button", {
+								return /* @__PURE__ */ f("button", {
 									ref: r.ref,
 									type: "button",
 									role: "menuitem",
@@ -64,11 +64,11 @@ function m({ open: m, defaultOpen: h, onOpenChange: g, actions: _, title: v, des
 									children: t.label
 								}, n);
 							})]
-						}), b && /* @__PURE__ */ d("div", {
+						}), b && /* @__PURE__ */ f("div", {
 							className: e.group,
 							children: (() => {
 								let t = T.getItemProps(j);
-								return /* @__PURE__ */ d("button", {
+								return /* @__PURE__ */ f("button", {
 									ref: t.ref,
 									type: "button",
 									role: "menuitem",

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

@@ -1,61 +1,61 @@
 "use client";
 
 import e from "./alert-dialog.module.js";
-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";
+import { focusElement as t, useEffectPropSignal as n, useId as r, useSignalEffect as i } from "@cascivo/core";
+import { useRef as a } from "react";
+import { builtin as o, t as s } from "@cascivo/i18n";
+import { jsx as c, jsxs as l } from "react/jsx-runtime";
 //#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), _ = 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(() => {
-		let e = g.current;
-		if (e) if (y.value) {
+function u({ open: u, title: d, description: f, onConfirm: p, onCancel: m, labels: h, variant: g = "default" }) {
+	let _ = a(null), v = r("cascivo-alert-dialog-title"), y = r("cascivo-alert-dialog-desc"), b = n(u), x = a(null), S = a(m);
+	S.current = m;
+	let C = a(p);
+	return C.current = p, i(() => {
+		let e = _.current;
+		if (e) if (b.value) {
 			try {
 				e.showPopover();
 			} catch {}
-			requestAnimationFrame(() => b.current?.focus());
+			requestAnimationFrame(() => t(x.current));
 		} else try {
 			e.hidePopover();
 		} catch {}
-	}), /* @__PURE__ */ o("div", {
-		ref: g,
+	}), /* @__PURE__ */ c("div", {
+		ref: _,
 		popover: "manual",
 		role: "alertdialog",
 		"aria-modal": "true",
-		"aria-labelledby": _,
-		"aria-describedby": v,
-		"data-state": l ? "open" : "closed",
-		"data-variant": h,
+		"aria-labelledby": v,
+		"aria-describedby": y,
+		"data-state": u ? "open" : "closed",
+		"data-variant": g,
 		className: e.dialog,
-		children: /* @__PURE__ */ s("div", {
+		children: /* @__PURE__ */ l("div", {
 			className: e.content,
 			children: [
-				/* @__PURE__ */ o("p", {
-					id: _,
+				/* @__PURE__ */ c("p", {
+					id: v,
 					className: e.title,
-					children: u
+					children: d
 				}),
-				/* @__PURE__ */ o("p", {
-					id: v,
+				/* @__PURE__ */ c("p", {
+					id: y,
 					className: e.description,
-					children: d
+					children: f
 				}),
-				/* @__PURE__ */ s("div", {
+				/* @__PURE__ */ l("div", {
 					className: e.actions,
-					children: [/* @__PURE__ */ o("button", {
-						ref: b,
+					children: [/* @__PURE__ */ c("button", {
+						ref: x,
 						type: "button",
 						className: e.cancel,
-						onClick: () => x.current(),
-						children: m?.cancel ?? a(i.alertDialog.cancel)
-					}), /* @__PURE__ */ o("button", {
+						onClick: () => S.current(),
+						children: h?.cancel ?? s(o.alertDialog.cancel)
+					}), /* @__PURE__ */ c("button", {
 						type: "button",
 						className: e.confirm,
-						onClick: () => S.current(),
-						children: m?.confirm ?? a(i.alertDialog.confirm)
+						onClick: () => C.current(),
+						children: h?.confirm ?? s(o.alertDialog.confirm)
 					})]
 				})
 			]
@@ -63,4 +63,4 @@ function l({ open: l, title: u, description: d, onConfirm: f, onCancel: p, label
 	});
 }
 //#endregion
-export { l as AlertDialog };
+export { u as AlertDialog };

package/dist/node/app-shell/app-shell.js

@@ -2,14 +2,14 @@
 
 import e from "./app-shell.module.js";
 import { cn as t, useSignal as n, useSignalEffect as r, useSignals as i } from "@cascivo/core";
-import { Fragment as a, jsx as o, jsxs as s } from "react/jsx-runtime";
-import { cloneElement as c, isValidElement as l, useRef as u } from "react";
+import { cloneElement as a, isValidElement as o, useRef as s } from "react";
+import { Fragment as c, jsx as l, jsxs as u } from "react/jsx-runtime";
 //#region ../components/src/app-shell/app-shell.tsx
 function d({ header: d, nav: f, children: p, footer: m, open: h, defaultOpen: g, onOpenChange: _, className: v, ...y }) {
 	i();
 	let b = h !== void 0, x = n(h ?? g ?? !0);
 	b && (x.value = h);
-	let S = u(null), C = u(null);
+	let S = s(null), C = s(null);
 	function w(e) {
 		b || (x.value = e), _?.(e);
 	}
@@ -33,44 +33,46 @@ function d({ header: d, nav: f, children: p, footer: m, open: h, defaultOpen: g,
 			t && e.contains(document.activeElement) && t.focus();
 		}
 	});
-	let E = l(d) && f ? c(d, {
+	let E = o(d) && f ? a(d, {
 		onMenuClick: T,
 		menuExpanded: x.value
 	}) : d;
-	return /* @__PURE__ */ s("div", {
+	return /* @__PURE__ */ u("div", {
 		className: t(e.shell, v),
 		"data-open": x.value,
 		...y,
 		children: [
-			/* @__PURE__ */ o("div", {
+			/* @__PURE__ */ l("div", {
 				className: e.header,
 				children: E
 			}),
-			/* @__PURE__ */ s("div", {
+			/* @__PURE__ */ u("div", {
 				className: e.body,
-				children: [f && /* @__PURE__ */ s(a, { children: [/* @__PURE__ */ o("div", {
+				children: [f && /* @__PURE__ */ u(c, { children: [/* @__PURE__ */ l("div", {
 					ref: S,
 					className: e.navWrapper,
 					"data-open": x.value,
 					"data-testid": "app-shell-nav",
-					children: /* @__PURE__ */ o("div", {
+					"data-cascivo-appshell-nav": "",
+					children: /* @__PURE__ */ l("div", {
 						className: e.navInner,
 						children: f
 					})
-				}), /* @__PURE__ */ o("div", {
+				}), /* @__PURE__ */ l("div", {
 					className: e.scrim,
 					"data-open": x.value,
 					"data-testid": "app-shell-scrim",
 					"aria-hidden": "true",
 					onClick: () => w(!1)
-				})] }), /* @__PURE__ */ o("main", {
+				})] }), /* @__PURE__ */ l("main", {
 					id: "cascade-main",
 					tabIndex: -1,
 					className: e.main,
+					"data-cascivo-appshell-main": "",
 					children: p
 				})]
 			}),
-			m && /* @__PURE__ */ o("div", {
+			m && /* @__PURE__ */ l("div", {
 				className: e.footer,
 				children: m
 			})

package/dist/node/app-shell/app-shell.module.js

@@ -1,14 +1,14 @@
 "use client";
 
 var e = {
-	shell: "_shell_11je2_4",
-	header: "_header_11je2_16",
-	body: "_body_11je2_21",
-	navWrapper: "_navWrapper_11je2_32",
-	navInner: "_navInner_11je2_58",
-	scrim: "_scrim_11je2_70",
-	main: "_main_11je2_87",
-	footer: "_footer_11je2_93"
+	shell: "_shell_1y4cv_4",
+	header: "_header_1y4cv_16",
+	body: "_body_1y4cv_21",
+	navWrapper: "_navWrapper_1y4cv_32",
+	navInner: "_navInner_1y4cv_58",
+	scrim: "_scrim_1y4cv_70",
+	main: "_main_1y4cv_87",
+	footer: "_footer_1y4cv_93"
 };
 //#endregion
 export { e as default };

package/dist/node/avatar-group/avatar-group.js

@@ -3,19 +3,19 @@
 import { Avatar as e } from "../avatar/avatar.js";
 import t from "./avatar-group.module.js";
 import { cn as n } from "@cascivo/core";
-import { builtin as r, t as i } from "@cascivo/i18n";
-import { jsx as a, jsxs as o } from "react/jsx-runtime";
-import { Children as s } from "react";
+import { Children as r } from "react";
+import { builtin as i, t as a } from "@cascivo/i18n";
+import { jsx as o, jsxs as s } from "react/jsx-runtime";
 //#region ../components/src/avatar-group/avatar-group.tsx
 function c({ max: c, total: l, spacing: u = "md", isGrid: d = !1, labels: f, className: p, children: m, ...h }) {
-	let g = s.toArray(m), _ = c == null ? g : g.slice(0, c), v = (l ?? g.length) - _.length, y = f?.more?.(v) ?? i(r.avatarGroup.more, { count: v });
-	return /* @__PURE__ */ o("div", {
+	let g = r.toArray(m), _ = c == null ? g : g.slice(0, c), v = (l ?? g.length) - _.length, y = f?.more?.(v) ?? a(i.avatarGroup.more, { count: v });
+	return /* @__PURE__ */ s("div", {
 		role: "group",
 		"data-spacing": u,
 		"data-grid": d || void 0,
 		className: n(t.group, p),
 		...h,
-		children: [_, v > 0 && /* @__PURE__ */ a(e, {
+		children: [_, v > 0 && /* @__PURE__ */ o(e, {
 			className: t.overflow,
 			fallback: `+${v}`,
 			"aria-label": y

package/dist/node/bottom-sheet/bottom-sheet.js

@@ -2,9 +2,9 @@
 
 import e from "./bottom-sheet.module.js";
 import { DismissableLayer as t, FocusScope as n, Portal as r, Presence as i, cn as a, useControllableSignal as o, useDraggable as s, useScrollLock 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 { useId as m } from "react";
+import { useId 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/bottom-sheet/bottom-sheet.tsx
 var h = 120, g = .6, _ = .1, v = [.5, .92];
 function y({ open: y, defaultOpen: b, onOpenChange: x, snapPoints: S = v, activeSnap: C, defaultSnap: w = 0, onSnapChange: T, title: E, description: D, children: O, labels: k, className: A }) {
@@ -33,22 +33,22 @@ function y({ open: y, defaultOpen: b, onOpenChange: x, snapPoints: S = v, active
 			for (let e = 1; e < F.length; e++) Math.abs((F[e] ?? 0) - r) < Math.abs((F[i] ?? 0) - r) && (i = e);
 			P(i);
 		}
-	}), W = m(), G = m(), K = k?.close ?? d(u.bottomSheet.close), q = k?.handle ?? d(u.bottomSheet.handle), J = `${(1 - R / I) * 100}%`, Y = {
+	}), W = u(), G = u(), K = k?.close ?? f(d.bottomSheet.close), q = k?.handle ?? f(d.bottomSheet.handle), J = `${(1 - R / I) * 100}%`, Y = {
 		"--_sheet-height": `${I * 100}dvh`,
 		"--_sheet-y": J,
 		"--_sheet-drag": `${B.value.y}px`
 	};
-	return /* @__PURE__ */ f(r, { children: /* @__PURE__ */ f(i, {
+	return /* @__PURE__ */ p(r, { children: /* @__PURE__ */ p(i, {
 		present: j,
-		children: /* @__PURE__ */ f("div", {
+		children: /* @__PURE__ */ p("div", {
 			className: e.overlay,
-			children: /* @__PURE__ */ f(t, {
+			children: /* @__PURE__ */ p(t, {
 				onDismiss: () => M(!1),
-				children: /* @__PURE__ */ f(n, {
+				children: /* @__PURE__ */ p(n, {
 					trapped: !0,
 					restoreFocus: !0,
 					autoFocus: !0,
-					children: /* @__PURE__ */ p("div", {
+					children: /* @__PURE__ */ m("div", {
 						role: "dialog",
 						"aria-modal": "true",
 						"aria-labelledby": E ? W : void 0,
@@ -56,38 +56,38 @@ function y({ open: y, defaultOpen: b, onOpenChange: x, snapPoints: S = v, active
 						"data-dragging": H.value ? "" : void 0,
 						className: a(e.panel, A),
 						style: Y,
-						children: [/* @__PURE__ */ p("div", {
+						children: [/* @__PURE__ */ m("div", {
 							className: e.header,
 							ref: z,
 							children: [
-								/* @__PURE__ */ f("div", {
+								/* @__PURE__ */ p("div", {
 									className: e.handle,
 									role: "separator",
 									"aria-label": q,
 									"aria-orientation": "horizontal"
 								}),
-								(E || D) && /* @__PURE__ */ p("div", {
+								(E || D) && /* @__PURE__ */ m("div", {
 									className: e.heading,
-									children: [E && /* @__PURE__ */ f("h2", {
+									children: [E && /* @__PURE__ */ p("h2", {
 										id: W,
 										className: e.title,
 										children: E
-									}), D && /* @__PURE__ */ f("p", {
+									}), D && /* @__PURE__ */ p("p", {
 										id: G,
 										className: e.description,
 										children: D
 									})]
 								}),
-								/* @__PURE__ */ f("button", {
+								/* @__PURE__ */ p("button", {
 									type: "button",
 									"aria-label": K,
 									onClick: () => M(!1),
 									className: e.close,
-									children: /* @__PURE__ */ f("svg", {
+									children: /* @__PURE__ */ p("svg", {
 										"aria-hidden": "true",
 										viewBox: "0 0 16 16",
 										className: e.closeIcon,
-										children: /* @__PURE__ */ f("path", {
+										children: /* @__PURE__ */ p("path", {
 											d: "M4 4l8 8M12 4l-8 8",
 											fill: "none",
 											stroke: "currentColor",
@@ -97,7 +97,7 @@ function y({ open: y, defaultOpen: b, onOpenChange: x, snapPoints: S = v, active
 									})
 								})
 							]
-						}), /* @__PURE__ */ f("div", {
+						}), /* @__PURE__ */ p("div", {
 							className: e.body,
 							children: O
 						})]

package/dist/node/button/button.js

@@ -3,29 +3,32 @@
 import { Spinner as e } from "../spinner/spinner.js";
 import t from "./button.module.js";
 import { Slot as n, cn 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/button/button.tsx
-function o({ variant: o = "primary", size: s = "md", loading: c = !1, asChild: l = !1, className: u, disabled: d, children: f, ...p }) {
-	let m = {
-		"data-variant": o,
+var s = i(function({ variant: i = "primary", size: s = "md", loading: c = !1, asChild: l = !1, className: u, disabled: d, children: f, ...p }, m) {
+	let h = {
+		"data-variant": i,
 		"data-size": s,
 		"data-state": c ? "loading" : "idle",
 		"aria-busy": c || void 0,
 		className: r(t.button, u)
 	};
-	return l ? /* @__PURE__ */ i(n, {
-		...m,
+	return l ? /* @__PURE__ */ a(n, {
+		...h,
+		ref: m,
 		...p,
 		children: f
-	}) : /* @__PURE__ */ a("button", {
-		...m,
+	}) : /* @__PURE__ */ o("button", {
+		...h,
+		ref: m,
 		disabled: d || c,
 		...p,
-		children: [c && /* @__PURE__ */ i(e, {
+		children: [c && /* @__PURE__ */ a(e, {
 			size: "sm",
 			"aria-hidden": "true"
-		}), /* @__PURE__ */ i("span", { children: f })]
+		}), /* @__PURE__ */ a("span", { children: f })]
 	});
-}
+});
 //#endregion
-export { o as Button };
+export { s as Button };

package/dist/node/button-group/button-group.js

@@ -2,24 +2,24 @@
 
 import e from "./button-group.module.js";
 import { cn as t } from "@cascivo/core";
-import { jsx as n } from "react/jsx-runtime";
-import { forwardRef as r } from "react";
+import { forwardRef as n } from "react";
+import { jsx as r } from "react/jsx-runtime";
 //#region ../components/src/button-group/button-group.tsx
 function i(e) {
 	return Array.from(e.querySelectorAll("button, a[href], [tabindex]")).filter((e) => !e.hasAttribute("disabled") && e.getAttribute("aria-disabled") !== "true");
 }
-var a = r(function({ orientation: r = "horizontal", size: a = "md", roving: o = !1, loop: s = !1, className: c, onKeyDown: l, children: u, ...d }, f) {
-	return /* @__PURE__ */ n("div", {
+var a = n(function({ orientation: n = "horizontal", size: a = "md", roving: o = !1, loop: s = !1, className: c, onKeyDown: l, children: u, ...d }, f) {
+	return /* @__PURE__ */ r("div", {
 		role: "group",
-		"data-orientation": r,
+		"data-orientation": n,
 		"data-size": a,
 		className: t(e.buttonGroup, c),
 		ref: f,
 		onKeyDown: (e) => {
 			if (l?.(e), !o) return;
-			let t = r === "horizontal", n = t ? "ArrowRight" : "ArrowDown", a = t ? "ArrowLeft" : "ArrowUp";
+			let t = n === "horizontal", r = t ? "ArrowRight" : "ArrowDown", a = t ? "ArrowLeft" : "ArrowUp";
 			if (![
-				n,
+				r,
 				a,
 				"Home",
 				"End"
@@ -29,7 +29,7 @@ var a = r(function({ orientation: r = "horizontal", size: a = "md", roving: o =
 			let u = c.indexOf(document.activeElement);
 			if (u === -1) return;
 			let d = u;
-			e.key === n ? d = u + 1 : e.key === a ? d = u - 1 : e.key === "Home" ? d = 0 : e.key === "End" && (d = c.length - 1), d < 0 && (d = s ? c.length - 1 : 0), d >= c.length && (d = s ? 0 : c.length - 1), e.preventDefault(), c[d]?.focus();
+			e.key === r ? d = u + 1 : e.key === a ? d = u - 1 : e.key === "Home" ? d = 0 : e.key === "End" && (d = c.length - 1), d < 0 && (d = s ? c.length - 1 : 0), d >= c.length && (d = s ? 0 : c.length - 1), e.preventDefault(), c[d]?.focus();
 		},
 		...d,
 		children: u