react-native-varia 0.2.1 → 0.2.3

package/lib/components/Link.tsx

@@ -6,8 +6,8 @@ import {
   type StyleProp,
   type ViewStyle,
 } from 'react-native'
-import Text from './Text'
 import {StyleSheet, UnistylesVariants} from 'react-native-unistyles'
+import Text from './Text'
 import {PalettesWithNestedKeys, ThemeColors} from '../style/varia/types'
 import {DefaultTextVariants, TextStyles} from '../theme/Text.recipe'
 type TextVariants = UnistylesVariants<typeof TextStyles>

package/lib/components/Modal.tsx

@@ -6,12 +6,12 @@ import {
   StyleSheet as RNStyleSheet,
 } from 'react-native'
 import Animated from 'react-native-reanimated'
+import {Portal} from '@gorhom/portal'
+import Svg, {Path} from 'react-native-svg'
 import {StyleSheet, UnistylesVariants} from 'react-native-unistyles'
 import Text from './Text'
-import Svg, {Path} from 'react-native-svg'
 import {ModalStyles, ModalTokens} from '../theme/Modal.recipe'
 import {PalettesWithNestedKeys} from '../style/varia/types'
-import {Portal} from '@gorhom/portal'
 
 type ModalVariants = UnistylesVariants<typeof ModalStyles>
 type AnimationKey = keyof typeof ModalTokens.animations.variants
@@ -176,8 +176,6 @@ const CloseButton = ({
 }: CloseButtonProps) => (
   <TouchableOpacity onPress={onClose}>
     <Svg
-      // @ts-ignore
-      xmlns="http://www.w3.org/2000/svg"
       width={scale * 24}
       height={scale * 24}
       viewBox={`0 0 ${24} ${24}`}

package/lib/components/NumberInput.tsx

@@ -1,12 +1,11 @@
 import React, {createContext, useContext, useState} from 'react'
 import {View, TextInput, Pressable} from 'react-native'
+import {UnistylesVariants, StyleSheet} from 'react-native-unistyles'
 import {
   NumberInputStyles,
   NumberInputDefaultVariants,
 } from '../theme/NumberInput.recipe'
 import {PalettesWithNestedKeys} from '../style/varia/types'
-import {UnistylesVariants, StyleSheet} from 'react-native-unistyles'
-import Arrow from '../icons/Arrow'
 import Plus from '../icons/Plus'
 import Minus from '../icons/Minus'
 
@@ -15,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']
@@ -154,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)}
@@ -167,7 +182,7 @@ const NumberInput = {
           NumberInputStyles.buttons(colorPalette),
           NumberInputStyles.increaseTrigger(colorPalette),
         ]}>
-        {children || <IncreaseTriggerIcon />}
+        {iconWithProps}
       </Pressable>
     )
   },
@@ -182,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)}
@@ -194,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/ReText.tsx

@@ -1,3 +1,4 @@
+import {useMemo} from 'react'
 import type {StyleProp, TextInputProps, TextStyle} from 'react-native'
 import {TextInput} from 'react-native'
 import Animated, {SharedValue, useAnimatedProps} from 'react-native-reanimated'
@@ -8,7 +9,6 @@ import {
   ThemeColors,
 } from '../style/varia/types'
 import {TextStyles, DefaultTextVariants} from '../theme/Text.recipe'
-import {useMemo} from 'react'
 import {extractThemeColor} from '../style/varia/utils'
 
 type ReTextVariants = UnistylesVariants<typeof TextStyles>

package/lib/components/Select.tsx

@@ -12,12 +12,12 @@ import {
   TouchableWithoutFeedback,
   StyleSheet,
 } from 'react-native'
+import {UnistylesVariants} from 'react-native-unistyles'
 import {Portal} from '@gorhom/portal'
 import Text from './Text'
 import {StyleSheet as UniStyleSheet} from 'react-native-unistyles'
 import {SelectStyles, SelectDefaultVariants} from '../theme/Select.recipe'
 import {PalettesWithNestedKeys} from '../style/varia/types'
-import {UnistylesVariants} from 'react-native-unistyles'
 
 type SelectVariants = UnistylesVariants<typeof SelectStyles>
 

package/lib/components/Slider.tsx

@@ -52,19 +52,17 @@ const Slider = ({
     size,
     variant,
   })
-  // @ts-ignore
-  const halfSize = (SliderStyles.thumb(colorPalette).width ?? 0) / 2
+  const thumbStyle = SliderStyles.thumb(colorPalette)
+  const maximumTrackStyle = SliderStyles.maximumTrack(colorPalette)
+  const minimumTrackStyle = SliderStyles.minimumTrack(colorPalette, false)
+
+  const halfSize = (thumbStyle.width ?? 0) / 2
   const thumbSize = {
-    // @ts-ignore
-    width: SliderStyles.thumb(colorPalette).width,
-    // @ts-ignore
-    height: SliderStyles.thumb(colorPalette).height,
+    width: thumbStyle.width,
+    height: thumbStyle.height,
   }
-  // @ts-ignore
-  const maximumTrackWidth = SliderStyles.maximumTrack(colorPalette).height ?? 0
-  const minimumTrackWidth =
-    // @ts-ignore
-    SliderStyles.minimumTrack(colorPalette, false).height ?? 0
+  const maximumTrackWidth = maximumTrackStyle.height ?? 0
+  const minimumTrackWidth = minimumTrackStyle.height ?? 0
   const context = useSharedValue({x: 0})
   const translate = useSharedValue(value)
   const trackLength = useSharedValue(0)

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',

package/lib/components/SlidingDrawer.tsx

@@ -1,6 +1,6 @@
-import {Gesture, GestureDetector} from 'react-native-gesture-handler'
 import React, {useImperativeHandle} from 'react'
 import {StyleSheet, UnistylesVariants} from 'react-native-unistyles'
+import {Gesture, GestureDetector} from 'react-native-gesture-handler'
 import Animated, {
   useAnimatedStyle,
   useSharedValue,
@@ -14,6 +14,7 @@ import {
   SlidingDrawerStyles,
 } from '../theme/SlidingDrawer.recipe'
 import {PalettesWithNestedKeys} from '../style/varia/types'
+import {TouchableWithoutFeedback} 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) => {
@@ -147,12 +156,44 @@ 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
+
+      // Si se pasa del rango, aplicamos resistencia
+      if (proposed < minPoint) {
+        const overdrag = minPoint - proposed
+        // Cuanto mayor sea el exceso, menos se mueve (efecto pesado)
+        clamped = minPoint - overdrag / (1 + overdrag / 60)
+      } else if (proposed > maxPoint) {
+        const overdrag = proposed - maxPoint
+        clamped = maxPoint + overdrag / (1 + overdrag / 60)
+      }
+
+      translate.value = clamped
+      // translate.value = delta + (context.value.position ?? 0)
     })
     .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)
+
+      // 🧲 1. Si está fuera del rango, lo regresamos suavemente
+      if (translate.value < minPoint) {
+        translate.value = withSpring(minPoint, {velocity})
+        return
+      } else if (translate.value > maxPoint) {
+        translate.value = withSpring(maxPoint, {velocity})
+        return
+      }
+
+      // 🧭 2. Lógica original de snapping
       const forwardsThreshold =
         (points[context.value.snapPoint] +
           points[context.value.snapPoint + 1]) /
@@ -214,20 +255,21 @@ const SlidingDrawer = ({
   return (
     <>
       {overlay && (
-        <Animated.View
-          style={[
-            {
-              ...StyleSheet.absoluteFillObject,
-            },
-            displayOverlayStyle,
-            SlidingDrawerStyles.backdrop(colorPalette),
-          ]}
-        />
+        <AnimatedTouchableOpacity
+          onPress={() => closeOnOverlayPress && collapse()}>
+          <Animated.View
+            style={[
+              StyleSheet.absoluteFillObject,
+              displayOverlayStyle,
+              SlidingDrawerStyles.backdrop(colorPalette),
+            ]}
+          />
+        </AnimatedTouchableOpacity>
       )}
       <GestureDetector gesture={slideGesture}>
         <Animated.View
           style={[
-            styles.container(flex, direction, axis, SlidingDrawerTokens),
+            styles.container(flex, direction, axis, width),
             blockAnimatedStyle,
             SlidingDrawerStyles.container(colorPalette),
           ]}>
@@ -240,14 +282,16 @@ const SlidingDrawer = ({
 export default SlidingDrawer
 
 const styles = StyleSheet.create({
-  container: (flex, direction, axis, slidingDrawerTokens): any => ({
+  container: (flex, direction, axis, width): any => ({
     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

@@ -4,15 +4,14 @@ import {
   type StyleProp,
   type ViewStyle,
 } from 'react-native'
-import {withUnistyles} from 'react-native-unistyles'
+import {withUnistyles, UnistylesVariants} from 'react-native-unistyles'
 import {PalettesWithNestedKeys, ThemeColors} from '../style/varia/types'
 import {SpinnerTokens} from '../theme/Spinner.recipe'
 import {resolveColor} from '../style/varia/utils'
 import {SpinnerStyles} from '../theme/Spinner.recipe'
-import {UnistylesVariants} from 'react-native-unistyles'
 
 type SpinnerVariants = UnistylesVariants<typeof SpinnerStyles>
-type SpinnerProps = SpinnerVariants &
+export type SpinnerProps = SpinnerVariants &
   Omit<ActivityIndicatorProps, 'size'> & {
     color?: ThemeColors
     style?: StyleProp<ViewStyle>

package/lib/components/Switch.tsx

@@ -1,4 +1,4 @@
-import {TouchableWithoutFeedback} from 'react-native'
+import {TouchableWithoutFeedback, View} from 'react-native'
 import Animated, {
   useAnimatedStyle,
   useSharedValue,
@@ -41,7 +41,7 @@ const Switch = ({
   size = SwitchTokens.defaultProps.size,
   flex = 1,
 }: SwitchProps) => {
-  const animatedRef = useRef(null)
+  const animatedRef = useRef<View>(null)
 
   const isAnimating = useSharedValue(false)
 
@@ -76,15 +76,11 @@ const Switch = ({
   const containerWidth = useSharedValue(0)
 
   useLayoutEffect(() => {
-    //@ts-ignore
     animatedRef.current?.measure((x, y, width) => {
       containerWidth.value = width
-      //@ts-ignore
       const thumbWidth = SwitchStyles.thumb(colorPalette).width
-      //@ts-ignore
       const padding = SwitchStyles.container(colorPalette).padding || 0
       const trackBorderWidth =
-        //@ts-ignore
         SwitchStyles.container(colorPalette).borderWidth || 0
       thumbEnabledPosition.value =
         width - thumbWidth - trackBorderWidth * 2 - padding * 2

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/patterns/index.tsx

@@ -269,12 +269,11 @@ export const FlexGrid = ({
   style?: any
   children: ReactNode
 }) => {
-  const viewRef = useRef(null)
+  const viewRef = useRef<View>(null)
   const gridItems = Children.toArray(children)
   const [parentWidth, setParentWidth] = useState(0)
 
   useLayoutEffect(() => {
-    // @ts-ignore
     viewRef.current?.measure((x, y, width, height, pageX, pageY) => {
       setParentWidth(width)
     })

package/lib/theme/NumberInput.recipe.tsx

@@ -38,7 +38,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,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-native-varia",
-  "version": "0.2.1",
+  "version": "0.2.3",
   "bin": {
     "varia": "bin/cli.js"
   },
@@ -13,6 +13,7 @@
   "description": "",
   "dependencies": {
     "commander": "^14.0.0",
-    "fs-extra": "^11.3.1"
+    "fs-extra": "^11.3.1",
+    "inquirer": "^8.2.7"
   }
 }