@utilitywarehouse/hearth-react 0.28.7 → 0.29.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 (104) hide show
  1. package/README.md +34 -20
  2. package/SKILL.md +355 -0
  3. package/dist/{chunk-TLCA3FQZ.js → chunk-ABES5BZY.js} +2 -2
  4. package/dist/{chunk-OHPQ5IRM.cjs → chunk-Y2CHQFKQ.cjs} +2 -2
  5. package/dist/{chunk-OHPQ5IRM.cjs.map → chunk-Y2CHQFKQ.cjs.map} +1 -1
  6. package/dist/components/CardAccordion/CardAccordion.context.d.ts.map +1 -1
  7. package/dist/components/ExpandableCard/ExpandableCard.cjs +1 -1
  8. package/dist/components/ExpandableCard/ExpandableCard.js +1 -1
  9. package/dist/components/ProgressBar/ProgressBar.cjs +1 -1
  10. package/dist/components/ProgressBar/ProgressBar.js +1 -1
  11. package/dist/helpers/get-classname-styles.d.ts.map +1 -1
  12. package/dist/helpers/logger.d.ts.map +1 -1
  13. package/dist/helpers/merge-ids.d.ts.map +1 -1
  14. package/dist/hooks/use-ids.d.ts.map +1 -1
  15. package/dist/index.cjs +1 -1
  16. package/dist/index.cjs.map +1 -1
  17. package/dist/index.js +1 -1
  18. package/package.json +14 -10
  19. package/public/llms/components/accordion.md +321 -0
  20. package/public/llms/components/alert.md +217 -0
  21. package/public/llms/components/avatar.md +112 -0
  22. package/public/llms/components/badge.md +158 -0
  23. package/public/llms/components/body-text.md +200 -0
  24. package/public/llms/components/box.md +148 -0
  25. package/public/llms/components/breadcrumbs.md +97 -0
  26. package/public/llms/components/button.md +595 -0
  27. package/public/llms/components/card-accordion.md +277 -0
  28. package/public/llms/components/card.md +985 -0
  29. package/public/llms/components/checkbox-group.md +193 -0
  30. package/public/llms/components/checkbox-tile.md +116 -0
  31. package/public/llms/components/checkbox.md +108 -0
  32. package/public/llms/components/combobox.md +360 -0
  33. package/public/llms/components/container.md +162 -0
  34. package/public/llms/components/currency-input.md +85 -0
  35. package/public/llms/components/date-input.md +90 -0
  36. package/public/llms/components/date-picker.md +159 -0
  37. package/public/llms/components/description-list.md +149 -0
  38. package/public/llms/components/detail-text.md +89 -0
  39. package/public/llms/components/divider.md +88 -0
  40. package/public/llms/components/em.md +43 -0
  41. package/public/llms/components/expandable-card.md +231 -0
  42. package/public/llms/components/flex.md +197 -0
  43. package/public/llms/components/grid.md +244 -0
  44. package/public/llms/components/heading.md +65 -0
  45. package/public/llms/components/helper-text.md +27 -0
  46. package/public/llms/components/highlight-banner.md +94 -0
  47. package/public/llms/components/icon-button.md +516 -0
  48. package/public/llms/components/icon-container.md +247 -0
  49. package/public/llms/components/inline-link.md +190 -0
  50. package/public/llms/components/label.md +28 -0
  51. package/public/llms/components/link.md +236 -0
  52. package/public/llms/components/list.md +715 -0
  53. package/public/llms/components/menu.md +270 -0
  54. package/public/llms/components/modal.md +328 -0
  55. package/public/llms/components/pagination.md +138 -0
  56. package/public/llms/components/password-input.md +93 -0
  57. package/public/llms/components/progress-bar.md +139 -0
  58. package/public/llms/components/progress-stepper.md +147 -0
  59. package/public/llms/components/radio-group.md +487 -0
  60. package/public/llms/components/search-input.md +132 -0
  61. package/public/llms/components/section-header.md +82 -0
  62. package/public/llms/components/select.md +148 -0
  63. package/public/llms/components/skeleton.md +282 -0
  64. package/public/llms/components/spinner.md +59 -0
  65. package/public/llms/components/strong.md +49 -0
  66. package/public/llms/components/switch.md +106 -0
  67. package/public/llms/components/table.md +230 -0
  68. package/public/llms/components/tabs.md +320 -0
  69. package/public/llms/components/text-area.md +141 -0
  70. package/public/llms/components/text-input.md +228 -0
  71. package/public/llms/components/toast.md +323 -0
  72. package/public/llms/components/toggle-button-card.md +513 -0
  73. package/public/llms/components/tooltip.md +188 -0
  74. package/public/llms/components/unstyled-icon-button.md +175 -0
  75. package/public/llms/components/validation-text.md +29 -0
  76. package/public/llms/components/verification-input.md +96 -0
  77. package/public/llms/docs/changelog.md +1430 -0
  78. package/public/llms/docs/common-props/align-self.md +90 -0
  79. package/public/llms/docs/common-props/border.md +308 -0
  80. package/public/llms/docs/common-props/colour.md +221 -0
  81. package/public/llms/docs/common-props/flex-items.md +91 -0
  82. package/public/llms/docs/common-props/gap.md +111 -0
  83. package/public/llms/docs/common-props/grid-items.md +96 -0
  84. package/public/llms/docs/common-props/margin.md +105 -0
  85. package/public/llms/docs/common-props/opacity.md +100 -0
  86. package/public/llms/docs/common-props/order.md +90 -0
  87. package/public/llms/docs/common-props/overflow.md +89 -0
  88. package/public/llms/docs/common-props/padding.md +102 -0
  89. package/public/llms/docs/common-props/position.md +92 -0
  90. package/public/llms/docs/common-props/size.md +93 -0
  91. package/public/llms/docs/common-props/spacing.md +97 -0
  92. package/public/llms/docs/common-props/text.md +35 -0
  93. package/public/llms/docs/common-props/z-index.md +88 -0
  94. package/public/llms/docs/design-tokens.md +72 -0
  95. package/public/llms/docs/getting-started.md +117 -0
  96. package/public/llms/docs/layout.md +135 -0
  97. package/public/llms/docs/migrating.md +302 -0
  98. package/public/llms/docs/responsive-design/breakpoints.md +119 -0
  99. package/public/llms/docs/responsive-design/media-queries.md +89 -0
  100. package/public/llms/docs/responsive-design/responsive-props.md +37 -0
  101. package/public/llms.txt +97 -0
  102. package/scripts/init-ai.js +142 -0
  103. package/styles.css +1 -1
  104. /package/dist/{chunk-TLCA3FQZ.js.map → chunk-ABES5BZY.js.map} +0 -0
package/public/llms/components/body-text.md ADDED
@@ -0,0 +1,200 @@
1
+ # BodyText
2
+
3
+ ```tsx
4
+ <Flex direction="column" gap="100">
5
+ {sizes.map(size =>
6
+ weights.map(weight => (
7
+ <BodyText key={`${size}${weight}`} size={size} weight={weight}>
8
+ Hamburgefons ({size}, {weight})
9
+ </BodyText>
10
+ ))
11
+ )}
12
+ </Flex>
13
+ ```
14
+
15
+ ```tsx
16
+ <BodyText size="md">The five boxing wizards jump quickly.</BodyText>
17
+ ```
18
+
19
+ ## Alternatives
20
+
21
+ - DetailText - For detail text
22
+ - Heading - For heading-level text
23
+ - Strong - For strong importance
24
+ - Em - For emphasis
25
+
26
+ ## Semantic HTML
27
+
28
+ By default `BodyText` renders a `p` element, this can be customised using the
29
+ `as` prop, to render a `span` or a `div`.
30
+
31
+ ```tsx
32
+ <BodyText as="span">...</Box>
33
+ ```
34
+
35
+ To render any other valid HTML element, you can use the `asChild` prop.
36
+
37
+ ```tsx
38
+ <BodyText asChild>
39
+ <label>...</label>
40
+ </Box>
41
+ ```
42
+
43
+ This will render the child element, with all the styles declared on the `Box`
44
+ component passed down to it as well.
45
+
46
+ ## Size
47
+
48
+ The size prop is responsive, so you can render different sizes at different breakpoints.
49
+
50
+ ```tsx
51
+ <BodyText size={{ mobile: 'sm', tablet: 'md', desktop: 'lg'}}>{...}</BodyText>
52
+ ```
53
+
54
+ ```tsx
55
+ <Flex direction="column" gap="100">
56
+ {sizes.map(size => (
57
+ <BodyText key={size} size={size}>
58
+ {size}
59
+ </BodyText>
60
+ ))}
61
+ <BodyText size={{ mobile: 'sm', tablet: 'md', desktop: 'lg' }}>Responsive size</BodyText>
62
+ </Flex>
63
+ ```
64
+
65
+ ## Weight
66
+
67
+ The weight prop is responsive, so you can render different weights at different breakpoints.
68
+
69
+ ```tsx
70
+ <BodyText weight={{ mobile: 'bold', tablet: 'regular'}}>{...}</BodyText>
71
+ ```
72
+
73
+ ```tsx
74
+ <Flex direction="column" gap="100">
75
+ {weights.map(weight => (
76
+ <BodyText key={weight} weight={weight}>
77
+ {weight}
78
+ </BodyText>
79
+ ))}
80
+ <BodyText weight={{ mobile: 'bold', tablet: 'regular' }}>Responsive weight</BodyText>
81
+ </Flex>
82
+ ```
83
+
84
+ ## Colour
85
+
86
+ You can use the `color` prop to set a semantic text colour.
87
+
88
+ ```tsx
89
+ <BodyText color="primary" />
90
+ <BodyText color="secondary" />
91
+ <BodyText color="brand" />
92
+ <BodyText color="affirmative" />
93
+ <BodyText color="inverted" />
94
+ ```
95
+
96
+ ```tsx
97
+ <Flex direction="column" width="fit-content">
98
+ <Flex direction="column" backgroundColor="secondary" padding="400" gap="400">
99
+ <BodyText color="primary">Primary</BodyText>
100
+ <BodyText color="secondary">Secondary</BodyText>
101
+ <BodyText color="brand">Brand</BodyText>
102
+ <BodyText color="affirmative">Affirmative</BodyText>
103
+ </Flex>
104
+ <Box backgroundColor="brand" padding="400">
105
+ <BodyText color="inverted">Inverted</BodyText>
106
+ </Box>
107
+ </Flex>
108
+ ```
109
+
110
+ ## Inverted
111
+
112
+ When using `BodyText` on a brand background you can set the `color` prop to
113
+ inverted to ensure proper colour contrast.
114
+
115
+ ```tsx
116
+ <Flex direction="column">
117
+ <Box backgroundColor="brand" padding="400">
118
+ <BodyText {...args}>Inverted text</BodyText>
119
+ </Box>
120
+ </Flex>
121
+ ```
122
+
123
+ ## Text truncate
124
+
125
+ Use the `truncate` prop to set the text to truncate, instead of wrapping, with a
126
+ text overflow ellipsis. Note that text overflow can only happen with block or
127
+ inline-block level elements (the element needs to have a width in order to
128
+ overflow).
129
+
130
+ ```tsx
131
+ <Flex direction="column" gap="100" width="200px">
132
+ {sizes.map(size => (
133
+ <BodyText key={size} {...args} size={size}>
134
+ the quick brown fox jumped over the lazy dog.
135
+ </BodyText>
136
+ ))}
137
+ </Flex>
138
+ ```
139
+
140
+ ## Paragraph Spacing
141
+
142
+ The `paragraphSpacing` prop aligns with the auto spacing between paragraphs in
143
+ Figma designs. While layout components are preferred for managing layouts, and
144
+ applying spacing between elements, sometimes multiple paragraphs can be stacked
145
+ without a parent layout component. When this happens in a design there is no
146
+ indication what the spacing is between these stacked paragraphs. You can use
147
+ `paragraphSpacing` on these `BodyText` elements to apply a predefined bottom
148
+ gutter.
149
+
150
+ ```tsx
151
+ <Flex gap="500">
152
+ {sizes.map(size => (
153
+ <Flex key={size} direction="column" width="360px">
154
+ <BodyText paragraphSpacing size={size}>
155
+ EV tariffs offer fantastic value if your driving patterns mean you can regularly charge your
156
+ car at home - and can schedule your vehicle to charge while you sleep.
157
+ </BodyText>
158
+ <BodyText paragraphSpacing size={size}>
159
+ You’ll get the most value out of our EV tariff by consistently charging your car off-peak
160
+ between midnight and 5am in the morning
161
+ </BodyText>
162
+ <BodyText size={size}>
163
+ And don&apos;t forget, any domestic usage (e.g. washing machines) in that off-peak window
164
+ will also be charged at the reduced rate.
165
+ </BodyText>
166
+ </Flex>
167
+ ))}
168
+ </Flex>
169
+ ```
170
+
171
+ ## API
172
+
173
+ This component is based on the `p` element and supports the following common props:
174
+
175
+ - Margin
176
+ - Color
177
+ - Text align
178
+ - Text wrap
179
+ - Text transform
180
+
181
+ | Prop | Type | Default | Description |
182
+ | ------------------ | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | --------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
183
+ | `as` | `"span" \| "div" \| "label" \| "p"` | `p` | Shorthand for changing the default rendered element into a semantically appropriate alternative. Cannot be used in combination with `asChild`. |
184
+ | `asChild` | `boolean` | — | Change the default rendered element for the one passed as a child, merging their props and behavior. |
185
+ | `size` | `Responsive<"sm" \| "md" \| "lg">` | `md` | Set the text size styles. |
186
+ | `weight` | `Responsive<"regular" \| "semibold" \| "bold">` | `regular` | Set the font-weight |
187
+ | `truncate` | `boolean` | — | If true, the text will not wrap, but instead will truncate with a text overflow ellipsis. Note that text overflow can only happen with block or inline-block level elements (the element needs to have a width in order to overflow). |
188
+ | `paragraphSpacing` | `boolean` | — | If true, the text will have a bottom margin. |
189
+ | `color` | `"primary" \| "secondary" \| "brand" \| "affirmative" \| "inverted" \| `var(--h-${string})`` | — | |
190
+ | `textAlign` | `Responsive<"center" \| "left" \| "right">` | — | |
191
+ | `textTransform` | `"none" \| "uppercase" \| "lowercase" \| "capitalize"` | — | Set the text-transform on the component. |
192
+ | `wrap` | `Responsive<"wrap" \| "nowrap" \| "balance" \| "pretty">` | — | DEPRECATED: use `textWrap` instead of `wrap` @deprecated Use `textWrap` instead of `wrap` |
193
+ | `textWrap` | `Responsive<"wrap" \| "nowrap" \| "balance" \| "pretty">` | — | |
194
+ | `margin` | `Responsive<`var(--h-${string})` \| "auto" \| "0" \| "25" \| "50" \| "75" \| "100" \| "150" \| "175" \| "200" \| "250" \| "300" \| "350" \| "400" \| "500" \| "600" \| "700" \| "800" \| "900" \| "1000">` | — | |
195
+ | `marginTop` | `Responsive<`var(--h-${string})` \| "auto" \| "0" \| "25" \| "50" \| "75" \| "100" \| "150" \| "175" \| "200" \| "250" \| "300" \| "350" \| "400" \| "500" \| "600" \| "700" \| "800" \| "900" \| "1000">` | — | |
196
+ | `marginRight` | `Responsive<`var(--h-${string})` \| "auto" \| "0" \| "25" \| "50" \| "75" \| "100" \| "150" \| "175" \| "200" \| "250" \| "300" \| "350" \| "400" \| "500" \| "600" \| "700" \| "800" \| "900" \| "1000">` | — | |
197
+ | `marginBottom` | `Responsive<`var(--h-${string})` \| "auto" \| "0" \| "25" \| "50" \| "75" \| "100" \| "150" \| "175" \| "200" \| "250" \| "300" \| "350" \| "400" \| "500" \| "600" \| "700" \| "800" \| "900" \| "1000">` | — | |
198
+ | `marginLeft` | `Responsive<`var(--h-${string})` \| "auto" \| "0" \| "25" \| "50" \| "75" \| "100" \| "150" \| "175" \| "200" \| "250" \| "300" \| "350" \| "400" \| "500" \| "600" \| "700" \| "800" \| "900" \| "1000">` | — | |
199
+ | `marginX` | `Responsive<`var(--h-${string})` \| "auto" \| "0" \| "25" \| "50" \| "75" \| "100" \| "150" \| "175" \| "200" \| "250" \| "300" \| "350" \| "400" \| "500" \| "600" \| "700" \| "800" \| "900" \| "1000">` | — | |
200
+ | `marginY` | `Responsive<`var(--h-${string})` \| "auto" \| "0" \| "25" \| "50" \| "75" \| "100" \| "150" \| "175" \| "200" \| "250" \| "300" \| "350" \| "400" \| "500" \| "600" \| "700" \| "800" \| "900" \| "1000">` | — | |
package/public/llms/components/box.md ADDED
@@ -0,0 +1,148 @@
1
+ # Box
2
+
3
+ ```tsx
4
+ <Box {...args} />
5
+ ```
6
+
7
+ ## Alternatives
8
+
9
+ - Container - For page content, with default
10
+ responsive padding & gutters
11
+ - Grid - For grid layouts
12
+ - Flex - For stacked, inline or flexbox based
13
+ layouts
14
+
15
+ ## Semantic HTML
16
+
17
+ By default `Box` renders a `div` element, this can be customised using the
18
+ `as` prop, to render a `span`.
19
+
20
+ ```tsx
21
+ <Box as="span">...</Box>
22
+ ```
23
+
24
+ To render any other valid HTML element, you can use the `asChild` prop.
25
+
26
+ ```tsx
27
+ <Box asChild>
28
+ <main>...</main>
29
+ </Box>
30
+ ```
31
+
32
+ This will render the child element, with all the styles declared on the `Box`
33
+ component passed down to it as well.
34
+
35
+ ### Accessibility
36
+
37
+ The `Box` component is an all purpose component. By default, it has no
38
+ accessibility concerns. If you use the `Box` as a custom element, it is up to
39
+ you to manage the resulting accessibility implications.
40
+
41
+ ## Show/hide content
42
+
43
+ The `display` prop is responsive, you can use this to show or hide content responsively.
44
+
45
+ ```tsx
46
+ <Box display={{ mobile: 'none', tablet: 'block' }}>hide on mobile screens</Box>
47
+ ```
48
+
49
+ ## API
50
+
51
+ This component is based on the `div` element and supports the following common props:
52
+
53
+ - AlignSelf
54
+ - Padding
55
+ - Margin
56
+ - Position
57
+ - Size
58
+ - Colour
59
+ - Background colour
60
+ - Border colour
61
+ - Border
62
+ - Flex item
63
+ - Grid item
64
+ - Text align
65
+ - Text transform
66
+ - Z-Index
67
+ - Overflow
68
+ - Opacity
69
+ - Order
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<"0" \| "1" \| "2">` | — | |
97
+ | `borderTopWidth` | `Responsive<"0" \| "1" \| "2">` | — | |
98
+ | `borderRightWidth` | `Responsive<"0" \| "1" \| "2">` | — | |
99
+ | `borderBottomWidth` | `Responsive<"0" \| "1" \| "2">` | — | |
100
+ | `borderLeftWidth` | `Responsive<"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"` | — | |
package/public/llms/components/breadcrumbs.md ADDED
@@ -0,0 +1,97 @@
1
+ # Breadcrumbs
2
+
3
+ Use the `Breadcrumbs` component when you need to help users understand and move between multiple levels of a website.
4
+
5
+ - [Current page](#current-page)
6
+ - [Inverted](#inverted)
7
+ - [Usage with Next.js](#usage-with-nextjs)
8
+ - [API](#api)
9
+
10
+ ```tsx
11
+ <Flex direction="column">
12
+ <Flex padding="400">
13
+ <Breadcrumbs>
14
+ <BreadcrumbItem href="#">Page</BreadcrumbItem>
15
+ <BreadcrumbItem href="#">Page</BreadcrumbItem>
16
+ <BreadcrumbItem href="#">Page</BreadcrumbItem>
17
+ <BreadcrumbItem href="#">Page</BreadcrumbItem>
18
+ <BreadcrumbItem href="#" currentPage>
19
+ Current page
20
+ </BreadcrumbItem>
21
+ </Breadcrumbs>
22
+ </Flex>
23
+ <Flex backgroundColor="brand" padding="400">
24
+ <Breadcrumbs inverted>
25
+ <BreadcrumbItem href="#">Page</BreadcrumbItem>
26
+ <BreadcrumbItem href="#">Page</BreadcrumbItem>
27
+ <BreadcrumbItem href="#">Page</BreadcrumbItem>
28
+ <BreadcrumbItem href="#">Page</BreadcrumbItem>
29
+ <BreadcrumbItem href="#" currentPage>
30
+ Current page
31
+ </BreadcrumbItem>
32
+ </Breadcrumbs>
33
+ </Flex>
34
+ </Flex>
35
+ ```
36
+
37
+ ## Current page
38
+
39
+ Use the `currentPage` prop to indicate the current page.
40
+
41
+ ## Inverted
42
+
43
+ Use the `inverted` prop to adjust colours for use on darker brand backgrounds.
44
+
45
+ ## Usage with Next.js
46
+
47
+ When using `Breadcrumbs` with Next.js v13 and above, use the `asChild` prop on
48
+ `BreadcrumbItem` to render it as a Next.js `Link` component.
49
+
50
+ Make sure you only do this with `BreadcrumbItem` components that are not the
51
+ current page.
52
+
53
+ ```tsx
54
+ import { Breadcrumbs, BreadcrumbItem } from '@utilitywarehouse/hearth-react';
55
+ import NextLink from 'next/link';
56
+
57
+ [...]
58
+
59
+ <Breadcrumbs margin="400">
60
+ <BreadcrumbItem asChild>
61
+ <NextLink href="/one">
62
+ One
63
+ </NextLink>
64
+ </BreadcrumbItem>
65
+ <BreadcrumbItem asChild>
66
+ <NextLink href="/two">
67
+ Two
68
+ </NextLink>
69
+ </BreadcrumbItem>
70
+ <BreadcrumbItem asChild>
71
+ <NextLink href="/three">
72
+ Three
73
+ </NextLink>
74
+ </BreadcrumbItem>
75
+ <BreadcrumbItem currentPage>
76
+ Home
77
+ </BreadcrumbItem>
78
+ </Breadcrumbs>
79
+ ```
80
+
81
+ ## API
82
+
83
+ This component is based on the `nav` element and supports the following common props:
84
+
85
+ - Margin
86
+
87
+ ## BreadcrumbItem API
88
+
89
+ This component is based on the `Link` component.
90
+
91
+ | Prop | Type | Default | Description |
92
+ | --------------- | ------------------------------------------------------ | ------- | ---------------------------------------------------------------------------------------------------- |
93
+ | `asChild` | `boolean` | — | Change the default rendered element for the one passed as a child, merging their props and behavior. |
94
+ | `inverted` | `boolean` | — | Inverts the component colours, for use on darker surface colours. |
95
+ | `hideOpenIcon` | `boolean` | — | Hides the "open in new tab" icon when `target="_blank"` is set. |
96
+ | `textTransform` | `"none" \| "uppercase" \| "lowercase" \| "capitalize"` | — | Set the text-transform on the component. |
97
+ | `currentPage` | `boolean` | — | |