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/Toast.recipe.tsx ADDED
@@ -0,0 +1,71 @@
1
+ import {StyleSheet} from 'react-native-unistyles'
2
+ import {PalettesWithNestedKeys} from '../style/varia/types'
3
+ import {textStyle} from '../style/varia/textStyles'
4
+
5
+ export const ToastDefaultVariants = {
6
+ variant: 'solid',
7
+ size: 'md',
8
+ } as const
9
+
10
+ export const ToastStyles = StyleSheet.create(theme => ({
11
+ container: (colorPalette: PalettesWithNestedKeys) => ({
12
+ variants: {
13
+ variant: {
14
+ solid: {
15
+ backgroundColor: theme.colors[colorPalette].default,
16
+ boxShadow: theme.shadows.md,
17
+ },
18
+ subtle: {
19
+ backgroundColor: theme.colors.bg.subtle,
20
+ boxShadow: theme.shadows.sm,
21
+ },
22
+ outline: {
23
+ borderWidth: 2,
24
+ borderColor: theme.colors.border.default,
25
+ },
26
+ error: {
27
+ borderColor: theme.colors.red[9],
28
+ borderWidth: 1,
29
+ backgroundColor: theme.colors.red[7],
30
+ },
31
+ },
32
+ size: {
33
+ sm: {
34
+ bottom: theme.spacing[5],
35
+ },
36
+ md: {
37
+ bottom: theme.spacing[5],
38
+ },
39
+ lg: {
40
+ bottom: theme.spacing[8],
41
+ },
42
+ },
43
+ },
44
+ }),
45
+ text: (colorPalette: PalettesWithNestedKeys) => ({
46
+ variants: {
47
+ variant: {
48
+ solid: {
49
+ color: theme.colors[colorPalette].fg,
50
+ },
51
+ subtle: {
52
+ color: theme.colors.fg.default,
53
+ },
54
+ outline: {
55
+ color: theme.colors.fg.default,
56
+ },
57
+ },
58
+ size: {
59
+ sm: {
60
+ ...textStyle.xs,
61
+ },
62
+ md: {
63
+ ...textStyle.xs,
64
+ },
65
+ lg: {
66
+ ...textStyle.sm,
67
+ },
68
+ },
69
+ },
70
+ }),
71
+ }))
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "react-native-varia",
3
- "version": "0.2.3",
3
+ "version": "0.2.4",
4
4
  "bin": {
5
5
  "varia": "bin/cli.js"
6
6
  },
package/lib/theme/Button.recipe-old.tsx DELETED
@@ -1,67 +0,0 @@
1
- import { StyleSheet } from "react-native-unistyles"
2
-
3
- const ButtonStyles = StyleSheet.create(theme => ({
4
- container: {
5
- variants: {
6
- colorPalette: {
7
- primary: {
8
- backgroundColor: 'tomato',
9
- },
10
- secondary: {
11
- backgroundColor: theme.colors.foreground,
12
- }
13
- },
14
- size: {
15
- sm: {
16
- height: 32,
17
- maxHeight: 32,
18
- padding: 6,
19
- },
20
- md: {
21
- maxHeight: 48,
22
- height: 48,
23
- padding: 8,
24
- },
25
- lg: {
26
- maxHeight: 64,
27
- height: 64,
28
- padding: 12,
29
- },
30
- xl: {
31
- maxHeight: 80,
32
- height: 80,
33
- padding: 16,
34
- }
35
- }
36
- },
37
- },
38
- text: {
39
- variants: {
40
- colorPalette: {
41
- primary: {
42
- color: 'white',
43
- },
44
- secondary: {
45
- color: theme.colors.categoryAquamarine,
46
- }
47
- },
48
- size: {
49
- sm: {
50
- fontSize: 24,
51
- },
52
- md: {
53
- fontSize: 28,
54
- },
55
- lg: {
56
- fontSize: 32,
57
- },
58
- xl: {
59
- fontSize: 36,
60
- }
61
- }
62
- }
63
- }
64
- }))
65
-
66
-
67
- export default ButtonStyles