@cascivo/react 0.12.0 → 0.13.1

package/dist/tabs/tabs.js

@@ -2,94 +2,96 @@
 
 import e from "./tabs.module.js";
 import { cn as t, useSignal as n, useSignals as r } from "@cascivo/core";
-import { jsx as i } from "react/jsx-runtime";
-import { createContext as a, useId as o, useRef as s } from "react";
+import { createContext as i, forwardRef as a, useId as o, useRef as s } from "react";
+import { jsx as c } from "react/jsx-runtime";
 //#region ../components/src/tabs/tabs.tsx
-var c = a(null);
-function l({ defaultValue: r, value: a, onValueChange: s, className: l, children: u }) {
-	let d = o(), f = n(a ?? r ?? "");
-	a !== void 0 && (f.value = a);
+var l = i(null);
+function u({ defaultValue: r, value: i, onValueChange: a, className: s, children: u }) {
+	let d = o(), f = n(i ?? r ?? "");
+	i !== void 0 && (f.value = i);
 	let p = {
 		active: f,
 		baseId: d,
 		setValue: (e) => {
-			a === void 0 && (f.value = e), s?.(e);
+			i === void 0 && (f.value = e), a?.(e);
 		}
 	};
-	return /* @__PURE__ */ i(c.Provider, {
+	return /* @__PURE__ */ c(l.Provider, {
 		value: p,
-		children: /* @__PURE__ */ i("div", {
-			className: t(e.tabs, l),
+		children: /* @__PURE__ */ c("div", {
+			className: t(e.tabs, s),
 			children: u
 		})
 	});
 }
-function u({ className: n, children: r, ...a }) {
-	let o = s(null);
-	return /* @__PURE__ */ i(c.Consumer, { children: (s) => /* @__PURE__ */ i("div", {
-		ref: o,
+function d({ className: n, children: r, ...i }) {
+	let a = s(null);
+	return /* @__PURE__ */ c(l.Consumer, { children: (o) => /* @__PURE__ */ c("div", {
+		ref: a,
 		role: "tablist",
 		className: t(e.list, n),
 		onKeyDown: (e) => {
-			if (!s || ![
+			if (!o || ![
 				"ArrowRight",
 				"ArrowLeft",
 				"Home",
 				"End"
 			].includes(e.key)) return;
-			let t = Array.from(o.current?.querySelectorAll("[role=\"tab\"]:not([disabled])") ?? []);
+			let t = Array.from(a.current?.querySelectorAll("[role=\"tab\"]:not([disabled])") ?? []);
 			if (t.length === 0) return;
 			e.preventDefault();
-			let n = t.findIndex((e) => e.dataset.value === s.active.value), r = n;
+			let n = t.findIndex((e) => e.dataset.value === o.active.value), r = n;
 			e.key === "ArrowRight" ? r = (n + 1) % t.length : e.key === "ArrowLeft" ? r = (n - 1 + t.length) % t.length : e.key === "Home" ? r = 0 : e.key === "End" && (r = t.length - 1);
 			let i = t[r];
-			i?.focus(), i?.dataset.value && s.setValue(i.dataset.value);
+			i?.focus(), i?.dataset.value && o.setValue(i.dataset.value);
 		},
-		...a,
+		...i,
 		children: r
 	}) });
 }
-function d(e) {
-	return /* @__PURE__ */ i(c.Consumer, { children: (t) => t ? /* @__PURE__ */ i(f, {
-		store: t,
+var f = a(function(e, t) {
+	return /* @__PURE__ */ c(l.Consumer, { children: (n) => n ? /* @__PURE__ */ c(p, {
+		store: n,
+		buttonRef: t,
 		...e
 	}) : null });
-}
-function f({ store: n, value: a, className: o, children: s, disabled: c, ...l }) {
+});
+function p({ store: n, value: i, className: a, children: o, disabled: s, buttonRef: l, ...u }) {
 	r();
-	let u = n.active.value === a;
-	return /* @__PURE__ */ i("button", {
+	let d = n.active.value === i;
+	return /* @__PURE__ */ c("button", {
 		type: "button",
 		role: "tab",
-		id: `${n.baseId}-trigger-${a}`,
-		"aria-selected": u,
-		"aria-controls": `${n.baseId}-content-${a}`,
-		tabIndex: u ? 0 : -1,
-		"data-state": u ? "active" : "inactive",
-		"data-value": a,
-		disabled: c,
-		className: t(e.trigger, o),
-		onClick: () => n.setValue(a),
-		...l,
-		children: s
+		id: `${n.baseId}-trigger-${i}`,
+		"aria-selected": d,
+		"aria-controls": `${n.baseId}-content-${i}`,
+		tabIndex: d ? 0 : -1,
+		"data-state": d ? "active" : "inactive",
+		"data-value": i,
+		disabled: s,
+		className: t(e.trigger, a),
+		onClick: () => n.setValue(i),
+		ref: l,
+		...u,
+		children: o
 	});
 }
-function p(e) {
-	return /* @__PURE__ */ i(c.Consumer, { children: (t) => t ? /* @__PURE__ */ i(m, {
+function m(e) {
+	return /* @__PURE__ */ c(l.Consumer, { children: (t) => t ? /* @__PURE__ */ c(h, {
 		store: t,
 		...e
 	}) : null });
 }
-function m({ store: n, value: a, className: o, children: s, ...c }) {
-	return r(), n.active.value === a ? /* @__PURE__ */ i("div", {
+function h({ store: n, value: i, className: a, children: o, ...s }) {
+	return r(), n.active.value === i ? /* @__PURE__ */ c("div", {
 		role: "tabpanel",
-		id: `${n.baseId}-content-${a}`,
-		"aria-labelledby": `${n.baseId}-trigger-${a}`,
+		id: `${n.baseId}-content-${i}`,
+		"aria-labelledby": `${n.baseId}-trigger-${i}`,
 		tabIndex: 0,
-		className: t(e.content, o),
-		...c,
-		children: s
+		className: t(e.content, a),
+		...s,
+		children: o
 	}) : null;
 }
 //#endregion
-export { l as Tabs, p as TabsContent, u as TabsList, d as TabsTrigger };
+export { u as Tabs, m as TabsContent, d as TabsList, f as TabsTrigger };

package/dist/tag/tag.js

@@ -1,26 +1,33 @@
 "use client";
 
 import e from "./tag.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, jsxs as o } from "react/jsx-runtime";
+import { cn as t, normalizeTone 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/tag/tag.tsx
-function s({ variant: s = "default", size: c = "md", onDismiss: l, dismissLabel: u, className: d, children: f, ...p }) {
-	n();
-	let m = u ?? i(r.tag.dismiss);
-	return /* @__PURE__ */ o("span", {
-		"data-variant": s,
-		"data-size": c,
-		className: t(e.tag, d),
-		...p,
-		children: [f, l && /* @__PURE__ */ a("button", {
+var c = {
+	neutral: "default",
+	info: "info",
+	success: "success",
+	warning: "warning",
+	danger: "error"
+};
+function l({ variant: l = "default", size: u = "md", onDismiss: d, dismissLabel: f, className: p, children: m, ...h }) {
+	r();
+	let g = f ?? a(i.tag.dismiss);
+	return /* @__PURE__ */ s("span", {
+		"data-variant": c[n(l)] ?? l,
+		"data-size": u,
+		className: t(e.tag, p),
+		...h,
+		children: [m, d && /* @__PURE__ */ o("button", {
 			type: "button",
 			className: e.dismiss,
-			"aria-label": m,
-			onClick: l,
+			"aria-label": g,
+			onClick: d,
 			children: "✕"
 		})]
 	});
 }
 //#endregion
-export { s as Tag };
+export { l as Tag };

package/dist/tags-input/tags-input.css

@@ -1 +1 @@
-@layer cascivo.component{._wrapper_i1hay_2{gap:var(--cascivo-space-1);min-height:2.5rem;padding:var(--cascivo-space-2);background-color:var(--cascivo-color-surface);border:1px solid var(--cascivo-color-border);border-radius:var(--cascivo-radius-field);cursor:text;transition:border-color var(--cascivo-duration-150) var(--cascivo-ease-out), box-shadow var(--cascivo-duration-150) var(--cascivo-ease-out);flex-wrap:wrap;display:flex}._wrapper_i1hay_2:focus-within{border-color:var(--cascivo-color-accent);box-shadow:var(--cascivo-focus-ring)}._wrapper_i1hay_2[data-disabled]{cursor:not-allowed;background-color:var(--cascivo-color-bg-subtle)}._wrapper_i1hay_2[data-disabled] ._tag_i1hay_28{color:var(--cascivo-color-text-muted);border-color:var(--cascivo-color-border)}._tag_i1hay_28{align-items:center;gap:var(--cascivo-space-1);padding-block:var(--cascivo-space-0-5);padding-inline:var(--cascivo-space-2);font-family:var(--cascivo-font-sans);font-size:var(--cascivo-text-sm);color:var(--cascivo-color-text);background-color:var(--cascivo-color-bg-subtle);border:1px solid var(--cascivo-color-border);border-radius:var(--cascivo-radius-full);line-height:1.25;display:inline-flex}._tag_i1hay_28[data-state=invalid]{color:var(--cascivo-color-destructive);background-color:rgb(from var(--cascivo-color-destructive) r g b / .08);border-color:var(--cascivo-color-destructive)}._dismiss_i1hay_55{border-radius:var(--cascivo-radius-full);width:1rem;height:1rem;color:var(--cascivo-color-text-muted);cursor:pointer;font-size:var(--cascivo-text-sm);background:0 0;border:none;justify-content:center;align-items:center;padding:0;line-height:1;display:inline-flex}._dismiss_i1hay_55:hover{color:var(--cascivo-color-text);background-color:var(--cascivo-color-border)}._dismiss_i1hay_55:focus-visible{outline:2px solid var(--cascivo-color-accent);outline-offset:1px}._dismiss_i1hay_55:disabled{cursor:not-allowed}._input_i1hay_85{min-width:4rem;font-family:var(--cascivo-font-sans);font-size:var(--cascivo-text-sm);color:var(--cascivo-color-text);background:0 0;border:none;outline:none;flex:1}._input_i1hay_85::placeholder{color:var(--cascivo-color-text-muted)}._input_i1hay_85:disabled{cursor:not-allowed}}
+@layer cascivo.component{._wrapper_1ycwz_2{gap:var(--cascivo-space-1);min-inline-size:0;min-height:2.5rem;padding:var(--cascivo-space-2);background-color:var(--cascivo-color-surface);border:1px solid var(--cascivo-color-border);border-radius:var(--cascivo-radius-field);cursor:text;transition:border-color var(--cascivo-duration-150) var(--cascivo-ease-out), box-shadow var(--cascivo-duration-150) var(--cascivo-ease-out);flex-wrap:wrap;display:flex}._wrapper_1ycwz_2:focus-within{border-color:var(--cascivo-color-accent);box-shadow:var(--cascivo-focus-ring)}._wrapper_1ycwz_2[data-disabled]{cursor:not-allowed;background-color:var(--cascivo-color-bg-subtle)}._wrapper_1ycwz_2[data-disabled] ._tag_1ycwz_32{color:var(--cascivo-color-text-muted);border-color:var(--cascivo-color-border)}._tag_1ycwz_32{align-items:center;gap:var(--cascivo-space-1);padding-block:var(--cascivo-space-0-5);padding-inline:var(--cascivo-space-2);font-family:var(--cascivo-font-sans);font-size:var(--cascivo-text-sm);color:var(--cascivo-color-text);background-color:var(--cascivo-color-bg-subtle);border:1px solid var(--cascivo-color-border);border-radius:var(--cascivo-radius-full);line-height:1.25;display:inline-flex}._tag_1ycwz_32[data-state=invalid]{color:var(--cascivo-color-destructive);background-color:rgb(from var(--cascivo-color-destructive) r g b / .08);border-color:var(--cascivo-color-destructive)}._dismiss_1ycwz_59{border-radius:var(--cascivo-radius-full);width:1rem;height:1rem;color:var(--cascivo-color-text-muted);cursor:pointer;font-size:var(--cascivo-text-sm);background:0 0;border:none;justify-content:center;align-items:center;padding:0;line-height:1;display:inline-flex}._dismiss_1ycwz_59:hover{color:var(--cascivo-color-text);background-color:var(--cascivo-color-border)}._dismiss_1ycwz_59:focus-visible{outline:2px solid var(--cascivo-color-accent);outline-offset:1px}._dismiss_1ycwz_59:disabled{cursor:not-allowed}._input_1ycwz_89{min-width:4rem;font-family:var(--cascivo-font-sans);font-size:var(--cascivo-text-sm);color:var(--cascivo-color-text);background:0 0;border:none;outline:none;flex:1}._input_1ycwz_89::placeholder{color:var(--cascivo-color-text-muted)}._input_1ycwz_89:disabled{cursor:not-allowed}}

package/dist/tags-input/tags-input.js

@@ -1,64 +1,64 @@
 "use client";
 
 import e from "./tags-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 { useRef as c } from "react";
+import { cn as t, focusElement as n, useSignal as r, useSignals as i } from "@cascivo/core";
+import { useRef 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/tags-input/tags-input.tsx
-function l({ value: l, onValueChange: u, placeholder: d, validate: f, max: p, disabled: m = !1, className: h, ...g }) {
-	r();
-	let _ = n(""), v = c(null);
-	function y(e) {
+function u({ value: u, onValueChange: d, placeholder: f, validate: p, max: m, disabled: h = !1, className: g, ..._ }) {
+	i();
+	let v = r(""), y = a(null);
+	function b(e) {
 		let t = e.trim();
-		t && (p !== void 0 && l.length >= p || l.includes(t) || f && !f(t) || (u([...l, t]), _.value = ""));
+		t && (m !== void 0 && u.length >= m || u.includes(t) || p && !p(t) || (d([...u, t]), v.value = ""));
 	}
-	function b(e) {
-		u(l.filter((t, n) => n !== e));
+	function x(e) {
+		d(u.filter((t, n) => n !== e));
 	}
-	let x = d ?? a(i.tagsInput.placeholder);
-	return /* @__PURE__ */ s("div", {
-		className: t(e.wrapper, h),
-		"data-disabled": m ? "" : void 0,
-		onClick: () => v.current?.focus(),
-		...g,
-		children: [l.map((t, n) => {
-			let r = f ? !f(t) : !1;
-			return /* @__PURE__ */ s("span", {
+	let S = f ?? s(o.tagsInput.placeholder);
+	return /* @__PURE__ */ l("div", {
+		className: t(e.wrapper, g),
+		"data-disabled": h ? "" : void 0,
+		onClick: () => n(y.current),
+		..._,
+		children: [u.map((t, n) => {
+			let r = p ? !p(t) : !1;
+			return /* @__PURE__ */ l("span", {
 				className: e.tag,
 				"data-state": r ? "invalid" : void 0,
-				children: [t, /* @__PURE__ */ o("button", {
+				children: [t, /* @__PURE__ */ c("button", {
 					type: "button",
 					className: e.dismiss,
-					"aria-label": a(i.tagsInput.remove, { tag: t }),
-					disabled: m,
+					"aria-label": s(o.tagsInput.remove, { tag: t }),
+					disabled: h,
 					onClick: (e) => {
-						e.stopPropagation(), b(n);
+						e.stopPropagation(), x(n);
 					},
-					children: /* @__PURE__ */ o("span", {
+					children: /* @__PURE__ */ c("span", {
 						"aria-hidden": "true",
 						children: "×"
 					})
 				})]
 			}, n);
-		}), /* @__PURE__ */ o("input", {
-			ref: v,
+		}), /* @__PURE__ */ c("input", {
+			ref: y,
 			className: e.input,
-			value: _.value,
-			"aria-label": a(i.tagsInput.label),
-			placeholder: l.length === 0 ? x : void 0,
-			disabled: m,
+			value: v.value,
+			"aria-label": s(o.tagsInput.label),
+			placeholder: u.length === 0 ? S : void 0,
+			disabled: h,
 			onChange: (e) => {
-				_.value = e.currentTarget.value;
+				v.value = e.currentTarget.value;
 			},
 			onKeyDown: (e) => {
-				e.key === "Enter" || e.key === "," ? (e.preventDefault(), y(_.value)) : e.key === "Backspace" && !_.value && b(l.length - 1);
+				e.key === "Enter" || e.key === "," ? (e.preventDefault(), b(v.value)) : e.key === "Backspace" && !v.value && x(u.length - 1);
 			},
 			onBlur: () => {
-				_.value && y(_.value);
+				v.value && b(v.value);
 			}
 		})]
 	});
 }
 //#endregion
-export { l as TagsInput };
+export { u as TagsInput };

package/dist/tags-input/tags-input.module.js

@@ -2,10 +2,10 @@
 
 import './tags-input.css';
 var e = {
-	wrapper: "_wrapper_i1hay_2",
-	tag: "_tag_i1hay_28",
-	dismiss: "_dismiss_i1hay_55",
-	input: "_input_i1hay_85"
+	wrapper: "_wrapper_1ycwz_2",
+	tag: "_tag_1ycwz_32",
+	dismiss: "_dismiss_1ycwz_59",
+	input: "_input_1ycwz_89"
 };
 //#endregion
 export { e as default };

package/dist/textarea/textarea.js

@@ -2,55 +2,56 @@
 
 import e from "./textarea.module.js";
 import { cn as t, createMachine as n, useMachine as r } from "@cascivo/core";
-import { jsx as i, jsxs as a } from "react/jsx-runtime";
+import { forwardRef as i } from "react";
+import { jsx as a, jsxs as o } from "react/jsx-runtime";
 //#region ../components/src/textarea/textarea.tsx
-var o = n({
+var s = n({
 	initial: "idle",
 	states: {
 		idle: { on: { FOCUS: "focused" } },
 		focused: { on: { BLUR: "idle" } }
 	}
-});
-function s({ label: n, hint: s, error: c, resize: l = "vertical", rows: u = 4, className: d, id: f, onFocus: p, onBlur: m, ...h }) {
-	let [g, _] = r(o), v = f ?? (n ? `cascade-textarea-${n.toLowerCase().replace(/\s+/g, "-")}` : void 0);
-	return /* @__PURE__ */ a("div", {
+}), c = i(function({ label: n, hint: i, error: c, resize: l = "vertical", rows: u = 4, className: d, id: f, onFocus: p, onBlur: m, ...h }, g) {
+	let [_, v] = r(s), y = f ?? (n ? `cascade-textarea-${n.toLowerCase().replace(/\s+/g, "-")}` : void 0);
+	return /* @__PURE__ */ o("div", {
 		className: t(e.wrapper, d),
-		"data-state": c ? "error" : g.value,
+		"data-state": c ? "error" : _.value,
 		"data-resize": l,
 		children: [
-			n && /* @__PURE__ */ i("label", {
+			n && /* @__PURE__ */ a("label", {
 				className: e.label,
-				htmlFor: v,
+				htmlFor: y,
 				children: n
 			}),
-			/* @__PURE__ */ i("textarea", {
-				id: v,
+			/* @__PURE__ */ a("textarea", {
+				ref: g,
+				id: y,
 				rows: u,
 				"aria-multiline": "true",
 				className: e.textarea,
 				"aria-invalid": c ? !0 : void 0,
-				"aria-describedby": c ? `${v}-error` : s ? `${v}-hint` : void 0,
+				"aria-describedby": c ? `${y}-error` : i ? `${y}-hint` : void 0,
 				onFocus: (e) => {
-					_("FOCUS"), p?.(e);
+					v("FOCUS"), p?.(e);
 				},
 				onBlur: (e) => {
-					_("BLUR"), m?.(e);
+					v("BLUR"), m?.(e);
 				},
 				...h
 			}),
-			c && /* @__PURE__ */ i("span", {
-				id: `${v}-error`,
+			c && /* @__PURE__ */ a("span", {
+				id: `${y}-error`,
 				className: e.error,
 				role: "alert",
 				children: c
 			}),
-			!c && s && /* @__PURE__ */ i("span", {
-				id: `${v}-hint`,
+			!c && i && /* @__PURE__ */ a("span", {
+				id: `${y}-hint`,
 				className: e.hint,
-				children: s
+				children: i
 			})
 		]
 	});
-}
+});
 //#endregion
-export { s as Textarea };
+export { c as Textarea };

package/dist/tile/tile.css

@@ -1 +1 @@
-@layer cascivo.component{._tile_1wkku_2{gap:var(--cascivo-space-3);padding:var(--cascivo-space-4);border:1px solid var(--cascivo-color-border);border-radius:var(--cascivo-radius-surface);background:var(--cascivo-color-bg);color:var(--cascivo-color-text);cursor:pointer;transition:border-color var(--cascivo-duration-150) var(--cascivo-ease-out), background-color var(--cascivo-duration-150) var(--cascivo-ease-out);align-items:flex-start;display:flex}._tile_1wkku_2:hover:not([data-disabled]){border-color:var(--cascivo-color-border-strong)}._tile_1wkku_2:focus-visible{box-shadow:var(--cascivo-focus-ring);outline:none}._tile_1wkku_2[data-selected]{border-color:var(--cascivo-color-accent);background:color-mix(in oklch, var(--cascivo-color-accent) 4%, var(--cascivo-color-bg))}._tile_1wkku_2[data-disabled]{opacity:.5;cursor:not-allowed}._icon_1wkku_36{block-size:1.5rem;inline-size:1.5rem;color:var(--cascivo-color-text-muted);flex:none;place-items:center;display:grid}._tile_1wkku_2[data-selected] ._icon_1wkku_36{color:var(--cascivo-color-accent)}._body_1wkku_49{gap:var(--cascivo-space-1);font-size:var(--cascivo-text-sm);flex-direction:column;display:flex}}
+@layer cascivo.component{._tile_cxt7m_2{gap:var(--cascivo-space-3);padding:var(--cascivo-space-4);border:1px solid var(--cascivo-color-border);border-radius:var(--cascivo-radius-surface);background:var(--cascivo-color-bg);color:var(--cascivo-color-text);cursor:pointer;transition:border-color var(--cascivo-duration-150) var(--cascivo-ease-out), background-color var(--cascivo-duration-150) var(--cascivo-ease-out);align-items:flex-start;text-decoration:none;display:flex}._tile_cxt7m_2:hover:not([data-disabled]){border-color:var(--cascivo-color-border-strong)}._tile_cxt7m_2:focus-visible{box-shadow:var(--cascivo-focus-ring);outline:none}._tile_cxt7m_2[data-selected]{border-color:var(--cascivo-color-accent);background:color-mix(in oklch, var(--cascivo-color-accent) 4%, var(--cascivo-color-bg))}._tile_cxt7m_2[data-disabled]{opacity:.5;cursor:not-allowed}._icon_cxt7m_38{block-size:1.5rem;inline-size:1.5rem;color:var(--cascivo-color-text-muted);flex:none;place-items:center;display:grid}._tile_cxt7m_2[data-selected] ._icon_cxt7m_38{color:var(--cascivo-color-accent)}._body_cxt7m_51{gap:var(--cascivo-space-1);font-size:var(--cascivo-text-sm);flex-direction:column;display:flex}}

package/dist/tile/tile.module.js

@@ -2,9 +2,9 @@
 
 import './tile.css';
 var e = {
-	tile: "_tile_1wkku_2",
-	icon: "_icon_1wkku_36",
-	body: "_body_1wkku_49"
+	tile: "_tile_cxt7m_2",
+	icon: "_icon_cxt7m_38",
+	body: "_body_cxt7m_51"
 };
 //#endregion
 export { e as default };

package/dist/time-picker/time-picker.css

@@ -1 +1 @@
-@layer cascivo.component{._wrapper_shh6w_2{gap:var(--cascivo-space-1);font-family:var(--cascivo-font-sans);flex-direction:column;display:flex}._wrapper_shh6w_2[data-size=sm]{--_height:2rem;--_font:var(--cascivo-text-sm);--_px:var(--cascivo-space-3)}._wrapper_shh6w_2[data-size=md]{--_height:2.5rem;--_font:var(--cascivo-text-sm);--_px:var(--cascivo-space-4)}._wrapper_shh6w_2[data-size=lg]{--_height:3rem;--_font:var(--cascivo-text-base);--_px:var(--cascivo-space-4)}._label_shh6w_25{font-size:var(--cascivo-text-sm);font-weight:var(--cascivo-font-medium);color:var(--cascivo-color-text);line-height:var(--cascivo-leading-snug)}._input_shh6w_32{block-size:var(--_height,2.5rem);padding-inline:var(--_px,var(--cascivo-space-4));font-family:var(--cascivo-font-sans);font-size:var(--_font,var(--cascivo-text-sm));color:var(--cascivo-color-text);background-color:var(--cascivo-color-surface);border:1px solid var(--cascivo-color-border);border-radius:var(--cascivo-radius-field);transition:border-color var(--cascivo-duration-150) var(--cascivo-ease-out), box-shadow var(--cascivo-duration-150) var(--cascivo-ease-out);outline:none}._input_shh6w_32:hover:not(:disabled):not(:focus-visible){border-color:var(--cascivo-color-border-strong)}._input_shh6w_32:focus-visible{border-color:var(--cascivo-color-accent);box-shadow:0 0 0 3px color-mix(in srgb, var(--cascivo-color-accent) 20%, transparent)}._input_shh6w_32:disabled{opacity:.5;cursor:not-allowed;background-color:var(--cascivo-color-bg-subtle)}._wrapper_shh6w_2[data-state=error] ._input_shh6w_32{border-color:var(--cascivo-color-danger)}._error_shh6w_66{font-size:var(--cascivo-text-xs);color:var(--cascivo-color-danger)}._hint_shh6w_71{font-size:var(--cascivo-text-xs);color:var(--cascivo-color-text-muted)}}
+@layer cascivo.component{._wrapper_auxoq_2{gap:var(--cascivo-space-1);min-inline-size:0;font-family:var(--cascivo-font-sans);flex-direction:column;display:flex}._wrapper_auxoq_2[data-size=sm]{--_height:2rem;--_font:var(--cascivo-text-sm);--_px:var(--cascivo-space-3)}._wrapper_auxoq_2[data-size=md]{--_height:2.5rem;--_font:var(--cascivo-text-sm);--_px:var(--cascivo-space-4)}._wrapper_auxoq_2[data-size=lg]{--_height:3rem;--_font:var(--cascivo-text-base);--_px:var(--cascivo-space-4)}._label_auxoq_29{font-size:var(--cascivo-text-sm);font-weight:var(--cascivo-font-medium);color:var(--cascivo-color-text);line-height:var(--cascivo-leading-snug)}._input_auxoq_36{block-size:var(--_height,2.5rem);padding-inline:var(--_px,var(--cascivo-space-4));font-family:var(--cascivo-font-sans);font-size:var(--_font,var(--cascivo-text-sm));color:var(--cascivo-color-text);background-color:var(--cascivo-color-surface);border:1px solid var(--cascivo-color-border);border-radius:var(--cascivo-radius-field);transition:border-color var(--cascivo-duration-150) var(--cascivo-ease-out), box-shadow var(--cascivo-duration-150) var(--cascivo-ease-out);outline:none}._input_auxoq_36:hover:not(:disabled):not(:focus-visible){border-color:var(--cascivo-color-border-strong)}._input_auxoq_36:focus-visible{border-color:var(--cascivo-color-accent);box-shadow:0 0 0 3px color-mix(in srgb, var(--cascivo-color-accent) 20%, transparent)}._input_auxoq_36:disabled{opacity:.5;cursor:not-allowed;background-color:var(--cascivo-color-bg-subtle)}._wrapper_auxoq_2[data-state=error] ._input_auxoq_36{border-color:var(--cascivo-color-danger)}._error_auxoq_70{font-size:var(--cascivo-text-xs);color:var(--cascivo-color-danger)}._hint_auxoq_75{font-size:var(--cascivo-text-xs);color:var(--cascivo-color-text-muted)}}

package/dist/time-picker/time-picker.js

@@ -2,61 +2,62 @@
 
 import e from "./time-picker.module.js";
 import { cn as t, createMachine as n, useMachine as r, useSignals as i } from "@cascivo/core";
-import { jsx as a, jsxs as o } from "react/jsx-runtime";
+import { forwardRef as a } from "react";
+import { jsx as o, jsxs as s } from "react/jsx-runtime";
 //#region ../components/src/time-picker/time-picker.tsx
-var s = n({
+var c = n({
 	initial: "idle",
 	states: {
 		idle: { on: { FOCUS: "focused" } },
 		focused: { on: { BLUR: "idle" } }
 	}
-});
-function c({ value: n, defaultValue: c, onValueChange: l, onChange: u, min: d, max: f, step: p, label: m, hint: h, error: g, size: _ = "md", className: v, id: y, onFocus: b, onBlur: x, ...S }) {
+}), l = a(function({ value: n, defaultValue: a, onValueChange: l, onChange: u, min: d, max: f, step: p, label: m, hint: h, error: g, size: _ = "md", className: v, id: y, onFocus: b, onBlur: x, ...S }, C) {
 	i();
-	let [C, w] = r(s), T = y ?? (m ? `cascade-time-picker-${m.toLowerCase().replace(/\s+/g, "-")}` : void 0);
-	return /* @__PURE__ */ o("div", {
+	let [w, T] = r(c), E = y ?? (m ? `cascade-time-picker-${m.toLowerCase().replace(/\s+/g, "-")}` : void 0);
+	return /* @__PURE__ */ s("div", {
 		className: t(e.wrapper, v),
-		"data-state": g ? "error" : C.value,
+		"data-state": g ? "error" : w.value,
 		"data-size": _,
 		children: [
-			m && /* @__PURE__ */ a("label", {
+			m && /* @__PURE__ */ o("label", {
 				className: e.label,
-				htmlFor: T,
+				htmlFor: E,
 				children: m
 			}),
-			/* @__PURE__ */ a("input", {
-				id: T,
+			/* @__PURE__ */ o("input", {
+				id: E,
 				type: "time",
 				className: e.input,
 				value: n,
-				defaultValue: c,
+				defaultValue: a,
 				min: d,
 				max: f,
 				step: p,
 				"aria-invalid": g ? !0 : void 0,
-				"aria-describedby": g ? `${T}-error` : h ? `${T}-hint` : void 0,
+				"aria-describedby": g ? `${E}-error` : h ? `${E}-hint` : void 0,
 				onChange: (e) => (l ?? u)?.(e.target.value),
 				onFocus: (e) => {
-					w("FOCUS"), b?.(e);
+					T("FOCUS"), b?.(e);
 				},
 				onBlur: (e) => {
-					w("BLUR"), x?.(e);
+					T("BLUR"), x?.(e);
 				},
+				ref: C,
 				...S
 			}),
-			g && /* @__PURE__ */ a("span", {
-				id: `${T}-error`,
+			g && /* @__PURE__ */ o("span", {
+				id: `${E}-error`,
 				className: e.error,
 				role: "alert",
 				children: g
 			}),
-			!g && h && /* @__PURE__ */ a("span", {
-				id: `${T}-hint`,
+			!g && h && /* @__PURE__ */ o("span", {
+				id: `${E}-hint`,
 				className: e.hint,
 				children: h
 			})
 		]
 	});
-}
+});
 //#endregion
-export { c as TimePicker };
+export { l as TimePicker };

package/dist/time-picker/time-picker.module.js

@@ -2,11 +2,11 @@
 
 import './time-picker.css';
 var e = {
-	wrapper: "_wrapper_shh6w_2",
-	label: "_label_shh6w_25",
-	input: "_input_shh6w_32",
-	error: "_error_shh6w_66",
-	hint: "_hint_shh6w_71"
+	wrapper: "_wrapper_auxoq_2",
+	label: "_label_auxoq_29",
+	input: "_input_auxoq_36",
+	error: "_error_auxoq_70",
+	hint: "_hint_auxoq_75"
 };
 //#endregion
 export { e as default };

package/dist/timeline/timeline.js

@@ -1,34 +1,40 @@
 "use client";
 
 import e from "./timeline.module.js";
-import { cn as t } from "@cascivo/core";
-import { jsx as n, jsxs as r } from "react/jsx-runtime";
+import { cn as t, normalizeProgress as n } from "@cascivo/core";
+import { jsx as r, jsxs as i } from "react/jsx-runtime";
 //#region ../components/src/timeline/timeline.tsx
-function i({ items: i, orientation: a = "vertical", className: o, ...s }) {
-	return /* @__PURE__ */ n("ol", {
-		"data-orientation": a,
-		className: t(e.list, o),
-		...s,
-		children: i.map((t) => /* @__PURE__ */ r("li", {
-			"data-status": t.status ?? "upcoming",
-			"aria-current": t.status === "current" ? "step" : void 0,
+var a = {
+	pending: "upcoming",
+	active: "current",
+	complete: "complete",
+	error: "current"
+};
+function o({ items: o, orientation: s = "vertical", className: c, ...l }) {
+	return /* @__PURE__ */ r("ol", {
+		"data-orientation": s,
+		className: t(e.list, c),
+		...l,
+		children: o.map((t) => /* @__PURE__ */ i("li", {
+			"data-status": a[n(t.status ?? "pending")] ?? "upcoming",
+			"aria-current": n(t.status ?? "pending") === "active" ? "step" : void 0,
 			className: e.item,
-			children: [/* @__PURE__ */ n("span", {
+			children: [/* @__PURE__ */ r("span", {
 				className: e.marker,
 				"aria-hidden": "true",
 				children: t.icon
-			}), /* @__PURE__ */ r("div", {
+			}), /* @__PURE__ */ i("div", {
 				className: e.content,
 				children: [
-					/* @__PURE__ */ n("div", {
+					/* @__PURE__ */ r("div", {
 						className: e.title,
 						children: t.title
 					}),
-					t.time ? /* @__PURE__ */ n("time", {
+					t.time ? /* @__PURE__ */ r("time", {
 						className: e.time,
 						children: t.time
 					}) : null,
-					t.description ? /* @__PURE__ */ n("div", {
+					t.description ? /* @__PURE__ */ r("div", {
 						className: e.description,
 						children: t.description
 					}) : null
@@ -38,4 +44,4 @@ function i({ items: i, orientation: a = "vertical", className: o, ...s }) {
 	});
 }
 //#endregion
-export { i as Timeline };
+export { o as Timeline };