@cascivo/react 0.12.0 → 0.13.1

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

@@ -3,22 +3,22 @@
 import { Tooltip as e } from "../tooltip/tooltip.js";
 import { usePopover as t } from "../popover/use-popover.js";
 import n from "./side-nav.module.js";
-import { cn as r, getLinkComponent as i, useSignal as a, useSignals as o } from "@cascivo/core";
-import { builtin as s, t as c } from "@cascivo/i18n";
-import { Fragment as l, jsx as u, jsxs as d } from "react/jsx-runtime";
-import { Fragment as f, useId as p } from "react";
+import { cn as r, focusElement as i, getLinkComponent as a, useSignal as o, useSignals as s } from "@cascivo/core";
+import { Fragment as c, useId as l } from "react";
+import { builtin as u, t as d } from "@cascivo/i18n";
+import { Fragment as f, jsx as p, jsxs as m } from "react/jsx-runtime";
 //#region ../components/src/side-nav/side-nav.tsx
-function m(e) {
+function h(e) {
 	return !("type" in e);
 }
-function h() {
-	return /* @__PURE__ */ u("svg", {
+function g() {
+	return /* @__PURE__ */ p("svg", {
 		viewBox: "0 0 16 16",
 		width: "14",
 		height: "14",
 		"aria-hidden": "true",
 		className: n.checkMark,
-		children: /* @__PURE__ */ u("path", {
+		children: /* @__PURE__ */ p("path", {
 			d: "M3.5 8.5l3 3 6-7",
 			fill: "none",
 			stroke: "currentColor",
@@ -28,20 +28,20 @@ function h() {
 		})
 	});
 }
-function g(e, { inMenu: t, onActivate: a, extraClass: o }) {
-	let s = t ? "menuitem" : void 0, c = r(n.link, n.sublink, o), f = /* @__PURE__ */ d(l, { children: [
-		e.icon ? /* @__PURE__ */ u("span", {
+function _(e, { inMenu: t, onActivate: i, extraClass: o }) {
+	let s = t ? "menuitem" : void 0, c = r(n.link, n.sublink, o), l = /* @__PURE__ */ m(f, { children: [
+		e.icon ? /* @__PURE__ */ p("span", {
 			className: n.icon,
 			"aria-hidden": "true",
 			children: e.icon
 		}) : null,
-		/* @__PURE__ */ u("span", {
+		/* @__PURE__ */ p("span", {
 			className: n.label,
 			children: e.label
 		}),
-		e.selected ? /* @__PURE__ */ u(h, {}) : null
+		e.selected ? /* @__PURE__ */ p(g, {}) : null
 	] });
-	return e.onSelect && !e.href ? /* @__PURE__ */ u("button", {
+	return e.onSelect && !e.href ? /* @__PURE__ */ p("button", {
 		type: "button",
 		role: s,
 		"aria-current": e.active ? "page" : void 0,
@@ -50,10 +50,10 @@ function g(e, { inMenu: t, onActivate: a, extraClass: o }) {
 		disabled: e.disabled,
 		className: c,
 		onClick: () => {
-			e.onSelect?.(), a?.();
+			e.onSelect?.(), i?.();
 		},
-		children: f
-	}) : /* @__PURE__ */ u(i(), {
+		children: l
+	}) : /* @__PURE__ */ p(a(), {
 		href: e.disabled ? void 0 : e.href,
 		role: s,
 		"aria-current": e.active ? "page" : void 0,
@@ -67,116 +67,116 @@ function g(e, { inMenu: t, onActivate: a, extraClass: o }) {
 				t.preventDefault();
 				return;
 			}
-			e.onSelect?.(), a?.();
+			e.onSelect?.(), i?.();
 		},
-		children: f
+		children: l
 	});
 }
-function _(e) {
+function v(e) {
 	if (typeof Intl < "u" && "Segmenter" in Intl) {
 		let t = new Intl.Segmenter(void 0, { granularity: "grapheme" });
 		for (let n of t.segment(e)) return n.segment;
 	}
 	return [...e][0] ?? "";
 }
-function v({ item: e }) {
-	let { triggerRef: r, popoverRef: i, isOpen: a, anchorName: o, open: s, close: c, toggle: p } = t(), h = "[role=\"menuitem\"]:not([disabled]):not([aria-disabled=\"true\"])";
-	return /* @__PURE__ */ d(l, { children: [/* @__PURE__ */ u("button", {
+function y({ item: e }) {
+	let { triggerRef: r, popoverRef: a, isOpen: o, anchorName: s, open: l, close: u, toggle: d } = t(), g = "[role=\"menuitem\"]:not([disabled]):not([aria-disabled=\"true\"])";
+	return /* @__PURE__ */ m(f, { children: [/* @__PURE__ */ p("button", {
 		ref: r,
 		type: "button",
 		"aria-haspopup": "menu",
-		"aria-expanded": a.value,
+		"aria-expanded": o.value,
 		"aria-label": e.label,
-		"data-state": a.value ? "open" : "closed",
-		style: { anchorName: o },
+		"data-state": o.value ? "open" : "closed",
+		style: { anchorName: s },
 		className: n.groupTrigger,
-		onClick: () => p(),
+		onClick: () => d(),
 		onKeyDown: (e) => {
 			if (e.key === "ArrowDown") {
-				e.preventDefault(), a.value || s();
-				let t = i.current;
+				e.preventDefault(), o.value || l();
+				let t = a.current;
 				t && setTimeout(() => {
-					t.querySelector(h)?.focus();
+					t.querySelector(g)?.focus();
 				}, 0);
-			} else e.key === "Escape" && c();
+			} else e.key === "Escape" && u();
 		},
-		children: e.icon ? /* @__PURE__ */ u("span", {
+		children: e.icon ? /* @__PURE__ */ p("span", {
 			className: n.icon,
 			"aria-hidden": "true",
 			children: e.icon
-		}) : /* @__PURE__ */ u("span", {
+		}) : /* @__PURE__ */ p("span", {
 			className: n.fallbackIcon,
 			"data-fallback-icon": !0,
 			"aria-hidden": "true",
-			children: _(e.label)
+			children: v(e.label)
 		})
-	}), /* @__PURE__ */ d("div", {
-		ref: i,
+	}), /* @__PURE__ */ m("div", {
+		ref: a,
 		popover: "auto",
 		role: "menu",
 		"aria-label": e.label,
-		style: { positionAnchor: o },
+		style: { positionAnchor: s },
 		className: n.railFlyout,
 		onKeyDown: (e) => {
-			let t = i.current;
+			let t = a.current;
 			if (!t) return;
-			let n = Array.from(t.querySelectorAll(h)), a = n.indexOf(e.target);
-			e.key === "ArrowDown" ? (e.preventDefault(), n[(a + 1) % n.length]?.focus()) : e.key === "ArrowUp" ? (e.preventDefault(), n[(a - 1 + n.length) % n.length]?.focus()) : e.key === "Escape" && (e.preventDefault(), c(), r.current?.focus());
+			let n = Array.from(t.querySelectorAll(g)), o = n.indexOf(e.target);
+			e.key === "ArrowDown" ? (e.preventDefault(), n[(o + 1) % n.length]?.focus()) : e.key === "ArrowUp" ? (e.preventDefault(), n[(o - 1 + n.length) % n.length]?.focus()) : e.key === "Escape" && (e.preventDefault(), u(), i(r.current));
 		},
-		children: [/* @__PURE__ */ u("div", {
+		children: [/* @__PURE__ */ p("div", {
 			className: n.railFlyoutCaption,
 			"aria-hidden": "true",
 			children: e.label
-		}), e.items.map((e, t) => m(e) ? /* @__PURE__ */ u(f, { children: g(e, {
+		}), e.items.map((e, t) => h(e) ? /* @__PURE__ */ p(c, { children: _(e, {
 			inMenu: !0,
-			onActivate: c,
+			onActivate: u,
 			extraClass: n.flyoutItem
-		}) }, t) : e.type === "separator" ? /* @__PURE__ */ u("div", {
+		}) }, t) : e.type === "separator" ? /* @__PURE__ */ p("div", {
 			role: "separator",
 			className: n.flyoutSeparator
-		}, t) : /* @__PURE__ */ u("div", {
+		}, t) : /* @__PURE__ */ p("div", {
 			className: n.railFlyoutCaption,
 			"aria-hidden": "true",
 			children: e.label
 		}, t))]
 	})] });
 }
-function y({ items: t, groups: f, collapsed: h, defaultCollapsed: y = !1, onCollapsedChange: b, ariaLabel: x, collapseLabel: S, expandLabel: C, expandOnHover: w = !1, showCollapseToggle: T = !0, header: E, footer: D, className: O }) {
-	o();
-	let k = x ?? c(s.sideNav.nav), A = S ?? c(s.sideNav.collapse), j = C ?? c(s.sideNav.expand), M = p(), N = a(h ?? y);
-	h !== void 0 && (N.value = h);
-	let P = f ?? (t ? [{ items: t }] : [{ items: [] }]), F = a(P.flatMap((e) => e.items).filter((e) => e.items?.some((e) => m(e) && e.active)).map((e) => e.label)), I = (e) => {
+function b({ items: t, groups: i, collapsed: c, defaultCollapsed: g = !1, onCollapsedChange: b, ariaLabel: x, collapseLabel: S, expandLabel: C, expandOnHover: w = !1, showCollapseToggle: T = !0, header: E, footer: D, className: O }) {
+	s();
+	let k = x ?? d(u.sideNav.nav), A = S ?? d(u.sideNav.collapse), j = C ?? d(u.sideNav.expand), M = l(), N = o(c ?? g);
+	c !== void 0 && (N.value = c);
+	let P = i ?? (t ? [{ items: t }] : [{ items: [] }]), F = o(P.flatMap((e) => e.items).filter((e) => e.items?.some((e) => h(e) && e.active)).map((e) => e.label)), I = (e) => {
 		let t = F.value;
 		F.value = t.includes(e) ? t.filter((t) => t !== e) : [...t, e];
 	}, L = () => {
 		let e = !N.value;
-		h === void 0 && (N.value = e), b?.(e);
+		c === void 0 && (N.value = e), b?.(e);
 	}, R = N.value;
-	return /* @__PURE__ */ d("nav", {
+	return /* @__PURE__ */ m("nav", {
 		"aria-label": k,
 		"data-state": R ? "collapsed" : "expanded",
 		"data-expand-on-hover": R && w ? "" : void 0,
 		className: r(n.sideNav, O),
 		children: [
-			E && /* @__PURE__ */ u("div", {
+			E && /* @__PURE__ */ p("div", {
 				className: n.header,
 				children: E
 			}),
-			/* @__PURE__ */ u("ul", {
+			/* @__PURE__ */ p("ul", {
 				className: n.list,
-				children: P.map((t, r) => /* @__PURE__ */ d("li", {
+				children: P.map((t, r) => /* @__PURE__ */ m("li", {
 					className: n.group,
-					children: [t.label && /* @__PURE__ */ u("h3", {
+					children: [t.label && /* @__PURE__ */ p("h3", {
 						className: n.groupLabel,
 						children: t.label
-					}), /* @__PURE__ */ u("ul", {
+					}), /* @__PURE__ */ p("ul", {
 						className: n.groupItems,
-						children: t.items.map((t, a) => {
-							let o = `${r}-${a}`;
+						children: t.items.map((t, i) => {
+							let o = `${r}-${i}`;
 							if (t.items) {
-								if (R && !w) return /* @__PURE__ */ u("li", { children: /* @__PURE__ */ u(v, { item: t }) }, t.id ?? o);
+								if (R && !w) return /* @__PURE__ */ p("li", { children: /* @__PURE__ */ p(y, { item: t }) }, t.id ?? o);
 								let e = F.value.includes(t.label), r = `${M}-group-${o}`;
-								return /* @__PURE__ */ d("li", { children: [/* @__PURE__ */ d("button", {
+								return /* @__PURE__ */ m("li", { children: [/* @__PURE__ */ m("button", {
 									type: "button",
 									"aria-expanded": e,
 									"aria-controls": r,
@@ -185,28 +185,28 @@ function y({ items: t, groups: f, collapsed: h, defaultCollapsed: y = !1, onColl
 									className: n.groupTrigger,
 									onClick: () => I(t.label),
 									children: [
-										t.icon ? /* @__PURE__ */ u("span", {
+										t.icon ? /* @__PURE__ */ p("span", {
 											className: n.icon,
 											"aria-hidden": "true",
 											children: t.icon
-										}) : R ? /* @__PURE__ */ u("span", {
+										}) : R ? /* @__PURE__ */ p("span", {
 											className: n.fallbackIcon,
 											"data-fallback-icon": !0,
 											"aria-hidden": "true",
-											children: _(t.label)
+											children: v(t.label)
 										}) : null,
-										/* @__PURE__ */ u("span", {
+										/* @__PURE__ */ p("span", {
 											className: n.label,
 											"data-rail-hidden": R || void 0,
 											children: t.label
 										}),
-										/* @__PURE__ */ u("svg", {
+										/* @__PURE__ */ p("svg", {
 											viewBox: "0 0 16 16",
 											width: "12",
 											height: "12",
 											"aria-hidden": "true",
 											className: n.groupIndicator,
-											children: /* @__PURE__ */ u("path", {
+											children: /* @__PURE__ */ p("path", {
 												d: "M4 6l4 4 4-4",
 												fill: "none",
 												stroke: "currentColor",
@@ -216,44 +216,44 @@ function y({ items: t, groups: f, collapsed: h, defaultCollapsed: y = !1, onColl
 											})
 										})
 									]
-								}), /* @__PURE__ */ u("div", {
+								}), /* @__PURE__ */ p("div", {
 									id: r,
 									"data-state": e ? "open" : "closed",
 									className: n.sublist,
-									children: /* @__PURE__ */ u("ul", {
+									children: /* @__PURE__ */ p("ul", {
 										className: n.sublistInner,
-										children: t.items.map((e, t) => m(e) ? /* @__PURE__ */ u("li", { children: g(e, { inMenu: !1 }) }, t) : e.type === "separator" ? /* @__PURE__ */ u("li", {
+										children: t.items.map((e, t) => h(e) ? /* @__PURE__ */ p("li", { children: _(e, { inMenu: !1 }) }, t) : e.type === "separator" ? /* @__PURE__ */ p("li", {
 											role: "separator",
 											className: n.subSeparator
-										}, t) : /* @__PURE__ */ u("li", {
+										}, t) : /* @__PURE__ */ p("li", {
 											className: n.subGroupLabel,
 											children: e.label
 										}, t))
 									})
 								})] }, t.id ?? o);
 							}
-							let s = /* @__PURE__ */ d(l, { children: [
-								t.icon ? /* @__PURE__ */ u("span", {
+							let s = /* @__PURE__ */ m(f, { children: [
+								t.icon ? /* @__PURE__ */ p("span", {
 									className: n.icon,
 									"aria-hidden": "true",
 									children: t.icon
-								}) : R ? /* @__PURE__ */ u("span", {
+								}) : R ? /* @__PURE__ */ p("span", {
 									className: n.fallbackIcon,
 									"data-fallback-icon": !0,
 									"aria-hidden": "true",
-									children: _(t.label)
+									children: v(t.label)
 								}) : null,
-								/* @__PURE__ */ u("span", {
+								/* @__PURE__ */ p("span", {
 									className: n.label,
 									"data-rail-hidden": R || void 0,
 									children: t.label
 								}),
-								t.trailing == null ? null : /* @__PURE__ */ u("span", {
+								t.trailing == null ? null : /* @__PURE__ */ p("span", {
 									className: n.trailing,
 									"data-rail-hidden": R || void 0,
 									children: t.trailing
 								})
-							] }), c = t.tone && t.tone !== "default" ? t.tone : void 0, f = {
+							] }), c = t.tone && t.tone !== "default" ? t.tone : void 0, l = {
 								href: t.disabled ? void 0 : t.href,
 								"aria-current": t.active ? "page" : void 0,
 								"aria-label": R ? t.label : void 0,
@@ -270,15 +270,15 @@ function y({ items: t, groups: f, collapsed: h, defaultCollapsed: y = !1, onColl
 									t.onClick?.(e);
 								}
 							};
-							if (t.render) return /* @__PURE__ */ u("li", {
+							if (t.render) return /* @__PURE__ */ p("li", {
 								className: n.customItem,
 								children: t.render({
 									collapsed: R,
 									children: s,
-									linkProps: f
+									linkProps: l
 								})
 							}, t.id ?? o);
-							let p = i(), h = t.onClick && !t.href ? /* @__PURE__ */ u("button", {
+							let u = a(), d = t.onClick && !t.href ? /* @__PURE__ */ p("button", {
 								type: "button",
 								"aria-current": t.active ? "page" : void 0,
 								"aria-label": R ? t.label : void 0,
@@ -288,35 +288,35 @@ function y({ items: t, groups: f, collapsed: h, defaultCollapsed: y = !1, onColl
 								disabled: t.disabled,
 								onClick: (e) => t.onClick?.(e),
 								children: s
-							}) : /* @__PURE__ */ u(p, {
-								...f,
+							}) : /* @__PURE__ */ p(u, {
+								...l,
 								children: s
 							});
-							return /* @__PURE__ */ u("li", { children: R && !w ? /* @__PURE__ */ u(e, {
+							return /* @__PURE__ */ p("li", { children: R && !w ? /* @__PURE__ */ p(e, {
 								content: t.label,
 								placement: "right",
-								children: h
-							}) : h }, t.id ?? o);
+								children: d
+							}) : d }, t.id ?? o);
 						})
 					})]
 				}, r))
 			}),
-			D && /* @__PURE__ */ u("div", {
+			D && /* @__PURE__ */ p("div", {
 				className: n.footer,
 				children: D
 			}),
-			T && /* @__PURE__ */ u("button", {
+			T && /* @__PURE__ */ p("button", {
 				type: "button",
 				"aria-label": R ? j : A,
 				className: n.collapseToggle,
 				onClick: L,
-				children: /* @__PURE__ */ u("svg", {
+				children: /* @__PURE__ */ p("svg", {
 					viewBox: "0 0 16 16",
 					width: "14",
 					height: "14",
 					"aria-hidden": "true",
 					className: n.collapseIcon,
-					children: /* @__PURE__ */ u("path", {
+					children: /* @__PURE__ */ p("path", {
 						d: "M10 4l-4 4 4 4",
 						fill: "none",
 						stroke: "currentColor",
@@ -330,4 +330,4 @@ function y({ items: t, groups: f, collapsed: h, defaultCollapsed: y = !1, onColl
 	});
 }
 //#endregion
-export { y as SideNav };
+export { b as SideNav };

package/dist/skip-nav/skip-nav.js

@@ -2,26 +2,26 @@
 
 import e from "./skip-nav.module.js";
 import { cn as t, useSignals as n } from "@cascivo/core";
-import { builtin as r, t as i } from "@cascivo/i18n";
-import { jsx as a } from "react/jsx-runtime";
+import { forwardRef as r } from "react";
+import { builtin as i, t as a } from "@cascivo/i18n";
+import { jsx as o } from "react/jsx-runtime";
 //#region ../components/src/skip-nav/skip-nav.tsx
-var o = "cascade-skip-target";
-function s({ targetId: s = o, labels: c, className: l, ...u }) {
+var s = "cascade-skip-target", c = r(function({ targetId: r = s, labels: c, className: l, ...u }, d) {
 	n();
-	let d = c?.label ?? i(r.skipNav.label);
-	return /* @__PURE__ */ a("a", {
-		href: `#${s}`,
+	let f = c?.label ?? a(i.skipNav.label);
+	return /* @__PURE__ */ o("a", {
+		href: `#${r}`,
 		className: t(e.link, l),
 		...u,
-		children: d
+		children: f
 	});
-}
-function c({ id: e = o, ...t }) {
-	return /* @__PURE__ */ a("div", {
+});
+function l({ id: e = s, ...t }) {
+	return /* @__PURE__ */ o("div", {
 		id: e,
 		tabIndex: -1,
 		...t
 	});
 }
 //#endregion
-export { s as SkipNavLink, c as SkipNavTarget };
+export { c as SkipNavLink, l as SkipNavTarget };

package/dist/slider/slider.js

@@ -2,28 +2,30 @@
 
 import e from "./slider.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/slider/slider.tsx
-function i({ label: i, className: a, id: o, min: s = 0, max: c = 100, step: l = 1, disabled: u, ...d }) {
-	let f = o ?? (i ? `cascade-slider-${i.toLowerCase().replace(/\s+/g, "-")}` : void 0);
-	return /* @__PURE__ */ r("div", {
+var a = n(function({ label: n, className: a, id: o, min: s = 0, max: c = 100, step: l = 1, disabled: u, ...d }, f) {
+	let p = o ?? (n ? `cascade-slider-${n.toLowerCase().replace(/\s+/g, "-")}` : void 0);
+	return /* @__PURE__ */ i("div", {
 		className: t(e.wrapper, a),
 		"data-disabled": u || void 0,
-		children: [i && /* @__PURE__ */ n("label", {
+		children: [n && /* @__PURE__ */ r("label", {
 			className: e.label,
-			htmlFor: f,
-			children: i
-		}), /* @__PURE__ */ n("input", {
-			id: f,
+			htmlFor: p,
+			children: n
+		}), /* @__PURE__ */ r("input", {
+			id: p,
 			type: "range",
 			min: s,
 			max: c,
 			step: l,
 			disabled: u,
 			className: e.slider,
+			ref: f,
 			...d
 		})]
 	});
-}
+});
 //#endregion
-export { i as Slider };
+export { a as Slider };

package/dist/stat/stat.css

@@ -1 +1 @@
-@layer cascivo.component{._stat_r3v5x_2{gap:var(--cascivo-space-1);font-family:var(--cascivo-font-sans);flex-direction:column;display:flex}._label_r3v5x_9{font-size:var(--cascivo-text-sm);color:var(--cascivo-color-text-subtle);line-height:var(--cascivo-leading-tight)}._value_r3v5x_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_r3v5x_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_r3v5x_23[data-trend=up]{color:var(--cascivo-color-success-foreground)}._delta_r3v5x_23[data-trend=down]{color:var(--cascivo-color-destructive-foreground)}._delta_r3v5x_23[data-trend=flat]{color:var(--cascivo-color-text-subtle)}._arrow_r3v5x_44{font-size:var(--cascivo-text-xs);line-height:1}._help_r3v5x_49{font-size:var(--cascivo-text-xs);color:var(--cascivo-color-text-subtle);line-height:var(--cascivo-leading-tight)}._visual_r3v5x_55{margin-block-start:var(--cascivo-space-1)}}
+@layer cascivo.component{._stat_ge5ag_2{gap:var(--cascivo-space-1);font-family:var(--cascivo-font-sans);flex-direction:column;min-inline-size:0;display:flex}._stat_ge5ag_2[data-card]{padding:var(--cascivo-space-4);border-radius:var(--cascivo-radius-surface);border:1px solid var(--cascivo-color-border);background:var(--cascivo-color-surface)}._label_ge5ag_20{font-size:var(--cascivo-text-sm);color:var(--cascivo-color-text-subtle);line-height:var(--cascivo-leading-tight)}._value_ge5ag_26{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_ge5ag_34{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_ge5ag_34[data-trend=up]{color:var(--cascivo-color-success-foreground)}._delta_ge5ag_34[data-trend=down]{color:var(--cascivo-color-destructive-foreground)}._delta_ge5ag_34[data-trend=flat]{color:var(--cascivo-color-text-subtle)}._arrow_ge5ag_55{font-size:var(--cascivo-text-xs);line-height:1}._help_ge5ag_60{font-size:var(--cascivo-text-xs);color:var(--cascivo-color-text-subtle);line-height:var(--cascivo-leading-tight)}._visual_ge5ag_66{margin-block-start:var(--cascivo-space-1)}}

package/dist/stat/stat.js

@@ -4,10 +4,11 @@ import e from "./stat.module.js";
 import { cn as t } from "@cascivo/core";
 import { jsx as n, jsxs as r } from "react/jsx-runtime";
 //#region ../components/src/stat/stat.tsx
-function i({ label: i, value: a, delta: o, trend: s = "flat", helpText: c, visual: l, className: u, ...d }) {
+function i({ label: i, value: a, delta: o, trend: s = "flat", helpText: c, card: l = !1, visual: u, className: d, ...f }) {
 	return /* @__PURE__ */ r("div", {
-		className: t(e.stat, u),
-		...d,
+		"data-card": l || void 0,
+		className: t(e.stat, d),
+		...f,
 		children: [
 			/* @__PURE__ */ n("span", {
 				className: e.label,
@@ -30,9 +31,9 @@ function i({ label: i, value: a, delta: o, trend: s = "flat", helpText: c, visua
 				className: e.help,
 				children: c
 			}),
-			l && /* @__PURE__ */ n("span", {
+			u && /* @__PURE__ */ n("span", {
 				className: e.visual,
-				children: l
+				children: u
 			})
 		]
 	});

package/dist/stat/stat.module.js

@@ -2,13 +2,13 @@
 
 import './stat.css';
 var e = {
-	stat: "_stat_r3v5x_2",
-	label: "_label_r3v5x_9",
-	value: "_value_r3v5x_15",
-	delta: "_delta_r3v5x_23",
-	arrow: "_arrow_r3v5x_44",
-	help: "_help_r3v5x_49",
-	visual: "_visual_r3v5x_55"
+	stat: "_stat_ge5ag_2",
+	label: "_label_ge5ag_20",
+	value: "_value_ge5ag_26",
+	delta: "_delta_ge5ag_34",
+	arrow: "_arrow_ge5ag_55",
+	help: "_help_ge5ag_60",
+	visual: "_visual_ge5ag_66"
 };
 //#endregion
 export { e as default };

package/dist/status/status.js

@@ -1,20 +1,27 @@
 "use client";
 
 import e from "./status.module.js";
-import { cn as t } from "@cascivo/core";
-import { jsx as n, jsxs as r } from "react/jsx-runtime";
+import { cn as t, normalizeTone as n } from "@cascivo/core";
+import { jsx as r, jsxs as i } from "react/jsx-runtime";
 //#region ../components/src/status/status.tsx
-function i({ status: i = "neutral", pulse: a = !1, className: o, children: s, ...c }) {
-	return /* @__PURE__ */ r("span", {
-		"data-status": i,
-		"data-pulse": a ? "" : void 0,
-		className: t(e.status, o),
-		...c,
-		children: [/* @__PURE__ */ n("span", {
+var a = {
+	neutral: "neutral",
+	info: "info",
+	success: "success",
+	warning: "warning",
+	danger: "error"
+};
+function o({ status: o = "neutral", pulse: s = !1, className: c, children: l, ...u }) {
+	return /* @__PURE__ */ i("span", {
+		"data-status": a[n(o)] ?? o,
+		"data-pulse": s ? "" : void 0,
+		className: t(e.status, c),
+		...u,
+		children: [/* @__PURE__ */ r("span", {
 			"aria-hidden": "true",
 			className: e.dot
-		}), s]
+		}), l]
 	});
 }
 //#endregion
-export { i as Status };
+export { o as Status };

package/dist/steps/steps.js

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