@webstacks/ui 0.3.0 → 0.4.0

package/dist/index.d.ts

@@ -1,10 +1,10 @@
-import { ClassValue } from 'clsx';
+import * as react_jsx_runtime from 'react/jsx-runtime';
 import * as React$1 from 'react';
+import { ClassValue } from 'clsx';
 import * as class_variance_authority_types from 'class-variance-authority/types';
 import * as ToastPrimitives from '@radix-ui/react-toast';
 import { VariantProps } from 'class-variance-authority';
 import * as AccordionPrimitive from '@radix-ui/react-accordion';
-import * as react_jsx_runtime from 'react/jsx-runtime';
 import * as AlertDialogPrimitive from '@radix-ui/react-alert-dialog';
 import * as AspectRatioPrimitive from '@radix-ui/react-aspect-ratio';
 import * as AvatarPrimitive from '@radix-ui/react-avatar';
@@ -46,6 +46,33 @@ import * as TabsPrimitive from '@radix-ui/react-tabs';
 import * as TogglePrimitive from '@radix-ui/react-toggle';
 import * as ToggleGroupPrimitive from '@radix-ui/react-toggle-group';
 
+interface BaseStylesProps {
+    children: React$1.ReactNode;
+    /**
+     * Color mode for the application.
+     * - "light" — force light theme
+     * - "dark"  — force dark theme
+     * - "auto"  — follow system preference
+     * @default "light"
+     */
+    colorMode?: "light" | "dark" | "auto";
+}
+/**
+ * BaseStyles wraps your application with the @webstacks/ui design tokens,
+ * fonts, color primitives, and base styles. Place this at the root of your
+ * app so all components render correctly.
+ *
+ * @example
+ * ```tsx
+ * import { BaseStyles } from '@webstacks/ui'
+ *
+ * function RootLayout({ children }) {
+ *   return <BaseStyles>{children}</BaseStyles>
+ * }
+ * ```
+ */
+declare function BaseStyles({ children, colorMode }: BaseStylesProps): react_jsx_runtime.JSX.Element;
+
 declare function cn(...inputs: ClassValue[]): string;
 
 declare function useIsMobile(): boolean;
@@ -141,24 +168,24 @@ declare const BreadcrumbEllipsis: {
 };
 
 declare const boxVariants: (props?: ({
-    padding?: "none" | "condensed" | "normal" | "spacious" | "extra-spacious" | null | undefined;
-    paddingX?: "none" | "condensed" | "normal" | "spacious" | "extra-spacious" | null | undefined;
-    paddingY?: "none" | "condensed" | "normal" | "spacious" | "extra-spacious" | null | undefined;
-    paddingTop?: "none" | "condensed" | "normal" | "spacious" | "extra-spacious" | null | undefined;
-    paddingBottom?: "none" | "condensed" | "normal" | "spacious" | "extra-spacious" | null | undefined;
-    paddingStart?: "none" | "condensed" | "normal" | "spacious" | "extra-spacious" | null | undefined;
-    paddingEnd?: "none" | "condensed" | "normal" | "spacious" | "extra-spacious" | null | undefined;
-    margin?: "none" | "auto" | "condensed" | "normal" | "spacious" | "extra-spacious" | null | undefined;
-    marginX?: "none" | "auto" | "condensed" | "normal" | "spacious" | "extra-spacious" | null | undefined;
-    marginY?: "none" | "auto" | "condensed" | "normal" | "spacious" | "extra-spacious" | null | undefined;
-    marginTop?: "none" | "auto" | "condensed" | "normal" | "spacious" | "extra-spacious" | null | undefined;
-    marginBottom?: "none" | "auto" | "condensed" | "normal" | "spacious" | "extra-spacious" | null | undefined;
-    marginStart?: "none" | "auto" | "condensed" | "normal" | "spacious" | "extra-spacious" | null | undefined;
-    marginEnd?: "none" | "auto" | "condensed" | "normal" | "spacious" | "extra-spacious" | null | undefined;
+    padding?: "normal" | "none" | "condensed" | "spacious" | "extra-spacious" | null | undefined;
+    paddingX?: "normal" | "none" | "condensed" | "spacious" | "extra-spacious" | null | undefined;
+    paddingY?: "normal" | "none" | "condensed" | "spacious" | "extra-spacious" | null | undefined;
+    paddingTop?: "normal" | "none" | "condensed" | "spacious" | "extra-spacious" | null | undefined;
+    paddingBottom?: "normal" | "none" | "condensed" | "spacious" | "extra-spacious" | null | undefined;
+    paddingStart?: "normal" | "none" | "condensed" | "spacious" | "extra-spacious" | null | undefined;
+    paddingEnd?: "normal" | "none" | "condensed" | "spacious" | "extra-spacious" | null | undefined;
+    margin?: "auto" | "normal" | "none" | "condensed" | "spacious" | "extra-spacious" | null | undefined;
+    marginX?: "auto" | "normal" | "none" | "condensed" | "spacious" | "extra-spacious" | null | undefined;
+    marginY?: "auto" | "normal" | "none" | "condensed" | "spacious" | "extra-spacious" | null | undefined;
+    marginTop?: "auto" | "normal" | "none" | "condensed" | "spacious" | "extra-spacious" | null | undefined;
+    marginBottom?: "auto" | "normal" | "none" | "condensed" | "spacious" | "extra-spacious" | null | undefined;
+    marginStart?: "auto" | "normal" | "none" | "condensed" | "spacious" | "extra-spacious" | null | undefined;
+    marginEnd?: "auto" | "normal" | "none" | "condensed" | "spacious" | "extra-spacious" | null | undefined;
     backgroundColor?: "default" | "subtle" | "inset" | null | undefined;
     borderStyle?: "none" | "solid" | "dashed" | null | undefined;
     borderRadius?: "small" | "none" | "medium" | "large" | "xlarge" | "full" | null | undefined;
-    borderColor?: "muted" | "default" | "subtle" | null | undefined;
+    borderColor?: "default" | "muted" | "subtle" | null | undefined;
 } & class_variance_authority_types.ClassProp) | undefined) => string;
 type SpacingValue = "none" | "condensed" | "normal" | "spacious" | "extra-spacious";
 type MarginValue = SpacingValue | "auto";
@@ -187,7 +214,7 @@ interface BoxProps extends Omit<React$1.HTMLAttributes<HTMLElement>, "color">, O
 declare const Box: React$1.ForwardRefExoticComponent<BoxProps & React$1.RefAttributes<HTMLElement>>;
 
 declare const buttonVariants: (props?: ({
-    variant?: "link" | "default" | "destructive" | "outline" | "secondary" | "ghost" | null | undefined;
+    variant?: "default" | "link" | "destructive" | "outline" | "secondary" | "ghost" | null | undefined;
     size?: "default" | "sm" | "lg" | "icon" | null | undefined;
 } & class_variance_authority_types.ClassProp) | undefined) => string;
 interface ButtonProps extends React$1.ButtonHTMLAttributes<HTMLButtonElement>, VariantProps<typeof buttonVariants> {
@@ -196,10 +223,10 @@ interface ButtonProps extends React$1.ButtonHTMLAttributes<HTMLButtonElement>, V
 declare const Button: React$1.ForwardRefExoticComponent<ButtonProps & React$1.RefAttributes<HTMLButtonElement>>;
 
 declare const gridVariants: (props?: ({
-    columns?: 2 | 1 | 12 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | null | undefined;
-    gap?: "none" | "condensed" | "normal" | "spacious" | "extra-spacious" | null | undefined;
-    gapX?: "none" | "condensed" | "normal" | "spacious" | "extra-spacious" | null | undefined;
-    gapY?: "none" | "condensed" | "normal" | "spacious" | "extra-spacious" | null | undefined;
+    columns?: 2 | 1 | 3 | 12 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | null | undefined;
+    gap?: "normal" | "none" | "condensed" | "spacious" | "extra-spacious" | null | undefined;
+    gapX?: "normal" | "none" | "condensed" | "spacious" | "extra-spacious" | null | undefined;
+    gapY?: "normal" | "none" | "condensed" | "spacious" | "extra-spacious" | null | undefined;
     align?: "center" | "start" | "end" | "baseline" | "stretch" | null | undefined;
     justify?: "center" | "start" | "end" | "stretch" | null | undefined;
 } & class_variance_authority_types.ClassProp) | undefined) => string;
@@ -215,8 +242,8 @@ interface GridProps extends Omit<React$1.HTMLAttributes<HTMLDivElement>, "column
 }
 declare const Grid: React$1.ForwardRefExoticComponent<GridProps & React$1.RefAttributes<HTMLDivElement>>;
 declare const gridColumnVariants: (props?: ({
-    span?: 2 | 1 | 12 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | null | undefined;
-    start?: 2 | 1 | 12 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 13 | null | undefined;
+    span?: 2 | 1 | 3 | 12 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | null | undefined;
+    start?: 2 | 1 | 3 | 12 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 13 | null | undefined;
 } & class_variance_authority_types.ClassProp) | undefined) => string;
 type SpanValue = 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12;
 interface ResponsiveSpan {
@@ -232,12 +259,12 @@ interface GridColumnProps extends Omit<React$1.HTMLAttributes<HTMLDivElement>, "
 declare const GridColumn: React$1.ForwardRefExoticComponent<GridColumnProps & React$1.RefAttributes<HTMLDivElement>>;
 
 declare const headingVariants: (props?: ({
-    size?: 2 | 1 | "display" | 3 | 4 | 5 | 6 | "subhead-large" | "subhead-medium" | null | undefined;
-    weight?: "bold" | "normal" | "medium" | "heavy" | "extrabold" | "semibold" | "light" | "extralight" | null | undefined;
-    stretch?: "condensed" | "normal" | "expanded" | null | undefined;
-    letterSpacing?: "none" | "condensed" | "normal" | null | undefined;
+    size?: 2 | 1 | 3 | "display" | 4 | 5 | 6 | "subhead-large" | "subhead-medium" | null | undefined;
+    weight?: "light" | "bold" | "normal" | "medium" | "heavy" | "extrabold" | "semibold" | "extralight" | null | undefined;
+    stretch?: "normal" | "condensed" | "expanded" | null | undefined;
+    letterSpacing?: "normal" | "none" | "condensed" | null | undefined;
     align?: "center" | "start" | "end" | null | undefined;
-    variant?: "muted" | "default" | null | undefined;
+    variant?: "default" | "muted" | null | undefined;
 } & class_variance_authority_types.ClassProp) | undefined) => string;
 type HeadingTag = "h1" | "h2" | "h3" | "h4" | "h5" | "h6";
 type HeadingSize = "display" | 1 | 2 | 3 | 4 | 5 | 6 | "subhead-large" | "subhead-medium";
@@ -255,8 +282,8 @@ declare const Heading: React$1.ForwardRefExoticComponent<HeadingProps & React$1.
 
 declare const textVariants: (props?: ({
     size?: 400 | 100 | 200 | 300 | 500 | 600 | 700 | null | undefined;
-    variant?: "muted" | "default" | null | undefined;
-    weight?: "bold" | "normal" | "medium" | "heavy" | "extrabold" | "semibold" | "light" | "extralight" | null | undefined;
+    variant?: "default" | "muted" | null | undefined;
+    weight?: "light" | "bold" | "normal" | "medium" | "heavy" | "extrabold" | "semibold" | "extralight" | null | undefined;
     align?: "center" | "start" | "end" | null | undefined;
 } & class_variance_authority_types.ClassProp) | undefined) => string;
 type TextSize = 100 | 200 | 300 | 400 | 500 | 600 | 700;
@@ -274,11 +301,11 @@ declare const Text: React$1.ForwardRefExoticComponent<TextProps & React$1.RefAtt
 
 declare const stackVariants: (props?: ({
     direction?: "horizontal" | "vertical" | null | undefined;
-    gap?: "none" | "condensed" | "normal" | "spacious" | "extra-spacious" | null | undefined;
+    gap?: "normal" | "none" | "condensed" | "spacious" | "extra-spacious" | null | undefined;
     align?: "center" | "start" | "end" | "baseline" | "stretch" | null | undefined;
     justify?: "center" | "start" | "end" | "space-between" | "space-around" | "space-evenly" | null | undefined;
     wrap?: boolean | null | undefined;
-    padding?: "none" | "condensed" | "normal" | "spacious" | "extra-spacious" | null | undefined;
+    padding?: "normal" | "none" | "condensed" | "spacious" | "extra-spacious" | null | undefined;
 } & class_variance_authority_types.ClassProp) | undefined) => string;
 type DirectionValue = "horizontal" | "vertical";
 type GapValue = "none" | "condensed" | "normal" | "spacious" | "extra-spacious";
@@ -846,4 +873,4 @@ declare const ToggleGroupItem: React$1.ForwardRefExoticComponent<Omit<ToggleGrou
     size?: "default" | "sm" | "lg" | null | undefined;
 } & class_variance_authority_types.ClassProp) | undefined) => string> & React$1.RefAttributes<HTMLButtonElement>>;
 
-export { Accordion, AccordionContent, AccordionItem, AccordionTrigger, Alert, AlertDescription, AlertDialog, AlertDialogAction, AlertDialogCancel, AlertDialogContent, AlertDialogDescription, AlertDialogFooter, AlertDialogHeader, AlertDialogOverlay, AlertDialogPortal, AlertDialogTitle, AlertDialogTrigger, AlertTitle, AspectRatio, Avatar, AvatarFallback, AvatarImage, Badge, type BadgeProps, Box, type BoxProps, Breadcrumb, BreadcrumbEllipsis, BreadcrumbItem, BreadcrumbLink, BreadcrumbList, BreadcrumbPage, BreadcrumbSeparator, Button, type ButtonProps, Calendar, CalendarDayButton, Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle, Carousel, type CarouselApi, CarouselContent, CarouselItem, CarouselNext, CarouselPrevious, type ChartConfig, ChartContainer, ChartLegend, ChartLegendContent, ChartStyle, ChartTooltip, ChartTooltipContent, Checkbox, Collapsible, CollapsibleContent, CollapsibleTrigger, Command, CommandDialog, CommandEmpty, CommandGroup, CommandInput, CommandItem, CommandList, CommandSeparator, CommandShortcut, ContextMenu, ContextMenuCheckboxItem, ContextMenuContent, ContextMenuGroup, ContextMenuItem, ContextMenuLabel, ContextMenuPortal, ContextMenuRadioGroup, ContextMenuRadioItem, ContextMenuSeparator, ContextMenuShortcut, ContextMenuSub, ContextMenuSubContent, ContextMenuSubTrigger, ContextMenuTrigger, Dialog, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogOverlay, DialogPortal, DialogTitle, DialogTrigger, Drawer, DrawerClose, DrawerContent, DrawerDescription, DrawerFooter, DrawerHeader, DrawerOverlay, DrawerPortal, DrawerTitle, DrawerTrigger, DropdownMenu, DropdownMenuCheckboxItem, DropdownMenuContent, DropdownMenuGroup, DropdownMenuItem, DropdownMenuLabel, DropdownMenuPortal, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuSeparator, DropdownMenuShortcut, DropdownMenuSub, DropdownMenuSubContent, DropdownMenuSubTrigger, DropdownMenuTrigger, Form, FormControl, FormDescription, FormField, FormItem, FormLabel, FormMessage, Grid, GridColumn, type GridColumnProps, type GridProps, Heading, type HeadingProps, HoverCard, HoverCardContent, HoverCardTrigger, Input, InputOTP, InputOTPGroup, InputOTPSeparator, InputOTPSlot, Label, Menubar, MenubarCheckboxItem, MenubarContent, MenubarGroup, MenubarItem, MenubarLabel, MenubarMenu, MenubarPortal, MenubarRadioGroup, MenubarRadioItem, MenubarSeparator, MenubarShortcut, MenubarSub, MenubarSubContent, MenubarSubTrigger, MenubarTrigger, NavigationMenu, NavigationMenuContent, NavigationMenuIndicator, NavigationMenuItem, NavigationMenuLink, NavigationMenuList, NavigationMenuTrigger, NavigationMenuViewport, Pagination, PaginationContent, PaginationEllipsis, PaginationItem, PaginationLink, PaginationNext, PaginationPrevious, Popover, PopoverAnchor, PopoverContent, PopoverTrigger, Progress, RadioGroup, RadioGroupItem, ResizableHandle, ResizablePanel, ResizablePanelGroup, ScrollArea, ScrollBar, Select, SelectContent, SelectGroup, SelectItem, SelectLabel, SelectScrollDownButton, SelectScrollUpButton, SelectSeparator, SelectTrigger, SelectValue, Separator, Sheet, SheetClose, SheetContent, SheetDescription, SheetFooter, SheetHeader, SheetOverlay, SheetPortal, SheetTitle, SheetTrigger, Sidebar, SidebarContent, SidebarFooter, SidebarGroup, SidebarGroupAction, SidebarGroupContent, SidebarGroupLabel, SidebarHeader, SidebarInput, SidebarInset, SidebarMenu, SidebarMenuAction, SidebarMenuBadge, SidebarMenuButton, SidebarMenuItem, SidebarMenuSkeleton, SidebarMenuSub, SidebarMenuSubButton, SidebarMenuSubItem, SidebarProvider, SidebarRail, SidebarSeparator, SidebarTrigger, Skeleton, Slider, Toaster$1 as Sonner, Stack, type StackProps, Switch, Table, TableBody, TableCaption, TableCell, TableFooter, TableHead, TableHeader, TableRow, Tabs, TabsContent, TabsList, TabsTrigger, Text, type TextProps, Textarea, Toast$1 as Toast, ToastAction, type ToastActionElement, ToastClose, ToastDescription, type ToastProps, ToastProvider, ToastTitle, ToastViewport, Toaster, Toggle, ToggleGroup, ToggleGroupItem, Tooltip, TooltipContent, TooltipProvider, TooltipTrigger, badgeVariants, boxVariants, buttonVariants, cn, gridColumnVariants, gridVariants, headingVariants, navigationMenuTriggerStyle, stackVariants, textVariants, toast, toggleVariants, useFormField, useIsMobile, useSidebar, useToast };
+export { Accordion, AccordionContent, AccordionItem, AccordionTrigger, Alert, AlertDescription, AlertDialog, AlertDialogAction, AlertDialogCancel, AlertDialogContent, AlertDialogDescription, AlertDialogFooter, AlertDialogHeader, AlertDialogOverlay, AlertDialogPortal, AlertDialogTitle, AlertDialogTrigger, AlertTitle, AspectRatio, Avatar, AvatarFallback, AvatarImage, Badge, type BadgeProps, BaseStyles, type BaseStylesProps, Box, type BoxProps, Breadcrumb, BreadcrumbEllipsis, BreadcrumbItem, BreadcrumbLink, BreadcrumbList, BreadcrumbPage, BreadcrumbSeparator, Button, type ButtonProps, Calendar, CalendarDayButton, Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle, Carousel, type CarouselApi, CarouselContent, CarouselItem, CarouselNext, CarouselPrevious, type ChartConfig, ChartContainer, ChartLegend, ChartLegendContent, ChartStyle, ChartTooltip, ChartTooltipContent, Checkbox, Collapsible, CollapsibleContent, CollapsibleTrigger, Command, CommandDialog, CommandEmpty, CommandGroup, CommandInput, CommandItem, CommandList, CommandSeparator, CommandShortcut, ContextMenu, ContextMenuCheckboxItem, ContextMenuContent, ContextMenuGroup, ContextMenuItem, ContextMenuLabel, ContextMenuPortal, ContextMenuRadioGroup, ContextMenuRadioItem, ContextMenuSeparator, ContextMenuShortcut, ContextMenuSub, ContextMenuSubContent, ContextMenuSubTrigger, ContextMenuTrigger, Dialog, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogOverlay, DialogPortal, DialogTitle, DialogTrigger, Drawer, DrawerClose, DrawerContent, DrawerDescription, DrawerFooter, DrawerHeader, DrawerOverlay, DrawerPortal, DrawerTitle, DrawerTrigger, DropdownMenu, DropdownMenuCheckboxItem, DropdownMenuContent, DropdownMenuGroup, DropdownMenuItem, DropdownMenuLabel, DropdownMenuPortal, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuSeparator, DropdownMenuShortcut, DropdownMenuSub, DropdownMenuSubContent, DropdownMenuSubTrigger, DropdownMenuTrigger, Form, FormControl, FormDescription, FormField, FormItem, FormLabel, FormMessage, Grid, GridColumn, type GridColumnProps, type GridProps, Heading, type HeadingProps, HoverCard, HoverCardContent, HoverCardTrigger, Input, InputOTP, InputOTPGroup, InputOTPSeparator, InputOTPSlot, Label, Menubar, MenubarCheckboxItem, MenubarContent, MenubarGroup, MenubarItem, MenubarLabel, MenubarMenu, MenubarPortal, MenubarRadioGroup, MenubarRadioItem, MenubarSeparator, MenubarShortcut, MenubarSub, MenubarSubContent, MenubarSubTrigger, MenubarTrigger, NavigationMenu, NavigationMenuContent, NavigationMenuIndicator, NavigationMenuItem, NavigationMenuLink, NavigationMenuList, NavigationMenuTrigger, NavigationMenuViewport, Pagination, PaginationContent, PaginationEllipsis, PaginationItem, PaginationLink, PaginationNext, PaginationPrevious, Popover, PopoverAnchor, PopoverContent, PopoverTrigger, Progress, RadioGroup, RadioGroupItem, ResizableHandle, ResizablePanel, ResizablePanelGroup, ScrollArea, ScrollBar, Select, SelectContent, SelectGroup, SelectItem, SelectLabel, SelectScrollDownButton, SelectScrollUpButton, SelectSeparator, SelectTrigger, SelectValue, Separator, Sheet, SheetClose, SheetContent, SheetDescription, SheetFooter, SheetHeader, SheetOverlay, SheetPortal, SheetTitle, SheetTrigger, Sidebar, SidebarContent, SidebarFooter, SidebarGroup, SidebarGroupAction, SidebarGroupContent, SidebarGroupLabel, SidebarHeader, SidebarInput, SidebarInset, SidebarMenu, SidebarMenuAction, SidebarMenuBadge, SidebarMenuButton, SidebarMenuItem, SidebarMenuSkeleton, SidebarMenuSub, SidebarMenuSubButton, SidebarMenuSubItem, SidebarProvider, SidebarRail, SidebarSeparator, SidebarTrigger, Skeleton, Slider, Toaster$1 as Sonner, Stack, type StackProps, Switch, Table, TableBody, TableCaption, TableCell, TableFooter, TableHead, TableHeader, TableRow, Tabs, TabsContent, TabsList, TabsTrigger, Text, type TextProps, Textarea, Toast$1 as Toast, ToastAction, type ToastActionElement, ToastClose, ToastDescription, type ToastProps, ToastProvider, ToastTitle, ToastViewport, Toaster, Toggle, ToggleGroup, ToggleGroupItem, Tooltip, TooltipContent, TooltipProvider, TooltipTrigger, badgeVariants, boxVariants, buttonVariants, cn, gridColumnVariants, gridVariants, headingVariants, navigationMenuTriggerStyle, stackVariants, textVariants, toast, toggleVariants, useFormField, useIsMobile, useSidebar, useToast };