@keboola/design 6.4.0 → 6.5.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 (33) hide show
  1. package/AGENTS.md +2 -3
  2. package/COMPONENT-API.md +164 -156
  3. package/README.md +2 -2
  4. package/dist/editors.cjs +7 -9
  5. package/dist/editors.cjs.map +1 -1
  6. package/dist/editors.js +7 -9
  7. package/dist/editors.js.map +1 -1
  8. package/dist/icons.cjs +1 -0
  9. package/dist/icons.cjs.map +1 -1
  10. package/dist/icons.js +1 -0
  11. package/dist/icons.js.map +1 -1
  12. package/dist/index.cjs +5331 -5477
  13. package/dist/index.cjs.map +1 -1
  14. package/dist/index.d.cts +501 -1063
  15. package/dist/index.d.ts +501 -1063
  16. package/dist/index.js +5347 -5494
  17. package/dist/index.js.map +1 -1
  18. package/dist/markdown-editor.cjs +228 -241
  19. package/dist/markdown-editor.cjs.map +1 -1
  20. package/dist/markdown-editor.js +228 -241
  21. package/dist/markdown-editor.js.map +1 -1
  22. package/dist/mermaid.cjs +64 -33
  23. package/dist/mermaid.cjs.map +1 -1
  24. package/dist/mermaid.js +64 -33
  25. package/dist/mermaid.js.map +1 -1
  26. package/dist/rjsf.cjs +1449 -1501
  27. package/dist/rjsf.cjs.map +1 -1
  28. package/dist/rjsf.js +1451 -1503
  29. package/dist/rjsf.js.map +1 -1
  30. package/dist/styles.css +2 -2
  31. package/dist/testing.cjs.map +1 -1
  32. package/dist/testing.js.map +1 -1
  33. package/package.json +8 -7
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,74 +190,78 @@ 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
 
@@ -264,53 +269,55 @@ Source: `src/blocks/Form/connectors/SelectField.tsx`
264
269
 
265
270
  > Pass `items` (canonical, matches the base `Select`) or the deprecated `options` alias — one is required.
266
271
 
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 | — | |
272
+ | Prop | Type | Required | Default | Description |
273
+ | ------------------ | ---------------------------------------------- | -------- | ------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
274
+ | `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`). |
275
+ | `aria-describedby` | `string` | no | — | |
276
+ | `autoComplete` | `string` | no | — | |
277
+ | `className` | `string` | no | — | |
278
+ | `defaultOpen` | `boolean` | no | — | |
279
+ | `defaultValue` | `string` | no | — | |
280
+ | `dir` | `"rtl" \| "ltr"` | no | — | |
281
+ | `disabled` | `boolean` | no | — | |
282
+ | `form` | `string` | no | — | |
283
+ | `help` | `ReactNode` | no | — | |
284
+ | `items` | `readonly Option[]` | no | — | |
285
+ | `label` | `ReactNode` | no | — | |
286
+ | `name` | `string` | no | — | |
287
+ | `onOpenChange` | `((open: boolean) => void)` | no | — | |
288
+ | `open` | `boolean` | no | — | |
289
+ | `options` | `readonly Option[]` | no | — | @deprecated use `items` |
290
+ | `placeholder` | `string` | no | — | |
291
+ | `required` | `boolean` | no | — | |
292
+ | `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'`. |
293
+ | `sizing` | `"small" \| "medium" \| "default" \| null` | no | — | |
294
+ | `state` | `"warning" \| "error" \| "default" \| null` | no | — | |
295
+ | `tooltip` | `ReactNode` | no | — | |
296
+ | `triggerClassName` | `string` | no | — | |
297
+ | `variant` | `"primary" \| "secondary" \| "inline" \| null` | no | — | |
292
298
 
293
299
  ### `field.TextareaField`
294
300
 
295
301
  Source: `src/blocks/Form/connectors/TextareaField.tsx`
296
302
 
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 | — | |
303
+ | Prop | Type | Required | Default | Description |
304
+ | -------------------- | --------------------------------------------------------- | -------- | ------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
305
+ | `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`). |
306
+ | `aria-describedby` | `string` | no | — | Identifies the element (or elements) that describes the object. @see aria-labelledby |
307
+ | `className` | `string` | no | — | |
308
+ | `containerClassName` | `string` | no | — | |
309
+ | `defaultValue` | `string \| null` | no | — | |
310
+ | `disableResize` | `boolean` | no | — | |
311
+ | `focusVariant` | `"off" \| "on" \| "default" \| null` | no | — | |
312
+ | `help` | `ReactNode` | no | — | |
313
+ | `label` | `ReactNode` | no | — | |
314
+ | `maxRows` | `number \| "unlimited"` | no | — | |
315
+ | `onValueBlur` | `(((value: string) => void) & ((value: string) => void))` | no | — | |
316
+ | `required` | `boolean` | no | — | |
317
+ | `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'`. |
318
+ | `sizing` | `"small" \| "medium" \| "default" \| null` | no | — | |
319
+ | `tooltip` | `ReactNode` | no | — | |
320
+ | `variant` | `"primary" \| "secondary" \| null` | no | — | |
314
321
 
315
322
  ### `field.CheckboxField`
316
323
 
@@ -344,24 +351,25 @@ Source: `src/blocks/Form/connectors/OtpInputField.tsx`
344
351
 
345
352
  > Fixed-length code; string value. Pass `maxLength` — slots are rendered for you.
346
353
 
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 | — | |
354
+ | Prop | Type | Required | Default | Description |
355
+ | ----------------------------- | ------------------------------- | -------- | ------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
356
+ | `maxLength` | `number` | yes | — | |
357
+ | `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`). |
358
+ | `aria-describedby` | `string` | no | — | |
359
+ | `className` | `string` | no | — | |
360
+ | `containerClassName` | `string` | no | — | |
361
+ | `help` | `ReactNode` | no | — | |
362
+ | `label` | `ReactNode` | no | — | |
363
+ | `noScriptCSSFallback` | `string \| null` | no | — | |
364
+ | `onComplete` | `((...args: any[]) => unknown)` | no | — | |
365
+ | `pasteTransformer` | `((pasted: string) => string)` | no | — | |
366
+ | `pushPasswordManagerStrategy` | `"none" \| "increase-width"` | no | — | |
367
+ | `render` | `undefined` | no | — | |
368
+ | `required` | `boolean` | no | — | |
369
+ | `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'`. |
370
+ | `sizing` | `OtpInputSizing` | no | — | |
371
+ | `textAlign` | `"center" \| "right" \| "left"` | no | — | |
372
+ | `tooltip` | `ReactNode` | no | — | |
365
373
 
366
374
  ## Data display — Card (compound)
367
375