@underverse-ui/underverse 1.0.20 → 1.0.21

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.
Files changed (7) hide show
  1. package/dist/index.cjs +152 -111
  2. package/dist/index.cjs.map +1 -1
  3. package/dist/index.d.cts +7 -2
  4. package/dist/index.d.ts +7 -2
  5. package/dist/index.js +152 -111
  6. package/dist/index.js.map +1 -1
  7. package/package.json +1 -1
package/dist/index.d.cts CHANGED
@@ -2307,6 +2307,8 @@ interface LoadingBarProps {
2307
2307
  declare const LoadingBar: React__default.FC<LoadingBarProps>;
2308
2308
 
2309
2309
  type FilterType = "text" | "select" | "date";
2310
+ type DataTableSize = "sm" | "md" | "lg";
2311
+ type DataTableDensity = "compact" | "normal" | "comfortable";
2310
2312
  type DataTableColumn<T> = {
2311
2313
  key: string;
2312
2314
  title: React__default.ReactNode;
@@ -2366,6 +2368,8 @@ interface DataTableProps<T> {
2366
2368
  onQueryChange?: (q: DataTableQuery) => void;
2367
2369
  caption?: React__default.ReactNode;
2368
2370
  toolbar?: React__default.ReactNode;
2371
+ /** Visual size preset. Maps to component scales in the table UI. */
2372
+ size?: DataTableSize;
2369
2373
  enableColumnVisibilityToggle?: boolean;
2370
2374
  enableDensityToggle?: boolean;
2371
2375
  enableHeaderAlignToggle?: boolean;
@@ -2382,10 +2386,11 @@ interface DataTableProps<T> {
2382
2386
  labels?: DataTableLabels;
2383
2387
  }
2384
2388
 
2385
- declare function DataTable<T extends Record<string, any>>({ columns, data, rowKey, loading, total, page, pageSize, pageSizeOptions, onQueryChange, caption, toolbar, enableColumnVisibilityToggle, enableDensityToggle, enableHeaderAlignToggle, striped, columnDividers, className, storageKey, stickyHeader, maxHeight, labels, }: DataTableProps<T>): react_jsx_runtime.JSX.Element;
2389
+ declare function DataTable<T extends Record<string, any>>({ columns, data, rowKey, loading, total, page, pageSize, pageSizeOptions, onQueryChange, caption, toolbar, size, enableColumnVisibilityToggle, enableDensityToggle, enableHeaderAlignToggle, striped, columnDividers, className, storageKey, stickyHeader, maxHeight, labels, }: DataTableProps<T>): react_jsx_runtime.JSX.Element;
2386
2390
 
2387
2391
  interface TableProps extends React__default.HTMLAttributes<HTMLTableElement> {
2388
2392
  containerClassName?: string;
2393
+ disableContainer?: boolean;
2389
2394
  }
2390
2395
  declare const Table: React__default.ForwardRefExoticComponent<TableProps & React__default.RefAttributes<HTMLTableElement>>;
2391
2396
  interface TableHeaderProps extends React__default.HTMLAttributes<HTMLTableSectionElement> {
@@ -3625,4 +3630,4 @@ declare function getUnderverseMessages(locale?: UnderverseLocale): {
3625
3630
  };
3626
3631
  };
3627
3632
 
3628
- export { AccessDenied, Alert, AreaChart, type AreaChartDataPoint, type AreaChartProps, type AreaChartSeries, Avatar, Badge, Badge as BadgeBase, BarChart, type BarChartDataPoint, type BarChartProps, type BarChartSeries, BatteryProgress, BottomSheet, Breadcrumb, Button, ButtonLoading, type ButtonProps, Calendar, type CalendarEvent, type CalendarProps, CalendarTimeline, type CalendarTimelineDateInput, type CalendarTimelineDayRangeMode, type CalendarTimelineEvent, type CalendarTimelineFormatters, type CalendarTimelineGroup, type CalendarTimelineInteractions, type CalendarTimelineLabels, type CalendarTimelineProps, type CalendarTimelineResource, type CalendarTimelineSize, type CalendarTimelineView, type CalendarTimelineVirtualization, Card, Carousel, CategoryTreeSelect, Checkbox, type CheckboxProps, CircularProgress, ClientOnly, ColorPicker, type ColorPickerProps, Combobox, type ComboboxProps, CompactPagination, type CompactPaginationProps, DataTable, type DataTableColumn, type DataTableQuery, DatePicker, type DatePickerProps, DateRangePicker, DateTimePicker, type DateTimePickerProps, date as DateUtils, Drawer, DropdownMenu, DropdownMenuItem, DropdownMenuSeparator, FallingIcons, FileUpload, type FileUploadProps, FloatingContacts, ForceInternalTranslationsProvider, Form, FormActions, FormCheckbox, FormControl, FormDescription, FormField, FormInput, FormItem, FormLabel, FormMessage, FormSubmitButton, GaugeChart, type GaugeChartProps, GlobalLoading, GradientBadge, Grid, GridItem, type GridItemProps, type GridProps, ImageUpload, InlineLoading, Input, type InputProps, InteractiveBadge, Label, type LanguageOption, LanguageSwitcherHeadless as LanguageSwitcher, LanguageSwitcherHeadless, type LanguageSwitcherHeadlessProps, type LanguageSwitcherHeadlessProps as LanguageSwitcherProps, LineChart, type LineChartDataPoint, type LineChartProps, type LineChartSeries, List, ListItem, LoadingBar, LoadingDots, LoadingProgress, LoadingSpinner, type Locale$1 as Locale, MiniProgress, Modal, MonthYearPicker, MonthYearPicker as MonthYearPickerBase, type MonthYearPickerProps, MultiCombobox, type MultiComboboxProps, MusicPlayer, MusicPlayer as MusicPlayerDefault, type MusicPlayerProps, NotificationBadge, NotificationModal, NumberInput, OverlayControls, PageLoading, Pagination, type PaginationProps, PasswordInput, PieChart, type PieChartDataPoint, type PieChartProps, PillTabs, Popover, Progress, PulseBadge, RadarChart, type RadarChartDataPoint, type RadarChartProps, type RadarChartSeries, RadioGroup, RadioGroupItem, SIZE_STYLES_BTN, ScrollArea, SearchInput, Section, SegmentedProgress, SelectDropdown, Sheet, SidebarSheet, SimplePagination, type SimplePaginationProps, SimpleTabs, Skeleton, SkeletonAvatar, SkeletonButton, SkeletonCard, SkeletonList, SkeletonMessage, SkeletonPost, SkeletonTable, SkeletonText, SlideOver, Slider, SmartImage, type Song, type Sorter, Sparkline, type SparklineDataPoint, type SparklineProps, StatusBadge, StepProgress, type SupportedLocale, Switch, Table, TableBody, TableCaption, TableCell, TableFooter, TableHead, TableHeader, TableRow, Tabs, TagBadge, TagInput, TagInput as TagInputBase, type TagInputProps, Textarea, type ThemeMode, ThemeToggleHeadless as ThemeToggle, ThemeToggleHeadless, type ThemeToggleHeadlessProps, type ThemeToggleHeadlessProps as ThemeToggleProps, TimePicker, type TimePickerProps, Timeline, TimelineItem, ToastProvider, Tooltip, TranslationProvider, type TranslationProviderProps, type Translations, UEditor, type UEditorProps, type UEditorVariant, type UnderverseLocale, UnderverseProvider, type UnderverseProviderProps, type UploadedFile, VARIANT_STYLES_ALERT, VARIANT_STYLES_BTN, VerticalTabs, Watermark, type WatermarkProps, cn$1 as cn, cn as cnLocal, getAnimationStyles, getUnderverseMessages, injectAnimationStyles, shadcnAnimationStyles, underverseMessages, useFormField, useShadCNAnimations, useSmartLocale, useSmartTranslations, useToast, useTranslations as useUnderverseI18n, useLocale as useUnderverseI18nLocale, useUnderverseLocale, useUnderverseTranslations };
3633
+ export { AccessDenied, Alert, AreaChart, type AreaChartDataPoint, type AreaChartProps, type AreaChartSeries, Avatar, Badge, Badge as BadgeBase, BarChart, type BarChartDataPoint, type BarChartProps, type BarChartSeries, BatteryProgress, BottomSheet, Breadcrumb, Button, ButtonLoading, type ButtonProps, Calendar, type CalendarEvent, type CalendarProps, CalendarTimeline, type CalendarTimelineDateInput, type CalendarTimelineDayRangeMode, type CalendarTimelineEvent, type CalendarTimelineFormatters, type CalendarTimelineGroup, type CalendarTimelineInteractions, type CalendarTimelineLabels, type CalendarTimelineProps, type CalendarTimelineResource, type CalendarTimelineSize, type CalendarTimelineView, type CalendarTimelineVirtualization, Card, Carousel, CategoryTreeSelect, Checkbox, type CheckboxProps, CircularProgress, ClientOnly, ColorPicker, type ColorPickerProps, Combobox, type ComboboxProps, CompactPagination, type CompactPaginationProps, DataTable, type DataTableColumn, type DataTableDensity, type DataTableQuery, type DataTableSize, DatePicker, type DatePickerProps, DateRangePicker, DateTimePicker, type DateTimePickerProps, date as DateUtils, Drawer, DropdownMenu, DropdownMenuItem, DropdownMenuSeparator, FallingIcons, FileUpload, type FileUploadProps, FloatingContacts, ForceInternalTranslationsProvider, Form, FormActions, FormCheckbox, FormControl, FormDescription, FormField, FormInput, FormItem, FormLabel, FormMessage, FormSubmitButton, GaugeChart, type GaugeChartProps, GlobalLoading, GradientBadge, Grid, GridItem, type GridItemProps, type GridProps, ImageUpload, InlineLoading, Input, type InputProps, InteractiveBadge, Label, type LanguageOption, LanguageSwitcherHeadless as LanguageSwitcher, LanguageSwitcherHeadless, type LanguageSwitcherHeadlessProps, type LanguageSwitcherHeadlessProps as LanguageSwitcherProps, LineChart, type LineChartDataPoint, type LineChartProps, type LineChartSeries, List, ListItem, LoadingBar, LoadingDots, LoadingProgress, LoadingSpinner, type Locale$1 as Locale, MiniProgress, Modal, MonthYearPicker, MonthYearPicker as MonthYearPickerBase, type MonthYearPickerProps, MultiCombobox, type MultiComboboxProps, MusicPlayer, MusicPlayer as MusicPlayerDefault, type MusicPlayerProps, NotificationBadge, NotificationModal, NumberInput, OverlayControls, PageLoading, Pagination, type PaginationProps, PasswordInput, PieChart, type PieChartDataPoint, type PieChartProps, PillTabs, Popover, Progress, PulseBadge, RadarChart, type RadarChartDataPoint, type RadarChartProps, type RadarChartSeries, RadioGroup, RadioGroupItem, SIZE_STYLES_BTN, ScrollArea, SearchInput, Section, SegmentedProgress, SelectDropdown, Sheet, SidebarSheet, SimplePagination, type SimplePaginationProps, SimpleTabs, Skeleton, SkeletonAvatar, SkeletonButton, SkeletonCard, SkeletonList, SkeletonMessage, SkeletonPost, SkeletonTable, SkeletonText, SlideOver, Slider, SmartImage, type Song, type Sorter, Sparkline, type SparklineDataPoint, type SparklineProps, StatusBadge, StepProgress, type SupportedLocale, Switch, Table, TableBody, TableCaption, TableCell, TableFooter, TableHead, TableHeader, TableRow, Tabs, TagBadge, TagInput, TagInput as TagInputBase, type TagInputProps, Textarea, type ThemeMode, ThemeToggleHeadless as ThemeToggle, ThemeToggleHeadless, type ThemeToggleHeadlessProps, type ThemeToggleHeadlessProps as ThemeToggleProps, TimePicker, type TimePickerProps, Timeline, TimelineItem, ToastProvider, Tooltip, TranslationProvider, type TranslationProviderProps, type Translations, UEditor, type UEditorProps, type UEditorVariant, type UnderverseLocale, UnderverseProvider, type UnderverseProviderProps, type UploadedFile, VARIANT_STYLES_ALERT, VARIANT_STYLES_BTN, VerticalTabs, Watermark, type WatermarkProps, cn$1 as cn, cn as cnLocal, getAnimationStyles, getUnderverseMessages, injectAnimationStyles, shadcnAnimationStyles, underverseMessages, useFormField, useShadCNAnimations, useSmartLocale, useSmartTranslations, useToast, useTranslations as useUnderverseI18n, useLocale as useUnderverseI18nLocale, useUnderverseLocale, useUnderverseTranslations };
package/dist/index.d.ts CHANGED
@@ -2307,6 +2307,8 @@ interface LoadingBarProps {
2307
2307
  declare const LoadingBar: React__default.FC<LoadingBarProps>;
2308
2308
 
2309
2309
  type FilterType = "text" | "select" | "date";
2310
+ type DataTableSize = "sm" | "md" | "lg";
2311
+ type DataTableDensity = "compact" | "normal" | "comfortable";
2310
2312
  type DataTableColumn<T> = {
2311
2313
  key: string;
2312
2314
  title: React__default.ReactNode;
@@ -2366,6 +2368,8 @@ interface DataTableProps<T> {
2366
2368
  onQueryChange?: (q: DataTableQuery) => void;
2367
2369
  caption?: React__default.ReactNode;
2368
2370
  toolbar?: React__default.ReactNode;
2371
+ /** Visual size preset. Maps to component scales in the table UI. */
2372
+ size?: DataTableSize;
2369
2373
  enableColumnVisibilityToggle?: boolean;
2370
2374
  enableDensityToggle?: boolean;
2371
2375
  enableHeaderAlignToggle?: boolean;
@@ -2382,10 +2386,11 @@ interface DataTableProps<T> {
2382
2386
  labels?: DataTableLabels;
2383
2387
  }
2384
2388
 
2385
- declare function DataTable<T extends Record<string, any>>({ columns, data, rowKey, loading, total, page, pageSize, pageSizeOptions, onQueryChange, caption, toolbar, enableColumnVisibilityToggle, enableDensityToggle, enableHeaderAlignToggle, striped, columnDividers, className, storageKey, stickyHeader, maxHeight, labels, }: DataTableProps<T>): react_jsx_runtime.JSX.Element;
2389
+ declare function DataTable<T extends Record<string, any>>({ columns, data, rowKey, loading, total, page, pageSize, pageSizeOptions, onQueryChange, caption, toolbar, size, enableColumnVisibilityToggle, enableDensityToggle, enableHeaderAlignToggle, striped, columnDividers, className, storageKey, stickyHeader, maxHeight, labels, }: DataTableProps<T>): react_jsx_runtime.JSX.Element;
2386
2390
 
2387
2391
  interface TableProps extends React__default.HTMLAttributes<HTMLTableElement> {
2388
2392
  containerClassName?: string;
2393
+ disableContainer?: boolean;
2389
2394
  }
2390
2395
  declare const Table: React__default.ForwardRefExoticComponent<TableProps & React__default.RefAttributes<HTMLTableElement>>;
2391
2396
  interface TableHeaderProps extends React__default.HTMLAttributes<HTMLTableSectionElement> {
@@ -3625,4 +3630,4 @@ declare function getUnderverseMessages(locale?: UnderverseLocale): {
3625
3630
  };
3626
3631
  };
3627
3632
 
3628
- export { AccessDenied, Alert, AreaChart, type AreaChartDataPoint, type AreaChartProps, type AreaChartSeries, Avatar, Badge, Badge as BadgeBase, BarChart, type BarChartDataPoint, type BarChartProps, type BarChartSeries, BatteryProgress, BottomSheet, Breadcrumb, Button, ButtonLoading, type ButtonProps, Calendar, type CalendarEvent, type CalendarProps, CalendarTimeline, type CalendarTimelineDateInput, type CalendarTimelineDayRangeMode, type CalendarTimelineEvent, type CalendarTimelineFormatters, type CalendarTimelineGroup, type CalendarTimelineInteractions, type CalendarTimelineLabels, type CalendarTimelineProps, type CalendarTimelineResource, type CalendarTimelineSize, type CalendarTimelineView, type CalendarTimelineVirtualization, Card, Carousel, CategoryTreeSelect, Checkbox, type CheckboxProps, CircularProgress, ClientOnly, ColorPicker, type ColorPickerProps, Combobox, type ComboboxProps, CompactPagination, type CompactPaginationProps, DataTable, type DataTableColumn, type DataTableQuery, DatePicker, type DatePickerProps, DateRangePicker, DateTimePicker, type DateTimePickerProps, date as DateUtils, Drawer, DropdownMenu, DropdownMenuItem, DropdownMenuSeparator, FallingIcons, FileUpload, type FileUploadProps, FloatingContacts, ForceInternalTranslationsProvider, Form, FormActions, FormCheckbox, FormControl, FormDescription, FormField, FormInput, FormItem, FormLabel, FormMessage, FormSubmitButton, GaugeChart, type GaugeChartProps, GlobalLoading, GradientBadge, Grid, GridItem, type GridItemProps, type GridProps, ImageUpload, InlineLoading, Input, type InputProps, InteractiveBadge, Label, type LanguageOption, LanguageSwitcherHeadless as LanguageSwitcher, LanguageSwitcherHeadless, type LanguageSwitcherHeadlessProps, type LanguageSwitcherHeadlessProps as LanguageSwitcherProps, LineChart, type LineChartDataPoint, type LineChartProps, type LineChartSeries, List, ListItem, LoadingBar, LoadingDots, LoadingProgress, LoadingSpinner, type Locale$1 as Locale, MiniProgress, Modal, MonthYearPicker, MonthYearPicker as MonthYearPickerBase, type MonthYearPickerProps, MultiCombobox, type MultiComboboxProps, MusicPlayer, MusicPlayer as MusicPlayerDefault, type MusicPlayerProps, NotificationBadge, NotificationModal, NumberInput, OverlayControls, PageLoading, Pagination, type PaginationProps, PasswordInput, PieChart, type PieChartDataPoint, type PieChartProps, PillTabs, Popover, Progress, PulseBadge, RadarChart, type RadarChartDataPoint, type RadarChartProps, type RadarChartSeries, RadioGroup, RadioGroupItem, SIZE_STYLES_BTN, ScrollArea, SearchInput, Section, SegmentedProgress, SelectDropdown, Sheet, SidebarSheet, SimplePagination, type SimplePaginationProps, SimpleTabs, Skeleton, SkeletonAvatar, SkeletonButton, SkeletonCard, SkeletonList, SkeletonMessage, SkeletonPost, SkeletonTable, SkeletonText, SlideOver, Slider, SmartImage, type Song, type Sorter, Sparkline, type SparklineDataPoint, type SparklineProps, StatusBadge, StepProgress, type SupportedLocale, Switch, Table, TableBody, TableCaption, TableCell, TableFooter, TableHead, TableHeader, TableRow, Tabs, TagBadge, TagInput, TagInput as TagInputBase, type TagInputProps, Textarea, type ThemeMode, ThemeToggleHeadless as ThemeToggle, ThemeToggleHeadless, type ThemeToggleHeadlessProps, type ThemeToggleHeadlessProps as ThemeToggleProps, TimePicker, type TimePickerProps, Timeline, TimelineItem, ToastProvider, Tooltip, TranslationProvider, type TranslationProviderProps, type Translations, UEditor, type UEditorProps, type UEditorVariant, type UnderverseLocale, UnderverseProvider, type UnderverseProviderProps, type UploadedFile, VARIANT_STYLES_ALERT, VARIANT_STYLES_BTN, VerticalTabs, Watermark, type WatermarkProps, cn$1 as cn, cn as cnLocal, getAnimationStyles, getUnderverseMessages, injectAnimationStyles, shadcnAnimationStyles, underverseMessages, useFormField, useShadCNAnimations, useSmartLocale, useSmartTranslations, useToast, useTranslations as useUnderverseI18n, useLocale as useUnderverseI18nLocale, useUnderverseLocale, useUnderverseTranslations };
3633
+ export { AccessDenied, Alert, AreaChart, type AreaChartDataPoint, type AreaChartProps, type AreaChartSeries, Avatar, Badge, Badge as BadgeBase, BarChart, type BarChartDataPoint, type BarChartProps, type BarChartSeries, BatteryProgress, BottomSheet, Breadcrumb, Button, ButtonLoading, type ButtonProps, Calendar, type CalendarEvent, type CalendarProps, CalendarTimeline, type CalendarTimelineDateInput, type CalendarTimelineDayRangeMode, type CalendarTimelineEvent, type CalendarTimelineFormatters, type CalendarTimelineGroup, type CalendarTimelineInteractions, type CalendarTimelineLabels, type CalendarTimelineProps, type CalendarTimelineResource, type CalendarTimelineSize, type CalendarTimelineView, type CalendarTimelineVirtualization, Card, Carousel, CategoryTreeSelect, Checkbox, type CheckboxProps, CircularProgress, ClientOnly, ColorPicker, type ColorPickerProps, Combobox, type ComboboxProps, CompactPagination, type CompactPaginationProps, DataTable, type DataTableColumn, type DataTableDensity, type DataTableQuery, type DataTableSize, DatePicker, type DatePickerProps, DateRangePicker, DateTimePicker, type DateTimePickerProps, date as DateUtils, Drawer, DropdownMenu, DropdownMenuItem, DropdownMenuSeparator, FallingIcons, FileUpload, type FileUploadProps, FloatingContacts, ForceInternalTranslationsProvider, Form, FormActions, FormCheckbox, FormControl, FormDescription, FormField, FormInput, FormItem, FormLabel, FormMessage, FormSubmitButton, GaugeChart, type GaugeChartProps, GlobalLoading, GradientBadge, Grid, GridItem, type GridItemProps, type GridProps, ImageUpload, InlineLoading, Input, type InputProps, InteractiveBadge, Label, type LanguageOption, LanguageSwitcherHeadless as LanguageSwitcher, LanguageSwitcherHeadless, type LanguageSwitcherHeadlessProps, type LanguageSwitcherHeadlessProps as LanguageSwitcherProps, LineChart, type LineChartDataPoint, type LineChartProps, type LineChartSeries, List, ListItem, LoadingBar, LoadingDots, LoadingProgress, LoadingSpinner, type Locale$1 as Locale, MiniProgress, Modal, MonthYearPicker, MonthYearPicker as MonthYearPickerBase, type MonthYearPickerProps, MultiCombobox, type MultiComboboxProps, MusicPlayer, MusicPlayer as MusicPlayerDefault, type MusicPlayerProps, NotificationBadge, NotificationModal, NumberInput, OverlayControls, PageLoading, Pagination, type PaginationProps, PasswordInput, PieChart, type PieChartDataPoint, type PieChartProps, PillTabs, Popover, Progress, PulseBadge, RadarChart, type RadarChartDataPoint, type RadarChartProps, type RadarChartSeries, RadioGroup, RadioGroupItem, SIZE_STYLES_BTN, ScrollArea, SearchInput, Section, SegmentedProgress, SelectDropdown, Sheet, SidebarSheet, SimplePagination, type SimplePaginationProps, SimpleTabs, Skeleton, SkeletonAvatar, SkeletonButton, SkeletonCard, SkeletonList, SkeletonMessage, SkeletonPost, SkeletonTable, SkeletonText, SlideOver, Slider, SmartImage, type Song, type Sorter, Sparkline, type SparklineDataPoint, type SparklineProps, StatusBadge, StepProgress, type SupportedLocale, Switch, Table, TableBody, TableCaption, TableCell, TableFooter, TableHead, TableHeader, TableRow, Tabs, TagBadge, TagInput, TagInput as TagInputBase, type TagInputProps, Textarea, type ThemeMode, ThemeToggleHeadless as ThemeToggle, ThemeToggleHeadless, type ThemeToggleHeadlessProps, type ThemeToggleHeadlessProps as ThemeToggleProps, TimePicker, type TimePickerProps, Timeline, TimelineItem, ToastProvider, Tooltip, TranslationProvider, type TranslationProviderProps, type Translations, UEditor, type UEditorProps, type UEditorVariant, type UnderverseLocale, UnderverseProvider, type UnderverseProviderProps, type UploadedFile, VARIANT_STYLES_ALERT, VARIANT_STYLES_BTN, VerticalTabs, Watermark, type WatermarkProps, cn$1 as cn, cn as cnLocal, getAnimationStyles, getUnderverseMessages, injectAnimationStyles, shadcnAnimationStyles, underverseMessages, useFormField, useShadCNAnimations, useSmartLocale, useSmartTranslations, useToast, useTranslations as useUnderverseI18n, useLocale as useUnderverseI18nLocale, useUnderverseLocale, useUnderverseTranslations };
package/dist/index.js CHANGED
@@ -18834,19 +18834,24 @@ var LoadingBar = ({
18834
18834
  // ../../components/ui/Table.tsx
18835
18835
  import React55 from "react";
18836
18836
  import { jsx as jsx65, jsxs as jsxs59 } from "react/jsx-runtime";
18837
- var Table = React55.forwardRef(({ className, containerClassName, ...props }, ref) => /* @__PURE__ */ jsx65(
18838
- "div",
18839
- {
18840
- className: cn(
18841
- "relative w-full overflow-auto",
18842
- "rounded-2xl md:rounded-3xl border border-border",
18843
- "bg-card text-card-foreground shadow-sm",
18844
- "backdrop-blur-sm transition-all duration-300",
18845
- containerClassName
18846
- ),
18847
- children: /* @__PURE__ */ jsx65("table", { ref, className: cn("w-full caption-bottom text-sm", className), ...props })
18837
+ var Table = React55.forwardRef(({ className, containerClassName, disableContainer = false, ...props }, ref) => {
18838
+ if (disableContainer) {
18839
+ return /* @__PURE__ */ jsx65("table", { ref, className: cn("w-full caption-bottom text-sm", className), ...props });
18848
18840
  }
18849
- ));
18841
+ return /* @__PURE__ */ jsx65(
18842
+ "div",
18843
+ {
18844
+ className: cn(
18845
+ "relative w-full overflow-auto",
18846
+ "rounded-2xl md:rounded-3xl border border-border",
18847
+ "bg-card text-card-foreground shadow-sm",
18848
+ "backdrop-blur-sm transition-all duration-300",
18849
+ containerClassName
18850
+ ),
18851
+ children: /* @__PURE__ */ jsx65("table", { ref, className: cn("w-full caption-bottom text-sm", className), ...props })
18852
+ }
18853
+ );
18854
+ });
18850
18855
  Table.displayName = "Table";
18851
18856
  var TableHeader = React55.forwardRef(({ className, children, filterRow, ...props }, ref) => /* @__PURE__ */ jsxs59("thead", { ref, className: cn("[&_tr]:border-b [&_tr]:border-border", "bg-muted", className), ...props, children: [
18852
18857
  children,
@@ -18897,11 +18902,18 @@ function DataTablePagination({
18897
18902
  curPageSize,
18898
18903
  setCurPage,
18899
18904
  pageSizeOptions,
18900
- setCurPageSize
18905
+ setCurPageSize,
18906
+ size
18901
18907
  }) {
18902
18908
  const totalPages = Math.ceil(totalItems / curPageSize);
18903
18909
  if (!(totalItems > 0 && totalPages > 1)) return null;
18904
- return /* @__PURE__ */ jsxs60("div", { className: "flex items-center justify-between gap-2 px-1 pt-3 text-xs text-muted-foreground", children: [
18910
+ const controlButtonSize = size === "lg" ? "md" : "sm";
18911
+ const navBtnClass = size === "sm" ? "h-6 w-6 p-0 rounded-full" : size === "lg" ? "h-8 w-8 p-0 rounded-full" : "h-7 w-7 p-0 rounded-full";
18912
+ const navIconClass = size === "sm" ? "h-3.5 w-3.5" : size === "lg" ? "h-5 w-5" : "h-4 w-4";
18913
+ const pageBtnClass = size === "sm" ? "h-6 min-w-6 px-1.5 rounded-full text-[11px] font-medium transition-colors" : size === "lg" ? "h-8 min-w-8 px-2.5 rounded-full text-sm font-medium transition-colors" : "h-7 min-w-7 px-2 rounded-full text-xs font-medium transition-colors";
18914
+ const containerTextClass = size === "sm" ? "text-[11px]" : size === "lg" ? "text-sm" : "text-xs";
18915
+ const pageSizeClass = size === "sm" ? "w-16" : size === "lg" ? "w-24" : "w-20";
18916
+ return /* @__PURE__ */ jsxs60("div", { className: cn("flex items-center justify-between gap-2 px-1 pt-3 text-muted-foreground", containerTextClass), children: [
18905
18917
  /* @__PURE__ */ jsxs60("div", { className: "tabular-nums", children: [
18906
18918
  (curPage - 1) * curPageSize + 1,
18907
18919
  "-",
@@ -18914,11 +18926,11 @@ function DataTablePagination({
18914
18926
  Button_default,
18915
18927
  {
18916
18928
  variant: "ghost",
18917
- size: "sm",
18918
- className: "h-7 w-7 p-0 rounded-full",
18929
+ size: controlButtonSize,
18930
+ className: navBtnClass,
18919
18931
  onClick: () => setCurPage(Math.max(1, curPage - 1)),
18920
18932
  disabled: curPage === 1,
18921
- children: /* @__PURE__ */ jsx66("svg", { className: "h-4 w-4", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ jsx66("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M15 19l-7-7 7-7" }) })
18933
+ children: /* @__PURE__ */ jsx66("svg", { className: navIconClass, fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ jsx66("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M15 19l-7-7 7-7" }) })
18922
18934
  }
18923
18935
  ),
18924
18936
  (() => {
@@ -18940,7 +18952,7 @@ function DataTablePagination({
18940
18952
  {
18941
18953
  onClick: () => setCurPage(p),
18942
18954
  className: cn(
18943
- "h-7 min-w-7 px-2 rounded-full text-xs font-medium transition-colors",
18955
+ pageBtnClass,
18944
18956
  curPage === p ? "bg-primary text-primary-foreground" : "hover:bg-accent hover:text-accent-foreground"
18945
18957
  ),
18946
18958
  children: p
@@ -18953,11 +18965,11 @@ function DataTablePagination({
18953
18965
  Button_default,
18954
18966
  {
18955
18967
  variant: "ghost",
18956
- size: "sm",
18957
- className: "h-7 w-7 p-0 rounded-full",
18968
+ size: controlButtonSize,
18969
+ className: navBtnClass,
18958
18970
  onClick: () => setCurPage(Math.min(totalPages, curPage + 1)),
18959
18971
  disabled: curPage === totalPages,
18960
- children: /* @__PURE__ */ jsx66("svg", { className: "h-4 w-4", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ jsx66("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M9 5l7 7-7 7" }) })
18972
+ children: /* @__PURE__ */ jsx66("svg", { className: navIconClass, fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ jsx66("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M9 5l7 7-7 7" }) })
18961
18973
  }
18962
18974
  )
18963
18975
  ] }),
@@ -18970,8 +18982,8 @@ function DataTablePagination({
18970
18982
  setCurPage(1);
18971
18983
  setCurPageSize(Number(v));
18972
18984
  },
18973
- size: "sm",
18974
- className: "w-20"
18985
+ size,
18986
+ className: pageSizeClass
18975
18987
  }
18976
18988
  )
18977
18989
  ] });
@@ -19085,20 +19097,25 @@ function DataTableToolbar({
19085
19097
  enableDensityToggle,
19086
19098
  enableColumnVisibilityToggle,
19087
19099
  enableHeaderAlignToggle,
19100
+ size,
19088
19101
  density,
19089
19102
  setDensity,
19090
19103
  setHeaderAlign,
19091
19104
  labels,
19092
19105
  t
19093
19106
  }) {
19107
+ const controlButtonSize = size === "lg" ? "md" : "sm";
19108
+ const controlButtonClass = size === "sm" ? "h-7 px-2 text-xs" : size === "lg" ? "h-9 px-3 text-sm" : "h-8 px-2";
19109
+ const iconClass = size === "sm" ? "w-3.5 h-3.5 mr-1" : "w-4 h-4 mr-1";
19110
+ const captionClass = size === "sm" ? "text-xs" : size === "lg" ? "text-sm" : "text-sm";
19094
19111
  return /* @__PURE__ */ jsxs61("div", { className: "flex items-center justify-between gap-4 mb-1", children: [
19095
- /* @__PURE__ */ jsx67("div", { className: "text-sm text-muted-foreground", children: caption }),
19112
+ /* @__PURE__ */ jsx67("div", { className: captionClass + " text-muted-foreground", children: caption }),
19096
19113
  /* @__PURE__ */ jsxs61("div", { className: "flex items-center gap-2", children: [
19097
19114
  enableDensityToggle && /* @__PURE__ */ jsx67(
19098
19115
  DropdownMenu_default,
19099
19116
  {
19100
- trigger: /* @__PURE__ */ jsxs61(Button_default, { variant: "ghost", size: "sm", className: "h-8 px-2", children: [
19101
- /* @__PURE__ */ jsx67("svg", { className: "w-4 h-4 mr-1", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ jsx67("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M4 6h16M4 10h16M4 14h16M4 18h16" }) }),
19117
+ trigger: /* @__PURE__ */ jsxs61(Button_default, { variant: "ghost", size: controlButtonSize, className: controlButtonClass, children: [
19118
+ /* @__PURE__ */ jsx67("svg", { className: iconClass, fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ jsx67("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M4 6h16M4 10h16M4 14h16M4 18h16" }) }),
19102
19119
  labels?.density || t("density")
19103
19120
  ] }),
19104
19121
  items: [
@@ -19113,8 +19130,8 @@ function DataTableToolbar({
19113
19130
  return /* @__PURE__ */ jsx67(
19114
19131
  DropdownMenu_default,
19115
19132
  {
19116
- trigger: /* @__PURE__ */ jsxs61(Button_default, { variant: "ghost", size: "sm", className: "h-8 px-2", children: [
19117
- /* @__PURE__ */ jsx67("svg", { className: "w-4 h-4 mr-1", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ jsx67(
19133
+ trigger: /* @__PURE__ */ jsxs61(Button_default, { variant: "ghost", size: controlButtonSize, className: controlButtonClass, children: [
19134
+ /* @__PURE__ */ jsx67("svg", { className: iconClass, fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ jsx67(
19118
19135
  "path",
19119
19136
  {
19120
19137
  strokeLinecap: "round",
@@ -19144,8 +19161,8 @@ function DataTableToolbar({
19144
19161
  enableHeaderAlignToggle && /* @__PURE__ */ jsx67(
19145
19162
  DropdownMenu_default,
19146
19163
  {
19147
- trigger: /* @__PURE__ */ jsxs61(Button_default, { variant: "ghost", size: "sm", className: "h-8 px-2", children: [
19148
- /* @__PURE__ */ jsx67("svg", { className: "w-4 h-4 mr-1", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ jsx67("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M4 6h16M4 12h10M4 18h16" }) }),
19164
+ trigger: /* @__PURE__ */ jsxs61(Button_default, { variant: "ghost", size: controlButtonSize, className: controlButtonClass, children: [
19165
+ /* @__PURE__ */ jsx67("svg", { className: iconClass, fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ jsx67("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M4 6h16M4 12h10M4 18h16" }) }),
19149
19166
  labels?.headerAlign || t("headerAlign")
19150
19167
  ] }),
19151
19168
  items: [
@@ -19385,6 +19402,11 @@ function validateColumns(columns) {
19385
19402
 
19386
19403
  // ../../components/ui/DataTable/DataTable.tsx
19387
19404
  import { Fragment as Fragment26, jsx as jsx68, jsxs as jsxs62 } from "react/jsx-runtime";
19405
+ var SIZE_TO_DENSITY = {
19406
+ sm: "compact",
19407
+ md: "normal",
19408
+ lg: "comfortable"
19409
+ };
19388
19410
  function DataTable({
19389
19411
  columns,
19390
19412
  data,
@@ -19397,6 +19419,7 @@ function DataTable({
19397
19419
  onQueryChange,
19398
19420
  caption,
19399
19421
  toolbar,
19422
+ size = "md",
19400
19423
  enableColumnVisibilityToggle = true,
19401
19424
  enableDensityToggle = true,
19402
19425
  enableHeaderAlignToggle = false,
@@ -19413,7 +19436,7 @@ function DataTable({
19413
19436
  const [visibleCols, setVisibleCols] = React59.useState(() => columns.filter((c) => c.visible !== false).map((c) => c.key));
19414
19437
  const [filters, setFilters] = React59.useState({});
19415
19438
  const [sort, setSort] = React59.useState(null);
19416
- const [density, setDensity] = React59.useState("normal");
19439
+ const [density, setDensity] = React59.useState(() => SIZE_TO_DENSITY[size]);
19417
19440
  const [curPage, setCurPage] = React59.useState(page);
19418
19441
  const { curPageSize, setCurPageSize } = usePageSizeStorage({ pageSize, storageKey });
19419
19442
  React59.useEffect(() => {
@@ -19433,6 +19456,9 @@ function DataTable({
19433
19456
  React59.useEffect(() => {
19434
19457
  setCurPage(page);
19435
19458
  }, [page]);
19459
+ React59.useEffect(() => {
19460
+ setDensity(SIZE_TO_DENSITY[size]);
19461
+ }, [size]);
19436
19462
  const isServerMode = Boolean(onQueryChange);
19437
19463
  const hasEmittedQuery = React59.useRef(false);
19438
19464
  React59.useEffect(() => {
@@ -19445,6 +19471,9 @@ function DataTable({
19445
19471
  }, [debouncedFilters, sort, curPage, curPageSize, onQueryChange]);
19446
19472
  const densityRowClass = density === "compact" ? "h-9" : density === "comfortable" ? "h-14" : "h-12";
19447
19473
  const cellPadding = density === "compact" ? "py-1.5 px-3" : density === "comfortable" ? "py-3 px-4" : "py-2.5 px-4";
19474
+ const headerTitleClass = size === "sm" ? "text-xs" : size === "lg" ? "text-[15px]" : "text-sm";
19475
+ const headerMinHeightClass = size === "sm" ? "min-h-9" : size === "lg" ? "min-h-11" : "min-h-10";
19476
+ const sortIconClass = size === "sm" ? "w-3.5 h-3.5" : size === "lg" ? "w-4 h-4" : "w-3.5 h-3.5";
19448
19477
  const visibleColsSet = React59.useMemo(() => new Set(visibleCols), [visibleCols]);
19449
19478
  const visibleColumns = React59.useMemo(() => {
19450
19479
  return filterVisibleColumns(columns, visibleColsSet);
@@ -19467,7 +19496,7 @@ function DataTable({
19467
19496
  const renderFilterControl = (col) => {
19468
19497
  if (!col.filter) return null;
19469
19498
  const k = col.key;
19470
- const commonProps = { className: "h-8 w-full text-sm" };
19499
+ const commonProps = { className: "w-full", size };
19471
19500
  if (col.filter.type === "text") {
19472
19501
  return /* @__PURE__ */ jsx68(
19473
19502
  Input_default,
@@ -19488,7 +19517,7 @@ function DataTable({
19488
19517
  Combobox,
19489
19518
  {
19490
19519
  options: ["", ...options],
19491
- size: "sm",
19520
+ size,
19492
19521
  className: "w-full",
19493
19522
  value: filters[k] ?? "",
19494
19523
  onChange: (v) => {
@@ -19503,6 +19532,7 @@ function DataTable({
19503
19532
  return /* @__PURE__ */ jsx68(
19504
19533
  DatePicker,
19505
19534
  {
19535
+ size,
19506
19536
  placeholder: col.filter.placeholder || `Select ${String(col.title)}`,
19507
19537
  value: filters[k] || null,
19508
19538
  onChange: (d) => {
@@ -19521,19 +19551,20 @@ function DataTable({
19521
19551
  "div",
19522
19552
  {
19523
19553
  className: cn(
19524
- "flex items-center gap-1 min-h-10",
19554
+ "flex items-center gap-1",
19555
+ headerMinHeightClass,
19525
19556
  col.align === "right" && "justify-end",
19526
19557
  col.align === "center" && "justify-center",
19527
19558
  !col.align && "justify-start"
19528
19559
  ),
19529
- children: /* @__PURE__ */ jsx68("span", { className: "font-medium text-sm whitespace-nowrap", children: col.title })
19560
+ children: /* @__PURE__ */ jsx68("span", { className: cn("font-medium whitespace-nowrap", headerTitleClass), children: col.title })
19530
19561
  }
19531
19562
  );
19532
19563
  }
19533
19564
  const isRightAlign = col.align === "right" || !col.align && headerAlign === "right";
19534
19565
  const isCenterAlign = col.align === "center" || !col.align && headerAlign === "center";
19535
19566
  const titleContent = /* @__PURE__ */ jsxs62("div", { className: "flex items-center gap-1", children: [
19536
- /* @__PURE__ */ jsx68("span", { className: "font-medium text-sm whitespace-nowrap", children: col.title }),
19567
+ /* @__PURE__ */ jsx68("span", { className: cn("font-medium whitespace-nowrap", headerTitleClass), children: col.title }),
19537
19568
  col.sortable && /* @__PURE__ */ jsx68(
19538
19569
  "button",
19539
19570
  {
@@ -19551,7 +19582,7 @@ function DataTable({
19551
19582
  },
19552
19583
  "aria-label": "Sort",
19553
19584
  title: `Sort by ${String(col.title)}`,
19554
- children: /* @__PURE__ */ jsxs62("svg", { width: "14", height: "14", viewBox: "0 0 20 20", fill: "none", className: "inline-block", children: [
19585
+ children: /* @__PURE__ */ jsxs62("svg", { viewBox: "0 0 20 20", fill: "none", className: cn("inline-block", sortIconClass), children: [
19555
19586
  /* @__PURE__ */ jsx68(
19556
19587
  "path",
19557
19588
  {
@@ -19617,7 +19648,8 @@ function DataTable({
19617
19648
  "div",
19618
19649
  {
19619
19650
  className: cn(
19620
- "flex items-center gap-2 select-none min-h-10",
19651
+ "flex items-center gap-2 select-none",
19652
+ headerMinHeightClass,
19621
19653
  isRightAlign && "justify-end",
19622
19654
  isCenterAlign && "justify-center",
19623
19655
  !isRightAlign && !isCenterAlign && "justify-start"
@@ -19690,10 +19722,11 @@ function DataTable({
19690
19722
  return result;
19691
19723
  }, [data, isServerMode, filters, sort, columns]);
19692
19724
  const totalItems = isServerMode ? total : processedData.length;
19693
- const displayedData = isServerMode ? data : React59.useMemo(() => {
19725
+ const displayedData = React59.useMemo(() => {
19726
+ if (isServerMode) return data;
19694
19727
  const start = (curPage - 1) * curPageSize;
19695
19728
  return processedData.slice(start, start + curPageSize);
19696
- }, [processedData, curPage, curPageSize]);
19729
+ }, [isServerMode, data, processedData, curPage, curPageSize]);
19697
19730
  return /* @__PURE__ */ jsxs62("div", { className: cn("space-y-2", className), children: [
19698
19731
  /* @__PURE__ */ jsx68(
19699
19732
  DataTableToolbar,
@@ -19706,6 +19739,7 @@ function DataTable({
19706
19739
  enableDensityToggle,
19707
19740
  enableColumnVisibilityToggle,
19708
19741
  enableHeaderAlignToggle,
19742
+ size,
19709
19743
  density,
19710
19744
  setDensity,
19711
19745
  setHeaderAlign,
@@ -19716,79 +19750,85 @@ function DataTable({
19716
19750
  /* @__PURE__ */ jsx68(
19717
19751
  "div",
19718
19752
  {
19719
- className: cn("relative rounded-2xl md:rounded-3xl border border-border/50", loading2 && "opacity-60 pointer-events-none"),
19720
- style: stickyHeader ? {
19721
- maxHeight: typeof maxHeight === "number" ? `${maxHeight}px` : maxHeight,
19722
- overflowY: "auto",
19723
- overflowX: "auto"
19724
- } : { overflowX: "auto" },
19725
- children: /* @__PURE__ */ jsxs62(
19726
- Table,
19753
+ className: cn(
19754
+ "relative rounded-2xl md:rounded-3xl border border-border/50 bg-card overflow-hidden",
19755
+ loading2 && "opacity-60 pointer-events-none"
19756
+ ),
19757
+ children: /* @__PURE__ */ jsx68(
19758
+ "div",
19727
19759
  {
19728
- containerClassName: cn("border-0 md:border-0 rounded-none md:rounded-none shadow-none bg-transparent", "overflow-visible"),
19729
- className: cn(
19730
- "table-fixed",
19731
- stickyHeader && ["[&_thead]:sticky", "[&_thead]:top-0", "[&_thead]:z-20", "[&_thead]:shadow-[0_1px_3px_rgba(0,0,0,0.1)]"]
19732
- ),
19733
- style: { minWidth: totalColumnsWidth > 0 ? `${totalColumnsWidth}px` : void 0 },
19734
- children: [
19735
- /* @__PURE__ */ jsx68(TableHeader, { children: renderHeader }),
19736
- /* @__PURE__ */ jsx68(TableBody, { children: loading2 ? /* @__PURE__ */ jsx68(TableRow, { children: /* @__PURE__ */ jsx68(TableCell, { colSpan: leafColumns.length, className: "text-center py-8", children: /* @__PURE__ */ jsxs62("div", { className: "flex items-center justify-center gap-2 text-muted-foreground", children: [
19737
- /* @__PURE__ */ jsxs62("svg", { className: "animate-spin h-4 w-4", xmlns: "http://www.w3.org/2000/svg", fill: "none", viewBox: "0 0 24 24", children: [
19738
- /* @__PURE__ */ jsx68("circle", { className: "opacity-25", cx: "12", cy: "12", r: "10", stroke: "currentColor", strokeWidth: "4" }),
19739
- /* @__PURE__ */ jsx68(
19740
- "path",
19741
- {
19742
- className: "opacity-75",
19743
- fill: "currentColor",
19744
- d: "M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"
19745
- }
19746
- )
19747
- ] }),
19748
- /* @__PURE__ */ jsxs62("span", { className: "text-sm", children: [
19749
- t("loading"),
19750
- "\u2026"
19751
- ] })
19752
- ] }) }) }) : !displayedData || displayedData.length === 0 ? /* @__PURE__ */ jsx68(TableRow, { children: /* @__PURE__ */ jsx68(TableCell, { colSpan: leafColumns.length, className: "text-center py-6 text-muted-foreground", children: t("noData") }) }) : displayedData.map((row, idx) => {
19753
- const isLastRow = idx === displayedData.length - 1;
19754
- return /* @__PURE__ */ jsx68(
19755
- TableRow,
19756
- {
19757
- className: cn(densityRowClass),
19758
- style: {
19759
- contentVisibility: "auto",
19760
- containIntrinsicSize: density === "compact" ? "0 36px" : density === "comfortable" ? "0 56px" : "0 48px"
19761
- },
19762
- children: leafColumns.map((col, colIdx) => {
19763
- const value = col.dataIndex ? row[col.dataIndex] : void 0;
19764
- const isStripedRow = striped && idx % 2 === 0;
19765
- const prevCol = colIdx > 0 ? leafColumns[colIdx - 1] : null;
19766
- const isAfterFixedLeft = prevCol?.fixed === "left";
19767
- const showBorderLeft = columnDividers && colIdx > 0 && !isAfterFixedLeft && !col.fixed;
19768
- return /* @__PURE__ */ jsx68(
19769
- TableCell,
19760
+ className: "thin-scrollbar w-full",
19761
+ style: stickyHeader ? {
19762
+ maxHeight: typeof maxHeight === "number" ? `${maxHeight}px` : maxHeight,
19763
+ overflowY: "auto",
19764
+ overflowX: "auto"
19765
+ } : { overflowX: "auto" },
19766
+ children: /* @__PURE__ */ jsxs62(
19767
+ Table,
19768
+ {
19769
+ disableContainer: true,
19770
+ className: cn(
19771
+ "table-fixed",
19772
+ stickyHeader && ["[&_thead]:sticky", "[&_thead]:top-0", "[&_thead]:z-20", "[&_thead]:shadow-[0_1px_3px_rgba(0,0,0,0.1)]"]
19773
+ ),
19774
+ style: { minWidth: totalColumnsWidth > 0 ? `${totalColumnsWidth}px` : void 0 },
19775
+ children: [
19776
+ /* @__PURE__ */ jsx68(TableHeader, { children: renderHeader }),
19777
+ /* @__PURE__ */ jsx68(TableBody, { children: loading2 ? /* @__PURE__ */ jsx68(TableRow, { children: /* @__PURE__ */ jsx68(TableCell, { colSpan: leafColumns.length, className: "text-center py-8", children: /* @__PURE__ */ jsxs62("div", { className: "flex items-center justify-center gap-2 text-muted-foreground", children: [
19778
+ /* @__PURE__ */ jsxs62("svg", { className: "animate-spin h-4 w-4", xmlns: "http://www.w3.org/2000/svg", fill: "none", viewBox: "0 0 24 24", children: [
19779
+ /* @__PURE__ */ jsx68("circle", { className: "opacity-25", cx: "12", cy: "12", r: "10", stroke: "currentColor", strokeWidth: "4" }),
19780
+ /* @__PURE__ */ jsx68(
19781
+ "path",
19770
19782
  {
19771
- style: getStickyColumnStyle(col),
19772
- className: cn(
19773
- cellPadding,
19774
- col.align === "right" && "text-right",
19775
- col.align === "center" && "text-center",
19776
- showBorderLeft && "border-l border-border/60",
19777
- isLastRow && col === leafColumns[0] && "rounded-bl-2xl md:rounded-bl-3xl",
19778
- isLastRow && col === leafColumns[leafColumns.length - 1] && "rounded-br-2xl md:rounded-br-3xl",
19779
- getStickyCellClass(col, isStripedRow),
19780
- !col.fixed && isStripedRow && "bg-muted/50"
19781
- ),
19782
- children: col.render ? col.render(value, row, idx) : String(value ?? "")
19783
+ className: "opacity-75",
19784
+ fill: "currentColor",
19785
+ d: "M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"
19786
+ }
19787
+ )
19788
+ ] }),
19789
+ /* @__PURE__ */ jsxs62("span", { className: "text-sm", children: [
19790
+ t("loading"),
19791
+ "\u2026"
19792
+ ] })
19793
+ ] }) }) }) : !displayedData || displayedData.length === 0 ? /* @__PURE__ */ jsx68(TableRow, { children: /* @__PURE__ */ jsx68(TableCell, { colSpan: leafColumns.length, className: "text-center py-6 text-muted-foreground", children: t("noData") }) }) : displayedData.map((row, idx) => {
19794
+ return /* @__PURE__ */ jsx68(
19795
+ TableRow,
19796
+ {
19797
+ className: cn(densityRowClass),
19798
+ style: {
19799
+ contentVisibility: "auto",
19800
+ containIntrinsicSize: density === "compact" ? "0 36px" : density === "comfortable" ? "0 56px" : "0 48px"
19783
19801
  },
19784
- col.key
19785
- );
19786
- })
19787
- },
19788
- getRowKey(row, idx)
19789
- );
19790
- }) })
19791
- ]
19802
+ children: leafColumns.map((col, colIdx) => {
19803
+ const value = col.dataIndex ? row[col.dataIndex] : void 0;
19804
+ const isStripedRow = striped && idx % 2 === 0;
19805
+ const prevCol = colIdx > 0 ? leafColumns[colIdx - 1] : null;
19806
+ const isAfterFixedLeft = prevCol?.fixed === "left";
19807
+ const showBorderLeft = columnDividers && colIdx > 0 && !isAfterFixedLeft && !col.fixed;
19808
+ return /* @__PURE__ */ jsx68(
19809
+ TableCell,
19810
+ {
19811
+ style: getStickyColumnStyle(col),
19812
+ className: cn(
19813
+ cellPadding,
19814
+ col.align === "right" && "text-right",
19815
+ col.align === "center" && "text-center",
19816
+ showBorderLeft && "border-l border-border/60",
19817
+ getStickyCellClass(col, isStripedRow),
19818
+ !col.fixed && isStripedRow && "bg-muted/50"
19819
+ ),
19820
+ children: col.render ? col.render(value, row, idx) : String(value ?? "")
19821
+ },
19822
+ col.key
19823
+ );
19824
+ })
19825
+ },
19826
+ getRowKey(row, idx)
19827
+ );
19828
+ }) })
19829
+ ]
19830
+ }
19831
+ )
19792
19832
  }
19793
19833
  )
19794
19834
  }
@@ -19801,7 +19841,8 @@ function DataTable({
19801
19841
  curPageSize,
19802
19842
  setCurPage,
19803
19843
  pageSizeOptions,
19804
- setCurPageSize
19844
+ setCurPageSize,
19845
+ size
19805
19846
  }
19806
19847
  )
19807
19848
  ] });