@hex-core/components 1.0.1 → 1.2.0

package/dist/index.d.ts

@@ -202,6 +202,173 @@ declare const ScrollBar: React$1.ForwardRefExoticComponent<Omit<ScrollAreaPrimit
 /** A container that maintains a specified width-to-height ratio for its children. */
 declare const AspectRatio: React$1.ForwardRefExoticComponent<AspectRatioPrimitive.AspectRatioProps & React$1.RefAttributes<HTMLDivElement>>;
 
+/**
+ * CVA variants for Container — max-width wrapper bound to `--container-*` tokens.
+ * Variant names match token names (`sm`/`md`/`lg`/`xl`/`full`); `full` removes the clamp.
+ * Padding maps to `--space-*` tokens.
+ */
+declare const containerVariants: (props?: ({
+    size?: "sm" | "lg" | "md" | "xl" | "full" | null | undefined;
+    padding?: "sm" | "lg" | "none" | "md" | null | undefined;
+} & class_variance_authority_types.ClassProp) | undefined) => string;
+/** Props for the Container component. */
+interface ContainerProps extends React$1.HTMLAttributes<HTMLDivElement>, VariantProps<typeof containerVariants> {
+    /**
+     * Render as a different element via Radix `Slot`. Pass `<Container asChild><main>...</main></Container>`
+     * to render the layout as a `<main>` (or `<section>`, `<article>`, etc.) and inherit landmark semantics.
+     */
+    asChild?: boolean;
+}
+/**
+ * A centered max-width wrapper for page content. Use to constrain reading-width sections.
+ * Pass `asChild` to render as a semantic landmark (`<main>`, `<section>`, etc.) instead of a plain `<div>`.
+ *
+ * @param props - Container props including `size`, `padding`, and optional `asChild`.
+ * @returns A wrapper element with `mx-auto`, max-width clamp, and optional horizontal padding.
+ * @example
+ * ```tsx
+ * <Container size="lg" padding="md" asChild>
+ *   <main>
+ *     <h1>Article title</h1>
+ *     <p>Reading-width content...</p>
+ *   </main>
+ * </Container>
+ * ```
+ */
+declare function Container({ className, size, padding, asChild, ...props }: ContainerProps): react_jsx_runtime.JSX.Element;
+
+/**
+ * CVA variants for Stack — vertical flex flow. `gap`, `align`, and `justify`
+ * pull from the shared layout-variant maps so any change to the gap scale
+ * propagates to Cluster and Grid simultaneously.
+ */
+declare const stackVariants: (props?: ({
+    gap?: "sm" | "lg" | "md" | "xl" | "xs" | null | undefined;
+    align?: "center" | "start" | "end" | "stretch" | null | undefined;
+    justify?: "center" | "start" | "end" | "between" | null | undefined;
+} & class_variance_authority_types.ClassProp) | undefined) => string;
+/** Props for the Stack component. */
+interface StackProps extends React$1.HTMLAttributes<HTMLDivElement>, VariantProps<typeof stackVariants> {
+}
+/**
+ * Vertical flex flow with token-bound gap. Children stack top-to-bottom.
+ * @param props - Stack props including `gap`, `align`, and `justify` variant keys.
+ * @returns A flex column with consistent vertical spacing.
+ * @example
+ * ```tsx
+ * <Stack gap="lg">
+ *   <h2>Section title</h2>
+ *   <p>Paragraph one.</p>
+ *   <p>Paragraph two.</p>
+ * </Stack>
+ * ```
+ */
+declare function Stack({ className, gap, align, justify, ...props }: StackProps): react_jsx_runtime.JSX.Element;
+
+/**
+ * CVA variants for Cluster — horizontal flex flow with wrap.
+ * `gap` and `justify` pull from shared layout-variant maps; `align` adds
+ * `baseline` (text-baseline alignment for mixed-size siblings).
+ */
+declare const clusterVariants: (props?: ({
+    gap?: "sm" | "lg" | "md" | "xl" | "xs" | null | undefined;
+    align?: "center" | "start" | "end" | "stretch" | "baseline" | null | undefined;
+    justify?: "center" | "start" | "end" | "between" | null | undefined;
+} & class_variance_authority_types.ClassProp) | undefined) => string;
+/** Props for the Cluster component. */
+interface ClusterProps extends React$1.HTMLAttributes<HTMLDivElement>, VariantProps<typeof clusterVariants> {
+}
+/**
+ * Horizontal flex flow with wrap. Children flow left-to-right and wrap to next line as needed.
+ * @param props - Cluster props including `gap`, `align`, and `justify` variant keys.
+ * @returns A flex row that wraps with consistent gap.
+ * @example
+ * ```tsx
+ * <Cluster gap="sm">
+ *   <Badge>react</Badge>
+ *   <Badge>typescript</Badge>
+ *   <Badge>tailwind</Badge>
+ * </Cluster>
+ * ```
+ */
+declare function Cluster({ className, gap, align, justify, ...props }: ClusterProps): react_jsx_runtime.JSX.Element;
+
+/**
+ * CVA variants for Grid — CSS grid with column-count presets and shared `gap`.
+ * `cols` accepts 1/2/3/4/6 fixed columns or `"auto-fit"` for responsive auto-sizing
+ * (in which case the consumer should pass `minColWidth` for the min track size).
+ *
+ * `cols` keys are TypeScript numeric literals (`cols={3}`) at the type level;
+ * the schema's `enumValues` serializes them as strings for JSON-shape parity.
+ */
+declare const gridVariants: (props?: ({
+    cols?: 1 | 2 | 3 | 4 | 6 | "auto-fit" | null | undefined;
+    gap?: "sm" | "lg" | "md" | "xl" | "xs" | null | undefined;
+    align?: "center" | "start" | "end" | "stretch" | null | undefined;
+} & class_variance_authority_types.ClassProp) | undefined) => string;
+/** Props for the Grid component. */
+interface GridProps extends React$1.HTMLAttributes<HTMLDivElement>, VariantProps<typeof gridVariants> {
+    /**
+     * Minimum column width for `cols="auto-fit"`. Tracks repeat to fill the container,
+     * never shrinking below this value. Ignored when `cols` is a fixed integer.
+     * @default "16rem"
+     */
+    minColWidth?: string;
+}
+/**
+ * CSS grid with column-count presets and consistent gap. Use for card grids,
+ * dashboards, image galleries, and any layout where children should align to
+ * shared row/column tracks.
+ *
+ * Pass `cols="auto-fit"` and `minColWidth` for responsive grids that fit as
+ * many columns as the viewport allows without media queries.
+ *
+ * @param props - Grid props including `cols`, `gap`, `align`, and `minColWidth`.
+ * @returns A CSS grid container.
+ * @example
+ * ```tsx
+ * <Grid cols={3} gap="md">
+ *   {items.map((i) => <Card key={i.id}>{i.title}</Card>)}
+ * </Grid>
+ * <Grid cols="auto-fit" minColWidth="20rem" gap="lg">
+ *   {responsiveItems.map(...)}
+ * </Grid>
+ * ```
+ */
+declare function Grid({ className, cols, gap, align, minColWidth, style, ...props }: GridProps): react_jsx_runtime.JSX.Element;
+
+/**
+ * CVA variants for Spacer — declarative whitespace.
+ * `size` sets `--spacer-size` to a `--space-*` token (with inline fallback);
+ * `axis` consumes that var via the bracket form used everywhere else in the
+ * package, so the height or width can never collapse to zero if the size
+ * variant is dropped.
+ */
+declare const spacerVariants: (props?: ({
+    size?: "sm" | "lg" | "md" | "xl" | "xs" | null | undefined;
+    axis?: "both" | "horizontal" | "vertical" | null | undefined;
+} & class_variance_authority_types.ClassProp) | undefined) => string;
+/** Props for the Spacer component. */
+interface SpacerProps extends Omit<React$1.HTMLAttributes<HTMLDivElement>, "children">, VariantProps<typeof spacerVariants> {
+}
+/**
+ * A declarative whitespace block. Use when you want to insert space between two
+ * siblings without relying on margin or gap (e.g. inside a flex container that
+ * doesn't own the spacing decision).
+ *
+ * Renders an empty `<div>` with `aria-hidden` since it has no semantic content.
+ *
+ * @param props - Spacer props including `size` and `axis` variant keys.
+ * @returns An empty div with the requested dimension.
+ * @example
+ * ```tsx
+ * <h1>Title</h1>
+ * <Spacer size="lg" />
+ * <p>Body</p>
+ * ```
+ */
+declare function Spacer({ className, size, axis, ...props }: SpacerProps): react_jsx_runtime.JSX.Element;
+
 /** A container card with subtle shadow and border. */
 declare const Card: React$1.ForwardRefExoticComponent<React$1.HTMLAttributes<HTMLDivElement> & React$1.RefAttributes<HTMLDivElement>>;
 /** The header section of a Card. */
@@ -1026,6 +1193,16 @@ declare const scrollAreaSchema: ComponentSchemaDefinition;
 
 declare const aspectRatioSchema: ComponentSchemaDefinition;
 
+declare const containerSchema: ComponentSchemaDefinition;
+
+declare const stackSchema: ComponentSchemaDefinition;
+
+declare const clusterSchema: ComponentSchemaDefinition;
+
+declare const gridSchema: ComponentSchemaDefinition;
+
+declare const spacerSchema: ComponentSchemaDefinition;
+
 declare const collapsibleSchema: ComponentSchemaDefinition;
 
 declare const hoverCardSchema: ComponentSchemaDefinition;
@@ -1073,4 +1250,4 @@ declare const sidebarSchema: ComponentSchemaDefinition;
  */
 declare function cn(...inputs: ClassValue[]): string;
 
-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, Breadcrumb, BreadcrumbEllipsis, BreadcrumbItem, BreadcrumbLink, BreadcrumbList, BreadcrumbPage, BreadcrumbSeparator, Button, type ButtonProps, Calendar, Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle, Checkbox, type CheckboxProps, Collapsible, CollapsibleContent, CollapsibleTrigger, Combobox, type ComboboxOption, type ComboboxProps, Command, CommandDialog, CommandEmpty, CommandGroup, CommandInput, CommandItem, CommandList, CommandSeparator, CommandShortcut, ContextMenu, ContextMenuCheckboxItem, ContextMenuContent, ContextMenuGroup, ContextMenuItem, ContextMenuLabel, ContextMenuPortal, ContextMenuRadioGroup, ContextMenuRadioItem, ContextMenuSeparator, ContextMenuShortcut, ContextMenuTrigger, DataTable, type DataTableProps, DatePicker, type DatePickerProps, 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, DropdownMenuTrigger, Form, FormControl, FormDescription, FormField, FormItem, FormLabel, FormMessage, HoverCard, HoverCardContent, HoverCardTrigger, Input, InputOTP, InputOTPGroup, type InputOTPProps, InputOTPSeparator, InputOTPSlot, type InputProps, Label, type LabelProps, Menubar, MenubarContent, MenubarGroup, MenubarItem, MenubarLabel, MenubarMenu, MenubarPortal, MenubarRadioGroup, MenubarSeparator, MenubarShortcut, 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, SelectSeparator, SelectTrigger, SelectValue, Separator, type SeparatorProps, Sheet, SheetClose, SheetContent, SheetDescription, SheetFooter, SheetHeader, SheetOverlay, SheetPortal, SheetTitle, SheetTrigger, Sidebar, SidebarContent, SidebarFooter, SidebarHeader, SidebarItem, SidebarProvider, SidebarTrigger, Skeleton, Slider, Switch, type SwitchProps, Table, TableBody, TableCaption, TableCell, TableFooter, TableHead, TableHeader, TableRow, Tabs, TabsContent, TabsList, TabsTrigger, Textarea, type TextareaProps, Toaster, Toggle, ToggleGroup, ToggleGroupItem, Tooltip, TooltipContent, TooltipProvider, TooltipTrigger, accordionSchema, alertDialogSchema, alertSchema, alertVariants, aspectRatioSchema, avatarSchema, badgeSchema, badgeVariants, breadcrumbSchema, buttonSchema, buttonVariants, calendarSchema, cardSchema, checkboxSchema, cn, collapsibleSchema, comboboxSchema, commandSchema, contextMenuSchema, dataTableSchema, datePickerSchema, dialogSchema, drawerSchema, dropdownMenuSchema, formSchema, hoverCardSchema, inputOTPSchema, inputSchema, labelSchema, menubarSchema, navigationMenuSchema, navigationMenuTriggerStyle, paginationSchema, popoverSchema, progressSchema, radioGroupSchema, resizableSchema, scrollAreaSchema, selectSchema, separatorSchema, sheetSchema, sidebarSchema, skeletonSchema, sliderSchema, sonnerSchema, switchSchema, tableSchema, tabsSchema, textareaSchema, toggleGroupSchema, toggleSchema, toggleVariants, tooltipSchema, useFormField, useSidebar };
+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, Breadcrumb, BreadcrumbEllipsis, BreadcrumbItem, BreadcrumbLink, BreadcrumbList, BreadcrumbPage, BreadcrumbSeparator, Button, type ButtonProps, Calendar, Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle, Checkbox, type CheckboxProps, Cluster, type ClusterProps, Collapsible, CollapsibleContent, CollapsibleTrigger, Combobox, type ComboboxOption, type ComboboxProps, Command, CommandDialog, CommandEmpty, CommandGroup, CommandInput, CommandItem, CommandList, CommandSeparator, CommandShortcut, Container, type ContainerProps, ContextMenu, ContextMenuCheckboxItem, ContextMenuContent, ContextMenuGroup, ContextMenuItem, ContextMenuLabel, ContextMenuPortal, ContextMenuRadioGroup, ContextMenuRadioItem, ContextMenuSeparator, ContextMenuShortcut, ContextMenuTrigger, DataTable, type DataTableProps, DatePicker, type DatePickerProps, 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, DropdownMenuTrigger, Form, FormControl, FormDescription, FormField, FormItem, FormLabel, FormMessage, Grid, type GridProps, HoverCard, HoverCardContent, HoverCardTrigger, Input, InputOTP, InputOTPGroup, type InputOTPProps, InputOTPSeparator, InputOTPSlot, type InputProps, Label, type LabelProps, Menubar, MenubarContent, MenubarGroup, MenubarItem, MenubarLabel, MenubarMenu, MenubarPortal, MenubarRadioGroup, MenubarSeparator, MenubarShortcut, 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, SelectSeparator, SelectTrigger, SelectValue, Separator, type SeparatorProps, Sheet, SheetClose, SheetContent, SheetDescription, SheetFooter, SheetHeader, SheetOverlay, SheetPortal, SheetTitle, SheetTrigger, Sidebar, SidebarContent, SidebarFooter, SidebarHeader, SidebarItem, SidebarProvider, SidebarTrigger, Skeleton, Slider, Spacer, type SpacerProps, Stack, type StackProps, Switch, type SwitchProps, Table, TableBody, TableCaption, TableCell, TableFooter, TableHead, TableHeader, TableRow, Tabs, TabsContent, TabsList, TabsTrigger, Textarea, type TextareaProps, Toaster, Toggle, ToggleGroup, ToggleGroupItem, Tooltip, TooltipContent, TooltipProvider, TooltipTrigger, accordionSchema, alertDialogSchema, alertSchema, alertVariants, aspectRatioSchema, avatarSchema, badgeSchema, badgeVariants, breadcrumbSchema, buttonSchema, buttonVariants, calendarSchema, cardSchema, checkboxSchema, clusterSchema, clusterVariants, cn, collapsibleSchema, comboboxSchema, commandSchema, containerSchema, containerVariants, contextMenuSchema, dataTableSchema, datePickerSchema, dialogSchema, drawerSchema, dropdownMenuSchema, formSchema, gridSchema, gridVariants, hoverCardSchema, inputOTPSchema, inputSchema, labelSchema, menubarSchema, navigationMenuSchema, navigationMenuTriggerStyle, paginationSchema, popoverSchema, progressSchema, radioGroupSchema, resizableSchema, scrollAreaSchema, selectSchema, separatorSchema, sheetSchema, sidebarSchema, skeletonSchema, sliderSchema, sonnerSchema, spacerSchema, spacerVariants, stackSchema, stackVariants, switchSchema, tableSchema, tabsSchema, textareaSchema, toggleGroupSchema, toggleSchema, toggleVariants, tooltipSchema, useFormField, useSidebar };