react-native-varia 0.2.3 → 0.3.0

package/lib/components/Slideshow.tsx

@@ -20,30 +20,21 @@ export type SlideshowRef = {
 
 type SlideshowVariants = UnistylesVariants<typeof SlideshowStyles>
 
+type Axis = 'x' | 'y'
+
 type SlideshowProps = SlideshowVariants & {
+  axis?: Axis
   animation?: keyof typeof SlideshowTokens.variants.animation
   colorPalette?: PalettesWithNestedKeys
   allowGestures?: boolean
   flex?: number
   onSlideChange?: (index: number) => void
-  slideContainerType?: any
   children: ReactNode
   ref?: React.RefObject<SlideshowRef | null>
 }
 
-/**
- * Flex Wrapper
- * @param colorScheme ? string: color scheme
- * @param animation ? string: animation props
- * @param allowGestures ? boolean: allow gestures
- * @param flex ? number: flex value
- * @param onSlideChange ? function: callback function
- * @param slideContainerType ? color scheme
- * @param children ? react children
- * @param ref ? react ref
- * @returns Slideshow react component
- */
 const Slideshow = ({
+  axis = 'x',
   colorPalette = 'accent',
   variant = 'solid',
   allowGestures = true,
@@ -53,6 +44,8 @@ const Slideshow = ({
   children,
   ref,
 }: SlideshowProps) => {
+  const isHorizontal = axis === 'x'
+
   const slides = Children.toArray(children)
   const NUM_PAGES = slides.length
   const scalingFactor = 1 / NUM_PAGES
@@ -62,17 +55,17 @@ const Slideshow = ({
   })
 
   const [containerWidth, setContainerWidth] = useState(0)
+  const [containerHeight, setContainerHeight] = useState(0)
+
+  const dimension = isHorizontal ? containerWidth : containerHeight
+  const slideSize = 100 / NUM_PAGES
 
-  const slideWidth = 100 / NUM_PAGES
-  const translateX = useSharedValue(0)
+  const translate = useSharedValue(0)
   const currentSlide = useSharedValue(0)
 
   type AnimationType = 'withSpring' | 'withTiming'
+  const animations = {withSpring, withTiming}
 
-  const animations = {
-    withSpring,
-    withTiming,
-  }
   const animationVariant =
     SlideshowTokens.variants?.animation && animation
       ? SlideshowTokens.variants.animation[animation]
@@ -88,12 +81,8 @@ const Slideshow = ({
   const animateSlide = (destination: number) => {
     'worklet'
 
-    if (
-      animationVariant &&
-      animationVariant.type &&
-      animations[animationVariant.type]
-    ) {
-      translateX.value = animations[animationVariant.type](
+    if (animationVariant.type && animations[animationVariant.type]) {
+      translate.value = animations[animationVariant.type](
         destination,
         animationVariant.props,
       )
@@ -107,68 +96,73 @@ const Slideshow = ({
   useAnimatedReaction(
     () => currentSlide.value,
     () => {
-      animateSlide(-currentSlide.value * slideWidth)
+      animateSlide(-currentSlide.value * slideSize)
     },
   )
 
-  const handlePrev = () => {
+  const nextSlide = () => {
     'worklet'
-    if (currentSlide.value > 0) {
-      currentSlide.value -= 1
-    }
+    if (currentSlide.value > 0) currentSlide.value -= 1
   }
-  const handleNext = () => {
+
+  const prevSlide = () => {
     'worklet'
-    if (currentSlide.value < NUM_PAGES - 1) {
-      currentSlide.value += 1
-    }
+    if (currentSlide.value < NUM_PAGES - 1) currentSlide.value += 1
   }
 
-  const context = useSharedValue({x: 0, snapPoint: 0})
+  const context = useSharedValue({x: 0})
   const velocityThreshold = 500
 
   const slideGesture = Gesture.Pan()
     .enabled(allowGestures)
     .onBegin(() => {
-      context.value.x = translateX.value
+      context.value.x = translate.value
     })
     .onUpdate(e => {
-      const pixelToPercentage =
-        (e.translationX / containerWidth) * 100 * scalingFactor
-      translateX.value = context.value.x + pixelToPercentage
+      const translation = isHorizontal ? e.translationX : e.translationY
+
+      const pixelToPercentage = (translation / dimension) * 100 * scalingFactor
+
+      translate.value = context.value.x + pixelToPercentage
     })
-    .onEnd(({velocityX, translationX}) => {
-      const pixelToPercentage =
-        (translationX / containerWidth) * 100 * scalingFactor
-      const slideWidthPercentage = 100 / NUM_PAGES
+    .onEnd(({velocityX, velocityY, translationX, translationY}) => {
+      const translation = isHorizontal ? translationX : translationY
+      const velocity = isHorizontal ? velocityX : velocityY
+
+      const pixelToPercentage = (translation / dimension) * 100 * scalingFactor
 
+      const slideWidthPercentage = 100 / NUM_PAGES
       const currentIndex = Math.round(-context.value.x / slideWidthPercentage)
 
       let targetIndex
-      if (Math.abs(velocityX) > velocityThreshold) {
-        targetIndex = velocityX > 0 ? currentIndex - 1 : currentIndex + 1
+      if (Math.abs(velocity) > velocityThreshold) {
+        targetIndex = velocity > 0 ? currentIndex - 1 : currentIndex + 1
       } else {
-        const crossedThreshold =
-          Math.abs(pixelToPercentage) > slideWidthPercentage / 2
+        const crossed = Math.abs(pixelToPercentage) > slideWidthPercentage / 2
+
         targetIndex =
-          crossedThreshold && pixelToPercentage < 0
+          crossed && pixelToPercentage < 0
             ? currentIndex + 1
-            : crossedThreshold
+            : crossed
             ? currentIndex - 1
             : currentIndex
       }
+
       targetIndex = Math.max(0, Math.min(NUM_PAGES - 1, targetIndex))
+
       animateSlide(-targetIndex * slideWidthPercentage)
       currentSlide.value = targetIndex
     })
 
-  const animatedStyle = useAnimatedStyle(() => ({
-    transform: [{translateX: `${translateX.value}%`}],
-  }))
+  const animatedStyle = useAnimatedStyle(() =>
+    isHorizontal
+      ? {transform: [{translateX: `${translate.value}%`}]}
+      : {transform: [{translateY: `${translate.value}%`}]},
+  )
 
   useImperativeHandle(ref, () => ({
-    handlePrev,
-    handleNext,
+    handlePrev: nextSlide,
+    handleNext: prevSlide,
   }))
 
   return (
@@ -176,17 +170,20 @@ const Slideshow = ({
       <GestureDetector gesture={slideGesture}>
         <View
           style={[styles.container(), SlideshowStyles.container(colorPalette)]}
-          onLayout={e => setContainerWidth(e.nativeEvent.layout.width)}>
+          onLayout={e => {
+            setContainerWidth(e.nativeEvent.layout.width)
+            setContainerHeight(e.nativeEvent.layout.height)
+          }}>
           <Animated.View
             style={[
-              styles.slidesContainer(`${NUM_PAGES * 100}%`),
+              styles.slidesContainer(`${NUM_PAGES * 100}%`, isHorizontal),
               animatedStyle,
             ]}>
             {slides.map((Slide, index) => (
               <View
                 key={index}
                 style={[
-                  styles.slide(`${slideWidth}%`),
+                  styles.slide(`${slideSize}%`, isHorizontal),
                   SlideshowStyles.slideContainer(colorPalette),
                 ]}>
                 {Slide}
@@ -206,6 +203,7 @@ const styles = StyleSheet.create({
     flex,
     flexDirection: 'row',
   }),
+
   container: () => ({
     width: '100%',
     height: '100%',
@@ -213,14 +211,18 @@ const styles = StyleSheet.create({
     justifyContent: 'flex-start',
     alignItems: 'flex-start',
   }),
-  slidesContainer: width => ({
-    flexDirection: 'row',
-    width,
+
+  slidesContainer: (size, isHorizontal) => ({
+    flexDirection: isHorizontal ? 'row' : 'column',
+    width: isHorizontal ? size : '100%',
+    minHeight: isHorizontal ? '100%' : size,
     flex: 1,
   }),
-  slide: width => ({
-    width,
-    flex: 1,
+
+  slide: (size, isHorizontal) => ({
+    overflow: 'hidden',
+    width: isHorizontal ? size : '100%',
+    height: isHorizontal ? '100%' : size,
     justifyContent: 'center',
     alignItems: 'center',
   }),

package/lib/components/SlidingDrawer.tsx

@@ -8,13 +8,13 @@ import Animated, {
   withTiming,
   type SharedValue,
 } from 'react-native-reanimated'
-import {runOnJS} from 'react-native-worklets'
+import {scheduleOnRN} from 'react-native-worklets'
 import {
   SlidingDrawerTokens,
   SlidingDrawerStyles,
 } from '../theme/SlidingDrawer.recipe'
 import {PalettesWithNestedKeys} from '../style/varia/types'
-import {TouchableWithoutFeedback} from 'react-native'
+import {TouchableWithoutFeedback, ViewStyle} from 'react-native'
 
 export type SlidingDrawerRef = {
   snapTo: (point: number) => void | null
@@ -73,7 +73,7 @@ const SlidingDrawer = ({
   const translate = useSharedValue(points[0])
 
   const context: SharedValue<{
-    position: any
+    position: number
     snapPoint: number
   }> = useSharedValue({
     position: points[0],
@@ -106,7 +106,7 @@ const SlidingDrawer = ({
         animationVariant.props,
       )
       updateCurrentSnapPoint(destination)
-      onSnap && runOnJS(onSnap)(destination)
+      onSnap && scheduleOnRN(onSnap, destination)
     }
   }
 
@@ -115,7 +115,7 @@ const SlidingDrawer = ({
     if (overlay) {
       showOverlay()
     }
-    onExpand && runOnJS(onExpand)()
+    onExpand && scheduleOnRN(onExpand)
   }
 
   const isCollapsed = () => {
@@ -128,7 +128,7 @@ const SlidingDrawer = ({
     if (overlay) {
       hideOverlay()
     }
-    onCollapse && runOnJS(onCollapse)()
+    onCollapse && scheduleOnRN(onCollapse)
   }
 
   const hideOverlay = () => {
@@ -164,10 +164,8 @@ const SlidingDrawer = ({
 
       let clamped = proposed
 
-      // Si se pasa del rango, aplicamos resistencia
       if (proposed < minPoint) {
         const overdrag = minPoint - proposed
-        // Cuanto mayor sea el exceso, menos se mueve (efecto pesado)
         clamped = minPoint - overdrag / (1 + overdrag / 60)
       } else if (proposed > maxPoint) {
         const overdrag = proposed - maxPoint
@@ -175,7 +173,6 @@ const SlidingDrawer = ({
       }
 
       translate.value = clamped
-      // translate.value = delta + (context.value.position ?? 0)
     })
     .onEnd(({velocityX, velocityY, translationX, translationY}) => {
       const velocity = axis === 'y' ? velocityY : velocityX
@@ -184,7 +181,6 @@ const SlidingDrawer = ({
       const minPoint = Math.min(...points)
       const maxPoint = Math.max(...points)
 
-      // 🧲 1. Si está fuera del rango, lo regresamos suavemente
       if (translate.value < minPoint) {
         translate.value = withSpring(minPoint, {velocity})
         return
@@ -193,7 +189,6 @@ const SlidingDrawer = ({
         return
       }
 
-      // 🧭 2. Lógica original de snapping
       const forwardsThreshold =
         (points[context.value.snapPoint] +
           points[context.value.snapPoint + 1]) /
@@ -238,18 +233,22 @@ const SlidingDrawer = ({
     })
 
   const blockAnimatedStyle = useAnimatedStyle(() => {
-    return {
-      transform: [
-        {[axis === 'y' ? 'translateY' : 'translateX']: translate.value},
-      ],
-    } as any
+    if (axis === 'y') {
+      return {
+        transform: [{translateY: translate.value}],
+      }
+    } else {
+      return {
+        transform: [{translateX: translate.value}],
+      }
+    }
   })
 
   const displayOverlayStyle = useAnimatedStyle(() => {
     return {
-      display: changeDisplay.value,
+      display: changeDisplay.value as ViewStyle['display'],
       opacity: opacity.value,
-    } as any
+    }
   })
 
   return (
@@ -261,7 +260,7 @@ const SlidingDrawer = ({
             style={[
               StyleSheet.absoluteFillObject,
               displayOverlayStyle,
-              SlidingDrawerStyles.backdrop(colorPalette),
+              SlidingDrawerStyles.overlay(colorPalette),
             ]}
           />
         </AnimatedTouchableOpacity>
@@ -271,7 +270,7 @@ const SlidingDrawer = ({
           style={[
             styles.container(flex, direction, axis, width),
             blockAnimatedStyle,
-            SlidingDrawerStyles.container(colorPalette),
+            SlidingDrawerStyles.slider(colorPalette),
           ]}>
           {children}
         </Animated.View>
@@ -282,7 +281,7 @@ const SlidingDrawer = ({
 export default SlidingDrawer
 
 const styles = StyleSheet.create({
-  container: (flex, direction, axis, width): any => ({
+  container: (flex, direction, axis, width) => ({
     position: flex === 0 ? 'absolute' : 'relative',
     bottom: axis === 'y' && direction === -1 ? 0 : 'auto',
     top: axis === 'y' && direction === 1 ? 0 : 'auto',

package/lib/components/Spinner.tsx

@@ -5,9 +5,13 @@ import {
   type ViewStyle,
 } from 'react-native'
 import {withUnistyles, UnistylesVariants} from 'react-native-unistyles'
-import {PalettesWithNestedKeys, ThemeColors} from '../style/varia/types'
+import {
+  NestedColorsType,
+  PalettesWithNestedKeys,
+  ThemeColors,
+} from '../style/varia/types'
 import {SpinnerTokens} from '../theme/Spinner.recipe'
-import {resolveColor} from '../style/varia/utils'
+import {getVariantValue, resolveColor} from '../style/varia/utils'
 import {SpinnerStyles} from '../theme/Spinner.recipe'
 
 type SpinnerVariants = UnistylesVariants<typeof SpinnerStyles>
@@ -16,7 +20,7 @@ export type SpinnerProps = SpinnerVariants &
     color?: ThemeColors
     style?: StyleProp<ViewStyle>
     mixins?: StyleProp<ViewStyle> | StyleProp<ViewStyle>[]
-    colors: any
+    colors: NestedColorsType
     colorPalette?: PalettesWithNestedKeys
   }
 
@@ -30,15 +34,19 @@ const BaseSpinner = ({
   ...props
 }: SpinnerProps) => {
   const resolvedColor = resolveColor(color, colors, colorPalette)
-
+  
   SpinnerStyles.useVariants({
     size,
   })
 
+  // console.log('color', color)
+
+  const resolvedSize = getVariantValue(SpinnerStyles.base, 'size', size, 'width')
+  
   return (
     <ActivityIndicator
       color={resolvedColor}
-      size={SpinnerStyles.base.width}
+      size={resolvedSize}
       {...props}
       style={[style && style, mixins && mixins]}
     />

package/lib/components/Toast.tsx

@@ -0,0 +1,89 @@
+import React, {useEffect} from 'react'
+import {StyleSheet} from 'react-native'
+import Animated, {
+  useSharedValue,
+  useAnimatedStyle,
+  withTiming,
+  Easing,
+} from 'react-native-reanimated'
+import {scheduleOnRN} from 'react-native-worklets'
+import {ToastStyles, ToastDefaultVariants} from '../theme/Toast.recipe'
+import {UnistylesVariants} from 'react-native-unistyles'
+import {PalettesWithNestedKeys} from '../style/varia/types'
+import Text from './Text'
+
+type ToastVariants = UnistylesVariants<typeof ToastStyles>
+type ToastProps = ToastVariants & {
+  colorPalette?: PalettesWithNestedKeys
+  message: string
+  duration?: number
+  onClose?: () => void
+}
+
+const Toast: React.FC<ToastProps> = ({
+  colorPalette = 'accent',
+  variant = ToastDefaultVariants.variant,
+  size = ToastDefaultVariants.size,
+  message,
+  duration = 5000,
+  onClose,
+}) => {
+  ToastStyles.useVariants({
+    variant,
+    size,
+  })
+  const opacity = useSharedValue(0)
+  const translateY = useSharedValue(50) // Aparece desde abajo
+
+  const animatedStyle = useAnimatedStyle(() => ({
+    opacity: opacity.value,
+    transform: [{translateY: translateY.value}],
+  }))
+
+  useEffect(() => {
+    // Animación de entrada
+    opacity.value = withTiming(1, {
+      duration: 200,
+      easing: Easing.out(Easing.ease),
+    })
+    translateY.value = withTiming(0, {
+      duration: 200,
+      easing: Easing.out(Easing.ease),
+    })
+
+    // Animación de salida
+    const timeout = setTimeout(() => {
+      opacity.value = withTiming(0, {duration: 300})
+      translateY.value = withTiming(50, {duration: 300}, () => {
+        if (onClose) scheduleOnRN(onClose)
+      })
+    }, duration)
+
+    return () => clearTimeout(timeout)
+  }, [])
+
+  return (
+    <Animated.View
+      style={[
+        styles.container,
+        animatedStyle,
+        ToastStyles.container(colorPalette),
+      ]}>
+      <Text style={ToastStyles.text(colorPalette)}>{message}</Text>
+    </Animated.View>
+  )
+}
+
+const styles = StyleSheet.create({
+  container: {
+    position: 'absolute',
+    bottom: 50,
+    // left: 20,
+    // right: 20,
+    padding: 15,
+    borderRadius: 8,
+    alignItems: 'center',
+  },
+})
+
+export default Toast

package/lib/components/context/Field.tsx

@@ -0,0 +1,27 @@
+import {createContext, useContext} from 'react'
+import {UnistylesVariants} from 'react-native-unistyles'
+import {FieldStyles} from '../../theme/Field.recipe'
+import {PalettesWithNestedKeys} from '../../style/varia/types'
+
+export type FieldVariants = UnistylesVariants<typeof FieldStyles>
+
+export type FieldContextType = {
+  error?: string
+  variant?: FieldVariants['variant']
+  size?: FieldVariants['size']
+  colorPalette?: PalettesWithNestedKeys
+}
+
+const FieldContext = createContext<FieldContextType | undefined>(undefined)
+
+export function useField() {
+  const context = useContext(FieldContext)
+  if (!context) {
+    throw new Error(
+      'Field subcomponents (Label, Error) must be used inside Field.Root',
+    )
+  }
+  return context
+}
+
+export default FieldContext

package/lib/patterns/index.tsx

@@ -49,6 +49,7 @@ export type HstackProps = {
   hCenter?: boolean
   flex?: number
   gap?: number
+  stretch?: boolean
 } & ViewProps
 
 const HStack: React.FC<HstackProps> = ({
@@ -59,11 +60,15 @@ const HStack: React.FC<HstackProps> = ({
   hCenter,
   flex = 0,
   gap = 0,
+  stretch,
   ...props
 }) => {
   return (
     <View
-      style={[styles.hStack(center, vCenter, hCenter, gap, flex), style]}
+      style={[
+        styles.hStack(center, vCenter, hCenter, gap, flex, stretch),
+        style,
+      ]}
       {...props}>
       {children}
     </View>
@@ -77,11 +82,15 @@ const VStack: React.FC<HstackProps> = ({
   hCenter,
   flex = 0,
   gap = 0,
+  stretch,
   ...props
 }) => {
   return (
     <View
-      style={[styles.vStack(center, vCenter, hCenter, gap, flex), style]}
+      style={[
+        styles.vStack(center, vCenter, hCenter, gap, flex, stretch),
+        style,
+      ]}
       {...props}>
       {children}
     </View>
@@ -118,19 +127,21 @@ export const FlexSpacer = () => {
   )
 }
 const styles = StyleSheet.create(() => ({
-  hStack: (center, vCenter, hCenter, gap, flex) => ({
+  hStack: (center, vCenter, hCenter, gap, flex, stretch) => ({
     flex,
     gap,
     flexDirection: 'row',
     alignItems: center ? 'center' : vCenter ? 'center' : 'stretch',
     justifyContent: center ? 'center' : hCenter ? 'center' : 'flex-start',
+    ...(stretch ? {alignSelf: 'stretch'} : {}),
   }),
-  vStack: (center, vCenter, hCenter, gap, flex) => ({
+  vStack: (center, vCenter, hCenter, gap, flex, stretch) => ({
     flex,
     gap,
     flexDirection: 'column',
-    alignItems: center ? 'center' : vCenter ? 'center' : 'flex-start',
+    alignItems: center ? 'center' : vCenter ? 'center' : 'stretch',
     justifyContent: center ? 'center' : hCenter ? 'center' : 'flex-start',
+    ...(stretch ? {alignSelf: 'stretch'} : {}),
   }),
 }))