@uxuissk/design-system 0.8.14 → 0.8.16
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/ai-rules.json +94 -0
- package/dist/ai-rules.md +168 -0
- package/dist/sellsuki-ds.css +1 -43
- package/dist/sellsuki-ds.js +2501 -6399
- package/dist/sellsuki-ds.js.map +1 -0
- package/dist/sellsuki-ds.umd.cjs +81 -81
- package/dist/sellsuki-ds.umd.cjs.map +1 -0
- package/dist/types/index.d.ts +21 -1294
- package/package.json +4 -13
- package/dist/fonts/DBHeaventRounded-Black.woff +0 -0
- package/dist/fonts/DBHeaventRounded-Black.woff2 +0 -0
- package/dist/fonts/DBHeaventRounded-Bold.woff +0 -0
- package/dist/fonts/DBHeaventRounded-Bold.woff2 +0 -0
- package/dist/fonts/DBHeaventRounded-Med.woff +0 -0
- package/dist/fonts/DBHeaventRounded-Med.woff2 +0 -0
- package/dist/fonts/DBHeaventRounded-Regular.woff +0 -0
- package/dist/fonts/DBHeaventRounded-Regular.woff2 +0 -0
package/dist/types/index.d.ts
CHANGED
|
@@ -7,7 +7,7 @@ export declare namespace Accordion {
|
|
|
7
7
|
var displayName: string;
|
|
8
8
|
}
|
|
9
9
|
|
|
10
|
-
export declare function AccordionItem({ title, children, open, onToggle, icon
|
|
10
|
+
export declare function AccordionItem({ title, children, open, onToggle, icon }: AccordionItemProps): JSX.Element;
|
|
11
11
|
|
|
12
12
|
export declare namespace AccordionItem {
|
|
13
13
|
var displayName: string;
|
|
@@ -24,8 +24,6 @@ export declare interface AccordionItemProps {
|
|
|
24
24
|
onToggle: () => void;
|
|
25
25
|
/** Optional leading icon */
|
|
26
26
|
icon?: default_2.ReactNode;
|
|
27
|
-
/** Disable interaction for this item */
|
|
28
|
-
disabled?: boolean;
|
|
29
27
|
}
|
|
30
28
|
|
|
31
29
|
export declare interface AccordionProps {
|
|
@@ -37,7 +35,6 @@ export declare interface AccordionProps {
|
|
|
37
35
|
title: string;
|
|
38
36
|
content: default_2.ReactNode;
|
|
39
37
|
icon?: default_2.ReactNode;
|
|
40
|
-
disabled?: boolean;
|
|
41
38
|
}[];
|
|
42
39
|
/** Initially open item(s) */
|
|
43
40
|
defaultOpen?: string | string[];
|
|
@@ -51,85 +48,6 @@ export declare interface AccordionProps {
|
|
|
51
48
|
|
|
52
49
|
export declare type AccordionType = "single" | "multiple";
|
|
53
50
|
|
|
54
|
-
export declare interface AdvancedColumn<T = Record<string, any>> {
|
|
55
|
-
/** Unique column key — matches field name in data row */
|
|
56
|
-
key: string;
|
|
57
|
-
/** Column header label */
|
|
58
|
-
header: string;
|
|
59
|
-
/** Enable server-side sort click */
|
|
60
|
-
sortable?: boolean;
|
|
61
|
-
/** Fixed pixel or CSS width */
|
|
62
|
-
width?: number | string;
|
|
63
|
-
/** Minimum width in px (default 80) */
|
|
64
|
-
minWidth?: number;
|
|
65
|
-
/** Text alignment */
|
|
66
|
-
align?: "left" | "center" | "right";
|
|
67
|
-
/** Stick to left edge (frozen column) */
|
|
68
|
-
frozen?: boolean;
|
|
69
|
-
/** Allow hiding via column toggle. Default true */
|
|
70
|
-
hideable?: boolean;
|
|
71
|
-
/** Start hidden */
|
|
72
|
-
defaultHidden?: boolean;
|
|
73
|
-
/** Custom cell renderer */
|
|
74
|
-
render?: (value: any, row: T, index: number) => default_2.ReactNode;
|
|
75
|
-
}
|
|
76
|
-
|
|
77
|
-
export declare function AdvancedDataTable<T extends Record<string, any>>({ columns, data, rowKey, pagination, sortBy, sortOrder, onPageChange, onSortChange, selectable, selectedRows: controlledSelected, onSelectionChange, bulkActions, onRowClick, expandedRowRender, loading, loadingRows, error, emptyMessage, emptyDescription, showColumnToggle, size, stickyHeader, className, }: AdvancedDataTableProps<T>): JSX.Element;
|
|
78
|
-
|
|
79
|
-
export declare interface AdvancedDataTableProps<T = Record<string, any>> {
|
|
80
|
-
/** Column definitions */
|
|
81
|
-
columns: AdvancedColumn<T>[];
|
|
82
|
-
/** Row data */
|
|
83
|
-
data: T[];
|
|
84
|
-
/** Field to use as unique row key (default: "id") */
|
|
85
|
-
rowKey?: string;
|
|
86
|
-
/** Server pagination metadata */
|
|
87
|
-
pagination?: PaginationMeta;
|
|
88
|
-
/** Currently sorted column key */
|
|
89
|
-
sortBy?: string;
|
|
90
|
-
/** Current sort direction */
|
|
91
|
-
sortOrder?: SortOrder;
|
|
92
|
-
/** Called when user changes page or page size */
|
|
93
|
-
onPageChange?: (page: number, pageSize: number) => void;
|
|
94
|
-
/** Called when user clicks a sortable column */
|
|
95
|
-
onSortChange?: (sortBy: string, sortOrder: SortOrder) => void;
|
|
96
|
-
/** Enable row checkboxes */
|
|
97
|
-
selectable?: boolean;
|
|
98
|
-
/** Controlled selection (set of rowKey values) */
|
|
99
|
-
selectedRows?: Set<string | number>;
|
|
100
|
-
/** Called when selection changes */
|
|
101
|
-
onSelectionChange?: (selected: Set<string | number>, rows: T[]) => void;
|
|
102
|
-
/** Actions shown in bulk action bar when rows are selected */
|
|
103
|
-
bulkActions?: BulkAction[];
|
|
104
|
-
/** Called when a row is clicked */
|
|
105
|
-
onRowClick?: (row: T) => void;
|
|
106
|
-
/** Render function for expanded row content */
|
|
107
|
-
expandedRowRender?: (row: T) => default_2.ReactNode;
|
|
108
|
-
/** Show skeleton loading rows */
|
|
109
|
-
loading?: boolean;
|
|
110
|
-
/** Number of skeleton rows to show while loading */
|
|
111
|
-
loadingRows?: number;
|
|
112
|
-
/** Error message — renders error state instead of table body */
|
|
113
|
-
error?: string;
|
|
114
|
-
/** Custom empty state message */
|
|
115
|
-
emptyMessage?: string;
|
|
116
|
-
/** Custom empty state description */
|
|
117
|
-
emptyDescription?: string;
|
|
118
|
-
/** Show column visibility toggle button */
|
|
119
|
-
showColumnToggle?: boolean;
|
|
120
|
-
size?: AdvancedTableSize;
|
|
121
|
-
stickyHeader?: boolean;
|
|
122
|
-
className?: string;
|
|
123
|
-
}
|
|
124
|
-
|
|
125
|
-
export declare type AdvancedTableSize = "sm" | "md" | "lg";
|
|
126
|
-
|
|
127
|
-
/**
|
|
128
|
-
* Akita brand config — Cobalt Blue primary (#1769E2).
|
|
129
|
-
* logo / logoFull: inject from product repo (Brand=akita SVG files).
|
|
130
|
-
*/
|
|
131
|
-
export declare const akitaBrandConfig: ProductBrandConfig;
|
|
132
|
-
|
|
133
51
|
export declare function Alert({ variant, title, children, dismissible, onDismiss, action, icon, className }: AlertProps): JSX.Element | null;
|
|
134
52
|
|
|
135
53
|
declare interface AlertProps {
|
|
@@ -145,189 +63,6 @@ declare interface AlertProps {
|
|
|
145
63
|
|
|
146
64
|
export declare type AlertVariant = "info" | "success" | "warning" | "error";
|
|
147
65
|
|
|
148
|
-
/**
|
|
149
|
-
* AppShell — top-level layout shell for Sellsuki products.
|
|
150
|
-
*
|
|
151
|
-
* Combines AppShellProvider + TopNavbar + Sidebar + content frame.
|
|
152
|
-
* Handles responsive sidebar (desktop collapse, mobile drawer overlay).
|
|
153
|
-
* Sets data-product attribute for CSS theme token override.
|
|
154
|
-
*
|
|
155
|
-
* @example
|
|
156
|
-
* <AppShell product={sellsukiBrandConfig} user={user} navResolver={nav}>
|
|
157
|
-
* <FeaturePageScaffold layout="list" ... />
|
|
158
|
-
* </AppShell>
|
|
159
|
-
*/
|
|
160
|
-
export declare function AppShell({ product, user, navResolver, ...rest }: AppShellProps): JSX.Element;
|
|
161
|
-
|
|
162
|
-
export declare namespace AppShell {
|
|
163
|
-
var displayName: string;
|
|
164
|
-
}
|
|
165
|
-
|
|
166
|
-
/**
|
|
167
|
-
* The context value provided by AppShellProvider and consumed by useAppShell().
|
|
168
|
-
* Feature pages use this to read shell state and push breadcrumbs.
|
|
169
|
-
*/
|
|
170
|
-
export declare interface AppShellContextValue {
|
|
171
|
-
/** Whether the sidebar is currently open */
|
|
172
|
-
sidebarOpen: boolean;
|
|
173
|
-
/** Toggle sidebar open/closed */
|
|
174
|
-
setSidebarOpen: (open: boolean) => void;
|
|
175
|
-
/** The current authenticated user */
|
|
176
|
-
user: ShellUser | null;
|
|
177
|
-
/** The current product config */
|
|
178
|
-
product: ProductBrandConfig | null;
|
|
179
|
-
/** Current breadcrumb items */
|
|
180
|
-
breadcrumbs: BreadcrumbEntry[];
|
|
181
|
-
/**
|
|
182
|
-
* Set breadcrumbs from a feature page.
|
|
183
|
-
* Call this in a useEffect when the page mounts.
|
|
184
|
-
*
|
|
185
|
-
* @example
|
|
186
|
-
* const { setBreadcrumbs } = useAppShell();
|
|
187
|
-
* useEffect(() => {
|
|
188
|
-
* setBreadcrumbs([
|
|
189
|
-
* { label: "Orders", href: "/orders" },
|
|
190
|
-
* { label: "Order #12345" },
|
|
191
|
-
* ]);
|
|
192
|
-
* }, []);
|
|
193
|
-
*/
|
|
194
|
-
setBreadcrumbs: (items: BreadcrumbEntry[]) => void;
|
|
195
|
-
}
|
|
196
|
-
|
|
197
|
-
/**
|
|
198
|
-
* Error boundary for AppShell content.
|
|
199
|
-
* Prevents a feature page crash from taking down the entire shell.
|
|
200
|
-
*
|
|
201
|
-
* @example
|
|
202
|
-
* <AppShellProvider ...>
|
|
203
|
-
* <AppShellErrorBoundary fallback={<ErrorPage />}>
|
|
204
|
-
* <FeaturePage />
|
|
205
|
-
* </AppShellErrorBoundary>
|
|
206
|
-
* </AppShellProvider>
|
|
207
|
-
*/
|
|
208
|
-
export declare class AppShellErrorBoundary extends default_2.Component<AppShellErrorBoundaryProps, ErrorBoundaryState> {
|
|
209
|
-
constructor(props: AppShellErrorBoundaryProps);
|
|
210
|
-
static getDerivedStateFromError(error: Error): ErrorBoundaryState;
|
|
211
|
-
componentDidCatch(error: Error, info: default_2.ErrorInfo): void;
|
|
212
|
-
render(): string | number | bigint | boolean | Iterable<default_2.ReactNode> | Promise<string | number | bigint | boolean | default_2.ReactPortal | default_2.ReactElement<unknown, string | default_2.JSXElementConstructor<any>> | Iterable<default_2.ReactNode> | null | undefined> | JSX.Element | null | undefined;
|
|
213
|
-
}
|
|
214
|
-
|
|
215
|
-
declare interface AppShellErrorBoundaryProps {
|
|
216
|
-
children: default_2.ReactNode;
|
|
217
|
-
fallback?: default_2.ReactNode;
|
|
218
|
-
}
|
|
219
|
-
|
|
220
|
-
export declare interface AppShellFullContextValue extends AppShellContextValue {
|
|
221
|
-
/** Navigation groups resolved from navResolver */
|
|
222
|
-
navGroups: ShellSidebarGroup[];
|
|
223
|
-
/** Whether nav is loading (async navResolver in flight) */
|
|
224
|
-
navLoading: boolean;
|
|
225
|
-
/** Nav load error — display fallback nav when set */
|
|
226
|
-
navError: string | null;
|
|
227
|
-
/** Manually refresh nav (re-call navResolver) */
|
|
228
|
-
refreshNav: () => void;
|
|
229
|
-
}
|
|
230
|
-
|
|
231
|
-
export declare interface AppShellProps {
|
|
232
|
-
/** Product brand config — drives theme and brand identity */
|
|
233
|
-
product: ProductBrandConfig;
|
|
234
|
-
/** Authenticated user */
|
|
235
|
-
user: ShellUser;
|
|
236
|
-
/** Async nav resolver — permission-filtered nav groups */
|
|
237
|
-
navResolver?: NavResolver;
|
|
238
|
-
/** Currently active nav item ID */
|
|
239
|
-
activeItemId?: string;
|
|
240
|
-
/** Navigation handler — called when user clicks a nav item */
|
|
241
|
-
onNavigate?: (item: NavItem) => void;
|
|
242
|
-
/** Notification count (0 = hidden) */
|
|
243
|
-
notificationCount?: number;
|
|
244
|
-
/** Notification click handler */
|
|
245
|
-
onNotificationClick?: () => void;
|
|
246
|
-
/** App/product switcher click handler — shows grid icon in TopNavbar */
|
|
247
|
-
onAppSwitcherClick?: () => void;
|
|
248
|
-
/** User click handler (profile menu, logout) */
|
|
249
|
-
onUserClick?: () => void;
|
|
250
|
-
/** Search click handler */
|
|
251
|
-
onSearchClick?: () => void;
|
|
252
|
-
/**
|
|
253
|
-
* Search display mode for TopNavbar.
|
|
254
|
-
* - "bar" — full search bar
|
|
255
|
-
* - "icon" — icon button only
|
|
256
|
-
* - "none" — hidden (default)
|
|
257
|
-
* @deprecated showSearch — use searchMode="bar" instead
|
|
258
|
-
*/
|
|
259
|
-
searchMode?: "bar" | "icon" | "none";
|
|
260
|
-
/**
|
|
261
|
-
* @deprecated Use searchMode="bar" instead
|
|
262
|
-
*/
|
|
263
|
-
showSearch?: boolean;
|
|
264
|
-
/** Page title / system name shown in TopNavbar after logo. Default: hidden */
|
|
265
|
-
title?: string;
|
|
266
|
-
/** App version string */
|
|
267
|
-
version?: string;
|
|
268
|
-
/** App version date */
|
|
269
|
-
versionDate?: string;
|
|
270
|
-
/** Whether content area has padding (default: true) */
|
|
271
|
-
contentPadding?: boolean;
|
|
272
|
-
/** Utility items rendered at sidebar footer (e.g. Help, Settings) */
|
|
273
|
-
utilityItems?: SidebarItem[];
|
|
274
|
-
/** Children — feature page content */
|
|
275
|
-
children: default_2.ReactNode;
|
|
276
|
-
/** Additional class name on root element */
|
|
277
|
-
className?: string;
|
|
278
|
-
}
|
|
279
|
-
|
|
280
|
-
export declare function AppShellProvider({ user, product, navResolver, sidebarOpen: controlledOpen, onSidebarChange, defaultSidebarOpen, children, }: AppShellProviderProps): JSX.Element;
|
|
281
|
-
|
|
282
|
-
export declare namespace AppShellProvider {
|
|
283
|
-
var displayName: string;
|
|
284
|
-
}
|
|
285
|
-
|
|
286
|
-
export declare interface AppShellProviderProps {
|
|
287
|
-
/** The authenticated user for the session */
|
|
288
|
-
user?: ShellUser | null;
|
|
289
|
-
/** The product brand config — drives theme token override and brand identity */
|
|
290
|
-
product?: ProductBrandConfig | null;
|
|
291
|
-
/**
|
|
292
|
-
* Async nav resolver — called once on mount (and when user changes).
|
|
293
|
-
* Return permission-filtered SidebarGroups.
|
|
294
|
-
* If omitted the nav state is empty (product drives its own nav externally).
|
|
295
|
-
*/
|
|
296
|
-
navResolver?: NavResolver;
|
|
297
|
-
/**
|
|
298
|
-
* Override sidebar open state from outside (controlled mode).
|
|
299
|
-
* Pair with onSidebarChange for fully controlled behavior.
|
|
300
|
-
*/
|
|
301
|
-
sidebarOpen?: boolean;
|
|
302
|
-
/** Sidebar change callback (controlled mode) */
|
|
303
|
-
onSidebarChange?: (open: boolean) => void;
|
|
304
|
-
/** Initial sidebar open state (uncontrolled, default: true on desktop) */
|
|
305
|
-
defaultSidebarOpen?: boolean;
|
|
306
|
-
/** Children */
|
|
307
|
-
children: default_2.ReactNode;
|
|
308
|
-
}
|
|
309
|
-
|
|
310
|
-
/**
|
|
311
|
-
* Full-page loading skeleton for AppShell.
|
|
312
|
-
* Use while the user session or product config is loading.
|
|
313
|
-
*/
|
|
314
|
-
export declare function AppShellSkeleton(): JSX.Element;
|
|
315
|
-
|
|
316
|
-
export declare namespace AppShellSkeleton {
|
|
317
|
-
var displayName: string;
|
|
318
|
-
}
|
|
319
|
-
|
|
320
|
-
export declare function AreaChart({ series, height, width, showXAxis, showYAxis, showGrid, showLegend, showTooltip, showDots, smooth, fillOpacity, className, }: AreaChartProps): JSX.Element | null;
|
|
321
|
-
|
|
322
|
-
export declare namespace AreaChart {
|
|
323
|
-
var displayName: string;
|
|
324
|
-
}
|
|
325
|
-
|
|
326
|
-
export declare interface AreaChartProps extends LineChartProps {
|
|
327
|
-
/** Opacity of fill area */
|
|
328
|
-
fillOpacity?: number;
|
|
329
|
-
}
|
|
330
|
-
|
|
331
66
|
export declare function Avatar({ src, name, size, status, className }: AvatarProps): JSX.Element;
|
|
332
67
|
|
|
333
68
|
export declare namespace Avatar {
|
|
@@ -383,56 +118,8 @@ export declare type BadgeSize = "sm" | "md" | "lg";
|
|
|
383
118
|
|
|
384
119
|
export declare type BadgeVariant = "default" | "secondary" | "outline" | "destructive" | "success" | "warning";
|
|
385
120
|
|
|
386
|
-
export declare function BarChart({ series, height, width, showXAxis, showYAxis, showGrid, showLegend, showTooltip, stacked, radius, className, }: BarChartProps): JSX.Element | null;
|
|
387
|
-
|
|
388
|
-
export declare namespace BarChart {
|
|
389
|
-
var displayName: string;
|
|
390
|
-
}
|
|
391
|
-
|
|
392
|
-
export declare interface BarChartProps extends BaseChartProps {
|
|
393
|
-
/** Horizontal bar chart */
|
|
394
|
-
horizontal?: boolean;
|
|
395
|
-
/** Stack bars (when multiple series) */
|
|
396
|
-
stacked?: boolean;
|
|
397
|
-
/** Bar corner radius */
|
|
398
|
-
radius?: number;
|
|
399
|
-
}
|
|
400
|
-
|
|
401
|
-
export declare interface BaseChartProps {
|
|
402
|
-
/** Chart series (single or multiple) */
|
|
403
|
-
series: ChartSeries[];
|
|
404
|
-
/** Chart height */
|
|
405
|
-
height?: number;
|
|
406
|
-
/** Chart width (default: 100% of container) */
|
|
407
|
-
width?: number;
|
|
408
|
-
/** Show X-axis labels */
|
|
409
|
-
showXAxis?: boolean;
|
|
410
|
-
/** Show Y-axis labels */
|
|
411
|
-
showYAxis?: boolean;
|
|
412
|
-
/** Show grid lines */
|
|
413
|
-
showGrid?: boolean;
|
|
414
|
-
/** Show legend */
|
|
415
|
-
showLegend?: boolean;
|
|
416
|
-
/** Show tooltip on hover */
|
|
417
|
-
showTooltip?: boolean;
|
|
418
|
-
/** Y-axis label */
|
|
419
|
-
yAxisLabel?: string;
|
|
420
|
-
/** Additional class name */
|
|
421
|
-
className?: string;
|
|
422
|
-
}
|
|
423
|
-
|
|
424
121
|
export declare function Breadcrumb({ items, separator, size, maxItems, }: BreadcrumbProps): JSX.Element;
|
|
425
122
|
|
|
426
|
-
/**
|
|
427
|
-
* A breadcrumb entry set by feature pages via setBreadcrumbs().
|
|
428
|
-
*/
|
|
429
|
-
export declare interface BreadcrumbEntry {
|
|
430
|
-
/** Display label */
|
|
431
|
-
label: string;
|
|
432
|
-
/** Navigation href — omit for current page (last item) */
|
|
433
|
-
href?: string;
|
|
434
|
-
}
|
|
435
|
-
|
|
436
123
|
export declare interface BreadcrumbItem {
|
|
437
124
|
label: string;
|
|
438
125
|
href?: string;
|
|
@@ -457,13 +144,6 @@ export declare type BreadcrumbSeparator = "chevron" | "slash" | "dot";
|
|
|
457
144
|
|
|
458
145
|
export declare type BreadcrumbSize = "sm" | "md" | "lg";
|
|
459
146
|
|
|
460
|
-
export declare interface BulkAction {
|
|
461
|
-
label: string;
|
|
462
|
-
icon?: default_2.ReactNode;
|
|
463
|
-
variant?: "default" | "destructive";
|
|
464
|
-
onClick: (selectedKeys: Array<string | number>) => void;
|
|
465
|
-
}
|
|
466
|
-
|
|
467
147
|
export declare function ButtonGroup({ children, className, }: {
|
|
468
148
|
children: default_2.ReactNode;
|
|
469
149
|
className?: string;
|
|
@@ -513,22 +193,6 @@ export declare interface CardProps {
|
|
|
513
193
|
elevation?: "none" | "sm" | "md" | "lg";
|
|
514
194
|
}
|
|
515
195
|
|
|
516
|
-
export declare interface ChartDataPoint {
|
|
517
|
-
/** X-axis label */
|
|
518
|
-
label: string;
|
|
519
|
-
/** Numeric value */
|
|
520
|
-
value: number;
|
|
521
|
-
}
|
|
522
|
-
|
|
523
|
-
export declare interface ChartSeries {
|
|
524
|
-
/** Series name (shown in legend/tooltip) */
|
|
525
|
-
name: string;
|
|
526
|
-
/** Data points */
|
|
527
|
-
data: ChartDataPoint[];
|
|
528
|
-
/** Color override (defaults to token palette) */
|
|
529
|
-
color?: string;
|
|
530
|
-
}
|
|
531
|
-
|
|
532
196
|
export declare function CheckboxGroup({ label, children, direction, className }: CheckboxGroupProps): JSX.Element;
|
|
533
197
|
|
|
534
198
|
declare interface CheckboxGroupProps {
|
|
@@ -554,67 +218,7 @@ declare interface CheckboxProps {
|
|
|
554
218
|
|
|
555
219
|
export declare type CheckboxSize = "sm" | "md" | "lg";
|
|
556
220
|
|
|
557
|
-
export declare function
|
|
558
|
-
|
|
559
|
-
export declare namespace ChoiceCard {
|
|
560
|
-
var displayName: string;
|
|
561
|
-
}
|
|
562
|
-
|
|
563
|
-
export declare function ChoiceCardGroup({ value, onChange, layout, size, children, className, }: ChoiceCardGroupProps): JSX.Element;
|
|
564
|
-
|
|
565
|
-
export declare namespace ChoiceCardGroup {
|
|
566
|
-
var displayName: string;
|
|
567
|
-
}
|
|
568
|
-
|
|
569
|
-
export declare interface ChoiceCardGroupProps {
|
|
570
|
-
/** Currently selected value */
|
|
571
|
-
value?: string;
|
|
572
|
-
/** Change handler */
|
|
573
|
-
onChange?: (value: string) => void;
|
|
574
|
-
/** Layout of the group */
|
|
575
|
-
layout?: ChoiceCardLayout;
|
|
576
|
-
/** Size applied to all cards */
|
|
577
|
-
size?: ChoiceCardSize;
|
|
578
|
-
/** Cards */
|
|
579
|
-
children: default_2.ReactNode;
|
|
580
|
-
/** Additional class name */
|
|
581
|
-
className?: string;
|
|
582
|
-
}
|
|
583
|
-
|
|
584
|
-
declare type ChoiceCardLayout = "horizontal" | "vertical";
|
|
585
|
-
|
|
586
|
-
export declare interface ChoiceCardProps {
|
|
587
|
-
/** Unique value for this card */
|
|
588
|
-
value: string;
|
|
589
|
-
/** Card title */
|
|
590
|
-
title: string;
|
|
591
|
-
/** Subtitle / description */
|
|
592
|
-
description?: string;
|
|
593
|
-
/** Leading icon or image */
|
|
594
|
-
icon?: default_2.ReactNode;
|
|
595
|
-
/** Badge label (top-right) */
|
|
596
|
-
badge?: string;
|
|
597
|
-
/** Whether this card is selected */
|
|
598
|
-
selected?: boolean;
|
|
599
|
-
/** Disabled state */
|
|
600
|
-
disabled?: boolean;
|
|
601
|
-
/** Show arrow indicator (horizontal layout only) */
|
|
602
|
-
showArrow?: boolean;
|
|
603
|
-
/** Show checkmark instead of arrow on selection */
|
|
604
|
-
showCheck?: boolean;
|
|
605
|
-
/** Card size */
|
|
606
|
-
size?: ChoiceCardSize;
|
|
607
|
-
/** Layout direction */
|
|
608
|
-
layout?: ChoiceCardLayout;
|
|
609
|
-
/** Click handler */
|
|
610
|
-
onClick?: (value: string) => void;
|
|
611
|
-
/** Additional class name */
|
|
612
|
-
className?: string;
|
|
613
|
-
}
|
|
614
|
-
|
|
615
|
-
declare type ChoiceCardSize = "sm" | "md" | "lg";
|
|
616
|
-
|
|
617
|
-
export declare function ColorPicker({ value, onChange, label, presets, showInput, showFormats, size, disabled, }: ColorPickerProps): JSX.Element;
|
|
221
|
+
export declare function ColorPicker({ value, onChange, label, presets, showInput, showFormats, size, }: ColorPickerProps): JSX.Element;
|
|
618
222
|
|
|
619
223
|
export declare interface ColorPickerProps {
|
|
620
224
|
value: string;
|
|
@@ -624,7 +228,6 @@ export declare interface ColorPickerProps {
|
|
|
624
228
|
showInput?: boolean;
|
|
625
229
|
showFormats?: boolean;
|
|
626
230
|
size?: ColorPickerSize;
|
|
627
|
-
disabled?: boolean;
|
|
628
231
|
}
|
|
629
232
|
|
|
630
233
|
export declare type ColorPickerSize = "sm" | "md" | "lg";
|
|
@@ -709,73 +312,6 @@ export declare type DatePickerState = "default" | "error" | "success";
|
|
|
709
312
|
|
|
710
313
|
export declare type DatePickerVariant = "default" | "outlined" | "filled" | "ghost";
|
|
711
314
|
|
|
712
|
-
export declare interface DateRange {
|
|
713
|
-
from: Date | null;
|
|
714
|
-
to: Date | null;
|
|
715
|
-
}
|
|
716
|
-
|
|
717
|
-
export declare function DateRangePicker({ value, onChange, presets, placeholder, size, minDate, maxDate, clearable, disabled, className, }: DateRangePickerProps): JSX.Element;
|
|
718
|
-
|
|
719
|
-
export declare namespace DateRangePicker {
|
|
720
|
-
var displayName: string;
|
|
721
|
-
}
|
|
722
|
-
|
|
723
|
-
export declare interface DateRangePickerProps {
|
|
724
|
-
/** Current range */
|
|
725
|
-
value?: DateRange;
|
|
726
|
-
/** Change handler */
|
|
727
|
-
onChange?: (range: DateRange, preset?: DateRangePreset) => void;
|
|
728
|
-
/** Available presets (default: today, last7, last30, custom) */
|
|
729
|
-
presets?: DateRangePreset[];
|
|
730
|
-
/** Placeholder text */
|
|
731
|
-
placeholder?: string;
|
|
732
|
-
/** Component size */
|
|
733
|
-
size?: DateRangePickerSize;
|
|
734
|
-
/** Min selectable date */
|
|
735
|
-
minDate?: Date;
|
|
736
|
-
/** Max selectable date */
|
|
737
|
-
maxDate?: Date;
|
|
738
|
-
/** Show clear button */
|
|
739
|
-
clearable?: boolean;
|
|
740
|
-
/** Disabled state */
|
|
741
|
-
disabled?: boolean;
|
|
742
|
-
/** Additional class name */
|
|
743
|
-
className?: string;
|
|
744
|
-
}
|
|
745
|
-
|
|
746
|
-
declare type DateRangePickerSize = "sm" | "md" | "lg";
|
|
747
|
-
|
|
748
|
-
export declare type DateRangePreset = "today" | "yesterday" | "last7" | "last30" | "thisMonth" | "lastMonth" | "custom";
|
|
749
|
-
|
|
750
|
-
export declare function DateTimePicker({ value, onChange, format, showSeconds, placeholder, size, minDate, maxDate, disabled, className, }: DateTimePickerProps): JSX.Element;
|
|
751
|
-
|
|
752
|
-
export declare namespace DateTimePicker {
|
|
753
|
-
var displayName: string;
|
|
754
|
-
}
|
|
755
|
-
|
|
756
|
-
export declare interface DateTimePickerProps {
|
|
757
|
-
/** Combined date+time value */
|
|
758
|
-
value?: Date;
|
|
759
|
-
/** Change handler */
|
|
760
|
-
onChange?: (date: Date) => void;
|
|
761
|
-
/** Time format */
|
|
762
|
-
format?: TimePickerFormat;
|
|
763
|
-
/** Show seconds */
|
|
764
|
-
showSeconds?: boolean;
|
|
765
|
-
/** Placeholder */
|
|
766
|
-
placeholder?: string;
|
|
767
|
-
/** Component size */
|
|
768
|
-
size?: TimePickerSize;
|
|
769
|
-
/** Min date */
|
|
770
|
-
minDate?: Date;
|
|
771
|
-
/** Max date */
|
|
772
|
-
maxDate?: Date;
|
|
773
|
-
/** Disabled state */
|
|
774
|
-
disabled?: boolean;
|
|
775
|
-
/** Additional class name */
|
|
776
|
-
className?: string;
|
|
777
|
-
}
|
|
778
|
-
|
|
779
315
|
export declare function Divider({ label, orientation, dashed, spacing, className, }: DividerProps): JSX.Element;
|
|
780
316
|
|
|
781
317
|
export declare namespace Divider {
|
|
@@ -794,35 +330,6 @@ export declare interface DividerProps {
|
|
|
794
330
|
|
|
795
331
|
export declare type DividerSpacing = "sm" | "md" | "lg";
|
|
796
332
|
|
|
797
|
-
export declare function DonutChart({ data, size, innerRatio, centerLabel, centerValue, showLegend, showTooltip, className, }: DonutChartProps): JSX.Element | null;
|
|
798
|
-
|
|
799
|
-
export declare namespace DonutChart {
|
|
800
|
-
var displayName: string;
|
|
801
|
-
}
|
|
802
|
-
|
|
803
|
-
export declare interface DonutChartProps {
|
|
804
|
-
/** Data segments */
|
|
805
|
-
data: {
|
|
806
|
-
label: string;
|
|
807
|
-
value: number;
|
|
808
|
-
color?: string;
|
|
809
|
-
}[];
|
|
810
|
-
/** Outer radius */
|
|
811
|
-
size?: number;
|
|
812
|
-
/** Inner radius ratio (0=pie, 0.6=donut) */
|
|
813
|
-
innerRatio?: number;
|
|
814
|
-
/** Center label */
|
|
815
|
-
centerLabel?: string;
|
|
816
|
-
/** Center value (overrides auto-sum) */
|
|
817
|
-
centerValue?: string;
|
|
818
|
-
/** Show legend */
|
|
819
|
-
showLegend?: boolean;
|
|
820
|
-
/** Show tooltip */
|
|
821
|
-
showTooltip?: boolean;
|
|
822
|
-
/** Additional class name */
|
|
823
|
-
className?: string;
|
|
824
|
-
}
|
|
825
|
-
|
|
826
333
|
export declare function Drawer({ open, onClose, title, children, side, size, footer, className, }: DrawerProps): JSX.Element | null;
|
|
827
334
|
|
|
828
335
|
export declare namespace Drawer {
|
|
@@ -928,7 +435,7 @@ declare interface DSInputProps extends Omit<default_2.InputHTMLAttributes<HTMLIn
|
|
|
928
435
|
helperText?: string;
|
|
929
436
|
errorMessage?: string;
|
|
930
437
|
successMessage?: string;
|
|
931
|
-
|
|
438
|
+
inputSize?: InputSize;
|
|
932
439
|
variant?: InputVariant;
|
|
933
440
|
state?: InputState;
|
|
934
441
|
leftIcon?: default_2.ReactNode;
|
|
@@ -940,8 +447,6 @@ declare interface DSInputProps extends Omit<default_2.InputHTMLAttributes<HTMLIn
|
|
|
940
447
|
loading?: boolean;
|
|
941
448
|
fullWidth?: boolean;
|
|
942
449
|
required?: boolean;
|
|
943
|
-
/** Show character count below input (requires maxLength) */
|
|
944
|
-
showCount?: boolean;
|
|
945
450
|
onClear?: () => void;
|
|
946
451
|
}
|
|
947
452
|
export { DSInputProps }
|
|
@@ -951,7 +456,7 @@ declare function DSRadio({ value, label, description, disabled: localDisabled, s
|
|
|
951
456
|
export { DSRadio }
|
|
952
457
|
export { DSRadio as Radio }
|
|
953
458
|
|
|
954
|
-
declare function DSTable<T extends Record<string, any>>({ columns, data, size, striped, hoverable, bordered, selectable, selectedRows: controlledSelected, onSelectionChange, loading,
|
|
459
|
+
declare function DSTable<T extends Record<string, any>>({ columns, data, size, striped, hoverable, bordered, selectable, selectedRows: controlledSelected, onSelectionChange, loading, emptyMessage, stickyHeader, className, }: TableProps<T>): JSX.Element;
|
|
955
460
|
export { DSTable }
|
|
956
461
|
export { DSTable as Table }
|
|
957
462
|
|
|
@@ -964,7 +469,7 @@ declare interface DSTextareaProps extends Omit<default_2.TextareaHTMLAttributes<
|
|
|
964
469
|
helperText?: string;
|
|
965
470
|
errorMessage?: string;
|
|
966
471
|
successMessage?: string;
|
|
967
|
-
|
|
472
|
+
inputSize?: InputSize;
|
|
968
473
|
variant?: InputVariant;
|
|
969
474
|
state?: InputState;
|
|
970
475
|
showCharCount?: boolean;
|
|
@@ -996,75 +501,6 @@ export declare interface EmptyStateProps {
|
|
|
996
501
|
|
|
997
502
|
export declare type EmptyStateSize = "sm" | "md" | "lg";
|
|
998
503
|
|
|
999
|
-
declare interface ErrorBoundaryState {
|
|
1000
|
-
hasError: boolean;
|
|
1001
|
-
error?: Error;
|
|
1002
|
-
}
|
|
1003
|
-
|
|
1004
|
-
export declare type FeaturePageLayout = "list" | "detail" | "settings" | "wizard" | "dashboard" | "form" | "report";
|
|
1005
|
-
|
|
1006
|
-
export declare function FeaturePageScaffold(props: FeaturePageScaffoldProps): JSX.Element;
|
|
1007
|
-
|
|
1008
|
-
export declare namespace FeaturePageScaffold {
|
|
1009
|
-
var displayName: string;
|
|
1010
|
-
}
|
|
1011
|
-
|
|
1012
|
-
export declare interface FeaturePageScaffoldProps {
|
|
1013
|
-
/**
|
|
1014
|
-
* Layout variant — determines the region structure.
|
|
1015
|
-
* @default "list"
|
|
1016
|
-
*/
|
|
1017
|
-
layout?: FeaturePageLayout;
|
|
1018
|
-
/** Page header — use <PageHeader> component */
|
|
1019
|
-
header?: default_2.ReactNode;
|
|
1020
|
-
/** Page-level alert / announcement banner */
|
|
1021
|
-
banner?: default_2.ReactNode;
|
|
1022
|
-
/** Stat cards row — shown above filters in list/dashboard layouts */
|
|
1023
|
-
stats?: default_2.ReactNode;
|
|
1024
|
-
/** Filter bar — shown between stats and content in list layout */
|
|
1025
|
-
filters?: default_2.ReactNode;
|
|
1026
|
-
/** Main content area — table, grid, cards */
|
|
1027
|
-
content?: default_2.ReactNode;
|
|
1028
|
-
/** Footer — pagination, bulk action bar */
|
|
1029
|
-
footer?: default_2.ReactNode;
|
|
1030
|
-
/** Main content column (left, wider) — detail layout */
|
|
1031
|
-
main?: default_2.ReactNode;
|
|
1032
|
-
/** Side panel (right, narrower) — detail layout */
|
|
1033
|
-
aside?: default_2.ReactNode;
|
|
1034
|
-
/** Aside width class — default: "w-80" */
|
|
1035
|
-
asideWidth?: string;
|
|
1036
|
-
/** Whether aside appears on the left instead of right */
|
|
1037
|
-
asideLeft?: boolean;
|
|
1038
|
-
/** Sections list — settings layout (array of ReactNode) */
|
|
1039
|
-
sections?: default_2.ReactNode;
|
|
1040
|
-
/** Stepper — wizard layout */
|
|
1041
|
-
stepper?: default_2.ReactNode;
|
|
1042
|
-
/** Form body — wizard/form layouts */
|
|
1043
|
-
form?: default_2.ReactNode;
|
|
1044
|
-
/** Sticky action bar — wizard/form layouts */
|
|
1045
|
-
actions?: default_2.ReactNode;
|
|
1046
|
-
/** Primary chart area — dashboard */
|
|
1047
|
-
primaryChart?: default_2.ReactNode;
|
|
1048
|
-
/** Secondary chart(s) — dashboard (2-column) */
|
|
1049
|
-
secondaryCharts?: default_2.ReactNode;
|
|
1050
|
-
/** Quick stats / KPI cards */
|
|
1051
|
-
kpis?: default_2.ReactNode;
|
|
1052
|
-
/** Date range picker + period selector */
|
|
1053
|
-
dateRange?: default_2.ReactNode;
|
|
1054
|
-
/** Chart section */
|
|
1055
|
-
charts?: default_2.ReactNode;
|
|
1056
|
-
/** Data table section */
|
|
1057
|
-
table?: default_2.ReactNode;
|
|
1058
|
-
/** Outer max width (e.g. "max-w-7xl") — defaults to full width */
|
|
1059
|
-
maxWidth?: string;
|
|
1060
|
-
/** Page padding — default "p-6" desktop, "p-4" mobile */
|
|
1061
|
-
padding?: string;
|
|
1062
|
-
/** Gap between regions — default "gap-6" */
|
|
1063
|
-
gap?: string;
|
|
1064
|
-
/** Additional className on root element */
|
|
1065
|
-
className?: string;
|
|
1066
|
-
}
|
|
1067
|
-
|
|
1068
504
|
export declare function FileUpload({ accept, maxSize, multiple, disabled, variant, label, description, value, onChange, onUpload, onRemove, }: FileUploadProps): JSX.Element;
|
|
1069
505
|
|
|
1070
506
|
export declare interface FileUploadProps {
|
|
@@ -1087,46 +523,6 @@ export declare interface FileUploadProps {
|
|
|
1087
523
|
|
|
1088
524
|
export declare type FileUploadVariant = "dropzone" | "button" | "avatar";
|
|
1089
525
|
|
|
1090
|
-
export declare function FilterBar({ filters, searchPlaceholder, showSearch, value, onFilterChange, className, }: FilterBarProps): JSX.Element;
|
|
1091
|
-
|
|
1092
|
-
export declare interface FilterBarProps {
|
|
1093
|
-
/** Filter definitions */
|
|
1094
|
-
filters?: FilterConfig[];
|
|
1095
|
-
/** Search placeholder */
|
|
1096
|
-
searchPlaceholder?: string;
|
|
1097
|
-
/** Show search field */
|
|
1098
|
-
showSearch?: boolean;
|
|
1099
|
-
/** Controlled value */
|
|
1100
|
-
value?: FilterBarValue;
|
|
1101
|
-
/** Callback when any filter/search changes */
|
|
1102
|
-
onFilterChange?: (value: FilterBarValue) => void;
|
|
1103
|
-
/** Additional className */
|
|
1104
|
-
className?: string;
|
|
1105
|
-
}
|
|
1106
|
-
|
|
1107
|
-
export declare interface FilterBarValue {
|
|
1108
|
-
search?: string;
|
|
1109
|
-
filters: Record<string, FilterValue>;
|
|
1110
|
-
}
|
|
1111
|
-
|
|
1112
|
-
export declare interface FilterConfig {
|
|
1113
|
-
/** Unique key for this filter */
|
|
1114
|
-
key: string;
|
|
1115
|
-
/** Display label for the filter button */
|
|
1116
|
-
label: string;
|
|
1117
|
-
/** single = one value at a time, multi = multiple values */
|
|
1118
|
-
type: "single" | "multi";
|
|
1119
|
-
/** Available options */
|
|
1120
|
-
options: FilterOption[];
|
|
1121
|
-
}
|
|
1122
|
-
|
|
1123
|
-
export declare interface FilterOption {
|
|
1124
|
-
label: string;
|
|
1125
|
-
value: string;
|
|
1126
|
-
}
|
|
1127
|
-
|
|
1128
|
-
export declare type FilterValue = string | string[] | [Date | null, Date | null] | null;
|
|
1129
|
-
|
|
1130
526
|
export declare function FormError({ message, className }: FormErrorProps): JSX.Element | null;
|
|
1131
527
|
|
|
1132
528
|
export declare interface FormErrorProps {
|
|
@@ -1134,15 +530,13 @@ export declare interface FormErrorProps {
|
|
|
1134
530
|
className?: string;
|
|
1135
531
|
}
|
|
1136
532
|
|
|
1137
|
-
export declare function FormField({ name, label, required, error,
|
|
533
|
+
export declare function FormField({ name, label, required, error, helperText, children, className, }: FormFieldProps): JSX.Element;
|
|
1138
534
|
|
|
1139
535
|
declare interface FormFieldContextValue {
|
|
1140
536
|
name: string;
|
|
1141
537
|
error?: string;
|
|
1142
538
|
}
|
|
1143
539
|
|
|
1144
|
-
export declare type FormFieldLayout = "vertical" | "horizontal";
|
|
1145
|
-
|
|
1146
540
|
export declare interface FormFieldProps {
|
|
1147
541
|
/** Field name — used for htmlFor on label */
|
|
1148
542
|
name: string;
|
|
@@ -1152,14 +546,8 @@ export declare interface FormFieldProps {
|
|
|
1152
546
|
required?: boolean;
|
|
1153
547
|
/** Error message to display */
|
|
1154
548
|
error?: string;
|
|
1155
|
-
/** Success message to display (overrides helperText when present) */
|
|
1156
|
-
successMessage?: string;
|
|
1157
549
|
/** Helper/description text below the field */
|
|
1158
550
|
helperText?: string;
|
|
1159
|
-
/** Layout direction: vertical (default) or horizontal (label left, input right) */
|
|
1160
|
-
layout?: FormFieldLayout;
|
|
1161
|
-
/** Label width when layout="horizontal" (default: "160px") */
|
|
1162
|
-
labelWidth?: string;
|
|
1163
551
|
/** Field content (input, select, etc.) */
|
|
1164
552
|
children: default_2.ReactNode;
|
|
1165
553
|
/** Additional className */
|
|
@@ -1182,23 +570,6 @@ export declare interface FormLabelProps {
|
|
|
1182
570
|
className?: string;
|
|
1183
571
|
}
|
|
1184
572
|
|
|
1185
|
-
export declare function FormSuccess({ message, className }: FormSuccessProps): JSX.Element | null;
|
|
1186
|
-
|
|
1187
|
-
export declare interface FormSuccessProps {
|
|
1188
|
-
message?: string;
|
|
1189
|
-
className?: string;
|
|
1190
|
-
}
|
|
1191
|
-
|
|
1192
|
-
export declare interface GalleryImage {
|
|
1193
|
-
id: string;
|
|
1194
|
-
src: string;
|
|
1195
|
-
alt?: string;
|
|
1196
|
-
name?: string;
|
|
1197
|
-
size?: string;
|
|
1198
|
-
/** Extra metadata */
|
|
1199
|
-
meta?: Record<string, string>;
|
|
1200
|
-
}
|
|
1201
|
-
|
|
1202
573
|
export declare const IconButton: default_2.ForwardRefExoticComponent<IconButtonProps & default_2.RefAttributes<HTMLButtonElement>>;
|
|
1203
574
|
|
|
1204
575
|
export declare interface IconButtonProps extends default_2.ButtonHTMLAttributes<HTMLButtonElement> {
|
|
@@ -1209,45 +580,6 @@ export declare interface IconButtonProps extends default_2.ButtonHTMLAttributes<
|
|
|
1209
580
|
"aria-label": string;
|
|
1210
581
|
}
|
|
1211
582
|
|
|
1212
|
-
export declare function ImageGallery({ images, selectable, selectedIds, onSelectChange, maxSelect, lightbox, uploadable, onUpload, onDelete, defaultLayout, columns, disabled, className, }: ImageGalleryProps): JSX.Element;
|
|
1213
|
-
|
|
1214
|
-
export declare namespace ImageGallery {
|
|
1215
|
-
var displayName: string;
|
|
1216
|
-
}
|
|
1217
|
-
|
|
1218
|
-
declare type ImageGalleryColumns = 2 | 3 | 4 | 5 | 6;
|
|
1219
|
-
|
|
1220
|
-
declare type ImageGalleryLayout = "grid" | "list";
|
|
1221
|
-
|
|
1222
|
-
export declare interface ImageGalleryProps {
|
|
1223
|
-
/** Images to display */
|
|
1224
|
-
images: GalleryImage[];
|
|
1225
|
-
/** Allow selecting images */
|
|
1226
|
-
selectable?: boolean;
|
|
1227
|
-
/** Currently selected image IDs */
|
|
1228
|
-
selectedIds?: string[];
|
|
1229
|
-
/** Selection change handler */
|
|
1230
|
-
onSelectChange?: (ids: string[]) => void;
|
|
1231
|
-
/** Max selectable images (default: unlimited) */
|
|
1232
|
-
maxSelect?: number;
|
|
1233
|
-
/** Show lightbox on click */
|
|
1234
|
-
lightbox?: boolean;
|
|
1235
|
-
/** Allow upload (calls onUpload) */
|
|
1236
|
-
uploadable?: boolean;
|
|
1237
|
-
/** Upload handler */
|
|
1238
|
-
onUpload?: (files: FileList) => void;
|
|
1239
|
-
/** Delete handler */
|
|
1240
|
-
onDelete?: (id: string) => void;
|
|
1241
|
-
/** Default layout */
|
|
1242
|
-
defaultLayout?: ImageGalleryLayout;
|
|
1243
|
-
/** Grid columns */
|
|
1244
|
-
columns?: ImageGalleryColumns;
|
|
1245
|
-
/** Disabled state */
|
|
1246
|
-
disabled?: boolean;
|
|
1247
|
-
/** Additional class name */
|
|
1248
|
-
className?: string;
|
|
1249
|
-
}
|
|
1250
|
-
|
|
1251
583
|
export declare function ImagePreview({ images, initialIndex }: ImagePreviewProps): JSX.Element;
|
|
1252
584
|
|
|
1253
585
|
export declare interface ImagePreviewItem {
|
|
@@ -1267,19 +599,6 @@ export declare type InputState = "default" | "error" | "success" | "warning";
|
|
|
1267
599
|
|
|
1268
600
|
export declare type InputVariant = "default" | "outlined" | "filled" | "ghost";
|
|
1269
601
|
|
|
1270
|
-
export declare function LineChart({ series, height, width, showXAxis, showYAxis, showGrid, showLegend, showTooltip, showDots, smooth, className, }: LineChartProps): JSX.Element | null;
|
|
1271
|
-
|
|
1272
|
-
export declare namespace LineChart {
|
|
1273
|
-
var displayName: string;
|
|
1274
|
-
}
|
|
1275
|
-
|
|
1276
|
-
export declare interface LineChartProps extends BaseChartProps {
|
|
1277
|
-
/** Show dots on data points */
|
|
1278
|
-
showDots?: boolean;
|
|
1279
|
-
/** Smooth curves (catmull-rom) */
|
|
1280
|
-
smooth?: boolean;
|
|
1281
|
-
}
|
|
1282
|
-
|
|
1283
602
|
export declare function Menu({ items, open, onClose, triggerRef, className }: MenuProps): default_2.ReactPortal | null;
|
|
1284
603
|
|
|
1285
604
|
export declare namespace Menu {
|
|
@@ -1320,31 +639,6 @@ export declare interface MenuProps {
|
|
|
1320
639
|
className?: string;
|
|
1321
640
|
}
|
|
1322
641
|
|
|
1323
|
-
export declare function MiniSparkline({ values, type, width, height, color, showValue, trend, className, }: MiniSparklineProps): JSX.Element | null;
|
|
1324
|
-
|
|
1325
|
-
export declare namespace MiniSparkline {
|
|
1326
|
-
var displayName: string;
|
|
1327
|
-
}
|
|
1328
|
-
|
|
1329
|
-
export declare interface MiniSparklineProps {
|
|
1330
|
-
/** Data values (no labels needed) */
|
|
1331
|
-
values: number[];
|
|
1332
|
-
/** Type */
|
|
1333
|
-
type?: "line" | "bar" | "area";
|
|
1334
|
-
/** Width */
|
|
1335
|
-
width?: number;
|
|
1336
|
-
/** Height */
|
|
1337
|
-
height?: number;
|
|
1338
|
-
/** Color */
|
|
1339
|
-
color?: string;
|
|
1340
|
-
/** Show last value as label */
|
|
1341
|
-
showValue?: boolean;
|
|
1342
|
-
/** Trend direction override (auto-computed if omitted) */
|
|
1343
|
-
trend?: "up" | "down" | "neutral";
|
|
1344
|
-
/** Additional class name */
|
|
1345
|
-
className?: string;
|
|
1346
|
-
}
|
|
1347
|
-
|
|
1348
642
|
export declare function Modal({ open, onClose, title, description, size, children, footer, closeOnOverlay, showCloseButton, className, }: ModalProps): JSX.Element | null;
|
|
1349
643
|
|
|
1350
644
|
declare interface ModalProps {
|
|
@@ -1362,47 +656,6 @@ declare interface ModalProps {
|
|
|
1362
656
|
|
|
1363
657
|
export declare type ModalSize = "sm" | "md" | "lg" | "xl" | "full";
|
|
1364
658
|
|
|
1365
|
-
/**
|
|
1366
|
-
* A single navigation item in the sidebar.
|
|
1367
|
-
* Supports static badge, async badge, and permission gating.
|
|
1368
|
-
*/
|
|
1369
|
-
export declare interface NavItem {
|
|
1370
|
-
/** Unique identifier — used for active state matching */
|
|
1371
|
-
id: string;
|
|
1372
|
-
/** Display label */
|
|
1373
|
-
label: string;
|
|
1374
|
-
/** Leading icon (ReactNode — use lucide-react icons) */
|
|
1375
|
-
icon?: default_2.ReactNode;
|
|
1376
|
-
/** Navigation target — href or route path */
|
|
1377
|
-
href?: string;
|
|
1378
|
-
/** Badge count or label — static string/number or async resolver */
|
|
1379
|
-
badge?: string | number | (() => Promise<number>);
|
|
1380
|
-
/** Child items for nested navigation (one level only) */
|
|
1381
|
-
children?: NavItem[];
|
|
1382
|
-
/** Permission key required to show this item — matched against ShellUser.permissions */
|
|
1383
|
-
permission?: string;
|
|
1384
|
-
/** Disable click and dim the item */
|
|
1385
|
-
disabled?: boolean;
|
|
1386
|
-
}
|
|
1387
|
-
|
|
1388
|
-
/**
|
|
1389
|
-
* A resolver function that returns navigation groups for a given user.
|
|
1390
|
-
* Used by AppShell to support permission-filtered, async navigation.
|
|
1391
|
-
*
|
|
1392
|
-
* @example
|
|
1393
|
-
* const navResolver: NavResolver = async (user) => {
|
|
1394
|
-
* const counts = await fetchBadgeCounts(user.id);
|
|
1395
|
-
* return buildNavGroups(user.permissions, counts);
|
|
1396
|
-
* };
|
|
1397
|
-
*/
|
|
1398
|
-
export declare type NavResolver = (user: ShellUser) => ShellSidebarGroup[] | Promise<ShellSidebarGroup[]>;
|
|
1399
|
-
|
|
1400
|
-
export declare interface NavState {
|
|
1401
|
-
groups: ShellSidebarGroup[];
|
|
1402
|
-
loading: boolean;
|
|
1403
|
-
error: string | null;
|
|
1404
|
-
}
|
|
1405
|
-
|
|
1406
659
|
declare function Notification_2({ type, title, message, closable, onClose, action, avatar, time, read, }: NotificationProps): JSX.Element;
|
|
1407
660
|
export { Notification_2 as Notification }
|
|
1408
661
|
|
|
@@ -1465,12 +718,6 @@ export declare interface NumberInputProps {
|
|
|
1465
718
|
|
|
1466
719
|
export declare type NumberInputSize = "sm" | "md" | "lg";
|
|
1467
720
|
|
|
1468
|
-
/**
|
|
1469
|
-
* Oc2plus brand config — Sky-500 primary (same as Sellsuki default).
|
|
1470
|
-
* logo / logoFull: inject from product repo (Brand=oc2plus SVG files).
|
|
1471
|
-
*/
|
|
1472
|
-
export declare const oc2plusBrandConfig: ProductBrandConfig;
|
|
1473
|
-
|
|
1474
721
|
export declare function OTPInput({ length, value, onChange, onComplete, disabled, error, size, label, masked, className, }: OTPInputProps): JSX.Element;
|
|
1475
722
|
|
|
1476
723
|
export declare interface OTPInputProps {
|
|
@@ -1493,33 +740,8 @@ export declare interface OTPInputProps {
|
|
|
1493
740
|
|
|
1494
741
|
export declare type OTPInputSize = "sm" | "md" | "lg";
|
|
1495
742
|
|
|
1496
|
-
export declare function PageHeader({ title, subtitle, breadcrumb, actions, tabs, sticky, className, }: PageHeaderProps): JSX.Element;
|
|
1497
|
-
|
|
1498
|
-
export declare interface PageHeaderProps {
|
|
1499
|
-
/** Main page title (required) */
|
|
1500
|
-
title: string;
|
|
1501
|
-
/** Optional subtitle below the title */
|
|
1502
|
-
subtitle?: string;
|
|
1503
|
-
/** Breadcrumb content — pass a <Breadcrumb /> component */
|
|
1504
|
-
breadcrumb?: default_2.ReactNode;
|
|
1505
|
-
/** Action buttons — right-aligned (pass DSButton components) */
|
|
1506
|
-
actions?: default_2.ReactNode;
|
|
1507
|
-
/** Tab navigation below the header — pass a <Tabs /> component */
|
|
1508
|
-
tabs?: default_2.ReactNode;
|
|
1509
|
-
/** Stick to top of viewport while scrolling */
|
|
1510
|
-
sticky?: boolean;
|
|
1511
|
-
/** Additional className */
|
|
1512
|
-
className?: string;
|
|
1513
|
-
}
|
|
1514
|
-
|
|
1515
743
|
export declare function Pagination({ currentPage, totalPages, onPageChange, siblingCount, showFirstLast, showPrevNext, showPageSize, pageSizeOptions, pageSize, onPageSizeChange, totalItems, size, variant, disabled, showPageInfo, showItemsInfo, prevLabel, nextLabel, }: PaginationProps): JSX.Element;
|
|
1516
744
|
|
|
1517
|
-
export declare interface PaginationMeta {
|
|
1518
|
-
page: number;
|
|
1519
|
-
pageSize: number;
|
|
1520
|
-
totalCount: number;
|
|
1521
|
-
}
|
|
1522
|
-
|
|
1523
745
|
export declare interface PaginationProps {
|
|
1524
746
|
/** Current active page (1-indexed) */
|
|
1525
747
|
currentPage: number;
|
|
@@ -1563,12 +785,6 @@ export declare type PaginationSize = "sm" | "md" | "lg";
|
|
|
1563
785
|
|
|
1564
786
|
export declare type PaginationVariant = "default" | "outlined" | "filled" | "minimal";
|
|
1565
787
|
|
|
1566
|
-
/**
|
|
1567
|
-
* Patona brand config — Aerospace Orange primary (#EC5E2A).
|
|
1568
|
-
* logo / logoFull: inject from product repo (Brand=patona SVG files).
|
|
1569
|
-
*/
|
|
1570
|
-
export declare const patonaBrandConfig: ProductBrandConfig;
|
|
1571
|
-
|
|
1572
788
|
export declare function Popover({ trigger, children, placement, title, open: controlled, onOpenChange, }: PopoverProps): JSX.Element;
|
|
1573
789
|
|
|
1574
790
|
export declare type PopoverPlacement = "top" | "bottom" | "left" | "right";
|
|
@@ -1582,57 +798,6 @@ export declare interface PopoverProps {
|
|
|
1582
798
|
onOpenChange?: (v: boolean) => void;
|
|
1583
799
|
}
|
|
1584
800
|
|
|
1585
|
-
/**
|
|
1586
|
-
* Static brand identity config for a product.
|
|
1587
|
-
*
|
|
1588
|
-
* This is the config that ships in the npm package (or product repo).
|
|
1589
|
-
* It does NOT include navigation — nav lives in the product repo (dynamic).
|
|
1590
|
-
*
|
|
1591
|
-
* @example
|
|
1592
|
-
* const sellsukiBrandConfig: ProductBrandConfig = {
|
|
1593
|
-
* product: "sellsuki",
|
|
1594
|
-
* brand: {
|
|
1595
|
-
* name: "Sellsuki",
|
|
1596
|
-
* logo: <SellsukiLogo />,
|
|
1597
|
-
* theme: "sellsuki",
|
|
1598
|
-
* },
|
|
1599
|
-
* };
|
|
1600
|
-
*/
|
|
1601
|
-
export declare interface ProductBrandConfig {
|
|
1602
|
-
/** Product identifier — sets data-product attribute on shell root */
|
|
1603
|
-
product: ProductId;
|
|
1604
|
-
/** Brand identity */
|
|
1605
|
-
brand: {
|
|
1606
|
-
/** Brand/product name shown in sidebar header and nav title */
|
|
1607
|
-
name: string;
|
|
1608
|
-
/**
|
|
1609
|
-
* Icon-only logo (40×40px SVG/ReactNode or image URL string).
|
|
1610
|
-
* Used in collapsed sidebar state.
|
|
1611
|
-
* Falls back to name initial when not provided.
|
|
1612
|
-
*/
|
|
1613
|
-
logo?: default_2.ReactNode;
|
|
1614
|
-
/**
|
|
1615
|
-
* Icon+Name logo (variable width × 40px height SVG/ReactNode).
|
|
1616
|
-
* Used in expanded sidebar and TopNavbar.
|
|
1617
|
-
* When provided, the brand name text is NOT rendered separately
|
|
1618
|
-
* (it is baked into the SVG).
|
|
1619
|
-
* Falls back to `logo` + name text when not provided.
|
|
1620
|
-
*/
|
|
1621
|
-
logoFull?: default_2.ReactNode;
|
|
1622
|
-
/** CSS theme class or data-product value — used for token overrides */
|
|
1623
|
-
theme?: string;
|
|
1624
|
-
/** Optional workspace/shop switcher rendered after brand logo in TopNavbar */
|
|
1625
|
-
workspaceSwitcher?: default_2.ReactNode;
|
|
1626
|
-
};
|
|
1627
|
-
/** Optional shell layout preferences */
|
|
1628
|
-
shell?: ShellPrefs;
|
|
1629
|
-
}
|
|
1630
|
-
|
|
1631
|
-
/**
|
|
1632
|
-
* Product identifier — all current and planned Sellsuki products.
|
|
1633
|
-
*/
|
|
1634
|
-
export declare type ProductId = "sellsuki" | "patona" | "sukispace" | "shipmunk" | "akita" | "oc2plus" | (string & {});
|
|
1635
|
-
|
|
1636
801
|
export declare function ProgressBar({ value, max, size, color, label, showValue, indeterminate, className, }: ProgressBarProps): JSX.Element;
|
|
1637
802
|
|
|
1638
803
|
export declare namespace ProgressBar {
|
|
@@ -1652,50 +817,6 @@ export declare interface ProgressBarProps {
|
|
|
1652
817
|
|
|
1653
818
|
export declare type ProgressBarSize = "sm" | "md" | "lg";
|
|
1654
819
|
|
|
1655
|
-
export declare function RadioCard({ options, value, onChange, columns, layout, size, name, className, }: RadioCardProps): JSX.Element;
|
|
1656
|
-
|
|
1657
|
-
export declare namespace RadioCard {
|
|
1658
|
-
var displayName: string;
|
|
1659
|
-
}
|
|
1660
|
-
|
|
1661
|
-
declare type RadioCardLayout = "grid" | "list";
|
|
1662
|
-
|
|
1663
|
-
export declare interface RadioCardOption {
|
|
1664
|
-
/** Unique value */
|
|
1665
|
-
value: string;
|
|
1666
|
-
/** Card title */
|
|
1667
|
-
title: string;
|
|
1668
|
-
/** Description text */
|
|
1669
|
-
description?: string;
|
|
1670
|
-
/** Icon, logo, or image */
|
|
1671
|
-
icon?: default_2.ReactNode;
|
|
1672
|
-
/** Badge label */
|
|
1673
|
-
badge?: string;
|
|
1674
|
-
/** Disabled state */
|
|
1675
|
-
disabled?: boolean;
|
|
1676
|
-
}
|
|
1677
|
-
|
|
1678
|
-
export declare interface RadioCardProps {
|
|
1679
|
-
/** Options to render */
|
|
1680
|
-
options: RadioCardOption[];
|
|
1681
|
-
/** Currently selected value */
|
|
1682
|
-
value?: string;
|
|
1683
|
-
/** Change handler */
|
|
1684
|
-
onChange?: (value: string) => void;
|
|
1685
|
-
/** Grid columns */
|
|
1686
|
-
columns?: 1 | 2 | 3 | 4;
|
|
1687
|
-
/** Layout */
|
|
1688
|
-
layout?: RadioCardLayout;
|
|
1689
|
-
/** Card size */
|
|
1690
|
-
size?: RadioCardSize;
|
|
1691
|
-
/** Name for the radio group (for form semantics) */
|
|
1692
|
-
name?: string;
|
|
1693
|
-
/** Additional class name */
|
|
1694
|
-
className?: string;
|
|
1695
|
-
}
|
|
1696
|
-
|
|
1697
|
-
declare type RadioCardSize = "sm" | "md" | "lg";
|
|
1698
|
-
|
|
1699
820
|
export declare function RadioGroup({ name, value: controlled, defaultValue, onChange, label, size, disabled, direction, children, error, className, }: RadioGroupProps): JSX.Element;
|
|
1700
821
|
|
|
1701
822
|
declare interface RadioGroupProps {
|
|
@@ -1741,117 +862,6 @@ export declare interface RatingProps {
|
|
|
1741
862
|
|
|
1742
863
|
export declare type RatingSize = "sm" | "md" | "lg";
|
|
1743
864
|
|
|
1744
|
-
export declare interface RepeatableFieldColumn {
|
|
1745
|
-
/** Column key matching values[key] */
|
|
1746
|
-
key: string;
|
|
1747
|
-
/** Column header label */
|
|
1748
|
-
label: string;
|
|
1749
|
-
/** Render function — receive current value + onChange */
|
|
1750
|
-
render: (value: unknown, onChange: (val: unknown) => void, rowIndex: number) => default_2.ReactNode;
|
|
1751
|
-
/** Column width (CSS, e.g. "200px", "1fr") */
|
|
1752
|
-
width?: string;
|
|
1753
|
-
}
|
|
1754
|
-
|
|
1755
|
-
export declare function RepeatableFieldList({ columns, value, onChange, defaultRow, minRows, maxRows, addLabel, sortable, disabled, className, }: RepeatableFieldListProps): JSX.Element;
|
|
1756
|
-
|
|
1757
|
-
export declare namespace RepeatableFieldList {
|
|
1758
|
-
var displayName: string;
|
|
1759
|
-
}
|
|
1760
|
-
|
|
1761
|
-
export declare interface RepeatableFieldListProps {
|
|
1762
|
-
/** Column definitions */
|
|
1763
|
-
columns: RepeatableFieldColumn[];
|
|
1764
|
-
/** Current rows */
|
|
1765
|
-
value?: RepeatableFieldRow[];
|
|
1766
|
-
/** Change handler */
|
|
1767
|
-
onChange?: (rows: RepeatableFieldRow[]) => void;
|
|
1768
|
-
/** Default values for a new row */
|
|
1769
|
-
defaultRow?: Record<string, unknown>;
|
|
1770
|
-
/** Minimum number of rows (shows disabled remove when at min) */
|
|
1771
|
-
minRows?: number;
|
|
1772
|
-
/** Maximum number of rows (hides add button when at max) */
|
|
1773
|
-
maxRows?: number;
|
|
1774
|
-
/** Add button label */
|
|
1775
|
-
addLabel?: string;
|
|
1776
|
-
/** Whether rows can be reordered */
|
|
1777
|
-
sortable?: boolean;
|
|
1778
|
-
/** Disabled state */
|
|
1779
|
-
disabled?: boolean;
|
|
1780
|
-
/** Additional class name */
|
|
1781
|
-
className?: string;
|
|
1782
|
-
}
|
|
1783
|
-
|
|
1784
|
-
export declare interface RepeatableFieldRow {
|
|
1785
|
-
/** Internal unique ID */
|
|
1786
|
-
id: string;
|
|
1787
|
-
/** Row data values keyed by field name */
|
|
1788
|
-
values: Record<string, unknown>;
|
|
1789
|
-
}
|
|
1790
|
-
|
|
1791
|
-
export declare function RichTextEditor({ value, onChange, placeholder, minHeight, maxHeight, toolbar, fullscreen: allowFullscreen, disabled, readOnly, size, className, }: RichTextEditorProps): JSX.Element;
|
|
1792
|
-
|
|
1793
|
-
export declare namespace RichTextEditor {
|
|
1794
|
-
var displayName: string;
|
|
1795
|
-
}
|
|
1796
|
-
|
|
1797
|
-
export declare interface RichTextEditorProps {
|
|
1798
|
-
/** HTML content value */
|
|
1799
|
-
value?: string;
|
|
1800
|
-
/** Change handler (receives HTML string) */
|
|
1801
|
-
onChange?: (html: string) => void;
|
|
1802
|
-
/** Placeholder text */
|
|
1803
|
-
placeholder?: string;
|
|
1804
|
-
/** Min height (px) */
|
|
1805
|
-
minHeight?: number;
|
|
1806
|
-
/** Max height (px, scroll beyond) */
|
|
1807
|
-
maxHeight?: number;
|
|
1808
|
-
/** Toolbar groups to show */
|
|
1809
|
-
toolbar?: ("format" | "list" | "align" | "link" | "block" | "history")[];
|
|
1810
|
-
/** Allow fullscreen toggle */
|
|
1811
|
-
fullscreen?: boolean;
|
|
1812
|
-
/** Disabled state */
|
|
1813
|
-
disabled?: boolean;
|
|
1814
|
-
/** Read-only state */
|
|
1815
|
-
readOnly?: boolean;
|
|
1816
|
-
/** Component size */
|
|
1817
|
-
size?: RichTextEditorSize;
|
|
1818
|
-
/** Additional class name */
|
|
1819
|
-
className?: string;
|
|
1820
|
-
}
|
|
1821
|
-
|
|
1822
|
-
declare type RichTextEditorSize = "sm" | "md" | "lg";
|
|
1823
|
-
|
|
1824
|
-
/**
|
|
1825
|
-
* KPI stat card row for dashboard layout.
|
|
1826
|
-
* Wraps children in an equal-width responsive grid.
|
|
1827
|
-
*/
|
|
1828
|
-
export declare function ScaffoldKPIRow({ children, className }: {
|
|
1829
|
-
children: default_2.ReactNode;
|
|
1830
|
-
className?: string;
|
|
1831
|
-
}): JSX.Element;
|
|
1832
|
-
|
|
1833
|
-
export declare namespace ScaffoldKPIRow {
|
|
1834
|
-
var displayName: string;
|
|
1835
|
-
}
|
|
1836
|
-
|
|
1837
|
-
export declare function ScaffoldSection({ title, description, action, children, className }: ScaffoldSectionProps): JSX.Element;
|
|
1838
|
-
|
|
1839
|
-
export declare namespace ScaffoldSection {
|
|
1840
|
-
var displayName: string;
|
|
1841
|
-
}
|
|
1842
|
-
|
|
1843
|
-
/**
|
|
1844
|
-
* Scaffold section for settings layout.
|
|
1845
|
-
* Provides consistent heading + description + content region.
|
|
1846
|
-
*/
|
|
1847
|
-
export declare interface ScaffoldSectionProps {
|
|
1848
|
-
title: string;
|
|
1849
|
-
description?: string;
|
|
1850
|
-
action?: default_2.ReactNode;
|
|
1851
|
-
children: default_2.ReactNode;
|
|
1852
|
-
className?: string;
|
|
1853
|
-
}
|
|
1854
|
-
|
|
1855
865
|
export declare function SearchField({ value: controlled, onChange, onSearch, placeholder, size, variant, loading, suggestions, onSuggestionSelect, clearable, disabled, autoFocus, debounce, className, }: SearchFieldProps): JSX.Element;
|
|
1856
866
|
|
|
1857
867
|
declare interface SearchFieldProps {
|
|
@@ -1882,125 +892,17 @@ declare interface SearchSuggestion {
|
|
|
1882
892
|
|
|
1883
893
|
export declare type SearchVariant = "default" | "outlined" | "filled";
|
|
1884
894
|
|
|
1885
|
-
|
|
1886
|
-
* Sellsuki brand config — Sky-500 primary, DB HeaventRounded font.
|
|
1887
|
-
*
|
|
1888
|
-
* To add logos, provide SVG components:
|
|
1889
|
-
* ```tsx
|
|
1890
|
-
* import SellsukiIcon from "@/assets/logos/sellsuki-icon.svg?react";
|
|
1891
|
-
* import SellsukiFull from "@/assets/logos/sellsuki-full.svg?react";
|
|
1892
|
-
*
|
|
1893
|
-
* const config = {
|
|
1894
|
-
* ...sellsukiBrandConfig,
|
|
1895
|
-
* brand: { ...sellsukiBrandConfig.brand, logo: <SellsukiIcon />, logoFull: <SellsukiFull /> },
|
|
1896
|
-
* };
|
|
1897
|
-
* ```
|
|
1898
|
-
*/
|
|
1899
|
-
export declare const sellsukiBrandConfig: ProductBrandConfig;
|
|
1900
|
-
|
|
1901
|
-
/**
|
|
1902
|
-
* SellsukiPay brand config — Sky-500 primary (same as Sellsuki default).
|
|
1903
|
-
* logo / logoFull: inject from product repo (Brand=sellsukipay SVG files).
|
|
1904
|
-
*/
|
|
1905
|
-
export declare const sellsukiPayBrandConfig: ProductBrandConfig;
|
|
1906
|
-
|
|
1907
|
-
/**
|
|
1908
|
-
* Shell layout preferences that can be overridden per product.
|
|
1909
|
-
*/
|
|
1910
|
-
export declare interface ShellPrefs {
|
|
1911
|
-
/** Whether the sidebar can be collapsed — default true */
|
|
1912
|
-
sidebarCollapsible?: boolean;
|
|
1913
|
-
/** Sidebar open by default on desktop — default true */
|
|
1914
|
-
sidebarDefaultOpen?: boolean;
|
|
1915
|
-
/** Max width of the content area — default undefined (full width) */
|
|
1916
|
-
contentMaxWidth?: string;
|
|
1917
|
-
}
|
|
1918
|
-
|
|
1919
|
-
/**
|
|
1920
|
-
* A group of navigation items used by AppShell — richer than the standalone Sidebar's SidebarGroup.
|
|
1921
|
-
* Use this type when configuring AppShell navigation via NavResolver.
|
|
1922
|
-
* @alias ShellSidebarGroup
|
|
1923
|
-
*/
|
|
1924
|
-
export declare interface ShellSidebarGroup {
|
|
1925
|
-
/** Group label shown as section header — omit for ungrouped items */
|
|
1926
|
-
title?: string;
|
|
1927
|
-
/** Navigation items in this group */
|
|
1928
|
-
items: NavItem[];
|
|
1929
|
-
/** Whether the group can be collapsed — default false */
|
|
1930
|
-
collapsible?: boolean;
|
|
1931
|
-
/** Default collapsed state — only applies if collapsible=true */
|
|
1932
|
-
defaultCollapsed?: boolean;
|
|
1933
|
-
}
|
|
1934
|
-
|
|
1935
|
-
/**
|
|
1936
|
-
* The authenticated user shown in the shell (top nav user menu, sidebar account).
|
|
1937
|
-
*/
|
|
1938
|
-
export declare interface ShellUser {
|
|
1939
|
-
/** Display name */
|
|
1940
|
-
name: string;
|
|
1941
|
-
/** Avatar image URL — falls back to initials if not provided */
|
|
1942
|
-
avatar?: string;
|
|
1943
|
-
/** Email address */
|
|
1944
|
-
email?: string;
|
|
1945
|
-
/** User role label (e.g. "Admin", "Staff", "Owner") */
|
|
1946
|
-
role?: string;
|
|
1947
|
-
/** Permission keys for nav item filtering — e.g. ["orders:read", "settings:write"] */
|
|
1948
|
-
permissions: string[];
|
|
1949
|
-
}
|
|
1950
|
-
|
|
1951
|
-
/**
|
|
1952
|
-
* Shipmunk brand config — Sky-500 primary + Cyan secondary.
|
|
1953
|
-
* NOTE: Shipmunk only has an icon+name SVG (no icon-only variant).
|
|
1954
|
-
* Set `logoFull` to the icon+name SVG; collapsed sidebar will clip to icon area.
|
|
1955
|
-
* logo / logoFull: inject from product repo (Brand=shipmunk SVG files).
|
|
1956
|
-
*/
|
|
1957
|
-
export declare const shipmunkBrandConfig: ProductBrandConfig;
|
|
1958
|
-
|
|
1959
|
-
export declare function Sidebar({ brand, accountSwitcher, groups, activeItem, onNavigate, collapsed, onCollapsedChange, showCollapseToggle, utilityItems, version, versionDate, width, className, }: SidebarProps): JSX.Element;
|
|
895
|
+
export declare function Sidebar({ brand, groups, activeItem, onNavigate, collapsed, onCollapsedChange, className, }: SidebarProps): JSX.Element;
|
|
1960
896
|
|
|
1961
897
|
export declare namespace Sidebar {
|
|
1962
898
|
var displayName: string;
|
|
1963
899
|
}
|
|
1964
900
|
|
|
1965
|
-
export declare interface SidebarAccountItem {
|
|
1966
|
-
id: string;
|
|
1967
|
-
/** Display name (company / branch / provider) */
|
|
1968
|
-
name: string;
|
|
1969
|
-
/** Handle or sub-label e.g. "@phoenix" */
|
|
1970
|
-
handle?: string;
|
|
1971
|
-
/** Avatar image URL */
|
|
1972
|
-
avatarUrl?: string;
|
|
1973
|
-
/** Fallback initials when no avatarUrl */
|
|
1974
|
-
avatarFallback?: string;
|
|
1975
|
-
}
|
|
1976
|
-
|
|
1977
|
-
export declare function SidebarAccountSwitcher({ company, branch, provider, companies, branches, providers, onCompanyChange, onBranchChange, onProviderChange, collapsed, }: SidebarAccountSwitcherProps): JSX.Element;
|
|
1978
|
-
|
|
1979
|
-
export declare namespace SidebarAccountSwitcher {
|
|
1980
|
-
var displayName: string;
|
|
1981
|
-
}
|
|
1982
|
-
|
|
1983
|
-
export declare interface SidebarAccountSwitcherProps {
|
|
1984
|
-
company?: SidebarAccountItem;
|
|
1985
|
-
branch?: SidebarAccountItem;
|
|
1986
|
-
provider?: SidebarAccountItem;
|
|
1987
|
-
companies?: SidebarAccountItem[];
|
|
1988
|
-
branches?: SidebarAccountItem[];
|
|
1989
|
-
providers?: SidebarAccountItem[];
|
|
1990
|
-
onCompanyChange?: (item: SidebarAccountItem) => void;
|
|
1991
|
-
onBranchChange?: (item: SidebarAccountItem) => void;
|
|
1992
|
-
onProviderChange?: (item: SidebarAccountItem) => void;
|
|
1993
|
-
/** Collapsed icon-only mode */
|
|
1994
|
-
collapsed?: boolean;
|
|
1995
|
-
}
|
|
1996
|
-
|
|
1997
901
|
export declare interface SidebarBrand {
|
|
1998
|
-
/** Brand name
|
|
902
|
+
/** Brand name */
|
|
1999
903
|
name: string;
|
|
2000
|
-
/**
|
|
904
|
+
/** Brand logo URL */
|
|
2001
905
|
logo?: string;
|
|
2002
|
-
/** Icon+Name logo (variable width × 40px) — used in expanded state */
|
|
2003
|
-
logoFull?: default_2.ReactNode;
|
|
2004
906
|
}
|
|
2005
907
|
|
|
2006
908
|
export declare interface SidebarGroup {
|
|
@@ -2017,8 +919,8 @@ export declare interface SidebarItem {
|
|
|
2017
919
|
label: string;
|
|
2018
920
|
/** Leading icon */
|
|
2019
921
|
icon?: default_2.ReactNode;
|
|
2020
|
-
/** Badge text
|
|
2021
|
-
badge?: string
|
|
922
|
+
/** Badge text (e.g., count) */
|
|
923
|
+
badge?: string;
|
|
2022
924
|
}
|
|
2023
925
|
|
|
2024
926
|
export declare interface SidebarProps {
|
|
@@ -2034,20 +936,7 @@ export declare interface SidebarProps {
|
|
|
2034
936
|
collapsed?: boolean;
|
|
2035
937
|
/** Toggle collapse callback */
|
|
2036
938
|
onCollapsedChange?: (collapsed: boolean) => void;
|
|
2037
|
-
/**
|
|
2038
|
-
showCollapseToggle?: boolean;
|
|
2039
|
-
/** Account/Company/Branch switcher shown in header area */
|
|
2040
|
-
accountSwitcher?: SidebarAccountSwitcherProps;
|
|
2041
|
-
/**
|
|
2042
|
-
* Utility items (e.g. Help, Setting) — rendered at bottom of sidebar
|
|
2043
|
-
* above collapse toggle, separated by a divider from main nav groups.
|
|
2044
|
-
*/
|
|
2045
|
-
utilityItems?: SidebarItem[];
|
|
2046
|
-
/** App version string e.g. "v1.4.0" */
|
|
2047
|
-
version?: string;
|
|
2048
|
-
/** Version date string e.g. "March 10, 2026" */
|
|
2049
|
-
versionDate?: string;
|
|
2050
|
-
/** Sidebar width override (200–320px range; default: var(--shell-sidebar-width, 200px)) */
|
|
939
|
+
/** Sidebar width (default: 256px) */
|
|
2051
940
|
width?: string;
|
|
2052
941
|
/** Additional class name */
|
|
2053
942
|
className?: string;
|
|
@@ -2057,9 +946,7 @@ export declare function Skeleton({ width, height, variant, animate, className, }
|
|
|
2057
946
|
|
|
2058
947
|
export declare function SkeletonCard(): JSX.Element;
|
|
2059
948
|
|
|
2060
|
-
export declare function SkeletonList(
|
|
2061
|
-
rows?: number;
|
|
2062
|
-
}): JSX.Element;
|
|
949
|
+
export declare function SkeletonList(): JSX.Element;
|
|
2063
950
|
|
|
2064
951
|
export declare interface SkeletonProps {
|
|
2065
952
|
width?: string | number;
|
|
@@ -2073,8 +960,6 @@ export declare function SkeletonTable(): JSX.Element;
|
|
|
2073
960
|
|
|
2074
961
|
export declare type SkeletonVariant = "text" | "rectangular" | "circular" | "rounded";
|
|
2075
962
|
|
|
2076
|
-
export declare type SortOrder = "asc" | "desc";
|
|
2077
|
-
|
|
2078
963
|
export declare function Spinner({ size, color, className }: SpinnerProps): JSX.Element;
|
|
2079
964
|
|
|
2080
965
|
export declare namespace Spinner {
|
|
@@ -2130,8 +1015,6 @@ export declare interface StepDefinition {
|
|
|
2130
1015
|
title: string;
|
|
2131
1016
|
/** Optional step description */
|
|
2132
1017
|
description?: string;
|
|
2133
|
-
/** Disable click navigation to this step */
|
|
2134
|
-
disabled?: boolean;
|
|
2135
1018
|
}
|
|
2136
1019
|
|
|
2137
1020
|
export declare function Stepper({ steps, current, orientation, onStepClick, className, }: StepperProps): JSX.Element;
|
|
@@ -2153,11 +1036,6 @@ export declare interface StepperProps {
|
|
|
2153
1036
|
className?: string;
|
|
2154
1037
|
}
|
|
2155
1038
|
|
|
2156
|
-
/**
|
|
2157
|
-
* Sukispace brand config — Sky-500 primary (same as Sellsuki, identity TBD).
|
|
2158
|
-
*/
|
|
2159
|
-
export declare const sukispaceBrandConfig: ProductBrandConfig;
|
|
2160
|
-
|
|
2161
1039
|
export declare function Switch({ checked, onChange, label, description, size, disabled, color, }: SwitchProps): JSX.Element;
|
|
2162
1040
|
|
|
2163
1041
|
export declare type SwitchColor = "primary" | "success" | "warning" | "destructive";
|
|
@@ -2203,11 +1081,8 @@ declare interface TableProps<T = any> {
|
|
|
2203
1081
|
selectedRows?: Set<number>;
|
|
2204
1082
|
onSelectionChange?: (selected: Set<number>) => void;
|
|
2205
1083
|
loading?: boolean;
|
|
2206
|
-
error?: string;
|
|
2207
1084
|
emptyMessage?: string;
|
|
2208
1085
|
stickyHeader?: boolean;
|
|
2209
|
-
/** Remove border and border-radius — use when table is already inside a bordered container */
|
|
2210
|
-
flush?: boolean;
|
|
2211
1086
|
className?: string;
|
|
2212
1087
|
}
|
|
2213
1088
|
|
|
@@ -2282,29 +1157,6 @@ export declare interface TagProps {
|
|
|
2282
1157
|
|
|
2283
1158
|
export declare type TagSize = "sm" | "md" | "lg";
|
|
2284
1159
|
|
|
2285
|
-
export declare function ThumbnailCell({ src, alt, caption, subCaption, size, onClick, className, }: ThumbnailCellProps): JSX.Element;
|
|
2286
|
-
|
|
2287
|
-
export declare namespace ThumbnailCell {
|
|
2288
|
-
var displayName: string;
|
|
2289
|
-
}
|
|
2290
|
-
|
|
2291
|
-
export declare interface ThumbnailCellProps {
|
|
2292
|
-
/** Image source */
|
|
2293
|
-
src: string;
|
|
2294
|
-
/** Alt text */
|
|
2295
|
-
alt?: string;
|
|
2296
|
-
/** Caption below image */
|
|
2297
|
-
caption?: string;
|
|
2298
|
-
/** Sub-caption (muted) */
|
|
2299
|
-
subCaption?: string;
|
|
2300
|
-
/** Thumbnail size */
|
|
2301
|
-
size?: "xs" | "sm" | "md";
|
|
2302
|
-
/** Click handler */
|
|
2303
|
-
onClick?: () => void;
|
|
2304
|
-
/** Additional class name */
|
|
2305
|
-
className?: string;
|
|
2306
|
-
}
|
|
2307
|
-
|
|
2308
1160
|
export declare function Timeline({ items, variant, size, }: TimelineProps): JSX.Element;
|
|
2309
1161
|
|
|
2310
1162
|
export declare interface TimelineItem {
|
|
@@ -2328,43 +1180,6 @@ export declare type TimelineSize = "sm" | "md" | "lg";
|
|
|
2328
1180
|
|
|
2329
1181
|
export declare type TimelineVariant = "default" | "alternate" | "compact";
|
|
2330
1182
|
|
|
2331
|
-
export declare function TimePicker({ value, onChange, format, showSeconds, minuteStep, placeholder, size, disabled, className, }: TimePickerProps): JSX.Element;
|
|
2332
|
-
|
|
2333
|
-
export declare namespace TimePicker {
|
|
2334
|
-
var displayName: string;
|
|
2335
|
-
}
|
|
2336
|
-
|
|
2337
|
-
export declare type TimePickerFormat = "12h" | "24h";
|
|
2338
|
-
|
|
2339
|
-
export declare interface TimePickerProps {
|
|
2340
|
-
/** Current time value */
|
|
2341
|
-
value?: TimeValue;
|
|
2342
|
-
/** Change handler */
|
|
2343
|
-
onChange?: (time: TimeValue) => void;
|
|
2344
|
-
/** 12-hour or 24-hour format */
|
|
2345
|
-
format?: TimePickerFormat;
|
|
2346
|
-
/** Show seconds column */
|
|
2347
|
-
showSeconds?: boolean;
|
|
2348
|
-
/** Minute step (default: 1) */
|
|
2349
|
-
minuteStep?: number;
|
|
2350
|
-
/** Placeholder text */
|
|
2351
|
-
placeholder?: string;
|
|
2352
|
-
/** Component size */
|
|
2353
|
-
size?: TimePickerSize;
|
|
2354
|
-
/** Disabled state */
|
|
2355
|
-
disabled?: boolean;
|
|
2356
|
-
/** Additional class name */
|
|
2357
|
-
className?: string;
|
|
2358
|
-
}
|
|
2359
|
-
|
|
2360
|
-
declare type TimePickerSize = "sm" | "md" | "lg";
|
|
2361
|
-
|
|
2362
|
-
export declare interface TimeValue {
|
|
2363
|
-
hours: number;
|
|
2364
|
-
minutes: number;
|
|
2365
|
-
seconds?: number;
|
|
2366
|
-
}
|
|
2367
|
-
|
|
2368
1183
|
export declare const toast: {
|
|
2369
1184
|
show: (opts: Omit<ToastData, "id">) => void;
|
|
2370
1185
|
info: (message: string, title?: string) => void;
|
|
@@ -2403,19 +1218,17 @@ export declare interface TooltipProps {
|
|
|
2403
1218
|
className?: string;
|
|
2404
1219
|
}
|
|
2405
1220
|
|
|
2406
|
-
export declare function TopNavbar({ brand, breadcrumbs,
|
|
1221
|
+
export declare function TopNavbar({ brand, breadcrumbs, actions, user, height, showSearch, searchPlaceholder, onSearchClick, notificationCount, onNotificationClick, onMobileMenuClick, onUserClick, onBreadcrumbClick, className, }: TopNavbarProps): JSX.Element;
|
|
2407
1222
|
|
|
2408
1223
|
export declare namespace TopNavbar {
|
|
2409
1224
|
var displayName: string;
|
|
2410
1225
|
}
|
|
2411
1226
|
|
|
2412
1227
|
export declare interface TopNavbarBrand {
|
|
2413
|
-
/** Brand name
|
|
1228
|
+
/** Brand name */
|
|
2414
1229
|
name: string;
|
|
2415
|
-
/**
|
|
1230
|
+
/** Logo URL or ReactNode */
|
|
2416
1231
|
logo?: string | default_2.ReactNode;
|
|
2417
|
-
/** Icon+Name logo (variable width × 40px) — shown in navbar when provided */
|
|
2418
|
-
logoFull?: default_2.ReactNode;
|
|
2419
1232
|
}
|
|
2420
1233
|
|
|
2421
1234
|
export declare interface TopNavbarProps {
|
|
@@ -2423,21 +1236,14 @@ export declare interface TopNavbarProps {
|
|
|
2423
1236
|
brand?: TopNavbarBrand;
|
|
2424
1237
|
/** Breadcrumb items */
|
|
2425
1238
|
breadcrumbs?: BreadcrumbItem_2[];
|
|
2426
|
-
/** Page title / system name — shown after brand. Default: hidden */
|
|
2427
|
-
title?: string;
|
|
2428
1239
|
/** Right-side action area */
|
|
2429
1240
|
actions?: default_2.ReactNode;
|
|
2430
1241
|
/** User avatar */
|
|
2431
1242
|
user?: TopNavbarUser;
|
|
2432
1243
|
/** Navbar height */
|
|
2433
1244
|
height?: string;
|
|
2434
|
-
/**
|
|
2435
|
-
|
|
2436
|
-
* - "bar" — full search bar (default when showSearch=true for backward compat)
|
|
2437
|
-
* - "icon" — icon button only
|
|
2438
|
-
* - "none" — hidden (default)
|
|
2439
|
-
*/
|
|
2440
|
-
searchMode?: "bar" | "icon" | "none";
|
|
1245
|
+
/** Show search bar */
|
|
1246
|
+
showSearch?: boolean;
|
|
2441
1247
|
/** Search placeholder text */
|
|
2442
1248
|
searchPlaceholder?: string;
|
|
2443
1249
|
/** Search click handler */
|
|
@@ -2446,22 +1252,12 @@ export declare interface TopNavbarProps {
|
|
|
2446
1252
|
notificationCount?: number;
|
|
2447
1253
|
/** Notification click handler */
|
|
2448
1254
|
onNotificationClick?: () => void;
|
|
2449
|
-
/** Mobile menu click handler
|
|
1255
|
+
/** Mobile menu click handler */
|
|
2450
1256
|
onMobileMenuClick?: () => void;
|
|
2451
|
-
/** Sidebar toggle handler — shows burger icon (always visible) to collapse/expand sidebar */
|
|
2452
|
-
onSidebarToggle?: () => void;
|
|
2453
|
-
/** App/product switcher handler — shows 3×3 grid icon on right side */
|
|
2454
|
-
onAppSwitcherClick?: () => void;
|
|
2455
1257
|
/** User click handler */
|
|
2456
1258
|
onUserClick?: () => void;
|
|
2457
1259
|
/** Breadcrumb click handler */
|
|
2458
1260
|
onBreadcrumbClick?: (item: BreadcrumbItem_2, index: number) => void;
|
|
2459
|
-
/** Workspace/shop switcher rendered after brand logo — for multi-workspace products */
|
|
2460
|
-
workspaceSwitcher?: default_2.ReactNode;
|
|
2461
|
-
/**
|
|
2462
|
-
* @deprecated Use searchMode="bar" instead
|
|
2463
|
-
*/
|
|
2464
|
-
showSearch?: boolean;
|
|
2465
1261
|
/** Additional class name */
|
|
2466
1262
|
className?: string;
|
|
2467
1263
|
}
|
|
@@ -2479,7 +1275,7 @@ export declare interface TransferItem {
|
|
|
2479
1275
|
disabled?: boolean;
|
|
2480
1276
|
}
|
|
2481
1277
|
|
|
2482
|
-
export declare function TransferList({ sourceTitle, targetTitle, items, defaultTarget, searchable, value, onChange,
|
|
1278
|
+
export declare function TransferList({ sourceTitle, targetTitle, items, defaultTarget, searchable, value, onChange, }: TransferListProps): JSX.Element;
|
|
2483
1279
|
|
|
2484
1280
|
export declare interface TransferListProps {
|
|
2485
1281
|
sourceTitle?: string;
|
|
@@ -2491,13 +1287,9 @@ export declare interface TransferListProps {
|
|
|
2491
1287
|
value?: string[];
|
|
2492
1288
|
/** Called when target list changes */
|
|
2493
1289
|
onChange?: (targetIds: string[]) => void;
|
|
2494
|
-
/** Show loading skeleton overlay */
|
|
2495
|
-
loading?: boolean;
|
|
2496
|
-
/** Show error message instead of content */
|
|
2497
|
-
error?: string;
|
|
2498
1290
|
}
|
|
2499
1291
|
|
|
2500
|
-
export declare function Tree({ data, selectable, showLines, defaultExpanded, expandedItems, onExpandChange, selectedItems, onSelect,
|
|
1292
|
+
export declare function Tree({ data, selectable, showLines, defaultExpanded, expandedItems, onExpandChange, selectedItems, onSelect, }: TreeProps): JSX.Element;
|
|
2501
1293
|
|
|
2502
1294
|
export declare interface TreeNode {
|
|
2503
1295
|
id: string;
|
|
@@ -2520,12 +1312,6 @@ export declare interface TreeProps {
|
|
|
2520
1312
|
selectedItems?: string[];
|
|
2521
1313
|
/** Called when selection changes */
|
|
2522
1314
|
onSelect?: (selectedIds: string[]) => void;
|
|
2523
|
-
/** Show loading skeleton */
|
|
2524
|
-
loading?: boolean;
|
|
2525
|
-
/** Show error message */
|
|
2526
|
-
error?: string;
|
|
2527
|
-
/** Message shown when data is empty */
|
|
2528
|
-
emptyMessage?: string;
|
|
2529
1315
|
}
|
|
2530
1316
|
|
|
2531
1317
|
export declare interface UploadedFile {
|
|
@@ -2537,65 +1323,6 @@ export declare interface UploadedFile {
|
|
|
2537
1323
|
status: "uploading" | "done" | "error";
|
|
2538
1324
|
}
|
|
2539
1325
|
|
|
2540
|
-
/**
|
|
2541
|
-
* Access shell state from any descendant component.
|
|
2542
|
-
*
|
|
2543
|
-
* @throws Error if called outside of AppShellProvider
|
|
2544
|
-
*
|
|
2545
|
-
* @example
|
|
2546
|
-
* function OrderDetailPage() {
|
|
2547
|
-
* const { setBreadcrumbs, user, sidebarOpen } = useAppShell();
|
|
2548
|
-
*
|
|
2549
|
-
* useEffect(() => {
|
|
2550
|
-
* setBreadcrumbs([
|
|
2551
|
-
* { label: "Orders", href: "/orders" },
|
|
2552
|
-
* { label: "Order #12345" },
|
|
2553
|
-
* ]);
|
|
2554
|
-
* }, []);
|
|
2555
|
-
*
|
|
2556
|
-
* return <div>...</div>;
|
|
2557
|
-
* }
|
|
2558
|
-
*/
|
|
2559
|
-
export declare function useAppShell(): AppShellContextValue;
|
|
2560
|
-
|
|
2561
|
-
/**
|
|
2562
|
-
* Extended hook that also exposes nav state.
|
|
2563
|
-
* Use this in the Sidebar/TopNavbar wrappers that need nav groups.
|
|
2564
|
-
*
|
|
2565
|
-
* @throws Error if called outside of AppShellProvider
|
|
2566
|
-
*/
|
|
2567
|
-
export declare function useAppShellFull(): AppShellFullContextValue;
|
|
2568
|
-
|
|
2569
|
-
/**
|
|
2570
|
-
* Convenience hook for setting breadcrumbs from a feature page.
|
|
2571
|
-
* Handles the useEffect pattern automatically.
|
|
2572
|
-
*
|
|
2573
|
-
* @example
|
|
2574
|
-
* function ProductDetailPage({ productId }: { productId: string }) {
|
|
2575
|
-
* useBreadcrumbs([
|
|
2576
|
-
* { label: "Products", href: "/products" },
|
|
2577
|
-
* { label: product.name },
|
|
2578
|
-
* ]);
|
|
2579
|
-
* return <div>...</div>;
|
|
2580
|
-
* }
|
|
2581
|
-
*/
|
|
2582
|
-
export declare function useBreadcrumbs(items: BreadcrumbEntry[]): void;
|
|
2583
|
-
|
|
2584
1326
|
export declare function useFormField(): FormFieldContextValue;
|
|
2585
1327
|
|
|
2586
|
-
/**
|
|
2587
|
-
* Standalone hook for products that manage nav outside of AppShellProvider.
|
|
2588
|
-
* Returns nav groups, loading state, error, and a refresh function.
|
|
2589
|
-
*
|
|
2590
|
-
* @example
|
|
2591
|
-
* function AppSidebar() {
|
|
2592
|
-
* const { groups, loading, error, refresh } = useNavResolver(navResolver, currentUser);
|
|
2593
|
-
* if (loading) return <SkeletonList />;
|
|
2594
|
-
* return <Sidebar groups={mapGroupsForSidebar(groups)} />;
|
|
2595
|
-
* }
|
|
2596
|
-
*/
|
|
2597
|
-
export declare function useNavResolver(resolver: NavResolver | undefined, user: ShellUser | null): NavState & {
|
|
2598
|
-
refresh: () => void;
|
|
2599
|
-
};
|
|
2600
|
-
|
|
2601
1328
|
export { }
|