@yuno-payments/dashboard-design-system 3.1.0-beta.4 → 3.1.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/index.cjs +42 -42
- package/dist/index.d.ts +719 -70
- package/dist/index.js +14890 -13431
- package/dist/styles.css +1 -1
- package/dist/tokens.css +5 -5
- package/package.json +3 -2
package/dist/index.d.ts
CHANGED
|
@@ -7,8 +7,10 @@ import { ClassValue } from 'clsx';
|
|
|
7
7
|
import { Column } from '@tanstack/react-table';
|
|
8
8
|
import { ColumnDef } from '@tanstack/react-table';
|
|
9
9
|
import { ColumnResizeMode } from '@tanstack/react-table';
|
|
10
|
+
import { Command as Command_2 } from 'cmdk';
|
|
10
11
|
import { ComponentProps } from 'react';
|
|
11
12
|
import { DateRange } from 'react-day-picker';
|
|
13
|
+
import * as DialogPrimitive from '@radix-ui/react-dialog';
|
|
12
14
|
import * as DropdownMenuPrimitive from '@radix-ui/react-dropdown-menu';
|
|
13
15
|
import { ElementType } from 'react';
|
|
14
16
|
import { ForwardRefExoticComponent } from 'react';
|
|
@@ -215,50 +217,74 @@ export declare type AggregationFn = "sum" | "avg" | "size" | "min" | "max" | ((p
|
|
|
215
217
|
}) => number | string);
|
|
216
218
|
|
|
217
219
|
/**
|
|
218
|
-
* Alert
|
|
220
|
+
* Alert for informational, success, warning or error messages.
|
|
221
|
+
*
|
|
222
|
+
* The card is always white with a neutral border — the variant tints the ICON
|
|
223
|
+
* and nothing else, except `destructive`, which also reddens the text. That is
|
|
224
|
+
* the prototype-kit's pattern (DAS-18254), and it is deliberate: tinted
|
|
225
|
+
* backgrounds are what create contrast problems in dark mode.
|
|
219
226
|
*
|
|
220
227
|
* @example
|
|
221
228
|
* ```tsx
|
|
222
|
-
* <Alert
|
|
223
|
-
* <Alert variant="
|
|
229
|
+
* <Alert icon="Info" title="Heads up" description="Something to know" />
|
|
230
|
+
* <Alert variant="warning" icon="Warning" description="Check this" />
|
|
231
|
+
* <Alert
|
|
232
|
+
* variant="destructive"
|
|
233
|
+
* icon="WarningCircle"
|
|
234
|
+
* title="Failed"
|
|
235
|
+
* description="The transfer did not go through."
|
|
236
|
+
* actions={<Button size="sm" variant="outline">Retry</Button>}
|
|
237
|
+
* />
|
|
224
238
|
* ```
|
|
225
239
|
*/
|
|
226
240
|
export declare const Alert: ForwardRefExoticComponent<Omit<AlertProps, "ref"> & RefAttributes<HTMLDivElement>>;
|
|
227
241
|
|
|
228
|
-
declare
|
|
242
|
+
declare const Alert_2: React_2.ForwardRefExoticComponent<AlertProps_2 & React_2.RefAttributes<HTMLDivElement>>;
|
|
229
243
|
|
|
230
244
|
/**
|
|
231
|
-
* Props for the Alert component
|
|
245
|
+
* Props for the Alert component.
|
|
246
|
+
*
|
|
247
|
+
* This is a PROPS api and stays one — `children` is deliberately omitted. All
|
|
248
|
+
* 99 call sites in the product were parsed before deciding: 85 pass a
|
|
249
|
+
* translation or a variable to `description`, so the props form fits the vast
|
|
250
|
+
* majority, and opening composition as a second route would give two ways to
|
|
251
|
+
* do the same thing.
|
|
252
|
+
*
|
|
253
|
+
* `description` is a ReactNode on purpose, though, and passing rich content to
|
|
254
|
+
* it is NOT misuse. Several alerts legitimately render a list of validation
|
|
255
|
+
* failures or a sentence containing a link. Do not "fix" those into something
|
|
256
|
+
* else. What the `actions` prop below replaces is narrower: call sites that
|
|
257
|
+
* were hand-rolling a row of buttons inside the description.
|
|
232
258
|
*/
|
|
233
|
-
export declare interface AlertProps extends Omit<ComponentProps<typeof Alert_2>, 'children'> {
|
|
234
|
-
/**
|
|
235
|
-
* Optional icon to display at the start of the alert
|
|
236
|
-
*/
|
|
259
|
+
export declare interface AlertProps extends Omit<ComponentProps<typeof Alert_2>, 'children' | 'dismiss' | 'action'> {
|
|
260
|
+
/** Icon shown at the start of the alert. */
|
|
237
261
|
icon?: IconName;
|
|
238
|
-
/**
|
|
239
|
-
* Alert title/heading
|
|
240
|
-
*/
|
|
262
|
+
/** Alert title/heading. */
|
|
241
263
|
title?: string;
|
|
242
264
|
/**
|
|
243
|
-
* Alert
|
|
265
|
+
* Alert body. Rich content is fine here — a list, a sentence with a link.
|
|
266
|
+
* For a row of buttons, use `actions`.
|
|
244
267
|
*/
|
|
245
268
|
description?: ReactNode;
|
|
246
|
-
/**
|
|
247
|
-
|
|
248
|
-
|
|
269
|
+
/** Buttons rendered in a row under the description. */
|
|
270
|
+
actions?: ReactNode;
|
|
271
|
+
/** Props for the icon component. */
|
|
249
272
|
iconProps?: ComponentProps<typeof Icon>;
|
|
250
|
-
/**
|
|
251
|
-
* When provided, renders a close (X) button at the top-right of the alert
|
|
252
|
-
*/
|
|
273
|
+
/** When provided, renders a close (X) button at the top-right. */
|
|
253
274
|
onClose?: () => void;
|
|
254
|
-
/**
|
|
255
|
-
* Accessible label for the close button
|
|
256
|
-
*/
|
|
275
|
+
/** Accessible label for the close button. */
|
|
257
276
|
closeLabel?: string;
|
|
258
277
|
}
|
|
259
278
|
|
|
279
|
+
declare interface AlertProps_2 extends React_2.HTMLAttributes<HTMLDivElement>, VariantProps<typeof alertVariants> {
|
|
280
|
+
/** Right-aligned slot, vertically centred. Takes precedence over `dismiss`. */
|
|
281
|
+
action?: React_2.ReactNode;
|
|
282
|
+
/** Rendered as the top-right dismiss control when no `action` is set. */
|
|
283
|
+
dismiss?: React_2.ReactNode;
|
|
284
|
+
}
|
|
285
|
+
|
|
260
286
|
declare const alertVariants: (props?: {
|
|
261
|
-
variant?: "default" | "destructive";
|
|
287
|
+
variant?: "default" | "info" | "warning" | "success" | "muted" | "destructive";
|
|
262
288
|
} & ClassProp) => string;
|
|
263
289
|
|
|
264
290
|
/**
|
|
@@ -390,8 +416,8 @@ export declare interface BadgeProps extends ComponentProps<typeof Badge_2> {
|
|
|
390
416
|
|
|
391
417
|
declare type BadgeVariant = NonNullable<ComponentProps<typeof Badge>['variant']>;
|
|
392
418
|
|
|
393
|
-
declare const badgeVariants: (props?: {
|
|
394
|
-
variant?: "default" | "
|
|
419
|
+
export declare const badgeVariants: (props?: {
|
|
420
|
+
variant?: "default" | "info" | "warning" | "success" | "destructive" | "alert" | "secondary" | "outline" | "error" | "verified";
|
|
395
421
|
} & ClassProp) => string;
|
|
396
422
|
|
|
397
423
|
/**
|
|
@@ -473,9 +499,10 @@ export declare const BulkActionBar: ForwardRefExoticComponent<BulkActionBarProps
|
|
|
473
499
|
|
|
474
500
|
export declare interface BulkActionBarProps extends HTMLAttributes<HTMLDivElement> {
|
|
475
501
|
/**
|
|
476
|
-
* Whether the bar is shown. While closed the bar stays mounted
|
|
477
|
-
*
|
|
478
|
-
* while closing if you don't want "0 selected"
|
|
502
|
+
* Whether the bar is shown. While closed the bar stays mounted so the exit
|
|
503
|
+
* transition can play, but it leaves the accessibility tree and stops taking
|
|
504
|
+
* focus — freeze your label while closing if you don't want "0 selected"
|
|
505
|
+
* flashing during it.
|
|
479
506
|
*/
|
|
480
507
|
open: boolean;
|
|
481
508
|
/**
|
|
@@ -570,7 +597,7 @@ declare type ButtonSize = 'default' | 'sm' | 'lg' | 'icon';
|
|
|
570
597
|
|
|
571
598
|
declare type ButtonVariant = 'default' | 'destructive' | 'outline' | 'secondary' | 'ghost' | 'link';
|
|
572
599
|
|
|
573
|
-
declare const buttonVariants: (props?: {
|
|
600
|
+
export declare const buttonVariants: (props?: {
|
|
574
601
|
variant?: "default" | "destructive" | "link" | "secondary" | "outline" | "ghost";
|
|
575
602
|
size?: "default" | "sm" | "lg" | "icon";
|
|
576
603
|
} & ClassProp) => string;
|
|
@@ -811,6 +838,59 @@ export declare interface CheckboxProps extends Omit<ComponentProps<typeof Checkb
|
|
|
811
838
|
info?: string;
|
|
812
839
|
}
|
|
813
840
|
|
|
841
|
+
export declare const ChoiceChips: React_2.ForwardRefExoticComponent<ChoiceChipsProps & React_2.RefAttributes<HTMLDivElement>>;
|
|
842
|
+
|
|
843
|
+
export declare interface ChoiceChipsOption {
|
|
844
|
+
/**
|
|
845
|
+
* Value reported in `onValueChange`. Must be unique among the options.
|
|
846
|
+
*/
|
|
847
|
+
value: string;
|
|
848
|
+
/**
|
|
849
|
+
* Visible text of the chip, also its accessible name.
|
|
850
|
+
*/
|
|
851
|
+
label: string;
|
|
852
|
+
}
|
|
853
|
+
|
|
854
|
+
export declare interface ChoiceChipsProps {
|
|
855
|
+
/**
|
|
856
|
+
* Chips to render, in order.
|
|
857
|
+
*/
|
|
858
|
+
options: ChoiceChipsOption[];
|
|
859
|
+
/**
|
|
860
|
+
* Selected values. They are reported back in the order of `options`.
|
|
861
|
+
*/
|
|
862
|
+
value: string[];
|
|
863
|
+
/**
|
|
864
|
+
* Fired with the new selection when a chip is toggled.
|
|
865
|
+
*/
|
|
866
|
+
onValueChange: (value: string[]) => void;
|
|
867
|
+
/**
|
|
868
|
+
* Id of the element holding the question, used as the group's
|
|
869
|
+
* `aria-labelledby`.
|
|
870
|
+
*/
|
|
871
|
+
labelledBy: string;
|
|
872
|
+
/**
|
|
873
|
+
* Largest number of chips that can be selected. Once reached, the
|
|
874
|
+
* unselected chips are disabled until one is released.
|
|
875
|
+
*/
|
|
876
|
+
max?: number;
|
|
877
|
+
/**
|
|
878
|
+
* Writing direction of the chips. When omitted, it is inherited from the
|
|
879
|
+
* nearest ancestor with a `dir` attribute other than `<html>` or `<body>`,
|
|
880
|
+
* then from the current language, and only then from the document root.
|
|
881
|
+
*/
|
|
882
|
+
dir?: 'ltr' | 'rtl';
|
|
883
|
+
/**
|
|
884
|
+
* Disables every chip and blocks changes.
|
|
885
|
+
* @default false
|
|
886
|
+
*/
|
|
887
|
+
disabled?: boolean;
|
|
888
|
+
/**
|
|
889
|
+
* Additional classes for the outer container.
|
|
890
|
+
*/
|
|
891
|
+
className?: string;
|
|
892
|
+
}
|
|
893
|
+
|
|
814
894
|
export declare function cn(...inputs: ClassValue[]): string;
|
|
815
895
|
|
|
816
896
|
/**
|
|
@@ -976,6 +1056,106 @@ export declare interface ComboboxProps {
|
|
|
976
1056
|
"aria-labelledby"?: string;
|
|
977
1057
|
}
|
|
978
1058
|
|
|
1059
|
+
/**
|
|
1060
|
+
* A searchable list of commands.
|
|
1061
|
+
*
|
|
1062
|
+
* Follows Pagination's shape, which is the model in this library for a
|
|
1063
|
+
* component that is useful both ways: `Command` takes data, and the parts it is
|
|
1064
|
+
* built from are exported beside it (`CommandRoot`, `CommandInput`, …) for a
|
|
1065
|
+
* call site that needs to lay one out itself. The parts already existed in
|
|
1066
|
+
* vendor/ and were used by SearchSelect and MultiSelect; they were simply never
|
|
1067
|
+
* exported.
|
|
1068
|
+
*
|
|
1069
|
+
* The props are the family's — `options`, `groups`, `searchPlaceholder`,
|
|
1070
|
+
* `emptyState`, `maxHeight`, `className`, `id` — so this reads like Select,
|
|
1071
|
+
* SearchSelect and Combobox. The one deviation is `onSelect`, explained above.
|
|
1072
|
+
*
|
|
1073
|
+
* @example
|
|
1074
|
+
* ```tsx
|
|
1075
|
+
* <Command
|
|
1076
|
+
* searchPlaceholder="Search actions"
|
|
1077
|
+
* options={[
|
|
1078
|
+
* { value: 'refund', label: 'Refund payment', icon: 'ArrowUUpLeft' },
|
|
1079
|
+
* { value: 'export', label: 'Export CSV', shortcut: '⌘E' },
|
|
1080
|
+
* ]}
|
|
1081
|
+
* onSelect={run}
|
|
1082
|
+
* />
|
|
1083
|
+
* ```
|
|
1084
|
+
*/
|
|
1085
|
+
export declare const Command: ForwardRefExoticComponent<CommandProps & RefAttributes<HTMLDivElement>>;
|
|
1086
|
+
|
|
1087
|
+
export declare function CommandDialog({ title, description, children, className, showCloseButton, ...props }: React_2.ComponentProps<typeof Dialog_2> & {
|
|
1088
|
+
title?: string;
|
|
1089
|
+
description?: string;
|
|
1090
|
+
className?: string;
|
|
1091
|
+
showCloseButton?: boolean;
|
|
1092
|
+
}): JSX_2.Element;
|
|
1093
|
+
|
|
1094
|
+
export declare function CommandEmpty({ ...props }: React_2.ComponentProps<typeof Command_2.Empty>): JSX_2.Element;
|
|
1095
|
+
|
|
1096
|
+
export declare function CommandGroup({ className, ...props }: React_2.ComponentProps<typeof Command_2.Group>): JSX_2.Element;
|
|
1097
|
+
|
|
1098
|
+
export declare function CommandInput({ className, ...props }: React_2.ComponentProps<typeof Command_2.Input>): JSX_2.Element;
|
|
1099
|
+
|
|
1100
|
+
export declare function CommandItem({ className, ...props }: React_2.ComponentProps<typeof Command_2.Item>): JSX_2.Element;
|
|
1101
|
+
|
|
1102
|
+
export declare function CommandList({ className, ...props }: React_2.ComponentProps<typeof Command_2.List>): JSX_2.Element;
|
|
1103
|
+
|
|
1104
|
+
/** A single command. `value` is what `onSelect` reports. */
|
|
1105
|
+
export declare interface CommandOption {
|
|
1106
|
+
value: string;
|
|
1107
|
+
label: string;
|
|
1108
|
+
/** Second line under the label, for when the label alone is ambiguous. */
|
|
1109
|
+
description?: string;
|
|
1110
|
+
/** Leading icon. Sized by the component; do not pass a size. */
|
|
1111
|
+
icon?: IconName;
|
|
1112
|
+
/** Trailing hint, e.g. "⌘K". Right-aligned by CommandShortcut. */
|
|
1113
|
+
shortcut?: string;
|
|
1114
|
+
disabled?: boolean;
|
|
1115
|
+
/**
|
|
1116
|
+
* Extra text the search should match on. The label and description are
|
|
1117
|
+
* already searched; this is for synonyms a merchant might type instead.
|
|
1118
|
+
*/
|
|
1119
|
+
keywords?: string[];
|
|
1120
|
+
}
|
|
1121
|
+
|
|
1122
|
+
/** A titled run of commands. An untitled group still separates visually. */
|
|
1123
|
+
export declare interface CommandOptionGroup {
|
|
1124
|
+
label?: string;
|
|
1125
|
+
options: CommandOption[];
|
|
1126
|
+
}
|
|
1127
|
+
|
|
1128
|
+
export declare interface CommandProps {
|
|
1129
|
+
/** Flat list of commands. Ignored when `groups` is passed. */
|
|
1130
|
+
options?: CommandOption[];
|
|
1131
|
+
/** Grouped commands. Takes precedence over `options`. */
|
|
1132
|
+
groups?: CommandOptionGroup[];
|
|
1133
|
+
/**
|
|
1134
|
+
* Fired when a command is chosen, with its `value`.
|
|
1135
|
+
*
|
|
1136
|
+
* Not `onChange`, which every other component in this family uses: those
|
|
1137
|
+
* report a new value that persists, and a command reports an action that
|
|
1138
|
+
* fires and leaves no state behind. cmdk calls it onSelect too.
|
|
1139
|
+
*/
|
|
1140
|
+
onSelect?: (value: string) => void;
|
|
1141
|
+
/** Placeholder for the search box. */
|
|
1142
|
+
searchPlaceholder?: string;
|
|
1143
|
+
/** Hide the search box for a plain, short list. @default true */
|
|
1144
|
+
withSearch?: boolean;
|
|
1145
|
+
/** Shown when nothing matches the search. */
|
|
1146
|
+
emptyState?: ReactNode;
|
|
1147
|
+
/** Caps the scrolling list. Accepts a number of pixels or any CSS length. */
|
|
1148
|
+
maxHeight?: number | string;
|
|
1149
|
+
className?: string;
|
|
1150
|
+
id?: string;
|
|
1151
|
+
}
|
|
1152
|
+
|
|
1153
|
+
export declare function CommandRoot({ className, ...props }: React_2.ComponentProps<typeof Command_2>): JSX_2.Element;
|
|
1154
|
+
|
|
1155
|
+
export declare function CommandSeparator({ className, ...props }: React_2.ComponentProps<typeof Command_2.Separator>): JSX_2.Element;
|
|
1156
|
+
|
|
1157
|
+
export declare function CommandShortcut({ className, ...props }: React_2.ComponentProps<'span'>): JSX_2.Element;
|
|
1158
|
+
|
|
979
1159
|
/**
|
|
980
1160
|
* Confirm/cancel modal for destructive or irreversible actions, built on
|
|
981
1161
|
* `Dialog`. Encapsulates the per-module `ConfirmationDialog` that recipients
|
|
@@ -996,7 +1176,7 @@ export declare interface ComboboxProps {
|
|
|
996
1176
|
* ```
|
|
997
1177
|
*/
|
|
998
1178
|
export declare const ConfirmationDialog: {
|
|
999
|
-
({ open, onClose, onConfirm, title, description, confirmLabel, cancelLabel, variant, isLoading, confirmDisabled, children, }: ConfirmationDialogProps): JSX_2.Element;
|
|
1179
|
+
({ open, onClose, onConfirm, title, description, confirmLabel, cancelLabel, variant, isLoading, confirmDisabled, children, widthContainer, }: ConfirmationDialogProps): JSX_2.Element;
|
|
1000
1180
|
displayName: string;
|
|
1001
1181
|
};
|
|
1002
1182
|
|
|
@@ -1050,6 +1230,11 @@ export declare interface ConfirmationDialogProps {
|
|
|
1050
1230
|
* Extra content rendered in the dialog body, below the description.
|
|
1051
1231
|
*/
|
|
1052
1232
|
children?: ReactNode;
|
|
1233
|
+
/**
|
|
1234
|
+
* Desktop width of the dialog container (px or CSS length) — mobile stays
|
|
1235
|
+
* fullscreen. Default: the Dialog's `max-w-md`.
|
|
1236
|
+
*/
|
|
1237
|
+
widthContainer?: number | string;
|
|
1053
1238
|
}
|
|
1054
1239
|
|
|
1055
1240
|
/**
|
|
@@ -1232,7 +1417,7 @@ export declare interface DataItemProps extends Omit<HTMLAttributes<HTMLDivElemen
|
|
|
1232
1417
|
* />
|
|
1233
1418
|
* ```
|
|
1234
1419
|
*/
|
|
1235
|
-
export declare function DataTable<TData, TValue>({ columns, data, isLoading, empty, checkboxSelection, isRowSelectable, rowSelection: externalRowSelection, onRowSelectionChange, enableSorting, manualSorting, sorting: externalSorting, onSortingChange: externalOnSortingChange, enableColumnFilters, enableColumnResizing, columnResizeMode, enableColumnPinning, onRowClick, onRowMouseEnter, onRowMouseLeave, getRowClassName, getRowCanExpand, renderSubComponent, getRowExpandLabel, expanderPosition, expanderHeader, actions, height, rowHeight, className, persistKey, initialSettings, onUpdate, enableColumnDragDrop, lang, translations, }: Readonly<DataTableProps<TData, TValue>>): JSX_2.Element;
|
|
1420
|
+
export declare function DataTable<TData, TValue>({ columns, data, isLoading, empty, checkboxSelection, isRowSelectable, getRowSelectionDisabledReason, getRowSelectLabel, rowSelection: externalRowSelection, onRowSelectionChange, enableSorting, manualSorting, sorting: externalSorting, onSortingChange: externalOnSortingChange, enableColumnFilters, enableColumnResizing, columnResizeMode, enableColumnPinning, onRowClick, onRowMouseEnter, onRowMouseLeave, getRowClassName, getRowCanExpand, renderSubComponent, getRowExpandLabel, expanderPosition, expanderHeader, actions, height, rowHeight, className, persistKey, initialSettings, onUpdate, enableColumnDragDrop, lang, translations, }: Readonly<DataTableProps<TData, TValue>>): JSX_2.Element;
|
|
1236
1421
|
|
|
1237
1422
|
export declare interface DataTableActionsConfig<TData> {
|
|
1238
1423
|
/** Custom render function for complete control */
|
|
@@ -1476,20 +1661,26 @@ export declare interface DataTableCopyCellProps {
|
|
|
1476
1661
|
}
|
|
1477
1662
|
|
|
1478
1663
|
/**
|
|
1479
|
-
* A table cell for
|
|
1480
|
-
*
|
|
1481
|
-
*
|
|
1664
|
+
* A table cell for a country: a circular flag and the code, or the name.
|
|
1665
|
+
*
|
|
1666
|
+
* The flag was an emoji until DAS-18254, built from regional indicator pairs.
|
|
1667
|
+
* That looked fine on a Mac and failed everywhere else: Windows ships no flag
|
|
1668
|
+
* glyphs, so 24 call sites rendered a bare "US" where a flag was meant to be,
|
|
1669
|
+
* and codes with no glyph at all — XK — were broken on every platform.
|
|
1670
|
+
*
|
|
1671
|
+
* It now serves circular SVGs from dashboard-assets, which unifies three ways
|
|
1672
|
+
* of drawing a flag into one.
|
|
1673
|
+
*
|
|
1674
|
+
* If the image fails — an offline browser, a code the set does not carry — the
|
|
1675
|
+
* cell falls back to the code in a muted chip. A missing flag should not leave
|
|
1676
|
+
* a broken-image icon in a table row.
|
|
1482
1677
|
*
|
|
1483
1678
|
* @example
|
|
1484
1679
|
* ```tsx
|
|
1485
|
-
* // Code with flag
|
|
1486
1680
|
* <DataTableCountryCell code="US" />
|
|
1487
|
-
*
|
|
1488
|
-
* // With country name
|
|
1489
1681
|
* <DataTableCountryCell code="CO" showName getCountryName={countryNameFromCode} />
|
|
1490
|
-
*
|
|
1491
|
-
* // Without flag
|
|
1492
1682
|
* <DataTableCountryCell code="BR" showFlag={false} />
|
|
1683
|
+
* <DataTableCountryCell code="BR" flagBaseUrl="/flags" />
|
|
1493
1684
|
* ```
|
|
1494
1685
|
*/
|
|
1495
1686
|
export declare const DataTableCountryCell: ForwardRefExoticComponent<DataTableCountryCellProps & RefAttributes<HTMLDivElement>>;
|
|
@@ -1497,12 +1688,19 @@ export declare const DataTableCountryCell: ForwardRefExoticComponent<DataTableCo
|
|
|
1497
1688
|
export declare interface DataTableCountryCellProps {
|
|
1498
1689
|
/** ISO 3166-1 alpha-2 country code (e.g., "US", "CO", "BR") */
|
|
1499
1690
|
code: string | null | undefined;
|
|
1500
|
-
/** Whether to show the flag
|
|
1691
|
+
/** Whether to show the flag @default true */
|
|
1501
1692
|
showFlag?: boolean;
|
|
1502
1693
|
/** Whether to show the country name instead of just the code @default false */
|
|
1503
1694
|
showName?: boolean;
|
|
1504
1695
|
/** Custom function to resolve country name from code */
|
|
1505
1696
|
getCountryName?: (code: string) => string;
|
|
1697
|
+
/**
|
|
1698
|
+
* Where the flags are served from, without a trailing slash. The file is
|
|
1699
|
+
* `{baseUrl}/{code}.svg`, lowercased.
|
|
1700
|
+
*
|
|
1701
|
+
* Point it at a self-hosted copy to drop the external request.
|
|
1702
|
+
*/
|
|
1703
|
+
flagBaseUrl?: string;
|
|
1506
1704
|
/** Content to render when code is empty/invalid @default "-" */
|
|
1507
1705
|
emptyState?: ReactNode;
|
|
1508
1706
|
/** Additional CSS classes */
|
|
@@ -1742,6 +1940,18 @@ export declare interface DataTableProps<TData, TValue> {
|
|
|
1742
1940
|
* checkbox and are skipped by "select all".
|
|
1743
1941
|
*/
|
|
1744
1942
|
isRowSelectable?: (rowData: TData) => boolean;
|
|
1943
|
+
/**
|
|
1944
|
+
* Why a row excluded by `isRowSelectable` cannot be selected, shown as a
|
|
1945
|
+
* tooltip over its disabled checkbox. A disabled control with no reason
|
|
1946
|
+
* reads as broken; return `undefined` to show nothing for that row.
|
|
1947
|
+
*/
|
|
1948
|
+
getRowSelectionDisabledReason?: (rowData: TData) => React_2.ReactNode;
|
|
1949
|
+
/**
|
|
1950
|
+
* Accessible name of a row's selection checkbox, from the row's own data
|
|
1951
|
+
* ("Select payment 7f3a…"). Siblings must not share a name; the default
|
|
1952
|
+
* `selectRow` translation gives every row the same one.
|
|
1953
|
+
*/
|
|
1954
|
+
getRowSelectLabel?: (rowData: TData) => string;
|
|
1745
1955
|
/**
|
|
1746
1956
|
* Controlled row selection state (optional)
|
|
1747
1957
|
* If provided, component operates in controlled mode
|
|
@@ -2430,6 +2640,8 @@ export declare interface DetailSectionProps extends Omit<HTMLAttributes<HTMLElem
|
|
|
2430
2640
|
*/
|
|
2431
2641
|
export declare const Dialog: React_2.ForwardRefExoticComponent<DialogProps & React_2.RefAttributes<HTMLDivElement>>;
|
|
2432
2642
|
|
|
2643
|
+
declare function Dialog_2({ ...props }: Readonly<React_2.ComponentProps<typeof DialogPrimitive.Root>>): JSX_2.Element;
|
|
2644
|
+
|
|
2433
2645
|
/**
|
|
2434
2646
|
* Scrollable content area for dialog body.
|
|
2435
2647
|
*
|
|
@@ -2971,6 +3183,68 @@ declare interface ExtendedToasterProps extends Omit<ToasterProps, 'position'> {
|
|
|
2971
3183
|
position?: 'top-right' | 'top-left' | 'bottom-right' | 'bottom-left' | 'top-center' | 'bottom-center';
|
|
2972
3184
|
}
|
|
2973
3185
|
|
|
3186
|
+
export declare const FeedbackPrompt: React_2.ForwardRefExoticComponent<FeedbackPromptProps & React_2.RefAttributes<HTMLElement>>;
|
|
3187
|
+
|
|
3188
|
+
export declare interface FeedbackPromptProps {
|
|
3189
|
+
/**
|
|
3190
|
+
* Whether the prompt is shown. When `false` nothing is rendered.
|
|
3191
|
+
*/
|
|
3192
|
+
open: boolean;
|
|
3193
|
+
/**
|
|
3194
|
+
* The question or heading of the prompt.
|
|
3195
|
+
*/
|
|
3196
|
+
title: React_2.ReactNode;
|
|
3197
|
+
/**
|
|
3198
|
+
* Id of the title element. Pass the same id to the controls that answer it
|
|
3199
|
+
* (e.g. `RatingScale` `labelledBy`).
|
|
3200
|
+
*/
|
|
3201
|
+
titleId: string;
|
|
3202
|
+
/**
|
|
3203
|
+
* Short text shown above the title, e.g. the product or survey name.
|
|
3204
|
+
*/
|
|
3205
|
+
eyebrow?: React_2.ReactNode;
|
|
3206
|
+
/**
|
|
3207
|
+
* The body: the controls that answer the prompt.
|
|
3208
|
+
*/
|
|
3209
|
+
children?: React_2.ReactNode;
|
|
3210
|
+
/**
|
|
3211
|
+
* Actions shown at the bottom, e.g. "Later" and "Don't ask again".
|
|
3212
|
+
*/
|
|
3213
|
+
footer?: React_2.ReactNode;
|
|
3214
|
+
/**
|
|
3215
|
+
* Fired by the close button and by Escape while focus is inside the prompt.
|
|
3216
|
+
*/
|
|
3217
|
+
onDismiss: () => void;
|
|
3218
|
+
/**
|
|
3219
|
+
* Accessible name of the close button.
|
|
3220
|
+
*/
|
|
3221
|
+
dismissLabel: string;
|
|
3222
|
+
/**
|
|
3223
|
+
* Writing direction. The prompt sits at the inline end of the viewport, so
|
|
3224
|
+
* it moves to the left in `rtl`. When omitted, it is inherited.
|
|
3225
|
+
*/
|
|
3226
|
+
dir?: 'ltr' | 'rtl';
|
|
3227
|
+
/**
|
|
3228
|
+
* Where the prompt sits. `corner` is a card at the inline-end bottom of the
|
|
3229
|
+
* viewport; `sheet` spans the bottom edge, for narrow screens. Both stay
|
|
3230
|
+
* non-modal.
|
|
3231
|
+
* @default 'corner'
|
|
3232
|
+
*/
|
|
3233
|
+
variant?: FeedbackPromptVariant;
|
|
3234
|
+
/**
|
|
3235
|
+
* Masks the prompt's content in session replays (`data-dd-privacy="mask"`).
|
|
3236
|
+
* Keep it on whenever the prompt collects answers.
|
|
3237
|
+
* @default true
|
|
3238
|
+
*/
|
|
3239
|
+
maskContent?: boolean;
|
|
3240
|
+
/**
|
|
3241
|
+
* Additional classes for the card.
|
|
3242
|
+
*/
|
|
3243
|
+
className?: string;
|
|
3244
|
+
}
|
|
3245
|
+
|
|
3246
|
+
export declare type FeedbackPromptVariant = 'corner' | 'sheet';
|
|
3247
|
+
|
|
2974
3248
|
/**
|
|
2975
3249
|
* Form field component with label, description, error handling, and icon support.
|
|
2976
3250
|
*
|
|
@@ -3014,7 +3288,7 @@ export declare const Field: ForwardRefExoticComponent<FieldProps & RefAttributes
|
|
|
3014
3288
|
* ever passed `info` or `requiredIndicator` to a Label directly. All 14 call
|
|
3015
3289
|
* sites pass them to a field.
|
|
3016
3290
|
*
|
|
3017
|
-
* Not copied into Field / Select / DatePicker /
|
|
3291
|
+
* Not copied into Field / Select / DatePicker / FileUploader because all four
|
|
3018
3292
|
* rendered the identical block, and four copies of a layout is how they drift.
|
|
3019
3293
|
*/
|
|
3020
3294
|
export declare const FieldLabelRow: {
|
|
@@ -3041,7 +3315,7 @@ export declare interface FieldLabelRowProps {
|
|
|
3041
3315
|
/**
|
|
3042
3316
|
* Props for the Field component
|
|
3043
3317
|
*/
|
|
3044
|
-
export declare interface FieldProps extends Omit<InputHTMLAttributes<HTMLInputElement>, 'className'> {
|
|
3318
|
+
export declare interface FieldProps extends Omit<InputHTMLAttributes<HTMLInputElement>, 'className' | 'prefix'> {
|
|
3045
3319
|
/**
|
|
3046
3320
|
* Label text displayed above the input
|
|
3047
3321
|
*/
|
|
@@ -3084,6 +3358,14 @@ export declare interface FieldProps extends Omit<InputHTMLAttributes<HTMLInputEl
|
|
|
3084
3358
|
* Additional props to pass to the end icon
|
|
3085
3359
|
*/
|
|
3086
3360
|
endIconProps?: Partial<ComponentProps<typeof Icon>>;
|
|
3361
|
+
/**
|
|
3362
|
+
* Text adornment to display at the start (left side) of the input
|
|
3363
|
+
*/
|
|
3364
|
+
prefix?: ReactNode;
|
|
3365
|
+
/**
|
|
3366
|
+
* Text adornment to display at the end (right side) of the input
|
|
3367
|
+
*/
|
|
3368
|
+
suffix?: ReactNode;
|
|
3087
3369
|
/**
|
|
3088
3370
|
* Layout orientation of the label and input
|
|
3089
3371
|
* @default "vertical"
|
|
@@ -3099,12 +3381,21 @@ export declare interface FieldProps extends Omit<InputHTMLAttributes<HTMLInputEl
|
|
|
3099
3381
|
inputProps?: InputHTMLAttributes<HTMLInputElement>;
|
|
3100
3382
|
}
|
|
3101
3383
|
|
|
3384
|
+
/** A file the uploader refused, and the rule it broke. */
|
|
3385
|
+
export declare interface FileRejection {
|
|
3386
|
+
file: File;
|
|
3387
|
+
reason: FileRejectionReason;
|
|
3388
|
+
}
|
|
3389
|
+
|
|
3390
|
+
/** Why a dropped or picked file did not make it into the list. */
|
|
3391
|
+
export declare type FileRejectionReason = 'type' | 'size' | 'limit';
|
|
3392
|
+
|
|
3102
3393
|
/**
|
|
3103
3394
|
* File upload component with drag & drop support and integrated file list.
|
|
3104
3395
|
*
|
|
3105
3396
|
* Includes a dropzone area for selecting/dropping files and an integrated list
|
|
3106
3397
|
* showing upload progress or completion status for each file. The consumer only
|
|
3107
|
-
* needs to render `<
|
|
3398
|
+
* needs to render `<FileUploader />` -- no separate file list component required.
|
|
3108
3399
|
*
|
|
3109
3400
|
* Helper texts ("Supports: PDF, DOCX..." and "10 MB max file size.") are
|
|
3110
3401
|
* auto-generated from the `accept` and `maxSize` props.
|
|
@@ -3113,7 +3404,7 @@ export declare interface FieldProps extends Omit<InputHTMLAttributes<HTMLInputEl
|
|
|
3113
3404
|
* ```tsx
|
|
3114
3405
|
* const [files, setFiles] = useState<UploadFile[]>([]);
|
|
3115
3406
|
*
|
|
3116
|
-
* <
|
|
3407
|
+
* <FileUploader
|
|
3117
3408
|
* label="Knowledge base"
|
|
3118
3409
|
* accept=".pdf,.docx,.txt,.csv"
|
|
3119
3410
|
* maxSize={10 * 1024 * 1024}
|
|
@@ -3127,18 +3418,29 @@ export declare interface FieldProps extends Omit<InputHTMLAttributes<HTMLInputEl
|
|
|
3127
3418
|
* />
|
|
3128
3419
|
* ```
|
|
3129
3420
|
*/
|
|
3130
|
-
export declare const
|
|
3421
|
+
export declare const FileUploader: ForwardRefExoticComponent<FileUploaderProps & RefAttributes<HTMLInputElement>>;
|
|
3131
3422
|
|
|
3132
3423
|
/**
|
|
3133
|
-
* Props for the
|
|
3424
|
+
* Props for the FileUploader component
|
|
3134
3425
|
*/
|
|
3135
|
-
export declare interface
|
|
3426
|
+
export declare interface FileUploaderProps {
|
|
3136
3427
|
/** Array of upload file objects (controlled) */
|
|
3137
3428
|
value?: UploadFile[];
|
|
3138
3429
|
/** Callback when new files are added (via drop or click). Provides the newly added native File objects */
|
|
3139
3430
|
onFilesAdded?: (files: File[]) => void;
|
|
3140
3431
|
/** Callback to remove a file by id */
|
|
3141
3432
|
onRemove?: (fileId: string) => void;
|
|
3433
|
+
/** Callback to retry a failed upload. Renders the retry control on error rows. */
|
|
3434
|
+
onRetry?: (fileId: string) => void;
|
|
3435
|
+
/**
|
|
3436
|
+
* Callback for files the uploader refused, with the rule each one broke.
|
|
3437
|
+
*
|
|
3438
|
+
* Without it the rejection is silent: `accept` and `maxSize` filter the drop
|
|
3439
|
+
* and the user is left looking at an empty list with no idea why. The reason
|
|
3440
|
+
* is a code rather than a message because the copy belongs to the consumer —
|
|
3441
|
+
* it is the side that has the locales.
|
|
3442
|
+
*/
|
|
3443
|
+
onFilesRejected?: (rejections: FileRejection[]) => void;
|
|
3142
3444
|
/** Accepted file extensions (e.g., ".pdf,.docx,.txt,.csv"). Used for validation AND to auto-generate the "Supports: ..." text */
|
|
3143
3445
|
accept?: string;
|
|
3144
3446
|
/** Maximum file size in bytes (e.g., 10485760 for 10MB). Used for validation AND to auto-generate the "X MB max file size." text */
|
|
@@ -3167,6 +3469,12 @@ export declare interface FileUploadProps {
|
|
|
3167
3469
|
image?: string;
|
|
3168
3470
|
}
|
|
3169
3471
|
|
|
3472
|
+
/**
|
|
3473
|
+
* Every language the filter chrome ships copy for, in a runtime-checkable form
|
|
3474
|
+
* (the `FilterLanguage` union is types-only and erased at build time).
|
|
3475
|
+
*/
|
|
3476
|
+
export declare const FILTER_LANGUAGES: FilterLanguage[];
|
|
3477
|
+
|
|
3170
3478
|
export declare const FilterButton: ForwardRefExoticComponent<Omit<FilterButtonProps, "ref"> & RefAttributes<HTMLButtonElement>>;
|
|
3171
3479
|
|
|
3172
3480
|
export declare interface FilterButtonProps extends Omit<ComponentProps<typeof Button_2>, 'children'> {
|
|
@@ -3226,6 +3534,12 @@ export declare interface FilterConfig {
|
|
|
3226
3534
|
* Items for checkbox/radio type filters
|
|
3227
3535
|
*/
|
|
3228
3536
|
items?: FilterSectionItem[];
|
|
3537
|
+
/**
|
|
3538
|
+
* Hierarchical radio filters: groups render as nested, non-selectable
|
|
3539
|
+
* headings with their items underneath, and `items` follow as standalone
|
|
3540
|
+
* rows. See `FilterSection`.
|
|
3541
|
+
*/
|
|
3542
|
+
groups?: FilterSectionGroup[];
|
|
3229
3543
|
/**
|
|
3230
3544
|
* Selected values for checkbox type filters
|
|
3231
3545
|
*/
|
|
@@ -3426,6 +3740,7 @@ export declare interface FilterDateRangeProps extends ComponentProps<typeof Radi
|
|
|
3426
3740
|
mode?: 'range' | 'single';
|
|
3427
3741
|
singleDayLabel?: string;
|
|
3428
3742
|
showAllTime?: boolean;
|
|
3743
|
+
showTime?: boolean;
|
|
3429
3744
|
className?: string;
|
|
3430
3745
|
/**
|
|
3431
3746
|
* Announcement text to display at the top of the filter (e.g., timezone info)
|
|
@@ -3570,12 +3885,20 @@ export declare interface FilterDropdownProps {
|
|
|
3570
3885
|
* Custom translations (overrides lang-based translations)
|
|
3571
3886
|
*/
|
|
3572
3887
|
translations?: FilterTranslations;
|
|
3888
|
+
/**
|
|
3889
|
+
* Which edge of the trigger row the panel hangs from. `auto` (default)
|
|
3890
|
+
* hangs from the start and, when the panel would run past the viewport —
|
|
3891
|
+
* a trigger placed on the right of a header — slides it back just enough
|
|
3892
|
+
* to fit.
|
|
3893
|
+
* @default 'auto'
|
|
3894
|
+
*/
|
|
3895
|
+
align?: 'start' | 'end' | 'auto';
|
|
3573
3896
|
}
|
|
3574
3897
|
|
|
3575
3898
|
/**
|
|
3576
3899
|
* Supported languages for filter translations
|
|
3577
3900
|
*/
|
|
3578
|
-
declare type FilterLanguage = 'en' | 'es' | 'ja' | 'ar' | 'fr' | 'pt' | 'tr' | 'ru' | 'de' | 'zh';
|
|
3901
|
+
export declare type FilterLanguage = 'en' | 'es' | 'ja' | 'ar' | 'fr' | 'pt' | 'tr' | 'ru' | 'de' | 'zh';
|
|
3579
3902
|
|
|
3580
3903
|
/**
|
|
3581
3904
|
* Sidebar menu displaying available filter options
|
|
@@ -3737,6 +4060,13 @@ export declare interface FilterRadioOptionProps {
|
|
|
3737
4060
|
value: string;
|
|
3738
4061
|
description?: string;
|
|
3739
4062
|
className?: string;
|
|
4063
|
+
/**
|
|
4064
|
+
* Muted text at the end of the row (hierarchical layout). Switches the row
|
|
4065
|
+
* to a single full-width line: label first, qualifier last.
|
|
4066
|
+
*/
|
|
4067
|
+
qualifier?: string;
|
|
4068
|
+
/** Nesting level in a hierarchical layout; each level indents the row. */
|
|
4069
|
+
depth?: number;
|
|
3740
4070
|
}
|
|
3741
4071
|
|
|
3742
4072
|
export declare const FilterSection: ForwardRefExoticComponent<FilterSectionProps & RefAttributes<HTMLDivElement>>;
|
|
@@ -3747,7 +4077,21 @@ declare interface FilterSectionCheckboxProps extends FilterSectionPropsBase {
|
|
|
3747
4077
|
onChange: (selectedValues: string[]) => void;
|
|
3748
4078
|
}
|
|
3749
4079
|
|
|
3750
|
-
|
|
4080
|
+
/**
|
|
4081
|
+
* A non-selectable heading in a hierarchical section. Groups nest through
|
|
4082
|
+
* `groups`; their own `items` render under the heading, indented one level
|
|
4083
|
+
* deeper. Only the items can be picked.
|
|
4084
|
+
*/
|
|
4085
|
+
export declare interface FilterSectionGroup {
|
|
4086
|
+
id: string;
|
|
4087
|
+
label: string;
|
|
4088
|
+
/** Muted text at the end of the heading row, e.g. "13 accounts". */
|
|
4089
|
+
qualifier?: string;
|
|
4090
|
+
items?: FilterSectionItem[];
|
|
4091
|
+
groups?: FilterSectionGroup[];
|
|
4092
|
+
}
|
|
4093
|
+
|
|
4094
|
+
export declare interface FilterSectionItem {
|
|
3751
4095
|
value: string;
|
|
3752
4096
|
label: string;
|
|
3753
4097
|
description?: string;
|
|
@@ -3760,6 +4104,13 @@ export declare type FilterSectionProps = FilterSectionCheckboxProps | FilterSect
|
|
|
3760
4104
|
declare interface FilterSectionPropsBase {
|
|
3761
4105
|
title: string;
|
|
3762
4106
|
items: FilterSectionItem[];
|
|
4107
|
+
/**
|
|
4108
|
+
* Hierarchical layout: groups render as headings nested by depth, with
|
|
4109
|
+
* their items underneath; `items` then follow as standalone rows, without a
|
|
4110
|
+
* heading. Single-column, with each row's `description` at the end. Radio
|
|
4111
|
+
* only.
|
|
4112
|
+
*/
|
|
4113
|
+
groups?: FilterSectionGroup[];
|
|
3763
4114
|
className?: string;
|
|
3764
4115
|
searchable?: boolean;
|
|
3765
4116
|
searchPlaceholder?: string;
|
|
@@ -3868,6 +4219,24 @@ export declare function getDataTableTranslations(lang?: DataTableLanguage): Requ
|
|
|
3868
4219
|
*/
|
|
3869
4220
|
export declare function getDefaultLanguage(): SupportedLanguage;
|
|
3870
4221
|
|
|
4222
|
+
/**
|
|
4223
|
+
* Maps an app language tag onto a supported filter language.
|
|
4224
|
+
*
|
|
4225
|
+
* Consumers hold i18n tags like `es-419` or `pt-BR`; the filter chrome ships
|
|
4226
|
+
* copy per base language. Regional variants collapse to their base tag and
|
|
4227
|
+
* anything unsupported falls back to English — so every module stops
|
|
4228
|
+
* re-declaring its own copy of this mapping.
|
|
4229
|
+
*
|
|
4230
|
+
* @example getFilterLanguage('es-419') // 'es'
|
|
4231
|
+
*/
|
|
4232
|
+
export declare function getFilterLanguage(locale: string): FilterLanguage;
|
|
4233
|
+
|
|
4234
|
+
/**
|
|
4235
|
+
* Get translations for a specific language
|
|
4236
|
+
* Falls back to localStorage language, then to English if not found
|
|
4237
|
+
*/
|
|
4238
|
+
export declare function getFilterTranslations(lang?: FilterLanguage): Required<FilterTranslations>;
|
|
4239
|
+
|
|
3871
4240
|
/**
|
|
3872
4241
|
* Prominent banner component for highlighting important information or calls-to-action.
|
|
3873
4242
|
* Features an icon in a circular container, title, description, and optional action button.
|
|
@@ -3958,7 +4327,7 @@ export declare const Icon: ForwardRefExoticComponent<IconProps & RefAttributes<H
|
|
|
3958
4327
|
* To add an icon, just add its PascalCase name here (it must exist in the
|
|
3959
4328
|
* Phosphor set: https://phosphoricons.com).
|
|
3960
4329
|
*/
|
|
3961
|
-
export declare const ICON_NAMES: readonly ["Activity", "AidaLogo", "Archive", "ArrowBendUpLeft", "ArrowBendUpRight", "ArrowCircleLeft", "ArrowCircleRight", "ArrowCircleUp", "ArrowCircleUpLeft", "ArrowClockwise", "ArrowCounterClockwise", "ArrowDown", "ArrowElbowDownRight", "ArrowLeft", "ArrowRight", "ArrowSquareIn", "ArrowSquareOut", "ArrowUp", "ArrowUpRight", "ArrowsClockwise", "ArrowsCounterClockwise", "ArrowsDownUp", "ArrowsInSimple", "ArrowsLeftRight", "ArrowsOutSimple", "Bank", "BellRinging", "BellSimple", "BellSimpleSlash", "Binoculars", "BoundingBox", "BracketsAngle", "BracketsCurly", "BracketsSquare", "BugBeetle", "Buildings", "Calendar", "CalendarDots", "CalendarBlank", "CalendarCheck", "CalendarPlus", "Camera", "Cards", "CaretCircleRight", "CaretDoubleLeft", "CaretDoubleRight", "CaretDown", "CaretLeft", "CaretRight", "CaretUp", "CaretUpDown", "Certificate", "ChartBar", "ChartLine", "ChartLineUp", "ChartPie", "Check", "CheckCircle", "CheckSquare", "CheckSquareOffset", "Circle", "CircleNotch", "Clock", "ClockClockwise", "ClockCountdown", "ClockCounterClockwise", "CloudSlash", "Code", "Columns", "Concierge", "Copy", "CopySimple", "CreditCard", "GoogleLogo", "AppleLogo", "PaypalLogo", "CurrencyCircleDollar", "CurrencyDollar", "Desktop", "Detective", "DeviceMobileCamera", "DeviceMobileSpeaker", "DotsNine", "DotsSixVertical", "DotsThree", "DotsThreeCircleVertical", "DotsThreeOutline", "DotsThreeVertical", "Download", "DownloadSimple", "Envelope", "Equals", "Eraser", "Export", "Eye", "EyeClosed", "EyeSlash", "File", "FileArchive", "FileArrowUp", "FileCsv", "FileDoc", "FileJpg", "FilePdf", "FilePlus", "FilePng", "FilePpt", "FileSearch", "FileMagnifyingGlass", "FileTxt", "FileXls", "FileZip", "Flag", "FlagBanner", "FunnelSimple", "Gear", "GearFine", "GearSix", "GitBranch", "GitFork", "GlobeHemisphereWest", "Hash", "Headset", "IdentificationCard", "Image", "ImageSquare", "Info", "Intersect", "Key", "Layout", "Lifebuoy", "Lightbulb", "Lightning", "LinkBreak", "LinkSimple", "LinkSimpleHorizontal", "List", "ListBullets", "ListChecks", "ListNumbers", "ListPlus", "Lock", "LockKey", "MagicWand", "MagnifyingGlass", "MapPin", "Microphone", "Minus", "MinusCircle", "Money", "Monitor", "Moon", "Network", "NetworkSlash", "NotePencil", "Notepad", "Notification", "NumberCircleOne", "Package", "Palette", "Password", "Pause", "PauseCircle", "Pencil", "PencilSimple", "PencilSimpleLine", "Percent", "Phone", "PhoneCall", "PhoneOutgoing", "PhonePlus", "PhoneSlash", "PhoneX", "Play", "PlayCircle", "Plug", "Plugs", "Plus", "PlusCircle", "Prohibit", "PushPin", "PushPinSimple", "PushPinSimpleSlash", "Question", "Queue", "RadioButton", "Repeat", "Rows", "SelectionInverse", "ShareNetwork", "ShieldCheck", "ShieldSlash", "ShieldWarning", "ShoppingCart", "ShoppingCartSimple", "Sidebar", "SignOut", "SortAscending", "SortDescending", "Sparkle", "Square", "SquareHalf", "SquareHalfBottom", "SquaresFour", "Stack", "Star", "Storefront", "Stop", "Sun", "Swap", "Swatches", "Table", "Tag", "TerminalWindow", "TestTube", "TextColumns", "TextT", "Textbox", "ThumbsDown", "ThumbsUp", "Timer", "ToggleLeft", "ToggleRight", "Translate", "Trash", "TreeStructure", "TrendDown", "TrendUp", "Upload", "UploadSimple", "User", "UserCircle", "UserPlus", "UserSwitch", "Vault", "Wallet", "Warning", "WarningCircle", "X", "XCircle"];
|
|
4330
|
+
export declare const ICON_NAMES: readonly ["Activity", "AidaLogo", "Archive", "ArrowBendUpLeft", "ArrowBendUpRight", "ArrowCircleLeft", "ArrowCircleRight", "ArrowCircleUp", "ArrowCircleUpLeft", "ArrowClockwise", "ArrowCounterClockwise", "ArrowDown", "ArrowElbowDownRight", "ArrowLeft", "ArrowRight", "ArrowSquareIn", "ArrowSquareOut", "ArrowUp", "ArrowUpRight", "ArrowUUpLeft", "ArrowsClockwise", "ArrowsCounterClockwise", "ArrowsDownUp", "ArrowsInSimple", "ArrowsLeftRight", "ArrowsOutSimple", "Bank", "BellRinging", "BellSimple", "BellSimpleSlash", "Binoculars", "BoundingBox", "BracketsAngle", "BracketsCurly", "BracketsSquare", "BugBeetle", "Buildings", "Calendar", "CalendarDots", "CalendarBlank", "CalendarCheck", "CalendarPlus", "Camera", "Cards", "CaretCircleRight", "CaretDoubleLeft", "CaretDoubleRight", "CaretDown", "CaretLeft", "CaretRight", "CaretUp", "CaretUpDown", "Certificate", "ChartBar", "ChartLine", "ChartLineUp", "ChartPie", "ChartPieSlice", "Check", "CheckCircle", "CheckSquare", "CheckSquareOffset", "Circle", "CircleNotch", "Clock", "ClockClockwise", "ClockCountdown", "ClockCounterClockwise", "CloudSlash", "Code", "Columns", "Concierge", "Copy", "CopySimple", "CreditCard", "FileText", "GoogleLogo", "AppleLogo", "PaypalLogo", "CurrencyCircleDollar", "CurrencyDollar", "Desktop", "Detective", "DeviceMobileCamera", "DeviceMobileSpeaker", "DotsNine", "DotsSixVertical", "DotsThree", "DotsThreeCircleVertical", "DotsThreeOutline", "DotsThreeVertical", "Download", "DownloadSimple", "Envelope", "Equals", "Eraser", "Export", "Eye", "EyeClosed", "EyeSlash", "FadersHorizontal", "File", "FileArchive", "FileArrowUp", "FileCsv", "FileDoc", "FileImage", "FileJpg", "FilePdf", "FilePlus", "FilePng", "FileSvg", "FilePpt", "FileSearch", "FileMagnifyingGlass", "FileTxt", "FileXls", "FileZip", "Flag", "FlagBanner", "FunnelSimple", "Gear", "GearFine", "GearSix", "GitBranch", "GitFork", "GlobeHemisphereWest", "Hash", "Headset", "Heartbeat", "IdentificationCard", "Image", "ImageSquare", "Info", "Intersect", "Key", "Layout", "Lifebuoy", "Lightbulb", "Lightning", "LinkBreak", "LinkSimple", "LinkSimpleHorizontal", "List", "ListBullets", "ListChecks", "ListNumbers", "ListPlus", "Lock", "LockKey", "MagicWand", "MagnifyingGlass", "MapPin", "Microphone", "Minus", "MinusCircle", "Money", "Monitor", "Moon", "Network", "NetworkSlash", "Note", "NotePencil", "Notepad", "Notification", "NumberCircleOne", "Package", "Palette", "Password", "Pause", "PauseCircle", "Pencil", "PencilSimple", "PencilSimpleLine", "Percent", "Phone", "PhoneCall", "PhoneOutgoing", "PhonePlus", "PhoneSlash", "PhoneX", "Play", "PlayCircle", "Plug", "Plugs", "PlugsConnected", "Plus", "PlusCircle", "Prohibit", "PushPin", "PushPinSimple", "PushPinSimpleSlash", "Question", "Queue", "RadioButton", "Receipt", "Repeat", "Rows", "SelectionInverse", "ShareNetwork", "ShieldCheck", "ShieldSlash", "ShieldWarning", "ShoppingCart", "ShoppingCartSimple", "Sidebar", "SignOut", "SortAscending", "SortDescending", "Sparkle", "Square", "SquareHalf", "SquareHalfBottom", "SquaresFour", "Stack", "Star", "Storefront", "Stop", "Sun", "Swap", "Swatches", "Table", "Tag", "TerminalWindow", "TestTube", "TextColumns", "TextT", "Textbox", "ThumbsDown", "ThumbsUp", "Timer", "ToggleLeft", "ToggleRight", "Translate", "Trash", "TreeStructure", "TrendDown", "TrendUp", "Upload", "UploadSimple", "User", "UserCircle", "UserPlus", "UserSwitch", "Users", "Vault", "Wallet", "Warning", "WarningCircle", "X", "XCircle"];
|
|
3962
4331
|
|
|
3963
4332
|
/** A known icon name (autocompleted) — but any string is accepted so that
|
|
3964
4333
|
* CMS / API-driven icon names continue to work. */
|
|
@@ -3970,8 +4339,16 @@ export declare interface IconProps extends Omit<HTMLAttributes<HTMLElement>, 'co
|
|
|
3970
4339
|
* or any runtime string for CMS/API-driven icons.
|
|
3971
4340
|
*/
|
|
3972
4341
|
name?: IconName;
|
|
3973
|
-
/**
|
|
3974
|
-
|
|
4342
|
+
/**
|
|
4343
|
+
* Icon weight/style. @default "light"
|
|
4344
|
+
*
|
|
4345
|
+
* Narrowed to the two weights the webfont actually loads. It used to be
|
|
4346
|
+
* `IconWeight | string`, which collapsed the union back to `string` — so
|
|
4347
|
+
* `weight="bold"` type-checked, silently fell back to light through
|
|
4348
|
+
* WEIGHT_CLASS, and made fonts.ts's claim that the type refuses it untrue.
|
|
4349
|
+
* The runtime fallback stays for values that arrive as data.
|
|
4350
|
+
*/
|
|
4351
|
+
weight?: IconWeight;
|
|
3975
4352
|
/** Size token (xs–xl) or an explicit pixel value. @default "md" */
|
|
3976
4353
|
size?: 'xs' | 'sm' | 'md' | 'lg' | 'xl' | number | string;
|
|
3977
4354
|
/** CSS color. Defaults to `currentColor` (inherits text color). */
|
|
@@ -4022,6 +4399,64 @@ export declare function InputOTPSlot({ index, className, ...props }: React_2.Com
|
|
|
4022
4399
|
index: number;
|
|
4023
4400
|
}): JSX_2.Element;
|
|
4024
4401
|
|
|
4402
|
+
/**
|
|
4403
|
+
* A single keyboard key, as a semantic `<kbd>`.
|
|
4404
|
+
*
|
|
4405
|
+
* Ported from the prototype-kit in DAS-18254. Pass a token from the table above
|
|
4406
|
+
* and it resolves per platform; pass anything else and it renders as given.
|
|
4407
|
+
*
|
|
4408
|
+
* @example
|
|
4409
|
+
* ```tsx
|
|
4410
|
+
* <Kbd>Mod</Kbd> // ⌘ on a Mac, Ctrl elsewhere
|
|
4411
|
+
* <Kbd>K</Kbd>
|
|
4412
|
+
* ```
|
|
4413
|
+
*/
|
|
4414
|
+
export declare const Kbd: ForwardRefExoticComponent<KbdProps & RefAttributes<HTMLElement>>;
|
|
4415
|
+
|
|
4416
|
+
export declare interface KbdProps extends HTMLAttributes<HTMLElement> {
|
|
4417
|
+
/**
|
|
4418
|
+
* @default "sm" — 20px, for a hint sitting inline beside a label.
|
|
4419
|
+
* `md` is 24px, for the rows of a shortcuts dialog.
|
|
4420
|
+
*/
|
|
4421
|
+
size?: 'sm' | 'md';
|
|
4422
|
+
/**
|
|
4423
|
+
* @default "default" — a light chip for a light surface.
|
|
4424
|
+
* `inverse` is translucent, for a dark one such as a tooltip.
|
|
4425
|
+
*/
|
|
4426
|
+
tone?: 'default' | 'inverse';
|
|
4427
|
+
}
|
|
4428
|
+
|
|
4429
|
+
/**
|
|
4430
|
+
* A chord, or a sequence of them.
|
|
4431
|
+
*
|
|
4432
|
+
* Every key goes through `Kbd`, so the platform tokens work the same way.
|
|
4433
|
+
*
|
|
4434
|
+
* @example
|
|
4435
|
+
* ```tsx
|
|
4436
|
+
* <KbdSequence keys={['Mod', 'K']} /> // ⌘ K
|
|
4437
|
+
* <KbdSequence keys={[['C'], ['L']]} /> // C then L
|
|
4438
|
+
* ```
|
|
4439
|
+
*/
|
|
4440
|
+
export declare const KbdSequence: {
|
|
4441
|
+
({ keys, size, tone, separator, className, }: KbdSequenceProps): JSX_2.Element;
|
|
4442
|
+
displayName: string;
|
|
4443
|
+
};
|
|
4444
|
+
|
|
4445
|
+
export declare interface KbdSequenceProps {
|
|
4446
|
+
/**
|
|
4447
|
+
* One chord as `string[]`, or several as `string[][]`.
|
|
4448
|
+
*
|
|
4449
|
+
* A chord is keys pressed together (`['Mod', 'K']`); a sequence is chords
|
|
4450
|
+
* pressed one after the other (`[['C'], ['L']]` — press C, then L).
|
|
4451
|
+
*/
|
|
4452
|
+
keys: string[] | string[][];
|
|
4453
|
+
size?: 'sm' | 'md';
|
|
4454
|
+
tone?: 'default' | 'inverse';
|
|
4455
|
+
/** Word between chords. @default "then" */
|
|
4456
|
+
separator?: ReactNode;
|
|
4457
|
+
className?: string;
|
|
4458
|
+
}
|
|
4459
|
+
|
|
4025
4460
|
/**
|
|
4026
4461
|
* A label. Nothing else.
|
|
4027
4462
|
*
|
|
@@ -4029,7 +4464,7 @@ export declare function InputOTPSlot({ index, className, ...props }: React_2.Com
|
|
|
4029
4464
|
* render a `justify-between` row so the marker could sit at the right edge —
|
|
4030
4465
|
* three of those four props described the FIELD, not the label, and the row
|
|
4031
4466
|
* came along with them. Every one of those concerns now lives in
|
|
4032
|
-
* `FieldLabelRow`, which is what Field, Select, DatePicker and
|
|
4467
|
+
* `FieldLabelRow`, which is what Field, Select, DatePicker and FileUploader
|
|
4033
4468
|
* render.
|
|
4034
4469
|
*
|
|
4035
4470
|
* No consumer notices: of the 30 <Label> usages across the product, not one
|
|
@@ -4432,16 +4867,32 @@ export declare interface MultiValuesFieldProps {
|
|
|
4432
4867
|
* Validation function that returns true or an error message
|
|
4433
4868
|
*/
|
|
4434
4869
|
validate?: (value: string) => boolean | string;
|
|
4870
|
+
/**
|
|
4871
|
+
* Called with every value that was NOT added and why — a typed value that
|
|
4872
|
+
* failed, or the entries of a pasted list that were dropped (over the
|
|
4873
|
+
* limit, duplicate, invalid). Nothing the user enters is discarded silently
|
|
4874
|
+
* when this is given.
|
|
4875
|
+
*/
|
|
4876
|
+
onRejected?: (rejected: RejectedValue[]) => void;
|
|
4877
|
+
/**
|
|
4878
|
+
* Localised messages for the built-in rejections; the English defaults are
|
|
4879
|
+
* used when absent.
|
|
4880
|
+
*/
|
|
4881
|
+
messages?: {
|
|
4882
|
+
maxItems?: string;
|
|
4883
|
+
duplicate?: string;
|
|
4884
|
+
invalid?: string;
|
|
4885
|
+
};
|
|
4435
4886
|
/**
|
|
4436
4887
|
* Visual variant for the value badges
|
|
4437
4888
|
* @default "outline"
|
|
4438
4889
|
*/
|
|
4439
|
-
badgeVariant?:
|
|
4890
|
+
badgeVariant?: 'default' | 'secondary' | 'destructive' | 'outline';
|
|
4440
4891
|
/**
|
|
4441
4892
|
* Layout orientation
|
|
4442
4893
|
* @default "vertical"
|
|
4443
4894
|
*/
|
|
4444
|
-
orientation?:
|
|
4895
|
+
orientation?: 'vertical' | 'horizontal';
|
|
4445
4896
|
/**
|
|
4446
4897
|
* Additional CSS classes
|
|
4447
4898
|
*/
|
|
@@ -4660,7 +5111,7 @@ export declare const OTPField: React_2.ForwardRefExoticComponent<Omit<OTPFieldPr
|
|
|
4660
5111
|
/**
|
|
4661
5112
|
* Props for the OTPField component
|
|
4662
5113
|
*/
|
|
4663
|
-
export declare interface OTPFieldProps extends Omit<ComponentProps<typeof InputOTP>,
|
|
5114
|
+
export declare interface OTPFieldProps extends Omit<ComponentProps<typeof InputOTP>, 'maxLength' | 'render'> {
|
|
4664
5115
|
/**
|
|
4665
5116
|
* Number of OTP input slots
|
|
4666
5117
|
* @default 6
|
|
@@ -4686,6 +5137,22 @@ export declare interface OTPFieldProps extends Omit<ComponentProps<typeof InputO
|
|
|
4686
5137
|
|
|
4687
5138
|
export declare const OVERLAY_EVENT = "yuno-overlay";
|
|
4688
5139
|
|
|
5140
|
+
/**
|
|
5141
|
+
* A page heading, at text-3xl.
|
|
5142
|
+
*
|
|
5143
|
+
* @deprecated Use `<Title size="large" as="h1">` (DAS-18254). Title is the
|
|
5144
|
+
* heading system this should have been part of: four sizes on the Tailwind
|
|
5145
|
+
* scale, icon slots, truncation.
|
|
5146
|
+
*
|
|
5147
|
+
* Deliberately NOT re-implemented as a wrapper over Title, even though it would
|
|
5148
|
+
* be a three-line change. Title puts its text inside a span so it can truncate,
|
|
5149
|
+
* so delegating would move the text node one level down and change what
|
|
5150
|
+
* `getByText(...)` returns at all 20 call sites — four tests in this package
|
|
5151
|
+
* caught it immediately. It would also drop page titles from text-3xl (30px) to
|
|
5152
|
+
* Title's `large` (24px). Both are fine changes to make; neither is something a
|
|
5153
|
+
* deprecation should do quietly. They belong to the migration, where each page
|
|
5154
|
+
* can be looked at.
|
|
5155
|
+
*/
|
|
4689
5156
|
export declare const PageTitle: ForwardRefExoticComponent<PageTitleProps & RefAttributes<HTMLHeadingElement>>;
|
|
4690
5157
|
|
|
4691
5158
|
export declare interface PageTitleProps extends HTMLAttributes<HTMLHeadingElement> {
|
|
@@ -4860,7 +5327,7 @@ export declare const PasswordField: ForwardRefExoticComponent<PasswordFieldProps
|
|
|
4860
5327
|
/**
|
|
4861
5328
|
* Props for the PasswordField component
|
|
4862
5329
|
*/
|
|
4863
|
-
export declare interface PasswordFieldProps extends Omit<InputHTMLAttributes<HTMLInputElement>, "type">, Omit<FieldProps, "type" | "endIcon" | "endIconProps"> {
|
|
5330
|
+
export declare interface PasswordFieldProps extends Omit<InputHTMLAttributes<HTMLInputElement>, "type" | "prefix">, Omit<FieldProps, "type" | "endIcon" | "endIconProps"> {
|
|
4864
5331
|
/**
|
|
4865
5332
|
* Whether password is visible by default
|
|
4866
5333
|
* @default false
|
|
@@ -5023,7 +5490,9 @@ export declare const RadioGroup: ForwardRefExoticComponent<Omit<RadioGroupProps,
|
|
|
5023
5490
|
|
|
5024
5491
|
export declare function RadioGroupBase({ className, ...props }: React_2.ComponentProps<typeof RadioGroupPrimitive.Root>): JSX_2.Element;
|
|
5025
5492
|
|
|
5026
|
-
export declare function RadioGroupItem({ className, ...props }: React_2.ComponentProps<typeof RadioGroupPrimitive.Item>
|
|
5493
|
+
export declare function RadioGroupItem({ className, indicatorClassName, ...props }: React_2.ComponentProps<typeof RadioGroupPrimitive.Item> & {
|
|
5494
|
+
indicatorClassName?: string;
|
|
5495
|
+
}): JSX_2.Element;
|
|
5027
5496
|
|
|
5028
5497
|
export declare const RadioGroupOption: ({ option, radioId, isInlineLayout, }: RadioGroupOptionProps) => JSX_2.Element;
|
|
5029
5498
|
|
|
@@ -5080,12 +5549,85 @@ export declare interface RadioOption {
|
|
|
5080
5549
|
* Optional description text
|
|
5081
5550
|
*/
|
|
5082
5551
|
description?: string;
|
|
5552
|
+
/**
|
|
5553
|
+
* Extra content rendered under the label, e.g. a follow-up field that only
|
|
5554
|
+
* makes sense once this option is chosen. Stacked layout only.
|
|
5555
|
+
*/
|
|
5556
|
+
content?: ReactNode;
|
|
5083
5557
|
/**
|
|
5084
5558
|
* Whether this option is disabled
|
|
5085
5559
|
*/
|
|
5086
5560
|
disabled?: boolean;
|
|
5087
5561
|
}
|
|
5088
5562
|
|
|
5563
|
+
export declare const RatingScale: React_2.ForwardRefExoticComponent<RatingScaleProps & React_2.RefAttributes<HTMLDivElement>>;
|
|
5564
|
+
|
|
5565
|
+
export declare interface RatingScaleProps {
|
|
5566
|
+
/**
|
|
5567
|
+
* Lowest selectable value, rendered as the first item (e.g. `0` for NPS, `1`
|
|
5568
|
+
* for CSAT or CES).
|
|
5569
|
+
*/
|
|
5570
|
+
min: number;
|
|
5571
|
+
/**
|
|
5572
|
+
* Highest selectable value, rendered as the last item (e.g. `10`, `5` or `7`).
|
|
5573
|
+
*/
|
|
5574
|
+
max: number;
|
|
5575
|
+
/**
|
|
5576
|
+
* Selected value. `null` means nothing is selected yet; no item is
|
|
5577
|
+
* preselected.
|
|
5578
|
+
*/
|
|
5579
|
+
value: number | null;
|
|
5580
|
+
/**
|
|
5581
|
+
* Fired with the chosen number when an item is clicked or selected with the
|
|
5582
|
+
* keyboard. Clicking the selected item again does not deselect it.
|
|
5583
|
+
*/
|
|
5584
|
+
onValueChange: (value: number) => void;
|
|
5585
|
+
/**
|
|
5586
|
+
* Text shown under the first item describing the low end of the scale. It
|
|
5587
|
+
* is also announced as part of the group description.
|
|
5588
|
+
*/
|
|
5589
|
+
lowLabel: string;
|
|
5590
|
+
/**
|
|
5591
|
+
* Text shown under the last item describing the high end of the scale. It
|
|
5592
|
+
* is also announced as part of the group description.
|
|
5593
|
+
*/
|
|
5594
|
+
highLabel: string;
|
|
5595
|
+
/**
|
|
5596
|
+
* Returns the accessible name of each item, e.g.
|
|
5597
|
+
* `(n) => t('rating.item', { n })`. Each name must be unique.
|
|
5598
|
+
*/
|
|
5599
|
+
getItemLabel: (value: number) => string;
|
|
5600
|
+
/**
|
|
5601
|
+
* Id of the element holding the question, used as the group's
|
|
5602
|
+
* `aria-labelledby`.
|
|
5603
|
+
*/
|
|
5604
|
+
labelledBy: string;
|
|
5605
|
+
/**
|
|
5606
|
+
* Writing direction. In `rtl` the scale starts on the right and the
|
|
5607
|
+
* horizontal arrow keys are mirrored. When omitted, it is inherited from the
|
|
5608
|
+
* nearest ancestor with a `dir` attribute other than `<html>` or `<body>`,
|
|
5609
|
+
* then from the current language, and only then from the document root.
|
|
5610
|
+
*/
|
|
5611
|
+
dir?: 'ltr' | 'rtl';
|
|
5612
|
+
/**
|
|
5613
|
+
* Disables every item and blocks changes.
|
|
5614
|
+
* @default false
|
|
5615
|
+
*/
|
|
5616
|
+
disabled?: boolean;
|
|
5617
|
+
/**
|
|
5618
|
+
* Additional classes for the outer container.
|
|
5619
|
+
*/
|
|
5620
|
+
className?: string;
|
|
5621
|
+
}
|
|
5622
|
+
|
|
5623
|
+
export declare interface RejectedValue {
|
|
5624
|
+
value: string;
|
|
5625
|
+
reason: RejectionReason;
|
|
5626
|
+
}
|
|
5627
|
+
|
|
5628
|
+
/** Why a value the user entered or pasted was not added. */
|
|
5629
|
+
export declare type RejectionReason = 'max' | 'duplicate' | 'invalid';
|
|
5630
|
+
|
|
5089
5631
|
/**
|
|
5090
5632
|
* Clean a value for a search, lookup or filter. Ordinary spaces inside it
|
|
5091
5633
|
* survive, so multi-word search keeps working.
|
|
@@ -5191,9 +5733,17 @@ export declare const SearchSelect: React_2.ForwardRefExoticComponent<SearchSelec
|
|
|
5191
5733
|
|
|
5192
5734
|
export declare interface SearchSelectProps {
|
|
5193
5735
|
label?: string;
|
|
5736
|
+
/** Info content shown in a tooltip beside the label. */
|
|
5737
|
+
info?: React_2.ReactNode;
|
|
5738
|
+
/**
|
|
5739
|
+
* Whether to annotate the field's required/optional state.
|
|
5740
|
+
* - `true` shows "(required)" or "(optional)", chosen by `required`
|
|
5741
|
+
* - a string shows that text instead
|
|
5742
|
+
*/
|
|
5743
|
+
requiredIndicator?: boolean | string;
|
|
5744
|
+
required?: boolean;
|
|
5194
5745
|
description?: string;
|
|
5195
5746
|
error?: string;
|
|
5196
|
-
optional?: boolean;
|
|
5197
5747
|
placeholder?: string;
|
|
5198
5748
|
value?: string;
|
|
5199
5749
|
defaultValue?: string;
|
|
@@ -5352,6 +5902,12 @@ export declare interface SelectOption {
|
|
|
5352
5902
|
* Omit to render no badge.
|
|
5353
5903
|
*/
|
|
5354
5904
|
badge?: string;
|
|
5905
|
+
/**
|
|
5906
|
+
* Optional muted hint shown right-aligned in the dropdown row (e.g. a date
|
|
5907
|
+
* range or "Created by you"). Not mirrored into the trigger's value.
|
|
5908
|
+
* Use instead of `badge` for plain-text hints.
|
|
5909
|
+
*/
|
|
5910
|
+
meta?: string;
|
|
5355
5911
|
}
|
|
5356
5912
|
|
|
5357
5913
|
/**
|
|
@@ -5399,12 +5955,6 @@ export declare interface SelectProps {
|
|
|
5399
5955
|
* @default false
|
|
5400
5956
|
*/
|
|
5401
5957
|
required?: boolean;
|
|
5402
|
-
/**
|
|
5403
|
-
* Whether to show "(Optional)" next to the label
|
|
5404
|
-
* @default false
|
|
5405
|
-
* @deprecated Use requiredIndicator instead
|
|
5406
|
-
*/
|
|
5407
|
-
optional?: boolean;
|
|
5408
5958
|
/**
|
|
5409
5959
|
* Placeholder text shown when no option is selected
|
|
5410
5960
|
* @default "Select an option"
|
|
@@ -5431,6 +5981,11 @@ export declare interface SelectProps {
|
|
|
5431
5981
|
* Array of options (use either options or groups, not both)
|
|
5432
5982
|
*/
|
|
5433
5983
|
options?: SelectOption[];
|
|
5984
|
+
/**
|
|
5985
|
+
* Muted message rendered inside the dropdown when there are no options
|
|
5986
|
+
* (and no groups) to show.
|
|
5987
|
+
*/
|
|
5988
|
+
emptyMessage?: string;
|
|
5434
5989
|
/**
|
|
5435
5990
|
* Array of grouped options (use either options or groups, not both)
|
|
5436
5991
|
*/
|
|
@@ -5803,9 +6358,10 @@ export declare const Textarea: ForwardRefExoticComponent<TextareaProps & RefAttr
|
|
|
5803
6358
|
*/
|
|
5804
6359
|
export declare interface TextareaProps extends Omit<TextareaHTMLAttributes<HTMLTextAreaElement>, "className">, VariantProps<typeof textareaWrapperVariants> {
|
|
5805
6360
|
/**
|
|
5806
|
-
* Label
|
|
6361
|
+
* Label shown above or next to the textarea. A node, not just a string: the
|
|
6362
|
+
* product marks optional fields with a styled "(optional)" span inside it.
|
|
5807
6363
|
*/
|
|
5808
|
-
label?:
|
|
6364
|
+
label?: ReactNode;
|
|
5809
6365
|
/**
|
|
5810
6366
|
* Helper text displayed below the textarea
|
|
5811
6367
|
*/
|
|
@@ -5929,6 +6485,58 @@ declare interface TimePickerProps_2 extends Omit<React_2.InputHTMLAttributes<HTM
|
|
|
5929
6485
|
value?: string;
|
|
5930
6486
|
}
|
|
5931
6487
|
|
|
6488
|
+
export declare const Title: ForwardRefExoticComponent<TitleProps & RefAttributes<HTMLHeadingElement>>;
|
|
6489
|
+
|
|
6490
|
+
export declare interface TitleProps extends Omit<HTMLAttributes<HTMLHeadingElement>, 'title'> {
|
|
6491
|
+
/** Type scale step. All four are font-semibold. */
|
|
6492
|
+
size?: TitleSize;
|
|
6493
|
+
/** Heading level rendered. Pick by document outline, not by size. */
|
|
6494
|
+
as?: 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6' | 'div';
|
|
6495
|
+
/** Left slot. Subject icon or a back control. Muted, 16px. */
|
|
6496
|
+
icon?: ReactNode;
|
|
6497
|
+
/** Right slot. Quiet help affordance (Info + Tooltip). Muted, 16px. */
|
|
6498
|
+
iconRight?: ReactNode;
|
|
6499
|
+
}
|
|
6500
|
+
|
|
6501
|
+
/**
|
|
6502
|
+
* Title — the heading atom.
|
|
6503
|
+
*
|
|
6504
|
+
* Ported from the prototype-kit in DAS-18254, because the design system had no
|
|
6505
|
+
* heading system at all: it shipped `PageTitle` alone, locked to one size, and
|
|
6506
|
+
* the product answered by hand-rolling 103 weighted `<hN>` elements across
|
|
6507
|
+
* eight different type scales. A heading is not a page-title-shaped problem.
|
|
6508
|
+
*
|
|
6509
|
+
* Four sizes, all font-semibold, all on the Tailwind scale (never px):
|
|
6510
|
+
*
|
|
6511
|
+
* small → text-sm (14 / 20) section label inside a card
|
|
6512
|
+
* default → text-base (16 / 24) card title
|
|
6513
|
+
* medium → text-xl (20 / 28) section divider inside a page
|
|
6514
|
+
* large → text-2xl (24 / 32) page title
|
|
6515
|
+
*
|
|
6516
|
+
* Only the type scale moves. The frame is constant: gap-3 between the text and
|
|
6517
|
+
* either icon, 16px icons, and no padding of its own — the text sits flush
|
|
6518
|
+
* against the leading edge so a Title lines up with the fields under it.
|
|
6519
|
+
* Spacing between a Title and its siblings belongs to the container.
|
|
6520
|
+
*
|
|
6521
|
+
* The text carries the weight in `text-foreground`; both icon slots sit back in
|
|
6522
|
+
* `text-muted-foreground`. Icons support the heading, they do not compete.
|
|
6523
|
+
*
|
|
6524
|
+
* ── One deviation from the kit, and one gap ────────────────────────────────
|
|
6525
|
+
*
|
|
6526
|
+
* `[&_svg]:size-4` is the kit's, and it only reaches callers who pass a real
|
|
6527
|
+
* `<svg>`. Our `Icon` draws the Phosphor WEBFONT — an `<i>` sized by an inline
|
|
6528
|
+
* `font-size` — so no parent rule can size it. Pass `size="sm"` (16px) to land
|
|
6529
|
+
* an `<Icon>` on the same grid.
|
|
6530
|
+
*
|
|
6531
|
+
* The kit's scale has no `text-lg` step, but 27 of the product's hand-rolled
|
|
6532
|
+
* headings use one, and both design systems' DialogTitle is `text-lg` — while
|
|
6533
|
+
* the kit's own docs here claim `default`/text-base is the dialog title. The
|
|
6534
|
+
* kit contradicts itself, so this port does not invent a fifth size to settle
|
|
6535
|
+
* it: those call sites keep passing `className="text-lg"` until the migration
|
|
6536
|
+
* decides, case by case, whether they are really `default` or `medium`.
|
|
6537
|
+
*/
|
|
6538
|
+
export declare type TitleSize = 'small' | 'default' | 'medium' | 'large';
|
|
6539
|
+
|
|
5932
6540
|
export { toast }
|
|
5933
6541
|
|
|
5934
6542
|
/**
|
|
@@ -6058,6 +6666,8 @@ export declare const TooltipProvider: React_2.FC<TooltipPrimitive.TooltipProvide
|
|
|
6058
6666
|
|
|
6059
6667
|
export declare type TooltipProviderProps = ComponentProps<typeof TooltipProvider>;
|
|
6060
6668
|
|
|
6669
|
+
export declare const tooltipSurfaceClassName = "rounded-lg px-3 py-1.5 text-xs bg-black text-white dark:bg-white dark:text-black dark:border dark:border-gray-200 dark:shadow-md";
|
|
6670
|
+
|
|
6061
6671
|
declare const TooltipTrigger: React_2.ForwardRefExoticComponent<TooltipPrimitive.TooltipTriggerProps & React_2.RefAttributes<HTMLButtonElement>>;
|
|
6062
6672
|
|
|
6063
6673
|
declare type TooltipTriggerProps = ComponentProps<typeof TooltipTrigger>;
|
|
@@ -6123,7 +6733,7 @@ export declare interface TransferListProps extends Omit<HTMLAttributes<HTMLDivEl
|
|
|
6123
6733
|
/**
|
|
6124
6734
|
* Keyboard keys that trigger adding a value
|
|
6125
6735
|
*/
|
|
6126
|
-
export declare type TriggerKey =
|
|
6736
|
+
export declare type TriggerKey = 'Enter' | 'Tab' | 'Comma' | 'Space';
|
|
6127
6737
|
|
|
6128
6738
|
/**
|
|
6129
6739
|
* Tutorial component that renders a customizable tooltip for guided tours.
|
|
@@ -6159,6 +6769,11 @@ export declare interface TutorialProps extends TooltipRenderProps {
|
|
|
6159
6769
|
width?: number;
|
|
6160
6770
|
/** Accessible label for the step close button. @default "Close" */
|
|
6161
6771
|
closeLabel?: string;
|
|
6772
|
+
/**
|
|
6773
|
+
* Localized step counter (e.g. "Paso 2 de 3"). The design system has no
|
|
6774
|
+
* i18n of its own, so the caller renders it. Falls back to English.
|
|
6775
|
+
*/
|
|
6776
|
+
stepLabel?: string;
|
|
6162
6777
|
}
|
|
6163
6778
|
|
|
6164
6779
|
/**
|
|
@@ -6175,12 +6790,26 @@ export declare interface UploadFile {
|
|
|
6175
6790
|
size: number;
|
|
6176
6791
|
/** Upload progress from 0-100. When 100 or undefined, file is considered "Uploaded" */
|
|
6177
6792
|
progress?: number;
|
|
6178
|
-
/**
|
|
6179
|
-
|
|
6793
|
+
/**
|
|
6794
|
+
* Upload status. If omitted, derived from progress: 0-99 = "uploading",
|
|
6795
|
+
* 100/undefined = "uploaded".
|
|
6796
|
+
*
|
|
6797
|
+
* "success" is the moment the transfer lands — full bar plus a check. It is
|
|
6798
|
+
* the transient state you flash before settling on "uploaded", the resting
|
|
6799
|
+
* row where the bar goes away and only the file and its remove action remain.
|
|
6800
|
+
*/
|
|
6801
|
+
status?: UploadFileStatus;
|
|
6180
6802
|
/** Optional error message when status is "error" */
|
|
6181
6803
|
errorMessage?: string;
|
|
6804
|
+
/** Thumbnail URL. When set, the preview replaces the file-type icon (image uploads). */
|
|
6805
|
+
previewUrl?: string;
|
|
6806
|
+
/** Status line override. Each status ships default copy. */
|
|
6807
|
+
statusLabel?: string;
|
|
6182
6808
|
}
|
|
6183
6809
|
|
|
6810
|
+
/** The four states a row can be in. */
|
|
6811
|
+
export declare type UploadFileStatus = 'uploading' | 'success' | 'uploaded' | 'error';
|
|
6812
|
+
|
|
6184
6813
|
/**
|
|
6185
6814
|
* Custom hook to lock/unlock body scroll when a modal or overlay is open
|
|
6186
6815
|
* This prevents the background from scrolling while a modal is active
|
|
@@ -6248,6 +6877,10 @@ export declare function useDirection(lang?: SupportedLanguage): "rtl" | "ltr";
|
|
|
6248
6877
|
* Custom hook to handle Escape key press
|
|
6249
6878
|
* Commonly used for closing modals, dialogs, sheets, etc.
|
|
6250
6879
|
*
|
|
6880
|
+
* Layers stack in activation order: when several overlays are open at once,
|
|
6881
|
+
* Escape reaches only the most recently activated one. Once it deactivates or
|
|
6882
|
+
* unmounts, the layer beneath it takes over.
|
|
6883
|
+
*
|
|
6251
6884
|
* @param isActive - Whether the Escape key handler should be active
|
|
6252
6885
|
* @param onEscape - Callback function to execute when Escape is pressed
|
|
6253
6886
|
*
|
|
@@ -6259,6 +6892,22 @@ export declare function useDirection(lang?: SupportedLanguage): "rtl" | "ltr";
|
|
|
6259
6892
|
*/
|
|
6260
6893
|
export declare function useEscapeKey(isActive: boolean, onEscape: () => void): void;
|
|
6261
6894
|
|
|
6895
|
+
/**
|
|
6896
|
+
* Whether the user is on a Mac, so a keyboard hint can show the right glyph:
|
|
6897
|
+
* ⌘ against Ctrl, ⌥ against Alt.
|
|
6898
|
+
*
|
|
6899
|
+
* Ported from the prototype-kit with Kbd in DAS-18254. It lives here rather
|
|
6900
|
+
* than inside the component because a shortcut hint is not the only thing that
|
|
6901
|
+
* needs to know — a `Mod+K` listener has to decide between metaKey and ctrlKey
|
|
6902
|
+
* for exactly the same reason.
|
|
6903
|
+
*
|
|
6904
|
+
* useSyncExternalStore rather than useEffect: the platform cannot change during
|
|
6905
|
+
* a session, so `subscribe` is a no-op and the value is read straight from a
|
|
6906
|
+
* snapshot. That keeps the first paint correct instead of flashing the wrong
|
|
6907
|
+
* glyph for a frame.
|
|
6908
|
+
*/
|
|
6909
|
+
export declare function useIsMac(): boolean;
|
|
6910
|
+
|
|
6262
6911
|
/**
|
|
6263
6912
|
* Custom hook to track media query matches
|
|
6264
6913
|
* Returns true if the media query matches, false otherwise
|