@retray-dev/ui-kit 12.2.0 → 13.2.0

package/src/components/Button/Button.tsx

@@ -7,12 +7,14 @@ import {
   ViewStyle,
   TextStyle,
 } from 'react-native'
+import { EaseView } from 'react-native-ease'
 import { impactMedium } 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, TYPOGRAPHY } from '../../tokens'
 import { PressableButton } from '../../utils/pressable'
+import { COLOR_TRANSITION } from '../../utils/animations'
 
 export type ButtonVariant = 'primary' | 'secondary' | 'text' | 'destructive'
 export type ButtonSize = 'sm' | 'md' | 'lg'
@@ -73,19 +75,16 @@ function ButtonBase({
     onPress?.()
   }
 
-  const containerVariantStyle: ViewStyle = isDisabled
-    ? {
-        primary:     { backgroundColor: colors.surface },
-        secondary:   { backgroundColor: 'transparent', borderWidth: 1.5, borderColor: colors.border },
-        text:        { backgroundColor: 'transparent' },
-        destructive: { backgroundColor: colors.surface },
-      }[variant]
-    : {
-        primary:     { backgroundColor: colors.primary },
-        secondary:   { backgroundColor: 'transparent', borderWidth: 1.5, borderColor: colors.primary },
-        text:        { backgroundColor: 'transparent' },
-        destructive: { backgroundColor: colors.destructive },
-      }[variant]
+  const isSecondary = variant === 'secondary'
+  const borderWidth = isSecondary ? 1.5 : 0
+
+  const animateBgColor: string = isDisabled
+    ? { primary: colors.surface, secondary: 'transparent', text: 'transparent', destructive: colors.surface }[variant]
+    : { primary: colors.primary, secondary: 'transparent', text: 'transparent', destructive: colors.destructive }[variant]
+
+  const animateBorderColor: string = isDisabled
+    ? (isSecondary ? colors.border : 'transparent')
+    : (isSecondary ? colors.primary : 'transparent')
 
   const labelColor = isDisabled
     ? colors.foregroundMuted
@@ -99,7 +98,7 @@ function ButtonBase({
   const textColor = iconColor ?? labelColor
 
   const effectiveIcon: React.ReactNode = iconName
-    ? renderIcon(iconName, iconSizeMap[size], textColor)
+    ? <Icon name={iconName} size={iconSizeMap[size]} color={textColor} />
     : typeof icon === 'function' ? icon({ label, size, variant, color: textColor }) : icon
 
   const spinnerColor = isDisabled
@@ -115,13 +114,6 @@ function ButtonBase({
   return (
     <View style={[fullWidth && styles.fullWidth, flex !== undefined && { flex }]}>
       <PressableButton
-        style={[
-          styles.base,
-          containerVariantStyle,
-          containerSizeStyles[size],
-          fullWidth && styles.fullWidth,
-          restStyle,
-        ]}
         enabled={!isDisabled}
         onPress={handlePress}
         rippleColor="transparent"
@@ -132,30 +124,42 @@ function ButtonBase({
         accessibilityHint={accessibilityHint}
         accessibilityState={{ disabled: isDisabled, busy: loading }}
       >
-        {loading ? (
-          <>
-            <ActivityIndicator size="small" color={spinnerColor} style={{ marginRight: s(6) }} />
-            <Text
-              style={[styles.label, { color: labelColor }, labelSizeStyles[size], styles.labelLoading]}
-              allowFontScaling={true}
-              numberOfLines={1}
-            >
-              {label}
-            </Text>
-          </>
-        ) : (
-          <>
-            {effectiveIcon && iconPosition === 'left' && <>{effectiveIcon}</>}
-            <Text
-              style={[styles.label, { color: labelColor }, labelSizeStyles[size], effectiveIcon ? styles.labelWithIcon : undefined]}
-              allowFontScaling={true}
-              numberOfLines={1}
-            >
-              {label}
-            </Text>
-            {effectiveIcon && iconPosition === 'right' && <>{effectiveIcon}</>}
-          </>
-        )}
+        <EaseView
+          style={[
+            styles.base,
+            containerSizeStyles[size],
+            { borderWidth },
+            fullWidth && styles.fullWidth,
+            restStyle,
+          ]}
+          animate={{ backgroundColor: animateBgColor, borderColor: animateBorderColor }}
+          transition={COLOR_TRANSITION}
+        >
+          {loading ? (
+            <>
+              <ActivityIndicator size="small" color={spinnerColor} style={{ marginRight: s(6) }} />
+              <Text
+                style={[styles.label, { color: labelColor }, labelSizeStyles[size], styles.labelLoading]}
+                allowFontScaling={true}
+                numberOfLines={1}
+              >
+                {label}
+              </Text>
+            </>
+          ) : (
+            <>
+              {effectiveIcon && iconPosition === 'left' && <>{effectiveIcon}</>}
+              <Text
+                style={[styles.label, { color: labelColor }, labelSizeStyles[size], effectiveIcon ? styles.labelWithIcon : undefined]}
+                allowFontScaling={true}
+                numberOfLines={1}
+              >
+                {label}
+              </Text>
+              {effectiveIcon && iconPosition === 'right' && <>{effectiveIcon}</>}
+            </>
+          )}
+        </EaseView>
       </PressableButton>
     </View>
   )

package/src/components/Card/Card.tsx

@@ -73,6 +73,7 @@ export function Card({ children, variant = 'elevated', onPress, style, accessibi
         activateOnHover
         accessibilityRole="button"
         accessibilityLabel={accessibilityLabel}
+        accessibilityState={{ disabled: false }}
       >
         {cardContent}
       </PressableCard>

package/src/components/CategoryStrip/CategoryStrip.tsx

@@ -1,40 +1,33 @@
 import React, { useCallback } from 'react'
 import {
   ScrollView,
-  TouchableOpacity,
   Text,
   View,
   StyleSheet,
   ViewStyle,
 } from 'react-native'
-import Animated from 'react-native-reanimated'
 import { EaseView } from 'react-native-ease'
 import { selectionAsync as hapticSelection } from '../../utils/haptics'
 import { useTheme } from '../../theme'
 import { s, vs, ms } from '../../utils/scaling'
-import { renderIcon } from '../../utils/icons'
-import { usePressScale } from '../../utils/usePressScale'
-import { COLOR_TRANSITION, PRESS_SCALE } from '../../utils/animations'
+import { Icon } from '../../utils/icons'
+import { PressableChip } from '../../utils/pressable'
+import { COLOR_TRANSITION } from '../../utils/animations'
 import { RADIUS } from '../../tokens'
 
 export interface CategoryItem {
   label: string
   value: string
-  /** Icon rendered to the left of the label. ReactNode or icon name string. */
   icon?: React.ReactNode | string
-  /** Badge count over the icon/label. */
   badge?: number
 }
 
 export interface CategoryStripProps {
   categories: CategoryItem[]
   value?: string | string[]
-  /** Called with new value(s) on selection change. */
   onValueChange?: (value: string | string[]) => void
-  /** Allow multiple simultaneous selections. Defaults to false. */
   multiSelect?: boolean
   style?: ViewStyle
-  /** Style applied to each pill item. */
   itemStyle?: ViewStyle
   accessibilityLabel?: string
 }
@@ -49,53 +42,47 @@ const CategoryChip = React.memo(function CategoryChip({
   onSelect: (value: string) => void
 }) {
   const { colors } = useTheme()
-  const { animatedStyle: scaleStyle, onPressIn, onPressOut, hoverHandlers } = usePressScale({
-    pressScale: PRESS_SCALE.chip,
-  })
-  // Static color for icon — icon families take a static color prop, not animated.
   const iconColor = selected ? colors.primaryForeground : colors.foregroundSubtle
   const resolvedIcon =
     typeof item.icon === 'string'
-      ? renderIcon(item.icon, 16, iconColor)
+      ? <Icon name={item.icon} size={16} color={iconColor} />
       : item.icon ?? null
 
   return (
-    <Animated.View style={scaleStyle} {...hoverHandlers}>
-      <TouchableOpacity
-        onPress={() => onSelect(item.value)}
-        onPressIn={onPressIn}
-        onPressOut={onPressOut}
-        activeOpacity={1}
-        touchSoundDisabled={true}
-        accessibilityRole="button"
-        accessibilityLabel={item.label}
-        accessibilityState={{ selected }}
+    <PressableChip
+      onPress={() => onSelect(item.value)}
+      enabled
+      rippleColor="transparent"
+      touchSoundDisabled
+      activateOnHover
+      accessibilityRole="button"
+      accessibilityLabel={item.label}
+      accessibilityState={{ selected }}
+    >
+      <EaseView
+        style={styles.chip}
+        animate={{
+          backgroundColor: selected ? colors.primary : colors.surface,
+          borderColor: selected ? colors.primary : colors.border,
+        }}
+        transition={COLOR_TRANSITION}
       >
-        <EaseView
-          style={styles.chip}
-          animate={{
-            backgroundColor: selected ? colors.primary : colors.surface,
-            borderColor: selected ? colors.primary : colors.border,
-          }}
-          transition={COLOR_TRANSITION}
+        {resolvedIcon && <View style={styles.chipIcon}>{resolvedIcon}</View>}
+        <Text
+          style={[styles.chipLabel, { color: selected ? colors.primaryForeground : colors.foregroundSubtle }]}
+          allowFontScaling={true}
         >
-          {resolvedIcon && <View style={styles.chipIcon}>{resolvedIcon}</View>}
-          <Text
-            style={[styles.chipLabel, { color: selected ? colors.primaryForeground : colors.foregroundSubtle }]}
-            allowFontScaling={true}
-          >
-            {item.label}
-          </Text>
-          {item.badge !== undefined && item.badge > 0 && (
-            <View style={[styles.chipBadge, { backgroundColor: colors.primary }]}>
-              <Text style={[styles.chipBadgeText, { color: colors.primaryForeground }]}>
-                {Math.min(item.badge, 99)}
-              </Text>
-            </View>
-          )}
-        </EaseView>
-      </TouchableOpacity>
-    </Animated.View>
+          {item.label}
+        </Text>
+        {item.badge !== undefined && item.badge > 0 && (
+          <View style={[styles.chipBadge, { backgroundColor: colors.primary }]}>
+            <Text style={[styles.chipBadgeText, { color: colors.primaryForeground }]}>
+              {Math.min(item.badge, 99)}
+            </Text>
+          </View>
+        )}
+      </EaseView>
+    </PressableChip>
   )
 })
 

package/src/components/Checkbox/Checkbox.tsx

@@ -14,6 +14,7 @@ export interface CheckboxProps {
   disabled?: boolean
   style?: ViewStyle
   accessibilityLabel?: string
+  accessibilityHint?: string
 }
 
 export function Checkbox({
@@ -23,6 +24,7 @@ export function Checkbox({
   disabled,
   style,
   accessibilityLabel,
+  accessibilityHint,
 }: CheckboxProps) {
   const { colors } = useTheme()
 
@@ -43,6 +45,7 @@ export function Checkbox({
       touchSoundDisabled
       accessibilityRole="checkbox"
       accessibilityLabel={accessibilityLabel ?? label}
+      accessibilityHint={accessibilityHint}
       accessibilityState={{ checked, disabled: !!disabled }}
     >
       <EaseView

package/src/components/Chip/Chip.tsx

@@ -4,8 +4,9 @@ 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 { renderIcon } from '../../utils/icons'
+import { Icon } from '../../utils/icons'
 import { COLOR_TRANSITION } from '../../utils/animations'
+import { RADIUS } from '../../tokens'
 import { PressableChip as PressableChipComponent } from '../../utils/pressable'
 
 export interface ChipProps {
@@ -43,7 +44,7 @@ function ChipBase({ label, selected = false, onPress, icon, iconName, style, acc
   }
 
   const resolvedIcon = iconName
-    ? renderIcon(iconName, ms(13), selected ? colors.primaryForeground : colors.foreground)
+    ? <Icon name={iconName} size={ms(13)} color={selected ? colors.primaryForeground : colors.foreground} />
     : icon
 
   return (
@@ -111,7 +112,7 @@ export function ChipGroup({ options, value, onValueChange, multiSelect = false,
           // Now passes disabled state to the Chip's TouchableOpacity via onPress=undefined
           // and adds explicit accessibility state for screen readers.
           style={opt.disabled ? styles.chipDisabled : undefined}
-          accessibilityLabel={opt.disabled ? `${opt.label}, unavailable` : opt.label}
+          accessibilityLabel={opt.disabled ? `${opt.label}, no disponible` : opt.label}
         />
       ))}
     </View>
@@ -121,7 +122,7 @@ export function ChipGroup({ options, value, onValueChange, multiSelect = false,
 const styles = StyleSheet.create({
   wrapper: {},
   chip: {
-    borderRadius: 999,
+    borderRadius: RADIUS.full,
     paddingHorizontal: s(14),
     // AUDIT FIX: was vs(5) → ~28px total height — below WCAG 44px tap target.
     // vs(10) → ~44px total height meets WCAG 2.5.5 (AAA) minimum.

package/src/components/ConfirmDialog/ConfirmDialog.tsx

@@ -1,4 +1,4 @@
-import React, { useCallback, useEffect, useRef, useId } from 'react'
+import React, { useCallback, useEffect, useRef, useState, useId } from 'react'
 import { View, Text, TouchableOpacity, StyleSheet } from 'react-native'
 import {
   BottomSheetModal,
@@ -24,42 +24,57 @@ export interface ConfirmDialogProps {
   showCloseButton?: boolean
   onConfirm: () => void
   onCancel: () => void
+  accessibilityHint?: string
 }
 
 export function ConfirmDialog({
   visible,
   title,
   subtitle,
-  confirmLabel = 'Confirm',
-  cancelLabel = 'Cancel',
+  confirmLabel = 'Confirmar',
+  cancelLabel = 'Cancelar',
   confirmVariant = 'primary',
   loading = false,
   showCloseButton = false,
   onConfirm,
   onCancel,
+  accessibilityHint,
 }: ConfirmDialogProps) {
+  type DialogState = 'idle' | 'presenting' | 'presented' | 'dismissing'
+
   const { colors } = useTheme()
   const insets = useSafeAreaInsets()
   const ref = useRef<BottomSheetModal>(null)
-  const wasOpened = useRef(false)
-  const isPresentedRef = useRef(false)
+  const dialogState = useRef<DialogState>('idle')
+  const onCancelRef = useRef(onCancel)
   const name = useId()
+  const [tick, setTick] = useState(0)
 
-  const handleDismiss = useCallback(() => {
-    isPresentedRef.current = false
-    onCancel()
+  useEffect(() => {
+    onCancelRef.current = onCancel
   }, [onCancel])
 
+  const handleDismiss = useCallback(() => {
+    dialogState.current = 'idle'
+    onCancelRef.current?.()
+    setTick((t) => t + 1)
+  }, [])
+
   useEffect(() => {
-    if (visible && !isPresentedRef.current) {
-      impactMedium()
-      ref.current?.present()
-      wasOpened.current = true
-      isPresentedRef.current = true
-    } else if (!visible && wasOpened.current && isPresentedRef.current) {
-      ref.current?.dismiss()
+    if (visible) {
+      if (dialogState.current === 'idle') {
+        dialogState.current = 'presenting'
+        impactMedium()
+        ref.current?.present()
+        dialogState.current = 'presented'
+      }
+    } else {
+      if (dialogState.current === 'presented' || dialogState.current === 'presenting') {
+        dialogState.current = 'dismissing'
+        ref.current?.dismiss()
+      }
     }
-  }, [visible])
+  }, [visible, tick])
 
   const renderBackdrop = useCallback(
     (props: BottomSheetBackdropProps) => (
@@ -98,7 +113,7 @@ export function ConfirmDialog({
                 activeOpacity={0.6}
                 touchSoundDisabled={true}
                 accessibilityRole="button"
-                accessibilityLabel="Close"
+                accessibilityLabel="Cerrar"
                 hitSlop={{ top: 12, bottom: 12, left: 12, right: 12 }}
               >
                 <Feather name="x" size={ms(18)} color={colors.foregroundMuted} />
@@ -122,6 +137,7 @@ export function ConfirmDialog({
               notificationSuccess()
               onConfirm()
             }}
+            accessibilityHint={accessibilityHint}
             icon={
               <Feather
                 name={confirmVariant === 'destructive' ? 'trash-2' : 'check'}

package/src/components/DetailRow/DetailRow.tsx

@@ -2,7 +2,7 @@ import React from 'react'
 import { View, Text, StyleSheet, ViewStyle, TextStyle } 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 type DetailRowSeparator = 'dotted' | 'solid' | 'dashed' | 'none'
 export type DetailRowLabelWeight = 'normal' | 'medium' | 'semibold' | 'bold'
@@ -56,11 +56,11 @@ function DetailRowBase({
   const { colors } = useTheme()
 
   const resolvedLeftIcon = leftIconName
-    ? renderIcon(leftIconName, ms(14), leftIconColor ?? colors.foregroundMuted)
+    ? <Icon name={leftIconName} size={ms(14)} color={leftIconColor ?? colors.foregroundMuted} />
     : leftIcon
 
   const resolvedRightIcon = rightIconName
-    ? renderIcon(rightIconName, ms(14), rightIconColor ?? colors.foregroundMuted)
+    ? <Icon name={rightIconName} size={ms(14)} color={rightIconColor ?? colors.foregroundMuted} />
     : null
 
   const separatorStyle: ViewStyle | null =

package/src/components/EmptyState/EmptyState.tsx

@@ -2,7 +2,7 @@ import React from 'react'
 import { View, Text, StyleSheet, ViewStyle } from 'react-native'
 import { useTheme } from '../../theme'
 import { s, vs, ms, mvs } from '../../utils/scaling'
-import { renderIcon } from '../../utils/icons'
+import { Icon } from '../../utils/icons'
 import { Button } from '../Button'
 
 export interface EmptyStateProps {
@@ -32,7 +32,7 @@ export function EmptyState({ icon, iconName, iconColor, title, description, acti
   const isCompact = size === 'compact'
 
   const effectiveIcon: React.ReactNode = iconName
-    ? renderIcon(iconName, isCompact ? 32 : 48, iconColor ?? colors.foregroundMuted)
+    ? <Icon name={iconName} size={isCompact ? 32 : 48} color={iconColor ?? colors.foregroundMuted} />
     : icon
 
   return (

package/src/components/ErrorBoundary/ErrorBoundary.tsx

@@ -1,7 +1,7 @@
 import React from 'react'
 import { View, Text, TouchableOpacity, StyleSheet } from 'react-native'
 import { useTheme } from '../../theme'
-import { renderIcon } from '../../utils/icons'
+import { Icon } from '../../utils/icons'
 import { s, vs, ms, mvs } from '../../utils/scaling'
 import { RADIUS } from '../../tokens'
 import { impactLight } from '../../utils/haptics'
@@ -35,20 +35,20 @@ interface ErrorBoundaryState {
 function DefaultErrorFallback({
   error,
   reset,
-  title = 'Something went wrong',
+  title = 'Algo salió mal',
   message,
 }: ErrorFallbackProps & { title?: string; message?: string }) {
   const { colors } = useTheme()
   return (
     <View style={[styles.container, { backgroundColor: colors.background }]} accessibilityRole="alert">
       <View style={[styles.iconCircle, { backgroundColor: colors.destructiveTint }]}>
-        {renderIcon('alert-triangle', ms(28), colors.destructive)}
+        <Icon name="alert-triangle" size={ms(28)} color={colors.destructive} />
       </View>
       <Text style={[styles.title, { color: colors.foreground }]} allowFontScaling={true}>
         {title}
       </Text>
       <Text style={[styles.message, { color: colors.foregroundMuted }]} allowFontScaling={true}>
-        {message ?? error.message ?? 'An unexpected error occurred.'}
+        {message ?? error.message ?? 'Ocurrió un error inesperado.'}
       </Text>
       <TouchableOpacity
         style={[styles.button, { backgroundColor: colors.primary }]}
@@ -59,10 +59,10 @@ function DefaultErrorFallback({
         activeOpacity={0.85}
         touchSoundDisabled={true}
         accessibilityRole="button"
-        accessibilityLabel="Try again"
+        accessibilityLabel="Intentar de nuevo"
       >
         <Text style={[styles.buttonLabel, { color: colors.primaryForeground }]} allowFontScaling={true}>
-          Try again
+          Intentar de nuevo
         </Text>
       </TouchableOpacity>
     </View>