@cascivo/react 0.8.0 → 0.9.0

package/dist/index.d.ts

@@ -1,4 +1,4 @@
-import { ErrorBoundary, FocusScope, LinkComponent, Portal, RovingOrientation, Signal, SuspenseBoundary, getLinkComponent, setLinkComponent } from "@cascivo/core";
+import { ErrorBoundary, FocusScope, LinkComponent, LinkComponentProps, Portal, RovingOrientation, Signal, SuspenseBoundary, getLinkComponent, setLinkComponent } 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> {
@@ -335,6 +335,9 @@ declare function RadioGroup({
 interface ToggleProps extends Omit<ButtonHTMLAttributes<HTMLButtonElement>, 'onChange'> {
   checked?: boolean;
   defaultChecked?: boolean;
+  /** Called with the new checked state when the switch is toggled. */
+  onValueChange?: (checked: boolean) => void;
+  /** @deprecated Use `onValueChange` — it receives the same `checked` boolean. */
   onChange?: (checked: boolean) => void;
   /**
    * Renders a **visible** text label beside the switch that also becomes its
@@ -348,6 +351,7 @@ interface ToggleProps extends Omit<ButtonHTMLAttributes<HTMLButtonElement>, 'onC
 declare function Toggle({
   checked,
   defaultChecked,
+  onValueChange,
   onChange,
   label,
   size,
@@ -652,7 +656,13 @@ interface SideNavLinkProps {
   'data-state'?: 'active' | undefined;
   'data-tone'?: Exclude<SideNavTone, 'default'> | undefined;
   tabIndex?: number | undefined;
-  onClick: (e: MouseEvent<HTMLAnchorElement>) => void;
+  /**
+   * Always provided by cascivo when it builds the bag; only calls
+   * `preventDefault()` for a disabled item, otherwise inert. Optional on the type
+   * so it composes cleanly — spread it onto a router `<Link>`, which layers its own
+   * click handling on top.
+   */
+  onClick?: (e: MouseEvent<HTMLAnchorElement>) => void;
 }
 /** A selectable/navigable sub-item (link when `href` is set, action when `onSelect` is set). */
 interface SideNavLinkSubItem {
@@ -924,6 +934,9 @@ declare function OverflowMenu({
 interface SearchProps {
   value?: string;
   defaultValue?: string;
+  /** Called with the current text on every keystroke. */
+  onValueChange?: (value: string) => void;
+  /** @deprecated Use `onValueChange` — it receives the same string. */
   onChange?: (value: string) => void;
   onSearch?: (value: string) => void;
   debounceMs?: number;
@@ -938,6 +951,7 @@ interface SearchProps {
 declare function Search({
   value,
   defaultValue,
+  onValueChange,
   onChange,
   onSearch,
   debounceMs,
@@ -952,6 +966,9 @@ declare function Search({
 interface NumberInputProps extends Omit<InputHTMLAttributes<HTMLInputElement>, 'size' | 'type' | 'value' | 'defaultValue' | 'onChange' | 'min' | 'max' | 'step'> {
   value?: number | null;
   defaultValue?: number;
+  /** Called with the new numeric value (or null when cleared). */
+  onValueChange?: (value: number | null) => void;
+  /** @deprecated Use `onValueChange` — it receives the same `number | null`. */
   onChange?: (value: number | null) => void;
   min?: number;
   max?: number;
@@ -968,6 +985,7 @@ interface NumberInputProps extends Omit<InputHTMLAttributes<HTMLInputElement>, '
 declare function NumberInput({
   value,
   defaultValue,
+  onValueChange,
   onChange,
   min,
   max,
@@ -1251,6 +1269,9 @@ interface ComboboxProps {
   options: ComboboxOption[];
   value?: string;
   defaultValue?: string;
+  /** Called with the selected option value (or undefined when cleared). */
+  onValueChange?: (value: string | undefined) => void;
+  /** @deprecated Use `onValueChange` — it receives the same `string | undefined`. */
   onChange?: (value: string | undefined) => void;
   clearable?: boolean;
   searchable?: boolean;
@@ -1267,6 +1288,7 @@ declare function Combobox({
   options,
   value,
   defaultValue,
+  onValueChange,
   onChange,
   clearable,
   searchable,
@@ -1288,6 +1310,9 @@ interface DatePickerLabels {
 interface DatePickerProps {
   value?: string;
   defaultValue?: string;
+  /** Called with the selected ISO date string (or undefined when cleared). */
+  onValueChange?: (value: string | undefined) => void;
+  /** @deprecated Use `onValueChange` — it receives the same ISO `string | undefined`. */
   onChange?: (value: string | undefined) => void;
   min?: string;
   max?: string;
@@ -1304,6 +1329,7 @@ interface DatePickerProps {
 declare function DatePicker({
   value,
   defaultValue,
+  onValueChange,
   onChange,
   min,
   max,
@@ -1363,6 +1389,9 @@ declare function FileUploader({
 interface TimePickerProps extends Omit<InputHTMLAttributes<HTMLInputElement>, 'size' | 'type' | 'value' | 'defaultValue' | 'onChange' | 'min' | 'max' | 'step'> {
   value?: string;
   defaultValue?: string;
+  /** Called with the new `HH:MM` time string when the value changes. */
+  onValueChange?: (value: string) => void;
+  /** @deprecated Use `onValueChange` — it receives the same time string. */
   onChange?: (value: string) => void;
   min?: string;
   max?: string;
@@ -1375,6 +1404,7 @@ interface TimePickerProps extends Omit<InputHTMLAttributes<HTMLInputElement>, 's
 declare function TimePicker({
   value,
   defaultValue,
+  onValueChange,
   onChange,
   min,
   max,
@@ -2315,6 +2345,9 @@ interface FilterProps {
   options: FilterOption[];
   value?: string[];
   defaultValue?: string[];
+  /** Called with the selected values whenever the selection changes. */
+  onValueChange?: (selected: string[]) => void;
+  /** @deprecated Use `onValueChange` — it receives the same `string[]`. */
   onChange?: (selected: string[]) => void;
   multi?: boolean;
   variant?: FilterVariant;
@@ -2325,6 +2358,7 @@ declare function Filter({
   options,
   value,
   defaultValue,
+  onValueChange,
   onChange,
   multi,
   variant,
@@ -3201,6 +3235,9 @@ interface SwapProps {
   on: React.ReactNode;
   off: React.ReactNode;
   checked?: boolean;
+  /** Called with the new checked state when the swap is toggled. */
+  onValueChange?: (checked: boolean) => void;
+  /** @deprecated Use `onValueChange` — it receives the same `checked` boolean. */
   onChange?: (checked: boolean) => void;
   mode?: SwapMode;
   'aria-label'?: string;
@@ -3210,6 +3247,7 @@ declare function Swap({
   on,
   off,
   checked,
+  onValueChange,
   onChange,
   mode,
   className,
@@ -3365,8 +3403,11 @@ declare function setTheme(next: string): void;
 declare function useTheme(): readonly [Signal<string>, (next: string) => void];
 interface ThemeProviderProps {
   /**
-   * Theme to use when nothing is persisted yet. Falls back to the visitor's OS
-   * `prefers-color-scheme` (light/dark), then to `'light'`.
+   * Theme to use when nothing is persisted yet. When set, it **wins over** the
+   * visitor's OS `prefers-color-scheme` — pass it for a "dark by default" or
+   * custom-theme (`'midnight'`, …) app. Omit it to follow the OS (light/dark),
+   * falling back to `'light'`. Precedence: persisted value > `defaultTheme` (if
+   * set) > OS preference > `'light'`.
    */
   defaultTheme?: string;
   /**
@@ -3413,11 +3454,23 @@ declare function ThemeProvider({
  * SSR or a hard reload. Pass the same `storageKey`/`attribute`/`defaultTheme`
  * you give {@link ThemeProvider}.
  *
+ * Precedence matches {@link ThemeProvider}: persisted value > `defaultTheme`
+ * (if set) > OS `prefers-color-scheme` > `'light'`. Passing `defaultTheme`
+ * suppresses the OS check, so a "dark by default" app stays dark on a light-OS
+ * visitor.
+ *
+ * The script sets `data-theme` **before** React hydrates, so add
+ * `suppressHydrationWarning` to the element that carries the attribute (usually
+ * `<html>`) — the mutation is intentional, and without the flag React 19 logs a
+ * hydration mismatch.
+ *
  * ```tsx
  * // Next.js app/layout.tsx
- * <head>
- *   <script dangerouslySetInnerHTML={{ __html: themePreloadScript() }} />
- * </head>
+ * <html suppressHydrationWarning>
+ *   <head>
+ *     <script dangerouslySetInnerHTML={{ __html: themePreloadScript({ defaultTheme: 'dark' }) }} />
+ *   </head>
+ * </html>
  * ```
  */
 declare function themePreloadScript(options?: {
@@ -3425,4 +3478,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, 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$1 as 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, 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, 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$1 as 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, treeViewMessages, useForm, usePopover, useTheme, useToast, useTocFromRegion };

package/dist/index.js

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

package/dist/number-input/number-input.js

@@ -30,66 +30,66 @@ function m(e) {
 	let n = Number(t);
 	return Number.isFinite(n) ? n : null;
 }
-function h({ value: n, defaultValue: h, onChange: g, min: _, max: v, step: y = 1, precision: b, formatOptions: x, label: S, hint: C, error: w, size: T = "md", disabled: E, incrementLabel: D, decrementLabel: O, className: k, id: A, onFocus: j, onBlur: M, onKeyDown: N, ...P }) {
+function h({ value: n, defaultValue: h, onValueChange: g, onChange: _, min: v, max: y, step: b = 1, precision: x, formatOptions: S, label: C, hint: w, error: T, size: E = "md", disabled: D, incrementLabel: O, decrementLabel: k, className: A, id: j, onFocus: M, onBlur: N, onKeyDown: P, ...F }) {
 	a();
-	let F = D ?? s(o.numberInput.increment), I = O ?? s(o.numberInput.decrement), [L, R] = r(u), z = n !== void 0, B = i(h ?? null), V = i(""), H = z ? n : B.value, U = A ?? (S ? `cascade-number-input-${S.toLowerCase().replace(/\s+/g, "-")}` : void 0), W = (e) => {
-		z || (B.value = e), V.value = e == null ? "" : String(e), e !== H && g?.(e);
-	}, G = () => {
-		let e = m(V.value);
-		e != null && (e = d(e, _, v), b !== void 0 && (e = p(e, b))), W(e);
-	}, K = (e) => {
-		let t = (L.value === "focused" ? m(V.value) : H) ?? 0, n = b ?? Math.max(f(y), f(t));
-		W(d(p(t + e * y, n), _, v));
-	}, q = L.value === "focused" ? V.value : ((e) => e == null ? "" : x ? new Intl.NumberFormat(void 0, x).format(e) : String(e))(H), J = H != null && v !== void 0 && H >= v, Y = H != null && _ !== void 0 && H <= _;
+	let I = O ?? s(o.numberInput.increment), L = k ?? s(o.numberInput.decrement), [R, z] = r(u), B = n !== void 0, V = i(h ?? null), H = i(""), U = B ? n : V.value, W = j ?? (C ? `cascade-number-input-${C.toLowerCase().replace(/\s+/g, "-")}` : void 0), G = (e) => {
+		B || (V.value = e), H.value = e == null ? "" : String(e), e !== U && (g ?? _)?.(e);
+	}, K = () => {
+		let e = m(H.value);
+		e != null && (e = d(e, v, y), x !== void 0 && (e = p(e, x))), G(e);
+	}, q = (e) => {
+		let t = (R.value === "focused" ? m(H.value) : U) ?? 0, n = x ?? Math.max(f(b), f(t));
+		G(d(p(t + e * b, n), v, y));
+	}, J = R.value === "focused" ? H.value : ((e) => e == null ? "" : S ? new Intl.NumberFormat(void 0, S).format(e) : String(e))(U), Y = U != null && y !== void 0 && U >= y, X = U != null && v !== void 0 && U <= v;
 	return /* @__PURE__ */ l("div", {
-		className: t(e.wrapper, k),
-		"data-state": w ? "error" : L.value,
-		"data-size": T,
+		className: t(e.wrapper, A),
+		"data-state": T ? "error" : R.value,
+		"data-size": E,
 		children: [
-			S && /* @__PURE__ */ c("label", {
+			C && /* @__PURE__ */ c("label", {
 				className: e.label,
-				htmlFor: U,
-				children: S
+				htmlFor: W,
+				children: C
 			}),
 			/* @__PURE__ */ l("div", {
 				className: e.field,
 				children: [/* @__PURE__ */ c("input", {
-					id: U,
+					id: W,
 					type: "text",
 					inputMode: "decimal",
 					autoComplete: "off",
 					role: "spinbutton",
 					className: e.input,
-					value: q,
-					disabled: E,
-					"aria-valuenow": H ?? void 0,
-					"aria-valuemin": _,
-					"aria-valuemax": v,
-					"aria-invalid": w ? !0 : void 0,
-					"aria-describedby": w ? `${U}-error` : C ? `${U}-hint` : void 0,
+					value: J,
+					disabled: D,
+					"aria-valuenow": U ?? void 0,
+					"aria-valuemin": v,
+					"aria-valuemax": y,
+					"aria-invalid": T ? !0 : void 0,
+					"aria-describedby": T ? `${W}-error` : w ? `${W}-hint` : void 0,
 					onChange: (e) => {
-						V.value = e.target.value;
+						H.value = e.target.value;
 					},
 					onFocus: (e) => {
-						V.value = H == null ? "" : String(H), R("FOCUS"), j?.(e);
+						H.value = U == null ? "" : String(U), z("FOCUS"), M?.(e);
 					},
 					onBlur: (e) => {
-						G(), R("BLUR"), M?.(e);
+						K(), z("BLUR"), N?.(e);
 					},
 					onKeyDown: (e) => {
-						e.key === "ArrowUp" ? (e.preventDefault(), K(1)) : e.key === "ArrowDown" ? (e.preventDefault(), K(-1)) : e.key === "Enter" && G(), N?.(e);
+						e.key === "ArrowUp" ? (e.preventDefault(), q(1)) : e.key === "ArrowDown" ? (e.preventDefault(), q(-1)) : e.key === "Enter" && K(), P?.(e);
 					},
-					...P
+					...F
 				}), /* @__PURE__ */ l("div", {
 					className: e.steppers,
 					children: [/* @__PURE__ */ c("button", {
 						type: "button",
 						className: e.stepper,
-						"aria-label": F,
+						"aria-label": I,
 						tabIndex: -1,
-						disabled: E || J,
+						disabled: D || Y,
 						onMouseDown: (e) => e.preventDefault(),
-						onClick: () => K(1),
+						onClick: () => q(1),
 						children: /* @__PURE__ */ c("svg", {
 							viewBox: "0 0 10 10",
 							"aria-hidden": "true",
@@ -106,11 +106,11 @@ function h({ value: n, defaultValue: h, onChange: g, min: _, max: v, step: y = 1
 					}), /* @__PURE__ */ c("button", {
 						type: "button",
 						className: e.stepper,
-						"aria-label": I,
+						"aria-label": L,
 						tabIndex: -1,
-						disabled: E || Y,
+						disabled: D || X,
 						onMouseDown: (e) => e.preventDefault(),
-						onClick: () => K(-1),
+						onClick: () => q(-1),
 						children: /* @__PURE__ */ c("svg", {
 							viewBox: "0 0 10 10",
 							"aria-hidden": "true",
@@ -127,16 +127,16 @@ function h({ value: n, defaultValue: h, onChange: g, min: _, max: v, step: y = 1
 					})]
 				})]
 			}),
-			w && /* @__PURE__ */ c("span", {
-				id: `${U}-error`,
+			T && /* @__PURE__ */ c("span", {
+				id: `${W}-error`,
 				className: e.error,
 				role: "alert",
-				children: w
+				children: T
 			}),
-			!w && C && /* @__PURE__ */ c("span", {
-				id: `${U}-hint`,
+			!T && w && /* @__PURE__ */ c("span", {
+				id: `${W}-hint`,
 				className: e.hint,
-				children: C
+				children: w
 			})
 		]
 	});

package/dist/react/src/theme.js

@@ -7,37 +7,42 @@ import { useRef as a } from "react";
 //#region src/theme.tsx
 var o = "cascivo-theme", s = "data-theme", c = null, l = {
 	storageKey: o,
-	defaultTheme: "light"
+	defaultTheme: "light",
+	explicit: !1
 };
 function u(e) {
 	return typeof window > "u" || typeof window.matchMedia != "function" ? e : window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : window.matchMedia("(prefers-color-scheme: light)").matches ? "light" : e;
 }
 function d() {
-	return c ??= e(l.storageKey, u(l.defaultTheme)), c;
+	return l.explicit ? l.defaultTheme : u(l.defaultTheme);
 }
-function f(e) {
-	d().value = e;
+function f() {
+	return c ??= e(l.storageKey, d()), c;
 }
-function p() {
-	return n(), [d(), f];
+function p(e) {
+	f().value = e;
 }
-function m({ defaultTheme: e, value: n, storageKey: u = o, attribute: f = s, target: p, onChange: m, children: h }) {
+function m() {
+	return n(), [f(), p];
+}
+function h({ defaultTheme: e, value: n, storageKey: u = o, attribute: d = s, target: p, onChange: m, children: h }) {
 	let g = a(!1);
 	g.current || (g.current = !0, (c === null || l.storageKey !== u) && (l = {
 		storageKey: u,
-		defaultTheme: e ?? "light"
+		defaultTheme: e ?? "light",
+		explicit: e !== void 0
 	}, c = null));
-	let _ = d();
+	let _ = f();
 	n !== void 0 && (_.value = n);
 	let v = a(m);
 	return v.current = m, t(() => {
 		let e = _.value;
-		(p ? p.current : typeof document < "u" ? document.documentElement : null)?.setAttribute(f, e), v.current?.(e);
+		(p ? p.current : typeof document < "u" ? document.documentElement : null)?.setAttribute(d, e), v.current?.(e);
 	}), /* @__PURE__ */ i(r, { children: h });
 }
-function h(e = {}) {
-	let t = JSON.stringify(e.storageKey ?? o), n = JSON.stringify(e.attribute ?? s);
-	return `(function(){try{var v=${JSON.stringify(e.defaultTheme ?? "light")};if(typeof matchMedia==='function'){if(matchMedia('(prefers-color-scheme: dark)').matches)v='dark';else if(matchMedia('(prefers-color-scheme: light)').matches)v='light';}var raw=localStorage.getItem(${t});if(raw){v=raw;try{var e=JSON.parse(raw);if(e&&typeof e==='object'&&'value'in e)v=e.value;}catch(_){}}document.documentElement.setAttribute(${n},v);}catch(_){}})();`;
+function g(e = {}) {
+	let t = JSON.stringify(e.storageKey ?? o), n = JSON.stringify(e.attribute ?? s), r = JSON.stringify(e.defaultTheme ?? "light"), i = e.defaultTheme === void 0 ? "if(typeof matchMedia==='function'){if(matchMedia('(prefers-color-scheme: dark)').matches)v='dark';else if(matchMedia('(prefers-color-scheme: light)').matches)v='light';}" : "";
+	return `(function(){try{var v=${r};` + i + `var raw=localStorage.getItem(${t});if(raw){v=raw;try{var e=JSON.parse(raw);if(e&&typeof e==='object'&&'value'in e)v=e.value;}catch(_){}}document.documentElement.setAttribute(${n},v);}catch(_){}})();`;
 }
 //#endregion
-export { m as ThemeProvider, f as setTheme, h as themePreloadScript, p as useTheme };
+export { h as ThemeProvider, p as setTheme, g as themePreloadScript, m as useTheme };

package/dist/search/search.js

@@ -29,59 +29,59 @@ function d() {
 		})]
 	});
 }
-function f({ value: f, defaultValue: p = "", onChange: m, onSearch: h, debounceMs: g = 300, placeholder: _, size: v = "md", label: y, disabled: b = !1, clearLabel: x, id: S, className: C }) {
+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 w = _ ?? o(a.search.placeholder), T = y ?? o(a.search.label), E = x ?? o(a.search.clear), D = l(null), O = l("");
-	O.current === "" && (u += 1, O.current = `cascade-search-${u}`);
-	let k = S ?? O.current, A = f !== void 0, j = n(A ? f : p);
-	A && (j.value = f);
-	let M = l(h);
-	M.current = h;
-	let N = l(null), P = () => {
-		N.current !== null && (clearTimeout(N.current), N.current = null);
+	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);
+	j && (M.value = f);
+	let N = l(g);
+	N.current = g;
+	let P = l(null), F = () => {
+		P.current !== null && (clearTimeout(P.current), P.current = null);
 	};
-	r(() => P);
-	let F = (e) => {
+	r(() => F);
+	let I = (e) => {
 		let t = e.target.value;
-		A || (j.value = t), m?.(t), P(), N.current = setTimeout(() => {
-			N.current = null, M.current?.(t);
-		}, g);
-	}, I = (e) => {
-		e.key === "Enter" && (P(), h?.(j.value));
-	}, L = () => {
-		P(), A || (j.value = ""), m?.(""), h?.(""), D.current?.focus();
-	}, R = j.value !== "";
+		j || (M.value = t), (m ?? h)?.(t), F(), P.current = setTimeout(() => {
+			P.current = null, N.current?.(t);
+		}, _);
+	}, L = (e) => {
+		e.key === "Enter" && (F(), g?.(M.value));
+	}, R = () => {
+		F(), j || (M.value = ""), (m ?? h)?.(""), g?.(""), O.current?.focus();
+	}, z = M.value !== "";
 	return /* @__PURE__ */ c("div", {
-		className: t(e.root, C),
-		"data-size": v,
-		"data-state": R ? "filled" : "empty",
+		className: t(e.root, w),
+		"data-size": y,
+		"data-state": z ? "filled" : "empty",
 		children: [
 			/* @__PURE__ */ s("label", {
 				className: e.label,
-				htmlFor: k,
-				children: T
+				htmlFor: A,
+				children: E
 			}),
 			/* @__PURE__ */ s("span", {
 				className: e.icon,
 				children: /* @__PURE__ */ s(d, {})
 			}),
 			/* @__PURE__ */ s("input", {
-				ref: D,
-				id: k,
+				ref: O,
+				id: A,
 				type: "search",
 				className: e.input,
-				value: j.value,
-				placeholder: w,
-				disabled: b,
-				onChange: F,
-				onKeyDown: I
+				value: M.value,
+				placeholder: T,
+				disabled: x,
+				onChange: I,
+				onKeyDown: L
 			}),
-			R && /* @__PURE__ */ s("button", {
+			z && /* @__PURE__ */ s("button", {
 				type: "button",
 				className: e.clear,
-				"aria-label": E,
-				disabled: b,
-				onClick: L,
+				"aria-label": D,
+				disabled: x,
+				onClick: R,
 				children: /* @__PURE__ */ s("span", {
 					"aria-hidden": "true",
 					children: "✕"

package/dist/swap/swap.js

@@ -4,23 +4,23 @@ import e from "./swap.module.js";
 import { useSignal as t, useSignals as n } from "@cascivo/core";
 import { jsx as r, jsxs as i } from "react/jsx-runtime";
 //#region ../components/src/swap/swap.tsx
-function a({ on: a, off: o, checked: s = !1, onChange: c, mode: l = "rotate", className: u, ...d }) {
+function a({ on: a, off: o, checked: s = !1, onValueChange: c, onChange: l, mode: u = "rotate", className: d, ...f }) {
 	n();
-	let f = t(s);
-	f.value = s;
-	function p() {
-		let e = !f.value;
-		c?.(e);
+	let p = t(s);
+	p.value = s;
+	function m() {
+		let e = !p.value;
+		(c ?? l)?.(e);
 	}
 	return /* @__PURE__ */ i("button", {
 		type: "button",
 		role: "switch",
-		"aria-checked": f.value,
-		className: [e.swap, u].filter(Boolean).join(" "),
-		"data-checked": f.value || void 0,
-		"data-mode": l,
-		onClick: p,
-		...d,
+		"aria-checked": p.value,
+		className: [e.swap, d].filter(Boolean).join(" "),
+		"data-checked": p.value || void 0,
+		"data-mode": u,
+		onClick: m,
+		...f,
 		children: [/* @__PURE__ */ r("span", {
 			className: e.on,
 			"aria-hidden": "true",

package/dist/time-picker/time-picker.js

@@ -11,49 +11,49 @@ var s = n({
 		focused: { on: { BLUR: "idle" } }
 	}
 });
-function c({ value: n, defaultValue: c, onChange: l, min: u, max: d, step: f, label: p, hint: m, error: h, size: g = "md", className: _, id: v, onFocus: y, onBlur: b, ...x }) {
+function c({ value: n, defaultValue: c, onValueChange: l, onChange: u, min: d, max: f, step: p, label: m, hint: h, error: g, size: _ = "md", className: v, id: y, onFocus: b, onBlur: x, ...S }) {
 	i();
-	let [S, C] = r(s), w = v ?? (p ? `cascade-time-picker-${p.toLowerCase().replace(/\s+/g, "-")}` : void 0);
+	let [C, w] = r(s), T = y ?? (m ? `cascade-time-picker-${m.toLowerCase().replace(/\s+/g, "-")}` : void 0);
 	return /* @__PURE__ */ o("div", {
-		className: t(e.wrapper, _),
-		"data-state": h ? "error" : S.value,
-		"data-size": g,
+		className: t(e.wrapper, v),
+		"data-state": g ? "error" : C.value,
+		"data-size": _,
 		children: [
-			p && /* @__PURE__ */ a("label", {
+			m && /* @__PURE__ */ a("label", {
 				className: e.label,
-				htmlFor: w,
-				children: p
+				htmlFor: T,
+				children: m
 			}),
 			/* @__PURE__ */ a("input", {
-				id: w,
+				id: T,
 				type: "time",
 				className: e.input,
 				value: n,
 				defaultValue: c,
-				min: u,
-				max: d,
-				step: f,
-				"aria-invalid": h ? !0 : void 0,
-				"aria-describedby": h ? `${w}-error` : m ? `${w}-hint` : void 0,
-				onChange: (e) => l?.(e.target.value),
+				min: d,
+				max: f,
+				step: p,
+				"aria-invalid": g ? !0 : void 0,
+				"aria-describedby": g ? `${T}-error` : h ? `${T}-hint` : void 0,
+				onChange: (e) => (l ?? u)?.(e.target.value),
 				onFocus: (e) => {
-					C("FOCUS"), y?.(e);
+					w("FOCUS"), b?.(e);
 				},
 				onBlur: (e) => {
-					C("BLUR"), b?.(e);
+					w("BLUR"), x?.(e);
 				},
-				...x
+				...S
 			}),
-			h && /* @__PURE__ */ a("span", {
-				id: `${w}-error`,
+			g && /* @__PURE__ */ a("span", {
+				id: `${T}-error`,
 				className: e.error,
 				role: "alert",
-				children: h
+				children: g
 			}),
-			!h && m && /* @__PURE__ */ a("span", {
-				id: `${w}-hint`,
+			!g && h && /* @__PURE__ */ a("span", {
+				id: `${T}-hint`,
 				className: e.hint,
-				children: m
+				children: h
 			})
 		]
 	});