@alsha-research/picaso-ui 0.0.2 → 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 +8880 -1024
- package/dist/index.cjs.map +1 -1
- package/dist/index.css +1043 -3
- package/dist/index.css.map +1 -1
- package/dist/index.d.cts +1699 -50
- package/dist/index.d.ts +1699 -50
- package/dist/index.js +8904 -1051
- package/dist/index.js.map +1 -1
- package/package.json +1 -1
package/dist/index.d.cts
CHANGED
|
@@ -32,7 +32,41 @@ type AccordionContentProps = {
|
|
|
32
32
|
};
|
|
33
33
|
declare function AccordionContent({ children }: AccordionContentProps): React.JSX.Element;
|
|
34
34
|
|
|
35
|
-
|
|
35
|
+
type Intent = "primary" | "success" | "warning" | "error" | "default";
|
|
36
|
+
interface AlertProps {
|
|
37
|
+
/** Optional. Bold first line. */
|
|
38
|
+
title?: React.ReactNode;
|
|
39
|
+
/** Optional. Message text. */
|
|
40
|
+
children?: React.ReactNode;
|
|
41
|
+
/** Optional. Defaults to "primary". */
|
|
42
|
+
intent?: Intent;
|
|
43
|
+
/** Optional. "soft" = tinted, "solid" = strong filled bar (good for announcements). Defaults to "soft". */
|
|
44
|
+
appearance?: "soft" | "solid";
|
|
45
|
+
/** Optional. Full-width page banner: no rounded corners and no side borders. Defaults to false. */
|
|
46
|
+
banner?: boolean;
|
|
47
|
+
/** Optional. Custom icon, or false to hide the icon. Defaults to an icon matching the intent. */
|
|
48
|
+
icon?: JSX.Element | false;
|
|
49
|
+
/** Optional. Buttons or links shown at the end (or under the text on small screens). */
|
|
50
|
+
actions?: React.ReactNode;
|
|
51
|
+
/** Optional. Show a close button. Defaults to false. */
|
|
52
|
+
dismissible?: boolean;
|
|
53
|
+
/** Optional. Called when the close button is pressed. */
|
|
54
|
+
onDismiss?: () => void;
|
|
55
|
+
/** Optional. Controlled visibility. When omitted, the alert hides itself after dismiss. */
|
|
56
|
+
open?: boolean;
|
|
57
|
+
/** Optional. Center the content (usual for banners). Defaults to false. */
|
|
58
|
+
centered?: boolean;
|
|
59
|
+
/** Optional. Override the ARIA role. Errors and warnings default to "alert", others to "status". */
|
|
60
|
+
role?: "alert" | "status" | "region";
|
|
61
|
+
className?: string;
|
|
62
|
+
id?: string;
|
|
63
|
+
}
|
|
64
|
+
declare const Alert: {
|
|
65
|
+
({ title, children, intent, appearance, banner, icon, actions, dismissible, onDismiss, open, centered, role, className, id, }: AlertProps): React.JSX.Element | null;
|
|
66
|
+
displayName: string;
|
|
67
|
+
};
|
|
68
|
+
|
|
69
|
+
interface BaseProps$1 {
|
|
36
70
|
type: "image" | "icon" | "text";
|
|
37
71
|
size?: "sm" | "md" | "lg";
|
|
38
72
|
className?: string;
|
|
@@ -46,16 +80,16 @@ interface BaseProps {
|
|
|
46
80
|
statusIcon?: JSX.Element;
|
|
47
81
|
statusPosition?: "top-right" | "top-left" | "bottom-right" | "bottom-left";
|
|
48
82
|
}
|
|
49
|
-
interface ImageProps extends BaseProps {
|
|
83
|
+
interface ImageProps extends BaseProps$1 {
|
|
50
84
|
type: "image";
|
|
51
85
|
src: string;
|
|
52
86
|
alt?: string;
|
|
53
87
|
}
|
|
54
|
-
interface IconProps extends BaseProps {
|
|
88
|
+
interface IconProps extends BaseProps$1 {
|
|
55
89
|
type: "icon";
|
|
56
90
|
icon: JSX.Element;
|
|
57
91
|
}
|
|
58
|
-
interface TextProps extends BaseProps {
|
|
92
|
+
interface TextProps extends BaseProps$1 {
|
|
59
93
|
type: "text";
|
|
60
94
|
text: string;
|
|
61
95
|
}
|
|
@@ -71,6 +105,36 @@ interface AvatarGroupProps {
|
|
|
71
105
|
}
|
|
72
106
|
declare const AvatarGroup: React.ForwardRefExoticComponent<AvatarGroupProps & React.RefAttributes<HTMLDivElement>>;
|
|
73
107
|
|
|
108
|
+
interface BadgeProps {
|
|
109
|
+
/** Optional. Element the badge is attached to (icon, avatar, button…). Omit for a standalone badge. */
|
|
110
|
+
children?: React.ReactNode;
|
|
111
|
+
/** Optional. Number or short text shown in the badge. */
|
|
112
|
+
content?: number | string;
|
|
113
|
+
/** Optional. Show a small dot instead of content. Defaults to false. */
|
|
114
|
+
dot?: boolean;
|
|
115
|
+
/** Optional. Numbers above this show as "max+" (e.g. 99+). Defaults to 99. */
|
|
116
|
+
max?: number;
|
|
117
|
+
/** Optional. Show the badge when content is 0. Defaults to false. */
|
|
118
|
+
showZero?: boolean;
|
|
119
|
+
/** Optional. Hide the badge without unmounting it. */
|
|
120
|
+
invisible?: boolean;
|
|
121
|
+
/** Optional. Defaults to "error". */
|
|
122
|
+
intent?: "primary" | "error" | "success" | "warning" | "default";
|
|
123
|
+
/** Optional. Defaults to "md". */
|
|
124
|
+
size?: "sm" | "md";
|
|
125
|
+
/** Optional. Corner of the child where the badge sits. Defaults to "top-right". */
|
|
126
|
+
placement?: "top-right" | "top-left" | "bottom-right" | "bottom-left";
|
|
127
|
+
/** Optional. Pulsing ring, useful for a dot that needs attention. Defaults to false. */
|
|
128
|
+
pulse?: boolean;
|
|
129
|
+
/** Optional. Text for screen readers, e.g. "3 unread messages". Defaults to the content. */
|
|
130
|
+
label?: string;
|
|
131
|
+
className?: string;
|
|
132
|
+
}
|
|
133
|
+
declare const Badge: {
|
|
134
|
+
({ children, content, dot, max, showZero, invisible, intent, size, placement, pulse, label, className, }: BadgeProps): React.JSX.Element | null;
|
|
135
|
+
displayName: string;
|
|
136
|
+
};
|
|
137
|
+
|
|
74
138
|
type BreadcrumbsProps = {
|
|
75
139
|
children: React.ReactNode;
|
|
76
140
|
separator?: React.ReactNode;
|
|
@@ -102,8 +166,8 @@ interface ButtonProps extends ButtonHTMLAttributes<HTMLButtonElement>, VariantPr
|
|
|
102
166
|
loadingIndicator?: ReactNode;
|
|
103
167
|
}
|
|
104
168
|
declare const buttonVariants: (props?: ({
|
|
105
|
-
variant?: "link" | "
|
|
106
|
-
intent?: "
|
|
169
|
+
variant?: "link" | "soft" | "filled" | "outlined" | "ghost" | null | undefined;
|
|
170
|
+
intent?: "primary" | "success" | "warning" | "error" | "default" | "blue" | "indigo" | "orange" | "pink" | "purple" | "violet" | "bluegray" | "bluelight" | "rose" | "primary-outlined" | "success-outlined" | "error-outlined" | "warning-outlined" | "default-outlined" | "blue-outlined" | "bluegray-outlined" | "bluelight-outlined" | "indigo-outlined" | "purple-outlined" | "violet-outlined" | "pink-outlined" | "rose-outlined" | "orange-outlined" | null | undefined;
|
|
107
171
|
size?: "sm" | "md" | "lg" | "xs" | "xl" | null | undefined;
|
|
108
172
|
iconOnly?: boolean | null | undefined;
|
|
109
173
|
} & class_variance_authority_types.ClassProp) | undefined) => string;
|
|
@@ -165,7 +229,7 @@ declare const Calendar: {
|
|
|
165
229
|
|
|
166
230
|
declare const calloutVariants: (props?: ({
|
|
167
231
|
variant?: "filled" | "outlined" | null | undefined;
|
|
168
|
-
intent?: "primary" | "success" | "
|
|
232
|
+
intent?: "primary" | "success" | "warning" | "error" | "default" | null | undefined;
|
|
169
233
|
size?: "sm" | "md" | "lg" | "xs" | null | undefined;
|
|
170
234
|
} & class_variance_authority_types.ClassProp) | undefined) => string;
|
|
171
235
|
interface CalloutProps extends VariantProps<typeof calloutVariants> {
|
|
@@ -214,7 +278,7 @@ declare const CardFooter: React.FC<CardFooterProps>;
|
|
|
214
278
|
|
|
215
279
|
declare const checkboxVariant: (props?: ({
|
|
216
280
|
size?: "sm" | "lg" | "xl" | null | undefined;
|
|
217
|
-
intent?: "
|
|
281
|
+
intent?: "primary" | "success" | "warning" | "error" | "default" | "blue" | "indigo" | "orange" | "pink" | "purple" | "violet" | "bluegray" | "bluelight" | "rose" | null | undefined;
|
|
218
282
|
} & class_variance_authority_types.ClassProp) | undefined) => string;
|
|
219
283
|
interface CheckboxProps extends Omit<React.InputHTMLAttributes<HTMLInputElement>, "size">, VariantProps<typeof checkboxVariant> {
|
|
220
284
|
size?: "sm" | "lg" | "xl";
|
|
@@ -229,8 +293,8 @@ interface ChipProps extends HTMLAttributes<HTMLSpanElement>, VariantProps<typeof
|
|
|
229
293
|
endIcon?: JSX.Element;
|
|
230
294
|
}
|
|
231
295
|
declare const chipVariants: (props?: ({
|
|
232
|
-
variant?: "
|
|
233
|
-
intent?: "
|
|
296
|
+
variant?: "soft" | "solid" | "outlined" | null | undefined;
|
|
297
|
+
intent?: "primary" | "success" | "warning" | "error" | "default" | "blue" | "indigo" | "orange" | "pink" | "purple" | "violet" | "bluegray" | "bluelight" | "rose" | null | undefined;
|
|
234
298
|
size?: "sm" | "md" | "lg" | null | undefined;
|
|
235
299
|
} & class_variance_authority_types.ClassProp) | undefined) => string;
|
|
236
300
|
declare const Chip: ({ children, className, size, variant, intent, dot, dotColor, startIcon, endIcon, ...rest }: ChipProps) => React.JSX.Element;
|
|
@@ -244,6 +308,103 @@ interface CircularProgressBarProps {
|
|
|
244
308
|
}
|
|
245
309
|
declare const CircularProgressBar: ({ percentage, size, strokeWidth, text, textClassName, }: CircularProgressBarProps) => React.JSX.Element;
|
|
246
310
|
|
|
311
|
+
interface SelectOption {
|
|
312
|
+
label: string;
|
|
313
|
+
value: string | number;
|
|
314
|
+
/** Optional. Unselectable and skipped by the keyboard. */
|
|
315
|
+
disabled?: boolean;
|
|
316
|
+
/** Optional. Secondary line under the label. */
|
|
317
|
+
description?: string;
|
|
318
|
+
/** Optional. Icon shown before the label. */
|
|
319
|
+
icon?: JSX.Element;
|
|
320
|
+
}
|
|
321
|
+
interface SelectGroup {
|
|
322
|
+
label: string;
|
|
323
|
+
options: SelectOption[];
|
|
324
|
+
}
|
|
325
|
+
interface SelectProps {
|
|
326
|
+
/** Flat options, or groups of options. */
|
|
327
|
+
options: (SelectOption | SelectGroup)[];
|
|
328
|
+
/** Controlled value. Use null for "nothing selected". */
|
|
329
|
+
value?: string | number | null;
|
|
330
|
+
/** Uncontrolled initial value. */
|
|
331
|
+
defaultValue?: string | number | null;
|
|
332
|
+
/** Called with the new value (null when cleared) and its option. */
|
|
333
|
+
onChange?: (value: string | number | null, option: SelectOption | null) => void;
|
|
334
|
+
placeholder?: string;
|
|
335
|
+
disabled?: boolean;
|
|
336
|
+
error?: boolean;
|
|
337
|
+
/** Optional. "sm" = 320px, "lg" = 313px, default = full width (same as Input). */
|
|
338
|
+
size?: "sm" | "lg";
|
|
339
|
+
/** Optional. Open the list above or below. Defaults to "bottom". */
|
|
340
|
+
placement?: "bottom" | "top";
|
|
341
|
+
/** Optional. Show a clear button when a value is selected. Defaults to false. */
|
|
342
|
+
clearable?: boolean;
|
|
343
|
+
/** Optional. Max height of the list in px. Defaults to 264. */
|
|
344
|
+
maxHeight?: number;
|
|
345
|
+
/** Optional. Text shown when options is empty. */
|
|
346
|
+
emptyText?: string;
|
|
347
|
+
id?: string;
|
|
348
|
+
/** Optional. Adds a hidden input for native forms. */
|
|
349
|
+
name?: string;
|
|
350
|
+
className?: string;
|
|
351
|
+
"aria-label"?: string;
|
|
352
|
+
"aria-describedby"?: string;
|
|
353
|
+
}
|
|
354
|
+
declare const Select: {
|
|
355
|
+
({ options, value, defaultValue, onChange, placeholder, disabled, error, size, placement, clearable, maxHeight, emptyText, id, name, className, "aria-label": ariaLabel, "aria-describedby": ariaDescribedby, }: SelectProps): React.JSX.Element;
|
|
356
|
+
displayName: string;
|
|
357
|
+
};
|
|
358
|
+
|
|
359
|
+
type ComboboxOption = SelectOption;
|
|
360
|
+
type ComboboxGroup = SelectGroup;
|
|
361
|
+
interface ComboboxProps {
|
|
362
|
+
/** Flat options, or groups of options. */
|
|
363
|
+
options: (ComboboxOption | ComboboxGroup)[];
|
|
364
|
+
/** Controlled value. Use null for "nothing selected". */
|
|
365
|
+
value?: string | number | null;
|
|
366
|
+
/** Uncontrolled initial value. */
|
|
367
|
+
defaultValue?: string | number | null;
|
|
368
|
+
/** Called with the new value (null when cleared) and its option. */
|
|
369
|
+
onChange?: (value: string | number | null, option: ComboboxOption | null) => void;
|
|
370
|
+
/** Optional. Called whenever the user types. Use it to fetch options from a server. */
|
|
371
|
+
onInputChange?: (query: string) => void;
|
|
372
|
+
/**
|
|
373
|
+
* Optional. Custom matcher, or false to turn off client-side filtering
|
|
374
|
+
* (when you filter on the server). Defaults to a case-insensitive "contains" match on the label.
|
|
375
|
+
*/
|
|
376
|
+
filter?: ((option: ComboboxOption, query: string) => boolean) | false;
|
|
377
|
+
/** Optional. Shows a "Loading…" row. */
|
|
378
|
+
loading?: boolean;
|
|
379
|
+
/** Optional. Offer a "Create …" row when the typed text matches no option. */
|
|
380
|
+
allowCreate?: boolean;
|
|
381
|
+
/** Optional. Called when the user chooses the "Create …" row. Add the option and set the value yourself. */
|
|
382
|
+
onCreate?: (label: string) => void;
|
|
383
|
+
placeholder?: string;
|
|
384
|
+
/** Optional. Text shown when nothing matches. */
|
|
385
|
+
emptyText?: string;
|
|
386
|
+
disabled?: boolean;
|
|
387
|
+
error?: boolean;
|
|
388
|
+
/** Optional. "sm" = 320px, "lg" = 313px, default = full width (same as Input). */
|
|
389
|
+
size?: "sm" | "lg";
|
|
390
|
+
/** Optional. Open the list above or below. Defaults to "bottom". */
|
|
391
|
+
placement?: "bottom" | "top";
|
|
392
|
+
/** Optional. Show a clear button when a value is selected. Defaults to true. */
|
|
393
|
+
clearable?: boolean;
|
|
394
|
+
/** Optional. Max height of the list in px. Defaults to 264. */
|
|
395
|
+
maxHeight?: number;
|
|
396
|
+
id?: string;
|
|
397
|
+
/** Optional. Adds a hidden input for native forms. */
|
|
398
|
+
name?: string;
|
|
399
|
+
className?: string;
|
|
400
|
+
"aria-label"?: string;
|
|
401
|
+
"aria-describedby"?: string;
|
|
402
|
+
}
|
|
403
|
+
declare const Combobox: {
|
|
404
|
+
({ options, value, defaultValue, onChange, onInputChange, filter, loading, allowCreate, onCreate, placeholder, emptyText, disabled, error, size, placement, clearable, maxHeight, id, name, className, "aria-label": ariaLabel, "aria-describedby": ariaDescribedby, }: ComboboxProps): React.JSX.Element;
|
|
405
|
+
displayName: string;
|
|
406
|
+
};
|
|
407
|
+
|
|
247
408
|
declare const SHADES: readonly [25, 50, 100, 200, 300, 400, 500, 600, 700, 800, 900];
|
|
248
409
|
declare const PALETTE: {
|
|
249
410
|
readonly primary: {
|
|
@@ -474,6 +635,1316 @@ declare const DateRangePicker: {
|
|
|
474
635
|
displayName: string;
|
|
475
636
|
};
|
|
476
637
|
|
|
638
|
+
interface ContextMenuProps {
|
|
639
|
+
children: React.ReactNode;
|
|
640
|
+
/** Optional. Called when the menu opens or closes. */
|
|
641
|
+
onOpenChange?: (open: boolean) => void;
|
|
642
|
+
/** Optional. Turn the custom menu off so the browser's own context menu shows. */
|
|
643
|
+
disabled?: boolean;
|
|
644
|
+
}
|
|
645
|
+
declare const ContextMenu: ({ children, onOpenChange, disabled }: ContextMenuProps) => React.JSX.Element;
|
|
646
|
+
interface ContextMenuTriggerProps extends React.HTMLAttributes<HTMLDivElement> {
|
|
647
|
+
children: React.ReactNode;
|
|
648
|
+
/** Optional. Press-and-hold time in ms that opens the menu on touch screens. Defaults to 600. */
|
|
649
|
+
longPressMs?: number;
|
|
650
|
+
}
|
|
651
|
+
declare const ContextMenuTrigger: ({ children, className, longPressMs, onContextMenu, onKeyDown, onPointerDown, onPointerMove, onPointerUp, onPointerCancel, ...rest }: ContextMenuTriggerProps) => React.JSX.Element;
|
|
652
|
+
interface ContextMenuContentProps extends React.HTMLAttributes<HTMLDivElement> {
|
|
653
|
+
children: React.ReactNode;
|
|
654
|
+
"aria-label"?: string;
|
|
655
|
+
}
|
|
656
|
+
declare const ContextMenuContent: ({ children, className, style, ...rest }: ContextMenuContentProps) => React.ReactPortal | null;
|
|
657
|
+
interface BaseItemProps extends Omit<React.HTMLAttributes<HTMLDivElement>, "onSelect"> {
|
|
658
|
+
/** Optional. Icon shown before the label. */
|
|
659
|
+
icon?: JSX.Element;
|
|
660
|
+
/** Optional. Shortcut hint shown at the end, such as "Ctrl+C". Display only. */
|
|
661
|
+
shortcut?: string;
|
|
662
|
+
disabled?: boolean;
|
|
663
|
+
/** Optional. Use "danger" for destructive actions. */
|
|
664
|
+
intent?: "default" | "danger";
|
|
665
|
+
/** Optional. Close the menu after selecting. Defaults to true for items, false for checkbox items. */
|
|
666
|
+
closeOnSelect?: boolean;
|
|
667
|
+
}
|
|
668
|
+
interface ContextMenuItemProps extends BaseItemProps {
|
|
669
|
+
/** Called when the item is chosen by click, Enter or Space. */
|
|
670
|
+
onSelect?: () => void;
|
|
671
|
+
}
|
|
672
|
+
declare const ContextMenuItem: ({ children, icon, shortcut, disabled, intent, closeOnSelect, onSelect, className, ...rest }: ContextMenuItemProps) => React.JSX.Element;
|
|
673
|
+
interface ContextMenuCheckboxItemProps extends BaseItemProps {
|
|
674
|
+
checked: boolean;
|
|
675
|
+
onCheckedChange?: (checked: boolean) => void;
|
|
676
|
+
}
|
|
677
|
+
declare const ContextMenuCheckboxItem: ({ children, checked, onCheckedChange, icon, shortcut, disabled, intent, closeOnSelect, className, ...rest }: ContextMenuCheckboxItemProps) => React.JSX.Element;
|
|
678
|
+
declare const ContextMenuLabel: ({ children, className, ...rest }: React.HTMLAttributes<HTMLDivElement>) => React.JSX.Element;
|
|
679
|
+
declare const ContextMenuSeparator: ({ className, ...rest }: React.HTMLAttributes<HTMLDivElement>) => React.JSX.Element;
|
|
680
|
+
declare const ContextMenuSub: ({ children }: {
|
|
681
|
+
children: React.ReactNode;
|
|
682
|
+
}) => React.JSX.Element;
|
|
683
|
+
declare const ContextMenuSubTrigger: ({ children, icon, disabled, className, ...rest }: Omit<BaseItemProps, "shortcut" | "intent" | "closeOnSelect">) => React.JSX.Element;
|
|
684
|
+
declare const ContextMenuSubContent: ({ children, className, style, ...rest }: ContextMenuContentProps) => React.ReactPortal | null;
|
|
685
|
+
|
|
686
|
+
interface CommandItem {
|
|
687
|
+
/** Unique id for the command. */
|
|
688
|
+
id: string;
|
|
689
|
+
/** Text shown and searched. */
|
|
690
|
+
label: string;
|
|
691
|
+
/** Optional. Secondary text shown under the label and searched too. */
|
|
692
|
+
description?: string;
|
|
693
|
+
/** Optional. Icon shown before the label. */
|
|
694
|
+
icon?: JSX.Element;
|
|
695
|
+
/** Optional. Shortcut hint shown at the end, such as "Ctrl+N". Display only. */
|
|
696
|
+
shortcut?: string;
|
|
697
|
+
/** Optional. Extra words that should match this command in search. */
|
|
698
|
+
keywords?: string[];
|
|
699
|
+
disabled?: boolean;
|
|
700
|
+
/** Called when the command is chosen. */
|
|
701
|
+
onSelect?: () => void;
|
|
702
|
+
}
|
|
703
|
+
interface CommandGroup {
|
|
704
|
+
/** Optional. Heading shown above the group. */
|
|
705
|
+
heading?: string;
|
|
706
|
+
items: CommandItem[];
|
|
707
|
+
}
|
|
708
|
+
interface CommandPaletteProps {
|
|
709
|
+
open: boolean;
|
|
710
|
+
onOpenChange: (open: boolean) => void;
|
|
711
|
+
/** The commands, organised in groups. */
|
|
712
|
+
groups: CommandGroup[];
|
|
713
|
+
/** Optional. Placeholder in the search field. Defaults to "Search commands…". */
|
|
714
|
+
placeholder?: string;
|
|
715
|
+
/** Optional. Message when nothing matches. Defaults to "No results found." */
|
|
716
|
+
emptyMessage?: string;
|
|
717
|
+
/** Optional. Accessible name for the dialog. Defaults to "Command palette". */
|
|
718
|
+
"aria-label"?: string;
|
|
719
|
+
/** Optional. Global key combo that toggles the palette, such as "mod+k" (mod = Ctrl on Windows/Linux, Cmd on Mac). */
|
|
720
|
+
hotkey?: string;
|
|
721
|
+
/** Optional. Close after a command is chosen. Defaults to true. */
|
|
722
|
+
closeOnSelect?: boolean;
|
|
723
|
+
/** Optional. Replace the built-in search. Return true to keep the item. */
|
|
724
|
+
filter?: (item: CommandItem, query: string) => boolean;
|
|
725
|
+
/** Optional. Class name for the panel. */
|
|
726
|
+
className?: string;
|
|
727
|
+
}
|
|
728
|
+
declare const CommandPalette: ({ open, onOpenChange, groups, placeholder, emptyMessage, "aria-label": ariaLabel, hotkey, closeOnSelect, filter, className, }: CommandPaletteProps) => React.ReactPortal | null;
|
|
729
|
+
|
|
730
|
+
interface MenubarProps extends React.HTMLAttributes<HTMLDivElement> {
|
|
731
|
+
children: React.ReactNode;
|
|
732
|
+
/** Accessible name for the menu bar. */
|
|
733
|
+
"aria-label"?: string;
|
|
734
|
+
}
|
|
735
|
+
declare const Menubar: ({ children, className, ...rest }: MenubarProps) => React.JSX.Element;
|
|
736
|
+
declare const MenubarMenu: ({ children }: {
|
|
737
|
+
children: React.ReactNode;
|
|
738
|
+
}) => React.JSX.Element;
|
|
739
|
+
interface MenubarTriggerProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
|
|
740
|
+
children: React.ReactNode;
|
|
741
|
+
}
|
|
742
|
+
declare const MenubarTrigger: ({ children, className, onClick, onKeyDown, onMouseEnter, ...rest }: MenubarTriggerProps) => React.JSX.Element;
|
|
743
|
+
interface MenubarContentProps extends React.HTMLAttributes<HTMLDivElement> {
|
|
744
|
+
children: React.ReactNode;
|
|
745
|
+
"aria-label"?: string;
|
|
746
|
+
}
|
|
747
|
+
declare const MenubarContent: ({ children, className, style, ...rest }: MenubarContentProps) => React.ReactPortal | null;
|
|
748
|
+
interface BaseProps extends Omit<React.HTMLAttributes<HTMLDivElement>, "onSelect"> {
|
|
749
|
+
/** Optional. Icon shown before the label. */
|
|
750
|
+
icon?: JSX.Element;
|
|
751
|
+
/** Optional. Shortcut hint, display only. */
|
|
752
|
+
shortcut?: string;
|
|
753
|
+
disabled?: boolean;
|
|
754
|
+
/** Optional. Use "danger" for destructive actions. */
|
|
755
|
+
intent?: "default" | "danger";
|
|
756
|
+
/** Optional. Close the menu after selecting. Defaults to true for items, false for checkbox items. */
|
|
757
|
+
closeOnSelect?: boolean;
|
|
758
|
+
}
|
|
759
|
+
interface MenubarItemProps extends BaseProps {
|
|
760
|
+
/** Called when the item is chosen by click, Enter or Space. */
|
|
761
|
+
onSelect?: () => void;
|
|
762
|
+
}
|
|
763
|
+
declare const MenubarItem: ({ children, icon, shortcut, disabled, intent, closeOnSelect, onSelect, className, ...rest }: MenubarItemProps) => React.JSX.Element;
|
|
764
|
+
interface MenubarCheckboxItemProps extends BaseProps {
|
|
765
|
+
checked: boolean;
|
|
766
|
+
onCheckedChange?: (checked: boolean) => void;
|
|
767
|
+
}
|
|
768
|
+
declare const MenubarCheckboxItem: ({ children, checked, onCheckedChange, icon, shortcut, disabled, intent, closeOnSelect, className, ...rest }: MenubarCheckboxItemProps) => React.JSX.Element;
|
|
769
|
+
declare const MenubarLabel: ({ children, className, ...rest }: React.HTMLAttributes<HTMLDivElement>) => React.JSX.Element;
|
|
770
|
+
declare const MenubarSeparator: ({ className, ...rest }: React.HTMLAttributes<HTMLDivElement>) => React.JSX.Element;
|
|
771
|
+
declare const MenubarSub: ({ children }: {
|
|
772
|
+
children: React.ReactNode;
|
|
773
|
+
}) => React.JSX.Element;
|
|
774
|
+
declare const MenubarSubTrigger: ({ children, icon, disabled, className, ...rest }: Omit<BaseProps, "shortcut" | "intent" | "closeOnSelect">) => React.JSX.Element;
|
|
775
|
+
declare const MenubarSubContent: ({ children, className, style, ...rest }: MenubarContentProps) => React.ReactPortal | null;
|
|
776
|
+
|
|
777
|
+
interface NavbarItem {
|
|
778
|
+
/** Unique id. */
|
|
779
|
+
id: string;
|
|
780
|
+
label: string;
|
|
781
|
+
/** Optional. Link target. Items without an href render as buttons. */
|
|
782
|
+
href?: string;
|
|
783
|
+
/** Optional. Icon shown before the label. */
|
|
784
|
+
icon?: JSX.Element;
|
|
785
|
+
/** Optional. Marks the current page (adds aria-current="page"). */
|
|
786
|
+
active?: boolean;
|
|
787
|
+
disabled?: boolean;
|
|
788
|
+
/** Optional. Called when the item is clicked. */
|
|
789
|
+
onClick?: (e: React.MouseEvent) => void;
|
|
790
|
+
}
|
|
791
|
+
interface NavbarLinkRenderProps {
|
|
792
|
+
href: string;
|
|
793
|
+
className: string;
|
|
794
|
+
children: React.ReactNode;
|
|
795
|
+
onClick?: (e: React.MouseEvent) => void;
|
|
796
|
+
"aria-current"?: "page";
|
|
797
|
+
}
|
|
798
|
+
interface NavbarProps extends Omit<React.HTMLAttributes<HTMLElement>, "children"> {
|
|
799
|
+
/** Optional. Logo or product name shown at the start. */
|
|
800
|
+
brand?: React.ReactNode;
|
|
801
|
+
/** Optional. Navigation links. */
|
|
802
|
+
items?: NavbarItem[];
|
|
803
|
+
/** Optional. Content at the end, such as buttons, a search field or an avatar. */
|
|
804
|
+
actions?: React.ReactNode;
|
|
805
|
+
/** Optional. Extra content in the middle, between the links and the actions. */
|
|
806
|
+
children?: React.ReactNode;
|
|
807
|
+
/** Optional. Visual style. Defaults to "default". */
|
|
808
|
+
variant?: "default" | "transparent" | "primary";
|
|
809
|
+
/** Optional. Stick to the top of the page while scrolling. Defaults to false. */
|
|
810
|
+
sticky?: boolean;
|
|
811
|
+
/** Optional. Show a bottom border. Defaults to true. */
|
|
812
|
+
bordered?: boolean;
|
|
813
|
+
/** Optional. Width at which the links collapse into a menu button. Defaults to "md". */
|
|
814
|
+
collapseBelow?: "sm" | "md" | "lg";
|
|
815
|
+
/** Optional. Maximum content width. Defaults to "7xl". */
|
|
816
|
+
maxWidth?: "3xl" | "5xl" | "7xl" | "full";
|
|
817
|
+
/** Optional. Accessible name for the navigation. Defaults to "Main". */
|
|
818
|
+
"aria-label"?: string;
|
|
819
|
+
/** Optional. Render links with your router's Link component, for example Next.js Link. */
|
|
820
|
+
renderLink?: (props: NavbarLinkRenderProps) => React.ReactNode;
|
|
821
|
+
}
|
|
822
|
+
declare const Navbar: ({ brand, items, actions, children, variant, sticky, bordered, collapseBelow, maxWidth, "aria-label": ariaLabel, renderLink, className, ...rest }: NavbarProps) => React.JSX.Element;
|
|
823
|
+
|
|
824
|
+
type TimelineStatus = "completed" | "current" | "upcoming" | "error";
|
|
825
|
+
interface TimelineItem {
|
|
826
|
+
/** Unique id. */
|
|
827
|
+
id: string;
|
|
828
|
+
/** Short heading for the event. */
|
|
829
|
+
title: React.ReactNode;
|
|
830
|
+
/** Optional. Supporting text under the title. */
|
|
831
|
+
description?: React.ReactNode;
|
|
832
|
+
/** Optional. Date or time label, such as "2 hours ago". */
|
|
833
|
+
time?: string;
|
|
834
|
+
/** Optional. Machine-readable date for the time element, such as "2026-11-05". */
|
|
835
|
+
dateTime?: string;
|
|
836
|
+
/** Optional. Replaces the default marker (check, cross or dot). */
|
|
837
|
+
icon?: JSX.Element;
|
|
838
|
+
/** Optional. Controls the marker colour. Defaults to "completed". */
|
|
839
|
+
status?: TimelineStatus;
|
|
840
|
+
/** Optional. Extra content below the description, such as a card or attachment. */
|
|
841
|
+
content?: React.ReactNode;
|
|
842
|
+
}
|
|
843
|
+
interface TimelineProps extends Omit<React.OlHTMLAttributes<HTMLOListElement>, "children"> {
|
|
844
|
+
items: TimelineItem[];
|
|
845
|
+
/** Optional. Layout direction. Defaults to "vertical". */
|
|
846
|
+
orientation?: "vertical" | "horizontal";
|
|
847
|
+
/** Optional. Marker size. Defaults to "md". */
|
|
848
|
+
size?: "sm" | "md";
|
|
849
|
+
/** Optional. Put the time on the left of the marker in vertical layouts. Defaults to false. */
|
|
850
|
+
timeOnSide?: boolean;
|
|
851
|
+
/** Optional. Accessible name for the list. */
|
|
852
|
+
"aria-label"?: string;
|
|
853
|
+
}
|
|
854
|
+
declare const Timeline: ({ items, orientation, size, timeOnSide, className, ...rest }: TimelineProps) => React.JSX.Element;
|
|
855
|
+
|
|
856
|
+
interface CarouselProps extends Omit<React.HTMLAttributes<HTMLDivElement>, "onChange" | "children"> {
|
|
857
|
+
/** The slides. Each child becomes one slide. */
|
|
858
|
+
children: React.ReactNode;
|
|
859
|
+
/** Optional. Controlled index of the first visible slide. */
|
|
860
|
+
index?: number;
|
|
861
|
+
/** Optional. Starting index when uncontrolled. Defaults to 0. */
|
|
862
|
+
defaultIndex?: number;
|
|
863
|
+
/** Optional. Called when the visible slide changes. */
|
|
864
|
+
onIndexChange?: (index: number) => void;
|
|
865
|
+
/** Optional. Slides visible at once. Defaults to 1. */
|
|
866
|
+
slidesPerView?: 1 | 2 | 3 | 4;
|
|
867
|
+
/** Optional. Space between slides in pixels. Defaults to 16. */
|
|
868
|
+
gap?: number;
|
|
869
|
+
/** Optional. Wrap from the last slide to the first and back. Defaults to false. */
|
|
870
|
+
loop?: boolean;
|
|
871
|
+
/** Optional. Show previous and next buttons. Defaults to true. */
|
|
872
|
+
arrows?: boolean;
|
|
873
|
+
/** Optional. Show dot indicators. Defaults to true. */
|
|
874
|
+
dots?: boolean;
|
|
875
|
+
/** Optional. Milliseconds between automatic slides. 0 turns autoplay off. Defaults to 0. */
|
|
876
|
+
autoplay?: number;
|
|
877
|
+
/** Optional. Allow dragging or swiping. Defaults to true. */
|
|
878
|
+
swipe?: boolean;
|
|
879
|
+
/** Optional. Accessible name for the carousel. Defaults to "Carousel". */
|
|
880
|
+
"aria-label"?: string;
|
|
881
|
+
/** Optional. Class name for the sliding area. */
|
|
882
|
+
viewportClassName?: string;
|
|
883
|
+
}
|
|
884
|
+
declare const Carousel: ({ children, index: controlled, defaultIndex, onIndexChange, slidesPerView, gap, loop, arrows, dots, autoplay, swipe, "aria-label": ariaLabel, className, viewportClassName, ...rest }: CarouselProps) => React.JSX.Element;
|
|
885
|
+
|
|
886
|
+
interface GalleryImage {
|
|
887
|
+
/** Full size image URL. */
|
|
888
|
+
src: string;
|
|
889
|
+
/** Text description of the image. Use "" only for purely decorative images. */
|
|
890
|
+
alt: string;
|
|
891
|
+
/** Optional. Smaller image used in the grid and thumbnail strip. Defaults to src. */
|
|
892
|
+
thumbnail?: string;
|
|
893
|
+
/** Optional. Caption shown in the lightbox. */
|
|
894
|
+
caption?: React.ReactNode;
|
|
895
|
+
}
|
|
896
|
+
interface LightboxProps {
|
|
897
|
+
images: GalleryImage[];
|
|
898
|
+
open: boolean;
|
|
899
|
+
/** Index of the image being shown. */
|
|
900
|
+
index: number;
|
|
901
|
+
/** Called when the user moves to another image. */
|
|
902
|
+
onIndexChange: (index: number) => void;
|
|
903
|
+
/** Called when the lightbox should close. */
|
|
904
|
+
onClose: () => void;
|
|
905
|
+
/** Optional. Wrap around at the first and last image. Defaults to false. */
|
|
906
|
+
loop?: boolean;
|
|
907
|
+
/** Optional. Show the thumbnail strip. Defaults to true. */
|
|
908
|
+
showThumbnails?: boolean;
|
|
909
|
+
/** Optional. Show the zoom button. Defaults to true. */
|
|
910
|
+
zoom?: boolean;
|
|
911
|
+
/** Optional. Accessible name for the dialog. Defaults to "Image viewer". */
|
|
912
|
+
"aria-label"?: string;
|
|
913
|
+
}
|
|
914
|
+
declare const Lightbox: ({ images, open, index, onIndexChange, onClose, loop, showThumbnails, zoom, "aria-label": ariaLabel, }: LightboxProps) => React.ReactPortal | null;
|
|
915
|
+
interface ImageGalleryProps extends Omit<React.HTMLAttributes<HTMLDivElement>, "children"> {
|
|
916
|
+
images: GalleryImage[];
|
|
917
|
+
/** Optional. Number of columns on wide screens. Defaults to 3. */
|
|
918
|
+
columns?: 2 | 3 | 4 | 5;
|
|
919
|
+
/** Optional. Shape of each thumbnail. Defaults to "square". */
|
|
920
|
+
aspect?: "square" | "video" | "portrait";
|
|
921
|
+
/** Optional. Open images in a lightbox when clicked. Defaults to true. */
|
|
922
|
+
lightbox?: boolean;
|
|
923
|
+
/** Optional. Wrap around in the lightbox. Defaults to false. */
|
|
924
|
+
loop?: boolean;
|
|
925
|
+
/** Optional. Show thumbnails in the lightbox. Defaults to true. */
|
|
926
|
+
showThumbnails?: boolean;
|
|
927
|
+
/** Optional. Called when a thumbnail is clicked. */
|
|
928
|
+
onImageClick?: (index: number) => void;
|
|
929
|
+
}
|
|
930
|
+
declare const ImageGallery: ({ images, columns, aspect, lightbox, loop, showThumbnails, onImageClick, className, ...rest }: ImageGalleryProps) => React.JSX.Element;
|
|
931
|
+
|
|
932
|
+
interface EmptyStateProps extends Omit<React.HTMLAttributes<HTMLDivElement>, "title"> {
|
|
933
|
+
/** Short heading, such as "No results found". */
|
|
934
|
+
title: React.ReactNode;
|
|
935
|
+
/** Optional. Supporting text that explains why it is empty and what to do next. */
|
|
936
|
+
description?: React.ReactNode;
|
|
937
|
+
/** Optional. Icon or illustration shown above the title. */
|
|
938
|
+
icon?: JSX.Element;
|
|
939
|
+
/** Optional. Main action, such as a Button. */
|
|
940
|
+
action?: React.ReactNode;
|
|
941
|
+
/** Optional. Secondary action shown next to the main one. */
|
|
942
|
+
secondaryAction?: React.ReactNode;
|
|
943
|
+
/** Optional. Spacing and text size. Defaults to "md". */
|
|
944
|
+
size?: "sm" | "md" | "lg";
|
|
945
|
+
/** Optional. "plain" has no frame, "dashed" draws a dashed border, "card" a solid bordered card. Defaults to "plain". */
|
|
946
|
+
variant?: "plain" | "dashed" | "card";
|
|
947
|
+
/** Optional. Heading element to use so the page outline stays correct. Defaults to "h3". */
|
|
948
|
+
headingLevel?: "h2" | "h3" | "h4" | "h5" | "h6" | "p";
|
|
949
|
+
}
|
|
950
|
+
declare const EmptyState: ({ title, description, icon, action, secondaryAction, size, variant, headingLevel: Heading, className, ...rest }: EmptyStateProps) => React.JSX.Element;
|
|
951
|
+
|
|
952
|
+
type SortDirection = "asc" | "desc";
|
|
953
|
+
interface DataGridSort {
|
|
954
|
+
columnId: string;
|
|
955
|
+
direction: SortDirection;
|
|
956
|
+
}
|
|
957
|
+
interface DataGridColumn<T> {
|
|
958
|
+
/** Unique column id. */
|
|
959
|
+
id: string;
|
|
960
|
+
/** Column heading. Use a string so the filter box gets a good accessible name. */
|
|
961
|
+
header: string;
|
|
962
|
+
/** Optional. Property name or function that reads the cell value from a row. Defaults to the id. */
|
|
963
|
+
accessor?: keyof T | ((row: T) => unknown);
|
|
964
|
+
/** Optional. Custom cell renderer. */
|
|
965
|
+
cell?: (value: unknown, row: T) => React.ReactNode;
|
|
966
|
+
/** Optional. Let people sort by this column. Defaults to false. */
|
|
967
|
+
sortable?: boolean;
|
|
968
|
+
/** Optional. Show a filter box for this column when columnFilters is on. Defaults to true. */
|
|
969
|
+
filterable?: boolean;
|
|
970
|
+
/** Optional. Custom sort comparison for this column. */
|
|
971
|
+
sortFn?: (a: T, b: T) => number;
|
|
972
|
+
/** Optional. Custom filter test. Return true to keep the row. */
|
|
973
|
+
filterFn?: (value: unknown, query: string, row: T) => boolean;
|
|
974
|
+
/** Optional. Column width, such as "120px" or "20%". */
|
|
975
|
+
width?: string;
|
|
976
|
+
/** Optional. Text alignment. Defaults to "left". */
|
|
977
|
+
align?: "left" | "center" | "right";
|
|
978
|
+
}
|
|
979
|
+
interface DataGridProps<T> {
|
|
980
|
+
data: T[];
|
|
981
|
+
columns: DataGridColumn<T>[];
|
|
982
|
+
/** Optional. Returns a stable unique id for a row. Defaults to row.id, then the row index. */
|
|
983
|
+
getRowId?: (row: T, index: number) => string;
|
|
984
|
+
/** Optional. Row selection: "none", "single" (radio) or "multiple" (checkboxes). Defaults to "none". */
|
|
985
|
+
selectionMode?: "none" | "single" | "multiple";
|
|
986
|
+
/** Optional. Controlled selected row ids. */
|
|
987
|
+
selectedIds?: string[];
|
|
988
|
+
/** Optional. Initially selected row ids when uncontrolled. */
|
|
989
|
+
defaultSelectedIds?: string[];
|
|
990
|
+
/** Optional. Called when the selection changes. */
|
|
991
|
+
onSelectionChange?: (ids: string[]) => void;
|
|
992
|
+
/** Optional. Controlled sort. Use null for no sort. */
|
|
993
|
+
sort?: DataGridSort | null;
|
|
994
|
+
/** Optional. Initial sort when uncontrolled. */
|
|
995
|
+
defaultSort?: DataGridSort | null;
|
|
996
|
+
/** Optional. Called when the sort changes. */
|
|
997
|
+
onSortChange?: (sort: DataGridSort | null) => void;
|
|
998
|
+
/** Optional. Rows per page. 0 shows every row without pagination. Defaults to 0. */
|
|
999
|
+
pageSize?: number;
|
|
1000
|
+
/** Optional. Show a search box that filters all columns. Defaults to false. */
|
|
1001
|
+
searchable?: boolean;
|
|
1002
|
+
/** Optional. Show a filter box under each sortable/filterable heading. Defaults to false. */
|
|
1003
|
+
columnFilters?: boolean;
|
|
1004
|
+
/** Optional. Message when there are no rows. Defaults to "No data". */
|
|
1005
|
+
emptyMessage?: React.ReactNode;
|
|
1006
|
+
/** Optional. Shows a loading state. */
|
|
1007
|
+
loading?: boolean;
|
|
1008
|
+
/** Optional. Alternate row backgrounds. */
|
|
1009
|
+
striped?: boolean;
|
|
1010
|
+
/** Optional. Row height. Defaults to "comfortable". */
|
|
1011
|
+
density?: "compact" | "comfortable";
|
|
1012
|
+
/** Optional. Keep the header visible while the body scrolls. Needs maxHeight. */
|
|
1013
|
+
stickyHeader?: boolean;
|
|
1014
|
+
/** Optional. Maximum height of the scrolling area, such as "400px". */
|
|
1015
|
+
maxHeight?: string;
|
|
1016
|
+
/** Optional. Called when a row is clicked. */
|
|
1017
|
+
onRowClick?: (row: T) => void;
|
|
1018
|
+
/** Optional. Extra content in the toolbar, such as buttons. */
|
|
1019
|
+
toolbar?: React.ReactNode;
|
|
1020
|
+
/** Accessible name for the table. */
|
|
1021
|
+
"aria-label": string;
|
|
1022
|
+
className?: string;
|
|
1023
|
+
}
|
|
1024
|
+
declare function DataGrid<T>({ data, columns, getRowId, selectionMode, selectedIds, defaultSelectedIds, onSelectionChange, sort: sortProp, defaultSort, onSortChange, pageSize, searchable, columnFilters, emptyMessage, loading, striped, density, stickyHeader, maxHeight, onRowClick, toolbar, "aria-label": ariaLabel, className, }: DataGridProps<T>): React.JSX.Element;
|
|
1025
|
+
|
|
1026
|
+
interface ActiveFilter {
|
|
1027
|
+
/** Unique id for the filter. */
|
|
1028
|
+
id: string;
|
|
1029
|
+
/** Name of the filter, such as "Status". */
|
|
1030
|
+
label: string;
|
|
1031
|
+
/** Optional. Chosen value, such as "Active". Shown as "Status: Active". */
|
|
1032
|
+
value?: string;
|
|
1033
|
+
}
|
|
1034
|
+
interface TableToolbarProps extends Omit<React.HTMLAttributes<HTMLDivElement>, "children"> {
|
|
1035
|
+
/** Optional. Current search text. Pass with onSearchChange to show the search box. */
|
|
1036
|
+
searchValue?: string;
|
|
1037
|
+
/** Optional. Called with the new search text (after debounceMs, if set). */
|
|
1038
|
+
onSearchChange?: (value: string) => void;
|
|
1039
|
+
/** Optional. Placeholder in the search box. Defaults to "Search…". */
|
|
1040
|
+
searchPlaceholder?: string;
|
|
1041
|
+
/** Optional. Wait this many milliseconds after typing before calling onSearchChange. Defaults to 0. */
|
|
1042
|
+
debounceMs?: number;
|
|
1043
|
+
/** Optional. Filter controls, such as Select or Dropdown components. */
|
|
1044
|
+
filters?: React.ReactNode;
|
|
1045
|
+
/** Optional. Filters currently applied, shown as removable chips. */
|
|
1046
|
+
activeFilters?: ActiveFilter[];
|
|
1047
|
+
/** Optional. Called when a chip's remove button is used. */
|
|
1048
|
+
onRemoveFilter?: (id: string) => void;
|
|
1049
|
+
/** Optional. Called by "Clear all". The button shows when there is search text or more than one filter. */
|
|
1050
|
+
onClearAll?: () => void;
|
|
1051
|
+
/** Optional. Number of rows after filtering. Shown and announced to screen readers. */
|
|
1052
|
+
resultCount?: number;
|
|
1053
|
+
/** Optional. Word for the results. Defaults to "results". Use the plural. */
|
|
1054
|
+
resultLabel?: string;
|
|
1055
|
+
/** Optional. Content on the right, such as Export or Add buttons. */
|
|
1056
|
+
actions?: React.ReactNode;
|
|
1057
|
+
/** Optional. Number of selected rows. When above 0 the toolbar switches to bulk mode. */
|
|
1058
|
+
selectedCount?: number;
|
|
1059
|
+
/** Optional. Actions for the selected rows, shown in bulk mode. */
|
|
1060
|
+
bulkActions?: React.ReactNode;
|
|
1061
|
+
/** Optional. Called by the Clear selection button in bulk mode. */
|
|
1062
|
+
onClearSelection?: () => void;
|
|
1063
|
+
/** Optional. Accessible name for the search and filter group. Defaults to "Filter table". */
|
|
1064
|
+
"aria-label"?: string;
|
|
1065
|
+
}
|
|
1066
|
+
declare const TableToolbar: ({ searchValue, onSearchChange, searchPlaceholder, debounceMs, filters, activeFilters, onRemoveFilter, onClearAll, resultCount, resultLabel, actions, selectedCount, bulkActions, onClearSelection, "aria-label": ariaLabel, className, ...rest }: TableToolbarProps) => React.JSX.Element;
|
|
1067
|
+
|
|
1068
|
+
type FieldValidator = (value: any, values: Record<string, any>) => string | undefined | null | false;
|
|
1069
|
+
/** Ready-made validators to pass to FormField's `validate` prop. Combine them with `compose`. */
|
|
1070
|
+
declare const validators: {
|
|
1071
|
+
required: (message?: string) => FieldValidator;
|
|
1072
|
+
email: (message?: string) => FieldValidator;
|
|
1073
|
+
minLength: (n: number, message?: string) => FieldValidator;
|
|
1074
|
+
maxLength: (n: number, message?: string) => FieldValidator;
|
|
1075
|
+
pattern: (re: RegExp, message?: string) => FieldValidator;
|
|
1076
|
+
min: (n: number, message?: string) => FieldValidator;
|
|
1077
|
+
max: (n: number, message?: string) => FieldValidator;
|
|
1078
|
+
matches: (otherField: string, message?: string) => FieldValidator;
|
|
1079
|
+
};
|
|
1080
|
+
/** Run validators in order and return the first error message. */
|
|
1081
|
+
declare const compose: (...fns: FieldValidator[]) => FieldValidator;
|
|
1082
|
+
type FormErrors = Record<string, string | undefined>;
|
|
1083
|
+
interface FormState<V extends Record<string, any> = Record<string, any>> {
|
|
1084
|
+
values: V;
|
|
1085
|
+
/** All current errors, whether or not they are shown yet. */
|
|
1086
|
+
errors: FormErrors;
|
|
1087
|
+
touched: Record<string, boolean>;
|
|
1088
|
+
isSubmitting: boolean;
|
|
1089
|
+
/** True when there are no errors at all. */
|
|
1090
|
+
isValid: boolean;
|
|
1091
|
+
/** True when any value differs from the initial values. */
|
|
1092
|
+
isDirty: boolean;
|
|
1093
|
+
submitCount: number;
|
|
1094
|
+
setValue: (name: string, value: any) => void;
|
|
1095
|
+
setValues: (patch: Partial<V>) => void;
|
|
1096
|
+
setTouched: (name: string, touched?: boolean) => void;
|
|
1097
|
+
/** Restore the initial values and clear touched, submit count and any submit error. */
|
|
1098
|
+
reset: (values?: V) => void;
|
|
1099
|
+
}
|
|
1100
|
+
/** Read form state and helpers from anywhere inside a <Form>. */
|
|
1101
|
+
declare function useFormContext<V extends Record<string, any> = Record<string, any>>(): FormState<V>;
|
|
1102
|
+
interface FormProps<V extends Record<string, any> = Record<string, any>> extends Omit<React.FormHTMLAttributes<HTMLFormElement>, "onSubmit" | "children"> {
|
|
1103
|
+
/** Starting values, keyed by field name. */
|
|
1104
|
+
initialValues: V;
|
|
1105
|
+
/** Called with the values when the form is valid. May be async; a thrown error is shown as a form error. */
|
|
1106
|
+
onSubmit: (values: V) => void | Promise<void>;
|
|
1107
|
+
/** Optional. Form-level validation, for rules that involve several fields. Return an object of messages keyed by field name. */
|
|
1108
|
+
validate?: (values: V) => FormErrors | undefined;
|
|
1109
|
+
/** Optional. When field errors appear: after the field loses focus ("blur"), as soon as it changes ("change"), or only after a submit attempt ("submit"). Defaults to "blur". */
|
|
1110
|
+
validateOn?: "blur" | "change" | "submit";
|
|
1111
|
+
/** Optional. Show a summary of errors at the top after a failed submit. Defaults to true. */
|
|
1112
|
+
errorSummary?: boolean;
|
|
1113
|
+
/** Optional. Heading of the error summary. Defaults to "Please fix the following". */
|
|
1114
|
+
errorSummaryTitle?: string;
|
|
1115
|
+
/** Form contents, or a function that receives the form state. */
|
|
1116
|
+
children: React.ReactNode | ((state: FormState<V>) => React.ReactNode);
|
|
1117
|
+
}
|
|
1118
|
+
declare function Form<V extends Record<string, any> = Record<string, any>>({ initialValues, onSubmit, validate, validateOn, errorSummary, errorSummaryTitle, children, className, ...rest }: FormProps<V>): React.JSX.Element;
|
|
1119
|
+
interface FieldControlProps {
|
|
1120
|
+
id: string;
|
|
1121
|
+
name: string;
|
|
1122
|
+
value: any;
|
|
1123
|
+
checked?: boolean;
|
|
1124
|
+
onChange: (eventOrValue: any) => void;
|
|
1125
|
+
onBlur: () => void;
|
|
1126
|
+
"aria-invalid": true | undefined;
|
|
1127
|
+
"aria-required": true | undefined;
|
|
1128
|
+
"aria-describedby": string | undefined;
|
|
1129
|
+
}
|
|
1130
|
+
interface FormFieldProps {
|
|
1131
|
+
/** Key of this field in the form values. */
|
|
1132
|
+
name: string;
|
|
1133
|
+
/** Label shown above the control. */
|
|
1134
|
+
label: string;
|
|
1135
|
+
/** Optional. Help text shown under the label. */
|
|
1136
|
+
description?: React.ReactNode;
|
|
1137
|
+
/** Optional. Mark the field as required. Pass a string to set the error message. */
|
|
1138
|
+
required?: boolean | string;
|
|
1139
|
+
/** Optional. Validation for this field. Return an error message, or nothing when valid. Combine rules with compose(). */
|
|
1140
|
+
validate?: FieldValidator;
|
|
1141
|
+
/** Optional. Use "checked" for checkbox and switch controls so their boolean value is passed as `checked`. Defaults to "value". */
|
|
1142
|
+
valueProp?: "value" | "checked";
|
|
1143
|
+
/** Optional. Hide the label visually but keep it for screen readers. */
|
|
1144
|
+
hideLabel?: boolean;
|
|
1145
|
+
className?: string;
|
|
1146
|
+
/** The control. A function receives the props to spread onto it plus `error` text and `invalid`. A plain element receives the props directly. */
|
|
1147
|
+
children: React.ReactElement | ((control: FieldControlProps & {
|
|
1148
|
+
error?: string;
|
|
1149
|
+
invalid: boolean;
|
|
1150
|
+
}) => React.ReactNode);
|
|
1151
|
+
}
|
|
1152
|
+
declare const FormField: ({ name, label, description, required, validate, valueProp, hideLabel, className, children }: FormFieldProps) => React.JSX.Element;
|
|
1153
|
+
|
|
1154
|
+
interface NumberInputProps extends Omit<React.InputHTMLAttributes<HTMLInputElement>, "value" | "defaultValue" | "onChange" | "size" | "min" | "max" | "step" | "type" | "prefix"> {
|
|
1155
|
+
/** Controlled value. Use null (or an empty string) for empty. */
|
|
1156
|
+
value?: number | null | "";
|
|
1157
|
+
/** Optional. Starting value when uncontrolled. */
|
|
1158
|
+
defaultValue?: number | null;
|
|
1159
|
+
/** Called with the new number, or null when the field is empty. Fires while typing and when the buttons are used. */
|
|
1160
|
+
onChange?: (value: number | null) => void;
|
|
1161
|
+
/** Optional. Smallest allowed value. */
|
|
1162
|
+
min?: number;
|
|
1163
|
+
/** Optional. Largest allowed value. */
|
|
1164
|
+
max?: number;
|
|
1165
|
+
/** Optional. Amount added or removed by the buttons and arrow keys. Defaults to 1. */
|
|
1166
|
+
step?: number;
|
|
1167
|
+
/** Optional. Digits shown after the decimal point. Values are rounded to this. Defaults to 0. */
|
|
1168
|
+
precision?: number;
|
|
1169
|
+
/** Optional. Where to put the +/- buttons: on both "sides", "stacked" at the end, or "none". Defaults to "sides". */
|
|
1170
|
+
controls?: "sides" | "stacked" | "none";
|
|
1171
|
+
/** Optional. Text or icon before the number, such as "$". */
|
|
1172
|
+
prefix?: React.ReactNode;
|
|
1173
|
+
/** Optional. Text after the number, such as "kg" or "%". */
|
|
1174
|
+
suffix?: React.ReactNode;
|
|
1175
|
+
/** Optional. Field height. Defaults to "lg". */
|
|
1176
|
+
size?: "sm" | "lg";
|
|
1177
|
+
/** Optional. Show the error style. */
|
|
1178
|
+
error?: boolean;
|
|
1179
|
+
/** Optional. Turns the field off. */
|
|
1180
|
+
disabled?: boolean;
|
|
1181
|
+
/** Optional. Make it read-only. */
|
|
1182
|
+
readOnly?: boolean;
|
|
1183
|
+
/** Optional. Class name for the outer wrapper. */
|
|
1184
|
+
className?: string;
|
|
1185
|
+
}
|
|
1186
|
+
declare const NumberInput: React.ForwardRefExoticComponent<NumberInputProps & React.RefAttributes<HTMLInputElement>>;
|
|
1187
|
+
|
|
1188
|
+
interface PasswordStrength {
|
|
1189
|
+
/** 0 (empty) to 4 (strong). */
|
|
1190
|
+
score: 0 | 1 | 2 | 3 | 4;
|
|
1191
|
+
label: "" | "Weak" | "Fair" | "Good" | "Strong";
|
|
1192
|
+
/** The rules and whether each is met. */
|
|
1193
|
+
checks: {
|
|
1194
|
+
id: string;
|
|
1195
|
+
label: string;
|
|
1196
|
+
met: boolean;
|
|
1197
|
+
}[];
|
|
1198
|
+
}
|
|
1199
|
+
/** Score a password from 0 to 4 and list which rules it meets. Exported so you can reuse it in validation. */
|
|
1200
|
+
declare const getPasswordStrength: (password: string) => PasswordStrength;
|
|
1201
|
+
interface PasswordInputProps extends Omit<React.InputHTMLAttributes<HTMLInputElement>, "type" | "size" | "prefix"> {
|
|
1202
|
+
/** Optional. Field height. Defaults to "lg". */
|
|
1203
|
+
size?: "sm" | "lg";
|
|
1204
|
+
/** Optional. Show the error style. */
|
|
1205
|
+
error?: boolean;
|
|
1206
|
+
/** Optional. Show a lock icon at the start. Defaults to false. */
|
|
1207
|
+
showLockIcon?: boolean;
|
|
1208
|
+
/** Optional. Controlled visibility of the password. */
|
|
1209
|
+
visible?: boolean;
|
|
1210
|
+
/** Optional. Start with the password shown. Defaults to false. */
|
|
1211
|
+
defaultVisible?: boolean;
|
|
1212
|
+
/** Optional. Called when the password is shown or hidden. */
|
|
1213
|
+
onVisibleChange?: (visible: boolean) => void;
|
|
1214
|
+
/** Optional. Show a strength meter under the field. Use when people create a password. Defaults to false. */
|
|
1215
|
+
showStrength?: boolean;
|
|
1216
|
+
/** Optional. Show the list of rules under the meter. Needs showStrength. Defaults to false. */
|
|
1217
|
+
showRequirements?: boolean;
|
|
1218
|
+
/** Optional. Warn when Caps Lock is on while typing. Defaults to true. */
|
|
1219
|
+
capsLockWarning?: boolean;
|
|
1220
|
+
/** Optional. Class name for the outer wrapper. */
|
|
1221
|
+
className?: string;
|
|
1222
|
+
}
|
|
1223
|
+
declare const PasswordInput: React.ForwardRefExoticComponent<PasswordInputProps & React.RefAttributes<HTMLInputElement>>;
|
|
1224
|
+
|
|
1225
|
+
interface SearchInputProps extends Omit<React.InputHTMLAttributes<HTMLInputElement>, "type" | "size" | "value" | "defaultValue" | "onChange" | "prefix"> {
|
|
1226
|
+
/** Controlled search text. */
|
|
1227
|
+
value?: string;
|
|
1228
|
+
/** Optional. Starting text when uncontrolled. */
|
|
1229
|
+
defaultValue?: string;
|
|
1230
|
+
/** Called with the new text on every keystroke and when the text is cleared. */
|
|
1231
|
+
onChange?: (value: string) => void;
|
|
1232
|
+
/** Optional. Called when the person presses Enter, clears the box, or (with debounceMs) pauses typing. */
|
|
1233
|
+
onSearch?: (value: string) => void;
|
|
1234
|
+
/** Optional. Wait this many milliseconds after typing stops, then call onSearch. 0 means only Enter and clear call it. Defaults to 0. */
|
|
1235
|
+
debounceMs?: number;
|
|
1236
|
+
/** Optional. Show a spinner while results load. */
|
|
1237
|
+
loading?: boolean;
|
|
1238
|
+
/** Optional. Show the clear button when there is text. Defaults to true. */
|
|
1239
|
+
clearable?: boolean;
|
|
1240
|
+
/** Optional. Global key that focuses the field, such as "/" or "k". Ignored while typing in another field. */
|
|
1241
|
+
hotkey?: string;
|
|
1242
|
+
/** Optional. Field height. Defaults to "lg". */
|
|
1243
|
+
size?: "sm" | "lg";
|
|
1244
|
+
/** Optional. Show the error style. */
|
|
1245
|
+
error?: boolean;
|
|
1246
|
+
/** Optional. Class name for the outer wrapper. */
|
|
1247
|
+
className?: string;
|
|
1248
|
+
}
|
|
1249
|
+
declare const SearchInput: React.ForwardRefExoticComponent<SearchInputProps & React.RefAttributes<HTMLInputElement>>;
|
|
1250
|
+
|
|
1251
|
+
/** Strip everything except a small set of safe formatting tags. Use it before rendering saved editor HTML elsewhere. */
|
|
1252
|
+
declare const sanitizeHtml: (html: string) => string;
|
|
1253
|
+
type RichTextToolbarItem = "bold" | "italic" | "underline" | "strike" | "style" | "bulletList" | "numberList" | "quote" | "link" | "undo" | "redo" | "clear" | "|";
|
|
1254
|
+
interface RichTextEditorProps {
|
|
1255
|
+
/** Controlled content as HTML. */
|
|
1256
|
+
value?: string;
|
|
1257
|
+
/** Optional. Starting HTML when uncontrolled. */
|
|
1258
|
+
defaultValue?: string;
|
|
1259
|
+
/** Called with the new HTML, or an empty string when there is no text. The HTML only contains safe formatting tags. */
|
|
1260
|
+
onChange?: (html: string) => void;
|
|
1261
|
+
/** Optional. Hint shown while empty. */
|
|
1262
|
+
placeholder?: string;
|
|
1263
|
+
/** Optional. Which tools to show, in order. Use "|" for a divider. Defaults to all. */
|
|
1264
|
+
toolbar?: RichTextToolbarItem[];
|
|
1265
|
+
/** Optional. Smallest height of the writing area, in pixels. Defaults to 140. */
|
|
1266
|
+
minHeight?: number;
|
|
1267
|
+
/** Optional. Largest height before the area scrolls, in pixels. */
|
|
1268
|
+
maxHeight?: number;
|
|
1269
|
+
/** Optional. Stop typing after this many characters and show a counter. */
|
|
1270
|
+
maxLength?: number;
|
|
1271
|
+
/** Optional. Show the error style. */
|
|
1272
|
+
error?: boolean;
|
|
1273
|
+
disabled?: boolean;
|
|
1274
|
+
readOnly?: boolean;
|
|
1275
|
+
/** Optional. Called when the editor loses focus. */
|
|
1276
|
+
onBlur?: () => void;
|
|
1277
|
+
/** Optional. id of the writing area, so a label can point to it. */
|
|
1278
|
+
id?: string;
|
|
1279
|
+
name?: string;
|
|
1280
|
+
/** Accessible name when there is no visible label. */
|
|
1281
|
+
"aria-label"?: string;
|
|
1282
|
+
"aria-describedby"?: string;
|
|
1283
|
+
"aria-invalid"?: boolean;
|
|
1284
|
+
"aria-required"?: boolean;
|
|
1285
|
+
className?: string;
|
|
1286
|
+
}
|
|
1287
|
+
declare const RichTextEditor: ({ value, defaultValue, onChange, placeholder, toolbar, minHeight, maxHeight, maxLength, error, disabled, readOnly, onBlur, id: idProp, name, className, ...aria }: RichTextEditorProps) => React.JSX.Element;
|
|
1288
|
+
|
|
1289
|
+
interface CodeBlockProps extends Omit<React.HTMLAttributes<HTMLElement>, "children" | "title" | "onCopy"> {
|
|
1290
|
+
/** The code to show. */
|
|
1291
|
+
code: string;
|
|
1292
|
+
/** Optional. Language for colouring: js, jsx, ts, tsx, json, css, html, bash, python. Other values show plain text. */
|
|
1293
|
+
language?: string;
|
|
1294
|
+
/** Optional. File name or heading shown above the code. Defaults to the language name. */
|
|
1295
|
+
title?: React.ReactNode;
|
|
1296
|
+
/** Optional. Show line numbers. Defaults to false. */
|
|
1297
|
+
showLineNumbers?: boolean;
|
|
1298
|
+
/** Optional. First line number. Defaults to 1. */
|
|
1299
|
+
startLine?: number;
|
|
1300
|
+
/** Optional. Lines to highlight, as numbers or a string such as "1,3-5". Numbers follow startLine. */
|
|
1301
|
+
highlightLines?: number[] | string;
|
|
1302
|
+
/** Optional. Wrap long lines instead of scrolling sideways. Defaults to false. */
|
|
1303
|
+
wrap?: boolean;
|
|
1304
|
+
/** Optional. Show a button that toggles wrapping. Defaults to false. */
|
|
1305
|
+
wrapToggle?: boolean;
|
|
1306
|
+
/** Optional. Show the copy button. Defaults to true. */
|
|
1307
|
+
copyable?: boolean;
|
|
1308
|
+
/** Optional. Called after the code is copied. */
|
|
1309
|
+
onCodeCopy?: (code: string) => void;
|
|
1310
|
+
/** Optional. Maximum height before the code scrolls, such as "320px". */
|
|
1311
|
+
maxHeight?: string;
|
|
1312
|
+
/** Optional. Colour scheme. Defaults to "dark". */
|
|
1313
|
+
theme?: "dark" | "light";
|
|
1314
|
+
/** Optional. Colour the code. Set false for plain text. Defaults to true. */
|
|
1315
|
+
highlight?: boolean;
|
|
1316
|
+
}
|
|
1317
|
+
declare const CodeBlock: ({ code, language, title, showLineNumbers, startLine, highlightLines, wrap: wrapProp, wrapToggle, copyable, onCodeCopy, maxHeight, theme, highlight, className, ...rest }: CodeBlockProps) => React.JSX.Element;
|
|
1318
|
+
|
|
1319
|
+
interface KbdProps extends Omit<React.HTMLAttributes<HTMLElement>, "children"> {
|
|
1320
|
+
/** A single key, such as "K", "Enter" or "mod". Friendly names are converted: mod, cmd, ctrl, alt, shift, enter, esc, tab, space, up, down, left, right. */
|
|
1321
|
+
children?: React.ReactNode;
|
|
1322
|
+
/** Optional. A shortcut as a list of keys, such as ["mod", "K"]. Use this instead of children. */
|
|
1323
|
+
keys?: string[];
|
|
1324
|
+
/** Optional. Text between the keys of a shortcut. Defaults to "+". Use "" for none. */
|
|
1325
|
+
separator?: string;
|
|
1326
|
+
/** Optional. Show symbols (⌘ ⇧ ⌥) on Mac and words on other systems. Set false to always show words. Defaults to true. */
|
|
1327
|
+
platformAware?: boolean;
|
|
1328
|
+
/** Optional. Key size. Defaults to "md". */
|
|
1329
|
+
size?: "sm" | "md" | "lg";
|
|
1330
|
+
/** Optional. Look of the keys. "default" is a raised key, "outlined" a flat border, "subtle" a plain grey chip. Defaults to "default". */
|
|
1331
|
+
variant?: "default" | "outlined" | "subtle";
|
|
1332
|
+
}
|
|
1333
|
+
declare const Kbd: ({ children, keys, separator, platformAware, size, variant, className, ...rest }: KbdProps) => React.JSX.Element;
|
|
1334
|
+
|
|
1335
|
+
interface LinkProps extends Omit<React.AnchorHTMLAttributes<HTMLAnchorElement>, "color"> {
|
|
1336
|
+
/** Where the link goes. Without an href (and not disabled) a button that looks like a link is rendered. */
|
|
1337
|
+
href?: string;
|
|
1338
|
+
/** Optional. Colour of the link. "inherit" uses the surrounding text colour. Defaults to "primary". */
|
|
1339
|
+
variant?: "primary" | "neutral" | "inherit";
|
|
1340
|
+
/** Optional. When the underline shows. Keep "always" inside paragraphs so links do not rely on colour alone. Defaults to "always". */
|
|
1341
|
+
underline?: "always" | "hover" | "none";
|
|
1342
|
+
/** Optional. Text size. "inherit" matches the surrounding text. Defaults to "inherit". */
|
|
1343
|
+
size?: "sm" | "md" | "lg" | "inherit";
|
|
1344
|
+
/** Optional. Opens in a new tab with safe rel values, shows an icon and tells screen readers. Defaults to false. */
|
|
1345
|
+
external?: boolean;
|
|
1346
|
+
/** Optional. Show the arrow icon on external links. Defaults to true. */
|
|
1347
|
+
showExternalIcon?: boolean;
|
|
1348
|
+
/** Optional. Marks the link to the page you are on (aria-current="page") and makes it bolder. */
|
|
1349
|
+
current?: boolean;
|
|
1350
|
+
/** Optional. Turns the link off. It stays visible but cannot be used. */
|
|
1351
|
+
disabled?: boolean;
|
|
1352
|
+
/** Optional. Icon before the text. */
|
|
1353
|
+
startIcon?: JSX.Element;
|
|
1354
|
+
/** Optional. Icon after the text. */
|
|
1355
|
+
endIcon?: JSX.Element;
|
|
1356
|
+
/** Optional. Component to render instead of a plain anchor, such as Next.js Link or React Router Link. It receives the same props. */
|
|
1357
|
+
component?: React.ElementType;
|
|
1358
|
+
}
|
|
1359
|
+
declare const Link: React.ForwardRefExoticComponent<LinkProps & React.RefAttributes<HTMLElement>>;
|
|
1360
|
+
|
|
1361
|
+
interface CollapsibleProps extends Omit<React.HTMLAttributes<HTMLDivElement>, "onChange"> {
|
|
1362
|
+
/** Controlled open state. */
|
|
1363
|
+
open?: boolean;
|
|
1364
|
+
/** Optional. Starting state when uncontrolled. Defaults to false. */
|
|
1365
|
+
defaultOpen?: boolean;
|
|
1366
|
+
/** Called when the section opens or closes. */
|
|
1367
|
+
onOpenChange?: (open: boolean) => void;
|
|
1368
|
+
/** Optional. Stops the section from being toggled. */
|
|
1369
|
+
disabled?: boolean;
|
|
1370
|
+
children: React.ReactNode;
|
|
1371
|
+
}
|
|
1372
|
+
declare const Collapsible: ({ open: openProp, defaultOpen, onOpenChange, disabled, className, children, ...rest }: CollapsibleProps) => React.JSX.Element;
|
|
1373
|
+
interface CollapsibleTriggerProps extends Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, "children"> {
|
|
1374
|
+
/** The label, or a function that receives the open state, for text that changes such as "Show more" and "Show less". */
|
|
1375
|
+
children: React.ReactNode | ((open: boolean) => React.ReactNode);
|
|
1376
|
+
/** Optional. Hide the chevron. Defaults to false. */
|
|
1377
|
+
hideIndicator?: boolean;
|
|
1378
|
+
/** Optional. Put the chevron before the label. Defaults to false. */
|
|
1379
|
+
indicatorStart?: boolean;
|
|
1380
|
+
}
|
|
1381
|
+
declare const CollapsibleTrigger: ({ children, hideIndicator, indicatorStart, className, onClick, ...rest }: CollapsibleTriggerProps) => React.JSX.Element;
|
|
1382
|
+
interface CollapsibleContentProps extends React.HTMLAttributes<HTMLDivElement> {
|
|
1383
|
+
/** Optional. Keep the content in the page while closed (hidden from everyone). Defaults to true, which keeps state and allows the animation. Set false to remove it from the page when closed. */
|
|
1384
|
+
keepMounted?: boolean;
|
|
1385
|
+
}
|
|
1386
|
+
declare const CollapsibleContent: ({ keepMounted, className, children, ...rest }: CollapsibleContentProps) => React.JSX.Element | null;
|
|
1387
|
+
|
|
1388
|
+
type Direction = "horizontal" | "vertical";
|
|
1389
|
+
interface ResizablePanelProps extends React.HTMLAttributes<HTMLDivElement> {
|
|
1390
|
+
/** Optional. Starting size as a percent of the group. Panels without one share the remaining space equally. */
|
|
1391
|
+
defaultSize?: number;
|
|
1392
|
+
/** Optional. Smallest size in percent. Defaults to 10. */
|
|
1393
|
+
minSize?: number;
|
|
1394
|
+
/** Optional. Largest size in percent. Defaults to 100. */
|
|
1395
|
+
maxSize?: number;
|
|
1396
|
+
children?: React.ReactNode;
|
|
1397
|
+
}
|
|
1398
|
+
declare const ResizablePanel: ({ defaultSize: _d, minSize: _mi, maxSize: _ma, className, children, ...rest }: ResizablePanelProps) => React.JSX.Element;
|
|
1399
|
+
interface ResizableHandleProps extends Omit<React.HTMLAttributes<HTMLDivElement>, "children"> {
|
|
1400
|
+
/** Optional. Show a grip so the handle is easy to spot. Defaults to false. */
|
|
1401
|
+
withHandle?: boolean;
|
|
1402
|
+
/** Optional. Stops this divider from being moved. */
|
|
1403
|
+
disabled?: boolean;
|
|
1404
|
+
/** Optional. Accessible name. Defaults to "Resize". */
|
|
1405
|
+
"aria-label"?: string;
|
|
1406
|
+
}
|
|
1407
|
+
declare const ResizableHandle: ({ withHandle, disabled, className, onKeyDown, ...rest }: ResizableHandleProps) => React.JSX.Element;
|
|
1408
|
+
interface ResizablePanelGroupProps extends Omit<React.HTMLAttributes<HTMLDivElement>, "onChange"> {
|
|
1409
|
+
/** Optional. "horizontal" puts panels side by side, "vertical" stacks them. Defaults to "horizontal". */
|
|
1410
|
+
direction?: Direction;
|
|
1411
|
+
/** Called with every panel's size in percent as the layout changes. */
|
|
1412
|
+
onLayout?: (sizes: number[]) => void;
|
|
1413
|
+
/** Put ResizablePanel and ResizableHandle children in alternating order. */
|
|
1414
|
+
children: React.ReactNode;
|
|
1415
|
+
}
|
|
1416
|
+
declare const ResizablePanelGroup: ({ direction, onLayout, className, children, ...rest }: ResizablePanelGroupProps) => React.JSX.Element;
|
|
1417
|
+
|
|
1418
|
+
type Axis = "vertical" | "horizontal";
|
|
1419
|
+
interface ScrollAreaProps extends React.HTMLAttributes<HTMLDivElement> {
|
|
1420
|
+
/** Optional. Which directions can scroll. Defaults to "vertical". */
|
|
1421
|
+
orientation?: Axis | "both";
|
|
1422
|
+
/** Optional. When the custom scrollbar shows. "hover" on pointer over, focus or scroll; "scroll" only while scrolling; "auto" and "always" whenever there is overflow. Defaults to "hover". */
|
|
1423
|
+
type?: "hover" | "scroll" | "auto" | "always";
|
|
1424
|
+
/** Optional. Milliseconds the scrollbar stays visible after scrolling stops. Defaults to 600. */
|
|
1425
|
+
scrollHideDelay?: number;
|
|
1426
|
+
/** Optional. Classes for the scrolling viewport, for example padding. */
|
|
1427
|
+
viewportClassName?: string;
|
|
1428
|
+
/** Accessible name for the scrollable region. Recommended, because the viewport can be focused with the keyboard. */
|
|
1429
|
+
"aria-label"?: string;
|
|
1430
|
+
children?: React.ReactNode;
|
|
1431
|
+
}
|
|
1432
|
+
declare const ScrollArea: React.ForwardRefExoticComponent<ScrollAreaProps & React.RefAttributes<HTMLDivElement>>;
|
|
1433
|
+
|
|
1434
|
+
interface BottomSheetProps {
|
|
1435
|
+
/** Whether the sheet is open. */
|
|
1436
|
+
open: boolean;
|
|
1437
|
+
/** Called when the sheet asks to open or close (Escape, backdrop, swipe down, close button). */
|
|
1438
|
+
onOpenChange: (open: boolean) => void;
|
|
1439
|
+
/** Heading shown at the top. Also names the dialog for screen readers. */
|
|
1440
|
+
title?: React.ReactNode;
|
|
1441
|
+
/** Optional. Short text under the title. */
|
|
1442
|
+
description?: React.ReactNode;
|
|
1443
|
+
/** Optional. Fixed area under the content, for actions. */
|
|
1444
|
+
footer?: React.ReactNode;
|
|
1445
|
+
/** Optional. Heights the sheet can rest at, as fractions of the screen height, smallest first. Defaults to [0.5]. */
|
|
1446
|
+
snapPoints?: number[];
|
|
1447
|
+
/** Optional. Which snap point to start at (index). Defaults to 0. */
|
|
1448
|
+
defaultSnap?: number;
|
|
1449
|
+
/** Called with the new snap index when the sheet settles at another height. */
|
|
1450
|
+
onSnapChange?: (index: number) => void;
|
|
1451
|
+
/** Optional. Allow closing by Escape, backdrop click and swiping down. Defaults to true. */
|
|
1452
|
+
dismissible?: boolean;
|
|
1453
|
+
/** Optional. Show a backdrop, trap focus and lock page scroll. Set false for a sheet that sits beside the page. Defaults to true. */
|
|
1454
|
+
modal?: boolean;
|
|
1455
|
+
/** Optional. Show the drag handle. Defaults to true. */
|
|
1456
|
+
showHandle?: boolean;
|
|
1457
|
+
/** Optional. Show a close button. Defaults to true. */
|
|
1458
|
+
showCloseButton?: boolean;
|
|
1459
|
+
/** Optional. Classes for the sheet surface. */
|
|
1460
|
+
className?: string;
|
|
1461
|
+
/** Optional. Accessible name when there is no title. */
|
|
1462
|
+
"aria-label"?: string;
|
|
1463
|
+
children?: React.ReactNode;
|
|
1464
|
+
}
|
|
1465
|
+
declare const BottomSheet: ({ open, onOpenChange, title, description, footer, snapPoints, defaultSnap, onSnapChange, dismissible, modal, showHandle, showCloseButton, className, "aria-label": ariaLabel, children, }: BottomSheetProps) => React.ReactPortal | null;
|
|
1466
|
+
|
|
1467
|
+
type ConfirmVariant = "default" | "info" | "danger" | "warning" | "success";
|
|
1468
|
+
interface ConfirmDialogProps {
|
|
1469
|
+
/** Whether the dialog is open. */
|
|
1470
|
+
open: boolean;
|
|
1471
|
+
/** Called with false when the dialog should close (Cancel, Escape, backdrop, or after a successful confirm). */
|
|
1472
|
+
onOpenChange: (open: boolean) => void;
|
|
1473
|
+
/** The question or heading. */
|
|
1474
|
+
title: React.ReactNode;
|
|
1475
|
+
/** Optional. A sentence that explains the consequence. */
|
|
1476
|
+
description?: React.ReactNode;
|
|
1477
|
+
/** Optional. Extra content under the description, such as a list or an input. */
|
|
1478
|
+
children?: React.ReactNode;
|
|
1479
|
+
/** Optional. Sets the icon and the confirm button colour. Use "danger" for deletes. Defaults to "default". */
|
|
1480
|
+
variant?: ConfirmVariant;
|
|
1481
|
+
/** Optional. Replace the icon, or pass null to hide it. */
|
|
1482
|
+
icon?: React.ReactNode;
|
|
1483
|
+
/** Optional. Confirm button text. Name the action, for example "Delete project". Defaults to "Confirm". */
|
|
1484
|
+
confirmText?: string;
|
|
1485
|
+
/** Optional. Cancel button text. Defaults to "Cancel". */
|
|
1486
|
+
cancelText?: string;
|
|
1487
|
+
/** Optional. Hide the cancel button, for a message that only needs "OK". Defaults to false. */
|
|
1488
|
+
hideCancel?: boolean;
|
|
1489
|
+
/** Optional. Runs when confirmed. Return a promise to show a loading state; the dialog closes when it resolves and stays open with the error if it throws. */
|
|
1490
|
+
onConfirm?: () => void | Promise<void>;
|
|
1491
|
+
/** Optional. Runs when the dialog is cancelled or dismissed. */
|
|
1492
|
+
onCancel?: () => void;
|
|
1493
|
+
/** Optional. Force the loading state yourself. */
|
|
1494
|
+
loading?: boolean;
|
|
1495
|
+
/** Optional. Disable the confirm button, for example until a box is ticked. */
|
|
1496
|
+
confirmDisabled?: boolean;
|
|
1497
|
+
/** Optional. Dialog width. Defaults to "28rem". */
|
|
1498
|
+
width?: string;
|
|
1499
|
+
}
|
|
1500
|
+
declare const ConfirmDialog: ({ open, onOpenChange, title, description, children, variant, icon, confirmText, cancelText, hideCancel, onConfirm, onCancel, loading: loadingProp, confirmDisabled, width, }: ConfirmDialogProps) => React.JSX.Element;
|
|
1501
|
+
type ConfirmOptions = Omit<ConfirmDialogProps, "open" | "onOpenChange" | "onCancel" | "loading">;
|
|
1502
|
+
type ConfirmFn = (options: ConfirmOptions) => Promise<boolean>;
|
|
1503
|
+
interface ConfirmProviderProps {
|
|
1504
|
+
children: React.ReactNode;
|
|
1505
|
+
}
|
|
1506
|
+
/** Wrap your app once. Then call `useConfirm()` anywhere to ask a question and await the answer. */
|
|
1507
|
+
declare const ConfirmProvider: ({ children }: ConfirmProviderProps) => React.JSX.Element;
|
|
1508
|
+
declare const useConfirm: () => ConfirmFn;
|
|
1509
|
+
|
|
1510
|
+
interface TagInputProps {
|
|
1511
|
+
/** Controlled tags. */
|
|
1512
|
+
value?: string[];
|
|
1513
|
+
/** Uncontrolled starting tags. */
|
|
1514
|
+
defaultValue?: string[];
|
|
1515
|
+
/** Called with the full list of tags when one is added or removed. */
|
|
1516
|
+
onChange?: (tags: string[]) => void;
|
|
1517
|
+
/** Optional. Words offered while typing. Tags already added are left out. */
|
|
1518
|
+
suggestions?: string[];
|
|
1519
|
+
/** Optional. Show the suggestions as soon as the field is focused, before typing. Defaults to false. */
|
|
1520
|
+
showSuggestionsOnFocus?: boolean;
|
|
1521
|
+
/** Optional. Let people add tags that are not in the suggestions. Defaults to true. */
|
|
1522
|
+
allowCustom?: boolean;
|
|
1523
|
+
/** Optional. Maximum number of tags. */
|
|
1524
|
+
maxTags?: number;
|
|
1525
|
+
/** Optional. Maximum characters in one tag. */
|
|
1526
|
+
maxLength?: number;
|
|
1527
|
+
/** Optional. Allow the same tag more than once. Defaults to false. Duplicates are compared ignoring case. */
|
|
1528
|
+
allowDuplicates?: boolean;
|
|
1529
|
+
/** Optional. Characters that end a tag while typing or pasting, in addition to Enter. Defaults to [","]. */
|
|
1530
|
+
delimiters?: string[];
|
|
1531
|
+
/** Optional. Add the text left in the field when it loses focus. Defaults to true. */
|
|
1532
|
+
addOnBlur?: boolean;
|
|
1533
|
+
/** Optional. Return true to accept a tag, or false / a message to reject it. */
|
|
1534
|
+
validate?: (tag: string) => boolean | string;
|
|
1535
|
+
/** Optional. Change a tag before it is added, for example make it lowercase. */
|
|
1536
|
+
transform?: (tag: string) => string;
|
|
1537
|
+
/** Optional. Called when a tag is rejected, with the reason. */
|
|
1538
|
+
onInvalid?: (tag: string, reason: string) => void;
|
|
1539
|
+
/** Optional. Called as the person types. */
|
|
1540
|
+
onInputChange?: (text: string) => void;
|
|
1541
|
+
placeholder?: string;
|
|
1542
|
+
disabled?: boolean;
|
|
1543
|
+
error?: boolean;
|
|
1544
|
+
id?: string;
|
|
1545
|
+
/** Optional. Adds hidden inputs (one per tag) for native forms. */
|
|
1546
|
+
name?: string;
|
|
1547
|
+
className?: string;
|
|
1548
|
+
"aria-label"?: string;
|
|
1549
|
+
"aria-describedby"?: string;
|
|
1550
|
+
"aria-invalid"?: boolean | "true" | "false";
|
|
1551
|
+
/** Optional. Called when the field loses focus. */
|
|
1552
|
+
onBlur?: React.FocusEventHandler<HTMLInputElement>;
|
|
1553
|
+
}
|
|
1554
|
+
declare const TagInput: ({ value, defaultValue, onChange, suggestions, showSuggestionsOnFocus, allowCustom, maxTags, maxLength, allowDuplicates, delimiters, addOnBlur, validate, transform, onInvalid, onInputChange, placeholder, disabled, error, id, name, className, "aria-label": ariaLabel, "aria-describedby": describedBy, "aria-invalid": ariaInvalid, onBlur, }: TagInputProps) => React.JSX.Element;
|
|
1555
|
+
|
|
1556
|
+
type Trend = "up" | "down" | "neutral";
|
|
1557
|
+
interface StatCardProps extends Omit<React.HTMLAttributes<HTMLElement>, "children" | "title"> {
|
|
1558
|
+
/** What is being measured, for example "Active users". */
|
|
1559
|
+
label: React.ReactNode;
|
|
1560
|
+
/** The headline figure. Pass it already formatted, for example "12,480" or "$4.2k". */
|
|
1561
|
+
value: React.ReactNode;
|
|
1562
|
+
/** Optional. The change. A number is shown as a percentage ("12" becomes "12%"); a string is shown as given ("+340" or "2.1 pts"). */
|
|
1563
|
+
delta?: number | string;
|
|
1564
|
+
/** Optional. Short text after the change, such as "vs last month". */
|
|
1565
|
+
deltaLabel?: string;
|
|
1566
|
+
/** Optional. Direction of the change. Worked out from the sign of delta when left out. */
|
|
1567
|
+
trend?: Trend;
|
|
1568
|
+
/** Optional. Set when a lower number is better (costs, churn, errors), so a drop shows as good news. Defaults to false. */
|
|
1569
|
+
lowerIsBetter?: boolean;
|
|
1570
|
+
/** Optional. A short line under the value. */
|
|
1571
|
+
description?: React.ReactNode;
|
|
1572
|
+
/** Optional. An icon shown in a rounded tile at the top right. */
|
|
1573
|
+
icon?: React.ReactNode;
|
|
1574
|
+
/** Optional. A small trend line drawn from these values, oldest first. */
|
|
1575
|
+
sparkline?: number[];
|
|
1576
|
+
/** Optional. Show placeholder bars while the numbers load. Defaults to false. */
|
|
1577
|
+
loading?: boolean;
|
|
1578
|
+
/** Optional. Make the whole card a link. */
|
|
1579
|
+
href?: string;
|
|
1580
|
+
/** Optional. Make the whole card a button. Ignored when href is set. */
|
|
1581
|
+
onClick?: React.MouseEventHandler<HTMLElement>;
|
|
1582
|
+
/** Optional. Content under the figures, such as a small action or note. */
|
|
1583
|
+
footer?: React.ReactNode;
|
|
1584
|
+
}
|
|
1585
|
+
declare const StatCard: ({ label, value, delta, deltaLabel, trend, lowerIsBetter, description, icon, sparkline, loading, href, onClick, footer, className, ...rest }: StatCardProps) => React.JSX.Element;
|
|
1586
|
+
|
|
1587
|
+
interface ChartSeries {
|
|
1588
|
+
/** The key in each data row that holds this series' number. */
|
|
1589
|
+
key: string;
|
|
1590
|
+
/** Optional. Name shown in the legend and tooltip. Defaults to the key. */
|
|
1591
|
+
label?: string;
|
|
1592
|
+
}
|
|
1593
|
+
type Cell = string | number | null | undefined;
|
|
1594
|
+
interface ChartBaseProps {
|
|
1595
|
+
/** One object per x position (or per category), for example `{ month: "Jan", sales: 120, refunds: 8 }`. */
|
|
1596
|
+
data: Record<string, Cell>[];
|
|
1597
|
+
/** The key in each row that holds the x label or category name. */
|
|
1598
|
+
index: string;
|
|
1599
|
+
/** The numeric series to plot. Up to 8; each keeps its colour for good, whichever are shown. */
|
|
1600
|
+
series: (string | ChartSeries)[];
|
|
1601
|
+
/** Optional. Heading above the chart. Also names the chart for screen readers. */
|
|
1602
|
+
title?: React.ReactNode;
|
|
1603
|
+
/** Optional. A short sentence under the title. */
|
|
1604
|
+
description?: React.ReactNode;
|
|
1605
|
+
/** Optional. Plot height in px, including the axis labels. Defaults to 280. */
|
|
1606
|
+
height?: number;
|
|
1607
|
+
/** Optional. Formats values in the tooltip, labels and axis, for example `(v) => "$" + v`. */
|
|
1608
|
+
valueFormat?: (value: number) => string;
|
|
1609
|
+
/** Optional. Formats the x labels and category names. */
|
|
1610
|
+
indexFormat?: (value: string) => string;
|
|
1611
|
+
/** Optional. Show the legend. Shown automatically for two or more series. */
|
|
1612
|
+
showLegend?: boolean;
|
|
1613
|
+
/** Optional. Show the "View as table" switch. Defaults to true. */
|
|
1614
|
+
showTableToggle?: boolean;
|
|
1615
|
+
/** Optional. Start with the table instead of the chart. Defaults to false. */
|
|
1616
|
+
defaultView?: "chart" | "table";
|
|
1617
|
+
/** Optional. Text for an empty data set. */
|
|
1618
|
+
emptyText?: string;
|
|
1619
|
+
className?: string;
|
|
1620
|
+
}
|
|
1621
|
+
interface LineChartProps extends ChartBaseProps {
|
|
1622
|
+
/** Optional. Fill under each line with a light wash of its colour. Defaults to false. */
|
|
1623
|
+
area?: boolean;
|
|
1624
|
+
/** Optional. Where the y axis starts. Defaults to 0. Use "auto" to fit the data, which exaggerates small changes. */
|
|
1625
|
+
yMin?: number | "auto";
|
|
1626
|
+
}
|
|
1627
|
+
declare const LineChart: (props: LineChartProps) => React.JSX.Element;
|
|
1628
|
+
interface BarChartProps extends ChartBaseProps {
|
|
1629
|
+
/** Optional. "vertical" draws columns, "horizontal" draws bars from the left. Defaults to "vertical". Use horizontal for long category names. */
|
|
1630
|
+
orientation?: "vertical" | "horizontal";
|
|
1631
|
+
/** Optional. Stack the series on top of each other instead of side by side. Values should not be negative. Defaults to false. */
|
|
1632
|
+
stacked?: boolean;
|
|
1633
|
+
}
|
|
1634
|
+
declare const BarChart: (props: BarChartProps) => React.JSX.Element;
|
|
1635
|
+
|
|
1636
|
+
type Status = "idle" | "copied" | "failed";
|
|
1637
|
+
/** Copy text to the clipboard. Uses the modern API and falls back to a hidden textarea where it is blocked. */
|
|
1638
|
+
declare const copyText: (text: string) => Promise<boolean>;
|
|
1639
|
+
/** Hook behind CopyButton, for your own trigger. Returns the status and a copy function. */
|
|
1640
|
+
declare const useCopyToClipboard: (resetAfter?: number) => {
|
|
1641
|
+
status: Status;
|
|
1642
|
+
copied: boolean;
|
|
1643
|
+
copy: (text: string) => Promise<boolean>;
|
|
1644
|
+
};
|
|
1645
|
+
interface CopyButtonProps extends Omit<ButtonProps, "children" | "onClick" | "onCopy" | "onError" | "startIcon" | "endIcon" | "loading" | "iconOnly" | "value"> {
|
|
1646
|
+
/** What to copy. Pass a function (it may be async) to read the value only when clicked. */
|
|
1647
|
+
value: string | (() => string | Promise<string>);
|
|
1648
|
+
/** Optional. Button text. Leave out for an icon-only button. */
|
|
1649
|
+
label?: string;
|
|
1650
|
+
/** Optional. Text shown after copying. Defaults to "Copied". */
|
|
1651
|
+
copiedLabel?: string;
|
|
1652
|
+
/** Optional. Milliseconds before it returns to normal. Defaults to 2000. */
|
|
1653
|
+
resetAfter?: number;
|
|
1654
|
+
/** Called with the copied text after a successful copy. */
|
|
1655
|
+
onCopy?: (value: string) => void;
|
|
1656
|
+
/** Called when copying fails. */
|
|
1657
|
+
onError?: (error: unknown) => void;
|
|
1658
|
+
/** Optional. Name for an icon-only button, for example "Copy API key". Defaults to "Copy". Needed when there is no label. */
|
|
1659
|
+
"aria-label"?: string;
|
|
1660
|
+
}
|
|
1661
|
+
declare const CopyButton: ({ value, label, copiedLabel, resetAfter, onCopy, onError, variant, size, "aria-label": ariaLabel, className, ...rest }: CopyButtonProps) => React.JSX.Element;
|
|
1662
|
+
|
|
1663
|
+
interface OverlayProps extends Omit<React.HTMLAttributes<HTMLDivElement>, "children"> {
|
|
1664
|
+
/** Whether the overlay is shown. */
|
|
1665
|
+
open: boolean;
|
|
1666
|
+
/** Called when the overlay asks to close: a click on the dimmed area or Escape. Leave out for an overlay that cannot be dismissed. */
|
|
1667
|
+
onOpenChange?: (open: boolean) => void;
|
|
1668
|
+
/** Optional. "viewport" covers the whole screen. "container" covers the nearest positioned parent (give it `relative`), for example to dim one card while it loads. Defaults to "viewport". */
|
|
1669
|
+
scope?: "viewport" | "container";
|
|
1670
|
+
/** Optional. How dark the dimming is. Defaults to "medium". */
|
|
1671
|
+
tone?: "light" | "medium" | "dark";
|
|
1672
|
+
/** Optional. Blur what is behind. Defaults to "none". */
|
|
1673
|
+
blur?: "none" | "sm" | "md";
|
|
1674
|
+
/** Optional. Stop the page behind from scrolling while a viewport overlay is open. Defaults to true. */
|
|
1675
|
+
lockScroll?: boolean;
|
|
1676
|
+
/** Optional. Close on Escape when onOpenChange is set. Defaults to true. */
|
|
1677
|
+
closeOnEscape?: boolean;
|
|
1678
|
+
/** Optional. Show a spinner with this text, for waiting states. The text is announced to screen readers. */
|
|
1679
|
+
loadingText?: string;
|
|
1680
|
+
/** Optional. Show a spinner without visible text. Announced as "Loading". */
|
|
1681
|
+
loading?: boolean;
|
|
1682
|
+
/** Optional. Stacking order for a viewport overlay. Defaults to 40. */
|
|
1683
|
+
zIndex?: number;
|
|
1684
|
+
/** Optional. Content centred over the dimming, such as a message or your own panel. Clicks on it do not close the overlay. */
|
|
1685
|
+
children?: React.ReactNode;
|
|
1686
|
+
}
|
|
1687
|
+
declare const Overlay: ({ open, onOpenChange, scope, tone, blur, lockScroll, closeOnEscape, loading, loadingText, zIndex, className, style, onClick, children, ...rest }: OverlayProps) => React.JSX.Element | null;
|
|
1688
|
+
|
|
1689
|
+
type PortalContainer = HTMLElement | null | (() => HTMLElement | null);
|
|
1690
|
+
/** The element Genesis overlays render into by default: the nearest theme root, so theme variables still apply, otherwise the page body. */
|
|
1691
|
+
declare const getPortalContainer: () => HTMLElement | null;
|
|
1692
|
+
interface PortalProps {
|
|
1693
|
+
/** What to render outside the normal place in the page. */
|
|
1694
|
+
children?: React.ReactNode;
|
|
1695
|
+
/** Optional. Where to render it: an element, or a function that returns one (called after the page loads). Defaults to the theme root, or the page body. */
|
|
1696
|
+
container?: PortalContainer;
|
|
1697
|
+
/** Optional. Render in place instead, with no portal. Useful to switch the portal off in a tight layout or a test. Defaults to false. */
|
|
1698
|
+
disabled?: boolean;
|
|
1699
|
+
}
|
|
1700
|
+
/**
|
|
1701
|
+
* Renders children into another part of the page, usually `document.body`, so they are not clipped by a parent's
|
|
1702
|
+
* `overflow: hidden`, covered by its stacking context, or moved by its `transform`. React events still bubble
|
|
1703
|
+
* through the component tree as if the content were in place. Nothing renders on the server or in the first render.
|
|
1704
|
+
*/
|
|
1705
|
+
declare const Portal: ({ children, container, disabled }: PortalProps) => React.JSX.Element | null;
|
|
1706
|
+
|
|
1707
|
+
type Tag = "span" | "div" | "p" | "label" | "a" | "h1" | "h2" | "h3" | "legend" | "caption";
|
|
1708
|
+
interface VisuallyHiddenProps extends React.HTMLAttributes<HTMLElement> {
|
|
1709
|
+
/** Optional. The HTML element to render. Defaults to "span". */
|
|
1710
|
+
as?: Tag;
|
|
1711
|
+
/** Optional. Show the content when it receives keyboard focus, for example a "Skip to content" link. The element must be focusable (a link or button, or give it tabIndex={0}). Defaults to false. */
|
|
1712
|
+
focusable?: boolean;
|
|
1713
|
+
/** Optional. For as="label": the id of the field it names. */
|
|
1714
|
+
htmlFor?: string;
|
|
1715
|
+
/** Optional. For as="a": where the link goes. */
|
|
1716
|
+
href?: string;
|
|
1717
|
+
children?: React.ReactNode;
|
|
1718
|
+
}
|
|
1719
|
+
/**
|
|
1720
|
+
* Hides content from the screen but keeps it for screen readers and search. Unlike `display: none` or `hidden`,
|
|
1721
|
+
* the text stays in the accessibility tree. Use it for names and context that sighted users get from the layout.
|
|
1722
|
+
*/
|
|
1723
|
+
declare const VisuallyHidden: ({ as, focusable, className, children, ...rest }: VisuallyHiddenProps) => React.JSX.Element;
|
|
1724
|
+
|
|
1725
|
+
interface SkipLinkProps extends Omit<React.AnchorHTMLAttributes<HTMLAnchorElement>, "href"> {
|
|
1726
|
+
/** The target on the page, as an id with a hash, for example "#main". */
|
|
1727
|
+
href?: string;
|
|
1728
|
+
/** Optional. Link text. Defaults to "Skip to main content". */
|
|
1729
|
+
children?: React.ReactNode;
|
|
1730
|
+
}
|
|
1731
|
+
/**
|
|
1732
|
+
* The first focusable thing on a page. Hidden until a keyboard user tabs to it, then it lets them jump past the
|
|
1733
|
+
* navigation to the main content. On activation it moves keyboard focus to the target, not just the scroll position.
|
|
1734
|
+
*/
|
|
1735
|
+
declare const SkipLink: ({ href, children, onClick, ...rest }: SkipLinkProps) => React.JSX.Element;
|
|
1736
|
+
|
|
1737
|
+
interface LoadMoreProps {
|
|
1738
|
+
/** Called to fetch the next batch. Return a promise to get a loading state and to catch errors automatically. */
|
|
1739
|
+
onLoadMore: () => void | Promise<unknown>;
|
|
1740
|
+
/** Whether there is more to load. When false the button is replaced by the end message. */
|
|
1741
|
+
hasMore: boolean;
|
|
1742
|
+
/** Optional. Force the loading state yourself, for example when the request is managed by a data library. */
|
|
1743
|
+
loading?: boolean;
|
|
1744
|
+
/** Optional. An error to show with a retry button. Pass true for a default message. Left out, errors thrown by onLoadMore are shown. */
|
|
1745
|
+
error?: boolean | string;
|
|
1746
|
+
/** Optional. How many items are shown now. With total, shows "Showing 20 of 134". */
|
|
1747
|
+
loaded?: number;
|
|
1748
|
+
/** Optional. Total number of items, when it is known. */
|
|
1749
|
+
total?: number;
|
|
1750
|
+
/** Optional. Button text. Defaults to "Load more". */
|
|
1751
|
+
label?: string;
|
|
1752
|
+
/** Optional. Text shown when there is nothing more to load. Set to an empty string to show nothing. Defaults to "You have reached the end." */
|
|
1753
|
+
endText?: string;
|
|
1754
|
+
/** Optional. Also load the next batch automatically when the button scrolls into view. The button stays for keyboard and screen reader users. Defaults to false. */
|
|
1755
|
+
autoLoad?: boolean;
|
|
1756
|
+
/** Optional. Button style, from Button. Defaults to "outlined". */
|
|
1757
|
+
variant?: ButtonProps["variant"];
|
|
1758
|
+
/** Optional. Button size, from Button. */
|
|
1759
|
+
size?: ButtonProps["size"];
|
|
1760
|
+
className?: string;
|
|
1761
|
+
}
|
|
1762
|
+
declare const LoadMore: ({ onLoadMore, hasMore, loading: loadingProp, error: errorProp, loaded, total, label, endText, autoLoad, variant, size, className, }: LoadMoreProps) => React.JSX.Element;
|
|
1763
|
+
|
|
1764
|
+
interface CursorPaginationProps {
|
|
1765
|
+
/** Whether there is an earlier page. */
|
|
1766
|
+
hasPrevious: boolean;
|
|
1767
|
+
/** Whether there is a later page. */
|
|
1768
|
+
hasNext: boolean;
|
|
1769
|
+
/** Called to go to the previous page. Return a promise to show a loading state on the button. */
|
|
1770
|
+
onPrevious: () => void | Promise<unknown>;
|
|
1771
|
+
/** Called to go to the next page. Return a promise to show a loading state on the button. */
|
|
1772
|
+
onNext: () => void | Promise<unknown>;
|
|
1773
|
+
/** Optional. Force a loading state: true for both buttons, or the direction being loaded. */
|
|
1774
|
+
loading?: boolean | "previous" | "next";
|
|
1775
|
+
/** Optional. Text between the buttons, such as "Showing 21–40" or "Page 3". Announced to screen readers when it changes. */
|
|
1776
|
+
summary?: React.ReactNode;
|
|
1777
|
+
/** Optional. Accessible name of the navigation. Defaults to "Pagination". */
|
|
1778
|
+
"aria-label"?: string;
|
|
1779
|
+
/** Optional. Rows-per-page choices. When set, a selector is shown. */
|
|
1780
|
+
pageSizeOptions?: number[];
|
|
1781
|
+
/** Optional. Current rows per page, for the selector. */
|
|
1782
|
+
pageSize?: number;
|
|
1783
|
+
/** Called when a different page size is chosen. */
|
|
1784
|
+
onPageSizeChange?: (size: number) => void;
|
|
1785
|
+
/** Optional. Button style, from Button. Defaults to "outlined". */
|
|
1786
|
+
variant?: ButtonProps["variant"];
|
|
1787
|
+
/** Optional. Button size, from Button. Defaults to "sm". */
|
|
1788
|
+
size?: ButtonProps["size"];
|
|
1789
|
+
className?: string;
|
|
1790
|
+
}
|
|
1791
|
+
declare const CursorPagination: ({ hasPrevious, hasNext, onPrevious, onNext, loading, summary, "aria-label": ariaLabel, pageSizeOptions, pageSize, onPageSizeChange, variant, size, className, }: CursorPaginationProps) => React.JSX.Element;
|
|
1792
|
+
|
|
1793
|
+
type RootRef = React.RefObject<HTMLElement> | HTMLElement | null;
|
|
1794
|
+
interface UseInfiniteScrollOptions {
|
|
1795
|
+
/** Called to fetch the next batch. Return a promise to track loading and catch errors. */
|
|
1796
|
+
onLoadMore: () => void | Promise<unknown>;
|
|
1797
|
+
/** Whether there is more to load. */
|
|
1798
|
+
hasMore: boolean;
|
|
1799
|
+
/** Optional. Force the loading state, for example when a data library manages the request. */
|
|
1800
|
+
loading?: boolean;
|
|
1801
|
+
/** Optional. Force an error message. Left out, errors thrown by onLoadMore are used. */
|
|
1802
|
+
error?: string | boolean;
|
|
1803
|
+
/** Optional. The scrolling element to watch. Leave out to watch the page. */
|
|
1804
|
+
root?: RootRef;
|
|
1805
|
+
/** Optional. How early to load, as a CSS margin around the viewport. Defaults to "300px", which loads before the end is reached. */
|
|
1806
|
+
rootMargin?: string;
|
|
1807
|
+
/** Optional. Turn automatic loading off. Defaults to false. */
|
|
1808
|
+
disabled?: boolean;
|
|
1809
|
+
}
|
|
1810
|
+
/** Calls onLoadMore when the returned sentinel scrolls into view. Put the sentinel after the last item. */
|
|
1811
|
+
declare const useInfiniteScroll: ({ onLoadMore, hasMore, loading: loadingProp, error: errorProp, root, rootMargin, disabled }: UseInfiniteScrollOptions) => {
|
|
1812
|
+
sentinelRef: React.RefObject<HTMLDivElement>;
|
|
1813
|
+
loading: boolean;
|
|
1814
|
+
error: string | boolean;
|
|
1815
|
+
loadNow: () => Promise<void>;
|
|
1816
|
+
};
|
|
1817
|
+
interface InfiniteScrollProps extends Omit<React.HTMLAttributes<HTMLDivElement>, "children" | "onError"> {
|
|
1818
|
+
/** The items loaded so far. */
|
|
1819
|
+
children: React.ReactNode;
|
|
1820
|
+
/** Called to fetch the next batch. Return a promise to show the loader and catch errors automatically. */
|
|
1821
|
+
onLoadMore: () => void | Promise<unknown>;
|
|
1822
|
+
/** Whether there is more to load. */
|
|
1823
|
+
hasMore: boolean;
|
|
1824
|
+
/** Optional. Force the loading state. */
|
|
1825
|
+
loading?: boolean;
|
|
1826
|
+
/** Optional. Force an error. Pass true for a default message. */
|
|
1827
|
+
error?: string | boolean;
|
|
1828
|
+
/** Optional. Give the list a fixed height and make it the scrolling area. Leave out to scroll with the page, or use scrollContainer. */
|
|
1829
|
+
height?: number | string;
|
|
1830
|
+
/** Optional. A scrolling element of your own to watch, instead of the page. */
|
|
1831
|
+
scrollContainer?: RootRef;
|
|
1832
|
+
/** Optional. Shown while loading. Defaults to a spinner with "Loading more…". */
|
|
1833
|
+
loader?: React.ReactNode;
|
|
1834
|
+
/** Optional. Shown when everything has loaded. Set to null for nothing. Defaults to "You have reached the end." */
|
|
1835
|
+
endMessage?: React.ReactNode;
|
|
1836
|
+
/** Optional. Keep a "Load more" button for keyboard and screen reader users and for when scrolling does not trigger. Defaults to true. */
|
|
1837
|
+
showButton?: boolean;
|
|
1838
|
+
/** Optional. How many items are shown. Announced to screen readers after each batch. */
|
|
1839
|
+
itemCount?: number;
|
|
1840
|
+
/** Optional. How early to load, as a CSS margin around the viewport. Defaults to "300px". */
|
|
1841
|
+
rootMargin?: string;
|
|
1842
|
+
/** Optional. Name for the scrolling area when height is set. */
|
|
1843
|
+
"aria-label"?: string;
|
|
1844
|
+
}
|
|
1845
|
+
declare const InfiniteScroll: ({ children, onLoadMore, hasMore, loading: loadingProp, error: errorProp, height, scrollContainer, loader, endMessage, showButton, itemCount, rootMargin, className, "aria-label": ariaLabel, ...rest }: InfiniteScrollProps) => React.JSX.Element;
|
|
1846
|
+
|
|
1847
|
+
type Placement = "top" | "bottom" | "left" | "right";
|
|
1848
|
+
type TargetRef = string | HTMLElement | React.RefObject<HTMLElement> | (() => HTMLElement | null) | null;
|
|
1849
|
+
interface TourStep {
|
|
1850
|
+
/** The element to highlight: a CSS selector such as "#save", an element, a ref, or a function that returns one. Leave out for a centred step with no highlight, for example a welcome message. */
|
|
1851
|
+
target?: TargetRef;
|
|
1852
|
+
/** Heading of the step. Also names the dialog for screen readers. */
|
|
1853
|
+
title: React.ReactNode;
|
|
1854
|
+
/** The explanation. Keep it to a sentence or two. */
|
|
1855
|
+
content?: React.ReactNode;
|
|
1856
|
+
/** Optional. Preferred side of the target for the card. It moves to the other side when there is no room. Defaults to "bottom". */
|
|
1857
|
+
placement?: Placement;
|
|
1858
|
+
/** Optional. Button text for this step's Next button. */
|
|
1859
|
+
nextLabel?: string;
|
|
1860
|
+
}
|
|
1861
|
+
interface TourProps {
|
|
1862
|
+
/** The steps, in order. */
|
|
1863
|
+
steps: TourStep[];
|
|
1864
|
+
/** Whether the tour is running. */
|
|
1865
|
+
open: boolean;
|
|
1866
|
+
/** Called with false when the tour ends: finished, skipped or closed. */
|
|
1867
|
+
onOpenChange: (open: boolean) => void;
|
|
1868
|
+
/** Controlled current step (0-based). */
|
|
1869
|
+
step?: number;
|
|
1870
|
+
/** Optional. Starting step when uncontrolled. Defaults to 0. */
|
|
1871
|
+
defaultStep?: number;
|
|
1872
|
+
/** Called with the new step index when the person moves between steps. */
|
|
1873
|
+
onStepChange?: (step: number) => void;
|
|
1874
|
+
/** Called when the last step's button is pressed. */
|
|
1875
|
+
onFinish?: () => void;
|
|
1876
|
+
/** Called when the tour is skipped or closed before the end, with the step it stopped on. */
|
|
1877
|
+
onSkip?: (step: number) => void;
|
|
1878
|
+
/** Optional. Space between the highlight and the target, in px. Defaults to 6. */
|
|
1879
|
+
spotlightPadding?: number;
|
|
1880
|
+
/** Optional. Close the tour when the dimmed area is clicked. Defaults to false, so a stray click does not end the tour. */
|
|
1881
|
+
closeOnOverlayClick?: boolean;
|
|
1882
|
+
/** Optional. Hide the "Skip tour" button. Defaults to false. */
|
|
1883
|
+
hideSkip?: boolean;
|
|
1884
|
+
/** Optional. Text of the buttons. */
|
|
1885
|
+
labels?: {
|
|
1886
|
+
next?: string;
|
|
1887
|
+
back?: string;
|
|
1888
|
+
done?: string;
|
|
1889
|
+
skip?: string;
|
|
1890
|
+
close?: string;
|
|
1891
|
+
};
|
|
1892
|
+
/** Optional. Stacking order. Defaults to 300. */
|
|
1893
|
+
zIndex?: number;
|
|
1894
|
+
}
|
|
1895
|
+
declare const Tour: ({ steps, open, onOpenChange, step: stepProp, defaultStep, onStepChange, onFinish, onSkip, spotlightPadding, closeOnOverlayClick, hideSkip, labels, zIndex, }: TourProps) => React.ReactPortal | null;
|
|
1896
|
+
|
|
1897
|
+
interface SignaturePadHandle {
|
|
1898
|
+
/** Remove everything. */
|
|
1899
|
+
clear: () => void;
|
|
1900
|
+
/** Remove the last stroke. */
|
|
1901
|
+
undo: () => void;
|
|
1902
|
+
/** True when nothing has been drawn or typed. */
|
|
1903
|
+
isEmpty: () => boolean;
|
|
1904
|
+
/** The pad as an image data URL, or null when empty. Defaults to PNG. */
|
|
1905
|
+
toDataURL: (type?: "image/png" | "image/jpeg" | "image/webp", quality?: number) => string | null;
|
|
1906
|
+
/** The pad as an image Blob, or null when empty. */
|
|
1907
|
+
toBlob: (type?: "image/png" | "image/jpeg" | "image/webp", quality?: number) => Promise<Blob | null>;
|
|
1908
|
+
}
|
|
1909
|
+
interface SignaturePadProps {
|
|
1910
|
+
/** Optional. Controlled image (a data URL), or null for empty. Works with FormField. */
|
|
1911
|
+
value?: string | null;
|
|
1912
|
+
/** Optional. Starting image when uncontrolled, for example a saved signature. */
|
|
1913
|
+
defaultValue?: string | null;
|
|
1914
|
+
/** Called with the pad as a PNG data URL when a stroke ends, or null when it is cleared. */
|
|
1915
|
+
onChange?: (dataUrl: string | null) => void;
|
|
1916
|
+
/** Optional. "signature" shows a baseline and a prompt. "drawing" is a plain canvas. Defaults to "signature". */
|
|
1917
|
+
variant?: "signature" | "drawing";
|
|
1918
|
+
/** Optional. Height in px. The width fills the space. Defaults to 180. */
|
|
1919
|
+
height?: number;
|
|
1920
|
+
/** Optional. Ink colour. Defaults to near-black. */
|
|
1921
|
+
color?: string;
|
|
1922
|
+
/** Optional. Line thickness in px at a 400px wide pad. Defaults to 2.5. */
|
|
1923
|
+
strokeWidth?: number;
|
|
1924
|
+
/** Optional. A set of colours to choose from. Shows a colour picker above the pad. */
|
|
1925
|
+
colors?: string[];
|
|
1926
|
+
/** Optional. Colour behind the ink in the exported image. Defaults to transparent. Use "#ffffff" for JPEG. */
|
|
1927
|
+
backgroundColor?: string;
|
|
1928
|
+
/** Optional. Prompt shown on an empty signature pad. Defaults to "Sign here". */
|
|
1929
|
+
placeholder?: string;
|
|
1930
|
+
/** Optional. Offer typing a name as an alternative, for people who cannot draw. Defaults to true for signatures. */
|
|
1931
|
+
allowTyped?: boolean;
|
|
1932
|
+
/** Optional. Show the pad but do not allow changes. */
|
|
1933
|
+
readOnly?: boolean;
|
|
1934
|
+
disabled?: boolean;
|
|
1935
|
+
/** Optional. Show the error border. */
|
|
1936
|
+
error?: boolean;
|
|
1937
|
+
id?: string;
|
|
1938
|
+
/** Optional. Adds a hidden input holding the image, for native forms. */
|
|
1939
|
+
name?: string;
|
|
1940
|
+
className?: string;
|
|
1941
|
+
"aria-label"?: string;
|
|
1942
|
+
"aria-describedby"?: string;
|
|
1943
|
+
"aria-invalid"?: boolean | "true" | "false";
|
|
1944
|
+
onBlur?: React.FocusEventHandler<HTMLElement>;
|
|
1945
|
+
}
|
|
1946
|
+
declare const SignaturePad: React.ForwardRefExoticComponent<SignaturePadProps & React.RefAttributes<SignaturePadHandle>>;
|
|
1947
|
+
|
|
477
1948
|
interface DividerProps {
|
|
478
1949
|
width?: string;
|
|
479
1950
|
height?: string;
|
|
@@ -757,6 +2228,56 @@ interface ModalProps {
|
|
|
757
2228
|
}
|
|
758
2229
|
declare function Modal({ children, showModal, setShowModal, closeModal, closeOnOutsideClick, className, width, closeOnEscape, "aria-label": ariaLabel, "aria-labelledby": ariaLabelledBy, "aria-describedby": ariaDescribedBy, }: ModalProps): React.JSX.Element;
|
|
759
2230
|
|
|
2231
|
+
type MultiSelectOption = SelectOption;
|
|
2232
|
+
type MultiSelectGroup = SelectGroup;
|
|
2233
|
+
type Val = string | number;
|
|
2234
|
+
interface MultiSelectProps {
|
|
2235
|
+
/** Flat options, or groups of options. */
|
|
2236
|
+
options: (MultiSelectOption | MultiSelectGroup)[];
|
|
2237
|
+
/** Controlled selected values. */
|
|
2238
|
+
value?: Val[];
|
|
2239
|
+
/** Uncontrolled initial values. */
|
|
2240
|
+
defaultValue?: Val[];
|
|
2241
|
+
/** Called with the new values and their options. */
|
|
2242
|
+
onChange?: (values: Val[], options: MultiSelectOption[]) => void;
|
|
2243
|
+
placeholder?: string;
|
|
2244
|
+
/** Optional. Type to filter the list. Defaults to true. */
|
|
2245
|
+
searchable?: boolean;
|
|
2246
|
+
/** Optional. Called whenever the user types (for server search; combine with filter={false}). */
|
|
2247
|
+
onInputChange?: (query: string) => void;
|
|
2248
|
+
/** Optional. Custom matcher, or false to disable client-side filtering. */
|
|
2249
|
+
filter?: ((option: MultiSelectOption, query: string) => boolean) | false;
|
|
2250
|
+
/** Optional. Show a "Select all" row (hidden while searching or when maxSelected is set). */
|
|
2251
|
+
showSelectAll?: boolean;
|
|
2252
|
+
/** Optional. Maximum number of selections. Remaining options are disabled once reached. */
|
|
2253
|
+
maxSelected?: number;
|
|
2254
|
+
/** Optional. Show this many tags when closed, then a "+N" tag. Shows all when omitted. */
|
|
2255
|
+
maxTagCount?: number;
|
|
2256
|
+
/** Optional. Show a clear-all button when something is selected. Defaults to true. */
|
|
2257
|
+
clearable?: boolean;
|
|
2258
|
+
/** Optional. Text shown when nothing matches. */
|
|
2259
|
+
emptyText?: string;
|
|
2260
|
+
loading?: boolean;
|
|
2261
|
+
disabled?: boolean;
|
|
2262
|
+
error?: boolean;
|
|
2263
|
+
/** Optional. "sm" = 320px, "lg" = 313px, default = full width (same as Input). */
|
|
2264
|
+
size?: "sm" | "lg";
|
|
2265
|
+
/** Optional. Open the list above or below. Defaults to "bottom". */
|
|
2266
|
+
placement?: "bottom" | "top";
|
|
2267
|
+
/** Optional. Max height of the list in px. Defaults to 264. */
|
|
2268
|
+
maxHeight?: number;
|
|
2269
|
+
id?: string;
|
|
2270
|
+
/** Optional. Adds hidden inputs (one per value) for native forms. */
|
|
2271
|
+
name?: string;
|
|
2272
|
+
className?: string;
|
|
2273
|
+
"aria-label"?: string;
|
|
2274
|
+
"aria-describedby"?: string;
|
|
2275
|
+
}
|
|
2276
|
+
declare const MultiSelect: {
|
|
2277
|
+
({ options, value, defaultValue, onChange, placeholder, searchable, onInputChange, filter, showSelectAll, maxSelected, maxTagCount, clearable, emptyText, loading, disabled, error, size, placement, maxHeight, id, name, className, "aria-label": ariaLabel, "aria-describedby": ariaDescribedby, }: MultiSelectProps): React.JSX.Element;
|
|
2278
|
+
displayName: string;
|
|
2279
|
+
};
|
|
2280
|
+
|
|
760
2281
|
interface NoticeProps extends HTMLAttributes<HTMLDivElement>, VariantProps<typeof noticeVariants> {
|
|
761
2282
|
children?: ReactNode;
|
|
762
2283
|
noticeTitle?: string;
|
|
@@ -767,7 +2288,7 @@ interface NoticeProps extends HTMLAttributes<HTMLDivElement>, VariantProps<typeo
|
|
|
767
2288
|
setOpen: (value: boolean) => void;
|
|
768
2289
|
}
|
|
769
2290
|
declare const noticeVariants: (props?: ({
|
|
770
|
-
variant?: "success" | "
|
|
2291
|
+
variant?: "success" | "warning" | "error" | "default" | "info" | null | undefined;
|
|
771
2292
|
position?: "center" | "bottom" | "top" | null | undefined;
|
|
772
2293
|
} & class_variance_authority_types.ClassProp) | undefined) => string;
|
|
773
2294
|
declare const Notice: ({ children, variant, position, noticeTitle, open, setOpen, showIcon, }: NoticeProps) => React.JSX.Element;
|
|
@@ -796,6 +2317,53 @@ type TablePaginationProps = {
|
|
|
796
2317
|
};
|
|
797
2318
|
declare const Pagination: React.FC<TablePaginationProps>;
|
|
798
2319
|
|
|
2320
|
+
type Side = "top" | "bottom" | "left" | "right";
|
|
2321
|
+
type Align = "start" | "center" | "end";
|
|
2322
|
+
interface PopoverRenderApi {
|
|
2323
|
+
/** Close the popover (for example from a "Done" button inside it). */
|
|
2324
|
+
close: () => void;
|
|
2325
|
+
}
|
|
2326
|
+
interface PopoverProps {
|
|
2327
|
+
/** The element that opens the popover (usually a Button). */
|
|
2328
|
+
children: React.ReactNode;
|
|
2329
|
+
/** Content of the floating panel. Pass a function to get a close() helper. */
|
|
2330
|
+
content: React.ReactNode | ((api: PopoverRenderApi) => React.ReactNode);
|
|
2331
|
+
/** Optional. Controlled open state. */
|
|
2332
|
+
open?: boolean;
|
|
2333
|
+
/** Optional. Initial open state when uncontrolled. */
|
|
2334
|
+
defaultOpen?: boolean;
|
|
2335
|
+
/** Optional. Called whenever the popover wants to open or close. */
|
|
2336
|
+
onOpenChange?: (open: boolean) => void;
|
|
2337
|
+
/** Optional. Preferred side of the trigger. It flips if there is not enough room. Defaults to "bottom". */
|
|
2338
|
+
side?: Side;
|
|
2339
|
+
/** Optional. Alignment along the trigger's edge. Defaults to "center". */
|
|
2340
|
+
align?: Align;
|
|
2341
|
+
/** Optional. Gap between trigger and panel in px. Defaults to 8. */
|
|
2342
|
+
offset?: number;
|
|
2343
|
+
/** Optional. Show a small arrow pointing at the trigger. Defaults to true. */
|
|
2344
|
+
arrow?: boolean;
|
|
2345
|
+
/** Optional. "click" toggles on click, "hover" opens on hover or focus. Defaults to "click". */
|
|
2346
|
+
trigger?: "click" | "hover";
|
|
2347
|
+
/** Optional. Delay in ms before a hover popover closes. Defaults to 120. */
|
|
2348
|
+
hoverCloseDelay?: number;
|
|
2349
|
+
/** Optional. Close when clicking outside. Defaults to true. */
|
|
2350
|
+
closeOnOutsideClick?: boolean;
|
|
2351
|
+
/** Optional. Close when Escape is pressed. Defaults to true. */
|
|
2352
|
+
closeOnEscape?: boolean;
|
|
2353
|
+
disabled?: boolean;
|
|
2354
|
+
/** Optional. Accessible name for the panel. Use this or aria-labelledby. */
|
|
2355
|
+
"aria-label"?: string;
|
|
2356
|
+
"aria-labelledby"?: string;
|
|
2357
|
+
/** Optional. Extra classes for the panel (width, padding…). */
|
|
2358
|
+
className?: string;
|
|
2359
|
+
/** Optional. Extra classes for the trigger wrapper. */
|
|
2360
|
+
triggerClassName?: string;
|
|
2361
|
+
}
|
|
2362
|
+
declare const Popover: {
|
|
2363
|
+
({ children, content, open: openProp, defaultOpen, onOpenChange, side, align, offset, arrow, trigger, hoverCloseDelay, closeOnOutsideClick, closeOnEscape, disabled, "aria-label": ariaLabel, "aria-labelledby": ariaLabelledby, className, triggerClassName, }: PopoverProps): React.JSX.Element;
|
|
2364
|
+
displayName: string;
|
|
2365
|
+
};
|
|
2366
|
+
|
|
799
2367
|
type ProgressBarProps = {
|
|
800
2368
|
progress: number;
|
|
801
2369
|
progressText?: string;
|
|
@@ -812,10 +2380,42 @@ interface RadioProps extends Omit<InputHTMLAttributes<HTMLInputElement>, "size">
|
|
|
812
2380
|
}
|
|
813
2381
|
declare const radioVariants: (props?: ({
|
|
814
2382
|
size?: "sm" | "lg" | null | undefined;
|
|
815
|
-
intent?: "
|
|
2383
|
+
intent?: "primary" | "success" | "warning" | "error" | "default" | "blue" | "indigo" | "orange" | "pink" | "purple" | "violet" | "bluegray" | "bluelight" | "rose" | null | undefined;
|
|
816
2384
|
} & class_variance_authority_types.ClassProp) | undefined) => string;
|
|
817
2385
|
declare const Radio: React.ForwardRefExoticComponent<RadioProps & React.RefAttributes<HTMLInputElement>>;
|
|
818
2386
|
|
|
2387
|
+
interface RatingProps {
|
|
2388
|
+
/** Controlled value (0 to max). Fractions such as 4.3 render partially filled in read-only mode. */
|
|
2389
|
+
value?: number;
|
|
2390
|
+
/** Uncontrolled initial value. Defaults to 0. */
|
|
2391
|
+
defaultValue?: number;
|
|
2392
|
+
/** Called when the user picks a value. */
|
|
2393
|
+
onChange?: (value: number) => void;
|
|
2394
|
+
/** Optional. Number of stars. Defaults to 5. */
|
|
2395
|
+
max?: number;
|
|
2396
|
+
/** Optional. Allow half-star steps. Defaults to false. */
|
|
2397
|
+
allowHalf?: boolean;
|
|
2398
|
+
/** Optional. Display only: not focusable or clickable. Defaults to false. */
|
|
2399
|
+
readOnly?: boolean;
|
|
2400
|
+
disabled?: boolean;
|
|
2401
|
+
/** Optional. Defaults to "md". */
|
|
2402
|
+
size?: "sm" | "md" | "lg";
|
|
2403
|
+
/** Optional. Fill color. Defaults to "warning" (amber). */
|
|
2404
|
+
color?: "warning" | "primary" | "success" | "error";
|
|
2405
|
+
/** Optional. Clicking the current value again resets to 0. Defaults to false. */
|
|
2406
|
+
clearable?: boolean;
|
|
2407
|
+
/** Optional. Adds a hidden input for native forms. */
|
|
2408
|
+
name?: string;
|
|
2409
|
+
id?: string;
|
|
2410
|
+
className?: string;
|
|
2411
|
+
"aria-label"?: string;
|
|
2412
|
+
"aria-labelledby"?: string;
|
|
2413
|
+
}
|
|
2414
|
+
declare const Rating: {
|
|
2415
|
+
({ value, defaultValue, onChange, max, allowHalf, readOnly, disabled, size, color, clearable, name, id, className, "aria-label": ariaLabel, "aria-labelledby": ariaLabelledby, }: RatingProps): React.JSX.Element;
|
|
2416
|
+
displayName: string;
|
|
2417
|
+
};
|
|
2418
|
+
|
|
819
2419
|
type UploadStatus = "idle" | "uploading" | "success" | "error";
|
|
820
2420
|
interface UploadItem {
|
|
821
2421
|
id: string;
|
|
@@ -851,51 +2451,37 @@ interface FileUploadControlProps {
|
|
|
851
2451
|
declare const defaultGetFileIcon: (fileName: string, fileType: string) => React.JSX.Element;
|
|
852
2452
|
declare function FileUploadControl({ items, onAddFiles, onUpdateItem, onRejectFiles, onDelete, onRetry, onPreview, onUpload, multiple, accept, maxSizeMB, className, hintText, showSizeText, getFileIcon, autoUpload, disabled, }: FileUploadControlProps): React.JSX.Element;
|
|
853
2453
|
|
|
854
|
-
interface
|
|
855
|
-
|
|
2454
|
+
interface SegmentedOption {
|
|
2455
|
+
/** Text or element shown in the segment. */
|
|
2456
|
+
label?: React.ReactNode;
|
|
856
2457
|
value: string | number;
|
|
857
|
-
/** Optional. Unselectable and skipped by the keyboard. */
|
|
858
|
-
disabled?: boolean;
|
|
859
|
-
/** Optional. Secondary line under the label. */
|
|
860
|
-
description?: string;
|
|
861
2458
|
/** Optional. Icon shown before the label. */
|
|
862
2459
|
icon?: JSX.Element;
|
|
2460
|
+
disabled?: boolean;
|
|
2461
|
+
/** Required when the option has an icon but no label. */
|
|
2462
|
+
"aria-label"?: string;
|
|
863
2463
|
}
|
|
864
|
-
interface
|
|
865
|
-
|
|
866
|
-
|
|
867
|
-
|
|
868
|
-
|
|
869
|
-
|
|
870
|
-
|
|
871
|
-
/**
|
|
872
|
-
|
|
873
|
-
/**
|
|
874
|
-
|
|
875
|
-
/** Called with the new value (null when cleared) and its option. */
|
|
876
|
-
onChange?: (value: string | number | null, option: SelectOption | null) => void;
|
|
877
|
-
placeholder?: string;
|
|
2464
|
+
interface SegmentedControlProps {
|
|
2465
|
+
options: SegmentedOption[];
|
|
2466
|
+
/** Controlled value. */
|
|
2467
|
+
value?: string | number;
|
|
2468
|
+
/** Uncontrolled initial value. Defaults to the first enabled option. */
|
|
2469
|
+
defaultValue?: string | number;
|
|
2470
|
+
onChange?: (value: string | number, option: SegmentedOption) => void;
|
|
2471
|
+
/** Optional. Defaults to "md". */
|
|
2472
|
+
size?: "sm" | "md" | "lg";
|
|
2473
|
+
/** Optional. Stretch to the width of the container. Defaults to false. */
|
|
2474
|
+
fullWidth?: boolean;
|
|
878
2475
|
disabled?: boolean;
|
|
879
|
-
error?: boolean;
|
|
880
|
-
/** Optional. "sm" = 320px, "lg" = 313px, default = full width (same as Input). */
|
|
881
|
-
size?: "sm" | "lg";
|
|
882
|
-
/** Optional. Open the list above or below. Defaults to "bottom". */
|
|
883
|
-
placement?: "bottom" | "top";
|
|
884
|
-
/** Optional. Show a clear button when a value is selected. Defaults to false. */
|
|
885
|
-
clearable?: boolean;
|
|
886
|
-
/** Optional. Max height of the list in px. Defaults to 264. */
|
|
887
|
-
maxHeight?: number;
|
|
888
|
-
/** Optional. Text shown when options is empty. */
|
|
889
|
-
emptyText?: string;
|
|
890
|
-
id?: string;
|
|
891
2476
|
/** Optional. Adds a hidden input for native forms. */
|
|
892
2477
|
name?: string;
|
|
2478
|
+
id?: string;
|
|
893
2479
|
className?: string;
|
|
894
2480
|
"aria-label"?: string;
|
|
895
|
-
"aria-
|
|
2481
|
+
"aria-labelledby"?: string;
|
|
896
2482
|
}
|
|
897
|
-
declare const
|
|
898
|
-
({ options, value, defaultValue, onChange,
|
|
2483
|
+
declare const SegmentedControl: {
|
|
2484
|
+
({ options, value, defaultValue, onChange, size, fullWidth, disabled, name, id, className, "aria-label": ariaLabel, "aria-labelledby": ariaLabelledby, }: SegmentedControlProps): React.JSX.Element;
|
|
899
2485
|
displayName: string;
|
|
900
2486
|
};
|
|
901
2487
|
|
|
@@ -1028,6 +2614,69 @@ declare const TableRow: ({ children, className, indent, ...props }: TableRowProp
|
|
|
1028
2614
|
declare const TableHeadCell: ({ children, className, icon, sticky, shadow, left, shadowRight, right, ...props }: TableHeadCellProps) => React.JSX.Element;
|
|
1029
2615
|
declare const TableDataCell: ({ children, className, icon, sticky, shadow, shadowRight, left, right, ...props }: TableCellProps) => React.JSX.Element;
|
|
1030
2616
|
|
|
2617
|
+
type ToastIntent = "default" | "primary" | "success" | "warning" | "error" | "loading";
|
|
2618
|
+
type ToastPosition = "top-right" | "top-left" | "top-center" | "bottom-right" | "bottom-left" | "bottom-center";
|
|
2619
|
+
interface ToastAction {
|
|
2620
|
+
label: string;
|
|
2621
|
+
onClick: () => void;
|
|
2622
|
+
}
|
|
2623
|
+
interface ToastOptions {
|
|
2624
|
+
/** Optional. Reuse an id to update an existing toast instead of adding a new one. */
|
|
2625
|
+
id?: string;
|
|
2626
|
+
/** Optional. Bold first line. */
|
|
2627
|
+
title?: React.ReactNode;
|
|
2628
|
+
/** Optional. Message text. */
|
|
2629
|
+
description?: React.ReactNode;
|
|
2630
|
+
/** Optional. Defaults to "default". */
|
|
2631
|
+
intent?: ToastIntent;
|
|
2632
|
+
/** Optional. Milliseconds before auto-dismiss. Use Infinity to keep it until dismissed. Defaults to the provider's duration (loading toasts default to Infinity). */
|
|
2633
|
+
duration?: number;
|
|
2634
|
+
/** Optional. A button shown under the message. */
|
|
2635
|
+
action?: ToastAction;
|
|
2636
|
+
/** Optional. Show a close button. Defaults to true. */
|
|
2637
|
+
dismissible?: boolean;
|
|
2638
|
+
/** Optional. Custom icon, or false for none. */
|
|
2639
|
+
icon?: JSX.Element | false;
|
|
2640
|
+
/** Optional. Called after the toast is removed. */
|
|
2641
|
+
onDismiss?: () => void;
|
|
2642
|
+
}
|
|
2643
|
+
type Message = React.ReactNode;
|
|
2644
|
+
interface ToastPromiseMessages<T> {
|
|
2645
|
+
loading: Message;
|
|
2646
|
+
success: Message | ((data: T) => Message);
|
|
2647
|
+
error: Message | ((error: unknown) => Message);
|
|
2648
|
+
}
|
|
2649
|
+
interface ToastApi {
|
|
2650
|
+
/** Show a toast. Returns its id. */
|
|
2651
|
+
toast: (options: ToastOptions | Message) => string;
|
|
2652
|
+
success: (message: Message, options?: ToastOptions) => string;
|
|
2653
|
+
error: (message: Message, options?: ToastOptions) => string;
|
|
2654
|
+
warning: (message: Message, options?: ToastOptions) => string;
|
|
2655
|
+
info: (message: Message, options?: ToastOptions) => string;
|
|
2656
|
+
loading: (message: Message, options?: ToastOptions) => string;
|
|
2657
|
+
/** Change an existing toast (for example loading → success). */
|
|
2658
|
+
update: (id: string, options: ToastOptions) => void;
|
|
2659
|
+
/** Dismiss one toast by id, or all of them when called without an id. */
|
|
2660
|
+
dismiss: (id?: string) => void;
|
|
2661
|
+
/** Show a loading toast that turns into success or error when the promise settles. */
|
|
2662
|
+
promise: <T>(promise: Promise<T>, messages: ToastPromiseMessages<T>, options?: ToastOptions) => Promise<T>;
|
|
2663
|
+
}
|
|
2664
|
+
interface ToastProviderProps {
|
|
2665
|
+
children: React.ReactNode;
|
|
2666
|
+
/** Optional. Where toasts appear. Defaults to "top-right". */
|
|
2667
|
+
position?: ToastPosition;
|
|
2668
|
+
/** Optional. Default auto-dismiss time in ms. Defaults to 5000. */
|
|
2669
|
+
duration?: number;
|
|
2670
|
+
/** Optional. How many toasts show at once. Extra toasts wait in a queue. Defaults to 3. */
|
|
2671
|
+
maxVisible?: number;
|
|
2672
|
+
/** Optional. Show a shrinking bar for the remaining time. Defaults to false. */
|
|
2673
|
+
showProgress?: boolean;
|
|
2674
|
+
/** Optional. Accessible name of the notification area. Defaults to "Notifications". */
|
|
2675
|
+
label?: string;
|
|
2676
|
+
}
|
|
2677
|
+
declare const useToast: () => ToastApi;
|
|
2678
|
+
declare const ToastProvider: ({ children, position, duration, maxVisible, showProgress, label, }: ToastProviderProps) => React.JSX.Element;
|
|
2679
|
+
|
|
1031
2680
|
interface TabItem {
|
|
1032
2681
|
label: string;
|
|
1033
2682
|
value: string;
|
|
@@ -1139,7 +2788,7 @@ interface ToggleProps extends Omit<InputHTMLAttributes<HTMLInputElement>, "size"
|
|
|
1139
2788
|
}
|
|
1140
2789
|
declare const toggleVariants: (props?: ({
|
|
1141
2790
|
size?: "sm" | "md" | "lg" | null | undefined;
|
|
1142
|
-
intent?: "
|
|
2791
|
+
intent?: "primary" | "success" | "warning" | "error" | "default" | "blue" | "indigo" | "orange" | "pink" | "purple" | "violet" | "bluegray" | "bluelight" | "rose" | null | undefined;
|
|
1143
2792
|
} & class_variance_authority_types.ClassProp) | undefined) => string;
|
|
1144
2793
|
declare const Toggle: React.ForwardRefExoticComponent<ToggleProps & React.RefAttributes<HTMLInputElement>>;
|
|
1145
2794
|
|
|
@@ -1213,7 +2862,7 @@ interface TypographyProps extends HTMLAttributes<HTMLHeadingElement | HTMLParagr
|
|
|
1213
2862
|
}
|
|
1214
2863
|
declare const typographyVariant: (props?: ({
|
|
1215
2864
|
variant?: "h1" | "h2" | "h3" | "h4" | "h5" | "h6" | "b1" | "b2" | "b3" | "b4" | "b5" | null | undefined;
|
|
1216
|
-
intent?: "primary" | "success" | "
|
|
2865
|
+
intent?: "primary" | "success" | "warning" | "error" | "default" | null | undefined;
|
|
1217
2866
|
} & class_variance_authority_types.ClassProp) | undefined) => string;
|
|
1218
2867
|
declare const Typography: ({ as, variant, intent, children, className, ...props }: TypographyProps) => React.JSX.Element;
|
|
1219
2868
|
|
|
@@ -1345,4 +2994,4 @@ interface ThemeScriptProps {
|
|
|
1345
2994
|
*/
|
|
1346
2995
|
declare const ThemeScript: ({ defaultMode, storageKey, nonce, }: ThemeScriptProps) => React.JSX.Element;
|
|
1347
2996
|
|
|
1348
|
-
export { Accordion, AccordionContent, AccordionItem, AccordionTrigger, Avatar, AvatarGroup, Breadcrumbs as BreadCrumb, Button, Calendar, type CalendarProps, type CalendarRange, Callout, Card, CardAction, CardContent, CardDescription, CardFooter, CardHeader, CardTitle, Checkbox, Chip, CircularProgressBar as CircularProgress, type ColorFamily, ColorPicker, type ColorPickerProps, type ColorPickerToken, type ColorShade, DatePicker, type DatePickerProps, type DateRange, DateRangePicker, type DateRangePickerProps, type DateRangePreset, DateTimePicker, type DateTimePickerProps, Divider, Drawer, Dropdown, DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuLabel, DropdownMenuSeparator, DropdownMenuSub, DropdownMenuSubContent, DropdownMenuSubTrigger, DropdownMenuTrigger, DropdownWithIcon, FileSelector, FileUpload, FileUploadControl, FileUploadPreview, GlobalNavigation, HelperText, Input, Label, ListPagination, Loading, Modal, Notice, OTPInput, Pagination, ProgressBar, Radio, Select, type SelectGroup, type SelectOption, type SelectProps, Sidebar, Skeleton, Slider, Spinner, SplitButton, Stepper, Tab, TabList, TabPanel, Table, TableBody, TableDataCell, TableHead, TableHeadCell, TableRow, TabsContainer, TextInputWithLabel, Textarea, ThemeColorPicker, type ThemeColorPickerProps, type ThemeContextValue, type ThemeMode, ThemeModeSwitch, type ThemeModeSwitchProps, ThemeProvider, type ThemeProviderProps, type ThemeScale, ThemeScript, type ThemeScriptProps, type ThemeShade, TimePicker, type TimePickerProps, Toggle, Tooltip, TreeView, Typography, defaultGetFileIcon, getDefaultRangePresets, useTheme };
|
|
2997
|
+
export { Accordion, AccordionContent, AccordionItem, AccordionTrigger, type ActiveFilter, Alert, type AlertProps, Avatar, AvatarGroup, Badge, type BadgeProps, BarChart, type BarChartProps, BottomSheet, type BottomSheetProps, Breadcrumbs as BreadCrumb, Button, Calendar, type CalendarProps, type CalendarRange, Callout, Card, CardAction, CardContent, CardDescription, CardFooter, CardHeader, CardTitle, Carousel, type CarouselProps, type ChartSeries, Checkbox, Chip, CircularProgressBar as CircularProgress, CodeBlock, type CodeBlockProps, Collapsible, CollapsibleContent, type CollapsibleContentProps, type CollapsibleProps, CollapsibleTrigger, type CollapsibleTriggerProps, type ColorFamily, ColorPicker, type ColorPickerProps, type ColorPickerToken, type ColorShade, Combobox, type ComboboxGroup, type ComboboxOption, type ComboboxProps, type CommandGroup, type CommandItem, CommandPalette, type CommandPaletteProps, ConfirmDialog, type ConfirmDialogProps, type ConfirmOptions, ConfirmProvider, type ConfirmProviderProps, type ConfirmVariant, ContextMenu, ContextMenuCheckboxItem, type ContextMenuCheckboxItemProps, ContextMenuContent, type ContextMenuContentProps, ContextMenuItem, type ContextMenuItemProps, ContextMenuLabel, type ContextMenuProps, ContextMenuSeparator, ContextMenuSub, ContextMenuSubContent, ContextMenuSubTrigger, ContextMenuTrigger, type ContextMenuTriggerProps, CopyButton, type CopyButtonProps, CursorPagination, type CursorPaginationProps, DataGrid, type DataGridColumn, type DataGridProps, type DataGridSort, DatePicker, type DatePickerProps, type DateRange, DateRangePicker, type DateRangePickerProps, type DateRangePreset, DateTimePicker, type DateTimePickerProps, Divider, Drawer, Dropdown, DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuLabel, DropdownMenuSeparator, DropdownMenuSub, DropdownMenuSubContent, DropdownMenuSubTrigger, DropdownMenuTrigger, DropdownWithIcon, EmptyState, type EmptyStateProps, type FieldControlProps, type FieldValidator, FileSelector, FileUpload, FileUploadControl, FileUploadPreview, Form, type FormErrors, FormField, type FormFieldProps, type FormProps, type FormState, type GalleryImage, GlobalNavigation, HelperText, ImageGallery, type ImageGalleryProps, InfiniteScroll, type InfiniteScrollProps, Input, Kbd, type KbdProps, Label, Lightbox, type LightboxProps, LineChart, type LineChartProps, Link, type LinkProps, ListPagination, LoadMore, type LoadMoreProps, Loading, Menubar, MenubarCheckboxItem, type MenubarCheckboxItemProps, MenubarContent, type MenubarContentProps, MenubarItem, type MenubarItemProps, MenubarLabel, MenubarMenu, type MenubarProps, MenubarSeparator, MenubarSub, MenubarSubContent, MenubarSubTrigger, MenubarTrigger, type MenubarTriggerProps, Modal, MultiSelect, type MultiSelectGroup, type MultiSelectOption, type MultiSelectProps, Navbar, type NavbarItem, type NavbarLinkRenderProps, type NavbarProps, Notice, NumberInput, type NumberInputProps, OTPInput, Overlay, type OverlayProps, Pagination, PasswordInput, type PasswordInputProps, type PasswordStrength, Popover, type PopoverProps, type PopoverRenderApi, Portal, type PortalContainer, type PortalProps, ProgressBar, Radio, Rating, type RatingProps, ResizableHandle, type ResizableHandleProps, ResizablePanel, ResizablePanelGroup, type ResizablePanelGroupProps, type ResizablePanelProps, RichTextEditor, type RichTextEditorProps, type RichTextToolbarItem, ScrollArea, type ScrollAreaProps, SearchInput, type SearchInputProps, SegmentedControl, type SegmentedControlProps, type SegmentedOption, Select, type SelectGroup, type SelectOption, type SelectProps, Sidebar, SignaturePad, type SignaturePadHandle, type SignaturePadProps, Skeleton, SkipLink, type SkipLinkProps, Slider, type SortDirection, Spinner, SplitButton, StatCard, type StatCardProps, Stepper, Tab, TabList, TabPanel, Table, TableBody, TableDataCell, TableHead, TableHeadCell, TableRow, TableToolbar, type TableToolbarProps, TabsContainer, TagInput, type TagInputProps, TextInputWithLabel, Textarea, ThemeColorPicker, type ThemeColorPickerProps, type ThemeContextValue, type ThemeMode, ThemeModeSwitch, type ThemeModeSwitchProps, ThemeProvider, type ThemeProviderProps, type ThemeScale, ThemeScript, type ThemeScriptProps, type ThemeShade, TimePicker, type TimePickerProps, Timeline, type TimelineItem, type TimelineProps, type TimelineStatus, type ToastAction, type ToastApi, type ToastIntent, type ToastOptions, type ToastPosition, ToastProvider, type ToastProviderProps, Toggle, Tooltip, Tour, type TourProps, type TourStep, TreeView, Typography, type UseInfiniteScrollOptions, VisuallyHidden, type VisuallyHiddenProps, compose, copyText, defaultGetFileIcon, getDefaultRangePresets, getPasswordStrength, getPortalContainer, sanitizeHtml, useConfirm, useCopyToClipboard, useFormContext, useInfiniteScroll, useTheme, useToast, validators };
|