A design system in a box.
hip-ui.tngl.io/docs/introduction
sidebar layout
+680
-114
+1
apps/docs/src/components/drawer/index.tsx
+1
apps/docs/src/components/drawer/index.tsx
+28
-22
apps/docs/src/components/header-layout/index.tsx
+28
-22
apps/docs/src/components/header-layout/index.tsx
···
2
2
3
3
import * as stylex from "@stylexjs/stylex";
4
4
5
+
import { primaryColor, uiColor } from "../theme/color.stylex";
6
+
import { containerBreakpoints } from "../theme/media-queries.stylex";
5
7
import { spacing } from "../theme/spacing.stylex";
6
8
import { StyleXComponentProps } from "../theme/types";
7
-
import { primaryColor, uiColor } from "../theme/color.stylex";
8
-
import { primary } from "../theme/semantic-color.stylex";
9
-
import { containerBreakpoints } from "../theme/media-queries.stylex";
10
9
11
10
const styles = stylex.create({
12
11
root: {
13
12
"--page-content-max-width": "1280px",
14
-
minHeight: "100vh",
13
+
backgroundColor: uiColor.bg,
14
+
containerType: "inline-size",
15
15
display: "flex",
16
16
flexDirection: "column",
17
-
backgroundColor: uiColor.bg,
18
-
containerType: "inline-size",
17
+
minHeight: "100vh",
19
18
width: "100cqw",
20
19
},
21
20
header: {
22
21
flexShrink: 0,
23
22
},
24
23
page: {
24
+
boxSizing: "border-box",
25
25
flexGrow: 1,
26
+
marginLeft: "auto",
27
+
marginRight: "auto",
28
+
maxWidth: "var(--page-content-max-width)",
26
29
minHeight: 0,
27
-
paddingTop: {
28
-
default: spacing["2"],
29
-
[containerBreakpoints.sm]: spacing["6"],
30
-
},
31
30
paddingBottom: {
32
31
default: spacing["10"],
33
32
[containerBreakpoints.sm]: spacing["12"],
···
40
39
default: spacing["4"],
41
40
[containerBreakpoints.sm]: spacing["8"],
42
41
},
43
-
maxWidth: "var(--page-content-max-width)",
42
+
paddingTop: {
43
+
default: spacing["2"],
44
+
[containerBreakpoints.sm]: spacing["6"],
45
+
},
44
46
width: "100%",
45
-
marginLeft: "auto",
46
-
marginRight: "auto",
47
-
boxSizing: "border-box",
48
47
},
49
48
footer: {
50
49
flexShrink: 0,
51
50
},
52
51
hero: {
53
-
width: "100%",
54
-
boxSizing: "border-box",
55
52
backgroundColor: primaryColor.solid1,
53
+
boxSizing: "border-box",
56
54
color: primaryColor.textContrast,
57
-
paddingTop: {
55
+
paddingBottom: {
58
56
default: spacing["6"],
59
57
[containerBreakpoints.sm]: spacing["12"],
60
58
},
61
-
paddingBottom: {
59
+
paddingTop: {
62
60
default: spacing["6"],
63
61
[containerBreakpoints.sm]: spacing["12"],
64
62
},
63
+
width: "100%",
65
64
},
66
65
heroContent: {
67
-
maxWidth: "var(--page-content-max-width)",
68
-
width: "100%",
66
+
boxSizing: "border-box",
69
67
marginLeft: "auto",
70
68
marginRight: "auto",
71
-
boxSizing: "border-box",
69
+
maxWidth: "var(--page-content-max-width)",
72
70
paddingLeft: {
73
71
default: spacing["4"],
74
72
[containerBreakpoints.sm]: spacing["8"],
···
77
75
default: spacing["4"],
78
76
[containerBreakpoints.sm]: spacing["8"],
79
77
},
78
+
width: "100%",
80
79
},
81
80
});
82
81
···
91
90
style,
92
91
...props
93
92
}: HeaderLayoutRootProps) => {
94
-
return <div {...props} {...stylex.props(styles.root, style)} />;
93
+
return (
94
+
<div
95
+
{...props}
96
+
{...stylex.props(styles.root, style)}
97
+
data-header-layout={true}
98
+
/>
99
+
);
95
100
};
96
101
97
102
/**
···
159
164
/**
160
165
* Header layout component with subcomponents.
161
166
*/
167
+
// eslint-disable-next-line react-refresh/only-export-components
162
168
export const HeaderLayout = {
163
169
Root: HeaderLayoutRoot,
164
170
Header: HeaderLayoutHeader,
+23
-14
apps/docs/src/components/image-cropper/index.tsx
+23
-14
apps/docs/src/components/image-cropper/index.tsx
···
1
1
"use client";
2
2
3
+
import type { ComponentProps } from "react";
4
+
3
5
import { Cropper as OriginCropper } from "@origin-space/image-cropper";
6
+
import { useEffectEvent } from "@react-aria/utils";
4
7
import * as stylex from "@stylexjs/stylex";
5
-
import { useEffect, useRef, type ComponentProps } from "react";
8
+
import { useEffect, useState } from "react";
9
+
10
+
import type { StyleXComponentProps } from "../theme/types";
6
11
7
12
import { uiColor } from "../theme/color.stylex";
8
13
import { radius } from "../theme/radius.stylex";
9
-
import { StyleXComponentProps } from "../theme/types";
10
14
11
15
const styles = stylex.create({
12
16
root: {
···
162
166
children,
163
167
...props
164
168
}: ImageCropperRootProps) {
165
-
const imageUrlRef = useRef<string | null>(null);
166
-
const imageUrl =
167
-
typeof image === "string" ? image : URL.createObjectURL(image);
169
+
const [imageUrl, setImageUrl] = useState<string>(() => "");
168
170
169
171
const handleError = () => {
170
172
onCropChange?.(null);
171
173
};
172
174
173
-
// Store the object URL for cleanup
174
-
useEffect(() => {
175
-
if (typeof image !== "string") {
176
-
imageUrlRef.current = imageUrl;
177
-
}
175
+
const createImageUrl = useEffectEvent(() => {
176
+
// Create new URL for new image
177
+
const newUrl =
178
+
typeof image === "string" ? image : URL.createObjectURL(image);
179
+
180
+
// eslint-disable-next-line @eslint-react/hooks-extra/no-direct-set-state-in-use-effect
181
+
setImageUrl(newUrl);
182
+
178
183
return () => {
179
-
if (imageUrlRef.current) {
180
-
URL.revokeObjectURL(imageUrlRef.current);
181
-
imageUrlRef.current = null;
184
+
if (newUrl.startsWith("blob:")) {
185
+
URL.revokeObjectURL(newUrl);
182
186
}
183
187
};
184
-
}, [image, imageUrl]);
188
+
});
189
+
190
+
// Update URL when image changes and clean up previous one
191
+
useEffect(() => {
192
+
return createImageUrl();
193
+
}, [image]);
185
194
186
195
return (
187
196
<OriginCropper.Root
+17
apps/docs/src/components/theme/media-queries.stylex.tsx
+17
apps/docs/src/components/theme/media-queries.stylex.tsx
···
16
16
"2xl": "@container (min-width: 96rem)",
17
17
});
18
18
19
+
/**
20
+
* Named container breakpoints that query parent containers only.
21
+
* Use these when you want to query a parent container by name,
22
+
* preventing elements with containerType from querying themselves.
23
+
*
24
+
* Usage:
25
+
* 1. Set container-name on the parent: containerName: "parent"
26
+
* 2. Use parentContainerBreakpoints in child styles
27
+
*/
28
+
export const parentContainerBreakpoints = stylex.defineConsts({
29
+
sm: "@container parent (min-width: 40rem)",
30
+
md: "@container parent (min-width: 48rem)",
31
+
lg: "@container parent (min-width: 64rem)",
32
+
xl: "@container parent (min-width: 80rem)",
33
+
"2xl": "@container parent (min-width: 96rem)",
34
+
});
35
+
19
36
export const maxBreakpoints = stylex.defineConsts({
20
37
sm: "@media (max-width: 40rem)",
21
38
});
+1
-1
apps/docs/src/components/toast/Toast.tsx
+1
-1
apps/docs/src/components/toast/Toast.tsx
···
59
59
color: {
60
60
default: uiColor.text1,
61
61
":is([data-variant=critical] *)": criticalColor.textContrast,
62
-
":is([data-variant=success] *)": successColor.textContrast,
62
+
":is([data-variant=success] *)": successColor.text2,
63
63
":is([data-variant=warning] *)": warningColor.text2,
64
64
},
65
65
fontWeight: 600,
+6
-3
apps/docs/src/lib/TableOfContents.tsx
+6
-3
apps/docs/src/lib/TableOfContents.tsx
···
6
6
import { primaryColor, uiColor } from "../components/theme/color.stylex";
7
7
import { spacing } from "../components/theme/spacing.stylex";
8
8
import { fontSize } from "../components/theme/typography.stylex";
9
+
import { StyleXComponentProps } from "@/components/theme/types";
9
10
10
11
const ActiveHeaderIdContext = createContext<string | null>(null);
11
12
const LevelContext = createContext(1);
···
21
22
marginTop: spacing["12"],
22
23
overflow: "auto",
23
24
paddingBottom: spacing["20"],
24
-
paddingRight: spacing["8"],
25
25
paddingTop: spacing["12"],
26
26
position: "sticky",
27
27
top: 0,
···
115
115
);
116
116
}
117
117
118
-
export function TableOfContents({ toc }: { toc: Toc }) {
118
+
export function TableOfContents({
119
+
toc,
120
+
style,
121
+
}: StyleXComponentProps<{ toc: Toc }>) {
119
122
const [activeHeaderId, setActiveHeaderId] = useState<string | null>(null);
120
123
121
124
useEffect(() => {
···
140
143
141
144
return (
142
145
<ActiveHeaderIdContext value={activeHeaderId}>
143
-
<nav {...stylex.props(styles.wrapper)}>
146
+
<nav {...stylex.props(styles.wrapper, style)}>
144
147
<LevelContext value={1}>
145
148
<ul {...stylex.props(styles.itemList)}>
146
149
{toc.map((item) => (
+20
-18
apps/docs/src/routes/docs.$.tsx
+20
-18
apps/docs/src/routes/docs.$.tsx
···
30
30
import { modules, pages } from "virtual:content";
31
31
32
32
import { Flex } from "@/components/flex";
33
-
import { Grid } from "@/components/grid";
34
33
import { LinkProps, Link as TypographyLink } from "@/components/link";
35
34
import {
36
35
Blockquote,
···
55
54
import { uiColor } from "../components/theme/color.stylex";
56
55
import { spacing } from "../components/theme/spacing.stylex";
57
56
import { Content } from "@/components/content";
57
+
import { containerBreakpoints } from "../components/theme/media-queries.stylex";
58
58
59
59
const TypographyRouterLink = createLink(TypographyLink);
60
60
61
61
const styles = stylex.create({
62
62
root: {
63
63
width: "100%",
64
-
},
65
-
main: {
66
-
flexGrow: 1,
67
-
maxWidth: "100ch",
68
-
minWidth: 0,
69
-
paddingBottom: spacing["20"],
70
-
paddingLeft: spacing["16"],
71
-
paddingRight: spacing["16"],
72
-
paddingTop: spacing["20"],
64
+
gap: {
65
+
default: spacing["4"],
66
+
[containerBreakpoints.lg]: spacing["8"],
67
+
},
68
+
display: "grid",
69
+
gridTemplateColumns: {
70
+
default: "minmax(0, 1fr)",
71
+
[containerBreakpoints.lg]: "minmax(0, 1fr) 240px",
72
+
},
73
73
},
74
74
pre: {
75
75
borderColor: uiColor.border2,
···
116
116
"@media (prefers-reduced-motion: reduce)": "none",
117
117
},
118
118
transitionTimingFunction: "ease-in-out",
119
+
},
120
+
tableOfContents: {
121
+
display: {
122
+
default: "none",
123
+
[containerBreakpoints.lg]: "block",
124
+
},
119
125
},
120
126
});
121
127
···
289
295
}
290
296
291
297
return (
292
-
<Grid
293
-
columns="minmax(0, max-content) 240px"
294
-
columnGap="4"
295
-
style={styles.root}
296
-
>
297
-
<Content style={styles.main}>
298
+
<div {...stylex.props(styles.root)}>
299
+
<Content>
298
300
<Flex direction="column" gap="4" style={styles.header}>
299
301
<Heading1>{doc.title}</Heading1>
300
302
<Text size="xl" variant="secondary">
···
305
307
<Page components={components} />
306
308
</Suspense>
307
309
</Content>
308
-
{toc && <TableOfContents toc={toc} />}
309
-
</Grid>
310
+
{toc && <TableOfContents toc={toc} style={styles.tableOfContents} />}
311
+
</div>
310
312
);
311
313
}
+7
-27
apps/docs/src/routes/docs.tsx
+7
-27
apps/docs/src/routes/docs.tsx
···
1
-
import * as stylex from "@stylexjs/stylex";
2
1
import {
3
2
createFileRoute,
4
3
LinkProps,
···
11
10
import { Moon, Sun } from "lucide-react";
12
11
import { useEffect, useState } from "react";
13
12
14
-
import { Grid } from "@/components/grid";
15
13
import { IconButton } from "@/components/icon-button";
16
14
import {
17
15
Sidebar,
···
22
20
} from "@/components/sidebar";
23
21
import { Text } from "@/components/typography/text";
24
22
25
-
import { uiColor } from "../components/theme/color.stylex";
26
23
import { Flex } from "@/components/flex";
27
24
import { ThemePicker } from "@/lib/ThemePicker";
25
+
import { SidebarLayout } from "@/components/sidebar-layout";
28
26
29
27
const SidebarItemLink = createLink(SidebarItem);
30
-
31
-
const styles = stylex.create({
32
-
root: {
33
-
width: "100%",
34
-
},
35
-
aside: {
36
-
backgroundColor: uiColor.bgSubtle,
37
-
borderRightColor: uiColor.border2,
38
-
borderRightStyle: "solid",
39
-
borderRightWidth: 1,
40
-
boxSizing: "border-box",
41
-
height: "100vh",
42
-
overflow: "auto",
43
-
overscrollBehavior: "contain",
44
-
position: "sticky",
45
-
top: 0,
46
-
},
47
-
});
48
28
49
29
interface SidebarItem {
50
30
id: string;
···
244
224
245
225
function RouteComponent() {
246
226
return (
247
-
<Grid columns="max-content 1fr" columnGap="4" style={styles.root}>
248
-
<aside {...stylex.props(styles.aside)}>
227
+
<SidebarLayout.Root>
228
+
<SidebarLayout.Sidebar>
249
229
<DocSidebar />
250
-
</aside>
251
-
<main>
230
+
</SidebarLayout.Sidebar>
231
+
<SidebarLayout.Page>
252
232
<Outlet />
253
-
</main>
254
-
</Grid>
233
+
</SidebarLayout.Page>
234
+
</SidebarLayout.Root>
255
235
);
256
236
}
+2
packages/hip-ui/src/cli/install.tsx
+2
packages/hip-ui/src/cli/install.tsx
···
46
46
import { gridConfig } from "../components/grid/grid-config.js";
47
47
import { headerLayoutConfig } from "../components/header-layout/header-layout-config.js";
48
48
import { hoverCardConfig } from "../components/hover-card/hover-card-config.js";
49
+
import { sidebarLayoutConfig } from "../components/sidebar-layout/sidebar-layout-config.js";
49
50
import { iconButtonConfig } from "../components/icon-button/icon-button-config.js";
50
51
import { imageCropperConfig } from "../components/image-cropper/image-cropper-config.js";
51
52
import { kbdConfig } from "../components/kbd/kbd-config.js";
···
143
144
footerConfig,
144
145
formConfig,
145
146
headerLayoutConfig,
147
+
sidebarLayoutConfig,
146
148
tableConfig,
147
149
sliderConfig,
148
150
tagGroupConfig,
+1
packages/hip-ui/src/components/drawer/index.tsx
+1
packages/hip-ui/src/components/drawer/index.tsx
+28
-22
packages/hip-ui/src/components/header-layout/index.tsx
+28
-22
packages/hip-ui/src/components/header-layout/index.tsx
···
2
2
3
3
import * as stylex from "@stylexjs/stylex";
4
4
5
+
import { primaryColor, uiColor } from "../theme/color.stylex";
6
+
import { containerBreakpoints } from "../theme/media-queries.stylex";
5
7
import { spacing } from "../theme/spacing.stylex";
6
8
import { StyleXComponentProps } from "../theme/types";
7
-
import { primaryColor, uiColor } from "../theme/color.stylex";
8
-
import { primary } from "../theme/semantic-color.stylex";
9
-
import { containerBreakpoints } from "../theme/media-queries.stylex";
10
9
11
10
const styles = stylex.create({
12
11
root: {
13
12
"--page-content-max-width": "1280px",
14
-
minHeight: "100vh",
13
+
backgroundColor: uiColor.bg,
14
+
containerType: "inline-size",
15
15
display: "flex",
16
16
flexDirection: "column",
17
-
backgroundColor: uiColor.bg,
18
-
containerType: "inline-size",
17
+
minHeight: "100vh",
19
18
width: "100cqw",
20
19
},
21
20
header: {
22
21
flexShrink: 0,
23
22
},
24
23
page: {
24
+
boxSizing: "border-box",
25
25
flexGrow: 1,
26
+
marginLeft: "auto",
27
+
marginRight: "auto",
28
+
maxWidth: "var(--page-content-max-width)",
26
29
minHeight: 0,
27
-
paddingTop: {
28
-
default: spacing["2"],
29
-
[containerBreakpoints.sm]: spacing["6"],
30
-
},
31
30
paddingBottom: {
32
31
default: spacing["10"],
33
32
[containerBreakpoints.sm]: spacing["12"],
···
40
39
default: spacing["4"],
41
40
[containerBreakpoints.sm]: spacing["8"],
42
41
},
43
-
maxWidth: "var(--page-content-max-width)",
42
+
paddingTop: {
43
+
default: spacing["2"],
44
+
[containerBreakpoints.sm]: spacing["6"],
45
+
},
44
46
width: "100%",
45
-
marginLeft: "auto",
46
-
marginRight: "auto",
47
-
boxSizing: "border-box",
48
47
},
49
48
footer: {
50
49
flexShrink: 0,
51
50
},
52
51
hero: {
53
-
width: "100%",
54
-
boxSizing: "border-box",
55
52
backgroundColor: primaryColor.solid1,
53
+
boxSizing: "border-box",
56
54
color: primaryColor.textContrast,
57
-
paddingTop: {
55
+
paddingBottom: {
58
56
default: spacing["6"],
59
57
[containerBreakpoints.sm]: spacing["12"],
60
58
},
61
-
paddingBottom: {
59
+
paddingTop: {
62
60
default: spacing["6"],
63
61
[containerBreakpoints.sm]: spacing["12"],
64
62
},
63
+
width: "100%",
65
64
},
66
65
heroContent: {
67
-
maxWidth: "var(--page-content-max-width)",
68
-
width: "100%",
66
+
boxSizing: "border-box",
69
67
marginLeft: "auto",
70
68
marginRight: "auto",
71
-
boxSizing: "border-box",
69
+
maxWidth: "var(--page-content-max-width)",
72
70
paddingLeft: {
73
71
default: spacing["4"],
74
72
[containerBreakpoints.sm]: spacing["8"],
···
77
75
default: spacing["4"],
78
76
[containerBreakpoints.sm]: spacing["8"],
79
77
},
78
+
width: "100%",
80
79
},
81
80
});
82
81
···
91
90
style,
92
91
...props
93
92
}: HeaderLayoutRootProps) => {
94
-
return <div {...props} {...stylex.props(styles.root, style)} />;
93
+
return (
94
+
<div
95
+
{...props}
96
+
{...stylex.props(styles.root, style)}
97
+
data-header-layout={true}
98
+
/>
99
+
);
95
100
};
96
101
97
102
/**
···
159
164
/**
160
165
* Header layout component with subcomponents.
161
166
*/
167
+
// eslint-disable-next-line react-refresh/only-export-components
162
168
export const HeaderLayout = {
163
169
Root: HeaderLayoutRoot,
164
170
Header: HeaderLayoutHeader,