@keboola/design 6.4.0 → 8.0.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 (49) hide show
  1. package/AGENTS.md +9 -10
  2. package/COMPONENT-API.md +162 -160
  3. package/README.md +3 -3
  4. package/dist/charts.cjs +22 -22
  5. package/dist/charts.cjs.map +1 -1
  6. package/dist/charts.d.cts +5 -5
  7. package/dist/charts.d.ts +5 -5
  8. package/dist/charts.js +22 -22
  9. package/dist/charts.js.map +1 -1
  10. package/dist/editors.cjs +594 -438
  11. package/dist/editors.cjs.map +1 -1
  12. package/dist/editors.d.cts +8 -4
  13. package/dist/editors.d.ts +8 -4
  14. package/dist/editors.js +595 -422
  15. package/dist/editors.js.map +1 -1
  16. package/dist/icons.cjs +23818 -45
  17. package/dist/icons.cjs.map +1 -1
  18. package/dist/icons.d.cts +12 -3
  19. package/dist/icons.d.ts +12 -3
  20. package/dist/icons.js +298 -40
  21. package/dist/icons.js.map +1 -1
  22. package/dist/index.cjs +11519 -11718
  23. package/dist/index.cjs.map +1 -1
  24. package/dist/index.d.cts +679 -1227
  25. package/dist/index.d.ts +679 -1227
  26. package/dist/index.js +10315 -10516
  27. package/dist/index.js.map +1 -1
  28. package/dist/markdown-editor.cjs +1015 -1134
  29. package/dist/markdown-editor.cjs.map +1 -1
  30. package/dist/markdown-editor.js +1016 -1134
  31. package/dist/markdown-editor.js.map +1 -1
  32. package/dist/mermaid.cjs +366 -452
  33. package/dist/mermaid.cjs.map +1 -1
  34. package/dist/mermaid.d.cts +5 -1
  35. package/dist/mermaid.d.ts +5 -1
  36. package/dist/mermaid.js +368 -435
  37. package/dist/mermaid.js.map +1 -1
  38. package/dist/rjsf.cjs +2540 -2419
  39. package/dist/rjsf.cjs.map +1 -1
  40. package/dist/rjsf.js +2541 -2419
  41. package/dist/rjsf.js.map +1 -1
  42. package/dist/styles.css +2 -5
  43. package/dist/testing.cjs +86 -82
  44. package/dist/testing.cjs.map +1 -1
  45. package/dist/testing.js +86 -82
  46. package/dist/testing.js.map +1 -1
  47. package/package.json +30 -22
  48. package/src/styles.css +125 -105
  49. package/src/theme.css +264 -0
package/COMPONENT-API.md CHANGED
@@ -69,47 +69,48 @@ _No own props — see note above for passthrough attributes._
69
69
 
70
70
  ### `TextInput`
71
71
 
72
- Source: `src/components/Input/TextInput/TextInput.tsx`
72
+ Source: `src/blocks/TextInput/TextInput.tsx`
73
73
 
74
74
  > Bare input. Plus all native `<input>` attributes.
75
75
 
76
- | Prop | Type | Required | Default | Description |
77
- | -------------------- | --------------------------------------------------------------- | -------- | ------- | ----------------------------------------------------------------------------------------- |
78
- | `allowClear` | `boolean` | no | — | |
79
- | `defaultValue` | `string \| null` | no | — | |
80
- | `focusVariant` | `"off" \| "on" \| "default" \| null` | no | — | |
81
- | `leftSuffix` | `ReactNode` | no | — | |
82
- | `onClear` | `(() => void)` | no | — | |
83
- | `onValueBlur` | `((value: string) => void)` | no | — | Called with the unwrapped string value on blur. For the raw event use `onBlur`. |
84
- | `onValueChange` | `((value: string) => void)` | no | — | Called with the unwrapped string value on every change. For the raw event use `onChange`. |
85
- | `prefix` | `ReactNode` | no | — | |
86
- | `rightSuffix` | `ReactNode` | no | — | |
87
- | `rightSuffixVariant` | `"default" \| "addon"` | no | — | |
88
- | `sizing` | `"small" \| "medium" \| "default" \| null` | no | — | |
89
- | `state` | `"warning" \| "error" \| "default" \| null` | no | — | |
90
- | `testId` | `string` | no | — | |
91
- | `type` | `"text" \| "email" \| "date" \| "datetime-local" \| "password"` | no | `text` | |
92
- | `value` | `string \| null` | no | — | |
93
- | `variant` | `"primary" \| "secondary" \| null` | no | — | |
76
+ | Prop | Type | Required | Default | Description |
77
+ | -------------------- | --------------------------------------------------------------- | -------- | --------- | ----------------------------------------------------------------------------------------- |
78
+ | `allowClear` | `boolean` | no | `false` | |
79
+ | `defaultValue` | `string \| null` | no | — | |
80
+ | `focusVariant` | `"off" \| "on" \| "default" \| null` | no | `default` | |
81
+ | `leftSuffix` | `ReactNode` | no | `null` | |
82
+ | `onClear` | `(() => void)` | no | — | |
83
+ | `onValueBlur` | `((value: string) => void)` | no | — | Called with the unwrapped string value on blur. For the raw event use `onBlur`. |
84
+ | `onValueChange` | `((value: string) => void)` | no | — | Called with the unwrapped string value on every change. For the raw event use `onChange`. |
85
+ | `prefix` | `ReactNode` | no | `null` | |
86
+ | `rightSuffix` | `ReactNode` | no | `null` | |
87
+ | `rightSuffixVariant` | `"default" \| "addon"` | no | `default` | |
88
+ | `sizing` | `"small" \| "medium" \| "default" \| null` | no | `default` | |
89
+ | `state` | `"warning" \| "error" \| "default" \| null` | no | `default` | |
90
+ | `testId` | `string` | no | — | |
91
+ | `type` | `"text" \| "email" \| "date" \| "password" \| "datetime-local"` | no | `text` | |
92
+ | `value` | `string \| null` | no | — | |
93
+ | `variant` | `"primary" \| "secondary" \| null` | no | — | |
94
94
 
95
95
  ### `PasswordInput`
96
96
 
97
97
  Source: `src/blocks/PasswordInput/PasswordInput.tsx`
98
98
 
99
- | Prop | Type | Required | Default | Description |
100
- | --------------------------- | ----------------------------------------------- | -------- | -------------- | ----------- |
101
- | `allowClear` | `boolean` | no | `false` | |
102
- | `allowPasswordToggle` | `boolean` | no | `false` | |
103
- | `autoComplete` | `"off" \| "current-password" \| "new-password"` | no | `new-password` | |
104
- | `defaultPasswordVisibility` | `boolean` | no | `false` | |
105
- | `defaultValue` | `string \| null` | no | — | |
106
- | `focusVariant` | `"off" \| "on" \| "default" \| null` | no | — | |
107
- | `onValueBlur` | `((value: string) => void)` | no | — | |
108
- | `onValueChange` | `((value: string) => void)` | no | — | |
109
- | `sizing` | `"small" \| "medium" \| "default" \| null` | no | — | |
110
- | `state` | `"warning" \| "error" \| "default" \| null` | no | — | |
111
- | `value` | `string \| null` | no | — | |
112
- | `variant` | `"primary" \| "secondary" \| null` | no | — | |
99
+ | Prop | Type | Required | Default | Description |
100
+ | --------------------------- | ----------------------------------------------- | -------- | -------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
101
+ | `allowClear` | `boolean` | no | `false` | |
102
+ | `allowPasswordToggle` | `boolean` | no | `false` | |
103
+ | `autoComplete` | `"off" \| "current-password" \| "new-password"` | no | `new-password` | |
104
+ | `defaultPasswordVisibility` | `boolean` | no | `false` | |
105
+ | `defaultValue` | `string \| null` | no | — | |
106
+ | `focusVariant` | `"off" \| "on" \| "default" \| null` | no | — | |
107
+ | `onValueBlur` | `((value: string) => void)` | no | — | |
108
+ | `onValueChange` | `((value: string) => void)` | no | — | |
109
+ | `passwordToggleLabel` | `string` | no | — | Suffix appended to the reveal button's accessible name, e.g. the field title. Use it to disambiguate multiple password fields on one form — "Show password: API token" / "Hide password: API token". Omit for a single field. |
110
+ | `sizing` | `"small" \| "medium" \| "default" \| null` | no | — | |
111
+ | `state` | `"warning" \| "error" \| "default" \| null` | no | — | |
112
+ | `value` | `string \| null` | no | — | |
113
+ | `variant` | `"primary" \| "secondary" \| null` | no | — | |
113
114
 
114
115
  ### `Textarea`
115
116
 
@@ -133,7 +134,7 @@ Source: `src/blocks/Textarea/Textarea.tsx`
133
134
 
134
135
  ### `FormGroup`
135
136
 
136
- Source: `src/components/FormGroup/FormGroup.tsx`
137
+ Source: `src/blocks/FormGroup/FormGroup.tsx`
137
138
 
138
139
  > `state` ("error" | "warning") propagates to nested inputs (e.g. `FormGroup.TextInput`) via context; `FormGroup.Help` stays advisory (reacts only to "warning"). Validation errors render via `FormGroup.Error` (`role="alert"`), not the input `state`. Subcomponents: `FormGroup.TextInput`, `FormGroup.NumberInput`, `FormGroup.ColorInput`, `FormGroup.Textarea`, `FormGroup.Help`, `FormGroup.Error`. Plus native `<div>` attributes (`className`, `data-testid`, …).
139
140
 
@@ -143,7 +144,7 @@ Source: `src/components/FormGroup/FormGroup.tsx`
143
144
 
144
145
  ### `FormGroup.TextInput`
145
146
 
146
- Source: `src/components/FormGroup/FormGroupTextInput.tsx`
147
+ Source: `src/blocks/FormGroup/FormGroupTextInput.tsx`
147
148
 
148
149
  > NO `error` prop — error styling comes from the parent `FormGroup state="error"` via context. `state` is omitted from the surface for the same reason. Plus native `<input>` attributes.
149
150
 
@@ -161,19 +162,19 @@ Source: `src/components/FormGroup/FormGroupTextInput.tsx`
161
162
  | `rightSuffixVariant` | `"default" \| "addon"` | no | — | |
162
163
  | `sizing` | `"small" \| "medium" \| "default" \| null` | no | — | |
163
164
  | `testId` | `string` | no | — | |
164
- | `type` | `"text" \| "email" \| "date" \| "datetime-local" \| "password"` | no | — | |
165
+ | `type` | `"text" \| "email" \| "date" \| "password" \| "datetime-local"` | no | — | |
165
166
  | `value` | `string \| null` | no | — | |
166
167
  | `variant` | `"primary" \| "secondary" \| null` | no | — | |
167
168
 
168
169
  ### `FormGroup.Help`
169
170
 
170
- Source: `src/components/FormGroup/FormGroupHelp.tsx`
171
+ Source: `src/blocks/FormGroup/FormGroupHelp.tsx`
171
172
 
172
173
  _No own props — see note above for passthrough attributes._
173
174
 
174
175
  ### `FormGroup.Error`
175
176
 
176
- Source: `src/components/FormGroup/FormGroupError.tsx`
177
+ Source: `src/blocks/FormGroup/FormGroupError.tsx`
177
178
 
178
179
  > Field validation error — carries `role="alert"` (announced on appearance). Pass `children` or an `errors` array (TanStack `string` / `{ message }` entries); a single message renders inline, several as a `<ul>`. Plus native `<div>` attributes.
179
180
 
@@ -189,128 +190,128 @@ Source: `src/blocks/Form/connectors/TextField.tsx`
189
190
 
190
191
  > Value/onChange/onBlur/id/name are wired from the field — do not pass them. Forwards remaining `FormGroup.TextInput` props.
191
192
 
192
- | Prop | Type | Required | Default | Description |
193
- | -------------------- | --------------------------------------------------------------- | -------- | ------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
194
- | `allowClear` | `boolean` | no | — | |
195
- | `aria-describedby` | `string` | no | — | Identifies the element (or elements) that describes the object. @see aria-labelledby |
196
- | `className` | `string` | no | — | |
197
- | `defaultValue` | `string \| null` | no | — | |
198
- | `focusVariant` | `"off" \| "on" \| "default" \| null` | no | — | |
199
- | `help` | `ReactNode` | no | — | |
200
- | `label` | `ReactNode` | no | — | |
201
- | `leftSuffix` | `ReactNode` | no | — | |
202
- | `onClear` | `(() => void)` | no | — | |
203
- | `onValueBlur` | `((value: string) => void)` | no | — | Called with the unwrapped string value on blur. For the raw event use `onBlur`. |
204
- | `onValueChange` | `((value: string) => void)` | no | — | Called with the unwrapped string value on every change. For the raw event use `onChange`. |
205
- | `prefix` | `ReactNode` | no | — | |
206
- | `required` | `boolean` | no | — | |
207
- | `requiredMark` | `RequiredMark` | no | — | Which marker to show beside the label — gated by `required` so it never lies: `'required'` renders `*` only when the field is `required`; `'optional'` renders `(optional)` only when it is not; `'hidden'` renders neither. Defaults to `'required'`. |
208
- | `rightSuffix` | `ReactNode` | no | — | |
209
- | `rightSuffixVariant` | `"default" \| "addon"` | no | — | |
210
- | `sizing` | `"small" \| "medium" \| "default" \| null` | no | — | |
211
- | `testId` | `string` | no | — | |
212
- | `tooltip` | `ReactNode` | no | — | |
213
- | `type` | `"text" \| "email" \| "date" \| "datetime-local" \| "password"` | no | — | |
214
- | `variant` | `"primary" \| "secondary" \| null` | no | — | |
193
+ | Prop | Type | Required | Default | Description |
194
+ | -------------------- | --------------------------------------------------------------- | -------- | ------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
195
+ | `action` | `ReactNode` | no | — | Optional node rendered at the trailing edge of the label row (opposite the label) — e.g. a "Forgot password?" link beside a Password label. Presentational placement only; it is a sibling of the `<Label>`, not part of the field's accessible name. Provide an interactive element (`ButtonInline` / `Link`). |
196
+ | `allowClear` | `boolean` | no | — | |
197
+ | `aria-describedby` | `string` | no | — | Identifies the element (or elements) that describes the object. @see aria-labelledby |
198
+ | `className` | `string` | no | — | |
199
+ | `defaultValue` | `string \| null` | no | — | |
200
+ | `focusVariant` | `"off" \| "on" \| "default" \| null` | no | — | |
201
+ | `help` | `ReactNode` | no | — | |
202
+ | `label` | `ReactNode` | no | — | |
203
+ | `leftSuffix` | `ReactNode` | no | — | |
204
+ | `onClear` | `(() => void)` | no | — | |
205
+ | `onValueBlur` | `((value: string) => void)` | no | — | Called with the unwrapped string value on blur. For the raw event use `onBlur`. |
206
+ | `onValueChange` | `((value: string) => void)` | no | — | Called with the unwrapped string value on every change. For the raw event use `onChange`. |
207
+ | `prefix` | `ReactNode` | no | — | |
208
+ | `required` | `boolean` | no | — | |
209
+ | `requiredMark` | `RequiredMark` | no | — | Which marker to show beside the label — gated by `required` so it never lies: `'required'` renders `*` only when the field is `required`; `'optional'` renders `(optional)` only when it is not; `'hidden'` renders neither. Defaults to `'required'`. |
210
+ | `rightSuffix` | `ReactNode` | no | — | |
211
+ | `rightSuffixVariant` | `"default" \| "addon"` | no | — | |
212
+ | `sizing` | `"small" \| "medium" \| "default" \| null` | no | — | |
213
+ | `testId` | `string` | no | — | |
214
+ | `tooltip` | `ReactNode` | no | — | |
215
+ | `type` | `"text" \| "email" \| "date" \| "password" \| "datetime-local"` | no | — | |
216
+ | `variant` | `"primary" \| "secondary" \| null` | no | — | |
215
217
 
216
218
  ### `field.PasswordField`
217
219
 
218
220
  Source: `src/blocks/Form/connectors/PasswordField.tsx`
219
221
 
220
- | Prop | Type | Required | Default | Description |
221
- | --------------------------- | ----------------------------------------------- | -------- | ------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
222
- | `allowClear` | `boolean` | no | — | |
223
- | `allowPasswordToggle` | `boolean` | no | — | |
224
- | `aria-describedby` | `string` | no | — | Identifies the element (or elements) that describes the object. @see aria-labelledby |
225
- | `autoComplete` | `"off" \| "current-password" \| "new-password"` | no | — | |
226
- | `className` | `string` | no | — | |
227
- | `defaultPasswordVisibility` | `boolean` | no | — | |
228
- | `defaultValue` | `string \| null` | no | — | |
229
- | `focusVariant` | `"off" \| "on" \| "default" \| null` | no | — | |
230
- | `help` | `ReactNode` | no | — | |
231
- | `label` | `ReactNode` | no | — | |
232
- | `onValueBlur` | `((value: string) => void)` | no | — | |
233
- | `required` | `boolean` | no | — | |
234
- | `requiredMark` | `RequiredMark` | no | — | Which marker to show beside the label — gated by `required` so it never lies: `'required'` renders `*` only when the field is `required`; `'optional'` renders `(optional)` only when it is not; `'hidden'` renders neither. Defaults to `'required'`. |
235
- | `sizing` | `"small" \| "medium" \| "default" \| null` | no | — | |
236
- | `state` | `"warning" \| "error" \| "default" \| null` | no | — | |
237
- | `tooltip` | `ReactNode` | no | — | |
238
- | `variant` | `"primary" \| "secondary" \| null` | no | — | |
222
+ | Prop | Type | Required | Default | Description |
223
+ | --------------------------- | ----------------------------------------------- | -------- | ------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
224
+ | `action` | `ReactNode` | no | — | Optional node rendered at the trailing edge of the label row (opposite the label) — e.g. a "Forgot password?" link beside a Password label. Presentational placement only; it is a sibling of the `<Label>`, not part of the field's accessible name. Provide an interactive element (`ButtonInline` / `Link`). |
225
+ | `allowClear` | `boolean` | no | — | |
226
+ | `allowPasswordToggle` | `boolean` | no | — | |
227
+ | `aria-describedby` | `string` | no | — | Identifies the element (or elements) that describes the object. @see aria-labelledby |
228
+ | `autoComplete` | `"off" \| "current-password" \| "new-password"` | no | — | |
229
+ | `className` | `string` | no | — | |
230
+ | `defaultPasswordVisibility` | `boolean` | no | — | |
231
+ | `defaultValue` | `string \| null` | no | — | |
232
+ | `focusVariant` | `"off" \| "on" \| "default" \| null` | no | — | |
233
+ | `help` | `ReactNode` | no | — | |
234
+ | `label` | `ReactNode` | no | — | |
235
+ | `onValueBlur` | `((value: string) => void)` | no | — | |
236
+ | `passwordToggleLabel` | `string` | no | — | Suffix appended to the reveal button's accessible name, e.g. the field title. Use it to disambiguate multiple password fields on one form — "Show password: API token" / "Hide password: API token". Omit for a single field. |
237
+ | `required` | `boolean` | no | — | |
238
+ | `requiredMark` | `RequiredMark` | no | — | Which marker to show beside the label — gated by `required` so it never lies: `'required'` renders `*` only when the field is `required`; `'optional'` renders `(optional)` only when it is not; `'hidden'` renders neither. Defaults to `'required'`. |
239
+ | `sizing` | `"small" \| "medium" \| "default" \| null` | no | — | |
240
+ | `state` | `"warning" \| "error" \| "default" \| null` | no | — | |
241
+ | `tooltip` | `ReactNode` | no | — | |
242
+ | `variant` | `"primary" \| "secondary" \| null` | no | — | |
239
243
 
240
244
  ### `field.NumberField`
241
245
 
242
246
  Source: `src/blocks/Form/connectors/NumberField.tsx`
243
247
 
244
- | Prop | Type | Required | Default | Description |
245
- | ------------------ | ------------------------------------------ | -------- | ------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
246
- | `aria-describedby` | `string` | no | — | Identifies the element (or elements) that describes the object. @see aria-labelledby |
247
- | `className` | `string` | no | — | |
248
- | `defaultValue` | `number \| null` | no | — | |
249
- | `focusVariant` | `"off" \| "on" \| "default" \| null` | no | — | |
250
- | `help` | `ReactNode` | no | — | |
251
- | `label` | `ReactNode` | no | — | |
252
- | `onValueBlur` | `((value: number \| null) => void)` | no | — | |
253
- | `prefix` | `ReactNode` | no | — | |
254
- | `required` | `boolean` | no | — | |
255
- | `requiredMark` | `RequiredMark` | no | — | Which marker to show beside the label — gated by `required` so it never lies: `'required'` renders `*` only when the field is `required`; `'optional'` renders `(optional)` only when it is not; `'hidden'` renders neither. Defaults to `'required'`. |
256
- | `sizing` | `"small" \| "medium" \| "default" \| null` | no | — | |
257
- | `suffix` | `ReactNode` | no | — | |
258
- | `tooltip` | `ReactNode` | no | — | |
259
- | `variant` | `"primary" \| "secondary" \| null` | no | — | |
248
+ | Prop | Type | Required | Default | Description |
249
+ | ------------------ | ------------------------------------------ | -------- | ------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
250
+ | `action` | `ReactNode` | no | — | Optional node rendered at the trailing edge of the label row (opposite the label) — e.g. a "Forgot password?" link beside a Password label. Presentational placement only; it is a sibling of the `<Label>`, not part of the field's accessible name. Provide an interactive element (`ButtonInline` / `Link`). |
251
+ | `aria-describedby` | `string` | no | — | Identifies the element (or elements) that describes the object. @see aria-labelledby |
252
+ | `className` | `string` | no | — | |
253
+ | `defaultValue` | `number \| null` | no | — | |
254
+ | `focusVariant` | `"off" \| "on" \| "default" \| null` | no | — | |
255
+ | `help` | `ReactNode` | no | — | |
256
+ | `label` | `ReactNode` | no | — | |
257
+ | `onValueBlur` | `((value: number \| null) => void)` | no | — | |
258
+ | `prefix` | `ReactNode` | no | — | |
259
+ | `required` | `boolean` | no | — | |
260
+ | `requiredMark` | `RequiredMark` | no | — | Which marker to show beside the label — gated by `required` so it never lies: `'required'` renders `*` only when the field is `required`; `'optional'` renders `(optional)` only when it is not; `'hidden'` renders neither. Defaults to `'required'`. |
261
+ | `sizing` | `"small" \| "medium" \| "default" \| null` | no | — | |
262
+ | `suffix` | `ReactNode` | no | — | |
263
+ | `tooltip` | `ReactNode` | no | — | |
264
+ | `variant` | `"primary" \| "secondary" \| null` | no | — | |
260
265
 
261
266
  ### `field.SelectField`
262
267
 
263
268
  Source: `src/blocks/Form/connectors/SelectField.tsx`
264
269
 
265
- > Pass `items` (canonical, matches the base `Select`) or the deprecated `options` alias — one is required.
266
-
267
- | Prop | Type | Required | Default | Description |
268
- | ------------------ | ------------------------------------------- | -------- | ------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
269
- | `aria-describedby` | `string` | no | — | |
270
- | `autoComplete` | `string` | no | — | |
271
- | `className` | `string` | no | — | |
272
- | `defaultOpen` | `boolean` | no | — | |
273
- | `defaultValue` | `string` | no | — | |
274
- | `dir` | `"rtl" \| "ltr"` | no | — | |
275
- | `disabled` | `boolean` | no | — | |
276
- | `form` | `string` | no | — | |
277
- | `help` | `ReactNode` | no | — | |
278
- | `items` | `readonly Option[]` | no | — | |
279
- | `label` | `ReactNode` | no | — | |
280
- | `name` | `string` | no | — | |
281
- | `onOpenChange` | `((open: boolean) => void)` | no | — | |
282
- | `open` | `boolean` | no | — | |
283
- | `options` | `readonly Option[]` | no | — | @deprecated use `items` |
284
- | `placeholder` | `string` | no | — | |
285
- | `required` | `boolean` | no | — | |
286
- | `requiredMark` | `RequiredMark` | no | — | Which marker to show beside the label — gated by `required` so it never lies: `'required'` renders `*` only when the field is `required`; `'optional'` renders `(optional)` only when it is not; `'hidden'` renders neither. Defaults to `'required'`. |
287
- | `sizing` | `"small" \| "medium" \| "default" \| null` | no | — | |
288
- | `state` | `"warning" \| "error" \| "default" \| null` | no | — | |
289
- | `tooltip` | `ReactNode` | no | — | |
290
- | `triggerClassName` | `string` | no | — | |
291
- | `variant` | `"primary" \| "secondary" \| null` | no | — | |
270
+ | Prop | Type | Required | Default | Description |
271
+ | ------------------ | ---------------------------------------------- | -------- | ------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
272
+ | `items` | `readonly (SelectItem \| SelectItemGroup)[]` | yes | — | |
273
+ | `action` | `ReactNode` | no | — | Optional node rendered at the trailing edge of the label row (opposite the label) — e.g. a "Forgot password?" link beside a Password label. Presentational placement only; it is a sibling of the `<Label>`, not part of the field's accessible name. Provide an interactive element (`ButtonInline` / `Link`). |
274
+ | `aria-describedby` | `string` | no | — | |
275
+ | `autoComplete` | `string` | no | — | |
276
+ | `className` | `string` | no | — | |
277
+ | `defaultOpen` | `boolean` | no | — | |
278
+ | `dir` | `"rtl" \| "ltr"` | no | — | |
279
+ | `disabled` | `boolean` | no | — | |
280
+ | `form` | `string` | no | — | |
281
+ | `help` | `ReactNode` | no | — | |
282
+ | `label` | `ReactNode` | no | — | |
283
+ | `onOpenChange` | `((open: boolean) => void)` | no | — | |
284
+ | `open` | `boolean` | no | — | |
285
+ | `required` | `boolean` | no | — | |
286
+ | `requiredMark` | `RequiredMark` | no | — | Which marker to show beside the label — gated by `required` so it never lies: `'required'` renders `*` only when the field is `required`; `'optional'` renders `(optional)` only when it is not; `'hidden'` renders neither. Defaults to `'required'`. |
287
+ | `sizing` | `"small" \| "medium" \| "default" \| null` | no | — | |
288
+ | `state` | `"warning" \| "error" \| "default" \| null` | no | — | |
289
+ | `tooltip` | `ReactNode` | no | — | |
290
+ | `triggerClassName` | `string` | no | — | |
291
+ | `variant` | `"primary" \| "secondary" \| "inline" \| null` | no | — | |
292
292
 
293
293
  ### `field.TextareaField`
294
294
 
295
295
  Source: `src/blocks/Form/connectors/TextareaField.tsx`
296
296
 
297
- | Prop | Type | Required | Default | Description |
298
- | -------------------- | --------------------------------------------------------- | -------- | ------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
299
- | `aria-describedby` | `string` | no | — | Identifies the element (or elements) that describes the object. @see aria-labelledby |
300
- | `className` | `string` | no | — | |
301
- | `containerClassName` | `string` | no | — | |
302
- | `defaultValue` | `string \| null` | no | — | |
303
- | `disableResize` | `boolean` | no | — | |
304
- | `focusVariant` | `"off" \| "on" \| "default" \| null` | no | — | |
305
- | `help` | `ReactNode` | no | — | |
306
- | `label` | `ReactNode` | no | — | |
307
- | `maxRows` | `number \| "unlimited"` | no | — | |
308
- | `onValueBlur` | `(((value: string) => void) & ((value: string) => void))` | no | — | |
309
- | `required` | `boolean` | no | — | |
310
- | `requiredMark` | `RequiredMark` | no | — | Which marker to show beside the label — gated by `required` so it never lies: `'required'` renders `*` only when the field is `required`; `'optional'` renders `(optional)` only when it is not; `'hidden'` renders neither. Defaults to `'required'`. |
311
- | `sizing` | `"small" \| "medium" \| "default" \| null` | no | — | |
312
- | `tooltip` | `ReactNode` | no | — | |
313
- | `variant` | `"primary" \| "secondary" \| null` | no | — | |
297
+ | Prop | Type | Required | Default | Description |
298
+ | -------------------- | --------------------------------------------------------- | -------- | ------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
299
+ | `action` | `ReactNode` | no | — | Optional node rendered at the trailing edge of the label row (opposite the label) — e.g. a "Forgot password?" link beside a Password label. Presentational placement only; it is a sibling of the `<Label>`, not part of the field's accessible name. Provide an interactive element (`ButtonInline` / `Link`). |
300
+ | `aria-describedby` | `string` | no | — | Identifies the element (or elements) that describes the object. @see aria-labelledby |
301
+ | `className` | `string` | no | — | |
302
+ | `containerClassName` | `string` | no | — | |
303
+ | `defaultValue` | `string \| null` | no | — | |
304
+ | `disableResize` | `boolean` | no | — | |
305
+ | `focusVariant` | `"off" \| "on" \| "default" \| null` | no | — | |
306
+ | `help` | `ReactNode` | no | — | |
307
+ | `label` | `ReactNode` | no | — | |
308
+ | `maxRows` | `number \| "unlimited"` | no | — | |
309
+ | `onValueBlur` | `(((value: string) => void) & ((value: string) => void))` | no | — | |
310
+ | `required` | `boolean` | no | — | |
311
+ | `requiredMark` | `RequiredMark` | no | — | Which marker to show beside the label — gated by `required` so it never lies: `'required'` renders `*` only when the field is `required`; `'optional'` renders `(optional)` only when it is not; `'hidden'` renders neither. Defaults to `'required'`. |
312
+ | `sizing` | `"small" \| "medium" \| "default" \| null` | no | — | |
313
+ | `tooltip` | `ReactNode` | no | — | |
314
+ | `variant` | `"primary" \| "secondary" \| null` | no | — | |
314
315
 
315
316
  ### `field.CheckboxField`
316
317
 
@@ -344,24 +345,25 @@ Source: `src/blocks/Form/connectors/OtpInputField.tsx`
344
345
 
345
346
  > Fixed-length code; string value. Pass `maxLength` — slots are rendered for you.
346
347
 
347
- | Prop | Type | Required | Default | Description |
348
- | ----------------------------- | ------------------------------- | -------- | ------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
349
- | `maxLength` | `number` | yes | — | |
350
- | `aria-describedby` | `string` | no | — | |
351
- | `className` | `string` | no | — | |
352
- | `containerClassName` | `string` | no | — | |
353
- | `help` | `ReactNode` | no | — | |
354
- | `label` | `ReactNode` | no | — | |
355
- | `noScriptCSSFallback` | `string \| null` | no | — | |
356
- | `onComplete` | `((...args: any[]) => unknown)` | no | — | |
357
- | `pasteTransformer` | `((pasted: string) => string)` | no | — | |
358
- | `pushPasswordManagerStrategy` | `"none" \| "increase-width"` | no | — | |
359
- | `render` | `undefined` | no | — | |
360
- | `required` | `boolean` | no | — | |
361
- | `requiredMark` | `RequiredMark` | no | — | Which marker to show beside the label — gated by `required` so it never lies: `'required'` renders `*` only when the field is `required`; `'optional'` renders `(optional)` only when it is not; `'hidden'` renders neither. Defaults to `'required'`. |
362
- | `sizing` | `OtpInputSizing` | no | — | |
363
- | `textAlign` | `"center" \| "right" \| "left"` | no | — | |
364
- | `tooltip` | `ReactNode` | no | — | |
348
+ | Prop | Type | Required | Default | Description |
349
+ | ----------------------------- | ------------------------------- | -------- | ------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
350
+ | `maxLength` | `number` | yes | — | |
351
+ | `action` | `ReactNode` | no | — | Optional node rendered at the trailing edge of the label row (opposite the label) — e.g. a "Forgot password?" link beside a Password label. Presentational placement only; it is a sibling of the `<Label>`, not part of the field's accessible name. Provide an interactive element (`ButtonInline` / `Link`). |
352
+ | `aria-describedby` | `string` | no | — | |
353
+ | `className` | `string` | no | — | |
354
+ | `containerClassName` | `string` | no | — | |
355
+ | `help` | `ReactNode` | no | — | |
356
+ | `label` | `ReactNode` | no | — | |
357
+ | `noScriptCSSFallback` | `string \| null` | no | — | |
358
+ | `onComplete` | `((...args: any[]) => unknown)` | no | — | |
359
+ | `pasteTransformer` | `((pasted: string) => string)` | no | — | |
360
+ | `pushPasswordManagerStrategy` | `"none" \| "increase-width"` | no | — | |
361
+ | `render` | `undefined` | no | — | |
362
+ | `required` | `boolean` | no | — | |
363
+ | `requiredMark` | `RequiredMark` | no | — | Which marker to show beside the label — gated by `required` so it never lies: `'required'` renders `*` only when the field is `required`; `'optional'` renders `(optional)` only when it is not; `'hidden'` renders neither. Defaults to `'required'`. |
364
+ | `sizing` | `OtpInputSizing` | no | — | |
365
+ | `textAlign` | `"center" \| "right" \| "left"` | no | — | |
366
+ | `tooltip` | `ReactNode` | no | — | |
365
367
 
366
368
  ## Data display — Card (compound)
367
369
 
@@ -392,7 +394,7 @@ Source: `src/components/Card/CardTitle.tsx`
392
394
 
393
395
  | Prop | Type | Required | Default | Description |
394
396
  | ---- | -------------- | -------- | ------- | ------------------------------------------------------------------------------------------------------------------------------------------------------- |
395
- | `as` | `HeadingLevel` | no | — | Heading tag to render. Defaults to `h3`; set explicitly to avoid a heading-order skip (e.g. `as="h2"` when the Card sits directly under a page's `h1`). |
397
+ | `as` | `HeadingLevel` | no | `h3` | Heading tag to render. Defaults to `h3`; set explicitly to avoid a heading-order skip (e.g. `as="h2"` when the Card sits directly under a page's `h1`). |
396
398
 
397
399
  ### `Card.Content`
398
400
 
@@ -428,7 +430,7 @@ Source: `src/components/BrandLogo/BrandLogo.tsx`
428
430
 
429
431
  | Prop | Type | Required | Default | Description |
430
432
  | ----------- | ---------------------- | -------- | ---------- | -------------------------------------------------------------------------------------- |
431
- | `className` | `string` | no | — | Sets the logo height; aspect ratio is preserved (e.g. `tw-h-7`). |
433
+ | `className` | `string` | no | — | Sets the logo height; aspect ratio is preserved (e.g. `tw:h-7`). |
432
434
  | `variant` | `"mark" \| "wordmark"` | no | `wordmark` | `wordmark` (default, full logo) or `mark` (square icon); each falls back to the other. |
433
435
 
434
436
  ## Layout & shell