@retray-dev/ui-kit 12.1.0 → 13.0.0

package/src/components/HolographicCard/HolographicCard.tsx

@@ -1,5 +1,5 @@
 import React, { useEffect, useMemo } from 'react'
-import { StyleSheet, ViewStyle, TouchableOpacity, Platform } from 'react-native'
+import { ViewStyle, Platform } from 'react-native'
 import {
   Canvas,
   Group,
@@ -15,14 +15,10 @@ import Animated, {
   useAnimatedStyle,
   withTiming,
 } from 'react-native-reanimated'
-import { usePressScale } from '../../utils/usePressScale'
-import { PRESS_SCALE } from '../../utils/animations'
+import { PressableCard } from '../../utils/pressable'
 import { impactLight } from '../../utils/haptics'
 import { RADIUS } from '../../tokens'
 
-// ─── Foil Color Presets ───────────────────────────────────────────────────────
-
-/** Available foil color preset names */
 export type FoilPreset = 
   | 'rainbow'
   | 'gold'
@@ -35,9 +31,7 @@ export type FoilPreset =
   | 'aurora'
   | 'neon'
 
-/** Foil color presets — each is an array of RGBA colors for the gradient */
 export const FOIL_PRESETS: Record<FoilPreset, string[]> = {
-  // Classic holographic rainbow
   rainbow: [
     'rgba(255, 0, 128, 0.45)',
     'rgba(255, 200, 0, 0.40)',
@@ -45,7 +39,6 @@ export const FOIL_PRESETS: Record<FoilPreset, string[]> = {
     'rgba(0, 170, 255, 0.45)',
     'rgba(180, 0, 255, 0.45)',
   ],
-  // Premium gold foil
   gold: [
     'rgba(255, 215, 0, 0.50)',
     'rgba(255, 180, 0, 0.45)',
@@ -53,7 +46,6 @@ export const FOIL_PRESETS: Record<FoilPreset, string[]> = {
     'rgba(255, 223, 128, 0.50)',
     'rgba(184, 134, 11, 0.45)',
   ],
-  // Chrome silver foil
   silver: [
     'rgba(192, 192, 192, 0.50)',
     'rgba(220, 220, 220, 0.45)',
@@ -61,7 +53,6 @@ export const FOIL_PRESETS: Record<FoilPreset, string[]> = {
     'rgba(240, 240, 240, 0.50)',
     'rgba(128, 128, 128, 0.45)',
   ],
-  // Deep space cosmic
   cosmic: [
     'rgba(75, 0, 130, 0.50)',
     'rgba(138, 43, 226, 0.45)',
@@ -69,7 +60,6 @@ export const FOIL_PRESETS: Record<FoilPreset, string[]> = {
     'rgba(0, 191, 255, 0.45)',
     'rgba(148, 0, 211, 0.50)',
   ],
-  // Emerald green luxury
   emerald: [
     'rgba(0, 201, 87, 0.50)',
     'rgba(46, 139, 87, 0.45)',
@@ -77,7 +67,6 @@ export const FOIL_PRESETS: Record<FoilPreset, string[]> = {
     'rgba(60, 179, 113, 0.45)',
     'rgba(0, 128, 0, 0.50)',
   ],
-  // Rose gold / pink
   rose: [
     'rgba(255, 105, 180, 0.50)',
     'rgba(255, 182, 193, 0.45)',
@@ -85,7 +74,6 @@ export const FOIL_PRESETS: Record<FoilPreset, string[]> = {
     'rgba(255, 20, 147, 0.45)',
     'rgba(199, 21, 133, 0.50)',
   ],
-  // Deep ocean blue
   ocean: [
     'rgba(0, 119, 190, 0.50)',
     'rgba(0, 180, 216, 0.45)',
@@ -93,7 +81,6 @@ export const FOIL_PRESETS: Record<FoilPreset, string[]> = {
     'rgba(144, 224, 239, 0.45)',
     'rgba(0, 150, 199, 0.50)',
   ],
-  // Hot fire gradient
   fire: [
     'rgba(255, 69, 0, 0.50)',
     'rgba(255, 140, 0, 0.45)',
@@ -101,7 +88,6 @@ export const FOIL_PRESETS: Record<FoilPreset, string[]> = {
     'rgba(255, 99, 71, 0.45)',
     'rgba(220, 20, 60, 0.50)',
   ],
-  // Aurora borealis
   aurora: [
     'rgba(0, 255, 127, 0.45)',
     'rgba(127, 255, 212, 0.40)',
@@ -109,7 +95,6 @@ export const FOIL_PRESETS: Record<FoilPreset, string[]> = {
     'rgba(138, 43, 226, 0.40)',
     'rgba(255, 20, 147, 0.45)',
   ],
-  // Neon cyberpunk
   neon: [
     'rgba(255, 0, 255, 0.55)',
     'rgba(0, 255, 255, 0.50)',
@@ -119,64 +104,29 @@ export const FOIL_PRESETS: Record<FoilPreset, string[]> = {
   ],
 }
 
-// Default preset
 const DEFAULT_FOIL_COLORS = FOIL_PRESETS.rainbow
-
-// ─── Tilt Configuration ───────────────────────────────────────────────────────
-
-/** Default max tilt in degrees */
 const DEFAULT_TILT_DEG = 10
-/** Default normalization factor (~30° of device rotation = full tilt) */
 const DEFAULT_NORM_FACTOR = Math.PI / 6
 
 export interface HolographicCardProps {
-  /** Card art — `require()` asset or `{ uri }`. Omitted = gradient-only foil surface. */
   source?: Parameters<typeof useImage>[0]
-  /** Card width (dp). Defaults to 300. */
   width?: number
-  /** Card height (dp). Defaults to `width * 1.4` (trading-card ratio). */
   height?: number
-  /** Corner radius (dp). Defaults to `RADIUS.md`. */
   borderRadius?: number
-  /** React to device motion (gyroscope) for parallax tilt + sheen. Defaults to true. */
   enableTilt?: boolean
-  /** Strength of the foil sheen, 0–1. Defaults to 1. */
   intensity?: number
-  /** Called when the card is pressed. */
   onPress?: () => void
   style?: ViewStyle
-
-  // ─── New Customization Props ────────────────────────────────────────────────
-
-  /** Foil color preset. Defaults to 'rainbow'. Ignored if `foilColors` is provided. */
   foilPreset?: FoilPreset
-  /** Custom foil gradient colors (array of RGBA strings). Overrides `foilPreset`. */
   foilColors?: string[]
-  /** Maximum tilt angle in degrees (0–45). Defaults to 10. */
   maxTiltDegrees?: number
-  /** Sensitivity of tilt to device motion (0.1–2). Higher = more responsive. Defaults to 1. */
   tiltSensitivity?: number
-  /** How far the sheen moves relative to tilt (0–1). Defaults to 0.6. */
   sheenSpread?: number
-  /** Animation duration for tilt smoothing in ms. Defaults to 80. */
   tiltAnimationDuration?: number
-  /** Perspective depth for 3D effect (200–2000). Defaults to 800. */
   perspective?: number
-  /** Blend mode for the foil overlay. Defaults to 'plus'. */
   blendMode?: 'plus' | 'screen' | 'overlay' | 'softLight' | 'hardLight'
 }
 
-/**
- * Holographic / foil trading-card surface (Pokémon-TCG style). Renders the art
- * on a Skia canvas with an animated rainbow sheen, and tilts in 3D toward device
- * motion. The sheen position tracks the tilt so the foil "catches the light".
- *
- * Deep-import only — keeps Skia out of the main bundle:
- *   `import { HolographicCard } from '@retray-dev/ui-kit/HolographicCard'`
- *
- * Requires the optional peers `@shopify/react-native-skia` and (for tilt)
- * `expo-sensors`. Without `expo-sensors` the card renders with a static sheen.
- */
 export function HolographicCard({
   source,
   width = 300,
@@ -186,7 +136,6 @@ export function HolographicCard({
   intensity = 1,
   onPress,
   style,
-  // New customization props
   foilPreset = 'rainbow',
   foilColors,
   maxTiltDegrees = DEFAULT_TILT_DEG,
@@ -197,25 +146,20 @@ export function HolographicCard({
   blendMode = 'plus',
 }: HolographicCardProps) {
   const h = height ?? width * 1.4
-  // Called unconditionally (rules of hooks); useImage returns null for a nullish source.
   const image = useImage((source ?? null) as Parameters<typeof useImage>[0])
 
-  // Clamp and compute values
   const clampedTilt = Math.max(0, Math.min(45, maxTiltDegrees))
   const clampedSensitivity = Math.max(0.1, Math.min(2, tiltSensitivity))
   const clampedSpread = Math.max(0, Math.min(1, sheenSpread))
   const clampedPerspective = Math.max(200, Math.min(2000, perspective))
-  
-  // Resolve foil colors: custom > preset > default
+
   const resolvedFoilColors = useMemo(() => {
     if (foilColors && foilColors.length >= 2) return foilColors
     return FOIL_PRESETS[foilPreset] ?? DEFAULT_FOIL_COLORS
   }, [foilColors, foilPreset])
 
-  // Normalization factor adjusted by sensitivity
   const normFactor = DEFAULT_NORM_FACTOR / clampedSensitivity
 
-  // Tilt in normalized [-1, 1] on each axis.
   const tiltX = useSharedValue(0)
   const tiltY = useSharedValue(0)
 
@@ -223,7 +167,6 @@ export function HolographicCard({
     if (!enableTilt || Platform.OS === 'web') return
     let remove: (() => void) | undefined
     let cancelled = false
-    // Dynamic import: expo-sensors is an optional peer. Absence = static sheen.
     import('expo-sensors')
       .then(({ DeviceMotion }) => {
         if (cancelled) return
@@ -237,21 +180,13 @@ export function HolographicCard({
         })
         remove = () => sub.remove()
       })
-      .catch(() => {
-        // expo-sensors not installed — leave tilt at rest.
-      })
+      .catch(() => {})
     return () => {
       cancelled = true
       remove?.()
     }
   }, [enableTilt, tiltX, tiltY, normFactor, tiltAnimationDuration])
 
-  // 3D parallax — perspective tilt of the whole card toward the device motion.
-  const { animatedStyle: pressStyle, onPressIn, onPressOut, hoverHandlers } = usePressScale({
-    pressScale: PRESS_SCALE.card,
-    disabled: !onPress,
-  })
-
   const tiltStyle = useAnimatedStyle(() => ({
     transform: [
       { perspective: clampedPerspective },
@@ -260,7 +195,6 @@ export function HolographicCard({
     ],
   }))
 
-  // Sheen sweeps across the card as it tilts.
   const start = useDerivedValue(() => vec(width * (0.5 - tiltX.value * clampedSpread), h * (0.5 - tiltY.value * clampedSpread)))
   const end = useDerivedValue(() => vec(width * (0.5 + tiltX.value * clampedSpread), h * (0.5 + tiltY.value * clampedSpread)))
 
@@ -268,13 +202,11 @@ export function HolographicCard({
 
   const canvas = (
     <Canvas style={{ width, height: h }}>
-      {/* Art clipped to the rounded card. */}
       {image ? (
         <Group clip={{ rect: rrct, rx: borderRadius, ry: borderRadius }}>
           <SkiaImage image={image} x={0} y={0} width={width} height={h} fit="cover" />
         </Group>
       ) : null}
-      {/* Foil sheen — additive rainbow gradient that tracks the tilt. */}
       <RoundedRect x={0} y={0} width={width} height={h} r={borderRadius} opacity={intensity} blendMode={blendMode}>
         <LinearGradient start={start} end={end} colors={resolvedFoilColors} />
       </RoundedRect>
@@ -288,28 +220,15 @@ export function HolographicCard({
   if (!onPress) return card
 
   return (
-    <Animated.View style={pressStyle}>
-      <TouchableOpacity
-        onPress={() => {
-          impactLight()
-          onPress()
-        }}
-        onPressIn={onPressIn}
-        onPressOut={onPressOut}
-        activeOpacity={1}
-        touchSoundDisabled={true}
-        accessibilityRole="imagebutton"
-        {...hoverHandlers}
-        style={styles.touch}
-      >
-        {card}
-      </TouchableOpacity>
-    </Animated.View>
+    <PressableCard
+      onPress={() => { impactLight(); onPress() }}
+      enabled
+      rippleColor="transparent"
+      touchSoundDisabled
+      accessibilityRole="imagebutton"
+      style={{ alignSelf: 'flex-start' }}
+    >
+      {card}
+    </PressableCard>
   )
 }
-
-const styles = StyleSheet.create({
-  touch: {
-    alignSelf: 'flex-start',
-  },
-})

package/src/components/IconButton/IconButton.tsx

@@ -9,7 +9,7 @@ import {
 import { impactLight } from '../../utils/haptics'
 import { useTheme } from '../../theme'
 import { s, ms } from '../../utils/scaling'
-import { renderIcon } from '../../utils/icons'
+import { Icon } from '../../utils/icons'
 import { PressableButton } from '../../utils/pressable'
 
 // primary: filled primary
@@ -92,7 +92,7 @@ function IconButtonBase({
   const { container: containerSize, icon: iconSize } = sizeMap[size]
 
   const resolvedIcon: React.ReactNode = iconName
-    ? renderIcon(iconName, iconSize, iconColor ?? defaultIconColor)
+    ? <Icon name={iconName} size={iconSize} color={iconColor ?? defaultIconColor} />
     : icon
 
   // Badge rendering

package/src/components/IconPicker/IconPicker.tsx

@@ -8,8 +8,8 @@ import {
 } from '@gorhom/bottom-sheet'
 import { useSafeAreaInsets } from 'react-native-safe-area-context'
 import { useTheme } from '../../theme'
-import { renderIcon } from '../../utils/icons'
-import { CURATED_ICONS, ALL_CURATED_ICONS } from '../../utils/curatedIcons'
+import { Icon } from '../../utils/icons'
+import { getCuratedCategories, getAllCuratedIcons } from '../../utils/curatedIcons'
 import { selectionAsync as hapticSelection, impactMedium } from '../../utils/haptics'
 import { s, vs, ms } from '../../utils/scaling'
 import { RADIUS } from '../../tokens'
@@ -54,7 +54,7 @@ function IconCell({ name, selected, size, onPress }: { name: string; selected: b
       accessibilityLabel={name}
       style={[styles.cell, { width: size, height: size, backgroundColor: bg }]}
     >
-      {renderIcon(name, ms(20), iconColor)}
+      <Icon name={name} size={ms(20)} color={iconColor} />
     </TouchableOpacity>
   )
 }
@@ -83,10 +83,11 @@ export function IconPicker({
   const sheetName = useId()
 
   const activeIcons = useMemo(() => {
+    const allIcons = getAllCuratedIcons()
     if (activeCategory) {
-      return CURATED_ICONS.find((c) => c.name === activeCategory)?.icons ?? ALL_CURATED_ICONS
+      return getCuratedCategories().find((c) => c.name === activeCategory)?.icons ?? allIcons
     }
-    return ALL_CURATED_ICONS
+    return allIcons
   }, [activeCategory])
 
   const gapPx = s(gap)
@@ -129,7 +130,7 @@ export function IconPicker({
     [],
   )
 
-  const selectedIcon = value ? renderIcon(value, ms(28), colors.foreground) : null
+  const selectedIcon = value ? <Icon name={value} size={ms(28)} color={colors.foreground} /> : null
 
   return (
     <View style={[styles.triggerContainer, style]}>
@@ -157,7 +158,7 @@ export function IconPicker({
           disabled && styles.triggerDisabled,
         ]}
       >
-        {selectedIcon ?? renderIcon('plus', ms(24), colors.foregroundMuted)}
+        {selectedIcon ?? <Icon name="plus" size={ms(24)} color={colors.foregroundMuted} />}
       </TouchableOpacity>
       {error ? (
         <Text
@@ -223,7 +224,7 @@ export function IconPicker({
                     activeOpacity={0.7}
                     touchSoundDisabled={true}
                     accessibilityRole="button"
-                    accessibilityLabel="Todos"
+                    accessibilityLabel="Todas"
                     accessibilityState={{ selected: activeCategory === null }}
                     style={[
                       styles.categoryChip,
@@ -234,7 +235,7 @@ export function IconPicker({
                     ]}
                   >
                     <View style={styles.categoryChipInner}>
-                      {renderIcon('grid', ms(14), activeCategory === null ? colors.primaryForeground : colors.foregroundSubtle)}
+                      <Icon name="grid" size={ms(14)} color={activeCategory === null ? colors.primaryForeground : colors.foregroundSubtle} />
                       <Text
                         style={[
                           styles.categoryChipText,
@@ -243,11 +244,11 @@ export function IconPicker({
                         allowFontScaling={true}
                         numberOfLines={1}
                       >
-                        Todos
+                        Todas
                       </Text>
                     </View>
                   </TouchableOpacity>
-                  {CURATED_ICONS.map((cat) => (
+                  {getCuratedCategories().map((cat) => (
                     <TouchableOpacity
                       key={cat.name}
                       onPress={() => setActiveCategory(cat.name)}
@@ -265,7 +266,7 @@ export function IconPicker({
                       ]}
                     >
                       <View style={styles.categoryChipInner}>
-                        {renderIcon(cat.categoryIcon, ms(14), activeCategory === cat.name ? colors.primaryForeground : colors.foregroundSubtle)}
+                        <Icon name={cat.categoryIcon} size={ms(14)} color={activeCategory === cat.name ? colors.primaryForeground : colors.foregroundSubtle} />
                         <Text
                           style={[
                             styles.categoryChipText,

package/src/components/ImageUpload/ImageUpload.tsx

@@ -1,5 +1,6 @@
-import React from 'react'
-import { View, Text, Image, StyleSheet, ViewStyle, Platform } from 'react-native'
+import React, { useState } from 'react'
+import { Image } from 'expo-image'
+import { View, Text, StyleSheet, ViewStyle } from 'react-native'
 import { Feather } from '@expo/vector-icons'
 import { impactLight } from '../../utils/haptics'
 import { useTheme } from '../../theme'
@@ -27,65 +28,58 @@ export interface ImageUploadProps {
   borderRadius?: number
   /** Aspect ratio for the selected image. Defaults to 'cover'. */
   resizeMode?: 'cover' | 'contain' | 'stretch'
+  /** Whether to allow the user to crop the image after selecting. Defaults to true. */
+  allowsEditing?: boolean
   disabled?: boolean
   style?: ViewStyle
   accessibilityLabel?: string
+  /** Called synchronously when user taps the upload area, before dynamic import and permission request. */
+  onPickerStarting?: () => void
 }
 
 export function ImageUpload({
   value,
   onChange,
   loading = false,
-  placeholder = 'Tap to add image',
+  placeholder = 'Toca para añadir imagen',
   showPlaceholderText = true,
   width,
   height = 200,
   borderRadius = RADIUS.lg,
   resizeMode = 'cover',
+  allowsEditing = true,
   disabled = false,
   style,
   accessibilityLabel,
+  onPickerStarting,
 }: ImageUploadProps) {
   const { colors } = useTheme()
+  const [imageLoaded, setImageLoaded] = useState(false)
 
   const handlePress = async () => {
     if (disabled || loading) return
     impactLight()
 
-    // Dynamic import so expo-image-picker is optional at module load time.
-    // Import ExponentImagePicker (the raw native module proxy) directly to
-    // avoid expo-image-picker's top-level createPermissionHook dependency.
+    onPickerStarting?.()
+
     // eslint-disable-next-line @typescript-eslint/no-explicit-any
     let picker: any
     try {
-      const mod = await import('expo-image-picker/build/ExponentImagePicker')
-      picker = (mod as { default: unknown }).default
+      // eslint-disable-next-line @typescript-eslint/no-require-imports
+      picker = require('expo-image-picker')
     } catch {
-      // Fallback: try the main module
-      try {
-        picker = await import('expo-image-picker')
-      } catch {
-        if (__DEV__) console.warn('[ImageUpload] expo-image-picker not installed.')
-        return
-      }
-    }
-
-    if (Platform.OS !== 'web') {
-      try {
-        const { status } = await picker.requestMediaLibraryPermissionsAsync()
-        if (status !== 'granted') return
-      } catch {
-        // Permission check failed — try picker anyway
-      }
+      if (__DEV__) console.warn('[ImageUpload] expo-image-picker not installed.')
+      return
     }
 
     const result = await picker.launchImageLibraryAsync({
       mediaTypes: ['images'],
-      allowsEditing: true,
+      allowsEditing,
       quality: 0.8,
     })
 
     if (!result.canceled && result.assets?.[0]) {
+      setImageLoaded(false)
       onChange?.(result.assets[0].uri)
     }
   }
@@ -97,7 +91,7 @@ export function ImageUpload({
     borderWidth: value ? 0 : 1,
     borderStyle: 'dashed',
     borderColor: colors.border,
-    backgroundColor: value ? 'transparent' : colors.surface,
+    backgroundColor: (value && imageLoaded) ? 'transparent' : colors.surface,
     overflow: 'hidden',
   }
 
@@ -108,7 +102,7 @@ export function ImageUpload({
       rippleColor="transparent"
       touchSoundDisabled
       accessibilityRole="button"
-      accessibilityLabel={accessibilityLabel ?? (value ? 'Change image' : placeholder)}
+      accessibilityLabel={accessibilityLabel ?? (value ? 'Cambiar imagen' : placeholder)}
       accessibilityState={{ disabled: disabled || loading }}
       style={[containerStyle, style]}
     >
@@ -116,7 +110,9 @@ export function ImageUpload({
         <Image
           source={{ uri: value }}
           style={[StyleSheet.absoluteFillObject, { borderRadius }]}
-          resizeMode={resizeMode}
+          contentFit={resizeMode === 'stretch' ? 'fill' : resizeMode}
+          onLoad={() => setImageLoaded(true)}
+          onError={() => setImageLoaded(true)}
         />
       ) : (
         <View style={styles.placeholder}>

package/src/components/ImageViewer/ImageViewer.tsx

@@ -1,8 +1,8 @@
 import React, { useState, useCallback } from 'react'
+import { Image } from 'expo-image'
 import {
   Modal,
   View,
-  Image,
   Dimensions,
   StyleSheet,
   useWindowDimensions,
@@ -105,7 +105,7 @@ function ZoomableImage({ source, width, height, onZoomChange }: ZoomableImagePro
     <GestureDetector gesture={composed}>
       <View style={[{ width, height }, styles.imageWrap]} collapsable={false}>
         <Animated.View style={[{ width, height }, animatedStyle]}>
-          <Image source={source} style={{ width, height }} resizeMode="contain" />
+          <Image source={source} style={{ width, height }} contentFit="contain" />
         </Animated.View>
       </View>
     </GestureDetector>
@@ -235,7 +235,7 @@ export function ImageViewer({ images, visible, onClose, initialIndex = 0 }: Imag
               style={{ backgroundColor: 'rgba(255,255,255,0.18)' }}
               iconColor="#fff"
               onPress={onClose}
-              accessibilityLabel="Close"
+              accessibilityLabel="Cerrar"
             />
           </View>
 

package/src/components/Input/Input.tsx

@@ -5,7 +5,7 @@ import { EaseView } from 'react-native-ease'
 import { AntDesign } from '@expo/vector-icons'
 import { useTheme } from '../../theme'
 import { s, vs, ms } from '../../utils/scaling'
-import { renderIcon } from '../../utils/icons'
+import { Icon } from '../../utils/icons'
 import { COLOR_TRANSITION } from '../../utils/animations'
 
 const webInputResetStyle: Record<string, unknown> =
@@ -33,7 +33,7 @@ export interface InputProps extends TextInputProps {
   sheetMode?: boolean
 }
 
-export function Input({ label, error, hint, disabled, prefix, suffix, prefixStyle, suffixStyle, prefixIcon, suffixIcon, prefixIconColor, suffixIconColor, type = 'text', containerStyle, inputWrapperStyle, sheetMode = false, style, onFocus, onBlur, secureTextEntry, editable, accessibilityLabel, ...props }: InputProps) {
+export function Input({ label, error, hint, disabled, prefix, suffix, prefixStyle, suffixStyle, prefixIcon, suffixIcon, prefixIconColor, suffixIconColor, type = 'text', containerStyle, inputWrapperStyle, sheetMode = false, style, onFocus, onBlur, secureTextEntry, editable, accessibilityLabel, autoCapitalize, autoCorrect, ...props }: InputProps) {
   const { colors } = useTheme()
   const [focused, setFocused] = useState(false)
   const [showPassword, setShowPassword] = useState(false)
@@ -41,9 +41,11 @@ export function Input({ label, error, hint, disabled, prefix, suffix, prefixStyl
   const isDisabled = disabled || editable === false
   const isPassword = type === 'password'
   const effectiveSecure = isPassword ? !showPassword : secureTextEntry
+  const effectiveAutoCapitalize = isPassword ? 'none' : autoCapitalize
+  const effectiveAutoCorrect = isPassword ? false : autoCorrect
 
   const effectivePrefix: React.ReactNode = prefixIcon
-    ? renderIcon(prefixIcon, 20, prefixIconColor ?? colors.foregroundMuted)
+    ? <Icon name={prefixIcon} size={20} color={prefixIconColor ?? colors.foregroundMuted} />
     : prefix
 
   const effectiveSuffix: React.ReactNode = isPassword && !suffix && !suffixIcon ? (
@@ -54,12 +56,12 @@ export function Input({ label, error, hint, disabled, prefix, suffix, prefixStyl
       style={styles.passwordToggle}
       activeOpacity={0.6}
       accessibilityRole="button"
-      accessibilityLabel={showPassword ? 'Hide password' : 'Show password'}
+      accessibilityLabel={showPassword ? 'Ocultar contraseña' : 'Mostrar contraseña'}
     >
       <AntDesign name={showPassword ? 'eye' : 'eye-invisible'} size={20} color={colors.foregroundMuted} />
     </TouchableOpacity>
   ) : suffixIcon
-    ? renderIcon(suffixIcon, 20, suffixIconColor ?? colors.foregroundMuted)
+    ? <Icon name={suffixIcon} size={20} color={suffixIconColor ?? colors.foregroundMuted} />
     : suffix
 
   // Border color animated via EaseView. Width is static (1px normal, 2px error)
@@ -109,6 +111,8 @@ export function Input({ label, error, hint, disabled, prefix, suffix, prefixStyl
             secureTextEntry={effectiveSecure}
             editable={isDisabled ? false : editable}
             accessibilityLabel={accessibilityLabel ?? label}
+            autoCapitalize={effectiveAutoCapitalize}
+            autoCorrect={effectiveAutoCorrect}
             {...props}
           />
         ) : (
@@ -132,6 +136,8 @@ export function Input({ label, error, hint, disabled, prefix, suffix, prefixStyl
             secureTextEntry={effectiveSecure}
             editable={isDisabled ? false : editable}
             accessibilityLabel={accessibilityLabel ?? label}
+            autoCapitalize={effectiveAutoCapitalize}
+            autoCorrect={effectiveAutoCorrect}
             {...props}
           />
         )}

package/src/components/LabelValue/LabelValue.tsx

@@ -2,7 +2,7 @@ import React from 'react'
 import { View, Text, StyleSheet, ViewStyle } from 'react-native'
 import { useTheme } from '../../theme'
 import { s, ms, mvs } from '../../utils/scaling'
-import { renderIcon } from '../../utils/icons'
+import { Icon } from '../../utils/icons'
 
 export interface LabelValueProps {
   label: string
@@ -18,7 +18,7 @@ function LabelValueBase({ label, value, iconName, iconColor, style }: LabelValue
   const { colors } = useTheme()
 
   const resolvedIcon = iconName
-    ? renderIcon(iconName, ms(14), iconColor ?? colors.foregroundMuted)
+    ? <Icon name={iconName} size={ms(14)} color={iconColor ?? colors.foregroundMuted} />
     : null
 
   return (

package/src/components/ListItem/ListItem.tsx

@@ -1,18 +1,18 @@
 import React from 'react'
+import { Image } from 'expo-image'
 import {
   View,
   Text,
   StyleSheet,
   ViewStyle,
   TextStyle,
-  Image,
   ImageSourcePropType,
 } from 'react-native'
 import { Entypo } from '@expo/vector-icons'
 import { selectionAsync as hapticSelection } from '../../utils/haptics'
 import { useTheme } from '../../theme'
 import { s, vs, ms, mvs } from '../../utils/scaling'
-import { renderIcon } from '../../utils/icons'
+import { Icon } from '../../utils/icons'
 import { RADIUS } from '../../tokens'
 import { PressableRow } from '../../utils/pressable'
 
@@ -122,7 +122,7 @@ function ListItemBase({
   const effectiveLeft: React.ReactNode = imageSource
     ? <Image source={imageSource} style={styles.image} />
     : leftIcon
-      ? renderIcon(leftIcon, 24, leftIconColor ?? colors.foreground)
+      ? <Icon name={leftIcon} size={24} color={leftIconColor ?? colors.foreground} />
       : leftRender
 
   const hasRightContent = !!(rightIcon || (rightActions && rightActions.length > 0) || rightRender !== undefined || showChevron)
@@ -181,7 +181,7 @@ function ListItemBase({
       {hasRightContent ? (
         rightIcon ? (
           <View style={styles.rightContainer}>
-            {renderIcon(rightIcon, 24, rightIconColor ?? colors.foregroundMuted)}
+            <Icon name={rightIcon} size={24} color={rightIconColor ?? colors.foregroundMuted} />
           </View>
         ) : rightActions && rightActions.length > 0 ? (
           <View style={styles.rightActionsContainer}>