react-native-varia 0.5.1 → 0.6.0

package/lib/components/Slider.tsx

@@ -0,0 +1,500 @@
+import React from 'react'
+import {type LayoutChangeEvent, StyleProp, View, ViewStyle} from 'react-native'
+import {StyleSheet, UnistylesVariants} from 'react-native-unistyles'
+import {Gesture, GestureDetector} from 'react-native-gesture-handler'
+import Animated, {
+  useAnimatedReaction,
+  useAnimatedStyle,
+  useSharedValue,
+} from 'react-native-reanimated'
+import {runOnJS} from 'react-native-worklets'
+import {SliderStyles, SliderDefaultVariants} from '../../theme/Slider.recipe'
+import {PalettesWithNestedKeys} from '../../style/varia/types'
+import {getCompoundVariantValue, getVariantValue} from '../../style/varia/utils'
+
+function throttle<T extends (...args: any[]) => any>(
+  func: T,
+  limit = 50,
+): (...args: Parameters<T>) => void {
+  let inThrottle = false
+  return (...args: Parameters<T>) => {
+    if (!inThrottle) {
+      func(...(args as Parameters<T>))
+      inThrottle = true
+      setTimeout(() => {
+        inThrottle = false
+      }, limit)
+    }
+  }
+}
+
+type SliderVariants = UnistylesVariants<typeof SliderStyles>
+
+const AnimatedView = Animated.createAnimatedComponent(View)
+
+type SliderProps = SliderVariants & {
+  colorPalette?: PalettesWithNestedKeys
+  thickness?: number
+  minimumTrackThickness?: number
+  minimumTrackColor?: string
+  thumbSize?: {
+    width: number
+    height: number
+  }
+  thumbChildren?: React.ReactNode
+  steps?: number
+  value?: number
+  onSlidingStart?: (value: number) => void
+  onValueChange?: (value: number) => void
+  onSlidingComplete?: (value: number) => void
+  flex?: ViewStyle['flex']
+  alignSelf?: ViewStyle['alignSelf']
+  allowGestures?: boolean
+  mode?: 'normal' | 'wrap'
+  containerStyles?: StyleProp<ViewStyle>
+  maximumTrackStyles?: StyleProp<ViewStyle>
+  minimumTrackStyles?: StyleProp<ViewStyle>
+  thumbStyles?: StyleProp<ViewStyle>
+}
+
+const Slider = ({
+  colorPalette = 'accent',
+  variant = SliderDefaultVariants.variant,
+  size = SliderDefaultVariants.size,
+  thumbChildren: ThumbChildren,
+  axis = 'x',
+  value = 0,
+  steps,
+  onSlidingStart,
+  onValueChange,
+  onSlidingComplete,
+  flex = 0,
+  alignSelf = 'auto',
+  allowGestures = true,
+  mode = 'normal',
+  containerStyles,
+  maximumTrackStyles,
+  minimumTrackStyles,
+  thumbStyles,
+}: SliderProps) => {
+  SliderStyles.useVariants({
+    size,
+    variant,
+    axis,
+  })
+  styles.useVariants({
+    axis,
+  })
+
+  const normalizedValue = useSharedValue(0)
+
+  const throttledOnValueChange = React.useMemo(() => {
+    if (!onValueChange) return undefined
+    return throttle(onValueChange, 50)
+  }, [onValueChange])
+
+  const thumbWidth = getCompoundVariantValue(
+    SliderStyles.thumb(colorPalette),
+    {axis, size},
+    'width',
+  )
+  const thumbHeight = getCompoundVariantValue(
+    SliderStyles.thumb(colorPalette),
+    {axis, size},
+    'height',
+  )
+
+  const maximumTrackColor =
+    getVariantValue(
+      SliderStyles.maximumTrack(colorPalette),
+      'variant',
+      variant,
+      'backgroundColor',
+    ) || 'transparent'
+
+  console.log(SliderStyles.maximumTrack(colorPalette))
+
+  const halfSize = ((axis === 'x' ? thumbWidth : thumbHeight) ?? 0) / 2
+
+  const context = useSharedValue({x: 0})
+
+  // ❗️CAMBIO 1: translate SIEMPRE en píxeles
+  const translate = useSharedValue(0)
+
+  const trackLength = useSharedValue(0)
+  const isInsideChild = useSharedValue(false)
+
+  const handleTrackLayout = (event: LayoutChangeEvent) => {
+    const {width, height} = event.nativeEvent.layout
+    trackLength.value = axis === 'x' ? width : height
+  }
+
+  // ❗️CAMBIO 2: sincronizar value → translate cuando hay layout
+  React.useEffect(() => {
+    if (trackLength.value <= 0) return
+
+    if (steps) {
+      const stepLength = trackLength.value / steps
+      translate.value = value * stepLength
+    } else {
+      translate.value = value * trackLength.value
+    }
+  }, [value, steps])
+
+  useAnimatedReaction(
+    () => normalizedValue.value,
+    (value, prev) => {
+      if (value === prev) return
+
+      if (onValueChange) {
+        runOnJS(onValueChange)(steps ? value : Math.round(value * 100) / 100)
+      }
+    },
+    [steps],
+  )
+
+  const isInteracting = useSharedValue(false)
+
+  const computeSnappedValue = (position: number) => {
+    'worklet'
+    const clamped = Math.max(0, Math.min(position, trackLength.value))
+    if (!steps) return clamped
+
+    const stepLength = trackLength.value / steps
+    return Math.round(clamped / stepLength) * stepLength
+  }
+
+  const toNormalizedValue = (px: number) => {
+    'worklet'
+    return steps
+      ? Math.round(px / (trackLength.value / steps))
+      : px / trackLength.value
+  }
+
+  const beginInteraction = (value: number) => {
+    'worklet'
+    if (isInteracting.value) return
+    isInteracting.value = true
+    onSlidingStart && runOnJS(onSlidingStart)(value)
+  }
+
+  const updateInteraction = (value: number) => {
+    'worklet'
+    onValueChange && runOnJS(onValueChange)(value)
+  }
+
+  const endInteraction = (value: number) => {
+    'worklet'
+    if (!isInteracting.value) return
+    isInteracting.value = false
+    onSlidingComplete && runOnJS(onSlidingComplete)(value)
+  }
+
+  const panGesture = Gesture.Pan()
+    .enabled(allowGestures)
+    .minDistance(0)
+
+    .onBegin(e => {
+      const pos = axis === 'y' ? trackLength.value - e.y : e.x
+      const snapped = computeSnappedValue(pos)
+
+      context.value.x = snapped
+      translate.value = snapped
+
+      beginInteraction(toNormalizedValue(snapped))
+      updateInteraction(toNormalizedValue(snapped))
+    })
+
+    .onUpdate(e => {
+      const delta = axis === 'y' ? -e.translationY : e.translationX
+      const snapped = computeSnappedValue(context.value.x + delta)
+
+      translate.value = snapped
+      updateInteraction(toNormalizedValue(snapped))
+    })
+
+    .onEnd(() => {
+      endInteraction(toNormalizedValue(translate.value))
+    })
+
+    .onFinalize(() => {
+      // 🔒 garantiza cleanup incluso en cancelaciones
+      endInteraction(toNormalizedValue(translate.value))
+    })
+
+  const animatedTrack = useAnimatedStyle(() => ({
+    [axis === 'y' ? 'height' : 'width']:
+      translate.value + (mode === 'wrap' ? halfSize : 0),
+  }))
+
+  const animatedThumb = useAnimatedStyle(() => {
+    if (axis === 'x') {
+      return {transform: [{translateX: translate.value - halfSize}]}
+    }
+    return {
+      transform: [{translateY: trackLength.value - translate.value - halfSize}],
+    }
+  })
+
+  console.log('maximum color', maximumTrackColor)
+
+  return (
+    <View
+      testID="varia-slider-container"
+      style={[
+        SliderStyles.container(colorPalette),
+        containerStyles,
+        styles.container(
+          halfSize,
+          flex,
+          alignSelf,
+          mode === 'wrap' ? maximumTrackColor : 'transparent',
+        ),
+      ]}>
+      <GestureDetector gesture={panGesture}>
+        <View
+          testID="varia-slider-maximun-track"
+          style={[
+            styles.maximumTrack(mode),
+            maximumTrackStyles,
+            SliderStyles.maximumTrack(colorPalette),
+          ]}
+          onLayout={handleTrackLayout}>
+          <AnimatedView
+            testID="varia-slider-minimum-track"
+            style={[
+              SliderStyles.minimumTrack(colorPalette),
+              minimumTrackStyles,
+              styles.minimumTrack(halfSize, mode),
+              animatedTrack,
+            ]}
+          />
+
+          {steps && (
+            <View style={styles.stepsOverlay} pointerEvents="none">
+              <View style={styles.steps}>
+                {Array.from({length: steps + 1}, (_, i) => (
+                  <View
+                    key={i}
+                    style={[
+                      styles.step(i, steps),
+                      SliderStyles.step(colorPalette),
+                    ]}
+                  />
+                ))}
+              </View>
+            </View>
+          )}
+
+          <View style={styles.thumbContainerFull}>
+            <AnimatedView style={[animatedThumb, styles.thumbContainer]}>
+              <View
+                style={[
+                  SliderStyles.thumb(colorPalette),
+                  thumbStyles,
+                  styles.thumb(halfSize),
+                ]}>
+                {ThumbChildren || null}
+              </View>
+            </AnimatedView>
+          </View>
+          {/* <GestureDetector gesture={slideGesture}>
+          </GestureDetector> */}
+        </View>
+      </GestureDetector>
+    </View>
+  )
+}
+
+const styles = StyleSheet.create(theme => ({
+  container: (
+    halfSize: number,
+    flex: ViewStyle['flex'],
+    alignSelf: ViewStyle['alignSelf'],
+    backgroundColor: ViewStyle['backgroundColor'],
+  ) => ({
+    flex,
+    alignSelf,
+    overflow: 'hidden',
+    backgroundColor,
+    alignItems: 'center',
+    // flexBasis: 'auto',
+    variants: {
+      axis: {
+        x: {
+          // maxWidth: 'auto',
+          paddingTop: 0,
+          // paddingRight: halfSize,
+          paddingHorizontal: halfSize,
+          flexDirection: 'row',
+        },
+        y: {
+          // maxHeight: 'auto',
+          // height: '100%',
+          // paddingTop: halfSize,
+          paddingVertical: halfSize,
+          paddingRight: 0,
+          flexDirection: 'column',
+        },
+      },
+    },
+    _web: {
+      _classNames: 'slider-container-base',
+      flex: flex === 0 ? undefined : flex,
+    },
+  }),
+  maximumTrack: (mode: 'normal' | 'wrap') => ({
+    flex: 1,
+    position: 'relative',
+    overflow: 'visible',
+    flexBasis: 'auto',
+    variants: {
+      axis: {
+        x: {
+          ...(mode === 'wrap' ? {height: '100%'} : {}),
+          justifyContent: 'center',
+        },
+        y: {
+          ...(mode === 'wrap' ? {width: '100%'} : {}),
+          flexDirection: 'row',
+          justifyContent: 'center',
+          alignItems: 'flex-end',
+        },
+      },
+    },
+    _web: {
+      _classNames: 'slider-maximun-track-base',
+    },
+  }),
+  minimumTrack: (halfSize: number, mode) => ({
+    flexBasis: 'auto',
+    variants: {
+      axis: {
+        x: {
+          // flex: 1,
+          // marginLeft: halfSize * -1,
+          width: '100%',
+          bottom: 'auto',
+          paddingBottom: 0,
+          // paddingLeft: halfSize,
+          justifyContent: 'center',
+          alignItems: 'flex-end',
+          ...(mode === 'wrap'
+            ? {transform: [{translateX: halfSize * -1}]}
+            : {}),
+        },
+        y: {
+          // flex: 1,
+          height: '100%',
+          // paddingBottom: halfSize,
+          // marginBottom: halfSize * -1,
+          paddingLeft: 0,
+          alignItems: 'flex-start',
+          ...(mode === 'wrap' ? {transform: [{translateY: halfSize}]} : {}),
+        },
+      },
+    },
+    _web: {
+      _classNames: 'slider-minimum-track-base',
+    },
+  }),
+  thumbContainerFull: {
+    // overflow: 'hidden',
+    position: 'absolute',
+    left: 0,
+    right: 0,
+    top: 0,
+    bottom: 0,
+    zIndex: 2,
+    _web: {
+      _classNames: 'thumb-container-full-base',
+    },
+  },
+  thumbContainer: {
+    flex: 1,
+    variants: {
+      axis: {
+        x: {
+          justifyContent: 'center',
+        },
+        y: {
+          alignItems: 'center',
+        },
+      },
+    },
+  },
+  thumb: (halfSize: number) => ({
+    variants: {
+      axis: {
+        x: {
+          // height: '100%',
+          justifyContent: 'center',
+          alignItems: 'center',
+          // transform: [{translateX: halfSize * -1}],
+        },
+        y: {
+          // width: '100%',
+          justifyContent: 'center',
+          alignItems: 'center',
+          // transform: [{translateY: halfSize * -1}],
+        },
+      },
+    },
+    _web: {
+      _classNames: 'slider-thumb-base',
+    },
+  }),
+
+  stepsOverlay: {
+    position: 'absolute',
+    left: 0,
+    right: 0,
+    top: 0,
+    bottom: 0,
+    zIndex: 1,
+    _web: {
+      _classNames: 'slider-steps-overlay-base',
+    },
+  },
+  steps: {
+    width: '100%',
+    height: '100%',
+    justifyContent: 'space-between',
+    alignItems: 'center',
+    zIndex: 0,
+    position: 'absolute',
+    variants: {
+      axis: {
+        x: {
+          flexDirection: 'row',
+        },
+        y: {
+          flexDirection: 'column',
+        },
+      },
+    },
+    _web: {
+      _classNames: 'slider-steps-base',
+    },
+  },
+  step: (index, length) => ({
+    backgroundColor:
+      index === 0 || index === length ? 'transparent' : theme.colors.fg.default,
+    variants: {
+      axis: {
+        x: {
+          width: 1,
+          height: '100%',
+        },
+        y: {
+          width: '100%',
+          height: 1,
+        },
+      },
+    },
+    _web: {
+      _classNames: 'slider-step-base',
+    },
+  }),
+}))
+export default Slider

package/lib/components/{ui/Slideshow.tsx → Slideshow.tsx}

@@ -1,5 +1,5 @@
 import {Children, type ReactNode, useImperativeHandle, useState} from 'react'
-import {View} from 'react-native'
+import {StyleProp, View, ViewStyle} from 'react-native'
 import Animated, {
   useAnimatedReaction,
   useAnimatedStyle,
@@ -32,6 +32,8 @@ type SlideshowProps = SlideshowVariants & {
   onSlideChange?: (index: number) => void
   children: ReactNode
   ref?: React.RefObject<SlideshowRef | null>
+  containerStyles?: StyleProp<ViewStyle>
+  slideContainerStyles?: StyleProp<ViewStyle>
 }
 
 const Slideshow = ({
@@ -44,6 +46,8 @@ const Slideshow = ({
   animation = SlideshowTokens.defaultProps.animation,
   children,
   ref,
+  containerStyles,
+  slideContainerStyles,
 }: SlideshowProps) => {
   const isHorizontal = axis === 'x'
 
@@ -171,7 +175,11 @@ const Slideshow = ({
       <GestureDetector gesture={slideGesture}>
         <View
           testID="varia-slideshow"
-          style={[styles.container(), SlideshowStyles.container(colorPalette)]}
+          style={[
+            SlideshowStyles.container(colorPalette),
+            containerStyles,
+            styles.container(),
+          ]}
           onLayout={e => {
             setContainerWidth(e.nativeEvent.layout.width)
             setContainerHeight(e.nativeEvent.layout.height)
@@ -186,8 +194,9 @@ const Slideshow = ({
                 testID={`varia-slides-slide-${index}`}
                 key={index}
                 style={[
-                  styles.slide(`${slideSize}%`, isHorizontal),
                   SlideshowStyles.slideContainer(colorPalette),
+                  slideContainerStyles,
+                  styles.slide(`${slideSize}%`, isHorizontal),
                 ]}>
                 {Slide}
               </View>

package/lib/components/{ui/Switch.tsx → Switch.tsx}

@@ -1,4 +1,10 @@
-import {Platform, TouchableWithoutFeedback, View} from 'react-native'
+import {
+  Platform,
+  StyleProp,
+  TouchableWithoutFeedback,
+  View,
+  ViewStyle,
+} from 'react-native'
 import Animated, {
   useAnimatedStyle,
   useSharedValue,
@@ -31,6 +37,8 @@ type SwitchProps = SwitchVariants & {
   enabledIcon?: ReactNode
   disabledIcon?: ReactNode
   alignSelf?: AlignSelf
+  containerStyles?: StyleProp<ViewStyle>
+  thumbStyles?: StyleProp<ViewStyle>
 }
 
 const Switch = ({
@@ -44,6 +52,8 @@ const Switch = ({
   size = SwitchTokens.defaultProps.size,
   flex = 0,
   alignSelf = 'flex-start',
+  containerStyles,
+  thumbStyles,
 }: SwitchProps) => {
   const animatedRef = useRef<View>(null)
 
@@ -166,15 +176,17 @@ const Switch = ({
       <AnimatedView
         ref={animatedRef}
         style={[
+          SwitchStyles.container(colorPalette),
+          containerStyles,
           styles.container(flex, alignSelf),
           animatedStyle,
-          SwitchStyles.container(colorPalette),
         ]}>
         <AnimatedView
           testID="varia-switch-thumb"
           style={[
-            styles.thumb,
             SwitchStyles.thumb(colorPalette),
+            thumbStyles,
+            styles.thumb,
             thumbAnimatedStyle,
             circleTranslationStyle,
           ]}>

package/lib/components/{ui/Text.tsx → Text.tsx}

@@ -11,7 +11,7 @@ type TextProps = TextVariants &
     colorPalette?: PalettesWithNestedKeys
     fontSize?: number | undefined
     color?: ThemeColors
-    style?: TextStyle
+    style?: StyleProp<TextStyle>
     children?: React.ReactNode
     mixins?: StyleProp<TextStyle> | StyleProp<TextStyle>[]
   }
@@ -37,8 +37,8 @@ const Text = ({
       style={[
         TextStyles.text(colorPalette),
         styles.text(color, fontSize),
-        mixins && mixins,
         style,
+        mixins && mixins,
       ]}
       {...props}>
       {children}

package/lib/components/{ui/Toast.tsx → Toast.tsx}

@@ -15,6 +15,7 @@ import {PalettesWithNestedKeys, ZIndex} from '../../style/varia/types'
 import Text from './Text'
 import {AnimatedHStack, VStack} from '../../patterns'
 import {ZINDEXES} from '../../style/varia/constants'
+import {StyleProp, TextStyle, ViewStyle} from 'react-native'
 
 type ToastVariants = UnistylesVariants<typeof ToastStyles>
 
@@ -25,6 +26,8 @@ export type ToastProps = ToastVariants & {
   onClose?: () => void
   position?: 'top' | 'bottom'
   zIndex?: ZIndex
+  containerStyles?: StyleProp<ViewStyle>
+  textStyles?: StyleProp<TextStyle>
 }
 
 const Toast: React.FC<ToastProps> = ({
@@ -36,6 +39,8 @@ const Toast: React.FC<ToastProps> = ({
   onClose,
   position = 'bottom',
   zIndex,
+  containerStyles,
+  textStyles,
 }) => {
   ToastStyles.useVariants({variant, size})
 
@@ -91,13 +96,19 @@ const Toast: React.FC<ToastProps> = ({
           justifyContent:
             position === 'bottom' || !position ? 'flex-end' : 'flex-start',
         },
-        styles.container(zIndex || ZINDEXES.toast),
         ToastStyles.root,
+        styles.container(zIndex || ZINDEXES.toast),
       ]}>
       <AnimatedHStack
         ref={animatedRef}
-        style={[animatedStyle, ToastStyles.container(colorPalette)]}>
-        <Text style={ToastStyles.text(colorPalette)}>{message}</Text>
+        style={[
+          animatedStyle,
+          ToastStyles.container(colorPalette),
+          containerStyles,
+        ]}>
+        <Text style={[ToastStyles.text(colorPalette), textStyles]}>
+          {message}
+        </Text>
       </AnimatedHStack>
     </VStack>
   )

package/lib/components/context/Field.tsx

@@ -1,7 +1,8 @@
 import {createContext, useContext} from 'react'
 import {UnistylesVariants} from 'react-native-unistyles'
-import {FieldStyles} from '../../theme/Field.recipe'
-import {PalettesWithNestedKeys} from '../../style/varia/types'
+import {FieldStyles} from '../../../theme/Field.recipe'
+import {PalettesWithNestedKeys} from '../../../style/varia/types'
+import {StyleProp, TextStyle} from 'react-native'
 
 export type FieldVariants = UnistylesVariants<typeof FieldStyles>
 
@@ -10,6 +11,7 @@ export type FieldContextType = {
   variant?: FieldVariants['variant']
   size?: FieldVariants['size']
   colorPalette?: PalettesWithNestedKeys
+  labelStyles?: StyleProp<TextStyle>
 }
 
 const FieldContext = createContext<FieldContextType | undefined>(undefined)

package/lib/varia/types.ts

@@ -287,3 +287,9 @@ export type rotationDirection = 'clockwise' | 'counterclockwise'
 export type Flex = ViewStyle['flex']
 export type MaxWidth = ViewStyle['maxWidth']
 export type ZIndex = ViewStyle['zIndex']
+
+export type Axis = 'x' | 'y'
+export type SizeEntry = {
+  x?: Record<string, any>
+  y?: Record<string, any>
+}

package/lib/varia/utils.ts

@@ -37,6 +37,7 @@ import {
   ColorScheme,
   CreatePresetDTO,
   CustomColorScheme,
+  SizeEntry,
   ThemeColors,
   ThemePresetDTO,
 } from './types'
@@ -439,3 +440,9 @@ export function getCompoundVariantValue<
 
   return match.styles[propName]
 }
+
+export const generateCompoundVariants = (sizes: Record<string, SizeEntry>) =>
+  Object.entries(sizes).flatMap(([size, axes]) => [
+    {axis: 'x', size, styles: axes.x ?? {}},
+    {axis: 'y', size, styles: axes.y ?? {}},
+  ])