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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@umituz/react-native-design-system",
-  "version": "2.3.1",
+  "version": "2.3.3",
   "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",
@@ -18,6 +18,7 @@
     "./typography": "./src/typography/index.ts",
     "./responsive": "./src/responsive/index.ts",
     "./safe-area": "./src/safe-area/index.ts",
+    "./device": "./src/device/index.ts",
     "./package.json": "./package.json"
   },
   "scripts": {
@@ -60,7 +61,9 @@
     "react-native-reanimated": ">=3.16.0",
     "react-native-safe-area-context": ">=5.0.0",
     "react-native-svg": ">=15.0.0",
-    "zustand": ">=5.0.0"
+    "zustand": ">=5.0.0",
+    "expo-device": ">=5.0.0",
+    "expo-application": ">=5.0.0"
   },
   "peerDependenciesMeta": {
     "expo-linear-gradient": {
@@ -71,6 +74,12 @@
     },
     "@gorhom/bottom-sheet": {
       "optional": true
+    },
+    "expo-device": {
+      "optional": true
+    },
+    "expo-application": {
+      "optional": true
     }
   },
   "devDependencies": {
@@ -95,7 +104,10 @@
     "react-native-safe-area-context": "^5.6.0",
     "react-native-svg": "15.12.1",
     "typescript": "~5.9.2",
-    "zustand": "^5.0.2"
+    "zustand": "^5.0.2",
+    "expo-device": "~7.0.2",
+    "expo-application": "~5.9.1",
+    "expo-localization": "~16.0.1"
   },
   "publishConfig": {
     "access": "public"

package/src/atoms/AtomicInput.tsx

@@ -107,7 +107,6 @@ export const AtomicInput: React.FC<AtomicInputProps> = ({
     isFocused,
     isPasswordVisible,
     characterCount,
-    isAtMaxLength: _isAtMaxLength,
     setIsFocused,
     handleTextChange,
     togglePasswordVisibility,

package/src/atoms/AtomicPicker.tsx

@@ -80,7 +80,6 @@ export const AtomicPicker: React.FC<AtomicPickerProps> = ({
   searchable = false,
   clearable = false,
   autoClose = true,
-  color: _color = 'primary',
   size = 'md',
   modalTitle,
   emptyMessage = 'No options available',

package/src/atoms/picker/components/PickerChips.tsx

@@ -26,7 +26,6 @@ interface PickerChipsProps {
 export const PickerChips: React.FC<PickerChipsProps> = React.memo(({
   selectedOptions,
   onRemoveChip,
-  testID: _testID,
 }) => {
   const tokens = useAppDesignTokens();
 

package/src/atoms/picker/components/PickerModal.tsx

@@ -59,7 +59,6 @@ interface PickerModalProps {
 export const PickerModal: React.FC<PickerModalProps> = React.memo(({
   visible,
   onClose,
-  options: _options,
   selectedValues,
   onSelect,
   title,
@@ -67,7 +66,6 @@ export const PickerModal: React.FC<PickerModalProps> = React.memo(({
   searchQuery,
   onSearchChange,
   filteredOptions,
-  multiple: _multiple = false,
   emptyMessage = 'No options available',
   searchPlaceholder = 'Search...',
   closeAccessibilityLabel = 'Close picker',
@@ -76,7 +74,7 @@ export const PickerModal: React.FC<PickerModalProps> = React.memo(({
   const tokens = useAppDesignTokens();
   const insets = useSafeAreaInsets();
 
-  const modalOverlayStyles = getModalOverlayStyles(tokens);
+  const modalOverlayStyles = getModalOverlayStyles();
   const modalContainerStyles = getModalContainerStyles(tokens, 0);
   const modalHeaderStyles = getModalHeaderStyles(tokens);
   const modalTitleStyles = getModalTitleStyles(tokens);

package/src/atoms/picker/styles/pickerStyles.ts

@@ -110,7 +110,7 @@ export const getPickerErrorStyles = (tokens: DesignTokens): TextStyle => ({
 });
 
 // Modal styles
-export const getModalOverlayStyles = (_tokens: DesignTokens): ViewStyle => ({
+export const getModalOverlayStyles = (): ViewStyle => ({
     flex: 1,
     backgroundColor: 'rgba(0, 0, 0, 0.5)',
     justifyContent: 'flex-end',

package/src/{responsive → device/detection}/deviceDetection.ts

@@ -6,8 +6,8 @@
  */
 
 import { Dimensions } from 'react-native';
-import { DEVICE_BREAKPOINTS, LAYOUT_CONSTANTS } from './config';
-import { validateScreenDimensions } from './validation';
+import { DEVICE_BREAKPOINTS, LAYOUT_CONSTANTS } from '../../responsive/config';
+import { validateScreenDimensions } from '../../responsive/validation';
 
 /**
  * Helper function for device detection with fallback
@@ -17,13 +17,13 @@ import { validateScreenDimensions } from './validation';
  * @returns Operation result or fallback
  */
 const withDeviceDetectionFallback = <T>(
-  operation: () => T, 
-  fallback: T, 
+  operation: () => T,
+  fallback: T,
   warningMessage: string
 ): T => {
   try {
     return operation();
-  } catch (error) {
+  } catch {
     if (__DEV__) {
       console.warn(`[DeviceDetection] ${warningMessage}`);
     }
@@ -48,11 +48,11 @@ export enum DeviceType {
  */
 export const getScreenDimensions = () => {
   const { width, height } = Dimensions.get('window');
-  
+
   try {
     validateScreenDimensions(width, height);
     return { width, height };
-  } catch (error) {
+  } catch {
     if (__DEV__) {
       console.warn('[getScreenDimensions] Invalid screen dimensions detected, using fallback values');
     }

package/src/device/detection/iPadBreakpoints.ts

@@ -0,0 +1,55 @@
+/**
+ * iPad Breakpoints and Constants
+ * Apple HIG compliant values for iPad responsive design
+ */
+
+/**
+ * iPad specific breakpoints following Apple HIG
+ */
+export const IPAD_BREAKPOINTS = {
+    IPAD_MINI: 744,
+    IPAD_10_2: 810,
+    IPAD_AIR: 820,
+    IPAD_11_PRO: 834,
+    IPAD_12_9_PRO: 1024,
+    IPAD_LANDSCAPE_MINI: 1133,
+    IPAD_LANDSCAPE_AIR: 1180,
+    IPAD_LANDSCAPE_PRO: 1366,
+} as const;
+
+/**
+ * Apple HIG Touch Target Guidelines
+ */
+export const TOUCH_TARGETS = {
+    MINIMUM: 44,
+    RECOMMENDED: 48,
+    IPAD_RECOMMENDED: 50,
+} as const;
+
+/**
+ * Content width constraints for iPad
+ */
+export const CONTENT_WIDTH_CONSTRAINTS = {
+    READABLE_MAX: 672,
+    FORM_MAX: 580,
+    CARD_MAX: 400,
+    MODAL_MAX: 600,
+    PAYWALL_MAX: 540,
+} as const;
+
+/**
+ * iPad Layout Configuration
+ */
+export const IPAD_LAYOUT_CONFIG = {
+    SCREEN_PADDING: 24,
+    SECTION_SPACING: 32,
+    CARD_SPACING: 20,
+    GRID_COLUMNS_PORTRAIT: 2,
+    GRID_COLUMNS_LANDSCAPE: 3,
+    GRID_GAP: 20,
+    MODAL_CORNER_RADIUS: 16,
+    SHEET_CORNER_RADIUS: 20,
+    MODAL_HORIZONTAL_MARGIN: 48,
+    FONT_SCALE: 1.1,
+    HEADING_SCALE: 1.15,
+} as const;

package/src/device/detection/iPadDetection.ts

@@ -0,0 +1,48 @@
+/**
+ * iPad Device Detection Utilities
+ */
+
+import { Dimensions, Platform } from 'react-native';
+import { DEVICE_BREAKPOINTS } from '../../responsive/config';
+import { IPAD_BREAKPOINTS } from './iPadBreakpoints';
+
+/**
+ * Detect if the current device is an iPad
+ */
+export function isIPad(): boolean {
+    if (Platform.OS !== 'ios') return false;
+
+    const { width, height } = Dimensions.get('window');
+    const minDimension = Math.min(width, height);
+    return minDimension >= DEVICE_BREAKPOINTS.SMALL_TABLET;
+}
+
+/**
+ * Detect if the current device is an iPad mini
+ */
+export function isIPadMini(): boolean {
+    if (!isIPad()) return false;
+
+    const { width, height } = Dimensions.get('window');
+    const minWidth = Math.min(width, height);
+    return minWidth < IPAD_BREAKPOINTS.IPAD_AIR;
+}
+
+/**
+ * Detect if the current device is an iPad Pro (12.9")
+ */
+export function isIPadPro(): boolean {
+    if (!isIPad()) return false;
+
+    const { width, height } = Dimensions.get('window');
+    const minWidth = Math.min(width, height);
+    return minWidth >= IPAD_BREAKPOINTS.IPAD_11_PRO;
+}
+
+/**
+ * Check if device is in landscape orientation
+ */
+export function isIPadLandscape(): boolean {
+    const { width, height } = Dimensions.get('window');
+    return width > height;
+}

package/src/device/detection/iPadLayoutUtils.ts

@@ -0,0 +1,95 @@
+/**
+ * iPad Layout Utilities
+ */
+
+import { Dimensions } from 'react-native';
+import { DEVICE_BREAKPOINTS } from '../../responsive/config';
+import {
+    IPAD_BREAKPOINTS,
+    TOUCH_TARGETS,
+    CONTENT_WIDTH_CONSTRAINTS,
+    IPAD_LAYOUT_CONFIG,
+} from './iPadBreakpoints';
+import { isIPad, isIPadPro } from './iPadDetection';
+
+/**
+ * Get optimal content max width based on screen size
+ */
+export function getContentMaxWidth(screenWidth: number): number {
+    if (screenWidth >= IPAD_BREAKPOINTS.IPAD_12_9_PRO) {
+        return CONTENT_WIDTH_CONSTRAINTS.READABLE_MAX;
+    }
+    if (screenWidth >= IPAD_BREAKPOINTS.IPAD_AIR) {
+        return Math.min(screenWidth * 0.85, CONTENT_WIDTH_CONSTRAINTS.READABLE_MAX);
+    }
+    if (screenWidth >= DEVICE_BREAKPOINTS.SMALL_TABLET) {
+        return Math.min(screenWidth * 0.90, CONTENT_WIDTH_CONSTRAINTS.FORM_MAX);
+    }
+    return screenWidth;
+}
+
+/**
+ * Get grid columns based on screen width
+ */
+export function getIPadGridColumns(screenWidth: number): number {
+    if (screenWidth >= IPAD_BREAKPOINTS.IPAD_LANDSCAPE_AIR) return 4;
+    if (screenWidth >= IPAD_BREAKPOINTS.IPAD_12_9_PRO) return 3;
+    if (screenWidth >= DEVICE_BREAKPOINTS.SMALL_TABLET) return 2;
+    return 1;
+}
+
+/**
+ * Get touch target size based on device
+ */
+export function getTouchTargetSize(): number {
+    return isIPad() ? TOUCH_TARGETS.IPAD_RECOMMENDED : TOUCH_TARGETS.RECOMMENDED;
+}
+
+/**
+ * Get screen padding based on device type
+ */
+export function getIPadScreenPadding(): number {
+    if (isIPadPro()) return 32;
+    if (isIPad()) return IPAD_LAYOUT_CONFIG.SCREEN_PADDING;
+    return 16;
+}
+
+/**
+ * Get font scale for iPad
+ */
+export function getIPadFontScale(): number {
+    if (isIPadPro()) return 1.15;
+    if (isIPad()) return IPAD_LAYOUT_CONFIG.FONT_SCALE;
+    return 1.0;
+}
+
+export interface IPadLayoutInfo {
+    isIPad: boolean;
+    isLandscape: boolean;
+    screenWidth: number;
+    screenHeight: number;
+    contentMaxWidth: number;
+    gridColumns: number;
+    touchTargetSize: number;
+    screenPadding: number;
+    fontScale: number;
+}
+
+/**
+ * Get complete iPad layout information
+ */
+export function getIPadLayoutInfo(): IPadLayoutInfo {
+    const { width, height } = Dimensions.get('window');
+
+    return {
+        isIPad: isIPad(),
+        isLandscape: width > height,
+        screenWidth: width,
+        screenHeight: height,
+        contentMaxWidth: getContentMaxWidth(width),
+        gridColumns: getIPadGridColumns(width),
+        touchTargetSize: getTouchTargetSize(),
+        screenPadding: getIPadScreenPadding(),
+        fontScale: getIPadFontScale(),
+    };
+}

package/src/device/detection/iPadModalUtils.ts

@@ -0,0 +1,98 @@
+/**
+ * iPad Modal Utilities
+ * Modal dimensions optimized for iPad following Apple HIG
+ */
+
+import { Dimensions } from 'react-native';
+import { CONTENT_WIDTH_CONSTRAINTS, IPAD_LAYOUT_CONFIG } from './iPadBreakpoints';
+import { isIPad, isIPadPro } from './iPadDetection';
+
+export interface ModalDimensions {
+    width: number | string;
+    maxWidth: number;
+    maxHeight: string | number;
+    horizontalMargin: number;
+    borderRadius: number;
+}
+
+/**
+ * Get modal dimensions optimized for iPad
+ */
+export function getIPadModalDimensions(): ModalDimensions {
+    const { width } = Dimensions.get('window');
+
+    if (isIPadPro()) {
+        return {
+            width: CONTENT_WIDTH_CONSTRAINTS.MODAL_MAX,
+            maxWidth: CONTENT_WIDTH_CONSTRAINTS.MODAL_MAX,
+            maxHeight: '75%',
+            horizontalMargin: 64,
+            borderRadius: 20,
+        };
+    }
+
+    if (isIPad()) {
+        return {
+            width: Math.min(width * 0.8, CONTENT_WIDTH_CONSTRAINTS.MODAL_MAX),
+            maxWidth: CONTENT_WIDTH_CONSTRAINTS.MODAL_MAX,
+            maxHeight: '80%',
+            horizontalMargin: IPAD_LAYOUT_CONFIG.MODAL_HORIZONTAL_MARGIN,
+            borderRadius: IPAD_LAYOUT_CONFIG.MODAL_CORNER_RADIUS,
+        };
+    }
+
+    return {
+        width: '92%',
+        maxWidth: 480,
+        maxHeight: '90%',
+        horizontalMargin: 16,
+        borderRadius: 24,
+    };
+}
+
+export interface PaywallDimensions {
+    width: number | string;
+    maxWidth: number;
+    maxHeight: string | number;
+    padding: number;
+    buttonHeight: number;
+    priceTextScale: number;
+}
+
+/**
+ * Get paywall modal dimensions - Apple HIG compliant
+ */
+export function getPaywallDimensions(): PaywallDimensions {
+    const { width } = Dimensions.get('window');
+
+    if (isIPadPro()) {
+        return {
+            width: CONTENT_WIDTH_CONSTRAINTS.PAYWALL_MAX,
+            maxWidth: CONTENT_WIDTH_CONSTRAINTS.PAYWALL_MAX,
+            maxHeight: '80%',
+            padding: 32,
+            buttonHeight: 56,
+            priceTextScale: 1.2,
+        };
+    }
+
+    if (isIPad()) {
+        return {
+            width: Math.min(width * 0.75, CONTENT_WIDTH_CONSTRAINTS.PAYWALL_MAX),
+            maxWidth: CONTENT_WIDTH_CONSTRAINTS.PAYWALL_MAX,
+            maxHeight: '85%',
+            padding: 28,
+            buttonHeight: 52,
+            priceTextScale: 1.1,
+        };
+    }
+
+    return {
+        width: '100%',
+        maxWidth: 480,
+        maxHeight: '95%',
+        padding: 20,
+        buttonHeight: 50,
+        priceTextScale: 1.0,
+    };
+}

package/src/device/detection/index.ts

@@ -0,0 +1,54 @@
+/**
+ * Device Detection Module - Public API
+ *
+ * Centralized device detection utilities including:
+ * - Device type detection (phone, tablet, iPad variants)
+ * - Screen dimension utilities
+ * - Layout utilities for different device types
+ */
+
+// Breakpoints and constants
+export {
+    IPAD_BREAKPOINTS,
+    TOUCH_TARGETS,
+    CONTENT_WIDTH_CONSTRAINTS,
+    IPAD_LAYOUT_CONFIG,
+} from './iPadBreakpoints';
+
+// Device type detection
+export {
+    DeviceType,
+    getScreenDimensions,
+    isSmallPhone,
+    isTablet,
+    isLandscape,
+    getDeviceType,
+    getSpacingMultiplier,
+} from './deviceDetection';
+
+// iPad-specific detection
+export {
+    isIPad,
+    isIPadMini,
+    isIPadPro,
+    isIPadLandscape,
+} from './iPadDetection';
+
+// iPad layout utilities
+export {
+    getContentMaxWidth,
+    getIPadGridColumns,
+    getTouchTargetSize,
+    getIPadScreenPadding,
+    getIPadFontScale,
+    getIPadLayoutInfo,
+    type IPadLayoutInfo,
+} from './iPadLayoutUtils';
+
+// iPad modal utilities
+export {
+    getIPadModalDimensions,
+    getPaywallDimensions,
+    type ModalDimensions,
+    type PaywallDimensions,
+} from './iPadModalUtils';