react-native-varia 0.4.3 → 0.4.5

package/lib/components/CircleProgress.tsx

@@ -169,6 +169,11 @@ const styles = StyleSheet.create({
     },
   }),
   childContainer: {
+    position: 'absolute',
+    top: 0,
+    left: 0,
+    right: 0,
+    bottom: 0,
     flexBasis: 'auto',
     justifyContent: 'center',
     alignItems: 'center',

package/lib/components/Drawer.tsx

@@ -9,7 +9,6 @@ import React, {
 import {
   Dimensions,
   Keyboard,
-  Platform,
   TouchableWithoutFeedback,
   View,
 } from 'react-native'
@@ -26,17 +25,14 @@ import Animated, {
 } from 'react-native-reanimated'
 import {scheduleOnRN, scheduleOnUI} from 'react-native-worklets'
 import {DrawerTokens, DrawerStyles} from '../theme/Drawer.recipe'
-import {PalettesWithNestedKeys} from '../style/varia/types'
+import {PalettesWithNestedKeys, ZIndex} from '../style/varia/types'
 import {
   StyleSheet,
   UnistylesRuntime,
   UnistylesVariants,
 } from 'react-native-unistyles'
 import {HStack} from '../patterns'
-
-/* -----------------------------
- * Types
- * ----------------------------*/
+import {ZINDEXES} from '../style/varia/constants'
 
 export type DrawerRef = {
   expand: () => void | null
@@ -55,12 +51,9 @@ type DrawerContextType = DrawerVariants & {
 type DrawerRootProps = DrawerVariants & {
   colorPalette?: PalettesWithNestedKeys
   children?: React.ReactNode
+  zIndex?: ZIndex
 }
 
-/* -----------------------------
- * Context
- * ----------------------------*/
-
 const DrawerContext = createContext<DrawerContextType | null>(null)
 const useDrawer = () => {
   const ctx = useContext(DrawerContext)
@@ -69,13 +62,10 @@ const useDrawer = () => {
   return ctx
 }
 
-/* -----------------------------
- * Root
- * ----------------------------*/
-
 const DrawerRoot = ({
   colorPalette = 'accent',
   variant = DrawerTokens.defaultProps.variant,
+  zIndex,
   children,
 }: DrawerRootProps) => {
   DrawerStyles.useVariants({variant})
@@ -86,8 +76,9 @@ const DrawerRoot = ({
       colorPalette,
       variant,
       overlayOpacity,
+      zIndex,
     }),
-    [colorPalette, variant],
+    [colorPalette, variant, zIndex],
   )
 
   return (
@@ -95,9 +86,6 @@ const DrawerRoot = ({
   )
 }
 
-/* -----------------------------
- * Positioner
- * ----------------------------*/
 const DrawerPositioner = ({
   children,
   direction,
@@ -147,9 +135,6 @@ const DrawerPositioner = ({
   )
 }
 
-/* -----------------------------
- * Overlay
- * ----------------------------*/
 const AnimatedTouchable = Animated.createAnimatedComponent(
   TouchableWithoutFeedback,
 )
@@ -190,10 +175,6 @@ const DrawerOverlay = ({onPress}: {onPress?: () => void}) => {
   )
 }
 
-/* -----------------------------
- * Slider (gestión independiente)
- * ----------------------------*/
-
 type InternalDrawerSliderProps = {
   axis: 'x' | 'y'
   direction: 1 | -1
@@ -207,6 +188,7 @@ type InternalDrawerSliderProps = {
   children?: React.ReactNode
   ref?: React.RefObject<DrawerRef | null>
   externalTranslate?: SharedValue<number>
+  zIndex?: ZIndex
 }
 
 export type DrawerSliderProps = Omit<
@@ -231,6 +213,7 @@ const DrawerSliderInternal = ({
   children,
   externalTranslate,
   ref,
+  zIndex,
 }: InternalDrawerSliderProps) => {
   const {variant, colorPalette, overlayOpacity} = useDrawer()
 
@@ -489,7 +472,7 @@ const DrawerSliderInternal = ({
         ref={viewRef}
         onLayout={onLayout}
         style={[
-          styles.slider,
+          styles.slider(zIndex || ZINDEXES.drawer),
           blockAnimatedStyle,
           DrawerStyles.slider(colorPalette),
           {pointerEvents: 'auto'},
@@ -523,14 +506,14 @@ const styles = StyleSheet.create((theme, rt) => ({
       _classNames: 'drawer-positioner-base',
     },
   },
-  slider: {
+  slider: (zIndex: ZIndex) => ({
     flex: 1,
     alignSelf: 'stretch',
     alignItems: 'center',
     justifyContent: 'flex-start',
-    zIndex: 100,
+    zIndex,
     _web: {
       _classNames: 'drawer-slider-base',
     },
-  },
+  }),
 }))

package/lib/components/Link.tsx

@@ -40,14 +40,16 @@ const Link = ({
   console.log(color)
   return (
     <TouchableOpacity
+      testID="varia-link"
       onPress={async () => {
         try {
           await Linking.openURL(url)
         } catch {
-          Alert.alert('No se pudo abrir este enlace')
+          Alert.alert('Could not open this link')
         }
       }}>
       <Text
+        testID="varia-link-text"
         size={size}
         variant={variant}
         fontSize={fontSize}

package/lib/components/Modal.tsx

@@ -1,17 +1,13 @@
 import React, {createContext, useContext} from 'react'
-import {
-  TouchableOpacity,
-  TouchableWithoutFeedback,
-  View,
-  StyleSheet as RNStyleSheet,
-} from 'react-native'
+import {TouchableOpacity, TouchableWithoutFeedback, View} from 'react-native'
 import Animated from 'react-native-reanimated'
 import {Portal} from '@gorhom/portal'
 import Svg, {Path} from 'react-native-svg'
 import {StyleSheet, UnistylesVariants} from 'react-native-unistyles'
 import Text from './Text'
 import {ModalStyles, ModalTokens} from '../theme/Modal.recipe'
-import {PalettesWithNestedKeys} from '../style/varia/types'
+import {PalettesWithNestedKeys, ZIndex} from '../style/varia/types'
+import {ZINDEXES} from '../style/varia/constants'
 
 const AnimatedView = Animated.createAnimatedComponent(View)
 type ModalVariants = UnistylesVariants<typeof ModalStyles>
@@ -24,6 +20,7 @@ type ModalRootProps = ModalVariants & {
   portalHostName?: string
   isOpen: boolean
   setIsOpen: (isOpen: boolean) => void
+  zIndex?: ZIndex
   children: React.ReactNode
 }
 
@@ -46,6 +43,7 @@ const ModalRoot = ({
   portalHostName = 'modal',
   isOpen,
   setIsOpen,
+  zIndex,
   children,
 }: ModalRootProps) => {
   ModalStyles.useVariants({
@@ -59,6 +57,7 @@ const ModalRoot = ({
     variant,
     animation,
     setIsOpen,
+    zIndex,
   }
 
   return (
@@ -85,17 +84,25 @@ const ModalOverlay = ({children, ...props}: ModalOverlayProps) => {
     variant,
     animation,
     setIsOpen,
+    zIndex,
   } = {...context, ...props}
 
   ModalStyles.useVariants({variant})
 
   return (
     <AnimatedView
-      style={[styles.overlay, ModalStyles.overlay(colorPalette)]}
+      testID="varia-modal-overlay"
+      style={[
+        styles.overlay(zIndex || ZINDEXES.modal),
+        ModalStyles.overlay(colorPalette),
+      ]}
       entering={ModalTokens.animations.variants[animation]?.enteringOverlay}
       exiting={ModalTokens.animations.variants[animation]?.exitingOverlay}>
       <TouchableWithoutFeedback onPress={() => setIsOpen(false)}>
-        <View style={StyleSheet.absoluteFillObject} />
+        <View
+          testID="varia-modal-backdrop"
+          style={StyleSheet.absoluteFillObject}
+        />
       </TouchableWithoutFeedback>
       {children}
     </AnimatedView>
@@ -125,6 +132,7 @@ const ModalContent = ({children, ...props}: ModalContentProps) => {
 
   return (
     <AnimatedView
+      testID="varia-modal-content"
       style={[styles.content(), ModalStyles.content(colorPalette)]}
       entering={ModalTokens.animations.variants[animation]?.enteringContent}
       exiting={ModalTokens.animations.variants[animation]?.exitingContent}>
@@ -134,7 +142,11 @@ const ModalContent = ({children, ...props}: ModalContentProps) => {
 }
 
 const ModalHeader = ({children}: {children: React.ReactNode}) => {
-  return <View style={styles.header}>{children}</View>
+  return (
+    <View testID="varia-modal-header" style={styles.header}>
+      {children}
+    </View>
+  )
 }
 
 const ModalTitle = ({children, ...props}: {children: React.ReactNode}) => {
@@ -142,7 +154,11 @@ const ModalTitle = ({children, ...props}: {children: React.ReactNode}) => {
   const {variant, colorPalette = 'accent'} = {...context, ...props}
 
   ModalStyles.useVariants({variant})
-  return <Text style={ModalStyles.title(colorPalette)}>{children}</Text>
+  return (
+    <Text testID="varia-modal-title" style={ModalStyles.title(colorPalette)}>
+      {children}
+    </Text>
+  )
 }
 
 type ModalBodyProps = Omit<ModalVariants, 'variant'> & {
@@ -153,7 +169,7 @@ type ModalBodyProps = Omit<ModalVariants, 'variant'> & {
 }
 
 const ModalBody = ({children}: ModalBodyProps) => {
-  return <View>{children}</View>
+  return <View testID="varia-modal-body">{children}</View>
 }
 
 type CloseButtonProps = {
@@ -168,7 +184,7 @@ const CloseButton = ({
   color,
   ...rest
 }: CloseButtonProps) => (
-  <TouchableOpacity onPress={onClose}>
+  <TouchableOpacity testID="varia-modal-close-button" onPress={onClose}>
     <Svg
       width={scale * 24}
       height={scale * 24}
@@ -213,15 +229,15 @@ const ModalCloseTrigger = ({children, style}: ModalCloseTriggerProps) => {
 
 const styles = StyleSheet.create(theme => {
   return {
-    overlay: {
-      ...RNStyleSheet.absoluteFillObject,
-      zIndex: 1000,
+    overlay: (zIndex: ZIndex) => ({
+      ...StyleSheet.absoluteFillObject,
+      zIndex,
       justifyContent: 'center',
       alignItems: 'center',
       _web: {
         _classNames: 'modal-overlay-base',
       },
-    },
+    }),
     content: () => ({
       justifyContent: 'center',
       alignItems: 'center',

package/lib/components/NumberInput.tsx

@@ -125,6 +125,7 @@ const NumberInput = {
           direction,
         }}>
         <View
+          testID="varia-select-root"
           style={[
             simpleNumberInputstyles.rootContainer(flex, alignSelf),
             NumberInputStyles.container(colorPalette),
@@ -177,6 +178,7 @@ const NumberInput = {
     NumberInputStyles.useVariants({variant, size, distribution})
     return (
       <TextInput
+        testID="varia-select-input"
         style={[
           simpleNumberInputstyles.input(childFlex as number),
           NumberInputStyles.input(colorPalette),
@@ -222,6 +224,7 @@ const NumberInput = {
 
     return (
       <Pressable
+        testID="varia-select-increment"
         onPress={() => setValue(value + 1)}
         disabled={max !== undefined && value >= max}
         style={[
@@ -265,6 +268,7 @@ const NumberInput = {
 
     return (
       <Pressable
+        testID="varia-select-decrement"
         onPress={() => setValue(value - 1)}
         disabled={min !== undefined && value <= min}
         style={[

package/lib/components/RadioGroup.tsx

@@ -91,6 +91,7 @@ function Root({
   return (
     <RadioGroupContext.Provider value={contextValue}>
       <View
+        testID="varia-radio-group-root"
         style={[
           styles.root(
             flex,
@@ -139,6 +140,8 @@ function Item({children, value: itemValue}: PublicItemProps) {
 
   return (
     <Pressable
+      aria-checked={value === itemValue}
+      testID={`varia-radio-group-item-${value}`}
       style={({pressed}) => [
         styles.item,
         RadioGroupStyles.item(colorPalette, pressed),
@@ -172,7 +175,9 @@ function Indicator({
   })
 
   return (
-    <View style={RadioGroupStyles.control(colorPalette)}>
+    <View
+      testID="varia-radio-group-indicator"
+      style={RadioGroupStyles.control(colorPalette)}>
       <View style={RadioGroupStyles.indicator(colorPalette)} />
     </View>
   )
@@ -214,7 +219,7 @@ const styles = StyleSheet.create({
     alignSelf?: AlignSelf,
     justifyContent?: ViewStyle['justifyContent'],
     alignItems?: ViewStyle['alignItems'],
-    gap?: number,
+    gap?: Gap,
   ) => ({
     flex,
     flexDirection: direction,

package/lib/components/Select.tsx

@@ -23,8 +23,10 @@ import {
   Flex,
   PalettesWithNestedKeys,
   StackDirection,
+  ZIndex,
 } from '../style/varia/types'
 import {computeFlexSync} from '../style/varia/utils'
+import {ZINDEXES} from '../style/varia/constants'
 
 type SelectVariants = UnistylesVariants<typeof SelectStyles>
 
@@ -47,6 +49,7 @@ interface SelectContextType {
   variant: SelectVariants['variant']
   size: SelectVariants['size']
   flex: Flex
+  zIndex: ZIndex
 }
 
 const SelectContext = createContext<SelectContextType | undefined>(undefined)
@@ -70,6 +73,7 @@ type RootProps = SelectVariants & {
   flex?: Flex
   stretch?: AlignSelf
   direction?: 'row' | 'column'
+  zIndex?: ZIndex
 }
 
 const SelectRoot = ({
@@ -85,6 +89,7 @@ const SelectRoot = ({
   flex = 0,
   stretch,
   direction = 'column',
+  zIndex,
 }: RootProps) => {
   SelectStyles.useVariants({variant, size})
   const [internalValue, setInternalValue] = useState(defaultValue)
@@ -116,7 +121,7 @@ const SelectRoot = ({
   )
 
   return (
-    <View style={[styles.container(flex, stretch)]}>
+    <View style={[styles.container(flex, stretch)]} testID="varia-select-root">
       {trigger &&
         React.cloneElement(trigger as ReactElement<TriggerProps>, {
           isOpen,
@@ -147,8 +152,11 @@ const SelectRoot = ({
               variant,
               size,
               flex,
+              zIndex,
             }}>
-            <View style={styles.portalContainer}>{portalChildren}</View>
+            <View style={styles.portalContainer(zIndex || ZINDEXES.select)}>
+              {portalChildren}
+            </View>
           </SelectContext.Provider>
         </Portal>
       )}
@@ -194,7 +202,8 @@ const SelectTrigger = ({
       style={({pressed}) => [
         styles.input(childFlex),
         SelectStyles.trigger(colorPalette, pressed),
-      ]}>
+      ]}
+      testID="varia-select-trigger">
       <Text>{selected ? selected.label : placeholder}</Text>
     </Pressable>
   )
@@ -214,7 +223,10 @@ const SelectOverlay = ({
   const {setIsOpen} = useSelect()
   return (
     <TouchableWithoutFeedback onPress={() => setIsOpen(false)}>
-      <View style={[styles.backdrop, SelectStyles.overlay(colorPalette)]} />
+      <View
+        style={[styles.backdrop, SelectStyles.overlay(colorPalette)]}
+        testID="varia-select-overlay"
+      />
     </TouchableWithoutFeedback>
   )
 }
@@ -231,7 +243,9 @@ const SelectContent = ({
   const {variant, size, colorPalette} = {...useSelect(), ...props}
   SelectStyles.useVariants({variant, size})
   return (
-    <View style={[styles.modalContent, SelectStyles.content(colorPalette)]}>
+    <View
+      style={[styles.modalContent, SelectStyles.content(colorPalette)]}
+      testID="varia-select-content">
       <ScrollView>{children}</ScrollView>
     </View>
   )
@@ -249,7 +263,10 @@ const SelectItem = ({value, label, ...props}: Option) => {
   const isSelected = selected === value
   SelectStyles.useVariants({variant, size})
   return (
-    <TouchableOpacity onPress={() => setValue(value)}>
+    <TouchableOpacity
+      onPress={() => setValue(value)}
+      testID="varia-select-item"
+      aria-selected={isSelected}>
       <View style={[styles.item, SelectStyles.item(colorPalette, isSelected)]}>
         <Text style={SelectStyles.itemText(colorPalette, isSelected)}>
           {label}
@@ -300,6 +317,7 @@ const styles = StyleSheet.create({
     },
   },
   backdrop: {
+    zIndex: 1001,
     ...StyleSheet.absoluteFillObject,
     backgroundColor: 'rgba(0,0,0,0.3)',
     _web: {
@@ -313,7 +331,8 @@ const styles = StyleSheet.create({
       _classNames: 'select-modal-content-base',
     },
   },
-  portalContainer: {
+  portalContainer: (zIndex: ZIndex) => ({
+    zIndex,
     position: 'absolute',
     top: 0,
     left: 0,
@@ -324,5 +343,5 @@ const styles = StyleSheet.create({
     _web: {
       _classNames: 'select-portal-container-base',
     },
-  },
+  }),
 })

package/lib/components/Slider.tsx

@@ -273,6 +273,7 @@ const Slider = ({
 
   return (
     <View
+      testID="varia-slider-container"
       style={[
         styles.container(halfSize, flex, alignSelf),
         SliderStyles.container(colorPalette),
@@ -280,12 +281,14 @@ const Slider = ({
       {axis === 'x' && <View style={{width: halfSize}} />}
       <GestureDetector gesture={Gesture.Simultaneous(trackPan, tapGesture)}>
         <View
+          testID="varia-slider-maximun-track"
           style={[
             styles.maximumTrack(),
             SliderStyles.maximumTrack(colorPalette),
           ]}
           onLayout={handleTrackLayout}>
           <AnimatedView
+            testID="varia-slider-minimum-track"
             style={[
               styles.minimumTrack(halfSize),
               SliderStyles.minimumTrack(colorPalette),
@@ -295,7 +298,7 @@ const Slider = ({
 
           {steps && (
             <View style={[styles.stepsOverlay]} pointerEvents="none">
-              <View style={styles.steps}>
+              <View style={styles.steps} testID="varia-slider-steps">
                 {Array.from({length: steps + 1}, (_, index) => index).map(
                   (_, i) => (
                     <View
@@ -311,7 +314,7 @@ const Slider = ({
             </View>
           )}
           <GestureDetector gesture={slideGesture}>
-            <View style={styles.thumbContainerFull}>
+            <View style={styles.thumbContainerFull} testID="varia-slider-tumb">
               <AnimatedView style={[animatedThumb, {flex: 1}]}>
                 <View
                   style={[
@@ -350,7 +353,7 @@ const styles = StyleSheet.create(theme => ({
         },
         y: {
           // maxHeight: 'auto',
-          height: '100%',
+          // height: '100%',
           paddingTop: halfSize,
           paddingRight: 0,
           flexDirection: 'column',

package/lib/components/Slideshow.tsx

@@ -170,6 +170,7 @@ const Slideshow = ({
     <View style={styles.flex(flex)}>
       <GestureDetector gesture={slideGesture}>
         <View
+          testID="varia-slideshow"
           style={[styles.container(), SlideshowStyles.container(colorPalette)]}
           onLayout={e => {
             setContainerWidth(e.nativeEvent.layout.width)
@@ -182,6 +183,7 @@ const Slideshow = ({
             ]}>
             {slides.map((Slide, index) => (
               <View
+                testID={`varia-slides-slide-${index}`}
                 key={index}
                 style={[
                   styles.slide(`${slideSize}%`, isHorizontal),

package/lib/components/Switch.tsx

@@ -87,24 +87,30 @@ const Switch = ({
   useLayoutEffect(() => {
     animatedRef.current?.measure((x, y, width) => {
       containerWidth.value = width
-      // const thumbWidth = SwitchStyles.thumb(colorPalette).width
       const thumbWidth = getVariantValue(
         SwitchStyles.thumb(colorPalette),
         'size',
         size,
         'width',
       )
-      // const padding = SwitchStyles.container(colorPalette).padding || 0
       const padding =
         getVariantValue(
           SwitchStyles.container(colorPalette),
           'size',
           size,
           'padding',
-        ) || 0
-      // const trackBorderWidth =
-      //   SwitchStyles.container(colorPalette).borderWidth || 0
-      const trackBorderWidth = 1
+        ) ||
+        SwitchStyles.container(colorPalette).padding ||
+        0
+      const trackBorderWidth =
+        getVariantValue(
+          SwitchStyles.container(colorPalette),
+          'size',
+          size,
+          'borderWidth',
+        ) ||
+        SwitchStyles.container(colorPalette).borderWidth ||
+        0
       thumbEnabledPosition.value =
         width - thumbWidth - trackBorderWidth * 2 - padding * 2
     })
@@ -141,6 +147,7 @@ const Switch = ({
 
   return (
     <TouchableWithoutFeedback
+      testID="varia-switch"
       onPress={() => {
         if (isAnimating.value) return
         isAnimating.value = true
@@ -164,6 +171,7 @@ const Switch = ({
           SwitchStyles.container(colorPalette),
         ]}>
         <AnimatedView
+          testID="varia-switch-thumb"
           style={[
             styles.thumb,
             SwitchStyles.thumb(colorPalette),

package/lib/components/Text.tsx

@@ -48,7 +48,7 @@ const Text = ({
 
 const styles = StyleSheet.create(theme => ({
   text: (color?: string, fontSize?: number) => ({
-    verticalAlign: 'bottom',
+    verticalAlign: 'middle',
     textAlign: 'left',
     ...(color && {
       color: extractThemeColor(color, theme),

package/lib/components/Toast.tsx

@@ -11,9 +11,10 @@ import Animated, {
 import {scheduleOnRN, scheduleOnUI} from 'react-native-worklets'
 import {ToastStyles, ToastDefaultVariants} from '../theme/Toast.recipe'
 import {UnistylesVariants} from 'react-native-unistyles'
-import {PalettesWithNestedKeys} from '../style/varia/types'
+import {PalettesWithNestedKeys, ZIndex} from '../style/varia/types'
 import Text from './Text'
-import {AnimatedHStack, VStack} from '../patterns/newPatterns'
+import {AnimatedHStack, VStack} from '../patterns'
+import {ZINDEXES} from '../style/varia/constants'
 
 type ToastVariants = UnistylesVariants<typeof ToastStyles>
 
@@ -23,6 +24,7 @@ export type ToastProps = ToastVariants & {
   duration?: number
   onClose?: () => void
   position?: 'top' | 'bottom'
+  zIndex?: ZIndex
 }
 
 const Toast: React.FC<ToastProps> = ({
@@ -33,6 +35,7 @@ const Toast: React.FC<ToastProps> = ({
   duration = 5000,
   onClose,
   position = 'bottom',
+  zIndex,
 }) => {
   ToastStyles.useVariants({variant, size})
 
@@ -81,13 +84,14 @@ const Toast: React.FC<ToastProps> = ({
 
   return (
     <VStack
+      testID="varia-toast"
       style={[
         {
           ...StyleSheet.absoluteFill,
           justifyContent:
             position === 'bottom' || !position ? 'flex-end' : 'flex-start',
         },
-        styles.container,
+        styles.container(zIndex || ZINDEXES.toast),
         ToastStyles.root,
       ]}>
       <AnimatedHStack
@@ -100,16 +104,16 @@ const Toast: React.FC<ToastProps> = ({
 }
 
 const styles = StyleSheet.create({
-  container: {
+  container: (zIndex: ZIndex) => ({
     alignItems: 'center',
     overflow: 'hidden',
-    zIndex: 100,
+    zIndex,
     pointerEvents: 'box-none',
     _web: {
       pointerEvents: 'none',
       _classNames: 'toast-container-base',
     },
-  },
+  }),
 })
 
 export default Toast

package/lib/patterns/index.tsx

@@ -6,7 +6,7 @@ import type {StyleProp, ViewProps, ViewStyle} from 'react-native'
 import Animated, {AnimatedRef} from 'react-native-reanimated'
 import {StyleSheet, UnistylesRuntime} from 'react-native-unistyles'
 
-interface StackProps {
+interface StackProps extends ViewProps {
   backgroundColor?: ViewStyle['backgroundColor']
   bg?: ViewStyle['backgroundColor']
   width?: ViewStyle['width']
@@ -85,7 +85,9 @@ const VStack = ({children, style, align, ...props}: StackProps) => {
   const styleArr = useMemo(() => mapProps(props), [props])
 
   return (
-    <View style={[stackStyles.stack, stackStyles.vstack, styleArr, style]}>
+    <View
+      style={[stackStyles.stack, stackStyles.vstack, styleArr, style]}
+      {...props}>
       {children}
     </View>
   )
@@ -96,7 +98,9 @@ const HStack = ({children, style, align, ...props}: StackProps) => {
   const styleArr = useMemo(() => mapProps(props), [props])
 
   return (
-    <View style={[stackStyles.stack, stackStyles.hstack, styleArr, style]}>
+    <View
+      style={[stackStyles.stack, stackStyles.hstack, styleArr, style]}
+      {...props}>
       {children}
     </View>
   )

package/lib/theme/Select.recipe.tsx

@@ -24,15 +24,15 @@ export const SelectStyles = StyleSheet.create((theme, rt) => ({
       size: {
         sm: {
           height: theme.sizes[9],
-          padding: theme.spacing[1],
+          paddingHorizontal: theme.spacing[1],
         },
         md: {
           height: theme.sizes[10],
-          padding: theme.spacing[2],
+          paddingHorizontal: theme.spacing[2],
         },
         lg: {
-          height: theme.sizes[11],
-          padding: theme.spacing[3],
+          height: theme.sizes[12],
+          paddingHorizontal: theme.spacing[3],
         },
         nosize: {},
       },

package/lib/theme/Slider.recipe.tsx

@@ -26,15 +26,41 @@ export const SliderStyles = StyleSheet.create(theme => ({
         },
       },
       size: {
-        sm: {},
-        md: {},
-        lg: {},
-        xl: {},
+        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,
+        },
+      },
       {
         axis: 'x',
         size: 'sm',
@@ -56,13 +82,6 @@ export const SliderStyles = StyleSheet.create(theme => ({
           height: theme.sizes[8],
         },
       },
-      {
-        axis: 'x',
-        size: 'xl',
-        styles: {
-          height: theme.sizes[10],
-        },
-      },
       {
         axis: 'x',
         size: 'flex',
@@ -91,13 +110,6 @@ export const SliderStyles = StyleSheet.create(theme => ({
           width: theme.sizes[8],
         },
       },
-      {
-        axis: 'y',
-        size: 'xl',
-        styles: {
-          width: theme.sizes[10],
-        },
-      },
       {
         axis: 'y',
         size: 'flex',
@@ -125,7 +137,6 @@ export const SliderStyles = StyleSheet.create(theme => ({
         sm: {},
         md: {},
         lg: {},
-        xl: {},
         flex: {},
         minimal: {},
       },
@@ -152,13 +163,6 @@ export const SliderStyles = StyleSheet.create(theme => ({
           height: theme.sizes[8],
         },
       },
-      {
-        axis: 'x',
-        size: 'xl',
-        styles: {
-          height: theme.sizes[10],
-        },
-      },
       {
         axis: 'x',
         size: 'flex',
@@ -185,13 +189,6 @@ export const SliderStyles = StyleSheet.create(theme => ({
           width: theme.sizes[8],
         },
       },
-      {
-        axis: 'y',
-        size: 'xl',
-        styles: {
-          width: theme.sizes[10],
-        },
-      },
     ],
   }),
   minimumTrack: (colorPalette: PalettesWithNestedKeys) => ({
@@ -199,14 +196,14 @@ export const SliderStyles = StyleSheet.create(theme => ({
     variants: {
       axis: {
         x: {
-          borderBottomLeftRadius: theme.radii.xl,
-          borderBottomRightRadius: 0,
-          borderTopLeftRadius: theme.radii.xl,
+          // borderBottomLeftRadius: theme.radii.xl,
+          // borderBottomRightRadius: 0,
+          // borderTopLeftRadius: theme.radii.xl,
         },
         y: {
-          borderBottomLeftRadius: theme.radii.xl,
-          borderBottomRightRadius: theme.radii.xl,
-          borderTopLeftRadius: 0,
+          // borderBottomLeftRadius: theme.radii.xl,
+          // borderBottomRightRadius: theme.radii.xl,
+          // borderTopLeftRadius: 0,
         },
       },
       variant: {
@@ -218,10 +215,9 @@ export const SliderStyles = StyleSheet.create(theme => ({
         sm: {},
         md: {},
         lg: {},
-        xl: {},
         flex: {},
         minimal: {
-          borderRadius: theme.radii.sm,
+          // borderRadius: theme.radii.sm,
         },
       },
     },
@@ -247,13 +243,6 @@ export const SliderStyles = StyleSheet.create(theme => ({
           height: theme.sizes[8],
         },
       },
-      {
-        axis: 'x',
-        size: 'xl',
-        styles: {
-          height: theme.sizes[10],
-        },
-      },
       {
         axis: 'x',
         size: 'flex',
@@ -280,13 +269,6 @@ export const SliderStyles = StyleSheet.create(theme => ({
           width: theme.sizes[8],
         },
       },
-      {
-        axis: 'y',
-        size: 'xl',
-        styles: {
-          width: theme.sizes[10],
-        },
-      },
       {
         axis: 'y',
         size: 'flex',
@@ -318,7 +300,6 @@ export const SliderStyles = StyleSheet.create(theme => ({
         sm: {},
         md: {},
         lg: {},
-        xl: {},
         flex: {},
         minimal: {},
       },
@@ -328,16 +309,16 @@ export const SliderStyles = StyleSheet.create(theme => ({
         axis: 'x',
         size: 'sm',
         styles: {
-          width: theme.sizes[6],
-          height: theme.sizes[6],
+          width: theme.sizes[4],
+          height: theme.sizes[4],
         },
       },
       {
         axis: 'x',
         size: 'md',
         styles: {
-          width: theme.sizes[7],
-          height: theme.sizes[7],
+          width: theme.sizes[5],
+          height: theme.sizes[5],
         },
       },
       {
@@ -348,22 +329,11 @@ export const SliderStyles = StyleSheet.create(theme => ({
           height: theme.sizes[8],
         },
       },
-      {
-        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,
         },
       },
       {
@@ -371,9 +341,6 @@ export const SliderStyles = StyleSheet.create(theme => ({
         size: 'minimal',
         styles: {
           width: 0,
-          // height: 50,
-          // alignSel: 'stretch',
-          // flex: 1,
         },
       },
       {
@@ -400,14 +367,6 @@ export const SliderStyles = StyleSheet.create(theme => ({
           height: theme.sizes[8],
         },
       },
-      {
-        axis: 'y',
-        size: 'xl',
-        styles: {
-          width: theme.sizes[11],
-          height: theme.sizes[11],
-        },
-      },
       {
         axis: 'y',
         size: 'flex',
@@ -444,7 +403,6 @@ export const SliderStyles = StyleSheet.create(theme => ({
         sm: {},
         md: {},
         lg: {},
-        xl: {},
         flex: {},
         minimal: {},
       },

package/lib/theme/Switch.recipe.tsx

@@ -30,8 +30,6 @@ export const SwitchTokens = {
 
 export const SwitchStyles = StyleSheet.create(theme => ({
   container: (colorPalette: PalettesWithNestedKeys) => ({
-    // width: theme.sizes[16],
-    // height: theme.sizes[16],
     borderRadius: theme.radii.full,
     padding: theme.spacing['0.5'],
     borderWidth: 0,
@@ -57,7 +55,6 @@ export const SwitchStyles = StyleSheet.create(theme => ({
         },
         flex: {
           borderRadius: theme.radii.md,
-          // alignSelf: 'stretch',
         },
       },
       enabled: {
@@ -81,8 +78,6 @@ export const SwitchStyles = StyleSheet.create(theme => ({
   thumb: (colorPalette: PalettesWithNestedKeys) => ({
     backgroundColor: theme.colors.bg.default,
     borderRadius: theme.radii.full,
-    // width: theme.sizes[6],
-    // height: theme.sizes[6],
     variants: {
       variant: {
         solid: {},

package/lib/varia/constants.ts

@@ -0,0 +1,6 @@
+export const ZINDEXES = {
+  drawer: 1000,
+  modal: 1001,
+  select: 1002,
+  toast: 1003,
+}

package/lib/varia/hooks/useZIndexGenerator.tsx

@@ -0,0 +1,12 @@
+import {useRef, useCallback} from 'react'
+
+export function useZIndexGenerator(base = 0) {
+  const counterRef = useRef(base)
+
+  const next = useCallback(() => {
+    counterRef.current += 1
+    return counterRef.current
+  }, [])
+
+  return next
+}

package/lib/varia/types.ts

@@ -286,3 +286,4 @@ export type progressDirection = 'forward' | 'reverse'
 export type rotationDirection = 'clockwise' | 'counterclockwise'
 export type Flex = ViewStyle['flex']
 export type MaxWidth = ViewStyle['maxWidth']
+export type ZIndex = ViewStyle['zIndex']

package/package.json

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