@optilogic/core 1.0.0-beta.0 → 1.0.0-beta.10
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/README.md +10 -7
- package/dist/index.cjs +1244 -284
- package/dist/index.cjs.map +1 -1
- package/dist/index.d.cts +412 -6
- package/dist/index.d.ts +412 -6
- package/dist/index.js +1179 -234
- package/dist/index.js.map +1 -1
- package/dist/styles.css +61 -0
- package/package.json +20 -56
- package/src/components/board.tsx +251 -0
- package/src/components/card.tsx +656 -12
- package/src/components/context-menu.tsx +1 -1
- package/src/components/data-grid/hooks/useKeyboardNavigation.ts +1 -1
- package/src/components/data-table.tsx +735 -0
- package/src/index.ts +40 -0
- package/src/styles.css +61 -0
package/dist/index.d.ts
CHANGED
|
@@ -118,7 +118,7 @@ declare const Textarea: React$1.ForwardRefExoticComponent<TextareaProps & React$
|
|
|
118
118
|
* Badge variant styles using class-variance-authority.
|
|
119
119
|
*/
|
|
120
120
|
declare const badgeVariants: (props?: ({
|
|
121
|
-
variant?: "default" | "destructive" | "outline" | "secondary" | "
|
|
121
|
+
variant?: "default" | "destructive" | "outline" | "secondary" | "success" | "warning" | "muted" | "accent" | null | undefined;
|
|
122
122
|
} & class_variance_authority_types.ClassProp) | undefined) => string;
|
|
123
123
|
interface BadgeProps extends React$1.HTMLAttributes<HTMLDivElement>, VariantProps<typeof badgeVariants> {
|
|
124
124
|
}
|
|
@@ -509,27 +509,329 @@ 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
|
-
|
|
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" | "lift" | "glow" | "border" | "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 -
|
|
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?: "auto" | "video" | "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 | "auto" | 2 | 3 | 4 | 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>>;
|
|
739
|
+
|
|
740
|
+
/**
|
|
741
|
+
* Board variant styles using class-variance-authority.
|
|
742
|
+
* Provides elevation (shadow), border, padding, radius, background, and hover options.
|
|
743
|
+
*/
|
|
744
|
+
declare const boardVariants: (props?: ({
|
|
745
|
+
elevation?: "sm" | "lg" | "none" | "md" | "xl" | null | undefined;
|
|
746
|
+
border?: "default" | "none" | "muted" | null | undefined;
|
|
747
|
+
padding?: "sm" | "lg" | "none" | "md" | "xl" | null | undefined;
|
|
748
|
+
radius?: "sm" | "lg" | "none" | "md" | "xl" | "full" | null | undefined;
|
|
749
|
+
background?: "default" | "muted" | "transparent" | null | undefined;
|
|
750
|
+
hover?: "none" | "border" | "border-success" | "border-warning" | "border-destructive" | "elevate" | null | undefined;
|
|
751
|
+
} & class_variance_authority_types.ClassProp) | undefined) => string;
|
|
752
|
+
interface BoardProps extends React$1.HTMLAttributes<HTMLDivElement>, VariantProps<typeof boardVariants> {
|
|
753
|
+
/**
|
|
754
|
+
* Custom CSS class for hover border color.
|
|
755
|
+
* Use Tailwind classes like "hover:border-blue-500" or custom CSS variables.
|
|
756
|
+
* This overrides the hover variant's border color if specified.
|
|
757
|
+
*/
|
|
758
|
+
hoverBorderClass?: string;
|
|
759
|
+
}
|
|
760
|
+
/**
|
|
761
|
+
* Board - General-purpose container component with elevation support
|
|
762
|
+
*
|
|
763
|
+
* A flexible container similar to MUI's Paper component. Supports configurable
|
|
764
|
+
* elevation (shadows), borders, padding, border radius, background colors,
|
|
765
|
+
* and hover effects. Use with BoardHeader and BoardContent for structured layouts.
|
|
766
|
+
*
|
|
767
|
+
* @example
|
|
768
|
+
* // Simple container
|
|
769
|
+
* <Board elevation="md" padding="md">
|
|
770
|
+
* <p>Content here</p>
|
|
771
|
+
* </Board>
|
|
772
|
+
*
|
|
773
|
+
* @example
|
|
774
|
+
* // With header and content
|
|
775
|
+
* <Board elevation="lg" border="default">
|
|
776
|
+
* <BoardHeader>
|
|
777
|
+
* <span className="font-semibold">Section Title</span>
|
|
778
|
+
* </BoardHeader>
|
|
779
|
+
* <BoardContent>
|
|
780
|
+
* Main content goes here
|
|
781
|
+
* </BoardContent>
|
|
782
|
+
* </Board>
|
|
783
|
+
*
|
|
784
|
+
* @example
|
|
785
|
+
* // Transparent background with hover effect
|
|
786
|
+
* <Board background="transparent" hover="border" border="muted">
|
|
787
|
+
* <BoardContent>Hoverable content</BoardContent>
|
|
788
|
+
* </Board>
|
|
789
|
+
*/
|
|
790
|
+
declare const Board: React$1.ForwardRefExoticComponent<BoardProps & React$1.RefAttributes<HTMLDivElement>>;
|
|
791
|
+
interface BoardHeaderProps extends React$1.HTMLAttributes<HTMLDivElement> {
|
|
792
|
+
}
|
|
793
|
+
/**
|
|
794
|
+
* BoardHeader - Header section with bottom separator
|
|
795
|
+
*
|
|
796
|
+
* Renders a header area with a bottom border divider. Accepts any children
|
|
797
|
+
* including text, icons, badges, or custom layouts.
|
|
798
|
+
*
|
|
799
|
+
* @example
|
|
800
|
+
* <Board>
|
|
801
|
+
* <BoardHeader>
|
|
802
|
+
* <span className="font-semibold">Title</span>
|
|
803
|
+
* </BoardHeader>
|
|
804
|
+
* <BoardContent>Content</BoardContent>
|
|
805
|
+
* </Board>
|
|
806
|
+
*
|
|
807
|
+
* @example
|
|
808
|
+
* // With custom layout
|
|
809
|
+
* <BoardHeader className="flex items-center justify-between">
|
|
810
|
+
* <div className="flex items-center gap-2">
|
|
811
|
+
* <FileIcon />
|
|
812
|
+
* <span>Documents</span>
|
|
813
|
+
* </div>
|
|
814
|
+
* <Badge>12</Badge>
|
|
815
|
+
* </BoardHeader>
|
|
816
|
+
*/
|
|
817
|
+
declare const BoardHeader: React$1.ForwardRefExoticComponent<BoardHeaderProps & React$1.RefAttributes<HTMLDivElement>>;
|
|
818
|
+
interface BoardContentProps extends React$1.HTMLAttributes<HTMLDivElement> {
|
|
819
|
+
}
|
|
820
|
+
/**
|
|
821
|
+
* BoardContent - Main content area with consistent padding
|
|
822
|
+
*
|
|
823
|
+
* Provides a padded container for the main content. Useful when using
|
|
824
|
+
* BoardHeader to maintain proper spacing.
|
|
825
|
+
*
|
|
826
|
+
* @example
|
|
827
|
+
* <Board>
|
|
828
|
+
* <BoardHeader>Title</BoardHeader>
|
|
829
|
+
* <BoardContent>
|
|
830
|
+
* Main content goes here
|
|
831
|
+
* </BoardContent>
|
|
832
|
+
* </Board>
|
|
833
|
+
*/
|
|
834
|
+
declare const BoardContent: React$1.ForwardRefExoticComponent<BoardContentProps & React$1.RefAttributes<HTMLDivElement>>;
|
|
533
835
|
|
|
534
836
|
interface TableProps extends React$1.HTMLAttributes<HTMLTableElement> {
|
|
535
837
|
}
|
|
@@ -556,6 +858,110 @@ interface TableCaptionProps extends React$1.HTMLAttributes<HTMLTableCaptionEleme
|
|
|
556
858
|
}
|
|
557
859
|
declare const TableCaption: React$1.ForwardRefExoticComponent<TableCaptionProps & React$1.RefAttributes<HTMLTableCaptionElement>>;
|
|
558
860
|
|
|
861
|
+
/**
|
|
862
|
+
* Column definition for the DataTable.
|
|
863
|
+
*/
|
|
864
|
+
interface DataTableColumn<T> {
|
|
865
|
+
/** Unique key identifying this column */
|
|
866
|
+
key: string;
|
|
867
|
+
/** Header label (string or ReactNode) */
|
|
868
|
+
header: string | React$1.ReactNode;
|
|
869
|
+
/**
|
|
870
|
+
* Custom cell renderer. When omitted the table renders
|
|
871
|
+
* `String(accessor(row))` or `String(row[key])`.
|
|
872
|
+
*/
|
|
873
|
+
cell?: (row: T, rowIndex: number) => React$1.ReactNode;
|
|
874
|
+
/** Accessor function to pull the raw value from a row (used for sorting & default rendering) */
|
|
875
|
+
accessor?: (row: T) => string | number | boolean | null | undefined;
|
|
876
|
+
/** Whether this column is sortable (default false) */
|
|
877
|
+
sortable?: boolean;
|
|
878
|
+
/** Custom sort comparator. Receives two rows, return negative / 0 / positive. */
|
|
879
|
+
sortFn?: (a: T, b: T) => number;
|
|
880
|
+
/** Text alignment */
|
|
881
|
+
align?: "left" | "center" | "right";
|
|
882
|
+
/** Extra class name applied to every `<td>` in this column */
|
|
883
|
+
className?: string;
|
|
884
|
+
/** Extra class name applied to the `<th>` for this column */
|
|
885
|
+
headerClassName?: string;
|
|
886
|
+
/** Tailwind width class or inline width, e.g. "w-[100px]" */
|
|
887
|
+
width?: string;
|
|
888
|
+
}
|
|
889
|
+
/** Sort descriptor */
|
|
890
|
+
interface DataTableSort {
|
|
891
|
+
/** Column key */
|
|
892
|
+
key: string;
|
|
893
|
+
/** Direction */
|
|
894
|
+
direction: "asc" | "desc";
|
|
895
|
+
}
|
|
896
|
+
/**
|
|
897
|
+
* Props for the DataTable component.
|
|
898
|
+
*/
|
|
899
|
+
interface DataTableProps<T> {
|
|
900
|
+
/** Array of row data */
|
|
901
|
+
data: T[];
|
|
902
|
+
/** Column definitions */
|
|
903
|
+
columns: DataTableColumn<T>[];
|
|
904
|
+
/** Return a stable unique key for each row */
|
|
905
|
+
getRowKey: (row: T, index: number) => string;
|
|
906
|
+
/** Default sort (uncontrolled) */
|
|
907
|
+
defaultSort?: DataTableSort;
|
|
908
|
+
/** Controlled sort */
|
|
909
|
+
sort?: DataTableSort | null;
|
|
910
|
+
/** Called when sort changes (controlled) */
|
|
911
|
+
onSortChange?: (sort: DataTableSort | null) => void;
|
|
912
|
+
/**
|
|
913
|
+
* Enable the search bar. Pass `true` for defaults or a config object.
|
|
914
|
+
* Search is always controlled by the consumer via `searchValue` /
|
|
915
|
+
* `onSearchChange`, or managed internally when omitted.
|
|
916
|
+
*/
|
|
917
|
+
searchable?: boolean;
|
|
918
|
+
/** Placeholder text for the search input */
|
|
919
|
+
searchPlaceholder?: string;
|
|
920
|
+
/** Controlled search value */
|
|
921
|
+
searchValue?: string;
|
|
922
|
+
/** Called when the search value changes */
|
|
923
|
+
onSearchChange?: (value: string) => void;
|
|
924
|
+
/** Custom search predicate. When omitted, a case-insensitive substring
|
|
925
|
+
* match across all columns (using accessor / row[key]) is used. */
|
|
926
|
+
searchFn?: (row: T, query: string) => boolean;
|
|
927
|
+
/** Pass a number to enable pagination with that default page size */
|
|
928
|
+
pageSize?: number;
|
|
929
|
+
/** Options shown in the rows-per-page selector */
|
|
930
|
+
pageSizeOptions?: number[];
|
|
931
|
+
/** Controlled current page (0-indexed) */
|
|
932
|
+
currentPage?: number;
|
|
933
|
+
/** Called when page changes */
|
|
934
|
+
onPageChange?: (page: number) => void;
|
|
935
|
+
/** Called when page size changes */
|
|
936
|
+
onPageSizeChange?: (size: number) => void;
|
|
937
|
+
/** Enable selection mode: "checkbox" adds a checkbox column, "highlight" selects on row click */
|
|
938
|
+
selectable?: "checkbox" | "highlight";
|
|
939
|
+
/** Currently selected row keys */
|
|
940
|
+
selectedRows?: string[];
|
|
941
|
+
/** Called when selection changes */
|
|
942
|
+
onSelectedRowsChange?: (keys: string[]) => void;
|
|
943
|
+
/** Called when a row is clicked (independent of selection) */
|
|
944
|
+
onRowClick?: (row: T, index: number) => void;
|
|
945
|
+
/** Dynamic row class name */
|
|
946
|
+
rowClassName?: (row: T, index: number) => string;
|
|
947
|
+
/** Row keys that should be pinned to the top */
|
|
948
|
+
pinnedRows?: string[];
|
|
949
|
+
/** Custom toolbar rendered between search bar and table */
|
|
950
|
+
toolbar?: React$1.ReactNode;
|
|
951
|
+
/** Custom empty state */
|
|
952
|
+
emptyState?: React$1.ReactNode;
|
|
953
|
+
/** Table caption */
|
|
954
|
+
caption?: string;
|
|
955
|
+
/** Show loading state */
|
|
956
|
+
loading?: boolean;
|
|
957
|
+
/** Class name for the outermost wrapper */
|
|
958
|
+
className?: string;
|
|
959
|
+
}
|
|
960
|
+
declare function DataTable<T>({ data, columns, getRowKey, defaultSort, sort: controlledSort, onSortChange, searchable, searchPlaceholder, searchValue: controlledSearchValue, onSearchChange, searchFn, pageSize: defaultPageSize, pageSizeOptions, currentPage: controlledPage, onPageChange, onPageSizeChange, selectable, selectedRows: controlledSelectedRows, onSelectedRowsChange, onRowClick, rowClassName, pinnedRows, toolbar, emptyState, caption, loading, className, }: DataTableProps<T>): react_jsx_runtime.JSX.Element;
|
|
961
|
+
declare namespace DataTable {
|
|
962
|
+
var displayName: string;
|
|
963
|
+
}
|
|
964
|
+
|
|
559
965
|
interface ModalProps {
|
|
560
966
|
/**
|
|
561
967
|
* Whether the modal is open
|
|
@@ -1523,7 +1929,7 @@ interface UseKeyboardNavigationReturn {
|
|
|
1523
1929
|
/** Handler to attach to the grid container */
|
|
1524
1930
|
handleKeyDown: (event: React.KeyboardEvent) => void;
|
|
1525
1931
|
/** Ref to attach to the grid container for focus management */
|
|
1526
|
-
containerRef: React.RefObject<HTMLDivElement>;
|
|
1932
|
+
containerRef: React.RefObject<HTMLDivElement | null>;
|
|
1527
1933
|
/** Focus the container (useful after clicking a cell) */
|
|
1528
1934
|
focusContainer: () => void;
|
|
1529
1935
|
}
|
|
@@ -2292,7 +2698,7 @@ interface UseContextMenuResult<T = unknown> {
|
|
|
2292
2698
|
/** Target item that was right-clicked */
|
|
2293
2699
|
targetItem: T | null;
|
|
2294
2700
|
/** Ref for the menu element */
|
|
2295
|
-
menuRef: React$1.RefObject<HTMLDivElement>;
|
|
2701
|
+
menuRef: React$1.RefObject<HTMLDivElement | null>;
|
|
2296
2702
|
/** Open the context menu */
|
|
2297
2703
|
openMenu: (x: number, y: number, item: T) => void;
|
|
2298
2704
|
/** Close the context menu */
|
|
@@ -2307,4 +2713,4 @@ type SortingConfig = {
|
|
|
2307
2713
|
onSort: (field: string) => void;
|
|
2308
2714
|
};
|
|
2309
2715
|
|
|
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 };
|
|
2716
|
+
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, Board, BoardContent, type BoardContentProps, BoardHeader, type BoardHeaderProps, type BoardProps, 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, DataTable, type DataTableColumn, type DataTableProps, type DataTableSort, 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, boardVariants, 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 };
|