@lets-events/react 5.0.0 → 6.0.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (32) hide show
  1. package/.eslintrc.json +2 -2
  2. package/.turbo/turbo-build.log +20 -18
  3. package/CHANGELOG.md +8 -1
  4. package/dist/index.d.mts +42 -11
  5. package/dist/index.d.ts +42 -11
  6. package/dist/index.js +585 -141
  7. package/dist/index.mjs +589 -145
  8. package/package.json +1 -1
  9. package/src/components/Alert.tsx +255 -255
  10. package/src/components/Avatar.tsx +55 -55
  11. package/src/components/Badge.tsx +129 -121
  12. package/src/components/Box.tsx +3 -3
  13. package/src/components/Button.tsx +328 -342
  14. package/src/components/ButtonGroup.tsx +484 -477
  15. package/src/components/CheckboxGroup.tsx +214 -208
  16. package/src/components/Container.tsx +39 -39
  17. package/src/components/Dropdown.tsx +167 -109
  18. package/src/components/Filter.tsx +164 -95
  19. package/src/components/Flex.tsx +117 -117
  20. package/src/components/Grid.tsx +137 -137
  21. package/src/components/Icon.tsx +47 -47
  22. package/src/components/Modal.tsx +108 -108
  23. package/src/components/RadioGroup.tsx +210 -203
  24. package/src/components/Section.tsx +33 -33
  25. package/src/components/Step.tsx +147 -147
  26. package/src/components/Switch.tsx +108 -108
  27. package/src/components/Text.tsx +31 -31
  28. package/src/components/TextField.tsx +241 -193
  29. package/src/index.tsx +27 -27
  30. package/src/styles/index.ts +38 -38
  31. package/src/types/typographyValues.ts +179 -0
  32. package/tsconfig.json +3 -3
package/src/components/ButtonGroup.tsx CHANGED
@@ -1,478 +1,485 @@
1
- import { ComponentProps } from "react";
2
- import { styled } from "../styles";
3
- import { Button, Flex } from "@radix-ui/themes";
4
-
5
- export const ButtonItemStyled = styled(Button, {
6
- fontFamily: '$default',
7
- letterSpacing: 0,
8
- border: 0,
9
- transition: 'all 300ms ease-out',
10
- cursor: 'pointer',
11
- boxSizing: 'border-box',
12
- variants: {
13
- active: {
14
- true: {
15
- },
16
- }
17
- },
18
- });
19
-
20
- export const ButtonGroupStyled = styled(Flex, {
21
- display: 'flex',
22
- borderRadius: '$md',
23
- overflow: 'hidden',
24
- variants: {
25
- color: {
26
- brand: {},
27
- neutral: {},
28
- purple: {},
29
- green: {},
30
- blue: {},
31
- red: {},
32
- },
33
- variant: {
34
- text: {
35
- [`& ${ButtonItemStyled}`]: {
36
- backgroundColor: 'transparent',
37
- boxShadow: 'none',
38
- padding: 0,
39
- border: 0,
40
- },
41
- },
42
- contained: {
43
- [`& ${ButtonItemStyled}`]: {
44
- borderWidth: '$1',
45
- borderStyle: 'solid',
46
- '&:disabled': {
47
- boxShadow: 'none',
48
- }
49
- }
50
- },
51
- outlined: {
52
- [`& ${ButtonItemStyled}`]: {
53
- borderWidth: '$1',
54
- borderStyle: 'solid',
55
- '&:disabled': {
56
- color: '$neutral400',
57
- }
58
- }
59
- },
60
- },
61
- size: {
62
- xs: {
63
- [`& ${ButtonItemStyled}`]: {
64
- padding: '$6 $12',
65
- fontSize: '$12',
66
- lineHeight: '$base',
67
- '&:not(:first-child)': {
68
- borderLeft: 'none',
69
- },
70
- '&:first-child': {
71
- borderTopLeftRadius: '$xs',
72
- borderBottomLeftRadius: '$xs',
73
- },
74
- '&:last-child': {
75
- borderTopRightRadius: '$xs',
76
- borderBottomRightRadius: '$xs',
77
- },
78
- }
79
- },
80
- sm: {
81
- [`& ${ButtonItemStyled}`]: {
82
- padding: '$8 $14',
83
- fontSize: '$13',
84
- lineHeight: '$smaller',
85
- '&:not(:first-child)': {
86
- borderLeft: 'none',
87
- },
88
- '&:first-child': {
89
- borderTopLeftRadius: '$sm',
90
- borderBottomLeftRadius: '$sm',
91
- },
92
- '&:last-child': {
93
- borderTopRightRadius: '$sm',
94
- borderBottomRightRadius: '$sm',
95
- },
96
- }
97
- },
98
- md: {
99
- [`& ${ButtonItemStyled}`]: {
100
- padding: '$12 $16',
101
- fontSize: '$14',
102
- lineHeight: '$smaller',
103
- '&:not(:first-child)': {
104
- borderLeft: 'none',
105
- },
106
- '&:first-child': {
107
- borderTopLeftRadius: '$md',
108
- borderBottomLeftRadius: '$md',
109
- },
110
- '&:last-child': {
111
- borderTopRightRadius: '$md',
112
- borderBottomRightRadius: '$md',
113
- },
114
- }
115
- },
116
- lg: {
117
- [`& ${ButtonItemStyled}`]: {
118
- padding: '$13 $20',
119
- fontSize: '$18',
120
- lineHeight: '$smaller',
121
- '&:not(:first-child)': {
122
- borderLeft: 'none',
123
- },
124
- '&:first-child': {
125
- borderTopLeftRadius: '$lg',
126
- borderBottomLeftRadius: '$lg',
127
- },
128
- '&:last-child': {
129
- borderTopRightRadius: '$lg',
130
- borderBottomRightRadius: '$lg',
131
- },
132
- }
133
- },
134
- },
135
- },
136
-
137
- compoundVariants: [
138
- // text
139
- {
140
- variant: 'text',
141
- color: 'brand',
142
- css: {
143
- [`& ${ButtonItemStyled}`]: {
144
- color: '$brand500',
145
- '&:hover': { color: '$brand600' },
146
- '&:focus': { color: '$brand700' },
147
- '&:active': { color: '$brand500' },
148
- '&:disabled': { color: '$dark400' },
149
- },
150
- [`& ${ButtonItemStyled}.active`]: {
151
- color: '$brand700',
152
- '&:hover': { color: '$brand700' },
153
- '&:focus': { color: '$brand700' },
154
- '&:active': { color: '$brand700' },
155
- },
156
- }
157
- },
158
- {
159
- variant: 'text',
160
- color: 'neutral',
161
- css: {
162
- [`& ${ButtonItemStyled}`]: {
163
- color: '$neutral600',
164
- '&:hover': { color: '$neutral700' },
165
- '&:focus': { color: '$neutral800' },
166
- '&:active': { color: '$neutral500' },
167
- '&:disabled': { color: '$dark400' },
168
- },
169
- [`& ${ButtonItemStyled}.active`]: {
170
- color: '$neutral800',
171
- '&:hover': { color: '$neutral800' },
172
- '&:focus': { color: '$neutral800' },
173
- '&:active': { color: '$neutral800' },
174
- },
175
- }
176
- },
177
- {
178
- variant: 'text',
179
- color: 'purple',
180
- css: {
181
- [`& ${ButtonItemStyled}`]: {
182
- color: '$purple500',
183
- '&:hover': { color: '$purple600' },
184
- '&:focus': { color: '$purple700' },
185
- '&:active': { color: '$purple500' },
186
- '&:disabled': { color: '$dark400' },
187
- },
188
- [`& ${ButtonItemStyled}.active`]: {
189
- color: '$purple700',
190
- '&:hover': { color: '$purple700' },
191
- '&:focus': { color: '$purple700' },
192
- '&:active': { color: '$purple700' },
193
- },
194
- }
195
- },
196
- {
197
- variant: 'text',
198
- color: 'green',
199
- css: {
200
- [`& ${ButtonItemStyled}`]: {
201
- color: '$green500',
202
- '&:hover': { color: '$green600' },
203
- '&:focus': { color: '$green700' },
204
- '&:active': { color: '$green500' },
205
- '&:disabled': { color: '$dark400' },
206
- },
207
- [`& ${ButtonItemStyled}.active`]: {
208
- color: '$green700',
209
- '&:hover': { color: '$green700' },
210
- '&:focus': { color: '$green700' },
211
- '&:active': { color: '$green700' },
212
- },
213
- }
214
- },
215
- {
216
- variant: 'text',
217
- color: 'blue',
218
- css: {
219
- [`& ${ButtonItemStyled}`]: {
220
- color: '$blue500',
221
- '&:hover': { color: '$blue600' },
222
- '&:focus': { color: '$blue700' },
223
- '&:active': { color: '$blue500' },
224
- '&:disabled': { color: '$dark400' },
225
- },
226
- [`& ${ButtonItemStyled}.active`]: {
227
- color: '$blue700',
228
- '&:hover': { color: '$blue700' },
229
- '&:focus': { color: '$blue700' },
230
- '&:active': { color: '$blue700' },
231
- },
232
- }
233
- },
234
- {
235
- variant: 'text',
236
- color: 'red',
237
- css: {
238
- [`& ${ButtonItemStyled}`]: {
239
- color: '$red500',
240
- '&:hover': { color: '$red600' },
241
- '&:focus': { color: '$red700' },
242
- '&:active': { color: '$red500' },
243
- '&:disabled': { color: '$dark400' },
244
- },
245
- [`& ${ButtonItemStyled}.active`]: {
246
- color: '$red700',
247
- '&:hover': { color: '$red700' },
248
- '&:focus': { color: '$red700' },
249
- '&:active': { color: '$red700' },
250
- },
251
- }
252
- },
253
-
254
- // contained
255
- {
256
- variant: 'contained',
257
- color: 'brand',
258
- css: {
259
- [`& ${ButtonItemStyled}`]: {
260
- color: '$grey50',
261
- backgroundColor: '$brand500',
262
- borderColor: '$brand500',
263
- '&:hover': {
264
- backgroundColor: '$blue600',
265
- },
266
- '&:focus': {
267
- backgroundColor: '$blue700',
268
- },
269
- '&:active': {
270
- backgroundColor: '$blue500',
271
- },
272
- '&:disabled': {
273
- backgroundColor: '$brand50',
274
- color: '$neutral400',
275
- }
276
- },
277
- [`& ${ButtonItemStyled}.active`]: {
278
- backgroundColor: '$brand700',
279
- '&:hover': { backgroundColor: '$brand700' },
280
- '&:focus': { backgroundColor: '$brand700' },
281
- '&:active': { backgroundColor: '$brand700' },
282
- },
283
- }
284
- },
285
- {
286
- variant: 'contained',
287
- color: 'neutral',
288
- css: {
289
- [`& ${ButtonItemStyled}`]: {
290
- backgroundColor: '$neutral600',
291
- color: '$grey50',
292
- '&:hover': {
293
- backgroundColor: '$neutral700',
294
- borderColor: '$neutral800',
295
- },
296
- '&:focus': {
297
- backgroundColor: '$neutral800',
298
- },
299
- '&:active': {
300
- backgroundColor: '$neutral500',
301
- borderColor: '$neutral400',
302
- },
303
- '&:disabled': {
304
- backgroundColor: '$neutral50',
305
- borderColor: '$neutral200',
306
- color: '$neutral400',
307
- }
308
- },
309
- [`& ${ButtonItemStyled}.active`]: {
310
- backgroundColor: '$neutral800',
311
- '&:hover': { backgroundColor: '$neutral800' },
312
- '&:focus': { backgroundColor: '$neutral800' },
313
- '&:active': { backgroundColor: '$neutral800' },
314
- },
315
- }
316
- },
317
- {
318
- variant: 'contained',
319
- color: 'purple',
320
- css: {
321
- [`& ${ButtonItemStyled}`]: {
322
- backgroundColor: '$purple500',
323
- color: '$grey50',
324
- '&:hover': {
325
- backgroundColor: '$purple600',
326
- borderColor: '$purple700',
327
- },
328
- '&:focus': {
329
- backgroundColor: '$purple700',
330
- },
331
- '&:active': {
332
- borderColor: '$purple300',
333
- backgroundColor: '$purple500',
334
- },
335
- '&:disabled': {
336
- borderColor: '$purple200',
337
- backgroundColor: '$purple200',
338
- color: '$neutral400',
339
- }
340
- },
341
- [`& ${ButtonItemStyled}.active`]: {
342
- backgroundColor: '$purple700',
343
- '&:hover': { backgroundColor: '$purple700' },
344
- '&:focus': { backgroundColor: '$purple700' },
345
- '&:active': { backgroundColor: '$purple700' },
346
- },
347
- }
348
- },
349
- // outlined
350
- {
351
- variant: 'outlined',
352
- color: 'brand',
353
- css: {
354
- [`& ${ButtonItemStyled}`]: {
355
- color: '$brand500',
356
- borderColor: '$brand300',
357
- backgroundColor: '$grey50',
358
- '&:hover': {
359
- borderColor: '$brand400',
360
- backgroundColor: '$brand50',
361
- },
362
- '&:focus': {
363
- borderColor: '$brand400',
364
- backgroundColor: '$brand50',
365
- },
366
- '&:active': {
367
- borderColor: '$brand300',
368
- backgroundColor: '$grey50',
369
- },
370
- '&:disabled': {
371
- borderColor: '$brand200',
372
- backgroundColor: '$neutral200',
373
- color: '$neutral400',
374
- }
375
- },
376
- [`& ${ButtonItemStyled}.active`]: {
377
- color: '$brand700',
378
- borderColor: '$brand600',
379
- backgroundColor: '$brand50',
380
- '&:hover': { backgroundColor: '$brand50', borderColor: '$brand600' },
381
- '&:focus': { backgroundColor: '$brand50', borderColor: '$brand600' },
382
- '&:active': { backgroundColor: '$brand50', borderColor: '$brand600' },
383
- },
384
- }
385
- },
386
- {
387
- variant: 'outlined',
388
- color: 'neutral',
389
- css: {
390
- [`& ${ButtonItemStyled}`]: {
391
- color: '$neutral600',
392
- borderColor: '$neutral300',
393
- backgroundColor: '$grey50',
394
- '&:hover': {
395
- borderColor: '$neutral400',
396
- backgroundColor: '$grey100',
397
- },
398
- '&:focus': {
399
- borderColor: '$neutral400',
400
- backgroundColor: '$grey100',
401
- },
402
- '&:active': {
403
- borderColor: '$neutral300',
404
- backgroundColor: '$grey50',
405
- },
406
- '&:disabled': {
407
- borderColor: '$neutral200',
408
- backgroundColor: '$neutral200',
409
- color: '$neutral400',
410
- }
411
- },
412
- [`& ${ButtonItemStyled}.active`]: {
413
- color: '$neutral800',
414
- borderColor: '$neutral600',
415
- backgroundColor: '$grey100',
416
- '&:hover': { backgroundColor: '$grey100', borderColor: '$neutral600' },
417
- '&:focus': { backgroundColor: '$grey100', borderColor: '$neutral600' },
418
- '&:active': { backgroundColor: '$grey100', borderColor: '$neutral600' },
419
- },
420
- }
421
- },
422
- {
423
- variant: 'outlined',
424
- color: 'purple',
425
- css: {
426
- [`& ${ButtonItemStyled}`]: {
427
- color: '$purple500',
428
- borderColor: '$purple300',
429
- backgroundColor: '$grey50',
430
- '&:hover': {
431
- borderColor: '$purple400',
432
- backgroundColor: '$purple50',
433
- },
434
- '&:focus': {
435
- borderColor: '$purple400',
436
- backgroundColor: '$purple50',
437
- },
438
- '&:active': {
439
- borderColor: '$purple300',
440
- backgroundColor: '$grey50',
441
- },
442
- '&:disabled': {
443
- borderColor: '$purple200',
444
- backgroundColor: '$neutral200',
445
- color: '$neutral400',
446
- }
447
- },
448
- [`& ${ButtonItemStyled}.active`]: {
449
- color: '$purple700',
450
- borderColor: '$purple600',
451
- backgroundColor: '$purple50',
452
- '&:hover': { backgroundColor: '$purple50', borderColor: '$purple600' },
453
- '&:focus': { backgroundColor: '$purple50', borderColor: '$purple600' },
454
- '&:active': { backgroundColor: '$purple50', borderColor: '$purple600' },
455
- },
456
- }
457
- },
458
-
459
- ],
460
-
461
- defaultVariants: {
462
- variant: 'contained',
463
- size: 'md',
464
- color: 'brand',
465
- }
466
- });
467
-
468
- export interface ButtonItemProps extends ComponentProps<typeof ButtonItemStyled> { }
469
-
470
- export type ButtonGroupProps = ComponentProps<typeof ButtonGroupStyled>
471
-
472
- export function ButtonItem({ children, active, ...props }: ButtonItemProps) {
473
- return <ButtonItemStyled className={active ? 'active' : ''} {...props}>{children}</ButtonItemStyled>;
474
- }
475
-
476
- export function ButtonGroup({ children, ...props }: ButtonGroupProps) {
477
- return <ButtonGroupStyled {...props}>{children}</ButtonGroupStyled>;
1
+ import { ComponentProps } from "react";
2
+ import { styled } from "../styles";
3
+ import { Button, Flex } from "@radix-ui/themes";
4
+
5
+ export const ButtonItemStyled = styled(Button, {
6
+ fontFamily: '$default',
7
+ letterSpacing: 0,
8
+ border: 0,
9
+ transition: 'all 300ms ease-out',
10
+ cursor: 'pointer',
11
+ boxSizing: 'border-box',
12
+ variants: {
13
+ active: {
14
+ true: {
15
+ },
16
+ }
17
+ },
18
+ });
19
+
20
+ export const ButtonGroupStyled = styled(Flex, {
21
+ display: 'flex',
22
+ borderRadius: '$md',
23
+ overflow: 'hidden',
24
+ variants: {
25
+ color: {
26
+ brand: {},
27
+ neutral: {},
28
+ purple: {},
29
+ green: {},
30
+ blue: {},
31
+ red: {},
32
+ },
33
+ variant: {
34
+ text: {
35
+ [`& ${ButtonItemStyled}`]: {
36
+ backgroundColor: 'transparent',
37
+ boxShadow: 'none',
38
+ padding: 0,
39
+ border: 0,
40
+ },
41
+ },
42
+ contained: {
43
+ [`& ${ButtonItemStyled}`]: {
44
+ borderWidth: '$1',
45
+ borderStyle: 'solid',
46
+ '&:disabled': {
47
+ boxShadow: 'none',
48
+ }
49
+ }
50
+ },
51
+ outlined: {
52
+ [`& ${ButtonItemStyled}`]: {
53
+ borderWidth: '$1',
54
+ borderStyle: 'solid',
55
+ '&:disabled': {
56
+ color: '$neutral400',
57
+ }
58
+ }
59
+ },
60
+ },
61
+ typography: {
62
+ buttonLarge: {
63
+ [`& ${ButtonItemStyled}`]: {
64
+ padding: '$13 $20',
65
+ fontSize: '$buttonLarge',
66
+ lineHeight: '$buttonLarge',
67
+ '&:not(:first-child)': {
68
+ borderLeft: 'none',
69
+ },
70
+ '&:first-child': {
71
+ borderTopLeftRadius: '$lg',
72
+ borderBottomLeftRadius: '$lg',
73
+ },
74
+ '&:last-child': {
75
+ borderTopRightRadius: '$lg',
76
+ borderBottomRightRadius: '$lg',
77
+ },
78
+ }
79
+ },
80
+ buttonMedium: {
81
+ [`& ${ButtonItemStyled}`]: {
82
+ padding: '$12 $16',
83
+ fontSize: '$buttonMedium',
84
+ lineHeight: '$buttonMedium',
85
+ '&:not(:first-child)': {
86
+ borderLeft: 'none',
87
+ },
88
+ '&:first-child': {
89
+ borderTopLeftRadius: '$md',
90
+ borderBottomLeftRadius: '$md',
91
+ },
92
+ '&:last-child': {
93
+ borderTopRightRadius: '$md',
94
+ borderBottomRightRadius: '$md',
95
+ },
96
+ }
97
+ },
98
+ buttonSmall: {
99
+ [`& ${ButtonItemStyled}`]: {
100
+ padding: '$8 $14',
101
+ fontSize: '$buttonSmall',
102
+ lineHeight: '$buttonSmall',
103
+ '&:not(:first-child)': {
104
+ borderLeft: 'none',
105
+ },
106
+ '&:first-child': {
107
+ borderTopLeftRadius: '$sm',
108
+ borderBottomLeftRadius: '$sm',
109
+ },
110
+ '&:last-child': {
111
+ borderTopRightRadius: '$sm',
112
+ borderBottomRightRadius: '$sm',
113
+ },
114
+ }
115
+ },
116
+ buttonExtraSmall: {
117
+ [`& ${ButtonItemStyled}`]: {
118
+ padding: '$6 $12',
119
+ fontSize: '$buttonExtraSmall',
120
+ lineHeight: '$buttonExtraSmall',
121
+ '&:not(:first-child)': {
122
+ borderLeft: 'none',
123
+ },
124
+ '&:first-child': {
125
+ borderTopLeftRadius: '$xs',
126
+ borderBottomLeftRadius: '$xs',
127
+ },
128
+ '&:last-child': {
129
+ borderTopRightRadius: '$xs',
130
+ borderBottomRightRadius: '$xs',
131
+ },
132
+ }
133
+ },
134
+ },
135
+ fontWeight: {
136
+ regular: { [`& ${ButtonItemStyled}`]: { fontWeight: '$regular' } },
137
+ medium: { [`& ${ButtonItemStyled}`]: { fontWeight: '$medium' } },
138
+ semibold: { [`& ${ButtonItemStyled}`]: { fontWeight: '$semibold' } },
139
+ bold: { [`& ${ButtonItemStyled}`]: { fontWeight: '$bold' } },
140
+ },
141
+ },
142
+
143
+ compoundVariants: [
144
+ // text
145
+ {
146
+ variant: 'text',
147
+ color: 'brand',
148
+ css: {
149
+ [`& ${ButtonItemStyled}`]: {
150
+ color: '$brand500',
151
+ '&:hover': { color: '$brand600' },
152
+ '&:focus': { color: '$brand700' },
153
+ '&:active': { color: '$brand500' },
154
+ '&:disabled': { color: '$dark400' },
155
+ },
156
+ [`& ${ButtonItemStyled}.active`]: {
157
+ color: '$brand700',
158
+ '&:hover': { color: '$brand700' },
159
+ '&:focus': { color: '$brand700' },
160
+ '&:active': { color: '$brand700' },
161
+ },
162
+ }
163
+ },
164
+ {
165
+ variant: 'text',
166
+ color: 'neutral',
167
+ css: {
168
+ [`& ${ButtonItemStyled}`]: {
169
+ color: '$neutral600',
170
+ '&:hover': { color: '$neutral700' },
171
+ '&:focus': { color: '$neutral800' },
172
+ '&:active': { color: '$neutral500' },
173
+ '&:disabled': { color: '$dark400' },
174
+ },
175
+ [`& ${ButtonItemStyled}.active`]: {
176
+ color: '$neutral800',
177
+ '&:hover': { color: '$neutral800' },
178
+ '&:focus': { color: '$neutral800' },
179
+ '&:active': { color: '$neutral800' },
180
+ },
181
+ }
182
+ },
183
+ {
184
+ variant: 'text',
185
+ color: 'purple',
186
+ css: {
187
+ [`& ${ButtonItemStyled}`]: {
188
+ color: '$purple500',
189
+ '&:hover': { color: '$purple600' },
190
+ '&:focus': { color: '$purple700' },
191
+ '&:active': { color: '$purple500' },
192
+ '&:disabled': { color: '$dark400' },
193
+ },
194
+ [`& ${ButtonItemStyled}.active`]: {
195
+ color: '$purple700',
196
+ '&:hover': { color: '$purple700' },
197
+ '&:focus': { color: '$purple700' },
198
+ '&:active': { color: '$purple700' },
199
+ },
200
+ }
201
+ },
202
+ {
203
+ variant: 'text',
204
+ color: 'green',
205
+ css: {
206
+ [`& ${ButtonItemStyled}`]: {
207
+ color: '$green500',
208
+ '&:hover': { color: '$green600' },
209
+ '&:focus': { color: '$green700' },
210
+ '&:active': { color: '$green500' },
211
+ '&:disabled': { color: '$dark400' },
212
+ },
213
+ [`& ${ButtonItemStyled}.active`]: {
214
+ color: '$green700',
215
+ '&:hover': { color: '$green700' },
216
+ '&:focus': { color: '$green700' },
217
+ '&:active': { color: '$green700' },
218
+ },
219
+ }
220
+ },
221
+ {
222
+ variant: 'text',
223
+ color: 'blue',
224
+ css: {
225
+ [`& ${ButtonItemStyled}`]: {
226
+ color: '$blue500',
227
+ '&:hover': { color: '$blue600' },
228
+ '&:focus': { color: '$blue700' },
229
+ '&:active': { color: '$blue500' },
230
+ '&:disabled': { color: '$dark400' },
231
+ },
232
+ [`& ${ButtonItemStyled}.active`]: {
233
+ color: '$blue700',
234
+ '&:hover': { color: '$blue700' },
235
+ '&:focus': { color: '$blue700' },
236
+ '&:active': { color: '$blue700' },
237
+ },
238
+ }
239
+ },
240
+ {
241
+ variant: 'text',
242
+ color: 'red',
243
+ css: {
244
+ [`& ${ButtonItemStyled}`]: {
245
+ color: '$red500',
246
+ '&:hover': { color: '$red600' },
247
+ '&:focus': { color: '$red700' },
248
+ '&:active': { color: '$red500' },
249
+ '&:disabled': { color: '$dark400' },
250
+ },
251
+ [`& ${ButtonItemStyled}.active`]: {
252
+ color: '$red700',
253
+ '&:hover': { color: '$red700' },
254
+ '&:focus': { color: '$red700' },
255
+ '&:active': { color: '$red700' },
256
+ },
257
+ }
258
+ },
259
+
260
+ // contained
261
+ {
262
+ variant: 'contained',
263
+ color: 'brand',
264
+ css: {
265
+ [`& ${ButtonItemStyled}`]: {
266
+ color: '$grey50',
267
+ backgroundColor: '$brand500',
268
+ borderColor: '$brand500',
269
+ '&:hover': {
270
+ backgroundColor: '$blue600',
271
+ },
272
+ '&:focus': {
273
+ backgroundColor: '$blue700',
274
+ },
275
+ '&:active': {
276
+ backgroundColor: '$blue500',
277
+ },
278
+ '&:disabled': {
279
+ backgroundColor: '$brand50',
280
+ color: '$neutral400',
281
+ }
282
+ },
283
+ [`& ${ButtonItemStyled}.active`]: {
284
+ backgroundColor: '$brand700',
285
+ '&:hover': { backgroundColor: '$brand700' },
286
+ '&:focus': { backgroundColor: '$brand700' },
287
+ '&:active': { backgroundColor: '$brand700' },
288
+ },
289
+ }
290
+ },
291
+ {
292
+ variant: 'contained',
293
+ color: 'neutral',
294
+ css: {
295
+ [`& ${ButtonItemStyled}`]: {
296
+ backgroundColor: '$neutral600',
297
+ color: '$grey50',
298
+ '&:hover': {
299
+ backgroundColor: '$neutral700',
300
+ borderColor: '$neutral800',
301
+ },
302
+ '&:focus': {
303
+ backgroundColor: '$neutral800',
304
+ },
305
+ '&:active': {
306
+ backgroundColor: '$neutral500',
307
+ borderColor: '$neutral400',
308
+ },
309
+ '&:disabled': {
310
+ backgroundColor: '$neutral50',
311
+ borderColor: '$neutral200',
312
+ color: '$neutral400',
313
+ }
314
+ },
315
+ [`& ${ButtonItemStyled}.active`]: {
316
+ backgroundColor: '$neutral800',
317
+ '&:hover': { backgroundColor: '$neutral800' },
318
+ '&:focus': { backgroundColor: '$neutral800' },
319
+ '&:active': { backgroundColor: '$neutral800' },
320
+ },
321
+ }
322
+ },
323
+ {
324
+ variant: 'contained',
325
+ color: 'purple',
326
+ css: {
327
+ [`& ${ButtonItemStyled}`]: {
328
+ backgroundColor: '$purple500',
329
+ color: '$grey50',
330
+ '&:hover': {
331
+ backgroundColor: '$purple600',
332
+ borderColor: '$purple700',
333
+ },
334
+ '&:focus': {
335
+ backgroundColor: '$purple700',
336
+ },
337
+ '&:active': {
338
+ borderColor: '$purple300',
339
+ backgroundColor: '$purple500',
340
+ },
341
+ '&:disabled': {
342
+ borderColor: '$purple200',
343
+ backgroundColor: '$purple200',
344
+ color: '$neutral400',
345
+ }
346
+ },
347
+ [`& ${ButtonItemStyled}.active`]: {
348
+ backgroundColor: '$purple700',
349
+ '&:hover': { backgroundColor: '$purple700' },
350
+ '&:focus': { backgroundColor: '$purple700' },
351
+ '&:active': { backgroundColor: '$purple700' },
352
+ },
353
+ }
354
+ },
355
+ // outlined
356
+ {
357
+ variant: 'outlined',
358
+ color: 'brand',
359
+ css: {
360
+ [`& ${ButtonItemStyled}`]: {
361
+ color: '$brand500',
362
+ borderColor: '$brand300',
363
+ backgroundColor: '$grey50',
364
+ '&:hover': {
365
+ borderColor: '$brand400',
366
+ backgroundColor: '$brand50',
367
+ },
368
+ '&:focus': {
369
+ borderColor: '$brand400',
370
+ backgroundColor: '$brand50',
371
+ },
372
+ '&:active': {
373
+ borderColor: '$brand300',
374
+ backgroundColor: '$grey50',
375
+ },
376
+ '&:disabled': {
377
+ borderColor: '$brand200',
378
+ backgroundColor: '$neutral200',
379
+ color: '$neutral400',
380
+ }
381
+ },
382
+ [`& ${ButtonItemStyled}.active`]: {
383
+ color: '$brand700',
384
+ borderColor: '$brand600',
385
+ backgroundColor: '$brand50',
386
+ '&:hover': { backgroundColor: '$brand50', borderColor: '$brand600' },
387
+ '&:focus': { backgroundColor: '$brand50', borderColor: '$brand600' },
388
+ '&:active': { backgroundColor: '$brand50', borderColor: '$brand600' },
389
+ },
390
+ }
391
+ },
392
+ {
393
+ variant: 'outlined',
394
+ color: 'neutral',
395
+ css: {
396
+ [`& ${ButtonItemStyled}`]: {
397
+ color: '$neutral600',
398
+ borderColor: '$neutral300',
399
+ backgroundColor: '$grey50',
400
+ '&:hover': {
401
+ borderColor: '$neutral400',
402
+ backgroundColor: '$grey100',
403
+ },
404
+ '&:focus': {
405
+ borderColor: '$neutral400',
406
+ backgroundColor: '$grey100',
407
+ },
408
+ '&:active': {
409
+ borderColor: '$neutral300',
410
+ backgroundColor: '$grey50',
411
+ },
412
+ '&:disabled': {
413
+ borderColor: '$neutral200',
414
+ backgroundColor: '$neutral200',
415
+ color: '$neutral400',
416
+ }
417
+ },
418
+ [`& ${ButtonItemStyled}.active`]: {
419
+ color: '$neutral800',
420
+ borderColor: '$neutral600',
421
+ backgroundColor: '$grey100',
422
+ '&:hover': { backgroundColor: '$grey100', borderColor: '$neutral600' },
423
+ '&:focus': { backgroundColor: '$grey100', borderColor: '$neutral600' },
424
+ '&:active': { backgroundColor: '$grey100', borderColor: '$neutral600' },
425
+ },
426
+ }
427
+ },
428
+ {
429
+ variant: 'outlined',
430
+ color: 'purple',
431
+ css: {
432
+ [`& ${ButtonItemStyled}`]: {
433
+ color: '$purple500',
434
+ borderColor: '$purple300',
435
+ backgroundColor: '$grey50',
436
+ '&:hover': {
437
+ borderColor: '$purple400',
438
+ backgroundColor: '$purple50',
439
+ },
440
+ '&:focus': {
441
+ borderColor: '$purple400',
442
+ backgroundColor: '$purple50',
443
+ },
444
+ '&:active': {
445
+ borderColor: '$purple300',
446
+ backgroundColor: '$grey50',
447
+ },
448
+ '&:disabled': {
449
+ borderColor: '$purple200',
450
+ backgroundColor: '$neutral200',
451
+ color: '$neutral400',
452
+ }
453
+ },
454
+ [`& ${ButtonItemStyled}.active`]: {
455
+ color: '$purple700',
456
+ borderColor: '$purple600',
457
+ backgroundColor: '$purple50',
458
+ '&:hover': { backgroundColor: '$purple50', borderColor: '$purple600' },
459
+ '&:focus': { backgroundColor: '$purple50', borderColor: '$purple600' },
460
+ '&:active': { backgroundColor: '$purple50', borderColor: '$purple600' },
461
+ },
462
+ }
463
+ },
464
+
465
+ ],
466
+
467
+ defaultVariants: {
468
+ variant: 'contained',
469
+ typography: 'buttonMedium',
470
+ fontWeight: 'medium',
471
+ color: 'brand',
472
+ }
473
+ });
474
+
475
+ export interface ButtonItemProps extends ComponentProps<typeof ButtonItemStyled> { }
476
+
477
+ export type ButtonGroupProps = ComponentProps<typeof ButtonGroupStyled>
478
+
479
+ export function ButtonItem({ children, active, ...props }: ButtonItemProps) {
480
+ return <ButtonItemStyled className={active ? 'active' : ''} {...props}>{children}</ButtonItemStyled>;
481
+ }
482
+
483
+ export function ButtonGroup({ children, ...props }: ButtonGroupProps) {
484
+ return <ButtonGroupStyled {...props}>{children}</ButtonGroupStyled>;
478
485
  }