react-native-varia 0.2.2 → 0.2.4

package/lib/components/SlidingDrawer.tsx

@@ -8,12 +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, ViewStyle} from 'react-native'
 
 export type SlidingDrawerRef = {
   snapTo: (point: number) => void | null
@@ -26,6 +27,7 @@ type SlidingDrawerVariants = UnistylesVariants<typeof SlidingDrawerStyles>
 type SlidingDrawerProps = SlidingDrawerVariants & {
   colorPalette?: PalettesWithNestedKeys
   animation?: keyof typeof SlidingDrawerTokens.variants.animation
+  width?: string
   flex?: number
   direction?: 1 | -1
   onCollapse?: () => void
@@ -35,14 +37,20 @@ type SlidingDrawerProps = SlidingDrawerVariants & {
   axis: 'y' | 'x'
   allowGestures?: boolean
   overlay?: boolean
+  closeOnOverlayPress?: boolean
   children?: React.ReactNode
-  ref?: React.RefObject<SlidingDrawerRef>
+  ref?: React.RefObject<SlidingDrawerRef | null>
 }
 
+const AnimatedTouchableOpacity = Animated.createAnimatedComponent(
+  TouchableWithoutFeedback,
+)
+
 const SlidingDrawer = ({
   colorPalette = 'accent',
   variant = SlidingDrawerTokens.defaultProps.variant,
   animation = SlidingDrawerTokens.defaultProps.animation,
+  width = '100%',
   flex = 0,
   direction = 1,
   onCollapse,
@@ -52,6 +60,7 @@ const SlidingDrawer = ({
   axis,
   allowGestures = true,
   overlay = false,
+  closeOnOverlayPress = true,
   children,
   ref,
 }: SlidingDrawerProps) => {
@@ -64,7 +73,7 @@ const SlidingDrawer = ({
   const translate = useSharedValue(points[0])
 
   const context: SharedValue<{
-    position: any
+    position: number
     snapPoint: number
   }> = useSharedValue({
     position: points[0],
@@ -97,7 +106,7 @@ const SlidingDrawer = ({
         animationVariant.props,
       )
       updateCurrentSnapPoint(destination)
-      onSnap && runOnJS(onSnap)(destination)
+      onSnap && scheduleOnRN(onSnap, destination)
     }
   }
 
@@ -106,7 +115,7 @@ const SlidingDrawer = ({
     if (overlay) {
       showOverlay()
     }
-    onExpand && runOnJS(onExpand)()
+    onExpand && scheduleOnRN(onExpand)
   }
 
   const isCollapsed = () => {
@@ -119,7 +128,7 @@ const SlidingDrawer = ({
     if (overlay) {
       hideOverlay()
     }
-    onCollapse && runOnJS(onCollapse)()
+    onCollapse && scheduleOnRN(onCollapse)
   }
 
   const hideOverlay = () => {
@@ -147,12 +156,39 @@ const SlidingDrawer = ({
     })
     .onUpdate(event => {
       const delta = axis === 'y' ? event.translationY : event.translationX
-      translate.value = delta + (context.value.position ?? 0)
+
+      const proposed = delta + (context.value.position ?? 0)
+
+      const minPoint = Math.min(...points)
+      const maxPoint = Math.max(...points)
+
+      let clamped = proposed
+
+      if (proposed < minPoint) {
+        const overdrag = minPoint - proposed
+        clamped = minPoint - overdrag / (1 + overdrag / 60)
+      } else if (proposed > maxPoint) {
+        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 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]) /
@@ -197,39 +233,44 @@ 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 (
     <>
       {overlay && (
-        <Animated.View
-          style={[
-            {
-              ...StyleSheet.absoluteFillObject,
-            },
-            displayOverlayStyle,
-            SlidingDrawerStyles.backdrop(colorPalette),
-          ]}
-        />
+        <AnimatedTouchableOpacity
+          onPress={() => closeOnOverlayPress && collapse()}>
+          <Animated.View
+            style={[
+              StyleSheet.absoluteFillObject,
+              displayOverlayStyle,
+              SlidingDrawerStyles.overlay(colorPalette),
+            ]}
+          />
+        </AnimatedTouchableOpacity>
       )}
       <GestureDetector gesture={slideGesture}>
         <Animated.View
           style={[
-            styles.container(flex, direction, axis, SlidingDrawerTokens),
+            styles.container(flex, direction, axis, width),
             blockAnimatedStyle,
-            SlidingDrawerStyles.container(colorPalette),
+            SlidingDrawerStyles.slider(colorPalette),
           ]}>
           {children}
         </Animated.View>
@@ -240,14 +281,16 @@ const SlidingDrawer = ({
 export default SlidingDrawer
 
 const styles = StyleSheet.create({
-  container: (flex, direction, axis, slidingDrawerTokens): 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',
+    bottom: axis === 'y' && direction === -1 ? 0 : 'auto',
+    top: axis === 'y' && direction === 1 ? 0 : 'auto',
     left: axis === 'x' ? 0 : 'auto',
     flex: flex === 0 ? 1 : flex,
     height: '100%',
-    width: '100%',
+    width,
+    flexDirection: 'column',
+    alignSelf: 'stretch',
     alignItems: 'center',
     justifyContent: 'flex-start',
     zIndex: 100,

package/lib/components/Spinner.tsx

@@ -5,7 +5,11 @@ 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 {SpinnerStyles} from '../theme/Spinner.recipe'
@@ -16,7 +20,7 @@ export type SpinnerProps = SpinnerVariants &
     color?: ThemeColors
     style?: StyleProp<ViewStyle>
     mixins?: StyleProp<ViewStyle> | StyleProp<ViewStyle>[]
-    colors: any
+    colors: NestedColorsType
     colorPalette?: PalettesWithNestedKeys
   }
 

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/icons/Minus.tsx

@@ -0,0 +1,24 @@
+import * as React from 'react'
+import {IconWrapperProps, ThemedIcon} from '../components/IconWrapper'
+import {Path} from 'react-native-svg'
+import {View} from 'react-native'
+
+const Minus = ({
+  color,
+  ...props
+}: Omit<IconWrapperProps, 'children' | 'colors'>) => {
+  return (
+    <ThemedIcon {...props} color={color}>
+      <>
+        <Path
+          stroke={color}
+          strokeLinecap="round"
+          strokeLinejoin="round"
+          strokeWidth="2.5"
+          d="M1.5 12h20"
+        />
+      </>
+    </ThemedIcon>
+  )
+}
+export default Minus

package/lib/icons/Plus.tsx

@@ -0,0 +1,23 @@
+import * as React from 'react'
+import {IconWrapperProps, ThemedIcon} from '../components/IconWrapper'
+import {Path} from 'react-native-svg'
+
+const Plus = ({
+  color,
+  ...props
+}: Omit<IconWrapperProps, 'children' | 'colors'>) => {
+  return (
+    <ThemedIcon {...props} color={color}>
+      <>
+        <Path
+          stroke={color}
+          strokeLinecap="round"
+          strokeLinejoin="round"
+          strokeWidth="2.5"
+          d="M1.5 11.5h20m-10-10v20"
+        />
+      </>
+    </ThemedIcon>
+  )
+}
+export default Plus

package/lib/theme/Button.recipe.tsx

@@ -9,6 +9,7 @@ export const ButtonDefaultVariants = {
 export const ButtonStyles = StyleSheet.create(theme => ({
   container: (colorPalette: PalettesWithNestedKeys) => ({
     borderRadius: 12,
+
     variants: {
       variant: {
         solid: {
@@ -24,6 +25,12 @@ export const ButtonStyles = StyleSheet.create(theme => ({
         subtle: {
           backgroundColor: theme.colors[colorPalette]['a3'],
         },
+        icon: {
+          backgroundColor: 'transparent',
+          borderWidth: 1,
+          borderColor: theme.colors[colorPalette].a7,
+          borderRadius: theme.radii.full,
+        },
       },
       size: {
         xs: {
@@ -103,7 +110,7 @@ export const ButtonStyles = StyleSheet.create(theme => ({
     variants: {
       variant: {
         solid: {
-          color: theme.colors[colorPalette].fg,
+          color: theme.colors.fg.default,
         },
         outline: {
           color: theme.colors[colorPalette].text,
@@ -114,6 +121,9 @@ export const ButtonStyles = StyleSheet.create(theme => ({
         subtle: {
           color: theme.colors[colorPalette].text,
         },
+        icon: {
+          color: theme.colors[colorPalette].text,
+        },
       },
       disabled: {
         true: {},

package/lib/theme/CircleProgress.recipe.tsx

@@ -12,8 +12,8 @@ const circleProgressTokens = createCircleProgressTokens({
         progressStrokeWidth: 8,
       },
       md: {
-        trackStrokeWidth: 20,
-        progressStrokeWidth: 30,
+        trackStrokeWidth: 18,
+        progressStrokeWidth: 16,
       },
       lg: {
         trackStrokeWidth: 40,
@@ -22,7 +22,7 @@ const circleProgressTokens = createCircleProgressTokens({
     },
     variant: {
       solid: {
-        trackColor: 'transparent',
+        trackColor: 'bg.emphasized',
         progressColor: 'colorPalette.9',
       },
       outline: {

package/lib/theme/Field.recipe.tsx

@@ -23,7 +23,16 @@ export const FieldStyles = StyleSheet.create(theme => ({
     color: theme.colors.fg.default,
     variants: {
       variant: {
-        solid: {},
+        solid: {
+          // transform: [{translateY: theme.spacing['3.5']}],
+          // marginLeft: theme.spacing['3'],
+          // paddingHorizontal: theme.spacing['1'],
+          backgroundColor: theme.colors.bg.default,
+          zIndex: 10,
+          flex: 0,
+          width: 'auto',
+          alignSelf: 'baseline',
+        },
       },
       size: {
         xs: {
@@ -34,9 +43,15 @@ export const FieldStyles = StyleSheet.create(theme => ({
         },
         md: {
           fontSize: theme.fontSizes.md,
+          transform: [{translateY: theme.spacing['4.5']}],
+          marginLeft: theme.spacing['2'],
+          paddingHorizontal: theme.spacing['1'],
         },
         lg: {
-          fontSize: theme.fontSizes.lg,
+          fontSize: theme.fontSizes['2xl'],
+          transform: [{translateY: theme.spacing['5']}],
+          marginLeft: theme.spacing['2.5'],
+          paddingHorizontal: theme.spacing['1'],
         },
       },
     },

package/lib/theme/Input.recipe.tsx

@@ -5,12 +5,14 @@ import {textStyle} from '../style/varia/textStyles'
 export const InputDefaultVariants = {
   variant: 'solid',
   size: 'md',
-  spacing: 'md',
 } as const
 
 export const InputStyles = StyleSheet.create(theme => ({
   placeholder: (colorPalette: PalettesWithNestedKeys) => ({
     variants: {
+      variant: {
+        solid: {},
+      },
       invalid: {
         true: {
           color: theme.colors.fg.error,
@@ -23,6 +25,8 @@ export const InputStyles = StyleSheet.create(theme => ({
         md: {},
         lg: {},
         xl: {},
+        '2xl': {},
+        flex: {},
       },
     },
   }),
@@ -31,8 +35,10 @@ export const InputStyles = StyleSheet.create(theme => ({
     borderWidth: 1,
     borderRadius: 4,
     color: theme.colors.fg.default,
-    lineHeight: 10,
     variants: {
+      variant: {
+        solid: {},
+      },
       focused: {
         true: {
           borderColor: theme.colors[colorPalette].default,
@@ -71,7 +77,7 @@ export const InputStyles = StyleSheet.create(theme => ({
         md: {
           paddingHorizontal: theme.sizes[3],
           minHeight: theme.sizes[10],
-          maxHeight: theme.sizes[10],
+          maxHeight: theme.sizes[20],
           minWidth: theme.sizes[10],
           fontSize: theme.fontSizes.md,
         },
@@ -97,6 +103,9 @@ export const InputStyles = StyleSheet.create(theme => ({
           minWidth: theme.sizes[16],
           ...textStyle['3xl'],
         },
+        flex: {
+          paddingHorizontal: theme.sizes[2],
+        },
       },
     },
   }),

package/lib/theme/NumberInput.recipe.tsx

@@ -27,6 +27,7 @@ export const NumberInputStyles = StyleSheet.create(theme => ({
         md: {},
         lg: {},
         xl: {},
+        flex: {},
       },
     },
   }),
@@ -38,7 +39,7 @@ export const NumberInputStyles = StyleSheet.create(theme => ({
       },
       variant: {
         solid: {
-          color: theme.colors[colorPalette]['1'],
+          color: theme.colors[colorPalette].text,
           borderColor: theme.colors.border.default,
           borderWidth: 1,
           borderRadius: theme.radii.sm,
@@ -63,6 +64,9 @@ export const NumberInputStyles = StyleSheet.create(theme => ({
           minWidth: theme.sizes[12],
           height: theme.sizes[12],
         },
+        flex: {
+          padding: theme.sizes[0.5],
+        },
       },
     },
   }),
@@ -82,6 +86,7 @@ export const NumberInputStyles = StyleSheet.create(theme => ({
         md: {},
         lg: {},
         xl: {},
+        flex: {},
       },
     },
     compoundVariants: [
@@ -121,6 +126,7 @@ export const NumberInputStyles = StyleSheet.create(theme => ({
         md: {},
         lg: {},
         xl: {},
+        flex: {},
       },
     },
     compoundVariants: [
@@ -150,9 +156,7 @@ export const NumberInputStyles = StyleSheet.create(theme => ({
     variants: {
       distribution: {
         vertical: {},
-        horizontal: {
-          flex: 1,
-        },
+        horizontal: {},
       },
       variant: {
         solid: {
@@ -185,6 +189,7 @@ export const NumberInputStyles = StyleSheet.create(theme => ({
           minHeight: theme.sizes[12],
           maxHeight: theme.sizes[12],
         },
+        flex: {},
       },
     },
   }),

package/lib/theme/RadioGroup.recipe.tsx

@@ -30,11 +30,12 @@ export const RadioGroupStyles = StyleSheet.create(theme => ({
         lg: {
           gap: theme.sizes[4],
         },
+        nosize: {},
       },
     },
   }),
 
-  item: (colorPalette: PalettesWithNestedKeys) => ({
+  item: (colorPalette: PalettesWithNestedKeys, pressed: boolean) => ({
     variants: {
       variant: {
         solid: {},
@@ -55,6 +56,9 @@ export const RadioGroupStyles = StyleSheet.create(theme => ({
         lg: {
           gap: theme.sizes[4],
         },
+        nosize: {
+          gap: theme.sizes[2],
+        },
       },
     },
     compoundVariants: [
@@ -93,6 +97,7 @@ export const RadioGroupStyles = StyleSheet.create(theme => ({
         sm: {width: theme.sizes[4], height: theme.sizes[4]},
         md: {width: theme.sizes[5], height: theme.sizes[5]},
         lg: {width: theme.sizes[6], height: theme.sizes[6]},
+        nosize: {width: theme.sizes[5], height: theme.sizes[5]},
       },
       checked: {
         true: {},
@@ -125,6 +130,7 @@ export const RadioGroupStyles = StyleSheet.create(theme => ({
         sm: {width: theme.sizes[2], height: theme.sizes[2]},
         md: {width: theme.sizes[3], height: theme.sizes[3]},
         lg: {width: theme.sizes['3.5'], height: theme.sizes['3.5']},
+        nosize: {width: theme.sizes[3], height: theme.sizes[3]},
       },
       checked: {
         true: {},