@cascivo/react 0.11.0 → 0.12.0

package/dist/react/src/index.js

@@ -73,66 +73,66 @@ import { CheckboxCard as He } from "../../checkbox-card/checkbox-card.js";
 import { CopyButton as Ue } from "../../copy-button/copy-button.js";
 import { Stat as We } from "../../stat/stat.js";
 import { Status as Ge } from "../../status/status.js";
-import { VisuallyHidden as Ke } from "../../visually-hidden/visually-hidden.js";
-import { SkipNavLink as qe, SkipNavTarget as Je } from "../../skip-nav/skip-nav.js";
-import { Progress as Ye } from "../../progress/progress.js";
-import { ProgressCircle as Xe } from "../../progress-circle/progress-circle.js";
-import { Heading as Ze } from "../../heading/heading.js";
-import { Text as Qe } from "../../text/text.js";
-import { Code as $e } from "../../code/code.js";
-import { Blockquote as et } from "../../blockquote/blockquote.js";
-import { List as tt, ListItem as nt } from "../../list/list.js";
-import { LogViewer as rt } from "../../log-viewer/log-viewer.js";
-import { Prose as it } from "../../prose/prose.js";
-import { PullToRefresh as at } from "../../pull-to-refresh/pull-to-refresh.js";
-import { QrCode as ot } from "../../qr-code/qr-code.js";
-import { RelativeTime as st } from "../../relative-time/relative-time.js";
-import { Label as ct } from "../../label/label.js";
-import { Field as lt } from "../../field/field.js";
-import { Filter as ut } from "../../filter/filter.js";
-import { IconButton as dt } from "../../icon-button/icon-button.js";
-import { ButtonGroup as ft } from "../../button-group/button-group.js";
-import { ToggleGroup as pt } from "../../toggle-group/toggle-group.js";
-import { InlineLoading as mt } from "../../inline-loading/inline-loading.js";
-import { Notification as ht } from "../../notification/notification.js";
-import { ScrollArea as gt } from "../../scroll-area/scroll-area.js";
-import { Collapsible as _t } from "../../collapsible/collapsible.js";
-import { AspectRatio as vt } from "../../aspect-ratio/aspect-ratio.js";
-import { MenuButton as yt } from "../../menu-button/menu-button.js";
-import { Toggletip as bt } from "../../toggletip/toggletip.js";
-import { Menubar as xt } from "../../menubar/menubar.js";
-import { NavigationMenu as St } from "../../navigation-menu/navigation-menu.js";
-import { TreeView as Ct, treeViewMessages as wt } from "../../tree-view/tree-view.js";
-import { StructuredList as Tt } from "../../structured-list/structured-list.js";
-import { ContainedList as Et, ContainedListItem as Dt } from "../../contained-list/contained-list.js";
-import { DataList as Ot } from "../../data-list/data-list.js";
-import { Timeline as kt } from "../../timeline/timeline.js";
-import { Item as At, ItemActions as jt, ItemContent as Mt, ItemDescription as Nt, ItemMedia as Pt, ItemTitle as Ft } from "../../item/item.js";
-import { Calendar as It } from "../../calendar/calendar.js";
-import { DateRangePicker as Lt } from "../../date-range-picker/date-range-picker.js";
-import { ColorPicker as Rt } from "../../color-picker/color-picker.js";
-import { Carousel as zt } from "../../carousel/carousel.js";
-import { Resizable as Bt } from "../../resizable/resizable.js";
-import { Dock as Vt } from "../../dock/dock.js";
-import { Drawer as Ht } from "../../drawer/drawer.js";
-import { NativeSelect as Ut } from "../../native-select/native-select.js";
-import { CodeSnippet as Wt } from "../../code-snippet/code-snippet.js";
-import { Steps as Gt } from "../../steps/steps.js";
-import { Tile as Kt } from "../../tile/tile.js";
-import { Indicator as qt } from "../../indicator/indicator.js";
-import { Join as Jt } from "../../join/join.js";
-import { Stack as Yt } from "../../stack/stack.js";
-import { AppShell as Xt } from "../../app-shell/app-shell.js";
-import { ChatBubble as Zt } from "../../chat-bubble/chat-bubble.js";
-import { RadialProgress as Qt } from "../../radial-progress/radial-progress.js";
-import { Swap as $t } from "../../swap/swap.js";
-import { SwipeItem as en } from "../../swipe-item/swipe-item.js";
-import { Grid as tn, GridItem as nn } from "../../layouts/src/grid/grid.js";
-import { Flex as rn } from "../../layouts/src/flex/flex.js";
-import { Columns as an } from "../../layouts/src/columns/columns.js";
-import { Center as on } from "../../layouts/src/center/center.js";
-import { Spacer as sn } from "../../layouts/src/spacer/spacer.js";
-import { AutoGrid as cn } from "../../layouts/src/auto-grid/auto-grid.js";
-import { ThemeProvider as ln, setTheme as un, themePreloadScript as dn, themeSignal as fn, useTheme as pn } from "./theme.js";
-import { ErrorBoundary as mn, FocusScope as hn, Portal as gn, SuspenseBoundary as _n, getLinkComponent as vn, setLinkComponent as yn } from "@cascivo/core";
-export { M as Accordion, N as AccordionContent, P as AccordionItem, F as AccordionTrigger, I as ActionSheet, d as Alert, ye as AlertDialog, Xt as AppShell, vt as AspectRatio, cn as AutoGrid, f as Avatar, p as AvatarGroup, c as Badge, et as Blockquote, xe as BottomSheet, z as Breadcrumb, t as Button, ft as ButtonGroup, It as Calendar, r as Card, i as CardContent, a as CardFooter, o as CardHeader, s as CardTitle, zt as Carousel, on as Center, Zt as ChatBubble, v as Checkbox, He as CheckboxCard, $e as Code, Wt as CodeSnippet, _t as Collapsible, Rt as ColorPicker, an as Columns, ce as Combobox, ne as CommandMenu, we as Comparison, Et as ContainedList, Dt as ContainedListItem, Se as ContextMenu, Ce as ContextMenuItem, Ue as CopyButton, Ot as DataList, te as DataTable, le as DatePicker, Lt as DateRangePicker, Vt as Dock, Ht as Drawer, w as Dropdown, Ie as Editable, X as EmptyState, mn as ErrorBoundary, Z as Fab, lt as Field, ue as FileUploader, ut as Filter, rn as Flex, hn as FocusScope, ae as Form, tn as Grid, nn as GridItem, H as Header, Be as HeaderPanel, Ze as Heading, Te as HoverCard, Ee as HoverCardContent, De as HoverCardTrigger, dt as IconButton, h as Image, qt as Indicator, mt as InlineLoading, n as Input, Ne as InputGroup, Pe as InputGroupAddon, At as Item, jt as ItemActions, Mt as ItemContent, Nt as ItemDescription, Pt as ItemMedia, Ft as ItemTitle, Jt as Join, L as Kbd, ct as Label, R as Link, tt as List, nt as ListItem, rt as LogViewer, he as Menu, yt as MenuButton, ge as MenuItem, _e as MenuSeparator, ve as MenuTrigger, xt as Menubar, l as Modal, ke as MultiSelect, Ut as NativeSelect, St as NavigationMenu, ht as Notification, ee as NumberInput, je as OtpInput, Q as OverflowMenu, G as Pagination, Oe as PasswordInput, fe as Popover, pe as PopoverContent, me as PopoverTrigger, gn as Portal, Ye as Progress, Y as ProgressBar, Xe as ProgressCircle, K as ProgressIndicator, it as Prose, at as PullToRefresh, ot as QrCode, Qt as RadialProgress, y as Radio, Le as RadioCard, Re as RadioCardGroup, b as RadioGroup, Fe as RatingGroup, st as RelativeTime, Bt as Resizable, gt as ScrollArea, $ as Search, Me as SegmentedControl, _ as Select, u as Separator, be as Sheet, ze as ShellHeader, W as SideNav, J as Skeleton, qe as SkipNavLink, Je as SkipNavTarget, S as Slider, sn as Spacer, e as Spinner, Yt as Stack, We as Stat, Ge as Status, Gt as Steps, Tt as StructuredList, _n as SuspenseBoundary, $t as Swap, en as SwipeItem, Ve as Switcher, O as Tabs, k as TabsContent, A as TabsList, j as TabsTrigger, q as Tag, Ae as TagsInput, Qe as Text, g as Textarea, ln as ThemeProvider, Kt as Tile, de as TimePicker, kt as Timeline, T as ToastProvider, B as Toc, x as Toggle, pt as ToggleGroup, bt as Toggletip, C as Tooltip, Ct as TreeView, m as User, Ke as VisuallyHidden, oe as createForm, E as dismissAllToasts, re as fuzzyMatch, ie as fuzzyScore, vn as getLinkComponent, yn as setLinkComponent, un as setTheme, dn as themePreloadScript, fn as themeSignal, wt as treeViewMessages, se as useForm, U as usePopover, pn as useTheme, D as useToast, V as useTocFromRegion };
+import "../../visually-hidden/visually-hidden.js";
+import { SkipNavLink as Ke, SkipNavTarget as qe } from "../../skip-nav/skip-nav.js";
+import { Progress as Je } from "../../progress/progress.js";
+import { ProgressCircle as Ye } from "../../progress-circle/progress-circle.js";
+import { Heading as Xe } from "../../heading/heading.js";
+import { Text as Ze } from "../../text/text.js";
+import { Code as Qe } from "../../code/code.js";
+import { Blockquote as $e } from "../../blockquote/blockquote.js";
+import { List as et, ListItem as tt } from "../../list/list.js";
+import { LogViewer as nt } from "../../log-viewer/log-viewer.js";
+import { Prose as rt } from "../../prose/prose.js";
+import { PullToRefresh as it } from "../../pull-to-refresh/pull-to-refresh.js";
+import { QrCode as at } from "../../qr-code/qr-code.js";
+import { RelativeTime as ot } from "../../relative-time/relative-time.js";
+import { Label as st } from "../../label/label.js";
+import { Field as ct } from "../../field/field.js";
+import { Filter as lt } from "../../filter/filter.js";
+import { IconButton as ut } from "../../icon-button/icon-button.js";
+import { ButtonGroup as dt } from "../../button-group/button-group.js";
+import { ToggleGroup as ft } from "../../toggle-group/toggle-group.js";
+import { InlineLoading as pt } from "../../inline-loading/inline-loading.js";
+import { Notification as mt } from "../../notification/notification.js";
+import { ScrollArea as ht } from "../../scroll-area/scroll-area.js";
+import { Collapsible as gt } from "../../collapsible/collapsible.js";
+import { AspectRatio as _t } from "../../aspect-ratio/aspect-ratio.js";
+import { MenuButton as vt } from "../../menu-button/menu-button.js";
+import { Toggletip as yt } from "../../toggletip/toggletip.js";
+import { Menubar as bt } from "../../menubar/menubar.js";
+import { NavigationMenu as xt } from "../../navigation-menu/navigation-menu.js";
+import { TreeView as St, treeViewMessages as Ct } from "../../tree-view/tree-view.js";
+import { StructuredList as wt } from "../../structured-list/structured-list.js";
+import { ContainedList as Tt, ContainedListItem as Et } from "../../contained-list/contained-list.js";
+import { DataList as Dt } from "../../data-list/data-list.js";
+import { Timeline as Ot } from "../../timeline/timeline.js";
+import { Item as kt, ItemActions as At, ItemContent as jt, ItemDescription as Mt, ItemMedia as Nt, ItemTitle as Pt } from "../../item/item.js";
+import { Calendar as Ft } from "../../calendar/calendar.js";
+import { DateRangePicker as It } from "../../date-range-picker/date-range-picker.js";
+import { ColorPicker as Lt } from "../../color-picker/color-picker.js";
+import { Carousel as Rt } from "../../carousel/carousel.js";
+import { Resizable as zt } from "../../resizable/resizable.js";
+import { Dock as Bt } from "../../dock/dock.js";
+import { Drawer as Vt } from "../../drawer/drawer.js";
+import { NativeSelect as Ht } from "../../native-select/native-select.js";
+import { CodeSnippet as Ut } from "../../code-snippet/code-snippet.js";
+import { Steps as Wt } from "../../steps/steps.js";
+import { Tile as Gt } from "../../tile/tile.js";
+import { Indicator as Kt } from "../../indicator/indicator.js";
+import { Join as qt } from "../../join/join.js";
+import { Stack as Jt } from "../../stack/stack.js";
+import { AppShell as Yt } from "../../app-shell/app-shell.js";
+import { ChatBubble as Xt } from "../../chat-bubble/chat-bubble.js";
+import { RadialProgress as Zt } from "../../radial-progress/radial-progress.js";
+import { Swap as Qt } from "../../swap/swap.js";
+import { SwipeItem as $t } from "../../swipe-item/swipe-item.js";
+import { Grid as en, GridItem as tn } from "../../layouts/src/grid/grid.js";
+import { Flex as nn } from "../../layouts/src/flex/flex.js";
+import { Columns as rn } from "../../layouts/src/columns/columns.js";
+import { Center as an } from "../../layouts/src/center/center.js";
+import { Spacer as on } from "../../layouts/src/spacer/spacer.js";
+import { AutoGrid as sn } from "../../layouts/src/auto-grid/auto-grid.js";
+import { ThemeProvider as cn, setTheme as ln, themePreloadScript as un, themeSignal as dn, useTheme as fn } from "./theme.js";
+import { DismissableLayer as pn, ErrorBoundary as mn, FocusScope as hn, Portal as gn, Presence as _n, Slot as vn, SuspenseBoundary as yn, VisuallyHidden as bn, batch as xn, cn as Sn, composeRefs as Cn, computePosition as wn, computed as Tn, createMachine as En, createScope as Dn, createStreamBuffer as On, effect as kn, getLinkComponent as An, mergeProps as jn, setLinkComponent as Mn, signal as Nn, useAnchorPosition as Pn, useClipboard as Fn, useComputed as In, useControllableSignal as Ln, useDisclosure as Rn, useEffectPropSignal as zn, useId as Bn, useMachine as Vn, useMediaQuery as Hn, useRovingFocus as Un, useScope as Wn, useScrollLock as Gn, useSignal as Kn, useSignalEffect as qn, useSignals as Jn, useStreamBuffer as Yn, useTypeahead as Xn } from "@cascivo/core";
+export { M as Accordion, N as AccordionContent, P as AccordionItem, F as AccordionTrigger, I as ActionSheet, d as Alert, ye as AlertDialog, Yt as AppShell, _t as AspectRatio, sn as AutoGrid, f as Avatar, p as AvatarGroup, c as Badge, $e as Blockquote, xe as BottomSheet, z as Breadcrumb, t as Button, dt as ButtonGroup, Ft as Calendar, r as Card, i as CardContent, a as CardFooter, o as CardHeader, s as CardTitle, Rt as Carousel, an as Center, Xt as ChatBubble, v as Checkbox, He as CheckboxCard, Qe as Code, Ut as CodeSnippet, gt as Collapsible, Lt as ColorPicker, rn as Columns, ce as Combobox, ne as CommandMenu, we as Comparison, Tt as ContainedList, Et as ContainedListItem, Se as ContextMenu, Ce as ContextMenuItem, Ue as CopyButton, Dt as DataList, te as DataTable, le as DatePicker, It as DateRangePicker, pn as DismissableLayer, Bt as Dock, Vt as Drawer, w as Dropdown, Ie as Editable, X as EmptyState, mn as ErrorBoundary, Z as Fab, ct as Field, ue as FileUploader, lt as Filter, nn as Flex, hn as FocusScope, ae as Form, en as Grid, tn as GridItem, H as Header, Be as HeaderPanel, Xe as Heading, Te as HoverCard, Ee as HoverCardContent, De as HoverCardTrigger, ut as IconButton, h as Image, Kt as Indicator, pt as InlineLoading, n as Input, Ne as InputGroup, Pe as InputGroupAddon, kt as Item, At as ItemActions, jt as ItemContent, Mt as ItemDescription, Nt as ItemMedia, Pt as ItemTitle, qt as Join, L as Kbd, st as Label, R as Link, et as List, tt as ListItem, nt as LogViewer, he as Menu, vt as MenuButton, ge as MenuItem, _e as MenuSeparator, ve as MenuTrigger, bt as Menubar, l as Modal, ke as MultiSelect, Ht as NativeSelect, xt as NavigationMenu, mt as Notification, ee as NumberInput, je as OtpInput, Q as OverflowMenu, G as Pagination, Oe as PasswordInput, fe as Popover, pe as PopoverContent, me as PopoverTrigger, gn as Portal, _n as Presence, Je as Progress, Y as ProgressBar, Ye as ProgressCircle, K as ProgressIndicator, rt as Prose, it as PullToRefresh, at as QrCode, Zt as RadialProgress, y as Radio, Le as RadioCard, Re as RadioCardGroup, b as RadioGroup, Fe as RatingGroup, ot as RelativeTime, zt as Resizable, ht as ScrollArea, $ as Search, Me as SegmentedControl, _ as Select, u as Separator, be as Sheet, ze as ShellHeader, W as SideNav, J as Skeleton, Ke as SkipNavLink, qe as SkipNavTarget, S as Slider, vn as Slot, on as Spacer, e as Spinner, Jt as Stack, We as Stat, Ge as Status, Wt as Steps, wt as StructuredList, yn as SuspenseBoundary, Qt as Swap, $t as SwipeItem, Ve as Switcher, O as Tabs, k as TabsContent, A as TabsList, j as TabsTrigger, q as Tag, Ae as TagsInput, Ze as Text, g as Textarea, cn as ThemeProvider, Gt as Tile, de as TimePicker, Ot as Timeline, T as ToastProvider, B as Toc, x as Toggle, ft as ToggleGroup, yt as Toggletip, C as Tooltip, St as TreeView, m as User, bn as VisuallyHidden, xn as batch, Sn as cn, Cn as composeRefs, wn as computePosition, Tn as computed, oe as createForm, En as createMachine, Dn as createScope, On as createStreamBuffer, E as dismissAllToasts, kn as effect, re as fuzzyMatch, ie as fuzzyScore, An as getLinkComponent, jn as mergeProps, Mn as setLinkComponent, ln as setTheme, Nn as signal, un as themePreloadScript, dn as themeSignal, Ct as treeViewMessages, Pn as useAnchorPosition, Fn as useClipboard, In as useComputed, Ln as useControllableSignal, Rn as useDisclosure, zn as useEffectPropSignal, se as useForm, Bn as useId, Vn as useMachine, Hn as useMediaQuery, U as usePopover, Un as useRovingFocus, Wn as useScope, Gn as useScrollLock, Kn as useSignal, qn as useSignalEffect, Jn as useSignals, Yn as useStreamBuffer, fn as useTheme, D as useToast, V as useTocFromRegion, Xn as useTypeahead };

package/dist/search/search.js

@@ -1,14 +1,13 @@
 "use client";
 
 import e from "./search.module.js";
-import { cn as t, useSignal as n, useSignalEffect as r, useSignals as i } from "@cascivo/core";
-import { builtin as a, t as o } from "@cascivo/i18n";
-import { jsx as s, jsxs as c } from "react/jsx-runtime";
-import { useRef as l } from "react";
+import { cn as t, useId as n, useSignal as r, useSignalEffect as i, useSignals 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";
+import { useRef as u } from "react";
 //#region ../components/src/search/search.tsx
-var u = 0;
 function d() {
-	return /* @__PURE__ */ c("svg", {
+	return /* @__PURE__ */ l("svg", {
 		viewBox: "0 0 16 16",
 		width: "16",
 		height: "16",
@@ -17,11 +16,11 @@ function d() {
 		strokeWidth: "1.5",
 		strokeLinecap: "round",
 		"aria-hidden": "true",
-		children: [/* @__PURE__ */ s("circle", {
+		children: [/* @__PURE__ */ c("circle", {
 			cx: "7",
 			cy: "7",
 			r: "4.5"
-		}), /* @__PURE__ */ s("line", {
+		}), /* @__PURE__ */ c("line", {
 			x1: "10.5",
 			y1: "10.5",
 			x2: "14",
@@ -30,17 +29,15 @@ function d() {
 	});
 }
 function f({ value: f, defaultValue: p = "", onValueChange: m, onChange: h, onSearch: g, debounceMs: _ = 300, placeholder: v, size: y = "md", label: b, disabled: x = !1, clearLabel: S, id: C, className: w }) {
-	i();
-	let T = v ?? o(a.search.placeholder), E = b ?? o(a.search.label), D = S ?? o(a.search.clear), O = l(null), k = l("");
-	k.current === "" && (u += 1, k.current = `cascade-search-${u}`);
-	let A = C ?? k.current, j = f !== void 0, M = n(j ? f : p);
+	a();
+	let T = v ?? s(o.search.placeholder), E = b ?? s(o.search.label), D = S ?? s(o.search.clear), O = u(null), k = n("cascade-search"), A = C ?? k, j = f !== void 0, M = r(j ? f : p);
 	j && (M.value = f);
-	let N = l(g);
+	let N = u(g);
 	N.current = g;
-	let P = l(null), F = () => {
+	let P = u(null), F = () => {
 		P.current !== null && (clearTimeout(P.current), P.current = null);
 	};
-	r(() => F);
+	i(() => F);
 	let I = (e) => {
 		let t = e.target.value;
 		j || (M.value = t), (m ?? h)?.(t), F(), P.current = setTimeout(() => {
@@ -51,21 +48,21 @@ function f({ value: f, defaultValue: p = "", onValueChange: m, onChange: h, onSe
 	}, R = () => {
 		F(), j || (M.value = ""), (m ?? h)?.(""), g?.(""), O.current?.focus();
 	}, z = M.value !== "";
-	return /* @__PURE__ */ c("div", {
+	return /* @__PURE__ */ l("div", {
 		className: t(e.root, w),
 		"data-size": y,
 		"data-state": z ? "filled" : "empty",
 		children: [
-			/* @__PURE__ */ s("label", {
+			/* @__PURE__ */ c("label", {
 				className: e.label,
 				htmlFor: A,
 				children: E
 			}),
-			/* @__PURE__ */ s("span", {
+			/* @__PURE__ */ c("span", {
 				className: e.icon,
-				children: /* @__PURE__ */ s(d, {})
+				children: /* @__PURE__ */ c(d, {})
 			}),
-			/* @__PURE__ */ s("input", {
+			/* @__PURE__ */ c("input", {
 				ref: O,
 				id: A,
 				type: "search",
@@ -76,13 +73,13 @@ function f({ value: f, defaultValue: p = "", onValueChange: m, onChange: h, onSe
 				onChange: I,
 				onKeyDown: L
 			}),
-			z && /* @__PURE__ */ s("button", {
+			z && /* @__PURE__ */ c("button", {
 				type: "button",
 				className: e.clear,
 				"aria-label": D,
 				disabled: x,
 				onClick: R,
-				children: /* @__PURE__ */ s("span", {
+				children: /* @__PURE__ */ c("span", {
 					"aria-hidden": "true",
 					children: "✕"
 				})

package/dist/sheet/sheet.js

@@ -1,15 +1,13 @@
 "use client";
 
 import e from "./sheet.module.js";
-import { useSignal as t, useSignalEffect as n } from "@cascivo/core";
+import { useEffectPropSignal as t, useSignalEffect as n } from "@cascivo/core";
 import { builtin as r, t as i } from "@cascivo/i18n";
 import { jsx as a, jsxs as o } from "react/jsx-runtime";
 import { useId as s, useRef as c } from "react";
 //#region ../components/src/sheet/sheet.tsx
 function l({ open: l, onClose: u, title: d, children: f, side: p = "end" }) {
-	let m = c(null), h = s(), g = t(l);
-	g.value = l;
-	let _ = c(u);
+	let m = c(null), h = s(), g = t(l), _ = c(u);
 	return _.current = u, n(() => {
 		let e = m.current;
 		if (e) if (g.value) try {

package/dist/styles.css

@@ -832,7 +832,7 @@
 /*$vite$:1*/
 @layer cascivo.component{._calendar_7pqxh_2{--cascivo-calendar-bg:var(--cascivo-color-surface);--cascivo-calendar-radius:var(--cascivo-radius-overlay);--cascivo-calendar-cell-size:2.25rem;--cascivo-calendar-day-selected-bg:var(--cascivo-color-accent);--cascivo-calendar-day-selected-fg:var(--cascivo-color-accent-foreground,var(--cascivo-color-text-on-accent));--cascivo-calendar-day-today-color:var(--cascivo-color-accent);--cascivo-calendar-range-bg:color-mix(in srgb, var(--cascivo-color-accent) 16%, transparent);gap:var(--cascivo-space-2);padding:var(--cascivo-space-3);font-family:var(--cascivo-font-sans);background-color:var(--cascivo-calendar-bg);border-radius:var(--cascivo-calendar-radius);flex-direction:column;display:inline-flex}._calendar_7pqxh_2[data-size=sm]{--cascivo-calendar-cell-size:1.875rem}._calendar_7pqxh_2[data-size=md]{--cascivo-calendar-cell-size:2.25rem}._calendar_7pqxh_2[data-size=lg]{--cascivo-calendar-cell-size:2.75rem}._header_7pqxh_33{justify-content:space-between;align-items:center;margin-block-end:var(--cascivo-space-1);display:flex}._monthLabel_7pqxh_40{font-size:var(--cascivo-text-sm);font-weight:var(--cascivo-font-semibold);color:var(--cascivo-color-text)}._navButton_7pqxh_46{border-radius:var(--cascivo-radius-control);cursor:pointer;block-size:2rem;inline-size:2rem;color:var(--cascivo-color-text-muted);font-size:var(--cascivo-text-base);background:0 0;border:1px solid #0000;outline:none;justify-content:center;align-items:center;display:inline-flex}._navButton_7pqxh_46:hover{background-color:var(--cascivo-color-bg-subtle);color:var(--cascivo-color-text)}._navButton_7pqxh_46:focus-visible{box-shadow:var(--cascivo-focus-ring)}._navSpacer_7pqxh_69{block-size:2rem;inline-size:2rem}._grid_7pqxh_74{border-collapse:collapse;inline-size:100%}._weekday_7pqxh_79{padding-block:var(--cascivo-space-1);font-size:var(--cascivo-text-xs);font-weight:var(--cascivo-font-medium);color:var(--cascivo-color-text-muted);text-align:center;inline-size:var(--cascivo-calendar-cell-size)}._cell_7pqxh_88{text-align:center;padding:0}._cell_7pqxh_88[data-in-range]{background-color:var(--cascivo-calendar-range-bg)}._cell_7pqxh_88:has([data-in-range]){background-color:var(--cascivo-calendar-range-bg)}._empty_7pqxh_99{inline-size:var(--cascivo-calendar-cell-size);block-size:var(--cascivo-calendar-cell-size)}._day_7pqxh_104{inline-size:var(--cascivo-calendar-cell-size);block-size:var(--cascivo-calendar-cell-size);font-family:var(--cascivo-font-sans);font-size:var(--cascivo-text-sm);color:var(--cascivo-color-text);border-radius:var(--cascivo-radius-control);cursor:pointer;background:0 0;border:none;outline:none;justify-content:center;align-items:center;display:inline-flex}._day_7pqxh_104:hover:not([aria-disabled]){background-color:var(--cascivo-color-bg-subtle)}._day_7pqxh_104:focus-visible{box-shadow:var(--cascivo-focus-ring)}._day_7pqxh_104[data-today]{font-weight:var(--cascivo-font-semibold);color:var(--cascivo-calendar-day-today-color)}._day_7pqxh_104[data-in-range]{background-color:var(--cascivo-calendar-range-bg)}._day_7pqxh_104[data-selected],._day_7pqxh_104[data-range-start],._day_7pqxh_104[data-range-end]{background-color:var(--cascivo-calendar-day-selected-bg);color:var(--cascivo-calendar-day-selected-fg)}._day_7pqxh_104[aria-disabled]{opacity:.35;cursor:not-allowed}}@media (forced-colors:active){._day_7pqxh_104[data-selected]{outline:2px solid highlight}}
 /*$vite$:1*/
-@layer cascivo.component{._card_16415_2{background-color:var(--cascivo-color-surface);border-radius:var(--cascivo-radius-surface);padding:var(--_card-p,0);overflow:hidden}._card_16415_2[data-padding=none]{--_card-p:0}._card_16415_2[data-padding=sm]{--_card-p:var(--cascivo-space-4)}._card_16415_2[data-padding=md]{--_card-p:var(--cascivo-space-6)}._card_16415_2[data-padding=lg]{--_card-p:var(--cascivo-space-8)}._card_16415_2[data-variant=default]{border:1px solid var(--cascivo-color-border)}._card_16415_2[data-variant=outlined]{border:1.5px solid var(--cascivo-color-border-strong)}._card_16415_2[data-variant=elevated]{box-shadow:var(--cascivo-shadow-md);border:none}._header_16415_35{padding:var(--_card-p,var(--cascivo-space-6));gap:var(--cascivo-space-1);flex-direction:column;min-inline-size:0;padding-block-end:0;display:flex}._title_16415_46{font-family:var(--cascivo-font-sans);font-size:var(--cascivo-text-lg);font-weight:var(--cascivo-font-semibold);color:var(--cascivo-color-text);line-height:var(--cascivo-leading-tight);margin:0}._content_16415_55{padding:var(--_card-p,var(--cascivo-space-6));color:var(--cascivo-color-text-subtle);font-family:var(--cascivo-font-sans);font-size:var(--cascivo-text-sm);line-height:var(--cascivo-leading-relaxed)}._footer_16415_63{padding:var(--_card-p,var(--cascivo-space-6));align-items:center;gap:var(--cascivo-space-2);min-inline-size:0;padding-block-start:0;display:flex}._footer_16415_63>*{min-inline-size:0}}
+@layer cascivo.component{._card_4huda_2{background-color:var(--cascivo-color-surface);border-radius:var(--cascivo-radius-surface);padding:var(--_card-p,0);overflow:hidden}._card_4huda_2[data-padding=none]{--_card-p:0}._card_4huda_2[data-padding=sm]{--_card-p:var(--cascivo-space-4)}._card_4huda_2[data-padding=md]{--_card-p:var(--cascivo-space-6)}._card_4huda_2[data-padding=lg]{--_card-p:var(--cascivo-space-8)}._card_4huda_2[data-variant=default]{border:1px solid var(--cascivo-color-border)}._card_4huda_2[data-variant=outlined]{border:1.5px solid var(--cascivo-color-border-strong)}._card_4huda_2[data-variant=elevated]{box-shadow:var(--cascivo-shadow-md);border:none}._header_4huda_35{padding:var(--_card-p,var(--cascivo-space-6));gap:var(--cascivo-space-1);flex-direction:column;min-inline-size:0;padding-block-end:0;display:flex}._headerRow_4huda_49{justify-content:space-between;align-items:flex-start;gap:var(--cascivo-space-3);flex-direction:row}._headerRow_4huda_49 ._headerMain_4huda_57{gap:var(--cascivo-space-1);flex-direction:column;min-inline-size:0;display:flex}._headerRow_4huda_49 ._headerActions_4huda_64{align-items:center;gap:var(--cascivo-space-1);flex-shrink:0;display:flex}._title_4huda_72{font-family:var(--cascivo-font-sans);font-size:var(--cascivo-text-lg);font-weight:var(--cascivo-font-semibold);color:var(--cascivo-color-text);line-height:var(--cascivo-leading-tight);margin:0}._content_4huda_81{padding:var(--_card-p,var(--cascivo-space-6));color:var(--cascivo-color-text-subtle);font-family:var(--cascivo-font-sans);font-size:var(--cascivo-text-sm);line-height:var(--cascivo-leading-relaxed)}._footer_4huda_89{padding:var(--_card-p,var(--cascivo-space-6));align-items:center;gap:var(--cascivo-space-2);min-inline-size:0;padding-block-start:0;display:flex}._footer_4huda_89>*{min-inline-size:0}}
 /*$vite$:1*/
 @layer cascivo.component{._carousel_1dvrl_2{gap:var(--cascivo-space-3);flex-direction:column;inline-size:100%;display:flex}._viewport_1dvrl_9{align-items:center;display:flex;position:relative}._track_1dvrl_15{scroll-snap-type:x mandatory;scrollbar-width:none;border-radius:var(--cascivo-radius-md);inline-size:100%;display:flex;overflow-x:auto}._track_1dvrl_15::-webkit-scrollbar{display:none}._slide_1dvrl_28{scroll-snap-align:center;scroll-snap-stop:always;flex:0 0 100%;inline-size:100%}._nav_1dvrl_35{z-index:1;block-size:2.25rem;inline-size:2.25rem;color:var(--cascivo-color-text);background-color:var(--cascivo-color-surface);border:1px solid var(--cascivo-color-border);border-radius:var(--cascivo-radius-full);box-shadow:var(--cascivo-shadow-sm);cursor:pointer;justify-content:center;align-items:center;display:inline-flex;position:absolute}._nav_1dvrl_35:hover:not(:disabled){background-color:var(--cascivo-color-bg-subtle)}._nav_1dvrl_35:focus-visible{box-shadow:var(--cascivo-focus-ring);outline:none}._nav_1dvrl_35:disabled{opacity:.4;cursor:not-allowed}._prev_1dvrl_65{inset-inline-start:var(--cascivo-space-2)}._next_1dvrl_69{inset-inline-end:var(--cascivo-space-2)}._dots_1dvrl_73{justify-content:center;align-items:center;gap:var(--cascivo-space-2);display:flex}._dot_1dvrl_73{border-radius:var(--cascivo-radius-full);background-color:var(--cascivo-color-border-strong);cursor:pointer;block-size:.625rem;inline-size:.625rem;transition:background-color var(--cascivo-duration-150) var(--cascivo-ease-out);border:none;padding:0}._dot_1dvrl_73[data-active]{background-color:var(--cascivo-color-accent)}._dot_1dvrl_73:focus-visible{box-shadow:var(--cascivo-focus-ring);outline:none}}@media (prefers-reduced-motion:reduce){._track_1dvrl_15{scroll-behavior:auto}}@media (forced-colors:active){._nav_1dvrl_35:focus-visible,._dot_1dvrl_73:focus-visible{outline-offset:2px;outline:2px solid highlight}._dot_1dvrl_73[data-active]{background-color:highlight}}
 /*$vite$:1*/
@@ -1061,6 +1061,4 @@
 @layer cascivo.component{._tree_ufkml_2{--cascivo-tree-indent:var(--cascivo-space-5);font-family:var(--cascivo-font-sans);font-size:var(--cascivo-text-sm);color:var(--cascivo-color-text);margin:0;padding:0;list-style:none}._item_ufkml_12{list-style:none}._row_ufkml_16{align-items:center;gap:var(--cascivo-space-2);padding-inline-start:calc(var(--cascivo-tree-indent) * (var(--cascivo-tree-level) - 1));padding-block:var(--cascivo-space-2);border-radius:var(--cascivo-radius-control);cursor:pointer;transition:background-color var(--cascivo-duration-150) var(--cascivo-ease-out);padding-inline-end:var(--cascivo-space-3);display:flex}._row_ufkml_16:hover{background-color:var(--cascivo-color-bg-subtle)}._item_ufkml_12:focus-visible{outline:none}._item_ufkml_12:focus-visible>._row_ufkml_16{box-shadow:var(--cascivo-focus-ring)}._item_ufkml_12[data-selected]>._row_ufkml_16{background-color:var(--cascivo-color-bg-subtle);color:var(--cascivo-color-text);font-weight:var(--cascivo-font-medium)}._twisty_ufkml_47{block-size:.75rem;inline-size:.75rem;transition:rotate var(--cascivo-duration-150) 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='M6 4l4 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='M6 4l4 4-4 4'/%3E%3C/svg%3E") 50%/contain no-repeat}._twisty_ufkml_47[data-state=open]{rotate:90deg}._twistySpacer_ufkml_61{flex-shrink:0;block-size:.75rem;inline-size:.75rem}._icon_ufkml_67{block-size:1rem;inline-size:1rem;color:var(--cascivo-color-text-subtle);flex-shrink:0;display:inline-flex}._label_ufkml_75{text-overflow:ellipsis;white-space:nowrap;min-inline-size:0;overflow:hidden}._groupWrap_ufkml_83{visibility:hidden;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}._groupWrap_ufkml_83[data-state=open]{visibility:visible;grid-template-rows:1fr}@starting-style{._groupWrap_ufkml_83[data-state=open]{grid-template-rows:0fr}}._group_ufkml_83{min-block-size:0;margin:0;padding:0;list-style:none;overflow:hidden}}@media (prefers-reduced-motion:reduce){._groupWrap_ufkml_83,._row_ufkml_16,._twisty_ufkml_47{transition:none}}@media (forced-colors:active){._item_ufkml_12:focus-visible>._row_ufkml_16{outline-offset:-2px;outline:2px solid highlight}._item_ufkml_12[data-selected]>._row_ufkml_16{color:highlighttext;background-color:highlight}}
 /*$vite$:1*/
 @layer cascivo.component{._user_uuj1b_2{align-items:center;gap:var(--cascivo-space-3);min-inline-size:0;font-family:var(--cascivo-font-sans);display:inline-flex}._text_uuj1b_10{min-inline-size:0;line-height:var(--cascivo-leading-snug,1.3);flex-direction:column;display:flex}._name_uuj1b_17{color:var(--cascivo-color-text);font-size:var(--cascivo-text-sm);font-weight:var(--cascivo-font-medium);text-overflow:ellipsis;white-space:nowrap;overflow:hidden}._description_uuj1b_26{color:var(--cascivo-color-text-muted);font-size:var(--cascivo-text-xs);text-overflow:ellipsis;white-space:nowrap;overflow:hidden}._action_uuj1b_34{align-items:center;margin-inline-start:var(--cascivo-space-2);display:inline-flex}}
-/*$vite$:1*/
-@layer cascivo.component{._visuallyHidden_1iva7_2{clip-path:inset(50%);white-space:nowrap;border:0;block-size:1px;inline-size:1px;margin:-1px;padding:0;position:absolute;overflow:hidden}}
 /*$vite$:1*/

package/dist/visually-hidden/visually-hidden.js

@@ -1,15 +1,4 @@
 "use client";
 
-import e from "./visually-hidden.module.js";
-import { cn as t } from "@cascivo/core";
-import { jsx as n } from "react/jsx-runtime";
-//#region ../components/src/visually-hidden/visually-hidden.tsx
-function r({ children: r, className: i, ...a }) {
-	return /* @__PURE__ */ n("span", {
-		className: t(e.visuallyHidden, i),
-		...a,
-		children: r
-	});
-}
-//#endregion
-export { r as VisuallyHidden };
+import "@cascivo/core";
+import "react/jsx-runtime";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cascivo/react",
-  "version": "0.11.0",
+  "version": "0.12.0",
   "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.5.2",
-    "@cascivo/i18n": "^0.2.10",
-    "@cascivo/themes": "^0.4.5"
+    "@cascivo/core": "^0.6.0",
+    "@cascivo/themes": "^0.4.7",
+    "@cascivo/i18n": "^0.2.12"
   },
   "devDependencies": {
     "@testing-library/jest-dom": "^6.9.1",

package/readme.body.md

@@ -71,7 +71,10 @@ RSC without any extra wrapper.
 > 2. **`@preact/signals-react` 3.x** — on React 19 the 2.x line fails to load. The
 >    peer range enforces `>=3`.
 > 3. **Import the CSS once** in your root entry: `@cascivo/react/styles.css` +
->    `@cascivo/themes/all` (+ `@cascivo/charts/styles.css` if you use charts).
+>    `@cascivo/themes/all` (+ `@cascivo/charts/styles.css` if you use charts). If you
+>    typecheck (`tsc --noEmit`), these bare `.css` imports need ambient types — add
+>    `src/vite-env.d.ts` with `/// <reference types="vite/client" />` or
+>    `declare module '*.css'`, else TS2307/TS2882.
 > 4. **Theme without a mismatch:** inline `themePreloadScript()` in `<head>` and add
 >    `suppressHydrationWarning` to `<html>`, or hard-code `data-theme` for a fixed theme.
 >
@@ -386,7 +389,7 @@ routing break after adding one of these, check that the import resolves to
 - **Cta** — Call-to-action band — quiet hairline-bordered section with title, description, and centered actions. Replace demo content before shipping.
 - **DashboardLayout** — Dashboard page layout with stats strip, main content area, and optional aside.
 - **FeatureGrid** — Feature section — AutoGrid of items with optional title, description, and icon slots. Icons are optional; the grid works text-only. Replace demo content before shipping.
-- **Flex** — Flex layout primitive for vertical or horizontal stacking with gap control.
+- **Flex** — Flex layout primitive for vertical or horizontal stacking with gap control. ⚠ Unlike CSS `flex-direction`, `direction` defaults to `vertical` — pass `direction="horizontal"` for a row.
 - **Grid** — CSS grid layout primitive with responsive column collapsing. Establishes its own containment, so responsive `cols` adapt to the grid’s own slot width with no wrapper or container ancestor required.
 - **Hero** — Page hero section — centered or split layout with eyebrow, title, description, actions and media slots. Replace demo content before shipping.
 - **Indicator** — Positions an overlay element (badge, dot, count) at a corner of its child

package/dist/node/visually-hidden/visually-hidden.module.js

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

package/dist/visually-hidden/visually-hidden.css

@@ -1 +0,0 @@
-@layer cascivo.component{._visuallyHidden_1iva7_2{clip-path:inset(50%);white-space:nowrap;border:0;block-size:1px;inline-size:1px;margin:-1px;padding:0;position:absolute;overflow:hidden}}

package/dist/visually-hidden/visually-hidden.module.js

@@ -1,6 +0,0 @@
-"use client";
-
-import './visually-hidden.css';
-var e = { visuallyHidden: "_visuallyHidden_1iva7_2" };
-//#endregion
-export { e as default };