@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.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 component for displaying informational, success, warning, or error messages.
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 variant="default" icon="Info" title="Information" description="This is an info alert" />
223
- * <Alert variant="destructive" icon="Warning" title="Error" description="Something went wrong" />
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 function Alert_2({ className, variant, ...props }: React_2.ComponentProps<"div"> & VariantProps<typeof alertVariants>): JSX_2.Element;
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 description/body text
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
- * Props for the icon component
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" | "destructive" | "alert" | "secondary" | "outline" | "error" | "warning" | "info" | "success";
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 (invisible,
477
- * pointer-events off) so the exit transition can play — freeze your label
478
- * while closing if you don't want "0 selected" flashing during it.
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 displaying country codes with flag emojis.
1480
- * Supports showing just the code, or the full country name via
1481
- * a custom resolver function.
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 emoji @default true */
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 / FileUpload because all four
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 `<FileUpload />` -- no separate file list component required.
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
- * <FileUpload
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 FileUpload: ForwardRefExoticComponent<FileUploadProps & RefAttributes<HTMLInputElement>>;
3421
+ export declare const FileUploader: ForwardRefExoticComponent<FileUploaderProps & RefAttributes<HTMLInputElement>>;
3131
3422
 
3132
3423
  /**
3133
- * Props for the FileUpload component
3424
+ * Props for the FileUploader component
3134
3425
  */
3135
- export declare interface FileUploadProps {
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
- declare interface FilterSectionItem {
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
- /** Icon weight/style. @default "light" */
3974
- weight?: IconWeight | string;
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 FileUpload
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?: "default" | "secondary" | "destructive" | "outline";
4890
+ badgeVariant?: 'default' | 'secondary' | 'destructive' | 'outline';
4440
4891
  /**
4441
4892
  * Layout orientation
4442
4893
  * @default "vertical"
4443
4894
  */
4444
- orientation?: "vertical" | "horizontal";
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>, "maxLength" | "render"> {
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>): JSX_2.Element;
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 text displayed above or next to the textarea
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?: string;
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 = "Enter" | "Tab" | "Comma" | "Space";
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
- /** Upload status. If omitted, derived from progress: 0-99 = "uploading", 100/undefined = "uploaded" */
6179
- status?: 'uploading' | 'uploaded' | 'error';
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