@cascivo/react 0.13.0 → 0.13.1

package/dist/node/number-input/number-input.js

@@ -2,99 +2,101 @@
 
 import e from "./number-input.module.js";
 import { cn as t, createMachine as n, useMachine as r, useSignal 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 { forwardRef as o } from "react";
+import { builtin as s, t as c } from "@cascivo/i18n";
+import { jsx as l, jsxs as u } from "react/jsx-runtime";
 //#region ../components/src/number-input/number-input.tsx
-var u = n({
+var d = n({
 	initial: "idle",
 	states: {
 		idle: { on: { FOCUS: "focused" } },
 		focused: { on: { BLUR: "idle" } }
 	}
 });
-function d(e, t, n) {
+function f(e, t, n) {
 	let r = e;
 	return t !== void 0 && (r = Math.max(r, t)), n !== void 0 && (r = Math.min(r, n)), r;
 }
-function f(e) {
+function p(e) {
 	let t = String(e), n = t.indexOf(".");
 	return n === -1 ? 0 : t.length - n - 1;
 }
-function p(e, t) {
+function m(e, t) {
 	let n = 10 ** t;
 	return Math.round(e * n) / n;
 }
-function m(e) {
+function h(e) {
 	let t = e.trim();
 	if (t === "") return null;
 	let n = Number(t);
 	return Number.isFinite(n) ? n : null;
 }
-function h({ value: n, defaultValue: h, onValueChange: g, onChange: _, min: v, max: y, step: b = 1, precision: x, formatOptions: S, label: C, hint: w, error: T, size: E = "md", disabled: D, incrementLabel: O, decrementLabel: k, className: A, id: j, onFocus: M, onBlur: N, onKeyDown: P, ...F }) {
+var g = o(function({ value: n, defaultValue: o, onValueChange: g, onChange: _, min: v, max: y, step: b = 1, precision: x, formatOptions: S, label: C, hint: w, error: T, size: E = "md", disabled: D, incrementLabel: O, decrementLabel: k, className: A, id: j, onFocus: M, onBlur: N, onKeyDown: P, ...F }, I) {
 	a();
-	let I = O ?? s(o.numberInput.increment), L = k ?? s(o.numberInput.decrement), [R, z] = r(u), B = n !== void 0, V = i(h ?? null), H = i(""), U = B ? n : V.value, W = j ?? (C ? `cascade-number-input-${C.toLowerCase().replace(/\s+/g, "-")}` : void 0), G = (e) => {
-		B || (V.value = e), H.value = e == null ? "" : String(e), e !== U && (g ?? _)?.(e);
-	}, K = () => {
-		let e = m(H.value);
-		e != null && (e = d(e, v, y), x !== void 0 && (e = p(e, x))), G(e);
-	}, q = (e) => {
-		let t = (R.value === "focused" ? m(H.value) : U) ?? 0, n = x ?? Math.max(f(b), f(t));
-		G(d(p(t + e * b, n), v, y));
-	}, J = R.value === "focused" ? H.value : ((e) => e == null ? "" : S ? new Intl.NumberFormat(void 0, S).format(e) : String(e))(U), Y = U != null && y !== void 0 && U >= y, X = U != null && v !== void 0 && U <= v;
-	return /* @__PURE__ */ l("div", {
+	let L = O ?? c(s.numberInput.increment), R = k ?? c(s.numberInput.decrement), [z, B] = r(d), V = n !== void 0, H = i(o ?? null), U = i(""), W = V ? n : H.value, G = j ?? (C ? `cascade-number-input-${C.toLowerCase().replace(/\s+/g, "-")}` : void 0), K = (e) => {
+		V || (H.value = e), U.value = e == null ? "" : String(e), e !== W && (g ?? _)?.(e);
+	}, q = () => {
+		let e = h(U.value);
+		e != null && (e = f(e, v, y), x !== void 0 && (e = m(e, x))), K(e);
+	}, J = (e) => {
+		let t = (z.value === "focused" ? h(U.value) : W) ?? 0, n = x ?? Math.max(p(b), p(t));
+		K(f(m(t + e * b, n), v, y));
+	}, Y = z.value === "focused" ? U.value : ((e) => e == null ? "" : S ? new Intl.NumberFormat(void 0, S).format(e) : String(e))(W), X = W != null && y !== void 0 && W >= y, Z = W != null && v !== void 0 && W <= v;
+	return /* @__PURE__ */ u("div", {
 		className: t(e.wrapper, A),
-		"data-state": T ? "error" : R.value,
+		"data-state": T ? "error" : z.value,
 		"data-size": E,
 		children: [
-			C && /* @__PURE__ */ c("label", {
+			C && /* @__PURE__ */ l("label", {
 				className: e.label,
-				htmlFor: W,
+				htmlFor: G,
 				children: C
 			}),
-			/* @__PURE__ */ l("div", {
+			/* @__PURE__ */ u("div", {
 				className: e.field,
-				children: [/* @__PURE__ */ c("input", {
-					id: W,
+				children: [/* @__PURE__ */ l("input", {
+					id: G,
 					type: "text",
 					inputMode: "decimal",
 					autoComplete: "off",
 					role: "spinbutton",
 					className: e.input,
-					value: J,
+					value: Y,
 					disabled: D,
-					"aria-valuenow": U ?? void 0,
+					"aria-valuenow": W ?? void 0,
 					"aria-valuemin": v,
 					"aria-valuemax": y,
 					"aria-invalid": T ? !0 : void 0,
-					"aria-describedby": T ? `${W}-error` : w ? `${W}-hint` : void 0,
+					"aria-describedby": T ? `${G}-error` : w ? `${G}-hint` : void 0,
 					onChange: (e) => {
-						H.value = e.target.value;
+						U.value = e.target.value;
 					},
 					onFocus: (e) => {
-						H.value = U == null ? "" : String(U), z("FOCUS"), M?.(e);
+						U.value = W == null ? "" : String(W), B("FOCUS"), M?.(e);
 					},
 					onBlur: (e) => {
-						K(), z("BLUR"), N?.(e);
+						q(), B("BLUR"), N?.(e);
 					},
 					onKeyDown: (e) => {
-						e.key === "ArrowUp" ? (e.preventDefault(), q(1)) : e.key === "ArrowDown" ? (e.preventDefault(), q(-1)) : e.key === "Enter" && K(), P?.(e);
+						e.key === "ArrowUp" ? (e.preventDefault(), J(1)) : e.key === "ArrowDown" ? (e.preventDefault(), J(-1)) : e.key === "Enter" && q(), P?.(e);
 					},
+					ref: I,
 					...F
-				}), /* @__PURE__ */ l("div", {
+				}), /* @__PURE__ */ u("div", {
 					className: e.steppers,
-					children: [/* @__PURE__ */ c("button", {
+					children: [/* @__PURE__ */ l("button", {
 						type: "button",
 						className: e.stepper,
-						"aria-label": I,
+						"aria-label": L,
 						tabIndex: -1,
-						disabled: D || Y,
+						disabled: D || X,
 						onMouseDown: (e) => e.preventDefault(),
-						onClick: () => q(1),
-						children: /* @__PURE__ */ c("svg", {
+						onClick: () => J(1),
+						children: /* @__PURE__ */ l("svg", {
 							viewBox: "0 0 10 10",
 							"aria-hidden": "true",
 							focusable: "false",
-							children: /* @__PURE__ */ c("path", {
+							children: /* @__PURE__ */ l("path", {
 								d: "M2 6.5 5 3.5 8 6.5",
 								fill: "none",
 								stroke: "currentColor",
@@ -103,19 +105,19 @@ function h({ value: n, defaultValue: h, onValueChange: g, onChange: _, min: v, m
 								strokeLinejoin: "round"
 							})
 						})
-					}), /* @__PURE__ */ c("button", {
+					}), /* @__PURE__ */ l("button", {
 						type: "button",
 						className: e.stepper,
-						"aria-label": L,
+						"aria-label": R,
 						tabIndex: -1,
-						disabled: D || X,
+						disabled: D || Z,
 						onMouseDown: (e) => e.preventDefault(),
-						onClick: () => q(-1),
-						children: /* @__PURE__ */ c("svg", {
+						onClick: () => J(-1),
+						children: /* @__PURE__ */ l("svg", {
 							viewBox: "0 0 10 10",
 							"aria-hidden": "true",
 							focusable: "false",
-							children: /* @__PURE__ */ c("path", {
+							children: /* @__PURE__ */ l("path", {
 								d: "M2 3.5 5 6.5 8 3.5",
 								fill: "none",
 								stroke: "currentColor",
@@ -127,19 +129,19 @@ function h({ value: n, defaultValue: h, onValueChange: g, onChange: _, min: v, m
 					})]
 				})]
 			}),
-			T && /* @__PURE__ */ c("span", {
-				id: `${W}-error`,
+			T && /* @__PURE__ */ l("span", {
+				id: `${G}-error`,
 				className: e.error,
 				role: "alert",
 				children: T
 			}),
-			!T && w && /* @__PURE__ */ c("span", {
-				id: `${W}-hint`,
+			!T && w && /* @__PURE__ */ l("span", {
+				id: `${G}-hint`,
 				className: e.hint,
 				children: w
 			})
 		]
 	});
-}
+});
 //#endregion
-export { h as NumberInput };
+export { g as NumberInput };

package/dist/node/otp-input/otp-input.js

@@ -2,13 +2,13 @@
 
 import e from "./otp-input.module.js";
 import { cn as t, useSignal as n, useSignals as r } from "@cascivo/core";
-import { builtin as i, t as a } from "@cascivo/i18n";
-import { jsx as o } from "react/jsx-runtime";
-import { useRef as s } from "react";
+import { useRef as i } from "react";
+import { builtin as a, t as o } from "@cascivo/i18n";
+import { jsx as s } from "react/jsx-runtime";
 //#region ../components/src/otp-input/otp-input.tsx
 function c({ length: c = 6, value: l, onValueChange: u, disabled: d = !1, type: f = "numeric", className: p, ...m }) {
 	r();
-	let h = n(Array.from({ length: c }, (e, t) => l[t] ?? "")), g = s([]), _ = Array.from({ length: c }, (e, t) => l[t] ?? "");
+	let h = n(Array.from({ length: c }, (e, t) => l[t] ?? "")), g = i([]), _ = Array.from({ length: c }, (e, t) => l[t] ?? "");
 	JSON.stringify(h.value) !== JSON.stringify(_) && (h.value = _);
 	function v(e) {
 		u(e.join("")), h.value = e;
@@ -37,13 +37,13 @@ function c({ length: c = 6, value: l, onValueChange: u, disabled: d = !1, type:
 		for (let t = 0; t < n.length; t++) e + t < c && (r[e + t] = n[t] ?? "");
 		v(r), y(Math.min(e + n.length, c - 1));
 	}
-	let C = a(i.otpInput.label);
-	return /* @__PURE__ */ o("div", {
+	let C = o(a.otpInput.label);
+	return /* @__PURE__ */ s("div", {
 		className: t(e.wrapper, p),
 		role: "group",
 		"aria-label": C,
 		...m,
-		children: h.value.map((t, n) => /* @__PURE__ */ o("input", {
+		children: h.value.map((t, n) => /* @__PURE__ */ s("input", {
 			ref: (e) => {
 				g.current[n] = e;
 			},
@@ -52,7 +52,7 @@ function c({ length: c = 6, value: l, onValueChange: u, disabled: d = !1, type:
 			className: e.slot,
 			value: t,
 			maxLength: 1,
-			"aria-label": a(i.otpInput.digit, { n: String(n + 1) }),
+			"aria-label": o(a.otpInput.digit, { n: String(n + 1) }),
 			autoComplete: n === 0 ? "one-time-code" : "off",
 			disabled: d,
 			"data-filled": t ? "" : void 0,

package/dist/node/password-input/password-input.js

@@ -2,11 +2,11 @@
 
 import e from "./password-input.module.js";
 import { cn as t, useSignal as n, useSignals 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 { useId as c } from "react";
+import { forwardRef as i, useId 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/password-input/password-input.tsx
-function l(e) {
+function u(e) {
 	if (!e) return {
 		score: 0,
 		label: "weak"
@@ -23,58 +23,59 @@ function l(e) {
 		][t]
 	};
 }
-function u({ showStrengthMeter: u = !1, size: d = "md", labels: f, className: p, id: m, value: h, defaultValue: g, onChange: _, ...v }) {
+var d = i(function({ showStrengthMeter: i = !1, size: d = "md", labels: f, className: p, id: m, value: h, defaultValue: g, onChange: _, ...v }, y) {
 	r();
-	let y = n(!1), b = n(typeof h == "string" ? h : typeof g == "string" ? g : "");
-	typeof h == "string" && (b.value = h);
-	let x = c(), S = m ?? `cascade-password-${x}`, C = u ? l(b.value) : null, w = y.value ? f?.hide ?? a(i.passwordInput.hide) : f?.reveal ?? a(i.passwordInput.reveal), T = C ? f?.strengthLabel ? f.strengthLabel(C.label) : a(i.passwordInput.strengthLabel, { level: C.label }) : void 0;
-	return /* @__PURE__ */ s("div", {
+	let b = n(!1), x = n(typeof h == "string" ? h : typeof g == "string" ? g : "");
+	typeof h == "string" && (x.value = h);
+	let S = a(), C = m ?? `cascade-password-${S}`, w = i ? u(x.value) : null, T = b.value ? f?.hide ?? s(o.passwordInput.hide) : f?.reveal ?? s(o.passwordInput.reveal), E = w ? f?.strengthLabel ? f.strengthLabel(w.label) : s(o.passwordInput.strengthLabel, { level: w.label }) : void 0;
+	return /* @__PURE__ */ l("div", {
 		className: t(e.wrapper, p),
 		"data-size": d,
-		"data-revealed": y.value ? "" : void 0,
-		children: [/* @__PURE__ */ s("div", {
+		"data-revealed": b.value ? "" : void 0,
+		children: [/* @__PURE__ */ l("div", {
 			className: e["input-row"],
-			children: [/* @__PURE__ */ o("input", {
+			children: [/* @__PURE__ */ c("input", {
+				ref: y,
 				...v,
-				id: S,
-				type: y.value ? "text" : "password",
+				id: C,
+				type: b.value ? "text" : "password",
 				className: e.input,
 				value: h,
 				defaultValue: g,
 				onChange: (e) => {
-					typeof h != "string" && (b.value = e.currentTarget.value), _?.(e);
+					typeof h != "string" && (x.value = e.currentTarget.value), _?.(e);
 				}
-			}), /* @__PURE__ */ o("button", {
+			}), /* @__PURE__ */ c("button", {
 				type: "button",
 				className: e["reveal-btn"],
-				"aria-label": w,
+				"aria-label": T,
 				onClick: () => {
-					y.value = !y.value;
+					b.value = !b.value;
 				},
-				children: /* @__PURE__ */ o("span", {
+				children: /* @__PURE__ */ c("span", {
 					className: e["reveal-icon"],
 					"aria-hidden": "true"
 				})
 			})]
-		}), u && C && /* @__PURE__ */ o("div", {
+		}), i && w && /* @__PURE__ */ c("div", {
 			className: e["strength-meter"],
 			role: "meter",
-			"aria-label": T,
-			"aria-valuenow": C.score,
+			"aria-label": E,
+			"aria-valuenow": w.score,
 			"aria-valuemin": 0,
 			"aria-valuemax": 4,
-			"data-strength": C.label,
+			"data-strength": w.label,
 			children: [
 				0,
 				1,
 				2,
 				3
-			].map((t) => /* @__PURE__ */ o("div", {
+			].map((t) => /* @__PURE__ */ c("div", {
 				className: e["strength-segment"],
-				"data-filled": t < C.score ? "" : void 0
+				"data-filled": t < w.score ? "" : void 0
 			}, t))
 		})]
 	});
-}
+});
 //#endregion
-export { u as PasswordInput };
+export { d as PasswordInput };

package/dist/node/popover/popover.js

@@ -2,48 +2,50 @@
 
 import { usePopover as e } from "./use-popover.js";
 import t from "./popover.module.js";
-import { useSignals as n } from "@cascivo/core";
-import { jsx as r } from "react/jsx-runtime";
+import { Slot as n, useSignals as r } from "@cascivo/core";
 import { createContext as i } from "react";
+import { jsx as a } from "react/jsx-runtime";
 //#region ../components/src/popover/popover.tsx
-var a = i(null);
-function o({ children: t, ...n }) {
-	let i = e(n);
-	return /* @__PURE__ */ r(a.Provider, {
-		value: i,
+var o = i(null);
+function s({ children: t, ...n }) {
+	let r = e(n);
+	return /* @__PURE__ */ a(o.Provider, {
+		value: r,
 		children: t
 	});
 }
-function s({ children: e }) {
-	return n(), /* @__PURE__ */ r(a.Consumer, { children: (n) => {
+function c({ children: e, asChild: i = !1 }) {
+	r();
+	let s = i ? n : "button";
+	return /* @__PURE__ */ a(o.Consumer, { children: (n) => {
 		if (!n) throw Error("PopoverTrigger must be used inside <Popover>");
-		let { triggerRef: i, toggle: a, anchorName: o, isOpen: s } = n;
-		return /* @__PURE__ */ r("button", {
-			ref: i,
-			type: "button",
-			"aria-expanded": s.value,
+		let { triggerRef: r, toggle: o, anchorName: c, isOpen: l } = n;
+		return /* @__PURE__ */ a(s, {
+			ref: r,
+			type: i ? void 0 : "button",
+			"aria-expanded": l.value,
 			"aria-haspopup": "dialog",
-			style: { anchorName: o },
-			onClick: a,
+			style: { anchorName: c },
+			onClick: o,
 			className: t.trigger,
 			children: e
 		});
 	} });
 }
-function c({ children: e, className: i }) {
-	return n(), /* @__PURE__ */ r(a.Consumer, { children: (n) => {
-		if (!n) throw Error("PopoverContent must be used inside <Popover>");
-		let { popoverRef: a, anchorName: o, isOpen: s } = n;
-		return /* @__PURE__ */ r("div", {
-			ref: a,
+function l({ children: e, className: n }) {
+	return r(), /* @__PURE__ */ a(o.Consumer, { children: (r) => {
+		if (!r) throw Error("PopoverContent must be used inside <Popover>");
+		let { popoverRef: i, anchorName: o, isOpen: s } = r;
+		return /* @__PURE__ */ a("div", {
+			ref: i,
 			popover: "auto",
 			role: "dialog",
 			"data-state": s.value ? "open" : "closed",
 			style: { positionAnchor: o },
-			className: [t.content, i].filter(Boolean).join(" "),
+			className: [t.content, n].filter(Boolean).join(" "),
 			children: e
 		});
 	} });
 }
 //#endregion
-export { o as Popover, c as PopoverContent, s as PopoverTrigger };
+export { s as Popover, l as PopoverContent, c as PopoverTrigger };

package/dist/node/pull-to-refresh/pull-to-refresh.js

@@ -3,18 +3,18 @@
 import { Spinner as e } from "../spinner/spinner.js";
 import t from "./pull-to-refresh.module.js";
 import { cn 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 { jsx as c, jsxs as l } from "react/jsx-runtime";
-import { useRef as u } from "react";
+import { useRef as o } from "react";
+import { builtin as s, t as c } from "@cascivo/i18n";
+import { jsx as l, jsxs as u } from "react/jsx-runtime";
 //#region ../components/src/pull-to-refresh/pull-to-refresh.tsx
 var d = .5;
 function f({ onRefresh: f, children: p, threshold: m = 64, disabled: h = !1, labels: g, className: _ }) {
 	a();
-	let v = u(null), y = r(0), b = r(!1), x = r(!1), S = u(f);
+	let v = o(null), y = r(0), b = r(!1), x = r(!1), S = o(f);
 	S.current = f;
-	let C = u(m);
+	let C = o(m);
 	C.current = m;
-	let w = u(h);
+	let w = o(h);
 	w.current = h, i(() => {
 		let e = v.current;
 		if (!e || typeof window > "u") return;
@@ -39,21 +39,21 @@ function f({ onRefresh: f, children: p, threshold: m = 64, disabled: h = !1, lab
 			e.removeEventListener("pointerdown", r), window.removeEventListener("pointermove", i), window.removeEventListener("pointerup", a), window.removeEventListener("pointercancel", a);
 		};
 	});
-	let T = b.value ? m : y.value, E = Math.min(T / m, 1), D = E >= 1, O = b.value ? g?.refreshing ?? s(o.pullToRefresh.refreshing) : D ? g?.release ?? s(o.pullToRefresh.release) : T > 0 ? g?.pull ?? s(o.pullToRefresh.pull) : "", k = { "--_pull": `${T}px` };
-	return /* @__PURE__ */ l("div", {
+	let T = b.value ? m : y.value, E = Math.min(T / m, 1), D = E >= 1, O = b.value ? g?.refreshing ?? c(s.pullToRefresh.refreshing) : D ? g?.release ?? c(s.pullToRefresh.release) : T > 0 ? g?.pull ?? c(s.pullToRefresh.pull) : "", k = { "--_pull": `${T}px` };
+	return /* @__PURE__ */ u("div", {
 		className: n(t.root, _),
 		style: k,
 		children: [
-			/* @__PURE__ */ c("div", {
+			/* @__PURE__ */ l("div", {
 				className: t.indicator,
 				"data-dragging": x.value ? "" : void 0,
-				children: b.value ? /* @__PURE__ */ c(e, { size: "sm" }) : /* @__PURE__ */ c("svg", {
+				children: b.value ? /* @__PURE__ */ l(e, { size: "sm" }) : /* @__PURE__ */ l("svg", {
 					"aria-hidden": "true",
 					viewBox: "0 0 16 16",
 					className: t.arrow,
 					"data-ready": D ? "" : void 0,
 					style: { opacity: E },
-					children: /* @__PURE__ */ c("path", {
+					children: /* @__PURE__ */ l("path", {
 						d: "M8 13V3M4 7l4-4 4 4",
 						fill: "none",
 						stroke: "currentColor",
@@ -63,13 +63,13 @@ function f({ onRefresh: f, children: p, threshold: m = 64, disabled: h = !1, lab
 					})
 				})
 			}),
-			/* @__PURE__ */ c("span", {
+			/* @__PURE__ */ l("span", {
 				role: "status",
 				"aria-live": "polite",
 				className: t.srOnly,
 				children: O
 			}),
-			/* @__PURE__ */ c("div", {
+			/* @__PURE__ */ l("div", {
 				ref: v,
 				className: t.viewport,
 				"data-dragging": x.value ? "" : void 0,

package/dist/node/radial-progress/radial-progress.js

@@ -1,12 +1,12 @@
 "use client";
 
 import e from "./radial-progress.module.js";
-import { jsx as t } from "react/jsx-runtime";
-import { useId as n } from "react";
+import { useId as t } from "react";
+import { jsx as n } from "react/jsx-runtime";
 //#region ../components/src/radial-progress/radial-progress.tsx
 function r({ value: r, size: i = "md", variant: a = "primary", children: o, className: s, ...c }) {
-	let l = Math.min(100, Math.max(0, r)), u = n();
-	return /* @__PURE__ */ t("div", {
+	let l = Math.min(100, Math.max(0, r)), u = t();
+	return /* @__PURE__ */ n("div", {
 		role: "progressbar",
 		"aria-valuenow": l,
 		"aria-valuemin": 0,
@@ -17,7 +17,7 @@ function r({ value: r, size: i = "md", variant: a = "primary", children: o, clas
 		"data-variant": a,
 		style: { "--cascivo-radial-progress": l },
 		...c,
-		children: /* @__PURE__ */ t("span", {
+		children: /* @__PURE__ */ n("span", {
 			id: u,
 			className: e.label,
 			children: o ?? `${l}%`

package/dist/node/radio/radio.js

@@ -2,48 +2,49 @@
 
 import e from "./radio.module.js";
 import { cn as t } from "@cascivo/core";
-import { jsx as n, jsxs as r } from "react/jsx-runtime";
-import { Children as i, cloneElement as a, isValidElement as o } from "react";
+import { Children as n, cloneElement as r, forwardRef as i, isValidElement as a } from "react";
+import { jsx as o, jsxs as s } from "react/jsx-runtime";
 //#region ../components/src/radio/radio.tsx
-function s({ label: i, className: a, id: o, disabled: s, value: c, ...l }) {
-	let u = o ?? (i ? `cascade-radio-${c}` : void 0);
-	return /* @__PURE__ */ r("label", {
-		className: t(e.wrapper, a),
-		"data-disabled": s || void 0,
+var c = i(function({ label: n, className: r, id: i, disabled: a, value: c, ...l }, u) {
+	let d = i ?? (n ? `cascade-radio-${c}` : void 0);
+	return /* @__PURE__ */ s("label", {
+		className: t(e.wrapper, r),
+		"data-disabled": a || void 0,
 		children: [
-			/* @__PURE__ */ n("input", {
-				id: u,
+			/* @__PURE__ */ o("input", {
+				id: d,
 				type: "radio",
 				value: c,
 				className: e.input,
-				disabled: s,
+				disabled: a,
+				ref: u,
 				...l
 			}),
-			/* @__PURE__ */ n("span", {
+			/* @__PURE__ */ o("span", {
 				className: e.control,
 				"aria-hidden": "true"
 			}),
-			i && /* @__PURE__ */ n("span", {
+			n && /* @__PURE__ */ o("span", {
 				className: e.label,
-				children: i
+				children: n
 			})
 		]
 	});
-}
-function c({ name: r, value: s, defaultValue: c, onChange: l, orientation: u = "vertical", className: d, children: f }) {
+});
+function l({ name: i, value: s, defaultValue: c, onChange: l, orientation: u = "vertical", className: d, children: f }) {
 	let p = s !== void 0;
-	return /* @__PURE__ */ n("div", {
+	return /* @__PURE__ */ o("div", {
 		role: "radiogroup",
 		"data-orientation": u,
 		className: t(e.group, d),
-		children: i.map(f, (e) => {
-			if (!o(e)) return e;
-			let t = e, n = t.props.value, i = { name: r };
-			return p ? i.checked = n === s : c !== void 0 && (i.defaultChecked = n === c), l && (i.onChange = (e) => {
+		children: n.map(f, (e) => {
+			if (!a(e)) return e;
+			let t = e, n = t.props.value, o = { name: i };
+			return p ? o.checked = n === s : c !== void 0 && (o.defaultChecked = n === c), l && (o.onChange = (e) => {
 				e.target.checked && l(n);
-			}), a(t, i);
+			}), r(t, o);
 		})
 	});
 }
 //#endregion
-export { s as Radio, c as RadioGroup };
+export { c as Radio, l as RadioGroup };