react-native-varia 0.4.4 → 0.4.5

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/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,6 +84,7 @@ const ModalOverlay = ({children, ...props}: ModalOverlayProps) => {
     variant,
     animation,
     setIsOpen,
+    zIndex,
   } = {...context, ...props}
 
   ModalStyles.useVariants({variant})
@@ -92,7 +92,10 @@ const ModalOverlay = ({children, ...props}: ModalOverlayProps) => {
   return (
     <AnimatedView
       testID="varia-modal-overlay"
-      style={[styles.overlay, ModalStyles.overlay(colorPalette)]}
+      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)}>
@@ -226,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/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)
@@ -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>
       )}
@@ -309,6 +317,7 @@ const styles = StyleSheet.create({
     },
   },
   backdrop: {
+    zIndex: 1001,
     ...StyleSheet.absoluteFillObject,
     backgroundColor: 'rgba(0,0,0,0.3)',
     _web: {
@@ -322,7 +331,8 @@ const styles = StyleSheet.create({
       _classNames: 'select-modal-content-base',
     },
   },
-  portalContainer: {
+  portalContainer: (zIndex: ZIndex) => ({
+    zIndex,
     position: 'absolute',
     top: 0,
     left: 0,
@@ -333,5 +343,5 @@ const styles = StyleSheet.create({
     _web: {
       _classNames: 'select-portal-container-base',
     },
-  },
+  }),
 })

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'
+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})
 
@@ -88,7 +91,7 @@ const Toast: React.FC<ToastProps> = ({
           justifyContent:
             position === 'bottom' || !position ? 'flex-end' : 'flex-start',
         },
-        styles.container,
+        styles.container(zIndex || ZINDEXES.toast),
         ToastStyles.root,
       ]}>
       <AnimatedHStack
@@ -101,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/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/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.4",
+  "version": "0.4.5",
   "bin": {
     "varia": "bin/cli.js"
   },