@cascivo/react 0.9.0 → 0.10.0

package/dist/node/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/node/tree-view/tree-view.module.js

@@ -0,0 +1,15 @@
+"use client";
+
+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/node/user/user.js

@@ -0,0 +1,37 @@
+"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 }) {
+	let d = typeof a == "string" && s?.name === void 0 && s?.fallback === void 0 ? { name: a } : {};
+	return /* @__PURE__ */ i("div", {
+		role: "group",
+		className: n(t.user, c),
+		...u,
+		children: [
+			/* @__PURE__ */ r(e, {
+				...d,
+				...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/node/user/user.module.js

@@ -0,0 +1,11 @@
+"use client";
+
+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/node/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/node/visually-hidden/visually-hidden.module.js

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

package/dist/react/src/theme.js

@@ -2,47 +2,53 @@
 
 import { persistedSignal as e } from "../../storage/src/persisted-signal.js";
 import { useSignalEffect as t, useSignals as n } from "@cascivo/core";
-import { Fragment as r, jsx as i } from "react/jsx-runtime";
-import { useRef as a } from "react";
+import { Fragment as r, jsx as i, jsxs as a } from "react/jsx-runtime";
+import { useRef as o } from "react";
 //#region src/theme.tsx
-var o = "cascivo-theme", s = "data-theme", c = null, l = {
-	storageKey: o,
+var s = "cascivo-theme", c = "data-theme", l = null, u = {
+	storageKey: s,
 	defaultTheme: "light",
 	explicit: !1
 };
-function u(e) {
+function d(e) {
 	return typeof window > "u" || typeof window.matchMedia != "function" ? e : window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : window.matchMedia("(prefers-color-scheme: light)").matches ? "light" : e;
 }
-function d() {
-	return l.explicit ? l.defaultTheme : u(l.defaultTheme);
-}
 function f() {
-	return c ??= e(l.storageKey, d()), c;
+	return u.explicit ? u.defaultTheme : d(u.defaultTheme);
+}
+function p() {
+	return l ??= e(u.storageKey, f()), l;
 }
-function p(e) {
-	f().value = e;
+function m(e) {
+	p().value = e;
 }
-function m() {
-	return n(), [f(), p];
+function h() {
+	return n(), [p(), m];
 }
-function h({ defaultTheme: e, value: n, storageKey: u = o, attribute: d = s, target: p, onChange: m, children: h }) {
-	let g = a(!1);
-	g.current || (g.current = !0, (c === null || l.storageKey !== u) && (l = {
-		storageKey: u,
+function g(e) {
+	return JSON.stringify(e).replace(/</g, "\\u003c");
+}
+function _({ defaultTheme: e, value: n, storageKey: d = s, attribute: f = c, target: m, onChange: h, nonce: _, children: v }) {
+	let y = o(!1);
+	y.current || (y.current = !0, (l === null || u.storageKey !== d) && (u = {
+		storageKey: d,
 		defaultTheme: e ?? "light",
 		explicit: e !== void 0
-	}, c = null));
-	let _ = f();
-	n !== void 0 && (_.value = n);
-	let v = a(m);
-	return v.current = m, t(() => {
-		let e = _.value;
-		(p ? p.current : typeof document < "u" ? document.documentElement : null)?.setAttribute(d, e), v.current?.(e);
-	}), /* @__PURE__ */ i(r, { children: h });
-}
-function g(e = {}) {
-	let t = JSON.stringify(e.storageKey ?? o), n = JSON.stringify(e.attribute ?? s), r = JSON.stringify(e.defaultTheme ?? "light"), i = e.defaultTheme === void 0 ? "if(typeof matchMedia==='function'){if(matchMedia('(prefers-color-scheme: dark)').matches)v='dark';else if(matchMedia('(prefers-color-scheme: light)').matches)v='light';}" : "";
+	}, l = null));
+	let b = p();
+	n !== void 0 && (b.value = n);
+	let x = o(h);
+	return x.current = h, t(() => {
+		let e = b.value;
+		(m ? m.current : typeof document < "u" ? document.documentElement : null)?.setAttribute(f, e), x.current?.(e);
+	}), n !== void 0 && !m ? /* @__PURE__ */ a(r, { children: [/* @__PURE__ */ i("script", {
+		nonce: _,
+		dangerouslySetInnerHTML: { __html: `document.documentElement.setAttribute(${g(f)},${g(n)})` }
+	}), v] }) : /* @__PURE__ */ i(r, { children: v });
+}
+function v(e = {}) {
+	let t = JSON.stringify(e.storageKey ?? s), n = JSON.stringify(e.attribute ?? c), r = JSON.stringify(e.defaultTheme ?? "light"), i = e.defaultTheme === void 0 ? "if(typeof matchMedia==='function'){if(matchMedia('(prefers-color-scheme: dark)').matches)v='dark';else if(matchMedia('(prefers-color-scheme: light)').matches)v='light';}" : "";
 	return `(function(){try{var v=${r};` + i + `var raw=localStorage.getItem(${t});if(raw){v=raw;try{var e=JSON.parse(raw);if(e&&typeof e==='object'&&'value'in e)v=e.value;}catch(_){}}document.documentElement.setAttribute(${n},v);}catch(_){}})();`;
 }
 //#endregion
-export { h as ThemeProvider, p as setTheme, g as themePreloadScript, m as useTheme };
+export { _ as ThemeProvider, m as setTheme, v as themePreloadScript, h as useTheme };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cascivo/react",
-  "version": "0.9.0",
+  "version": "0.10.0",
   "private": false,
   "description": "Prebuilt cascivo design system components — use without copying source",
   "keywords": [
@@ -33,6 +33,7 @@
   "exports": {
     ".": {
       "types": "./dist/index.d.ts",
+      "node": "./dist/node/index.js",
       "import": "./dist/index.js",
       "default": "./dist/index.js"
     },
@@ -44,7 +45,7 @@
     "provenance": true
   },
   "dependencies": {
-    "@cascivo/core": "^0.5.0",
+    "@cascivo/core": "^0.5.1",
     "@cascivo/i18n": "^0.2.9"
   },
   "devDependencies": {

package/readme.body.md

@@ -28,7 +28,7 @@ for `LineChart`, `AreaChart`, `BarChart`, `Sparkline`, and more.
 In a Server Component file (e.g. `app/layout.tsx`), import the themes once:
 
 ```tsx
-import '@cascivo/themes/all'
+import '@cascivo/themes/all.css'
 ```
 
 Component CSS ships **per component** and is pulled in automatically when you
@@ -65,7 +65,7 @@ RSC without any extra wrapper.
 
 ```tsx
 // once, in your entry file — themes are the only global import
-import '@cascivo/themes/all' // tokens (once) + base typography + light & dark
+import '@cascivo/themes/all.css' // tokens (once) + base typography + light & dark
 
 // anywhere — each component brings its own CSS along
 import { Button, Card, CardContent, Toggle } from '@cascivo/react'
@@ -92,9 +92,9 @@ 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/themes/base' // base typography (font/line-height/color)
-import '@cascivo/themes/light'
-import '@cascivo/themes/dark'
+import '@cascivo/themes/base.css' // base typography (font/line-height/color)
+import '@cascivo/themes/light.css'
+import '@cascivo/themes/dark.css'
 ```
 
 Scope a theme with `data-theme="light" | "dark" | "warm"` on any container. Brand