@cascivo/react 0.13.0 → 0.14.0

package/dist/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/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/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/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/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
 			})

package/dist/color-picker/color-picker.js

@@ -2,9 +2,9 @@
 
 import e from "./color-picker.module.js";
 import { cn as t, useControllableSignal as n, useSignal as r, useSignalEffect as i, useSignals as a } from "@cascivo/core";
-import { builtin as o, t as s } from "@cascivo/i18n";
-import { Fragment as c, jsx as l, jsxs as u } from "react/jsx-runtime";
-import { useId as d, useRef as f } from "react";
+import { useId as o, useRef as s } from "react";
+import { builtin as c, t as l } from "@cascivo/i18n";
+import { Fragment as u, jsx as d, jsxs as f } from "react/jsx-runtime";
 //#region ../components/src/color-picker/color-picker.tsx
 function p(e, t, n) {
 	return Math.min(n, Math.max(t, e));
@@ -75,11 +75,11 @@ function _({ h: e, s: t, l: n, a: r }) {
 }
 function v({ value: v, defaultValue: y, onValueChange: b, presets: x, alpha: S = !0, label: C, disabled: w, size: T = "md", className: E, labels: D }) {
 	a();
-	let O = d(), [k, A] = n({
+	let O = o(), [k, A] = n({
 		value: v,
 		defaultValue: y ?? "#3b82f6",
 		onChange: b
-	}), j = f(null), M = r(!1), N = g(m(k.value)), P = (e) => {
+	}), j = s(null), M = r(!1), N = g(m(k.value)), P = (e) => {
 		A(h(_(e), S));
 	}, F = (e, t) => {
 		let n = j.current;
@@ -119,22 +119,22 @@ function v({ value: v, defaultValue: y, onValueChange: b, presets: x, alpha: S =
 	}, R = typeof window < "u" ? window.EyeDropper : void 0, z = () => {
 		R && new R().open().then((e) => A(e.sRGBHex));
 	}, B = {
-		hue: D?.hue ?? s(o.colorPicker.hue),
-		alpha: D?.alpha ?? s(o.colorPicker.alpha),
-		colorArea: D?.colorArea ?? s(o.colorPicker.colorArea),
-		eyedropper: D?.eyedropper ?? s(o.colorPicker.eyedropper)
+		hue: D?.hue ?? l(c.colorPicker.hue),
+		alpha: D?.alpha ?? l(c.colorPicker.alpha),
+		colorArea: D?.colorArea ?? l(c.colorPicker.colorArea),
+		eyedropper: D?.eyedropper ?? l(c.colorPicker.eyedropper)
 	}, V = h(m(k.value), !1), H = `hsl(${N.h} 100% 50%)`;
-	return /* @__PURE__ */ u("div", {
+	return /* @__PURE__ */ f("div", {
 		className: t(e.picker, E),
 		"data-size": T,
 		"data-disabled": w || void 0,
 		children: [
-			C && /* @__PURE__ */ l("span", {
+			C && /* @__PURE__ */ d("span", {
 				className: e.label,
 				id: `${O}-label`,
 				children: C
 			}),
-			/* @__PURE__ */ l("div", {
+			/* @__PURE__ */ d("div", {
 				ref: j,
 				className: e.area,
 				role: "slider",
@@ -147,7 +147,7 @@ function v({ value: v, defaultValue: y, onValueChange: b, presets: x, alpha: S =
 					w || (e.preventDefault(), M.value = !0, F(e.clientX, e.clientY));
 				},
 				onKeyDown: I,
-				children: /* @__PURE__ */ l("span", {
+				children: /* @__PURE__ */ d("span", {
 					className: e.thumb,
 					style: {
 						insetInlineStart: `${N.s}%`,
@@ -156,15 +156,15 @@ function v({ value: v, defaultValue: y, onValueChange: b, presets: x, alpha: S =
 					}
 				})
 			}),
-			/* @__PURE__ */ u("div", {
+			/* @__PURE__ */ f("div", {
 				className: e.sliders,
 				children: [
-					/* @__PURE__ */ l("label", {
+					/* @__PURE__ */ d("label", {
 						className: e.srOnly,
 						htmlFor: `${O}-hue`,
 						children: B.hue
 					}),
-					/* @__PURE__ */ l("input", {
+					/* @__PURE__ */ d("input", {
 						id: `${O}-hue`,
 						className: e.hue,
 						type: "range",
@@ -181,11 +181,11 @@ function v({ value: v, defaultValue: y, onValueChange: b, presets: x, alpha: S =
 							a: N.a
 						})
 					}),
-					S && /* @__PURE__ */ u(c, { children: [/* @__PURE__ */ l("label", {
+					S && /* @__PURE__ */ f(u, { children: [/* @__PURE__ */ d("label", {
 						className: e.srOnly,
 						htmlFor: `${O}-alpha`,
 						children: B.alpha
-					}), /* @__PURE__ */ l("input", {
+					}), /* @__PURE__ */ d("input", {
 						id: `${O}-alpha`,
 						className: e.alpha,
 						type: "range",
@@ -205,11 +205,11 @@ function v({ value: v, defaultValue: y, onValueChange: b, presets: x, alpha: S =
 					})] })
 				]
 			}),
-			x && x.length > 0 && /* @__PURE__ */ l("div", {
+			x && x.length > 0 && /* @__PURE__ */ d("div", {
 				className: e.presets,
 				role: "group",
 				"aria-label": B.colorArea,
-				children: x.map((t, n) => /* @__PURE__ */ l("button", {
+				children: x.map((t, n) => /* @__PURE__ */ d("button", {
 					type: "button",
 					className: e.preset,
 					style: { backgroundColor: t },
@@ -222,15 +222,15 @@ function v({ value: v, defaultValue: y, onValueChange: b, presets: x, alpha: S =
 					}
 				}, t))
 			}),
-			/* @__PURE__ */ u("div", {
+			/* @__PURE__ */ f("div", {
 				className: e.row,
 				children: [
-					/* @__PURE__ */ l("span", {
+					/* @__PURE__ */ d("span", {
 						className: e.preview,
 						style: { backgroundColor: k.value },
 						"aria-hidden": "true"
 					}),
-					/* @__PURE__ */ l("input", {
+					/* @__PURE__ */ d("input", {
 						className: e.text,
 						type: "text",
 						value: k.value,
@@ -238,19 +238,19 @@ function v({ value: v, defaultValue: y, onValueChange: b, presets: x, alpha: S =
 						"aria-label": C ?? B.colorArea,
 						onChange: (e) => A(e.target.value)
 					}),
-					R && /* @__PURE__ */ l("button", {
+					R && /* @__PURE__ */ d("button", {
 						type: "button",
 						className: e.eyedropper,
 						"aria-label": B.eyedropper,
 						disabled: w,
 						onClick: z,
-						children: /* @__PURE__ */ l("svg", {
+						children: /* @__PURE__ */ d("svg", {
 							width: "16",
 							height: "16",
 							viewBox: "0 0 24 24",
 							fill: "none",
 							"aria-hidden": "true",
-							children: /* @__PURE__ */ l("path", {
+							children: /* @__PURE__ */ d("path", {
 								d: "m2 22 1-1h3l9-9M3 21v-3l9-9m1.5 1.5-2-2M19 2l3 3-9 9-3-3z",
 								stroke: "currentColor",
 								strokeWidth: "2",