@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.
Files changed (73) hide show
  1. package/dist/index.cjs +1 -1
  2. package/dist/index.cjs.map +1 -1
  3. package/dist/index.js +1 -1
  4. package/package.json +7 -7
  5. package/public/llms/components/accordion.md +15 -22
  6. package/public/llms/components/alert.md +6 -25
  7. package/public/llms/components/avatar.md +6 -13
  8. package/public/llms/components/badge.md +6 -14
  9. package/public/llms/components/body-text.md +8 -20
  10. package/public/llms/components/box.md +5 -78
  11. package/public/llms/components/button.md +9 -16
  12. package/public/llms/components/card-accordion.md +7 -25
  13. package/public/llms/components/card.md +4 -11
  14. package/public/llms/components/checkbox-group.md +16 -23
  15. package/public/llms/components/checkbox-tile.md +13 -20
  16. package/public/llms/components/checkbox.md +13 -20
  17. package/public/llms/components/combobox.md +49 -56
  18. package/public/llms/components/container.md +0 -61
  19. package/public/llms/components/currency-input.md +13 -20
  20. package/public/llms/components/date-input.md +30 -37
  21. package/public/llms/components/date-picker.md +0 -7
  22. package/public/llms/components/description-list.md +9 -19
  23. package/public/llms/components/detail-text.md +7 -18
  24. package/public/llms/components/divider.md +4 -11
  25. package/public/llms/components/em.md +4 -15
  26. package/public/llms/components/expandable-card.md +17 -31
  27. package/public/llms/components/grid.md +15 -97
  28. package/public/llms/components/heading.md +6 -17
  29. package/public/llms/components/helper-text.md +4 -13
  30. package/public/llms/components/highlight-banner.md +6 -13
  31. package/public/llms/components/icon-button.md +9 -16
  32. package/public/llms/components/icon-container.md +6 -18
  33. package/public/llms/components/inline-link.md +5 -13
  34. package/public/llms/components/label.md +7 -15
  35. package/public/llms/components/link.md +5 -13
  36. package/public/llms/components/list.md +16 -29
  37. package/public/llms/components/pagination.md +8 -15
  38. package/public/llms/components/password-input.md +12 -19
  39. package/public/llms/components/progress-bar.md +12 -19
  40. package/public/llms/components/progress-stepper.md +4 -11
  41. package/public/llms/components/radio-group.md +27 -45
  42. package/public/llms/components/search-input.md +13 -20
  43. package/public/llms/components/section-header.md +9 -16
  44. package/public/llms/components/select.md +20 -27
  45. package/public/llms/components/skeleton.md +7 -27
  46. package/public/llms/components/spinner.md +4 -12
  47. package/public/llms/components/strong.md +4 -15
  48. package/public/llms/components/switch.md +9 -16
  49. package/public/llms/components/table.md +4 -11
  50. package/public/llms/components/text-area.md +14 -21
  51. package/public/llms/components/text-input.md +14 -21
  52. package/public/llms/components/toggle-button-card.md +3 -88
  53. package/public/llms/components/validation-text.md +4 -13
  54. package/public/llms/components/verification-input.md +26 -33
  55. package/public/llms/docs/common-props/align-self.md +3 -78
  56. package/public/llms/docs/common-props/border.md +30 -234
  57. package/public/llms/docs/common-props/colour.md +6 -156
  58. package/public/llms/docs/common-props/flex-items.md +6 -78
  59. package/public/llms/docs/common-props/gap.md +5 -87
  60. package/public/llms/docs/common-props/grid-items.md +10 -78
  61. package/public/llms/docs/common-props/margin.md +9 -78
  62. package/public/llms/docs/common-props/opacity.md +3 -78
  63. package/public/llms/docs/common-props/order.md +0 -79
  64. package/public/llms/docs/common-props/overflow.md +5 -78
  65. package/public/llms/docs/common-props/padding.md +9 -78
  66. package/public/llms/docs/common-props/position.md +8 -78
  67. package/public/llms/docs/common-props/size.md +8 -78
  68. package/public/llms/docs/common-props/spacing.md +3 -87
  69. package/public/llms/docs/common-props/text.md +6 -20
  70. package/public/llms/docs/common-props/z-index.md +3 -78
  71. package/public/llms/docs/getting-started.md +1 -1
  72. package/public/llms/docs/responsive-design/breakpoints.md +2 -2
  73. package/styles.css +2 -2
package/public/llms/components/date-picker.md CHANGED
@@ -149,11 +149,4 @@ It supports the following common props:
149
149
  | `helperText` | `string` | — | Optional helper text to provide additional context or instructions. |
150
150
  | `validationText` | `string` | — | Text to display when the `validationStatus` is set. |
151
151
  | `validationStatus` | `"valid" \| "invalid"` | — | Indicates the validation status. |
152
- | `margin` | `Responsive<"0" \| "auto" \| "25" \| "50" \| "75" \| "100" \| "150" \| "175" \| "200" \| "250" \| "300" \| "350" \| "400" \| "500" \| "600" \| "700" \| "800" \| "900" \| "1000" \| `var(--h-${string})`>` | — | |
153
- | `marginTop` | `Responsive<"0" \| "auto" \| "25" \| "50" \| "75" \| "100" \| "150" \| "175" \| "200" \| "250" \| "300" \| "350" \| "400" \| "500" \| "600" \| "700" \| "800" \| "900" \| "1000" \| `var(--h-${string})`>` | — | |
154
- | `marginRight` | `Responsive<"0" \| "auto" \| "25" \| "50" \| "75" \| "100" \| "150" \| "175" \| "200" \| "250" \| "300" \| "350" \| "400" \| "500" \| "600" \| "700" \| "800" \| "900" \| "1000" \| `var(--h-${string})`>` | — | |
155
- | `marginBottom` | `Responsive<"0" \| "auto" \| "25" \| "50" \| "75" \| "100" \| "150" \| "175" \| "200" \| "250" \| "300" \| "350" \| "400" \| "500" \| "600" \| "700" \| "800" \| "900" \| "1000" \| `var(--h-${string})`>` | — | |
156
- | `marginLeft` | `Responsive<"0" \| "auto" \| "25" \| "50" \| "75" \| "100" \| "150" \| "175" \| "200" \| "250" \| "300" \| "350" \| "400" \| "500" \| "600" \| "700" \| "800" \| "900" \| "1000" \| `var(--h-${string})`>` | — | |
157
- | `marginX` | `Responsive<"0" \| "auto" \| "25" \| "50" \| "75" \| "100" \| "150" \| "175" \| "200" \| "250" \| "300" \| "350" \| "400" \| "500" \| "600" \| "700" \| "800" \| "900" \| "1000" \| `var(--h-${string})`>` | — | |
158
- | `marginY` | `Responsive<"0" \| "auto" \| "25" \| "50" \| "75" \| "100" \| "150" \| "175" \| "200" \| "250" \| "300" \| "350" \| "400" \| "500" \| "600" \| "700" \| "800" \| "900" \| "1000" \| `var(--h-${string})`>` | — | |
159
152
  | `disableTodayIndicator` | `boolean` | — | |
package/public/llms/components/description-list.md CHANGED
@@ -116,25 +116,15 @@ This component is based on the `dl` element and supports the following common pr
116
116
  - Margin
117
117
  - Size (width props only)
118
118
 
119
- | Prop | Type | Default | Description |
120
- | ------------------ | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------- | ------------------------------------------------------------------------------------------------- |
121
- | `heading` | `string` | — | Actual string to display as section header |
122
- | `headingElement` | `"div" \| "h1" \| "h2" \| "h3" \| "h4"` | `h2` | |
123
- | `helperText` | `string` | — | Optional helper text to provide additional context or instructions. |
124
- | `trailingContent` | `ReactNode` | — | Optional trailing content element |
125
- | `validationStatus` | `"invalid"` | — | Indicates the validation state |
126
- | `validationText` | `string` | — | Text to display when the `validationStatus` is set. |
127
- | `direction` | `Responsive<"row" \| "column">` | — | Responsive direction of the section header content. By default, the content is laid out in a row. |
128
- | `margin` | `Responsive<"auto" \| "0" \| "25" \| "50" \| "75" \| "100" \| "150" \| "175" \| "200" \| "250" \| "300" \| "350" \| "400" \| "500" \| "600" \| "700" \| "800" \| "900" \| "1000" \| `var(--h-${string})`>` | — | |
129
- | `marginTop` | `Responsive<"auto" \| "0" \| "25" \| "50" \| "75" \| "100" \| "150" \| "175" \| "200" \| "250" \| "300" \| "350" \| "400" \| "500" \| "600" \| "700" \| "800" \| "900" \| "1000" \| `var(--h-${string})`>` | — | |
130
- | `marginRight` | `Responsive<"auto" \| "0" \| "25" \| "50" \| "75" \| "100" \| "150" \| "175" \| "200" \| "250" \| "300" \| "350" \| "400" \| "500" \| "600" \| "700" \| "800" \| "900" \| "1000" \| `var(--h-${string})`>` | — | |
131
- | `marginBottom` | `Responsive<"auto" \| "0" \| "25" \| "50" \| "75" \| "100" \| "150" \| "175" \| "200" \| "250" \| "300" \| "350" \| "400" \| "500" \| "600" \| "700" \| "800" \| "900" \| "1000" \| `var(--h-${string})`>` | — | |
132
- | `marginLeft` | `Responsive<"auto" \| "0" \| "25" \| "50" \| "75" \| "100" \| "150" \| "175" \| "200" \| "250" \| "300" \| "350" \| "400" \| "500" \| "600" \| "700" \| "800" \| "900" \| "1000" \| `var(--h-${string})`>` | — | |
133
- | `marginX` | `Responsive<"auto" \| "0" \| "25" \| "50" \| "75" \| "100" \| "150" \| "175" \| "200" \| "250" \| "300" \| "350" \| "400" \| "500" \| "600" \| "700" \| "800" \| "900" \| "1000" \| `var(--h-${string})`>` | — | |
134
- | `marginY` | `Responsive<"auto" \| "0" \| "25" \| "50" \| "75" \| "100" \| "150" \| "175" \| "200" \| "250" \| "300" \| "350" \| "400" \| "500" \| "600" \| "700" \| "800" \| "900" \| "1000" \| `var(--h-${string})`>` | — | |
135
- | `width` | `Responsive<string>` | — | |
136
- | `maxWidth` | `Responsive<string>` | — | |
137
- | `minWidth` | `Responsive<string>` | — | |
119
+ | Prop | Type | Default | Description |
120
+ | ------------------ | --------------------------------------- | ------- | ------------------------------------------------------------------------------------------------- |
121
+ | `heading` | `string` | — | Actual string to display as section header |
122
+ | `headingElement` | `"div" \| "h1" \| "h2" \| "h3" \| "h4"` | `h2` | |
123
+ | `helperText` | `string` | — | Optional helper text to provide additional context or instructions. |
124
+ | `trailingContent` | `ReactNode` | — | Optional trailing content element |
125
+ | `validationStatus` | `"invalid"` | — | Indicates the validation state |
126
+ | `validationText` | `string` | — | Text to display when the `validationStatus` is set. |
127
+ | `direction` | `Responsive<"row" \| "column">` | — | Responsive direction of the section header content. By default, the content is laid out in a row. |
138
128
 
139
129
  ## DescriptionListItem API
140
130
 
package/public/llms/components/detail-text.md CHANGED
@@ -81,21 +81,10 @@ This component is based on the `span` element and supports the following common
81
81
  - Text align
82
82
  - Text wrap
83
83
 
84
- | Prop | Type | Default | Description |
85
- | --------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------- | ---------------------------------------------------------------------------------------------------- |
86
- | `asChild` | `boolean` | — | Change the default rendered element for the one passed as a child, merging their props and behavior. |
87
- | `size` | `Responsive<"sm" \| "md" \| "lg" \| "xl" \| "2xl" \| "3xl" \| "4xl">` | `md` | Set the text size styles. |
88
- | `color` | `(Responsive<"text" \| "valid" \| "invalid"> & string)` | `text` | Set the text color |
89
- | `inverted` | `boolean` | — | Inverts the component colours, for use on darker surface colours. |
90
- | `textAlign` | `Responsive<"center" \| "left" \| "right">` | — | |
91
- | `textTransform` | `"none" \| "uppercase" \| "lowercase" \| "capitalize"` | — | Set the text-transform on the component. |
92
- | `wrap` | `Responsive<"wrap" \| "nowrap" \| "balance" \| "pretty">` | — | DEPRECATED: use `textWrap` instead of `wrap` @deprecated Use `textWrap` instead of `wrap` |
93
- | `textWrap` | `Responsive<"wrap" \| "nowrap" \| "balance" \| "pretty">` | — | |
94
- | `margin` | `Responsive<"auto" \| "0" \| "25" \| "50" \| "75" \| "100" \| "150" \| "175" \| "200" \| "250" \| "300" \| "350" \| "400" \| "500" \| "600" \| "700" \| "800" \| "900" \| "1000" \| `var(--h-${string})`>` | — | |
95
- | `marginTop` | `Responsive<"auto" \| "0" \| "25" \| "50" \| "75" \| "100" \| "150" \| "175" \| "200" \| "250" \| "300" \| "350" \| "400" \| "500" \| "600" \| "700" \| "800" \| "900" \| "1000" \| `var(--h-${string})`>` | — | |
96
- | `marginRight` | `Responsive<"auto" \| "0" \| "25" \| "50" \| "75" \| "100" \| "150" \| "175" \| "200" \| "250" \| "300" \| "350" \| "400" \| "500" \| "600" \| "700" \| "800" \| "900" \| "1000" \| `var(--h-${string})`>` | — | |
97
- | `marginBottom` | `Responsive<"auto" \| "0" \| "25" \| "50" \| "75" \| "100" \| "150" \| "175" \| "200" \| "250" \| "300" \| "350" \| "400" \| "500" \| "600" \| "700" \| "800" \| "900" \| "1000" \| `var(--h-${string})`>` | — | |
98
- | `marginLeft` | `Responsive<"auto" \| "0" \| "25" \| "50" \| "75" \| "100" \| "150" \| "175" \| "200" \| "250" \| "300" \| "350" \| "400" \| "500" \| "600" \| "700" \| "800" \| "900" \| "1000" \| `var(--h-${string})`>` | — | |
99
- | `marginX` | `Responsive<"auto" \| "0" \| "25" \| "50" \| "75" \| "100" \| "150" \| "175" \| "200" \| "250" \| "300" \| "350" \| "400" \| "500" \| "600" \| "700" \| "800" \| "900" \| "1000" \| `var(--h-${string})`>` | — | |
100
- | `marginY` | `Responsive<"auto" \| "0" \| "25" \| "50" \| "75" \| "100" \| "150" \| "175" \| "200" \| "250" \| "300" \| "350" \| "400" \| "500" \| "600" \| "700" \| "800" \| "900" \| "1000" \| `var(--h-${string})`>` | — | |
101
- | `as` | `"span" \| "div" \| "p"` | — | |
84
+ | Prop | Type | Default | Description |
85
+ | ---------- | --------------------------------------------------------------------- | ------- | ---------------------------------------------------------------------------------------------------- |
86
+ | `asChild` | `boolean` | — | Change the default rendered element for the one passed as a child, merging their props and behavior. |
87
+ | `size` | `Responsive<"sm" \| "md" \| "lg" \| "xl" \| "2xl" \| "3xl" \| "4xl">` | `md` | Set the text size styles. |
88
+ | `color` | `(Responsive<"text" \| "valid" \| "invalid"> & string)` | `text` | Set the text color |
89
+ | `inverted` | `boolean` | — | Inverts the component colours, for use on darker surface colours. |
90
+ | `as` | `"span" \| "div" \| "p"` | — | |
package/public/llms/components/divider.md CHANGED
@@ -75,14 +75,7 @@ This component is based on the `hr` element, and supports the following common p
75
75
 
76
76
  - Margin
77
77
 
78
- | Prop | Type | Default | Description |
79
- | -------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------ | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
80
- | `orientation` | `"horizontal" \| "vertical"` | `horizontal` | |
81
- | `decorative` | `boolean` | — | Whether or not the component is purely decorative. When true, accessibility-related attributes are updated so that that the rendered element is removed from the accessibility tree. |
82
- | `margin` | `Responsive<"auto" \| "0" \| "25" \| "50" \| "75" \| "100" \| "150" \| "175" \| "200" \| "250" \| "300" \| "350" \| "400" \| "500" \| "600" \| "700" \| "800" \| "900" \| "1000" \| `var(--h-${string})`>` | — | |
83
- | `marginTop` | `Responsive<"auto" \| "0" \| "25" \| "50" \| "75" \| "100" \| "150" \| "175" \| "200" \| "250" \| "300" \| "350" \| "400" \| "500" \| "600" \| "700" \| "800" \| "900" \| "1000" \| `var(--h-${string})`>` | — | |
84
- | `marginRight` | `Responsive<"auto" \| "0" \| "25" \| "50" \| "75" \| "100" \| "150" \| "175" \| "200" \| "250" \| "300" \| "350" \| "400" \| "500" \| "600" \| "700" \| "800" \| "900" \| "1000" \| `var(--h-${string})`>` | — | |
85
- | `marginBottom` | `Responsive<"auto" \| "0" \| "25" \| "50" \| "75" \| "100" \| "150" \| "175" \| "200" \| "250" \| "300" \| "350" \| "400" \| "500" \| "600" \| "700" \| "800" \| "900" \| "1000" \| `var(--h-${string})`>` | — | |
86
- | `marginLeft` | `Responsive<"auto" \| "0" \| "25" \| "50" \| "75" \| "100" \| "150" \| "175" \| "200" \| "250" \| "300" \| "350" \| "400" \| "500" \| "600" \| "700" \| "800" \| "900" \| "1000" \| `var(--h-${string})`>` | — | |
87
- | `marginX` | `Responsive<"auto" \| "0" \| "25" \| "50" \| "75" \| "100" \| "150" \| "175" \| "200" \| "250" \| "300" \| "350" \| "400" \| "500" \| "600" \| "700" \| "800" \| "900" \| "1000" \| `var(--h-${string})`>` | — | |
88
- | `marginY` | `Responsive<"auto" \| "0" \| "25" \| "50" \| "75" \| "100" \| "150" \| "175" \| "200" \| "250" \| "300" \| "350" \| "400" \| "500" \| "600" \| "700" \| "800" \| "900" \| "1000" \| `var(--h-${string})`>` | — | |
78
+ | Prop | Type | Default | Description |
79
+ | ------------- | ---------------------------- | ------------ | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
80
+ | `orientation` | `"horizontal" \| "vertical"` | `horizontal` | |
81
+ | `decorative` | `boolean` | — | Whether or not the component is purely decorative. When true, accessibility-related attributes are updated so that that the rendered element is removed from the accessibility tree. |
package/public/llms/components/em.md CHANGED
@@ -26,18 +26,7 @@ This component is based on the `em` element and supports the following common pr
26
26
  - Text align
27
27
  - Text wrap
28
28
 
29
- | Prop | Type | Default | Description |
30
- | --------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
31
- | `asChild` | `boolean` | — | Change the default rendered element for the one passed as a child, merging their props and behavior. |
32
- | `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). |
33
- | `textAlign` | `Responsive<"center" \| "left" \| "right">` | — | |
34
- | `textTransform` | `"none" \| "uppercase" \| "lowercase" \| "capitalize"` | — | Set the text-transform on the component. |
35
- | `wrap` | `Responsive<"wrap" \| "nowrap" \| "balance" \| "pretty">` | — | DEPRECATED: use `textWrap` instead of `wrap` @deprecated Use `textWrap` instead of `wrap` |
36
- | `textWrap` | `Responsive<"wrap" \| "nowrap" \| "balance" \| "pretty">` | — | |
37
- | `margin` | `Responsive<"auto" \| "0" \| "25" \| "50" \| "75" \| "100" \| "150" \| "175" \| "200" \| "250" \| "300" \| "350" \| "400" \| "500" \| "600" \| "700" \| "800" \| "900" \| "1000" \| `var(--h-${string})`>` | — | |
38
- | `marginTop` | `Responsive<"auto" \| "0" \| "25" \| "50" \| "75" \| "100" \| "150" \| "175" \| "200" \| "250" \| "300" \| "350" \| "400" \| "500" \| "600" \| "700" \| "800" \| "900" \| "1000" \| `var(--h-${string})`>` | — | |
39
- | `marginRight` | `Responsive<"auto" \| "0" \| "25" \| "50" \| "75" \| "100" \| "150" \| "175" \| "200" \| "250" \| "300" \| "350" \| "400" \| "500" \| "600" \| "700" \| "800" \| "900" \| "1000" \| `var(--h-${string})`>` | — | |
40
- | `marginBottom` | `Responsive<"auto" \| "0" \| "25" \| "50" \| "75" \| "100" \| "150" \| "175" \| "200" \| "250" \| "300" \| "350" \| "400" \| "500" \| "600" \| "700" \| "800" \| "900" \| "1000" \| `var(--h-${string})`>` | — | |
41
- | `marginLeft` | `Responsive<"auto" \| "0" \| "25" \| "50" \| "75" \| "100" \| "150" \| "175" \| "200" \| "250" \| "300" \| "350" \| "400" \| "500" \| "600" \| "700" \| "800" \| "900" \| "1000" \| `var(--h-${string})`>` | — | |
42
- | `marginX` | `Responsive<"auto" \| "0" \| "25" \| "50" \| "75" \| "100" \| "150" \| "175" \| "200" \| "250" \| "300" \| "350" \| "400" \| "500" \| "600" \| "700" \| "800" \| "900" \| "1000" \| `var(--h-${string})`>` | — | |
43
- | `marginY` | `Responsive<"auto" \| "0" \| "25" \| "50" \| "75" \| "100" \| "150" \| "175" \| "200" \| "250" \| "300" \| "350" \| "400" \| "500" \| "600" \| "700" \| "800" \| "900" \| "1000" \| `var(--h-${string})`>` | — | |
29
+ | Prop | Type | Default | Description |
30
+ | ---------- | --------- | ------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
31
+ | `asChild` | `boolean` | — | Change the default rendered element for the one passed as a child, merging their props and behavior. |
32
+ | `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). |
package/public/llms/components/expandable-card.md CHANGED
@@ -191,24 +191,17 @@ This component is based on the `div` element and supports the following common p
191
191
 
192
192
  - Margin
193
193
 
194
- | Prop | Type | Default | Description |
195
- | --------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------- | ----------- |
196
- | `heading` | `string` | — | |
197
- | `helperText` | `string` | — | |
198
- | `leadingIcon` | `ReactNode` | — | |
199
- | `leadingIconContainerColorScheme` | `"energy" \| "mobile" \| "broadband" \| "insurance" \| "cashback" \| "pig" \| "highlight"` | — | |
200
- | `badge` | `ReactNode` | — | |
201
- | `numericValue` | `string` | — | |
202
- | `open` | `boolean` | — | |
203
- | `defaultOpen` | `boolean` | — | |
204
- | `onOpenChange` | `((open: boolean) => void)` | — | |
205
- | `margin` | `Responsive<"0" \| "auto" \| "25" \| "50" \| "75" \| "100" \| "150" \| "175" \| "200" \| "250" \| "300" \| "350" \| "400" \| "500" \| "600" \| "700" \| "800" \| "900" \| "1000" \| `var(--h-${string})`>` | — | |
206
- | `marginTop` | `Responsive<"0" \| "auto" \| "25" \| "50" \| "75" \| "100" \| "150" \| "175" \| "200" \| "250" \| "300" \| "350" \| "400" \| "500" \| "600" \| "700" \| "800" \| "900" \| "1000" \| `var(--h-${string})`>` | — | |
207
- | `marginRight` | `Responsive<"0" \| "auto" \| "25" \| "50" \| "75" \| "100" \| "150" \| "175" \| "200" \| "250" \| "300" \| "350" \| "400" \| "500" \| "600" \| "700" \| "800" \| "900" \| "1000" \| `var(--h-${string})`>` | — | |
208
- | `marginBottom` | `Responsive<"0" \| "auto" \| "25" \| "50" \| "75" \| "100" \| "150" \| "175" \| "200" \| "250" \| "300" \| "350" \| "400" \| "500" \| "600" \| "700" \| "800" \| "900" \| "1000" \| `var(--h-${string})`>` | — | |
209
- | `marginLeft` | `Responsive<"0" \| "auto" \| "25" \| "50" \| "75" \| "100" \| "150" \| "175" \| "200" \| "250" \| "300" \| "350" \| "400" \| "500" \| "600" \| "700" \| "800" \| "900" \| "1000" \| `var(--h-${string})`>` | — | |
210
- | `marginX` | `Responsive<"0" \| "auto" \| "25" \| "50" \| "75" \| "100" \| "150" \| "175" \| "200" \| "250" \| "300" \| "350" \| "400" \| "500" \| "600" \| "700" \| "800" \| "900" \| "1000" \| `var(--h-${string})`>` | — | |
211
- | `marginY` | `Responsive<"0" \| "auto" \| "25" \| "50" \| "75" \| "100" \| "150" \| "175" \| "200" \| "250" \| "300" \| "350" \| "400" \| "500" \| "600" \| "700" \| "800" \| "900" \| "1000" \| `var(--h-${string})`>` | — | |
194
+ | Prop | Type | Default | Description |
195
+ | --------------------------------- | ------------------------------------------------------------------------------------------ | ------- | ----------- |
196
+ | `heading` | `string` | — | |
197
+ | `helperText` | `string` | — | |
198
+ | `leadingIcon` | `ReactNode` | — | |
199
+ | `leadingIconContainerColorScheme` | `"energy" \| "mobile" \| "broadband" \| "insurance" \| "cashback" \| "pig" \| "highlight"` | — | |
200
+ | `badge` | `ReactNode` | — | |
201
+ | `numericValue` | `string` | — | |
202
+ | `open` | `boolean` | — | |
203
+ | `defaultOpen` | `boolean` | — | |
204
+ | `onOpenChange` | `((open: boolean) => void)` | — | |
212
205
 
213
206
  ### ExpandableCardGroup API
214
207
 
@@ -216,16 +209,9 @@ This component is based on the `div` element and supports the following common p
216
209
 
217
210
  - Margin
218
211
 
219
- | Prop | Type | Default | Description |
220
- | ----------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------- | ------------------------------------------------------------------- |
221
- | `heading` | `string` | — | Actual string to display as section header |
222
- | `helperText` | `string` | — | Optional helper text to provide additional context or instructions. |
223
- | `trailingContent` | `ReactNode` | — | Optional trailing content element |
224
- | `headingElement` | `"h1" \| "h2" \| "h3" \| "h4"` | — | |
225
- | `margin` | `Responsive<"auto" \| "0" \| "25" \| "50" \| "75" \| "100" \| "150" \| "175" \| "200" \| "250" \| "300" \| "350" \| "400" \| "500" \| "600" \| "700" \| "800" \| "900" \| "1000" \| `var(--h-${string})`>` | — | |
226
- | `marginTop` | `Responsive<"auto" \| "0" \| "25" \| "50" \| "75" \| "100" \| "150" \| "175" \| "200" \| "250" \| "300" \| "350" \| "400" \| "500" \| "600" \| "700" \| "800" \| "900" \| "1000" \| `var(--h-${string})`>` | — | |
227
- | `marginRight` | `Responsive<"auto" \| "0" \| "25" \| "50" \| "75" \| "100" \| "150" \| "175" \| "200" \| "250" \| "300" \| "350" \| "400" \| "500" \| "600" \| "700" \| "800" \| "900" \| "1000" \| `var(--h-${string})`>` | — | |
228
- | `marginBottom` | `Responsive<"auto" \| "0" \| "25" \| "50" \| "75" \| "100" \| "150" \| "175" \| "200" \| "250" \| "300" \| "350" \| "400" \| "500" \| "600" \| "700" \| "800" \| "900" \| "1000" \| `var(--h-${string})`>` | — | |
229
- | `marginLeft` | `Responsive<"auto" \| "0" \| "25" \| "50" \| "75" \| "100" \| "150" \| "175" \| "200" \| "250" \| "300" \| "350" \| "400" \| "500" \| "600" \| "700" \| "800" \| "900" \| "1000" \| `var(--h-${string})`>` | — | |
230
- | `marginX` | `Responsive<"auto" \| "0" \| "25" \| "50" \| "75" \| "100" \| "150" \| "175" \| "200" \| "250" \| "300" \| "350" \| "400" \| "500" \| "600" \| "700" \| "800" \| "900" \| "1000" \| `var(--h-${string})`>` | — | |
231
- | `marginY` | `Responsive<"auto" \| "0" \| "25" \| "50" \| "75" \| "100" \| "150" \| "175" \| "200" \| "250" \| "300" \| "350" \| "400" \| "500" \| "600" \| "700" \| "800" \| "900" \| "1000" \| `var(--h-${string})`>` | — | |
212
+ | Prop | Type | Default | Description |
213
+ | ----------------- | ------------------------------ | ------- | ------------------------------------------------------------------- |
214
+ | `heading` | `string` | — | Actual string to display as section header |
215
+ | `helperText` | `string` | — | Optional helper text to provide additional context or instructions. |
216
+ | `trailingContent` | `ReactNode` | — | Optional trailing content element |
217
+ | `headingElement` | `"h1" \| "h2" \| "h3" \| "h4"` | — | |
package/public/llms/components/grid.md CHANGED
@@ -145,100 +145,18 @@ This component is based on the `div` element and supports the following common s
145
145
  - Opacity
146
146
  - Order
147
147
 
148
- | Prop | Type | Default | Description |
149
- | ----------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------- | ------------------------------------------------------------------------------------------------------------------------------------------------------ |
150
- | `template` | `Responsive<string>` | — | Shorthand for the full `grid-template` property. Supports responsive values. |
151
- | `asChild` | `boolean` | — | When `true`, renders the Grid as a `Slot` so that its props are forwarded to the child element instead of rendering a DOM node. |
152
- | `defaultResponsiveColumns` | `boolean` | — | When `true`, applies a default responsive column configuration (typically a single column on small screens and multiple columns on larger screens). |
153
- | `display` | `Responsive<"none" \| "inline-grid" \| "grid">` | — | Controls the `display` behavior of the grid container. |
154
- | `columns` | `Responsive<Union<string, "1" \| "2" \| "3" \| "4" \| "5" \| "6" \| "7" \| "8" \| "9" \| "10" \| "11" \| "12">>` | — | Shorthand for configuring columns using the 12-column system or a custom `grid-template-columns` string. Supports responsive values. |
155
- | `templateColumns` | `Responsive<string>` | — | Maps to `grid-template-columns`. Supports responsive values. |
156
- | `templateRows` | `Responsive<string>` | — | Maps to `grid-template-rows`. Supports responsive values. |
157
- | `templateAreas` | `Responsive<string>` | — | Maps to `grid-template-areas`. Supports responsive values. |
158
- | `autoFlow` | `Responsive<"row" \| "column" \| "dense" \| "row-dense" \| "column-dense">` | — | Maps to `grid-auto-flow`. Supports responsive values. |
159
- | `autoRows` | `Responsive<string>` | — | Maps to `grid-auto-rows`. Supports responsive values. |
160
- | `autoColumns` | `Responsive<string>` | — | Maps to `grid-auto-columns`. Supports responsive values. |
161
- | `justifyItems` | `Responsive<"center" \| "start" \| "end" \| "stretch">` | — | Maps to `justify-items`. Supports responsive values. |
162
- | `alignContent` | `Responsive<"center" \| "start" \| "end" \| "stretch" \| "between" \| "around" \| "evenly">` | — | |
163
- | `alignItems` | `Responsive<"center" \| "start" \| "end" \| "stretch" \| "baseline">` | — | |
164
- | `alignSelf` | `Responsive<"center" \| "start" \| "end" \| "stretch">` | — | |
165
- | `backgroundColor` | `"primary" \| "secondary" \| "brand" \| `var(--h-${string})`` | — | |
166
- | `borderColor` | `"strong" \| `var(--h-${string})` \| "subtle"` | — | |
167
- | `borderTopColor` | `"strong" \| `var(--h-${string})` \| "subtle"` | — | |
168
- | `borderRightColor` | `"strong" \| `var(--h-${string})` \| "subtle"` | — | |
169
- | `borderBottomColor` | `"strong" \| `var(--h-${string})` \| "subtle"` | — | |
170
- | `borderLeftColor` | `"strong" \| `var(--h-${string})` \| "subtle"` | — | |
171
- | `borderRadius` | `Responsive<"none" \| "xs" \| "sm" \| "md" \| "lg" \| "xl" \| "full" \| "inherit">` | — | |
172
- | `borderRadiusTopLeftNone` | `boolean` | — | |
173
- | `borderRadiusTopRightNone` | `boolean` | — | |
174
- | `borderRadiusBottomLeftNone` | `boolean` | — | |
175
- | `borderRadiusBottomRightNone` | `boolean` | — | |
176
- | `borderRadiusTopNone` | `boolean` | — | |
177
- | `borderRadiusRightNone` | `boolean` | — | |
178
- | `borderRadiusBottomNone` | `boolean` | — | |
179
- | `borderRadiusLeftNone` | `boolean` | — | |
180
- | `borderStyle` | `Responsive<"none" \| "solid">` | — | |
181
- | `borderTopStyle` | `Responsive<"none" \| "solid">` | — | |
182
- | `borderRightStyle` | `Responsive<"none" \| "solid">` | — | |
183
- | `borderBottomStyle` | `Responsive<"none" \| "solid">` | — | |
184
- | `borderLeftStyle` | `Responsive<"none" \| "solid">` | — | |
185
- | `borderWidth` | `Responsive<`var(--h-${string})` \| "1" \| "2" \| "0">` | — | |
186
- | `borderTopWidth` | `Responsive<`var(--h-${string})` \| "1" \| "2" \| "0">` | — | |
187
- | `borderRightWidth` | `Responsive<`var(--h-${string})` \| "1" \| "2" \| "0">` | — | |
188
- | `borderBottomWidth` | `Responsive<`var(--h-${string})` \| "1" \| "2" \| "0">` | — | |
189
- | `borderLeftWidth` | `Responsive<`var(--h-${string})` \| "1" \| "2" \| "0">` | — | |
190
- | `color` | `"primary" \| "secondary" \| "brand" \| "affirmative" \| "inverted" \| `var(--h-${string})`` | — | |
191
- | `flex` | `Responsive<string>` | — | |
192
- | `flexBasis` | `Responsive<string>` | — | |
193
- | `flexShrink` | `Responsive<string>` | — | |
194
- | `flexGrow` | `Responsive<string>` | — | |
195
- | `gap` | `Responsive<`var(--h-${string})` \| "0" \| "25" \| "50" \| "75" \| "100" \| "150" \| "175" \| "200" \| "250" \| "300" \| "350" \| "400" \| "500" \| "600" \| "700" \| "800" \| "900" \| "1000">` | — | |
196
- | `rowGap` | `Responsive<`var(--h-${string})` \| "0" \| "25" \| "50" \| "75" \| "100" \| "150" \| "175" \| "200" \| "250" \| "300" \| "350" \| "400" \| "500" \| "600" \| "700" \| "800" \| "900" \| "1000">` | — | |
197
- | `columnGap` | `Responsive<`var(--h-${string})` \| "0" \| "25" \| "50" \| "75" \| "100" \| "150" \| "175" \| "200" \| "250" \| "300" \| "350" \| "400" \| "500" \| "600" \| "700" \| "800" \| "900" \| "1000">` | — | |
198
- | `gridColumnSpan` | `Responsive<Union<string, "1" \| "2" \| "3" \| "4" \| "5" \| "6" \| "7" \| "8" \| "9" \| "10" \| "11" \| "12">>` | — | |
199
- | `gridArea` | `Responsive<string>` | — | |
200
- | `gridColumn` | `Responsive<string>` | — | |
201
- | `gridColumnStart` | `Responsive<string>` | — | |
202
- | `gridColumnEnd` | `Responsive<string>` | — | |
203
- | `gridRow` | `Responsive<string>` | — | |
204
- | `gridRowStart` | `Responsive<string>` | — | |
205
- | `gridRowEnd` | `Responsive<string>` | — | |
206
- | `justifyContent` | `Responsive<"center" \| "start" \| "end" \| "stretch" \| "between" \| "around" \| "evenly">` | — | For flexboxes, the stretch value behaves as flex-start or start. This is because, in flexboxes, stretching is controlled using the flex-grow property. |
207
- | `margin` | `Responsive<`var(--h-${string})` \| "0" \| "25" \| "50" \| "75" \| "100" \| "150" \| "175" \| "200" \| "250" \| "300" \| "350" \| "400" \| "500" \| "600" \| "700" \| "800" \| "900" \| "1000" \| "auto">` | — | |
208
- | `marginTop` | `Responsive<`var(--h-${string})` \| "0" \| "25" \| "50" \| "75" \| "100" \| "150" \| "175" \| "200" \| "250" \| "300" \| "350" \| "400" \| "500" \| "600" \| "700" \| "800" \| "900" \| "1000" \| "auto">` | — | |
209
- | `marginRight` | `Responsive<`var(--h-${string})` \| "0" \| "25" \| "50" \| "75" \| "100" \| "150" \| "175" \| "200" \| "250" \| "300" \| "350" \| "400" \| "500" \| "600" \| "700" \| "800" \| "900" \| "1000" \| "auto">` | — | |
210
- | `marginBottom` | `Responsive<`var(--h-${string})` \| "0" \| "25" \| "50" \| "75" \| "100" \| "150" \| "175" \| "200" \| "250" \| "300" \| "350" \| "400" \| "500" \| "600" \| "700" \| "800" \| "900" \| "1000" \| "auto">` | — | |
211
- | `marginLeft` | `Responsive<`var(--h-${string})` \| "0" \| "25" \| "50" \| "75" \| "100" \| "150" \| "175" \| "200" \| "250" \| "300" \| "350" \| "400" \| "500" \| "600" \| "700" \| "800" \| "900" \| "1000" \| "auto">` | — | |
212
- | `marginX` | `Responsive<`var(--h-${string})` \| "0" \| "25" \| "50" \| "75" \| "100" \| "150" \| "175" \| "200" \| "250" \| "300" \| "350" \| "400" \| "500" \| "600" \| "700" \| "800" \| "900" \| "1000" \| "auto">` | — | |
213
- | `marginY` | `Responsive<`var(--h-${string})` \| "0" \| "25" \| "50" \| "75" \| "100" \| "150" \| "175" \| "200" \| "250" \| "300" \| "350" \| "400" \| "500" \| "600" \| "700" \| "800" \| "900" \| "1000" \| "auto">` | — | |
214
- | `opacity` | `Responsive<string>` | — | |
215
- | `order` | `Responsive<string>` | — | |
216
- | `overflow` | `Responsive<"hidden" \| "auto" \| "visible" \| "clip" \| "scroll">` | — | |
217
- | `overflowX` | `Responsive<"hidden" \| "auto" \| "visible" \| "clip" \| "scroll">` | — | |
218
- | `overflowY` | `Responsive<"hidden" \| "auto" \| "visible" \| "clip" \| "scroll">` | — | |
219
- | `padding` | `Responsive<`var(--h-${string})` \| "0" \| "25" \| "50" \| "75" \| "100" \| "150" \| "175" \| "200" \| "250" \| "300" \| "350" \| "400" \| "500" \| "600" \| "700" \| "800" \| "900" \| "1000">` | — | |
220
- | `paddingTop` | `Responsive<`var(--h-${string})` \| "0" \| "25" \| "50" \| "75" \| "100" \| "150" \| "175" \| "200" \| "250" \| "300" \| "350" \| "400" \| "500" \| "600" \| "700" \| "800" \| "900" \| "1000">` | — | |
221
- | `paddingRight` | `Responsive<`var(--h-${string})` \| "0" \| "25" \| "50" \| "75" \| "100" \| "150" \| "175" \| "200" \| "250" \| "300" \| "350" \| "400" \| "500" \| "600" \| "700" \| "800" \| "900" \| "1000">` | — | |
222
- | `paddingBottom` | `Responsive<`var(--h-${string})` \| "0" \| "25" \| "50" \| "75" \| "100" \| "150" \| "175" \| "200" \| "250" \| "300" \| "350" \| "400" \| "500" \| "600" \| "700" \| "800" \| "900" \| "1000">` | — | |
223
- | `paddingLeft` | `Responsive<`var(--h-${string})` \| "0" \| "25" \| "50" \| "75" \| "100" \| "150" \| "175" \| "200" \| "250" \| "300" \| "350" \| "400" \| "500" \| "600" \| "700" \| "800" \| "900" \| "1000">` | — | |
224
- | `paddingX` | `Responsive<`var(--h-${string})` \| "0" \| "25" \| "50" \| "75" \| "100" \| "150" \| "175" \| "200" \| "250" \| "300" \| "350" \| "400" \| "500" \| "600" \| "700" \| "800" \| "900" \| "1000">` | — | |
225
- | `paddingY` | `Responsive<`var(--h-${string})` \| "0" \| "25" \| "50" \| "75" \| "100" \| "150" \| "175" \| "200" \| "250" \| "300" \| "350" \| "400" \| "500" \| "600" \| "700" \| "800" \| "900" \| "1000">` | — | |
226
- | `position` | `Responsive<"fixed" \| "static" \| "relative" \| "absolute" \| "sticky">` | — | |
227
- | `inset` | `Responsive<Union<string, "0" \| "25" \| "50" \| "75" \| "100" \| "150" \| "175" \| "200" \| "250" \| "300" \| "350" \| "400" \| "500" \| "600" \| "700" \| "800" \| "900" \| "1000">>` | — | |
228
- | `top` | `Responsive<Union<string, "0" \| "25" \| "50" \| "75" \| "100" \| "150" \| "175" \| "200" \| "250" \| "300" \| "350" \| "400" \| "500" \| "600" \| "700" \| "800" \| "900" \| "1000">>` | — | |
229
- | `right` | `Responsive<Union<string, "0" \| "25" \| "50" \| "75" \| "100" \| "150" \| "175" \| "200" \| "250" \| "300" \| "350" \| "400" \| "500" \| "600" \| "700" \| "800" \| "900" \| "1000">>` | — | |
230
- | `bottom` | `Responsive<Union<string, "0" \| "25" \| "50" \| "75" \| "100" \| "150" \| "175" \| "200" \| "250" \| "300" \| "350" \| "400" \| "500" \| "600" \| "700" \| "800" \| "900" \| "1000">>` | — | |
231
- | `left` | `Responsive<Union<string, "0" \| "25" \| "50" \| "75" \| "100" \| "150" \| "175" \| "200" \| "250" \| "300" \| "350" \| "400" \| "500" \| "600" \| "700" \| "800" \| "900" \| "1000">>` | — | |
232
- | `width` | `Responsive<string>` | — | |
233
- | `maxWidth` | `Responsive<string>` | — | |
234
- | `minWidth` | `Responsive<string>` | — | |
235
- | `height` | `Responsive<string>` | — | |
236
- | `maxHeight` | `Responsive<string>` | — | |
237
- | `minHeight` | `Responsive<string>` | — | |
238
- | `spacing` | `"none" \| "xs" \| "sm" \| "md" \| "lg" \| "xl" \| "2xs" \| "2xl"` | — | Set responsive spacing between child elements. |
239
- | `rowSpacing` | `"none" \| "xs" \| "sm" \| "md" \| "lg" \| "xl" \| "2xs" \| "2xl"` | — | Set responsive row spacing between child elements. |
240
- | `columnSpacing` | `"none" \| "xs" \| "sm" \| "md" \| "lg" \| "xl" \| "2xs" \| "2xl"` | — | Set responsive column spacing between child elements. |
241
- | `textAlign` | `Responsive<"center" \| "right" \| "left">` | — | |
242
- | `textTransform` | `"none" \| "uppercase" \| "lowercase" \| "capitalize"` | — | Set the text-transform on the component. |
243
- | `zIndex` | `Responsive<string>` | — | |
244
- | `as` | `"div" \| "span"` | — | |
148
+ | Prop | Type | Default | Description |
149
+ | ----------------- | ---------------------------------------------------------------------------------------------------------------- | ------- | ------------------------------------------------------------------------------------------------------------------------------------------------------ |
150
+ | `template` | `Responsive<string>` | — | Shorthand for the full `grid-template` property. Supports responsive values. |
151
+ | `display` | `Responsive<"none" \| "inline-grid" \| "grid">` | — | Controls the `display` behavior of the grid container. |
152
+ | `columns` | `Responsive<Union<string, "1" \| "2" \| "3" \| "4" \| "5" \| "6" \| "7" \| "8" \| "9" \| "10" \| "11" \| "12">>` | — | Shorthand for configuring columns using the 12-column system or a custom `grid-template-columns` string. Supports responsive values. |
153
+ | `templateColumns` | `Responsive<string>` | — | Maps to `grid-template-columns`. Supports responsive values. |
154
+ | `templateRows` | `Responsive<string>` | — | Maps to `grid-template-rows`. Supports responsive values. |
155
+ | `templateAreas` | `Responsive<string>` | — | Maps to `grid-template-areas`. Supports responsive values. |
156
+ | `autoFlow` | `Responsive<"row" \| "column" \| "dense" \| "row-dense" \| "column-dense">` | — | Maps to `grid-auto-flow`. Supports responsive values. |
157
+ | `autoRows` | `Responsive<string>` | — | Maps to `grid-auto-rows`. Supports responsive values. |
158
+ | `autoColumns` | `Responsive<string>` | — | Maps to `grid-auto-columns`. Supports responsive values. |
159
+ | `justifyItems` | `Responsive<"center" \| "start" \| "end" \| "stretch">` | — | Maps to `justify-items`. Supports responsive values. |
160
+ | `alignContent` | `Responsive<"center" \| "start" \| "end" \| "stretch" \| "between" \| "around" \| "evenly">` | — | |
161
+ | `alignItems` | `Responsive<"center" \| "start" \| "end" \| "stretch" \| "baseline">` | — | |
162
+ | `justifyContent` | `Responsive<"center" \| "start" \| "end" \| "stretch" \| "between" \| "around" \| "evenly">` | — | For flexboxes, the stretch value behaves as flex-start or start. This is because, in flexboxes, stretching is controlled using the flex-grow property. |
package/public/llms/components/heading.md CHANGED
@@ -54,20 +54,9 @@ This component is based on the `h2` element and supports the following common pr
54
54
  - Text align
55
55
  - Text wrap
56
56
 
57
- | Prop | Type | Default | Description |
58
- | --------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------- | ---------------------------------------------------------------------------------------------------- |
59
- | `as` | `"h2" \| "h1" \| "h3" \| "h4"` | `h2` | |
60
- | `asChild` | `boolean` | — | Change the default rendered element for the one passed as a child, merging their props and behavior. |
61
- | `size` | `"sm" \| "md" \| "lg" \| "xl" \| "2xl"` | `md` | Set the text size styles. |
62
- | `inverted` | `boolean` | — | Inverts the component colours, for use on darker surface colours. |
63
- | `textAlign` | `Responsive<"center" \| "left" \| "right">` | — | |
64
- | `textTransform` | `"none" \| "uppercase" \| "lowercase" \| "capitalize"` | — | Set the text-transform on the component. |
65
- | `wrap` | `Responsive<"wrap" \| "nowrap" \| "balance" \| "pretty">` | — | DEPRECATED: use `textWrap` instead of `wrap` @deprecated Use `textWrap` instead of `wrap` |
66
- | `textWrap` | `Responsive<"wrap" \| "nowrap" \| "balance" \| "pretty">` | — | |
67
- | `margin` | `Responsive<"auto" \| "0" \| "25" \| "50" \| "75" \| "100" \| "150" \| "175" \| "200" \| "250" \| "300" \| "350" \| "400" \| "500" \| "600" \| "700" \| "800" \| "900" \| "1000" \| `var(--h-${string})`>` | — | |
68
- | `marginTop` | `Responsive<"auto" \| "0" \| "25" \| "50" \| "75" \| "100" \| "150" \| "175" \| "200" \| "250" \| "300" \| "350" \| "400" \| "500" \| "600" \| "700" \| "800" \| "900" \| "1000" \| `var(--h-${string})`>` | — | |
69
- | `marginRight` | `Responsive<"auto" \| "0" \| "25" \| "50" \| "75" \| "100" \| "150" \| "175" \| "200" \| "250" \| "300" \| "350" \| "400" \| "500" \| "600" \| "700" \| "800" \| "900" \| "1000" \| `var(--h-${string})`>` | — | |
70
- | `marginBottom` | `Responsive<"auto" \| "0" \| "25" \| "50" \| "75" \| "100" \| "150" \| "175" \| "200" \| "250" \| "300" \| "350" \| "400" \| "500" \| "600" \| "700" \| "800" \| "900" \| "1000" \| `var(--h-${string})`>` | — | |
71
- | `marginLeft` | `Responsive<"auto" \| "0" \| "25" \| "50" \| "75" \| "100" \| "150" \| "175" \| "200" \| "250" \| "300" \| "350" \| "400" \| "500" \| "600" \| "700" \| "800" \| "900" \| "1000" \| `var(--h-${string})`>` | — | |
72
- | `marginX` | `Responsive<"auto" \| "0" \| "25" \| "50" \| "75" \| "100" \| "150" \| "175" \| "200" \| "250" \| "300" \| "350" \| "400" \| "500" \| "600" \| "700" \| "800" \| "900" \| "1000" \| `var(--h-${string})`>` | — | |
73
- | `marginY` | `Responsive<"auto" \| "0" \| "25" \| "50" \| "75" \| "100" \| "150" \| "175" \| "200" \| "250" \| "300" \| "350" \| "400" \| "500" \| "600" \| "700" \| "800" \| "900" \| "1000" \| `var(--h-${string})`>` | — | |
57
+ | Prop | Type | Default | Description |
58
+ | ---------- | --------------------------------------- | ------- | ---------------------------------------------------------------------------------------------------- |
59
+ | `as` | `"h2" \| "h1" \| "h3" \| "h4"` | `h2` | |
60
+ | `asChild` | `boolean` | — | Change the default rendered element for the one passed as a child, merging their props and behavior. |
61
+ | `size` | `"sm" \| "md" \| "lg" \| "xl" \| "2xl"` | `md` | Set the text size styles. |
62
+ | `inverted` | `boolean` | — | Inverts the component colours, for use on darker surface colours. |
package/public/llms/components/helper-text.md CHANGED
@@ -12,16 +12,7 @@ This component is based on the `span` element and supports the following common
12
12
  - Text transform
13
13
  - Text align
14
14
 
15
- | Prop | Type | Default | Description |
16
- | ------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------- | -------------------------------------------------------------------------------------------- |
17
- | `disabled` | `boolean` | — | Set the helper text appearance to disabled. This will be overriden by the validation status. |
18
- | `disableUserSelect` | `boolean` | — | Make the text unselectable, for use when associated with input elements. |
19
- | `margin` | `Responsive<"auto" \| "0" \| "25" \| "50" \| "75" \| "100" \| "150" \| "175" \| "200" \| "250" \| "300" \| "350" \| "400" \| "500" \| "600" \| "700" \| "800" \| "900" \| "1000" \| `var(--h-${string})`>` | — | |
20
- | `marginTop` | `Responsive<"auto" \| "0" \| "25" \| "50" \| "75" \| "100" \| "150" \| "175" \| "200" \| "250" \| "300" \| "350" \| "400" \| "500" \| "600" \| "700" \| "800" \| "900" \| "1000" \| `var(--h-${string})`>` | — | |
21
- | `marginRight` | `Responsive<"auto" \| "0" \| "25" \| "50" \| "75" \| "100" \| "150" \| "175" \| "200" \| "250" \| "300" \| "350" \| "400" \| "500" \| "600" \| "700" \| "800" \| "900" \| "1000" \| `var(--h-${string})`>` | — | |
22
- | `marginBottom` | `Responsive<"auto" \| "0" \| "25" \| "50" \| "75" \| "100" \| "150" \| "175" \| "200" \| "250" \| "300" \| "350" \| "400" \| "500" \| "600" \| "700" \| "800" \| "900" \| "1000" \| `var(--h-${string})`>` | — | |
23
- | `marginLeft` | `Responsive<"auto" \| "0" \| "25" \| "50" \| "75" \| "100" \| "150" \| "175" \| "200" \| "250" \| "300" \| "350" \| "400" \| "500" \| "600" \| "700" \| "800" \| "900" \| "1000" \| `var(--h-${string})`>` | — | |
24
- | `marginX` | `Responsive<"auto" \| "0" \| "25" \| "50" \| "75" \| "100" \| "150" \| "175" \| "200" \| "250" \| "300" \| "350" \| "400" \| "500" \| "600" \| "700" \| "800" \| "900" \| "1000" \| `var(--h-${string})`>` | — | |
25
- | `marginY` | `Responsive<"auto" \| "0" \| "25" \| "50" \| "75" \| "100" \| "150" \| "175" \| "200" \| "250" \| "300" \| "350" \| "400" \| "500" \| "600" \| "700" \| "800" \| "900" \| "1000" \| `var(--h-${string})`>` | — | |
26
- | `textAlign` | `Responsive<"center" \| "left" \| "right">` | — | |
27
- | `textTransform` | `"none" \| "uppercase" \| "lowercase" \| "capitalize"` | — | Set the text-transform on the component. |
15
+ | Prop | Type | Default | Description |
16
+ | ------------------- | --------- | ------- | -------------------------------------------------------------------------------------------- |
17
+ | `disabled` | `boolean` | — | Set the helper text appearance to disabled. This will be overriden by the validation status. |
18
+ | `disableUserSelect` | `boolean` | — | Make the text unselectable, for use when associated with input elements. |