@umituz/react-native-design-system 2.3.3 → 2.3.6

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@umituz/react-native-design-system",
-  "version": "2.3.3",
+  "version": "2.3.6",
   "description": "Universal design system for React Native apps - Consolidated package with atoms, molecules, organisms, theme, typography, responsive and safe area utilities",
   "main": "./src/index.ts",
   "types": "./src/index.ts",
@@ -117,4 +117,4 @@
     "README.md",
     "LICENSE"
   ]
-}
+}

package/src/atoms/AtomicInput.tsx

@@ -60,6 +60,10 @@ export interface AtomicInputProps {
   onBlur?: () => void;
   /** Focus callback */
   onFocus?: () => void;
+  /** Multiline input support */
+  multiline?: boolean;
+  /** Number of lines for multiline input */
+  numberOfLines?: number;
 }
 
 /**
@@ -99,6 +103,8 @@ export const AtomicInput: React.FC<AtomicInputProps> = ({
   testID,
   onBlur,
   onFocus,
+  multiline = false,
+  numberOfLines,
 }) => {
   const tokens = useAppDesignTokens();
 
@@ -202,6 +208,8 @@ export const AtomicInput: React.FC<AtomicInputProps> = ({
           autoCapitalize={autoCapitalize}
           autoCorrect={autoCorrect}
           editable={!isDisabled}
+          multiline={multiline}
+          numberOfLines={numberOfLines}
           style={textInputStyle}
           onBlur={() => {
             setIsFocused(false);

package/src/index.ts

@@ -90,9 +90,6 @@ export {
 
 export {
   useResponsive,
-  getScreenDimensions,
-  isSmallPhone,
-  isTablet,
   getResponsiveLogoSize,
   getResponsiveInputHeight,
   getResponsiveHorizontalPadding,
@@ -112,20 +109,71 @@ export {
   getResponsiveGridColumns,
   getResponsiveMaxWidth,
   getResponsiveFontSize,
-  isLandscape,
-  getDeviceType,
   getMinTouchTarget,
-  getSpacingMultiplier,
   IOS_HIG,
   PLATFORM_CONSTANTS,
   isValidTouchTarget,
-  DeviceType,
+  DEVICE_BREAKPOINTS,
   type ResponsiveModalLayout,
   type ResponsiveBottomSheetLayout,
   type ResponsiveDialogLayout,
   type UseResponsiveReturn,
 } from './responsive';
 
+// =============================================================================
+// DEVICE EXPORTS
+// =============================================================================
+
+export {
+  // Device detection
+  DeviceType,
+  getScreenDimensions,
+  isSmallPhone,
+  isTablet,
+  isLandscape,
+  getDeviceType,
+  getSpacingMultiplier,
+  // iPad detection
+  isIPad,
+  isIPadMini,
+  isIPadPro,
+  isIPadLandscape,
+  IPAD_BREAKPOINTS,
+  TOUCH_TARGETS,
+  CONTENT_WIDTH_CONSTRAINTS,
+  IPAD_LAYOUT_CONFIG,
+  // iPad utilities
+  getContentMaxWidth,
+  getIPadGridColumns,
+  getTouchTargetSize,
+  getIPadScreenPadding,
+  getIPadFontScale,
+  getIPadLayoutInfo,
+  getIPadModalDimensions,
+  getPaywallDimensions,
+  type IPadLayoutInfo,
+  type ModalDimensions,
+  type PaywallDimensions,
+  // Device info
+  DEVICE_CONSTANTS,
+  DeviceUtils,
+  DeviceTypeUtils,
+  DeviceMemoryUtils,
+  DeviceService,
+  UserFriendlyIdService,
+  PersistentDeviceIdService,
+  useDeviceInfo,
+  useDeviceCapabilities,
+  useDeviceId,
+  useAnonymousUser,
+  getAnonymousUserId,
+  type DeviceInfo,
+  type ApplicationInfo,
+  type SystemInfo,
+  type AnonymousUser,
+  type UseAnonymousUserOptions,
+} from './device';
+
 // =============================================================================
 // ATOMS EXPORTS
 // =============================================================================

package/src/organisms/ScreenLayout.tsx

@@ -24,10 +24,13 @@
  */
 
 import React, { useMemo } from 'react';
-import { View, ScrollView, StyleSheet, type ViewStyle } from 'react-native';
-import { SafeAreaView } from 'react-native-safe-area-context';
+import { View, ScrollView, StyleSheet, type ViewStyle, RefreshControlProps } from 'react-native';
+import { SafeAreaView, useSafeAreaInsets } from 'react-native-safe-area-context';
 import type { Edge } from 'react-native-safe-area-context';
 import { useAppDesignTokens } from '../theme';
+import { useResponsive } from '../responsive/useResponsive';
+import { getResponsiveMaxWidth } from '../responsive/responsiveSizing';
+import { getResponsiveHorizontalPadding } from '../responsive/responsiveLayout';
 
 /**
  * NOTE: This component now works in conjunction with the SafeAreaProvider
@@ -124,6 +127,20 @@ export interface ScreenLayoutProps {
    */
   accessible?: boolean;
 
+  /**
+   * Enable responsive content width and centering (default: true)
+   */
+  responsiveEnabled?: boolean;
+
+  /**
+   * Maximum content width override
+   */
+  maxWidth?: number;
+
+  /**
+   * RefreshControl component for pull-to-refresh
+   */
+  refreshControl?: React.ReactElement<RefreshControlProps>;
 }
 
 export const ScreenLayout: React.FC<ScreenLayoutProps> = ({
@@ -138,25 +155,41 @@ export const ScreenLayout: React.FC<ScreenLayoutProps> = ({
   testID,
   hideScrollIndicator = false,
   keyboardAvoiding = false,
+  responsiveEnabled = true,
+  maxWidth,
+  refreshControl,
 }) => {
   // Automatically uses current theme from global store
   const tokens = useAppDesignTokens();
+  const { isTabletDevice } = useResponsive();
+  const insets = useSafeAreaInsets();
+
+  const finalMaxWidth = maxWidth || (responsiveEnabled ? getResponsiveMaxWidth() : undefined);
+  const horizontalPadding = responsiveEnabled ? getResponsiveHorizontalPadding(tokens.spacing.md, insets) : tokens.spacing.md;
+
   const styles = useMemo(() => StyleSheet.create({
     container: {
       flex: 1,
     },
+    responsiveWrapper: {
+      flex: 1,
+      width: '100%',
+      maxWidth: finalMaxWidth,
+      alignSelf: 'center',
+    },
     content: {
       flex: 1,
+      paddingHorizontal: horizontalPadding,
     },
     scrollView: {
       flex: 1,
     },
     scrollContent: {
       flexGrow: 1,
-      paddingHorizontal: tokens.spacing.md,
+      paddingHorizontal: horizontalPadding,
       paddingBottom: tokens.spacing.lg,
     },
-  }), [tokens]);
+  }), [tokens, finalMaxWidth, horizontalPadding]);
 
   const bgColor = backgroundColor || tokens.colors.backgroundPrimary;
 
@@ -168,11 +201,13 @@ export const ScreenLayout: React.FC<ScreenLayoutProps> = ({
         edges={edges}
         testID={testID}
       >
-        {header}
-        <View style={[styles.content, contentContainerStyle]}>
-          {children}
+        <View style={styles.responsiveWrapper}>
+          {header}
+          <View style={[styles.content, contentContainerStyle]}>
+            {children}
+          </View>
+          {footer}
         </View>
-        {footer}
       </SafeAreaView>
     );
   }
@@ -184,16 +219,19 @@ export const ScreenLayout: React.FC<ScreenLayoutProps> = ({
       edges={edges}
       testID={testID}
     >
-      {header}
-      <ScrollView
-        style={styles.scrollView}
-        contentContainerStyle={[styles.scrollContent, contentContainerStyle]}
-        showsVerticalScrollIndicator={!hideScrollIndicator}
-        keyboardShouldPersistTaps={keyboardAvoiding ? 'handled' : 'never'}
-      >
-        {children}
-      </ScrollView>
-      {footer}
+      <View style={styles.responsiveWrapper}>
+        {header}
+        <ScrollView
+          style={styles.scrollView}
+          contentContainerStyle={[styles.scrollContent, contentContainerStyle]}
+          showsVerticalScrollIndicator={!hideScrollIndicator}
+          keyboardShouldPersistTaps={keyboardAvoiding ? 'handled' : 'never'}
+          refreshControl={refreshControl}
+        >
+          {children}
+        </ScrollView>
+        {footer}
+      </View>
     </SafeAreaView>
   );
 };

package/src/responsive/index.ts

@@ -38,36 +38,6 @@ export {
   MODAL_CONFIG,
 } from './responsive';
 
-// Re-export from device for backward compatibility
-export {
-  DeviceType,
-  getScreenDimensions,
-  isSmallPhone,
-  isTablet,
-  isLandscape,
-  getDeviceType,
-  getSpacingMultiplier,
-  isIPad,
-  isIPadMini,
-  isIPadPro,
-  isIPadLandscape,
-  IPAD_BREAKPOINTS,
-  TOUCH_TARGETS,
-  CONTENT_WIDTH_CONSTRAINTS,
-  IPAD_LAYOUT_CONFIG,
-  getContentMaxWidth,
-  getIPadGridColumns,
-  getTouchTargetSize,
-  getIPadScreenPadding,
-  getIPadFontScale,
-  getIPadLayoutInfo,
-  type IPadLayoutInfo,
-  getIPadModalDimensions,
-  getPaywallDimensions,
-  type ModalDimensions,
-  type PaywallDimensions,
-} from '../device/detection';
-
 // Platform constants
 export {
   IOS_HIG,

package/src/responsive/responsive.ts

@@ -1,22 +1,9 @@
 /**
  * Responsive Design Utilities
  *
- * Centralized responsive sizing and spacing utilities to prevent
- * Apple App Store rejection due to layout issues on different devices.
- *
- * This is the main export file that imports from specialized modules.
+ * Centralized responsive sizing and spacing utilities.
  */
 
-// Device detection (re-exported from device module)
-export {
-  getScreenDimensions,
-  isSmallPhone,
-  isTablet,
-  isLandscape,
-  getDeviceType,
-  DeviceType,
-} from '../device/detection';
-
 // Responsive sizing
 export {
   getResponsiveLogoSize,
@@ -53,14 +40,6 @@ export {
   type ResponsiveDialogLayout,
 } from './responsiveModal';
 
-// Platform constants
-export {
-  IOS_HIG,
-  PLATFORM_CONSTANTS,
-  isValidTouchTarget,
-  getMinTouchTarget,
-} from './platformConstants';
-
 // Configuration
 export {
   DEVICE_BREAKPOINTS,
@@ -72,6 +51,3 @@ export {
   VALIDATION_CONSTRAINTS,
   MODAL_CONFIG,
 } from './config';
-
-
-

package/src/responsive/useResponsive.ts

@@ -28,17 +28,19 @@ import {
   getResponsiveGridColumns,
   getResponsiveMaxWidth,
   getResponsiveFontSize,
+  type ResponsiveModalLayout,
+  type ResponsiveBottomSheetLayout,
+  type ResponsiveDialogLayout,
+} from './responsive';
+import {
   isSmallPhone,
   isTablet,
   isLandscape,
   getDeviceType,
-  getMinTouchTarget,
   DeviceType,
-  type ResponsiveModalLayout,
-  type ResponsiveBottomSheetLayout,
-  type ResponsiveDialogLayout,
-} from './responsive';
-import { getSpacingMultiplier } from '../device/detection';
+  getSpacingMultiplier,
+} from '../device/detection';
+import { getMinTouchTarget } from './platformConstants';
 
 export interface UseResponsiveReturn {
   // Device info