@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
|
@@ -109,16 +109,9 @@ This component is based on the `div` element and supports the following common p
|
|
|
109
109
|
|
|
110
110
|
- Margin
|
|
111
111
|
|
|
112
|
-
| Prop | Type
|
|
113
|
-
| -------------- |
|
|
114
|
-
| `shadowColor` | `"brand" \| "mobile" \| "energy" \| "broadband" \| "insurance" \| "cashback" \| "pig" \| "functional"`
|
|
115
|
-
| `
|
|
116
|
-
| `
|
|
117
|
-
| `
|
|
118
|
-
| `marginBottom` | `Responsive<`var(--h-${string})` \| "auto" \| "0" \| "25" \| "50" \| "75" \| "100" \| "150" \| "175" \| "200" \| "250" \| "300" \| "350" \| "400" \| "500" \| "600" \| "700" \| "800" \| "900" \| "1000">` | — | |
|
|
119
|
-
| `marginLeft` | `Responsive<`var(--h-${string})` \| "auto" \| "0" \| "25" \| "50" \| "75" \| "100" \| "150" \| "175" \| "200" \| "250" \| "300" \| "350" \| "400" \| "500" \| "600" \| "700" \| "800" \| "900" \| "1000">` | — | |
|
|
120
|
-
| `marginX` | `Responsive<`var(--h-${string})` \| "auto" \| "0" \| "25" \| "50" \| "75" \| "100" \| "150" \| "175" \| "200" \| "250" \| "300" \| "350" \| "400" \| "500" \| "600" \| "700" \| "800" \| "900" \| "1000">` | — | |
|
|
121
|
-
| `marginY` | `Responsive<`var(--h-${string})` \| "auto" \| "0" \| "25" \| "50" \| "75" \| "100" \| "150" \| "175" \| "200" \| "250" \| "300" \| "350" \| "400" \| "500" \| "600" \| "700" \| "800" \| "900" \| "1000">` | — | |
|
|
122
|
-
| `colorScheme` | `"neutralStrong" \| "neutralSubtle"` | — | |
|
|
123
|
-
| `heading` | `string` | — | |
|
|
124
|
-
| `headingColor` | `"mobile" \| "energy" \| "broadband" \| "insurance" \| "cashback" \| "pig" \| "highlight"` | — | |
|
|
112
|
+
| Prop | Type | Default | Description |
|
|
113
|
+
| -------------- | ------------------------------------------------------------------------------------------------------ | ------- | --------------------------- |
|
|
114
|
+
| `shadowColor` | `"brand" \| "mobile" \| "energy" \| "broadband" \| "insurance" \| "cashback" \| "pig" \| "functional"` | — | Sets the card shadow colour |
|
|
115
|
+
| `colorScheme` | `"neutralStrong" \| "neutralSubtle"` | — | |
|
|
116
|
+
| `heading` | `string` | — | |
|
|
117
|
+
| `headingColor` | `"mobile" \| "energy" \| "broadband" \| "insurance" \| "cashback" \| "pig" \| "highlight"` | — | |
|
|
@@ -498,19 +498,12 @@ This component is based on the `button` element and supports the following commo
|
|
|
498
498
|
|
|
499
499
|
- Margin
|
|
500
500
|
|
|
501
|
-
| Prop
|
|
502
|
-
|
|
|
503
|
-
| `label`
|
|
504
|
-
| `
|
|
505
|
-
| `
|
|
506
|
-
| `
|
|
507
|
-
| `
|
|
508
|
-
| `
|
|
509
|
-
| `
|
|
510
|
-
| `marginY` | `Responsive<"auto" \| "0" \| "25" \| "50" \| "75" \| "100" \| "150" \| "175" \| "200" \| "250" \| "300" \| "350" \| "400" \| "500" \| "600" \| "700" \| "800" \| "900" \| "1000" \| `var(--h-${string})`>` | — | |
|
|
511
|
-
| `variant` | `"emphasis" \| "solid" \| "outline" \| "ghost"` | — | Sets the button's visual variant |
|
|
512
|
-
| `colorScheme` | `"highlight" \| "affirmative" \| "destructive" \| "functional"` | — | Sets the button's colour scheme |
|
|
513
|
-
| `asChild` | `boolean` | — | Change the default rendered element for the one passed as a child, merging their props and behavior. |
|
|
514
|
-
| `loading` | `boolean` | — | Indicate when the button is in a loading state, will also disable the button. |
|
|
515
|
-
| `inverted` | `boolean` | — | Inverts the component colours, for use on darker surface colours. |
|
|
516
|
-
| `size` | `Responsive<"sm" \| "md">` | `md` | Sets the button height. |
|
|
501
|
+
| Prop | Type | Default | Description |
|
|
502
|
+
| ------------- | --------------------------------------------------------------- | ------- | ---------------------------------------------------------------------------------------------------- |
|
|
503
|
+
| `label` | `string` | — | An accessibility label that describes the button. Make sure this label reflects the visual icon. |
|
|
504
|
+
| `variant` | `"emphasis" \| "solid" \| "outline" \| "ghost"` | — | Sets the button's visual variant |
|
|
505
|
+
| `colorScheme` | `"highlight" \| "affirmative" \| "destructive" \| "functional"` | — | Sets the button's colour scheme |
|
|
506
|
+
| `asChild` | `boolean` | — | Change the default rendered element for the one passed as a child, merging their props and behavior. |
|
|
507
|
+
| `loading` | `boolean` | — | Indicate when the button is in a loading state, will also disable the button. |
|
|
508
|
+
| `inverted` | `boolean` | — | Inverts the component colours, for use on darker surface colours. |
|
|
509
|
+
| `size` | `Responsive<"sm" \| "md">` | `md` | Sets the button height. |
|
|
@@ -227,21 +227,9 @@ This component is based on the `span` element and supports the following common
|
|
|
227
227
|
- Border Radius
|
|
228
228
|
- Size
|
|
229
229
|
|
|
230
|
-
| Prop
|
|
231
|
-
|
|
|
232
|
-
| `size`
|
|
233
|
-
| `variant`
|
|
234
|
-
| `colorScheme`
|
|
235
|
-
| `fill`
|
|
236
|
-
| `borderRadius` | `Responsive<"none" \| "inherit">` | — | |
|
|
237
|
-
| `borderTopLeftRadius` | `Responsive<"none" \| "inherit">` | — | |
|
|
238
|
-
| `borderTopRightRadius` | `Responsive<"none" \| "inherit">` | — | |
|
|
239
|
-
| `borderBottomRightRadius` | `Responsive<"none" \| "inherit">` | — | |
|
|
240
|
-
| `borderBottomLeftRadius` | `Responsive<"none" \| "inherit">` | — | |
|
|
241
|
-
| `margin` | `Responsive<"auto" \| "0" \| "25" \| "50" \| "75" \| "100" \| "150" \| "175" \| "200" \| "250" \| "300" \| "350" \| "400" \| "500" \| "600" \| "700" \| "800" \| "900" \| "1000" \| `var(--h-${string})`>` | — | |
|
|
242
|
-
| `marginTop` | `Responsive<"auto" \| "0" \| "25" \| "50" \| "75" \| "100" \| "150" \| "175" \| "200" \| "250" \| "300" \| "350" \| "400" \| "500" \| "600" \| "700" \| "800" \| "900" \| "1000" \| `var(--h-${string})`>` | — | |
|
|
243
|
-
| `marginRight` | `Responsive<"auto" \| "0" \| "25" \| "50" \| "75" \| "100" \| "150" \| "175" \| "200" \| "250" \| "300" \| "350" \| "400" \| "500" \| "600" \| "700" \| "800" \| "900" \| "1000" \| `var(--h-${string})`>` | — | |
|
|
244
|
-
| `marginBottom` | `Responsive<"auto" \| "0" \| "25" \| "50" \| "75" \| "100" \| "150" \| "175" \| "200" \| "250" \| "300" \| "350" \| "400" \| "500" \| "600" \| "700" \| "800" \| "900" \| "1000" \| `var(--h-${string})`>` | — | |
|
|
245
|
-
| `marginLeft` | `Responsive<"auto" \| "0" \| "25" \| "50" \| "75" \| "100" \| "150" \| "175" \| "200" \| "250" \| "300" \| "350" \| "400" \| "500" \| "600" \| "700" \| "800" \| "900" \| "1000" \| `var(--h-${string})`>` | — | |
|
|
246
|
-
| `marginX` | `Responsive<"auto" \| "0" \| "25" \| "50" \| "75" \| "100" \| "150" \| "175" \| "200" \| "250" \| "300" \| "350" \| "400" \| "500" \| "600" \| "700" \| "800" \| "900" \| "1000" \| `var(--h-${string})`>` | — | |
|
|
247
|
-
| `marginY` | `Responsive<"auto" \| "0" \| "25" \| "50" \| "75" \| "100" \| "150" \| "175" \| "200" \| "250" \| "300" \| "350" \| "400" \| "500" \| "600" \| "700" \| "800" \| "900" \| "1000" \| `var(--h-${string})`>` | — | |
|
|
230
|
+
| Prop | Type | Default | Description |
|
|
231
|
+
| ------------- | ------------------------------------------------------------------------------------------ | -------- | ------------------------------------------------------------------------------- |
|
|
232
|
+
| `size` | `Responsive<"sm" \| "md" \| "lg">` | `md` | Sets the container size. |
|
|
233
|
+
| `variant` | `"emphasis" \| "subtle"` | `subtle` | Sets the container's visual variant |
|
|
234
|
+
| `colorScheme` | `"mobile" \| "energy" \| "broadband" \| "insurance" \| "cashback" \| "pig" \| "highlight"` | `pig` | Sets the colour scheme. |
|
|
235
|
+
| `fill` | `"height" \| "width" \| "both"` | — | Fill the container height, width or both, rather than having a constrained size |
|
|
@@ -175,16 +175,8 @@ This component is based on the `a` element and supports the following common pro
|
|
|
175
175
|
- Margin
|
|
176
176
|
- Text transform
|
|
177
177
|
|
|
178
|
-
| Prop
|
|
179
|
-
|
|
|
180
|
-
| `color`
|
|
181
|
-
| `asChild`
|
|
182
|
-
| `hideOpenIcon`
|
|
183
|
-
| `margin` | `Responsive<"auto" \| "0" \| "25" \| "50" \| "75" \| "100" \| "150" \| "175" \| "200" \| "250" \| "300" \| "350" \| "400" \| "500" \| "600" \| "700" \| "800" \| "900" \| "1000" \| `var(--h-${string})`>` | — | |
|
|
184
|
-
| `marginTop` | `Responsive<"auto" \| "0" \| "25" \| "50" \| "75" \| "100" \| "150" \| "175" \| "200" \| "250" \| "300" \| "350" \| "400" \| "500" \| "600" \| "700" \| "800" \| "900" \| "1000" \| `var(--h-${string})`>` | — | |
|
|
185
|
-
| `marginRight` | `Responsive<"auto" \| "0" \| "25" \| "50" \| "75" \| "100" \| "150" \| "175" \| "200" \| "250" \| "300" \| "350" \| "400" \| "500" \| "600" \| "700" \| "800" \| "900" \| "1000" \| `var(--h-${string})`>` | — | |
|
|
186
|
-
| `marginBottom` | `Responsive<"auto" \| "0" \| "25" \| "50" \| "75" \| "100" \| "150" \| "175" \| "200" \| "250" \| "300" \| "350" \| "400" \| "500" \| "600" \| "700" \| "800" \| "900" \| "1000" \| `var(--h-${string})`>` | — | |
|
|
187
|
-
| `marginLeft` | `Responsive<"auto" \| "0" \| "25" \| "50" \| "75" \| "100" \| "150" \| "175" \| "200" \| "250" \| "300" \| "350" \| "400" \| "500" \| "600" \| "700" \| "800" \| "900" \| "1000" \| `var(--h-${string})`>` | — | |
|
|
188
|
-
| `marginX` | `Responsive<"auto" \| "0" \| "25" \| "50" \| "75" \| "100" \| "150" \| "175" \| "200" \| "250" \| "300" \| "350" \| "400" \| "500" \| "600" \| "700" \| "800" \| "900" \| "1000" \| `var(--h-${string})`>` | — | |
|
|
189
|
-
| `marginY` | `Responsive<"auto" \| "0" \| "25" \| "50" \| "75" \| "100" \| "150" \| "175" \| "200" \| "250" \| "300" \| "350" \| "400" \| "500" \| "600" \| "700" \| "800" \| "900" \| "1000" \| `var(--h-${string})`>` | — | |
|
|
190
|
-
| `textTransform` | `"none" \| "uppercase" \| "lowercase" \| "capitalize"` | — | Set the text-transform on the component. |
|
|
178
|
+
| Prop | Type | Default | Description |
|
|
179
|
+
| -------------- | -------------------------------------- | ------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
|
|
180
|
+
| `color` | `"default" \| "inverted" \| "inherit"` | — | Sets the color scheme for the InlineLink. - 'default': Uses the standard link color. - 'inverted': Uses a color suitable for dark backgrounds. Use when placing the link on a dark or colored background for better contrast. - 'inherit': Inherits the color from its parent element. Use to match the surrounding text color. |
|
|
181
|
+
| `asChild` | `boolean` | — | Change the default rendered element for the one passed as a child, merging their props and behavior. |
|
|
182
|
+
| `hideOpenIcon` | `boolean` | — | Hides the "open in new tab" icon when `target="_blank"` is set. |
|
|
@@ -11,18 +11,10 @@ This component is based on the `label` element, and supports the following commo
|
|
|
11
11
|
- Margin
|
|
12
12
|
- Text transform
|
|
13
13
|
|
|
14
|
-
| Prop | Type
|
|
15
|
-
| ------------------- |
|
|
16
|
-
| `as` | `"label" \| "span"`
|
|
17
|
-
| `variant` | `"body" \| "heading"`
|
|
18
|
-
| `fontWeight` | `"regular" \| "semibold"`
|
|
19
|
-
| `disabled` | `boolean`
|
|
20
|
-
| `disableUserSelect` | `boolean`
|
|
21
|
-
| `margin` | `Responsive<"auto" \| "0" \| "25" \| "50" \| "75" \| "100" \| "150" \| "175" \| "200" \| "250" \| "300" \| "350" \| "400" \| "500" \| "600" \| "700" \| "800" \| "900" \| "1000" \| `var(--h-${string})`>` | — | |
|
|
22
|
-
| `marginTop` | `Responsive<"auto" \| "0" \| "25" \| "50" \| "75" \| "100" \| "150" \| "175" \| "200" \| "250" \| "300" \| "350" \| "400" \| "500" \| "600" \| "700" \| "800" \| "900" \| "1000" \| `var(--h-${string})`>` | — | |
|
|
23
|
-
| `marginRight` | `Responsive<"auto" \| "0" \| "25" \| "50" \| "75" \| "100" \| "150" \| "175" \| "200" \| "250" \| "300" \| "350" \| "400" \| "500" \| "600" \| "700" \| "800" \| "900" \| "1000" \| `var(--h-${string})`>` | — | |
|
|
24
|
-
| `marginBottom` | `Responsive<"auto" \| "0" \| "25" \| "50" \| "75" \| "100" \| "150" \| "175" \| "200" \| "250" \| "300" \| "350" \| "400" \| "500" \| "600" \| "700" \| "800" \| "900" \| "1000" \| `var(--h-${string})`>` | — | |
|
|
25
|
-
| `marginLeft` | `Responsive<"auto" \| "0" \| "25" \| "50" \| "75" \| "100" \| "150" \| "175" \| "200" \| "250" \| "300" \| "350" \| "400" \| "500" \| "600" \| "700" \| "800" \| "900" \| "1000" \| `var(--h-${string})`>` | — | |
|
|
26
|
-
| `marginX` | `Responsive<"auto" \| "0" \| "25" \| "50" \| "75" \| "100" \| "150" \| "175" \| "200" \| "250" \| "300" \| "350" \| "400" \| "500" \| "600" \| "700" \| "800" \| "900" \| "1000" \| `var(--h-${string})`>` | — | |
|
|
27
|
-
| `marginY` | `Responsive<"auto" \| "0" \| "25" \| "50" \| "75" \| "100" \| "150" \| "175" \| "200" \| "250" \| "300" \| "350" \| "400" \| "500" \| "600" \| "700" \| "800" \| "900" \| "1000" \| `var(--h-${string})`>` | — | |
|
|
28
|
-
| `textTransform` | `"none" \| "uppercase" \| "lowercase" \| "capitalize"` | — | Set the text-transform on the component. |
|
|
14
|
+
| Prop | Type | Default | Description |
|
|
15
|
+
| ------------------- | ------------------------- | ------- | ---------------------------------------------------------------------------------------------------------------------------------------------- |
|
|
16
|
+
| `as` | `"label" \| "span"` | `label` | Shorthand for changing the default rendered element into a semantically appropriate alternative. Cannot be used in combination with `asChild`. |
|
|
17
|
+
| `variant` | `"body" \| "heading"` | — | |
|
|
18
|
+
| `fontWeight` | `"regular" \| "semibold"` | — | |
|
|
19
|
+
| `disabled` | `boolean` | — | Set the label appearance to disabled |
|
|
20
|
+
| `disableUserSelect` | `boolean` | — | Make the text unselectable, for use when associated with input elements. |
|
|
@@ -221,16 +221,8 @@ This component is based on the `a` element and supports the following common pro
|
|
|
221
221
|
- Margin
|
|
222
222
|
- Text transform
|
|
223
223
|
|
|
224
|
-
| Prop
|
|
225
|
-
|
|
|
226
|
-
| `asChild`
|
|
227
|
-
| `inverted`
|
|
228
|
-
| `hideOpenIcon`
|
|
229
|
-
| `margin` | `Responsive<"auto" \| "0" \| "25" \| "50" \| "75" \| "100" \| "150" \| "175" \| "200" \| "250" \| "300" \| "350" \| "400" \| "500" \| "600" \| "700" \| "800" \| "900" \| "1000" \| `var(--h-${string})`>` | — | |
|
|
230
|
-
| `marginTop` | `Responsive<"auto" \| "0" \| "25" \| "50" \| "75" \| "100" \| "150" \| "175" \| "200" \| "250" \| "300" \| "350" \| "400" \| "500" \| "600" \| "700" \| "800" \| "900" \| "1000" \| `var(--h-${string})`>` | — | |
|
|
231
|
-
| `marginRight` | `Responsive<"auto" \| "0" \| "25" \| "50" \| "75" \| "100" \| "150" \| "175" \| "200" \| "250" \| "300" \| "350" \| "400" \| "500" \| "600" \| "700" \| "800" \| "900" \| "1000" \| `var(--h-${string})`>` | — | |
|
|
232
|
-
| `marginBottom` | `Responsive<"auto" \| "0" \| "25" \| "50" \| "75" \| "100" \| "150" \| "175" \| "200" \| "250" \| "300" \| "350" \| "400" \| "500" \| "600" \| "700" \| "800" \| "900" \| "1000" \| `var(--h-${string})`>` | — | |
|
|
233
|
-
| `marginLeft` | `Responsive<"auto" \| "0" \| "25" \| "50" \| "75" \| "100" \| "150" \| "175" \| "200" \| "250" \| "300" \| "350" \| "400" \| "500" \| "600" \| "700" \| "800" \| "900" \| "1000" \| `var(--h-${string})`>` | — | |
|
|
234
|
-
| `marginX` | `Responsive<"auto" \| "0" \| "25" \| "50" \| "75" \| "100" \| "150" \| "175" \| "200" \| "250" \| "300" \| "350" \| "400" \| "500" \| "600" \| "700" \| "800" \| "900" \| "1000" \| `var(--h-${string})`>` | — | |
|
|
235
|
-
| `marginY` | `Responsive<"auto" \| "0" \| "25" \| "50" \| "75" \| "100" \| "150" \| "175" \| "200" \| "250" \| "300" \| "350" \| "400" \| "500" \| "600" \| "700" \| "800" \| "900" \| "1000" \| `var(--h-${string})`>` | — | |
|
|
236
|
-
| `textTransform` | `"none" \| "uppercase" \| "lowercase" \| "capitalize"` | — | Set the text-transform on the component. |
|
|
224
|
+
| Prop | Type | Default | Description |
|
|
225
|
+
| -------------- | --------- | ------- | ---------------------------------------------------------------------------------------------------- |
|
|
226
|
+
| `asChild` | `boolean` | — | Change the default rendered element for the one passed as a child, merging their props and behavior. |
|
|
227
|
+
| `inverted` | `boolean` | — | Inverts the component colours, for use on darker surface colours. |
|
|
228
|
+
| `hideOpenIcon` | `boolean` | — | Hides the "open in new tab" icon when `target="_blank"` is set. |
|
|
@@ -539,26 +539,19 @@ This component is based on the `ul` element and supports the following common pr
|
|
|
539
539
|
|
|
540
540
|
- Margin
|
|
541
541
|
|
|
542
|
-
| Prop | Type
|
|
543
|
-
| ------------------ |
|
|
544
|
-
| `heading` | `string`
|
|
545
|
-
| `headingElement` | `"div" \| "h1" \| "h2" \| "h3" \| "h4"`
|
|
546
|
-
| `helperText` | `string`
|
|
547
|
-
| `trailingContent` | `ReactNode`
|
|
548
|
-
| `validationStatus` | `"invalid"`
|
|
549
|
-
| `validationText` | `string`
|
|
550
|
-
| `direction` | `Responsive<"row" \| "column">`
|
|
551
|
-
| `
|
|
552
|
-
| `
|
|
553
|
-
| `
|
|
554
|
-
| `
|
|
555
|
-
| `marginLeft` | `Responsive<"auto" \| "0" \| "25" \| "50" \| "75" \| "100" \| "150" \| "175" \| "200" \| "250" \| "300" \| "350" \| "400" \| "500" \| "600" \| "700" \| "800" \| "900" \| "1000" \| `var(--h-${string})`>` | — | |
|
|
556
|
-
| `marginX` | `Responsive<"auto" \| "0" \| "25" \| "50" \| "75" \| "100" \| "150" \| "175" \| "200" \| "250" \| "300" \| "350" \| "400" \| "500" \| "600" \| "700" \| "800" \| "900" \| "1000" \| `var(--h-${string})`>` | — | |
|
|
557
|
-
| `marginY` | `Responsive<"auto" \| "0" \| "25" \| "50" \| "75" \| "100" \| "150" \| "175" \| "200" \| "250" \| "300" \| "350" \| "400" \| "500" \| "600" \| "700" \| "800" \| "900" \| "1000" \| `var(--h-${string})`>` | — | |
|
|
558
|
-
| `variant` | `"emphasis" \| "subtle"` | `undefined` | Sets the visual variant of the list. |
|
|
559
|
-
| `colorScheme` | `"neutralStrong" \| "neutralSubtle"` | — | Sets the color scheme of the list. |
|
|
560
|
-
| `as` | `"ol" \| "ul"` | `ul` | Shorthand for changing the default rendered element into a semantically appropriate alternative. |
|
|
561
|
-
| `paddingNone` | `boolean` | — | Remove the inline padding for better alignment with other elements. |
|
|
542
|
+
| Prop | Type | Default | Description |
|
|
543
|
+
| ------------------ | --------------------------------------- | ----------- | ------------------------------------------------------------------------------------------------- |
|
|
544
|
+
| `heading` | `string` | — | Actual string to display as section header |
|
|
545
|
+
| `headingElement` | `"div" \| "h1" \| "h2" \| "h3" \| "h4"` | `h2` | |
|
|
546
|
+
| `helperText` | `string` | — | Optional helper text to provide additional context or instructions. |
|
|
547
|
+
| `trailingContent` | `ReactNode` | — | Optional trailing content element |
|
|
548
|
+
| `validationStatus` | `"invalid"` | — | Indicates the validation state |
|
|
549
|
+
| `validationText` | `string` | — | Text to display when the `validationStatus` is set. |
|
|
550
|
+
| `direction` | `Responsive<"row" \| "column">` | — | Responsive direction of the section header content. By default, the content is laid out in a row. |
|
|
551
|
+
| `variant` | `"emphasis" \| "subtle"` | `undefined` | Sets the visual variant of the list. |
|
|
552
|
+
| `colorScheme` | `"neutralStrong" \| "neutralSubtle"` | — | Sets the color scheme of the list. |
|
|
553
|
+
| `as` | `"ol" \| "ul"` | `ul` | Shorthand for changing the default rendered element into a semantically appropriate alternative. |
|
|
554
|
+
| `paddingNone` | `boolean` | — | Remove the inline padding for better alignment with other elements. |
|
|
562
555
|
|
|
563
556
|
## ListItem
|
|
564
557
|
|
|
@@ -690,15 +683,9 @@ This component is base on the `a` element and extends the `ListItemContent`
|
|
|
690
683
|
component, so it supports all the same props, as well as the following
|
|
691
684
|
additional props:
|
|
692
685
|
|
|
693
|
-
| Prop
|
|
694
|
-
|
|
|
695
|
-
| `
|
|
696
|
-
| `helperText` | `ReactNode` | — | Optional helper text to provide additional context or instructions. |
|
|
697
|
-
| `leadingContent` | `ReactNode` | — | |
|
|
698
|
-
| `trailingContent` | `ReactNode` | — | |
|
|
699
|
-
| `badge` | `ReactNode` | — | |
|
|
700
|
-
| `badgePlacement` | `"top" \| "bottom"` | `'bottom'` | Placement of the badge element |
|
|
701
|
-
| `asChild` | `boolean` | — | Change the default rendered element for the one passed as a child, merging their props and behavior. |
|
|
686
|
+
| Prop | Type | Default | Description |
|
|
687
|
+
| --------- | --------- | ------- | ---------------------------------------------------------------------------------------------------- |
|
|
688
|
+
| `asChild` | `boolean` | — | Change the default rendered element for the one passed as a child, merging their props and behavior. |
|
|
702
689
|
|
|
703
690
|
## ListActionLink
|
|
704
691
|
|
|
@@ -121,18 +121,11 @@ This component is based on the `div` element by default and supports the followi
|
|
|
121
121
|
|
|
122
122
|
- Margin
|
|
123
123
|
|
|
124
|
-
| Prop | Type
|
|
125
|
-
| ----------------- |
|
|
126
|
-
| `as` | `"div" \| "nav"`
|
|
127
|
-
| `currentPage` | `number`
|
|
128
|
-
| `totalPages` | `number`
|
|
129
|
-
| `onPageChange` | `(page: number) => void`
|
|
130
|
-
| `condensed` | `boolean`
|
|
131
|
-
| `hideSkipButtons` | `boolean`
|
|
132
|
-
| `margin` | `Responsive<"auto" \| "0" \| "25" \| "50" \| "75" \| "100" \| "150" \| "175" \| "200" \| "250" \| "300" \| "350" \| "400" \| "500" \| "600" \| "700" \| "800" \| "900" \| "1000" \| `var(--h-${string})`>` | — | |
|
|
133
|
-
| `marginTop` | `Responsive<"auto" \| "0" \| "25" \| "50" \| "75" \| "100" \| "150" \| "175" \| "200" \| "250" \| "300" \| "350" \| "400" \| "500" \| "600" \| "700" \| "800" \| "900" \| "1000" \| `var(--h-${string})`>` | — | |
|
|
134
|
-
| `marginRight` | `Responsive<"auto" \| "0" \| "25" \| "50" \| "75" \| "100" \| "150" \| "175" \| "200" \| "250" \| "300" \| "350" \| "400" \| "500" \| "600" \| "700" \| "800" \| "900" \| "1000" \| `var(--h-${string})`>` | — | |
|
|
135
|
-
| `marginBottom` | `Responsive<"auto" \| "0" \| "25" \| "50" \| "75" \| "100" \| "150" \| "175" \| "200" \| "250" \| "300" \| "350" \| "400" \| "500" \| "600" \| "700" \| "800" \| "900" \| "1000" \| `var(--h-${string})`>` | — | |
|
|
136
|
-
| `marginLeft` | `Responsive<"auto" \| "0" \| "25" \| "50" \| "75" \| "100" \| "150" \| "175" \| "200" \| "250" \| "300" \| "350" \| "400" \| "500" \| "600" \| "700" \| "800" \| "900" \| "1000" \| `var(--h-${string})`>` | — | |
|
|
137
|
-
| `marginX` | `Responsive<"auto" \| "0" \| "25" \| "50" \| "75" \| "100" \| "150" \| "175" \| "200" \| "250" \| "300" \| "350" \| "400" \| "500" \| "600" \| "700" \| "800" \| "900" \| "1000" \| `var(--h-${string})`>` | — | |
|
|
138
|
-
| `marginY` | `Responsive<"auto" \| "0" \| "25" \| "50" \| "75" \| "100" \| "150" \| "175" \| "200" \| "250" \| "300" \| "350" \| "400" \| "500" \| "600" \| "700" \| "800" \| "900" \| "1000" \| `var(--h-${string})`>` | — | |
|
|
124
|
+
| Prop | Type | Default | Description |
|
|
125
|
+
| ----------------- | ------------------------ | ------- | ------------------------------------------------------------------------------------------------ |
|
|
126
|
+
| `as` | `"div" \| "nav"` | `div` | Shorthand for changing the default rendered element into a semantically appropriate alternative. |
|
|
127
|
+
| `currentPage` | `number` | — | The current active page number (1-indexed) |
|
|
128
|
+
| `totalPages` | `number` | — | The total number of pages |
|
|
129
|
+
| `onPageChange` | `(page: number) => void` | — | Callback when page changes |
|
|
130
|
+
| `condensed` | `boolean` | `false` | Whether to show condensed version with only "Page X of Y" text |
|
|
131
|
+
| `hideSkipButtons` | `boolean` | `false` | Whether to hide the skip to first/last page buttons |
|
|
@@ -72,22 +72,15 @@ This component is based on the `TextInput` component and supports the following
|
|
|
72
72
|
|
|
73
73
|
- Margin
|
|
74
74
|
|
|
75
|
-
| Prop | Type
|
|
76
|
-
| ------------------ |
|
|
77
|
-
| `label` | `string`
|
|
78
|
-
| `defaultValue` | `string \| number`
|
|
79
|
-
| `value` | `string \| number`
|
|
80
|
-
| `labelId` | `string`
|
|
81
|
-
| `helperTextId` | `string`
|
|
82
|
-
| `validationTextId` | `string`
|
|
83
|
-
| `labelVariant` | `"body" \| "heading"`
|
|
84
|
-
| `helperText` | `string`
|
|
85
|
-
| `validationText` | `string`
|
|
86
|
-
| `validationStatus` | `"valid" \| "invalid"`
|
|
87
|
-
| `margin` | `Responsive<"auto" \| "0" \| "25" \| "50" \| "75" \| "100" \| "150" \| "175" \| "200" \| "250" \| "300" \| "350" \| "400" \| "500" \| "600" \| "700" \| "800" \| "900" \| "1000" \| `var(--h-${string})`>` | — | |
|
|
88
|
-
| `marginTop` | `Responsive<"auto" \| "0" \| "25" \| "50" \| "75" \| "100" \| "150" \| "175" \| "200" \| "250" \| "300" \| "350" \| "400" \| "500" \| "600" \| "700" \| "800" \| "900" \| "1000" \| `var(--h-${string})`>` | — | |
|
|
89
|
-
| `marginRight` | `Responsive<"auto" \| "0" \| "25" \| "50" \| "75" \| "100" \| "150" \| "175" \| "200" \| "250" \| "300" \| "350" \| "400" \| "500" \| "600" \| "700" \| "800" \| "900" \| "1000" \| `var(--h-${string})`>` | — | |
|
|
90
|
-
| `marginBottom` | `Responsive<"auto" \| "0" \| "25" \| "50" \| "75" \| "100" \| "150" \| "175" \| "200" \| "250" \| "300" \| "350" \| "400" \| "500" \| "600" \| "700" \| "800" \| "900" \| "1000" \| `var(--h-${string})`>` | — | |
|
|
91
|
-
| `marginLeft` | `Responsive<"auto" \| "0" \| "25" \| "50" \| "75" \| "100" \| "150" \| "175" \| "200" \| "250" \| "300" \| "350" \| "400" \| "500" \| "600" \| "700" \| "800" \| "900" \| "1000" \| `var(--h-${string})`>` | — | |
|
|
92
|
-
| `marginX` | `Responsive<"auto" \| "0" \| "25" \| "50" \| "75" \| "100" \| "150" \| "175" \| "200" \| "250" \| "300" \| "350" \| "400" \| "500" \| "600" \| "700" \| "800" \| "900" \| "1000" \| `var(--h-${string})`>` | — | |
|
|
93
|
-
| `marginY` | `Responsive<"auto" \| "0" \| "25" \| "50" \| "75" \| "100" \| "150" \| "175" \| "200" \| "250" \| "300" \| "350" \| "400" \| "500" \| "600" \| "700" \| "800" \| "900" \| "1000" \| `var(--h-${string})`>` | — | |
|
|
75
|
+
| Prop | Type | Default | Description |
|
|
76
|
+
| ------------------ | ---------------------- | ------- | --------------------------------------------------------------------------- |
|
|
77
|
+
| `label` | `string` | — | The label for the form field, describing its purpose. |
|
|
78
|
+
| `defaultValue` | `string \| number` | — | The initial value of the input when rendered. |
|
|
79
|
+
| `value` | `string \| number` | — | The controlled value of the input. Must be used with an `onChange` handler. |
|
|
80
|
+
| `labelId` | `string` | — | |
|
|
81
|
+
| `helperTextId` | `string` | — | |
|
|
82
|
+
| `validationTextId` | `string` | — | |
|
|
83
|
+
| `labelVariant` | `"body" \| "heading"` | — | Change the label variant |
|
|
84
|
+
| `helperText` | `string` | — | Optional helper text to provide additional context or instructions. |
|
|
85
|
+
| `validationText` | `string` | — | Text to display when the `validationStatus` is set. |
|
|
86
|
+
| `validationStatus` | `"valid" \| "invalid"` | — | Indicates the validation status. |
|
|
@@ -118,22 +118,15 @@ This component is based on the `div` element and supports the following common p
|
|
|
118
118
|
|
|
119
119
|
- Margin
|
|
120
120
|
|
|
121
|
-
| Prop | Type
|
|
122
|
-
| ----------------- |
|
|
123
|
-
| `label` | `string`
|
|
124
|
-
| `variant` | `"linear" \| "circular"`
|
|
125
|
-
| `colorScheme` | `"default" \| "success" \| "danger"`
|
|
126
|
-
| `size` | `Responsive<"sm" \| "md">`
|
|
127
|
-
| `value` | `number`
|
|
128
|
-
| `min` | `number`
|
|
129
|
-
| `max` | `number`
|
|
130
|
-
| `hideLabel` | `boolean`
|
|
131
|
-
| `formatValueText` | `((value: number) => string)`
|
|
132
|
-
| `aria-valuetext` | `string`
|
|
133
|
-
| `margin` | `Responsive<"auto" \| "0" \| "25" \| "50" \| "75" \| "100" \| "150" \| "175" \| "200" \| "250" \| "300" \| "350" \| "400" \| "500" \| "600" \| "700" \| "800" \| "900" \| "1000" \| `var(--h-${string})`>` | — | |
|
|
134
|
-
| `marginTop` | `Responsive<"auto" \| "0" \| "25" \| "50" \| "75" \| "100" \| "150" \| "175" \| "200" \| "250" \| "300" \| "350" \| "400" \| "500" \| "600" \| "700" \| "800" \| "900" \| "1000" \| `var(--h-${string})`>` | — | |
|
|
135
|
-
| `marginRight` | `Responsive<"auto" \| "0" \| "25" \| "50" \| "75" \| "100" \| "150" \| "175" \| "200" \| "250" \| "300" \| "350" \| "400" \| "500" \| "600" \| "700" \| "800" \| "900" \| "1000" \| `var(--h-${string})`>` | — | |
|
|
136
|
-
| `marginBottom` | `Responsive<"auto" \| "0" \| "25" \| "50" \| "75" \| "100" \| "150" \| "175" \| "200" \| "250" \| "300" \| "350" \| "400" \| "500" \| "600" \| "700" \| "800" \| "900" \| "1000" \| `var(--h-${string})`>` | — | |
|
|
137
|
-
| `marginLeft` | `Responsive<"auto" \| "0" \| "25" \| "50" \| "75" \| "100" \| "150" \| "175" \| "200" \| "250" \| "300" \| "350" \| "400" \| "500" \| "600" \| "700" \| "800" \| "900" \| "1000" \| `var(--h-${string})`>` | — | |
|
|
138
|
-
| `marginX` | `Responsive<"auto" \| "0" \| "25" \| "50" \| "75" \| "100" \| "150" \| "175" \| "200" \| "250" \| "300" \| "350" \| "400" \| "500" \| "600" \| "700" \| "800" \| "900" \| "1000" \| `var(--h-${string})`>` | — | |
|
|
139
|
-
| `marginY` | `Responsive<"auto" \| "0" \| "25" \| "50" \| "75" \| "100" \| "150" \| "175" \| "200" \| "250" \| "300" \| "350" \| "400" \| "500" \| "600" \| "700" \| "800" \| "900" \| "1000" \| `var(--h-${string})`>` | — | |
|
|
121
|
+
| Prop | Type | Default | Description |
|
|
122
|
+
| ----------------- | ------------------------------------ | ----------- | ------------------------------------------------------------------------------------- |
|
|
123
|
+
| `label` | `string` | — | The required text label. Can be visually hidden with the `hideLabel` prop. |
|
|
124
|
+
| `variant` | `"linear" \| "circular"` | — | |
|
|
125
|
+
| `colorScheme` | `"default" \| "success" \| "danger"` | `'default'` | Set the visual apearance. |
|
|
126
|
+
| `size` | `Responsive<"sm" \| "md">` | `md` | Sets the circular variant size. Does not affect the appearance of the linear variant. |
|
|
127
|
+
| `value` | `number` | — | The current progress value. |
|
|
128
|
+
| `min` | `number` | `0` | The minimum value. |
|
|
129
|
+
| `max` | `number` | `100` | The maximum value. |
|
|
130
|
+
| `hideLabel` | `boolean` | — | Visually hide the label. |
|
|
131
|
+
| `formatValueText` | `((value: number) => string)` | — | Override the default percentage value label formatting |
|
|
132
|
+
| `aria-valuetext` | `string` | — | A human-readable text alternative for the current value (`aria-valuenow`). |
|
|
@@ -108,17 +108,10 @@ This component is based on the `div` element and supports the following common p
|
|
|
108
108
|
|
|
109
109
|
- Margin
|
|
110
110
|
|
|
111
|
-
| Prop
|
|
112
|
-
|
|
|
113
|
-
| `hideLabels`
|
|
114
|
-
| `
|
|
115
|
-
| `marginTop` | `Responsive<"auto" \| "0" \| "25" \| "50" \| "75" \| "100" \| "150" \| "175" \| "200" \| "250" \| "300" \| "350" \| "400" \| "500" \| "600" \| "700" \| "800" \| "900" \| "1000" \| `var(--h-${string})`>` | — | |
|
|
116
|
-
| `marginRight` | `Responsive<"auto" \| "0" \| "25" \| "50" \| "75" \| "100" \| "150" \| "175" \| "200" \| "250" \| "300" \| "350" \| "400" \| "500" \| "600" \| "700" \| "800" \| "900" \| "1000" \| `var(--h-${string})`>` | — | |
|
|
117
|
-
| `marginBottom` | `Responsive<"auto" \| "0" \| "25" \| "50" \| "75" \| "100" \| "150" \| "175" \| "200" \| "250" \| "300" \| "350" \| "400" \| "500" \| "600" \| "700" \| "800" \| "900" \| "1000" \| `var(--h-${string})`>` | — | |
|
|
118
|
-
| `marginLeft` | `Responsive<"auto" \| "0" \| "25" \| "50" \| "75" \| "100" \| "150" \| "175" \| "200" \| "250" \| "300" \| "350" \| "400" \| "500" \| "600" \| "700" \| "800" \| "900" \| "1000" \| `var(--h-${string})`>` | — | |
|
|
119
|
-
| `marginX` | `Responsive<"auto" \| "0" \| "25" \| "50" \| "75" \| "100" \| "150" \| "175" \| "200" \| "250" \| "300" \| "350" \| "400" \| "500" \| "600" \| "700" \| "800" \| "900" \| "1000" \| `var(--h-${string})`>` | — | |
|
|
120
|
-
| `marginY` | `Responsive<"auto" \| "0" \| "25" \| "50" \| "75" \| "100" \| "150" \| "175" \| "200" \| "250" \| "300" \| "350" \| "400" \| "500" \| "600" \| "700" \| "800" \| "900" \| "1000" \| `var(--h-${string})`>` | — | |
|
|
121
|
-
| `as` | `"div" \| "nav"` | — | |
|
|
111
|
+
| Prop | Type | Default | Description |
|
|
112
|
+
| ------------ | ---------------- | ------- | --------------------------- |
|
|
113
|
+
| `hideLabels` | `boolean` | `false` | Whether to hide step labels |
|
|
114
|
+
| `as` | `"div" \| "nav"` | — | |
|
|
122
115
|
|
|
123
116
|
### ProgressStep API
|
|
124
117
|
|