@cascivo/react 0.13.1 → 0.16.0

package/dist/tabs/tabs.js

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

package/dist/tabs/tabs.module.js

@@ -1,5 +1,3 @@
-"use client";
-
 import './tabs.css';
 var e = {
 	tabs: "_tabs_1i48y_2",

package/dist/tag/tag.module.js

@@ -1,5 +1,3 @@
-"use client";
-
 import './tag.css';
 var e = {
 	tag: "_tag_onneh_2",

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

@@ -1 +1 @@
-@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}}
+@layer cascivo.component{._wrapper_1w754_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_1w754_2:focus-within{border-color:var(--cascivo-color-accent);box-shadow:var(--cascivo-focus-ring)}._wrapper_1w754_2[data-disabled]{cursor:not-allowed;background-color:var(--cascivo-color-bg-subtle)}._wrapper_1w754_2[data-disabled] ._tag_1w754_32{color:var(--cascivo-color-text-muted);border-color:var(--cascivo-color-border)}._tag_1w754_32{align-items:center;gap:var(--cascivo-space-1);padding-block:var(--cascivo-space-1);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_1w754_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_1w754_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_1w754_59:hover{color:var(--cascivo-color-text);background-color:var(--cascivo-color-border)}._dismiss_1w754_59:focus-visible{outline:2px solid var(--cascivo-color-accent);outline-offset:1px}._dismiss_1w754_59:disabled{cursor:not-allowed}._input_1w754_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_1w754_89::placeholder{color:var(--cascivo-color-text-muted)}._input_1w754_89:disabled{cursor:not-allowed}}

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

@@ -1,14 +1,14 @@
 "use client";
 
 import e from "./tags-input.module.js";
-import { cn as t, focusElement as n, useSignal as r, useSignals as i } from "@cascivo/core";
-import { useRef as a } from "react";
+import { useRef as t } from "react";
+import { cn as n, focusElement 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";
 //#region ../components/src/tags-input/tags-input.tsx
 function u({ value: u, onValueChange: d, placeholder: f, validate: p, max: m, disabled: h = !1, className: g, ..._ }) {
-	i();
-	let v = r(""), y = a(null);
+	a();
+	let v = i(""), y = t(null);
 	function b(e) {
 		let t = e.trim();
 		t && (m !== void 0 && u.length >= m || u.includes(t) || p && !p(t) || (d([...u, t]), v.value = ""));
@@ -18,9 +18,9 @@ function u({ value: u, onValueChange: d, placeholder: f, validate: p, max: m, di
 	}
 	let S = f ?? s(o.tagsInput.placeholder);
 	return /* @__PURE__ */ l("div", {
-		className: t(e.wrapper, g),
+		className: n(e.wrapper, g),
 		"data-disabled": h ? "" : void 0,
-		onClick: () => n(y.current),
+		onClick: () => r(y.current),
 		..._,
 		children: [u.map((t, n) => {
 			let r = p ? !p(t) : !1;

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

@@ -1,11 +1,9 @@
-"use client";
-
 import './tags-input.css';
 var e = {
-	wrapper: "_wrapper_1ycwz_2",
-	tag: "_tag_1ycwz_32",
-	dismiss: "_dismiss_1ycwz_59",
-	input: "_input_1ycwz_89"
+	wrapper: "_wrapper_1w754_2",
+	tag: "_tag_1w754_32",
+	dismiss: "_dismiss_1w754_59",
+	input: "_input_1w754_89"
 };
 //#endregion
 export { e as default };

package/dist/text/text.js

@@ -1,7 +1,5 @@
-"use client";
-
 import e from "./text.module.js";
-import { cn as t } from "@cascivo/core";
+import { cn as t } from "@cascivo/core/pure";
 import { jsx as n } from "react/jsx-runtime";
 //#region ../components/src/text/text.tsx
 function r({ as: r = "p", size: i = "md", weight: a = "normal", muted: o = !1, className: s, children: c, ...l }) {

package/dist/text/text.module.js

@@ -1,5 +1,3 @@
-"use client";
-
 import './text.css';
 var e = { text: "_text_18h86_2" };
 //#endregion

package/dist/textarea/textarea.js

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

package/dist/textarea/textarea.module.js

@@ -1,5 +1,3 @@
-"use client";
-
 import './textarea.css';
 var e = {
 	wrapper: "_wrapper_xbrwe_2",

package/dist/tile/tile.module.js

@@ -1,5 +1,3 @@
-"use client";
-
 import './tile.css';
 var e = {
 	tile: "_tile_cxt7m_2",

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

@@ -1 +1 @@
-@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)}}
+@layer cascivo.component{._wrapper_gwf19_2{gap:var(--cascivo-space-1);min-inline-size:0;font-family:var(--cascivo-font-sans);flex-direction:column;display:flex}._wrapper_gwf19_2[data-size=sm]{--_height:2rem;--_font:var(--cascivo-text-sm);--_px:var(--cascivo-space-3)}._wrapper_gwf19_2[data-size=md]{--_height:2.5rem;--_font:var(--cascivo-text-sm);--_px:var(--cascivo-space-4)}._wrapper_gwf19_2[data-size=lg]{--_height:3rem;--_font:var(--cascivo-text-base);--_px:var(--cascivo-space-4)}._label_gwf19_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_gwf19_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_gwf19_36:hover:not(:disabled):not(:focus-visible){border-color:var(--cascivo-color-border-strong)}._input_gwf19_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_gwf19_36:disabled{opacity:.5;cursor:not-allowed;background-color:var(--cascivo-color-bg-subtle)}._wrapper_gwf19_2[data-state=error] ._input_gwf19_36{border-color:var(--cascivo-color-destructive)}._error_gwf19_70{font-size:var(--cascivo-text-xs);color:var(--cascivo-color-destructive)}._hint_gwf19_75{font-size:var(--cascivo-text-xs);color:var(--cascivo-color-text-muted)}}

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

@@ -1,21 +1,21 @@
 "use client";
 
 import e from "./time-picker.module.js";
-import { cn as t, createMachine as n, useMachine as r, useSignals as i } from "@cascivo/core";
-import { forwardRef as a } from "react";
+import { forwardRef as t } from "react";
+import { cn as n, createMachine as r, useMachine as i, useSignals as a } from "@cascivo/core";
 import { jsx as o, jsxs as s } from "react/jsx-runtime";
 //#region ../components/src/time-picker/time-picker.tsx
-var c = n({
+var c = r({
 	initial: "idle",
 	states: {
 		idle: { on: { FOCUS: "focused" } },
 		focused: { on: { BLUR: "idle" } }
 	}
-}), 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 [w, T] = r(c), E = y ?? (m ? `cascade-time-picker-${m.toLowerCase().replace(/\s+/g, "-")}` : void 0);
+}), l = t(function({ value: t, defaultValue: r, 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) {
+	a();
+	let [w, T] = i(c), E = y ?? (m ? `cascade-time-picker-${m.toLowerCase().replace(/\s+/g, "-")}` : void 0);
 	return /* @__PURE__ */ s("div", {
-		className: t(e.wrapper, v),
+		className: n(e.wrapper, v),
 		"data-state": g ? "error" : w.value,
 		"data-size": _,
 		children: [
@@ -28,8 +28,8 @@ var c = n({
 				id: E,
 				type: "time",
 				className: e.input,
-				value: n,
-				defaultValue: a,
+				value: t,
+				defaultValue: r,
 				min: d,
 				max: f,
 				step: p,

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

@@ -1,12 +1,10 @@
-"use client";
-
 import './time-picker.css';
 var e = {
-	wrapper: "_wrapper_auxoq_2",
-	label: "_label_auxoq_29",
-	input: "_input_auxoq_36",
-	error: "_error_auxoq_70",
-	hint: "_hint_auxoq_75"
+	wrapper: "_wrapper_gwf19_2",
+	label: "_label_gwf19_29",
+	input: "_input_gwf19_36",
+	error: "_error_gwf19_70",
+	hint: "_hint_gwf19_75"
 };
 //#endregion
 export { e as default };

package/dist/timeline/timeline.css

@@ -1 +1 @@
-@layer cascivo.component{._list_1f4du_2{--_marker-size:.875rem;--_track:var(--cascivo-color-border);font-family:var(--cascivo-font-sans);color:var(--cascivo-color-text);margin:0;padding:0;list-style:none;display:flex}._list_1f4du_2[data-orientation=vertical]{flex-direction:column}._list_1f4du_2[data-orientation=horizontal]{flex-direction:row}._item_1f4du_21{gap:var(--cascivo-space-3);display:flex;position:relative}._list_1f4du_2[data-orientation=vertical] ._item_1f4du_21{flex-direction:row;padding-block-end:var(--cascivo-space-5)}._list_1f4du_2[data-orientation=horizontal] ._item_1f4du_21{flex-direction:column;flex:1;padding-inline-end:var(--cascivo-space-5)}._list_1f4du_2[data-orientation=vertical] ._item_1f4du_21:before{content:"";inline-size:1px;block-size:calc(100% - var(--_marker-size));background-color:var(--_track);position:absolute;inset-block-start:var(--_marker-size);inset-inline-start:calc(var(--_marker-size) / 2)}._list_1f4du_2[data-orientation=horizontal] ._item_1f4du_21:before{content:"";block-size:1px;inline-size:calc(100% - var(--_marker-size));background-color:var(--_track);position:absolute;inset-block-start:calc(var(--_marker-size) / 2);inset-inline-start:var(--_marker-size)}._item_1f4du_21:last-child:before{display:none}._marker_1f4du_63{inline-size:var(--_marker-size);block-size:var(--_marker-size);border-radius:var(--cascivo-radius-full);font-size:var(--cascivo-text-xs);border:2px solid var(--cascivo-color-border);background-color:var(--cascivo-color-surface);box-sizing:border-box;flex:none;justify-content:center;align-items:center;line-height:1;display:inline-flex}._item_1f4du_21[data-status=complete] ._marker_1f4du_63{border-color:var(--cascivo-color-success);background-color:var(--cascivo-color-success);color:var(--cascivo-color-success-foreground)}._item_1f4du_21[data-status=current] ._marker_1f4du_63{border-color:var(--cascivo-color-primary);background-color:var(--cascivo-color-primary);color:var(--cascivo-color-primary-fg)}._item_1f4du_21[data-status=upcoming] ._marker_1f4du_63{border-color:var(--cascivo-color-border-strong);background-color:var(--cascivo-color-surface);color:var(--cascivo-color-text-subtle)}._content_1f4du_96{gap:var(--cascivo-space-1);flex-direction:column;padding-block-start:calc((var(--_marker-size) - 1rem) / 2);display:flex}._title_1f4du_103{font-size:var(--cascivo-text-sm);font-weight:var(--cascivo-font-semibold);line-height:var(--cascivo-leading-tight);color:var(--cascivo-color-text)}._time_1f4du_110{font-size:var(--cascivo-text-xs);color:var(--cascivo-color-text-subtle)}._description_1f4du_115{font-size:var(--cascivo-text-sm);color:var(--cascivo-color-text-subtle);line-height:var(--cascivo-leading-normal)}}@media (forced-colors:active){._marker_1f4du_63{border:2px solid canvastext}._item_1f4du_21[data-status=current] ._marker_1f4du_63{background-color:highlight;border-color:highlight}}
+@layer cascivo.component{._list_4utvf_2{--_marker-size:.875rem;--_track:var(--cascivo-color-border);font-family:var(--cascivo-font-sans);color:var(--cascivo-color-text);margin:0;padding:0;list-style:none;display:flex}._list_4utvf_2[data-orientation=vertical]{flex-direction:column}._list_4utvf_2[data-orientation=horizontal]{flex-direction:row}._item_4utvf_21{gap:var(--cascivo-space-3);display:flex;position:relative}._list_4utvf_2[data-orientation=vertical] ._item_4utvf_21{flex-direction:row;padding-block-end:var(--cascivo-space-5)}._list_4utvf_2[data-orientation=horizontal] ._item_4utvf_21{flex-direction:column;flex:1;padding-inline-end:var(--cascivo-space-5)}._list_4utvf_2[data-orientation=vertical] ._item_4utvf_21:before{content:"";inline-size:1px;block-size:calc(100% - var(--_marker-size));background-color:var(--_track);position:absolute;inset-block-start:var(--_marker-size);inset-inline-start:calc(var(--_marker-size) / 2)}._list_4utvf_2[data-orientation=horizontal] ._item_4utvf_21:before{content:"";block-size:1px;inline-size:calc(100% - var(--_marker-size));background-color:var(--_track);position:absolute;inset-block-start:calc(var(--_marker-size) / 2);inset-inline-start:var(--_marker-size)}._item_4utvf_21:last-child:before{display:none}._marker_4utvf_63{inline-size:var(--_marker-size);block-size:var(--_marker-size);border-radius:var(--cascivo-radius-full);font-size:var(--cascivo-text-xs);border:2px solid var(--cascivo-color-border);background-color:var(--cascivo-color-surface);box-sizing:border-box;flex:none;justify-content:center;align-items:center;line-height:1;display:inline-flex}._item_4utvf_21[data-status=complete] ._marker_4utvf_63{border-color:var(--cascivo-color-success);background-color:var(--cascivo-color-success);color:var(--cascivo-color-success-foreground)}._item_4utvf_21[data-status=current] ._marker_4utvf_63{border-color:var(--cascivo-color-primary);background-color:var(--cascivo-color-primary);color:var(--cascivo-color-primary-fg)}._item_4utvf_21[data-status=upcoming] ._marker_4utvf_63{border-color:var(--cascivo-color-border-strong);background-color:var(--cascivo-color-surface);color:var(--cascivo-color-text-subtle)}._item_4utvf_21[data-status=error] ._marker_4utvf_63{border-color:var(--cascivo-color-destructive);background-color:var(--cascivo-color-destructive);color:var(--cascivo-color-text-on-destructive)}._item_4utvf_21[data-tone=neutral] ._marker_4utvf_63{border-color:var(--cascivo-color-border-strong);background-color:var(--cascivo-color-border-strong);color:var(--cascivo-color-text-on-accent)}._item_4utvf_21[data-tone=info] ._marker_4utvf_63{border-color:var(--cascivo-color-info);background-color:var(--cascivo-color-info);color:var(--cascivo-color-info-foreground)}._item_4utvf_21[data-tone=success] ._marker_4utvf_63{border-color:var(--cascivo-color-success);background-color:var(--cascivo-color-success);color:var(--cascivo-color-success-foreground)}._item_4utvf_21[data-tone=warning] ._marker_4utvf_63{border-color:var(--cascivo-color-warning);background-color:var(--cascivo-color-warning);color:var(--cascivo-color-warning-foreground)}._item_4utvf_21[data-tone=danger] ._marker_4utvf_63{border-color:var(--cascivo-color-destructive);background-color:var(--cascivo-color-destructive);color:var(--cascivo-color-destructive-foreground)}._content_4utvf_137{gap:var(--cascivo-space-1);flex-direction:column;padding-block-start:calc((var(--_marker-size) - 1rem) / 2);display:flex}._title_4utvf_144{font-size:var(--cascivo-text-sm);font-weight:var(--cascivo-font-semibold);line-height:var(--cascivo-leading-tight);color:var(--cascivo-color-text)}._time_4utvf_151{font-size:var(--cascivo-text-xs);color:var(--cascivo-color-text-subtle)}._description_4utvf_156{font-size:var(--cascivo-text-sm);color:var(--cascivo-color-text-subtle);line-height:var(--cascivo-leading-normal)}}@media (forced-colors:active){._marker_4utvf_63{border:2px solid canvastext}._item_4utvf_21[data-status=current] ._marker_4utvf_63{background-color:highlight;border-color:highlight}._item_4utvf_21[data-status=error] ._marker_4utvf_63{color:canvastext;background-color:canvas;border-color:canvastext}}

package/dist/timeline/timeline.js

@@ -1,47 +1,55 @@
-"use client";
-
 import e from "./timeline.module.js";
-import { cn as t, normalizeProgress as n } from "@cascivo/core";
-import { jsx as r, jsxs as i } from "react/jsx-runtime";
+import { cn as t, normalizeProgress as n, normalizeTone as r } from "@cascivo/core/pure";
+import { jsx as i, jsxs as a } from "react/jsx-runtime";
 //#region ../components/src/timeline/timeline.tsx
-var a = {
+var o = {
 	pending: "upcoming",
 	active: "current",
 	complete: "complete",
-	error: "current"
+	error: "error"
+}, s = {
+	neutral: "neutral",
+	info: "info",
+	success: "success",
+	warning: "warning",
+	danger: "danger"
 };
-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__ */ r("span", {
-				className: e.marker,
-				"aria-hidden": "true",
-				children: t.icon
-			}), /* @__PURE__ */ i("div", {
-				className: e.content,
-				children: [
-					/* @__PURE__ */ r("div", {
-						className: e.title,
-						children: t.title
-					}),
-					t.time ? /* @__PURE__ */ r("time", {
-						className: e.time,
-						children: t.time
-					}) : null,
-					t.description ? /* @__PURE__ */ r("div", {
-						className: e.description,
-						children: t.description
-					}) : null
-				]
-			})]
-		}, t.id))
+function c({ items: c, orientation: l = "vertical", className: u, ...d }) {
+	return /* @__PURE__ */ i("ol", {
+		"data-orientation": l,
+		className: t(e.list, u),
+		...d,
+		children: c.map((t) => {
+			let c = n(t.status ?? "pending");
+			return /* @__PURE__ */ a("li", {
+				"data-status": o[c] ?? "upcoming",
+				"data-tone": t.tone ? s[r(t.tone)] ?? t.tone : void 0,
+				"aria-current": c === "active" ? "step" : void 0,
+				className: e.item,
+				children: [/* @__PURE__ */ i("span", {
+					className: e.marker,
+					"aria-hidden": "true",
+					children: t.icon ?? (c === "error" ? "✕" : null)
+				}), /* @__PURE__ */ a("div", {
+					className: e.content,
+					children: [
+						/* @__PURE__ */ i("div", {
+							className: e.title,
+							children: t.title
+						}),
+						t.time ? /* @__PURE__ */ i("time", {
+							className: e.time,
+							children: t.time
+						}) : null,
+						t.description ? /* @__PURE__ */ i("div", {
+							className: e.description,
+							children: t.description
+						}) : null
+					]
+				})]
+			}, t.id);
+		})
 	});
 }
 //#endregion
-export { o as Timeline };
+export { c as Timeline };

package/dist/timeline/timeline.module.js

@@ -1,14 +1,12 @@
-"use client";
-
 import './timeline.css';
 var e = {
-	list: "_list_1f4du_2",
-	item: "_item_1f4du_21",
-	marker: "_marker_1f4du_63",
-	content: "_content_1f4du_96",
-	title: "_title_1f4du_103",
-	time: "_time_1f4du_110",
-	description: "_description_1f4du_115"
+	list: "_list_4utvf_2",
+	item: "_item_4utvf_21",
+	marker: "_marker_4utvf_63",
+	content: "_content_4utvf_137",
+	title: "_title_4utvf_144",
+	time: "_time_4utvf_151",
+	description: "_description_4utvf_156"
 };
 //#endregion
 export { e as default };

package/dist/toast/toast.js

@@ -1,12 +1,12 @@
 "use client";
 
 import e from "./toast.module.js";
-import { createMachine as t, signal as n, useMachine as r, useSignalEffect as i, useSignals as a } from "@cascivo/core";
-import { useRef as o } from "react";
+import { useRef as t } from "react";
+import { createMachine as n, signal as r, useMachine as i, useSignalEffect 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";
 //#region ../components/src/toast/toast.tsx
-var f = 5e3, p = 160, m = 0, h = n([]);
+var f = 5e3, p = 160, m = 0, h = r([]);
 function g(e) {
 	h.value = [...h.value, {
 		id: m++,
@@ -17,7 +17,7 @@ function _(e) {
 	h.value = h.value.filter((t) => t.id !== e);
 }
 function v({ children: t }) {
-	a();
+	o();
 	let n = h.value.slice(-3);
 	return /* @__PURE__ */ d(l, { children: [t, /* @__PURE__ */ u("div", {
 		className: e.viewport,
@@ -29,19 +29,19 @@ function v({ children: t }) {
 		}, e.id))
 	})] });
 }
-var y = t({
+var y = n({
 	initial: "visible",
 	states: {
 		visible: { on: { DISMISS: "dismissing" } },
 		dismissing: { on: { END: "gone" } }
 	}
 });
-function b({ toast: t, onDismiss: n }) {
-	a();
-	let [l, m] = r(y), h = o(n);
-	h.current = n;
-	let g = t.duration ?? f, _ = t.variant === "destructive";
-	return i(() => {
+function b({ toast: n, onDismiss: r }) {
+	o();
+	let [l, m] = i(y), h = t(r);
+	h.current = r;
+	let g = n.duration ?? f, _ = n.variant === "destructive";
+	return a(() => {
 		let e = l.value;
 		if (e === "visible") {
 			let e = setTimeout(() => m("DISMISS"), g);
@@ -54,17 +54,17 @@ function b({ toast: t, onDismiss: n }) {
 	}), /* @__PURE__ */ d("div", {
 		role: _ ? "alert" : "status",
 		"aria-live": _ ? "assertive" : "polite",
-		"data-variant": t.variant ?? "default",
+		"data-variant": n.variant ?? "default",
 		"data-state": l.value,
 		className: e.toast,
 		children: [/* @__PURE__ */ d("div", {
 			className: e.body,
 			children: [/* @__PURE__ */ u("div", {
 				className: e.title,
-				children: t.title
-			}), t.description && /* @__PURE__ */ u("div", {
+				children: n.title
+			}), n.description && /* @__PURE__ */ u("div", {
 				className: e.description,
-				children: t.description
+				children: n.description
 			})]
 		}), /* @__PURE__ */ u("button", {
 			type: "button",

package/dist/toast/toast.module.js

@@ -1,5 +1,3 @@
-"use client";
-
 import './toast.css';
 var e = {
 	viewport: "_viewport_cshyp_2",

package/dist/toc/toc.js

@@ -1,17 +1,17 @@
 "use client";
 
 import e from "./toc.module.js";
-import { cn as t, useSignal as n, useSignalEffect as r, useSignals as i } from "@cascivo/core";
-import { useRef as a } from "react";
+import { useRef as t } from "react";
+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 } from "react/jsx-runtime";
 //#region ../components/src/toc/toc.tsx
 function l({ items: l, activeId: u, onActiveChange: d, labels: f, className: p }) {
-	i();
-	let m = u !== void 0, h = n(u ?? l[0]?.id ?? "");
+	a();
+	let m = u !== void 0, h = r(u ?? l[0]?.id ?? "");
 	m && (h.value = u);
-	let g = a(d);
-	return g.current = d, r(() => {
+	let g = t(d);
+	return g.current = d, i(() => {
 		if (m || typeof document > "u" || typeof IntersectionObserver > "u") return;
 		let e = l.map((e) => document.getElementById(e.id)).filter((e) => e !== null);
 		if (e.length === 0) return;
@@ -27,7 +27,7 @@ function l({ items: l, activeId: u, onActiveChange: d, labels: f, className: p }
 		return () => n.disconnect();
 	}), /* @__PURE__ */ c("nav", {
 		"aria-label": f?.nav ?? s(o.toc.nav),
-		className: t(e.toc, p),
+		className: n(e.toc, p),
 		children: /* @__PURE__ */ c("ol", { children: l.map((e) => /* @__PURE__ */ c("li", {
 			style: { "--toc-level": e.level ?? 2 },
 			children: /* @__PURE__ */ c("a", {

package/dist/toc/toc.module.js

@@ -1,5 +1,3 @@
-"use client";
-
 import './toc.css';
 var e = { toc: "_toc_1w9fk_2" };
 //#endregion