react-native-varia 0.5.2 → 0.6.1

package/lib/theme/Slider.recipe.tsx

@@ -1,411 +1,155 @@
 import {StyleSheet} from 'react-native-unistyles'
 import {PalettesWithNestedKeys} from '../style/varia/types'
+import {generateCompoundVariants} from '../style/varia/utils'
 
 export const SliderDefaultVariants = {
   size: 'md',
   variant: 'solid',
 } as const
-export const SliderStyles = StyleSheet.create(theme => ({
-  container: (colorPalette: PalettesWithNestedKeys) => ({
-    backgroundColor: theme.colors.bg.emphasized,
-    borderRadius: theme.radii.xl,
-    variants: {
-      axis: {
-        x: {},
-        y: {},
-      },
-      variant: {
-        solid: {},
-        outline: {
-          borderRadius: theme.radii.sm,
-          borderColor: theme.colors[colorPalette].default,
-          borderWidth: 1,
-        },
-        subtle: {
-          backgroundColor: theme.colors.bg.subtle,
-        },
-      },
-      size: {
-        sm: {
-          borderRadius: theme.radii.lg,
-        },
-        md: {
-          borderRadius: theme.radii.xl,
-        },
-        lg: {
-          borderRadius: theme.radii['2xl'],
-        },
-        flex: {},
-        minimal: {},
-      },
+
+export const SliderStyles = StyleSheet.create(theme => {
+  const containerSizes = {
+    sm: {x: {height: theme.sizes[4]}, y: {width: theme.sizes[4]}},
+    md: {x: {height: theme.sizes[5]}, y: {width: theme.sizes[5]}},
+    lg: {x: {height: theme.sizes[8]}, y: {width: theme.sizes[8]}},
+    flex: {x: {minHeight: 50}, y: {minWidth: 50}},
+    minimal: {x: {}, y: {}},
+  }
+
+  const maximumTrackSizes = {
+    sm: {x: {height: theme.sizes[4]}, y: {width: theme.sizes[4]}},
+    md: {x: {height: theme.sizes[2]}, y: {width: theme.sizes[2]}},
+    lg: {x: {height: theme.sizes[4]}, y: {width: theme.sizes[4]}},
+    flex: {x: {}, y: {}},
+    minimal: {x: {}, y: {}},
+  }
+
+  const minimumTrackSizes = {
+    sm: {x: {height: theme.sizes[4]}, y: {width: theme.sizes[4]}},
+    // md: {x: {height: theme.sizes[5]}, y: {width: theme.sizes[5]}},
+    md: {x: {height: '100%'}, y: {width: '100%'}},
+    lg: {
+      x: {height: theme.sizes[8]},
+      y: {width: theme.sizes[8]},
     },
-    compoundVariants: [
-      {
-        size: 'sm',
-        variant: 'outline',
-        styles: {
-          borderRadius: theme.radii.sm,
-        },
-      },
-      {
-        size: 'md',
-        variant: 'outline',
-        styles: {
-          borderRadius: theme.radii.sm,
-        },
-      },
-      {
-        size: 'lg',
-        variant: 'outline',
-        styles: {
-          borderRadius: theme.radii.sm,
-        },
-      },
-      {
-        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: 'flex',
-        styles: {
-          minHeight: 50,
-        },
-      },
-      {
-        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: 'flex',
-        styles: {
-          minWidth: 50,
-        },
-      },
-    ],
-  }),
-  maximumTrack: (colorPalette: PalettesWithNestedKeys) => ({
-    backgroundColor: theme.colors.bg.emphasized,
-    variants: {
-      axis: {
-        x: {},
-        y: {},
-      },
-      variant: {
-        solid: {},
-        outline: {},
-        subtle: {
-          backgroundColor: theme.colors.bg.subtle,
-        },
-      },
-      size: {
-        sm: {},
-        md: {},
-        lg: {},
-        flex: {},
-        minimal: {},
-      },
+    flex: {x: {flex: 1}, y: {flex: 1}},
+    minimal: {
+      x: {height: theme.sizes[8]},
+      y: {width: theme.sizes[8]},
     },
-    compoundVariants: [
-      {
-        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: 'flex',
-        styles: {},
-      },
-      {
-        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],
-        },
-      },
-    ],
-  }),
-  minimumTrack: (colorPalette: PalettesWithNestedKeys) => ({
-    backgroundColor: theme.colors[colorPalette].default,
-    variants: {
-      axis: {
-        x: {
-          // borderBottomLeftRadius: theme.radii.xl,
-          // borderBottomRightRadius: 0,
-          // borderTopLeftRadius: theme.radii.xl,
-        },
-        y: {
-          // borderBottomLeftRadius: theme.radii.xl,
-          // borderBottomRightRadius: theme.radii.xl,
-          // borderTopLeftRadius: 0,
-        },
-      },
-      variant: {
-        solid: {},
-        outline: {},
-        subtle: {},
-      },
-      size: {
-        sm: {},
-        md: {},
-        lg: {},
-        flex: {},
-        minimal: {
-          // borderRadius: theme.radii.sm,
-        },
-      },
+  }
+
+  const thumbSizes = {
+    sm: {
+      x: {width: theme.sizes[4], height: theme.sizes[4]},
+      y: {width: theme.sizes[6], height: theme.sizes[6]},
     },
-    compoundVariants: [
-      {
-        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: 'flex',
-        styles: {},
-      },
-      {
-        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: 'flex',
-        styles: {},
-      },
-    ],
-  }),
-  thumb: (colorPalette: PalettesWithNestedKeys) => ({
-    variants: {
-      axis: {
-        x: {},
-        y: {},
-      },
-      variant: {
-        solid: {
-          backgroundColor: theme.colors.bg.default,
-          borderColor: theme.colors[colorPalette].default,
-          borderRadius: theme.radii.full,
-          borderWidth: 2,
-        },
-        subtle: {
-          backgroundColor: theme.colors[colorPalette].default,
-        },
-        outline: {
-          backgroundColor: theme.colors[colorPalette][11],
-        },
-      },
-      size: {
-        sm: {},
-        md: {},
-        lg: {},
-        flex: {},
-        minimal: {},
-      },
+    md: {
+      x: {width: theme.sizes[5], height: theme.sizes[5]},
+      y: {width: theme.sizes[5], height: theme.sizes[5]},
     },
-    compoundVariants: [
-      {
-        axis: 'x',
-        size: 'sm',
-        styles: {
-          width: theme.sizes[4],
-          height: theme.sizes[4],
-        },
-      },
-      {
-        axis: 'x',
-        size: 'md',
-        styles: {
-          width: theme.sizes[5],
-          height: theme.sizes[5],
-        },
-      },
-      {
-        axis: 'x',
-        size: 'lg',
-        styles: {
-          width: theme.sizes[8],
-          height: theme.sizes[8],
-        },
-      },
-      {
-        axis: 'x',
-        size: 'flex',
-        styles: {
-          width: 30,
-        },
-      },
-      {
-        axis: 'x',
-        size: 'minimal',
-        styles: {
-          width: 0,
-        },
-      },
-      {
-        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: 'flex',
-        styles: {
-          alignSelf: 'stretch',
-          height: 30,
-        },
-      },
-      {
-        axis: 'y',
-        size: 'minimal',
-        styles: {
-          alignSelf: 'stretch',
-          height: 5,
-        },
-      },
-    ],
-  }),
-  step: (colorPalette: PalettesWithNestedKeys) => ({
-    backgroundColor: theme.colors.bg.default,
-    variants: {
-      axis: {
-        x: {},
-        y: {},
-      },
-      variant: {
-        solid: {
-          backgroundColor: theme.colors.bg.default,
-        },
-        subtle: {},
-        outline: {},
-      },
-      size: {
-        sm: {},
-        md: {},
-        lg: {},
-        flex: {},
-        minimal: {},
-      },
+    lg: {
+      x: {width: theme.sizes[8], height: theme.sizes[8]},
+      y: {width: theme.sizes[8], height: theme.sizes[8]},
     },
-  }),
-}))
+    flex: {x: {width: 30, flex: 1}, y: {height: 30, alignSelf: 'stretch'}},
+    minimal: {x: {width: 0}, y: {height: 0}},
+  }
+
+  return {
+    container: (colorPalette: PalettesWithNestedKeys) => ({
+      borderRadius: theme.radii.xl,
+      variants: {
+        axis: {x: {}, y: {}},
+        variant: {
+          solid: {},
+          outline: {
+            borderRadius: theme.radii.sm,
+            borderColor: theme.colors[colorPalette].default,
+            borderWidth: 1,
+          },
+          subtle: {backgroundColor: theme.colors.bg.subtle},
+        },
+        size: {
+          sm: {borderRadius: theme.radii.lg},
+          md: {borderRadius: theme.radii.xl},
+          lg: {borderRadius: theme.radii['2xl']},
+          flex: {},
+          minimal: {},
+        },
+      },
+      compoundVariants: [
+        {
+          size: 'sm',
+          variant: 'outline',
+          styles: {borderRadius: theme.radii.sm},
+        },
+        {
+          size: 'md',
+          variant: 'outline',
+          styles: {borderRadius: theme.radii.sm},
+        },
+        {
+          size: 'lg',
+          variant: 'outline',
+          styles: {borderRadius: theme.radii.sm},
+        },
+        ...generateCompoundVariants(containerSizes),
+      ],
+    }),
+
+    maximumTrack: (colorPalette: PalettesWithNestedKeys) => ({
+      variants: {
+        axis: {x: {}, y: {}},
+        variant: {
+          solid: {backgroundColor: theme.colors.bg.emphasized},
+          outline: {},
+          subtle: {backgroundColor: theme.colors.bg.subtle},
+        },
+        size: {sm: {}, md: {}, lg: {}, flex: {}, minimal: {}},
+      },
+      compoundVariants: generateCompoundVariants(maximumTrackSizes),
+    }),
+
+    minimumTrack: (colorPalette: PalettesWithNestedKeys) => ({
+      backgroundColor: theme.colors[colorPalette].default,
+      variants: {
+        axis: {x: {}, y: {}},
+        variant: {solid: {}, outline: {}, subtle: {}},
+        size: {sm: {}, md: {}, lg: {}, flex: {}, minimal: {}},
+      },
+      compoundVariants: generateCompoundVariants(minimumTrackSizes),
+    }),
+
+    thumb: (colorPalette: PalettesWithNestedKeys) => ({
+      variants: {
+        axis: {x: {}, y: {}},
+        variant: {
+          solid: {
+            backgroundColor: theme.colors.bg.default,
+            borderColor: theme.colors[colorPalette].default,
+            borderRadius: theme.radii.full,
+            borderWidth: 2,
+          },
+          subtle: {backgroundColor: theme.colors[colorPalette].default},
+          outline: {backgroundColor: theme.colors[colorPalette][11]},
+        },
+        size: {sm: {}, md: {}, lg: {}, flex: {}, minimal: {}},
+      },
+      compoundVariants: generateCompoundVariants(thumbSizes),
+    }),
+
+    step: (colorPalette: PalettesWithNestedKeys) => ({
+      backgroundColor: theme.colors.bg.default,
+      variants: {
+        axis: {x: {}, y: {}},
+        variant: {
+          solid: {backgroundColor: theme.colors.bg.default},
+          subtle: {},
+          outline: {},
+        },
+        size: {sm: {}, md: {}, lg: {}, flex: {}, minimal: {}},
+      },
+    }),
+  }
+})

package/lib/varia/types.ts

@@ -287,3 +287,9 @@ export type rotationDirection = 'clockwise' | 'counterclockwise'
 export type Flex = ViewStyle['flex']
 export type MaxWidth = ViewStyle['maxWidth']
 export type ZIndex = ViewStyle['zIndex']
+
+export type Axis = 'x' | 'y'
+export type SizeEntry = {
+  x?: Record<string, any>
+  y?: Record<string, any>
+}

package/lib/varia/utils.ts

@@ -37,6 +37,7 @@ import {
   ColorScheme,
   CreatePresetDTO,
   CustomColorScheme,
+  SizeEntry,
   ThemeColors,
   ThemePresetDTO,
 } from './types'
@@ -439,3 +440,9 @@ export function getCompoundVariantValue<
 
   return match.styles[propName]
 }
+
+export const generateCompoundVariants = (sizes: Record<string, SizeEntry>) =>
+  Object.entries(sizes).flatMap(([size, axes]) => [
+    {axis: 'x', size, styles: axes.x ?? {}},
+    {axis: 'y', size, styles: axes.y ?? {}},
+  ])

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-native-varia",
-  "version": "0.5.2",
+  "version": "0.6.1",
   "bin": {
     "varia": "bin/cli.js"
   },