npm - react-native-varia - Versions diffs - 0.2.3 → 0.3.0 - Mend

react-native-varia 0.2.3 → 0.3.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 (43) hide show

package/bin/cli.js +24 -34
package/lib/components/Accordion.tsx +113 -0
package/lib/components/Button.tsx +16 -3
package/lib/components/Checkbox.tsx +12 -7
package/lib/components/CircleProgress.tsx +30 -21
package/lib/components/Divider.tsx +23 -19
package/lib/components/Drawer.tsx +23 -69
package/lib/components/Field.tsx +24 -39
package/lib/components/GradientBackground.tsx +25 -7
package/lib/components/GradientText.tsx +61 -21
package/lib/components/IconWrapper.tsx +20 -14
package/lib/components/Input.tsx +107 -25
package/lib/components/Modal.tsx +4 -10
package/lib/components/NumberInput.tsx +54 -11
package/lib/components/OldSlider.tsx +327 -0
package/lib/components/RadioGroup.tsx +58 -18
package/lib/components/ReText.tsx +1 -1
package/lib/components/Select.tsx +58 -22
package/lib/components/Slider.tsx +273 -138
package/lib/components/Slideshow.tsx +65 -63
package/lib/components/SlidingDrawer.tsx +20 -21
package/lib/components/Spinner.tsx +13 -5
package/lib/components/Toast.tsx +89 -0
package/lib/components/context/Field.tsx +27 -0
package/lib/patterns/index.tsx +16 -5
package/lib/patterns/newPatterns.tsx +285 -0
package/lib/theme/Button.recipe.tsx +11 -1
package/lib/theme/CircleProgress.recipe.tsx +3 -3
package/lib/theme/Drawer.recipe.tsx +107 -0
package/lib/theme/Field.recipe.tsx +17 -2
package/lib/theme/Input.recipe.tsx +12 -3
package/lib/theme/NumberInput.recipe.tsx +8 -3
package/lib/theme/RadioGroup.recipe.tsx +7 -1
package/lib/theme/Select.recipe.tsx +7 -7
package/lib/theme/Slider.recipe.tsx +402 -27
package/lib/theme/Slideshow.recipe.tsx +1 -1
package/lib/theme/Toast.recipe.tsx +71 -0
package/lib/varia/mixins.ts +0 -4
package/lib/varia/types.ts +8 -0
package/lib/varia/utils.ts +66 -0
package/package.json +1 -1
package/lib/theme/Button.recipe-old.tsx +0 -67
package/lib/theme/SlidingDrawer.recipe.tsx +0 -53

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

@@ -1,5 +1,4 @@
 import {StyleSheet} from 'react-native-unistyles'
-import {hexToRgba} from '../style/varia/utils'
 import {PalettesWithNestedKeys} from '../style/varia/types'
 export const SliderDefaultVariants = {
@@ -9,124 +8,496 @@ 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: 'x',
+        size: 'flex',
+        styles: {
+          minHeight: 50,
+        },
+      },
+      {
+        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],
+        },
+      },
+      {
+        axis: 'y',
+        size: 'flex',
+        styles: {
+          minWidth: 50,
+        },
+      },
+    ],
   }),
   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: 'x',
+        size: 'flex',
+        styles: {},
+      },
+      {
+        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,
     opacityTrack: boolean,
   ) => ({
-    backgroundColor: opacityTrack
-      ? hexToRgba(theme.colors[colorPalette].default, 0.5)
-      : theme.colors[colorPalette].default,
+    backgroundColor: theme.colors[colorPalette].default,
+    // 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],
         },
+        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: 'x',
+        size: 'flex',
+        styles: {},
+      },
+      {
+        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,
+          // alignSel: 'stretch',
+          // flex: 1,
+        },
+      },
+      {
+        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: {
+          alignSelf: 'stretch',
+          height: 30,
+        },
+      },
+    ],
   }),
   step: (colorPalette: PalettesWithNestedKeys) => ({
     // TODO: type correctly theme.colors
     // @ts-ignore
-    backgroundColor: theme.colors.white['0'],
+    backgroundColor: theme.colors.bg.default,
     variants: {
+      axis: {
+        x: {},
+        y: {},
+      },
       variant: {
         solid: {},
       },
@@ -136,6 +507,10 @@ export const SliderStyles = StyleSheet.create(theme => ({
         md: {},
         lg: {},
         xl: {},
+        flex: {
+          width: 5,
+          height: 5,
+        },
       },
     },
   }),

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/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/lib/varia/mixins.ts CHANGED Viewed

@@ -18,9 +18,6 @@ const mixins = StyleSheet.create((theme, rt) => ({
     alignItems: 'center',
     justifyContent: 'center',
   },
-  sx: (sx: any) => ({
-    ...sx,
-  }),
   w: (width: number) => ({
     width,
   }),
@@ -181,7 +178,6 @@ export const {
   row,
   gap,
   center,
-  sx,
   flexColumn,
   w,
   h,

package/lib/varia/types.ts CHANGED Viewed

@@ -1,3 +1,4 @@
+import {ViewStyle} from 'react-native'
 import {darkTheme, lightTheme} from '../themes'
 export interface AlphaPalette {
@@ -275,3 +276,10 @@ export function createCircleProgressTokens<
 }) {
   return tokens
 }
+export type AlignSelf = ViewStyle['alignSelf']
+export type StackDirection = 'row' | 'column'
+export type progressDirection = 'forward' | 'reverse'
+export type rotationDirection = 'clockwise' | 'counterclockwise'
+export type Flex = ViewStyle['flex']
+export type MaxWidth = ViewStyle['maxWidth']