@lets-events/react 5.0.0 → 6.1.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 (37) hide show
  1. package/.eslintrc.json +2 -2
  2. package/.turbo/turbo-build.log +20 -18
  3. package/CHANGELOG.md +14 -1
  4. package/dist/index.d.mts +1916 -12
  5. package/dist/index.d.ts +1916 -12
  6. package/dist/index.js +5129 -348
  7. package/dist/index.mjs +5083 -307
  8. package/package.json +3 -2
  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/index.tsx +13 -0
  14. package/src/components/Button/styledComponents.ts +359 -0
  15. package/src/components/ButtonGroup.tsx +484 -477
  16. package/src/components/Calendar/index.tsx +122 -0
  17. package/src/components/Calendar/styledComponents.ts +195 -0
  18. package/src/components/CheckboxGroup.tsx +214 -208
  19. package/src/components/Container.tsx +39 -39
  20. package/src/components/Dropdown.tsx +167 -109
  21. package/src/components/Filter.tsx +164 -95
  22. package/src/components/Flex.tsx +117 -117
  23. package/src/components/Grid.tsx +137 -137
  24. package/src/components/Icon.tsx +47 -47
  25. package/src/components/Modal.tsx +108 -108
  26. package/src/components/RadioGroup.tsx +210 -203
  27. package/src/components/Section.tsx +33 -33
  28. package/src/components/Step.tsx +147 -147
  29. package/src/components/Switch.tsx +108 -108
  30. package/src/components/Text.tsx +31 -31
  31. package/src/components/TextField.tsx +261 -193
  32. package/src/components/TimePicker.tsx +125 -0
  33. package/src/index.tsx +29 -27
  34. package/src/styles/index.ts +38 -38
  35. package/src/types/typographyValues.ts +179 -0
  36. package/tsconfig.json +3 -3
  37. package/src/components/Button.tsx +0 -343
package/src/components/Badge.tsx CHANGED
@@ -1,121 +1,129 @@
1
- import React from 'react'
2
- import { ComponentProps, ElementType } from 'react'
3
- import { styled } from '../styles'
4
- import { Badge as BadgeRadix } from '@radix-ui/themes'
5
- export const BadgeStyled = styled(BadgeRadix, {
6
- fontFamily: '$default',
7
- borderRadius: '$sm',
8
- verticalAlign: 'middle',
9
- 'svg': {
10
- marginRight: '10px',
11
- },
12
- variants: {
13
- color: {
14
- primary: {
15
- backgroundColor: '$brand100',
16
- color: '$dark700',
17
- },
18
- dark: {
19
- backgroundColor: '$dark700',
20
- color: '$grey50',
21
- },
22
- light: {
23
- backgroundColor: '$neutral200',
24
- color: '$dark700',
25
- },
26
- red: {
27
- backgroundColor: '$red100',
28
- color: '$dark700',
29
- },
30
- green: {
31
- backgroundColor: '$green100',
32
- color: '$dark700',
33
- },
34
- yellow: {
35
- backgroundColor: '$yellow100',
36
- color: '$dark700',
37
- },
38
- orange: {
39
- backgroundColor: '$orange100',
40
- color: '$dark700',
41
- },
42
- blue: {
43
- backgroundColor: '$blue100',
44
- color: '$dark700',
45
- },
46
- pink: {
47
- backgroundColor: '$pink100',
48
- color: '$dark700',
49
- },
50
- purple: {
51
- backgroundColor: '$purple100',
52
- color: '$dark700',
53
- },
54
- grey: {
55
- backgroundColor: '$grey200',
56
- color: '$dark700',
57
- },
58
- disable: {
59
- backgroundColor: '$neutral200',
60
- color: '$grey500',
61
- }
62
-
63
-
64
- },
65
- size: {
66
- xs: {
67
- padding: '$4 $6',
68
- fontSize: '$10',
69
- borderRadius: '$2xs',
70
- lineHeight: '$smaller',
71
- },
72
- sm: {
73
- padding: '$4 $8',
74
- fontSize: '$12',
75
- borderRadius: '$xs',
76
- lineHeight: '$smaller',
77
- },
78
- md: {
79
- padding: '$8 $10',
80
- fontSize: '$14',
81
- borderRadius: '$sm',
82
- lineHeight: '$smaller',
83
- },
84
- xl: {
85
- padding: '$12 $12',
86
- fontSize: '$16',
87
- borderRadius: '$sm',
88
- lineHeight: '$smaller',
89
- },
90
- },
91
- radii: {
92
- 'full': {
93
- borderRadius: '$full',
94
- },
95
- },
96
- },
97
-
98
- defaultVariants: {
99
- size: 'md',
100
- color: 'primary',
101
- },
102
- })
103
-
104
- export type BadgeProps = ComponentProps<typeof BadgeStyled> & {
105
- as?: ElementType
106
- icon?: boolean
107
- size: 'md',
108
- children: React.ReactNode
109
- }
110
- export function Badge({ asChild, children, ...props }: BadgeProps) {
111
- return (
112
- <BadgeStyled {...props}>
113
- {React.Children.map(children, (child) => {
114
- if (React.isValidElement(child)) {
115
- return React.cloneElement(child, { size: props.size } as any)
116
- }
117
- return child
118
- })}
119
- </BadgeStyled>
120
- )
121
- }
1
+ import React from 'react'
2
+ import { ComponentProps, ElementType } from 'react'
3
+ import { styled } from '../styles'
4
+ import { Badge as BadgeRadix } from '@radix-ui/themes'
5
+ import { fontWeights } from '@lets-events/tokens'
6
+ export const BadgeStyled = styled(BadgeRadix, {
7
+ fontFamily: '$default',
8
+ borderRadius: '$sm',
9
+ verticalAlign: 'middle',
10
+ 'svg': {
11
+ marginRight: '10px',
12
+ },
13
+ variants: {
14
+ color: {
15
+ primary: {
16
+ backgroundColor: '$brand100',
17
+ color: '$dark700',
18
+ },
19
+ dark: {
20
+ backgroundColor: '$dark700',
21
+ color: '$grey50',
22
+ },
23
+ light: {
24
+ backgroundColor: '$neutral200',
25
+ color: '$dark700',
26
+ },
27
+ red: {
28
+ backgroundColor: '$red100',
29
+ color: '$dark700',
30
+ },
31
+ green: {
32
+ backgroundColor: '$green100',
33
+ color: '$dark700',
34
+ },
35
+ yellow: {
36
+ backgroundColor: '$yellow100',
37
+ color: '$dark700',
38
+ },
39
+ orange: {
40
+ backgroundColor: '$orange100',
41
+ color: '$dark700',
42
+ },
43
+ blue: {
44
+ backgroundColor: '$blue100',
45
+ color: '$dark700',
46
+ },
47
+ pink: {
48
+ backgroundColor: '$pink100',
49
+ color: '$dark700',
50
+ },
51
+ purple: {
52
+ backgroundColor: '$purple100',
53
+ color: '$dark700',
54
+ },
55
+ grey: {
56
+ backgroundColor: '$grey200',
57
+ color: '$dark700',
58
+ },
59
+ disable: {
60
+ backgroundColor: '$neutral200',
61
+ color: '$grey500',
62
+ }
63
+
64
+
65
+ },
66
+ size: {
67
+ xs: {
68
+ padding: '$4 $6',
69
+ fontSize: '$badgeExtraSmall',
70
+ borderRadius: '$2xs',
71
+ lineHeight: '$bagdeExtraSmall',
72
+ },
73
+ sm: {
74
+ padding: '$4 $8',
75
+ fontSize: '$badgeSmall',
76
+ borderRadius: '$xs',
77
+ lineHeight: '$badgeSmall',
78
+ },
79
+ md: {
80
+ padding: '$8 $10',
81
+ fontSize: '$badgeMedium',
82
+ borderRadius: '$sm',
83
+ lineHeight: '$badgeMedium',
84
+ },
85
+ xl: {
86
+ padding: '$12 $12',
87
+ fontSize: '$badgeLarge',
88
+ borderRadius: '$sm',
89
+ lineHeight: '$badgeLarge',
90
+ },
91
+ },
92
+ fontWeight: {
93
+ regular: { fontWeight: '$regular' },
94
+ medium: { fontWeight: '$medium' },
95
+ semibold: { fontWeight: '$semibold' },
96
+ bold: { fontWeight: '$bold' },
97
+ },
98
+ radii: {
99
+ 'full': {
100
+ borderRadius: '$full',
101
+ },
102
+ },
103
+ },
104
+
105
+ defaultVariants: {
106
+ size: 'md',
107
+ color: 'primary',
108
+ fontWeight: 'regular',
109
+ },
110
+ })
111
+
112
+ export type BadgeProps = ComponentProps<typeof BadgeStyled> & {
113
+ as?: ElementType
114
+ icon?: boolean
115
+ size: 'md',
116
+ children: React.ReactNode
117
+ }
118
+ export function Badge({ asChild, children, ...props }: BadgeProps) {
119
+ return (
120
+ <BadgeStyled {...props}>
121
+ {React.Children.map(children, (child) => {
122
+ if (React.isValidElement(child)) {
123
+ return React.cloneElement(child, { size: props.size } as any)
124
+ }
125
+ return child
126
+ })}
127
+ </BadgeStyled>
128
+ )
129
+ }
package/src/components/Box.tsx CHANGED
@@ -1,3 +1,3 @@
1
- import { Box as BoxRadix } from "@radix-ui/themes";
2
- export const Box = BoxRadix
3
-
1
+ import { Box as BoxRadix } from "@radix-ui/themes";
2
+ export const Box = BoxRadix
3
+
package/src/components/Button/index.tsx ADDED
@@ -0,0 +1,13 @@
1
+ import { ComponentProps } from 'react'
2
+ import { ButtonStyled } from './styledComponents'
3
+ import { Button as ButtonRadix } from '@radix-ui/themes'
4
+
5
+
6
+ export interface ButtonProps extends ComponentProps<typeof ButtonStyled> {
7
+ asChild?: boolean,
8
+ }
9
+
10
+ export function Button({ asChild, ...props }: ButtonProps) {
11
+ const Component = asChild ? ButtonRadix : 'button'
12
+ return <ButtonStyled as={Component} {...props} />
13
+ }
package/src/components/Button/styledComponents.ts ADDED
@@ -0,0 +1,359 @@
1
+ import { Button as ButtonRadix } from '@radix-ui/themes'
2
+ import { typographyButtonValues } from '../../types/typographyValues'
3
+
4
+ import { styled } from "../../styles"
5
+
6
+ export const ButtonStyled = styled(ButtonRadix, {
7
+ fontFamily: '$default',
8
+ letterSpacing: 0,
9
+ border: 0,
10
+ transition: 'all 300ms ease-out',
11
+ cursor: 'pointer',
12
+ borderRadius: '$xs',
13
+ boxShadow: '0px 4px 4px 0px rgba(35, 53, 67, 0.08), 0px 2px 4px 0px rgba(35, 53, 67, 0.16)',
14
+ display: 'flex',
15
+ alignItems: 'center',
16
+ justifyContent: 'center',
17
+ gap: '$10',
18
+ padding: '$6 $16',
19
+ '&:disabled': {
20
+ cursor: 'not-allowed',
21
+ transition: 'none',
22
+ },
23
+ variants: {
24
+ color: {
25
+ brand: {},
26
+ neutral: {},
27
+ purple: {},
28
+ },
29
+ variant: {
30
+ text: {
31
+ backgroundColor: 'transparent',
32
+ boxShadow: 'none',
33
+ padding: 0,
34
+ border: 0,
35
+ },
36
+ contained: {
37
+ '&:hover': {
38
+ borderWidth: '1px',
39
+ borderStyle: 'solid',
40
+ },
41
+
42
+ '&:active': {
43
+ borderWidth: '2px',
44
+ },
45
+ '&:disabled': {
46
+ boxShadow: 'none',
47
+ }
48
+ },
49
+ outlined: {
50
+ borderWidth: '1px',
51
+ borderStyle: 'solid',
52
+ '&:disabled': {
53
+ color: '$neutral400',
54
+ boxShadow: 'none',
55
+ }
56
+ }
57
+ },
58
+ typography: typographyButtonValues,
59
+ fontWeight: {
60
+ regular: { fontWeight: '$regular' },
61
+ medium: { fontWeight: '$medium' },
62
+ semibold: { fontWeight: '$semibold' },
63
+ bold: { fontWeight: '$bold' },
64
+ },
65
+ outlinedBgColor: {
66
+ neutral: {},
67
+ transparent: {},
68
+ },
69
+ radii: {
70
+ 'full': {
71
+ borderRadius: '$full',
72
+ }
73
+ },
74
+ },
75
+
76
+ defaultVariants: {
77
+ variant: 'contained',
78
+ typography: 'buttonMedium',
79
+ color: 'brand',
80
+ },
81
+
82
+ compoundVariants: [
83
+ {
84
+ variant: 'text',
85
+ color: 'brand',
86
+ css: {
87
+ color: '$brand500',
88
+ '&:hover': { color: '$brand600' },
89
+ '&:focus': { color: '$brand700' },
90
+ '&:active': { color: '$brand500' },
91
+ '&:disabled': { color: '$dark400' },
92
+ }
93
+ },
94
+ {
95
+ variant: 'text',
96
+ color: 'neutral',
97
+ css: {
98
+ color: '$neutral600',
99
+ '&:hover': { color: '$neutral700' },
100
+ '&:focus': { color: '$neutral800' },
101
+ '&:active': { color: '$neutral500' },
102
+ '&:disabled': { color: '$dark400' },
103
+ }
104
+ },
105
+ {
106
+ variant: 'text',
107
+ color: 'purple',
108
+ css: {
109
+ color: '$purple500',
110
+ '&:hover': { color: '$purple600' },
111
+ '&:focus': { color: '$purple700' },
112
+ '&:active': { color: '$purple500' },
113
+ '&:disabled': { color: '$dark400' },
114
+ }
115
+ },
116
+ {
117
+ variant: 'text',
118
+ color: 'green',
119
+ css: {
120
+ color: '$green500',
121
+ '&:hover': { color: '$green600' },
122
+ '&:focus': { color: '$green700' },
123
+ '&:active': { color: '$green500' },
124
+ '&:disabled': { color: '$dark400' },
125
+ }
126
+ },
127
+ {
128
+ variant: 'text',
129
+ color: 'blue',
130
+ css: {
131
+ color: '$blue500',
132
+ '&:hover': { color: '$blue600' },
133
+ '&:focus': { color: '$blue700' },
134
+ '&:active': { color: '$blue500' },
135
+ '&:disabled': { color: '$dark400' },
136
+ }
137
+ },
138
+ {
139
+ variant: 'text',
140
+ color: 'red',
141
+ css: {
142
+ color: '$red500',
143
+ '&:hover': { color: '$red600' },
144
+ '&:focus': { color: '$red700' },
145
+ '&:active': { color: '$red500' },
146
+ '&:disabled': { color: '$dark400' },
147
+ }
148
+ },
149
+
150
+ // contained
151
+ {
152
+ variant: 'contained',
153
+ color: 'brand',
154
+ css: {
155
+ color: '$grey50',
156
+ backgroundColor: '$brand500',
157
+ borderWidth: '2px',
158
+ borderStyle: 'solid',
159
+ borderColor: 'transparent',
160
+ '&:hover': {
161
+ borderColor: '$brand700',
162
+ backgroundColor: '$blue600',
163
+ },
164
+ '&:focus': {
165
+ backgroundColor: '$blue700',
166
+ },
167
+ '&:active': {
168
+ borderColor: '$brand300',
169
+ backgroundColor: '$blue500',
170
+ },
171
+ '&:disabled': {
172
+ borderColor: '$brand50',
173
+ backgroundColor: '$brand50',
174
+ color: '$neutral400',
175
+ }
176
+ }
177
+ },
178
+ {
179
+ variant: 'contained',
180
+ color: 'neutral',
181
+ css: {
182
+ backgroundColor: '$neutral600',
183
+ color: '$grey50',
184
+ '&:hover': {
185
+ backgroundColor: '$neutral700',
186
+ borderColor: '$neutral800',
187
+ },
188
+ '&:focus': {
189
+ backgroundColor: '$neutral800',
190
+ },
191
+ '&:active': {
192
+ backgroundColor: '$neutral500',
193
+ borderColor: '$neutral400',
194
+ },
195
+ '&:disabled': {
196
+ backgroundColor: '$neutral50',
197
+ borderColor: '$neutral200',
198
+ color: '$neutral400',
199
+ }
200
+ }
201
+ },
202
+ {
203
+ variant: 'contained',
204
+ color: 'purple',
205
+ css: {
206
+ backgroundColor: '$purple500',
207
+ color: '$grey50',
208
+ '&:hover': {
209
+ backgroundColor: '$purple600',
210
+ borderColor: '$purple700',
211
+ },
212
+ '&:focus': {
213
+ backgroundColor: '$purple700',
214
+ },
215
+ '&:active': {
216
+ borderColor: '$purple300',
217
+ backgroundColor: '$purple500',
218
+ },
219
+ '&:disabled': {
220
+ borderColor: '$purple200',
221
+ backgroundColor: '$purple200',
222
+ color: '$neutral400',
223
+ }
224
+ }
225
+ },
226
+
227
+
228
+
229
+ // outlined
230
+ {
231
+ variant: 'outlined',
232
+ color: 'brand',
233
+ outlinedBgColor: 'neutral',
234
+ css: {
235
+ color: '$brand500',
236
+ border: '1px solid $brand300',
237
+ backgroundColor: '$grey50',
238
+ '&:hover': {
239
+ borderColor: '$brand400',
240
+ backgroundColor: '$brand50',
241
+ },
242
+ '&:focus': {
243
+ borderColor: '$brand400',
244
+ backgroundColor: '$brand50',
245
+ },
246
+ '&:disabled': {
247
+ borderColor: '$brand200',
248
+ backgroundColor: '$neutral200',
249
+ }
250
+ }
251
+ },
252
+ {
253
+ variant: 'outlined',
254
+ color: 'neutral',
255
+ outlinedBgColor: 'neutral',
256
+ css: {
257
+ color: '$neutral600',
258
+ border: '1px solid $neutral300',
259
+ backgroundColor: '$grey50',
260
+ '&:hover': {
261
+ borderColor: '$neutral400',
262
+ backgroundColor: '$grey100',
263
+ },
264
+ '&:focus': {
265
+ borderColor: '$neutral400',
266
+ backgroundColor: '$grey100',
267
+ },
268
+ '&:disabled': {
269
+ borderColor: '$neutral200',
270
+ backgroundColor: '$neutral200',
271
+ }
272
+ }
273
+ },
274
+ {
275
+ variant: 'outlined',
276
+ color: 'purple',
277
+ outlinedBgColor: 'neutral',
278
+ css: {
279
+ color: '$purple500',
280
+ backgroundColor: '$grey50',
281
+ border: '1px solid $purple300',
282
+ '&:hover': {
283
+ borderColor: '$purple400',
284
+ backgroundColor: '$purple50',
285
+ },
286
+ '&:focus': {
287
+ borderColor: '$purple400',
288
+ backgroundColor: '$purple50',
289
+ },
290
+ '&:disabled': {
291
+ borderColor: '$purple200',
292
+ backgroundColor: '$neutral200',
293
+ }
294
+ }
295
+ },
296
+ // outlined transparent
297
+ {
298
+ variant: 'outlined',
299
+ color: 'brand',
300
+ outlinedBgColor: 'transparent',
301
+ css: {
302
+ color: '$brand500',
303
+ border: '1px solid $brand300',
304
+ backgroundColor: 'transparent',
305
+ '&:hover': {
306
+ borderColor: '$brand400',
307
+ opacity: '0.8',
308
+ },
309
+ '&:focus': {
310
+ borderColor: '$brand400',
311
+ },
312
+ '&:disabled': {
313
+ borderColor: '$brand200',
314
+ }
315
+ }
316
+ },
317
+ {
318
+ variant: 'outlined',
319
+ color: 'neutral',
320
+ outlinedBgColor: 'transparent',
321
+ css: {
322
+ color: '$neutral600',
323
+ border: '1px solid $neutral300',
324
+ backgroundColor: 'transparent',
325
+ '&:hover': {
326
+ borderColor: '$neutral400',
327
+ opacity: '0.8',
328
+ },
329
+ '&:focus': {
330
+ borderColor: '$neutral400',
331
+ },
332
+ '&:disabled': {
333
+ borderColor: '$neutral200',
334
+ }
335
+ }
336
+ },
337
+ {
338
+ variant: 'outlined',
339
+ color: 'purple',
340
+ outlinedBgColor: 'transparent',
341
+ css: {
342
+ color: '$purple500',
343
+ backgroundColor: 'transparent',
344
+ border: '1px solid $purple300',
345
+ '&:hover': {
346
+ borderColor: '$purple400',
347
+ opacity: '0.8',
348
+ },
349
+ '&:focus': {
350
+ borderColor: '$purple400',
351
+ },
352
+ '&:disabled': {
353
+ borderColor: '$purple200',
354
+ }
355
+ }
356
+ },
357
+ ]
358
+ })
359
+