@cfast/ui 0.0.1 → 0.2.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.
Files changed (51) hide show
  1. package/README.md +23 -23
  2. package/dist/chunk-PWBG6CGF.js +1400 -0
  3. package/dist/{permission-gate-DVmY42oz.d.ts → client-CIx8_tmv.d.ts} +617 -2
  4. package/dist/client.d.ts +4 -617
  5. package/dist/client.js +6 -8
  6. package/dist/index.d.ts +52 -5
  7. package/dist/index.js +17 -13
  8. package/llms.txt +159 -0
  9. package/package.json +25 -41
  10. package/LICENSE +0 -21
  11. package/dist/chunk-755IRYDN.js +0 -941
  12. package/dist/chunk-7SNK37GF.js +0 -418
  13. package/dist/chunk-ASMYTWTR.js +0 -356
  14. package/dist/chunk-B2XXH5V4.js +0 -66
  15. package/dist/chunk-BQMXYYEV.js +0 -348
  16. package/dist/chunk-DTKBXCTU.js +0 -211
  17. package/dist/chunk-EYIBATYR.js +0 -33
  18. package/dist/chunk-FPZAQ2YQ.js +0 -474
  19. package/dist/chunk-G2OU4BYC.js +0 -205
  20. package/dist/chunk-JEGEIQ3R.js +0 -925
  21. package/dist/chunk-JUNLQJ6H.js +0 -1013
  22. package/dist/chunk-NRGMW3JA.js +0 -906
  23. package/dist/chunk-Q6FPL2OJ.js +0 -1086
  24. package/dist/chunk-QHWAGKNW.js +0 -456
  25. package/dist/chunk-QZT62CGJ.js +0 -924
  26. package/dist/chunk-RDTUEOLK.js +0 -486
  27. package/dist/chunk-RESL4IJJ.js +0 -112
  28. package/dist/chunk-UDCWQUTR.js +0 -221
  29. package/dist/chunk-UE7PZOIJ.js +0 -11
  30. package/dist/chunk-UTZTHGNE.js +0 -84
  31. package/dist/chunk-UVRXMOX5.js +0 -439
  32. package/dist/chunk-XFD3N2D4.js +0 -161
  33. package/dist/client-CXIHCQtA.d.ts +0 -274
  34. package/dist/joy.d.ts +0 -199
  35. package/dist/joy.js +0 -1150
  36. package/dist/permission-gate-apt9T9Mu.d.ts +0 -1256
  37. package/dist/types-1bAiH2uK.d.ts +0 -392
  38. package/dist/types-BX6u5sAd.d.ts +0 -403
  39. package/dist/types-BpdY7w5l.d.ts +0 -403
  40. package/dist/types-BrepeVp8.d.ts +0 -403
  41. package/dist/types-BvAqMZhn.d.ts +0 -403
  42. package/dist/types-C74nSscq.d.ts +0 -403
  43. package/dist/types-DD1Cpx8F.d.ts +0 -403
  44. package/dist/types-DHUhQwJn.d.ts +0 -403
  45. package/dist/types-DZSJNt_M.d.ts +0 -392
  46. package/dist/types-DaaJiIjW.d.ts +0 -391
  47. package/dist/types-LUpWJwps.d.ts +0 -403
  48. package/dist/types-a7zVU6WE.d.ts +0 -394
  49. package/dist/types-biJTHMcH.d.ts +0 -403
  50. package/dist/types-ow_qSEYJ.d.ts +0 -392
  51. package/dist/types-wnLasZaB.d.ts +0 -1234
@@ -1,1234 +0,0 @@
1
- import { ReactNode, ComponentType } from 'react';
2
- import { ActionHookResult, ClientDescriptor } from '@cfast/actions/client';
3
-
4
- /**
5
- * Map of component slot names to their styled implementations.
6
- *
7
- * A UI plugin provides these components to replace the headless defaults.
8
- * Each slot corresponds to a visual primitive used internally by the higher-level
9
- * components ({@link DataTableProps}, {@link ListViewProps}, {@link AppShellProps}, etc.).
10
- * Plugins only need to implement the slots they care about; missing slots fall back
11
- * to unstyled HTML elements.
12
- *
13
- * @see {@link UIPlugin} for the plugin wrapper that holds a partial map of these slots.
14
- * @see {@link createUIPlugin} for the factory function that creates a plugin.
15
- */
16
- type UIPluginComponents = {
17
- /** Button component used by ActionButton and other interactive elements. */
18
- button: ComponentType<ButtonSlotProps>;
19
- /** Tooltip wrapper for hover hints. */
20
- tooltip: ComponentType<TooltipSlotProps>;
21
- /** Confirmation dialog shown before destructive actions. */
22
- confirmDialog: ComponentType<ConfirmDialogSlotProps>;
23
- /** Root table element. */
24
- table: ComponentType<TableSlotProps>;
25
- /** Table head section. */
26
- tableHead: ComponentType<TableSectionSlotProps>;
27
- /** Table body section. */
28
- tableBody: ComponentType<TableSectionSlotProps>;
29
- /** Table row element. */
30
- tableRow: ComponentType<TableRowSlotProps>;
31
- /** Table cell element (th or td). */
32
- tableCell: ComponentType<TableCellSlotProps>;
33
- /** Chip/badge component for status indicators. */
34
- chip: ComponentType<ChipSlotProps>;
35
- /** Application shell with sidebar and header layout. */
36
- appShell: ComponentType<AppShellSlotProps>;
37
- /** Sidebar navigation panel. */
38
- sidebar: ComponentType<SidebarSlotProps>;
39
- /** Page wrapper with title, breadcrumb, and actions. */
40
- pageContainer: ComponentType<PageContainerSlotProps>;
41
- /** Breadcrumb navigation trail. */
42
- breadcrumb: ComponentType<BreadcrumbSlotProps>;
43
- /** Toast notification container. */
44
- toast: ComponentType<ToastSlotProps>;
45
- /** Alert message component for success/error/warning feedback. */
46
- alert: ComponentType<AlertSlotProps>;
47
- /** Drag-and-drop file upload area. */
48
- dropZone: ComponentType<DropZoneSlotProps>;
49
- };
50
- /**
51
- * A UI plugin providing styled component implementations for plugin slots.
52
- *
53
- * Created via `createUIPlugin()`. Slots not provided fall back to the headless
54
- * defaults (unstyled HTML elements). The Joy UI plugin (`@cfast/ui/joy`) is the
55
- * built-in implementation; third-party plugins can target shadcn, Mantine, or
56
- * any other component library.
57
- *
58
- * @see {@link UIPluginComponents} for the full list of available slots.
59
- */
60
- type UIPlugin = {
61
- /** Partial map of slot names to component implementations. */
62
- components: Partial<UIPluginComponents>;
63
- };
64
- /**
65
- * Props for the button plugin slot.
66
- *
67
- * Implemented by the UI plugin to render interactive buttons throughout the framework.
68
- * Used internally by {@link ActionButtonProps} and other interactive components.
69
- *
70
- * @see {@link UIPluginComponents} for the slot registration point.
71
- */
72
- type ButtonSlotProps = {
73
- /** Button content. */
74
- children: ReactNode;
75
- /** Click handler. */
76
- onClick?: () => void;
77
- /** Whether the button is disabled. */
78
- disabled?: boolean;
79
- /** Whether the button is in a loading state. */
80
- loading?: boolean;
81
- /** Visual style variant. */
82
- variant?: "solid" | "soft" | "outlined" | "plain";
83
- /** Color theme. */
84
- color?: "primary" | "neutral" | "danger" | "success" | "warning";
85
- /** Size of the button. */
86
- size?: "sm" | "md" | "lg";
87
- /** HTML button type attribute. */
88
- type?: "button" | "submit";
89
- /** Element rendered before the button label. */
90
- startDecorator?: ReactNode;
91
- };
92
- /**
93
- * Props for the tooltip plugin slot.
94
- *
95
- * Renders hover hints on interactive elements such as disabled action buttons
96
- * and truncated text fields.
97
- *
98
- * @see {@link UIPluginComponents} for the slot registration point.
99
- */
100
- type TooltipSlotProps = {
101
- /** Tooltip text displayed on hover. */
102
- title: string;
103
- /** Element that triggers the tooltip. */
104
- children: ReactNode;
105
- };
106
- /**
107
- * Props for the confirm dialog plugin slot.
108
- *
109
- * Rendered by {@link ActionButtonProps} when `confirmation` is set, and
110
- * available directly via the `useConfirm()` hook. Supports a "danger"
111
- * variant for destructive actions.
112
- *
113
- * @see {@link ConfirmOptions} for the imperative API options.
114
- * @see {@link UIPluginComponents} for the slot registration point.
115
- */
116
- type ConfirmDialogSlotProps = {
117
- /** Whether the dialog is currently visible. */
118
- open: boolean;
119
- /** Called when the user cancels or closes the dialog. */
120
- onClose: () => void;
121
- /** Called when the user confirms the action. */
122
- onConfirm: () => void;
123
- /** Dialog title text. */
124
- title: string;
125
- /** Optional description body. */
126
- description?: string;
127
- /** Label for the confirm button. */
128
- confirmLabel?: string;
129
- /** Label for the cancel button. */
130
- cancelLabel?: string;
131
- /** Visual variant; "danger" uses warning colors. */
132
- variant?: "default" | "danger";
133
- };
134
- /**
135
- * Props for the table plugin slot.
136
- *
137
- * The root table element rendered by {@link DataTableProps}. Wraps
138
- * {@link TableSectionSlotProps} (head/body) and {@link TableRowSlotProps} children.
139
- *
140
- * @see {@link UIPluginComponents} for the slot registration point.
141
- */
142
- type TableSlotProps = {
143
- /** Table rows and sections. */
144
- children: ReactNode;
145
- /** Whether to highlight rows on hover. */
146
- hoverRow?: boolean;
147
- };
148
- /**
149
- * Props for the table head and table body plugin slots.
150
- *
151
- * Used by both the `tableHead` and `tableBody` slots in {@link UIPluginComponents}.
152
- * Contains {@link TableRowSlotProps} children.
153
- */
154
- type TableSectionSlotProps = {
155
- /** Table rows within this section. */
156
- children: ReactNode;
157
- };
158
- /**
159
- * Props for the table row plugin slot.
160
- *
161
- * Renders a single row inside a {@link TableSectionSlotProps}. Supports
162
- * selection highlighting and click handling for row navigation.
163
- *
164
- * @see {@link TableCellSlotProps} for the cell-level props within each row.
165
- */
166
- type TableRowSlotProps = {
167
- /** Table cells within this row. */
168
- children: ReactNode;
169
- /** Whether this row is currently selected. */
170
- selected?: boolean;
171
- /** Click handler for the row. */
172
- onClick?: () => void;
173
- };
174
- /**
175
- * Props for the table cell plugin slot.
176
- *
177
- * Renders a single cell (`th` or `td`) inside a {@link TableRowSlotProps}.
178
- * Supports sortable column headers with directional indicators.
179
- */
180
- type TableCellSlotProps = {
181
- /** Cell content. */
182
- children: ReactNode;
183
- /** Whether this cell is a header cell (th vs td). */
184
- header?: boolean;
185
- /** Whether clicking this cell triggers sorting. */
186
- sortable?: boolean;
187
- /** Current sort direction for this column, or null if not sorted. */
188
- sortDirection?: "asc" | "desc" | null;
189
- /** Handler called when the user clicks to sort by this column. */
190
- onSort?: () => void;
191
- };
192
- /**
193
- * Props for the chip/badge plugin slot.
194
- *
195
- * Used for status indicators, role badges ({@link RoleBadgeProps}), and
196
- * boolean field display ({@link BooleanFieldProps}).
197
- *
198
- * @see {@link UIPluginComponents} for the slot registration point.
199
- */
200
- type ChipSlotProps = {
201
- /** Chip label content. */
202
- children: ReactNode;
203
- /** Color theme. */
204
- color?: "primary" | "neutral" | "danger" | "success" | "warning";
205
- /** Visual style variant. */
206
- variant?: "solid" | "soft" | "outlined";
207
- /** Size of the chip. */
208
- size?: "sm" | "md" | "lg";
209
- };
210
- /**
211
- * Props for the application shell plugin slot.
212
- *
213
- * The low-level slot rendered by {@link AppShellProps}. Provides the sidebar +
214
- * header + content layout structure. Use {@link AppShellProps} in application code;
215
- * this type is for plugin implementors.
216
- *
217
- * @see {@link SidebarSlotProps} for the sidebar slot within the shell.
218
- */
219
- type AppShellSlotProps = {
220
- /** Main content area. */
221
- children: ReactNode;
222
- /** Sidebar navigation element. */
223
- sidebar?: ReactNode;
224
- /** Header element. */
225
- header?: ReactNode;
226
- };
227
- /**
228
- * Props for the sidebar plugin slot.
229
- *
230
- * Renders navigation items inside the application shell. Items can be
231
- * permission-filtered via the {@link NavigationItem.action} property.
232
- *
233
- * @see {@link NavigationItem} for the shape of each navigation entry.
234
- * @see {@link AppShellSlotProps} for the parent layout slot.
235
- */
236
- type SidebarSlotProps = {
237
- /** Sidebar content. */
238
- children: ReactNode;
239
- /** Navigation items to render in the sidebar. */
240
- items: NavigationItem[];
241
- };
242
- /**
243
- * Props for the page container plugin slot.
244
- *
245
- * Provides the page wrapper with title, breadcrumb trail, action buttons, and
246
- * optional tab navigation. Used internally by {@link ListViewProps} and
247
- * {@link DetailViewProps}.
248
- *
249
- * @see {@link BreadcrumbItem} for breadcrumb trail entries.
250
- * @see {@link TabItem} for sub-navigation tabs.
251
- */
252
- type PageContainerSlotProps = {
253
- /** Page body content. */
254
- children: ReactNode;
255
- /** Page title displayed in the header area. */
256
- title?: string;
257
- /** Breadcrumb trail items. */
258
- breadcrumb?: BreadcrumbItem[];
259
- /** Action buttons rendered in the page header. */
260
- actions?: ReactNode;
261
- /** Tab items for sub-navigation within the page. */
262
- tabs?: TabItem[];
263
- };
264
- /**
265
- * Props for the breadcrumb plugin slot.
266
- *
267
- * Renders a breadcrumb navigation trail from an array of {@link BreadcrumbItem} entries.
268
- *
269
- * @see {@link PageContainerSlotProps} where breadcrumbs are typically displayed.
270
- */
271
- type BreadcrumbSlotProps = {
272
- /** Breadcrumb trail items. */
273
- items: BreadcrumbItem[];
274
- };
275
- /**
276
- * Props for the toast provider plugin slot.
277
- *
278
- * Wraps the application to provide toast notification support. Individual
279
- * toasts are managed internally via the {@link ToastApi} returned by `useToast()`.
280
- *
281
- * @see {@link ToastApi} for the imperative notification API.
282
- * @see {@link ToastOptions} for individual toast configuration.
283
- */
284
- type ToastSlotProps = {
285
- /** Provider-level children; individual toasts are managed internally. */
286
- children?: ReactNode;
287
- };
288
- /**
289
- * Props for the alert plugin slot.
290
- *
291
- * Renders inline feedback messages for success, error, and warning states.
292
- * Used by {@link FormStatusProps} to display action result feedback.
293
- *
294
- * @see {@link UIPluginComponents} for the slot registration point.
295
- */
296
- type AlertSlotProps = {
297
- /** Alert message content. */
298
- children: ReactNode;
299
- /** Semantic color indicating the alert type. */
300
- color?: "success" | "danger" | "warning" | "neutral";
301
- /** Visual style variant. */
302
- variant?: "soft" | "solid" | "outlined";
303
- };
304
- /**
305
- * Props for the drop zone plugin slot.
306
- *
307
- * The low-level slot for drag-and-drop file upload areas. Handles drag state
308
- * feedback, file validation, and click-to-browse. Use {@link DropZoneProps} in
309
- * application code; this type is for plugin implementors.
310
- *
311
- * @see {@link DropZoneProps} for the high-level component props.
312
- * @see {@link UIPluginComponents} for the slot registration point.
313
- */
314
- type DropZoneSlotProps = {
315
- /** Drop zone content (instructions or file preview). */
316
- children: ReactNode;
317
- /** Whether a file is currently being dragged over the zone. */
318
- isDragOver: boolean;
319
- /** Whether the dragged file is invalid (wrong type). */
320
- isInvalid: boolean;
321
- /** Handler called when files are dropped. */
322
- onDrop: (files: FileList) => void;
323
- /** Handler called during dragover for visual feedback. */
324
- onDragOver: (e: React.DragEvent) => void;
325
- /** Handler called when the drag leaves the zone. */
326
- onDragLeave: () => void;
327
- /** Handler called when the zone is clicked (opens file picker). */
328
- onClick: () => void;
329
- /** MIME type filter for accepted files. */
330
- accept?: string;
331
- };
332
- /**
333
- * Behavior when a `@cfast/actions` action is not permitted for the current user.
334
- *
335
- * Controls how permission-aware components like {@link ActionButtonProps} and
336
- * sidebar {@link NavigationItem} entries respond to forbidden actions:
337
- *
338
- * - `"hide"` -- the component is not rendered at all.
339
- * - `"disable"` -- the component is rendered but non-interactive (grayed out).
340
- * - `"show"` -- the component is rendered and interactive regardless of permissions.
341
- */
342
- type WhenForbidden = "hide" | "disable" | "show";
343
- /**
344
- * Full column definition for {@link DataTableProps} and {@link DetailViewProps}.
345
- *
346
- * Specifies the column key, display label, sorting behavior, custom cell rendering,
347
- * and responsive priority. When a Drizzle table is provided, column metadata
348
- * (label, type-appropriate renderer) is inferred automatically; use `ColumnDef`
349
- * to override those defaults.
350
- *
351
- * @typeParam T - The row object type for type-safe `render` callbacks.
352
- *
353
- * @see {@link ColumnShorthand} for the shorthand form (plain string key).
354
- */
355
- type ColumnDef<T = unknown> = {
356
- /** Property key on the row object. */
357
- key: string;
358
- /** Human-readable column header label. */
359
- label?: string;
360
- /** Whether this column supports sorting. Defaults to true. */
361
- sortable?: boolean;
362
- /** Custom render function for the cell value. */
363
- render?: (value: unknown, row: T) => ReactNode;
364
- /** Fixed column width (CSS value or pixel number). */
365
- width?: string | number;
366
- /** Responsive priority; lower numbers stay visible on small screens. */
367
- priority?: number;
368
- };
369
- /**
370
- * Column definition shorthand: either a plain column key string or a full {@link ColumnDef}.
371
- *
372
- * When a string is provided, the label is auto-derived from the key (e.g., `"createdAt"`
373
- * becomes "Created At") and column behavior (sorting, rendering) is inferred from the
374
- * Drizzle schema column type.
375
- *
376
- * @typeParam T - The row object type, forwarded to {@link ColumnDef} for type-safe rendering.
377
- *
378
- * @example
379
- * ```ts
380
- * // Mix strings and full definitions:
381
- * const columns: ColumnShorthand<Post>[] = [
382
- * "title",
383
- * { key: "author", label: "Written by" },
384
- * { key: "createdAt", sortable: false },
385
- * ];
386
- * ```
387
- */
388
- type ColumnShorthand<T = unknown> = string | ColumnDef<T>;
389
- /**
390
- * Supported filter input types for {@link FilterBarProps}.
391
- *
392
- * Each type determines the filter UI control and how the value is serialized
393
- * to URL search params:
394
- *
395
- * - `"text"` -- Text input (`?column=value`).
396
- * - `"select"` -- Single-select dropdown (`?column=value`).
397
- * - `"multiSelect"` -- Multi-select dropdown (`?column=a,b,c`).
398
- * - `"relation"` -- Async select fetching related records (`?column=id`).
399
- * - `"dateRange"` -- Date range picker (`?column_from=...&column_to=...`).
400
- * - `"boolean"` -- Toggle/chip (`?column=true`).
401
- * - `"number"` -- Number range inputs (`?column_min=...&column_max=...`).
402
- *
403
- * @see {@link FilterDef} for the full filter definition.
404
- */
405
- type FilterType = "text" | "select" | "multiSelect" | "relation" | "dateRange" | "boolean" | "number";
406
- /**
407
- * A single option for `"select"` and `"multiSelect"` {@link FilterType} filters.
408
- *
409
- * The `value` is serialized to URL search params; the `label` is displayed in the UI.
410
- *
411
- * @see {@link FilterDef} which holds an array of these options.
412
- */
413
- type FilterOption = {
414
- /** Display label for the option. */
415
- label: string;
416
- /** Serialized value for URL params. */
417
- value: string | number | boolean;
418
- };
419
- /**
420
- * Definition of a single filter in a {@link FilterBarProps}.
421
- *
422
- * Each filter maps a Drizzle column to a UI control. The filter state is serialized
423
- * to URL search params so that `@cfast/pagination`'s `parseParams()` can apply them
424
- * as Drizzle `where` clauses in the loader.
425
- *
426
- * @see {@link FilterType} for the supported input types.
427
- * @see {@link FilterOption} for select/multiSelect option entries.
428
- * @see {@link FilterBarProps} for the parent component props.
429
- */
430
- type FilterDef = {
431
- /** Column name this filter applies to. */
432
- column: string;
433
- /** Input type determining the filter UI. */
434
- type: FilterType;
435
- /** Optional label override (defaults to column name). */
436
- label?: string;
437
- /** Options for select/multiSelect filters. */
438
- options?: FilterOption[];
439
- /** Drizzle table for relation filters (async select). */
440
- table?: unknown;
441
- /** Display field name for relation filters. */
442
- display?: string;
443
- /** Placeholder text for the filter input. */
444
- placeholder?: string;
445
- };
446
- /**
447
- * Props for the DataTable component.
448
- *
449
- * Renders a sortable, selectable data table with permission-aware row actions.
450
- * Integrates with `@cfast/pagination` for data, `@cfast/db` for column inference,
451
- * `@cfast/permissions` for action visibility, and `@cfast/actions` for row-level
452
- * operations.
453
- *
454
- * @typeParam T - The row object type for type-safe column rendering and selection callbacks.
455
- *
456
- * @see {@link ColumnShorthand} for column configuration options.
457
- * @see {@link ListViewProps} which composes DataTable with filters and pagination.
458
- */
459
- type DataTableProps<T = unknown> = {
460
- /** Paginated data including items and loading state. */
461
- data: {
462
- /** Array of row objects to display. */
463
- items: T[];
464
- /** Whether data is currently being fetched. */
465
- isLoading?: boolean;
466
- };
467
- /** Drizzle table for column type inference. */
468
- table?: unknown;
469
- /** Column definitions or key strings. */
470
- columns?: ColumnShorthand<T>[];
471
- /** Action descriptor for row-level actions. */
472
- actions?: ClientDescriptor;
473
- /** Whether to show row selection checkboxes. */
474
- selectable?: boolean;
475
- /** Externally controlled selected rows. */
476
- selectedRows?: T[];
477
- /** Callback when row selection changes. */
478
- onSelectionChange?: (rows: T[]) => void;
479
- /** Callback when a row is clicked. */
480
- onRowClick?: (row: T) => void;
481
- /** Function to extract a unique ID from a row. Defaults to `row.id`. */
482
- getRowId?: (row: T) => string | number;
483
- /** Message shown when there are no items. */
484
- emptyMessage?: string;
485
- };
486
- /**
487
- * Props for the FilterBar component.
488
- *
489
- * Renders URL-synced filter controls derived from Drizzle column types. On filter
490
- * change, React Router navigates with updated search params -- no client state
491
- * management required. Use `values`/`onChange` for controlled mode instead.
492
- *
493
- * @see {@link FilterDef} for individual filter definitions.
494
- * @see {@link ListViewProps} which composes FilterBar with DataTable and pagination.
495
- */
496
- type FilterBarProps = {
497
- /** Drizzle table for filter type inference. */
498
- table?: unknown;
499
- /** Filter definitions specifying which columns to filter and how. */
500
- filters: FilterDef[];
501
- /** Column names that support full-text search. */
502
- searchable?: string[];
503
- /** Current filter values (controlled mode). */
504
- values?: Record<string, unknown>;
505
- /** Callback when filter values change (controlled mode). */
506
- onChange?: (values: Record<string, unknown>) => void;
507
- };
508
- /**
509
- * Props for the ListView composite component.
510
- *
511
- * Composes {@link PageContainerSlotProps}, {@link FilterBarProps}, {@link DataTableProps},
512
- * {@link EmptyStateProps}, {@link BulkAction}, and pagination controls into a full page
513
- * layout. This is the primary component `@cfast/admin` uses for every table view.
514
- * Handles loading/empty/data state transitions automatically.
515
- *
516
- * @typeParam T - The row object type, forwarded to column rendering and selection.
517
- *
518
- * @see {@link DataTableProps} for the table configuration subset.
519
- * @see {@link DetailViewProps} for the single-record counterpart.
520
- */
521
- type ListViewProps<T = unknown> = {
522
- /** Page title displayed in the header. */
523
- title: string;
524
- /** Paginated data with optional pagination controls. */
525
- data: {
526
- /** Array of row objects to display. */
527
- items: T[];
528
- /** Whether data is currently being fetched. */
529
- isLoading?: boolean;
530
- /** Total number of matching records. */
531
- total?: number;
532
- /** Total number of pages (offset pagination). */
533
- totalPages?: number;
534
- /** Current page number (offset pagination). */
535
- currentPage?: number;
536
- /** Navigate to a specific page (offset pagination). */
537
- goToPage?: (page: number) => void;
538
- /** Whether more items are available (cursor pagination). */
539
- hasMore?: boolean;
540
- /** Load the next page of items (cursor pagination). */
541
- loadMore?: () => void;
542
- };
543
- /** Drizzle table for column and filter type inference. */
544
- table?: unknown;
545
- /** Column definitions or key strings for the data table. */
546
- columns?: ColumnShorthand<T>[];
547
- /** Action descriptor for row-level actions. */
548
- actions?: ClientDescriptor;
549
- /** Filter definitions for the FilterBar. */
550
- filters?: FilterDef[];
551
- /** Column names that support full-text search. */
552
- searchable?: string[];
553
- /** Action descriptor for the create button. */
554
- createAction?: ClientDescriptor;
555
- /** Label for the create button. Defaults to "Create". */
556
- createLabel?: string;
557
- /** Whether to enable row selection. */
558
- selectable?: boolean;
559
- /** Bulk actions shown when rows are selected. */
560
- bulkActions?: BulkAction[];
561
- /** Breadcrumb trail items. */
562
- breadcrumb?: BreadcrumbItem[];
563
- };
564
- /**
565
- * Props for the DetailView composite component.
566
- *
567
- * Displays a single record's fields in a two-column grid with a permission-aware
568
- * action toolbar. Fields render using the appropriate TypedField component
569
- * ({@link DateFieldProps}, {@link BooleanFieldProps}, etc.) based on the Drizzle
570
- * column type. Override individual fields with custom `render` functions.
571
- *
572
- * @typeParam T - The record object type for type-safe field rendering.
573
- *
574
- * @see {@link ColumnShorthand} for field configuration options.
575
- * @see {@link ListViewProps} for the multi-record counterpart.
576
- */
577
- type DetailViewProps<T = unknown> = {
578
- /** Page title, typically the record's display name. */
579
- title: string;
580
- /** Drizzle table for field type inference. */
581
- table?: unknown;
582
- /** The record object to display. */
583
- record: T;
584
- /** Field definitions or key strings. If omitted, fields are inferred from the record. */
585
- fields?: ColumnShorthand<T>[];
586
- /** Field keys to exclude from display. */
587
- exclude?: string[];
588
- /** Action descriptor for the action toolbar. */
589
- actions?: ClientDescriptor;
590
- /** Breadcrumb trail items. */
591
- breadcrumb?: BreadcrumbItem[];
592
- };
593
- /**
594
- * Base props shared by all TypedField read-only display components.
595
- *
596
- * Extended by {@link DateFieldProps}, {@link BooleanFieldProps}, {@link NumberFieldProps},
597
- * {@link TextFieldProps}, {@link EmailFieldProps}, {@link UrlFieldProps},
598
- * {@link ImageFieldProps}, {@link FileFieldProps}, {@link RelationFieldProps},
599
- * and {@link JsonFieldProps}.
600
- */
601
- type BaseFieldProps = {
602
- /** Optional label displayed above the field value. */
603
- label?: string;
604
- /** CSS class name for custom styling. */
605
- className?: string;
606
- };
607
- /**
608
- * Props for the DateField read-only display component.
609
- *
610
- * Formats dates using `Intl.DateTimeFormat` with support for relative time display.
611
- * Used by {@link DataTableProps} cell renderers for date/timestamp columns.
612
- *
613
- * @see {@link BaseFieldProps} for inherited label and className props.
614
- */
615
- type DateFieldProps = BaseFieldProps & {
616
- /** Date value to display. Accepts Date objects, ISO strings, or timestamps. */
617
- value: Date | string | number | null | undefined;
618
- /** Display format. Defaults to "short". */
619
- format?: "short" | "long" | "relative" | "datetime";
620
- /** Locale for date formatting. Defaults to "en". */
621
- locale?: string;
622
- };
623
- /**
624
- * Props for the BooleanField read-only display component.
625
- *
626
- * Renders a colored chip indicating true/false status with customizable labels
627
- * and colors. Used by {@link DataTableProps} cell renderers for boolean columns.
628
- *
629
- * @see {@link BaseFieldProps} for inherited label and className props.
630
- * @see {@link ChipSlotProps} for the underlying chip slot.
631
- */
632
- type BooleanFieldProps = BaseFieldProps & {
633
- /** Boolean value to display. */
634
- value: boolean | null | undefined;
635
- /** Label shown when value is true. Defaults to "Yes". */
636
- trueLabel?: string;
637
- /** Label shown when value is false. Defaults to "No". */
638
- falseLabel?: string;
639
- /** Chip color when value is true. Defaults to "success". */
640
- trueColor?: string;
641
- /** Chip color when value is false. Defaults to "neutral". */
642
- falseColor?: string;
643
- };
644
- /**
645
- * Props for the NumberField read-only display component.
646
- *
647
- * Formats numbers using `Intl.NumberFormat` with optional currency and decimal
648
- * precision. Used by {@link DataTableProps} cell renderers for numeric columns.
649
- *
650
- * @see {@link BaseFieldProps} for inherited label and className props.
651
- */
652
- type NumberFieldProps = BaseFieldProps & {
653
- /** Numeric value to display. */
654
- value: number | null | undefined;
655
- /** Locale for number formatting. Defaults to "en". */
656
- locale?: string;
657
- /** ISO 4217 currency code for monetary formatting (e.g. "USD"). */
658
- currency?: string;
659
- /** Number of decimal places to display. */
660
- decimals?: number;
661
- };
662
- /**
663
- * Props for the TextField read-only display component.
664
- *
665
- * Displays plain text with optional truncation (tooltip on overflow) and
666
- * copy-to-clipboard functionality. Used by {@link DataTableProps} cell renderers
667
- * for text/varchar columns.
668
- *
669
- * @see {@link BaseFieldProps} for inherited label and className props.
670
- */
671
- type TextFieldProps = BaseFieldProps & {
672
- /** Text value to display. */
673
- value: string | null | undefined;
674
- /** Maximum display length; longer values are truncated with a tooltip. */
675
- maxLength?: number;
676
- /** Whether to show a copy-to-clipboard button. */
677
- copyable?: boolean;
678
- };
679
- /**
680
- * Props for the EmailField read-only display component.
681
- *
682
- * Renders the email address as a clickable `mailto:` link.
683
- *
684
- * @see {@link BaseFieldProps} for inherited label and className props.
685
- */
686
- type EmailFieldProps = BaseFieldProps & {
687
- /** Email address to display as a mailto link. */
688
- value: string | null | undefined;
689
- };
690
- /**
691
- * Props for the UrlField read-only display component.
692
- *
693
- * Renders a URL as an external link with an indicator icon. Optionally truncates
694
- * the display to hostname + path for readability.
695
- *
696
- * @see {@link BaseFieldProps} for inherited label and className props.
697
- */
698
- type UrlFieldProps = BaseFieldProps & {
699
- /** URL to display as an external link. */
700
- value: string | null | undefined;
701
- /** Whether to truncate the URL to hostname + path. */
702
- truncate?: boolean;
703
- };
704
- /**
705
- * Props for the ImageField read-only display component.
706
- *
707
- * Renders an image thumbnail, resolving signed URLs from `@cfast/storage` when
708
- * a storage configuration is provided. Used by {@link DataTableProps} cell
709
- * renderers for image columns.
710
- *
711
- * @see {@link ImagePreviewProps} for the standalone image preview component.
712
- * @see {@link BaseFieldProps} for inherited label and className props.
713
- */
714
- type ImageFieldProps = BaseFieldProps & {
715
- /** Image URL or storage key. */
716
- value: string | null | undefined;
717
- /** Storage configuration for signed URL resolution. */
718
- storage?: unknown;
719
- /** Display width in pixels. Defaults to 80. */
720
- width?: number;
721
- /** Display height in pixels. Defaults to 60. */
722
- height?: number;
723
- /** Alt text for the image element. */
724
- alt?: string;
725
- };
726
- /**
727
- * Props for the FileField read-only display component.
728
- *
729
- * Displays a file icon, name, and formatted size. Resolves download URLs from
730
- * `@cfast/storage` when a storage configuration is provided.
731
- *
732
- * @see {@link FileListProps} for displaying multiple files with actions.
733
- * @see {@link BaseFieldProps} for inherited label and className props.
734
- */
735
- type FileFieldProps = BaseFieldProps & {
736
- /** File key or path. */
737
- value: string | null | undefined;
738
- /** Storage configuration for download URL resolution. */
739
- storage?: unknown;
740
- /** Display name for the file. Defaults to the value. */
741
- fileName?: string;
742
- /** File size in bytes for formatted display. */
743
- fileSize?: number;
744
- };
745
- /**
746
- * Props for the RelationField read-only display component.
747
- *
748
- * Displays a related record's display field (e.g., author name) with an optional
749
- * link to the related record's detail page. The `linkTo` pattern supports `:id`
750
- * as a placeholder for the record's ID.
751
- *
752
- * @see {@link BaseFieldProps} for inherited label and className props.
753
- */
754
- type RelationFieldProps = BaseFieldProps & {
755
- /** Related record object or primitive value. */
756
- value: unknown;
757
- /** Property name to display from the related record. Defaults to "name". */
758
- display?: string;
759
- /** URL pattern for linking to the related record. Use `:id` as placeholder. */
760
- linkTo?: string;
761
- };
762
- /**
763
- * Props for the JsonField read-only display component.
764
- *
765
- * Renders a JSON value as syntax-highlighted, formatted code with optional
766
- * collapse/expand functionality for large payloads.
767
- *
768
- * @see {@link BaseFieldProps} for inherited label and className props.
769
- */
770
- type JsonFieldProps = BaseFieldProps & {
771
- /** JSON value to display as formatted code. */
772
- value: unknown;
773
- /** Whether to initially show a collapsed preview. */
774
- collapsed?: boolean;
775
- };
776
- /**
777
- * Toast notification severity levels.
778
- *
779
- * Determines the visual style (color, icon) of a toast notification.
780
- *
781
- * @see {@link ToastOptions} which uses this as the `type` field.
782
- * @see {@link ToastApi} for the imperative methods that accept a type implicitly.
783
- */
784
- type ToastType = "success" | "error" | "info" | "warning";
785
- /**
786
- * Options for displaying a toast notification.
787
- *
788
- * Passed to {@link ToastApi.show} for full control over the notification. The
789
- * convenience methods (`success`, `error`, `info`, `warning`) set the `type`
790
- * automatically.
791
- *
792
- * @see {@link ToastApi} for the imperative notification API.
793
- * @see {@link ToastType} for the available severity levels.
794
- */
795
- type ToastOptions = {
796
- /** Primary message text. */
797
- message: string;
798
- /** Notification type determining the visual style. */
799
- type?: ToastType;
800
- /** Auto-dismiss duration in milliseconds. */
801
- duration?: number;
802
- /** Optional secondary description text. */
803
- description?: string;
804
- };
805
- /**
806
- * Imperative API returned by `useToast()` for showing notifications.
807
- *
808
- * Provides a `show()` method for full control and convenience methods for each
809
- * {@link ToastType}. Also used internally by `useActionToast()` to auto-display
810
- * notifications when `@cfast/actions` operations complete.
811
- *
812
- * @see {@link ToastOptions} for the full options object.
813
- * @see {@link ToastSlotProps} for the provider slot that enables toast rendering.
814
- */
815
- type ToastApi = {
816
- /** Show a toast with full options control. */
817
- show: (options: ToastOptions) => void;
818
- /** Show a success toast. */
819
- success: (message: string, description?: string) => void;
820
- /** Show an error toast. */
821
- error: (message: string, description?: string) => void;
822
- /** Show an informational toast. */
823
- info: (message: string, description?: string) => void;
824
- /** Show a warning toast. */
825
- warning: (message: string, description?: string) => void;
826
- };
827
- /**
828
- * Options for the imperative confirmation dialog.
829
- *
830
- * Passed to the function returned by `useConfirm()`, which resolves to `true`
831
- * (confirmed) or `false` (cancelled). Also accepted by {@link ActionButtonProps}
832
- * via the `confirmation` prop.
833
- *
834
- * @see {@link ConfirmDialogSlotProps} for the underlying dialog slot.
835
- */
836
- type ConfirmOptions = {
837
- /** Dialog title text. */
838
- title: string;
839
- /** Optional description body. */
840
- description?: string;
841
- /** Label for the confirm button. Defaults to "Confirm". */
842
- confirmLabel?: string;
843
- /** Label for the cancel button. Defaults to "Cancel". */
844
- cancelLabel?: string;
845
- /** Visual variant; "danger" uses warning colors for destructive actions. */
846
- variant?: "default" | "danger";
847
- };
848
- /**
849
- * A navigation item for sidebar or menu rendering.
850
- *
851
- * Items can be permission-filtered: when `action` is provided, the item is
852
- * automatically hidden if the current user lacks permission for that action.
853
- * Supports nested children for sub-menu hierarchies.
854
- *
855
- * @see {@link SidebarSlotProps} which renders an array of these items.
856
- * @see {@link BreadcrumbItem} for the breadcrumb-specific navigation type.
857
- */
858
- type NavigationItem = {
859
- /** Display label for the navigation link. */
860
- label: string;
861
- /** Route path to navigate to. */
862
- to: string;
863
- /** Optional icon component rendered before the label. */
864
- icon?: ComponentType<{
865
- className?: string;
866
- }>;
867
- /** If provided, the item is hidden when the user lacks permission for this action. */
868
- action?: ClientDescriptor;
869
- /** Nested navigation items for sub-menus. */
870
- children?: NavigationItem[];
871
- };
872
- /**
873
- * A single item in a breadcrumb trail.
874
- *
875
- * The last item in the array typically omits `to` to represent the current page.
876
- * Used by {@link PageContainerSlotProps}, {@link ListViewProps}, and
877
- * {@link DetailViewProps}.
878
- *
879
- * @see {@link BreadcrumbSlotProps} for the breadcrumb rendering slot.
880
- */
881
- type BreadcrumbItem = {
882
- /** Display label for the breadcrumb segment. */
883
- label: string;
884
- /** Route path; omit for the current (last) segment. */
885
- to?: string;
886
- };
887
- /**
888
- * A tab item for sub-navigation within a page.
889
- *
890
- * Used by {@link PageContainerSlotProps} to render tab navigation below the
891
- * page title. Either `to` (route-based) or `value` (programmatic) should be
892
- * provided.
893
- */
894
- type TabItem = {
895
- /** Display label for the tab. */
896
- label: string;
897
- /** Route path for the tab. */
898
- to?: string;
899
- /** Programmatic value identifier for the tab. */
900
- value?: string;
901
- };
902
- /**
903
- * Configuration for a bulk action available when rows are selected in a {@link DataTableProps}.
904
- *
905
- * Each action can be backed by a `@cfast/actions` descriptor (permission-aware) or
906
- * a plain `handler` callback. The `confirmation` message supports a `{count}`
907
- * placeholder for the number of selected rows.
908
- *
909
- * @see {@link ListViewProps} which accepts an array of bulk actions.
910
- */
911
- type BulkAction = {
912
- /** Display label for the action button. */
913
- label: string;
914
- /** Action descriptor for permission checking. */
915
- action?: ClientDescriptor;
916
- /** Custom handler called with the selected rows. */
917
- handler?: (rows: unknown[]) => void;
918
- /** Confirmation message; supports `{count}` placeholder. */
919
- confirmation?: string;
920
- /** Optional icon component for the action button. */
921
- icon?: ComponentType<{
922
- className?: string;
923
- }>;
924
- };
925
- /**
926
- * Props that ActionButton controls internally and are not forwarded from the caller.
927
- * @internal
928
- */
929
- type ActionButtonControlledProps = "children" | "onClick" | "disabled" | "loading";
930
- /**
931
- * Props for the ActionButton component.
932
- *
933
- * Wraps a `@cfast/actions` action with permission-aware behavior and optional
934
- * confirmation dialog. Extends {@link ButtonSlotProps} (excluding internally
935
- * controlled props) so all button styling options are available.
936
- *
937
- * @see {@link WhenForbidden} for the permission behavior modes.
938
- * @see {@link ConfirmOptions} for confirmation dialog configuration.
939
- * @see {@link ButtonSlotProps} for the inherited button styling props.
940
- */
941
- type ActionButtonProps = {
942
- /** Action hook result from `useActions()`, providing permission status and submit function. */
943
- action: ActionHookResult;
944
- /** Button label content. */
945
- children: ReactNode;
946
- /** Behavior when the action is not permitted. Defaults to "disable". */
947
- whenForbidden?: WhenForbidden;
948
- /** Confirmation message or options shown before executing the action. */
949
- confirmation?: string | ConfirmOptions;
950
- } & Omit<ButtonSlotProps, ActionButtonControlledProps>;
951
- /**
952
- * Props for the PermissionGate component.
953
- *
954
- * Conditionally renders children based on action permission status from
955
- * `@cfast/actions`. When the action is permitted, `children` is rendered.
956
- * When forbidden but not invisible, `fallback` is rendered. When the action
957
- * is invisible (no relation at all), nothing is rendered.
958
- *
959
- * @see {@link WhenForbidden} for the related behavior modes used by ActionButton.
960
- */
961
- type PermissionGateProps = {
962
- /** Action hook result providing permission status. */
963
- action: ActionHookResult;
964
- /** Content rendered when the action is permitted. */
965
- children: ReactNode;
966
- /** Content rendered when the action is forbidden but not invisible. */
967
- fallback?: ReactNode;
968
- };
969
- /**
970
- * Data structure for action result feedback (success, error, field errors).
971
- *
972
- * Typically returned from React Router actions and passed to {@link FormStatusProps}.
973
- * Supports both top-level messages and per-field validation errors from `@cfast/forms`.
974
- *
975
- * @see {@link FormStatusProps} for the component that renders this data.
976
- */
977
- type FormStatusData = {
978
- /** Success message to display. */
979
- success?: string;
980
- /** Error message to display. */
981
- error?: string;
982
- /** Per-field validation error messages. */
983
- fieldErrors?: Record<string, string[]>;
984
- };
985
- /**
986
- * Props for the FormStatus component.
987
- *
988
- * Displays action result feedback in a consistent format: success messages as
989
- * green alerts, error messages as red alerts, and field validation errors as a
990
- * keyed list. Uses the {@link AlertSlotProps} slot internally.
991
- *
992
- * @see {@link FormStatusData} for the expected data structure.
993
- */
994
- type FormStatusProps = {
995
- /** Action result data, or null/undefined when no result is available. */
996
- data: FormStatusData | null | undefined;
997
- };
998
- /**
999
- * Props for the EmptyState component.
1000
- *
1001
- * Displays a permission-aware empty state with optional create CTA. Behavior adapts
1002
- * based on `createAction` permission status:
1003
- *
1004
- * - If permitted, the create button is shown.
1005
- * - If forbidden, only the title and description are shown.
1006
- * - If invisible (no relation), a generic "Nothing here" message is shown.
1007
- *
1008
- * @see {@link ListViewProps} which uses EmptyState automatically when data is empty.
1009
- */
1010
- type EmptyStateProps = {
1011
- /** Title text (e.g. "No posts yet"). */
1012
- title: string;
1013
- /** Description text with guidance. */
1014
- description?: string;
1015
- /** Action descriptor for the create button; controls CTA visibility. */
1016
- createAction?: ClientDescriptor;
1017
- /** Label for the create button. Defaults to "Create". */
1018
- createLabel?: string;
1019
- /** Optional icon component displayed above the title. */
1020
- icon?: ComponentType<{
1021
- className?: string;
1022
- }>;
1023
- };
1024
- /**
1025
- * Props for the AppShell layout component.
1026
- *
1027
- * Base layout with sidebar navigation, header, and content area. Typically
1028
- * used in the root layout route to wrap all pages. Delegates to the
1029
- * {@link AppShellSlotProps} plugin slot for rendering.
1030
- *
1031
- * @see {@link SidebarSlotProps} for sidebar rendering.
1032
- * @see {@link NavigationItem} for sidebar navigation entries.
1033
- */
1034
- type AppShellProps = {
1035
- /** Main content area. */
1036
- children: ReactNode;
1037
- /** Sidebar navigation element. */
1038
- sidebar?: ReactNode;
1039
- /** Header element. */
1040
- header?: ReactNode;
1041
- };
1042
- /**
1043
- * A navigation link in the user menu dropdown.
1044
- *
1045
- * When `action` is provided, the link is automatically hidden if the current
1046
- * user lacks permission for that action (e.g., an "Admin" link gated on admin access).
1047
- *
1048
- * @see {@link UserMenuProps} which accepts an array of these links.
1049
- */
1050
- type UserMenuLink = {
1051
- /** Display label. */
1052
- label: string;
1053
- /** Route path. */
1054
- to: string;
1055
- /** If provided, the link is hidden when the user lacks permission. */
1056
- action?: ClientDescriptor;
1057
- };
1058
- /**
1059
- * Props for the UserMenu component.
1060
- *
1061
- * Header dropdown showing the current user's avatar, name, email, role badge,
1062
- * impersonation indicator, configurable navigation links, and sign-out action.
1063
- * Reads user data from `@cfast/auth`'s `useCurrentUser()`.
1064
- *
1065
- * @see {@link UserMenuLink} for the link configuration.
1066
- * @see {@link AvatarWithInitialsProps} for the avatar display.
1067
- * @see {@link RoleBadgeProps} for the role badge display.
1068
- */
1069
- type UserMenuProps = {
1070
- /** Additional navigation links in the dropdown. */
1071
- links?: UserMenuLink[];
1072
- /** Callback for the sign-out action. */
1073
- onSignOut?: () => void;
1074
- };
1075
- /**
1076
- * Props for the DropZone component.
1077
- *
1078
- * Integrates with `useUpload()` from `@cfast/storage/client` for drag-and-drop
1079
- * file uploads. Inherits `accept` and `maxSize` constraints from the storage schema.
1080
- * Manages drag state, file preview, validation errors, and upload progress internally.
1081
- *
1082
- * @see {@link DropZoneSlotProps} for the underlying plugin slot.
1083
- * @see {@link ImagePreviewProps} for displaying uploaded images.
1084
- * @see {@link FileListProps} for displaying uploaded file lists.
1085
- */
1086
- type DropZoneProps = {
1087
- /** Upload hook result from `@cfast/storage/client`. */
1088
- upload: {
1089
- /** MIME type filter for accepted files. */
1090
- accept: string;
1091
- /** Start uploading a file. */
1092
- start: (file: File) => void;
1093
- /** Current upload progress (0-100). */
1094
- progress: number;
1095
- /** Whether an upload is in progress. */
1096
- isUploading: boolean;
1097
- /** Upload result when complete. */
1098
- result: unknown | null;
1099
- /** Upload error message, if any. */
1100
- error: string | null;
1101
- /** Client-side validation error, if any. */
1102
- validationError: string | null;
1103
- /** Reset the upload state. */
1104
- reset: () => void;
1105
- };
1106
- /** Whether to allow multiple file uploads. */
1107
- multiple?: boolean;
1108
- /** Custom content to display inside the drop zone. */
1109
- children?: ReactNode;
1110
- };
1111
- /**
1112
- * Props for the ImagePreview component.
1113
- *
1114
- * Displays an image from `@cfast/storage` with signed URL handling. Supports
1115
- * both direct `src` URLs and storage `fileKey` resolution. Shows a fallback
1116
- * element when no image is available.
1117
- *
1118
- * @see {@link ImageFieldProps} for the inline field variant used in tables.
1119
- * @see {@link DropZoneProps} for uploading new images.
1120
- */
1121
- type ImagePreviewProps = {
1122
- /** Storage file key for signed URL resolution. */
1123
- fileKey?: string | null;
1124
- /** Direct image source URL. */
1125
- src?: string | null;
1126
- /** Storage configuration for URL resolution. */
1127
- storage?: unknown;
1128
- /** Function to resolve a file key to a URL. */
1129
- getUrl?: (key: string) => string;
1130
- /** Display width in pixels. Defaults to 200. */
1131
- width?: number;
1132
- /** Display height in pixels. Defaults to 200. */
1133
- height?: number;
1134
- /** Fallback element when no image is available. */
1135
- fallback?: ReactNode;
1136
- /** Alt text for the image. */
1137
- alt?: string;
1138
- };
1139
- /**
1140
- * Metadata for a single file in a {@link FileListProps}.
1141
- *
1142
- * Contains the file identifier, display name, optional size/type metadata,
1143
- * and an optional direct download URL.
1144
- *
1145
- * @see {@link FileListProps} which renders an array of these entries.
1146
- */
1147
- type FileListFile = {
1148
- /** Unique file identifier. */
1149
- key: string;
1150
- /** Display name of the file. */
1151
- name: string;
1152
- /** File size in bytes. */
1153
- size?: number;
1154
- /** MIME type of the file. */
1155
- type?: string;
1156
- /** Direct download URL. */
1157
- url?: string;
1158
- };
1159
- /**
1160
- * Props for the FileList component.
1161
- *
1162
- * Displays a list of uploaded files with metadata, download links, and
1163
- * permission-aware delete actions. Resolves download URLs from `@cfast/storage`
1164
- * when a storage configuration is provided.
1165
- *
1166
- * @see {@link FileListFile} for the shape of each file entry.
1167
- * @see {@link FileFieldProps} for the inline field variant used in tables.
1168
- */
1169
- type FileListProps = {
1170
- /** Array of file metadata to display. */
1171
- files: FileListFile[];
1172
- /** Storage configuration for download URL resolution. */
1173
- storage?: unknown;
1174
- /** Action descriptor for the delete button on each file. */
1175
- deleteAction?: ClientDescriptor;
1176
- /** Custom download handler. */
1177
- onDownload?: (file: FileListFile) => void;
1178
- };
1179
- /**
1180
- * Props for the AvatarWithInitials component.
1181
- *
1182
- * Avatar component with automatic initials fallback when no image is available.
1183
- * Extracts initials from the `name` prop (e.g., "Daniel Schmidt" becomes "DS").
1184
- * Used by {@link UserMenuProps} for the user avatar display.
1185
- */
1186
- type AvatarWithInitialsProps = {
1187
- /** Avatar image URL. Falls back to initials when null. */
1188
- src?: string | null;
1189
- /** Full name used to derive initials. */
1190
- name: string;
1191
- /** Avatar size. Defaults to "md". */
1192
- size?: "sm" | "md" | "lg";
1193
- };
1194
- /**
1195
- * Props for the RoleBadge component.
1196
- *
1197
- * Displays a colored chip badge for a user's role from `@cfast/permissions`.
1198
- * Colors are configurable per role name; defaults provide sensible mappings
1199
- * (e.g., "admin" -> danger, "editor" -> primary, "reader" -> neutral).
1200
- *
1201
- * @see {@link ChipSlotProps} for the underlying chip slot.
1202
- * @see {@link UserMenuProps} where role badges are displayed.
1203
- */
1204
- type RoleBadgeProps = {
1205
- /** Role name to display. */
1206
- role: string;
1207
- /** Custom color map from role name to chip color. */
1208
- colors?: Record<string, string>;
1209
- };
1210
- /**
1211
- * Props for the ImpersonationBanner component.
1212
- *
1213
- * Persistent banner shown when an admin is impersonating another user. Reads
1214
- * impersonation state from `@cfast/auth`. Hidden automatically when not
1215
- * impersonating. Displays the impersonated user's email and a "Stop Impersonating"
1216
- * button that submits to the configured `stopAction` URL.
1217
- */
1218
- type ImpersonationBannerProps = {
1219
- /** Form action URL for stopping impersonation. Defaults to "/admin/stop-impersonation". */
1220
- stopAction?: string;
1221
- };
1222
- /**
1223
- * Props for the NavigationProgress component.
1224
- *
1225
- * Thin progress bar rendered at the top of the page during React Router navigation
1226
- * transitions. Uses `useNavigation().state` to show on `"loading"` and hide on `"idle"`.
1227
- * Typically placed in the root layout; no configuration is required beyond optional color.
1228
- */
1229
- type NavigationProgressProps = {
1230
- /** Progress bar color. Defaults to "#1976d2". */
1231
- color?: string;
1232
- };
1233
-
1234
- export type { ToastApi as $, AppShellProps as A, BooleanFieldProps as B, ChipSlotProps as C, DateFieldProps as D, EmailFieldProps as E, FileFieldProps as F, FilterOption as G, FilterType as H, ImageFieldProps as I, JsonFieldProps as J, FormStatusData as K, FormStatusProps as L, ImagePreviewProps as M, NumberFieldProps as N, ImpersonationBannerProps as O, ListViewProps as P, PageContainerSlotProps as Q, RelationFieldProps as R, PermissionGateProps as S, TextFieldProps as T, UrlFieldProps as U, RoleBadgeProps as V, SidebarSlotProps as W, TableCellSlotProps as X, TableRowSlotProps as Y, TableSectionSlotProps as Z, TableSlotProps as _, BaseFieldProps as a, ToastOptions as a0, ToastSlotProps as a1, ToastType as a2, TooltipSlotProps as a3, UIPlugin as a4, UIPluginComponents as a5, UserMenuLink as a6, WhenForbidden as a7, EmptyStateProps as b, NavigationProgressProps as c, BreadcrumbItem as d, TabItem as e, NavigationItem as f, UserMenuProps as g, ActionButtonProps as h, AlertSlotProps as i, AppShellSlotProps as j, AvatarWithInitialsProps as k, BreadcrumbSlotProps as l, BulkAction as m, ButtonSlotProps as n, ColumnDef as o, ColumnShorthand as p, ConfirmDialogSlotProps as q, ConfirmOptions as r, DataTableProps as s, DetailViewProps as t, DropZoneProps as u, DropZoneSlotProps as v, FileListFile as w, FileListProps as x, FilterBarProps as y, FilterDef as z };