A design system in a box.
hip-ui.tngl.io/docs/introduction
input polish
+223
-124
+19
-19
apps/docs/src/components/empty-state/index.tsx
+19
-19
apps/docs/src/components/empty-state/index.tsx
···
12
12
const styles = stylex.create({
13
13
emptyState: {
14
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
15
gridTemplateAreas: {
22
16
":is([data-empty-state-size=md],[data-empty-state-size=lg])": {
23
17
default: `
···
43
37
`,
44
38
},
45
39
},
40
+
gridTemplateColumns: {
41
+
":is([data-empty-state-size=sm])": {
42
+
":has([data-empty-state-actions])": "min-content 1fr max-content",
43
+
default: "min-content 1fr",
44
+
},
45
+
},
46
46
alignItems: "center",
47
+
fontFamily: fontFamily["sans"],
47
48
justifyItems: {
48
49
":is([data-empty-state-size=md],[data-empty-state-size=lg])": "center",
49
50
":is([data-empty-state-size=sm])": "start",
50
51
},
51
-
fontFamily: fontFamily["sans"],
52
-
textAlign: "center",
53
52
columnGap: {
54
53
":is([data-empty-state-size=sm])": spacing["4"],
55
54
},
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
-
},
55
+
textAlign: "center",
61
56
"--empty-state-image-size": {
62
57
":is([data-empty-state-size=lg])": spacing["20"],
63
58
":is([data-empty-state-size=md])": spacing["14"],
64
59
":is([data-empty-state-size=sm])": spacing["10"],
65
60
},
61
+
rowGap: {
62
+
":is([data-empty-state-size=lg])": spacing["6"],
63
+
":is([data-empty-state-size=md])": spacing["4"],
64
+
":is([data-empty-state-size=sm])": spacing["2"],
65
+
},
66
66
},
67
67
image: {
68
68
gridArea: "image",
69
+
height: "var(--empty-state-image-size)",
69
70
width: "var(--empty-state-image-size)",
70
-
height: "var(--empty-state-image-size)",
71
+
display: "flex",
71
72
objectFit: "contain",
72
-
display: "flex",
73
73
alignItems: "center",
74
74
justifyContent: "center",
75
75
},
···
80
80
":is([data-empty-state-size='md'] *)": fontSize["xl"],
81
81
":is([data-empty-state-size='sm'] *)": fontSize["lg"],
82
82
},
83
-
fontWeight: fontWeight["semibold"],
84
83
margin: 0,
84
+
fontWeight: fontWeight["semibold"],
85
85
},
86
86
description: {
87
87
gridArea: "description",
88
88
fontSize: fontSize["sm"],
89
-
fontWeight: fontWeight["normal"],
90
89
margin: 0,
90
+
fontWeight: fontWeight["normal"],
91
91
maxWidth: {
92
92
":is([data-empty-state-size=lg])": "480px",
93
93
":is([data-empty-state-size=md])": "400px",
···
97
97
actions: {
98
98
gridArea: "actions",
99
99
display: "flex",
100
-
flexDirection: "row",
101
100
gap: spacing["2"],
101
+
flexDirection: "row",
102
102
alignItems: "center",
103
-
justifyContent: "center",
104
103
flexWrap: "wrap",
104
+
justifyContent: "center",
105
105
106
106
paddingLeft: {
107
107
":is([data-empty-state-size=sm] *)": spacing["4"],
+64
-36
apps/docs/src/components/theme/useInputStyles.ts
+64
-36
apps/docs/src/components/theme/useInputStyles.ts
···
27
27
color: ui.textDim,
28
28
flexShrink: 0,
29
29
height: "100%",
30
-
paddingLeft: { ":first-child": spacing["2.5"] },
31
-
paddingRight: {
32
-
":first-child": spacing["2"],
33
-
":last-child": spacing["2.5"],
34
-
},
35
30
36
31
gap: spacing["2"],
37
32
alignItems: "center",
···
44
39
pointerEvents: "none",
45
40
height: spacing["4"],
46
41
width: spacing["4"],
42
+
},
43
+
},
44
+
addonSm: {
45
+
paddingLeft: { ":first-child": spacing["1.5"] },
46
+
paddingRight: {
47
+
":first-child": spacing["1"],
48
+
":last-child": spacing["1.5"],
49
+
},
50
+
},
51
+
addonMd: {
52
+
paddingLeft: { ":first-child": spacing["2.5"] },
53
+
paddingRight: {
54
+
":first-child": spacing["2"],
55
+
":last-child": spacing["2.5"],
56
+
},
57
+
},
58
+
addonLg: {
59
+
paddingLeft: { ":first-child": spacing["3"] },
60
+
paddingRight: {
61
+
":first-child": spacing["2"],
62
+
":last-child": spacing["3"],
47
63
},
48
64
},
49
65
validationIcon: {
···
294
310
color: successColor.text1,
295
311
},
296
312
297
-
inputSize: (size: Size) => ({
298
-
fontSize:
299
-
size === "sm"
300
-
? fontSize["xs"]
301
-
: size === "md"
302
-
? fontSize["sm"]
303
-
: fontSize["base"],
313
+
inputSizeSm: {
314
+
fontSize: fontSize["xs"],
304
315
paddingLeft: {
305
-
":first-child":
306
-
size === "sm"
307
-
? spacing["1"]
308
-
: size === "md"
309
-
? spacing["2"]
310
-
: spacing["3"],
316
+
":first-child": spacing["2"],
311
317
},
312
-
paddingRight:
313
-
size === "sm"
314
-
? spacing["1"]
315
-
: size === "md"
316
-
? spacing["2"]
317
-
: spacing["3"],
318
-
}),
319
-
wrapperSize: (size: Size) => ({
320
-
height:
321
-
size === "sm"
322
-
? spacing["6"]
323
-
: size === "md"
324
-
? spacing["8"]
325
-
: spacing["10"],
326
-
}),
318
+
paddingRight: spacing["1"],
319
+
},
320
+
inputSizeMd: {
321
+
fontSize: fontSize["sm"],
322
+
paddingLeft: {
323
+
":first-child": spacing["2"],
324
+
},
325
+
paddingRight: spacing["2"],
326
+
},
327
+
inputSizeLg: {
328
+
fontSize: fontSize["base"],
329
+
paddingLeft: {
330
+
":first-child": spacing["3"],
331
+
},
332
+
paddingRight: spacing["3"],
333
+
},
334
+
wrapperSizeSm: {
335
+
height: spacing["6"],
336
+
},
337
+
wrapperSizeMd: {
338
+
height: spacing["8"],
339
+
},
340
+
wrapperSizeLg: {
341
+
height: spacing["10"],
342
+
},
327
343
});
328
344
329
345
export function useInputStyles({
···
360
376
validationState === "warning" && [styles.tertiaryWarning],
361
377
validationState === "valid" && [styles.tertiaryValid],
362
378
],
363
-
styles.wrapperSize(size),
379
+
size === "sm" && styles.wrapperSizeSm,
380
+
size === "md" && styles.wrapperSizeMd,
381
+
size === "lg" && styles.wrapperSizeLg,
364
382
],
365
-
input: [styles.input, styles.inputSize(size)],
366
-
addon: styles.addon as unknown as stylex.StyleXStyles,
383
+
input: [
384
+
styles.input,
385
+
size === "sm" && styles.inputSizeSm,
386
+
size === "md" && styles.inputSizeMd,
387
+
size === "lg" && styles.inputSizeLg,
388
+
],
389
+
addon: [
390
+
styles.addon,
391
+
size === "sm" && styles.addonSm,
392
+
size === "md" && styles.addonMd,
393
+
size === "lg" && styles.addonLg,
394
+
],
367
395
validationIcon: [
368
396
styles.validationIcon,
369
397
validationState === "invalid" && [styles.invalidIcon],
+44
-4
apps/docs/src/examples/text-field/sizes.tsx
+44
-4
apps/docs/src/examples/text-field/sizes.tsx
···
1
1
import { Flex } from "@/components/flex";
2
2
import { TextField } from "@/components/text-field";
3
+
import { CheckCircle } from "lucide-react";
3
4
4
5
export function TextFieldSizes() {
5
6
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" />
7
+
<Flex direction="column" gap="6">
8
+
<Flex direction="column" gap="2">
9
+
<TextField
10
+
label="Small"
11
+
placeholder="Small size"
12
+
size="sm"
13
+
suffix={<CheckCircle />}
14
+
/>
15
+
<TextField
16
+
aria-label="Small"
17
+
placeholder="Small size"
18
+
size="sm"
19
+
prefix={<CheckCircle />}
20
+
/>
21
+
</Flex>
22
+
<Flex direction="column" gap="2">
23
+
<TextField
24
+
label="Medium"
25
+
placeholder="Medium size"
26
+
size="md"
27
+
suffix={<CheckCircle />}
28
+
/>
29
+
<TextField
30
+
aria-label="Medium"
31
+
placeholder="Medium size"
32
+
size="md"
33
+
prefix={<CheckCircle />}
34
+
/>
35
+
</Flex>
36
+
<Flex direction="column" gap="2">
37
+
<TextField
38
+
label="Large"
39
+
placeholder="Large size"
40
+
size="lg"
41
+
suffix={<CheckCircle />}
42
+
/>
43
+
<TextField
44
+
aria-label="Large"
45
+
placeholder="Large size"
46
+
size="lg"
47
+
prefix={<CheckCircle />}
48
+
/>
49
+
</Flex>
10
50
</Flex>
11
51
);
12
52
}
+6
-6
apps/docs/stylex.css
+6
-6
apps/docs/stylex.css
···
84
84
@property --x-width { syntax: "*"; inherits: false;}
85
85
@property --x-paddingLeft { syntax: "*"; inherits: false;}
86
86
@property --x---items-per-row { syntax: "*"; inherits: false;}
87
-
@property --x-fontSize { syntax: "*"; inherits: false;}
88
-
@property --x-1gfbyet { syntax: "*"; inherits: false;}
89
-
@property --x-paddingRight { syntax: "*"; inherits: false;}
90
87
@property --x-height { syntax: "*"; inherits: false;}
91
88
@property --x-transform { syntax: "*"; inherits: false;}
92
89
@property --x-backgroundColor { syntax: "*"; inherits: false;}
···
816
813
.xhycywm:not(#\#):not(#\#):not(#\#){font-family:var(--x9eavc5)}
817
814
.x9wccx5:not(#\#):not(#\#):not(#\#){font-size:.95em}
818
815
.x1qlqyl8:not(#\#):not(#\#):not(#\#){font-size:inherit}
819
-
.xdmh292:not(#\#):not(#\#):not(#\#){font-size:var(--x-fontSize)}
820
816
.x1vden:not(#\#):not(#\#):not(#\#){font-size:var(--x17lnkj2)}
821
817
.x1y844x8:not(#\#):not(#\#):not(#\#){font-size:var(--x1hevvyd)}
822
818
.x12va9g9:not(#\#):not(#\#):not(#\#){font-size:var(--x1lstm7v)}
···
1316
1312
.x1hlhdeh:not(#\#):not(#\#):not(#\#):not(#\#){padding-left:var(--xyoqvup)}
1317
1313
.x1xpa7k:not(#\#):not(#\#):not(#\#):not(#\#){padding-right:0}
1318
1314
.x1u8e7yt:not(#\#):not(#\#):not(#\#):not(#\#){padding-right:var(--card-x-padding)}
1319
-
.xwsd3xy:not(#\#):not(#\#):not(#\#):not(#\#){padding-right:var(--x-paddingRight)}
1320
1315
.xzt4wlk:not(#\#):not(#\#):not(#\#):not(#\#){padding-right:var(--x109877l)}
1321
1316
.x1lp5gly:not(#\#):not(#\#):not(#\#):not(#\#){padding-right:var(--x1a1riub)}
1322
1317
.x1ufczr9:not(#\#):not(#\#):not(#\#):not(#\#){padding-right:var(--x1do95gr)}
···
1623
1618
.x5djnb4:has(svg:only-child):not(#\#):not(#\#):not(#\#):not(#\#){width:var(--xyoqvup)}
1624
1619
.x1buj52v:first-child:not(#\#):not(#\#):not(#\#):not(#\#){border-top-left-radius:var(--x1o51v3i)}
1625
1620
.x1nzaapa:first-child:not(#\#):not(#\#):not(#\#):not(#\#){border-top-right-radius:var(--x1o51v3i)}
1626
-
.xok9p14:first-child:not(#\#):not(#\#):not(#\#):not(#\#){padding-left:var(--x-1gfbyet)}
1621
+
.x1l904qm:first-child:not(#\#):not(#\#):not(#\#):not(#\#){padding-left:var(--x1a1riub)}
1627
1622
.x1jkz7iv:first-child:not(#\#):not(#\#):not(#\#):not(#\#){padding-left:var(--x1bnlq1y)}
1623
+
.x1by7681:first-child:not(#\#):not(#\#):not(#\#):not(#\#){padding-left:var(--x1llymyc)}
1628
1624
.x5sub40:first-child:not(#\#):not(#\#):not(#\#):not(#\#){padding-left:var(--xmuc480)}
1625
+
.x1mmj0bo:first-child:not(#\#):not(#\#):not(#\#):not(#\#){padding-left:var(--xsow7ju)}
1626
+
.x13u8uvr:first-child:not(#\#):not(#\#):not(#\#):not(#\#){padding-right:var(--x1plbop)}
1629
1627
.x12ix96l:first-child:not(#\#):not(#\#):not(#\#):not(#\#){padding-right:var(--xsow7ju)}
1630
1628
.xzc7y64:first-child:not(#\#):not(#\#):not(#\#):not(#\#){padding-top:var(--card-y-padding)}
1631
1629
.x1jtp6tc:first-child:not(#\#):not(#\#):not(#\#):not(#\#){padding-top:var(--xgvn2um)}
1632
1630
.xmys6wu:last-child:not(#\#):not(#\#):not(#\#):not(#\#){border-bottom-left-radius:var(--x1o51v3i)}
1633
1631
.x1502yzn:last-child:not(#\#):not(#\#):not(#\#):not(#\#){border-bottom-right-radius:var(--x1o51v3i)}
1634
1632
.xmampw0:last-child:not(#\#):not(#\#):not(#\#):not(#\#){padding-bottom:var(--card-y-padding)}
1633
+
.xwtmqz1:last-child:not(#\#):not(#\#):not(#\#):not(#\#){padding-right:var(--x1a1riub)}
1634
+
.x15xh87z:last-child:not(#\#):not(#\#):not(#\#):not(#\#){padding-right:var(--x1llymyc)}
1635
1635
.xjaxm57:last-child:not(#\#):not(#\#):not(#\#):not(#\#){padding-right:var(--xmuc480)}
1636
1636
.xq6kpti:last-child:not(#\#):not(#\#):not(#\#):not(#\#){padding-right:var(--xsow7ju)}
1637
1637
@supports (corner-shape: squircle){.x1cocqi3.x1cocqi3:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#){border-radius:var(--x1bwjc12)}}
+26
-23
packages/hip-ui/src/components/empty-state/index.tsx
+26
-23
packages/hip-ui/src/components/empty-state/index.tsx
···
11
11
12
12
const styles = stylex.create({
13
13
emptyState: {
14
-
display: "grid",
14
+
"--empty-state-image-size": {
15
+
":is([data-empty-state-size=lg])": spacing["20"],
16
+
":is([data-empty-state-size=md])": spacing["14"],
17
+
":is([data-empty-state-size=sm])": spacing["10"],
18
+
},
15
19
gridTemplateAreas: {
20
+
// eslint-disable-next-line @stylexjs/valid-styles
16
21
":is([data-empty-state-size=md],[data-empty-state-size=lg])": {
17
22
default: `
18
23
"image"
···
26
31
"actions"
27
32
`,
28
33
},
34
+
// eslint-disable-next-line @stylexjs/valid-styles
29
35
":is([data-empty-state-size=sm])": {
30
36
default: `
31
37
"image title"
···
37
43
`,
38
44
},
39
45
},
46
+
alignItems: "center",
47
+
columnGap: {
48
+
":is([data-empty-state-size=sm])": spacing["4"],
49
+
},
50
+
display: "grid",
51
+
fontFamily: fontFamily["sans"],
40
52
gridTemplateColumns: {
53
+
// eslint-disable-next-line @stylexjs/valid-styles
41
54
":is([data-empty-state-size=sm])": {
42
-
":has([data-empty-state-actions])": "min-content 1fr max-content",
43
55
default: "min-content 1fr",
56
+
":has([data-empty-state-actions])": "min-content 1fr max-content",
44
57
},
45
58
},
46
-
alignItems: "center",
47
-
fontFamily: fontFamily["sans"],
48
59
justifyItems: {
49
60
":is([data-empty-state-size=md],[data-empty-state-size=lg])": "center",
50
61
":is([data-empty-state-size=sm])": "start",
51
62
},
52
-
columnGap: {
53
-
":is([data-empty-state-size=sm])": spacing["4"],
54
-
},
55
-
textAlign: "center",
56
-
"--empty-state-image-size": {
57
-
":is([data-empty-state-size=lg])": spacing["20"],
58
-
":is([data-empty-state-size=md])": spacing["14"],
59
-
":is([data-empty-state-size=sm])": spacing["10"],
60
-
},
61
63
rowGap: {
62
64
":is([data-empty-state-size=lg])": spacing["6"],
63
65
":is([data-empty-state-size=md])": spacing["4"],
64
66
":is([data-empty-state-size=sm])": spacing["2"],
65
67
},
68
+
textAlign: "center",
66
69
},
67
70
image: {
68
71
gridArea: "image",
69
-
height: "var(--empty-state-image-size)",
70
-
width: "var(--empty-state-image-size)",
72
+
alignItems: "center",
71
73
display: "flex",
74
+
justifyContent: "center",
72
75
objectFit: "contain",
73
-
alignItems: "center",
74
-
justifyContent: "center",
76
+
height: "var(--empty-state-image-size)",
77
+
width: "var(--empty-state-image-size)",
75
78
},
76
79
title: {
77
80
gridArea: "title",
81
+
margin: 0,
78
82
fontSize: {
79
83
":is([data-empty-state-size='lg'] *)": fontSize["2xl"],
80
84
":is([data-empty-state-size='md'] *)": fontSize["xl"],
81
85
":is([data-empty-state-size='sm'] *)": fontSize["lg"],
82
86
},
83
-
margin: 0,
84
87
fontWeight: fontWeight["semibold"],
85
88
},
86
89
description: {
87
90
gridArea: "description",
88
-
fontSize: fontSize["sm"],
89
91
margin: 0,
92
+
fontSize: fontSize["sm"],
90
93
fontWeight: fontWeight["normal"],
91
94
maxWidth: {
92
95
":is([data-empty-state-size=lg])": "480px",
···
96
99
},
97
100
actions: {
98
101
gridArea: "actions",
99
-
display: "flex",
100
102
gap: spacing["2"],
101
-
flexDirection: "row",
102
103
alignItems: "center",
104
+
display: "flex",
105
+
flexDirection: "row",
103
106
flexWrap: "wrap",
104
107
justifyContent: "center",
105
108
···
169
172
};
170
173
171
174
export interface EmptyStateTitleProps
172
-
extends StyleXComponentProps<React.ComponentProps<"h2">> {}
175
+
extends StyleXComponentProps<React.ComponentProps<"div">> {}
173
176
174
177
export const EmptyStateTitle = ({ style, ...props }: EmptyStateTitleProps) => {
175
-
return <h2 {...props} {...stylex.props(styles.title, ui.text, style)} />;
178
+
return <div {...props} {...stylex.props(styles.title, ui.text, style)} />;
176
179
};
177
180
178
181
export interface EmptyStateDescriptionProps
+64
-36
packages/hip-ui/src/components/theme/useInputStyles.ts
+64
-36
packages/hip-ui/src/components/theme/useInputStyles.ts
···
27
27
color: ui.textDim,
28
28
flexShrink: 0,
29
29
height: "100%",
30
-
paddingLeft: { ":first-child": spacing["2.5"] },
31
-
paddingRight: {
32
-
":first-child": spacing["2"],
33
-
":last-child": spacing["2.5"],
34
-
},
35
30
36
31
gap: spacing["2"],
37
32
alignItems: "center",
···
44
39
pointerEvents: "none",
45
40
height: spacing["4"],
46
41
width: spacing["4"],
42
+
},
43
+
},
44
+
addonSm: {
45
+
paddingLeft: { ":first-child": spacing["1.5"] },
46
+
paddingRight: {
47
+
":first-child": spacing["1"],
48
+
":last-child": spacing["1.5"],
49
+
},
50
+
},
51
+
addonMd: {
52
+
paddingLeft: { ":first-child": spacing["2.5"] },
53
+
paddingRight: {
54
+
":first-child": spacing["2"],
55
+
":last-child": spacing["2.5"],
56
+
},
57
+
},
58
+
addonLg: {
59
+
paddingLeft: { ":first-child": spacing["3"] },
60
+
paddingRight: {
61
+
":first-child": spacing["2"],
62
+
":last-child": spacing["3"],
47
63
},
48
64
},
49
65
validationIcon: {
···
294
310
color: successColor.text1,
295
311
},
296
312
297
-
inputSize: (size: Size) => ({
298
-
fontSize:
299
-
size === "sm"
300
-
? fontSize["xs"]
301
-
: size === "md"
302
-
? fontSize["sm"]
303
-
: fontSize["base"],
313
+
inputSizeSm: {
314
+
fontSize: fontSize["xs"],
304
315
paddingLeft: {
305
-
":first-child":
306
-
size === "sm"
307
-
? spacing["1"]
308
-
: size === "md"
309
-
? spacing["2"]
310
-
: spacing["3"],
316
+
":first-child": spacing["2"],
311
317
},
312
-
paddingRight:
313
-
size === "sm"
314
-
? spacing["1"]
315
-
: size === "md"
316
-
? spacing["2"]
317
-
: spacing["3"],
318
-
}),
319
-
wrapperSize: (size: Size) => ({
320
-
height:
321
-
size === "sm"
322
-
? spacing["6"]
323
-
: size === "md"
324
-
? spacing["8"]
325
-
: spacing["10"],
326
-
}),
318
+
paddingRight: spacing["1"],
319
+
},
320
+
inputSizeMd: {
321
+
fontSize: fontSize["sm"],
322
+
paddingLeft: {
323
+
":first-child": spacing["2"],
324
+
},
325
+
paddingRight: spacing["2"],
326
+
},
327
+
inputSizeLg: {
328
+
fontSize: fontSize["base"],
329
+
paddingLeft: {
330
+
":first-child": spacing["3"],
331
+
},
332
+
paddingRight: spacing["3"],
333
+
},
334
+
wrapperSizeSm: {
335
+
height: spacing["6"],
336
+
},
337
+
wrapperSizeMd: {
338
+
height: spacing["8"],
339
+
},
340
+
wrapperSizeLg: {
341
+
height: spacing["10"],
342
+
},
327
343
});
328
344
329
345
export function useInputStyles({
···
360
376
validationState === "warning" && [styles.tertiaryWarning],
361
377
validationState === "valid" && [styles.tertiaryValid],
362
378
],
363
-
styles.wrapperSize(size),
379
+
size === "sm" && styles.wrapperSizeSm,
380
+
size === "md" && styles.wrapperSizeMd,
381
+
size === "lg" && styles.wrapperSizeLg,
364
382
],
365
-
input: [styles.input, styles.inputSize(size)],
366
-
addon: styles.addon as unknown as stylex.StyleXStyles,
383
+
input: [
384
+
styles.input,
385
+
size === "sm" && styles.inputSizeSm,
386
+
size === "md" && styles.inputSizeMd,
387
+
size === "lg" && styles.inputSizeLg,
388
+
],
389
+
addon: [
390
+
styles.addon,
391
+
size === "sm" && styles.addonSm,
392
+
size === "md" && styles.addonMd,
393
+
size === "lg" && styles.addonLg,
394
+
] as unknown as stylex.StyleXStyles,
367
395
validationIcon: [
368
396
styles.validationIcon,
369
397
validationState === "invalid" && [styles.invalidIcon],