react-native-varia 0.0.1 → 0.2.1

package/lib/theme/NumberInput.recipe.tsx

@@ -0,0 +1,191 @@
+import {StyleSheet} from 'react-native-unistyles'
+import {PalettesWithNestedKeys} from '../style/varia/types'
+
+export const NumberInputDefaultVariants = {
+  variant: 'solid',
+  size: 'md',
+  distribution: 'horizontal',
+} as const
+export const NumberInputStyles = StyleSheet.create(theme => ({
+  container: (colorPalette: PalettesWithNestedKeys) => ({
+    variants: {
+      distribution: {
+        vertical: {
+          flexDirection: 'column',
+        },
+        horizontal: {
+          flexDirection: 'row',
+        },
+      },
+      variant: {
+        solid: {},
+        outline: {
+          gap: 5,
+        },
+      },
+      size: {
+        md: {},
+        lg: {},
+        xl: {},
+      },
+    },
+  }),
+  buttons: (colorPalette: PalettesWithNestedKeys) => ({
+    variants: {
+      distribution: {
+        vertical: {},
+        horizontal: {},
+      },
+      variant: {
+        solid: {
+          color: theme.colors[colorPalette]['1'],
+          borderColor: theme.colors.border.default,
+          borderWidth: 1,
+          borderRadius: theme.radii.sm,
+        },
+        outline: {
+          color: theme.colors[colorPalette]['1'],
+          borderColor: theme.colors.border.default,
+          borderWidth: 1,
+          borderRadius: theme.radii.sm,
+        },
+      },
+      size: {
+        md: {
+          minWidth: theme.sizes[10],
+          height: theme.sizes[10],
+        },
+        lg: {
+          minWidth: theme.sizes[11],
+          height: theme.sizes[11],
+        },
+        xl: {
+          minWidth: theme.sizes[12],
+          height: theme.sizes[12],
+        },
+      },
+    },
+  }),
+  decreaseTrigger: (colorPalette: PalettesWithNestedKeys) => ({
+    variants: {
+      distribution: {
+        vertical: {},
+        horizontal: {},
+      },
+      variant: {
+        solid: {},
+        outline: {},
+        ghost: {},
+        subtle: {},
+      },
+      size: {
+        md: {},
+        lg: {},
+        xl: {},
+      },
+    },
+    compoundVariants: [
+      {
+        variant: 'solid',
+        distribution: 'horizontal',
+        styles: {
+          borderRightWidth: 0,
+          borderTopRightRadius: 0,
+          borderBottomRightRadius: 0,
+        },
+      },
+      {
+        variant: 'solid',
+        distribution: 'vertical',
+        styles: {
+          borderTopWidth: 0,
+          borderTopLeftRadius: 0,
+          borderTopRightRadius: 0,
+        },
+      },
+    ],
+  }),
+  increaseTrigger: (colorPalette: PalettesWithNestedKeys) => ({
+    variants: {
+      distribution: {
+        vertical: {},
+        horizontal: {},
+      },
+      variant: {
+        solid: {},
+        outline: {},
+        ghost: {},
+        subtle: {},
+      },
+      size: {
+        md: {},
+        lg: {},
+        xl: {},
+      },
+    },
+    compoundVariants: [
+      {
+        variant: 'solid',
+        distribution: 'horizontal',
+        styles: {
+          borderLeftWidth: 0,
+          borderTopLeftRadius: 0,
+          borderBottomLeftRadius: 0,
+        },
+      },
+      {
+        variant: 'solid',
+        distribution: 'vertical',
+        styles: {
+          borderBottomWidth: 0,
+          borderBottomLeftRadius: 0,
+          borderBottomRightRadius: 0,
+        },
+      },
+    ],
+  }),
+  input: (colorPalette: PalettesWithNestedKeys) => ({
+    color: 'white',
+    alignSelf: 'stretch',
+    variants: {
+      distribution: {
+        vertical: {},
+        horizontal: {
+          flex: 1,
+        },
+      },
+      variant: {
+        solid: {
+          color: theme.colors.fg.default,
+          borderColor: theme.colors.border.default,
+          borderWidth: 1,
+          textAlign: 'center',
+        },
+        outline: {
+          color: theme.colors.fg.default,
+          borderRadius: theme.radii.sm,
+          borderColor: theme.colors.border.default,
+          borderWidth: 1,
+          textAlign: 'center',
+        },
+      },
+      size: {
+        md: {
+          fontSize: theme.fontSizes.md,
+          minHeight: theme.sizes[10],
+          maxHeight: theme.sizes[10],
+        },
+        lg: {
+          fontSize: theme.fontSizes.md,
+          minHeight: theme.sizes[11],
+          maxHeight: theme.sizes[11],
+        },
+        xl: {
+          fontSize: theme.fontSizes.lg,
+          minHeight: theme.sizes[12],
+          maxHeight: theme.sizes[12],
+        },
+      },
+    },
+  }),
+}))

package/lib/theme/RadioGroup.recipe.tsx

@@ -0,0 +1,163 @@
+import {StyleSheet} from 'react-native-unistyles'
+import {PalettesWithNestedKeys} from '../style/varia/types'
+import {textStyle} from '../style/varia/textStyles'
+
+export const RadioGroupDefaultVariants = {
+  variant: 'outline',
+  size: 'md',
+  checked: false,
+} as const
+
+export const RadioGroupStyles = StyleSheet.create(theme => ({
+  container: (colorPalette: PalettesWithNestedKeys) => ({
+    variants: {
+      variant: {
+        solid: {},
+        outline: {},
+        subtle: {},
+      },
+      checked: {
+        true: {},
+        false: {},
+      },
+      size: {
+        sm: {
+          gap: theme.sizes[2],
+        },
+        md: {
+          gap: theme.sizes[3],
+        },
+        lg: {
+          gap: theme.sizes[4],
+        },
+      },
+    },
+  }),
+
+  item: (colorPalette: PalettesWithNestedKeys) => ({
+    variants: {
+      variant: {
+        solid: {},
+        outline: {},
+        subtle: {},
+      },
+      checked: {
+        true: {},
+        false: {},
+      },
+      size: {
+        sm: {
+          gap: theme.sizes[2],
+        },
+        md: {
+          gap: theme.sizes[3],
+        },
+        lg: {
+          gap: theme.sizes[4],
+        },
+      },
+    },
+    compoundVariants: [
+      {
+        variant: 'solid',
+        checked: true,
+        styles: {},
+      },
+      {
+        variant: 'outline',
+        checked: true,
+        styles: {},
+      },
+      {
+        variant: 'subtle',
+        checked: true,
+        styles: {},
+      },
+    ],
+  }),
+
+  control: (colorPalette: PalettesWithNestedKeys) => ({
+    backgroundColor: 'transparent',
+    borderColor: theme.colors.border.default,
+    borderWidth: 1,
+    borderRadius: theme.radii.full,
+    alignItems: 'center',
+    justifyContent: 'center',
+    variants: {
+      variant: {
+        solid: {borderColor: theme.colors[colorPalette]['7']},
+        outline: {borderColor: theme.colors[colorPalette]['7']},
+        subtle: {borderColor: theme.colors[colorPalette]['5']},
+      },
+      size: {
+        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]},
+      },
+      checked: {
+        true: {},
+        false: {},
+      },
+    },
+    compoundVariants: [
+      {
+        variant: 'outline',
+        checked: true,
+        styles: {borderColor: theme.colors[colorPalette].default},
+      },
+      {
+        variant: 'solid',
+        checked: true,
+        styles: {borderColor: theme.colors[colorPalette].default},
+      },
+    ],
+  }),
+
+  indicator: (colorPalette: PalettesWithNestedKeys) => ({
+    borderRadius: theme.radii.full,
+    variants: {
+      variant: {
+        solid: {backgroundColor: theme.colors[colorPalette].fg},
+        outline: {backgroundColor: theme.colors[colorPalette].default},
+        subtle: {backgroundColor: theme.colors[colorPalette].fg},
+      },
+      size: {
+        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']},
+      },
+      checked: {
+        true: {},
+        false: {display: 'none'},
+      },
+    },
+  }),
+
+  itemText: (colorPalette: PalettesWithNestedKeys) => ({
+    color: theme.colors.fg.default,
+    variants: {
+      variant: {
+        solid: {},
+        outline: {},
+        subtle: {},
+      },
+      size: {
+        sm: {
+          ...textStyle.sm,
+        },
+        md: {
+          ...textStyle.md,
+        },
+        lg: {
+          ...textStyle.lg,
+        },
+      },
+      checked: {
+        true: {
+          fontWeight: theme.fontWeights.semibold,
+        },
+        false: {},
+      },
+    },
+  }),
+}))

package/lib/theme/ReText.recipe.tsx

@@ -1,7 +1,4 @@
-const reTextTokens = {
-  defaultProps: {
-    color: 'black',
-  },
-};
-
-export default reTextTokens;
+export {TextStyles as ReTextStyles} from './Text.recipe'
+export const DefaultTextVariants = {
+  size: 'md',
+} as const

package/lib/theme/Select.recipe.tsx

@@ -0,0 +1,121 @@
+import {StyleSheet} from 'react-native-unistyles'
+import {PalettesWithNestedKeys} from '../style/varia/types'
+import {textStyle} from '../style/varia/textStyles'
+
+export const SelectDefaultVariants = {
+  variant: 'outline',
+  size: 'md',
+} as const
+
+export const SelectStyles = StyleSheet.create((theme, rt) => ({
+  trigger: (colorPalette: PalettesWithNestedKeys) => ({
+    variants: {
+      variant: {
+        outline: {
+          borderColor: theme.colors.border.default,
+          borderWidth: 1,
+          borderRadius: theme.radii.sm,
+        },
+        ghost: {
+          backgroundColor: 'transparent',
+        },
+      },
+      size: {
+        sm: {
+          height: theme.sizes[9],
+        },
+        md: {
+          height: theme.sizes[10],
+        },
+        lg: {
+          height: theme.sizes[11],
+        },
+      },
+    },
+  }),
+
+  overlay: (colorPalette: PalettesWithNestedKeys) => ({
+    backgroundColor: 'transparent',
+    variants: {
+      variant: {
+        outline: {},
+        ghost: {},
+      },
+      size: {
+        sm: {},
+        md: {},
+        lg: {},
+      },
+    },
+  }),
+
+  content: (colorPalette: PalettesWithNestedKeys) => ({
+    backgroundColor: theme.colors.bg.default,
+    maxHeight: '60%',
+    borderRadius: theme.radii.md,
+    marginHorizontal: 20,
+    variants: {
+      variant: {
+        outline: {
+          backgroundColor: 'blue',
+        },
+        ghost: {
+          backgroundColor: 'pink',
+        },
+      },
+      size: {
+        sm: {
+          padding: theme.spacing['0.5'],
+        },
+        md: {
+          padding: theme.spacing[1],
+        },
+        lg: {
+          padding: theme.spacing['1.5'],
+        },
+      },
+    },
+  }),
+
+  item: (colorPalette: PalettesWithNestedKeys, selected: boolean) => ({
+    paddingHorizontal: 8,
+    backgroundColor: selected ? theme.colors.gray.a3 : 'transparent',
+    variants: {
+      variant: {
+        outline: {},
+        ghost: {},
+      },
+      size: {
+        sm: {
+          height: theme.sizes[9],
+        },
+        md: {
+          height: theme.sizes[10],
+        },
+        lg: {
+          height: theme.sizes[11],
+        },
+      },
+    },
+  }),
+  itemText: (colorPalette: PalettesWithNestedKeys, selected: boolean) => ({
+    color: theme.colors.fg.default,
+    variants: {
+      variant: {
+        outline: {},
+        ghost: {},
+      },
+      size: {
+        sm: {
+          ...textStyle.sm,
+        },
+        md: {
+          ...textStyle.md,
+        },
+        lg: {
+          ...textStyle.md,
+        },
+      },
+    },
+  }),
+}))