A design system in a box.
hip-ui.tngl.io/docs/introduction
color slider
+461
-10
+1
README.md
+1
README.md
+23
-4
apps/docs/src/components/color-area/index.tsx
+23
-4
apps/docs/src/components/color-area/index.tsx
···
1
-
import type { ColorAreaProps as AriaColorAreaProps } from "react-aria-components";
1
+
import type {
2
+
ColorAreaProps as AriaColorAreaProps,
3
+
ColorThumbProps as AriaColorThumbProps,
4
+
} from "react-aria-components";
2
5
3
6
import * as stylex from "@stylexjs/stylex";
4
-
import { ColorArea as AriaColorArea, ColorThumb } from "react-aria-components";
7
+
import {
8
+
ColorArea as AriaColorArea,
9
+
ColorThumb as AriaColorThumb,
10
+
} from "react-aria-components";
5
11
6
12
import { radius } from "../theme/radius.stylex";
7
13
import { uiColor } from "../theme/semantic-color.stylex";
···
17
23
flexShrink: 0,
18
24
},
19
25
thumb: {
20
-
borderColor: uiColor.border1,
26
+
borderColor: "white",
21
27
borderRadius: radius["full"],
22
28
borderStyle: "solid",
23
29
borderWidth: 2,
···
29
35
height: {
30
36
default: spacing["4"],
31
37
":is([data-focus-visible])": spacing["6"],
38
+
":is([data-size=sm] *)": spacing["3"],
39
+
":is([data-size=md] *)": spacing["4"],
40
+
":is([data-size=lg] *)": spacing["6"],
32
41
},
33
42
width: {
34
43
default: spacing["4"],
35
44
":is([data-focus-visible])": spacing["6"],
45
+
":is([data-size=sm] *)": spacing["3"],
46
+
":is([data-size=md] *)": spacing["4"],
47
+
":is([data-size=lg] *)": spacing["6"],
36
48
},
37
49
},
38
50
aspectRatio: (aspectRatio: number) => ({
···
40
52
}),
41
53
});
42
54
55
+
export function ColorThumb({
56
+
style,
57
+
...props
58
+
}: StyleXComponentProps<Omit<AriaColorThumbProps, "children">>) {
59
+
return <AriaColorThumb {...props} {...stylex.props(styles.thumb, style)} />;
60
+
}
61
+
43
62
export interface ColorAreaProps
44
63
extends StyleXComponentProps<Omit<AriaColorAreaProps, "children">> {
45
64
children?: React.ReactNode;
···
60
79
styles.aspectRatio(aspectRatio),
61
80
)}
62
81
>
63
-
<ColorThumb {...stylex.props(styles.thumb)} />
82
+
<ColorThumb />
64
83
</AriaColorArea>
65
84
);
66
85
}
+103
apps/docs/src/components/color-slider/index.tsx
+103
apps/docs/src/components/color-slider/index.tsx
···
1
+
import type { ColorSliderProps as AriaColorSliderProps } from "react-aria-components";
2
+
3
+
import * as stylex from "@stylexjs/stylex";
4
+
import { use } from "react";
5
+
import {
6
+
ColorSlider as AriaColorSlider,
7
+
SliderOutput,
8
+
SliderTrack,
9
+
} from "react-aria-components";
10
+
11
+
import { ColorThumb } from "../color-area";
12
+
import { SizeContext } from "../context";
13
+
import { Label } from "../label";
14
+
import { radius } from "../theme/radius.stylex";
15
+
import { uiColor } from "../theme/semantic-color.stylex";
16
+
import { spacing } from "../theme/spacing.stylex";
17
+
import { Size, StyleXComponentProps } from "../theme/types";
18
+
import { fontSize, lineHeight } from "../theme/typography.stylex";
19
+
20
+
const styles = stylex.create({
21
+
colorSlider: {
22
+
display: "grid",
23
+
flexDirection: "column",
24
+
gap: spacing["2"],
25
+
gridTemplateAreas: "'label value-label' 'track track'",
26
+
},
27
+
label: {
28
+
gridArea: "label",
29
+
},
30
+
valueLabel: {
31
+
color: uiColor.text1,
32
+
fontVariantNumeric: "tabular-nums",
33
+
gridArea: "value-label",
34
+
justifySelf: "flex-end",
35
+
36
+
fontSize: {
37
+
":is([data-size=sm] *)": fontSize["xs"],
38
+
":is([data-size=md] *)": fontSize["sm"],
39
+
":is([data-size=lg] *)": fontSize["base"],
40
+
},
41
+
lineHeight: {
42
+
":is([data-size=sm] *)": lineHeight["xs"],
43
+
":is([data-size=md] *)": lineHeight["sm"],
44
+
":is([data-size=lg] *)": lineHeight["base"],
45
+
},
46
+
},
47
+
track: {
48
+
borderRadius: radius.full,
49
+
gridArea: "track",
50
+
height: {
51
+
":is([data-size=sm] *)": spacing["3"],
52
+
":is([data-size=md] *)": spacing["4"],
53
+
":is([data-size=lg] *)": spacing["6"],
54
+
},
55
+
width: "100%",
56
+
},
57
+
thumb: {
58
+
top: "50%",
59
+
},
60
+
});
61
+
62
+
export interface ColorAreaProps
63
+
extends StyleXComponentProps<Omit<AriaColorSliderProps, "children">> {
64
+
label?: string;
65
+
showValueLabel?: boolean;
66
+
size?: Size;
67
+
}
68
+
69
+
export function ColorSlider({
70
+
style,
71
+
label,
72
+
showValueLabel = true,
73
+
size: sizeProp,
74
+
...props
75
+
}: ColorAreaProps) {
76
+
const size = sizeProp || use(SizeContext);
77
+
78
+
return (
79
+
<SizeContext value={size}>
80
+
<AriaColorSlider
81
+
{...props}
82
+
data-size={size}
83
+
{...stylex.props(styles.colorSlider, style)}
84
+
>
85
+
{label && <Label style={styles.label}>{label}</Label>}
86
+
{showValueLabel && (
87
+
<SliderOutput {...stylex.props(styles.valueLabel)} />
88
+
)}
89
+
<SliderTrack
90
+
{...stylex.props(styles.track)}
91
+
style={({ defaultStyle, isDisabled }) => ({
92
+
background: isDisabled
93
+
? uiColor.component2
94
+
: `${defaultStyle.background as string},
95
+
repeating-conic-gradient(#CCC 0% 25%, white 0% 50%) 50% / 16px 16px`,
96
+
})}
97
+
>
98
+
<ColorThumb style={styles.thumb} />
99
+
</SliderTrack>
100
+
</AriaColorSlider>
101
+
</SizeContext>
102
+
);
103
+
}
+4
-1
apps/docs/src/components/progress-bar/index.tsx
+4
-1
apps/docs/src/components/progress-bar/index.tsx
···
86
86
)`,
87
87
backgroundSize: "20%",
88
88
height: "100%",
89
-
animationName: "none",
89
+
animationName: {
90
+
default: IndeterminateAnimation,
91
+
[mediaQueries.reducedMotion]: "none",
92
+
},
90
93
animationDuration: "1s",
91
94
animationIterationCount: "infinite",
92
95
animationTimingFunction: "linear",
+60
apps/docs/src/docs/components/color-slider.mdx
+60
apps/docs/src/docs/components/color-slider.mdx
···
1
+
---
2
+
title: Color Slider
3
+
description: A 1D color selection slider for adjusting a single color channel.
4
+
---
5
+
6
+
import { PropDocs } from '../../lib/PropDocs'
7
+
import { Example } from '../../lib/Example'
8
+
import { Basic } from '../../examples/color-slider/basic'
9
+
import { Channels } from '../../examples/color-slider/channels'
10
+
import { HideValueLabel } from '../../examples/color-slider/hide-value-label'
11
+
import { Disabled } from '../../examples/color-slider/disabled'
12
+
import { Size } from '../../examples/color-slider/size'
13
+
14
+
<Example src={Basic} />
15
+
16
+
## Installation
17
+
18
+
Run the following command to add the color slider component to your project.
19
+
20
+
```bash
21
+
pnpm hip install color-slider
22
+
```
23
+
24
+
## Props
25
+
26
+
This component is built using the [React Aria ColorSlider](https://react-spectrum.adobe.com/react-aria/ColorSlider.html).
27
+
28
+
<PropDocs components={["ColorSlider"]} />
29
+
30
+
## Features
31
+
32
+
### Channels
33
+
34
+
Adjust different channels such as hue, saturation, lightness, and brightness.
35
+
36
+
<Example src={Channels} />
37
+
38
+
### Hide Value Label
39
+
40
+
The value label can be hidden by setting the `showValueLabel` prop to false.
41
+
42
+
<Example src={HideValueLabel} />
43
+
44
+
### Disabled
45
+
46
+
The color slider can be disabled by setting the `isDisabled` prop to true.
47
+
48
+
<Example src={Disabled} />
49
+
50
+
### Size
51
+
52
+
The color slider can be sized by setting the `size` prop to "sm", "md", or "lg".
53
+
54
+
<Example src={Size} />
55
+
56
+
## Related Components
57
+
58
+
- [ColorArea](/docs/components/color-area) - 2D color selection
59
+
- [ColorField](/docs/components/color-field) - Entering color values
60
+
- [Slider](/docs/components/slider) - Generic numeric slider
+21
apps/docs/src/examples/color-slider/basic.tsx
+21
apps/docs/src/examples/color-slider/basic.tsx
···
1
+
import * as stylex from "@stylexjs/stylex";
2
+
3
+
import { ColorSlider } from "@/components/color-slider";
4
+
5
+
const styles = stylex.create({
6
+
wrapper: {
7
+
width: 300,
8
+
},
9
+
});
10
+
11
+
export function Basic() {
12
+
return (
13
+
<div {...stylex.props(styles.wrapper)}>
14
+
<ColorSlider
15
+
label="Hue"
16
+
channel="hue"
17
+
defaultValue="hsl(200, 100%, 50%)"
18
+
/>
19
+
</div>
20
+
);
21
+
}
+32
apps/docs/src/examples/color-slider/channels.tsx
+32
apps/docs/src/examples/color-slider/channels.tsx
···
1
+
import * as stylex from "@stylexjs/stylex";
2
+
3
+
import { ColorSlider } from "../../components/color-slider";
4
+
import { Flex } from "../../components/flex";
5
+
6
+
const styles = stylex.create({
7
+
wrapper: {
8
+
width: 320,
9
+
},
10
+
});
11
+
12
+
export function Channels() {
13
+
return (
14
+
<Flex direction="column" gap="4" style={styles.wrapper}>
15
+
<ColorSlider
16
+
label="Hue"
17
+
channel="hue"
18
+
defaultValue="hsl(180, 100%, 50%)"
19
+
/>
20
+
<ColorSlider
21
+
label="Saturation"
22
+
channel="saturation"
23
+
defaultValue="hsl(180, 50%, 50%)"
24
+
/>
25
+
<ColorSlider
26
+
label="Lightness"
27
+
channel="lightness"
28
+
defaultValue="hsl(180, 50%, 50%)"
29
+
/>
30
+
</Flex>
31
+
);
32
+
}
+22
apps/docs/src/examples/color-slider/disabled.tsx
+22
apps/docs/src/examples/color-slider/disabled.tsx
···
1
+
import * as stylex from "@stylexjs/stylex";
2
+
3
+
import { ColorSlider } from "@/components/color-slider";
4
+
5
+
const styles = stylex.create({
6
+
wrapper: {
7
+
width: 300,
8
+
},
9
+
});
10
+
11
+
export function Disabled() {
12
+
return (
13
+
<div {...stylex.props(styles.wrapper)}>
14
+
<ColorSlider
15
+
channel="hue"
16
+
label="Disabled Color Slider"
17
+
defaultValue="hsl(0, 100%, 50%)"
18
+
isDisabled
19
+
/>
20
+
</div>
21
+
);
22
+
}
+21
apps/docs/src/examples/color-slider/hide-value-label.tsx
+21
apps/docs/src/examples/color-slider/hide-value-label.tsx
···
1
+
import * as stylex from "@stylexjs/stylex";
2
+
3
+
import { ColorSlider } from "../../components/color-slider";
4
+
5
+
const styles = stylex.create({
6
+
wrapper: {
7
+
width: 300,
8
+
},
9
+
});
10
+
11
+
export function HideValueLabel() {
12
+
return (
13
+
<div {...stylex.props(styles.wrapper)}>
14
+
<ColorSlider
15
+
channel="hue"
16
+
defaultValue="hsl(90, 100%, 50%)"
17
+
showValueLabel={false}
18
+
/>
19
+
</div>
20
+
);
21
+
}
+36
apps/docs/src/examples/color-slider/size.tsx
+36
apps/docs/src/examples/color-slider/size.tsx
···
1
+
import * as stylex from "@stylexjs/stylex";
2
+
3
+
import { Flex } from "../../components/flex";
4
+
import { ColorSlider } from "../../components/color-slider";
5
+
6
+
const styles = stylex.create({
7
+
wrapper: {
8
+
width: 300,
9
+
},
10
+
});
11
+
12
+
export function Size() {
13
+
return (
14
+
<Flex direction="column" gap="4" style={styles.wrapper}>
15
+
<ColorSlider
16
+
label="Small"
17
+
channel="hue"
18
+
defaultValue="hsl(100, 100%, 50%)"
19
+
size="sm"
20
+
/>
21
+
<ColorSlider
22
+
label="Medium"
23
+
channel="hue"
24
+
defaultValue="hsl(200, 100%, 50%)"
25
+
size="md"
26
+
/>
27
+
<ColorSlider
28
+
label="Large"
29
+
channel="hue"
30
+
defaultValue="hsl(300, 100%, 50%)"
31
+
size="lg"
32
+
/>
33
+
</Flex>
34
+
);
35
+
}
36
+
+2
packages/hip-ui/src/cli/install.tsx
+2
packages/hip-ui/src/cli/install.tsx
···
18
18
import { checkboxConfig } from "../components/checkbox/checkbox-config.js";
19
19
import { colorAreaConfig } from "../components/color-area/color-area-config.js";
20
20
import { colorFieldConfig } from "../components/color-field/color-field-config.js";
21
+
import { colorSliderConfig } from "../components/color-slider/color-slider-config.js";
21
22
import { colorSwatchConfig } from "../components/color-swatch/link-config.js";
22
23
import { comboboxConfig } from "../components/combobox/combobox-config.js";
23
24
import { commandMenuConfig } from "../components/command-menu/command-menu-config.js";
···
112
113
kbdConfig,
113
114
sidebarConfig,
114
115
colorAreaConfig,
116
+
colorSliderConfig,
115
117
];
116
118
117
119
function StringSetting({
+23
-4
packages/hip-ui/src/components/color-area/index.tsx
+23
-4
packages/hip-ui/src/components/color-area/index.tsx
···
1
-
import type { ColorAreaProps as AriaColorAreaProps } from "react-aria-components";
1
+
import type {
2
+
ColorAreaProps as AriaColorAreaProps,
3
+
ColorThumbProps as AriaColorThumbProps,
4
+
} from "react-aria-components";
2
5
3
6
import * as stylex from "@stylexjs/stylex";
4
-
import { ColorArea as AriaColorArea, ColorThumb } from "react-aria-components";
7
+
import {
8
+
ColorArea as AriaColorArea,
9
+
ColorThumb as AriaColorThumb,
10
+
} from "react-aria-components";
5
11
6
12
import { radius } from "../theme/radius.stylex";
7
13
import { uiColor } from "../theme/semantic-color.stylex";
···
17
23
flexShrink: 0,
18
24
},
19
25
thumb: {
20
-
borderColor: uiColor.border1,
26
+
borderColor: "white",
21
27
borderRadius: radius["full"],
22
28
borderStyle: "solid",
23
29
borderWidth: 2,
···
29
35
height: {
30
36
default: spacing["4"],
31
37
":is([data-focus-visible])": spacing["6"],
38
+
":is([data-size=sm] *)": spacing["3"],
39
+
":is([data-size=md] *)": spacing["4"],
40
+
":is([data-size=lg] *)": spacing["6"],
32
41
},
33
42
width: {
34
43
default: spacing["4"],
35
44
":is([data-focus-visible])": spacing["6"],
45
+
":is([data-size=sm] *)": spacing["3"],
46
+
":is([data-size=md] *)": spacing["4"],
47
+
":is([data-size=lg] *)": spacing["6"],
36
48
},
37
49
},
38
50
aspectRatio: (aspectRatio: number) => ({
···
40
52
}),
41
53
});
42
54
55
+
export function ColorThumb({
56
+
style,
57
+
...props
58
+
}: StyleXComponentProps<Omit<AriaColorThumbProps, "children">>) {
59
+
return <AriaColorThumb {...props} {...stylex.props(styles.thumb, style)} />;
60
+
}
61
+
43
62
export interface ColorAreaProps
44
63
extends StyleXComponentProps<Omit<AriaColorAreaProps, "children">> {
45
64
children?: React.ReactNode;
···
60
79
styles.aspectRatio(aspectRatio),
61
80
)}
62
81
>
63
-
<ColorThumb {...stylex.props(styles.thumb)} />
82
+
<ColorThumb />
64
83
</AriaColorArea>
65
84
);
66
85
}
+6
packages/hip-ui/src/components/color-slider/color-slider-config.ts
+6
packages/hip-ui/src/components/color-slider/color-slider-config.ts
+103
packages/hip-ui/src/components/color-slider/index.tsx
+103
packages/hip-ui/src/components/color-slider/index.tsx
···
1
+
import type { ColorSliderProps as AriaColorSliderProps } from "react-aria-components";
2
+
3
+
import * as stylex from "@stylexjs/stylex";
4
+
import { use } from "react";
5
+
import {
6
+
ColorSlider as AriaColorSlider,
7
+
SliderOutput,
8
+
SliderTrack,
9
+
} from "react-aria-components";
10
+
11
+
import { ColorThumb } from "../color-area";
12
+
import { SizeContext } from "../context";
13
+
import { Label } from "../label";
14
+
import { radius } from "../theme/radius.stylex";
15
+
import { uiColor } from "../theme/semantic-color.stylex";
16
+
import { spacing } from "../theme/spacing.stylex";
17
+
import { Size, StyleXComponentProps } from "../theme/types";
18
+
import { fontSize, lineHeight } from "../theme/typography.stylex";
19
+
20
+
const styles = stylex.create({
21
+
colorSlider: {
22
+
display: "grid",
23
+
flexDirection: "column",
24
+
gap: spacing["2"],
25
+
gridTemplateAreas: "'label value-label' 'track track'",
26
+
},
27
+
label: {
28
+
gridArea: "label",
29
+
},
30
+
valueLabel: {
31
+
color: uiColor.text1,
32
+
fontVariantNumeric: "tabular-nums",
33
+
gridArea: "value-label",
34
+
justifySelf: "flex-end",
35
+
36
+
fontSize: {
37
+
":is([data-size=sm] *)": fontSize["xs"],
38
+
":is([data-size=md] *)": fontSize["sm"],
39
+
":is([data-size=lg] *)": fontSize["base"],
40
+
},
41
+
lineHeight: {
42
+
":is([data-size=sm] *)": lineHeight["xs"],
43
+
":is([data-size=md] *)": lineHeight["sm"],
44
+
":is([data-size=lg] *)": lineHeight["base"],
45
+
},
46
+
},
47
+
track: {
48
+
borderRadius: radius.full,
49
+
gridArea: "track",
50
+
height: {
51
+
":is([data-size=sm] *)": spacing["3"],
52
+
":is([data-size=md] *)": spacing["4"],
53
+
":is([data-size=lg] *)": spacing["6"],
54
+
},
55
+
width: "100%",
56
+
},
57
+
thumb: {
58
+
top: "50%",
59
+
},
60
+
});
61
+
62
+
export interface ColorAreaProps
63
+
extends StyleXComponentProps<Omit<AriaColorSliderProps, "children">> {
64
+
label?: string;
65
+
showValueLabel?: boolean;
66
+
size?: Size;
67
+
}
68
+
69
+
export function ColorSlider({
70
+
style,
71
+
label,
72
+
showValueLabel = true,
73
+
size: sizeProp,
74
+
...props
75
+
}: ColorAreaProps) {
76
+
const size = sizeProp || use(SizeContext);
77
+
78
+
return (
79
+
<SizeContext value={size}>
80
+
<AriaColorSlider
81
+
{...props}
82
+
data-size={size}
83
+
{...stylex.props(styles.colorSlider, style)}
84
+
>
85
+
{label && <Label style={styles.label}>{label}</Label>}
86
+
{showValueLabel && (
87
+
<SliderOutput {...stylex.props(styles.valueLabel)} />
88
+
)}
89
+
<SliderTrack
90
+
{...stylex.props(styles.track)}
91
+
style={({ defaultStyle, isDisabled }) => ({
92
+
background: isDisabled
93
+
? uiColor.component2
94
+
: `${defaultStyle.background as string},
95
+
repeating-conic-gradient(#CCC 0% 25%, white 0% 50%) 50% / 16px 16px`,
96
+
})}
97
+
>
98
+
<ColorThumb style={styles.thumb} />
99
+
</SliderTrack>
100
+
</AriaColorSlider>
101
+
</SizeContext>
102
+
);
103
+
}
+4
-1
packages/hip-ui/src/components/progress-bar/index.tsx
+4
-1
packages/hip-ui/src/components/progress-bar/index.tsx
···
86
86
)`,
87
87
backgroundSize: "20%",
88
88
height: "100%",
89
-
animationName: "none",
89
+
animationName: {
90
+
default: IndeterminateAnimation,
91
+
[mediaQueries.reducedMotion]: "none",
92
+
},
90
93
animationDuration: "1s",
91
94
animationIterationCount: "infinite",
92
95
animationTimingFunction: "linear",