react-native-varia 0.2.3 → 0.3.0

package/lib/patterns/newPatterns.tsx

@@ -0,0 +1,285 @@
+import {useMemo} from 'react'
+import {StyleProp, View, ViewStyle} from 'react-native'
+import {StyleSheet} from 'react-native-unistyles'
+
+interface StackProps {
+  backgroundColor?: ViewStyle['backgroundColor']
+  bg?: ViewStyle['backgroundColor']
+  width?: ViewStyle['width']
+  w?: ViewStyle['width']
+  height?: ViewStyle['height']
+  h?: ViewStyle['height']
+  borderColor?: ViewStyle['borderColor']
+  borderWidth?: ViewStyle['borderWidth']
+  borderStyle?: ViewStyle['borderStyle']
+  borderRadius?: ViewStyle['borderRadius']
+  br?: ViewStyle['borderRadius']
+  alignSelf?: ViewStyle['alignSelf']
+  alignItems?: ViewStyle['alignItems']
+  justifyContent?: ViewStyle['justifyContent']
+  flex?: ViewStyle['flex']
+  flexShrink?: ViewStyle['flexShrink']
+  flexGrow?: ViewStyle['flexGrow']
+  flexBasis?: ViewStyle['flexBasis']
+  flexWrap?: ViewStyle['flexWrap']
+  gap?: ViewStyle['gap']
+  m?: ViewStyle['margin']
+  mt?: ViewStyle['marginTop']
+  mb?: ViewStyle['marginBottom']
+  ml?: ViewStyle['marginLeft']
+  mr?: ViewStyle['marginRight']
+  mx?: ViewStyle['marginHorizontal']
+  my?: ViewStyle['marginVertical']
+  margin?: ViewStyle['margin']
+  marginVertical?: ViewStyle['marginVertical']
+  marginHorizontal?: ViewStyle['marginHorizontal']
+  marginTop?: ViewStyle['marginTop']
+  marginBottom?: ViewStyle['marginBottom']
+  marginLeft?: ViewStyle['marginLeft']
+  marginRight?: ViewStyle['marginRight']
+  p?: ViewStyle['padding']
+  pt?: ViewStyle['paddingVertical']
+  pb?: ViewStyle['paddingVertical']
+  pl?: ViewStyle['paddingLeft']
+  pr?: ViewStyle['paddingRight']
+  px?: ViewStyle['paddingHorizontal']
+  py?: ViewStyle['paddingVertical']
+  padding?: ViewStyle['padding']
+  paddingVertical?: ViewStyle['paddingVertical']
+  paddingHorizontal?: ViewStyle['paddingHorizontal']
+  paddingTop?: ViewStyle['paddingTop']
+  paddingBottom?: ViewStyle['paddingBottom']
+  paddingLeft?: ViewStyle['paddingLeft']
+  paddingRight?: ViewStyle['paddingRight']
+  children?: React.ReactNode
+  // style?: ViewStyle
+  style?: StyleProp<ViewStyle>
+  align?: 'center' | 'vCenter' | 'hCenter'
+}
+
+function mapProps(props: StackProps) {
+  const stylesArr: any[] = []
+
+  Object.entries(props).forEach(([key, value]) => {
+    if (value == null) return
+
+    const fn = (stackStyles as any)[key]
+    if (typeof fn === 'function') {
+      stylesArr.push(fn(value))
+    }
+  })
+
+  return stylesArr
+}
+
+const VStack = ({children, style, align, ...props}: StackProps) => {
+  stackStyles.useVariants({align})
+  const styleArr = useMemo(() => mapProps(props), [props])
+
+  return (
+    <View style={[stackStyles.stack, stackStyles.vstack, styleArr, style]}>
+      {children}
+    </View>
+  )
+}
+
+const HStack = ({children, style, align, ...props}: StackProps) => {
+  stackStyles.useVariants({align})
+  const styleArr = useMemo(() => mapProps(props), [props])
+
+  return (
+    <View style={[stackStyles.stack, stackStyles.hstack, styleArr, style]}>
+      {children}
+    </View>
+  )
+}
+
+const stackStyles = StyleSheet.create({
+  stack: {},
+  vstack: {
+    flexDirection: 'column',
+    variants: {
+      align: {
+        center: {
+          alignItems: 'center',
+          justifyContent: 'center',
+        },
+        vCenter: {
+          justifyContent: 'center',
+        },
+        hCenter: {
+          alignItems: 'center',
+        },
+      },
+    },
+  },
+  hstack: {
+    flexDirection: 'row',
+    variants: {
+      align: {
+        center: {
+          alignItems: 'center',
+          justifyContent: 'center',
+        },
+        vCenter: {
+          alignItems: 'center',
+        },
+        hCenter: {
+          justifyContent: 'center',
+        },
+      },
+    },
+  },
+
+  backgroundColor: value => ({
+    backgroundColor: value,
+  }),
+  bg: value => ({
+    backgroundColor: value,
+  }),
+
+  width: value => ({
+    width: value,
+  }),
+  w: value => ({
+    width: value,
+  }),
+  height: value => ({
+    height: value,
+  }),
+  h: value => ({
+    height: value,
+  }),
+
+  borderColor: value => ({
+    borderColor: value,
+  }),
+  borderWidth: value => ({
+    borderWidth: value,
+  }),
+  borderStyle: value => ({
+    borderStyle: value,
+  }),
+  borderRadius: value => ({
+    borderRadius: value,
+  }),
+  br: value => ({
+    borderRadius: value,
+  }),
+
+  flex: value => ({
+    flex: value,
+  }),
+  flexShrink: value => ({
+    flexShrink: value,
+  }),
+  flexGrow: value => ({
+    flexGrow: value,
+  }),
+  flexBasis: value => ({
+    flexBasis: value,
+  }),
+  flexWrap: value => ({
+    flexWrap: value,
+  }),
+  alignSelf: value => ({
+    alignSelf: value,
+  }),
+  alignItems: value => ({
+    alignItems: value,
+  }),
+  justifyContent: value => ({
+    justifyContent: value,
+  }),
+  gap: value => ({
+    gap: value,
+  }),
+
+  m: value => ({
+    margin: value,
+  }),
+  mt: value => ({
+    marginTop: value,
+  }),
+  mb: value => ({
+    marginBottom: value,
+  }),
+  ml: value => ({
+    marginLeft: value,
+  }),
+  mr: value => ({
+    marginRight: value,
+  }),
+  mx: value => ({
+    marginHorizontal: value,
+  }),
+  my: value => ({
+    marginVertical: value,
+  }),
+  margin: value => ({
+    margin: value,
+  }),
+  marginVertical: value => ({
+    marginVertical: value,
+  }),
+  marginHorizontal: value => ({
+    marginHorizontal: value,
+  }),
+  marginLeft: value => ({
+    marginLeft: value,
+  }),
+  marginRight: value => ({
+    marginRight: value,
+  }),
+  marginTop: value => ({
+    marginTop: value,
+  }),
+  marginBottom: value => ({
+    marginBottom: value,
+  }),
+
+  p: value => ({
+    padding: value,
+  }),
+  pt: value => ({
+    paddingTop: value,
+  }),
+  pb: value => ({
+    paddingBottom: value,
+  }),
+  pl: value => ({
+    paddingLeft: value,
+  }),
+  pr: value => ({
+    paddingRight: value,
+  }),
+  px: value => ({
+    paddingHorizontal: value,
+  }),
+  py: value => ({
+    paddingVertical: value,
+  }),
+  padding: value => ({
+    padding: value,
+  }),
+  paddingHorizontal: value => ({
+    paddingHorizontal: value,
+  }),
+  paddingVertical: value => ({
+    paddingVertical: value,
+  }),
+  paddingLeft: value => ({
+    paddingLeft: value,
+  }),
+  paddingRight: value => ({
+    paddingRight: value,
+  }),
+  paddingTop: value => ({
+    paddingTop: value,
+  }),
+  paddingBottom: value => ({
+    paddingBottom: value,
+  }),
+})
+
+export {VStack, HStack}

package/lib/theme/Button.recipe.tsx

@@ -9,6 +9,7 @@ export const ButtonDefaultVariants = {
 export const ButtonStyles = StyleSheet.create(theme => ({
   container: (colorPalette: PalettesWithNestedKeys) => ({
     borderRadius: 12,
+
     variants: {
       variant: {
         solid: {
@@ -24,6 +25,12 @@ export const ButtonStyles = StyleSheet.create(theme => ({
         subtle: {
           backgroundColor: theme.colors[colorPalette]['a3'],
         },
+        icon: {
+          backgroundColor: 'transparent',
+          borderWidth: 1,
+          borderColor: theme.colors[colorPalette].a7,
+          borderRadius: theme.radii.full,
+        },
       },
       size: {
         xs: {
@@ -103,7 +110,7 @@ export const ButtonStyles = StyleSheet.create(theme => ({
     variants: {
       variant: {
         solid: {
-          color: theme.colors[colorPalette].fg,
+          color: theme.colors.fg.default,
         },
         outline: {
           color: theme.colors[colorPalette].text,
@@ -114,6 +121,9 @@ export const ButtonStyles = StyleSheet.create(theme => ({
         subtle: {
           color: theme.colors[colorPalette].text,
         },
+        icon: {
+          color: theme.colors[colorPalette].text,
+        },
       },
       disabled: {
         true: {},

package/lib/theme/CircleProgress.recipe.tsx

@@ -12,8 +12,8 @@ const circleProgressTokens = createCircleProgressTokens({
         progressStrokeWidth: 8,
       },
       md: {
-        trackStrokeWidth: 20,
-        progressStrokeWidth: 30,
+        trackStrokeWidth: 18,
+        progressStrokeWidth: 16,
       },
       lg: {
         trackStrokeWidth: 40,
@@ -22,7 +22,7 @@ const circleProgressTokens = createCircleProgressTokens({
     },
     variant: {
       solid: {
-        trackColor: 'transparent',
+        trackColor: 'bg.emphasized',
         progressColor: 'colorPalette.9',
       },
       outline: {

package/lib/theme/Drawer.recipe.tsx

@@ -0,0 +1,107 @@
+import {StyleSheet} from 'react-native-unistyles'
+import {PalettesWithNestedKeys} from '../style/varia/types'
+
+export const DrawerTokens = {
+  defaultProps: {
+    variant: 'solid',
+    animation: 'defaultSpring',
+  },
+  variants: {
+    animation: {
+      defaultSpring: {
+        type: 'withSpring' as const,
+        props: {
+          damping: 20,
+          stiffness: 200,
+          mass: 1,
+          overshootClamping: true,
+        },
+      },
+      slowSpring: {
+        type: 'withSpring' as const,
+        props: {
+          damping: 200,
+          stiffness: 20,
+          mass: 10,
+          overshootClamping: true,
+        },
+      },
+      defaultTiming: {
+        type: 'withTiming' as const,
+        props: {
+          duration: 1000,
+        },
+      },
+    },
+  },
+} as const
+export const DrawerStyles = 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: {
+          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',
+        },
+      },
+    },
+  }),
+  overlay: (colorPalette: PalettesWithNestedKeys) => ({
+    backgroundColor: theme.colors.backdrop,
+    variants: {
+      variant: {
+        solid: {},
+        subtle: {
+          backgroundColor: '#00000040',
+        },
+        card: {
+          backgroundColor: '#00000020',
+        },
+        new: {
+          backgroundColor: '#00000020',
+        },
+      },
+    },
+  }),
+}))

package/lib/theme/Field.recipe.tsx

@@ -23,7 +23,16 @@ export const FieldStyles = StyleSheet.create(theme => ({
     color: theme.colors.fg.default,
     variants: {
       variant: {
-        solid: {},
+        solid: {
+          // transform: [{translateY: theme.spacing['3.5']}],
+          // marginLeft: theme.spacing['3'],
+          // paddingHorizontal: theme.spacing['1'],
+          backgroundColor: theme.colors.bg.default,
+          zIndex: 10,
+          flex: 0,
+          width: 'auto',
+          alignSelf: 'baseline',
+        },
       },
       size: {
         xs: {
@@ -34,9 +43,15 @@ export const FieldStyles = StyleSheet.create(theme => ({
         },
         md: {
           fontSize: theme.fontSizes.md,
+          transform: [{translateY: theme.spacing['4.5']}],
+          marginLeft: theme.spacing['2'],
+          paddingHorizontal: theme.spacing['1'],
         },
         lg: {
-          fontSize: theme.fontSizes.lg,
+          fontSize: theme.fontSizes['2xl'],
+          transform: [{translateY: theme.spacing['5']}],
+          marginLeft: theme.spacing['2.5'],
+          paddingHorizontal: theme.spacing['1'],
         },
       },
     },

package/lib/theme/Input.recipe.tsx

@@ -5,12 +5,14 @@ import {textStyle} from '../style/varia/textStyles'
 export const InputDefaultVariants = {
   variant: 'solid',
   size: 'md',
-  spacing: 'md',
 } as const
 
 export const InputStyles = StyleSheet.create(theme => ({
   placeholder: (colorPalette: PalettesWithNestedKeys) => ({
     variants: {
+      variant: {
+        solid: {},
+      },
       invalid: {
         true: {
           color: theme.colors.fg.error,
@@ -23,6 +25,8 @@ export const InputStyles = StyleSheet.create(theme => ({
         md: {},
         lg: {},
         xl: {},
+        '2xl': {},
+        flex: {},
       },
     },
   }),
@@ -31,8 +35,10 @@ export const InputStyles = StyleSheet.create(theme => ({
     borderWidth: 1,
     borderRadius: 4,
     color: theme.colors.fg.default,
-    lineHeight: 10,
     variants: {
+      variant: {
+        solid: {},
+      },
       focused: {
         true: {
           borderColor: theme.colors[colorPalette].default,
@@ -71,7 +77,7 @@ export const InputStyles = StyleSheet.create(theme => ({
         md: {
           paddingHorizontal: theme.sizes[3],
           minHeight: theme.sizes[10],
-          maxHeight: theme.sizes[10],
+          maxHeight: theme.sizes[20],
           minWidth: theme.sizes[10],
           fontSize: theme.fontSizes.md,
         },
@@ -97,6 +103,9 @@ export const InputStyles = StyleSheet.create(theme => ({
           minWidth: theme.sizes[16],
           ...textStyle['3xl'],
         },
+        flex: {
+          paddingHorizontal: theme.sizes[2],
+        },
       },
     },
   }),

package/lib/theme/NumberInput.recipe.tsx

@@ -27,6 +27,7 @@ export const NumberInputStyles = StyleSheet.create(theme => ({
         md: {},
         lg: {},
         xl: {},
+        flex: {},
       },
     },
   }),
@@ -63,6 +64,9 @@ export const NumberInputStyles = StyleSheet.create(theme => ({
           minWidth: theme.sizes[12],
           height: theme.sizes[12],
         },
+        flex: {
+          padding: theme.sizes[0.5],
+        },
       },
     },
   }),
@@ -82,6 +86,7 @@ export const NumberInputStyles = StyleSheet.create(theme => ({
         md: {},
         lg: {},
         xl: {},
+        flex: {},
       },
     },
     compoundVariants: [
@@ -121,6 +126,7 @@ export const NumberInputStyles = StyleSheet.create(theme => ({
         md: {},
         lg: {},
         xl: {},
+        flex: {},
       },
     },
     compoundVariants: [
@@ -150,9 +156,7 @@ export const NumberInputStyles = StyleSheet.create(theme => ({
     variants: {
       distribution: {
         vertical: {},
-        horizontal: {
-          flex: 1,
-        },
+        horizontal: {},
       },
       variant: {
         solid: {
@@ -185,6 +189,7 @@ export const NumberInputStyles = StyleSheet.create(theme => ({
           minHeight: theme.sizes[12],
           maxHeight: theme.sizes[12],
         },
+        flex: {},
       },
     },
   }),

package/lib/theme/RadioGroup.recipe.tsx

@@ -30,11 +30,12 @@ export const RadioGroupStyles = StyleSheet.create(theme => ({
         lg: {
           gap: theme.sizes[4],
         },
+        nosize: {},
       },
     },
   }),
 
-  item: (colorPalette: PalettesWithNestedKeys) => ({
+  item: (colorPalette: PalettesWithNestedKeys, pressed: boolean) => ({
     variants: {
       variant: {
         solid: {},
@@ -55,6 +56,9 @@ export const RadioGroupStyles = StyleSheet.create(theme => ({
         lg: {
           gap: theme.sizes[4],
         },
+        nosize: {
+          gap: theme.sizes[2],
+        },
       },
     },
     compoundVariants: [
@@ -93,6 +97,7 @@ export const RadioGroupStyles = StyleSheet.create(theme => ({
         sm: {width: theme.sizes[4], height: theme.sizes[4]},
         md: {width: theme.sizes[5], height: theme.sizes[5]},
         lg: {width: theme.sizes[6], height: theme.sizes[6]},
+        nosize: {width: theme.sizes[5], height: theme.sizes[5]},
       },
       checked: {
         true: {},
@@ -125,6 +130,7 @@ export const RadioGroupStyles = StyleSheet.create(theme => ({
         sm: {width: theme.sizes[2], height: theme.sizes[2]},
         md: {width: theme.sizes[3], height: theme.sizes[3]},
         lg: {width: theme.sizes['3.5'], height: theme.sizes['3.5']},
+        nosize: {width: theme.sizes[3], height: theme.sizes[3]},
       },
       checked: {
         true: {},

package/lib/theme/Select.recipe.tsx

@@ -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: {},
       },
     },
   }),