@papernote/ui 1.3.0 → 1.5.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/components/BottomNavigation.d.ts +98 -0
- package/dist/components/BottomNavigation.d.ts.map +1 -0
- package/dist/components/Checkbox.d.ts +2 -0
- package/dist/components/Checkbox.d.ts.map +1 -1
- package/dist/components/CheckboxList.d.ts +81 -0
- package/dist/components/CheckboxList.d.ts.map +1 -0
- package/dist/components/Chip.d.ts +92 -1
- package/dist/components/Chip.d.ts.map +1 -1
- package/dist/components/ConfirmDialog.d.ts +43 -1
- package/dist/components/ConfirmDialog.d.ts.map +1 -1
- package/dist/components/DataTable.d.ts +10 -1
- package/dist/components/DataTable.d.ts.map +1 -1
- package/dist/components/DataTableCardView.d.ts +99 -0
- package/dist/components/DataTableCardView.d.ts.map +1 -0
- package/dist/components/ExpandablePanel.d.ts +142 -0
- package/dist/components/ExpandablePanel.d.ts.map +1 -0
- package/dist/components/FloatingActionButton.d.ts +98 -0
- package/dist/components/FloatingActionButton.d.ts.map +1 -0
- package/dist/components/Input.d.ts +45 -1
- package/dist/components/Input.d.ts.map +1 -1
- package/dist/components/MobileHeader.d.ts +98 -0
- package/dist/components/MobileHeader.d.ts.map +1 -0
- package/dist/components/MobileLayout.d.ts +121 -0
- package/dist/components/MobileLayout.d.ts.map +1 -0
- package/dist/components/Modal.d.ts +50 -1
- package/dist/components/Modal.d.ts.map +1 -1
- package/dist/components/PullToRefresh.d.ts +87 -0
- package/dist/components/PullToRefresh.d.ts.map +1 -0
- package/dist/components/QueryTransparency.d.ts +1 -1
- package/dist/components/QueryTransparency.d.ts.map +1 -1
- package/dist/components/SearchableList.d.ts +83 -0
- package/dist/components/SearchableList.d.ts.map +1 -0
- package/dist/components/Select.d.ts +16 -2
- package/dist/components/Select.d.ts.map +1 -1
- package/dist/components/Sidebar.d.ts +40 -1
- package/dist/components/Sidebar.d.ts.map +1 -1
- package/dist/components/Spreadsheet.d.ts +5 -1
- package/dist/components/Spreadsheet.d.ts.map +1 -1
- package/dist/components/SwipeActions.d.ts +93 -0
- package/dist/components/SwipeActions.d.ts.map +1 -0
- package/dist/components/Switch.d.ts +1 -0
- package/dist/components/Switch.d.ts.map +1 -1
- package/dist/components/Textarea.d.ts +13 -0
- package/dist/components/Textarea.d.ts.map +1 -1
- package/dist/components/index.d.ts +27 -3
- package/dist/components/index.d.ts.map +1 -1
- package/dist/context/MobileContext.d.ts +168 -0
- package/dist/context/MobileContext.d.ts.map +1 -0
- package/dist/hooks/useResponsive.d.ts +158 -0
- package/dist/hooks/useResponsive.d.ts.map +1 -0
- package/dist/index.d.ts +1666 -65
- package/dist/index.esm.js +2875 -8619
- package/dist/index.esm.js.map +1 -1
- package/dist/index.js +2908 -8617
- package/dist/index.js.map +1 -1
- package/dist/styles.css +404 -1
- package/dist/types/index.d.ts +2 -0
- package/dist/types/index.d.ts.map +1 -1
- package/package.json +4 -4
- package/src/components/BottomNavigation.stories.tsx +142 -0
- package/src/components/BottomNavigation.tsx +225 -0
- package/src/components/Checkbox.stories.tsx +162 -0
- package/src/components/Checkbox.tsx +22 -6
- package/src/components/CheckboxList.stories.tsx +311 -0
- package/src/components/CheckboxList.tsx +433 -0
- package/src/components/Chip.stories.tsx +389 -0
- package/src/components/Chip.tsx +182 -3
- package/src/components/ConfirmDialog.tsx +56 -4
- package/src/components/DataTable.tsx +60 -1
- package/src/components/DataTableCardView.stories.tsx +307 -0
- package/src/components/DataTableCardView.tsx +419 -0
- package/src/components/ExpandablePanel.stories.tsx +620 -0
- package/src/components/ExpandablePanel.tsx +383 -0
- package/src/components/FloatingActionButton.stories.tsx +197 -0
- package/src/components/FloatingActionButton.tsx +301 -0
- package/src/components/Grid.stories.tsx +16 -16
- package/src/components/Input.stories.tsx +214 -0
- package/src/components/Input.tsx +81 -4
- package/src/components/MobileHeader.stories.tsx +205 -0
- package/src/components/MobileHeader.tsx +233 -0
- package/src/components/MobileLayout.stories.tsx +338 -0
- package/src/components/MobileLayout.tsx +313 -0
- package/src/components/Modal.stories.tsx +183 -0
- package/src/components/Modal.tsx +84 -3
- package/src/components/PullToRefresh.stories.tsx +321 -0
- package/src/components/PullToRefresh.tsx +294 -0
- package/src/components/QueryTransparency.tsx +1 -1
- package/src/components/SearchableList.stories.tsx +437 -0
- package/src/components/SearchableList.tsx +326 -0
- package/src/components/Select.stories.tsx +190 -0
- package/src/components/Select.tsx +353 -137
- package/src/components/Sidebar.tsx +191 -8
- package/src/components/Spreadsheet.tsx +8 -57
- package/src/components/SwipeActions.stories.tsx +327 -0
- package/src/components/SwipeActions.tsx +387 -0
- package/src/components/Switch.stories.tsx +158 -0
- package/src/components/Switch.tsx +12 -3
- package/src/components/Textarea.tsx +31 -1
- package/src/components/index.ts +63 -3
- package/src/context/MobileContext.tsx +296 -0
- package/src/hooks/useResponsive.ts +360 -0
- package/src/types/index.ts +4 -0
- package/tailwind.config.js +56 -1
|
@@ -0,0 +1,98 @@
|
|
|
1
|
+
import React from 'react';
|
|
2
|
+
/**
|
|
3
|
+
* Bottom navigation item configuration
|
|
4
|
+
*/
|
|
5
|
+
export interface BottomNavItem {
|
|
6
|
+
/** Unique identifier for the nav item */
|
|
7
|
+
id: string;
|
|
8
|
+
/** Display label */
|
|
9
|
+
label: string;
|
|
10
|
+
/** Icon element (use lucide-react icons) */
|
|
11
|
+
icon: React.ReactNode;
|
|
12
|
+
/** Navigation URL (optional) */
|
|
13
|
+
href?: string;
|
|
14
|
+
/** Badge count for notifications */
|
|
15
|
+
badge?: number;
|
|
16
|
+
/** Click handler (alternative to href) */
|
|
17
|
+
onClick?: () => void;
|
|
18
|
+
/** Disabled state */
|
|
19
|
+
disabled?: boolean;
|
|
20
|
+
}
|
|
21
|
+
/**
|
|
22
|
+
* BottomNavigation component props
|
|
23
|
+
*/
|
|
24
|
+
export interface BottomNavigationProps {
|
|
25
|
+
/** Navigation items (max 5 recommended) */
|
|
26
|
+
items: BottomNavItem[];
|
|
27
|
+
/** Currently active item ID */
|
|
28
|
+
activeId?: string;
|
|
29
|
+
/** Navigation handler - receives item ID and href */
|
|
30
|
+
onNavigate?: (id: string, href?: string) => void;
|
|
31
|
+
/** Show labels below icons */
|
|
32
|
+
showLabels?: boolean;
|
|
33
|
+
/** Additional CSS classes */
|
|
34
|
+
className?: string;
|
|
35
|
+
/** Safe area handling for notched devices */
|
|
36
|
+
safeArea?: boolean;
|
|
37
|
+
}
|
|
38
|
+
/**
|
|
39
|
+
* BottomNavigation - Mobile-style bottom tab bar
|
|
40
|
+
*
|
|
41
|
+
* iOS/Android-style fixed bottom navigation with icons, labels, and badges.
|
|
42
|
+
* Handles safe area insets for notched devices automatically.
|
|
43
|
+
*
|
|
44
|
+
* Best practices:
|
|
45
|
+
* - Use 3-5 items maximum
|
|
46
|
+
* - Keep labels short (1-2 words)
|
|
47
|
+
* - Use consistent icon style
|
|
48
|
+
*
|
|
49
|
+
* @example Basic usage
|
|
50
|
+
* ```tsx
|
|
51
|
+
* import { BottomNavigation } from 'notebook-ui';
|
|
52
|
+
* import { Home, Search, Bell, User } from 'lucide-react';
|
|
53
|
+
*
|
|
54
|
+
* const navItems = [
|
|
55
|
+
* { id: 'home', label: 'Home', icon: <Home />, href: '/' },
|
|
56
|
+
* { id: 'search', label: 'Search', icon: <Search />, href: '/search' },
|
|
57
|
+
* { id: 'notifications', label: 'Alerts', icon: <Bell />, badge: 3 },
|
|
58
|
+
* { id: 'profile', label: 'Profile', icon: <User />, href: '/profile' },
|
|
59
|
+
* ];
|
|
60
|
+
*
|
|
61
|
+
* <BottomNavigation
|
|
62
|
+
* items={navItems}
|
|
63
|
+
* activeId="home"
|
|
64
|
+
* onNavigate={(id, href) => navigate(href)}
|
|
65
|
+
* />
|
|
66
|
+
* ```
|
|
67
|
+
*
|
|
68
|
+
* @example With onClick handlers
|
|
69
|
+
* ```tsx
|
|
70
|
+
* const navItems = [
|
|
71
|
+
* { id: 'home', label: 'Home', icon: <Home />, onClick: () => setTab('home') },
|
|
72
|
+
* { id: 'add', label: 'Add', icon: <Plus />, onClick: openAddModal },
|
|
73
|
+
* ];
|
|
74
|
+
*
|
|
75
|
+
* <BottomNavigation items={navItems} activeId={currentTab} />
|
|
76
|
+
* ```
|
|
77
|
+
*/
|
|
78
|
+
export default function BottomNavigation({ items, activeId, onNavigate, showLabels, className, safeArea, }: BottomNavigationProps): import("react/jsx-runtime").JSX.Element;
|
|
79
|
+
/**
|
|
80
|
+
* BottomNavigationSpacer - Spacer to prevent content from being hidden behind BottomNavigation
|
|
81
|
+
*
|
|
82
|
+
* Place this at the bottom of your scrollable content when using BottomNavigation.
|
|
83
|
+
*
|
|
84
|
+
* @example
|
|
85
|
+
* ```tsx
|
|
86
|
+
* <div className="flex flex-col h-screen">
|
|
87
|
+
* <main className="flex-1 overflow-auto">
|
|
88
|
+
* {/* Your content *\/}
|
|
89
|
+
* <BottomNavigationSpacer />
|
|
90
|
+
* </main>
|
|
91
|
+
* <BottomNavigation items={navItems} />
|
|
92
|
+
* </div>
|
|
93
|
+
* ```
|
|
94
|
+
*/
|
|
95
|
+
export declare function BottomNavigationSpacer({ safeArea }: {
|
|
96
|
+
safeArea?: boolean;
|
|
97
|
+
}): import("react/jsx-runtime").JSX.Element;
|
|
98
|
+
//# sourceMappingURL=BottomNavigation.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"BottomNavigation.d.ts","sourceRoot":"","sources":["../../src/components/BottomNavigation.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B;;GAEG;AACH,MAAM,WAAW,aAAa;IAC5B,yCAAyC;IACzC,EAAE,EAAE,MAAM,CAAC;IACX,oBAAoB;IACpB,KAAK,EAAE,MAAM,CAAC;IACd,4CAA4C;IAC5C,IAAI,EAAE,KAAK,CAAC,SAAS,CAAC;IACtB,gCAAgC;IAChC,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,oCAAoC;IACpC,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,0CAA0C;IAC1C,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,qBAAqB;IACrB,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AAED;;GAEG;AACH,MAAM,WAAW,qBAAqB;IACpC,2CAA2C;IAC3C,KAAK,EAAE,aAAa,EAAE,CAAC;IACvB,+BAA+B;IAC/B,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,qDAAqD;IACrD,UAAU,CAAC,EAAE,CAAC,EAAE,EAAE,MAAM,EAAE,IAAI,CAAC,EAAE,MAAM,KAAK,IAAI,CAAC;IACjD,8BAA8B;IAC9B,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,6BAA6B;IAC7B,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,6CAA6C;IAC7C,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AAED;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAuCG;AACH,MAAM,CAAC,OAAO,UAAU,gBAAgB,CAAC,EACvC,KAAK,EACL,QAAQ,EACR,UAAU,EACV,UAAiB,EACjB,SAAc,EACd,QAAe,GAChB,EAAE,qBAAqB,2CAgHvB;AAED;;;;;;;;;;;;;;;GAeG;AACH,wBAAgB,sBAAsB,CAAC,EAAE,QAAe,EAAE,EAAE;IAAE,QAAQ,CAAC,EAAE,OAAO,CAAA;CAAE,2CAOjF"}
|
|
@@ -10,6 +10,8 @@ export interface CheckboxProps {
|
|
|
10
10
|
name?: string;
|
|
11
11
|
/** Optional icon to display next to label */
|
|
12
12
|
icon?: React.ReactNode;
|
|
13
|
+
/** Size variant - 'lg' provides 44px touch-friendly targets. On mobile, 'md' auto-upgrades to 'lg'. */
|
|
14
|
+
size?: 'sm' | 'md' | 'lg';
|
|
13
15
|
}
|
|
14
16
|
declare const Checkbox: import("react").ForwardRefExoticComponent<CheckboxProps & import("react").RefAttributes<HTMLInputElement>>;
|
|
15
17
|
export default Checkbox;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Checkbox.d.ts","sourceRoot":"","sources":["../../src/components/Checkbox.tsx"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"Checkbox.d.ts","sourceRoot":"","sources":["../../src/components/Checkbox.tsx"],"names":[],"mappings":"AAIA,MAAM,WAAW,aAAa;IAC5B,OAAO,EAAE,OAAO,CAAC;IACjB,QAAQ,EAAE,CAAC,OAAO,EAAE,OAAO,KAAK,IAAI,CAAC;IACrC,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,6CAA6C;IAC7C,IAAI,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACvB,uGAAuG;IACvG,IAAI,CAAC,EAAE,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;CAC3B;AASD,QAAA,MAAM,QAAQ,4GA8FZ,CAAC;AAGH,eAAe,QAAQ,CAAC"}
|
|
@@ -0,0 +1,81 @@
|
|
|
1
|
+
export interface CheckboxListItem<T = unknown> {
|
|
2
|
+
key: string;
|
|
3
|
+
label: string;
|
|
4
|
+
description?: string;
|
|
5
|
+
group?: string;
|
|
6
|
+
disabled?: boolean;
|
|
7
|
+
data?: T;
|
|
8
|
+
}
|
|
9
|
+
export interface CheckboxListProps<T = unknown> {
|
|
10
|
+
/** Array of items to display */
|
|
11
|
+
items: CheckboxListItem<T>[];
|
|
12
|
+
/** Currently selected item keys */
|
|
13
|
+
selectedKeys: string[];
|
|
14
|
+
/** Callback when selection changes */
|
|
15
|
+
onSelectionChange: (selectedKeys: string[]) => void;
|
|
16
|
+
/** Labels for groups (key -> display label) */
|
|
17
|
+
groupLabels?: Record<string, string>;
|
|
18
|
+
/** Keys of groups that should be expanded (controlled) */
|
|
19
|
+
expandedGroups?: string[];
|
|
20
|
+
/** Default expanded groups (uncontrolled) */
|
|
21
|
+
defaultExpandedGroups?: string[];
|
|
22
|
+
/** Callback when group expansion changes */
|
|
23
|
+
onGroupToggle?: (groupKey: string, expanded: boolean) => void;
|
|
24
|
+
/** Enable search functionality */
|
|
25
|
+
searchable?: boolean;
|
|
26
|
+
/** Search input placeholder */
|
|
27
|
+
searchPlaceholder?: string;
|
|
28
|
+
/** Custom filter function */
|
|
29
|
+
filterFn?: (item: CheckboxListItem<T>, searchTerm: string) => boolean;
|
|
30
|
+
/** Debounce delay for search in ms */
|
|
31
|
+
debounceMs?: number;
|
|
32
|
+
/** Maximum height with overflow scroll */
|
|
33
|
+
maxHeight?: string | number;
|
|
34
|
+
/** Show select all checkbox */
|
|
35
|
+
showSelectAll?: boolean;
|
|
36
|
+
/** Select all label text */
|
|
37
|
+
selectAllLabel?: string;
|
|
38
|
+
/** Show count of selected items */
|
|
39
|
+
showSelectedCount?: boolean;
|
|
40
|
+
/** Message when no items available */
|
|
41
|
+
emptyMessage?: string;
|
|
42
|
+
/** Message when search has no results */
|
|
43
|
+
noResultsMessage?: string;
|
|
44
|
+
/** Size variant */
|
|
45
|
+
size?: 'sm' | 'md' | 'lg';
|
|
46
|
+
/** Visual variant */
|
|
47
|
+
variant?: 'default' | 'bordered' | 'card';
|
|
48
|
+
/** Additional CSS classes */
|
|
49
|
+
className?: string;
|
|
50
|
+
}
|
|
51
|
+
/**
|
|
52
|
+
* CheckboxList - Multi-select list with checkboxes, grouping, and search
|
|
53
|
+
*
|
|
54
|
+
* @example Basic usage
|
|
55
|
+
* ```tsx
|
|
56
|
+
* <CheckboxList
|
|
57
|
+
* items={[
|
|
58
|
+
* { key: '1', label: 'Option 1' },
|
|
59
|
+
* { key: '2', label: 'Option 2' },
|
|
60
|
+
* ]}
|
|
61
|
+
* selectedKeys={selected}
|
|
62
|
+
* onSelectionChange={setSelected}
|
|
63
|
+
* />
|
|
64
|
+
* ```
|
|
65
|
+
*
|
|
66
|
+
* @example With grouping and search
|
|
67
|
+
* ```tsx
|
|
68
|
+
* <CheckboxList
|
|
69
|
+
* items={fields}
|
|
70
|
+
* selectedKeys={selectedFields}
|
|
71
|
+
* onSelectionChange={setSelectedFields}
|
|
72
|
+
* groupLabels={{ table1: 'Users', table2: 'Orders' }}
|
|
73
|
+
* searchable
|
|
74
|
+
* searchPlaceholder="Search fields..."
|
|
75
|
+
* showSelectAll
|
|
76
|
+
* maxHeight="300px"
|
|
77
|
+
* />
|
|
78
|
+
* ```
|
|
79
|
+
*/
|
|
80
|
+
export default function CheckboxList<T = unknown>({ items, selectedKeys, onSelectionChange, groupLabels, expandedGroups: controlledExpandedGroups, defaultExpandedGroups, onGroupToggle, searchable, searchPlaceholder, filterFn, debounceMs, maxHeight, showSelectAll, selectAllLabel, showSelectedCount, emptyMessage, noResultsMessage, size, variant, className, }: CheckboxListProps<T>): import("react/jsx-runtime").JSX.Element;
|
|
81
|
+
//# sourceMappingURL=CheckboxList.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"CheckboxList.d.ts","sourceRoot":"","sources":["../../src/components/CheckboxList.tsx"],"names":[],"mappings":"AAKA,MAAM,WAAW,gBAAgB,CAAC,CAAC,GAAG,OAAO;IAC3C,GAAG,EAAE,MAAM,CAAC;IACZ,KAAK,EAAE,MAAM,CAAC;IACd,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,IAAI,CAAC,EAAE,CAAC,CAAC;CACV;AAED,MAAM,WAAW,iBAAiB,CAAC,CAAC,GAAG,OAAO;IAC5C,gCAAgC;IAChC,KAAK,EAAE,gBAAgB,CAAC,CAAC,CAAC,EAAE,CAAC;IAC7B,mCAAmC;IACnC,YAAY,EAAE,MAAM,EAAE,CAAC;IACvB,sCAAsC;IACtC,iBAAiB,EAAE,CAAC,YAAY,EAAE,MAAM,EAAE,KAAK,IAAI,CAAC;IAGpD,+CAA+C;IAC/C,WAAW,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;IACrC,0DAA0D;IAC1D,cAAc,CAAC,EAAE,MAAM,EAAE,CAAC;IAC1B,6CAA6C;IAC7C,qBAAqB,CAAC,EAAE,MAAM,EAAE,CAAC;IACjC,4CAA4C;IAC5C,aAAa,CAAC,EAAE,CAAC,QAAQ,EAAE,MAAM,EAAE,QAAQ,EAAE,OAAO,KAAK,IAAI,CAAC;IAG9D,kCAAkC;IAClC,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,+BAA+B;IAC/B,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAC3B,6BAA6B;IAC7B,QAAQ,CAAC,EAAE,CAAC,IAAI,EAAE,gBAAgB,CAAC,CAAC,CAAC,EAAE,UAAU,EAAE,MAAM,KAAK,OAAO,CAAC;IACtE,sCAAsC;IACtC,UAAU,CAAC,EAAE,MAAM,CAAC;IAGpB,0CAA0C;IAC1C,SAAS,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IAC5B,+BAA+B;IAC/B,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,4BAA4B;IAC5B,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,mCAAmC;IACnC,iBAAiB,CAAC,EAAE,OAAO,CAAC;IAC5B,sCAAsC;IACtC,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,yCAAyC;IACzC,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAG1B,mBAAmB;IACnB,IAAI,CAAC,EAAE,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;IAC1B,qBAAqB;IACrB,OAAO,CAAC,EAAE,SAAS,GAAG,UAAU,GAAG,MAAM,CAAC;IAC1C,6BAA6B;IAC7B,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AA6BD;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA4BG;AACH,MAAM,CAAC,OAAO,UAAU,YAAY,CAAC,CAAC,GAAG,OAAO,EAAE,EAChD,KAAK,EACL,YAAY,EACZ,iBAAiB,EACjB,WAAgB,EAChB,cAAc,EAAE,wBAAwB,EACxC,qBAAqB,EACrB,aAAa,EACb,UAAkB,EAClB,iBAA+B,EAC/B,QAAQ,EACR,UAAgB,EAChB,SAAS,EACT,aAAqB,EACrB,cAA6B,EAC7B,iBAAyB,EACzB,YAAmC,EACnC,gBAA+C,EAC/C,IAAW,EACX,OAAmB,EACnB,SAAc,GACf,EAAE,iBAAiB,CAAC,CAAC,CAAC,2CAoPtB"}
|
|
@@ -8,6 +8,97 @@ export interface ChipProps {
|
|
|
8
8
|
disabled?: boolean;
|
|
9
9
|
className?: string;
|
|
10
10
|
onClick?: () => void;
|
|
11
|
+
/** Whether the chip is in a selected state */
|
|
12
|
+
selected?: boolean;
|
|
13
|
+
/** Maximum width for text truncation */
|
|
14
|
+
maxWidth?: string | number;
|
|
15
|
+
/** Unique key for use in ChipGroup selection */
|
|
16
|
+
chipKey?: string;
|
|
11
17
|
}
|
|
12
|
-
export
|
|
18
|
+
export interface ChipGroupProps {
|
|
19
|
+
children: ReactNode;
|
|
20
|
+
/** Layout direction */
|
|
21
|
+
direction?: 'horizontal' | 'vertical';
|
|
22
|
+
/** Whether chips should wrap to next line */
|
|
23
|
+
wrap?: boolean;
|
|
24
|
+
/** Gap between chips */
|
|
25
|
+
gap?: 'xs' | 'sm' | 'md' | 'lg';
|
|
26
|
+
/** Selection mode */
|
|
27
|
+
selectionMode?: 'none' | 'single' | 'multiple';
|
|
28
|
+
/** Selected chip keys (controlled) */
|
|
29
|
+
selectedKeys?: string[];
|
|
30
|
+
/** Callback when selection changes */
|
|
31
|
+
onSelectionChange?: (keys: string[]) => void;
|
|
32
|
+
/** Additional CSS classes */
|
|
33
|
+
className?: string;
|
|
34
|
+
}
|
|
35
|
+
/**
|
|
36
|
+
* Chip - Compact element for displaying values with optional remove functionality
|
|
37
|
+
*
|
|
38
|
+
* @example Basic chip
|
|
39
|
+
* ```tsx
|
|
40
|
+
* <Chip>Tag Name</Chip>
|
|
41
|
+
* ```
|
|
42
|
+
*
|
|
43
|
+
* @example Removable chip
|
|
44
|
+
* ```tsx
|
|
45
|
+
* <Chip onClose={() => removeTag(tag)}>
|
|
46
|
+
* {tag.name}
|
|
47
|
+
* </Chip>
|
|
48
|
+
* ```
|
|
49
|
+
*
|
|
50
|
+
* @example With icon and selected state
|
|
51
|
+
* ```tsx
|
|
52
|
+
* <Chip
|
|
53
|
+
* icon={<Star className="h-3 w-3" />}
|
|
54
|
+
* selected={isSelected}
|
|
55
|
+
* onClick={() => toggleSelection()}
|
|
56
|
+
* >
|
|
57
|
+
* Favorite
|
|
58
|
+
* </Chip>
|
|
59
|
+
* ```
|
|
60
|
+
*/
|
|
61
|
+
export default function Chip({ children, variant, size, onClose, icon, disabled, className, onClick, selected, maxWidth, chipKey, }: ChipProps): import("react/jsx-runtime").JSX.Element;
|
|
62
|
+
/**
|
|
63
|
+
* ChipGroup - Container for multiple chips with layout and selection support
|
|
64
|
+
*
|
|
65
|
+
* @example Basic group
|
|
66
|
+
* ```tsx
|
|
67
|
+
* <ChipGroup wrap gap="sm">
|
|
68
|
+
* {tags.map(tag => (
|
|
69
|
+
* <Chip key={tag.id} onClose={() => removeTag(tag)}>
|
|
70
|
+
* {tag.name}
|
|
71
|
+
* </Chip>
|
|
72
|
+
* ))}
|
|
73
|
+
* </ChipGroup>
|
|
74
|
+
* ```
|
|
75
|
+
*
|
|
76
|
+
* @example Selectable group (single)
|
|
77
|
+
* ```tsx
|
|
78
|
+
* <ChipGroup
|
|
79
|
+
* selectionMode="single"
|
|
80
|
+
* selectedKeys={[selectedCategory]}
|
|
81
|
+
* onSelectionChange={(keys) => setSelectedCategory(keys[0])}
|
|
82
|
+
* >
|
|
83
|
+
* <Chip chipKey="all">All</Chip>
|
|
84
|
+
* <Chip chipKey="active">Active</Chip>
|
|
85
|
+
* <Chip chipKey="archived">Archived</Chip>
|
|
86
|
+
* </ChipGroup>
|
|
87
|
+
* ```
|
|
88
|
+
*
|
|
89
|
+
* @example Multi-select group
|
|
90
|
+
* ```tsx
|
|
91
|
+
* <ChipGroup
|
|
92
|
+
* selectionMode="multiple"
|
|
93
|
+
* selectedKeys={selectedTags}
|
|
94
|
+
* onSelectionChange={setSelectedTags}
|
|
95
|
+
* wrap
|
|
96
|
+
* >
|
|
97
|
+
* {availableTags.map(tag => (
|
|
98
|
+
* <Chip key={tag} chipKey={tag}>{tag}</Chip>
|
|
99
|
+
* ))}
|
|
100
|
+
* </ChipGroup>
|
|
101
|
+
* ```
|
|
102
|
+
*/
|
|
103
|
+
export declare function ChipGroup({ children, direction, wrap, gap, selectionMode, selectedKeys, onSelectionChange, className, }: ChipGroupProps): import("react/jsx-runtime").JSX.Element;
|
|
13
104
|
//# sourceMappingURL=Chip.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Chip.d.ts","sourceRoot":"","sources":["../../src/components/Chip.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,
|
|
1
|
+
{"version":3,"file":"Chip.d.ts","sourceRoot":"","sources":["../../src/components/Chip.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAA0C,MAAM,OAAO,CAAC;AAG1E,MAAM,WAAW,SAAS;IACxB,QAAQ,EAAE,SAAS,CAAC;IACpB,OAAO,CAAC,EAAE,SAAS,GAAG,WAAW,GAAG,SAAS,GAAG,SAAS,GAAG,OAAO,GAAG,MAAM,CAAC;IAC7E,IAAI,CAAC,EAAE,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;IAC1B,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,IAAI,CAAC,EAAE,SAAS,CAAC;IACjB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,8CAA8C;IAC9C,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,wCAAwC;IACxC,QAAQ,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IAC3B,gDAAgD;IAChD,OAAO,CAAC,EAAE,MAAM,CAAC;CAClB;AAED,MAAM,WAAW,cAAc;IAC7B,QAAQ,EAAE,SAAS,CAAC;IACpB,uBAAuB;IACvB,SAAS,CAAC,EAAE,YAAY,GAAG,UAAU,CAAC;IACtC,6CAA6C;IAC7C,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,wBAAwB;IACxB,GAAG,CAAC,EAAE,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;IAChC,qBAAqB;IACrB,aAAa,CAAC,EAAE,MAAM,GAAG,QAAQ,GAAG,UAAU,CAAC;IAC/C,sCAAsC;IACtC,YAAY,CAAC,EAAE,MAAM,EAAE,CAAC;IACxB,sCAAsC;IACtC,iBAAiB,CAAC,EAAE,CAAC,IAAI,EAAE,MAAM,EAAE,KAAK,IAAI,CAAC;IAC7C,6BAA6B;IAC7B,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAkED;;;;;;;;;;;;;;;;;;;;;;;;;GAyBG;AACH,MAAM,CAAC,OAAO,UAAU,IAAI,CAAC,EAC3B,QAAQ,EACR,OAAqB,EACrB,IAAW,EACX,OAAO,EACP,IAAI,EACJ,QAAgB,EAChB,SAAc,EACd,OAAO,EACP,QAAgB,EAChB,QAAQ,EACR,OAAO,GACR,EAAE,SAAS,2CAsDX;AAED;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAwCG;AACH,wBAAgB,SAAS,CAAC,EACxB,QAAQ,EACR,SAAwB,EACxB,IAAY,EACZ,GAAU,EACV,aAAsB,EACtB,YAAiB,EACjB,iBAAiB,EACjB,SAAc,GACf,EAAE,cAAc,2CA0DhB"}
|
|
@@ -3,8 +3,11 @@
|
|
|
3
3
|
*
|
|
4
4
|
* Replaces window.confirm() with a styled, accessible modal dialog.
|
|
5
5
|
* Supports different variants (danger, warning, info) and customizable buttons.
|
|
6
|
+
*
|
|
7
|
+
* On mobile, automatically renders as a BottomSheet for better touch interaction.
|
|
6
8
|
*/
|
|
7
9
|
import React from 'react';
|
|
10
|
+
import { ModalProps } from './Modal';
|
|
8
11
|
export interface ConfirmDialogProps {
|
|
9
12
|
isOpen: boolean;
|
|
10
13
|
onClose: () => void;
|
|
@@ -16,8 +19,47 @@ export interface ConfirmDialogProps {
|
|
|
16
19
|
variant?: 'danger' | 'warning' | 'info';
|
|
17
20
|
icon?: React.ReactNode;
|
|
18
21
|
isLoading?: boolean;
|
|
22
|
+
/** Mobile display mode (inherited from Modal) */
|
|
23
|
+
mobileMode?: ModalProps['mobileMode'];
|
|
24
|
+
/** Height preset for BottomSheet on mobile */
|
|
25
|
+
mobileHeight?: ModalProps['mobileHeight'];
|
|
19
26
|
}
|
|
20
|
-
|
|
27
|
+
/**
|
|
28
|
+
* ConfirmDialog - Confirmation dialog with mobile support
|
|
29
|
+
*
|
|
30
|
+
* @example Basic usage
|
|
31
|
+
* ```tsx
|
|
32
|
+
* <ConfirmDialog
|
|
33
|
+
* isOpen={isOpen}
|
|
34
|
+
* onClose={handleClose}
|
|
35
|
+
* onConfirm={handleDelete}
|
|
36
|
+
* title="Delete Item"
|
|
37
|
+
* message="Are you sure you want to delete this item? This action cannot be undone."
|
|
38
|
+
* variant="danger"
|
|
39
|
+
* />
|
|
40
|
+
* ```
|
|
41
|
+
*
|
|
42
|
+
* @example With useConfirmDialog hook
|
|
43
|
+
* ```tsx
|
|
44
|
+
* const confirmDialog = useConfirmDialog();
|
|
45
|
+
*
|
|
46
|
+
* const handleDelete = () => {
|
|
47
|
+
* confirmDialog.show({
|
|
48
|
+
* title: 'Delete Item',
|
|
49
|
+
* message: 'Are you sure?',
|
|
50
|
+
* onConfirm: async () => await deleteItem(),
|
|
51
|
+
* });
|
|
52
|
+
* };
|
|
53
|
+
*
|
|
54
|
+
* return (
|
|
55
|
+
* <>
|
|
56
|
+
* <button onClick={handleDelete}>Delete</button>
|
|
57
|
+
* <ConfirmDialog {...confirmDialog.props} />
|
|
58
|
+
* </>
|
|
59
|
+
* );
|
|
60
|
+
* ```
|
|
61
|
+
*/
|
|
62
|
+
export default function ConfirmDialog({ isOpen, onClose, onConfirm, title, message, confirmLabel, cancelLabel, variant, icon, isLoading, mobileMode, mobileHeight, }: ConfirmDialogProps): import("react/jsx-runtime").JSX.Element;
|
|
21
63
|
/**
|
|
22
64
|
* Hook for managing ConfirmDialog state
|
|
23
65
|
*
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ConfirmDialog.d.ts","sourceRoot":"","sources":["../../src/components/ConfirmDialog.tsx"],"names":[],"mappings":"AACA
|
|
1
|
+
{"version":3,"file":"ConfirmDialog.d.ts","sourceRoot":"","sources":["../../src/components/ConfirmDialog.tsx"],"names":[],"mappings":"AACA;;;;;;;GAOG;AAEH,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAc,EAAe,UAAU,EAAE,MAAM,SAAS,CAAC;AAGzD,MAAM,WAAW,kBAAkB;IACjC,MAAM,EAAE,OAAO,CAAC;IAChB,OAAO,EAAE,MAAM,IAAI,CAAC;IACpB,SAAS,EAAE,MAAM,IAAI,GAAG,OAAO,CAAC,IAAI,CAAC,CAAC;IACtC,KAAK,EAAE,MAAM,CAAC;IACd,OAAO,EAAE,MAAM,CAAC;IAChB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,OAAO,CAAC,EAAE,QAAQ,GAAG,SAAS,GAAG,MAAM,CAAC;IACxC,IAAI,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACvB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,iDAAiD;IACjD,UAAU,CAAC,EAAE,UAAU,CAAC,YAAY,CAAC,CAAC;IACtC,8CAA8C;IAC9C,YAAY,CAAC,EAAE,UAAU,CAAC,cAAc,CAAC,CAAC;CAC3C;AAuBD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAkCG;AACH,MAAM,CAAC,OAAO,UAAU,aAAa,CAAC,EACpC,MAAM,EACN,OAAO,EACP,SAAS,EACT,KAAK,EACL,OAAO,EACP,YAAwB,EACxB,WAAsB,EACtB,OAAkB,EAClB,IAAI,EACJ,SAAiB,EACjB,UAAmB,EACnB,YAAmB,GACpB,EAAE,kBAAkB,2CAmEpB;AAED;;;;;;;;;;;;;;;;;;;;;;;;GAwBG;AACH,wBAAgB,gBAAgB;sBASL,IAAI,CAAC,kBAAkB,EAAE,QAAQ,GAAG,SAAS,GAAG,WAAW,CAAC;;WA+B9E,kBAAkB;EAE1B"}
|
|
@@ -1,4 +1,5 @@
|
|
|
1
1
|
import React from 'react';
|
|
2
|
+
import { CardViewConfig } from './DataTableCardView';
|
|
2
3
|
/**
|
|
3
4
|
* Base data item interface - all data items must have an id
|
|
4
5
|
*
|
|
@@ -219,6 +220,14 @@ interface DataTableProps<T extends BaseDataItem = BaseDataItem> {
|
|
|
219
220
|
onPageSizeChange?: (pageSize: number) => void;
|
|
220
221
|
/** Show page size selector (default: true when paginated) */
|
|
221
222
|
showPageSizeSelector?: boolean;
|
|
223
|
+
/** Mobile view mode: 'auto' (detect viewport), 'card' (always cards), 'table' (always table) */
|
|
224
|
+
mobileView?: 'auto' | 'card' | 'table';
|
|
225
|
+
/** Configuration for card view layout */
|
|
226
|
+
cardConfig?: CardViewConfig<T>;
|
|
227
|
+
/** Gap between cards in card view */
|
|
228
|
+
cardGap?: 'sm' | 'md' | 'lg';
|
|
229
|
+
/** Custom class name for cards */
|
|
230
|
+
cardClassName?: string;
|
|
222
231
|
}
|
|
223
232
|
/**
|
|
224
233
|
* DataTable - Feature-rich data table component
|
|
@@ -264,6 +273,6 @@ interface DataTableProps<T extends BaseDataItem = BaseDataItem> {
|
|
|
264
273
|
* />
|
|
265
274
|
* ```
|
|
266
275
|
*/
|
|
267
|
-
export default function DataTable<T extends BaseDataItem = BaseDataItem>({ data, columns, loading, error, emptyMessage, loadingRows, className, onSortChange, currentSort, onEdit, onDelete, actions, enableContextMenu, onRowClick, onRowDoubleClick, selectable, selectedRows: externalSelectedRows, onRowSelect, keyExtractor, expandable, expandedRows: externalExpandedRows, renderExpandedRow, expandedRowConfig, showExpandChevron, striped, stripedColor, density, rowClassName, rowHighlight, highlightedRowId, bordered, borderColor, disableHover, hiddenColumns, headerClassName, renderEmptyState: customRenderEmptyState, resizable, onColumnResize, reorderable, onColumnReorder, virtualized, virtualHeight, virtualRowHeight, paginated, currentPage, pageSize, totalItems, onPageChange, pageSizeOptions, onPageSizeChange, showPageSizeSelector, }: DataTableProps<T>): import("react/jsx-runtime").JSX.Element;
|
|
276
|
+
export default function DataTable<T extends BaseDataItem = BaseDataItem>({ data, columns, loading, error, emptyMessage, loadingRows, className, onSortChange, currentSort, onEdit, onDelete, actions, enableContextMenu, onRowClick, onRowDoubleClick, selectable, selectedRows: externalSelectedRows, onRowSelect, keyExtractor, expandable, expandedRows: externalExpandedRows, renderExpandedRow, expandedRowConfig, showExpandChevron, striped, stripedColor, density, rowClassName, rowHighlight, highlightedRowId, bordered, borderColor, disableHover, hiddenColumns, headerClassName, renderEmptyState: customRenderEmptyState, resizable, onColumnResize, reorderable, onColumnReorder, virtualized, virtualHeight, virtualRowHeight, paginated, currentPage, pageSize, totalItems, onPageChange, pageSizeOptions, onPageSizeChange, showPageSizeSelector, mobileView, cardConfig, cardGap, cardClassName, }: DataTableProps<T>): import("react/jsx-runtime").JSX.Element;
|
|
268
277
|
export {};
|
|
269
278
|
//# sourceMappingURL=DataTable.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"DataTable.d.ts","sourceRoot":"","sources":["../../src/components/DataTable.tsx"],"names":[],"mappings":"AACA,OAAO,KAAsC,MAAM,OAAO,CAAC;
|
|
1
|
+
{"version":3,"file":"DataTable.d.ts","sourceRoot":"","sources":["../../src/components/DataTable.tsx"],"names":[],"mappings":"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"}
|
|
@@ -0,0 +1,99 @@
|
|
|
1
|
+
import React from 'react';
|
|
2
|
+
import { BaseDataItem, DataTableColumn, DataTableAction } from './DataTable';
|
|
3
|
+
/**
|
|
4
|
+
* Configuration for how data should display in card view
|
|
5
|
+
*/
|
|
6
|
+
export interface CardViewConfig<T> {
|
|
7
|
+
/** Column key to use as the main title */
|
|
8
|
+
titleKey: keyof T | string;
|
|
9
|
+
/** Column key to use as subtitle (optional) */
|
|
10
|
+
subtitleKey?: keyof T | string;
|
|
11
|
+
/** Column keys to show as metadata rows */
|
|
12
|
+
metadataKeys?: (keyof T | string)[];
|
|
13
|
+
/** Column key to use for badge/status display */
|
|
14
|
+
badgeKey?: keyof T | string;
|
|
15
|
+
/** Column key for avatar/image (renders circular image) */
|
|
16
|
+
avatarKey?: keyof T | string;
|
|
17
|
+
/** Custom render function for entire card content */
|
|
18
|
+
renderCard?: (item: T, columns: DataTableColumn<T>[]) => React.ReactNode;
|
|
19
|
+
/** Show chevron indicator for clickable cards */
|
|
20
|
+
showChevron?: boolean;
|
|
21
|
+
}
|
|
22
|
+
export interface DataTableCardViewProps<T extends BaseDataItem> {
|
|
23
|
+
/** Data items to display */
|
|
24
|
+
data: T[];
|
|
25
|
+
/** Column definitions (used for rendering values and getting column info) */
|
|
26
|
+
columns: DataTableColumn<T>[];
|
|
27
|
+
/** Card view configuration */
|
|
28
|
+
cardConfig?: CardViewConfig<T>;
|
|
29
|
+
/** Loading state */
|
|
30
|
+
loading?: boolean;
|
|
31
|
+
/** Number of skeleton cards to show while loading */
|
|
32
|
+
loadingRows?: number;
|
|
33
|
+
/** Empty state message */
|
|
34
|
+
emptyMessage?: string;
|
|
35
|
+
/** Click handler for card tap */
|
|
36
|
+
onCardClick?: (item: T) => void;
|
|
37
|
+
/** Long press / context menu handler */
|
|
38
|
+
onCardLongPress?: (item: T, event: React.TouchEvent | React.MouseEvent) => void;
|
|
39
|
+
/** Enable selection mode */
|
|
40
|
+
selectable?: boolean;
|
|
41
|
+
/** Currently selected row keys */
|
|
42
|
+
selectedRows?: Set<string>;
|
|
43
|
+
/** Selection change handler */
|
|
44
|
+
onSelectionChange?: (selectedRows: string[]) => void;
|
|
45
|
+
/** Function to extract unique key from row */
|
|
46
|
+
keyExtractor?: (row: T) => string;
|
|
47
|
+
/** Row actions (shown in action menu) */
|
|
48
|
+
actions?: DataTableAction<T>[];
|
|
49
|
+
/** Built-in edit handler */
|
|
50
|
+
onEdit?: (item: T) => void;
|
|
51
|
+
/** Built-in delete handler */
|
|
52
|
+
onDelete?: (item: T) => void;
|
|
53
|
+
/** Additional CSS classes */
|
|
54
|
+
className?: string;
|
|
55
|
+
/** Custom card class name */
|
|
56
|
+
cardClassName?: string;
|
|
57
|
+
/** Gap between cards */
|
|
58
|
+
gap?: 'sm' | 'md' | 'lg';
|
|
59
|
+
}
|
|
60
|
+
/**
|
|
61
|
+
* DataTableCardView - Mobile-friendly card view for data tables
|
|
62
|
+
*
|
|
63
|
+
* Renders data as cards instead of table rows, optimized for touch interaction.
|
|
64
|
+
* Automatically uses column render functions for consistent data display.
|
|
65
|
+
*
|
|
66
|
+
* @example Basic usage
|
|
67
|
+
* ```tsx
|
|
68
|
+
* <DataTableCardView
|
|
69
|
+
* data={users}
|
|
70
|
+
* columns={columns}
|
|
71
|
+
* cardConfig={{
|
|
72
|
+
* titleKey: 'name',
|
|
73
|
+
* subtitleKey: 'email',
|
|
74
|
+
* metadataKeys: ['department', 'role'],
|
|
75
|
+
* badgeKey: 'status',
|
|
76
|
+
* }}
|
|
77
|
+
* onCardClick={(user) => navigate(`/users/${user.id}`)}
|
|
78
|
+
* />
|
|
79
|
+
* ```
|
|
80
|
+
*
|
|
81
|
+
* @example With selection
|
|
82
|
+
* ```tsx
|
|
83
|
+
* <DataTableCardView
|
|
84
|
+
* data={orders}
|
|
85
|
+
* columns={columns}
|
|
86
|
+
* cardConfig={{
|
|
87
|
+
* titleKey: 'orderNumber',
|
|
88
|
+
* subtitleKey: 'customer',
|
|
89
|
+
* badgeKey: 'status',
|
|
90
|
+
* }}
|
|
91
|
+
* selectable
|
|
92
|
+
* selectedRows={selectedOrders}
|
|
93
|
+
* onSelectionChange={setSelectedOrders}
|
|
94
|
+
* />
|
|
95
|
+
* ```
|
|
96
|
+
*/
|
|
97
|
+
export declare function DataTableCardView<T extends BaseDataItem>({ data, columns, cardConfig, loading, loadingRows, emptyMessage, onCardClick, onCardLongPress, selectable, selectedRows, onSelectionChange, keyExtractor, actions, onEdit, onDelete, className, cardClassName, gap, }: DataTableCardViewProps<T>): import("react/jsx-runtime").JSX.Element;
|
|
98
|
+
export default DataTableCardView;
|
|
99
|
+
//# sourceMappingURL=DataTableCardView.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"DataTableCardView.d.ts","sourceRoot":"","sources":["../../src/components/DataTableCardView.tsx"],"names":[],"mappings":"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"}
|