@umituz/react-native-design-system 1.5.0 → 1.7.0

package/lib/presentation/tokens/core/TokenFactory.d.ts

@@ -1,216 +0,0 @@
-/**
- * TOKEN FACTORY - THEME INJECTION LOGIC
- *
- * ✅ Factory Pattern for creating complete design tokens
- * ✅ Combines static tokens (BaseTokens) + dynamic colors (ColorPalette)
- * ✅ Type-safe token generation
- * ✅ Zero duplication - SINGLE SOURCE OF TRUTH
- *
- * @module TokenFactory
- */
-import { BASE_TOKENS } from './BaseTokens';
-import { withAlpha, type ThemeMode, type ColorPalette } from './ColorPalette';
-/**
- * Complete design tokens shape
- * Combines static tokens (spacing, typography, borders) + dynamic colors
- */
-export type DesignTokens = {
-    colors: ColorPalette;
-    spacing: typeof BASE_TOKENS.spacing;
-    typography: typeof BASE_TOKENS.typography;
-    iconSizes: typeof BASE_TOKENS.iconSizes;
-    opacity: typeof BASE_TOKENS.opacity;
-    avatarSizes: typeof BASE_TOKENS.avatarSizes;
-    borders: typeof BASE_TOKENS.borders & {
-        card: typeof BASE_TOKENS.borders.card & {
-            borderColor: string;
-        };
-        input: typeof BASE_TOKENS.borders.input & {
-            borderColor: string;
-        };
-    };
-};
-/**
- * Create complete design tokens for a specific theme mode
- *
- * @param mode - Theme mode ('light' or 'dark')
- * @returns Complete design tokens object
- *
- * @example
- * ```typescript
- * const lightTokens = createDesignTokens('light');
- * const darkTokens = createDesignTokens('dark');
- *
- * // Use in components
- * <View style={{ backgroundColor: lightTokens.colors.primary }}>
- *   <Text style={lightTokens.typography.bodyLarge}>Hello!</Text>
- * </View>
- * ```
- */
-export declare const createDesignTokens: (mode: ThemeMode) => DesignTokens;
-/**
- * STATIC DESIGN TOKENS - LIGHT THEME ONLY
- *
- * ⚠️ WARNING: These are STATIC and use light theme colors only!
- * ⚠️ DO NOT USE in React components - use useAppDesignTokens() hook instead
- *
- * Only use these in:
- * - Utility functions
- * - Constants files
- * - Non-React JavaScript code
- *
- * @deprecated Use useAppDesignTokens() hook in React components
- */
-export declare const STATIC_DESIGN_TOKENS: DesignTokens;
-/**
- * STATIC TOKENS (spacing, typography, borders)
- * These DON'T change with theme - safe to use anywhere
- */
-export declare const STATIC_TOKENS: {
-    readonly spacing: {
-        readonly xs: 4;
-        readonly sm: 8;
-        readonly md: 16;
-        readonly lg: 24;
-        readonly xl: 32;
-        readonly xxl: 48;
-        readonly xxxl: 64;
-        readonly screenPadding: 20;
-        readonly cardPadding: 16;
-        readonly buttonPadding: 16;
-        readonly inputPadding: 8;
-        readonly sectionSpacing: 24;
-        readonly iconSizeSmall: 16;
-        readonly iconSizeMedium: 20;
-        readonly iconSizeLarge: 24;
-        readonly iconSizeXLarge: 32;
-        readonly iconSizeHero: 64;
-        readonly buttonHeight: 48;
-        readonly inputHeight: 48;
-        readonly appBarHeight: 56;
-        readonly tabBarHeight: 60;
-    };
-    readonly typography: {
-        readonly fontPrimary: "System";
-        readonly fontSecondary: "System";
-        readonly fontMono: "Courier New";
-        readonly xs: 12;
-        readonly sm: 14;
-        readonly md: 16;
-        readonly lg: 18;
-        readonly xl: 20;
-        readonly xxl: 24;
-        readonly xxxl: 32;
-        readonly light: "300";
-        readonly regular: "400";
-        readonly medium: "500";
-        readonly semibold: "600";
-        readonly bold: "700";
-        readonly lineHeightTight: 1.2;
-        readonly lineHeightNormal: 1.5;
-        readonly lineHeightRelaxed: 1.7;
-        readonly displayLarge: import("react-native").TextStyle;
-        readonly displayMedium: import("react-native").TextStyle;
-        readonly displaySmall: import("react-native").TextStyle;
-        readonly headlineLarge: import("react-native").TextStyle;
-        readonly headlineMedium: import("react-native").TextStyle;
-        readonly headlineSmall: import("react-native").TextStyle;
-        readonly titleLarge: import("react-native").TextStyle;
-        readonly titleMedium: import("react-native").TextStyle;
-        readonly titleSmall: import("react-native").TextStyle;
-        readonly bodyLarge: import("react-native").TextStyle;
-        readonly bodyMedium: import("react-native").TextStyle;
-        readonly bodySmall: import("react-native").TextStyle;
-        readonly labelLarge: import("react-native").TextStyle;
-        readonly labelMedium: import("react-native").TextStyle;
-        readonly labelSmall: import("react-native").TextStyle;
-        readonly headingLarge: import("react-native").TextStyle;
-        readonly headingMedium: import("react-native").TextStyle;
-        readonly headingSmall: import("react-native").TextStyle;
-        readonly button: import("react-native").TextStyle;
-        readonly caption: import("react-native").TextStyle;
-        readonly overline: import("react-native").TextStyle;
-    };
-    readonly opacity: {
-        readonly disabled: 0.6;
-        readonly subtle: 0.8;
-        readonly medium: 0.5;
-        readonly light: 0.3;
-        readonly veryLight: 0.1;
-    };
-    readonly borders: {
-        readonly radius: {
-            readonly none: 0;
-            readonly xs: 2;
-            readonly sm: 4;
-            readonly md: 8;
-            readonly lg: 12;
-            readonly xl: 16;
-            readonly xxl: 24;
-            readonly full: 9999;
-        };
-        readonly width: {
-            readonly none: 0;
-            readonly thin: 1;
-            readonly medium: 2;
-            readonly thick: 4;
-        };
-        readonly button: {
-            readonly borderRadius: 8;
-            readonly borderWidth: 0;
-        };
-        readonly card: {
-            readonly borderRadius: 12;
-            readonly borderWidth: 1;
-        };
-        readonly input: {
-            readonly borderRadius: 8;
-            readonly borderWidth: 1;
-        };
-        readonly pill: {
-            readonly borderRadius: 9999;
-            readonly borderWidth: 0;
-        };
-    };
-    readonly sizes: {
-        readonly touchTarget: 44;
-        readonly touchTargetSmall: 36;
-        readonly touchTargetLarge: 56;
-        readonly buttonHeight: {
-            readonly sm: 40;
-            readonly md: 48;
-            readonly lg: 56;
-            readonly xl: 64;
-        };
-        readonly dot: {
-            readonly inactive: 8;
-            readonly active: 24;
-        };
-        readonly progressBar: {
-            readonly thin: 2;
-            readonly normal: 4;
-            readonly thick: 6;
-        };
-        readonly divider: 1;
-        readonly separator: 2;
-    };
-    readonly iconSizes: {
-        readonly xs: 12;
-        readonly sm: 16;
-        readonly md: 20;
-        readonly lg: 24;
-        readonly xl: 32;
-        readonly xxl: 40;
-    };
-    readonly avatarSizes: {
-        readonly xs: 24;
-        readonly sm: 32;
-        readonly md: 40;
-        readonly lg: 48;
-        readonly xl: 64;
-        readonly xxl: 80;
-    };
-};
-export { withAlpha };
-export type { ThemeMode, ColorPalette };
-//# sourceMappingURL=TokenFactory.d.ts.map

package/lib/presentation/tokens/core/TokenFactory.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"TokenFactory.d.ts","sourceRoot":"","sources":["../../../../src/presentation/tokens/core/TokenFactory.ts"],"names":[],"mappings":"AAAA;;;;;;;;;GASG;AAEH,OAAO,EAAE,WAAW,EAAE,MAAM,cAAc,CAAC;AAC3C,OAAO,EAAmB,SAAS,EAAE,KAAK,SAAS,EAAE,KAAK,YAAY,EAAE,MAAM,gBAAgB,CAAC;AAM/F;;;GAGG;AACH,MAAM,MAAM,YAAY,GAAG;IACzB,MAAM,EAAE,YAAY,CAAC;IACrB,OAAO,EAAE,OAAO,WAAW,CAAC,OAAO,CAAC;IACpC,UAAU,EAAE,OAAO,WAAW,CAAC,UAAU,CAAC;IAC1C,SAAS,EAAE,OAAO,WAAW,CAAC,SAAS,CAAC;IACxC,OAAO,EAAE,OAAO,WAAW,CAAC,OAAO,CAAC;IACpC,WAAW,EAAE,OAAO,WAAW,CAAC,WAAW,CAAC;IAC5C,OAAO,EAAE,OAAO,WAAW,CAAC,OAAO,GAAG;QACpC,IAAI,EAAE,OAAO,WAAW,CAAC,OAAO,CAAC,IAAI,GAAG;YAAE,WAAW,EAAE,MAAM,CAAA;SAAE,CAAC;QAChE,KAAK,EAAE,OAAO,WAAW,CAAC,OAAO,CAAC,KAAK,GAAG;YAAE,WAAW,EAAE,MAAM,CAAA;SAAE,CAAC;KACnE,CAAC;CACH,CAAC;AAMF;;;;;;;;;;;;;;;;GAgBG;AACH,eAAO,MAAM,kBAAkB,GAAI,MAAM,SAAS,KAAG,YA6BpD,CAAC;AAMF;;;;;;;;;;;;GAYG;AACH,eAAO,MAAM,oBAAoB,cAA8B,CAAC;AAEhE;;;GAGG;AACH,eAAO,MAAM,aAAa;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAAc,CAAC;AAMzC,OAAO,EAAE,SAAS,EAAE,CAAC;AACrB,YAAY,EAAE,SAAS,EAAE,YAAY,EAAE,CAAC"}

package/lib/presentation/tokens/core/TokenFactory.js

@@ -1,86 +0,0 @@
-/**
- * TOKEN FACTORY - THEME INJECTION LOGIC
- *
- * ✅ Factory Pattern for creating complete design tokens
- * ✅ Combines static tokens (BaseTokens) + dynamic colors (ColorPalette)
- * ✅ Type-safe token generation
- * ✅ Zero duplication - SINGLE SOURCE OF TRUTH
- *
- * @module TokenFactory
- */
-import { BASE_TOKENS } from './BaseTokens';
-import { getColorPalette, withAlpha } from './ColorPalette';
-// =============================================================================
-// TOKEN FACTORY FUNCTION
-// =============================================================================
-/**
- * Create complete design tokens for a specific theme mode
- *
- * @param mode - Theme mode ('light' or 'dark')
- * @returns Complete design tokens object
- *
- * @example
- * ```typescript
- * const lightTokens = createDesignTokens('light');
- * const darkTokens = createDesignTokens('dark');
- *
- * // Use in components
- * <View style={{ backgroundColor: lightTokens.colors.primary }}>
- *   <Text style={lightTokens.typography.bodyLarge}>Hello!</Text>
- * </View>
- * ```
- */
-export const createDesignTokens = (mode) => {
-    // Get color palette for theme mode
-    const colors = getColorPalette(mode);
-    // Combine static tokens + dynamic colors
-    return {
-        // ✅ DYNAMIC: Colors from theme mode
-        colors,
-        // ✅ STATIC: These don't change with theme
-        spacing: BASE_TOKENS.spacing,
-        typography: BASE_TOKENS.typography,
-        iconSizes: BASE_TOKENS.iconSizes,
-        opacity: BASE_TOKENS.opacity,
-        avatarSizes: BASE_TOKENS.avatarSizes,
-        // ✅ BORDERS: Static + injected border colors from theme
-        borders: {
-            ...BASE_TOKENS.borders,
-            card: {
-                ...BASE_TOKENS.borders.card,
-                borderColor: colors.border,
-            },
-            input: {
-                ...BASE_TOKENS.borders.input,
-                borderColor: colors.border,
-            },
-        },
-    };
-};
-// =============================================================================
-// STATIC TOKEN INSTANCES (for non-React contexts)
-// =============================================================================
-/**
- * STATIC DESIGN TOKENS - LIGHT THEME ONLY
- *
- * ⚠️ WARNING: These are STATIC and use light theme colors only!
- * ⚠️ DO NOT USE in React components - use useAppDesignTokens() hook instead
- *
- * Only use these in:
- * - Utility functions
- * - Constants files
- * - Non-React JavaScript code
- *
- * @deprecated Use useAppDesignTokens() hook in React components
- */
-export const STATIC_DESIGN_TOKENS = createDesignTokens('light');
-/**
- * STATIC TOKENS (spacing, typography, borders)
- * These DON'T change with theme - safe to use anywhere
- */
-export const STATIC_TOKENS = BASE_TOKENS;
-// =============================================================================
-// UTILITY EXPORTS
-// =============================================================================
-export { withAlpha };
-//# sourceMappingURL=TokenFactory.js.map

package/lib/presentation/tokens/core/TokenFactory.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"TokenFactory.js","sourceRoot":"","sources":["../../../../src/presentation/tokens/core/TokenFactory.ts"],"names":[],"mappings":"AAAA;;;;;;;;;GASG;AAEH,OAAO,EAAE,WAAW,EAAE,MAAM,cAAc,CAAC;AAC3C,OAAO,EAAE,eAAe,EAAE,SAAS,EAAqC,MAAM,gBAAgB,CAAC;AAuB/F,gFAAgF;AAChF,yBAAyB;AACzB,gFAAgF;AAEhF;;;;;;;;;;;;;;;;GAgBG;AACH,MAAM,CAAC,MAAM,kBAAkB,GAAG,CAAC,IAAe,EAAgB,EAAE;IAClE,mCAAmC;IACnC,MAAM,MAAM,GAAG,eAAe,CAAC,IAAI,CAAC,CAAC;IAErC,yCAAyC;IACzC,OAAO;QACL,oCAAoC;QACpC,MAAM;QAEN,0CAA0C;QAC1C,OAAO,EAAE,WAAW,CAAC,OAAO;QAC5B,UAAU,EAAE,WAAW,CAAC,UAAU;QAClC,SAAS,EAAE,WAAW,CAAC,SAAS;QAChC,OAAO,EAAE,WAAW,CAAC,OAAO;QAC5B,WAAW,EAAE,WAAW,CAAC,WAAW;QAEpC,wDAAwD;QACxD,OAAO,EAAE;YACP,GAAG,WAAW,CAAC,OAAO;YACtB,IAAI,EAAE;gBACJ,GAAG,WAAW,CAAC,OAAO,CAAC,IAAI;gBAC3B,WAAW,EAAE,MAAM,CAAC,MAAM;aAC3B;YACD,KAAK,EAAE;gBACL,GAAG,WAAW,CAAC,OAAO,CAAC,KAAK;gBAC5B,WAAW,EAAE,MAAM,CAAC,MAAM;aAC3B;SACF;KACF,CAAC;AACJ,CAAC,CAAC;AAEF,gFAAgF;AAChF,kDAAkD;AAClD,gFAAgF;AAEhF;;;;;;;;;;;;GAYG;AACH,MAAM,CAAC,MAAM,oBAAoB,GAAG,kBAAkB,CAAC,OAAO,CAAC,CAAC;AAEhE;;;GAGG;AACH,MAAM,CAAC,MAAM,aAAa,GAAG,WAAW,CAAC;AAEzC,gFAAgF;AAChF,kBAAkB;AAClB,gFAAgF;AAEhF,OAAO,EAAE,SAAS,EAAE,CAAC"}

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

@@ -1,93 +0,0 @@
-/**
- * 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

@@ -1,143 +0,0 @@
-/**
- * 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

@@ -1,147 +0,0 @@
-/**
- * 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 { ComponentType } from 'react';
-import type { ViewStyle } from 'react-native';
-import type { DesignTokens } from '../../../../presentation/tokens/core/TokenFactory';
-
-export type IconName = string;
-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) => ComponentType<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?: ViewStyle;
-}