@cascivo/react 0.9.0 → 0.10.0

package/README.md

@@ -46,7 +46,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
@@ -83,7 +83,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'
@@ -110,9 +110,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

package/dist/command-menu/command-menu.js

@@ -282,6 +282,7 @@ function v({ open: m, onOpenChange: v, groups: te, placeholder: y, emptyLabel: b
 						role: "listbox",
 						id: k,
 						"aria-label": S,
+						tabIndex: 0,
 						children: H.map((e, r) => /* @__PURE__ */ d("div", {
 							role: "group",
 							"aria-label": e.heading,
@@ -338,8 +339,7 @@ function v({ open: m, onOpenChange: v, groups: te, placeholder: y, emptyLabel: b
 										}),
 										r.actions && r.actions.length > 0 && /* @__PURE__ */ u("span", {
 											className: n.actions,
-											children: r.actions.map((e) => /* @__PURE__ */ d("button", {
-												type: "button",
+											children: r.actions.map((e) => /* @__PURE__ */ d("span", {
 												className: n.action,
 												onClick: (t) => {
 													t.stopPropagation(), Y(e);

package/dist/field/field.js

@@ -6,34 +6,43 @@ import { cn as n, useId as r } from "@cascivo/core";
 import { jsx as i, jsxs as a } from "react/jsx-runtime";
 import { Children as o, cloneElement as s, isValidElement as c } from "react";
 //#region ../components/src/field/field.tsx
-function l({ label: l, description: u, error: d, required: f = !1, disabled: p = !1, id: m, children: h, className: g }) {
-	let _ = r("cascade-field"), v = m ?? _, y = `${v}-description`, b = `${v}-error`, x = [u ? y : null, d ? b : null].filter(Boolean).join(" ") || void 0, S = { id: v };
-	x && (S["aria-describedby"] = x), d && (S["aria-invalid"] = !0), (p || h.props.disabled) && (S.disabled = !0);
-	let C = c(h) ? s(o.only(h), S) : h;
+var l = /* @__PURE__ */ new Set();
+function u() {
+	return globalThis.process?.env?.NODE_ENV !== "production";
+}
+function d(e, t) {
+	if (!u() || e == null || t.props.label == null) return;
+	let n = String(e);
+	l.has(n) || (l.add(n), console.warn(`cascivo Field: both the Field and its child control define a \`label\` (${n}). Omit the child's \`label\` inside a Field — it renders a second <label> for the same control. The Field owns the label.`));
+}
+function f({ label: l, description: u, error: f, required: p = !1, disabled: m = !1, id: h, children: g, className: _ }) {
+	let v = r("cascade-field"), y = h ?? v, b = `${y}-description`, x = `${y}-error`, S = [u ? b : null, f ? x : null].filter(Boolean).join(" ") || void 0, C = { id: y };
+	S && (C["aria-describedby"] = S), f && (C["aria-invalid"] = !0), (m || g.props.disabled) && (C.disabled = !0), c(g) && d(l, g);
+	let w = c(g) ? s(o.only(g), C) : g;
 	return /* @__PURE__ */ a("div", {
-		className: n(t.field, g),
-		"data-disabled": p ? "" : void 0,
+		className: n(t.field, _),
+		"data-disabled": m ? "" : void 0,
 		children: [
 			l && /* @__PURE__ */ i(e, {
-				htmlFor: v,
-				required: f,
-				disabled: p,
+				htmlFor: y,
+				required: p,
+				disabled: m,
 				children: l
 			}),
-			C,
+			w,
 			u && /* @__PURE__ */ i("p", {
-				id: y,
+				id: b,
 				className: t.description,
 				children: u
 			}),
-			d && /* @__PURE__ */ i("p", {
-				id: b,
+			f && /* @__PURE__ */ i("p", {
+				id: x,
 				role: "alert",
 				className: t.error,
-				children: d
+				children: f
 			})
 		]
 	});
 }
 //#endregion
-export { l as Field };
+export { f as Field };

package/dist/index.d.ts

@@ -3427,6 +3427,12 @@ interface ThemeProviderProps {
   target?: RefObject<HTMLElement | null>;
   /** Called whenever the active theme changes. */
   onChange?: (theme: string) => void;
+  /**
+   * CSP nonce forwarded to the inline attribute-setter script emitted for the
+   * controlled ({@link ThemeProviderProps.value}) SSR flow. Set it to match your
+   * Content-Security-Policy `script-src 'nonce-…'`.
+   */
+  nonce?: string;
   children?: ReactNode;
 }
 /**
@@ -3438,6 +3444,12 @@ interface ThemeProviderProps {
  * - No banned React hooks: the DOM write happens in `useSignalEffect`, not
  *   `useEffect`; there is no `useState`/`useContext`.
  * - Uncontrolled by default (persists to localStorage); pass `value` to control.
+ * - SSR-safe when controlled: with a `value` (and no scoped `target`), the
+ *   provider renders a tiny inline script that sets `data-theme` during HTML
+ *   parsing, so the server-rendered first paint is themed — no flash, no
+ *   hydration mismatch (the same markup renders on both sides; the client effect
+ *   owns every update after hydration). For the uncontrolled/persisted flow, pair
+ *   with {@link themePreloadScript} in `<head>` instead.
  */
 declare function ThemeProvider({
   defaultTheme,
@@ -3446,6 +3458,7 @@ declare function ThemeProvider({
   attribute,
   target,
   onChange,
+  nonce,
   children
 }: ThemeProviderProps): ReactNode;
 /**

package/dist/node/accordion/accordion.js

@@ -0,0 +1,95 @@
+"use client";
+
+import e from "./accordion.module.js";
+import { cn as t, useSignal as n, useSignals as r } from "@cascivo/core";
+import { jsx as i, jsxs as a } from "react/jsx-runtime";
+import { createContext as o, useId as s } from "react";
+//#region ../components/src/accordion/accordion.tsx
+var c = o(null), l = o(null);
+function u(e) {
+	return e === void 0 ? [] : Array.isArray(e) ? e : [e];
+}
+function d({ type: r = "single", defaultValue: a, value: o, onValueChange: l, className: d, children: f }) {
+	let p = s(), m = n(u(o ?? a));
+	o !== void 0 && (m.value = u(o));
+	let h = {
+		open: m,
+		baseId: p,
+		toggle: (e) => {
+			let t = m.value, n;
+			n = r === "multiple" ? t.includes(e) ? t.filter((t) => t !== e) : [...t, e] : t.includes(e) ? [] : [e], o === void 0 && (m.value = n), l?.(r === "multiple" ? n : n[0] ?? "");
+		}
+	};
+	return /* @__PURE__ */ i(c.Provider, {
+		value: h,
+		children: /* @__PURE__ */ i("div", {
+			"data-type": r,
+			className: t(e.accordion, d),
+			children: f
+		})
+	});
+}
+function f({ value: n, className: r, children: a, ...o }) {
+	return /* @__PURE__ */ i(l.Provider, {
+		value: { value: n },
+		children: /* @__PURE__ */ i("div", {
+			"data-value": n,
+			className: t(e.item, r),
+			...o,
+			children: a
+		})
+	});
+}
+function p(e) {
+	return /* @__PURE__ */ i(c.Consumer, { children: (t) => /* @__PURE__ */ i(l.Consumer, { children: (n) => t && n ? /* @__PURE__ */ i(m, {
+		store: t,
+		item: n,
+		...e
+	}) : null }) });
+}
+function m({ store: n, item: o, className: s, children: c, ...l }) {
+	r();
+	let u = n.open.value.includes(o.value);
+	return /* @__PURE__ */ i("h3", {
+		className: e.heading,
+		children: /* @__PURE__ */ a("button", {
+			type: "button",
+			id: `${n.baseId}-trigger-${o.value}`,
+			"aria-expanded": u,
+			"aria-controls": `${n.baseId}-content-${o.value}`,
+			"data-state": u ? "open" : "closed",
+			className: t(e.trigger, s),
+			onClick: () => n.toggle(o.value),
+			...l,
+			children: [/* @__PURE__ */ i("span", { children: c }), /* @__PURE__ */ i("span", {
+				className: e.indicator,
+				"aria-hidden": "true"
+			})]
+		})
+	});
+}
+function h(e) {
+	return /* @__PURE__ */ i(c.Consumer, { children: (t) => /* @__PURE__ */ i(l.Consumer, { children: (n) => t && n ? /* @__PURE__ */ i(g, {
+		store: t,
+		item: n,
+		...e
+	}) : null }) });
+}
+function g({ store: n, item: a, className: o, children: s, ...c }) {
+	r();
+	let l = n.open.value.includes(a.value);
+	return /* @__PURE__ */ i("div", {
+		role: "region",
+		id: `${n.baseId}-content-${a.value}`,
+		"aria-labelledby": `${n.baseId}-trigger-${a.value}`,
+		"data-state": l ? "open" : "closed",
+		className: t(e.content, o),
+		...c,
+		children: /* @__PURE__ */ i("div", {
+			className: e.contentInner,
+			children: s
+		})
+	});
+}
+//#endregion
+export { d as Accordion, h as AccordionContent, f as AccordionItem, p as AccordionTrigger };

package/dist/node/accordion/accordion.module.js

@@ -0,0 +1,13 @@
+"use client";
+
+var e = {
+	accordion: "_accordion_9ch4s_2",
+	item: "_item_9ch4s_10",
+	heading: "_heading_9ch4s_16",
+	trigger: "_trigger_9ch4s_22",
+	indicator: "_indicator_9ch4s_48",
+	content: "_content_9ch4s_62",
+	contentInner: "_contentInner_9ch4s_77"
+};
+//#endregion
+export { e as default };

package/dist/node/action-sheet/action-sheet.js

@@ -0,0 +1,91 @@
+"use client";
+
+import e from "./action-sheet.module.js";
+import { DismissableLayer as t, FocusScope as n, Portal as r, Presence as i, cn as a, useControllableSignal as o, useRovingFocus as s, useSignals as c } from "@cascivo/core";
+import { builtin as l, t as u } from "@cascivo/i18n";
+import { jsx as d, jsxs as f } from "react/jsx-runtime";
+import { useId as p } from "react";
+//#region ../components/src/action-sheet/action-sheet.tsx
+function m({ open: m, defaultOpen: h, onOpenChange: g, actions: _, title: v, description: y, showCancel: b = !0, labels: x, className: S }) {
+	c();
+	let [C, w] = o({
+		value: m,
+		defaultValue: h ?? !1,
+		onChange: g
+	}), T = s({
+		orientation: "vertical",
+		loop: !0
+	}), E = p(), D = p(), O = x?.cancel ?? u(l.actionSheet.cancel), k = x?.label ?? u(l.actionSheet.label), A = (e) => {
+		e.disabled || (e.onSelect(), w(!1));
+	}, j = _.length;
+	return /* @__PURE__ */ d(r, { children: /* @__PURE__ */ d(i, {
+		present: C,
+		children: /* @__PURE__ */ d("div", {
+			className: e.overlay,
+			children: /* @__PURE__ */ d(t, {
+				onDismiss: () => w(!1),
+				children: /* @__PURE__ */ d(n, {
+					trapped: !0,
+					restoreFocus: !0,
+					autoFocus: !0,
+					children: /* @__PURE__ */ f("div", {
+						role: "menu",
+						"aria-label": v ? void 0 : k,
+						"aria-labelledby": v ? E : void 0,
+						"aria-describedby": y ? D : void 0,
+						className: a(e.sheet, S),
+						children: [/* @__PURE__ */ f("div", {
+							className: e.group,
+							children: [(v || y) && /* @__PURE__ */ f("div", {
+								className: e.heading,
+								role: "presentation",
+								children: [v && /* @__PURE__ */ d("p", {
+									id: E,
+									className: e.title,
+									children: v
+								}), y && /* @__PURE__ */ d("p", {
+									id: D,
+									className: e.description,
+									children: y
+								})]
+							}), _.map((t, n) => {
+								let r = T.getItemProps(n);
+								return /* @__PURE__ */ d("button", {
+									ref: r.ref,
+									type: "button",
+									role: "menuitem",
+									tabIndex: r.tabIndex,
+									"aria-disabled": t.disabled || void 0,
+									"data-destructive": t.destructive ? "" : void 0,
+									className: e.item,
+									onKeyDown: r.onKeyDown,
+									onFocus: r.onFocus,
+									onClick: () => A(t),
+									children: t.label
+								}, n);
+							})]
+						}), b && /* @__PURE__ */ d("div", {
+							className: e.group,
+							children: (() => {
+								let t = T.getItemProps(j);
+								return /* @__PURE__ */ d("button", {
+									ref: t.ref,
+									type: "button",
+									role: "menuitem",
+									tabIndex: t.tabIndex,
+									className: a(e.item, e.cancel),
+									onKeyDown: t.onKeyDown,
+									onFocus: t.onFocus,
+									onClick: () => w(!1),
+									children: O
+								});
+							})()
+						})]
+					})
+				})
+			})
+		})
+	}) });
+}
+//#endregion
+export { m as ActionSheet };

package/dist/node/action-sheet/action-sheet.module.js

@@ -0,0 +1,14 @@
+"use client";
+
+var e = {
+	overlay: "_overlay_17irl_2",
+	sheet: "_sheet_17irl_28",
+	group: "_group_17irl_50",
+	heading: "_heading_17irl_60",
+	title: "_title_17irl_66",
+	description: "_description_17irl_73",
+	item: "_item_17irl_79",
+	cancel: "_cancel_17irl_119"
+};
+//#endregion
+export { e as default };

package/dist/node/alert/alert.js

@@ -0,0 +1,55 @@
+"use client";
+
+import e from "./alert.module.js";
+import { cn as t, useSignal 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/alert/alert.tsx
+var c = new Set(["warning", "destructive"]);
+function l({ variant: l = "default", title: u, icon: d, dismissible: f = !1, onDismiss: p, action: m, className: h, children: g, ..._ }) {
+	r();
+	let v = n(!1);
+	return v.value ? null : /* @__PURE__ */ s("div", {
+		role: c.has(l) ? "alert" : "status",
+		"data-variant": l,
+		className: t(e.alert, h),
+		..._,
+		children: [
+			d && /* @__PURE__ */ o("span", {
+				className: e.icon,
+				"aria-hidden": "true",
+				children: d
+			}),
+			/* @__PURE__ */ s("div", {
+				className: e.body,
+				children: [
+					u && /* @__PURE__ */ o("div", {
+						className: e.title,
+						children: u
+					}),
+					g && /* @__PURE__ */ o("div", {
+						className: e.content,
+						children: g
+					}),
+					m && /* @__PURE__ */ o("button", {
+						type: "button",
+						className: e.action,
+						onClick: m.onClick,
+						children: m.label
+					})
+				]
+			}),
+			f && /* @__PURE__ */ o("button", {
+				type: "button",
+				className: e.dismiss,
+				"aria-label": a(i.alert.dismiss),
+				onClick: () => {
+					v.value = !0, p?.();
+				},
+				children: "✕"
+			})
+		]
+	});
+}
+//#endregion
+export { l as Alert };

package/dist/node/alert/alert.module.js

@@ -0,0 +1,13 @@
+"use client";
+
+var e = {
+	alert: "_alert_a2dn2_2",
+	icon: "_icon_a2dn2_18",
+	title: "_title_a2dn2_19",
+	body: "_body_a2dn2_90",
+	content: "_content_a2dn2_104",
+	action: "_action_a2dn2_110",
+	dismiss: "_dismiss_a2dn2_149"
+};
+//#endregion
+export { e as default };

package/dist/node/alert-dialog/alert-dialog.js

@@ -0,0 +1,68 @@
+"use client";
+
+import e from "./alert-dialog.module.js";
+import { useId as t, useSignal as n, useSignalEffect 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";
+import { useRef as c } from "react";
+//#region ../components/src/alert-dialog/alert-dialog.tsx
+function l({ open: l, title: u, description: d, onConfirm: f, onCancel: p, labels: m, variant: h = "default" }) {
+	let g = c(null), _ = t("cascivo-alert-dialog-title"), v = t("cascivo-alert-dialog-desc"), y = n(l);
+	y.value = l;
+	let b = c(null), x = c(p);
+	x.current = p;
+	let S = c(f);
+	return S.current = f, r(() => {
+		let e = g.current;
+		if (e) if (y.value) {
+			try {
+				e.showPopover();
+			} catch {}
+			requestAnimationFrame(() => b.current?.focus());
+		} else try {
+			e.hidePopover();
+		} catch {}
+	}), /* @__PURE__ */ o("div", {
+		ref: g,
+		popover: "manual",
+		role: "alertdialog",
+		"aria-modal": "true",
+		"aria-labelledby": _,
+		"aria-describedby": v,
+		"data-state": l ? "open" : "closed",
+		"data-variant": h,
+		className: e.dialog,
+		children: /* @__PURE__ */ s("div", {
+			className: e.content,
+			children: [
+				/* @__PURE__ */ o("p", {
+					id: _,
+					className: e.title,
+					children: u
+				}),
+				/* @__PURE__ */ o("p", {
+					id: v,
+					className: e.description,
+					children: d
+				}),
+				/* @__PURE__ */ s("div", {
+					className: e.actions,
+					children: [/* @__PURE__ */ o("button", {
+						ref: b,
+						type: "button",
+						className: e.cancel,
+						onClick: () => x.current(),
+						children: m?.cancel ?? a(i.alertDialog.cancel)
+					}), /* @__PURE__ */ o("button", {
+						type: "button",
+						className: e.confirm,
+						onClick: () => S.current(),
+						children: m?.confirm ?? a(i.alertDialog.confirm)
+					})]
+				})
+			]
+		})
+	});
+}
+//#endregion
+export { l as AlertDialog };

package/dist/node/alert-dialog/alert-dialog.module.js

@@ -0,0 +1,13 @@
+"use client";
+
+var e = {
+	dialog: "_dialog_1net6_2",
+	content: "_content_1net6_58",
+	title: "_title_1net6_71",
+	description: "_description_1net6_78",
+	actions: "_actions_1net6_84",
+	cancel: "_cancel_1net6_123",
+	confirm: "_confirm_1net6_124"
+};
+//#endregion
+export { e as default };

package/dist/node/app-shell/app-shell.js

@@ -0,0 +1,80 @@
+"use client";
+
+import e from "./app-shell.module.js";
+import { cn as t, useSignal as n, useSignalEffect as r, useSignals as i } from "@cascivo/core";
+import { Fragment as a, jsx as o, jsxs as s } from "react/jsx-runtime";
+import { cloneElement as c, isValidElement as l, useRef as u } from "react";
+//#region ../components/src/app-shell/app-shell.tsx
+function d({ header: d, nav: f, children: p, footer: m, open: h, defaultOpen: g, onOpenChange: _, className: v }) {
+	i();
+	let y = h !== void 0, b = n(h ?? g ?? !0);
+	y && (b.value = h);
+	let x = u(null), S = u(null);
+	function C(e) {
+		y || (b.value = e), _?.(e);
+	}
+	function w() {
+		typeof document < "u" && (S.current = document.activeElement), C(!b.value);
+	}
+	r(() => {
+		y || g !== void 0 || typeof window > "u" || typeof window.matchMedia != "function" || window.matchMedia("(max-width: 63.999rem)").matches && (b.value = !1);
+	}), r(() => {
+		if (!b.value || typeof document > "u") return;
+		let e = (e) => {
+			e.key === "Escape" && C(!1);
+		};
+		return document.addEventListener("keydown", e), () => document.removeEventListener("keydown", e);
+	}), r(() => {
+		let e = x.current;
+		if (e) if (b.value) e.removeAttribute("inert");
+		else {
+			e.setAttribute("inert", "");
+			let t = S.current;
+			t && e.contains(document.activeElement) && t.focus();
+		}
+	});
+	let T = l(d) && f ? c(d, {
+		onMenuClick: w,
+		menuExpanded: b.value
+	}) : d;
+	return /* @__PURE__ */ s("div", {
+		className: t(e.shell, v),
+		"data-open": b.value,
+		children: [
+			/* @__PURE__ */ o("div", {
+				className: e.header,
+				children: T
+			}),
+			/* @__PURE__ */ s("div", {
+				className: e.body,
+				children: [f && /* @__PURE__ */ s(a, { children: [/* @__PURE__ */ o("div", {
+					ref: x,
+					className: e.navWrapper,
+					"data-open": b.value,
+					"data-testid": "app-shell-nav",
+					children: /* @__PURE__ */ o("div", {
+						className: e.navInner,
+						children: f
+					})
+				}), /* @__PURE__ */ o("div", {
+					className: e.scrim,
+					"data-open": b.value,
+					"data-testid": "app-shell-scrim",
+					"aria-hidden": "true",
+					onClick: () => C(!1)
+				})] }), /* @__PURE__ */ o("main", {
+					id: "cascade-main",
+					tabIndex: -1,
+					className: e.main,
+					children: p
+				})]
+			}),
+			m && /* @__PURE__ */ o("div", {
+				className: e.footer,
+				children: m
+			})
+		]
+	});
+}
+//#endregion
+export { d as AppShell };

package/dist/node/app-shell/app-shell.module.js

@@ -0,0 +1,14 @@
+"use client";
+
+var e = {
+	shell: "_shell_11je2_4",
+	header: "_header_11je2_16",
+	body: "_body_11je2_21",
+	navWrapper: "_navWrapper_11je2_32",
+	navInner: "_navInner_11je2_58",
+	scrim: "_scrim_11je2_70",
+	main: "_main_11je2_87",
+	footer: "_footer_11je2_93"
+};
+//#endregion
+export { e as default };

package/dist/node/aspect-ratio/aspect-ratio.js

@@ -0,0 +1,22 @@
+"use client";
+
+import e from "./aspect-ratio.module.js";
+import { cn as t } from "@cascivo/core";
+import { jsx as n } from "react/jsx-runtime";
+//#region ../components/src/aspect-ratio/aspect-ratio.tsx
+function r({ ratio: r = 16 / 9, className: i, style: a, children: o, ...s }) {
+	return /* @__PURE__ */ n("div", {
+		className: t(e.root, i),
+		style: {
+			"--cascivo-aspect-ratio": r,
+			...a
+		},
+		...s,
+		children: /* @__PURE__ */ n("div", {
+			className: e.inner,
+			children: o
+		})
+	});
+}
+//#endregion
+export { r as AspectRatio };

package/dist/node/aspect-ratio/aspect-ratio.module.js

@@ -0,0 +1,8 @@
+"use client";
+
+var e = {
+	root: "_root_5ltw4_2",
+	inner: "_inner_5ltw4_8"
+};
+//#endregion
+export { e as default };