@cascivo/react 0.11.0 → 0.12.0

package/dist/index.d.ts

@@ -21,7 +21,7 @@
  * Docs: https://cascivo.com/llms.txt — or fully offline, no website needed:
  *   npx -y @cascivo/docs            (index; `npx @cascivo/docs <component>` for one doc)
  */
-import { ErrorBoundary, FocusScope, LinkComponent, LinkComponentProps, Portal, RovingOrientation, Signal, SpaceStep, SuspenseBoundary, getLinkComponent, setLinkComponent } from "@cascivo/core";
+import { DismissableLayer, DismissableLayerProps, ErrorBoundary, FocusScope, LinkComponent, LinkComponentProps, Machine, MachineConfig, Portal, Presence, RovingOrientation, Signal, Slot, SlotProps, SpaceStep, SuspenseBoundary, UseClipboardOptions, UseClipboardReturn, UseControllableSignalOptions, UseDisclosureOptions, UseDisclosureReturn, VisuallyHidden, VisuallyHiddenProps, batch, cn, composeRefs, computePosition, computed, createMachine, createScope, createStreamBuffer, effect, getLinkComponent, mergeProps, setLinkComponent, signal, useAnchorPosition, useClipboard, useComputed, useControllableSignal, useDisclosure, useEffectPropSignal, useId, useMachine, useMediaQuery, useRovingFocus, useScope, useScrollLock, useSignal, useSignalEffect, useSignals, useStreamBuffer, useTypeahead } from "@cascivo/core";
 import { AnchorHTMLAttributes, ButtonHTMLAttributes, FormHTMLAttributes, HTMLAttributes, ImgHTMLAttributes, InputHTMLAttributes, LabelHTMLAttributes, LiHTMLAttributes, MouseEvent, ReactElement, ReactNode, RefObject, SelectHTMLAttributes, TextareaHTMLAttributes, TimeHTMLAttributes } from "react";
 
 interface ButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
@@ -73,8 +73,20 @@ declare function Card({
   children,
   ...props
 }: CardProps): import("react").JSX.Element;
-interface CardHeaderProps extends HTMLAttributes<HTMLDivElement> {}
+interface CardHeaderProps extends HTMLAttributes<HTMLDivElement> {
+  /**
+   * Trailing content pinned to the inline-end of the header — an overflow menu, a status
+   * badge, a link. Without it the header is a column (title over description), which is
+   * why `justify-content: space-between` alone does nothing: the most common dashboard
+   * card layout is title-left / action-right, and it needs a row.
+   *
+   * The title column keeps `min-inline-size: 0`, so a long title truncates instead of
+   * pushing the actions out of the card.
+   */
+  actions?: ReactNode;
+}
 declare function CardHeader({
+  actions,
   className,
   children,
   ...props
@@ -2032,14 +2044,6 @@ declare function Status({
   children,
   ...props
 }: StatusProps): import("react").JSX.Element;
-interface VisuallyHiddenProps extends HTMLAttributes<HTMLSpanElement> {
-  children: ReactNode;
-}
-declare function VisuallyHidden({
-  children,
-  className,
-  ...props
-}: VisuallyHiddenProps): import("react").JSX.Element;
 interface SkipNavLinkProps extends Omit<AnchorHTMLAttributes<HTMLAnchorElement>, 'href'> {
   targetId?: string;
   labels?: {
@@ -2392,9 +2396,7 @@ declare function Filter({
   className,
   ...aria
 }: FilterProps): import("react").JSX.Element;
-interface IconButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
-  /** Accessible name for the icon-only control. Required — there is no visible text. */
-  label: string;
+interface IconButtonBaseProps extends ButtonHTMLAttributes<HTMLButtonElement> {
   /** The icon to render. Alias for `children`. Any ReactNode — `@cascivo/icons`
    * ships ~440 ready-made SVG icon components, or pass your own. */
   icon?: ReactNode;
@@ -2403,6 +2405,19 @@ interface IconButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
   /** Render the single child element instead of a `<button>` (composition). */
   asChild?: boolean;
 }
+/**
+ * Exactly one of `label` / `ariaLabel` is required — an icon-only control with no
+ * accessible name is a bug, so this stays enforced by the type rather than a dev warning.
+ * `ariaLabel` is the catalog's convention for an invisible accessible name; `IconButton`
+ * predates it and shipped `label`, so both work and neither is deprecated.
+ */
+type IconButtonProps = IconButtonBaseProps & ({
+  label: string;
+  ariaLabel?: never;
+} | {
+  ariaLabel: string;
+  label?: never;
+});
 declare const IconButton: import("react").ForwardRefExoticComponent<IconButtonProps & import("react").RefAttributes<HTMLButtonElement>>;
 interface ButtonGroupProps extends HTMLAttributes<HTMLDivElement> {
   orientation?: 'horizontal' | 'vertical';
@@ -3522,4 +3537,4 @@ declare function themePreloadScript(options?: {
   attribute?: string;
   defaultTheme?: string;
 }): string;
-export { Accordion, AccordionContent, AccordionItem, AccordionItemProps, AccordionProps, AccordionTrigger, ActionSheet, ActionSheetAction, ActionSheetProps, Alert, AlertDialog, AlertDialogLabels, AlertDialogProps, AlertProps, AppShell, AppShellProps, AspectRatio, AspectRatioProps, AutoGrid, AutoGridProps, Avatar, AvatarGroup, AvatarGroupLabels, AvatarGroupProps, AvatarProps, Badge, BadgeProps, Blockquote, BlockquoteProps, BottomSheet, BottomSheetProps, Breadcrumb, BreadcrumbItem, BreadcrumbProps, Button, ButtonGroup, ButtonGroupProps, ButtonProps, Calendar, CalendarLabels, CalendarProps, Card, CardContent, CardContentProps, CardFooter, CardFooterProps, CardHeader, CardHeaderProps, CardProps, CardTitle, CardTitleProps, Carousel, CarouselLabels, CarouselProps, Center, CenterProps, ChatBubble, ChatBubbleProps, ChatBubbleSide, Checkbox, CheckboxCard, CheckboxCardProps, CheckboxProps, Code, type CodeLang, CodeProps, CodeSnippet, CodeSnippetProps, Collapsible, CollapsibleProps, ColorPicker, ColorPickerLabels, ColorPickerProps, Column, Columns, ColumnsProps, Combobox, ComboboxLabels, ComboboxOption, ComboboxProps, CommandAction, CommandGroup, CommandItem, CommandMenu, CommandMenuProps, CommandPage, CommandScope, CommandStatus, Comparison, ComparisonProps, ContainedList, ContainedListItem, ContainedListItemProps, ContainedListProps, ContextMenu, ContextMenuItem, ContextMenuItemProps, ContextMenuProps, CopyButton, CopyButtonProps, DataList, DataListItem, DataListProps, DataTable, DataTableLabels, DataTableProps, DatePicker, DatePickerLabels, DatePickerProps, DateRange, DateRangePicker, DateRangePickerLabels, DateRangePickerProps, DateRangePreset, Dock, DockItem, DockProps, Drawer, DrawerProps, Dropdown, DropdownItem, DropdownProps, Editable, EditableProps, EmptyState, EmptyStateProps, ErrorBoundary, Fab, FabAction, FabProps, Field, FieldProps, FileUploader, FileUploaderLabels, FileUploaderProps, Filter, FilterOption, FilterProps, FilterVariant, Flex, FlexProps, FocusScope, Form, FormConfig, FormProps, FormStore, FuzzyMatch, Grid, GridAlign, GridItem, GridItemProps, GridProps, Header, HeaderLabels, HeaderLink, HeaderPanel, HeaderPanelLabels, HeaderPanelProps, HeaderProps, Heading, HeadingLevel, HeadingProps, HeadingSize, HoverCard, HoverCardContent, HoverCardContentProps, HoverCardProps, HoverCardTrigger, HoverCardTriggerProps, IconButton, IconButtonProps, Image, ImageProps, Indicator, IndicatorPlacement, IndicatorProps, InlineLoading, InlineLoadingProps, InlineLoadingStatus, Input, InputGroup, InputGroupAddon, type InputGroupAddonProps, type InputGroupProps, InputProps, Item, ItemActions, ItemActionsProps, ItemContent, ItemContentProps, ItemDescription, ItemDescriptionProps, ItemMedia, ItemMediaProps, ItemProps, ItemTitle, ItemTitleProps, Join, JoinOrientation, JoinProps, Kbd, KbdProps, Label, LabelProps, Link, type LinkComponent, type LinkComponentProps, LinkProps, List, ListItem, ListItemProps, ListProps, LogLevel, LogLine, LogViewer, LogViewerLabels, LogViewerProps, Menu, MenuButton, MenuButtonItem, MenuButtonProps, MenuItem, MenuItemProps, MenuProps, MenuSeparator, MenuTrigger, MenuTriggerProps, Menubar, MenubarItem, MenubarMenu, MenubarProps, Modal, ModalProps, MultiSelect, MultiSelectLabels, MultiSelectOption, MultiSelectProps, NativeSelect, NativeSelectOption, NativeSelectProps, NavigationMenu, NavigationMenuItem, NavigationMenuProps, Notification, NotificationProps, NotificationVariant, NumberInput, NumberInputProps, OtpInput, OtpInputProps, OverflowMenu, OverflowMenuItem, OverflowMenuProps, Pagination, PaginationLabels, PaginationProps, PasswordInput, PasswordInputLabels, PasswordInputProps, Popover, PopoverContent, PopoverContentProps, PopoverProps, PopoverTrigger, PopoverTriggerProps, Portal, Progress, ProgressBar, ProgressBarProps, ProgressCircle, ProgressCircleProps, ProgressIndicator, ProgressIndicatorProps, ProgressProps, ProgressSize, ProgressStep, ProgressVariant, Prose, ProseProps, PullToRefresh, PullToRefreshProps, QrCode, QrCodeProps, RadialProgress, RadialProgressProps, RadialProgressSize, RadialProgressVariant, Radio, RadioCard, RadioCardGroup, RadioCardGroupProps, RadioCardProps, RadioGroup, RadioGroupProps, RadioProps, RatingGroup, RatingGroupLabels, RatingGroupProps, RelativeTime, RelativeTimeProps, Resizable, ResizableProps, Responsive, ScrollArea, ScrollAreaProps, Search, SearchProps, SegmentedControl, SegmentedControlOption, SegmentedControlProps, Select, SelectOption, SelectProps, Separator, SeparatorProps, Sheet, SheetProps, ShellHeader, ShellHeaderAction, ShellHeaderBrand, ShellHeaderLabels, ShellHeaderNavItem, ShellHeaderNavLink, ShellHeaderNavMenu, ShellHeaderNavMenuItem, ShellHeaderProps, SideNav, SideNavGroup, SideNavItem, SideNavLinkProps, SideNavLinkSubItem, SideNavProps, SideNavSubItem, SideNavTone, Skeleton, SkeletonProps, SkipNavLink, SkipNavLinkProps, SkipNavTarget, SkipNavTargetProps, Slider, SliderProps, SortDirection, SortState, Spacer, SpacerProps, Spinner, SpinnerProps, Stack, StackProps, type StandardSchemaV1, Stat, StatProps, Status, StatusProps, Step, StepState, Steps, StepsProps, StructuredList, StructuredListItem, StructuredListProps, SuspenseBoundary, Swap, SwapMode, SwapProps, SwipeAction, SwipeItem, SwipeItemProps, Switcher, SwitcherEntry, SwitcherLink, SwitcherProps, Tabs, TabsContent, TabsContentProps, TabsList, TabsProps, TabsTrigger, TabsTriggerProps, Tag, TagProps, TagsInput, TagsInputProps, Text, TextProps, Textarea, TextareaProps, ThemeProvider, type ThemeProviderProps, Tile, TileProps, TimePicker, TimePickerProps, Timeline, TimelineItem, TimelineProps, ToastOptions, ToastProvider, ToastVariant, Toc, TocItem, TocProps, Toggle, ToggleGroup, ToggleGroupItem, ToggleGroupProps, ToggleProps, Toggletip, ToggletipPlacement, ToggletipProps, Tooltip, TooltipProps, TreeNode, TreeView, TreeViewProps, UploaderFile, type UsePopoverOptions, type UsePopoverReturn, type UseTocFromRegionOptions, User, UserProps, VisuallyHidden, VisuallyHiddenProps, createForm, dismissAllToasts, fuzzyMatch, fuzzyScore, getLinkComponent, setLinkComponent, setTheme, themePreloadScript, themeSignal, treeViewMessages, useForm, usePopover, useTheme, useToast, useTocFromRegion };
+export { Accordion, AccordionContent, AccordionItem, AccordionItemProps, AccordionProps, AccordionTrigger, ActionSheet, ActionSheetAction, ActionSheetProps, Alert, AlertDialog, AlertDialogLabels, AlertDialogProps, AlertProps, AppShell, AppShellProps, AspectRatio, AspectRatioProps, AutoGrid, AutoGridProps, Avatar, AvatarGroup, AvatarGroupLabels, AvatarGroupProps, AvatarProps, Badge, BadgeProps, Blockquote, BlockquoteProps, BottomSheet, BottomSheetProps, Breadcrumb, BreadcrumbItem, BreadcrumbProps, Button, ButtonGroup, ButtonGroupProps, ButtonProps, Calendar, CalendarLabels, CalendarProps, Card, CardContent, CardContentProps, CardFooter, CardFooterProps, CardHeader, CardHeaderProps, CardProps, CardTitle, CardTitleProps, Carousel, CarouselLabels, CarouselProps, Center, CenterProps, ChatBubble, ChatBubbleProps, ChatBubbleSide, Checkbox, CheckboxCard, CheckboxCardProps, CheckboxProps, Code, type CodeLang, CodeProps, CodeSnippet, CodeSnippetProps, Collapsible, CollapsibleProps, ColorPicker, ColorPickerLabels, ColorPickerProps, Column, Columns, ColumnsProps, Combobox, ComboboxLabels, ComboboxOption, ComboboxProps, CommandAction, CommandGroup, CommandItem, CommandMenu, CommandMenuProps, CommandPage, CommandScope, CommandStatus, Comparison, ComparisonProps, ContainedList, ContainedListItem, ContainedListItemProps, ContainedListProps, ContextMenu, ContextMenuItem, ContextMenuItemProps, ContextMenuProps, CopyButton, CopyButtonProps, DataList, DataListItem, DataListProps, DataTable, DataTableLabels, DataTableProps, DatePicker, DatePickerLabels, DatePickerProps, DateRange, DateRangePicker, DateRangePickerLabels, DateRangePickerProps, DateRangePreset, DismissableLayer, type DismissableLayerProps, Dock, DockItem, DockProps, Drawer, DrawerProps, Dropdown, DropdownItem, DropdownProps, Editable, EditableProps, EmptyState, EmptyStateProps, ErrorBoundary, Fab, FabAction, FabProps, Field, FieldProps, FileUploader, FileUploaderLabels, FileUploaderProps, Filter, FilterOption, FilterProps, FilterVariant, Flex, FlexProps, FocusScope, Form, FormConfig, FormProps, FormStore, FuzzyMatch, Grid, GridAlign, GridItem, GridItemProps, GridProps, Header, HeaderLabels, HeaderLink, HeaderPanel, HeaderPanelLabels, HeaderPanelProps, HeaderProps, Heading, HeadingLevel, HeadingProps, HeadingSize, HoverCard, HoverCardContent, HoverCardContentProps, HoverCardProps, HoverCardTrigger, HoverCardTriggerProps, IconButton, IconButtonProps, Image, ImageProps, Indicator, IndicatorPlacement, IndicatorProps, InlineLoading, InlineLoadingProps, InlineLoadingStatus, Input, InputGroup, InputGroupAddon, type InputGroupAddonProps, type InputGroupProps, InputProps, Item, ItemActions, ItemActionsProps, ItemContent, ItemContentProps, ItemDescription, ItemDescriptionProps, ItemMedia, ItemMediaProps, ItemProps, ItemTitle, ItemTitleProps, Join, JoinOrientation, JoinProps, Kbd, KbdProps, Label, LabelProps, Link, type LinkComponent, type LinkComponentProps, LinkProps, List, ListItem, ListItemProps, ListProps, LogLevel, LogLine, LogViewer, LogViewerLabels, LogViewerProps, type Machine, type MachineConfig, Menu, MenuButton, MenuButtonItem, MenuButtonProps, MenuItem, MenuItemProps, MenuProps, MenuSeparator, MenuTrigger, MenuTriggerProps, Menubar, MenubarItem, MenubarMenu, MenubarProps, Modal, ModalProps, MultiSelect, MultiSelectLabels, MultiSelectOption, MultiSelectProps, NativeSelect, NativeSelectOption, NativeSelectProps, NavigationMenu, NavigationMenuItem, NavigationMenuProps, Notification, NotificationProps, NotificationVariant, NumberInput, NumberInputProps, OtpInput, OtpInputProps, OverflowMenu, OverflowMenuItem, OverflowMenuProps, Pagination, PaginationLabels, PaginationProps, PasswordInput, PasswordInputLabels, PasswordInputProps, Popover, PopoverContent, PopoverContentProps, PopoverProps, PopoverTrigger, PopoverTriggerProps, Portal, Presence, Progress, ProgressBar, ProgressBarProps, ProgressCircle, ProgressCircleProps, ProgressIndicator, ProgressIndicatorProps, ProgressProps, ProgressSize, ProgressStep, ProgressVariant, Prose, ProseProps, PullToRefresh, PullToRefreshProps, QrCode, QrCodeProps, RadialProgress, RadialProgressProps, RadialProgressSize, RadialProgressVariant, Radio, RadioCard, RadioCardGroup, RadioCardGroupProps, RadioCardProps, RadioGroup, RadioGroupProps, RadioProps, RatingGroup, RatingGroupLabels, RatingGroupProps, RelativeTime, RelativeTimeProps, Resizable, ResizableProps, Responsive, ScrollArea, ScrollAreaProps, Search, SearchProps, SegmentedControl, SegmentedControlOption, SegmentedControlProps, Select, SelectOption, SelectProps, Separator, SeparatorProps, Sheet, SheetProps, ShellHeader, ShellHeaderAction, ShellHeaderBrand, ShellHeaderLabels, ShellHeaderNavItem, ShellHeaderNavLink, ShellHeaderNavMenu, ShellHeaderNavMenuItem, ShellHeaderProps, SideNav, SideNavGroup, SideNavItem, SideNavLinkProps, SideNavLinkSubItem, SideNavProps, SideNavSubItem, SideNavTone, Skeleton, SkeletonProps, SkipNavLink, SkipNavLinkProps, SkipNavTarget, SkipNavTargetProps, Slider, SliderProps, Slot, type SlotProps, SortDirection, SortState, Spacer, SpacerProps, Spinner, SpinnerProps, Stack, StackProps, type StandardSchemaV1, Stat, StatProps, Status, StatusProps, Step, StepState, Steps, StepsProps, StructuredList, StructuredListItem, StructuredListProps, SuspenseBoundary, Swap, SwapMode, SwapProps, SwipeAction, SwipeItem, SwipeItemProps, Switcher, SwitcherEntry, SwitcherLink, SwitcherProps, Tabs, TabsContent, TabsContentProps, TabsList, TabsProps, TabsTrigger, TabsTriggerProps, Tag, TagProps, TagsInput, TagsInputProps, Text, TextProps, Textarea, TextareaProps, ThemeProvider, type ThemeProviderProps, Tile, TileProps, TimePicker, TimePickerProps, Timeline, TimelineItem, TimelineProps, ToastOptions, ToastProvider, ToastVariant, Toc, TocItem, TocProps, Toggle, ToggleGroup, ToggleGroupItem, ToggleGroupProps, ToggleProps, Toggletip, ToggletipPlacement, ToggletipProps, Tooltip, TooltipProps, TreeNode, TreeView, TreeViewProps, UploaderFile, type UseClipboardOptions, type UseClipboardReturn, type UseControllableSignalOptions, type UseDisclosureOptions, type UseDisclosureReturn, type UsePopoverOptions, type UsePopoverReturn, type UseTocFromRegionOptions, User, UserProps, VisuallyHidden, VisuallyHiddenProps, batch, cn, composeRefs, computePosition, computed, createForm, createMachine, createScope, createStreamBuffer, dismissAllToasts, effect, fuzzyMatch, fuzzyScore, getLinkComponent, mergeProps, setLinkComponent, setTheme, signal, themePreloadScript, themeSignal, treeViewMessages, useAnchorPosition, useClipboard, useComputed, useControllableSignal, useDisclosure, useEffectPropSignal, useForm, useId, useMachine, useMediaQuery, usePopover, useRovingFocus, useScope, useScrollLock, useSignal, useSignalEffect, useSignals, useStreamBuffer, useTheme, useToast, useTocFromRegion, useTypeahead };

package/dist/modal/modal.js

@@ -1,7 +1,7 @@
 "use client";
 
 import e from "./modal.module.js";
-import { cn as t, useDraggable as n, useId as r, useSignal as i, useSignalEffect as a, useSignals as o } from "@cascivo/core";
+import { cn as t, useDraggable as n, useEffectPropSignal as r, useId as i, useSignalEffect as a, useSignals as o } from "@cascivo/core";
 import { builtin as s, t as c } from "@cascivo/i18n";
 import { jsx as l, jsxs as u } from "react/jsx-runtime";
 import { useRef as d } from "react";
@@ -10,11 +10,11 @@ function f({ open: f = !1, onClose: p, title: m, description: h, children: g, cl
 	o();
 	let b = d(null), x = d(p);
 	x.current = p;
-	let S = r("cascivo-modal-title"), C = r("cascivo-modal-desc"), { handleRef: w, offset: T } = n({ isDisabled: !y }), E = y ? {
+	let S = i("cascivo-modal-title"), C = i("cascivo-modal-desc"), { handleRef: w, offset: T } = n({ isDisabled: !y }), E = y ? {
 		"--modal-x": `${T.value.x}px`,
 		"--modal-y": `${T.value.y}px`
-	} : void 0, D = i(f);
-	return D.value = f, a(() => {
+	} : void 0, D = r(f);
+	return a(() => {
 		let e = b.current;
 		e && (D.value ? e.open || e.showModal() : e.open && e.close());
 	}), a(() => {

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

@@ -1,15 +1,13 @@
 "use client";
 
 import e from "./alert-dialog.module.js";
-import { useId as t, useSignal as n, useSignalEffect as r } from "@cascivo/core";
+import { useEffectPropSignal as t, useId 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);
+	let g = c(null), _ = n("cascivo-alert-dialog-title"), v = n("cascivo-alert-dialog-desc"), y = t(l), b = c(null), x = c(p);
 	x.current = p;
 	let S = c(f);
 	return S.current = f, r(() => {

package/dist/node/card/card.js

@@ -2,9 +2,9 @@
 
 import e from "./card.module.js";
 import { cn as t } from "@cascivo/core";
-import { jsx as n } from "react/jsx-runtime";
+import { jsx as n, jsxs as r } from "react/jsx-runtime";
 //#region ../components/src/card/card.tsx
-function r({ variant: r = "default", padding: i = "md", className: a, children: o, ...s }) {
+function i({ variant: r = "default", padding: i = "md", className: a, children: o, ...s }) {
 	return /* @__PURE__ */ n("div", {
 		"data-variant": r,
 		"data-padding": i,
@@ -13,28 +13,38 @@ function r({ variant: r = "default", padding: i = "md", className: a, children:
 		children: o
 	});
 }
-function i({ className: r, children: i, ...a }) {
-	return /* @__PURE__ */ n("div", {
-		className: t(e.header, r),
-		...a,
-		children: i
+function a({ actions: i, className: a, children: o, ...s }) {
+	return i === void 0 ? /* @__PURE__ */ n("div", {
+		className: t(e.header, a),
+		...s,
+		children: o
+	}) : /* @__PURE__ */ r("div", {
+		className: t(e.header, e.headerRow, a),
+		...s,
+		children: [/* @__PURE__ */ n("div", {
+			className: e.headerMain,
+			children: o
+		}), /* @__PURE__ */ n("div", {
+			className: e.headerActions,
+			children: i
+		})]
 	});
 }
-function a({ className: r, children: i, ...a }) {
+function o({ className: r, children: i, ...a }) {
 	return /* @__PURE__ */ n("h3", {
 		className: t(e.title, r),
 		...a,
 		children: i
 	});
 }
-function o({ className: r, children: i, ...a }) {
+function s({ className: r, children: i, ...a }) {
 	return /* @__PURE__ */ n("div", {
 		className: t(e.content, r),
 		...a,
 		children: i
 	});
 }
-function s({ className: r, children: i, ...a }) {
+function c({ className: r, children: i, ...a }) {
 	return /* @__PURE__ */ n("div", {
 		className: t(e.footer, r),
 		...a,
@@ -42,4 +52,4 @@ function s({ className: r, children: i, ...a }) {
 	});
 }
 //#endregion
-export { r as Card, o as CardContent, s as CardFooter, i as CardHeader, a as CardTitle };
+export { i as Card, s as CardContent, c as CardFooter, a as CardHeader, o as CardTitle };

package/dist/node/card/card.module.js

@@ -1,11 +1,14 @@
 "use client";
 
 var e = {
-	card: "_card_16415_2",
-	header: "_header_16415_35",
-	title: "_title_16415_46",
-	content: "_content_16415_55",
-	footer: "_footer_16415_63"
+	card: "_card_4huda_2",
+	header: "_header_4huda_35",
+	headerRow: "_headerRow_4huda_49",
+	headerMain: "_headerMain_4huda_57",
+	headerActions: "_headerActions_4huda_64",
+	title: "_title_4huda_72",
+	content: "_content_4huda_81",
+	footer: "_footer_4huda_89"
 };
 //#endregion
 export { e as default };

package/dist/node/checkbox/checkbox.js

@@ -1,13 +1,13 @@
 "use client";
 
 import e from "./checkbox.module.js";
-import { cn as t, useSignal as n, useSignalEffect as r } from "@cascivo/core";
+import { cn as t, useEffectPropSignal as n, useSignalEffect as r } from "@cascivo/core";
 import { jsx as i, jsxs as a } from "react/jsx-runtime";
 import { useRef as o } from "react";
 //#region ../components/src/checkbox/checkbox.tsx
 function s({ label: s, indeterminate: c = !1, className: l, id: u, disabled: d, ...f }) {
 	let p = o(null), m = n(c);
-	m.value = c, r(() => {
+	r(() => {
 		p.current && (p.current.indeterminate = m.value);
 	});
 	let h = u ?? (s ? `cascade-checkbox-${s.toLowerCase().replace(/\s+/g, "-")}` : void 0);

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

@@ -3,10 +3,10 @@
 import { Spinner as e } from "../spinner/spinner.js";
 import { Kbd as t } from "../kbd/kbd.js";
 import n from "./command-menu.module.js";
-import { batch as r, cn as i, useSignal as a, useSignalEffect as o, useSignals as s } from "@cascivo/core";
+import { batch as r, cn as i, useEffectPropSignal as a, useSignal as o, useSignalEffect as s, useSignals as ee } from "@cascivo/core";
 import { builtin as c, t as l } from "@cascivo/i18n";
 import { jsx as u, jsxs as d } from "react/jsx-runtime";
-import { useId as ee, useRef as f } from "react";
+import { useId as te, useRef as f } from "react";
 //#region ../components/src/command-menu/command-menu.tsx
 function p(e, t) {
 	if (e.length === 0) return {
@@ -66,46 +66,42 @@ function _(e, t) {
 	}
 	return null;
 }
-function v({ open: m, onOpenChange: v, groups: te, placeholder: y, emptyLabel: b, hotkey: x = !0, label: S, loading: C = !1, onQueryChange: w, scopes: T = [], className: E }) {
-	s();
-	let D = S ?? l(c.commandMenu.label), ne = b ?? l(c.commandMenu.empty), O = ee(), k = `${O}-listbox`, A = f(null), j = f(null), M = f([]), N = f(v);
-	N.current = v;
-	let P = f(w);
-	P.current = w;
-	let F = a(m);
-	F.value = m;
-	let I = a(x);
-	I.value = x;
-	let L = a(""), R = a(0), z = a([]), B = a(null), re = z.value.at(-1)?.groups ?? te, ie = y ?? z.value.at(-1)?.placeholder ?? l(c.commandMenu.placeholder), V = T.find((e) => e.id === B.value) ?? null, H = re.filter((e) => !B.value || !e.scope || e.scope === B.value).map((e) => ({
+function v({ open: m, onOpenChange: v, groups: ne, placeholder: re, emptyLabel: ie, hotkey: y = !0, label: b, loading: x = !1, onQueryChange: S, scopes: C = [], className: ae }) {
+	ee();
+	let w = b ?? l(c.commandMenu.label), T = ie ?? l(c.commandMenu.empty), E = te(), D = `${E}-listbox`, O = f(null), k = f(null), A = f([]), j = f(v);
+	j.current = v;
+	let M = f(S);
+	M.current = S;
+	let N = a(m), P = a(y), F = o(""), I = o(0), L = o([]), R = o(null), z = L.value.at(-1)?.groups ?? ne, B = re ?? L.value.at(-1)?.placeholder ?? l(c.commandMenu.placeholder), V = C.find((e) => e.id === R.value) ?? null, H = z.filter((e) => !R.value || !e.scope || e.scope === R.value).map((e) => ({
 		heading: e.heading,
 		items: e.items.map((e) => ({
 			item: e,
-			score: h(L.value, e)
+			score: h(F.value, e)
 		})).filter(({ score: e }) => e > 0).sort((e, t) => t.score - e.score).map(({ item: e }) => ({
 			item: e,
-			indices: p(L.value, e.label)?.indices ?? []
+			indices: p(F.value, e.label)?.indices ?? []
 		}))
-	})).filter((e) => e.items.length > 0), U = H.flatMap((e) => e.items.map((e) => e.item)), W = U.flatMap((e, t) => e.disabled ? [] : [t]), G = W.includes(R.value) ? R.value : W[0] ?? -1, K = (e) => `${O}-option-${e}`;
-	o(() => {
-		let e = A.current;
-		e && (F.value ? e.open || (r(() => {
-			L.value = "", R.value = 0, z.value = [], B.value = null;
-		}), typeof e.showModal == "function" && e.showModal(), j.current?.focus()) : e.open && (z.value = [], e.close()));
-	}), o(() => {
-		let e = A.current;
+	})).filter((e) => e.items.length > 0), U = H.flatMap((e) => e.items.map((e) => e.item)), W = U.flatMap((e, t) => e.disabled ? [] : [t]), G = W.includes(I.value) ? I.value : W[0] ?? -1, K = (e) => `${E}-option-${e}`;
+	s(() => {
+		let e = O.current;
+		e && (N.value ? e.open || (r(() => {
+			F.value = "", I.value = 0, L.value = [], R.value = null;
+		}), typeof e.showModal == "function" && e.showModal(), k.current?.focus()) : e.open && (L.value = [], e.close()));
+	}), s(() => {
+		let e = O.current;
 		if (!e) return;
-		let t = () => N.current(!1);
+		let t = () => j.current(!1);
 		return e.addEventListener("close", t), () => e.removeEventListener("close", t);
-	}), o(() => {
-		if (!I.value) return;
+	}), s(() => {
+		if (!P.value) return;
 		let e = (e) => {
-			(e.metaKey || e.ctrlKey) && e.key.toLowerCase() === "k" && (e.preventDefault(), N.current(!F.value));
+			(e.metaKey || e.ctrlKey) && e.key.toLowerCase() === "k" && (e.preventDefault(), j.current(!N.value));
 		};
 		return window.addEventListener("keydown", e), () => window.removeEventListener("keydown", e);
 	});
 	let q = (e) => {
-		R.value = e;
-		let t = M.current[e];
+		I.value = e;
+		let t = A.current[e];
 		t && typeof t.scrollIntoView == "function" && t.scrollIntoView({ block: "nearest" });
 	}, J = (e) => {
 		if (W.length === 0) return;
@@ -118,7 +114,7 @@ function v({ open: m, onOpenChange: v, groups: te, placeholder: y, emptyLabel: b
 			if (e.page) {
 				if (t === "secondary") return;
 				r(() => {
-					z.value = [...z.value, e.page], L.value = "", R.value = 0;
+					L.value = [...L.value, e.page], F.value = "", I.value = 0;
 				});
 				return;
 			}
@@ -129,21 +125,21 @@ function v({ open: m, onOpenChange: v, groups: te, placeholder: y, emptyLabel: b
 			}
 			t !== "secondary" && (e.onSelect?.(), v(!1));
 		}
-	}, ae = (e) => {
-		if (T.length === 0) return;
-		let t = [null, ...T.map((e) => e.id)], n = t[(t.indexOf(B.value) + e + t.length) % t.length];
+	}, oe = (e) => {
+		if (C.length === 0) return;
+		let t = [null, ...C.map((e) => e.id)], n = t[(t.indexOf(R.value) + e + t.length) % t.length];
 		r(() => {
-			B.value = n ?? null, R.value = 0;
+			R.value = n ?? null, I.value = 0;
 		});
 	}, Z = () => {
 		r(() => {
-			B.value = null, R.value = 0;
-		}), j.current?.focus();
+			R.value = null, I.value = 0;
+		}), k.current?.focus();
 	}, Q = () => {
 		r(() => {
-			z.value = z.value.slice(0, -1), L.value = "", R.value = 0;
+			L.value = L.value.slice(0, -1), F.value = "", I.value = 0;
 		});
-	}, oe = (e) => {
+	}, se = (e) => {
 		switch (e.key) {
 			case "ArrowDown":
 				e.preventDefault(), J(1);
@@ -152,7 +148,7 @@ function v({ open: m, onOpenChange: v, groups: te, placeholder: y, emptyLabel: b
 				e.preventDefault(), J(-1);
 				break;
 			case "Tab":
-				T.length > 0 && (e.preventDefault(), ae(e.shiftKey ? -1 : 1));
+				C.length > 0 && (e.preventDefault(), oe(e.shiftKey ? -1 : 1));
 				break;
 			case "Home":
 				e.preventDefault(), W[0] !== void 0 && q(W[0]);
@@ -167,20 +163,20 @@ function v({ open: m, onOpenChange: v, groups: te, placeholder: y, emptyLabel: b
 				e.preventDefault(), G >= 0 && X(U[G], e.metaKey || e.ctrlKey ? "secondary" : "primary");
 				break;
 			case "Backspace":
-				L.value === "" && (z.value.length > 0 ? (e.preventDefault(), Q()) : B.value && (e.preventDefault(), Z()));
+				F.value === "" && (L.value.length > 0 ? (e.preventDefault(), Q()) : R.value && (e.preventDefault(), Z()));
 				break;
 		}
-	}, se = (e) => {
-		e.key === "Escape" && (e.preventDefault(), z.value.length > 0 ? Q() : A.current?.close());
 	}, ce = (e) => {
-		e.target === A.current && A.current?.close();
+		e.key === "Escape" && (e.preventDefault(), L.value.length > 0 ? Q() : O.current?.close());
+	}, le = (e) => {
+		e.target === O.current && O.current?.close();
 	}, $ = -1;
 	return /* @__PURE__ */ u("dialog", {
-		ref: A,
-		"aria-label": D,
-		className: i(n.dialog, E),
-		onClick: ce,
-		onKeyDown: se,
+		ref: O,
+		"aria-label": w,
+		className: i(n.dialog, ae),
+		onClick: le,
+		onKeyDown: ce,
 		children: /* @__PURE__ */ d("div", {
 			className: n.panel,
 			children: [
@@ -231,44 +227,44 @@ function v({ open: m, onOpenChange: v, groups: te, placeholder: y, emptyLabel: b
 							})]
 						}),
 						/* @__PURE__ */ u("input", {
-							ref: j,
+							ref: k,
 							type: "text",
 							role: "combobox",
 							"aria-expanded": "true",
-							"aria-controls": k,
+							"aria-controls": D,
 							"aria-activedescendant": G >= 0 ? K(G) : void 0,
 							"aria-autocomplete": "list",
-							"aria-label": D,
+							"aria-label": w,
 							autoComplete: "off",
 							spellCheck: !1,
 							className: n.input,
-							placeholder: ie,
-							value: L.value,
+							placeholder: B,
+							value: F.value,
 							onChange: (e) => {
 								let t = e.target.value;
-								if (!B.value && T.length > 0) {
-									let e = _(t, T);
-									e && (B.value = e.scope.id, t = e.rest);
+								if (!R.value && C.length > 0) {
+									let e = _(t, C);
+									e && (R.value = e.scope.id, t = e.rest);
 								}
-								L.value = t, R.value = 0, P.current?.(t);
+								F.value = t, I.value = 0, M.current?.(t);
 							},
-							onKeyDown: oe
+							onKeyDown: se
 						})
 					]
 				}),
-				T.length > 0 && /* @__PURE__ */ d("div", {
+				C.length > 0 && /* @__PURE__ */ d("div", {
 					className: n.scopes,
 					children: [/* @__PURE__ */ u("span", {
 						className: n.scopesLabel,
 						children: l(c.commandMenu.scopeLabel)
-					}), T.map((e) => /* @__PURE__ */ d("button", {
+					}), C.map((e) => /* @__PURE__ */ d("button", {
 						type: "button",
 						className: n.scopePill,
-						"data-active": e.id === B.value || void 0,
+						"data-active": e.id === R.value || void 0,
 						onClick: () => {
 							r(() => {
-								B.value = B.value === e.id ? null : e.id, R.value = 0;
-							}), j.current?.focus();
+								R.value = R.value === e.id ? null : e.id, I.value = 0;
+							}), k.current?.focus();
 						},
 						children: [e.prefix && /* @__PURE__ */ u("span", {
 							className: n.scopePrefix,
@@ -280,8 +276,8 @@ function v({ open: m, onOpenChange: v, groups: te, placeholder: y, emptyLabel: b
 					className: n.list,
 					children: [/* @__PURE__ */ u("div", {
 						role: "listbox",
-						id: k,
-						"aria-label": S,
+						id: D,
+						"aria-label": b,
 						tabIndex: 0,
 						children: H.map((e, r) => /* @__PURE__ */ d("div", {
 							role: "group",
@@ -290,7 +286,7 @@ function v({ open: m, onOpenChange: v, groups: te, placeholder: y, emptyLabel: b
 							children: [e.heading && /* @__PURE__ */ d("div", {
 								className: n.heading,
 								"aria-hidden": "true",
-								children: [/* @__PURE__ */ u("span", { children: e.heading }), L.value !== "" && /* @__PURE__ */ u("span", {
+								children: [/* @__PURE__ */ u("span", { children: e.heading }), F.value !== "" && /* @__PURE__ */ u("span", {
 									className: n.count,
 									children: l(c.commandMenu.matches, { count: e.items.length })
 								})]
@@ -300,7 +296,7 @@ function v({ open: m, onOpenChange: v, groups: te, placeholder: y, emptyLabel: b
 								let a = $;
 								return /* @__PURE__ */ d("div", {
 									ref: (e) => {
-										M.current[a] = e;
+										A.current[a] = e;
 									},
 									id: K(a),
 									role: "option",
@@ -310,7 +306,7 @@ function v({ open: m, onOpenChange: v, groups: te, placeholder: y, emptyLabel: b
 									"data-disabled": r.disabled || void 0,
 									className: n.option,
 									onMouseEnter: () => {
-										r.disabled || (R.value = a);
+										r.disabled || (I.value = a);
 									},
 									onClick: () => X(r, "primary"),
 									children: [
@@ -366,14 +362,14 @@ function v({ open: m, onOpenChange: v, groups: te, placeholder: y, emptyLabel: b
 								}, r.id);
 							})]
 						}, e.heading ?? `group-${r}`))
-					}), U.length === 0 && (C ? /* @__PURE__ */ d("div", {
+					}), U.length === 0 && (x ? /* @__PURE__ */ d("div", {
 						role: "status",
 						className: n.empty,
 						children: [/* @__PURE__ */ u(e, { size: "sm" }), l(c.commandMenu.loading)]
 					}) : /* @__PURE__ */ u("div", {
 						role: "status",
 						className: n.empty,
-						children: ne
+						children: T
 					}))]
 				}),
 				/* @__PURE__ */ d("div", {
@@ -401,7 +397,7 @@ function v({ open: m, onOpenChange: v, groups: te, placeholder: y, emptyLabel: b
 								children: "↵"
 							}), " open"]
 						}),
-						T.length > 0 && /* @__PURE__ */ d("span", {
+						C.length > 0 && /* @__PURE__ */ d("span", {
 							className: n.hint,
 							children: [/* @__PURE__ */ u(t, {
 								size: "sm",