A design system in a box.
hip-ui.tngl.io/docs/introduction
docs
+3791
-36
+1
apps/docs/package.json
+1
apps/docs/package.json
+6
apps/docs/src/components/alert-dialog/index.tsx
+6
apps/docs/src/components/alert-dialog/index.tsx
+5
apps/docs/src/components/avatar/index.tsx
+5
apps/docs/src/components/avatar/index.tsx
···
75
75
React.ComponentProps<"div">,
76
76
"style" | "className" | "children"
77
77
> {
78
+
/** The stylex styles of the avatar. */
78
79
style?: stylex.StyleXStyles | stylex.StyleXStyles[];
80
+
/** The source of the image. */
79
81
src?: string;
82
+
/** The alt text of the image. */
80
83
alt?: string;
84
+
/** The fallback content of the avatar. */
81
85
fallback: React.ReactNode;
86
+
/** The size of the avatar. */
82
87
size?: Size | "xl";
83
88
}
84
89
+14
-12
apps/docs/src/components/card/index.tsx
+14
-12
apps/docs/src/components/card/index.tsx
···
94
94
const size = sizeProp || use(SizeContext);
95
95
96
96
return (
97
-
<div
98
-
{...props}
99
-
data-card-size={size}
100
-
{...stylex.props(
101
-
styles.card,
102
-
ui.bgSubtle,
103
-
ui.border,
104
-
ui.text,
105
-
style,
106
-
styles[`${size}Card`],
107
-
)}
108
-
/>
97
+
<SizeContext value={size}>
98
+
<div
99
+
{...props}
100
+
data-card-size={size}
101
+
{...stylex.props(
102
+
styles.card,
103
+
ui.bgSubtle,
104
+
ui.border,
105
+
ui.text,
106
+
style,
107
+
styles[`${size}Card`],
108
+
)}
109
+
/>
110
+
</SizeContext>
109
111
);
110
112
};
111
113
+196
apps/docs/src/components/table/index.tsx
+196
apps/docs/src/components/table/index.tsx
···
1
+
import * as stylex from "@stylexjs/stylex";
2
+
import { ArrowDown, ArrowUp, GripVertical } from "lucide-react";
3
+
import { use } from "react";
4
+
import {
5
+
TableBodyProps as AriaTableBodyProps,
6
+
TableBody as AriaTableBody,
7
+
TableProps as AriaTableProps,
8
+
Table as AriaTable,
9
+
TableHeader as AriaTableHeader,
10
+
TableHeaderProps as AriaTableHeaderProps,
11
+
useTableOptions,
12
+
Column as AriaColumn,
13
+
Collection,
14
+
Row as AriaRow,
15
+
RowProps as AriaRowProps,
16
+
Cell as AriaCell,
17
+
ColumnProps as AriaColumnProps,
18
+
CellProps as AriaCellProps,
19
+
} from "react-aria-components";
20
+
21
+
import { Checkbox } from "../checkbox";
22
+
import { SizeContext } from "../context";
23
+
import { IconButton } from "../icon-button";
24
+
import { uiColor } from "../theme/semantic-color.stylex";
25
+
import { spacing } from "../theme/spacing.stylex";
26
+
import { Size } from "../theme/types";
27
+
28
+
const styles = stylex.create({
29
+
table: {},
30
+
tableHeader: {},
31
+
row: {},
32
+
column: {
33
+
borderBottomColor: uiColor.border2,
34
+
borderBottomStyle: "solid",
35
+
borderBottomWidth: 1,
36
+
},
37
+
tableBody: {},
38
+
cell: {
39
+
height: {
40
+
default: spacing["8"],
41
+
":is([data-table-size=md] *)": spacing["10"],
42
+
":is([data-table-size=lg] *)": spacing["12"],
43
+
},
44
+
paddingBottom: {
45
+
default: spacing["1"],
46
+
":is([data-table-size=md] *)": spacing["2"],
47
+
":is([data-table-size=lg] *)": spacing["3"],
48
+
},
49
+
paddingLeft: {
50
+
":not(:first-child)": spacing["2"],
51
+
":is([data-table-size=md] *:not(:first-child))": spacing["3"],
52
+
":is([data-table-size=lg] *:not(:first-child))": spacing["4"],
53
+
},
54
+
paddingRight: {
55
+
":not(:last-child)": spacing["2"],
56
+
":is([data-table-size=md] *:not(:last-child))": spacing["3"],
57
+
":is([data-table-size=lg] *:not(:last-child))": spacing["4"],
58
+
},
59
+
paddingTop: {
60
+
default: spacing["1"],
61
+
":is([data-table-size=md] *)": spacing["2"],
62
+
":is([data-table-size=lg] *)": spacing["3"],
63
+
},
64
+
},
65
+
});
66
+
67
+
export interface TableProps
68
+
extends Omit<AriaTableProps, "className" | "style"> {
69
+
style?: stylex.StyleXStyles | stylex.StyleXStyles[];
70
+
size?: Size;
71
+
}
72
+
73
+
export const Table = ({ style, size: sizeProp, ...props }: TableProps) => {
74
+
const size = sizeProp || use(SizeContext);
75
+
76
+
return (
77
+
<SizeContext value={size}>
78
+
<AriaTable
79
+
data-table-size={size}
80
+
{...stylex.props(styles.table, style)}
81
+
{...props}
82
+
/>
83
+
</SizeContext>
84
+
);
85
+
};
86
+
87
+
export interface TableColumnProps
88
+
extends Omit<AriaColumnProps, "className" | "style" | "children"> {
89
+
style?: stylex.StyleXStyles | stylex.StyleXStyles[];
90
+
children?: React.ReactNode;
91
+
}
92
+
93
+
export function TableColumn({ style, children, ...props }: TableColumnProps) {
94
+
return (
95
+
<AriaColumn {...props} {...stylex.props(styles.column, styles.cell, style)}>
96
+
{({ allowsSorting, sortDirection }) => (
97
+
<div className="column-header">
98
+
{children}
99
+
{allowsSorting && (
100
+
<span aria-hidden="true" className="sort-indicator">
101
+
{sortDirection === "ascending" ? (
102
+
<ArrowUp size={14} />
103
+
) : (
104
+
<ArrowDown size={14} />
105
+
)}
106
+
</span>
107
+
)}
108
+
</div>
109
+
)}
110
+
</AriaColumn>
111
+
);
112
+
}
113
+
114
+
export interface TableHeaderProps<T extends object>
115
+
extends Omit<AriaTableHeaderProps<T>, "className" | "style"> {
116
+
style?: stylex.StyleXStyles | stylex.StyleXStyles[];
117
+
}
118
+
119
+
export function TableHeader<T extends object>({
120
+
children,
121
+
style,
122
+
...otherProps
123
+
}: TableHeaderProps<T>) {
124
+
const { selectionBehavior, selectionMode, allowsDragging } =
125
+
useTableOptions();
126
+
127
+
return (
128
+
<AriaTableHeader
129
+
{...stylex.props(styles.tableHeader, style)}
130
+
{...otherProps}
131
+
>
132
+
{/* Add extra columns for drag and drop and selection. */}
133
+
{allowsDragging && <TableColumn />}
134
+
{selectionBehavior === "toggle" && (
135
+
<TableColumn>
136
+
{selectionMode === "multiple" && <Checkbox slot="selection" />}
137
+
</TableColumn>
138
+
)}
139
+
<Collection items={otherProps.columns}>{children}</Collection>
140
+
</AriaTableHeader>
141
+
);
142
+
}
143
+
144
+
export interface TableRowProps<T extends object>
145
+
extends Omit<AriaRowProps<T>, "className" | "style"> {
146
+
style?: stylex.StyleXStyles | stylex.StyleXStyles[];
147
+
}
148
+
149
+
export function TableRow<T extends object>({
150
+
id,
151
+
columns,
152
+
children,
153
+
style,
154
+
...props
155
+
}: TableRowProps<T>) {
156
+
const { selectionBehavior, allowsDragging } = useTableOptions();
157
+
158
+
return (
159
+
<AriaRow id={id} {...stylex.props(styles.row, style)} {...props}>
160
+
{allowsDragging && (
161
+
<TableCell>
162
+
<IconButton slot="drag" label="Drag" variant="tertiary">
163
+
<GripVertical size={16} />
164
+
</IconButton>
165
+
</TableCell>
166
+
)}
167
+
{selectionBehavior === "toggle" && (
168
+
<TableCell>
169
+
<Checkbox slot="selection" />
170
+
</TableCell>
171
+
)}
172
+
<Collection items={columns}>{children}</Collection>
173
+
</AriaRow>
174
+
);
175
+
}
176
+
177
+
export interface TableBodyProps<T extends object>
178
+
extends Omit<AriaTableBodyProps<T>, "className" | "style"> {
179
+
style?: stylex.StyleXStyles | stylex.StyleXStyles[];
180
+
}
181
+
182
+
export function TableBody<T extends object>({
183
+
style,
184
+
...prop
185
+
}: TableBodyProps<T>) {
186
+
return <AriaTableBody {...stylex.props(styles.tableBody, style)} {...prop} />;
187
+
}
188
+
189
+
export interface TableCellProps
190
+
extends Omit<AriaCellProps, "className" | "style"> {
191
+
style?: stylex.StyleXStyles | stylex.StyleXStyles[];
192
+
}
193
+
194
+
export function TableCell({ style, ...props }: TableCellProps) {
195
+
return <AriaCell {...stylex.props(styles.cell, style)} {...props} />;
196
+
}
+20
apps/docs/src/components/theme/semantic-color.stylex.tsx
+20
apps/docs/src/components/theme/semantic-color.stylex.tsx
···
109
109
transitionProperty: "background-color, border-color",
110
110
transitionTimingFunction: "ease-in-out",
111
111
},
112
+
bgSolidAction: {
113
+
backgroundColor: {
114
+
default: uiColor.solid1,
115
+
":hover:not(:has(* button:hover)):not(:disabled)": uiColor.solid2,
116
+
":disabled": uiColor.component1,
117
+
},
118
+
transitionDuration: "100ms",
119
+
transitionProperty: "background-color, border-color",
120
+
transitionTimingFunction: "ease-in-out",
121
+
},
112
122
});
113
123
114
124
// eslint-disable-next-line @stylexjs/enforce-extension
···
195
205
primaryColor.component3,
196
206
":is(:active,[data-pressed=true]):not(:disabled)":
197
207
primaryColor.component3,
208
+
":disabled": primaryColor.component1,
209
+
},
210
+
transitionDuration: "100ms",
211
+
transitionProperty: "background-color, border-color",
212
+
transitionTimingFunction: "ease-in-out",
213
+
},
214
+
bgSolidAction: {
215
+
backgroundColor: {
216
+
default: primaryColor.solid1,
217
+
":hover:not(:has(* button:hover)):not(:disabled)": primaryColor.solid2,
198
218
":disabled": primaryColor.component1,
199
219
},
200
220
transitionDuration: "100ms",
+31
apps/docs/src/docs/components/alert-dialog.mdx
+31
apps/docs/src/docs/components/alert-dialog.mdx
···
1
+
---
2
+
title: Alert Dialog
3
+
description: A modal dialog component specifically designed for critical actions and confirmations.
4
+
---
5
+
6
+
import { PropDocs } from '../../lib/PropDocs'
7
+
import { Example } from '../../lib/Example'
8
+
import { Basic } from '../../examples/alert-dialog/basic'
9
+
10
+
<Example src={Basic} />
11
+
12
+
## Installation
13
+
14
+
Run the following command to add the alert dialog component to your project.
15
+
16
+
```bash
17
+
pnpm hip install alert-dialog
18
+
```
19
+
20
+
## Props
21
+
22
+
This component is built using the [React Aria Dialog](https://react-spectrum.adobe.com/react-aria/Dialog.html) with the `alertdialog` role.
23
+
24
+
<PropDocs components={["AlertDialog", "AlertDialogHeader", "AlertDialogDescription", "AlertDialogFooter", "AlertDialogCancelButton", "AlertDialogActionButton"]} />
25
+
26
+
## Related Components
27
+
28
+
- [Dialog](/components/dialog) - For general modal dialogs
29
+
- [Button](/components/button) - For dialog action buttons
30
+
- [Popover](/components/popover) - For non-modal overlays
31
+
- [Tooltip](/components/tooltip) - For contextual help
+27
-3
apps/docs/src/docs/components/aspect-ratio.mdx
+27
-3
apps/docs/src/docs/components/aspect-ratio.mdx
···
3
3
description: A component that allows you to set the aspect ratio of a div, with support for images.
4
4
---
5
5
6
+
import { PropDocs } from '../../lib/PropDocs'
6
7
import { Example } from '../../lib/Example'
7
8
import { Basic } from '../../examples/aspect-ratio/basic'
8
9
import { NoImage } from '../../examples/aspect-ratio/no-image'
9
10
10
-
<Example src={Basic} />
11
+
<Example src={Basic} />
12
+
13
+
## Installation
14
+
15
+
Run the following command to add the aspect ratio component to your project.
16
+
17
+
```bash
18
+
pnpm hip install aspect-ratio
19
+
```
20
+
21
+
## Props
11
22
12
-
## No Image
23
+
This is a custom component built for setting aspect ratios.
24
+
25
+
<PropDocs components={["AspectRatio", "AspectRatioImage"]} />
26
+
27
+
## Features
28
+
29
+
### No Image
13
30
14
31
The aspect ratio can be set without an image.
15
32
16
-
<Example src={NoImage} />
33
+
<Example src={NoImage} />
34
+
35
+
## Related Components
36
+
37
+
- [Card](/components/card) - For cards with aspect ratio images
38
+
- [Grid](/components/grid) - For grid layouts with aspect ratio items
39
+
- [Flex](/components/flex) - For flex layouts with aspect ratio items
40
+
- [Avatar](/components/avatar) - For user avatars with consistent aspect ratios
+41
-3
apps/docs/src/docs/components/avatar.mdx
+41
-3
apps/docs/src/docs/components/avatar.mdx
···
3
3
description: An image element with a fallback for representing the user.
4
4
---
5
5
6
+
import { PropDocs } from '../../lib/PropDocs'
6
7
import { Example } from '../../lib/Example'
7
8
import { Basic } from '../../examples/avatar/basic'
8
9
import { AvatarSizes } from '../../examples/avatar/sizes'
10
+
import { AvatarGroup } from '../../examples/avatar/group'
11
+
import { AvatarFallbacks } from '../../examples/avatar/fallbacks'
9
12
10
-
<Example src={Basic} />
13
+
<Example src={Basic} />
14
+
15
+
## Installation
11
16
12
-
## Sizes
17
+
Run the following command to add the avatar component to your project.
18
+
19
+
```bash
20
+
pnpm hip install avatar
21
+
```
22
+
23
+
## Props
24
+
25
+
This is a custom component built for user representation.
26
+
27
+
<PropDocs components={["Avatar"]} />
28
+
29
+
## Features
30
+
31
+
### Sizes
13
32
14
33
The avatar comes in the standard sizes along with a custom `xl` size.
15
34
16
-
<Example src={AvatarSizes} />
35
+
<Example src={AvatarSizes} />
36
+
37
+
### Group
38
+
39
+
Avatars can be displayed in groups to show multiple users.
40
+
41
+
<Example src={AvatarGroup} />
42
+
43
+
### Fallbacks
44
+
45
+
Avatars display fallback content when images fail to load or are not provided.
46
+
47
+
<Example src={AvatarFallbacks} />
48
+
49
+
## Related Components
50
+
51
+
- [Badge](/components/badge) - For status indicators on avatars
52
+
- [Card](/components/card) - For cards with user avatars
53
+
- [AspectRatio](/components/aspect-ratio) - For maintaining avatar aspect ratios
54
+
- [Typography](/components/typography) - For text alongside avatars
+61
apps/docs/src/docs/components/badge.mdx
+61
apps/docs/src/docs/components/badge.mdx
···
1
+
---
2
+
title: Badge
3
+
description: A small status indicator component for highlighting information.
4
+
---
5
+
6
+
import { PropDocs } from '../../lib/PropDocs'
7
+
import { Example } from '../../lib/Example'
8
+
import { Basic } from '../../examples/badge/basic'
9
+
import { BadgeVariants } from '../../examples/badge/variants'
10
+
import { BadgeSizes } from '../../examples/badge/sizes'
11
+
import { BadgeWithIcons } from '../../examples/badge/with-icons'
12
+
import { BadgeDismissible } from '../../examples/badge/dismissible'
13
+
14
+
<Example src={Basic} />
15
+
16
+
## Installation
17
+
18
+
Run the following command to add the badge component to your project.
19
+
20
+
```bash
21
+
pnpm hip install badge
22
+
```
23
+
24
+
## Props
25
+
26
+
This is a custom component built for status indicators.
27
+
28
+
<PropDocs components={["Badge"]} />
29
+
30
+
## Features
31
+
32
+
### Variants
33
+
34
+
The badge comes in five different variants to convey different types of information.
35
+
36
+
<Example src={BadgeVariants} />
37
+
38
+
### Sizes
39
+
40
+
The badge supports two different sizes.
41
+
42
+
<Example src={BadgeSizes} />
43
+
44
+
### With Icons
45
+
46
+
Badges can include icons to enhance their visual meaning.
47
+
48
+
<Example src={BadgeWithIcons} />
49
+
50
+
### Dismissible
51
+
52
+
Badges can be made dismissible for user interaction.
53
+
54
+
<Example src={BadgeDismissible} />
55
+
56
+
## Related Components
57
+
58
+
- [Avatar](/components/avatar) - For user avatars with status badges
59
+
- [Card](/components/card) - For cards with status badges
60
+
- [Table](/components/table) - For table cells with status badges
61
+
- [Button](/components/button) - For buttons with notification badges
+61
apps/docs/src/docs/components/card.mdx
+61
apps/docs/src/docs/components/card.mdx
···
1
+
---
2
+
title: Card
3
+
description: A flexible container component for grouping related content.
4
+
---
5
+
6
+
import { PropDocs } from '../../lib/PropDocs'
7
+
import { Example } from '../../lib/Example'
8
+
import { Basic } from '../../examples/card/basic'
9
+
import { CardWithImage } from '../../examples/card/with-image'
10
+
import { CardSizes } from '../../examples/card/sizes'
11
+
import { CardWithActions } from '../../examples/card/with-actions'
12
+
import { CardWithBadges } from '../../examples/card/with-badges'
13
+
14
+
<Example src={Basic} />
15
+
16
+
## Installation
17
+
18
+
Run the following command to add the card component to your project.
19
+
20
+
```bash
21
+
pnpm hip install card
22
+
```
23
+
24
+
## Props
25
+
26
+
This is a custom component built for grouping related content.
27
+
28
+
<PropDocs components={["Card", "CardHeader", "CardTitle", "CardDescription", "CardHeaderAction", "CardBody", "CardFooter", "CardImage"]} />
29
+
30
+
## Features
31
+
32
+
### With Image
33
+
34
+
Cards can include images with customizable aspect ratios.
35
+
36
+
<Example src={CardWithImage} />
37
+
38
+
### With Actions
39
+
40
+
Cards can include header actions for interactive elements.
41
+
42
+
<Example src={CardWithActions} />
43
+
44
+
### With Badges
45
+
46
+
Cards can include badges for status indicators and tags.
47
+
48
+
<Example src={CardWithBadges} />
49
+
50
+
### Sizes
51
+
52
+
The card supports three different sizes that affect padding and spacing.
53
+
54
+
<Example src={CardSizes} />
55
+
56
+
## Related Components
57
+
58
+
- [Table](/components/table) - For structured data display
59
+
- [Badge](/components/badge) - For status indicators in cards
60
+
- [Button](/components/button) - For card actions
61
+
- [AspectRatio](/components/aspect-ratio) - For card images
+47
apps/docs/src/docs/components/checkbox.mdx
+47
apps/docs/src/docs/components/checkbox.mdx
···
1
+
---
2
+
title: Checkbox
3
+
description: A checkbox component for selecting one or more options from a set.
4
+
---
5
+
6
+
import { PropDocs } from '../../lib/PropDocs'
7
+
import { Example } from '../../lib/Example'
8
+
import { Basic } from '../../examples/checkbox/basic'
9
+
import { CheckboxStates } from '../../examples/checkbox/states'
10
+
import { CheckboxWithDescription } from '../../examples/checkbox/with-description'
11
+
12
+
<Example src={Basic} />
13
+
14
+
## Installation
15
+
16
+
Run the following command to add the checkbox component to your project.
17
+
18
+
```bash
19
+
pnpm hip install checkbox
20
+
```
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
+
## Features
29
+
30
+
### States
31
+
32
+
Checkboxes support different states including checked, unchecked, indeterminate, and disabled.
33
+
34
+
<Example src={CheckboxStates} />
35
+
36
+
### With Description
37
+
38
+
Checkboxes can include descriptive text to provide additional context.
39
+
40
+
<Example src={CheckboxWithDescription} />
41
+
42
+
## Related Components
43
+
44
+
- [Radio](/components/radio) - For single selection from multiple options
45
+
- [Switch](/components/switch) - For binary toggle choices
46
+
- [Select](/components/select) - For dropdown selection
47
+
- [Label](/components/label) - For form labels and descriptions
+31
apps/docs/src/docs/components/color-field.mdx
+31
apps/docs/src/docs/components/color-field.mdx
···
1
+
---
2
+
title: Color Field
3
+
description: A color input component for selecting colors with a color picker.
4
+
---
5
+
6
+
import { PropDocs } from '../../lib/PropDocs'
7
+
import { Example } from '../../lib/Example'
8
+
import { Basic } from '../../examples/color-field/basic'
9
+
10
+
<Example src={Basic} />
11
+
12
+
## Installation
13
+
14
+
Run the following command to add the color field component to your project.
15
+
16
+
```bash
17
+
pnpm hip install color-field
18
+
```
19
+
20
+
## Props
21
+
22
+
This component is built using the [React Aria ColorField](https://react-spectrum.adobe.com/react-aria/ColorField.html).
23
+
24
+
<PropDocs components={["ColorField"]} />
25
+
26
+
## Related Components
27
+
28
+
- [ColorSwatch](/components/color-swatch) - For displaying color values
29
+
- [TextField](/components/text-field) - For general text input
30
+
- [NumberField](/components/number-field) - For numeric input
31
+
- [Label](/components/label) - For form labels and descriptions
+31
apps/docs/src/docs/components/color-swatch.mdx
+31
apps/docs/src/docs/components/color-swatch.mdx
···
1
+
---
2
+
title: Color Swatch
3
+
description: A color swatch component for displaying color values.
4
+
---
5
+
6
+
import { PropDocs } from '../../lib/PropDocs'
7
+
import { Example } from '../../lib/Example'
8
+
import { Basic } from '../../examples/color-swatch/basic'
9
+
10
+
<Example src={Basic} />
11
+
12
+
## Installation
13
+
14
+
Run the following command to add the color swatch component to your project.
15
+
16
+
```bash
17
+
pnpm hip install color-swatch
18
+
```
19
+
20
+
## Props
21
+
22
+
This component is built using the [React Aria ColorSwatch](https://react-spectrum.adobe.com/react-aria/ColorSwatch.html).
23
+
24
+
<PropDocs components={["ColorSwatch"]} />
25
+
26
+
## Related Components
27
+
28
+
- [ColorField](/components/color-field) - For color input with color swatches
29
+
- [Card](/components/card) - For displaying color swatches in cards
30
+
- [Grid](/components/grid) - For organizing color swatches in grids
31
+
- [Button](/components/button) - For interactive color swatches
+31
apps/docs/src/docs/components/combobox.mdx
+31
apps/docs/src/docs/components/combobox.mdx
···
1
+
---
2
+
title: Combo Box
3
+
description: A combo box component that combines a text input with a dropdown list of options.
4
+
---
5
+
6
+
import { PropDocs } from '../../lib/PropDocs'
7
+
import { Example } from '../../lib/Example'
8
+
import { Basic } from '../../examples/combobox/basic'
9
+
10
+
<Example src={Basic} />
11
+
12
+
## Installation
13
+
14
+
Run the following command to add the combo box component to your project.
15
+
16
+
```bash
17
+
pnpm hip install combobox
18
+
```
19
+
20
+
## Props
21
+
22
+
This component is built using the [React Aria ComboBox](https://react-spectrum.adobe.com/react-aria/ComboBox.html).
23
+
24
+
<PropDocs components={["ComboBox", "ComboBoxItem", "ComboBoxSection", "ComboBoxSectionHeader", "ComboBoxSeparator"]} />
25
+
26
+
## Related Components
27
+
28
+
- [Select](/components/select) - For dropdown selection without search
29
+
- [SearchField](/components/search-field) - For search input with clear button
30
+
- [TextField](/components/text-field) - For general text input
31
+
- [Label](/components/label) - For form labels and descriptions
+31
apps/docs/src/docs/components/date-field.mdx
+31
apps/docs/src/docs/components/date-field.mdx
···
1
+
---
2
+
title: Date Field
3
+
description: A date input component for selecting dates with proper formatting.
4
+
---
5
+
6
+
import { PropDocs } from '../../lib/PropDocs'
7
+
import { Example } from '../../lib/Example'
8
+
import { Basic } from '../../examples/date-field/basic'
9
+
10
+
<Example src={Basic} />
11
+
12
+
## Installation
13
+
14
+
Run the following command to add the date field component to your project.
15
+
16
+
```bash
17
+
pnpm hip install date-field
18
+
```
19
+
20
+
## Props
21
+
22
+
This component is built using the [React Aria DateField](https://react-spectrum.adobe.com/react-aria/DateField.html).
23
+
24
+
<PropDocs components={["DateField"]} />
25
+
26
+
## Related Components
27
+
28
+
- [TimeField](/components/time-field) - For time input
29
+
- [TextField](/components/text-field) - For general text input
30
+
- [NumberField](/components/number-field) - For numeric input
31
+
- [Label](/components/label) - For form labels and descriptions
+47
apps/docs/src/docs/components/dialog.mdx
+47
apps/docs/src/docs/components/dialog.mdx
···
1
+
---
2
+
title: Dialog
3
+
description: A modal dialog component for displaying content in an overlay.
4
+
---
5
+
6
+
import { PropDocs } from '../../lib/PropDocs'
7
+
import { Example } from '../../lib/Example'
8
+
import { Basic } from '../../examples/dialog/basic'
9
+
import { DialogForm } from '../../examples/dialog/form'
10
+
import { DialogSizes } from '../../examples/dialog/sizes'
11
+
12
+
<Example src={Basic} />
13
+
14
+
## Installation
15
+
16
+
Run the following command to add the dialog component to your project.
17
+
18
+
```bash
19
+
pnpm hip install dialog
20
+
```
21
+
22
+
## Props
23
+
24
+
This component is built using the [React Aria Dialog](https://react-spectrum.adobe.com/react-aria/Dialog.html).
25
+
26
+
<PropDocs components={["Dialog", "DialogHeader", "DialogDescription", "DialogFooter"]} />
27
+
28
+
## Features
29
+
30
+
### Form Dialog
31
+
32
+
Dialogs can contain forms for data collection and user input.
33
+
34
+
<Example src={DialogForm} />
35
+
36
+
### Sizes
37
+
38
+
Dialogs support different sizes to accommodate various content types.
39
+
40
+
<Example src={DialogSizes} />
41
+
42
+
## Related Components
43
+
44
+
- [AlertDialog](/components/alert-dialog) - For critical actions and confirmations
45
+
- [Popover](/components/popover) - For non-modal overlays
46
+
- [Button](/components/button) - For dialog action buttons
47
+
- [Form](/components/form) - For forms within dialogs
+31
apps/docs/src/docs/components/file-drop-zone.mdx
+31
apps/docs/src/docs/components/file-drop-zone.mdx
···
1
+
---
2
+
title: File Drop Zone
3
+
description: A file drop zone component for drag and drop file uploads.
4
+
---
5
+
6
+
import { PropDocs } from '../../lib/PropDocs'
7
+
import { Example } from '../../lib/Example'
8
+
import { Basic } from '../../examples/file-drop-zone/basic'
9
+
10
+
<Example src={Basic} />
11
+
12
+
## Installation
13
+
14
+
Run the following command to add the file drop zone component to your project.
15
+
16
+
```bash
17
+
pnpm hip install file-drop-zone
18
+
```
19
+
20
+
## Props
21
+
22
+
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).
23
+
24
+
<PropDocs components={["FileDropZone"]} />
25
+
26
+
## Related Components
27
+
28
+
- [Button](/components/button) - For file upload triggers
29
+
- [Card](/components/card) - For containing file drop zones
30
+
- [Badge](/components/badge) - For file upload status indicators
31
+
- [Typography](/components/typography) - For file upload instructions
+61
apps/docs/src/docs/components/flex.mdx
+61
apps/docs/src/docs/components/flex.mdx
···
1
+
---
2
+
title: Flex
3
+
description: A flexible container component for creating flexible layouts.
4
+
---
5
+
6
+
import { PropDocs } from '../../lib/PropDocs'
7
+
import { Example } from '../../lib/Example'
8
+
import { Basic } from '../../examples/flex/basic'
9
+
import { FlexDirections } from '../../examples/flex/directions'
10
+
import { FlexAlignment } from '../../examples/flex/alignment'
11
+
import { FlexWrap } from '../../examples/flex/wrap'
12
+
import { FlexGap } from '../../examples/flex/gap'
13
+
14
+
<Example src={Basic} />
15
+
16
+
## Installation
17
+
18
+
Run the following command to add the flex component to your project.
19
+
20
+
```bash
21
+
pnpm hip install flex
22
+
```
23
+
24
+
## Props
25
+
26
+
This is a custom component built for flexible layouts.
27
+
28
+
<PropDocs components={["Flex"]} />
29
+
30
+
## Features
31
+
32
+
### Directions
33
+
34
+
Flex containers can be arranged in different directions.
35
+
36
+
<Example src={FlexDirections} />
37
+
38
+
### Alignment
39
+
40
+
Flex items can be aligned using various justify and align properties.
41
+
42
+
<Example src={FlexAlignment} />
43
+
44
+
### Wrap
45
+
46
+
Flex containers can wrap their children to new lines when needed.
47
+
48
+
<Example src={FlexWrap} />
49
+
50
+
### Gap
51
+
52
+
Flex containers support different gap sizes between items.
53
+
54
+
<Example src={FlexGap} />
55
+
56
+
## Related Components
57
+
58
+
- [Grid](/components/grid) - For two-dimensional layouts
59
+
- [Card](/components/card) - For grouping content in flex layouts
60
+
- [ButtonGroup](/components/button-group) - For grouping buttons in flex layouts
61
+
- [Separator](/components/separator) - For visual separation in flex layouts
+40
apps/docs/src/docs/components/grid.mdx
+40
apps/docs/src/docs/components/grid.mdx
···
1
+
---
2
+
title: Grid
3
+
description: A grid container component for creating two-dimensional layouts.
4
+
---
5
+
6
+
import { PropDocs } from '../../lib/PropDocs'
7
+
import { Example } from '../../lib/Example'
8
+
import { Basic } from '../../examples/grid/basic'
9
+
import { GridSpans } from '../../examples/grid/spans'
10
+
11
+
<Example src={Basic} />
12
+
13
+
## Installation
14
+
15
+
Run the following command to add the grid component to your project.
16
+
17
+
```bash
18
+
pnpm hip install grid
19
+
```
20
+
21
+
## Props
22
+
23
+
This is a custom component built for grid layouts.
24
+
25
+
<PropDocs components={["Grid", "GridItem"]} />
26
+
27
+
## Features
28
+
29
+
### Grid Spans
30
+
31
+
Grid items can span multiple columns and rows.
32
+
33
+
<Example src={GridSpans} />
34
+
35
+
## Related Components
36
+
37
+
- [Flex](/components/flex) - For one-dimensional flexible layouts
38
+
- [Card](/components/card) - For grouping content in grid layouts
39
+
- [AspectRatio](/components/aspect-ratio) - For maintaining aspect ratios in grid items
40
+
- [Table](/components/table) - For structured data in grid layouts
+40
apps/docs/src/docs/components/label.mdx
+40
apps/docs/src/docs/components/label.mdx
···
1
+
---
2
+
title: Label
3
+
description: A label component for form elements with optional descriptions.
4
+
---
5
+
6
+
import { PropDocs } from '../../lib/PropDocs'
7
+
import { Example } from '../../lib/Example'
8
+
import { Basic } from '../../examples/label/basic'
9
+
import { LabelSizes } from '../../examples/label/sizes'
10
+
11
+
<Example src={Basic} />
12
+
13
+
## Installation
14
+
15
+
Run the following command to add the label component to your project.
16
+
17
+
```bash
18
+
pnpm hip install label
19
+
```
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
+
## Features
28
+
29
+
### Sizes
30
+
31
+
Labels support three different sizes.
32
+
33
+
<Example src={LabelSizes} />
34
+
35
+
## Related Components
36
+
37
+
- [TextField](/components/text-field) - Form inputs that use labels
38
+
- [Checkbox](/components/checkbox) - Form controls that use labels
39
+
- [Radio](/components/radio) - Form controls that use labels
40
+
- [Switch](/components/switch) - Form controls that use labels
+31
apps/docs/src/docs/components/link.mdx
+31
apps/docs/src/docs/components/link.mdx
···
1
+
---
2
+
title: Link
3
+
description: A link component for navigation and external references.
4
+
---
5
+
6
+
import { PropDocs } from '../../lib/PropDocs'
7
+
import { Example } from '../../lib/Example'
8
+
import { Basic } from '../../examples/link/basic'
9
+
10
+
<Example src={Basic} />
11
+
12
+
## Installation
13
+
14
+
Run the following command to add the link component to your project.
15
+
16
+
```bash
17
+
pnpm hip install link
18
+
```
19
+
20
+
## Props
21
+
22
+
This component is built using the [React Aria Link](https://react-spectrum.adobe.com/react-aria/Link.html).
23
+
24
+
<PropDocs components={["Link"]} />
25
+
26
+
## Related Components
27
+
28
+
- [Button](/components/button) - For action buttons that look like links
29
+
- [IconButton](/components/icon-button) - For icon-only navigation buttons
30
+
- [Typography](/components/typography) - For text styling and hierarchy
31
+
- [Badge](/components/badge) - For status indicators on links
+31
apps/docs/src/docs/components/listbox.mdx
+31
apps/docs/src/docs/components/listbox.mdx
···
1
+
---
2
+
title: List Box
3
+
description: A list box component for displaying a list of selectable items.
4
+
---
5
+
6
+
import { PropDocs } from '../../lib/PropDocs'
7
+
import { Example } from '../../lib/Example'
8
+
import { Basic } from '../../examples/listbox/basic'
9
+
10
+
<Example src={Basic} />
11
+
12
+
## Installation
13
+
14
+
Run the following command to add the list box component to your project.
15
+
16
+
```bash
17
+
pnpm hip install listbox
18
+
```
19
+
20
+
## Props
21
+
22
+
This component is built using the [React Aria ListBox](https://react-spectrum.adobe.com/react-aria/ListBox.html).
23
+
24
+
<PropDocs components={["ListBox", "ListBoxItem", "ListBoxSection", "ListBoxSeparator", "ListBoxSectionHeader"]} />
25
+
26
+
## Related Components
27
+
28
+
- [Select](/components/select) - For dropdown selection using ListBox
29
+
- [ComboBox](/components/combobox) - For searchable selection using ListBox
30
+
- [Tree](/components/tree) - For hierarchical data display
31
+
- [Table](/components/table) - For structured data display
+31
apps/docs/src/docs/components/number-field.mdx
+31
apps/docs/src/docs/components/number-field.mdx
···
1
+
---
2
+
title: Number Field
3
+
description: A number input component with increment/decrement buttons and validation.
4
+
---
5
+
6
+
import { PropDocs } from '../../lib/PropDocs'
7
+
import { Example } from '../../lib/Example'
8
+
import { Basic } from '../../examples/number-field/basic'
9
+
10
+
<Example src={Basic} />
11
+
12
+
## Installation
13
+
14
+
Run the following command to add the number field component to your project.
15
+
16
+
```bash
17
+
pnpm hip install number-field
18
+
```
19
+
20
+
## Props
21
+
22
+
This component is built using the [React Aria NumberField](https://react-spectrum.adobe.com/react-aria/NumberField.html).
23
+
24
+
<PropDocs components={["NumberField"]} />
25
+
26
+
## Related Components
27
+
28
+
- [TextField](/components/text-field) - For general text input
29
+
- [TextArea](/components/text-area) - For multi-line text input
30
+
- [SearchField](/components/search-field) - For search input with clear button
31
+
- [Label](/components/label) - For form labels and descriptions
+31
apps/docs/src/docs/components/popover.mdx
+31
apps/docs/src/docs/components/popover.mdx
···
1
+
---
2
+
title: Popover
3
+
description: A popover component for displaying content in an overlay.
4
+
---
5
+
6
+
import { PropDocs } from '../../lib/PropDocs'
7
+
import { Example } from '../../lib/Example'
8
+
import { Basic } from '../../examples/popover/basic'
9
+
10
+
<Example src={Basic} />
11
+
12
+
## Installation
13
+
14
+
Run the following command to add the popover component to your project.
15
+
16
+
```bash
17
+
pnpm hip install popover
18
+
```
19
+
20
+
## Props
21
+
22
+
This component is built using the [React Aria Popover](https://react-spectrum.adobe.com/react-aria/Popover.html).
23
+
24
+
<PropDocs components={["Popover"]} />
25
+
26
+
## Related Components
27
+
28
+
- [Dialog](/components/dialog) - For modal overlays
29
+
- [Tooltip](/components/tooltip) - For contextual help overlays
30
+
- [Menu](/components/menu) - For dropdown menus
31
+
- [ContextMenu](/components/context-menu) - For right-click context menus
+47
apps/docs/src/docs/components/radio.mdx
+47
apps/docs/src/docs/components/radio.mdx
···
1
+
---
2
+
title: Radio
3
+
description: A radio button component for selecting a single option from a group.
4
+
---
5
+
6
+
import { PropDocs } from '../../lib/PropDocs'
7
+
import { Example } from '../../lib/Example'
8
+
import { Basic } from '../../examples/radio/basic'
9
+
import { RadioWithDescription } from '../../examples/radio/with-description'
10
+
import { RadioHorizontal } from '../../examples/radio/horizontal'
11
+
12
+
<Example src={Basic} />
13
+
14
+
## Installation
15
+
16
+
Run the following command to add the radio component to your project.
17
+
18
+
```bash
19
+
pnpm hip install radio
20
+
```
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
+
## Features
29
+
30
+
### With Description
31
+
32
+
Radio buttons can include descriptive text to provide additional context.
33
+
34
+
<Example src={RadioWithDescription} />
35
+
36
+
### Horizontal Layout
37
+
38
+
Radio groups can be displayed horizontally for compact layouts.
39
+
40
+
<Example src={RadioHorizontal} />
41
+
42
+
## Related Components
43
+
44
+
- [Checkbox](/components/checkbox) - For multiple selection options
45
+
- [Switch](/components/switch) - For binary toggle choices
46
+
- [Select](/components/select) - For dropdown selection
47
+
- [Label](/components/label) - For form labels and descriptions
+31
apps/docs/src/docs/components/search-field.mdx
+31
apps/docs/src/docs/components/search-field.mdx
···
1
+
---
2
+
title: Search Field
3
+
description: A search input component with built-in search icon and clear functionality.
4
+
---
5
+
6
+
import { PropDocs } from '../../lib/PropDocs'
7
+
import { Example } from '../../lib/Example'
8
+
import { Basic } from '../../examples/search-field/basic'
9
+
10
+
<Example src={Basic} />
11
+
12
+
## Installation
13
+
14
+
Run the following command to add the search field component to your project.
15
+
16
+
```bash
17
+
pnpm hip install search-field
18
+
```
19
+
20
+
## Props
21
+
22
+
This component is built using the [React Aria SearchField](https://react-spectrum.adobe.com/react-aria/SearchField.html).
23
+
24
+
<PropDocs components={["SearchField"]} />
25
+
26
+
## Related Components
27
+
28
+
- [TextField](/components/text-field) - For general text input
29
+
- [ComboBox](/components/combobox) - For searchable dropdown selection
30
+
- [CommandMenu](/components/command-menu) - For command palette with search
31
+
- [Label](/components/label) - For form labels and descriptions
+47
apps/docs/src/docs/components/select.mdx
+47
apps/docs/src/docs/components/select.mdx
···
1
+
---
2
+
title: Select
3
+
description: A select component for choosing from a list of options.
4
+
---
5
+
6
+
import { PropDocs } from '../../lib/PropDocs'
7
+
import { Example } from '../../lib/Example'
8
+
import { Basic } from '../../examples/select/basic'
9
+
import { SelectWithDescription } from '../../examples/select/with-description'
10
+
import { SelectSizes } from '../../examples/select/sizes'
11
+
12
+
<Example src={Basic} />
13
+
14
+
## Installation
15
+
16
+
Run the following command to add the select component to your project.
17
+
18
+
```bash
19
+
pnpm hip install select
20
+
```
21
+
22
+
## Props
23
+
24
+
This component is built using the [React Aria Select](https://react-spectrum.adobe.com/react-aria/Select.html).
25
+
26
+
<PropDocs components={["Select", "SelectItem", "SelectSection", "SelectSectionHeader", "SelectSeparator"]} />
27
+
28
+
## Features
29
+
30
+
### With Description
31
+
32
+
Select components can include descriptive text to provide additional context.
33
+
34
+
<Example src={SelectWithDescription} />
35
+
36
+
### Sizes
37
+
38
+
Select components support different sizes for various use cases.
39
+
40
+
<Example src={SelectSizes} />
41
+
42
+
## Related Components
43
+
44
+
- [ComboBox](/components/combobox) - For searchable dropdown selection
45
+
- [Radio](/components/radio) - For single selection from multiple options
46
+
- [Checkbox](/components/checkbox) - For multiple selection options
47
+
- [Label](/components/label) - For form labels and descriptions
+40
apps/docs/src/docs/components/separator.mdx
+40
apps/docs/src/docs/components/separator.mdx
···
1
+
---
2
+
title: Separator
3
+
description: A visual divider component for separating content sections.
4
+
---
5
+
6
+
import { PropDocs } from '../../lib/PropDocs'
7
+
import { Example } from '../../lib/Example'
8
+
import { Basic } from '../../examples/separator/basic'
9
+
import { SeparatorOrientation } from '../../examples/separator/orientation'
10
+
11
+
<Example src={Basic} />
12
+
13
+
## Installation
14
+
15
+
Run the following command to add the separator component to your project.
16
+
17
+
```bash
18
+
pnpm hip install separator
19
+
```
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
+
## Features
28
+
29
+
### Orientation
30
+
31
+
Separators can be oriented horizontally or vertically.
32
+
33
+
<Example src={SeparatorOrientation} />
34
+
35
+
## Related Components
36
+
37
+
- [Flex](/components/flex) - For layouts that use separators
38
+
- [Card](/components/card) - For cards that use separators
39
+
- [Menu](/components/menu) - For menu items with separators
40
+
- [Typography](/components/typography) - For text sections with separators
+47
apps/docs/src/docs/components/switch.mdx
+47
apps/docs/src/docs/components/switch.mdx
···
1
+
---
2
+
title: Switch
3
+
description: A toggle switch component for binary choices.
4
+
---
5
+
6
+
import { PropDocs } from '../../lib/PropDocs'
7
+
import { Example } from '../../lib/Example'
8
+
import { Basic } from '../../examples/switch/basic'
9
+
import { SwitchStates } from '../../examples/switch/states'
10
+
import { SwitchWithDescription } from '../../examples/switch/with-description'
11
+
12
+
<Example src={Basic} />
13
+
14
+
## Installation
15
+
16
+
Run the following command to add the switch component to your project.
17
+
18
+
```bash
19
+
pnpm hip install switch
20
+
```
21
+
22
+
## Props
23
+
24
+
This component is built using the [React Aria Switch](https://react-spectrum.adobe.com/react-aria/Switch.html).
25
+
26
+
<PropDocs components={["Switch"]} />
27
+
28
+
## Features
29
+
30
+
### States
31
+
32
+
Switches support different states including checked, unchecked, and disabled.
33
+
34
+
<Example src={SwitchStates} />
35
+
36
+
### With Description
37
+
38
+
Switches can include descriptive text to provide additional context.
39
+
40
+
<Example src={SwitchWithDescription} />
41
+
42
+
## Related Components
43
+
44
+
- [Checkbox](/components/checkbox) - For multiple selection options
45
+
- [Radio](/components/radio) - For single selection from multiple options
46
+
- [ToggleButton](/components/toggle-button) - For toggleable button states
47
+
- [Label](/components/label) - For form labels and descriptions
+31
apps/docs/src/docs/components/table.mdx
+31
apps/docs/src/docs/components/table.mdx
···
1
+
---
2
+
title: Table
3
+
description: A table component for displaying structured data in rows and columns.
4
+
---
5
+
6
+
import { PropDocs } from '../../lib/PropDocs'
7
+
import { Example } from '../../lib/Example'
8
+
import { Basic } from '../../examples/table/basic'
9
+
10
+
<Example src={Basic} />
11
+
12
+
## Installation
13
+
14
+
Run the following command to add the table component to your project.
15
+
16
+
```bash
17
+
pnpm hip install table
18
+
```
19
+
20
+
## Props
21
+
22
+
This component is built using the [React Aria Table](https://react-spectrum.adobe.com/react-aria/Table.html).
23
+
24
+
<PropDocs components={["Table", "TableHeader", "TableBody", "TableColumn", "TableRow", "TableCell"]} />
25
+
26
+
## Related Components
27
+
28
+
- [ListBox](/components/listbox) - For selectable list data
29
+
- [Tree](/components/tree) - For hierarchical data display
30
+
- [Card](/components/card) - For displaying table data in cards
31
+
- [Badge](/components/badge) - For status indicators in table cells
+31
apps/docs/src/docs/components/text-area.mdx
+31
apps/docs/src/docs/components/text-area.mdx
···
1
+
---
2
+
title: Text Area
3
+
description: A multi-line text input component for longer text content.
4
+
---
5
+
6
+
import { PropDocs } from '../../lib/PropDocs'
7
+
import { Example } from '../../lib/Example'
8
+
import { Basic } from '../../examples/text-area/basic'
9
+
10
+
<Example src={Basic} />
11
+
12
+
## Installation
13
+
14
+
Run the following command to add the text area component to your project.
15
+
16
+
```bash
17
+
pnpm hip install text-area
18
+
```
19
+
20
+
## Props
21
+
22
+
This component is built using the [React Aria TextArea](https://react-spectrum.adobe.com/react-aria/TextArea.html).
23
+
24
+
<PropDocs components={["TextArea"]} />
25
+
26
+
## Related Components
27
+
28
+
- [TextField](/components/text-field) - For single-line text input
29
+
- [NumberField](/components/number-field) - For numeric input
30
+
- [SearchField](/components/search-field) - For search input with clear button
31
+
- [Label](/components/label) - For form labels and descriptions
+61
apps/docs/src/docs/components/text-field.mdx
+61
apps/docs/src/docs/components/text-field.mdx
···
1
+
---
2
+
title: Text Field
3
+
description: A text input component with support for labels, descriptions, and validation.
4
+
---
5
+
6
+
import { PropDocs } from '../../lib/PropDocs'
7
+
import { Example } from '../../lib/Example'
8
+
import { Basic } from '../../examples/text-field/basic'
9
+
import { TextFieldVariants } from '../../examples/text-field/variants'
10
+
import { TextFieldSizes } from '../../examples/text-field/sizes'
11
+
import { PasswordField } from '../../examples/text-field/password'
12
+
import { PrefixAndSuffix } from '../../examples/text-field/prefix-and-suffix'
13
+
14
+
<Example src={Basic} />
15
+
16
+
## Installation
17
+
18
+
Run the following command to add the text field component to your project.
19
+
20
+
```bash
21
+
pnpm hip install text-field
22
+
```
23
+
24
+
## Props
25
+
26
+
This component is built using the [React Aria TextField](https://react-spectrum.adobe.com/react-aria/TextField.html).
27
+
28
+
<PropDocs components={["TextField"]} />
29
+
30
+
## Features
31
+
32
+
### Prefix and Suffix
33
+
34
+
The text field supports a prefix and suffix.
35
+
36
+
<Example src={PrefixAndSuffix} />
37
+
38
+
### Variants
39
+
40
+
The text field supports different visual variants.
41
+
42
+
<Example src={TextFieldVariants} />
43
+
44
+
### Sizes
45
+
46
+
The text field supports three different sizes.
47
+
48
+
<Example src={TextFieldSizes} />
49
+
50
+
### Password Field
51
+
52
+
Text fields automatically include password visibility toggle when type is set to "password".
53
+
54
+
<Example src={PasswordField} />
55
+
56
+
## Related Components
57
+
58
+
- [TextArea](/components/text-area) - For multi-line text input
59
+
- [NumberField](/components/number-field) - For numeric input
60
+
- [SearchField](/components/search-field) - For search input with clear button
61
+
- [Label](/components/label) - For form labels and descriptions
+61
apps/docs/src/docs/components/time-field.mdx
+61
apps/docs/src/docs/components/time-field.mdx
···
1
+
---
2
+
title: Time Field
3
+
description: A time input component for selecting times with proper formatting.
4
+
---
5
+
6
+
import { PropDocs } from '../../lib/PropDocs'
7
+
import { Example } from '../../lib/Example'
8
+
import { Basic } from '../../examples/time-field/basic'
9
+
import { Sizes } from '../../examples/time-field/sizes'
10
+
import { Variants } from '../../examples/time-field/variants'
11
+
import { Description } from '../../examples/time-field/description'
12
+
import { PrefixAndSuffix } from '../../examples/time-field/prefix-and-suffix'
13
+
14
+
<Example src={Basic} />
15
+
16
+
## Installation
17
+
18
+
Run the following command to add the time field component to your project.
19
+
20
+
```bash
21
+
pnpm hip install time-field
22
+
```
23
+
24
+
## Features
25
+
26
+
### Prefix and Suffix
27
+
28
+
The time field component supports a prefix and suffix.
29
+
30
+
<Example src={PrefixAndSuffix} />
31
+
32
+
### Sizes
33
+
34
+
The time field component comes in three sizes: small, medium, and large.
35
+
36
+
<Example src={Sizes} />
37
+
38
+
### Variants
39
+
40
+
The time field component comes in three variants: primary, secondary, and tertiary.
41
+
42
+
<Example src={Variants} />
43
+
44
+
### Description
45
+
46
+
The time field component supports a description.
47
+
48
+
<Example src={Description} />
49
+
50
+
## Props
51
+
52
+
This component is built using the [React Aria TimeField](https://react-spectrum.adobe.com/react-aria/TimeField.html).
53
+
54
+
<PropDocs components={["TimeField"]} />
55
+
56
+
## Related Components
57
+
58
+
- [DateField](/components/date-field) - For date input
59
+
- [TextField](/components/text-field) - For general text input
60
+
- [NumberField](/components/number-field) - For numeric input
61
+
- [Label](/components/label) - For form labels and descriptions
+60
apps/docs/src/docs/components/tooltip.mdx
+60
apps/docs/src/docs/components/tooltip.mdx
···
1
+
---
2
+
title: Tooltip
3
+
description: A tooltip component that displays helpful information on hover.
4
+
---
5
+
6
+
import { PropDocs } from '../../lib/PropDocs'
7
+
import { Example } from '../../lib/Example'
8
+
import { Basic } from '../../examples/tooltip/basic'
9
+
import { TooltipPlacements } from '../../examples/tooltip/placements'
10
+
11
+
<Example src={Basic} />
12
+
13
+
## Installation
14
+
15
+
Run the following command to add the tooltip component to your project.
16
+
17
+
```bash
18
+
pnpm hip install tooltip
19
+
```
20
+
21
+
## Features
22
+
23
+
### Placements
24
+
25
+
Tooltips can be positioned in different directions around the trigger element.
26
+
27
+
<Example src={TooltipPlacements} />
28
+
29
+
## Usage Guidelines
30
+
31
+
When using tooltips, follow these best practices:
32
+
33
+
### Do
34
+
35
+
- Use tooltips to provide additional context for UI elements that may be unclear
36
+
- Keep tooltip content brief and focused
37
+
- Use tooltips for icon-only buttons or truncated text that needs clarification
38
+
- Use tooltips for supplementary information that's not critical for basic task completion
39
+
40
+
### Don't
41
+
42
+
- Put essential information only in tooltips - critical content should be visible by default
43
+
- Use tooltips for complex interactive content (use a popover or modal instead)
44
+
- Place tooltips on disabled elements (users can't hover/focus them)
45
+
- Nest tooltips within other tooltips
46
+
- Use tooltips for content that needs to be persistent or copied
47
+
- Make tooltips too long - keep them concise and scannable
48
+
49
+
## Props
50
+
51
+
This component is built using the [React Aria Tooltip](https://react-spectrum.adobe.com/react-aria/Tooltip.html).
52
+
53
+
<PropDocs components={["Tooltip"]} />
54
+
55
+
## Related Components
56
+
57
+
- [Popover](/components/popover) - For more complex overlay content
58
+
- [IconButton](/components/icon-button) - Often used with tooltips for context
59
+
- [Button](/components/button) - Can be enhanced with tooltips
60
+
- [Badge](/components/badge) - Can be enhanced with tooltips for additional info
+31
apps/docs/src/docs/components/tree.mdx
+31
apps/docs/src/docs/components/tree.mdx
···
1
+
---
2
+
title: Tree
3
+
description: A tree component for displaying hierarchical data with expandable nodes.
4
+
---
5
+
6
+
import { PropDocs } from '../../lib/PropDocs'
7
+
import { Example } from '../../lib/Example'
8
+
import { Basic } from '../../examples/tree/basic'
9
+
10
+
<Example src={Basic} />
11
+
12
+
## Installation
13
+
14
+
Run the following command to add the tree component to your project.
15
+
16
+
```bash
17
+
pnpm hip install tree
18
+
```
19
+
20
+
## Props
21
+
22
+
This component is built using the [React Aria Tree](https://react-spectrum.adobe.com/react-aria/Tree.html).
23
+
24
+
<PropDocs components={["Tree", "TreeItem"]} />
25
+
26
+
## Related Components
27
+
28
+
- [ListBox](/components/listbox) - For flat list data
29
+
- [Table](/components/table) - For structured data display
30
+
- [Card](/components/card) - For displaying tree data in cards
31
+
- [Menu](/components/menu) - For hierarchical menu structures
+54
apps/docs/src/docs/components/typography.mdx
+54
apps/docs/src/docs/components/typography.mdx
···
1
+
---
2
+
title: Typography
3
+
description: A collection of text components for consistent typography throughout your application.
4
+
---
5
+
6
+
import { PropDocs } from '../../lib/PropDocs'
7
+
import { Example } from '../../lib/Example'
8
+
import { Headings } from '../../examples/typography/headings'
9
+
import { Text } from '../../examples/typography/text'
10
+
import { TextVariants } from '../../examples/typography/variants'
11
+
import { Lists } from '../../examples/typography/lists'
12
+
13
+
<Example src={Headings} />
14
+
15
+
## Installation
16
+
17
+
Run the following command to add the typography component to your project.
18
+
19
+
```bash
20
+
pnpm hip install typography
21
+
```
22
+
23
+
## Props
24
+
25
+
This is a custom component collection built for typography.
26
+
27
+
<PropDocs components={["Heading1", "Heading2", "Heading3", "Heading4", "Heading5", "Body", "SmallBody", "LabelText", "SubLabel", "Blockquote", "UnorderedList", "OrderedList", "ListItem", "InlineCode"]} />
28
+
29
+
## Features
30
+
31
+
### Text Components
32
+
33
+
Typography includes various text components for different use cases.
34
+
35
+
<Example src={Text} />
36
+
37
+
### Text Variants
38
+
39
+
Text components support different variants for styling.
40
+
41
+
<Example src={TextVariants} />
42
+
43
+
### Lists and Other Elements
44
+
45
+
Typography also includes list components and other text elements.
46
+
47
+
<Example src={Lists} />
48
+
49
+
## Related Components
50
+
51
+
- [Link](/components/link) - For text links within typography
52
+
- [Badge](/components/badge) - For status indicators in text
53
+
- [Card](/components/card) - For containing typography content
54
+
- [Label](/components/label) - For form labels and descriptions
+22
apps/docs/src/examples/alert-dialog/basic.tsx
+22
apps/docs/src/examples/alert-dialog/basic.tsx
···
1
+
import {
2
+
AlertDialog,
3
+
AlertDialogHeader,
4
+
AlertDialogFooter,
5
+
AlertDialogDescription,
6
+
} from "@/components/alert-dialog";
7
+
import { Button } from "@/components/button";
8
+
9
+
export function Basic() {
10
+
return (
11
+
<AlertDialog trigger={<Button variant="critical">Delete Item</Button>}>
12
+
<AlertDialogHeader>Are you sure?</AlertDialogHeader>
13
+
<AlertDialogDescription>
14
+
This action cannot be undone. This will permanently delete the item.
15
+
</AlertDialogDescription>
16
+
<AlertDialogFooter>
17
+
<Button variant="secondary">Cancel</Button>
18
+
<Button variant="critical">Delete</Button>
19
+
</AlertDialogFooter>
20
+
</AlertDialog>
21
+
);
22
+
}
+13
apps/docs/src/examples/avatar/fallbacks.tsx
+13
apps/docs/src/examples/avatar/fallbacks.tsx
···
1
+
import { Avatar } from "@/components/avatar";
2
+
import { Flex } from "@/components/flex";
3
+
4
+
export function AvatarFallbacks() {
5
+
return (
6
+
<Flex gap="4" wrap>
7
+
<Avatar size="lg" fallback="AB" />
8
+
<Avatar size="lg" fallback="CD" />
9
+
<Avatar size="lg" fallback="EF" />
10
+
<Avatar size="lg" fallback="GH" />
11
+
</Flex>
12
+
);
13
+
}
+13
apps/docs/src/examples/avatar/group.tsx
+13
apps/docs/src/examples/avatar/group.tsx
···
1
+
import { Avatar } from "@/components/avatar";
2
+
import { Flex } from "@/components/flex";
3
+
4
+
export function AvatarGroup() {
5
+
return (
6
+
<Flex gap="2" align="center">
7
+
<Avatar size="sm" src="https://github.com/shadcn.png" fallback="JD" />
8
+
<Avatar size="sm" src="https://github.com/vercel.png" fallback="VC" />
9
+
<Avatar size="sm" src="https://github.com/nextjs.png" fallback="NJ" />
10
+
<Avatar size="sm" fallback="+3" />
11
+
</Flex>
12
+
);
13
+
}
+5
apps/docs/src/examples/badge/basic.tsx
+5
apps/docs/src/examples/badge/basic.tsx
+12
apps/docs/src/examples/badge/dismissible.tsx
+12
apps/docs/src/examples/badge/dismissible.tsx
···
1
+
import { Badge } from "@/components/badge";
2
+
import { Flex } from "@/components/flex";
3
+
4
+
export function BadgeDismissible() {
5
+
return (
6
+
<Flex gap="4" wrap>
7
+
<Badge variant="default">Dismissible Badge</Badge>
8
+
<Badge variant="primary">Primary Badge</Badge>
9
+
<Badge variant="success">Success Badge</Badge>
10
+
</Flex>
11
+
);
12
+
}
+11
apps/docs/src/examples/badge/sizes.tsx
+11
apps/docs/src/examples/badge/sizes.tsx
+14
apps/docs/src/examples/badge/variants.tsx
+14
apps/docs/src/examples/badge/variants.tsx
···
1
+
import { Badge } from "@/components/badge";
2
+
import { Flex } from "@/components/flex";
3
+
4
+
export function BadgeVariants() {
5
+
return (
6
+
<Flex gap="4" wrap>
7
+
<Badge variant="default">Default</Badge>
8
+
<Badge variant="primary">Primary</Badge>
9
+
<Badge variant="success">Success</Badge>
10
+
<Badge variant="warning">Warning</Badge>
11
+
<Badge variant="critical">Critical</Badge>
12
+
</Flex>
13
+
);
14
+
}
+26
apps/docs/src/examples/badge/with-icons.tsx
+26
apps/docs/src/examples/badge/with-icons.tsx
···
1
+
import { Badge } from "@/components/badge";
2
+
import { Flex } from "@/components/flex";
3
+
import { CheckCircle, AlertCircle, XCircle, Info } from "lucide-react";
4
+
5
+
export function BadgeWithIcons() {
6
+
return (
7
+
<Flex gap="4" wrap>
8
+
<Badge variant="success">
9
+
<CheckCircle />
10
+
Success
11
+
</Badge>
12
+
<Badge variant="warning">
13
+
<AlertCircle />
14
+
Warning
15
+
</Badge>
16
+
<Badge variant="critical">
17
+
<XCircle />
18
+
Error
19
+
</Badge>
20
+
<Badge variant="default">
21
+
<Info />
22
+
Info
23
+
</Badge>
24
+
</Flex>
25
+
);
26
+
}
+26
apps/docs/src/examples/card/basic.tsx
+26
apps/docs/src/examples/card/basic.tsx
···
1
+
import {
2
+
Card,
3
+
CardHeader,
4
+
CardTitle,
5
+
CardDescription,
6
+
CardBody,
7
+
CardFooter,
8
+
} from "@/components/card";
9
+
import { Button } from "@/components/button";
10
+
11
+
export function Basic() {
12
+
return (
13
+
<Card>
14
+
<CardHeader>
15
+
<CardTitle>Card Title</CardTitle>
16
+
<CardDescription>Card description goes here</CardDescription>
17
+
</CardHeader>
18
+
<CardBody>
19
+
<p>This is the card body content.</p>
20
+
</CardBody>
21
+
<CardFooter>
22
+
<Button>Action</Button>
23
+
</CardFooter>
24
+
</Card>
25
+
);
26
+
}
+33
apps/docs/src/examples/card/sizes.tsx
+33
apps/docs/src/examples/card/sizes.tsx
···
1
+
import { Card, CardHeader, CardTitle, CardBody } from "@/components/card";
2
+
import { Flex } from "@/components/flex";
3
+
4
+
export function CardSizes() {
5
+
return (
6
+
<Flex gap="4" wrap>
7
+
<Card size="sm">
8
+
<CardHeader>
9
+
<CardTitle>Small Card</CardTitle>
10
+
</CardHeader>
11
+
<CardBody>
12
+
<p>Small card content</p>
13
+
</CardBody>
14
+
</Card>
15
+
<Card size="md">
16
+
<CardHeader>
17
+
<CardTitle>Medium Card</CardTitle>
18
+
</CardHeader>
19
+
<CardBody>
20
+
<p>Medium card content</p>
21
+
</CardBody>
22
+
</Card>
23
+
<Card size="lg">
24
+
<CardHeader>
25
+
<CardTitle>Large Card</CardTitle>
26
+
</CardHeader>
27
+
<CardBody>
28
+
<p>Large card content</p>
29
+
</CardBody>
30
+
</Card>
31
+
</Flex>
32
+
);
33
+
}
+33
apps/docs/src/examples/card/with-actions.tsx
+33
apps/docs/src/examples/card/with-actions.tsx
···
1
+
import { Card, CardHeader, CardTitle, CardDescription, CardBody, CardFooter, CardHeaderAction } from "@/components/card";
2
+
import { Button } from "@/components/button";
3
+
import { IconButton } from "@/components/icon-button";
4
+
import { MoreHorizontal, Heart, Share } from "lucide-react";
5
+
6
+
export function CardWithActions() {
7
+
return (
8
+
<Card>
9
+
<CardHeader>
10
+
<CardTitle>Card with Actions</CardTitle>
11
+
<CardDescription>This card includes header actions</CardDescription>
12
+
<CardHeaderAction>
13
+
<IconButton label="Like" variant="ghost">
14
+
<Heart />
15
+
</IconButton>
16
+
<IconButton label="Share" variant="ghost">
17
+
<Share />
18
+
</IconButton>
19
+
<IconButton label="More" variant="ghost">
20
+
<MoreHorizontal />
21
+
</IconButton>
22
+
</CardHeaderAction>
23
+
</CardHeader>
24
+
<CardBody>
25
+
<p>This card demonstrates how to include actions in the header.</p>
26
+
</CardBody>
27
+
<CardFooter>
28
+
<Button variant="secondary">Cancel</Button>
29
+
<Button>Save</Button>
30
+
</CardFooter>
31
+
</Card>
32
+
);
33
+
}
+23
apps/docs/src/examples/card/with-badges.tsx
+23
apps/docs/src/examples/card/with-badges.tsx
···
1
+
import { Card, CardHeader, CardTitle, CardBody } from "@/components/card";
2
+
import { Flex } from "@/components/flex";
3
+
import { Badge } from "@/components/badge";
4
+
5
+
export function CardWithBadges() {
6
+
return (
7
+
<Card>
8
+
<CardHeader>
9
+
<Flex justify="between" align="center">
10
+
<CardTitle>Project Status</CardTitle>
11
+
<Badge variant="success">Active</Badge>
12
+
</Flex>
13
+
</CardHeader>
14
+
<CardBody>
15
+
<Flex gap="2" wrap>
16
+
<Badge variant="primary">React</Badge>
17
+
<Badge variant="default">TypeScript</Badge>
18
+
<Badge variant="warning">In Progress</Badge>
19
+
</Flex>
20
+
</CardBody>
21
+
</Card>
22
+
);
23
+
}
+25
apps/docs/src/examples/card/with-image.tsx
+25
apps/docs/src/examples/card/with-image.tsx
···
1
+
import {
2
+
Card,
3
+
CardHeader,
4
+
CardTitle,
5
+
CardBody,
6
+
CardImage,
7
+
} from "@/components/card";
8
+
9
+
export function CardWithImage() {
10
+
return (
11
+
<Card>
12
+
<CardImage
13
+
src="https://images.unsplash.com/photo-1602293589930-45aad59ba3ab?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=272&h=272&q=80&crop=entropy"
14
+
alt="Beautiful landscape"
15
+
aspectRatio={16 / 9}
16
+
/>
17
+
<CardHeader>
18
+
<CardTitle>Card with Image</CardTitle>
19
+
</CardHeader>
20
+
<CardBody>
21
+
<p>This card includes an image with a 16:9 aspect ratio.</p>
22
+
</CardBody>
23
+
</Card>
24
+
);
25
+
}
+11
apps/docs/src/examples/checkbox/basic.tsx
+11
apps/docs/src/examples/checkbox/basic.tsx
···
1
+
import { Checkbox, CheckboxGroup } from "@/components/checkbox";
2
+
3
+
export function Basic() {
4
+
return (
5
+
<CheckboxGroup label="Preferences">
6
+
<Checkbox>Email notifications</Checkbox>
7
+
<Checkbox>SMS notifications</Checkbox>
8
+
<Checkbox>Push notifications</Checkbox>
9
+
</CheckboxGroup>
10
+
);
11
+
}
+13
apps/docs/src/examples/checkbox/states.tsx
+13
apps/docs/src/examples/checkbox/states.tsx
···
1
+
import { Checkbox } from "@/components/checkbox";
2
+
import { Flex } from "@/components/flex";
3
+
4
+
export function CheckboxStates() {
5
+
return (
6
+
<Flex direction="column" gap="4">
7
+
<Checkbox>Unchecked</Checkbox>
8
+
<Checkbox defaultSelected>Checked</Checkbox>
9
+
<Checkbox isIndeterminate>Indeterminate</Checkbox>
10
+
<Checkbox isDisabled>Disabled</Checkbox>
11
+
</Flex>
12
+
);
13
+
}
+25
apps/docs/src/examples/checkbox/with-description.tsx
+25
apps/docs/src/examples/checkbox/with-description.tsx
···
1
+
import { Checkbox, CheckboxGroup } from "@/components/checkbox";
2
+
import { Flex } from "@/components/flex";
3
+
4
+
export function CheckboxWithDescription() {
5
+
return (
6
+
<CheckboxGroup label="Notifications">
7
+
<Checkbox>
8
+
<div>
9
+
<div>Email notifications</div>
10
+
<div style={{ fontSize: "0.875rem", color: "#666" }}>
11
+
Receive updates about your account
12
+
</div>
13
+
</div>
14
+
</Checkbox>
15
+
<Checkbox>
16
+
<div>
17
+
<div>SMS notifications</div>
18
+
<div style={{ fontSize: "0.875rem", color: "#666" }}>
19
+
Get text messages for important updates
20
+
</div>
21
+
</div>
22
+
</Checkbox>
23
+
</CheckboxGroup>
24
+
);
25
+
}
+5
apps/docs/src/examples/color-field/basic.tsx
+5
apps/docs/src/examples/color-field/basic.tsx
+5
apps/docs/src/examples/color-swatch/basic.tsx
+5
apps/docs/src/examples/color-swatch/basic.tsx
+19
apps/docs/src/examples/combobox/basic.tsx
+19
apps/docs/src/examples/combobox/basic.tsx
···
1
+
import { ComboBox } from "@/components/combobox";
2
+
3
+
const options = [
4
+
{ id: "option1", name: "Option 1" },
5
+
{ id: "option2", name: "Option 2" },
6
+
{ id: "option3", name: "Option 3" },
7
+
];
8
+
9
+
export function Basic() {
10
+
return (
11
+
<ComboBox
12
+
label="Choose an option"
13
+
placeholder="Type to search..."
14
+
items={options}
15
+
>
16
+
{(item) => item.name}
17
+
</ComboBox>
18
+
);
19
+
}
+5
apps/docs/src/examples/date-field/basic.tsx
+5
apps/docs/src/examples/date-field/basic.tsx
+16
apps/docs/src/examples/dialog/basic.tsx
+16
apps/docs/src/examples/dialog/basic.tsx
···
1
+
import { Dialog, DialogHeader, DialogFooter } from "@/components/dialog";
2
+
import { Button } from "@/components/button";
3
+
import { Body } from "@/components/typography";
4
+
5
+
export function Basic() {
6
+
return (
7
+
<Dialog trigger={<Button>Open Dialog</Button>}>
8
+
<DialogHeader>Dialog Title</DialogHeader>
9
+
<Body>This is the dialog content. You can put any content here.</Body>
10
+
<DialogFooter>
11
+
<Button variant="secondary">Cancel</Button>
12
+
<Button>Confirm</Button>
13
+
</DialogFooter>
14
+
</Dialog>
15
+
);
16
+
}
+21
apps/docs/src/examples/dialog/form.tsx
+21
apps/docs/src/examples/dialog/form.tsx
···
1
+
import { Dialog, DialogHeader, DialogFooter } from "@/components/dialog";
2
+
import { TextField } from "@/components/text-field";
3
+
import { Flex } from "@/components/flex";
4
+
import { Button } from "@/components/button";
5
+
6
+
export function DialogForm() {
7
+
return (
8
+
<Dialog trigger={<Button>Open Form Dialog</Button>}>
9
+
<DialogHeader>Create New User</DialogHeader>
10
+
<Flex direction="column" gap="4">
11
+
<TextField label="Name" placeholder="Enter full name" />
12
+
<TextField label="Email" placeholder="Enter email address" />
13
+
<TextField label="Phone" placeholder="Enter phone number" />
14
+
</Flex>
15
+
<DialogFooter>
16
+
<Button variant="secondary">Cancel</Button>
17
+
<Button>Create User</Button>
18
+
</DialogFooter>
19
+
</Dialog>
20
+
);
21
+
}
+20
apps/docs/src/examples/dialog/sizes.tsx
+20
apps/docs/src/examples/dialog/sizes.tsx
···
1
+
import { Dialog, DialogHeader } from "@/components/dialog";
2
+
import { Button } from "@/components/button";
3
+
import { Flex } from "@/components/flex";
4
+
5
+
export function DialogSizes() {
6
+
return (
7
+
<Flex gap="4" wrap>
8
+
<Dialog trigger={<Button>Small Dialog</Button>}>
9
+
<DialogHeader>Small Dialog</DialogHeader>
10
+
<p>This is a small dialog with minimal content.</p>
11
+
</Dialog>
12
+
13
+
<Dialog trigger={<Button>Large Dialog</Button>}>
14
+
<DialogHeader>Large Dialog</DialogHeader>
15
+
<p>This is a large dialog with more space for content.</p>
16
+
<p>Perfect for forms, detailed information, or complex layouts.</p>
17
+
</Dialog>
18
+
</Flex>
19
+
);
20
+
}
+18
apps/docs/src/examples/file-drop-zone/basic.tsx
+18
apps/docs/src/examples/file-drop-zone/basic.tsx
···
1
+
import { FileDropZone } from "@/components/file-drop-zone";
2
+
3
+
export function Basic() {
4
+
return (
5
+
<FileDropZone onDrop={(files) => console.log("Files dropped:", files)}>
6
+
<div
7
+
style={{
8
+
padding: "2rem",
9
+
border: "2px dashed #ccc",
10
+
borderRadius: "8px",
11
+
textAlign: "center",
12
+
}}
13
+
>
14
+
Drop files here or click to upload
15
+
</div>
16
+
</FileDropZone>
17
+
);
18
+
}
+60
apps/docs/src/examples/flex/alignment.tsx
+60
apps/docs/src/examples/flex/alignment.tsx
···
1
+
import { Flex } from "@/components/flex";
2
+
3
+
export function FlexAlignment() {
4
+
return (
5
+
<div>
6
+
<Flex
7
+
justify="start"
8
+
gap="4"
9
+
style={{
10
+
marginBottom: "1rem",
11
+
border: "1px solid #ccc",
12
+
padding: "1rem",
13
+
}}
14
+
>
15
+
<div>Start</div>
16
+
<div>Item 2</div>
17
+
<div>Item 3</div>
18
+
</Flex>
19
+
<Flex
20
+
justify="center"
21
+
gap="4"
22
+
style={{
23
+
marginBottom: "1rem",
24
+
border: "1px solid #ccc",
25
+
padding: "1rem",
26
+
}}
27
+
>
28
+
<div>Center</div>
29
+
<div>Item 2</div>
30
+
<div>Item 3</div>
31
+
</Flex>
32
+
<Flex
33
+
justify="end"
34
+
gap="4"
35
+
style={{
36
+
marginBottom: "1rem",
37
+
border: "1px solid #ccc",
38
+
padding: "1rem",
39
+
}}
40
+
>
41
+
<div>End</div>
42
+
<div>Item 2</div>
43
+
<div>Item 3</div>
44
+
</Flex>
45
+
<Flex
46
+
justify="between"
47
+
gap="4"
48
+
style={{
49
+
marginBottom: "1rem",
50
+
border: "1px solid #ccc",
51
+
padding: "1rem",
52
+
}}
53
+
>
54
+
<div>Between</div>
55
+
<div>Item 2</div>
56
+
<div>Item 3</div>
57
+
</Flex>
58
+
</div>
59
+
);
60
+
}
+11
apps/docs/src/examples/flex/basic.tsx
+11
apps/docs/src/examples/flex/basic.tsx
+28
apps/docs/src/examples/flex/directions.tsx
+28
apps/docs/src/examples/flex/directions.tsx
···
1
+
import { Flex } from "@/components/flex";
2
+
3
+
export function FlexDirections() {
4
+
return (
5
+
<div>
6
+
<Flex direction="row" gap="4" style={{ marginBottom: "1rem" }}>
7
+
<div>Row</div>
8
+
<div>Item 2</div>
9
+
<div>Item 3</div>
10
+
</Flex>
11
+
<Flex direction="column" gap="4" style={{ marginBottom: "1rem" }}>
12
+
<div>Column</div>
13
+
<div>Item 2</div>
14
+
<div>Item 3</div>
15
+
</Flex>
16
+
<Flex direction="row-reverse" gap="4" style={{ marginBottom: "1rem" }}>
17
+
<div>Row Reverse</div>
18
+
<div>Item 2</div>
19
+
<div>Item 3</div>
20
+
</Flex>
21
+
<Flex direction="column-reverse" gap="4">
22
+
<div>Column Reverse</div>
23
+
<div>Item 2</div>
24
+
<div>Item 3</div>
25
+
</Flex>
26
+
</div>
27
+
);
28
+
}
+23
apps/docs/src/examples/flex/gap.tsx
+23
apps/docs/src/examples/flex/gap.tsx
···
1
+
import { Flex } from "@/components/flex";
2
+
3
+
export function FlexGap() {
4
+
return (
5
+
<div>
6
+
<Flex gap="1" style={{ marginBottom: "1rem" }}>
7
+
<div style={{ padding: "0.5rem", background: "#f0f0f0" }}>Gap 1</div>
8
+
<div style={{ padding: "0.5rem", background: "#f0f0f0" }}>Gap 1</div>
9
+
<div style={{ padding: "0.5rem", background: "#f0f0f0" }}>Gap 1</div>
10
+
</Flex>
11
+
<Flex gap="4" style={{ marginBottom: "1rem" }}>
12
+
<div style={{ padding: "0.5rem", background: "#f0f0f0" }}>Gap 4</div>
13
+
<div style={{ padding: "0.5rem", background: "#f0f0f0" }}>Gap 4</div>
14
+
<div style={{ padding: "0.5rem", background: "#f0f0f0" }}>Gap 4</div>
15
+
</Flex>
16
+
<Flex gap="8">
17
+
<div style={{ padding: "0.5rem", background: "#f0f0f0" }}>Gap 8</div>
18
+
<div style={{ padding: "0.5rem", background: "#f0f0f0" }}>Gap 8</div>
19
+
<div style={{ padding: "0.5rem", background: "#f0f0f0" }}>Gap 8</div>
20
+
</Flex>
21
+
</div>
22
+
);
23
+
}
+19
apps/docs/src/examples/flex/wrap.tsx
+19
apps/docs/src/examples/flex/wrap.tsx
···
1
+
import { Flex } from "@/components/flex";
2
+
3
+
export function FlexWrap() {
4
+
return (
5
+
<div>
6
+
<Flex
7
+
wrap
8
+
gap="4"
9
+
style={{ width: "300px", border: "1px solid #ccc", padding: "1rem" }}
10
+
>
11
+
<div style={{ padding: "0.5rem", background: "#f0f0f0" }}>Item 1</div>
12
+
<div style={{ padding: "0.5rem", background: "#f0f0f0" }}>Item 2</div>
13
+
<div style={{ padding: "0.5rem", background: "#f0f0f0" }}>Item 3</div>
14
+
<div style={{ padding: "0.5rem", background: "#f0f0f0" }}>Item 4</div>
15
+
<div style={{ padding: "0.5rem", background: "#f0f0f0" }}>Item 5</div>
16
+
</Flex>
17
+
</div>
18
+
);
19
+
}
+14
apps/docs/src/examples/grid/basic.tsx
+14
apps/docs/src/examples/grid/basic.tsx
···
1
+
import { Grid, GridItem } from "@/components/grid";
2
+
3
+
export function Basic() {
4
+
return (
5
+
<Grid columns="repeat(3, 1fr)" gap="4">
6
+
<GridItem>Item 1</GridItem>
7
+
<GridItem>Item 2</GridItem>
8
+
<GridItem>Item 3</GridItem>
9
+
<GridItem>Item 4</GridItem>
10
+
<GridItem>Item 5</GridItem>
11
+
<GridItem>Item 6</GridItem>
12
+
</Grid>
13
+
);
14
+
}
+23
apps/docs/src/examples/grid/spans.tsx
+23
apps/docs/src/examples/grid/spans.tsx
···
1
+
import { Grid, GridItem } from "@/components/grid";
2
+
3
+
export function GridSpans() {
4
+
return (
5
+
<Grid columns="repeat(4, 1fr)" gap="4">
6
+
<GridItem columnStart={1} columnEnd={3}>
7
+
Spans 2 columns
8
+
</GridItem>
9
+
<GridItem columnStart={3} columnEnd={5}>
10
+
Spans 2 columns
11
+
</GridItem>
12
+
<GridItem columnStart={1} columnEnd={2}>
13
+
Single column
14
+
</GridItem>
15
+
<GridItem columnStart={2} columnEnd={4}>
16
+
Spans 2 columns
17
+
</GridItem>
18
+
<GridItem columnStart={4} columnEnd={5}>
19
+
Single column
20
+
</GridItem>
21
+
</Grid>
22
+
);
23
+
}
+12
apps/docs/src/examples/label/basic.tsx
+12
apps/docs/src/examples/label/basic.tsx
···
1
+
import { Label, Description } from "@/components/label";
2
+
import { TextField } from "@/components/text-field";
3
+
4
+
export function Basic() {
5
+
return (
6
+
<div>
7
+
<Label>Email Address</Label>
8
+
<TextField placeholder="Enter your email" />
9
+
<Description>We'll never share your email with anyone else.</Description>
10
+
</div>
11
+
);
12
+
}
+12
apps/docs/src/examples/label/sizes.tsx
+12
apps/docs/src/examples/label/sizes.tsx
···
1
+
import { Label } from "@/components/label";
2
+
import { Flex } from "@/components/flex";
3
+
4
+
export function LabelSizes() {
5
+
return (
6
+
<Flex direction="column" gap="4">
7
+
<Label size="sm">Small Label</Label>
8
+
<Label size="md">Medium Label</Label>
9
+
<Label size="lg">Large Label</Label>
10
+
</Flex>
11
+
);
12
+
}
+13
apps/docs/src/examples/link/basic.tsx
+13
apps/docs/src/examples/link/basic.tsx
···
1
+
import { Link } from "@/components/link";
2
+
3
+
export function Basic() {
4
+
return (
5
+
<div>
6
+
<p>
7
+
This is a paragraph with a <Link href="https://example.com">link</Link>{" "}
8
+
in it.
9
+
</p>
10
+
<Link href="https://example.com">Standalone link</Link>
11
+
</div>
12
+
);
13
+
}
+19
apps/docs/src/examples/listbox/basic.tsx
+19
apps/docs/src/examples/listbox/basic.tsx
···
1
+
import { ListBox, ListBoxItem, ListBoxSection } from "@/components/listbox";
2
+
3
+
const items = [
4
+
{ id: "item1", name: "Item 1" },
5
+
{ id: "item2", name: "Item 2" },
6
+
{ id: "item3", name: "Item 3" },
7
+
];
8
+
9
+
export function Basic() {
10
+
return (
11
+
<ListBox items={items}>
12
+
{(item) => (
13
+
<ListBoxItem key={item.id} id={item.id}>
14
+
{item.name}
15
+
</ListBoxItem>
16
+
)}
17
+
</ListBox>
18
+
);
19
+
}
+12
apps/docs/src/examples/number-field/basic.tsx
+12
apps/docs/src/examples/number-field/basic.tsx
+13
apps/docs/src/examples/popover/basic.tsx
+13
apps/docs/src/examples/popover/basic.tsx
···
1
+
import { Popover } from "@/components/popover";
2
+
import { Button } from "@/components/button";
3
+
4
+
export function Basic() {
5
+
return (
6
+
<Popover trigger={<Button>Open Popover</Button>}>
7
+
<div>
8
+
<h3>Popover Content</h3>
9
+
<p>This is the content inside the popover.</p>
10
+
</div>
11
+
</Popover>
12
+
);
13
+
}
+11
apps/docs/src/examples/radio/basic.tsx
+11
apps/docs/src/examples/radio/basic.tsx
···
1
+
import { RadioGroup, Radio } from "@/components/radio";
2
+
3
+
export function Basic() {
4
+
return (
5
+
<RadioGroup label="Choose an option">
6
+
<Radio value="option1">Option 1</Radio>
7
+
<Radio value="option2">Option 2</Radio>
8
+
<Radio value="option3">Option 3</Radio>
9
+
</RadioGroup>
10
+
);
11
+
}
+15
apps/docs/src/examples/radio/horizontal.tsx
+15
apps/docs/src/examples/radio/horizontal.tsx
···
1
+
import { RadioGroup, Radio } from "@/components/radio";
2
+
import { Flex } from "@/components/flex";
3
+
4
+
export function RadioHorizontal() {
5
+
return (
6
+
<RadioGroup label="Size" orientation="horizontal">
7
+
<Flex gap="4">
8
+
<Radio value="small">Small</Radio>
9
+
<Radio value="medium">Medium</Radio>
10
+
<Radio value="large">Large</Radio>
11
+
<Radio value="xlarge">X-Large</Radio>
12
+
</Flex>
13
+
</RadioGroup>
14
+
);
15
+
}
+33
apps/docs/src/examples/radio/with-description.tsx
+33
apps/docs/src/examples/radio/with-description.tsx
···
1
+
import { RadioGroup, Radio } from "@/components/radio";
2
+
import { Flex } from "@/components/flex";
3
+
4
+
export function RadioWithDescription() {
5
+
return (
6
+
<RadioGroup label="Payment Method">
7
+
<Radio value="credit">
8
+
<div>
9
+
<div>Credit Card</div>
10
+
<div style={{ fontSize: "0.875rem", color: "#666" }}>
11
+
Pay with your credit card securely
12
+
</div>
13
+
</div>
14
+
</Radio>
15
+
<Radio value="paypal">
16
+
<div>
17
+
<div>PayPal</div>
18
+
<div style={{ fontSize: "0.875rem", color: "#666" }}>
19
+
Use your PayPal account
20
+
</div>
21
+
</div>
22
+
</Radio>
23
+
<Radio value="bank">
24
+
<div>
25
+
<div>Bank Transfer</div>
26
+
<div style={{ fontSize: "0.875rem", color: "#666" }}>
27
+
Direct transfer from your bank account
28
+
</div>
29
+
</div>
30
+
</Radio>
31
+
</RadioGroup>
32
+
);
33
+
}
+5
apps/docs/src/examples/search-field/basic.tsx
+5
apps/docs/src/examples/search-field/basic.tsx
+19
apps/docs/src/examples/select/basic.tsx
+19
apps/docs/src/examples/select/basic.tsx
···
1
+
import { Select } from "@/components/select";
2
+
3
+
const options = [
4
+
{ id: "option1", name: "Option 1" },
5
+
{ id: "option2", name: "Option 2" },
6
+
{ id: "option3", name: "Option 3" },
7
+
];
8
+
9
+
export function Basic() {
10
+
return (
11
+
<Select
12
+
label="Choose an option"
13
+
placeholder="Select an option"
14
+
items={options}
15
+
>
16
+
{(item) => item.name}
17
+
</Select>
18
+
);
19
+
}
+41
apps/docs/src/examples/select/sizes.tsx
+41
apps/docs/src/examples/select/sizes.tsx
···
1
+
import { Select } from "@/components/select";
2
+
import { Flex } from "@/components/flex";
3
+
4
+
const sizes = [
5
+
{ id: "xs", name: "Extra Small" },
6
+
{ id: "sm", name: "Small" },
7
+
{ id: "md", name: "Medium" },
8
+
{ id: "lg", name: "Large" },
9
+
{ id: "xl", name: "Extra Large" },
10
+
];
11
+
12
+
export function SelectSizes() {
13
+
return (
14
+
<Flex direction="column" gap="4">
15
+
<Select
16
+
label="Small"
17
+
size="sm"
18
+
placeholder="Select size"
19
+
items={sizes}
20
+
>
21
+
{(item) => item.name}
22
+
</Select>
23
+
<Select
24
+
label="Medium"
25
+
size="md"
26
+
placeholder="Select size"
27
+
items={sizes}
28
+
>
29
+
{(item) => item.name}
30
+
</Select>
31
+
<Select
32
+
label="Large"
33
+
size="lg"
34
+
placeholder="Select size"
35
+
items={sizes}
36
+
>
37
+
{(item) => item.name}
38
+
</Select>
39
+
</Flex>
40
+
);
41
+
}
+32
apps/docs/src/examples/select/with-description.tsx
+32
apps/docs/src/examples/select/with-description.tsx
···
1
+
import { Select } from "@/components/select";
2
+
import { Flex } from "@/components/flex";
3
+
4
+
const countries = [
5
+
{ id: "us", name: "United States", code: "US" },
6
+
{ id: "ca", name: "Canada", code: "CA" },
7
+
{ id: "uk", name: "United Kingdom", code: "UK" },
8
+
{ id: "de", name: "Germany", code: "DE" },
9
+
{ id: "fr", name: "France", code: "FR" },
10
+
];
11
+
12
+
export function SelectWithDescription() {
13
+
return (
14
+
<Flex direction="column" gap="4">
15
+
<Select
16
+
label="Country"
17
+
placeholder="Select your country"
18
+
description="Choose the country where you live"
19
+
items={countries}
20
+
>
21
+
{(item) => (
22
+
<div>
23
+
<div>{item.name}</div>
24
+
<div style={{ fontSize: "0.875rem", color: "#666" }}>
25
+
{item.code}
26
+
</div>
27
+
</div>
28
+
)}
29
+
</Select>
30
+
</Flex>
31
+
);
32
+
}
+11
apps/docs/src/examples/separator/basic.tsx
+11
apps/docs/src/examples/separator/basic.tsx
+14
apps/docs/src/examples/separator/orientation.tsx
+14
apps/docs/src/examples/separator/orientation.tsx
···
1
+
import { Separator } from "@/components/separator";
2
+
import { Flex } from "@/components/flex";
3
+
4
+
export function SeparatorOrientation() {
5
+
return (
6
+
<Flex gap="4" align="center">
7
+
<div>Left</div>
8
+
<Separator orientation="vertical" />
9
+
<div>Center</div>
10
+
<Separator orientation="vertical" />
11
+
<div>Right</div>
12
+
</Flex>
13
+
);
14
+
}
+5
apps/docs/src/examples/switch/basic.tsx
+5
apps/docs/src/examples/switch/basic.tsx
+12
apps/docs/src/examples/switch/states.tsx
+12
apps/docs/src/examples/switch/states.tsx
···
1
+
import { Switch } from "@/components/switch";
2
+
import { Flex } from "@/components/flex";
3
+
4
+
export function SwitchStates() {
5
+
return (
6
+
<Flex direction="column" gap="4">
7
+
<Switch>Unchecked</Switch>
8
+
<Switch defaultSelected>Checked</Switch>
9
+
<Switch isDisabled>Disabled</Switch>
10
+
</Flex>
11
+
);
12
+
}
+21
apps/docs/src/examples/switch/with-description.tsx
+21
apps/docs/src/examples/switch/with-description.tsx
···
1
+
import { Switch } from "@/components/switch";
2
+
import { Flex } from "@/components/flex";
3
+
4
+
export function SwitchWithDescription() {
5
+
return (
6
+
<Flex direction="column" gap="4">
7
+
<div>
8
+
<Switch>Enable notifications</Switch>
9
+
<div style={{ fontSize: "0.875rem", color: "#666", marginTop: "0.25rem" }}>
10
+
Receive email notifications about important updates
11
+
</div>
12
+
</div>
13
+
<div>
14
+
<Switch>Dark mode</Switch>
15
+
<div style={{ fontSize: "0.875rem", color: "#666", marginTop: "0.25rem" }}>
16
+
Switch to dark theme for better viewing in low light
17
+
</div>
18
+
</div>
19
+
</Flex>
20
+
);
21
+
}
+43
apps/docs/src/examples/table/basic.tsx
+43
apps/docs/src/examples/table/basic.tsx
···
1
+
import {
2
+
Table,
3
+
TableHeader,
4
+
TableBody,
5
+
TableColumn,
6
+
TableRow,
7
+
TableCell,
8
+
} from "@/components/table";
9
+
10
+
const columns = [
11
+
{ id: "name", name: "Name" },
12
+
{ id: "email", name: "Email" },
13
+
{ id: "role", name: "Role" },
14
+
];
15
+
16
+
const rows = [
17
+
{ id: 1, name: "John Doe", email: "john@example.com", role: "Admin" },
18
+
{ id: 2, name: "Jane Smith", email: "jane@example.com", role: "User" },
19
+
{ id: 3, name: "Bob Johnson", email: "bob@example.com", role: "User" },
20
+
];
21
+
22
+
export function Basic() {
23
+
return (
24
+
<Table>
25
+
<TableHeader>
26
+
{columns.map((column) => (
27
+
<TableColumn key={column.id} id={column.id}>
28
+
{column.name}
29
+
</TableColumn>
30
+
))}
31
+
</TableHeader>
32
+
<TableBody items={rows}>
33
+
{(item) => (
34
+
<TableRow key={item.id} id={item.id}>
35
+
<TableCell>{item.name}</TableCell>
36
+
<TableCell>{item.email}</TableCell>
37
+
<TableCell>{item.role}</TableCell>
38
+
</TableRow>
39
+
)}
40
+
</TableBody>
41
+
</Table>
42
+
);
43
+
}
+11
apps/docs/src/examples/text-area/basic.tsx
+11
apps/docs/src/examples/text-area/basic.tsx
+11
apps/docs/src/examples/text-field/basic.tsx
+11
apps/docs/src/examples/text-field/basic.tsx
+11
apps/docs/src/examples/text-field/password.tsx
+11
apps/docs/src/examples/text-field/password.tsx
+12
apps/docs/src/examples/text-field/prefix-and-suffix.tsx
+12
apps/docs/src/examples/text-field/prefix-and-suffix.tsx
···
1
+
import { Flex } from "@/components/flex";
2
+
import { TextField } from "@/components/text-field";
3
+
import { Home } from "lucide-react";
4
+
5
+
export function PrefixAndSuffix() {
6
+
return (
7
+
<Flex gap="4">
8
+
<TextField label="Label" prefix={<Home />} />
9
+
<TextField label="Label" suffix={<Home />} />
10
+
</Flex>
11
+
);
12
+
}
+12
apps/docs/src/examples/text-field/sizes.tsx
+12
apps/docs/src/examples/text-field/sizes.tsx
···
1
+
import { TextField } from "@/components/text-field";
2
+
import { Flex } from "@/components/flex";
3
+
4
+
export function TextFieldSizes() {
5
+
return (
6
+
<Flex direction="column" gap="4">
7
+
<TextField label="Small" placeholder="Small size" size="sm" />
8
+
<TextField label="Medium" placeholder="Medium size" size="md" />
9
+
<TextField label="Large" placeholder="Large size" size="lg" />
10
+
</Flex>
11
+
);
12
+
}
+24
apps/docs/src/examples/text-field/variants.tsx
+24
apps/docs/src/examples/text-field/variants.tsx
···
1
+
import { TextField } from "@/components/text-field";
2
+
import { Flex } from "@/components/flex";
3
+
4
+
export function TextFieldVariants() {
5
+
return (
6
+
<Flex gap="4">
7
+
<TextField
8
+
label="Default"
9
+
placeholder="Default variant"
10
+
variant="primary"
11
+
/>
12
+
<TextField
13
+
label="Filled"
14
+
placeholder="Filled variant"
15
+
variant="secondary"
16
+
/>
17
+
<TextField
18
+
label="Filled"
19
+
placeholder="Filled variant"
20
+
variant="tertiary"
21
+
/>
22
+
</Flex>
23
+
);
24
+
}
+5
apps/docs/src/examples/time-field/basic.tsx
+5
apps/docs/src/examples/time-field/basic.tsx
+5
apps/docs/src/examples/time-field/description.tsx
+5
apps/docs/src/examples/time-field/description.tsx
+12
apps/docs/src/examples/time-field/prefix-and-suffix.tsx
+12
apps/docs/src/examples/time-field/prefix-and-suffix.tsx
···
1
+
import { Flex } from "@/components/flex";
2
+
import { TimeField } from "@/components/time-field";
3
+
import { ClockIcon } from "lucide-react";
4
+
5
+
export function PrefixAndSuffix() {
6
+
return (
7
+
<Flex gap="4">
8
+
<TimeField label="Time" prefix={<ClockIcon />} />
9
+
<TimeField label="Time" suffix={<ClockIcon />} />
10
+
</Flex>
11
+
);
12
+
}
+12
apps/docs/src/examples/time-field/sizes.tsx
+12
apps/docs/src/examples/time-field/sizes.tsx
···
1
+
import { TimeField } from "@/components/time-field";
2
+
import { Flex } from "@/components/flex";
3
+
4
+
export function Sizes() {
5
+
return (
6
+
<Flex gap="4">
7
+
<TimeField label="Small" size="sm" />
8
+
<TimeField label="Medium" size="md" />
9
+
<TimeField label="Large" size="lg" />
10
+
</Flex>
11
+
);
12
+
}
+12
apps/docs/src/examples/time-field/variants.tsx
+12
apps/docs/src/examples/time-field/variants.tsx
···
1
+
import { TimeField } from "@/components/time-field";
2
+
import { Flex } from "@/components/flex";
3
+
4
+
export function Variants() {
5
+
return (
6
+
<Flex gap="4">
7
+
<TimeField label="Primary" variant="primary" />
8
+
<TimeField label="Secondary" variant="secondary" />
9
+
<TimeField label="Tertiary" variant="tertiary" />
10
+
</Flex>
11
+
);
12
+
}
+10
apps/docs/src/examples/tooltip/basic.tsx
+10
apps/docs/src/examples/tooltip/basic.tsx
+22
apps/docs/src/examples/tooltip/placements.tsx
+22
apps/docs/src/examples/tooltip/placements.tsx
···
1
+
import { Tooltip } from "@/components/tooltip";
2
+
import { Button } from "@/components/button";
3
+
import { Flex } from "@/components/flex";
4
+
5
+
export function TooltipPlacements() {
6
+
return (
7
+
<Flex gap="4" wrap>
8
+
<Tooltip text="Top tooltip" placement="top">
9
+
<Button>Top</Button>
10
+
</Tooltip>
11
+
<Tooltip text="Bottom tooltip" placement="bottom">
12
+
<Button>Bottom</Button>
13
+
</Tooltip>
14
+
<Tooltip text="Left tooltip" placement="left">
15
+
<Button>Left</Button>
16
+
</Tooltip>
17
+
<Tooltip text="Right tooltip" placement="right">
18
+
<Button>Right</Button>
19
+
</Tooltip>
20
+
</Flex>
21
+
);
22
+
}
+36
apps/docs/src/examples/tree/basic.tsx
+36
apps/docs/src/examples/tree/basic.tsx
···
1
+
import { Tree, TreeItem } from "@/components/tree";
2
+
import { Collection } from "react-aria-components";
3
+
4
+
const treeData = [
5
+
{
6
+
id: "1",
7
+
name: "Folder 1",
8
+
children: [
9
+
{ id: "1-1", name: "File 1-1" },
10
+
{ id: "1-2", name: "File 1-2" },
11
+
],
12
+
},
13
+
{
14
+
id: "2",
15
+
name: "Folder 2",
16
+
children: [{ id: "2-1", name: "File 2-1" }],
17
+
},
18
+
];
19
+
20
+
export function Basic() {
21
+
return (
22
+
<Tree items={treeData}>
23
+
{function renderTreeItem(item) {
24
+
return (
25
+
<TreeItem key={item.id} id={item.id} title={item.name}>
26
+
{item.children
27
+
? item.children.map((child) => (
28
+
<TreeItem key={child.id} id={child.id} title={child.name} />
29
+
))
30
+
: null}
31
+
</TreeItem>
32
+
);
33
+
}}
34
+
</Tree>
35
+
);
36
+
}
+19
apps/docs/src/examples/typography/headings.tsx
+19
apps/docs/src/examples/typography/headings.tsx
···
1
+
import {
2
+
Heading1,
3
+
Heading2,
4
+
Heading3,
5
+
Heading4,
6
+
Heading5,
7
+
} from "@/components/typography";
8
+
9
+
export function Headings() {
10
+
return (
11
+
<div>
12
+
<Heading1>Heading 1</Heading1>
13
+
<Heading2>Heading 2</Heading2>
14
+
<Heading3>Heading 3</Heading3>
15
+
<Heading4>Heading 4</Heading4>
16
+
<Heading5>Heading 5</Heading5>
17
+
</div>
18
+
);
19
+
}
+31
apps/docs/src/examples/typography/lists.tsx
+31
apps/docs/src/examples/typography/lists.tsx
···
1
+
import {
2
+
UnorderedList,
3
+
OrderedList,
4
+
ListItem,
5
+
Blockquote,
6
+
InlineCode,
7
+
} from "@/components/typography";
8
+
9
+
export function Lists() {
10
+
return (
11
+
<div>
12
+
<UnorderedList>
13
+
<ListItem>First item</ListItem>
14
+
<ListItem>Second item</ListItem>
15
+
<ListItem>Third item</ListItem>
16
+
</UnorderedList>
17
+
18
+
<OrderedList>
19
+
<ListItem>First step</ListItem>
20
+
<ListItem>Second step</ListItem>
21
+
<ListItem>Third step</ListItem>
22
+
</OrderedList>
23
+
24
+
<Blockquote>This is a blockquote example.</Blockquote>
25
+
26
+
<p>
27
+
This text contains <InlineCode>inline code</InlineCode>.
28
+
</p>
29
+
</div>
30
+
);
31
+
}
+12
apps/docs/src/examples/typography/text.tsx
+12
apps/docs/src/examples/typography/text.tsx
···
1
+
import { Body, SmallBody, LabelText, SubLabel } from "@/components/typography";
2
+
3
+
export function Text() {
4
+
return (
5
+
<div>
6
+
<Body>This is a body text paragraph.</Body>
7
+
<SmallBody>This is small body text.</SmallBody>
8
+
<LabelText>This is label text</LabelText>
9
+
<SubLabel>This is sub label text</SubLabel>
10
+
</div>
11
+
);
12
+
}
+14
apps/docs/src/examples/typography/variants.tsx
+14
apps/docs/src/examples/typography/variants.tsx
···
1
+
import { Body, SmallBody, SubLabel } from "@/components/typography";
2
+
3
+
export function TextVariants() {
4
+
return (
5
+
<div>
6
+
<Body variant="default">Default body text</Body>
7
+
<Body variant="secondary">Secondary body text</Body>
8
+
<SmallBody variant="default">Default small body text</SmallBody>
9
+
<SmallBody variant="secondary">Secondary small body text</SmallBody>
10
+
<SubLabel variant="default">Default sub label</SubLabel>
11
+
<SubLabel variant="secondary">Secondary sub label</SubLabel>
12
+
</div>
13
+
);
14
+
}
+107
apps/docs/src/lib/PropDocs.tsx
+107
apps/docs/src/lib/PropDocs.tsx
···
1
+
import { propDocs } from "virtual:propDocs";
2
+
3
+
import {
4
+
Table,
5
+
TableBody,
6
+
TableCell,
7
+
TableColumn,
8
+
TableHeader,
9
+
TableRow,
10
+
} from "@/components/table";
11
+
import { ComponentDoc } from "react-docgen-typescript";
12
+
import { SmallBody } from "@/components/typography";
13
+
import { Card, CardBody } from "@/components/card";
14
+
import { ToggleButtonGroup } from "@/components/toggle-button-group";
15
+
import { ToggleButton } from "@/components/toggle-button";
16
+
import { Flex } from "@/components/flex";
17
+
import { Activity, Fragment, useState } from "react";
18
+
import { Grid } from "lucide-react";
19
+
import { Text } from "@/components/typography/text";
20
+
import * as stylex from "@stylexjs/stylex";
21
+
22
+
const styles = stylex.create({
23
+
props: {
24
+
overflow: "auto",
25
+
},
26
+
});
27
+
28
+
function PropTable({ doc }: { doc: ComponentDoc }) {
29
+
return (
30
+
<Card size="sm" style={styles.props}>
31
+
<CardBody>
32
+
<Table>
33
+
<TableHeader>
34
+
<TableColumn isRowHeader minWidth={300}>
35
+
Name
36
+
</TableColumn>
37
+
<TableColumn>Type</TableColumn>
38
+
<TableColumn>Default</TableColumn>
39
+
<TableColumn>Description</TableColumn>
40
+
</TableHeader>
41
+
<TableBody></TableBody>
42
+
<TableBody>
43
+
{Object.values(doc.props).map((prop) => (
44
+
<TableRow key={prop.name}>
45
+
<TableCell>{prop.name}</TableCell>
46
+
<TableCell>{prop.type.name}</TableCell>
47
+
<TableCell>{prop.defaultValue?.value}</TableCell>
48
+
<TableCell>
49
+
<SmallBody>{prop.description}</SmallBody>
50
+
</TableCell>
51
+
</TableRow>
52
+
))}
53
+
</TableBody>
54
+
</Table>
55
+
</CardBody>
56
+
</Card>
57
+
);
58
+
}
59
+
60
+
export function PropDocs({ components }: { components: string[] }) {
61
+
const docs = propDocs
62
+
.filter((doc) => components.includes(doc.displayName))
63
+
.sort((a, b) => {
64
+
const aIndex = components.indexOf(a.displayName);
65
+
const bIndex = components.indexOf(b.displayName);
66
+
return aIndex - bIndex;
67
+
});
68
+
const [selected, setSelected] = useState(docs[0].displayName);
69
+
70
+
return (
71
+
<Flex direction="column" gap="6">
72
+
{docs.length > 1 && (
73
+
<ToggleButtonGroup
74
+
variant="grouped"
75
+
selectionMode="single"
76
+
onSelectionChange={(keys) =>
77
+
setSelected(keys.values().next().value as string)
78
+
}
79
+
>
80
+
<ToggleButton variant="outline" id="all">
81
+
<Grid />
82
+
</ToggleButton>
83
+
{docs.map((doc) => (
84
+
<ToggleButton
85
+
key={doc.displayName}
86
+
id={doc.displayName}
87
+
variant="outline"
88
+
>
89
+
{doc.displayName}
90
+
</ToggleButton>
91
+
))}
92
+
</ToggleButtonGroup>
93
+
)}
94
+
{docs.map(
95
+
(doc) =>
96
+
(selected === doc.displayName || selected === "all") && (
97
+
<Flex key={doc.displayName} direction="column" gap="4">
98
+
{selected === "all" && (
99
+
<Text weight="semibold">{doc.displayName}</Text>
100
+
)}
101
+
<PropTable doc={doc} />
102
+
</Flex>
103
+
),
104
+
)}
105
+
</Flex>
106
+
);
107
+
}
+40
-3
apps/docs/src/routes/docs.tsx
+40
-3
apps/docs/src/routes/docs.tsx
···
1
1
import { Grid } from "@/components/grid";
2
2
import { Tree, TreeItem } from "@/components/tree";
3
-
import { createFileRoute, LinkProps, Outlet } from "@tanstack/react-router";
3
+
import {
4
+
createFileRoute,
5
+
LinkProps,
6
+
Outlet,
7
+
useLocation,
8
+
useMatches,
9
+
} from "@tanstack/react-router";
4
10
import { Collection } from "react-aria-components";
5
11
import { createLink } from "@tanstack/react-router";
6
12
import * as stylex from "@stylexjs/stylex";
7
13
import { allDocs } from "content-collections";
14
+
import { spacing } from "../components/theme/spacing.stylex";
8
15
9
16
const TreeItemLink = createLink(TreeItem);
10
17
11
18
const styles = stylex.create({
19
+
aside: {
20
+
position: "sticky",
21
+
top: 0,
22
+
height: "100vh",
23
+
overflow: "auto",
24
+
paddingRight: spacing["4"],
25
+
paddingLeft: spacing["4"],
26
+
paddingTop: spacing["4"],
27
+
paddingBottom: spacing["4"],
28
+
},
12
29
main: {
13
30
maxWidth: "80ch",
31
+
paddingTop: spacing["10"],
32
+
paddingBottom: spacing["20"],
14
33
},
15
34
});
16
35
···
57
76
},
58
77
];
59
78
79
+
const flatItems = sidebarItems
80
+
.flatMap((item) => ("items" in item ? item.items : [item]))
81
+
.filter((item): item is SidebarItem => item !== undefined);
82
+
60
83
function Sidebar() {
84
+
const location = useLocation();
85
+
const matches = useMatches();
86
+
const match = matches.find((match) => match.pathname === location.pathname);
87
+
const item = flatItems.find(
88
+
(item) =>
89
+
match?.params &&
90
+
"_splat" in match.params &&
91
+
match.params._splat &&
92
+
item.id === match.params._splat.replace("/docs/", ""),
93
+
);
94
+
61
95
return (
62
96
<Tree
63
97
items={sidebarItems}
98
+
selectionMode="single"
99
+
selectionBehavior="replace"
64
100
defaultExpandedKeys={["foundations", "components"]}
101
+
selectedKeys={item ? [item.id] : []}
65
102
>
66
103
{function renderTreeItem(item) {
67
104
return (
···
80
117
81
118
function RouteComponent() {
82
119
return (
83
-
<Grid columns="200px 1fr">
84
-
<aside>
120
+
<Grid columns="240px 1fr" columnGap="4">
121
+
<aside {...stylex.props(styles.aside)}>
85
122
<Sidebar />
86
123
</aside>
87
124
<main {...stylex.props(styles.main)}>
+5
apps/docs/src/types/virtual.d.ts
+5
apps/docs/src/types/virtual.d.ts
+55
apps/docs/vite.config.ts
+55
apps/docs/vite.config.ts
···
14
14
import MagicString from "magic-string";
15
15
import { codeToHtml } from "shiki";
16
16
import rehypeShiki, { RehypeShikiOptions } from "@shikijs/rehype";
17
+
import docgen from "react-docgen-typescript";
17
18
18
19
/** Generate a virtual model that imports all the content files. */
19
20
function content() {
···
154
155
} as PluginOption;
155
156
}
156
157
158
+
function propDocs() {
159
+
const virtualModuleId = "virtual:propDocs";
160
+
const resolvedVirtualModuleId = "\0" + virtualModuleId;
161
+
162
+
const parser = docgen.withDefaultConfig({
163
+
propFilter: (prop) => {
164
+
if (
165
+
prop.parent?.fileName.includes("@types/react") &&
166
+
prop.name !== "children"
167
+
) {
168
+
return false;
169
+
}
170
+
171
+
if (prop.parent?.fileName.endsWith("/dom.d.ts")) {
172
+
return false;
173
+
}
174
+
175
+
return true;
176
+
},
177
+
});
178
+
const docs: docgen.ComponentDoc[] = [];
179
+
180
+
return {
181
+
name: "my-plugin", // required, will show up in warnings and errors
182
+
183
+
buildStart: async () => {
184
+
const files = await glob(
185
+
path.join(process.cwd(), "src/components/**/*.tsx"),
186
+
);
187
+
188
+
for (const file of files) {
189
+
const doc = parser.parse(file);
190
+
docs.push(...doc);
191
+
}
192
+
},
193
+
194
+
resolveId(id) {
195
+
if (id === virtualModuleId) {
196
+
return resolvedVirtualModuleId;
197
+
}
198
+
},
199
+
200
+
load(id) {
201
+
if (id === resolvedVirtualModuleId) {
202
+
const code = dedent`
203
+
export const propDocs = ${JSON.stringify(docs).replaceAll("\\n", "\\\\n")};
204
+
`;
205
+
return code;
206
+
}
207
+
},
208
+
} as PluginOption;
209
+
}
210
+
157
211
const config = defineConfig({
158
212
plugins: [
159
213
shiki(),
···
181
235
content(),
182
236
examples(),
183
237
annotateExamples(),
238
+
propDocs(),
184
239
],
185
240
});
186
241
+2
packages/hip-ui/src/cli/install.tsx
+2
packages/hip-ui/src/cli/install.tsx
···
38
38
import { selectConfig } from "../components/select/select-config.js";
39
39
import { separatorConfig } from "../components/separator/separator-config.js";
40
40
import { switchConfig } from "../components/switch/switch-config.js";
41
+
import { tableConfig } from "../components/table/table-config.js";
41
42
import { textAreaConfig } from "../components/text-area/text-area-config.js";
42
43
import { textFieldConfig } from "../components/text-field/text-field-config.js";
43
44
import { timeFieldConfig } from "../components/time-field/time-field-config.js";
···
90
91
aspectRatioConfig,
91
92
colorSwatchConfig,
92
93
fileDropZoneConfig,
94
+
tableConfig,
93
95
];
94
96
95
97
function StringSetting({
+6
packages/hip-ui/src/components/alert-dialog/index.tsx
+6
packages/hip-ui/src/components/alert-dialog/index.tsx
+5
packages/hip-ui/src/components/avatar/index.tsx
+5
packages/hip-ui/src/components/avatar/index.tsx
···
75
75
React.ComponentProps<"div">,
76
76
"style" | "className" | "children"
77
77
> {
78
+
/** The stylex styles of the avatar. */
78
79
style?: stylex.StyleXStyles | stylex.StyleXStyles[];
80
+
/** The source of the image. */
79
81
src?: string;
82
+
/** The alt text of the image. */
80
83
alt?: string;
84
+
/** The fallback content of the avatar. */
81
85
fallback: React.ReactNode;
86
+
/** The size of the avatar. */
82
87
size?: Size | "xl";
83
88
}
84
89
+14
-12
packages/hip-ui/src/components/card/index.tsx
+14
-12
packages/hip-ui/src/components/card/index.tsx
···
94
94
const size = sizeProp || use(SizeContext);
95
95
96
96
return (
97
-
<div
98
-
{...props}
99
-
data-card-size={size}
100
-
{...stylex.props(
101
-
styles.card,
102
-
ui.bgSubtle,
103
-
ui.border,
104
-
ui.text,
105
-
style,
106
-
styles[`${size}Card`],
107
-
)}
108
-
/>
97
+
<SizeContext value={size}>
98
+
<div
99
+
{...props}
100
+
data-card-size={size}
101
+
{...stylex.props(
102
+
styles.card,
103
+
ui.bgSubtle,
104
+
ui.border,
105
+
ui.text,
106
+
style,
107
+
styles[`${size}Card`],
108
+
)}
109
+
/>
110
+
</SizeContext>
109
111
);
110
112
};
111
113
+197
packages/hip-ui/src/components/table/index.tsx
+197
packages/hip-ui/src/components/table/index.tsx
···
1
+
import * as stylex from "@stylexjs/stylex";
2
+
import { ArrowDown, ArrowUp, GripVertical } from "lucide-react";
3
+
import { use } from "react";
4
+
import {
5
+
TableBodyProps as AriaTableBodyProps,
6
+
TableBody as AriaTableBody,
7
+
TableProps as AriaTableProps,
8
+
Table as AriaTable,
9
+
TableHeader as AriaTableHeader,
10
+
TableHeaderProps as AriaTableHeaderProps,
11
+
useTableOptions,
12
+
Column as AriaColumn,
13
+
Collection,
14
+
Row as AriaRow,
15
+
RowProps as AriaRowProps,
16
+
Cell as AriaCell,
17
+
ColumnProps as AriaColumnProps,
18
+
CellProps as AriaCellProps,
19
+
} from "react-aria-components";
20
+
21
+
import { Checkbox } from "../checkbox";
22
+
import { SizeContext } from "../context";
23
+
import { IconButton } from "../icon-button";
24
+
import { uiColor } from "../theme/semantic-color.stylex";
25
+
import { spacing } from "../theme/spacing.stylex";
26
+
import { Size } from "../theme/types";
27
+
28
+
const styles = stylex.create({
29
+
table: {},
30
+
tableHeader: {},
31
+
row: {},
32
+
column: {
33
+
borderBottomColor: uiColor.border2,
34
+
borderBottomStyle: "solid",
35
+
borderBottomWidth: 1,
36
+
},
37
+
tableBody: {},
38
+
cell: {
39
+
height: {
40
+
default: spacing["8"],
41
+
":is([data-table-size=md] *)": spacing["10"],
42
+
":is([data-table-size=lg] *)": spacing["12"],
43
+
},
44
+
paddingBottom: {
45
+
default: spacing["1"],
46
+
":is([data-table-size=md] *)": spacing["2"],
47
+
":is([data-table-size=lg] *)": spacing["3"],
48
+
},
49
+
paddingLeft: {
50
+
":not(:first-child)": spacing["2"],
51
+
":is([data-table-size=md] *:not(:first-child))": spacing["3"],
52
+
":is([data-table-size=lg] *:not(:first-child))": spacing["4"],
53
+
},
54
+
paddingRight: {
55
+
":not(:last-child)": spacing["2"],
56
+
":is([data-table-size=md] *:not(:last-child))": spacing["3"],
57
+
":is([data-table-size=lg] *:not(:last-child))": spacing["4"],
58
+
},
59
+
paddingTop: {
60
+
default: spacing["1"],
61
+
":is([data-table-size=md] *)": spacing["2"],
62
+
":is([data-table-size=lg] *)": spacing["3"],
63
+
},
64
+
textAlign: "left",
65
+
},
66
+
});
67
+
68
+
export interface TableProps
69
+
extends Omit<AriaTableProps, "className" | "style"> {
70
+
style?: stylex.StyleXStyles | stylex.StyleXStyles[];
71
+
size?: Size;
72
+
}
73
+
74
+
export const Table = ({ style, size: sizeProp, ...props }: TableProps) => {
75
+
const size = sizeProp || use(SizeContext);
76
+
77
+
return (
78
+
<SizeContext value={size}>
79
+
<AriaTable
80
+
data-table-size={size}
81
+
{...stylex.props(styles.table, style)}
82
+
{...props}
83
+
/>
84
+
</SizeContext>
85
+
);
86
+
};
87
+
88
+
export interface TableColumnProps
89
+
extends Omit<AriaColumnProps, "className" | "style" | "children"> {
90
+
style?: stylex.StyleXStyles | stylex.StyleXStyles[];
91
+
children?: React.ReactNode;
92
+
}
93
+
94
+
export function TableColumn({ style, children, ...props }: TableColumnProps) {
95
+
return (
96
+
<AriaColumn {...props} {...stylex.props(styles.column, styles.cell, style)}>
97
+
{({ allowsSorting, sortDirection }) => (
98
+
<div className="column-header">
99
+
{children}
100
+
{allowsSorting && (
101
+
<span aria-hidden="true" className="sort-indicator">
102
+
{sortDirection === "ascending" ? (
103
+
<ArrowUp size={14} />
104
+
) : (
105
+
<ArrowDown size={14} />
106
+
)}
107
+
</span>
108
+
)}
109
+
</div>
110
+
)}
111
+
</AriaColumn>
112
+
);
113
+
}
114
+
115
+
export interface TableHeaderProps<T extends object>
116
+
extends Omit<AriaTableHeaderProps<T>, "className" | "style"> {
117
+
style?: stylex.StyleXStyles | stylex.StyleXStyles[];
118
+
}
119
+
120
+
export function TableHeader<T extends object>({
121
+
children,
122
+
style,
123
+
...otherProps
124
+
}: TableHeaderProps<T>) {
125
+
const { selectionBehavior, selectionMode, allowsDragging } =
126
+
useTableOptions();
127
+
128
+
return (
129
+
<AriaTableHeader
130
+
{...stylex.props(styles.tableHeader, style)}
131
+
{...otherProps}
132
+
>
133
+
{/* Add extra columns for drag and drop and selection. */}
134
+
{allowsDragging && <TableColumn />}
135
+
{selectionBehavior === "toggle" && (
136
+
<TableColumn>
137
+
{selectionMode === "multiple" && <Checkbox slot="selection" />}
138
+
</TableColumn>
139
+
)}
140
+
<Collection items={otherProps.columns}>{children}</Collection>
141
+
</AriaTableHeader>
142
+
);
143
+
}
144
+
145
+
export interface TableRowProps<T extends object>
146
+
extends Omit<AriaRowProps<T>, "className" | "style"> {
147
+
style?: stylex.StyleXStyles | stylex.StyleXStyles[];
148
+
}
149
+
150
+
export function TableRow<T extends object>({
151
+
id,
152
+
columns,
153
+
children,
154
+
style,
155
+
...props
156
+
}: TableRowProps<T>) {
157
+
const { selectionBehavior, allowsDragging } = useTableOptions();
158
+
159
+
return (
160
+
<AriaRow id={id} {...stylex.props(styles.row, style)} {...props}>
161
+
{allowsDragging && (
162
+
<TableCell>
163
+
<IconButton slot="drag" label="Drag" variant="tertiary">
164
+
<GripVertical size={16} />
165
+
</IconButton>
166
+
</TableCell>
167
+
)}
168
+
{selectionBehavior === "toggle" && (
169
+
<TableCell>
170
+
<Checkbox slot="selection" />
171
+
</TableCell>
172
+
)}
173
+
<Collection items={columns}>{children}</Collection>
174
+
</AriaRow>
175
+
);
176
+
}
177
+
178
+
export interface TableBodyProps<T extends object>
179
+
extends Omit<AriaTableBodyProps<T>, "className" | "style"> {
180
+
style?: stylex.StyleXStyles | stylex.StyleXStyles[];
181
+
}
182
+
183
+
export function TableBody<T extends object>({
184
+
style,
185
+
...prop
186
+
}: TableBodyProps<T>) {
187
+
return <AriaTableBody {...stylex.props(styles.tableBody, style)} {...prop} />;
188
+
}
189
+
190
+
export interface TableCellProps
191
+
extends Omit<AriaCellProps, "className" | "style"> {
192
+
style?: stylex.StyleXStyles | stylex.StyleXStyles[];
193
+
}
194
+
195
+
export function TableCell({ style, ...props }: TableCellProps) {
196
+
return <AriaCell {...stylex.props(styles.cell, style)} {...props} />;
197
+
}
+6
packages/hip-ui/src/components/table/table-config.ts
+6
packages/hip-ui/src/components/table/table-config.ts
+12
pnpm-lock.yaml
+12
pnpm-lock.yaml
···
104
104
react-aria-components:
105
105
specifier: ^1.13.0
106
106
version: 1.13.0(react-dom@19.2.0(react@19.2.0))(react@19.2.0)
107
+
react-docgen-typescript:
108
+
specifier: ^2.4.0
109
+
version: 2.4.0(typescript@5.9.2)
107
110
react-dom:
108
111
specifier: ^19.0.0
109
112
version: 19.2.0(react@19.2.0)
···
5243
5246
peerDependencies:
5244
5247
react: ^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0-rc.1
5245
5248
react-dom: ^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0-rc.1
5249
+
5250
+
react-docgen-typescript@2.4.0:
5251
+
resolution: {integrity: sha512-ZtAp5XTO5HRzQctjPU0ybY0RRCQO19X/8fxn3w7y2VVTUbGHDKULPTL4ky3vB05euSgG5NpALhEhDPvQ56wvXg==}
5252
+
peerDependencies:
5253
+
typescript: '>= 4.3.x'
5246
5254
5247
5255
react-dom@19.2.0:
5248
5256
resolution: {integrity: sha512-UlbRu4cAiGaIewkPyiRGJk0imDN2T3JjieT6spoL2UeSf5od4n5LB/mQ4ejmxhCFT1tYe8IvaFulzynWovsEFQ==}
···
12780
12788
'@react-types/shared': 3.32.1(react@19.2.0)
12781
12789
react: 19.2.0
12782
12790
react-dom: 19.2.0(react@19.2.0)
12791
+
12792
+
react-docgen-typescript@2.4.0(typescript@5.9.2):
12793
+
dependencies:
12794
+
typescript: 5.9.2
12783
12795
12784
12796
react-dom@19.2.0(react@19.2.0):
12785
12797
dependencies: