A design system in a box.
hip-ui.tngl.io/docs/introduction
add video component
+951
-281
+1
apps/docs/package.json
+1
apps/docs/package.json
+4
-4
apps/docs/scripts/export-markdown.mjs
+4
-4
apps/docs/scripts/export-markdown.mjs
···
1
1
import { glob } from "glob";
2
2
import { JSDOM } from "jsdom";
3
3
import { NodeHtmlMarkdown } from "node-html-markdown";
4
-
import path from "node:path";
5
4
import { readFile, rm, writeFile } from "node:fs/promises";
5
+
import path from "node:path";
6
6
7
7
const distClientDir = path.resolve("dist/client");
8
8
···
15
15
}
16
16
17
17
function escapeTableCellPipes(text) {
18
-
return text.replaceAll("|", "\\|");
18
+
return text.replaceAll("|", String.raw`\|`);
19
19
}
20
20
21
21
function normalizeInlineWhitespace(text) {
22
-
return text.replace(/\s+/g, " ").trim();
22
+
return text.replaceAll(/\s+/g, " ").trim();
23
23
}
24
24
25
25
function normalizeCodeBlocks(markdownRoot) {
···
60
60
61
61
function normalizeMarkdown(markdown) {
62
62
return markdown
63
-
.replace(/\n{3,}/g, "\n\n")
63
+
.replaceAll(/\n{3,}/g, "\n\n")
64
64
.trim()
65
65
.concat("\n");
66
66
}
+16
-4
apps/docs/src/components/alert/index.tsx
+16
-4
apps/docs/src/components/alert/index.tsx
···
104
104
paddingRight: horizontalSpace["md"],
105
105
},
106
106
content: {
107
-
gridArea: "content",
107
+
gridColumnEnd: 'content',
108
+
gridColumnStart: 'content',
109
+
gridRowEnd: 'content',
110
+
gridRowStart: 'content',
108
111
gap: gap["xl"],
109
112
display: "flex",
110
113
flexDirection: "column",
···
113
116
paddingTop: verticalSpace["xxs"],
114
117
},
115
118
icon: {
116
-
gridArea: "icon",
119
+
gridColumnEnd: 'icon',
120
+
gridColumnStart: 'icon',
121
+
gridRowEnd: 'icon',
122
+
gridRowStart: 'icon',
117
123
alignItems: "center",
118
124
display: "flex",
119
125
flexShrink: 0,
···
129
135
},
130
136
},
131
137
action: {
132
-
gridArea: "action",
138
+
gridColumnEnd: 'action',
139
+
gridColumnStart: 'action',
140
+
gridRowEnd: 'action',
141
+
gridRowStart: 'action',
133
142
gap: gap["md"],
134
143
alignItems: "center",
135
144
alignSelf: "center",
···
137
146
flexShrink: 0,
138
147
},
139
148
closeButton: {
140
-
gridArea: "close",
149
+
gridColumnEnd: 'close',
150
+
gridColumnStart: 'close',
151
+
gridRowEnd: 'close',
152
+
gridRowStart: 'close',
141
153
flexShrink: 0,
142
154
marginBottom: `calc(${verticalSpace["xxs"]} * -1)`,
143
155
marginTop: `calc(${verticalSpace["xxs"]} * -1)`,
+2
-2
apps/docs/src/components/avatar/index.tsx
+2
-2
apps/docs/src/components/avatar/index.tsx
+14
-5
apps/docs/src/components/card/index.tsx
+14
-5
apps/docs/src/components/card/index.tsx
···
80
80
paddingBottom: verticalSpace["5xl"],
81
81
},
82
82
cardHeaderAction: {
83
-
gridArea: "action",
83
+
gridColumnEnd: 'action',
84
+
gridColumnStart: 'action',
85
+
gridRowEnd: 'action',
86
+
gridRowStart: 'action',
84
87
gap: gap["xs"],
85
88
display: "flex",
86
89
justifyContent: "flex-end",
···
90
93
textBoxEdge: "cap alphabetic",
91
94
// eslint-disable-next-line @stylexjs/valid-styles
92
95
textBoxTrim: "trim-both",
93
-
gridArea: "title",
96
+
gridColumnEnd: 'title',
97
+
gridColumnStart: 'title',
98
+
gridRowEnd: 'title',
99
+
gridRowStart: 'title',
94
100
gap: gap["xl"],
95
101
alignItems: "center",
96
102
display: "flex",
···
103
109
fontWeight: fontWeight["bold"],
104
110
},
105
111
cardDescription: {
106
-
gridArea: "description",
112
+
gridColumnEnd: 'description',
113
+
gridColumnStart: 'description',
114
+
gridRowEnd: 'description',
115
+
gridRowStart: 'description',
107
116
marginBottom: 0,
108
117
marginLeft: 0,
109
-
marginRight: 0,
110
118
fontSize: fontSize["sm"],
111
-
marginTop: 0,
119
+
marginRight: 0,
112
120
fontWeight: fontWeight["normal"],
121
+
marginTop: 0,
113
122
lineHeight: lineHeight["sm"],
114
123
},
115
124
cardBody: {
+2
-2
apps/docs/src/components/color-picker/index.tsx
+2
-2
apps/docs/src/components/color-picker/index.tsx
···
52
52
marginTop: 0,
53
53
paddingBottom: 0,
54
54
paddingLeft: 0,
55
-
paddingRight: 0,
56
55
borderWidth: 0,
57
-
paddingTop: 0,
56
+
paddingRight: 0,
58
57
gap: {
59
58
default: gap["md"],
60
59
":is([data-size=sm])": sizeSpace["xxs"],
61
60
},
61
+
paddingTop: 0,
62
62
alignItems: "center",
63
63
backgroundColor: "transparent",
64
64
display: "flex",
+12
-3
apps/docs/src/components/color-slider/index.tsx
+12
-3
apps/docs/src/components/color-slider/index.tsx
···
29
29
flexDirection: "column",
30
30
},
31
31
label: {
32
-
gridArea: "label",
32
+
gridColumnEnd: 'label',
33
+
gridColumnStart: 'label',
34
+
gridRowEnd: 'label',
35
+
gridRowStart: 'label',
33
36
},
34
37
valueLabel: {
35
-
gridArea: "value-label",
38
+
gridColumnEnd: 'value-label',
39
+
gridColumnStart: 'value-label',
40
+
gridRowEnd: 'value-label',
41
+
gridRowStart: 'value-label',
36
42
color: uiColor.text1,
37
43
fontVariantNumeric: "tabular-nums",
38
44
justifySelf: "flex-end",
···
49
55
},
50
56
},
51
57
track: {
52
-
gridArea: "track",
58
+
gridColumnEnd: 'track',
59
+
gridColumnStart: 'track',
60
+
gridRowEnd: 'track',
61
+
gridRowStart: 'track',
53
62
borderRadius: radius.full,
54
63
cornerShape: "squircle",
55
64
height: {
+4
-1
apps/docs/src/components/color-wheel/index.tsx
+4
-1
apps/docs/src/components/color-wheel/index.tsx
+2
-2
apps/docs/src/components/disclosure-group/index.tsx
+2
-2
apps/docs/src/components/disclosure-group/index.tsx
+2
-2
apps/docs/src/components/disclosure/index.tsx
+2
-2
apps/docs/src/components/disclosure/index.tsx
···
39
39
":is([data-size=md] *)": sizeSpace["xxs"],
40
40
":is([data-size=sm] *)": sizeSpace["sm"],
41
41
},
42
+
borderRadius: radius.lg,
42
43
paddingRight: {
43
44
":is([data-size=lg] *)": sizeSpace["md"],
44
45
":is([data-size=md] *)": sizeSpace["xxs"],
45
46
":is([data-size=sm] *)": sizeSpace["sm"],
46
47
},
47
-
borderRadius: radius.lg,
48
+
borderWidth: 0,
48
49
paddingTop: {
49
50
":is([data-size=lg] *)": sizeSpace["md"],
50
51
":is([data-size=md] *)": sizeSpace["xxs"],
51
52
":is([data-size=sm] *)": sizeSpace["sm"],
52
53
},
53
-
borderWidth: 0,
54
54
55
55
cornerShape: "squircle",
56
56
gap: gap["md"],
+20
-8
apps/docs/src/components/empty-state/index.tsx
+20
-8
apps/docs/src/components/empty-state/index.tsx
···
73
73
textAlign: "center",
74
74
},
75
75
image: {
76
-
gridArea: "image",
76
+
gridColumnEnd: 'image',
77
+
gridColumnStart: 'image',
78
+
gridRowEnd: 'image',
79
+
gridRowStart: 'image',
77
80
alignItems: "center",
78
81
display: "flex",
79
82
justifyContent: "center",
···
82
85
width: "var(--empty-state-image-size)",
83
86
},
84
87
title: {
85
-
gridArea: "title",
88
+
gridColumnEnd: 'title',
89
+
gridColumnStart: 'title',
90
+
gridRowEnd: 'title',
91
+
gridRowStart: 'title',
86
92
marginBottom: 0,
87
93
marginLeft: 0,
88
-
marginRight: 0,
89
94
fontSize: {
90
95
":is([data-empty-state-size='lg'] *)": fontSize["2xl"],
91
96
":is([data-empty-state-size='md'] *)": fontSize["xl"],
92
97
":is([data-empty-state-size='sm'] *)": fontSize["lg"],
93
98
},
99
+
marginRight: 0,
100
+
fontWeight: fontWeight["semibold"],
94
101
marginTop: 0,
95
-
fontWeight: fontWeight["semibold"],
96
102
},
97
103
description: {
98
-
gridArea: "description",
104
+
gridColumnEnd: 'description',
105
+
gridColumnStart: 'description',
106
+
gridRowEnd: 'description',
107
+
gridRowStart: 'description',
99
108
marginBottom: 0,
100
109
marginLeft: 0,
101
-
marginRight: 0,
102
110
fontSize: fontSize["sm"],
103
-
marginTop: 0,
111
+
marginRight: 0,
104
112
fontWeight: fontWeight["normal"],
113
+
marginTop: 0,
105
114
maxWidth: {
106
115
":is([data-empty-state-size=lg])": "480px",
107
116
":is([data-empty-state-size=md])": "400px",
···
109
118
},
110
119
},
111
120
actions: {
112
-
gridArea: "actions",
121
+
gridColumnEnd: 'actions',
122
+
gridColumnStart: 'actions',
123
+
gridRowEnd: 'actions',
124
+
gridRowStart: 'actions',
113
125
gap: gap["md"],
114
126
alignItems: "center",
115
127
display: "flex",
+2
-2
apps/docs/src/components/file-drop-zone/index.tsx
+2
-2
apps/docs/src/components/file-drop-zone/index.tsx
···
39
39
dropZone: {
40
40
paddingBottom: verticalSpace["2xl"],
41
41
paddingLeft: horizontalSpace["2xl"],
42
-
paddingRight: horizontalSpace["2xl"],
43
42
borderColor: {
44
43
default: uiColor.border3,
45
44
":is([data-drop-target])": primaryColor.solid1,
46
45
},
46
+
paddingRight: horizontalSpace["2xl"],
47
+
borderRadius: radius.lg,
47
48
paddingTop: verticalSpace["2xl"],
48
-
borderRadius: radius.lg,
49
49
borderStyle: {
50
50
default: "dashed",
51
51
":is([data-drop-target])": "solid",
+2
-2
apps/docs/src/components/image-cropper/index.tsx
+2
-2
apps/docs/src/components/image-cropper/index.tsx
+12
-3
apps/docs/src/components/meter/index.tsx
+12
-3
apps/docs/src/components/meter/index.tsx
···
28
28
display: "grid",
29
29
},
30
30
label: {
31
-
gridArea: "label",
31
+
gridColumnEnd: 'label',
32
+
gridColumnStart: 'label',
33
+
gridRowEnd: 'label',
34
+
gridRowStart: 'label',
32
35
},
33
36
bar: {
34
-
gridArea: "bar",
37
+
gridColumnEnd: 'bar',
38
+
gridColumnStart: 'bar',
39
+
gridRowEnd: 'bar',
40
+
gridRowStart: 'bar',
35
41
borderRadius: radius.full,
36
42
overflow: "hidden",
37
43
backgroundColor: {
···
57
63
},
58
64
59
65
valueLabel: {
60
-
gridArea: "value-label",
66
+
gridColumnEnd: 'value-label',
67
+
gridColumnStart: 'value-label',
68
+
gridRowEnd: 'value-label',
69
+
gridRowStart: 'value-label',
61
70
color: uiColor.text1,
62
71
fontVariantNumeric: "tabular-nums",
63
72
justifySelf: "flex-end",
+2
-2
apps/docs/src/components/number-field/index.tsx
+2
-2
apps/docs/src/components/number-field/index.tsx
+16
-4
apps/docs/src/components/page/Page.tsx
+16
-4
apps/docs/src/components/page/Page.tsx
···
127
127
textBoxEdge: "cap alphabetic",
128
128
// eslint-disable-next-line @stylexjs/valid-styles
129
129
textBoxTrim: "trim-both",
130
-
gridArea: "title",
130
+
gridColumnEnd: 'title',
131
+
gridColumnStart: 'title',
132
+
gridRowEnd: 'title',
133
+
gridRowStart: 'title',
131
134
flexGrow: 1,
132
135
fontFamily: fontFamily["title"],
133
136
minWidth: 0,
134
137
},
135
138
description: {
136
-
gridArea: "description",
139
+
gridColumnEnd: 'description',
140
+
gridColumnStart: 'description',
141
+
gridRowEnd: 'description',
142
+
gridRowStart: 'description',
137
143
display: {
138
144
default: "none",
139
145
[breakpoints.sm]: "block",
···
144
150
flexShrink: 0,
145
151
},
146
152
largeActions: {
147
-
gridArea: "actions",
153
+
gridColumnEnd: 'actions',
154
+
gridColumnStart: 'actions',
155
+
gridRowEnd: 'actions',
156
+
gridRowStart: 'actions',
148
157
gap: {
149
158
default: gap["xs"],
150
159
[breakpoints.sm]: sizeSpace["sm"],
···
152
161
minHeight: sizeSpace["3xl"],
153
162
},
154
163
icon: {
155
-
gridArea: "icon",
164
+
gridColumnEnd: 'icon',
165
+
gridColumnStart: 'icon',
166
+
gridRowEnd: 'icon',
167
+
gridRowStart: 'icon',
156
168
borderRadius: radius.lg,
157
169
// eslint-disable-next-line @stylexjs/valid-styles, @stylexjs/sort-keys
158
170
cornerShape: "squircle",
+12
-3
apps/docs/src/components/progress-bar/index.tsx
+12
-3
apps/docs/src/components/progress-bar/index.tsx
···
32
32
display: "grid",
33
33
},
34
34
label: {
35
-
gridArea: "label",
35
+
gridColumnEnd: 'label',
36
+
gridColumnStart: 'label',
37
+
gridRowEnd: 'label',
38
+
gridRowStart: 'label',
36
39
},
37
40
bar: {
38
-
gridArea: "bar",
41
+
gridColumnEnd: 'bar',
42
+
gridColumnStart: 'bar',
43
+
gridRowEnd: 'bar',
44
+
gridRowStart: 'bar',
39
45
borderRadius: radius.full,
40
46
overflow: "hidden",
41
47
backgroundColor: uiColor.component2,
···
48
54
},
49
55
},
50
56
valueLabel: {
51
-
gridArea: "value-label",
57
+
gridColumnEnd: 'value-label',
58
+
gridColumnStart: 'value-label',
59
+
gridRowEnd: 'value-label',
60
+
gridRowStart: 'value-label',
52
61
color: uiColor.text1,
53
62
fontVariantNumeric: "tabular-nums",
54
63
justifySelf: "flex-end",
+2
-2
apps/docs/src/components/separator/index.tsx
+2
-2
apps/docs/src/components/separator/index.tsx
+12
-3
apps/docs/src/components/slider/index.tsx
+12
-3
apps/docs/src/components/slider/index.tsx
···
35
35
},
36
36
},
37
37
track: {
38
-
gridArea: "track",
38
+
gridColumnEnd: 'track',
39
+
gridColumnStart: 'track',
40
+
gridRowEnd: 'track',
41
+
gridRowStart: 'track',
39
42
flexGrow: {
40
43
":is([data-orientation=vertical] *)": 1,
41
44
},
···
164
167
},
165
168
},
166
169
valueLabel: {
167
-
gridArea: "value-label",
170
+
gridColumnEnd: 'value-label',
171
+
gridColumnStart: 'value-label',
172
+
gridRowEnd: 'value-label',
173
+
gridRowStart: 'value-label',
168
174
color: uiColor.text1,
169
175
fontSize: fontSize["sm"],
170
176
fontVariantNumeric: "tabular-nums",
···
172
178
lineHeight: lineHeight["sm"],
173
179
},
174
180
label: {
175
-
gridArea: "label",
181
+
gridColumnEnd: 'label',
182
+
gridColumnStart: 'label',
183
+
gridRowEnd: 'label',
184
+
gridRowStart: 'label',
176
185
},
177
186
});
178
187
+2
-2
apps/docs/src/components/star-rating/index.tsx
+2
-2
apps/docs/src/components/star-rating/index.tsx
···
40
40
marginTop: 0,
41
41
paddingBottom: 0,
42
42
paddingLeft: 0,
43
-
paddingRight: 0,
44
43
borderColor: "transparent",
45
-
paddingTop: 0,
44
+
paddingRight: 0,
46
45
borderStyle: "none",
46
+
paddingTop: 0,
47
47
borderWidth: 0,
48
48
alignItems: "center",
49
49
backgroundColor: "transparent",
+1
-1
apps/docs/src/components/table-of-contents/index.tsx
+1
-1
apps/docs/src/components/table-of-contents/index.tsx
+2
-2
apps/docs/src/components/table/index.tsx
+2
-2
apps/docs/src/components/table/index.tsx
+8
-8
apps/docs/src/components/tabs/index.tsx
+8
-8
apps/docs/src/components/tabs/index.tsx
···
86
86
":is([data-size=md] *)": sizeSpace["md"],
87
87
":is([data-size=sm] *)": sizeSpace["xxs"],
88
88
},
89
+
borderWidth: 0,
89
90
paddingRight: {
90
91
":is([data-size=lg] *)": sizeSpace["lg"],
91
92
":is([data-size=md] *)": sizeSpace["md"],
92
93
":is([data-size=sm] *)": sizeSpace["xxs"],
93
94
},
94
-
borderWidth: 0,
95
+
outline: "none",
95
96
paddingTop: {
96
97
":is([data-size=lg] *)": sizeSpace["md"],
97
98
":is([data-size=md] *)": sizeSpace["xxs"],
98
99
":is([data-size=sm] *)": sizeSpace["sm"],
99
100
},
100
-
outline: "none",
101
101
alignItems: "center",
102
102
backgroundColor: "transparent",
103
103
color: {
···
192
192
":is([data-size=md] *)": sizeSpace["md"],
193
193
":is([data-size=sm] *)": sizeSpace["xxs"],
194
194
},
195
+
outline: "none",
195
196
paddingRight: {
196
-
":is([data-size=lg] *)": sizeSpace["lg"],
197
-
":is([data-size=md] *)": sizeSpace["md"],
198
-
":is([data-size=sm] *)": sizeSpace["xxs"],
199
-
},
200
-
outline: "none",
201
-
paddingTop: {
202
197
":is([data-size=lg] *)": sizeSpace["lg"],
203
198
":is([data-size=md] *)": sizeSpace["md"],
204
199
":is([data-size=sm] *)": sizeSpace["xxs"],
···
207
202
":is([data-size=lg] *)": fontSize["lg"],
208
203
":is([data-size=md] *)": fontSize["base"],
209
204
":is([data-size=sm] *)": fontSize["sm"],
205
+
},
206
+
paddingTop: {
207
+
":is([data-size=lg] *)": sizeSpace["lg"],
208
+
":is([data-size=md] *)": sizeSpace["md"],
209
+
":is([data-size=sm] *)": sizeSpace["xxs"],
210
210
},
211
211
},
212
212
focusRing: {
+2
-2
apps/docs/src/components/tag-group/index.tsx
+2
-2
apps/docs/src/components/tag-group/index.tsx
+18
-18
apps/docs/src/components/theme/typography.stylex.tsx
+18
-18
apps/docs/src/components/theme/typography.stylex.tsx
···
67
67
textBoxTrim: "trim-both",
68
68
marginBottom: 0,
69
69
marginLeft: 0,
70
-
marginRight: 0,
71
70
// eslint-disable-next-line @stylexjs/valid-styles
72
71
fontFamily: fontFamily["title"],
73
-
marginTop: 0,
72
+
marginRight: 0,
74
73
fontSize: {
75
74
default: fontSize["4xl"],
76
75
[breakpoints.md]: fontSize["5xl"],
77
76
},
77
+
marginTop: 0,
78
78
// eslint-disable-next-line @stylexjs/valid-styles
79
79
fontWeight: fontWeight["extrabold"],
80
80
letterSpacing: tracking["tight"],
···
88
88
textBoxTrim: "trim-both",
89
89
marginBottom: 0,
90
90
marginLeft: 0,
91
-
marginRight: 0,
92
91
// eslint-disable-next-line @stylexjs/valid-styles
93
92
fontFamily: fontFamily["title"],
94
-
marginTop: 0,
93
+
marginRight: 0,
95
94
fontSize: {
96
95
default: fontSize["3xl"],
97
96
[breakpoints.md]: fontSize["4xl"],
98
97
},
98
+
marginTop: 0,
99
99
// eslint-disable-next-line @stylexjs/valid-styles
100
100
fontWeight: fontWeight.semibold,
101
101
letterSpacing: tracking["tight"],
···
110
110
textBoxTrim: "trim-both",
111
111
marginBottom: 0,
112
112
marginLeft: 0,
113
-
marginRight: 0,
114
113
// eslint-disable-next-line @stylexjs/valid-styles
115
114
fontFamily: fontFamily["title"],
115
+
marginRight: 0,
116
+
fontSize: { default: fontSize["xl"], [breakpoints.md]: fontSize["2xl"] },
116
117
marginTop: 0,
117
-
fontSize: { default: fontSize["xl"], [breakpoints.md]: fontSize["2xl"] },
118
118
// eslint-disable-next-line @stylexjs/valid-styles
119
119
fontWeight: fontWeight["semibold"],
120
120
letterSpacing: tracking["tight"],
···
128
128
textBoxTrim: "trim-both",
129
129
marginBottom: 0,
130
130
marginLeft: 0,
131
-
marginRight: 0,
132
131
// eslint-disable-next-line @stylexjs/valid-styles
133
132
fontFamily: fontFamily["title"],
134
-
marginTop: 0,
133
+
marginRight: 0,
135
134
fontSize: { default: fontSize["xl"] },
135
+
marginTop: 0,
136
136
// eslint-disable-next-line @stylexjs/valid-styles
137
137
fontWeight: fontWeight["semibold"],
138
138
letterSpacing: tracking["tight"],
···
146
146
textBoxTrim: "trim-both",
147
147
marginBottom: 0,
148
148
marginLeft: 0,
149
-
marginRight: 0,
150
149
// eslint-disable-next-line @stylexjs/valid-styles
151
150
fontFamily: fontFamily["title"],
152
-
marginTop: 0,
151
+
marginRight: 0,
153
152
fontSize: { default: fontSize["lg"] },
153
+
marginTop: 0,
154
154
// eslint-disable-next-line @stylexjs/valid-styles
155
155
fontWeight: fontWeight["semibold"],
156
156
letterSpacing: tracking["tight"],
···
164
164
textBoxTrim: "trim-both",
165
165
marginBottom: 0,
166
166
marginLeft: 0,
167
-
marginRight: 0,
168
167
// eslint-disable-next-line @stylexjs/valid-styles
169
168
fontFamily: fontFamily["sans"],
169
+
marginRight: 0,
170
+
fontSize: { default: fontSize["base"] },
170
171
marginTop: 0,
171
-
fontSize: { default: fontSize["base"] },
172
172
lineHeight: lineHeight.base,
173
173
},
174
174
smallBody: {
···
178
178
textBoxTrim: "trim-both",
179
179
marginBottom: 0,
180
180
marginLeft: 0,
181
-
marginRight: 0,
182
181
// eslint-disable-next-line @stylexjs/valid-styles
183
182
fontFamily: fontFamily["sans"],
184
-
marginTop: 0,
183
+
marginRight: 0,
185
184
fontSize: { default: fontSize["sm"] },
185
+
marginTop: 0,
186
186
lineHeight: lineHeight.base,
187
187
},
188
188
label: {
···
192
192
textBoxTrim: "trim-both",
193
193
marginBottom: 0,
194
194
marginLeft: 0,
195
-
marginRight: 0,
196
195
// eslint-disable-next-line @stylexjs/valid-styles
197
196
fontFamily: fontFamily["sans"],
198
-
marginTop: 0,
197
+
marginRight: 0,
199
198
fontSize: { default: fontSize["sm"] },
199
+
marginTop: 0,
200
200
// eslint-disable-next-line @stylexjs/valid-styles
201
201
fontWeight: fontWeight["semibold"],
202
202
letterSpacing: tracking["tight"],
···
209
209
textBoxTrim: "trim-both",
210
210
marginBottom: 0,
211
211
marginLeft: 0,
212
-
marginRight: 0,
213
212
// eslint-disable-next-line @stylexjs/valid-styles
214
213
fontFamily: fontFamily["sans"],
215
-
marginTop: 0,
214
+
marginRight: 0,
216
215
fontSize: { default: fontSize["xs"] },
216
+
marginTop: 0,
217
217
// eslint-disable-next-line @stylexjs/valid-styles
218
218
fontWeight: fontWeight["medium"],
219
219
lineHeight: lineHeight.sm,
+4
-4
apps/docs/src/components/theme/useCalendarStyles.ts
+4
-4
apps/docs/src/components/theme/useCalendarStyles.ts
···
30
30
cell: {
31
31
paddingBottom: verticalSpace["xxs"],
32
32
paddingLeft: horizontalSpace["xxs"],
33
-
paddingRight: horizontalSpace["xxs"],
34
33
borderRadius: radius.md,
35
-
paddingTop: verticalSpace["xxs"],
34
+
paddingRight: horizontalSpace["xxs"],
36
35
cornerShape: "squircle",
36
+
paddingTop: verticalSpace["xxs"],
37
37
textDecoration: {
38
38
":is([data-unavailable])": "line-through",
39
39
},
···
136
136
heading: {
137
137
marginBottom: 0,
138
138
marginLeft: 0,
139
-
marginRight: 0,
140
139
fontSize: fontSize["lg"],
141
-
marginTop: 0,
140
+
marginRight: 0,
142
141
fontWeight: fontWeight["semibold"],
142
+
marginTop: 0,
143
143
textAlign: "center",
144
144
},
145
145
grid: {
+2
-2
apps/docs/src/components/theme/useInputStyles.ts
+2
-2
apps/docs/src/components/theme/useInputStyles.ts
+3
-1
apps/docs/src/components/toast/Toast.tsx
+3
-1
apps/docs/src/components/toast/Toast.tsx
+147
apps/docs/src/components/video/index.tsx
+147
apps/docs/src/components/video/index.tsx
···
1
+
"use client";
2
+
3
+
import * as stylex from "@stylexjs/stylex";
4
+
import {
5
+
MediaControlBar,
6
+
MediaController,
7
+
MediaFullscreenButton,
8
+
MediaMuteButton,
9
+
MediaPlayButton,
10
+
MediaSeekBackwardButton,
11
+
MediaSeekForwardButton,
12
+
MediaTimeDisplay,
13
+
MediaTimeRange,
14
+
MediaVolumeRange,
15
+
} from "media-chrome/react";
16
+
17
+
import type { StyleXComponentProps } from "../theme/types";
18
+
19
+
import { primaryColor, uiColor } from "../theme/color.stylex";
20
+
import { radius } from "../theme/radius.stylex";
21
+
import { ui } from "../theme/semantic-color.stylex";
22
+
import {
23
+
horizontalSpace,
24
+
size,
25
+
verticalSpace,
26
+
} from "../theme/semantic-spacing.stylex";
27
+
28
+
const DEFAULT_SEEK_OFFSET = 10;
29
+
30
+
const styles = stylex.create({
31
+
root: {
32
+
borderColor: uiColor.border1,
33
+
borderStyle: "solid",
34
+
borderWidth: 1,
35
+
cornerShape: "squircle",
36
+
overflow: "hidden",
37
+
backgroundColor: "inherit",
38
+
position: "relative",
39
+
maxWidth: "100%",
40
+
minWidth: 0,
41
+
width: "100%",
42
+
},
43
+
rounded: {
44
+
borderBottomLeftRadius: radius.lg,
45
+
borderBottomRightRadius: radius.lg,
46
+
borderTopLeftRadius: radius.lg,
47
+
borderTopRightRadius: radius.lg,
48
+
},
49
+
controller: {
50
+
display: "block",
51
+
height: "100%",
52
+
width: "100%",
53
+
},
54
+
controllerTheme: {
55
+
"--media-button-icon-height": size.xl,
56
+
"--media-button-icon-width": size.xl,
57
+
"--media-button-padding": horizontalSpace.lg,
58
+
"--media-control-height": size["xl"],
59
+
"--media-control-hover-background": uiColor.component2,
60
+
"--media-control-padding": verticalSpace.lg,
61
+
"--media-icon-color": uiColor.text1,
62
+
"--media-primary-color": primaryColor.solid1,
63
+
"--media-range-track-background": uiColor.border1,
64
+
"--media-range-track-height": "4px",
65
+
"--media-secondary-color": uiColor.bgSubtle,
66
+
"--media-text-color": uiColor.text2,
67
+
"--media-tooltip-background-color": uiColor.bgSubtle,
68
+
"--media-tooltip-border": `1px solid ${uiColor.border1}`,
69
+
"--media-tooltip-border-radius": radius.xs,
70
+
"--media-tooltip-padding": `${verticalSpace.xs} ${horizontalSpace.md}`,
71
+
},
72
+
media: {
73
+
display: "block",
74
+
objectFit: "contain",
75
+
height: "100%",
76
+
width: "100%",
77
+
},
78
+
});
79
+
80
+
/**
81
+
* Props for the Video component.
82
+
*/
83
+
export interface VideoProps extends StyleXComponentProps<
84
+
Omit<React.ComponentProps<"video">, "children" | "controls" | "style">
85
+
> {
86
+
/**
87
+
* The aspect ratio reserved for the player.
88
+
* This helps prevent layout shift while the video metadata loads.
89
+
* @default 16 / 9
90
+
*/
91
+
aspectRatio?: number;
92
+
/**
93
+
* Whether the player should use rounded corners.
94
+
* @default true
95
+
*/
96
+
rounded?: boolean;
97
+
/**
98
+
* The number of seconds to skip when using the seek controls.
99
+
* @default 10
100
+
*/
101
+
seekOffset?: number;
102
+
/**
103
+
* Optional custom Media Chrome controls.
104
+
* When omitted, the component renders a default control bar.
105
+
*/
106
+
children?: React.ReactNode;
107
+
}
108
+
109
+
export function Video({
110
+
children,
111
+
preload = "metadata",
112
+
rounded = true,
113
+
seekOffset = DEFAULT_SEEK_OFFSET,
114
+
style,
115
+
...props
116
+
}: VideoProps) {
117
+
return (
118
+
<div
119
+
{...stylex.props(styles.root, rounded && styles.rounded, ui.bgDim, style)}
120
+
>
121
+
<MediaController
122
+
{...stylex.props(styles.controller, styles.controllerTheme)}
123
+
>
124
+
{/* Caption tracks are app-specific, so the wrapper forwards native video props instead of forcing a track API. */}
125
+
{/* oxlint-disable-next-line jsx_a11y/media-has-caption */}
126
+
<video
127
+
{...props}
128
+
preload={preload}
129
+
slot="media"
130
+
{...stylex.props(styles.media)}
131
+
/>
132
+
{children ?? (
133
+
<MediaControlBar>
134
+
<MediaPlayButton />
135
+
<MediaSeekBackwardButton seekOffset={seekOffset} />
136
+
<MediaSeekForwardButton seekOffset={seekOffset} />
137
+
<MediaTimeRange />
138
+
<MediaTimeDisplay showDuration />
139
+
<MediaMuteButton />
140
+
<MediaVolumeRange />
141
+
<MediaFullscreenButton />
142
+
</MediaControlBar>
143
+
)}
144
+
</MediaController>
145
+
</div>
146
+
);
147
+
}
+43
apps/docs/src/docs/components/content/video.mdx
+43
apps/docs/src/docs/components/content/video.mdx
···
1
+
---
2
+
title: Video
3
+
description: A styled video player built with Media Chrome and sensible default controls.
4
+
---
5
+
6
+
import { PropDocs } from "../../../lib/PropDocs";
7
+
import { Example } from "../../../lib/Example";
8
+
import { Basic } from "../../../examples/video/basic";
9
+
10
+
<Example src={Basic} />
11
+
12
+
## Installation
13
+
14
+
Run the following command to add the video component to your project.
15
+
16
+
```bash
17
+
pnpm hip install video
18
+
```
19
+
20
+
## Features
21
+
22
+
### Default controls
23
+
24
+
The component ships with play, seek, timeline, volume, and fullscreen controls.
25
+
26
+
### Layout stability
27
+
28
+
The player reserves space with an aspect ratio by default.
29
+
This helps avoid layout shift while the media metadata loads.
30
+
31
+
### Custom controls
32
+
33
+
Pass custom Media Chrome children when you need a different control layout.
34
+
If you do not pass children, the default control bar is rendered automatically.
35
+
36
+
## Props
37
+
38
+
<PropDocs components={["Video"]} />
39
+
40
+
## Related Components
41
+
42
+
- [Aspect Ratio](/docs/components/content/aspect-ratio) - For reserving space for other media layouts
43
+
- [Lightbox](/docs/components/overlays/lightbox) - For immersive media presentation patterns
+22
apps/docs/src/examples/video/basic.tsx
+22
apps/docs/src/examples/video/basic.tsx
···
1
+
import * as stylex from "@stylexjs/stylex";
2
+
3
+
import { Video } from "@/components/video";
4
+
5
+
const styles = stylex.create({
6
+
example: {
7
+
maxWidth: 720,
8
+
width: "100%",
9
+
},
10
+
});
11
+
12
+
export function Basic() {
13
+
return (
14
+
<Video
15
+
style={styles.example}
16
+
src="https://stream.mux.com/DS00Spx1CV902MCtPj5WknGlR102V5HFkDe/high.mp4"
17
+
poster="https://image.mux.com/DS00Spx1CV902MCtPj5WknGlR102V5HFkDe/thumbnail.webp?width=1280"
18
+
crossOrigin=""
19
+
playsInline
20
+
/>
21
+
);
22
+
}
+62
-32
apps/docs/src/routes/docs.tsx
+62
-32
apps/docs/src/routes/docs.tsx
···
366
366
);
367
367
}
368
368
369
-
const contents = item.items.map((subItem) => {
370
-
if ("items" in subItem) {
371
-
return (
372
-
<>
373
-
{subItem.items.map((leafItem) => (
374
-
<SidebarItemLink
375
-
key={leafItem.id}
376
-
to={leafItem.to}
377
-
params={leafItem.params}
378
-
isActive={currentItem?.id === leafItem.id}
379
-
>
380
-
{leafItem.label}
381
-
</SidebarItemLink>
382
-
))}
383
-
</>
384
-
);
385
-
}
386
-
387
-
return (
388
-
<SidebarItemLink
389
-
key={subItem.id}
390
-
to={subItem.to}
391
-
params={subItem.params}
392
-
isActive={currentItem?.id === subItem.id}
393
-
>
394
-
{subItem.label}
395
-
</SidebarItemLink>
396
-
);
397
-
});
398
-
399
369
if (item.label) {
400
370
return (
401
371
<SidebarGroup title={item.label} key={item.id}>
402
-
<SidebarSection>{contents}</SidebarSection>
372
+
{item.items.map((subItem) => {
373
+
if ("items" in subItem) {
374
+
return (
375
+
<SidebarSection title={subItem.label} key={subItem.id}>
376
+
{subItem.items.map((leafItem) => (
377
+
<SidebarItemLink
378
+
key={leafItem.id}
379
+
to={leafItem.to}
380
+
params={leafItem.params}
381
+
isActive={currentItem?.id === leafItem.id}
382
+
>
383
+
{leafItem.label}
384
+
</SidebarItemLink>
385
+
))}
386
+
</SidebarSection>
387
+
);
388
+
}
389
+
390
+
return (
391
+
<SidebarItemLink
392
+
key={subItem.id}
393
+
to={subItem.to}
394
+
params={subItem.params}
395
+
isActive={currentItem?.id === subItem.id}
396
+
>
397
+
{subItem.label}
398
+
</SidebarItemLink>
399
+
);
400
+
})}
403
401
</SidebarGroup>
404
402
);
405
403
}
406
404
407
-
return <SidebarSection key={item.id}>{contents}</SidebarSection>;
405
+
return (
406
+
<SidebarSection key={item.id}>
407
+
{item.items.map((subItem) => {
408
+
if ("items" in subItem) {
409
+
return (
410
+
<>
411
+
{subItem.items.map((leafItem) => (
412
+
<SidebarItemLink
413
+
key={leafItem.id}
414
+
to={leafItem.to}
415
+
params={leafItem.params}
416
+
isActive={currentItem?.id === leafItem.id}
417
+
>
418
+
{leafItem.label}
419
+
</SidebarItemLink>
420
+
))}
421
+
</>
422
+
);
423
+
}
424
+
425
+
return (
426
+
<SidebarItemLink
427
+
key={subItem.id}
428
+
to={subItem.to}
429
+
params={subItem.params}
430
+
isActive={currentItem?.id === subItem.id}
431
+
>
432
+
{subItem.label}
433
+
</SidebarItemLink>
434
+
);
435
+
})}
436
+
</SidebarSection>
437
+
);
408
438
})}
409
439
</Sidebar>
410
440
);
+11
-10
packages/hip-ui/package.json
+11
-10
packages/hip-ui/package.json
···
24
24
"codemod:shift-size-scale": "jscodeshift -t scripts/codemods/shift-size-semantic-scale.cjs src/components ../../apps/docs/src --extensions=ts,tsx --parser=tsx"
25
25
},
26
26
"devDependencies": {
27
-
"@repo/typescript-config": "workspace:*",
28
-
"@types/node": "catalog:",
29
-
"@types/react": "catalog:",
30
-
"@types/react-dom": "catalog:",
31
-
"jscodeshift": "^17.3.0",
32
-
"tsx": "^4.20.6",
33
27
"@origin-space/image-cropper": "^0.1.9",
34
28
"@radix-ui/colors": "^3.0.0",
35
29
"@react-aria/overlays": "^3.31.2",
···
37
31
"@react-stately/utils": "catalog:",
38
32
"@react-types/overlays": "catalog:",
39
33
"@react-types/shared": "^3.33.1",
34
+
"@repo/typescript-config": "workspace:*",
40
35
"@stylexjs/stylex": "catalog:",
36
+
"@types/node": "catalog:",
37
+
"@types/react": "catalog:",
38
+
"@types/react-dom": "catalog:",
41
39
"@window-splitter/react": "^1.0.0",
42
-
"lucide-react": "catalog:",
43
40
"change-case": "catalog:",
44
41
"dedent": "catalog:",
42
+
"jscodeshift": "^17.3.0",
43
+
"lucide-react": "catalog:",
44
+
"raf-throttle": "^2.0.6",
45
45
"react": "catalog:",
46
46
"react-aria": "catalog:",
47
47
"react-aria-components": "catalog:",
48
48
"react-dom": "catalog:",
49
49
"react-markdown": "^10.1.0",
50
50
"react-stately": "catalog:",
51
-
"raf-throttle": "^2.0.6",
52
51
"rehype-sanitize": "^6.0.0",
53
52
"remark-gfm": "^4.0.0",
54
-
"web-haptics": "^0.0.6",
55
-
"typescript": "catalog:"
53
+
"tsx": "^4.20.6",
54
+
"typescript": "catalog:",
55
+
"web-haptics": "^0.0.6"
56
56
},
57
57
"dependencies": {
58
58
"@inkjs/ui": "^2.0.0",
···
61
61
"command-line-application": "^0.10.1",
62
62
"ink": "^6.3.1",
63
63
"lilconfig": "^3.1.3",
64
+
"media-chrome": "^4.18.3",
64
65
"tmcp": "latest",
65
66
"valibot": "^1.1.0"
66
67
}
+2
packages/hip-ui/src/cli/install.tsx
+2
packages/hip-ui/src/cli/install.tsx
···
99
99
import { tooltipConfig } from "../components/tooltip/tooltip-config.js";
100
100
import { treeConfig } from "../components/tree/tree-config.js";
101
101
import { typographyConfig } from "../components/typography/typography-config.js";
102
+
import { videoConfig } from "../components/video/video-config.js";
102
103
import { windowSplitterConfig } from "../components/window-splitter/window-splitter-config.js";
103
104
import { getConfig, setConfig } from "./config.js";
104
105
···
191
192
editableTextConfig,
192
193
emptyStateConfig,
193
194
toastConfig,
195
+
videoConfig,
194
196
windowSplitterConfig,
195
197
imageCropperConfig,
196
198
];
+16
-4
packages/hip-ui/src/components/alert/index.tsx
+16
-4
packages/hip-ui/src/components/alert/index.tsx
···
104
104
paddingRight: horizontalSpace["md"],
105
105
},
106
106
content: {
107
-
gridArea: "content",
107
+
gridColumnEnd: 'content',
108
+
gridColumnStart: 'content',
109
+
gridRowEnd: 'content',
110
+
gridRowStart: 'content',
108
111
gap: gap["xl"],
109
112
display: "flex",
110
113
flexDirection: "column",
···
113
116
paddingTop: verticalSpace["xxs"],
114
117
},
115
118
icon: {
116
-
gridArea: "icon",
119
+
gridColumnEnd: 'icon',
120
+
gridColumnStart: 'icon',
121
+
gridRowEnd: 'icon',
122
+
gridRowStart: 'icon',
117
123
alignItems: "center",
118
124
display: "flex",
119
125
flexShrink: 0,
···
129
135
},
130
136
},
131
137
action: {
132
-
gridArea: "action",
138
+
gridColumnEnd: 'action',
139
+
gridColumnStart: 'action',
140
+
gridRowEnd: 'action',
141
+
gridRowStart: 'action',
133
142
gap: gap["md"],
134
143
alignItems: "center",
135
144
alignSelf: "center",
···
137
146
flexShrink: 0,
138
147
},
139
148
closeButton: {
140
-
gridArea: "close",
149
+
gridColumnEnd: 'close',
150
+
gridColumnStart: 'close',
151
+
gridRowEnd: 'close',
152
+
gridRowStart: 'close',
141
153
flexShrink: 0,
142
154
marginBottom: `calc(${verticalSpace["xxs"]} * -1)`,
143
155
marginTop: `calc(${verticalSpace["xxs"]} * -1)`,
+2
-2
packages/hip-ui/src/components/avatar/index.tsx
+2
-2
packages/hip-ui/src/components/avatar/index.tsx
+14
-5
packages/hip-ui/src/components/card/index.tsx
+14
-5
packages/hip-ui/src/components/card/index.tsx
···
80
80
paddingBottom: verticalSpace["5xl"],
81
81
},
82
82
cardHeaderAction: {
83
-
gridArea: "action",
83
+
gridColumnEnd: 'action',
84
+
gridColumnStart: 'action',
85
+
gridRowEnd: 'action',
86
+
gridRowStart: 'action',
84
87
gap: gap["xs"],
85
88
display: "flex",
86
89
justifyContent: "flex-end",
···
90
93
textBoxEdge: "cap alphabetic",
91
94
// eslint-disable-next-line @stylexjs/valid-styles
92
95
textBoxTrim: "trim-both",
93
-
gridArea: "title",
96
+
gridColumnEnd: 'title',
97
+
gridColumnStart: 'title',
98
+
gridRowEnd: 'title',
99
+
gridRowStart: 'title',
94
100
gap: gap["xl"],
95
101
alignItems: "center",
96
102
display: "flex",
···
103
109
fontWeight: fontWeight["bold"],
104
110
},
105
111
cardDescription: {
106
-
gridArea: "description",
112
+
gridColumnEnd: 'description',
113
+
gridColumnStart: 'description',
114
+
gridRowEnd: 'description',
115
+
gridRowStart: 'description',
107
116
marginBottom: 0,
108
117
marginLeft: 0,
109
-
marginRight: 0,
110
118
fontSize: fontSize["sm"],
111
-
marginTop: 0,
119
+
marginRight: 0,
112
120
fontWeight: fontWeight["normal"],
121
+
marginTop: 0,
113
122
lineHeight: lineHeight["sm"],
114
123
},
115
124
cardBody: {
+2
-2
packages/hip-ui/src/components/color-picker/index.tsx
+2
-2
packages/hip-ui/src/components/color-picker/index.tsx
···
52
52
marginTop: 0,
53
53
paddingBottom: 0,
54
54
paddingLeft: 0,
55
-
paddingRight: 0,
56
55
borderWidth: 0,
57
-
paddingTop: 0,
56
+
paddingRight: 0,
58
57
gap: {
59
58
default: gap["md"],
60
59
":is([data-size=sm])": sizeSpace["xxs"],
61
60
},
61
+
paddingTop: 0,
62
62
alignItems: "center",
63
63
backgroundColor: "transparent",
64
64
display: "flex",
+12
-3
packages/hip-ui/src/components/color-slider/index.tsx
+12
-3
packages/hip-ui/src/components/color-slider/index.tsx
···
29
29
flexDirection: "column",
30
30
},
31
31
label: {
32
-
gridArea: "label",
32
+
gridColumnEnd: 'label',
33
+
gridColumnStart: 'label',
34
+
gridRowEnd: 'label',
35
+
gridRowStart: 'label',
33
36
},
34
37
valueLabel: {
35
-
gridArea: "value-label",
38
+
gridColumnEnd: 'value-label',
39
+
gridColumnStart: 'value-label',
40
+
gridRowEnd: 'value-label',
41
+
gridRowStart: 'value-label',
36
42
color: uiColor.text1,
37
43
fontVariantNumeric: "tabular-nums",
38
44
justifySelf: "flex-end",
···
49
55
},
50
56
},
51
57
track: {
52
-
gridArea: "track",
58
+
gridColumnEnd: 'track',
59
+
gridColumnStart: 'track',
60
+
gridRowEnd: 'track',
61
+
gridRowStart: 'track',
53
62
borderRadius: radius.full,
54
63
cornerShape: "squircle",
55
64
height: {
+4
-1
packages/hip-ui/src/components/color-wheel/index.tsx
+4
-1
packages/hip-ui/src/components/color-wheel/index.tsx
+2
-2
packages/hip-ui/src/components/disclosure-group/index.tsx
+2
-2
packages/hip-ui/src/components/disclosure-group/index.tsx
+2
-2
packages/hip-ui/src/components/disclosure/index.tsx
+2
-2
packages/hip-ui/src/components/disclosure/index.tsx
···
39
39
":is([data-size=md] *)": sizeSpace["xxs"],
40
40
":is([data-size=sm] *)": sizeSpace["sm"],
41
41
},
42
+
borderRadius: radius.lg,
42
43
paddingRight: {
43
44
":is([data-size=lg] *)": sizeSpace["md"],
44
45
":is([data-size=md] *)": sizeSpace["xxs"],
45
46
":is([data-size=sm] *)": sizeSpace["sm"],
46
47
},
47
-
borderRadius: radius.lg,
48
+
borderWidth: 0,
48
49
paddingTop: {
49
50
":is([data-size=lg] *)": sizeSpace["md"],
50
51
":is([data-size=md] *)": sizeSpace["xxs"],
51
52
":is([data-size=sm] *)": sizeSpace["sm"],
52
53
},
53
-
borderWidth: 0,
54
54
55
55
cornerShape: "squircle",
56
56
gap: gap["md"],
+20
-8
packages/hip-ui/src/components/empty-state/index.tsx
+20
-8
packages/hip-ui/src/components/empty-state/index.tsx
···
73
73
textAlign: "center",
74
74
},
75
75
image: {
76
-
gridArea: "image",
76
+
gridColumnEnd: 'image',
77
+
gridColumnStart: 'image',
78
+
gridRowEnd: 'image',
79
+
gridRowStart: 'image',
77
80
alignItems: "center",
78
81
display: "flex",
79
82
justifyContent: "center",
···
82
85
width: "var(--empty-state-image-size)",
83
86
},
84
87
title: {
85
-
gridArea: "title",
88
+
gridColumnEnd: 'title',
89
+
gridColumnStart: 'title',
90
+
gridRowEnd: 'title',
91
+
gridRowStart: 'title',
86
92
marginBottom: 0,
87
93
marginLeft: 0,
88
-
marginRight: 0,
89
94
fontSize: {
90
95
":is([data-empty-state-size='lg'] *)": fontSize["2xl"],
91
96
":is([data-empty-state-size='md'] *)": fontSize["xl"],
92
97
":is([data-empty-state-size='sm'] *)": fontSize["lg"],
93
98
},
99
+
marginRight: 0,
100
+
fontWeight: fontWeight["semibold"],
94
101
marginTop: 0,
95
-
fontWeight: fontWeight["semibold"],
96
102
},
97
103
description: {
98
-
gridArea: "description",
104
+
gridColumnEnd: 'description',
105
+
gridColumnStart: 'description',
106
+
gridRowEnd: 'description',
107
+
gridRowStart: 'description',
99
108
marginBottom: 0,
100
109
marginLeft: 0,
101
-
marginRight: 0,
102
110
fontSize: fontSize["sm"],
103
-
marginTop: 0,
111
+
marginRight: 0,
104
112
fontWeight: fontWeight["normal"],
113
+
marginTop: 0,
105
114
maxWidth: {
106
115
":is([data-empty-state-size=lg])": "480px",
107
116
":is([data-empty-state-size=md])": "400px",
···
109
118
},
110
119
},
111
120
actions: {
112
-
gridArea: "actions",
121
+
gridColumnEnd: 'actions',
122
+
gridColumnStart: 'actions',
123
+
gridRowEnd: 'actions',
124
+
gridRowStart: 'actions',
113
125
gap: gap["md"],
114
126
alignItems: "center",
115
127
display: "flex",
+2
-2
packages/hip-ui/src/components/file-drop-zone/index.tsx
+2
-2
packages/hip-ui/src/components/file-drop-zone/index.tsx
···
39
39
dropZone: {
40
40
paddingBottom: verticalSpace["2xl"],
41
41
paddingLeft: horizontalSpace["2xl"],
42
-
paddingRight: horizontalSpace["2xl"],
43
42
borderColor: {
44
43
default: uiColor.border3,
45
44
":is([data-drop-target])": primaryColor.solid1,
46
45
},
46
+
paddingRight: horizontalSpace["2xl"],
47
+
borderRadius: radius.lg,
47
48
paddingTop: verticalSpace["2xl"],
48
-
borderRadius: radius.lg,
49
49
borderStyle: {
50
50
default: "dashed",
51
51
":is([data-drop-target])": "solid",
+2
-2
packages/hip-ui/src/components/image-cropper/index.tsx
+2
-2
packages/hip-ui/src/components/image-cropper/index.tsx
+12
-3
packages/hip-ui/src/components/meter/index.tsx
+12
-3
packages/hip-ui/src/components/meter/index.tsx
···
28
28
display: "grid",
29
29
},
30
30
label: {
31
-
gridArea: "label",
31
+
gridColumnEnd: 'label',
32
+
gridColumnStart: 'label',
33
+
gridRowEnd: 'label',
34
+
gridRowStart: 'label',
32
35
},
33
36
bar: {
34
-
gridArea: "bar",
37
+
gridColumnEnd: 'bar',
38
+
gridColumnStart: 'bar',
39
+
gridRowEnd: 'bar',
40
+
gridRowStart: 'bar',
35
41
borderRadius: radius.full,
36
42
overflow: "hidden",
37
43
backgroundColor: {
···
57
63
},
58
64
59
65
valueLabel: {
60
-
gridArea: "value-label",
66
+
gridColumnEnd: 'value-label',
67
+
gridColumnStart: 'value-label',
68
+
gridRowEnd: 'value-label',
69
+
gridRowStart: 'value-label',
61
70
color: uiColor.text1,
62
71
fontVariantNumeric: "tabular-nums",
63
72
justifySelf: "flex-end",
+2
-2
packages/hip-ui/src/components/number-field/index.tsx
+2
-2
packages/hip-ui/src/components/number-field/index.tsx
+16
-4
packages/hip-ui/src/components/page/Page.tsx
+16
-4
packages/hip-ui/src/components/page/Page.tsx
···
123
123
textBoxEdge: "cap alphabetic",
124
124
// eslint-disable-next-line @stylexjs/valid-styles
125
125
textBoxTrim: "trim-both",
126
-
gridArea: "title",
126
+
gridColumnEnd: 'title',
127
+
gridColumnStart: 'title',
128
+
gridRowEnd: 'title',
129
+
gridRowStart: 'title',
127
130
flexGrow: 1,
128
131
fontFamily: fontFamily["title"],
129
132
minWidth: 0,
130
133
},
131
134
description: {
132
-
gridArea: "description",
135
+
gridColumnEnd: 'description',
136
+
gridColumnStart: 'description',
137
+
gridRowEnd: 'description',
138
+
gridRowStart: 'description',
133
139
display: {
134
140
default: "none",
135
141
[breakpoints.sm]: "block",
···
140
146
flexShrink: 0,
141
147
},
142
148
largeActions: {
143
-
gridArea: "actions",
149
+
gridColumnEnd: 'actions',
150
+
gridColumnStart: 'actions',
151
+
gridRowEnd: 'actions',
152
+
gridRowStart: 'actions',
144
153
gap: {
145
154
default: gap["xs"],
146
155
[breakpoints.sm]: sizeSpace["sm"],
···
148
157
minHeight: sizeSpace["3xl"],
149
158
},
150
159
icon: {
151
-
gridArea: "icon",
160
+
gridColumnEnd: 'icon',
161
+
gridColumnStart: 'icon',
162
+
gridRowEnd: 'icon',
163
+
gridRowStart: 'icon',
152
164
borderRadius: radius.lg,
153
165
// eslint-disable-next-line @stylexjs/valid-styles, @stylexjs/sort-keys
154
166
cornerShape: "squircle",
+12
-3
packages/hip-ui/src/components/progress-bar/index.tsx
+12
-3
packages/hip-ui/src/components/progress-bar/index.tsx
···
32
32
display: "grid",
33
33
},
34
34
label: {
35
-
gridArea: "label",
35
+
gridColumnEnd: 'label',
36
+
gridColumnStart: 'label',
37
+
gridRowEnd: 'label',
38
+
gridRowStart: 'label',
36
39
},
37
40
bar: {
38
-
gridArea: "bar",
41
+
gridColumnEnd: 'bar',
42
+
gridColumnStart: 'bar',
43
+
gridRowEnd: 'bar',
44
+
gridRowStart: 'bar',
39
45
borderRadius: radius.full,
40
46
overflow: "hidden",
41
47
backgroundColor: uiColor.component2,
···
48
54
},
49
55
},
50
56
valueLabel: {
51
-
gridArea: "value-label",
57
+
gridColumnEnd: 'value-label',
58
+
gridColumnStart: 'value-label',
59
+
gridRowEnd: 'value-label',
60
+
gridRowStart: 'value-label',
52
61
color: uiColor.text1,
53
62
fontVariantNumeric: "tabular-nums",
54
63
justifySelf: "flex-end",
+2
-2
packages/hip-ui/src/components/separator/index.tsx
+2
-2
packages/hip-ui/src/components/separator/index.tsx
+12
-3
packages/hip-ui/src/components/slider/index.tsx
+12
-3
packages/hip-ui/src/components/slider/index.tsx
···
35
35
},
36
36
},
37
37
track: {
38
-
gridArea: "track",
38
+
gridColumnEnd: 'track',
39
+
gridColumnStart: 'track',
40
+
gridRowEnd: 'track',
41
+
gridRowStart: 'track',
39
42
flexGrow: {
40
43
":is([data-orientation=vertical] *)": 1,
41
44
},
···
164
167
},
165
168
},
166
169
valueLabel: {
167
-
gridArea: "value-label",
170
+
gridColumnEnd: 'value-label',
171
+
gridColumnStart: 'value-label',
172
+
gridRowEnd: 'value-label',
173
+
gridRowStart: 'value-label',
168
174
color: uiColor.text1,
169
175
fontSize: fontSize["sm"],
170
176
fontVariantNumeric: "tabular-nums",
···
172
178
lineHeight: lineHeight["sm"],
173
179
},
174
180
label: {
175
-
gridArea: "label",
181
+
gridColumnEnd: 'label',
182
+
gridColumnStart: 'label',
183
+
gridRowEnd: 'label',
184
+
gridRowStart: 'label',
176
185
},
177
186
});
178
187
+2
-2
packages/hip-ui/src/components/star-rating/index.tsx
+2
-2
packages/hip-ui/src/components/star-rating/index.tsx
···
40
40
marginTop: 0,
41
41
paddingBottom: 0,
42
42
paddingLeft: 0,
43
-
paddingRight: 0,
44
43
borderColor: "transparent",
45
-
paddingTop: 0,
44
+
paddingRight: 0,
46
45
borderStyle: "none",
46
+
paddingTop: 0,
47
47
borderWidth: 0,
48
48
alignItems: "center",
49
49
backgroundColor: "transparent",
+1
-1
packages/hip-ui/src/components/table-of-contents/index.tsx
+1
-1
packages/hip-ui/src/components/table-of-contents/index.tsx
+2
-2
packages/hip-ui/src/components/table/index.tsx
+2
-2
packages/hip-ui/src/components/table/index.tsx
+8
-8
packages/hip-ui/src/components/tabs/index.tsx
+8
-8
packages/hip-ui/src/components/tabs/index.tsx
···
86
86
":is([data-size=md] *)": sizeSpace["md"],
87
87
":is([data-size=sm] *)": sizeSpace["xxs"],
88
88
},
89
+
borderWidth: 0,
89
90
paddingRight: {
90
91
":is([data-size=lg] *)": sizeSpace["lg"],
91
92
":is([data-size=md] *)": sizeSpace["md"],
92
93
":is([data-size=sm] *)": sizeSpace["xxs"],
93
94
},
94
-
borderWidth: 0,
95
+
outline: "none",
95
96
paddingTop: {
96
97
":is([data-size=lg] *)": sizeSpace["md"],
97
98
":is([data-size=md] *)": sizeSpace["xxs"],
98
99
":is([data-size=sm] *)": sizeSpace["sm"],
99
100
},
100
-
outline: "none",
101
101
alignItems: "center",
102
102
backgroundColor: "transparent",
103
103
color: {
···
192
192
":is([data-size=md] *)": sizeSpace["md"],
193
193
":is([data-size=sm] *)": sizeSpace["xxs"],
194
194
},
195
+
outline: "none",
195
196
paddingRight: {
196
-
":is([data-size=lg] *)": sizeSpace["lg"],
197
-
":is([data-size=md] *)": sizeSpace["md"],
198
-
":is([data-size=sm] *)": sizeSpace["xxs"],
199
-
},
200
-
outline: "none",
201
-
paddingTop: {
202
197
":is([data-size=lg] *)": sizeSpace["lg"],
203
198
":is([data-size=md] *)": sizeSpace["md"],
204
199
":is([data-size=sm] *)": sizeSpace["xxs"],
···
207
202
":is([data-size=lg] *)": fontSize["lg"],
208
203
":is([data-size=md] *)": fontSize["base"],
209
204
":is([data-size=sm] *)": fontSize["sm"],
205
+
},
206
+
paddingTop: {
207
+
":is([data-size=lg] *)": sizeSpace["lg"],
208
+
":is([data-size=md] *)": sizeSpace["md"],
209
+
":is([data-size=sm] *)": sizeSpace["xxs"],
210
210
},
211
211
},
212
212
focusRing: {
+2
-2
packages/hip-ui/src/components/tag-group/index.tsx
+2
-2
packages/hip-ui/src/components/tag-group/index.tsx
+18
-18
packages/hip-ui/src/components/theme/typography.stylex.tsx
+18
-18
packages/hip-ui/src/components/theme/typography.stylex.tsx
···
67
67
textBoxTrim: "trim-both",
68
68
marginBottom: 0,
69
69
marginLeft: 0,
70
-
marginRight: 0,
71
70
// eslint-disable-next-line @stylexjs/valid-styles
72
71
fontFamily: fontFamily["title"],
73
-
marginTop: 0,
72
+
marginRight: 0,
74
73
fontSize: {
75
74
default: fontSize["4xl"],
76
75
[breakpoints.md]: fontSize["5xl"],
77
76
},
77
+
marginTop: 0,
78
78
// eslint-disable-next-line @stylexjs/valid-styles
79
79
fontWeight: fontWeight["extrabold"],
80
80
letterSpacing: tracking["tight"],
···
88
88
textBoxTrim: "trim-both",
89
89
marginBottom: 0,
90
90
marginLeft: 0,
91
-
marginRight: 0,
92
91
// eslint-disable-next-line @stylexjs/valid-styles
93
92
fontFamily: fontFamily["title"],
94
-
marginTop: 0,
93
+
marginRight: 0,
95
94
fontSize: {
96
95
default: fontSize["3xl"],
97
96
[breakpoints.md]: fontSize["4xl"],
98
97
},
98
+
marginTop: 0,
99
99
// eslint-disable-next-line @stylexjs/valid-styles
100
100
fontWeight: fontWeight.semibold,
101
101
letterSpacing: tracking["tight"],
···
110
110
textBoxTrim: "trim-both",
111
111
marginBottom: 0,
112
112
marginLeft: 0,
113
-
marginRight: 0,
114
113
// eslint-disable-next-line @stylexjs/valid-styles
115
114
fontFamily: fontFamily["title"],
115
+
marginRight: 0,
116
+
fontSize: { default: fontSize["xl"], [breakpoints.md]: fontSize["2xl"] },
116
117
marginTop: 0,
117
-
fontSize: { default: fontSize["xl"], [breakpoints.md]: fontSize["2xl"] },
118
118
// eslint-disable-next-line @stylexjs/valid-styles
119
119
fontWeight: fontWeight["semibold"],
120
120
letterSpacing: tracking["tight"],
···
128
128
textBoxTrim: "trim-both",
129
129
marginBottom: 0,
130
130
marginLeft: 0,
131
-
marginRight: 0,
132
131
// eslint-disable-next-line @stylexjs/valid-styles
133
132
fontFamily: fontFamily["title"],
134
-
marginTop: 0,
133
+
marginRight: 0,
135
134
fontSize: { default: fontSize["xl"] },
135
+
marginTop: 0,
136
136
// eslint-disable-next-line @stylexjs/valid-styles
137
137
fontWeight: fontWeight["semibold"],
138
138
letterSpacing: tracking["tight"],
···
146
146
textBoxTrim: "trim-both",
147
147
marginBottom: 0,
148
148
marginLeft: 0,
149
-
marginRight: 0,
150
149
// eslint-disable-next-line @stylexjs/valid-styles
151
150
fontFamily: fontFamily["title"],
152
-
marginTop: 0,
151
+
marginRight: 0,
153
152
fontSize: { default: fontSize["lg"] },
153
+
marginTop: 0,
154
154
// eslint-disable-next-line @stylexjs/valid-styles
155
155
fontWeight: fontWeight["semibold"],
156
156
letterSpacing: tracking["tight"],
···
164
164
textBoxTrim: "trim-both",
165
165
marginBottom: 0,
166
166
marginLeft: 0,
167
-
marginRight: 0,
168
167
// eslint-disable-next-line @stylexjs/valid-styles
169
168
fontFamily: fontFamily["sans"],
169
+
marginRight: 0,
170
+
fontSize: { default: fontSize["base"] },
170
171
marginTop: 0,
171
-
fontSize: { default: fontSize["base"] },
172
172
lineHeight: lineHeight.base,
173
173
},
174
174
smallBody: {
···
178
178
textBoxTrim: "trim-both",
179
179
marginBottom: 0,
180
180
marginLeft: 0,
181
-
marginRight: 0,
182
181
// eslint-disable-next-line @stylexjs/valid-styles
183
182
fontFamily: fontFamily["sans"],
184
-
marginTop: 0,
183
+
marginRight: 0,
185
184
fontSize: { default: fontSize["sm"] },
185
+
marginTop: 0,
186
186
lineHeight: lineHeight.base,
187
187
},
188
188
label: {
···
192
192
textBoxTrim: "trim-both",
193
193
marginBottom: 0,
194
194
marginLeft: 0,
195
-
marginRight: 0,
196
195
// eslint-disable-next-line @stylexjs/valid-styles
197
196
fontFamily: fontFamily["sans"],
198
-
marginTop: 0,
197
+
marginRight: 0,
199
198
fontSize: { default: fontSize["sm"] },
199
+
marginTop: 0,
200
200
// eslint-disable-next-line @stylexjs/valid-styles
201
201
fontWeight: fontWeight["semibold"],
202
202
letterSpacing: tracking["tight"],
···
209
209
textBoxTrim: "trim-both",
210
210
marginBottom: 0,
211
211
marginLeft: 0,
212
-
marginRight: 0,
213
212
// eslint-disable-next-line @stylexjs/valid-styles
214
213
fontFamily: fontFamily["sans"],
215
-
marginTop: 0,
214
+
marginRight: 0,
216
215
fontSize: { default: fontSize["xs"] },
216
+
marginTop: 0,
217
217
// eslint-disable-next-line @stylexjs/valid-styles
218
218
fontWeight: fontWeight["medium"],
219
219
lineHeight: lineHeight.sm,
+4
-4
packages/hip-ui/src/components/theme/useCalendarStyles.ts
+4
-4
packages/hip-ui/src/components/theme/useCalendarStyles.ts
···
30
30
cell: {
31
31
paddingBottom: verticalSpace["xxs"],
32
32
paddingLeft: horizontalSpace["xxs"],
33
-
paddingRight: horizontalSpace["xxs"],
34
33
borderRadius: radius.md,
35
-
paddingTop: verticalSpace["xxs"],
34
+
paddingRight: horizontalSpace["xxs"],
36
35
cornerShape: "squircle",
36
+
paddingTop: verticalSpace["xxs"],
37
37
textDecoration: {
38
38
":is([data-unavailable])": "line-through",
39
39
},
···
136
136
heading: {
137
137
marginBottom: 0,
138
138
marginLeft: 0,
139
-
marginRight: 0,
140
139
fontSize: fontSize["lg"],
141
-
marginTop: 0,
140
+
marginRight: 0,
142
141
fontWeight: fontWeight["semibold"],
142
+
marginTop: 0,
143
143
textAlign: "center",
144
144
},
145
145
grid: {
+3
-1
packages/hip-ui/src/components/toast/Toast.tsx
+3
-1
packages/hip-ui/src/components/toast/Toast.tsx
+147
packages/hip-ui/src/components/video/index.tsx
+147
packages/hip-ui/src/components/video/index.tsx
···
1
+
"use client";
2
+
3
+
import * as stylex from "@stylexjs/stylex";
4
+
import {
5
+
MediaControlBar,
6
+
MediaController,
7
+
MediaFullscreenButton,
8
+
MediaMuteButton,
9
+
MediaPlayButton,
10
+
MediaSeekBackwardButton,
11
+
MediaSeekForwardButton,
12
+
MediaTimeDisplay,
13
+
MediaTimeRange,
14
+
MediaVolumeRange,
15
+
} from "media-chrome/react";
16
+
17
+
import type { StyleXComponentProps } from "../theme/types";
18
+
19
+
import { primaryColor, uiColor } from "../theme/color.stylex";
20
+
import { radius } from "../theme/radius.stylex";
21
+
import { ui } from "../theme/semantic-color.stylex";
22
+
import {
23
+
horizontalSpace,
24
+
size,
25
+
verticalSpace,
26
+
} from "../theme/semantic-spacing.stylex";
27
+
28
+
const DEFAULT_SEEK_OFFSET = 10;
29
+
30
+
const styles = stylex.create({
31
+
root: {
32
+
borderColor: uiColor.border1,
33
+
borderStyle: "solid",
34
+
borderWidth: 1,
35
+
cornerShape: "squircle",
36
+
overflow: "hidden",
37
+
backgroundColor: "inherit",
38
+
position: "relative",
39
+
maxWidth: "100%",
40
+
minWidth: 0,
41
+
width: "100%",
42
+
},
43
+
rounded: {
44
+
borderBottomLeftRadius: radius.lg,
45
+
borderBottomRightRadius: radius.lg,
46
+
borderTopLeftRadius: radius.lg,
47
+
borderTopRightRadius: radius.lg,
48
+
},
49
+
controller: {
50
+
display: "block",
51
+
height: "100%",
52
+
width: "100%",
53
+
},
54
+
controllerTheme: {
55
+
"--media-button-icon-height": size.xl,
56
+
"--media-button-icon-width": size.xl,
57
+
"--media-button-padding": horizontalSpace.lg,
58
+
"--media-control-height": size["xl"],
59
+
"--media-control-hover-background": uiColor.component2,
60
+
"--media-control-padding": verticalSpace.lg,
61
+
"--media-icon-color": uiColor.text1,
62
+
"--media-primary-color": primaryColor.solid1,
63
+
"--media-range-track-background": uiColor.border1,
64
+
"--media-range-track-height": "4px",
65
+
"--media-secondary-color": uiColor.bgSubtle,
66
+
"--media-text-color": uiColor.text2,
67
+
"--media-tooltip-background-color": uiColor.bgSubtle,
68
+
"--media-tooltip-border": `1px solid ${uiColor.border1}`,
69
+
"--media-tooltip-border-radius": radius.xs,
70
+
"--media-tooltip-padding": `${verticalSpace.xs} ${horizontalSpace.md}`,
71
+
},
72
+
media: {
73
+
display: "block",
74
+
objectFit: "contain",
75
+
height: "100%",
76
+
width: "100%",
77
+
},
78
+
});
79
+
80
+
/**
81
+
* Props for the Video component.
82
+
*/
83
+
export interface VideoProps extends StyleXComponentProps<
84
+
Omit<React.ComponentProps<"video">, "children" | "controls" | "style">
85
+
> {
86
+
/**
87
+
* The aspect ratio reserved for the player.
88
+
* This helps prevent layout shift while the video metadata loads.
89
+
* @default 16 / 9
90
+
*/
91
+
aspectRatio?: number;
92
+
/**
93
+
* Whether the player should use rounded corners.
94
+
* @default true
95
+
*/
96
+
rounded?: boolean;
97
+
/**
98
+
* The number of seconds to skip when using the seek controls.
99
+
* @default 10
100
+
*/
101
+
seekOffset?: number;
102
+
/**
103
+
* Optional custom Media Chrome controls.
104
+
* When omitted, the component renders a default control bar.
105
+
*/
106
+
children?: React.ReactNode;
107
+
}
108
+
109
+
export function Video({
110
+
children,
111
+
preload = "metadata",
112
+
rounded = true,
113
+
seekOffset = DEFAULT_SEEK_OFFSET,
114
+
style,
115
+
...props
116
+
}: VideoProps) {
117
+
return (
118
+
<div
119
+
{...stylex.props(styles.root, rounded && styles.rounded, ui.bgDim, style)}
120
+
>
121
+
<MediaController
122
+
{...stylex.props(styles.controller, styles.controllerTheme)}
123
+
>
124
+
{/* Caption tracks are app-specific, so the wrapper forwards native video props instead of forcing a track API. */}
125
+
{/* oxlint-disable-next-line jsx_a11y/media-has-caption */}
126
+
<video
127
+
{...props}
128
+
preload={preload}
129
+
slot="media"
130
+
{...stylex.props(styles.media)}
131
+
/>
132
+
{children ?? (
133
+
<MediaControlBar>
134
+
<MediaPlayButton />
135
+
<MediaSeekBackwardButton seekOffset={seekOffset} />
136
+
<MediaSeekForwardButton seekOffset={seekOffset} />
137
+
<MediaTimeRange />
138
+
<MediaTimeDisplay showDuration />
139
+
<MediaMuteButton />
140
+
<MediaVolumeRange />
141
+
<MediaFullscreenButton />
142
+
</MediaControlBar>
143
+
)}
144
+
</MediaController>
145
+
</div>
146
+
);
147
+
}
+11
packages/hip-ui/src/components/video/video-config.ts
+11
packages/hip-ui/src/components/video/video-config.ts
+24
-3
pnpm-lock.yaml
+24
-3
pnpm-lock.yaml
···
51
51
react-dom:
52
52
specifier: 19.2.0
53
53
version: 19.2.0
54
-
react-server-dom-webpack:
55
-
specifier: 19.2.0
56
-
version: 19.2.0
57
54
react-stately:
58
55
specifier: 3.45.0
59
56
version: 3.45.0
···
200
197
match-container:
201
198
specifier: ^0.1.0
202
199
version: 0.1.0
200
+
media-chrome:
201
+
specifier: ^4.18.3
202
+
version: 4.18.3(react@19.2.0)
203
203
node-html-markdown:
204
204
specifier: ^2.0.0
205
205
version: 2.0.0
···
388
388
lilconfig:
389
389
specifier: ^3.1.3
390
390
version: 3.1.3
391
+
media-chrome:
392
+
specifier: ^4.18.3
393
+
version: 4.18.3(react@19.2.0)
391
394
tmcp:
392
395
specifier: latest
393
396
version: 1.19.3(typescript@5.9.3)
···
4343
4346
4344
4347
ccount@2.0.1:
4345
4348
resolution: {integrity: sha512-eyrF0jiFpY+3drT6383f1qhkbGsLSifNAjA61IUjZjmLCWjItY6LB9ft9YhoDgwfmclB2zhu51Lc7+95b8NRAg==}
4349
+
4350
+
ce-la-react@0.3.2:
4351
+
resolution: {integrity: sha512-QJ6k4lOD/btI08xG8jBPxRCGXvCnusGGkTsiXk0u3NqUu/W+BXRnFD4PYjwtqh8AWmGa5LDbGk0fLQsqr0nSMA==}
4352
+
peerDependencies:
4353
+
react: '>=17.0.0'
4346
4354
4347
4355
chai@5.3.3:
4348
4356
resolution: {integrity: sha512-4zNhdJD/iOjSH0A05ea+Ke6MU5mmpQcbQsSOkgdaUMJ9zTlDTD/GYlwohmIE2u0gaxHYiVHEn1Fw9mZ/ktJWgw==}
···
5871
5879
meant@1.0.3:
5872
5880
resolution: {integrity: sha512-88ZRGcNxAq4EH38cQ4D85PM57pikCwS8Z99EWHODxN7KBY+UuPiqzRTtZzS8KTXO/ywSWbdjjJST2Hly/EQxLw==}
5873
5881
5882
+
media-chrome@4.18.3:
5883
+
resolution: {integrity: sha512-YuS2wY0Fn+2nXGijJYn4+IE0n9wFe3v6SvOZHGNkoxh32T/cCcrXHUWskA+9tyYTONa6JKwKAOJJeO6QOlJLKw==}
5884
+
5874
5885
merge-stream@2.0.0:
5875
5886
resolution: {integrity: sha512-abv/qOcuPfk3URPfDzmZU1LKmuw8kT+0nIHvKrKgFrwifol/doWcdA4ZqsWQ8ENrFKkd67Mfpo/LovbIUsbt3w==}
5876
5887
···
11989
12000
11990
12001
ccount@2.0.1: {}
11991
12002
12003
+
ce-la-react@0.3.2(react@19.2.0):
12004
+
dependencies:
12005
+
react: 19.2.0
12006
+
11992
12007
chai@5.3.3:
11993
12008
dependencies:
11994
12009
assertion-error: 2.0.1
···
13867
13882
- supports-color
13868
13883
13869
13884
meant@1.0.3: {}
13885
+
13886
+
media-chrome@4.18.3(react@19.2.0):
13887
+
dependencies:
13888
+
ce-la-react: 0.3.2(react@19.2.0)
13889
+
transitivePeerDependencies:
13890
+
- react
13870
13891
13871
13892
merge-stream@2.0.0: {}
13872
13893