@umituz/react-native-design-system 4.27.16 → 4.27.18

package/dist/media/infrastructure/services/MediaPickerService.d.ts

@@ -2,18 +2,61 @@
  * Media Domain - Media Picker Service
  *
  * Service for picking images/videos using expo-image-picker.
- * Handles camera, gallery, and media library permissions.
+ * Refactored to use strategy pattern to reduce code duplication.
+ *
+ * Before: 182 LOC with 4 similar methods
+ * After: ~120 LOC with 1 generic launcher + convenience wrappers - 34% reduction
  */
-import type { MediaPickerOptions, MediaPickerResult, CameraOptions } from "../../domain/entities/Media";
+import type { MediaPickerOptions, MediaPickerResult, CameraOptions } from '../../domain/entities/Media';
+import type { PickerStrategy, LaunchOptions } from '../../domain/strategies/PickerStrategy';
 /**
  * Media picker service for selecting images/videos
+ * Uses strategy pattern to support different picker types
  */
 export declare class MediaPickerService {
+    /**
+     * Generic media picker launcher using strategy pattern
+     *
+     * @param strategy - Picker strategy to use
+     * @param options - Picker options
+     * @returns Picker result
+     *
+     * @example
+     * ```ts
+     * const strategy = new CameraPickerStrategy({ mediaType: 'images' });
+     * const result = await MediaPickerService.launchMediaPicker(strategy, {
+     *   quality: 0.8,
+     *   allowsEditing: true
+     * });
+     * ```
+     */
+    static launchMediaPicker(strategy: PickerStrategy, options?: LaunchOptions): Promise<MediaPickerResult>;
+    /**
+     * Launch camera for image capture
+     */
     static launchCamera(options?: CameraOptions): Promise<MediaPickerResult>;
+    /**
+     * Launch camera for video capture
+     */
     static launchCameraForVideo(options?: CameraOptions): Promise<MediaPickerResult>;
-    static pickImage(options?: MediaPickerOptions): Promise<MediaPickerResult>;
-    static pickSingleImage(options?: Omit<MediaPickerOptions, "allowsMultipleSelection">): Promise<MediaPickerResult>;
-    static pickMultipleImages(options?: Omit<MediaPickerOptions, "allowsMultipleSelection">): Promise<MediaPickerResult>;
-    static pickVideo(options?: Omit<MediaPickerOptions, "mediaTypes">): Promise<MediaPickerResult>;
+    /**
+     * Pick from library with file size validation
+     */
+    static pickFromLibrary(options?: MediaPickerOptions): Promise<MediaPickerResult>;
+    /**
+     * Pick single image from library
+     */
+    static pickSingleImage(options?: Omit<MediaPickerOptions, 'allowsMultipleSelection'>): Promise<MediaPickerResult>;
+    /**
+     * Pick multiple images from library
+     */
+    static pickMultipleImages(options?: Omit<MediaPickerOptions, 'allowsMultipleSelection'>): Promise<MediaPickerResult>;
+    /**
+     * Pick video from library
+     */
+    static pickVideo(options?: Omit<MediaPickerOptions, 'mediaTypes'>): Promise<MediaPickerResult>;
+    /**
+     * Pick any media from library
+     */
     static pickMedia(options?: MediaPickerOptions): Promise<MediaPickerResult>;
 }

package/dist/media/infrastructure/utils/PermissionManager.d.ts

@@ -2,6 +2,10 @@
  * Permission Manager
  *
  * Centralized permission handling for media operations.
+ * Refactored to use generic PermissionHandler to reduce duplication.
+ *
+ * Before: 4 similar methods (~80 LOC)
+ * After: 1 generic handler (~50 LOC) - 37% reduction
  */
 import { MediaLibraryPermission } from "../../domain/entities/Media";
 /**
@@ -10,8 +14,10 @@ import { MediaLibraryPermission } from "../../domain/entities/Media";
 export type PermissionType = 'camera' | 'mediaLibrary';
 /**
  * Permission manager for media operations
+ * Uses generic PermissionHandler to reduce code duplication
  */
 export declare class PermissionManager {
+    private static handler;
     /**
      * Requests camera permission
      */

package/dist/media/infrastructure/utils/mediaPickerMappers.d.ts

@@ -7,7 +7,7 @@ import { MediaLibraryPermission, MediaType, type MediaPickerResult } from "../..
 /**
  * Map expo-image-picker permission status to MediaLibraryPermission
  */
-export declare const mapPermissionStatus: (status: ImagePicker.PermissionStatus) => MediaLibraryPermission;
+export declare const mapPermissionStatus: (status: string) => MediaLibraryPermission;
 /**
  * Map MediaType to expo-image-picker media types
  */
@@ -16,3 +16,17 @@ export declare const mapMediaType: (type?: MediaType) => ImagePicker.MediaType[]
  * Map expo-image-picker result to MediaPickerResult
  */
 export declare const mapPickerResult: (result: ImagePicker.ImagePickerResult) => MediaPickerResult;
+/**
+ * Map PickerStrategy result to MediaPickerResult
+ */
+export declare const mapPickerResultFromStrategy: (result: {
+    canceled: boolean;
+    assets?: Array<{
+        uri: string;
+        width?: number;
+        height?: number;
+        type?: "image" | "video";
+        duration?: number;
+        fileSize?: number;
+    }>;
+}) => MediaPickerResult;

package/dist/molecules/calendar/infrastructure/services/CalendarService.d.ts

@@ -17,6 +17,7 @@ import type { CalendarEvent } from '../../domain/entities/CalendarEvent.entity';
  * Follows SOLID principles with composition over inheritance.
  */
 export declare class CalendarService {
+    private static weekdayNamesCache;
     /**
      * Generate calendar days for a specific month
      */

package/dist/molecules/calendar/infrastructure/storage/CalendarStore.d.ts

@@ -30,7 +30,7 @@ export declare const useCalendar: () => {
     setCurrentMonth: (date: Date) => void;
     viewMode: import("./CalendarStore").CalendarViewMode;
     setViewMode: (mode: import("./CalendarStore").CalendarViewMode) => void;
-    getEventsForDate: (date: Date) => import("../..").CalendarEvent[];
+    getEventsForDate: (date: Date | null | undefined) => import("../..").CalendarEvent[];
     getEventsForMonth: (year: number, month: number) => import("../..").CalendarEvent[];
 };
 /**
@@ -55,7 +55,7 @@ export declare const useCalendarStore: () => {
         navigateMonth: (direction: "prev" | "next") => void;
         setCurrentMonth: (date: Date) => void;
         setViewMode: (mode: import("./CalendarStore").CalendarViewMode) => void;
-        getEventsForDate: (date: Date) => import("../..").CalendarEvent[];
+        getEventsForDate: (date: Date | null | undefined) => import("../..").CalendarEvent[];
         getEventsForMonth: (year: number, month: number) => import("../..").CalendarEvent[];
         clearError: () => void;
         clearAllEvents: () => Promise<void>;

package/dist/molecules/filter-group/FilterGroup.d.ts

@@ -1,3 +1,3 @@
 import React from 'react';
 import type { FilterGroupProps } from './types';
-export declare function FilterGroup<T = string>({ items, selectedValue, onSelect, multiSelect, style, contentContainerStyle, itemStyle, }: FilterGroupProps<T>): React.JSX.Element;
+export declare const FilterGroup: React.MemoExoticComponent<(<T = string>({ items, selectedValue, onSelect, multiSelect, style, contentContainerStyle, itemStyle, }: FilterGroupProps<T>) => React.JSX.Element)>;

package/dist/molecules/navigation/index.d.ts

@@ -21,7 +21,7 @@ export type { NavigationCleanup } from "./utils/NavigationCleanup";
  */
 export { AppNavigation } from "./utils/AppNavigation";
 export { TabLabel, type TabLabelProps } from "./components/TabLabel";
-export * from "./components/NavigationHeader";
+export { NavigationHeader, type NavigationHeaderProps } from "./components/NavigationHeader";
 export { useTabBarStyles, type TabBarConfig } from "./hooks/useTabBarStyles";
 export { useTabConfig, type UseTabConfigProps } from "./hooks/useTabConfig";
 /**

package/dist/offline/index.d.ts

@@ -5,7 +5,7 @@
 export type { NetworkState, OfflineState, OfflineStore, OfflineConfig, ConnectionQuality, } from './types';
 export { useOfflineStore } from './infrastructure/storage/OfflineStore';
 export { useOfflineConfigStore } from './infrastructure/storage/OfflineConfigStore';
-export { useOffline, configureOffline } from './presentation/hooks/useOffline';
+export { useOffline } from './presentation/hooks/useOffline';
 export { useOfflineState } from './presentation/hooks/useOfflineState';
 export { useOfflineWithMutations } from './presentation/hooks/useOfflineWithMutations';
 export { OfflineBanner } from './presentation/components/OfflineBanner';

package/dist/offline/presentation/hooks/useOffline.d.ts

@@ -4,11 +4,6 @@
  * Automatically subscribes to network changes via expo-network (lazy loaded)
  */
 import type { OfflineConfig } from '../../types';
-/**
- * Configure offline settings globally
- * This is a facade over the config store for backward compatibility
- */
-export declare const configureOffline: (config: OfflineConfig) => void;
 export declare const useOffline: (config?: OfflineConfig) => {
     isOnline: boolean;
     isOffline: boolean;

package/dist/tanstack/domain/repositories/BaseRepository.d.ts

@@ -3,7 +3,7 @@
  * Domain layer - Abstract repository for data operations
  *
  * Provides generic CRUD operations with TanStack Query integration.
- * Subclass this for specific entities to get type-safe data operations.
+ * Now uses common repository utilities from core/repositories.
  *
  * @example
  * ```typescript
@@ -51,6 +51,10 @@ export declare abstract class BaseRepository<TData, TCreateVariables = unknown,
      * Query key factory for this repository
      */
     readonly keys: ReturnType<typeof createQueryKeyFactory>;
+    /**
+     * Debug logger for this repository
+     */
+    protected readonly log: (method: string, ...args: unknown[]) => void;
     constructor(resource: string, options?: RepositoryOptions);
     /**
      * Get query client instance

package/dist/tanstack/infrastructure/monitoring/DevMonitor.d.ts

@@ -14,6 +14,7 @@ declare class DevMonitorClass {
     private statsInterval;
     private cacheSubscription;
     private isEnabled;
+    private maxMetrics;
     constructor(options?: DevMonitorOptions);
     private init;
     private trackQuery;

package/dist/utils/constants/TimeConstants.d.ts

@@ -0,0 +1,27 @@
+/**
+ * Time Constants
+ *
+ * Centralized time-related constants to replace magic numbers
+ */
+export declare const MILLISECONDS_PER_SECOND = 1000;
+export declare const MILLISECONDS_PER_MINUTE: number;
+export declare const MILLISECONDS_PER_HOUR: number;
+export declare const MILLISECONDS_PER_DAY: number;
+export declare const SECONDS_PER_MINUTE = 60;
+export declare const SECONDS_PER_HOUR: number;
+export declare const SECONDS_PER_DAY: number;
+export declare const MINUTES_PER_HOUR = 60;
+export declare const MINUTES_PER_DAY: number;
+export declare const ONE_SECOND_MS = 1000;
+export declare const FIVE_SECONDS_MS: number;
+export declare const TEN_SECONDS_MS: number;
+export declare const THIRTY_SECONDS_MS: number;
+export declare const ONE_MINUTE_MS: number;
+export declare const FIVE_MINUTES_MS: number;
+export declare const TEN_MINUTES_MS: number;
+export declare const THIRTY_MINUTES_MS: number;
+export declare const ONE_HOUR_MS: number;
+export declare const ONE_DAY_MS: number;
+export declare const DEFAULT_TIMEOUT_MS: number;
+export declare const DEFAULT_LONG_TIMEOUT_MS: number;
+export declare const DEFAULT_CACHE_TTL_MS: number;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@umituz/react-native-design-system",
-  "version": "4.27.16",
+  "version": "4.27.18",
   "description": "Universal design system for React Native apps - Consolidated package with atoms, molecules, organisms, theme, typography, responsive, safe area, exception, infinite scroll, UUID, image, timezone, offline, onboarding, and loading utilities - TanStack persistence and expo-image-manipulator now lazy loaded",
   "main": "./src/index.ts",
   "types": "./dist/index.d.ts",

package/src/atoms/image/AtomicImage.tsx

@@ -1,7 +1,8 @@
 import React from 'react';
-import { Image as RNImage, type StyleProp, type ImageStyle } from 'react-native';
+import { Image as RNImage, type StyleProp, type ImageStyle, ImageSourcePropType } from 'react-native';
 
 // Lazy-load expo-image (optional peer dep) — falls back to React Native Image
+// biome-ignore lint/suspicious/noExplicitAny: ExpoImage type is dynamic from optional peer dependency
 let ExpoImage: React.ComponentType<any> | null = null;
 try {
   // eslint-disable-next-line @typescript-eslint/no-require-imports
@@ -10,13 +11,18 @@ try {
   // expo-image not installed — using React Native Image fallback
 }
 
+/**
+ * Image source type compatible with both React Native and expo-image
+ * Supports: require() assets, URI strings, and image source objects
+ */
+export type ImageSource = ImageSourcePropType;
+
 export type AtomicImageProps = {
-  source?: any;
+  source?: ImageSource;
   style?: StyleProp<ImageStyle>;
   rounded?: boolean;
   contentFit?: 'cover' | 'contain' | 'fill' | 'none' | 'scale-down';
   cachePolicy?: 'none' | 'disk' | 'memory' | 'memory-disk';
-  [key: string]: any;
 };
 
 const RESIZE_MODE_MAP: Record<string, 'cover' | 'contain' | 'stretch' | 'center'> = {

package/src/atoms/picker/components/PickerChips.tsx

@@ -5,7 +5,7 @@
  * Extracted from AtomicPicker for better separation of concerns.
  */
 
-import React from 'react';
+import React, { useMemo, useCallback } from 'react';
 import { View, TouchableOpacity, GestureResponderEvent } from 'react-native';
 import { useAppDesignTokens } from '../../../theme';
 import { PickerOption } from '../types';
@@ -30,30 +30,36 @@ export const PickerChips: React.FC<PickerChipsProps> = React.memo(({
   const tokens = useAppDesignTokens();
   const closeIcon = useIconName('close');
 
-  const chipContainerStyles = getChipContainerStyles(tokens);
-  const chipStyles = getChipStyles(tokens);
-  const chipTextStyles = getChipTextStyles(tokens);
+  // Memoize styles to prevent recalculation
+  const chipContainerStyles = useMemo(() => getChipContainerStyles(tokens), [tokens]);
+  const chipStyles = useMemo(() => getChipStyles(tokens), [tokens]);
+  const chipTextStyles = useMemo(() => getChipTextStyles(tokens), [tokens]);
 
-  if (selectedOptions.length === 0) return null;
+  // Memoized chip renderer - handleRemove created inline to avoid useCallback inside callback
+  const renderChip = useCallback((opt: PickerOption) => {
+    const handleRemove = (e: GestureResponderEvent) => {
+      e.stopPropagation();
+      onRemoveChip(opt.value);
+    };
+
+    return (
+      <View key={opt.value} style={chipStyles}>
+        <AtomicText style={chipTextStyles}>{opt.label}</AtomicText>
+        <TouchableOpacity
+          onPress={handleRemove}
+          hitSlop={{ top: 8, bottom: 8, left: 8, right: 8 }}
+          accessibilityRole="button"
+          accessibilityLabel={`Remove ${opt.label}`}
+        >
+          <AtomicIcon name={closeIcon} size="sm" color="primary" />
+        </TouchableOpacity>
+      </View>
+    );
+  }, [chipStyles, chipTextStyles, closeIcon, onRemoveChip]);
 
   return (
     <View style={chipContainerStyles}>
-      {selectedOptions.map((opt) => (
-        <View key={opt.value} style={chipStyles}>
-          <AtomicText style={chipTextStyles}>{opt.label}</AtomicText>
-          <TouchableOpacity
-            onPress={(e: GestureResponderEvent) => {
-              e.stopPropagation();
-              onRemoveChip(opt.value);
-            }}
-            hitSlop={{ top: 8, bottom: 8, left: 8, right: 8 }}
-            accessibilityRole="button"
-            accessibilityLabel={`Remove ${opt.label}`}
-          >
-            <AtomicIcon name={closeIcon} size="sm" color="primary" />
-          </TouchableOpacity>
-        </View>
-      ))}
+      {selectedOptions.map(renderChip)}
     </View>
   );
 });

package/src/image/presentation/components/ImageGallery.tsx

@@ -20,6 +20,29 @@ try {
   // expo-image not installed — using React Native Image fallback
 }
 
+// Memoized image component (outside main component to avoid dependency issues)
+const GalleryImage = React.memo<{ item: ImageViewerItem; style: any }>(({ item, style }) => (
+  <View style={style.imageWrapper}>
+    {ExpoImage ? (
+      <ExpoImage
+        source={{ uri: item.uri }}
+        style={style.fullImage}
+        contentFit="contain"
+        cachePolicy="memory-disk"
+        onError={() => { if (__DEV__) console.warn('[ImageGallery] Failed to load image:', item.uri); }}
+      />
+    ) : (
+      <RNImage
+        source={{ uri: item.uri }}
+        style={style.fullImage}
+        resizeMode="contain"
+        onError={() => { if (__DEV__) console.warn('[ImageGallery] Failed to load image:', item.uri); }}
+      />
+    )}
+  </View>
+));
+GalleryImage.displayName = 'GalleryImage';
+
 export interface ImageGalleryProps extends ImageGalleryOptions {
   images: ImageViewerItem[];
   visible: boolean;
@@ -44,7 +67,6 @@ export const ImageGallery: React.FC<ImageGalleryProps> = ({
   const insets = useSafeAreaInsets();
   const { width: SCREEN_WIDTH, height: SCREEN_HEIGHT } = useWindowDimensions();
   const currentIndexRef = useRef(index);
-  const [, forceRender] = React.useReducer((x: number) => x + 1, 0);
 
   const styles = useMemo(() => StyleSheet.create({
     container: { flex: 1 },
@@ -81,30 +103,12 @@ export const ImageGallery: React.FC<ImageGalleryProps> = ({
     if (nextIndex !== currentIndexRef.current) {
       currentIndexRef.current = nextIndex;
       onIndexChange?.(nextIndex);
-      forceRender();
     }
   }, [onIndexChange, SCREEN_WIDTH, images.length]);
 
   const renderItem = useCallback(({ item }: { item: ImageViewerItem }) => (
-    <View style={styles.imageWrapper}>
-      {ExpoImage ? (
-        <ExpoImage
-          source={{ uri: item.uri }}
-          style={styles.fullImage}
-          contentFit="contain"
-          cachePolicy="memory-disk"
-          onError={() => { if (__DEV__) console.warn('[ImageGallery] Failed to load image:', item.uri); }}
-        />
-      ) : (
-        <RNImage
-          source={{ uri: item.uri }}
-          style={styles.fullImage}
-          resizeMode="contain"
-          onError={() => { if (__DEV__) console.warn('[ImageGallery] Failed to load image:', item.uri); }}
-        />
-      )}
-    </View>
-  ), [styles]);
+    <GalleryImage item={item} style={{ imageWrapper: styles.imageWrapper, fullImage: styles.fullImage }} />
+  ), [styles.imageWrapper, styles.fullImage]);
 
   const getItemLayout = useCallback((_: unknown, i: number) => ({
     length: SCREEN_WIDTH,

package/src/infinite-scroll/presentation/components/infinite-scroll-list.tsx

@@ -93,11 +93,17 @@ function InfiniteScrollListComponent<T>({
     return emptyComponent || <Empty />;
   }
 
+  // Memoize renderItem wrapper to prevent unnecessary re-renders
+  const memoizedRenderItem = useCallback(
+    ({ item, index }: { item: T; index: number }) => renderItem(item, index),
+    [renderItem]
+  );
+
   // Render list
   return (
     <FlatList
       data={items}
-      renderItem={({ item, index }) => renderItem(item, index)}
+      renderItem={memoizedRenderItem}
       keyExtractor={(item, index) => getItemKey(item, index)}
       onEndReached={handleEndReached}
       onEndReachedThreshold={calculateEndReachedThreshold(config.threshold)}

package/src/molecules/avatar/AvatarGroup.tsx

@@ -5,7 +5,7 @@
  * Shows overflow count when exceeding max visible avatars.
  */
 
-import React from 'react';
+import React, { useCallback, useMemo } from 'react';
 import { View, StyleSheet, type StyleProp, type ViewStyle } from 'react-native';
 import { useAppDesignTokens } from '../../theme';
 import { AtomicText } from '../../atoms';
@@ -40,7 +40,96 @@ export interface AvatarGroupProps {
   style?: StyleProp<ViewStyle>;
 }
 
-export const AvatarGroup: React.FC<AvatarGroupProps> = ({
+// Memoized individual avatar item
+const AvatarItem = React.memo<{
+  item: AvatarGroupItem;
+  index: number;
+  size: AvatarSize;
+  shape: AvatarShape;
+  spacing: number;
+  avatarStyle: any;
+}>(({ item, index, size, shape, spacing, avatarStyle }) => {
+  const wrapperStyle = useMemo(
+    () => [
+      styles.avatarWrapper,
+      index > 0 && { marginLeft: spacing },
+    ],
+    [index, spacing]
+  );
+
+  return (
+    <View style={wrapperStyle}>
+      <Avatar
+        uri={item.uri}
+        name={item.name}
+        icon={item.icon}
+        size={size}
+        shape={shape}
+        style={avatarStyle}
+      />
+    </View>
+  );
+});
+
+// Memoized overflow badge
+const OverflowBadge = React.memo<{
+  count: number;
+  spacing: number;
+  config: any;
+  shape: AvatarShape;
+  surfaceSecondary: string;
+  onBackground: string;
+  textSecondary: string;
+}>(({ count, spacing, config, shape, surfaceSecondary, onBackground, textSecondary }) => {
+  const wrapperStyle = useMemo(
+    () => [
+      styles.avatarWrapper,
+      { marginLeft: spacing },
+    ],
+    [spacing]
+  );
+
+  const badgeStyle = useMemo(
+    () => [
+      styles.overflow,
+      {
+        width: config.size,
+        height: config.size,
+        borderRadius: shape === 'circle' ? config.size / 2 : shape === 'rounded' ? 8 : 0,
+        backgroundColor: surfaceSecondary,
+        borderWidth: 2,
+        borderColor: onBackground,
+      },
+    ],
+    [config.size, shape, surfaceSecondary, onBackground]
+  );
+
+  const textStyle = useMemo(
+    () => [
+      styles.overflowText,
+      {
+        fontSize: config.fontSize,
+        color: textSecondary,
+      },
+    ],
+    [config.fontSize, textSecondary]
+  );
+
+  return (
+    <View style={wrapperStyle}>
+      <View style={badgeStyle}>
+        <AtomicText
+          type="bodySmall"
+          style={textStyle}
+        >
+          +{count}
+        </AtomicText>
+      </View>
+    </View>
+  );
+});
+
+export const AvatarGroup: React.FC<AvatarGroupProps> = React.memo(({
   items,
   maxVisible = AVATAR_CONSTANTS.MAX_GROUP_VISIBLE,
   size = AVATAR_CONSTANTS.DEFAULT_SIZE,
@@ -51,76 +140,62 @@ export const AvatarGroup: React.FC<AvatarGroupProps> = ({
   const tokens = useAppDesignTokens();
   const config = SIZE_CONFIGS[size];
 
-  // Calculate visible avatars and overflow count
-  const visibleItems = items.slice(0, maxVisible);
-  const overflowCount = items.length - maxVisible;
-  const hasOverflow = overflowCount > 0;
+  // Memoize calculations to prevent recalculation on every render
+  const { visibleItems, overflowCount, hasOverflow } = useMemo(() => {
+    const visItems = items.slice(0, maxVisible);
+    const overflow = items.length - maxVisible;
+    return {
+      visibleItems: visItems,
+      overflowCount: overflow,
+      hasOverflow: overflow > 0,
+    };
+  }, [items, maxVisible]);
+
+  // Memoize avatar style
+  const avatarStyle = useMemo(
+    () => [
+      styles.avatar,
+      {
+        borderWidth: 2,
+        borderColor: tokens.colors.onBackground,
+      },
+    ],
+    [tokens.colors.onBackground]
+  );
+
+  // Stable key extractor
+  const keyExtractor = useCallback((item: AvatarGroupItem, index: number) => {
+    return item.uri || item.name || item.icon || `avatar-${index}`;
+  }, []);
 
   return (
     <View style={[styles.container, style]}>
       {visibleItems.map((item, index) => (
-        <View
-          key={item.uri || item.name || item.icon || `avatar-${index}`}
-          style={[
-            styles.avatarWrapper,
-            index > 0 && { marginLeft: spacing },
-          ]}
-        >
-          <Avatar
-            uri={item.uri}
-            name={item.name}
-            icon={item.icon}
-            size={size}
-            shape={shape}
-            style={[
-              styles.avatar,
-              {
-                borderWidth: 2,
-                borderColor: tokens.colors.onBackground,
-              },
-            ]}
-          />
-        </View>
+        <AvatarItem
+          key={keyExtractor(item, index)}
+          item={item}
+          index={index}
+          size={size}
+          shape={shape}
+          spacing={spacing}
+          avatarStyle={avatarStyle}
+        />
       ))}
 
       {hasOverflow && (
-        <View
-          style={[
-            styles.avatarWrapper,
-            { marginLeft: spacing },
-          ]}
-        >
-          <View
-            style={[
-              styles.overflow,
-              {
-                width: config.size,
-                height: config.size,
-                borderRadius: shape === 'circle' ? config.size / 2 : shape === 'rounded' ? 8 : 0,
-                backgroundColor: tokens.colors.surfaceSecondary,
-                borderWidth: 2,
-                borderColor: tokens.colors.onBackground,
-              },
-            ]}
-          >
-            <AtomicText
-              type="bodySmall"
-              style={[
-                styles.overflowText,
-                {
-                  fontSize: config.fontSize,
-                  color: tokens.colors.textSecondary,
-                },
-              ]}
-            >
-              +{overflowCount}
-            </AtomicText>
-          </View>
-        </View>
+        <OverflowBadge
+          count={overflowCount}
+          spacing={spacing}
+          config={config}
+          shape={shape}
+          surfaceSecondary={tokens.colors.surfaceSecondary}
+          onBackground={tokens.colors.onBackground}
+          textSecondary={tokens.colors.textSecondary}
+        />
       )}
     </View>
   );
-};
+});
 
 const styles = StyleSheet.create({
   container: {