react-native-varia 0.2.3 → 0.2.4

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 (35) hide show
  1. package/bin/cli.js +24 -34
  2. package/lib/components/Accordion.tsx +113 -0
  3. package/lib/components/Button.tsx +10 -1
  4. package/lib/components/CircleProgress.tsx +30 -21
  5. package/lib/components/Divider.tsx +18 -15
  6. package/lib/components/Drawer.tsx +5 -48
  7. package/lib/components/Field.tsx +24 -39
  8. package/lib/components/GradientBackground.tsx +25 -7
  9. package/lib/components/GradientText.tsx +38 -11
  10. package/lib/components/IconWrapper.tsx +20 -14
  11. package/lib/components/Input.tsx +106 -25
  12. package/lib/components/NumberInput.tsx +54 -11
  13. package/lib/components/OldSlider.tsx +327 -0
  14. package/lib/components/RadioGroup.tsx +55 -17
  15. package/lib/components/ReText.tsx +1 -1
  16. package/lib/components/Select.tsx +58 -22
  17. package/lib/components/Slider.tsx +176 -115
  18. package/lib/components/Slideshow.tsx +65 -63
  19. package/lib/components/SlidingDrawer.tsx +20 -21
  20. package/lib/components/Spinner.tsx +6 -2
  21. package/lib/components/Toast.tsx +89 -0
  22. package/lib/components/context/Field.tsx +27 -0
  23. package/lib/theme/Button.recipe.tsx +11 -1
  24. package/lib/theme/CircleProgress.recipe.tsx +3 -3
  25. package/lib/theme/Field.recipe.tsx +17 -2
  26. package/lib/theme/Input.recipe.tsx +12 -3
  27. package/lib/theme/NumberInput.recipe.tsx +8 -3
  28. package/lib/theme/RadioGroup.recipe.tsx +7 -1
  29. package/lib/theme/Select.recipe.tsx +7 -7
  30. package/lib/theme/Slider.recipe.tsx +366 -22
  31. package/lib/theme/Slideshow.recipe.tsx +1 -1
  32. package/lib/theme/SlidingDrawer.recipe.tsx +58 -4
  33. package/lib/theme/Toast.recipe.tsx +71 -0
  34. package/package.json +1 -1
  35. package/lib/theme/Button.recipe-old.tsx +0 -67
package/lib/theme/NumberInput.recipe.tsx CHANGED
@@ -27,6 +27,7 @@ export const NumberInputStyles = StyleSheet.create(theme => ({
27
27
  md: {},
28
28
  lg: {},
29
29
  xl: {},
30
+ flex: {},
30
31
  },
31
32
  },
32
33
  }),
@@ -63,6 +64,9 @@ export const NumberInputStyles = StyleSheet.create(theme => ({
63
64
  minWidth: theme.sizes[12],
64
65
  height: theme.sizes[12],
65
66
  },
67
+ flex: {
68
+ padding: theme.sizes[0.5],
69
+ },
66
70
  },
67
71
  },
68
72
  }),
@@ -82,6 +86,7 @@ export const NumberInputStyles = StyleSheet.create(theme => ({
82
86
  md: {},
83
87
  lg: {},
84
88
  xl: {},
89
+ flex: {},
85
90
  },
86
91
  },
87
92
  compoundVariants: [
@@ -121,6 +126,7 @@ export const NumberInputStyles = StyleSheet.create(theme => ({
121
126
  md: {},
122
127
  lg: {},
123
128
  xl: {},
129
+ flex: {},
124
130
  },
125
131
  },
126
132
  compoundVariants: [
@@ -150,9 +156,7 @@ export const NumberInputStyles = StyleSheet.create(theme => ({
150
156
  variants: {
151
157
  distribution: {
152
158
  vertical: {},
153
- horizontal: {
154
- flex: 1,
155
- },
159
+ horizontal: {},
156
160
  },
157
161
  variant: {
158
162
  solid: {
@@ -185,6 +189,7 @@ export const NumberInputStyles = StyleSheet.create(theme => ({
185
189
  minHeight: theme.sizes[12],
186
190
  maxHeight: theme.sizes[12],
187
191
  },
192
+ flex: {},
188
193
  },
189
194
  },
190
195
  }),
package/lib/theme/RadioGroup.recipe.tsx CHANGED
@@ -30,11 +30,12 @@ export const RadioGroupStyles = StyleSheet.create(theme => ({
30
30
  lg: {
31
31
  gap: theme.sizes[4],
32
32
  },
33
+ nosize: {},
33
34
  },
34
35
  },
35
36
  }),
36
37
 
37
- item: (colorPalette: PalettesWithNestedKeys) => ({
38
+ item: (colorPalette: PalettesWithNestedKeys, pressed: boolean) => ({
38
39
  variants: {
39
40
  variant: {
40
41
  solid: {},
@@ -55,6 +56,9 @@ export const RadioGroupStyles = StyleSheet.create(theme => ({
55
56
  lg: {
56
57
  gap: theme.sizes[4],
57
58
  },
59
+ nosize: {
60
+ gap: theme.sizes[2],
61
+ },
58
62
  },
59
63
  },
60
64
  compoundVariants: [
@@ -93,6 +97,7 @@ export const RadioGroupStyles = StyleSheet.create(theme => ({
93
97
  sm: {width: theme.sizes[4], height: theme.sizes[4]},
94
98
  md: {width: theme.sizes[5], height: theme.sizes[5]},
95
99
  lg: {width: theme.sizes[6], height: theme.sizes[6]},
100
+ nosize: {width: theme.sizes[5], height: theme.sizes[5]},
96
101
  },
97
102
  checked: {
98
103
  true: {},
@@ -125,6 +130,7 @@ export const RadioGroupStyles = StyleSheet.create(theme => ({
125
130
  sm: {width: theme.sizes[2], height: theme.sizes[2]},
126
131
  md: {width: theme.sizes[3], height: theme.sizes[3]},
127
132
  lg: {width: theme.sizes['3.5'], height: theme.sizes['3.5']},
133
+ nosize: {width: theme.sizes[3], height: theme.sizes[3]},
128
134
  },
129
135
  checked: {
130
136
  true: {},
package/lib/theme/Select.recipe.tsx CHANGED
@@ -8,13 +8,14 @@ export const SelectDefaultVariants = {
8
8
  } as const
9
9
 
10
10
  export const SelectStyles = StyleSheet.create((theme, rt) => ({
11
- trigger: (colorPalette: PalettesWithNestedKeys) => ({
11
+ trigger: (colorPalette: PalettesWithNestedKeys, pressed: boolean) => ({
12
12
  variants: {
13
13
  variant: {
14
14
  outline: {
15
15
  borderColor: theme.colors.border.default,
16
16
  borderWidth: 1,
17
17
  borderRadius: theme.radii.sm,
18
+ opacity: pressed ? 0.5 : 1,
18
19
  },
19
20
  ghost: {
20
21
  backgroundColor: 'transparent',
@@ -30,6 +31,7 @@ export const SelectStyles = StyleSheet.create((theme, rt) => ({
30
31
  lg: {
31
32
  height: theme.sizes[11],
32
33
  },
34
+ nosize: {},
33
35
  },
34
36
  },
35
37
  }),
@@ -45,6 +47,7 @@ export const SelectStyles = StyleSheet.create((theme, rt) => ({
45
47
  sm: {},
46
48
  md: {},
47
49
  lg: {},
50
+ nosize: {},
48
51
  },
49
52
  },
50
53
  }),
@@ -56,12 +59,8 @@ export const SelectStyles = StyleSheet.create((theme, rt) => ({
56
59
  marginHorizontal: 20,
57
60
  variants: {
58
61
  variant: {
59
- outline: {
60
- backgroundColor: 'blue',
61
- },
62
- ghost: {
63
- backgroundColor: 'pink',
64
- },
62
+ outline: {},
63
+ ghost: {},
65
64
  },
66
65
  size: {
67
66
  sm: {
@@ -73,6 +72,7 @@ export const SelectStyles = StyleSheet.create((theme, rt) => ({
73
72
  lg: {
74
73
  padding: theme.spacing['1.5'],
75
74
  },
75
+ nosize: {},
76
76
  },
77
77
  },
78
78
  }),
package/lib/theme/Slider.recipe.tsx CHANGED
@@ -9,55 +9,210 @@ export const SliderDefaultVariants = {
9
9
  export const SliderStyles = StyleSheet.create(theme => ({
10
10
  container: (colorPalette: PalettesWithNestedKeys) => ({
11
11
  backgroundColor: theme.colors.bg.emphasized,
12
- borderRadius: theme.radii.full,
12
+ borderRadius: theme.radii['2xl'],
13
13
  variants: {
14
+ axis: {
15
+ x: {},
16
+ y: {},
17
+ },
14
18
  variant: {
15
19
  solid: {},
16
20
  },
17
21
  size: {
18
22
  xs: {
19
- height: theme.sizes[2],
23
+ // height: theme.sizes[2],
20
24
  },
21
25
  sm: {
22
- height: theme.sizes[4],
26
+ // height: theme.sizes[4],
23
27
  },
24
28
  md: {
25
- height: theme.sizes[5],
29
+ // height: theme.sizes[5],
26
30
  },
27
31
  lg: {
28
- height: theme.sizes[8],
32
+ // height: theme.sizes[8],
29
33
  },
30
34
  xl: {
31
- height: theme.sizes[10],
35
+ // height: theme.sizes[10],
32
36
  },
37
+ flex: {},
33
38
  },
34
39
  },
40
+ compoundVariants: [
41
+ {
42
+ axis: 'x',
43
+ size: 'xs',
44
+ styles: {
45
+ height: theme.sizes[2],
46
+ },
47
+ },
48
+ {
49
+ axis: 'x',
50
+ size: 'sm',
51
+ styles: {
52
+ height: theme.sizes[4],
53
+ },
54
+ },
55
+ {
56
+ axis: 'x',
57
+ size: 'md',
58
+ styles: {
59
+ height: theme.sizes[5],
60
+ },
61
+ },
62
+ {
63
+ axis: 'x',
64
+ size: 'lg',
65
+ styles: {
66
+ height: theme.sizes[8],
67
+ },
68
+ },
69
+ {
70
+ axis: 'x',
71
+ size: 'xl',
72
+ styles: {
73
+ height: theme.sizes[10],
74
+ },
75
+ },
76
+ {
77
+ axis: 'y',
78
+ size: 'xs',
79
+ styles: {
80
+ width: theme.sizes[2],
81
+ },
82
+ },
83
+ {
84
+ axis: 'y',
85
+ size: 'sm',
86
+ styles: {
87
+ width: theme.sizes[4],
88
+ },
89
+ },
90
+ {
91
+ axis: 'y',
92
+ size: 'md',
93
+ styles: {
94
+ width: theme.sizes[5],
95
+ },
96
+ },
97
+ {
98
+ axis: 'y',
99
+ size: 'lg',
100
+ styles: {
101
+ width: theme.sizes[8],
102
+ },
103
+ },
104
+ {
105
+ axis: 'y',
106
+ size: 'xl',
107
+ styles: {
108
+ width: theme.sizes[10],
109
+ },
110
+ },
111
+ ],
35
112
  }),
36
113
  maximumTrack: (colorPalette: PalettesWithNestedKeys) => ({
37
114
  backgroundColor: theme.colors.bg.emphasized,
38
- borderRadius: theme.radii.full,
115
+ // borderRadius: theme.radii.full,
116
+ // height: theme.sizes[5],
39
117
  variants: {
118
+ axis: {
119
+ x: {},
120
+ y: {},
121
+ },
40
122
  variant: {
41
123
  solid: {},
42
124
  },
43
125
  size: {
44
126
  xs: {
45
- height: theme.sizes[2],
127
+ // height: theme.sizes[2],
46
128
  },
47
129
  sm: {
48
- height: theme.sizes[4],
130
+ // height: theme.sizes[4],
49
131
  },
50
132
  md: {
51
- height: theme.sizes[5],
133
+ // height: theme.sizes[5],
52
134
  },
53
135
  lg: {
54
- height: theme.sizes[8],
136
+ // height: theme.sizes[8],
55
137
  },
56
138
  xl: {
57
- height: theme.sizes[10],
139
+ // height: theme.sizes[10],
58
140
  },
141
+ flex: {},
59
142
  },
60
143
  },
144
+ compoundVariants: [
145
+ {
146
+ axis: 'x',
147
+ size: 'xs',
148
+ styles: {
149
+ height: theme.sizes[2],
150
+ },
151
+ },
152
+ {
153
+ axis: 'x',
154
+ size: 'sm',
155
+ styles: {
156
+ height: theme.sizes[4],
157
+ },
158
+ },
159
+ {
160
+ axis: 'x',
161
+ size: 'md',
162
+ styles: {
163
+ height: theme.sizes[5],
164
+ },
165
+ },
166
+ {
167
+ axis: 'x',
168
+ size: 'lg',
169
+ styles: {
170
+ height: theme.sizes[8],
171
+ },
172
+ },
173
+ {
174
+ axis: 'x',
175
+ size: 'xl',
176
+ styles: {
177
+ height: theme.sizes[10],
178
+ },
179
+ },
180
+ {
181
+ axis: 'y',
182
+ size: 'xs',
183
+ styles: {
184
+ width: theme.sizes[2],
185
+ },
186
+ },
187
+ {
188
+ axis: 'y',
189
+ size: 'sm',
190
+ styles: {
191
+ width: theme.sizes[4],
192
+ },
193
+ },
194
+ {
195
+ axis: 'y',
196
+ size: 'md',
197
+ styles: {
198
+ width: theme.sizes[5],
199
+ },
200
+ },
201
+ {
202
+ axis: 'y',
203
+ size: 'lg',
204
+ styles: {
205
+ width: theme.sizes[8],
206
+ },
207
+ },
208
+ {
209
+ axis: 'y',
210
+ size: 'xl',
211
+ styles: {
212
+ width: theme.sizes[10],
213
+ },
214
+ },
215
+ ],
61
216
  }),
62
217
  minimumTrack: (
63
218
  colorPalette: PalettesWithNestedKeys,
@@ -66,67 +221,256 @@ export const SliderStyles = StyleSheet.create(theme => ({
66
221
  backgroundColor: opacityTrack
67
222
  ? hexToRgba(theme.colors[colorPalette].default, 0.5)
68
223
  : theme.colors[colorPalette].default,
224
+ height: theme.sizes[5],
69
225
  variants: {
226
+ axis: {
227
+ x: {},
228
+ y: {},
229
+ },
70
230
  variant: {
71
231
  solid: {},
72
232
  },
73
233
  size: {
74
234
  xs: {
75
- height: theme.sizes[2],
235
+ // height: theme.sizes[2],
76
236
  },
77
237
  sm: {
78
- height: theme.sizes[4],
238
+ // height: theme.sizes[4],
79
239
  },
80
240
  md: {
81
- height: theme.sizes[5],
241
+ // height: theme.sizes[5],
82
242
  },
83
243
  lg: {
84
- height: theme.sizes[8],
244
+ // height: theme.sizes[8],
85
245
  },
86
246
  xl: {
87
- height: theme.sizes[10],
247
+ // height: theme.sizes[10],
88
248
  },
89
249
  },
90
250
  },
251
+ compoundVariants: [
252
+ {
253
+ axis: 'x',
254
+ size: 'xs',
255
+ styles: {
256
+ height: theme.sizes[2],
257
+ },
258
+ },
259
+ {
260
+ axis: 'x',
261
+ size: 'sm',
262
+ styles: {
263
+ height: theme.sizes[4],
264
+ },
265
+ },
266
+ {
267
+ axis: 'x',
268
+ size: 'md',
269
+ styles: {
270
+ height: theme.sizes[5],
271
+ },
272
+ },
273
+ {
274
+ axis: 'x',
275
+ size: 'lg',
276
+ styles: {
277
+ height: theme.sizes[8],
278
+ },
279
+ },
280
+ {
281
+ axis: 'x',
282
+ size: 'xl',
283
+ styles: {
284
+ height: theme.sizes[10],
285
+ },
286
+ },
287
+ {
288
+ axis: 'y',
289
+ size: 'xs',
290
+ styles: {
291
+ width: theme.sizes[2],
292
+ },
293
+ },
294
+ {
295
+ axis: 'y',
296
+ size: 'sm',
297
+ styles: {
298
+ width: theme.sizes[4],
299
+ },
300
+ },
301
+ {
302
+ axis: 'y',
303
+ size: 'md',
304
+ styles: {
305
+ width: theme.sizes[5],
306
+ },
307
+ },
308
+ {
309
+ axis: 'y',
310
+ size: 'lg',
311
+ styles: {
312
+ width: theme.sizes[8],
313
+ },
314
+ },
315
+ {
316
+ axis: 'y',
317
+ size: 'xl',
318
+ styles: {
319
+ width: theme.sizes[10],
320
+ },
321
+ },
322
+ ],
91
323
  }),
92
324
  thumb: (colorPalette: PalettesWithNestedKeys) => ({
93
325
  backgroundColor: theme.colors.bg.default,
94
326
  borderColor: theme.colors[colorPalette].default,
95
327
  borderRadius: theme.radii.full,
96
328
  borderWidth: 2,
329
+ // width: theme.sizes[7],
330
+ // height: theme.sizes[7],
97
331
  variants: {
332
+ axis: {
333
+ x: {},
334
+ y: {},
335
+ },
98
336
  variant: {
99
337
  solid: {},
100
338
  },
101
339
  size: {
102
340
  xs: {
341
+ // width: theme.sizes[4],
342
+ // height: theme.sizes[4],
343
+ },
344
+ sm: {
345
+ // width: theme.sizes[6],
346
+ // height: theme.sizes[6],
347
+ },
348
+ md: {
349
+ // width: theme.sizes[7],
350
+ // height: theme.sizes[7],
351
+ },
352
+ lg: {
353
+ // width: theme.sizes[8],
354
+ // height: theme.sizes[8],
355
+ },
356
+ xl: {
357
+ // width: theme.sizes[11],
358
+ // height: theme.sizes[11],
359
+ },
360
+ flex: {
361
+ // width: 30,
362
+ // height: 50,
363
+ },
364
+ },
365
+ },
366
+ compoundVariants: [
367
+ {
368
+ axis: 'x',
369
+ size: 'xs',
370
+ styles: {
103
371
  width: theme.sizes[4],
104
372
  height: theme.sizes[4],
105
373
  },
106
- sm: {
374
+ },
375
+ {
376
+ axis: 'x',
377
+ size: 'sm',
378
+ styles: {
107
379
  width: theme.sizes[6],
108
380
  height: theme.sizes[6],
109
381
  },
110
- md: {
382
+ },
383
+ {
384
+ axis: 'x',
385
+ size: 'md',
386
+ styles: {
111
387
  width: theme.sizes[7],
112
388
  height: theme.sizes[7],
113
389
  },
114
- lg: {
390
+ },
391
+ {
392
+ axis: 'x',
393
+ size: 'lg',
394
+ styles: {
115
395
  width: theme.sizes[8],
116
396
  height: theme.sizes[8],
117
397
  },
118
- xl: {
398
+ },
399
+ {
400
+ axis: 'x',
401
+ size: 'xl',
402
+ styles: {
119
403
  width: theme.sizes[11],
120
404
  height: theme.sizes[11],
121
405
  },
122
406
  },
123
- },
407
+ {
408
+ axis: 'x',
409
+ size: 'flex',
410
+ styles: {
411
+ width: 30,
412
+ height: 50,
413
+ },
414
+ },
415
+ {
416
+ axis: 'y',
417
+ size: 'xs',
418
+ styles: {
419
+ width: theme.sizes[4],
420
+ height: theme.sizes[4],
421
+ },
422
+ },
423
+ {
424
+ axis: 'y',
425
+ size: 'sm',
426
+ styles: {
427
+ width: theme.sizes[6],
428
+ height: theme.sizes[6],
429
+ },
430
+ },
431
+ {
432
+ axis: 'y',
433
+ size: 'md',
434
+ styles: {
435
+ width: theme.sizes[7],
436
+ height: theme.sizes[7],
437
+ },
438
+ },
439
+ {
440
+ axis: 'y',
441
+ size: 'lg',
442
+ styles: {
443
+ width: theme.sizes[8],
444
+ height: theme.sizes[8],
445
+ },
446
+ },
447
+ {
448
+ axis: 'y',
449
+ size: 'xl',
450
+ styles: {
451
+ width: theme.sizes[11],
452
+ height: theme.sizes[11],
453
+ },
454
+ },
455
+ {
456
+ axis: 'y',
457
+ size: 'flex',
458
+ styles: {
459
+ width: 50,
460
+ height: 30,
461
+ },
462
+ },
463
+ ],
124
464
  }),
125
465
  step: (colorPalette: PalettesWithNestedKeys) => ({
126
466
  // TODO: type correctly theme.colors
127
467
  // @ts-ignore
128
468
  backgroundColor: theme.colors.white['0'],
129
469
  variants: {
470
+ axis: {
471
+ x: {},
472
+ y: {},
473
+ },
130
474
  variant: {
131
475
  solid: {},
132
476
  },
package/lib/theme/Slideshow.recipe.tsx CHANGED
@@ -56,7 +56,7 @@ export const SlideshowStyles = StyleSheet.create(theme => ({
56
56
  borderColor: theme.colors.border.default,
57
57
  borderWidth: 1,
58
58
  borderRadius: theme.radii['3xl'],
59
- margin: theme.spacing[2],
59
+ padding: theme.spacing[2],
60
60
  },
61
61
  },
62
62
  },
package/lib/theme/SlidingDrawer.recipe.tsx CHANGED
@@ -35,19 +35,73 @@ export const SlidingDrawerTokens = {
35
35
  },
36
36
  },
37
37
  } as const
38
- export const SlidingDrawerStyles = StyleSheet.create(theme => ({
39
- container: (colorPalette: PalettesWithNestedKeys) => ({
38
+ export const SlidingDrawerStyles = StyleSheet.create((theme, rt) => ({
39
+ positioner: {
40
+ variants: {
41
+ variant: {
42
+ solid: {},
43
+ subtle: {},
44
+ card: {},
45
+ new: {
46
+ justifyContent: 'flex-start',
47
+ },
48
+ },
49
+ },
50
+ },
51
+ slider: (colorPalette: PalettesWithNestedKeys) => ({
40
52
  boxShadow: `0px -10px 20px black`,
41
53
  borderRadius: theme.radii.lg,
42
54
  backgroundColor: theme.colors.bg.default,
43
55
  padding: theme.spacing[3],
44
56
  variants: {
45
57
  variant: {
46
- solid: {},
58
+ solid: {
59
+ backgroundColor: 'blue',
60
+ },
61
+ subtle: {
62
+ boxShadow: 'none',
63
+ borderRadius: theme.radii.none,
64
+ // @ts-ignore
65
+ backgroundColor: theme.colors.black['0'],
66
+ },
67
+ card: {
68
+ boxShadow: 'none',
69
+ borderRadius: theme.radii.lg,
70
+ // marginHorizontal: theme.spacing[3],
71
+ borderWidth: 2,
72
+ borderColor: theme.colors.border.default,
73
+ // height: rt.screen.height,
74
+ // height: 'auto',
75
+ alignSelf: 'auto',
76
+ maxWidth: '90%',
77
+ },
78
+ new: {
79
+ maxWidth: '80%',
80
+ },
81
+ iglooroom: {
82
+ padding: 0,
83
+ boxShadow: 'none',
84
+ borderRadius: theme.radii.none,
85
+ backgroundColor: 'transparent',
86
+ },
47
87
  },
48
88
  },
49
89
  }),
50
- backdrop: (colorPalette: PalettesWithNestedKeys) => ({
90
+ overlay: (colorPalette: PalettesWithNestedKeys) => ({
51
91
  backgroundColor: theme.colors.backdrop,
92
+ variants: {
93
+ variant: {
94
+ solid: {},
95
+ subtle: {
96
+ backgroundColor: '#00000040',
97
+ },
98
+ card: {
99
+ backgroundColor: '#00000020',
100
+ },
101
+ new: {
102
+ backgroundColor: '#00000020',
103
+ },
104
+ },
105
+ },
52
106
  }),
53
107
  }))