@retray-dev/ui-kit 12.2.0 → 13.0.0

package/src/components/SelectableCard/SelectableCard.tsx

@@ -5,7 +5,7 @@ import { impactLight } from '../../utils/haptics'
 import { useTheme } from '../../theme'
 import { s, vs, ms, mvs } from '../../utils/scaling'
 import { RADIUS } from '../../tokens'
-import { renderIcon } from '../../utils/icons'
+import { Icon } from '../../utils/icons'
 import { COLOR_TRANSITION, OPACITY_TRANSITION, SPRING_ELASTIC } from '../../utils/animations'
 
 type SelectType = 'radio' | 'checkbox'
@@ -146,20 +146,18 @@ export function SelectableCard({
   })()
 
   const resolvedIcon = iconName
-    ? renderIcon(iconName, ms(22), disabled ? colors.foregroundMuted : colors.foregroundMuted)
+    ? <Icon name={iconName} size={ms(22)} color={disabled ? colors.foregroundMuted : colors.foregroundMuted} />
     : icon
 
   const resolvedIconElement = resolvedIcon ? (
     <View style={[styles.iconWrapper, disabled && { opacity: 0.45 }]}>{resolvedIcon}</View>
   ) : null
 
-  const selectorAccessibilityRole = type === 'radio' ? 'radio' : 'checkbox'
-
   return (
     <Pressable
       onPress={handlePress}
       disabled={disabled}
-      accessibilityRole="button"
+      accessibilityRole={type === 'radio' ? 'radio' : 'checkbox'}
       accessibilityLabel={`${title}${description ? `, ${description}` : ''}`}
       accessibilityState={{ selected: isSelected, disabled }}
       style={[
@@ -171,7 +169,7 @@ export function SelectableCard({
     >
       <View style={styles.row}>
         {/* Selection indicator */}
-        <View style={styles.selectorContainer} accessibilityRole={selectorAccessibilityRole} accessibilityState={{ selected: isSelected, disabled }}>
+        <View style={styles.selectorContainer}>
           {type === 'radio' ? (
             <EaseView
               style={styles.radioCircle}

package/src/components/SelectableGrid/SelectableGrid.tsx

@@ -1,38 +1,27 @@
 import React, { useState } from 'react'
-import { View, Text, TouchableOpacity, StyleSheet, ViewStyle, ScrollView } from 'react-native'
-import Animated from 'react-native-reanimated'
+import { View, Text, StyleSheet, ViewStyle, ScrollView } from 'react-native'
 import { useTheme } from '../../theme'
-import { renderIcon } from '../../utils/icons'
-import { usePressScale } from '../../utils/usePressScale'
+import { Icon } from '../../utils/icons'
+import { PressableChip } from '../../utils/pressable'
 import { selectionAsync as hapticSelection } from '../../utils/haptics'
-import { PRESS_SCALE } from '../../utils/animations'
 import { s, vs, ms, mvs } from '../../utils/scaling'
 import { RADIUS } from '../../tokens'
 
 export interface SelectableGridItem<T extends string | number = string> {
-  /** Unique value emitted on selection. */
   value: T
-  /** Label rendered under the icon. */
   label?: string
-  /** Icon name resolved via the icon registry. */
   iconName?: string
-  /** Custom icon node — overrides `iconName`. */
   icon?: React.ReactNode
   disabled?: boolean
 }
 
 export interface SelectableGridProps<T extends string | number = string> {
   items: SelectableGridItem<T>[]
-  /** Selected value(s). Array when `multiple`. */
   value: T | T[] | null
   onChange: (value: T) => void
-  /** Allow multiple selections. `value` should be an array. Defaults to false. */
   multiple?: boolean
-  /** Columns per row. Defaults to 4. Ignored when `orientation='horizontal'`. */
   numColumns?: number
-  /** Gap between cells (dp). Defaults to 12. */
   gap?: number
-  /** Layout orientation. 'grid' (default) wraps into rows. 'horizontal' creates a single scrollable row. */
   orientation?: 'grid' | 'horizontal'
   style?: ViewStyle
 }
@@ -51,63 +40,44 @@ interface CellProps<T extends string | number> {
 
 function Cell<T extends string | number>({ item, selected, width, onPress }: CellProps<T>) {
   const { colors } = useTheme()
-  const { animatedStyle, onPressIn, onPressOut, hoverHandlers } = usePressScale({
-    pressScale: PRESS_SCALE.chip,
-    disabled: item.disabled,
-  })
 
   const iconColor = selected ? colors.primary : colors.foregroundSubtle
-  const iconNode = item.icon ?? (item.iconName ? renderIcon(item.iconName, ms(24), iconColor) : null)
+  const iconNode = item.icon ?? (item.iconName ? <Icon name={item.iconName} size={ms(24)} color={iconColor} /> : null)
 
   return (
-    <Animated.View style={[{ width }, animatedStyle]}>
-      <TouchableOpacity
-        onPress={onPress}
-        onPressIn={onPressIn}
-        onPressOut={onPressOut}
-        disabled={item.disabled}
-        activeOpacity={1}
-        touchSoundDisabled={true}
-        accessibilityRole="button"
-        accessibilityState={{ selected, disabled: item.disabled }}
-        accessibilityLabel={item.label ?? String(item.value)}
-        {...hoverHandlers}
-        style={[
-          styles.cell,
-          {
-            backgroundColor: selected ? colors.primary + '14' : colors.surface,
-            borderColor: selected ? colors.primary : 'transparent',
-          },
-          item.disabled && styles.cellDisabled,
-        ]}
-      >
-        {iconNode}
-        {item.label ? (
-          <Text
-            style={[styles.label, { color: selected ? colors.primary : colors.foreground }]}
-            numberOfLines={1}
-            allowFontScaling={true}
-          >
-            {item.label}
-          </Text>
-        ) : null}
-      </TouchableOpacity>
-    </Animated.View>
+    <PressableChip
+      onPress={onPress}
+      enabled={!item.disabled}
+      rippleColor="transparent"
+      touchSoundDisabled
+      activateOnHover
+      accessibilityRole="button"
+      accessibilityState={{ selected, disabled: item.disabled }}
+      accessibilityLabel={item.label ?? String(item.value)}
+      style={[
+        { width },
+        styles.cell,
+        {
+          backgroundColor: selected ? colors.primary + '14' : colors.surface,
+          borderColor: selected ? colors.primary : 'transparent',
+        },
+        item.disabled && styles.cellDisabled,
+      ]}
+    >
+      {iconNode}
+      {item.label ? (
+        <Text
+          style={[styles.label, { color: selected ? colors.primary : colors.foreground }]}
+          numberOfLines={1}
+          allowFontScaling={true}
+        >
+          {item.label}
+        </Text>
+      ) : null}
+    </PressableChip>
   )
 }
 
-/**
- * Grid of selectable cells (icon + label) — for store / category / emoji pickers
- * where a list would be the wrong shape. Single or multi select.
- *
- * @example
- * <SelectableGrid
- *   items={categories}
- *   value={selected}
- *   onChange={setSelected}
- *   numColumns={4}
- * />
- */
 export function SelectableGrid<T extends string | number = string>({
   items,
   value,
@@ -120,10 +90,7 @@ export function SelectableGrid<T extends string | number = string>({
 }: SelectableGridProps<T>) {
   const [containerWidth, setContainerWidth] = useState(0)
   const gapPx = s(gap)
-  // Compute exact cell width so `numColumns` always fits — percentage widths + gap
-  // overflow and wrap one short. -0.5 guards against sub-pixel rounding overflow.
   const cellWidth = containerWidth > 0 ? (containerWidth - gapPx * (numColumns - 1)) / numColumns - 0.5 : 0
-  // Horizontal mode: fixed 72dp cell width (same scale as grid cells)
   const horizCellWidth = s(72)
 
   const handlePress = (item: SelectableGridItem<T>) => {
@@ -184,22 +151,21 @@ const styles = StyleSheet.create({
     paddingHorizontal: s(4),
   },
   cell: {
-    flex: 1,
     borderRadius: RADIUS.md,
     borderWidth: 2,
     alignItems: 'center',
     justifyContent: 'center',
     gap: vs(4),
-    paddingHorizontal: s(12),
-    paddingVertical: vs(12),
+    paddingHorizontal: s(8),
+    paddingVertical: vs(10),
   },
   cellDisabled: {
     opacity: 0.4,
   },
   label: {
     fontFamily: 'Sohne-Medium',
-    fontSize: ms(12),
-    lineHeight: mvs(15),
+    fontSize: ms(11),
+    lineHeight: mvs(14),
     textAlign: 'center',
   },
 })

package/src/components/Sheet/Sheet.tsx

@@ -163,7 +163,7 @@ export function Sheet({
             activeOpacity={0.6}
             touchSoundDisabled={true}
             accessibilityRole="button"
-            accessibilityLabel="Close"
+            accessibilityLabel="Cerrar"
             hitSlop={{ top: 12, bottom: 12, left: 12, right: 12 }}
           >
             <AntDesign name="close" size={ms(18)} color={colors.foregroundMuted} />

package/src/components/SheetSelect/SheetSelect.tsx

@@ -4,7 +4,7 @@ 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 { PressableChip } from '../../utils/pressable'
 import { RADIUS } from '../../tokens'
@@ -47,7 +47,7 @@ function SheetSelectChip({
   }
 
   const iconColor = selected ? colors.primaryForeground : colors.foreground
-  const resolvedIcon = option.iconName ? renderIcon(option.iconName, ms(13), iconColor) : null
+  const resolvedIcon = option.iconName ? <Icon name={option.iconName} size={ms(13)} color={iconColor} /> : null
 
   return (
     <PressableChip
@@ -55,7 +55,7 @@ function SheetSelectChip({
       rippleColor="transparent"
       touchSoundDisabled
       accessibilityRole="button"
-      accessibilityLabel={option.disabled ? `${option.label}, unavailable` : option.label}
+      accessibilityLabel={option.disabled ? `${option.label}, no disponible` : option.label}
       accessibilityState={{ selected, disabled: option.disabled }}
     >
       <EaseView

package/src/components/Skeleton/Skeleton.tsx

@@ -83,7 +83,7 @@ export function Skeleton({
       ]}
       onLayout={(e) => setContainerWidth(e.nativeEvent.layout.width)}
       accessibilityRole="progressbar"
-      accessibilityLabel="Loading"
+      accessibilityLabel="Cargando"
       accessibilityState={{ busy: true }}
     >
       <Animated.View style={[StyleSheet.absoluteFill, shimmerStyle]}>

package/src/components/Spinner/Spinner.tsx

@@ -13,7 +13,7 @@ export interface SpinnerProps extends Omit<ActivityIndicatorProps, 'size'> {
 
 const sizeMap: Record<SpinnerSize, 'small' | 'large'> = {
   sm: 'small',
-  md: 'small',
+  md: 'large',
   lg: 'large',
 }
 
@@ -25,7 +25,7 @@ const labelFontSize: Record<SpinnerSize, number> = {
 
 export function Spinner({ size = 'md', color, label, ...props }: SpinnerProps) {
   const { colors } = useTheme()
-  const a11yLabel = label || 'Loading'
+  const a11yLabel = label || 'Cargando'
 
   if (label) {
     return (

package/src/components/Stats/Stats.tsx

@@ -4,7 +4,7 @@ import { impactLight } from '../../utils/haptics'
 import { useTheme } from '../../theme'
 import { s, vs, ms, mvs } from '../../utils/scaling'
 import { RADIUS } from '../../tokens'
-import { renderIcon } from '../../utils/icons'
+import { Icon } from '../../utils/icons'
 import { PressableCard } from '../../utils/pressable'
 
 export type StatsVariant = 'elevated' | 'outlined' | 'filled'
@@ -114,7 +114,7 @@ function StatsComponent({
 
   const iconColorResolved = iconColor ?? colors.primary
 
-  const resolvedIcon = iconName ? renderIcon(iconName, sizeStyles.iconSize, iconColorResolved) : icon
+  const resolvedIcon = iconName ? <Icon name={iconName} size={sizeStyles.iconSize} color={iconColorResolved} /> : icon
 
   const iconElement = resolvedIcon ? (
     <View style={styles.iconWrapper}>{resolvedIcon}</View>

package/src/components/Switch/Switch.tsx

@@ -1,11 +1,12 @@
 import React from 'react'
-import { TouchableOpacity, StyleSheet, ViewStyle, View } from 'react-native'
+import { StyleSheet, ViewStyle, View } from 'react-native'
 import { EaseView } from 'react-native-ease'
 import { Feather } from '@expo/vector-icons'
 import { selectionAsync as hapticSelection } from '../../utils/haptics'
 import { useTheme } from '../../theme'
 import { s } from '../../utils/scaling'
 import { COLOR_TRANSITION, OPACITY_TRANSITION, SPRING_ELASTIC } from '../../utils/animations'
+import { PressableButton } from '../../utils/pressable'
 
 const TRACK_WIDTH  = s(52)
 const TRACK_HEIGHT = s(30)
@@ -30,14 +31,14 @@ export function Switch({ checked = false, onCheckedChange, disabled, style, acce
 
   return (
     <View style={[{ alignSelf: 'flex-start' }, style]}>
-      <TouchableOpacity
+      <PressableButton
         onPress={() => {
           hapticSelection()
           onCheckedChange?.(!checked)
         }}
-        disabled={disabled}
-        activeOpacity={0.8}
-        touchSoundDisabled={true}
+        enabled={!disabled}
+        rippleColor="transparent"
+        touchSoundDisabled
         accessibilityRole="switch"
         accessibilityLabel={accessibilityLabel}
         accessibilityState={{ checked, disabled: isDisabled }}
@@ -76,7 +77,7 @@ export function Switch({ checked = false, onCheckedChange, disabled, style, acce
             </EaseView>
           </EaseView>
         </View>
-      </TouchableOpacity>
+      </PressableButton>
     </View>
   )
 }
@@ -84,6 +85,8 @@ export function Switch({ checked = false, onCheckedChange, disabled, style, acce
 const styles = StyleSheet.create({
   touchable: {
     alignSelf: 'flex-start',
+    minHeight: 44,
+    justifyContent: 'center',
   },
   trackContainer: {
     position: 'relative',

package/src/components/TabBar/TabBar.tsx

@@ -1,10 +1,11 @@
 import React from 'react'
-import { View, Text, TouchableOpacity, StyleSheet, ViewStyle } from 'react-native'
+import { View, Text, StyleSheet, ViewStyle } from 'react-native'
 import { useSafeAreaInsets } from 'react-native-safe-area-context'
 import { useTheme } from '../../theme'
-import { renderIcon } from '../../utils/icons'
+import { Icon } from '../../utils/icons'
 import { selectionAsync as hapticSelection } from '../../utils/haptics'
 import { s, vs, ms, mvs } from '../../utils/scaling'
+import { PressableTab } from '../../utils/pressable'
 
 export interface TabBarItem {
   /** Unique key for the tab. */
@@ -74,23 +75,23 @@ export function TabBar({
       {items.map((item) => {
         const active = item.key === activeKey
         const tint = active ? resolvedActive : resolvedInactive
-        const iconNode = item.icon ?? (item.iconName ? renderIcon(item.iconName, ms(24), tint) : null)
+        const iconNode = item.icon ?? (item.iconName ? <Icon name={item.iconName} size={ms(24)} color={tint} /> : null)
         const showBadge = item.badge !== undefined && item.badge !== false
         const badgeCount = typeof item.badge === 'number' ? item.badge : undefined
 
         return (
-          <TouchableOpacity
+          <PressableTab
             key={item.key}
-            style={styles.tab}
             onPress={() => {
               if (!active) hapticSelection()
               onTabPress(item.key)
             }}
-            activeOpacity={0.7}
-            touchSoundDisabled={true}
+            rippleColor="transparent"
+            touchSoundDisabled
             accessibilityRole="tab"
             accessibilityState={{ selected: active }}
             accessibilityLabel={item.label ?? item.key}
+            style={styles.tab}
           >
             <View>
               {iconNode}
@@ -115,7 +116,7 @@ export function TabBar({
                 {item.label}
               </Text>
             ) : null}
-          </TouchableOpacity>
+          </PressableTab>
         )
       })}
     </View>

package/src/components/Text/Text.tsx

@@ -1,9 +1,11 @@
 import React from 'react'
 import { Text as RNText, TextProps as RNTextProps, TextStyle } from 'react-native'
+
+declare const __DEV__: boolean | undefined
 import { useTheme } from '../../theme'
 import { TYPOGRAPHY } from '../../tokens'
 import { ms, mvs } from '../../utils/scaling'
-import { warnIfFontsMissing } from '../../utils/fontGuard'
+import { isLoaded as expoFontIsLoaded } from 'expo-font'
 
 export type TextVariant =
   | 'display-hero'
@@ -70,6 +72,15 @@ const defaultColorVariant: Partial<Record<TextVariant, 'foreground' | 'foregroun
   'button-sm':    'foreground',
 }
 
+let fontWarned = false
+function warnIfFontsMissing(): void {
+  if (fontWarned || typeof __DEV__ === 'undefined' || !__DEV__) return
+  fontWarned = true
+  if (!expoFontIsLoaded('Sohne-Regular')) {
+    console.warn('[retray-ui-kit] Sohne fonts not loaded — text falls back to system font.')
+  }
+}
+
 function TextBase({ variant = 'body-md', color, style, uppercase, children, ...props }: TextProps) {
   warnIfFontsMissing()
   const { colors } = useTheme()

package/src/components/Textarea/Textarea.tsx

@@ -1,15 +1,10 @@
 import React, { useState } from 'react'
 import { TextInput, View, Text, StyleSheet, TextInputProps, ViewStyle, Platform } from 'react-native'
-import Animated, {
-  useAnimatedStyle,
-  interpolateColor,
-  interpolate,
-} from 'react-native-reanimated'
+import { EaseView } from 'react-native-ease'
 import { useTheme } from '../../theme'
 import { s, vs, ms } from '../../utils/scaling'
-import { renderIcon } from '../../utils/icons'
-import { useColorTransition } from '../../utils/useColorTransition'
-import { TIMINGS } from '../../utils/animations'
+import { Icon } from '../../utils/icons'
+import { COLOR_TRANSITION } from '../../utils/animations'
 
 const webInputResetStyle: Record<string, unknown> =
   Platform.OS === 'web'
@@ -20,6 +15,7 @@ export interface TextareaProps extends TextInputProps {
   label?: string
   error?: string
   hint?: string
+  disabled?: boolean
   rows?: number
   prefixIcon?: string
   prefixIconNode?: React.ReactNode
@@ -31,6 +27,7 @@ export function Textarea({
   label,
   error,
   hint,
+  disabled,
   rows = 4,
   prefixIcon,
   prefixIconNode,
@@ -44,46 +41,36 @@ export function Textarea({
 }: TextareaProps) {
   const { colors } = useTheme()
   const [focused, setFocused] = useState(false)
-  const focusProgress = useColorTransition(focused, {
-    duration: focused ? TIMINGS.focusIn.duration : TIMINGS.focusOut.duration,
-  })
 
   const resolvedPrefixIcon = prefixIcon
-    ? renderIcon(prefixIcon, ms(16), prefixIconColor ?? colors.foregroundMuted)
+    ? <Icon name={prefixIcon} size={ms(16)} color={prefixIconColor ?? colors.foregroundMuted} />
     : prefixIconNode
 
-  // Border drawn on an absolute overlay (mirrors Input.tsx) so the 1px→2px
-  // focus weight change never resizes the box / reflows content.
-  const borderAnimStyle = useAnimatedStyle(() => ({
-    borderColor: error
-      ? colors.destructive
-      : interpolateColor(focusProgress.value, [0, 1], [colors.border, colors.primary]),
-    borderWidth: error
-      ? 2
-      : interpolate(focusProgress.value, [0, 1], [1, 2]),
-  }))
+  const borderColor = error ? colors.destructive : (focused ? colors.primary : colors.border)
 
   return (
     <View style={[styles.container, containerStyle]}>
       {label ? <Text style={[styles.label, { color: colors.foreground }]} allowFontScaling={true}>{label}</Text> : null}
-      <Animated.View
-        style={[
-          styles.inputWrapper,
-          { backgroundColor: colors.background },
-        ]}
-      >
-        <Animated.View style={[styles.borderOverlay, borderAnimStyle]} pointerEvents="none" />
+      <View style={[styles.inputWrapper, { backgroundColor: colors.background }]}>
+        <EaseView
+          style={[styles.borderOverlay, { borderWidth: error ? 2 : 1 }]}
+          animate={{ borderColor }}
+          transition={COLOR_TRANSITION}
+          pointerEvents="none"
+        />
         {resolvedPrefixIcon ? <View style={styles.prefixIcon}>{resolvedPrefixIcon}</View> : null}
         <TextInput
           multiline
           numberOfLines={rows}
           textAlignVertical="top"
+          editable={!disabled}
           style={[
             styles.input,
             {
               color: colors.foreground,
               minHeight: rows * vs(30),
             },
+            disabled && { opacity: 0.45 },
             webInputResetStyle,
             style,
           ]}
@@ -98,9 +85,10 @@ export function Textarea({
           placeholderTextColor={colors.foregroundMuted}
           allowFontScaling={true}
           accessibilityLabel={accessibilityLabel ?? label}
+          accessibilityState={{ disabled: !!disabled }}
           {...props}
         />
-      </Animated.View>
+      </View>
       {error ? (
         <Text
           style={[styles.helperText, { color: colors.destructive }]}
@@ -128,8 +116,6 @@ const styles = StyleSheet.create({
     marginBottom: vs(2),
   },
   inputWrapper: {
-    // Border lives on borderOverlay (absolute); wrapper carries none so the
-    // focus weight change never reflows content.
     borderRadius: 8,
     paddingHorizontal: s(14),
     paddingVertical: vs(11),

package/src/components/Toggle/Toggle.tsx

@@ -5,7 +5,7 @@ import { FontAwesome5 } 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 { COLOR_TRANSITION } from '../../utils/animations'
 import { PressableButton } from '../../utils/pressable'
 
@@ -30,13 +30,13 @@ function ToggleIcon({ pressed, iconName, activeIconName, icon, activeIcon, iconC
   }
 
   if (pressed) {
-    if (activeIconName) return <>{renderIcon(activeIconName, iconSize, activeIconColor ?? primaryColor)}</>
+    if (activeIconName) return <Icon name={activeIconName} size={iconSize} color={activeIconColor ?? primaryColor} />
     const active = renderProp(activeIcon)
     if (active) return <>{active}</>
     return <FontAwesome5 name="check-circle" size={iconSize} color={primaryColor} />
   }
 
-  if (iconName) return <>{renderIcon(iconName, iconSize, iconColor ?? mutedColor)}</>
+  if (iconName) return <Icon name={iconName} size={iconSize} color={iconColor ?? mutedColor} />
   const custom = renderProp(icon)
   if (custom) return <>{custom}</>