@cascivo/react 0.3.4 → 0.3.8

package/dist/tree-view/tree-view.js

@@ -0,0 +1,201 @@
+"use client";
+
+import e from "./tree-view.module.js";
+import { cn as t, useControllableSignal as n, useSignal as r, useSignals as i } from "@cascivo/core";
+import { builtin as a, t as o } from "@cascivo/i18n";
+import { jsx as s, jsxs as c } from "react/jsx-runtime";
+import { useRef as l } from "react";
+//#region ../components/src/tree-view/tree-view.tsx
+function u(e, t) {
+	let n = [], r = (e, i, a) => {
+		for (let o of e) {
+			let e = !!o.children && o.children.length > 0, s = t.has(o.id);
+			n.push({
+				id: o.id,
+				level: i,
+				parentId: a,
+				hasChildren: e,
+				expanded: s
+			}), e && s && r(o.children, i + 1, o.id);
+		}
+	};
+	return r(e, 1, null), n;
+}
+function d(e) {
+	return e === void 0 ? [] : Array.isArray(e) ? e : e === "" ? [] : [e];
+}
+function f({ items: a, selectionMode: o = "single", selected: c, defaultSelected: f, onSelectChange: h, expanded: g, defaultExpanded: _, onExpandedChange: v, className: y, "aria-label": b }) {
+	i();
+	let [x, S] = n({
+		value: g,
+		defaultValue: _ ?? [],
+		onChange: v
+	}), [C, w] = n({
+		value: c,
+		defaultValue: f ?? (o === "multi" ? [] : ""),
+		onChange: h
+	}), T = r(null), E = l(/* @__PURE__ */ new Map()), D = new Set(x.value), O = u(a, D), k = new Map(O.map((e, t) => [e.id, t])), A = d(C.value), j = new Set(A), M = T.value ?? A[0] ?? O[0]?.id ?? null, N = (e) => S([...e]), P = (e) => {
+		if (D.has(e)) return;
+		let t = new Set(D);
+		t.add(e), N(t);
+	}, F = (e) => {
+		if (!D.has(e)) return;
+		let t = new Set(D);
+		t.delete(e), N(t);
+	}, I = (e) => {
+		T.value = e, E.current.get(e)?.focus();
+	}, L = (e) => {
+		if (o === "multi") {
+			let t = new Set(j);
+			t.has(e) ? t.delete(e) : t.add(e), w([...t]);
+		} else w(e);
+	}, R = l({
+		buffer: "",
+		at: 0
+	}), z = (e, t) => {
+		let n = k.get(t.id);
+		if (n === void 0) return;
+		let { hasChildren: r, level: i, parentId: o, expanded: s } = O[n];
+		switch (e.key) {
+			case "ArrowDown": {
+				e.preventDefault();
+				let t = O[n + 1];
+				t && I(t.id);
+				break;
+			}
+			case "ArrowUp": {
+				e.preventDefault();
+				let t = O[n - 1];
+				t && I(t.id);
+				break;
+			}
+			case "ArrowRight":
+				if (e.preventDefault(), r && !s) P(t.id);
+				else if (r && s) {
+					let e = O[n + 1];
+					e && e.level > i && I(e.id);
+				}
+				break;
+			case "ArrowLeft":
+				e.preventDefault(), r && s ? F(t.id) : o && I(o);
+				break;
+			case "Home":
+				e.preventDefault(), O[0] && I(O[0].id);
+				break;
+			case "End": {
+				e.preventDefault();
+				let t = O[O.length - 1];
+				t && I(t.id);
+				break;
+			}
+			case "Enter":
+			case " ":
+				e.preventDefault(), L(t.id);
+				break;
+			default:
+				if (e.key.length === 1 && !e.metaKey && !e.ctrlKey && !e.altKey) {
+					let t = R.current, r = Date.now();
+					t.buffer = r - t.at > 500 ? e.key : t.buffer + e.key, t.at = r;
+					let i = t.buffer.toLowerCase(), o = (e) => typeof e.label == "string" && e.label.toLowerCase().startsWith(i), s = p(a, D), c = [...O.slice(n + 1), ...O.slice(0, n + 1)].find((e) => {
+						let t = s.get(e.id);
+						return t ? o(t) : !1;
+					});
+					c && I(c.id);
+				}
+				break;
+		}
+	}, B = (e, t, n, r) => {
+		let i = !!e.children && e.children.length > 0, a = D.has(e.id), o = j.has(e.id), c = M === e.id, l = e.children?.length ?? 0;
+		return /* @__PURE__ */ s(m, {
+			node: e,
+			level: t,
+			posInSet: n,
+			setSize: r,
+			hasChildren: i,
+			isExpanded: a,
+			isSelected: o,
+			isTabbable: c,
+			itemRefs: E,
+			onFocusNode: () => T.value = e.id,
+			onKeyDown: (t) => z(t, e),
+			onActivate: () => {
+				I(e.id), i && (a ? F : P)(e.id), L(e.id);
+			},
+			children: i && e.children.map((e, n) => B(e, t + 1, n + 1, l))
+		}, e.id);
+	};
+	return /* @__PURE__ */ s("ul", {
+		role: "tree",
+		"aria-label": b,
+		className: t(e.tree, y),
+		children: a.map((e, t) => B(e, 1, t + 1, a.length))
+	});
+}
+function p(e, t) {
+	let n = /* @__PURE__ */ new Map(), r = (e) => {
+		for (let i of e) n.set(i.id, i), i.children && i.children.length > 0 && t.has(i.id) && r(i.children);
+	};
+	return r(e), n;
+}
+function m({ node: t, level: n, posInSet: r, setSize: i, hasChildren: a, isExpanded: o, isSelected: l, isTabbable: u, itemRefs: d, onFocusNode: f, onKeyDown: p, onActivate: m, children: h }) {
+	return /* @__PURE__ */ c("li", {
+		role: "treeitem",
+		"aria-level": n,
+		"aria-posinset": r,
+		"aria-setsize": i,
+		"aria-selected": l,
+		"aria-expanded": a ? o : void 0,
+		tabIndex: u ? 0 : -1,
+		"data-selected": l || void 0,
+		"data-state": a ? o ? "open" : "closed" : void 0,
+		style: { "--cascivo-tree-level": n },
+		className: e.item,
+		ref: (e) => {
+			e ? d.current.set(t.id, e) : d.current.delete(t.id);
+		},
+		onFocus: (e) => {
+			e.target === e.currentTarget && f();
+		},
+		onKeyDown: p,
+		onClick: (e) => {
+			e.stopPropagation(), m();
+		},
+		children: [/* @__PURE__ */ c("span", {
+			className: e.row,
+			children: [
+				a ? /* @__PURE__ */ s("span", {
+					className: e.twisty,
+					"aria-hidden": "true",
+					"data-state": o ? "open" : "closed"
+				}) : /* @__PURE__ */ s("span", {
+					className: e.twistySpacer,
+					"aria-hidden": "true"
+				}),
+				t.icon && /* @__PURE__ */ s("span", {
+					className: e.icon,
+					"aria-hidden": "true",
+					children: t.icon
+				}),
+				/* @__PURE__ */ s("span", {
+					className: e.label,
+					children: t.label
+				})
+			]
+		}), a && /* @__PURE__ */ s("div", {
+			className: e.groupWrap,
+			"data-state": o ? "open" : "closed",
+			children: /* @__PURE__ */ s("ul", {
+				role: "group",
+				className: e.group,
+				children: h
+			})
+		})]
+	});
+}
+var h = {
+	loading: () => o(a.treeView.loading),
+	expand: () => o(a.treeView.expand),
+	collapse: () => o(a.treeView.collapse)
+};
+//#endregion
+export { f as TreeView, h as treeViewMessages };

package/dist/tree-view/tree-view.module.js

@@ -0,0 +1,16 @@
+"use client";
+
+import './tree-view.css';
+var e = {
+	tree: "_tree_ufkml_2",
+	item: "_item_ufkml_12",
+	row: "_row_ufkml_16",
+	twisty: "_twisty_ufkml_47",
+	twistySpacer: "_twistySpacer_ufkml_61",
+	icon: "_icon_ufkml_67",
+	label: "_label_ufkml_75",
+	groupWrap: "_groupWrap_ufkml_83",
+	group: "_group_ufkml_83"
+};
+//#endregion
+export { e as default };

package/dist/user/user.css

@@ -0,0 +1 @@
+@layer cascivo.component{._user_uuj1b_2{align-items:center;gap:var(--cascivo-space-3);min-inline-size:0;font-family:var(--cascivo-font-sans);display:inline-flex}._text_uuj1b_10{min-inline-size:0;line-height:var(--cascivo-leading-snug,1.3);flex-direction:column;display:flex}._name_uuj1b_17{color:var(--cascivo-color-text);font-size:var(--cascivo-text-sm);font-weight:var(--cascivo-font-medium);text-overflow:ellipsis;white-space:nowrap;overflow:hidden}._description_uuj1b_26{color:var(--cascivo-color-text-muted);font-size:var(--cascivo-text-xs);text-overflow:ellipsis;white-space:nowrap;overflow:hidden}._action_uuj1b_34{align-items:center;margin-inline-start:var(--cascivo-space-2);display:inline-flex}}

package/dist/user/user.js

@@ -0,0 +1,33 @@
+"use client";
+
+import { Avatar as e } from "../avatar/avatar.js";
+import t from "./user.module.js";
+import { cn as n } from "@cascivo/core";
+import { jsx as r, jsxs as i } from "react/jsx-runtime";
+//#region ../components/src/user/user.tsx
+function a({ name: a, description: o, avatarProps: s, className: c, children: l, ...u }) {
+	return /* @__PURE__ */ i("div", {
+		role: "group",
+		className: n(t.user, c),
+		...u,
+		children: [
+			/* @__PURE__ */ r(e, { ...s }),
+			/* @__PURE__ */ i("span", {
+				className: t.text,
+				children: [/* @__PURE__ */ r("span", {
+					className: t.name,
+					children: a
+				}), o != null && /* @__PURE__ */ r("span", {
+					className: t.description,
+					children: o
+				})]
+			}),
+			l != null && /* @__PURE__ */ r("span", {
+				className: t.action,
+				children: l
+			})
+		]
+	});
+}
+//#endregion
+export { a as User };

package/dist/user/user.module.js

@@ -0,0 +1,12 @@
+"use client";
+
+import './user.css';
+var e = {
+	user: "_user_uuj1b_2",
+	text: "_text_uuj1b_10",
+	name: "_name_uuj1b_17",
+	description: "_description_uuj1b_26",
+	action: "_action_uuj1b_34"
+};
+//#endregion
+export { e as default };

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

@@ -0,0 +1 @@
+@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.js

@@ -0,0 +1,15 @@
+"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 };

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

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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cascivo/react",
-  "version": "0.3.4",
+  "version": "0.3.8",
   "private": false,
   "description": "Prebuilt cascivo design system components — use without copying source",
   "keywords": [
@@ -33,10 +33,10 @@
   "exports": {
     ".": {
       "types": "./dist/index.d.ts",
-      "import": "./dist/index.js",
-      "default": "./dist/index.js"
+      "import": "./dist/react/src/index.js",
+      "default": "./dist/react/src/index.js"
     },
-    "./styles.css": "./dist/cascivo.css",
+    "./styles.css": "./dist/styles.css",
     "./package.json": "./package.json"
   },
   "publishConfig": {
@@ -44,8 +44,8 @@
     "provenance": true
   },
   "dependencies": {
-    "@cascivo/core": "^0.2.0",
-    "@cascivo/i18n": "^0.1.8"
+    "@cascivo/core": "^0.2.3",
+    "@cascivo/i18n": "^0.1.11"
   },
   "devDependencies": {
     "@testing-library/jest-dom": "^6.9.1",

package/readme.body.md

@@ -20,28 +20,32 @@ for `LineChart`, `AreaChart`, `BarChart`, `Sparkline`, and more.
 
 ### Framework setup (Next.js App Router)
 
-In a Server Component file (e.g. `app/layout.tsx`), import the CSS once:
+In a Server Component file (e.g. `app/layout.tsx`), import the themes once:
 
 ```tsx
-import '@cascivo/react/styles.css'
 import '@cascivo/themes/all'
 ```
 
+Component CSS ships **per component** and is pulled in automatically when you
+import a component — a bundler (Vite, webpack/Next.js) includes the styles only
+for the components you actually use and tree-shakes the rest. There is no
+component-CSS import to add or maintain.
+
 Components ship with `'use client'` preserved in the bundle, so they work inside
 RSC without any extra wrapper.
 
-> **Note on the styles path:** the import specifier is `@cascivo/react/styles.css`,
-> which the package's export map points at the dist file `cascivo.css`. Always
-> import the `styles.css` specifier — never reference `cascivo.css` directly.
+> **No bundler? (CDN, import maps, plain `<link>`)** Import the aggregate sheet
+> `@cascivo/react/styles.css` — it contains every component's CSS in one file.
+> With a bundler you don't need it; import it only if you prefer one explicit
+> stylesheet over per-component tree-shaking.
 
 ## Use
 
 ```tsx
-// once, in your entry file — two imports get you a fully themed setup
-import '@cascivo/react/styles.css' // component styles
+// once, in your entry file — themes are the only global import
 import '@cascivo/themes/all' // tokens (once) + base typography + light & dark
 
-// anywhere
+// anywhere — each component brings its own CSS along
 import { Button, Card, CardContent, Toggle } from '@cascivo/react'
 
 export function App() {
@@ -66,7 +70,6 @@ Prefer à-la-carte? Import only the themes you need — each self-imports the to
 (deduped by URL, so light + dark load tokens once):
 
 ```tsx
-import '@cascivo/react/styles.css'
 import '@cascivo/themes/base' // base typography (font/line-height/color)
 import '@cascivo/themes/light'
 import '@cascivo/themes/dark'
@@ -129,7 +132,7 @@ routing break after adding one of these, check that the import resolves to
 
 ## Component index
 
-181 components, exported from `@cascivo/react`. Full props, examples, and live demos at [docs.cascivo.com](https://docs.cascivo.com).
+191 components, exported from `@cascivo/react`. Full props, examples, and live demos at [docs.cascivo.com](https://docs.cascivo.com).
 
 ### Inputs
 
@@ -211,6 +214,7 @@ routing break after adding one of these, check that the import resolves to
 - **Kbd** — Displays a keyboard key or shortcut
 - **List** — Styled unordered or ordered list with ListItem
 - **LoginPage** — Authentication login page with email and password form.
+- **LogViewer** — Virtualized monospace console for high-frequency log and stream output
 - **NotificationCenter** — A list of notification alerts with a mark-all-read action.
 - **PageWithBreadcrumb** — A centered content page with a breadcrumb navigation and page header.
 - **Prose** — Wrapper that styles raw descendant HTML — headings, lists, code, quotes, tables
@@ -321,16 +325,25 @@ routing break after adding one of these, check that the import resolves to
 - **Boxplot** — Box-and-whisker plot with five-number summary and outlier dots per series.
 - **BubbleChart** — Bubble chart mapping x, y, and size dimensions; radius is area-proportional via sqrt scale.
 - **Bullet** — Bullet chart with background range bands, measure bar, and target tick.
+- **Calendar** — Calendar heatmap — a week-column grid of day cells colored by value (GitHub-style).
+- **Candlestick** — OHLC financial chart — each period a high–low wick and an open↔close body, coloured up/down.
 - **ComboChart** — Combination bar + line chart on shared or dual y-axes.
+- **Funnel** — Vertical conversion funnel — each stage is a trapezoid narrowing toward the next, with optional conversion labels.
+- **Gauge** — A speedometer gauge — a value arc over a min–max sweep with threshold zones, ticks, and a needle.
 - **Heatmap** — Two-dimensional heatmap with band scales and color-mix cell interpolation.
 - **Histogram** — Frequency histogram using Freedman–Diaconis binning with hover tooltips.
 - **Kpi** — KPI card showing a primary metric with optional delta indicator, icon, and sparkline.
 - **LineChart** — Time-series or numeric line chart with multi-series support, hover tooltip, and legend.
 - **Meter** — Progress meter in bar or gauge variant with threshold coloring.
 - **PieChart** — Pie or donut chart with hover segments and optional legend.
+- **Polar** — A polar coordinate plot — categories around the circle, value as radius. Bars (a rose), or a polar line/area.
 - **Radar** — Radar / spider chart with polar grid rings, spokes, and multi-series polygon overlays.
+- **RadialBar** — Concentric radial bars (a circular gauge family) — each datum is a ring whose sweep is proportional to its value.
+- **Sankey** — Flow diagram — ranked nodes connected by throughput-sized link ribbons.
 - **ScatterChart** — Scatter plot with variable point radius, multi-series, and hover tooltip.
 - **Sparkline** — Compact inline sparkline for embedding trend data in dashboards or KPI cards.
+- **Stream** — Streamgraph — stacked areas on a centered (silhouette) flowing baseline.
+- **Sunburst** — Radial hierarchy — concentric rings where each node is an annular segment sized by value.
 - **Treemap** — Squarified treemap for visualizing part-to-whole hierarchical data.
 
 <!-- COMPONENT_INDEX:END -->