@cascivo/react 0.18.0 → 1.0.0

package/dist/input/input.js

@@ -11,40 +11,41 @@ var s = r({
 		idle: { on: { FOCUS: "focused" } },
 		focused: { on: { BLUR: "idle" } }
 	}
-}), c = t(function({ label: t, hint: r, error: c, size: l = "md", className: u, id: d, onFocus: f, onBlur: p, ...m }, h) {
-	let [g, _] = i(s), v = d ?? (t ? `cascade-input-${t.toLowerCase().replace(/\s+/g, "-")}` : void 0);
+}), c = t(function({ label: t, hint: r, error: c, size: l = "md", ariaLabel: u, className: d, id: f, onFocus: p, onBlur: m, ...h }, g) {
+	let [_, v] = i(s), y = f ?? (t ? `cascade-input-${t.toLowerCase().replace(/\s+/g, "-")}` : void 0);
 	return /* @__PURE__ */ o("div", {
-		className: n(e.wrapper, u),
-		"data-state": c ? "error" : g.value,
+		className: n(e.wrapper, d),
+		"data-state": c ? "error" : _.value,
 		"data-size": l,
 		children: [
 			t && /* @__PURE__ */ a("label", {
 				className: e.label,
-				htmlFor: v,
+				htmlFor: y,
 				children: t
 			}),
 			/* @__PURE__ */ a("input", {
-				ref: h,
-				id: v,
+				ref: g,
+				id: y,
 				className: e.input,
 				"aria-invalid": c ? !0 : void 0,
-				"aria-describedby": c ? `${v}-error` : r ? `${v}-hint` : void 0,
+				"aria-describedby": c ? `${y}-error` : r ? `${y}-hint` : void 0,
 				onFocus: (e) => {
-					_("FOCUS"), f?.(e);
+					v("FOCUS"), p?.(e);
 				},
 				onBlur: (e) => {
-					_("BLUR"), p?.(e);
+					v("BLUR"), m?.(e);
 				},
-				...m
+				...h,
+				"aria-label": h["aria-label"] ?? u
 			}),
 			c && /* @__PURE__ */ a("span", {
-				id: `${v}-error`,
+				id: `${y}-error`,
 				className: e.error,
 				role: "alert",
 				children: c
 			}),
 			!c && r && /* @__PURE__ */ a("span", {
-				id: `${v}-hint`,
+				id: `${y}-hint`,
 				className: e.hint,
 				children: r
 			})

package/dist/navigation-menu/navigation-menu.js

@@ -5,24 +5,24 @@ import { useId as t, useRef as n } from "react";
 import { DismissableLayer as r, Presence as i, cn as a, focusElement as o, getLinkComponent as s, useAnchorPosition as c, useRovingFocus as l, useSignal as u, useSignals as d } from "@cascivo/core";
 import { jsx as f, jsxs as p } from "react/jsx-runtime";
 //#region ../components/src/navigation-menu/navigation-menu.tsx
-function m({ items: n, "aria-label": r, ariaLabel: i, orientation: o = "horizontal", className: s }) {
+function m({ items: n, "aria-label": r, ariaLabel: i, label: o, orientation: s = "horizontal", className: c }) {
 	d();
-	let c = t(), p = u(null), m = l({
-		orientation: o,
+	let p = t(), m = u(null), g = l({
+		orientation: s,
 		loop: !0
 	});
 	return /* @__PURE__ */ f("nav", {
-		"aria-label": i ?? r,
-		className: a(e.nav, s),
-		"data-orientation": o,
+		"aria-label": i ?? r ?? o,
+		className: a(e.nav, c),
+		"data-orientation": s,
 		children: /* @__PURE__ */ f("ul", {
 			role: "list",
 			className: e.list,
 			children: n.map((e, t) => /* @__PURE__ */ f(h, {
 				item: e,
-				baseId: c,
-				openId: p,
-				itemProps: m.getItemProps(t)
+				baseId: p,
+				openId: m,
+				itemProps: g.getItemProps(t)
 			}, e.id))
 		})
 	});

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

@@ -62,7 +62,7 @@ function m({ open: m, defaultOpen: h, onOpenChange: g, actions: _, title: v, des
 									onFocus: r.onFocus,
 									onClick: () => A(t),
 									children: t.label
-								}, n);
+								}, t.id ?? n);
 							})]
 						}), b && /* @__PURE__ */ f("div", {
 							className: e.group,

package/dist/node/breadcrumb/breadcrumb.js

@@ -5,20 +5,20 @@ import { cn as t, getLinkComponent 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";
 //#region ../components/src/breadcrumb/breadcrumb.tsx
-function s({ items: s, maxVisible: c, className: l, ariaLabel: u }) {
+function s({ items: s, maxVisible: c, className: l, ariaLabel: u, label: d }) {
 	r();
-	let d = n(), f = u ?? a(i.breadcrumb.nav), p = s, m = s[0];
-	return m !== void 0 && c !== void 0 && s.length > c && (p = [
-		m,
+	let f = n(), p = u ?? d ?? a(i.breadcrumb.nav), m = s, h = s[0];
+	return h !== void 0 && c !== void 0 && s.length > c && (m = [
+		h,
 		{ label: "…" },
 		...s.slice(s.length - (c - 2))
 	]), /* @__PURE__ */ o("nav", {
-		"aria-label": f,
+		"aria-label": p,
 		className: t(e.breadcrumb, l),
-		children: /* @__PURE__ */ o("ol", { children: p.map((e, t) => /* @__PURE__ */ o("li", { children: t === p.length - 1 ? /* @__PURE__ */ o("span", {
+		children: /* @__PURE__ */ o("ol", { children: m.map((e, t) => /* @__PURE__ */ o("li", { children: t === m.length - 1 ? /* @__PURE__ */ o("span", {
 			"aria-current": "page",
 			children: e.label
-		}) : e.href === void 0 ? /* @__PURE__ */ o("span", { children: e.label }) : /* @__PURE__ */ o(d, {
+		}) : e.href === void 0 ? /* @__PURE__ */ o("span", { children: e.label }) : /* @__PURE__ */ o(f, {
 			href: e.href,
 			children: e.label
 		}) }, e.id ?? `${t}-${e.label}`)) })

package/dist/node/checkbox/checkbox.js

@@ -5,23 +5,24 @@ import { forwardRef as t, useRef as n } from "react";
 import { cn as r, composeRefs as i, useEffectPropSignal as a, useSignalEffect as o } from "@cascivo/core";
 import { jsx as s, jsxs as c } from "react/jsx-runtime";
 //#region ../components/src/checkbox/checkbox.tsx
-var l = t(function({ label: t, indeterminate: l = !1, className: u, id: d, disabled: f, ...p }, m) {
-	let h = n(null), g = a(l);
+var l = t(function({ label: t, indeterminate: l = !1, ariaLabel: u, className: d, id: f, disabled: p, ...m }, h) {
+	let g = n(null), _ = a(l);
 	o(() => {
-		h.current && (h.current.indeterminate = g.value);
+		g.current && (g.current.indeterminate = _.value);
 	});
-	let _ = d ?? (t ? `cascade-checkbox-${t.toLowerCase().replace(/\s+/g, "-")}` : void 0);
+	let v = f ?? (t ? `cascade-checkbox-${t.toLowerCase().replace(/\s+/g, "-")}` : void 0);
 	return /* @__PURE__ */ c("label", {
-		className: r(e.wrapper, u),
-		"data-disabled": f || void 0,
+		className: r(e.wrapper, d),
+		"data-disabled": p || void 0,
 		children: [
 			/* @__PURE__ */ s("input", {
-				ref: i(m, h),
-				id: _,
+				ref: i(h, g),
+				id: v,
 				type: "checkbox",
 				className: e.input,
-				disabled: f,
-				...p
+				disabled: p,
+				...m,
+				"aria-label": m["aria-label"] ?? u
 			}),
 			/* @__PURE__ */ s("span", {
 				className: e.control,

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

@@ -73,86 +73,86 @@ function _({ h: e, s: t, l: n, a: r }) {
 		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 }) {
+function v({ value: v, defaultValue: y, onValueChange: b, presets: x, alpha: S = !0, label: C, ariaLabel: w, disabled: T, size: E = "md", className: D, labels: O, id: k, "aria-labelledby": A, "aria-describedby": j, "aria-invalid": M }) {
 	s();
-	let O = t(), [k, A] = i({
+	let N = t(), [P, F] = i({
 		value: v,
 		defaultValue: y ?? "#3b82f6",
 		onChange: b
-	}), j = n(null), M = a(!1), N = g(m(k.value)), P = (e) => {
-		A(h(_(e), S));
-	}, F = (e, t) => {
-		let n = j.current;
+	}), I = n(null), L = a(!1), R = g(m(P.value)), z = (e) => {
+		F(h(_(e), S));
+	}, B = (e, t) => {
+		let n = I.current;
 		if (!n) return;
 		let r = n.getBoundingClientRect(), i = p((e - r.left) / r.width, 0, 1), a = p((t - r.top) / r.height, 0, 1);
-		P({
-			h: N.h,
+		z({
+			h: R.h,
 			s: i * 100,
 			l: (1 - a) * 100,
-			a: N.a
+			a: R.a
 		});
 	};
 	o(() => {
-		if (!M.value) return;
-		let e = (e) => F(e.clientX, e.clientY), t = () => {
-			M.value = !1;
+		if (!L.value) return;
+		let e = (e) => B(e.clientX, e.clientY), t = () => {
+			L.value = !1;
 		};
 		return window.addEventListener("pointermove", e), window.addEventListener("pointerup", t), () => {
 			window.removeEventListener("pointermove", e), window.removeEventListener("pointerup", t);
 		};
 	});
-	let I = (e) => {
-		let t = e.shiftKey ? 10 : 2, { s: n, l: r } = N;
+	let V = (e) => {
+		let t = e.shiftKey ? 10 : 2, { s: n, l: r } = R;
 		if (e.key === "ArrowLeft") n -= t;
 		else if (e.key === "ArrowRight") n += t;
 		else if (e.key === "ArrowUp") r += t;
 		else if (e.key === "ArrowDown") r -= t;
 		else return;
-		e.preventDefault(), P({
-			h: N.h,
+		e.preventDefault(), z({
+			h: R.h,
 			s: p(n, 0, 100),
 			l: p(r, 0, 100),
-			a: N.a
+			a: R.a
 		});
-	}, L = (e, t) => {
-		!x || x.length === 0 || A(x[(t + e + x.length) % x.length]);
-	}, R = typeof window < "u" ? window.EyeDropper : void 0, z = () => {
-		R && new R().open().then((e) => A(e.sRGBHex));
-	}, B = {
-		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%)`;
+	}, H = (e, t) => {
+		!x || x.length === 0 || F(x[(t + e + x.length) % x.length]);
+	}, U = typeof window < "u" ? window.EyeDropper : void 0, W = () => {
+		U && new U().open().then((e) => F(e.sRGBHex));
+	}, G = {
+		hue: O?.hue ?? l(c.colorPicker.hue),
+		alpha: O?.alpha ?? l(c.colorPicker.alpha),
+		colorArea: O?.colorArea ?? l(c.colorPicker.colorArea),
+		eyedropper: O?.eyedropper ?? l(c.colorPicker.eyedropper)
+	}, K = h(m(P.value), !1), q = `hsl(${R.h} 100% 50%)`;
 	return /* @__PURE__ */ f("div", {
-		className: r(e.picker, E),
-		"data-size": T,
-		"data-disabled": w || void 0,
+		className: r(e.picker, D),
+		"data-size": E,
+		"data-disabled": T || void 0,
 		children: [
 			C && /* @__PURE__ */ d("span", {
 				className: e.label,
-				id: `${O}-label`,
+				id: `${N}-label`,
 				children: C
 			}),
 			/* @__PURE__ */ d("div", {
-				ref: j,
+				ref: I,
 				className: e.area,
 				role: "slider",
-				"aria-label": B.colorArea,
-				"aria-valuetext": V,
-				"aria-disabled": w || void 0,
-				tabIndex: w ? -1 : 0,
-				style: { background: H },
+				"aria-label": G.colorArea,
+				"aria-valuetext": K,
+				"aria-disabled": T || void 0,
+				tabIndex: T ? -1 : 0,
+				style: { background: q },
 				onPointerDown: (e) => {
-					w || (e.preventDefault(), M.value = !0, F(e.clientX, e.clientY));
+					T || (e.preventDefault(), L.value = !0, B(e.clientX, e.clientY));
 				},
-				onKeyDown: I,
+				onKeyDown: V,
 				children: /* @__PURE__ */ d("span", {
 					className: e.thumb,
 					style: {
-						insetInlineStart: `${N.s}%`,
-						insetBlockStart: `${100 - N.l}%`,
-						backgroundColor: V
+						insetInlineStart: `${R.s}%`,
+						insetBlockStart: `${100 - R.l}%`,
+						backgroundColor: K
 					}
 				})
 			}),
@@ -161,45 +161,45 @@ function v({ value: v, defaultValue: y, onValueChange: b, presets: x, alpha: S =
 				children: [
 					/* @__PURE__ */ d("label", {
 						className: e.srOnly,
-						htmlFor: `${O}-hue`,
-						children: B.hue
+						htmlFor: `${N}-hue`,
+						children: G.hue
 					}),
 					/* @__PURE__ */ d("input", {
-						id: `${O}-hue`,
+						id: `${N}-hue`,
 						className: e.hue,
 						type: "range",
 						min: 0,
 						max: 360,
 						step: 1,
-						value: Math.round(N.h),
-						disabled: w,
-						"aria-label": B.hue,
-						onChange: (e) => P({
+						value: Math.round(R.h),
+						disabled: T,
+						"aria-label": G.hue,
+						onChange: (e) => z({
 							h: Number(e.target.value),
-							s: N.s,
-							l: N.l,
-							a: N.a
+							s: R.s,
+							l: R.l,
+							a: R.a
 						})
 					}),
 					S && /* @__PURE__ */ f(u, { children: [/* @__PURE__ */ d("label", {
 						className: e.srOnly,
-						htmlFor: `${O}-alpha`,
-						children: B.alpha
+						htmlFor: `${N}-alpha`,
+						children: G.alpha
 					}), /* @__PURE__ */ d("input", {
-						id: `${O}-alpha`,
+						id: `${N}-alpha`,
 						className: e.alpha,
 						type: "range",
 						min: 0,
 						max: 1,
 						step: .01,
-						value: N.a,
-						disabled: w,
-						"aria-label": B.alpha,
-						style: { "--cascivo-color-picker-solid": V },
-						onChange: (e) => P({
-							h: N.h,
-							s: N.s,
-							l: N.l,
+						value: R.a,
+						disabled: T,
+						"aria-label": G.alpha,
+						style: { "--cascivo-color-picker-solid": K },
+						onChange: (e) => z({
+							h: R.h,
+							s: R.s,
+							l: R.l,
 							a: Number(e.target.value)
 						})
 					})] })
@@ -208,17 +208,17 @@ function v({ value: v, defaultValue: y, onValueChange: b, presets: x, alpha: S =
 			x && x.length > 0 && /* @__PURE__ */ d("div", {
 				className: e.presets,
 				role: "group",
-				"aria-label": B.colorArea,
+				"aria-label": G.colorArea,
 				children: x.map((t, n) => /* @__PURE__ */ d("button", {
 					type: "button",
 					className: e.preset,
 					style: { backgroundColor: t },
 					"aria-label": t,
-					"aria-pressed": t.toLowerCase() === k.value.toLowerCase(),
-					disabled: w,
-					onClick: () => A(t),
+					"aria-pressed": t.toLowerCase() === P.value.toLowerCase(),
+					disabled: T,
+					onClick: () => F(t),
 					onKeyDown: (e) => {
-						e.key === "ArrowRight" ? (e.preventDefault(), L(1, n)) : e.key === "ArrowLeft" && (e.preventDefault(), L(-1, n));
+						e.key === "ArrowRight" ? (e.preventDefault(), H(1, n)) : e.key === "ArrowLeft" && (e.preventDefault(), H(-1, n));
 					}
 				}, t))
 			}),
@@ -227,23 +227,27 @@ function v({ value: v, defaultValue: y, onValueChange: b, presets: x, alpha: S =
 				children: [
 					/* @__PURE__ */ d("span", {
 						className: e.preview,
-						style: { backgroundColor: k.value },
+						style: { backgroundColor: P.value },
 						"aria-hidden": "true"
 					}),
 					/* @__PURE__ */ d("input", {
 						className: e.text,
 						type: "text",
-						value: k.value,
-						disabled: w,
-						"aria-label": C ?? B.colorArea,
-						onChange: (e) => A(e.target.value)
+						value: P.value,
+						disabled: T,
+						id: k,
+						"aria-labelledby": A,
+						"aria-describedby": j,
+						"aria-invalid": M,
+						"aria-label": A === void 0 ? w ?? C ?? G.colorArea : void 0,
+						onChange: (e) => F(e.target.value)
 					}),
-					R && /* @__PURE__ */ d("button", {
+					U && /* @__PURE__ */ d("button", {
 						type: "button",
 						className: e.eyedropper,
-						"aria-label": B.eyedropper,
-						disabled: w,
-						onClick: z,
+						"aria-label": G.eyedropper,
+						disabled: T,
+						onClick: W,
 						children: /* @__PURE__ */ d("svg", {
 							width: "16",
 							height: "16",