A design system in a box.
hip-ui.tngl.io/docs/introduction
color area
+308
-4
+2
-2
README.md
+2
-2
README.md
···
23
23
- [ ] Input Group
24
24
- [ ] Input OTP
25
25
- [ ] Resizable
26
-
- [ ] Sidebar
27
26
- [ ] Skeleton
28
27
29
28
#### OTher Wrappers
···
34
33
35
34
#### react-aria wrappers
36
35
37
-
- [ ] Color Area
38
36
- [ ] Color Picker
39
37
- [ ] Color Swatch Picker
40
38
- [ ] Color Wheel
···
60
58
- [ ] Toolbar
61
59
- [ ] Toast
62
60
61
+
- [x] Color Area
62
+
- [x] Sidebar
63
63
- [x] Kbd
64
64
- [x] Data Table
65
65
- [x] Table
+66
apps/docs/src/components/color-area/index.tsx
+66
apps/docs/src/components/color-area/index.tsx
···
1
+
import type { ColorAreaProps as AriaColorAreaProps } from "react-aria-components";
2
+
3
+
import * as stylex from "@stylexjs/stylex";
4
+
import { ColorArea as AriaColorArea, ColorThumb } from "react-aria-components";
5
+
6
+
import { radius } from "../theme/radius.stylex";
7
+
import { uiColor } from "../theme/semantic-color.stylex";
8
+
import { spacing } from "../theme/spacing.stylex";
9
+
import { StyleXComponentProps } from "../theme/types";
10
+
11
+
const styles = stylex.create({
12
+
colorArea: {
13
+
borderRadius: radius["md"],
14
+
filter: {
15
+
":is([data-disabled])": "grayscale(1)",
16
+
},
17
+
flexShrink: 0,
18
+
},
19
+
thumb: {
20
+
borderColor: uiColor.border1,
21
+
borderRadius: radius["full"],
22
+
borderStyle: "solid",
23
+
borderWidth: 2,
24
+
boxShadow: " 0 0 0 1px black, inset 0 0 0 1px black",
25
+
boxSizing: "border-box",
26
+
filter: {
27
+
":is([data-disabled])": "grayscale(1)",
28
+
},
29
+
height: {
30
+
default: spacing["4"],
31
+
":is([data-focus-visible])": spacing["6"],
32
+
},
33
+
width: {
34
+
default: spacing["4"],
35
+
":is([data-focus-visible])": spacing["6"],
36
+
},
37
+
},
38
+
aspectRatio: (aspectRatio: number) => ({
39
+
aspectRatio,
40
+
}),
41
+
});
42
+
43
+
export interface ColorAreaProps
44
+
extends StyleXComponentProps<Omit<AriaColorAreaProps, "children">> {
45
+
children?: React.ReactNode;
46
+
aspectRatio?: number;
47
+
}
48
+
49
+
export function ColorArea({
50
+
style,
51
+
aspectRatio = 1,
52
+
...props
53
+
}: ColorAreaProps) {
54
+
return (
55
+
<AriaColorArea
56
+
{...props}
57
+
{...stylex.props(
58
+
styles.colorArea,
59
+
style,
60
+
styles.aspectRatio(aspectRatio),
61
+
)}
62
+
>
63
+
<ColorThumb {...stylex.props(styles.thumb)} />
64
+
</AriaColorArea>
65
+
);
66
+
}
+45
apps/docs/src/docs/components/color-area.mdx
+45
apps/docs/src/docs/components/color-area.mdx
···
1
+
---
2
+
title: Color Area
3
+
description: A 2D color selection area for choosing colors across two channels.
4
+
---
5
+
6
+
import { PropDocs } from '../../lib/PropDocs'
7
+
import { Example } from '../../lib/Example'
8
+
import { Basic } from '../../examples/color-area/basic'
9
+
import { AspectRatio } from '../../examples/color-area/aspect-ratio'
10
+
import { Disabled } from '../../examples/color-area/disabled'
11
+
12
+
<Example src={Basic} />
13
+
14
+
## Installation
15
+
16
+
Run the following command to add the color area component to your project.
17
+
18
+
```bash
19
+
pnpm hip install color-area
20
+
```
21
+
22
+
## Props
23
+
24
+
This component is built using the [React Aria ColorArea](https://react-spectrum.adobe.com/react-aria/ColorArea.html).
25
+
26
+
<PropDocs components={["ColorArea"]} />
27
+
28
+
## Features
29
+
30
+
### Aspect Ratio
31
+
32
+
Control the rendered dimensions by setting a custom aspect ratio.
33
+
34
+
<Example src={AspectRatio} />
35
+
36
+
## Disabled
37
+
38
+
The color area can be disabled by setting the `disabled` prop to true.
39
+
40
+
<Example src={Disabled} />
41
+
42
+
## Related Components
43
+
44
+
- [ColorField](/docs/components/color-field) - For entering color values
45
+
- [ColorSwatch](/docs/components/color-swatch) - For displaying selected colors
+22
apps/docs/src/examples/color-area/aspect-ratio.tsx
+22
apps/docs/src/examples/color-area/aspect-ratio.tsx
···
1
+
import * as stylex from "@stylexjs/stylex";
2
+
3
+
import { ColorArea } from "@/components/color-area";
4
+
5
+
const styles = stylex.create({
6
+
wrapper: {
7
+
width: 300,
8
+
},
9
+
});
10
+
11
+
export function AspectRatio() {
12
+
return (
13
+
<div {...stylex.props(styles.wrapper)}>
14
+
<ColorArea
15
+
xChannel="saturation"
16
+
yChannel="lightness"
17
+
aspectRatio={16 / 9}
18
+
defaultValue="hsl(300, 60%, 40%)"
19
+
/>
20
+
</div>
21
+
);
22
+
}
+21
apps/docs/src/examples/color-area/basic.tsx
+21
apps/docs/src/examples/color-area/basic.tsx
···
1
+
import * as stylex from "@stylexjs/stylex";
2
+
3
+
import { ColorArea } from "@/components/color-area";
4
+
5
+
const styles = stylex.create({
6
+
wrapper: {
7
+
width: 240,
8
+
},
9
+
});
10
+
11
+
export function Basic() {
12
+
return (
13
+
<div {...stylex.props(styles.wrapper)}>
14
+
<ColorArea
15
+
xChannel="saturation"
16
+
yChannel="lightness"
17
+
defaultValue="hsl(200, 50%, 50%)"
18
+
/>
19
+
</div>
20
+
);
21
+
}
+22
apps/docs/src/examples/color-area/disabled.tsx
+22
apps/docs/src/examples/color-area/disabled.tsx
···
1
+
import * as stylex from "@stylexjs/stylex";
2
+
3
+
import { ColorArea } from "@/components/color-area";
4
+
5
+
const styles = stylex.create({
6
+
wrapper: {
7
+
width: 240,
8
+
},
9
+
});
10
+
11
+
export function Disabled() {
12
+
return (
13
+
<div {...stylex.props(styles.wrapper)}>
14
+
<ColorArea
15
+
xChannel="saturation"
16
+
yChannel="lightness"
17
+
defaultValue="hsl(200, 50%, 50%)"
18
+
isDisabled
19
+
/>
20
+
</div>
21
+
);
22
+
}
+7
apps/docs/src/routes/__root.tsx
+7
apps/docs/src/routes/__root.tsx
···
50
50
<head>
51
51
<HeadContent />
52
52
</head>
53
+
<script>{`
54
+
const localtColorScheme = localStorage.getItem("hip-ui-color-scheme");
55
+
56
+
if (localtColorScheme) {
57
+
document.body.style.colorScheme = localtColorScheme;
58
+
}
59
+
`}</script>
53
60
<body {...stylex.props(ui.bg, ui.text, styles.body)}>
54
61
{children}
55
62
<TanStackDevtools
+1
-1
apps/docs/src/routes/docs.$.tsx
+1
-1
apps/docs/src/routes/docs.$.tsx
+34
-1
apps/docs/src/routes/docs.tsx
+34
-1
apps/docs/src/routes/docs.tsx
···
20
20
import { Text } from "@/components/typography/text";
21
21
22
22
import { uiColor } from "../components/theme/semantic-color.stylex";
23
+
import { IconButton } from "@/components/icon-button";
24
+
import { useEffect } from "react";
25
+
import { useState } from "react";
26
+
import { Moon, Sun } from "lucide-react";
23
27
24
28
const SidebarItemLink = createLink(SidebarItem);
25
29
···
95
99
.flatMap((item) => ("items" in item ? item.items : [item]))
96
100
.filter((item): item is SidebarItem => item !== undefined);
97
101
102
+
function DarkModeToggle() {
103
+
const [colorScheme, setColorScheme] = useState<"light" | "dark">("light");
104
+
const toggleColorScheme = () => {
105
+
const newColorScheme = colorScheme === "light" ? "dark" : "light";
106
+
107
+
setColorScheme(newColorScheme);
108
+
localStorage.setItem("hip-ui-color-scheme", newColorScheme);
109
+
document.body.style.colorScheme = newColorScheme;
110
+
};
111
+
112
+
useEffect(() => {
113
+
const localColorScheme = localStorage.getItem("hip-ui-color-scheme");
114
+
115
+
if (localColorScheme) {
116
+
setColorScheme(localColorScheme as "light" | "dark");
117
+
}
118
+
}, []);
119
+
120
+
return (
121
+
<IconButton
122
+
variant="secondary"
123
+
label="Toggle Dark Mode"
124
+
onPress={toggleColorScheme}
125
+
>
126
+
{colorScheme === "dark" ? <Moon /> : <Sun />}
127
+
</IconButton>
128
+
);
129
+
}
130
+
98
131
function DocSidebar() {
99
132
const location = useLocation();
100
133
const matches = useMatches();
···
109
142
110
143
return (
111
144
<Sidebar>
112
-
<SidebarHeader>
145
+
<SidebarHeader action={<DarkModeToggle />}>
113
146
<Text font="serif" size="4xl" weight="bold">
114
147
Hip UI
115
148
</Text>
+2
packages/hip-ui/src/cli/install.tsx
+2
packages/hip-ui/src/cli/install.tsx
···
16
16
import { buttonConfig } from "../components/button/button-config.js";
17
17
import { cardConfig } from "../components/card/card-config.js";
18
18
import { checkboxConfig } from "../components/checkbox/checkbox-config.js";
19
+
import { colorAreaConfig } from "../components/color-area/color-area-config.js";
19
20
import { colorFieldConfig } from "../components/color-field/color-field-config.js";
20
21
import { colorSwatchConfig } from "../components/color-swatch/link-config.js";
21
22
import { comboboxConfig } from "../components/combobox/combobox-config.js";
···
110
111
paginationConfig,
111
112
kbdConfig,
112
113
sidebarConfig,
114
+
colorAreaConfig,
113
115
];
114
116
115
117
function StringSetting({
+6
packages/hip-ui/src/components/color-area/color-area-config.ts
+6
packages/hip-ui/src/components/color-area/color-area-config.ts
+66
packages/hip-ui/src/components/color-area/index.tsx
+66
packages/hip-ui/src/components/color-area/index.tsx
···
1
+
import type { ColorAreaProps as AriaColorAreaProps } from "react-aria-components";
2
+
3
+
import * as stylex from "@stylexjs/stylex";
4
+
import { ColorArea as AriaColorArea, ColorThumb } from "react-aria-components";
5
+
6
+
import { radius } from "../theme/radius.stylex";
7
+
import { uiColor } from "../theme/semantic-color.stylex";
8
+
import { spacing } from "../theme/spacing.stylex";
9
+
import { StyleXComponentProps } from "../theme/types";
10
+
11
+
const styles = stylex.create({
12
+
colorArea: {
13
+
borderRadius: radius["md"],
14
+
filter: {
15
+
":is([data-disabled])": "grayscale(1)",
16
+
},
17
+
flexShrink: 0,
18
+
},
19
+
thumb: {
20
+
borderColor: uiColor.border1,
21
+
borderRadius: radius["full"],
22
+
borderStyle: "solid",
23
+
borderWidth: 2,
24
+
boxShadow: " 0 0 0 1px black, inset 0 0 0 1px black",
25
+
boxSizing: "border-box",
26
+
filter: {
27
+
":is([data-disabled])": "grayscale(1)",
28
+
},
29
+
height: {
30
+
default: spacing["4"],
31
+
":is([data-focus-visible])": spacing["6"],
32
+
},
33
+
width: {
34
+
default: spacing["4"],
35
+
":is([data-focus-visible])": spacing["6"],
36
+
},
37
+
},
38
+
aspectRatio: (aspectRatio: number) => ({
39
+
aspectRatio,
40
+
}),
41
+
});
42
+
43
+
export interface ColorAreaProps
44
+
extends StyleXComponentProps<Omit<AriaColorAreaProps, "children">> {
45
+
children?: React.ReactNode;
46
+
aspectRatio?: number;
47
+
}
48
+
49
+
export function ColorArea({
50
+
style,
51
+
aspectRatio = 1,
52
+
...props
53
+
}: ColorAreaProps) {
54
+
return (
55
+
<AriaColorArea
56
+
{...props}
57
+
{...stylex.props(
58
+
styles.colorArea,
59
+
style,
60
+
styles.aspectRatio(aspectRatio),
61
+
)}
62
+
>
63
+
<ColorThumb {...stylex.props(styles.thumb)} />
64
+
</AriaColorArea>
65
+
);
66
+
}