A design system in a box.
hip-ui.tngl.io/docs/introduction
add button group variant and colorswatch
+466
-207
+2
-1
README.md
+2
-1
README.md
+61
apps/docs/src/components/color-swatch/index.tsx
+61
apps/docs/src/components/color-swatch/index.tsx
···
1
+
import type { ColorSwatchProps as AriaColorSwatchProps } from "react-aria-components";
2
+
3
+
import * as stylex from "@stylexjs/stylex";
4
+
import { use } from "react";
5
+
import { ColorSwatch as AriaColorSwatch } from "react-aria-components";
6
+
7
+
import { SizeContext } from "../context";
8
+
import { slate } from "../theme/colors.stylex";
9
+
import { radius } from "../theme/radius.stylex";
10
+
import { spacing } from "../theme/spacing.stylex";
11
+
import { Size } from "../theme/types";
12
+
13
+
const styles = stylex.create({
14
+
swatch: {
15
+
borderColor: slate.border2,
16
+
borderStyle: "solid",
17
+
borderWidth: 1,
18
+
boxSizing: "border-box",
19
+
},
20
+
sm: {
21
+
borderRadius: radius.sm,
22
+
height: spacing["4"],
23
+
width: spacing["4"],
24
+
},
25
+
md: {
26
+
borderRadius: radius.md,
27
+
height: spacing["6"],
28
+
width: spacing["6"],
29
+
},
30
+
lg: {
31
+
borderRadius: radius.lg,
32
+
height: spacing["8"],
33
+
width: spacing["8"],
34
+
},
35
+
});
36
+
37
+
export interface ColorSwatchProps
38
+
extends Omit<AriaColorSwatchProps, "children" | "style" | "className"> {
39
+
style?: stylex.StyleXStyles | stylex.StyleXStyles[];
40
+
children?: React.ReactNode;
41
+
size?: Size;
42
+
}
43
+
44
+
export function ColorSwatch({
45
+
style,
46
+
size: sizeProp,
47
+
...props
48
+
}: ColorSwatchProps) {
49
+
const size = sizeProp || use(SizeContext);
50
+
51
+
return (
52
+
<AriaColorSwatch
53
+
{...props}
54
+
{...stylex.props(styles.swatch, styles[size], style)}
55
+
style={({ color }) => ({
56
+
background: `linear-gradient(${color.toString()}, ${color.toString()}),
57
+
repeating-conic-gradient(#CCC 0% 25%, white 0% 50%) 50% / 16px 16px`,
58
+
})}
59
+
/>
60
+
);
61
+
}
+1
apps/docs/src/components/theme/types.ts
+1
apps/docs/src/components/theme/types.ts
+27
-8
apps/docs/src/components/theme/useButtonStyles.ts
+27
-8
apps/docs/src/components/theme/useButtonStyles.ts
···
112
112
borderTopLeftRadius: { ":not(:first-child)": 0 },
113
113
borderTopRightRadius: { ":not(:last-child)": 0 },
114
114
},
115
-
secondaryGroupHorizontal: {
115
+
secondaryGroupedHorizontal: {
116
116
borderRightColor: { ":not(:last-child)": slate.border2 },
117
117
},
118
118
groupVertical: {
···
122
122
borderTopRightRadius: { ":not(:first-child)": 0 },
123
123
borderTopWidth: { ":not(:first-child)": 0 },
124
124
},
125
-
secondaryGroupVertical: {
125
+
secondaryGroupedVertical: {
126
126
borderBottomColor: { ":not(:last-child)": slate.border2 },
127
127
},
128
+
separate: {
129
+
flexBasis:
130
+
"calc((1 / var(--items-per-row)) * (100% - (var(--toggle-button-group-gap) * (var(--items-per-row) - 1))))",
131
+
flexGrow: 1,
132
+
flexShrink: 1,
133
+
},
128
134
});
129
135
130
136
export const useButtonStyles = ({
···
139
145
140
146
return [
141
147
styles.base,
142
-
group === "horizontal" && styles.groupHorizontal,
143
-
group === "vertical" && styles.groupVertical,
148
+
group?.orientation === "horizontal" &&
149
+
group.variant === "grouped" &&
150
+
styles.groupHorizontal,
151
+
group?.orientation === "vertical" &&
152
+
group.variant === "grouped" &&
153
+
styles.groupVertical,
144
154
variant === "primary" && [
145
155
primary.bgAction,
146
156
primary.borderInteractive,
···
151
161
gray.bgUi,
152
162
styles.secondary,
153
163
gray.text,
154
-
group === "horizontal" && styles.secondaryGroupHorizontal,
155
-
group === "vertical" && styles.secondaryGroupVertical,
164
+
group?.orientation === "horizontal" &&
165
+
group.variant === "grouped" &&
166
+
styles.secondaryGroupedHorizontal,
167
+
group?.orientation === "vertical" &&
168
+
group.variant === "grouped" &&
169
+
styles.secondaryGroupedVertical,
156
170
],
157
171
variant === "tertiary" && [
158
172
gray.bgGhost,
159
173
styles.tertiary,
160
174
gray.text,
161
-
group === "horizontal" && styles.secondaryGroupHorizontal,
162
-
group === "vertical" && styles.secondaryGroupVertical,
175
+
group?.orientation === "horizontal" &&
176
+
group.variant === "grouped" &&
177
+
styles.secondaryGroupedHorizontal,
178
+
group?.orientation === "vertical" &&
179
+
group.variant === "grouped" &&
180
+
styles.secondaryGroupedVertical,
163
181
],
164
182
variant === "outline" && [
165
183
gray.borderInteractive,
···
182
200
size === "sm" && styles.small,
183
201
size === "md" && styles.medium,
184
202
size === "lg" && styles.large,
203
+
group?.variant === "separate" && styles.separate,
185
204
];
186
205
};
+1
apps/docs/src/components/theme/useInputStyles.ts
+1
apps/docs/src/components/theme/useInputStyles.ts
+135
apps/docs/src/routes/_docs.ecommerce-app.tsx
+135
apps/docs/src/routes/_docs.ecommerce-app.tsx
···
14
14
import { Text } from "@/components/typography/text";
15
15
import { Separator } from "@/components/separator";
16
16
import { Select, SelectItem } from "@/components/select";
17
+
import { ToggleButtonGroup } from "@/components/toggle-button-group";
18
+
import { ToggleButton } from "@/components/toggle-button";
19
+
import { ColorSwatch } from "@/components/color-swatch";
17
20
18
21
const styles = stylex.create({
19
22
grow: {
···
104
107
);
105
108
}
106
109
110
+
function ProductOptionsCard() {
111
+
return (
112
+
<Card size="sm">
113
+
<CardBody>
114
+
<Flex direction="column" gap="5">
115
+
<Flex direction="column" gap="2">
116
+
<Text weight="semibold">Delivery</Text>
117
+
<ToggleButtonGroup
118
+
variant="separate"
119
+
itemsPerRow={2}
120
+
selectionMode="single"
121
+
>
122
+
<ToggleButton id="tomorrow" variant="secondary">
123
+
Tomorrow
124
+
</ToggleButton>
125
+
<ToggleButton id="within-3-days" variant="secondary">
126
+
Within 3 days
127
+
</ToggleButton>
128
+
</ToggleButtonGroup>
129
+
</Flex>
130
+
<Flex direction="column" gap="2">
131
+
<Text weight="semibold">Size</Text>
132
+
<ToggleButtonGroup
133
+
variant="separate"
134
+
itemsPerRow={5}
135
+
selectionMode="single"
136
+
>
137
+
<ToggleButton id="5.5" variant="secondary">
138
+
5.5
139
+
</ToggleButton>
140
+
<ToggleButton id="6" variant="secondary">
141
+
6
142
+
</ToggleButton>
143
+
<ToggleButton id="6.5" variant="secondary">
144
+
6.5
145
+
</ToggleButton>
146
+
<ToggleButton id="7" variant="secondary">
147
+
7
148
+
</ToggleButton>
149
+
<ToggleButton id="7.5" variant="secondary">
150
+
7.5
151
+
</ToggleButton>
152
+
<ToggleButton id="8" variant="secondary">
153
+
8
154
+
</ToggleButton>
155
+
<ToggleButton id="8.5" variant="secondary">
156
+
8.5
157
+
</ToggleButton>
158
+
<ToggleButton id="9" variant="secondary">
159
+
9
160
+
</ToggleButton>
161
+
<ToggleButton id="9.5" variant="secondary">
162
+
9.5
163
+
</ToggleButton>
164
+
<ToggleButton id="10" variant="secondary">
165
+
10
166
+
</ToggleButton>
167
+
</ToggleButtonGroup>
168
+
</Flex>
169
+
<Flex direction="column" gap="2">
170
+
<Text weight="semibold">Material</Text>
171
+
<ToggleButtonGroup
172
+
variant="separate"
173
+
itemsPerRow={5}
174
+
selectionMode="single"
175
+
>
176
+
<ToggleButton id="leather" variant="secondary">
177
+
Leather
178
+
</ToggleButton>
179
+
<ToggleButton id="suede" variant="secondary">
180
+
Suede
181
+
</ToggleButton>
182
+
<ToggleButton id="mesh" variant="secondary">
183
+
Mesh
184
+
</ToggleButton>
185
+
<ToggleButton id="canvas" variant="secondary">
186
+
Canvas
187
+
</ToggleButton>
188
+
</ToggleButtonGroup>
189
+
</Flex>
190
+
<Flex direction="column" gap="2">
191
+
<Text weight="semibold">Color</Text>
192
+
<ToggleButtonGroup
193
+
variant="separate"
194
+
itemsPerRow={3}
195
+
selectionMode="single"
196
+
>
197
+
<ToggleButton id="white" variant="secondary">
198
+
<ColorSwatch color="#fff" size="sm" />
199
+
White
200
+
</ToggleButton>
201
+
<ToggleButton id="grey" variant="secondary">
202
+
<ColorSwatch color="#808080" size="sm" />
203
+
Grey
204
+
</ToggleButton>
205
+
<ToggleButton id="black" variant="secondary">
206
+
<ColorSwatch color="#000" size="sm" />
207
+
Black
208
+
</ToggleButton>
209
+
<ToggleButton id="red" variant="secondary">
210
+
<ColorSwatch color="#f00" size="sm" />
211
+
Red
212
+
</ToggleButton>
213
+
<ToggleButton id="pink" variant="secondary">
214
+
<ColorSwatch color="#f0f" size="sm" />
215
+
Pink
216
+
</ToggleButton>
217
+
<ToggleButton id="violet" variant="secondary">
218
+
<ColorSwatch color="#800080" size="sm" />
219
+
Violet
220
+
</ToggleButton>
221
+
<ToggleButton id="blue" variant="secondary">
222
+
<ColorSwatch color="#00f" size="sm" />
223
+
Blue
224
+
</ToggleButton>
225
+
<ToggleButton id="green" variant="secondary">
226
+
<ColorSwatch color="#0f0" size="sm" />
227
+
Green
228
+
</ToggleButton>
229
+
<ToggleButton id="beige" variant="secondary">
230
+
<ColorSwatch color="#f5f5dc" size="sm" />
231
+
Beige
232
+
</ToggleButton>
233
+
</ToggleButtonGroup>
234
+
</Flex>
235
+
</Flex>
236
+
</CardBody>
237
+
</Card>
238
+
);
239
+
}
240
+
107
241
function RouteComponent() {
108
242
return (
109
243
<Flex gap="4">
110
244
<Flex direction="column" gap="4" style={styles.skinny}>
111
245
<SmallProductCard />
112
246
<SmallProductCardWithBuying />
247
+
<ProductOptionsCard />
113
248
</Flex>
114
249
<Flex direction="column" gap="4" style={styles.skinny}></Flex>
115
250
<Flex direction="column" gap="4" style={styles.skinny}></Flex>
+2
packages/hip-ui/src/cli/install.tsx
+2
packages/hip-ui/src/cli/install.tsx
···
17
17
import { cardConfig } from "../components/card/card-config.js";
18
18
import { checkboxConfig } from "../components/checkbox/checkbox-config.js";
19
19
import { colorFieldConfig } from "../components/color-field/color-field-config.js";
20
+
import { colorSwatchConfig } from "../components/color-swatch/link-config.js";
20
21
import { comboboxConfig } from "../components/combobox/combobox-config.js";
21
22
import { commandMenuConfig } from "../components/command-menu/command-menu-config.js";
22
23
import { contextMenuConfig } from "../components/context-menu/context-menu-config.js";
···
86
87
gridConfig,
87
88
switchConfig,
88
89
aspectRatioConfig,
90
+
colorSwatchConfig,
89
91
];
90
92
91
93
function StringSetting({
+61
packages/hip-ui/src/components/color-swatch/index.tsx
+61
packages/hip-ui/src/components/color-swatch/index.tsx
···
1
+
import type { ColorSwatchProps as AriaColorSwatchProps } from "react-aria-components";
2
+
3
+
import * as stylex from "@stylexjs/stylex";
4
+
import { use } from "react";
5
+
import { ColorSwatch as AriaColorSwatch } from "react-aria-components";
6
+
7
+
import { SizeContext } from "../context";
8
+
import { slate } from "../theme/colors.stylex";
9
+
import { radius } from "../theme/radius.stylex";
10
+
import { spacing } from "../theme/spacing.stylex";
11
+
import { Size } from "../theme/types";
12
+
13
+
const styles = stylex.create({
14
+
swatch: {
15
+
borderColor: slate.border2,
16
+
borderStyle: "solid",
17
+
borderWidth: 1,
18
+
boxSizing: "border-box",
19
+
},
20
+
sm: {
21
+
borderRadius: radius.sm,
22
+
height: spacing["4"],
23
+
width: spacing["4"],
24
+
},
25
+
md: {
26
+
borderRadius: radius.md,
27
+
height: spacing["6"],
28
+
width: spacing["6"],
29
+
},
30
+
lg: {
31
+
borderRadius: radius.lg,
32
+
height: spacing["8"],
33
+
width: spacing["8"],
34
+
},
35
+
});
36
+
37
+
export interface ColorSwatchProps
38
+
extends Omit<AriaColorSwatchProps, "children" | "style" | "className"> {
39
+
style?: stylex.StyleXStyles | stylex.StyleXStyles[];
40
+
children?: React.ReactNode;
41
+
size?: Size;
42
+
}
43
+
44
+
export function ColorSwatch({
45
+
style,
46
+
size: sizeProp,
47
+
...props
48
+
}: ColorSwatchProps) {
49
+
const size = sizeProp || use(SizeContext);
50
+
51
+
return (
52
+
<AriaColorSwatch
53
+
{...props}
54
+
{...stylex.props(styles.swatch, styles[size], style)}
55
+
style={({ color }) => ({
56
+
background: `linear-gradient(${color.toString()}, ${color.toString()}),
57
+
repeating-conic-gradient(#CCC 0% 25%, white 0% 50%) 50% / 16px 16px`,
58
+
})}
59
+
/>
60
+
);
61
+
}
+6
packages/hip-ui/src/components/color-swatch/link-config.ts
+6
packages/hip-ui/src/components/color-swatch/link-config.ts
+1
packages/hip-ui/src/components/theme/types.ts
+1
packages/hip-ui/src/components/theme/types.ts
+27
-8
packages/hip-ui/src/components/theme/useButtonStyles.ts
+27
-8
packages/hip-ui/src/components/theme/useButtonStyles.ts
···
112
112
borderTopLeftRadius: { ":not(:first-child)": 0 },
113
113
borderTopRightRadius: { ":not(:last-child)": 0 },
114
114
},
115
-
secondaryGroupHorizontal: {
115
+
secondaryGroupedHorizontal: {
116
116
borderRightColor: { ":not(:last-child)": slate.border2 },
117
117
},
118
118
groupVertical: {
···
122
122
borderTopRightRadius: { ":not(:first-child)": 0 },
123
123
borderTopWidth: { ":not(:first-child)": 0 },
124
124
},
125
-
secondaryGroupVertical: {
125
+
secondaryGroupedVertical: {
126
126
borderBottomColor: { ":not(:last-child)": slate.border2 },
127
127
},
128
+
separate: {
129
+
flexBasis:
130
+
"calc((1 / var(--items-per-row)) * (100% - (var(--toggle-button-group-gap) * (var(--items-per-row) - 1))))",
131
+
flexGrow: 1,
132
+
flexShrink: 1,
133
+
},
128
134
});
129
135
130
136
export const useButtonStyles = ({
···
139
145
140
146
return [
141
147
styles.base,
142
-
group === "horizontal" && styles.groupHorizontal,
143
-
group === "vertical" && styles.groupVertical,
148
+
group?.orientation === "horizontal" &&
149
+
group.variant === "grouped" &&
150
+
styles.groupHorizontal,
151
+
group?.orientation === "vertical" &&
152
+
group.variant === "grouped" &&
153
+
styles.groupVertical,
144
154
variant === "primary" && [
145
155
primary.bgAction,
146
156
primary.borderInteractive,
···
151
161
gray.bgUi,
152
162
styles.secondary,
153
163
gray.text,
154
-
group === "horizontal" && styles.secondaryGroupHorizontal,
155
-
group === "vertical" && styles.secondaryGroupVertical,
164
+
group?.orientation === "horizontal" &&
165
+
group.variant === "grouped" &&
166
+
styles.secondaryGroupedHorizontal,
167
+
group?.orientation === "vertical" &&
168
+
group.variant === "grouped" &&
169
+
styles.secondaryGroupedVertical,
156
170
],
157
171
variant === "tertiary" && [
158
172
gray.bgGhost,
159
173
styles.tertiary,
160
174
gray.text,
161
-
group === "horizontal" && styles.secondaryGroupHorizontal,
162
-
group === "vertical" && styles.secondaryGroupVertical,
175
+
group?.orientation === "horizontal" &&
176
+
group.variant === "grouped" &&
177
+
styles.secondaryGroupedHorizontal,
178
+
group?.orientation === "vertical" &&
179
+
group.variant === "grouped" &&
180
+
styles.secondaryGroupedVertical,
163
181
],
164
182
variant === "outline" && [
165
183
gray.borderInteractive,
···
182
200
size === "sm" && styles.small,
183
201
size === "md" && styles.medium,
184
202
size === "lg" && styles.large,
203
+
group?.variant === "separate" && styles.separate,
185
204
];
186
205
};