@utilitywarehouse/hearth-react 0.28.6 → 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-O7RBVBMN.cjs → chunk-LWHIBSW2.cjs} +2 -2
  4. package/dist/{chunk-O7RBVBMN.cjs.map → chunk-LWHIBSW2.cjs.map} +1 -1
  5. package/dist/{chunk-JRVYOIXR.js → chunk-MIVYZGEV.js} +2 -2
  6. package/dist/components/CardAccordion/CardAccordion.context.d.ts.map +1 -1
  7. package/dist/components/Combobox/Combobox.cjs +1 -1
  8. package/dist/components/Combobox/Combobox.js +1 -1
  9. package/dist/components/ExpandableCard/ExpandableCard.cjs +1 -1
  10. package/dist/components/ExpandableCard/ExpandableCard.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 +18 -12
  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 +2 -2
  104. /package/dist/{chunk-JRVYOIXR.js.map → chunk-MIVYZGEV.js.map} +0 -0
package/public/llms/components/description-list.md ADDED
@@ -0,0 +1,149 @@
1
+ # DescriptionList
2
+
3
+ Use the `DescriptionList` component when you need to present pairs of related information together.
4
+
5
+ ```tsx
6
+ <Box width="550px">
7
+ <DescriptionList {...args} trailingContent={<Link href="#">Link</Link>}>
8
+ <DescriptionListItem
9
+ heading="Heading"
10
+ description="Description"
11
+ link={<Link href="#">Link</Link>}
12
+ />
13
+ <DescriptionListItem
14
+ heading="Heading"
15
+ description="Description"
16
+ link={<Link href="#">Link</Link>}
17
+ />
18
+ <DescriptionListItem
19
+ heading="Heading"
20
+ description="Description"
21
+ link={<Link href="#">Link</Link>}
22
+ />
23
+ <DescriptionListItem
24
+ heading="Heading"
25
+ description="Description"
26
+ link={<Link href="#">Link</Link>}
27
+ validationText="Validation text"
28
+ validationStatus="invalid"
29
+ />
30
+ </DescriptionList>
31
+ </Box>
32
+ ```
33
+
34
+ - [Usage](#usage)
35
+ - [Heading](#heading)
36
+ - [Trailing content](#trailing-content)
37
+ - [Direction](#direction)
38
+ - [API](#api)
39
+ - [DescriptionListItem API](#descriptionlistitem-api)
40
+
41
+ ## Usage
42
+
43
+ Use the `DescriptionList` element to wrap any number of `DescriptionListItem`
44
+ components. This will render a semantic `dl` element, containing `dt` & `dd`
45
+ elements, where the `DescriptionListItem` heading is the `description term
46
+ (dt)`, and the description is the `description details (dd)`.
47
+
48
+ ```tsx
49
+ <DescriptionList heading="Contact details">
50
+ <DescriptionListItem heading="Phone number" description="07123 456789" />
51
+ <DescriptionListItem heading="Email address" description="emailname@uw.co.uk" />
52
+ <DescriptionListItem heading="Password" description="***************" />
53
+ </DescriptionList>
54
+ ```
55
+
56
+ ## Heading
57
+
58
+ The `heading` prop specifies the title of the list. This is useful for
59
+ providing context or describing the purpose of the list.
60
+
61
+ The `headingElement` prop allows you to specify the HTML element used for the
62
+ heading. This is important for maintaining semantic structure in your document.
63
+
64
+ - Use `'h1'`, `'h2'`, etc., for headings that are part of your page's hierarchy.
65
+ - Use `'div'` if the heading is purely decorative or doesn't fit into the semantic structure.
66
+
67
+ ```tsx
68
+ <DescriptionList heading="Contact details" headingElement="h2">
69
+ <DescriptionListItem heading="Phone number" description="07123 456789" />
70
+ <DescriptionListItem heading="Email address" description="emailname@uw.co.uk" />
71
+ </DescriptionList>
72
+ ```
73
+
74
+ ## Trailing content
75
+
76
+ Use the `trailingContent` prop to include a `Link`, `Button` or `Badge` component.
77
+
78
+ ```tsx
79
+ <DescriptionList
80
+ heading="My Bills"
81
+ trailingContent={
82
+ <Link href="https://uw.co.uk/bills">
83
+ View all
84
+ <ChevronRightSmallIcon />
85
+ </Link>
86
+ }
87
+ >
88
+ {...}
89
+ </DescriptionList>
90
+ ```
91
+
92
+ ## Direction
93
+
94
+ The direction of the `DescriptionListItem` components can be controlled via the
95
+ root `DescriptionList`. This prop is responsive, so you can control the layout
96
+ per breakpoint.
97
+
98
+ ```tsx
99
+ <Box width="100%" maxWidth="800px">
100
+ <DescriptionList
101
+ {...args}
102
+ trailingContent={<Link href="#">Edit</Link>}
103
+ direction={{ mobile: 'column', tablet: 'row' }}
104
+ >
105
+ <DescriptionListItem heading="Phone number" description="07123 456789" />
106
+ <DescriptionListItem heading="Email address" description="emailname@uw.co.uk" />
107
+ <DescriptionListItem heading="Password" description="***************" />
108
+ </DescriptionList>
109
+ </Box>
110
+ ```
111
+
112
+ ## API
113
+
114
+ This component is based on the `dl` element and supports the following common props:
115
+
116
+ - Margin
117
+ - Size (width props only)
118
+
119
+ | Prop | Type | Default | Description |
120
+ | ------------------ | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------- | ------------------------------------------------------------------------------------------------- |
121
+ | `heading` | `string` | — | Actual string to display as section header |
122
+ | `headingElement` | `"div" \| "h1" \| "h2" \| "h3" \| "h4"` | `h2` | |
123
+ | `helperText` | `string` | — | Optional helper text to provide additional context or instructions. |
124
+ | `trailingContent` | `ReactNode` | — | Optional trailing content element |
125
+ | `validationStatus` | `"invalid"` | — | Indicates the validation state |
126
+ | `validationText` | `string` | — | Text to display when the `validationStatus` is set. |
127
+ | `direction` | `Responsive<"row" \| "column">` | — | Responsive direction of the section header content. By default, the content is laid out in a row. |
128
+ | `margin` | `Responsive<"auto" \| "0" \| "25" \| "50" \| "75" \| "100" \| "150" \| "175" \| "200" \| "250" \| "300" \| "350" \| "400" \| "500" \| "600" \| "700" \| "800" \| "900" \| "1000" \| `var(--h-${string})`>` | — | |
129
+ | `marginTop` | `Responsive<"auto" \| "0" \| "25" \| "50" \| "75" \| "100" \| "150" \| "175" \| "200" \| "250" \| "300" \| "350" \| "400" \| "500" \| "600" \| "700" \| "800" \| "900" \| "1000" \| `var(--h-${string})`>` | — | |
130
+ | `marginRight` | `Responsive<"auto" \| "0" \| "25" \| "50" \| "75" \| "100" \| "150" \| "175" \| "200" \| "250" \| "300" \| "350" \| "400" \| "500" \| "600" \| "700" \| "800" \| "900" \| "1000" \| `var(--h-${string})`>` | — | |
131
+ | `marginBottom` | `Responsive<"auto" \| "0" \| "25" \| "50" \| "75" \| "100" \| "150" \| "175" \| "200" \| "250" \| "300" \| "350" \| "400" \| "500" \| "600" \| "700" \| "800" \| "900" \| "1000" \| `var(--h-${string})`>` | — | |
132
+ | `marginLeft` | `Responsive<"auto" \| "0" \| "25" \| "50" \| "75" \| "100" \| "150" \| "175" \| "200" \| "250" \| "300" \| "350" \| "400" \| "500" \| "600" \| "700" \| "800" \| "900" \| "1000" \| `var(--h-${string})`>` | — | |
133
+ | `marginX` | `Responsive<"auto" \| "0" \| "25" \| "50" \| "75" \| "100" \| "150" \| "175" \| "200" \| "250" \| "300" \| "350" \| "400" \| "500" \| "600" \| "700" \| "800" \| "900" \| "1000" \| `var(--h-${string})`>` | — | |
134
+ | `marginY` | `Responsive<"auto" \| "0" \| "25" \| "50" \| "75" \| "100" \| "150" \| "175" \| "200" \| "250" \| "300" \| "350" \| "400" \| "500" \| "600" \| "700" \| "800" \| "900" \| "1000" \| `var(--h-${string})`>` | — | |
135
+ | `width` | `Responsive<string>` | — | |
136
+ | `maxWidth` | `Responsive<string>` | — | |
137
+ | `minWidth` | `Responsive<string>` | — | |
138
+
139
+ ## DescriptionListItem API
140
+
141
+ This component is base on the `div` element.
142
+
143
+ | Prop | Type | Default | Description |
144
+ | ------------------ | ----------- | ------- | --------------------------------------------------- |
145
+ | `heading` | `string` | — | Description term |
146
+ | `description` | `string` | — | Description details |
147
+ | `link` | `ReactNode` | — | Optional link element |
148
+ | `validationStatus` | `"invalid"` | — | Indicates the validation state |
149
+ | `validationText` | `string` | — | Text to display when the `validationStatus` is set. |
package/public/llms/components/detail-text.md ADDED
@@ -0,0 +1,89 @@
1
+ # DetailText
2
+
3
+ ```tsx
4
+ <Flex direction="column" gap="100">
5
+ {sizes.map(size => (
6
+ <DetailText key={size} size={size}>
7
+ Hamburgefons ({size})
8
+ </DetailText>
9
+ ))}
10
+ </Flex>
11
+ ```
12
+
13
+ ```tsx
14
+ <DetailText size="md" color="text">
15
+ The five boxing wizards jump quickly.
16
+ </DetailText>
17
+ ```
18
+
19
+ ## Alternatives
20
+
21
+ - BodyText - For body text
22
+ - Strong - For strong importance
23
+ - Em - For emphasis
24
+ - Heading - For heading-level text
25
+
26
+ ## Size
27
+
28
+ The size prop is responsive, so you can render different sizes at different breakpoints.
29
+
30
+ ```tsx
31
+ <DetailText size={{ mobile: 'sm', tablet: 'md', desktop: 'lg'}}>{...}</DetailText>
32
+ ```
33
+
34
+ ```tsx
35
+ <Flex direction="column" gap="100">
36
+ {sizes.map(size => (
37
+ <DetailText key={size} size={size}>
38
+ {size}
39
+ </DetailText>
40
+ ))}
41
+ <DetailText size={{ mobile: 'sm', tablet: 'xl', desktop: '4xl' }}>Responsive size</DetailText>
42
+ </Flex>
43
+ ```
44
+
45
+ ## Color
46
+
47
+ The text color of `DetailText` can be set to either `text`, `valid` or
48
+ `invalid`. These colours will be overridden by the `inverted` prop.
49
+
50
+ ## Inverted
51
+
52
+ When using `BodyText` on a darker background, specifically `uwPurple` &
53
+ `darkPurple`, use the `inverted` prop to ensure colour contrast.
54
+
55
+ ```tsx
56
+ <Flex direction="column">
57
+ <Box backgroundColor="brand" padding="400">
58
+ <DetailText {...args}>Inverted text</DetailText>
59
+ </Box>
60
+ </Flex>
61
+ ```
62
+
63
+ ## API
64
+
65
+ This component is based on the `span` element and supports the following common props:
66
+
67
+ - Margin
68
+ - Text transform
69
+ - Text align
70
+ - Text wrap
71
+
72
+ | Prop | Type | Default | Description |
73
+ | --------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------- | ---------------------------------------------------------------------------------------------------- |
74
+ | `asChild` | `boolean` | — | Change the default rendered element for the one passed as a child, merging their props and behavior. |
75
+ | `size` | `Responsive<"sm" \| "md" \| "lg" \| "xl" \| "2xl" \| "3xl" \| "4xl">` | `md` | Set the text size styles. |
76
+ | `color` | `(Responsive<"text" \| "valid" \| "invalid"> & string)` | `text` | Set the text color |
77
+ | `inverted` | `boolean` | — | Inverts the component colours, for use on darker surface colours. |
78
+ | `textAlign` | `Responsive<"center" \| "left" \| "right">` | — | |
79
+ | `textTransform` | `"none" \| "uppercase" \| "lowercase" \| "capitalize"` | — | Set the text-transform on the component. |
80
+ | `wrap` | `Responsive<"wrap" \| "nowrap" \| "balance" \| "pretty">` | — | DEPRECATED: use `textWrap` instead of `wrap` @deprecated Use `textWrap` instead of `wrap` |
81
+ | `textWrap` | `Responsive<"wrap" \| "nowrap" \| "balance" \| "pretty">` | — | |
82
+ | `margin` | `Responsive<"auto" \| "0" \| "25" \| "50" \| "75" \| "100" \| "150" \| "175" \| "200" \| "250" \| "300" \| "350" \| "400" \| "500" \| "600" \| "700" \| "800" \| "900" \| "1000" \| `var(--h-${string})`>` | — | |
83
+ | `marginTop` | `Responsive<"auto" \| "0" \| "25" \| "50" \| "75" \| "100" \| "150" \| "175" \| "200" \| "250" \| "300" \| "350" \| "400" \| "500" \| "600" \| "700" \| "800" \| "900" \| "1000" \| `var(--h-${string})`>` | — | |
84
+ | `marginRight` | `Responsive<"auto" \| "0" \| "25" \| "50" \| "75" \| "100" \| "150" \| "175" \| "200" \| "250" \| "300" \| "350" \| "400" \| "500" \| "600" \| "700" \| "800" \| "900" \| "1000" \| `var(--h-${string})`>` | — | |
85
+ | `marginBottom` | `Responsive<"auto" \| "0" \| "25" \| "50" \| "75" \| "100" \| "150" \| "175" \| "200" \| "250" \| "300" \| "350" \| "400" \| "500" \| "600" \| "700" \| "800" \| "900" \| "1000" \| `var(--h-${string})`>` | — | |
86
+ | `marginLeft` | `Responsive<"auto" \| "0" \| "25" \| "50" \| "75" \| "100" \| "150" \| "175" \| "200" \| "250" \| "300" \| "350" \| "400" \| "500" \| "600" \| "700" \| "800" \| "900" \| "1000" \| `var(--h-${string})`>` | — | |
87
+ | `marginX` | `Responsive<"auto" \| "0" \| "25" \| "50" \| "75" \| "100" \| "150" \| "175" \| "200" \| "250" \| "300" \| "350" \| "400" \| "500" \| "600" \| "700" \| "800" \| "900" \| "1000" \| `var(--h-${string})`>` | — | |
88
+ | `marginY` | `Responsive<"auto" \| "0" \| "25" \| "50" \| "75" \| "100" \| "150" \| "175" \| "200" \| "250" \| "300" \| "350" \| "400" \| "500" \| "600" \| "700" \| "800" \| "900" \| "1000" \| `var(--h-${string})`>` | — | |
89
+ | `as` | `"span" \| "div" \| "p"` | — | |
package/public/llms/components/divider.md ADDED
@@ -0,0 +1,88 @@
1
+ # Divider
2
+
3
+ Used to provide a visual break and semantically divide content. Supports
4
+ vertical and horizontal orientations. Vertical dividers will only be visible
5
+ when contained inside an element with display set to `flex` or `grid`.
6
+
7
+ ```tsx
8
+ <Flex direction="column" gap="400" width="100%" maxWidth="800px" padding="200">
9
+ <Flex direction="column" gap="100" paddingX="400">
10
+ <Heading>Mobile number: 07891123456</Heading>
11
+ <Flex gap="300" alignItems="center">
12
+ <BodyText>Unlimited Tariff</BodyText>
13
+ <Divider decorative orientation="vertical" />
14
+ <BodyText>
15
+ Budget control: <Strong>On</Strong>
16
+ </BodyText>
17
+ <Divider decorative orientation="vertical" />
18
+ <BodyText>
19
+ SIM number: <Strong>249320592996</Strong>
20
+ </BodyText>
21
+ </Flex>
22
+ </Flex>
23
+ <Divider />
24
+ <Flex direction="column" gap="100" paddingX="400">
25
+ <Heading>Mobile number: 07875123456</Heading>
26
+ <Flex gap="300" alignItems="center">
27
+ <BodyText>Value Tariff</BodyText>
28
+ <Divider decorative orientation="vertical" />
29
+ <BodyText>
30
+ Budget control: <Strong>On</Strong>
31
+ </BodyText>
32
+ <Divider decorative orientation="vertical" />
33
+ <BodyText>
34
+ SIM number: <Strong>249320592996</Strong>
35
+ </BodyText>
36
+ </Flex>
37
+ </Flex>
38
+ <Divider />
39
+ <Flex direction="column" gap="100" paddingX="400">
40
+ <Heading>Mobile number: 07929123456</Heading>
41
+ <Flex gap="300" alignItems="center">
42
+ <BodyText>Unlimited Tariff</BodyText>
43
+ <Divider decorative orientation="vertical" />
44
+ <BodyText>
45
+ Budget control: <Strong>Off</Strong>
46
+ </BodyText>
47
+ <Divider decorative orientation="vertical" />
48
+ <BodyText>
49
+ SIM number: <Strong>249320592996</Strong>
50
+ </BodyText>
51
+ </Flex>
52
+ </Flex>
53
+ </Flex>
54
+ ```
55
+
56
+ ## Accessibility
57
+
58
+ Follows the [Separator role requirements](https://www.w3.org/TR/wai-aria-1.2/#separator).
59
+
60
+ By default the `Divider` component renders an `hr` which has a role of
61
+ `separator` by default. This is a semantically meaningful division between
62
+ elements, and should be used considerately.
63
+
64
+ If you need a purely visual separation you can use the `decorative` prop, which
65
+ will remove the element from the accessibility tree. Alternatively you could
66
+ use CSS styling, such as `border-color`, instead of this component.
67
+
68
+ ```tsx
69
+ <Divider decorative />
70
+ ```
71
+
72
+ ## API
73
+
74
+ This component is based on the `hr` element, and supports the following common props:
75
+
76
+ - Margin
77
+
78
+ | Prop | Type | Default | Description |
79
+ | -------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------ | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
80
+ | `orientation` | `"horizontal" \| "vertical"` | `horizontal` | |
81
+ | `decorative` | `boolean` | — | Whether or not the component is purely decorative. When true, accessibility-related attributes are updated so that that the rendered element is removed from the accessibility tree. |
82
+ | `margin` | `Responsive<"auto" \| "0" \| "25" \| "50" \| "75" \| "100" \| "150" \| "175" \| "200" \| "250" \| "300" \| "350" \| "400" \| "500" \| "600" \| "700" \| "800" \| "900" \| "1000" \| `var(--h-${string})`>` | — | |
83
+ | `marginTop` | `Responsive<"auto" \| "0" \| "25" \| "50" \| "75" \| "100" \| "150" \| "175" \| "200" \| "250" \| "300" \| "350" \| "400" \| "500" \| "600" \| "700" \| "800" \| "900" \| "1000" \| `var(--h-${string})`>` | — | |
84
+ | `marginRight` | `Responsive<"auto" \| "0" \| "25" \| "50" \| "75" \| "100" \| "150" \| "175" \| "200" \| "250" \| "300" \| "350" \| "400" \| "500" \| "600" \| "700" \| "800" \| "900" \| "1000" \| `var(--h-${string})`>` | — | |
85
+ | `marginBottom` | `Responsive<"auto" \| "0" \| "25" \| "50" \| "75" \| "100" \| "150" \| "175" \| "200" \| "250" \| "300" \| "350" \| "400" \| "500" \| "600" \| "700" \| "800" \| "900" \| "1000" \| `var(--h-${string})`>` | — | |
86
+ | `marginLeft` | `Responsive<"auto" \| "0" \| "25" \| "50" \| "75" \| "100" \| "150" \| "175" \| "200" \| "250" \| "300" \| "350" \| "400" \| "500" \| "600" \| "700" \| "800" \| "900" \| "1000" \| `var(--h-${string})`>` | — | |
87
+ | `marginX` | `Responsive<"auto" \| "0" \| "25" \| "50" \| "75" \| "100" \| "150" \| "175" \| "200" \| "250" \| "300" \| "350" \| "400" \| "500" \| "600" \| "700" \| "800" \| "900" \| "1000" \| `var(--h-${string})`>` | — | |
88
+ | `marginY` | `Responsive<"auto" \| "0" \| "25" \| "50" \| "75" \| "100" \| "150" \| "175" \| "200" \| "250" \| "300" \| "350" \| "400" \| "500" \| "600" \| "700" \| "800" \| "900" \| "1000" \| `var(--h-${string})`>` | — | |
package/public/llms/components/em.md ADDED
@@ -0,0 +1,43 @@
1
+ # Em
2
+
3
+ ```tsx
4
+ <Flex direction="column" gap="100">
5
+ {sizes.map(size => (
6
+ <BodyText key={size} size={size}>
7
+ We <Em>had</Em> to do something about it.
8
+ </BodyText>
9
+ ))}
10
+ </Flex>
11
+ ```
12
+
13
+ ## Alternatives
14
+
15
+ - BodyText - For body text
16
+ - DetailText - For detail text
17
+ - Heading - For heading-level text
18
+ - Strong - For strong importance
19
+
20
+ ## API
21
+
22
+ This component is based on the `em` element and supports the following common props:
23
+
24
+ - Margin
25
+ - Text transform
26
+ - Text align
27
+ - Text wrap
28
+
29
+ | Prop | Type | Default | Description |
30
+ | --------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
31
+ | `asChild` | `boolean` | — | Change the default rendered element for the one passed as a child, merging their props and behavior. |
32
+ | `truncate` | `boolean` | — | If true, the text will not wrap, but instead will truncate with a text overflow ellipsis. Note that text overflow can only happen with block or inline-block level elements (the element needs to have a width in order to overflow). |
33
+ | `textAlign` | `Responsive<"center" \| "left" \| "right">` | — | |
34
+ | `textTransform` | `"none" \| "uppercase" \| "lowercase" \| "capitalize"` | — | Set the text-transform on the component. |
35
+ | `wrap` | `Responsive<"wrap" \| "nowrap" \| "balance" \| "pretty">` | — | DEPRECATED: use `textWrap` instead of `wrap` @deprecated Use `textWrap` instead of `wrap` |
36
+ | `textWrap` | `Responsive<"wrap" \| "nowrap" \| "balance" \| "pretty">` | — | |
37
+ | `margin` | `Responsive<"auto" \| "0" \| "25" \| "50" \| "75" \| "100" \| "150" \| "175" \| "200" \| "250" \| "300" \| "350" \| "400" \| "500" \| "600" \| "700" \| "800" \| "900" \| "1000" \| `var(--h-${string})`>` | — | |
38
+ | `marginTop` | `Responsive<"auto" \| "0" \| "25" \| "50" \| "75" \| "100" \| "150" \| "175" \| "200" \| "250" \| "300" \| "350" \| "400" \| "500" \| "600" \| "700" \| "800" \| "900" \| "1000" \| `var(--h-${string})`>` | — | |
39
+ | `marginRight` | `Responsive<"auto" \| "0" \| "25" \| "50" \| "75" \| "100" \| "150" \| "175" \| "200" \| "250" \| "300" \| "350" \| "400" \| "500" \| "600" \| "700" \| "800" \| "900" \| "1000" \| `var(--h-${string})`>` | — | |
40
+ | `marginBottom` | `Responsive<"auto" \| "0" \| "25" \| "50" \| "75" \| "100" \| "150" \| "175" \| "200" \| "250" \| "300" \| "350" \| "400" \| "500" \| "600" \| "700" \| "800" \| "900" \| "1000" \| `var(--h-${string})`>` | — | |
41
+ | `marginLeft` | `Responsive<"auto" \| "0" \| "25" \| "50" \| "75" \| "100" \| "150" \| "175" \| "200" \| "250" \| "300" \| "350" \| "400" \| "500" \| "600" \| "700" \| "800" \| "900" \| "1000" \| `var(--h-${string})`>` | — | |
42
+ | `marginX` | `Responsive<"auto" \| "0" \| "25" \| "50" \| "75" \| "100" \| "150" \| "175" \| "200" \| "250" \| "300" \| "350" \| "400" \| "500" \| "600" \| "700" \| "800" \| "900" \| "1000" \| `var(--h-${string})`>` | — | |
43
+ | `marginY` | `Responsive<"auto" \| "0" \| "25" \| "50" \| "75" \| "100" \| "150" \| "175" \| "200" \| "250" \| "300" \| "350" \| "400" \| "500" \| "600" \| "700" \| "800" \| "900" \| "1000" \| `var(--h-${string})`>` | — | |