@dimaan/ui 0.0.11 → 0.0.13
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/index.cjs +15766 -134
- package/dist/index.cjs.map +1 -1
- package/dist/index.d.cts +266 -74
- package/dist/index.d.ts +266 -74
- package/dist/index.js +15675 -68
- package/dist/index.js.map +1 -1
- package/package.json +13 -11
package/dist/index.d.ts
CHANGED
|
@@ -1,6 +1,8 @@
|
|
|
1
1
|
import * as react_jsx_runtime from 'react/jsx-runtime';
|
|
2
2
|
import * as react from 'react';
|
|
3
|
-
import { HTMLAttributes, ReactNode,
|
|
3
|
+
import { HTMLAttributes, ReactNode, ButtonHTMLAttributes, ReactElement, InputHTMLAttributes, ChangeEvent, ComponentPropsWithoutRef, FieldsetHTMLAttributes, Ref, TextareaHTMLAttributes } from 'react';
|
|
4
|
+
import { LinkProps } from 'react-router-dom';
|
|
5
|
+
import { Locale } from 'react-day-picker';
|
|
4
6
|
import * as RadixDropdown from '@radix-ui/react-dropdown-menu';
|
|
5
7
|
import { FieldValues, FieldPath, Control } from 'react-hook-form';
|
|
6
8
|
import * as RadixRadioGroup from '@radix-ui/react-radio-group';
|
|
@@ -30,22 +32,85 @@ declare function DashboardLayout({ defaultCollapsed, collapsed: collapsedProp, o
|
|
|
30
32
|
type DashboardMainProps = HTMLAttributes<HTMLDivElement>;
|
|
31
33
|
declare function DashboardMain({ className, children, ...props }: DashboardMainProps): react_jsx_runtime.JSX.Element;
|
|
32
34
|
|
|
33
|
-
type
|
|
34
|
-
|
|
35
|
-
|
|
35
|
+
type SidebarProps = HTMLAttributes<HTMLElement>;
|
|
36
|
+
declare function Sidebar({ className, children, ...props }: SidebarProps): react_jsx_runtime.JSX.Element;
|
|
37
|
+
|
|
38
|
+
type SidebarFooterProps = HTMLAttributes<HTMLDivElement>;
|
|
39
|
+
declare function SidebarFooter({ className, children, ...props }: SidebarFooterProps): react_jsx_runtime.JSX.Element;
|
|
40
|
+
|
|
41
|
+
interface SidebarGroupProps extends HTMLAttributes<HTMLDivElement> {
|
|
42
|
+
label?: ReactNode;
|
|
43
|
+
}
|
|
44
|
+
declare function SidebarGroup({ label, className, children, ...props }: SidebarGroupProps): react_jsx_runtime.JSX.Element;
|
|
45
|
+
|
|
46
|
+
type SidebarHeaderProps = HTMLAttributes<HTMLDivElement>;
|
|
47
|
+
declare function SidebarHeader({ className, children, ...props }: SidebarHeaderProps): react_jsx_runtime.JSX.Element;
|
|
48
|
+
|
|
49
|
+
type SidebarNavProps = HTMLAttributes<HTMLElement>;
|
|
50
|
+
declare function SidebarNav({ className, children, ...props }: SidebarNavProps): react_jsx_runtime.JSX.Element;
|
|
51
|
+
|
|
52
|
+
interface SidebarNavGroupProps extends Omit<ButtonHTMLAttributes<HTMLButtonElement>, 'children'> {
|
|
53
|
+
icon?: ReactNode;
|
|
54
|
+
label?: ReactNode;
|
|
55
|
+
endSlot?: ReactNode;
|
|
56
|
+
/** Highlight the parent (e.g. when one of its children is active). */
|
|
57
|
+
active?: boolean;
|
|
58
|
+
/** Uncontrolled initial state. */
|
|
59
|
+
defaultOpen?: boolean;
|
|
60
|
+
/** Controlled open state. */
|
|
61
|
+
open?: boolean;
|
|
62
|
+
onOpenChange?: (open: boolean) => void;
|
|
63
|
+
children: ReactNode;
|
|
64
|
+
}
|
|
65
|
+
declare function SidebarNavGroup({ icon, label, endSlot, active, defaultOpen, open: openProp, onOpenChange, className, children, onClick, ...props }: SidebarNavGroupProps): react_jsx_runtime.JSX.Element;
|
|
66
|
+
|
|
67
|
+
type SidebarNavItemRenderProps = {
|
|
68
|
+
className: string;
|
|
36
69
|
children: ReactNode;
|
|
70
|
+
to: LinkProps['to'];
|
|
71
|
+
isActive: boolean;
|
|
72
|
+
title?: string;
|
|
37
73
|
'aria-current'?: 'page';
|
|
38
|
-
|
|
74
|
+
'data-active'?: 'true';
|
|
75
|
+
};
|
|
76
|
+
interface SidebarNavItemProps extends LinkProps {
|
|
77
|
+
icon?: ReactNode;
|
|
78
|
+
active?: boolean;
|
|
79
|
+
label?: ReactNode;
|
|
80
|
+
endSlot?: ReactNode;
|
|
81
|
+
/** Whether the link should match exactly. */
|
|
82
|
+
end?: boolean;
|
|
83
|
+
/**
|
|
84
|
+
* Override the rendered element. Use this to plug in routing-library link
|
|
85
|
+
* components (e.g. react-router `<Link>`) while keeping the styling.
|
|
86
|
+
*/
|
|
87
|
+
render?: (props: SidebarNavItemRenderProps) => ReactElement;
|
|
88
|
+
}
|
|
89
|
+
/**
|
|
90
|
+
* Individual navigation item inside a `<SidebarNav>` or `<SidebarGroup>`.
|
|
91
|
+
* Automatically detects active state based on the current route.
|
|
92
|
+
*
|
|
93
|
+
* @example Basic usage
|
|
94
|
+
* ```tsx
|
|
95
|
+
* <SidebarNavItem to="/dashboard" icon={<Home />}>
|
|
96
|
+
* Dashboard
|
|
97
|
+
* </SidebarNavItem>
|
|
98
|
+
* ```
|
|
99
|
+
*/
|
|
100
|
+
declare function SidebarNavItem({ icon, active: forcedActive, label, endSlot, className, children, render, to, end, ...props }: SidebarNavItemProps): react_jsx_runtime.JSX.Element;
|
|
101
|
+
|
|
39
102
|
interface AppShellNavItem {
|
|
40
103
|
/** Optional stable key. Falls back to array index if omitted — only safe for static nav. */
|
|
41
104
|
key?: string;
|
|
42
105
|
label: ReactNode;
|
|
43
|
-
|
|
106
|
+
to?: string;
|
|
44
107
|
icon?: ReactNode;
|
|
45
108
|
active?: boolean;
|
|
109
|
+
/** Whether the link should match exactly. */
|
|
110
|
+
end?: boolean;
|
|
46
111
|
endSlot?: ReactNode;
|
|
47
112
|
/** Optional render prop for routing libraries (e.g. react-router <Link>). */
|
|
48
|
-
render?:
|
|
113
|
+
render?: (props: SidebarNavItemRenderProps) => ReactElement;
|
|
49
114
|
}
|
|
50
115
|
interface AppShellNavGroup {
|
|
51
116
|
/** Optional stable key. Falls back to array index if omitted — only safe for static nav. */
|
|
@@ -91,14 +156,14 @@ interface AppShellProps extends Pick<DashboardLayoutProps, 'defaultCollapsed' |
|
|
|
91
156
|
* <AppShell
|
|
92
157
|
* brand={{ logo: <Logo />, name: 'Acme' }}
|
|
93
158
|
* nav={[
|
|
94
|
-
* { key: 'home', label: 'Home',
|
|
159
|
+
* { key: 'home', label: 'Home', to: '/', icon: <Home /> },
|
|
95
160
|
* {
|
|
96
161
|
* key: 'settings',
|
|
97
162
|
* label: 'Settings',
|
|
98
163
|
* icon: <Settings />,
|
|
99
164
|
* items: [
|
|
100
|
-
* { key: 'profile', label: 'Profile',
|
|
101
|
-
* { key: 'team', label: 'Team',
|
|
165
|
+
* { key: 'profile', label: 'Profile', to: '/settings/profile' },
|
|
166
|
+
* { key: 'team', label: 'Team', to: '/settings/team' },
|
|
102
167
|
* ],
|
|
103
168
|
* },
|
|
104
169
|
* ]}
|
|
@@ -111,14 +176,14 @@ interface AppShellProps extends Pick<DashboardLayoutProps, 'defaultCollapsed' |
|
|
|
111
176
|
* </AppShell>
|
|
112
177
|
* ```
|
|
113
178
|
*
|
|
114
|
-
* @example With
|
|
179
|
+
* @example With custom rendering
|
|
115
180
|
* ```tsx
|
|
116
181
|
* const nav = [{
|
|
117
182
|
* key: 'home',
|
|
118
183
|
* label: 'Home',
|
|
119
184
|
* icon: <Home />,
|
|
120
185
|
* render: ({ children, className, ...rest }) => (
|
|
121
|
-
* <
|
|
186
|
+
* <MyCustomLink {...rest} className={className}>{children}</MyCustomLink>
|
|
122
187
|
* ),
|
|
123
188
|
* }];
|
|
124
189
|
* ```
|
|
@@ -232,6 +297,152 @@ interface CheckboxProps extends Omit<InputHTMLAttributes<HTMLInputElement>, 'typ
|
|
|
232
297
|
}
|
|
233
298
|
declare const Checkbox: react.ForwardRefExoticComponent<CheckboxProps & react.RefAttributes<HTMLInputElement>>;
|
|
234
299
|
|
|
300
|
+
type DatePickerVariant = 'default' | 'filled' | 'ghost';
|
|
301
|
+
type DatePickerSize = 'sm' | 'md' | 'lg';
|
|
302
|
+
declare const datePickerTriggerVariantClass: Record<DatePickerVariant, string>;
|
|
303
|
+
/**
|
|
304
|
+
* Wider end-padding leaves room for the calendar icon and optional clear button.
|
|
305
|
+
* Logical properties keep RTL working free.
|
|
306
|
+
*/
|
|
307
|
+
declare const datePickerTriggerSizeClass: Record<DatePickerSize, string>;
|
|
308
|
+
declare const datePickerTriggerBaseClass = "group/datepicker relative inline-flex w-full items-center text-foreground outline-none transition-[background-color,border-color,box-shadow] focus-visible:ring-2 focus-visible:ring-ring/40 focus-visible:ring-offset-1 focus-visible:ring-offset-background aria-[invalid=true]:border-destructive aria-[invalid=true]:focus-visible:ring-destructive/40 disabled:pointer-events-none disabled:opacity-50 cursor-pointer";
|
|
309
|
+
/** Empty-state trigger text (placeholder color). */
|
|
310
|
+
declare const datePickerPlaceholderClass = "truncate text-muted-foreground";
|
|
311
|
+
/** Filled-state trigger text. */
|
|
312
|
+
declare const datePickerValueClass = "truncate text-foreground";
|
|
313
|
+
/** Popover content (the open calendar panel). */
|
|
314
|
+
declare const datePickerContentClass = "z-50 overflow-hidden rounded-md border border-border bg-popover p-3 text-popover-foreground shadow-md data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95";
|
|
315
|
+
/** Wrapper applied to the `<DayPicker>` root via its `className` prop. */
|
|
316
|
+
declare const datePickerCalendarClass = "text-sm";
|
|
317
|
+
/** Month/year caption row. */
|
|
318
|
+
declare const datePickerCaptionClass = "flex items-center justify-between gap-2 pb-2 text-sm font-semibold";
|
|
319
|
+
/** Prev/Next nav buttons. */
|
|
320
|
+
declare const datePickerNavButtonClass = "inline-flex h-7 w-7 items-center justify-center rounded-md border border-input bg-background text-foreground transition-colors hover:bg-accent hover:text-accent-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring/40 disabled:pointer-events-none disabled:opacity-50";
|
|
321
|
+
/** Day cell wrapper (`td`). */
|
|
322
|
+
declare const datePickerDayWrapperClass = "p-0 text-center";
|
|
323
|
+
/**
|
|
324
|
+
* Day button — base style for every clickable day. Modifier states (selected,
|
|
325
|
+
* today, outside-month, disabled) are applied to the wrapping day **cell** by
|
|
326
|
+
* react-day-picker and target the button via descendant selectors below.
|
|
327
|
+
*/
|
|
328
|
+
declare const datePickerDayBaseClass = "inline-flex h-8 w-8 items-center justify-center rounded-md text-sm text-foreground font-normal transition-colors hover:bg-accent hover:text-accent-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring/40";
|
|
329
|
+
/** Day cell modifier — applied to the currently selected day. Targets the inner button. */
|
|
330
|
+
declare const datePickerSelectedClass = "[&_button]:bg-primary [&_button]:text-primary-foreground [&_button]:hover:bg-primary [&_button]:hover:text-primary-foreground";
|
|
331
|
+
/** Day cell modifier — applied to today. */
|
|
332
|
+
declare const datePickerTodayClass = "[&_button]:font-semibold [&_button]:ring-1 [&_button]:ring-inset [&_button]:ring-ring/40";
|
|
333
|
+
/** Day cell modifier — applied to days from the previous / next month. */
|
|
334
|
+
declare const datePickerOutsideClass = "[&_button]:text-muted-foreground [&_button]:opacity-60";
|
|
335
|
+
/** Day cell modifier — applied to days outside min/max bounds (or custom matcher). */
|
|
336
|
+
declare const datePickerDisabledClass = "[&_button]:pointer-events-none [&_button]:opacity-40";
|
|
337
|
+
/** Weekday header cells. */
|
|
338
|
+
declare const datePickerWeekdayClass = "h-8 w-8 text-center text-xs font-medium text-muted-foreground";
|
|
339
|
+
/** Week row. */
|
|
340
|
+
declare const datePickerWeekClass = "flex w-full";
|
|
341
|
+
/** Weekdays row. */
|
|
342
|
+
declare const datePickerWeekdaysClass = "flex w-full";
|
|
343
|
+
/** Month grid (`table`). */
|
|
344
|
+
declare const datePickerMonthGridClass = "w-full border-collapse";
|
|
345
|
+
/** Months container. */
|
|
346
|
+
declare const datePickerMonthsClass = "flex flex-col gap-3";
|
|
347
|
+
/** Single month wrapper. */
|
|
348
|
+
declare const datePickerMonthClass = "flex flex-col gap-2";
|
|
349
|
+
/** Nav row (wraps prev/next buttons). */
|
|
350
|
+
declare const datePickerNavClass = "flex items-center gap-1";
|
|
351
|
+
|
|
352
|
+
interface DatePickerProps {
|
|
353
|
+
variant?: DatePickerVariant;
|
|
354
|
+
/** Visual size. Named `inputSize` to mirror `Input`'s `inputSize`. */
|
|
355
|
+
inputSize?: DatePickerSize;
|
|
356
|
+
/** Controlled ISO `YYYY-MM-DD` value. Pass `''` to clear. */
|
|
357
|
+
value?: string;
|
|
358
|
+
/** Uncontrolled initial ISO value. */
|
|
359
|
+
defaultValue?: string;
|
|
360
|
+
/** Fires with the new ISO string (or `''` when cleared). */
|
|
361
|
+
onValueChange?: (value: string) => void;
|
|
362
|
+
/**
|
|
363
|
+
* Synthetic-event handler for `react-hook-form`'s `field.onChange`. Both this
|
|
364
|
+
* and `onValueChange` fire on selection / clearing.
|
|
365
|
+
*/
|
|
366
|
+
onChange?: (event: ChangeEvent<HTMLInputElement>) => void;
|
|
367
|
+
/** Called when focus leaves the trigger. */
|
|
368
|
+
onBlur?: () => void;
|
|
369
|
+
/** Native form name — rendered as a hidden input so submissions include the value. */
|
|
370
|
+
name?: string;
|
|
371
|
+
/** Override id (otherwise auto-generated). */
|
|
372
|
+
id?: string;
|
|
373
|
+
/** Disables the trigger and prevents the popover from opening. */
|
|
374
|
+
disabled?: boolean;
|
|
375
|
+
/** Marks the underlying value as required (for form validation). */
|
|
376
|
+
required?: boolean;
|
|
377
|
+
/** Disable dates strictly before this ISO date. */
|
|
378
|
+
min?: string;
|
|
379
|
+
/** Disable dates strictly after this ISO date. */
|
|
380
|
+
max?: string;
|
|
381
|
+
/** Placeholder shown when no date is selected. */
|
|
382
|
+
placeholder?: string;
|
|
383
|
+
/** Show an × button to clear the selection. Defaults to `true`. */
|
|
384
|
+
clearable?: boolean;
|
|
385
|
+
/** Accessible label for the clear button. Defaults to `'Clear date'`. */
|
|
386
|
+
clearLabel?: string;
|
|
387
|
+
/**
|
|
388
|
+
* Locale for calendar month / weekday names. Import from
|
|
389
|
+
* `react-day-picker/locale` (e.g. `import { arSA } from 'react-day-picker/locale'`).
|
|
390
|
+
* Defaults to English when omitted.
|
|
391
|
+
*/
|
|
392
|
+
locale?: Locale;
|
|
393
|
+
/**
|
|
394
|
+
* `Intl.DateTimeFormat` options for the trigger display. Defaults to
|
|
395
|
+
* `{ dateStyle: 'medium' }`.
|
|
396
|
+
*/
|
|
397
|
+
formatOptions?: Intl.DateTimeFormatOptions;
|
|
398
|
+
/** Popover side. */
|
|
399
|
+
side?: 'top' | 'bottom' | 'left' | 'right';
|
|
400
|
+
/** Popover alignment. */
|
|
401
|
+
align?: 'start' | 'center' | 'end';
|
|
402
|
+
'aria-invalid'?: boolean | 'true' | 'false';
|
|
403
|
+
'aria-describedby'?: string;
|
|
404
|
+
'aria-label'?: string;
|
|
405
|
+
/** Class applied to the trigger button. */
|
|
406
|
+
className?: string;
|
|
407
|
+
/** Class applied to the popover content (calendar panel). */
|
|
408
|
+
contentClassName?: string;
|
|
409
|
+
}
|
|
410
|
+
/**
|
|
411
|
+
* Modern date picker built on `@radix-ui/react-popover` + `react-day-picker`.
|
|
412
|
+
* Renders a `Select`-shaped trigger button + a calendar popup. **No
|
|
413
|
+
* label/helperText/error props by design** (ADR-007: Field owns all form
|
|
414
|
+
* layout). Wrap in `<Field label="…">` for label + helper + error wiring.
|
|
415
|
+
*
|
|
416
|
+
* Values are ISO `YYYY-MM-DD` strings — directly compatible with `zod.string().date()`
|
|
417
|
+
* and native form submission via the optional hidden `<input>` (when `name` is set).
|
|
418
|
+
*
|
|
419
|
+
* @example Inside a Field (RHF + Zod)
|
|
420
|
+
* ```tsx
|
|
421
|
+
* <Field name="dob" label="Date of birth" required>
|
|
422
|
+
* <DatePicker max={todayIso} />
|
|
423
|
+
* </Field>
|
|
424
|
+
* ```
|
|
425
|
+
*
|
|
426
|
+
* @example Bare with Arabic month names
|
|
427
|
+
* ```tsx
|
|
428
|
+
* import { arSA } from 'react-day-picker/locale';
|
|
429
|
+
*
|
|
430
|
+
* <DatePicker
|
|
431
|
+
* value={from}
|
|
432
|
+
* onValueChange={setFrom}
|
|
433
|
+
* locale={arSA}
|
|
434
|
+
* placeholder="اختر تاريخ"
|
|
435
|
+
* aria-label="من تاريخ"
|
|
436
|
+
* />
|
|
437
|
+
* ```
|
|
438
|
+
*
|
|
439
|
+
* @example Bounded range
|
|
440
|
+
* ```tsx
|
|
441
|
+
* <DatePicker min="2026-01-01" max="2026-12-31" />
|
|
442
|
+
* ```
|
|
443
|
+
*/
|
|
444
|
+
declare const DatePicker: react.ForwardRefExoticComponent<DatePickerProps & react.RefAttributes<HTMLButtonElement>>;
|
|
445
|
+
|
|
235
446
|
type DropdownMenuItemVariant = 'default' | 'destructive';
|
|
236
447
|
declare const dropdownMenuContentClass = "z-50 min-w-32 overflow-hidden rounded-md border border-border bg-popover p-1 text-popover-foreground shadow-md data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95";
|
|
237
448
|
declare const dropdownMenuItemBaseClass = "relative flex w-full cursor-pointer select-none items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-none transition-colors data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:size-4 [&_svg]:shrink-0";
|
|
@@ -784,7 +995,7 @@ interface ListPageEmptyState {
|
|
|
784
995
|
icon?: ReactNode;
|
|
785
996
|
title?: ReactNode;
|
|
786
997
|
description?: ReactNode;
|
|
787
|
-
/** Override the default
|
|
998
|
+
/** Override the default action button. Pass `null` to hide entirely. */
|
|
788
999
|
action?: ReactNode | null;
|
|
789
1000
|
}
|
|
790
1001
|
interface ListPageLabels {
|
|
@@ -794,10 +1005,14 @@ interface ListPageLabels {
|
|
|
794
1005
|
searchAriaLabel?: string;
|
|
795
1006
|
/** Default "Reset filters" button label. */
|
|
796
1007
|
reset?: string;
|
|
797
|
-
/** Default
|
|
1008
|
+
/** Default "no results matching filters" title. */
|
|
798
1009
|
emptyTitle?: string;
|
|
799
|
-
/** Default
|
|
1010
|
+
/** Default "no results matching filters" description. */
|
|
800
1011
|
emptyDescription?: string;
|
|
1012
|
+
/** Default "no data at all" title (shown when `data` is empty + no filters active). */
|
|
1013
|
+
noDataTitle?: string;
|
|
1014
|
+
/** Default "no data at all" description. */
|
|
1015
|
+
noDataDescription?: string;
|
|
801
1016
|
}
|
|
802
1017
|
interface ListPageProps<T> {
|
|
803
1018
|
title: ReactNode;
|
|
@@ -809,12 +1024,28 @@ interface ListPageProps<T> {
|
|
|
809
1024
|
data: T[];
|
|
810
1025
|
columns: Column<T>[];
|
|
811
1026
|
getRowId: (row: T) => string;
|
|
1027
|
+
/** Show skeleton rows in the table area while data is fetching. */
|
|
1028
|
+
isLoading?: boolean;
|
|
1029
|
+
/** Number of skeleton rows rendered while loading. Defaults to the table page size. */
|
|
1030
|
+
loadingRowCount?: number;
|
|
812
1031
|
/** Keys on `T` to search. Search input only renders when this is provided. */
|
|
813
1032
|
searchKeys?: Array<keyof T>;
|
|
814
1033
|
filters?: ListPageFilter<T>[];
|
|
815
1034
|
enableRowSelection?: boolean;
|
|
816
1035
|
bulkActions?: (selected: T[]) => ReactNode;
|
|
1036
|
+
/**
|
|
1037
|
+
* Shown when filters/search are active but match zero rows. Falls back to a
|
|
1038
|
+
* "No results — try clearing the search or adjusting the filters" prompt
|
|
1039
|
+
* with a reset button.
|
|
1040
|
+
*/
|
|
817
1041
|
emptyState?: ListPageEmptyState;
|
|
1042
|
+
/**
|
|
1043
|
+
* Shown when `data` is empty AND no filters/search are active (first-run
|
|
1044
|
+
* state). Falls back to a friendly "No data yet" message with an Inbox
|
|
1045
|
+
* icon. When `actions` is set, you typically want to encourage creation
|
|
1046
|
+
* via this slot's `action`.
|
|
1047
|
+
*/
|
|
1048
|
+
noDataState?: ListPageEmptyState;
|
|
818
1049
|
labels?: ListPageLabels;
|
|
819
1050
|
className?: string;
|
|
820
1051
|
}
|
|
@@ -827,6 +1058,11 @@ interface ListPageProps<T> {
|
|
|
827
1058
|
* sync, drop down to the underlying primitives directly (see the
|
|
828
1059
|
* `RecipeListPage` playground page for the manual composition pattern).
|
|
829
1060
|
*
|
|
1061
|
+
* **Three rendering branches in the table area:**
|
|
1062
|
+
* - `isLoading` → Table with skeleton rows (filter bar stays interactive).
|
|
1063
|
+
* - `data` empty AND no filters active → `noDataState` (first-run prompt).
|
|
1064
|
+
* - filters return zero rows → `emptyState` (with a reset action by default).
|
|
1065
|
+
*
|
|
830
1066
|
* @example Basic — Users list
|
|
831
1067
|
* ```tsx
|
|
832
1068
|
* <ListPage
|
|
@@ -834,6 +1070,7 @@ interface ListPageProps<T> {
|
|
|
834
1070
|
* description="Manage your team members."
|
|
835
1071
|
* actions={<Button onClick={openCreate}>Add user</Button>}
|
|
836
1072
|
* data={users}
|
|
1073
|
+
* isLoading={query.isLoading}
|
|
837
1074
|
* columns={USER_COLUMNS}
|
|
838
1075
|
* getRowId={(u) => u.id}
|
|
839
1076
|
* searchKeys={['name', 'email']}
|
|
@@ -851,6 +1088,11 @@ interface ListPageProps<T> {
|
|
|
851
1088
|
* ]}
|
|
852
1089
|
* enableRowSelection
|
|
853
1090
|
* bulkActions={(rows) => <Button variant="destructive">Delete ({rows.length})</Button>}
|
|
1091
|
+
* noDataState={{
|
|
1092
|
+
* title: 'No users yet',
|
|
1093
|
+
* description: 'Invite your first team member to get started.',
|
|
1094
|
+
* action: <Button onClick={openCreate}>Add user</Button>,
|
|
1095
|
+
* }}
|
|
854
1096
|
* />
|
|
855
1097
|
* ```
|
|
856
1098
|
*
|
|
@@ -863,16 +1105,18 @@ interface ListPageProps<T> {
|
|
|
863
1105
|
* reset: 'إعادة الفلاتر',
|
|
864
1106
|
* emptyTitle: 'لا توجد نتائج',
|
|
865
1107
|
* emptyDescription: 'حاول مسح البحث أو تغيير الفلاتر.',
|
|
1108
|
+
* noDataTitle: 'لا توجد بيانات بعد',
|
|
1109
|
+
* noDataDescription: 'لم يتم إضافة أي شيء هنا حتى الآن.',
|
|
866
1110
|
* }}
|
|
867
1111
|
* />
|
|
868
1112
|
* ```
|
|
869
1113
|
*/
|
|
870
|
-
declare function ListPage<T>({ title, description, bordered, actions, data, columns, getRowId, searchKeys, filters, enableRowSelection, bulkActions, emptyState, labels: labelsProp, className, }: ListPageProps<T>): react_jsx_runtime.JSX.Element;
|
|
1114
|
+
declare function ListPage<T>({ title, description, bordered, actions, data, columns, getRowId, isLoading, loadingRowCount, searchKeys, filters, enableRowSelection, bulkActions, emptyState, noDataState, labels: labelsProp, className, }: ListPageProps<T>): react_jsx_runtime.JSX.Element;
|
|
871
1115
|
|
|
872
1116
|
type PageHeaderHeadingLevel = 'h1' | 'h2' | 'h3' | 'h4';
|
|
873
1117
|
/** Props passed to the routing-library `render` slot of the back button. */
|
|
874
1118
|
interface PageHeaderBackRenderProps {
|
|
875
|
-
|
|
1119
|
+
to?: LinkProps['to'];
|
|
876
1120
|
className?: string;
|
|
877
1121
|
children: ReactNode;
|
|
878
1122
|
onClick?: () => void;
|
|
@@ -880,11 +1124,11 @@ interface PageHeaderBackRenderProps {
|
|
|
880
1124
|
interface PageHeaderBackProps {
|
|
881
1125
|
/** Visible label next to the arrow. Defaults to `"Back"`. */
|
|
882
1126
|
label?: ReactNode;
|
|
883
|
-
/** Target
|
|
884
|
-
|
|
1127
|
+
/** Target to — renders a React Router `<Link>`. */
|
|
1128
|
+
to?: LinkProps['to'];
|
|
885
1129
|
/** Click handler — renders a `<button>` (or wraps the `render` element). */
|
|
886
1130
|
onClick?: () => void;
|
|
887
|
-
/** Routing-library render prop (e.g. wrap
|
|
1131
|
+
/** Routing-library render prop (e.g. wrap a different link component). Wins over `to`. */
|
|
888
1132
|
render?: (props: PageHeaderBackRenderProps) => ReactElement;
|
|
889
1133
|
}
|
|
890
1134
|
interface PageHeaderProps extends Omit<HTMLAttributes<HTMLElement>, 'title'> {
|
|
@@ -929,7 +1173,7 @@ interface PageHeaderProps extends Omit<HTMLAttributes<HTMLElement>, 'title'> {
|
|
|
929
1173
|
* description={user.email}
|
|
930
1174
|
* back={{
|
|
931
1175
|
* label: 'Users',
|
|
932
|
-
*
|
|
1176
|
+
* to: '/users',
|
|
933
1177
|
* }}
|
|
934
1178
|
* actions={
|
|
935
1179
|
* <>
|
|
@@ -1090,58 +1334,6 @@ declare const RadioGroupItem: react.ForwardRefExoticComponent<Omit<RadixRadioGro
|
|
|
1090
1334
|
radioSize?: RadioGroupSize;
|
|
1091
1335
|
} & react.RefAttributes<HTMLButtonElement>>;
|
|
1092
1336
|
|
|
1093
|
-
type SidebarProps = HTMLAttributes<HTMLElement>;
|
|
1094
|
-
declare function Sidebar({ className, children, ...props }: SidebarProps): react_jsx_runtime.JSX.Element;
|
|
1095
|
-
|
|
1096
|
-
type SidebarFooterProps = HTMLAttributes<HTMLDivElement>;
|
|
1097
|
-
declare function SidebarFooter({ className, children, ...props }: SidebarFooterProps): react_jsx_runtime.JSX.Element;
|
|
1098
|
-
|
|
1099
|
-
interface SidebarGroupProps extends HTMLAttributes<HTMLDivElement> {
|
|
1100
|
-
label?: ReactNode;
|
|
1101
|
-
}
|
|
1102
|
-
declare function SidebarGroup({ label, className, children, ...props }: SidebarGroupProps): react_jsx_runtime.JSX.Element;
|
|
1103
|
-
|
|
1104
|
-
type SidebarHeaderProps = HTMLAttributes<HTMLDivElement>;
|
|
1105
|
-
declare function SidebarHeader({ className, children, ...props }: SidebarHeaderProps): react_jsx_runtime.JSX.Element;
|
|
1106
|
-
|
|
1107
|
-
type SidebarNavProps = HTMLAttributes<HTMLElement>;
|
|
1108
|
-
declare function SidebarNav({ className, children, ...props }: SidebarNavProps): react_jsx_runtime.JSX.Element;
|
|
1109
|
-
|
|
1110
|
-
interface SidebarNavGroupProps extends Omit<ButtonHTMLAttributes<HTMLButtonElement>, 'children'> {
|
|
1111
|
-
icon?: ReactNode;
|
|
1112
|
-
label?: ReactNode;
|
|
1113
|
-
endSlot?: ReactNode;
|
|
1114
|
-
/** Highlight the parent (e.g. when one of its children is active). */
|
|
1115
|
-
active?: boolean;
|
|
1116
|
-
/** Uncontrolled initial state. */
|
|
1117
|
-
defaultOpen?: boolean;
|
|
1118
|
-
/** Controlled open state. */
|
|
1119
|
-
open?: boolean;
|
|
1120
|
-
onOpenChange?: (open: boolean) => void;
|
|
1121
|
-
children: ReactNode;
|
|
1122
|
-
}
|
|
1123
|
-
declare function SidebarNavGroup({ icon, label, endSlot, active, defaultOpen, open: openProp, onOpenChange, className, children, onClick, ...props }: SidebarNavGroupProps): react_jsx_runtime.JSX.Element;
|
|
1124
|
-
|
|
1125
|
-
type SidebarNavItemRenderProps = {
|
|
1126
|
-
className: string;
|
|
1127
|
-
children: ReactNode;
|
|
1128
|
-
title?: string;
|
|
1129
|
-
'aria-current'?: 'page';
|
|
1130
|
-
'data-active'?: 'true';
|
|
1131
|
-
};
|
|
1132
|
-
interface SidebarNavItemProps extends AnchorHTMLAttributes<HTMLAnchorElement> {
|
|
1133
|
-
icon?: ReactNode;
|
|
1134
|
-
active?: boolean;
|
|
1135
|
-
label?: ReactNode;
|
|
1136
|
-
endSlot?: ReactNode;
|
|
1137
|
-
/**
|
|
1138
|
-
* Override the rendered element. Use this to plug in routing-library link
|
|
1139
|
-
* components (e.g. react-router `<Link>`) while keeping the styling.
|
|
1140
|
-
*/
|
|
1141
|
-
render?: (props: SidebarNavItemRenderProps) => ReactElement;
|
|
1142
|
-
}
|
|
1143
|
-
declare function SidebarNavItem({ icon, active, label, endSlot, className, children, render, ...props }: SidebarNavItemProps): react_jsx_runtime.JSX.Element;
|
|
1144
|
-
|
|
1145
1337
|
type SwitchSize = 'sm' | 'md' | 'lg';
|
|
1146
1338
|
/**
|
|
1147
1339
|
* Each size is a tuple: track dimensions + thumb size + thumb travel distance.
|
|
@@ -1261,4 +1453,4 @@ declare function useDirection(): Direction;
|
|
|
1261
1453
|
|
|
1262
1454
|
declare function cn(...inputs: ClassValue[]): string;
|
|
1263
1455
|
|
|
1264
|
-
export { AppShell, type AppShellBrand, type AppShellNavGroup, type AppShellNavItem, type AppShellProps, Avatar, type AvatarProps, Badge, type BadgeProps, type BadgeSize, type BadgeVariant, Button, type ButtonProps, type ButtonSize, type ButtonVariant, Checkbox, type CheckboxProps, type CheckboxSize, type Column, type ColumnAlign, DashboardContent, type DashboardContentProps, DashboardHeader, type DashboardHeaderProps, DashboardLayout, type DashboardLayoutContextValue, type DashboardLayoutProps, DashboardMain, type DashboardMainProps, type Direction, DropdownMenu, DropdownMenuContent, type DropdownMenuContentProps, DropdownMenuGroup, DropdownMenuItem, type DropdownMenuItemProps, type DropdownMenuItemVariant, DropdownMenuLabel, type DropdownMenuLabelProps, DropdownMenuPortal, DropdownMenuSeparator, type DropdownMenuSeparatorProps, DropdownMenuShortcut, type DropdownMenuShortcutProps, DropdownMenuTrigger, EmptyState, type EmptyStateProps, type EmptyStateSize, Field, type FieldOrientation, type FieldProps, type FieldRHFProps, HeaderActions, type HeaderActionsProps, HeaderCollapseTrigger, type HeaderCollapseTriggerProps, HeaderMobileTrigger, type HeaderMobileTriggerProps, HeaderSearch, type HeaderSearchProps, HeaderTitle, type HeaderTitleProps, Input, type InputProps, type InputSize, type InputVariant, type LanguageOption, LanguageSwitcher, type LanguageSwitcherProps, ListPage, type ListPageEmptyState, type ListPageFilter, type ListPageLabels, type ListPageProps, PageHeader, type PageHeaderBackProps, type PageHeaderBackRenderProps, type PageHeaderHeadingLevel, type PageHeaderProps, type PaginationState, RadioGroup, RadioGroupItem, type RadioGroupOption, type RadioGroupOrientation, type RadioGroupProps, type RadioGroupSize, type RowSelectionState, Select, type SelectOption, type SelectProps, type SelectSize, type SelectVariant, Sidebar, SidebarFooter, type SidebarFooterProps, SidebarGroup, type SidebarGroupProps, SidebarHeader, type SidebarHeaderProps, SidebarNav, SidebarNavGroup, type SidebarNavGroupProps, SidebarNavItem, type SidebarNavItemProps, type SidebarNavItemRenderProps, type SidebarNavProps, type SidebarProps, type SortDirection, type SortState, type SortableValue, Switch, type SwitchProps, type SwitchSize, Table, type TableProps, type TableSize, type TableSizeClasses, Textarea, type TextareaProps, type TextareaResize, type TextareaSize, type TextareaVariant, badgeBaseClass, badgeDotSizeClass, badgeSizeClass, badgeVariantClass, buttonBaseClass, buttonSizeClass, buttonVariantClass, cn, dropdownMenuContentClass, dropdownMenuItemBaseClass, dropdownMenuItemInsetClass, dropdownMenuItemVariantClass, dropdownMenuLabelClass, dropdownMenuSeparatorClass, dropdownMenuShortcutClass, emptyStateActionsSpacingClass, emptyStateBaseClass, emptyStateContainerSizeClass, emptyStateDescriptionSizeClass, emptyStateIconWrapperBaseClass, emptyStateIconWrapperSizeClass, emptyStateTitleSizeClass, inputBaseClass, inputSizeClass, inputVariantClass, pageHeaderActionsClass, pageHeaderBackClass, pageHeaderBackIconClass, pageHeaderBaseClass, pageHeaderBorderedClass, pageHeaderBreadcrumbsClass, pageHeaderDescriptionClass, pageHeaderTitleBlockClass, pageHeaderTitleClass, pageHeaderTitleRowClass, radioGroupBaseClass, radioGroupOrientationClass, radioIndicatorBaseClass, radioIndicatorDotClass, radioIndicatorSizeClass, radioItemBaseClass, radioItemSizeClass, radioLabelSizeClass, radioOptionRowClass, selectBaseClass, selectSizeClass, selectVariantClass, switchThumbBaseClass, switchThumbClass, switchTrackBaseClass, switchTrackClass, alignClass as tableAlignClass, tableBaseClass, selectedRowClass as tableSelectedRowClass, tableSizeClass, sortIconClass as tableSortIconClass, textareaBaseClass, textareaResizeClass, textareaSizeClass, textareaVariantClass, useDashboardLayout, useDirection };
|
|
1456
|
+
export { AppShell, type AppShellBrand, type AppShellNavGroup, type AppShellNavItem, type AppShellProps, Avatar, type AvatarProps, Badge, type BadgeProps, type BadgeSize, type BadgeVariant, Button, type ButtonProps, type ButtonSize, type ButtonVariant, Checkbox, type CheckboxProps, type CheckboxSize, type Column, type ColumnAlign, DashboardContent, type DashboardContentProps, DashboardHeader, type DashboardHeaderProps, DashboardLayout, type DashboardLayoutContextValue, type DashboardLayoutProps, DashboardMain, type DashboardMainProps, DatePicker, type DatePickerProps, type DatePickerSize, type DatePickerVariant, type Direction, DropdownMenu, DropdownMenuContent, type DropdownMenuContentProps, DropdownMenuGroup, DropdownMenuItem, type DropdownMenuItemProps, type DropdownMenuItemVariant, DropdownMenuLabel, type DropdownMenuLabelProps, DropdownMenuPortal, DropdownMenuSeparator, type DropdownMenuSeparatorProps, DropdownMenuShortcut, type DropdownMenuShortcutProps, DropdownMenuTrigger, EmptyState, type EmptyStateProps, type EmptyStateSize, Field, type FieldOrientation, type FieldProps, type FieldRHFProps, HeaderActions, type HeaderActionsProps, HeaderCollapseTrigger, type HeaderCollapseTriggerProps, HeaderMobileTrigger, type HeaderMobileTriggerProps, HeaderSearch, type HeaderSearchProps, HeaderTitle, type HeaderTitleProps, Input, type InputProps, type InputSize, type InputVariant, type LanguageOption, LanguageSwitcher, type LanguageSwitcherProps, ListPage, type ListPageEmptyState, type ListPageFilter, type ListPageLabels, type ListPageProps, PageHeader, type PageHeaderBackProps, type PageHeaderBackRenderProps, type PageHeaderHeadingLevel, type PageHeaderProps, type PaginationState, RadioGroup, RadioGroupItem, type RadioGroupOption, type RadioGroupOrientation, type RadioGroupProps, type RadioGroupSize, type RowSelectionState, Select, type SelectOption, type SelectProps, type SelectSize, type SelectVariant, Sidebar, SidebarFooter, type SidebarFooterProps, SidebarGroup, type SidebarGroupProps, SidebarHeader, type SidebarHeaderProps, SidebarNav, SidebarNavGroup, type SidebarNavGroupProps, SidebarNavItem, type SidebarNavItemProps, type SidebarNavItemRenderProps, type SidebarNavProps, type SidebarProps, type SortDirection, type SortState, type SortableValue, Switch, type SwitchProps, type SwitchSize, Table, type TableProps, type TableSize, type TableSizeClasses, Textarea, type TextareaProps, type TextareaResize, type TextareaSize, type TextareaVariant, badgeBaseClass, badgeDotSizeClass, badgeSizeClass, badgeVariantClass, buttonBaseClass, buttonSizeClass, buttonVariantClass, cn, datePickerCalendarClass, datePickerCaptionClass, datePickerContentClass, datePickerDayBaseClass, datePickerDayWrapperClass, datePickerDisabledClass, datePickerMonthClass, datePickerMonthGridClass, datePickerMonthsClass, datePickerNavButtonClass, datePickerNavClass, datePickerOutsideClass, datePickerPlaceholderClass, datePickerSelectedClass, datePickerTodayClass, datePickerTriggerBaseClass, datePickerTriggerSizeClass, datePickerTriggerVariantClass, datePickerValueClass, datePickerWeekClass, datePickerWeekdayClass, datePickerWeekdaysClass, dropdownMenuContentClass, dropdownMenuItemBaseClass, dropdownMenuItemInsetClass, dropdownMenuItemVariantClass, dropdownMenuLabelClass, dropdownMenuSeparatorClass, dropdownMenuShortcutClass, emptyStateActionsSpacingClass, emptyStateBaseClass, emptyStateContainerSizeClass, emptyStateDescriptionSizeClass, emptyStateIconWrapperBaseClass, emptyStateIconWrapperSizeClass, emptyStateTitleSizeClass, inputBaseClass, inputSizeClass, inputVariantClass, pageHeaderActionsClass, pageHeaderBackClass, pageHeaderBackIconClass, pageHeaderBaseClass, pageHeaderBorderedClass, pageHeaderBreadcrumbsClass, pageHeaderDescriptionClass, pageHeaderTitleBlockClass, pageHeaderTitleClass, pageHeaderTitleRowClass, radioGroupBaseClass, radioGroupOrientationClass, radioIndicatorBaseClass, radioIndicatorDotClass, radioIndicatorSizeClass, radioItemBaseClass, radioItemSizeClass, radioLabelSizeClass, radioOptionRowClass, selectBaseClass, selectSizeClass, selectVariantClass, switchThumbBaseClass, switchThumbClass, switchTrackBaseClass, switchTrackClass, alignClass as tableAlignClass, tableBaseClass, selectedRowClass as tableSelectedRowClass, tableSizeClass, sortIconClass as tableSortIconClass, textareaBaseClass, textareaResizeClass, textareaSizeClass, textareaVariantClass, useDashboardLayout, useDirection };
|