A design system in a box.
hip-ui.tngl.io/docs/introduction
Empty state
+698
-29
+1
-1
.cursor/rules/hip-component.mdc
+1
-1
.cursor/rules/hip-component.mdc
···
8
8
9
9
To create a new hip component follow these steps:
10
10
11
-
1. **Research phase**: First ask if there is documentation for a headless component to look at (e.g., React Aria Components docs)
11
+
1. **Research phase**: First ask if there is documentation for a headless component to look at (e.g., React Aria Components docs) Check https://component.gallery/ for similar implementation
12
12
2. **Component implementation**: Create the component in `packages/hip-ui/src/components/[component-name]/index.tsx`
13
13
3. **Config creation**: Create a config file `[component-name]-config.ts` in the same directory
14
14
4. **Register config**: Import and add the config to `packages/hip-ui/src/cli/install.tsx` in the `COMPONENT_CONFIGS` array
+1
-1
README.md
+1
-1
README.md
+1
-1
apps/docs/package.json
+1
-1
apps/docs/package.json
+204
apps/docs/src/components/empty-state/index.tsx
+204
apps/docs/src/components/empty-state/index.tsx
···
1
+
"use client";
2
+
3
+
import * as stylex from "@stylexjs/stylex";
4
+
import { use } from "react";
5
+
6
+
import { SizeContext } from "../context";
7
+
import { ui } from "../theme/semantic-color.stylex";
8
+
import { spacing } from "../theme/spacing.stylex";
9
+
import { Size, StyleXComponentProps } from "../theme/types";
10
+
import { fontFamily, fontSize, fontWeight } from "../theme/typography.stylex";
11
+
12
+
const styles = stylex.create({
13
+
emptyState: {
14
+
display: "grid",
15
+
gridTemplateColumns: {
16
+
":is([data-empty-state-size=sm])": {
17
+
":has([data-empty-state-actions])": "min-content 1fr max-content",
18
+
default: "min-content 1fr",
19
+
},
20
+
},
21
+
gridTemplateAreas: {
22
+
":is([data-empty-state-size=md],[data-empty-state-size=lg])": {
23
+
default: `
24
+
"image"
25
+
"title"
26
+
"description"
27
+
`,
28
+
":has([data-empty-state-actions])": `
29
+
"image"
30
+
"title"
31
+
"description"
32
+
"actions"
33
+
`,
34
+
},
35
+
":is([data-empty-state-size=sm])": {
36
+
default: `
37
+
"image title"
38
+
"image description"
39
+
`,
40
+
":has([data-empty-state-actions])": `
41
+
"image title actions"
42
+
"image description actions"
43
+
`,
44
+
},
45
+
},
46
+
alignItems: "center",
47
+
justifyItems: {
48
+
":is([data-empty-state-size=md],[data-empty-state-size=lg])": "center",
49
+
":is([data-empty-state-size=sm])": "start",
50
+
},
51
+
fontFamily: fontFamily["sans"],
52
+
textAlign: "center",
53
+
columnGap: {
54
+
":is([data-empty-state-size=sm])": spacing["4"],
55
+
},
56
+
rowGap: {
57
+
":is([data-empty-state-size=lg])": spacing["6"],
58
+
":is([data-empty-state-size=md])": spacing["4"],
59
+
":is([data-empty-state-size=sm])": spacing["2"],
60
+
},
61
+
"--empty-state-image-size": {
62
+
":is([data-empty-state-size=lg])": spacing["20"],
63
+
":is([data-empty-state-size=md])": spacing["14"],
64
+
":is([data-empty-state-size=sm])": spacing["10"],
65
+
},
66
+
},
67
+
image: {
68
+
gridArea: "image",
69
+
width: "var(--empty-state-image-size)",
70
+
height: "var(--empty-state-image-size)",
71
+
objectFit: "contain",
72
+
display: "flex",
73
+
alignItems: "center",
74
+
justifyContent: "center",
75
+
},
76
+
title: {
77
+
gridArea: "title",
78
+
fontSize: {
79
+
":is([data-empty-state-size='lg'] *)": fontSize["2xl"],
80
+
":is([data-empty-state-size='md'] *)": fontSize["xl"],
81
+
":is([data-empty-state-size='sm'] *)": fontSize["lg"],
82
+
},
83
+
fontWeight: fontWeight["semibold"],
84
+
margin: 0,
85
+
},
86
+
description: {
87
+
gridArea: "description",
88
+
fontSize: fontSize["sm"],
89
+
fontWeight: fontWeight["normal"],
90
+
margin: 0,
91
+
maxWidth: {
92
+
":is([data-empty-state-size=lg])": "480px",
93
+
":is([data-empty-state-size=md])": "400px",
94
+
":is([data-empty-state-size=sm])": "320px",
95
+
},
96
+
},
97
+
actions: {
98
+
gridArea: "actions",
99
+
display: "flex",
100
+
flexDirection: "row",
101
+
gap: spacing["2"],
102
+
alignItems: "center",
103
+
justifyContent: "center",
104
+
flexWrap: "wrap",
105
+
106
+
paddingLeft: {
107
+
":is([data-empty-state-size=sm] *)": spacing["4"],
108
+
},
109
+
},
110
+
});
111
+
112
+
export interface EmptyStateProps
113
+
extends StyleXComponentProps<React.ComponentProps<"div">> {
114
+
/**
115
+
* The size of the empty state component.
116
+
* @default "md"
117
+
*/
118
+
size?: Size;
119
+
}
120
+
121
+
export const EmptyState = ({
122
+
style,
123
+
size: sizeProp,
124
+
...props
125
+
}: EmptyStateProps) => {
126
+
const size = sizeProp || use(SizeContext);
127
+
128
+
return (
129
+
<div
130
+
{...props}
131
+
data-empty-state-size={size}
132
+
{...stylex.props(styles.emptyState, style)}
133
+
/>
134
+
);
135
+
};
136
+
137
+
export interface EmptyStateImageProps
138
+
extends StyleXComponentProps<
139
+
Omit<React.ComponentProps<"div">, "src" | "alt">
140
+
> {
141
+
/**
142
+
* The source URL of the image.
143
+
* When provided, renders an img element instead of a div.
144
+
*/
145
+
src?: string;
146
+
/**
147
+
* The alt text for the image.
148
+
* Required when src is provided.
149
+
*/
150
+
alt?: string;
151
+
}
152
+
153
+
export const EmptyStateImage = ({
154
+
style,
155
+
src,
156
+
alt,
157
+
children,
158
+
...props
159
+
}: EmptyStateImageProps) => {
160
+
if (src) {
161
+
return <img src={src} alt={alt} {...stylex.props(styles.image, style)} />;
162
+
}
163
+
164
+
return (
165
+
<div {...props} {...stylex.props(styles.image, style)}>
166
+
{children}
167
+
</div>
168
+
);
169
+
};
170
+
171
+
export interface EmptyStateTitleProps
172
+
extends StyleXComponentProps<React.ComponentProps<"h2">> {}
173
+
174
+
export const EmptyStateTitle = ({ style, ...props }: EmptyStateTitleProps) => {
175
+
return <h2 {...props} {...stylex.props(styles.title, ui.text, style)} />;
176
+
};
177
+
178
+
export interface EmptyStateDescriptionProps
179
+
extends StyleXComponentProps<React.ComponentProps<"p">> {}
180
+
181
+
export const EmptyStateDescription = ({
182
+
style,
183
+
...props
184
+
}: EmptyStateDescriptionProps) => {
185
+
return (
186
+
<p {...props} {...stylex.props(styles.description, ui.textDim, style)} />
187
+
);
188
+
};
189
+
190
+
export interface EmptyStateActionsProps
191
+
extends StyleXComponentProps<React.ComponentProps<"div">> {}
192
+
193
+
export const EmptyStateActions = ({
194
+
style,
195
+
...props
196
+
}: EmptyStateActionsProps) => {
197
+
return (
198
+
<div
199
+
{...props}
200
+
data-empty-state-actions
201
+
{...stylex.props(styles.actions, style)}
202
+
/>
203
+
);
204
+
};
+47
apps/docs/src/docs/components/content/empty-state.mdx
+47
apps/docs/src/docs/components/content/empty-state.mdx
···
1
+
---
2
+
title: Empty State
3
+
description: A component for displaying empty states with image, title, description, and actions.
4
+
---
5
+
6
+
import { PropDocs } from '../../../lib/PropDocs'
7
+
import { Example } from '../../../lib/Example'
8
+
import { Basic } from '../../../examples/empty-state/basic'
9
+
import { WithActions } from '../../../examples/empty-state/with-actions'
10
+
import { Sizes } from '../../../examples/empty-state/sizes'
11
+
12
+
<Example src={Basic} />
13
+
14
+
## Installation
15
+
16
+
Run the following command to add the empty-state component to your project.
17
+
18
+
```bash
19
+
pnpm hip install empty-state
20
+
```
21
+
22
+
## Props
23
+
24
+
This is a custom component built for displaying empty states.
25
+
26
+
<PropDocs components={["EmptyState", "EmptyStateImage", "EmptyStateTitle", "EmptyStateDescription", "EmptyStateActions"]} />
27
+
28
+
## Features
29
+
30
+
### With Actions
31
+
32
+
Empty states can include action buttons to guide users.
33
+
34
+
<Example src={WithActions} />
35
+
36
+
### Sizes
37
+
38
+
The empty state supports three different sizes that affect spacing and image size.
39
+
40
+
<Example src={Sizes} />
41
+
42
+
## Related Components
43
+
44
+
- [Card](/docs/components/card) - For grouping related content
45
+
- [Button](/docs/components/button) - For empty state actions
46
+
- [Text](/docs/components/text) - For custom text styling
47
+
+1
-1
apps/docs/src/examples/editable-text/basic.tsx
+1
-1
apps/docs/src/examples/editable-text/basic.tsx
+49
apps/docs/src/examples/empty-state/basic.tsx
+49
apps/docs/src/examples/empty-state/basic.tsx
···
1
+
import {
2
+
EmptyState,
3
+
EmptyStateImage,
4
+
EmptyStateTitle,
5
+
EmptyStateDescription,
6
+
} from "@/components/empty-state";
7
+
import { spacing } from "../../components/theme/spacing.stylex";
8
+
import * as stylex from "@stylexjs/stylex";
9
+
10
+
const styles = stylex.create({
11
+
wrapper: {
12
+
padding: spacing["16"],
13
+
},
14
+
});
15
+
16
+
export function Basic() {
17
+
return (
18
+
<EmptyState style={styles.wrapper}>
19
+
<EmptyStateImage>
20
+
<svg
21
+
width="120"
22
+
height="120"
23
+
viewBox="0 0 120 120"
24
+
fill="none"
25
+
xmlns="http://www.w3.org/2000/svg"
26
+
>
27
+
<circle
28
+
cx="60"
29
+
cy="60"
30
+
r="50"
31
+
stroke="currentColor"
32
+
strokeWidth="2"
33
+
/>
34
+
<path
35
+
d="M40 60L55 75L80 45"
36
+
stroke="currentColor"
37
+
strokeWidth="2"
38
+
strokeLinecap="round"
39
+
strokeLinejoin="round"
40
+
/>
41
+
</svg>
42
+
</EmptyStateImage>
43
+
<EmptyStateTitle>No items found</EmptyStateTitle>
44
+
<EmptyStateDescription>
45
+
Get started by creating a new item.
46
+
</EmptyStateDescription>
47
+
</EmptyState>
48
+
);
49
+
}
+86
apps/docs/src/examples/empty-state/sizes.tsx
+86
apps/docs/src/examples/empty-state/sizes.tsx
···
1
+
import {
2
+
EmptyState,
3
+
EmptyStateImage,
4
+
EmptyStateTitle,
5
+
EmptyStateDescription,
6
+
EmptyStateActions,
7
+
} from "@/components/empty-state";
8
+
import { Button } from "@/components/button";
9
+
import { Flex } from "@/components/flex";
10
+
import * as stylex from "@stylexjs/stylex";
11
+
import { spacing } from "../../components/theme/spacing.stylex";
12
+
import { TriangleAlert } from "lucide-react";
13
+
14
+
const styles = stylex.create({
15
+
wrapper: {
16
+
padding: spacing["6"],
17
+
},
18
+
});
19
+
20
+
function CheckIllustration() {
21
+
return (
22
+
<svg
23
+
width="180"
24
+
height="180"
25
+
viewBox="0 0 120 120"
26
+
fill="none"
27
+
xmlns="http://www.w3.org/2000/svg"
28
+
>
29
+
<circle cx="60" cy="60" r="50" stroke="currentColor" strokeWidth="2" />
30
+
<path
31
+
d="M40 60L55 75L80 45"
32
+
stroke="currentColor"
33
+
strokeWidth="2"
34
+
strokeLinecap="round"
35
+
strokeLinejoin="round"
36
+
/>
37
+
</svg>
38
+
);
39
+
}
40
+
41
+
export function Sizes() {
42
+
return (
43
+
<Flex style={styles.wrapper} direction="column" align="center" gap="20">
44
+
<EmptyState size="sm">
45
+
<EmptyStateImage>
46
+
<TriangleAlert />
47
+
</EmptyStateImage>
48
+
<EmptyStateTitle>No items found</EmptyStateTitle>
49
+
<EmptyStateDescription>
50
+
Get started by creating a new item.
51
+
</EmptyStateDescription>
52
+
<EmptyStateActions>
53
+
<Button variant="outline">Create Item</Button>
54
+
</EmptyStateActions>
55
+
</EmptyState>
56
+
57
+
<EmptyState size="md">
58
+
<EmptyStateImage>
59
+
<CheckIllustration />
60
+
</EmptyStateImage>
61
+
<EmptyStateTitle>No items found</EmptyStateTitle>
62
+
<EmptyStateDescription>
63
+
Get started by creating a new item.
64
+
</EmptyStateDescription>
65
+
<EmptyStateActions>
66
+
<Button variant="outline">Create Item</Button>
67
+
</EmptyStateActions>
68
+
</EmptyState>
69
+
70
+
<EmptyState size="lg">
71
+
<EmptyStateImage>
72
+
<CheckIllustration />
73
+
</EmptyStateImage>
74
+
<EmptyStateTitle>No items found</EmptyStateTitle>
75
+
<EmptyStateDescription>
76
+
Get started by creating a new item.
77
+
</EmptyStateDescription>
78
+
<EmptyStateActions>
79
+
<Button variant="outline" size="lg">
80
+
Create Item
81
+
</Button>
82
+
</EmptyStateActions>
83
+
</EmptyState>
84
+
</Flex>
85
+
);
86
+
}
+59
apps/docs/src/examples/empty-state/with-actions.tsx
+59
apps/docs/src/examples/empty-state/with-actions.tsx
···
1
+
import { Button } from "@/components/button";
2
+
import {
3
+
EmptyState,
4
+
EmptyStateImage,
5
+
EmptyStateTitle,
6
+
EmptyStateDescription,
7
+
EmptyStateActions,
8
+
} from "@/components/empty-state";
9
+
import { Plus } from "lucide-react";
10
+
import * as stylex from "@stylexjs/stylex";
11
+
import { spacing } from "../../components/theme/spacing.stylex";
12
+
13
+
const styles = stylex.create({
14
+
wrapper: {
15
+
padding: spacing["16"],
16
+
},
17
+
});
18
+
19
+
export function WithActions() {
20
+
return (
21
+
<EmptyState style={styles.wrapper}>
22
+
<EmptyStateImage>
23
+
<svg
24
+
width="120"
25
+
height="120"
26
+
viewBox="0 0 120 120"
27
+
fill="none"
28
+
xmlns="http://www.w3.org/2000/svg"
29
+
>
30
+
<circle
31
+
cx="60"
32
+
cy="60"
33
+
r="50"
34
+
stroke="currentColor"
35
+
strokeWidth="2"
36
+
/>
37
+
<path
38
+
d="M40 60L55 75L80 45"
39
+
stroke="currentColor"
40
+
strokeWidth="2"
41
+
strokeLinecap="round"
42
+
strokeLinejoin="round"
43
+
/>
44
+
</svg>
45
+
</EmptyStateImage>
46
+
<EmptyStateTitle>No items found</EmptyStateTitle>
47
+
<EmptyStateDescription>
48
+
Get started by creating a new item.
49
+
</EmptyStateDescription>
50
+
<EmptyStateActions>
51
+
<Button variant="outline">Learn More</Button>
52
+
<Button>
53
+
<Plus />
54
+
Create Item
55
+
</Button>
56
+
</EmptyStateActions>
57
+
</EmptyState>
58
+
);
59
+
}
+43
-15
apps/docs/stylex.css
+43
-15
apps/docs/stylex.css
···
1
1
@property --x-boxShadow { syntax: "*"; inherits: false;}
2
-
@property --x-aspectRatio { syntax: "*"; inherits: false;}
3
2
@property --x-gridTemplateRows { syntax: "*"; inherits: false;}
4
3
@property --x-gridTemplateColumns { syntax: "*"; inherits: false;}
5
4
@property --x-gridColumnStart { syntax: "*"; inherits: false;}
6
5
@property --x-gridColumnEnd { syntax: "*"; inherits: false;}
7
6
@property --x-gridRowStart { syntax: "*"; inherits: false;}
8
7
@property --x-gridRowEnd { syntax: "*"; inherits: false;}
8
+
@property --x-aspectRatio { syntax: "*"; inherits: false;}
9
9
@property --x-width { syntax: "*"; inherits: false;}
10
10
@property --x-paddingLeft { syntax: "*"; inherits: false;}
11
11
@property --x-fontSize { syntax: "*"; inherits: false;}
···
25
25
@property --black-xdj5g3 { syntax: "<number>"; inherits: true; initial-value: 900 }
26
26
@keyframes x1wc8ddo-B{from{transform:rotate(0deg);}to{transform:rotate(360deg);}}
27
27
@keyframes x1yo5mx1-B{0%{transform:translate(-50%,-50%) scale(0);}100%{transform:translate(-50%,-50%) scale(1);}}
28
-
@keyframes x72inym-B{from{transform:translateX(-1.86%);}to{transform:translateX(0%);}}
29
28
@keyframes x1yf9xd4-B{0%{transform:translateX(-65%);}100%{transform:translateX(0%);}}
29
+
@keyframes x72inym-B{from{transform:translateX(-1.86%);}to{transform:translateX(0%);}}
30
30
:root, .x15x7s49{--_0-xcffliq:0px;--_1-x1plbop:0.25rem;--_2-xsow7ju:0.5rem;--_3-x1a1riub:0.75rem;--_4-xgvn2um:1rem;--_5-x1pn3ufh:1.25rem;--_6-x109877l:1.5rem;--_7-x3ogwq2:1.75rem;--_8-x1do95gr:2rem;--_9-x58vtwt:2.25rem;--_10-xyoqvup:2.5rem;--_11-x11x3va4:2.75rem;--_12-xaxip2l:3rem;--_14-x18pvp2c:3.5rem;--_16-xnqsi2d:4rem;--_20-xbgtkw8:5rem;--_24-x8uq83j:6rem;--_28-x3c8utc:7rem;--_32-xxeew7j:8rem;--_36-x9ro48l:9rem;--_40-xlhyjhi:10rem;--_44-x4oqk9o:11rem;--_48-xc3zl6e:12rem;--_52-x66e183:13rem;--_56-x1k96jyh:14rem;--_60-xf930e:15rem;--_64-xhz114r:16rem;--_72-xgbkc4t:18rem;--_80-x12r4f45:20rem;--_96-x1mf07nc:24rem;--px-x1rrl3u8:1px;--_0_5-x1bnlq1y:0.125rem;--_1_5-x1llymyc:0.375rem;--_2_5-xmuc480:0.625rem;--_3_5-x1gotxl7:0.875rem;}
31
31
:root, .x1rvy3a9{--_2xs-x1xzzr5o:0 1px rgb(0 0 0 / 0.05);--xs-x1e2w8h4:0 1px 2px 0 rgb(0 0 0 / 0.05);--sm-xeboudq:0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);--md-xf59ov0:0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);--lg-xgilsvr:0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);--xl-x1azhb21:0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);--_2xl-x1nhun0f:0 25px 50px -12px rgb(0 0 0 / 0.25);--none-xgllz1r:0 0 #0000;--inset-xe4eu4o:inset 0 0 4px 0 rgb(0 0 0 / 0.1);--insetSm-xio3qbh:inset 0 0 4px 0 rgb(0 0 0 / 0.05);--insetMd-xx48ebj:inset 0 0 4px 0 rgb(0 0 0 / 0.1);--insetLg-x19q2zjg:inset 0 0 8px 0 rgb(0 0 0 / 0.15);}
32
32
:root, .x1vqb0uf{--bg-x11hz5ne:light-dark(#fcfcfd, #fcfcfd);--bgSubtle-xk6jaqm:light-dark(#f9f9fb, #f9f9fb);--component1-x14nyoj8:light-dark(#f0f0f3, #f0f0f3);--component2-xx984p:light-dark(#e8e8ec, #e8e8ec);--component3-x1frjuvu:light-dark(#e0e1e6, #e0e1e6);--border1-x1xf4476:light-dark(#d9d9e0, #d9d9e0);--border2-x10iw3tt:light-dark(#cdced6, #cdced6);--border3-xq0e6t4:light-dark(#b9bbc6, #b9bbc6);--solid1-x1rohqqu:light-dark(#8b8d98, #8b8d98);--solid2-x27t3df:light-dark(#80838d, #80838d);--text1-x1340um9:light-dark(#60646c, #60646c);--text2-x19kn33k:light-dark(#1c2024, #1c2024);}
···
77
77
.--card-y-padding-x1s63jwo:is([data-card-size=lg]){--card-y-padding:var(--_10-xyoqvup)}
78
78
.--card-y-padding-xmmjuso:is([data-card-size=sm]){--card-y-padding:var(--_2-xsow7ju)}
79
79
.--card-y-padding-x1d9o89m:is([data-card-size=md]){--card-y-padding:var(--_7-x3ogwq2)}
80
+
.--empty-state-image-size-x1n5g2xx:is([data-empty-state-size=sm]){--empty-state-image-size:var(--_10-xyoqvup)}
81
+
.--empty-state-image-size-x13rc4i8:is([data-empty-state-size=md]){--empty-state-image-size:var(--_14-x18pvp2c)}
82
+
.--empty-state-image-size-x113ivaj:is([data-empty-state-size=lg]){--empty-state-image-size:var(--_20-xbgtkw8)}
80
83
.--origin-x-x1b8bcs2:is([data-placement=right],[data-placement=right] > *){--origin-x:calc(var(--_4-xgvn2um) * -1)}
81
84
.--origin-x-x11jamwj:is([data-placement=left],[data-placement=left] > *){--origin-x:var(--_4-xgvn2um)}
82
85
.--origin-y-xkt5zg6:is([data-placement=bottom],[data-placement=bottom] > *){--origin-y:calc(var(--_4-xgvn2um) * -1)}
···
89
92
.--progress-size-x1mc7m0b:is([data-size=sm] *){--progress-size:var(--_4-xgvn2um)}
90
93
.--progress-size-xbwumww:is([data-size=md] *){--progress-size:var(--_8-x1do95gr)}
91
94
.gridArea-x19dv8yz:not(#\#){grid-area:action}
95
+
.gridArea-x1cfmmib:not(#\#){grid-area:actions}
92
96
.gridArea-x1iynvfu:not(#\#){grid-area:bar}
93
97
.gridArea-x19tbii3:not(#\#){grid-area:description}
98
+
.gridArea-x5jscpo:not(#\#){grid-area:image}
94
99
.gridArea-xxwd7sb:not(#\#){grid-area:label}
95
100
.gridArea-xnyuz70:not(#\#){grid-area:title}
96
101
.gridArea-xo3lhmp:not(#\#){grid-area:track}
···
103
108
.padding-x1tamke2:not(#\#){padding:16px}
104
109
.padding-x1uz70x1:not(#\#){padding:1rem}
105
110
.padding-x1uktvz8:not(#\#){padding:var(--_1-x1plbop)}
111
+
.padding-xs7phfy:not(#\#){padding:var(--_16-xnqsi2d)}
106
112
.padding-x1mus72z:not(#\#){padding:var(--_2-xsow7ju)}
107
113
.padding-x11nodoc:not(#\#){padding:var(--_3-x1a1riub)}
108
114
.padding-xymjty3:not(#\#){padding:var(--_4-xgvn2um)}
···
243
249
.borderWidth-xqwsx7m:is([data-selected]):not(#\#):not(#\#)::after{border-width:1px}
244
250
.gap-x3qxcbn:is([data-size=sm]):not(#\#):not(#\#){gap:var(--_1-x1plbop)}
245
251
.gap-x1i12q1p:is([data-orientation=vertical]):not(#\#):not(#\#){gap:var(--_2-xsow7ju)}
252
+
.gridTemplateAreas-x1d8lqcm:is([data-empty-state-size=sm]):not(#\#):not(#\#){grid-template-areas:"image title" "image description"}
253
+
.gridTemplateAreas-x4jzqnn:is([data-empty-state-size=md],[data-empty-state-size=lg]):not(#\#):not(#\#){grid-template-areas:"image" "title" "description"}
246
254
.outline-x1wayld1:is([data-focus-visible] *):not(#\#):not(#\#){outline:2px solid var(--solid1-x1yanih7)}
247
255
.textDecoration-x1meiurb:is([data-unavailable]):not(#\#):not(#\#){text-decoration:line-through}
248
256
.textDecoration-x17pbne7:is([data-breadcrumb] *):not(#\#):not(#\#){text-decoration:none}
···
257
265
@supports (corner-shape: squircle){.borderRadius-x1sctp66.borderRadius-x1sctp66:is([data-size=md]):not(#\#):not(#\#){border-radius:var(--_3xl-x1bwjc12)}}
258
266
@supports (corner-shape: squircle){.borderRadius-x4arbgl.borderRadius-x4arbgl:is([data-size=sm]):not(#\#):not(#\#){border-radius:var(--_3xl-x1bwjc12)}}
259
267
@supports (corner-shape: squircle){.borderRadius-x1w2x00y.borderRadius-x1w2x00y:is([data-size=xl]):not(#\#):not(#\#){border-radius:var(--_3xl-x1bwjc12)}}
268
+
.gridTemplateAreas-x1ljrgqn:has([data-empty-state-actions]):is([data-empty-state-size=sm]):not(#\#):not(#\#){grid-template-areas:"image title actions" "image description actions"}
269
+
.gridTemplateAreas-x9cfk05:has([data-empty-state-actions]):is([data-empty-state-size=md],[data-empty-state-size=lg]):not(#\#):not(#\#){grid-template-areas:"image" "title" "description" "actions"}
260
270
.borderColor-x17yyxzj:disabled:not(#\#):not(#\#){border-color:transparent}
261
271
.borderColor-xwl4gkf:disabled:not(#\#):not(#\#){border-color:var(--component1-x11poo5x)}
262
272
.borderColor-x10hl8ol:hover:not(#\#):not(#\#){border-color:var(--border2-xavwyw3)}
···
487
497
.listStyleType-x3yw8vx:not(#\#):not(#\#):not(#\#){list-style-type:decimal}
488
498
.listStyleType-xtaz4m5:not(#\#):not(#\#):not(#\#){list-style-type:disc}
489
499
.listStyleType-x3ct3a4:not(#\#):not(#\#):not(#\#){list-style-type:none}
500
+
.objectFit-x19kjcj4:not(#\#):not(#\#):not(#\#){object-fit:contain}
490
501
.objectFit-xl1xv1r:not(#\#):not(#\#):not(#\#){object-fit:cover}
491
502
.objectPosition-x115dhu7:not(#\#):not(#\#):not(#\#){object-position:center}
492
503
.opacity-xbyyjgo:not(#\#):not(#\#):not(#\#){opacity:.5}
···
593
604
.backgroundColor-x1a4xmkr:is([data-hovered=true]):not(#\#):not(#\#):not(#\#){background-color:var(--component2-x18xhj12)}
594
605
.backgroundColor-x3iekxc:is([data-react-aria-pressable=true]:hover:not([data-disabled]) *):not(#\#):not(#\#):not(#\#){background-color:var(--component2-x18xhj12)}
595
606
.backgroundColor-x15ownq4:is([data-hovered]):not(#\#):not(#\#):not(#\#){background-color:var(--component2-x18xhj12)}
596
-
.backgroundColor-x1xa9zv7:is([data-variant=secondary] *):not(#\#):not(#\#):not(#\#){background-color:var(--component2-x18xhj12)}
597
607
.backgroundColor-xh32jup:is([data-pressed]):not(#\#):not(#\#):not(#\#){background-color:var(--component2-x18xhj12)}
608
+
.backgroundColor-x1xa9zv7:is([data-variant=secondary] *):not(#\#):not(#\#):not(#\#){background-color:var(--component2-x18xhj12)}
598
609
.backgroundColor-x2jfmnu:is([data-hovered]):not([data-unavailable]):not(#\#):not(#\#):not(#\#)::before{background-color:var(--component2-x18xhj12)}
599
610
.backgroundColor-xsd57se:hover:not(:has(* button:hover)):not(:disabled):not(#\#):not(#\#):not(#\#){background-color:var(--component2-x1hhltqf)}
600
611
.backgroundColor-x1akb97j:is(:active,[data-pressed=true]):not(:disabled):not(#\#):not(#\#):not(#\#){background-color:var(--component2-x1hhltqf)}
···
651
662
.color-x17661w7:is([data-variant=success] *):not(#\#):not(#\#):not(#\#){color:var(--text1-x253p4m)}
652
663
.color-x18y9v2v:is([data-breadcrumb] *):not(#\#):not(#\#):not(#\#){color:var(--text1-xb5nrd9)}
653
664
.color-xnfuzeh:is(:not(#\#):not(#\#):not(#\#)::placeholder,[data-placeholder]){color:var(--text1-xb5nrd9)}
654
-
.color-xl7gfqg:is([data-placeholder]):not(#\#):not(#\#):not(#\#){color:var(--text1-xb5nrd9)}
655
665
.color-xr273q8:is([data-current]):not(#\#):not(#\#):not(#\#){color:var(--text1-xb5nrd9)}
666
+
.color-xl7gfqg:is([data-placeholder]):not(#\#):not(#\#):not(#\#){color:var(--text1-xb5nrd9)}
656
667
.color-x3dk8ss:is([data-variant=destructive] *):not(#\#):not(#\#):not(#\#){color:var(--text1-xjn2lxg)}
657
668
.color-x15gqzh4:is([data-variant=critical] *):not(#\#):not(#\#):not(#\#){color:var(--text1-xjn2lxg)}
658
669
.color-xfg0ta2:is([data-breadcrumb][data-current] *):not(#\#):not(#\#):not(#\#){color:var(--text2-x1ztxw)}
···
665
676
.color-x1v12cwp:is([data-variant=warning] *):not(#\#):not(#\#):not(#\#){color:var(--text2-xcv02bb)}
666
677
.color-x1cw8dt2:is([data-variant=critical] *):not(#\#):not(#\#):not(#\#){color:var(--textContrast-x116zh0m)}
667
678
.color-x1juwwod:is([data-variant=success] *):not(#\#):not(#\#):not(#\#){color:var(--textContrast-x1xz901g)}
679
+
.columnGap-x1lrzex8:is([data-empty-state-size=sm]):not(#\#):not(#\#):not(#\#){column-gap:var(--_4-xgvn2um)}
668
680
.cornerShape-x12tbmpm:is(*) pre:not(#\#):not(#\#):not(#\#){corner-shape:squircle}
669
681
.cursor-x1w11t6e:is([data-resizable-direction=left]):not(#\#):not(#\#):not(#\#){cursor:e-resize}
670
682
.cursor-x1oooc6o:is([data-resizable-direction=both]):not(#\#):not(#\#):not(#\#){cursor:ew-resize}
···
681
693
.flexGrow-xmzpm4q:is([data-orientation=vertical] *):not(#\#):not(#\#):not(#\#){flex-grow:1}
682
694
.flexShrink-x1vnanun:is(*) svg:not(#\#):not(#\#):not(#\#){flex-shrink:0}
683
695
.fontSize-xdi2y9l:is([data-card-size='lg'] *):not(#\#):not(#\#):not(#\#){font-size:var(--_2xl-xq985z6)}
696
+
.fontSize-x2gohhm:is([data-empty-state-size='lg'] *):not(#\#):not(#\#):not(#\#){font-size:var(--_2xl-xq985z6)}
684
697
.fontSize-x1h5ralm:is([data-size=md] *):not(#\#):not(#\#):not(#\#){font-size:var(--base-xidomu0)}
685
698
.fontSize-x1a19hz7:is([data-size=lg]):not(#\#):not(#\#):not(#\#){font-size:var(--base-xidomu0)}
686
699
.fontSize-x175ohug:is([data-size=lg] *):not(#\#):not(#\#):not(#\#){font-size:var(--base-xidomu0)}
687
700
.fontSize-x1py6ykt:is([data-size=lg] *):not(#\#):not(#\#):not(#\#){font-size:var(--lg-x1hevvyd)}
688
701
.fontSize-x1fkmo1y:is([data-card-size='sm'] *):not(#\#):not(#\#):not(#\#){font-size:var(--lg-x1hevvyd)}
702
+
.fontSize-x1ktbii6:is([data-empty-state-size='sm'] *):not(#\#):not(#\#):not(#\#){font-size:var(--lg-x1hevvyd)}
689
703
.fontSize-xiceyaw:is([data-size=sm] *):not(#\#):not(#\#):not(#\#){font-size:var(--sm-x1w27pzf)}
690
704
.fontSize-x1bzifm9:is([data-size=md]):not(#\#):not(#\#):not(#\#){font-size:var(--sm-x1w27pzf)}
691
705
.fontSize-x1ya0evx:is([data-size=md] *):not(#\#):not(#\#):not(#\#){font-size:var(--sm-x1w27pzf)}
692
706
.fontSize-xonwjwx:is([data-size=xl] *):not(#\#):not(#\#):not(#\#){font-size:var(--xl-x1vzl7l6)}
693
707
.fontSize-xujovw0:is([data-card-size='md'] *):not(#\#):not(#\#):not(#\#){font-size:var(--xl-x1vzl7l6)}
708
+
.fontSize-x14tgbhz:is([data-empty-state-size='md'] *):not(#\#):not(#\#):not(#\#){font-size:var(--xl-x1vzl7l6)}
694
709
.fontSize-x1w3w1z:is([data-size=sm]):not(#\#):not(#\#):not(#\#){font-size:var(--xs-x1vaen13)}
695
710
.fontSize-x14nmpad:is([data-size=sm] *):not(#\#):not(#\#):not(#\#){font-size:var(--xs-x1vaen13)}
696
711
.fontWeight-x12f8piz:is([data-react-aria-pressable=true][data-selected=true]):not(#\#):not(#\#):not(#\#){font-weight:var(--medium-x1tobmye)}
697
712
.fontWeight-x6i2wo5:is([data-current]):not(#\#):not(#\#):not(#\#){font-weight:var(--medium-x1tobmye)}
713
+
.gridTemplateColumns-xl84o51:is([data-empty-state-size=sm]):not(#\#):not(#\#):not(#\#){grid-template-columns:min-content 1fr}
714
+
.justifyItems-x14u8no6:is([data-empty-state-size=md],[data-empty-state-size=lg]):not(#\#):not(#\#):not(#\#){justify-items:center}
715
+
.justifyItems-x1h912m2:is([data-empty-state-size=sm]):not(#\#):not(#\#):not(#\#){justify-items:start}
698
716
.lineHeight-xx24gj9:is(li *):not(#\#):not(#\#):not(#\#){line-height:var(--base-x17a3wz2)}
699
717
.lineHeight-x1qqnixq:is(blockquote *):not(#\#):not(#\#):not(#\#){line-height:var(--base-x17a3wz2)}
700
718
.lineHeight-x1g66cck:is([data-size=lg]):not(#\#):not(#\#):not(#\#){line-height:var(--base-x17a3wz2)}
···
723
741
.pointerEvents-x19hqv7w:is([data-exiting], [data-exiting] > *):not(#\#):not(#\#):not(#\#){pointer-events:none}
724
742
.rotate-xufvh4u:is([aria-expanded=true] *):not(#\#):not(#\#):not(#\#){rotate:180deg}
725
743
.rotate-x18ellfx:is([aria-expanded=true] *):not(#\#):not(#\#):not(#\#){rotate:90deg}
744
+
.rowGap-x1w7h5gl:is([data-empty-state-size=sm]):not(#\#):not(#\#):not(#\#){row-gap:var(--_2-xsow7ju)}
745
+
.rowGap-x1fg3xu1:is([data-empty-state-size=md]):not(#\#):not(#\#):not(#\#){row-gap:var(--_4-xgvn2um)}
746
+
.rowGap-x4u1qcl:is([data-empty-state-size=lg]):not(#\#):not(#\#):not(#\#){row-gap:var(--_6-x109877l)}
726
747
.transform-x140extk:is([data-placement=right] *):not(#\#):not(#\#):not(#\#){transform:rotate(-90deg)}
727
748
.transform-x1s861hk:is([data-placement=top] *):not(#\#):not(#\#):not(#\#){transform:rotate(0deg)}
728
749
.transform-xr9p1a1:is([data-placement=bottom] *):not(#\#):not(#\#):not(#\#){transform:rotate(180deg)}
···
748
769
.color-x17u1pav:is([data-variant=critical] *):is(*) svg:not(#\#):not(#\#):not(#\#){color:var(--solid1-x2pkv20)}
749
770
.color-x1ok210x:is([data-variant=success] *):is(*) svg:not(#\#):not(#\#):not(#\#){color:var(--solid1-xmemhk6)}
750
771
.color-x1af8a7e:is([data-variant=warning] *):is(*) svg:not(#\#):not(#\#):not(#\#){color:var(--solid1-xnhvmlu)}
772
+
.gridTemplateColumns-xyvwb2k:has([data-empty-state-actions]):is([data-empty-state-size=sm]):not(#\#):not(#\#):not(#\#){grid-template-columns:min-content 1fr max-content}
751
773
.backgroundColor-x1oqui1x:disabled:not(#\#):not(#\#):not(#\#){background-color:transparent}
752
774
.backgroundColor-xcvjdaz:disabled:not(#\#):not(#\#):not(#\#){background-color:var(--component1-x11poo5x)}
753
775
.backgroundColor-xhe8pwl:disabled:not(#\#):not(#\#):not(#\#){background-color:var(--component1-x1gg3jrv)}
···
832
854
.height-xk310vn:not(#\#):not(#\#):not(#\#):not(#\#){height:var(--_72-xgbkc4t)}
833
855
.height-xcky1rk:not(#\#):not(#\#):not(#\#):not(#\#){height:var(--_8-x1do95gr)}
834
856
.height-xxdp216:not(#\#):not(#\#):not(#\#):not(#\#){height:var(--disclosure-panel-height)}
857
+
.height-xiq7ot0:not(#\#):not(#\#):not(#\#):not(#\#){height:var(--empty-state-image-size)}
835
858
.height-x11shy6x:not(#\#):not(#\#):not(#\#):not(#\#){height:var(--page-height)}
836
859
.height-x166ztde:not(#\#):not(#\#):not(#\#):not(#\#){height:var(--progress-size)}
837
860
.height-x16ye13r:not(#\#):not(#\#):not(#\#):not(#\#){height:var(--x-height)}
···
978
1001
.width-x1iobu0p:not(#\#):not(#\#):not(#\#):not(#\#){width:var(--_4-xgvn2um)}
979
1002
.width-x1ywvk1j:not(#\#):not(#\#):not(#\#):not(#\#){width:var(--_64-xhz114r)}
980
1003
.width-x9tbrr9:not(#\#):not(#\#):not(#\#):not(#\#){width:var(--_8-x1do95gr)}
1004
+
.width-xefsqe8:not(#\#):not(#\#):not(#\#):not(#\#){width:var(--empty-state-image-size)}
981
1005
.width-xrstr7j:not(#\#):not(#\#):not(#\#):not(#\#){width:var(--progress-size)}
982
1006
.width-xlvufjm:not(#\#):not(#\#):not(#\#):not(#\#){width:var(--trigger-width)}
983
1007
.width-x5lhr3w:not(#\#):not(#\#):not(#\#):not(#\#){width:var(--x-width)}
···
1005
1029
.borderBottomWidth-x1vqyp8j:is(:not(:last-child)) *:not(#\#):not(#\#):not(#\#):not(#\#){border-bottom-width:0}
1006
1030
.borderBottomWidth-x7dc8i6:is([data-orientation=vertical]):not(#\#):not(#\#):not(#\#):not(#\#){border-bottom-width:0}
1007
1031
.borderBottomWidth-x1ed0nfq:is([data-orientation=vertical] *):not(#\#):not(#\#):not(#\#):not(#\#){border-bottom-width:0}
1008
-
.borderBottomWidth-x1t94y08:is([data-direction=top]):not(#\#):not(#\#):not(#\#):not(#\#){border-bottom-width:1px}
1009
1032
.borderBottomWidth-xyn800g:is([data-orientation=horizontal]):not(#\#):not(#\#):not(#\#):not(#\#){border-bottom-width:1px}
1033
+
.borderBottomWidth-x1t94y08:is([data-direction=top]):not(#\#):not(#\#):not(#\#):not(#\#){border-bottom-width:1px}
1010
1034
.borderBottomWidth-x1t21ho3:is([data-orientation=horizontal] *):not(#\#):not(#\#):not(#\#):not(#\#){border-bottom-width:3px}
1011
1035
.borderLeftWidth-x8b28c3:not(:first-child):not(#\#):not(#\#):not(#\#):not(#\#){border-left-width:0}
1012
1036
.borderLeftWidth-x7e6zi8:is(:not(:first-child)) *:not(#\#):not(#\#):not(#\#):not(#\#){border-left-width:0}
···
1023
1047
.borderRightWidth-xgzzm7r:is(:not(:last-child)) *:not(#\#):not(#\#):not(#\#):not(#\#){border-right-width:0}
1024
1048
.borderRightWidth-x13nsbtr:is([data-orientation=horizontal]):not(#\#):not(#\#):not(#\#):not(#\#){border-right-width:0}
1025
1049
.borderRightWidth-x14zibg8:is([data-orientation=horizontal] *):not(#\#):not(#\#):not(#\#):not(#\#){border-right-width:0}
1026
-
.borderRightWidth-xpx03pi:is([data-direction=left]):not(#\#):not(#\#):not(#\#):not(#\#){border-right-width:1px}
1027
1050
.borderRightWidth-xmzihwk:is([data-orientation=vertical]):not(#\#):not(#\#):not(#\#):not(#\#){border-right-width:1px}
1051
+
.borderRightWidth-xpx03pi:is([data-direction=left]):not(#\#):not(#\#):not(#\#):not(#\#){border-right-width:1px}
1028
1052
.borderRightWidth-x1n82x8c:is([data-orientation=vertical] *):not(#\#):not(#\#):not(#\#):not(#\#){border-right-width:3px}
1029
1053
.borderTopLeftRadius-x1jrxlk3:not(:first-child):not(#\#):not(#\#):not(#\#):not(#\#){border-top-left-radius:0}
1030
1054
.borderTopLeftRadius-x10dxjnd:is(:not(:first-child)) *:not(#\#):not(#\#):not(#\#):not(#\#){border-top-left-radius:0}
···
1038
1062
.borderTopWidth-xe4pvmi:is(:not(:first-child)) *:not(#\#):not(#\#):not(#\#):not(#\#){border-top-width:0}
1039
1063
.borderTopWidth-xk32l79:is([data-direction=bottom]):not(#\#):not(#\#):not(#\#):not(#\#){border-top-width:1px}
1040
1064
.bottom-xkg4vtl:is([data-orientation=vertical] *):not(#\#):not(#\#):not(#\#):not(#\#)::before{bottom:0}
1065
+
.bottom-x1s1o4wi:is([data-orientation=horizontal] *):not(#\#):not(#\#):not(#\#):not(#\#){bottom:0}
1066
+
.bottom-x1w0y3cq:is([data-orientation=vertical] *):not(#\#):not(#\#):not(#\#):not(#\#){bottom:0}
1041
1067
.bottom-x1fk7w57:is([data-handle-orientation='horizontal'] *):not(#\#):not(#\#):not(#\#):not(#\#){bottom:0}
1042
1068
.bottom-x1tkpfsv:is([data-direction=bottom]):not(#\#):not(#\#):not(#\#):not(#\#){bottom:0}
1043
1069
.bottom-x1ey2r4m:is([data-direction=left]):not(#\#):not(#\#):not(#\#):not(#\#){bottom:0}
1044
1070
.bottom-xslbvph:is([data-direction=right]):not(#\#):not(#\#):not(#\#):not(#\#){bottom:0}
1045
-
.bottom-x1s1o4wi:is([data-orientation=horizontal] *):not(#\#):not(#\#):not(#\#):not(#\#){bottom:0}
1046
-
.bottom-x1w0y3cq:is([data-orientation=vertical] *):not(#\#):not(#\#):not(#\#):not(#\#){bottom:0}
1047
1071
.height-xmu6b7u:is(*) pre:not(#\#):not(#\#):not(#\#):not(#\#){height:100%}
1048
1072
.height-xfajk90:is([aria-orientation=vertical]):not(#\#):not(#\#):not(#\#):not(#\#){height:100%}
1049
1073
.height-x15y5qw9:is([data-orientation=vertical] *):not(#\#):not(#\#):not(#\#):not(#\#){height:100%}
···
1063
1087
.height-x1bj8b9x:is([data-size=lg] *):not(#\#):not(#\#):not(#\#):not(#\#){height:var(--_10-xyoqvup)}
1064
1088
.height-x104b1j8:is([data-size=lg]):not(#\#):not(#\#):not(#\#):not(#\#){height:var(--_11-x11x3va4)}
1065
1089
.height-x1k9a9im:is([data-size=xl]):not(#\#):not(#\#):not(#\#):not(#\#){height:var(--_14-x18pvp2c)}
1066
-
.height-x11nvpuc:is([data-size=md] *):not(#\#):not(#\#):not(#\#):not(#\#){height:var(--_2-xsow7ju)}
1067
1090
.height-xe43mij:is([data-handle-orientation='vertical'] *):not(#\#):not(#\#):not(#\#):not(#\#){height:var(--_2-xsow7ju)}
1091
+
.height-x11nvpuc:is([data-size=md] *):not(#\#):not(#\#):not(#\#):not(#\#){height:var(--_2-xsow7ju)}
1068
1092
.height-x1dwj4yq:is(*) svg:not(#\#):not(#\#):not(#\#):not(#\#){height:var(--_3_5-x1gotxl7)}
1069
1093
.height-xepgdy3:is(*) svg:not(#\#):not(#\#):not(#\#):not(#\#){height:var(--_3-x1a1riub)}
1070
-
.height-x6cp08u:is([data-size=lg] *):not(#\#):not(#\#):not(#\#):not(#\#){height:var(--_3-x1a1riub)}
1071
1094
.height-x1fju72f:is([data-size=sm] *):not(#\#):not(#\#):not(#\#):not(#\#){height:var(--_3-x1a1riub)}
1095
+
.height-x6cp08u:is([data-size=lg] *):not(#\#):not(#\#):not(#\#):not(#\#){height:var(--_3-x1a1riub)}
1072
1096
.height-x1nk0t4g:is(*) svg:not(#\#):not(#\#):not(#\#):not(#\#){height:var(--_4-xgvn2um)}
1073
1097
.height-x1ejewa8:is([data-size=sm]):not(#\#):not(#\#):not(#\#):not(#\#){height:var(--_4-xgvn2um)}
1074
1098
.height-xzmxqe9:is([data-size=md] *):not(#\#):not(#\#):not(#\#):not(#\#){height:var(--_4-xgvn2um)}
1075
1099
.height-x1ckmk8u:is([data-size=sm]):not(#\#):not(#\#):not(#\#):not(#\#){height:var(--_6-x109877l)}
1076
1100
.height-x413wr7:is([data-size=md]):not(#\#):not(#\#):not(#\#):not(#\#){height:var(--_6-x109877l)}
1077
1101
.height-xuw6t6g:is([data-size=lg] *):not(#\#):not(#\#):not(#\#):not(#\#){height:var(--_6-x109877l)}
1078
-
.height-x1f99l0e:is([data-focus-visible]):not(#\#):not(#\#):not(#\#):not(#\#){height:var(--_6-x109877l)}
1079
1102
.height-x1900l2r:is([data-size=sm] *):not(#\#):not(#\#):not(#\#):not(#\#){height:var(--_6-x109877l)}
1103
+
.height-x1f99l0e:is([data-focus-visible]):not(#\#):not(#\#):not(#\#):not(#\#){height:var(--_6-x109877l)}
1080
1104
.height-xflfpla:is([data-size=sm]):not(#\#):not(#\#):not(#\#):not(#\#){height:var(--_7-x3ogwq2)}
1081
1105
.height-x8h21d:is([data-size=md]):not(#\#):not(#\#):not(#\#):not(#\#){height:var(--_7-x3ogwq2)}
1082
1106
.height-xbkx42m:is([data-size=md]):not(#\#):not(#\#):not(#\#):not(#\#){height:var(--_8-x1do95gr)}
···
1086
1110
.height-x1ym6ln2:is([data-size=lg]):not(#\#):not(#\#):not(#\#):not(#\#){height:var(--_9-x58vtwt)}
1087
1111
.height-xz9j5pl:is([data-size=md]):not(#\#):not(#\#):not(#\#):not(#\#){height:var(--_9-x58vtwt)}
1088
1112
.left-x12bf3xg:is([data-orientation=horizontal] *):not(#\#):not(#\#):not(#\#):not(#\#)::before{left:0}
1113
+
.left-x1vbnr6c:is([data-orientation=horizontal] *):not(#\#):not(#\#):not(#\#):not(#\#){left:0}
1089
1114
.left-xu15ax8:is([data-handle-orientation='vertical'] *):not(#\#):not(#\#):not(#\#):not(#\#){left:0}
1090
1115
.left-x15qd2tb:is([data-direction=bottom]):not(#\#):not(#\#):not(#\#):not(#\#){left:0}
1091
1116
.left-x1958hiq:is([data-direction=left]):not(#\#):not(#\#):not(#\#):not(#\#){left:0}
1092
1117
.left-xz1wair:is([data-direction=top]):not(#\#):not(#\#):not(#\#):not(#\#){left:0}
1093
-
.left-x1vbnr6c:is([data-orientation=horizontal] *):not(#\#):not(#\#):not(#\#):not(#\#){left:0}
1094
1118
.left-x13m0n2z:is([data-orientation=vertical] *):not(#\#):not(#\#):not(#\#):not(#\#)::before{left:50%}
1095
1119
.left-x1ff65kx:is([data-orientation=vertical] *):not(#\#):not(#\#):not(#\#):not(#\#){left:50%}
1096
1120
.left-xhiwlwb:is([data-orientation=horizontal] *):not(#\#):not(#\#):not(#\#):not(#\#){left:calc(attr(data-progress-start number) * 1%)}
···
1116
1140
.maxHeight-x1ettal:is([data-direction=right], [data-direction=left]):not(#\#):not(#\#):not(#\#):not(#\#){max-height:100vh}
1117
1141
.maxHeight-x1aybang:is([data-direction=top], [data-direction=bottom]):not(#\#):not(#\#):not(#\#):not(#\#){max-height:calc(100vh - var(--_8-x1do95gr))}
1118
1142
.maxWidth-x601bgv:is([data-direction=top], [data-direction=bottom]):not(#\#):not(#\#):not(#\#):not(#\#){max-width:100vw}
1143
+
.maxWidth-xue674a:is([data-empty-state-size=sm]):not(#\#):not(#\#):not(#\#):not(#\#){max-width:320px}
1144
+
.maxWidth-x13fmgbw:is([data-empty-state-size=md]):not(#\#):not(#\#):not(#\#):not(#\#){max-width:400px}
1145
+
.maxWidth-x2rur6v:is([data-empty-state-size=lg]):not(#\#):not(#\#):not(#\#):not(#\#){max-width:480px}
1119
1146
.maxWidth-x1xioav0:is([data-direction=right], [data-direction=left]):not(#\#):not(#\#):not(#\#):not(#\#){max-width:calc(100vw - var(--_8-x1do95gr))}
1120
1147
.minHeight-xmvt6du:is([data-table-size=md] *):not(#\#):not(#\#):not(#\#):not(#\#){min-height:var(--_10-xyoqvup)}
1121
1148
.minHeight-xfhokl8:is([data-size=lg]):not(#\#):not(#\#):not(#\#):not(#\#){min-height:var(--_10-xyoqvup)}
···
1138
1165
.paddingLeft-x1yv1bkc:is([data-size=lg] *):not(#\#):not(#\#):not(#\#):not(#\#){padding-left:var(--_3-x1a1riub)}
1139
1166
.paddingLeft-xhpkq72:is(*) pre:not(#\#):not(#\#):not(#\#):not(#\#){padding-left:var(--_4-xgvn2um)}
1140
1167
.paddingLeft-x1remayf:is([data-table-size=lg] *:not(:first-child)):not(#\#):not(#\#):not(#\#):not(#\#){padding-left:var(--_4-xgvn2um)}
1168
+
.paddingLeft-x1c4wgp3:is([data-empty-state-size=sm] *):not(#\#):not(#\#):not(#\#):not(#\#){padding-left:var(--_4-xgvn2um)}
1141
1169
.paddingRight-x1ovgblk:last-child:has(svg):not(#\#):not(#\#):not(#\#):not(#\#){padding-right:var(--_0_5-x1bnlq1y)}
1142
1170
.paddingRight-xt1a0pi:is([data-size=sm]):not(#\#):not(#\#):not(#\#):not(#\#){padding-right:var(--_1-x1plbop)}
1143
1171
.paddingRight-x1l70bhl:is([data-size=lg] *):not(#\#):not(#\#):not(#\#):not(#\#){padding-right:var(--_1-x1plbop)}
···
1158
1186
.paddingTop-x1xm6zre:is([data-size=lg]):not(#\#):not(#\#):not(#\#):not(#\#){padding-top:var(--_3-x1a1riub)}
1159
1187
.paddingTop-x1pdtiu9:is(*) pre:not(#\#):not(#\#):not(#\#):not(#\#){padding-top:var(--_4-xgvn2um)}
1160
1188
.right-x8z6mx6:is([data-orientation=horizontal] *):not(#\#):not(#\#):not(#\#):not(#\#)::before{right:0}
1189
+
.right-x1pbrn0l:is([data-orientation=horizontal] *):not(#\#):not(#\#):not(#\#):not(#\#){right:0}
1190
+
.right-xxlim67:is([data-orientation=vertical] *):not(#\#):not(#\#):not(#\#):not(#\#){right:0}
1161
1191
.right-xdsir5g:is([data-handle-orientation='vertical'] *):not(#\#):not(#\#):not(#\#):not(#\#){right:0}
1162
1192
.right-x1hu1b0q:is([data-direction=bottom]):not(#\#):not(#\#):not(#\#):not(#\#){right:0}
1163
1193
.right-x1edtlyo:is([data-direction=right]):not(#\#):not(#\#):not(#\#):not(#\#){right:0}
1164
1194
.right-xp6x2dd:is([data-direction=top]):not(#\#):not(#\#):not(#\#):not(#\#){right:0}
1165
-
.right-x1pbrn0l:is([data-orientation=horizontal] *):not(#\#):not(#\#):not(#\#):not(#\#){right:0}
1166
-
.right-xxlim67:is([data-orientation=vertical] *):not(#\#):not(#\#):not(#\#):not(#\#){right:0}
1167
1195
.top-x1v5ec6b:is([data-orientation=vertical] *):not(#\#):not(#\#):not(#\#):not(#\#)::before{top:0}
1196
+
.top-xdod2xa:is([data-orientation=vertical] *):not(#\#):not(#\#):not(#\#):not(#\#){top:0}
1168
1197
.top-xbwnylk:is([data-handle-orientation='horizontal'] *):not(#\#):not(#\#):not(#\#):not(#\#){top:0}
1169
1198
.top-xi4gtk3:is([data-direction=left]):not(#\#):not(#\#):not(#\#):not(#\#){top:0}
1170
1199
.top-x1m4vouk:is([data-direction=right]):not(#\#):not(#\#):not(#\#):not(#\#){top:0}
1171
1200
.top-xck6qwh:is([data-direction=top]):not(#\#):not(#\#):not(#\#):not(#\#){top:0}
1172
-
.top-xdod2xa:is([data-orientation=vertical] *):not(#\#):not(#\#):not(#\#):not(#\#){top:0}
1173
1201
.top-xzpubj3:is([data-orientation=horizontal] *):not(#\#):not(#\#):not(#\#):not(#\#)::before{top:50%}
1174
1202
.top-xdpxmfp:is([data-orientation=horizontal] *):not(#\#):not(#\#):not(#\#):not(#\#){top:50%}
1175
1203
.top-x7u6t2g:is([data-orientation=horizontal] *):not(#\#):not(#\#):not(#\#):not(#\#){top:auto}
+2
packages/hip-ui/src/cli/install.tsx
+2
packages/hip-ui/src/cli/install.tsx
···
36
36
import { disclosureConfig } from "../components/disclosure/disclosure-config.js";
37
37
import { drawerConfig } from "../components/drawer/drawer-config.js";
38
38
import { editableTextConfig } from "../components/editable-text/editable-text-config.js";
39
+
import { emptyStateConfig } from "../components/empty-state/empty-state-config.js";
39
40
import { fileDropZoneConfig } from "../components/file-drop-zone/file-drop-zone-config.js";
40
41
import { flexConfig } from "../components/flex/flex-config.js";
41
42
import { formConfig } from "../components/form/form-config.js";
···
152
153
tabsConfig,
153
154
drawerConfig,
154
155
editableTextConfig,
156
+
emptyStateConfig,
155
157
toastConfig,
156
158
windowSplitterConfig,
157
159
];
+14
packages/hip-ui/src/components/empty-state/empty-state-config.ts
+14
packages/hip-ui/src/components/empty-state/empty-state-config.ts
···
1
+
import { ComponentConfig } from "../../types";
2
+
3
+
export const emptyStateConfig: ComponentConfig = {
4
+
name: "empty-state",
5
+
filepath: "./index.tsx",
6
+
hipDependencies: [
7
+
"../theme/spacing.stylex.tsx",
8
+
"../theme/semantic-color.stylex.tsx",
9
+
"../theme/typography.stylex.tsx",
10
+
"../theme/types.ts",
11
+
"../context.ts",
12
+
],
13
+
};
14
+
+180
packages/hip-ui/src/components/empty-state/index.tsx
+180
packages/hip-ui/src/components/empty-state/index.tsx
···
1
+
"use client";
2
+
3
+
import * as stylex from "@stylexjs/stylex";
4
+
import { use } from "react";
5
+
6
+
import { SizeContext } from "../context";
7
+
import { ui } from "../theme/semantic-color.stylex";
8
+
import { spacing } from "../theme/spacing.stylex";
9
+
import { Size, StyleXComponentProps } from "../theme/types";
10
+
import { fontFamily, fontSize, fontWeight } from "../theme/typography.stylex";
11
+
12
+
const styles = stylex.create({
13
+
emptyState: {
14
+
display: "flex",
15
+
flexDirection: "column",
16
+
alignItems: "center",
17
+
justifyContent: "center",
18
+
fontFamily: fontFamily["sans"],
19
+
gap: "var(--empty-state-gap)",
20
+
textAlign: "center",
21
+
"--empty-state-gap": {
22
+
":is([data-empty-state-size=lg])": spacing["8"],
23
+
":is([data-empty-state-size=md])": spacing["6"],
24
+
":is([data-empty-state-size=sm])": spacing["4"],
25
+
},
26
+
"--empty-state-image-size": {
27
+
":is([data-empty-state-size=lg])": "240px",
28
+
":is([data-empty-state-size=md])": "180px",
29
+
":is([data-empty-state-size=sm])": "120px",
30
+
},
31
+
},
32
+
image: {
33
+
width: "var(--empty-state-image-size)",
34
+
height: "var(--empty-state-image-size)",
35
+
objectFit: "contain",
36
+
display: "flex",
37
+
alignItems: "center",
38
+
justifyContent: "center",
39
+
},
40
+
title: {
41
+
fontSize: {
42
+
":is([data-empty-state-size='lg'] *)": fontSize["2xl"],
43
+
":is([data-empty-state-size='md'] *)": fontSize["xl"],
44
+
":is([data-empty-state-size='sm'] *)": fontSize["lg"],
45
+
},
46
+
fontWeight: fontWeight["semibold"],
47
+
margin: 0,
48
+
},
49
+
description: {
50
+
fontSize: fontSize["sm"],
51
+
fontWeight: fontWeight["normal"],
52
+
margin: 0,
53
+
maxWidth: {
54
+
":is([data-empty-state-size=lg])": "480px",
55
+
":is([data-empty-state-size=md])": "400px",
56
+
":is([data-empty-state-size=sm])": "320px",
57
+
},
58
+
},
59
+
actions: {
60
+
display: "flex",
61
+
flexDirection: "row",
62
+
gap: spacing["2"],
63
+
alignItems: "center",
64
+
justifyContent: "center",
65
+
flexWrap: "wrap",
66
+
},
67
+
});
68
+
69
+
export interface EmptyStateProps
70
+
extends StyleXComponentProps<React.ComponentProps<"div">> {
71
+
/**
72
+
* The size of the empty state component.
73
+
* @default "md"
74
+
*/
75
+
size?: Size;
76
+
}
77
+
78
+
export const EmptyState = ({
79
+
style,
80
+
size: sizeProp,
81
+
...props
82
+
}: EmptyStateProps) => {
83
+
const size = sizeProp || use(SizeContext);
84
+
85
+
return (
86
+
<SizeContext value={size}>
87
+
<div
88
+
{...props}
89
+
data-empty-state-size={size}
90
+
{...stylex.props(styles.emptyState, style)}
91
+
/>
92
+
</SizeContext>
93
+
);
94
+
};
95
+
96
+
export interface EmptyStateImageProps
97
+
extends StyleXComponentProps<
98
+
Omit<React.ComponentProps<"div">, "src" | "alt">
99
+
> {
100
+
/**
101
+
* The source URL of the image.
102
+
* When provided, renders an img element instead of a div.
103
+
*/
104
+
src?: string;
105
+
/**
106
+
* The alt text for the image.
107
+
* Required when src is provided.
108
+
*/
109
+
alt?: string;
110
+
}
111
+
112
+
export const EmptyStateImage = ({
113
+
style,
114
+
src,
115
+
alt,
116
+
children,
117
+
...props
118
+
}: EmptyStateImageProps) => {
119
+
if (src) {
120
+
return (
121
+
<img
122
+
src={src}
123
+
alt={alt}
124
+
{...stylex.props(styles.image, style)}
125
+
/>
126
+
);
127
+
}
128
+
129
+
return (
130
+
<div {...props} {...stylex.props(styles.image, style)}>
131
+
{children}
132
+
</div>
133
+
);
134
+
};
135
+
136
+
export interface EmptyStateTitleProps
137
+
extends StyleXComponentProps<React.ComponentProps<"h2">> {}
138
+
139
+
export const EmptyStateTitle = ({
140
+
style,
141
+
...props
142
+
}: EmptyStateTitleProps) => {
143
+
return (
144
+
<h2
145
+
{...props}
146
+
{...stylex.props(styles.title, ui.text, style)}
147
+
/>
148
+
);
149
+
};
150
+
151
+
export interface EmptyStateDescriptionProps
152
+
extends StyleXComponentProps<React.ComponentProps<"p">> {}
153
+
154
+
export const EmptyStateDescription = ({
155
+
style,
156
+
...props
157
+
}: EmptyStateDescriptionProps) => {
158
+
return (
159
+
<p
160
+
{...props}
161
+
{...stylex.props(styles.description, ui.textDim, style)}
162
+
/>
163
+
);
164
+
};
165
+
166
+
export interface EmptyStateActionsProps
167
+
extends StyleXComponentProps<React.ComponentProps<"div">> {}
168
+
169
+
export const EmptyStateActions = ({
170
+
style,
171
+
...props
172
+
}: EmptyStateActionsProps) => {
173
+
return (
174
+
<div
175
+
{...props}
176
+
{...stylex.props(styles.actions, style)}
177
+
/>
178
+
);
179
+
};
180
+
+10
-10
pnpm-lock.yaml
+10
-10
pnpm-lock.yaml
···
156
156
specifier: ^1.30.2
157
157
version: 1.30.2
158
158
lucide-react:
159
-
specifier: ^0.545.0
160
-
version: 0.545.0(react@19.2.0)
159
+
specifier: ^0.554.0
160
+
version: 0.554.0(react@19.2.0)
161
161
magic-string:
162
162
specifier: ^0.30.21
163
163
version: 0.30.21
···
5813
5813
lru-cache@5.1.1:
5814
5814
resolution: {integrity: sha512-KpNARQA3Iwv+jTA0utUVVbrh+Jlrr1Fv0e56GGzAFOXN7dk/FviaDW8LHmK52DlcH4WP2n6gI8vN1aesBFgo9w==}
5815
5815
5816
-
lucide-react@0.545.0:
5817
-
resolution: {integrity: sha512-7r1/yUuflQDSt4f1bpn5ZAocyIxcTyVyBBChSVtBKn5M+392cPmI5YJMWOJKk/HUWGm5wg83chlAZtCcGbEZtw==}
5816
+
lucide-react@0.548.0:
5817
+
resolution: {integrity: sha512-63b16z63jM9yc1MwxajHeuu0FRZFsDtljtDjYm26Kd86UQ5HQzu9ksEtoUUw4RBuewodw/tGFmvipePvRsKeDA==}
5818
5818
peerDependencies:
5819
5819
react: ^16.5.1 || ^17.0.0 || ^18.0.0 || ^19.0.0
5820
5820
5821
-
lucide-react@0.548.0:
5822
-
resolution: {integrity: sha512-63b16z63jM9yc1MwxajHeuu0FRZFsDtljtDjYm26Kd86UQ5HQzu9ksEtoUUw4RBuewodw/tGFmvipePvRsKeDA==}
5821
+
lucide-react@0.554.0:
5822
+
resolution: {integrity: sha512-St+z29uthEJVx0Is7ellNkgTEhaeSoA42I7JjOCBCrc5X6LYMGSv0P/2uS5HDLTExP5tpiqRD2PyUEOS6s9UXA==}
5823
5823
peerDependencies:
5824
5824
react: ^16.5.1 || ^17.0.0 || ^18.0.0 || ^19.0.0
5825
5825
···
14335
14335
dependencies:
14336
14336
yallist: 3.1.1
14337
14337
14338
-
lucide-react@0.545.0(react@19.2.0):
14338
+
lucide-react@0.548.0(react@19.2.0):
14339
14339
dependencies:
14340
14340
react: 19.2.0
14341
14341
14342
-
lucide-react@0.548.0(react@19.2.0):
14342
+
lucide-react@0.554.0(react@19.2.0):
14343
14343
dependencies:
14344
14344
react: 19.2.0
14345
14345
···
16854
16854
'@webassemblyjs/wasm-parser': 1.14.1
16855
16855
acorn: 8.15.0
16856
16856
acorn-import-phases: 1.0.4(acorn@8.15.0)
16857
-
browserslist: 4.27.0
16857
+
browserslist: 4.28.0
16858
16858
chrome-trace-event: 1.0.4
16859
16859
enhanced-resolve: 5.18.3
16860
16860
es-module-lexer: 1.7.0
···
16886
16886
'@webassemblyjs/wasm-parser': 1.14.1
16887
16887
acorn: 8.15.0
16888
16888
acorn-import-phases: 1.0.4(acorn@8.15.0)
16889
-
browserslist: 4.27.0
16889
+
browserslist: 4.28.0
16890
16890
chrome-trace-event: 1.0.4
16891
16891
enhanced-resolve: 5.18.3
16892
16892
es-module-lexer: 1.7.0