@umituz/react-native-design-system 1.3.1 → 1.3.3

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

@@ -0,0 +1,229 @@
+/**
+ * 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, 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;
+        };
+    };
+};
+/**
+ * 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, animations, 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 animations: {
+        readonly fastest: 150;
+        readonly fast: 150;
+        readonly normal: 300;
+        readonly slow: 500;
+        readonly slower: 750;
+        readonly slowest: 1000;
+        readonly easeInOut: "ease-in-out";
+        readonly easeIn: "ease-in";
+        readonly easeOut: "ease-out";
+        readonly linear: "linear";
+    };
+    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

@@ -0,0 +1 @@
+{"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,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,YA8BpD,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

@@ -0,0 +1,87 @@
+/**
+ * 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,
+        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 };
+//# sourceMappingURL=TokenFactory.js.map

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

@@ -0,0 +1 @@
+{"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;AAwB/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,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/lib/presentation/utils/platformConstants.d.ts

@@ -0,0 +1,100 @@
+/**
+ * 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 declare 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
+     */
+    readonly MIN_TOUCH_TARGET: 44;
+    /**
+     * Recommended Minimum Touch Target Size
+     *
+     * For better accessibility and usability, Apple recommends 48pt x 48pt.
+     */
+    readonly RECOMMENDED_TOUCH_TARGET: 48;
+    /**
+     * Minimum Text Size
+     *
+     * Minimum font size for body text to ensure readability.
+     */
+    readonly MIN_TEXT_SIZE: 17;
+    /**
+     * Minimum Contrast Ratio
+     *
+     * WCAG AA compliance requires 4.5:1 for normal text.
+     */
+    readonly MIN_CONTRAST_RATIO: 4.5;
+};
+/**
+ * Android Material Design Guidelines Constants
+ *
+ * @see https://m3.material.io/foundations/layout/applying-layout/window-size-classes
+ */
+export declare const ANDROID_MATERIAL: {
+    /**
+     * Minimum Touch Target Size
+     *
+     * Material Design 3 recommends a minimum of 48dp x 48dp.
+     */
+    readonly MIN_TOUCH_TARGET: 48;
+    /**
+     * Minimum Text Size
+     *
+     * Minimum font size for body text.
+     */
+    readonly MIN_TEXT_SIZE: 14;
+};
+/**
+ * Universal Platform Constants
+ *
+ * These values work across both iOS and Android, taking the more restrictive requirement.
+ */
+export declare 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.
+     */
+    readonly MIN_TOUCH_TARGET: number;
+    /**
+     * Recommended Touch Target Size
+     *
+     * Uses the higher value between iOS and Android recommendations.
+     */
+    readonly RECOMMENDED_TOUCH_TARGET: 48;
+    /**
+     * Minimum Text Size
+     *
+     * Uses iOS requirement as it's larger.
+     */
+    readonly MIN_TEXT_SIZE: number;
+};
+/**
+ * Helper function to validate touch target size
+ *
+ * @param size - The size to validate (in pt/dp)
+ * @returns true if size meets platform requirements
+ */
+export declare const isValidTouchTarget: (size: number) => boolean;
+/**
+ * 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 declare const getMinTouchTarget: (componentType?: "button" | "input" | "icon" | "generic") => number;
+//# sourceMappingURL=platformConstants.d.ts.map

package/lib/presentation/utils/platformConstants.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"platformConstants.d.ts","sourceRoot":"","sources":["../../../src/presentation/utils/platformConstants.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AAEH;;;;GAIG;AACH,eAAO,MAAM,OAAO;IAClB;;;;;;;OAOG;;IAGH;;;;OAIG;;IAGH;;;;OAIG;;IAGH;;;;OAIG;;CAEK,CAAC;AAEX;;;;GAIG;AACH,eAAO,MAAM,gBAAgB;IAC3B;;;;OAIG;;IAGH;;;;OAIG;;CAEK,CAAC;AAEX;;;;GAIG;AACH,eAAO,MAAM,kBAAkB;IAC7B;;;;;OAKG;;IAGH;;;;OAIG;;IAGH;;;;OAIG;;CAEK,CAAC;AAEX;;;;;GAKG;AACH,eAAO,MAAM,kBAAkB,GAAI,MAAM,MAAM,KAAG,OAEjD,CAAC;AAEF;;;;;GAKG;AACH,eAAO,MAAM,iBAAiB,GAAI,gBAAe,QAAQ,GAAG,OAAO,GAAG,MAAM,GAAG,SAAqB,KAAG,MAYtG,CAAC"}

package/lib/presentation/utils/platformConstants.js

@@ -0,0 +1,114 @@
+/**
+ * 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,
+};
+/**
+ * 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,
+};
+/**
+ * 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),
+};
+/**
+ * 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) => {
+    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 = 'generic') => {
+    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
+    }
+};
+//# sourceMappingURL=platformConstants.js.map

package/lib/presentation/utils/platformConstants.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"platformConstants.js","sourceRoot":"","sources":["../../../src/presentation/utils/platformConstants.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AAEH;;;;GAIG;AACH,MAAM,CAAC,MAAM,OAAO,GAAG;IACrB;;;;;;;OAOG;IACH,gBAAgB,EAAE,EAAE;IAEpB;;;;OAIG;IACH,wBAAwB,EAAE,EAAE;IAE5B;;;;OAIG;IACH,aAAa,EAAE,EAAE;IAEjB;;;;OAIG;IACH,kBAAkB,EAAE,GAAG;CACf,CAAC;AAEX;;;;GAIG;AACH,MAAM,CAAC,MAAM,gBAAgB,GAAG;IAC9B;;;;OAIG;IACH,gBAAgB,EAAE,EAAE;IAEpB;;;;OAIG;IACH,aAAa,EAAE,EAAE;CACT,CAAC;AAEX;;;;GAIG;AACH,MAAM,CAAC,MAAM,kBAAkB,GAAG;IAChC;;;;;OAKG;IACH,gBAAgB,EAAE,IAAI,CAAC,GAAG,CAAC,OAAO,CAAC,gBAAgB,EAAE,gBAAgB,CAAC,gBAAgB,CAAC;IAEvF;;;;OAIG;IACH,wBAAwB,EAAE,EAAE;IAE5B;;;;OAIG;IACH,aAAa,EAAE,IAAI,CAAC,GAAG,CAAC,OAAO,CAAC,aAAa,EAAE,gBAAgB,CAAC,aAAa,CAAC;CACtE,CAAC;AAEX;;;;;GAKG;AACH,MAAM,CAAC,MAAM,kBAAkB,GAAG,CAAC,IAAY,EAAW,EAAE;IAC1D,OAAO,IAAI,IAAI,OAAO,CAAC,gBAAgB,CAAC;AAC1C,CAAC,CAAC;AAEF;;;;;GAKG;AACH,MAAM,CAAC,MAAM,iBAAiB,GAAG,CAAC,gBAAyD,SAAS,EAAU,EAAE;IAC9G,QAAQ,aAAa,EAAE,CAAC;QACtB,KAAK,QAAQ;YACX,OAAO,kBAAkB,CAAC,wBAAwB,CAAC,CAAC,+BAA+B;QACrF,KAAK,OAAO;YACV,OAAO,kBAAkB,CAAC,wBAAwB,CAAC,CAAC,8BAA8B;QACpF,KAAK,MAAM;YACT,OAAO,OAAO,CAAC,gBAAgB,CAAC,CAAC,gCAAgC;QACnE,KAAK,SAAS,CAAC;QACf;YACE,OAAO,OAAO,CAAC,gBAAgB,CAAC,CAAC,kDAAkD;IACvF,CAAC;AACH,CAAC,CAAC"}