react-native-varia 0.2.2 → 0.2.3

package/lib/components/Drawer.tsx

@@ -0,0 +1,539 @@
+import React, {
+  createContext,
+  useContext,
+  useImperativeHandle,
+  useMemo,
+} from 'react'
+import {TouchableWithoutFeedback} from 'react-native'
+import {Gesture, GestureDetector} from 'react-native-gesture-handler'
+import Animated, {
+  measure,
+  SharedValue,
+  useAnimatedReaction,
+  useAnimatedRef,
+  useAnimatedStyle,
+  useSharedValue,
+  withSpring,
+  withTiming,
+} from 'react-native-reanimated'
+import {runOnUI, scheduleOnRN, scheduleOnUI} from 'react-native-worklets'
+import {
+  SlidingDrawerTokens,
+  SlidingDrawerStyles,
+} from '../theme/SlidingDrawer.recipe'
+import {PalettesWithNestedKeys} from '../style/varia/types'
+import {
+  StyleSheet,
+  UnistylesRuntime,
+  UnistylesVariants,
+} from 'react-native-unistyles'
+import {HStack} from '../patterns'
+
+/* -----------------------------
+ * Types
+ * ----------------------------*/
+
+export type SlidingDrawerRef = {
+  expand: () => void | null
+  collapse: () => void | null
+  snapTo: (point: number) => void | null
+  isCollapsed: () => boolean
+}
+
+type SlidingDrawerVariants = UnistylesVariants<typeof SlidingDrawerStyles>
+
+type DrawerContextType = SlidingDrawerVariants & {
+  colorPalette: PalettesWithNestedKeys
+  overlayOpacity: SharedValue<number>
+}
+
+type DrawerRootProps = SlidingDrawerVariants & {
+  colorPalette?: PalettesWithNestedKeys
+  children?: React.ReactNode
+}
+
+/* -----------------------------
+ * Context
+ * ----------------------------*/
+
+const DrawerContext = createContext<DrawerContextType | null>(null)
+const useDrawer = () => {
+  const ctx = useContext(DrawerContext)
+  if (!ctx)
+    throw new Error('Drawer subcomponents must be used within Drawer.Root')
+  return ctx
+}
+
+/* -----------------------------
+ * Root
+ * ----------------------------*/
+
+const DrawerRoot = ({
+  colorPalette = 'accent',
+  variant = SlidingDrawerTokens.defaultProps.variant,
+  children,
+}: DrawerRootProps) => {
+  SlidingDrawerStyles.useVariants({variant})
+
+  const overlayOpacity = useSharedValue(0)
+  const value = useMemo(
+    () => ({
+      colorPalette,
+      variant,
+      overlayOpacity,
+    }),
+    [colorPalette, variant],
+  )
+
+  return (
+    <DrawerContext.Provider value={value}>{children}</DrawerContext.Provider>
+  )
+}
+
+/* -----------------------------
+ * Positioner
+ * ----------------------------*/
+const DrawerPositioner = ({
+  children,
+  direction,
+  axis,
+}: {
+  children?: React.ReactNode
+  direction: 1 | -1
+  axis: 'x' | 'y'
+}) => {
+  const {variant} = useDrawer()
+  SlidingDrawerStyles.useVariants({variant})
+
+  type WithDirection = {direction?: 1 | -1; axis?: 'x' | 'y'}
+
+  const enhancedChildren = React.Children.map(children, child => {
+    if (React.isValidElement(child)) {
+      return React.cloneElement(child as React.ReactElement<WithDirection>, {
+        direction,
+        axis,
+      })
+    }
+    return child
+  })
+
+  return (
+    <HStack
+      style={[
+        styles.positioner,
+        SlidingDrawerStyles.positioner,
+        {
+          justifyContent:
+            axis === 'y'
+              ? 'center'
+              : direction === 1
+              ? 'flex-start'
+              : 'flex-end',
+          alignItems:
+            axis === 'x'
+              ? 'center'
+              : direction === 1
+              ? 'flex-start'
+              : 'flex-end',
+        },
+      ]}>
+      {enhancedChildren}
+    </HStack>
+  )
+}
+
+/* -----------------------------
+ * Overlay
+ * ----------------------------*/
+const AnimatedTouchable = Animated.createAnimatedComponent(
+  TouchableWithoutFeedback,
+)
+
+const DrawerOverlay = ({onPress}: {onPress?: () => void}) => {
+  const {colorPalette, overlayOpacity, variant} = useDrawer()
+  SlidingDrawerStyles.useVariants({variant})
+  const visible = useSharedValue(0)
+
+  useAnimatedReaction(
+    () => overlayOpacity.value,
+    value => {
+      if (value === 0) {
+        visible.value = 0
+      } else {
+        visible.value = 1
+      }
+    },
+  )
+
+  const displayOverlayStyle = useAnimatedStyle(() => ({
+    opacity: withTiming(overlayOpacity.value, {duration: 50}),
+    display: visible.value === 0 ? 'none' : 'flex',
+  }))
+
+  return (
+    <AnimatedTouchable onPress={onPress}>
+      <Animated.View
+        style={[
+          StyleSheet.absoluteFillObject,
+          displayOverlayStyle,
+          SlidingDrawerStyles.overlay(colorPalette),
+        ]}
+      />
+    </AnimatedTouchable>
+  )
+}
+
+/* -----------------------------
+ * Slider (gestión independiente)
+ * ----------------------------*/
+
+type InternalDrawerSliderProps = {
+  axis: 'x' | 'y'
+  direction: 1 | -1
+  lockAtEdges?: boolean
+  snapPoints?: number[] | ('hidden' | 'content')[]
+  animation?: keyof typeof SlidingDrawerTokens.variants.animation
+  onExpand?: () => void
+  onCollapse?: () => void
+  onSnap?: (point: number) => void
+  allowGestures?: boolean
+  children?: React.ReactNode
+  ref?: React.RefObject<SlidingDrawerRef | null>
+  externalTranslate?: SharedValue<number>
+}
+
+// Tipo público — el que exportas (sin direction)
+export type DrawerSliderProps = Omit<
+  InternalDrawerSliderProps,
+  'direction' | 'axis'
+>
+
+export const DrawerSlider = (props: DrawerSliderProps) => {
+  return <DrawerSliderInternal {...(props as InternalDrawerSliderProps)} />
+}
+
+const DrawerSliderInternal = ({
+  axis,
+  direction,
+  lockAtEdges = false,
+  snapPoints = ['hidden', 'content'],
+  animation = SlidingDrawerTokens.defaultProps.animation,
+  onExpand,
+  onCollapse,
+  onSnap,
+  allowGestures = true,
+  children,
+  externalTranslate,
+  ref,
+}: InternalDrawerSliderProps) => {
+  const {variant, colorPalette, overlayOpacity} = useDrawer()
+
+  SlidingDrawerStyles.useVariants({variant})
+
+  const screenHeight =
+    UnistylesRuntime.screen.height - UnistylesRuntime.insets.top
+  const screenWidth = UnistylesRuntime.screen.width
+
+  const animations = {withSpring, withTiming}
+  const animationVariant = SlidingDrawerTokens.variants.animation[animation]
+  const VELOCITY_THRESHOLD = 2000
+
+  // --- shared values base ---
+  const viewRef = useAnimatedRef<Animated.View>()
+  const translate = useSharedValue(screenHeight)
+  const context = useSharedValue({position: screenHeight, snapPoint: 0})
+  const contentHeight = useSharedValue(0)
+  const resolvedSnapPoints = useSharedValue<number[]>([])
+
+  if (externalTranslate) {
+    useAnimatedReaction(
+      () => translate.value,
+      value => {
+        externalTranslate.value = value
+      },
+    )
+  }
+
+  // --- medir el contenido dinámicamente ---
+  // const onLayout = () => {
+  //   scheduleOnUI(() => {
+  //     'worklet'
+  //     const measured = measure(viewRef)
+  //     if (measured) {
+  //       const {height} = measured
+  //       contentHeight.value = height
+
+  //       // resuelve snapPoints declarativos
+  //       const resolved = snapPoints.map(p => {
+  //         if (p === 'hidden') return screenHeight * direction
+  //         if (p === 'content') return (screenHeight - height) * direction
+  //         // if (typeof p === 'string' && p.endsWith('%')) {
+  //         //   const percentage = parseFloat(p) / 100
+  //         //   return screenHeight * (1 - percentage) * direction
+  //         // }
+  //         return p * direction
+  //       })
+
+  //       resolvedSnapPoints.value = resolved
+
+  //       // inicializa la posición (oculto)
+  //       translate.value = resolved[0]
+  //       context.value = {position: resolved[0], snapPoint: 0}
+  //     }
+  //   })
+  // }
+
+  const onLayout = () => {
+    // captura valores aquí (en JS)
+    const _screenHeight = screenHeight
+    const _screenWidth = screenWidth
+    const _axis = axis
+    const _direction = direction
+    const _snapPoints = snapPoints
+
+    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
+        })
+
+        resolvedSnapPoints.value = resolved
+        translate.value = resolved[0]
+        context.value = {position: resolved[0], snapPoint: 0}
+      }
+    })
+  }
+
+  const getPoints = () => {
+    'worklet'
+    return resolvedSnapPoints.value.length > 0
+      ? resolvedSnapPoints.value
+      : snapPoints.map(p => (p as any) * direction)
+  }
+
+  // --- lógica de snapping ---
+  const updateCurrentSnapPoint = (snapPoint: number) => {
+    'worklet'
+    context.value = {position: context.value.position, snapPoint}
+  }
+
+  const snapTo = (destination: number) => {
+    'worklet'
+    const points = getPoints()
+    const point = points[destination]
+    if (animationVariant?.type && point != null) {
+      translate.value = animations[animationVariant.type](
+        point,
+        animationVariant.props,
+      )
+      updateCurrentSnapPoint(destination)
+      onSnap && scheduleOnRN(onSnap, destination)
+    }
+  }
+
+  const isCollapsed = () => {
+    'worklet'
+    return context.value.snapPoint === 0
+  }
+
+  const showOverlay = () => {
+    'worklet'
+    overlayOpacity.value = withTiming(1, {duration: 200})
+  }
+
+  const hideOverlay = () => {
+    'worklet'
+    overlayOpacity.value = withTiming(0, {duration: 200})
+  }
+
+  const expand = () => {
+    const points = getPoints()
+    snapTo(points.length - 1)
+    showOverlay()
+    onExpand && scheduleOnRN(onExpand)
+  }
+
+  const collapse = () => {
+    snapTo(0)
+    hideOverlay()
+    onCollapse && scheduleOnRN(onCollapse)
+  }
+
+  useImperativeHandle(ref, () => ({
+    expand,
+    collapse,
+    snapTo,
+    isCollapsed,
+  }))
+
+  // --- sincronizar overlay con movimiento ---
+  useAnimatedReaction(
+    () => translate.value,
+    value => {
+      const points = getPoints()
+      if (points.length < 2) return
+
+      const collapsed = points[0]
+      const next = points[1] ?? collapsed
+      const threshold = 20
+      const opensUpward = next < collapsed
+      const delta = value - collapsed
+      const isExpanded = opensUpward ? delta < -threshold : delta > threshold
+
+      overlayOpacity.value = withTiming(isExpanded ? 1 : 0, {duration: 150})
+    },
+  )
+
+  // --- Gestures ---
+  const slideGesture = Gesture.Pan()
+    .enabled(allowGestures)
+    .onBegin(() => {
+      context.value.position = translate.value
+    })
+    .onUpdate(event => {
+      const delta = axis === 'y' ? event.translationY : event.translationX
+      const proposed = delta + (context.value.position ?? 0)
+      const points = getPoints()
+      const minPoint = Math.min(...points)
+      const maxPoint = Math.max(...points)
+      let clamped = proposed
+
+      if (proposed < minPoint) {
+        if (lockAtEdges) {
+          // Bloquea overscroll superior (cuando ya estás en el extremo)
+          clamped = minPoint
+        } else {
+          // Aplica resistencia
+          const overdrag = minPoint - proposed
+          clamped = minPoint - overdrag / (1 + overdrag / 60)
+        }
+      } else if (proposed > maxPoint) {
+        if (lockAtEdges) {
+          // Bloquea overscroll inferior
+          clamped = maxPoint
+        } else {
+          const overdrag = proposed - maxPoint
+          clamped = maxPoint + overdrag / (1 + overdrag / 60)
+        }
+      }
+
+      translate.value = clamped
+    })
+    .onEnd(({velocityX, velocityY, translationX, translationY}) => {
+      const velocity = axis === 'y' ? velocityY : velocityX
+      const translation = axis === 'y' ? translationY : translationX
+      const points = getPoints()
+
+      const minPoint = Math.min(...points)
+      const maxPoint = Math.max(...points)
+
+      if (translate.value < minPoint) {
+        translate.value = withSpring(minPoint, {velocity})
+        return
+      } else if (translate.value > maxPoint) {
+        translate.value = withSpring(maxPoint, {velocity})
+        return
+      }
+
+      const forwardsThreshold =
+        (points[context.value.snapPoint] +
+          points[context.value.snapPoint + 1]) /
+        2
+      const backwardsThreshold =
+        (points[context.value.snapPoint] +
+          points[context.value.snapPoint - 1]) /
+        2
+
+      if (translation * direction < 0) {
+        if (
+          ((direction === 1 && translate.value < forwardsThreshold) ||
+            (direction === -1 && translate.value > forwardsThreshold) ||
+            velocity * direction < -VELOCITY_THRESHOLD) &&
+          context.value.snapPoint < points.length - 1
+        ) {
+          snapTo(context.value.snapPoint + 1)
+        } else {
+          snapTo(context.value.snapPoint)
+        }
+      } else {
+        if (
+          ((direction === 1 && translate.value > backwardsThreshold) ||
+            (direction === -1 && translate.value < backwardsThreshold) ||
+            velocity * direction > VELOCITY_THRESHOLD) &&
+          context.value.snapPoint > 0
+        ) {
+          snapTo(context.value.snapPoint - 1)
+        } else {
+          snapTo(context.value.snapPoint)
+        }
+      }
+    })
+
+  // --- estilos animados ---
+  const blockAnimatedStyle = useAnimatedStyle(() => {
+    return {
+      transform: [
+        axis === 'y'
+          ? {translateY: translate.value}
+          : {translateX: translate.value},
+      ],
+    }
+  })
+
+  return (
+    <GestureDetector gesture={slideGesture}>
+      <Animated.View
+        ref={viewRef}
+        onLayout={onLayout}
+        style={[
+          styles.slider,
+          blockAnimatedStyle,
+          SlidingDrawerStyles.slider(colorPalette),
+        ]}>
+        {children}
+      </Animated.View>
+    </GestureDetector>
+  )
+}
+
+/* -----------------------------
+ * Export grouped
+ * ----------------------------*/
+
+export const Drawer = {
+  Root: DrawerRoot,
+  Positioner: DrawerPositioner,
+  Overlay: DrawerOverlay,
+  Slider: DrawerSlider,
+}
+
+/* -----------------------------
+ * Styles
+ * ----------------------------*/
+
+const styles = StyleSheet.create((theme, rt) => ({
+  positioner: {
+    flex: 1,
+    alignSelf: 'stretch',
+    position: 'absolute',
+    top: 0,
+    left: 0,
+    right: 0,
+    bottom: 0,
+  },
+  slider: {
+    flex: 1,
+    alignSelf: 'stretch',
+    alignItems: 'center',
+    justifyContent: 'flex-start',
+    zIndex: 100,
+  },
+}))

package/lib/components/NumberInput.tsx

@@ -14,6 +14,12 @@ type NumberInputVariants = UnistylesVariants<typeof NumberInputStyles>
 type PublicInputProps = Omit<NumberInputVariants, 'variant' | 'size'> & {
   placeholder?: string
 }
+
+interface IconProps {
+  color?: string
+  size?: number
+}
+
 type PublicTriggerProps = {
   children?: React.ReactNode
   variant?: NumberInputVariants['variant']
@@ -153,10 +159,20 @@ const NumberInput = {
       distribution = NumberInputDefaultVariants.distribution,
       colorPalette = 'accent',
       children,
-      min,
       max,
     } = {...useSimpleNumberInputContext(), ...props}
     NumberInputStyles.useVariants({variant, size, distribution})
+
+    const color = (NumberInputStyles.buttons(colorPalette) as {color: string})
+      .color
+
+    const iconElement = children || <IncreaseTriggerIcon />
+    const iconWithProps = React.isValidElement<IconProps>(iconElement)
+      ? React.cloneElement(iconElement, {
+          color,
+        })
+      : iconElement
+
     return (
       <Pressable
         onPress={() => setValue(value + 1)}
@@ -166,7 +182,7 @@ const NumberInput = {
           NumberInputStyles.buttons(colorPalette),
           NumberInputStyles.increaseTrigger(colorPalette),
         ]}>
-        {children || <IncreaseTriggerIcon />}
+        {iconWithProps}
       </Pressable>
     )
   },
@@ -181,9 +197,19 @@ const NumberInput = {
       colorPalette = 'accent',
       children,
       min,
-      max,
     } = {...useSimpleNumberInputContext(), ...props}
     NumberInputStyles.useVariants({variant, size, distribution})
+
+    const color = (NumberInputStyles.buttons(colorPalette) as {color: string})
+      .color
+
+    const iconElement = children || <DecreaseTriggerIcon />
+    const iconWithProps = React.isValidElement<IconProps>(iconElement)
+      ? React.cloneElement(iconElement, {
+          color,
+        })
+      : iconElement
+
     return (
       <Pressable
         onPress={() => setValue(value - 1)}
@@ -193,18 +219,18 @@ const NumberInput = {
           NumberInputStyles.buttons(colorPalette),
           NumberInputStyles.decreaseTrigger(colorPalette),
         ]}>
-        {children || <DecreaseTriggerIcon />}
+        {iconWithProps}
       </Pressable>
     )
   },
 }
 
-const IncreaseTriggerIcon = () => {
-  return <Plus scale={0.8} variant="solid" />
+const IncreaseTriggerIcon = ({color}: {color?: string}) => {
+  return <Plus color={color} />
 }
 
-const DecreaseTriggerIcon = () => {
-  return <Minus scale={0.8} variant="solid" />
+const DecreaseTriggerIcon = ({color}: {color?: string}) => {
+  return <Minus color={color} />
 }
 
 export default NumberInput

package/lib/components/Slideshow.tsx

@@ -7,7 +7,7 @@ import Animated, {
   withSpring,
   withTiming,
 } from 'react-native-reanimated'
-import {runOnJS} from 'react-native-worklets'
+import {scheduleOnRN} from 'react-native-worklets'
 import {StyleSheet, UnistylesVariants} from 'react-native-unistyles'
 import {Gesture, GestureDetector} from 'react-native-gesture-handler'
 import {SlideshowStyles, SlideshowTokens} from '../theme/Slideshow.recipe'
@@ -28,7 +28,7 @@ type SlideshowProps = SlideshowVariants & {
   onSlideChange?: (index: number) => void
   slideContainerType?: any
   children: ReactNode
-  ref?: React.RefObject<SlideshowRef>
+  ref?: React.RefObject<SlideshowRef | null>
 }
 
 /**
@@ -99,7 +99,7 @@ const Slideshow = ({
       )
 
       if (onSlideChange) {
-        runOnJS(onSlideChange)((destination / 100) * NUM_PAGES * -1)
+        scheduleOnRN(onSlideChange, (destination / 100) * NUM_PAGES * -1)
       }
     }
   }
@@ -207,14 +207,11 @@ const styles = StyleSheet.create({
     flexDirection: 'row',
   }),
   container: () => ({
-    zIndex: 1,
     width: '100%',
     height: '100%',
     overflow: 'hidden',
     justifyContent: 'flex-start',
     alignItems: 'flex-start',
-    backgroundColor: 'white',
-    borderRadius: 16,
   }),
   slidesContainer: width => ({
     flexDirection: 'row',