@umituz/react-native-design-system 2.6.13 → 2.6.15

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@umituz/react-native-design-system",
-  "version": "2.6.13",
+  "version": "2.6.15",
   "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",

package/src/device/detection/iPadDetection.ts

@@ -1,20 +1,20 @@
 /**
  * iPad Device Detection Utilities
+ *
+ * Uses expo-device for system-level tablet detection,
+ * then uses screen dimensions for iPad-specific sub-categories.
  */
 
-import { Dimensions, Platform } from 'react-native';
-import { DEVICE_BREAKPOINTS } from '../../responsive/config';
+import { Dimensions } from 'react-native';
 import { IPAD_BREAKPOINTS } from './iPadBreakpoints';
+import { isTablet, isLandscape } from './deviceDetection';
 
 /**
- * Detect if the current device is an iPad
+ * Detect if the current device is an iPad (or Android tablet)
+ * Uses expo-device for accurate system-level detection
  */
 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;
+    return isTablet();
 }
 
 /**
@@ -40,9 +40,9 @@ export function isIPadPro(): boolean {
 }
 
 /**
- * Check if device is in landscape orientation
+ * Check if tablet device is in landscape orientation
+ * Uses shared isLandscape detection for consistency
  */
 export function isIPadLandscape(): boolean {
-    const { width, height } = Dimensions.get('window');
-    return width > height;
+    return isLandscape();
 }

package/src/device/detection/index.ts

@@ -19,7 +19,9 @@ export {
 export {
     DeviceType,
     getScreenDimensions,
+    isPhone,
     isSmallPhone,
+    isLargePhone,
     isTablet,
     isLandscape,
     getDeviceType,

package/src/device/index.ts

@@ -20,7 +20,9 @@ export {
     // Device type detection
     DeviceType,
     getScreenDimensions,
+    isPhone,
     isSmallPhone,
+    isLargePhone,
     isTablet,
     isLandscape,
     getDeviceType,

package/src/index.ts

@@ -125,7 +125,9 @@ export {
   // Device detection
   DeviceType,
   getScreenDimensions,
+  isPhone,
   isSmallPhone,
+  isLargePhone,
   isTablet,
   isLandscape,
   getDeviceType,

package/src/responsive/gridUtils.ts

@@ -3,8 +3,8 @@
  * Responsive grid sizing and column calculations
  */
 
-import { getScreenDimensions } from '../device/detection';
-import { DEVICE_BREAKPOINTS, GRID_CONFIG } from './config';
+import { getScreenDimensions, isTablet } from '../device/detection';
+import { GRID_CONFIG } from './config';
 import { validateNumber } from './validation';
 
 /**
@@ -23,8 +23,8 @@ export const getResponsiveGridColumns = (
     const validatedMobile = validateNumber(mobileColumns, 'mobileColumns', 1, 20);
     const validatedTablet = validateNumber(tabletColumns, 'tabletColumns', 1, 20);
 
-    const { width } = getScreenDimensions();
-    return width >= DEVICE_BREAKPOINTS.TABLET ? validatedTablet : validatedMobile;
+    const isTabletDevice = isTablet();
+    return isTabletDevice ? validatedTablet : validatedMobile;
   } catch {
     return 2;
   }

package/src/responsive/responsiveLayout.ts

@@ -3,10 +3,16 @@
  * Layout utilities for positioning and spacing.
  */
 
-import { getScreenDimensions } from '../device/detection';
-import { DEVICE_BREAKPOINTS, LAYOUT_CONSTANTS } from './config';
+import { getScreenDimensions, isTablet } from '../device/detection';
+import { LAYOUT_CONSTANTS } from './config';
 import { validateNumber, validateSafeAreaInsets } from './validation';
 
+/**
+ * Check if device is tablet-sized (for responsive layouts)
+ * Uses expo-device based detection for accuracy
+ */
+const checkIsTabletSize = (): boolean => isTablet();
+
 /**
  * Responsive horizontal padding
  */
@@ -18,10 +24,10 @@ export const getResponsiveHorizontalPadding = (
     const validatedBasePadding = validateNumber(basePadding, 'basePadding', 0, 100);
     validateSafeAreaInsets(insets);
 
-    const { width } = getScreenDimensions();
     const { left = 0, right = 0 } = insets;
+    const isTabletDevice = checkIsTabletSize();
 
-    if (width >= DEVICE_BREAKPOINTS.TABLET) {
+    if (isTabletDevice) {
       const tabletPadding = validatedBasePadding * 1.5;
       return Math.max(
         tabletPadding,
@@ -66,10 +72,10 @@ export const getResponsiveFABPosition = (
 ): { bottom: number; right: number } => {
   try {
     validateSafeAreaInsets(insets);
-    const { width } = getScreenDimensions();
     const { bottom = 0, right = 0 } = insets;
+    const isTabletDevice = checkIsTabletSize();
 
-    if (width >= DEVICE_BREAKPOINTS.TABLET) {
+    if (isTabletDevice) {
       return {
         bottom: Math.max(
           LAYOUT_CONSTANTS.FAB_BOTTOM_TABLET,
@@ -133,10 +139,10 @@ export const getResponsiveTabBarHeight = (
 ): number => {
   try {
     validateSafeAreaInsets(insets);
-    const { width } = getScreenDimensions();
     const { bottom = 0 } = insets;
+    const isTabletDevice = checkIsTabletSize();
 
-    const baseHeight = width >= DEVICE_BREAKPOINTS.SMALL_TABLET
+    const baseHeight = isTabletDevice
       ? TAB_BAR_CONSTANTS.BASE_HEIGHT_TABLET
       : TAB_BAR_CONSTANTS.BASE_HEIGHT_PHONE;
 
@@ -156,9 +162,8 @@ export const getResponsiveTabBarConfig = (
 ): ResponsiveTabBarConfig => {
   try {
     validateSafeAreaInsets(insets);
-    const { width } = getScreenDimensions();
     const { bottom = 0 } = insets;
-    const isTabletSize = width >= DEVICE_BREAKPOINTS.SMALL_TABLET;
+    const isTabletSize = checkIsTabletSize();
 
     const baseHeight = isTabletSize
       ? TAB_BAR_CONSTANTS.BASE_HEIGHT_TABLET

package/src/responsive/responsiveModal.ts

@@ -3,9 +3,8 @@
  * Modal, bottom sheet, and dialog layout utilities.
  */
 
-import { getScreenDimensions } from '../device/detection';
+import { getScreenDimensions, isTablet } from '../device/detection';
 import {
-  DEVICE_BREAKPOINTS,
   LAYOUT_CONSTANTS,
   HEIGHT_THRESHOLDS,
   SIZE_CONSTRAINTS,
@@ -74,7 +73,7 @@ export const getResponsiveMinModalHeight = (): number => {
 export const getResponsiveModalWidth = (): number => {
   try {
     const { width } = getScreenDimensions();
-    const isTabletDevice = width >= DEVICE_BREAKPOINTS.TABLET;
+    const isTabletDevice = isTablet();
 
     const widthPercent = isTabletDevice
       ? MODAL_CONFIG.WIDTH_PERCENT_TABLET
@@ -92,8 +91,8 @@ export const getResponsiveModalWidth = (): number => {
 
 export const getResponsiveModalHeight = (): number => {
   try {
-    const { width, height } = getScreenDimensions();
-    const isTabletDevice = width >= DEVICE_BREAKPOINTS.TABLET;
+    const { height } = getScreenDimensions();
+    const isTabletDevice = isTablet();
 
     if (isTabletDevice) {
       return height * MODAL_CONFIG.HEIGHT_PERCENT_TABLET;
@@ -111,8 +110,7 @@ export const getResponsiveModalHeight = (): number => {
 
 export const getResponsiveModalBorderRadius = (): number => {
   try {
-    const { width } = getScreenDimensions();
-    const isTabletDevice = width >= DEVICE_BREAKPOINTS.TABLET;
+    const isTabletDevice = isTablet();
 
     return isTabletDevice
       ? MODAL_CONFIG.BORDER_RADIUS_TABLET
@@ -124,8 +122,7 @@ export const getResponsiveModalBorderRadius = (): number => {
 
 export const getResponsiveModalMaxWidth = (): number => {
   try {
-    const { width } = getScreenDimensions();
-    const isTabletDevice = width >= DEVICE_BREAKPOINTS.TABLET;
+    const isTabletDevice = isTablet();
 
     return isTabletDevice
       ? MODAL_CONFIG.MAX_WIDTH_TABLET
@@ -140,8 +137,7 @@ export const getResponsiveBackdropOpacity = (): number => {
 };
 
 export const getResponsiveModalLayout = (): ResponsiveModalLayout => {
-  const { width } = getScreenDimensions();
-  const isTabletDevice = width >= DEVICE_BREAKPOINTS.TABLET;
+  const isTabletDevice = isTablet();
 
   return {
     width: getResponsiveModalWidth(),

package/src/responsive/responsiveSizing.ts

@@ -3,9 +3,8 @@
  * Responsive sizing utilities for UI components.
  */
 
-import { getScreenDimensions } from '../device/detection';
+import { getScreenDimensions, isSmallPhone, isTablet } from '../device/detection';
 import {
-  DEVICE_BREAKPOINTS,
   RESPONSIVE_PERCENTAGES,
   SIZE_CONSTRAINTS,
   HEIGHT_THRESHOLDS,
@@ -27,11 +26,13 @@ export const getResponsiveLogoSize = (baseSize: number = 140): number => {
   try {
     const validatedBaseSize = validateNumber(baseSize, 'baseSize', 50, 500);
     const { width } = getScreenDimensions();
+    const isSmallPhoneDevice = isSmallPhone();
+    const isTabletDevice = isTablet();
 
-    if (width <= DEVICE_BREAKPOINTS.SMALL_PHONE) {
+    if (isSmallPhoneDevice) {
       const calculatedSize = safePercentage(width, RESPONSIVE_PERCENTAGES.LOGO_SMALL_PHONE_MAX);
       return clamp(calculatedSize, SIZE_CONSTRAINTS.LOGO_MIN_SMALL, SIZE_CONSTRAINTS.LOGO_MAX_SMALL);
-    } else if (width >= DEVICE_BREAKPOINTS.TABLET) {
+    } else if (isTabletDevice) {
       const calculatedSize = safePercentage(width, RESPONSIVE_PERCENTAGES.LOGO_TABLET_MAX);
       return clamp(calculatedSize, SIZE_CONSTRAINTS.LOGO_MIN_TABLET, SIZE_CONSTRAINTS.LOGO_MAX_TABLET);
     }
@@ -73,11 +74,13 @@ export const getResponsiveIconContainerSize = (baseSize: number = 140): number =
   try {
     const validatedBaseSize = validateNumber(baseSize, 'baseSize', 50, 300);
     const { width } = getScreenDimensions();
+    const isSmallPhoneDevice = isSmallPhone();
+    const isTabletDevice = isTablet();
 
-    if (width <= DEVICE_BREAKPOINTS.SMALL_PHONE) {
+    if (isSmallPhoneDevice) {
       const calculatedSize = safePercentage(width, RESPONSIVE_PERCENTAGES.ICON_CONTAINER_SMALL_PHONE);
       return Math.min(calculatedSize, SIZE_CONSTRAINTS.ICON_MAX_SMALL);
-    } else if (width >= DEVICE_BREAKPOINTS.TABLET) {
+    } else if (isTabletDevice) {
       const calculatedSize = safePercentage(width, RESPONSIVE_PERCENTAGES.ICON_CONTAINER_TABLET);
       return Math.min(calculatedSize, SIZE_CONSTRAINTS.ICON_MAX_TABLET);
     }
@@ -96,10 +99,12 @@ export const getResponsiveMaxWidth = (baseWidth: number = 400): number => {
   try {
     const validatedBaseWidth = validateNumber(baseWidth, 'baseWidth', 100, 1000);
     const { width } = getScreenDimensions();
+    const isSmallPhoneDevice = isSmallPhone();
+    const isTabletDevice = isTablet();
 
-    if (width <= DEVICE_BREAKPOINTS.SMALL_PHONE) {
+    if (isSmallPhoneDevice) {
       return safePercentage(width, RESPONSIVE_PERCENTAGES.CONTENT_SMALL_PHONE);
-    } else if (width >= DEVICE_BREAKPOINTS.TABLET) {
+    } else if (isTabletDevice) {
       const calculatedWidth = safePercentage(width, RESPONSIVE_PERCENTAGES.CONTENT_TABLET);
       return Math.min(calculatedWidth, SIZE_CONSTRAINTS.CONTENT_MAX_TABLET);
     }
@@ -118,12 +123,13 @@ export const getResponsiveMaxWidth = (baseWidth: number = 400): number => {
 export const getResponsiveFontSize = (baseFontSize: number): number => {
   try {
     const validatedBaseSize = validateFontSize(baseFontSize);
-    const { width } = getScreenDimensions();
+    const isSmallPhoneDevice = isSmallPhone();
+    const isTabletDevice = isTablet();
 
-    if (width <= DEVICE_BREAKPOINTS.SMALL_PHONE) {
+    if (isSmallPhoneDevice) {
       const scaledSize = validatedBaseSize * RESPONSIVE_PERCENTAGES.FONT_SMALL_PHONE;
       return Math.max(scaledSize, SIZE_CONSTRAINTS.FONT_MIN_SIZE);
-    } else if (width >= DEVICE_BREAKPOINTS.TABLET) {
+    } else if (isTabletDevice) {
       return validatedBaseSize * RESPONSIVE_PERCENTAGES.FONT_TABLET;
     }