@retray-dev/ui-kit 10.2.0 → 12.2.0

package/src/components/IconPicker/IconPicker.tsx

@@ -1,4 +1,4 @@
-import React, { useRef, useState, useCallback, useEffect, useMemo, useId } from 'react'
+import React, { useRef, useState, useCallback, useMemo, useId } from 'react'
 import { View, Text, TouchableOpacity, StyleSheet, ViewStyle, Dimensions } from 'react-native'
 import { ScrollView } from 'react-native-gesture-handler'
 import {
@@ -13,6 +13,7 @@ import { CURATED_ICONS, ALL_CURATED_ICONS } from '../../utils/curatedIcons'
 import { selectionAsync as hapticSelection, impactMedium } from '../../utils/haptics'
 import { s, vs, ms } from '../../utils/scaling'
 import { RADIUS } from '../../tokens'
+import { Spinner } from '../Spinner'
 import type { BottomSheetBackdropProps, BottomSheetModal as BottomSheetModalType } from '@gorhom/bottom-sheet'
 
 const NUM_COLUMNS = 6
@@ -74,10 +75,10 @@ export function IconPicker({
   const { colors } = useTheme()
   const insets = useSafeAreaInsets()
   const sheetRef = useRef<BottomSheetModalType>(null)
-  const catScrollRef = useRef<any>(null)
-  const [open, setOpen] = useState(false)
+  const catScrollRef = useRef<ScrollView>(null)
   const [activeCategory, setActiveCategory] = useState<string | null>(null)
   const [containerWidth, setContainerWidth] = useState(() => Dimensions.get('window').width - s(16) * 2)
+  const [ready, setReady] = useState(false)
 
   const sheetName = useId()
 
@@ -101,35 +102,26 @@ export function IconPicker({
     return result
   }, [activeIcons, numColumns])
 
-  useEffect(() => {
-    if (open) {
-      impactMedium()
-      sheetRef.current?.present()
-    } else {
-      sheetRef.current?.dismiss()
-    }
-  }, [open])
+  const handleDismiss = useCallback(() => {
+    setActiveCategory(null)
+    setReady(false)
+  }, [])
 
   const handleSelect = useCallback(
     (iconName: string) => {
       onChange(iconName)
-      setOpen(false)
-      setActiveCategory(null)
     },
     [onChange],
   )
 
   const handleOpen = useCallback(() => {
     if (disabled) return
+    impactMedium()
     setActiveCategory(null)
-    setOpen(true)
+    setReady(false)
+    sheetRef.current?.present()
   }, [disabled])
 
-  const handleClose = useCallback(() => {
-    setOpen(false)
-    setActiveCategory(null)
-  }, [])
-
   const renderBackdrop = useCallback(
     (props: BottomSheetBackdropProps) => (
       <BottomSheetBackdrop {...props} disappearsOnIndex={-1} appearsOnIndex={0} pressBehavior="close" />
@@ -185,12 +177,12 @@ export function IconPicker({
       <BottomSheetModal
         ref={sheetRef}
         name={sheetName}
-        onDismiss={handleClose}
+        onDismiss={handleDismiss}
         enableDynamicSizing={true}
         maxDynamicContentSize={SCREEN_HEIGHT * 0.7}
         backdropComponent={renderBackdrop}
-        backgroundStyle={[styles.sheetBackground, { backgroundColor: colors.card }]}
-        handleIndicatorStyle={[styles.handle, { backgroundColor: colors.border }]}
+        backgroundStyle={{ ...styles.sheetBackground, backgroundColor: colors.card }}
+        handleIndicatorStyle={{ ...styles.handle, backgroundColor: colors.border }}
         enablePanDownToClose
         topInset={insets.top}
         android_keyboardInputMode="adjustPan"
@@ -199,103 +191,118 @@ export function IconPicker({
           contentContainerStyle={styles.sheetContent}
           showsVerticalScrollIndicator={true}
         >
-          {/* Category section label */}
-          <Text style={[styles.sectionLabel, { color: colors.foregroundSubtle }]} allowFontScaling={true}>
-            Categorías
-          </Text>
-
-          {/* Horizontal scrollable category chips */}
-          <ScrollView
-            ref={catScrollRef}
-            horizontal
-            showsHorizontalScrollIndicator={false}
-            contentContainerStyle={styles.categoryStrip}
-            style={styles.categoryScroll}
+          {/* Measuring container — always rendered so onLayout fires */}
+          <View
+            style={styles.gridContainer}
+            onLayout={(e) => {
+              setContainerWidth(e.nativeEvent.layout.width)
+              setReady(true)
+            }}
           >
-            <TouchableOpacity
-              onPress={() => setActiveCategory(null)}
-              activeOpacity={0.7}
-              touchSoundDisabled={true}
-              accessibilityRole="button"
-              accessibilityLabel="Todos"
-              accessibilityState={{ selected: activeCategory === null }}
-              style={[
-                styles.categoryChip,
-                {
-                  backgroundColor: activeCategory === null ? colors.primary : colors.surface,
-                  borderColor: activeCategory === null ? colors.primary : colors.border,
-                },
-              ]}
-            >
-              <View style={styles.categoryChipInner}>
-                {renderIcon('grid', ms(14), activeCategory === null ? colors.primaryForeground : colors.foregroundSubtle)}
-                <Text
-                  style={[
-                    styles.categoryChipText,
-                    { color: activeCategory === null ? colors.primaryForeground : colors.foreground },
-                  ]}
-                  allowFontScaling={true}
-                  numberOfLines={1}
-                >
-                  Todos
-                </Text>
+            {!ready ? (
+              <View style={styles.loader}>
+                <Spinner size="md" color={colors.primary} label="Cargando iconos..." />
               </View>
-            </TouchableOpacity>
-            {CURATED_ICONS.map((cat) => (
-              <TouchableOpacity
-                key={cat.name}
-                onPress={() => setActiveCategory(cat.name)}
-                activeOpacity={0.7}
-                touchSoundDisabled={true}
-                accessibilityRole="button"
-                accessibilityLabel={cat.labelEs}
-                accessibilityState={{ selected: activeCategory === cat.name }}
-                style={[
-                  styles.categoryChip,
-                  {
-                    backgroundColor: activeCategory === cat.name ? colors.primary : colors.surface,
-                    borderColor: activeCategory === cat.name ? colors.primary : colors.border,
-                  },
-                ]}
-              >
-                <View style={styles.categoryChipInner}>
-                  {renderIcon(cat.categoryIcon, ms(14), activeCategory === cat.name ? colors.primaryForeground : colors.foregroundSubtle)}
-                  <Text
+            ) : (
+              <>
+                {/* Category section label */}
+                <Text style={[styles.sectionLabel, { color: colors.foregroundSubtle }]} allowFontScaling={true}>
+                  Categorías
+                </Text>
+
+                {/* Horizontal scrollable category chips */}
+                <ScrollView
+                  ref={catScrollRef}
+                  horizontal
+                  showsHorizontalScrollIndicator={false}
+                  contentContainerStyle={styles.categoryStrip}
+                  style={styles.categoryScroll}
+                >
+                  <TouchableOpacity
+                    onPress={() => setActiveCategory(null)}
+                    activeOpacity={0.7}
+                    touchSoundDisabled={true}
+                    accessibilityRole="button"
+                    accessibilityLabel="Todos"
+                    accessibilityState={{ selected: activeCategory === null }}
                     style={[
-                      styles.categoryChipText,
-                      { color: activeCategory === cat.name ? colors.primaryForeground : colors.foreground },
+                      styles.categoryChip,
+                      {
+                        backgroundColor: activeCategory === null ? colors.primary : colors.surface,
+                        borderColor: activeCategory === null ? colors.primary : colors.border,
+                      },
                     ]}
-                    allowFontScaling={true}
-                    numberOfLines={1}
                   >
-                    {cat.labelEs}
-                  </Text>
-                </View>
-              </TouchableOpacity>
-            ))}
-          </ScrollView>
+                    <View style={styles.categoryChipInner}>
+                      {renderIcon('grid', ms(14), activeCategory === null ? colors.primaryForeground : colors.foregroundSubtle)}
+                      <Text
+                        style={[
+                          styles.categoryChipText,
+                          { color: activeCategory === null ? colors.primaryForeground : colors.foreground },
+                        ]}
+                        allowFontScaling={true}
+                        numberOfLines={1}
+                      >
+                        Todos
+                      </Text>
+                    </View>
+                  </TouchableOpacity>
+                  {CURATED_ICONS.map((cat) => (
+                    <TouchableOpacity
+                      key={cat.name}
+                      onPress={() => setActiveCategory(cat.name)}
+                      activeOpacity={0.7}
+                      touchSoundDisabled={true}
+                      accessibilityRole="button"
+                      accessibilityLabel={cat.labelEs}
+                      accessibilityState={{ selected: activeCategory === cat.name }}
+                      style={[
+                        styles.categoryChip,
+                        {
+                          backgroundColor: activeCategory === cat.name ? colors.primary : colors.surface,
+                          borderColor: activeCategory === cat.name ? colors.primary : colors.border,
+                        },
+                      ]}
+                    >
+                      <View style={styles.categoryChipInner}>
+                        {renderIcon(cat.categoryIcon, ms(14), activeCategory === cat.name ? colors.primaryForeground : colors.foregroundSubtle)}
+                        <Text
+                          style={[
+                            styles.categoryChipText,
+                            { color: activeCategory === cat.name ? colors.primaryForeground : colors.foreground },
+                          ]}
+                          allowFontScaling={true}
+                          numberOfLines={1}
+                        >
+                          {cat.labelEs}
+                        </Text>
+                      </View>
+                    </TouchableOpacity>
+                  ))}
+                </ScrollView>
 
-          {/* Separator */}
-          <View style={[styles.separator, { backgroundColor: colors.border }]} />
+                {/* Separator */}
+                <View style={[styles.separator, { backgroundColor: colors.border }]} />
 
-          {/* Icon grid — rendered directly inside BottomSheetScrollView */}
-          <View style={styles.gridContainer} onLayout={(e) => setContainerWidth(e.nativeEvent.layout.width)}>
-            {cellSize > 0 ? rows.map((row, i) => (
-              <View key={row[0] ?? `row-${i}`} style={[styles.row, { marginBottom: gapPx }]}>
-                {row.map((name) => (
-                  <IconCellMemo
-                    key={name}
-                    name={name}
-                    selected={value === name}
-                    size={cellSize}
-                    onPress={() => handleSelect(name)}
-                  />
-                ))}
-                {Array.from({ length: numColumns - row.length }).map((_, j) => (
-                  <View key={`spacer-${j}`} style={{ width: cellSize, height: cellSize }} />
-                ))}
-              </View>
-            )) : null}
+                {/* Icon grid */}
+                {cellSize > 0 ? rows.map((row, i) => (
+                  <View key={row[0] ?? `row-${i}`} style={[styles.row, { marginBottom: gapPx }]}>
+                    {row.map((name) => (
+                      <IconCellMemo
+                        key={name}
+                        name={name}
+                        selected={value === name}
+                        size={cellSize}
+                        onPress={() => { handleSelect(name); sheetRef.current?.dismiss() }}
+                      />
+                    ))}
+                    {Array.from({ length: numColumns - row.length }).map((_, j) => (
+                      <View key={`spacer-${j}`} style={{ width: cellSize, height: cellSize }} />
+                    ))}
+                  </View>
+                )) : null}
+              </>
+            )}
           </View>
         </BottomSheetScrollView>
       </BottomSheetModal>
@@ -380,4 +387,9 @@ const styles = StyleSheet.create({
     alignItems: 'center',
     justifyContent: 'center',
   },
+  loader: {
+    minHeight: vs(200),
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
 })

package/src/components/ImageUpload/ImageUpload.tsx

@@ -1,4 +1,4 @@
-import React from 'react'
+import React, { useState } from 'react'
 import { View, Text, Image, StyleSheet, ViewStyle, Platform } from 'react-native'
 import { Feather } from '@expo/vector-icons'
 import { impactLight } from '../../utils/haptics'
@@ -27,6 +27,8 @@ 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
@@ -42,11 +44,13 @@ export function ImageUpload({
   height = 200,
   borderRadius = RADIUS.lg,
   resizeMode = 'cover',
+  allowsEditing = true,
   disabled = false,
   style,
   accessibilityLabel,
 }: ImageUploadProps) {
   const { colors } = useTheme()
+  const [imageLoaded, setImageLoaded] = useState(false)
 
   const handlePress = async () => {
     if (disabled || loading) return
@@ -81,11 +85,12 @@ export function ImageUpload({
 
     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 +102,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',
   }
 
@@ -117,6 +122,8 @@ export function ImageUpload({
           source={{ uri: value }}
           style={[StyleSheet.absoluteFillObject, { borderRadius }]}
           resizeMode={resizeMode}
+          onLoad={() => setImageLoaded(true)}
+          onError={() => setImageLoaded(true)}
         />
       ) : (
         <View style={styles.placeholder}>

package/src/components/ListItem/ListItem.tsx

@@ -31,13 +31,13 @@ export interface ListItemProps {
   leftRender?: React.ReactNode
   /**
    * Arbitrary content rendered on the right (badge, price, chevron, switch, etc.).
-   * Replaces the old `trailing` prop (still accepted as an alias).
    */
   rightRender?: React.ReactNode | string
-  /** @deprecated Use `rightRender` instead. */
-  trailing?: React.ReactNode | string
-  /** @deprecated Use `leftRender` instead. */
-  icon?: React.ReactNode
+  /**
+   * Multiple action buttons rendered on the right with automatic gap.
+   * Takes precedence over `rightRender` and `showChevron`.
+   */
+  rightActions?: React.ReactNode[]
   /**
    * Icon name from `@expo/vector-icons` rendered in the left slot.
    * See https://icons.expo.fyi. Takes precedence over `leftRender`.
@@ -65,7 +65,7 @@ export interface ListItemProps {
    */
   variant?: ListItemVariant
 
-  /** Show a right-pointing chevron on the far right. Ignored when `rightRender` / `trailing` is set. */
+  /** Show a right-pointing chevron on the far right. Ignored when `rightRender` / `rightActions` / `rightIcon` is set. */
   showChevron?: boolean
 
   /** Visual separator line at the bottom of the item. Useful when rendering multiple plain items in a list. */
@@ -91,8 +91,7 @@ function ListItemBase({
   imageSource,
   leftRender,
   rightRender,
-  trailing,
-  icon,
+  rightActions,
   leftIcon,
   rightIcon,
   leftIconColor,
@@ -119,16 +118,14 @@ function ListItemBase({
     onPress?.()
   }
 
-  // imageSource takes precedence, then leftIcon, then leftRender/icon
+  // imageSource takes precedence, then leftIcon, then leftRender
   const effectiveLeft: React.ReactNode = imageSource
     ? <Image source={imageSource} style={styles.image} />
     : leftIcon
       ? renderIcon(leftIcon, 24, leftIconColor ?? colors.foreground)
-      : leftRender ?? icon
+      : leftRender
 
-  const effectiveRight: React.ReactNode | string | undefined = rightIcon
-    ? renderIcon(rightIcon, 24, rightIconColor ?? colors.foregroundMuted)
-    : rightRender ?? trailing
+  const hasRightContent = !!(rightIcon || (rightActions && rightActions.length > 0) || rightRender !== undefined || showChevron)
 
   const cardStyle: ViewStyle =
     variant === 'card'
@@ -181,21 +178,33 @@ function ListItemBase({
         ) : null}
       </View>
 
-      {effectiveRight !== undefined ? (
-        <View style={styles.rightContainer}>
-          {typeof effectiveRight === 'string' ? (
-            <Text
-              style={[styles.rightText, { color: colors.foregroundMuted }]}
-              allowFontScaling={true}
-            >
-              {effectiveRight}
-            </Text>
-          ) : (
-            effectiveRight
-          )}
-        </View>
-      ) : showChevron ? (
-        <Entypo name="chevron-with-circle-right" size={20} color={colors.foregroundMuted} />
+      {hasRightContent ? (
+        rightIcon ? (
+          <View style={styles.rightContainer}>
+            {renderIcon(rightIcon, 24, rightIconColor ?? colors.foregroundMuted)}
+          </View>
+        ) : rightActions && rightActions.length > 0 ? (
+          <View style={styles.rightActionsContainer}>
+            {rightActions.map((action, i) => (
+              <React.Fragment key={i}>{action}</React.Fragment>
+            ))}
+          </View>
+        ) : rightRender !== undefined ? (
+          <View style={styles.rightContainer}>
+            {typeof rightRender === 'string' ? (
+              <Text
+                style={[styles.rightText, { color: colors.foregroundMuted }]}
+                allowFontScaling={true}
+              >
+                {rightRender}
+              </Text>
+            ) : (
+              rightRender
+            )}
+          </View>
+        ) : showChevron ? (
+          <Entypo name="chevron-with-circle-right" size={20} color={colors.foregroundMuted} />
+        ) : null
       ) : null}
     </>
   )
@@ -283,6 +292,12 @@ const styles = StyleSheet.create({
     flexShrink: 0,
     maxWidth: s(160),
   },
+  rightActionsContainer: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    gap: s(8),
+    flexShrink: 0,
+  },
   rightText: {
     fontFamily: 'Sohne-Regular',
     fontSize: ms(14),

package/src/components/Pressable/Pressable.tsx

@@ -1,5 +1,5 @@
 import React from 'react'
-import { ViewStyle } from 'react-native'
+import { ViewStyle, type AccessibilityRole } from 'react-native'
 import { impactLight } from '../../utils/haptics'
 import { PressableCard } from '../../utils/pressable'
 import { PRESS_SCALE } from '../../utils/animations'
@@ -11,11 +11,6 @@ export interface PressableProps {
   onPress?: () => void
   /** Scale value on press. Defaults to `0.98` (MediaCard-style). */
   pressScale?: number
-  /**
-   * @deprecated Use Reanimated spring config via `pressOutSpring` instead. Ignored.
-   * Kept for backwards compatibility with v6.x consumers.
-   */
-  bounciness?: number
   /** Enable haptic feedback on press. Defaults to `true`. */
   haptics?: boolean
   /** Additional style for the wrapper. */
@@ -24,6 +19,19 @@ export interface PressableProps {
   disabled?: boolean
   /** Hover scale (web only). Defaults to `1.02`. Set to `1` to disable. */
   hoverScale?: number
+  /**
+   * Accessibility role for the pressable element.
+   * Defaults to `"button"`.
+   */
+  accessibilityRole?: AccessibilityRole
+  /**
+   * Accessibility state for screen readers.
+   * Used to communicate states like `selected`, `expanded`, `checked`, etc.
+   * Defaults to `{ disabled: !!disabled }`.
+   */
+  accessibilityState?: Record<string, unknown>
+  /** Accessibility label for screen readers. */
+  accessibilityLabel?: string
 }
 
 /**
@@ -41,6 +49,9 @@ export function Pressable({
   style,
   disabled,
   hoverScale: _hoverScale = 1.02,
+  accessibilityRole,
+  accessibilityState,
+  accessibilityLabel,
 }: PressableProps) {
   const handlePress = () => {
     if (disabled || !onPress) return
@@ -56,8 +67,9 @@ export function Pressable({
       rippleColor="transparent"
       touchSoundDisabled
       activateOnHover
-      accessibilityRole="button"
-      accessibilityState={{ disabled: !!disabled }}
+      accessibilityRole={accessibilityRole ?? 'button'}
+      accessibilityState={accessibilityState ?? { disabled: !!disabled }}
+      accessibilityLabel={accessibilityLabel}
     >
       {children}
     </PressableCard>