react-native-varia 0.2.0 → 0.2.2

package/README.md

@@ -12,26 +12,188 @@ A Component library based on **react-native-unistyles** that provides a CLI tool
 yarn add -D react-native-varia
 ```
 
-You also need to install [react-native-unistyles](https://www.unistyl.es/v3/start/getting-started) for advanced styling capabilities:
+You also need to install [react-native-unistyles](https://www.unistyl.es/v3/start/getting-started)
+
+2. Components dependencies
+
+| Component          | Dependencies                                                                 |
+| ------------------ | ---------------------------------------------------------------------------- |
+| Badge              | -                                                                            |
+| Button             | react-native-svg                                                             |
+| Checkbox           | react-native-svg                                                             |
+| CircleProgress     | react-native-reanimated, react-native-svg                                    |
+| Field              | -                                                                            |
+| GradientBackground | react-native-svg                                                             |
+| GradientText       | react-native-svg                                                             |
+| Input              | -                                                                            |
+| Link               | -                                                                            |
+| Modal              | react-native-reanimated, @gorhom/portal, react-native-svg                    |
+| NumberInput        | -                                                                            |
+| RadioGroup         | -                                                                            |
+| ReText             | react-native-reanimated                                                      |
+| Select             | @gorhom/portal                                                               |
+| Slider             | react-native-reanimated, react-native-gesture-handler, react-native-worklets |
+| Slideshow          | react-native-reanimated, react-native-gesture-handler, react-native-worklets |
+| SlidingDrawer      | react-native-reanimated, react-native-gesture-handler, react-native-worklets |
+| Spinner            | -                                                                            |
+| Switch             | react-native-reanimated                                                      |
+
+Install react-native-reanimated, react-native-worklets and react-native-gesture-handler.
 
-2. Some components has reanimated dependency.
-   If you are going to use the next components:
-
-- Slider
-- SlidingDrawer
-- Slideshow
-- Switch
-- ReText
-- Modal
-
-Install react-native-reanimated and react-native-worklets.
 Check the [react-native-reanimated](https://docs.swmansion.com/react-native-reanimated/docs/fundamentals/getting-started/) docs.
-And install react-native-gesture-handler.
+
 Check the [react-native-gesture-handler](https://docs.swmansion.com/react-native-gesture-handler/docs/fundamentals/installation) docs.
 
-3. Install react-native-svg.
+Check the [react-native-worklets](https://docs.swmansion.com/react-native-worklets/docs/) docs.
+
+Check the [react-native-svg](https://github.com/software-mansion/react-native-svg?tab=readme-ov-file#installation) docs.
+
+Check the [react-native-portal](https://github.com/gorhom/react-native-portal) docs.
+
+## Varia setup
+
+Now you need to run:
+
+```
+npx varia setup
+```
+
+This will copy the mixins, types and utils files from **lib** into **src/style/varia**.
+
+## About ColorPalettes
+
+React Native Varia uses a color palette system to provide a consistent color scheme for your app. It is based on Radix color palette system.
+Check the [Radix Color Palettes](https://www.radix-ui.com/colors/docs/palette-composition/scales) for more information.
+
+Check how to [Compose a color palette](https://www.radix-ui.com/colors/docs/palette-composition/composing-a-palette) for more information.
+
+Varia has the same color palettes as Radix built-in.
+In the next section you will learn how to add them.
+
+## Creating your Theme
+
+After setting up react-native unistyles theme, you will need to update it, to include the color palette system and default token needed for varia components.
+
+In you src/style/themes.ts file, you will need to update it, to include the color palettes you will use:
+
+```ts
+import {tomato} from './varia/colorPalettes/tomato'
+import {teal} from './varia/colorPalettes/teal'
+import {slate} from './varia/colorPalettes/slate'
+import {iris} from './varia/colorPalettes/iris'
+```
+
+Create a your preset with them, following how to [Compose a color palette](https://www.radix-ui.com/colors/docs/palette-composition/composing-a-palette) from radix you will set an accent and a gray color palette, and a red color palette is needed as well for default error styling in the components:
+
+```ts
+import {slate} from './varia/colorPalettes/slate'
+import {iris} from './varia/colorPalettes/iris'
+import {red} from './varia/colorPalettes/red'
+
+export const colorPalettes = createPreset({
+  accent: iris,
+  gray: slate,
+  red,
+})
+```
 
-`yarn add react-native-svg`
+Beside those color palettes you can add more optional color palettes to your theme.
+
+```ts
+import {lime} from './varia/colorPalettes/lime'
+import {olive} from './varia/colorPalettes/olive'
+import {red} from './varia/colorPalettes/red'
+import {yellow} from './varia/colorPalettes/yellow'
+import {forest} from './varia/colorPalettes/forest'
+
+export const colorPalettes = createPreset({
+  accent: lime,
+  gray: olive,
+  red,
+  yellow,
+  forest,
+})
+```
+
+Include de default theme tokens:
+
+```ts
+import {
+  defaultColors,
+  defaultFontSizes,
+  defaultFontWeights,
+  defaultRadii,
+  defaultShadows,
+  defaultSizes,
+  defaultSpacing,
+} from './varia/defaultTheme'
+```
+
+Create the base theme, here you can override the default tokens with whatever you want:
+
+```ts
+export const base = {
+  colors: {
+    ...defaultColors,
+  },
+  fontWeights: {
+    ...defaultFontWeights,
+  },
+  sizes: {
+    ...defaultSizes,
+  },
+  fontSizes: {
+    ...defaultFontSizes,
+  },
+  spacing: {
+    ...defaultSpacing,
+  },
+  radii: {
+    ...defaultRadii,
+  },
+} as const
+```
+
+Get the shadows tokens:
+
+```ts
+const lightShadows = defaultShadows(colorPalettes.light)
+const darkShadows = defaultShadows(colorPalettes.dark)
+```
+
+Ensamble the light and dark theme, you can add extend here with independent light and dark colors:
+
+```ts
+export const lightTheme = {
+  colors: {
+    ...base.colors,
+    ...colorPalettes.light,
+  },
+  fontSizes: base.fontSizes,
+  fontWeights: base.fontWeights,
+  spacing: base.spacing,
+  radii: base.radii,
+  sizes: base.sizes,
+  shadows: {
+    ...lightShadows,
+  },
+} as const
+
+export const darkTheme = {
+  colors: {
+    ...base.colors,
+    ...colorPalettes.dark,
+  },
+  fontSizes: base.fontSizes,
+  fontWeights: base.fontWeights,
+  spacing: base.spacing,
+  radii: base.radii,
+  sizes: base.sizes,
+  shadows: {
+    ...darkShadows,
+  },
+} as const
+```
 
 ## ⚙️ Available Commands
 
@@ -47,7 +209,11 @@ Once installed, you can use the following commands via `npx varia`:
 
 | Command                          | Description                                                                      |
 | -------------------------------- | -------------------------------------------------------------------------------- |
-| `npx varia setup`                | Copies the mixins, types and utils files from **lib** into **src/style**.        |
-| `npx varia add <component_name>` | Copies the specified component from **lib/components** into your project.        |
+| `npx varia setup`                | Adds the mixins, types and utils files from to **src/style/varia**.              |
+| `npx varia add <component_name>` | Adds the specified component into your project **src/components**.               |
 | `npx varia add-icon <icon_name>` | Copies the **Icon.tsx** template and renames it to the specified icon name.      |
 | `npx varia add-patterns`         | Copies the entire **lib/patterns** folder into **src/patterns** in your project. |
+
+```
+
+```

package/lib/components/Badge.tsx

@@ -40,22 +40,14 @@ const Badge = ({
 
   const displayedContent = max && content > max ? `${max}+` : content
 
-  // @ts-ignore
-  const badgeSize = BadgeStyles.container(colorPalette).minWidth
-  const withoutChildrenSize = !children ? badgeSize : 'auto'
-
-  return (
-    <HStack
-      style={{
-        position: 'relative',
-        minWidth: withoutChildrenSize,
-        height: withoutChildrenSize,
-      }}>
-      {children && children}
+  return children ? (
+    <HStack style={{position: 'relative'}}>
+      {children}
       <View
         testID="varia-badge"
         style={[
-          styles.badge(x, y),
+          styles.badge,
+          styles.badgeAbsolute(x, y),
           BadgeStyles.container(colorPalette),
           mixins && mixins,
         ]}>
@@ -64,18 +56,23 @@ const Badge = ({
         </Text>
       </View>
     </HStack>
+  ) : (
+    <View
+      testID="varia-badge"
+      style={[
+        styles.badge,
+        BadgeStyles.container(colorPalette),
+        mixins && mixins,
+      ]}>
+      <Text style={[styles.text, BadgeStyles.text(colorPalette)]}>
+        {displayedContent}
+      </Text>
+    </View>
   )
 }
 
 const styles = StyleSheet.create({
-  badge: (x, y) => ({
-    position: 'absolute',
-    [y]: 0,
-    [x]: 0,
-    transform: [
-      {translateY: y === 'top' ? '-30%' : '30%'},
-      {translateX: x === 'left' ? '-30%' : '30%'},
-    ],
+  badge: {
     paddingVertical: 1,
     paddingHorizontal: 6,
     zIndex: 1,
@@ -83,6 +80,15 @@ const styles = StyleSheet.create({
     borderWidth: 1,
     alignItems: 'center',
     justifyContent: 'center',
+  },
+  badgeAbsolute: (x, y) => ({
+    position: 'absolute',
+    [y]: 0,
+    [x]: 0,
+    transform: [
+      {translateY: y === 'top' ? '-50%' : '50%'},
+      {translateX: x === 'left' ? '-50%' : '50%'},
+    ],
   }),
   text: {
     textAlign: 'center',

package/lib/components/Button.tsx

@@ -3,7 +3,7 @@ import {StyleSheet, UnistylesVariants} from 'react-native-unistyles'
 import {ButtonStyles, ButtonDefaultVariants} from '../theme/Button.recipe'
 import {useMemo} from 'react'
 import {IconWrapperProps} from './IconWrapper'
-import Spinner from './Spinner'
+import Spinner, {SpinnerProps} from './Spinner'
 import {PalettesWithNestedKeys} from '../style/varia/types'
 
 type TextAdjustment = 'singleLine' | 'multiline' | 'adjustToFit'
@@ -75,7 +75,6 @@ const Button = ({
         rotation: icon.rotation,
         scale: icon.scale,
         colorPalette,
-        //@ts-ignore
         size: icon.size,
         color: ButtonStyles.text(colorPalette).color,
       }}
@@ -93,10 +92,8 @@ const Button = ({
       disabled={disabled || loading}>
       {loading ? (
         <Spinner
-          //@ts-ignore
-          size={ButtonStyles.text.fontSize}
-          //@ts-ignore
-          color={ButtonStyles.text.color}
+          size={size as SpinnerProps['size']}
+          color={ButtonStyles.text(colorPalette).color}
         />
       ) : (
         <>

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,
@@ -46,17 +46,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]
@@ -108,7 +97,7 @@ const BaseCircleProgress = ({
   })
 
   return (
-    <View style={styles.container} ref={container}>
+    <View style={styles.container}>
       <Svg
         width="100%"
         height="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}

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'
 

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

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/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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-native-varia",
-  "version": "0.2.0",
+  "version": "0.2.2",
   "bin": {
     "varia": "bin/cli.js"
   },

package/lib/components/SelectOld.tsx

@@ -1,153 +0,0 @@
-import React, {useState} from 'react'
-import {
-  View,
-  Text,
-  TouchableOpacity,
-  ScrollView,
-  TouchableWithoutFeedback,
-} from 'react-native'
-import {StyleSheet} from 'react-native-unistyles'
-import {SelectStyles, SelectDefaultVariants} from '../theme/Select.recipe'
-import {PalettesWithNestedKeys} from '../style/varia/types'
-import {UnistylesVariants} from 'react-native-unistyles'
-import {Modal} from './Modal'
-
-type SelectVariants = UnistylesVariants<typeof SelectStyles>
-
-interface Option {
-  label: string
-  value: string
-}
-
-type SelectProps = SelectVariants & {
-  options: Option[]
-  value?: string
-  onChange?: (value: string) => void
-  onBlur?: () => void
-  defaultValue?: string
-  placeholder?: string
-  colorPalette?: PalettesWithNestedKeys
-  flex?: number
-}
-
-export const Select = ({
-  options,
-  value: propValue,
-  onChange: propOnChange,
-  onBlur: propOnBlur,
-  defaultValue = '',
-  placeholder = 'Selecciona una opción',
-  variant = SelectDefaultVariants.variant,
-  size = SelectDefaultVariants.size,
-  colorPalette = 'accent',
-  flex = 1,
-}: SelectProps) => {
-  SelectStyles.useVariants({
-    variant,
-    size,
-  })
-
-  const [isOpen, setIsOpen] = useState(false)
-  const [internalValue, setInternalValue] = useState<string>(defaultValue)
-
-  const isControlled = propValue !== undefined && propOnChange !== undefined
-
-  const value = isControlled ? propValue! : internalValue
-
-  const handleSelect = (val: string) => {
-    if (isControlled) {
-      propOnChange!(val)
-    } else {
-      setInternalValue(val)
-    }
-    setIsOpen(false)
-  }
-
-  const selectedOption = options.find(opt => opt.value === value)
-
-  return (
-    <>
-      <TouchableWithoutFeedback
-        onPress={() => {
-          setIsOpen(true)
-          propOnBlur?.()
-        }}>
-        <View
-          style={[
-            styles.container(flex),
-            SelectStyles.container(colorPalette),
-          ]}>
-          <View style={[styles.input, SelectStyles.input(colorPalette)]}>
-            <Text
-              style={[SelectStyles.valueText(colorPalette, !!selectedOption)]}>
-              {selectedOption ? selectedOption.label : placeholder}
-            </Text>
-          </View>
-        </View>
-      </TouchableWithoutFeedback>
-
-      {/* Modal con lista de opciones */}
-      <Modal.Root
-        isOpen={isOpen}
-        setIsOpen={setIsOpen}
-        colorPalette={colorPalette}
-        variant="outline"
-        portalHostName="select">
-        <Modal.Overlay variant={'outline'} customStyle={SelectStyles}>
-          <Modal.Content>
-            <Modal.Body>
-              <ScrollView
-                style={[SelectStyles.ModalContainer(colorPalette)]}
-                contentContainerStyle={[
-                  SelectStyles.itemsContainer(colorPalette),
-                ]}>
-                {options.map(item => (
-                  <TouchableOpacity
-                    key={item.value}
-                    onPress={() => handleSelect(item.value)}>
-                    <View
-                      style={[
-                        styles.item,
-                        SelectStyles.item(
-                          colorPalette,
-                          selectedOption?.value === item.value,
-                        ),
-                      ]}>
-                      <Text
-                        style={SelectStyles.itemText(
-                          colorPalette,
-                          selectedOption?.value === item.value,
-                        )}>
-                        {item.label}
-                      </Text>
-                    </View>
-                  </TouchableOpacity>
-                ))}
-              </ScrollView>
-            </Modal.Body>
-          </Modal.Content>
-        </Modal.Overlay>
-      </Modal.Root>
-    </>
-  )
-}
-
-const styles = StyleSheet.create({
-  container: (flex: number) => ({
-    flexGrow: flex,
-    flexDirection: 'row',
-    justifyContent: 'center',
-  }),
-  input: {
-    flex: 1,
-    flexDirection: 'row',
-    alignItems: 'center',
-    justifyContent: 'center',
-  },
-  item: {
-    paddingVertical: 2,
-    paddingHorizontal: 8,
-    alignItems: 'center',
-    flexDirection: 'row',
-  },
-})

package/lib/components/Switchold.tsx

@@ -1,174 +0,0 @@
-import {TouchableWithoutFeedback} from 'react-native'
-import Animated, {
-  Easing,
-  useAnimatedStyle,
-  useSharedValue,
-  withSpring,
-  withTiming,
-} from 'react-native-reanimated'
-import {StyleSheet, UnistylesVariants} from 'react-native-unistyles'
-import {useAnimatedVariantColor} from 'react-native-unistyles/reanimated'
-import {useLayoutEffect, useRef, useState} from 'react'
-import {SwitchTokens, SwitchStyles} from '../theme/Switch.recipe'
-import {PalettesWithNestedKeys} from '../style/varia/types'
-
-const animations = {
-  withSpring,
-  withTiming,
-}
-
-type AnimationType = 'withSpring' | 'withTiming'
-
-type SwitchVariants = UnistylesVariants<typeof SwitchStyles>
-
-type SwitchProps = SwitchVariants & {
-  colorPalette?: PalettesWithNestedKeys
-  value?: boolean
-  animation?: keyof typeof SwitchTokens.variants.animation
-  onValueChange?: (value: boolean) => void
-  flex?: number
-}
-
-const Switch = ({
-  colorPalette = 'accent',
-  value,
-  animation = SwitchTokens.defaultProps.animation,
-  onValueChange = () => {},
-  variant = SwitchTokens.defaultProps.variant,
-  size = SwitchTokens.defaultProps.size,
-  flex = 1,
-}: SwitchProps) => {
-  const animatedRef = useRef(null)
-
-  SwitchStyles.useVariants({
-    variant,
-    size,
-    enabled: value,
-  })
-
-  const animationVariant =
-    SwitchTokens.variants?.animation && animation
-      ? SwitchTokens.variants.animation[animation]
-      : {
-          type: 'withSpring' as AnimationType,
-          props: {
-            damping: 15,
-            stiffness: 100,
-            mass: 1,
-          },
-        }
-  console.log('🚀 ~ animationVariant:', animationVariant)
-
-  const color = useAnimatedVariantColor(
-    SwitchStyles.container(colorPalette),
-    'backgroundColor',
-  )
-  const thumbColor = useAnimatedVariantColor(
-    SwitchStyles.thumb(colorPalette),
-    'backgroundColor',
-  )
-  const thumbEnabledPosition = useSharedValue(0)
-  const animatedValue = useSharedValue(0)
-  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
-    })
-  }, [])
-
-  const animatedStyle = useAnimatedStyle(() => {
-    return {
-      backgroundColor: animations[animationVariant.type](
-        color.value,
-        animationVariant.props,
-      ),
-      // backgroundColor: withTiming(color.value, {
-      //   duration: 100,
-      //   easing: Easing.ease,
-      // }),
-    }
-  })
-  const thumbAnimatedStyle = useAnimatedStyle(() => {
-    return {
-      backgroundColor: animations[animationVariant.type](
-        thumbColor.value,
-        animationVariant.props,
-      ),
-      // backgroundColor: withTiming(thumbColor.value, {
-      //   duration: 100,
-      //   easing: Easing.ease,
-      // }),
-    }
-  })
-
-  const circleTranslationStyle = useAnimatedStyle(() => {
-    return {
-      transform: [
-        {
-          translateX: animatedValue.value,
-        },
-      ],
-    }
-  })
-
-  return (
-    <TouchableWithoutFeedback
-      onPress={() => {
-        onValueChange(!value)
-        animatedValue.value = animations[animationVariant.type](
-          animatedValue.value === 0 ? thumbEnabledPosition.value : 0,
-          animationVariant.props,
-        )
-        // animatedValue.value = withTiming(
-        //   animatedValue.value === 0 ? thumbEnabledPosition.value : 0,
-        //   {duration: 100, easing: Easing.ease},
-        // )
-      }}>
-      <Animated.View
-        ref={animatedRef}
-        style={[
-          styles.container(flex),
-          animatedStyle,
-          SwitchStyles.container(colorPalette),
-        ]}>
-        <Animated.View
-          style={[
-            styles.thumb,
-            SwitchStyles.thumb(colorPalette),
-            thumbAnimatedStyle,
-            circleTranslationStyle,
-          ]}
-        />
-      </Animated.View>
-    </TouchableWithoutFeedback>
-  )
-}
-
-export default Switch
-
-const styles = StyleSheet.create((theme, rt) => ({
-  container: (flex: number) => ({
-    // flex,
-    flexGrow: flex,
-    flexShrink: 0,
-    alignSelf: 'flex-start',
-    flexDirection: 'row',
-    alignItems: 'center',
-    margin: 0,
-    borderRadius: 20,
-  }),
-  thumb: {
-    borderRadius: 9999,
-  },
-}))

package/lib/mixins.ts

@@ -1,180 +0,0 @@
-import {StyleSheet} from 'react-native-unistyles';
-import { ThemeColors } from '../src/style/types';
-import { extractThemeColor } from './utils';
-
-// const extractThemeColor = (color: ThemeColors, theme: any) => {
-//   return color in theme.colors ? theme.colors[color] : color;
-// }
-
-const mixins = StyleSheet.create((theme, rt) => ({
-  size: (width: number, height: number = width) => ({
-    width,
-    height,
-  }),
-  row: {
-    justifyContent: 'center',
-    flexDirection: 'row',
-  },
-  gap: (gap: number) => ({
-    gap,
-  }),
-  center: {
-    alignItems: 'center',
-    justifyContent: 'center',
-  },
-  sx: (sx: any) => ({
-    ...sx,
-  }),
-  w: (width: number) => ({
-    width,
-  }),
-  h: (height: number) => ({
-    height,
-  }),
-  bg: (backgroundColor: ThemeColors) => ({
-    backgroundColor: extractThemeColor(backgroundColor, theme),
-  }),
-  flexColumn: (flex: number = 1) => ({
-    flex,
-    width: '100%',
-  }),
-  flexRow: (flex: number = 1) => ({
-    flex,
-    height: '100%',
-  }),
-  minMaxW: (minWidth: number, maxWidth: number) => ({
-    minWidth,
-    maxWidth,
-  }),
-  minMaxH: (minHeight: number, maxHeight: number) => ({
-    minHeight,
-    maxHeight,
-  }),
-  vw: (amount: number) => ({
-    width:
-      ((rt.screen.width - rt.insets.left - rt.insets.right) * amount) / 100,
-  }),
-  vh: (amount: number) => ({
-    height:
-      ((rt.screen.height - rt.insets.top - rt.insets.bottom) * amount) / 100,
-  }),
-  vwh: (amount: number) => ({
-    width:
-      ((rt.screen.width - rt.insets.left - rt.insets.right) * amount) / 100,
-    height:
-      ((rt.screen.height - rt.insets.top - rt.insets.bottom) * amount) / 100,
-  }),
-  self: (
-    alignSelf: 'flex-start' | 'flex-end' | 'center' | 'baseline' | 'stretch',
-  ) => ({
-    alignSelf,
-  }),
-  justify: (
-    justifyContent:
-      | 'flex-start'
-      | 'flex-end'
-      | 'center'
-      | 'space-around'
-      | 'space-between'
-      | 'space-evenly',
-  ) => ({
-    justifyContent,
-  }),
-  rtl: {
-    direction: 'rtl',
-  },
-  ar: (aspectRatio: number) => ({
-    aspectRatio,
-  }),
-  br: (borderRadius: number) => ({
-    borderRadius,
-  }),
-  bw: (borderWidth: number) => ({
-    borderWidth,
-  }),
-  bc: (borderColor: ThemeColors) => ({
-    borderColor: extractThemeColor(borderColor, theme),
-  }),
-  border: (borderWidth: number, borderColor: ThemeColors) => ({
-    borderWidth,
-    borderColor: extractThemeColor(borderColor, theme),
-  }),
-  m: (margin: number) => ({
-    margin,
-  }),
-  mt: (marginTop: number) => ({
-    marginTop,
-  }),
-  mb: (marginBottom: number) => ({
-    marginBottom,
-  }),
-  ml: (marginLeft: number) => ({
-    marginLeft,
-  }),
-  mr: (marginRight: number) => ({
-    marginRight,
-  }),
-  mx: (marginHorizontal: number) => ({
-    marginHorizontal,
-  }),
-  my: (marginVertical: number) => ({
-    marginVertical,
-  }),
-  p: (padding: number) => ({
-    padding,
-  }),
-  pt: (paddingTop: number) => ({
-    paddingTop,
-  }),
-  pb: (paddingBottom: number) => ({
-    paddingBottom,
-  }),
-  pl: (paddingLeft: number) => ({
-    paddingLeft,
-  }),
-  pr: (paddingRight: number) => ({
-    paddingRight,
-  }),
-  px: (paddingHorizontal: number) => ({
-    paddingHorizontal,
-  }),
-  py: (paddingVertical: number) => ({
-    paddingVertical,
-  }),
-  t: (top: number = 0) => ({
-    position: 'absolute',
-    top,
-  }),
-  b: (bottom: number = 0) => ({
-    position: 'absolute',
-    bottom,
-  }),
-  l: (left: number = 0) => ({
-    position: 'absolute',
-    left,
-  }),
-  r: (right: number = 0) => ({
-    position: 'absolute',
-    right,
-  }),
-  static: {
-    position: 'static',
-  },
-  absolute: {
-    position: 'absolute',
-  },
-  relative: {
-    position: 'relative',
-  },
-  z: (zIndex: number) => ({
-    zIndex,
-  }),
-  opacity: (opacity: number) => ({
-    opacity,
-  }),
-  circle: {
-    borderRadius: 9999,
-  },
-}));
-
-export default mixins;

package/lib/types.ts

@@ -1,70 +0,0 @@
-import { darkTheme, lightTheme } from "./themes";
-
-const themes = {
-  light: lightTheme,
-  dark: darkTheme,
-};
-
-export type ColorsType = (typeof themes)[keyof typeof themes]['colors'];
-
-export type ThemeType = (typeof themes)[keyof typeof themes];
-
-export type TextSemanticSizes =
-  | 'h1'
-  | 'h2'
-  | 'h3'
-  | 'h4'
-  | 'h5'
-  | 'h6'
-  | 'h7'
-  | 'h8'
-  | 'h9'
-  | 'body';
-
-  export type directions =
-  | 'to top'
-  | 'to bottom'
-  | 'to left'
-  | 'to right'
-  | 'to top left'
-  | 'to top right'
-  | 'to bottom left'
-  | 'to bottom right';
-
-type ColorName = keyof ColorsType;
-
-type LooseString<T extends string> = T | (string & {});
-
-export type ThemeColors = LooseString<ColorName>;
-
-export function createGradientTokens<
-  const CP extends Record<string, { startColor: ThemeColors; endColor: ThemeColors }>
->(tokens: {
-  defaultProps: { colorPalette: keyof CP; direction: directions };
-  variants: {
-    direction: Record<directions, { x1: number; y1: number; x2: number; y2: number }>;
-    colorPalette: CP;
-  };
-}) {
-  return tokens;
-}
-
-type SVGSize = {
-  width: number;
-  height: number;
-  viewBoxWidth: number;
-  viewBoxHeight: number;
-}
-
-export function createIconTokens<
-  const CP extends Record<string, { color: ThemeColors }>
->(tokens: {
-  defaultProps: { colorPalette: keyof CP; size: any, scale: number };
-  variants: {
-    size: Record<string, SVGSize>;
-    colorPalette: CP;
-  };
-}) {
-  return tokens;
-}
-

package/lib/utils.ts

@@ -1,80 +0,0 @@
-export function hexToRgba(hex: string, alpha: number = 1) {
-  // Remove the leading '#' if present
-  hex = hex.replace(/^#/, '');
-
-  // Parse the red, green, and blue components
-  let r, g, b, a;
-
-  if (hex.length === 6) {
-    r = parseInt(hex.slice(0, 2), 16);
-    g = parseInt(hex.slice(2, 4), 16);
-    b = parseInt(hex.slice(4, 6), 16);
-    a = alpha; // Use the provided alpha value
-  } else if (hex.length === 8) {
-    r = parseInt(hex.slice(0, 2), 16);
-    g = parseInt(hex.slice(2, 4), 16);
-    b = parseInt(hex.slice(4, 6), 16);
-    a = parseInt(hex.slice(6, 8), 16) / 255; // Normalize alpha to 0-1
-  } else {
-    throw new Error('Invalid hex color format. Use #RRGGBB or #RRGGBBAA.');
-  }
-
-  return `rgba(${r}, ${g}, ${b}, ${a})`;
-} 
-
-import {Dimensions, PixelRatio} from 'react-native';
-import { ThemeColors } from '../src/style/types';
-
-const {width, height} = Dimensions.get('window');
-
-const guidelineBaseWidth = 375;
-const guidelineBaseHeight = 667;
-
-const scale = (size: number): number => (width / guidelineBaseWidth) * size;
-const verticalScale = (size: number): number =>
-  (height / guidelineBaseHeight) * size;
-const moderateScale = (size: number, factor: number = 0.5): number =>
-  size + (scale(size) - size) * factor;
-
-// FONT SCALING
-// Usage: nf(16)
-const scaleNew = height / 667;
-const normalizeFont = (size: number): number => {
-  const newSize = size * scaleNew;
-  return Math.round(PixelRatio.roundToNearestPixel(newSize));
-};
-
-// DYNAMIC DIMENSION CONSTANTS
-// Usage: wp(5), hp(20)
-const widthPercentageToDP = (widthPercent: string): number => {
-  // Convert string input to decimal number
-  const elemWidth = parseFloat(widthPercent);
-  return PixelRatio.roundToNearestPixel((width * elemWidth) / 100);
-};
-const heightPercentageToDP = (heightPercent: string): number => {
-  // Convert string input to decimal number
-  const elemHeight = parseFloat(heightPercent);
-  return PixelRatio.roundToNearestPixel((height * elemHeight) / 100);
-};
-
-// Usage: wpx(141), hpx(220)
-const widthFromPixel = (widthPx: number, w: number = 414): number =>
-  widthPx * (width / w);
-const heightFromPixel = (heightPx: number, h: number = 896): number =>
-  heightPx * (height / h);
-
-export {
-  scale,
-  verticalScale,
-  moderateScale,
-  normalizeFont as nf,
-  widthPercentageToDP as wp,
-  heightPercentageToDP as hp,
-  widthFromPixel as wpx,
-  heightFromPixel as hpx,
-};
-
-export const extractThemeColor = (color: ThemeColors, theme: any) => {
-  return color in theme.colors ? theme.colors[color] : color;
-}
-