@retray-dev/ui-kit 10.1.0 → 12.1.0

package/src/components/IconPicker/IconPicker.tsx

@@ -0,0 +1,395 @@
+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 {
+  BottomSheetModal,
+  BottomSheetScrollView,
+  BottomSheetBackdrop,
+} from '@gorhom/bottom-sheet'
+import { useSafeAreaInsets } from 'react-native-safe-area-context'
+import { useTheme } from '../../theme'
+import { renderIcon } from '../../utils/icons'
+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
+const GAP = 6
+const TRIGGER_SIZE = s(56)
+const SCREEN_HEIGHT = Dimensions.get('window').height
+
+export interface IconPickerProps {
+  value: string | null
+  onChange: (iconName: string) => void
+  label?: string
+  error?: string
+  hint?: string
+  disabled?: boolean
+  numColumns?: number
+  gap?: number
+  style?: ViewStyle
+}
+
+function IconCell({ name, selected, size, onPress }: { name: string; selected: boolean; size: number; onPress: () => void }) {
+  const { colors } = useTheme()
+
+  const handlePress = () => {
+    hapticSelection()
+    onPress()
+  }
+
+  const iconColor = selected ? colors.primaryForeground : colors.foreground
+  const bg = selected ? colors.primary : 'transparent'
+
+  return (
+    <TouchableOpacity
+      onPress={handlePress}
+      activeOpacity={0.6}
+      touchSoundDisabled={true}
+      accessibilityRole="button"
+      accessibilityState={{ selected }}
+      accessibilityLabel={name}
+      style={[styles.cell, { width: size, height: size, backgroundColor: bg }]}
+    >
+      {renderIcon(name, ms(20), iconColor)}
+    </TouchableOpacity>
+  )
+}
+
+const IconCellMemo = React.memo(IconCell)
+
+export function IconPicker({
+  value,
+  onChange,
+  label,
+  error,
+  hint,
+  disabled = false,
+  numColumns = NUM_COLUMNS,
+  gap = GAP,
+  style,
+}: IconPickerProps) {
+  const { colors } = useTheme()
+  const insets = useSafeAreaInsets()
+  const sheetRef = useRef<BottomSheetModalType>(null)
+  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()
+
+  const activeIcons = useMemo(() => {
+    if (activeCategory) {
+      return CURATED_ICONS.find((c) => c.name === activeCategory)?.icons ?? ALL_CURATED_ICONS
+    }
+    return ALL_CURATED_ICONS
+  }, [activeCategory])
+
+  const gapPx = s(gap)
+  const cellSize = containerWidth > 0
+    ? Math.floor((containerWidth - gapPx * (numColumns - 1)) / numColumns)
+    : 0
+
+  const rows = useMemo(() => {
+    const result: string[][] = []
+    for (let i = 0; i < activeIcons.length; i += numColumns) {
+      result.push(activeIcons.slice(i, i + numColumns))
+    }
+    return result
+  }, [activeIcons, numColumns])
+
+  const handleDismiss = useCallback(() => {
+    setActiveCategory(null)
+    setReady(false)
+  }, [])
+
+  const handleSelect = useCallback(
+    (iconName: string) => {
+      onChange(iconName)
+    },
+    [onChange],
+  )
+
+  const handleOpen = useCallback(() => {
+    if (disabled) return
+    impactMedium()
+    setActiveCategory(null)
+    setReady(false)
+    sheetRef.current?.present()
+  }, [disabled])
+
+  const renderBackdrop = useCallback(
+    (props: BottomSheetBackdropProps) => (
+      <BottomSheetBackdrop {...props} disappearsOnIndex={-1} appearsOnIndex={0} pressBehavior="close" />
+    ),
+    [],
+  )
+
+  const selectedIcon = value ? renderIcon(value, ms(28), colors.foreground) : null
+
+  return (
+    <View style={[styles.triggerContainer, style]}>
+      {label ? (
+        <Text style={[styles.triggerLabel, { color: colors.foreground }]} allowFontScaling={true}>
+          {label}
+        </Text>
+      ) : null}
+      <TouchableOpacity
+        onPress={handleOpen}
+        disabled={disabled}
+        activeOpacity={0.7}
+        touchSoundDisabled={true}
+        accessibilityRole="button"
+        accessibilityLabel={label ?? 'Seleccionar icono'}
+        accessibilityState={{ disabled }}
+        style={[
+          styles.trigger,
+          {
+            backgroundColor: disabled ? colors.surface : colors.background,
+            width: TRIGGER_SIZE,
+            height: TRIGGER_SIZE,
+            borderColor: error ? colors.destructive : value ? colors.primary : colors.border,
+          },
+          disabled && styles.triggerDisabled,
+        ]}
+      >
+        {selectedIcon ?? renderIcon('plus', ms(24), colors.foregroundMuted)}
+      </TouchableOpacity>
+      {error ? (
+        <Text
+          style={[styles.helperText, { color: colors.destructive }]}
+          allowFontScaling={true}
+          accessibilityLiveRegion="polite"
+        >
+          {error}
+        </Text>
+      ) : null}
+      {!error && hint ? (
+        <Text style={[styles.helperText, { color: colors.foregroundMuted }]} allowFontScaling={true}>
+          {hint}
+        </Text>
+      ) : null}
+
+      <BottomSheetModal
+        ref={sheetRef}
+        name={sheetName}
+        onDismiss={handleDismiss}
+        enableDynamicSizing={true}
+        maxDynamicContentSize={SCREEN_HEIGHT * 0.7}
+        backdropComponent={renderBackdrop}
+        backgroundStyle={{ ...styles.sheetBackground, backgroundColor: colors.card }}
+        handleIndicatorStyle={{ ...styles.handle, backgroundColor: colors.border }}
+        enablePanDownToClose
+        topInset={insets.top}
+        android_keyboardInputMode="adjustPan"
+      >
+        <BottomSheetScrollView
+          contentContainerStyle={styles.sheetContent}
+          showsVerticalScrollIndicator={true}
+        >
+          {/* Measuring container — always rendered so onLayout fires */}
+          <View
+            style={styles.gridContainer}
+            onLayout={(e) => {
+              setContainerWidth(e.nativeEvent.layout.width)
+              setReady(true)
+            }}
+          >
+            {!ready ? (
+              <View style={styles.loader}>
+                <Spinner size="md" color={colors.primary} label="Cargando iconos..." />
+              </View>
+            ) : (
+              <>
+                {/* 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.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>
+                    </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 }]} />
+
+                {/* 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>
+    </View>
+  )
+}
+
+const styles = StyleSheet.create({
+  triggerContainer: {
+    gap: vs(8),
+  },
+  triggerLabel: {
+    fontFamily: 'Sohne-Medium',
+    fontSize: ms(14),
+  },
+  trigger: {
+    borderRadius: RADIUS.md,
+    borderWidth: 1,
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+  triggerDisabled: {
+    opacity: 0.6,
+  },
+  helperText: {
+    fontFamily: 'Sohne-Regular',
+    fontSize: ms(13),
+  },
+  sheetBackground: {
+    borderTopLeftRadius: ms(16),
+    borderTopRightRadius: ms(16),
+  },
+  handle: {
+    width: s(36),
+    height: vs(4),
+    borderRadius: ms(2),
+  },
+  sheetContent: {
+    paddingHorizontal: s(16),
+    paddingBottom: vs(24),
+  },
+  sectionLabel: {
+    fontFamily: 'Sohne-Medium',
+    fontSize: ms(12),
+    marginBottom: vs(8),
+    textTransform: 'uppercase',
+    letterSpacing: 0.5,
+  },
+  categoryScroll: {
+    flexGrow: 0,
+    flexShrink: 0,
+  },
+  categoryStrip: {
+    gap: s(8),
+  },
+  categoryChip: {
+    borderRadius: RADIUS.full,
+    borderWidth: 1,
+    paddingVertical: vs(6),
+    paddingHorizontal: s(12),
+  },
+  categoryChipInner: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    gap: s(6),
+  },
+  categoryChipText: {
+    fontFamily: 'Sohne-Medium',
+    fontSize: ms(12),
+  },
+  separator: {
+    height: StyleSheet.hairlineWidth,
+    marginVertical: vs(12),
+  },
+  gridContainer: {},
+  row: {
+    flexDirection: 'row',
+    gap: GAP,
+  },
+  cell: {
+    borderRadius: RADIUS.md,
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+  loader: {
+    minHeight: vs(200),
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+})

package/src/components/IconPicker/index.ts

@@ -0,0 +1 @@
+export * from './IconPicker'

package/src/components/ImageUpload/ImageUpload.tsx

@@ -17,6 +17,8 @@ export interface ImageUploadProps {
   loading?: boolean
   /** Text shown when no image is selected. */
   placeholder?: string
+  /** Whether to show the placeholder text. Use false for compact/avatar variants. */
+  showPlaceholderText?: boolean
   /** Width of the upload area. Defaults to full width (undefined). */
   width?: number
   /** Height of the upload area. Defaults to 200. */
@@ -35,6 +37,7 @@ export function ImageUpload({
   onChange,
   loading = false,
   placeholder = 'Tap to add image',
+  showPlaceholderText = true,
   width,
   height = 200,
   borderRadius = RADIUS.lg,
@@ -50,27 +53,39 @@ export function ImageUpload({
     impactLight()
 
     // Dynamic import so expo-image-picker is optional at module load time.
-    // Consumers who don't use ImageUpload never pull this dep.
-    let ImagePicker: typeof import('expo-image-picker')
+    // Import ExponentImagePicker (the raw native module proxy) directly to
+    // avoid expo-image-picker's top-level createPermissionHook dependency.
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    let picker: any
     try {
-      ImagePicker = await import('expo-image-picker')
+      const mod = await import('expo-image-picker/build/ExponentImagePicker')
+      picker = (mod as { default: unknown }).default
     } catch {
-      if (__DEV__) console.warn('[ImageUpload] expo-image-picker not installed. Add it as a dependency.')
-      return
+      // Fallback: try the main module
+      try {
+        picker = await import('expo-image-picker')
+      } catch {
+        if (__DEV__) console.warn('[ImageUpload] expo-image-picker not installed.')
+        return
+      }
     }
 
     if (Platform.OS !== 'web') {
-      const { status } = await ImagePicker.requestMediaLibraryPermissionsAsync()
-      if (status !== 'granted') return
+      try {
+        const { status } = await picker.requestMediaLibraryPermissionsAsync()
+        if (status !== 'granted') return
+      } catch {
+        // Permission check failed — try picker anyway
+      }
     }
 
-    const result = await ImagePicker.launchImageLibraryAsync({
+    const result = await picker.launchImageLibraryAsync({
       mediaTypes: ['images'],
       allowsEditing: true,
       quality: 0.8,
     })
 
-    if (!result.canceled && result.assets[0]) {
+    if (!result.canceled && result.assets?.[0]) {
       onChange?.(result.assets[0].uri)
     }
   }
@@ -106,9 +121,15 @@ export function ImageUpload({
       ) : (
         <View style={styles.placeholder}>
           <Feather name="image" size={ms(28)} color={colors.foregroundMuted} />
-          <Text style={[styles.placeholderText, { color: colors.foregroundMuted }]} allowFontScaling={true}>
-            {placeholder}
-          </Text>
+          {showPlaceholderText ? (
+            <Text
+              style={[styles.placeholderText, { color: colors.foregroundMuted }]}
+              numberOfLines={1}
+              allowFontScaling={true}
+            >
+              {placeholder}
+            </Text>
+          ) : null}
         </View>
       )}
       {loading ? (
@@ -137,6 +158,7 @@ const styles = StyleSheet.create({
   placeholderText: {
     fontFamily: 'Sohne-Regular',
     fontSize: ms(13),
+    textAlign: 'center',
   },
   loadingOverlay: {
     ...StyleSheet.absoluteFillObject,

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),