@cascivo/react 0.5.1 → 0.6.3

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

@@ -2,21 +2,36 @@
 
 import './command-menu.css';
 var e = {
-	dialog: "_dialog_cpgn8_2",
-	panel: "_panel_cpgn8_62",
-	search: "_search_cpgn8_72",
-	searchIcon: "_searchIcon_cpgn8_80",
-	input: "_input_cpgn8_85",
-	list: "_list_cpgn8_104",
-	group: "_group_cpgn8_110",
-	heading: "_heading_cpgn8_114",
-	option: "_option_cpgn8_123",
-	icon: "_icon_cpgn8_148",
-	label: "_label_cpgn8_155",
-	shortcut: "_shortcut_cpgn8_162",
-	empty: "_empty_cpgn8_168",
-	footer: "_footer_cpgn8_176",
-	hint: "_hint_cpgn8_187"
+	dialog: "_dialog_1dfrg_2",
+	panel: "_panel_1dfrg_62",
+	search: "_search_1dfrg_72",
+	searchIcon: "_searchIcon_1dfrg_80",
+	scopeChip: "_scopeChip_1dfrg_85",
+	scopeClear: "_scopeClear_1dfrg_101",
+	input: "_input_1dfrg_123",
+	scopes: "_scopes_1dfrg_142",
+	scopesLabel: "_scopesLabel_1dfrg_153",
+	scopePill: "_scopePill_1dfrg_163",
+	scopePrefix: "_scopePrefix_1dfrg_193",
+	list: "_list_1dfrg_199",
+	group: "_group_1dfrg_205",
+	heading: "_heading_1dfrg_209",
+	count: "_count_1dfrg_222",
+	option: "_option_1dfrg_228",
+	icon: "_icon_1dfrg_253",
+	text: "_text_1dfrg_260",
+	label: "_label_1dfrg_268",
+	match: "_match_1dfrg_274",
+	description: "_description_1dfrg_280",
+	status: "_status_1dfrg_289",
+	statusDot: "_statusDot_1dfrg_316",
+	actions: "_actions_1dfrg_325",
+	action: "_action_1dfrg_325",
+	actionKeys: "_actionKeys_1dfrg_369",
+	shortcut: "_shortcut_1dfrg_374",
+	empty: "_empty_1dfrg_392",
+	footer: "_footer_1dfrg_400",
+	hint: "_hint_1dfrg_411"
 };
 //#endregion
 export { e as default };

package/dist/form/form.js

@@ -19,24 +19,33 @@ async function c(e, t) {
 	return r;
 }
 function l(e) {
-	let n = r({ ...e.initialValues }), i = r({}), a = r({}), o = r(!1), s = (e, t) => {
-		n.value = {
+	let n = r({ ...e.initialValues }), i = r({}), a = r({}), o = r(!1), s = async (t) => {
+		let n = {};
+		return e.schema && (n = await c(e.schema, t)), Object.keys(n).length === 0 && e.validate && (n = await e.validate(t)), n;
+	}, l = 0, u = (t, r) => {
+		if (n.value = {
 			...n.value,
-			[e]: t
-		};
+			[t]: r
+		}, !e.validateOnChange) return;
+		let a = ++l;
+		s(n.value).then((e) => {
+			if (a !== l) return;
+			let n = { ...i.value }, r = e[t];
+			r === void 0 ? delete n[t] : n[t] = r, i.value = n;
+		});
 	};
 	return {
 		values: n,
 		errors: i,
 		touched: a,
 		submitting: o,
-		setValue: s,
+		setValue: u,
 		field(e) {
 			return {
 				get value() {
 					return n.value[e];
 				},
-				onChange: (t) => s(e, t),
+				onChange: (t) => u(e, t),
 				onBlur: () => {
 					a.value = {
 						...a.value,
@@ -51,11 +60,9 @@ function l(e) {
 		async submit(r) {
 			o.value = !0;
 			try {
-				let o = {};
-				e.schema && (o = await c(e.schema, n.value)), Object.keys(o).length === 0 && e.validate && (o = await e.validate(n.value));
-				let s = Object.fromEntries(Object.keys(e.initialValues).map((e) => [e, !0]));
+				let o = await s(n.value), c = Object.fromEntries(Object.keys(e.initialValues).map((e) => [e, !0]));
 				t(() => {
-					i.value = o, a.value = s;
+					i.value = o, a.value = c;
 				}), Object.keys(o).length === 0 && await r(n.value);
 			} finally {
 				o.value = !1;

package/dist/index.d.ts

@@ -1051,21 +1051,52 @@ interface CommandPage {
   placeholder?: string;
   groups: CommandGroup[];
 }
+/** An inline action revealed on the active/hovered row (e.g. "Open ↵", "New tab ⌘↵"). */
+interface CommandAction {
+  id: string;
+  label: string;
+  /** Keycaps shown after the label, e.g. ['↵'] or ['⌘', '↵']. */
+  shortcut?: string[];
+  onSelect: () => void;
+}
+/** A status pill shown on the right of a row (e.g. cluster health). */
+interface CommandStatus {
+  label: string;
+  tone?: 'healthy' | 'degraded' | 'neutral';
+}
 interface CommandItem {
   id: string;
   label: string;
+  /** Secondary metadata line rendered in mono beneath the label (e.g. `region · plan · id`). */
+  description?: string;
   icon?: ReactNode;
   shortcut?: string[];
   keywords?: string[];
-  /** Exactly one of onSelect or page is required */
+  status?: CommandStatus;
+  /**
+   * Inline actions revealed when the row is active/hovered. The first is the
+   * primary (Enter), the second the secondary (Cmd/Ctrl+Enter); each is also
+   * clickable. Takes precedence over `onSelect` for keyboard activation.
+   */
+  actions?: CommandAction[];
+  /** Primary activation. Exactly one of onSelect, page, or actions drives a row. */
   onSelect?: () => void;
   disabled?: boolean;
   page?: CommandPage;
 }
 interface CommandGroup {
   heading?: string;
+  /** Associates the group with a scope id; hidden unless that scope (or none) is active. */
+  scope?: string;
   items: CommandItem[];
 }
+/** A filter scope selectable via pill, typed prefix (`c:`/`c `), or Tab. */
+interface CommandScope {
+  id: string;
+  label: string;
+  /** Single-char prefix that activates this scope when typed, e.g. 'c' or '>'. */
+  prefix?: string;
+}
 interface CommandMenuProps {
   open: boolean;
   onOpenChange: (open: boolean) => void;
@@ -1076,13 +1107,23 @@ interface CommandMenuProps {
   label?: string;
   loading?: boolean;
   onQueryChange?: (query: string) => void;
+  /** Selectable filter scopes; enables the scope bar, chip, prefixes, and Tab cycling. */
+  scopes?: CommandScope[];
   className?: string;
 }
+interface FuzzyMatch {
+  score: number;
+  /** Indices in `text` that matched, in order. */
+  indices: number[];
+}
 /**
  * Fuzzy subsequence matcher. Every character of `query` must appear in order
- * (case-insensitive) in `text`. Returns 0 for no match; higher is better.
- * Consecutive runs and word-start matches score bonuses.
+ * (case-insensitive) in `text`. Returns null for no match; higher score is
+ * better. Consecutive runs and word-start matches score bonuses. `indices`
+ * are the matched character positions, used to highlight the glyphs.
  */
+declare function fuzzyMatch(query: string, text: string): FuzzyMatch | null;
+/** Score-only helper (backwards compatible). Returns 0 for no match. */
 declare function fuzzyScore(query: string, text: string): number;
 declare function CommandMenu({
   open,
@@ -1094,6 +1135,7 @@ declare function CommandMenu({
   label,
   loading,
   onQueryChange,
+  scopes,
   className
 }: CommandMenuProps): import("react").JSX.Element;
 interface StandardSchemaV1<Input = unknown, Output = Input> {
@@ -1127,6 +1169,13 @@ interface FormConfig<T extends Record<string, unknown>> {
   validate?: (values: T) => Errors<T> | Promise<Errors<T>>;
   /** Standard Schema V1 compatible schema (zod, valibot, arktype, …). Runs before validate(). */
   schema?: StandardSchemaV1;
+  /**
+   * Revalidate on every `setValue`/`field().onChange`, updating only the changed
+   * field's error (other fields' errors are left untouched until submit). Off by
+   * default — validation runs on submit only. Because updates flow through
+   * signals, keystroke-frequency revalidation triggers no React re-render.
+   */
+  validateOnChange?: boolean;
 }
 interface FormStore<T extends Record<string, unknown>> {
   values: Signal<T>;
@@ -3169,4 +3218,181 @@ declare function SwipeItem({
   trailingActions,
   className
 }: SwipeItemProps): import("react").JSX.Element;
-export { Accordion, AccordionContent, AccordionItem, AccordionItemProps, AccordionProps, AccordionTrigger, ActionSheet, ActionSheetAction, ActionSheetProps, Alert, AlertDialog, AlertDialogLabels, AlertDialogProps, AlertProps, AppShell, AppShellProps, AspectRatio, AspectRatioProps, 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, ChatBubble, ChatBubbleProps, ChatBubbleSide, Checkbox, CheckboxCard, CheckboxCardProps, CheckboxProps, Code, type CodeLang, CodeProps, CodeSnippet, CodeSnippetProps, Collapsible, CollapsibleProps, ColorPicker, ColorPickerLabels, ColorPickerProps, Column, Combobox, ComboboxLabels, ComboboxOption, ComboboxProps, CommandGroup, CommandItem, CommandMenu, CommandMenuProps, CommandPage, 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, FocusScope, Form, FormConfig, FormProps, FormStore, 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, 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, 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, SideNavLinkSubItem, SideNavProps, SideNavSubItem, SideNavTone, Skeleton, SkeletonProps, SkipNavLink, SkipNavLinkProps, SkipNavTarget, SkipNavTargetProps, Slider, SliderProps, SortDirection, SortState, 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, 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, fuzzyScore, treeViewMessages, useForm, usePopover, useToast, useTocFromRegion };
+type SpaceStep$4 = 1 | 2 | 3 | 4 | 5 | 6 | 8 | 10 | 12;
+/** A scalar value, or a per-breakpoint object keyed by the canonical scale. */
+type Responsive<T> = T | Partial<Record<'base' | 'sm' | 'md' | 'lg' | 'xl', T>>;
+/** Grid track alignment keyword (maps directly to `align-items` / `justify-items`). */
+type GridAlign = 'start' | 'center' | 'end' | 'stretch';
+interface GridProps extends HTMLAttributes<HTMLDivElement> {
+  /** Column count. A number, or `{ base, sm, md, lg, xl }` for responsive columns. */
+  cols?: Responsive<number>;
+  gap?: SpaceStep$4;
+  /** Block-axis alignment of items within their cells (`align-items`). Defaults to `stretch`. */
+  align?: GridAlign;
+  /** Inline-axis alignment of items within their cells (`justify-items`). Defaults to `stretch`. */
+  justify?: GridAlign;
+}
+declare function Grid({
+  cols,
+  gap,
+  align,
+  justify,
+  className,
+  style,
+  children,
+  ...props
+}: GridProps): import("react").JSX.Element;
+interface GridItemProps extends HTMLAttributes<HTMLDivElement> {
+  /** Column span. A number, or `{ base, sm, md, lg, xl }` for responsive spans. */
+  span?: Responsive<number>;
+}
+declare function GridItem({
+  span,
+  className,
+  style,
+  ...props
+}: GridItemProps): import("react").JSX.Element;
+type SpaceStep$3 = 1 | 2 | 3 | 4 | 5 | 6 | 8 | 10 | 12;
+interface FlexProps extends HTMLAttributes<HTMLDivElement> {
+  direction?: 'vertical' | 'horizontal';
+  gap?: SpaceStep$3;
+  align?: 'start' | 'center' | 'end' | 'stretch';
+  justify?: 'start' | 'center' | 'end' | 'between';
+  wrap?: boolean;
+}
+declare function Flex({
+  direction,
+  gap,
+  align,
+  justify,
+  wrap,
+  className,
+  style,
+  ...props
+}: FlexProps): import("react").JSX.Element;
+type SpaceStep$2 = 1 | 2 | 3 | 4 | 5 | 6 | 8 | 10 | 12;
+interface ColumnsProps extends HTMLAttributes<HTMLDivElement> {
+  count?: 2 | 3 | 4;
+  gap?: SpaceStep$2;
+}
+declare function Columns({
+  count,
+  gap,
+  className,
+  style,
+  ...props
+}: ColumnsProps): import("react").JSX.Element;
+interface CenterProps extends HTMLAttributes<HTMLDivElement> {
+  maxWidth?: string;
+}
+declare function Center({
+  maxWidth,
+  className,
+  style,
+  ...props
+}: CenterProps): import("react").JSX.Element;
+type SpaceStep$1 = 1 | 2 | 3 | 4 | 5 | 6 | 8 | 10 | 12;
+interface SpacerProps extends HTMLAttributes<HTMLDivElement> {
+  size?: SpaceStep$1;
+}
+declare function Spacer({
+  size,
+  className,
+  style,
+  ...props
+}: SpacerProps): import("react").JSX.Element;
+type SpaceStep = 1 | 2 | 3 | 4 | 5 | 6 | 8 | 10 | 12;
+interface AutoGridProps extends HTMLAttributes<HTMLDivElement> {
+  /** Minimum track size before items wrap to fewer columns. */
+  min?: string;
+  gap?: SpaceStep;
+  className?: string | undefined;
+}
+declare function AutoGrid({
+  min,
+  gap,
+  className,
+  style,
+  ...props
+}: AutoGridProps): import("react").JSX.Element;
+/**
+ * Set the active theme imperatively, from anywhere. Persists the choice and
+ * drives the `data-theme` attribute through the mounted {@link ThemeProvider}.
+ */
+declare function setTheme(next: string): void;
+/**
+ * Read and set the active theme. The returned signal is reactive — a component
+ * that reads `.value` re-renders when the theme changes (this hook calls
+ * `useSignals()` for you, so it works in React apps with no Babel transform).
+ *
+ * ```tsx
+ * const [theme, setTheme] = useTheme()
+ * return <button onClick={() => setTheme(theme.value === 'dark' ? 'light' : 'dark')}>
+ *   {theme.value}
+ * </button>
+ * ```
+ */
+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'`.
+   */
+  defaultTheme?: string;
+  /**
+   * Controlled theme. When set, the provider mirrors it on every render and the
+   * persisted value is ignored — the parent owns the state (React semantics).
+   */
+  value?: string;
+  /** localStorage key for the persisted choice. Defaults to `cascivo-theme`. */
+  storageKey?: string;
+  /** Attribute written to the target element. Defaults to `data-theme`. */
+  attribute?: string;
+  /**
+   * Element to theme. Omit to theme the whole document (`<html>`). Pass a ref to
+   * a container to scope the theme to a subtree — cascivo themes resolve against
+   * the nearest `data-theme`, so a scoped subtree can differ from the page.
+   */
+  target?: RefObject<HTMLElement | null>;
+  /** Called whenever the active theme changes. */
+  onChange?: (theme: string) => void;
+  children?: ReactNode;
+}
+/**
+ * Binds the active theme signal to a `data-theme` attribute and persists the
+ * choice — the reusable, SSR-safe form of the wiring apps otherwise hand-roll.
+ *
+ * - No flash of the wrong theme: pair with {@link themePreloadScript} in your
+ *   document `<head>` so the correct theme paints on first byte.
+ * - No banned React hooks: the DOM write happens in `useSignalEffect`, not
+ *   `useEffect`; there is no `useState`/`useContext`.
+ * - Uncontrolled by default (persists to localStorage); pass `value` to control.
+ */
+declare function ThemeProvider({
+  defaultTheme,
+  value,
+  storageKey,
+  attribute,
+  target,
+  onChange,
+  children
+}: ThemeProviderProps): ReactNode;
+/**
+ * A tiny script to inline in your document `<head>` (before the app bundle) so
+ * the persisted theme paints on the first byte — no flash of the wrong theme on
+ * SSR or a hard reload. Pass the same `storageKey`/`attribute`/`defaultTheme`
+ * you give {@link ThemeProvider}.
+ *
+ * ```tsx
+ * // Next.js app/layout.tsx
+ * <head>
+ *   <script dangerouslySetInnerHTML={{ __html: themePreloadScript() }} />
+ * </head>
+ * ```
+ */
+declare function themePreloadScript(options?: {
+  storageKey?: string;
+  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, 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, 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, setTheme, themePreloadScript, treeViewMessages, useForm, usePopover, useTheme, useToast, useTocFromRegion };

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

@@ -0,0 +1 @@
+@layer cascivo.component{._auto-grid_v8cqo_2{grid-template-columns:repeat(auto-fill, minmax(min(var(--_min,16rem), 100%), 1fr));gap:var(--_gap,var(--cascivo-space-4));display:grid}}

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

@@ -0,0 +1,19 @@
+"use client";
+
+import e from "./auto-grid.module.js";
+import { cn as t } from "@cascivo/core";
+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 }) {
+	return /* @__PURE__ */ n("div", {
+		className: t(e["auto-grid"], a),
+		style: {
+			"--_min": r,
+			"--_gap": `var(--cascivo-space-${i})`,
+			...o
+		},
+		...s
+	});
+}
+//#endregion
+export { r as AutoGrid };

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

@@ -0,0 +1,7 @@
+"use client";
+
+import './auto-grid.css';
+//#region ../layouts/src/auto-grid/auto-grid.module.css
+var e = { "auto-grid": "_auto-grid_v8cqo_2" };
+//#endregion
+export { e as default };

package/dist/layouts/src/center/center.css

@@ -0,0 +1 @@
+@layer cascivo.component{._center_1euo8_2{max-inline-size:var(--_center-max,48rem);padding-inline:var(--cascivo-space-4);inline-size:100%;margin-inline:auto}}

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

@@ -0,0 +1,18 @@
+"use client";
+
+import e from "./center.module.js";
+import { cn as t } from "@cascivo/core";
+import { jsx as n } from "react/jsx-runtime";
+//#region ../layouts/src/center/center.tsx
+function r({ maxWidth: r = "48rem", className: i, style: a, ...o }) {
+	return /* @__PURE__ */ n("div", {
+		className: t(e.center, i),
+		style: {
+			"--_center-max": r,
+			...a
+		},
+		...o
+	});
+}
+//#endregion
+export { r as Center };

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

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

package/dist/layouts/src/columns/columns.css

@@ -0,0 +1 @@
+@layer cascivo.component{._columns_yqrkk_2{grid-template-columns:repeat(var(--_cols,2), minmax(0, 1fr));gap:var(--_gap,var(--cascivo-space-4));display:grid;container-type:inline-size}@container (width<=40rem){._columns_yqrkk_2{grid-template-columns:1fr}}}

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

@@ -0,0 +1,19 @@
+"use client";
+
+import e from "./columns.module.js";
+import { cn as t } from "@cascivo/core";
+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, ...s }) {
+	return /* @__PURE__ */ n("div", {
+		className: t(e.columns, a),
+		style: {
+			"--_cols": String(r),
+			"--_gap": `var(--cascivo-space-${i})`,
+			...o
+		},
+		...s
+	});
+}
+//#endregion
+export { r as Columns };

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

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

package/dist/layouts/src/flex/flex.css

@@ -0,0 +1 @@
+@layer cascivo.component{._flex_1cngp_2{gap:var(--_flex-gap,var(--cascivo-space-4));display:flex}._flex_1cngp_2[data-direction=vertical]{flex-direction:column}._flex_1cngp_2[data-direction=horizontal]{flex-direction:row}._flex_1cngp_2[data-wrap]{flex-wrap:wrap}}

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

@@ -0,0 +1,22 @@
+"use client";
+
+import e from "./flex.module.js";
+import { cn as t } from "@cascivo/core";
+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 }) {
+	return /* @__PURE__ */ n("div", {
+		className: t(e.flex, c),
+		"data-direction": r,
+		"data-wrap": s ? "" : void 0,
+		style: {
+			"--_flex-gap": `var(--cascivo-space-${i})`,
+			...a ? { alignItems: a === "start" || a === "end" ? `flex-${a}` : a } : {},
+			...o ? { justifyContent: o === "between" ? "space-between" : o === "start" || o === "end" ? `flex-${o}` : o } : {},
+			...l
+		},
+		...u
+	});
+}
+//#endregion
+export { r as Flex };

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

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

package/dist/layouts/src/grid/grid.css

@@ -0,0 +1 @@
+@layer cascivo.component{._grid_1awa2_2{grid-template-columns:repeat(var(--_grid-cols,12), minmax(0, 1fr));gap:var(--_grid-gap,var(--cascivo-space-4));align-items:var(--_grid-align,stretch);justify-items:var(--_grid-justify,stretch);display:grid;container-type:inline-size}@container (width<=40rem){._grid_1awa2_2:not([data-responsive]){grid-template-columns:1fr}}@container (width>=30rem){._grid_1awa2_2[data-responsive]{grid-template-columns:repeat(var(--_grid-cols-sm,var(--_grid-cols,12)), minmax(0, 1fr))}}@container (width>=40rem){._grid_1awa2_2[data-responsive]{grid-template-columns:repeat(var(--_grid-cols-md,var(--_grid-cols-sm,var(--_grid-cols,12))), minmax(0, 1fr))}}@container (width>=64rem){._grid_1awa2_2[data-responsive]{grid-template-columns:repeat(var(--_grid-cols-lg,var(--_grid-cols-md,var(--_grid-cols-sm,var(--_grid-cols,12)))), minmax(0, 1fr))}}@container (width>=80rem){._grid_1awa2_2[data-responsive]{grid-template-columns:repeat(var(--_grid-cols-xl,var(--_grid-cols-lg,var(--_grid-cols-md,var(--_grid-cols-sm,var(--_grid-cols,12))))), minmax(0, 1fr))}}._grid-item_1awa2_46{grid-column:span var(--_span,1)}@container (width>=30rem){._grid-item_1awa2_46[data-responsive]{grid-column:span var(--_span-sm,var(--_span,1))}}@container (width>=40rem){._grid-item_1awa2_46[data-responsive]{grid-column:span var(--_span-md,var(--_span-sm,var(--_span,1)))}}@container (width>=64rem){._grid-item_1awa2_46[data-responsive]{grid-column:span var(--_span-lg,var(--_span-md,var(--_span-sm,var(--_span,1))))}}@container (width>=80rem){._grid-item_1awa2_46[data-responsive]{grid-column:span var(--_span-xl,var(--_span-lg,var(--_span-md,var(--_span-sm,var(--_span,1)))))}}}

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

@@ -0,0 +1,54 @@
+"use client";
+
+import e from "./grid.module.js";
+import { cn as t } from "@cascivo/core";
+import { jsx as n } from "react/jsx-runtime";
+//#region ../layouts/src/grid/grid.tsx
+function r(e) {
+	return typeof e == "object" && !!e;
+}
+function i(e, t) {
+	if (t === void 0) return {};
+	if (!r(t)) return { [e]: String(t) };
+	let n = {};
+	t.base !== void 0 && (n[e] = String(t.base));
+	for (let r of [
+		"sm",
+		"md",
+		"lg",
+		"xl"
+	]) {
+		let i = t[r];
+		i !== void 0 && (n[`${e}-${r}`] = String(i));
+	}
+	return n;
+}
+function a({ cols: a = 12, gap: o = 4, align: s, justify: c, className: l, style: u, children: d, ...f }) {
+	return /* @__PURE__ */ n("div", {
+		className: t(e.grid, l),
+		"data-responsive": r(a) ? "" : void 0,
+		style: {
+			...i("--_grid-cols", a),
+			"--_grid-gap": `var(--cascivo-space-${o})`,
+			...s ? { "--_grid-align": s } : {},
+			...c ? { "--_grid-justify": c } : {},
+			...u
+		},
+		...f,
+		children: d
+	});
+}
+function o({ span: a, className: o, style: s, ...c }) {
+	let l = a !== void 0 && r(a);
+	return /* @__PURE__ */ n("div", {
+		className: t(e["grid-item"], o),
+		"data-responsive": l ? "" : void 0,
+		style: {
+			...i("--_span", a),
+			...s
+		},
+		...c
+	});
+}
+//#endregion
+export { a as Grid, o as GridItem };

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

@@ -0,0 +1,9 @@
+"use client";
+
+import './grid.css';
+var e = {
+	grid: "_grid_1awa2_2",
+	"grid-item": "_grid-item_1awa2_46"
+};
+//#endregion
+export { e as default };

package/dist/layouts/src/spacer/spacer.css

@@ -0,0 +1 @@
+@layer cascivo.component{._spacer_9ie78_2{block-size:var(--_spacer-size,var(--cascivo-space-4));flex-shrink:0}}

package/dist/layouts/src/spacer/spacer.js

@@ -0,0 +1,19 @@
+"use client";
+
+import e from "./spacer.module.js";
+import { cn as t } from "@cascivo/core";
+import { jsx as n } from "react/jsx-runtime";
+//#region ../layouts/src/spacer/spacer.tsx
+function r({ size: r = 4, className: i, style: a, ...o }) {
+	return /* @__PURE__ */ n("div", {
+		role: "none",
+		className: t(e.spacer, i),
+		style: {
+			"--_spacer-size": `var(--cascivo-space-${r})`,
+			...a
+		},
+		...o
+	});
+}
+//#endregion
+export { r as Spacer };

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

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