@umituz/react-native-design-system 1.0.0

package/src/presentation/tokens/core/ColorPalette.ts

@@ -0,0 +1,398 @@
+/**
+ * COLOR PALETTE - THEME-SPECIFIC COLORS
+ *
+ * ✅ Light and Dark theme color definitions
+ * ✅ Semantic color naming for clarity
+ * ✅ Template placeholders for factory generation
+ * ✅ Type-safe color definitions
+ *
+ * @module ColorPalette
+ */
+
+// =============================================================================
+// COLOR UTILITIES
+// =============================================================================
+
+/**
+ * Add alpha transparency to hex color
+ * @param hexColor - Hex color string (#RRGGBB or #RGB)
+ * @param alpha - Alpha value 0-1
+ * @returns Hex color with alpha (#RRGGBBAA)
+ */
+export const withAlpha = (hexColor: string, alpha: number): string => {
+  if (!hexColor.startsWith('#') || (hexColor.length !== 7 && hexColor.length !== 4)) {
+    return hexColor;
+  }
+
+  if (alpha < 0 || alpha > 1) {
+    return hexColor;
+  }
+
+  const alphaHex = Math.round(alpha * 255)
+    .toString(16)
+    .padStart(2, '0');
+
+  return hexColor + alphaHex;
+};
+
+// =============================================================================
+// LIGHT THEME COLORS
+// =============================================================================
+
+export const lightColors = {
+  // =============================================================================
+  // PRIMARY BRAND COLORS (from theme template)
+  // =============================================================================
+  primary: '{{PRIMARY_COLOR}}',
+  primaryLight: '{{PRIMARY_LIGHT_COLOR}}',
+  primaryDark: '{{PRIMARY_DARK_COLOR}}',
+
+  secondary: '{{SECONDARY_COLOR}}',
+  secondaryLight: '{{SECONDARY_LIGHT_COLOR}}',
+  secondaryDark: '{{SECONDARY_DARK_COLOR}}',
+
+  accent: '{{ACCENT_COLOR}}',
+  accentLight: '{{ACCENT_LIGHT_COLOR}}',
+  accentDark: '{{ACCENT_DARK_COLOR}}',
+
+  // =============================================================================
+  // MATERIAL DESIGN 3 - ON COLORS (Text on colored backgrounds)
+  // =============================================================================
+  onPrimary: '#FFFFFF',           // Text on primary background
+  onSecondary: '#FFFFFF',         // Text on secondary background
+  onSuccess: '#FFFFFF',           // Text on success background
+  onError: '#FFFFFF',             // Text on error background
+  onWarning: '#000000',           // Text on warning background
+  onInfo: '#FFFFFF',              // Text on info background
+  onSurface: '#1E293B',           // Text on surface
+  onBackground: '#1E293B',        // Text on background
+  onSurfaceDisabled: '#CBD5E1',   // Disabled text color
+
+  // =============================================================================
+  // MATERIAL DESIGN 3 - CONTAINER COLORS (Lighter versions for containers)
+  // =============================================================================
+  primaryContainer: '#DBEAFE',    // Light container using primary
+  onPrimaryContainer: '#1E40AF',  // Text on primary container
+  secondaryContainer: '#E0E7FF',  // Light container using secondary
+  onSecondaryContainer: '#3730A3', // Text on secondary container
+  errorContainer: '#FEE2E2',      // Light container using error
+  onErrorContainer: '#991B1B',    // Text on error container
+
+  // =============================================================================
+  // MATERIAL DESIGN 3 - OUTLINE
+  // =============================================================================
+  outline: '#CBD5E1',             // Default outline color
+  outlineVariant: '#E2E8F0',      // Lighter outline variant
+  outlineDisabled: '#E2E8F0',     // Disabled outline color
+
+  // =============================================================================
+  // SEMANTIC UI COLORS
+  // =============================================================================
+  success: '#10B981',
+  successLight: '#34D399',
+  successDark: '#059669',
+
+  error: '#EF4444',
+  errorLight: '#F87171',
+  errorDark: '#DC2626',
+
+  warning: '#F59E0B',
+  warningLight: '#FBBF24',
+  warningDark: '#D97706',
+
+  info: '#3B82F6',
+  infoLight: '#60A5FA',
+  infoDark: '#2563EB',
+
+  // =============================================================================
+  // SEMANTIC CONTAINER COLORS (Light mode)
+  // =============================================================================
+  successContainer: '#D1FAE5',        // Light container for success states
+  onSuccessContainer: '#065F46',      // Text on success container
+  warningContainer: '#FEF3C7',        // Light container for warning states
+  onWarningContainer: '#92400E',      // Text on warning container
+  infoContainer: '#DBEAFE',           // Light container for info states
+  onInfoContainer: '#1E40AF',         // Text on info container
+
+  // =============================================================================
+  // GRAYSCALE PALETTE
+  // =============================================================================
+  gray50: '#FAFAFA',
+  gray100: '#F4F4F5',
+  gray200: '#E4E4E7',
+  gray300: '#D4D4D8',
+  gray400: '#A1A1AA',
+  gray500: '#71717A',
+  gray600: '#52525B',
+  gray700: '#3F3F46',
+  gray800: '#27272A',
+  gray900: '#18181B',
+
+  // =============================================================================
+  // BACKGROUND COLORS (from theme template)
+  // =============================================================================
+  backgroundPrimary: '{{BACKGROUND_COLOR}}',
+  backgroundSecondary: '{{BACKGROUND_SECONDARY_COLOR}}',
+
+  surface: '{{SURFACE_COLOR}}',
+  surfaceVariant: '{{SURFACE_SECONDARY_COLOR}}',
+  surfaceSecondary: '{{SURFACE_SECONDARY_COLOR}}', // Alias
+  surfaceDisabled: '#F4F4F5',     // Disabled surface color
+
+  // =============================================================================
+  // TEXT COLORS (from theme template)
+  // =============================================================================
+  textPrimary: '{{TEXT_PRIMARY_COLOR}}',
+  textSecondary: '{{TEXT_SECONDARY_COLOR}}',
+  textTertiary: '{{TEXT_TERTIARY_COLOR}}',
+  textDisabled: '{{TEXT_DISABLED_COLOR}}',
+  textInverse: '{{TEXT_INVERSE_COLOR}}',
+
+  // =============================================================================
+  // BORDER COLORS (from theme template)
+  // =============================================================================
+  border: '{{BORDER_COLOR}}',
+  borderLight: '{{BORDER_LIGHT_COLOR}}',
+  borderMedium: '{{BORDER_MEDIUM_COLOR}}',
+  borderFocus: '{{BORDER_FOCUS_COLOR}}',
+
+  // =============================================================================
+  // COMPONENT-SPECIFIC COLORS
+  // =============================================================================
+  buttonPrimary: '{{PRIMARY_COLOR}}',
+  buttonSecondary: '{{SECONDARY_COLOR}}',
+
+  inputBackground: '{{SURFACE_COLOR}}',
+  inputBorder: '{{BORDER_COLOR}}',
+
+  cardBackground: '{{SURFACE_COLOR}}',
+
+  // =============================================================================
+  // SPECIAL COLORS
+  // =============================================================================
+  transparent: 'transparent',
+  black: '#000000',
+  white: '#FFFFFF',
+
+  // =============================================================================
+  // RGBA OVERLAY COLORS (for modals, cards, etc.)
+  // =============================================================================
+  modalOverlay: 'rgba(0, 0, 0, 0.5)',
+  overlaySubtle: 'rgba(0, 0, 0, 0.05)',
+  overlayLight: 'rgba(0, 0, 0, 0.1)',
+  overlayMedium: 'rgba(0, 0, 0, 0.3)',
+  overlayBackground: 'rgba(0, 0, 0, 0.05)',
+
+  whiteOverlay: 'rgba(255, 255, 255, 0.2)',
+  whiteOverlayStrong: 'rgba(255, 255, 255, 0.95)',
+  whiteOverlayBorder: 'rgba(255, 255, 255, 0.5)',
+
+  textWhiteOpacity: 'rgba(255, 255, 255, 0.8)',
+
+  errorBackground: 'rgba(239, 68, 68, 0.1)',
+  primaryBackground: 'rgba(99, 102, 241, 0.1)',
+
+  cardOverlay: 'rgba(0, 0, 0, 0.15)',
+
+  inputBackground_RGBA: 'rgba(248, 250, 252, 0.9)',
+
+  // =============================================================================
+  // SHADOW COLORS - REMOVED (React Native Web incompatibility)
+  // NOTE: Use borders and background colors for depth instead
+  // =============================================================================
+
+  // =============================================================================
+  // GRADIENTS
+  // =============================================================================
+  gradient: ['{{PRIMARY_COLOR}}', '{{SECONDARY_COLOR}}'],
+};
+
+// =============================================================================
+// DARK THEME COLORS
+// =============================================================================
+
+export const darkColors = {
+  // =============================================================================
+  // PRIMARY BRAND COLORS (dark mode specific colors)
+  // =============================================================================
+  primary: '{{PRIMARY_COLOR}}',
+  primaryLight: '{{PRIMARY_LIGHT_COLOR}}',
+  primaryDark: '{{PRIMARY_DARK_COLOR}}',
+
+  secondary: '{{SECONDARY_COLOR}}',
+  secondaryLight: '{{SECONDARY_LIGHT_COLOR}}',
+  secondaryDark: '{{SECONDARY_DARK_COLOR}}',
+
+  accent: '{{ACCENT_COLOR}}',
+  accentLight: '{{ACCENT_LIGHT_COLOR}}',
+  accentDark: '{{ACCENT_DARK_COLOR}}',
+
+  // =============================================================================
+  // MATERIAL DESIGN 3 - ON COLORS (Same as light mode for type consistency)
+  // =============================================================================
+  onPrimary: '#FFFFFF',           // Text on primary background (consistent)
+  onSecondary: '#FFFFFF',         // Text on secondary background (consistent)
+  onSuccess: '#FFFFFF',           // Text on success background
+  onError: '#FFFFFF',             // Text on error background
+  onWarning: '#000000',           // Text on warning background
+  onInfo: '#FFFFFF',              // Text on info background
+  onSurface: '#1E293B',           // Text on surface (same as light mode for type consistency)
+  onBackground: '#1E293B',        // Text on background (same as light mode for type consistency)
+  onSurfaceDisabled: '#CBD5E1',   // Disabled text color (same as light mode for type consistency)
+
+  // =============================================================================
+  // MATERIAL DESIGN 3 - CONTAINER COLORS (Same as light mode for type consistency)
+  // =============================================================================
+  primaryContainer: '#DBEAFE',    // Same as light mode for type consistency
+  onPrimaryContainer: '#1E40AF',  // Same as light mode for type consistency
+  secondaryContainer: '#E0E7FF',  // Same as light mode for type consistency
+  onSecondaryContainer: '#3730A3', // Same as light mode for type consistency
+  errorContainer: '#FEE2E2',      // Same as light mode for type consistency
+  onErrorContainer: '#991B1B',    // Same as light mode for type consistency
+
+  // =============================================================================
+  // MATERIAL DESIGN 3 - OUTLINE (Same as light mode for type consistency)
+  // =============================================================================
+  outline: '#CBD5E1',             // Same as light mode for type consistency
+  outlineVariant: '#E2E8F0',      // Same as light mode for type consistency
+  outlineDisabled: '#E2E8F0',     // Same as light mode for type consistency
+
+  // =============================================================================
+  // SEMANTIC UI COLORS (same as light)
+  // =============================================================================
+  success: '#10B981',
+  successLight: '#34D399',
+  successDark: '#059669',
+
+  error: '#EF4444',
+  errorLight: '#F87171',
+  errorDark: '#DC2626',
+
+  warning: '#F59E0B',
+  warningLight: '#FBBF24',
+  warningDark: '#D97706',
+
+  info: '#3B82F6',
+  infoLight: '#60A5FA',
+  infoDark: '#2563EB',
+
+  // =============================================================================
+  // SEMANTIC CONTAINER COLORS (Same as light mode for type consistency)
+  // =============================================================================
+  successContainer: '#D1FAE5',        // Same as light mode for type consistency
+  onSuccessContainer: '#065F46',      // Same as light mode for type consistency
+  warningContainer: '#FEF3C7',        // Same as light mode for type consistency
+  onWarningContainer: '#92400E',      // Same as light mode for type consistency
+  infoContainer: '#DBEAFE',           // Same as light mode for type consistency
+  onInfoContainer: '#1E40AF',         // Same as light mode for type consistency
+
+  // =============================================================================
+  // GRAYSCALE PALETTE (Same as light mode for type consistency)
+  // =============================================================================
+  gray50: '#FAFAFA',
+  gray100: '#F4F4F5',
+  gray200: '#E4E4E7',
+  gray300: '#D4D4D8',
+  gray400: '#A1A1AA',
+  gray500: '#71717A',
+  gray600: '#52525B',
+  gray700: '#3F3F46',
+  gray800: '#27272A',
+  gray900: '#18181B',
+
+  // =============================================================================
+  // BACKGROUND COLORS (dark mode specific colors)
+  // =============================================================================
+  backgroundPrimary: '{{BACKGROUND_COLOR}}',
+  backgroundSecondary: '{{BACKGROUND_SECONDARY_COLOR}}',
+
+  surface: '{{SURFACE_COLOR}}',
+  surfaceVariant: '{{SURFACE_SECONDARY_COLOR}}',
+  surfaceSecondary: '{{SURFACE_SECONDARY_COLOR}}', // Alias
+  surfaceDisabled: '#F4F4F5',     // Same as light mode for type consistency
+
+  // =============================================================================
+  // TEXT COLORS (same as light mode for type consistency)
+  // =============================================================================
+  textPrimary: '{{TEXT_PRIMARY_COLOR}}',
+  textSecondary: '{{TEXT_SECONDARY_COLOR}}',
+  textTertiary: '{{TEXT_TERTIARY_COLOR}}',
+  textDisabled: '{{TEXT_DISABLED_COLOR}}',
+  textInverse: '{{TEXT_INVERSE_COLOR}}',
+
+  // =============================================================================
+  // BORDER COLORS (same as light mode for type consistency)
+  // =============================================================================
+  border: '{{BORDER_COLOR}}',
+  borderLight: '{{BORDER_LIGHT_COLOR}}',
+  borderMedium: '{{BORDER_MEDIUM_COLOR}}',
+  borderFocus: '{{BORDER_FOCUS_COLOR}}',
+
+  // =============================================================================
+  // COMPONENT-SPECIFIC COLORS (same as light mode for type consistency)
+  // =============================================================================
+  buttonPrimary: '{{PRIMARY_COLOR}}',
+  buttonSecondary: '{{SECONDARY_COLOR}}',
+
+  inputBackground: '{{SURFACE_COLOR}}',
+  inputBorder: '{{BORDER_COLOR}}',
+
+  cardBackground: '{{SURFACE_COLOR}}',
+
+  // =============================================================================
+  // SPECIAL COLORS
+  // =============================================================================
+  transparent: 'transparent',
+  black: '#000000',
+  white: '#FFFFFF',
+
+  // =============================================================================
+  // RGBA OVERLAY COLORS (Same as light mode for type consistency)
+  // =============================================================================
+  modalOverlay: 'rgba(0, 0, 0, 0.5)',
+  overlaySubtle: 'rgba(0, 0, 0, 0.05)',
+  overlayLight: 'rgba(0, 0, 0, 0.1)',
+  overlayMedium: 'rgba(0, 0, 0, 0.3)',
+  overlayBackground: 'rgba(0, 0, 0, 0.05)',
+
+  whiteOverlay: 'rgba(255, 255, 255, 0.2)',
+  whiteOverlayStrong: 'rgba(255, 255, 255, 0.95)',
+  whiteOverlayBorder: 'rgba(255, 255, 255, 0.5)',
+
+  textWhiteOpacity: 'rgba(255, 255, 255, 0.8)',
+
+  errorBackground: 'rgba(239, 68, 68, 0.1)',
+  primaryBackground: 'rgba(99, 102, 241, 0.1)',
+
+  cardOverlay: 'rgba(0, 0, 0, 0.15)',
+
+  inputBackground_RGBA: 'rgba(248, 250, 252, 0.9)',
+
+  // =============================================================================
+  // SHADOW COLORS (Same as light mode for type consistency)
+  // =============================================================================
+  // SHADOW COLORS - REMOVED (React Native Web incompatibility)
+  // NOTE: Use borders and background colors for depth instead
+  // =============================================================================
+
+  // =============================================================================
+  // GRADIENTS (Same as light mode for type consistency)
+  // =============================================================================
+  gradient: ['{{PRIMARY_COLOR}}', '{{SECONDARY_COLOR}}'],
+};
+
+// =============================================================================
+// TYPE EXPORTS
+// =============================================================================
+
+export type ColorPalette = typeof lightColors;
+export type ThemeMode = 'light' | 'dark';
+
+/**
+ * Get color palette for specific theme mode
+ * @param mode - 'light' or 'dark'
+ * @returns Color palette object
+ */
+export const getColorPalette = (mode: ThemeMode): ColorPalette => {
+  return mode === 'dark' ? darkColors : lightColors;
+};

package/src/presentation/tokens/core/TokenFactory.ts

@@ -0,0 +1,120 @@
+/**
+ * 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, type ThemeMode, type ColorPalette } from './ColorPalette';
+
+// =============================================================================
+// DESIGN TOKENS TYPE
+// =============================================================================
+
+/**
+ * Complete design tokens shape
+ * Combines static tokens (spacing, typography, animations, borders) + dynamic colors
+ */
+export type DesignTokens = {
+  colors: ColorPalette;
+  spacing: typeof BASE_TOKENS.spacing;
+  typography: typeof BASE_TOKENS.typography;
+  animations: typeof BASE_TOKENS.animations;
+  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 };
+  };
+};
+
+// =============================================================================
+// 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: ThemeMode): DesignTokens => {
+  // 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,
+    animations: BASE_TOKENS.animations,
+    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, animations, borders)
+ * These DON'T change with theme - safe to use anywhere
+ */
+export const STATIC_TOKENS = BASE_TOKENS;
+
+// =============================================================================
+// UTILITY EXPORTS
+// =============================================================================
+
+export { withAlpha };
+export type { ThemeMode, ColorPalette };

package/src/presentation/utils/platformConstants.ts

@@ -0,0 +1,124 @@
+/**
+ * Platform-Specific Constants
+ *
+ * Design system constants that ensure compliance with platform guidelines.
+ * These values are based on official Human Interface Guidelines (HIG) from Apple and Material Design from Google.
+ */
+
+/**
+ * iOS Human Interface Guidelines (HIG) Constants
+ *
+ * @see https://developer.apple.com/design/human-interface-guidelines/layout
+ */
+export const IOS_HIG = {
+  /**
+   * Minimum Touch Target Size
+   *
+   * Apple requires a minimum tappable area of 44pt x 44pt for ALL interactive controls.
+   * This is enforced during App Store review.
+   *
+   * @critical Violating this can result in App Store rejection
+   */
+  MIN_TOUCH_TARGET: 44,
+
+  /**
+   * Recommended Minimum Touch Target Size
+   *
+   * For better accessibility and usability, Apple recommends 48pt x 48pt.
+   */
+  RECOMMENDED_TOUCH_TARGET: 48,
+
+  /**
+   * Minimum Text Size
+   *
+   * Minimum font size for body text to ensure readability.
+   */
+  MIN_TEXT_SIZE: 17,
+
+  /**
+   * Minimum Contrast Ratio
+   *
+   * WCAG AA compliance requires 4.5:1 for normal text.
+   */
+  MIN_CONTRAST_RATIO: 4.5,
+} as const;
+
+/**
+ * Android Material Design Guidelines Constants
+ *
+ * @see https://m3.material.io/foundations/layout/applying-layout/window-size-classes
+ */
+export const ANDROID_MATERIAL = {
+  /**
+   * Minimum Touch Target Size
+   *
+   * Material Design 3 recommends a minimum of 48dp x 48dp.
+   */
+  MIN_TOUCH_TARGET: 48,
+
+  /**
+   * Minimum Text Size
+   *
+   * Minimum font size for body text.
+   */
+  MIN_TEXT_SIZE: 14,
+} as const;
+
+/**
+ * Universal Platform Constants
+ *
+ * These values work across both iOS and Android, taking the more restrictive requirement.
+ */
+export const PLATFORM_CONSTANTS = {
+  /**
+   * Minimum Touch Target Size
+   *
+   * Uses iOS requirement (44pt) as it's more restrictive than Android (48dp).
+   * This ensures compliance on both platforms.
+   */
+  MIN_TOUCH_TARGET: Math.max(IOS_HIG.MIN_TOUCH_TARGET, ANDROID_MATERIAL.MIN_TOUCH_TARGET),
+
+  /**
+   * Recommended Touch Target Size
+   *
+   * Uses the higher value between iOS and Android recommendations.
+   */
+  RECOMMENDED_TOUCH_TARGET: 48,
+
+  /**
+   * Minimum Text Size
+   *
+   * Uses iOS requirement as it's larger.
+   */
+  MIN_TEXT_SIZE: Math.max(IOS_HIG.MIN_TEXT_SIZE, ANDROID_MATERIAL.MIN_TEXT_SIZE),
+} as const;
+
+/**
+ * Helper function to validate touch target size
+ *
+ * @param size - The size to validate (in pt/dp)
+ * @returns true if size meets platform requirements
+ */
+export const isValidTouchTarget = (size: number): boolean => {
+  return size >= IOS_HIG.MIN_TOUCH_TARGET;
+};
+
+/**
+ * Helper function to get minimum touch target for component
+ *
+ * @param componentType - The type of component ('button' | 'input' | 'icon' | 'generic')
+ * @returns The minimum touch target size for that component type
+ */
+export const getMinTouchTarget = (componentType: 'button' | 'input' | 'icon' | 'generic' = 'generic'): number => {
+  switch (componentType) {
+    case 'button':
+      return PLATFORM_CONSTANTS.RECOMMENDED_TOUCH_TARGET; // 48pt recommended for buttons
+    case 'input':
+      return PLATFORM_CONSTANTS.RECOMMENDED_TOUCH_TARGET; // 48pt recommended for inputs
+    case 'icon':
+      return IOS_HIG.MIN_TOUCH_TARGET; // 44pt minimum for icon buttons
+    case 'generic':
+    default:
+      return IOS_HIG.MIN_TOUCH_TARGET; // 44pt minimum for all other interactive elements
+  }
+};