@utilitywarehouse/hearth-react 0.29.8 → 0.30.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/index.cjs +1 -1
- package/dist/index.cjs.map +1 -1
- package/dist/index.js +1 -1
- package/package.json +7 -7
- package/public/llms/components/accordion.md +15 -22
- package/public/llms/components/alert.md +6 -25
- package/public/llms/components/avatar.md +6 -13
- package/public/llms/components/badge.md +6 -14
- package/public/llms/components/body-text.md +8 -20
- package/public/llms/components/box.md +5 -78
- package/public/llms/components/button.md +9 -16
- package/public/llms/components/card-accordion.md +7 -25
- package/public/llms/components/card.md +4 -11
- package/public/llms/components/checkbox-group.md +16 -23
- package/public/llms/components/checkbox-tile.md +13 -20
- package/public/llms/components/checkbox.md +13 -20
- package/public/llms/components/combobox.md +49 -56
- package/public/llms/components/container.md +0 -61
- package/public/llms/components/currency-input.md +13 -20
- package/public/llms/components/date-input.md +30 -37
- package/public/llms/components/date-picker.md +0 -7
- package/public/llms/components/description-list.md +9 -19
- package/public/llms/components/detail-text.md +7 -18
- package/public/llms/components/divider.md +4 -11
- package/public/llms/components/em.md +4 -15
- package/public/llms/components/expandable-card.md +17 -31
- package/public/llms/components/grid.md +15 -97
- package/public/llms/components/heading.md +6 -17
- package/public/llms/components/helper-text.md +4 -13
- package/public/llms/components/highlight-banner.md +6 -13
- package/public/llms/components/icon-button.md +9 -16
- package/public/llms/components/icon-container.md +6 -18
- package/public/llms/components/inline-link.md +5 -13
- package/public/llms/components/label.md +7 -15
- package/public/llms/components/link.md +5 -13
- package/public/llms/components/list.md +16 -29
- package/public/llms/components/pagination.md +8 -15
- package/public/llms/components/password-input.md +12 -19
- package/public/llms/components/progress-bar.md +12 -19
- package/public/llms/components/progress-stepper.md +4 -11
- package/public/llms/components/radio-group.md +27 -45
- package/public/llms/components/search-input.md +13 -20
- package/public/llms/components/section-header.md +9 -16
- package/public/llms/components/select.md +20 -27
- package/public/llms/components/skeleton.md +7 -27
- package/public/llms/components/spinner.md +4 -12
- package/public/llms/components/strong.md +4 -15
- package/public/llms/components/switch.md +9 -16
- package/public/llms/components/table.md +4 -11
- package/public/llms/components/text-area.md +14 -21
- package/public/llms/components/text-input.md +14 -21
- package/public/llms/components/toggle-button-card.md +3 -88
- package/public/llms/components/validation-text.md +4 -13
- package/public/llms/components/verification-input.md +26 -33
- package/public/llms/docs/common-props/align-self.md +3 -78
- package/public/llms/docs/common-props/border.md +30 -234
- package/public/llms/docs/common-props/colour.md +6 -156
- package/public/llms/docs/common-props/flex-items.md +6 -78
- package/public/llms/docs/common-props/gap.md +5 -87
- package/public/llms/docs/common-props/grid-items.md +10 -78
- package/public/llms/docs/common-props/margin.md +9 -78
- package/public/llms/docs/common-props/opacity.md +3 -78
- package/public/llms/docs/common-props/order.md +0 -79
- package/public/llms/docs/common-props/overflow.md +5 -78
- package/public/llms/docs/common-props/padding.md +9 -78
- package/public/llms/docs/common-props/position.md +8 -78
- package/public/llms/docs/common-props/size.md +8 -78
- package/public/llms/docs/common-props/spacing.md +3 -87
- package/public/llms/docs/common-props/text.md +6 -20
- package/public/llms/docs/common-props/z-index.md +3 -78
- package/public/llms/docs/getting-started.md +1 -1
- package/public/llms/docs/responsive-design/breakpoints.md +2 -2
- package/styles.css +2 -2
|
@@ -397,31 +397,24 @@ This component is based on the `fieldset` element and supports the following com
|
|
|
397
397
|
|
|
398
398
|
- Margin
|
|
399
399
|
|
|
400
|
-
| Prop | Type
|
|
401
|
-
| --------------------- |
|
|
402
|
-
| `label` | `ReactNode`
|
|
403
|
-
| `defaultValue` | `string`
|
|
404
|
-
| `asChild` | `boolean`
|
|
405
|
-
| `name` | `string`
|
|
406
|
-
| `required` | `boolean`
|
|
407
|
-
| `disabled` | `boolean`
|
|
408
|
-
| `loop` | `boolean`
|
|
409
|
-
| `value` | `string \| null`
|
|
410
|
-
| `onValueChange` | `((value: string) => void)`
|
|
411
|
-
| `labelVariant` | `"body" \| "heading"`
|
|
412
|
-
| `helperText` | `ReactNode`
|
|
413
|
-
| `validationText` | `ReactNode`
|
|
414
|
-
| `validationStatus` | `"valid" \| "invalid"`
|
|
415
|
-
| `validationPlacement` | `"top" \| "bottom"`
|
|
416
|
-
| `
|
|
417
|
-
| `
|
|
418
|
-
| `marginRight` | `Responsive<"0" \| "auto" \| `var(--h-${string})` \| "25" \| "50" \| "75" \| "100" \| "150" \| "175" \| "200" \| "250" \| "300" \| "350" \| "400" \| "500" \| "600" \| "700" \| "800" \| "900" \| "1000">` | — | |
|
|
419
|
-
| `marginBottom` | `Responsive<"0" \| "auto" \| `var(--h-${string})` \| "25" \| "50" \| "75" \| "100" \| "150" \| "175" \| "200" \| "250" \| "300" \| "350" \| "400" \| "500" \| "600" \| "700" \| "800" \| "900" \| "1000">` | — | |
|
|
420
|
-
| `marginLeft` | `Responsive<"0" \| "auto" \| `var(--h-${string})` \| "25" \| "50" \| "75" \| "100" \| "150" \| "175" \| "200" \| "250" \| "300" \| "350" \| "400" \| "500" \| "600" \| "700" \| "800" \| "900" \| "1000">` | — | |
|
|
421
|
-
| `marginX` | `Responsive<"0" \| "auto" \| `var(--h-${string})` \| "25" \| "50" \| "75" \| "100" \| "150" \| "175" \| "200" \| "250" \| "300" \| "350" \| "400" \| "500" \| "600" \| "700" \| "800" \| "900" \| "1000">` | — | |
|
|
422
|
-
| `marginY` | `Responsive<"0" \| "auto" \| `var(--h-${string})` \| "25" \| "50" \| "75" \| "100" \| "150" \| "175" \| "200" \| "250" \| "300" \| "350" \| "400" \| "500" \| "600" \| "700" \| "800" \| "900" \| "1000">` | — | |
|
|
423
|
-
| `direction` | `Responsive<"row" \| "column" \| "row-reverse" \| "column-reverse">` | `column` | |
|
|
424
|
-
| `contentWidth` | `Responsive<string>` | — | Set the container width of the RadioGroup children, independent to the width of the parent RadioGroup. |
|
|
400
|
+
| Prop | Type | Default | Description |
|
|
401
|
+
| --------------------- | -------------------------------------------------------------------- | -------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
|
|
402
|
+
| `label` | `ReactNode` | — | The label for the formfield group. This should contain the question being answered by the formfield group. If you don't include a label you need to ensure you use the `aria-label` or `aria-labelledby` prop to properly associate a label with the formfield group. |
|
|
403
|
+
| `defaultValue` | `string` | — | |
|
|
404
|
+
| `asChild` | `boolean` | — | |
|
|
405
|
+
| `name` | `string` | — | |
|
|
406
|
+
| `required` | `boolean` | — | |
|
|
407
|
+
| `disabled` | `boolean` | — | |
|
|
408
|
+
| `loop` | `boolean` | — | |
|
|
409
|
+
| `value` | `string \| null` | — | |
|
|
410
|
+
| `onValueChange` | `((value: string) => void)` | — | |
|
|
411
|
+
| `labelVariant` | `"body" \| "heading"` | — | Set the label variant |
|
|
412
|
+
| `helperText` | `ReactNode` | — | Helper text for the formfield group. Provides a hint such as specific requirements for what to choose. When displayed, child components should not display their own `helperText`. |
|
|
413
|
+
| `validationText` | `ReactNode` | — | |
|
|
414
|
+
| `validationStatus` | `"valid" \| "invalid"` | — | |
|
|
415
|
+
| `validationPlacement` | `"top" \| "bottom"` | — | |
|
|
416
|
+
| `direction` | `Responsive<"row" \| "column" \| "row-reverse" \| "column-reverse">` | `column` | |
|
|
417
|
+
| `contentWidth` | `Responsive<string>` | — | Set the container width of the RadioGroup children, independent to the width of the parent RadioGroup. |
|
|
425
418
|
|
|
426
419
|
### Radio API
|
|
427
420
|
|
|
@@ -458,10 +451,6 @@ This component is based on the `button` element and supports the following commo
|
|
|
458
451
|
| `labelFontWeight` | `"regular" \| "semibold"` | — | |
|
|
459
452
|
| `helperText` | `ReactNode` | — | Helper text for the Radio. Will not display if the radio group has `helperText` set. |
|
|
460
453
|
| `badge` | `ReactNode` | — | |
|
|
461
|
-
| `flex` | `Responsive<string>` | — | |
|
|
462
|
-
| `flexBasis` | `Responsive<string>` | — | |
|
|
463
|
-
| `flexShrink` | `Responsive<string>` | — | |
|
|
464
|
-
| `flexGrow` | `Responsive<string>` | — | |
|
|
465
454
|
|
|
466
455
|
### RadioCard API
|
|
467
456
|
|
|
@@ -469,19 +458,12 @@ This component is based on the `button` element and supports the following commo
|
|
|
469
458
|
|
|
470
459
|
- Margin
|
|
471
460
|
|
|
472
|
-
| Prop | Type
|
|
473
|
-
| ----------------- |
|
|
474
|
-
| `label` | `ReactNode`
|
|
475
|
-
| `image` | `ReactNode`
|
|
476
|
-
| `value` | `string`
|
|
477
|
-
| `asChild` | `boolean`
|
|
478
|
-
| `checked` | `boolean`
|
|
479
|
-
| `required` | `boolean`
|
|
480
|
-
| `labelFontWeight` | `"regular" \| "semibold"`
|
|
481
|
-
| `margin` | `Responsive<"0" \| "auto" \| "25" \| "50" \| "75" \| "100" \| "150" \| "175" \| "200" \| "250" \| "300" \| "350" \| "400" \| "500" \| "600" \| "700" \| "800" \| "900" \| "1000" \| `var(--h-${string})`>` | — | |
|
|
482
|
-
| `marginTop` | `Responsive<"0" \| "auto" \| "25" \| "50" \| "75" \| "100" \| "150" \| "175" \| "200" \| "250" \| "300" \| "350" \| "400" \| "500" \| "600" \| "700" \| "800" \| "900" \| "1000" \| `var(--h-${string})`>` | — | |
|
|
483
|
-
| `marginRight` | `Responsive<"0" \| "auto" \| "25" \| "50" \| "75" \| "100" \| "150" \| "175" \| "200" \| "250" \| "300" \| "350" \| "400" \| "500" \| "600" \| "700" \| "800" \| "900" \| "1000" \| `var(--h-${string})`>` | — | |
|
|
484
|
-
| `marginBottom` | `Responsive<"0" \| "auto" \| "25" \| "50" \| "75" \| "100" \| "150" \| "175" \| "200" \| "250" \| "300" \| "350" \| "400" \| "500" \| "600" \| "700" \| "800" \| "900" \| "1000" \| `var(--h-${string})`>` | — | |
|
|
485
|
-
| `marginLeft` | `Responsive<"0" \| "auto" \| "25" \| "50" \| "75" \| "100" \| "150" \| "175" \| "200" \| "250" \| "300" \| "350" \| "400" \| "500" \| "600" \| "700" \| "800" \| "900" \| "1000" \| `var(--h-${string})`>` | — | |
|
|
486
|
-
| `marginX` | `Responsive<"0" \| "auto" \| "25" \| "50" \| "75" \| "100" \| "150" \| "175" \| "200" \| "250" \| "300" \| "350" \| "400" \| "500" \| "600" \| "700" \| "800" \| "900" \| "1000" \| `var(--h-${string})`>` | — | |
|
|
487
|
-
| `marginY` | `Responsive<"0" \| "auto" \| "25" \| "50" \| "75" \| "100" \| "150" \| "175" \| "200" \| "250" \| "300" \| "350" \| "400" \| "500" \| "600" \| "700" \| "800" \| "900" \| "1000" \| `var(--h-${string})`>` | — | |
|
|
461
|
+
| Prop | Type | Default | Description |
|
|
462
|
+
| ----------------- | ------------------------- | ------- | ----------------------------------------------------------------------------------------------------------------------------------------- |
|
|
463
|
+
| `label` | `ReactNode` | — | The label for the Radio. If not using please properly associate the Radio with a label using the `aria-label` or `aria-labelledby` props. |
|
|
464
|
+
| `image` | `ReactNode` | — | Optional image to show between the radio indicator and label. |
|
|
465
|
+
| `value` | `string` | — | |
|
|
466
|
+
| `asChild` | `boolean` | — | |
|
|
467
|
+
| `checked` | `boolean` | — | |
|
|
468
|
+
| `required` | `boolean` | — | |
|
|
469
|
+
| `labelFontWeight` | `"regular" \| "semibold"` | — | |
|
|
@@ -110,23 +110,16 @@ This component is based on the `TextInput` component and supports the following
|
|
|
110
110
|
|
|
111
111
|
- Margin
|
|
112
112
|
|
|
113
|
-
| Prop | Type
|
|
114
|
-
| ------------------ |
|
|
115
|
-
| `label` | `string`
|
|
116
|
-
| `defaultValue` | `string \| number`
|
|
117
|
-
| `value` | `string \| number`
|
|
118
|
-
| `labelId` | `string`
|
|
119
|
-
| `helperTextId` | `string`
|
|
120
|
-
| `validationTextId` | `string`
|
|
121
|
-
| `hideLabel` | `boolean`
|
|
122
|
-
| `labelVariant` | `"body" \| "heading"`
|
|
123
|
-
| `helperText` | `string`
|
|
124
|
-
| `
|
|
125
|
-
| `
|
|
126
|
-
| `marginRight` | `Responsive<"auto" \| "0" \| "25" \| "50" \| "75" \| "100" \| "150" \| "175" \| "200" \| "250" \| "300" \| "350" \| "400" \| "500" \| "600" \| "700" \| "800" \| "900" \| "1000" \| `var(--h-${string})`>` | — | |
|
|
127
|
-
| `marginBottom` | `Responsive<"auto" \| "0" \| "25" \| "50" \| "75" \| "100" \| "150" \| "175" \| "200" \| "250" \| "300" \| "350" \| "400" \| "500" \| "600" \| "700" \| "800" \| "900" \| "1000" \| `var(--h-${string})`>` | — | |
|
|
128
|
-
| `marginLeft` | `Responsive<"auto" \| "0" \| "25" \| "50" \| "75" \| "100" \| "150" \| "175" \| "200" \| "250" \| "300" \| "350" \| "400" \| "500" \| "600" \| "700" \| "800" \| "900" \| "1000" \| `var(--h-${string})`>` | — | |
|
|
129
|
-
| `marginX` | `Responsive<"auto" \| "0" \| "25" \| "50" \| "75" \| "100" \| "150" \| "175" \| "200" \| "250" \| "300" \| "350" \| "400" \| "500" \| "600" \| "700" \| "800" \| "900" \| "1000" \| `var(--h-${string})`>` | — | |
|
|
130
|
-
| `marginY` | `Responsive<"auto" \| "0" \| "25" \| "50" \| "75" \| "100" \| "150" \| "175" \| "200" \| "250" \| "300" \| "350" \| "400" \| "500" \| "600" \| "700" \| "800" \| "900" \| "1000" \| `var(--h-${string})`>` | — | |
|
|
131
|
-
| `onClear` | `(() => void)` | — | |
|
|
132
|
-
| `loading` | `boolean` | — | |
|
|
113
|
+
| Prop | Type | Default | Description |
|
|
114
|
+
| ------------------ | --------------------- | ------- | --------------------------------------------------------------------------- |
|
|
115
|
+
| `label` | `string` | — | The label for the form field, describing its purpose. |
|
|
116
|
+
| `defaultValue` | `string \| number` | — | The initial value of the input when rendered. |
|
|
117
|
+
| `value` | `string \| number` | — | The controlled value of the input. Must be used with an `onChange` handler. |
|
|
118
|
+
| `labelId` | `string` | — | |
|
|
119
|
+
| `helperTextId` | `string` | — | |
|
|
120
|
+
| `validationTextId` | `string` | — | |
|
|
121
|
+
| `hideLabel` | `boolean` | `true` | Visually hide the label. |
|
|
122
|
+
| `labelVariant` | `"body" \| "heading"` | — | Change the label variant |
|
|
123
|
+
| `helperText` | `string` | — | Optional helper text to provide additional context or instructions. |
|
|
124
|
+
| `onClear` | `(() => void)` | — | |
|
|
125
|
+
| `loading` | `boolean` | — | |
|
|
@@ -64,19 +64,12 @@ This component is based on the `div` element and supports the following common p
|
|
|
64
64
|
|
|
65
65
|
- Margin
|
|
66
66
|
|
|
67
|
-
| Prop | Type
|
|
68
|
-
| ------------------ |
|
|
69
|
-
| `heading` | `string`
|
|
70
|
-
| `headingElement` | `"div" \| "h1" \| "h2" \| "h3" \| "h4"`
|
|
71
|
-
| `helperText` | `string`
|
|
72
|
-
| `trailingContent` | `ReactNode`
|
|
73
|
-
| `validationStatus` | `"invalid"`
|
|
74
|
-
| `validationText` | `string`
|
|
75
|
-
| `direction` | `Responsive<"row" \| "column">`
|
|
76
|
-
| `margin` | `Responsive<"auto" \| "0" \| "25" \| "50" \| "75" \| "100" \| "150" \| "175" \| "200" \| "250" \| "300" \| "350" \| "400" \| "500" \| "600" \| "700" \| "800" \| "900" \| "1000" \| `var(--h-${string})`>` | — | |
|
|
77
|
-
| `marginTop` | `Responsive<"auto" \| "0" \| "25" \| "50" \| "75" \| "100" \| "150" \| "175" \| "200" \| "250" \| "300" \| "350" \| "400" \| "500" \| "600" \| "700" \| "800" \| "900" \| "1000" \| `var(--h-${string})`>` | — | |
|
|
78
|
-
| `marginRight` | `Responsive<"auto" \| "0" \| "25" \| "50" \| "75" \| "100" \| "150" \| "175" \| "200" \| "250" \| "300" \| "350" \| "400" \| "500" \| "600" \| "700" \| "800" \| "900" \| "1000" \| `var(--h-${string})`>` | — | |
|
|
79
|
-
| `marginBottom` | `Responsive<"auto" \| "0" \| "25" \| "50" \| "75" \| "100" \| "150" \| "175" \| "200" \| "250" \| "300" \| "350" \| "400" \| "500" \| "600" \| "700" \| "800" \| "900" \| "1000" \| `var(--h-${string})`>` | — | |
|
|
80
|
-
| `marginLeft` | `Responsive<"auto" \| "0" \| "25" \| "50" \| "75" \| "100" \| "150" \| "175" \| "200" \| "250" \| "300" \| "350" \| "400" \| "500" \| "600" \| "700" \| "800" \| "900" \| "1000" \| `var(--h-${string})`>` | — | |
|
|
81
|
-
| `marginX` | `Responsive<"auto" \| "0" \| "25" \| "50" \| "75" \| "100" \| "150" \| "175" \| "200" \| "250" \| "300" \| "350" \| "400" \| "500" \| "600" \| "700" \| "800" \| "900" \| "1000" \| `var(--h-${string})`>` | — | |
|
|
82
|
-
| `marginY` | `Responsive<"auto" \| "0" \| "25" \| "50" \| "75" \| "100" \| "150" \| "175" \| "200" \| "250" \| "300" \| "350" \| "400" \| "500" \| "600" \| "700" \| "800" \| "900" \| "1000" \| `var(--h-${string})`>` | — | |
|
|
67
|
+
| Prop | Type | Default | Description |
|
|
68
|
+
| ------------------ | --------------------------------------- | ------- | ------------------------------------------------------------------------------------------------- |
|
|
69
|
+
| `heading` | `string` | — | Actual string to display as section header |
|
|
70
|
+
| `headingElement` | `"div" \| "h1" \| "h2" \| "h3" \| "h4"` | `div` | |
|
|
71
|
+
| `helperText` | `string` | — | Optional helper text to provide additional context or instructions. |
|
|
72
|
+
| `trailingContent` | `ReactNode` | — | Optional trailing content element |
|
|
73
|
+
| `validationStatus` | `"invalid"` | — | Indicates the validation state |
|
|
74
|
+
| `validationText` | `string` | — | Text to display when the `validationStatus` is set. |
|
|
75
|
+
| `direction` | `Responsive<"row" \| "column">` | — | Responsive direction of the section header content. By default, the content is laid out in a row. |
|
|
@@ -115,33 +115,26 @@ This component is based on the `button` element and supports the following commo
|
|
|
115
115
|
|
|
116
116
|
- Margin
|
|
117
117
|
|
|
118
|
-
| Prop | Type
|
|
119
|
-
| ------------------ |
|
|
120
|
-
| `label` | `string`
|
|
121
|
-
| `value` | `string`
|
|
122
|
-
| `defaultValue` | `string`
|
|
123
|
-
| `asChild` | `boolean`
|
|
124
|
-
| `open` | `boolean`
|
|
125
|
-
| `defaultOpen` | `boolean`
|
|
126
|
-
| `onOpenChange` | `((open: boolean) => void)`
|
|
127
|
-
| `autoComplete` | `string`
|
|
128
|
-
| `required` | `boolean`
|
|
129
|
-
| `onValueChange` | `((value: string) => void)`
|
|
130
|
-
| `labelId` | `string`
|
|
131
|
-
| `helperTextId` | `string`
|
|
132
|
-
| `validationTextId` | `string`
|
|
133
|
-
| `labelVariant` | `"body" \| "heading"`
|
|
134
|
-
| `helperText` | `string`
|
|
135
|
-
| `validationText` | `string`
|
|
136
|
-
| `validationStatus` | `"valid" \| "invalid"`
|
|
137
|
-
| `placeholder` | `string`
|
|
138
|
-
| `margin` | `Responsive<"0" \| "auto" \| "25" \| "50" \| "75" \| "100" \| "150" \| "175" \| "200" \| "250" \| "300" \| "350" \| "400" \| "500" \| "600" \| "700" \| "800" \| "900" \| "1000" \| `var(--h-${string})`>` | — | |
|
|
139
|
-
| `marginTop` | `Responsive<"0" \| "auto" \| "25" \| "50" \| "75" \| "100" \| "150" \| "175" \| "200" \| "250" \| "300" \| "350" \| "400" \| "500" \| "600" \| "700" \| "800" \| "900" \| "1000" \| `var(--h-${string})`>` | — | |
|
|
140
|
-
| `marginRight` | `Responsive<"0" \| "auto" \| "25" \| "50" \| "75" \| "100" \| "150" \| "175" \| "200" \| "250" \| "300" \| "350" \| "400" \| "500" \| "600" \| "700" \| "800" \| "900" \| "1000" \| `var(--h-${string})`>` | — | |
|
|
141
|
-
| `marginBottom` | `Responsive<"0" \| "auto" \| "25" \| "50" \| "75" \| "100" \| "150" \| "175" \| "200" \| "250" \| "300" \| "350" \| "400" \| "500" \| "600" \| "700" \| "800" \| "900" \| "1000" \| `var(--h-${string})`>` | — | |
|
|
142
|
-
| `marginLeft` | `Responsive<"0" \| "auto" \| "25" \| "50" \| "75" \| "100" \| "150" \| "175" \| "200" \| "250" \| "300" \| "350" \| "400" \| "500" \| "600" \| "700" \| "800" \| "900" \| "1000" \| `var(--h-${string})`>` | — | |
|
|
143
|
-
| `marginX` | `Responsive<"0" \| "auto" \| "25" \| "50" \| "75" \| "100" \| "150" \| "175" \| "200" \| "250" \| "300" \| "350" \| "400" \| "500" \| "600" \| "700" \| "800" \| "900" \| "1000" \| `var(--h-${string})`>` | — | |
|
|
144
|
-
| `marginY` | `Responsive<"0" \| "auto" \| "25" \| "50" \| "75" \| "100" \| "150" \| "175" \| "200" \| "250" \| "300" \| "350" \| "400" \| "500" \| "600" \| "700" \| "800" \| "900" \| "1000" \| `var(--h-${string})`>` | — | |
|
|
118
|
+
| Prop | Type | Default | Description |
|
|
119
|
+
| ------------------ | --------------------------- | ------- | ------------------------------------------------------------------- |
|
|
120
|
+
| `label` | `string` | — | The label for the form field, describing its purpose. |
|
|
121
|
+
| `value` | `string` | — | |
|
|
122
|
+
| `defaultValue` | `string` | — | |
|
|
123
|
+
| `asChild` | `boolean` | — | |
|
|
124
|
+
| `open` | `boolean` | — | |
|
|
125
|
+
| `defaultOpen` | `boolean` | — | |
|
|
126
|
+
| `onOpenChange` | `((open: boolean) => void)` | — | |
|
|
127
|
+
| `autoComplete` | `string` | — | |
|
|
128
|
+
| `required` | `boolean` | — | |
|
|
129
|
+
| `onValueChange` | `((value: string) => void)` | — | |
|
|
130
|
+
| `labelId` | `string` | — | |
|
|
131
|
+
| `helperTextId` | `string` | — | |
|
|
132
|
+
| `validationTextId` | `string` | — | |
|
|
133
|
+
| `labelVariant` | `"body" \| "heading"` | — | Change the label variant |
|
|
134
|
+
| `helperText` | `string` | — | Optional helper text to provide additional context or instructions. |
|
|
135
|
+
| `validationText` | `string` | — | Text to display when the `validationStatus` is set. |
|
|
136
|
+
| `validationStatus` | `"valid" \| "invalid"` | — | Indicates the validation status. |
|
|
137
|
+
| `placeholder` | `string` | — | |
|
|
145
138
|
|
|
146
139
|
### SelectItem API
|
|
147
140
|
|
|
@@ -245,20 +245,10 @@ This component is based on `div` and supports the following common props:
|
|
|
245
245
|
- Margin
|
|
246
246
|
- Size (width props only)
|
|
247
247
|
|
|
248
|
-
| Prop
|
|
249
|
-
|
|
|
250
|
-
| `
|
|
251
|
-
| `
|
|
252
|
-
| `minWidth` | `Responsive<string>` | — | |
|
|
253
|
-
| `size` | `Responsive<"sm" \| "md" \| "lg">` | `md` | Set the size to match BodyText size. |
|
|
254
|
-
| `lines` | `"1" \| "2" \| "3" \| "4" \| "5" \| "6" \| "7" \| "8" \| "9" \| "10" \| "11" \| "12"` | `1` | Number of skeleton lines to render. |
|
|
255
|
-
| `margin` | `Responsive<"auto" \| "0" \| "25" \| "50" \| "75" \| "100" \| "150" \| "175" \| "200" \| "250" \| "300" \| "350" \| "400" \| "500" \| "600" \| "700" \| "800" \| "900" \| "1000" \| `var(--h-${string})`>` | — | |
|
|
256
|
-
| `marginTop` | `Responsive<"auto" \| "0" \| "25" \| "50" \| "75" \| "100" \| "150" \| "175" \| "200" \| "250" \| "300" \| "350" \| "400" \| "500" \| "600" \| "700" \| "800" \| "900" \| "1000" \| `var(--h-${string})`>` | — | |
|
|
257
|
-
| `marginRight` | `Responsive<"auto" \| "0" \| "25" \| "50" \| "75" \| "100" \| "150" \| "175" \| "200" \| "250" \| "300" \| "350" \| "400" \| "500" \| "600" \| "700" \| "800" \| "900" \| "1000" \| `var(--h-${string})`>` | — | |
|
|
258
|
-
| `marginBottom` | `Responsive<"auto" \| "0" \| "25" \| "50" \| "75" \| "100" \| "150" \| "175" \| "200" \| "250" \| "300" \| "350" \| "400" \| "500" \| "600" \| "700" \| "800" \| "900" \| "1000" \| `var(--h-${string})`>` | — | |
|
|
259
|
-
| `marginLeft` | `Responsive<"auto" \| "0" \| "25" \| "50" \| "75" \| "100" \| "150" \| "175" \| "200" \| "250" \| "300" \| "350" \| "400" \| "500" \| "600" \| "700" \| "800" \| "900" \| "1000" \| `var(--h-${string})`>` | — | |
|
|
260
|
-
| `marginX` | `Responsive<"auto" \| "0" \| "25" \| "50" \| "75" \| "100" \| "150" \| "175" \| "200" \| "250" \| "300" \| "350" \| "400" \| "500" \| "600" \| "700" \| "800" \| "900" \| "1000" \| `var(--h-${string})`>` | — | |
|
|
261
|
-
| `marginY` | `Responsive<"auto" \| "0" \| "25" \| "50" \| "75" \| "100" \| "150" \| "175" \| "200" \| "250" \| "300" \| "350" \| "400" \| "500" \| "600" \| "700" \| "800" \| "900" \| "1000" \| `var(--h-${string})`>` | — | |
|
|
248
|
+
| Prop | Type | Default | Description |
|
|
249
|
+
| ------- | ------------------------------------------------------------------------------------- | ------- | ------------------------------------ |
|
|
250
|
+
| `size` | `Responsive<"sm" \| "md" \| "lg">` | `md` | Set the size to match BodyText size. |
|
|
251
|
+
| `lines` | `"1" \| "2" \| "3" \| "4" \| "5" \| "6" \| "7" \| "8" \| "9" \| "10" \| "11" \| "12"` | `1` | Number of skeleton lines to render. |
|
|
262
252
|
|
|
263
253
|
### SkeletonHeading API
|
|
264
254
|
|
|
@@ -267,16 +257,6 @@ This component is based on `div` and supports the following common props:
|
|
|
267
257
|
- Margin
|
|
268
258
|
- Size (width props only)
|
|
269
259
|
|
|
270
|
-
| Prop
|
|
271
|
-
|
|
|
272
|
-
| `
|
|
273
|
-
| `maxWidth` | `Responsive<string>` | — | |
|
|
274
|
-
| `minWidth` | `Responsive<string>` | — | |
|
|
275
|
-
| `size` | `"sm" \| "md" \| "lg" \| "xl" \| "2xl"` | `md` | Set the size to match Heading size. |
|
|
276
|
-
| `margin` | `Responsive<"auto" \| "0" \| "25" \| "50" \| "75" \| "100" \| "150" \| "175" \| "200" \| "250" \| "300" \| "350" \| "400" \| "500" \| "600" \| "700" \| "800" \| "900" \| "1000" \| `var(--h-${string})`>` | — | |
|
|
277
|
-
| `marginTop` | `Responsive<"auto" \| "0" \| "25" \| "50" \| "75" \| "100" \| "150" \| "175" \| "200" \| "250" \| "300" \| "350" \| "400" \| "500" \| "600" \| "700" \| "800" \| "900" \| "1000" \| `var(--h-${string})`>` | — | |
|
|
278
|
-
| `marginRight` | `Responsive<"auto" \| "0" \| "25" \| "50" \| "75" \| "100" \| "150" \| "175" \| "200" \| "250" \| "300" \| "350" \| "400" \| "500" \| "600" \| "700" \| "800" \| "900" \| "1000" \| `var(--h-${string})`>` | — | |
|
|
279
|
-
| `marginBottom` | `Responsive<"auto" \| "0" \| "25" \| "50" \| "75" \| "100" \| "150" \| "175" \| "200" \| "250" \| "300" \| "350" \| "400" \| "500" \| "600" \| "700" \| "800" \| "900" \| "1000" \| `var(--h-${string})`>` | — | |
|
|
280
|
-
| `marginLeft` | `Responsive<"auto" \| "0" \| "25" \| "50" \| "75" \| "100" \| "150" \| "175" \| "200" \| "250" \| "300" \| "350" \| "400" \| "500" \| "600" \| "700" \| "800" \| "900" \| "1000" \| `var(--h-${string})`>` | — | |
|
|
281
|
-
| `marginX` | `Responsive<"auto" \| "0" \| "25" \| "50" \| "75" \| "100" \| "150" \| "175" \| "200" \| "250" \| "300" \| "350" \| "400" \| "500" \| "600" \| "700" \| "800" \| "900" \| "1000" \| `var(--h-${string})`>` | — | |
|
|
282
|
-
| `marginY` | `Responsive<"auto" \| "0" \| "25" \| "50" \| "75" \| "100" \| "150" \| "175" \| "200" \| "250" \| "300" \| "350" \| "400" \| "500" \| "600" \| "700" \| "800" \| "900" \| "1000" \| `var(--h-${string})`>` | — | |
|
|
260
|
+
| Prop | Type | Default | Description |
|
|
261
|
+
| ------ | --------------------------------------- | ------- | ----------------------------------- |
|
|
262
|
+
| `size` | `"sm" \| "md" \| "lg" \| "xl" \| "2xl"` | `md` | Set the size to match Heading size. |
|
|
@@ -45,15 +45,7 @@ This component is based on the `div` element and supports the following common p
|
|
|
45
45
|
- Color
|
|
46
46
|
- Margin
|
|
47
47
|
|
|
48
|
-
| Prop | Type
|
|
49
|
-
| -------------- |
|
|
50
|
-
| `size` | `Responsive<"xs" \| "sm" \| "md" \| "lg">`
|
|
51
|
-
| `
|
|
52
|
-
| `currentColor` | `boolean` | — | Sets the Spinner stroke colour to `currentColor`. For use when the Spinner needs to inherit a parent component's colour scheme. |
|
|
53
|
-
| `margin` | `Responsive<"auto" \| "0" \| "25" \| "50" \| "75" \| "100" \| "150" \| "175" \| "200" \| "250" \| "300" \| "350" \| "400" \| "500" \| "600" \| "700" \| "800" \| "900" \| "1000" \| `var(--h-${string})`>` | — | |
|
|
54
|
-
| `marginTop` | `Responsive<"auto" \| "0" \| "25" \| "50" \| "75" \| "100" \| "150" \| "175" \| "200" \| "250" \| "300" \| "350" \| "400" \| "500" \| "600" \| "700" \| "800" \| "900" \| "1000" \| `var(--h-${string})`>` | — | |
|
|
55
|
-
| `marginRight` | `Responsive<"auto" \| "0" \| "25" \| "50" \| "75" \| "100" \| "150" \| "175" \| "200" \| "250" \| "300" \| "350" \| "400" \| "500" \| "600" \| "700" \| "800" \| "900" \| "1000" \| `var(--h-${string})`>` | — | |
|
|
56
|
-
| `marginBottom` | `Responsive<"auto" \| "0" \| "25" \| "50" \| "75" \| "100" \| "150" \| "175" \| "200" \| "250" \| "300" \| "350" \| "400" \| "500" \| "600" \| "700" \| "800" \| "900" \| "1000" \| `var(--h-${string})`>` | — | |
|
|
57
|
-
| `marginLeft` | `Responsive<"auto" \| "0" \| "25" \| "50" \| "75" \| "100" \| "150" \| "175" \| "200" \| "250" \| "300" \| "350" \| "400" \| "500" \| "600" \| "700" \| "800" \| "900" \| "1000" \| `var(--h-${string})`>` | — | |
|
|
58
|
-
| `marginX` | `Responsive<"auto" \| "0" \| "25" \| "50" \| "75" \| "100" \| "150" \| "175" \| "200" \| "250" \| "300" \| "350" \| "400" \| "500" \| "600" \| "700" \| "800" \| "900" \| "1000" \| `var(--h-${string})`>` | — | |
|
|
59
|
-
| `marginY` | `Responsive<"auto" \| "0" \| "25" \| "50" \| "75" \| "100" \| "150" \| "175" \| "200" \| "250" \| "300" \| "350" \| "400" \| "500" \| "600" \| "700" \| "800" \| "900" \| "1000" \| `var(--h-${string})`>` | — | |
|
|
48
|
+
| Prop | Type | Default | Description |
|
|
49
|
+
| -------------- | ------------------------------------------ | ------- | ------------------------------------------------------------------------------------------------------------------------------- |
|
|
50
|
+
| `size` | `Responsive<"xs" \| "sm" \| "md" \| "lg">` | `md` | Sets the button height. |
|
|
51
|
+
| `currentColor` | `boolean` | — | Sets the Spinner stroke colour to `currentColor`. For use when the Spinner needs to inherit a parent component's colour scheme. |
|
|
@@ -32,18 +32,7 @@ This component is based on the `strong` element and supports the following commo
|
|
|
32
32
|
- Text align
|
|
33
33
|
- Text wrap
|
|
34
34
|
|
|
35
|
-
| Prop
|
|
36
|
-
|
|
|
37
|
-
| `asChild`
|
|
38
|
-
| `truncate`
|
|
39
|
-
| `textAlign` | `Responsive<"center" \| "left" \| "right">` | — | |
|
|
40
|
-
| `textTransform` | `"none" \| "uppercase" \| "lowercase" \| "capitalize"` | — | Set the text-transform on the component. |
|
|
41
|
-
| `wrap` | `Responsive<"wrap" \| "nowrap" \| "balance" \| "pretty">` | — | DEPRECATED: use `textWrap` instead of `wrap` @deprecated Use `textWrap` instead of `wrap` |
|
|
42
|
-
| `textWrap` | `Responsive<"wrap" \| "nowrap" \| "balance" \| "pretty">` | — | |
|
|
43
|
-
| `margin` | `Responsive<"auto" \| "0" \| "25" \| "50" \| "75" \| "100" \| "150" \| "175" \| "200" \| "250" \| "300" \| "350" \| "400" \| "500" \| "600" \| "700" \| "800" \| "900" \| "1000" \| `var(--h-${string})`>` | — | |
|
|
44
|
-
| `marginTop` | `Responsive<"auto" \| "0" \| "25" \| "50" \| "75" \| "100" \| "150" \| "175" \| "200" \| "250" \| "300" \| "350" \| "400" \| "500" \| "600" \| "700" \| "800" \| "900" \| "1000" \| `var(--h-${string})`>` | — | |
|
|
45
|
-
| `marginRight` | `Responsive<"auto" \| "0" \| "25" \| "50" \| "75" \| "100" \| "150" \| "175" \| "200" \| "250" \| "300" \| "350" \| "400" \| "500" \| "600" \| "700" \| "800" \| "900" \| "1000" \| `var(--h-${string})`>` | — | |
|
|
46
|
-
| `marginBottom` | `Responsive<"auto" \| "0" \| "25" \| "50" \| "75" \| "100" \| "150" \| "175" \| "200" \| "250" \| "300" \| "350" \| "400" \| "500" \| "600" \| "700" \| "800" \| "900" \| "1000" \| `var(--h-${string})`>` | — | |
|
|
47
|
-
| `marginLeft` | `Responsive<"auto" \| "0" \| "25" \| "50" \| "75" \| "100" \| "150" \| "175" \| "200" \| "250" \| "300" \| "350" \| "400" \| "500" \| "600" \| "700" \| "800" \| "900" \| "1000" \| `var(--h-${string})`>` | — | |
|
|
48
|
-
| `marginX` | `Responsive<"auto" \| "0" \| "25" \| "50" \| "75" \| "100" \| "150" \| "175" \| "200" \| "250" \| "300" \| "350" \| "400" \| "500" \| "600" \| "700" \| "800" \| "900" \| "1000" \| `var(--h-${string})`>` | — | |
|
|
49
|
-
| `marginY` | `Responsive<"auto" \| "0" \| "25" \| "50" \| "75" \| "100" \| "150" \| "175" \| "200" \| "250" \| "300" \| "350" \| "400" \| "500" \| "600" \| "700" \| "800" \| "900" \| "1000" \| `var(--h-${string})`>` | — | |
|
|
35
|
+
| Prop | Type | Default | Description |
|
|
36
|
+
| ---------- | --------- | ------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
|
|
37
|
+
| `asChild` | `boolean` | — | Change the default rendered element for the one passed as a child, merging their props and behavior. |
|
|
38
|
+
| `truncate` | `boolean` | — | If true, the text will not wrap, but instead will truncate with a text overflow ellipsis. Note that text overflow can only happen with block or inline-block level elements (the element needs to have a width in order to overflow). |
|
|
@@ -88,19 +88,12 @@ This component is based on the `button` element, and supports the following comm
|
|
|
88
88
|
|
|
89
89
|
- Margin
|
|
90
90
|
|
|
91
|
-
| Prop | Type
|
|
92
|
-
| ----------------- |
|
|
93
|
-
| `label` | `string`
|
|
94
|
-
| `defaultChecked` | `boolean`
|
|
95
|
-
| `asChild` | `boolean`
|
|
96
|
-
| `checked` | `boolean`
|
|
97
|
-
| `size` | `Responsive<"sm" \| "md">`
|
|
98
|
-
| `required` | `boolean`
|
|
99
|
-
| `onCheckedChange` | `((checked: boolean) => void)`
|
|
100
|
-
| `margin` | `Responsive<"0" \| "auto" \| "25" \| "50" \| "75" \| "100" \| "150" \| "175" \| "200" \| "250" \| "300" \| "350" \| "400" \| "500" \| "600" \| "700" \| "800" \| "900" \| "1000" \| `var(--h-${string})`>` | — | |
|
|
101
|
-
| `marginTop` | `Responsive<"0" \| "auto" \| "25" \| "50" \| "75" \| "100" \| "150" \| "175" \| "200" \| "250" \| "300" \| "350" \| "400" \| "500" \| "600" \| "700" \| "800" \| "900" \| "1000" \| `var(--h-${string})`>` | — | |
|
|
102
|
-
| `marginRight` | `Responsive<"0" \| "auto" \| "25" \| "50" \| "75" \| "100" \| "150" \| "175" \| "200" \| "250" \| "300" \| "350" \| "400" \| "500" \| "600" \| "700" \| "800" \| "900" \| "1000" \| `var(--h-${string})`>` | — | |
|
|
103
|
-
| `marginBottom` | `Responsive<"0" \| "auto" \| "25" \| "50" \| "75" \| "100" \| "150" \| "175" \| "200" \| "250" \| "300" \| "350" \| "400" \| "500" \| "600" \| "700" \| "800" \| "900" \| "1000" \| `var(--h-${string})`>` | — | |
|
|
104
|
-
| `marginLeft` | `Responsive<"0" \| "auto" \| "25" \| "50" \| "75" \| "100" \| "150" \| "175" \| "200" \| "250" \| "300" \| "350" \| "400" \| "500" \| "600" \| "700" \| "800" \| "900" \| "1000" \| `var(--h-${string})`>` | — | |
|
|
105
|
-
| `marginX` | `Responsive<"0" \| "auto" \| "25" \| "50" \| "75" \| "100" \| "150" \| "175" \| "200" \| "250" \| "300" \| "350" \| "400" \| "500" \| "600" \| "700" \| "800" \| "900" \| "1000" \| `var(--h-${string})`>` | — | |
|
|
106
|
-
| `marginY` | `Responsive<"0" \| "auto" \| "25" \| "50" \| "75" \| "100" \| "150" \| "175" \| "200" \| "250" \| "300" \| "350" \| "400" \| "500" \| "600" \| "700" \| "800" \| "900" \| "1000" \| `var(--h-${string})`>` | — | |
|
|
91
|
+
| Prop | Type | Default | Description |
|
|
92
|
+
| ----------------- | ------------------------------ | ------- | ------------------------------------------------- |
|
|
93
|
+
| `label` | `string` | — | The label for the Switch, describing its purpose. |
|
|
94
|
+
| `defaultChecked` | `boolean` | — | |
|
|
95
|
+
| `asChild` | `boolean` | — | |
|
|
96
|
+
| `checked` | `boolean` | — | |
|
|
97
|
+
| `size` | `Responsive<"sm" \| "md">` | — | |
|
|
98
|
+
| `required` | `boolean` | — | |
|
|
99
|
+
| `onCheckedChange` | `((checked: boolean) => void)` | — | |
|
|
@@ -184,17 +184,10 @@ This component is based on the `table` element and supports the following common
|
|
|
184
184
|
|
|
185
185
|
- Margin
|
|
186
186
|
|
|
187
|
-
| Prop
|
|
188
|
-
|
|
|
189
|
-
| `
|
|
190
|
-
| `
|
|
191
|
-
| `marginRight` | `Responsive<"auto" \| "0" \| "25" \| "50" \| "75" \| "100" \| "150" \| "175" \| "200" \| "250" \| "300" \| "350" \| "400" \| "500" \| "600" \| "700" \| "800" \| "900" \| "1000" \| `var(--h-${string})`>` | — | |
|
|
192
|
-
| `marginBottom` | `Responsive<"auto" \| "0" \| "25" \| "50" \| "75" \| "100" \| "150" \| "175" \| "200" \| "250" \| "300" \| "350" \| "400" \| "500" \| "600" \| "700" \| "800" \| "900" \| "1000" \| `var(--h-${string})`>` | — | |
|
|
193
|
-
| `marginLeft` | `Responsive<"auto" \| "0" \| "25" \| "50" \| "75" \| "100" \| "150" \| "175" \| "200" \| "250" \| "300" \| "350" \| "400" \| "500" \| "600" \| "700" \| "800" \| "900" \| "1000" \| `var(--h-${string})`>` | — | |
|
|
194
|
-
| `marginX` | `Responsive<"auto" \| "0" \| "25" \| "50" \| "75" \| "100" \| "150" \| "175" \| "200" \| "250" \| "300" \| "350" \| "400" \| "500" \| "600" \| "700" \| "800" \| "900" \| "1000" \| `var(--h-${string})`>` | — | |
|
|
195
|
-
| `marginY` | `Responsive<"auto" \| "0" \| "25" \| "50" \| "75" \| "100" \| "150" \| "175" \| "200" \| "250" \| "300" \| "350" \| "400" \| "500" \| "600" \| "700" \| "800" \| "900" \| "1000" \| `var(--h-${string})`>` | — | |
|
|
196
|
-
| `variant` | `"emphasis" \| "subtle"` | — | Sets the visual variant of the table. When undefined, the table is rendered without a Card wrapper. |
|
|
197
|
-
| `pagination` | `ReactElement<TablePaginationProps, string \| JSXElementConstructor<any>>` | — | |
|
|
187
|
+
| Prop | Type | Default | Description |
|
|
188
|
+
| ------------ | -------------------------------------------------------------------------- | ------- | --------------------------------------------------------------------------------------------------- |
|
|
189
|
+
| `variant` | `"emphasis" \| "subtle"` | — | Sets the visual variant of the table. When undefined, the table is rendered without a Card wrapper. |
|
|
190
|
+
| `pagination` | `ReactElement<TablePaginationProps, string \| JSXElementConstructor<any>>` | — | |
|
|
198
191
|
|
|
199
192
|
### TableHeader API
|
|
200
193
|
|
|
@@ -118,24 +118,17 @@ This component is based on the `textarea` element, and supports the following co
|
|
|
118
118
|
|
|
119
119
|
- Margin
|
|
120
120
|
|
|
121
|
-
| Prop | Type
|
|
122
|
-
| ------------------ |
|
|
123
|
-
| `label` | `string`
|
|
124
|
-
| `value` | `string`
|
|
125
|
-
| `labelId` | `string`
|
|
126
|
-
| `helperTextId` | `string`
|
|
127
|
-
| `validationTextId` | `string`
|
|
128
|
-
| `labelVariant` | `"body" \| "heading"`
|
|
129
|
-
| `helperText` | `string`
|
|
130
|
-
| `validationText` | `string`
|
|
131
|
-
| `validationStatus` | `"valid" \| "invalid"`
|
|
132
|
-
| `resize` | `"none" \| "both" \| "horizontal" \| "vertical"`
|
|
133
|
-
| `minHeight` | `Responsive<string>`
|
|
134
|
-
| `maxHeight` | `Responsive<string>`
|
|
135
|
-
| `margin` | `Responsive<"auto" \| `var(--h-${string})` \| "0" \| "25" \| "50" \| "75" \| "100" \| "150" \| "175" \| "200" \| "250" \| "300" \| "350" \| "400" \| "500" \| "600" \| "700" \| "800" \| "900" \| "1000">` | — | |
|
|
136
|
-
| `marginTop` | `Responsive<"auto" \| `var(--h-${string})` \| "0" \| "25" \| "50" \| "75" \| "100" \| "150" \| "175" \| "200" \| "250" \| "300" \| "350" \| "400" \| "500" \| "600" \| "700" \| "800" \| "900" \| "1000">` | — | |
|
|
137
|
-
| `marginRight` | `Responsive<"auto" \| `var(--h-${string})` \| "0" \| "25" \| "50" \| "75" \| "100" \| "150" \| "175" \| "200" \| "250" \| "300" \| "350" \| "400" \| "500" \| "600" \| "700" \| "800" \| "900" \| "1000">` | — | |
|
|
138
|
-
| `marginBottom` | `Responsive<"auto" \| `var(--h-${string})` \| "0" \| "25" \| "50" \| "75" \| "100" \| "150" \| "175" \| "200" \| "250" \| "300" \| "350" \| "400" \| "500" \| "600" \| "700" \| "800" \| "900" \| "1000">` | — | |
|
|
139
|
-
| `marginLeft` | `Responsive<"auto" \| `var(--h-${string})` \| "0" \| "25" \| "50" \| "75" \| "100" \| "150" \| "175" \| "200" \| "250" \| "300" \| "350" \| "400" \| "500" \| "600" \| "700" \| "800" \| "900" \| "1000">` | — | |
|
|
140
|
-
| `marginX` | `Responsive<"auto" \| `var(--h-${string})` \| "0" \| "25" \| "50" \| "75" \| "100" \| "150" \| "175" \| "200" \| "250" \| "300" \| "350" \| "400" \| "500" \| "600" \| "700" \| "800" \| "900" \| "1000">` | — | |
|
|
141
|
-
| `marginY` | `Responsive<"auto" \| `var(--h-${string})` \| "0" \| "25" \| "50" \| "75" \| "100" \| "150" \| "175" \| "200" \| "250" \| "300" \| "350" \| "400" \| "500" \| "600" \| "700" \| "800" \| "900" \| "1000">` | — | |
|
|
121
|
+
| Prop | Type | Default | Description |
|
|
122
|
+
| ------------------ | ------------------------------------------------ | -------- | ------------------------------------------------------------------------------ |
|
|
123
|
+
| `label` | `string` | — | The label for the form field, describing its purpose. |
|
|
124
|
+
| `value` | `string` | — | The controlled value of the TextArea. Must be used with an `onChange` handler. |
|
|
125
|
+
| `labelId` | `string` | — | |
|
|
126
|
+
| `helperTextId` | `string` | — | |
|
|
127
|
+
| `validationTextId` | `string` | — | |
|
|
128
|
+
| `labelVariant` | `"body" \| "heading"` | — | Change the label variant |
|
|
129
|
+
| `helperText` | `string` | — | Optional helper text to provide additional context or instructions. |
|
|
130
|
+
| `validationText` | `string` | — | Text to display when the `validationStatus` is set. |
|
|
131
|
+
| `validationStatus` | `"valid" \| "invalid"` | — | Indicates the validation status. |
|
|
132
|
+
| `resize` | `"none" \| "both" \| "horizontal" \| "vertical"` | `"both"` | Controls the resize behavior of the TextArea. |
|
|
133
|
+
| `minHeight` | `Responsive<string>` | — | Sets the minimum height of the TextArea. |
|
|
134
|
+
| `maxHeight` | `Responsive<string>` | — | Sets the maximum height of the TextArea. |
|