A design system in a box.
hip-ui.tngl.io/docs/introduction
eslint and bug fixes
+598
-289
+2
-2
apps/docs/package.json
+2
-2
apps/docs/package.json
···
19
19
"@react-types/shared": "^3.32.1",
20
20
"@shikijs/rehype": "^3.13.0",
21
21
"@stefanprobst/rehype-extract-toc": "^3.0.0",
22
-
"@stylexjs/stylex": "^0.17.0",
22
+
"@stylexjs/stylex": "^0.16.2",
23
23
"@stylexjs/unplugin": "^0.17.0",
24
24
"@tailwindcss/vite": "^4.1.16",
25
25
"@tanstack/nitro-v2-vite-plugin": "^1.133.19",
···
36
36
"dedent": "catalog:",
37
37
"glob": "^11.0.3",
38
38
"lightningcss": "^1.30.2",
39
-
"lucide-react": "^0.554.0",
39
+
"lucide-react": "^0.545.0",
40
40
"magic-string": "^0.30.21",
41
41
"match-container": "^0.1.0",
42
42
"raf-throttle": "^2.0.6",
+70
apps/docs/src/components/avatar/index.tsx
+70
apps/docs/src/components/avatar/index.tsx
···
1
1
import * as stylex from "@stylexjs/stylex";
2
2
import { use, useLayoutEffect, useState } from "react";
3
+
import {
4
+
Button as AriaButton,
5
+
ButtonProps as AriaButtonProps,
6
+
} from "react-aria-components";
3
7
4
8
import { SizeContext } from "../context";
9
+
import {
10
+
animationDuration,
11
+
animationTimingFunction,
12
+
} from "../theme/animations.stylex";
5
13
import { uiColor } from "../theme/color.stylex";
6
14
import { mediaQueries } from "../theme/media-queries.stylex";
7
15
import { radius } from "../theme/radius.stylex";
···
24
32
backgroundColor: uiColor.component1,
25
33
display: "flex",
26
34
justifyContent: "center",
35
+
position: "relative",
27
36
28
37
// eslint-disable-next-line @stylexjs/valid-styles
29
38
cornerShape: "squircle",
···
84
93
fallbackXl: {
85
94
fontSize: fontSize["xl"],
86
95
},
96
+
buttonWrapper: {
97
+
margin: 0,
98
+
padding: 0,
99
+
borderWidth: 0,
100
+
backgroundColor: "transparent",
101
+
cursor: "pointer",
102
+
display: "inline-block",
103
+
},
104
+
overlay: {
105
+
backgroundColor: uiColor.solid2,
106
+
opacity: {
107
+
default: 0,
108
+
":is([data-avatar-button][data-hovered] *)": 0.5,
109
+
},
110
+
pointerEvents: "none",
111
+
position: "absolute",
112
+
transitionDuration: animationDuration.default,
113
+
transitionProperty: "opacity",
114
+
transitionTimingFunction: animationTimingFunction.easeOut,
115
+
bottom: 0,
116
+
left: 0,
117
+
right: 0,
118
+
top: 0,
119
+
},
87
120
});
88
121
89
122
export interface AvatarProps extends StyleXComponentProps<
···
159
192
{fallback}
160
193
</div>
161
194
)}
195
+
<div {...stylex.props(styles.overlay)} />
162
196
</div>
163
197
);
164
198
}
199
+
200
+
export interface AvatarButtonProps
201
+
extends
202
+
StyleXComponentProps<AriaButtonProps>,
203
+
Pick<AvatarProps, "size" | "src" | "alt" | "fallback"> {
204
+
/** The style for the avatar. */
205
+
avatarStyle?: AvatarProps["style"];
206
+
}
207
+
208
+
export function AvatarButton({
209
+
avatarStyle,
210
+
style,
211
+
size: sizeProp,
212
+
src,
213
+
alt,
214
+
fallback,
215
+
...buttonProps
216
+
}: AvatarButtonProps) {
217
+
const size = sizeProp || use(SizeContext);
218
+
const avatarProps: AvatarProps = {
219
+
src,
220
+
alt,
221
+
fallback,
222
+
size,
223
+
};
224
+
225
+
return (
226
+
<AriaButton
227
+
data-avatar-button
228
+
{...buttonProps}
229
+
{...stylex.props(styles.buttonWrapper, style)}
230
+
>
231
+
<Avatar {...avatarProps} size={size} style={avatarStyle} />
232
+
</AriaButton>
233
+
);
234
+
}
+2
-1
apps/docs/src/components/card/index.tsx
+2
-1
apps/docs/src/components/card/index.tsx
···
1
1
import * as stylex from "@stylexjs/stylex";
2
2
import { use } from "react";
3
3
4
+
import type { Size, StyleXComponentProps } from "../theme/types";
5
+
4
6
import { AspectRatio, AspectRatioImage } from "../aspect-ratio";
5
7
import { SizeContext } from "../context";
6
8
import { mediaQueries } from "../theme/media-queries.stylex";
7
9
import { radius } from "../theme/radius.stylex";
8
10
import { ui } from "../theme/semantic-color.stylex";
9
11
import { spacing } from "../theme/spacing.stylex";
10
-
import { Size, StyleXComponentProps } from "../theme/types";
11
12
import { fontFamily, fontSize, fontWeight } from "../theme/typography.stylex";
12
13
13
14
const styles = stylex.create({
+40
apps/docs/src/components/file-drop-zone/index.tsx
+40
apps/docs/src/components/file-drop-zone/index.tsx
···
4
4
import {
5
5
FileTrigger as AriaFileTrigger,
6
6
FileTriggerProps as AriaFileTriggerProps,
7
+
Button,
8
+
ButtonProps,
7
9
DropItem,
8
10
DropZone,
9
11
DropZoneProps,
10
12
} from "react-aria-components";
11
13
14
+
import {
15
+
animationDuration,
16
+
animationTimingFunction,
17
+
} from "../theme/animations.stylex";
12
18
import { primaryColor, uiColor } from "../theme/color.stylex";
13
19
import { mediaQueries } from "../theme/media-queries.stylex";
14
20
import { radius } from "../theme/radius.stylex";
21
+
import { ui } from "../theme/semantic-color.stylex";
15
22
import { spacing } from "../theme/spacing.stylex";
23
+
import { StyleXComponentProps } from "../theme/types";
16
24
17
25
async function getFiles(items: DropItem[]): Promise<File[]> {
18
26
return Promise.all(
···
38
46
":is([data-drop-target])": "solid",
39
47
},
40
48
borderWidth: 2,
49
+
overflow: "hidden",
41
50
backgroundColor: {
42
51
default: uiColor.bgSubtle,
43
52
":is([data-drop-target])": primaryColor.component1,
44
53
},
45
54
boxSizing: "border-box",
55
+
position: "relative",
46
56
47
57
alignItems: "center",
48
58
display: "flex",
49
59
flexDirection: "column",
50
60
justifyContent: "center",
51
61
},
62
+
defaultTrigger: {
63
+
inset: 0,
64
+
borderWidth: 0,
65
+
backgroundColor: "transparent",
66
+
opacity: {
67
+
default: 0,
68
+
":is([data-hovered])": 0.5,
69
+
},
70
+
position: "absolute",
71
+
transitionDuration: animationDuration.default,
72
+
transitionProperty: "opacity",
73
+
transitionTimingFunction: animationTimingFunction.easeInOut,
74
+
},
52
75
});
53
76
54
77
interface FileDropZoneProps
···
104
127
</DropZone>
105
128
);
106
129
};
130
+
131
+
interface FileDropDefaultTriggerProps extends StyleXComponentProps<ButtonProps> {}
132
+
133
+
export const FileDropDefaultTrigger = ({
134
+
children,
135
+
style,
136
+
...props
137
+
}: FileDropDefaultTriggerProps) => {
138
+
return (
139
+
<Button
140
+
{...stylex.props(styles.defaultTrigger, ui.bgGhost, style)}
141
+
{...props}
142
+
>
143
+
{children}
144
+
</Button>
145
+
);
146
+
};
+7
-7
apps/docs/src/components/header-layout/index.tsx
+7
-7
apps/docs/src/components/header-layout/index.tsx
···
62
62
default: spacing["6"],
63
63
[containerBreakpoints.sm]: spacing["12"],
64
64
},
65
+
},
66
+
heroContent: {
67
+
maxWidth: "var(--page-content-max-width)",
68
+
width: "100%",
69
+
marginLeft: "auto",
70
+
marginRight: "auto",
71
+
boxSizing: "border-box",
65
72
paddingLeft: {
66
73
default: spacing["4"],
67
74
[containerBreakpoints.sm]: spacing["8"],
···
70
77
default: spacing["4"],
71
78
[containerBreakpoints.sm]: spacing["8"],
72
79
},
73
-
},
74
-
heroContent: {
75
-
maxWidth: "var(--page-content-max-width)",
76
-
width: "100%",
77
-
marginLeft: "auto",
78
-
marginRight: "auto",
79
-
boxSizing: "border-box",
80
80
},
81
81
});
82
82
+3
apps/docs/src/components/table/index.tsx
+3
apps/docs/src/components/table/index.tsx
+5
-4
apps/docs/src/components/typography/text.tsx
+5
-4
apps/docs/src/components/typography/text.tsx
···
1
1
import * as stylex from "@stylexjs/stylex";
2
2
3
+
import type { TextVariant, ThemeKeys } from "../theme/types";
4
+
3
5
import { criticalColor, uiColor } from "../theme/color.stylex";
4
-
import { TextVariant, ThemeKeys } from "../theme/types";
5
6
import {
6
7
fontFamily,
7
8
fontSize,
···
76
77
React.ComponentProps<"span">,
77
78
"style" | "className"
78
79
> {
79
-
style?: stylex.StyleXStyles | stylex.StyleXStyles[];
80
+
style?: stylex.StyleXStyles | Array<stylex.StyleXStyles>;
80
81
font?: ThemeKeys<typeof fontFamily>;
81
82
weight?: ThemeKeys<typeof fontWeight>;
82
83
size?: ThemeKeys<typeof fontSize>;
···
94
95
weight,
95
96
size,
96
97
leading,
97
-
tracking,
98
+
tracking: trackingProp,
98
99
variant,
99
100
strikethrough = false,
100
101
align,
···
109
110
weight && styles[weight],
110
111
size && styles[`font-${size}`],
111
112
leading && styles[`leading-${leading}`],
112
-
tracking && styles[`tracking-${tracking}`],
113
+
trackingProp && styles[`tracking-${trackingProp}`],
113
114
variant && styles[`variant-${variant}`],
114
115
strikethrough && styles.strikethrough,
115
116
align && styles[align],
+7
apps/docs/src/docs/components/content/avatar.mdx
+7
apps/docs/src/docs/components/content/avatar.mdx
···
9
9
import { AvatarSizes } from '../../../examples/avatar/sizes'
10
10
import { AvatarGroup } from '../../../examples/avatar/group'
11
11
import { AvatarFallbacks } from '../../../examples/avatar/fallbacks'
12
+
import { AvatarButtonExample } from '../../../examples/avatar/button'
12
13
13
14
<Example src={Basic} />
14
15
···
45
46
Avatars display fallback content when images fail to load or are not provided.
46
47
47
48
<Example src={AvatarFallbacks} />
49
+
50
+
### Button
51
+
52
+
Avatars can be wrapped in a button component for interactive use. The `AvatarButton` component provides hover effects with a fade-in overlay.
53
+
54
+
<Example src={AvatarButtonExample} />
48
55
49
56
## Related Components
50
57
+9
apps/docs/src/docs/components/form/file-drop-zone.mdx
+9
apps/docs/src/docs/components/form/file-drop-zone.mdx
···
6
6
import { PropDocs } from '../../../lib/PropDocs'
7
7
import { Example } from '../../../lib/Example'
8
8
import { Basic } from '../../../examples/file-drop-zone/basic'
9
+
import { DefaultTrigger } from '../../../examples/file-drop-zone/default-trigger'
9
10
10
11
<Example src={Basic} />
11
12
···
22
23
This component is built using the [React Aria DropZone](https://react-spectrum.adobe.com/react-aria/DropZone.html) and [React Aria FileTrigger](https://react-spectrum.adobe.com/react-spectrum/FileTrigger.html#filetrigger).
23
24
24
25
<PropDocs components={["FileDropZone"]} />
26
+
27
+
## Features
28
+
29
+
### Default Trigger
30
+
31
+
Use `FileDropDefaultTrigger` to make the entire drop zone area clickable. The trigger button is positioned absolutely to cover the entire drop zone.
32
+
33
+
<Example src={DefaultTrigger} />
25
34
26
35
## Related Components
27
36
+18
apps/docs/src/examples/file-drop-zone/default-trigger.tsx
+18
apps/docs/src/examples/file-drop-zone/default-trigger.tsx
···
1
+
import {
2
+
FileDropZone,
3
+
FileDropDefaultTrigger,
4
+
} from "@/components/file-drop-zone";
5
+
import { CameraIcon } from "lucide-react";
6
+
7
+
export function DefaultTrigger() {
8
+
return (
9
+
<FileDropZone
10
+
onAddFiles={(files) => {
11
+
console.log("Files added:", files);
12
+
}}
13
+
>
14
+
<CameraIcon />
15
+
<FileDropDefaultTrigger />
16
+
</FileDropZone>
17
+
);
18
+
}
+63
-63
apps/docs/src/routeTree.gen.ts
+63
-63
apps/docs/src/routeTree.gen.ts
···
8
8
// You should NOT make any changes in this file as it will be overwritten.
9
9
// Additionally, you should also exclude this file from your linter and/or formatter to prevent it from being checked or modified.
10
10
11
-
import { Route as rootRouteImport } from "./routes/__root";
12
-
import { Route as DocsRouteImport } from "./routes/docs";
13
-
import { Route as IndexRouteImport } from "./routes/index";
14
-
import { Route as DocsSplatRouteImport } from "./routes/docs.$";
11
+
import { Route as rootRouteImport } from './routes/__root'
12
+
import { Route as DocsRouteImport } from './routes/docs'
13
+
import { Route as IndexRouteImport } from './routes/index'
14
+
import { Route as DocsSplatRouteImport } from './routes/docs.$'
15
15
16
16
const DocsRoute = DocsRouteImport.update({
17
-
id: "/docs",
18
-
path: "/docs",
17
+
id: '/docs',
18
+
path: '/docs',
19
19
getParentRoute: () => rootRouteImport,
20
-
} as any);
20
+
} as any)
21
21
const IndexRoute = IndexRouteImport.update({
22
-
id: "/",
23
-
path: "/",
22
+
id: '/',
23
+
path: '/',
24
24
getParentRoute: () => rootRouteImport,
25
-
} as any);
25
+
} as any)
26
26
const DocsSplatRoute = DocsSplatRouteImport.update({
27
-
id: "/$",
28
-
path: "/$",
27
+
id: '/$',
28
+
path: '/$',
29
29
getParentRoute: () => DocsRoute,
30
-
} as any);
30
+
} as any)
31
31
32
32
export interface FileRoutesByFullPath {
33
-
"/": typeof IndexRoute;
34
-
"/docs": typeof DocsRouteWithChildren;
35
-
"/docs/$": typeof DocsSplatRoute;
33
+
'/': typeof IndexRoute
34
+
'/docs': typeof DocsRouteWithChildren
35
+
'/docs/$': typeof DocsSplatRoute
36
36
}
37
37
export interface FileRoutesByTo {
38
-
"/": typeof IndexRoute;
39
-
"/docs": typeof DocsRouteWithChildren;
40
-
"/docs/$": typeof DocsSplatRoute;
38
+
'/': typeof IndexRoute
39
+
'/docs': typeof DocsRouteWithChildren
40
+
'/docs/$': typeof DocsSplatRoute
41
41
}
42
42
export interface FileRoutesById {
43
-
__root__: typeof rootRouteImport;
44
-
"/": typeof IndexRoute;
45
-
"/docs": typeof DocsRouteWithChildren;
46
-
"/docs/$": typeof DocsSplatRoute;
43
+
__root__: typeof rootRouteImport
44
+
'/': typeof IndexRoute
45
+
'/docs': typeof DocsRouteWithChildren
46
+
'/docs/$': typeof DocsSplatRoute
47
47
}
48
48
export interface FileRouteTypes {
49
-
fileRoutesByFullPath: FileRoutesByFullPath;
50
-
fullPaths: "/" | "/docs" | "/docs/$";
51
-
fileRoutesByTo: FileRoutesByTo;
52
-
to: "/" | "/docs" | "/docs/$";
53
-
id: "__root__" | "/" | "/docs" | "/docs/$";
54
-
fileRoutesById: FileRoutesById;
49
+
fileRoutesByFullPath: FileRoutesByFullPath
50
+
fullPaths: '/' | '/docs' | '/docs/$'
51
+
fileRoutesByTo: FileRoutesByTo
52
+
to: '/' | '/docs' | '/docs/$'
53
+
id: '__root__' | '/' | '/docs' | '/docs/$'
54
+
fileRoutesById: FileRoutesById
55
55
}
56
56
export interface RootRouteChildren {
57
-
IndexRoute: typeof IndexRoute;
58
-
DocsRoute: typeof DocsRouteWithChildren;
57
+
IndexRoute: typeof IndexRoute
58
+
DocsRoute: typeof DocsRouteWithChildren
59
59
}
60
60
61
-
declare module "@tanstack/react-router" {
61
+
declare module '@tanstack/react-router' {
62
62
interface FileRoutesByPath {
63
-
"/docs": {
64
-
id: "/docs";
65
-
path: "/docs";
66
-
fullPath: "/docs";
67
-
preLoaderRoute: typeof DocsRouteImport;
68
-
parentRoute: typeof rootRouteImport;
69
-
};
70
-
"/": {
71
-
id: "/";
72
-
path: "/";
73
-
fullPath: "/";
74
-
preLoaderRoute: typeof IndexRouteImport;
75
-
parentRoute: typeof rootRouteImport;
76
-
};
77
-
"/docs/$": {
78
-
id: "/docs/$";
79
-
path: "/$";
80
-
fullPath: "/docs/$";
81
-
preLoaderRoute: typeof DocsSplatRouteImport;
82
-
parentRoute: typeof DocsRoute;
83
-
};
63
+
'/docs': {
64
+
id: '/docs'
65
+
path: '/docs'
66
+
fullPath: '/docs'
67
+
preLoaderRoute: typeof DocsRouteImport
68
+
parentRoute: typeof rootRouteImport
69
+
}
70
+
'/': {
71
+
id: '/'
72
+
path: '/'
73
+
fullPath: '/'
74
+
preLoaderRoute: typeof IndexRouteImport
75
+
parentRoute: typeof rootRouteImport
76
+
}
77
+
'/docs/$': {
78
+
id: '/docs/$'
79
+
path: '/$'
80
+
fullPath: '/docs/$'
81
+
preLoaderRoute: typeof DocsSplatRouteImport
82
+
parentRoute: typeof DocsRoute
83
+
}
84
84
}
85
85
}
86
86
87
87
interface DocsRouteChildren {
88
-
DocsSplatRoute: typeof DocsSplatRoute;
88
+
DocsSplatRoute: typeof DocsSplatRoute
89
89
}
90
90
91
91
const DocsRouteChildren: DocsRouteChildren = {
92
92
DocsSplatRoute: DocsSplatRoute,
93
-
};
93
+
}
94
94
95
-
const DocsRouteWithChildren = DocsRoute._addFileChildren(DocsRouteChildren);
95
+
const DocsRouteWithChildren = DocsRoute._addFileChildren(DocsRouteChildren)
96
96
97
97
const rootRouteChildren: RootRouteChildren = {
98
98
IndexRoute: IndexRoute,
99
99
DocsRoute: DocsRouteWithChildren,
100
-
};
100
+
}
101
101
export const routeTree = rootRouteImport
102
102
._addFileChildren(rootRouteChildren)
103
-
._addFileTypes<FileRouteTypes>();
103
+
._addFileTypes<FileRouteTypes>()
104
104
105
-
import type { getRouter } from "./router.tsx";
106
-
import type { createStart } from "@tanstack/react-start";
107
-
declare module "@tanstack/react-start" {
105
+
import type { getRouter } from './router.tsx'
106
+
import type { createStart } from '@tanstack/react-start'
107
+
declare module '@tanstack/react-start' {
108
108
interface Register {
109
-
ssr: true;
110
-
router: Awaited<ReturnType<typeof getRouter>>;
109
+
ssr: true
110
+
router: Awaited<ReturnType<typeof getRouter>>
111
111
}
112
112
}
+6
-1
packages/hip-ui/src/components/aspect-ratio/index.tsx
+6
-1
packages/hip-ui/src/components/aspect-ratio/index.tsx
···
73
73
React.ComponentProps<"img">
74
74
> {}
75
75
76
-
export function AspectRatioImage({ style, ...props }: AspectRatioImageProps) {
76
+
export function AspectRatioImage({
77
+
style,
78
+
children,
79
+
...props
80
+
}: AspectRatioImageProps) {
77
81
return (
78
82
<div {...stylex.props(styles.imageContainer, style)}>
79
83
{/* eslint-disable-next-line jsx-a11y/alt-text */}
80
84
<img {...props} {...stylex.props(styles.image, style)} />
85
+
{children}
81
86
</div>
82
87
);
83
88
}
+70
packages/hip-ui/src/components/avatar/index.tsx
+70
packages/hip-ui/src/components/avatar/index.tsx
···
1
1
import * as stylex from "@stylexjs/stylex";
2
2
import { use, useLayoutEffect, useState } from "react";
3
+
import {
4
+
Button as AriaButton,
5
+
ButtonProps as AriaButtonProps,
6
+
} from "react-aria-components";
3
7
4
8
import { SizeContext } from "../context";
9
+
import {
10
+
animationDuration,
11
+
animationTimingFunction,
12
+
} from "../theme/animations.stylex";
5
13
import { uiColor } from "../theme/color.stylex";
6
14
import { mediaQueries } from "../theme/media-queries.stylex";
7
15
import { radius } from "../theme/radius.stylex";
···
24
32
backgroundColor: uiColor.component1,
25
33
display: "flex",
26
34
justifyContent: "center",
35
+
position: "relative",
27
36
28
37
// eslint-disable-next-line @stylexjs/valid-styles
29
38
cornerShape: "squircle",
···
84
93
fallbackXl: {
85
94
fontSize: fontSize["xl"],
86
95
},
96
+
buttonWrapper: {
97
+
margin: 0,
98
+
padding: 0,
99
+
borderWidth: 0,
100
+
backgroundColor: "transparent",
101
+
cursor: "pointer",
102
+
display: "inline-block",
103
+
},
104
+
overlay: {
105
+
backgroundColor: uiColor.solid2,
106
+
opacity: {
107
+
default: 0,
108
+
":is([data-avatar-button][data-hovered] *)": 0.5,
109
+
},
110
+
pointerEvents: "none",
111
+
position: "absolute",
112
+
transitionDuration: animationDuration.default,
113
+
transitionProperty: "opacity",
114
+
transitionTimingFunction: animationTimingFunction.easeOut,
115
+
bottom: 0,
116
+
left: 0,
117
+
right: 0,
118
+
top: 0,
119
+
},
87
120
});
88
121
89
122
export interface AvatarProps extends StyleXComponentProps<
···
159
192
{fallback}
160
193
</div>
161
194
)}
195
+
<div {...stylex.props(styles.overlay)} />
162
196
</div>
163
197
);
164
198
}
199
+
200
+
export interface AvatarButtonProps
201
+
extends
202
+
StyleXComponentProps<AriaButtonProps>,
203
+
Pick<AvatarProps, "size" | "src" | "alt" | "fallback"> {
204
+
/** The style for the avatar. */
205
+
avatarStyle?: AvatarProps["style"];
206
+
}
207
+
208
+
export function AvatarButton({
209
+
avatarStyle,
210
+
style,
211
+
size: sizeProp,
212
+
src,
213
+
alt,
214
+
fallback,
215
+
...buttonProps
216
+
}: AvatarButtonProps) {
217
+
const size = sizeProp || use(SizeContext);
218
+
const avatarProps: AvatarProps = {
219
+
src,
220
+
alt,
221
+
fallback,
222
+
size,
223
+
};
224
+
225
+
return (
226
+
<AriaButton
227
+
data-avatar-button
228
+
{...buttonProps}
229
+
{...stylex.props(styles.buttonWrapper, style)}
230
+
>
231
+
<Avatar {...avatarProps} size={size} style={avatarStyle} />
232
+
</AriaButton>
233
+
);
234
+
}
+2
-1
packages/hip-ui/src/components/card/index.tsx
+2
-1
packages/hip-ui/src/components/card/index.tsx
···
1
1
import * as stylex from "@stylexjs/stylex";
2
2
import { use } from "react";
3
3
4
+
import type { Size, StyleXComponentProps } from "../theme/types";
5
+
4
6
import { AspectRatio, AspectRatioImage } from "../aspect-ratio";
5
7
import { SizeContext } from "../context";
6
8
import { mediaQueries } from "../theme/media-queries.stylex";
7
9
import { radius } from "../theme/radius.stylex";
8
10
import { ui } from "../theme/semantic-color.stylex";
9
11
import { spacing } from "../theme/spacing.stylex";
10
-
import { Size, StyleXComponentProps } from "../theme/types";
11
12
import { fontFamily, fontSize, fontWeight } from "../theme/typography.stylex";
12
13
13
14
const styles = stylex.create({
+40
packages/hip-ui/src/components/file-drop-zone/index.tsx
+40
packages/hip-ui/src/components/file-drop-zone/index.tsx
···
4
4
import {
5
5
FileTrigger as AriaFileTrigger,
6
6
FileTriggerProps as AriaFileTriggerProps,
7
+
Button,
8
+
ButtonProps,
7
9
DropItem,
8
10
DropZone,
9
11
DropZoneProps,
10
12
} from "react-aria-components";
11
13
14
+
import {
15
+
animationDuration,
16
+
animationTimingFunction,
17
+
} from "../theme/animations.stylex";
12
18
import { primaryColor, uiColor } from "../theme/color.stylex";
13
19
import { mediaQueries } from "../theme/media-queries.stylex";
14
20
import { radius } from "../theme/radius.stylex";
21
+
import { ui } from "../theme/semantic-color.stylex";
15
22
import { spacing } from "../theme/spacing.stylex";
23
+
import { StyleXComponentProps } from "../theme/types";
16
24
17
25
async function getFiles(items: DropItem[]): Promise<File[]> {
18
26
return Promise.all(
···
38
46
":is([data-drop-target])": "solid",
39
47
},
40
48
borderWidth: 2,
49
+
overflow: "hidden",
41
50
backgroundColor: {
42
51
default: uiColor.bgSubtle,
43
52
":is([data-drop-target])": primaryColor.component1,
44
53
},
45
54
boxSizing: "border-box",
55
+
position: "relative",
46
56
47
57
alignItems: "center",
48
58
display: "flex",
49
59
flexDirection: "column",
50
60
justifyContent: "center",
51
61
},
62
+
defaultTrigger: {
63
+
inset: 0,
64
+
borderWidth: 0,
65
+
backgroundColor: "transparent",
66
+
opacity: {
67
+
default: 0,
68
+
":is([data-hovered])": 0.5,
69
+
},
70
+
position: "absolute",
71
+
transitionDuration: animationDuration.default,
72
+
transitionProperty: "opacity",
73
+
transitionTimingFunction: animationTimingFunction.easeInOut,
74
+
},
52
75
});
53
76
54
77
interface FileDropZoneProps
···
104
127
</DropZone>
105
128
);
106
129
};
130
+
131
+
interface FileDropDefaultTriggerProps extends StyleXComponentProps<ButtonProps> {}
132
+
133
+
export const FileDropDefaultTrigger = ({
134
+
children,
135
+
style,
136
+
...props
137
+
}: FileDropDefaultTriggerProps) => {
138
+
return (
139
+
<Button
140
+
{...stylex.props(styles.defaultTrigger, ui.bgGhost, style)}
141
+
{...props}
142
+
>
143
+
{children}
144
+
</Button>
145
+
);
146
+
};
+54
-39
packages/hip-ui/src/components/table/index.tsx
+54
-39
packages/hip-ui/src/components/table/index.tsx
···
1
+
import type {
2
+
CellProps as AriaCellProps,
3
+
ColumnProps as AriaColumnProps,
4
+
RowProps as AriaRowProps,
5
+
TableBodyProps as AriaTableBodyProps,
6
+
TableHeaderProps as AriaTableHeaderProps,
7
+
TableProps as AriaTableProps,
8
+
DropIndicatorProps,
9
+
} from "react-aria-components";
10
+
1
11
import * as stylex from "@stylexjs/stylex";
2
12
import { ArrowDown, ArrowUp, GripVertical } from "lucide-react";
3
13
import { use } from "react";
4
14
import {
5
-
TableBodyProps as AriaTableBodyProps,
6
-
TableBody as AriaTableBody,
7
-
TableProps as AriaTableProps,
15
+
Cell as AriaCell,
16
+
Column as AriaColumn,
17
+
Row as AriaRow,
8
18
Table as AriaTable,
19
+
TableBody as AriaTableBody,
9
20
TableHeader as AriaTableHeader,
10
-
TableHeaderProps as AriaTableHeaderProps,
11
-
useTableOptions,
12
-
Column as AriaColumn,
13
21
Collection,
14
-
Row as AriaRow,
15
-
RowProps as AriaRowProps,
16
-
Cell as AriaCell,
17
-
ColumnProps as AriaColumnProps,
18
-
CellProps as AriaCellProps,
19
22
ColumnResizer,
20
-
DropIndicatorProps,
21
23
DropIndicator,
22
24
TableLayout,
23
25
Virtualizer,
26
+
useTableOptions,
24
27
} from "react-aria-components";
25
28
29
+
import type { Size, StyleXComponentProps } from "../theme/types";
30
+
26
31
import { Checkbox } from "../checkbox";
27
32
import { SizeContext } from "../context";
28
33
import { Flex } from "../flex";
29
34
import { IconButton } from "../icon-button";
30
35
import { primaryColor, uiColor } from "../theme/color.stylex";
31
36
import { spacing } from "../theme/spacing.stylex";
32
-
import { Size, StyleXComponentProps } from "../theme/types";
33
37
import { LabelText } from "../typography";
34
38
35
39
const styles = stylex.create({
···
42
46
default: uiColor.bg,
43
47
":has(td:hover)": uiColor.bgSubtle,
44
48
},
49
+
cursor: {
50
+
":is([data-href])": "pointer",
51
+
},
45
52
},
46
53
column: {
47
54
padding: 0,
···
56
63
justifyContent: "space-between",
57
64
paddingLeft: {
58
65
default: spacing["2"],
59
-
":is(:first-child)": 0,
66
+
":is(:first-child > *)": spacing["2"],
60
67
},
61
68
},
62
69
tableBody: {},
···
87
94
":is([data-table-size=md] *)": spacing["2"],
88
95
},
89
96
paddingLeft: {
90
-
default: spacing["2"],
97
+
default: spacing["4"],
91
98
":is([data-table-size=lg] *:not(:first-child))": spacing["4"],
92
99
":is([data-table-size=md] *:not(:first-child))": spacing["3"],
93
100
},
94
101
paddingRight: {
95
-
default: spacing["2"],
102
+
default: spacing["4"],
96
103
":is([data-table-size=lg] *:not(:last-child))": spacing["4"],
97
104
":is([data-table-size=md] *:not(:last-child))": spacing["3"],
98
105
},
···
175
182
...props
176
183
}: TableProps) => {
177
184
const size = sizeProp || use(SizeContext);
178
-
let table = <AriaTable {...props} {...stylex.props(styles.table, style)} />;
185
+
let table = (
186
+
<AriaTable
187
+
{...props}
188
+
{...stylex.props(styles.table, style)}
189
+
data-table-size={size}
190
+
/>
191
+
);
179
192
180
193
if (isVirtualized) {
181
194
table = (
···
212
225
return (
213
226
<AriaColumn {...props} {...stylex.props(styles.column, style)}>
214
227
{({ allowsSorting, sortDirection }) => (
215
-
<div {...stylex.props(styles.columnHeader, styles.cellContent)}>
216
-
<Flex align="center" gap="1">
217
-
<LabelText
218
-
tabIndex={hasResizer ? -1 : undefined}
219
-
hasEllipsis={hasEllipsis}
220
-
>
221
-
{children}
222
-
</LabelText>
223
-
{allowsSorting && (
224
-
<span aria-hidden="true" className="sort-indicator">
225
-
{sortDirection === "ascending" ? (
226
-
<ArrowUp size={14} />
227
-
) : sortDirection === "descending" ? (
228
-
<ArrowDown size={14} />
229
-
) : null}
230
-
</span>
228
+
<div {...stylex.props(styles.columnHeader)}>
229
+
<div {...stylex.props(styles.cellContent, styles.columnHeader)}>
230
+
<Flex align="center" gap="1">
231
+
<LabelText
232
+
tabIndex={hasResizer ? -1 : undefined}
233
+
hasEllipsis={hasEllipsis}
234
+
>
235
+
{children}
236
+
</LabelText>
237
+
{allowsSorting && (
238
+
<span aria-hidden="true" className="sort-indicator">
239
+
{sortDirection === "ascending" ? (
240
+
<ArrowUp size={14} />
241
+
) : sortDirection === "descending" ? (
242
+
<ArrowDown size={14} />
243
+
) : null}
244
+
</span>
245
+
)}
246
+
</Flex>
247
+
{hasResizer && (
248
+
<ColumnResizer {...stylex.props(styles.resizer)}>
249
+
<div {...stylex.props(styles.resizerLine)} />
250
+
</ColumnResizer>
231
251
)}
232
-
</Flex>
233
-
{hasResizer && (
234
-
<ColumnResizer {...stylex.props(styles.resizer)}>
235
-
<div {...stylex.props(styles.resizerLine)} />
236
-
</ColumnResizer>
237
-
)}
252
+
</div>
238
253
</div>
239
254
)}
240
255
</AriaColumn>
+5
-4
packages/hip-ui/src/components/typography/text.tsx
+5
-4
packages/hip-ui/src/components/typography/text.tsx
···
1
1
import * as stylex from "@stylexjs/stylex";
2
2
3
+
import type { TextVariant, ThemeKeys } from "../theme/types";
4
+
3
5
import { criticalColor, uiColor } from "../theme/color.stylex";
4
-
import { TextVariant, ThemeKeys } from "../theme/types";
5
6
import {
6
7
fontFamily,
7
8
fontSize,
···
76
77
React.ComponentProps<"span">,
77
78
"style" | "className"
78
79
> {
79
-
style?: stylex.StyleXStyles | stylex.StyleXStyles[];
80
+
style?: stylex.StyleXStyles | Array<stylex.StyleXStyles>;
80
81
font?: ThemeKeys<typeof fontFamily>;
81
82
weight?: ThemeKeys<typeof fontWeight>;
82
83
size?: ThemeKeys<typeof fontSize>;
···
94
95
weight,
95
96
size,
96
97
leading,
97
-
tracking,
98
+
tracking: trackingProp,
98
99
variant,
99
100
strikethrough = false,
100
101
align,
···
109
110
weight && styles[weight],
110
111
size && styles[`font-${size}`],
111
112
leading && styles[`leading-${leading}`],
112
-
tracking && styles[`tracking-${tracking}`],
113
+
trackingProp && styles[`tracking-${trackingProp}`],
113
114
variant && styles[`variant-${variant}`],
114
115
strikethrough && styles.strikethrough,
115
116
align && styles[align],
+10
-10
pnpm-lock.yaml
+10
-10
pnpm-lock.yaml
···
105
105
specifier: ^3.0.0
106
106
version: 3.0.0
107
107
'@stylexjs/stylex':
108
-
specifier: ^0.17.0
109
-
version: 0.17.0
108
+
specifier: ^0.16.2
109
+
version: 0.16.2
110
110
'@stylexjs/unplugin':
111
111
specifier: ^0.17.0
112
112
version: 0.17.0(unplugin@2.3.10)
···
156
156
specifier: ^1.30.2
157
157
version: 1.30.2
158
158
lucide-react:
159
-
specifier: ^0.554.0
160
-
version: 0.554.0(react@19.2.0)
159
+
specifier: ^0.545.0
160
+
version: 0.545.0(react@19.2.0)
161
161
magic-string:
162
162
specifier: ^0.30.21
163
163
version: 0.30.21
···
5822
5822
lru-cache@5.1.1:
5823
5823
resolution: {integrity: sha512-KpNARQA3Iwv+jTA0utUVVbrh+Jlrr1Fv0e56GGzAFOXN7dk/FviaDW8LHmK52DlcH4WP2n6gI8vN1aesBFgo9w==}
5824
5824
5825
-
lucide-react@0.548.0:
5826
-
resolution: {integrity: sha512-63b16z63jM9yc1MwxajHeuu0FRZFsDtljtDjYm26Kd86UQ5HQzu9ksEtoUUw4RBuewodw/tGFmvipePvRsKeDA==}
5825
+
lucide-react@0.545.0:
5826
+
resolution: {integrity: sha512-7r1/yUuflQDSt4f1bpn5ZAocyIxcTyVyBBChSVtBKn5M+392cPmI5YJMWOJKk/HUWGm5wg83chlAZtCcGbEZtw==}
5827
5827
peerDependencies:
5828
5828
react: ^16.5.1 || ^17.0.0 || ^18.0.0 || ^19.0.0
5829
5829
5830
-
lucide-react@0.554.0:
5831
-
resolution: {integrity: sha512-St+z29uthEJVx0Is7ellNkgTEhaeSoA42I7JjOCBCrc5X6LYMGSv0P/2uS5HDLTExP5tpiqRD2PyUEOS6s9UXA==}
5830
+
lucide-react@0.548.0:
5831
+
resolution: {integrity: sha512-63b16z63jM9yc1MwxajHeuu0FRZFsDtljtDjYm26Kd86UQ5HQzu9ksEtoUUw4RBuewodw/tGFmvipePvRsKeDA==}
5832
5832
peerDependencies:
5833
5833
react: ^16.5.1 || ^17.0.0 || ^18.0.0 || ^19.0.0
5834
5834
···
14356
14356
dependencies:
14357
14357
yallist: 3.1.1
14358
14358
14359
-
lucide-react@0.548.0(react@19.2.0):
14359
+
lucide-react@0.545.0(react@19.2.0):
14360
14360
dependencies:
14361
14361
react: 19.2.0
14362
14362
14363
-
lucide-react@0.554.0(react@19.2.0):
14363
+
lucide-react@0.548.0(react@19.2.0):
14364
14364
dependencies:
14365
14365
react: 19.2.0
14366
14366