A design system in a box.
hip-ui.tngl.io/docs/introduction
color wheel
+241
-1
+1
-1
README.md
+1
-1
README.md
+66
apps/docs/src/components/color-wheel/index.tsx
+66
apps/docs/src/components/color-wheel/index.tsx
···
1
+
import type { ColorWheelProps as AriaColorWheelProps } from "react-aria-components";
2
+
3
+
import * as stylex from "@stylexjs/stylex";
4
+
import { use } from "react";
5
+
import {
6
+
ColorWheel as AriaColorWheel,
7
+
ColorWheelTrack,
8
+
} from "react-aria-components";
9
+
10
+
import { ColorThumb } from "../color-area";
11
+
import { SizeContext } from "../context";
12
+
import { radius } from "../theme/radius.stylex";
13
+
import { uiColor } from "../theme/semantic-color.stylex";
14
+
import { spacing } from "../theme/spacing.stylex";
15
+
import { Size, StyleXComponentProps } from "../theme/types";
16
+
17
+
const styles = stylex.create({
18
+
track: {
19
+
borderRadius: radius.full,
20
+
gridArea: "track",
21
+
height: {
22
+
":is([data-size=sm] *)": spacing["3"],
23
+
":is([data-size=md] *)": spacing["4"],
24
+
":is([data-size=lg] *)": spacing["6"],
25
+
},
26
+
width: "100%",
27
+
28
+
backgroundImage: {
29
+
":is([data-disabled])": `linear-gradient(${uiColor.component2}, ${uiColor.component2}) !important`,
30
+
},
31
+
},
32
+
thumb: {
33
+
top: "50%",
34
+
},
35
+
});
36
+
37
+
export interface ColorWheelProps
38
+
extends StyleXComponentProps<
39
+
Omit<AriaColorWheelProps, "children" | "outerRadius" | "innerRadius">
40
+
> {
41
+
size?: Size;
42
+
width: number;
43
+
}
44
+
45
+
export function ColorWheel({
46
+
style,
47
+
size: sizeProp,
48
+
width,
49
+
...props
50
+
}: ColorWheelProps) {
51
+
const size = sizeProp || use(SizeContext);
52
+
const trackWidth = size === "sm" ? 12 : size === "md" ? 16 : 24;
53
+
54
+
return (
55
+
<AriaColorWheel
56
+
{...props}
57
+
{...stylex.props(style)}
58
+
data-size={size}
59
+
outerRadius={width}
60
+
innerRadius={width - trackWidth}
61
+
>
62
+
<ColorWheelTrack {...stylex.props(styles.track)} />
63
+
<ColorThumb style={styles.thumb} />
64
+
</AriaColorWheel>
65
+
);
66
+
}
+46
apps/docs/src/docs/components/color-wheel.mdx
+46
apps/docs/src/docs/components/color-wheel.mdx
···
1
+
---
2
+
title: Color Wheel
3
+
description: A circular color picker for selecting hue with a draggable thumb.
4
+
---
5
+
6
+
import { PropDocs } from '../../lib/PropDocs'
7
+
import { Example } from '../../lib/Example'
8
+
import { Basic } from '../../examples/color-wheel/basic'
9
+
import { Sizes } from '../../examples/color-wheel/sizes'
10
+
import { Disabled } from '../../examples/color-wheel/disabled'
11
+
12
+
<Example src={Basic} />
13
+
14
+
## Installation
15
+
16
+
Run the following command to add the color wheel component to your project.
17
+
18
+
```bash
19
+
pnpm hip install color-wheel
20
+
```
21
+
22
+
## Props
23
+
24
+
This component is built using the [React Aria ColorWheel](https://react-spectrum.adobe.com/react-aria/ColorWheel.html).
25
+
26
+
<PropDocs components={["ColorWheel"]} />
27
+
28
+
## Features
29
+
30
+
### Sizes
31
+
32
+
The color wheel supports three sizes via the `size` prop (sm, md, lg), which adjust the ring thickness and overall radius.
33
+
34
+
<Example src={Sizes} />
35
+
36
+
### Disabled
37
+
38
+
The color wheel can be disabled using the `isDisabled` prop.
39
+
40
+
<Example src={Disabled} />
41
+
42
+
## Related Components
43
+
44
+
- [ColorSlider](/docs/components/color-slider) - 1D channel adjustment
45
+
- [ColorArea](/docs/components/color-area) - 2D color selection
46
+
- [ColorField](/docs/components/color-field) - Entering color values
+17
apps/docs/src/examples/color-wheel/basic.tsx
+17
apps/docs/src/examples/color-wheel/basic.tsx
···
1
+
import * as stylex from "@stylexjs/stylex";
2
+
3
+
import { ColorWheel } from "../../components/color-wheel";
4
+
5
+
const styles = stylex.create({
6
+
wrapper: {
7
+
width: 220,
8
+
},
9
+
});
10
+
11
+
export function Basic() {
12
+
return (
13
+
<div {...stylex.props(styles.wrapper)}>
14
+
<ColorWheel defaultValue="hsl(200, 100%, 50%)" width={100} />
15
+
</div>
16
+
);
17
+
}
+17
apps/docs/src/examples/color-wheel/disabled.tsx
+17
apps/docs/src/examples/color-wheel/disabled.tsx
···
1
+
import * as stylex from "@stylexjs/stylex";
2
+
3
+
import { ColorWheel } from "../../components/color-wheel";
4
+
5
+
const styles = stylex.create({
6
+
wrapper: {
7
+
width: 220,
8
+
},
9
+
});
10
+
11
+
export function Disabled() {
12
+
return (
13
+
<div {...stylex.props(styles.wrapper)}>
14
+
<ColorWheel isDisabled defaultValue="hsl(0, 100%, 50%)" width={100} />
15
+
</div>
16
+
);
17
+
}
+20
apps/docs/src/examples/color-wheel/sizes.tsx
+20
apps/docs/src/examples/color-wheel/sizes.tsx
···
1
+
import * as stylex from "@stylexjs/stylex";
2
+
3
+
import { ColorWheel } from "../../components/color-wheel";
4
+
import { Flex } from "../../components/flex";
5
+
6
+
const styles = stylex.create({
7
+
wrapper: {
8
+
width: 360,
9
+
},
10
+
});
11
+
12
+
export function Sizes() {
13
+
return (
14
+
<Flex gap="6" align="center" justify="center" style={styles.wrapper}>
15
+
<ColorWheel size="sm" defaultValue="hsl(120, 100%, 50%)" width={100} />
16
+
<ColorWheel size="md" defaultValue="hsl(200, 100%, 50%)" width={100} />
17
+
<ColorWheel size="lg" defaultValue="hsl(280, 100%, 50%)" width={100} />
18
+
</Flex>
19
+
);
20
+
}
+2
packages/hip-ui/src/cli/install.tsx
+2
packages/hip-ui/src/cli/install.tsx
···
20
20
import { colorFieldConfig } from "../components/color-field/color-field-config.js";
21
21
import { colorSliderConfig } from "../components/color-slider/color-slider-config.js";
22
22
import { colorSwatchConfig } from "../components/color-swatch/link-config.js";
23
+
import { colorWheelConfig } from "../components/color-wheel/color-wheel-config.js";
23
24
import { comboboxConfig } from "../components/combobox/combobox-config.js";
24
25
import { commandMenuConfig } from "../components/command-menu/command-menu-config.js";
25
26
import { contextMenuConfig } from "../components/context-menu/context-menu-config.js";
···
114
115
sidebarConfig,
115
116
colorAreaConfig,
116
117
colorSliderConfig,
118
+
colorWheelConfig,
117
119
];
118
120
119
121
function StringSetting({
+6
packages/hip-ui/src/components/color-wheel/color-wheel-config.ts
+6
packages/hip-ui/src/components/color-wheel/color-wheel-config.ts
+66
packages/hip-ui/src/components/color-wheel/index.tsx
+66
packages/hip-ui/src/components/color-wheel/index.tsx
···
1
+
import type { ColorWheelProps as AriaColorWheelProps } from "react-aria-components";
2
+
3
+
import * as stylex from "@stylexjs/stylex";
4
+
import { use } from "react";
5
+
import {
6
+
ColorWheel as AriaColorWheel,
7
+
ColorWheelTrack,
8
+
} from "react-aria-components";
9
+
10
+
import { ColorThumb } from "../color-area";
11
+
import { SizeContext } from "../context";
12
+
import { radius } from "../theme/radius.stylex";
13
+
import { uiColor } from "../theme/semantic-color.stylex";
14
+
import { spacing } from "../theme/spacing.stylex";
15
+
import { Size, StyleXComponentProps } from "../theme/types";
16
+
17
+
const styles = stylex.create({
18
+
track: {
19
+
borderRadius: radius.full,
20
+
gridArea: "track",
21
+
height: {
22
+
":is([data-size=sm] *)": spacing["3"],
23
+
":is([data-size=md] *)": spacing["4"],
24
+
":is([data-size=lg] *)": spacing["6"],
25
+
},
26
+
width: "100%",
27
+
28
+
backgroundImage: {
29
+
":is([data-disabled])": `linear-gradient(${uiColor.component2}, ${uiColor.component2}) !important`,
30
+
},
31
+
},
32
+
thumb: {
33
+
top: "50%",
34
+
},
35
+
});
36
+
37
+
export interface ColorWheelProps
38
+
extends StyleXComponentProps<
39
+
Omit<AriaColorWheelProps, "children" | "outerRadius" | "innerRadius">
40
+
> {
41
+
size?: Size;
42
+
width: number;
43
+
}
44
+
45
+
export function ColorWheel({
46
+
style,
47
+
size: sizeProp,
48
+
width,
49
+
...props
50
+
}: ColorWheelProps) {
51
+
const size = sizeProp || use(SizeContext);
52
+
const trackWidth = size === "sm" ? 12 : size === "md" ? 16 : 24;
53
+
54
+
return (
55
+
<AriaColorWheel
56
+
{...props}
57
+
{...stylex.props(style)}
58
+
data-size={size}
59
+
outerRadius={width}
60
+
innerRadius={width - trackWidth}
61
+
>
62
+
<ColorWheelTrack {...stylex.props(styles.track)} />
63
+
<ColorThumb style={styles.thumb} />
64
+
</AriaColorWheel>
65
+
);
66
+
}