@webstacks/ui 0.4.0 → 0.4.2

package/dist/index.d.cts

@@ -189,27 +189,27 @@ declare const boxVariants: (props?: ({
 } & class_variance_authority_types.ClassProp) | undefined) => string;
 type SpacingValue = "none" | "condensed" | "normal" | "spacious" | "extra-spacious";
 type MarginValue = SpacingValue | "auto";
-interface ResponsiveProp$3<T> {
+interface ResponsiveProp$4<T> {
     narrow?: T;
     regular?: T;
     wide?: T;
 }
 interface BoxProps extends Omit<React$1.HTMLAttributes<HTMLElement>, "color">, Omit<VariantProps<typeof boxVariants>, "padding" | "paddingX" | "paddingY" | "paddingTop" | "paddingBottom" | "paddingStart" | "paddingEnd" | "margin" | "marginX" | "marginY" | "marginTop" | "marginBottom" | "marginStart" | "marginEnd"> {
     as?: React$1.ElementType;
-    padding?: SpacingValue | ResponsiveProp$3<SpacingValue>;
-    paddingX?: SpacingValue | ResponsiveProp$3<SpacingValue>;
-    paddingY?: SpacingValue | ResponsiveProp$3<SpacingValue>;
-    paddingTop?: SpacingValue | ResponsiveProp$3<SpacingValue>;
-    paddingBottom?: SpacingValue | ResponsiveProp$3<SpacingValue>;
-    paddingStart?: SpacingValue | ResponsiveProp$3<SpacingValue>;
-    paddingEnd?: SpacingValue | ResponsiveProp$3<SpacingValue>;
-    margin?: MarginValue | ResponsiveProp$3<MarginValue>;
-    marginX?: MarginValue | ResponsiveProp$3<MarginValue>;
-    marginY?: MarginValue | ResponsiveProp$3<MarginValue>;
-    marginTop?: MarginValue | ResponsiveProp$3<MarginValue>;
-    marginBottom?: MarginValue | ResponsiveProp$3<MarginValue>;
-    marginStart?: MarginValue | ResponsiveProp$3<MarginValue>;
-    marginEnd?: MarginValue | ResponsiveProp$3<MarginValue>;
+    padding?: SpacingValue | ResponsiveProp$4<SpacingValue>;
+    paddingX?: SpacingValue | ResponsiveProp$4<SpacingValue>;
+    paddingY?: SpacingValue | ResponsiveProp$4<SpacingValue>;
+    paddingTop?: SpacingValue | ResponsiveProp$4<SpacingValue>;
+    paddingBottom?: SpacingValue | ResponsiveProp$4<SpacingValue>;
+    paddingStart?: SpacingValue | ResponsiveProp$4<SpacingValue>;
+    paddingEnd?: SpacingValue | ResponsiveProp$4<SpacingValue>;
+    margin?: MarginValue | ResponsiveProp$4<MarginValue>;
+    marginX?: MarginValue | ResponsiveProp$4<MarginValue>;
+    marginY?: MarginValue | ResponsiveProp$4<MarginValue>;
+    marginTop?: MarginValue | ResponsiveProp$4<MarginValue>;
+    marginBottom?: MarginValue | ResponsiveProp$4<MarginValue>;
+    marginStart?: MarginValue | ResponsiveProp$4<MarginValue>;
+    marginEnd?: MarginValue | ResponsiveProp$4<MarginValue>;
 }
 declare const Box: React$1.ForwardRefExoticComponent<BoxProps & React$1.RefAttributes<HTMLElement>>;
 
@@ -268,15 +268,15 @@ declare const headingVariants: (props?: ({
 } & 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";
-interface ResponsiveProp$2<T> {
+interface ResponsiveProp$3<T> {
     narrow?: T;
     regular?: T;
     wide?: T;
 }
 interface HeadingProps extends Omit<React$1.HTMLAttributes<HTMLHeadingElement>, "color">, Omit<VariantProps<typeof headingVariants>, "size" | "weight"> {
     as?: HeadingTag;
-    size?: HeadingSize | ResponsiveProp$2<HeadingSize>;
-    weight?: VariantProps<typeof headingVariants>["weight"] | ResponsiveProp$2<NonNullable<VariantProps<typeof headingVariants>["weight"]>>;
+    size?: HeadingSize | ResponsiveProp$3<HeadingSize>;
+    weight?: VariantProps<typeof headingVariants>["weight"] | ResponsiveProp$3<NonNullable<VariantProps<typeof headingVariants>["weight"]>>;
 }
 declare const Heading: React$1.ForwardRefExoticComponent<HeadingProps & React$1.RefAttributes<HTMLHeadingElement>>;
 
@@ -287,23 +287,55 @@ declare const textVariants: (props?: ({
     align?: "center" | "start" | "end" | null | undefined;
 } & class_variance_authority_types.ClassProp) | undefined) => string;
 type TextSize = 100 | 200 | 300 | 400 | 500 | 600 | 700;
-interface ResponsiveProp$1<T> {
+interface ResponsiveProp$2<T> {
     narrow?: T;
     regular?: T;
     wide?: T;
 }
 interface TextProps extends Omit<React$1.HTMLAttributes<HTMLElement>, "color">, Omit<VariantProps<typeof textVariants>, "size" | "weight"> {
     as?: React$1.ElementType;
-    size?: TextSize | ResponsiveProp$1<TextSize>;
-    weight?: VariantProps<typeof textVariants>["weight"] | ResponsiveProp$1<NonNullable<VariantProps<typeof textVariants>["weight"]>>;
+    size?: TextSize | ResponsiveProp$2<TextSize>;
+    weight?: VariantProps<typeof textVariants>["weight"] | ResponsiveProp$2<NonNullable<VariantProps<typeof textVariants>["weight"]>>;
 }
 declare const Text: React$1.ForwardRefExoticComponent<TextProps & React$1.RefAttributes<HTMLElement>>;
 
+type ResponsiveProp$1<T> = T | {
+    narrow?: T;
+    regular?: T;
+    wide?: T;
+};
+declare const sectionVariants: (props?: ({
+    rounded?: boolean | null | undefined;
+} & class_variance_authority_types.ClassProp) | undefined) => string;
+interface SectionProps extends Omit<React$1.HTMLAttributes<HTMLElement>, "color">, VariantProps<typeof sectionVariants> {
+    as?: "section" | "div";
+    paddingBlockStart?: ResponsiveProp$1<"none" | "condensed" | "normal" | "spacious">;
+    paddingBlockEnd?: ResponsiveProp$1<"none" | "condensed" | "normal" | "spacious">;
+    backgroundColor?: ResponsiveProp$1<"default" | "subtle" | "inset"> | string;
+    backgroundImageSrc?: string | string[];
+    backgroundImageSize?: string;
+    backgroundImagePosition?: string;
+    /**
+     * Optional section title rendered as an h2 heading inside the container.
+     */
+    sectionTitle?: React$1.ReactNode;
+    /**
+     * Additional class names for the inner container.
+     */
+    containerClassName?: string;
+    /**
+     * When true, the inner container is full-width (no max-width constraint).
+     * @default false
+     */
+    fullWidth?: boolean;
+}
+declare const Section: React$1.ForwardRefExoticComponent<SectionProps & React$1.RefAttributes<HTMLElement>>;
+
 declare const stackVariants: (props?: ({
     direction?: "horizontal" | "vertical" | 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;
+    justify?: "center" | "start" | "end" | "space-around" | "space-between" | "space-evenly" | null | undefined;
     wrap?: boolean | null | undefined;
     padding?: "normal" | "none" | "condensed" | "spacious" | "extra-spacious" | null | undefined;
 } & class_variance_authority_types.ClassProp) | undefined) => string;
@@ -610,7 +642,7 @@ declare const HoverCardContent: React$1.ForwardRefExoticComponent<Omit<HoverCard
 
 declare const Input: React$1.ForwardRefExoticComponent<Omit<React$1.DetailedHTMLProps<React$1.InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>, "ref"> & React$1.RefAttributes<HTMLInputElement>>;
 
-declare const InputOTP: React$1.ForwardRefExoticComponent<(Omit<Omit<React$1.InputHTMLAttributes<HTMLInputElement>, "onChange" | "value" | "maxLength" | "textAlign" | "onComplete" | "pushPasswordManagerStrategy" | "pasteTransformer" | "containerClassName" | "noScriptCSSFallback"> & {
+declare const InputOTP: React$1.ForwardRefExoticComponent<(Omit<Omit<React$1.InputHTMLAttributes<HTMLInputElement>, "onChange" | "value" | "maxLength" | "containerClassName" | "textAlign" | "onComplete" | "pushPasswordManagerStrategy" | "pasteTransformer" | "noScriptCSSFallback"> & {
     value?: string;
     onChange?: (newValue: string) => unknown;
     maxLength: number;
@@ -623,7 +655,7 @@ declare const InputOTP: React$1.ForwardRefExoticComponent<(Omit<Omit<React$1.Inp
 } & {
     render: (props: input_otp.RenderProps) => React$1.ReactNode;
     children?: never;
-} & React$1.RefAttributes<HTMLInputElement>, "ref"> | Omit<Omit<React$1.InputHTMLAttributes<HTMLInputElement>, "onChange" | "value" | "maxLength" | "textAlign" | "onComplete" | "pushPasswordManagerStrategy" | "pasteTransformer" | "containerClassName" | "noScriptCSSFallback"> & {
+} & React$1.RefAttributes<HTMLInputElement>, "ref"> | Omit<Omit<React$1.InputHTMLAttributes<HTMLInputElement>, "onChange" | "value" | "maxLength" | "containerClassName" | "textAlign" | "onComplete" | "pushPasswordManagerStrategy" | "pasteTransformer" | "noScriptCSSFallback"> & {
     value?: string;
     onChange?: (newValue: string) => unknown;
     maxLength: number;
@@ -745,7 +777,7 @@ declare const SheetClose: React$1.ForwardRefExoticComponent<DialogPrimitive.Dial
 declare const SheetPortal: React$1.FC<DialogPrimitive.DialogPortalProps>;
 declare const SheetOverlay: React$1.ForwardRefExoticComponent<Omit<DialogPrimitive.DialogOverlayProps & React$1.RefAttributes<HTMLDivElement>, "ref"> & React$1.RefAttributes<HTMLDivElement>>;
 declare const sheetVariants: (props?: ({
-    side?: "left" | "right" | "top" | "bottom" | null | undefined;
+    side?: "bottom" | "left" | "right" | "top" | null | undefined;
 } & class_variance_authority_types.ClassProp) | undefined) => string;
 interface SheetContentProps extends React$1.ComponentPropsWithoutRef<typeof DialogPrimitive.Content>, VariantProps<typeof sheetVariants> {
 }
@@ -873,4 +905,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, 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 };
+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, Section, type SectionProps, 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, sectionVariants, stackVariants, textVariants, toast, toggleVariants, useFormField, useIsMobile, useSidebar, useToast };

package/dist/index.d.ts

@@ -189,27 +189,27 @@ declare const boxVariants: (props?: ({
 } & class_variance_authority_types.ClassProp) | undefined) => string;
 type SpacingValue = "none" | "condensed" | "normal" | "spacious" | "extra-spacious";
 type MarginValue = SpacingValue | "auto";
-interface ResponsiveProp$3<T> {
+interface ResponsiveProp$4<T> {
     narrow?: T;
     regular?: T;
     wide?: T;
 }
 interface BoxProps extends Omit<React$1.HTMLAttributes<HTMLElement>, "color">, Omit<VariantProps<typeof boxVariants>, "padding" | "paddingX" | "paddingY" | "paddingTop" | "paddingBottom" | "paddingStart" | "paddingEnd" | "margin" | "marginX" | "marginY" | "marginTop" | "marginBottom" | "marginStart" | "marginEnd"> {
     as?: React$1.ElementType;
-    padding?: SpacingValue | ResponsiveProp$3<SpacingValue>;
-    paddingX?: SpacingValue | ResponsiveProp$3<SpacingValue>;
-    paddingY?: SpacingValue | ResponsiveProp$3<SpacingValue>;
-    paddingTop?: SpacingValue | ResponsiveProp$3<SpacingValue>;
-    paddingBottom?: SpacingValue | ResponsiveProp$3<SpacingValue>;
-    paddingStart?: SpacingValue | ResponsiveProp$3<SpacingValue>;
-    paddingEnd?: SpacingValue | ResponsiveProp$3<SpacingValue>;
-    margin?: MarginValue | ResponsiveProp$3<MarginValue>;
-    marginX?: MarginValue | ResponsiveProp$3<MarginValue>;
-    marginY?: MarginValue | ResponsiveProp$3<MarginValue>;
-    marginTop?: MarginValue | ResponsiveProp$3<MarginValue>;
-    marginBottom?: MarginValue | ResponsiveProp$3<MarginValue>;
-    marginStart?: MarginValue | ResponsiveProp$3<MarginValue>;
-    marginEnd?: MarginValue | ResponsiveProp$3<MarginValue>;
+    padding?: SpacingValue | ResponsiveProp$4<SpacingValue>;
+    paddingX?: SpacingValue | ResponsiveProp$4<SpacingValue>;
+    paddingY?: SpacingValue | ResponsiveProp$4<SpacingValue>;
+    paddingTop?: SpacingValue | ResponsiveProp$4<SpacingValue>;
+    paddingBottom?: SpacingValue | ResponsiveProp$4<SpacingValue>;
+    paddingStart?: SpacingValue | ResponsiveProp$4<SpacingValue>;
+    paddingEnd?: SpacingValue | ResponsiveProp$4<SpacingValue>;
+    margin?: MarginValue | ResponsiveProp$4<MarginValue>;
+    marginX?: MarginValue | ResponsiveProp$4<MarginValue>;
+    marginY?: MarginValue | ResponsiveProp$4<MarginValue>;
+    marginTop?: MarginValue | ResponsiveProp$4<MarginValue>;
+    marginBottom?: MarginValue | ResponsiveProp$4<MarginValue>;
+    marginStart?: MarginValue | ResponsiveProp$4<MarginValue>;
+    marginEnd?: MarginValue | ResponsiveProp$4<MarginValue>;
 }
 declare const Box: React$1.ForwardRefExoticComponent<BoxProps & React$1.RefAttributes<HTMLElement>>;
 
@@ -268,15 +268,15 @@ declare const headingVariants: (props?: ({
 } & 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";
-interface ResponsiveProp$2<T> {
+interface ResponsiveProp$3<T> {
     narrow?: T;
     regular?: T;
     wide?: T;
 }
 interface HeadingProps extends Omit<React$1.HTMLAttributes<HTMLHeadingElement>, "color">, Omit<VariantProps<typeof headingVariants>, "size" | "weight"> {
     as?: HeadingTag;
-    size?: HeadingSize | ResponsiveProp$2<HeadingSize>;
-    weight?: VariantProps<typeof headingVariants>["weight"] | ResponsiveProp$2<NonNullable<VariantProps<typeof headingVariants>["weight"]>>;
+    size?: HeadingSize | ResponsiveProp$3<HeadingSize>;
+    weight?: VariantProps<typeof headingVariants>["weight"] | ResponsiveProp$3<NonNullable<VariantProps<typeof headingVariants>["weight"]>>;
 }
 declare const Heading: React$1.ForwardRefExoticComponent<HeadingProps & React$1.RefAttributes<HTMLHeadingElement>>;
 
@@ -287,23 +287,55 @@ declare const textVariants: (props?: ({
     align?: "center" | "start" | "end" | null | undefined;
 } & class_variance_authority_types.ClassProp) | undefined) => string;
 type TextSize = 100 | 200 | 300 | 400 | 500 | 600 | 700;
-interface ResponsiveProp$1<T> {
+interface ResponsiveProp$2<T> {
     narrow?: T;
     regular?: T;
     wide?: T;
 }
 interface TextProps extends Omit<React$1.HTMLAttributes<HTMLElement>, "color">, Omit<VariantProps<typeof textVariants>, "size" | "weight"> {
     as?: React$1.ElementType;
-    size?: TextSize | ResponsiveProp$1<TextSize>;
-    weight?: VariantProps<typeof textVariants>["weight"] | ResponsiveProp$1<NonNullable<VariantProps<typeof textVariants>["weight"]>>;
+    size?: TextSize | ResponsiveProp$2<TextSize>;
+    weight?: VariantProps<typeof textVariants>["weight"] | ResponsiveProp$2<NonNullable<VariantProps<typeof textVariants>["weight"]>>;
 }
 declare const Text: React$1.ForwardRefExoticComponent<TextProps & React$1.RefAttributes<HTMLElement>>;
 
+type ResponsiveProp$1<T> = T | {
+    narrow?: T;
+    regular?: T;
+    wide?: T;
+};
+declare const sectionVariants: (props?: ({
+    rounded?: boolean | null | undefined;
+} & class_variance_authority_types.ClassProp) | undefined) => string;
+interface SectionProps extends Omit<React$1.HTMLAttributes<HTMLElement>, "color">, VariantProps<typeof sectionVariants> {
+    as?: "section" | "div";
+    paddingBlockStart?: ResponsiveProp$1<"none" | "condensed" | "normal" | "spacious">;
+    paddingBlockEnd?: ResponsiveProp$1<"none" | "condensed" | "normal" | "spacious">;
+    backgroundColor?: ResponsiveProp$1<"default" | "subtle" | "inset"> | string;
+    backgroundImageSrc?: string | string[];
+    backgroundImageSize?: string;
+    backgroundImagePosition?: string;
+    /**
+     * Optional section title rendered as an h2 heading inside the container.
+     */
+    sectionTitle?: React$1.ReactNode;
+    /**
+     * Additional class names for the inner container.
+     */
+    containerClassName?: string;
+    /**
+     * When true, the inner container is full-width (no max-width constraint).
+     * @default false
+     */
+    fullWidth?: boolean;
+}
+declare const Section: React$1.ForwardRefExoticComponent<SectionProps & React$1.RefAttributes<HTMLElement>>;
+
 declare const stackVariants: (props?: ({
     direction?: "horizontal" | "vertical" | 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;
+    justify?: "center" | "start" | "end" | "space-around" | "space-between" | "space-evenly" | null | undefined;
     wrap?: boolean | null | undefined;
     padding?: "normal" | "none" | "condensed" | "spacious" | "extra-spacious" | null | undefined;
 } & class_variance_authority_types.ClassProp) | undefined) => string;
@@ -610,7 +642,7 @@ declare const HoverCardContent: React$1.ForwardRefExoticComponent<Omit<HoverCard
 
 declare const Input: React$1.ForwardRefExoticComponent<Omit<React$1.DetailedHTMLProps<React$1.InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>, "ref"> & React$1.RefAttributes<HTMLInputElement>>;
 
-declare const InputOTP: React$1.ForwardRefExoticComponent<(Omit<Omit<React$1.InputHTMLAttributes<HTMLInputElement>, "onChange" | "value" | "maxLength" | "textAlign" | "onComplete" | "pushPasswordManagerStrategy" | "pasteTransformer" | "containerClassName" | "noScriptCSSFallback"> & {
+declare const InputOTP: React$1.ForwardRefExoticComponent<(Omit<Omit<React$1.InputHTMLAttributes<HTMLInputElement>, "onChange" | "value" | "maxLength" | "containerClassName" | "textAlign" | "onComplete" | "pushPasswordManagerStrategy" | "pasteTransformer" | "noScriptCSSFallback"> & {
     value?: string;
     onChange?: (newValue: string) => unknown;
     maxLength: number;
@@ -623,7 +655,7 @@ declare const InputOTP: React$1.ForwardRefExoticComponent<(Omit<Omit<React$1.Inp
 } & {
     render: (props: input_otp.RenderProps) => React$1.ReactNode;
     children?: never;
-} & React$1.RefAttributes<HTMLInputElement>, "ref"> | Omit<Omit<React$1.InputHTMLAttributes<HTMLInputElement>, "onChange" | "value" | "maxLength" | "textAlign" | "onComplete" | "pushPasswordManagerStrategy" | "pasteTransformer" | "containerClassName" | "noScriptCSSFallback"> & {
+} & React$1.RefAttributes<HTMLInputElement>, "ref"> | Omit<Omit<React$1.InputHTMLAttributes<HTMLInputElement>, "onChange" | "value" | "maxLength" | "containerClassName" | "textAlign" | "onComplete" | "pushPasswordManagerStrategy" | "pasteTransformer" | "noScriptCSSFallback"> & {
     value?: string;
     onChange?: (newValue: string) => unknown;
     maxLength: number;
@@ -745,7 +777,7 @@ declare const SheetClose: React$1.ForwardRefExoticComponent<DialogPrimitive.Dial
 declare const SheetPortal: React$1.FC<DialogPrimitive.DialogPortalProps>;
 declare const SheetOverlay: React$1.ForwardRefExoticComponent<Omit<DialogPrimitive.DialogOverlayProps & React$1.RefAttributes<HTMLDivElement>, "ref"> & React$1.RefAttributes<HTMLDivElement>>;
 declare const sheetVariants: (props?: ({
-    side?: "left" | "right" | "top" | "bottom" | null | undefined;
+    side?: "bottom" | "left" | "right" | "top" | null | undefined;
 } & class_variance_authority_types.ClassProp) | undefined) => string;
 interface SheetContentProps extends React$1.ComponentPropsWithoutRef<typeof DialogPrimitive.Content>, VariantProps<typeof sheetVariants> {
 }
@@ -873,4 +905,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, 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 };
+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, Section, type SectionProps, 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, sectionVariants, stackVariants, textVariants, toast, toggleVariants, useFormField, useIsMobile, useSidebar, useToast };