react-native-varia 0.2.1 → 0.2.3

package/lib/components/Checkbox.tsx

@@ -31,10 +31,12 @@ function Checkbox({
 
   const isChecked = checked
 
-  // @ts-ignore
-  const checkSize = CheckboxStyles.check(colorPalette).width
-  // @ts-ignore
-  const checkColor = CheckboxStyles.check(colorPalette).color
+  const checkStyle = CheckboxStyles.check(colorPalette) as {
+    width: string
+    color: string
+  }
+  const checkSize = checkStyle.width
+  const checkColor = checkStyle.color
 
   return (
     <Pressable
@@ -67,13 +69,7 @@ export {Checkbox}
 
 const Check = ({size, color}: {size: string; color: string}) => {
   return (
-    <Svg
-      width={size}
-      height={size}
-      viewBox="0 0 16 13"
-      fill="none"
-      // @ts-ignore: svg props
-      xmlns="http://www.w3.org/2000/svg">
+    <Svg width={size} height={size} viewBox="0 0 16 13" fill="none">
       <Line
         x1="1.64402"
         y1="6.05591"

package/lib/components/CircleProgress.tsx

@@ -1,4 +1,4 @@
-import {useEffect, useLayoutEffect, useRef} from 'react'
+import {useEffect} from 'react'
 import {View, StyleSheet} from 'react-native'
 import Animated, {
   Easing,
@@ -13,6 +13,7 @@ import {circleProgressTokens} from '../theme/CircleProgress.recipe'
 import {withUnistyles} from 'react-native-unistyles'
 import {resolveColor} from '../style/varia/utils'
 import {PalettesWithNestedKeys} from '../style/varia/types'
+import {SharedValue} from 'react-native-reanimated'
 
 const AnimatedCircle = Animated.createAnimatedComponent(Circle)
 const svgSize = 160
@@ -21,6 +22,8 @@ interface CircleProgressProps {
   variant?: keyof typeof circleProgressTokens.variants.variant
   size?: keyof typeof circleProgressTokens.variants.size
   trackStrokeWidth?: number
+  progress: SharedValue<number> // ✅ Nuevo
+
   progressStrokeWidth?: number
   duration: number
   trackColor?: string
@@ -37,6 +40,7 @@ const BaseCircleProgress = ({
   variant = circleProgressTokens.defaultProps.variant,
   size = circleProgressTokens.defaultProps.size,
   trackStrokeWidth,
+  progress,
   progressStrokeWidth,
   duration,
   trackColor,
@@ -46,17 +50,6 @@ const BaseCircleProgress = ({
   children,
   colors,
 }: CircleProgressProps) => {
-  const container = useRef<View>(null)
-
-  // useLayoutEffect(() => {
-  //   //@ts-ignore
-  //   container.current?.measure((x, y, width, height) => {
-  //     const pxPerUnit = width / svgSize
-  //     const strokeWidthSVG =
-  //       circleProgressTokens.variants.size[size]?.trackStrokeWidth * pxPerUnit
-  //   })
-  // }, [])
-
   const resolvedSize = circleProgressTokens.variants.size[size]
 
   const colorValue = circleProgressTokens.variants.variant[variant]
@@ -80,21 +73,26 @@ const BaseCircleProgress = ({
 
   const center = svgSize! / 2
 
-  const progress = useSharedValue(duration)
+  const internalProgress = useSharedValue(0)
 
   useEffect(() => {
-    progress.value = withTiming(0, {
-      duration: duration,
-      easing: Easing.linear,
-    })
-  }, [])
+    if (!progress) {
+      internalProgress.value = 0
+      internalProgress.value = withTiming(1, {
+        duration: duration,
+        easing: Easing.linear,
+      })
+    }
+  }, [progress, duration])
+
+  const progressValue = progress || internalProgress
 
   const animatedProps = useAnimatedProps(() => {
     const rStrokeDashOffset = interpolate(
-      progress.value,
+      progressValue.value,
       [
-        progressDirection === 'forward' ? duration : 0,
-        progressDirection === 'forward' ? 0 : duration,
+        progressDirection === 'forward' ? 0 : 1,
+        progressDirection === 'forward' ? 1 : 0,
       ],
       [circumference, 0],
       Extrapolation.CLAMP,
@@ -108,7 +106,7 @@ const BaseCircleProgress = ({
   })
 
   return (
-    <View style={styles.container} ref={container}>
+    <View style={styles.container}>
       <Svg
         width="100%"
         height="100%"

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/Field.tsx

@@ -1,8 +1,8 @@
 import React, {createContext, useContext} from 'react'
+import {UnistylesVariants} from 'react-native-unistyles'
 import Text from './Text'
 import {VStack} from '../patterns'
 import {DefaultFieldVariants, FieldStyles} from '../theme/Field.recipe'
-import {UnistylesVariants} from 'react-native-unistyles'
 import {PalettesWithNestedKeys} from '../style/varia/types'
 
 type FieldVariants = UnistylesVariants<typeof FieldStyles>
@@ -90,10 +90,7 @@ const FieldLabel = ({children, ...props}: FieldLabelProps) => {
   FieldStyles.useVariants({variant, size})
 
   return (
-    <Text
-      size={size}
-      // @ts-ignore
-      color={FieldStyles.label(colorPalette).color}>
+    <Text size={size} color={FieldStyles.label(colorPalette).color}>
       {children}
     </Text>
   )
@@ -121,7 +118,6 @@ const FieldError = ({...props}: FieldErrorProps) => {
   FieldStyles.useVariants({size, variant})
 
   return (
-    // @ts-ignore
     <Text size={size} color={FieldStyles.error(colorPalette).color}>
       {error}
     </Text>

package/lib/components/Input.tsx

@@ -66,6 +66,11 @@ const Input = ({
     invalid,
   })
 
+  const placeholderStyle = InputStyles.placeholder(colorPalette) as {
+    color: string
+  }
+  const placeholderColor = placeholderStyle.color
+
   return (
     <HStack
       style={{
@@ -82,8 +87,7 @@ const Input = ({
         ]}
         value={value}
         placeholder={placeholder}
-        // @ts-ignore
-        placeholderTextColor={InputStyles.placeholder(colorPalette).color}
+        placeholderTextColor={placeholderColor}
         inputMode={inputMode}
         keyboardType={keyboardType}
         secureTextEntry={password}