@smworks-cz/ui-kit 1.3.0 → 1.3.1

package/dist/index.d.mts

@@ -1310,6 +1310,89 @@ interface DataGridProps {
  */
 declare const DataGrid: React.FC<DataGridProps>;
 
+interface MobileDataCardColumn {
+    /** Klíč dat v řádkovém objektu. */
+    key: string;
+    /** Zobrazovaný popisek. */
+    header: string;
+    /** Vlastní renderování hodnoty — stejný podpis jako Table/DataGrid. */
+    render?: (value: any, row: any, index: number) => React.ReactNode;
+    /** Skrýt tento sloupec z karty. */
+    hidden?: boolean;
+    /** Zobrazit toto pole jako titulek karty. */
+    primary?: boolean;
+    /** Povolit řazení podle tohoto sloupce. */
+    sortable?: boolean;
+}
+interface MobileDataCardProps {
+    /** Definice sloupců — stejný tvar jako Table/DataGrid. */
+    columns: MobileDataCardColumn[];
+    /** Pole dat. */
+    data: any[];
+    /** Klíč v řádkovém objektu pro titulek karty. Alternativa k `primary` na sloupci. */
+    primaryKey?: string;
+    /** Klíč identifikátoru řádku. @default 'id' */
+    rowKey?: string;
+    /** Povolit výběr karet. @default false */
+    selectable?: boolean;
+    /** Řízené vybrané ID. */
+    selectedIds?: string[];
+    /** Callback při změně výběru. */
+    onSelectionChange?: (ids: string[]) => void;
+    /** Callback při kliknutí na kartu. */
+    onCardClick?: (row: any) => void;
+    /** Callback při řazení. */
+    onSort?: (key: string, direction: 'asc' | 'desc') => void;
+    /** Aktuální klíč řazení. */
+    sortKey?: string;
+    /** Aktuální směr řazení. */
+    sortDirection?: 'asc' | 'desc';
+    /** Zobrazit skeleton karty. @default false */
+    loading?: boolean;
+    /** Počet skeleton karet. @default 3 */
+    skeletonCount?: number;
+    /** Text prázdného stavu. @default 'Žádná data' */
+    emptyText?: string;
+    /** Vlastní obsah prázdného stavu. */
+    emptyContent?: React.ReactNode;
+    /** Mezera mezi kartami v px. @default 12 */
+    gap?: number;
+    /** Vykreslení akčních tlačítek v patičce karty. */
+    cardActions?: (row: any, index: number) => React.ReactNode;
+    /** Další inline styly. */
+    style?: React.CSSProperties;
+    /** Dodatečná CSS třída. */
+    className?: string;
+}
+/**
+ * Mobilní zobrazení dat ve formě karet.
+ *
+ * Každý datový řádek se zobrazí jako karta s páry popisek-hodnota.
+ * Kombinuje funkce Table (řazení, custom render) a DataGrid
+ * (výběr, kliknutí na řádek, skeleton).
+ *
+ * @example
+ * ```tsx
+ * <MobileDataCard
+ *   columns={[
+ *     { key: 'name', header: 'Jméno', primary: true },
+ *     { key: 'email', header: 'Email' },
+ *     { key: 'role', header: 'Role' },
+ *   ]}
+ *   data={users}
+ *   selectable
+ *   onCardClick={(row) => openDetail(row)}
+ *   cardActions={(row) => (
+ *     <>
+ *       <Button size="sm" variant="outline" onClick={() => edit(row)}>Upravit</Button>
+ *       <Button size="sm" variant="destructive" onClick={() => del(row)}>Smazat</Button>
+ *     </>
+ *   )}
+ * />
+ * ```
+ */
+declare const MobileDataCard: React.FC<MobileDataCardProps>;
+
 interface CardProps {
     /** Titulek karty. */
     title?: string;
@@ -3343,4 +3426,4 @@ type Theme = 'light' | 'dark';
  */
 declare const useTheme: () => Theme;
 
-export { Accordion, AccordionItem, type AccordionItemProps, type AccordionProps, Alert, type AlertProps, type AlertVariant, AppSidebar, type AppSidebarProps, Avatar, type AvatarProps, type AvatarSize, Badge, type BadgeProps, Breadcrumb, type BreadcrumbItem, type BreadcrumbProps, Button, type ButtonAsAnchorProps, type ButtonAsButtonProps, type ButtonIconPosition, type ButtonProps, type ButtonSize, type ButtonVariant, Calendar, type CalendarEvent, type CalendarProps, Card, type CardProps, Checkbox, CheckboxGroup, type CheckboxGroupProps, type CheckboxProps, type CheckboxSize, ColorPicker, type ColorPickerProps, Combobox, type ComboboxOption, type ComboboxProps, type ComboboxSize, type CommandGroup, type CommandItem, CommandMenu, type CommandMenuProps, ConfirmDialog, type ConfirmDialogProps, Container, type ContainerMaxWidth, type ContainerProps, CopyButton, type CopyButtonProps, DataGrid, type DataGridColumn, type DataGridProps, DataList, type DataListItem, type DataListProps, DatePicker, DatePickerGroup, type DatePickerGroupProps, type DatePickerProps, type DatePickerSize, Divider, type DividerOrientation, type DividerProps, type DragHandleProps, DragList, type DragListItem, type DragListProps, Drawer, type DrawerProps, DropdownMenu, type DropdownMenuItem, type DropdownMenuProps, EmptyState, type EmptyStateProps, FileUpload, type FileUploadProps, Input, InputGroup, type InputGroupProps, type InputProps, type InputSize, Link, type LinkProps, type LinkVariant, Modal, type ModalProps, Navbar, type NavbarProps, Notification, type NotificationProps, type NotificationVariant, NumberInput, type NumberInputProps, type NumberInputSize, type NumberInputVariant, OTPInput, type OTPInputProps, Pagination, type PaginationProps, Popover, type PopoverProps, ProgressBar, type ProgressBarProps, type ProgressBarSize, ProgressCircle, type ProgressCircleProps, Radio, RadioGroup, type RadioGroupOption, type RadioGroupProps, type RadioProps, type RadioSize, Rating, type RatingProps, type RatingSize, SegmentedControl, type SegmentedControlItem, type SegmentedControlProps, type SegmentedControlSize, Select, SelectGroup, type SelectGroupProps, type SelectOption, type SelectProps, Sheet, type SheetProps, SidebarItem, type SidebarItemProps, Skeleton, type SkeletonProps, Slider, type SliderProps, type SliderSize, Spinner, type SpinnerProps, type SpinnerSize, Spotlight, type SpotlightItem, type SpotlightProps, Stack, type StackAlign, type StackDirection, type StackJustify, type StackProps, Stat, type StatProps, StatusBadge, type StatusBadgeProps, type StatusBadgeStatus, type StepItem, Stepper, type StepperProps, Switch, type SwitchProps, type SwitchSize, Tab, TabPanel, type TabPanelProps, type TabProps, Table, type TableColumn, type TableProps, Tabs, type TabsProps, Tag, TagItem, type TagItemProps, type TagProps, Textarea, type TextareaProps, type TextareaResize, type TextareaSize, type Theme, Timeline, type TimelineItem, type TimelineProps, Toast, type ToastContextValue, type ToastOptions, type ToastPosition, type ToastProps, type ToastVariant, ToasterProvider, type ToasterProviderProps, Tooltip, type TooltipProps, Tree, type TreeNode, type TreeProps, type UploadedFile, useTheme, useToast };
+export { Accordion, AccordionItem, type AccordionItemProps, type AccordionProps, Alert, type AlertProps, type AlertVariant, AppSidebar, type AppSidebarProps, Avatar, type AvatarProps, type AvatarSize, Badge, type BadgeProps, Breadcrumb, type BreadcrumbItem, type BreadcrumbProps, Button, type ButtonAsAnchorProps, type ButtonAsButtonProps, type ButtonIconPosition, type ButtonProps, type ButtonSize, type ButtonVariant, Calendar, type CalendarEvent, type CalendarProps, Card, type CardProps, Checkbox, CheckboxGroup, type CheckboxGroupProps, type CheckboxProps, type CheckboxSize, ColorPicker, type ColorPickerProps, Combobox, type ComboboxOption, type ComboboxProps, type ComboboxSize, type CommandGroup, type CommandItem, CommandMenu, type CommandMenuProps, ConfirmDialog, type ConfirmDialogProps, Container, type ContainerMaxWidth, type ContainerProps, CopyButton, type CopyButtonProps, DataGrid, type DataGridColumn, type DataGridProps, DataList, type DataListItem, type DataListProps, DatePicker, DatePickerGroup, type DatePickerGroupProps, type DatePickerProps, type DatePickerSize, Divider, type DividerOrientation, type DividerProps, type DragHandleProps, DragList, type DragListItem, type DragListProps, Drawer, type DrawerProps, DropdownMenu, type DropdownMenuItem, type DropdownMenuProps, EmptyState, type EmptyStateProps, FileUpload, type FileUploadProps, Input, InputGroup, type InputGroupProps, type InputProps, type InputSize, Link, type LinkProps, type LinkVariant, MobileDataCard, type MobileDataCardColumn, type MobileDataCardProps, Modal, type ModalProps, Navbar, type NavbarProps, Notification, type NotificationProps, type NotificationVariant, NumberInput, type NumberInputProps, type NumberInputSize, type NumberInputVariant, OTPInput, type OTPInputProps, Pagination, type PaginationProps, Popover, type PopoverProps, ProgressBar, type ProgressBarProps, type ProgressBarSize, ProgressCircle, type ProgressCircleProps, Radio, RadioGroup, type RadioGroupOption, type RadioGroupProps, type RadioProps, type RadioSize, Rating, type RatingProps, type RatingSize, SegmentedControl, type SegmentedControlItem, type SegmentedControlProps, type SegmentedControlSize, Select, SelectGroup, type SelectGroupProps, type SelectOption, type SelectProps, Sheet, type SheetProps, SidebarItem, type SidebarItemProps, Skeleton, type SkeletonProps, Slider, type SliderProps, type SliderSize, Spinner, type SpinnerProps, type SpinnerSize, Spotlight, type SpotlightItem, type SpotlightProps, Stack, type StackAlign, type StackDirection, type StackJustify, type StackProps, Stat, type StatProps, StatusBadge, type StatusBadgeProps, type StatusBadgeStatus, type StepItem, Stepper, type StepperProps, Switch, type SwitchProps, type SwitchSize, Tab, TabPanel, type TabPanelProps, type TabProps, Table, type TableColumn, type TableProps, Tabs, type TabsProps, Tag, TagItem, type TagItemProps, type TagProps, Textarea, type TextareaProps, type TextareaResize, type TextareaSize, type Theme, Timeline, type TimelineItem, type TimelineProps, Toast, type ToastContextValue, type ToastOptions, type ToastPosition, type ToastProps, type ToastVariant, ToasterProvider, type ToasterProviderProps, Tooltip, type TooltipProps, Tree, type TreeNode, type TreeProps, type UploadedFile, useTheme, useToast };

package/dist/index.d.ts

@@ -1310,6 +1310,89 @@ interface DataGridProps {
  */
 declare const DataGrid: React.FC<DataGridProps>;
 
+interface MobileDataCardColumn {
+    /** Klíč dat v řádkovém objektu. */
+    key: string;
+    /** Zobrazovaný popisek. */
+    header: string;
+    /** Vlastní renderování hodnoty — stejný podpis jako Table/DataGrid. */
+    render?: (value: any, row: any, index: number) => React.ReactNode;
+    /** Skrýt tento sloupec z karty. */
+    hidden?: boolean;
+    /** Zobrazit toto pole jako titulek karty. */
+    primary?: boolean;
+    /** Povolit řazení podle tohoto sloupce. */
+    sortable?: boolean;
+}
+interface MobileDataCardProps {
+    /** Definice sloupců — stejný tvar jako Table/DataGrid. */
+    columns: MobileDataCardColumn[];
+    /** Pole dat. */
+    data: any[];
+    /** Klíč v řádkovém objektu pro titulek karty. Alternativa k `primary` na sloupci. */
+    primaryKey?: string;
+    /** Klíč identifikátoru řádku. @default 'id' */
+    rowKey?: string;
+    /** Povolit výběr karet. @default false */
+    selectable?: boolean;
+    /** Řízené vybrané ID. */
+    selectedIds?: string[];
+    /** Callback při změně výběru. */
+    onSelectionChange?: (ids: string[]) => void;
+    /** Callback při kliknutí na kartu. */
+    onCardClick?: (row: any) => void;
+    /** Callback při řazení. */
+    onSort?: (key: string, direction: 'asc' | 'desc') => void;
+    /** Aktuální klíč řazení. */
+    sortKey?: string;
+    /** Aktuální směr řazení. */
+    sortDirection?: 'asc' | 'desc';
+    /** Zobrazit skeleton karty. @default false */
+    loading?: boolean;
+    /** Počet skeleton karet. @default 3 */
+    skeletonCount?: number;
+    /** Text prázdného stavu. @default 'Žádná data' */
+    emptyText?: string;
+    /** Vlastní obsah prázdného stavu. */
+    emptyContent?: React.ReactNode;
+    /** Mezera mezi kartami v px. @default 12 */
+    gap?: number;
+    /** Vykreslení akčních tlačítek v patičce karty. */
+    cardActions?: (row: any, index: number) => React.ReactNode;
+    /** Další inline styly. */
+    style?: React.CSSProperties;
+    /** Dodatečná CSS třída. */
+    className?: string;
+}
+/**
+ * Mobilní zobrazení dat ve formě karet.
+ *
+ * Každý datový řádek se zobrazí jako karta s páry popisek-hodnota.
+ * Kombinuje funkce Table (řazení, custom render) a DataGrid
+ * (výběr, kliknutí na řádek, skeleton).
+ *
+ * @example
+ * ```tsx
+ * <MobileDataCard
+ *   columns={[
+ *     { key: 'name', header: 'Jméno', primary: true },
+ *     { key: 'email', header: 'Email' },
+ *     { key: 'role', header: 'Role' },
+ *   ]}
+ *   data={users}
+ *   selectable
+ *   onCardClick={(row) => openDetail(row)}
+ *   cardActions={(row) => (
+ *     <>
+ *       <Button size="sm" variant="outline" onClick={() => edit(row)}>Upravit</Button>
+ *       <Button size="sm" variant="destructive" onClick={() => del(row)}>Smazat</Button>
+ *     </>
+ *   )}
+ * />
+ * ```
+ */
+declare const MobileDataCard: React.FC<MobileDataCardProps>;
+
 interface CardProps {
     /** Titulek karty. */
     title?: string;
@@ -3343,4 +3426,4 @@ type Theme = 'light' | 'dark';
  */
 declare const useTheme: () => Theme;
 
-export { Accordion, AccordionItem, type AccordionItemProps, type AccordionProps, Alert, type AlertProps, type AlertVariant, AppSidebar, type AppSidebarProps, Avatar, type AvatarProps, type AvatarSize, Badge, type BadgeProps, Breadcrumb, type BreadcrumbItem, type BreadcrumbProps, Button, type ButtonAsAnchorProps, type ButtonAsButtonProps, type ButtonIconPosition, type ButtonProps, type ButtonSize, type ButtonVariant, Calendar, type CalendarEvent, type CalendarProps, Card, type CardProps, Checkbox, CheckboxGroup, type CheckboxGroupProps, type CheckboxProps, type CheckboxSize, ColorPicker, type ColorPickerProps, Combobox, type ComboboxOption, type ComboboxProps, type ComboboxSize, type CommandGroup, type CommandItem, CommandMenu, type CommandMenuProps, ConfirmDialog, type ConfirmDialogProps, Container, type ContainerMaxWidth, type ContainerProps, CopyButton, type CopyButtonProps, DataGrid, type DataGridColumn, type DataGridProps, DataList, type DataListItem, type DataListProps, DatePicker, DatePickerGroup, type DatePickerGroupProps, type DatePickerProps, type DatePickerSize, Divider, type DividerOrientation, type DividerProps, type DragHandleProps, DragList, type DragListItem, type DragListProps, Drawer, type DrawerProps, DropdownMenu, type DropdownMenuItem, type DropdownMenuProps, EmptyState, type EmptyStateProps, FileUpload, type FileUploadProps, Input, InputGroup, type InputGroupProps, type InputProps, type InputSize, Link, type LinkProps, type LinkVariant, Modal, type ModalProps, Navbar, type NavbarProps, Notification, type NotificationProps, type NotificationVariant, NumberInput, type NumberInputProps, type NumberInputSize, type NumberInputVariant, OTPInput, type OTPInputProps, Pagination, type PaginationProps, Popover, type PopoverProps, ProgressBar, type ProgressBarProps, type ProgressBarSize, ProgressCircle, type ProgressCircleProps, Radio, RadioGroup, type RadioGroupOption, type RadioGroupProps, type RadioProps, type RadioSize, Rating, type RatingProps, type RatingSize, SegmentedControl, type SegmentedControlItem, type SegmentedControlProps, type SegmentedControlSize, Select, SelectGroup, type SelectGroupProps, type SelectOption, type SelectProps, Sheet, type SheetProps, SidebarItem, type SidebarItemProps, Skeleton, type SkeletonProps, Slider, type SliderProps, type SliderSize, Spinner, type SpinnerProps, type SpinnerSize, Spotlight, type SpotlightItem, type SpotlightProps, Stack, type StackAlign, type StackDirection, type StackJustify, type StackProps, Stat, type StatProps, StatusBadge, type StatusBadgeProps, type StatusBadgeStatus, type StepItem, Stepper, type StepperProps, Switch, type SwitchProps, type SwitchSize, Tab, TabPanel, type TabPanelProps, type TabProps, Table, type TableColumn, type TableProps, Tabs, type TabsProps, Tag, TagItem, type TagItemProps, type TagProps, Textarea, type TextareaProps, type TextareaResize, type TextareaSize, type Theme, Timeline, type TimelineItem, type TimelineProps, Toast, type ToastContextValue, type ToastOptions, type ToastPosition, type ToastProps, type ToastVariant, ToasterProvider, type ToasterProviderProps, Tooltip, type TooltipProps, Tree, type TreeNode, type TreeProps, type UploadedFile, useTheme, useToast };
+export { Accordion, AccordionItem, type AccordionItemProps, type AccordionProps, Alert, type AlertProps, type AlertVariant, AppSidebar, type AppSidebarProps, Avatar, type AvatarProps, type AvatarSize, Badge, type BadgeProps, Breadcrumb, type BreadcrumbItem, type BreadcrumbProps, Button, type ButtonAsAnchorProps, type ButtonAsButtonProps, type ButtonIconPosition, type ButtonProps, type ButtonSize, type ButtonVariant, Calendar, type CalendarEvent, type CalendarProps, Card, type CardProps, Checkbox, CheckboxGroup, type CheckboxGroupProps, type CheckboxProps, type CheckboxSize, ColorPicker, type ColorPickerProps, Combobox, type ComboboxOption, type ComboboxProps, type ComboboxSize, type CommandGroup, type CommandItem, CommandMenu, type CommandMenuProps, ConfirmDialog, type ConfirmDialogProps, Container, type ContainerMaxWidth, type ContainerProps, CopyButton, type CopyButtonProps, DataGrid, type DataGridColumn, type DataGridProps, DataList, type DataListItem, type DataListProps, DatePicker, DatePickerGroup, type DatePickerGroupProps, type DatePickerProps, type DatePickerSize, Divider, type DividerOrientation, type DividerProps, type DragHandleProps, DragList, type DragListItem, type DragListProps, Drawer, type DrawerProps, DropdownMenu, type DropdownMenuItem, type DropdownMenuProps, EmptyState, type EmptyStateProps, FileUpload, type FileUploadProps, Input, InputGroup, type InputGroupProps, type InputProps, type InputSize, Link, type LinkProps, type LinkVariant, MobileDataCard, type MobileDataCardColumn, type MobileDataCardProps, Modal, type ModalProps, Navbar, type NavbarProps, Notification, type NotificationProps, type NotificationVariant, NumberInput, type NumberInputProps, type NumberInputSize, type NumberInputVariant, OTPInput, type OTPInputProps, Pagination, type PaginationProps, Popover, type PopoverProps, ProgressBar, type ProgressBarProps, type ProgressBarSize, ProgressCircle, type ProgressCircleProps, Radio, RadioGroup, type RadioGroupOption, type RadioGroupProps, type RadioProps, type RadioSize, Rating, type RatingProps, type RatingSize, SegmentedControl, type SegmentedControlItem, type SegmentedControlProps, type SegmentedControlSize, Select, SelectGroup, type SelectGroupProps, type SelectOption, type SelectProps, Sheet, type SheetProps, SidebarItem, type SidebarItemProps, Skeleton, type SkeletonProps, Slider, type SliderProps, type SliderSize, Spinner, type SpinnerProps, type SpinnerSize, Spotlight, type SpotlightItem, type SpotlightProps, Stack, type StackAlign, type StackDirection, type StackJustify, type StackProps, Stat, type StatProps, StatusBadge, type StatusBadgeProps, type StatusBadgeStatus, type StepItem, Stepper, type StepperProps, Switch, type SwitchProps, type SwitchSize, Tab, TabPanel, type TabPanelProps, type TabProps, Table, type TableColumn, type TableProps, Tabs, type TabsProps, Tag, TagItem, type TagItemProps, type TagProps, Textarea, type TextareaProps, type TextareaResize, type TextareaSize, type Theme, Timeline, type TimelineItem, type TimelineProps, Toast, type ToastContextValue, type ToastOptions, type ToastPosition, type ToastProps, type ToastVariant, ToasterProvider, type ToasterProviderProps, Tooltip, type TooltipProps, Tree, type TreeNode, type TreeProps, type UploadedFile, useTheme, useToast };