@cascivo/react 0.14.0 → 0.16.1

package/README.md

@@ -249,7 +249,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
 
@@ -282,6 +282,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
@@ -293,6 +294,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
 
@@ -353,6 +355,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
@@ -381,6 +384,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
@@ -397,8 +401,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.
@@ -427,6 +431,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
@@ -443,7 +448,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/accordion/accordion.css

@@ -1 +1 @@
-@layer cascivo.component{._accordion_9ch4s_2{border:1px solid var(--cascivo-color-border);border-radius:var(--cascivo-radius-surface);flex-direction:column;display:flex;overflow:hidden}._item_9ch4s_10:not(:last-child){border-block-end:1px solid var(--cascivo-color-border)}._heading_9ch4s_16{font-size:inherit;font-weight:inherit;margin:0}._trigger_9ch4s_22{justify-content:space-between;align-items:center;gap:var(--cascivo-space-3);inline-size:100%;padding:var(--cascivo-space-4);font-family:var(--cascivo-font-sans);font-size:var(--cascivo-text-sm);font-weight:var(--cascivo-font-medium);text-align:start;color:var(--cascivo-color-text);cursor:pointer;background:0 0;border:none;display:flex}._trigger_9ch4s_22:hover{background-color:var(--cascivo-color-bg-subtle)}._trigger_9ch4s_22:focus-visible{box-shadow:var(--cascivo-focus-ring);outline:none}._indicator_9ch4s_48{block-size:.75rem;inline-size:.75rem;transition:rotate var(--cascivo-duration-200) var(--cascivo-ease-out);background-color:currentColor;flex-shrink:0;-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round' d='M4 6l4 4 4-4'/%3E%3C/svg%3E") 50%/contain no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round' d='M4 6l4 4 4-4'/%3E%3C/svg%3E") 50%/contain no-repeat}._trigger_9ch4s_22[data-state=open] ._indicator_9ch4s_48{rotate:180deg}._content_9ch4s_62{visibility:hidden;color:var(--cascivo-color-text);transition:grid-template-rows var(--cascivo-duration-200) var(--cascivo-ease-out), visibility var(--cascivo-duration-200) var(--cascivo-ease-out);grid-template-rows:0fr;display:grid}._content_9ch4s_62[data-state=open]{visibility:visible;grid-template-rows:1fr}._contentInner_9ch4s_77{font-family:var(--cascivo-font-sans);font-size:var(--cascivo-text-sm);color:var(--cascivo-color-text-subtle);line-height:var(--cascivo-leading-relaxed);overflow:hidden}._content_9ch4s_62[data-state=open] ._contentInner_9ch4s_77{padding-inline:var(--cascivo-space-4);padding-block-end:var(--cascivo-space-4)}}@media (forced-colors:active){._accordion_9ch4s_2{border:1px solid buttontext}._trigger_9ch4s_22:focus-visible{outline-offset:2px;outline:2px solid highlight}}
+@layer cascivo.component{._accordion_1t08g_2{border:1px solid var(--cascivo-color-border);border-radius:var(--cascivo-radius-surface);flex-direction:column;display:flex;overflow:hidden}._item_1t08g_10:not(:last-child){border-block-end:1px solid var(--cascivo-color-border)}._heading_1t08g_16{font-size:inherit;font-weight:inherit;margin:0}._trigger_1t08g_22{justify-content:space-between;align-items:center;gap:var(--cascivo-space-3);inline-size:100%;padding:var(--cascivo-space-4);font-family:var(--cascivo-font-sans);font-size:var(--cascivo-text-sm);font-weight:var(--cascivo-font-medium);text-align:start;color:var(--cascivo-color-text);cursor:pointer;background:0 0;list-style:none;display:flex}._trigger_1t08g_22::-webkit-details-marker{display:none}._trigger_1t08g_22:hover{background-color:var(--cascivo-color-bg-subtle)}._trigger_1t08g_22:focus-visible{box-shadow:var(--cascivo-focus-ring);outline:none}._indicator_1t08g_54{block-size:.75rem;inline-size:.75rem;transition:rotate var(--cascivo-duration-200) var(--cascivo-ease-out);background-color:currentColor;flex-shrink:0;-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round' d='M4 6l4 4 4-4'/%3E%3C/svg%3E") 50%/contain no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round' d='M4 6l4 4 4-4'/%3E%3C/svg%3E") 50%/contain no-repeat}._item_1t08g_10[open] ._indicator_1t08g_54{rotate:180deg}._item_1t08g_10::details-content{block-size:0;color:var(--cascivo-color-text);transition:block-size var(--cascivo-duration-200) var(--cascivo-ease-out), content-visibility var(--cascivo-duration-200) allow-discrete;overflow:hidden}._item_1t08g_10[open]::details-content{block-size:auto;block-size:calc-size(auto, size)}._content_1t08g_92{padding-inline:var(--cascivo-space-4);font-family:var(--cascivo-font-sans);font-size:var(--cascivo-text-sm);color:var(--cascivo-color-text-subtle);line-height:var(--cascivo-leading-relaxed);padding-block-end:var(--cascivo-space-4)}}@media (prefers-reduced-motion:reduce){._item_1t08g_10::details-content{transition:none}}@media (forced-colors:active){._accordion_1t08g_2{border:1px solid buttontext}._trigger_1t08g_22:focus-visible{outline-offset:2px;outline:2px solid highlight}}

package/dist/accordion/accordion.js

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

package/dist/accordion/accordion.module.js

@@ -1,14 +1,11 @@
-"use client";
-
 import './accordion.css';
 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"
+	accordion: "_accordion_1t08g_2",
+	item: "_item_1t08g_10",
+	heading: "_heading_1t08g_16",
+	trigger: "_trigger_1t08g_22",
+	indicator: "_indicator_1t08g_54",
+	content: "_content_1t08g_92"
 };
 //#endregion
 export { e as default };

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

@@ -1,30 +1,30 @@
 "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 { useId as l } from "react";
+import { useId as t } from "react";
+import { DismissableLayer as n, FocusScope as r, Portal as i, Presence as a, cn as o, useControllableSignal as s, useRovingFocus as c, useSignals as l } from "@cascivo/core";
 import { builtin as u, t as d } from "@cascivo/i18n";
 import { jsx as f, jsxs as p } from "react/jsx-runtime";
 //#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({
+	l();
+	let [C, w] = s({
 		value: m,
 		defaultValue: h ?? !1,
 		onChange: g
-	}), T = s({
+	}), T = c({
 		orientation: "vertical",
 		loop: !0
-	}), E = l(), D = l(), O = x?.cancel ?? d(u.actionSheet.cancel), k = x?.label ?? d(u.actionSheet.label), A = (e) => {
+	}), E = t(), D = t(), O = x?.cancel ?? d(u.actionSheet.cancel), k = x?.label ?? d(u.actionSheet.label), A = (e) => {
 		e.disabled || (e.onSelect(), w(!1));
 	}, j = _.length;
-	return /* @__PURE__ */ f(r, { children: /* @__PURE__ */ f(i, {
+	return /* @__PURE__ */ f(i, { children: /* @__PURE__ */ f(a, {
 		present: C,
 		children: /* @__PURE__ */ f("div", {
 			className: e.overlay,
-			children: /* @__PURE__ */ f(t, {
+			children: /* @__PURE__ */ f(n, {
 				onDismiss: () => w(!1),
-				children: /* @__PURE__ */ f(n, {
+				children: /* @__PURE__ */ f(r, {
 					trapped: !0,
 					restoreFocus: !0,
 					autoFocus: !0,
@@ -33,7 +33,7 @@ function m({ open: m, defaultOpen: h, onOpenChange: g, actions: _, title: v, des
 						"aria-label": v ? void 0 : k,
 						"aria-labelledby": v ? E : void 0,
 						"aria-describedby": y ? D : void 0,
-						className: a(e.sheet, S),
+						className: o(e.sheet, S),
 						children: [/* @__PURE__ */ p("div", {
 							className: e.group,
 							children: [(v || y) && /* @__PURE__ */ p("div", {
@@ -73,7 +73,7 @@ function m({ open: m, defaultOpen: h, onOpenChange: g, actions: _, title: v, des
 									type: "button",
 									role: "menuitem",
 									tabIndex: t.tabIndex,
-									className: a(e.item, e.cancel),
+									className: o(e.item, e.cancel),
 									onKeyDown: t.onKeyDown,
 									onFocus: t.onFocus,
 									onClick: () => w(!1),

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

@@ -1,5 +1,3 @@
-"use client";
-
 import './action-sheet.css';
 var e = {
 	overlay: "_overlay_17irl_2",

package/dist/alert/alert.module.js

@@ -1,5 +1,3 @@
-"use client";
-
 import './alert.css';
 var e = {
 	alert: "_alert_a2dn2_2",

package/dist/alert-dialog/alert-dialog.css

@@ -1 +1 @@
-@layer cascivo.component{._dialog_1net6_2{opacity:1;width:fit-content;height:fit-content;transition:opacity var(--cascivo-motion-enter), scale var(--cascivo-motion-enter), display var(--cascivo-motion-enter) allow-discrete, overlay var(--cascivo-motion-enter) allow-discrete;background:0 0;border:none;margin:auto;padding:0;position:fixed;inset:0;scale:1}@starting-style{._dialog_1net6_2{opacity:0;scale:.95}}._dialog_1net6_2[data-state=closed]{opacity:0;transition:opacity var(--cascivo-motion-exit), scale var(--cascivo-motion-exit), display var(--cascivo-motion-exit) allow-discrete, overlay var(--cascivo-motion-exit) allow-discrete;scale:.95}._dialog_1net6_2::backdrop{-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px);opacity:1;transition:opacity var(--cascivo-motion-enter), display var(--cascivo-motion-enter) allow-discrete, overlay var(--cascivo-motion-enter) allow-discrete;background-color:#00000080}@starting-style{._dialog_1net6_2::backdrop{opacity:0}}._dialog_1net6_2[data-state=closed]::backdrop{opacity:0;transition:opacity var(--cascivo-motion-exit), display var(--cascivo-motion-exit) allow-discrete, overlay var(--cascivo-motion-exit) allow-discrete}._content_1net6_58{width:28rem;max-width:calc(100vw - var(--cascivo-space-8));background:var(--cascivo-color-surface);border:1px solid var(--cascivo-color-border);border-radius:var(--cascivo-radius-overlay);box-shadow:var(--cascivo-shadow-overlay);padding:var(--cascivo-space-6);gap:var(--cascivo-space-2);flex-direction:column;display:flex}._title_1net6_71{font-size:var(--cascivo-text-lg);font-weight:var(--cascivo-font-semibold);color:var(--cascivo-color-text);margin:0}._description_1net6_78{font-size:var(--cascivo-text-sm);color:var(--cascivo-color-text-subtle);margin:0}._actions_1net6_84{justify-content:flex-end;gap:var(--cascivo-space-2);margin-block-start:var(--cascivo-space-4);display:flex}@media (width<=40rem){._dialog_1net6_2{max-block-size:90dvh;margin:0;inset-block-end:0;inset-inline:0}._content_1net6_58{inline-size:100%;max-width:100%;max-block-size:90dvh;border-start-start-radius:var(--cascivo-radius-overlay);border-start-end-radius:var(--cascivo-radius-overlay);border-end-end-radius:0;border-end-start-radius:0;padding-block-end:env(safe-area-inset-bottom,0);overflow-y:auto}}@media (prefers-reduced-motion:reduce){._dialog_1net6_2,._dialog_1net6_2[data-state=closed]{transition:none}}._cancel_1net6_123,._confirm_1net6_124{padding:var(--cascivo-space-2) var(--cascivo-space-4);border-radius:var(--cascivo-radius-control);font-size:var(--cascivo-text-sm);font-weight:var(--cascivo-font-medium);cursor:pointer;transition:background-color var(--cascivo-duration-150) var(--cascivo-ease-out), color var(--cascivo-duration-150) var(--cascivo-ease-out);border:1px solid #0000}:is(._cancel_1net6_123,._confirm_1net6_124):focus-visible{box-shadow:var(--cascivo-focus-ring);outline:none}._cancel_1net6_123{background:var(--cascivo-color-bg-subtle);color:var(--cascivo-color-text);border-color:var(--cascivo-color-border)}._cancel_1net6_123:hover{background:var(--cascivo-color-bg-muted)}._confirm_1net6_124{background:var(--cascivo-color-accent);color:var(--cascivo-color-on-accent)}._confirm_1net6_124:hover{opacity:.9}[data-variant=destructive] ._confirm_1net6_124{background:var(--cascivo-color-destructive);color:var(--cascivo-color-on-destructive)}}
+@layer cascivo.component{._dialog_zou3k_2{opacity:1;width:fit-content;height:fit-content;transition:opacity var(--cascivo-motion-enter), scale var(--cascivo-motion-enter), display var(--cascivo-motion-enter) allow-discrete, overlay var(--cascivo-motion-enter) allow-discrete;background:0 0;border:none;margin:auto;padding:0;position:fixed;inset:0;scale:1}@starting-style{._dialog_zou3k_2{opacity:0;scale:.95}}._dialog_zou3k_2[data-state=closed]{opacity:0;transition:opacity var(--cascivo-motion-exit), scale var(--cascivo-motion-exit), display var(--cascivo-motion-exit) allow-discrete, overlay var(--cascivo-motion-exit) allow-discrete;scale:.95}._dialog_zou3k_2::backdrop{-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px);opacity:1;transition:opacity var(--cascivo-motion-enter), display var(--cascivo-motion-enter) allow-discrete, overlay var(--cascivo-motion-enter) allow-discrete;background-color:#00000080}@starting-style{._dialog_zou3k_2::backdrop{opacity:0}}._dialog_zou3k_2[data-state=closed]::backdrop{opacity:0;transition:opacity var(--cascivo-motion-exit), display var(--cascivo-motion-exit) allow-discrete, overlay var(--cascivo-motion-exit) allow-discrete}._content_zou3k_58{width:28rem;max-width:calc(100vw - var(--cascivo-space-8));background:var(--cascivo-color-surface);border:1px solid var(--cascivo-color-border);border-radius:var(--cascivo-radius-overlay);box-shadow:var(--cascivo-shadow-overlay);padding:var(--cascivo-space-6);gap:var(--cascivo-space-2);flex-direction:column;display:flex}._title_zou3k_71{font-size:var(--cascivo-text-lg);font-weight:var(--cascivo-font-semibold);color:var(--cascivo-color-text);margin:0}._description_zou3k_78{font-size:var(--cascivo-text-sm);color:var(--cascivo-color-text-subtle);margin:0}._actions_zou3k_84{justify-content:flex-end;gap:var(--cascivo-space-2);margin-block-start:var(--cascivo-space-4);display:flex}@media (width<=40rem){._dialog_zou3k_2{max-block-size:90dvh;margin:0;inset-block-end:0;inset-inline:0}._content_zou3k_58{inline-size:100%;max-width:100%;max-block-size:90dvh;border-start-start-radius:var(--cascivo-radius-overlay);border-start-end-radius:var(--cascivo-radius-overlay);border-end-end-radius:0;border-end-start-radius:0;padding-block-end:env(safe-area-inset-bottom,0);overflow-y:auto}}@media (prefers-reduced-motion:reduce){._dialog_zou3k_2,._dialog_zou3k_2[data-state=closed]{transition:none}}._cancel_zou3k_123,._confirm_zou3k_124{padding:var(--cascivo-space-2) var(--cascivo-space-4);border-radius:var(--cascivo-radius-control);font-size:var(--cascivo-text-sm);font-weight:var(--cascivo-font-medium);cursor:pointer;transition:background-color var(--cascivo-duration-150) var(--cascivo-ease-out), color var(--cascivo-duration-150) var(--cascivo-ease-out);border:1px solid #0000}:is(._cancel_zou3k_123,._confirm_zou3k_124):focus-visible{box-shadow:var(--cascivo-focus-ring);outline:none}._cancel_zou3k_123{background:var(--cascivo-color-bg-subtle);color:var(--cascivo-color-text);border-color:var(--cascivo-color-border)}._cancel_zou3k_123:hover{background:var(--cascivo-color-bg-subtle)}._confirm_zou3k_124{background:var(--cascivo-color-accent);color:var(--cascivo-color-text-on-accent)}._confirm_zou3k_124:hover{opacity:.9}[data-variant=destructive] ._confirm_zou3k_124{background:var(--cascivo-color-destructive);color:var(--cascivo-color-text-on-destructive)}}

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

@@ -1,22 +1,22 @@
 "use client";
 
 import e from "./alert-dialog.module.js";
-import { focusElement as t, useEffectPropSignal as n, useId as r, useSignalEffect as i } from "@cascivo/core";
-import { useRef as a } from "react";
+import { useRef as t } from "react";
+import { focusElement as n, useEffectPropSignal as r, useId as i, useSignalEffect as a } from "@cascivo/core";
 import { builtin as o, t as s } from "@cascivo/i18n";
 import { jsx as c, jsxs as l } from "react/jsx-runtime";
 //#region ../components/src/alert-dialog/alert-dialog.tsx
 function u({ open: u, title: d, description: f, onConfirm: p, onCancel: m, labels: h, variant: g = "default" }) {
-	let _ = a(null), v = r("cascivo-alert-dialog-title"), y = r("cascivo-alert-dialog-desc"), b = n(u), x = a(null), S = a(m);
+	let _ = t(null), v = i("cascivo-alert-dialog-title"), y = i("cascivo-alert-dialog-desc"), b = r(u), x = t(null), S = t(m);
 	S.current = m;
-	let C = a(p);
-	return C.current = p, i(() => {
+	let C = t(p);
+	return C.current = p, a(() => {
 		let e = _.current;
 		if (e) if (b.value) {
 			try {
 				e.showPopover();
 			} catch {}
-			requestAnimationFrame(() => t(x.current));
+			requestAnimationFrame(() => n(x.current));
 		} else try {
 			e.hidePopover();
 		} catch {}

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

@@ -1,14 +1,12 @@
-"use client";
-
 import './alert-dialog.css';
 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"
+	dialog: "_dialog_zou3k_2",
+	content: "_content_zou3k_58",
+	title: "_title_zou3k_71",
+	description: "_description_zou3k_78",
+	actions: "_actions_zou3k_84",
+	cancel: "_cancel_zou3k_123",
+	confirm: "_confirm_zou3k_124"
 };
 //#endregion
 export { e as default };

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

@@ -1,30 +1,30 @@
 "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 { cloneElement as a, isValidElement as o, useRef as s } from "react";
+import { cloneElement as t, isValidElement as n, useRef as r } from "react";
+import { cn as i, useSignal as a, useSignalEffect as o, useSignals as s } from "@cascivo/core";
 import { Fragment as c, jsx as l, jsxs as u } from "react/jsx-runtime";
 //#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, ...y }) {
-	i();
-	let b = h !== void 0, x = n(h ?? g ?? !0);
+	s();
+	let b = h !== void 0, x = a(h ?? g ?? !0);
 	b && (x.value = h);
-	let S = s(null), C = s(null);
+	let S = r(null), C = r(null);
 	function w(e) {
 		b || (x.value = e), _?.(e);
 	}
 	function T() {
 		typeof document < "u" && (C.current = document.activeElement), w(!x.value);
 	}
-	r(() => {
+	o(() => {
 		b || g !== void 0 || typeof window > "u" || typeof window.matchMedia != "function" || window.matchMedia("(max-width: 63.999rem)").matches && (x.value = !1);
-	}), r(() => {
+	}), o(() => {
 		if (!x.value || typeof document > "u") return;
 		let e = (e) => {
 			e.key === "Escape" && w(!1);
 		};
 		return document.addEventListener("keydown", e), () => document.removeEventListener("keydown", e);
-	}), r(() => {
+	}), o(() => {
 		let e = S.current;
 		if (e) if (x.value) e.removeAttribute("inert");
 		else {
@@ -33,12 +33,12 @@ function d({ header: d, nav: f, children: p, footer: m, open: h, defaultOpen: g,
 			t && e.contains(document.activeElement) && t.focus();
 		}
 	});
-	let E = o(d) && f ? a(d, {
+	let E = n(d) && f ? t(d, {
 		onMenuClick: T,
 		menuExpanded: x.value
 	}) : d;
 	return /* @__PURE__ */ u("div", {
-		className: t(e.shell, v),
+		className: i(e.shell, v),
 		"data-open": x.value,
 		...y,
 		children: [

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

@@ -1,5 +1,3 @@
-"use client";
-
 import './app-shell.css';
 var e = {
 	shell: "_shell_1y4cv_4",

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

@@ -1,7 +1,5 @@
-"use client";
-
 import e from "./aspect-ratio.module.js";
-import { cn as t } from "@cascivo/core";
+import { cn as t } from "@cascivo/core/pure";
 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 }) {

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

@@ -1,5 +1,3 @@
-"use client";
-
 import './aspect-ratio.css';
 var e = {
 	root: "_root_5ltw4_2",

package/dist/avatar/avatar.module.js

@@ -1,5 +1,3 @@
-"use client";
-
 import './avatar.css';
 var e = {
 	avatar: "_avatar_18xp4_2",

package/dist/avatar-group/avatar-group.js

@@ -1,8 +1,6 @@
-"use client";
-
 import { Avatar as e } from "../avatar/avatar.js";
 import t from "./avatar-group.module.js";
-import { cn as n } from "@cascivo/core";
+import { cn as n } from "@cascivo/core/pure";
 import { Children as r } from "react";
 import { builtin as i, t as a } from "@cascivo/i18n";
 import { jsx as o, jsxs as s } from "react/jsx-runtime";

package/dist/avatar-group/avatar-group.module.js

@@ -1,5 +1,3 @@
-"use client";
-
 import './avatar-group.css';
 var e = {
 	group: "_group_il139_2",

package/dist/badge/badge.js

@@ -1,11 +1,9 @@
-"use client";
-
 import e from "./badge.module.js";
-import { cn as t, normalizeTone as n } from "@cascivo/core";
+import { cn as t, normalizeTone as n } from "@cascivo/core/pure";
 import { jsx as r } from "react/jsx-runtime";
 //#region ../components/src/badge/badge.tsx
 var i = {
-	neutral: "default",
+	neutral: "secondary",
 	info: "info",
 	success: "success",
 	warning: "warning",

package/dist/badge/badge.module.js

@@ -1,5 +1,3 @@
-"use client";
-
 import './badge.css';
 var e = { badge: "_badge_beiqa_2" };
 //#endregion

package/dist/blockquote/blockquote.js

@@ -1,7 +1,5 @@
-"use client";
-
 import e from "./blockquote.module.js";
-import { cn as t } from "@cascivo/core";
+import { cn as t } from "@cascivo/core/pure";
 import { jsx as n, jsxs as r } from "react/jsx-runtime";
 //#region ../components/src/blockquote/blockquote.tsx
 function i({ cite: i, className: a, children: o, ...s }) {

package/dist/blockquote/blockquote.module.js

@@ -1,5 +1,3 @@
-"use client";
-
 import './blockquote.css';
 var e = {
 	blockquote: "_blockquote_ja266_2",

package/dist/bottom-sheet/bottom-sheet.js

@@ -1,25 +1,25 @@
 "use client";
 
 import e from "./bottom-sheet.module.js";
-import { DismissableLayer as t, FocusScope as n, Portal as r, Presence as i, cn as a, useControllableSignal as o, useDraggable as s, useScrollLock as c, useSignals as l } from "@cascivo/core";
-import { useId as u } from "react";
+import { useId as t } from "react";
+import { DismissableLayer as n, FocusScope as r, Portal as i, Presence as a, cn as o, useControllableSignal as s, useDraggable as c, useScrollLock as l, useSignals as u } from "@cascivo/core";
 import { builtin as d, t as f } from "@cascivo/i18n";
 import { jsx as p, jsxs as m } from "react/jsx-runtime";
 //#region ../components/src/bottom-sheet/bottom-sheet.tsx
 var h = 120, g = .6, _ = .1, v = [.5, .92];
 function y({ open: y, defaultOpen: b, onOpenChange: x, snapPoints: S = v, activeSnap: C, defaultSnap: w = 0, onSnapChange: T, title: E, description: D, children: O, labels: k, className: A }) {
-	l();
-	let [j, M] = o({
+	u();
+	let [j, M] = s({
 		value: y,
 		defaultValue: b ?? !1,
 		onChange: x
-	}), [N, P] = o({
+	}), [N, P] = s({
 		value: C,
 		defaultValue: w,
 		onChange: T
 	});
-	c(j);
-	let F = S, I = F[F.length - 1] ?? 1, L = F[0] ?? 0, R = F[Math.min(N.value, F.length - 1)] ?? I, { handleRef: z, offset: B, velocity: V, isDragging: H, reset: U } = s({
+	l(j);
+	let F = S, I = F[F.length - 1] ?? 1, L = F[0] ?? 0, R = F[Math.min(N.value, F.length - 1)] ?? I, { handleRef: z, offset: B, velocity: V, isDragging: H, reset: U } = c({
 		axis: "y",
 		onDragEnd: (e) => {
 			let t = typeof window > "u" ? 0 : window.innerHeight, n = V.value.y;
@@ -33,18 +33,18 @@ function y({ open: y, defaultOpen: b, onOpenChange: x, snapPoints: S = v, active
 			for (let e = 1; e < F.length; e++) Math.abs((F[e] ?? 0) - r) < Math.abs((F[i] ?? 0) - r) && (i = e);
 			P(i);
 		}
-	}), W = u(), G = u(), K = k?.close ?? f(d.bottomSheet.close), q = k?.handle ?? f(d.bottomSheet.handle), J = `${(1 - R / I) * 100}%`, Y = {
+	}), W = t(), G = t(), K = k?.close ?? f(d.bottomSheet.close), q = k?.handle ?? f(d.bottomSheet.handle), J = `${(1 - R / I) * 100}%`, Y = {
 		"--_sheet-height": `${I * 100}dvh`,
 		"--_sheet-y": J,
 		"--_sheet-drag": `${B.value.y}px`
 	};
-	return /* @__PURE__ */ p(r, { children: /* @__PURE__ */ p(i, {
+	return /* @__PURE__ */ p(i, { children: /* @__PURE__ */ p(a, {
 		present: j,
 		children: /* @__PURE__ */ p("div", {
 			className: e.overlay,
-			children: /* @__PURE__ */ p(t, {
+			children: /* @__PURE__ */ p(n, {
 				onDismiss: () => M(!1),
-				children: /* @__PURE__ */ p(n, {
+				children: /* @__PURE__ */ p(r, {
 					trapped: !0,
 					restoreFocus: !0,
 					autoFocus: !0,
@@ -54,7 +54,7 @@ function y({ open: y, defaultOpen: b, onOpenChange: x, snapPoints: S = v, active
 						"aria-labelledby": E ? W : void 0,
 						"aria-describedby": D ? G : void 0,
 						"data-dragging": H.value ? "" : void 0,
-						className: a(e.panel, A),
+						className: o(e.panel, A),
 						style: Y,
 						children: [/* @__PURE__ */ m("div", {
 							className: e.header,