@umituz/react-native-design-system 1.5.24 → 1.5.26

package/dist/presentation/organisms/FormContainer.d.ts

@@ -0,0 +1,75 @@
+/**
+ * FormContainer Component
+ *
+ * A reusable container for forms with proper keyboard handling and responsive layout.
+ *
+ * Features:
+ * - Pure React Native implementation (no Paper dependency)
+ * - Universal keyboard handling (no platform-specific code)
+ * - ScrollView with automatic content padding
+ * - Safe area insets for bottom tab navigation overlap
+ * - Responsive max width for large screens (tablets)
+ * - Consistent vertical spacing between form elements
+ * - Theme-aware surface colors
+ * - Optimized performance with memoized styles
+ *
+ * Usage:
+ * ```tsx
+ * <FormContainer>
+ *   <AtomicInput label="Name" value={name} onChangeText={setName} />
+ *   <AtomicTextArea label="Description" value={desc} onChangeText={setDesc} />
+ *   <AtomicButton variant="primary" onPress={handleSubmit}>
+ *     Submit
+ *   </AtomicButton>
+ * </FormContainer>
+ * ```
+ *
+ * Why This Component:
+ * - Prevents keyboard from covering input fields (universal solution)
+ * - Handles safe area (notch, bottom tabs) automatically
+ * - Consistent form layout across all 100+ generated apps
+ * - Responsive design for tablets (max 700px) and phones (full width)
+ * - Automatic vertical spacing between form elements (no manual marginBottom)
+ * - Reduces boilerplate in form screens
+ * - Universal code - no platform checks, works on iOS, Android, Web
+ *
+ * Technical Details:
+ * - Uses ScrollView with contentContainerStyle for keyboard handling
+ * - Pure React Native View for surface (lightweight)
+ * - Vertical spacing via Children.map() wrapping (universal compatibility)
+ * - Safe area insets from react-native-safe-area-context
+ * - Responsive values from useResponsive hook
+ *
+ * @module FormContainer
+ */
+import React from 'react';
+import { StyleProp, ViewStyle } from 'react-native';
+/**
+ * Props for FormContainer component
+ */
+export interface FormContainerProps {
+    /** Form content (inputs, buttons, etc.) */
+    children: React.ReactNode;
+    /** Container style override (for outer View) */
+    containerStyle?: StyleProp<ViewStyle>;
+    /** Content container style override (for ScrollView content) */
+    contentContainerStyle?: StyleProp<ViewStyle>;
+    /** Show vertical scroll indicator */
+    showsVerticalScrollIndicator?: boolean;
+    /** Optional test ID for E2E testing */
+    testID?: string;
+    /** Show surface border (default: true) */
+    showBorder?: boolean;
+}
+/**
+ * FormContainer - Universal form wrapper component
+ *
+ * Wraps forms with:
+ * - Pure React Native surface
+ * - Universal keyboard handling (no platform checks)
+ * - ScrollView for content overflow
+ * - Safe area insets (bottom tabs, notch)
+ * - Responsive max width (tablets)
+ * - Theme integration
+ */
+export declare const FormContainer: React.FC<FormContainerProps>;

package/dist/presentation/organisms/ScreenLayout.d.ts

@@ -0,0 +1,83 @@
+/**
+ * ScreenLayout - Universal Screen Container Component
+ *
+ * Provides consistent layout structure for all screens:
+ * - SafeAreaView with configurable edges
+ * - Optional ScrollView for content
+ * - Theme-aware background colors
+ * - Optional header/footer slots
+ * - Consistent spacing and padding
+ *
+ * Usage:
+ * <ScreenLayout>
+ *   <View>Your content here</View>
+ * </ScreenLayout>
+ *
+ * Advanced:
+ * <ScreenLayout
+ *   scrollable={false}
+ *   edges={['top', 'bottom']}
+ *   header={<CustomHeader />}
+ * >
+ *   <View>Content</View>
+ * </ScreenLayout>
+ */
+import React from 'react';
+import { ViewStyle } from 'react-native';
+import { Edge } from 'react-native-safe-area-context';
+export interface ScreenLayoutProps {
+    /**
+     * Content to render inside the layout
+     */
+    children: React.ReactNode;
+    /**
+     * Enable scrolling (default: true)
+     * Set to false for screens with custom scroll logic
+     */
+    scrollable?: boolean;
+    /**
+     * Safe area edges to apply (default: ['top'])
+     * Common values:
+     * - ['top'] - For screens with bottom tabs
+     * - ['top', 'bottom'] - For modal screens
+     * - [] - No safe area (use cautiously)
+     */
+    edges?: Edge[];
+    /**
+     * Optional header component
+     * Rendered above scrollable content
+     */
+    header?: React.ReactNode;
+    /**
+     * Optional footer component
+     * Rendered below scrollable content
+     */
+    footer?: React.ReactNode;
+    /**
+     * Override background color
+     * If not provided, uses theme's backgroundPrimary
+     */
+    backgroundColor?: string;
+    /**
+     * Custom container style
+     */
+    containerStyle?: ViewStyle;
+    /**
+     * Custom content container style (for ScrollView)
+     */
+    contentContainerStyle?: ViewStyle;
+    /**
+     * Test ID for automation
+     */
+    testID?: string;
+    /**
+     * Hide vertical scroll indicator (default: false)
+     */
+    hideScrollIndicator?: boolean;
+    /**
+     * Enable keyboard avoiding behavior (default: false)
+     * Useful for screens with inputs
+     */
+    keyboardAvoiding?: boolean;
+}
+export declare const ScreenLayout: React.FC<ScreenLayoutProps>;

package/dist/presentation/tokens/commonStyles.d.ts

@@ -0,0 +1,121 @@
+/**
+ * Common Styles - Reusable Style Patterns
+ *
+ * Centralized style utilities to reduce duplication across screens.
+ * These styles are composable and follow DRY principles.
+ *
+ * Usage:
+ * ```typescript
+ * import { useCommonStyles } from '@domains/design-system/commonStyles';
+ *
+ * const MyComponent = () => {
+ *   const commonStyles = useCommonStyles();
+ *   return <View style={commonStyles.screenContainer}>...</View>;
+ * };
+ * ```
+ */
+import { ViewStyle, TextStyle } from 'react-native';
+/**
+ * Hook to get common styles with dynamic theme support
+ */
+export declare const useCommonStyles: () => {
+    /**
+     * Standard full-screen container
+     * Most common pattern: flex: 1 with background color
+     */
+    screenContainer: ViewStyle;
+    /**
+     * Basic flex container without background
+     * Use when background is set elsewhere or not needed
+     */
+    flexContainer: ViewStyle;
+    /**
+     * Screen container with secondary background
+     */
+    screenContainerSecondary: ViewStyle;
+    /**
+     * Standard ScrollView wrapper
+     */
+    scrollView: ViewStyle;
+    /**
+     * ScrollView content container with standard padding
+     */
+    scrollContent: ViewStyle;
+    /**
+     * ScrollView content that grows to fill available space
+     */
+    scrollContentGrow: ViewStyle;
+    /**
+     * Centered scroll content (for forms, onboarding screens)
+     */
+    scrollContentCentered: ViewStyle;
+    /**
+     * Centered container - both horizontal and vertical
+     * Perfect for empty states, splash screens
+     */
+    centerContainer: ViewStyle;
+    /**
+     * Centered container with padding
+     */
+    centerContainerPadded: ViewStyle;
+    /**
+     * Horizontal row layout
+     */
+    row: ViewStyle;
+    /**
+     * Horizontal row with space between
+     */
+    rowBetween: ViewStyle;
+    /**
+     * Horizontal row centered
+     */
+    rowCenter: ViewStyle;
+    /**
+     * Standard horizontal padding
+     */
+    paddedHorizontal: ViewStyle;
+    /**
+     * Standard vertical padding
+     */
+    paddedVertical: ViewStyle;
+    /**
+     * Standard padding all sides
+     */
+    padded: ViewStyle;
+    /**
+     * Standard section container
+     */
+    section: ViewStyle;
+    /**
+     * Section with padding
+     */
+    sectionPadded: ViewStyle;
+    /**
+     * Screen title - primary heading
+     */
+    screenTitle: TextStyle;
+    /**
+     * Section title
+     */
+    sectionTitle: TextStyle;
+    /**
+     * Subtitle/description text
+     */
+    subtitle: TextStyle;
+    /**
+     * Body text
+     */
+    bodyText: TextStyle;
+    /**
+     * Secondary text (muted)
+     */
+    secondaryText: TextStyle;
+    /**
+     * Form container
+     */
+    form: ViewStyle;
+    /**
+     * Form header section
+     */
+    formHeader: ViewStyle;
+};

package/dist/presentation/utils/platformConstants.d.ts

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

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

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

package/package.json

@@ -1,12 +1,12 @@
 {
   "name": "@umituz/react-native-design-system",
-  "version": "1.5.24",
+  "version": "1.5.26",
   "description": "Universal design system for React Native apps - Domain-Driven Design architecture with Material Design 3 components",
   "main": "./src/index.ts",
-  "types": "./src/index.ts",
+  "types": "./dist/index.d.ts",
   "exports": {
     ".": {
-      "types": "./src/index.ts",
+      "types": "./dist/index.d.ts",
       "import": "./src/index.ts",
       "require": "./src/index.ts",
       "default": "./src/index.ts"
@@ -78,6 +78,7 @@
   },
   "files": [
     "src",
+    "dist",
     "README.md",
     "LICENSE"
   ],