A design system in a box.
hip-ui.tngl.io/docs/introduction
segmented control
+399
-158
+4
-4
apps/docs/src/components/alert-dialog/index.tsx
+4
-4
apps/docs/src/components/alert-dialog/index.tsx
···
28
28
},
29
29
header: {
30
30
alignItems: "center",
31
-
display: "flex",
32
31
gap: spacing["2"],
33
-
height: spacing["8"],
32
+
display: "flex",
34
33
justifyContent: "space-between",
34
+
height: spacing["8"],
35
35
paddingLeft: spacing["4"],
36
36
paddingRight: spacing["4"],
37
-
paddingTop: spacing["2"],
38
37
fontSize: fontSize["lg"],
38
+
paddingTop: spacing["2"],
39
39
},
40
40
description: {
41
41
paddingBottom: spacing["4"],
···
44
44
paddingTop: spacing["4"],
45
45
},
46
46
footer: {
47
-
display: "flex",
48
47
gap: spacing["2"],
48
+
display: "flex",
49
49
justifyContent: "flex-end",
50
50
paddingBottom: spacing["2"],
51
51
paddingLeft: spacing["4"],
+3
-2
apps/docs/src/components/aspect-ratio/index.tsx
+3
-2
apps/docs/src/components/aspect-ratio/index.tsx
···
12
12
position: "relative",
13
13
},
14
14
rounded: {
15
+
// eslint-disable-next-line @stylexjs/valid-styles
16
+
cornerShape: "squircle",
15
17
borderBottomLeftRadius: {
16
18
default: radius["md"],
17
19
"@supports (corner-shape: squircle)": radius["3xl"],
···
28
30
default: radius["md"],
29
31
"@supports (corner-shape: squircle)": radius["3xl"],
30
32
},
31
-
cornerShape: "squircle",
32
33
},
33
34
imageContainer: {
34
35
inset: 0,
35
36
position: "absolute",
36
37
},
37
38
image: {
38
-
height: "100%",
39
39
objectFit: "cover",
40
+
height: "100%",
40
41
width: "100%",
41
42
},
42
43
});
+16
-15
apps/docs/src/components/avatar/index.tsx
+16
-15
apps/docs/src/components/avatar/index.tsx
···
15
15
16
16
const styles = stylex.create({
17
17
wrapper: {
18
-
alignItems: "center",
19
-
backgroundColor: uiColor.component1,
20
18
borderColor: uiColor.border1,
21
19
borderStyle: "solid",
22
20
borderWidth: 1,
21
+
overflow: "hidden",
22
+
alignItems: "center",
23
+
backgroundColor: uiColor.component1,
23
24
display: "flex",
24
25
justifyContent: "center",
25
-
overflow: "hidden",
26
26
27
+
// eslint-disable-next-line @stylexjs/valid-styles
28
+
cornerShape: "squircle",
27
29
borderRadius: {
28
-
":is([data-size=sm])": {
29
-
default: radius["sm"],
30
+
":is([data-size=lg])": {
31
+
default: radius["lg"],
30
32
"@supports (corner-shape: squircle)": radius["3xl"],
31
33
},
32
34
":is([data-size=md])": {
33
35
default: radius["md"],
34
36
"@supports (corner-shape: squircle)": radius["3xl"],
35
37
},
36
-
":is([data-size=lg])": {
37
-
default: radius["lg"],
38
+
":is([data-size=sm])": {
39
+
default: radius["sm"],
38
40
"@supports (corner-shape: squircle)": radius["3xl"],
39
41
},
40
42
":is([data-size=xl])": {
···
42
44
"@supports (corner-shape: squircle)": radius["3xl"],
43
45
},
44
46
},
45
-
cornerShape: "squircle",
46
47
height: {
47
-
":is([data-size=sm])": spacing["6"],
48
-
":is([data-size=md])": spacing["8"],
49
48
":is([data-size=lg])": spacing["10"],
49
+
":is([data-size=md])": spacing["8"],
50
+
":is([data-size=sm])": spacing["6"],
50
51
":is([data-size=xl])": spacing["14"],
51
52
},
52
53
width: {
53
-
":is([data-size=sm])": spacing["6"],
54
+
":is([data-size=lg])": spacing["10"],
54
55
":is([data-size=md])": spacing["8"],
55
-
":is([data-size=lg])": spacing["10"],
56
+
":is([data-size=sm])": spacing["6"],
56
57
":is([data-size=xl])": spacing["14"],
57
58
},
58
59
},
59
60
image: {
60
-
height: "100%",
61
61
objectFit: "cover",
62
62
objectPosition: "center",
63
+
height: "100%",
63
64
width: "100%",
64
65
},
65
66
fallback: {
···
69
70
lineHeight: lineHeight["none"],
70
71
71
72
fontSize: {
72
-
":is([data-size=sm] *)": fontSize["sm"],
73
+
":is([data-size=lg] *)": fontSize["lg"],
73
74
":is([data-size=md] *)": fontSize["base"],
74
-
":is([data-size=lg] *)": fontSize["lg"],
75
+
":is([data-size=sm] *)": fontSize["sm"],
75
76
":is([data-size=xl] *)": fontSize["xl"],
76
77
},
77
78
},
+4
-4
apps/docs/src/components/dialog/index.tsx
+4
-4
apps/docs/src/components/dialog/index.tsx
···
24
24
},
25
25
header: {
26
26
alignItems: "center",
27
-
display: "flex",
28
27
gap: spacing["2"],
29
-
height: spacing["8"],
28
+
display: "flex",
30
29
justifyContent: "space-between",
30
+
height: spacing["8"],
31
31
paddingBottom: spacing["2"],
32
32
paddingLeft: spacing["4"],
33
+
fontSize: fontSize["lg"],
33
34
paddingRight: spacing["4"],
34
-
fontSize: fontSize["lg"],
35
35
36
36
borderBottomColor: uiColor.border1,
37
37
borderBottomStyle: "solid",
···
51
51
paddingTop: spacing["4"],
52
52
},
53
53
footer: {
54
-
display: "flex",
55
54
gap: spacing["2"],
55
+
display: "flex",
56
56
justifyContent: "flex-end",
57
57
paddingBottom: spacing["2"],
58
58
paddingLeft: spacing["4"],
+19
-4
apps/docs/src/components/segmented-control/index.tsx
+19
-4
apps/docs/src/components/segmented-control/index.tsx
···
11
11
} from "react-aria-components";
12
12
13
13
import { SizeContext } from "../context";
14
-
import { animationDuration } from "../theme/animations.stylex";
14
+
import { animationDuration } from "../theme/animations-duration.stylex";
15
15
import { radius } from "../theme/radius.stylex";
16
16
import { uiColor } from "../theme/semantic-color.stylex";
17
17
import { shadow } from "../theme/shadow.stylex";
···
20
20
21
21
const styles = stylex.create({
22
22
group: {
23
+
// eslint-disable-next-line @stylexjs/valid-styles
24
+
cornerShape: "squircle",
23
25
padding: spacing["1"],
24
-
borderRadius: radius.lg,
26
+
borderRadius: {
27
+
default: radius["lg"],
28
+
"@supports (corner-shape: squircle)": radius["4xl"],
29
+
},
25
30
gap: spacing["2"],
26
31
alignItems: "center",
27
32
backgroundColor: uiColor.component1,
···
35
40
},
36
41
},
37
42
item: {
38
-
borderRadius: radius.md,
43
+
// eslint-disable-next-line @stylexjs/valid-styles
44
+
cornerShape: "squircle",
45
+
borderRadius: {
46
+
default: radius["md"],
47
+
"@supports (corner-shape: squircle)": radius["3xl"],
48
+
},
39
49
borderWidth: 0,
40
50
alignItems: "center",
41
51
backgroundColor: "transparent",
···
68
78
},
69
79
},
70
80
selectionIndicator: {
71
-
borderRadius: radius.md,
81
+
// eslint-disable-next-line @stylexjs/valid-styles
82
+
cornerShape: "squircle",
83
+
borderRadius: {
84
+
default: radius["md"],
85
+
"@supports (corner-shape: squircle)": radius["3xl"],
86
+
},
72
87
backgroundColor: uiColor.bgSubtle,
73
88
boxShadow: shadow.sm,
74
89
position: "absolute",
+4
-3
apps/docs/src/components/skeleton/index.tsx
+4
-3
apps/docs/src/components/skeleton/index.tsx
···
20
20
const styles = stylex.create({
21
21
group: {},
22
22
base: {
23
+
overflow: "hidden",
23
24
backgroundColor: uiColor.component1,
24
25
boxShadow: shadow["insetSm"],
25
-
overflow: "hidden",
26
26
position: "relative",
27
27
},
28
28
shimmer: {
···
40
40
transparent 100%
41
41
)`,
42
42
backgroundSize: "100%",
43
+
position: "absolute",
43
44
bottom: 0,
44
45
left: 0,
45
-
position: "absolute",
46
46
right: 0,
47
47
top: 0,
48
48
width: "300%",
···
51
51
borderRadius: radius.full,
52
52
},
53
53
rectangle: {
54
+
// eslint-disable-next-line @stylexjs/valid-styles
55
+
cornerShape: "squircle",
54
56
borderRadius: {
55
57
default: radius["md"],
56
58
"@supports (corner-shape: squircle)": radius["4xl"],
57
59
},
58
-
cornerShape: "squircle",
59
60
},
60
61
sizeSm: {
61
62
height: spacing["8"],
+22
-21
apps/docs/src/components/text-area/index.tsx
+22
-21
apps/docs/src/components/text-area/index.tsx
···
19
19
20
20
const styles = stylex.create({
21
21
wrapper: {
22
+
gap: spacing["2"],
22
23
display: "flex",
23
24
flexDirection: "column",
24
-
gap: spacing["2"],
25
25
},
26
26
addon: {
27
27
color: ui.textDim,
···
30
30
minWidth: spacing["8"],
31
31
paddingLeft: { ":first-child": spacing["0.5"] },
32
32
paddingRight: {
33
-
":last-child": spacing["2"],
34
33
":last-child:has(svg)": spacing["0.5"],
34
+
":last-child": spacing["2"],
35
35
},
36
36
37
+
gap: spacing["0.5"],
37
38
alignItems: "center",
38
39
display: "flex",
39
-
gap: spacing["0.5"],
40
40
justifyContent: "center",
41
41
42
42
// eslint-disable-next-line @stylexjs/no-legacy-contextual-styles, @stylexjs/valid-styles
43
43
":is(*) svg": {
44
44
flexShrink: 0,
45
-
height: spacing["4"],
46
45
pointerEvents: "none",
46
+
height: spacing["4"],
47
47
width: spacing["4"],
48
48
},
49
49
},
50
50
inputWrapper: {
51
+
// eslint-disable-next-line @stylexjs/valid-styles
52
+
cornerShape: "squircle",
51
53
borderRadius: {
52
54
default: radius["md"],
53
55
"@supports (corner-shape: squircle)": radius["2xl"],
54
56
},
55
-
cornerShape: "squircle",
56
57
boxSizing: "border-box",
57
58
display: "flex",
58
59
flexGrow: 1,
···
66
67
borderWidth: 1,
67
68
},
68
69
input: {
70
+
borderWidth: 0,
71
+
outline: "none",
69
72
backgroundColor: "transparent",
70
-
borderWidth: 0,
71
73
boxSizing: "border-box",
72
74
color: {
73
75
"::placeholder": uiColor.text1,
74
76
},
75
77
flexGrow: 1,
76
78
fontFamily: fontFamily["sans"],
77
-
outline: "none",
78
79
resize: "none",
79
80
80
81
fontSize: {
82
+
":is([data-size=lg])": fontSize["base"],
83
+
":is([data-size=md])": fontSize["sm"],
81
84
":is([data-size=sm])": fontSize["xs"],
82
-
":is([data-size=md])": fontSize["sm"],
83
-
":is([data-size=lg])": fontSize["base"],
84
85
},
85
86
lineHeight: {
86
-
":is([data-size=sm])": lineHeight["xs"],
87
+
":is([data-size=lg])": lineHeight["base"],
87
88
":is([data-size=md])": lineHeight["sm"],
88
-
":is([data-size=lg])": lineHeight["base"],
89
+
":is([data-size=sm])": lineHeight["xs"],
89
90
},
90
91
minHeight: {
91
-
":is([data-size=sm])": spacing["6"],
92
-
":is([data-size=md])": spacing["8"],
93
92
":is([data-size=lg])": spacing["10"],
93
+
":is([data-size=md])": spacing["8"],
94
+
":is([data-size=sm])": spacing["6"],
94
95
},
95
96
paddingBottom: {
96
-
":is([data-size=sm])": spacing["1"],
97
+
":is([data-size=lg])": spacing["3"],
97
98
":is([data-size=md])": spacing["2"],
98
-
":is([data-size=lg])": spacing["3"],
99
+
":is([data-size=sm])": spacing["1"],
99
100
},
100
101
paddingLeft: {
102
+
":is([data-size=lg])": spacing["3"],
103
+
":is([data-size=md])": spacing["2"],
101
104
":is([data-size=sm])": spacing["1"],
102
-
":is([data-size=md])": spacing["2"],
103
-
":is([data-size=lg])": spacing["3"],
104
105
},
105
106
paddingRight: {
106
-
":is([data-size=sm])": spacing["1"],
107
+
":is([data-size=lg])": spacing["3"],
107
108
":is([data-size=md])": spacing["2"],
108
-
":is([data-size=lg])": spacing["3"],
109
+
":is([data-size=sm])": spacing["1"],
109
110
},
110
111
paddingTop: {
112
+
":is([data-size=lg])": spacing["3"],
113
+
":is([data-size=md])": spacing["2"],
111
114
":is([data-size=sm])": spacing["1"],
112
-
":is([data-size=md])": spacing["2"],
113
-
":is([data-size=lg])": spacing["3"],
114
115
},
115
116
},
116
117
resizable: {
+8
apps/docs/src/components/theme/animations-duration.stylex.tsx
+8
apps/docs/src/components/theme/animations-duration.stylex.tsx
+1
-1
apps/docs/src/components/theme/animations.stylex.tsx
+1
-1
apps/docs/src/components/theme/animations.stylex.tsx
+6
-5
apps/docs/src/components/tooltip/index.tsx
+6
-5
apps/docs/src/components/tooltip/index.tsx
···
18
18
19
19
const tooltipStyle = stylex.create({
20
20
content: {
21
-
backgroundColor: uiInverted.bg,
21
+
// eslint-disable-next-line @stylexjs/valid-styles
22
+
cornerShape: "squircle",
22
23
borderRadius: {
23
24
default: radius["md"],
24
25
"@supports (corner-shape: squircle)": radius["full"],
25
26
},
26
-
cornerShape: "squircle",
27
+
backgroundColor: uiInverted.bg,
27
28
boxShadow: shadow["sm"],
28
29
color: uiInverted.text1,
29
30
fontFamily: fontFamily["sans"],
···
35
36
paddingTop: spacing["1"],
36
37
37
38
"--origin": {
38
-
":is([data-placement=top])": "translateY(4px)",
39
39
":is([data-placement=bottom])": "translateY(-4px)",
40
40
":is([data-placement=left])": "translateX(4px)",
41
41
":is([data-placement=right])": "translateX(-4px)",
42
+
":is([data-placement=top])": "translateY(4px)",
42
43
},
43
44
opacity: {
44
45
default: 1,
···
53
54
transitionProperty: "transform, opacity",
54
55
},
55
56
caret: {
56
-
display: "flex",
57
57
fill: uiInverted.bg,
58
+
display: "flex",
58
59
},
59
60
arrow: {
60
61
transform: {
61
62
[":is([data-placement=bottom] *)"]: "rotate(180deg)",
62
-
[":is([data-placement=top] *)"]: "rotate(0deg)",
63
63
[":is([data-placement=left] *)"]: "rotate(90deg)",
64
64
[":is([data-placement=right] *)"]: "rotate(-90deg)",
65
+
[":is([data-placement=top] *)"]: "rotate(0deg)",
65
66
},
66
67
},
67
68
});
+15
-10
apps/docs/src/components/tree/index.tsx
+15
-10
apps/docs/src/components/tree/index.tsx
···
35
35
width: `calc((var(--tree-item-level, 0) - 1) * ${spacing["3"]})`,
36
36
},
37
37
content: {
38
+
gap: spacing["2"],
38
39
alignItems: "center",
39
40
display: "flex",
40
41
flexGrow: 1,
41
-
gap: spacing["2"],
42
42
},
43
43
hidden: {
44
44
opacity: 0,
45
45
visibility: "hidden",
46
46
},
47
47
chevron: {
48
+
borderWidth: 0,
48
49
backgroundColor: "transparent",
49
-
borderWidth: 0,
50
+
transform: {
51
+
default: "rotate(0deg)",
52
+
":is([aria-expanded=true] *)": "rotate(90deg)",
53
+
},
50
54
paddingBottom: 0,
51
55
paddingLeft: 0,
52
56
paddingRight: 0,
53
57
paddingTop: 0,
54
-
transform: {
55
-
default: "rotate(0deg)",
56
-
":is([aria-expanded=true] *)": "rotate(90deg)",
57
-
},
58
58
59
59
// eslint-disable-next-line @stylexjs/no-legacy-contextual-styles, @stylexjs/valid-styles
60
60
":is(*) svg": {
···
67
67
marginTop: `calc(${spacing["2"]} * -1)`,
68
68
},
69
69
dragButtonWrapper: {
70
-
left: 0,
71
70
opacity: {
72
71
default: 0,
73
-
":hover": 1,
74
72
":is([data-react-aria-pressable=true]:hover:not([data-disabled]) *)": 1,
73
+
":hover": 1,
75
74
},
76
75
position: "absolute",
77
-
top: "50%",
78
76
transform: "translate(-100%, -50%)",
79
77
transitionDuration: animationDuration.fast,
80
78
transitionProperty: "opacity",
81
79
transitionTimingFunction: "ease-in-out",
80
+
left: 0,
81
+
top: "50%",
82
82
},
83
83
dragButton: {
84
+
// eslint-disable-next-line @stylexjs/valid-styles
85
+
cornerShape: "squircle",
86
+
borderRadius: {
87
+
default: radius["sm"],
88
+
"@supports (corner-shape: squircle)": radius["2xl"],
89
+
},
84
90
alignItems: "center",
85
-
borderRadius: radius["sm"],
86
91
display: "flex",
87
92
justifyContent: "center",
88
93
+13
-8
apps/docs/src/components/typography/index.tsx
+13
-8
apps/docs/src/components/typography/index.tsx
···
15
15
16
16
const styles = stylex.create({
17
17
blockquote: {
18
+
color: ui.textDim,
19
+
fontFamily: fontFamily["serif"],
18
20
borderLeftColor: ui.borderDim,
19
21
borderLeftStyle: "solid",
20
22
borderLeftWidth: 1,
21
-
color: ui.textDim,
22
-
fontFamily: fontFamily["serif"],
23
23
marginBottom: 0,
24
24
marginLeft: spacing["2"],
25
25
marginRight: 0,
···
27
27
paddingLeft: spacing["4"],
28
28
},
29
29
unorderedList: {
30
+
margin: 0,
31
+
gap: spacing["3"],
30
32
display: "flex",
31
33
flexDirection: "column",
32
-
gap: spacing["3"],
33
34
listStyleType: "disc",
34
-
margin: 0,
35
35
paddingLeft: spacing["8"],
36
36
},
37
37
orderedList: {
38
+
margin: 0,
39
+
gap: spacing["3"],
38
40
display: "flex",
39
41
flexDirection: "column",
40
-
gap: spacing["3"],
41
42
listStyleType: "decimal",
42
-
margin: 0,
43
43
paddingLeft: spacing["8"],
44
44
},
45
45
listItem: {
···
49
49
paddingLeft: spacing["1"],
50
50
},
51
51
inlineCode: {
52
-
borderRadius: radius["sm"],
52
+
// eslint-disable-next-line @stylexjs/valid-styles
53
+
cornerShape: "squircle",
54
+
borderRadius: {
55
+
default: radius["sm"],
56
+
"@supports (corner-shape: squircle)": radius["2xl"],
57
+
},
53
58
fontSize: "0.95em",
59
+
position: "relative",
54
60
paddingBottom: spacing["1"],
55
61
paddingLeft: spacing["1"],
56
62
paddingRight: spacing["1"],
57
63
paddingTop: spacing["1"],
58
-
position: "relative",
59
64
top: "-0.01em",
60
65
},
61
66
underline: {
+47
apps/docs/src/docs/components/segmented-control.mdx
+47
apps/docs/src/docs/components/segmented-control.mdx
···
1
+
---
2
+
title: Segmented Control
3
+
description: A segmented control displays a set of mutually exclusive options, allowing users to select one option at a time.
4
+
---
5
+
6
+
import { PropDocs } from '../../lib/PropDocs'
7
+
import { Example } from '../../lib/Example'
8
+
import { Basic } from '../../examples/segmented-control/basic'
9
+
import { Size } from '../../examples/segmented-control/size'
10
+
import { WithIcons } from '../../examples/segmented-control/with-icons'
11
+
12
+
<Example src={Basic} />
13
+
14
+
## Installation
15
+
16
+
Run the following command to add the segmented control component to your project.
17
+
18
+
```bash
19
+
pnpm hip install segmented-control
20
+
```
21
+
22
+
## Props
23
+
24
+
This component is built using [React Aria ToggleButtonGroup](https://react-spectrum.adobe.com/react-aria/ToggleButtonGroup.html).
25
+
26
+
<PropDocs components={["SegmentedControl", "SegmentedControlItem"]} />
27
+
28
+
## Features
29
+
30
+
### Sizes
31
+
32
+
Segmented controls support three different sizes: small, medium, and large.
33
+
34
+
<Example src={Size} />
35
+
36
+
### With Icons
37
+
38
+
Segmented control items can include icons alongside text labels.
39
+
40
+
<Example src={WithIcons} />
41
+
42
+
## Related Components
43
+
44
+
- [Tabs](/docs/components/tabs) - For organizing content into multiple sections
45
+
- [ToggleButtonGroup](/docs/components/toggle-button-group) - For grouping toggle buttons together
46
+
- [Radio](/docs/components/radio) - For single-selection from multiple options
47
+
+23
apps/docs/src/examples/segmented-control/basic.tsx
+23
apps/docs/src/examples/segmented-control/basic.tsx
···
1
+
import * as stylex from "@stylexjs/stylex";
2
+
3
+
import {
4
+
SegmentedControl,
5
+
SegmentedControlItem,
6
+
} from "@/components/segmented-control";
7
+
8
+
const styles = stylex.create({
9
+
root: {
10
+
width: "100%",
11
+
},
12
+
});
13
+
14
+
export function Basic() {
15
+
return (
16
+
<SegmentedControl style={styles.root} defaultSelectedKey="option1">
17
+
<SegmentedControlItem id="option1">Option 1</SegmentedControlItem>
18
+
<SegmentedControlItem id="option2">Option 2</SegmentedControlItem>
19
+
<SegmentedControlItem id="option3">Option 3</SegmentedControlItem>
20
+
</SegmentedControl>
21
+
);
22
+
}
23
+
+47
apps/docs/src/examples/segmented-control/size.tsx
+47
apps/docs/src/examples/segmented-control/size.tsx
···
1
+
import * as stylex from "@stylexjs/stylex";
2
+
3
+
import {
4
+
SegmentedControl,
5
+
SegmentedControlItem,
6
+
} from "@/components/segmented-control";
7
+
8
+
const styles = stylex.create({
9
+
container: {
10
+
display: "flex",
11
+
flexDirection: "column",
12
+
gap: "2rem",
13
+
width: "100%",
14
+
},
15
+
});
16
+
17
+
export function Size() {
18
+
return (
19
+
<div {...stylex.props(styles.container)}>
20
+
<div>
21
+
<h3>Small</h3>
22
+
<SegmentedControl size="sm" defaultSelectedKey="option1-sm">
23
+
<SegmentedControlItem id="option1-sm">Option 1</SegmentedControlItem>
24
+
<SegmentedControlItem id="option2-sm">Option 2</SegmentedControlItem>
25
+
<SegmentedControlItem id="option3-sm">Option 3</SegmentedControlItem>
26
+
</SegmentedControl>
27
+
</div>
28
+
<div>
29
+
<h3>Medium</h3>
30
+
<SegmentedControl size="md" defaultSelectedKey="option1-md">
31
+
<SegmentedControlItem id="option1-md">Option 1</SegmentedControlItem>
32
+
<SegmentedControlItem id="option2-md">Option 2</SegmentedControlItem>
33
+
<SegmentedControlItem id="option3-md">Option 3</SegmentedControlItem>
34
+
</SegmentedControl>
35
+
</div>
36
+
<div>
37
+
<h3>Large</h3>
38
+
<SegmentedControl size="lg" defaultSelectedKey="option1-lg">
39
+
<SegmentedControlItem id="option1-lg">Option 1</SegmentedControlItem>
40
+
<SegmentedControlItem id="option2-lg">Option 2</SegmentedControlItem>
41
+
<SegmentedControlItem id="option3-lg">Option 3</SegmentedControlItem>
42
+
</SegmentedControl>
43
+
</div>
44
+
</div>
45
+
);
46
+
}
47
+
+33
apps/docs/src/examples/segmented-control/with-icons.tsx
+33
apps/docs/src/examples/segmented-control/with-icons.tsx
···
1
+
import * as stylex from "@stylexjs/stylex";
2
+
import { List, Grid, Columns } from "lucide-react";
3
+
4
+
import {
5
+
SegmentedControl,
6
+
SegmentedControlItem,
7
+
} from "@/components/segmented-control";
8
+
9
+
const styles = stylex.create({
10
+
root: {
11
+
width: "100%",
12
+
},
13
+
});
14
+
15
+
export function WithIcons() {
16
+
return (
17
+
<SegmentedControl style={styles.root} defaultSelectedKey="list">
18
+
<SegmentedControlItem id="list">
19
+
<List />
20
+
List
21
+
</SegmentedControlItem>
22
+
<SegmentedControlItem id="grid">
23
+
<Grid />
24
+
Grid
25
+
</SegmentedControlItem>
26
+
<SegmentedControlItem id="columns">
27
+
<Columns />
28
+
Columns
29
+
</SegmentedControlItem>
30
+
</SegmentedControl>
31
+
);
32
+
}
33
+
+11
-10
apps/docs/stylex.css
+11
-10
apps/docs/stylex.css
···
1
1
@property --x-boxShadow { syntax: "*"; inherits: false;}
2
+
@property --x-aspectRatio { syntax: "*"; inherits: false;}
2
3
@property --x-gridTemplateRows { syntax: "*"; inherits: false;}
3
4
@property --x-gridTemplateColumns { syntax: "*"; inherits: false;}
4
5
@property --x-gridColumnStart { syntax: "*"; inherits: false;}
5
6
@property --x-gridColumnEnd { syntax: "*"; inherits: false;}
6
7
@property --x-gridRowStart { syntax: "*"; inherits: false;}
7
8
@property --x-gridRowEnd { syntax: "*"; inherits: false;}
8
-
@property --x-aspectRatio { syntax: "*"; inherits: false;}
9
9
@property --x-width { syntax: "*"; inherits: false;}
10
-
@property --x---items-per-row { syntax: "*"; inherits: false;}
10
+
@property --x-paddingLeft { syntax: "*"; inherits: false;}
11
11
@property --x-fontSize { syntax: "*"; inherits: false;}
12
12
@property --x-1gfbyet { syntax: "*"; inherits: false;}
13
13
@property --x-paddingRight { syntax: "*"; inherits: false;}
14
14
@property --x-height { syntax: "*"; inherits: false;}
15
+
@property --x---items-per-row { syntax: "*"; inherits: false;}
15
16
@property --x-transform { syntax: "*"; inherits: false;}
16
-
@property --x-paddingLeft { syntax: "*"; inherits: false;}
17
17
@property --thin-xk6k0je { syntax: "<number>"; inherits: true; initial-value: 100 }
18
18
@property --extralight-x12edb6v { syntax: "<number>"; inherits: true; initial-value: 200 }
19
19
@property --light-x1xrohu8 { syntax: "<number>"; inherits: true; initial-value: 300 }
···
237
237
.borderColor-xtdwfp3:has([data-hovered]):not([data-invalid]):not(#\#):not(#\#){border-color:var(--border3-xm42ywm)}
238
238
.gridTemplateAreas-xx842gn:has(label,[data-slider-output]):not(#\#):not(#\#){grid-template-areas:'label value-label' 'track track'}
239
239
@supports (corner-shape: squircle){.borderRadius-xdq5phb.borderRadius-xdq5phb:is(*) pre:not(#\#):not(#\#){border-radius:var(--_3xl-x1bwjc12)}}
240
-
@supports (corner-shape: squircle){.borderRadius-x4arbgl.borderRadius-x4arbgl:is([data-size=sm]):not(#\#):not(#\#){border-radius:var(--_3xl-x1bwjc12)}}
241
-
@supports (corner-shape: squircle){.borderRadius-x1sctp66.borderRadius-x1sctp66:is([data-size=md]):not(#\#):not(#\#){border-radius:var(--_3xl-x1bwjc12)}}
242
240
@supports (corner-shape: squircle){.borderRadius-xydlxy0.borderRadius-xydlxy0:is([data-size=lg]):not(#\#):not(#\#){border-radius:var(--_3xl-x1bwjc12)}}
241
+
@supports (corner-shape: squircle){.borderRadius-x1sctp66.borderRadius-x1sctp66:is([data-size=md]):not(#\#):not(#\#){border-radius:var(--_3xl-x1bwjc12)}}
242
+
@supports (corner-shape: squircle){.borderRadius-x4arbgl.borderRadius-x4arbgl:is([data-size=sm]):not(#\#):not(#\#){border-radius:var(--_3xl-x1bwjc12)}}
243
243
@supports (corner-shape: squircle){.borderRadius-x1w2x00y.borderRadius-x1w2x00y:is([data-size=xl]):not(#\#):not(#\#){border-radius:var(--_3xl-x1bwjc12)}}
244
244
.borderColor-x10hl8ol:hover:not(#\#):not(#\#){border-color:var(--border2-xavwyw3)}
245
245
.borderColor-x1jy64qq:hover:not(#\#):not(#\#){border-color:var(--border3-x16mdiod)}
···
509
509
.transitionDuration-x1g2r6go:not(#\#):not(#\#):not(#\#){transition-duration:.1s}
510
510
.transitionDuration-xpfv6me:not(#\#):not(#\#):not(#\#){transition-duration:var(--default-x1seeabg)}
511
511
.transitionDuration-xx08pzc:not(#\#):not(#\#):not(#\#){transition-duration:var(--fast-x1gssecm)}
512
+
.transitionDuration-xjfzak9:not(#\#):not(#\#):not(#\#){transition-duration:var(--slow-xc0p8py)}
512
513
.transitionDuration-xzr5fb6:not(#\#):not(#\#):not(#\#){transition-duration:var(--slow-xghckaq)}
513
514
.transitionProperty-xfagghw:not(#\#):not(#\#):not(#\#){transition-property:all}
514
515
.transitionProperty-x1eaenvl:not(#\#):not(#\#):not(#\#){transition-property:background-color,border-color,color}
···
583
584
.backgroundColor-xbmc7h8:is(:active,[data-pressed=true]):not(:disabled):not(#\#):not(#\#):not(#\#){background-color:var(--component3-x1isc7sq)}
584
585
.backgroundColor-xibgg82:hover:not(:has(* button:hover)):not(:disabled):not(#\#):not(#\#):not(#\#){background-color:var(--component3-x1isc7sq)}
585
586
.backgroundColor-x1n9l9xn:is([data-pressed=true]):not(#\#):not(#\#):not(#\#){background-color:var(--component3-x1isc7sq)}
586
-
.backgroundColor-x18u3sjz:is([data-dragging=true]):is([data-dragging=true]):not(#\#):not(#\#):not(#\#){background-color:var(--component3-x1isc7sq)}
587
587
.backgroundColor-xvke1tl:is([data-react-aria-pressable=true]:not([data-disabled]):active *):not(#\#):not(#\#):not(#\#){background-color:var(--component3-x1isc7sq)}
588
+
.backgroundColor-x18u3sjz:is([data-dragging=true]):is([data-dragging=true]):not(#\#):not(#\#):not(#\#){background-color:var(--component3-x1isc7sq)}
588
589
.backgroundColor-x1w0eppo:is([data-pressed]):not(#\#):not(#\#):not(#\#){background-color:var(--component3-x1isc7sq)}
589
590
.backgroundColor-x11hzcxw:is([data-pressed]):not([data-unavailable]):not(#\#):not(#\#):not(#\#)::before{background-color:var(--component3-x1isc7sq)}
590
591
.backgroundColor-xfj0oy5:is(:active,[data-pressed=true]):not(:disabled):not(#\#):not(#\#):not(#\#){background-color:var(--component3-x3irpq9)}
···
600
601
.backgroundColor-x1e0gckj:is([data-selection-start],[data-selection-end]):not([data-unavailable]):hover:not(#\#):not(#\#):not(#\#)::before{background-color:var(--component3-xvwaia1)}
601
602
.backgroundColor-xzrhb8f:is([data-variant=secondary] *):not(#\#):not(#\#):not(#\#){background-color:var(--solid1-x1yanih7)}
602
603
.backgroundColor-x17491x2:is([data-variant=critical] *):not(#\#):not(#\#):not(#\#){background-color:var(--solid1-x2pkv20)}
604
+
.backgroundColor-x1ck3tfv:hover:not(#\#):not(#\#):not(#\#)::before{background-color:var(--solid1-x6o1eyi)}
603
605
.backgroundColor-x1aw4n5j:is([data-selected=true] *):not(#\#):not(#\#):not(#\#){background-color:var(--solid1-x6o1eyi)}
604
606
.backgroundColor-x61hwtc:is([data-variant=primary] *):not(#\#):not(#\#):not(#\#){background-color:var(--solid1-x6o1eyi)}
605
-
.backgroundColor-x1ck3tfv:hover:not(#\#):not(#\#):not(#\#)::before{background-color:var(--solid1-x6o1eyi)}
606
607
.backgroundColor-xxpmrhf:is([data-variant=success] *):not(#\#):not(#\#):not(#\#){background-color:var(--solid1-xmemhk6)}
607
608
.backgroundColor-x2bbucx:hover:not(:has(* button:hover)):not(:disabled):not(#\#):not(#\#):not(#\#){background-color:var(--solid2-x1ba3nh8)}
608
609
.backgroundColor-xdx23yb:hover:not(:has(* button:hover)):not(:disabled):not(#\#):not(#\#):not(#\#){background-color:var(--solid2-x1dbywqs)}
···
627
628
.color-x3dk8ss:is([data-variant=destructive] *):not(#\#):not(#\#):not(#\#){color:var(--text1-xjn2lxg)}
628
629
.color-x15gqzh4:is([data-variant=critical] *):not(#\#):not(#\#):not(#\#){color:var(--text1-xjn2lxg)}
629
630
.color-xfg0ta2:is([data-breadcrumb][data-current] *):not(#\#):not(#\#):not(#\#){color:var(--text2-x1ztxw)}
630
-
.color-x1gaf1qe:is([data-hovered]):not(#\#):not(#\#):not(#\#){color:var(--text2-x1ztxw)}
631
631
.color-xis98h5:is([data-selected]):not(#\#):not(#\#):not(#\#){color:var(--text2-x1ztxw)}
632
+
.color-x1gaf1qe:is([data-hovered]):not(#\#):not(#\#):not(#\#){color:var(--text2-x1ztxw)}
632
633
.color-xjka5tq:is([data-hovered],[data-focused],[data-selected]):not(#\#):not(#\#):not(#\#){color:var(--text2-x1ztxw)}
633
634
.color-xat45n7:is([data-hovered]):not([data-unavailable]):not(#\#):not(#\#):not(#\#){color:var(--text2-x1ztxw)}
634
635
.color-x8zdt5v:is([data-selected]):not(#\#):not(#\#):not(#\#){color:var(--text2-x6gkmtf)}
···
679
680
.opacity-xz45kkc:is([aria-disabled=true] *):not(#\#):not(#\#):not(#\#){opacity:.5}
680
681
.opacity-x78oxnk:is([data-disabled=true] *):not(#\#):not(#\#):not(#\#){opacity:.5}
681
682
.opacity-xc6n1n6:is([data-outside-visible-range],[data-unavailable]):not(#\#):not(#\#):not(#\#){opacity:.5}
683
+
.opacity-xo3lgda:is([data-entering]):not(#\#):not(#\#):not(#\#){opacity:0}
684
+
.opacity-x1y3ytew:is([data-exiting]):not(#\#):not(#\#):not(#\#){opacity:0}
682
685
.opacity-x1xlq6hu:is([data-entering], [data-entering] > *):not(#\#):not(#\#):not(#\#){opacity:0}
683
686
.opacity-x15h3uk9:is([data-exiting], [data-exiting] > *):not(#\#):not(#\#):not(#\#){opacity:0}
684
-
.opacity-xo3lgda:is([data-entering]):not(#\#):not(#\#):not(#\#){opacity:0}
685
-
.opacity-x1y3ytew:is([data-exiting]):not(#\#):not(#\#):not(#\#){opacity:0}
686
687
.opacity-xdwziqs:is([data-heading-link]:hover *):not(#\#):not(#\#):not(#\#){opacity:1}
687
688
.opacity-x127iuxr:is([data-focus-visible]):not(#\#):not(#\#):not(#\#){opacity:1}
688
689
.opacity-x1f9km8m:is([data-react-aria-pressable=true]:hover:not([data-disabled]) *):not(#\#):not(#\#):not(#\#){opacity:1}
+3
-2
packages/hip-ui/src/components/aspect-ratio/index.tsx
+3
-2
packages/hip-ui/src/components/aspect-ratio/index.tsx
···
12
12
position: "relative",
13
13
},
14
14
rounded: {
15
+
// eslint-disable-next-line @stylexjs/valid-styles
16
+
cornerShape: "squircle",
15
17
borderBottomLeftRadius: {
16
18
default: radius["md"],
17
19
"@supports (corner-shape: squircle)": radius["3xl"],
···
28
30
default: radius["md"],
29
31
"@supports (corner-shape: squircle)": radius["3xl"],
30
32
},
31
-
cornerShape: "squircle",
32
33
},
33
34
imageContainer: {
34
35
inset: 0,
35
36
position: "absolute",
36
37
},
37
38
image: {
38
-
height: "100%",
39
39
objectFit: "cover",
40
+
height: "100%",
40
41
width: "100%",
41
42
},
42
43
});
+16
-15
packages/hip-ui/src/components/avatar/index.tsx
+16
-15
packages/hip-ui/src/components/avatar/index.tsx
···
15
15
16
16
const styles = stylex.create({
17
17
wrapper: {
18
-
alignItems: "center",
19
-
backgroundColor: uiColor.component1,
20
18
borderColor: uiColor.border1,
21
19
borderStyle: "solid",
22
20
borderWidth: 1,
21
+
overflow: "hidden",
22
+
alignItems: "center",
23
+
backgroundColor: uiColor.component1,
23
24
display: "flex",
24
25
justifyContent: "center",
25
-
overflow: "hidden",
26
26
27
+
// eslint-disable-next-line @stylexjs/valid-styles
28
+
cornerShape: "squircle",
27
29
borderRadius: {
28
-
":is([data-size=sm])": {
29
-
default: radius["sm"],
30
+
":is([data-size=lg])": {
31
+
default: radius["lg"],
30
32
"@supports (corner-shape: squircle)": radius["3xl"],
31
33
},
32
34
":is([data-size=md])": {
33
35
default: radius["md"],
34
36
"@supports (corner-shape: squircle)": radius["3xl"],
35
37
},
36
-
":is([data-size=lg])": {
37
-
default: radius["lg"],
38
+
":is([data-size=sm])": {
39
+
default: radius["sm"],
38
40
"@supports (corner-shape: squircle)": radius["3xl"],
39
41
},
40
42
":is([data-size=xl])": {
···
42
44
"@supports (corner-shape: squircle)": radius["3xl"],
43
45
},
44
46
},
45
-
cornerShape: "squircle",
46
47
height: {
47
-
":is([data-size=sm])": spacing["6"],
48
-
":is([data-size=md])": spacing["8"],
49
48
":is([data-size=lg])": spacing["10"],
49
+
":is([data-size=md])": spacing["8"],
50
+
":is([data-size=sm])": spacing["6"],
50
51
":is([data-size=xl])": spacing["14"],
51
52
},
52
53
width: {
53
-
":is([data-size=sm])": spacing["6"],
54
+
":is([data-size=lg])": spacing["10"],
54
55
":is([data-size=md])": spacing["8"],
55
-
":is([data-size=lg])": spacing["10"],
56
+
":is([data-size=sm])": spacing["6"],
56
57
":is([data-size=xl])": spacing["14"],
57
58
},
58
59
},
59
60
image: {
60
-
height: "100%",
61
61
objectFit: "cover",
62
62
objectPosition: "center",
63
+
height: "100%",
63
64
width: "100%",
64
65
},
65
66
fallback: {
···
69
70
lineHeight: lineHeight["none"],
70
71
71
72
fontSize: {
72
-
":is([data-size=sm] *)": fontSize["sm"],
73
+
":is([data-size=lg] *)": fontSize["lg"],
73
74
":is([data-size=md] *)": fontSize["base"],
74
-
":is([data-size=lg] *)": fontSize["lg"],
75
+
":is([data-size=sm] *)": fontSize["sm"],
75
76
":is([data-size=xl] *)": fontSize["xl"],
76
77
},
77
78
},
+19
-4
packages/hip-ui/src/components/segmented-control/index.tsx
+19
-4
packages/hip-ui/src/components/segmented-control/index.tsx
···
11
11
} from "react-aria-components";
12
12
13
13
import { SizeContext } from "../context";
14
-
import { animationDuration } from "../theme/animations.stylex";
14
+
import { animationDuration } from "../theme/animations-duration.stylex";
15
15
import { radius } from "../theme/radius.stylex";
16
16
import { uiColor } from "../theme/semantic-color.stylex";
17
17
import { shadow } from "../theme/shadow.stylex";
···
20
20
21
21
const styles = stylex.create({
22
22
group: {
23
+
// eslint-disable-next-line @stylexjs/valid-styles
24
+
cornerShape: "squircle",
23
25
padding: spacing["1"],
24
-
borderRadius: radius.lg,
26
+
borderRadius: {
27
+
default: radius["lg"],
28
+
"@supports (corner-shape: squircle)": radius["4xl"],
29
+
},
25
30
gap: spacing["2"],
26
31
alignItems: "center",
27
32
backgroundColor: uiColor.component1,
···
35
40
},
36
41
},
37
42
item: {
38
-
borderRadius: radius.md,
43
+
// eslint-disable-next-line @stylexjs/valid-styles
44
+
cornerShape: "squircle",
45
+
borderRadius: {
46
+
default: radius["md"],
47
+
"@supports (corner-shape: squircle)": radius["3xl"],
48
+
},
39
49
borderWidth: 0,
40
50
alignItems: "center",
41
51
backgroundColor: "transparent",
···
68
78
},
69
79
},
70
80
selectionIndicator: {
71
-
borderRadius: radius.md,
81
+
// eslint-disable-next-line @stylexjs/valid-styles
82
+
cornerShape: "squircle",
83
+
borderRadius: {
84
+
default: radius["md"],
85
+
"@supports (corner-shape: squircle)": radius["3xl"],
86
+
},
72
87
backgroundColor: uiColor.bgSubtle,
73
88
boxShadow: shadow.sm,
74
89
position: "absolute",
+4
packages/hip-ui/src/components/segmented-control/segmented-control-config.ts
+4
packages/hip-ui/src/components/segmented-control/segmented-control-config.ts
+4
-3
packages/hip-ui/src/components/skeleton/index.tsx
+4
-3
packages/hip-ui/src/components/skeleton/index.tsx
···
20
20
const styles = stylex.create({
21
21
group: {},
22
22
base: {
23
+
overflow: "hidden",
23
24
backgroundColor: uiColor.component1,
24
25
boxShadow: shadow["insetSm"],
25
-
overflow: "hidden",
26
26
position: "relative",
27
27
},
28
28
shimmer: {
···
40
40
transparent 100%
41
41
)`,
42
42
backgroundSize: "100%",
43
+
position: "absolute",
43
44
bottom: 0,
44
45
left: 0,
45
-
position: "absolute",
46
46
right: 0,
47
47
top: 0,
48
48
width: "300%",
···
51
51
borderRadius: radius.full,
52
52
},
53
53
rectangle: {
54
+
// eslint-disable-next-line @stylexjs/valid-styles
55
+
cornerShape: "squircle",
54
56
borderRadius: {
55
57
default: radius["md"],
56
58
"@supports (corner-shape: squircle)": radius["4xl"],
57
59
},
58
-
cornerShape: "squircle",
59
60
},
60
61
sizeSm: {
61
62
height: spacing["8"],
+22
-21
packages/hip-ui/src/components/text-area/index.tsx
+22
-21
packages/hip-ui/src/components/text-area/index.tsx
···
19
19
20
20
const styles = stylex.create({
21
21
wrapper: {
22
+
gap: spacing["2"],
22
23
display: "flex",
23
24
flexDirection: "column",
24
-
gap: spacing["2"],
25
25
},
26
26
addon: {
27
27
color: ui.textDim,
···
30
30
minWidth: spacing["8"],
31
31
paddingLeft: { ":first-child": spacing["0.5"] },
32
32
paddingRight: {
33
-
":last-child": spacing["2"],
34
33
":last-child:has(svg)": spacing["0.5"],
34
+
":last-child": spacing["2"],
35
35
},
36
36
37
+
gap: spacing["0.5"],
37
38
alignItems: "center",
38
39
display: "flex",
39
-
gap: spacing["0.5"],
40
40
justifyContent: "center",
41
41
42
42
// eslint-disable-next-line @stylexjs/no-legacy-contextual-styles, @stylexjs/valid-styles
43
43
":is(*) svg": {
44
44
flexShrink: 0,
45
-
height: spacing["4"],
46
45
pointerEvents: "none",
46
+
height: spacing["4"],
47
47
width: spacing["4"],
48
48
},
49
49
},
50
50
inputWrapper: {
51
+
// eslint-disable-next-line @stylexjs/valid-styles
52
+
cornerShape: "squircle",
51
53
borderRadius: {
52
54
default: radius["md"],
53
55
"@supports (corner-shape: squircle)": radius["2xl"],
54
56
},
55
-
cornerShape: "squircle",
56
57
boxSizing: "border-box",
57
58
display: "flex",
58
59
flexGrow: 1,
···
66
67
borderWidth: 1,
67
68
},
68
69
input: {
70
+
borderWidth: 0,
71
+
outline: "none",
69
72
backgroundColor: "transparent",
70
-
borderWidth: 0,
71
73
boxSizing: "border-box",
72
74
color: {
73
75
"::placeholder": uiColor.text1,
74
76
},
75
77
flexGrow: 1,
76
78
fontFamily: fontFamily["sans"],
77
-
outline: "none",
78
79
resize: "none",
79
80
80
81
fontSize: {
82
+
":is([data-size=lg])": fontSize["base"],
83
+
":is([data-size=md])": fontSize["sm"],
81
84
":is([data-size=sm])": fontSize["xs"],
82
-
":is([data-size=md])": fontSize["sm"],
83
-
":is([data-size=lg])": fontSize["base"],
84
85
},
85
86
lineHeight: {
86
-
":is([data-size=sm])": lineHeight["xs"],
87
+
":is([data-size=lg])": lineHeight["base"],
87
88
":is([data-size=md])": lineHeight["sm"],
88
-
":is([data-size=lg])": lineHeight["base"],
89
+
":is([data-size=sm])": lineHeight["xs"],
89
90
},
90
91
minHeight: {
91
-
":is([data-size=sm])": spacing["6"],
92
-
":is([data-size=md])": spacing["8"],
93
92
":is([data-size=lg])": spacing["10"],
93
+
":is([data-size=md])": spacing["8"],
94
+
":is([data-size=sm])": spacing["6"],
94
95
},
95
96
paddingBottom: {
96
-
":is([data-size=sm])": spacing["1"],
97
+
":is([data-size=lg])": spacing["3"],
97
98
":is([data-size=md])": spacing["2"],
98
-
":is([data-size=lg])": spacing["3"],
99
+
":is([data-size=sm])": spacing["1"],
99
100
},
100
101
paddingLeft: {
102
+
":is([data-size=lg])": spacing["3"],
103
+
":is([data-size=md])": spacing["2"],
101
104
":is([data-size=sm])": spacing["1"],
102
-
":is([data-size=md])": spacing["2"],
103
-
":is([data-size=lg])": spacing["3"],
104
105
},
105
106
paddingRight: {
106
-
":is([data-size=sm])": spacing["1"],
107
+
":is([data-size=lg])": spacing["3"],
107
108
":is([data-size=md])": spacing["2"],
108
-
":is([data-size=lg])": spacing["3"],
109
+
":is([data-size=sm])": spacing["1"],
109
110
},
110
111
paddingTop: {
112
+
":is([data-size=lg])": spacing["3"],
113
+
":is([data-size=md])": spacing["2"],
111
114
":is([data-size=sm])": spacing["1"],
112
-
":is([data-size=md])": spacing["2"],
113
-
":is([data-size=lg])": spacing["3"],
114
115
},
115
116
},
116
117
resizable: {
+8
packages/hip-ui/src/components/theme/animations-duration.stylex.tsx
+8
packages/hip-ui/src/components/theme/animations-duration.stylex.tsx
+1
-1
packages/hip-ui/src/components/theme/animations.stylex.tsx
+1
-1
packages/hip-ui/src/components/theme/animations.stylex.tsx
+6
-5
packages/hip-ui/src/components/tooltip/index.tsx
+6
-5
packages/hip-ui/src/components/tooltip/index.tsx
···
18
18
19
19
const tooltipStyle = stylex.create({
20
20
content: {
21
-
backgroundColor: uiInverted.bg,
21
+
// eslint-disable-next-line @stylexjs/valid-styles
22
+
cornerShape: "squircle",
22
23
borderRadius: {
23
24
default: radius["md"],
24
25
"@supports (corner-shape: squircle)": radius["full"],
25
26
},
26
-
cornerShape: "squircle",
27
+
backgroundColor: uiInverted.bg,
27
28
boxShadow: shadow["sm"],
28
29
color: uiInverted.text1,
29
30
fontFamily: fontFamily["sans"],
···
35
36
paddingTop: spacing["1"],
36
37
37
38
"--origin": {
38
-
":is([data-placement=top])": "translateY(4px)",
39
39
":is([data-placement=bottom])": "translateY(-4px)",
40
40
":is([data-placement=left])": "translateX(4px)",
41
41
":is([data-placement=right])": "translateX(-4px)",
42
+
":is([data-placement=top])": "translateY(4px)",
42
43
},
43
44
opacity: {
44
45
default: 1,
···
53
54
transitionProperty: "transform, opacity",
54
55
},
55
56
caret: {
56
-
display: "flex",
57
57
fill: uiInverted.bg,
58
+
display: "flex",
58
59
},
59
60
arrow: {
60
61
transform: {
61
62
[":is([data-placement=bottom] *)"]: "rotate(180deg)",
62
-
[":is([data-placement=top] *)"]: "rotate(0deg)",
63
63
[":is([data-placement=left] *)"]: "rotate(90deg)",
64
64
[":is([data-placement=right] *)"]: "rotate(-90deg)",
65
+
[":is([data-placement=top] *)"]: "rotate(0deg)",
65
66
},
66
67
},
67
68
});
+15
-10
packages/hip-ui/src/components/tree/index.tsx
+15
-10
packages/hip-ui/src/components/tree/index.tsx
···
35
35
width: `calc((var(--tree-item-level, 0) - 1) * ${spacing["3"]})`,
36
36
},
37
37
content: {
38
+
gap: spacing["2"],
38
39
alignItems: "center",
39
40
display: "flex",
40
41
flexGrow: 1,
41
-
gap: spacing["2"],
42
42
},
43
43
hidden: {
44
44
opacity: 0,
45
45
visibility: "hidden",
46
46
},
47
47
chevron: {
48
+
borderWidth: 0,
48
49
backgroundColor: "transparent",
49
-
borderWidth: 0,
50
+
transform: {
51
+
default: "rotate(0deg)",
52
+
":is([aria-expanded=true] *)": "rotate(90deg)",
53
+
},
50
54
paddingBottom: 0,
51
55
paddingLeft: 0,
52
56
paddingRight: 0,
53
57
paddingTop: 0,
54
-
transform: {
55
-
default: "rotate(0deg)",
56
-
":is([aria-expanded=true] *)": "rotate(90deg)",
57
-
},
58
58
59
59
// eslint-disable-next-line @stylexjs/no-legacy-contextual-styles, @stylexjs/valid-styles
60
60
":is(*) svg": {
···
67
67
marginTop: `calc(${spacing["2"]} * -1)`,
68
68
},
69
69
dragButtonWrapper: {
70
-
left: 0,
71
70
opacity: {
72
71
default: 0,
73
-
":hover": 1,
74
72
":is([data-react-aria-pressable=true]:hover:not([data-disabled]) *)": 1,
73
+
":hover": 1,
75
74
},
76
75
position: "absolute",
77
-
top: "50%",
78
76
transform: "translate(-100%, -50%)",
79
77
transitionDuration: animationDuration.fast,
80
78
transitionProperty: "opacity",
81
79
transitionTimingFunction: "ease-in-out",
80
+
left: 0,
81
+
top: "50%",
82
82
},
83
83
dragButton: {
84
+
// eslint-disable-next-line @stylexjs/valid-styles
85
+
cornerShape: "squircle",
86
+
borderRadius: {
87
+
default: radius["sm"],
88
+
"@supports (corner-shape: squircle)": radius["2xl"],
89
+
},
84
90
alignItems: "center",
85
-
borderRadius: radius["sm"],
86
91
display: "flex",
87
92
justifyContent: "center",
88
93
+13
-8
packages/hip-ui/src/components/typography/index.tsx
+13
-8
packages/hip-ui/src/components/typography/index.tsx
···
15
15
16
16
const styles = stylex.create({
17
17
blockquote: {
18
+
color: ui.textDim,
19
+
fontFamily: fontFamily["serif"],
18
20
borderLeftColor: ui.borderDim,
19
21
borderLeftStyle: "solid",
20
22
borderLeftWidth: 1,
21
-
color: ui.textDim,
22
-
fontFamily: fontFamily["serif"],
23
23
marginBottom: 0,
24
24
marginLeft: spacing["2"],
25
25
marginRight: 0,
···
27
27
paddingLeft: spacing["4"],
28
28
},
29
29
unorderedList: {
30
+
margin: 0,
31
+
gap: spacing["3"],
30
32
display: "flex",
31
33
flexDirection: "column",
32
-
gap: spacing["3"],
33
34
listStyleType: "disc",
34
-
margin: 0,
35
35
paddingLeft: spacing["8"],
36
36
},
37
37
orderedList: {
38
+
margin: 0,
39
+
gap: spacing["3"],
38
40
display: "flex",
39
41
flexDirection: "column",
40
-
gap: spacing["3"],
41
42
listStyleType: "decimal",
42
-
margin: 0,
43
43
paddingLeft: spacing["8"],
44
44
},
45
45
listItem: {
···
49
49
paddingLeft: spacing["1"],
50
50
},
51
51
inlineCode: {
52
-
borderRadius: radius["sm"],
52
+
// eslint-disable-next-line @stylexjs/valid-styles
53
+
cornerShape: "squircle",
54
+
borderRadius: {
55
+
default: radius["sm"],
56
+
"@supports (corner-shape: squircle)": radius["2xl"],
57
+
},
53
58
fontSize: "0.95em",
59
+
position: "relative",
54
60
paddingBottom: spacing["1"],
55
61
paddingLeft: spacing["1"],
56
62
paddingRight: spacing["1"],
57
63
paddingTop: spacing["1"],
58
-
position: "relative",
59
64
top: "-0.01em",
60
65
},
61
66
underline: {