@cascivo/react 0.16.0 → 0.16.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cascivo/react",
-  "version": "0.16.0",
+  "version": "0.16.1",
   "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/core": "^0.16.0",
-    "@cascivo/i18n": "^0.16.0",
-    "@cascivo/themes": "^0.4.10"
+    "@cascivo/core": "^0.16.1",
+    "@cascivo/i18n": "^0.16.1",
+    "@cascivo/themes": "^0.4.11"
   },
   "devDependencies": {
     "@testing-library/jest-dom": "^6.9.1",

package/readme.body.md

@@ -231,7 +231,7 @@ routing break after adding one of these, check that the import resolves to
 
 ## Component index
 
-192 components, exported from `@cascivo/react`. Full props, examples, and live demos at [cascivo.com/docs](https://cascivo.com/docs).
+197 components, exported from `@cascivo/react`. Full props, examples, and live demos at [cascivo.com/docs](https://cascivo.com/docs).
 
 ### Inputs
 
@@ -264,6 +264,7 @@ routing break after adding one of these, check that the import resolves to
 - **Radio** — Single choice from a set, grouped with RadioGroup
 - **RadioCard** — Selectable card backed by a native radio input. Use RadioCardGroup for single-select groups.
 - **RatingGroup** — Star rating input with accessible radio group pattern
+- **ReorderList** — List whose rows can be reordered by pointer drag or entirely by keyboard
 - **Search** — Search input with debounced search callback and clear button
 - **SegmentedControl** — Mutually exclusive toggle group
 - **Select** — Native select menu styled to match the design system
@@ -275,6 +276,7 @@ routing break after adding one of these, check that the import resolves to
 - **TimePicker** — Native time input wrapper with label, hint, error, and size variants
 - **Toggle** — On/off switch built as an accessible button
 - **ToggleGroup** — A set of toggle buttons for single or multiple selection
+- **WheelPicker** — iOS-style drum picker — a column of options that scrolls and snaps to a selection
 
 ### Display
 
@@ -335,6 +337,7 @@ routing break after adding one of these, check that the import resolves to
 - **TreeView** — Hierarchical, expandable tree of nodes with keyboard navigation and selection
 - **User** — Identity composite: an avatar with a name, description, and optional action slot
 - **UsersTablePage** — Full users management page with table, search, and invite action.
+- **VirtualList** — Renders only the rows inside the viewport, so list length costs no extra DOM
 - **VisuallyHidden** — Hides content visually while keeping it available to screen readers
 
 ### Overlay
@@ -363,6 +366,7 @@ routing break after adding one of these, check that the import resolves to
 - **Dock** — Fixed bottom navigation bar for mobile app shells with up to 5 items
 - **Header** — App top bar with brand, primary navigation links, and an actions slot
 - **HeaderPanel** — Non-modal panel anchored below the shell header at the inline-end edge — hosts notifications, app switcher, user settings
+- **LargeTitleHeader** — Scrolling region whose large title collapses into a compact sticky bar as it scrolls
 - **Link** — Styled anchor for navigation, standalone or inline within prose
 - **Menubar** — Horizontal application menu bar with keyboard-navigable dropdown menus
 - **MenuButton** — A button that opens an anchored action menu of one-shot commands
@@ -409,6 +413,7 @@ routing break after adding one of these, check that the import resolves to
 
 ### Feedback
 
+- **InfiniteScroll** — Loads the next page when the end of a list scrolls into view
 - **InlineLoading** — Compact inline status indicator that pairs a label with a loading, success, or error state
 - **Notification** — Inline, actionable notification banner that surfaces a titled message with an optional recovery action
 - **Progress** — Horizontal bar showing the completion progress of a tracked operation

package/dist/node/react/src/theme.js

@@ -1,78 +0,0 @@
-"use client";
-
-import { persistedSignal as e } from "../../storage/src/persisted-signal.js";
-import { useRef as t } from "react";
-import { useSignalEffect as n, useSignals as r } from "@cascivo/core";
-import { Fragment as i, jsx as a, jsxs as o } from "react/jsx-runtime";
-//#region src/theme.tsx
-var s = "cascivo-theme", c = "data-theme";
-function l() {
-	return globalThis.process?.env?.NODE_ENV !== "production";
-}
-var u = /* @__PURE__ */ new Set();
-function d(e, t) {
-	l() && (e === null || typeof document > "u" || typeof requestAnimationFrame != "function" || u.has(t) || requestAnimationFrame(() => {
-		u.has(t) || getComputedStyle(e).getPropertyValue("--cascivo-color-accent").trim() === "" && (u.add(t), console.warn(`cascivo ThemeProvider: data-theme=${JSON.stringify(t)} was set, but no cascivo theme CSS defines it — every --cascivo-color-* token is unresolved, so components render grayscale. Import '@cascivo/themes/all.css' once in your entry (or '@cascivo/react/styles.css', which bundles the light and dark themes). Using a custom theme? Ensure its stylesheet is loaded and defines [data-theme=${JSON.stringify(t)}]. Docs: https://cascivo.com/docs/theming.md — offline: npx -y @cascivo/docs guide theming`));
-	}));
-}
-var f = null, p = {
-	storageKey: s,
-	defaultTheme: "light",
-	explicit: !1
-};
-function m(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 h() {
-	return p.explicit ? p.defaultTheme : m(p.defaultTheme);
-}
-function g() {
-	return f ??= e(p.storageKey, h()), f;
-}
-var _ = !1, v = !1;
-function y(e) {
-	!l() || v || typeof requestAnimationFrame == "function" && requestAnimationFrame(() => {
-		_ || v || (v = !0, console.warn(`cascivo setTheme(${JSON.stringify(e)}): no <ThemeProvider> is mounted, so the theme signal updated but the ${c} attribute was never written — nothing on the page will restyle. Wrap your app in <ThemeProvider> (it is SSR-safe and persists the choice), or call applyTheme() to write the attribute directly if you are theming outside React. Docs: https://cascivo.com/docs/theming.md — offline: npx -y @cascivo/docs guide theming`));
-	});
-}
-function b(e) {
-	g().value = e, y(e);
-}
-function x(e, t) {
-	g().value = e;
-	let n = t ?? (typeof document < "u" ? document.documentElement : null);
-	n !== null && (n.setAttribute(c, e), d(n, e));
-}
-function S() {
-	return r(), [g().value, b];
-}
-function C() {
-	return g();
-}
-function w(e) {
-	return JSON.stringify(e).replace(/</g, "\\u003c");
-}
-function T({ defaultTheme: e, value: r, storageKey: l = s, attribute: u = c, target: m, onChange: h, nonce: v, children: y }) {
-	let b = t(!1);
-	b.current || (b.current = !0, (f === null || p.storageKey !== l) && (p = {
-		storageKey: l,
-		defaultTheme: e ?? "light",
-		explicit: e !== void 0
-	}, f = null));
-	let x = g();
-	r !== void 0 && (x.value = r);
-	let S = t(h);
-	return S.current = h, n(() => {
-		let e = x.value, t = m ? m.current : typeof document < "u" ? document.documentElement : null;
-		_ = !0, t?.setAttribute(u, e), d(t, e), S.current?.(e);
-	}), r !== void 0 && !m ? /* @__PURE__ */ o(i, { children: [/* @__PURE__ */ a("script", {
-		nonce: v,
-		dangerouslySetInnerHTML: { __html: `document.documentElement.setAttribute(${w(u)},${w(r)})` }
-	}), y] }) : /* @__PURE__ */ a(i, { children: y });
-}
-function E(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 { T as ThemeProvider, x as applyTheme, b as setTheme, E as themePreloadScript, C as themeSignal, S as useTheme };

package/dist/node/storage/src/drivers.js

@@ -1,34 +0,0 @@
-//#region ../storage/src/drivers.ts
-function e() {
-	let e = /* @__PURE__ */ new Map();
-	return {
-		get: (t) => e.get(t) ?? null,
-		set: (t, n) => {
-			e.set(t, n);
-		},
-		remove: (t) => {
-			e.delete(t);
-		}
-	};
-}
-function t() {
-	return typeof window > "u" ? e() : {
-		get: (e) => window.localStorage.getItem(e),
-		set: (e, t) => {
-			try {
-				window.localStorage.setItem(e, t);
-			} catch {}
-		},
-		remove: (e) => {
-			window.localStorage.removeItem(e);
-		},
-		subscribe(e, t) {
-			let n = (n) => {
-				n.storageArea === window.localStorage && n.key === e && t(n.newValue);
-			};
-			return window.addEventListener("storage", n), () => window.removeEventListener("storage", n);
-		}
-	};
-}
-//#endregion
-export { t as localStorageDriver };

package/dist/node/storage/src/persisted-signal.js

@@ -1,41 +0,0 @@
-import { localStorageDriver as e } from "./drivers.js";
-import { effect as t, signal as n } from "@cascivo/core";
-//#region ../storage/src/persisted-signal.ts
-function r(r, i, a = {}) {
-	let o = a.driver ?? e(), s = a.version ?? 1, c = n(i), l = n(!1), u = !1;
-	function d(e) {
-		if (e !== null) try {
-			let t = JSON.parse(e);
-			if (typeof t != "object" || !t || typeof t.v != "number") return;
-			if (t.v !== s) {
-				if (!a.migrate) return;
-				let e = a.migrate(t.value, t.v);
-				return o.set(r, JSON.stringify({
-					v: s,
-					value: e
-				})), e;
-			}
-			return t.value;
-		} catch {
-			return;
-		}
-	}
-	function f(e) {
-		let t = d(e);
-		t !== void 0 && (u = !0, c.value = t, u = !1);
-	}
-	let p = o.get(r);
-	p instanceof Promise ? p.then((e) => {
-		f(e), l.value = !0;
-	}) : (f(p), l.value = !0), t(() => {
-		let e = c.value;
-		!l.value || u || o.set(r, JSON.stringify({
-			v: s,
-			value: e
-		}));
-	}), o.subscribe?.(r, f);
-	let m = c;
-	return m.ready = l, m;
-}
-//#endregion
-export { r as persistedSignal };

package/dist/react/src/theme.js

@@ -1,78 +0,0 @@
-"use client";
-
-import { persistedSignal as e } from "../../storage/src/persisted-signal.js";
-import { useRef as t } from "react";
-import { useSignalEffect as n, useSignals as r } from "@cascivo/core";
-import { Fragment as i, jsx as a, jsxs as o } from "react/jsx-runtime";
-//#region src/theme.tsx
-var s = "cascivo-theme", c = "data-theme";
-function l() {
-	return globalThis.process?.env?.NODE_ENV !== "production";
-}
-var u = /* @__PURE__ */ new Set();
-function d(e, t) {
-	l() && (e === null || typeof document > "u" || typeof requestAnimationFrame != "function" || u.has(t) || requestAnimationFrame(() => {
-		u.has(t) || getComputedStyle(e).getPropertyValue("--cascivo-color-accent").trim() === "" && (u.add(t), console.warn(`cascivo ThemeProvider: data-theme=${JSON.stringify(t)} was set, but no cascivo theme CSS defines it — every --cascivo-color-* token is unresolved, so components render grayscale. Import '@cascivo/themes/all.css' once in your entry (or '@cascivo/react/styles.css', which bundles the light and dark themes). Using a custom theme? Ensure its stylesheet is loaded and defines [data-theme=${JSON.stringify(t)}]. Docs: https://cascivo.com/docs/theming.md — offline: npx -y @cascivo/docs guide theming`));
-	}));
-}
-var f = null, p = {
-	storageKey: s,
-	defaultTheme: "light",
-	explicit: !1
-};
-function m(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 h() {
-	return p.explicit ? p.defaultTheme : m(p.defaultTheme);
-}
-function g() {
-	return f ??= e(p.storageKey, h()), f;
-}
-var _ = !1, v = !1;
-function y(e) {
-	!l() || v || typeof requestAnimationFrame == "function" && requestAnimationFrame(() => {
-		_ || v || (v = !0, console.warn(`cascivo setTheme(${JSON.stringify(e)}): no <ThemeProvider> is mounted, so the theme signal updated but the ${c} attribute was never written — nothing on the page will restyle. Wrap your app in <ThemeProvider> (it is SSR-safe and persists the choice), or call applyTheme() to write the attribute directly if you are theming outside React. Docs: https://cascivo.com/docs/theming.md — offline: npx -y @cascivo/docs guide theming`));
-	});
-}
-function b(e) {
-	g().value = e, y(e);
-}
-function x(e, t) {
-	g().value = e;
-	let n = t ?? (typeof document < "u" ? document.documentElement : null);
-	n !== null && (n.setAttribute(c, e), d(n, e));
-}
-function S() {
-	return r(), [g().value, b];
-}
-function C() {
-	return g();
-}
-function w(e) {
-	return JSON.stringify(e).replace(/</g, "\\u003c");
-}
-function T({ defaultTheme: e, value: r, storageKey: l = s, attribute: u = c, target: m, onChange: h, nonce: v, children: y }) {
-	let b = t(!1);
-	b.current || (b.current = !0, (f === null || p.storageKey !== l) && (p = {
-		storageKey: l,
-		defaultTheme: e ?? "light",
-		explicit: e !== void 0
-	}, f = null));
-	let x = g();
-	r !== void 0 && (x.value = r);
-	let S = t(h);
-	return S.current = h, n(() => {
-		let e = x.value, t = m ? m.current : typeof document < "u" ? document.documentElement : null;
-		_ = !0, t?.setAttribute(u, e), d(t, e), S.current?.(e);
-	}), r !== void 0 && !m ? /* @__PURE__ */ o(i, { children: [/* @__PURE__ */ a("script", {
-		nonce: v,
-		dangerouslySetInnerHTML: { __html: `document.documentElement.setAttribute(${w(u)},${w(r)})` }
-	}), y] }) : /* @__PURE__ */ a(i, { children: y });
-}
-function E(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 { T as ThemeProvider, x as applyTheme, b as setTheme, E as themePreloadScript, C as themeSignal, S as useTheme };

package/dist/storage/src/drivers.js

@@ -1,34 +0,0 @@
-//#region ../storage/src/drivers.ts
-function e() {
-	let e = /* @__PURE__ */ new Map();
-	return {
-		get: (t) => e.get(t) ?? null,
-		set: (t, n) => {
-			e.set(t, n);
-		},
-		remove: (t) => {
-			e.delete(t);
-		}
-	};
-}
-function t() {
-	return typeof window > "u" ? e() : {
-		get: (e) => window.localStorage.getItem(e),
-		set: (e, t) => {
-			try {
-				window.localStorage.setItem(e, t);
-			} catch {}
-		},
-		remove: (e) => {
-			window.localStorage.removeItem(e);
-		},
-		subscribe(e, t) {
-			let n = (n) => {
-				n.storageArea === window.localStorage && n.key === e && t(n.newValue);
-			};
-			return window.addEventListener("storage", n), () => window.removeEventListener("storage", n);
-		}
-	};
-}
-//#endregion
-export { t as localStorageDriver };

package/dist/storage/src/persisted-signal.js

@@ -1,41 +0,0 @@
-import { localStorageDriver as e } from "./drivers.js";
-import { effect as t, signal as n } from "@cascivo/core";
-//#region ../storage/src/persisted-signal.ts
-function r(r, i, a = {}) {
-	let o = a.driver ?? e(), s = a.version ?? 1, c = n(i), l = n(!1), u = !1;
-	function d(e) {
-		if (e !== null) try {
-			let t = JSON.parse(e);
-			if (typeof t != "object" || !t || typeof t.v != "number") return;
-			if (t.v !== s) {
-				if (!a.migrate) return;
-				let e = a.migrate(t.value, t.v);
-				return o.set(r, JSON.stringify({
-					v: s,
-					value: e
-				})), e;
-			}
-			return t.value;
-		} catch {
-			return;
-		}
-	}
-	function f(e) {
-		let t = d(e);
-		t !== void 0 && (u = !0, c.value = t, u = !1);
-	}
-	let p = o.get(r);
-	p instanceof Promise ? p.then((e) => {
-		f(e), l.value = !0;
-	}) : (f(p), l.value = !0), t(() => {
-		let e = c.value;
-		!l.value || u || o.set(r, JSON.stringify({
-			v: s,
-			value: e
-		}));
-	}), o.subscribe?.(r, f);
-	let m = c;
-	return m.ready = l, m;
-}
-//#endregion
-export { r as persistedSignal };