@cascivo/react 0.3.8 → 0.5.0

package/dist/modal/modal.js

@@ -1,73 +1,70 @@
 "use client";
 
 import e from "./modal.module.js";
-import { cn as t, useDraggable 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 { cn as t, useDraggable as n, useId as r, useSignal as i, useSignalEffect as a, useSignals as o } from "@cascivo/core";
+import { builtin as s, t as c } from "@cascivo/i18n";
+import { jsx as l, jsxs as u } from "react/jsx-runtime";
+import { useRef as d } from "react";
 //#region ../components/src/modal/modal.tsx
-function d({ open: d = !1, onClose: f, title: p, description: m, children: h, className: g, size: _ = "md", draggable: v = !1 }) {
-	a();
-	let y = u(null), b = u(f);
-	b.current = f;
-	let { handleRef: x, offset: S } = n({ isDisabled: !v }), C = v ? {
-		"--modal-x": `${S.value.x}px`,
-		"--modal-y": `${S.value.y}px`
-	} : void 0, w = r(d);
-	return w.value = d, i(() => {
-		let e = y.current;
-		e && (w.value ? e.open || e.showModal() : e.open && e.close());
-	}), i(() => {
-		let e = y.current;
+function f({ open: f = !1, onClose: p, title: m, description: h, children: g, className: _, size: v = "md", draggable: y = !1 }) {
+	o();
+	let b = d(null), x = d(p);
+	x.current = p;
+	let S = r("cascivo-modal-title"), C = r("cascivo-modal-desc"), { handleRef: w, offset: T } = n({ isDisabled: !y }), E = y ? {
+		"--modal-x": `${T.value.x}px`,
+		"--modal-y": `${T.value.y}px`
+	} : void 0, D = i(f);
+	return D.value = f, a(() => {
+		let e = b.current;
+		e && (D.value ? e.open || e.showModal() : e.open && e.close());
+	}), a(() => {
+		let e = b.current;
 		if (!e) return;
-		let t = () => b.current?.();
+		let t = () => x.current?.();
 		return e.addEventListener("close", t), () => e.removeEventListener("close", t);
-	}), /* @__PURE__ */ c("dialog", {
-		ref: y,
-		"data-size": _,
-		"data-draggable": v || void 0,
-		className: t(e.dialog, g),
-		style: C,
+	}), /* @__PURE__ */ l("dialog", {
+		ref: b,
+		"data-size": v,
+		"data-draggable": y || void 0,
+		className: t(e.dialog, _),
+		style: E,
 		onClick: (e) => {
-			e.target === y.current && y.current?.close();
+			e.target === b.current && b.current?.close();
 		},
-		onKeyDown: (e) => {
-			e.key === "Escape" && (e.preventDefault(), y.current?.close());
-		},
-		"aria-labelledby": p ? "cascade-modal-title" : void 0,
-		"aria-describedby": m ? "cascade-modal-desc" : void 0,
-		children: /* @__PURE__ */ l("div", {
+		"aria-labelledby": m ? S : void 0,
+		"aria-describedby": h ? C : void 0,
+		children: /* @__PURE__ */ u("div", {
 			className: e.panel,
 			children: [
-				(p || f) && /* @__PURE__ */ l("div", {
+				(m || p) && /* @__PURE__ */ u("div", {
 					className: e.header,
-					ref: v ? (e) => {
-						x.current = e;
+					ref: y ? (e) => {
+						w.current = e;
 					} : void 0,
-					children: [p && /* @__PURE__ */ c("h2", {
-						id: "cascade-modal-title",
+					children: [m && /* @__PURE__ */ l("h2", {
+						id: S,
 						className: e.title,
-						children: p
-					}), f && /* @__PURE__ */ c("button", {
+						children: m
+					}), p && /* @__PURE__ */ l("button", {
 						type: "button",
 						className: e.close,
-						onClick: () => y.current?.close(),
-						"aria-label": s(o.modal.close),
+						onClick: () => b.current?.close(),
+						"aria-label": c(s.modal.close),
 						children: "✕"
 					})]
 				}),
-				m && /* @__PURE__ */ c("p", {
-					id: "cascade-modal-desc",
+				h && /* @__PURE__ */ l("p", {
+					id: C,
 					className: e.description,
-					children: m
+					children: h
 				}),
-				/* @__PURE__ */ c("div", {
+				/* @__PURE__ */ l("div", {
 					className: e.body,
-					children: h
+					children: g
 				})
 			]
 		})
 	});
 }
 //#endregion
-export { d as Modal };
+export { f as Modal };

package/dist/multi-select/multi-select.js

@@ -55,8 +55,6 @@ function f({ options: f, value: p, onValueChange: m, placeholder: h, disabled: g
 		}), /* @__PURE__ */ u("div", {
 			ref: b.popoverRef,
 			popover: "auto",
-			role: "listbox",
-			"aria-multiselectable": "true",
 			className: t.panel,
 			style: { positionAnchor: b.anchorName },
 			tabIndex: -1,
@@ -74,6 +72,9 @@ function f({ options: f, value: p, onValueChange: m, placeholder: h, disabled: g
 				})
 			}), /* @__PURE__ */ l("div", {
 				ref: C,
+				role: "listbox",
+				"aria-multiselectable": "true",
+				"aria-label": _?.label ?? c(s.multiSelect.label),
 				className: t.options,
 				children: T.value.length === 0 ? /* @__PURE__ */ l("div", {
 					className: t["no-results"],

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

@@ -58,7 +58,11 @@ function u({ showStrengthMeter: u = !1, size: d = "md", labels: f, className: p,
 			})]
 		}), u && C && /* @__PURE__ */ o("div", {
 			className: e["strength-meter"],
+			role: "meter",
 			"aria-label": T,
+			"aria-valuenow": C.score,
+			"aria-valuemin": 0,
+			"aria-valuemax": 4,
 			"data-strength": C.label,
 			children: [
 				0,

package/dist/popover/popover.css

@@ -1 +1 @@
-@layer cascivo.component{._content_208tz_6{padding:var(--cascivo-space-3);background:var(--cascivo-color-surface);border:1px solid var(--cascivo-color-border);border-radius:var(--cascivo-radius-overlay);box-shadow:var(--cascivo-shadow-md);margin:0;position:fixed;inset:auto}@supports (anchor-name:--a){._content_208tz_6{position-try-fallbacks:flip-block, flip-inline, flip-block flip-inline;inset-block-start:anchor(end);inset-inline-start:anchor(start)}}._content_208tz_6{opacity:1;transition:opacity var(--cascivo-motion-enter), translate var(--cascivo-motion-enter), display var(--cascivo-motion-enter) allow-discrete, overlay var(--cascivo-motion-enter) allow-discrete;translate:0}@starting-style{._content_208tz_6{opacity:0;translate:0 calc(-1 * var(--cascivo-space-2))}}._content_208tz_6[data-state=closed]{opacity:0;translate:0 calc(-1 * var(--cascivo-space-2));transition:opacity var(--cascivo-motion-exit), translate var(--cascivo-motion-exit), display var(--cascivo-motion-exit) allow-discrete, overlay var(--cascivo-motion-exit) allow-discrete}}
+@layer cascivo.component{._trigger_13tp0_2{justify-content:center;align-items:center;min-block-size:1.5rem;min-inline-size:1.5rem;display:inline-flex}._content_13tp0_11{padding:var(--cascivo-space-3);background:var(--cascivo-color-surface);border:1px solid var(--cascivo-color-border);border-radius:var(--cascivo-radius-overlay);box-shadow:var(--cascivo-shadow-md);margin:0;position:fixed;inset:auto}@supports (anchor-name:--a){._content_13tp0_11{position-try-fallbacks:flip-block, flip-inline, flip-block flip-inline;inset-block-start:anchor(end);inset-inline-start:anchor(start)}}._content_13tp0_11{opacity:1;transition:opacity var(--cascivo-motion-enter), translate var(--cascivo-motion-enter), display var(--cascivo-motion-enter) allow-discrete, overlay var(--cascivo-motion-enter) allow-discrete;translate:0}@starting-style{._content_13tp0_11{opacity:0;translate:0 calc(-1 * var(--cascivo-space-2))}}._content_13tp0_11[data-state=closed]{opacity:0;translate:0 calc(-1 * var(--cascivo-space-2));transition:opacity var(--cascivo-motion-exit), translate var(--cascivo-motion-exit), display var(--cascivo-motion-exit) allow-discrete, overlay var(--cascivo-motion-exit) allow-discrete}}

package/dist/popover/popover.module.js

@@ -2,8 +2,8 @@
 
 import './popover.css';
 var e = {
-	trigger: "_trigger_208tz_2",
-	content: "_content_208tz_6"
+	trigger: "_trigger_13tp0_2",
+	content: "_content_13tp0_11"
 };
 //#endregion
 export { e as default };

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

@@ -2,24 +2,27 @@
 
 import e from "./radial-progress.module.js";
 import { jsx as t } from "react/jsx-runtime";
+import { useId as n } from "react";
 //#region ../components/src/radial-progress/radial-progress.tsx
-function n({ value: n, size: r = "md", variant: i = "primary", children: a, className: o, ...s }) {
-	let c = Math.min(100, Math.max(0, n));
+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", {
 		role: "progressbar",
-		"aria-valuenow": c,
+		"aria-valuenow": l,
 		"aria-valuemin": 0,
 		"aria-valuemax": 100,
-		className: [e.radialProgress, o].filter(Boolean).join(" "),
-		"data-size": r,
-		"data-variant": i,
-		style: { "--cascivo-radial-progress": c },
-		...s,
+		"aria-labelledby": c["aria-label"] ? void 0 : u,
+		className: [e.radialProgress, s].filter(Boolean).join(" "),
+		"data-size": i,
+		"data-variant": a,
+		style: { "--cascivo-radial-progress": l },
+		...c,
 		children: /* @__PURE__ */ t("span", {
+			id: u,
 			className: e.label,
-			children: a ?? `${c}%`
+			children: o ?? `${l}%`
 		})
 	});
 }
 //#endregion
-export { n as RadialProgress };
+export { r as RadialProgress };

package/dist/shell-header/shell-header.js

@@ -64,7 +64,7 @@ function f({ item: n }) {
 			style: { positionAnchor: d },
 			className: t.navMenuPanel,
 			onKeyDown: _,
-			children: n.items.map((e) => /* @__PURE__ */ c("a", {
+			children: n.items.map((e, n) => /* @__PURE__ */ c("a", {
 				href: e.href,
 				role: "menuitem",
 				"aria-current": e.active ? "page" : void 0,
@@ -72,7 +72,7 @@ function f({ item: n }) {
 				className: t.navMenuItem,
 				onClick: p,
 				children: e.label
-			}, e.href))
+			}, e.id ?? `${n}-${e.href}`))
 		})]
 	});
 }
@@ -127,13 +127,14 @@ function p({ brand: e, nav: r, actions: i, end: p, onMenuClick: m, menuExpanded:
 				className: t.nav,
 				children: /* @__PURE__ */ c("ul", {
 					className: t.navList,
-					children: r.map((e) => d(e) ? /* @__PURE__ */ c(f, { item: e }, e.label) : /* @__PURE__ */ c("li", { children: /* @__PURE__ */ c("a", {
+					children: r.map((e, n) => d(e) ? /* @__PURE__ */ c(f, { item: e }, e.id ?? `${n}-${e.label}`) : /* @__PURE__ */ c("li", { children: /* @__PURE__ */ c("a", {
 						href: e.href,
 						"aria-current": e.active ? "page" : void 0,
 						"data-state": e.active ? "active" : void 0,
 						className: t.navLink,
+						...e.onClick ? { onClick: e.onClick } : {},
 						children: e.label
-					}) }, e.href))
+					}) }, e.id ?? `${n}-${e.href}`))
 				})
 			}),
 			/* @__PURE__ */ c("div", { className: t.spacer }),

package/dist/side-nav/side-nav.js

@@ -174,7 +174,7 @@ function v({ items: t, groups: d, collapsed: m, defaultCollapsed: v = !1, onColl
 						children: t.items.map((t, i) => {
 							let a = `${r}-${i}`;
 							if (t.items) {
-								if (L && !C) return /* @__PURE__ */ l("li", { children: /* @__PURE__ */ l(_, { item: t }) }, t.label);
+								if (L && !C) return /* @__PURE__ */ l("li", { children: /* @__PURE__ */ l(_, { item: t }) }, t.id ?? a);
 								let e = P.value.includes(t.label), r = `${j}-group-${a}`;
 								return /* @__PURE__ */ u("li", { children: [/* @__PURE__ */ u("button", {
 									type: "button",
@@ -230,12 +230,12 @@ function v({ items: t, groups: d, collapsed: m, defaultCollapsed: v = !1, onColl
 											children: e.label
 										}, t))
 									})
-								})] }, t.label);
+								})] }, t.id ?? a);
 							}
 							if (t.render) return /* @__PURE__ */ l("li", {
 								className: n.customItem,
 								children: t.render({ collapsed: L })
-							}, t.label);
+							}, t.id ?? a);
 							let o = /* @__PURE__ */ u(c, { children: [
 								t.icon ? /* @__PURE__ */ l("span", {
 									className: n.icon,
@@ -289,7 +289,7 @@ function v({ items: t, groups: d, collapsed: m, defaultCollapsed: v = !1, onColl
 								content: t.label,
 								placement: "right",
 								children: d
-							}) : d }, t.label);
+							}) : d }, t.id ?? a);
 						})
 					})]
 				}, r))

package/dist/stat/stat.css

@@ -1 +1 @@
-@layer cascivo.component{._stat_1gtqw_2{gap:var(--cascivo-space-1);font-family:var(--cascivo-font-sans);flex-direction:column;display:flex}._label_1gtqw_9{font-size:var(--cascivo-text-sm);color:var(--cascivo-color-text-subtle);line-height:var(--cascivo-leading-tight)}._value_1gtqw_15{font-size:var(--cascivo-text-2xl);font-weight:var(--cascivo-font-semibold);color:var(--cascivo-color-text);line-height:var(--cascivo-leading-tight);font-variant-numeric:tabular-nums}._delta_1gtqw_23{align-items:center;gap:var(--cascivo-space-1);font-size:var(--cascivo-text-sm);font-weight:var(--cascivo-font-medium);font-variant-numeric:tabular-nums;display:inline-flex}._delta_1gtqw_23[data-trend=up]{color:var(--cascivo-color-success)}._delta_1gtqw_23[data-trend=down]{color:var(--cascivo-color-destructive)}._delta_1gtqw_23[data-trend=flat]{color:var(--cascivo-color-text-subtle)}._arrow_1gtqw_44{font-size:var(--cascivo-text-xs);line-height:1}._help_1gtqw_49{font-size:var(--cascivo-text-xs);color:var(--cascivo-color-text-subtle);line-height:var(--cascivo-leading-tight)}}
+@layer cascivo.component{._stat_119kx_2{gap:var(--cascivo-space-1);font-family:var(--cascivo-font-sans);flex-direction:column;display:flex}._label_119kx_9{font-size:var(--cascivo-text-sm);color:var(--cascivo-color-text-subtle);line-height:var(--cascivo-leading-tight)}._value_119kx_15{font-size:var(--cascivo-text-2xl);font-weight:var(--cascivo-font-semibold);color:var(--cascivo-color-text);line-height:var(--cascivo-leading-tight);font-variant-numeric:tabular-nums}._delta_119kx_23{align-items:center;gap:var(--cascivo-space-1);font-size:var(--cascivo-text-sm);font-weight:var(--cascivo-font-medium);font-variant-numeric:tabular-nums;display:inline-flex}._delta_119kx_23[data-trend=up]{color:var(--cascivo-color-success-foreground)}._delta_119kx_23[data-trend=down]{color:var(--cascivo-color-destructive-foreground)}._delta_119kx_23[data-trend=flat]{color:var(--cascivo-color-text-subtle)}._arrow_119kx_44{font-size:var(--cascivo-text-xs);line-height:1}._help_119kx_49{font-size:var(--cascivo-text-xs);color:var(--cascivo-color-text-subtle);line-height:var(--cascivo-leading-tight)}}

package/dist/stat/stat.module.js

@@ -2,12 +2,12 @@
 
 import './stat.css';
 var e = {
-	stat: "_stat_1gtqw_2",
-	label: "_label_1gtqw_9",
-	value: "_value_1gtqw_15",
-	delta: "_delta_1gtqw_23",
-	arrow: "_arrow_1gtqw_44",
-	help: "_help_1gtqw_49"
+	stat: "_stat_119kx_2",
+	label: "_label_119kx_9",
+	value: "_value_119kx_15",
+	delta: "_delta_119kx_23",
+	arrow: "_arrow_119kx_44",
+	help: "_help_119kx_49"
 };
 //#endregion
 export { e as default };

package/dist/steps/steps.css

@@ -1 +1 @@
-@layer cascivo.component{._steps_1xps1_2{gap:0;margin:0;padding:0;list-style:none;display:flex}._steps_1xps1_2[data-orientation=horizontal]{flex-direction:row;align-items:center}._steps_1xps1_2[data-orientation=vertical]{flex-direction:column}._step_1xps1_2{flex:1;align-items:center;gap:.5rem;display:flex;position:relative}._step_1xps1_2:not(:last-child):after{content:"";background-color:var(--cascivo-border-default);flex:1;block-size:1px}._steps_1xps1_2[data-orientation=vertical] ._step_1xps1_2:not(:last-child):after{flex:none;block-size:calc(100% - 1.5rem);inline-size:1px;position:absolute;inset-block-start:2rem;inset-inline-start:.75rem}._circle_1xps1_42{border-radius:var(--cascivo-radius-full);border:2px solid var(--cascivo-border-default);background-color:var(--cascivo-color-surface);block-size:1.5rem;inline-size:1.5rem;color:var(--cascivo-color-text-muted);transition:background-color .15s var(--cascivo-ease-out), border-color .15s var(--cascivo-ease-out);flex-shrink:0;justify-content:center;align-items:center;font-size:.75rem;font-weight:600;display:flex}._step_1xps1_2[data-state=active] ._circle_1xps1_42{background-color:var(--cascivo-color-accent);border-color:var(--cascivo-color-accent);color:var(--cascivo-color-accent-content)}._step_1xps1_2[data-state=complete] ._circle_1xps1_42{background-color:var(--cascivo-color-success);border-color:var(--cascivo-color-success);color:var(--cascivo-color-success-content)}._step_1xps1_2[data-state=error] ._circle_1xps1_42{background-color:var(--cascivo-color-error);border-color:var(--cascivo-color-error);color:var(--cascivo-color-error-content)}._step_1xps1_2[data-state=complete]:not(:last-child):after{background-color:var(--cascivo-color-success)}._label_1xps1_82{color:var(--cascivo-color-text-subtle);font-size:.875rem}._step_1xps1_2[data-state=active] ._label_1xps1_82{color:var(--cascivo-color-text);font-weight:500}._step_1xps1_2[data-state=complete] ._label_1xps1_82{color:var(--cascivo-color-text-subtle)}._step_1xps1_2[data-state=error] ._label_1xps1_82{color:var(--cascivo-color-error)}}
+@layer cascivo.component{._steps_1u41q_2{gap:0;margin:0;padding:0;list-style:none;display:flex}._steps_1u41q_2[data-orientation=horizontal]{flex-direction:row;align-items:center}._steps_1u41q_2[data-orientation=vertical]{flex-direction:column}._step_1u41q_2{flex:1;align-items:center;gap:.5rem;display:flex;position:relative}._step_1u41q_2:not(:last-child):after{content:"";background-color:var(--cascivo-border-default);flex:1;block-size:1px}._steps_1u41q_2[data-orientation=vertical] ._step_1u41q_2:not(:last-child):after{flex:none;block-size:calc(100% - 1.5rem);inline-size:1px;position:absolute;inset-block-start:2rem;inset-inline-start:.75rem}._circle_1u41q_42{border-radius:var(--cascivo-radius-full);border:2px solid var(--cascivo-border-default);background-color:var(--cascivo-color-surface);block-size:1.5rem;inline-size:1.5rem;color:var(--cascivo-color-text-muted);transition:background-color .15s var(--cascivo-ease-out), border-color .15s var(--cascivo-ease-out);flex-shrink:0;justify-content:center;align-items:center;font-size:.75rem;font-weight:600;display:flex}._step_1u41q_2[data-state=active] ._circle_1u41q_42{background-color:var(--cascivo-color-accent);border-color:var(--cascivo-color-accent);color:var(--cascivo-color-accent-content)}._step_1u41q_2[data-state=complete] ._circle_1u41q_42{background-color:var(--cascivo-color-success);border-color:var(--cascivo-color-success);color:var(--cascivo-color-success-content)}._step_1u41q_2[data-state=error] ._circle_1u41q_42{background-color:var(--cascivo-color-error);border-color:var(--cascivo-color-error);color:var(--cascivo-color-error-content)}._step_1u41q_2[data-state=complete]:not(:last-child):after{background-color:var(--cascivo-color-success)}._label_1u41q_82{color:var(--cascivo-color-text-subtle);font-size:.875rem}._step_1u41q_2[data-state=active] ._label_1u41q_82{color:var(--cascivo-color-text);font-weight:500}._step_1u41q_2[data-state=complete] ._label_1u41q_82{color:var(--cascivo-color-text-subtle)}._step_1u41q_2[data-state=error] ._label_1u41q_82{color:var(--cascivo-color-destructive-foreground)}}

package/dist/steps/steps.js

@@ -2,25 +2,28 @@
 
 import e from "./steps.module.js";
 import { useSignal as t, useSignals as n } from "@cascivo/core";
-import { jsx as r, jsxs as i } from "react/jsx-runtime";
+import { builtin as r, t as i } from "@cascivo/i18n";
+import { jsx as a, jsxs as o } from "react/jsx-runtime";
 //#region ../components/src/steps/steps.tsx
-function a({ steps: a, activeStep: o, orientation: s = "horizontal", className: c }) {
+function s({ steps: s, activeStep: c, orientation: l = "horizontal", className: u, ariaLabel: d }) {
 	n();
-	let l = t(o ?? 0);
-	return l.value = o ?? l.value, /* @__PURE__ */ r("ol", {
-		className: [e.steps, c].filter(Boolean).join(" "),
-		"data-orientation": s,
-		"aria-label": "Steps",
-		children: a.map((t, n) => {
-			let a = t.state ?? (n < l.value ? "complete" : n === l.value ? "active" : "pending");
-			return /* @__PURE__ */ i("li", {
+	let f = t(c ?? 0);
+	f.value = c ?? f.value;
+	let p = d ?? i(r.steps.label);
+	return /* @__PURE__ */ a("ol", {
+		className: [e.steps, u].filter(Boolean).join(" "),
+		"data-orientation": l,
+		"aria-label": p,
+		children: s.map((t, n) => {
+			let r = t.state ?? (n < f.value ? "complete" : n === f.value ? "active" : "pending");
+			return /* @__PURE__ */ o("li", {
 				className: e.step,
-				"data-state": a,
-				"aria-current": a === "active" ? "step" : void 0,
-				children: [/* @__PURE__ */ r("div", {
+				"data-state": r,
+				"aria-current": r === "active" ? "step" : void 0,
+				children: [/* @__PURE__ */ a("div", {
 					className: e.circle,
-					children: a === "complete" ? "✓" : a === "error" ? "✕" : n + 1
-				}), /* @__PURE__ */ r("span", {
+					children: r === "complete" ? "✓" : r === "error" ? "✕" : n + 1
+				}), /* @__PURE__ */ a("span", {
 					className: e.label,
 					children: t.label
 				})]
@@ -29,4 +32,4 @@ function a({ steps: a, activeStep: o, orientation: s = "horizontal", className:
 	});
 }
 //#endregion
-export { a as Steps };
+export { s as Steps };

package/dist/steps/steps.module.js

@@ -2,10 +2,10 @@
 
 import './steps.css';
 var e = {
-	steps: "_steps_1xps1_2",
-	step: "_step_1xps1_2",
-	circle: "_circle_1xps1_42",
-	label: "_label_1xps1_82"
+	steps: "_steps_1u41q_2",
+	step: "_step_1u41q_2",
+	circle: "_circle_1u41q_42",
+	label: "_label_1u41q_82"
 };
 //#endregion
 export { e as default };