@retray-dev/ui-kit 12.2.0 → 13.2.0

package/dist/index.mjs

@@ -1,68 +1,65 @@
-export { Toggle } from './chunk-UNNRUJTM.mjs';
-export { VirtualList } from './chunk-NC5ZTR2Y.mjs';
-export { Stats } from './chunk-4XOB5TTD.mjs';
-export { Switch } from './chunk-RMRS44MQ.mjs';
-export { TabBar } from './chunk-NJG7DHVF.mjs';
-export { Tabs, TabsContent } from './chunk-IVSRW4HS.mjs';
-export { Text } from './chunk-GUTDFUNF.mjs';
-export { Textarea } from './chunk-2BA3JMKK.mjs';
-export { Select } from './chunk-HEDQPK4I.mjs';
-export { SelectableCard, SelectableCardGroup } from './chunk-2P2CB235.mjs';
-export { SelectableGrid } from './chunk-ZR6HSEAB.mjs';
-export { Separator } from './chunk-VJBUCITV.mjs';
-export { BottomSheetModalProvider, Sheet, BottomSheetTextInput as SheetTextInput } from './chunk-M3C7XM2M.mjs';
-export { SheetSelect } from './chunk-KSUWPU2F.mjs';
-export { Skeleton } from './chunk-QDAZGZUF.mjs';
-export { Slider } from './chunk-RJNLAH76.mjs';
-export { MonthPicker, dateToMonthPickerValue, monthPickerValueToDate } from './chunk-AENAVIKT.mjs';
-export { NumberStepper } from './chunk-ELGEOM7I.mjs';
-export { Pressable } from './chunk-E7NEHHXV.mjs';
-export { PricingCard } from './chunk-E5UKLSJZ.mjs';
-export { Progress } from './chunk-TS7DGUIR.mjs';
-export { RadioGroup } from './chunk-LNPKGWBG.mjs';
-export { RetrayProvider } from './chunk-ZIMY2QUM.mjs';
-export { ToastProvider, sonnerToast as toast, useToast } from './chunk-YMYIEVZP.mjs';
-export { ImageViewer } from './chunk-LPV4NJJK.mjs';
-export { PagerDots } from './chunk-OLVJFKXS.mjs';
-export { LabelValue } from './chunk-57V2LXCK.mjs';
-export { ListGroup, ListGroupFooter, ListGroupHeader } from './chunk-C43HRKXH.mjs';
-export { ListItem } from './chunk-EDLCGYIO.mjs';
-export { MediaCard } from './chunk-7ELGZ66G.mjs';
-export { MenuGroup, MenuGroupFooter, MenuGroupHeader } from './chunk-ULGNQPNE.mjs';
-export { MenuItem } from './chunk-UQ4742ET.mjs';
-export { DetailRow } from './chunk-2LG326TT.mjs';
-export { EmptyState } from './chunk-HC4VVCWY.mjs';
-export { ErrorBoundary } from './chunk-NLZY4TXU.mjs';
-export { Form, FormField, FormFooter, FormSection } from './chunk-7AFZWSCI.mjs';
-export { IconPicker } from './chunk-SAWUXP3A.mjs';
-export { ImageUpload } from './chunk-CF27NBXO.mjs';
-export { Spinner } from './chunk-LIS6I5UP.mjs';
+export { Toggle } from './chunk-RRKM4MKB.mjs';
+export { Stats } from './chunk-ZKDKKQCE.mjs';
+export { Switch } from './chunk-E2PONRJG.mjs';
+export { TabBar } from './chunk-U6DEBYU5.mjs';
+export { Tabs, TabsContent } from './chunk-KC5QDYGZ.mjs';
+export { Text } from './chunk-EHGBHFMH.mjs';
+export { Textarea } from './chunk-L3YKPTJQ.mjs';
+export { Select } from './chunk-IDVUZIVY.mjs';
+export { SelectableCard, SelectableCardGroup } from './chunk-BULKGOIZ.mjs';
+export { SelectableGrid } from './chunk-NPCBNGNE.mjs';
+export { Separator } from './chunk-EW2FIDSM.mjs';
+export { BottomSheetModalProvider, Sheet, SheetContent, SheetFooter, SheetHeader, BottomSheetTextInput as SheetTextInput } from './chunk-7BZJRB77.mjs';
+export { SheetSelect } from './chunk-WIPEDNSD.mjs';
+export { Skeleton } from './chunk-XCIG6HT2.mjs';
+export { Slider } from './chunk-C5ZRMR2E.mjs';
+export { MonthPicker, dateToMonthPickerValue, monthPickerValueToDate } from './chunk-ITG4JQM3.mjs';
+export { NumberStepper } from './chunk-2QXJDRVU.mjs';
+export { Pressable } from './chunk-62BBSSUF.mjs';
+export { PricingCard } from './chunk-K3QX2M26.mjs';
+export { Progress } from './chunk-DBHSUUKU.mjs';
+export { RadioGroup } from './chunk-IJCMPVW5.mjs';
+export { RetrayProvider } from './chunk-ERWJPVX7.mjs';
+export { ToastProvider, sonnerToast as toast, useToast } from './chunk-SZEKQAOY.mjs';
+export { ImageViewer } from './chunk-PGQ6FMXS.mjs';
+export { PagerDots } from './chunk-S44XWTTC.mjs';
+export { LabelValue } from './chunk-DE25XTVQ.mjs';
+export { ListGroup, ListGroupFooter, ListGroupHeader } from './chunk-OBV72JD4.mjs';
+export { ListItem } from './chunk-CZN6L2QU.mjs';
+export { MediaCard } from './chunk-CM2DG4MR.mjs';
+export { MenuGroup, MenuGroupFooter, MenuGroupHeader } from './chunk-S2VGME7X.mjs';
+export { MenuItem } from './chunk-COA2YZOX.mjs';
+export { DetailRow } from './chunk-KAGADD2O.mjs';
+export { EmptyState } from './chunk-FTTI6T5Q.mjs';
+export { ErrorBoundary } from './chunk-ESQDPO5E.mjs';
+export { Form, FormField, FormFooter, FormSection } from './chunk-KPTY7UYQ.mjs';
+export { IconPicker } from './chunk-NGEN2EES.mjs';
+export { ImageUpload } from './chunk-HHOOFDBA.mjs';
+export { Spinner } from './chunk-2VIDP72N.mjs';
 export { ButtonGroup } from './chunk-3BBOZ3OQ.mjs';
-export { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from './chunk-BXF4AMHY.mjs';
-export { CategoryStrip } from './chunk-3XCFYSX4.mjs';
-import './chunk-YNROWHQJ.mjs';
-export { Checkbox } from './chunk-UBUXUMER.mjs';
-export { Chip, ChipGroup } from './chunk-F3YTWO3T.mjs';
-export { ConfirmDialog } from './chunk-QXDGGOLC.mjs';
-export { CurrencyDisplay } from './chunk-MEPSKGBO.mjs';
-export { CurrencyInput } from './chunk-2HFD4IHU.mjs';
-export { Input } from './chunk-DF7JA72E.mjs';
-export { Accordion } from './chunk-NHDI3VQB.mjs';
-export { AlertBanner } from './chunk-4OORJ2DY.mjs';
-export { AppHeader } from './chunk-MVMGPZN6.mjs';
-export { IconButton } from './chunk-LOBLCFMN.mjs';
-export { Avatar } from './chunk-QOLWA2PW.mjs';
-export { Badge } from './chunk-GH67YXG6.mjs';
-export { Button } from './chunk-4J2PXL36.mjs';
-import './chunk-3DKJ2GIC.mjs';
-export { impactHeavy, impactLight, impactMedium, notificationError, notificationSuccess, notificationWarning, richHaptics, selectionAsync } from './chunk-EJ7ZPXOH.mjs';
-import './chunk-DVK4G2GT.mjs';
+export { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from './chunk-TMH263OK.mjs';
+export { CategoryStrip } from './chunk-5MYNAAFE.mjs';
+export { Checkbox } from './chunk-77UOVFIS.mjs';
+export { Chip, ChipGroup } from './chunk-RA6SAAFE.mjs';
+export { ConfirmDialog } from './chunk-UMZTPUB3.mjs';
+export { CurrencyDisplay } from './chunk-PI6RULJX.mjs';
+export { CurrencyInput } from './chunk-HUSSF6TF.mjs';
+export { Input } from './chunk-4NQFTHN3.mjs';
+export { Accordion } from './chunk-422IVD3H.mjs';
+export { AlertBanner } from './chunk-K7TKID3V.mjs';
+export { AppHeader } from './chunk-H6MQL7PS.mjs';
+export { IconButton } from './chunk-ZTPYUU5C.mjs';
+export { Avatar, AvatarGroup } from './chunk-IGU223UM.mjs';
+export { Badge } from './chunk-AZV7KNJI.mjs';
+export { Button } from './chunk-Y6YS33GM.mjs';
+import './chunk-M53LC4Q7.mjs';
+import './chunk-IFYMBOEN.mjs';
+export { impactHeavy, impactLight, impactMedium, notificationError, notificationSuccess, notificationWarning, selectionAsync } from './chunk-ARONDO7M.mjs';
 export { BREAKPOINTS, ICON_SIZES, RADIUS, SHADOWS, SPACING, TYPOGRAPHY } from './chunk-QY3X2UYR.mjs';
-export { Icon, configureIconFamilies, getValidIconNames, renderIcon } from './chunk-KA7LTET3.mjs';
-export { ThemeProvider, defaultDark, defaultLight, deriveColors, useTheme, withAlpha } from './chunk-YTXRIXNZ.mjs';
+export { Icon } from './chunk-MZ6WRTD2.mjs';
+export { ThemeProvider, defaultDark, defaultLight, deriveColors, hexToRgb, useTheme, withAlpha } from './chunk-KSSVIFYR.mjs';
 import './chunk-2CE3TQVY.mjs';
-import './chunk-Y6FXYEAI.mjs';
-import { useState, useCallback } from 'react';
+import { useState, useRef, useEffect, useCallback } from 'react';
 
 // src/utils/typography.ts
 function getResponsiveFontSize(text, maxSize, steps = [
@@ -79,39 +76,37 @@ function getResponsiveFontSize(text, maxSize, steps = [
 }
 function useConfirmDialog(options) {
   const [visible, setVisible] = useState(false);
-  const [target, setTarget] = useState(null);
   const [loading, setLoading] = useState(false);
-  const open = useCallback((t) => {
-    setTarget(t ?? null);
-    setVisible(true);
+  const mountedRef = useRef(true);
+  const onConfirmRef = useRef(options.onConfirm);
+  const onCancelRef = useRef(options.onCancel);
+  useEffect(() => {
+    onConfirmRef.current = options.onConfirm;
+    onCancelRef.current = options.onCancel;
+  });
+  useEffect(() => {
+    return () => {
+      mountedRef.current = false;
+    };
   }, []);
+  const open = useCallback(() => setVisible(true), []);
   const handleConfirm = useCallback(async () => {
     setLoading(true);
     try {
-      await options.onConfirm();
+      await onConfirmRef.current();
+    } catch {
     } finally {
-      setLoading(false);
-      setVisible(false);
-      setTarget(null);
+      if (mountedRef.current) {
+        setLoading(false);
+        setVisible(false);
+      }
     }
-  }, [options]);
+  }, []);
   const handleCancel = useCallback(() => {
     setVisible(false);
-    setTarget(null);
-    options.onCancel?.();
-  }, [options]);
-  return {
-    visible,
-    target,
-    loading,
-    open,
-    dialogProps: {
-      visible,
-      loading,
-      onConfirm: handleConfirm,
-      onCancel: handleCancel
-    }
-  };
+    onCancelRef.current?.();
+  }, []);
+  return { visible, loading, open, onConfirm: handleConfirm, onCancel: handleCancel };
 }
 
 export { getResponsiveFontSize, useConfirmDialog };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@retray-dev/ui-kit",
-  "version": "12.2.0",
+  "version": "13.2.0",
   "description": "Personal UI Kit for React Native / Expo",
   "main": "./dist/index.js",
   "module": "./dist/index.mjs",
@@ -26,11 +26,11 @@
     "dist",
     "src",
     "scripts",
-    "COMPONENTS.md",
     "CONSUMER.md",
     "EXAMPLES.md",
     "FONTS.md",
-    "DESIGN.md"
+    "DESIGN.md",
+    "SKILL.md"
   ],
   "scripts": {
     "postinstall": "node scripts/copy-fonts.js",
@@ -65,15 +65,16 @@
     "@shopify/react-native-skia": ">=1.0.0",
     "expo-font": ">=14.0.0",
     "expo-haptics": ">=14.0.0",
-    "expo-image-picker": ">=15.0.0",
+    "expo-image": ">=3.0.0",
+    "react-native-image-picker": ">=7.0.0",
     "expo-linear-gradient": ">=13.0.0",
+    "expo-modules-core": ">=3.0.0",
     "expo-sensors": ">=13.0.0",
     "pressto": ">=0.6.0",
     "react": ">=17",
     "react-native": ">=0.76",
     "react-native-ease": ">=0.7.0",
     "react-native-gesture-handler": ">=2.0.0",
-    "react-native-pulsar": ">=1.6.0",
     "react-native-reanimated": ">=4.0.0 <5.0.0",
     "react-native-safe-area-context": ">=4.0.0",
     "react-native-screens": ">=3.0.0",
@@ -89,17 +90,15 @@
     "expo-sensors": {
       "optional": true
     },
-    "react-native-pulsar": {
-      "optional": true
-    },
-    "expo-image-picker": {
-      "optional": true
-    },
+
     "react-native-ease": {
       "optional": false
     },
     "pressto": {
       "optional": false
+    },
+    "react-native-image-picker": {
+      "optional": true
     }
   },
   "pnpm": {
@@ -110,7 +109,8 @@
       "react-native-worklets": "0.5.1",
       "@types/react": "19.1.17",
       "react-native-safe-area-context": "5.6.2",
-      "@gorhom/bottom-sheet": "5.2.14"
+      "@gorhom/bottom-sheet": "5.2.14",
+      "expo": "54.0.35"
     },
     "onlyBuiltDependencies": [
       "esbuild"
@@ -124,32 +124,32 @@
     "@react-native-picker/picker": "2.11.1",
     "@shopify/react-native-skia": "2.2.12",
     "@testing-library/react-native": "^14.0.0",
-    "@types/jest": "^30.0.0",
+    "@types/jest": "^29.5.14",
     "@types/react": "19.1.17",
     "babel-preset-expo": "~54.0.11",
     "eslint": "^9.0.0",
     "eslint-config-prettier": "^10.0.0",
     "eslint-plugin-react": "^7.37.0",
     "eslint-plugin-react-hooks": "^7.1.1",
-    "expo-font": "~14.0.11",
+    "expo-font": "~14.0.12",
     "expo-haptics": "~15.0.8",
+    "expo-image": "~3.0.11",
     "expo-linear-gradient": "~15.0.8",
-    "expo-sensors": "~15.0.7",
+    "expo-sensors": "~15.0.8",
     "jest-expo": "~54.0.17",
-    "pressto": "^0.6.1",
+    "pressto": "^0.7.0",
     "prettier": "^3.8.3",
     "react": "19.1.0",
     "react-native": "0.81.5",
-    "react-native-ease": "^0.7.2",
+    "react-native-ease": "^0.7.3",
     "react-native-gesture-handler": "~2.28.0",
-    "react-native-pulsar": "^1.6.1",
     "react-native-reanimated": "~4.1.1",
     "react-native-safe-area-context": "5.6.2",
     "react-native-screens": "4.16.0",
     "react-native-size-matters": "^0.4.2",
-    "react-native-svg": "15.12.1",
+    "react-native-svg": "15.15.5",
     "react-native-worklets": "~0.5.1",
-    "sonner-native": "0.23.1",
+    "sonner-native": "0.26.3",
     "test-renderer": "^1.2.0",
     "tsup": "^8.0.0",
     "typescript": "^5.4.0",

package/src/components/Accordion/Accordion.tsx

@@ -2,11 +2,11 @@ import React, { useState } from 'react'
 import {
   View,
   Text,
-  Pressable,
   StyleSheet,
   ViewStyle,
 } from 'react-native'
 import Animated, {
+  Easing,
   useSharedValue,
   useDerivedValue,
   useAnimatedStyle,
@@ -16,8 +16,9 @@ import { Entypo } 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 { TIMINGS, EASINGS } from '../../utils/animations'
+import { Icon } from '../../utils/icons'
+import { TIMINGS } from '../../utils/animations'
+import { PressableRow } from '../../utils/pressable'
 
 export interface AccordionItem {
   value: string
@@ -29,12 +30,14 @@ export interface AccordionItem {
   icon?: React.ReactNode
   /** Override icon color. Defaults to foregroundMuted. */
   iconColor?: string
+  /**
   /**
    * Action buttons rendered after the trigger content but before the chevron.
    * Automatically touch-isolated — taps on actions won't toggle the accordion.
    * Use this instead of embedding interactive elements inside `trigger`.
    */
   triggerActions?: React.ReactNode
+  accessibilityHint?: string
 }
 
 export interface AccordionProps {
@@ -61,7 +64,7 @@ function AccordionItemComponent({
   const { colors } = useTheme()
 
   const resolvedIcon = item.iconName
-    ? renderIcon(item.iconName, ms(16), item.iconColor ?? colors.foregroundMuted)
+    ? <Icon name={item.iconName} size={ms(16)} color={item.iconColor ?? colors.foregroundMuted} />
     : item.icon
 
   // Shared values — all animation lives on the UI thread
@@ -78,14 +81,14 @@ function AccordionItemComponent({
   const derivedHeight = useDerivedValue(() =>
     withTiming(height.value * Number(isExpanded.value), {
       duration: isExpanded.value ? TIMINGS.expand.duration : TIMINGS.collapse.duration,
-      easing: isExpanded.value ? EASINGS.expand : EASINGS.collapse,
+      easing: isExpanded.value ? Easing.bezier(0.23, 1, 0.32, 1) : Easing.in(Easing.ease),
     })
   )
 
   const derivedRotation = useDerivedValue(() =>
     withTiming(isExpanded.value ? 1 : 0, {
       duration: isExpanded.value ? TIMINGS.expand.duration : TIMINGS.collapse.duration,
-      easing: isExpanded.value ? EASINGS.expand : EASINGS.collapse,
+      easing: isExpanded.value ? Easing.bezier(0.23, 1, 0.32, 1) : Easing.in(Easing.ease),
     })
   )
 
@@ -100,15 +103,18 @@ function AccordionItemComponent({
 
   return (
     <View style={[styles.item, { backgroundColor: colors.card, borderColor: colors.border }]}>
-      <Pressable
-        style={({ pressed }) => [styles.trigger, { opacity: pressed ? 0.6 : 1 }]}
+      <PressableRow
         onPress={() => {
           hapticSelection()
           onToggle()
         }}
+        rippleColor="transparent"
+        touchSoundDisabled
         accessibilityRole="button"
         accessibilityState={{ expanded: isOpen }}
         accessibilityLabel={typeof item.trigger === 'string' ? item.trigger : undefined}
+        accessibilityHint={item.accessibilityHint}
+        style={styles.trigger}
       >
         <View style={styles.triggerContent}>
           {resolvedIcon ? <View style={styles.icon}>{resolvedIcon}</View> : null}
@@ -129,7 +135,7 @@ function AccordionItemComponent({
         <Animated.View style={[styles.chevron, rotationStyle]}>
           <Entypo name="chevron-down" size={18} color={colors.foregroundMuted} />
         </Animated.View>
-      </Pressable>
+      </PressableRow>
 
       {/*
         The Animated.View height is driven by derivedHeight (0 when closed, full height when open).

package/src/components/AlertBanner/AlertBanner.tsx

@@ -3,7 +3,7 @@ import { View, Text, StyleSheet, ViewStyle, TouchableOpacity } from 'react-nativ
 import { FontAwesome5, MaterialIcons, Entypo, Feather } from '@expo/vector-icons'
 import { useTheme } from '../../theme'
 import { s, vs, ms } from '../../utils/scaling'
-import { renderIcon } from '../../utils/icons'
+import { Icon } from '../../utils/icons'
 import { RADIUS } from '../../tokens'
 
 export type AlertBannerVariant = 'default' | 'destructive' | 'success' | 'warning'
@@ -60,7 +60,7 @@ export function AlertBanner({ title, description, variant = 'default', icon, ico
     )
 
   const effectiveIcon: React.ReactNode = iconName
-    ? renderIcon(iconName, ms(16), iconColor ?? accentColor)
+    ? <Icon name={iconName} size={ms(16)} color={iconColor ?? accentColor} />
     : icon ?? defaultIcon
 
   // Accessibility: AlertBanner is a notification — "alert" role announces it.
@@ -87,9 +87,10 @@ export function AlertBanner({ title, description, variant = 'default', icon, ico
         <TouchableOpacity
           onPress={onDismiss}
           style={styles.dismissButton}
+          hitSlop={{ top: 10, bottom: 10, left: 10, right: 10 }}
           activeOpacity={0.6}
           accessibilityRole="button"
-          accessibilityLabel="Dismiss"
+          accessibilityLabel="Descartar"
         >
           <Feather name="x" size={ms(16)} color={colors.foregroundMuted} />
         </TouchableOpacity>
@@ -123,8 +124,8 @@ const styles = StyleSheet.create({
     fontSize: ms(12),
   },
   dismissButton: {
-    padding: s(4),
-    marginTop: vs(-2),
-    marginRight: -s(4),
+    padding: s(10),
+    marginTop: vs(-8),
+    marginRight: -s(10),
   },
 })

package/src/components/AppHeader/AppHeader.tsx

@@ -3,6 +3,7 @@ import { View, Text, StyleSheet, ViewStyle, useWindowDimensions } from 'react-na
 import { useSafeAreaInsets } from 'react-native-safe-area-context'
 import { useTheme } from '../../theme'
 import { IconButton } from '../IconButton'
+import { Icon } from '../../utils/icons'
 import { s, vs, ms, mvs } from '../../utils/scaling'
 import { BREAKPOINTS } from '../../tokens'
 
@@ -15,7 +16,9 @@ export interface AppHeaderProps {
   onBack?: () => void
   /** Icon name for the back button. Defaults to `'chevron-left'`. */
   backIconName?: string
-  /** Custom left content — overrides the back button. */
+  /** Icon name for a decorative icon shown left of the title, after the back button. Ignored when `left` is provided. */
+  iconName?: string
+  /** Custom left content — overrides the back button and `iconName`. */
   left?: React.ReactNode
   /** Custom right content (actions). */
   right?: React.ReactNode
@@ -40,12 +43,14 @@ export interface AppHeaderProps {
  *
  * @example
  * <AppHeader title="Settings" onBack={navigation.goBack} right={<IconButton iconName="more-horizontal" variant="text" />} />
+ * <AppHeader title="Perfil" iconName="user" onBack={navigation.goBack} />
  */
 export function AppHeader({
   title,
   subtitle,
   onBack,
   backIconName = 'chevron-left',
+  iconName,
   left,
   right,
   titleAlign = 'auto',
@@ -61,15 +66,22 @@ export function AppHeader({
   const isWide = width >= BREAKPOINTS.wide
   const centered = titleAlign === 'center' || (titleAlign === 'auto' && isWide)
 
-  const leftNode = left ?? (onBack ? (
-    <IconButton
-      iconName={backIconName}
-      variant="text"
-      size="md"
-      onPress={onBack}
-      accessibilityLabel="Go back"
-    />
-  ) : null)
+  const leftNode = left ?? (
+    <>
+      {onBack ? (
+        <IconButton
+          iconName={backIconName}
+          variant="text"
+          size="md"
+          onPress={onBack}
+          accessibilityLabel="Atrás"
+        />
+      ) : null}
+      {iconName && !left ? (
+        <Icon name={iconName} size={20} color={colors.foreground} />
+      ) : null}
+    </>
+  )
 
   const titleBlock = (
     <View style={[styles.titleBlock, centered && styles.titleBlockCentered]} pointerEvents="none">
@@ -143,9 +155,12 @@ const styles = StyleSheet.create({
     flexDirection: 'row',
     alignItems: 'center',
     justifyContent: 'flex-start',
+    paddingLeft: s(8),
+    gap: s(4),
   },
   sideRight: {
     justifyContent: 'flex-end',
+    paddingRight: s(8),
   },
   titleBlock: {
     flex: 1,

package/src/components/Avatar/Avatar.tsx

@@ -1,7 +1,9 @@
 import React, { useState } from 'react'
-import { View, Text, Image, StyleSheet, ViewStyle } from 'react-native'
+import { Image } from 'expo-image'
+import { View, Text, StyleSheet, ViewStyle, TouchableOpacity } from 'react-native'
 import { useTheme } from '../../theme'
 import { s, ms } from '../../utils/scaling'
+import { vs } from '../../utils/scaling'
 
 export type AvatarSize = 'sm' | 'md' | 'lg' | 'xl'
 // online: green dot  offline: border-only (no fill)  busy: destructive  away: warning
@@ -121,6 +123,80 @@ function AvatarBase({ src, fallback, fallbackText, size = 'md', status, style }:
 
 export const Avatar = React.memo(AvatarBase)
 
+export interface AvatarGroupProps {
+  users: { name: string; src?: string }[]
+  /** Max avatars visible before +N overflow badge. Default 3. */
+  max?: number
+  /** Avatar size preset. Default 'sm'. */
+  size?: AvatarSize
+  /** Overlap between avatars in points. Default 8 (spacing.sm). */
+  overlap?: number
+  /** Called when +N overflow badge is tapped. */
+  onOverflowPress?: () => void
+  style?: ViewStyle
+}
+
+export function AvatarGroup({
+  users,
+  max = 3,
+  size = 'sm',
+  overlap = vs(8),
+  onOverflowPress,
+  style,
+}: AvatarGroupProps) {
+  const { colors } = useTheme()
+  const visible = users.slice(0, max)
+  const overflowCount = users.length - max
+  const dimension = sizeMap[size as AvatarSize]
+
+  return (
+    <View style={[styles.group, style]} accessibilityLabel={`${users.length} avatares`}>
+      {visible.map((user, i) => (
+        <View
+          key={`${user.name}-${i}`}
+          style={[
+            styles.groupItem,
+            i > 0 && { marginLeft: -overlap },
+            { zIndex: visible.length - i },
+          ]}
+        >
+          <Avatar
+            src={user.src}
+            fallbackText={user.name}
+            size={size}
+          />
+        </View>
+      ))}
+      {overflowCount > 0 ? (
+        <TouchableOpacity
+          style={[
+            styles.overflowBadge,
+            {
+              width: dimension,
+              height: dimension,
+              borderRadius: dimension / 2,
+              backgroundColor: colors.surfaceStrong,
+              marginLeft: -overlap,
+            },
+          ]}
+          onPress={onOverflowPress}
+          disabled={!onOverflowPress}
+          activeOpacity={0.7}
+          accessibilityRole="button"
+          accessibilityLabel={`${overflowCount} avatares más`}
+        >
+          <Text
+            style={[styles.overflowText, { color: colors.foregroundMuted }]}
+            allowFontScaling={true}
+          >
+            +{overflowCount}
+          </Text>
+        </TouchableOpacity>
+      ) : null}
+    </View>
+  )
+}
+
 const styles = StyleSheet.create({
   wrapper: {
     alignSelf: 'flex-start',
@@ -138,4 +214,19 @@ const styles = StyleSheet.create({
     bottom: 0,
     right: 0,
   },
+  group: {
+    flexDirection: 'row',
+    alignItems: 'center',
+  },
+  groupItem: {
+    borderRadius: 999,
+  },
+  overflowBadge: {
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+  overflowText: {
+    fontFamily: 'Sohne-SemiBold',
+    fontSize: ms(11),
+  },
 })

package/src/components/Avatar/index.ts

@@ -1,2 +1,2 @@
-export { Avatar } from './Avatar'
-export type { AvatarProps, AvatarSize } from './Avatar'
+export { Avatar, AvatarGroup } from './Avatar'
+export type { AvatarProps, AvatarSize, AvatarGroupProps } from './Avatar'

package/src/components/Badge/Badge.tsx

@@ -2,7 +2,7 @@ import React from 'react'
 import { View, Text, StyleSheet, ViewStyle, TextStyle } from 'react-native'
 import { useTheme } from '../../theme'
 import { s, vs, ms } from '../../utils/scaling'
-import { renderIcon } from '../../utils/icons'
+import { Icon } from '../../utils/icons'
 
 export type BadgeVariant = 'default' | 'secondary' | 'destructive' | 'outline' | 'success' | 'warning' | 'successOutline' | 'destructiveOutline' | 'warningOutline'
 export type BadgeSize = 'sm' | 'md' | 'lg'
@@ -73,7 +73,7 @@ function BadgeBase({ label, children, variant = 'default', size = 'md', icon, ic
   }[variant]
 
   const effectiveIcon: React.ReactNode = iconName
-    ? renderIcon(iconName, sizeIconSize[size], iconColor ?? textColor)
+    ? <Icon name={iconName} size={sizeIconSize[size]} color={iconColor ?? textColor} />
     : icon
 
   const content = children ?? label