@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/box.md CHANGED
@@ -68,81 +68,8 @@ This component is based on the `div` element and supports the following common p
68
68
  - Opacity
69
69
  - Order
70
70
 
71
- | Prop | Type | Default | Description |
72
- | ----------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------- | ---------------------------------------- |
73
- | `asChild` | `boolean` | — | |
74
- | `display` | `Responsive<"none" \| "inline" \| "inline-block" \| "block">` | — | |
75
- | `alignSelf` | `Responsive<"center" \| "start" \| "end" \| "stretch">` | — | |
76
- | `backgroundColor` | `"primary" \| "secondary" \| "brand" \| `var(--h-${string})`` | — | |
77
- | `borderColor` | `"strong" \| `var(--h-${string})` \| "subtle"` | — | |
78
- | `borderTopColor` | `"strong" \| `var(--h-${string})` \| "subtle"` | — | |
79
- | `borderRightColor` | `"strong" \| `var(--h-${string})` \| "subtle"` | — | |
80
- | `borderBottomColor` | `"strong" \| `var(--h-${string})` \| "subtle"` | — | |
81
- | `borderLeftColor` | `"strong" \| `var(--h-${string})` \| "subtle"` | — | |
82
- | `borderRadius` | `Responsive<"none" \| "xs" \| "sm" \| "md" \| "lg" \| "xl" \| "full" \| "inherit">` | — | |
83
- | `borderRadiusTopLeftNone` | `boolean` | — | |
84
- | `borderRadiusTopRightNone` | `boolean` | — | |
85
- | `borderRadiusBottomLeftNone` | `boolean` | — | |
86
- | `borderRadiusBottomRightNone` | `boolean` | — | |
87
- | `borderRadiusTopNone` | `boolean` | — | |
88
- | `borderRadiusRightNone` | `boolean` | — | |
89
- | `borderRadiusBottomNone` | `boolean` | — | |
90
- | `borderRadiusLeftNone` | `boolean` | — | |
91
- | `borderStyle` | `Responsive<"none" \| "solid">` | — | |
92
- | `borderTopStyle` | `Responsive<"none" \| "solid">` | — | |
93
- | `borderRightStyle` | `Responsive<"none" \| "solid">` | — | |
94
- | `borderBottomStyle` | `Responsive<"none" \| "solid">` | — | |
95
- | `borderLeftStyle` | `Responsive<"none" \| "solid">` | — | |
96
- | `borderWidth` | `Responsive<`var(--h-${string})` \| "0" \| "1" \| "2">` | — | |
97
- | `borderTopWidth` | `Responsive<`var(--h-${string})` \| "0" \| "1" \| "2">` | — | |
98
- | `borderRightWidth` | `Responsive<`var(--h-${string})` \| "0" \| "1" \| "2">` | — | |
99
- | `borderBottomWidth` | `Responsive<`var(--h-${string})` \| "0" \| "1" \| "2">` | — | |
100
- | `borderLeftWidth` | `Responsive<`var(--h-${string})` \| "0" \| "1" \| "2">` | — | |
101
- | `color` | `"primary" \| "secondary" \| "brand" \| "affirmative" \| "inverted" \| `var(--h-${string})`` | — | |
102
- | `flex` | `Responsive<string>` | — | |
103
- | `flexBasis` | `Responsive<string>` | — | |
104
- | `flexShrink` | `Responsive<string>` | — | |
105
- | `flexGrow` | `Responsive<string>` | — | |
106
- | `gridColumnSpan` | `Responsive<Union<string, "1" \| "2" \| "3" \| "4" \| "5" \| "6" \| "7" \| "8" \| "9" \| "10" \| "11" \| "12">>` | — | |
107
- | `gridArea` | `Responsive<string>` | — | |
108
- | `gridColumn` | `Responsive<string>` | — | |
109
- | `gridColumnStart` | `Responsive<string>` | — | |
110
- | `gridColumnEnd` | `Responsive<string>` | — | |
111
- | `gridRow` | `Responsive<string>` | — | |
112
- | `gridRowStart` | `Responsive<string>` | — | |
113
- | `gridRowEnd` | `Responsive<string>` | — | |
114
- | `margin` | `Responsive<`var(--h-${string})` \| "0" \| "auto" \| "25" \| "50" \| "75" \| "100" \| "150" \| "175" \| "200" \| "250" \| "300" \| "350" \| "400" \| "500" \| "600" \| "700" \| "800" \| "900" \| "1000">` | — | |
115
- | `marginTop` | `Responsive<`var(--h-${string})` \| "0" \| "auto" \| "25" \| "50" \| "75" \| "100" \| "150" \| "175" \| "200" \| "250" \| "300" \| "350" \| "400" \| "500" \| "600" \| "700" \| "800" \| "900" \| "1000">` | — | |
116
- | `marginRight` | `Responsive<`var(--h-${string})` \| "0" \| "auto" \| "25" \| "50" \| "75" \| "100" \| "150" \| "175" \| "200" \| "250" \| "300" \| "350" \| "400" \| "500" \| "600" \| "700" \| "800" \| "900" \| "1000">` | — | |
117
- | `marginBottom` | `Responsive<`var(--h-${string})` \| "0" \| "auto" \| "25" \| "50" \| "75" \| "100" \| "150" \| "175" \| "200" \| "250" \| "300" \| "350" \| "400" \| "500" \| "600" \| "700" \| "800" \| "900" \| "1000">` | — | |
118
- | `marginLeft` | `Responsive<`var(--h-${string})` \| "0" \| "auto" \| "25" \| "50" \| "75" \| "100" \| "150" \| "175" \| "200" \| "250" \| "300" \| "350" \| "400" \| "500" \| "600" \| "700" \| "800" \| "900" \| "1000">` | — | |
119
- | `marginX` | `Responsive<`var(--h-${string})` \| "0" \| "auto" \| "25" \| "50" \| "75" \| "100" \| "150" \| "175" \| "200" \| "250" \| "300" \| "350" \| "400" \| "500" \| "600" \| "700" \| "800" \| "900" \| "1000">` | — | |
120
- | `marginY` | `Responsive<`var(--h-${string})` \| "0" \| "auto" \| "25" \| "50" \| "75" \| "100" \| "150" \| "175" \| "200" \| "250" \| "300" \| "350" \| "400" \| "500" \| "600" \| "700" \| "800" \| "900" \| "1000">` | — | |
121
- | `opacity` | `Responsive<string>` | — | |
122
- | `order` | `Responsive<string>` | — | |
123
- | `overflow` | `Responsive<"hidden" \| "auto" \| "visible" \| "clip" \| "scroll">` | — | |
124
- | `overflowX` | `Responsive<"hidden" \| "auto" \| "visible" \| "clip" \| "scroll">` | — | |
125
- | `overflowY` | `Responsive<"hidden" \| "auto" \| "visible" \| "clip" \| "scroll">` | — | |
126
- | `padding` | `Responsive<`var(--h-${string})` \| "0" \| "25" \| "50" \| "75" \| "100" \| "150" \| "175" \| "200" \| "250" \| "300" \| "350" \| "400" \| "500" \| "600" \| "700" \| "800" \| "900" \| "1000">` | — | |
127
- | `paddingTop` | `Responsive<`var(--h-${string})` \| "0" \| "25" \| "50" \| "75" \| "100" \| "150" \| "175" \| "200" \| "250" \| "300" \| "350" \| "400" \| "500" \| "600" \| "700" \| "800" \| "900" \| "1000">` | — | |
128
- | `paddingRight` | `Responsive<`var(--h-${string})` \| "0" \| "25" \| "50" \| "75" \| "100" \| "150" \| "175" \| "200" \| "250" \| "300" \| "350" \| "400" \| "500" \| "600" \| "700" \| "800" \| "900" \| "1000">` | — | |
129
- | `paddingBottom` | `Responsive<`var(--h-${string})` \| "0" \| "25" \| "50" \| "75" \| "100" \| "150" \| "175" \| "200" \| "250" \| "300" \| "350" \| "400" \| "500" \| "600" \| "700" \| "800" \| "900" \| "1000">` | — | |
130
- | `paddingLeft` | `Responsive<`var(--h-${string})` \| "0" \| "25" \| "50" \| "75" \| "100" \| "150" \| "175" \| "200" \| "250" \| "300" \| "350" \| "400" \| "500" \| "600" \| "700" \| "800" \| "900" \| "1000">` | — | |
131
- | `paddingX` | `Responsive<`var(--h-${string})` \| "0" \| "25" \| "50" \| "75" \| "100" \| "150" \| "175" \| "200" \| "250" \| "300" \| "350" \| "400" \| "500" \| "600" \| "700" \| "800" \| "900" \| "1000">` | — | |
132
- | `paddingY` | `Responsive<`var(--h-${string})` \| "0" \| "25" \| "50" \| "75" \| "100" \| "150" \| "175" \| "200" \| "250" \| "300" \| "350" \| "400" \| "500" \| "600" \| "700" \| "800" \| "900" \| "1000">` | — | |
133
- | `position` | `Responsive<"fixed" \| "static" \| "relative" \| "absolute" \| "sticky">` | — | |
134
- | `inset` | `Responsive<Union<string, "0" \| "25" \| "50" \| "75" \| "100" \| "150" \| "175" \| "200" \| "250" \| "300" \| "350" \| "400" \| "500" \| "600" \| "700" \| "800" \| "900" \| "1000">>` | — | |
135
- | `top` | `Responsive<Union<string, "0" \| "25" \| "50" \| "75" \| "100" \| "150" \| "175" \| "200" \| "250" \| "300" \| "350" \| "400" \| "500" \| "600" \| "700" \| "800" \| "900" \| "1000">>` | — | |
136
- | `right` | `Responsive<Union<string, "0" \| "25" \| "50" \| "75" \| "100" \| "150" \| "175" \| "200" \| "250" \| "300" \| "350" \| "400" \| "500" \| "600" \| "700" \| "800" \| "900" \| "1000">>` | — | |
137
- | `bottom` | `Responsive<Union<string, "0" \| "25" \| "50" \| "75" \| "100" \| "150" \| "175" \| "200" \| "250" \| "300" \| "350" \| "400" \| "500" \| "600" \| "700" \| "800" \| "900" \| "1000">>` | — | |
138
- | `left` | `Responsive<Union<string, "0" \| "25" \| "50" \| "75" \| "100" \| "150" \| "175" \| "200" \| "250" \| "300" \| "350" \| "400" \| "500" \| "600" \| "700" \| "800" \| "900" \| "1000">>` | — | |
139
- | `width` | `Responsive<string>` | — | |
140
- | `maxWidth` | `Responsive<string>` | — | |
141
- | `minWidth` | `Responsive<string>` | — | |
142
- | `height` | `Responsive<string>` | — | |
143
- | `maxHeight` | `Responsive<string>` | — | |
144
- | `minHeight` | `Responsive<string>` | — | |
145
- | `textAlign` | `Responsive<"center" \| "right" \| "left">` | — | |
146
- | `textTransform` | `"none" \| "uppercase" \| "lowercase" \| "capitalize"` | — | Set the text-transform on the component. |
147
- | `zIndex` | `Responsive<string>` | — | |
148
- | `as` | `"div" \| "span"` | — | |
71
+ | Prop | Type | Default | Description |
72
+ | --------- | ------------------------------------------------------------- | ------- | ----------- |
73
+ | `asChild` | `boolean` | — | |
74
+ | `display` | `Responsive<"none" \| "inline" \| "inline-block" \| "block">` | — | |
75
+ | `as` | `"div" \| "span"` | — | |
package/public/llms/components/button.md CHANGED
@@ -577,19 +577,12 @@ This component is based on the `button` element and supports the following commo
577
577
 
578
578
  - Margin
579
579
 
580
- | Prop | Type | Default | Description |
581
- | -------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------- | ----------------------------------------------------------------------------------------------------- |
582
- | `margin` | `Responsive<"auto" \| "0" \| "25" \| "50" \| "75" \| "100" \| "150" \| "175" \| "200" \| "250" \| "300" \| "350" \| "400" \| "500" \| "600" \| "700" \| "800" \| "900" \| "1000" \| `var(--h-${string})`>` | — | |
583
- | `marginTop` | `Responsive<"auto" \| "0" \| "25" \| "50" \| "75" \| "100" \| "150" \| "175" \| "200" \| "250" \| "300" \| "350" \| "400" \| "500" \| "600" \| "700" \| "800" \| "900" \| "1000" \| `var(--h-${string})`>` | — | |
584
- | `marginRight` | `Responsive<"auto" \| "0" \| "25" \| "50" \| "75" \| "100" \| "150" \| "175" \| "200" \| "250" \| "300" \| "350" \| "400" \| "500" \| "600" \| "700" \| "800" \| "900" \| "1000" \| `var(--h-${string})`>` | — | |
585
- | `marginBottom` | `Responsive<"auto" \| "0" \| "25" \| "50" \| "75" \| "100" \| "150" \| "175" \| "200" \| "250" \| "300" \| "350" \| "400" \| "500" \| "600" \| "700" \| "800" \| "900" \| "1000" \| `var(--h-${string})`>` | — | |
586
- | `marginLeft` | `Responsive<"auto" \| "0" \| "25" \| "50" \| "75" \| "100" \| "150" \| "175" \| "200" \| "250" \| "300" \| "350" \| "400" \| "500" \| "600" \| "700" \| "800" \| "900" \| "1000" \| `var(--h-${string})`>` | — | |
587
- | `marginX` | `Responsive<"auto" \| "0" \| "25" \| "50" \| "75" \| "100" \| "150" \| "175" \| "200" \| "250" \| "300" \| "350" \| "400" \| "500" \| "600" \| "700" \| "800" \| "900" \| "1000" \| `var(--h-${string})`>` | — | |
588
- | `marginY` | `Responsive<"auto" \| "0" \| "25" \| "50" \| "75" \| "100" \| "150" \| "175" \| "200" \| "250" \| "300" \| "350" \| "400" \| "500" \| "600" \| "700" \| "800" \| "900" \| "1000" \| `var(--h-${string})`>` | — | |
589
- | `variant` | `"emphasis" \| "solid" \| "outline" \| "ghost"` | — | Sets the button's visual variant |
590
- | `colorScheme` | `"highlight" \| "affirmative" \| "destructive" \| "functional"` | — | Sets the button's colour scheme |
591
- | `asChild` | `boolean` | — | Change the default rendered element for the one passed as a child, merging their props and behavior. |
592
- | `loading` | `boolean` | — | Indicate when the button is in a loading state, will also disable the button. |
593
- | `inverted` | `boolean` | — | Inverts the component colours, for use on darker surface colours. |
594
- | `size` | `Responsive<"sm" \| "md">` | `md` | Sets the button height. |
595
- | `paddingNone` | `boolean` | — | Remove the inline padding for better alignment with other elements. Only affects the `ghost` variant. |
580
+ | Prop | Type | Default | Description |
581
+ | ------------- | --------------------------------------------------------------- | ------- | ----------------------------------------------------------------------------------------------------- |
582
+ | `variant` | `"emphasis" \| "solid" \| "outline" \| "ghost"` | — | Sets the button's visual variant |
583
+ | `colorScheme` | `"highlight" \| "affirmative" \| "destructive" \| "functional"` | — | Sets the button's colour scheme |
584
+ | `asChild` | `boolean` | — | Change the default rendered element for the one passed as a child, merging their props and behavior. |
585
+ | `loading` | `boolean` | — | Indicate when the button is in a loading state, will also disable the button. |
586
+ | `inverted` | `boolean` | — | Inverts the component colours, for use on darker surface colours. |
587
+ | `size` | `Responsive<"sm" \| "md">` | `md` | Sets the button height. |
588
+ | `paddingNone` | `boolean` | — | Remove the inline padding for better alignment with other elements. Only affects the `ghost` variant. |
package/public/llms/components/card-accordion.md CHANGED
@@ -234,17 +234,10 @@ This component is based on the `div` element and supports the following common p
234
234
 
235
235
  - Margin
236
236
 
237
- | Prop | Type | Default | Description |
238
- | --------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------- | ----------- |
239
- | `onValueChange` | `((value: string) => void)` | — | |
240
- | `value` | `string` | — | |
241
- | `margin` | `Responsive<"0" \| "auto" \| "25" \| "50" \| "75" \| "100" \| "150" \| "175" \| "200" \| "250" \| "300" \| "350" \| "400" \| "500" \| "600" \| "700" \| "800" \| "900" \| "1000" \| `var(--h-${string})`>` | — | |
242
- | `marginTop` | `Responsive<"0" \| "auto" \| "25" \| "50" \| "75" \| "100" \| "150" \| "175" \| "200" \| "250" \| "300" \| "350" \| "400" \| "500" \| "600" \| "700" \| "800" \| "900" \| "1000" \| `var(--h-${string})`>` | — | |
243
- | `marginRight` | `Responsive<"0" \| "auto" \| "25" \| "50" \| "75" \| "100" \| "150" \| "175" \| "200" \| "250" \| "300" \| "350" \| "400" \| "500" \| "600" \| "700" \| "800" \| "900" \| "1000" \| `var(--h-${string})`>` | — | |
244
- | `marginBottom` | `Responsive<"0" \| "auto" \| "25" \| "50" \| "75" \| "100" \| "150" \| "175" \| "200" \| "250" \| "300" \| "350" \| "400" \| "500" \| "600" \| "700" \| "800" \| "900" \| "1000" \| `var(--h-${string})`>` | — | |
245
- | `marginLeft` | `Responsive<"0" \| "auto" \| "25" \| "50" \| "75" \| "100" \| "150" \| "175" \| "200" \| "250" \| "300" \| "350" \| "400" \| "500" \| "600" \| "700" \| "800" \| "900" \| "1000" \| `var(--h-${string})`>` | — | |
246
- | `marginX` | `Responsive<"0" \| "auto" \| "25" \| "50" \| "75" \| "100" \| "150" \| "175" \| "200" \| "250" \| "300" \| "350" \| "400" \| "500" \| "600" \| "700" \| "800" \| "900" \| "1000" \| `var(--h-${string})`>` | — | |
247
- | `marginY` | `Responsive<"0" \| "auto" \| "25" \| "50" \| "75" \| "100" \| "150" \| "175" \| "200" \| "250" \| "300" \| "350" \| "400" \| "500" \| "600" \| "700" \| "800" \| "900" \| "1000" \| `var(--h-${string})`>` | — | |
237
+ | Prop | Type | Default | Description |
238
+ | --------------- | --------------------------- | ------- | ----------- |
239
+ | `onValueChange` | `((value: string) => void)` | — | |
240
+ | `value` | `string` | — | |
248
241
 
249
242
  ### CardAccordionItem
250
243
 
@@ -261,17 +254,6 @@ This component is based on the `div` element and supports the following common p
261
254
 
262
255
  ### CardAccordionButton
263
256
 
264
- | Prop | Type | Default | Description |
265
- | -------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------- | ----------------------------------------------------------------------------------------------------- |
266
- | `margin` | `Responsive<"auto" \| "0" \| "25" \| "50" \| "75" \| "100" \| "150" \| "175" \| "200" \| "250" \| "300" \| "350" \| "400" \| "500" \| "600" \| "700" \| "800" \| "900" \| "1000" \| `var(--h-${string})`>` | — | |
267
- | `marginTop` | `Responsive<"auto" \| "0" \| "25" \| "50" \| "75" \| "100" \| "150" \| "175" \| "200" \| "250" \| "300" \| "350" \| "400" \| "500" \| "600" \| "700" \| "800" \| "900" \| "1000" \| `var(--h-${string})`>` | — | |
268
- | `marginRight` | `Responsive<"auto" \| "0" \| "25" \| "50" \| "75" \| "100" \| "150" \| "175" \| "200" \| "250" \| "300" \| "350" \| "400" \| "500" \| "600" \| "700" \| "800" \| "900" \| "1000" \| `var(--h-${string})`>` | — | |
269
- | `marginBottom` | `Responsive<"auto" \| "0" \| "25" \| "50" \| "75" \| "100" \| "150" \| "175" \| "200" \| "250" \| "300" \| "350" \| "400" \| "500" \| "600" \| "700" \| "800" \| "900" \| "1000" \| `var(--h-${string})`>` | — | |
270
- | `marginLeft` | `Responsive<"auto" \| "0" \| "25" \| "50" \| "75" \| "100" \| "150" \| "175" \| "200" \| "250" \| "300" \| "350" \| "400" \| "500" \| "600" \| "700" \| "800" \| "900" \| "1000" \| `var(--h-${string})`>` | — | |
271
- | `marginX` | `Responsive<"auto" \| "0" \| "25" \| "50" \| "75" \| "100" \| "150" \| "175" \| "200" \| "250" \| "300" \| "350" \| "400" \| "500" \| "600" \| "700" \| "800" \| "900" \| "1000" \| `var(--h-${string})`>` | — | |
272
- | `marginY` | `Responsive<"auto" \| "0" \| "25" \| "50" \| "75" \| "100" \| "150" \| "175" \| "200" \| "250" \| "300" \| "350" \| "400" \| "500" \| "600" \| "700" \| "800" \| "900" \| "1000" \| `var(--h-${string})`>` | — | |
273
- | `loading` | `boolean` | — | Indicate when the button is in a loading state, will also disable the button. |
274
- | `inverted` | `boolean` | — | Inverts the component colours, for use on darker surface colours. |
275
- | `size` | `Responsive<"sm" \| "md">` | `md` | Sets the button height. |
276
- | `paddingNone` | `boolean` | — | Remove the inline padding for better alignment with other elements. Only affects the `ghost` variant. |
277
- | `action` | `"next" \| "previous"` | — | |
257
+ | Prop | Type | Default | Description |
258
+ | -------- | ---------------------- | ------- | ----------- |
259
+ | `action` | `"next" \| "previous"` | — | |
package/public/llms/components/card.md CHANGED
@@ -792,17 +792,10 @@ This component is based on the `ul` element and supports the following common pr
792
792
 
793
793
  - Margin
794
794
 
795
- | Prop | Type | Default | Description |
796
- | -------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------- | ------------------------------------------------------------------------------------------------ |
797
- | `as` | `"ul" \| "ol"` | `ul` | Shorthand for changing the default rendered element into a semantically appropriate alternative. |
798
- | `direction` | `Responsive<"column" \| "row">` | — | |
799
- | `margin` | `Responsive<"auto" \| "0" \| "25" \| "50" \| "75" \| "100" \| "150" \| "175" \| "200" \| "250" \| "300" \| "350" \| "400" \| "500" \| "600" \| "700" \| "800" \| "900" \| "1000" \| `var(--h-${string})`>` | — | |
800
- | `marginTop` | `Responsive<"auto" \| "0" \| "25" \| "50" \| "75" \| "100" \| "150" \| "175" \| "200" \| "250" \| "300" \| "350" \| "400" \| "500" \| "600" \| "700" \| "800" \| "900" \| "1000" \| `var(--h-${string})`>` | — | |
801
- | `marginRight` | `Responsive<"auto" \| "0" \| "25" \| "50" \| "75" \| "100" \| "150" \| "175" \| "200" \| "250" \| "300" \| "350" \| "400" \| "500" \| "600" \| "700" \| "800" \| "900" \| "1000" \| `var(--h-${string})`>` | — | |
802
- | `marginBottom` | `Responsive<"auto" \| "0" \| "25" \| "50" \| "75" \| "100" \| "150" \| "175" \| "200" \| "250" \| "300" \| "350" \| "400" \| "500" \| "600" \| "700" \| "800" \| "900" \| "1000" \| `var(--h-${string})`>` | — | |
803
- | `marginLeft` | `Responsive<"auto" \| "0" \| "25" \| "50" \| "75" \| "100" \| "150" \| "175" \| "200" \| "250" \| "300" \| "350" \| "400" \| "500" \| "600" \| "700" \| "800" \| "900" \| "1000" \| `var(--h-${string})`>` | — | |
804
- | `marginX` | `Responsive<"auto" \| "0" \| "25" \| "50" \| "75" \| "100" \| "150" \| "175" \| "200" \| "250" \| "300" \| "350" \| "400" \| "500" \| "600" \| "700" \| "800" \| "900" \| "1000" \| `var(--h-${string})`>` | — | |
805
- | `marginY` | `Responsive<"auto" \| "0" \| "25" \| "50" \| "75" \| "100" \| "150" \| "175" \| "200" \| "250" \| "300" \| "350" \| "400" \| "500" \| "600" \| "700" \| "800" \| "900" \| "1000" \| `var(--h-${string})`>` | — | |
795
+ | Prop | Type | Default | Description |
796
+ | ----------- | ------------------------------- | ------- | ------------------------------------------------------------------------------------------------ |
797
+ | `as` | `"ul" \| "ol"` | `ul` | Shorthand for changing the default rendered element into a semantically appropriate alternative. |
798
+ | `direction` | `Responsive<"column" \| "row">` | — | |
806
799
 
807
800
  ### CardActionLink API
808
801
 
package/public/llms/components/checkbox-group.md CHANGED
@@ -168,26 +168,19 @@ This component is based on the `fieldset` element and supports the following com
168
168
 
169
169
  - Margin
170
170
 
171
- | Prop | Type | Default | Description |
172
- | --------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
173
- | `label` | `ReactNode` | — | The label for the formfield group. This should contain the question being answered by the formfield group. If you don't include a label you need to ensure you use the `aria-label` or `aria-labelledby` prop to properly associate a label with the formfield group. |
174
- | `name` | `string` | — | |
175
- | `required` | `boolean` | — | |
176
- | `disabled` | `boolean` | — | |
177
- | `defaultValue` | `string[]` | — | |
178
- | `value` | `string[]` | — | |
179
- | `onValueChange` | `((value: string[]) => void)` | — | |
180
- | `direction` | `"column" \| "row"` | — | The direction of the checkboxes, will also set the aria-orientation value. |
181
- | `contentWidth` | `Responsive<string>` | — | Set the container width of the CheckboxGroup children, independent to the width of the parent CheckboxGroup. |
182
- | `labelVariant` | `"body" \| "heading"` | — | Set the label variant |
183
- | `helperText` | `ReactNode` | — | Helper text for the formfield group. Provides a hint such as specific requirements for what to choose. When displayed, child components should not display their own `helperText`. |
184
- | `validationText` | `ReactNode` | — | |
185
- | `validationStatus` | `"valid" \| "invalid"` | — | |
186
- | `validationPlacement` | `"top" \| "bottom"` | — | |
187
- | `margin` | `Responsive<"auto" \| "0" \| "25" \| "50" \| "75" \| "100" \| "150" \| "175" \| "200" \| "250" \| "300" \| "350" \| "400" \| "500" \| "600" \| "700" \| "800" \| "900" \| "1000" \| `var(--h-${string})`>` | — | |
188
- | `marginTop` | `Responsive<"auto" \| "0" \| "25" \| "50" \| "75" \| "100" \| "150" \| "175" \| "200" \| "250" \| "300" \| "350" \| "400" \| "500" \| "600" \| "700" \| "800" \| "900" \| "1000" \| `var(--h-${string})`>` | — | |
189
- | `marginRight` | `Responsive<"auto" \| "0" \| "25" \| "50" \| "75" \| "100" \| "150" \| "175" \| "200" \| "250" \| "300" \| "350" \| "400" \| "500" \| "600" \| "700" \| "800" \| "900" \| "1000" \| `var(--h-${string})`>` | — | |
190
- | `marginBottom` | `Responsive<"auto" \| "0" \| "25" \| "50" \| "75" \| "100" \| "150" \| "175" \| "200" \| "250" \| "300" \| "350" \| "400" \| "500" \| "600" \| "700" \| "800" \| "900" \| "1000" \| `var(--h-${string})`>` | — | |
191
- | `marginLeft` | `Responsive<"auto" \| "0" \| "25" \| "50" \| "75" \| "100" \| "150" \| "175" \| "200" \| "250" \| "300" \| "350" \| "400" \| "500" \| "600" \| "700" \| "800" \| "900" \| "1000" \| `var(--h-${string})`>` | — | |
192
- | `marginX` | `Responsive<"auto" \| "0" \| "25" \| "50" \| "75" \| "100" \| "150" \| "175" \| "200" \| "250" \| "300" \| "350" \| "400" \| "500" \| "600" \| "700" \| "800" \| "900" \| "1000" \| `var(--h-${string})`>` | — | |
193
- | `marginY` | `Responsive<"auto" \| "0" \| "25" \| "50" \| "75" \| "100" \| "150" \| "175" \| "200" \| "250" \| "300" \| "350" \| "400" \| "500" \| "600" \| "700" \| "800" \| "900" \| "1000" \| `var(--h-${string})`>` | — | |
171
+ | Prop | Type | Default | Description |
172
+ | --------------------- | ----------------------------- | ------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
173
+ | `label` | `ReactNode` | — | The label for the formfield group. This should contain the question being answered by the formfield group. If you don't include a label you need to ensure you use the `aria-label` or `aria-labelledby` prop to properly associate a label with the formfield group. |
174
+ | `name` | `string` | — | |
175
+ | `required` | `boolean` | — | |
176
+ | `disabled` | `boolean` | — | |
177
+ | `defaultValue` | `string[]` | — | |
178
+ | `value` | `string[]` | — | |
179
+ | `onValueChange` | `((value: string[]) => void)` | — | |
180
+ | `direction` | `"column" \| "row"` | — | The direction of the checkboxes, will also set the aria-orientation value. |
181
+ | `contentWidth` | `Responsive<string>` | — | Set the container width of the CheckboxGroup children, independent to the width of the parent CheckboxGroup. |
182
+ | `labelVariant` | `"body" \| "heading"` | — | Set the label variant |
183
+ | `helperText` | `ReactNode` | — | Helper text for the formfield group. Provides a hint such as specific requirements for what to choose. When displayed, child components should not display their own `helperText`. |
184
+ | `validationText` | `ReactNode` | — | |
185
+ | `validationStatus` | `"valid" \| "invalid"` | — | |
186
+ | `validationPlacement` | `"top" \| "bottom"` | — | |
package/public/llms/components/checkbox-tile.md CHANGED
@@ -94,23 +94,16 @@ This component is based on the `button` element and supports the following commo
94
94
 
95
95
  - Margin
96
96
 
97
- | Prop | Type | Default | Description |
98
- | ------------------ | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------- | ----------------------------------------------------------------------------------------------------------------------------------------------- |
99
- | `label` | `ReactNode` | — | The label for the Checkbox. If not using please properly associate the checkbox with a label using the `aria-label` or `aria-labelledby` props. |
100
- | `image` | `ReactNode` | — | Optional image to show between the check indicator and label. |
101
- | `value` | `string` | — | The value given as data when submitted with a `name`. |
102
- | `onCheckedChange` | `((checked: boolean) => void)` | — | Event handler called when the checked state of the checkbox changes. |
103
- | `defaultChecked` | `boolean` | — | The checked state of the checkbox when it is initially rendered. Use when you do not need to control its checked state. |
104
- | `defaultValue` | `string` | — | |
105
- | `checked` | `boolean` | — | The controlled checked state of the checkbox. Must be used in conjunction with onCheckedChange. |
106
- | `required` | `boolean` | — | |
107
- | `helperText` | `ReactNode` | — | Helper text for the Checkbox. Will not display if the checkbox group has `helperText` set. |
108
- | `validationStatus` | `"invalid"` | — | Indicates the validation state |
109
- | `validationText` | `string` | — | Text to display when the `validationStatus` is set. |
110
- | `margin` | `Responsive<"0" \| "auto" \| "25" \| "50" \| "75" \| "100" \| "150" \| "175" \| "200" \| "250" \| "300" \| "350" \| "400" \| "500" \| "600" \| "700" \| "800" \| "900" \| "1000" \| `var(--h-${string})`>` | — | |
111
- | `marginTop` | `Responsive<"0" \| "auto" \| "25" \| "50" \| "75" \| "100" \| "150" \| "175" \| "200" \| "250" \| "300" \| "350" \| "400" \| "500" \| "600" \| "700" \| "800" \| "900" \| "1000" \| `var(--h-${string})`>` | — | |
112
- | `marginRight` | `Responsive<"0" \| "auto" \| "25" \| "50" \| "75" \| "100" \| "150" \| "175" \| "200" \| "250" \| "300" \| "350" \| "400" \| "500" \| "600" \| "700" \| "800" \| "900" \| "1000" \| `var(--h-${string})`>` | — | |
113
- | `marginBottom` | `Responsive<"0" \| "auto" \| "25" \| "50" \| "75" \| "100" \| "150" \| "175" \| "200" \| "250" \| "300" \| "350" \| "400" \| "500" \| "600" \| "700" \| "800" \| "900" \| "1000" \| `var(--h-${string})`>` | — | |
114
- | `marginLeft` | `Responsive<"0" \| "auto" \| "25" \| "50" \| "75" \| "100" \| "150" \| "175" \| "200" \| "250" \| "300" \| "350" \| "400" \| "500" \| "600" \| "700" \| "800" \| "900" \| "1000" \| `var(--h-${string})`>` | — | |
115
- | `marginX` | `Responsive<"0" \| "auto" \| "25" \| "50" \| "75" \| "100" \| "150" \| "175" \| "200" \| "250" \| "300" \| "350" \| "400" \| "500" \| "600" \| "700" \| "800" \| "900" \| "1000" \| `var(--h-${string})`>` | — | |
116
- | `marginY` | `Responsive<"0" \| "auto" \| "25" \| "50" \| "75" \| "100" \| "150" \| "175" \| "200" \| "250" \| "300" \| "350" \| "400" \| "500" \| "600" \| "700" \| "800" \| "900" \| "1000" \| `var(--h-${string})`>` | — | |
97
+ | Prop | Type | Default | Description |
98
+ | ------------------ | ------------------------------ | ------- | ----------------------------------------------------------------------------------------------------------------------------------------------- |
99
+ | `label` | `ReactNode` | — | The label for the Checkbox. If not using please properly associate the checkbox with a label using the `aria-label` or `aria-labelledby` props. |
100
+ | `image` | `ReactNode` | — | Optional image to show between the check indicator and label. |
101
+ | `value` | `string` | — | The value given as data when submitted with a `name`. |
102
+ | `onCheckedChange` | `((checked: boolean) => void)` | — | Event handler called when the checked state of the checkbox changes. |
103
+ | `defaultChecked` | `boolean` | — | The checked state of the checkbox when it is initially rendered. Use when you do not need to control its checked state. |
104
+ | `defaultValue` | `string` | — | |
105
+ | `checked` | `boolean` | — | The controlled checked state of the checkbox. Must be used in conjunction with onCheckedChange. |
106
+ | `required` | `boolean` | — | |
107
+ | `helperText` | `ReactNode` | — | Helper text for the Checkbox. Will not display if the checkbox group has `helperText` set. |
108
+ | `validationStatus` | `"invalid"` | — | Indicates the validation state |
109
+ | `validationText` | `string` | — | Text to display when the `validationStatus` is set. |
package/public/llms/components/checkbox.md CHANGED
@@ -86,23 +86,16 @@ This component is based on the `button` element and supports the following commo
86
86
 
87
87
  - Margin
88
88
 
89
- | Prop | Type | Default | Description |
90
- | ------------------ | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------- | ----------------------------------------------------------------------------------------------------------------------------------------------- |
91
- | `label` | `ReactNode` | — | The label for the Checkbox. If not using please properly associate the checkbox with a label using the `aria-label` or `aria-labelledby` props. |
92
- | `image` | `ReactNode` | — | Optional image to show between the check indicator and label. |
93
- | `value` | `string` | — | The value given as data when submitted with a `name`. |
94
- | `onCheckedChange` | `((checked: boolean) => void)` | — | Event handler called when the checked state of the checkbox changes. |
95
- | `defaultChecked` | `boolean` | — | The checked state of the checkbox when it is initially rendered. Use when you do not need to control its checked state. |
96
- | `defaultValue` | `string` | — | |
97
- | `checked` | `boolean` | — | The controlled checked state of the checkbox. Must be used in conjunction with onCheckedChange. |
98
- | `required` | `boolean` | — | |
99
- | `helperText` | `ReactNode` | — | Helper text for the Checkbox. Will not display if the checkbox group has `helperText` set. |
100
- | `validationStatus` | `"invalid"` | — | Indicates the validation state |
101
- | `validationText` | `string` | — | Text to display when the `validationStatus` is set. |
102
- | `margin` | `Responsive<"0" \| "auto" \| "25" \| "50" \| "75" \| "100" \| "150" \| "175" \| "200" \| "250" \| "300" \| "350" \| "400" \| "500" \| "600" \| "700" \| "800" \| "900" \| "1000" \| `var(--h-${string})`>` | — | |
103
- | `marginTop` | `Responsive<"0" \| "auto" \| "25" \| "50" \| "75" \| "100" \| "150" \| "175" \| "200" \| "250" \| "300" \| "350" \| "400" \| "500" \| "600" \| "700" \| "800" \| "900" \| "1000" \| `var(--h-${string})`>` | — | |
104
- | `marginRight` | `Responsive<"0" \| "auto" \| "25" \| "50" \| "75" \| "100" \| "150" \| "175" \| "200" \| "250" \| "300" \| "350" \| "400" \| "500" \| "600" \| "700" \| "800" \| "900" \| "1000" \| `var(--h-${string})`>` | — | |
105
- | `marginBottom` | `Responsive<"0" \| "auto" \| "25" \| "50" \| "75" \| "100" \| "150" \| "175" \| "200" \| "250" \| "300" \| "350" \| "400" \| "500" \| "600" \| "700" \| "800" \| "900" \| "1000" \| `var(--h-${string})`>` | — | |
106
- | `marginLeft` | `Responsive<"0" \| "auto" \| "25" \| "50" \| "75" \| "100" \| "150" \| "175" \| "200" \| "250" \| "300" \| "350" \| "400" \| "500" \| "600" \| "700" \| "800" \| "900" \| "1000" \| `var(--h-${string})`>` | — | |
107
- | `marginX` | `Responsive<"0" \| "auto" \| "25" \| "50" \| "75" \| "100" \| "150" \| "175" \| "200" \| "250" \| "300" \| "350" \| "400" \| "500" \| "600" \| "700" \| "800" \| "900" \| "1000" \| `var(--h-${string})`>` | — | |
108
- | `marginY` | `Responsive<"0" \| "auto" \| "25" \| "50" \| "75" \| "100" \| "150" \| "175" \| "200" \| "250" \| "300" \| "350" \| "400" \| "500" \| "600" \| "700" \| "800" \| "900" \| "1000" \| `var(--h-${string})`>` | — | |
89
+ | Prop | Type | Default | Description |
90
+ | ------------------ | ------------------------------ | ------- | ----------------------------------------------------------------------------------------------------------------------------------------------- |
91
+ | `label` | `ReactNode` | — | The label for the Checkbox. If not using please properly associate the checkbox with a label using the `aria-label` or `aria-labelledby` props. |
92
+ | `image` | `ReactNode` | — | Optional image to show between the check indicator and label. |
93
+ | `value` | `string` | — | The value given as data when submitted with a `name`. |
94
+ | `onCheckedChange` | `((checked: boolean) => void)` | — | Event handler called when the checked state of the checkbox changes. |
95
+ | `defaultChecked` | `boolean` | — | The checked state of the checkbox when it is initially rendered. Use when you do not need to control its checked state. |
96
+ | `defaultValue` | `string` | — | |
97
+ | `checked` | `boolean` | — | The controlled checked state of the checkbox. Must be used in conjunction with onCheckedChange. |
98
+ | `required` | `boolean` | — | |
99
+ | `helperText` | `ReactNode` | — | Helper text for the Checkbox. Will not display if the checkbox group has `helperText` set. |
100
+ | `validationStatus` | `"invalid"` | — | Indicates the validation state |
101
+ | `validationText` | `string` | — | Text to display when the `validationStatus` is set. |