@cascivo/react 0.14.0 → 0.16.1

package/dist/wheel-picker/wheel-picker.js

@@ -0,0 +1,84 @@
+"use client";
+
+import e from "./wheel-picker.module.js";
+import { useRef as t } from "react";
+import { cn as n, useEffectPropSignal as r, useId as i, useSignalEffect as a } from "@cascivo/core";
+import { jsx as o, jsxs as s } from "react/jsx-runtime";
+//#region ../components/src/wheel-picker/wheel-picker.tsx
+var c = 120;
+function l({ options: l, value: u, onValueChange: d, visibleCount: f = 5, itemHeight: p = 36, ariaLabel: m, className: h }) {
+	let g = t(null), _ = i(), v = Math.max(0, l.findIndex((e) => e.value === u)), y = t(l);
+	y.current = l;
+	let b = t(d);
+	b.current = d;
+	let x = t(p);
+	x.current = p;
+	let S = t(u);
+	S.current = u;
+	let C = (e, t) => {
+		let n = g.current;
+		n && n.scrollTo({
+			top: e * x.current,
+			behavior: t ? "smooth" : "instant"
+		});
+	}, w = r(u);
+	a(() => {
+		let e = w.value, t = y.current.findIndex((t) => t.value === e);
+		t >= 0 && C(t, !1);
+	}), a(() => {
+		let e = g.current;
+		if (!e) return;
+		let t, n = () => {
+			clearTimeout(t), t = setTimeout(() => {
+				let t = Math.round(e.scrollTop / x.current), n = y.current[t];
+				n && n.value !== S.current && b.current(n.value);
+			}, c);
+		};
+		return e.addEventListener("scroll", n, { passive: !0 }), () => {
+			clearTimeout(t), e.removeEventListener("scroll", n);
+		};
+	});
+	let T = (e) => {
+		let t = Math.max(0, Math.min(l.length - 1, e)), n = l[t];
+		!n || n.value === u || (d(n.value), C(t, !0));
+	}, E = (e) => {
+		let t = {
+			ArrowDown: v + 1,
+			ArrowUp: v - 1,
+			Home: 0,
+			End: l.length - 1,
+			PageDown: v + f,
+			PageUp: v - f
+		}[e.key];
+		t !== void 0 && (e.preventDefault(), T(t));
+	}, D = (f - 1) / 2 * p, O = {
+		"--_item-height": `${p}px`,
+		"--_pad": `${D}px`,
+		"--_column-height": `${f * p}px`
+	};
+	return /* @__PURE__ */ s("div", {
+		className: n(e.root, h),
+		style: O,
+		children: [/* @__PURE__ */ o("div", {
+			ref: g,
+			role: "listbox",
+			tabIndex: 0,
+			"aria-label": m,
+			"aria-activedescendant": `${_}-${v}`,
+			className: e.column,
+			onKeyDown: E,
+			children: l.map((t, n) => /* @__PURE__ */ o("div", {
+				id: `${_}-${n}`,
+				role: "option",
+				"aria-selected": n === v,
+				className: e.option,
+				children: t.label
+			}, t.value))
+		}), /* @__PURE__ */ o("div", {
+			"aria-hidden": "true",
+			className: e.band
+		})]
+	});
+}
+//#endregion
+export { l as WheelPicker };

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

@@ -0,0 +1,9 @@
+import './wheel-picker.css';
+var e = {
+	root: "_root_11q00_2",
+	column: "_column_11q00_7",
+	option: "_option_11q00_29",
+	band: "_band_11q00_48"
+};
+//#endregion
+export { e as default };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cascivo/react",
-  "version": "0.14.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.7.1",
-    "@cascivo/i18n": "^0.2.14",
-    "@cascivo/themes": "^0.4.9"
+    "@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
@@ -379,8 +383,8 @@ routing break after adding one of these, check that the import resolves to
 
 ### Layout
 
+- **AppFrame** — Full-page application shell with persisted collapsible sidebar. Includes a signal-driven top progress bar with determinate progress, error state, and dismissible error strip.
 - **AppShell** — Sticky-header + full-height side-nav + single-scroll-container layout with an animated, accessible nav toggle.
-- **AppShell** — Full-page application shell with persisted collapsible sidebar. Includes a signal-driven top progress bar with determinate progress, error state, and dismissible error strip.
 - **AspectRatio** — Constrains content to a fixed width-to-height ratio
 - **AuthLayout** — Centered card layout for authentication pages (login, register, forgot password).
 - **AutoGrid** — Media-query-free responsive grid — columns auto-fill based on available space.
@@ -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
@@ -425,7 +430,7 @@ 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).
+- **CalendarHeatmap** — 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.

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

@@ -1,78 +0,0 @@
-"use client";
-
-import { persistedSignal as e } from "../../storage/src/persisted-signal.js";
-import { useSignalEffect as t, useSignals as n } from "@cascivo/core";
-import { useRef as r } from "react";
-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 n(), [g().value, b];
-}
-function C() {
-	return g();
-}
-function w(e) {
-	return JSON.stringify(e).replace(/</g, "\\u003c");
-}
-function T({ defaultTheme: e, value: n, storageKey: l = s, attribute: u = c, target: m, onChange: h, nonce: v, children: y }) {
-	let b = r(!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();
-	n !== void 0 && (x.value = n);
-	let S = r(h);
-	return S.current = h, t(() => {
-		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);
-	}), n !== void 0 && !m ? /* @__PURE__ */ o(i, { children: [/* @__PURE__ */ a("script", {
-		nonce: v,
-		dangerouslySetInnerHTML: { __html: `document.documentElement.setAttribute(${w(u)},${w(n)})` }
-	}), 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,36 +0,0 @@
-"use client";
-
-//#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,43 +0,0 @@
-"use client";
-
-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 { useSignalEffect as t, useSignals as n } from "@cascivo/core";
-import { useRef as r } from "react";
-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 n(), [g().value, b];
-}
-function C() {
-	return g();
-}
-function w(e) {
-	return JSON.stringify(e).replace(/</g, "\\u003c");
-}
-function T({ defaultTheme: e, value: n, storageKey: l = s, attribute: u = c, target: m, onChange: h, nonce: v, children: y }) {
-	let b = r(!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();
-	n !== void 0 && (x.value = n);
-	let S = r(h);
-	return S.current = h, t(() => {
-		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);
-	}), n !== void 0 && !m ? /* @__PURE__ */ o(i, { children: [/* @__PURE__ */ a("script", {
-		nonce: v,
-		dangerouslySetInnerHTML: { __html: `document.documentElement.setAttribute(${w(u)},${w(n)})` }
-	}), 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,36 +0,0 @@
-"use client";
-
-//#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,43 +0,0 @@
-"use client";
-
-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 };