@retray-dev/ui-kit 10.1.0 → 10.2.0

package/dist/index.mjs

@@ -1,60 +1,62 @@
+export { Switch } from './chunk-WF2XDFRK.mjs';
+export { TabBar } from './chunk-Z6SFHN6T.mjs';
 export { Tabs, TabsContent } from './chunk-GQYFLP3D.mjs';
 export { Text } from './chunk-WJLKJMKR.mjs';
-export { Textarea } from './chunk-CZCQZHG6.mjs';
-export { Toggle } from './chunk-KIHCWCWL.mjs';
+export { Textarea } from './chunk-U2XJFYED.mjs';
+export { Toggle } from './chunk-7LWRKMF5.mjs';
 export { VirtualList } from './chunk-NC5ZTR2Y.mjs';
+export { Select } from './chunk-A3A6KNQN.mjs';
+export { SelectableGrid } from './chunk-Z4VHZ7B5.mjs';
 export { Separator } from './chunk-MX6HRKMI.mjs';
 export { BottomSheetModalProvider, Sheet, BottomSheetTextInput as SheetTextInput } from './chunk-Y2NS74WS.mjs';
-export { SheetSelect } from './chunk-URI2WBIV.mjs';
+export { SheetSelect } from './chunk-KOO4WITD.mjs';
 export { Skeleton } from './chunk-AJ7ZDNBT.mjs';
 export { Slider } from './chunk-JMOZEC77.mjs';
-export { Switch } from './chunk-WF2XDFRK.mjs';
-export { TabBar } from './chunk-MLF3EZFW.mjs';
+export { MonthPicker, dateToMonthPickerValue, monthPickerValueToDate } from './chunk-GD6KXMG5.mjs';
+export { NumberStepper } from './chunk-BUMAMSTZ.mjs';
 export { Pressable } from './chunk-MBMXYJJV.mjs';
-export { PricingCard } from './chunk-4I7D47FH.mjs';
+export { PricingCard } from './chunk-AJRVDP2H.mjs';
 export { Progress } from './chunk-OB4JUQ3O.mjs';
 export { RadioGroup } from './chunk-X4G6APW6.mjs';
 export { RetrayProvider } from './chunk-YFZ3ELX5.mjs';
 export { ToastProvider, sonnerToast as toast, useToast } from './chunk-2UYENBLV.mjs';
-export { Select } from './chunk-A3A6KNQN.mjs';
-export { SelectableGrid } from './chunk-NA7PARID.mjs';
-export { LabelValue } from './chunk-A4MDAP7G.mjs';
+export { ImageViewer } from './chunk-ELXBDILQ.mjs';
+export { PagerDots } from './chunk-ZZ2R6KZ3.mjs';
+export { LabelValue } from './chunk-FCSSQK3L.mjs';
 export { ListGroup, ListGroupFooter, ListGroupHeader } from './chunk-SOA2Z4RB.mjs';
-export { ListItem } from './chunk-OHBNABL5.mjs';
-export { MediaCard } from './chunk-VGTDN7SW.mjs';
+export { ListItem } from './chunk-VKID2D2I.mjs';
+export { MediaCard } from './chunk-IX3NYLYQ.mjs';
 export { MenuGroup, MenuGroupFooter, MenuGroupHeader } from './chunk-IRRY3CRZ.mjs';
-export { MenuItem } from './chunk-ZJKGQMYH.mjs';
-export { MonthPicker, dateToMonthPickerValue, monthPickerValueToDate } from './chunk-GD6KXMG5.mjs';
-export { DetailRow } from './chunk-JB67UOB5.mjs';
-export { EmptyState } from './chunk-6OAZJ577.mjs';
-export { ErrorBoundary } from './chunk-LXJIIOYQ.mjs';
+export { MenuItem } from './chunk-TB6SD2FT.mjs';
+export { DetailRow } from './chunk-S2R7UVOE.mjs';
+export { EmptyState } from './chunk-6SECQ2ZF.mjs';
+export { ErrorBoundary } from './chunk-RYZC432S.mjs';
 export { Form, FormField, FormFooter, FormSection } from './chunk-6Q64UFIA.mjs';
-export { ImageUpload } from './chunk-Y4GL2MHX.mjs';
+export { IconPicker } from './chunk-53Z3NYGE.mjs';
+export { ImageUpload } from './chunk-TZDGAP5N.mjs';
 export { Spinner } from './chunk-WBOOUHSS.mjs';
-export { ImageViewer } from './chunk-WOEYDUJZ.mjs';
-export { PagerDots } from './chunk-4K625MVM.mjs';
 export { ButtonGroup } from './chunk-3BBOZ3OQ.mjs';
 export { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from './chunk-ID72TK46.mjs';
-export { CategoryStrip } from './chunk-VQ57HWPL.mjs';
+export { CategoryStrip } from './chunk-6L4G6PBT.mjs';
 import './chunk-YNROWHQJ.mjs';
 export { Checkbox } from './chunk-AV4EMIRH.mjs';
-export { Chip, ChipGroup } from './chunk-UREA2GYY.mjs';
-export { ConfirmDialog } from './chunk-KZL5VTYK.mjs';
+export { Chip, ChipGroup } from './chunk-DYT7BG5I.mjs';
+export { ConfirmDialog } from './chunk-WYEUNUTP.mjs';
 export { CurrencyDisplay } from './chunk-BRKYVJVV.mjs';
-export { CurrencyInput } from './chunk-JUXSWN54.mjs';
-export { Input } from './chunk-ZUR7AU5R.mjs';
-export { Accordion } from './chunk-DJ7RN37L.mjs';
-export { AlertBanner } from './chunk-6MKGPAR2.mjs';
-export { AppHeader } from './chunk-AZJF2BLK.mjs';
-export { IconButton } from './chunk-3U4SSNWP.mjs';
+export { CurrencyInput } from './chunk-NMU5FMQJ.mjs';
+export { Input } from './chunk-SXLKNTA4.mjs';
+export { Accordion } from './chunk-YJ7I257J.mjs';
+export { AlertBanner } from './chunk-BEMIQXXU.mjs';
+export { AppHeader } from './chunk-TBNZHU6C.mjs';
+export { IconButton } from './chunk-T2KCAHOS.mjs';
 export { Avatar } from './chunk-JT7HKXRB.mjs';
-export { Badge } from './chunk-TERDKCLE.mjs';
-export { Button } from './chunk-2TFTAWVJ.mjs';
+export { Badge } from './chunk-VF2ATYN3.mjs';
+export { Button } from './chunk-HTHGSXFG.mjs';
 import './chunk-3DKJ2GIC.mjs';
 export { impactHeavy, impactLight, impactMedium, notificationError, notificationSuccess, notificationWarning, richHaptics, selectionAsync } from './chunk-EJ7ZPXOH.mjs';
 import './chunk-DVK4G2GT.mjs';
 export { BREAKPOINTS, ICON_SIZES, RADIUS, SHADOWS, SPACING, TYPOGRAPHY } from './chunk-QY3X2UYR.mjs';
-export { Icon, configureIconFamilies, renderIcon } from './chunk-T7XZ7H7Y.mjs';
+export { Icon, configureIconFamilies, getValidIconNames, renderIcon } from './chunk-KA7LTET3.mjs';
 export { ThemeProvider, defaultDark, defaultLight, deriveColors, useTheme } from './chunk-SOYNZDVY.mjs';
 import './chunk-2CE3TQVY.mjs';
 import './chunk-Y6FXYEAI.mjs';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@retray-dev/ui-kit",
-  "version": "10.1.0",
+  "version": "10.2.0",
   "description": "Personal UI Kit for React Native / Expo",
   "main": "./dist/index.js",
   "module": "./dist/index.mjs",

package/src/components/DetailRow/DetailRow.tsx

@@ -16,7 +16,7 @@ const weightMap: Record<DetailRowLabelWeight, string> = {
 
 export interface DetailRowProps {
   label: React.ReactNode
-  value: string | React.ReactNode
+  value: string | number | React.ReactNode
   /** Dotted/dashed/solid line between label and value. Defaults to 'dotted'. */
   separator?: DetailRowSeparator
   labelWeight?: DetailRowLabelWeight

package/src/components/IconPicker/IconPicker.tsx

@@ -0,0 +1,383 @@
+import React, { useRef, useState, useCallback, useEffect, 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 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<any>(null)
+  const [open, setOpen] = useState(false)
+  const [activeCategory, setActiveCategory] = useState<string | null>(null)
+  const [containerWidth, setContainerWidth] = useState(() => Dimensions.get('window').width - s(16) * 2)
+
+  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])
+
+  useEffect(() => {
+    if (open) {
+      impactMedium()
+      sheetRef.current?.present()
+    } else {
+      sheetRef.current?.dismiss()
+    }
+  }, [open])
+
+  const handleSelect = useCallback(
+    (iconName: string) => {
+      onChange(iconName)
+      setOpen(false)
+      setActiveCategory(null)
+    },
+    [onChange],
+  )
+
+  const handleOpen = useCallback(() => {
+    if (disabled) return
+    setActiveCategory(null)
+    setOpen(true)
+  }, [disabled])
+
+  const handleClose = useCallback(() => {
+    setOpen(false)
+    setActiveCategory(null)
+  }, [])
+
+  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={handleClose}
+        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}
+        >
+          {/* 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 — 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}
+          </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',
+  },
+})

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,