@cascivo/react 0.12.0 → 0.13.1

package/dist/node/badge/badge.js

@@ -1,17 +1,24 @@
 "use client";
 
 import e from "./badge.module.js";
-import { cn as t } from "@cascivo/core";
-import { jsx as n } from "react/jsx-runtime";
+import { cn as t, normalizeTone as n } from "@cascivo/core";
+import { jsx as r } from "react/jsx-runtime";
 //#region ../components/src/badge/badge.tsx
-function r({ variant: r = "default", size: i = "md", className: a, children: o, ...s }) {
-	return /* @__PURE__ */ n("span", {
-		"data-variant": r,
-		"data-size": i,
-		className: t(e.badge, a),
-		...s,
-		children: o
+var i = {
+	neutral: "default",
+	info: "info",
+	success: "success",
+	warning: "warning",
+	danger: "destructive"
+};
+function a({ variant: a = "default", size: o = "md", className: s, children: c, ...l }) {
+	return /* @__PURE__ */ r("span", {
+		"data-variant": i[n(a)] ?? a,
+		"data-size": o,
+		className: t(e.badge, s),
+		...l,
+		children: c
 	});
 }
 //#endregion
-export { r as Badge };
+export { a as Badge };

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/button.module.js

@@ -1,5 +1,5 @@
 "use client";
 
-var e = { button: "_button_11p57_2" };
+var e = { button: "_button_131qn_2" };
 //#endregion
 export { e as default };

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

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

@@ -1,14 +1,14 @@
 "use client";
 
 var e = {
-	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"
+	card: "_card_ssezx_2",
+	header: "_header_ssezx_12",
+	content: "_content_ssezx_12",
+	footer: "_footer_ssezx_12",
+	headerRow: "_headerRow_ssezx_67",
+	headerMain: "_headerMain_ssezx_75",
+	headerActions: "_headerActions_ssezx_82",
+	title: "_title_ssezx_90"
 };
 //#endregion
 export { e as default };

package/dist/node/carousel/carousel.js

@@ -2,20 +2,20 @@
 
 import e from "./carousel.module.js";
 import { cn as t, useControllableSignal as n, useRovingFocus as r, useSignalEffect 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 { useId as u, useRef as d } from "react";
+import { useId as o, useRef as s } from "react";
+import { builtin as c, t as l } from "@cascivo/i18n";
+import { jsx as u, jsxs as d } from "react/jsx-runtime";
 //#region ../components/src/carousel/carousel.tsx
 function f(e, t) {
 	return t || (e == null ? [] : Array.isArray(e) ? e : [e]);
 }
 function p({ children: p, slides: m, index: h, defaultIndex: g, onIndexChange: _, loop: v = !1, className: y, labels: b }) {
 	a();
-	let x = u(), S = f(p, m), C = S.length, [w, T] = n({
+	let x = o(), S = f(p, m), C = S.length, [w, T] = n({
 		value: h,
 		defaultValue: g ?? 0,
 		onChange: _
-	}), E = d(null), D = d([]), O = d(!1), { getItemProps: k, setActiveIndex: A } = r({
+	}), E = s(null), D = s([]), O = s(!1), { getItemProps: k, setActiveIndex: A } = r({
 		orientation: "horizontal",
 		loop: v
 	});
@@ -40,28 +40,28 @@ function p({ children: p, slides: m, index: h, defaultIndex: g, onIndexChange: _
 		}), window.setTimeout(() => {
 			O.current = !1;
 		}, 400)), T(t), A(t);
-	}, M = b?.region ?? s(o.carousel.region), N = b?.previous ?? s(o.carousel.previous), P = b?.next ?? s(o.carousel.next);
-	return /* @__PURE__ */ l("section", {
+	}, M = b?.region ?? l(c.carousel.region), N = b?.previous ?? l(c.carousel.previous), P = b?.next ?? l(c.carousel.next);
+	return /* @__PURE__ */ d("section", {
 		className: t(e.carousel, y),
 		"aria-roledescription": "carousel",
 		"aria-label": M,
-		children: [/* @__PURE__ */ l("div", {
+		children: [/* @__PURE__ */ d("div", {
 			className: e.viewport,
 			children: [
-				/* @__PURE__ */ c("button", {
+				/* @__PURE__ */ u("button", {
 					type: "button",
 					className: t(e.nav, e.prev),
 					"aria-label": N,
 					"aria-controls": `${x}-track`,
 					disabled: !v && w.value <= 0,
 					onClick: () => j(w.value - 1),
-					children: /* @__PURE__ */ c("svg", {
+					children: /* @__PURE__ */ u("svg", {
 						width: "20",
 						height: "20",
 						viewBox: "0 0 24 24",
 						fill: "none",
 						"aria-hidden": "true",
-						children: /* @__PURE__ */ c("path", {
+						children: /* @__PURE__ */ u("path", {
 							d: "m15 18-6-6 6-6",
 							stroke: "currentColor",
 							strokeWidth: "2",
@@ -70,18 +70,18 @@ function p({ children: p, slides: m, index: h, defaultIndex: g, onIndexChange: _
 						})
 					})
 				}),
-				/* @__PURE__ */ c("div", {
+				/* @__PURE__ */ u("div", {
 					ref: E,
 					id: `${x}-track`,
 					className: e.track,
-					children: S.map((t, n) => /* @__PURE__ */ c("div", {
+					children: S.map((t, n) => /* @__PURE__ */ u("div", {
 						ref: (e) => {
 							D.current[n] = e;
 						},
 						className: e.slide,
 						role: "group",
 						"aria-roledescription": "slide",
-						"aria-label": s(o.carousel.slide, {
+						"aria-label": l(c.carousel.slide, {
 							n: n + 1,
 							total: C
 						}),
@@ -89,20 +89,20 @@ function p({ children: p, slides: m, index: h, defaultIndex: g, onIndexChange: _
 						children: t
 					}, n))
 				}),
-				/* @__PURE__ */ c("button", {
+				/* @__PURE__ */ u("button", {
 					type: "button",
 					className: t(e.nav, e.next),
 					"aria-label": P,
 					"aria-controls": `${x}-track`,
 					disabled: !v && w.value >= C - 1,
 					onClick: () => j(w.value + 1),
-					children: /* @__PURE__ */ c("svg", {
+					children: /* @__PURE__ */ u("svg", {
 						width: "20",
 						height: "20",
 						viewBox: "0 0 24 24",
 						fill: "none",
 						"aria-hidden": "true",
-						children: /* @__PURE__ */ c("path", {
+						children: /* @__PURE__ */ u("path", {
 							d: "m9 18 6-6-6-6",
 							stroke: "currentColor",
 							strokeWidth: "2",
@@ -112,17 +112,17 @@ function p({ children: p, slides: m, index: h, defaultIndex: g, onIndexChange: _
 					})
 				})
 			]
-		}), /* @__PURE__ */ c("div", {
+		}), /* @__PURE__ */ u("div", {
 			className: e.dots,
 			role: "group",
 			"aria-label": M,
 			children: S.map((t, n) => {
 				let r = k(n);
-				return /* @__PURE__ */ c("button", {
+				return /* @__PURE__ */ u("button", {
 					ref: r.ref,
 					type: "button",
 					className: e.dot,
-					"aria-label": s(o.carousel.goTo, { n: n + 1 }),
+					"aria-label": l(c.carousel.goTo, { n: n + 1 }),
 					"aria-current": n === w.value || void 0,
 					"data-active": n === w.value || void 0,
 					tabIndex: r.tabIndex,

package/dist/node/checkbox/checkbox.js

@@ -1,38 +1,38 @@
 "use client";
 
 import e from "./checkbox.module.js";
-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";
+import { cn as t, composeRefs as n, useEffectPropSignal as r, useSignalEffect as i } from "@cascivo/core";
+import { forwardRef as a, useRef as o } from "react";
+import { jsx as s, jsxs as c } from "react/jsx-runtime";
 //#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);
-	r(() => {
-		p.current && (p.current.indeterminate = m.value);
+var l = a(function({ label: a, indeterminate: l = !1, className: u, id: d, disabled: f, ...p }, m) {
+	let h = o(null), g = r(l);
+	i(() => {
+		h.current && (h.current.indeterminate = g.value);
 	});
-	let h = u ?? (s ? `cascade-checkbox-${s.toLowerCase().replace(/\s+/g, "-")}` : void 0);
-	return /* @__PURE__ */ a("label", {
-		className: t(e.wrapper, l),
-		"data-disabled": d || void 0,
+	let _ = d ?? (a ? `cascade-checkbox-${a.toLowerCase().replace(/\s+/g, "-")}` : void 0);
+	return /* @__PURE__ */ c("label", {
+		className: t(e.wrapper, u),
+		"data-disabled": f || void 0,
 		children: [
-			/* @__PURE__ */ i("input", {
-				ref: p,
-				id: h,
+			/* @__PURE__ */ s("input", {
+				ref: n(m, h),
+				id: _,
 				type: "checkbox",
 				className: e.input,
-				disabled: d,
-				...f
+				disabled: f,
+				...p
 			}),
-			/* @__PURE__ */ i("span", {
+			/* @__PURE__ */ s("span", {
 				className: e.control,
 				"aria-hidden": "true"
 			}),
-			s && /* @__PURE__ */ i("span", {
+			a && /* @__PURE__ */ s("span", {
 				className: e.label,
-				children: s
+				children: a
 			})
 		]
 	});
-}
+});
 //#endregion
-export { s as Checkbox };
+export { l as Checkbox };

package/dist/node/checkbox-card/checkbox-card.js

@@ -2,28 +2,30 @@
 
 import e from "./checkbox-card.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/checkbox-card/checkbox-card.tsx
-function i({ title: i, description: a, checked: o, defaultChecked: s, disabled: c, onCheckedChange: l, className: u, ...d }) {
-	return /* @__PURE__ */ r("label", {
+var a = n(function({ title: n, description: a, checked: o, defaultChecked: s, disabled: c, onCheckedChange: l, className: u, ...d }, f) {
+	return /* @__PURE__ */ i("label", {
 		className: t(e.card, u),
 		"data-disabled": c || void 0,
 		children: [
-			/* @__PURE__ */ n("input", {
+			/* @__PURE__ */ r("input", {
 				type: "checkbox",
 				className: e.input,
 				disabled: c,
 				...o === void 0 ? { defaultChecked: s } : { checked: o },
 				onChange: (e) => l?.(e.currentTarget.checked),
+				ref: f,
 				...d
 			}),
-			/* @__PURE__ */ n("span", {
+			/* @__PURE__ */ r("span", {
 				className: e.glyph,
 				"aria-hidden": "true",
-				children: /* @__PURE__ */ n("svg", {
+				children: /* @__PURE__ */ r("svg", {
 					viewBox: "0 0 12 12",
 					className: e.check,
-					children: /* @__PURE__ */ n("path", {
+					children: /* @__PURE__ */ r("path", {
 						d: "M2.5 6.5 5 9l4.5-5.5",
 						fill: "none",
 						stroke: "currentColor",
@@ -31,18 +33,18 @@ function i({ title: i, description: a, checked: o, defaultChecked: s, disabled:
 					})
 				})
 			}),
-			/* @__PURE__ */ r("span", {
+			/* @__PURE__ */ i("span", {
 				className: e.body,
-				children: [/* @__PURE__ */ n("span", {
+				children: [/* @__PURE__ */ r("span", {
 					className: e.title,
-					children: i
-				}), a && /* @__PURE__ */ n("span", {
+					children: n
+				}), a && /* @__PURE__ */ r("span", {
 					className: e.description,
 					children: a
 				})]
 			})
 		]
 	});
-}
+});
 //#endregion
-export { i as CheckboxCard };
+export { a as CheckboxCard };

package/dist/node/collapsible/collapsible.js

@@ -2,8 +2,8 @@
 
 import e from "./collapsible.module.js";
 import { cn as t, useControllableSignal as n, useSignals as r } from "@cascivo/core";
-import { jsx as i, jsxs as a } from "react/jsx-runtime";
-import { useId as o } from "react";
+import { useId as i } from "react";
+import { jsx as a, jsxs as o } from "react/jsx-runtime";
 //#region ../components/src/collapsible/collapsible.tsx
 function s({ open: s, defaultOpen: c = !1, onOpenChange: l, trigger: u, disabled: d = !1, className: f, children: p }) {
 	r();
@@ -11,11 +11,11 @@ function s({ open: s, defaultOpen: c = !1, onOpenChange: l, trigger: u, disabled
 		...s === void 0 ? {} : { value: s },
 		defaultValue: c,
 		...l ? { onChange: l } : {}
-	}), g = o(), _ = `${g}-content`, v = `${g}-trigger`, y = m.value;
-	return /* @__PURE__ */ a("div", {
+	}), g = i(), _ = `${g}-content`, v = `${g}-trigger`, y = m.value;
+	return /* @__PURE__ */ o("div", {
 		"data-state": y ? "open" : "closed",
 		className: t(e.root, f),
-		children: [/* @__PURE__ */ i("button", {
+		children: [/* @__PURE__ */ a("button", {
 			type: "button",
 			id: v,
 			"aria-expanded": y,
@@ -25,13 +25,13 @@ function s({ open: s, defaultOpen: c = !1, onOpenChange: l, trigger: u, disabled
 			className: e.trigger,
 			onClick: () => h(!y),
 			children: u
-		}), /* @__PURE__ */ i("div", {
+		}), /* @__PURE__ */ a("div", {
 			id: _,
 			role: "region",
 			"aria-labelledby": v,
 			"data-state": y ? "open" : "closed",
 			className: e.content,
-			children: /* @__PURE__ */ i("div", {
+			children: /* @__PURE__ */ a("div", {
 				className: e.contentInner,
 				children: p
 			})