@ssa-ui-kit/core 3.21.3 → 3.22.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (62) hide show
  1. package/dist/ai/source-map.md +2243 -0
  2. package/dist/components/ButtonGroup/ButtonGroup.d.ts +7 -3
  3. package/dist/components/ButtonGroup/ButtonGroupButton.d.ts +15 -5
  4. package/dist/components/ButtonGroup/ButtonGroupButtonBase.d.ts +17 -1
  5. package/dist/components/ButtonGroup/styles.d.ts +22 -0
  6. package/dist/components/ButtonGroup/types.d.ts +45 -7
  7. package/dist/components/Card/Card.d.ts +60 -0
  8. package/dist/components/Card/types.d.ts +13 -0
  9. package/dist/components/CardContent/CardContent.d.ts +46 -0
  10. package/dist/components/CardHeader/CardHeader.d.ts +42 -0
  11. package/dist/components/CollapsibleNavBar/CollapsibleNavBar.d.ts +35 -2
  12. package/dist/components/CollapsibleNavBar/components/NavHeader.d.ts +18 -0
  13. package/dist/components/CollapsibleNavBar/components/NavPopoverContent.d.ts +12 -0
  14. package/dist/components/CollapsibleNavBar/components/NavTree.d.ts +22 -0
  15. package/dist/components/CollapsibleNavBar/components/index.d.ts +3 -3
  16. package/dist/components/CollapsibleNavBar/navItems.d.ts +57 -0
  17. package/dist/components/CollapsibleNavBar/styles.d.ts +34 -0
  18. package/dist/components/CollapsibleNavBar/types.d.ts +40 -3
  19. package/dist/components/DatePicker/DatePicker.d.ts +57 -0
  20. package/dist/components/Drawer/DrawerRoot.d.ts +70 -0
  21. package/dist/components/DropdownOption/DropdownOption.d.ts +43 -0
  22. package/dist/components/Form/Form.d.ts +40 -0
  23. package/dist/components/Icon/Icon.d.ts +47 -0
  24. package/dist/components/Icon/icons/Columns.d.ts +3 -0
  25. package/dist/components/Icon/icons/List.d.ts +3 -0
  26. package/dist/components/Icon/icons/all.d.ts +2 -0
  27. package/dist/components/Icon/icons/iconsList.d.ts +1 -1
  28. package/dist/components/Icon/types.d.ts +13 -0
  29. package/dist/components/Input/Input.d.ts +94 -0
  30. package/dist/components/MultipleDropdown/MultipleDropdown.d.ts +73 -0
  31. package/dist/components/NestedTable/WithNestedTableRow.d.ts +39 -0
  32. package/dist/components/NestedTable/components/NestedTable.d.ts +57 -0
  33. package/dist/components/NestedTable/components/NestedTableCell.d.ts +33 -0
  34. package/dist/components/NestedTable/components/NestedTableRow.d.ts +44 -0
  35. package/dist/components/NestedTable/types.d.ts +17 -0
  36. package/dist/components/TableRow/TableRow.d.ts +51 -0
  37. package/dist/components/Tooltip/Tooltip.d.ts +10 -6
  38. package/dist/components/Tooltip/types.d.ts +20 -7
  39. package/dist/components/TooltipContent/TooltipContent.d.ts +7 -3
  40. package/dist/components/TreeView/TreeView.d.ts +62 -0
  41. package/dist/components/TreeView/TreeViewItem.d.ts +32 -0
  42. package/dist/components/TreeView/index.d.ts +2 -0
  43. package/dist/components/TreeView/styles.d.ts +18 -0
  44. package/dist/components/TreeView/types.d.ts +162 -0
  45. package/dist/components/TreeView/useTreeViewState.d.ts +21 -0
  46. package/dist/components/TreeView/utils.d.ts +42 -0
  47. package/dist/components/Wrapper/Wrapper.d.ts +6 -6
  48. package/dist/components/index.d.ts +1 -0
  49. package/dist/index.js +2326 -678
  50. package/dist/index.mjs +2327 -680
  51. package/dist/tsbuildcache +1 -1
  52. package/package.json +4 -4
  53. package/dist/components/CollapsibleNavBar/components/ItemWithSubmenu/AccordionContent.d.ts +0 -11
  54. package/dist/components/CollapsibleNavBar/components/ItemWithSubmenu/AccordionContentItem.d.ts +0 -8
  55. package/dist/components/CollapsibleNavBar/components/ItemWithSubmenu/CollapsibleNavBarItem.d.ts +0 -6
  56. package/dist/components/CollapsibleNavBar/components/ItemWithSubmenu/ItemAccordionTitle.d.ts +0 -9
  57. package/dist/components/CollapsibleNavBar/components/ItemWithSubmenu/ItemWithSubMenu.d.ts +0 -7
  58. package/dist/components/CollapsibleNavBar/components/ItemWithSubmenu/index.d.ts +0 -5
  59. package/dist/components/CollapsibleNavBar/components/ItemWithSubmenu/styles.d.ts +0 -6
  60. package/dist/components/CollapsibleNavBar/components/ItemWithoutSubmenu/ItemWithoutSubMenu.d.ts +0 -5
  61. package/dist/components/CollapsibleNavBar/components/ItemWithoutSubmenu/index.d.ts +0 -1
  62. package/dist/components/CollapsibleNavBar/components/NavBarItem.d.ts +0 -8
@@ -0,0 +1,2243 @@
1
+ # @ssa-ui-kit/core — AI source map
2
+
3
+ Generated from the TypeScript program at build time — do not edit by hand.
4
+
5
+ **Everything below is imported from the package root:** `import { X } from '@ssa-ui-kit/core'`
6
+
7
+ 182 components · 20 contexts · 20 hooks · 17 functions · 16 constants · 271 exported types
8
+
9
+ ## Reading this file
10
+
11
+ - Only props **declared by this library** are listed. Components that also accept native element attributes say so explicitly.
12
+ - `prop?:` means optional. `= value` is the default. Long literal unions are truncated — the full union is enforced by the type checker.
13
+ - Every component additionally accepts `className`, `css`, `as`, `theme`, `key`, `ref`; these are omitted below.
14
+ - To look a component up, search this file for `#### <Name>`.
15
+ - This is an index, not a reference. For full documentation and usage examples, read the matching `.d.ts` in `dist/`.
16
+
17
+ ## Component roster
18
+
19
+ **Action & Form Controls** — BreadcrumbMenu, Breadcrumbs, Button, ButtonGroup, ButtonGroupButton, Checkbox, ColorPicker, DatePicker, DateRangePicker, DateRangePickerFormBridge, Dropdown, DropdownArrow, DropdownBase, DropdownOption, DropdownOptions, DropdownToggle, FileAttachment, FileUpload, IconButton, Input, MultipleDropdown, MultipleDropdownNotification, MultipleDropdownOptions, NumberField, Radio, RadioGroup, SearchBox, SearchBoxCrossIcon, SearchBoxInput, SearchBoxWrapper, Slider, SliderInputsRow, SliderLabel, SliderMarkItem, SliderMarkLabel, SliderMarksRow, SliderMarkTick, SliderNumberInput, SliderRangeInput, SliderRoot, SliderTrackBg, SliderTrackFill, SliderTrackRow, SliderTrackWrapper, SliderValueLabel, SliderValueLabelsContainer, Switch, Textarea, TextField, Typeahead, TypeaheadItemIcon, TypeaheadItemImage, TypeaheadOption, TypeaheadOptions
20
+
21
+ **Form Structure** — Filters, FiltersMultiSelect, FiltersMultiSelectEmpty, FiltersMultiSelectOption, FiltersMultiSelectOptions, Form, FormAction, FormCheckbox, FormGroup, FormHelperText, FormRadioGroup
22
+
23
+ **Data Display** — Avatar, Badge, BarGaugeChart, BarGaugeChartComponent, BarLineComplexChart, BigNumberChart, BigNumberChartComponent, CandlestickChart, CandlestickChartComponent, Card, CardBase, CardContent, CardHeader, CardList, ChartBackground, Chip, Counter, GaugeChart, ImageItem, Indicator, Label, NestedTable, NestedTableCell, NestedTableCellSubHeader, NestedTableRow, PieChart, PieChartComponent, PieChartLegend, Progress, ProgressBar, ProgressCircle, ProgressInfo, ProgressInfoTotals, ProgressLegend, ProgressLegendItem, ProgressVertical, ResponsiveImage, SegmentedPieChart, SegmentedPieChartComponent, Table, TableBody, TableCell, TableCellHeader, TableFilterCheckbox, TableFilters, TableFiltersAccordion, TableFiltersAccordionContent, TableFiltersButtons, TableFiltersCancelButton, TableFiltersClearButton, TableFilterTrigger, TableFilterTriggerWithNotification, TableHead, TableRow, Tag, TreeMapChart, TreeMapChartComponent, TreeMapTooltipBase, Typography, WithNestedTableRow
24
+
25
+ **Navigation & Layout** — CollapsibleNavBar, CollapsibleNavBarCustomIconSVG, History, LargeTab, Link, LinksTabBar, NavBar, Pagination, Step, StepConnector, StepLabel, Stepper, Tab, TabBar, TreeView, WithLink, WithPagination, WithVisibleLG, WithVisibleMD, WithVisibleSM, WithVisibleUpToLG, Wrapper
26
+
27
+ **Overlay & Feedback** — Modal, ModalContent, ModalDialog, ModalDismissButton, ModalOpenButton, NotificationCard, NotificationMenu, Popover, PopoverClose, PopoverContent, PopoverDescription, PopoverHeading, PopoverTrigger, ProgressChartTooltip, SimpleChartTooltip, Tooltip, TooltipContent, TooltipContentBase, TooltipTrigger
28
+
29
+ **Notification Components** — Alert, Notification, Toast
30
+
31
+ **Specialized Components** — Accordion, AccordionContent, AccordionGroup, AccordionTitle, AddNewAccountCard, Icon, PersonInfo, UserProfile, WidgetCard, WidgetCardBase, WidgetCardTitle, WithFullscreenMode, WithWidgetCard
32
+
33
+ ## Components
34
+
35
+ ### Action & Form Controls
36
+
37
+ #### BreadcrumbMenu
38
+ A hover/click popover listing navigable routes. Shared by the collapsed `…` crumb and, in the route-aware mode, by crumbs that expose sibling routes.
39
+
40
+ - `trigger: ReactElement<unknown, string | JSXElementConstructor<any>>` — Element that opens the menu on hover/click. Must forward a ref.
41
+ - `items: BreadcrumbSibling[]` — Navigable options shown inside the menu.
42
+
43
+ #### Breadcrumbs
44
+ Navigational trail of the current page's location.
45
+
46
+ - `items: BreadcrumbItem[]` — Ordered list of crumbs, root first, current page last.
47
+ - `maxItems?: number` — Collapse the trail into `first … last` once the number of items exceeds this value. The collapsed middle…
48
+ - `separator?: ReactNode` — Custom separator between crumbs. Defaults to a right chevron.
49
+ - `aria-label?: string` `= 'Breadcrumb'` — Accessible label for the wrapping `nav`.
50
+ - `ariaLabel?: string` — Accessible label for the wrapping `nav`.
51
+
52
+ #### Button
53
+ Interactive button component for user actions.
54
+
55
+ - `block?: boolean` `= false` — Makes the button span the full width of its container
56
+ - `size?: keyof MainSizes` `= 'small'` — Size variant of the button - `small`: Compact button for dense UIs (default) - `medium`: Standard button size…
57
+ - `text?: string` — Text content to display inside the button Either `text`, `children`, or icons must be provided
58
+ - `startIcon?: React.ReactNode` — Icon to display before the button text/content Can be any React node, commonly an Icon component
59
+ - `endIcon?: React.ReactNode` — Icon to display after the button text/content Can be any React node, commonly an Icon component
60
+ - `startIconClassName?: string` — Custom CSS class name for the start icon wrapper
61
+ - `endIconClassName?: string` — Custom CSS class name for the end icon wrapper
62
+ - `variant?: keyof ButtonVariants` `= 'custom'` — Visual style variant of the button (uses theme.palette for solid variants). - `custom` — transparent, dark…
63
+ - `type?: 'button' | 'reset' | 'submit'` `= 'button'` — HTML button type attribute - `button`: Standard button (default) - `submit`: Form submission button -…
64
+ - `disabled?: boolean` `= false` — Disables the button, preventing user interaction
65
+ - `loading?: boolean` `= false` — Shows a spinner in place of the button's content and disables interaction. The button keeps its resting…
66
+ - `isDisabled?: boolean` `= false` — Disables the button, preventing user interaction
67
+ - `onClick?: React.MouseEventHandler<HTMLButtonElement>` — Click event handler Fired when the button is clicked (if not disabled)
68
+ - `children?: React.ReactNode` — Custom content to render inside the button If provided, takes precedence over `text` prop Either `text`,…
69
+
70
+ #### ButtonGroup
71
+ A row of mutually exclusive buttons.
72
+
73
+ - `children?: ReactNode` — Buttons to render, as `ButtonGroupButton` children. When provided, `items` is ignored — use this when a…
74
+ - `items?: ButtonGroupItemInput[]` — Buttons to render, as data. Ignored when `children` are provided.
75
+ - `value?: ButtonGroupValue` — Active selection, for the controlled pattern. When provided, the parent owns the selection and the group only…
76
+ - `defaultValue?: ButtonGroupValue` — Initial selection, as an `id` or the whole item. Only used when neither `value` nor the deprecated…
77
+ - `selectedItem?: ButtonGroupValue` — Also accepts a bare `id`, like `value`.
78
+ - `externalState?: ButtonGroupValue` — Also accepts a bare `id`, like `value`.
79
+ - `onClick?: (item: ButtonGroupItem) => void` — Called with the clicked item. Optional — an uncontrolled group that only needs to track its own selection…
80
+ - `buttonStyles?: SerializedStyles`
81
+
82
+ #### ButtonGroupButton
83
+ One button inside a composed `ButtonGroup`.
84
+
85
+ - `id: string | number` — Identifies this button within the group; matched against `value`.
86
+ - `children?: ReactNode` — Button content — text or any markup. Omit it for an icon-only button.
87
+ - `icon?: ReactNode` — Leading icon, rendered before `children`. On its own — no children — it makes the button icon-only: square,…
88
+ - `text?: string` — Plain-text label for this button, used when the group reports the clicked item through its `onClick`. Only…
89
+ - `aria-label?: string` — Accessible name. Required for an icon-only button, which has no text for a screen reader to announce; also…
90
+ - `disabled?: boolean` — Renders this button as disabled.
91
+ - `onClick?: () => void` — Fired when this button is clicked, in addition to the group's `onClick`. The idiomatic handler in children…
92
+
93
+ #### Checkbox
94
+ Form control for selecting one or more options
95
+
96
+ - `text?: ReactNode` — Label text or custom React node to display next to the checkbox Can be a string, number, or any React node
97
+ - `id?: string` — Unique identifier for the checkbox input element If not provided, a unique ID will be auto-generated
98
+ - `onChange?: (newState: boolean) => void` — Callback function called when checkbox state changes Receives the new checked state (boolean) as parameter
99
+ - `checked?: boolean` — Checked state, for the controlled pattern. When provided, the parent owns the value: the checkbox renders…
100
+ - `externalState?: boolean` — External state control - allows parent component to control checkbox state When provided, the checkbox…
101
+ - `disabled?: boolean` `= false` — Whether the checkbox is disabled Disabled checkboxes cannot be interacted with and appear visually muted
102
+ - `isDisabled?: boolean` `= false` — Whether the checkbox is disabled
103
+ - `defaultChecked?: boolean` `= false` — Initial checked state when component mounts Only used for uncontrolled checkboxes
104
+ - `initialState?: boolean` `= false` — Initial checked state when component mounts
105
+ - `isIndeterminate?: boolean` `= false` — Indeterminate state - represents a partially selected state Commonly used in tree structures or "select all"…
106
+ - `name?: string` `= ''` — Name attribute for form submission and React Hook Form integration Required when using with React Hook Form
107
+ - `isRequired?: boolean` `= false` — Whether the checkbox is required for form validation
108
+ - `color?: 'custom' | 'primary' | 'success'` `= 'primary'` — Color variant of the checkbox — controls the checked and focus-state colors. Sourced from `theme.palette`: -…
109
+
110
+ #### ColorPicker
111
+
112
+ - `value?: string` — Controlled colour value. When provided, the parent owns the value.
113
+ - `defaultValue?: string` — Initial colour value, for uncontrolled mode.
114
+ - `defaultColor?: string`
115
+ - `color?: string`
116
+ - `defaultFormat?: 'hex' | 'rgb' | 'hsl'`
117
+ - `disabledAlpha?: boolean`
118
+ - `disabled?: boolean`
119
+ - `format?: 'hex' | 'rgb' | 'hsl'`
120
+ - `label?: string`
121
+ - `colorsPalette?: string[]`
122
+ - `classnames?: { trigger, content, button, colorPicker, colorDropdown, output }`
123
+ - `onChange?: (color: string) => void`
124
+
125
+ #### DatePicker
126
+ Masked date input with a popover calendar. Use inside **`FormProvider`** (react-hook-form): the field value is the formatted string; **`onChange`** receives a JavaScript…
127
+
128
+ - `name: string` — Field name registered with react-hook-form (**required**).
129
+ - `label?: string` — Optional label rendered above the input (**`Label`**).
130
+ - `format?: DateFormat` `= From **`pickerType`**: `mm/dd/yyyy`, `mm/yyyy`, or `yyyy`` — Date string format for display, mask, and parsing.
131
+ - `maskOptions?: MaskOptions` — Options passed to **`@react-input/mask`** (mask pattern, **`replacement`**, etc.). Defaults include the…
132
+ - `openCalendarMode?: 'input' | 'icon' | 'both'` `= 'icon'` — What opens the calendar: calendar **icon** only, **input** click only, or **both**.
133
+ - `pickerType?: PickerType` `= 'days' (**`PICKER_TYPE.DAYS`**)` — Day vs month vs year picker; sets default **format**, mask length, and calendar start view.
134
+ - `inputProps?: Partial<InputProps>` — Extra props forwarded to the underlying **Input** (e.g. **`id`**, **`inputProps`**).
135
+ - `value?: string` — Controlled string value (must match **format**). Synced into the form via **`setValue`**.
136
+ - `defaultValue?: string` — Initial string value when uncontrolled (must match **format**).
137
+ - `dateMin?: string` `= Built-in minimum for the picker type (e.g. `01/01/1900` for days)` — Inclusive minimum date as a string in the current **format** (and **pickerType**).
138
+ - `dateMax?: string` `= Built-in maximum for the picker type (e.g. `01/01/2150` for days)` — Inclusive maximum date as a string in the current **format** (and **pickerType**).
139
+ - `disabled?: boolean` `= false` — Disables the input and calendar trigger.
140
+ - `helperText?: string` — Helper text below the field (shown with validation message when present).
141
+ - `success?: boolean` `= false` — Renders the field in its **success** state (green border and helper text). A validation error always wins, so…
142
+ - `showCalendarIcon?: boolean` `= true` — Whether the trailing calendar icon button is shown.
143
+ - `showTimePicker?: boolean` `= false` — Adds an hours/minutes panel beside the calendar and appends **`HH:mm`** to the field's format and mask. The…
144
+ - `minuteStep?: number` `= 15` — Increment between selectable minutes, in minutes. Must divide 60. Use **`1`** to match the design's full 0–59…
145
+ - `showClearButton?: boolean` `= false` — Whether the trailing **clear** (×) button is shown. It appears only while the field differs from…
146
+ - `lastChangedDate?: Date` — Last **Date** emitted from **onChange**; used with **`highlightDates`** for range styling in the calendar…
147
+ - `highlightDates?: { enabled, mode, otherDate }` — Optional range highlight between this picker’s value and **`otherDate`** (e.g. date-range UX).
148
+ - `classNames?: { header, trigger, monthsSwitch, calendar, label }` — Optional class names for calendar shell, header, trigger, month arrows, and label.
149
+ - `onChange?: (date?: Date) => void` — Called with the selected **`Date`** (Luxon-normalized to start of day/month/year — or to the start of the…
150
+ - `onOpen?: () => void` — Called when the popover opens.
151
+ - `onClose?: () => void` — Called when the popover closes (not on first mount).
152
+ - `onError?: (date: any, error?: string | null) => void` — Called when validation fails or clears: first argument is the raw input string or **null**; second is an…
153
+ - `onMonthChange?: (date: Date) => void` — Called when the visible month changes (day picker, prev/next month).
154
+ - `onYearChange?: (date: Date) => void` — Called when the selected or browsed **year** changes (year list or drilling into months).
155
+ - `onBlur?: FocusEventHandler<HTMLInputElement>` — Blur handler composed with internal validation (runs after **`processValue`** on blur).
156
+ - `validationSchema?: RegisterOptions` — Extra **react-hook-form** rules merged with the field (e.g. **required**).
157
+
158
+ #### DateRangePicker
159
+ Two masked inputs (**from** / **to**) with a shared popover calendar and **react-hook-form** fields **`${name}From`** and **`${name}To`** inside **`FormProvider`**.…
160
+
161
+ - `name: string` — Base field name; registers **`${name}From`** and **`${name}To`** with react-hook-form.
162
+ - `label?: string` — Optional label (**`Field.Label`**); **`htmlFor`** follows the focused input.
163
+ - `format?: DateFormat` — Date string format for both fields. Defaults from **`rangePickerType`** if omitted.
164
+ - `isOpenState?: boolean` — Initial open state for the calendar popover (controlled open seed).
165
+ - `value?: [string | null | undefined, string | null | undefined]` — Controlled tuple of string values matching **format**; **`null`** at index **1** means **“Present”** end.
166
+ - `defaultValue?: [string, string | null] | [string, string]` — Initial tuple; **`[string, null]`** end means **Present** (open-ended).
167
+ - `maskOptions?: MaskOptions` — Options for **`@react-input/mask`** (shared pattern for both inputs).
168
+ - `inputProps?: Partial<InputProps>` — Extra props for the underlying **Input** fields.
169
+ - `status?: 'error' | 'success' | 'basic'` — Visual status for **`Field.Root`** (**error** / **success** / **basic**).
170
+ - `showStatusArea?: boolean` `= true` — Whether **`messages`** render in **`TriggerStatusArea`** below the inputs.
171
+ - `dateMin?: string` — Inclusive minimum date string (shape matches **format** and **rangePickerType**).
172
+ - `dateMax?: string` — Inclusive maximum date string (shape matches **format** and **rangePickerType**).
173
+ - `disabled?: boolean` `= false` — Disables both inputs and the calendar trigger.
174
+ - `showCalendarIcon?: boolean` `= true` — Shows the calendar icon button to open the popover.
175
+ - `showClearButton?: boolean` `= false` — Shows the trailing **clear** (×) button. It appears only while either field differs from **`defaultValue`**,…
176
+ - `rangePickerType?: PickerCalendarType` `= 'days'` — **days** | **months** | **years** — drives default **format**, mask, and calendar chrome.
177
+ - `messages?: { description?: string; success?: string; error?: string; }` — Optional copy for the status area (description / success / error messaging).
178
+ - `classNames?: { trigger, calendar, label, presets }` — Optional class names for trigger layout, inputs, icon, calendar shell, and label.
179
+ - `presets?: DateRangePreset[]` — Shortcut ranges (**Today**, **Last month**, …) listed to the left of the calendar. Clicking one applies its…
180
+ - `onChange?: (dates?: DateRangePickerOnChangeDates) => void` — Emits **`[start, end]`** as **`Date`**, **`null`** (Present end only), or **`undefined`** per side.
181
+ - `onOpen?: () => void` — Calendar popover opened.
182
+ - `onClose?: () => void` — Calendar popover closed.
183
+ - `onError?: (date: unknown, error?: string | null) => void` — Validation or parse error: raw input value and message (e.g. invalid / out of range).
184
+ - `onMonthChange?: (date: Date) => void` — Visible month changed (prev/next) while in day view.
185
+ - `onYearChange?: (date: Date) => void` — Year changed from year list or header drill-down.
186
+ - `onBlur?: FocusEventHandler<HTMLInputElement>` — Blur handler composed with internal validation.
187
+ - `allowReverseSelection?: boolean` `= false` — If the user picks an end before a start, swap the two dates instead of rejecting.
188
+ - `showPresentOption?: boolean` `= false` — Shows a **Present** control in the calendar (end date only — ongoing range).
189
+
190
+ #### DateRangePickerFormBridge
191
+ Wraps **DateRangePicker** with an internal **FormProvider** and converts between **`outputFormat`** (form storage) and **`inputFormat`** (picker display). Maps…
192
+
193
+ - `disabled?: boolean` `= false` — Disables both inputs and the calendar trigger.
194
+ - `name: string` — Base field name; registers **`${name}From`** and **`${name}To`** with react-hook-form.
195
+ - `label?: string` — Optional label (**`Field.Label`**); **`htmlFor`** follows the focused input.
196
+ - `status?: 'error' | 'success' | 'basic'` — Visual status for **`Field.Root`** (**error** / **success** / **basic**).
197
+ - `inputProps?: Partial<InputProps>` — Extra props for the underlying **Input** fields.
198
+ - `format?: DateFormat` — Date string format for both fields. Defaults from **`rangePickerType`** if omitted.
199
+ - `onBlur?: FocusEventHandler<HTMLInputElement>` — Blur handler composed with internal validation.
200
+ - `onError?: (date: unknown, error?: string | null) => void` — Validation or parse error: raw input value and message (e.g. invalid / out of range).
201
+ - `maskOptions?: MaskOptions` — Options for **`@react-input/mask`** (shared pattern for both inputs).
202
+ - `dateMin?: string` — Inclusive minimum date string (shape matches **format** and **rangePickerType**).
203
+ - `dateMax?: string` — Inclusive maximum date string (shape matches **format** and **rangePickerType**).
204
+ - `showCalendarIcon?: boolean` `= true` — Shows the calendar icon button to open the popover.
205
+ - `showClearButton?: boolean` `= false` — Shows the trailing **clear** (×) button. It appears only while either field differs from **`defaultValue`**,…
206
+ - `classNames?: { trigger, calendar, label, presets }` — Optional class names for trigger layout, inputs, icon, calendar shell, and label.
207
+ - `onOpen?: () => void` — Calendar popover opened.
208
+ - `onClose?: () => void` — Calendar popover closed.
209
+ - `onMonthChange?: (date: Date) => void` — Visible month changed (prev/next) while in day view.
210
+ - `onYearChange?: (date: Date) => void` — Year changed from year list or header drill-down.
211
+ - `isOpenState?: boolean` — Initial open state for the calendar popover (controlled open seed).
212
+ - `showStatusArea?: boolean` `= true` — Whether **`messages`** render in **`TriggerStatusArea`** below the inputs.
213
+ - `rangePickerType?: PickerCalendarType` `= 'days'` — **days** | **months** | **years** — drives default **format**, mask, and calendar chrome.
214
+ - `messages?: { description?: string; success?: string; error?: string; }` — Optional copy for the status area (description / success / error messaging).
215
+ - `presets?: DateRangePreset[]` — Shortcut ranges (**Today**, **Last month**, …) listed to the left of the calendar. Clicking one applies its…
216
+ - `allowReverseSelection?: boolean` `= false` — If the user picks an end before a start, swap the two dates instead of rejecting.
217
+ - `showPresentOption?: boolean` `= false` — Shows a **Present** control in the calendar (end date only — ongoing range).
218
+ - `value?: DateRangePickerFormBridgeValue` — Form value: dates in outputFormat, end can be PRESENT_VALUE for "Present"
219
+ - `defaultValue?: DateRangePickerFormBridgeValue` — Fallback when value is empty (e.g. from ui:options.defaultValue)
220
+ - `onChange?: (value: DateRangePickerFormBridgeValue) => void` — Called with form shape: dates in outputFormat, end is PRESENT_VALUE when "Present"
221
+ - `outputFormat: string` — Format used to parse value (form storage), e.g. 'yyyy-MM-dd'
222
+ - `inputFormat: DateFormat` — Format used for display in the picker, e.g. 'dd/mm/yyyy'
223
+
224
+ #### Dropdown<T>
225
+ Select-like dropdown component for single selection
226
+
227
+ - `selectedItem?: T` — Currently selected item When provided, this item will be displayed in the toggle button
228
+ - `onChange?: (item: T) => void` — Callback function called when an option is selected Receives the selected DropdownOptionProps object
229
+ - `disabled?: boolean` `= false` — Whether the dropdown is disabled Disabled dropdowns cannot be opened or interacted with
230
+ - `isDisabled?: boolean`
231
+ - `placeholder?: string` `= 'Select something'` — Placeholder text displayed when no item is selected
232
+ - `children?: React.ReactNode` — DropdownOption components as children Each child must be a DropdownOption component
233
+ - `isOpen?: boolean` — Controlled open state When provided, controls dropdown open/closed state externally
234
+ - `maxHeight?: number` `= 200` — Max height (px) of the options list; overflow scrolls.
235
+ - `avatarBorder?: boolean` `= false` — Shows a border around the avatar in the selected-item display.
236
+ - `label?: string` — Label text displayed above the dropdown
237
+ - `helperText?: string` — Helper text displayed below the dropdown Shown when no errors are present
238
+ - `errors?: FieldError` — React Hook Form field error object Used to display validation error messages
239
+ - `success?: boolean` `= false` — Whether to display success state styling When true, status is set to 'success'
240
+ - `icon?: 'reset' | 'archive' | 'arrow-down' | 'arrow-up' | …(223 more — full list under "Icon.name")` — Leading icon shown in the toggle button when no selected item avatar is present. Ignored once an item with an…
241
+ - `width?: string | number` — Width of the dropdown. Can be a number (pixels) or a string (any CSS value, e.g. `'100%'`).
242
+ - `dropdownProps?: { base, toggleButton, toggleButtonArrow, dropdownPosition }` — Props object for sub-components Allows fine-grained control over component parts
243
+
244
+ #### DropdownArrow
245
+
246
+ - `isUp: boolean`
247
+
248
+ #### DropdownBase
249
+
250
+ _No library-specific props._
251
+ - _plus native element attributes_
252
+
253
+ #### DropdownOption
254
+ A single selectable row inside `Dropdown` or `MultipleDropdown`.
255
+
256
+ - `onClick?: (e: React.MouseEvent<HTMLElement>) => void`
257
+ - `isActive?: boolean`
258
+ - `isMultiple?: boolean`
259
+ - `disabled?: boolean` — Whether this option is disabled. Only styled in `isMultiple` mode.
260
+ - `isDisabled?: boolean` — Whether this option is disabled.
261
+ - `noHover?: boolean`
262
+ - `value?: string | number | boolean`
263
+ - `label?: string | number`
264
+ - `children?: React.ReactNode`
265
+ - `avatar?: React.ReactNode` — Avatar or icon to display before the option content (e.g. <Avatar size={20} image={url} />)
266
+ - _plus native element attributes_
267
+
268
+ #### DropdownOptions
269
+ Options menu container for Dropdown component
270
+
271
+ - `aria-labelledby?: string` — ARIA label reference Associates the listbox with its label
272
+ - `ariaLabelledby?: string` — ARIA label reference Associates the listbox with its label
273
+ - `id?: string` — Unique identifier for the options container
274
+ - `children?: ReactNode` — DropdownOption components as children
275
+
276
+ #### DropdownToggle
277
+
278
+ - `onClick: (e: React.MouseEvent<HTMLElement>) => void`
279
+ - `onFocus?: (e: React.FocusEvent<HTMLButtonElement, Element>) => void`
280
+ - `isOpen: boolean`
281
+ - `isMultiple?: boolean`
282
+ - `disabled?: boolean`
283
+ - `children?: React.ReactNode`
284
+ - `aria-labelledby?: string` — Id of the element labelling the toggle.
285
+ - `aria-controls?: string` — Id of the listbox the toggle controls.
286
+ - `ariaLabelledby?: string` — Id of the element labelling the toggle.
287
+ - `ariaControls?: string` — Id of the listbox the toggle controls.
288
+ - `colors?: (string | undefined)[]`
289
+ - `selectedCount?: number`
290
+ - `status?: 'error' | 'success' | 'basic'`
291
+ - _plus native element attributes_
292
+
293
+ #### FileAttachment
294
+ Read-only row displaying a single attached/uploading file
295
+
296
+ - `file: FileAttachmentFile`
297
+ - `size?: 'small' | 'large'`
298
+ - `progress?: number`
299
+ - `progressDisplay?: 'text' | 'bar'`
300
+ - `uploadingText?: string`
301
+ - `uploadedText?: string`
302
+ - `showDescription?: boolean`
303
+ - `icon?: 'reset' | 'archive' | 'arrow-down' | 'arrow-up' | …(223 more — full list under "Icon.name")`
304
+ - `disabled?: boolean` — Mutes the attachment and disables the remove button.
305
+ - `isDisabled?: boolean`
306
+ - `onRemove?: () => void`
307
+
308
+ #### FileUpload
309
+ File input component with optional drag-and-drop support
310
+
311
+ - `label?: string`
312
+ - `placeholder?: string`
313
+ - `helperText?: string`
314
+ - `actionText?: string`
315
+ - `error?: string`
316
+ - `disabled?: boolean`
317
+ - `allowedFormats?: string[]`
318
+ - `maxFileSize?: number`
319
+ - `isMultiFile?: boolean`
320
+ - `maxFiles?: number`
321
+ - `withDropArea?: boolean`
322
+ - `uploadedSectionTitle?: string`
323
+ - `uploadProgress?: FileUploadProgress` — Upload progress for files in the multi-file list (`isMultiFile`). FileUpload only handles local selection,…
324
+ - `showFileAttachment?: boolean` — Single-file mode only (`!isMultiFile`, ignored when `withDropArea` is set — its own selected-file view…
325
+ - `value?: File | File[]`
326
+ - `onChange?: (files: File[]) => void`
327
+ - `onFileRejected?: (file: File, reason: FileRejectionReason) => void`
328
+
329
+ #### IconButton
330
+ Square icon-only button for icon actions
331
+
332
+ - `icon: 'reset' | 'archive' | 'arrow-down' | 'arrow-up' | …(223 more — full list under "Icon.name")` — Icon name from the UI kit Icon component (e.g. "edit", "bin", "search")
333
+ - `onClick?: () => void` — Click handler. Optional — a `type="submit"` icon button inside a form needs no handler of its own.
334
+ - `type?: 'button' | 'reset' | 'submit'` `= 'button'` — HTML button type attribute - `button`: Standard button (default) - `submit`: Form submission button -…
335
+ - `size?: keyof MainSizes` `= 'small'` — Size of the button and its icon. Matches `Button`'s size scale so the two line up in a toolbar. - `small`:…
336
+ - `aria-label?: string` — Accessible label for screen readers. When omitted, the raw icon name is used.
337
+ - `title?: string` — Tooltip text; when provided, uses the kit's Tooltip on hover.
338
+ - `disabled?: boolean` `= false` — Disables the button and applies disabled styles
339
+ - `transparent?: boolean` `= false` — Use transparent background instead of theme grey
340
+ - `styles?: { button, iconColor, icon }` — Custom styles in one prop. Each key is applied where it belongs: - `button`: Emotion styles merged with…
341
+
342
+ #### Input
343
+ Text input component with validation and status indicators
344
+
345
+ - `name: string` — Name attribute for the input, required for React Hook Form integration
346
+ - `status?: keyof InputStatusColors` `= 'basic'` — Visual validation status of the input - `basic`: Default state, no validation feedback - `error`: Error state…
347
+ - `type?: string` `= 'text'` — HTML input type attribute Supports all standard HTML input types (text, email, password, number, etc.)
348
+ - `placeholder?: string` — Placeholder text displayed when input is empty
349
+ - `validationSchema?: Record<string, unknown>` — React Hook Form validation schema Object containing validation rules (required, minLength, pattern, etc.)
350
+ - `disabled?: boolean` `= false` — Whether the input is disabled Disabled inputs cannot be edited and appear visually muted
351
+ - `wrapperClassName?: string` — Custom CSS class name for the wrapper container
352
+ - `helperClassName?: string` — Custom CSS class name for the helper text container
353
+ - `startElement?: ReactElement<unknown, string | JSXElementConstructor<any>>` — React element to display before the input (e.g., icon) Commonly an Icon component
354
+ - `endElement?: ReactElement<unknown, string | JSXElementConstructor<any>>` — React element to display after the input (e.g., icon or action button) Commonly an Icon component or clear…
355
+ - `inputProps?: ExtendedInputProps` — Additional props to pass directly to the underlying input element Includes all standard HTML input attributes
356
+ - `errorTooltip?: string` — Tooltip text to display when hovering over error icon Only visible when status is 'error' and showStatusIcon…
357
+ - `successTooltip?: string` — Tooltip text to display when hovering over success icon Only visible when status is 'success' and…
358
+ - `showHelperText?: boolean` `= false` — Whether to show helper text below the input Displays validation errors, helper text, or character count
359
+ - `showStatusIcon?: boolean` `= true` — Whether to show status icon (error/success) inside the input Hidden when endElement is provided or input is…
360
+ - `showBorders?: boolean` `= true` — Whether to show borders around the input
361
+ - `helperText?: string` — Helper text to display below the input Only shown when showHelperText is true and no errors are present
362
+ - `maxLength?: number` — Maximum character length for the input When provided with showHelperText, displays character count (e.g., "45…
363
+ - `errors?: FieldError` — React Hook Form field error object Used to display validation error messages
364
+ - `onKeyUp?: KeyboardEventHandler<HTMLInputElement>` — Keyboard event handler for keyup events Also used internally for character counting when maxLength is provided
365
+ - `onStartElementClick?: (event: BaseSyntheticEvent) => void` — Click handler for the start element Useful for making start icons interactive (e.g., toggle password…
366
+ - `onEndElementClick?: (event: BaseSyntheticEvent) => void` — Click handler for the end element Useful for making end icons interactive (e.g., clear button)
367
+
368
+ #### MultipleDropdown
369
+ Dropdown component for multi-select and single-select
370
+
371
+ - `selectedItems?: DropdownOptionProps[]` `= []` — List of currently selected items Each entry must match one of the DropdownOption values
372
+ - `isMultiple?: boolean` `= true` — Enables multi-select mode — each option toggles independently. When `false` the dropdown behaves like a…
373
+ - `disabled?: boolean` `= false` — Disables the dropdown, preventing any user interaction
374
+ - `isDisabled?: boolean` `= false` — Disables the dropdown, preventing any user interaction
375
+ - `placeholder?: string` `= 'Select something'` — Placeholder shown in the toggle button when no item is selected
376
+ - `showPlaceholder?: boolean` `= true` — When `true` the placeholder value is included in the displayed list. Set to `false` to hide it and show only…
377
+ - `children?: ReactNode` — DropdownOption components to render as selectable items
378
+ - `isOpen?: boolean` — Controlled open state — when provided, overrides internal open/close logic
379
+ - `label?: string` — Label prefix shown in the toggle button before the selected value(s) e.g. `label="Strategy"` renders…
380
+ - `onChange?: (selectedItem: string | number, isSelected: boolean) => void` — Callback fired when an option is toggled
381
+ - `maxHeight?: number` `= 200` — Max height (px) of the options list; overflow scrolls.
382
+ - `width?: string | number` — Width of the dropdown. Can be a number (pixels) or a string (any CSS value, e.g. `'100%'`).
383
+
384
+ #### MultipleDropdownNotification
385
+
386
+ _No library-specific props._
387
+ - _plus native element attributes_
388
+
389
+ #### MultipleDropdownOptions
390
+
391
+ - `aria-labelledby?: string` — ARIA label reference Associates the listbox with its label
392
+ - `ariaLabelledby?: string` — ARIA label reference Associates the listbox with its label
393
+ - `id?: string`
394
+ - `children?: ReactNode`
395
+
396
+ #### NumberField
397
+
398
+ - `id?: string`
399
+ - `value?: number`
400
+ - `defaultValue?: number`
401
+ - `description?: ReactNode`
402
+ - `label?: ReactNode`
403
+ - `success?: ReactNode`
404
+ - `error?: ReactNode`
405
+ - `status?: 'error' | 'success' | 'basic'` `= 'basic'` — Visual validation status of the input - `basic`: Default state, no validation feedback - `error`: Error state…
406
+ - `numberFormat?: { currency, currencyDisplay, unit, unitDisplay, signDisplay, minimumIntegerDigits, …+3 }`
407
+ - `onChange?: (value: number) => void`
408
+ - `name: string` — Name attribute for the input, required for React Hook Form integration
409
+ - `type?: string` `= 'text'` — HTML input type attribute Supports all standard HTML input types (text, email, password, number, etc.)
410
+ - `placeholder?: string` — Placeholder text displayed when input is empty
411
+ - `validationSchema?: Record<string, unknown>` — React Hook Form validation schema Object containing validation rules (required, minLength, pattern, etc.)
412
+ - `disabled?: boolean` `= false` — Whether the input is disabled Disabled inputs cannot be edited and appear visually muted
413
+ - `wrapperClassName?: string` — Custom CSS class name for the wrapper container
414
+ - `helperClassName?: string` — Custom CSS class name for the helper text container
415
+ - `startElement?: ReactElement<unknown, string | JSXElementConstructor<any>>` — React element to display before the input (e.g., icon) Commonly an Icon component
416
+ - `endElement?: ReactElement<unknown, string | JSXElementConstructor<any>>` — React element to display after the input (e.g., icon or action button) Commonly an Icon component or clear…
417
+ - `inputProps?: ExtendedInputProps` — Additional props to pass directly to the underlying input element Includes all standard HTML input attributes
418
+ - `errorTooltip?: string` — Tooltip text to display when hovering over error icon Only visible when status is 'error' and showStatusIcon…
419
+ - `successTooltip?: string` — Tooltip text to display when hovering over success icon Only visible when status is 'success' and…
420
+ - `showHelperText?: boolean` `= false` — Whether to show helper text below the input Displays validation errors, helper text, or character count
421
+ - `showStatusIcon?: boolean` `= true` — Whether to show status icon (error/success) inside the input Hidden when endElement is provided or input is…
422
+ - `showBorders?: boolean` `= true` — Whether to show borders around the input
423
+ - `helperText?: string` — Helper text to display below the input Only shown when showHelperText is true and no errors are present
424
+ - `maxLength?: number` — Maximum character length for the input When provided with showHelperText, displays character count (e.g., "45…
425
+ - `errors?: FieldError` — React Hook Form field error object Used to display validation error messages
426
+ - `onKeyUp?: KeyboardEventHandler<HTMLInputElement>` — Keyboard event handler for keyup events Also used internally for character counting when maxLength is provided
427
+ - `onStartElementClick?: (event: BaseSyntheticEvent) => void` — Click handler for the start element Useful for making start icons interactive (e.g., toggle password…
428
+ - `onEndElementClick?: (event: BaseSyntheticEvent) => void` — Click handler for the end element Useful for making end icons interactive (e.g., clear button)
429
+
430
+ #### Radio
431
+ Radio button component for single selection
432
+
433
+ - `id?: string` — Unique identifier for the radio input If not provided, a unique ID will be auto-generated
434
+ - `value: string` — Value of the radio button Passed to onChange callback when selected
435
+ - `name?: string` `= ''` — Name attribute for grouping radio buttons Radio buttons with the same name form a group
436
+ - `checked?: boolean` — Whether the radio button is checked Use for controlled component pattern
437
+ - `isChecked?: boolean` — Whether the radio button is checked
438
+ - `disabled?: boolean` `= false` — Whether the radio button is disabled Disabled radios cannot be selected
439
+ - `isDisabled?: boolean` `= false` — Whether the radio button is disabled
440
+ - `isRequired?: boolean` `= false` — Whether the radio button is required for form validation
441
+ - `onChange?: (value: string) => void` — Callback function called when radio is selected Receives the radio's value as parameter
442
+ - `text?: string` — Label text displayed next to the radio button
443
+ - `color?: 'custom' | 'primary' | 'success'` `= 'primary'` — Palette-based color variant. - `primary` — blue (uses `palette.primary`) - `success` — green (uses…
444
+ - `colors?: { default?: string; hovered?: string; disabled?: string; }` — Fine-grained color overrides — only applied when `color="custom"`. Allows overriding every interactive state…
445
+
446
+ #### RadioGroup
447
+
448
+ - `name: string`
449
+ - `isRequired?: boolean`
450
+ - `value?: string | number` — Selected value, for the controlled pattern. When provided, the parent owns the selection and the group only…
451
+ - `defaultValue?: string | number` — Initially selected value. Only used when neither `value` nor the deprecated `externalState` is provided —…
452
+ - `externalState?: string | number`
453
+ - `onChange: (value: string | number) => void`
454
+ - `children?: ReactElement<RadioProps, string | JSXElementConstructor<any>> | …(1 more)`
455
+ - `color?: 'custom' | 'primary' | 'success'` `= 'primary'` — Palette-based color variant applied to every Radio child. Individual Radio components can still override this…
456
+
457
+ #### SearchBox
458
+ Search input component with debounced callbacks
459
+
460
+ - `name: string` — Name attribute for the input, required for React Hook Form integration
461
+ - `status?: keyof InputStatusColors` `= 'basic'` — Visual validation status of the input - `basic`: Default state, no validation feedback - `error`: Error state…
462
+ - `type?: string` `= 'text'` — HTML input type attribute Supports all standard HTML input types (text, email, password, number, etc.)
463
+ - `placeholder?: string` — Placeholder text displayed when input is empty
464
+ - `validationSchema?: Record<string, unknown>` — React Hook Form validation schema Object containing validation rules (required, minLength, pattern, etc.)
465
+ - `disabled?: boolean` `= false` — Whether the input is disabled Disabled inputs cannot be edited and appear visually muted
466
+ - `wrapperClassName?: string` — Custom CSS class name for the wrapper container
467
+ - `helperClassName?: string` — Custom CSS class name for the helper text container
468
+ - `startElement?: ReactElement<unknown, string | JSXElementConstructor<any>>` — React element to display before the input (e.g., icon) Commonly an Icon component
469
+ - `endElement?: ReactElement<unknown, string | JSXElementConstructor<any>>` — React element to display after the input (e.g., icon or action button) Commonly an Icon component or clear…
470
+ - `inputProps?: ExtendedInputProps` — Additional props to pass directly to the underlying input element Includes all standard HTML input attributes
471
+ - `errorTooltip?: string` — Tooltip text to display when hovering over error icon Only visible when status is 'error' and showStatusIcon…
472
+ - `successTooltip?: string` — Tooltip text to display when hovering over success icon Only visible when status is 'success' and…
473
+ - `showHelperText?: boolean` `= false` — Whether to show helper text below the input Displays validation errors, helper text, or character count
474
+ - `showStatusIcon?: boolean` `= true` — Whether to show status icon (error/success) inside the input Hidden when endElement is provided or input is…
475
+ - `showBorders?: boolean` `= true` — Whether to show borders around the input
476
+ - `helperText?: string` — Helper text to display below the input Only shown when showHelperText is true and no errors are present
477
+ - `maxLength?: number` — Maximum character length for the input When provided with showHelperText, displays character count (e.g., "45…
478
+ - `errors?: FieldError` — React Hook Form field error object Used to display validation error messages
479
+ - `onKeyUp?: KeyboardEventHandler<HTMLInputElement>` — Keyboard event handler for keyup events Also used internally for character counting when maxLength is provided
480
+ - `onStartElementClick?: (event: BaseSyntheticEvent) => void` — Click handler for the start element Useful for making start icons interactive (e.g., toggle password…
481
+ - `onEndElementClick?: (event: BaseSyntheticEvent) => void` — Click handler for the end element Useful for making end icons interactive (e.g., clear button)
482
+ - `callback: (searchTerm: string) => void` — Callback function called when search is triggered Receives the current search term as parameter Triggered…
483
+ - `callbackDelay?: number` `= 500` — Debounce delay in milliseconds for search callback Prevents excessive API calls while user is typing
484
+ - `autoSearchTrigger?: boolean` `= true` — Whether to automatically trigger search on input change When false, search only triggers on Enter key press
485
+
486
+ #### SearchBoxCrossIcon
487
+
488
+ - `onClick: MouseEventHandler<HTMLButtonElement>`
489
+
490
+ #### SearchBoxInput
491
+
492
+ - `name: string` — Name attribute for the input, required for React Hook Form integration
493
+ - `status?: keyof InputStatusColors` `= 'basic'` — Visual validation status of the input - `basic`: Default state, no validation feedback - `error`: Error state…
494
+ - `type?: string` `= 'text'` — HTML input type attribute Supports all standard HTML input types (text, email, password, number, etc.)
495
+ - `placeholder?: string` — Placeholder text displayed when input is empty
496
+ - `validationSchema?: Record<string, unknown>` — React Hook Form validation schema Object containing validation rules (required, minLength, pattern, etc.)
497
+ - `disabled?: boolean` `= false` — Whether the input is disabled Disabled inputs cannot be edited and appear visually muted
498
+ - `wrapperClassName?: string` — Custom CSS class name for the wrapper container
499
+ - `helperClassName?: string` — Custom CSS class name for the helper text container
500
+ - `startElement?: ReactElement<unknown, string | JSXElementConstructor<any>>` — React element to display before the input (e.g., icon) Commonly an Icon component
501
+ - `endElement?: ReactElement<unknown, string | JSXElementConstructor<any>>` — React element to display after the input (e.g., icon or action button) Commonly an Icon component or clear…
502
+ - `inputProps?: ExtendedInputProps` — Additional props to pass directly to the underlying input element Includes all standard HTML input attributes
503
+ - `errorTooltip?: string` — Tooltip text to display when hovering over error icon Only visible when status is 'error' and showStatusIcon…
504
+ - `successTooltip?: string` — Tooltip text to display when hovering over success icon Only visible when status is 'success' and…
505
+ - `showHelperText?: boolean` `= false` — Whether to show helper text below the input Displays validation errors, helper text, or character count
506
+ - `showStatusIcon?: boolean` `= true` — Whether to show status icon (error/success) inside the input Hidden when endElement is provided or input is…
507
+ - `showBorders?: boolean` `= true` — Whether to show borders around the input
508
+ - `helperText?: string` — Helper text to display below the input Only shown when showHelperText is true and no errors are present
509
+ - `maxLength?: number` — Maximum character length for the input When provided with showHelperText, displays character count (e.g., "45…
510
+ - `errors?: FieldError` — React Hook Form field error object Used to display validation error messages
511
+ - `onKeyUp?: KeyboardEventHandler<HTMLInputElement>` — Keyboard event handler for keyup events Also used internally for character counting when maxLength is provided
512
+ - `onStartElementClick?: (event: BaseSyntheticEvent) => void` — Click handler for the start element Useful for making start icons interactive (e.g., toggle password…
513
+ - `onEndElementClick?: (event: BaseSyntheticEvent) => void` — Click handler for the end element Useful for making end icons interactive (e.g., clear button)
514
+
515
+ #### SearchBoxWrapper
516
+
517
+ _No library-specific props._
518
+ - _plus native element attributes_
519
+
520
+ #### Slider
521
+ A dual-thumb range slider component.
522
+
523
+ - `label?: string` — Optional label shown above the slider
524
+ - `min?: number` — Minimum value of the range
525
+ - `max?: number` — Maximum value of the range
526
+ - `step?: number` — Granularity of each step
527
+ - `value?: [number, number]` — Controlled [min, max] value pair
528
+ - `defaultValue?: [number, number]` — Uncontrolled initial [min, max] value pair
529
+ - `onChange?: (value: [number, number]) => void` — Called whenever either thumb changes
530
+ - `size?: keyof MainSizes` — Track / thumb size
531
+ - `withInputs?: boolean` — Render two number inputs above the slider instead of floating value labels.
532
+ - `valueLabelDisplay?: ValueLabelDisplay` — Control visibility of the floating value labels above the thumbs. - `'auto'` (default) — show on hover/focus…
533
+ - `disableSwap?: boolean` — Prevent the two thumbs from crossing each other — the moving thumb stops when it would reach the other thumb…
534
+ - `minDistance?: number` — Minimum gap enforced between the two thumb values. Only takes effect when `disableSwap` is `true`.
535
+ - `marks?: SliderMark[]` — Tick marks rendered below the track — like a speedometer scale. Each mark has a required `value` (must be…
536
+ - `disabled?: boolean`
537
+
538
+ #### SliderInputsRow
539
+
540
+ _No library-specific props._
541
+ - _plus native element attributes_
542
+
543
+ #### SliderLabel
544
+
545
+ _No library-specific props._
546
+ - _plus native element attributes_
547
+
548
+ #### SliderMarkItem
549
+ `leftCalc` uses the same calc() formula as `SliderValueLabel` so ticks are pixel-perfect under each thumb position.
550
+
551
+ - `leftCalc: string`
552
+ - _plus native element attributes_
553
+
554
+ #### SliderMarkLabel
555
+
556
+ _No library-specific props._
557
+ - _plus native element attributes_
558
+
559
+ #### SliderMarksRow
560
+
561
+ _No library-specific props._
562
+ - _plus native element attributes_
563
+
564
+ #### SliderMarkTick
565
+
566
+ _No library-specific props._
567
+ - _plus native element attributes_
568
+
569
+ #### SliderNumberInput
570
+
571
+ _No library-specific props._
572
+ - _plus native element attributes_
573
+
574
+ #### SliderRangeInput
575
+ `sliderSize` is used instead of `size` because `<input size>` is a built-in HTML attribute typed as `number`, which would conflict with our `SliderSize` string union and…
576
+
577
+ - `sliderSize: keyof MainSizes`
578
+ - `zIndex?: number`
579
+ - _plus native element attributes_
580
+
581
+ #### SliderRoot
582
+
583
+ _No library-specific props._
584
+ - _plus native element attributes_
585
+
586
+ #### SliderTrackBg
587
+
588
+ - `size: keyof MainSizes`
589
+ - _plus native element attributes_
590
+
591
+ #### SliderTrackFill
592
+
593
+ - `left: number`
594
+ - `width: number`
595
+ - `isDisabled: boolean`
596
+ - `size: keyof MainSizes`
597
+ - _plus native element attributes_
598
+
599
+ #### SliderTrackRow
600
+
601
+ _No library-specific props._
602
+ - _plus native element attributes_
603
+
604
+ #### SliderTrackWrapper
605
+
606
+ _No library-specific props._
607
+ - _plus native element attributes_
608
+
609
+ #### SliderValueLabel
610
+ `leftCalc` is a CSS `calc()` string that aligns the label center precisely over the thumb, accounting for the thumb half-size offset at track edges.
611
+
612
+ - `leftCalc: string`
613
+ - `isVisible: boolean`
614
+ - _plus native element attributes_
615
+
616
+ #### SliderValueLabelsContainer
617
+
618
+ _No library-specific props._
619
+ - _plus native element attributes_
620
+
621
+ #### Switch
622
+ Toggle switch component for binary states
623
+
624
+ - `label: string` — Accessible label for the switch Used as aria-label for screen readers
625
+ - `disabled?: boolean` `= false` — Whether the switch is disabled Disabled switches cannot be toggled. The off state becomes…
626
+ - `isDisabled?: boolean` `= false` — Whether the switch is disabled
627
+ - `color?: 'custom' | 'primary' | 'success'` `= 'primary'` — Palette-based color variant. - `primary` — blue (uses `palette.primary`) - `success` — green (uses…
628
+ - `colors?: { on?: string; offOutline?: string; }` — Fine-grained color overrides — only applied when `color="custom"`.
629
+
630
+ #### Textarea
631
+ Multi-line text input component
632
+
633
+ - `name: string` — Name attribute for the textarea, required for React Hook Form integration
634
+ - `placeholder?: string` — Placeholder text displayed when textarea is empty
635
+ - `validationSchema?: Record<string, unknown>` — React Hook Form validation schema Object containing validation rules (required, maxLength, pattern, etc.)
636
+ - `disabled?: boolean` `= false` — Whether the textarea is disabled Disabled textarea elements cannot be edited
637
+ - `readOnly?: boolean` `= false` — Whether the textarea is read-only Read-only textarea elements can be focused and scrolled but not edited
638
+ - `rows?: number` `= 10` — Number of visible text rows Determines the initial height of the textarea
639
+ - `maxLength?: number` — Maximum character length for the textarea Use with setCountChar callback to track character count
640
+ - `status?: 'custom' | 'error' | 'success' | 'basic'` `= 'basic'` — Visual validation status (aligns with Input/TextField palette behavior). - `basic`: default border/outline…
641
+ - `title?: string` — Title attribute for the textarea element Provides tooltip text on hover
642
+ - `id?: string` — HTML id attribute for the textarea (e.g. for label htmlFor). Defaults to `formElement-${name}` when not…
643
+ - `onPaste?: ClipboardEventHandler<HTMLTextAreaElement>` — Paste event handler Fired when content is pasted into the textarea
644
+ - `setCountChar?: ReactEventHandler` — Callback function to track character count Called with the event when content changes Useful for displaying…
645
+
646
+ #### TextField
647
+ Ready-to-use text input (single- or multi-line) with label and validation UI.
648
+
649
+ - `label?: string` — Label text displayed above the input field
650
+ - `errors?: FieldError` — React Hook Form field error object Used to display validation error messages
651
+ - `success?: boolean` `= false` — Whether to display success state styling When true, status is set to 'success'
652
+ - `helperText?: string` — Helper text displayed below the input Shown when no errors are present
653
+ - `rows?: number` `= undefined (uses Textarea default)` — Number of rows for multi-row text fields Only applies when `multirow` is true
654
+ - `multirow?: boolean` `= false` — Whether to render as multi-line textarea When true, uses Textarea component; when false, uses Input component
655
+ - `maxLength?: number` — Maximum character length When provided, displays character count (e.g., "45 / 500")
656
+ - `name: string` — Name attribute for the input, required for React Hook Form integration
657
+ - `status?: keyof InputStatusColors` `= 'basic'` — Visual validation status of the input - `basic`: Default state, no validation feedback - `error`: Error state…
658
+ - `type?: string` `= 'text'` — HTML input type attribute Supports all standard HTML input types (text, email, password, number, etc.)
659
+ - `placeholder?: string` — Placeholder text displayed when input is empty
660
+ - `validationSchema?: Record<string, unknown>` — React Hook Form validation schema Object containing validation rules (required, minLength, pattern, etc.)
661
+ - `disabled?: boolean` `= false` — Whether the input is disabled Disabled inputs cannot be edited and appear visually muted
662
+ - `wrapperClassName?: string` — Custom CSS class name for the wrapper container
663
+ - `helperClassName?: string` — Custom CSS class name for the helper text container
664
+ - `startElement?: ReactElement<unknown, string | JSXElementConstructor<any>>` — React element to display before the input (e.g., icon) Commonly an Icon component
665
+ - `endElement?: ReactElement<unknown, string | JSXElementConstructor<any>>` — React element to display after the input (e.g., icon or action button) Commonly an Icon component or clear…
666
+ - `inputProps?: ExtendedInputProps` — Additional props to pass directly to the underlying input element Includes all standard HTML input attributes
667
+ - `errorTooltip?: string` — Tooltip text to display when hovering over error icon Only visible when status is 'error' and showStatusIcon…
668
+ - `successTooltip?: string` — Tooltip text to display when hovering over success icon Only visible when status is 'success' and…
669
+ - `showHelperText?: boolean` `= false` — Whether to show helper text below the input Displays validation errors, helper text, or character count
670
+ - `showStatusIcon?: boolean` `= true` — Whether to show status icon (error/success) inside the input Hidden when endElement is provided or input is…
671
+ - `showBorders?: boolean` `= true` — Whether to show borders around the input
672
+ - `onKeyUp?: KeyboardEventHandler<HTMLInputElement>` — Keyboard event handler for keyup events Also used internally for character counting when maxLength is provided
673
+ - `onStartElementClick?: (event: BaseSyntheticEvent) => void` — Click handler for the start element Useful for making start icons interactive (e.g., toggle password…
674
+ - `onEndElementClick?: (event: BaseSyntheticEvent) => void` — Click handler for the end element Useful for making end icons interactive (e.g., clear button)
675
+
676
+ #### Typeahead
677
+ Advanced autocomplete search component with dropdown functionality
678
+
679
+ - `value?: TypeaheadValue[]` — Controlled selected values (array, even in single-select mode). When provided, controls the selection…
680
+ - `defaultValue?: TypeaheadValue[]` — Initially selected values, for uncontrolled mode.
681
+ - `selectedItems?: TypeaheadValue[]` — Controlled selected items (array of values)
682
+ - `defaultSelectedItems?: TypeaheadValue[]` — Default selected items for uncontrolled mode
683
+ - `isMultiple?: boolean` `= false` — Enable multiple selection mode When true, allows selecting multiple options
684
+ - `disabled?: boolean` `= false` — Whether the component is disabled Disabled typeahead cannot be interacted with
685
+ - `isDisabled?: boolean` `= false` — Whether the component is disabled
686
+ - `children?: ReactNode` — TypeaheadOption components as children Each child should be a TypeaheadOption component
687
+ - `popoverClassName?: string` — Custom CSS class name for the popover container
688
+ - `optionsClassName?: string` — Custom CSS class name for the options list
689
+ - `wrapperClassName?: string` — Custom CSS class name for the wrapper container
690
+ - `width?: string | number` `= 300` — Width of the component Can be a number (pixels) or string (CSS value)
691
+ - `isOpen?: boolean` — Controlled open state When provided, controls dropdown open/closed state externally
692
+ - `startIcon?: ReactNode` — Icon or element to display at the start of the input
693
+ - `endIcon?: ReactNode` — Icon or element to display at the end of the input
694
+ - `startIconClassName?: string` — Custom CSS class name for the start icon
695
+ - `endIconClassName?: string` — Custom CSS class name for the end icon
696
+ - `name?: string` `= 'typeahead-search'` — Form field name (required for React Hook Form integration)
697
+ - `label?: string` — Label text displayed above the input
698
+ - `helperText?: string` — Helper text displayed below the input
699
+ - `error?: FieldError` — Field error from React Hook Form
700
+ - `success?: boolean` `= false` — Whether to show success state
701
+ - `validationSchema?: Record<string, unknown>` — Validation schema for React Hook Form Used for form validation rules
702
+ - `placeholder?: string | null` `= 'Select something'` — Placeholder text for the input
703
+ - `filterOptions?: boolean` `= true` — Whether to filter options based on input When false, all options are always shown
704
+ - `autoSelect?: boolean` `= true` — Whether to automatically select the first option on filter
705
+ - `allowCustomValues?: boolean` `= true` — Allow adding custom values not in the options list. When true, the current input is shown as the first…
706
+ - `onChange?: (selectedItem: TypeaheadValue, isSelected: boolean) => void` — Callback fired when an option is selected/deselected Receives the selected item value and whether it's…
707
+ - `onClearAll?: () => void` — Callback fired when "Clear All" is clicked (multiple mode)
708
+ - `onRemoveSelectedClick?: (selectedItem: TypeaheadValue) => void` — Callback fired when a selected item's remove button is clicked Receives the item value to be removed
709
+ - `onEmptyChange?: (isEmpty?: boolean) => void` — Callback fired when the selection becomes empty or non-empty Receives a boolean indicating if selection is…
710
+ - `renderOption?: (data: { value: string | number; input: string; label: string; }) => Re…` — Custom render function for options Allows customizing the appearance of each option Receives value, input…
711
+
712
+ #### TypeaheadItemIcon
713
+
714
+ - `name: 'reset' | 'archive' | 'arrow-down' | 'arrow-up' | …(223 more — full list under "Icon.name")` — Which icon to render. Type-checked against the generated icon list, so a name that does not exist is a…
715
+ - `tooltip?: string` — Tooltip text shown on hover. Also becomes the icon's `aria-label`.
716
+ - `size?: number` — Width and height in px. Icons are square, so one value sets both.
717
+ - _plus native element attributes_
718
+
719
+ #### TypeaheadItemImage
720
+
721
+ _No library-specific props._
722
+ - _plus native element attributes_
723
+
724
+ #### TypeaheadOption
725
+ Props for TypeaheadOption component Record type that allows any string or number properties. Common properties include: value, label, children, avatar, etc.
726
+
727
+ - `isActive?: boolean` — Whether this option is currently selected
728
+ - `disabled?: boolean` — Whether this option is disabled
729
+ - `isDisabled?: boolean` — Whether this option is disabled
730
+ - `value?: string | number` — Value of the option (must be unique)
731
+ - `label?: string | number` — Label text for the option Used for filtering and display
732
+ - `children?: ReactNode` — Content to display in the option Can be custom React nodes
733
+ - `avatar?: ReactNode` — Avatar or icon to display before the option content
734
+ - `onClick?: (e: React.MouseEvent<HTMLElement>) => void` — Click handler for the option
735
+ - `isCustomValue?: boolean` — When true, option is a user-typed custom value (shown first, highlighted in blue)
736
+ - `role?: string` — ARIA role for the option (e.g. 'option')
737
+ - `aria-selected?: boolean` — ARIA selected state
738
+
739
+ #### TypeaheadOptions
740
+
741
+ - `children?: ReactNode`
742
+ - `noItemsMessage?: string`
743
+
744
+ ### Form Structure
745
+
746
+ #### Filters
747
+
748
+ - `checkboxData: TableFilterConfig`
749
+ - `updatedCheckboxData?: TableFilterConfig`
750
+ - `handleCancel?: () => void`
751
+ - `handleSubmit?: (data: Record<string, string[]>) => void`
752
+ - `handleClear?: () => void`
753
+ - `handleDropdownChange?: (data: { groupName: string; name: string | number; checked: boolean; })…`
754
+
755
+ #### FiltersMultiSelect
756
+
757
+ - `children: ReactNode`
758
+ - `description?: string`
759
+ - `emptyNode?: ReactNode`
760
+ - `error?: string`
761
+ - `icon?: ReactNode`
762
+ - `inputProps?: ExtendedInputProps`
763
+ - `fieldProps?: FieldProps`
764
+ - `label?: string`
765
+ - `placeholder?: string`
766
+ - `searchable?: boolean`
767
+ - `selectedFilters?: SelectedFilter[]`
768
+ - `store?: { open, opened, selectedFilters, search, toggleDropdown, selectFilters, …+3 }`
769
+ - `success?: string`
770
+ - `badgeClassName?: string`
771
+ - `inputClassName?: string`
772
+ - `wrapperClassName?: string`
773
+ - `onChange?: (value: SelectedFilter[]) => void`
774
+ - `register?: UseFormRegister<FieldValues>`
775
+ - `disabled?: boolean` `= false` — Whether the field is disabled Disabled fields appear muted and cannot be interacted with
776
+ - `status?: 'error' | 'success' | 'basic'` `= 'basic'` — Validation status of the field - `basic`: Default state, no validation feedback - `error`: Error state with…
777
+
778
+ #### FiltersMultiSelectEmpty
779
+
780
+ - `children?: ReactNode`
781
+ - _plus native element attributes_
782
+
783
+ #### FiltersMultiSelectOption
784
+
785
+ - `filter: Filter`
786
+ - `children: ReactNode`
787
+ - `selected?: boolean`
788
+
789
+ #### FiltersMultiSelectOptions
790
+
791
+ - `children: React.ReactNode`
792
+ - _plus native element attributes_
793
+
794
+ #### Form
795
+ Styled `<form>` element that lays its children out as a wrapping flex row.
796
+
797
+ _No library-specific props._
798
+ - _plus native element attributes_
799
+
800
+ #### FormAction
801
+
802
+ _No library-specific props._
803
+ - _plus native element attributes_
804
+
805
+ #### FormCheckbox<T>
806
+
807
+ - `text?: ReactNode` — Label text or custom React node to display next to the checkbox Can be a string, number, or any React node
808
+ - `disabled?: boolean` `= false` — Whether the checkbox is disabled Disabled checkboxes cannot be interacted with and appear visually muted
809
+ - `isDisabled?: boolean` `= false` — Whether the checkbox is disabled
810
+ - `id?: string` — Unique identifier for the checkbox input element If not provided, a unique ID will be auto-generated
811
+ - `checked?: boolean` — Checked state, for the controlled pattern. When provided, the parent owns the value: the checkbox renders…
812
+ - `externalState?: boolean` — External state control - allows parent component to control checkbox state When provided, the checkbox…
813
+ - `defaultChecked?: boolean` `= false` — Initial checked state when component mounts Only used for uncontrolled checkboxes
814
+ - `initialState?: boolean` `= false` — Initial checked state when component mounts
815
+ - `isIndeterminate?: boolean` `= false` — Indeterminate state - represents a partially selected state Commonly used in tree structures or "select all"…
816
+ - `isRequired?: boolean` `= false` — Whether the checkbox is required for form validation
817
+ - `color?: 'custom' | 'primary' | 'success'` `= 'primary'` — Color variant of the checkbox — controls the checked and focus-state colors. Sourced from `theme.palette`: -…
818
+ - `name: Path<T>`
819
+ - `control: Control<T>`
820
+
821
+ #### FormGroup
822
+
823
+ _No library-specific props._
824
+ - _plus native element attributes_
825
+
826
+ #### FormHelperText
827
+
828
+ - `children: ReactNode`
829
+ - `role?: string`
830
+ - `status?: 'custom' | 'error' | 'success' | 'basic'`
831
+ - `disabled?: boolean`
832
+ - `data-testid?: string`
833
+
834
+ #### FormRadioGroup<T>
835
+
836
+ - `children?: ReactElement<RadioProps, string | JSXElementConstructor<any>> | …(1 more)`
837
+ - `externalState?: string | number`
838
+ - `isRequired?: boolean`
839
+ - `color?: 'custom' | 'primary' | 'success'` `= 'primary'` — Palette-based color variant applied to every Radio child. Individual Radio components can still override this…
840
+ - `value?: string | number` — Selected value, for the controlled pattern. When provided, the parent owns the selection and the group only…
841
+ - `defaultValue?: string | number` — Initially selected value. Only used when neither `value` nor the deprecated `externalState` is provided —…
842
+ - `name: Path<T>`
843
+ - `control: Control<T>`
844
+
845
+ ### Data Display
846
+
847
+ #### Avatar
848
+ Circular component for displaying user identity.
849
+
850
+ - `size?: AvatarSizes` `= AvatarSizes.medium` — Avatar size variant.
851
+ - `color?: string` — Background color of the placeholder circle. Accepts a `theme.colors` key (e.g. `'purple'`, `'green'`) or any…
852
+ - `text?: string` — One or two characters displayed inside the colored placeholder. Only the first two characters are rendered.
853
+ - `image?: string` — URL of the user's profile photo. When provided, the image is displayed instead of the placeholder.
854
+ - `border?: boolean` — Shows or hides the avatar border. Defaults to visible for image avatars and hidden otherwise.
855
+ - `borderColor?: string` — Border color. Accepts a `theme.colors` key or any CSS color string.
856
+
857
+ #### Badge
858
+
859
+ - `size?: keyof MainSizes`
860
+ - _plus native element attributes_
861
+
862
+ #### BarGaugeChart
863
+
864
+ - `title?: ReactNode`
865
+ - `widgetCardProps?: WidgetCardProps`
866
+ - `bars?: GaugeBarProps[]`
867
+ - `features?: BarGaugeChartFeature[]`
868
+ - `wrapperProps?: { theme, as, direction, alignItems, justifyContent, fade, …+2 }`
869
+
870
+ #### BarGaugeChartComponent
871
+
872
+ - `title?: ReactNode`
873
+ - `widgetCardProps?: WidgetCardProps`
874
+ - `bars?: GaugeBarProps[]`
875
+ - `features?: BarGaugeChartFeature[]`
876
+ - `wrapperProps?: { theme, as, direction, alignItems, justifyContent, fade, …+2 }`
877
+
878
+ #### BarLineComplexChart
879
+
880
+ - `layout?: Partial<Layout>`
881
+ - `cardProps?: Omit<WidgetCardProps, 'children'>`
882
+ - `features?: BarLineComplexChartFeatures[]`
883
+ - `data: BarLineChartItem[]`
884
+ - `lineShape?: 'linear' | 'spline' | 'hv' | 'vh' | 'hvh' | 'vhv'`
885
+ - `width?: string`
886
+ - `height?: string`
887
+ - `title?: ReactNode`
888
+ - `maxVisibleBars?: number`
889
+ - `maxVisibleLines?: number`
890
+ - `container?: Element | DocumentFragment`
891
+ - `isFullscreenModeInitial?: boolean`
892
+ - `systemModeBarButtons?: ModeBarDefaultButtons[]`
893
+ - `customModeBarButtons?: { items: Array<Plotly.ModeBarButtonAny>; position: 'end' | 'start'; }`
894
+ - `onChange?: (name: string | number, isSelected: boolean) => void`
895
+ - `onFullscreenModeChange?: (isFullscreenMode: boolean) => void`
896
+ - _plus native element attributes_
897
+
898
+ #### BigNumberChart
899
+
900
+ - `data: { x: AllowedValue; y: AllowedValue; }[]`
901
+ - `interactive?: boolean`
902
+ - `title?: ReactNode`
903
+ - `widgetCardProps?: WidgetCardProps`
904
+ - `trendLineProps?: Omit<TrendLineProps, 'data' | 'height' | 'width'>`
905
+ - `features?: BigNumberChartFeatures[]`
906
+ - `valueFormat?: (value: Datum) => React.ReactNode`
907
+
908
+ #### BigNumberChartComponent
909
+
910
+ - `data: { x: AllowedValue; y: AllowedValue; }[]`
911
+ - `interactive?: boolean`
912
+ - `title?: ReactNode`
913
+ - `widgetCardProps?: WidgetCardProps`
914
+ - `trendLineProps?: Omit<TrendLineProps, 'data' | 'height' | 'width'>`
915
+ - `features?: BigNumberChartFeatures[]`
916
+ - `valueFormat?: (value: Datum) => React.ReactNode`
917
+
918
+ #### CandlestickChart
919
+
920
+ - `data: CandlestickChartData`
921
+ - `style?: CandlestickStyle`
922
+ - `title?: ReactNode`
923
+ - `features?: CandlestickChartFeatures[]`
924
+ - `widgetCardProps?: WidgetCardProps`
925
+ - _plus native element attributes_
926
+
927
+ #### CandlestickChartComponent
928
+
929
+ - `data: CandlestickChartData`
930
+ - `style?: CandlestickStyle`
931
+ - `title?: ReactNode`
932
+ - `features?: CandlestickChartFeatures[]`
933
+ - `widgetCardProps?: WidgetCardProps`
934
+ - _plus native element attributes_
935
+
936
+ #### Card
937
+ Elevated surface that groups related content.
938
+
939
+ - `noShadow?: boolean` — Drops the drop shadow, leaving a flat surface. Cards are elevated by default — there is no numeric elevation…
940
+ - `children: ReactNode` — Card body. Usually `CardHeader` followed by `CardContent`, but any content is accepted.
941
+ - `onClick?: () => void` — Makes the whole card activatable. Passing this **changes the rendered element from `div` to `button`**, which…
942
+
943
+ #### CardBase
944
+
945
+ - `noShadow?: boolean`
946
+ - _plus native element attributes_
947
+
948
+ #### CardContent
949
+ Padded body region of a `Card`.
950
+
951
+ - `children: ReactNode` — Body content of the card.
952
+ - `style?: CSSProperties`
953
+ - `direction?: 'row' | 'row-reverse' | 'column' | 'column-reverse'` — `flex-direction` for the body. Defaults to a row, so vertically stacked content needs `"column"`.
954
+ - `aria-labelledby?: string` — Id of the element labelling this content region.
955
+ - `ariaLabelledby?: string` — Id of the element labelling this content region.
956
+ - `role?: string`
957
+
958
+ #### CardHeader
959
+ Title row for a `Card`.
960
+
961
+ - `children: ReactNode` — Header content — normally the card title.
962
+ - `icon?: ReactNode` — Badge rendered overhanging the header's top-left corner, outside the card bounds. For an icon inline with the…
963
+ - `transparent?: boolean` — Removes the header's background fill.
964
+
965
+ #### CardList<ItemType>
966
+ UI Component that renders a list of items with a custom render function
967
+
968
+ - `title: string`
969
+ - `items: ItemType[]`
970
+ - `renderItem: (item: ItemType) => React.ReactNode`
971
+
972
+ #### ChartBackground
973
+
974
+ _No library-specific props._
975
+
976
+ #### Chip
977
+ Compact component for tags, labels, and removable items.
978
+
979
+ - `label: ReactNode` — Main text content of the chip Can be a string, number, or React node
980
+ - `title?: ReactNode` — Optional title/heading text displayed before the label Useful for chips with additional context
981
+ - `variant?: ChipVariant` `= 'filled'` — Visual style variant - `filled`: Solid background (default) - `outlined`: Transparent with border
982
+ - `color?: ChipColor` `= 'default'` — Color theme for the chip. Semantic colors read from `theme.palette`, so palette overrides in a custom theme…
983
+ - `size?: ChipSize` `= 'medium'` — Size of the chip
984
+ - `disabled?: boolean` `= false` — Whether the chip is disabled Disabled chips cannot be clicked or deleted
985
+ - `icon?: 'reset' | 'archive' | 'arrow-down' | 'arrow-up' | …(223 more — full list under "Icon.name")` — Icon name to display before the label Uses the Icon component internally Defaults to 'plus' if showIcon is…
986
+ - `avatar?: ReactNode` — Avatar component or image to display before the label Takes precedence over icon if both are provided
987
+ - `onDelete?: MouseEventHandler<HTMLButtonElement>` — Delete button click handler When provided, a delete icon button appears on the chip Keyboard: Delete or…
988
+ - `deleteIcon?: 'reset' | 'archive' | 'arrow-down' | 'arrow-up' | …(223 more — full list under "Icon.name")` `= 'cross'` — Custom icon name for the delete button
989
+ - `showIcon?: boolean` `= true` — Whether to show the leading icon If false, no icon will be displayed even if icon prop is provided
990
+ - `onClick?: MouseEventHandler<HTMLDivElement>` — Click handler for the chip Makes the chip clickable/interactive
991
+ - `clickable?: boolean` — Explicitly mark chip as clickable Used to enable pointer cursor and keyboard interaction Automatically true…
992
+
993
+ #### Counter
994
+ Compact numeric indicator for displaying counts or notification badges.
995
+
996
+ - `count?: number` — The numeric value to display. Values above 99 are clamped to `"99+"`. When omitted, the counter renders as a…
997
+ - `variant?: CounterVariants` `= CounterVariants.primary` — Visual style variant. Drives the background color from `theme.palette`.
998
+ - `size?: keyof MainSizes` `= 'medium'` — Size of the counter. Ignored when `count` is undefined — the component uses `dot` automatically.
999
+ - `color?: string` — Optional color override. Accepts a `theme.colors` key or any valid CSS color string. When provided, overrides…
1000
+
1001
+ #### GaugeChart
1002
+
1003
+ - `minValue: number`
1004
+ - `maxValue: number`
1005
+ - `value: number`
1006
+ - `title?: ReactNode`
1007
+ - `segments?: { value: number; id?: string; color?: string; }[]`
1008
+ - `withLabels?: boolean`
1009
+ - `withTrack?: boolean`
1010
+ - `withNeedle?: boolean`
1011
+ - `chartProps?: Omit<Omit<PieSvgProps<GaugeChartData>, 'height' | 'width'> & { defaultW…`
1012
+ - `trackProps?: Omit<Omit<PieSvgProps<GaugeChartData>, 'height' | 'width'> & { defaultW…`
1013
+ - `features?: GaugeChartFeature[]`
1014
+ - `widgetCardProps?: WidgetCardProps`
1015
+ - `containerProps?: HTMLAttributes<HTMLDivElement>`
1016
+ - `minLabel?: string`
1017
+ - `maxLabel?: string`
1018
+ - `unitLabel?: string`
1019
+ - `totalLabel?: string`
1020
+ - `ticks?: (number | { value: number; label?: React.ReactNode; })[]`
1021
+
1022
+ #### ImageItem
1023
+
1024
+ - `image: string`
1025
+ - `avatarSize?: AvatarSizes`
1026
+ - `avatarBorder?: boolean` `= false` — Shows a border around the avatar.
1027
+ - `link?: string`
1028
+ - `openLinkInNewTab?: boolean`
1029
+
1030
+ #### Indicator
1031
+
1032
+ - `isVisible: boolean`
1033
+ - `children: ReactElement<{ ref: React.Ref<HTMLDivElement | null>; }, string | JSXEl…`
1034
+ - `position?: 'left' | 'right'`
1035
+ - `background?: string`
1036
+ - `text?: string | number | JSX.Element`
1037
+
1038
+ #### Label
1039
+
1040
+ - `htmlFor?: string`
1041
+ - `children: ReactNode`
1042
+ - `disabled?: boolean` — Renders the label in its muted, disabled state.
1043
+ - `isDisabled?: boolean`
1044
+ - `onMouseEnter?: MouseEventHandler<HTMLLabelElement>`
1045
+ - `onMouseLeave?: MouseEventHandler<HTMLLabelElement>`
1046
+
1047
+ #### NestedTable
1048
+ Table whose rows collapse into expandable groups.
1049
+
1050
+ - `collapsedIconName?: 'reset' | 'archive' | 'arrow-down' | 'arrow-up' | …(223 more — full list under "Icon.name")` `= 'carrot-up'` — Toggle icon shown while a group is collapsed.
1051
+ - `expandedIconName?: 'reset' | 'archive' | 'arrow-down' | 'arrow-up' | …(223 more — full list under "Icon.name")` `= 'carrot-down'` — Toggle icon shown while a group is expanded.
1052
+ - `defaultCollapsed?: boolean` `= false` — Whether groups start collapsed. Applies to every group in the table; a single `WithNestedTableRow` can…
1053
+ - _plus native element attributes_
1054
+
1055
+ #### NestedTableCell
1056
+ Cell for a `NestedTableRow`.
1057
+
1058
+ _No library-specific props._
1059
+ - _plus native element attributes_
1060
+
1061
+ #### NestedTableCellSubHeader
1062
+
1063
+ - `isHeader?: boolean`
1064
+ - _plus native element attributes_
1065
+
1066
+ #### NestedTableRow
1067
+ One row inside a `WithNestedTableRow` group.
1068
+
1069
+ - `isHeader?: boolean`
1070
+ - _plus native element attributes_
1071
+
1072
+ #### PieChart
1073
+
1074
+ - `title?: ReactNode`
1075
+ - `children?: ReactNode`
1076
+ - `width?: string`
1077
+ - `noData?: ReactNode`
1078
+ - `features?: PieChartFeatures[]`
1079
+ - `cardProps?: Omit<WidgetCardProps, 'children'>`
1080
+ - `activeHighlight?: boolean`
1081
+ - `container?: Element | DocumentFragment`
1082
+ - `tooltipProps?: PieChartTooltipProps`
1083
+ - `legendOutputType?: 'value' | 'percentage' | 'value+percentage' | 'percentage+value'`
1084
+ - `data: PieChartLegendItem[]`
1085
+ - `onFullscreenModeChange?: (isFullscreenMode: boolean) => void`
1086
+ - _plus native element attributes_
1087
+
1088
+ #### PieChartComponent
1089
+
1090
+ - `title?: ReactNode`
1091
+ - `children?: ReactNode`
1092
+ - `width?: string`
1093
+ - `noData?: ReactNode`
1094
+ - `features?: PieChartFeatures[]`
1095
+ - `cardProps?: Omit<WidgetCardProps, 'children'>`
1096
+ - `activeHighlight?: boolean`
1097
+ - `container?: Element | DocumentFragment`
1098
+ - `tooltipProps?: PieChartTooltipProps`
1099
+ - `legendOutputType?: 'value' | 'percentage' | 'value+percentage' | 'percentage+value'`
1100
+ - `data: PieChartLegendItem[]`
1101
+ - `onFullscreenModeChange?: (isFullscreenMode: boolean) => void`
1102
+ - _plus native element attributes_
1103
+
1104
+ #### PieChartLegend
1105
+
1106
+ - `data?: PieChartLegendItem[]`
1107
+ - `useChartData?: boolean`
1108
+ - `activeHighlight?: boolean`
1109
+ - `colors?: string[]`
1110
+ - `backgroundColors?: string[]`
1111
+ - `markerStyles?: SerializedStyles`
1112
+ - `currency?: string`
1113
+ - `labelListStyles?: SerializedStyles`
1114
+ - `valueListStyles?: SerializedStyles`
1115
+ - `variant?: 'valueList' | 'withoutValueList'`
1116
+ - `renderValue?: (item: PieChartLegendItem, legendOutputType: PieChartProps['legendOutpu…`
1117
+ - `renderLabel?: (item: PieChartLegendItem, legendOutputType: PieChartProps['legendOutpu…`
1118
+
1119
+ #### Progress
1120
+
1121
+ - `children: ReactElement<PropsWithChildren<{ vertical?: boolean; }>, string | JSXElementConstructor<any>> | …(1 more)`
1122
+
1123
+ #### ProgressBar
1124
+
1125
+ - `percentage: number`
1126
+ - `color?: keyof MainColors`
1127
+ - `vertical?: boolean`
1128
+ - `bgColor?: string`
1129
+ - `size?: number`
1130
+ - `aria-label?: string` — Accessible name for the progress bar.
1131
+ - `aria-labelledby?: string` — Id of the element that labels this progress bar — use instead of `aria-label` when a visible label already…
1132
+ - `valueText?: string` — Human-readable form of the current value, for when a bare percentage would be unhelpful (e.g. "3 of 8…
1133
+
1134
+ #### ProgressCircle
1135
+
1136
+ - `max: number`
1137
+ - `currentValue: number`
1138
+ - `aria-label?: string` — Accessible name for the progress circle.
1139
+ - `aria-labelledby?: string` — Id of an existing visible label, as an alternative to `aria-label`.
1140
+ - `size?: number`
1141
+ - `color?: keyof MainColors`
1142
+ - `infoContent?: ReactNode`
1143
+ - `mode?: 'default' | 'infinite'`
1144
+ - `classnames?: { root, outer, inner, svg, svgCircle }`
1145
+
1146
+ #### ProgressInfo
1147
+
1148
+ - `data: ProgressInfoResp`
1149
+
1150
+ #### ProgressInfoTotals
1151
+
1152
+ - `total: number`
1153
+
1154
+ #### ProgressLegend
1155
+
1156
+ - `vertical?: boolean`
1157
+ - `children: ReactElement<PropsWithChildren<LabelItemProps>, string | JSXElementConstructor<any>> | …(1 more)`
1158
+
1159
+ #### ProgressLegendItem
1160
+
1161
+ - `children: ReactNode`
1162
+ - `percentage: number`
1163
+ - `position?: string`
1164
+ - `vertical?: boolean`
1165
+
1166
+ #### ProgressVertical
1167
+
1168
+ - `children: ReactElement<PropsWithChildren<{ vertical?: boolean; }>, string | JSXElementConstructor<any>> | …(1 more)`
1169
+
1170
+ #### ResponsiveImage
1171
+ A simple wrapper over the `<img />` tag.
1172
+
1173
+ - `src: string`
1174
+ - `srcSet: string`
1175
+ - `sizes: string`
1176
+ - `alt: string`
1177
+
1178
+ #### SegmentedPieChart
1179
+
1180
+ - `data: SegmentedDataSet`
1181
+ - `totalAmount: number`
1182
+ - `totalDimension: string`
1183
+ - `pieChartProps?: Partial<PieChartProps>`
1184
+ - `pieChartLegendProps?: Partial<PieChartLegendProps>`
1185
+ - `legendBackgrounds?: string[]`
1186
+ - `pieChartColors?: string[][]`
1187
+ - `currency?: string`
1188
+ - `otherLabel?: string`
1189
+ - `legendValueRoundingDigits?: number`
1190
+ - `legendPercentageRoundingDigits?: number`
1191
+ - `showDimensions?: boolean`
1192
+ - `showPercentage?: boolean`
1193
+ - `titleTooltipOptions?: ChartTitleOption[]`
1194
+ - `tooltipConfig?: Partial<TooltipProps>`
1195
+ - `renderTitleTooltipContent?: (props: { totalAmount: number; totalDimension: string; }) => React.Reac…`
1196
+
1197
+ #### SegmentedPieChartComponent
1198
+
1199
+ - `data: SegmentedDataSet`
1200
+ - `totalAmount: number`
1201
+ - `totalDimension: string`
1202
+ - `pieChartProps?: Partial<PieChartProps>`
1203
+ - `pieChartLegendProps?: Partial<PieChartLegendProps>`
1204
+ - `legendBackgrounds?: string[]`
1205
+ - `pieChartColors?: string[][]`
1206
+ - `currency?: string`
1207
+ - `otherLabel?: string`
1208
+ - `legendValueRoundingDigits?: number`
1209
+ - `legendPercentageRoundingDigits?: number`
1210
+ - `showDimensions?: boolean`
1211
+ - `showPercentage?: boolean`
1212
+ - `titleTooltipOptions?: ChartTitleOption[]`
1213
+ - `tooltipConfig?: Partial<TooltipProps>`
1214
+ - `renderTitleTooltipContent?: (props: { totalAmount: number; totalDimension: string; }) => React.Reac…`
1215
+
1216
+ #### Table
1217
+ Base table component for displaying tabular data
1218
+
1219
+ _No library-specific props._
1220
+ - _plus native element attributes_
1221
+
1222
+ #### TableBody
1223
+ Body section container for table data rows
1224
+
1225
+ _No library-specific props._
1226
+ - _plus native element attributes_
1227
+
1228
+ #### TableCell
1229
+ Table data cell component
1230
+
1231
+ - `align?: 'center' | 'left' | 'right' | 'justify'` `= 'left'` — Text alignment for the cell content
1232
+ - _plus native element attributes_
1233
+
1234
+ #### TableCellHeader
1235
+ Table header cell component
1236
+
1237
+ - `align?: 'center' | 'left' | 'right' | 'justify'` `= 'left'` — Text alignment for the cell content
1238
+ - _plus native element attributes_
1239
+
1240
+ #### TableFilterCheckbox
1241
+
1242
+ - `text?: ReactNode` — Label text or custom React node to display next to the checkbox Can be a string, number, or any React node
1243
+ - `id?: string` — Unique identifier for the checkbox input element If not provided, a unique ID will be auto-generated
1244
+ - `onChange?: (newState: boolean) => void` — Callback function called when checkbox state changes Receives the new checked state (boolean) as parameter
1245
+ - `checked?: boolean` — Checked state, for the controlled pattern. When provided, the parent owns the value: the checkbox renders…
1246
+ - `externalState?: boolean` — External state control - allows parent component to control checkbox state When provided, the checkbox…
1247
+ - `disabled?: boolean` `= false` — Whether the checkbox is disabled Disabled checkboxes cannot be interacted with and appear visually muted
1248
+ - `isDisabled?: boolean` `= false` — Whether the checkbox is disabled
1249
+ - `defaultChecked?: boolean` `= false` — Initial checked state when component mounts Only used for uncontrolled checkboxes
1250
+ - `initialState?: boolean` `= false` — Initial checked state when component mounts
1251
+ - `isIndeterminate?: boolean` `= false` — Indeterminate state - represents a partially selected state Commonly used in tree structures or "select all"…
1252
+ - `name?: string` `= ''` — Name attribute for form submission and React Hook Form integration Required when using with React Hook Form
1253
+ - `isRequired?: boolean` `= false` — Whether the checkbox is required for form validation
1254
+ - `color?: 'custom' | 'primary' | 'success'` `= 'primary'` — Color variant of the checkbox — controls the checked and focus-state colors. Sourced from `theme.palette`: -…
1255
+
1256
+ #### TableFilters
1257
+ Filter component for table data with grouped checkboxes
1258
+
1259
+ - `checkboxData?: TableFilterConfig` — Filter configuration data Maps group names to accordion information with checkbox items
1260
+ - `onSubmit?: () => void` — Callback when filters are submitted/applied Called when user clicks submit button
1261
+ - `onReset?: () => void` — Callback when filters are reset Called when user clicks cancel button (resets to initial state)
1262
+ - `onClear?: () => void` — Callback when filters are cleared Called when user clicks clear button (removes all selections)
1263
+ - `onCheckboxToggle?: (groupName: string, name: string) => void` — Callback when a checkbox is toggled Provides group name and item name for the toggled checkbox
1264
+ - `handleMoreButtonVisibleChange?: (isVisible: boolean) => void` — Callback when filter button visibility changes Called when filter groups are added/removed to show/hide…
1265
+
1266
+ #### TableFiltersAccordion
1267
+
1268
+ - `aria-controls?: string` — ARIA controls attribute Links the accordion header to its content panel, and is used as that panel's `id` —…
1269
+ - `ariaControls?: string` — ARIA controls attribute Links the accordion header to its content panel Should match the id of the content…
1270
+ - `open?: boolean` `= false` — Whether the accordion is currently open
1271
+ - `defaultOpen?: boolean` `= false` — Whether the accordion starts open
1272
+ - `onOpenChange?: (open: boolean) => void` — Called when the accordion is toggled, with the state it is moving to
1273
+ - `isOpened?: boolean` — Whether the accordion is currently open
1274
+ - `isHidden?: boolean` `= false` — Whether the accordion is hidden Used for conditional rendering
1275
+ - `title: string` — Title text displayed in the accordion header
1276
+ - `onClick?: () => void` — Click handler for the accordion header Called when user clicks to toggle accordion
1277
+ - `children?: ReactNode` — Additional content to render
1278
+ - `contentProps?: Record<string, unknown>` — Additional props to pass to content render function Allows passing custom props to AccordionContent
1279
+ - `id: string | number` — Unique identifier for the accordion Used for state management and accessibility
1280
+ - `size?: AccordionSize` — Size variant for the accordion Inherits from AccordionGroup if not specified
1281
+ - `renderTitle: (data: RenderContentProps & { title: string; 'aria-controls'?: string;…` — Render function for the accordion title Receives title data and control props
1282
+ - `renderContent: (accordion: RenderContentProps) => React.ReactNode` — Render function for the accordion content Receives content props including open state
1283
+
1284
+ #### TableFiltersAccordionContent
1285
+
1286
+ - `size?: AccordionSize` — Size variant for the accordion Inherits from AccordionGroup if not specified
1287
+ - `id: string | number` — Unique identifier for the accordion Used for state management and accessibility
1288
+ - `open?: boolean` `= false` — Whether the accordion is currently open
1289
+ - `isOpened?: boolean` — Whether the accordion is currently open
1290
+ - `children: ReactNode`
1291
+
1292
+ #### TableFiltersButtons
1293
+
1294
+ - `onClear?: () => void`
1295
+ - `onCancel?: () => void`
1296
+
1297
+ #### TableFiltersCancelButton
1298
+
1299
+ - `children: ReactNode`
1300
+ - `onClick: (e: React.MouseEvent<HTMLButtonElement>) => void`
1301
+
1302
+ #### TableFiltersClearButton
1303
+
1304
+ - `children: ReactNode`
1305
+ - `onClick: (e: React.MouseEvent<HTMLButtonElement>) => void`
1306
+
1307
+ #### TableFilterTrigger
1308
+
1309
+ - `children?: ReactNode`
1310
+ - `count?: number`
1311
+
1312
+ #### TableFilterTriggerWithNotification
1313
+
1314
+ - `children?: ReactNode`
1315
+ - `count?: number`
1316
+ - `visible?: boolean`
1317
+
1318
+ #### TableHead
1319
+ Header section container for table columns
1320
+
1321
+ _No library-specific props._
1322
+ - _plus native element attributes_
1323
+
1324
+ #### TableRow
1325
+ Table row component for table data
1326
+
1327
+ - `disabled?: boolean` `= false` — Whether the row is disabled Disabled rows have reduced opacity and no pointer cursor. Automatically sets…
1328
+ - `isDisabled?: boolean` `= false` — Whether the row is disabled
1329
+ - _plus native element attributes_
1330
+
1331
+ #### Tag
1332
+
1333
+ - `color?: keyof MainColors`
1334
+ - `size?: keyof MainSizes`
1335
+ - `children: ReactNode`
1336
+ - `customStyles?: CustomTagStyles`
1337
+
1338
+ #### TreeMapChart
1339
+
1340
+ - `data: TreeNode`
1341
+ - `title?: ReactNode`
1342
+ - `fullScreen?: boolean`
1343
+ - `features?: TreeMapChartFeature[]`
1344
+ - `widgetCardProps?: WidgetCardProps`
1345
+ - _plus native element attributes_
1346
+
1347
+ #### TreeMapChartComponent
1348
+
1349
+ - `data: TreeNode`
1350
+ - `title?: ReactNode`
1351
+ - `fullScreen?: boolean`
1352
+ - `features?: TreeMapChartFeature[]`
1353
+ - `widgetCardProps?: WidgetCardProps`
1354
+ - _plus native element attributes_
1355
+
1356
+ #### TreeMapTooltipBase
1357
+
1358
+ _No library-specific props._
1359
+ - _plus native element attributes_
1360
+
1361
+ #### Typography
1362
+ Text typography component with semantic variants
1363
+
1364
+ - `variant?: 'caption' | 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6' | 'subtitle' | …(3 more)` `= 'body1'` — Typography variant determining size, line-height, and semantic HTML element - `h1`-`h6`: Heading variants…
1365
+ - `children: ReactNode` — Text content to display
1366
+ - `id?: string` — HTML id attribute
1367
+ - `color?: string` `= 'rgba(43, 45, 49, 1)'` — Text color (CSS color value)
1368
+ - `weight?: 'medium' | 'bold' | 'lighter' | 'regular'` `= 'regular'` — Font weight variant
1369
+ - `gutter?: boolean` `= false` — Whether to add bottom margin (gutter) Useful for spacing between typography elements
1370
+
1371
+ #### WithNestedTableRow
1372
+ Groups rows into one collapsible unit.
1373
+
1374
+ - `children: ReactNode | ReactNode[]` — The group's rows. The first element becomes the sub-header that toggles the group; the rest collapse under it.
1375
+ - `defaultCollapsed?: boolean` — Overrides the table-level `defaultCollapsed` for this group only. Ignored when the group holds a single row.
1376
+
1377
+ ### Navigation & Layout
1378
+
1379
+ #### CollapsibleNavBar
1380
+ The app sidebar: a logo, a menu, and three layouts.
1381
+
1382
+ - `items: (CollapsibleNavBarItem | CollapsibleNavBarGroup<NavBarExtendedSubItem>)…` — Nav items: link items (path, iconName, iconSize, title) or groups with prefix, iconName, iconSize, title,…
1383
+ - `renderLogo?: ReactElement<unknown, string | JSXElementConstructor<any>>` — Logo or branding element (e.g. image or div) shown above the nav.
1384
+ - `header?: CollapsibleNavBarHeader` — Header shown above the menu in the expanded panel — headline, picture, avatar, name. Hidden in the collapsed…
1385
+ - `activeColor?: string` — Colour of the active row and of the group that owns it. Defaults to the theme's own accent — `blueCool` on…
1386
+ - `subMenuMaxWidth?: Property.MaxWidth<string | number>` — Max width for submenu panels (e.g. 220).
1387
+ - `showIconTooltip?: boolean` — When true, show tooltips on nav icons when sidebar is collapsed.
1388
+ - `useMatchPattern?: (prefix: string) => string | PathPattern<string>` — Custom route matching for active state (e.g. for React Router): given a group's `prefix`, return the pattern…
1389
+ - `onChange?: (isChecked: boolean) => void` — Called when the sidebar expand/collapse state changes.
1390
+ - `exactMatch?: boolean` `= false` — If true, only exact path matches will be considered active. If false, sub-routes will also be considered…
1391
+ - `defaultExpanded?: boolean` `= false` — Initial expanded state (sidebar shows icon + text). When false, only icons are shown until the user toggles.
1392
+
1393
+ #### CollapsibleNavBarCustomIconSVG
1394
+
1395
+ _No library-specific props._
1396
+ - _plus native element attributes_
1397
+
1398
+ #### History
1399
+ Vertical timeline component for chronological events.
1400
+
1401
+ - `items: HistoryItemType[]` — Timeline rows to render from top to bottom.
1402
+ - `defaultColor?: string` — Default marker color for rows without `item.color`. Falls back to `theme.palette.primary.main`.
1403
+ - `lineColor?: string` — Connector line color between markers. Falls back to `theme.colors.greyFocused`.
1404
+ - `lineWidth?: number` `= 2` — Connector line width in pixels.
1405
+ - `dateWidth?: number` `= 120` — Width of the date column in pixels.
1406
+ - `circleSize?: number` `= 12` — Marker circle diameter in pixels.
1407
+ - `sx?: React.CSSProperties` — Inline style for the root container.
1408
+
1409
+ #### LargeTab
1410
+
1411
+ - `topText: string`
1412
+ - `bottomText: string`
1413
+ - `tabId: string | number`
1414
+ - `renderContent: (tab?: { tabId: number | string; [prop: string | number | symbol]: unkn…`
1415
+ - `isActive?: boolean`
1416
+ - `onClick?: (event?: React.MouseEvent<HTMLDivElement>) => void`
1417
+ - `aria-controls?: string` — Id of the panel this tab controls.
1418
+ - `ariaControls?: string` — Id of the panel this tab controls.
1419
+
1420
+ #### Link
1421
+ Styled anchor.
1422
+
1423
+ - `href: string` — Destination of the anchor.
1424
+ - `children: ReactNode` — Link content, rendered inside a `subtitle` Typography.
1425
+ - `target?: HTMLAttributeAnchorTarget` — Where to open the link. When set to `_blank`, `rel` defaults to `noopener noreferrer` unless you pass your…
1426
+ - _plus native element attributes_
1427
+
1428
+ #### LinksTabBar
1429
+
1430
+ - `links: TabBarLink[]`
1431
+
1432
+ #### NavBar
1433
+ UI Component that shows the navigation bar
1434
+
1435
+ - `items: { path: string; iconName: keyof MapIconsType; }[]`
1436
+
1437
+ #### Pagination
1438
+ Navigation controls for paginated data
1439
+
1440
+ - `pagesCount: number` — Total number of pages Required to calculate page range and navigation limits
1441
+ - `aria-label?: string` `= 'Pagination'` — ARIA label for the pagination navigation
1442
+ - `ariaLabel?: string` `= 'Pagination'` — ARIA label for the pagination navigation
1443
+ - `disabled?: boolean` `= false` — Whether the pagination is disabled Disabled pagination prevents all navigation actions
1444
+ - `isDisabled?: boolean` `= false` — Whether the pagination is disabled
1445
+ - `pageNumberPlaceholder?: string` `= 'Page №'` — Placeholder text for manual page input Only shown when isPageSettingVisible is true
1446
+ - `isPageSettingVisible?: boolean` `= false` — Whether to show manual page number input Allows users to jump directly to a specific page
1447
+ - `isRowPerPageVisible?: boolean` `= false` — Whether to show rows per page dropdown Allows users to control how many items are displayed per page
1448
+ - `isPageFromCountVisible?: boolean` `= true` — Whether to show page count display (e.g., "3 / 15") Only shown when isPageSettingVisible is true
1449
+ - `rowPerPageProps?: RowsPerPageDropdownProps` — Props for the rows per page dropdown. Only used when isRowPerPageVisible is true. Use…
1450
+ - `manualPageNumberProps?: InputProps` — Props for the manual page number input Only used when isPageSettingVisible is true
1451
+ - `errorTooltip?: string` `= 'The value is out of range'` — Error tooltip message for invalid page number input
1452
+ - `renderPageCount?: (current: number, total: number) => React.ReactNode` `= `${current} / ${total}`` — Custom renderer for the page count indicator shown next to the manual page input (only when…
1453
+
1454
+ #### Step
1455
+
1456
+ - `index?: number`
1457
+ - `children?: ReactElement<{ children?: ReactNode | undefined; }, string | JSXElement…`
1458
+ - `Connector?: FC<{ completed: boolean; active: boolean; }>`
1459
+
1460
+ #### StepConnector
1461
+
1462
+ _No library-specific props._
1463
+
1464
+ #### StepLabel
1465
+
1466
+ - `children?: React.ReactNode`
1467
+ - `StepIcon?: React.FC<{ index: number; completed: boolean; active: boolean; }>`
1468
+
1469
+ #### Stepper
1470
+
1471
+ - `activeStep?: number`
1472
+ - `orientation?: 'horizontal' | 'vertical'`
1473
+ - `color?: string`
1474
+ - `inverted?: boolean`
1475
+ - `sx?: CSSProperties`
1476
+ - `children: ReactElement<{ children?: ReactNode | undefined; }, string | JSXElementConstructor<any>> | …(1 more)`
1477
+
1478
+ #### Tab
1479
+
1480
+ - `text: string`
1481
+ - `tabId: string | number`
1482
+ - `renderContent: (tab?: { tabId: number | string; [prop: string | number | symbol]: unkn…`
1483
+ - `isActive?: boolean`
1484
+ - `onClick?: (event?: React.MouseEvent<HTMLDivElement>) => void`
1485
+ - `aria-controls?: string` — Id of the panel this tab controls.
1486
+ - `ariaControls?: string` — Id of the panel this tab controls.
1487
+ - _plus native element attributes_
1488
+
1489
+ #### TabBar
1490
+ This component doesn't show contents of the selected tab, however it accepts a required `renderContent()` render prop and stores it into the Context. This lets the…
1491
+
1492
+ - `children: ReactElement<PropsWithChildren<TabProps>, string | JSXElementConstructo…`
1493
+ - _plus native element attributes_
1494
+
1495
+ #### TreeView<TMeta>
1496
+ A nestable list of rows, up to three levels deep.
1497
+
1498
+ - `items: TreeItem<TMeta>[]` — The tree. Three levels deep at most — the fourth is rejected by the type, and `items` is optional at every…
1499
+ - `expandedIds?: string[]` — Ids of expanded nodes. Pass to control expansion yourself.
1500
+ - `defaultExpandedIds?: string[]` — Ids expanded on mount, when expansion is uncontrolled.
1501
+ - `onExpandedIdsChange?: (ids: string[]) => void`
1502
+ - `expandMode?: 'multiple' | 'single'` `= 'multiple'` — `single` collapses siblings when a node expands, accordion-style.
1503
+ - `selectedIds?: string[]` — Ids of selected nodes. Always an array, even in `single` mode — which is what lets a consumer move to…
1504
+ - `defaultSelectedIds?: string[]`
1505
+ - `onSelectedIdsChange?: (ids: string[], item: AnyTreeItem<TMeta>) => void` — Receives the full next selection, plus the node that was acted on.
1506
+ - `selectionMode?: 'multiple' | 'single'` `= 'single'` — `single` replaces the selection on click, `multiple` toggles membership.
1507
+ - `renderItem?: (props: TreeItemRenderProps<TMeta>) => React.ReactNode` — Replaces the row's interior. The `li`, ARIA and keyboard stay with `TreeView`.
1508
+ - `activeColor?: string` — Overrides the selected row's colour (and the chevron and icon on it), for a consumer whose accent isn't the…
1509
+ - `semantics?: 'list' | 'tree'` `= 'tree'` — `tree` gives a real `role="tree"` with roving focus and arrow-key navigation — right for a file tree. `list`…
1510
+ - `toggleOnItemClick?: boolean` `= true` — Whether clicking anywhere on a parent row toggles it, rather than only the chevron.
1511
+ - `autoExpandSelected?: boolean` `= true` — Expand the ancestors of selected nodes, on mount and whenever the selection moves. Ignored while expansion is…
1512
+ - `reserveIconSpace?: boolean` `= false` — Keep the icon column even on rows without an icon, so labels stay aligned with their icon-bearing siblings.…
1513
+ - `indent?: number` — Left offset per level, in px. Defaults to the design's 0 / 24 / 40; a number here makes the steps linear…
1514
+ - `aria-label?: string` — Accessible name for the tree.
1515
+
1516
+ #### WithLink
1517
+
1518
+ - `children: ReactNode`
1519
+ - `onClick?: () => void`
1520
+ - `link?: To`
1521
+
1522
+ #### WithPagination<T>
1523
+ Higher-order component that wraps a component with PaginationContextProvider
1524
+
1525
+ _No library-specific props._
1526
+
1527
+ #### WithVisibleLG<T>
1528
+
1529
+ _No library-specific props._
1530
+
1531
+ #### WithVisibleMD<T>
1532
+
1533
+ _No library-specific props._
1534
+
1535
+ #### WithVisibleSM<T>
1536
+
1537
+ _No library-specific props._
1538
+
1539
+ #### WithVisibleUpToLG<T>
1540
+
1541
+ _No library-specific props._
1542
+
1543
+ #### Wrapper
1544
+ Flexible flexbox container component
1545
+
1546
+ - `direction?: WrapperDirection` `= 'row'` — Flex direction (row, column, row-reverse, column-reverse)
1547
+ - `alignItems?: WrapperAlignItems` `= 'center'` — Align items value (flex-start, center, flex-end, stretch, baseline, etc.)
1548
+ - `justifyContent?: WrapperJustifyContent` — Justify content value (flex-start, center, flex-end, space-between, etc.)
1549
+ - `fade?: boolean` `= false` — Enable fade in/out transition animation
1550
+ - `fadeDelay?: number` `= 0.3` — Fade animation duration in seconds
1551
+ - `isVisible?: boolean` `= true` — Visibility state When false, element has opacity 0 and visibility hidden
1552
+ - _plus native element attributes_
1553
+
1554
+ ### Overlay & Feedback
1555
+
1556
+ #### Modal
1557
+ Dialog overlay for focused user interaction
1558
+
1559
+ - `open?: boolean` — Whether the dialog is visible. When false, content is hidden (display: none).
1560
+ - `isOpen?: boolean` — Whether the dialog is visible.
1561
+ - `noBackground?: boolean` — When true, the overlay is transparent (no dimmed background).
1562
+ - `aria-label?: string` — Accessible name for the dialog (required for screen readers).
1563
+ - `children?: ReactNode` — Dialog body content.
1564
+ - `usePortal?: boolean` — When true, render modal in a portal to document.body. When false (default), render in place (e.g. inside a…
1565
+ - `defaultOpen?: boolean` — Initial open state for an uncontrolled modal.
1566
+ - `onOpenChange?: (open: boolean) => void` — Called with the state the modal is moving to, from any source.
1567
+
1568
+ #### ModalContent
1569
+ Dialog content and overlay container
1570
+
1571
+ - `open?: boolean` — Whether the dialog is visible. When false, content is hidden (display: none).
1572
+ - `isOpen?: boolean` — Whether the dialog is visible.
1573
+ - `noBackground?: boolean` — When true, the overlay is transparent (no dimmed background).
1574
+ - `aria-label?: string` — Accessible name for the dialog (required for screen readers).
1575
+ - `children?: ReactNode` — Dialog body content.
1576
+ - `usePortal?: boolean` — When true, render modal in a portal to document.body. When false (default), render in place (e.g. inside a…
1577
+
1578
+ #### ModalDialog
1579
+ Presentational dialog container and overlay
1580
+
1581
+ - `open?: boolean` — Whether the dialog is visible. When false, content is hidden (display: none).
1582
+ - `isOpen?: boolean` — Whether the dialog is visible.
1583
+ - `noBackground?: boolean` — When true, the overlay is transparent (no dimmed background).
1584
+ - `aria-label?: string` — Accessible name for the dialog (required for screen readers).
1585
+ - `children?: ReactNode` — Dialog body content.
1586
+
1587
+ #### ModalDismissButton
1588
+ Trigger element that closes the modal
1589
+
1590
+ - `children: JSX.Element`
1591
+
1592
+ #### ModalOpenButton
1593
+ Trigger element that opens the modal
1594
+
1595
+ - `children: JSX.Element`
1596
+
1597
+ #### NotificationCard
1598
+
1599
+ - `title: string`
1600
+ - `text: string`
1601
+ - `isRead: boolean`
1602
+ - `type: NotificationType`
1603
+ - `time: string | number`
1604
+ - `children?: ReactNode`
1605
+ - `onClick?: () => void`
1606
+
1607
+ #### NotificationMenu
1608
+
1609
+ - `trigger: string | JSX.Element`
1610
+ - `notifications: NotificationCardProps[]`
1611
+ - `children: ReactNode`
1612
+ - `onClick?: () => void`
1613
+ - `isLoading: boolean`
1614
+ - `leftButton?: string | JSX.Element | null`
1615
+ - `rightButton?: string | JSX.Element`
1616
+
1617
+ #### Popover
1618
+ Floating content container component
1619
+
1620
+ - `children: React.ReactNode`
1621
+ - `defaultOpen?: boolean` `= false` — Initial open state for uncontrolled popover
1622
+ - `initialOpen?: boolean` — Initial open state for uncontrolled popover
1623
+ - `placement?: Placement` `= 'bottom'` — Preferred placement of the popover relative to trigger Floating UI will auto-adjust if space is insufficient
1624
+ - `modal?: boolean` `= false` — Whether popover should behave as a modal (traps focus)
1625
+ - `open?: boolean` — Controlled open state When provided, controls popover visibility externally
1626
+ - `floatingOptions?: Partial<UseFloatingOptions<ReferenceType>>` — Additional Floating UI options for advanced positioning Allows customization of middleware, strategy, and…
1627
+ - `interactionsEnabled?: InteractionsEnabled` `= 'click'` — Interaction mode for popover activation
1628
+ - `keyboardHandlers?: boolean` `= true` — Enable keyboard handlers for interactions
1629
+ - `onOpenChange?: (open: boolean) => void` — Callback fired when open state changes
1630
+ - `color?: FloatingSurfaceColor` — Color scheme of the popover surface. Shared with Tooltip — see {@link FloatingSurfaceColor}.
1631
+ - `size?: FloatingSurfaceSize` — Padding/typography scale of the popover surface. Unset means no padding is applied, leaving spacing to the…
1632
+ - `hasBorder?: boolean` `= true when `color` is `'white'`, false otherwise` — Whether the surface (and its arrow) is outlined with a 1px border
1633
+ - `hasShadow?: boolean` `= true when `color` is set, false otherwise` — Whether the surface casts a drop shadow
1634
+ - `hasArrow?: boolean` `= false` — Whether to display an arrow pointing at the trigger.
1635
+ - `arrowProps?: PopoverArrowProps` — Additional props for the arrow element
1636
+ - `offsetOptions?: OffsetOptions` `= 12 when `hasArrow` is set, 5 otherwise` — Offset between the trigger and the popover
1637
+
1638
+ #### PopoverClose
1639
+ Close button for popover
1640
+
1641
+ _No library-specific props._
1642
+ - _plus native element attributes_
1643
+
1644
+ #### PopoverContent
1645
+ Content container for popover
1646
+
1647
+ - `isFocusManagerDisabled?: boolean` `= false` — Disables the focus manager wrapping the content
1648
+ - `mountMode?: MountMode` `= 'unmount'` — Whether closed content is unmounted or kept mounted but hidden
1649
+ - `hasCloseButton?: boolean` `= false` — Renders a close button in the top-right corner of the surface
1650
+ - `closeButtonProps?: Partial<IconButtonProps>` — Props forwarded to the built-in close button, e.g. `icon`, `size` or `aria-label`. An `onClick` runs before…
1651
+ - _plus native element attributes_
1652
+
1653
+ #### PopoverDescription
1654
+ Accessible description for popover
1655
+
1656
+ - `variant?: 'caption' | 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6' | 'subtitle' | …(3 more)` `= 'body1'` — Typography variant determining size, line-height, and semantic HTML element - `h1`-`h6`: Heading variants…
1657
+ - `children: ReactNode` — Text content to display
1658
+ - `id?: string` — HTML id attribute
1659
+ - `color?: string` `= 'rgba(43, 45, 49, 1)'` — Text color (CSS color value)
1660
+ - `weight?: 'medium' | 'bold' | 'lighter' | 'regular'` `= 'regular'` — Font weight variant
1661
+ - `gutter?: boolean` `= false` — Whether to add bottom margin (gutter) Useful for spacing between typography elements
1662
+
1663
+ #### PopoverHeading
1664
+ Accessible heading for popover
1665
+
1666
+ - `variant?: 'caption' | 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6' | 'subtitle' | …(3 more)` `= 'body1'` — Typography variant determining size, line-height, and semantic HTML element - `h1`-`h6`: Heading variants…
1667
+ - `children: ReactNode` — Text content to display
1668
+ - `id?: string` — HTML id attribute
1669
+ - `color?: string` `= 'rgba(43, 45, 49, 1)'` — Text color (CSS color value)
1670
+ - `weight?: 'medium' | 'bold' | 'lighter' | 'regular'` `= 'regular'` — Font weight variant
1671
+ - `gutter?: boolean` `= false` — Whether to add bottom margin (gutter) Useful for spacing between typography elements
1672
+
1673
+ #### PopoverTrigger
1674
+ Trigger element for popover
1675
+
1676
+ - `block?: boolean` `= false` — Makes the button span the full width of its container
1677
+ - `text?: string` — Text content to display inside the button Either `text`, `children`, or icons must be provided
1678
+ - `startIcon?: React.ReactNode` — Icon to display before the button text/content Can be any React node, commonly an Icon component
1679
+ - `endIcon?: React.ReactNode` — Icon to display after the button text/content Can be any React node, commonly an Icon component
1680
+ - `startIconClassName?: string` — Custom CSS class name for the start icon wrapper
1681
+ - `endIconClassName?: string` — Custom CSS class name for the end icon wrapper
1682
+ - `variant?: keyof ButtonVariants` `= 'custom'` — Visual style variant of the button (uses theme.palette for solid variants). - `custom` — transparent, dark…
1683
+ - `loading?: boolean` `= false` — Shows a spinner in place of the button's content and disables interaction. The button keeps its resting…
1684
+ - `isDisabled?: boolean` `= false` — Disables the button, preventing user interaction
1685
+ - `asChild?: boolean` `= false` — Render trigger as child element instead of Button When true, clones the child element and applies trigger…
1686
+ - `dataTestId?: string` `= 'trigger-button'` — Test ID for the trigger element
1687
+ - _plus native element attributes_
1688
+
1689
+ #### ProgressChartTooltip
1690
+
1691
+ - `caption: string`
1692
+ - `value: number`
1693
+ - `valueFormatted: string`
1694
+ - `iconName?: 'reset' | 'archive' | 'arrow-down' | 'arrow-up' | …(223 more — full list under "Icon.name")`
1695
+ - `barProps?: Partial<Omit<ProgressBarProps, 'currentValue'>>`
1696
+
1697
+ #### SimpleChartTooltip<Series>
1698
+
1699
+ - `size?: TooltipSize` `= 'small'` — Size variant of the tooltip content.
1700
+ - `renderValue?: (data: Series['data'][number] & { xFormatted: string; yFormatted: strin…`
1701
+
1702
+ #### Tooltip
1703
+ Contextual information component
1704
+
1705
+ - `children: ReactNode` — TooltipTrigger and TooltipContent components Must include both TooltipTrigger and TooltipContent as children
1706
+ - `placement?: Placement` — Preferred placement of the tooltip relative to trigger Floating UI will auto-adjust if space is insufficient
1707
+ - `enableHover?: boolean` `= false` — Enable tooltip on hover interaction.
1708
+ - `enableClick?: boolean` `= true` — Enable tooltip on click interaction.
1709
+ - `enableClientPoint?: boolean` `= false` — Enable tooltip to follow client point (mouse position) Useful for interactive tooltips like charts
1710
+ - `offsetOptions?: OffsetOptions` — Offset configuration for tooltip positioning Allows fine-tuning of spacing from trigger element
1711
+ - `allowHoverContent?: boolean` `= false` — Allow hovering over tooltip content itself When true, tooltip stays open when hovering over content
1712
+ - `hoverOpenDelay?: number` `= 0` — Delay in milliseconds before tooltip appears on hover Helps prevent "traffic light" effect when quickly…
1713
+ - `hoverCloseDelay?: number` `= 0` — Delay in milliseconds before tooltip disappears after mouse leaves Helps prevent tooltip from flickering when…
1714
+ - `size?: TooltipSize` `= 'small'` — Size variant of the tooltip content.
1715
+ - `color?: FloatingSurfaceColor` `= 'grey'` — Color scheme of the tooltip content
1716
+ - `hasBorder?: boolean` `= true when `color` is `'white'`, false otherwise` — Whether the tooltip surface (and its arrow) is outlined with a 1px border
1717
+ - `hasShadow?: boolean` `= true` — Whether the tooltip surface casts a drop shadow
1718
+ - `hasArrow?: boolean` `= true` — Whether to display arrow pointing to trigger
1719
+ - `arrowProps?: TooltipArrowProps` — Additional props for the arrow element
1720
+ - `open?: boolean` — Controlled open state When provided, the tooltip is fully controlled and the parent must update this value…
1721
+ - `defaultOpen?: boolean` `= false` — Initial open state for an uncontrolled tooltip
1722
+ - `onOpenChange?: (open: boolean) => void` — Called whenever the tooltip wants to open or close — hover, click, dismiss or Escape
1723
+ - `isOpen?: boolean` — Initial open state.
1724
+
1725
+ #### TooltipContent
1726
+ Content container for tooltip display
1727
+
1728
+ - `children: ReactNode` — Tooltip content to display Can be text, React nodes, or formatted content
1729
+ - `title?: ReactNode` — Optional headline rendered in bold above `children`, separated by an 8px gap. Accepts plain text or any React…
1730
+ - `maxWidth?: string | number` — Maximum width of the tooltip surface. Without it the tooltip is sized to its content and never wraps — set it…
1731
+ - `style?: CSSProperties` — Inline styles for the tooltip content
1732
+
1733
+ #### TooltipContentBase
1734
+
1735
+ - `tooltipColor?: FloatingSurfaceColor` — Color scheme of the surface. Defaults to `grey`.
1736
+ - `hasBorder?: boolean` — Outlines the surface with a 1px border.
1737
+ - `hasShadow?: boolean` — Casts the design's drop shadow. Defaults to `true`.
1738
+ - _plus native element attributes_
1739
+
1740
+ #### TooltipTrigger
1741
+ Trigger element for tooltip activation
1742
+
1743
+ - `children: ReactNode` — Single React element to use as trigger Can be any element (Button, Icon, div, etc.) Must be a valid React…
1744
+
1745
+ ### Notification Components
1746
+
1747
+ #### Alert
1748
+ Portal-based notification container driven by the Observer pattern.
1749
+
1750
+ - `color?: string` — When set, overrides the variant's background with a solid color and auto-derives text, icon, and border…
1751
+ - `inheritMainColor?: boolean` — When true, border and close icon use the variant accent color. Ignored when `color` is set.
1752
+ - `styles?: AlertStyleOverrides` — Per-slot style overrides. Applied after all default styles.
1753
+ - `animationDuration?: number`
1754
+ - `withShadow?: boolean`
1755
+ - `withBorder?: boolean`
1756
+ - `containerSelector?: string`
1757
+ - `position?: NotificationPositions`
1758
+ - `maxAmount?: number` — Maximum number of notifications visible at once. When a new notification arrives and the stack is already at…
1759
+ - `size?: NotificationSizes`
1760
+ - `cancelText?: string`
1761
+ - `submitText?: string`
1762
+
1763
+ #### Notification
1764
+ Component-level props for the `<Notification>` portal container.
1765
+
1766
+ - `timeout?: number` — Default auto-dismiss duration in ms for all notifications in this stack. Defaults to `undefined` —…
1767
+ - `styles?: NotificationStyleOverrides` — Per-slot style overrides applied after all default styles.
1768
+ - `animationDuration?: number`
1769
+ - `withShadow?: boolean`
1770
+ - `withBorder?: boolean`
1771
+ - `containerSelector?: string`
1772
+ - `position?: NotificationPositions`
1773
+ - `maxAmount?: number` — Maximum number of notifications visible at once. When a new notification arrives and the stack is already at…
1774
+ - `size?: NotificationSizes`
1775
+ - `cancelText?: string`
1776
+ - `submitText?: string`
1777
+
1778
+ #### Toast
1779
+ Component-level props for the `<Toast>` portal container.
1780
+
1781
+ - `withProgress?: boolean` `= false` — Show an animated progress bar that drains over the toast's lifetime. Has no effect when `timeout` is…
1782
+ - `timeout?: number` `= 4000` — Default auto-dismiss duration in ms for all toasts in this stack. Pass `undefined` to disable auto-dismiss…
1783
+ - `progressColor?: string` `= theme `blueNotification`` — Default color of the progress bar for all toasts in this stack. Accepts a theme color key (`ColorsKeys`) or…
1784
+ - `animationDuration?: number`
1785
+ - `withShadow?: boolean`
1786
+ - `withBorder?: boolean`
1787
+ - `containerSelector?: string`
1788
+ - `position?: NotificationPositions`
1789
+ - `maxAmount?: number` — Maximum number of notifications visible at once. When a new notification arrives and the stack is already at…
1790
+ - `size?: NotificationSizes`
1791
+ - `cancelText?: string`
1792
+ - `submitText?: string`
1793
+
1794
+ ### Specialized Components
1795
+
1796
+ #### Accordion
1797
+ Individual accordion item component
1798
+
1799
+ - `aria-controls?: string` — ARIA controls attribute Links the accordion header to its content panel, and is used as that panel's `id` —…
1800
+ - `ariaControls?: string` — ARIA controls attribute Links the accordion header to its content panel Should match the id of the content…
1801
+ - `open?: boolean` `= false` — Whether the accordion is currently open
1802
+ - `defaultOpen?: boolean` `= false` — Whether the accordion starts open
1803
+ - `onOpenChange?: (open: boolean) => void` — Called when the accordion is toggled, with the state it is moving to
1804
+ - `isOpened?: boolean` — Whether the accordion is currently open
1805
+ - `isHidden?: boolean` `= false` — Whether the accordion is hidden Used for conditional rendering
1806
+ - `title: string` — Title text displayed in the accordion header
1807
+ - `onClick?: () => void` — Click handler for the accordion header Called when user clicks to toggle accordion
1808
+ - `children?: ReactNode` — Additional content to render
1809
+ - `contentProps?: Record<string, unknown>` — Additional props to pass to content render function Allows passing custom props to AccordionContent
1810
+ - `id: string | number` — Unique identifier for the accordion Used for state management and accessibility
1811
+ - `size?: AccordionSize` — Size variant for the accordion Inherits from AccordionGroup if not specified
1812
+ - `renderTitle: (data: RenderContentProps & { title: string; 'aria-controls'?: string;…` — Render function for the accordion title Receives title data and control props
1813
+ - `renderContent: (accordion: RenderContentProps) => React.ReactNode` — Render function for the accordion content Receives content props including open state
1814
+
1815
+ #### AccordionContent
1816
+ Default component for accordion content panels
1817
+
1818
+ - `size?: AccordionSize` — Size variant for the accordion Inherits from AccordionGroup if not specified
1819
+ - `id: string | number` — Unique identifier for the accordion Used for state management and accessibility
1820
+ - `open?: boolean` `= false` — Whether the accordion is currently open
1821
+ - `isOpened?: boolean` — Whether the accordion is currently open
1822
+ - `children: ReactNode`
1823
+
1824
+ #### AccordionGroup
1825
+ Container component for managing multiple accordion items
1826
+
1827
+ - `id?: string` — Unique identifier for the accordion group Used for accessibility and testing purposes
1828
+ - `children: AccordionGroupChildren | AccordionGroupChildren[]` — Accordion components as children Each child should be an Accordion component
1829
+ - `size?: AccordionSize` `= 'empty'` — Size variant for the accordion group Controls padding, spacing, and visual appearance
1830
+ - `accordionsStayOpen?: boolean` `= true` — Whether multiple accordions can be open simultaneously When false, opening one accordion closes others
1831
+
1832
+ #### AccordionTitle
1833
+ Default render function for accordion headers
1834
+
1835
+ - `size?: AccordionSize` — Size variant for the accordion Inherits from AccordionGroup if not specified
1836
+ - `id: string | number` — Unique identifier for the accordion Used for state management and accessibility
1837
+ - `open?: boolean` `= false` — Whether the accordion is currently open
1838
+ - `isOpened?: boolean` — Whether the accordion is currently open
1839
+ - `title: string`
1840
+ - `aria-controls?: string` — Id of the content panel this title controls.
1841
+ - `ariaControls?: string` — Id of the content panel this title controls.
1842
+ - `onClick?: () => void`
1843
+
1844
+ #### AddNewAccountCard
1845
+
1846
+ - `children: ReactNode`
1847
+ - `link?: To`
1848
+ - `onClick?: () => void`
1849
+
1850
+ #### Icon
1851
+ Renders one of the kit's built-in SVG icons by name.
1852
+
1853
+ - `name: 'reset' | 'archive' | 'arrow-down' | 'arrow-up' | …(223 more — full list under "Icon.name")` — Which icon to render. Type-checked against the generated icon list, so a name that does not exist is a…
1854
+ - `tooltip?: string` — Tooltip text shown on hover. Also becomes the icon's `aria-label`.
1855
+ - `size?: number` — Width and height in px. Icons are square, so one value sets both.
1856
+ - _plus native element attributes_
1857
+
1858
+ #### PersonInfo
1859
+ Compact row for displaying a person or entity with title, value, and optional metadata.
1860
+
1861
+ - `title: string` — Main label (required).
1862
+ - `icon?: ReactNode` — Icon name or custom ReactNode before the title.
1863
+ - `value?: string` — Primary value; with link becomes a link.
1864
+ - `badges?: ReactNode | ReactNode[]` — Badge(s): single node or array of string | ReactNode. Strings use DEFAULT_BADGE_COLORS.
1865
+ - `avatar?: string` — Avatar image URL, shown next to value.
1866
+ - `counterTooltip?: PersonInfoCounterTooltip` — “+N” counter with tooltip listing users.
1867
+ - `attributes?: ReactNode[]` — List of strings or ReactNodes below the row.
1868
+ - `description?: string` — Extra description text.
1869
+ - `styles?: Partial<Record<PersonInfoStyleKeys, Interpolation<Theme>>>` — Optional style overrides per PersonInfoStyleKeys.
1870
+ - `link?: string` — If set, value (or avatar+value) renders as a link.
1871
+ - `openLinkInNewTab?: boolean` — When link is set, open in new tab and use rel="noreferrer".
1872
+ - `avatarBorder?: boolean` `= false` — Shows a border around the avatar.
1873
+
1874
+ #### UserProfile
1875
+ User profile dropdown with logout functionality
1876
+
1877
+ - `name: string` — User's full name Displayed as heading in the profile popover
1878
+ - `email: string` — User's email address Displayed as description text in the profile popover
1879
+ - `trigger: string | JSX.Element` — Trigger element that opens the profile popover Can be a string, icon, avatar, button, or any React element
1880
+ - `onClick: () => void` — Callback function when logout button is clicked Typically handles user logout logic
1881
+ - `logOutText?: string` `= 'Log Out'` — Text for the logout button
1882
+ - `additionalInfo?: ReactNode[]` — Array of additional information elements Displayed between email and custom content sections Each element is…
1883
+ - `customContent?: ReactNode` — Custom content section Displayed between user info and logout button Useful for additional actions or…
1884
+
1885
+ #### WidgetCard
1886
+
1887
+ - `title?: ReactNode`
1888
+ - `wrapperClassName?: string`
1889
+ - `contentClassName?: string`
1890
+ - `headerClassName?: string`
1891
+ - `headerContent?: ReactNode`
1892
+ - `link?: To`
1893
+ - `children?: ReactNode`
1894
+ - `width?: string`
1895
+ - `height?: string`
1896
+ - `onClick?: () => void`
1897
+
1898
+ #### WidgetCardBase
1899
+
1900
+ - `noShadow?: boolean` — Drops the drop shadow, leaving a flat surface. Cards are elevated by default — there is no numeric elevation…
1901
+ - `children: ReactNode` — Card body. Usually `CardHeader` followed by `CardContent`, but any content is accepted.
1902
+ - `onClick?: () => void` — Makes the whole card activatable. Passing this **changes the rendered element from `div` to `button`**, which…
1903
+ - `isFullscreenMode?: boolean`
1904
+ - `width?: string`
1905
+ - `height?: string`
1906
+
1907
+ #### WidgetCardTitle
1908
+
1909
+ - `variant?: 'caption' | 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6' | 'subtitle' | …(3 more)` `= 'body1'` — Typography variant determining size, line-height, and semantic HTML element - `h1`-`h6`: Heading variants…
1910
+ - `children: ReactNode` — Text content to display
1911
+ - `id?: string` — HTML id attribute
1912
+ - `color?: string` `= 'rgba(43, 45, 49, 1)'` — Text color (CSS color value)
1913
+ - `weight?: 'medium' | 'bold' | 'lighter' | 'regular'` `= 'regular'` — Font weight variant
1914
+ - `gutter?: boolean` `= false` — Whether to add bottom margin (gutter) Useful for spacing between typography elements
1915
+
1916
+ #### WithFullscreenMode<T>
1917
+
1918
+ _No library-specific props._
1919
+
1920
+ #### WithWidgetCard<F>
1921
+
1922
+ - `children: React.ReactNode`
1923
+ - `features?: MustIncludeHeader<F>`
1924
+ - `cardProps?: WidgetCardProps`
1925
+
1926
+ ## Compound components
1927
+
1928
+ _Namespace exports. Import the namespace, then use its parts: `import { Drawer } from '@ssa-ui-kit/core'` → `<Drawer.Root>`._
1929
+
1930
+ ### JsonSchema
1931
+
1932
+ #### JsonSchema.generateTheme
1933
+ _function_
1934
+
1935
+ #### JsonSchema.generateForm
1936
+ _function_
1937
+
1938
+ #### JsonSchema.Form
1939
+
1940
+ _No library-specific props._
1941
+ - _plus native element attributes_
1942
+
1943
+ #### JsonSchema.Templates
1944
+ _constant_
1945
+
1946
+ #### JsonSchema.Theme
1947
+ _constant_
1948
+
1949
+ #### JsonSchema.Widgets
1950
+ _constant_
1951
+
1952
+ #### JsonSchema.Fields
1953
+ _constant_
1954
+
1955
+ #### JsonSchema.generateTemplates
1956
+ _function_
1957
+
1958
+ #### JsonSchema.generateWidgets
1959
+ _function_
1960
+
1961
+ #### JsonSchema.generateFields
1962
+ _function_
1963
+
1964
+ #### JsonSchema.DEFAULT_AVATAR_SIZE
1965
+ _constant_
1966
+
1967
+ #### JsonSchema.SelectOptionSchemaExtension
1968
+ _type_
1969
+
1970
+ #### JsonSchema.SelectWidgetUiOptions
1971
+ _type_
1972
+
1973
+ ### Field
1974
+ Props for Field.Root component
1975
+
1976
+ #### Field.Root
1977
+ Field - Compound layout primitives for building accessible form fields.
1978
+
1979
+ - `asChild?: boolean` `= false` — If true, renders without a wrapper div (asChild pattern) Useful for semantic HTML (e.g., wrapping with…
1980
+ - `children: ReactNode` — Child components (typically Field.Label, Field.Control, Field.Description, etc.)
1981
+ - `status?: 'error' | 'success' | 'basic'` `= 'basic'` — Validation status of the field - `basic`: Default state, no validation feedback - `error`: Error state with…
1982
+ - `disabled?: boolean` `= false` — Whether the field is disabled Disabled fields appear muted and cannot be interacted with
1983
+ - `forwardFocus?: boolean` `= true` — If true, clicking on FieldControl will forward focus to its child input element This enables clicking…
1984
+ - _plus native element attributes_
1985
+
1986
+ #### Field.Error
1987
+ Error message for form fields
1988
+
1989
+ - `children: ReactNode` — Error message text to display
1990
+
1991
+ #### Field.Success
1992
+ Success message for form fields
1993
+
1994
+ - `children: ReactNode` — Success message text to display
1995
+
1996
+ #### Field.Description
1997
+ Helper text for form fields
1998
+
1999
+ - `children: ReactNode` — Helper text content to display
2000
+
2001
+ #### Field.Label
2002
+ Accessible label for form fields
2003
+
2004
+ - `children: ReactNode` — Label text content
2005
+ - `htmlFor?: string`
2006
+ - `disabled?: boolean` — Renders the label in its muted, disabled state.
2007
+ - `isDisabled?: boolean`
2008
+ - `onMouseEnter?: MouseEventHandler<HTMLLabelElement>`
2009
+ - `onMouseLeave?: MouseEventHandler<HTMLLabelElement>`
2010
+
2011
+ #### Field.Control
2012
+ Wrapper component for form controls
2013
+
2014
+ - `controlRef?: React.RefObject<HTMLElement | null>` — Optional ref to a specific element to focus when control is clicked If not provided, will attempt to focus…
2015
+ - `children: React.ReactNode | ((props: FieldContextValue) => React.ReactNode)` — Form control element(s) to wrap Can be a React node or a function that receives FieldContextValue and returns…
2016
+ - _plus native element attributes_
2017
+
2018
+ ### Drawer
2019
+
2020
+ #### Drawer.Root
2021
+ Slide-out panel anchored to an edge of the screen.
2022
+
2023
+ - `children?: ReactElement<unknown, string | JSXElementConstructor<any>>`
2024
+ - `store?: { open, opened, dismissable, position, duration, floatingContext, …+8 }`
2025
+ - `open?: boolean` — Controlled open state. When provided, the drawer is fully controlled and the parent must update it from…
2026
+ - `defaultOpen?: boolean` — Initial open state for an uncontrolled drawer.
2027
+ - `opened?: boolean` — Controlled open state.
2028
+ - `defaultOpened?: boolean` — Initial open state for an uncontrolled drawer.
2029
+ - `duration?: number`
2030
+ - `dismissable?: boolean`
2031
+ - `position?: Position`
2032
+ - `title?: string`
2033
+ - `withCloseButton?: boolean`
2034
+ - `onOpenChange?: (open: boolean, event?: Event, reason?: OpenChangeReason) => void`
2035
+
2036
+ #### Drawer.Overlay
2037
+
2038
+ - `children?: ReactNode`
2039
+
2040
+ #### Drawer.Portal
2041
+
2042
+ _No library-specific props._
2043
+
2044
+ #### Drawer.Content
2045
+
2046
+ - `children: ReactNode`
2047
+ - _plus native element attributes_
2048
+
2049
+ #### Drawer.Header
2050
+
2051
+ - `children?: ReactNode`
2052
+ - _plus native element attributes_
2053
+
2054
+ #### Drawer.Title
2055
+
2056
+ - `children?: ReactNode`
2057
+ - _plus native element attributes_
2058
+
2059
+ #### Drawer.CloseButton
2060
+
2061
+ - `children?: ReactNode` — Custom content to render inside the button If provided, takes precedence over `text` prop Either `text`,…
2062
+ - `block?: boolean` `= false` — Makes the button span the full width of its container
2063
+ - `size?: keyof MainSizes` `= 'small'` — Size variant of the button - `small`: Compact button for dense UIs (default) - `medium`: Standard button size…
2064
+ - `text?: string` — Text content to display inside the button Either `text`, `children`, or icons must be provided
2065
+ - `startIcon?: React.ReactNode` — Icon to display before the button text/content Can be any React node, commonly an Icon component
2066
+ - `endIcon?: React.ReactNode` — Icon to display after the button text/content Can be any React node, commonly an Icon component
2067
+ - `startIconClassName?: string` — Custom CSS class name for the start icon wrapper
2068
+ - `endIconClassName?: string` — Custom CSS class name for the end icon wrapper
2069
+ - `variant?: keyof ButtonVariants` `= 'custom'` — Visual style variant of the button (uses theme.palette for solid variants). - `custom` — transparent, dark…
2070
+ - `type?: 'button' | 'reset' | 'submit'` `= 'button'` — HTML button type attribute - `button`: Standard button (default) - `submit`: Form submission button -…
2071
+ - `disabled?: boolean` `= false` — Disables the button, preventing user interaction
2072
+ - `loading?: boolean` `= false` — Shows a spinner in place of the button's content and disables interaction. The button keeps its resting…
2073
+ - `isDisabled?: boolean` `= false` — Disables the button, preventing user interaction
2074
+ - `onClick?: React.MouseEventHandler<HTMLButtonElement>` — Click event handler Fired when the button is clicked (if not disabled)
2075
+
2076
+ ## Utility namespaces
2077
+
2078
+ - `globalStyles` — pink, yellow, yellowWarm, green, turquoise, purple, blue, blueLight, blueLightDarker
2079
+ - `styleUtils` — focusOutline, outlineStyles
2080
+ - `pieChartPalettes` — getBalancePalette
2081
+ - `styles` — small, medium, large, grey, white, dark, nonOpaque, border, shadow, title, withTitle, surfaceColors, resolveSurfaceArrowProps, backgroundColors, chartTooltipText
2082
+
2083
+ ## Contexts & providers
2084
+
2085
+ - `AccordionGroupContext` — React context for AccordionGroup state management
2086
+ - `AccordionGroupContextProvider` — Context provider for accordion group state
2087
+ - `CollapsibleNavBarContext`
2088
+ - `CollapsibleNavBarItemContext`
2089
+ - `CollapsibleNavBarItemProvider`
2090
+ - `CollapsibleNavBarProvider`
2091
+ - `FullscreenModeContext`
2092
+ - `FullscreenModeProvider`
2093
+ - `ModalContext` — Context value for Modal: [isOpen, setIsOpen]. Provided by Modal (root) and consumed by ModalContent, ModalOpenButton, ModalDismissButton.
2094
+ - `NestedTableRowContext`
2095
+ - `NestedTableRowProvider`
2096
+ - `PaginationContext` — Pagination context Provides page state and navigation functions to child components
2097
+ - `PaginationContextProvider` — Context provider for pagination state
2098
+ - `PopoverContext` — Context for popover components
2099
+ - `SwitchContextProvider` — Context provider for Switch component
2100
+ - `TabBarContext`
2101
+ - `TabBarContextProvider`
2102
+ - `TooltipContext`
2103
+ - `TranslationContext`
2104
+ - `TranslationProvider`
2105
+
2106
+ ## Hooks
2107
+
2108
+ - `useAccordionGroupContext` — Hook to access AccordionGroup context
2109
+ - `useBreadcrumbs` — Route-aware breadcrumb builder. Reads the current location, matches it against your route tree, and returns `BreadcrumbItem[]` ready for `<Breadcrumbs>`. Labels come…
2110
+ - `useButtonGroupContext` — Access the enclosing `ButtonGroup`'s selection state.
2111
+ - `useCollapsibleNavBarContext`
2112
+ - `useCollapsibleNavBarItemContext`
2113
+ - `useDrawer`
2114
+ - `useFieldContext`
2115
+ - `useFilterMultiSelect`
2116
+ - `useFullscreenMode`
2117
+ - `useNestedTableRowContext`
2118
+ - `usePaginationContext` — Hook to access pagination context Must be used within PaginationContextProvider
2119
+ - `usePlotlyDefaultConfig`
2120
+ - `usePopover` — Hook for popover functionality
2121
+ - `usePopoverContext` — Hook to access popover context
2122
+ - `useSwitchContext` — Hook to access Switch context
2123
+ - `useTabBarContext`
2124
+ - `useTooltip`
2125
+ - `useTooltipContext`
2126
+ - `useTranslation`
2127
+ - `useTypeaheadContext`
2128
+
2129
+ ## Functions
2130
+
2131
+ - `cancelButtonStyles`
2132
+ - `clearButtonStyles`
2133
+ - `deriveBreadcrumbs` — Pure derivation of breadcrumb items from a route tree and a pathname. Extracted from the hook so it can be unit-tested without a router.
2134
+ - `filterButtonStyles`
2135
+ - `highlightInputMatch`
2136
+ - `resetDeprecationWarnings` — Clears the once-per-pair warning cache.
2137
+ - `resolveAriaProp` — Shorthand for the camelCase-ARIA → native-ARIA renames (issue #656, chunk 3 item 1).
2138
+ - `resolveDeprecatedProp` — Resolves a prop that is mid-rename: returns the new prop's value when it is defined, otherwise falls back to the deprecated one and warns in dev.
2139
+ - `resolveDisabled` — Shorthand for the `isDisabled` → `disabled` rename, which spans 15 components.
2140
+ - `resolveOpenState` — Shorthand for the open-state renames (issue #656, chunk 3 item 2), which span `Drawer`, `Popover`, `Tooltip`, `Accordion`, `Modal`, `ModalDialog` and…
2141
+ - `resolvePresetRange` — Presets are resolved at click (and render) time rather than at module load, so a relative range such as **Today** stays correct in an app that is left open across…
2142
+ - `setHocDisplayName` — React 19 compatibility helper for Higher-Order Components (HOCs).
2143
+ - `showAlert` — Imperatively triggers a new alert inside the mounted `<Alert>` component.
2144
+ - `showNotification`
2145
+ - `showToast` — Imperatively triggers a new toast inside every mounted `<Toast>` component.
2146
+ - `warnDeprecatedProp` — Emits a deprecation notice for `component.deprecatedProp`, at most once.
2147
+ - `wrapNivoResponsiveComponent` — React 19 compatibility wrapper for Nivo responsive components.
2148
+
2149
+ ## Constants
2150
+
2151
+ - `checkboxStyles`
2152
+ - `currentMonthPreset` — **Current month** — the first to the last day of the current month.
2153
+ - `currentWeekPreset` — **Current week** — the whole week containing today, first to last day. Week boundaries follow Luxon's locale rules (Monday-first by default).
2154
+ - `DEFAULT_DATE_RANGE_PRESETS` — Ready-made preset list for the common “today / yesterday / week / month” shortcuts. Pass it straight to **`presets`**, or compose your own array from the individual…
2155
+ - `DEFAULT_EUROPEAN_MASK_FORMAT` — Default European day format (`dd/mm/yyyy`). Re-exported from the package barrel.
2156
+ - `DEFAULT_MASK_FORMAT` — Default US day format (`mm/dd/yyyy`). Re-exported from the package barrel.
2157
+ - `DEFAULT_MONTH_MASK_FORMAT` — Default month format (`mm/yyyy`). Re-exported from the package barrel.
2158
+ - `DEFAULT_YEAR_MASK_FORMAT` — Default year-only format (`yyyy`). Re-exported from the package barrel.
2159
+ - `iconsList`
2160
+ - `lastMonthPreset` — **Last month** — the full month before the current one.
2161
+ - `lastWeekPreset` — **Last week** — the full week before the current one.
2162
+ - `mainTheme`
2163
+ - `PRESENT_VALUE` — Special value to represent "Present" (ongoing/no end date) in form data and UI display.
2164
+ - `SLIDER_THUMB_SIZES`
2165
+ - `todayPreset` — **Today** — a single-day range on the current date.
2166
+ - `yesterdayPreset` — **Yesterday** — a single-day range on the previous date.
2167
+
2168
+ ## Large value sets
2169
+
2170
+ _Literal unions too long to inline above. A union shared by several props is listed once, under the prop it first appeared on._
2171
+
2172
+ ### Icon.name — 227 values
2173
+
2174
+ 'reset' · 'archive' · 'arrow-down' · 'arrow-up' · 'clipboard-assessment' · 'attention' · 'award' · 'ban-user' · 'bench' · 'bin' · 'calendar' · 'calendar-schedule' · 'carrot-down' · 'carrot-left' · 'carrot-right' · 'carrot-up' · 'card-text' · 'case' · 'certification' · 'certification-expiring' · 'camera' · 'change' · 'chart' · 'check' · 'check-circle' · 'check-circle-inverted' · 'children' · 'circle' · 'circular' · 'clock' · 'cogwheel' · 'comments' · 'briefcase' · 'building' · 'compensation' · 'confirm-email' · 'contacts' · 'copy' · 'copy-link' · 'cross' · 'delete' · 'document' · 'diamond-ring' · 'diet' · 'documents' · 'edit' · 'education' · 'email' · 'employee' · 'employee-profile' · 'employee-terminated' · 'employee-blackboard' · 'excel-download' · 'export' · 'file-mark' · 'file-pdf' · 'file-word' · 'filter' · 'filter-funnel' · 'follow-link' · 'fte' · 'clipboard-form' · 'geography' · 'gender' · 'gift' · 'home' · 'import' · 'information' · 'inventory' · 'invisible' · 'language' · 'link' · 'lock' · 'log-in' · 'log-out' · 'maximize' · 'measurements' · 'message' · 'minus' · 'minus-circle' · 'minus-circle-inverted' · 'more' · 'more-vertical' · 'notification' · 'office-chair' · 'open-book' · 'pages' · 'party' · 'plus' · 'plus-circle' · 'plus-circle-inverted' · 'probation-period' · 'profiles-changes' · 'radio-on' · 'clipboard-report' · 'clipboard-result' · 'robot' · 'roles' · 'search' · 'seniority' · 'settings' · 'setting-clock' · 'signature' · 'sleep' · 'staff-growth-coefficient' · 'staff-turnover-coefficient' · 'stats' · 'clipboard-summary' · 'team' · 'clipboard-star' · 'time-tracking' · 'timeline' · 'tennis-ball' · 'trainings' · 'unarchive' · 'union' · 'union-circle' · 'unlock' · 'url' · 'user' · 'visible' · 'warning' · 'panelLeft' · 'panelRight' · 'emailOutlined' · 'lockOutlined' · 'addFolder' · 'moveFolder' · 'attention-circle' · 'zoom' · 'zoom-in' · 'zoom-out' · 'pan' · 'box-select' · 'lasso-select' · 'autoscale' · 'reset-axes' · 'star' · 'preview' · 'dashboard' · 'phone' · 'tablet' · 'desktop' · 'more-info' · 'filter-list' · 'history' · 'overtime' · 'save-2' · 'folder' · 'salary-reports' · 'assessment-stages' · 'comments-on-achievements' · 'code-review-comments' · 'support' · 'leave' · 'vacation' · 'sick-leave' · 'day-off' · 'arrow-sort' · 'menu' · 'dragndrop' · 'send' · 'save' · 'today' · 'busket' · 'copy-link-2' · 'upload' · 'picture' · 'warning-2' · 'info' · 'sort-up' · 'sort-down' · 'bold' · 'italic' · 'strikethrough' · 'underline' · 'h1' · 'h2' · 'h3' · 'markup' · 'numbered-list' · 'bulleted-list' · 'uppercase' · 'dash' · 'brackets' · 'undo' · 'redo' · 'new-line' · 'quotation' · 'close-circle-outline' · 'close-square-outline' · 'close-circle-filled' · 'close-square-filled' · 'plus-square-outline' · 'plus-square-filled' · 'minus-square-outline' · 'minus-square-filled' · 'tick-square-outline' · 'tick-square-filled' · 'warning-circle-outline' · 'warning-square-outline' · 'warning-circle-filled' · 'warning-square-filled' · 'info-square-outline' · 'info-square-filled' · 'info-circle-filled' · 'more-circle-outline' · 'more-square-outline' · 'more-circle-filled' · 'more-square-filled' · 'client-feedback' · 'expertise' · 'responsibilities' · 'mobile' · 'delivery-address' · 'delivery-address-2' · 'pdp' · 'versions' · 'experience' · 'projects' · 'cooperation-model' · 'billable' · 'non-billable' · 'recruitment-team' · 'clear' · 'list' · 'columns'
2175
+
2176
+ ## Exported types
2177
+
2178
+ _Names only — read the `.d.ts` for their shape._
2179
+
2180
+ `AccordionGroupContextProps` · `AccordionGroupContextProviderProps` · `AccordionGroupProps`
2181
+ `AccordionProps` · `AccordionSize` · `AccordionViewProps` · `AddNewAccountCardProps` · `AlertProps`
2182
+ `AlertStyleOverrides` · `AlertVariants` · `AnyTreeItem` · `ArrowButtonProps` · `AvatarProps`
2183
+ `AvatarSizes` · `BadgeProps` · `BarGaugeChartFeature` · `BarGaugeChartHeaderProps`
2184
+ `BarGaugeChartProps` · `BarLineChartItem` · `BarLineComplexChartContextProps`
2185
+ `BarLineComplexChartContextProviderProps` · `BarLineComplexChartFeatures`
2186
+ `BarLineComplexChartProps` · `BarLineComplexInternalProps` · `BigNumberChartFeatures`
2187
+ `BigNumberChartProps` · `BreadcrumbItem` · `BreadcrumbMatchContext` · `BreadcrumbRouteHandle`
2188
+ `BreadcrumbSibling` · `BreadcrumbsProps` · `ButtonGroupButtonProps` · `ButtonGroupContextValue`
2189
+ `ButtonGroupItemInput` · `ButtonGroupItem` · `ButtonGroupProps` · `ButtonGroupValue` · `ButtonProps`
2190
+ `ButtonTextProps` · `ButtonVariants` · `CalendarType` · `CandlestickChartFeatures`
2191
+ `CandlestickChartProps` · `CardListProps` · `CardProps` · `CheckboxProps` · `ChildrenDataProps`
2192
+ `ChipColor` · `ChipProps` · `ChipSize` · `ChipVariant` · `CollapsibleNavBarExtendedProps`
2193
+ `CollapsibleNavBarGroup` · `CollapsibleNavBarHeader` · `CollapsibleNavBarItem`
2194
+ `ColoredButtonTextProps` · `ColorsKeys` · `CommonProps` · `ContextType` · `ControlledButtonProps`
2195
+ `CounterProps` · `CounterSizes` · `CounterVariants` · `CustomIconProps` · `CustomTagStyles`
2196
+ `DatePickerContextProps` · `DatePickerFormat` · `DatePickerProps` · `DateRangePickerContextProps`
2197
+ `DateRangePickerFormBridgeProps` · `DateRangePickerFormBridgeValue` · `DateRangePickerOnChangeDates`
2198
+ `DateRangePickerProps` · `DateRangePresetValue` · `DateRangePreset` · `DateTimeTuple`
2199
+ `DeprecatedOpenStateProps` · `DropdownContextType` · `DropdownOptionProps` · `DropdownPositions`
2200
+ `DropdownProps` · `DropdownToggleProps` · `DynamicAlertParams` · `DynamicNotificationParams`
2201
+ `DynamicToastParams` · `FieldContextValue` · `FieldControlProps` · `FieldDescriptionProps`
2202
+ `FieldErrorProps` · `FieldLabelProps` · `FieldProps` · `FieldSuccessProps` · `FileAttachmentFile`
2203
+ `FileAttachmentProps` · `FileRejectionReason` · `FileUploadProgressEntry` · `FileUploadProgress`
2204
+ `FileUploadProps` · `Filter` · `FiltersMultiSelectEmptyProps` · `FiltersMultiSelectOptionProps`
2205
+ `FiltersMultiSelectProps` · `FloatingSurfaceColor` · `FloatingSurfaceSize` · `Format`
2206
+ `FullscreenModeContextType` · `GaugeBarProps` · `GaugeBarThreshold` · `GaugeBarValueFormatter`
2207
+ `GaugeChartFeature` · `GaugeChartProps` · `HistoryItemType` · `HistoryProps` · `IFormCheckboxProps`
2208
+ `IconButtonProps` · `IconProps` · `ImageItemProps` · `IndicatorProps` · `InputColors` · `InputProps`
2209
+ `InputStatusColors` · `InteractionsEnabled` · `Item` · `LabelProps` · `LargeTabProps`
2210
+ `LastFocusedElement` · `LinkProps` · `LinksTabBarProps` · `MainColors` · `MainSizes`
2211
+ `MapIconsType` · `ModalContextProps` · `ModalDialogProps` · `ModalProps` · `ModalRootProps`
2212
+ `MountMode` · `MultipleStylesProps` · `NavBarExtendedGroup` · `NavBarExtendedItem`
2213
+ `NavBarExtendedProps` · `NavBarExtendedSubItem` · `NavBarProps` · `NestedTableContextType`
2214
+ `NestedTableRowContextType` · `NotificationCardProps` · `NotificationDynamicProps`
2215
+ `NotificationGlobalSharedProps` · `NotificationMenuProps` · `NotificationPositions`
2216
+ `NotificationProps` · `NotificationSharedProps` · `NotificationSizes` · `NotificationStyleOverrides`
2217
+ `NotificationType` · `NotificationVariants` · `NumberFieldProps` · `OpenStateProps`
2218
+ `OpenedAccordion` · `PageButtonProps` · `PaginationButtonsProps` · `PaginationContextProps`
2219
+ `PaginationContextProviderProps` · `PaginationProps` · `PaletteColor` · `Palette` · `PeriodOption`
2220
+ `Period` · `PersonInfoAvatarProps` · `PersonInfoCounterProps` · `PersonInfoCounterTooltipUser`
2221
+ `PersonInfoCounterTooltip` · `PersonInfoLinkAttributes` · `PersonInfoProps` · `PersonInfoStyles`
2222
+ `PersonInfoValueProps` · `PickerType` · `PieChartFeatures` · `PieChartLegendItem`
2223
+ `PieChartLegendProps` · `PieChartProps` · `PieChartTooltipProps` · `PieChartTooltipViewProps`
2224
+ `PopoverArrowProps` · `PopoverContentProps` · `PopoverOptions` · `PopoverTriggerProps`
2225
+ `ProgressBarProps` · `ProgressChartTooltipProps` · `ProgressCircleProps` · `ProgressInfoItemProps`
2226
+ `ProgressInfoProps` · `ProgressInfoResp` · `ProgressInfoTotalsProps` · `ProgressProps` · `RGBString`
2227
+ `RadioGroupProps` · `RadioProps` · `RangePickerType` · `RenderContentProps`
2228
+ `ResolveDeprecatedPropOptions` · `ResolvedOpenState` · `ResponsiveImageProps` · `SVGProps`
2229
+ `SearchBoxProps` · `SelectedFilter` · `SetIDs` · `SimpleChartTooltipProps` · `SizeStyles`
2230
+ `SliderMark` · `SliderProps` · `SliderSize` · `SmallTabProps` · `StepperContextType`
2231
+ `StepperProps` · `SwitchContext` · `SwitchProps` · `TabBarContextProps` · `TabBarLink`
2232
+ `TabBarProps` · `TabBaseProps` · `TabProps` · `TagsProps` · `TextFieldProps` · `TextareaProps`
2233
+ `Theme` · `ToastProps` · `ToastVariants` · `TooltipArrowProps` · `TooltipColor`
2234
+ `TooltipContentProps` · `TooltipContentSizes` · `TooltipContextType` · `TooltipProps`
2235
+ `TooltipSize` · `TooltipTriggerProps` · `TranslationContextContent` · `TreeItemBase`
2236
+ `TreeItemLevel2` · `TreeItemLevel3` · `TreeItemRenderProps` · `TreeItem` · `TreeLevel`
2237
+ `TreeMapChartFeature` · `TreeMapChartProps` · `TreeNode` · `TreeViewProps` · `TypeaheadItemProps`
2238
+ `TypeaheadItemsListProps` · `TypeaheadOptionProps` · `TypeaheadProps` · `TypeaheadValue`
2239
+ `TypographyProps` · `UseBreadcrumbsOptions` · `UseChartInfo` · `UseDrawerOptions`
2240
+ `UseFiltersMultiSelectOptions` · `UseFiltersMultiSelectStore` · `UsePopover` · `UseTooltipArgs`
2241
+ `UseTooltipContext` · `UseTooltip` · `UseTypeaheadProps` · `UserProfileProps` · `ValueLabelDisplay`
2242
+ `VariantStyle` · `WidgetCardProps` · `WithNestedTableRowProps` · `WithWidgetCardProps`
2243
+ `WrapperAlignItems` · `WrapperDirection` · `WrapperJustifyContent`