@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.
- package/README.md +34 -20
- package/SKILL.md +355 -0
- package/dist/{chunk-TLCA3FQZ.js → chunk-ABES5BZY.js} +2 -2
- package/dist/{chunk-OHPQ5IRM.cjs → chunk-Y2CHQFKQ.cjs} +2 -2
- package/dist/{chunk-OHPQ5IRM.cjs.map → chunk-Y2CHQFKQ.cjs.map} +1 -1
- package/dist/components/CardAccordion/CardAccordion.context.d.ts.map +1 -1
- package/dist/components/ExpandableCard/ExpandableCard.cjs +1 -1
- package/dist/components/ExpandableCard/ExpandableCard.js +1 -1
- package/dist/components/ProgressBar/ProgressBar.cjs +1 -1
- package/dist/components/ProgressBar/ProgressBar.js +1 -1
- package/dist/helpers/get-classname-styles.d.ts.map +1 -1
- package/dist/helpers/logger.d.ts.map +1 -1
- package/dist/helpers/merge-ids.d.ts.map +1 -1
- package/dist/hooks/use-ids.d.ts.map +1 -1
- package/dist/index.cjs +1 -1
- package/dist/index.cjs.map +1 -1
- package/dist/index.js +1 -1
- package/package.json +14 -10
- package/public/llms/components/accordion.md +321 -0
- package/public/llms/components/alert.md +217 -0
- package/public/llms/components/avatar.md +112 -0
- package/public/llms/components/badge.md +158 -0
- package/public/llms/components/body-text.md +200 -0
- package/public/llms/components/box.md +148 -0
- package/public/llms/components/breadcrumbs.md +97 -0
- package/public/llms/components/button.md +595 -0
- package/public/llms/components/card-accordion.md +277 -0
- package/public/llms/components/card.md +985 -0
- package/public/llms/components/checkbox-group.md +193 -0
- package/public/llms/components/checkbox-tile.md +116 -0
- package/public/llms/components/checkbox.md +108 -0
- package/public/llms/components/combobox.md +360 -0
- package/public/llms/components/container.md +162 -0
- package/public/llms/components/currency-input.md +85 -0
- package/public/llms/components/date-input.md +90 -0
- package/public/llms/components/date-picker.md +159 -0
- package/public/llms/components/description-list.md +149 -0
- package/public/llms/components/detail-text.md +89 -0
- package/public/llms/components/divider.md +88 -0
- package/public/llms/components/em.md +43 -0
- package/public/llms/components/expandable-card.md +231 -0
- package/public/llms/components/flex.md +197 -0
- package/public/llms/components/grid.md +244 -0
- package/public/llms/components/heading.md +65 -0
- package/public/llms/components/helper-text.md +27 -0
- package/public/llms/components/highlight-banner.md +94 -0
- package/public/llms/components/icon-button.md +516 -0
- package/public/llms/components/icon-container.md +247 -0
- package/public/llms/components/inline-link.md +190 -0
- package/public/llms/components/label.md +28 -0
- package/public/llms/components/link.md +236 -0
- package/public/llms/components/list.md +715 -0
- package/public/llms/components/menu.md +270 -0
- package/public/llms/components/modal.md +328 -0
- package/public/llms/components/pagination.md +138 -0
- package/public/llms/components/password-input.md +93 -0
- package/public/llms/components/progress-bar.md +139 -0
- package/public/llms/components/progress-stepper.md +147 -0
- package/public/llms/components/radio-group.md +487 -0
- package/public/llms/components/search-input.md +132 -0
- package/public/llms/components/section-header.md +82 -0
- package/public/llms/components/select.md +148 -0
- package/public/llms/components/skeleton.md +282 -0
- package/public/llms/components/spinner.md +59 -0
- package/public/llms/components/strong.md +49 -0
- package/public/llms/components/switch.md +106 -0
- package/public/llms/components/table.md +230 -0
- package/public/llms/components/tabs.md +320 -0
- package/public/llms/components/text-area.md +141 -0
- package/public/llms/components/text-input.md +228 -0
- package/public/llms/components/toast.md +323 -0
- package/public/llms/components/toggle-button-card.md +513 -0
- package/public/llms/components/tooltip.md +188 -0
- package/public/llms/components/unstyled-icon-button.md +175 -0
- package/public/llms/components/validation-text.md +29 -0
- package/public/llms/components/verification-input.md +96 -0
- package/public/llms/docs/changelog.md +1430 -0
- package/public/llms/docs/common-props/align-self.md +90 -0
- package/public/llms/docs/common-props/border.md +308 -0
- package/public/llms/docs/common-props/colour.md +221 -0
- package/public/llms/docs/common-props/flex-items.md +91 -0
- package/public/llms/docs/common-props/gap.md +111 -0
- package/public/llms/docs/common-props/grid-items.md +96 -0
- package/public/llms/docs/common-props/margin.md +105 -0
- package/public/llms/docs/common-props/opacity.md +100 -0
- package/public/llms/docs/common-props/order.md +90 -0
- package/public/llms/docs/common-props/overflow.md +89 -0
- package/public/llms/docs/common-props/padding.md +102 -0
- package/public/llms/docs/common-props/position.md +92 -0
- package/public/llms/docs/common-props/size.md +93 -0
- package/public/llms/docs/common-props/spacing.md +97 -0
- package/public/llms/docs/common-props/text.md +35 -0
- package/public/llms/docs/common-props/z-index.md +88 -0
- package/public/llms/docs/design-tokens.md +72 -0
- package/public/llms/docs/getting-started.md +117 -0
- package/public/llms/docs/layout.md +135 -0
- package/public/llms/docs/migrating.md +302 -0
- package/public/llms/docs/responsive-design/breakpoints.md +119 -0
- package/public/llms/docs/responsive-design/media-queries.md +89 -0
- package/public/llms/docs/responsive-design/responsive-props.md +37 -0
- package/public/llms.txt +97 -0
- package/scripts/init-ai.js +142 -0
- package/styles.css +1 -1
- /package/dist/{chunk-TLCA3FQZ.js.map → chunk-ABES5BZY.js.map} +0 -0
|
@@ -0,0 +1,82 @@
|
|
|
1
|
+
# SectionHeader
|
|
2
|
+
|
|
3
|
+
Use the `SectionHeader` component to help define and separate content within a
|
|
4
|
+
screen. It provides structure, clarity, and improves page scannability for
|
|
5
|
+
users.
|
|
6
|
+
|
|
7
|
+
```tsx
|
|
8
|
+
<Flex width="600px">
|
|
9
|
+
<SectionHeader
|
|
10
|
+
{...args}
|
|
11
|
+
trailingContent={
|
|
12
|
+
<Link>
|
|
13
|
+
Link text
|
|
14
|
+
<ChevronRightSmallIcon />
|
|
15
|
+
</Link>
|
|
16
|
+
}
|
|
17
|
+
/>
|
|
18
|
+
</Flex>
|
|
19
|
+
```
|
|
20
|
+
|
|
21
|
+
## Trailing content
|
|
22
|
+
|
|
23
|
+
Use the `trailingContent` prop to include a `Link`, `Button` or `Badge` component.
|
|
24
|
+
|
|
25
|
+
```tsx
|
|
26
|
+
import { Link, SectionHeader } from '@utilitywarehouse/hearth-react';
|
|
27
|
+
import { ChevronRightSmallIcon } from '@utilitywarehouse/hearth-react-icons';
|
|
28
|
+
|
|
29
|
+
[...]
|
|
30
|
+
|
|
31
|
+
<SectionHeader
|
|
32
|
+
{...args}
|
|
33
|
+
trailingContent={
|
|
34
|
+
<Link>
|
|
35
|
+
Link text
|
|
36
|
+
<ChevronRightSmallIcon />
|
|
37
|
+
</Link>
|
|
38
|
+
}
|
|
39
|
+
/>
|
|
40
|
+
```
|
|
41
|
+
|
|
42
|
+
```tsx
|
|
43
|
+
<Flex width="600px">
|
|
44
|
+
<SectionHeader {...args} trailingContent={<Badge size="sm">Badge</Badge>} />
|
|
45
|
+
</Flex>
|
|
46
|
+
```
|
|
47
|
+
|
|
48
|
+
```tsx
|
|
49
|
+
<Flex width="600px">
|
|
50
|
+
<SectionHeader
|
|
51
|
+
{...args}
|
|
52
|
+
trailingContent={
|
|
53
|
+
<Button size="sm" variant="outline" colorScheme="functional">
|
|
54
|
+
Button
|
|
55
|
+
</Button>
|
|
56
|
+
}
|
|
57
|
+
/>
|
|
58
|
+
</Flex>
|
|
59
|
+
```
|
|
60
|
+
|
|
61
|
+
## API
|
|
62
|
+
|
|
63
|
+
This component is based on the `div` element and supports the following common props:
|
|
64
|
+
|
|
65
|
+
- Margin
|
|
66
|
+
|
|
67
|
+
| Prop | Type | Default | Description |
|
|
68
|
+
| ------------------ | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------- | ------------------------------------------------------------------------------------------------- |
|
|
69
|
+
| `heading` | `string` | — | Actual string to display as section header |
|
|
70
|
+
| `headingElement` | `"div" \| "h1" \| "h2" \| "h3" \| "h4"` | `div` | |
|
|
71
|
+
| `helperText` | `string` | — | Optional helper text to provide additional context or instructions. |
|
|
72
|
+
| `trailingContent` | `ReactNode` | — | Optional trailing content element |
|
|
73
|
+
| `validationStatus` | `"invalid"` | — | Indicates the validation state |
|
|
74
|
+
| `validationText` | `string` | — | Text to display when the `validationStatus` is set. |
|
|
75
|
+
| `direction` | `Responsive<"row" \| "column">` | — | Responsive direction of the section header content. By default, the content is laid out in a row. |
|
|
76
|
+
| `margin` | `Responsive<"auto" \| "0" \| "25" \| "50" \| "75" \| "100" \| "150" \| "175" \| "200" \| "250" \| "300" \| "350" \| "400" \| "500" \| "600" \| "700" \| "800" \| "900" \| "1000" \| `var(--h-${string})`>` | — | |
|
|
77
|
+
| `marginTop` | `Responsive<"auto" \| "0" \| "25" \| "50" \| "75" \| "100" \| "150" \| "175" \| "200" \| "250" \| "300" \| "350" \| "400" \| "500" \| "600" \| "700" \| "800" \| "900" \| "1000" \| `var(--h-${string})`>` | — | |
|
|
78
|
+
| `marginRight` | `Responsive<"auto" \| "0" \| "25" \| "50" \| "75" \| "100" \| "150" \| "175" \| "200" \| "250" \| "300" \| "350" \| "400" \| "500" \| "600" \| "700" \| "800" \| "900" \| "1000" \| `var(--h-${string})`>` | — | |
|
|
79
|
+
| `marginBottom` | `Responsive<"auto" \| "0" \| "25" \| "50" \| "75" \| "100" \| "150" \| "175" \| "200" \| "250" \| "300" \| "350" \| "400" \| "500" \| "600" \| "700" \| "800" \| "900" \| "1000" \| `var(--h-${string})`>` | — | |
|
|
80
|
+
| `marginLeft` | `Responsive<"auto" \| "0" \| "25" \| "50" \| "75" \| "100" \| "150" \| "175" \| "200" \| "250" \| "300" \| "350" \| "400" \| "500" \| "600" \| "700" \| "800" \| "900" \| "1000" \| `var(--h-${string})`>` | — | |
|
|
81
|
+
| `marginX` | `Responsive<"auto" \| "0" \| "25" \| "50" \| "75" \| "100" \| "150" \| "175" \| "200" \| "250" \| "300" \| "350" \| "400" \| "500" \| "600" \| "700" \| "800" \| "900" \| "1000" \| `var(--h-${string})`>` | — | |
|
|
82
|
+
| `marginY` | `Responsive<"auto" \| "0" \| "25" \| "50" \| "75" \| "100" \| "150" \| "175" \| "200" \| "250" \| "300" \| "350" \| "400" \| "500" \| "600" \| "700" \| "800" \| "900" \| "1000" \| `var(--h-${string})`>` | — | |
|
|
@@ -0,0 +1,148 @@
|
|
|
1
|
+
# Select
|
|
2
|
+
|
|
3
|
+
`Select` enables users to select an option from a list of choices, and generally requires a final submit action to confirm the selection.
|
|
4
|
+
|
|
5
|
+
```tsx
|
|
6
|
+
<Select {...args}>
|
|
7
|
+
<SelectItem value="1">Item 1</SelectItem>
|
|
8
|
+
<SelectItem value="2">Item 2</SelectItem>
|
|
9
|
+
<SelectItem value="3">Item 3</SelectItem>
|
|
10
|
+
<SelectItem value="4" disabled>
|
|
11
|
+
Item 4
|
|
12
|
+
</SelectItem>
|
|
13
|
+
</Select>
|
|
14
|
+
```
|
|
15
|
+
|
|
16
|
+
## Usage
|
|
17
|
+
|
|
18
|
+
Use the root `Select` component to control the label, helper text and
|
|
19
|
+
validation, and to wrap `SelectItem` component's used to display the select
|
|
20
|
+
options. A `label` is required on the `Select`.
|
|
21
|
+
|
|
22
|
+
```tsx
|
|
23
|
+
<Select label="Choose one">
|
|
24
|
+
<SelectItem value="1">Item 1</SelectItem>
|
|
25
|
+
<SelectItem value="2">Item 2</SelectItem>
|
|
26
|
+
<SelectItem value="3">Item 3</SelectItem>
|
|
27
|
+
</Select>
|
|
28
|
+
```
|
|
29
|
+
|
|
30
|
+
You can change the appearance of the label by using the `labelVariant` prop to
|
|
31
|
+
choose between `"heading"` and `"body"` styles.
|
|
32
|
+
|
|
33
|
+
## Value
|
|
34
|
+
|
|
35
|
+
By default the selected item's text will be rendered. An optional placeholder
|
|
36
|
+
prop is also available for when the select has no value.
|
|
37
|
+
|
|
38
|
+
## Required
|
|
39
|
+
|
|
40
|
+
In its default state the `Select` is optional, and is indicated as such
|
|
41
|
+
with the `(optional)` text following the label.
|
|
42
|
+
|
|
43
|
+
When using online forms, most users assume all fields are required by default,
|
|
44
|
+
so the `Select` draws attention to when it is optional. Please make sure
|
|
45
|
+
that when the input field is required for successful completion of the form,
|
|
46
|
+
that you apply the `required` prop and appropriate validation is included.
|
|
47
|
+
|
|
48
|
+
## Validation
|
|
49
|
+
|
|
50
|
+
The input `validationStatus` can be set to either `"valid"` or `"invalid"` to
|
|
51
|
+
indicate the status. This status must be accompanied by a validation text to
|
|
52
|
+
explain the reason for the status.
|
|
53
|
+
|
|
54
|
+
## Accessibility
|
|
55
|
+
|
|
56
|
+
Follows the [ListBox WAI-ARIA design pattern](https://www.w3.org/WAI/ARIA/apg/patterns/listbox).
|
|
57
|
+
|
|
58
|
+
See the W3C [Select-Only Combobox](https://www.w3.org/WAI/ARIA/apg/patterns/combobox/examples/combobox-select-only/) example for more information.
|
|
59
|
+
|
|
60
|
+
### Keyboard interactions
|
|
61
|
+
|
|
62
|
+
<Flex direction="column" gap="200" className="sb-unstyled">
|
|
63
|
+
<Flex>
|
|
64
|
+
<Box width="300px">
|
|
65
|
+
<BodyText as="span" weight="bold">
|
|
66
|
+
Key
|
|
67
|
+
</BodyText>
|
|
68
|
+
</Box>
|
|
69
|
+
<BodyText as="span" weight="bold">
|
|
70
|
+
Description
|
|
71
|
+
</BodyText>
|
|
72
|
+
</Flex>
|
|
73
|
+
<Divider />
|
|
74
|
+
{[
|
|
75
|
+
{
|
|
76
|
+
key: 'Space',
|
|
77
|
+
description:
|
|
78
|
+
'When focus is on SelectTrigger, opens the select and focuses the selected item. When focus is on an item, selects the focused item.',
|
|
79
|
+
},
|
|
80
|
+
{
|
|
81
|
+
key: 'Enter',
|
|
82
|
+
description:
|
|
83
|
+
'When focus is on SelectTrigger, opens the select and focuses the first item. When focus is on an item, selects the focused item.',
|
|
84
|
+
},
|
|
85
|
+
{
|
|
86
|
+
key: 'ArrowDown',
|
|
87
|
+
description:
|
|
88
|
+
'When focus is on SelectTrigger, opens the select. When focus is on an item, moves focus to the next item.',
|
|
89
|
+
},
|
|
90
|
+
{
|
|
91
|
+
key: 'ArrowUp',
|
|
92
|
+
description:
|
|
93
|
+
'When focus is on SelectTrigger, opens the select. When focus is on an item, moves focus to the previous item.',
|
|
94
|
+
},
|
|
95
|
+
{
|
|
96
|
+
key: 'Esc',
|
|
97
|
+
description: 'Closes the select and moves focus to SelectTrigger.',
|
|
98
|
+
},
|
|
99
|
+
].map((kbi, i) => (
|
|
100
|
+
<>
|
|
101
|
+
<Flex>
|
|
102
|
+
<Box width="300px">
|
|
103
|
+
<kbd>{kbi.key}</kbd>
|
|
104
|
+
</Box>
|
|
105
|
+
<BodyText as="span">{kbi.description}</BodyText>
|
|
106
|
+
</Flex>
|
|
107
|
+
{i < 4 ? <Divider /> : null}
|
|
108
|
+
</>
|
|
109
|
+
))}
|
|
110
|
+
</Flex>
|
|
111
|
+
|
|
112
|
+
## API
|
|
113
|
+
|
|
114
|
+
This component is based on the `button` element and supports the following common props:
|
|
115
|
+
|
|
116
|
+
- Margin
|
|
117
|
+
|
|
118
|
+
| Prop | Type | Default | Description |
|
|
119
|
+
| ------------------ | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------- | ------------------------------------------------------------------- |
|
|
120
|
+
| `label` | `string` | — | The label for the form field, describing its purpose. |
|
|
121
|
+
| `value` | `string` | — | |
|
|
122
|
+
| `defaultValue` | `string` | — | |
|
|
123
|
+
| `asChild` | `boolean` | — | |
|
|
124
|
+
| `open` | `boolean` | — | |
|
|
125
|
+
| `defaultOpen` | `boolean` | — | |
|
|
126
|
+
| `onOpenChange` | `((open: boolean) => void)` | — | |
|
|
127
|
+
| `autoComplete` | `string` | — | |
|
|
128
|
+
| `required` | `boolean` | — | |
|
|
129
|
+
| `onValueChange` | `((value: string) => void)` | — | |
|
|
130
|
+
| `labelId` | `string` | — | |
|
|
131
|
+
| `helperTextId` | `string` | — | |
|
|
132
|
+
| `validationTextId` | `string` | — | |
|
|
133
|
+
| `labelVariant` | `"body" \| "heading"` | — | Change the label variant |
|
|
134
|
+
| `helperText` | `string` | — | Optional helper text to provide additional context or instructions. |
|
|
135
|
+
| `validationText` | `string` | — | Text to display when the `validationStatus` is set. |
|
|
136
|
+
| `validationStatus` | `"valid" \| "invalid"` | — | Indicates the validation status. |
|
|
137
|
+
| `placeholder` | `string` | — | |
|
|
138
|
+
| `margin` | `Responsive<"0" \| "auto" \| "25" \| "50" \| "75" \| "100" \| "150" \| "175" \| "200" \| "250" \| "300" \| "350" \| "400" \| "500" \| "600" \| "700" \| "800" \| "900" \| "1000" \| `var(--h-${string})`>` | — | |
|
|
139
|
+
| `marginTop` | `Responsive<"0" \| "auto" \| "25" \| "50" \| "75" \| "100" \| "150" \| "175" \| "200" \| "250" \| "300" \| "350" \| "400" \| "500" \| "600" \| "700" \| "800" \| "900" \| "1000" \| `var(--h-${string})`>` | — | |
|
|
140
|
+
| `marginRight` | `Responsive<"0" \| "auto" \| "25" \| "50" \| "75" \| "100" \| "150" \| "175" \| "200" \| "250" \| "300" \| "350" \| "400" \| "500" \| "600" \| "700" \| "800" \| "900" \| "1000" \| `var(--h-${string})`>` | — | |
|
|
141
|
+
| `marginBottom` | `Responsive<"0" \| "auto" \| "25" \| "50" \| "75" \| "100" \| "150" \| "175" \| "200" \| "250" \| "300" \| "350" \| "400" \| "500" \| "600" \| "700" \| "800" \| "900" \| "1000" \| `var(--h-${string})`>` | — | |
|
|
142
|
+
| `marginLeft` | `Responsive<"0" \| "auto" \| "25" \| "50" \| "75" \| "100" \| "150" \| "175" \| "200" \| "250" \| "300" \| "350" \| "400" \| "500" \| "600" \| "700" \| "800" \| "900" \| "1000" \| `var(--h-${string})`>` | — | |
|
|
143
|
+
| `marginX` | `Responsive<"0" \| "auto" \| "25" \| "50" \| "75" \| "100" \| "150" \| "175" \| "200" \| "250" \| "300" \| "350" \| "400" \| "500" \| "600" \| "700" \| "800" \| "900" \| "1000" \| `var(--h-${string})`>` | — | |
|
|
144
|
+
| `marginY` | `Responsive<"0" \| "auto" \| "25" \| "50" \| "75" \| "100" \| "150" \| "175" \| "200" \| "250" \| "300" \| "350" \| "400" \| "500" \| "600" \| "700" \| "800" \| "900" \| "1000" \| `var(--h-${string})`>` | — | |
|
|
145
|
+
|
|
146
|
+
### SelectItem API
|
|
147
|
+
|
|
148
|
+
This component is based on the `div` element.
|
|
@@ -0,0 +1,282 @@
|
|
|
1
|
+
# Skeleton
|
|
2
|
+
|
|
3
|
+
`Skeleton` is a collection of components that provide visual placeholders while
|
|
4
|
+
content is loading. It helps improve perceived performance and user experience
|
|
5
|
+
by showing a skeleton of the layout before the actual content is rendered.
|
|
6
|
+
|
|
7
|
+
- [Usage](#usage)
|
|
8
|
+
- [Accessibility](#accessibility)
|
|
9
|
+
- [Loading title](#loading-title)
|
|
10
|
+
- [SkeletonBodyText](#skeletonbodytext)
|
|
11
|
+
- [SkeletonHeading](#skeletonheading)
|
|
12
|
+
- [SkeletonBox](#skeletonbox)
|
|
13
|
+
- [API](#api)
|
|
14
|
+
|
|
15
|
+
```tsx
|
|
16
|
+
<Skeleton loadingTitle="card placeholder story">
|
|
17
|
+
<Flex direction="column" gap="300" width="320px">
|
|
18
|
+
<SkeletonBox {...args} width="100%" height="160px" borderRadius="sm" />
|
|
19
|
+
<SkeletonBox {...args} width="60%" height="20px" borderRadius="xs" />
|
|
20
|
+
<SkeletonBox {...args} width="100%" height="14px" borderRadius="xs" />
|
|
21
|
+
<SkeletonBox {...args} width="85%" height="14px" borderRadius="xs" />
|
|
22
|
+
</Flex>
|
|
23
|
+
</Skeleton>
|
|
24
|
+
```
|
|
25
|
+
|
|
26
|
+
## Usage
|
|
27
|
+
|
|
28
|
+
- `Skeleton` is a wrapper component that provides animation and accessibility features.
|
|
29
|
+
- `SkeletonBox` is a component that can represent a shape placeholder, including rectangles and circles, and can be used for images, avatars, or any other content.
|
|
30
|
+
- `SkeletonHeading` is a component that represents a placeholder for `Heading` text.
|
|
31
|
+
- `SkeletonBodyText` is a component that represents a placeholder for `BodyText`.
|
|
32
|
+
|
|
33
|
+
```tsx
|
|
34
|
+
<div aria-busy={isLoading}>
|
|
35
|
+
{isLoading ? (
|
|
36
|
+
<Skeleton loadingTitle="storybook demo">
|
|
37
|
+
<Flex direction="column" gap="100">
|
|
38
|
+
<SkeletonHeading width="60%" />
|
|
39
|
+
<SkeletonBodyText width="80%" lines="3" />
|
|
40
|
+
<SkeletonBox width="100%" height="200px" />
|
|
41
|
+
<SkeletonBox width="64px" height="64px" borderRadius="full" />
|
|
42
|
+
</Flex>
|
|
43
|
+
</Skeleton>
|
|
44
|
+
) : (
|
|
45
|
+
|
|
46
|
+
{...}
|
|
47
|
+
|
|
48
|
+
)}
|
|
49
|
+
</div>
|
|
50
|
+
```
|
|
51
|
+
|
|
52
|
+
## Accessibility
|
|
53
|
+
|
|
54
|
+
When using `Skeleton`, it's important to ensure that the loading state is
|
|
55
|
+
properly communicated to assistive technologies. The `Skeleton` component, and
|
|
56
|
+
any content that is loading, should be wrapped in a container with the
|
|
57
|
+
`aria-busy` attribute set to `true` when content is loading, and set to `false`
|
|
58
|
+
when content has loaded. This allows screen readers to announce that the
|
|
59
|
+
content is currently loading.
|
|
60
|
+
|
|
61
|
+
### Loading title
|
|
62
|
+
|
|
63
|
+
The `Skeleton` component requires a `loadingTitle`, which provides a
|
|
64
|
+
descriptive title for the loading state, and will automatically be prefixed
|
|
65
|
+
with `'Loading'`. This title is announced by screen readers when the `Skeleton`
|
|
66
|
+
is active, giving users context about what is being loaded.
|
|
67
|
+
|
|
68
|
+
## SkeletonBodyText
|
|
69
|
+
|
|
70
|
+
Use `SkeletonBodyText` when you need a placeholder for body text content. It
|
|
71
|
+
supports multiple lines and the same size props as `BodyText`.
|
|
72
|
+
|
|
73
|
+
```tsx
|
|
74
|
+
<Skeleton loadingTitle="sizes story">
|
|
75
|
+
<Flex direction="column" gap="300" width="360px">
|
|
76
|
+
{sizes.map(size => (
|
|
77
|
+
<SkeletonBodyText key={size} {...args} size={size} lines="3" />
|
|
78
|
+
))}
|
|
79
|
+
</Flex>
|
|
80
|
+
</Skeleton>
|
|
81
|
+
```
|
|
82
|
+
|
|
83
|
+
## SkeletonHeading
|
|
84
|
+
|
|
85
|
+
Use `SkeletonHeading` when you need a placeholder for `Heading` content. It
|
|
86
|
+
supports the same size props as `Heading`.
|
|
87
|
+
|
|
88
|
+
```tsx
|
|
89
|
+
<Skeleton loadingTitle="sizes story">
|
|
90
|
+
<Flex direction="column" gap="200" width="360px">
|
|
91
|
+
{sizes.map(size => (
|
|
92
|
+
<SkeletonHeading key={size} {...args} size={size} />
|
|
93
|
+
))}
|
|
94
|
+
</Flex>
|
|
95
|
+
</Skeleton>
|
|
96
|
+
```
|
|
97
|
+
|
|
98
|
+
## SkeletonBox
|
|
99
|
+
|
|
100
|
+
Use `SkeletonBox` when you need explicit control over shape and dimensions.
|
|
101
|
+
|
|
102
|
+
```tsx
|
|
103
|
+
<Skeleton loadingTitle="blocks story">
|
|
104
|
+
<Flex direction="column" gap="200" width="420px">
|
|
105
|
+
<SkeletonBox {...args} width="100%" height="24px" />
|
|
106
|
+
<SkeletonBox {...args} width="100%" height="24px" />
|
|
107
|
+
<SkeletonBox {...args} width="80%" height="24px" />
|
|
108
|
+
</Flex>
|
|
109
|
+
</Skeleton>
|
|
110
|
+
```
|
|
111
|
+
|
|
112
|
+
```tsx
|
|
113
|
+
<Skeleton loadingTitle="circle story">
|
|
114
|
+
<SkeletonBox {...args} />
|
|
115
|
+
</Skeleton>
|
|
116
|
+
```
|
|
117
|
+
|
|
118
|
+
## API
|
|
119
|
+
|
|
120
|
+
`Skeleton` is based on `div` and supports the following common props:
|
|
121
|
+
|
|
122
|
+
- AlignSelf
|
|
123
|
+
- BorderRadius
|
|
124
|
+
- FlexItem
|
|
125
|
+
- GridItem
|
|
126
|
+
- Margin
|
|
127
|
+
- Order
|
|
128
|
+
- Position
|
|
129
|
+
- Size
|
|
130
|
+
- ZIndex
|
|
131
|
+
|
|
132
|
+
| Prop | Type | Default | Description |
|
|
133
|
+
| ----------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------- | ----------- |
|
|
134
|
+
| `display` | `Responsive<"none" \| "inline" \| "inline-block" \| "block">` | — | |
|
|
135
|
+
| `loadingTitle` | `string` | — | |
|
|
136
|
+
| `alignSelf` | `Responsive<"center" \| "start" \| "end" \| "stretch">` | — | |
|
|
137
|
+
| `borderRadius` | `Responsive<"none" \| "inherit" \| "xs" \| "sm" \| "md" \| "lg" \| "xl" \| "full">` | — | |
|
|
138
|
+
| `borderRadiusTopLeftNone` | `boolean` | — | |
|
|
139
|
+
| `borderRadiusTopRightNone` | `boolean` | — | |
|
|
140
|
+
| `borderRadiusBottomLeftNone` | `boolean` | — | |
|
|
141
|
+
| `borderRadiusBottomRightNone` | `boolean` | — | |
|
|
142
|
+
| `borderRadiusTopNone` | `boolean` | — | |
|
|
143
|
+
| `borderRadiusRightNone` | `boolean` | — | |
|
|
144
|
+
| `borderRadiusBottomNone` | `boolean` | — | |
|
|
145
|
+
| `borderRadiusLeftNone` | `boolean` | — | |
|
|
146
|
+
| `flex` | `Responsive<string>` | — | |
|
|
147
|
+
| `flexBasis` | `Responsive<string>` | — | |
|
|
148
|
+
| `flexShrink` | `Responsive<string>` | — | |
|
|
149
|
+
| `flexGrow` | `Responsive<string>` | — | |
|
|
150
|
+
| `gridColumnSpan` | `Responsive<Union<string, "1" \| "2" \| "3" \| "4" \| "5" \| "6" \| "7" \| "8" \| "9" \| "10" \| "11" \| "12">>` | — | |
|
|
151
|
+
| `gridArea` | `Responsive<string>` | — | |
|
|
152
|
+
| `gridColumn` | `Responsive<string>` | — | |
|
|
153
|
+
| `gridColumnStart` | `Responsive<string>` | — | |
|
|
154
|
+
| `gridColumnEnd` | `Responsive<string>` | — | |
|
|
155
|
+
| `gridRow` | `Responsive<string>` | — | |
|
|
156
|
+
| `gridRowStart` | `Responsive<string>` | — | |
|
|
157
|
+
| `gridRowEnd` | `Responsive<string>` | — | |
|
|
158
|
+
| `margin` | `Responsive<`var(--h-${string})` \| "auto" \| "0" \| "25" \| "50" \| "75" \| "100" \| "150" \| "175" \| "200" \| "250" \| "300" \| "350" \| "400" \| "500" \| "600" \| "700" \| "800" \| "900" \| "1000">` | — | |
|
|
159
|
+
| `marginTop` | `Responsive<`var(--h-${string})` \| "auto" \| "0" \| "25" \| "50" \| "75" \| "100" \| "150" \| "175" \| "200" \| "250" \| "300" \| "350" \| "400" \| "500" \| "600" \| "700" \| "800" \| "900" \| "1000">` | — | |
|
|
160
|
+
| `marginRight` | `Responsive<`var(--h-${string})` \| "auto" \| "0" \| "25" \| "50" \| "75" \| "100" \| "150" \| "175" \| "200" \| "250" \| "300" \| "350" \| "400" \| "500" \| "600" \| "700" \| "800" \| "900" \| "1000">` | — | |
|
|
161
|
+
| `marginBottom` | `Responsive<`var(--h-${string})` \| "auto" \| "0" \| "25" \| "50" \| "75" \| "100" \| "150" \| "175" \| "200" \| "250" \| "300" \| "350" \| "400" \| "500" \| "600" \| "700" \| "800" \| "900" \| "1000">` | — | |
|
|
162
|
+
| `marginLeft` | `Responsive<`var(--h-${string})` \| "auto" \| "0" \| "25" \| "50" \| "75" \| "100" \| "150" \| "175" \| "200" \| "250" \| "300" \| "350" \| "400" \| "500" \| "600" \| "700" \| "800" \| "900" \| "1000">` | — | |
|
|
163
|
+
| `marginX` | `Responsive<`var(--h-${string})` \| "auto" \| "0" \| "25" \| "50" \| "75" \| "100" \| "150" \| "175" \| "200" \| "250" \| "300" \| "350" \| "400" \| "500" \| "600" \| "700" \| "800" \| "900" \| "1000">` | — | |
|
|
164
|
+
| `marginY` | `Responsive<`var(--h-${string})` \| "auto" \| "0" \| "25" \| "50" \| "75" \| "100" \| "150" \| "175" \| "200" \| "250" \| "300" \| "350" \| "400" \| "500" \| "600" \| "700" \| "800" \| "900" \| "1000">` | — | |
|
|
165
|
+
| `order` | `Responsive<string>` | — | |
|
|
166
|
+
| `position` | `Responsive<"fixed" \| "static" \| "relative" \| "absolute" \| "sticky">` | — | |
|
|
167
|
+
| `inset` | `Responsive<Union<string, "0" \| "25" \| "50" \| "75" \| "100" \| "150" \| "175" \| "200" \| "250" \| "300" \| "350" \| "400" \| "500" \| "600" \| "700" \| "800" \| "900" \| "1000">>` | — | |
|
|
168
|
+
| `top` | `Responsive<Union<string, "0" \| "25" \| "50" \| "75" \| "100" \| "150" \| "175" \| "200" \| "250" \| "300" \| "350" \| "400" \| "500" \| "600" \| "700" \| "800" \| "900" \| "1000">>` | — | |
|
|
169
|
+
| `right` | `Responsive<Union<string, "0" \| "25" \| "50" \| "75" \| "100" \| "150" \| "175" \| "200" \| "250" \| "300" \| "350" \| "400" \| "500" \| "600" \| "700" \| "800" \| "900" \| "1000">>` | — | |
|
|
170
|
+
| `bottom` | `Responsive<Union<string, "0" \| "25" \| "50" \| "75" \| "100" \| "150" \| "175" \| "200" \| "250" \| "300" \| "350" \| "400" \| "500" \| "600" \| "700" \| "800" \| "900" \| "1000">>` | — | |
|
|
171
|
+
| `left` | `Responsive<Union<string, "0" \| "25" \| "50" \| "75" \| "100" \| "150" \| "175" \| "200" \| "250" \| "300" \| "350" \| "400" \| "500" \| "600" \| "700" \| "800" \| "900" \| "1000">>` | — | |
|
|
172
|
+
| `width` | `Responsive<string>` | — | |
|
|
173
|
+
| `maxWidth` | `Responsive<string>` | — | |
|
|
174
|
+
| `minWidth` | `Responsive<string>` | — | |
|
|
175
|
+
| `height` | `Responsive<string>` | — | |
|
|
176
|
+
| `maxHeight` | `Responsive<string>` | — | |
|
|
177
|
+
| `minHeight` | `Responsive<string>` | — | |
|
|
178
|
+
| `zIndex` | `Responsive<string>` | — | |
|
|
179
|
+
|
|
180
|
+
### SkeletonBox API
|
|
181
|
+
|
|
182
|
+
This component is based on `div` and supports the following common props:
|
|
183
|
+
|
|
184
|
+
- AlignSelf
|
|
185
|
+
- BorderRadius
|
|
186
|
+
- FlexItem
|
|
187
|
+
- GridItem
|
|
188
|
+
- Margin
|
|
189
|
+
- Order
|
|
190
|
+
- Position
|
|
191
|
+
- Size
|
|
192
|
+
- ZIndex
|
|
193
|
+
|
|
194
|
+
| Prop | Type | Default | Description |
|
|
195
|
+
| ----------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------- | ----------- |
|
|
196
|
+
| `display` | `Responsive<"none" \| "inline" \| "inline-block" \| "block">` | — | |
|
|
197
|
+
| `alignSelf` | `Responsive<"center" \| "start" \| "end" \| "stretch">` | — | |
|
|
198
|
+
| `borderRadius` | `Responsive<"none" \| "inherit" \| "xs" \| "sm" \| "md" \| "lg" \| "xl" \| "full">` | — | |
|
|
199
|
+
| `borderRadiusTopLeftNone` | `boolean` | — | |
|
|
200
|
+
| `borderRadiusTopRightNone` | `boolean` | — | |
|
|
201
|
+
| `borderRadiusBottomLeftNone` | `boolean` | — | |
|
|
202
|
+
| `borderRadiusBottomRightNone` | `boolean` | — | |
|
|
203
|
+
| `borderRadiusTopNone` | `boolean` | — | |
|
|
204
|
+
| `borderRadiusRightNone` | `boolean` | — | |
|
|
205
|
+
| `borderRadiusBottomNone` | `boolean` | — | |
|
|
206
|
+
| `borderRadiusLeftNone` | `boolean` | — | |
|
|
207
|
+
| `flex` | `Responsive<string>` | — | |
|
|
208
|
+
| `flexBasis` | `Responsive<string>` | — | |
|
|
209
|
+
| `flexShrink` | `Responsive<string>` | — | |
|
|
210
|
+
| `flexGrow` | `Responsive<string>` | — | |
|
|
211
|
+
| `gridColumnSpan` | `Responsive<Union<string, "1" \| "2" \| "3" \| "4" \| "5" \| "6" \| "7" \| "8" \| "9" \| "10" \| "11" \| "12">>` | — | |
|
|
212
|
+
| `gridArea` | `Responsive<string>` | — | |
|
|
213
|
+
| `gridColumn` | `Responsive<string>` | — | |
|
|
214
|
+
| `gridColumnStart` | `Responsive<string>` | — | |
|
|
215
|
+
| `gridColumnEnd` | `Responsive<string>` | — | |
|
|
216
|
+
| `gridRow` | `Responsive<string>` | — | |
|
|
217
|
+
| `gridRowStart` | `Responsive<string>` | — | |
|
|
218
|
+
| `gridRowEnd` | `Responsive<string>` | — | |
|
|
219
|
+
| `margin` | `Responsive<`var(--h-${string})` \| "auto" \| "0" \| "25" \| "50" \| "75" \| "100" \| "150" \| "175" \| "200" \| "250" \| "300" \| "350" \| "400" \| "500" \| "600" \| "700" \| "800" \| "900" \| "1000">` | — | |
|
|
220
|
+
| `marginTop` | `Responsive<`var(--h-${string})` \| "auto" \| "0" \| "25" \| "50" \| "75" \| "100" \| "150" \| "175" \| "200" \| "250" \| "300" \| "350" \| "400" \| "500" \| "600" \| "700" \| "800" \| "900" \| "1000">` | — | |
|
|
221
|
+
| `marginRight` | `Responsive<`var(--h-${string})` \| "auto" \| "0" \| "25" \| "50" \| "75" \| "100" \| "150" \| "175" \| "200" \| "250" \| "300" \| "350" \| "400" \| "500" \| "600" \| "700" \| "800" \| "900" \| "1000">` | — | |
|
|
222
|
+
| `marginBottom` | `Responsive<`var(--h-${string})` \| "auto" \| "0" \| "25" \| "50" \| "75" \| "100" \| "150" \| "175" \| "200" \| "250" \| "300" \| "350" \| "400" \| "500" \| "600" \| "700" \| "800" \| "900" \| "1000">` | — | |
|
|
223
|
+
| `marginLeft` | `Responsive<`var(--h-${string})` \| "auto" \| "0" \| "25" \| "50" \| "75" \| "100" \| "150" \| "175" \| "200" \| "250" \| "300" \| "350" \| "400" \| "500" \| "600" \| "700" \| "800" \| "900" \| "1000">` | — | |
|
|
224
|
+
| `marginX` | `Responsive<`var(--h-${string})` \| "auto" \| "0" \| "25" \| "50" \| "75" \| "100" \| "150" \| "175" \| "200" \| "250" \| "300" \| "350" \| "400" \| "500" \| "600" \| "700" \| "800" \| "900" \| "1000">` | — | |
|
|
225
|
+
| `marginY` | `Responsive<`var(--h-${string})` \| "auto" \| "0" \| "25" \| "50" \| "75" \| "100" \| "150" \| "175" \| "200" \| "250" \| "300" \| "350" \| "400" \| "500" \| "600" \| "700" \| "800" \| "900" \| "1000">` | — | |
|
|
226
|
+
| `order` | `Responsive<string>` | — | |
|
|
227
|
+
| `position` | `Responsive<"fixed" \| "static" \| "relative" \| "absolute" \| "sticky">` | — | |
|
|
228
|
+
| `inset` | `Responsive<Union<string, "0" \| "25" \| "50" \| "75" \| "100" \| "150" \| "175" \| "200" \| "250" \| "300" \| "350" \| "400" \| "500" \| "600" \| "700" \| "800" \| "900" \| "1000">>` | — | |
|
|
229
|
+
| `top` | `Responsive<Union<string, "0" \| "25" \| "50" \| "75" \| "100" \| "150" \| "175" \| "200" \| "250" \| "300" \| "350" \| "400" \| "500" \| "600" \| "700" \| "800" \| "900" \| "1000">>` | — | |
|
|
230
|
+
| `right` | `Responsive<Union<string, "0" \| "25" \| "50" \| "75" \| "100" \| "150" \| "175" \| "200" \| "250" \| "300" \| "350" \| "400" \| "500" \| "600" \| "700" \| "800" \| "900" \| "1000">>` | — | |
|
|
231
|
+
| `bottom` | `Responsive<Union<string, "0" \| "25" \| "50" \| "75" \| "100" \| "150" \| "175" \| "200" \| "250" \| "300" \| "350" \| "400" \| "500" \| "600" \| "700" \| "800" \| "900" \| "1000">>` | — | |
|
|
232
|
+
| `left` | `Responsive<Union<string, "0" \| "25" \| "50" \| "75" \| "100" \| "150" \| "175" \| "200" \| "250" \| "300" \| "350" \| "400" \| "500" \| "600" \| "700" \| "800" \| "900" \| "1000">>` | — | |
|
|
233
|
+
| `width` | `Responsive<string>` | — | |
|
|
234
|
+
| `maxWidth` | `Responsive<string>` | — | |
|
|
235
|
+
| `minWidth` | `Responsive<string>` | — | |
|
|
236
|
+
| `height` | `Responsive<string>` | — | |
|
|
237
|
+
| `maxHeight` | `Responsive<string>` | — | |
|
|
238
|
+
| `minHeight` | `Responsive<string>` | — | |
|
|
239
|
+
| `zIndex` | `Responsive<string>` | — | |
|
|
240
|
+
|
|
241
|
+
### SkeletonBodyText API
|
|
242
|
+
|
|
243
|
+
This component is based on `div` and supports the following common props:
|
|
244
|
+
|
|
245
|
+
- Margin
|
|
246
|
+
- Size (width props only)
|
|
247
|
+
|
|
248
|
+
| Prop | Type | Default | Description |
|
|
249
|
+
| -------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------- | ------------------------------------ |
|
|
250
|
+
| `width` | `Responsive<string>` | — | |
|
|
251
|
+
| `maxWidth` | `Responsive<string>` | — | |
|
|
252
|
+
| `minWidth` | `Responsive<string>` | — | |
|
|
253
|
+
| `size` | `Responsive<"sm" \| "md" \| "lg">` | `md` | Set the size to match BodyText size. |
|
|
254
|
+
| `lines` | `"1" \| "2" \| "3" \| "4" \| "5" \| "6" \| "7" \| "8" \| "9" \| "10" \| "11" \| "12"` | `1` | Number of skeleton lines to render. |
|
|
255
|
+
| `margin` | `Responsive<"auto" \| "0" \| "25" \| "50" \| "75" \| "100" \| "150" \| "175" \| "200" \| "250" \| "300" \| "350" \| "400" \| "500" \| "600" \| "700" \| "800" \| "900" \| "1000" \| `var(--h-${string})`>` | — | |
|
|
256
|
+
| `marginTop` | `Responsive<"auto" \| "0" \| "25" \| "50" \| "75" \| "100" \| "150" \| "175" \| "200" \| "250" \| "300" \| "350" \| "400" \| "500" \| "600" \| "700" \| "800" \| "900" \| "1000" \| `var(--h-${string})`>` | — | |
|
|
257
|
+
| `marginRight` | `Responsive<"auto" \| "0" \| "25" \| "50" \| "75" \| "100" \| "150" \| "175" \| "200" \| "250" \| "300" \| "350" \| "400" \| "500" \| "600" \| "700" \| "800" \| "900" \| "1000" \| `var(--h-${string})`>` | — | |
|
|
258
|
+
| `marginBottom` | `Responsive<"auto" \| "0" \| "25" \| "50" \| "75" \| "100" \| "150" \| "175" \| "200" \| "250" \| "300" \| "350" \| "400" \| "500" \| "600" \| "700" \| "800" \| "900" \| "1000" \| `var(--h-${string})`>` | — | |
|
|
259
|
+
| `marginLeft` | `Responsive<"auto" \| "0" \| "25" \| "50" \| "75" \| "100" \| "150" \| "175" \| "200" \| "250" \| "300" \| "350" \| "400" \| "500" \| "600" \| "700" \| "800" \| "900" \| "1000" \| `var(--h-${string})`>` | — | |
|
|
260
|
+
| `marginX` | `Responsive<"auto" \| "0" \| "25" \| "50" \| "75" \| "100" \| "150" \| "175" \| "200" \| "250" \| "300" \| "350" \| "400" \| "500" \| "600" \| "700" \| "800" \| "900" \| "1000" \| `var(--h-${string})`>` | — | |
|
|
261
|
+
| `marginY` | `Responsive<"auto" \| "0" \| "25" \| "50" \| "75" \| "100" \| "150" \| "175" \| "200" \| "250" \| "300" \| "350" \| "400" \| "500" \| "600" \| "700" \| "800" \| "900" \| "1000" \| `var(--h-${string})`>` | — | |
|
|
262
|
+
|
|
263
|
+
### SkeletonHeading API
|
|
264
|
+
|
|
265
|
+
This component is based on `div` and supports the following common props:
|
|
266
|
+
|
|
267
|
+
- Margin
|
|
268
|
+
- Size (width props only)
|
|
269
|
+
|
|
270
|
+
| Prop | Type | Default | Description |
|
|
271
|
+
| -------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------- | ----------------------------------- |
|
|
272
|
+
| `width` | `Responsive<string>` | — | |
|
|
273
|
+
| `maxWidth` | `Responsive<string>` | — | |
|
|
274
|
+
| `minWidth` | `Responsive<string>` | — | |
|
|
275
|
+
| `size` | `"sm" \| "md" \| "lg" \| "xl" \| "2xl"` | `md` | Set the size to match Heading size. |
|
|
276
|
+
| `margin` | `Responsive<"auto" \| "0" \| "25" \| "50" \| "75" \| "100" \| "150" \| "175" \| "200" \| "250" \| "300" \| "350" \| "400" \| "500" \| "600" \| "700" \| "800" \| "900" \| "1000" \| `var(--h-${string})`>` | — | |
|
|
277
|
+
| `marginTop` | `Responsive<"auto" \| "0" \| "25" \| "50" \| "75" \| "100" \| "150" \| "175" \| "200" \| "250" \| "300" \| "350" \| "400" \| "500" \| "600" \| "700" \| "800" \| "900" \| "1000" \| `var(--h-${string})`>` | — | |
|
|
278
|
+
| `marginRight` | `Responsive<"auto" \| "0" \| "25" \| "50" \| "75" \| "100" \| "150" \| "175" \| "200" \| "250" \| "300" \| "350" \| "400" \| "500" \| "600" \| "700" \| "800" \| "900" \| "1000" \| `var(--h-${string})`>` | — | |
|
|
279
|
+
| `marginBottom` | `Responsive<"auto" \| "0" \| "25" \| "50" \| "75" \| "100" \| "150" \| "175" \| "200" \| "250" \| "300" \| "350" \| "400" \| "500" \| "600" \| "700" \| "800" \| "900" \| "1000" \| `var(--h-${string})`>` | — | |
|
|
280
|
+
| `marginLeft` | `Responsive<"auto" \| "0" \| "25" \| "50" \| "75" \| "100" \| "150" \| "175" \| "200" \| "250" \| "300" \| "350" \| "400" \| "500" \| "600" \| "700" \| "800" \| "900" \| "1000" \| `var(--h-${string})`>` | — | |
|
|
281
|
+
| `marginX` | `Responsive<"auto" \| "0" \| "25" \| "50" \| "75" \| "100" \| "150" \| "175" \| "200" \| "250" \| "300" \| "350" \| "400" \| "500" \| "600" \| "700" \| "800" \| "900" \| "1000" \| `var(--h-${string})`>` | — | |
|
|
282
|
+
| `marginY` | `Responsive<"auto" \| "0" \| "25" \| "50" \| "75" \| "100" \| "150" \| "175" \| "200" \| "250" \| "300" \| "350" \| "400" \| "500" \| "600" \| "700" \| "800" \| "900" \| "1000" \| `var(--h-${string})`>` | — | |
|