@retray-dev/ui-kit 12.1.0 → 13.0.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,31 +75,35 @@ function ButtonBase({
     onPress?.()
   }
 
-  const containerVariantStyle: ViewStyle = {
-    primary:     { backgroundColor: colors.primary },
-    secondary:   { backgroundColor: 'transparent', borderWidth: 1.5, borderColor: colors.primary },
-    text:        { backgroundColor: 'transparent' },
-    destructive: { backgroundColor: colors.destructive },
-  }[variant]
-
-  const labelVariantStyle: TextStyle = {
-    primary:     { color: colors.primaryForeground },
-    secondary:   { color: colors.primary },
-    // AUDIT FIX: was colors.foreground — visually indistinguishable from plain text,
-    // no affordance that it's a CTA. Now uses accentResolved so text-only buttons
-    // carry the brand voltage. Falls back to primary when no accent is defined.
-    text:        { color: colors.accentResolved },
-    destructive: { color: colors.destructiveForeground },
-  }[variant]
-
-  const textColor = iconColor ?? (labelVariantStyle.color as string)
+  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
+    : {
+        primary:     colors.primaryForeground,
+        secondary:   colors.primary,
+        text:        colors.accentResolved,
+        destructive: colors.destructiveForeground,
+      }[variant]
+
+  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 =
-    variant === 'destructive' ? colors.destructiveForeground
+  const spinnerColor = isDisabled
+    ? colors.foregroundMuted
+    : variant === 'destructive' ? colors.destructiveForeground
     : variant === 'primary' ? colors.primaryForeground
     : colors.accentResolved
 
@@ -108,14 +114,6 @@ function ButtonBase({
   return (
     <View style={[fullWidth && styles.fullWidth, flex !== undefined && { flex }]}>
       <PressableButton
-        style={[
-          styles.base,
-          containerVariantStyle,
-          containerSizeStyles[size],
-          fullWidth && styles.fullWidth,
-          isDisabled && styles.disabled,
-          restStyle,
-        ]}
         enabled={!isDisabled}
         onPress={handlePress}
         rippleColor="transparent"
@@ -126,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, labelVariantStyle, labelSizeStyles[size], styles.labelLoading]}
-              allowFontScaling={true}
-              numberOfLines={1}
-            >
-              {label}
-            </Text>
-          </>
-        ) : (
-          <>
-            {effectiveIcon && iconPosition === 'left' && <>{effectiveIcon}</>}
-            <Text
-              style={[styles.label, labelVariantStyle, 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>
   )
@@ -167,9 +177,6 @@ const styles = StyleSheet.create({
   fullWidth: {
     width: '100%',
   },
-  disabled: {
-    opacity: 0.45,
-  },
   label: {
     fontFamily: 'Sohne-Medium',
     flexShrink: 1,

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

@@ -30,8 +30,8 @@ export function ConfirmDialog({
   visible,
   title,
   subtitle,
-  confirmLabel = 'Confirm',
-  cancelLabel = 'Cancel',
+  confirmLabel = 'Confirmar',
+  cancelLabel = 'Cancelar',
   confirmVariant = 'primary',
   loading = false,
   showCloseButton = false,
@@ -42,14 +42,21 @@ export function ConfirmDialog({
   const insets = useSafeAreaInsets()
   const ref = useRef<BottomSheetModal>(null)
   const wasOpened = useRef(false)
+  const isPresentedRef = useRef(false)
   const name = useId()
 
+  const handleDismiss = useCallback(() => {
+    isPresentedRef.current = false
+    onCancel()
+  }, [onCancel])
+
   useEffect(() => {
-    if (visible) {
+    if (visible && !isPresentedRef.current) {
       impactMedium()
       ref.current?.present()
       wasOpened.current = true
-    } else if (wasOpened.current) {
+      isPresentedRef.current = true
+    } else if (!visible && wasOpened.current && isPresentedRef.current) {
       ref.current?.dismiss()
     }
   }, [visible])
@@ -70,7 +77,7 @@ export function ConfirmDialog({
       <BottomSheetModal
       ref={ref}
       name={name}
-      onDismiss={onCancel}
+      onDismiss={handleDismiss}
       enableDynamicSizing
       backdropComponent={renderBackdrop}
       backgroundStyle={{ ...styles.background, backgroundColor: colors.card }}
@@ -91,7 +98,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} />

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>