@umituz/react-native-design-system 2.8.42 → 2.8.44

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@umituz/react-native-design-system",
-  "version": "2.8.42",
+  "version": "2.8.44",
   "description": "Universal design system for React Native apps - Consolidated package with atoms, molecules, organisms, theme, typography, responsive, safe area, exception, infinite scroll, UUID, image, timezone, offline, and onboarding utilities",
   "main": "./src/index.ts",
   "types": "./src/index.ts",
@@ -60,16 +60,16 @@
     "url": "https://github.com/umituz/react-native-design-system"
   },
   "peerDependencies": {
-    "@tanstack/query-async-storage-persister": ">=5.0.0",
-    "@tanstack/react-query": ">=5.0.0",
-    "@tanstack/react-query-persist-client": ">=5.0.0",
     "@expo/vector-icons": ">=15.0.0",
+    "@react-native-async-storage/async-storage": ">=1.18.0",
     "@react-native-community/datetimepicker": ">=8.0.0",
     "@react-native-community/slider": ">=4.0.0",
-    "@react-native-async-storage/async-storage": ">=1.18.0",
     "@react-navigation/bottom-tabs": ">=7.0.0",
     "@react-navigation/native": ">=7.0.0",
     "@react-navigation/stack": ">=7.0.0",
+    "@tanstack/query-async-storage-persister": ">=5.0.0",
+    "@tanstack/react-query": ">=5.0.0",
+    "@tanstack/react-query-persist-client": ">=5.0.0",
     "@umituz/react-native-haptics": "*",
     "@umituz/react-native-localization": "*",
     "@umituz/react-native-uuid": "*",
@@ -104,9 +104,6 @@
     }
   },
   "devDependencies": {
-    "@tanstack/query-async-storage-persister": "^5.66.7",
-    "@tanstack/react-query": "^5.66.7",
-    "@tanstack/react-query-persist-client": "^5.66.7",
     "@eslint/js": "^9.39.2",
     "@expo/vector-icons": "^15.0.0",
     "@react-native-async-storage/async-storage": "^2.2.0",
@@ -115,6 +112,9 @@
     "@react-navigation/bottom-tabs": "^7.9.0",
     "@react-navigation/native": "^7.1.26",
     "@react-navigation/stack": "^7.6.13",
+    "@tanstack/query-async-storage-persister": "^5.66.7",
+    "@tanstack/react-query": "^5.66.7",
+    "@tanstack/react-query-persist-client": "^5.66.7",
     "@testing-library/react": "^16.3.1",
     "@testing-library/react-native": "^13.3.3",
     "@types/jest": "^30.0.0",
@@ -135,19 +135,20 @@
     "expo-device": "~7.0.2",
     "expo-file-system": "^19.0.21",
     "expo-font": "~14.0.0",
-    "expo-network": "~8.0.0",
-    "expo-video": "~3.0.0",
     "expo-haptics": "~14.0.0",
+    "expo-image": "~3.0.11",
     "expo-image-manipulator": "~13.0.0",
     "expo-image-picker": "~16.0.0",
-    "expo-media-library": "~17.0.0",
-    "expo-image": "~3.0.11",
     "expo-localization": "~16.0.1",
+    "expo-media-library": "~17.0.0",
+    "expo-modules-core": "^3.0.29",
+    "expo-network": "~8.0.0",
     "expo-secure-store": "~14.0.0",
-    "i18next": "^25.0.0",
-    "react-i18next": "^16.0.0",
     "expo-sharing": "~14.0.8",
+    "expo-video": "~3.0.0",
+    "i18next": "^25.0.0",
     "react": "19.1.0",
+    "react-i18next": "^16.0.0",
     "react-native": "0.81.5",
     "react-native-gesture-handler": "^2.20.0",
     "react-native-haptic-feedback": "^2.3.3",

package/src/device/detection/deviceDetection.ts

@@ -60,9 +60,9 @@ export const isPhone = (): boolean => {
  * Check if current device is a small phone (iPhone SE, 13 mini)
  * Uses width breakpoint within phone category
  */
-export const isSmallPhone = (): boolean => {
+export const isSmallPhone = (offset?: { width: number }): boolean => {
   if (!isPhone()) return false;
-  const { width } = getScreenDimensions();
+  const { width } = offset || getScreenDimensions();
   return width <= DEVICE_BREAKPOINTS.SMALL_PHONE;
 };
 
@@ -70,17 +70,17 @@ export const isSmallPhone = (): boolean => {
  * Check if current device is a large phone (Pro Max, Plus models)
  * Uses width breakpoint within phone category
  */
-export const isLargePhone = (): boolean => {
+export const isLargePhone = (offset?: { width: number }): boolean => {
   if (!isPhone()) return false;
-  const { width } = getScreenDimensions();
+  const { width } = offset || getScreenDimensions();
   return width >= DEVICE_BREAKPOINTS.MEDIUM_PHONE;
 };
 
 /**
  * Check if device is in landscape mode
  */
-export const isLandscape = (): boolean => {
-  const { width, height } = getScreenDimensions();
+export const isLandscape = (offset?: { width: number; height: number }): boolean => {
+  const { width, height } = offset || getScreenDimensions();
   return width > height;
 };
 
@@ -88,14 +88,14 @@ export const isLandscape = (): boolean => {
  * Get current device type with fine-grained phone distinctions
  * Uses expo-device for PHONE vs TABLET, width for phone size variants
  */
-export const getDeviceType = (): DeviceType => {
+export const getDeviceType = (offset?: { width: number }): DeviceType => {
   // Use expo-device for primary detection
   if (isTablet()) {
     return DeviceType.TABLET;
   }
 
   // For phones, use width for size variants
-  const { width } = getScreenDimensions();
+  const { width } = offset || getScreenDimensions();
 
   if (width <= DEVICE_BREAKPOINTS.SMALL_PHONE) {
     return DeviceType.SMALL_PHONE;
@@ -109,12 +109,12 @@ export const getDeviceType = (): DeviceType => {
 /**
  * Responsive spacing multiplier based on device type
  */
-export const getSpacingMultiplier = (): number => {
+export const getSpacingMultiplier = (offset?: { width: number }): number => {
   if (isTablet()) {
     return LAYOUT_CONSTANTS.SPACING_MULTIPLIER_TABLET;
   }
 
-  if (isSmallPhone()) {
+  if (isSmallPhone(offset)) {
     return LAYOUT_CONSTANTS.SPACING_MULTIPLIER_SMALL;
   }
 

package/src/infinite-scroll/presentation/hooks/pagination.helper.ts

@@ -6,6 +6,62 @@
 import type { InfiniteScrollConfig } from "../../domain/types/infinite-scroll-config";
 import type { InfiniteScrollState } from "../../domain/types/infinite-scroll-state";
 
+/**
+ * Sleep utility for retry delay
+ */
+export function sleep(ms: number): Promise<void> {
+  return new Promise((resolve) => setTimeout(resolve, ms));
+}
+
+/**
+ * Retry logic with exponential backoff
+ */
+export async function retryWithBackoff<T>(
+  fn: () => Promise<T>,
+  maxRetries: number,
+  baseDelay: number,
+): Promise<T> {
+  let lastError: Error | undefined;
+
+  for (let attempt = 0; attempt <= maxRetries; attempt++) {
+    try {
+      return await fn();
+    } catch (error) {
+      lastError = error instanceof Error ? error : new Error(String(error));
+
+      if (attempt < maxRetries) {
+        const delay = baseDelay * Math.pow(2, attempt);
+        if (__DEV__) {
+          console.log(
+            `[useInfiniteScroll] Retry attempt ${attempt + 1}/${maxRetries} after ${delay}ms`,
+          );
+        }
+        await sleep(delay);
+      }
+    }
+  }
+
+  throw lastError;
+}
+
+export function createInitialState<T>(
+  initialPage: number,
+  totalItems?: number,
+): InfiniteScrollState<T> {
+  return {
+    items: [],
+    pages: [],
+    currentPage: initialPage,
+    cursor: null,
+    hasMore: true,
+    isLoading: true,
+    isLoadingMore: false,
+    isRefreshing: false,
+    error: null,
+    totalItems,
+  };
+}
+
 export function isCursorMode<T>(
   config: InfiniteScrollConfig<T>,
 ): config is Extract<InfiniteScrollConfig<T>, { paginationMode: "cursor" }> {

package/src/infinite-scroll/presentation/hooks/useInfiniteScroll.ts

@@ -13,7 +13,13 @@ import { useState, useCallback, useEffect, useRef } from "react";
 import type { InfiniteScrollConfig } from "../../domain/types/infinite-scroll-config";
 import type { InfiniteScrollState } from "../../domain/types/infinite-scroll-state";
 import type { UseInfiniteScrollReturn } from "../../domain/types/infinite-scroll-return";
-import { loadData, loadMoreData, isCursorMode } from "./pagination.helper";
+import {
+  loadData,
+  loadMoreData,
+  isCursorMode,
+  createInitialState,
+  retryWithBackoff,
+} from "./pagination.helper";
 
 const DEFAULT_CONFIG = {
   pageSize: 20,
@@ -24,62 +30,6 @@ const DEFAULT_CONFIG = {
   retryDelay: 1000,
 };
 
-function createInitialState<T>(
-  initialPage: number,
-  totalItems?: number,
-): InfiniteScrollState<T> {
-  return {
-    items: [],
-    pages: [],
-    currentPage: initialPage,
-    cursor: null,
-    hasMore: true,
-    isLoading: true,
-    isLoadingMore: false,
-    isRefreshing: false,
-    error: null,
-    totalItems,
-  };
-}
-
-/**
- * Sleep utility for retry delay
- */
-function sleep(ms: number): Promise<void> {
-  return new Promise((resolve) => setTimeout(resolve, ms));
-}
-
-/**
- * Retry logic with exponential backoff
- */
-async function retryWithBackoff<T>(
-  fn: () => Promise<T>,
-  maxRetries: number,
-  baseDelay: number,
-): Promise<T> {
-  let lastError: Error | undefined;
-
-  for (let attempt = 0; attempt <= maxRetries; attempt++) {
-    try {
-      return await fn();
-    } catch (error) {
-      lastError = error instanceof Error ? error : new Error(String(error));
-
-      if (attempt < maxRetries) {
-        const delay = baseDelay * Math.pow(2, attempt);
-        if (__DEV__) {
-          console.log(
-            `[useInfiniteScroll] Retry attempt ${attempt + 1}/${maxRetries} after ${delay}ms`,
-          );
-        }
-        await sleep(delay);
-      }
-    }
-  }
-
-  throw lastError;
-}
-
 export function useInfiniteScroll<T>(
   config: InfiniteScrollConfig<T>,
 ): UseInfiniteScrollReturn<T> {
@@ -125,20 +75,16 @@ export function useInfiniteScroll<T>(
   const loadInitial = useCallback(async () => {
     if (isLoadingRef.current) return;
     isLoadingRef.current = true;
-
     cancelPendingRequests();
 
-    if (isMountedRef.current) {
-      setState((prev) => ({ ...prev, isLoading: true, error: null }));
-    }
+    if (isMountedRef.current) setState((prev) => ({ ...prev, isLoading: true, error: null }));
 
     const startTime = __DEV__ ? performance.now() : 0;
 
     try {
       const newState = await retryWithBackoff(
         async () => {
-          const result = await loadData(config, initialPage, pageSize, totalItems);
-          return result;
+          return await loadData(config, initialPage, pageSize, totalItems);
         },
         maxRetries,
         retryDelay,
@@ -146,7 +92,6 @@ export function useInfiniteScroll<T>(
 
       if (isMountedRef.current) {
         setState(newState);
-
         if (__DEV__) {
           const duration = performance.now() - startTime;
           console.log(
@@ -157,18 +102,9 @@ export function useInfiniteScroll<T>(
       }
     } catch (error) {
       if (isMountedRef.current) {
-        const errorMessage =
-          error instanceof Error ? error.message : "Failed to load data";
-
-        setState((prev) => ({
-          ...prev,
-          isLoading: false,
-          error: errorMessage,
-        }));
-
-        if (__DEV__) {
-          console.error("[useInfiniteScroll] Load initial failed:", errorMessage);
-        }
+        const errorMessage = error instanceof Error ? error.message : "Failed to load data";
+        setState((prev) => ({ ...prev, isLoading: false, error: errorMessage }));
+        if (__DEV__) console.error("[useInfiniteScroll] Load initial failed:", errorMessage);
       }
     } finally {
       isLoadingRef.current = false;
@@ -181,25 +117,20 @@ export function useInfiniteScroll<T>(
       !state.hasMore ||
       state.isLoadingMore ||
       state.isLoading
-    ) {
+    )
       return;
-    }
 
     if (isCursorMode(config) && !state.cursor) return;
 
     isLoadingRef.current = true;
-
-    if (isMountedRef.current) {
-      setState((prev) => ({ ...prev, isLoadingMore: true, error: null }));
-    }
+    if (isMountedRef.current) setState((prev) => ({ ...prev, isLoadingMore: true, error: null }));
 
     const startTime = __DEV__ ? performance.now() : 0;
 
     try {
       const updates = await retryWithBackoff(
         async () => {
-          const result = await loadMoreData(config, state, pageSize);
-          return result;
+          return await loadMoreData(config, state, pageSize);
         },
         maxRetries,
         retryDelay,
@@ -207,30 +138,19 @@ export function useInfiniteScroll<T>(
 
       if (isMountedRef.current) {
         setState((prev) => ({ ...prev, ...updates }));
-
         if (__DEV__) {
           const duration = performance.now() - startTime;
-          const newItemsCount = updates.items?.length || 0;
           console.log(
             `[useInfiniteScroll] Load more completed in ${duration.toFixed(2)}ms`,
-            `Loaded ${newItemsCount} items, total: ${updates.items?.length || 0}`,
+            `Loaded ${updates.items?.length || 0} items`,
           );
         }
       }
     } catch (error) {
       if (isMountedRef.current) {
-        const errorMessage =
-          error instanceof Error ? error.message : "Failed to load more items";
-
-        setState((prev) => ({
-          ...prev,
-          isLoadingMore: false,
-          error: errorMessage,
-        }));
-
-        if (__DEV__) {
-          console.error("[useInfiniteScroll] Load more failed:", errorMessage);
-        }
+        const errorMessage = error instanceof Error ? error.message : "Failed to load more items";
+        setState((prev) => ({ ...prev, isLoadingMore: false, error: errorMessage }));
+        if (__DEV__) console.error("[useInfiniteScroll] Load more failed:", errorMessage);
       }
     } finally {
       isLoadingRef.current = false;
@@ -240,20 +160,16 @@ export function useInfiniteScroll<T>(
   const refresh = useCallback(async () => {
     if (isLoadingRef.current) return;
     isLoadingRef.current = true;
-
     cancelPendingRequests();
 
-    if (isMountedRef.current) {
-      setState((prev) => ({ ...prev, isRefreshing: true, error: null }));
-    }
+    if (isMountedRef.current) setState((prev) => ({ ...prev, isRefreshing: true, error: null }));
 
     const startTime = __DEV__ ? performance.now() : 0;
 
     try {
       const newState = await retryWithBackoff(
         async () => {
-          const result = await loadData(config, initialPage, pageSize, totalItems);
-          return result;
+          return await loadData(config, initialPage, pageSize, totalItems);
         },
         maxRetries,
         retryDelay,
@@ -261,7 +177,6 @@ export function useInfiniteScroll<T>(
 
       if (isMountedRef.current) {
         setState(newState);
-
         if (__DEV__) {
           const duration = performance.now() - startTime;
           console.log(
@@ -272,18 +187,9 @@ export function useInfiniteScroll<T>(
       }
     } catch (error) {
       if (isMountedRef.current) {
-        const errorMessage =
-          error instanceof Error ? error.message : "Failed to refresh data";
-
-        setState((prev) => ({
-          ...prev,
-          isRefreshing: false,
-          error: errorMessage,
-        }));
-
-        if (__DEV__) {
-          console.error("[useInfiniteScroll] Refresh failed:", errorMessage);
-        }
+        const errorMessage = error instanceof Error ? error.message : "Failed to refresh data";
+        setState((prev) => ({ ...prev, isRefreshing: false, error: errorMessage }));
+        if (__DEV__) console.error("[useInfiniteScroll] Refresh failed:", errorMessage);
       }
     } finally {
       isLoadingRef.current = false;
@@ -294,34 +200,17 @@ export function useInfiniteScroll<T>(
     isLoadingRef.current = false;
     cancelPendingRequests();
     setState(createInitialState<T>(initialPage, totalItems));
-
-    if (__DEV__) {
-      console.log("[useInfiniteScroll] State reset");
-    }
+    if (__DEV__) console.log("[useInfiniteScroll] State reset");
   }, [initialPage, totalItems, cancelPendingRequests]);
 
   useEffect(() => {
-    if (autoLoad) {
-      loadInitial();
-    }
-
+    if (autoLoad) loadInitial();
     return () => {
-      // Cleanup on config change
-      if (__DEV__) {
-        console.log("[useInfiniteScroll] Config changed, cleaning up");
-      }
+      if (__DEV__) console.log("[useInfiniteScroll] Config changed, cleaning up");
     };
   }, [autoLoad, loadInitial]);
 
-  const canLoadMore =
-    state.hasMore && !state.isLoadingMore && !state.isLoading;
+  const canLoadMore = state.hasMore && !state.isLoadingMore && !state.isLoading;
 
-  return {
-    items: state.items,
-    state,
-    loadMore,
-    refresh,
-    reset,
-    canLoadMore,
-  };
+  return { items: state.items, state, loadMore, refresh, reset, canLoadMore };
 }

package/src/responsive/compute/computeDeviceInfo.ts

@@ -13,10 +13,12 @@ export interface ComputedDeviceInfo {
   readonly spacingMultiplier: number;
 }
 
-export const computeDeviceInfo = (): ComputedDeviceInfo => ({
-  isSmallDevice: isSmallPhone(),
+export const computeDeviceInfo = (
+  dimensions?: { width: number; height: number }
+): ComputedDeviceInfo => ({
+  isSmallDevice: isSmallPhone(dimensions),
   isTabletDevice: isTablet(),
-  isLandscapeDevice: isLandscape(),
-  deviceType: getDeviceType(),
-  spacingMultiplier: getSpacingMultiplier(),
+  isLandscapeDevice: isLandscape(dimensions),
+  deviceType: getDeviceType(dimensions),
+  spacingMultiplier: getSpacingMultiplier(dimensions),
 });

package/src/responsive/compute/computeResponsiveSizes.ts

@@ -25,14 +25,16 @@ export interface ComputedResponsiveSizes {
   readonly gridColumns: number;
 }
 
-export const computeResponsiveSizes = (): ComputedResponsiveSizes => ({
-  logoSize: getResponsiveLogoSize(),
-  inputHeight: getResponsiveInputHeight(),
-  iconContainerSize: getResponsiveIconContainerSize(),
-  maxContentWidth: getResponsiveMaxWidth(),
+export const computeResponsiveSizes = (
+  dimensions?: { width: number; height: number }
+): ComputedResponsiveSizes => ({
+  logoSize: getResponsiveLogoSize(undefined, dimensions),
+  inputHeight: getResponsiveInputHeight(undefined, dimensions),
+  iconContainerSize: getResponsiveIconContainerSize(undefined, dimensions),
+  maxContentWidth: getResponsiveMaxWidth(undefined, dimensions),
   minTouchTarget: getMinTouchTarget(),
-  modalMaxHeight: getResponsiveModalMaxHeight(),
-  modalMinHeight: getResponsiveMinModalHeight(),
+  modalMaxHeight: getResponsiveModalMaxHeight(dimensions),
+  modalMinHeight: getResponsiveMinModalHeight(dimensions),
   gridColumns: getResponsiveGridColumns(),
 });
 

package/src/responsive/gridUtils.ts

@@ -46,9 +46,13 @@ export interface GridCellSizeConfig {
  * Calculates optimal square cell size for a grid that fills available space
  *
  * @param config - Grid configuration
+ * @param dimensions - Optional dimensions override
  * @returns Responsive cell size (width = height for square cells)
  */
-export const getResponsiveGridCellSize = (config: GridCellSizeConfig): number => {
+export const getResponsiveGridCellSize = (
+  config: GridCellSizeConfig,
+  dimensions?: { width: number; height: number }
+): number => {
   try {
     const {
       columns,
@@ -61,7 +65,7 @@ export const getResponsiveGridCellSize = (config: GridCellSizeConfig): number =>
       statusBarHeight = 50,
     } = config;
 
-    const { width, height } = getScreenDimensions();
+    const { width, height } = dimensions || getScreenDimensions();
 
     const totalHorizontalGap = gap * (columns - 1);
     const availableWidth = width - horizontalPadding - totalHorizontalGap;

package/src/responsive/responsiveModal.ts

@@ -32,9 +32,9 @@ export interface ResponsiveDialogLayout {
   borderRadius: number;
 }
 
-export const getResponsiveModalMaxHeight = (): string => {
+export const getResponsiveModalMaxHeight = (dimensions?: { height: number }): string => {
   try {
-    const { height } = getScreenDimensions();
+    const { height } = dimensions || getScreenDimensions();
 
     if (height <= HEIGHT_THRESHOLDS.SMALL_DEVICE) {
       return LAYOUT_CONSTANTS.MODAL_HEIGHT_SMALL;
@@ -48,9 +48,9 @@ export const getResponsiveModalMaxHeight = (): string => {
   }
 };
 
-export const getResponsiveMinModalHeight = (): number => {
+export const getResponsiveMinModalHeight = (dimensions?: { height: number }): number => {
   try {
-    const { height } = getScreenDimensions();
+    const { height } = dimensions || getScreenDimensions();
 
     if (height <= HEIGHT_THRESHOLDS.SMALL_DEVICE) {
       const calculatedHeight = height * MODAL_CONFIG.MIN_HEIGHT_PERCENT_SMALL;

package/src/responsive/responsiveSizing.ts

@@ -22,11 +22,19 @@ export {
  * Responsive logo/icon size
  * @param baseSize - Base logo size (default: 140)
  */
-export const getResponsiveLogoSize = (baseSize: number = 140): number => {
+/**
+ * Responsive logo/icon size
+ * @param baseSize - Base logo size (default: 140)
+ * @param dimensions - Optional dimensions override
+ */
+export const getResponsiveLogoSize = (
+  baseSize: number = 140,
+  dimensions?: { width: number }
+): number => {
   try {
     const validatedBaseSize = validateNumber(baseSize, 'baseSize', 50, 500);
-    const { width } = getScreenDimensions();
-    const isSmallPhoneDevice = isSmallPhone();
+    const { width } = dimensions || getScreenDimensions();
+    const isSmallPhoneDevice = isSmallPhone(dimensions);
     const isTabletDevice = isTablet();
 
     if (isSmallPhoneDevice) {
@@ -46,11 +54,15 @@ export const getResponsiveLogoSize = (baseSize: number = 140): number => {
 /**
  * Responsive multiline input height
  * @param baseHeight - Base input height (default: 200)
+ * @param dimensions - Optional dimensions override
  */
-export const getResponsiveInputHeight = (baseHeight: number = 200): number => {
+export const getResponsiveInputHeight = (
+  baseHeight: number = 200,
+  dimensions?: { height: number }
+): number => {
   try {
     const validatedBaseHeight = validateNumber(baseHeight, 'baseHeight', 50, 500);
-    const { height } = getScreenDimensions();
+    const { height } = dimensions || getScreenDimensions();
 
     if (height <= HEIGHT_THRESHOLDS.SMALL_DEVICE) {
       const calculatedHeight = safePercentage(height, RESPONSIVE_PERCENTAGES.INPUT_SMALL_DEVICE);
@@ -69,12 +81,16 @@ export const getResponsiveInputHeight = (baseHeight: number = 200): number => {
 /**
  * Responsive icon container size
  * @param baseSize - Base container size (default: 140)
+ * @param dimensions - Optional dimensions override
  */
-export const getResponsiveIconContainerSize = (baseSize: number = 140): number => {
+export const getResponsiveIconContainerSize = (
+  baseSize: number = 140,
+  dimensions?: { width: number }
+): number => {
   try {
     const validatedBaseSize = validateNumber(baseSize, 'baseSize', 50, 300);
-    const { width } = getScreenDimensions();
-    const isSmallPhoneDevice = isSmallPhone();
+    const { width } = dimensions || getScreenDimensions();
+    const isSmallPhoneDevice = isSmallPhone(dimensions);
     const isTabletDevice = isTablet();
 
     if (isSmallPhoneDevice) {
@@ -94,12 +110,16 @@ export const getResponsiveIconContainerSize = (baseSize: number = 140): number =
 /**
  * Responsive max width for content
  * @param baseWidth - Base content width (default: 400)
+ * @param dimensions - Optional dimensions override
  */
-export const getResponsiveMaxWidth = (baseWidth: number = 400): number => {
+export const getResponsiveMaxWidth = (
+  baseWidth: number = 400,
+  dimensions?: { width: number }
+): number => {
   try {
     const validatedBaseWidth = validateNumber(baseWidth, 'baseWidth', 100, 1000);
-    const { width } = getScreenDimensions();
-    const isSmallPhoneDevice = isSmallPhone();
+    const { width } = dimensions || getScreenDimensions();
+    const isSmallPhoneDevice = isSmallPhone(dimensions);
     const isTabletDevice = isTablet();
 
     if (isSmallPhoneDevice) {
@@ -119,11 +139,15 @@ export const getResponsiveMaxWidth = (baseWidth: number = 400): number => {
 /**
  * Responsive font size
  * @param baseFontSize - Base font size
+ * @param dimensions - Optional dimensions override
  */
-export const getResponsiveFontSize = (baseFontSize: number): number => {
+export const getResponsiveFontSize = (
+  baseFontSize: number,
+  dimensions?: { width: number }
+): number => {
   try {
     const validatedBaseSize = validateFontSize(baseFontSize);
-    const isSmallPhoneDevice = isSmallPhone();
+    const isSmallPhoneDevice = isSmallPhone(dimensions);
     const isTabletDevice = isTablet();
 
     if (isSmallPhoneDevice) {