react-native-varia 0.6.0 → 0.6.1

package/lib/components/Drawer.tsx

@@ -294,33 +294,30 @@ const DrawerSliderInternal = ({
 
   const initialized = useSharedValue(false)
 
-  const onLayout = () => {
-    if (initialized.value) return
-    const _screenHeight = screenHeight
-    const _screenWidth = screenWidth
-    const _axis = axis
-    const _direction = direction
-    const _snapPoints = snapPoints
+  const contentSize = useSharedValue(0) // altura o ancho del contenido
 
+  const onLayout = () => {
     scheduleOnUI(() => {
       'worklet'
       const measured = measure(viewRef)
-      if (measured) {
-        const {height, width} = measured
-        const size = _axis === 'y' ? height : width
-        const screenSize = _axis === 'y' ? _screenHeight : _screenWidth
-
-        const resolved = _snapPoints.map(p => {
-          if (p === 'hidden') return screenSize * _direction
-          if (p === 'content') return (screenSize - size) * _direction
-          return (p as number) * _direction
-        })
+      if (!measured) return
+
+      contentSize.value = axis === 'y' ? measured.height : measured.width
 
-        resolvedSnapPoints.value = resolved
-        translate.value = resolved[0]
-        context.value = {position: resolved[0], snapPoint: 0}
-        initialized.value = true
+      // recalcular snapPoints
+      const screenSize = axis === 'y' ? screenHeight : screenWidth
+      resolvedSnapPoints.value = snapPoints.map(p => {
+        if (p === 'hidden') return screenSize * direction
+        if (p === 'content') return (screenSize - contentSize.value) * direction
+        return (p as number) * direction
+      })
+
+      // ajustar translate si estaba en hidden
+      if (context.value.snapPoint === 0) {
+        translate.value = resolvedSnapPoints.value[0]
+        context.value.position = resolvedSnapPoints.value[0]
       }
+      if (context.value.snapPoint !== 0) scheduleOnRN(expand)
     })
   }
 
@@ -556,7 +553,6 @@ const styles = StyleSheet.create((theme, rt) => ({
   },
   slider: (zIndex: ZIndex) => ({
     flex: 1,
-    alignSelf: 'stretch',
     alignItems: 'center',
     justifyContent: 'flex-start',
     zIndex,

package/lib/components/Slider.tsx

@@ -112,8 +112,6 @@ const Slider = ({
       'backgroundColor',
     ) || 'transparent'
 
-  console.log(SliderStyles.maximumTrack(colorPalette))
-
   const halfSize = ((axis === 'x' ? thumbWidth : thumbHeight) ?? 0) / 2
 
   const context = useSharedValue({x: 0})
@@ -236,8 +234,6 @@ const Slider = ({
     }
   })
 
-  console.log('maximum color', maximumTrackColor)
-
   return (
     <View
       testID="varia-slider-container"

package/lib/theme/Accordion.recipe.tsx

@@ -6,6 +6,30 @@ export const AccordionDefaultVariants = {
   size: 'md',
 } as const
 export const AccordionStyles = StyleSheet.create(theme => ({
+  groupContainer: (colorPalette: PalettesWithNestedKeys) => ({
+    variants: {
+      variant: {
+        solid: {},
+        outline: {},
+        subtle: {},
+      },
+      size: {
+        sm: {
+          padding: theme.spacing[2],
+        },
+        md: {
+          padding: theme.spacing[2],
+        },
+        lg: {
+          padding: theme.spacing[2],
+        },
+        xl: {
+          padding: theme.spacing[3],
+        },
+        nosize: {},
+      },
+    },
+  }),
   itemContainer: (colorPalette: PalettesWithNestedKeys) => ({
     borderRadius: 12,
     variants: {
@@ -181,4 +205,28 @@ export const AccordionStyles = StyleSheet.create(theme => ({
       },
     ],
   }),
+  innerContent: (colorPalette: PalettesWithNestedKeys) => ({
+    variants: {
+      variant: {
+        solid: {},
+        outline: {},
+        subtle: {},
+      },
+      size: {
+        sm: {
+          padding: theme.spacing[2],
+        },
+        md: {
+          padding: theme.spacing[2],
+        },
+        lg: {
+          padding: theme.spacing[2],
+        },
+        xl: {
+          padding: theme.spacing[3],
+        },
+        nosize: {},
+      },
+    },
+  }),
 }))

package/lib/theme/Drawer.recipe.tsx

@@ -49,6 +49,7 @@ export const DrawerStyles = StyleSheet.create((theme, rt) => ({
     },
   },
   slider: (colorPalette: PalettesWithNestedKeys) => ({
+    alignSelf: 'stretch',
     boxShadow: theme.shadows.sm,
     borderRadius: theme.radii.lg,
     backgroundColor: theme.colors.bg.default,

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/package.json

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