@umituz/react-native-design-system 1.1.3 → 1.2.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@umituz/react-native-design-system",
-  "version": "1.1.3",
+  "version": "1.2.0",
   "description": "Universal design system for React Native apps - Domain-Driven Design architecture with Material Design 3 components",
   "main": "src/index.ts",
   "types": "src/index.ts",

package/src/domains/icons/domain/config/IconLibraryConfig.ts

@@ -0,0 +1,93 @@
+/**
+ * Icon Library Configuration
+ *
+ * 🔧 SINGLE SOURCE OF TRUTH FOR ICON LIBRARY SELECTION
+ *
+ * To change icon library:
+ * 1. Update package.json with new library
+ * 2. Change CURRENT_LIBRARY below
+ * 3. Create adapter if needed (infrastructure/adapters/)
+ * 4. Done! All apps automatically use new library
+ *
+ * @example
+ * // Switch to Material Icons:
+ * export const CURRENT_LIBRARY: IconLibraryType = 'material';
+ */
+
+export type IconLibraryType = 'lucide' | 'material' | 'fontawesome' | 'ionicons';
+
+/**
+ * 🔧 CHANGE THIS TO SWITCH ICON LIBRARY
+ */
+export const CURRENT_LIBRARY: IconLibraryType = 'lucide';
+
+/**
+ * Icon Library Configuration
+ */
+export const ICON_LIBRARY_CONFIG = {
+  /**
+   * Current icon library in use
+   */
+  library: CURRENT_LIBRARY,
+
+  /**
+   * Default icon size (in pixels)
+   */
+  defaultSize: 24,
+
+  /**
+   * Default stroke width for outline icons
+   */
+  defaultStrokeWidth: 2,
+
+  /**
+   * Library metadata
+   */
+  libraries: {
+    lucide: {
+      name: 'Lucide',
+      package: 'lucide-react-native',
+      version: '^0.468.0',
+      iconCount: 1639,
+      type: 'outline',
+      adapter: 'LucideAdapter',
+    },
+    material: {
+      name: 'Material Icons',
+      package: '@expo/vector-icons',
+      version: '^14.0.0',
+      iconCount: 2000,
+      type: 'filled',
+      adapter: 'MaterialAdapter',
+    },
+    fontawesome: {
+      name: 'Font Awesome',
+      package: '@expo/vector-icons',
+      version: '^14.0.0',
+      iconCount: 1500,
+      type: 'solid',
+      adapter: 'FontAwesomeAdapter',
+    },
+    ionicons: {
+      name: 'Ionicons',
+      package: '@expo/vector-icons',
+      version: '^14.0.0',
+      iconCount: 1300,
+      type: 'outline',
+      adapter: 'IoniconsAdapter',
+    },
+  },
+} as const;
+
+/**
+ * Get current library metadata
+ */
+export const getCurrentLibrary = () => {
+  return ICON_LIBRARY_CONFIG.libraries[CURRENT_LIBRARY];
+};
+
+/**
+ * Type-safe library check
+ * Factory uses Lucide icons only
+ */
+export const isLucideLibrary = () => true;

package/src/domains/icons/domain/entities/Icon.ts

@@ -0,0 +1,143 @@
+/**
+ * Icons Domain - Entities
+ *
+ * Core icon types and interfaces for the App Factory.
+ * Provides unified access to Lucide icons (design-system) + Expo vector icons.
+ *
+ * @domain icons
+ * @layer domain
+ */
+
+/**
+ * Icon library types
+ * - lucide: Lucide React Native icons (already in design-system/AtomicIcon)
+ * - material: Material Design icons (@expo/vector-icons)
+ * - fontawesome: FontAwesome icons (@expo/vector-icons)
+ * - ionicons: Ionicons (@expo/vector-icons)
+ */
+export enum IconLibrary {
+  LUCIDE = 'lucide',
+  MATERIAL = 'material',
+  FONTAWESOME = 'fontawesome',
+  IONICONS = 'ionicons',
+}
+
+/**
+ * Icon category for organization
+ */
+export enum IconCategory {
+  ALL = 'all',
+  NAVIGATION = 'navigation',
+  ACTION = 'action',
+  SOCIAL = 'social',
+  COMMUNICATION = 'communication',
+  MEDIA = 'media',
+  BUSINESS = 'business',
+  WEATHER = 'weather',
+  SYMBOLS = 'symbols',
+  EMOJI = 'emoji',
+}
+
+/**
+ * Icon metadata for registry
+ */
+export interface IconMetadata {
+  name: string;
+  library: IconLibrary;
+  category: IconCategory;
+  tags: string[];
+  searchTerms: string[];
+}
+
+/**
+ * Icon registry interface
+ */
+export interface IIconRegistry {
+  /**
+   * Get all icons in the library
+   */
+  getAllIcons(): IconMetadata[];
+
+  /**
+   * Get icons by category
+   */
+  getIconsByCategory(category: IconCategory): IconMetadata[];
+
+  /**
+   * Search icons by query
+   */
+  searchIcons(query: string): IconMetadata[];
+
+  /**
+   * Get icon metadata by name
+   */
+  getIconMetadata(name: string): IconMetadata | null;
+}
+
+/**
+ * Icon picker configuration
+ */
+export interface IconPickerConfig {
+  libraries: IconLibrary[];
+  categories: IconCategory[];
+  showSearch: boolean;
+  multiSelect: boolean;
+  maxSelections?: number;
+  onSelect: (icons: IconMetadata[]) => void;
+  onCancel?: () => void;
+}
+
+/**
+ * Icon constants
+ */
+export const ICON_CONSTANTS = {
+  DEFAULT_SIZE: 24,
+  DEFAULT_COLOR: 'onSurface',
+  DEFAULT_LIBRARY: IconLibrary.LUCIDE,
+  MAX_SEARCH_RESULTS: 50,
+} as const;
+
+/**
+ * Icon utility functions
+ */
+export const IconUtils = {
+  /**
+   * Normalize icon name for search
+   */
+  normalizeIconName: (name: string): string => {
+    return name.toLowerCase().replace(/[^a-z0-9]/g, '');
+  },
+
+  /**
+   * Match search query against icon metadata
+   */
+  matchesSearch: (icon: IconMetadata, query: string): boolean => {
+    const normalizedQuery = IconUtils.normalizeIconName(query);
+    const normalizedName = IconUtils.normalizeIconName(icon.name);
+    const normalizedTags = icon.tags.map(tag => IconUtils.normalizeIconName(tag));
+    const normalizedTerms = icon.searchTerms.map(term => IconUtils.normalizeIconName(term));
+
+    return (
+      normalizedName.includes(normalizedQuery) ||
+      normalizedTags.some(tag => tag.includes(normalizedQuery)) ||
+      normalizedTerms.some(term => term.includes(normalizedQuery))
+    );
+  },
+
+  /**
+   * Filter icons by category
+   */
+  filterByCategory: (icons: IconMetadata[], category: IconCategory): IconMetadata[] => {
+    if (category === IconCategory.ALL) {
+      return icons;
+    }
+    return icons.filter(icon => icon.category === category);
+  },
+
+  /**
+   * Sort icons alphabetically
+   */
+  sortByName: (icons: IconMetadata[]): IconMetadata[] => {
+    return [...icons].sort((a, b) => a.name.localeCompare(b.name));
+  },
+};

package/src/domains/icons/domain/interfaces/IIconAdapter.ts

@@ -0,0 +1,144 @@
+/**
+ * Icon Adapter Interface
+ *
+ * Universal interface that all icon library adapters must implement.
+ * This allows seamless switching between icon libraries.
+ *
+ * @example
+ * // Implementing for a new library:
+ * export const MyLibraryAdapter: IIconAdapter = {
+ *   getIconComponent: (name) => MyIcons[name],
+ *   getIconSize: (size) => sizeMap[size],
+ *   getIconColor: (color, tokens) => colorMap[color],
+ *   getAllIcons: () => Object.keys(MyIcons),
+ * };
+ */
+
+import type { DesignTokens } from '@umituz/react-native-design-system';
+
+export type IconSize = 'xs' | 'sm' | 'md' | 'lg' | 'xl' | 'xxl';
+export type IconColor =
+  | 'primary'
+  | 'secondary'
+  | 'success'
+  | 'warning'
+  | 'error'
+  | 'info'
+  | 'onSurface'
+  | 'surfaceVariant'
+  | 'onPrimary'
+  | 'onSecondary'
+  | 'textInverse';
+
+/**
+ * Icon Adapter Interface
+ * All icon library adapters must implement this interface
+ */
+export interface IIconAdapter {
+  /**
+   * Get the icon component for a given icon name
+   * @param name - Icon name (library-specific)
+   * @returns Icon component or null if not found
+   */
+  getIconComponent: (name: string) => any | null;
+
+  /**
+   * Convert semantic size to pixel size
+   * @param size - Semantic size (xs, sm, md, lg, xl, xxl)
+   * @param customSize - Optional custom pixel size
+   * @returns Pixel size
+   */
+  getIconSize: (size: IconSize, customSize?: number) => number;
+
+  /**
+   * Convert semantic color to hex color
+   * @param color - Semantic color name
+   * @param tokens - Design tokens for theme colors
+   * @param customColor - Optional custom hex color
+   * @returns Hex color string
+   */
+  getIconColor: (
+    color: IconColor,
+    tokens: DesignTokens,
+    customColor?: string
+  ) => string;
+
+  /**
+   * Get all available icon names for this library
+   * @returns Array of icon names
+   */
+  getAllIcons: () => string[];
+
+  /**
+   * Check if an icon exists in the library
+   * @param name - Icon name to check
+   * @returns True if icon exists
+   */
+  hasIcon: (name: string) => boolean;
+
+  /**
+   * Get default stroke width for outline icons
+   * @returns Stroke width number
+   */
+  getStrokeWidth?: () => number;
+}
+
+/**
+ * Icon Props - Universal props for Icon component
+ */
+export interface IconProps {
+  /**
+   * Icon name (library-specific)
+   */
+  name: string;
+
+  /**
+   * Icon size preset
+   */
+  size?: IconSize;
+
+  /**
+   * Custom pixel size (overrides size preset)
+   */
+  customSize?: number;
+
+  /**
+   * Semantic color
+   */
+  color?: IconColor;
+
+  /**
+   * Custom hex color (overrides semantic color)
+   */
+  customColor?: string;
+
+  /**
+   * Stroke width for outline icons
+   */
+  strokeWidth?: number;
+
+  /**
+   * Background circle for icon
+   */
+  withBackground?: boolean;
+
+  /**
+   * Background color
+   */
+  backgroundColor?: string;
+
+  /**
+   * Accessibility label
+   */
+  accessibilityLabel?: string;
+
+  /**
+   * Test ID
+   */
+  testID?: string;
+
+  /**
+   * Custom styles
+   */
+  style?: any;
+}

package/src/domains/icons/index.ts

@@ -0,0 +1,109 @@
+/**
+ * Icons Domain - Centralized Icon System
+ *
+ * 🎯 SINGLE SOURCE OF TRUTH FOR ALL ICONS
+ *
+ * Universal icon library system with easy library switching.
+ * Change icon library = change one config file!
+ *
+ * @domain icons
+ * @enabled true (All apps)
+ *
+ * ARCHITECTURE:
+ * ```
+ * domains/icons/
+ * ├── domain/
+ * │   ├── config/
+ * │   │   └── IconLibraryConfig.ts    🔧 Change library here!
+ * │   └── interfaces/
+ * │       └── IIconAdapter.ts         Interface for adapters
+ * ├── infrastructure/
+ * │   └── adapters/
+ * │       ├── LucideAdapter.ts        Current: Lucide (1,639 icons)
+ * │       ├── MaterialAdapter.ts      Future: Material Icons
+ * │       └── FontAwesomeAdapter.ts   Future: Font Awesome
+ * └── presentation/
+ *     └── components/
+ *         └── Icon.tsx                Universal Icon component
+ * ```
+ *
+ * USAGE:
+ * ```typescript
+ * import { Icon } from '@domains/icons';
+ *
+ * // Basic usage
+ * <Icon name="Settings" size="md" color="primary" />
+ *
+ * // Custom size and color
+ * <Icon name="Heart" customSize={32} customColor="#FF0000" />
+ *
+ * // With background
+ * <Icon name="Info" size="lg" withBackground backgroundColor="#667eea" />
+ * ```
+ *
+ * 🔧 TO CHANGE ICON LIBRARY:
+ *
+ * Step 1: Update package.json
+ * ```json
+ * {
+ *   "dependencies": {
+ *     "new-icon-library": "^1.0.0"
+ *   }
+ * }
+ * ```
+ *
+ * Step 2: Change CURRENT_LIBRARY in domain/config/IconLibraryConfig.ts
+ * ```typescript
+ * export const CURRENT_LIBRARY: IconLibraryType = 'material'; // Changed!
+ * ```
+ *
+ * Step 3: Create adapter (if needed)
+ * ```typescript
+ * // infrastructure/adapters/MaterialAdapter.ts
+ * export const MaterialAdapter: IIconAdapter = {
+ *   getIconComponent: (name) => MaterialIcons[name],
+ *   // ... implement interface
+ * };
+ * ```
+ *
+ * Step 4: Done! All apps use new library automatically ✅
+ *
+ * CURRENT LIBRARY: Lucide (1,639 icons)
+ * @see https://lucide.dev/icons/
+ *
+ * DEPENDENCIES:
+ * - lucide-react-native: ^0.468.0 (Current library)
+ */
+
+// ============================================================================
+// PRESENTATION LAYER - Universal Icon Component
+// ============================================================================
+
+export { Icon } from './presentation/components/Icon';
+export type {
+  IconProps,
+  IconSize,
+  IconColor,
+  IconName,
+} from './presentation/components/Icon';
+
+// ============================================================================
+// DOMAIN LAYER - Configuration & Interfaces
+// ============================================================================
+
+export {
+  CURRENT_LIBRARY,
+  ICON_LIBRARY_CONFIG,
+  getCurrentLibrary,
+  isLucideLibrary,
+} from './domain/config/IconLibraryConfig';
+export type { IconLibraryType } from './domain/config/IconLibraryConfig';
+
+export type { IIconAdapter } from './domain/interfaces/IIconAdapter';
+
+// ============================================================================
+// INFRASTRUCTURE LAYER - Adapters
+// ============================================================================
+
+export { LucideAdapter } from './infrastructure/adapters/LucideAdapter';
+export type { LucideIconName } from './infrastructure/adapters/LucideAdapter';

package/src/domains/icons/infrastructure/adapters/LucideAdapter.ts

@@ -0,0 +1,100 @@
+/**
+ * Lucide Icon Library Adapter
+ *
+ * Adapter for lucide-react-native library (1,639 icons).
+ * Implements IIconAdapter interface for seamless library switching.
+ *
+ * @library lucide-react-native
+ * @version ^0.468.0
+ * @icons 1,639
+ * @type outline
+ *
+ * @see https://lucide.dev/icons/
+ */
+
+import { icons } from 'lucide-react-native';
+import type { IIconAdapter, IconSize, IconColor } from '../../domain/interfaces/IIconAdapter';
+import type { DesignTokens } from '@umituz/react-native-design-system';
+
+/**
+ * Size mapping: Semantic → Pixels
+ */
+const SIZE_MAP: Record<IconSize, number> = {
+  xs: 16,
+  sm: 20,
+  md: 24,
+  lg: 28,
+  xl: 32,
+  xxl: 40,
+};
+
+/**
+ * Lucide Adapter Implementation
+ */
+export const LucideAdapter: IIconAdapter = {
+  /**
+   * Get Lucide icon component by name
+   */
+  getIconComponent: (name: string) => {
+    const IconComponent = icons[name as keyof typeof icons];
+    if (!IconComponent) {
+      console.warn(`[LucideAdapter] Icon "${name}" not found in Lucide library`);
+      return null;
+    }
+    return IconComponent;
+  },
+
+  /**
+   * Get icon size in pixels
+   */
+  getIconSize: (size: IconSize, customSize?: number) => {
+    return customSize || SIZE_MAP[size];
+  },
+
+  /**
+   * Get icon color from theme
+   */
+  getIconColor: (color: IconColor, tokens: DesignTokens, customColor?: string) => {
+    if (customColor) return customColor;
+
+    const colorMap: Record<IconColor, string> = {
+      primary: tokens.colors.primary,
+      secondary: tokens.colors.secondary,
+      success: tokens.colors.success,
+      warning: tokens.colors.warning,
+      error: tokens.colors.error,
+      info: tokens.colors.info,
+      onSurface: tokens.colors.onSurface,
+      surfaceVariant: tokens.colors.surfaceVariant,
+      onPrimary: tokens.colors.onPrimary,
+      onSecondary: tokens.colors.onSecondary,
+      textInverse: tokens.colors.textInverse,
+    };
+
+    return colorMap[color];
+  },
+
+  /**
+   * Get all available Lucide icon names
+   */
+  getAllIcons: () => {
+    return Object.keys(icons);
+  },
+
+  /**
+   * Check if icon exists in Lucide library
+   */
+  hasIcon: (name: string) => {
+    return name in icons;
+  },
+
+  /**
+   * Default stroke width for Lucide outline icons
+   */
+  getStrokeWidth: () => 2,
+};
+
+/**
+ * Lucide icon names type (for TypeScript autocomplete)
+ */
+export type LucideIconName = keyof typeof icons;

package/src/domains/icons/infrastructure/registries/ExpoIconRegistry.ts

@@ -0,0 +1,191 @@
+/**
+ * Icons Domain - Expo Vector Icons Registry
+ *
+ * Registry for @expo/vector-icons (Material, FontAwesome, Ionicons).
+ * Provides metadata and search capabilities for 1000+ icons.
+ *
+ * @domain icons
+ * @layer infrastructure
+ */
+
+import type { IIconRegistry, IconMetadata } from '@domains/icons/domain/entities/Icon';
+import { IconLibrary, IconCategory } from '@domains/icons/domain/entities/Icon';
+
+/**
+ * Expo vector icons registry
+ * Maps common Material Design, FontAwesome, and Ionicons
+ */
+export class ExpoIconRegistry implements IIconRegistry {
+  private icons: IconMetadata[] = [
+    // Navigation icons (Material Design)
+    {
+      name: 'home',
+      library: IconLibrary.MATERIAL,
+      category: IconCategory.NAVIGATION,
+      tags: ['house', 'main', 'start'],
+      searchTerms: ['home', 'house', 'main', 'dashboard'],
+    },
+    {
+      name: 'arrow-back',
+      library: IconLibrary.MATERIAL,
+      category: IconCategory.NAVIGATION,
+      tags: ['back', 'previous', 'return'],
+      searchTerms: ['arrow', 'back', 'previous', 'navigate'],
+    },
+    {
+      name: 'menu',
+      library: IconLibrary.MATERIAL,
+      category: IconCategory.NAVIGATION,
+      tags: ['hamburger', 'drawer', 'navigation'],
+      searchTerms: ['menu', 'hamburger', 'navigation', 'drawer'],
+    },
+    {
+      name: 'search',
+      library: IconLibrary.MATERIAL,
+      category: IconCategory.ACTION,
+      tags: ['find', 'lookup', 'query'],
+      searchTerms: ['search', 'find', 'lookup', 'magnify'],
+    },
+
+    // Action icons (Material Design)
+    {
+      name: 'add',
+      library: IconLibrary.MATERIAL,
+      category: IconCategory.ACTION,
+      tags: ['plus', 'create', 'new'],
+      searchTerms: ['add', 'plus', 'create', 'new'],
+    },
+    {
+      name: 'delete',
+      library: IconLibrary.MATERIAL,
+      category: IconCategory.ACTION,
+      tags: ['remove', 'trash', 'bin'],
+      searchTerms: ['delete', 'remove', 'trash', 'garbage'],
+    },
+    {
+      name: 'edit',
+      library: IconLibrary.MATERIAL,
+      category: IconCategory.ACTION,
+      tags: ['pencil', 'modify', 'update'],
+      searchTerms: ['edit', 'pencil', 'modify', 'write'],
+    },
+    {
+      name: 'settings',
+      library: IconLibrary.MATERIAL,
+      category: IconCategory.ACTION,
+      tags: ['gear', 'preferences', 'config'],
+      searchTerms: ['settings', 'gear', 'preferences', 'options'],
+    },
+    {
+      name: 'favorite',
+      library: IconLibrary.MATERIAL,
+      category: IconCategory.ACTION,
+      tags: ['heart', 'like', 'love'],
+      searchTerms: ['favorite', 'heart', 'like', 'love'],
+    },
+
+    // Social icons (FontAwesome)
+    {
+      name: 'facebook',
+      library: IconLibrary.FONTAWESOME,
+      category: IconCategory.SOCIAL,
+      tags: ['fb', 'social', 'network'],
+      searchTerms: ['facebook', 'fb', 'social', 'meta'],
+    },
+    {
+      name: 'twitter',
+      library: IconLibrary.FONTAWESOME,
+      category: IconCategory.SOCIAL,
+      tags: ['x', 'social', 'tweet'],
+      searchTerms: ['twitter', 'x', 'social', 'tweet'],
+    },
+    {
+      name: 'instagram',
+      library: IconLibrary.FONTAWESOME,
+      category: IconCategory.SOCIAL,
+      tags: ['ig', 'social', 'photo'],
+      searchTerms: ['instagram', 'ig', 'social', 'photo'],
+    },
+
+    // Communication icons (Ionicons)
+    {
+      name: 'mail',
+      library: IconLibrary.IONICONS,
+      category: IconCategory.COMMUNICATION,
+      tags: ['email', 'message', 'envelope'],
+      searchTerms: ['mail', 'email', 'message', 'contact'],
+    },
+    {
+      name: 'call',
+      library: IconLibrary.IONICONS,
+      category: IconCategory.COMMUNICATION,
+      tags: ['phone', 'telephone', 'dial'],
+      searchTerms: ['call', 'phone', 'telephone', 'dial'],
+    },
+    {
+      name: 'notifications',
+      library: IconLibrary.IONICONS,
+      category: IconCategory.COMMUNICATION,
+      tags: ['bell', 'alert', 'reminder'],
+      searchTerms: ['notifications', 'bell', 'alert', 'reminder'],
+    },
+
+    // Media icons (Material Design)
+    {
+      name: 'camera',
+      library: IconLibrary.MATERIAL,
+      category: IconCategory.MEDIA,
+      tags: ['photo', 'picture', 'snapshot'],
+      searchTerms: ['camera', 'photo', 'picture', 'image'],
+    },
+    {
+      name: 'image',
+      library: IconLibrary.MATERIAL,
+      category: IconCategory.MEDIA,
+      tags: ['photo', 'picture', 'gallery'],
+      searchTerms: ['image', 'photo', 'picture', 'gallery'],
+    },
+    {
+      name: 'videocam',
+      library: IconLibrary.MATERIAL,
+      category: IconCategory.MEDIA,
+      tags: ['video', 'camera', 'record'],
+      searchTerms: ['video', 'camera', 'record', 'film'],
+    },
+  ];
+
+  getAllIcons(): IconMetadata[] {
+    return this.icons;
+  }
+
+  getIconsByCategory(category: IconCategory): IconMetadata[] {
+    if (category === IconCategory.ALL) {
+      return this.icons;
+    }
+    return this.icons.filter(icon => icon.category === category);
+  }
+
+  searchIcons(query: string): IconMetadata[] {
+    if (!query.trim()) {
+      return this.icons;
+    }
+
+    const normalizedQuery = query.toLowerCase().replace(/[^a-z0-9]/g, '');
+
+    return this.icons.filter(icon => {
+      const normalizedName = icon.name.toLowerCase().replace(/[^a-z0-9]/g, '');
+      const normalizedTags = icon.tags.map(tag => tag.toLowerCase().replace(/[^a-z0-9]/g, ''));
+      const normalizedTerms = icon.searchTerms.map(term => term.toLowerCase().replace(/[^a-z0-9]/g, ''));
+
+      return (
+        normalizedName.includes(normalizedQuery) ||
+        normalizedTags.some(tag => tag.includes(normalizedQuery)) ||
+        normalizedTerms.some(term => term.includes(normalizedQuery))
+      );
+    });
+  }
+
+  getIconMetadata(name: string): IconMetadata | null {
+    return this.icons.find(icon => icon.name === name) || null;
+  }
+}

package/src/domains/icons/presentation/components/Icon.tsx

@@ -0,0 +1,132 @@
+/**
+ * Universal Icon Component
+ *
+ * 🎯 SINGLE ICON COMPONENT FOR ALL APPS
+ *
+ * Automatically uses the icon library configured in IconLibraryConfig.
+ * Change library = change config, no code changes needed!
+ *
+ * @example
+ * ```tsx
+ * import { Icon } from '@domains/icons';
+ *
+ * // Basic usage
+ * <Icon name="Settings" size="md" color="primary" />
+ *
+ * // Custom size and color
+ * <Icon name="Heart" customSize={32} customColor="#FF0000" />
+ *
+ * // With background
+ * <Icon name="Info" size="lg" withBackground backgroundColor="#667eea" />
+ * ```
+ *
+ * 🔧 To change icon library:
+ * 1. Update CURRENT_LIBRARY in domain/config/IconLibraryConfig.ts
+ * 2. Done! All apps use new library automatically
+ */
+
+import React from 'react';
+import { View, StyleSheet, StyleProp, ViewStyle } from 'react-native';
+import { useAppDesignTokens } from '../../../../presentation/hooks/useAppDesignTokens';
+import { CURRENT_LIBRARY } from '../../domain/config/IconLibraryConfig';
+import { LucideAdapter } from '../../infrastructure/adapters/LucideAdapter';
+import type { IconProps } from '../../domain/interfaces/IIconAdapter';
+
+/**
+ * Get adapter based on current library configuration
+ */
+const getAdapter = () => {
+  switch (CURRENT_LIBRARY) {
+    case 'lucide':
+      return LucideAdapter;
+    // Future: Add more adapters here
+    // case 'material':
+    //   return MaterialAdapter;
+    // case 'fontawesome':
+    //   return FontAwesomeAdapter;
+    default:
+      return LucideAdapter;
+  }
+};
+
+/**
+ * Universal Icon Component
+ */
+export const Icon: React.FC<IconProps> = ({
+  name,
+  size = 'md',
+  customSize,
+  color = 'onSurface',
+  customColor,
+  strokeWidth,
+  withBackground = false,
+  backgroundColor,
+  accessibilityLabel,
+  testID,
+  style,
+}) => {
+  const tokens = useAppDesignTokens();
+  const adapter = getAdapter();
+
+  // Get icon component from adapter
+  const IconComponent = adapter.getIconComponent(name);
+
+  if (!IconComponent) {
+    return null;
+  }
+
+  // Calculate icon size
+  const iconSize = adapter.getIconSize(size, customSize);
+
+  // Get icon color from theme
+  const iconColor = adapter.getIconColor(color, tokens, customColor);
+
+  // Get stroke width (for outline icons)
+  const iconStrokeWidth = strokeWidth || adapter.getStrokeWidth?.() || 2;
+
+  // Container size (slightly larger than icon)
+  const containerSize = iconSize + 8;
+
+  const containerStyles: StyleProp<ViewStyle> = [
+    withBackground && {
+      width: containerSize,
+      height: containerSize,
+      borderRadius: containerSize / 2,
+      backgroundColor: backgroundColor || tokens.colors.surfaceVariant,
+      justifyContent: 'center',
+      alignItems: 'center',
+    },
+    style,
+  ];
+
+  const IconElement = (
+    <IconComponent
+      size={iconSize}
+      color={iconColor}
+      strokeWidth={iconStrokeWidth}
+      accessibilityLabel={accessibilityLabel || `${name} icon`}
+      testID={testID}
+    />
+  );
+
+  if (withBackground) {
+    return (
+      <View style={containerStyles} testID={`${testID}-container`}>
+        {IconElement}
+      </View>
+    );
+  }
+
+  return IconElement;
+};
+
+/**
+ * Export icon types for convenience
+ */
+export type { IconProps } from '../../domain/interfaces/IIconAdapter';
+export { type IconSize, type IconColor } from '../../domain/interfaces/IIconAdapter';
+
+/**
+ * Export current library's icon names for TypeScript autocomplete
+ */
+export type { LucideIconName as IconName } from '../../infrastructure/adapters/LucideAdapter';

package/src/domains/icons/presentation/hooks/useIconLibrary.ts

@@ -0,0 +1,141 @@
+/**
+ * Icons Domain - useIconLibrary Hook
+ *
+ * React hook for accessing icon libraries (Lucide + Expo vector icons).
+ * Provides search, filter, and metadata access for all available icons.
+ *
+ * @domain icons
+ * @layer presentation
+ */
+
+import { useMemo, useState, useCallback } from 'react';
+import type { IconMetadata } from '@domains/icons/domain/entities/Icon';
+import { IconLibrary, IconCategory, IconUtils, ICON_CONSTANTS } from '@domains/icons/domain/entities/Icon';
+import { ExpoIconRegistry } from '@domains/icons/infrastructure/registries/ExpoIconRegistry';
+
+/**
+ * Hook for icon library access and search
+ *
+ * @example
+ * const { icons, searchIcons, filterByCategory } = useIconLibrary();
+ *
+ * // Search icons
+ * const results = searchIcons('home');
+ *
+ * // Filter by category
+ * const navIcons = filterByCategory(IconCategory.NAVIGATION);
+ */
+export const useIconLibrary = (defaultLibrary: IconLibrary = ICON_CONSTANTS.DEFAULT_LIBRARY) => {
+  const [selectedLibrary, setSelectedLibrary] = useState<IconLibrary>(defaultLibrary);
+  const [selectedCategory, setSelectedCategory] = useState<IconCategory>(IconCategory.ALL);
+
+  // Initialize registry
+  const registry = useMemo(() => new ExpoIconRegistry(), []);
+
+  /**
+   * Get all icons from the selected library
+   */
+  const icons = useMemo(() => {
+    const allIcons = registry.getAllIcons();
+    return selectedLibrary === IconLibrary.LUCIDE
+      ? []  // Lucide icons are in design-system/AtomicIcon
+      : allIcons.filter(icon => icon.library === selectedLibrary);
+  }, [registry, selectedLibrary]);
+
+  /**
+   * Get icons filtered by category
+   */
+  const iconsByCategory = useMemo(() => {
+    return IconUtils.filterByCategory(icons, selectedCategory);
+  }, [icons, selectedCategory]);
+
+  /**
+   * Search icons by query
+   */
+  const searchIcons = useCallback(
+    (query: string): IconMetadata[] => {
+      if (!query.trim()) {
+        return iconsByCategory;
+      }
+
+      const results = registry.searchIcons(query);
+      const filteredResults = selectedLibrary === IconLibrary.LUCIDE
+        ? results
+        : results.filter(icon => icon.library === selectedLibrary);
+
+      return IconUtils.filterByCategory(filteredResults, selectedCategory)
+        .slice(0, ICON_CONSTANTS.MAX_SEARCH_RESULTS);
+    },
+    [registry, selectedLibrary, selectedCategory, iconsByCategory]
+  );
+
+  /**
+   * Filter icons by category
+   */
+  const filterByCategory = useCallback(
+    (category: IconCategory): IconMetadata[] => {
+      return IconUtils.filterByCategory(icons, category);
+    },
+    [icons]
+  );
+
+  /**
+   * Get icon metadata by name
+   */
+  const getIconMetadata = useCallback(
+    (name: string): IconMetadata | null => {
+      return registry.getIconMetadata(name);
+    },
+    [registry]
+  );
+
+  /**
+   * Get all available categories
+   */
+  const availableCategories = useMemo(() => {
+    return Object.values(IconCategory);
+  }, []);
+
+  /**
+   * Get all available libraries
+   */
+  const availableLibraries = useMemo(() => {
+    return Object.values(IconLibrary);
+  }, []);
+
+  /**
+   * Switch library
+   */
+  const switchLibrary = useCallback((library: IconLibrary) => {
+    setSelectedLibrary(library);
+  }, []);
+
+  /**
+   * Switch category
+   */
+  const switchCategory = useCallback((category: IconCategory) => {
+    setSelectedCategory(category);
+  }, []);
+
+  return {
+    // Current state
+    selectedLibrary,
+    selectedCategory,
+    icons: iconsByCategory,
+
+    // Search & filter
+    searchIcons,
+    filterByCategory,
+    getIconMetadata,
+
+    // Library & category management
+    switchLibrary,
+    switchCategory,
+    availableCategories,
+    availableLibraries,
+
+    // Constants
+    IconLibrary,
+    IconCategory,
+  };
+};

package/src/index.ts

@@ -351,3 +351,15 @@ export {
 export {
   useDesignSystemTheme,
 } from './infrastructure/theme/globalThemeStore';
+
+// =============================================================================
+// ICONS DOMAIN - Universal Icon System
+// =============================================================================
+
+export {
+  Icon,
+  type IconProps,
+  type IconSize,
+  type IconColor,
+  type IconName,
+} from './domains/icons/presentation/components/Icon';

package/src/presentation/atoms/AtomicIcon.tsx

@@ -1,132 +1,41 @@
 /**
- * AtomicIcon - Design System Icon Component
+ * AtomicIcon - Atomic Design System Icon Component
  *
- * Universal icon component using Lucide icons.
- * Provides semantic color mappings and size presets.
+ * Wrapper for the universal Icon component from @domains/icons
+ * Provides backward compatibility with AtomicIcon naming convention
+ * while leveraging the full power of the icons domain architecture.
  */
 
 import React from 'react';
-import type { ViewStyle } from 'react-native';
-import * as LucideIcons from 'lucide-react-native';
-import { useAppDesignTokens } from '../hooks/useAppDesignTokens';
-
-/**
- * Icon size presets
- */
-export type IconSize = 'xs' | 'sm' | 'md' | 'lg' | 'xl' | 'xxl';
-
-/**
- * Semantic color tokens
- */
-export type IconColor =
-  | 'primary'
-  | 'secondary'
-  | 'error'
-  | 'warning'
-  | 'success'
-  | 'info'
-  | 'onPrimary'
-  | 'onSurface'
-  | 'textPrimary'
-  | 'textSecondary'
-  | 'textDisabled';
-
-/**
- * Icon component props
- */
-export interface IconProps {
-  /** Icon name from Lucide icon set (PascalCase) */
-  name: string;
-  /** Semantic color token */
-  color?: IconColor;
-  /** Size preset */
-  size?: IconSize;
-  /** Custom size override (pixels) */
-  customSize?: number;
-  /** Custom color override (hex) */
-  customColor?: string;
-  /** Optional style */
-  style?: ViewStyle;
-  /** Optional test ID */
-  testID?: string;
-  /** Legacy prop support: icon (alias for name) */
-  icon?: string;
-}
-
-/**
- * Icon name type (all Lucide icon names as string)
- */
-export type IconName = string;
-
-/**
- * Size mapping (pixels)
- */
-const sizeMap: Record<IconSize, number> = {
-  xs: 16,
-  sm: 20,
-  md: 24,
-  lg: 28,
-  xl: 32,
-  xxl: 48,
-};
+import { Icon } from '../../domains/icons/presentation/components/Icon';
+import type { IconProps, IconSize, IconColor } from '../../domains/icons/domain/interfaces/IIconAdapter';
+import type { LucideIconName } from '../../domains/icons/infrastructure/adapters/LucideAdapter';
 
 /**
  * AtomicIcon Component
  *
- * Universal icon component with theme integration
+ * @example
+ * ```tsx
+ * import { AtomicIcon } from '@umituz/react-native-design-system';
+ *
+ * // Basic usage
+ * <AtomicIcon name="Settings" size="md" color="primary" />
+ *
+ * // Custom size and color
+ * <AtomicIcon name="Heart" customSize={32} customColor="#FF0000" />
+ *
+ * // With background
+ * <AtomicIcon name="Info" size="lg" withBackground backgroundColor="#667eea" />
+ * ```
  */
-export const AtomicIcon: React.FC<IconProps> = ({
-  name,
-  icon, // Legacy support
-  color = 'textPrimary',
-  size = 'md',
-  customSize,
-  customColor,
-  style,
-  testID,
-}) => {
-  const tokens = useAppDesignTokens();
-
-  // Support legacy 'icon' prop (fallback to 'name')
-  const iconName = name || icon || '';
-
-  // Get icon component from Lucide
-  const IconComponent = (LucideIcons as any)[iconName];
-
-  if (!IconComponent) {
-    console.warn(`Icon "${iconName}" not found in Lucide icon set`);
-    return null;
-  }
-
-  // Resolve color from semantic token
-  const resolveColor = (): string => {
-    if (customColor) return customColor;
-
-    const colorMap: Record<IconColor, string> = {
-      primary: tokens.colors.primary,
-      secondary: tokens.colors.secondary,
-      error: tokens.colors.error,
-      warning: tokens.colors.warning,
-      success: tokens.colors.success,
-      info: tokens.colors.info,
-      onPrimary: tokens.colors.onPrimary,
-      onSurface: tokens.colors.onSurface,
-      textPrimary: tokens.colors.textPrimary,
-      textSecondary: tokens.colors.textSecondary,
-      textDisabled: tokens.colors.textDisabled,
-    };
-
-    return colorMap[color];
-  };
-
-  // Resolve size
-  const iconSize = customSize || sizeMap[size];
-
-  return <IconComponent color={resolveColor()} size={iconSize} style={style} testID={testID} />;
+export const AtomicIcon: React.FC<IconProps> = (props) => {
+  return <Icon {...props} />;
 };
 
-// Re-export types for backward compatibility
+/**
+ * Re-export types with Atomic naming convention
+ */
 export type AtomicIconProps = IconProps;
 export type AtomicIconSize = IconSize;
 export type AtomicIconColor = IconColor;
-export type AtomicIconName = IconName;
+export type AtomicIconName = LucideIconName;