A design system in a box.
hip-ui.tngl.io/docs/introduction
fixing up docs
+1168
-1143
+3
-96
README.md
+3
-96
README.md
···
2
2
3
3
## TODO
4
4
5
+
- [ ] calendar input
6
+
5
7
### Imprrovements
6
8
7
-
- [ ] perfect inset border radii
8
-
- [ ] Number field validation state styling
9
9
- [ ] Switch to [logical properties](https://developer.mozilla.org/en-US/docs/Web/CSS/Guides/Logical_properties_and_values/Margins_borders_padding)
10
10
- will need a type-aware lint rule for this
11
11
- [ ] Switch all px to rem
12
-
- [ ] cursor pointer not working in links (and nav links)
13
-
- [ ] use only data-hover
14
12
15
13
### Components
16
14
···
23
21
- [ ] Carousel
24
22
- [ ] Input OTP
25
23
- [ ] Stepper
26
-
- [ ] Lightbox
27
24
- [ ] Video
28
25
- [ ] [Skip Link](https://component.gallery/components/skip-link/)
29
-
- [ ] Page
30
-
- [ ] Footer
31
-
- [ ] NavBar
32
-
- [ ] Hero
33
26
34
27
#### OTher Wrappers
35
28
···
40
33
- [ ] Grid List
41
34
- [ ] Virtual Grid
42
35
- [ ] Waterfall Layout
43
-
- [ ] Navigation Menu
44
-
- [ ] Rating
45
-
46
-
### Maybe
47
-
48
-
- [ ] Field
49
-
- [ ] Item
50
-
- [ ] Sheet
51
-
52
-
### Done
53
-
54
-
- [x] add borderless variant for input fields
55
-
- [x] Add Virtualizer
56
-
- [x] Alert / Callout
57
-
- [x] Empty
58
-
- [x] Skeleton
59
-
- [x] Field errors
60
-
- [x] Window Splitter
61
-
- [x] Toast
62
-
- [x] Drawer
63
-
- [x] Tabs
64
-
- [x] Menubar
65
-
- [x] Form
66
-
- [x] Toolbar
67
-
- [x] Disclosure Group
68
-
- [x] Disclosure
69
-
- [x] Spinner
70
-
- [x] Input Group
71
-
- [x] Breadcrumb
72
-
- [x] Range Date Picker
73
-
- [x] Date Picker
74
-
- [x] Calendar
75
-
- [x] Range Calendar
76
-
- [x] Color Picker
77
-
- [x] Color Swatch Picker
78
-
- [x] Color Wheel
79
-
- [x] Color Slider
80
-
- [x] Color Area
81
-
- [x] Sidebar
82
-
- [x] Kbd
83
-
- [x] Data Table
84
-
- [x] Table
85
-
- [x] Pagination
86
-
- [x] Segmented Control
87
-
- [x] Hover Card
88
-
- [x] Meter
89
-
- [x] Progress Bar
90
-
- [x] Tag Group
91
-
- [x] File Trigger
92
-
- [x] File Drop zone
93
-
- [x] Slider
94
-
- [x] Color Swatch
95
-
- [x] Switch
96
-
- [x] Grid
97
-
- [x] Badge
98
-
- [x] Avatar
99
-
- [x] Alert Dialog
100
-
- [x] Dialog
101
-
- [x] Command
102
-
- [x] Tree
103
-
- [x] Combobox
104
-
- [x] Number Field
105
-
- [x] Color Field
106
-
- [x] Search Field
107
-
- [x] Date Field
108
-
- [x] Timefield
109
-
- [x] Button
110
-
- [x] Button Group
111
-
- [x] Card
112
-
- [x] Checkbox
113
-
- [x] Context Menu
114
-
- [x] Dropdown Menu
115
-
- [x] Flez
116
-
- [x] Icon Button
117
-
- [x] Label
118
-
- [x] Link
119
-
- [x] Listbox
120
-
- [x] Popover
121
-
- [x] Radio Group
122
-
- [x] Select
123
-
- [x] Separator
124
-
- [x] Text Field
125
-
- [x] Textarea
126
-
- [x] Toggle
127
-
- [x] Toggle Group
128
-
- [x] Tooltip
129
-
- [x] Typography
36
+
- [ ] Navigation Menu
+10
-2
apps/docs/src/components/alert/index.tsx
+10
-2
apps/docs/src/components/alert/index.tsx
···
100
100
},
101
101
content: {
102
102
gridArea: "content",
103
-
gap: spacing["1"],
103
+
gap: spacing["3"],
104
104
display: "flex",
105
105
flexDirection: "column",
106
+
},
107
+
contentWithDescription: {
108
+
paddingTop: spacing["0.5"],
106
109
},
107
110
icon: {
108
111
gridArea: "icon",
···
343
346
{displayIcon != null && (
344
347
<div {...stylex.props(styles.icon)}>{displayIcon}</div>
345
348
)}
346
-
<div {...stylex.props(styles.content)}>
349
+
<div
350
+
{...stylex.props(
351
+
styles.content,
352
+
children != null && styles.contentWithDescription,
353
+
)}
354
+
>
347
355
{title != null && (
348
356
<Text size="base" weight="semibold">
349
357
{title}
+3
-3
apps/docs/src/components/color-swatch/index.tsx
+3
-3
apps/docs/src/components/color-swatch/index.tsx
···
22
22
cornerShape: "squircle",
23
23
},
24
24
swatchSm: {
25
-
borderRadius: radius.sm,
25
+
borderRadius: radius.xs,
26
26
height: spacing["4"],
27
27
width: spacing["4"],
28
28
},
29
29
swatchMd: {
30
-
borderRadius: radius.md,
30
+
borderRadius: radius.sm,
31
31
height: spacing["6"],
32
32
width: spacing["6"],
33
33
},
34
34
swatchLg: {
35
-
borderRadius: radius.lg,
35
+
borderRadius: radius.md,
36
36
height: spacing["8"],
37
37
width: spacing["8"],
38
38
},
+1
-2
apps/docs/src/components/combobox/index.tsx
+1
-2
apps/docs/src/components/combobox/index.tsx
+1
-1
apps/docs/src/components/editable-text/index.tsx
+1
-1
apps/docs/src/components/editable-text/index.tsx
+1
-1
apps/docs/src/components/segmented-control/index.tsx
+1
-1
apps/docs/src/components/segmented-control/index.tsx
+1
-1
apps/docs/src/components/select/index.tsx
+1
-1
apps/docs/src/components/select/index.tsx
+1
-1
apps/docs/src/components/theme/useButtonStyles.ts
+1
-1
apps/docs/src/components/theme/useButtonStyles.ts
+1
-1
apps/docs/src/components/theme/useListBoxItemStyles.ts
+1
-1
apps/docs/src/components/theme/useListBoxItemStyles.ts
+1
apps/docs/src/components/toast/Toast.tsx
+1
apps/docs/src/components/toast/Toast.tsx
+2
apps/docs/src/components/toast/index.tsx
+2
apps/docs/src/components/toast/index.tsx
+5
apps/docs/src/components/typography/index.tsx
+5
apps/docs/src/components/typography/index.tsx
···
47
47
top: spacing["2.5"],
48
48
},
49
49
blockquote: {
50
+
gap: spacing["5"],
50
51
color: ui.textDim,
52
+
display: "flex",
53
+
flexDirection: "column",
51
54
fontFamily: fontFamily["serif"],
52
55
borderLeftColor: ui.borderDim,
53
56
borderLeftStyle: "solid",
···
56
59
marginLeft: spacing["2"],
57
60
marginRight: 0,
58
61
marginTop: 0,
62
+
paddingBottom: spacing["2"],
59
63
paddingLeft: spacing["4"],
64
+
paddingTop: spacing["2"],
60
65
},
61
66
unorderedList: {
62
67
margin: 0,
+13
-13
apps/docs/src/docs/components/collections/listbox.mdx
+13
-13
apps/docs/src/docs/components/collections/listbox.mdx
···
18
18
pnpm hip install listbox
19
19
```
20
20
21
+
## Features
22
+
23
+
### Virtualization
24
+
25
+
The list box supports virtualization by providing the `isVirtualized` prop.
26
+
The container must have a fixed height and `overflow: auto`.
27
+
28
+
<Example src={Virtualization} />
29
+
21
30
## Props
22
31
23
32
This component is built using the [React Aria ListBox](https://react-spectrum.adobe.com/react-aria/ListBox.html).
···
32
41
]}
33
42
/>
34
43
35
-
## Features
36
-
37
-
### Virtualization
38
-
39
-
The list box supports virtualization by providing the `isVirtualized` prop.
40
-
The container must have a fixed height and `overflow: auto`.
41
-
42
-
<Example src={Virtualization} />
43
-
44
44
## Related Components
45
45
46
-
- [Select](/docs/components/select) - For dropdown selection using ListBox
47
-
- [ComboBox](/docs/components/combobox) - For searchable selection using ListBox
48
-
- [Tree](/docs/components/tree) - For hierarchical data display
49
-
- [Table](/docs/components/table) - For structured data display
46
+
- [Select](/docs/components/form/select) - For dropdown selection using ListBox
47
+
- [ComboBox](/docs/components/form/combobox) - For searchable selection using ListBox
48
+
- [Tree](/docs/components/collections/tree) - For hierarchical data display
49
+
- [Table](/docs/components/collections/table) - For structured data display
+19
-19
apps/docs/src/docs/components/collections/table.mdx
+19
-19
apps/docs/src/docs/components/collections/table.mdx
···
23
23
pnpm hip install table
24
24
```
25
25
26
-
## Props
27
-
28
-
This component is built using the [React Aria Table](https://react-spectrum.adobe.com/react-aria/Table.html).
29
-
30
-
<PropDocs
31
-
components={[
32
-
"Table",
33
-
"TableHeader",
34
-
"TableBody",
35
-
"TableColumn",
36
-
"TableRow",
37
-
"TableCell",
38
-
]}
39
-
/>
40
-
41
26
## Features
42
27
43
28
### Selection
···
101
86
102
87
<Example src={Virtualization} />
103
88
89
+
## Props
90
+
91
+
This component is built using the [React Aria Table](https://react-spectrum.adobe.com/react-aria/Table.html).
92
+
93
+
<PropDocs
94
+
components={[
95
+
"Table",
96
+
"TableHeader",
97
+
"TableBody",
98
+
"TableColumn",
99
+
"TableRow",
100
+
"TableCell",
101
+
]}
102
+
/>
103
+
104
104
## Related Components
105
105
106
-
- [ListBox](/docs/components/listbox) - For selectable list data
107
-
- [Tree](/docs/components/tree) - For hierarchical data display
108
-
- [Card](/docs/components/card) - For displaying table data in cards
109
-
- [Badge](/docs/components/badge) - For status indicators in table cells
106
+
- [ListBox](/docs/components/collections/listbox) - For selectable list data
107
+
- [Tree](/docs/components/collections/tree) - For hierarchical data display
108
+
- [Card](/docs/components/content/card) - For displaying table data in cards
109
+
- [Badge](/docs/components/status/badge) - For status indicators in table cells
+10
-10
apps/docs/src/docs/components/collections/tag-group.mdx
+10
-10
apps/docs/src/docs/components/collections/tag-group.mdx
···
20
20
pnpm hip install tag-group
21
21
```
22
22
23
-
## Props
24
-
25
-
This component is built using the [React Aria TagGroup](https://react-spectrum.adobe.com/react-aria/TagGroup.html).
26
-
27
-
<PropDocs components={["TagGroup", "Tag"]} />
28
-
29
23
## Features
30
24
31
25
### Removable Tags
···
46
40
47
41
<Example src={WithError} />
48
42
43
+
## Props
44
+
45
+
This component is built using the [React Aria TagGroup](https://react-spectrum.adobe.com/react-aria/TagGroup.html).
46
+
47
+
<PropDocs components={["TagGroup", "Tag"]} />
48
+
49
49
## Related Components
50
50
51
-
- [Badge](/docs/components/badge) - For displaying status indicators
52
-
- [Label](/docs/components/label) - For form labels and descriptions
53
-
- [Button](/docs/components/button) - For actions on tags
54
-
- [Select](/docs/components/select) - For single item selection
51
+
- [Badge](/docs/components/status/badge) - For displaying status indicators
52
+
- [Label](/docs/components/form/label) - For form labels and descriptions
53
+
- [Button](/docs/components/buttons/button) - For actions on tags
54
+
- [Select](/docs/components/form/select) - For single item selection
+10
-10
apps/docs/src/docs/components/collections/tree.mdx
+10
-10
apps/docs/src/docs/components/collections/tree.mdx
···
19
19
pnpm hip install tree
20
20
```
21
21
22
-
## Props
23
-
24
-
This component is built using the [React Aria Tree](https://react-spectrum.adobe.com/react-aria/Tree.html).
25
-
26
-
<PropDocs components={["Tree", "TreeItem"]} />
27
-
28
22
## Features
29
23
30
24
### Drag and Drop
···
41
35
42
36
<Example src={Virtualization} />
43
37
38
+
## Props
39
+
40
+
This component is built using the [React Aria Tree](https://react-spectrum.adobe.com/react-aria/Tree.html).
41
+
42
+
<PropDocs components={["Tree", "TreeItem"]} />
43
+
44
44
## Related Components
45
45
46
-
- [ListBox](/docs/components/listbox) - For flat list data
47
-
- [Table](/docs/components/table) - For structured data display
48
-
- [Card](/docs/components/card) - For displaying tree data in cards
49
-
- [Menu](/docs/components/menu) - For hierarchical menu structures
46
+
- [ListBox](/docs/components/collections/listbox) - For flat list data
47
+
- [Table](/docs/components/collections/table) - For structured data display
48
+
- [Card](/docs/components/content/card) - For displaying tree data in cards
49
+
- [Menu](/docs/components/collections/menu) - For hierarchical menu structures
+8
-8
apps/docs/src/docs/components/color/color-area.mdx
+8
-8
apps/docs/src/docs/components/color/color-area.mdx
···
19
19
pnpm hip install color-area
20
20
```
21
21
22
-
## Props
23
-
24
-
This component is built using the [React Aria ColorArea](https://react-spectrum.adobe.com/react-aria/ColorArea.html).
25
-
26
-
<PropDocs components={["ColorArea"]} />
27
-
28
22
## Features
29
23
30
24
### Aspect Ratio
···
39
33
40
34
<Example src={Disabled} />
41
35
36
+
## Props
37
+
38
+
This component is built using the [React Aria ColorArea](https://react-spectrum.adobe.com/react-aria/ColorArea.html).
39
+
40
+
<PropDocs components={["ColorArea"]} />
41
+
42
42
## Related Components
43
43
44
-
- [ColorField](/docs/components/color-field) - For entering color values
45
-
- [ColorSwatch](/docs/components/color-swatch) - For displaying selected colors
44
+
- [ColorField](/docs/components/color/color-field) - For entering color values
45
+
- [ColorSwatch](/docs/components/color/color-swatch) - For displaying selected colors
+10
-10
apps/docs/src/docs/components/color/color-field.mdx
+10
-10
apps/docs/src/docs/components/color/color-field.mdx
···
21
21
pnpm hip install color-field
22
22
```
23
23
24
-
## Props
25
-
26
-
This component is built using the [React Aria ColorField](https://react-spectrum.adobe.com/react-aria/ColorField.html).
27
-
28
-
<PropDocs components={["ColorField"]} />
29
-
30
24
## Features
31
25
32
26
### Label Variant
···
50
44
51
45
<Example src={ValidationSuccess} />
52
46
47
+
## Props
48
+
49
+
This component is built using the [React Aria ColorField](https://react-spectrum.adobe.com/react-aria/ColorField.html).
50
+
51
+
<PropDocs components={["ColorField"]} />
52
+
53
53
## Related Components
54
54
55
-
- [ColorSwatch](/docs/components/color-swatch) - For displaying color values
56
-
- [TextField](/docs/components/text-field) - For general text input
57
-
- [NumberField](/docs/components/number-field) - For numeric input
58
-
- [Label](/docs/components/label) - For form labels and descriptions
55
+
- [ColorSwatch](/docs/components/color/color-swatch) - For displaying color values
56
+
- [TextField](/docs/components/form/text-field) - For general text input
57
+
- [NumberField](/docs/components/form/number-field) - For numeric input
58
+
- [Label](/docs/components/form/label) - For form labels and descriptions
+14
-14
apps/docs/src/docs/components/color/color-picker.mdx
+14
-14
apps/docs/src/docs/components/color/color-picker.mdx
···
23
23
pnpm hip install color-picker
24
24
```
25
25
26
-
## Props
27
-
28
-
This component is built using the React Aria ColorPicker.
29
-
See the official guide for full behavior and API details.
30
-
31
-
- Docs: [React Aria ColorPicker](https://react-spectrum.adobe.com/react-aria/ColorPicker.html#reusable-wrappers)
32
-
33
-
<PropDocs components={["ColorPicker", "DefaultColorEditor"]} />
34
-
35
-
## Examples
26
+
## Features
36
27
37
28
### Default Editor
38
29
···
58
49
59
50
<Example src={AlphaChannel} />
60
51
52
+
## Props
53
+
54
+
This component is built using the React Aria ColorPicker.
55
+
See the official guide for full behavior and API details.
56
+
57
+
- Docs: [React Aria ColorPicker](https://react-spectrum.adobe.com/react-aria/ColorPicker.html#reusable-wrappers)
58
+
59
+
<PropDocs components={["ColorPicker", "DefaultColorEditor"]} />
60
+
61
61
## Related Components
62
62
63
-
- [ColorArea](/docs/components/color-area)
64
-
- [ColorSlider](/docs/components/color-slider)
65
-
- [ColorField](/docs/components/color-field)
66
-
- [ColorSwatchPicker](/docs/components/color-swatch-picker)
63
+
- [ColorArea](/docs/components/color/color-area)
64
+
- [ColorSlider](/docs/components/color/color-slider)
65
+
- [ColorField](/docs/components/color/color-field)
66
+
- [ColorSwatchPicker](/docs/components/color/color-swatch-picker)
+9
-9
apps/docs/src/docs/components/color/color-slider.mdx
+9
-9
apps/docs/src/docs/components/color/color-slider.mdx
···
21
21
pnpm hip install color-slider
22
22
```
23
23
24
-
## Props
25
-
26
-
This component is built using the [React Aria ColorSlider](https://react-spectrum.adobe.com/react-aria/ColorSlider.html).
27
-
28
-
<PropDocs components={["ColorSlider"]} />
29
-
30
24
## Features
31
25
32
26
### Channels
···
53
47
54
48
<Example src={Size} />
55
49
50
+
## Props
51
+
52
+
This component is built using the [React Aria ColorSlider](https://react-spectrum.adobe.com/react-aria/ColorSlider.html).
53
+
54
+
<PropDocs components={["ColorSlider"]} />
55
+
56
56
## Related Components
57
57
58
-
- [ColorArea](/docs/components/color-area) - 2D color selection
59
-
- [ColorField](/docs/components/color-field) - Entering color values
60
-
- [Slider](/docs/components/slider) - Generic numeric slider
58
+
- [ColorArea](/docs/components/color/color-area) - 2D color selection
59
+
- [ColorField](/docs/components/color/color-field) - Entering color values
60
+
- [Slider](/docs/components/form/slider) - Generic numeric slider
+9
-9
apps/docs/src/docs/components/color/color-swatch-picker.mdx
+9
-9
apps/docs/src/docs/components/color/color-swatch-picker.mdx
···
19
19
pnpm hip install color-swatch-picker
20
20
```
21
21
22
-
## Props
23
-
24
-
This component is built using [React Aria ColorSwatchPicker](https://react-spectrum.adobe.com/react-aria/ColorSwatchPicker.html).
25
-
26
-
<PropDocs components={["ColorSwatchPicker", "ColorSwatchPickerItem"]} />
27
-
28
22
## Features
29
23
30
24
### Size
···
39
33
40
34
<Example src={Layout} />
41
35
36
+
## Props
37
+
38
+
This component is built using [React Aria ColorSwatchPicker](https://react-spectrum.adobe.com/react-aria/ColorSwatchPicker.html).
39
+
40
+
<PropDocs components={["ColorSwatchPicker", "ColorSwatchPickerItem"]} />
41
+
42
42
## Related Components
43
43
44
-
- [ColorSwatch](/docs/components/color-swatch) - For individual color previews
45
-
- [ColorField](/docs/components/color-field) - For color input
46
-
- [Grid](/docs/components/grid) - For arranging swatches
44
+
- [ColorSwatch](/docs/components/color/color-swatch) - For individual color previews
45
+
- [ColorField](/docs/components/color/color-field) - For color input
46
+
- [Grid](/docs/components/layout/grid) - For arranging swatches
+10
-10
apps/docs/src/docs/components/color/color-swatch.mdx
+10
-10
apps/docs/src/docs/components/color/color-swatch.mdx
···
18
18
pnpm hip install color-swatch
19
19
```
20
20
21
-
## Props
22
-
23
-
This component is built using the [React Aria ColorSwatch](https://react-spectrum.adobe.com/react-aria/ColorSwatch.html).
24
-
25
-
<PropDocs components={["ColorSwatch"]} />
26
-
27
21
## Features
28
22
29
23
### Size
···
32
26
33
27
<Example src={Size} />
34
28
29
+
## Props
30
+
31
+
This component is built using the [React Aria ColorSwatch](https://react-spectrum.adobe.com/react-aria/ColorSwatch.html).
32
+
33
+
<PropDocs components={["ColorSwatch"]} />
34
+
35
35
## Related Components
36
36
37
-
- [ColorField](/docs/components/color-field) - For color input with color swatches
38
-
- [Card](/docs/components/card) - For displaying color swatches in cards
39
-
- [Grid](/docs/components/grid) - For organizing color swatches in grids
40
-
- [Button](/docs/components/button) - For interactive color swatches
37
+
- [ColorField](/docs/components/color/color-field) - For color input with color swatches
38
+
- [Card](/docs/components/content/card) - For displaying color swatches in cards
39
+
- [Grid](/docs/components/layout/grid) - For organizing color swatches in grids
40
+
- [Button](/docs/components/buttons/button) - For interactive color swatches
+9
-9
apps/docs/src/docs/components/color/color-wheel.mdx
+9
-9
apps/docs/src/docs/components/color/color-wheel.mdx
···
19
19
pnpm hip install color-wheel
20
20
```
21
21
22
-
## Props
23
-
24
-
This component is built using the [React Aria ColorWheel](https://react-spectrum.adobe.com/react-aria/ColorWheel.html).
25
-
26
-
<PropDocs components={["ColorWheel"]} />
27
-
28
22
## Features
29
23
30
24
### Sizes
···
39
33
40
34
<Example src={Disabled} />
41
35
36
+
## Props
37
+
38
+
This component is built using the [React Aria ColorWheel](https://react-spectrum.adobe.com/react-aria/ColorWheel.html).
39
+
40
+
<PropDocs components={["ColorWheel"]} />
41
+
42
42
## Related Components
43
43
44
-
- [ColorSlider](/docs/components/color-slider) - 1D channel adjustment
45
-
- [ColorArea](/docs/components/color-area) - 2D color selection
46
-
- [ColorField](/docs/components/color-field) - Entering color values
44
+
- [ColorSlider](/docs/components/color/color-slider) - 1D channel adjustment
45
+
- [ColorArea](/docs/components/color/color-area) - 2D color selection
46
+
- [ColorField](/docs/components/color/color-field) - Entering color values
+10
-10
apps/docs/src/docs/components/content/aspect-ratio.mdx
+10
-10
apps/docs/src/docs/components/content/aspect-ratio.mdx
···
18
18
pnpm hip install aspect-ratio
19
19
```
20
20
21
-
## Props
22
-
23
-
This is a custom component built for setting aspect ratios.
24
-
25
-
<PropDocs components={["AspectRatio", "AspectRatioImage"]} />
26
-
27
21
## Features
28
22
29
23
### No Image
···
32
26
33
27
<Example src={NoImage} />
34
28
29
+
## Props
30
+
31
+
This is a custom component built for setting aspect ratios.
32
+
33
+
<PropDocs components={["AspectRatio", "AspectRatioImage"]} />
34
+
35
35
## Related Components
36
36
37
-
- [Card](/docs/components/card) - For cards with aspect ratio images
38
-
- [Grid](/docs/components/grid) - For grid layouts with aspect ratio items
39
-
- [Flex](/docs/components/flex) - For flex layouts with aspect ratio items
40
-
- [Avatar](/docs/components/avatar) - For user avatars with consistent aspect ratios
37
+
- [Card](/docs/components/content/card) - For cards with aspect ratio images
38
+
- [Grid](/docs/components/layout/grid) - For grid layouts with aspect ratio items
39
+
- [Flex](/docs/components/layout/flex) - For flex layouts with aspect ratio items
40
+
- [Avatar](/docs/components/content/avatar) - For user avatars with consistent aspect ratios
+10
-10
apps/docs/src/docs/components/content/avatar.mdx
+10
-10
apps/docs/src/docs/components/content/avatar.mdx
···
21
21
pnpm hip install avatar
22
22
```
23
23
24
-
## Props
25
-
26
-
This is a custom component built for user representation.
27
-
28
-
<PropDocs components={["Avatar"]} />
29
-
30
24
## Features
31
25
32
26
### Sizes
···
53
47
54
48
<Example src={AvatarButtonExample} />
55
49
50
+
## Props
51
+
52
+
This is a custom component built for user representation.
53
+
54
+
<PropDocs components={["Avatar"]} />
55
+
56
56
## Related Components
57
57
58
-
- [Badge](/docs/components/badge) - For status indicators on avatars
59
-
- [Card](/docs/components/card) - For cards with user avatars
60
-
- [AspectRatio](/docs/components/aspect-ratio) - For maintaining avatar aspect ratios
61
-
- [Typography](/docs/components/typography) - For text alongside avatars
58
+
- [Badge](/docs/components/status/badge) - For status indicators on avatars
59
+
- [Card](/docs/components/content/card) - For cards with user avatars
60
+
- [AspectRatio](/docs/components/content/aspect-ratio) - For maintaining avatar aspect ratios
61
+
- [Typography](/docs/components/content/typography) - For text alongside avatars
+21
-21
apps/docs/src/docs/components/content/card.mdx
+21
-21
apps/docs/src/docs/components/content/card.mdx
···
21
21
pnpm hip install card
22
22
```
23
23
24
-
## Props
25
-
26
-
This is a custom component built for grouping related content.
27
-
28
-
<PropDocs
29
-
components={[
30
-
"Card",
31
-
"CardHeader",
32
-
"CardTitle",
33
-
"CardDescription",
34
-
"CardHeaderAction",
35
-
"CardBody",
36
-
"CardFooter",
37
-
"CardImage",
38
-
]}
39
-
/>
40
-
41
24
## Features
42
25
43
26
### With Image
···
64
47
65
48
<Example src={CardSizes} />
66
49
50
+
## Props
51
+
52
+
This is a custom component built for grouping related content.
53
+
54
+
<PropDocs
55
+
components={[
56
+
"Card",
57
+
"CardHeader",
58
+
"CardTitle",
59
+
"CardDescription",
60
+
"CardHeaderAction",
61
+
"CardBody",
62
+
"CardFooter",
63
+
"CardImage",
64
+
]}
65
+
/>
66
+
67
67
## Related Components
68
68
69
-
- [Table](/docs/components/table) - For structured data display
70
-
- [Badge](/docs/components/badge) - For status indicators in cards
71
-
- [Button](/docs/components/button) - For card actions
72
-
- [AspectRatio](/docs/components/aspect-ratio) - For card images
69
+
- [Table](/docs/components/collections/table) - For structured data display
70
+
- [Badge](/docs/components/status/badge) - For status indicators in cards
71
+
- [Button](/docs/components/buttons/button) - For card actions
72
+
- [AspectRatio](/docs/components/content/aspect-ratio) - For card images
+4
-4
apps/docs/src/docs/components/content/content.mdx
+4
-4
apps/docs/src/docs/components/content/content.mdx
···
19
19
pnpm hip install content
20
20
```
21
21
22
-
## Props
23
-
24
-
<PropDocs components={["Content"]} />
25
-
26
22
## Features
27
23
28
24
### Automatic Spacing
···
45
41
Blockquotes receive special styling with proper indentation and spacing:
46
42
47
43
<Example src={WithBlockquote} />
44
+
45
+
## Props
46
+
47
+
<PropDocs components={["Content"]} />
48
48
49
49
## Related Components
50
50
+9
-9
apps/docs/src/docs/components/content/editable-text.mdx
+9
-9
apps/docs/src/docs/components/content/editable-text.mdx
···
18
18
pnpm hip install editable-text
19
19
```
20
20
21
-
## Props
22
-
23
-
This component is built using [React Aria Components](https://react-spectrum.adobe.com/react-aria/).
24
-
25
-
<PropDocs components={["EditableText"]} />
26
-
27
21
## Features
28
22
29
23
### Composition
···
32
26
33
27
<Example src={Composition} />
34
28
29
+
## Props
30
+
31
+
This component is built using [React Aria Components](https://react-spectrum.adobe.com/react-aria/).
32
+
33
+
<PropDocs components={["EditableText"]} />
34
+
35
35
## Related Components
36
36
37
-
- [TextField](/docs/components/text-field) - For standard text input fields
38
-
- [TextArea](/docs/components/text-area) - For multi-line text input
39
-
- [Text](/docs/components/text) - For displaying static text
37
+
- [TextField](/docs/components/form/text-field) - For standard text input fields
38
+
- [TextArea](/docs/components/form/text-area) - For multi-line text input
39
+
- [Text](/docs/components/content/text) - For displaying static text
+17
-17
apps/docs/src/docs/components/content/empty-state.mdx
+17
-17
apps/docs/src/docs/components/content/empty-state.mdx
···
19
19
pnpm hip install empty-state
20
20
```
21
21
22
-
## Props
23
-
24
-
This is a custom component built for displaying empty states.
25
-
26
-
<PropDocs
27
-
components={[
28
-
"EmptyState",
29
-
"EmptyStateImage",
30
-
"EmptyStateTitle",
31
-
"EmptyStateDescription",
32
-
"EmptyStateActions",
33
-
]}
34
-
/>
35
-
36
22
## Features
37
23
38
24
### With Actions
···
47
33
48
34
<Example src={Sizes} />
49
35
36
+
## Props
37
+
38
+
This is a custom component built for displaying empty states.
39
+
40
+
<PropDocs
41
+
components={[
42
+
"EmptyState",
43
+
"EmptyStateImage",
44
+
"EmptyStateTitle",
45
+
"EmptyStateDescription",
46
+
"EmptyStateActions",
47
+
]}
48
+
/>
49
+
50
50
## Related Components
51
51
52
-
- [Card](/docs/components/card) - For grouping related content
53
-
- [Button](/docs/components/button) - For empty state actions
54
-
- [Text](/docs/components/text) - For custom text styling
52
+
- [Card](/docs/components/content/card) - For grouping related content
53
+
- [Button](/docs/components/buttons/button) - For empty state actions
54
+
- [Text](/docs/components/content/text) - For custom text styling
+11
-11
apps/docs/src/docs/components/content/image-cropper.mdx
+11
-11
apps/docs/src/docs/components/content/image-cropper.mdx
···
19
19
pnpm hip install image-cropper
20
20
```
21
21
22
-
## Props
23
-
24
-
<PropDocs
25
-
components={[
26
-
"ImageCropperRoot",
27
-
"ImageCropperImage",
28
-
"ImageCropperCropArea",
29
-
"ImageCropperDescription",
30
-
]}
31
-
/>
32
-
33
22
## Example
34
23
35
24
### Blob Data
···
52
41
- **Required Description**: The `ImageCropper.Description` component is required for screen reader users
53
42
- **ARIA Attributes**: Automatically includes proper ARIA attributes
54
43
- **Keyboard Support**: Full keyboard navigation support
44
+
45
+
## Props
46
+
47
+
<PropDocs
48
+
components={[
49
+
"ImageCropperRoot",
50
+
"ImageCropperImage",
51
+
"ImageCropperCropArea",
52
+
"ImageCropperDescription",
53
+
]}
54
+
/>
55
55
56
56
## Related Components
57
57
+5
-5
apps/docs/src/docs/components/content/kbd.mdx
+5
-5
apps/docs/src/docs/components/content/kbd.mdx
···
20
20
pnpm hip install kbd
21
21
```
22
22
23
-
## Props
24
-
25
-
<PropDocs components={["Kbd"]} />
26
-
27
23
## Features
28
24
29
25
### Shortcuts
···
60
56
- `ArrowDown` - Shows ↓
61
57
- `Plus` - Shows +
62
58
59
+
## Props
60
+
61
+
<PropDocs components={["Kbd"]} />
62
+
63
63
## Related Components
64
64
65
-
- [Text](/docs/components/text) - For text content around keyboard shortcuts
65
+
- [Text](/docs/components/content/text) - For text content around keyboard shortcuts
+6
-6
apps/docs/src/docs/components/content/markdown-content.mdx
+6
-6
apps/docs/src/docs/components/content/markdown-content.mdx
···
17
17
pnpm hip install markdown-content
18
18
```
19
19
20
-
## Props
21
-
22
-
<PropDocs components={["MarkdownContent"]} />
23
-
24
20
## Features
25
21
26
22
### GitHub-Flavored Markdown
···
31
27
32
28
Content is sanitized via rehype-sanitize to prevent XSS attacks.
33
29
30
+
## Props
31
+
32
+
<PropDocs components={["MarkdownContent"]} />
33
+
34
34
## Related Components
35
35
36
36
- [Typography](/docs/components/content/typography) - For semantic typography components
37
-
- [Link](/docs/components/link) - For links within markdown
38
-
- [Content](/docs/components/content) - For consistent content spacing
37
+
- [Link](/docs/components/navigation/link) - For links within markdown
38
+
- [Content](/docs/components/content/content) - For consistent content spacing
+10
-10
apps/docs/src/docs/components/content/separator.mdx
+10
-10
apps/docs/src/docs/components/content/separator.mdx
···
18
18
pnpm hip install separator
19
19
```
20
20
21
-
## Props
22
-
23
-
This component is built using the [React Aria Separator](https://react-spectrum.adobe.com/react-aria/useSeparator.html#useseparator).
24
-
25
-
<PropDocs components={["Separator"]} />
26
-
27
21
## Features
28
22
29
23
### Orientation
···
32
26
33
27
<Example src={SeparatorOrientation} />
34
28
29
+
## Props
30
+
31
+
This component is built using the [React Aria Separator](https://react-spectrum.adobe.com/react-aria/useSeparator.html#useseparator).
32
+
33
+
<PropDocs components={["Separator"]} />
34
+
35
35
## Related Components
36
36
37
-
- [Flex](/docs/components/flex) - For layouts that use separators
38
-
- [Card](/docs/components/card) - For cards that use separators
39
-
- [Menu](/docs/components/menu) - For menu items with separators
40
-
- [Typography](/docs/components/typography) - For text sections with separators
37
+
- [Flex](/docs/components/layout/flex) - For layouts that use separators
38
+
- [Card](/docs/components/content/card) - For cards that use separators
39
+
- [Menu](/docs/components/collections/menu) - For menu items with separators
40
+
- [Typography](/docs/components/content/typography) - For text sections with separators
+7
-7
apps/docs/src/docs/components/content/text.mdx
+7
-7
apps/docs/src/docs/components/content/text.mdx
···
21
21
pnpm hip install typography
22
22
```
23
23
24
-
## Props
25
-
26
-
<PropDocs components={["Text"]} />
27
-
28
24
## Features
29
25
30
26
### Tokens
···
53
49
54
50
<Example src={TextStrikethrough} />
55
51
52
+
## Props
53
+
54
+
<PropDocs components={["Text"]} />
55
+
56
56
## Related Components
57
57
58
-
- [Typography](/docs/components/typography) - For semantic typography components
59
-
- [Label](/docs/components/label) - For form labels
60
-
- [Link](/docs/components/link) - For text links
58
+
- [Typography](/docs/components/content/typography) - For semantic typography components
59
+
- [Label](/docs/components/form/label) - For form labels
60
+
- [Link](/docs/components/navigation/link) - For text links
+29
-29
apps/docs/src/docs/components/content/typography.mdx
+29
-29
apps/docs/src/docs/components/content/typography.mdx
···
30
30
pnpm hip install typography
31
31
```
32
32
33
-
## Props
34
-
35
-
This is a custom component collection built for typography.
36
-
37
-
<PropDocs
38
-
components={[
39
-
"Heading1",
40
-
"Heading2",
41
-
"Heading3",
42
-
"Heading4",
43
-
"Heading5",
44
-
"Body",
45
-
"SmallBody",
46
-
"LabelText",
47
-
"SubLabel",
48
-
"Blockquote",
49
-
"UnorderedList",
50
-
"OrderedList",
51
-
"ListItem",
52
-
"InlineCode",
53
-
"Pre",
54
-
"LinkedHeading",
55
-
]}
56
-
/>
57
-
58
33
## Typeramp
59
34
60
35
The typeramp is a composed system that combines individual tokens into semantic text styles.
···
112
87
113
88
<Example src={LinkedHeadingExample} />
114
89
90
+
## Props
91
+
92
+
This is a custom component collection built for typography.
93
+
94
+
<PropDocs
95
+
components={[
96
+
"Heading1",
97
+
"Heading2",
98
+
"Heading3",
99
+
"Heading4",
100
+
"Heading5",
101
+
"Body",
102
+
"SmallBody",
103
+
"LabelText",
104
+
"SubLabel",
105
+
"Blockquote",
106
+
"UnorderedList",
107
+
"OrderedList",
108
+
"ListItem",
109
+
"InlineCode",
110
+
"Pre",
111
+
"LinkedHeading",
112
+
]}
113
+
/>
114
+
115
115
## Related Components
116
116
117
-
- [Link](/docs/components/link) - For text links within typography
118
-
- [Badge](/docs/components/badge) - For status indicators in text
119
-
- [Card](/docs/components/card) - For containing typography content
120
-
- [Label](/docs/components/label) - For form labels and descriptions
117
+
- [Link](/docs/components/navigation/link) - For text links within typography
118
+
- [Badge](/docs/components/status/badge) - For status indicators in text
119
+
- [Card](/docs/components/content/card) - For containing typography content
120
+
- [Label](/docs/components/form/label) - For form labels and descriptions
+12
-12
apps/docs/src/docs/components/date-and-time/calendar.mdx
+12
-12
apps/docs/src/docs/components/date-and-time/calendar.mdx
···
22
22
pnpm hip install calendar
23
23
```
24
24
25
-
## Props
26
-
27
-
This component is built using the React Aria Calendar.
28
-
See the official guide for full behavior and API details.
29
-
30
-
- Docs: [React Aria Calendar](https://react-spectrum.adobe.com/react-aria/Calendar.html#reusable-wrappers)
31
-
32
-
<PropDocs components={["Calendar"]} />
33
-
34
-
## Examples
25
+
## Features
35
26
36
27
### Default
37
28
···
51
42
52
43
<Example src={MultipleMonths} />
53
44
45
+
## Props
46
+
47
+
This component is built using the React Aria Calendar.
48
+
See the official guide for full behavior and API details.
49
+
50
+
- Docs: [React Aria Calendar](https://react-spectrum.adobe.com/react-aria/Calendar.html#reusable-wrappers)
51
+
52
+
<PropDocs components={["Calendar"]} />
53
+
54
54
## Related Components
55
55
56
-
- [DatePicker](/docs/components/date-picker) - For date input
57
-
- [DateRangePicker](/docs/components/date-range-picker) - For date range input
56
+
- [DatePicker](/docs/components/date-and-time/date-picker) - For date input
57
+
- [DateRangePicker](/docs/components/date-and-time/date-range-picker) - For date range input
58
58
- [DateRangeInput](/docs/components/date-range-input) - For date range input
+10
-10
apps/docs/src/docs/components/date-and-time/date-field.mdx
+10
-10
apps/docs/src/docs/components/date-and-time/date-field.mdx
···
21
21
pnpm hip install date-field
22
22
```
23
23
24
-
## Props
25
-
26
-
This component is built using the [React Aria DateField](https://react-spectrum.adobe.com/react-aria/DateField.html).
27
-
28
-
<PropDocs components={["DateField"]} />
29
-
30
24
## Features
31
25
32
26
### Label Variant
···
50
44
51
45
<Example src={ValidationSuccess} />
52
46
47
+
## Props
48
+
49
+
This component is built using the [React Aria DateField](https://react-spectrum.adobe.com/react-aria/DateField.html).
50
+
51
+
<PropDocs components={["DateField"]} />
52
+
53
53
## Related Components
54
54
55
-
- [TimeField](/docs/components/time-field) - For time input
56
-
- [TextField](/docs/components/text-field) - For general text input
57
-
- [NumberField](/docs/components/number-field) - For numeric input
58
-
- [Label](/docs/components/label) - For form labels and descriptions
55
+
- [TimeField](/docs/components/date-and-time/time-field) - For time input
56
+
- [TextField](/docs/components/form/text-field) - For general text input
57
+
- [NumberField](/docs/components/form/number-field) - For numeric input
58
+
- [Label](/docs/components/form/label) - For form labels and descriptions
+11
-11
apps/docs/src/docs/components/date-and-time/date-picker.mdx
+11
-11
apps/docs/src/docs/components/date-and-time/date-picker.mdx
···
21
21
pnpm hip install date-picker
22
22
```
23
23
24
-
## Props
25
-
26
-
This component is built using the [React Aria DatePicker](https://react-spectrum.adobe.com/react-aria/DatePicker.html).
27
-
28
-
<PropDocs components={["DatePicker"]} />
29
-
30
24
## Features
31
25
32
26
### Label Variant
···
50
44
51
45
<Example src={ValidationSuccess} />
52
46
47
+
## Props
48
+
49
+
This component is built using the [React Aria DatePicker](https://react-spectrum.adobe.com/react-aria/DatePicker.html).
50
+
51
+
<PropDocs components={["DatePicker"]} />
52
+
53
53
## Related Components
54
54
55
-
- [DateField](/docs/components/date-field) - For date input without popover
56
-
- [Calendar](/docs/components/calendar) - For standalone calendar display
57
-
- [RangeCalendar](/docs/components/range-calendar) - For date range selection
58
-
- [TimeField](/docs/components/time-field) - For time input
59
-
- [Label](/docs/components/label) - For form labels and descriptions
55
+
- [DateField](/docs/components/date-and-time/date-field) - For date input without popover
56
+
- [Calendar](/docs/components/date-and-time/calendar) - For standalone calendar display
57
+
- [RangeCalendar](/docs/components/date-and-time/range-calendar) - For date range selection
58
+
- [TimeField](/docs/components/date-and-time/time-field) - For time input
59
+
- [Label](/docs/components/form/label) - For form labels and descriptions
+11
-11
apps/docs/src/docs/components/date-and-time/date-range-picker.mdx
+11
-11
apps/docs/src/docs/components/date-and-time/date-range-picker.mdx
···
21
21
pnpm hip install date-range-picker
22
22
```
23
23
24
-
## Props
25
-
26
-
This component is built using the [React Aria DateRangePicker](https://react-spectrum.adobe.com/react-aria/DateRangePicker.html).
27
-
28
-
<PropDocs components={["DateRangePicker"]} />
29
-
30
24
## Features
31
25
32
26
### Label Variant
···
50
44
51
45
<Example src={ValidationSuccess} />
52
46
47
+
## Props
48
+
49
+
This component is built using the [React Aria DateRangePicker](https://react-spectrum.adobe.com/react-aria/DateRangePicker.html).
50
+
51
+
<PropDocs components={["DateRangePicker"]} />
52
+
53
53
## Related Components
54
54
55
-
- [DatePicker](/docs/components/date-picker) - For single date selection
56
-
- [RangeCalendar](/docs/components/range-calendar) - For standalone range calendar display
57
-
- [DateField](/docs/components/date-field) - For date input without popover
58
-
- [TimeField](/docs/components/time-field) - For time input
59
-
- [Label](/docs/components/label) - For form labels and descriptions
55
+
- [DatePicker](/docs/components/date-and-time/date-picker) - For single date selection
56
+
- [RangeCalendar](/docs/components/date-and-time/range-calendar) - For standalone range calendar display
57
+
- [DateField](/docs/components/date-and-time/date-field) - For date input without popover
58
+
- [TimeField](/docs/components/date-and-time/time-field) - For time input
59
+
- [Label](/docs/components/form/label) - For form labels and descriptions
+13
-13
apps/docs/src/docs/components/date-and-time/range-calendar.mdx
+13
-13
apps/docs/src/docs/components/date-and-time/range-calendar.mdx
···
22
22
pnpm hip install range-calendar
23
23
```
24
24
25
-
## Props
26
-
27
-
This component is built using the React Aria RangeCalendar.
28
-
See the official guide for full behavior and API details.
29
-
30
-
- Docs: [React Aria RangeCalendar](https://react-spectrum.adobe.com/react-aria/RangeCalendar.html#reusable-wrappers)
31
-
32
-
<PropDocs components={["RangeCalendar"]} />
33
-
34
-
## Examples
25
+
## Features
35
26
36
27
### Unavailable Dates
37
28
···
45
36
46
37
<Example src={MultipleMonthsRange} />
47
38
39
+
## Props
40
+
41
+
This component is built using the React Aria RangeCalendar.
42
+
See the official guide for full behavior and API details.
43
+
44
+
- Docs: [React Aria RangeCalendar](https://react-spectrum.adobe.com/react-aria/RangeCalendar.html#reusable-wrappers)
45
+
46
+
<PropDocs components={["RangeCalendar"]} />
47
+
48
48
## Related Components
49
49
50
-
- [DateRangePicker](/docs/components/date-range-picker)
51
-
- [Calendar](/docs/components/calendar)
52
-
- [DateField](/docs/components/date-field)
50
+
- [DateRangePicker](/docs/components/date-and-time/date-range-picker)
51
+
- [Calendar](/docs/components/date-and-time/calendar)
52
+
- [DateField](/docs/components/date-and-time/date-field)
53
53
- [DateRangeField](/docs/components/date-range-field)
+4
-4
apps/docs/src/docs/components/date-and-time/time-field.mdx
+4
-4
apps/docs/src/docs/components/date-and-time/time-field.mdx
···
80
80
81
81
## Related Components
82
82
83
-
- [DateField](/docs/components/date-field) - For date input
84
-
- [TextField](/docs/components/text-field) - For general text input
85
-
- [NumberField](/docs/components/number-field) - For numeric input
86
-
- [Label](/docs/components/label) - For form labels and descriptions
83
+
- [DateField](/docs/components/date-and-time/date-field) - For date input
84
+
- [TextField](/docs/components/form/text-field) - For general text input
85
+
- [NumberField](/docs/components/form/number-field) - For numeric input
86
+
- [Label](/docs/components/form/label) - For form labels and descriptions
+10
-10
apps/docs/src/docs/components/form/checkbox.mdx
+10
-10
apps/docs/src/docs/components/form/checkbox.mdx
···
19
19
pnpm hip install checkbox
20
20
```
21
21
22
-
## Props
23
-
24
-
This component is built using the [React Aria Checkbox](https://react-spectrum.adobe.com/react-aria/Checkbox.html).
25
-
26
-
<PropDocs components={["Checkbox", "CheckboxGroup"]} />
27
-
28
22
## Features
29
23
30
24
### States
···
39
33
40
34
<Example src={CheckboxWithDescription} />
41
35
36
+
## Props
37
+
38
+
This component is built using the [React Aria Checkbox](https://react-spectrum.adobe.com/react-aria/Checkbox.html).
39
+
40
+
<PropDocs components={["Checkbox", "CheckboxGroup"]} />
41
+
42
42
## Related Components
43
43
44
-
- [Radio](/docs/components/radio) - For single selection from multiple options
45
-
- [Switch](/docs/components/switch) - For binary toggle choices
46
-
- [Select](/docs/components/select) - For dropdown selection
47
-
- [Label](/docs/components/label) - For form labels and descriptions
44
+
- [Radio](/docs/components/form/radio) - For single selection from multiple options
45
+
- [Switch](/docs/components/form/switch) - For binary toggle choices
46
+
- [Select](/docs/components/form/select) - For dropdown selection
47
+
- [Label](/docs/components/form/label) - For form labels and descriptions
+18
-18
apps/docs/src/docs/components/form/combobox.mdx
+18
-18
apps/docs/src/docs/components/form/combobox.mdx
···
22
22
pnpm hip install combobox
23
23
```
24
24
25
-
## Props
26
-
27
-
This component is built using the [React Aria ComboBox](https://react-spectrum.adobe.com/react-aria/ComboBox.html).
28
-
29
-
<PropDocs
30
-
components={[
31
-
"ComboBox",
32
-
"ComboBoxItem",
33
-
"ComboBoxSection",
34
-
"ComboBoxSectionHeader",
35
-
"ComboBoxSeparator",
36
-
]}
37
-
/>
38
-
39
25
## Features
40
26
41
27
### Label Variant
···
66
52
67
53
<Example src={Virtualization} />
68
54
55
+
## Props
56
+
57
+
This component is built using the [React Aria ComboBox](https://react-spectrum.adobe.com/react-aria/ComboBox.html).
58
+
59
+
<PropDocs
60
+
components={[
61
+
"ComboBox",
62
+
"ComboBoxItem",
63
+
"ComboBoxSection",
64
+
"ComboBoxSectionHeader",
65
+
"ComboBoxSeparator",
66
+
]}
67
+
/>
68
+
69
69
## Related Components
70
70
71
-
- [Select](/docs/components/select) - For dropdown selection without search
71
+
- [Select](/docs/components/form/select) - For dropdown selection without search
72
72
- [AutocompleteInput](/docs/components/form/autocomplete) - For text input with suggestions
73
-
- [SearchField](/docs/components/search-field) - For search input with clear button
74
-
- [TextField](/docs/components/text-field) - For general text input
75
-
- [Label](/docs/components/label) - For form labels and descriptions
73
+
- [SearchField](/docs/components/form/search-field) - For search input with clear button
74
+
- [TextField](/docs/components/form/text-field) - For general text input
75
+
- [Label](/docs/components/form/label) - For form labels and descriptions
+10
-10
apps/docs/src/docs/components/form/file-drop-zone.mdx
+10
-10
apps/docs/src/docs/components/form/file-drop-zone.mdx
···
18
18
pnpm hip install file-drop-zone
19
19
```
20
20
21
-
## Props
22
-
23
-
This component is built using the [React Aria DropZone](https://react-spectrum.adobe.com/react-aria/DropZone.html) and [React Aria FileTrigger](https://react-spectrum.adobe.com/react-spectrum/FileTrigger.html#filetrigger).
24
-
25
-
<PropDocs components={["FileDropZone"]} />
26
-
27
21
## Features
28
22
29
23
### Default Trigger
···
32
26
33
27
<Example src={DefaultTrigger} />
34
28
29
+
## Props
30
+
31
+
This component is built using the [React Aria DropZone](https://react-spectrum.adobe.com/react-aria/DropZone.html) and [React Aria FileTrigger](https://react-spectrum.adobe.com/react-spectrum/FileTrigger.html#filetrigger).
32
+
33
+
<PropDocs components={["FileDropZone"]} />
34
+
35
35
## Related Components
36
36
37
-
- [Button](/docs/components/button) - For file upload triggers
38
-
- [Card](/docs/components/card) - For containing file drop zones
39
-
- [Badge](/docs/components/badge) - For file upload status indicators
40
-
- [Typography](/docs/components/typography) - For file upload instructions
37
+
- [Button](/docs/components/buttons/button) - For file upload triggers
38
+
- [Card](/docs/components/content/card) - For containing file drop zones
39
+
- [Badge](/docs/components/status/badge) - For file upload status indicators
40
+
- [Typography](/docs/components/content/typography) - For file upload instructions
+13
-13
apps/docs/src/docs/components/form/form.mdx
+13
-13
apps/docs/src/docs/components/form/form.mdx
···
19
19
pnpm hip install form
20
20
```
21
21
22
-
## Props
23
-
24
-
This component is built using [React Aria Form](https://react-spectrum.adobe.com/react-aria/Form.html).
25
-
26
-
<PropDocs components={["Form"]} />
27
-
28
22
## Features
29
23
30
24
### Server-Side Validation
···
39
33
40
34
<Example src={WithSubmitAndReset} />
41
35
36
+
## Props
37
+
38
+
This component is built using [React Aria Form](https://react-spectrum.adobe.com/react-aria/Form.html).
39
+
40
+
<PropDocs components={["Form"]} />
41
+
42
42
## Related Components
43
43
44
-
- [TextField](/docs/components/text-field) - For text input fields in forms
45
-
- [NumberField](/docs/components/number-field) - For numeric input fields in forms
46
-
- [TextArea](/docs/components/text-area) - For multi-line text input in forms
47
-
- [Select](/docs/components/select) - For dropdown selection in forms
48
-
- [Checkbox](/docs/components/checkbox) - For checkbox inputs in forms
49
-
- [Radio](/docs/components/radio) - For radio button inputs in forms
50
-
- [Button](/docs/components/button) - For submit and reset buttons in forms
44
+
- [TextField](/docs/components/form/text-field) - For text input fields in forms
45
+
- [NumberField](/docs/components/form/number-field) - For numeric input fields in forms
46
+
- [TextArea](/docs/components/form/text-area) - For multi-line text input in forms
47
+
- [Select](/docs/components/form/select) - For dropdown selection in forms
48
+
- [Checkbox](/docs/components/form/checkbox) - For checkbox inputs in forms
49
+
- [Radio](/docs/components/form/radio) - For radio button inputs in forms
50
+
- [Button](/docs/components/buttons/button) - For submit and reset buttons in forms
+10
-10
apps/docs/src/docs/components/form/label.mdx
+10
-10
apps/docs/src/docs/components/form/label.mdx
···
18
18
pnpm hip install label
19
19
```
20
20
21
-
## Props
22
-
23
-
This component is built using the [React Aria Label](https://react-spectrum.adobe.com/react-aria/Label.html).
24
-
25
-
<PropDocs components={["Label", "Description"]} />
26
-
27
21
## Features
28
22
29
23
### Sizes
···
32
26
33
27
<Example src={LabelSizes} />
34
28
29
+
## Props
30
+
31
+
This component is built using the [React Aria Label](https://react-spectrum.adobe.com/react-aria/Label.html).
32
+
33
+
<PropDocs components={["Label", "Description"]} />
34
+
35
35
## Related Components
36
36
37
-
- [TextField](/docs/components/text-field) - Form inputs that use labels
38
-
- [Checkbox](/docs/components/checkbox) - Form controls that use labels
39
-
- [Radio](/docs/components/radio) - Form controls that use labels
40
-
- [Switch](/docs/components/switch) - Form controls that use labels
37
+
- [TextField](/docs/components/form/text-field) - Form inputs that use labels
38
+
- [Checkbox](/docs/components/form/checkbox) - Form controls that use labels
39
+
- [Radio](/docs/components/form/radio) - Form controls that use labels
40
+
- [Switch](/docs/components/form/switch) - Form controls that use labels
+10
-10
apps/docs/src/docs/components/form/number-field.mdx
+10
-10
apps/docs/src/docs/components/form/number-field.mdx
···
21
21
pnpm hip install number-field
22
22
```
23
23
24
-
## Props
25
-
26
-
This component is built using the [React Aria NumberField](https://react-spectrum.adobe.com/react-aria/NumberField.html).
27
-
28
-
<PropDocs components={["NumberField"]} />
29
-
30
24
## Features
31
25
32
26
### Label Variant
···
50
44
51
45
<Example src={ValidationSuccess} />
52
46
47
+
## Props
48
+
49
+
This component is built using the [React Aria NumberField](https://react-spectrum.adobe.com/react-aria/NumberField.html).
50
+
51
+
<PropDocs components={["NumberField"]} />
52
+
53
53
## Related Components
54
54
55
-
- [TextField](/docs/components/text-field) - For general text input
56
-
- [TextArea](/docs/components/text-area) - For multi-line text input
57
-
- [SearchField](/docs/components/search-field) - For search input with clear button
58
-
- [Label](/docs/components/label) - For form labels and descriptions
55
+
- [TextField](/docs/components/form/text-field) - For general text input
56
+
- [TextArea](/docs/components/form/text-area) - For multi-line text input
57
+
- [SearchField](/docs/components/form/search-field) - For search input with clear button
58
+
- [Label](/docs/components/form/label) - For form labels and descriptions
+10
-10
apps/docs/src/docs/components/form/radio.mdx
+10
-10
apps/docs/src/docs/components/form/radio.mdx
···
19
19
pnpm hip install radio
20
20
```
21
21
22
-
## Props
23
-
24
-
This component is built using the [React Aria Radio](https://react-spectrum.adobe.com/react-aria/Radio.html).
25
-
26
-
<PropDocs components={["Radio", "RadioGroup"]} />
27
-
28
22
## Features
29
23
30
24
### With Description
···
39
33
40
34
<Example src={RadioHorizontal} />
41
35
36
+
## Props
37
+
38
+
This component is built using the [React Aria Radio](https://react-spectrum.adobe.com/react-aria/Radio.html).
39
+
40
+
<PropDocs components={["Radio", "RadioGroup"]} />
41
+
42
42
## Related Components
43
43
44
-
- [Checkbox](/docs/components/checkbox) - For multiple selection options
45
-
- [Switch](/docs/components/switch) - For binary toggle choices
46
-
- [Select](/docs/components/select) - For dropdown selection
47
-
- [Label](/docs/components/label) - For form labels and descriptions
44
+
- [Checkbox](/docs/components/form/checkbox) - For multiple selection options
45
+
- [Switch](/docs/components/form/switch) - For binary toggle choices
46
+
- [Select](/docs/components/form/select) - For dropdown selection
47
+
- [Label](/docs/components/form/label) - For form labels and descriptions
+10
-10
apps/docs/src/docs/components/form/search-field.mdx
+10
-10
apps/docs/src/docs/components/form/search-field.mdx
···
21
21
pnpm hip install search-field
22
22
```
23
23
24
-
## Props
25
-
26
-
This component is built using the [React Aria SearchField](https://react-spectrum.adobe.com/react-aria/SearchField.html).
27
-
28
-
<PropDocs components={["SearchField"]} />
29
-
30
24
## Features
31
25
32
26
### Label Variant
···
50
44
51
45
<Example src={ValidationSuccess} />
52
46
47
+
## Props
48
+
49
+
This component is built using the [React Aria SearchField](https://react-spectrum.adobe.com/react-aria/SearchField.html).
50
+
51
+
<PropDocs components={["SearchField"]} />
52
+
53
53
## Related Components
54
54
55
-
- [TextField](/docs/components/text-field) - For general text input
55
+
- [TextField](/docs/components/form/text-field) - For general text input
56
56
- [AutocompleteInput](/docs/components/form/autocomplete) - For text input with suggestions
57
-
- [ComboBox](/docs/components/combobox) - For searchable dropdown selection
58
-
- [CommandMenu](/docs/components/command-menu) - For command palette with search
59
-
- [Label](/docs/components/label) - For form labels and descriptions
57
+
- [ComboBox](/docs/components/form/combobox) - For searchable dropdown selection
58
+
- [CommandMenu](/docs/components/collections/command-menu) - For command palette with search
59
+
- [Label](/docs/components/form/label) - For form labels and descriptions
+18
-18
apps/docs/src/docs/components/form/select.mdx
+18
-18
apps/docs/src/docs/components/form/select.mdx
···
24
24
pnpm hip install select
25
25
```
26
26
27
-
## Props
28
-
29
-
This component is built using the [React Aria Select](https://react-spectrum.adobe.com/react-aria/Select.html).
30
-
31
-
<PropDocs
32
-
components={[
33
-
"Select",
34
-
"SelectItem",
35
-
"SelectSection",
36
-
"SelectSectionHeader",
37
-
"SelectSeparator",
38
-
]}
39
-
/>
40
-
41
27
## Features
42
28
43
29
### Label Variant
···
80
66
81
67
<Example src={Virtualization} />
82
68
69
+
## Props
70
+
71
+
This component is built using the [React Aria Select](https://react-spectrum.adobe.com/react-aria/Select.html).
72
+
73
+
<PropDocs
74
+
components={[
75
+
"Select",
76
+
"SelectItem",
77
+
"SelectSection",
78
+
"SelectSectionHeader",
79
+
"SelectSeparator",
80
+
]}
81
+
/>
82
+
83
83
## Related Components
84
84
85
-
- [ComboBox](/docs/components/combobox) - For searchable dropdown selection
86
-
- [Radio](/docs/components/radio) - For single selection from multiple options
87
-
- [Checkbox](/docs/components/checkbox) - For multiple selection options
88
-
- [Label](/docs/components/label) - For form labels and descriptions
85
+
- [ComboBox](/docs/components/form/combobox) - For searchable dropdown selection
86
+
- [Radio](/docs/components/form/radio) - For single selection from multiple options
87
+
- [Checkbox](/docs/components/form/checkbox) - For multiple selection options
88
+
- [Label](/docs/components/form/label) - For form labels and descriptions
+9
-9
apps/docs/src/docs/components/form/slider.mdx
+9
-9
apps/docs/src/docs/components/form/slider.mdx
···
23
23
pnpm hip install slider
24
24
```
25
25
26
-
## Props
27
-
28
-
This component is built using the [React Aria Slider](https://react-spectrum.adobe.com/react-aria/Slider.html).
29
-
30
-
<PropDocs components={["Slider"]} />
31
-
32
26
## Features
33
27
34
28
### Range Selection
···
68
62
69
63
<Example src={Disabled} />
70
64
65
+
## Props
66
+
67
+
This component is built using the [React Aria Slider](https://react-spectrum.adobe.com/react-aria/Slider.html).
68
+
69
+
<PropDocs components={["Slider"]} />
70
+
71
71
## Related Components
72
72
73
-
- [NumberField](/docs/components/number-field) - For precise numeric input
73
+
- [NumberField](/docs/components/form/number-field) - For precise numeric input
74
74
- [RangeSlider](/docs/components/range-slider) - For dual-handle range selection
75
-
- [Switch](/docs/components/switch) - For binary on/off controls
76
-
- [Checkbox](/docs/components/checkbox) - For boolean selections
75
+
- [Switch](/docs/components/form/switch) - For binary on/off controls
76
+
- [Checkbox](/docs/components/form/checkbox) - For boolean selections
+10
-10
apps/docs/src/docs/components/form/switch.mdx
+10
-10
apps/docs/src/docs/components/form/switch.mdx
···
18
18
pnpm hip install switch
19
19
```
20
20
21
-
## Props
22
-
23
-
This component is built using the [React Aria Switch](https://react-spectrum.adobe.com/react-aria/Switch.html).
24
-
25
-
<PropDocs components={["Switch"]} />
26
-
27
21
## Features
28
22
29
23
### Disabled
···
32
26
33
27
<Example src={Disabled} />
34
28
29
+
## Props
30
+
31
+
This component is built using the [React Aria Switch](https://react-spectrum.adobe.com/react-aria/Switch.html).
32
+
33
+
<PropDocs components={["Switch"]} />
34
+
35
35
## Related Components
36
36
37
-
- [Checkbox](/docs/components/checkbox) - For multiple selection options
38
-
- [Radio](/docs/components/radio) - For single selection from multiple options
39
-
- [ToggleButton](/docs/components/toggle-button) - For toggleable button states
40
-
- [Label](/docs/components/label) - For form labels and descriptions
37
+
- [Checkbox](/docs/components/form/checkbox) - For multiple selection options
38
+
- [Radio](/docs/components/form/radio) - For single selection from multiple options
39
+
- [ToggleButton](/docs/components/buttons/toggle-button) - For toggleable button states
40
+
- [Label](/docs/components/form/label) - For form labels and descriptions
+4
-4
apps/docs/src/docs/components/form/text-area.mdx
+4
-4
apps/docs/src/docs/components/form/text-area.mdx
···
25
25
26
26
## Related Components
27
27
28
-
- [TextField](/docs/components/text-field) - For single-line text input
29
-
- [NumberField](/docs/components/number-field) - For numeric input
30
-
- [SearchField](/docs/components/search-field) - For search input with clear button
31
-
- [Label](/docs/components/label) - For form labels and descriptions
28
+
- [TextField](/docs/components/form/text-field) - For single-line text input
29
+
- [NumberField](/docs/components/form/number-field) - For numeric input
30
+
- [SearchField](/docs/components/form/search-field) - For search input with clear button
31
+
- [Label](/docs/components/form/label) - For form labels and descriptions
+10
-10
apps/docs/src/docs/components/form/text-field.mdx
+10
-10
apps/docs/src/docs/components/form/text-field.mdx
···
25
25
pnpm hip install text-field
26
26
```
27
27
28
-
## Props
29
-
30
-
This component is built using the [React Aria TextField](https://react-spectrum.adobe.com/react-aria/TextField.html).
31
-
32
-
<PropDocs components={["TextField"]} />
33
-
34
28
## Features
35
29
36
30
### Label Variant
···
78
72
79
73
<Example src={ValidationSuccess} />
80
74
75
+
## Props
76
+
77
+
This component is built using the [React Aria TextField](https://react-spectrum.adobe.com/react-aria/TextField.html).
78
+
79
+
<PropDocs components={["TextField"]} />
80
+
81
81
## Related Components
82
82
83
-
- [TextArea](/docs/components/text-area) - For multi-line text input
84
-
- [NumberField](/docs/components/number-field) - For numeric input
85
-
- [SearchField](/docs/components/search-field) - For search input with clear button
86
-
- [Label](/docs/components/label) - For form labels and descriptions
83
+
- [TextArea](/docs/components/form/text-area) - For multi-line text input
84
+
- [NumberField](/docs/components/form/number-field) - For numeric input
85
+
- [SearchField](/docs/components/form/search-field) - For search input with clear button
86
+
- [Label](/docs/components/form/label) - For form labels and descriptions
+10
-10
apps/docs/src/docs/components/layout/flex.mdx
+10
-10
apps/docs/src/docs/components/layout/flex.mdx
···
21
21
pnpm hip install flex
22
22
```
23
23
24
-
## Props
25
-
26
-
This is a custom component built for flexible layouts.
27
-
28
-
<PropDocs components={["Flex"]} />
29
-
30
24
## Features
31
25
32
26
### Directions
···
53
47
54
48
<Example src={FlexGap} />
55
49
50
+
## Props
51
+
52
+
This is a custom component built for flexible layouts.
53
+
54
+
<PropDocs components={["Flex"]} />
55
+
56
56
## Related Components
57
57
58
-
- [Grid](/docs/components/grid) - For two-dimensional layouts
59
-
- [Card](/docs/components/card) - For grouping content in flex layouts
60
-
- [ButtonGroup](/docs/components/button-group) - For grouping buttons in flex layouts
61
-
- [Separator](/docs/components/separator) - For visual separation in flex layouts
58
+
- [Grid](/docs/components/layout/grid) - For two-dimensional layouts
59
+
- [Card](/docs/components/content/card) - For grouping content in flex layouts
60
+
- [ButtonGroup](/docs/components/buttons/button-group) - For grouping buttons in flex layouts
61
+
- [Separator](/docs/components/content/separator) - For visual separation in flex layouts
+10
-10
apps/docs/src/docs/components/layout/grid.mdx
+10
-10
apps/docs/src/docs/components/layout/grid.mdx
···
18
18
pnpm hip install grid
19
19
```
20
20
21
-
## Props
22
-
23
-
This is a custom component built for grid layouts.
24
-
25
-
<PropDocs components={["Grid", "GridItem"]} />
26
-
27
21
## Features
28
22
29
23
### Grid Spans
···
32
26
33
27
<Example src={GridSpans} />
34
28
29
+
## Props
30
+
31
+
This is a custom component built for grid layouts.
32
+
33
+
<PropDocs components={["Grid", "GridItem"]} />
34
+
35
35
## Related Components
36
36
37
-
- [Flex](/docs/components/flex) - For one-dimensional flexible layouts
38
-
- [Card](/docs/components/card) - For grouping content in grid layouts
39
-
- [AspectRatio](/docs/components/aspect-ratio) - For maintaining aspect ratios in grid items
40
-
- [Table](/docs/components/table) - For structured data in grid layouts
37
+
- [Flex](/docs/components/layout/flex) - For one-dimensional flexible layouts
38
+
- [Card](/docs/components/content/card) - For grouping content in grid layouts
39
+
- [AspectRatio](/docs/components/content/aspect-ratio) - For maintaining aspect ratios in grid items
40
+
- [Table](/docs/components/collections/table) - For structured data in grid layouts
+16
-16
apps/docs/src/docs/components/layout/page.mdx
+16
-16
apps/docs/src/docs/components/layout/page.mdx
···
19
19
pnpm hip install page
20
20
```
21
21
22
-
## Props
23
-
24
-
<PropDocs
25
-
components={[
26
-
"PageRoot",
27
-
"PageHeader",
28
-
"PageBackLink",
29
-
"PageTitle",
30
-
"PageDescription",
31
-
"PageActions",
32
-
"PageIcon",
33
-
"PageStickyHeader",
34
-
"PageStickyFooter",
35
-
]}
36
-
/>
37
-
38
22
## Features
39
23
40
24
### Small Variant
···
54
38
Add an icon to the large page header for visual hierarchy.
55
39
56
40
<Example src={WithIcon} />
41
+
42
+
## Props
43
+
44
+
<PropDocs
45
+
components={[
46
+
"PageRoot",
47
+
"PageHeader",
48
+
"PageBackLink",
49
+
"PageTitle",
50
+
"PageDescription",
51
+
"PageActions",
52
+
"PageIcon",
53
+
"PageStickyHeader",
54
+
"PageStickyFooter",
55
+
]}
56
+
/>
57
57
58
58
## Related Components
59
59
+10
-10
apps/docs/src/docs/components/layout/toolbar.mdx
+10
-10
apps/docs/src/docs/components/layout/toolbar.mdx
···
19
19
pnpm hip install toolbar
20
20
```
21
21
22
-
## Props
23
-
24
-
This component is built using [React Aria Toolbar](https://react-spectrum.adobe.com/react-aria/Toolbar.html).
25
-
26
-
<PropDocs components={["Toolbar", "ToolbarGroup", "ToolbarSeparator"]} />
27
-
28
22
## Features
29
23
30
24
### Vertical Orientation
···
40
34
41
35
<Example src={WithCheckbox} />
42
36
37
+
## Props
38
+
39
+
This component is built using [React Aria Toolbar](https://react-spectrum.adobe.com/react-aria/Toolbar.html).
40
+
41
+
<PropDocs components={["Toolbar", "ToolbarGroup", "ToolbarSeparator"]} />
42
+
43
43
## Related Components
44
44
45
-
- [Button](/docs/components/button) - For clickable actions in toolbars
46
-
- [ToggleButton](/docs/components/toggle-button) - For toggleable buttons in toolbars
47
-
- [ButtonGroup](/docs/components/button-group) - For grouping buttons together
48
-
- [ToggleButtonGroup](/docs/components/toggle-button-group) - For grouping toggle buttons together
45
+
- [Button](/docs/components/buttons/button) - For clickable actions in toolbars
46
+
- [ToggleButton](/docs/components/buttons/toggle-button) - For toggleable buttons in toolbars
47
+
- [ButtonGroup](/docs/components/buttons/button-group) - For grouping buttons together
48
+
- [ToggleButtonGroup](/docs/components/buttons/toggle-button-group) - For grouping toggle buttons together
+9
-9
apps/docs/src/docs/components/layout/window-splitter.mdx
+9
-9
apps/docs/src/docs/components/layout/window-splitter.mdx
···
19
19
pnpm hip install window-splitter
20
20
```
21
21
22
-
## Props
23
-
24
-
This component is built using [@window-splitter/react](https://react-window-splitter-six.vercel.app/docs/install), which follows the [WAI-ARIA Window Splitter pattern](https://www.w3.org/WAI/ARIA/apg/patterns/windowsplitter/).
25
-
26
-
<PropDocs components={["PanelGroup", "Panel", "PanelResizer"]} />
27
-
28
22
## Features
29
23
30
24
### Vertical Layout
···
39
33
40
34
<Example src={ThreePanels} />
41
35
36
+
## Props
37
+
38
+
This component is built using [@window-splitter/react](https://react-window-splitter-six.vercel.app/docs/install), which follows the [WAI-ARIA Window Splitter pattern](https://www.w3.org/WAI/ARIA/apg/patterns/windowsplitter/).
39
+
40
+
<PropDocs components={["PanelGroup", "Panel", "PanelResizer"]} />
41
+
42
42
## Related Components
43
43
44
-
- [Flex](/docs/components/flex) - For flexible layouts without resizing
45
-
- [Grid](/docs/components/grid) - For two-dimensional layouts
46
-
- [Separator](/docs/components/separator) - For visual separation
44
+
- [Flex](/docs/components/layout/flex) - For flexible layouts without resizing
45
+
- [Grid](/docs/components/layout/grid) - For two-dimensional layouts
46
+
- [Separator](/docs/components/content/separator) - For visual separation
+4
-4
apps/docs/src/docs/components/overlays/alert-dialog.mdx
+4
-4
apps/docs/src/docs/components/overlays/alert-dialog.mdx
···
34
34
35
35
## Related Components
36
36
37
-
- [Dialog](/docs/components/dialog) - For general modal dialogs
38
-
- [Button](/docs/components/button) - For dialog action buttons
39
-
- [Popover](/docs/components/popover) - For non-modal overlays
40
-
- [Tooltip](/docs/components/tooltip) - For contextual help
37
+
- [Dialog](/docs/components/overlays/dialog) - For general modal dialogs
38
+
- [Button](/docs/components/buttons/button) - For dialog action buttons
39
+
- [Popover](/docs/components/overlays/popover) - For non-modal overlays
40
+
- [Tooltip](/docs/components/overlays/tooltip) - For contextual help
+12
-12
apps/docs/src/docs/components/overlays/dialog.mdx
+12
-12
apps/docs/src/docs/components/overlays/dialog.mdx
···
26
26
pnpm hip install dialog
27
27
```
28
28
29
-
## Props
30
-
31
-
This component is built using the [React Aria Dialog](https://react-spectrum.adobe.com/react-aria/Dialog.html).
32
-
33
-
<PropDocs
34
-
components={["Dialog", "DialogHeader", "DialogDescription", "DialogFooter"]}
35
-
/>
36
-
37
29
## Features
38
30
39
31
### Form Dialog
···
48
40
49
41
<Example src={DialogSizes} />
50
42
43
+
## Props
44
+
45
+
This component is built using the [React Aria Dialog](https://react-spectrum.adobe.com/react-aria/Dialog.html).
46
+
47
+
<PropDocs
48
+
components={["Dialog", "DialogHeader", "DialogDescription", "DialogFooter"]}
49
+
/>
50
+
51
51
## Related Components
52
52
53
-
- [AlertDialog](/docs/components/alert-dialog) - For critical actions and confirmations
54
-
- [Popover](/docs/components/popover) - For non-modal overlays
55
-
- [Button](/docs/components/button) - For dialog action buttons
56
-
- [Form](/docs/components/form) - For forms within dialogs
53
+
- [AlertDialog](/docs/components/overlays/alert-dialog) - For critical actions and confirmations
54
+
- [Popover](/docs/components/overlays/popover) - For non-modal overlays
55
+
- [Button](/docs/components/buttons/button) - For dialog action buttons
56
+
- [Form](/docs/components/form/form) - For forms within dialogs
+19
-19
apps/docs/src/docs/components/overlays/drawer.mdx
+19
-19
apps/docs/src/docs/components/overlays/drawer.mdx
···
20
20
pnpm hip install drawer
21
21
```
22
22
23
-
## Props
24
-
25
-
This component is built using the [React Aria Dialog](https://react-spectrum.adobe.com/react-aria/Dialog.html).
26
-
27
-
<PropDocs
28
-
components={[
29
-
"Drawer",
30
-
"DrawerHeader",
31
-
"DrawerDescription",
32
-
"DrawerBody",
33
-
"DrawerFooter",
34
-
]}
35
-
/>
36
-
37
23
## Features
38
24
39
25
### Sizes
···
54
40
55
41
<Example src={DrawerNonModal} />
56
42
43
+
## Props
44
+
45
+
This component is built using the [React Aria Dialog](https://react-spectrum.adobe.com/react-aria/Dialog.html).
46
+
47
+
<PropDocs
48
+
components={[
49
+
"Drawer",
50
+
"DrawerHeader",
51
+
"DrawerDescription",
52
+
"DrawerBody",
53
+
"DrawerFooter",
54
+
]}
55
+
/>
56
+
57
57
## Related Components
58
58
59
-
- [Dialog](/docs/components/dialog) - For centered modal dialogs
60
-
- [AlertDialog](/docs/components/alert-dialog) - For critical actions and confirmations
61
-
- [Popover](/docs/components/popover) - For non-modal overlays
62
-
- [Button](/docs/components/button) - For drawer action buttons
63
-
- [Form](/docs/components/form) - For forms within drawers
59
+
- [Dialog](/docs/components/overlays/dialog) - For centered modal dialogs
60
+
- [AlertDialog](/docs/components/overlays/alert-dialog) - For critical actions and confirmations
61
+
- [Popover](/docs/components/overlays/popover) - For non-modal overlays
62
+
- [Button](/docs/components/buttons/button) - For drawer action buttons
63
+
- [Form](/docs/components/form/form) - For forms within drawers
+9
-9
apps/docs/src/docs/components/overlays/hover-card.mdx
+9
-9
apps/docs/src/docs/components/overlays/hover-card.mdx
···
18
18
pnpm hip install hover-card
19
19
```
20
20
21
-
## Props
22
-
23
-
This component is built using the [React Aria Components](https://react-spectrum.adobe.com/react-aria/).
24
-
25
-
<PropDocs components={["HoverCard"]} />
26
-
27
21
## Features
28
22
29
23
### With Rich Content
···
40
34
- `touch` - The hover card is displayed when the touch device is touched over the trigger element.
41
35
- `keyboard` - The hover card is displayed when the keyboard is focused and the enter key is pressed on the trigger element.
42
36
37
+
## Props
38
+
39
+
This component is built using the [React Aria Components](https://react-spectrum.adobe.com/react-aria/).
40
+
41
+
<PropDocs components={["HoverCard"]} />
42
+
43
43
## Related Components
44
44
45
-
- [Popover](/docs/components/popover) - For click-triggered overlays
46
-
- [Tooltip](/docs/components/tooltip) - For simple contextual help
47
-
- [Dialog](/docs/components/dialog) - For modal overlays
45
+
- [Popover](/docs/components/overlays/popover) - For click-triggered overlays
46
+
- [Tooltip](/docs/components/overlays/tooltip) - For simple contextual help
47
+
- [Dialog](/docs/components/overlays/dialog) - For modal overlays
+6
-6
apps/docs/src/docs/components/overlays/lightbox.mdx
+6
-6
apps/docs/src/docs/components/overlays/lightbox.mdx
···
17
17
pnpm hip install lightbox
18
18
```
19
19
20
-
## Props
21
-
22
-
<PropDocs components={["Lightbox"]} />
23
-
24
20
## Features
25
21
26
22
### Controlled
···
36
32
37
33
Click the backdrop or press Escape to close the lightbox.
38
34
35
+
## Props
36
+
37
+
<PropDocs components={["Lightbox"]} />
38
+
39
39
## Related Components
40
40
41
-
- [Dialog](/docs/components/dialog) - For modal content overlays
42
-
- [ImageCropper](/docs/components/image-cropper) - For cropping images
41
+
- [Dialog](/docs/components/overlays/dialog) - For modal content overlays
42
+
- [ImageCropper](/docs/components/content/image-cropper) - For cropping images
+4
-4
apps/docs/src/docs/components/overlays/popover.mdx
+4
-4
apps/docs/src/docs/components/overlays/popover.mdx
···
25
25
26
26
## Related Components
27
27
28
-
- [Dialog](/docs/components/dialog) - For modal overlays
29
-
- [Tooltip](/docs/components/tooltip) - For contextual help overlays
30
-
- [Menu](/docs/components/menu) - For dropdown menus
31
-
- [ContextMenu](/docs/components/context-menu) - For right-click context menus
28
+
- [Dialog](/docs/components/overlays/dialog) - For modal overlays
29
+
- [Tooltip](/docs/components/overlays/tooltip) - For contextual help overlays
30
+
- [Menu](/docs/components/collections/menu) - For dropdown menus
31
+
- [ContextMenu](/docs/components/collections/context-menu) - For right-click context menus
+4
-4
apps/docs/src/docs/components/overlays/tooltip.mdx
+4
-4
apps/docs/src/docs/components/overlays/tooltip.mdx
···
54
54
55
55
## Related Components
56
56
57
-
- [Popover](/docs/components/popover) - For more complex overlay content
58
-
- [IconButton](/docs/components/icon-button) - Often used with tooltips for context
59
-
- [Button](/docs/components/button) - Can be enhanced with tooltips
60
-
- [Badge](/docs/components/badge) - Can be enhanced with tooltips for additional info
57
+
- [Popover](/docs/components/overlays/popover) - For more complex overlay content
58
+
- [IconButton](/docs/components/buttons/icon-button) - Often used with tooltips for context
59
+
- [Button](/docs/components/buttons/button) - Can be enhanced with tooltips
60
+
- [Badge](/docs/components/status/badge) - Can be enhanced with tooltips for additional info
+6
-6
apps/docs/src/docs/components/status/alert.mdx
+6
-6
apps/docs/src/docs/components/status/alert.mdx
···
24
24
pnpm hip install alert
25
25
```
26
26
27
-
## Props
28
-
29
-
<PropDocs components={["Alert"]} />
30
-
31
27
## Features
32
28
33
29
### Variants
···
75
71
76
72
<Example src={CustomIcon} />
77
73
74
+
## Props
75
+
76
+
<PropDocs components={["Alert"]} />
77
+
78
78
## Related Components
79
79
80
-
- [Badge](/docs/components/badge) - For small status indicators
80
+
- [Badge](/docs/components/status/badge) - For small status indicators
81
81
- [Toast](/docs/components/status/toast) - For temporary notifications
82
-
- [AlertDialog](/docs/components/alert-dialog) - For critical actions and confirmations
82
+
- [AlertDialog](/docs/components/overlays/alert-dialog) - For critical actions and confirmations
+10
-10
apps/docs/src/docs/components/status/badge.mdx
+10
-10
apps/docs/src/docs/components/status/badge.mdx
···
21
21
pnpm hip install badge
22
22
```
23
23
24
-
## Props
25
-
26
-
This is a custom component built for status indicators.
27
-
28
-
<PropDocs components={["Badge"]} />
29
-
30
24
## Features
31
25
32
26
### Variants
···
53
47
54
48
<Example src={BadgeDismissible} />
55
49
50
+
## Props
51
+
52
+
This is a custom component built for status indicators.
53
+
54
+
<PropDocs components={["Badge"]} />
55
+
56
56
## Related Components
57
57
58
-
- [Avatar](/docs/components/avatar) - For user avatars with status badges
59
-
- [Card](/docs/components/card) - For cards with status badges
60
-
- [Table](/docs/components/table) - For table cells with status badges
61
-
- [Button](/docs/components/button) - For buttons with notification badges
58
+
- [Avatar](/docs/components/content/avatar) - For user avatars with status badges
59
+
- [Card](/docs/components/content/card) - For cards with status badges
60
+
- [Table](/docs/components/collections/table) - For table cells with status badges
61
+
- [Button](/docs/components/buttons/button) - For buttons with notification badges
+9
-9
apps/docs/src/docs/components/status/meter.mdx
+9
-9
apps/docs/src/docs/components/status/meter.mdx
···
23
23
pnpm hip install meter
24
24
```
25
25
26
-
## Props
27
-
28
-
This component is built using the [React Aria Meter](https://react-spectrum.adobe.com/react-aria/Meter.html).
29
-
30
-
<PropDocs components={["Meter"]} />
31
-
32
26
## Features
33
27
34
28
### Sizes
···
68
62
69
63
<Example src={CustomValueLabel} />
70
64
65
+
## Props
66
+
67
+
This component is built using the [React Aria Meter](https://react-spectrum.adobe.com/react-aria/Meter.html).
68
+
69
+
<PropDocs components={["Meter"]} />
70
+
71
71
## Related Components
72
72
73
-
- [ProgressBar](/docs/components/progress-bar) - For showing completion status
74
-
- [Slider](/docs/components/slider) - For interactive value selection
75
-
- [Label](/docs/components/label) - For form labels
73
+
- [ProgressBar](/docs/components/status/progress-bar) - For showing completion status
74
+
- [Slider](/docs/components/form/slider) - For interactive value selection
75
+
- [Label](/docs/components/form/label) - For form labels
+9
-9
apps/docs/src/docs/components/status/progress-bar.mdx
+9
-9
apps/docs/src/docs/components/status/progress-bar.mdx
···
21
21
pnpm hip install progress-bar
22
22
```
23
23
24
-
## Props
25
-
26
-
This component is built using the [React Aria ProgressBar](https://react-spectrum.adobe.com/react-aria/ProgressBar.html).
27
-
28
-
<PropDocs components={["ProgressBar"]} />
29
-
30
24
## Features
31
25
32
26
### Without Value Label
···
53
47
54
48
<Example src={Sizes} />
55
49
50
+
## Props
51
+
52
+
This component is built using the [React Aria ProgressBar](https://react-spectrum.adobe.com/react-aria/ProgressBar.html).
53
+
54
+
<PropDocs components={["ProgressBar"]} />
55
+
56
56
## Related Components
57
57
58
-
- [Slider](/docs/components/slider) - For interactive value selection
59
-
- [Badge](/docs/components/badge) - For status indicators
60
-
- [Label](/docs/components/label) - For form labels
58
+
- [Slider](/docs/components/form/slider) - For interactive value selection
59
+
- [Badge](/docs/components/status/badge) - For status indicators
60
+
- [Label](/docs/components/form/label) - For form labels
+9
-9
apps/docs/src/docs/components/status/progress-circle.mdx
+9
-9
apps/docs/src/docs/components/status/progress-circle.mdx
···
20
20
pnpm hip install progress-circle
21
21
```
22
22
23
-
## Props
24
-
25
-
This component is built using the [React Aria ProgressBar](https://react-spectrum.adobe.com/react-aria/ProgressBar.html).
26
-
27
-
<PropDocs components={["ProgressCircle"]} />
28
-
29
23
## Features
30
24
31
25
### With Label
···
47
41
48
42
<Example src={Sizes} />
49
43
44
+
## Props
45
+
46
+
This component is built using the [React Aria ProgressBar](https://react-spectrum.adobe.com/react-aria/ProgressBar.html).
47
+
48
+
<PropDocs components={["ProgressCircle"]} />
49
+
50
50
## Related Components
51
51
52
-
- [Progress Bar](/docs/components/progress-bar) - For linear progress indicators
53
-
- [Meter](/docs/components/meter) - For displaying values within a range
54
-
- [Label](/docs/components/label) - For form labels
52
+
- [Progress Bar](/docs/components/status/progress-bar) - For linear progress indicators
53
+
- [Meter](/docs/components/status/meter) - For displaying values within a range
54
+
- [Label](/docs/components/form/label) - For form labels
+7
-7
apps/docs/src/docs/components/status/skeleton.mdx
+7
-7
apps/docs/src/docs/components/status/skeleton.mdx
···
20
20
pnpm hip install skeleton
21
21
```
22
22
23
-
## Props
24
-
25
-
This is a custom component built for loading placeholders.
26
-
27
-
<PropDocs components={["Skeleton", "SkeletonGroup"]} />
28
-
29
23
## Features
30
24
31
25
### Variants
···
46
40
47
41
<Example src={RectangleHeight} />
48
42
43
+
## Props
44
+
45
+
This is a custom component built for loading placeholders.
46
+
47
+
<PropDocs components={["Skeleton", "SkeletonGroup"]} />
48
+
49
49
## Related Components
50
50
51
51
- [Spinner](/docs/components/spinner) - For loading indicators
52
-
- [ProgressBar](/docs/components/progress-bar) - For progress indicators
52
+
- [ProgressBar](/docs/components/status/progress-bar) - For progress indicators
+7
-7
apps/docs/src/docs/components/status/star-rating.mdx
+7
-7
apps/docs/src/docs/components/status/star-rating.mdx
···
19
19
pnpm hip install star-rating
20
20
```
21
21
22
-
## Props
23
-
24
-
<PropDocs components={["StarRating", "StarRatingInput"]} />
25
-
26
22
## Features
27
23
28
24
### Interactive
···
50
46
51
47
Optionally display the number of reviews next to the rating.
52
48
49
+
## Props
50
+
51
+
<PropDocs components={["StarRating", "StarRatingInput"]} />
52
+
53
53
## Related Components
54
54
55
-
- [Badge](/docs/components/badge) - For status indicators
56
-
- [Meter](/docs/components/meter) - For numeric gauges and progress
57
-
- [ProgressBar](/docs/components/progress-bar) - For completion status
55
+
- [Badge](/docs/components/status/badge) - For status indicators
56
+
- [Meter](/docs/components/status/meter) - For numeric gauges and progress
57
+
- [ProgressBar](/docs/components/status/progress-bar) - For completion status
+19
-19
apps/docs/src/docs/components/status/toast.mdx
+19
-19
apps/docs/src/docs/components/status/toast.mdx
···
19
19
pnpm hip install toast
20
20
```
21
21
22
-
## Props
23
-
24
-
This component is built using [React Aria Toast](https://react-spectrum.adobe.com/react-aria/Toast.html).
25
-
26
-
<PropDocs
27
-
components={[
28
-
"ToastRegion",
29
-
"Toast",
30
-
"ToastContent",
31
-
"ToastTitle",
32
-
"ToastDescription",
33
-
"ToastClose",
34
-
]}
35
-
/>
36
-
37
22
## Features
38
23
39
24
### Actions
···
54
39
55
40
<Example src={Icons} />
56
41
42
+
## Props
43
+
44
+
This component is built using [React Aria Toast](https://react-spectrum.adobe.com/react-aria/Toast.html).
45
+
46
+
<PropDocs
47
+
components={[
48
+
"ToastRegion",
49
+
"Toast",
50
+
"ToastContent",
51
+
"ToastTitle",
52
+
"ToastDescription",
53
+
"ToastClose",
54
+
]}
55
+
/>
56
+
57
57
## Related Components
58
58
59
-
- [Dialog](/docs/components/dialog) - For modal dialogs
60
-
- [AlertDialog](/docs/components/alert-dialog) - For critical actions and confirmations
61
-
- [Popover](/docs/components/popover) - For non-modal overlays
62
-
- [Button](/docs/components/button) - For triggering toasts
59
+
- [Dialog](/docs/components/overlays/dialog) - For modal dialogs
60
+
- [AlertDialog](/docs/components/overlays/alert-dialog) - For critical actions and confirmations
61
+
- [Popover](/docs/components/overlays/popover) - For non-modal overlays
62
+
- [Button](/docs/components/buttons/button) - For triggering toasts
+3
-2
apps/docs/src/docs/foundations/typography.mdx
+3
-2
apps/docs/src/docs/foundations/typography.mdx
···
15
15
Our typography system is built on a foundation of design tokens and composed into semantic type styles.
16
16
17
17
This page documents the tokens that compose the typography system.
18
-
In most cases you will not need to use the tokens directly, but instead use the [Typography Components](/docs/components/typography) or the [Text Component](/docs/components/text) to create styled text.
18
+
In most cases you will not need to use the tokens directly, but instead use the [Typography Components](/docs/components/content/typography) or the [Text Component](/docs/components/content/text) to create styled text.
19
19
20
20
## Tokens
21
21
···
26
26
27
27
The font family tokens define the typefaces available in the system:
28
28
29
+
- **title**: The font used for headings and titles
29
30
- **sans**: Inter font family for body text and UI elements
30
31
- **serif**: Georgia serif font for emphasis, special content or headings
31
32
- **mono**: Monaco monospace font for code and technical content
···
59
60
60
61
## Related
61
62
62
-
- [Typography Components](/docs/components/typography) - Learn about the typography components and using the typeramp
63
+
- [Typography Components](/docs/components/content/typography) - Learn about the typography components and using the typeramp
63
64
- [Design Tokens](/docs/foundations/tokens) - Learn about the broader token system
64
65
- [Spacing](/docs/foundations/spacing) - Understand spacing tokens used in typography
65
66
- [Breakpoints](/docs/foundations/breakpoints) - See how responsive typography works
+52
-52
apps/docs/src/examples/foundations/color.tsx
+52
-52
apps/docs/src/examples/foundations/color.tsx
···
4
4
import { Grid } from "@/components/grid";
5
5
6
6
import { Flex } from "../../components/flex";
7
-
// import { amber } from "../../components/theme/colors/amber.stylex";
8
-
// import { blue } from "../../components/theme/colors/blue.stylex";
9
-
// import { bronze } from "../../components/theme/colors/bronze.stylex";
10
-
// import { brown } from "../../components/theme/colors/brown.stylex";
11
-
// import { crimson } from "../../components/theme/colors/crimson.stylex";
12
-
// import { cyan } from "../../components/theme/colors/cyan.stylex";
13
-
// import { gold } from "../../components/theme/colors/gold.stylex";
14
-
// import { grass } from "../../components/theme/colors/grass.stylex";
15
-
// import { gray } from "../../components/theme/colors/gray.stylex";
7
+
import { amber } from "../../components/theme/colors/amber.stylex";
8
+
import { blue } from "../../components/theme/colors/blue.stylex";
9
+
import { bronze } from "../../components/theme/colors/bronze.stylex";
10
+
import { brown } from "../../components/theme/colors/brown.stylex";
11
+
import { crimson } from "../../components/theme/colors/crimson.stylex";
12
+
import { cyan } from "../../components/theme/colors/cyan.stylex";
13
+
import { gold } from "../../components/theme/colors/gold.stylex";
14
+
import { grass } from "../../components/theme/colors/grass.stylex";
15
+
import { gray } from "../../components/theme/colors/gray.stylex";
16
16
import { green } from "../../components/theme/colors/green.stylex";
17
-
// import { indigo } from "../../components/theme/colors/indigo.stylex";
18
-
// import { iris } from "../../components/theme/colors/iris.stylex";
19
-
// import { jade } from "../../components/theme/colors/jade.stylex";
20
-
// import { lime } from "../../components/theme/colors/lime.stylex";
21
-
// import { mauve } from "../../components/theme/colors/mauve.stylex";
22
-
// import { mint } from "../../components/theme/colors/mint.stylex";
23
-
// import { olive } from "../../components/theme/colors/olive.stylex";
17
+
import { indigo } from "../../components/theme/colors/indigo.stylex";
18
+
import { iris } from "../../components/theme/colors/iris.stylex";
19
+
import { jade } from "../../components/theme/colors/jade.stylex";
20
+
import { lime } from "../../components/theme/colors/lime.stylex";
21
+
import { mauve } from "../../components/theme/colors/mauve.stylex";
22
+
import { mint } from "../../components/theme/colors/mint.stylex";
23
+
import { olive } from "../../components/theme/colors/olive.stylex";
24
24
import { orange } from "../../components/theme/colors/orange.stylex";
25
-
// import { pink } from "../../components/theme/colors/pink.stylex";
26
-
// import { plum } from "../../components/theme/colors/plum.stylex";
27
-
// import { purple } from "../../components/theme/colors/purple.stylex";
25
+
import { pink } from "../../components/theme/colors/pink.stylex";
26
+
import { plum } from "../../components/theme/colors/plum.stylex";
27
+
import { purple } from "../../components/theme/colors/purple.stylex";
28
28
import { red } from "../../components/theme/colors/red.stylex";
29
-
// import { ruby } from "../../components/theme/colors/ruby.stylex";
30
-
// import { sage } from "../../components/theme/colors/sage.stylex";
31
-
// import { sand } from "../../components/theme/colors/sand.stylex";
32
-
// import { sky } from "../../components/theme/colors/sky.stylex";
29
+
import { ruby } from "../../components/theme/colors/ruby.stylex";
30
+
import { sage } from "../../components/theme/colors/sage.stylex";
31
+
import { sand } from "../../components/theme/colors/sand.stylex";
32
+
import { sky } from "../../components/theme/colors/sky.stylex";
33
33
import { slate } from "../../components/theme/colors/slate.stylex";
34
-
// import { teal } from "../../components/theme/colors/teal.stylex";
35
-
// import { tomato } from "../../components/theme/colors/tomato.stylex";
36
-
// import { violet } from "../../components/theme/colors/violet.stylex";
34
+
import { teal } from "../../components/theme/colors/teal.stylex";
35
+
import { tomato } from "../../components/theme/colors/tomato.stylex";
36
+
import { violet } from "../../components/theme/colors/violet.stylex";
37
37
import { yellow } from "../../components/theme/colors/yellow.stylex";
38
38
import { spacing } from "../../components/theme/spacing.stylex";
39
39
import { Text } from "../../components/typography/text";
···
51
51
});
52
52
53
53
const grays = [
54
-
// { name: "gray", value: gray },
55
-
// { name: "mauve", value: mauve },
54
+
{ name: "gray", value: gray },
55
+
{ name: "mauve", value: mauve },
56
56
{ name: "slate", value: slate },
57
-
// { name: "sage", value: sage },
58
-
// { name: "olive", value: olive },
59
-
// { name: "sand", value: sand },
57
+
{ name: "sage", value: sage },
58
+
{ name: "olive", value: olive },
59
+
{ name: "sand", value: sand },
60
60
];
61
61
62
62
const uiColors = [
63
-
// { name: "tomato", value: tomato },
63
+
{ name: "tomato", value: tomato },
64
64
{ name: "red", value: red },
65
-
// { name: "ruby", value: ruby },
66
-
// { name: "crimson", value: crimson },
67
-
// { name: "pink", value: pink },
68
-
// { name: "plum", value: plum },
69
-
// { name: "purple", value: purple },
70
-
// { name: "violet", value: violet },
71
-
// { name: "iris", value: iris },
72
-
// { name: "indigo", value: indigo },
73
-
// { name: "blue", value: blue },
74
-
// { name: "cyan", value: cyan },
75
-
// { name: "teal", value: teal },
76
-
// { name: "jade", value: jade },
65
+
{ name: "ruby", value: ruby },
66
+
{ name: "crimson", value: crimson },
67
+
{ name: "pink", value: pink },
68
+
{ name: "plum", value: plum },
69
+
{ name: "purple", value: purple },
70
+
{ name: "violet", value: violet },
71
+
{ name: "iris", value: iris },
72
+
{ name: "indigo", value: indigo },
73
+
{ name: "blue", value: blue },
74
+
{ name: "cyan", value: cyan },
75
+
{ name: "teal", value: teal },
76
+
{ name: "jade", value: jade },
77
77
{ name: "green", value: green },
78
-
// { name: "grass", value: grass },
79
-
// { name: "bronze", value: bronze },
80
-
// { name: "gold", value: gold },
81
-
// { name: "brown", value: brown },
78
+
{ name: "grass", value: grass },
79
+
{ name: "bronze", value: bronze },
80
+
{ name: "gold", value: gold },
81
+
{ name: "brown", value: brown },
82
82
{ name: "orange", value: orange },
83
-
// { name: "amber", value: amber },
83
+
{ name: "amber", value: amber },
84
84
{ name: "yellow", value: yellow },
85
-
// { name: "lime", value: lime },
86
-
// { name: "mint", value: mint },
87
-
// { name: "sky", value: sky },
85
+
{ name: "lime", value: lime },
86
+
{ name: "mint", value: mint },
87
+
{ name: "sky", value: sky },
88
88
];
89
89
90
90
export function GrayColors() {
+12
-2
apps/docs/src/examples/separator/orientation.tsx
+12
-2
apps/docs/src/examples/separator/orientation.tsx
···
1
+
import * as stylex from "@stylexjs/stylex";
2
+
1
3
import { Flex } from "@/components/flex";
2
4
import { Separator } from "@/components/separator";
3
5
6
+
import { spacing } from "../../components/theme/spacing.stylex";
7
+
8
+
const styles = stylex.create({
9
+
separator: {
10
+
height: spacing["4"],
11
+
},
12
+
});
13
+
4
14
export function SeparatorOrientation() {
5
15
return (
6
16
<Flex gap="4" align="center">
7
17
<div>Left</div>
8
-
<Separator orientation="vertical" />
18
+
<Separator orientation="vertical" style={styles.separator} />
9
19
<div>Center</div>
10
-
<Separator orientation="vertical" />
20
+
<Separator orientation="vertical" style={styles.separator} />
11
21
<div>Right</div>
12
22
</Flex>
13
23
);
+3
apps/docs/src/examples/text/basic.tsx
+3
apps/docs/src/examples/text/basic.tsx
···
17
17
<Flex direction="column" gap="8" style={styles.wrapper}>
18
18
<Flex direction="column" gap="4">
19
19
<Text font="sans" size="2xl" weight="bold">
20
+
Title text
21
+
</Text>
22
+
<Text font="sans" size="2xl" weight="bold">
20
23
Sans serif text (default)
21
24
</Text>
22
25
<Text font="serif" size="2xl" weight="semibold">
+7
apps/docs/src/examples/typography/font-families.tsx
+7
apps/docs/src/examples/typography/font-families.tsx
···
18
18
return (
19
19
<Flex direction="column" gap="10" style={styles.wrapper}>
20
20
<Flex direction="column" gap="4">
21
+
<LabelText>Title (Inter)</LabelText>
22
+
<Text font="title" weight="semibold" size="2xl">
23
+
The quick brown fox jumps over the lazy dog
24
+
</Text>
25
+
<Text font="title">The quick brown fox jumps over the lazy dog</Text>
26
+
</Flex>
27
+
<Flex direction="column" gap="4">
21
28
<LabelText>Sans Serif (Inter)</LabelText>
22
29
<Text font="sans" weight="semibold" size="2xl">
23
30
The quick brown fox jumps over the lazy dog
+3
-2
apps/docs/src/examples/typography/linked-heading.tsx
+3
-2
apps/docs/src/examples/typography/linked-heading.tsx
···
1
+
import { Flex } from "@/components/flex";
1
2
import {
2
3
Heading2,
3
4
Heading3,
···
7
8
8
9
export function LinkedHeadingExample() {
9
10
return (
10
-
<div>
11
+
<Flex direction="column" gap="6">
11
12
<LinkedHeading id="section-1">
12
13
<Heading2>Section 1</Heading2>
13
14
</LinkedHeading>
···
20
21
<LinkedHeading id="detail-1-2-1">
21
22
<Heading4>Detail 1.2.1</Heading4>
22
23
</LinkedHeading>
23
-
</div>
24
+
</Flex>
24
25
);
25
26
}
+3
-3
apps/docs/src/examples/typography/typeramp.tsx
+3
-3
apps/docs/src/examples/typography/typeramp.tsx
···
26
26
export function Typeramp() {
27
27
return (
28
28
<Flex direction="column" gap="8" style={styles.wrapper}>
29
-
<Flex direction="column" gap="4">
29
+
<Flex direction="column" gap="8">
30
30
<LabelText>Headings</LabelText>
31
31
<Heading1>Heading 1 - Page Title</Heading1>
32
32
<Heading2>Heading 2 - Section Title</Heading2>
···
37
37
38
38
<Separator />
39
39
40
-
<Flex direction="column" gap="4">
40
+
<Flex direction="column" gap="6">
41
41
<LabelText>Body Text</LabelText>
42
42
<Body>
43
43
Body text for paragraphs and general content. This is the standard
···
51
51
52
52
<Separator />
53
53
54
-
<Flex direction="column" gap="4">
54
+
<Flex direction="column" gap="6">
55
55
<LabelText>Labels</LabelText>
56
56
<LabelText>Form Label</LabelText>
57
57
<SubLabel>Sub Label - Additional context or metadata</SubLabel>
+53
-13
apps/docs/src/lib/Example.tsx
+53
-13
apps/docs/src/lib/Example.tsx
···
1
1
import * as stylex from "@stylexjs/stylex";
2
2
import { useEffect, useRef, useState } from "react";
3
+
import { Button, Disclosure, DisclosurePanel } from "react-aria-components";
3
4
import { examples } from "virtual:examples";
4
5
5
6
import { Card } from "@/components/card";
6
7
import { CopyToClipboardButton } from "@/components/copy-to-clipboard-button";
7
8
import { Flex } from "@/components/flex";
8
9
10
+
import { animationDuration } from "../components/theme/animations-duration.stylex";
9
11
import { uiColor } from "../components/theme/color.stylex";
12
+
import { mediaQueries } from "../components/theme/media-queries.stylex";
10
13
import { radius } from "../components/theme/radius.stylex";
14
+
import { ui } from "../components/theme/semantic-color.stylex";
11
15
import { spacing } from "../components/theme/spacing.stylex";
12
16
13
17
const styles = stylex.create({
14
18
card: {
15
-
borderRadius: {
16
-
default: radius.lg,
17
-
"@supports (corner-shape: squircle)": radius["4xl"],
18
-
},
19
+
borderRadius: radius.lg,
19
20
cornerShape: "squircle",
20
21
overflow: "hidden",
21
22
marginBottom: spacing["8"],
···
58
59
right: spacing["3"],
59
60
top: spacing["3"],
60
61
},
62
+
toggleButton: {
63
+
borderWidth: 0,
64
+
color: {
65
+
default: uiColor.text1,
66
+
":is([data-hovered])": uiColor.text2,
67
+
},
68
+
borderTopColor: uiColor.border1,
69
+
borderTopStyle: "solid",
70
+
borderTopWidth: 1,
71
+
paddingBottom: spacing["2"],
72
+
paddingLeft: spacing["3"],
73
+
paddingRight: spacing["3"],
74
+
paddingTop: spacing["2"],
75
+
width: "100%",
76
+
},
77
+
panel: {
78
+
overflow: "clip",
79
+
transitionDuration: {
80
+
default: animationDuration.default,
81
+
[mediaQueries.reducedMotion]: null,
82
+
},
83
+
transitionProperty: "height",
84
+
transitionTimingFunction: "ease-in-out",
85
+
height: "var(--disclosure-panel-height)",
86
+
},
61
87
});
62
88
63
89
export function Example({
···
70
96
const code = examples[Component.slug];
71
97
const ref = useRef<HTMLDivElement>(null);
72
98
const [textContent, setTextContent] = useState("error");
99
+
const [isOpen, setIsOpen] = useState(false);
73
100
74
101
useEffect(() => {
75
102
// eslint-disable-next-line @eslint-react/hooks-extra/no-direct-set-state-in-use-effect, react-hooks/set-state-in-effect
···
83
110
<Component />
84
111
</div>
85
112
86
-
<div {...stylex.props(styles.codeWrapper)}>
87
-
<div
88
-
ref={ref}
89
-
{...stylex.props(styles.code)}
90
-
// eslint-disable-next-line @eslint-react/dom/no-dangerously-set-innerhtml
91
-
dangerouslySetInnerHTML={{ __html: code ?? "" }}
92
-
/>
93
-
<CopyToClipboardButton style={styles.copyButton} text={textContent} />
94
-
</div>
113
+
<Disclosure isExpanded={isOpen} onExpandedChange={setIsOpen}>
114
+
<Button
115
+
slot="trigger"
116
+
{...stylex.props(styles.toggleButton, ui.bgUi)}
117
+
>
118
+
{isOpen ? "Hide Code" : "Show Code"}
119
+
</Button>
120
+
<DisclosurePanel {...stylex.props(styles.panel)}>
121
+
<div {...stylex.props(styles.codeWrapper)}>
122
+
<div
123
+
ref={ref}
124
+
{...stylex.props(styles.code)}
125
+
// eslint-disable-next-line @eslint-react/dom/no-dangerously-set-innerhtml
126
+
dangerouslySetInnerHTML={{ __html: code ?? "" }}
127
+
/>
128
+
<CopyToClipboardButton
129
+
style={styles.copyButton}
130
+
text={textContent}
131
+
/>
132
+
</div>
133
+
</DisclosurePanel>
134
+
</Disclosure>
95
135
</Flex>
96
136
</Card>
97
137
);
+11
-1
apps/docs/src/lib/PropDocs.tsx
+11
-1
apps/docs/src/lib/PropDocs.tsx
···
176
176
export function PropDocs({ components }: { components: Array<string> }) {
177
177
const docs = propDocs
178
178
.filter((doc) => components.includes(doc.displayName))
179
+
// oxlint-disable-next-line unicorn/no-array-reduce
180
+
.reduceRight((acc, doc) => {
181
+
if (
182
+
doc.displayName &&
183
+
!acc.some((d) => d.displayName === doc.displayName)
184
+
) {
185
+
acc.push(doc);
186
+
}
187
+
return acc;
188
+
}, [] as Array<ComponentDoc>)
179
189
.toSorted((a, b) => {
180
190
const aIndex = components.indexOf(a.displayName);
181
191
const bIndex = components.indexOf(b.displayName);
182
192
return aIndex - bIndex;
183
193
});
184
-
const [selected, setSelected] = useState(docs[0].displayName);
194
+
const [selected, setSelected] = useState(docs[0]?.displayName);
185
195
186
196
return (
187
197
<Flex direction="column" gap="6">
+6
-2
apps/docs/src/routes/docs.$.tsx
+6
-2
apps/docs/src/routes/docs.$.tsx
···
12
12
13
13
import type { LinkProps } from "@/components/link";
14
14
15
-
import { Content } from "@/components/content";
16
15
import { Flex } from "@/components/flex";
17
16
import { Link as TypographyLink } from "@/components/link";
18
17
import { SidebarLayout } from "@/components/sidebar-layout";
···
34
33
} from "@/components/typography";
35
34
import { Text } from "@/components/typography/text";
36
35
36
+
import { breakpoints } from "../components/theme/breakpoints.stylex";
37
37
import { spacing } from "../components/theme/spacing.stylex";
38
38
39
39
declare global {
···
50
50
const styles = stylex.create({
51
51
header: {
52
52
marginBottom: spacing["12"],
53
+
marginTop: {
54
+
default: spacing["6"],
55
+
[breakpoints.sm]: spacing["12"],
56
+
},
53
57
},
54
58
defaultMargin: {
55
59
marginBottom: spacing["6"],
···
174
178
return (
175
179
<>
176
180
<SidebarLayout.Page>
177
-
<Flex direction="column" gap="6" style={styles.header}>
181
+
<Flex direction="column" gap="8" style={styles.header}>
178
182
<Heading1>{doc.title}</Heading1>
179
183
<Text size="xl" variant="secondary">
180
184
{doc.description}
+10
-2
packages/hip-ui/src/components/alert/index.tsx
+10
-2
packages/hip-ui/src/components/alert/index.tsx
···
100
100
},
101
101
content: {
102
102
gridArea: "content",
103
-
gap: spacing["1"],
103
+
gap: spacing["3"],
104
104
display: "flex",
105
105
flexDirection: "column",
106
+
},
107
+
contentWithDescription: {
108
+
paddingTop: spacing["0.5"],
106
109
},
107
110
icon: {
108
111
gridArea: "icon",
···
343
346
{displayIcon != null && (
344
347
<div {...stylex.props(styles.icon)}>{displayIcon}</div>
345
348
)}
346
-
<div {...stylex.props(styles.content)}>
349
+
<div
350
+
{...stylex.props(
351
+
styles.content,
352
+
children != null && styles.contentWithDescription,
353
+
)}
354
+
>
347
355
{title != null && (
348
356
<Text size="base" weight="semibold">
349
357
{title}
+3
-3
packages/hip-ui/src/components/color-swatch/index.tsx
+3
-3
packages/hip-ui/src/components/color-swatch/index.tsx
···
22
22
cornerShape: "squircle",
23
23
},
24
24
swatchSm: {
25
-
borderRadius: radius.sm,
25
+
borderRadius: radius.xs,
26
26
height: spacing["4"],
27
27
width: spacing["4"],
28
28
},
29
29
swatchMd: {
30
-
borderRadius: radius.md,
30
+
borderRadius: radius.sm,
31
31
height: spacing["6"],
32
32
width: spacing["6"],
33
33
},
34
34
swatchLg: {
35
-
borderRadius: radius.lg,
35
+
borderRadius: radius.md,
36
36
height: spacing["8"],
37
37
width: spacing["8"],
38
38
},
+1
-2
packages/hip-ui/src/components/combobox/index.tsx
+1
-2
packages/hip-ui/src/components/combobox/index.tsx
+1
-1
packages/hip-ui/src/components/editable-text/index.tsx
+1
-1
packages/hip-ui/src/components/editable-text/index.tsx
+1
-1
packages/hip-ui/src/components/segmented-control/index.tsx
+1
-1
packages/hip-ui/src/components/segmented-control/index.tsx
+1
-1
packages/hip-ui/src/components/select/index.tsx
+1
-1
packages/hip-ui/src/components/select/index.tsx
+1
-1
packages/hip-ui/src/components/theme/useButtonStyles.ts
+1
-1
packages/hip-ui/src/components/theme/useButtonStyles.ts
+1
-1
packages/hip-ui/src/components/theme/useListBoxItemStyles.ts
+1
-1
packages/hip-ui/src/components/theme/useListBoxItemStyles.ts
+1
packages/hip-ui/src/components/toast/Toast.tsx
+1
packages/hip-ui/src/components/toast/Toast.tsx
+2
packages/hip-ui/src/components/toast/index.tsx
+2
packages/hip-ui/src/components/toast/index.tsx
+5
packages/hip-ui/src/components/typography/index.tsx
+5
packages/hip-ui/src/components/typography/index.tsx
···
47
47
top: spacing["2.5"],
48
48
},
49
49
blockquote: {
50
+
gap: spacing["5"],
50
51
color: ui.textDim,
52
+
display: "flex",
53
+
flexDirection: "column",
51
54
fontFamily: fontFamily["serif"],
52
55
borderLeftColor: ui.borderDim,
53
56
borderLeftStyle: "solid",
···
56
59
marginLeft: spacing["2"],
57
60
marginRight: 0,
58
61
marginTop: 0,
62
+
paddingBottom: spacing["2"],
59
63
paddingLeft: spacing["4"],
64
+
paddingTop: spacing["2"],
60
65
},
61
66
unorderedList: {
62
67
margin: 0,
+80
-80
pnpm-lock.yaml
+80
-80
pnpm-lock.yaml
···
97
97
version: 61.0.2(eslint@9.38.0(jiti@2.6.1))
98
98
oxfmt:
99
99
specifier: latest
100
-
version: 0.41.0
100
+
version: 0.42.0
101
101
oxlint:
102
102
specifier: ^1.48.0
103
103
version: 1.50.0
···
1116
1116
react: ^19.1.0
1117
1117
react-dom: ^19.1.0
1118
1118
1119
-
'@oxfmt/binding-android-arm-eabi@0.41.0':
1120
-
resolution: {integrity: sha512-REfrqeMKGkfMP+m/ScX4f5jJBSmVNYcpoDF8vP8f8eYPDuPGZmzp56NIUsYmx3h7f6NzC6cE3gqh8GDWrJHCKw==}
1119
+
'@oxfmt/binding-android-arm-eabi@0.42.0':
1120
+
resolution: {integrity: sha512-dsqPTYsozeokRjlrt/b4E7Pj0z3eS3Eg74TWQuuKbjY4VttBmA88rB7d50Xrd+TZ986qdXCNeZRPEzZHAe+jow==}
1121
1121
engines: {node: ^20.19.0 || >=22.12.0}
1122
1122
cpu: [arm]
1123
1123
os: [android]
1124
1124
1125
-
'@oxfmt/binding-android-arm64@0.41.0':
1126
-
resolution: {integrity: sha512-s0b1dxNgb2KomspFV2LfogC2XtSJB42POXF4bMCLJyvQmAGos4ZtjGPfQreToQEaY0FQFjz3030ggI36rF1q5g==}
1125
+
'@oxfmt/binding-android-arm64@0.42.0':
1126
+
resolution: {integrity: sha512-t+aAjHxcr5eOBphFHdg1ouQU9qmZZoRxnX7UOJSaTwSoKsb6TYezNKO0YbWytGXCECObRqNcUxPoPr0KaraAIg==}
1127
1127
engines: {node: ^20.19.0 || >=22.12.0}
1128
1128
cpu: [arm64]
1129
1129
os: [android]
1130
1130
1131
-
'@oxfmt/binding-darwin-arm64@0.41.0':
1132
-
resolution: {integrity: sha512-EGXGualADbv/ZmamE7/2DbsrYmjoPlAmHEpTL4vapLF4EfVD6fr8/uQDFnPJkUBjiSWFJZtFNsGeN1B6V3owmA==}
1131
+
'@oxfmt/binding-darwin-arm64@0.42.0':
1132
+
resolution: {integrity: sha512-ulpSEYMKg61C5bRMZinFHrKJYRoKGVbvMEXA5zM1puX3O9T6Q4XXDbft20yrDijpYWeuG59z3Nabt+npeTsM1A==}
1133
1133
engines: {node: ^20.19.0 || >=22.12.0}
1134
1134
cpu: [arm64]
1135
1135
os: [darwin]
1136
1136
1137
-
'@oxfmt/binding-darwin-x64@0.41.0':
1138
-
resolution: {integrity: sha512-WxySJEvdQQYMmyvISH3qDpTvoS0ebnIP63IMxLLWowJyPp/AAH0hdWtlo+iGNK5y3eVfa5jZguwNaQkDKWpGSw==}
1137
+
'@oxfmt/binding-darwin-x64@0.42.0':
1138
+
resolution: {integrity: sha512-ttxLKhQYPdFiM8I/Ri37cvqChE4Xa562nNOsZFcv1CKTVLeEozXjKuYClNvxkXmNlcF55nzM80P+CQkdFBu+uQ==}
1139
1139
engines: {node: ^20.19.0 || >=22.12.0}
1140
1140
cpu: [x64]
1141
1141
os: [darwin]
1142
1142
1143
-
'@oxfmt/binding-freebsd-x64@0.41.0':
1144
-
resolution: {integrity: sha512-Y2kzMkv3U3oyuYaR4wTfGjOTYTXiFC/hXmG0yVASKkbh02BJkvD98Ij8bIevr45hNZ0DmZEgqiXF+9buD4yMYQ==}
1143
+
'@oxfmt/binding-freebsd-x64@0.42.0':
1144
+
resolution: {integrity: sha512-Og7QS3yI3tdIKYZ58SXik0rADxIk2jmd+/YvuHRyKULWpG4V2fR5V4hvKm624Mc0cQET35waPXiCQWvjQEjwYQ==}
1145
1145
engines: {node: ^20.19.0 || >=22.12.0}
1146
1146
cpu: [x64]
1147
1147
os: [freebsd]
1148
1148
1149
-
'@oxfmt/binding-linux-arm-gnueabihf@0.41.0':
1150
-
resolution: {integrity: sha512-ptazDjdUyhket01IjPTT6ULS1KFuBfTUU97osTP96X5y/0oso+AgAaJzuH81oP0+XXyrWIHbRzozSAuQm4p48g==}
1149
+
'@oxfmt/binding-linux-arm-gnueabihf@0.42.0':
1150
+
resolution: {integrity: sha512-jwLOw/3CW4H6Vxcry4/buQHk7zm9Ne2YsidzTL1kpiMe4qqrRCwev3dkyWe2YkFmP+iZCQ7zku4KwjcLRoh8ew==}
1151
1151
engines: {node: ^20.19.0 || >=22.12.0}
1152
1152
cpu: [arm]
1153
1153
os: [linux]
1154
1154
1155
-
'@oxfmt/binding-linux-arm-musleabihf@0.41.0':
1156
-
resolution: {integrity: sha512-UkoL2OKxFD+56bPEBcdGn+4juTW4HRv/T6w1dIDLnvKKWr6DbarB/mtHXlADKlFiJubJz8pRkttOR7qjYR6lTA==}
1155
+
'@oxfmt/binding-linux-arm-musleabihf@0.42.0':
1156
+
resolution: {integrity: sha512-XwXu2vkMtiq2h7tfvN+WA/9/5/1IoGAVCFPiiQUvcAuG3efR97KNcRGM8BetmbYouFotQ2bDal3yyjUx6IPsTg==}
1157
1157
engines: {node: ^20.19.0 || >=22.12.0}
1158
1158
cpu: [arm]
1159
1159
os: [linux]
1160
1160
1161
-
'@oxfmt/binding-linux-arm64-gnu@0.41.0':
1162
-
resolution: {integrity: sha512-gofu0PuumSOHYczD8p62CPY4UF6ee+rSLZJdUXkpwxg6pILiwSDBIouPskjF/5nF3A7QZTz2O9KFNkNxxFN9tA==}
1161
+
'@oxfmt/binding-linux-arm64-gnu@0.42.0':
1162
+
resolution: {integrity: sha512-ea7s/XUJoT7ENAtUQDudFe3nkSM3e3Qpz4nJFRdzO2wbgXEcjnchKLEsV3+t4ev3r8nWxIYr9NRjPWtnyIFJVA==}
1163
1163
engines: {node: ^20.19.0 || >=22.12.0}
1164
1164
cpu: [arm64]
1165
1165
os: [linux]
1166
1166
1167
-
'@oxfmt/binding-linux-arm64-musl@0.41.0':
1168
-
resolution: {integrity: sha512-VfVZxL0+6RU86T8F8vKiDBa+iHsr8PAjQmKGBzSCAX70b6x+UOMFl+2dNihmKmUwqkCazCPfYjt6SuAPOeQJ3g==}
1167
+
'@oxfmt/binding-linux-arm64-musl@0.42.0':
1168
+
resolution: {integrity: sha512-+JA0YMlSdDqmacygGi2REp57c3fN+tzARD8nwsukx9pkCHK+6DkbAA9ojS4lNKsiBjIW8WWa0pBrBWhdZEqfuw==}
1169
1169
engines: {node: ^20.19.0 || >=22.12.0}
1170
1170
cpu: [arm64]
1171
1171
os: [linux]
1172
1172
1173
-
'@oxfmt/binding-linux-ppc64-gnu@0.41.0':
1174
-
resolution: {integrity: sha512-bwzokz2eGvdfJbc0i+zXMJ4BBjQPqg13jyWpEEZDOrBCQ91r8KeY2Mi2kUeuMTZNFXju+jcAbAbpyJxRGla0eg==}
1173
+
'@oxfmt/binding-linux-ppc64-gnu@0.42.0':
1174
+
resolution: {integrity: sha512-VfnET0j4Y5mdfCzh5gBt0NK28lgn5DKx+8WgSMLYYeSooHhohdbzwAStLki9pNuGy51y4I7IoW8bqwAaCMiJQg==}
1175
1175
engines: {node: ^20.19.0 || >=22.12.0}
1176
1176
cpu: [ppc64]
1177
1177
os: [linux]
1178
1178
1179
-
'@oxfmt/binding-linux-riscv64-gnu@0.41.0':
1180
-
resolution: {integrity: sha512-POLM//PCH9uqDeNDwWL3b3DkMmI3oI2cU6hwc2lnztD1o7dzrQs3R9nq555BZ6wI7t2lyhT9CS+CRaz5X0XqLA==}
1179
+
'@oxfmt/binding-linux-riscv64-gnu@0.42.0':
1180
+
resolution: {integrity: sha512-gVlCbmBkB0fxBWbhBj9rcxezPydsQHf4MFKeHoTSPicOQ+8oGeTQgQ8EeesSybWeiFPVRx3bgdt4IJnH6nOjAA==}
1181
1181
engines: {node: ^20.19.0 || >=22.12.0}
1182
1182
cpu: [riscv64]
1183
1183
os: [linux]
1184
1184
1185
-
'@oxfmt/binding-linux-riscv64-musl@0.41.0':
1186
-
resolution: {integrity: sha512-NNK7PzhFqLUwx/G12Xtm6scGv7UITvyGdAR5Y+TlqsG+essnuRWR4jRNODWRjzLZod0T3SayRbnkSIWMBov33w==}
1185
+
'@oxfmt/binding-linux-riscv64-musl@0.42.0':
1186
+
resolution: {integrity: sha512-zN5OfstL0avgt/IgvRu0zjQzVh/EPkcLzs33E9LMAzpqlLWiPWeMDZyMGFlSRGOdDjuNmlZBCgj0pFnK5u32TQ==}
1187
1187
engines: {node: ^20.19.0 || >=22.12.0}
1188
1188
cpu: [riscv64]
1189
1189
os: [linux]
1190
1190
1191
-
'@oxfmt/binding-linux-s390x-gnu@0.41.0':
1192
-
resolution: {integrity: sha512-qVf/zDC5cN9eKe4qI/O/m445er1IRl6swsSl7jHkqmOSVfknwCe5JXitYjZca+V/cNJSU/xPlC5EFMabMMFDpw==}
1191
+
'@oxfmt/binding-linux-s390x-gnu@0.42.0':
1192
+
resolution: {integrity: sha512-9X6+H2L0qMc2sCAgO9HS03bkGLMKvOFjmEdchaFlany3vNZOjnVui//D8k/xZAtQv2vaCs1reD5KAgPoIU4msA==}
1193
1193
engines: {node: ^20.19.0 || >=22.12.0}
1194
1194
cpu: [s390x]
1195
1195
os: [linux]
1196
1196
1197
-
'@oxfmt/binding-linux-x64-gnu@0.41.0':
1198
-
resolution: {integrity: sha512-ojxYWu7vUb6ysYqVCPHuAPVZHAI40gfZ0PDtZAMwVmh2f0V8ExpPIKoAKr7/8sNbAXJBBpZhs2coypIo2jJX4w==}
1197
+
'@oxfmt/binding-linux-x64-gnu@0.42.0':
1198
+
resolution: {integrity: sha512-BajxJ6KQvMMdpXGPWhBGyjb2Jvx4uec0w+wi6TJZ6Tv7+MzPwe0pO8g5h1U0jyFgoaF7mDl6yKPW3ykWcbUJRw==}
1199
1199
engines: {node: ^20.19.0 || >=22.12.0}
1200
1200
cpu: [x64]
1201
1201
os: [linux]
1202
1202
1203
-
'@oxfmt/binding-linux-x64-musl@0.41.0':
1204
-
resolution: {integrity: sha512-O2exZLBxoCMIv2vlvcbkdedazJPTdG0VSup+0QUCfYQtx751zCZNboX2ZUOiQ/gDTdhtXvSiot0h6GEGkOyalA==}
1203
+
'@oxfmt/binding-linux-x64-musl@0.42.0':
1204
+
resolution: {integrity: sha512-0wV284I6vc5f0AqAhgAbHU2935B4bVpncPoe5n/WzVZY/KnHgqxC8iSFGeSyLWEgstFboIcWkOPck7tqbdHkzA==}
1205
1205
engines: {node: ^20.19.0 || >=22.12.0}
1206
1206
cpu: [x64]
1207
1207
os: [linux]
1208
1208
1209
-
'@oxfmt/binding-openharmony-arm64@0.41.0':
1210
-
resolution: {integrity: sha512-N+31/VoL+z+NNBt8viy3I4NaIdPbiYeOnB884LKqvXldaE2dRztdPv3q5ipfZYv0RwFp7JfqS4I27K/DSHCakg==}
1209
+
'@oxfmt/binding-openharmony-arm64@0.42.0':
1210
+
resolution: {integrity: sha512-p4BG6HpGnhfgHk1rzZfyR6zcWkE7iLrWxyehHfXUy4Qa5j3e0roglFOdP/Nj5cJJ58MA3isQ5dlfkW2nNEpolw==}
1211
1211
engines: {node: ^20.19.0 || >=22.12.0}
1212
1212
cpu: [arm64]
1213
1213
os: [openharmony]
1214
1214
1215
-
'@oxfmt/binding-win32-arm64-msvc@0.41.0':
1216
-
resolution: {integrity: sha512-Z7NAtu/RN8kjCQ1y5oDD0nTAeRswh3GJ93qwcW51srmidP7XPBmZbLlwERu1W5veCevQJtPS9xmkpcDTYsGIwQ==}
1215
+
'@oxfmt/binding-win32-arm64-msvc@0.42.0':
1216
+
resolution: {integrity: sha512-mn//WV60A+IetORDxYieYGAoQso4KnVRRjORDewMcod4irlRe0OSC7YPhhwaexYNPQz/GCFk+v9iUcZ2W22yxQ==}
1217
1217
engines: {node: ^20.19.0 || >=22.12.0}
1218
1218
cpu: [arm64]
1219
1219
os: [win32]
1220
1220
1221
-
'@oxfmt/binding-win32-ia32-msvc@0.41.0':
1222
-
resolution: {integrity: sha512-uNxxP3l4bJ6VyzIeRqCmBU2Q0SkCFgIhvx9/9dJ9V8t/v+jP1IBsuaLwCXGR8JPHtkj4tFp+RHtUmU2ZYAUpMA==}
1221
+
'@oxfmt/binding-win32-ia32-msvc@0.42.0':
1222
+
resolution: {integrity: sha512-3gWltUrvuz4LPJXWivoAxZ28Of2O4N7OGuM5/X3ubPXCEV8hmgECLZzjz7UYvSDUS3grfdccQwmjynm+51EFpw==}
1223
1223
engines: {node: ^20.19.0 || >=22.12.0}
1224
1224
cpu: [ia32]
1225
1225
os: [win32]
1226
1226
1227
-
'@oxfmt/binding-win32-x64-msvc@0.41.0':
1228
-
resolution: {integrity: sha512-49ZSpbZ1noozyPapE8SUOSm3IN0Ze4b5nkO+4+7fq6oEYQQJFhE0saj5k/Gg4oewVPdjn0L3ZFeWk2Vehjcw7A==}
1227
+
'@oxfmt/binding-win32-x64-msvc@0.42.0':
1228
+
resolution: {integrity: sha512-Wg4TMAfQRL9J9AZevJ/ZNy3uyyDztDYQtGr4P8UyyzIhLhFrdSmz1J/9JT+rv0fiCDLaFOBQnj3f3K3+a5PzDQ==}
1229
1229
engines: {node: ^20.19.0 || >=22.12.0}
1230
1230
cpu: [x64]
1231
1231
os: [win32]
···
6317
6317
resolution: {integrity: sha512-qFOyK5PjiWZd+QQIh+1jhdb9LpxTF0qs7Pm8o5QHYZ0M3vKqSqzsZaEB6oWlxZ+q2sJBMI/Ktgd2N5ZwQoRHfg==}
6318
6318
engines: {node: '>= 0.4'}
6319
6319
6320
-
oxfmt@0.41.0:
6321
-
resolution: {integrity: sha512-sKLdJZdQ3bw6x9qKiT7+eID4MNEXlDHf5ZacfIircrq6Qwjk0L6t2/JQlZZrVHTXJawK3KaMuBoJnEJPcqCEdg==}
6320
+
oxfmt@0.42.0:
6321
+
resolution: {integrity: sha512-QhejGErLSMReNuZ6vxgFHDyGoPbjTRNi6uGHjy0cvIjOQFqD6xmr/T+3L41ixR3NIgzcNiJ6ylQKpvShTgDfqg==}
6322
6322
engines: {node: ^20.19.0 || >=22.12.0}
6323
6323
hasBin: true
6324
6324
···
8705
8705
react: 19.2.0
8706
8706
react-dom: 19.2.0(react@19.2.0)
8707
8707
8708
-
'@oxfmt/binding-android-arm-eabi@0.41.0':
8708
+
'@oxfmt/binding-android-arm-eabi@0.42.0':
8709
8709
optional: true
8710
8710
8711
-
'@oxfmt/binding-android-arm64@0.41.0':
8711
+
'@oxfmt/binding-android-arm64@0.42.0':
8712
8712
optional: true
8713
8713
8714
-
'@oxfmt/binding-darwin-arm64@0.41.0':
8714
+
'@oxfmt/binding-darwin-arm64@0.42.0':
8715
8715
optional: true
8716
8716
8717
-
'@oxfmt/binding-darwin-x64@0.41.0':
8717
+
'@oxfmt/binding-darwin-x64@0.42.0':
8718
8718
optional: true
8719
8719
8720
-
'@oxfmt/binding-freebsd-x64@0.41.0':
8720
+
'@oxfmt/binding-freebsd-x64@0.42.0':
8721
8721
optional: true
8722
8722
8723
-
'@oxfmt/binding-linux-arm-gnueabihf@0.41.0':
8723
+
'@oxfmt/binding-linux-arm-gnueabihf@0.42.0':
8724
8724
optional: true
8725
8725
8726
-
'@oxfmt/binding-linux-arm-musleabihf@0.41.0':
8726
+
'@oxfmt/binding-linux-arm-musleabihf@0.42.0':
8727
8727
optional: true
8728
8728
8729
-
'@oxfmt/binding-linux-arm64-gnu@0.41.0':
8729
+
'@oxfmt/binding-linux-arm64-gnu@0.42.0':
8730
8730
optional: true
8731
8731
8732
-
'@oxfmt/binding-linux-arm64-musl@0.41.0':
8732
+
'@oxfmt/binding-linux-arm64-musl@0.42.0':
8733
8733
optional: true
8734
8734
8735
-
'@oxfmt/binding-linux-ppc64-gnu@0.41.0':
8735
+
'@oxfmt/binding-linux-ppc64-gnu@0.42.0':
8736
8736
optional: true
8737
8737
8738
-
'@oxfmt/binding-linux-riscv64-gnu@0.41.0':
8738
+
'@oxfmt/binding-linux-riscv64-gnu@0.42.0':
8739
8739
optional: true
8740
8740
8741
-
'@oxfmt/binding-linux-riscv64-musl@0.41.0':
8741
+
'@oxfmt/binding-linux-riscv64-musl@0.42.0':
8742
8742
optional: true
8743
8743
8744
-
'@oxfmt/binding-linux-s390x-gnu@0.41.0':
8744
+
'@oxfmt/binding-linux-s390x-gnu@0.42.0':
8745
8745
optional: true
8746
8746
8747
-
'@oxfmt/binding-linux-x64-gnu@0.41.0':
8747
+
'@oxfmt/binding-linux-x64-gnu@0.42.0':
8748
8748
optional: true
8749
8749
8750
-
'@oxfmt/binding-linux-x64-musl@0.41.0':
8750
+
'@oxfmt/binding-linux-x64-musl@0.42.0':
8751
8751
optional: true
8752
8752
8753
-
'@oxfmt/binding-openharmony-arm64@0.41.0':
8753
+
'@oxfmt/binding-openharmony-arm64@0.42.0':
8754
8754
optional: true
8755
8755
8756
-
'@oxfmt/binding-win32-arm64-msvc@0.41.0':
8756
+
'@oxfmt/binding-win32-arm64-msvc@0.42.0':
8757
8757
optional: true
8758
8758
8759
-
'@oxfmt/binding-win32-ia32-msvc@0.41.0':
8759
+
'@oxfmt/binding-win32-ia32-msvc@0.42.0':
8760
8760
optional: true
8761
8761
8762
-
'@oxfmt/binding-win32-x64-msvc@0.41.0':
8762
+
'@oxfmt/binding-win32-x64-msvc@0.42.0':
8763
8763
optional: true
8764
8764
8765
8765
'@oxlint/binding-android-arm-eabi@1.50.0':
···
15099
15099
object-keys: 1.1.1
15100
15100
safe-push-apply: 1.0.0
15101
15101
15102
-
oxfmt@0.41.0:
15102
+
oxfmt@0.42.0:
15103
15103
dependencies:
15104
15104
tinypool: 2.1.0
15105
15105
optionalDependencies:
15106
-
'@oxfmt/binding-android-arm-eabi': 0.41.0
15107
-
'@oxfmt/binding-android-arm64': 0.41.0
15108
-
'@oxfmt/binding-darwin-arm64': 0.41.0
15109
-
'@oxfmt/binding-darwin-x64': 0.41.0
15110
-
'@oxfmt/binding-freebsd-x64': 0.41.0
15111
-
'@oxfmt/binding-linux-arm-gnueabihf': 0.41.0
15112
-
'@oxfmt/binding-linux-arm-musleabihf': 0.41.0
15113
-
'@oxfmt/binding-linux-arm64-gnu': 0.41.0
15114
-
'@oxfmt/binding-linux-arm64-musl': 0.41.0
15115
-
'@oxfmt/binding-linux-ppc64-gnu': 0.41.0
15116
-
'@oxfmt/binding-linux-riscv64-gnu': 0.41.0
15117
-
'@oxfmt/binding-linux-riscv64-musl': 0.41.0
15118
-
'@oxfmt/binding-linux-s390x-gnu': 0.41.0
15119
-
'@oxfmt/binding-linux-x64-gnu': 0.41.0
15120
-
'@oxfmt/binding-linux-x64-musl': 0.41.0
15121
-
'@oxfmt/binding-openharmony-arm64': 0.41.0
15122
-
'@oxfmt/binding-win32-arm64-msvc': 0.41.0
15123
-
'@oxfmt/binding-win32-ia32-msvc': 0.41.0
15124
-
'@oxfmt/binding-win32-x64-msvc': 0.41.0
15106
+
'@oxfmt/binding-android-arm-eabi': 0.42.0
15107
+
'@oxfmt/binding-android-arm64': 0.42.0
15108
+
'@oxfmt/binding-darwin-arm64': 0.42.0
15109
+
'@oxfmt/binding-darwin-x64': 0.42.0
15110
+
'@oxfmt/binding-freebsd-x64': 0.42.0
15111
+
'@oxfmt/binding-linux-arm-gnueabihf': 0.42.0
15112
+
'@oxfmt/binding-linux-arm-musleabihf': 0.42.0
15113
+
'@oxfmt/binding-linux-arm64-gnu': 0.42.0
15114
+
'@oxfmt/binding-linux-arm64-musl': 0.42.0
15115
+
'@oxfmt/binding-linux-ppc64-gnu': 0.42.0
15116
+
'@oxfmt/binding-linux-riscv64-gnu': 0.42.0
15117
+
'@oxfmt/binding-linux-riscv64-musl': 0.42.0
15118
+
'@oxfmt/binding-linux-s390x-gnu': 0.42.0
15119
+
'@oxfmt/binding-linux-x64-gnu': 0.42.0
15120
+
'@oxfmt/binding-linux-x64-musl': 0.42.0
15121
+
'@oxfmt/binding-openharmony-arm64': 0.42.0
15122
+
'@oxfmt/binding-win32-arm64-msvc': 0.42.0
15123
+
'@oxfmt/binding-win32-ia32-msvc': 0.42.0
15124
+
'@oxfmt/binding-win32-x64-msvc': 0.42.0
15125
15125
15126
15126
oxlint@1.50.0:
15127
15127
optionalDependencies: