@cascivo/react 0.13.1 → 0.16.0

package/dist/index.d.ts

@@ -21,8 +21,8 @@
  * 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 { DismissableLayer, DismissableLayerProps, ErrorBoundary, FocusScope, LinkComponent, LinkComponentProps, Machine, MachineConfig, Portal, Presence, ProgressInput, RovingOrientation, Signal, Slot, SlotProps, SpaceStep, SuspenseBoundary, ToneInput, 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";
+import { DismissableLayer, DismissableLayerProps, ErrorBoundary, FocusScope, LinkComponent, LinkComponentProps, Machine, MachineConfig, Portal, Presence, ProgressInput, RovingOrientation, Signal, Slot, SlotProps, SpaceStep, SuspenseBoundary, ToneInput, 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";
 
 interface ButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
   /**
@@ -433,6 +433,15 @@ interface SelectOption {
    */
   disabled?: boolean;
 }
+/**
+ * ⚠ `Select` is a **native `<select>` wrapper**, so its change handler is the DOM
+ * `onChange(event)` — read the value off `event.target.value`. There is **no**
+ * `onValueChange`; TypeScript unhelpfully suggests `onVolumeChange` when you try it.
+ *
+ * The catalog's `onValueChange` convention covers composite components that invent their
+ * own value (`Tabs`, `Combobox`, `Toggle`, …). `Select`, like `Checkbox` and
+ * `NativeSelect`, spreads onto a real element and inherits that element's event.
+ */
 interface SelectProps extends Omit<SelectHTMLAttributes<HTMLSelectElement>, 'size'> {
   label?: string;
   hint?: string;
@@ -526,6 +535,13 @@ interface ToggleProps extends Omit<ButtonHTMLAttributes<HTMLButtonElement>, 'onC
  * not work there.
  */
 declare const Toggle: import("react").ForwardRefExoticComponent<ToggleProps & import("react").RefAttributes<HTMLButtonElement>>;
+/**
+ * ⚠ `Slider` is a **native `<input type="range">` wrapper**, so its change handler is the
+ * DOM `onChange(event)` — read the value off `event.target.value`. There is **no**
+ * `onValueChange`, despite the catalog convention of that name for value-carrying
+ * callbacks: that convention covers composite components that invent their own value,
+ * while this one inherits the underlying element's event.
+ */
 interface SliderProps extends Omit<InputHTMLAttributes<HTMLInputElement>, 'type'> {
   label?: string;
 }
@@ -679,9 +695,14 @@ declare function Accordion({
   className,
   children
 }: AccordionProps): import("react").JSX.Element;
-interface AccordionItemProps extends HTMLAttributes<HTMLDivElement> {
+interface AccordionItemProps extends HTMLAttributes<HTMLElement> {
   value: string;
 }
+/**
+ * Renders the `<details>` element itself, so `AccordionTrigger` (a `<summary>`) and
+ * `AccordionContent` land as its first and second children — which is exactly the shape
+ * consumers already write.
+ */
 declare function AccordionItem({
   value,
   className,
@@ -689,11 +710,12 @@ declare function AccordionItem({
   ...props
 }: AccordionItemProps): import("react").JSX.Element;
 /**
- * `forwardRef` so `ref` reaches the trigger `<button>` — see `textarea.tsx` for the full
- * rationale (2026-07-28 report C10). The ref is threaded through the private Inner, which is
- * where the button actually lives.
+ * `forwardRef` so `ref` reaches the trigger element — see `textarea.tsx` for the full
+ * rationale (2026-07-28 report C10). The target is the `<summary>`, not a `<button>`:
+ * `<summary>` must be the first child of `<details>`, so it cannot be nested inside a
+ * heading. The heading moves inside it instead, which `<summary>`'s content model allows.
  */
-declare const AccordionTrigger: import("react").ForwardRefExoticComponent<HTMLAttributes<HTMLButtonElement> & import("react").RefAttributes<HTMLButtonElement>>;
+declare const AccordionTrigger: import("react").ForwardRefExoticComponent<HTMLAttributes<HTMLElement> & import("react").RefAttributes<HTMLElement>>;
 declare function AccordionContent(props: HTMLAttributes<HTMLDivElement>): import("react").JSX.Element;
 interface ActionSheetAction {
   label: ReactNode;
@@ -1407,19 +1429,24 @@ interface Column<Row> {
   align?: 'start' | 'end';
   /**
    * Preferred column width, any CSS length (`'8rem'`, `'120px'`, `'12%'`). Set it on
-   * identifier-shaped columns (commit hashes, IDs, timestamps) — default sizing doesn't
-   * consider content shape, so a hash wraps mid-hash.
+   * identifier-shaped columns (ids, statuses, dates) so they stop stealing space from the
+   * free-form ones.
    *
-   * **Mixing sized and unsized columns is supported**: unsized columns absorb the
-   * remaining width and never collapse below their content. Only when *every* column
-   * declares a width does the table switch to a fixed layout (which keeps widths
-   * identical across pages); otherwise widths are preferred sizes, not hard ones.
+   * It is a *preferred* size with a **content floor**: a sized column never shrinks below
+   * its own longest word, so you do not need a paired `minWidth` just to stop it
+   * collapsing. Use `minWidth` only to raise the floor above the content.
+   *
+   * ⚠ **Sizing EVERY column changes the layout mode.** Only then does the table switch to
+   * `table-layout: fixed` (which keeps widths identical across pages), and a fixed table
+   * can exceed its container — the extra columns are reachable by horizontal scroll, not
+   * dropped. Leave at least one free-form column unsized unless you specifically want
+   * page-stable widths.
    */
   width?: string;
   /**
-   * Floor for the column's width, any CSS length. Use it on a free-form column
-   * (a commit message, a description) that must stay readable when the table is narrow —
-   * the table then scrolls horizontally rather than squeezing the column to nothing.
+   * Floor for the column's width, any CSS length. Use it on a free-form column that should
+   * get a minimum share, or to raise a sized column's floor above its content — the
+   * content floor is automatic, so this is no longer needed merely to prevent collapse.
    */
   minWidth?: string;
 }
@@ -2016,11 +2043,17 @@ declare function Menu({
 }: MenuProps): import("react").JSX.Element;
 interface MenuTriggerProps {
   children: ReactNode;
+  /**
+   * Invisible accessible name. The catalog convention (see the item-identity table in
+   * `docs/AI-RULES.md`); `aria-label` is accepted as an alias for the DOM spelling.
+   */
+  ariaLabel?: string;
   'aria-label'?: string;
 }
 declare function MenuTrigger({
   children,
-  'aria-label': ariaLabel
+  ariaLabel,
+  'aria-label': ariaLabelDom
 }: MenuTriggerProps): import("react").JSX.Element;
 interface MenuItemProps {
   children: ReactNode;
@@ -2543,6 +2576,20 @@ interface ShellHeaderLabels {
 interface ShellHeaderProps {
   brand?: ShellHeaderBrand | ReactNode;
   nav?: ShellHeaderNavItem[];
+  /**
+   * Free-form content between the nav and the right-hand cluster, in a wrapper that
+   * takes the header's spare width.
+   *
+   * This is where a command-palette / search trigger belongs — a wide, low-contrast
+   * button naming what it searches and showing its chord. Without a slot here the only
+   * remaining position is `end`, which sits after the spacer and so can neither centre
+   * nor grow; reaching the right spot otherwise means selecting the brand's hashed
+   * CSS-module class, which breaks whenever the internal nesting changes.
+   *
+   * `nav` cannot express it (links and menus only) and `actions` cannot (icon buttons
+   * with an `aria-label`, no text, no flex).
+   */
+  center?: ReactNode;
   actions?: ShellHeaderAction[];
   end?: ReactNode;
   onMenuClick?: (() => void) | undefined;
@@ -2554,6 +2601,7 @@ interface ShellHeaderProps {
 declare function ShellHeader({
   brand,
   nav,
+  center,
   actions,
   end,
   onMenuClick,
@@ -2640,6 +2688,20 @@ interface StatProps extends Omit<HTMLAttributes<HTMLDivElement>, 'children'> {
   value: string | number;
   delta?: string;
   trend?: 'up' | 'down' | 'flat';
+  /**
+   * Which direction is *good* for this metric — the colour, independent of the arrow.
+   *
+   * `trend` says which way the number moved; this says whether that is welcome. They are
+   * the same question only for metrics where up is better, and hard-coding that made every
+   * error-rate, latency, cost and churn tile render its worst news in green. Lying about
+   * `trend` to fix the colour also reverses the arrow, so there was no correct answer.
+   *
+   * `'neutral'` keeps the arrow and drops the sentiment colour, for metrics where neither
+   * direction is inherently good (headcount, page views).
+   *
+   * @defaultValue `up`
+   */
+  goodDirection?: 'up' | 'down' | 'neutral';
   helpText?: string;
   /**
    * Wrap the tile in the same card chrome (surface, border, radius, padding) that
@@ -2657,6 +2719,7 @@ declare function Stat({
   value,
   delta,
   trend,
+  goodDirection,
   helpText,
   card,
   visual,
@@ -3391,10 +3454,11 @@ interface CollapsibleProps {
   defaultOpen?: boolean;
   /** Called whenever the open state should change. */
   onOpenChange?: (open: boolean) => void;
-  /** Content rendered inside the trigger button. */
+  /** Content rendered inside the trigger. */
   trigger: ReactNode;
   /**
-   * Disables the trigger button
+   * Disables the trigger. Enforced in the enhancement layer — <details> has no native
+   * disabled state, so with JavaScript off a disabled Collapsible is still operable
    *
    * @defaultValue `false`
    * @see the component manifest
@@ -3505,14 +3569,27 @@ interface MenubarMenu {
   label: ReactNode;
   items: MenubarItem[];
 }
-interface MenubarProps {
+interface MenubarBaseProps {
   menus: MenubarMenu[];
-  'aria-label': string;
   className?: string;
 }
+/**
+ * Exactly one of `ariaLabel` / `aria-label` is required — a menubar landmark 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; `aria-label` is the DOM spelling this component
+ * shipped with. Both work, mirroring `IconButton`.
+ */
+type MenubarProps = MenubarBaseProps & ({
+  ariaLabel: string;
+  'aria-label'?: never;
+} | {
+  'aria-label': string;
+  ariaLabel?: never;
+});
 declare function Menubar({
   menus,
-  'aria-label': ariaLabel,
+  ariaLabel,
+  'aria-label': ariaLabelDom,
   className
 }: MenubarProps): import("react").JSX.Element;
 interface NavigationMenuItem {
@@ -3523,6 +3600,11 @@ interface NavigationMenuItem {
 }
 interface NavigationMenuProps {
   items: NavigationMenuItem[];
+  /**
+   * Invisible accessible name. The catalog convention (see the item-identity table in
+   * `docs/AI-RULES.md`); `aria-label` is accepted as an alias for the DOM spelling.
+   */
+  ariaLabel?: string;
   'aria-label'?: string;
   /**
    * Layout orientation of the component.
@@ -3535,7 +3617,8 @@ interface NavigationMenuProps {
 }
 declare function NavigationMenu({
   items,
-  'aria-label': ariaLabel,
+  'aria-label': ariaLabelDom,
+  ariaLabel,
   orientation,
   className
 }: NavigationMenuProps): import("react").JSX.Element;
@@ -3555,6 +3638,11 @@ interface TreeViewProps {
   defaultExpanded?: string[];
   onExpandedChange?: (expanded: string[]) => void;
   className?: string;
+  /**
+   * Invisible accessible name. The catalog convention (see the item-identity table in
+   * `docs/AI-RULES.md`); `aria-label` is accepted as an alias for the DOM spelling.
+   */
+  ariaLabel?: string;
   'aria-label'?: string;
 }
 declare function TreeView({
@@ -3567,19 +3655,30 @@ declare function TreeView({
   defaultExpanded,
   onExpandedChange,
   className,
-  'aria-label': ariaLabel
+  'aria-label': ariaLabelDom,
+  ariaLabel
 }: TreeViewProps): import("react").JSX.Element;
 declare const treeViewMessages: {
   loading: () => string;
   expand: () => string;
   collapse: () => string;
 };
+/**
+ * One row's data. **This is a type, not a component.**
+ *
+ * `StructuredList` is config-driven: pass `items`, not children. An adopter imported
+ * `StructuredListItem` expecting a composable `<StructuredListItem>` — a reasonable guess,
+ * since most catalogs ship both forms — wrote markup against it, and only then found the
+ * real API. There is no composable form and none is planned; the config shape is what
+ * makes the list keyboard-navigable and selectable without per-row wiring.
+ */
 interface StructuredListItem {
   id: string;
   cells: ReactNode[];
   selected?: boolean;
 }
 interface StructuredListProps {
+  /** The rows. `StructuredList` is config-driven — there is no composable child form. */
   items: StructuredListItem[];
   headers?: ReactNode[];
   /**
@@ -3671,6 +3770,22 @@ interface TimelineItem {
    * and `Steps` with no translation.
    */
   status?: ProgressInput;
+  /**
+   * What *kind* of entry this is, as a marker colour — independent of `status`, and
+   * overriding it on the marker when set.
+   *
+   * `status` answers "where is this in the sequence", which is the right question for a
+   * tracker (order placed → shipped → delivered). In an activity feed every entry is
+   * equally done, and what separates them is what produced them: an automated alert, a
+   * human note, a system event. Colouring those by progress renders them identically, so
+   * the fastest signal on the page is thrown away. Takes the catalog-wide `Tone`
+   * vocabulary (`neutral | info | success | warning | danger`, plus the `error` /
+   * `destructive` / `default` aliases).
+   *
+   * Tone is not a substitute for text: it is not perceivable without colour vision, so
+   * keep whatever the tone means also present in `title` or `description`.
+   */
+  tone?: ToneInput;
 }
 interface TimelineProps extends HTMLAttributes<HTMLOListElement> {
   items: TimelineItem[];
@@ -4364,6 +4479,11 @@ interface RadialProgressProps {
    */
   variant?: RadialProgressVariant;
   children?: React.ReactNode;
+  /**
+   * Invisible accessible name. The catalog convention (see the item-identity table in
+   * `docs/AI-RULES.md`); `aria-label` is accepted as an alias for the DOM spelling.
+   */
+  ariaLabel?: string;
   'aria-label'?: string;
   className?: string;
 }
@@ -4373,6 +4493,7 @@ declare function RadialProgress({
   variant,
   children,
   className,
+  ariaLabel,
   ...aria
 }: RadialProgressProps): import("react").JSX.Element;
 type SwapMode = 'rotate' | 'flip';
@@ -4391,6 +4512,11 @@ interface SwapProps {
   /** @deprecated Use `onValueChange` — it receives the same `checked` boolean. */
   onChange?: (checked: boolean) => void;
   mode?: SwapMode;
+  /**
+   * Invisible accessible name. The catalog convention (see the item-identity table in
+   * `docs/AI-RULES.md`); `aria-label` is accepted as an alias for the DOM spelling.
+   */
+  ariaLabel?: string;
   'aria-label'?: string;
   className?: string;
 }
@@ -4402,6 +4528,7 @@ declare function Swap({
   onChange,
   mode,
   className,
+  ariaLabel,
   ...aria
 }: SwapProps): import("react").JSX.Element;
 interface SwipeAction {
@@ -4761,4 +4888,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, 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, PageHeader, PageHeaderProps, 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, applyTheme, 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 };
+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, MenubarBaseProps, 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, PageHeader, PageHeaderProps, 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, applyTheme, 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/index.js

@@ -1,2 +1 @@
-'use client';
 export * from './react/src/index.js';

package/dist/indicator/indicator.js

@@ -1,5 +1,3 @@
-"use client";
-
 import e from "./indicator.module.js";
 import { jsx as t, jsxs as n } from "react/jsx-runtime";
 //#region ../components/src/indicator/indicator.tsx

package/dist/indicator/indicator.module.js

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

package/dist/inline-loading/inline-loading.js

@@ -1,8 +1,6 @@
-"use client";
-
 import { Spinner as e } from "../spinner/spinner.js";
 import t from "./inline-loading.module.js";
-import { cn as n } from "@cascivo/core";
+import { cn as n } from "@cascivo/core/pure";
 import { builtin as r, t as i } from "@cascivo/i18n";
 import { jsx as a, jsxs as o } from "react/jsx-runtime";
 //#region ../components/src/inline-loading/inline-loading.tsx

package/dist/inline-loading/inline-loading.module.js

@@ -1,5 +1,3 @@
-"use client";
-
 import './inline-loading.css';
 var e = {
 	"inline-loading": "_inline-loading_h27o5_2",

package/dist/input/input.js

@@ -1,34 +1,34 @@
 "use client";
 
 import e from "./input.module.js";
-import { cn as t, createMachine as n, useMachine as r } from "@cascivo/core";
-import { forwardRef as i } from "react";
+import { forwardRef as t } from "react";
+import { cn as n, createMachine as r, useMachine as i } from "@cascivo/core";
 import { jsx as a, jsxs as o } from "react/jsx-runtime";
 //#region ../components/src/input/input.tsx
-var s = n({
+var s = r({
 	initial: "idle",
 	states: {
 		idle: { on: { FOCUS: "focused" } },
 		focused: { on: { BLUR: "idle" } }
 	}
-}), c = i(function({ label: n, hint: i, error: c, size: l = "md", className: u, id: d, onFocus: f, onBlur: p, ...m }, h) {
-	let [g, _] = r(s), v = d ?? (n ? `cascade-input-${n.toLowerCase().replace(/\s+/g, "-")}` : void 0);
+}), c = t(function({ label: t, hint: r, error: c, size: l = "md", className: u, id: d, onFocus: f, onBlur: p, ...m }, h) {
+	let [g, _] = i(s), v = d ?? (t ? `cascade-input-${t.toLowerCase().replace(/\s+/g, "-")}` : void 0);
 	return /* @__PURE__ */ o("div", {
-		className: t(e.wrapper, u),
+		className: n(e.wrapper, u),
 		"data-state": c ? "error" : g.value,
 		"data-size": l,
 		children: [
-			n && /* @__PURE__ */ a("label", {
+			t && /* @__PURE__ */ a("label", {
 				className: e.label,
 				htmlFor: v,
-				children: n
+				children: t
 			}),
 			/* @__PURE__ */ a("input", {
 				ref: h,
 				id: v,
 				className: e.input,
 				"aria-invalid": c ? !0 : void 0,
-				"aria-describedby": c ? `${v}-error` : i ? `${v}-hint` : void 0,
+				"aria-describedby": c ? `${v}-error` : r ? `${v}-hint` : void 0,
 				onFocus: (e) => {
 					_("FOCUS"), f?.(e);
 				},
@@ -43,10 +43,10 @@ var s = n({
 				role: "alert",
 				children: c
 			}),
-			!c && i && /* @__PURE__ */ a("span", {
+			!c && r && /* @__PURE__ */ a("span", {
 				id: `${v}-hint`,
 				className: e.hint,
-				children: i
+				children: r
 			})
 		]
 	});

package/dist/input/input.module.js

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

package/dist/input-group/input-group.js

@@ -1,7 +1,5 @@
-"use client";
-
 import e from "./input-group.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/input-group/input-group.tsx
 function i({ align: r = "inline-start", children: i, className: a, ...o }) {

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

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

package/dist/item/item.js

@@ -1,7 +1,5 @@
-"use client";
-
 import e from "./item.module.js";
-import { Slot as t, cn as n } from "@cascivo/core";
+import { Slot as t, cn as n } from "@cascivo/core/pure";
 import { jsx as r } from "react/jsx-runtime";
 //#region ../components/src/item/item.tsx
 function i({ asChild: i = !1, variant: a = "default", size: o = "md", className: s, children: c, ...l }) {

package/dist/item/item.module.js

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

package/dist/join/join.js

@@ -1,5 +1,3 @@
-"use client";
-
 import e from "./join.module.js";
 import { jsx as t } from "react/jsx-runtime";
 //#region ../components/src/join/join.tsx

package/dist/join/join.module.js

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

package/dist/kbd/kbd.js

@@ -1,7 +1,5 @@
-"use client";
-
 import e from "./kbd.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/kbd/kbd.tsx
 function r({ size: r = "md", className: i, children: a, ...o }) {

package/dist/kbd/kbd.module.js

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

package/dist/label/label.js

@@ -1,7 +1,5 @@
-"use client";
-
 import e from "./label.module.js";
-import { Slot as t, cn as n } from "@cascivo/core";
+import { Slot as t, cn as n } from "@cascivo/core/pure";
 import { builtin as r, t as i } from "@cascivo/i18n";
 import { Fragment as a, jsx as o, jsxs as s } from "react/jsx-runtime";
 //#region ../components/src/label/label.tsx

package/dist/label/label.module.js

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

package/dist/layouts/src/auto-grid/auto-grid.js

@@ -1,7 +1,5 @@
-"use client";
-
 import e from "./auto-grid.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 ../layouts/src/auto-grid/auto-grid.tsx
 function r({ min: r = "16rem", gap: i = 4, className: a, style: o, ...s }) {

package/dist/layouts/src/auto-grid/auto-grid.module.js

@@ -1,5 +1,3 @@
-"use client";
-
 import './auto-grid.css';
 //#region ../layouts/src/auto-grid/auto-grid.module.css
 var e = { "auto-grid": "_auto-grid_v8cqo_2" };

package/dist/layouts/src/center/center.js

@@ -1,7 +1,5 @@
-"use client";
-
 import e from "./center.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 ../layouts/src/center/center.tsx
 function r({ maxWidth: r = "48rem", className: i, style: a, ...o }) {

package/dist/layouts/src/center/center.module.js

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

package/dist/layouts/src/columns/columns.js

@@ -1,7 +1,5 @@
-"use client";
-
 import e from "./columns.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 ../layouts/src/columns/columns.tsx
 function r({ count: r = 2, gap: i = 4, className: a, style: o, children: s, ...c }) {

package/dist/layouts/src/columns/columns.module.js

@@ -1,5 +1,3 @@
-"use client";
-
 import './columns.css';
 var e = {
 	"columns-container": "_columns-container_1efih_2",

package/dist/layouts/src/flex/flex.js

@@ -1,7 +1,5 @@
-"use client";
-
 import e from "./flex.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 ../layouts/src/flex/flex.tsx
 function r({ direction: r = "vertical", gap: i = 4, align: a, justify: o, wrap: s = !1, className: c, style: l, ...u }) {

package/dist/layouts/src/flex/flex.module.js

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

package/dist/layouts/src/grid/grid.js

@@ -1,7 +1,5 @@
-"use client";
-
 import e from "./grid.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 ../layouts/src/grid/grid.tsx
 function r(e) {