npm - react-native-varia - Versions diffs - 0.2.2 → 0.2.4 - Mend

react-native-varia 0.2.2 → 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 (40) hide show

package/bin/cli.js +316 -139
package/lib/components/Accordion.tsx +113 -0
package/lib/components/Button.tsx +19 -8
package/lib/components/CircleProgress.tsx +46 -28
package/lib/components/Divider.tsx +18 -15
package/lib/components/Drawer.tsx +496 -0
package/lib/components/Field.tsx +24 -39
package/lib/components/GradientBackground.tsx +25 -7
package/lib/components/GradientText.tsx +38 -11
package/lib/components/IconWrapper.tsx +20 -14
package/lib/components/Input.tsx +106 -25
package/lib/components/NumberInput.tsx +88 -19
package/lib/components/OldSlider.tsx +327 -0
package/lib/components/RadioGroup.tsx +55 -17
package/lib/components/ReText.tsx +1 -1
package/lib/components/Select.tsx +58 -22
package/lib/components/Slider.tsx +176 -115
package/lib/components/Slideshow.tsx +68 -69
package/lib/components/SlidingDrawer.tsx +72 -29
package/lib/components/Spinner.tsx +6 -2
package/lib/components/Toast.tsx +89 -0
package/lib/components/context/Field.tsx +27 -0
package/lib/icons/Minus.tsx +24 -0
package/lib/icons/Plus.tsx +23 -0
package/lib/theme/Button.recipe.tsx +11 -1
package/lib/theme/CircleProgress.recipe.tsx +3 -3
package/lib/theme/Field.recipe.tsx +17 -2
package/lib/theme/Input.recipe.tsx +12 -3
package/lib/theme/NumberInput.recipe.tsx +9 -4
package/lib/theme/RadioGroup.recipe.tsx +7 -1
package/lib/theme/Select.recipe.tsx +7 -7
package/lib/theme/Slider.recipe.tsx +366 -22
package/lib/theme/Slideshow.recipe.tsx +1 -1
package/lib/theme/SlidingDrawer.recipe.tsx +58 -4
package/lib/theme/Toast.recipe.tsx +71 -0
package/package.json +3 -2
package/lib/components/NewSelect.tsx +0 -202
package/lib/components/index.tsx +0 -83
package/lib/components/layoutTest.tsx +0 -74
package/lib/theme/Button.recipe-old.tsx +0 -67

package/lib/theme/Select.recipe.tsx CHANGED Viewed

@@ -8,13 +8,14 @@ export const SelectDefaultVariants = {
 } as const
 export const SelectStyles = StyleSheet.create((theme, rt) => ({
-  trigger: (colorPalette: PalettesWithNestedKeys) => ({
+  trigger: (colorPalette: PalettesWithNestedKeys, pressed: boolean) => ({
     variants: {
       variant: {
         outline: {
           borderColor: theme.colors.border.default,
           borderWidth: 1,
           borderRadius: theme.radii.sm,
+          opacity: pressed ? 0.5 : 1,
         },
         ghost: {
           backgroundColor: 'transparent',
@@ -30,6 +31,7 @@ export const SelectStyles = StyleSheet.create((theme, rt) => ({
         lg: {
           height: theme.sizes[11],
         },
+        nosize: {},
       },
     },
   }),
@@ -45,6 +47,7 @@ export const SelectStyles = StyleSheet.create((theme, rt) => ({
         sm: {},
         md: {},
         lg: {},
+        nosize: {},
       },
     },
   }),
@@ -56,12 +59,8 @@ export const SelectStyles = StyleSheet.create((theme, rt) => ({
     marginHorizontal: 20,
     variants: {
       variant: {
-        outline: {
-          backgroundColor: 'blue',
-        },
-        ghost: {
-          backgroundColor: 'pink',
-        },
+        outline: {},
+        ghost: {},
       },
       size: {
         sm: {
@@ -73,6 +72,7 @@ export const SelectStyles = StyleSheet.create((theme, rt) => ({
         lg: {
           padding: theme.spacing['1.5'],
         },
+        nosize: {},
       },
     },
   }),

package/lib/theme/Slider.recipe.tsx CHANGED Viewed

@@ -9,55 +9,210 @@ export const SliderDefaultVariants = {
 export const SliderStyles = StyleSheet.create(theme => ({
   container: (colorPalette: PalettesWithNestedKeys) => ({
     backgroundColor: theme.colors.bg.emphasized,
-    borderRadius: theme.radii.full,
+    borderRadius: theme.radii['2xl'],
     variants: {
+      axis: {
+        x: {},
+        y: {},
+      },
       variant: {
         solid: {},
       },
       size: {
         xs: {
-          height: theme.sizes[2],
+          // height: theme.sizes[2],
         },
         sm: {
-          height: theme.sizes[4],
+          // height: theme.sizes[4],
         },
         md: {
-          height: theme.sizes[5],
+          // height: theme.sizes[5],
         },
         lg: {
-          height: theme.sizes[8],
+          // height: theme.sizes[8],
         },
         xl: {
-          height: theme.sizes[10],
+          // height: theme.sizes[10],
         },
+        flex: {},
       },
     },
+    compoundVariants: [
+      {
+        axis: 'x',
+        size: 'xs',
+        styles: {
+          height: theme.sizes[2],
+        },
+      },
+      {
+        axis: 'x',
+        size: 'sm',
+        styles: {
+          height: theme.sizes[4],
+        },
+      },
+      {
+        axis: 'x',
+        size: 'md',
+        styles: {
+          height: theme.sizes[5],
+        },
+      },
+      {
+        axis: 'x',
+        size: 'lg',
+        styles: {
+          height: theme.sizes[8],
+        },
+      },
+      {
+        axis: 'x',
+        size: 'xl',
+        styles: {
+          height: theme.sizes[10],
+        },
+      },
+      {
+        axis: 'y',
+        size: 'xs',
+        styles: {
+          width: theme.sizes[2],
+        },
+      },
+      {
+        axis: 'y',
+        size: 'sm',
+        styles: {
+          width: theme.sizes[4],
+        },
+      },
+      {
+        axis: 'y',
+        size: 'md',
+        styles: {
+          width: theme.sizes[5],
+        },
+      },
+      {
+        axis: 'y',
+        size: 'lg',
+        styles: {
+          width: theme.sizes[8],
+        },
+      },
+      {
+        axis: 'y',
+        size: 'xl',
+        styles: {
+          width: theme.sizes[10],
+        },
+      },
+    ],
   }),
   maximumTrack: (colorPalette: PalettesWithNestedKeys) => ({
     backgroundColor: theme.colors.bg.emphasized,
-    borderRadius: theme.radii.full,
+    // borderRadius: theme.radii.full,
+    // height: theme.sizes[5],
     variants: {
+      axis: {
+        x: {},
+        y: {},
+      },
       variant: {
         solid: {},
       },
       size: {
         xs: {
-          height: theme.sizes[2],
+          // height: theme.sizes[2],
         },
         sm: {
-          height: theme.sizes[4],
+          // height: theme.sizes[4],
         },
         md: {
-          height: theme.sizes[5],
+          // height: theme.sizes[5],
         },
         lg: {
-          height: theme.sizes[8],
+          // height: theme.sizes[8],
         },
         xl: {
-          height: theme.sizes[10],
+          // height: theme.sizes[10],
         },
+        flex: {},
       },
     },
+    compoundVariants: [
+      {
+        axis: 'x',
+        size: 'xs',
+        styles: {
+          height: theme.sizes[2],
+        },
+      },
+      {
+        axis: 'x',
+        size: 'sm',
+        styles: {
+          height: theme.sizes[4],
+        },
+      },
+      {
+        axis: 'x',
+        size: 'md',
+        styles: {
+          height: theme.sizes[5],
+        },
+      },
+      {
+        axis: 'x',
+        size: 'lg',
+        styles: {
+          height: theme.sizes[8],
+        },
+      },
+      {
+        axis: 'x',
+        size: 'xl',
+        styles: {
+          height: theme.sizes[10],
+        },
+      },
+      {
+        axis: 'y',
+        size: 'xs',
+        styles: {
+          width: theme.sizes[2],
+        },
+      },
+      {
+        axis: 'y',
+        size: 'sm',
+        styles: {
+          width: theme.sizes[4],
+        },
+      },
+      {
+        axis: 'y',
+        size: 'md',
+        styles: {
+          width: theme.sizes[5],
+        },
+      },
+      {
+        axis: 'y',
+        size: 'lg',
+        styles: {
+          width: theme.sizes[8],
+        },
+      },
+      {
+        axis: 'y',
+        size: 'xl',
+        styles: {
+          width: theme.sizes[10],
+        },
+      },
+    ],
   }),
   minimumTrack: (
     colorPalette: PalettesWithNestedKeys,
@@ -66,67 +221,256 @@ export const SliderStyles = StyleSheet.create(theme => ({
     backgroundColor: opacityTrack
       ? hexToRgba(theme.colors[colorPalette].default, 0.5)
       : theme.colors[colorPalette].default,
+    height: theme.sizes[5],
     variants: {
+      axis: {
+        x: {},
+        y: {},
+      },
       variant: {
         solid: {},
       },
       size: {
         xs: {
-          height: theme.sizes[2],
+          // height: theme.sizes[2],
         },
         sm: {
-          height: theme.sizes[4],
+          // height: theme.sizes[4],
         },
         md: {
-          height: theme.sizes[5],
+          // height: theme.sizes[5],
         },
         lg: {
-          height: theme.sizes[8],
+          // height: theme.sizes[8],
         },
         xl: {
-          height: theme.sizes[10],
+          // height: theme.sizes[10],
         },
       },
     },
+    compoundVariants: [
+      {
+        axis: 'x',
+        size: 'xs',
+        styles: {
+          height: theme.sizes[2],
+        },
+      },
+      {
+        axis: 'x',
+        size: 'sm',
+        styles: {
+          height: theme.sizes[4],
+        },
+      },
+      {
+        axis: 'x',
+        size: 'md',
+        styles: {
+          height: theme.sizes[5],
+        },
+      },
+      {
+        axis: 'x',
+        size: 'lg',
+        styles: {
+          height: theme.sizes[8],
+        },
+      },
+      {
+        axis: 'x',
+        size: 'xl',
+        styles: {
+          height: theme.sizes[10],
+        },
+      },
+      {
+        axis: 'y',
+        size: 'xs',
+        styles: {
+          width: theme.sizes[2],
+        },
+      },
+      {
+        axis: 'y',
+        size: 'sm',
+        styles: {
+          width: theme.sizes[4],
+        },
+      },
+      {
+        axis: 'y',
+        size: 'md',
+        styles: {
+          width: theme.sizes[5],
+        },
+      },
+      {
+        axis: 'y',
+        size: 'lg',
+        styles: {
+          width: theme.sizes[8],
+        },
+      },
+      {
+        axis: 'y',
+        size: 'xl',
+        styles: {
+          width: theme.sizes[10],
+        },
+      },
+    ],
   }),
   thumb: (colorPalette: PalettesWithNestedKeys) => ({
     backgroundColor: theme.colors.bg.default,
     borderColor: theme.colors[colorPalette].default,
     borderRadius: theme.radii.full,
     borderWidth: 2,
+    // width: theme.sizes[7],
+    // height: theme.sizes[7],
     variants: {
+      axis: {
+        x: {},
+        y: {},
+      },
       variant: {
         solid: {},
       },
       size: {
         xs: {
+          // width: theme.sizes[4],
+          // height: theme.sizes[4],
+        },
+        sm: {
+          // width: theme.sizes[6],
+          // height: theme.sizes[6],
+        },
+        md: {
+          // width: theme.sizes[7],
+          // height: theme.sizes[7],
+        },
+        lg: {
+          // width: theme.sizes[8],
+          // height: theme.sizes[8],
+        },
+        xl: {
+          // width: theme.sizes[11],
+          // height: theme.sizes[11],
+        },
+        flex: {
+          // width: 30,
+          // height: 50,
+        },
+      },
+    },
+    compoundVariants: [
+      {
+        axis: 'x',
+        size: 'xs',
+        styles: {
           width: theme.sizes[4],
           height: theme.sizes[4],
         },
-        sm: {
+      },
+      {
+        axis: 'x',
+        size: 'sm',
+        styles: {
           width: theme.sizes[6],
           height: theme.sizes[6],
         },
-        md: {
+      },
+      {
+        axis: 'x',
+        size: 'md',
+        styles: {
           width: theme.sizes[7],
           height: theme.sizes[7],
         },
-        lg: {
+      },
+      {
+        axis: 'x',
+        size: 'lg',
+        styles: {
           width: theme.sizes[8],
           height: theme.sizes[8],
         },
-        xl: {
+      },
+      {
+        axis: 'x',
+        size: 'xl',
+        styles: {
           width: theme.sizes[11],
           height: theme.sizes[11],
         },
       },
-    },
+      {
+        axis: 'x',
+        size: 'flex',
+        styles: {
+          width: 30,
+          height: 50,
+        },
+      },
+      {
+        axis: 'y',
+        size: 'xs',
+        styles: {
+          width: theme.sizes[4],
+          height: theme.sizes[4],
+        },
+      },
+      {
+        axis: 'y',
+        size: 'sm',
+        styles: {
+          width: theme.sizes[6],
+          height: theme.sizes[6],
+        },
+      },
+      {
+        axis: 'y',
+        size: 'md',
+        styles: {
+          width: theme.sizes[7],
+          height: theme.sizes[7],
+        },
+      },
+      {
+        axis: 'y',
+        size: 'lg',
+        styles: {
+          width: theme.sizes[8],
+          height: theme.sizes[8],
+        },
+      },
+      {
+        axis: 'y',
+        size: 'xl',
+        styles: {
+          width: theme.sizes[11],
+          height: theme.sizes[11],
+        },
+      },
+      {
+        axis: 'y',
+        size: 'flex',
+        styles: {
+          width: 50,
+          height: 30,
+        },
+      },
+    ],
   }),
   step: (colorPalette: PalettesWithNestedKeys) => ({
     // TODO: type correctly theme.colors
     // @ts-ignore
     backgroundColor: theme.colors.white['0'],
     variants: {
+      axis: {
+        x: {},
+        y: {},
+      },
       variant: {
         solid: {},
       },

package/lib/theme/Slideshow.recipe.tsx CHANGED Viewed

@@ -56,7 +56,7 @@ export const SlideshowStyles = StyleSheet.create(theme => ({
           borderColor: theme.colors.border.default,
           borderWidth: 1,
           borderRadius: theme.radii['3xl'],
-          margin: theme.spacing[2],
+          padding: theme.spacing[2],
         },
       },
     },

package/lib/theme/SlidingDrawer.recipe.tsx CHANGED Viewed

@@ -35,19 +35,73 @@ export const SlidingDrawerTokens = {
     },
   },
 } as const
-export const SlidingDrawerStyles = StyleSheet.create(theme => ({
-  container: (colorPalette: PalettesWithNestedKeys) => ({
+export const SlidingDrawerStyles = StyleSheet.create((theme, rt) => ({
+  positioner: {
+    variants: {
+      variant: {
+        solid: {},
+        subtle: {},
+        card: {},
+        new: {
+          justifyContent: 'flex-start',
+        },
+      },
+    },
+  },
+  slider: (colorPalette: PalettesWithNestedKeys) => ({
     boxShadow: `0px -10px 20px black`,
     borderRadius: theme.radii.lg,
     backgroundColor: theme.colors.bg.default,
     padding: theme.spacing[3],
     variants: {
       variant: {
-        solid: {},
+        solid: {
+          backgroundColor: 'blue',
+        },
+        subtle: {
+          boxShadow: 'none',
+          borderRadius: theme.radii.none,
+          // @ts-ignore
+          backgroundColor: theme.colors.black['0'],
+        },
+        card: {
+          boxShadow: 'none',
+          borderRadius: theme.radii.lg,
+          // marginHorizontal: theme.spacing[3],
+          borderWidth: 2,
+          borderColor: theme.colors.border.default,
+          // height: rt.screen.height,
+          // height: 'auto',
+          alignSelf: 'auto',
+          maxWidth: '90%',
+        },
+        new: {
+          maxWidth: '80%',
+        },
+        iglooroom: {
+          padding: 0,
+          boxShadow: 'none',
+          borderRadius: theme.radii.none,
+          backgroundColor: 'transparent',
+        },
       },
     },
   }),
-  backdrop: (colorPalette: PalettesWithNestedKeys) => ({
+  overlay: (colorPalette: PalettesWithNestedKeys) => ({
     backgroundColor: theme.colors.backdrop,
+    variants: {
+      variant: {
+        solid: {},
+        subtle: {
+          backgroundColor: '#00000040',
+        },
+        card: {
+          backgroundColor: '#00000020',
+        },
+        new: {
+          backgroundColor: '#00000020',
+        },
+      },
+    },
   }),
 }))

package/lib/theme/Toast.recipe.tsx ADDED Viewed

@@ -0,0 +1,71 @@
+import {StyleSheet} from 'react-native-unistyles'
+import {PalettesWithNestedKeys} from '../style/varia/types'
+import {textStyle} from '../style/varia/textStyles'
+export const ToastDefaultVariants = {
+  variant: 'solid',
+  size: 'md',
+} as const
+export const ToastStyles = StyleSheet.create(theme => ({
+  container: (colorPalette: PalettesWithNestedKeys) => ({
+    variants: {
+      variant: {
+        solid: {
+          backgroundColor: theme.colors[colorPalette].default,
+          boxShadow: theme.shadows.md,
+        },
+        subtle: {
+          backgroundColor: theme.colors.bg.subtle,
+          boxShadow: theme.shadows.sm,
+        },
+        outline: {
+          borderWidth: 2,
+          borderColor: theme.colors.border.default,
+        },
+        error: {
+          borderColor: theme.colors.red[9],
+          borderWidth: 1,
+          backgroundColor: theme.colors.red[7],
+        },
+      },
+      size: {
+        sm: {
+          bottom: theme.spacing[5],
+        },
+        md: {
+          bottom: theme.spacing[5],
+        },
+        lg: {
+          bottom: theme.spacing[8],
+        },
+      },
+    },
+  }),
+  text: (colorPalette: PalettesWithNestedKeys) => ({
+    variants: {
+      variant: {
+        solid: {
+          color: theme.colors[colorPalette].fg,
+        },
+        subtle: {
+          color: theme.colors.fg.default,
+        },
+        outline: {
+          color: theme.colors.fg.default,
+        },
+      },
+      size: {
+        sm: {
+          ...textStyle.xs,
+        },
+        md: {
+          ...textStyle.xs,
+        },
+        lg: {
+          ...textStyle.sm,
+        },
+      },
+    },
+  }),
+}))

package/package.json CHANGED Viewed

@@ -1,6 +1,6 @@
 {
   "name": "react-native-varia",
-  "version": "0.2.2",
+  "version": "0.2.4",
   "bin": {
     "varia": "bin/cli.js"
   },
@@ -13,6 +13,7 @@
   "description": "",
   "dependencies": {
     "commander": "^14.0.0",
-    "fs-extra": "^11.3.1"
+    "fs-extra": "^11.3.1",
+    "inquirer": "^8.2.7"
   }
 }