@cascivo/react 0.11.1 → 0.13.0

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.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/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.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 };

package/dist/visually-hidden/visually-hidden.js

@@ -1,15 +1,4 @@
 "use client";
 
-import e from "./visually-hidden.module.js";
-import { cn as t } from "@cascivo/core";
-import { jsx as n } from "react/jsx-runtime";
-//#region ../components/src/visually-hidden/visually-hidden.tsx
-function r({ children: r, className: i, ...a }) {
-	return /* @__PURE__ */ n("span", {
-		className: t(e.visuallyHidden, i),
-		...a,
-		children: r
-	});
-}
-//#endregion
-export { r as VisuallyHidden };
+import "@cascivo/core";
+import "react/jsx-runtime";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cascivo/react",
-  "version": "0.11.1",
+  "version": "0.13.0",
   "private": false,
   "description": "Prebuilt cascivo design system components — use without copying source. @cascivo/themes installs with it; pair with @cascivo/charts (data-viz) and @cascivo/icons. Docs offline: npx @cascivo/docs",
   "keywords": [
@@ -45,9 +45,9 @@
     "provenance": true
   },
   "dependencies": {
-    "@cascivo/i18n": "^0.2.11",
-    "@cascivo/core": "^0.5.3",
-    "@cascivo/themes": "^0.4.6"
+    "@cascivo/core": "^0.7.0",
+    "@cascivo/i18n": "^0.2.13",
+    "@cascivo/themes": "^0.4.8"
   },
   "devDependencies": {
     "@testing-library/jest-dom": "^6.9.1",

package/readme.body.md

@@ -389,7 +389,7 @@ routing break after adding one of these, check that the import resolves to
 - **Cta** — Call-to-action band — quiet hairline-bordered section with title, description, and centered actions. Replace demo content before shipping.
 - **DashboardLayout** — Dashboard page layout with stats strip, main content area, and optional aside.
 - **FeatureGrid** — Feature section — AutoGrid of items with optional title, description, and icon slots. Icons are optional; the grid works text-only. Replace demo content before shipping.
-- **Flex** — Flex layout primitive for vertical or horizontal stacking with gap control.
+- **Flex** — Flex layout primitive for vertical or horizontal stacking with gap control. ⚠ Unlike CSS `flex-direction`, `direction` defaults to `vertical` — pass `direction="horizontal"` for a row.
 - **Grid** — CSS grid layout primitive with responsive column collapsing. Establishes its own containment, so responsive `cols` adapt to the grid’s own slot width with no wrapper or container ancestor required.
 - **Hero** — Page hero section — centered or split layout with eyebrow, title, description, actions and media slots. Replace demo content before shipping.
 - **Indicator** — Positions an overlay element (badge, dot, count) at a corner of its child

package/dist/node/visually-hidden/visually-hidden.module.js

@@ -1,5 +0,0 @@
-"use client";
-
-var e = { visuallyHidden: "_visuallyHidden_1iva7_2" };
-//#endregion
-export { e as default };

package/dist/visually-hidden/visually-hidden.css

@@ -1 +0,0 @@
-@layer cascivo.component{._visuallyHidden_1iva7_2{clip-path:inset(50%);white-space:nowrap;border:0;block-size:1px;inline-size:1px;margin:-1px;padding:0;position:absolute;overflow:hidden}}

package/dist/visually-hidden/visually-hidden.module.js

@@ -1,6 +0,0 @@
-"use client";
-
-import './visually-hidden.css';
-var e = { visuallyHidden: "_visuallyHidden_1iva7_2" };
-//#endregion
-export { e as default };