@lets-events/react 10.0.0 → 10.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 (47) hide show
  1. package/.eslintrc.json +2 -2
  2. package/.turbo/turbo-build.log +20 -18
  3. package/CHANGELOG.md +12 -0
  4. package/dist/index.d.mts +426 -1
  5. package/dist/index.d.ts +426 -1
  6. package/dist/index.js +289 -10
  7. package/dist/index.mjs +280 -9
  8. package/package.json +3 -1
  9. package/src/components/Alert.tsx +303 -303
  10. package/src/components/Avatar.tsx +55 -55
  11. package/src/components/Badge.tsx +128 -128
  12. package/src/components/Box.tsx +3 -3
  13. package/src/components/Button/index.tsx +12 -12
  14. package/src/components/Button/styledComponents.ts +250 -250
  15. package/src/components/ButtonGroup.tsx +484 -484
  16. package/src/components/Calendar/index.tsx +136 -136
  17. package/src/components/Calendar/styledComponents.ts +208 -208
  18. package/src/components/Card.tsx +69 -69
  19. package/src/components/CheckboxGroup.tsx +214 -214
  20. package/src/components/Container.tsx +39 -39
  21. package/src/components/Dropdown.tsx +167 -167
  22. package/src/components/Filter.tsx +164 -164
  23. package/src/components/Flex.tsx +118 -118
  24. package/src/components/Grid.tsx +137 -137
  25. package/src/components/Icon.tsx +47 -47
  26. package/src/components/Modal.tsx +90 -88
  27. package/src/components/RadioGroup.tsx +210 -210
  28. package/src/components/Section.tsx +33 -33
  29. package/src/components/Step.tsx +164 -164
  30. package/src/components/Switch.tsx +108 -108
  31. package/src/components/Text.tsx +30 -30
  32. package/src/components/TextField.tsx +299 -299
  33. package/src/components/TextareaField.tsx +101 -101
  34. package/src/components/TimePicker.tsx +239 -239
  35. package/src/components/Toast/components/ToastItem.tsx +41 -0
  36. package/src/components/Toast/components/ToastProvider.tsx +63 -0
  37. package/src/components/Toast/hooks/useToast.ts +12 -0
  38. package/src/components/Toast/index.tsx +5 -0
  39. package/src/components/Toast/styles/index.ts +135 -0
  40. package/src/components/Toast/types/index.ts +46 -0
  41. package/src/components/Tooltip/index.tsx +67 -0
  42. package/src/components/Tooltip/styles.ts +78 -0
  43. package/src/hooks/useOnClickOutside.tsx +20 -20
  44. package/src/index.tsx +33 -31
  45. package/src/styles/index.ts +38 -38
  46. package/src/types/typographyValues.ts +178 -178
  47. package/tsconfig.json +3 -3
package/src/components/Button/styledComponents.ts CHANGED
@@ -1,250 +1,250 @@
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
- $$buttonColor: 'inherit',
8
- $$buttonBgColor: '$colors$grey50',
9
- $$buttonBorderColor: 'inherit',
10
- $$buttonOutlinedColor: 'inherit',
11
-
12
- fontFamily: '$default',
13
- letterSpacing: 0,
14
- border: 0,
15
- transition: 'all 300ms ease-out',
16
- cursor: 'pointer',
17
- borderRadius: '$xs',
18
- boxShadow: '0px 4px 4px 0px rgba(35, 53, 67, 0.08), 0px 2px 4px 0px rgba(35, 53, 67, 0.16)',
19
- display: 'flex',
20
- alignItems: 'center',
21
- justifyContent: 'center',
22
- gap: '$10',
23
- padding: '$6 $16',
24
- '&:disabled': {
25
- cursor: 'not-allowed',
26
- transition: 'none',
27
- },
28
- variants: {
29
- color: {
30
- brand: {
31
- $$buttonColor: '$colors$brand500',
32
- $$buttonBorderColor: '$colors$brand600',
33
- $$buttonOutlinedColor: '$$buttonColor',
34
- '&:hover': {
35
- $$buttonColor: '$colors$brand600',
36
- $$buttonBorderColor: '$colors$brand700',
37
- },
38
- '&:focus': {
39
- $$buttonColor: '$colors$brand400',
40
- $$buttonBorderColor: '$colors$brand300',
41
- $$buttonBgColor: '$colors$grey200',
42
- },
43
- '&:active': {
44
- $$buttonColor: '$colors$brand500',
45
- $$buttonBorderColor: '$colors$brand700',
46
- $$buttonBgColor: '$colors$grey200',
47
- },
48
- },
49
- purple: {
50
- $$buttonColor: '$colors$purple500',
51
- $$buttonBorderColor: '$colors$purple300',
52
- $$buttonOutlinedColor: '$$buttonColor',
53
- '&:hover': {
54
- $$buttonColor: '$colors$purple600',
55
- $$buttonBorderColor: '$colors$purple700',
56
- $$buttonOutlinedColor: '$colors$purple500',
57
- $$buttonBgColor: '$colors$purple50',
58
- },
59
- '&:focus': {
60
- $$buttonColor: '$colors$purple700',
61
- $$buttonOutlinedColor: '$colors$purple500',
62
- $$buttonBgColor: '$colors$purple200',
63
- $$buttonBorderColor: '$colors$purple400',
64
- },
65
- '&:active': {
66
- $$buttonColor: '$colors$purple500',
67
- $$buttonOutlinedColor: '$colors$purple500',
68
- $$buttonBgColor: '$colors$purple100',
69
- $$buttonBorderColor: '$colors$purple300',
70
- },
71
- },
72
- error: {
73
- $$buttonColor: '$colors$error600',
74
- $$buttonBorderColor: '$colors$error500',
75
- $$buttonOutlinedColor: ' $colors$error500',
76
- '&:hover': {
77
- $$buttonColor: '$colors$error600',
78
- $$buttonBorderColor: '$colors$error700',
79
- $$buttonBgColor: '$colors$error50'
80
- },
81
- '&:focus': {
82
- $$buttonColor: '$colors$error400',
83
- $$buttonBorderColor: '$colors$error300',
84
- $$buttonBgColor: '$colors$error200'
85
- },
86
- '&:active': {
87
- $$buttonColor: '$colors$error700',
88
- $$buttonBorderColor: '$colors$error700',
89
- $$buttonBgColor: '$colors$re1050'
90
- },
91
- },
92
- info: {
93
- $$buttonColor: '$colors$info500',
94
- $$buttonBorderColor: '$colors$info600',
95
- $$buttonOutlinedColor: '$$buttonColor',
96
- '&:hover': {
97
- $$buttonColor: '$colors$info600',
98
- $$buttonBorderColor: '$colors$info700',
99
- $$buttonBgColor: '$colors$info50'
100
- },
101
- '&:focus': {
102
- $$buttonColor: '$colors$info400',
103
- $$buttonBorderColor: '$colors$info600',
104
- $$buttonBgColor: '$colors$info200'
105
- },
106
- '&:active': {
107
- $$buttonColor: '$colors$info700',
108
- $$buttonBorderColor: '$colors$info700',
109
- $$buttonBgColor: '$colors$info100'
110
- },
111
- },
112
- success: {
113
- $$buttonColor: '$colors$success500',
114
- $$buttonBorderColor: '$colors$success600',
115
- $$buttonOutlinedColor: '$$buttonColor',
116
- '&:hover': {
117
- $$buttonColor: '$colors$success600',
118
- $$buttonBorderColor: '$colors$success700',
119
- $$buttonBgColor: '$colors$success50'
120
- },
121
- '&:focus': {
122
- $$buttonColor: '$colors$success400',
123
- $$buttonBorderColor: '$colors$success600',
124
- $$buttonBgColor: '$colors$success200'
125
- },
126
- '&:active': {
127
- $$buttonColor: '$colors$success700',
128
- $$buttonBorderColor: '$colors$success700',
129
- $$buttonBgColor: '$colors$success100'
130
- },
131
- },
132
- warning: {
133
- $$buttonColor: '$colors$warning500',
134
- $$buttonBorderColor: '$colors$warning600',
135
- $$buttonOutlinedColor: '$$buttonColor',
136
- '&:hover': {
137
- $$buttonColor: '$colors$warning600',
138
- $$buttonBorderColor: '$colors$warning700',
139
- $$buttonBgColor: '$colors$warning50'
140
- },
141
- '&:focus': {
142
- $$buttonColor: '$colors$warning400',
143
- $$buttonBorderColor: '$colors$warning600',
144
- $$buttonBgColor: '$colors$warning200'
145
-
146
- },
147
- '&:active': {
148
- $$buttonColor: '$colors$warning700',
149
- $$buttonBorderColor: '$colors$warning700',
150
- $$buttonBgColor: '$colors$warning100'
151
-
152
- },
153
- },
154
- neutral: {
155
- $$buttonColor: '$colors$neutral600',
156
- $$buttonBorderColor: '$colors$neutral300',
157
- $$buttonOutlinedColor: '$$buttonColor',
158
- '&:hover': {
159
- $$buttonColor: '$colors$neutral700',
160
- $$buttonBgColor: '$colors$neutral100',
161
- $$buttonBorderColor: '$colors$neutral300',
162
- },
163
- '&:focus': {
164
- $$buttonColor: '$colors$neutral800',
165
- $$buttonBgColor: '$colors$neutral300',
166
- $$buttonBorderColor: '$colors$neutral400',
167
- },
168
- '&:active': {
169
- $$buttonColor: '$colors$neutral500',
170
- $$buttonBgColor: '$colors$neutral300',
171
- $$buttonBorderColor: '$colors$neutral400',
172
- },
173
- },
174
- white: {
175
- $$buttonColor: '$colors$neutral50',
176
- $$buttonBorderColor: '$colors$neutral300',
177
- $$buttonOutlinedColor: '$colors$neutral50',
178
- '&:hover': {
179
- $$buttonColor: '$colors$neutral100',
180
- $$buttonBorderColor: '$colors$neutral300',
181
- $$buttonBgColor: '$colors$neutral100'
182
- },
183
- '&:focus': {
184
- $$buttonBorderColor: '$colors$neutral400',
185
- $$buttonColor: '$colors$neutral300',
186
- $$buttonBgColor: '$colors$neutral200'
187
- },
188
- '&:active': {
189
- $$buttonColor: '$colors$neutral400',
190
- $$buttonBorderColor: '$colors$neutral500',
191
- $$buttonBgColor: '$colors$neutral300'
192
- },
193
- },
194
- },
195
- variant: {
196
- text: {
197
- backgroundColor: 'transparent',
198
- boxShadow: 'none',
199
- padding: 0,
200
- border: 0,
201
- color: '$$buttonColor',
202
- },
203
- contained: {
204
- color: '$grey50',
205
- backgroundColor: '$$buttonColor',
206
- border: '1px solid $$buttonBorderColor',
207
- '&:disabled': {
208
- boxShadow: 'none',
209
- color: '$neutral400',
210
- backgroundColor: '$neutral200',
211
- $$buttonBorderColor: '$colors$neutral100'
212
- }
213
- },
214
- outlined: {
215
- color: '$$buttonOutlinedColor',
216
- border: '1px solid $$buttonOutlinedColor',
217
- backgroundColor: '$$buttonBgColor',
218
- '&:disabled': {
219
- boxShadow: 'none',
220
- borderColor: '$colors$neutral100',
221
- $$buttonColor: '$colors$neutral300'
222
- }
223
- }
224
- },
225
- typography: typographyButtonValues,
226
- fontWeight: {
227
- regular: { fontWeight: '$regular' },
228
- medium: { fontWeight: '$medium' },
229
- semibold: { fontWeight: '$semibold' },
230
- bold: { fontWeight: '$bold' },
231
- },
232
- outlinedBgColor: {
233
- neutral: {},
234
- transparent: {
235
- backgroundColor: 'transparent',
236
- },
237
- },
238
- radii: {
239
- 'full': {
240
- borderRadius: '$full',
241
- }
242
- },
243
- },
244
-
245
- defaultVariants: {
246
- variant: 'contained',
247
- typography: 'buttonMedium',
248
- color: 'brand',
249
- },
250
- })
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
+ $$buttonColor: 'inherit',
8
+ $$buttonBgColor: '$colors$grey50',
9
+ $$buttonBorderColor: 'inherit',
10
+ $$buttonOutlinedColor: 'inherit',
11
+
12
+ fontFamily: '$default',
13
+ letterSpacing: 0,
14
+ border: 0,
15
+ transition: 'all 300ms ease-out',
16
+ cursor: 'pointer',
17
+ borderRadius: '$xs',
18
+ boxShadow: '0px 4px 4px 0px rgba(35, 53, 67, 0.08), 0px 2px 4px 0px rgba(35, 53, 67, 0.16)',
19
+ display: 'flex',
20
+ alignItems: 'center',
21
+ justifyContent: 'center',
22
+ gap: '$10',
23
+ padding: '$6 $16',
24
+ '&:disabled': {
25
+ cursor: 'not-allowed',
26
+ transition: 'none',
27
+ },
28
+ variants: {
29
+ color: {
30
+ brand: {
31
+ $$buttonColor: '$colors$brand500',
32
+ $$buttonBorderColor: '$colors$brand600',
33
+ $$buttonOutlinedColor: '$$buttonColor',
34
+ '&:hover': {
35
+ $$buttonColor: '$colors$brand600',
36
+ $$buttonBorderColor: '$colors$brand700',
37
+ },
38
+ '&:focus': {
39
+ $$buttonColor: '$colors$brand400',
40
+ $$buttonBorderColor: '$colors$brand300',
41
+ $$buttonBgColor: '$colors$grey200',
42
+ },
43
+ '&:active': {
44
+ $$buttonColor: '$colors$brand500',
45
+ $$buttonBorderColor: '$colors$brand700',
46
+ $$buttonBgColor: '$colors$grey200',
47
+ },
48
+ },
49
+ purple: {
50
+ $$buttonColor: '$colors$purple500',
51
+ $$buttonBorderColor: '$colors$purple300',
52
+ $$buttonOutlinedColor: '$$buttonColor',
53
+ '&:hover': {
54
+ $$buttonColor: '$colors$purple600',
55
+ $$buttonBorderColor: '$colors$purple700',
56
+ $$buttonOutlinedColor: '$colors$purple500',
57
+ $$buttonBgColor: '$colors$purple50',
58
+ },
59
+ '&:focus': {
60
+ $$buttonColor: '$colors$purple700',
61
+ $$buttonOutlinedColor: '$colors$purple500',
62
+ $$buttonBgColor: '$colors$purple200',
63
+ $$buttonBorderColor: '$colors$purple400',
64
+ },
65
+ '&:active': {
66
+ $$buttonColor: '$colors$purple500',
67
+ $$buttonOutlinedColor: '$colors$purple500',
68
+ $$buttonBgColor: '$colors$purple100',
69
+ $$buttonBorderColor: '$colors$purple300',
70
+ },
71
+ },
72
+ error: {
73
+ $$buttonColor: '$colors$error600',
74
+ $$buttonBorderColor: '$colors$error500',
75
+ $$buttonOutlinedColor: ' $colors$error500',
76
+ '&:hover': {
77
+ $$buttonColor: '$colors$error600',
78
+ $$buttonBorderColor: '$colors$error700',
79
+ $$buttonBgColor: '$colors$error50'
80
+ },
81
+ '&:focus': {
82
+ $$buttonColor: '$colors$error400',
83
+ $$buttonBorderColor: '$colors$error300',
84
+ $$buttonBgColor: '$colors$error200'
85
+ },
86
+ '&:active': {
87
+ $$buttonColor: '$colors$error700',
88
+ $$buttonBorderColor: '$colors$error700',
89
+ $$buttonBgColor: '$colors$re1050'
90
+ },
91
+ },
92
+ info: {
93
+ $$buttonColor: '$colors$info500',
94
+ $$buttonBorderColor: '$colors$info600',
95
+ $$buttonOutlinedColor: '$$buttonColor',
96
+ '&:hover': {
97
+ $$buttonColor: '$colors$info600',
98
+ $$buttonBorderColor: '$colors$info700',
99
+ $$buttonBgColor: '$colors$info50'
100
+ },
101
+ '&:focus': {
102
+ $$buttonColor: '$colors$info400',
103
+ $$buttonBorderColor: '$colors$info600',
104
+ $$buttonBgColor: '$colors$info200'
105
+ },
106
+ '&:active': {
107
+ $$buttonColor: '$colors$info700',
108
+ $$buttonBorderColor: '$colors$info700',
109
+ $$buttonBgColor: '$colors$info100'
110
+ },
111
+ },
112
+ success: {
113
+ $$buttonColor: '$colors$success500',
114
+ $$buttonBorderColor: '$colors$success600',
115
+ $$buttonOutlinedColor: '$$buttonColor',
116
+ '&:hover': {
117
+ $$buttonColor: '$colors$success600',
118
+ $$buttonBorderColor: '$colors$success700',
119
+ $$buttonBgColor: '$colors$success50'
120
+ },
121
+ '&:focus': {
122
+ $$buttonColor: '$colors$success400',
123
+ $$buttonBorderColor: '$colors$success600',
124
+ $$buttonBgColor: '$colors$success200'
125
+ },
126
+ '&:active': {
127
+ $$buttonColor: '$colors$success700',
128
+ $$buttonBorderColor: '$colors$success700',
129
+ $$buttonBgColor: '$colors$success100'
130
+ },
131
+ },
132
+ warning: {
133
+ $$buttonColor: '$colors$warning500',
134
+ $$buttonBorderColor: '$colors$warning600',
135
+ $$buttonOutlinedColor: '$$buttonColor',
136
+ '&:hover': {
137
+ $$buttonColor: '$colors$warning600',
138
+ $$buttonBorderColor: '$colors$warning700',
139
+ $$buttonBgColor: '$colors$warning50'
140
+ },
141
+ '&:focus': {
142
+ $$buttonColor: '$colors$warning400',
143
+ $$buttonBorderColor: '$colors$warning600',
144
+ $$buttonBgColor: '$colors$warning200'
145
+
146
+ },
147
+ '&:active': {
148
+ $$buttonColor: '$colors$warning700',
149
+ $$buttonBorderColor: '$colors$warning700',
150
+ $$buttonBgColor: '$colors$warning100'
151
+
152
+ },
153
+ },
154
+ neutral: {
155
+ $$buttonColor: '$colors$neutral600',
156
+ $$buttonBorderColor: '$colors$neutral300',
157
+ $$buttonOutlinedColor: '$$buttonColor',
158
+ '&:hover': {
159
+ $$buttonColor: '$colors$neutral700',
160
+ $$buttonBgColor: '$colors$neutral100',
161
+ $$buttonBorderColor: '$colors$neutral300',
162
+ },
163
+ '&:focus': {
164
+ $$buttonColor: '$colors$neutral800',
165
+ $$buttonBgColor: '$colors$neutral300',
166
+ $$buttonBorderColor: '$colors$neutral400',
167
+ },
168
+ '&:active': {
169
+ $$buttonColor: '$colors$neutral500',
170
+ $$buttonBgColor: '$colors$neutral300',
171
+ $$buttonBorderColor: '$colors$neutral400',
172
+ },
173
+ },
174
+ white: {
175
+ $$buttonColor: '$colors$neutral50',
176
+ $$buttonBorderColor: '$colors$neutral300',
177
+ $$buttonOutlinedColor: '$colors$neutral50',
178
+ '&:hover': {
179
+ $$buttonColor: '$colors$neutral100',
180
+ $$buttonBorderColor: '$colors$neutral300',
181
+ $$buttonBgColor: '$colors$neutral100'
182
+ },
183
+ '&:focus': {
184
+ $$buttonBorderColor: '$colors$neutral400',
185
+ $$buttonColor: '$colors$neutral300',
186
+ $$buttonBgColor: '$colors$neutral200'
187
+ },
188
+ '&:active': {
189
+ $$buttonColor: '$colors$neutral400',
190
+ $$buttonBorderColor: '$colors$neutral500',
191
+ $$buttonBgColor: '$colors$neutral300'
192
+ },
193
+ },
194
+ },
195
+ variant: {
196
+ text: {
197
+ backgroundColor: 'transparent',
198
+ boxShadow: 'none',
199
+ padding: 0,
200
+ border: 0,
201
+ color: '$$buttonColor',
202
+ },
203
+ contained: {
204
+ color: '$grey50',
205
+ backgroundColor: '$$buttonColor',
206
+ border: '1px solid $$buttonBorderColor',
207
+ '&:disabled': {
208
+ boxShadow: 'none',
209
+ color: '$neutral400',
210
+ backgroundColor: '$neutral200',
211
+ $$buttonBorderColor: '$colors$neutral100'
212
+ }
213
+ },
214
+ outlined: {
215
+ color: '$$buttonOutlinedColor',
216
+ border: '1px solid $$buttonOutlinedColor',
217
+ backgroundColor: '$$buttonBgColor',
218
+ '&:disabled': {
219
+ boxShadow: 'none',
220
+ borderColor: '$colors$neutral100',
221
+ $$buttonColor: '$colors$neutral300'
222
+ }
223
+ }
224
+ },
225
+ typography: typographyButtonValues,
226
+ fontWeight: {
227
+ regular: { fontWeight: '$regular' },
228
+ medium: { fontWeight: '$medium' },
229
+ semibold: { fontWeight: '$semibold' },
230
+ bold: { fontWeight: '$bold' },
231
+ },
232
+ outlinedBgColor: {
233
+ neutral: {},
234
+ transparent: {
235
+ backgroundColor: 'transparent',
236
+ },
237
+ },
238
+ radii: {
239
+ 'full': {
240
+ borderRadius: '$full',
241
+ }
242
+ },
243
+ },
244
+
245
+ defaultVariants: {
246
+ variant: 'contained',
247
+ typography: 'buttonMedium',
248
+ color: 'brand',
249
+ },
250
+ })