@retray-dev/ui-kit 12.2.0 → 13.2.0

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'
 
@@ -85,6 +85,7 @@ export interface ListItemProps {
   captionStyle?: TextStyle
   /** Accessibility label override. Defaults to the title. */
   accessibilityLabel?: string
+  accessibilityHint?: string
 }
 
 function ListItemBase({
@@ -110,6 +111,7 @@ function ListItemBase({
   subtitleNumberOfLines = 2,
   captionStyle,
   accessibilityLabel,
+  accessibilityHint,
 }: ListItemProps) {
   const { colors } = useTheme()
 
@@ -122,7 +124,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 +183,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}>
@@ -221,6 +223,7 @@ function ListItemBase({
           activateOnHover
           accessibilityRole="button"
           accessibilityLabel={a11yLabel}
+          accessibilityHint={accessibilityHint}
           accessibilityState={{ disabled: !!disabled }}
         >
           {content}

package/src/components/MediaCard/MediaCard.tsx

@@ -1,7 +1,7 @@
 import React from 'react'
+import { Image } from 'expo-image'
 import {
   View,
-  Image,
   Text,
   TouchableOpacity,
   StyleSheet,
@@ -9,15 +9,12 @@ import {
   ImageSourcePropType,
   Platform,
 } from 'react-native'
-import Animated from 'react-native-reanimated'
 import { impactLight } from '../../utils/haptics'
 import { useTheme } from '../../theme'
 import { s, vs, ms, mvs } from '../../utils/scaling'
-import { renderIcon } from '../../utils/icons'
-import { useHover } from '../../utils/hover'
-import { usePressScale } from '../../utils/usePressScale'
-import { SPRINGS, PRESS_SCALE } from '../../utils/animations'
-import { RADIUS, SHADOWS } from '../../tokens'
+import { Icon } from '../../utils/icons'
+import { PressableCard } from '../../utils/pressable'
+import { RADIUS } from '../../tokens'
 
 export type MediaCardAspectRatio = '1:1' | '4:3' | '16:9' | '4:5' | '3:2'
 
@@ -30,34 +27,20 @@ const aspectRatioMap: Record<MediaCardAspectRatio, number> = {
 }
 
 export interface MediaCardProps {
-  /** Image source — URI string or require(). */
   imageSource?: ImageSourcePropType
-  /** Image aspect ratio. Defaults to `'4:3'`. */
   aspectRatio?: MediaCardAspectRatio
-  /** Badge content rendered top-left over the image (e.g. a Badge component or Text). */
   badge?: React.ReactNode
-  /** Icon rendered in a circle button top-right over the image. Defaults to `'heart'`. */
   actionIcon?: React.ReactNode
-  /** Icon name for the action button. Overrides `actionIcon`. */
   actionIconName?: string
-  /** Whether the action icon is in active/filled state. */
   actionActive?: boolean
-  /** Called when the top-right action icon is pressed. */
   onActionPress?: () => void
-  /** Primary text below the image. */
   title?: string
-  /** Secondary text below the title. */
   subtitle?: string
-  /** Tertiary / caption text below subtitle. */
   caption?: string
-  /** Called when the card body is pressed. */
   onPress?: () => void
   style?: ViewStyle
-  /** Style for the image container. */
   imageStyle?: ViewStyle
-  /** Additional content rendered below caption. */
   footer?: React.ReactNode
-  /** Accessibility label override. Defaults to title (and subtitle if present). */
   accessibilityLabel?: string
 }
 
@@ -79,13 +62,6 @@ function MediaCardBase({
   accessibilityLabel,
 }: MediaCardProps) {
   const { colors } = useTheme()
-  const { hovered, hoverHandlers } = useHover()
-  const { animatedStyle, onPressIn, onPressOut } = usePressScale({
-    pressScale: PRESS_SCALE.card,
-    pressInSpring: SPRINGS.surfacePressIn,
-    pressOutSpring: SPRINGS.surfacePressOut,
-    disabled: !onPress,
-  })
 
   const handlePress = () => {
     if (!onPress) return
@@ -95,22 +71,14 @@ function MediaCardBase({
 
   const ratio = aspectRatioMap[aspectRatio]
 
-  // Action icon: active = primary fill, inactive = foreground outline
   const resolvedActionIcon = actionIconName
-    ? renderIcon(actionIconName, 18, actionActive ? colors.primary : colors.background)
-    : actionIcon ?? renderIcon('heart', 18, actionActive ? colors.primary : colors.background)
+    ? <Icon name={actionIconName} size={18} color={actionActive ? colors.primary : colors.background} />
+    : actionIcon ?? <Icon name="heart" size={18} color={actionActive ? colors.primary : colors.background} />
 
   const a11yLabel = accessibilityLabel ?? [title, subtitle].filter(Boolean).join('. ')
 
   const cardContent = (
-    <View
-      style={[
-        styles.card,
-        hovered && styles.cardHovered,
-        style,
-      ]}
-      {...(Platform.OS === 'web' ? hoverHandlers : {})}
-    >
+    <View style={[styles.card, style]}>
       <View style={[styles.imageContainer, imageStyle]}>
         <View style={{ paddingTop: `${ratio * 100}%` as `${number}%` }}>
           <View style={StyleSheet.absoluteFill}>
@@ -118,7 +86,7 @@ function MediaCardBase({
               <Image
                 source={imageSource}
                 style={styles.image}
-                resizeMode="cover"
+                contentFit="cover"
               />
             ) : (
               <View style={[styles.imagePlaceholder, { backgroundColor: colors.surface }]} />
@@ -136,16 +104,14 @@ function MediaCardBase({
           <TouchableOpacity
             style={[styles.actionButton, { backgroundColor: 'rgba(0,0,0,0.24)' }]}
             onPress={(e) => {
-              // Stop propagation to prevent triggering parent onPress
               e?.stopPropagation?.()
               impactLight()
               onActionPress?.()
             }}
             activeOpacity={0.8}
             touchSoundDisabled={true}
-            // On web, avoid nested <button> by using a non-button role when parent is pressable
             accessibilityRole={Platform.OS === 'web' && onPress ? undefined : 'button'}
-            accessibilityLabel={actionIconName ?? 'action'}
+            accessibilityLabel={actionIconName ?? 'acción'}
             accessibilityState={{ selected: actionActive }}
           >
             {resolvedActionIcon}
@@ -178,19 +144,18 @@ function MediaCardBase({
 
   if (onPress) {
     return (
-      <Animated.View style={animatedStyle}>
-        <TouchableOpacity
-          onPress={handlePress}
-          onPressIn={onPressIn}
-          onPressOut={onPressOut}
-          activeOpacity={1}
-          touchSoundDisabled={true}
-          accessibilityRole="button"
-          accessibilityLabel={a11yLabel}
-        >
-          {cardContent}
-        </TouchableOpacity>
-      </Animated.View>
+      <PressableCard
+        onPress={handlePress}
+        enabled
+        rippleColor="transparent"
+        touchSoundDisabled
+        activateOnHover
+        accessibilityRole="button"
+        accessibilityLabel={a11yLabel}
+        accessibilityState={{ disabled: false }}
+      >
+        {cardContent}
+      </PressableCard>
     )
   }
 
@@ -205,9 +170,6 @@ const styles = StyleSheet.create({
     overflow: 'hidden',
     backgroundColor: 'transparent',
   },
-  cardHovered: {
-    ...SHADOWS.md,
-  },
   imageContainer: {
     borderRadius: RADIUS.md,
     overflow: 'hidden',

package/src/components/MenuItem/MenuItem.tsx

@@ -10,7 +10,7 @@ import { Entypo } from '@expo/vector-icons'
 import { selectionAsync as hapticSelection } from '../../utils/haptics'
 import { useTheme } from '../../theme'
 import { s, vs, ms } from '../../utils/scaling'
-import { renderIcon } from '../../utils/icons'
+import { Icon } from '../../utils/icons'
 import { RADIUS } from '../../tokens'
 import { PressableRow } from '../../utils/pressable'
 
@@ -55,6 +55,7 @@ export interface MenuItemProps {
   labelStyle?: TextStyle
   /** Accessibility label override. Defaults to label. */
   accessibilityLabel?: string
+  accessibilityHint?: string
 }
 
 function MenuItemBase({
@@ -72,6 +73,7 @@ function MenuItemBase({
   style,
   labelStyle,
   accessibilityLabel,
+  accessibilityHint,
 }: MenuItemProps) {
   const { colors } = useTheme()
 
@@ -81,7 +83,7 @@ function MenuItemBase({
   }
 
   const resolvedIcon: React.ReactNode = iconName
-    ? renderIcon(iconName, 22, iconColor ?? colors.foreground)
+    ? <Icon name={iconName} size={22} color={iconColor ?? colors.foreground} />
     : icon
 
   const cardStyle: ViewStyle =
@@ -112,6 +114,7 @@ function MenuItemBase({
         activateOnHover
         accessibilityRole="button"
         accessibilityLabel={a11yLabel}
+        accessibilityHint={accessibilityHint}
         accessibilityState={{ disabled }}
       >
         {resolvedIcon ? (

package/src/components/MonthPicker/MonthPicker.tsx

@@ -83,7 +83,7 @@ export function MonthPicker({ value, onChange, minValue, maxValue, locale = 'en'
         activeOpacity={0.6}
         touchSoundDisabled={true}
         accessibilityRole="button"
-        accessibilityLabel="Previous month"
+        accessibilityLabel="Mes anterior"
         accessibilityState={{ disabled: prevDisabled }}
         hitSlop={{ top: 8, bottom: 8, left: 8, right: 8 }}
       >
@@ -103,7 +103,7 @@ export function MonthPicker({ value, onChange, minValue, maxValue, locale = 'en'
         activeOpacity={0.6}
         touchSoundDisabled={true}
         accessibilityRole="button"
-        accessibilityLabel="Next month"
+        accessibilityLabel="Mes siguiente"
         accessibilityState={{ disabled: nextDisabled }}
         hitSlop={{ top: 8, bottom: 8, left: 8, right: 8 }}
       >

package/src/components/NumberStepper/NumberStepper.tsx

@@ -3,7 +3,7 @@ import { View, Text, StyleSheet, ViewStyle } from 'react-native'
 import { impactLight } from '../../utils/haptics'
 import { useTheme } from '../../theme'
 import { s, ms, mvs } from '../../utils/scaling'
-import { renderIcon } from '../../utils/icons'
+import { Icon } from '../../utils/icons'
 import { RADIUS } from '../../tokens'
 import { PressableButton } from '../../utils/pressable'
 
@@ -19,6 +19,7 @@ export interface NumberStepperProps {
   disabled?: boolean
   style?: ViewStyle
   accessibilityLabel?: string
+  accessibilityHint?: string
 }
 
 const sizeConfig: Record<NumberStepperSize, { button: number; icon: number; valueFontSize: number; valueLineHeight: number; valueMinWidth: number }> = {
@@ -37,6 +38,7 @@ function NumberStepperBase({
   disabled = false,
   style,
   accessibilityLabel,
+  accessibilityHint,
 }: NumberStepperProps) {
   const { colors } = useTheme()
 
@@ -77,10 +79,11 @@ function NumberStepperBase({
         rippleColor="transparent"
         touchSoundDisabled
         accessibilityRole="button"
-        accessibilityLabel={`Decrease, current value ${displayValue}`}
+        accessibilityLabel={`Disminuir, valor actual ${displayValue}`}
+        accessibilityHint={accessibilityHint}
         accessibilityState={{ disabled: !canDecrement }}
       >
-        {renderIcon('minus', iconSize, canDecrement ? colors.foreground : colors.foregroundMuted)}
+        <Icon name="minus" size={iconSize} color={canDecrement ? colors.foreground : colors.foregroundMuted} />
       </PressableButton>
       <Text
         style={[
@@ -93,7 +96,7 @@ function NumberStepperBase({
           },
         ]}
         allowFontScaling={true}
-        accessibilityLabel={accessibilityLabel ?? `Quantity: ${displayValue}`}
+        accessibilityLabel={accessibilityLabel ?? `Cantidad: ${displayValue}`}
         accessibilityRole="text"
       >
         {displayValue}
@@ -114,10 +117,11 @@ function NumberStepperBase({
         rippleColor="transparent"
         touchSoundDisabled
         accessibilityRole="button"
-        accessibilityLabel={`Increase, current value ${displayValue}`}
+        accessibilityLabel={`Aumentar, valor actual ${displayValue}`}
+        accessibilityHint={accessibilityHint}
         accessibilityState={{ disabled: !canIncrement }}
       >
-        {renderIcon('plus', iconSize, canIncrement ? colors.foreground : colors.foregroundMuted)}
+        <Icon name="plus" size={iconSize} color={canIncrement ? colors.foreground : colors.foregroundMuted} />
       </PressableButton>
     </View>
   )

package/src/components/PagerDots/PagerDots.tsx

@@ -1,5 +1,5 @@
 import React, { useEffect } from 'react'
-import { View, TouchableOpacity, StyleSheet, ViewStyle } from 'react-native'
+import { View, StyleSheet, ViewStyle } from 'react-native'
 import Animated, {
   useSharedValue,
   useAnimatedStyle,
@@ -10,7 +10,8 @@ import { useTheme } from '../../theme'
 import { s } from '../../utils/scaling'
 import { SPRINGS } from '../../utils/animations'
 import { selectionAsync as hapticSelection } from '../../utils/haptics'
-import { renderIcon } from '../../utils/icons'
+import { Icon } from '../../utils/icons'
+import { PressableButton } from '../../utils/pressable'
 
 export interface PagerDotsProps {
   /** Total number of pages. */
@@ -23,7 +24,7 @@ export interface PagerDotsProps {
   showControls?: boolean | { onPrevious?: () => void; onNext?: () => void }
   /** Diameter of an inactive dot (dp). Defaults to 8. */
   dotSize?: number
-  /** Gap between dots (dp). Defaults to 8. */
+  /** Gap between dots (dp). Defaults to 4. */
   spacing?: number
   /** Active dot color. Defaults to theme `primary`. */
   activeColor?: string
@@ -53,7 +54,7 @@ function Dot({ active, size, activeColor, inactiveColor, onPress, index, total }
 
   // Active dot stretches into a pill (width = 2.5×). Color crossfades on the UI thread.
   const animatedStyle = useAnimatedStyle(() => ({
-    width: size + progress.value * size * 1.5,
+    width: size + progress.value * size,
     backgroundColor: interpolateColor(progress.value, [0, 1], [inactiveColor, activeColor]),
   }))
 
@@ -69,16 +70,17 @@ function Dot({ active, size, activeColor, inactiveColor, onPress, index, total }
   }
 
   return (
-    <TouchableOpacity
+    <PressableButton
       onPress={handlePress}
-      activeOpacity={0.7}
-      touchSoundDisabled={true}
+      rippleColor="transparent"
+      touchSoundDisabled
       accessibilityRole="button"
-      accessibilityLabel={`Page ${index + 1} of ${total}${active ? ', current page' : ''}`}
-      hitSlop={{ top: 8, bottom: 8, left: 4, right: 4 }}
+      accessibilityLabel={`Página ${index + 1} de ${total}${active ? ', página actual' : ''}`}
+      hitSlop={{ top: 10, bottom: 10, left: 18, right: 18 }}
+      style={styles.dotTouchable}
     >
       {dot}
-    </TouchableOpacity>
+    </PressableButton>
   )
 }
 
@@ -95,7 +97,7 @@ export function PagerDots({
   onDotPress,
   showControls = false,
   dotSize = 8,
-  spacing = 8,
+  spacing = 4,
   activeColor,
   inactiveColor,
   style,
@@ -133,21 +135,21 @@ export function PagerDots({
     <View
       style={[styles.container, { gap: s(spacing) }, style]}
       accessibilityRole="adjustable"
-      accessibilityLabel={`Page ${activeIndex + 1} of ${count}`}
+      accessibilityLabel={`Página ${activeIndex + 1} de ${count}`}
     >
       {hasControls && (
-        <TouchableOpacity
+        <PressableButton
           onPress={handlePrevious}
-          disabled={!canGoPrev}
-          activeOpacity={0.7}
-          touchSoundDisabled={true}
+          enabled={canGoPrev}
+          rippleColor="transparent"
+          touchSoundDisabled
           accessibilityRole="button"
-          accessibilityLabel="Previous page"
-          hitSlop={{ top: 8, bottom: 8, left: 8, right: 8 }}
+          accessibilityLabel="Página anterior"
+          hitSlop={{ top: 10, bottom: 10, left: 10, right: 10 }}
           style={[styles.controlBtn, !canGoPrev && styles.controlBtnDisabled]}
         >
-          {renderIcon('chevron-left', s(18), canGoPrev ? colors.foreground : colors.foregroundMuted)}
-        </TouchableOpacity>
+          <Icon name="chevron-left" size={s(18)} color={canGoPrev ? colors.foreground : colors.foregroundMuted} />
+        </PressableButton>
       )}
       <View style={[styles.dotsRow, { gap: s(spacing) }]}>
         {Array.from({ length: count }).map((_, i) => (
@@ -164,18 +166,18 @@ export function PagerDots({
         ))}
       </View>
       {hasControls && (
-        <TouchableOpacity
+        <PressableButton
           onPress={handleNext}
-          disabled={!canGoNext}
-          activeOpacity={0.7}
-          touchSoundDisabled={true}
+          enabled={canGoNext}
+          rippleColor="transparent"
+          touchSoundDisabled
           accessibilityRole="button"
-          accessibilityLabel="Next page"
-          hitSlop={{ top: 8, bottom: 8, left: 8, right: 8 }}
+          accessibilityLabel="Página siguiente"
+          hitSlop={{ top: 10, bottom: 10, left: 10, right: 10 }}
           style={[styles.controlBtn, !canGoNext && styles.controlBtnDisabled]}
         >
-          {renderIcon('chevron-right', s(18), canGoNext ? colors.foreground : colors.foregroundMuted)}
-        </TouchableOpacity>
+          <Icon name="chevron-right" size={s(18)} color={canGoNext ? colors.foreground : colors.foregroundMuted} />
+        </PressableButton>
       )}
     </View>
   )
@@ -193,6 +195,14 @@ const styles = StyleSheet.create({
   },
   controlBtn: {
     padding: s(4),
+    minHeight: 44,
+    justifyContent: 'center',
+  },
+  dotTouchable: {
+    minHeight: 44,
+    paddingHorizontal: s(14),
+    justifyContent: 'center',
+    alignItems: 'center',
   },
   controlBtnDisabled: {
     opacity: 0.3,

package/src/components/PricingCard/PricingCard.tsx

@@ -3,7 +3,7 @@ import { View, Text, StyleSheet, ViewStyle } from 'react-native'
 import { useTheme } from '../../theme'
 import { Button } from '../Button'
 import { Badge } from '../Badge'
-import { renderIcon } from '../../utils/icons'
+import { Icon } from '../../utils/icons'
 import { s, vs, ms, mvs } from '../../utils/scaling'
 import { RADIUS, SHADOWS } from '../../tokens'
 
@@ -113,11 +113,11 @@ export function PricingCard({
         <View style={styles.features}>
           {features.map(normalize).map((f, i) => (
             <View key={i} style={styles.featureRow}>
-              {renderIcon(
-                f.included ? 'check' : 'minus',
-                ms(16),
-                f.included ? colors.success : colors.foregroundMuted,
-              )}
+              <Icon
+                name={f.included ? 'check' : 'minus'}
+                size={ms(16)}
+                color={f.included ? colors.success : colors.foregroundMuted}
+              />
               <Text
                 style={[
                   styles.featureLabel,

package/src/components/RadioGroup/RadioGroup.tsx

@@ -1,12 +1,11 @@
 import React from 'react'
-import { TouchableOpacity, View, Text, StyleSheet, ViewStyle } from 'react-native'
-import Animated from 'react-native-reanimated'
+import { View, Text, StyleSheet, ViewStyle } from 'react-native'
 import { EaseView } from 'react-native-ease'
 import { selectionAsync as hapticSelection } from '../../utils/haptics'
 import { useTheme } from '../../theme'
 import { s, vs, ms, mvs } from '../../utils/scaling'
-import { usePressScale } from '../../utils/usePressScale'
-import { COLOR_TRANSITION, SPRING_ELASTIC, PRESS_SCALE } from '../../utils/animations'
+import { PressableButton } from '../../utils/pressable'
+import { COLOR_TRANSITION, SPRING_ELASTIC } from '../../utils/animations'
 
 export interface RadioOption {
   label: string
@@ -33,16 +32,9 @@ function RadioItem({
   onSelect: () => void
 }) {
   const { colors } = useTheme()
-  const { animatedStyle: scaleStyle, onPressIn, onPressOut } = usePressScale({
-    pressScale: PRESS_SCALE.button,
-    disabled: option.disabled,
-  })
 
   return (
-    // AUDIT FIX: opacity was applied only to the radio circle, leaving the label
-    // at full opacity when disabled. The whole row now dims uniformly so users
-    // get a single, consistent disabled signal across the entire item.
-    <TouchableOpacity
+    <PressableButton
       style={[styles.row, option.disabled && styles.rowDisabled]}
       onPress={() => {
         if (!option.disabled) {
@@ -50,35 +42,31 @@ function RadioItem({
           onSelect()
         }
       }}
-      onPressIn={onPressIn}
-      onPressOut={onPressOut}
-      activeOpacity={1}
-      touchSoundDisabled={true}
-      disabled={option.disabled}
+      enabled={!option.disabled}
+      rippleColor="transparent"
+      touchSoundDisabled
       accessibilityRole="radio"
       accessibilityLabel={option.label}
       accessibilityState={{ checked: selected, disabled: !!option.disabled }}
     >
-      <Animated.View style={scaleStyle}>
+      <EaseView
+        style={styles.radio}
+        animate={{ borderColor: selected ? colors.primary : colors.border }}
+        transition={COLOR_TRANSITION}
+      >
         <EaseView
-          style={styles.radio}
-          animate={{ borderColor: selected ? colors.primary : colors.border }}
-          transition={COLOR_TRANSITION}
-        >
-          <EaseView
-            style={[styles.dot, { backgroundColor: colors.primary }]}
-            animate={{ scale: selected ? 1 : 0, opacity: selected ? 1 : 0 }}
-            transition={SPRING_ELASTIC}
-          />
-        </EaseView>
-      </Animated.View>
+          style={[styles.dot, { backgroundColor: colors.primary }]}
+          animate={{ scale: selected ? 1 : 0, opacity: selected ? 1 : 0 }}
+          transition={SPRING_ELASTIC}
+        />
+      </EaseView>
       <Text
         style={[styles.label, { color: colors.foreground }]}
         allowFontScaling={true}
       >
         {option.label}
       </Text>
-    </TouchableOpacity>
+    </PressableButton>
   )
 }
 
@@ -121,7 +109,6 @@ const styles = StyleSheet.create({
     alignItems: 'center',
     gap: s(12),
   },
-  // AUDIT FIX: was opacity on the inner circle only
   rowDisabled: {
     opacity: 0.45,
   },