@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
|
@@ -205,24 +205,17 @@ This component is based on the `input` element and supports the following common
|
|
|
205
205
|
|
|
206
206
|
- Margin
|
|
207
207
|
|
|
208
|
-
| Prop | Type
|
|
209
|
-
| ------------------ |
|
|
210
|
-
| `label` | `string`
|
|
211
|
-
| `defaultValue` | `string \| number`
|
|
212
|
-
| `type` | `"number" \| "search" \| "text" \| "email" \| "password" \| "tel" \| "url"`
|
|
213
|
-
| `value` | `string \| number`
|
|
214
|
-
| `labelId` | `string`
|
|
215
|
-
| `helperTextId` | `string`
|
|
216
|
-
| `validationTextId` | `string`
|
|
217
|
-
| `hideLabel` | `boolean`
|
|
218
|
-
| `labelVariant` | `"body" \| "heading"`
|
|
219
|
-
| `helperText` | `string`
|
|
220
|
-
| `validationText` | `string`
|
|
221
|
-
| `validationStatus` | `"valid" \| "invalid"`
|
|
222
|
-
| `margin` | `Responsive<"auto" \| "0" \| "25" \| "50" \| "75" \| "100" \| "150" \| "175" \| "200" \| "250" \| "300" \| "350" \| "400" \| "500" \| "600" \| "700" \| "800" \| "900" \| "1000" \| `var(--h-${string})`>` | — | |
|
|
223
|
-
| `marginTop` | `Responsive<"auto" \| "0" \| "25" \| "50" \| "75" \| "100" \| "150" \| "175" \| "200" \| "250" \| "300" \| "350" \| "400" \| "500" \| "600" \| "700" \| "800" \| "900" \| "1000" \| `var(--h-${string})`>` | — | |
|
|
224
|
-
| `marginRight` | `Responsive<"auto" \| "0" \| "25" \| "50" \| "75" \| "100" \| "150" \| "175" \| "200" \| "250" \| "300" \| "350" \| "400" \| "500" \| "600" \| "700" \| "800" \| "900" \| "1000" \| `var(--h-${string})`>` | — | |
|
|
225
|
-
| `marginBottom` | `Responsive<"auto" \| "0" \| "25" \| "50" \| "75" \| "100" \| "150" \| "175" \| "200" \| "250" \| "300" \| "350" \| "400" \| "500" \| "600" \| "700" \| "800" \| "900" \| "1000" \| `var(--h-${string})`>` | — | |
|
|
226
|
-
| `marginLeft` | `Responsive<"auto" \| "0" \| "25" \| "50" \| "75" \| "100" \| "150" \| "175" \| "200" \| "250" \| "300" \| "350" \| "400" \| "500" \| "600" \| "700" \| "800" \| "900" \| "1000" \| `var(--h-${string})`>` | — | |
|
|
227
|
-
| `marginX` | `Responsive<"auto" \| "0" \| "25" \| "50" \| "75" \| "100" \| "150" \| "175" \| "200" \| "250" \| "300" \| "350" \| "400" \| "500" \| "600" \| "700" \| "800" \| "900" \| "1000" \| `var(--h-${string})`>` | — | |
|
|
228
|
-
| `marginY` | `Responsive<"auto" \| "0" \| "25" \| "50" \| "75" \| "100" \| "150" \| "175" \| "200" \| "250" \| "300" \| "350" \| "400" \| "500" \| "600" \| "700" \| "800" \| "900" \| "1000" \| `var(--h-${string})`>` | — | |
|
|
208
|
+
| Prop | Type | Default | Description |
|
|
209
|
+
| ------------------ | --------------------------------------------------------------------------- | ------- | --------------------------------------------------------------------------- |
|
|
210
|
+
| `label` | `string` | — | The label for the form field, describing its purpose. |
|
|
211
|
+
| `defaultValue` | `string \| number` | — | The initial value of the input when rendered. |
|
|
212
|
+
| `type` | `"number" \| "search" \| "text" \| "email" \| "password" \| "tel" \| "url"` | — | |
|
|
213
|
+
| `value` | `string \| number` | — | The controlled value of the input. Must be used with an `onChange` handler. |
|
|
214
|
+
| `labelId` | `string` | — | |
|
|
215
|
+
| `helperTextId` | `string` | — | |
|
|
216
|
+
| `validationTextId` | `string` | — | |
|
|
217
|
+
| `hideLabel` | `boolean` | — | Visually hide the label. |
|
|
218
|
+
| `labelVariant` | `"body" \| "heading"` | — | Change the label variant |
|
|
219
|
+
| `helperText` | `string` | — | Optional helper text to provide additional context or instructions. |
|
|
220
|
+
| `validationText` | `string` | — | Text to display when the `validationStatus` is set. |
|
|
221
|
+
| `validationStatus` | `"valid" \| "invalid"` | — | Indicates the validation status. |
|
|
@@ -423,91 +423,6 @@ This component is based on the `button` element and `Flex` component and support
|
|
|
423
423
|
|
|
424
424
|
- Flex item
|
|
425
425
|
|
|
426
|
-
| Prop
|
|
427
|
-
|
|
|
428
|
-
| `label`
|
|
429
|
-
| `value` | `string` | — | A string value for the toggle group item. All items within a toggle group should use a unique value. |
|
|
430
|
-
| `asChild` | `boolean` | — | |
|
|
431
|
-
| `spacing` | `"none" \| "2xs" \| "xs" \| "sm" \| "md" \| "lg" \| "xl" \| "2xl"` | — | Set responsive spacing between child elements. |
|
|
432
|
-
| `flex` | `Responsive<string>` | — | |
|
|
433
|
-
| `flexBasis` | `Responsive<string>` | — | |
|
|
434
|
-
| `flexShrink` | `Responsive<string>` | — | |
|
|
435
|
-
| `flexGrow` | `Responsive<string>` | — | |
|
|
436
|
-
| `display` | `Responsive<"none" \| "flex" \| "inline-flex">` | — | |
|
|
437
|
-
| `direction` | `Responsive<"row" \| "column" \| "row-reverse" \| "column-reverse">` | — | |
|
|
438
|
-
| `wrap` | `Responsive<"wrap" \| "nowrap" \| "wrap-reverse">` | — | |
|
|
439
|
-
| `alignContent` | `Responsive<"center" \| "start" \| "end" \| "stretch" \| "between" \| "around" \| "evenly">` | — | |
|
|
440
|
-
| `alignItems` | `Responsive<"center" \| "start" \| "end" \| "stretch" \| "baseline">` | — | |
|
|
441
|
-
| `alignSelf` | `Responsive<"center" \| "start" \| "end" \| "stretch">` | — | |
|
|
442
|
-
| `backgroundColor` | `"primary" \| "secondary" \| "brand" \| `var(--h-${string})`` | — | |
|
|
443
|
-
| `borderColor` | `"strong" \| `var(--h-${string})` \| "subtle"` | — | |
|
|
444
|
-
| `borderTopColor` | `"strong" \| `var(--h-${string})` \| "subtle"` | — | |
|
|
445
|
-
| `borderRightColor` | `"strong" \| `var(--h-${string})` \| "subtle"` | — | |
|
|
446
|
-
| `borderBottomColor` | `"strong" \| `var(--h-${string})` \| "subtle"` | — | |
|
|
447
|
-
| `borderLeftColor` | `"strong" \| `var(--h-${string})` \| "subtle"` | — | |
|
|
448
|
-
| `borderRadius` | `Responsive<"none" \| "inherit" \| "xs" \| "sm" \| "md" \| "lg" \| "xl" \| "full">` | — | |
|
|
449
|
-
| `borderRadiusTopLeftNone` | `boolean` | — | |
|
|
450
|
-
| `borderRadiusTopRightNone` | `boolean` | — | |
|
|
451
|
-
| `borderRadiusBottomLeftNone` | `boolean` | — | |
|
|
452
|
-
| `borderRadiusBottomRightNone` | `boolean` | — | |
|
|
453
|
-
| `borderRadiusTopNone` | `boolean` | — | |
|
|
454
|
-
| `borderRadiusRightNone` | `boolean` | — | |
|
|
455
|
-
| `borderRadiusBottomNone` | `boolean` | — | |
|
|
456
|
-
| `borderRadiusLeftNone` | `boolean` | — | |
|
|
457
|
-
| `borderStyle` | `Responsive<"none" \| "solid">` | — | |
|
|
458
|
-
| `borderTopStyle` | `Responsive<"none" \| "solid">` | — | |
|
|
459
|
-
| `borderRightStyle` | `Responsive<"none" \| "solid">` | — | |
|
|
460
|
-
| `borderBottomStyle` | `Responsive<"none" \| "solid">` | — | |
|
|
461
|
-
| `borderLeftStyle` | `Responsive<"none" \| "solid">` | — | |
|
|
462
|
-
| `borderWidth` | `Responsive<"0" \| `var(--h-${string})` \| "1" \| "2">` | — | |
|
|
463
|
-
| `borderTopWidth` | `Responsive<"0" \| `var(--h-${string})` \| "1" \| "2">` | — | |
|
|
464
|
-
| `borderRightWidth` | `Responsive<"0" \| `var(--h-${string})` \| "1" \| "2">` | — | |
|
|
465
|
-
| `borderBottomWidth` | `Responsive<"0" \| `var(--h-${string})` \| "1" \| "2">` | — | |
|
|
466
|
-
| `borderLeftWidth` | `Responsive<"0" \| `var(--h-${string})` \| "1" \| "2">` | — | |
|
|
467
|
-
| `gap` | `Responsive<"0" \| `var(--h-${string})` \| "25" \| "50" \| "75" \| "100" \| "150" \| "175" \| "200" \| "250" \| "300" \| "350" \| "400" \| "500" \| "600" \| "700" \| "800" \| "900" \| "1000">` | — | |
|
|
468
|
-
| `rowGap` | `Responsive<"0" \| `var(--h-${string})` \| "25" \| "50" \| "75" \| "100" \| "150" \| "175" \| "200" \| "250" \| "300" \| "350" \| "400" \| "500" \| "600" \| "700" \| "800" \| "900" \| "1000">` | — | |
|
|
469
|
-
| `columnGap` | `Responsive<"0" \| `var(--h-${string})` \| "25" \| "50" \| "75" \| "100" \| "150" \| "175" \| "200" \| "250" \| "300" \| "350" \| "400" \| "500" \| "600" \| "700" \| "800" \| "900" \| "1000">` | — | |
|
|
470
|
-
| `gridColumnSpan` | `Responsive<Union<string, "1" \| "2" \| "3" \| "4" \| "5" \| "6" \| "7" \| "8" \| "9" \| "10" \| "11" \| "12">>` | — | |
|
|
471
|
-
| `gridArea` | `Responsive<string>` | — | |
|
|
472
|
-
| `gridColumn` | `Responsive<string>` | — | |
|
|
473
|
-
| `gridColumnStart` | `Responsive<string>` | — | |
|
|
474
|
-
| `gridColumnEnd` | `Responsive<string>` | — | |
|
|
475
|
-
| `gridRow` | `Responsive<string>` | — | |
|
|
476
|
-
| `gridRowStart` | `Responsive<string>` | — | |
|
|
477
|
-
| `gridRowEnd` | `Responsive<string>` | — | |
|
|
478
|
-
| `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. |
|
|
479
|
-
| `margin` | `Responsive<"0" \| "auto" \| `var(--h-${string})` \| "25" \| "50" \| "75" \| "100" \| "150" \| "175" \| "200" \| "250" \| "300" \| "350" \| "400" \| "500" \| "600" \| "700" \| "800" \| "900" \| "1000">` | — | |
|
|
480
|
-
| `marginTop` | `Responsive<"0" \| "auto" \| `var(--h-${string})` \| "25" \| "50" \| "75" \| "100" \| "150" \| "175" \| "200" \| "250" \| "300" \| "350" \| "400" \| "500" \| "600" \| "700" \| "800" \| "900" \| "1000">` | — | |
|
|
481
|
-
| `marginRight` | `Responsive<"0" \| "auto" \| `var(--h-${string})` \| "25" \| "50" \| "75" \| "100" \| "150" \| "175" \| "200" \| "250" \| "300" \| "350" \| "400" \| "500" \| "600" \| "700" \| "800" \| "900" \| "1000">` | — | |
|
|
482
|
-
| `marginBottom` | `Responsive<"0" \| "auto" \| `var(--h-${string})` \| "25" \| "50" \| "75" \| "100" \| "150" \| "175" \| "200" \| "250" \| "300" \| "350" \| "400" \| "500" \| "600" \| "700" \| "800" \| "900" \| "1000">` | — | |
|
|
483
|
-
| `marginLeft` | `Responsive<"0" \| "auto" \| `var(--h-${string})` \| "25" \| "50" \| "75" \| "100" \| "150" \| "175" \| "200" \| "250" \| "300" \| "350" \| "400" \| "500" \| "600" \| "700" \| "800" \| "900" \| "1000">` | — | |
|
|
484
|
-
| `marginX` | `Responsive<"0" \| "auto" \| `var(--h-${string})` \| "25" \| "50" \| "75" \| "100" \| "150" \| "175" \| "200" \| "250" \| "300" \| "350" \| "400" \| "500" \| "600" \| "700" \| "800" \| "900" \| "1000">` | — | |
|
|
485
|
-
| `marginY` | `Responsive<"0" \| "auto" \| `var(--h-${string})` \| "25" \| "50" \| "75" \| "100" \| "150" \| "175" \| "200" \| "250" \| "300" \| "350" \| "400" \| "500" \| "600" \| "700" \| "800" \| "900" \| "1000">` | — | |
|
|
486
|
-
| `opacity` | `Responsive<string>` | — | |
|
|
487
|
-
| `order` | `Responsive<string>` | — | |
|
|
488
|
-
| `overflow` | `Responsive<"hidden" \| "auto" \| "visible" \| "clip" \| "scroll">` | — | |
|
|
489
|
-
| `overflowX` | `Responsive<"hidden" \| "auto" \| "visible" \| "clip" \| "scroll">` | — | |
|
|
490
|
-
| `overflowY` | `Responsive<"hidden" \| "auto" \| "visible" \| "clip" \| "scroll">` | — | |
|
|
491
|
-
| `padding` | `Responsive<"0" \| `var(--h-${string})` \| "25" \| "50" \| "75" \| "100" \| "150" \| "175" \| "200" \| "250" \| "300" \| "350" \| "400" \| "500" \| "600" \| "700" \| "800" \| "900" \| "1000">` | — | |
|
|
492
|
-
| `paddingTop` | `Responsive<"0" \| `var(--h-${string})` \| "25" \| "50" \| "75" \| "100" \| "150" \| "175" \| "200" \| "250" \| "300" \| "350" \| "400" \| "500" \| "600" \| "700" \| "800" \| "900" \| "1000">` | — | |
|
|
493
|
-
| `paddingRight` | `Responsive<"0" \| `var(--h-${string})` \| "25" \| "50" \| "75" \| "100" \| "150" \| "175" \| "200" \| "250" \| "300" \| "350" \| "400" \| "500" \| "600" \| "700" \| "800" \| "900" \| "1000">` | — | |
|
|
494
|
-
| `paddingBottom` | `Responsive<"0" \| `var(--h-${string})` \| "25" \| "50" \| "75" \| "100" \| "150" \| "175" \| "200" \| "250" \| "300" \| "350" \| "400" \| "500" \| "600" \| "700" \| "800" \| "900" \| "1000">` | — | |
|
|
495
|
-
| `paddingLeft` | `Responsive<"0" \| `var(--h-${string})` \| "25" \| "50" \| "75" \| "100" \| "150" \| "175" \| "200" \| "250" \| "300" \| "350" \| "400" \| "500" \| "600" \| "700" \| "800" \| "900" \| "1000">` | — | |
|
|
496
|
-
| `paddingX` | `Responsive<"0" \| `var(--h-${string})` \| "25" \| "50" \| "75" \| "100" \| "150" \| "175" \| "200" \| "250" \| "300" \| "350" \| "400" \| "500" \| "600" \| "700" \| "800" \| "900" \| "1000">` | — | |
|
|
497
|
-
| `paddingY` | `Responsive<"0" \| `var(--h-${string})` \| "25" \| "50" \| "75" \| "100" \| "150" \| "175" \| "200" \| "250" \| "300" \| "350" \| "400" \| "500" \| "600" \| "700" \| "800" \| "900" \| "1000">` | — | |
|
|
498
|
-
| `position` | `Responsive<"fixed" \| "static" \| "relative" \| "absolute" \| "sticky">` | — | |
|
|
499
|
-
| `inset` | `Responsive<Union<string, "0" \| "25" \| "50" \| "75" \| "100" \| "150" \| "175" \| "200" \| "250" \| "300" \| "350" \| "400" \| "500" \| "600" \| "700" \| "800" \| "900" \| "1000">>` | — | |
|
|
500
|
-
| `top` | `Responsive<Union<string, "0" \| "25" \| "50" \| "75" \| "100" \| "150" \| "175" \| "200" \| "250" \| "300" \| "350" \| "400" \| "500" \| "600" \| "700" \| "800" \| "900" \| "1000">>` | — | |
|
|
501
|
-
| `right` | `Responsive<Union<string, "0" \| "25" \| "50" \| "75" \| "100" \| "150" \| "175" \| "200" \| "250" \| "300" \| "350" \| "400" \| "500" \| "600" \| "700" \| "800" \| "900" \| "1000">>` | — | |
|
|
502
|
-
| `bottom` | `Responsive<Union<string, "0" \| "25" \| "50" \| "75" \| "100" \| "150" \| "175" \| "200" \| "250" \| "300" \| "350" \| "400" \| "500" \| "600" \| "700" \| "800" \| "900" \| "1000">>` | — | |
|
|
503
|
-
| `left` | `Responsive<Union<string, "0" \| "25" \| "50" \| "75" \| "100" \| "150" \| "175" \| "200" \| "250" \| "300" \| "350" \| "400" \| "500" \| "600" \| "700" \| "800" \| "900" \| "1000">>` | — | |
|
|
504
|
-
| `width` | `Responsive<string>` | — | |
|
|
505
|
-
| `maxWidth` | `Responsive<string>` | — | |
|
|
506
|
-
| `minWidth` | `Responsive<string>` | — | |
|
|
507
|
-
| `height` | `Responsive<string>` | — | |
|
|
508
|
-
| `maxHeight` | `Responsive<string>` | — | |
|
|
509
|
-
| `minHeight` | `Responsive<string>` | — | |
|
|
510
|
-
| `textAlign` | `Responsive<"center" \| "right" \| "left">` | — | |
|
|
511
|
-
| `textTransform` | `"none" \| "uppercase" \| "lowercase" \| "capitalize"` | — | Set the text-transform on the component. |
|
|
512
|
-
| `zIndex` | `Responsive<string>` | — | |
|
|
513
|
-
| `as` | `"div" \| "span"` | — | |
|
|
426
|
+
| Prop | Type | Default | Description |
|
|
427
|
+
| ------- | -------- | ------- | ----------- |
|
|
428
|
+
| `label` | `string` | — | |
|
|
@@ -14,16 +14,7 @@ This component is based on the `span` element and supports the following common
|
|
|
14
14
|
- Text transform
|
|
15
15
|
- Text align
|
|
16
16
|
|
|
17
|
-
| Prop | Type
|
|
18
|
-
| ------------------- |
|
|
19
|
-
| `status` | `"valid" \| "invalid"`
|
|
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
|
-
| `textAlign` | `Responsive<"center" \| "left" \| "right">` | — | |
|
|
29
|
-
| `textTransform` | `"none" \| "uppercase" \| "lowercase" \| "capitalize"` | — | Set the text-transform on the component. |
|
|
17
|
+
| Prop | Type | Default | Description |
|
|
18
|
+
| ------------------- | ---------------------- | --------- | ------------------------------------------------------------------------ |
|
|
19
|
+
| `status` | `"valid" \| "invalid"` | `'valid'` | The validation status |
|
|
20
|
+
| `disableUserSelect` | `boolean` | — | Make the text unselectable, for use when associated with input elements. |
|
|
@@ -61,36 +61,29 @@ This component is based on the `input` element and supports the following common
|
|
|
61
61
|
|
|
62
62
|
- Margin
|
|
63
63
|
|
|
64
|
-
| Prop | Type
|
|
65
|
-
| ------------------ |
|
|
66
|
-
| `form` | `string`
|
|
67
|
-
| `label` | `string`
|
|
68
|
-
| `autoComplete` | `"off" \| "one-time-code"`
|
|
69
|
-
| `autoFocus` | `boolean`
|
|
70
|
-
| `autoSubmit` | `boolean`
|
|
71
|
-
| `defaultValue` | `string`
|
|
72
|
-
| `disabled` | `boolean`
|
|
73
|
-
| `name` | `string`
|
|
74
|
-
| `onAutoSubmit` | `((value: string) => void)`
|
|
75
|
-
| `onValueChange` | `((value: string) => void)`
|
|
76
|
-
| `placeholder` | `string`
|
|
77
|
-
| `readOnly` | `boolean`
|
|
78
|
-
| `sanitizeValue` | `((value: string) => string)`
|
|
79
|
-
| `type` | `"text" \| "password"`
|
|
80
|
-
| `validationType` | `"none" \| "numeric" \| "alpha" \| "alphanumeric"`
|
|
81
|
-
| `value` | `string`
|
|
82
|
-
| `labelId` | `string`
|
|
83
|
-
| `helperTextId` | `string`
|
|
84
|
-
| `validationTextId` | `string`
|
|
85
|
-
| `required` | `boolean`
|
|
86
|
-
| `labelVariant` | `"body" \| "heading"`
|
|
87
|
-
| `helperText` | `string`
|
|
88
|
-
| `validationText` | `string`
|
|
89
|
-
| `validationStatus` | `"valid" \| "invalid"`
|
|
90
|
-
| `margin` | `Responsive<"0" \| "auto" \| "25" \| "50" \| "75" \| "100" \| "150" \| "175" \| "200" \| "250" \| "300" \| "350" \| "400" \| "500" \| "600" \| "700" \| "800" \| "900" \| "1000" \| `var(--h-${string})`>` | — | |
|
|
91
|
-
| `marginTop` | `Responsive<"0" \| "auto" \| "25" \| "50" \| "75" \| "100" \| "150" \| "175" \| "200" \| "250" \| "300" \| "350" \| "400" \| "500" \| "600" \| "700" \| "800" \| "900" \| "1000" \| `var(--h-${string})`>` | — | |
|
|
92
|
-
| `marginRight` | `Responsive<"0" \| "auto" \| "25" \| "50" \| "75" \| "100" \| "150" \| "175" \| "200" \| "250" \| "300" \| "350" \| "400" \| "500" \| "600" \| "700" \| "800" \| "900" \| "1000" \| `var(--h-${string})`>` | — | |
|
|
93
|
-
| `marginBottom` | `Responsive<"0" \| "auto" \| "25" \| "50" \| "75" \| "100" \| "150" \| "175" \| "200" \| "250" \| "300" \| "350" \| "400" \| "500" \| "600" \| "700" \| "800" \| "900" \| "1000" \| `var(--h-${string})`>` | — | |
|
|
94
|
-
| `marginLeft` | `Responsive<"0" \| "auto" \| "25" \| "50" \| "75" \| "100" \| "150" \| "175" \| "200" \| "250" \| "300" \| "350" \| "400" \| "500" \| "600" \| "700" \| "800" \| "900" \| "1000" \| `var(--h-${string})`>` | — | |
|
|
95
|
-
| `marginX` | `Responsive<"0" \| "auto" \| "25" \| "50" \| "75" \| "100" \| "150" \| "175" \| "200" \| "250" \| "300" \| "350" \| "400" \| "500" \| "600" \| "700" \| "800" \| "900" \| "1000" \| `var(--h-${string})`>` | — | |
|
|
96
|
-
| `marginY` | `Responsive<"0" \| "auto" \| "25" \| "50" \| "75" \| "100" \| "150" \| "175" \| "200" \| "250" \| "300" \| "350" \| "400" \| "500" \| "600" \| "700" \| "800" \| "900" \| "1000" \| `var(--h-${string})`>` | — | |
|
|
64
|
+
| Prop | Type | Default | Description |
|
|
65
|
+
| ------------------ | -------------------------------------------------- | ------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
|
|
66
|
+
| `form` | `string` | — | A string specifying the `form` element with which the input is associated. This string's value, if present, must match the id of a `form` element in the same document. @see https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/input#form |
|
|
67
|
+
| `label` | `string` | — | The label for the form field, describing its purpose. |
|
|
68
|
+
| `autoComplete` | `"off" \| "one-time-code"` | — | Specifies what—if any—permission the user agent has to provide automated assistance in filling out form field values, as well as guidance to the browser as to the type of information expected in the field. Allows `"one-time-code"` or `"off"`. @defaultValue `"one-time-code"` @see https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Attributes/autocomplete |
|
|
69
|
+
| `autoFocus` | `boolean` | — | Whether or not the first fillable input should be focused on page-load. @defaultValue `false` @see https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Global_attributes/autofocus |
|
|
70
|
+
| `autoSubmit` | `boolean` | — | Whether or not the component should attempt to automatically submit when all fields are filled. If the field is associated with an HTML `form` element, the form's `requestSubmit` method will be called. @defaultValue `false` |
|
|
71
|
+
| `defaultValue` | `string` | — | The initial value of the uncontrolled field. |
|
|
72
|
+
| `disabled` | `boolean` | — | Whether or not the the field's input elements are disabled. |
|
|
73
|
+
| `name` | `string` | — | A string specifying a name for the input control. This name is submitted along with the control's value when the form data is submitted. @see https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/input#name |
|
|
74
|
+
| `onAutoSubmit` | `((value: string) => void)` | — | When the `autoSubmit` prop is set to `true`, this callback will be fired before attempting to submit the associated form. It will be called whether or not a form is located, or if submission is not allowed. |
|
|
75
|
+
| `onValueChange` | `((value: string) => void)` | — | A callback fired when the field's value changes. When the component is controlled, this should update the state passed to the `value` prop. |
|
|
76
|
+
| `placeholder` | `string` | — | Defines the text displayed in a form control when the control has no value. @see https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Attributes/placeholder |
|
|
77
|
+
| `readOnly` | `boolean` | — | Whether or not the input elements can be updated by the user. @see https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Attributes/readonly |
|
|
78
|
+
| `sanitizeValue` | `((value: string) => string)` | — | Function for custom sanitization when `validationType` is set to `"none"`. This function will be called before updating values in response to user interactions. |
|
|
79
|
+
| `type` | `"text" \| "password"` | — | The input type of the field's input elements. Can be `"password"` or `"text"`. |
|
|
80
|
+
| `validationType` | `"none" \| "numeric" \| "alpha" \| "alphanumeric"` | — | Specifies the type of input validation to be used. Can be `"alpha"`, `"numeric"`, `"alphanumeric"` or `"none"`. @defaultValue `"numeric"` |
|
|
81
|
+
| `value` | `string` | — | The controlled value of the field. |
|
|
82
|
+
| `labelId` | `string` | — | |
|
|
83
|
+
| `helperTextId` | `string` | — | |
|
|
84
|
+
| `validationTextId` | `string` | — | |
|
|
85
|
+
| `required` | `boolean` | — | |
|
|
86
|
+
| `labelVariant` | `"body" \| "heading"` | — | Change the label variant |
|
|
87
|
+
| `helperText` | `string` | — | Optional helper text to provide additional context or instructions. |
|
|
88
|
+
| `validationText` | `string` | — | Text to display when the `validationStatus` is set. |
|
|
89
|
+
| `validationStatus` | `"valid" \| "invalid"` | — | Indicates the validation status. |
|
|
@@ -10,81 +10,6 @@ The align-self CSS property overrides a grid or flex item's align-items value.
|
|
|
10
10
|
</Flex>
|
|
11
11
|
```
|
|
12
12
|
|
|
13
|
-
| Prop
|
|
14
|
-
|
|
|
15
|
-
| `
|
|
16
|
-
| `display` | `Responsive<"none" \| "inline" \| "inline-block" \| "block">` | — | |
|
|
17
|
-
| `alignSelf` | `Responsive<"center" \| "start" \| "end" \| "stretch">` | — | |
|
|
18
|
-
| `backgroundColor` | `"primary" \| "secondary" \| "brand" \| `var(--h-${string})`` | — | |
|
|
19
|
-
| `borderColor` | `"strong" \| `var(--h-${string})` \| "subtle"` | — | |
|
|
20
|
-
| `borderTopColor` | `"strong" \| `var(--h-${string})` \| "subtle"` | — | |
|
|
21
|
-
| `borderRightColor` | `"strong" \| `var(--h-${string})` \| "subtle"` | — | |
|
|
22
|
-
| `borderBottomColor` | `"strong" \| `var(--h-${string})` \| "subtle"` | — | |
|
|
23
|
-
| `borderLeftColor` | `"strong" \| `var(--h-${string})` \| "subtle"` | — | |
|
|
24
|
-
| `borderRadius` | `Responsive<"none" \| "xs" \| "sm" \| "md" \| "lg" \| "xl" \| "full" \| "inherit">` | — | |
|
|
25
|
-
| `borderRadiusTopLeftNone` | `boolean` | — | |
|
|
26
|
-
| `borderRadiusTopRightNone` | `boolean` | — | |
|
|
27
|
-
| `borderRadiusBottomLeftNone` | `boolean` | — | |
|
|
28
|
-
| `borderRadiusBottomRightNone` | `boolean` | — | |
|
|
29
|
-
| `borderRadiusTopNone` | `boolean` | — | |
|
|
30
|
-
| `borderRadiusRightNone` | `boolean` | — | |
|
|
31
|
-
| `borderRadiusBottomNone` | `boolean` | — | |
|
|
32
|
-
| `borderRadiusLeftNone` | `boolean` | — | |
|
|
33
|
-
| `borderStyle` | `Responsive<"none" \| "solid">` | — | |
|
|
34
|
-
| `borderTopStyle` | `Responsive<"none" \| "solid">` | — | |
|
|
35
|
-
| `borderRightStyle` | `Responsive<"none" \| "solid">` | — | |
|
|
36
|
-
| `borderBottomStyle` | `Responsive<"none" \| "solid">` | — | |
|
|
37
|
-
| `borderLeftStyle` | `Responsive<"none" \| "solid">` | — | |
|
|
38
|
-
| `borderWidth` | `Responsive<`var(--h-${string})` \| "0" \| "1" \| "2">` | — | |
|
|
39
|
-
| `borderTopWidth` | `Responsive<`var(--h-${string})` \| "0" \| "1" \| "2">` | — | |
|
|
40
|
-
| `borderRightWidth` | `Responsive<`var(--h-${string})` \| "0" \| "1" \| "2">` | — | |
|
|
41
|
-
| `borderBottomWidth` | `Responsive<`var(--h-${string})` \| "0" \| "1" \| "2">` | — | |
|
|
42
|
-
| `borderLeftWidth` | `Responsive<`var(--h-${string})` \| "0" \| "1" \| "2">` | — | |
|
|
43
|
-
| `color` | `"primary" \| "secondary" \| "brand" \| "affirmative" \| "inverted" \| `var(--h-${string})`` | — | |
|
|
44
|
-
| `flex` | `Responsive<string>` | — | |
|
|
45
|
-
| `flexBasis` | `Responsive<string>` | — | |
|
|
46
|
-
| `flexShrink` | `Responsive<string>` | — | |
|
|
47
|
-
| `flexGrow` | `Responsive<string>` | — | |
|
|
48
|
-
| `gridColumnSpan` | `Responsive<Union<string, "1" \| "2" \| "3" \| "4" \| "5" \| "6" \| "7" \| "8" \| "9" \| "10" \| "11" \| "12">>` | — | |
|
|
49
|
-
| `gridArea` | `Responsive<string>` | — | |
|
|
50
|
-
| `gridColumn` | `Responsive<string>` | — | |
|
|
51
|
-
| `gridColumnStart` | `Responsive<string>` | — | |
|
|
52
|
-
| `gridColumnEnd` | `Responsive<string>` | — | |
|
|
53
|
-
| `gridRow` | `Responsive<string>` | — | |
|
|
54
|
-
| `gridRowStart` | `Responsive<string>` | — | |
|
|
55
|
-
| `gridRowEnd` | `Responsive<string>` | — | |
|
|
56
|
-
| `margin` | `Responsive<`var(--h-${string})` \| "0" \| "auto" \| "25" \| "50" \| "75" \| "100" \| "150" \| "175" \| "200" \| "250" \| "300" \| "350" \| "400" \| "500" \| "600" \| "700" \| "800" \| "900" \| "1000">` | — | |
|
|
57
|
-
| `marginTop` | `Responsive<`var(--h-${string})` \| "0" \| "auto" \| "25" \| "50" \| "75" \| "100" \| "150" \| "175" \| "200" \| "250" \| "300" \| "350" \| "400" \| "500" \| "600" \| "700" \| "800" \| "900" \| "1000">` | — | |
|
|
58
|
-
| `marginRight` | `Responsive<`var(--h-${string})` \| "0" \| "auto" \| "25" \| "50" \| "75" \| "100" \| "150" \| "175" \| "200" \| "250" \| "300" \| "350" \| "400" \| "500" \| "600" \| "700" \| "800" \| "900" \| "1000">` | — | |
|
|
59
|
-
| `marginBottom` | `Responsive<`var(--h-${string})` \| "0" \| "auto" \| "25" \| "50" \| "75" \| "100" \| "150" \| "175" \| "200" \| "250" \| "300" \| "350" \| "400" \| "500" \| "600" \| "700" \| "800" \| "900" \| "1000">` | — | |
|
|
60
|
-
| `marginLeft` | `Responsive<`var(--h-${string})` \| "0" \| "auto" \| "25" \| "50" \| "75" \| "100" \| "150" \| "175" \| "200" \| "250" \| "300" \| "350" \| "400" \| "500" \| "600" \| "700" \| "800" \| "900" \| "1000">` | — | |
|
|
61
|
-
| `marginX` | `Responsive<`var(--h-${string})` \| "0" \| "auto" \| "25" \| "50" \| "75" \| "100" \| "150" \| "175" \| "200" \| "250" \| "300" \| "350" \| "400" \| "500" \| "600" \| "700" \| "800" \| "900" \| "1000">` | — | |
|
|
62
|
-
| `marginY` | `Responsive<`var(--h-${string})` \| "0" \| "auto" \| "25" \| "50" \| "75" \| "100" \| "150" \| "175" \| "200" \| "250" \| "300" \| "350" \| "400" \| "500" \| "600" \| "700" \| "800" \| "900" \| "1000">` | — | |
|
|
63
|
-
| `opacity` | `Responsive<string>` | — | |
|
|
64
|
-
| `order` | `Responsive<string>` | — | |
|
|
65
|
-
| `overflow` | `Responsive<"hidden" \| "auto" \| "visible" \| "clip" \| "scroll">` | — | |
|
|
66
|
-
| `overflowX` | `Responsive<"hidden" \| "auto" \| "visible" \| "clip" \| "scroll">` | — | |
|
|
67
|
-
| `overflowY` | `Responsive<"hidden" \| "auto" \| "visible" \| "clip" \| "scroll">` | — | |
|
|
68
|
-
| `padding` | `Responsive<`var(--h-${string})` \| "0" \| "25" \| "50" \| "75" \| "100" \| "150" \| "175" \| "200" \| "250" \| "300" \| "350" \| "400" \| "500" \| "600" \| "700" \| "800" \| "900" \| "1000">` | — | |
|
|
69
|
-
| `paddingTop` | `Responsive<`var(--h-${string})` \| "0" \| "25" \| "50" \| "75" \| "100" \| "150" \| "175" \| "200" \| "250" \| "300" \| "350" \| "400" \| "500" \| "600" \| "700" \| "800" \| "900" \| "1000">` | — | |
|
|
70
|
-
| `paddingRight` | `Responsive<`var(--h-${string})` \| "0" \| "25" \| "50" \| "75" \| "100" \| "150" \| "175" \| "200" \| "250" \| "300" \| "350" \| "400" \| "500" \| "600" \| "700" \| "800" \| "900" \| "1000">` | — | |
|
|
71
|
-
| `paddingBottom` | `Responsive<`var(--h-${string})` \| "0" \| "25" \| "50" \| "75" \| "100" \| "150" \| "175" \| "200" \| "250" \| "300" \| "350" \| "400" \| "500" \| "600" \| "700" \| "800" \| "900" \| "1000">` | — | |
|
|
72
|
-
| `paddingLeft` | `Responsive<`var(--h-${string})` \| "0" \| "25" \| "50" \| "75" \| "100" \| "150" \| "175" \| "200" \| "250" \| "300" \| "350" \| "400" \| "500" \| "600" \| "700" \| "800" \| "900" \| "1000">` | — | |
|
|
73
|
-
| `paddingX` | `Responsive<`var(--h-${string})` \| "0" \| "25" \| "50" \| "75" \| "100" \| "150" \| "175" \| "200" \| "250" \| "300" \| "350" \| "400" \| "500" \| "600" \| "700" \| "800" \| "900" \| "1000">` | — | |
|
|
74
|
-
| `paddingY` | `Responsive<`var(--h-${string})` \| "0" \| "25" \| "50" \| "75" \| "100" \| "150" \| "175" \| "200" \| "250" \| "300" \| "350" \| "400" \| "500" \| "600" \| "700" \| "800" \| "900" \| "1000">` | — | |
|
|
75
|
-
| `position` | `Responsive<"fixed" \| "static" \| "relative" \| "absolute" \| "sticky">` | — | |
|
|
76
|
-
| `inset` | `Responsive<Union<string, "0" \| "25" \| "50" \| "75" \| "100" \| "150" \| "175" \| "200" \| "250" \| "300" \| "350" \| "400" \| "500" \| "600" \| "700" \| "800" \| "900" \| "1000">>` | — | |
|
|
77
|
-
| `top` | `Responsive<Union<string, "0" \| "25" \| "50" \| "75" \| "100" \| "150" \| "175" \| "200" \| "250" \| "300" \| "350" \| "400" \| "500" \| "600" \| "700" \| "800" \| "900" \| "1000">>` | — | |
|
|
78
|
-
| `right` | `Responsive<Union<string, "0" \| "25" \| "50" \| "75" \| "100" \| "150" \| "175" \| "200" \| "250" \| "300" \| "350" \| "400" \| "500" \| "600" \| "700" \| "800" \| "900" \| "1000">>` | — | |
|
|
79
|
-
| `bottom` | `Responsive<Union<string, "0" \| "25" \| "50" \| "75" \| "100" \| "150" \| "175" \| "200" \| "250" \| "300" \| "350" \| "400" \| "500" \| "600" \| "700" \| "800" \| "900" \| "1000">>` | — | |
|
|
80
|
-
| `left` | `Responsive<Union<string, "0" \| "25" \| "50" \| "75" \| "100" \| "150" \| "175" \| "200" \| "250" \| "300" \| "350" \| "400" \| "500" \| "600" \| "700" \| "800" \| "900" \| "1000">>` | — | |
|
|
81
|
-
| `width` | `Responsive<string>` | — | |
|
|
82
|
-
| `maxWidth` | `Responsive<string>` | — | |
|
|
83
|
-
| `minWidth` | `Responsive<string>` | — | |
|
|
84
|
-
| `height` | `Responsive<string>` | — | |
|
|
85
|
-
| `maxHeight` | `Responsive<string>` | — | |
|
|
86
|
-
| `minHeight` | `Responsive<string>` | — | |
|
|
87
|
-
| `textAlign` | `Responsive<"center" \| "right" \| "left">` | — | |
|
|
88
|
-
| `textTransform` | `"none" \| "uppercase" \| "lowercase" \| "capitalize"` | — | Set the text-transform on the component. |
|
|
89
|
-
| `zIndex` | `Responsive<string>` | — | |
|
|
90
|
-
| `as` | `"div" \| "span"` | — | |
|
|
13
|
+
| Prop | Type | Default | Description |
|
|
14
|
+
| ----------- | ------------------------------------------------------- | ------- | ----------- |
|
|
15
|
+
| `alignSelf` | `Responsive<"center" \| "start" \| "end" \| "stretch">` | — | |
|