@optilogic/core 1.0.0-beta.2 → 1.0.0-beta.3

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/dist/index.d.cts CHANGED
@@ -509,27 +509,233 @@ declare const AlertDialogDescription: React$1.ForwardRefExoticComponent<Omit<Ale
509
509
  declare const AlertDialogAction: React$1.ForwardRefExoticComponent<Omit<AlertDialogPrimitive.AlertDialogActionProps & React$1.RefAttributes<HTMLButtonElement>, "ref"> & React$1.RefAttributes<HTMLButtonElement>>;
510
510
  declare const AlertDialogCancel: React$1.ForwardRefExoticComponent<Omit<AlertDialogPrimitive.AlertDialogCancelProps & React$1.RefAttributes<HTMLButtonElement>, "ref"> & React$1.RefAttributes<HTMLButtonElement>>;
511
511
 
512
- interface CardProps extends React$1.HTMLAttributes<HTMLDivElement> {
512
+ /**
513
+ * Card variant styles using class-variance-authority.
514
+ * Provides size, hover effects, and interactive styling options.
515
+ */
516
+ declare const cardVariants: (props?: ({
517
+ size?: "sm" | "lg" | "auto" | "md" | "xl" | "full" | null | undefined;
518
+ hover?: "none" | "scale" | "border" | "lift" | "glow" | "border-success" | "border-warning" | "border-destructive" | "border-muted" | null | undefined;
519
+ interactive?: boolean | null | undefined;
520
+ padding?: "sm" | "lg" | "none" | "md" | null | undefined;
521
+ } & class_variance_authority_types.ClassProp) | undefined) => string;
522
+ interface CardProps extends React$1.HTMLAttributes<HTMLDivElement>, VariantProps<typeof cardVariants> {
523
+ /**
524
+ * If true, the card acts as a button and can be clicked.
525
+ * Adds keyboard accessibility and focus states.
526
+ */
527
+ asButton?: boolean;
528
+ /**
529
+ * Custom CSS class for hover border color.
530
+ * Use Tailwind classes like "hover:border-blue-500" or custom CSS variables.
531
+ * This overrides the hover variant's border color if specified.
532
+ */
533
+ hoverBorderClass?: string;
513
534
  }
514
535
  /**
515
- * Card - Container component for grouped content
536
+ * Card - Versatile container component for grouped content
537
+ *
538
+ * A flexible card component supporting multiple sizes, hover effects,
539
+ * and interactive states. Use with CardHeader, CardContent, CardFooter,
540
+ * and other sub-components.
541
+ *
542
+ * @example
543
+ * <Card size="md" hover="lift">
544
+ * <CardHeader>
545
+ * <CardTitle>Title</CardTitle>
546
+ * </CardHeader>
547
+ * <CardContent>Content here</CardContent>
548
+ * </Card>
549
+ *
550
+ * @example
551
+ * <Card interactive hover="border" onClick={() => navigate('/item')}>
552
+ * <CardContent>Clickable card</CardContent>
553
+ * </Card>
516
554
  */
517
555
  declare const Card: React$1.ForwardRefExoticComponent<CardProps & React$1.RefAttributes<HTMLDivElement>>;
518
556
  interface CardHeaderProps extends React$1.HTMLAttributes<HTMLDivElement> {
519
557
  }
558
+ /**
559
+ * CardHeader - Header section of a card
560
+ */
520
561
  declare const CardHeader: React$1.ForwardRefExoticComponent<CardHeaderProps & React$1.RefAttributes<HTMLDivElement>>;
521
562
  interface CardTitleProps extends React$1.HTMLAttributes<HTMLDivElement> {
522
563
  }
564
+ /**
565
+ * CardTitle - Title text for card header
566
+ */
523
567
  declare const CardTitle: React$1.ForwardRefExoticComponent<CardTitleProps & React$1.RefAttributes<HTMLDivElement>>;
524
568
  interface CardDescriptionProps extends React$1.HTMLAttributes<HTMLDivElement> {
525
569
  }
570
+ /**
571
+ * CardDescription - Descriptive text for card header
572
+ */
526
573
  declare const CardDescription: React$1.ForwardRefExoticComponent<CardDescriptionProps & React$1.RefAttributes<HTMLDivElement>>;
527
574
  interface CardContentProps extends React$1.HTMLAttributes<HTMLDivElement> {
528
575
  }
576
+ /**
577
+ * CardContent - Main content area of a card
578
+ */
529
579
  declare const CardContent: React$1.ForwardRefExoticComponent<CardContentProps & React$1.RefAttributes<HTMLDivElement>>;
530
580
  interface CardFooterProps extends React$1.HTMLAttributes<HTMLDivElement> {
531
581
  }
582
+ /**
583
+ * CardFooter - Footer section of a card
584
+ */
532
585
  declare const CardFooter: React$1.ForwardRefExoticComponent<CardFooterProps & React$1.RefAttributes<HTMLDivElement>>;
586
+ declare const cardImageVariants: (props?: ({
587
+ aspectRatio?: "video" | "auto" | "square" | "wide" | "portrait" | null | undefined;
588
+ position?: "fill" | "top" | "bottom" | null | undefined;
589
+ } & class_variance_authority_types.ClassProp) | undefined) => string;
590
+ interface CardImageProps extends React$1.ImgHTMLAttributes<HTMLImageElement>, VariantProps<typeof cardImageVariants> {
591
+ /**
592
+ * Fallback content to display if image fails to load
593
+ */
594
+ fallback?: React$1.ReactNode;
595
+ }
596
+ /**
597
+ * CardImage - Image/media component for cards
598
+ *
599
+ * Displays images with configurable aspect ratios and positions.
600
+ * Handles loading states and fallbacks.
601
+ *
602
+ * @example
603
+ * <Card>
604
+ * <CardImage src="/photo.jpg" alt="Photo" aspectRatio="video" />
605
+ * <CardContent>Caption</CardContent>
606
+ * </Card>
607
+ */
608
+ declare const CardImage: React$1.ForwardRefExoticComponent<CardImageProps & React$1.RefAttributes<HTMLImageElement>>;
609
+ declare const cardActionsVariants: (props?: ({
610
+ showOn?: "always" | "hover" | null | undefined;
611
+ position?: "top-right" | "top-left" | "bottom-right" | "bottom-left" | null | undefined;
612
+ variant?: "ghost" | "floating" | "bar" | "icon-hover" | null | undefined;
613
+ } & class_variance_authority_types.ClassProp) | undefined) => string;
614
+ interface CardActionsProps extends React$1.HTMLAttributes<HTMLDivElement>, VariantProps<typeof cardActionsVariants> {
615
+ }
616
+ /**
617
+ * CardActions - Hover-reveal action buttons for cards
618
+ *
619
+ * Place action buttons that appear on hover. Position can be customized.
620
+ * The parent Card automatically gets the 'group' class for hover detection.
621
+ *
622
+ * @example
623
+ * <Card hover="lift">
624
+ * <CardActions>
625
+ * <IconButton size="sm" variant="ghost"><Edit /></IconButton>
626
+ * <IconButton size="sm" variant="ghost"><Trash /></IconButton>
627
+ * </CardActions>
628
+ * <CardContent>Content</CardContent>
629
+ * </Card>
630
+ *
631
+ * @example
632
+ * // With floating style (default)
633
+ * <CardActions variant="floating">...</CardActions>
634
+ *
635
+ * @example
636
+ * // With bar style for image overlays
637
+ * <CardActions variant="bar" position="bottom-right">...</CardActions>
638
+ */
639
+ declare const CardActions: React$1.ForwardRefExoticComponent<CardActionsProps & React$1.RefAttributes<HTMLDivElement>>;
640
+ interface SelectableCardProps extends CardProps {
641
+ /**
642
+ * Whether the card is selected (controlled)
643
+ */
644
+ selected?: boolean;
645
+ /**
646
+ * Default selected state (uncontrolled)
647
+ */
648
+ defaultSelected?: boolean;
649
+ /**
650
+ * Callback when selection changes
651
+ */
652
+ onSelectedChange?: (selected: boolean) => void;
653
+ /**
654
+ * Whether to show a visible checkbox
655
+ */
656
+ showCheckbox?: boolean;
657
+ /**
658
+ * Position of the checkbox
659
+ */
660
+ checkboxPosition?: "top-left" | "top-right" | "inline-left";
661
+ /**
662
+ * Whether the card is disabled
663
+ */
664
+ disabled?: boolean;
665
+ }
666
+ /**
667
+ * SelectableCard - Card with selection state
668
+ *
669
+ * A card that can be selected/deselected. Supports controlled and uncontrolled modes.
670
+ * Can optionally display a checkbox indicator.
671
+ *
672
+ * @example
673
+ * <SelectableCard
674
+ * selected={isSelected}
675
+ * onSelectedChange={setIsSelected}
676
+ * showCheckbox
677
+ * >
678
+ * <CardContent>Selectable content</CardContent>
679
+ * </SelectableCard>
680
+ *
681
+ * @example
682
+ * // Multi-select list with inline checkbox
683
+ * {items.map(item => (
684
+ * <SelectableCard
685
+ * key={item.id}
686
+ * selected={selectedIds.includes(item.id)}
687
+ * onSelectedChange={(sel) => toggleSelection(item.id, sel)}
688
+ * showCheckbox
689
+ * checkboxPosition="inline-left"
690
+ * >
691
+ * <CardContent>{item.name}</CardContent>
692
+ * </SelectableCard>
693
+ * ))}
694
+ */
695
+ declare const SelectableCard: React$1.ForwardRefExoticComponent<SelectableCardProps & React$1.RefAttributes<HTMLDivElement>>;
696
+ declare const cardGridVariants: (props?: ({
697
+ columns?: 1 | 2 | 3 | 4 | "auto" | null | undefined;
698
+ gap?: "sm" | "lg" | "none" | "md" | "xl" | null | undefined;
699
+ } & class_variance_authority_types.ClassProp) | undefined) => string;
700
+ interface CardGridProps extends React$1.HTMLAttributes<HTMLDivElement>, VariantProps<typeof cardGridVariants> {
701
+ }
702
+ /**
703
+ * CardGrid - Responsive grid layout for cards
704
+ *
705
+ * Arranges cards in a responsive grid with configurable columns and gaps.
706
+ *
707
+ * @example
708
+ * <CardGrid columns={3} gap="lg">
709
+ * <Card>...</Card>
710
+ * <Card>...</Card>
711
+ * <Card>...</Card>
712
+ * </CardGrid>
713
+ *
714
+ * @example
715
+ * // Auto-fill columns based on available space
716
+ * <CardGrid columns="auto">
717
+ * {items.map(item => <Card key={item.id}>...</Card>)}
718
+ * </CardGrid>
719
+ */
720
+ declare const CardGrid: React$1.ForwardRefExoticComponent<CardGridProps & React$1.RefAttributes<HTMLDivElement>>;
721
+ declare const cardListVariants: (props?: ({
722
+ gap?: "sm" | "lg" | "none" | "md" | null | undefined;
723
+ divided?: boolean | null | undefined;
724
+ } & class_variance_authority_types.ClassProp) | undefined) => string;
725
+ interface CardListProps extends React$1.HTMLAttributes<HTMLDivElement>, VariantProps<typeof cardListVariants> {
726
+ }
727
+ /**
728
+ * CardList - Vertical list layout for cards
729
+ *
730
+ * Arranges cards in a vertical list with optional dividers.
731
+ *
732
+ * @example
733
+ * <CardList gap="sm" divided>
734
+ * <Card>...</Card>
735
+ * <Card>...</Card>
736
+ * </CardList>
737
+ */
738
+ declare const CardList: React$1.ForwardRefExoticComponent<CardListProps & React$1.RefAttributes<HTMLDivElement>>;
533
739
 
534
740
  interface TableProps extends React$1.HTMLAttributes<HTMLTableElement> {
535
741
  }
@@ -2307,4 +2513,4 @@ type SortingConfig = {
2307
2513
  onSort: (field: string) => void;
2308
2514
  };
2309
2515
 
2310
- export { ALL_THEMES, Accordion, AccordionContent, type AccordionContentProps, AccordionItem, type AccordionItemProps, AccordionTrigger, type AccordionTriggerProps, type AccordionVariant, AlertDialog, AlertDialogAction, AlertDialogCancel, AlertDialogContent, AlertDialogDescription, AlertDialogFooter, type AlertDialogFooterProps, AlertDialogHeader, type AlertDialogHeaderProps, AlertDialogOverlay, AlertDialogPortal, AlertDialogTitle, AlertDialogTrigger, Autocomplete, type AutocompleteOption, type AutocompleteProps, Badge, type BadgeProps, Button, type ButtonProps, CYBERPUNK_THEME, Calendar, type CalendarProps, Card, CardContent, type CardContentProps, CardDescription, type CardDescriptionProps, CardFooter, type CardFooterProps, CardHeader, type CardHeaderProps, type CardProps, CardTitle, type CardTitleProps, type CellEditEvent, CellEditor, type CellEditorProps$1 as CellEditorProps, type CellPosition, Checkbox, type CheckboxProps, Chip, type ChipProps, type ColorFieldConfig, type ColumnDef, ConfirmationModal, type ConfirmationModalProps, ContextMenu, type ContextMenuItem, type ContextMenuProps, CopyButton, type CopyButtonProps, DARK_ELEGANT_THEME, DataGrid, type DataGridContextValue, type DataGridInternalState, type DataGridProps, type DataGridState, type DateFilterOperator, DatePicker, DatePickerInput, type DatePickerInputProps, type DatePickerProps, DropdownMenu, DropdownMenuCheckboxItem, DropdownMenuContent, DropdownMenuGroup, DropdownMenuItem, type DropdownMenuItemProps, DropdownMenuLabel, type DropdownMenuLabelProps, DropdownMenuPortal, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuSeparator, DropdownMenuShortcut, type DropdownMenuShortcutProps, DropdownMenuSub, DropdownMenuSubContent, DropdownMenuSubTrigger, type DropdownMenuSubTriggerProps, DropdownMenuTrigger, type EditingCell, type EditorType, FOREST_THEME, FUTURISTIC_THEME, type FilterConfig, type FilterOperator, FilterPopover, type FilterPopoverProps$1 as FilterPopoverProps, type FilterType, GREEN_THEME, type GridCellProps, HeaderCell, type HeaderCellProps$1 as HeaderCellProps, IconButton, type IconButtonProps, Input, type InputProps, Label, type LabelProps, LoadingSpinner, type LoadingSpinnerProps, MINIMALIST_LIGHT_THEME, Modal, ModalButton, type ModalButtonProps, type ModalProps, NATURE_THEME, type NumberFilterOperator, OCEAN_THEME, OPTILOGIC_LEGACY_THEME, PRESET_THEMES, type PaginationConfig, Popover, PopoverAnchor, PopoverContent, type PopoverContentProps, PopoverTrigger, Progress, type ProgressProps, ResizablePanel, type ResizablePanelProps, ResizeHandle, type ResizeHandleProps, SCIFI_THEME, SUNSET_THEME, type SearchConfig, Select, SelectContent, SelectGroup, SelectItem, SelectLabel, type SelectOption, SelectScrollDownButton, SelectScrollUpButton, SelectSeparator, SelectTrigger, type SelectTriggerProps, SelectValue, Separator, type SeparatorProps, Skeleton, type SkeletonProps, type SortConfig, type SortingConfig, Switch, type SwitchProps, Table, TableBody, type TableBodyProps, TableCaption, type TableCaptionProps, TableCell, type TableCellProps, TableFooter, type TableFooterProps, TableHead, type TableHeadProps, TableHeader, type TableHeaderProps, type TableProps, TableRow, type TableRowProps, Tabs, TabsContent, TabsList, TabsTrigger, type TextFilterOperator, Textarea, type TextareaProps, type Theme, type ThemeHSL, type ThemeHex, ThemePicker, type ThemePickerProps, Toaster, type ToasterProps, Tooltip, TooltipArrow, TooltipContent, TooltipPortal, type TooltipProps, TooltipProvider, TooltipRoot, TooltipTrigger, type UseContextMenuResult, accordionContentVariants, accordionItemVariants, accordionTriggerVariants, applyFilterOperator, applyFilters, applySorting, applyTheme, areThemesEqual, badgeVariants, buttonVariants, cloneTheme, cn, exportTheme, getCellValue, getCurrentTheme, getDefaultTheme, getPresetTheme, hexToHsl, iconButtonVariants, importTheme, isPresetTheme, labelVariants, loadingSpinnerVariants, themeToHsl, useColumnResize, useColumnResizeManager, useConfirmation, useContextMenu, useDataGridState, useKeyboardNavigation, validateTheme };
2516
+ export { ALL_THEMES, Accordion, AccordionContent, type AccordionContentProps, AccordionItem, type AccordionItemProps, AccordionTrigger, type AccordionTriggerProps, type AccordionVariant, AlertDialog, AlertDialogAction, AlertDialogCancel, AlertDialogContent, AlertDialogDescription, AlertDialogFooter, type AlertDialogFooterProps, AlertDialogHeader, type AlertDialogHeaderProps, AlertDialogOverlay, AlertDialogPortal, AlertDialogTitle, AlertDialogTrigger, Autocomplete, type AutocompleteOption, type AutocompleteProps, Badge, type BadgeProps, Button, type ButtonProps, CYBERPUNK_THEME, Calendar, type CalendarProps, Card, CardActions, type CardActionsProps, CardContent, type CardContentProps, CardDescription, type CardDescriptionProps, CardFooter, type CardFooterProps, CardGrid, type CardGridProps, CardHeader, type CardHeaderProps, CardImage, type CardImageProps, CardList, type CardListProps, type CardProps, CardTitle, type CardTitleProps, type CellEditEvent, CellEditor, type CellEditorProps$1 as CellEditorProps, type CellPosition, Checkbox, type CheckboxProps, Chip, type ChipProps, type ColorFieldConfig, type ColumnDef, ConfirmationModal, type ConfirmationModalProps, ContextMenu, type ContextMenuItem, type ContextMenuProps, CopyButton, type CopyButtonProps, DARK_ELEGANT_THEME, DataGrid, type DataGridContextValue, type DataGridInternalState, type DataGridProps, type DataGridState, type DateFilterOperator, DatePicker, DatePickerInput, type DatePickerInputProps, type DatePickerProps, DropdownMenu, DropdownMenuCheckboxItem, DropdownMenuContent, DropdownMenuGroup, DropdownMenuItem, type DropdownMenuItemProps, DropdownMenuLabel, type DropdownMenuLabelProps, DropdownMenuPortal, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuSeparator, DropdownMenuShortcut, type DropdownMenuShortcutProps, DropdownMenuSub, DropdownMenuSubContent, DropdownMenuSubTrigger, type DropdownMenuSubTriggerProps, DropdownMenuTrigger, type EditingCell, type EditorType, FOREST_THEME, FUTURISTIC_THEME, type FilterConfig, type FilterOperator, FilterPopover, type FilterPopoverProps$1 as FilterPopoverProps, type FilterType, GREEN_THEME, type GridCellProps, HeaderCell, type HeaderCellProps$1 as HeaderCellProps, IconButton, type IconButtonProps, Input, type InputProps, Label, type LabelProps, LoadingSpinner, type LoadingSpinnerProps, MINIMALIST_LIGHT_THEME, Modal, ModalButton, type ModalButtonProps, type ModalProps, NATURE_THEME, type NumberFilterOperator, OCEAN_THEME, OPTILOGIC_LEGACY_THEME, PRESET_THEMES, type PaginationConfig, Popover, PopoverAnchor, PopoverContent, type PopoverContentProps, PopoverTrigger, Progress, type ProgressProps, ResizablePanel, type ResizablePanelProps, ResizeHandle, type ResizeHandleProps, SCIFI_THEME, SUNSET_THEME, type SearchConfig, Select, SelectContent, SelectGroup, SelectItem, SelectLabel, type SelectOption, SelectScrollDownButton, SelectScrollUpButton, SelectSeparator, SelectTrigger, type SelectTriggerProps, SelectValue, SelectableCard, type SelectableCardProps, Separator, type SeparatorProps, Skeleton, type SkeletonProps, type SortConfig, type SortingConfig, Switch, type SwitchProps, Table, TableBody, type TableBodyProps, TableCaption, type TableCaptionProps, TableCell, type TableCellProps, TableFooter, type TableFooterProps, TableHead, type TableHeadProps, TableHeader, type TableHeaderProps, type TableProps, TableRow, type TableRowProps, Tabs, TabsContent, TabsList, TabsTrigger, type TextFilterOperator, Textarea, type TextareaProps, type Theme, type ThemeHSL, type ThemeHex, ThemePicker, type ThemePickerProps, Toaster, type ToasterProps, Tooltip, TooltipArrow, TooltipContent, TooltipPortal, type TooltipProps, TooltipProvider, TooltipRoot, TooltipTrigger, type UseContextMenuResult, accordionContentVariants, accordionItemVariants, accordionTriggerVariants, applyFilterOperator, applyFilters, applySorting, applyTheme, areThemesEqual, badgeVariants, buttonVariants, cardActionsVariants, cardGridVariants, cardImageVariants, cardListVariants, cardVariants, cloneTheme, cn, exportTheme, getCellValue, getCurrentTheme, getDefaultTheme, getPresetTheme, hexToHsl, iconButtonVariants, importTheme, isPresetTheme, labelVariants, loadingSpinnerVariants, themeToHsl, useColumnResize, useColumnResizeManager, useConfirmation, useContextMenu, useDataGridState, useKeyboardNavigation, validateTheme };
package/dist/index.d.ts CHANGED
@@ -509,27 +509,233 @@ declare const AlertDialogDescription: React$1.ForwardRefExoticComponent<Omit<Ale
509
509
  declare const AlertDialogAction: React$1.ForwardRefExoticComponent<Omit<AlertDialogPrimitive.AlertDialogActionProps & React$1.RefAttributes<HTMLButtonElement>, "ref"> & React$1.RefAttributes<HTMLButtonElement>>;
510
510
  declare const AlertDialogCancel: React$1.ForwardRefExoticComponent<Omit<AlertDialogPrimitive.AlertDialogCancelProps & React$1.RefAttributes<HTMLButtonElement>, "ref"> & React$1.RefAttributes<HTMLButtonElement>>;
511
511
 
512
- interface CardProps extends React$1.HTMLAttributes<HTMLDivElement> {
512
+ /**
513
+ * Card variant styles using class-variance-authority.
514
+ * Provides size, hover effects, and interactive styling options.
515
+ */
516
+ declare const cardVariants: (props?: ({
517
+ size?: "sm" | "lg" | "auto" | "md" | "xl" | "full" | null | undefined;
518
+ hover?: "none" | "scale" | "border" | "lift" | "glow" | "border-success" | "border-warning" | "border-destructive" | "border-muted" | null | undefined;
519
+ interactive?: boolean | null | undefined;
520
+ padding?: "sm" | "lg" | "none" | "md" | null | undefined;
521
+ } & class_variance_authority_types.ClassProp) | undefined) => string;
522
+ interface CardProps extends React$1.HTMLAttributes<HTMLDivElement>, VariantProps<typeof cardVariants> {
523
+ /**
524
+ * If true, the card acts as a button and can be clicked.
525
+ * Adds keyboard accessibility and focus states.
526
+ */
527
+ asButton?: boolean;
528
+ /**
529
+ * Custom CSS class for hover border color.
530
+ * Use Tailwind classes like "hover:border-blue-500" or custom CSS variables.
531
+ * This overrides the hover variant's border color if specified.
532
+ */
533
+ hoverBorderClass?: string;
513
534
  }
514
535
  /**
515
- * Card - Container component for grouped content
536
+ * Card - Versatile container component for grouped content
537
+ *
538
+ * A flexible card component supporting multiple sizes, hover effects,
539
+ * and interactive states. Use with CardHeader, CardContent, CardFooter,
540
+ * and other sub-components.
541
+ *
542
+ * @example
543
+ * <Card size="md" hover="lift">
544
+ * <CardHeader>
545
+ * <CardTitle>Title</CardTitle>
546
+ * </CardHeader>
547
+ * <CardContent>Content here</CardContent>
548
+ * </Card>
549
+ *
550
+ * @example
551
+ * <Card interactive hover="border" onClick={() => navigate('/item')}>
552
+ * <CardContent>Clickable card</CardContent>
553
+ * </Card>
516
554
  */
517
555
  declare const Card: React$1.ForwardRefExoticComponent<CardProps & React$1.RefAttributes<HTMLDivElement>>;
518
556
  interface CardHeaderProps extends React$1.HTMLAttributes<HTMLDivElement> {
519
557
  }
558
+ /**
559
+ * CardHeader - Header section of a card
560
+ */
520
561
  declare const CardHeader: React$1.ForwardRefExoticComponent<CardHeaderProps & React$1.RefAttributes<HTMLDivElement>>;
521
562
  interface CardTitleProps extends React$1.HTMLAttributes<HTMLDivElement> {
522
563
  }
564
+ /**
565
+ * CardTitle - Title text for card header
566
+ */
523
567
  declare const CardTitle: React$1.ForwardRefExoticComponent<CardTitleProps & React$1.RefAttributes<HTMLDivElement>>;
524
568
  interface CardDescriptionProps extends React$1.HTMLAttributes<HTMLDivElement> {
525
569
  }
570
+ /**
571
+ * CardDescription - Descriptive text for card header
572
+ */
526
573
  declare const CardDescription: React$1.ForwardRefExoticComponent<CardDescriptionProps & React$1.RefAttributes<HTMLDivElement>>;
527
574
  interface CardContentProps extends React$1.HTMLAttributes<HTMLDivElement> {
528
575
  }
576
+ /**
577
+ * CardContent - Main content area of a card
578
+ */
529
579
  declare const CardContent: React$1.ForwardRefExoticComponent<CardContentProps & React$1.RefAttributes<HTMLDivElement>>;
530
580
  interface CardFooterProps extends React$1.HTMLAttributes<HTMLDivElement> {
531
581
  }
582
+ /**
583
+ * CardFooter - Footer section of a card
584
+ */
532
585
  declare const CardFooter: React$1.ForwardRefExoticComponent<CardFooterProps & React$1.RefAttributes<HTMLDivElement>>;
586
+ declare const cardImageVariants: (props?: ({
587
+ aspectRatio?: "video" | "auto" | "square" | "wide" | "portrait" | null | undefined;
588
+ position?: "fill" | "top" | "bottom" | null | undefined;
589
+ } & class_variance_authority_types.ClassProp) | undefined) => string;
590
+ interface CardImageProps extends React$1.ImgHTMLAttributes<HTMLImageElement>, VariantProps<typeof cardImageVariants> {
591
+ /**
592
+ * Fallback content to display if image fails to load
593
+ */
594
+ fallback?: React$1.ReactNode;
595
+ }
596
+ /**
597
+ * CardImage - Image/media component for cards
598
+ *
599
+ * Displays images with configurable aspect ratios and positions.
600
+ * Handles loading states and fallbacks.
601
+ *
602
+ * @example
603
+ * <Card>
604
+ * <CardImage src="/photo.jpg" alt="Photo" aspectRatio="video" />
605
+ * <CardContent>Caption</CardContent>
606
+ * </Card>
607
+ */
608
+ declare const CardImage: React$1.ForwardRefExoticComponent<CardImageProps & React$1.RefAttributes<HTMLImageElement>>;
609
+ declare const cardActionsVariants: (props?: ({
610
+ showOn?: "always" | "hover" | null | undefined;
611
+ position?: "top-right" | "top-left" | "bottom-right" | "bottom-left" | null | undefined;
612
+ variant?: "ghost" | "floating" | "bar" | "icon-hover" | null | undefined;
613
+ } & class_variance_authority_types.ClassProp) | undefined) => string;
614
+ interface CardActionsProps extends React$1.HTMLAttributes<HTMLDivElement>, VariantProps<typeof cardActionsVariants> {
615
+ }
616
+ /**
617
+ * CardActions - Hover-reveal action buttons for cards
618
+ *
619
+ * Place action buttons that appear on hover. Position can be customized.
620
+ * The parent Card automatically gets the 'group' class for hover detection.
621
+ *
622
+ * @example
623
+ * <Card hover="lift">
624
+ * <CardActions>
625
+ * <IconButton size="sm" variant="ghost"><Edit /></IconButton>
626
+ * <IconButton size="sm" variant="ghost"><Trash /></IconButton>
627
+ * </CardActions>
628
+ * <CardContent>Content</CardContent>
629
+ * </Card>
630
+ *
631
+ * @example
632
+ * // With floating style (default)
633
+ * <CardActions variant="floating">...</CardActions>
634
+ *
635
+ * @example
636
+ * // With bar style for image overlays
637
+ * <CardActions variant="bar" position="bottom-right">...</CardActions>
638
+ */
639
+ declare const CardActions: React$1.ForwardRefExoticComponent<CardActionsProps & React$1.RefAttributes<HTMLDivElement>>;
640
+ interface SelectableCardProps extends CardProps {
641
+ /**
642
+ * Whether the card is selected (controlled)
643
+ */
644
+ selected?: boolean;
645
+ /**
646
+ * Default selected state (uncontrolled)
647
+ */
648
+ defaultSelected?: boolean;
649
+ /**
650
+ * Callback when selection changes
651
+ */
652
+ onSelectedChange?: (selected: boolean) => void;
653
+ /**
654
+ * Whether to show a visible checkbox
655
+ */
656
+ showCheckbox?: boolean;
657
+ /**
658
+ * Position of the checkbox
659
+ */
660
+ checkboxPosition?: "top-left" | "top-right" | "inline-left";
661
+ /**
662
+ * Whether the card is disabled
663
+ */
664
+ disabled?: boolean;
665
+ }
666
+ /**
667
+ * SelectableCard - Card with selection state
668
+ *
669
+ * A card that can be selected/deselected. Supports controlled and uncontrolled modes.
670
+ * Can optionally display a checkbox indicator.
671
+ *
672
+ * @example
673
+ * <SelectableCard
674
+ * selected={isSelected}
675
+ * onSelectedChange={setIsSelected}
676
+ * showCheckbox
677
+ * >
678
+ * <CardContent>Selectable content</CardContent>
679
+ * </SelectableCard>
680
+ *
681
+ * @example
682
+ * // Multi-select list with inline checkbox
683
+ * {items.map(item => (
684
+ * <SelectableCard
685
+ * key={item.id}
686
+ * selected={selectedIds.includes(item.id)}
687
+ * onSelectedChange={(sel) => toggleSelection(item.id, sel)}
688
+ * showCheckbox
689
+ * checkboxPosition="inline-left"
690
+ * >
691
+ * <CardContent>{item.name}</CardContent>
692
+ * </SelectableCard>
693
+ * ))}
694
+ */
695
+ declare const SelectableCard: React$1.ForwardRefExoticComponent<SelectableCardProps & React$1.RefAttributes<HTMLDivElement>>;
696
+ declare const cardGridVariants: (props?: ({
697
+ columns?: 1 | 2 | 3 | 4 | "auto" | null | undefined;
698
+ gap?: "sm" | "lg" | "none" | "md" | "xl" | null | undefined;
699
+ } & class_variance_authority_types.ClassProp) | undefined) => string;
700
+ interface CardGridProps extends React$1.HTMLAttributes<HTMLDivElement>, VariantProps<typeof cardGridVariants> {
701
+ }
702
+ /**
703
+ * CardGrid - Responsive grid layout for cards
704
+ *
705
+ * Arranges cards in a responsive grid with configurable columns and gaps.
706
+ *
707
+ * @example
708
+ * <CardGrid columns={3} gap="lg">
709
+ * <Card>...</Card>
710
+ * <Card>...</Card>
711
+ * <Card>...</Card>
712
+ * </CardGrid>
713
+ *
714
+ * @example
715
+ * // Auto-fill columns based on available space
716
+ * <CardGrid columns="auto">
717
+ * {items.map(item => <Card key={item.id}>...</Card>)}
718
+ * </CardGrid>
719
+ */
720
+ declare const CardGrid: React$1.ForwardRefExoticComponent<CardGridProps & React$1.RefAttributes<HTMLDivElement>>;
721
+ declare const cardListVariants: (props?: ({
722
+ gap?: "sm" | "lg" | "none" | "md" | null | undefined;
723
+ divided?: boolean | null | undefined;
724
+ } & class_variance_authority_types.ClassProp) | undefined) => string;
725
+ interface CardListProps extends React$1.HTMLAttributes<HTMLDivElement>, VariantProps<typeof cardListVariants> {
726
+ }
727
+ /**
728
+ * CardList - Vertical list layout for cards
729
+ *
730
+ * Arranges cards in a vertical list with optional dividers.
731
+ *
732
+ * @example
733
+ * <CardList gap="sm" divided>
734
+ * <Card>...</Card>
735
+ * <Card>...</Card>
736
+ * </CardList>
737
+ */
738
+ declare const CardList: React$1.ForwardRefExoticComponent<CardListProps & React$1.RefAttributes<HTMLDivElement>>;
533
739
 
534
740
  interface TableProps extends React$1.HTMLAttributes<HTMLTableElement> {
535
741
  }
@@ -2307,4 +2513,4 @@ type SortingConfig = {
2307
2513
  onSort: (field: string) => void;
2308
2514
  };
2309
2515
 
2310
- export { ALL_THEMES, Accordion, AccordionContent, type AccordionContentProps, AccordionItem, type AccordionItemProps, AccordionTrigger, type AccordionTriggerProps, type AccordionVariant, AlertDialog, AlertDialogAction, AlertDialogCancel, AlertDialogContent, AlertDialogDescription, AlertDialogFooter, type AlertDialogFooterProps, AlertDialogHeader, type AlertDialogHeaderProps, AlertDialogOverlay, AlertDialogPortal, AlertDialogTitle, AlertDialogTrigger, Autocomplete, type AutocompleteOption, type AutocompleteProps, Badge, type BadgeProps, Button, type ButtonProps, CYBERPUNK_THEME, Calendar, type CalendarProps, Card, CardContent, type CardContentProps, CardDescription, type CardDescriptionProps, CardFooter, type CardFooterProps, CardHeader, type CardHeaderProps, type CardProps, CardTitle, type CardTitleProps, type CellEditEvent, CellEditor, type CellEditorProps$1 as CellEditorProps, type CellPosition, Checkbox, type CheckboxProps, Chip, type ChipProps, type ColorFieldConfig, type ColumnDef, ConfirmationModal, type ConfirmationModalProps, ContextMenu, type ContextMenuItem, type ContextMenuProps, CopyButton, type CopyButtonProps, DARK_ELEGANT_THEME, DataGrid, type DataGridContextValue, type DataGridInternalState, type DataGridProps, type DataGridState, type DateFilterOperator, DatePicker, DatePickerInput, type DatePickerInputProps, type DatePickerProps, DropdownMenu, DropdownMenuCheckboxItem, DropdownMenuContent, DropdownMenuGroup, DropdownMenuItem, type DropdownMenuItemProps, DropdownMenuLabel, type DropdownMenuLabelProps, DropdownMenuPortal, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuSeparator, DropdownMenuShortcut, type DropdownMenuShortcutProps, DropdownMenuSub, DropdownMenuSubContent, DropdownMenuSubTrigger, type DropdownMenuSubTriggerProps, DropdownMenuTrigger, type EditingCell, type EditorType, FOREST_THEME, FUTURISTIC_THEME, type FilterConfig, type FilterOperator, FilterPopover, type FilterPopoverProps$1 as FilterPopoverProps, type FilterType, GREEN_THEME, type GridCellProps, HeaderCell, type HeaderCellProps$1 as HeaderCellProps, IconButton, type IconButtonProps, Input, type InputProps, Label, type LabelProps, LoadingSpinner, type LoadingSpinnerProps, MINIMALIST_LIGHT_THEME, Modal, ModalButton, type ModalButtonProps, type ModalProps, NATURE_THEME, type NumberFilterOperator, OCEAN_THEME, OPTILOGIC_LEGACY_THEME, PRESET_THEMES, type PaginationConfig, Popover, PopoverAnchor, PopoverContent, type PopoverContentProps, PopoverTrigger, Progress, type ProgressProps, ResizablePanel, type ResizablePanelProps, ResizeHandle, type ResizeHandleProps, SCIFI_THEME, SUNSET_THEME, type SearchConfig, Select, SelectContent, SelectGroup, SelectItem, SelectLabel, type SelectOption, SelectScrollDownButton, SelectScrollUpButton, SelectSeparator, SelectTrigger, type SelectTriggerProps, SelectValue, Separator, type SeparatorProps, Skeleton, type SkeletonProps, type SortConfig, type SortingConfig, Switch, type SwitchProps, Table, TableBody, type TableBodyProps, TableCaption, type TableCaptionProps, TableCell, type TableCellProps, TableFooter, type TableFooterProps, TableHead, type TableHeadProps, TableHeader, type TableHeaderProps, type TableProps, TableRow, type TableRowProps, Tabs, TabsContent, TabsList, TabsTrigger, type TextFilterOperator, Textarea, type TextareaProps, type Theme, type ThemeHSL, type ThemeHex, ThemePicker, type ThemePickerProps, Toaster, type ToasterProps, Tooltip, TooltipArrow, TooltipContent, TooltipPortal, type TooltipProps, TooltipProvider, TooltipRoot, TooltipTrigger, type UseContextMenuResult, accordionContentVariants, accordionItemVariants, accordionTriggerVariants, applyFilterOperator, applyFilters, applySorting, applyTheme, areThemesEqual, badgeVariants, buttonVariants, cloneTheme, cn, exportTheme, getCellValue, getCurrentTheme, getDefaultTheme, getPresetTheme, hexToHsl, iconButtonVariants, importTheme, isPresetTheme, labelVariants, loadingSpinnerVariants, themeToHsl, useColumnResize, useColumnResizeManager, useConfirmation, useContextMenu, useDataGridState, useKeyboardNavigation, validateTheme };
2516
+ export { ALL_THEMES, Accordion, AccordionContent, type AccordionContentProps, AccordionItem, type AccordionItemProps, AccordionTrigger, type AccordionTriggerProps, type AccordionVariant, AlertDialog, AlertDialogAction, AlertDialogCancel, AlertDialogContent, AlertDialogDescription, AlertDialogFooter, type AlertDialogFooterProps, AlertDialogHeader, type AlertDialogHeaderProps, AlertDialogOverlay, AlertDialogPortal, AlertDialogTitle, AlertDialogTrigger, Autocomplete, type AutocompleteOption, type AutocompleteProps, Badge, type BadgeProps, Button, type ButtonProps, CYBERPUNK_THEME, Calendar, type CalendarProps, Card, CardActions, type CardActionsProps, CardContent, type CardContentProps, CardDescription, type CardDescriptionProps, CardFooter, type CardFooterProps, CardGrid, type CardGridProps, CardHeader, type CardHeaderProps, CardImage, type CardImageProps, CardList, type CardListProps, type CardProps, CardTitle, type CardTitleProps, type CellEditEvent, CellEditor, type CellEditorProps$1 as CellEditorProps, type CellPosition, Checkbox, type CheckboxProps, Chip, type ChipProps, type ColorFieldConfig, type ColumnDef, ConfirmationModal, type ConfirmationModalProps, ContextMenu, type ContextMenuItem, type ContextMenuProps, CopyButton, type CopyButtonProps, DARK_ELEGANT_THEME, DataGrid, type DataGridContextValue, type DataGridInternalState, type DataGridProps, type DataGridState, type DateFilterOperator, DatePicker, DatePickerInput, type DatePickerInputProps, type DatePickerProps, DropdownMenu, DropdownMenuCheckboxItem, DropdownMenuContent, DropdownMenuGroup, DropdownMenuItem, type DropdownMenuItemProps, DropdownMenuLabel, type DropdownMenuLabelProps, DropdownMenuPortal, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuSeparator, DropdownMenuShortcut, type DropdownMenuShortcutProps, DropdownMenuSub, DropdownMenuSubContent, DropdownMenuSubTrigger, type DropdownMenuSubTriggerProps, DropdownMenuTrigger, type EditingCell, type EditorType, FOREST_THEME, FUTURISTIC_THEME, type FilterConfig, type FilterOperator, FilterPopover, type FilterPopoverProps$1 as FilterPopoverProps, type FilterType, GREEN_THEME, type GridCellProps, HeaderCell, type HeaderCellProps$1 as HeaderCellProps, IconButton, type IconButtonProps, Input, type InputProps, Label, type LabelProps, LoadingSpinner, type LoadingSpinnerProps, MINIMALIST_LIGHT_THEME, Modal, ModalButton, type ModalButtonProps, type ModalProps, NATURE_THEME, type NumberFilterOperator, OCEAN_THEME, OPTILOGIC_LEGACY_THEME, PRESET_THEMES, type PaginationConfig, Popover, PopoverAnchor, PopoverContent, type PopoverContentProps, PopoverTrigger, Progress, type ProgressProps, ResizablePanel, type ResizablePanelProps, ResizeHandle, type ResizeHandleProps, SCIFI_THEME, SUNSET_THEME, type SearchConfig, Select, SelectContent, SelectGroup, SelectItem, SelectLabel, type SelectOption, SelectScrollDownButton, SelectScrollUpButton, SelectSeparator, SelectTrigger, type SelectTriggerProps, SelectValue, SelectableCard, type SelectableCardProps, Separator, type SeparatorProps, Skeleton, type SkeletonProps, type SortConfig, type SortingConfig, Switch, type SwitchProps, Table, TableBody, type TableBodyProps, TableCaption, type TableCaptionProps, TableCell, type TableCellProps, TableFooter, type TableFooterProps, TableHead, type TableHeadProps, TableHeader, type TableHeaderProps, type TableProps, TableRow, type TableRowProps, Tabs, TabsContent, TabsList, TabsTrigger, type TextFilterOperator, Textarea, type TextareaProps, type Theme, type ThemeHSL, type ThemeHex, ThemePicker, type ThemePickerProps, Toaster, type ToasterProps, Tooltip, TooltipArrow, TooltipContent, TooltipPortal, type TooltipProps, TooltipProvider, TooltipRoot, TooltipTrigger, type UseContextMenuResult, accordionContentVariants, accordionItemVariants, accordionTriggerVariants, applyFilterOperator, applyFilters, applySorting, applyTheme, areThemesEqual, badgeVariants, buttonVariants, cardActionsVariants, cardGridVariants, cardImageVariants, cardListVariants, cardVariants, cloneTheme, cn, exportTheme, getCellValue, getCurrentTheme, getDefaultTheme, getPresetTheme, hexToHsl, iconButtonVariants, importTheme, isPresetTheme, labelVariants, loadingSpinnerVariants, themeToHsl, useColumnResize, useColumnResizeManager, useConfirmation, useContextMenu, useDataGridState, useKeyboardNavigation, validateTheme };