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

package/lib/presentation/utils/responsive.d.ts

@@ -0,0 +1,218 @@
+/**
+ * Responsive Design Utilities
+ *
+ * Centralized responsive sizing and spacing utilities to prevent
+ * Apple App Store rejection due to layout issues on different devices.
+ *
+ * Supports:
+ * - iPhone 13 mini (5.4" - smallest)
+ * - iPhone 13/14/15 (6.1" - standard)
+ * - iPhone 14 Pro Max (6.7" - largest phone)
+ * - iPad Air (10.9" - tablet)
+ */
+/**
+ * Get current screen dimensions
+ */
+export declare const getScreenDimensions: () => {
+    width: number;
+    height: number;
+};
+/**
+ * Check if current device is a small phone (iPhone 13 mini, SE)
+ */
+export declare const isSmallPhone: () => boolean;
+/**
+ * Check if current device is a tablet (iPad)
+ */
+export declare const isTablet: () => boolean;
+/**
+ * Responsive logo/icon size
+ * Small devices: 100-120px
+ * Medium devices: 120-160px
+ * Tablets: 160-200px
+ */
+export declare const getResponsiveLogoSize: (baseSize?: number) => number;
+/**
+ * Responsive multiline input height
+ * Prevents keyboard overlap on small devices
+ *
+ * Small devices: 100-120px
+ * Medium devices: 120-150px
+ * Tablets: 150-200px
+ */
+export declare const getResponsiveInputHeight: (baseHeight?: number) => number;
+/**
+ * Responsive horizontal padding
+ * Accounts for safe area on notched devices and iPad
+ */
+export declare const getResponsiveHorizontalPadding: (basePadding?: number, insets?: {
+    left: number;
+    right: number;
+}) => number;
+/**
+ * Responsive bottom positioning
+ * Accounts for home indicator and safe area
+ */
+export declare const getResponsiveBottomPosition: (basePosition?: number, insets?: {
+    bottom: number;
+}) => number;
+/**
+ * Responsive FAB (Floating Action Button) position
+ * CRITICAL: Ensures FAB appears above tab bar (70-90px tall) and safe areas
+ *
+ * Tab bar heights:
+ * - iOS: ~80-90px (including safe area)
+ * - Android: ~70px
+ *
+ * FAB positioning:
+ * - Tablets: 100px from bottom (generous spacing)
+ * - Phones: 90px from bottom (above tab bar)
+ * - Safe area aware (home indicator clearance)
+ */
+export declare const getResponsiveFABPosition: (insets?: {
+    bottom: number;
+    right: number;
+}) => {
+    bottom: number;
+    right: number;
+};
+/**
+ * Responsive modal max height
+ * Prevents modals from taking too much space on tablets
+ * or too little on small devices
+ */
+export declare const getResponsiveModalMaxHeight: () => string;
+/**
+ * Responsive modal min height
+ * Ensures modals are always usable and not too small
+ * Complements getResponsiveModalMaxHeight for complete modal sizing
+ */
+export declare const getResponsiveMinModalHeight: () => number;
+/**
+ * Responsive icon container size
+ * Used in onboarding, cards, etc.
+ */
+export declare const getResponsiveIconContainerSize: (baseSize?: number) => number;
+/**
+ * Responsive grid columns
+ * Returns number of columns for grid layouts
+ */
+export declare const getResponsiveGridColumns: (mobileColumns?: number, tabletColumns?: number) => number;
+/**
+ * Responsive max width for content
+ * Prevents text from stretching too wide on tablets
+ */
+export declare const getResponsiveMaxWidth: (baseWidth?: number) => number;
+/**
+ * Responsive font size
+ * Scales text for different devices while respecting minimum sizes
+ */
+export declare const getResponsiveFontSize: (baseFontSize: number) => number;
+/**
+ * Check if device is in landscape mode
+ */
+export declare const isLandscape: () => boolean;
+/**
+ * Get universal keyboard behavior
+ * Returns 'padding' which works across all platforms (iOS, Android, Web)
+ */
+export declare const getKeyboardBehavior: () => "padding" | "height" | "position" | undefined;
+/**
+ * Device type enum for conditional rendering
+ */
+export declare enum DeviceType {
+    SMALL_PHONE = "SMALL_PHONE",
+    MEDIUM_PHONE = "MEDIUM_PHONE",
+    LARGE_PHONE = "LARGE_PHONE",
+    TABLET = "TABLET"
+}
+/**
+ * Get current device type
+ */
+export declare const getDeviceType: () => DeviceType;
+/**
+ * Apple HIG compliant touch target size
+ */
+export declare const getMinTouchTargetSize: () => number;
+/**
+ * Responsive spacing multiplier
+ * Returns a multiplier for spacing based on device size
+ */
+export declare const getSpacingMultiplier: () => number;
+/**
+ * Onboarding icon container top margin
+ * Small phones: 24px (lg), Others: 40px (xxl)
+ */
+export declare const getOnboardingIconMarginTop: () => number;
+/**
+ * Onboarding icon container bottom margin
+ * Tablets: 60px (xxl * 1.5 for extra breathing room), Others: 40px (xxl)
+ */
+export declare const getOnboardingIconMarginBottom: () => number;
+/**
+ * Onboarding title bottom margin
+ * Tablets: 24px (lg), Others: 16px (md)
+ */
+export declare const getOnboardingTitleMarginBottom: () => number;
+/**
+ * Onboarding text horizontal padding (title and description)
+ * Small phones: 8px (sm for tighter fit), Others: 16px (md)
+ */
+export declare const getOnboardingTextPadding: () => number;
+/**
+ * Onboarding description top margin
+ * Small phones: 4px (xs), Others: 8px (sm)
+ */
+export declare const getOnboardingDescriptionMarginTop: () => number;
+/**
+ * Onboarding icon size (for icon inside container)
+ * Calculated as ~55% of icon container size for proper visual balance
+ * Small phones: ~66px (55% of 120px), Standard: ~77px (55% of 140px), Tablets: ~99px (55% of 180px)
+ */
+export declare const getOnboardingIconSize: () => number;
+/**
+ * Keyboard vertical offset for KeyboardAvoidingView
+ * Accounts for header/navigation bar height
+ * Universal value that works across all platforms
+ */
+export declare const getKeyboardVerticalOffset: () => number;
+/**
+ * Form container bottom padding
+ * Prevents overlap with bottom tab navigation and ensures submit buttons are accessible
+ *
+ * Formula: safeAreaBottom + tabBarHeight + extraSpace
+ * - Tab bar height: ~56px (iOS/Android standard)
+ * - Extra space: ~24px (breathing room for submit button)
+ * - Safe area: Variable (home indicator on iPhone)
+ * - Minimum: 100px (ensures buttons always accessible)
+ */
+export declare const getFormBottomPadding: (safeAreaBottom: number) => number;
+/**
+ * Input field icon size
+ * Used for leading/trailing icons and password toggle
+ * Apple HIG: Minimum 22px for touch targets
+ */
+export declare const getInputIconSize: () => number;
+/**
+ * Form content container width
+ * Forms need more generous width than regular content to prevent cramped layouts
+ *
+ * Strategy:
+ * - Phones: undefined (no max width restriction, fills available space)
+ * - Tablets: Max 700px (readable but not restrictive)
+ *
+ * Different from getResponsiveMaxWidth which is for text content (max 400px)
+ *
+ * @returns number for tablets (700px max), undefined for phones (no restriction)
+ */
+export declare const getFormContentWidth: () => number | undefined;
+/**
+ * Form element spacing (vertical)
+ * Vertical spacing between form elements (inputs, buttons, etc.)
+ * Used with Children.map() wrapper pattern for universal compatibility
+ * Replaces CSS gap property (old RN version compatibility)
+ *
+ * Universal pattern - works on iOS, Android, Web
+ */
+export declare const getFormElementSpacing: () => number;
+//# sourceMappingURL=responsive.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"responsive.d.ts","sourceRoot":"","sources":["../../../src/presentation/utils/responsive.ts"],"names":[],"mappings":"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"}

package/lib/presentation/utils/responsive.js

@@ -0,0 +1,452 @@
+/**
+ * Responsive Design Utilities
+ *
+ * Centralized responsive sizing and spacing utilities to prevent
+ * Apple App Store rejection due to layout issues on different devices.
+ *
+ * Supports:
+ * - iPhone 13 mini (5.4" - smallest)
+ * - iPhone 13/14/15 (6.1" - standard)
+ * - iPhone 14 Pro Max (6.7" - largest phone)
+ * - iPad Air (10.9" - tablet)
+ */
+import { Dimensions } from 'react-native';
+// Device breakpoints
+const BREAKPOINTS = {
+    SMALL_PHONE: 375, // iPhone 13 mini and smaller
+    MEDIUM_PHONE: 414, // iPhone 13/14/15
+    LARGE_PHONE: 428, // iPhone 14 Pro Max
+    SMALL_TABLET: 768, // iPad mini
+    TABLET: 1024, // iPad Air
+};
+// Safe minimum sizes (Apple HIG recommendations)
+const MIN_TOUCH_TARGET = 44;
+const MIN_TEXT_SIZE = 11;
+const MIN_ICON_SIZE = 22;
+// Spacing scale (matches design token scales)
+// Used for centralized responsive calculations - components should NEVER calculate spacing
+const SPACING_SCALE = {
+    xs: 4,
+    sm: 8,
+    md: 16,
+    lg: 24,
+    xl: 32,
+    xxl: 40,
+};
+/**
+ * Get current screen dimensions
+ */
+export const getScreenDimensions = () => {
+    const { width, height } = Dimensions.get('window');
+    return { width, height };
+};
+/**
+ * Check if current device is a small phone (iPhone 13 mini, SE)
+ */
+export const isSmallPhone = () => {
+    const { width } = getScreenDimensions();
+    return width <= BREAKPOINTS.SMALL_PHONE;
+};
+/**
+ * Check if current device is a tablet (iPad)
+ */
+export const isTablet = () => {
+    const { width } = getScreenDimensions();
+    return width >= BREAKPOINTS.SMALL_TABLET;
+};
+/**
+ * Responsive logo/icon size
+ * Small devices: 100-120px
+ * Medium devices: 120-160px
+ * Tablets: 160-200px
+ */
+export const getResponsiveLogoSize = (baseSize = 140) => {
+    const { width } = getScreenDimensions();
+    if (width <= BREAKPOINTS.SMALL_PHONE) {
+        // iPhone 13 mini: 28% of width, max 120px
+        return Math.min(Math.max(width * 0.28, 100), 120);
+    }
+    else if (width >= BREAKPOINTS.TABLET) {
+        // iPad: 15% of width, max 200px
+        return Math.min(Math.max(width * 0.15, 140), 200);
+    }
+    // Standard phones: use base size
+    return baseSize;
+};
+/**
+ * Responsive multiline input height
+ * Prevents keyboard overlap on small devices
+ *
+ * Small devices: 100-120px
+ * Medium devices: 120-150px
+ * Tablets: 150-200px
+ */
+export const getResponsiveInputHeight = (baseHeight = 200) => {
+    const { height } = getScreenDimensions();
+    if (height <= 667) {
+        // iPhone SE, iPhone 8: 15% of height, max 120px
+        return Math.min(height * 0.15, 120);
+    }
+    else if (height <= 844) {
+        // iPhone 13 mini, iPhone 13: 18% of height, max 150px
+        return Math.min(height * 0.18, 150);
+    }
+    // Larger devices: use base height capped at 200px
+    return Math.min(baseHeight, 200);
+};
+/**
+ * Responsive horizontal padding
+ * Accounts for safe area on notched devices and iPad
+ */
+export const getResponsiveHorizontalPadding = (basePadding = 16, insets = { left: 0, right: 0 }) => {
+    const { width } = getScreenDimensions();
+    // iPad: larger padding
+    if (width >= BREAKPOINTS.TABLET) {
+        return Math.max(basePadding * 1.5, insets.left + 16, insets.right + 16);
+    }
+    // Phones: account for safe area
+    return Math.max(basePadding, insets.left + 8, insets.right + 8);
+};
+/**
+ * Responsive bottom positioning
+ * Accounts for home indicator and safe area
+ */
+export const getResponsiveBottomPosition = (basePosition = 32, insets = { bottom: 0 }) => {
+    return Math.max(basePosition, insets.bottom + 16);
+};
+/**
+ * Responsive FAB (Floating Action Button) position
+ * CRITICAL: Ensures FAB appears above tab bar (70-90px tall) and safe areas
+ *
+ * Tab bar heights:
+ * - iOS: ~80-90px (including safe area)
+ * - Android: ~70px
+ *
+ * FAB positioning:
+ * - Tablets: 100px from bottom (generous spacing)
+ * - Phones: 90px from bottom (above tab bar)
+ * - Safe area aware (home indicator clearance)
+ */
+export const getResponsiveFABPosition = (insets = { bottom: 0, right: 0 }) => {
+    const { width } = getScreenDimensions();
+    // Tab bar offset: FAB must be above tab bar
+    const TAB_BAR_OFFSET = 90; // Tab bar height + spacing
+    // iPad: larger margins, higher position
+    if (width >= BREAKPOINTS.TABLET) {
+        return {
+            bottom: Math.max(100, insets.bottom + TAB_BAR_OFFSET),
+            right: Math.max(24, insets.right + 16),
+        };
+    }
+    // Phones: standard position above tab bar, respect safe area
+    return {
+        bottom: Math.max(TAB_BAR_OFFSET, insets.bottom + TAB_BAR_OFFSET),
+        right: Math.max(20, insets.right + 8),
+    };
+};
+/**
+ * Responsive modal max height
+ * Prevents modals from taking too much space on tablets
+ * or too little on small devices
+ */
+export const getResponsiveModalMaxHeight = () => {
+    const { height } = getScreenDimensions();
+    if (height <= 667) {
+        // Small devices: 75% of height
+        return '75%';
+    }
+    else if (height >= 1024) {
+        // Tablets: 60% of height
+        return '60%';
+    }
+    // Standard: 70%
+    return '70%';
+};
+/**
+ * Responsive modal min height
+ * Ensures modals are always usable and not too small
+ * Complements getResponsiveModalMaxHeight for complete modal sizing
+ */
+export const getResponsiveMinModalHeight = () => {
+    const { height } = getScreenDimensions();
+    if (height <= 667) {
+        // iPhone SE, 8: 40% of height, min 250px
+        return Math.max(height * 0.4, 250);
+    }
+    else if (height >= 1024) {
+        // iPad: 35% of height, min 350px, max 500px (capped for usability)
+        return Math.min(Math.max(height * 0.35, 350), 500);
+    }
+    // Standard: 45% of height, min 300px
+    return Math.max(height * 0.45, 300);
+};
+/**
+ * Responsive icon container size
+ * Used in onboarding, cards, etc.
+ */
+export const getResponsiveIconContainerSize = (baseSize = 140) => {
+    const { width } = getScreenDimensions();
+    if (width <= BREAKPOINTS.SMALL_PHONE) {
+        // Small phones: 30% of width, capped at 120px
+        return Math.min(width * 0.30, 120);
+    }
+    else if (width >= BREAKPOINTS.TABLET) {
+        // Tablets: 20% of width, capped at 180px
+        return Math.min(width * 0.20, 180);
+    }
+    return baseSize;
+};
+/**
+ * Responsive grid columns
+ * Returns number of columns for grid layouts
+ */
+export const getResponsiveGridColumns = (mobileColumns = 2, tabletColumns = 4) => {
+    const { width } = getScreenDimensions();
+    return width >= BREAKPOINTS.TABLET ? tabletColumns : mobileColumns;
+};
+/**
+ * Responsive max width for content
+ * Prevents text from stretching too wide on tablets
+ */
+export const getResponsiveMaxWidth = (baseWidth = 400) => {
+    const { width } = getScreenDimensions();
+    if (width <= BREAKPOINTS.SMALL_PHONE) {
+        // Small phones: 90% of width
+        return width * 0.9;
+    }
+    else if (width >= BREAKPOINTS.TABLET) {
+        // Tablets: 60% of width, max 600px
+        return Math.min(width * 0.6, 600);
+    }
+    // Standard phones: use base width
+    return Math.min(width * 0.85, baseWidth);
+};
+/**
+ * Responsive font size
+ * Scales text for different devices while respecting minimum sizes
+ */
+export const getResponsiveFontSize = (baseFontSize) => {
+    const { width } = getScreenDimensions();
+    if (width <= BREAKPOINTS.SMALL_PHONE) {
+        // Small phones: slightly smaller text
+        return Math.max(baseFontSize * 0.9, MIN_TEXT_SIZE);
+    }
+    else if (width >= BREAKPOINTS.TABLET) {
+        // Tablets: slightly larger text
+        return baseFontSize * 1.1;
+    }
+    return baseFontSize;
+};
+/**
+ * Check if device is in landscape mode
+ */
+export const isLandscape = () => {
+    const { width, height } = getScreenDimensions();
+    return width > height;
+};
+/**
+ * Get universal keyboard behavior
+ * Returns 'padding' which works across all platforms (iOS, Android, Web)
+ */
+export const getKeyboardBehavior = () => {
+    return 'padding';
+};
+/**
+ * Device type enum for conditional rendering
+ */
+export var DeviceType;
+(function (DeviceType) {
+    DeviceType["SMALL_PHONE"] = "SMALL_PHONE";
+    DeviceType["MEDIUM_PHONE"] = "MEDIUM_PHONE";
+    DeviceType["LARGE_PHONE"] = "LARGE_PHONE";
+    DeviceType["TABLET"] = "TABLET";
+})(DeviceType || (DeviceType = {}));
+/**
+ * Get current device type
+ */
+export const getDeviceType = () => {
+    const { width } = getScreenDimensions();
+    if (width <= BREAKPOINTS.SMALL_PHONE) {
+        return DeviceType.SMALL_PHONE;
+    }
+    else if (width <= BREAKPOINTS.MEDIUM_PHONE) {
+        return DeviceType.MEDIUM_PHONE;
+    }
+    else if (width <= BREAKPOINTS.LARGE_PHONE) {
+        return DeviceType.LARGE_PHONE;
+    }
+    return DeviceType.TABLET;
+};
+/**
+ * Apple HIG compliant touch target size
+ */
+export const getMinTouchTargetSize = () => MIN_TOUCH_TARGET;
+/**
+ * Responsive spacing multiplier
+ * Returns a multiplier for spacing based on device size
+ */
+export const getSpacingMultiplier = () => {
+    const { width } = getScreenDimensions();
+    if (width <= BREAKPOINTS.SMALL_PHONE) {
+        return 0.9; // Slightly tighter spacing on small devices
+    }
+    else if (width >= BREAKPOINTS.TABLET) {
+        return 1.2; // More generous spacing on tablets
+    }
+    return 1.0; // Standard spacing
+};
+// =============================================================================
+// ONBOARDING SPACING - CENTRALIZED CALCULATIONS
+// =============================================================================
+// ⚠️ CRITICAL: ALL onboarding spacing calculations MUST be here.
+// Components should NEVER calculate spacing - they consume pre-calculated values
+// from useResponsive() hook.
+//
+// This prevents Apple rejection due to layout issues on different devices.
+// Pattern: Small phones get tighter spacing, tablets get generous spacing.
+// =============================================================================
+/**
+ * Onboarding icon container top margin
+ * Small phones: 24px (lg), Others: 40px (xxl)
+ */
+export const getOnboardingIconMarginTop = () => {
+    return isSmallPhone() ? SPACING_SCALE.lg : SPACING_SCALE.xxl;
+};
+/**
+ * Onboarding icon container bottom margin
+ * Tablets: 60px (xxl * 1.5 for extra breathing room), Others: 40px (xxl)
+ */
+export const getOnboardingIconMarginBottom = () => {
+    return isTablet() ? SPACING_SCALE.xxl * 1.5 : SPACING_SCALE.xxl;
+};
+/**
+ * Onboarding title bottom margin
+ * Tablets: 24px (lg), Others: 16px (md)
+ */
+export const getOnboardingTitleMarginBottom = () => {
+    return isTablet() ? SPACING_SCALE.lg : SPACING_SCALE.md;
+};
+/**
+ * Onboarding text horizontal padding (title and description)
+ * Small phones: 8px (sm for tighter fit), Others: 16px (md)
+ */
+export const getOnboardingTextPadding = () => {
+    return isSmallPhone() ? SPACING_SCALE.sm : SPACING_SCALE.md;
+};
+/**
+ * Onboarding description top margin
+ * Small phones: 4px (xs), Others: 8px (sm)
+ */
+export const getOnboardingDescriptionMarginTop = () => {
+    return isSmallPhone() ? SPACING_SCALE.xs : SPACING_SCALE.sm;
+};
+/**
+ * Onboarding icon size (for icon inside container)
+ * Calculated as ~55% of icon container size for proper visual balance
+ * Small phones: ~66px (55% of 120px), Standard: ~77px (55% of 140px), Tablets: ~99px (55% of 180px)
+ */
+export const getOnboardingIconSize = () => {
+    const containerSize = getResponsiveIconContainerSize();
+    // Icon should be 55% of container for optimal visual balance
+    return Math.round(containerSize * 0.55);
+};
+// =============================================================================
+// FORM COMPONENT SPACING - CENTRALIZED CALCULATIONS
+// =============================================================================
+// ⚠️ CRITICAL: ALL form-related spacing/sizing calculations MUST be here.
+// Components (FormContainer, AtomicInput, AtomicTextArea) should NEVER
+// calculate dimensions - they consume pre-calculated values from useResponsive().
+//
+// Pattern: Universal values that work across iOS, Android, Web.
+// No platform-specific code - write universal patterns only.
+// =============================================================================
+/**
+ * Keyboard vertical offset for KeyboardAvoidingView
+ * Accounts for header/navigation bar height
+ * Universal value that works across all platforms
+ */
+export const getKeyboardVerticalOffset = () => {
+    // 90px accounts for:
+    // - Navigation header: ~56-60px (standard across platforms)
+    // - Safe area top: ~30-44px (notch on iPhone)
+    // Total: ~90px ensures keyboard doesn't cover inputs
+    return 90;
+};
+/**
+ * Form container bottom padding
+ * Prevents overlap with bottom tab navigation and ensures submit buttons are accessible
+ *
+ * Formula: safeAreaBottom + tabBarHeight + extraSpace
+ * - Tab bar height: ~56px (iOS/Android standard)
+ * - Extra space: ~24px (breathing room for submit button)
+ * - Safe area: Variable (home indicator on iPhone)
+ * - Minimum: 100px (ensures buttons always accessible)
+ */
+export const getFormBottomPadding = (safeAreaBottom) => {
+    const TAB_BAR_HEIGHT = 56;
+    const EXTRA_SPACE = 24;
+    const calculatedPadding = safeAreaBottom + TAB_BAR_HEIGHT + EXTRA_SPACE;
+    // Ensure minimum 100px for accessibility
+    return Math.max(calculatedPadding, 100);
+};
+/**
+ * Input field icon size
+ * Used for leading/trailing icons and password toggle
+ * Apple HIG: Minimum 22px for touch targets
+ */
+export const getInputIconSize = () => {
+    const { width } = getScreenDimensions();
+    if (width <= BREAKPOINTS.SMALL_PHONE) {
+        // Small phones: 18px (slightly smaller for space)
+        return 18;
+    }
+    else if (width >= BREAKPOINTS.TABLET) {
+        // Tablets: 24px (larger for readability)
+        return 24;
+    }
+    // Standard: 20px (matches Material Design)
+    return 20;
+};
+/**
+ * Form content container width
+ * Forms need more generous width than regular content to prevent cramped layouts
+ *
+ * Strategy:
+ * - Phones: undefined (no max width restriction, fills available space)
+ * - Tablets: Max 700px (readable but not restrictive)
+ *
+ * Different from getResponsiveMaxWidth which is for text content (max 400px)
+ *
+ * @returns number for tablets (700px max), undefined for phones (no restriction)
+ */
+export const getFormContentWidth = () => {
+    const { width } = getScreenDimensions();
+    if (width >= BREAKPOINTS.TABLET) {
+        // Tablets: 70% of width, max 700px (generous for forms)
+        return Math.min(width * 0.7, 700);
+    }
+    // Phones: No max width restriction (undefined allows full width)
+    return undefined;
+};
+/**
+ * Form element spacing (vertical)
+ * Vertical spacing between form elements (inputs, buttons, etc.)
+ * Used with Children.map() wrapper pattern for universal compatibility
+ * Replaces CSS gap property (old RN version compatibility)
+ *
+ * Universal pattern - works on iOS, Android, Web
+ */
+export const getFormElementSpacing = () => {
+    const { width } = getScreenDimensions();
+    if (width <= BREAKPOINTS.SMALL_PHONE) {
+        // Small phones: 16px (adequate for space efficiency)
+        return 16;
+    }
+    else if (width >= BREAKPOINTS.TABLET) {
+        // Tablets: 24px (generous spacing for larger screens)
+        return 24;
+    }
+    // Standard: 20px (comfortable vertical rhythm)
+    return 20;
+};
+//# sourceMappingURL=responsive.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"responsive.js","sourceRoot":"","sources":["../../../src/presentation/utils/responsive.ts"],"names":[],"mappings":"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"}