react-native-varia 0.2.3 → 0.3.0

package/lib/components/Drawer.tsx

@@ -16,11 +16,8 @@ import Animated, {
   withSpring,
   withTiming,
 } from 'react-native-reanimated'
-import {runOnUI, scheduleOnRN, scheduleOnUI} from 'react-native-worklets'
-import {
-  SlidingDrawerTokens,
-  SlidingDrawerStyles,
-} from '../theme/SlidingDrawer.recipe'
+import {scheduleOnRN, scheduleOnUI} from 'react-native-worklets'
+import {DrawerTokens, DrawerStyles} from '../theme/Drawer.recipe'
 import {PalettesWithNestedKeys} from '../style/varia/types'
 import {
   StyleSheet,
@@ -33,21 +30,21 @@ import {HStack} from '../patterns'
  * Types
  * ----------------------------*/
 
-export type SlidingDrawerRef = {
+export type DrawerRef = {
   expand: () => void | null
   collapse: () => void | null
   snapTo: (point: number) => void | null
   isCollapsed: () => boolean
 }
 
-type SlidingDrawerVariants = UnistylesVariants<typeof SlidingDrawerStyles>
+type DrawerVariants = UnistylesVariants<typeof DrawerStyles>
 
-type DrawerContextType = SlidingDrawerVariants & {
+type DrawerContextType = DrawerVariants & {
   colorPalette: PalettesWithNestedKeys
   overlayOpacity: SharedValue<number>
 }
 
-type DrawerRootProps = SlidingDrawerVariants & {
+type DrawerRootProps = DrawerVariants & {
   colorPalette?: PalettesWithNestedKeys
   children?: React.ReactNode
 }
@@ -70,10 +67,10 @@ const useDrawer = () => {
 
 const DrawerRoot = ({
   colorPalette = 'accent',
-  variant = SlidingDrawerTokens.defaultProps.variant,
+  variant = DrawerTokens.defaultProps.variant,
   children,
 }: DrawerRootProps) => {
-  SlidingDrawerStyles.useVariants({variant})
+  DrawerStyles.useVariants({variant})
 
   const overlayOpacity = useSharedValue(0)
   const value = useMemo(
@@ -103,7 +100,7 @@ const DrawerPositioner = ({
   axis: 'x' | 'y'
 }) => {
   const {variant} = useDrawer()
-  SlidingDrawerStyles.useVariants({variant})
+  DrawerStyles.useVariants({variant})
 
   type WithDirection = {direction?: 1 | -1; axis?: 'x' | 'y'}
 
@@ -121,7 +118,7 @@ const DrawerPositioner = ({
     <HStack
       style={[
         styles.positioner,
-        SlidingDrawerStyles.positioner,
+        DrawerStyles.positioner,
         {
           justifyContent:
             axis === 'y'
@@ -151,7 +148,7 @@ const AnimatedTouchable = Animated.createAnimatedComponent(
 
 const DrawerOverlay = ({onPress}: {onPress?: () => void}) => {
   const {colorPalette, overlayOpacity, variant} = useDrawer()
-  SlidingDrawerStyles.useVariants({variant})
+  DrawerStyles.useVariants({variant})
   const visible = useSharedValue(0)
 
   useAnimatedReaction(
@@ -176,7 +173,7 @@ const DrawerOverlay = ({onPress}: {onPress?: () => void}) => {
         style={[
           StyleSheet.absoluteFillObject,
           displayOverlayStyle,
-          SlidingDrawerStyles.overlay(colorPalette),
+          DrawerStyles.overlay(colorPalette),
         ]}
       />
     </AnimatedTouchable>
@@ -192,17 +189,16 @@ type InternalDrawerSliderProps = {
   direction: 1 | -1
   lockAtEdges?: boolean
   snapPoints?: number[] | ('hidden' | 'content')[]
-  animation?: keyof typeof SlidingDrawerTokens.variants.animation
+  animation?: keyof typeof DrawerTokens.variants.animation
   onExpand?: () => void
   onCollapse?: () => void
   onSnap?: (point: number) => void
   allowGestures?: boolean
   children?: React.ReactNode
-  ref?: React.RefObject<SlidingDrawerRef | null>
+  ref?: React.RefObject<DrawerRef | null>
   externalTranslate?: SharedValue<number>
 }
 
-// Tipo público — el que exportas (sin direction)
 export type DrawerSliderProps = Omit<
   InternalDrawerSliderProps,
   'direction' | 'axis'
@@ -217,7 +213,7 @@ const DrawerSliderInternal = ({
   direction,
   lockAtEdges = false,
   snapPoints = ['hidden', 'content'],
-  animation = SlidingDrawerTokens.defaultProps.animation,
+  animation = DrawerTokens.defaultProps.animation,
   onExpand,
   onCollapse,
   onSnap,
@@ -228,17 +224,16 @@ const DrawerSliderInternal = ({
 }: InternalDrawerSliderProps) => {
   const {variant, colorPalette, overlayOpacity} = useDrawer()
 
-  SlidingDrawerStyles.useVariants({variant})
+  DrawerStyles.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 animationVariant = DrawerTokens.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})
@@ -254,37 +249,7 @@ const DrawerSliderInternal = ({
     )
   }
 
-  // --- 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
@@ -316,10 +281,13 @@ const DrawerSliderInternal = ({
     'worklet'
     return resolvedSnapPoints.value.length > 0
       ? resolvedSnapPoints.value
-      : snapPoints.map(p => (p as any) * direction)
+      : snapPoints.map(p => {
+          // if (p === 'hidden') return screenHeight * direction
+          // if (p === 'content') return (screenHeight - contentHeight.value) * direction
+          return (p as number) * direction
+        })
   }
 
-  // --- lógica de snapping ---
   const updateCurrentSnapPoint = (snapPoint: number) => {
     'worklet'
     context.value = {position: context.value.position, snapPoint}
@@ -374,7 +342,6 @@ const DrawerSliderInternal = ({
     isCollapsed,
   }))
 
-  // --- sincronizar overlay con movimiento ---
   useAnimatedReaction(
     () => translate.value,
     value => {
@@ -392,7 +359,6 @@ const DrawerSliderInternal = ({
     },
   )
 
-  // --- Gestures ---
   const slideGesture = Gesture.Pan()
     .enabled(allowGestures)
     .onBegin(() => {
@@ -408,16 +374,13 @@ const DrawerSliderInternal = ({
 
       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
@@ -477,7 +440,6 @@ const DrawerSliderInternal = ({
       }
     })
 
-  // --- estilos animados ---
   const blockAnimatedStyle = useAnimatedStyle(() => {
     return {
       transform: [
@@ -496,7 +458,7 @@ const DrawerSliderInternal = ({
         style={[
           styles.slider,
           blockAnimatedStyle,
-          SlidingDrawerStyles.slider(colorPalette),
+          DrawerStyles.slider(colorPalette),
         ]}>
         {children}
       </Animated.View>
@@ -504,10 +466,6 @@ const DrawerSliderInternal = ({
   )
 }
 
-/* -----------------------------
- * Export grouped
- * ----------------------------*/
-
 export const Drawer = {
   Root: DrawerRoot,
   Positioner: DrawerPositioner,
@@ -515,10 +473,6 @@ export const Drawer = {
   Slider: DrawerSlider,
 }
 
-/* -----------------------------
- * Styles
- * ----------------------------*/
-
 const styles = StyleSheet.create((theme, rt) => ({
   positioner: {
     flex: 1,

package/lib/components/Field.tsx

@@ -1,36 +1,21 @@
-import React, {createContext, useContext} from 'react'
-import {UnistylesVariants} from 'react-native-unistyles'
+import React from 'react'
 import Text from './Text'
-import {VStack} from '../patterns'
 import {DefaultFieldVariants, FieldStyles} from '../theme/Field.recipe'
-import {PalettesWithNestedKeys} from '../style/varia/types'
-
-type FieldVariants = UnistylesVariants<typeof FieldStyles>
-
-type FieldContextType = {
-  error?: string
-  variant?: FieldVariants['variant']
-  size?: FieldVariants['size']
-  colorPalette?: PalettesWithNestedKeys
-}
-
-const FieldContext = createContext<FieldContextType | undefined>(undefined)
-
-function useField() {
-  const context = useContext(FieldContext)
-  if (!context) {
-    throw new Error(
-      'Field subcomponents (Label, Error) must be used inside Field.Root',
-    )
-  }
-  return context
-}
+import {Flex, PalettesWithNestedKeys} from '../style/varia/types'
+import FieldContext, {
+  FieldContextType,
+  FieldVariants,
+  useField,
+} from './context/Field'
+import {StyleProp, View, ViewStyle} from 'react-native'
+import {StyleSheet} from 'react-native-unistyles'
 
 type FieldRootProps = FieldVariants & {
   children: React.ReactNode
   error?: string
   colorPalette?: PalettesWithNestedKeys
   flex?: number
+  style?: StyleProp<ViewStyle>
 }
 
 const FieldRoot = ({
@@ -39,7 +24,8 @@ const FieldRoot = ({
   variant = DefaultFieldVariants.variant,
   size = DefaultFieldVariants.size,
   colorPalette = 'accent',
-  flex = 1,
+  flex = 0,
+  style,
 }: FieldRootProps) => {
   FieldStyles.useVariants({size})
 
@@ -53,20 +39,16 @@ const FieldRoot = ({
   FieldStyles.useVariants({variant, size})
 
   return (
-    <VStack
+    <View
       style={[
-        {
-          flexShrink: 1,
-          flexGrow: flex,
-          alignItems: 'stretch',
-          alignSelf: 'stretch',
-        },
+        styles.root(flex),
         FieldStyles.root(colorPalette),
+        style && style,
       ]}>
       <FieldContext.Provider value={contextValue}>
         {children}
       </FieldContext.Provider>
-    </VStack>
+    </View>
   )
 }
 
@@ -89,11 +71,7 @@ const FieldLabel = ({children, ...props}: FieldLabelProps) => {
 
   FieldStyles.useVariants({variant, size})
 
-  return (
-    <Text size={size} color={FieldStyles.label(colorPalette).color}>
-      {children}
-    </Text>
-  )
+  return <Text style={FieldStyles.label(colorPalette)}>{children}</Text>
 }
 
 type FieldErrorProps = {
@@ -124,6 +102,13 @@ const FieldError = ({...props}: FieldErrorProps) => {
   )
 }
 
+const styles = StyleSheet.create({
+  root: (flex: Flex) => ({
+    flex,
+    flexDirection: 'column',
+  }),
+})
+
 export const Field = Object.assign(FieldRoot, {
   Root: FieldRoot,
   Label: FieldLabel,

package/lib/components/GradientBackground.tsx

@@ -1,16 +1,23 @@
-import {View, StyleSheet, StyleProp, ViewStyle} from 'react-native'
+import {View, StyleProp, ViewStyle} from 'react-native'
 import Svg, {Defs, LinearGradient, Stop, Rect} from 'react-native-svg'
 import {withUnistyles} from 'react-native-unistyles'
 import {gradientBackgroundTokens} from '../theme/GradientBackground.recipe'
-import {PalettesWithNestedKeys} from '../style/varia/types'
+import {
+  NestedColorsType,
+  PalettesWithNestedKeys,
+  ThemeColors,
+} from '../style/varia/types'
 import {resolveColor} from '../style/varia/utils'
+import {StyleSheet} from 'react-native-unistyles'
 
 interface GradientBackgroundProps {
   colorPalette?: PalettesWithNestedKeys
   variant?: keyof typeof gradientBackgroundTokens.variants.variant
   direction?: keyof typeof gradientBackgroundTokens.variants.direction
   containerStyles?: StyleProp<ViewStyle>
-  colors: any
+  colors: NestedColorsType
+  startColor?: ThemeColors
+  endColor?: ThemeColors
 }
 
 const BaseGradientBackground = ({
@@ -19,10 +26,20 @@ const BaseGradientBackground = ({
   direction = gradientBackgroundTokens.defaultProps.direction,
   containerStyles,
   colors,
+  startColor,
+  endColor,
 }: GradientBackgroundProps) => {
   const colorValue = gradientBackgroundTokens.variants.variant[variant]
-  const startColor = resolveColor(colorValue.startColor, colors, colorPalette)
-  const endColor = resolveColor(colorValue.endColor, colors, colorPalette)
+  const resolvedStartColor = resolveColor(
+    startColor || colorValue.startColor,
+    colors,
+    colorPalette,
+  )
+  const resolvedEndColor = resolveColor(
+    endColor || colorValue.endColor,
+    colors,
+    colorPalette,
+  )
 
   const directionVariant =
     gradientBackgroundTokens.variants.direction[direction]
@@ -41,8 +58,8 @@ const BaseGradientBackground = ({
             y1={directionVariant?.y1}
             x2={directionVariant?.x2}
             y2={directionVariant?.y2}>
-            <Stop offset="0%" stopColor={startColor} stopOpacity="1" />
-            <Stop offset="100%" stopColor={endColor} stopOpacity="1" />
+            <Stop offset="0%" stopColor={resolvedStartColor} stopOpacity="1" />
+            <Stop offset="100%" stopColor={resolvedEndColor} stopOpacity="1" />
           </LinearGradient>
         </Defs>
         <Rect width="100" height="100" fill="url(#grad)" />
@@ -54,6 +71,7 @@ const BaseGradientBackground = ({
 const styles = StyleSheet.create({
   container: {
     ...StyleSheet.absoluteFillObject,
+    alignSelf: 'stretch',
     borderWidth: 0,
     overflow: 'hidden',
     borderColor: 'transparent',

package/lib/components/GradientText.tsx

@@ -1,4 +1,4 @@
-import {View, type ColorValue} from 'react-native'
+import {StyleSheet, TextStyle, View, type ColorValue} from 'react-native'
 import Svg, {
   Defs,
   LinearGradient,
@@ -6,20 +6,31 @@ import Svg, {
   Text,
   type NumberProp,
 } from 'react-native-svg'
-import {withUnistyles} from 'react-native-unistyles'
+import {UnistylesVariants, withUnistyles} from 'react-native-unistyles'
 import {gradientTextTokens} from '../theme/GradientText.recipe'
-import {PalettesWithNestedKeys} from '../style/varia/types'
-import {resolveColor, resolveFontSize} from '../style/varia/utils'
+import {
+  NestedColorsType,
+  PalettesWithNestedKeys,
+  ThemeType,
+} from '../style/varia/types'
+import {getVariantValue, resolveColor, resolveFontSize} from '../style/varia/utils'
+import {ThemeColors} from '../style/varia/types'
+import { TextStyles } from '../theme/Text.recipe'
 
-interface GradientTextProps {
+type AllTextVariants = UnistylesVariants<typeof TextStyles>
+type TextVariantsWithoutVariant = Omit<AllTextVariants, "variant">;
+
+type GradientTextProps = TextVariantsWithoutVariant & {
   colorPalette: PalettesWithNestedKeys
   variant?: keyof typeof gradientTextTokens.variants.variant
   direction?: keyof typeof gradientTextTokens.variants.direction
-  colors: any
-  fontSizes: any
-  fontSize?: number | undefined
+  colors: NestedColorsType
+  startColor?: ThemeColors
+  endColor?: ThemeColors
+  fontSizes: ThemeType['fontSizes']
+  fontSize?: TextStyle['fontSize']
   children?: React.ReactNode
-  size?: keyof typeof gradientTextTokens.variants.size
+  // size?: keyof typeof gradientTextTokens.variants.size
 }
 
 const BaseGradientText = ({
@@ -28,22 +39,41 @@ const BaseGradientText = ({
   colorPalette = 'accent',
   direction = gradientTextTokens.defaultProps.direction,
   colors,
+  startColor,
+  endColor,
   fontSizes,
   children,
   size = gradientTextTokens.defaultProps.size,
 }: GradientTextProps) => {
+  TextStyles.useVariants({
+    size
+  })
+  
   const colorValue = gradientTextTokens.variants.variant[variant]
-  const startColor = resolveColor(colorValue.startColor, colors, colorPalette)
-  const endColor = resolveColor(colorValue.endColor, colors, colorPalette)
 
-  const fontSizeValue = gradientTextTokens.variants.size[size].fontSize
-  const resolvedFontSize = fontSize || resolveFontSize(fontSizeValue, fontSizes)
+  const resolvedStartColor = resolveColor(
+    startColor || colorValue.startColor,
+    colors,
+    colorPalette,
+  )
+  const resolvedEndColor = resolveColor(
+    endColor || colorValue.endColor,
+    colors,
+    colorPalette,
+  )
+
+  // const fontSizeValue = gradientTextTokens.variants.size[size].fontSize
+  // const resolvedFontSize = fontSize || resolveFontSize(fontSizeValue, fontSizes)
+
+  const resolvedFontSize = fontSize || getVariantValue(TextStyles.text(colorPalette), 'size', size, 'fontSize')
+  const resolvedFontWeight = getVariantValue(TextStyles.text(colorPalette), 'size', size, 'fontWeight') || 400
+  
 
   const directionVariant = gradientTextTokens.variants.direction[direction]
 
   return (
-    <View style={{flexDirection: 'row'}}>
-      <View style={{width: '100%'}}>
+    <View style={styles.root}>
+      <View style={styles.innerContainer}>
         <Svg height={resolvedFontSize + 20} width="100%">
           <Defs>
             <LinearGradient
@@ -52,17 +82,18 @@ const BaseGradientText = ({
               y1={directionVariant?.y1 as NumberProp}
               x2={directionVariant?.x2 as NumberProp}
               y2={directionVariant?.y2 as NumberProp}>
-              <Stop offset="0%" stopColor={startColor as ColorValue} />
-              <Stop offset="100%" stopColor={endColor as ColorValue} />
+              <Stop offset="0%" stopColor={resolvedStartColor as ColorValue} />
+              <Stop offset="100%" stopColor={resolvedEndColor as ColorValue} />
             </LinearGradient>
           </Defs>
           <Text
             fill="url(#gradient)"
             fontSize={resolvedFontSize}
-            fontWeight={
-              (gradientTextTokens.variants.size[size] as {fontWeight?: number})
-                .fontWeight ?? 400
-            }
+            // fontWeight={
+            //   (gradientTextTokens.variants.size[size] as {fontWeight?: number})
+            //     .fontWeight ?? 400
+            // }
+            fontWeight={resolvedFontWeight}
             x="50%"
             y={resolvedFontSize}
             textAnchor="middle">
@@ -74,6 +105,15 @@ const BaseGradientText = ({
   )
 }
 
+const styles = StyleSheet.create({
+  root: {
+    flexDirection: 'row',
+  },
+  innerContainer: {
+    width: '100%',
+  },
+})
+
 const GradientText = withUnistyles(BaseGradientText, theme => ({
   colors: theme.colors,
   fontSizes: theme.fontSizes,

package/lib/components/IconWrapper.tsx

@@ -7,20 +7,20 @@ import {
   type ReactNode,
 } from 'react'
 import Svg from 'react-native-svg'
-import {View} from 'react-native'
-import {withUnistyles} from 'react-native-unistyles'
+import {StyleProp, View, ViewStyle} from 'react-native'
+import {StyleSheet, withUnistyles} from 'react-native-unistyles'
 import {IconTokens} from '../theme/IconWrapper.recipe'
 import {
   NestedColorsType,
   PalettesWithNestedKeys,
   ThemeColors,
+  ThemeType,
 } from '../style/varia/types'
 import {resolveColor} from '../style/varia/utils'
 
 interface SVGChildProps {
   color?: string
 }
-
 export type IconWrapperProps = {
   variant?: keyof typeof IconTokens.variants.variant
   size?: number
@@ -30,7 +30,8 @@ export type IconWrapperProps = {
   scale?: number
   color?: ThemeColors
   rotation?: number
-  colors?: any
+  colors?: NestedColorsType
+  style?: StyleProp<ViewStyle>
 }
 
 /**
@@ -50,12 +51,13 @@ const Icon = ({
   color,
   rotation,
   colors,
+  style,
   ...rest
 }: IconWrapperProps) => {
   const colorValue = IconTokens.variants.variant[variant].color
   const resolvedColor = color
-    ? resolveColor(color, colors, colorPalette)
-    : resolveColor(colorValue, colors, colorPalette)
+    ? resolveColor(color, colors as NestedColorsType, colorPalette)
+    : resolveColor(colorValue, colors as NestedColorsType, colorPalette)
 
   const width = IconTokens.variants.sizeVariant[sizeVariant].width ?? 0
   const height = IconTokens.variants.sizeVariant[sizeVariant].height ?? 0
@@ -63,14 +65,7 @@ const Icon = ({
   // const viewBoxHeight = IconTokens.variants.size[size].viewBoxHeight ?? 0
 
   return (
-    <View
-      style={{
-        width: size || width,
-        height: size || height,
-        justifyContent: 'center',
-        alignItems: 'center',
-        transform: rotation ? [{rotate: `${rotation}deg`}] : [],
-      }}>
+    <View style={[styles.root(size, width, height, rotation), style]}>
       <Svg
         width={size || width}
         height={size || height}
@@ -105,6 +100,17 @@ const Icon = ({
 
 export default Icon
 
+const styles = StyleSheet.create({
+  root: (size, width, height, rotation) => ({
+    width: size || width,
+    height: size || height,
+    justifyContent: 'center',
+    alignItems: 'center',
+    ...(rotation && {transform: [{rotate: `${rotation}deg`}]}),
+    // transform: rotation ? [{rotate: `${rotation}deg`}] : [],
+  }),
+})
+
 export const ThemedIcon = withUnistyles(Icon, theme => ({
   colors: theme.colors,
 }))