@umituz/react-native-design-system 2.8.43 → 2.8.45

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@umituz/react-native-design-system",
-  "version": "2.8.43",
+  "version": "2.8.45",
   "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/onboarding/index.ts

@@ -68,7 +68,7 @@ export {
 export { OnboardingScreen, type OnboardingScreenProps } from "./presentation/screens/OnboardingScreen";
 export { OnboardingHeader, type OnboardingHeaderProps } from "./presentation/components/OnboardingHeader";
 export { OnboardingFooter, type OnboardingFooterProps } from "./presentation/components/OnboardingFooter";
-export { OnboardingProvider, type OnboardingProviderProps, useOnboardingProvider } from "./presentation/providers/OnboardingProvider";
+export { OnboardingProvider, type OnboardingProviderProps, type OnboardingTranslations, useOnboardingProvider } from "./presentation/providers/OnboardingProvider";
 export { BackgroundImageCollage, type CollageLayout, type BackgroundImageCollageProps } from "./presentation/components/BackgroundImageCollage";
 export type { OnboardingTheme, OnboardingColors } from "./presentation/types/OnboardingTheme";
 

package/src/onboarding/presentation/components/OnboardingFooter.tsx

@@ -1,7 +1,6 @@
 import React from "react";
 import { View, StyleSheet, TouchableOpacity } from "react-native";
 import { useSafeAreaInsets } from "react-native-safe-area-context";
-import { useLocalization } from "@umituz/react-native-localization";
 import { AtomicText } from "../../../atoms/AtomicText";
 import { useOnboardingProvider } from "../providers/OnboardingProvider";
 
@@ -13,8 +12,6 @@ export interface OnboardingFooterProps {
   showProgressBar?: boolean;
   showDots?: boolean;
   showProgressText?: boolean;
-  nextButtonText?: string;
-  getStartedButtonText?: string;
   disabled?: boolean;
 }
 
@@ -26,19 +23,14 @@ export const OnboardingFooter = ({
   showProgressBar = true,
   showDots = true,
   showProgressText = true,
-  nextButtonText,
-  getStartedButtonText,
   disabled = false,
 }: OnboardingFooterProps) => {
   const insets = useSafeAreaInsets();
-  const { t } = useLocalization();
-  const {
-    theme: { colors },
-  } = useOnboardingProvider();
+  const { theme: { colors }, translations } = useOnboardingProvider();
 
   const buttonText = isLastSlide
-    ? getStartedButtonText || t("onboarding.getStarted")
-    : nextButtonText || t("general.continue");
+    ? translations.getStartedButton
+    : translations.nextButton;
 
   const progressPercent = ((currentIndex + 1) / totalSlides) * 100;
 
@@ -95,7 +87,7 @@ export const OnboardingFooter = ({
           type="labelSmall"
           style={[styles.progressText, { color: colors.progressTextColor }]}
         >
-          {currentIndex + 1} {t("general.of")} {totalSlides}
+          {currentIndex + 1} {translations.of} {totalSlides}
         </AtomicText>
       )}
     </View>

package/src/onboarding/presentation/components/OnboardingScreenContent.tsx

@@ -127,8 +127,6 @@ export const OnboardingScreenContent = ({
           showProgressBar={showProgressBar}
           showDots={showDots}
           showProgressText={showProgressText}
-          nextButtonText={nextButtonText}
-          getStartedButtonText={getStartedButtonText}
           disabled={!isAnswerValid}
         />
       )}

package/src/onboarding/presentation/providers/OnboardingProvider.tsx

@@ -8,8 +8,15 @@
 import React, { createContext, useContext, useMemo } from "react";
 import type { OnboardingTheme, OnboardingColors } from "../types/OnboardingTheme";
 
+export interface OnboardingTranslations {
+  nextButton: string;
+  getStartedButton: string;
+  of: string;
+}
+
 interface OnboardingProviderValue {
   theme: OnboardingTheme;
+  translations: OnboardingTranslations;
 }
 
 const OnboardingScope = createContext<OnboardingProviderValue | undefined>(undefined);
@@ -18,12 +25,14 @@ export interface OnboardingProviderProps {
   children: React.ReactNode;
   useCustomBackground: boolean;
   colors: OnboardingColors;
+  translations: OnboardingTranslations;
 }
 
 export const OnboardingProvider = ({
   children,
   useCustomBackground,
   colors,
+  translations,
 }: OnboardingProviderProps) => {
   const value = useMemo(
     () => ({
@@ -31,8 +40,9 @@ export const OnboardingProvider = ({
         colors,
         useCustomBackground,
       },
+      translations,
     }),
-    [colors, useCustomBackground]
+    [colors, useCustomBackground, translations]
   );
 
   return (

package/src/onboarding/presentation/screens/OnboardingScreen.tsx

@@ -13,7 +13,7 @@ import { useAppDesignTokens } from "../../../theme/hooks/useAppDesignTokens";
 import type { OnboardingOptions } from "../../domain/entities/OnboardingOptions";
 import { useOnboardingScreenState } from "../hooks/useOnboardingScreenState";
 import { OnboardingScreenContent } from "../components/OnboardingScreenContent";
-import { OnboardingProvider } from "../providers/OnboardingProvider";
+import { OnboardingProvider, type OnboardingTranslations } from "../providers/OnboardingProvider";
 import type { OnboardingColors } from "../types/OnboardingTheme";
 
 export interface OnboardingScreenProps extends OnboardingOptions {
@@ -59,6 +59,11 @@ export interface OnboardingScreenProps extends OnboardingOptions {
    * Theme colors for the onboarding (Optional - will use design tokens if not provided)
    */
   themeColors?: OnboardingColors;
+
+  /**
+   * All translations for the onboarding (required)
+   */
+  translations: OnboardingTranslations;
 }
 
 export const OnboardingScreen = ({
@@ -82,6 +87,7 @@ export const OnboardingScreen = ({
   useCustomBackground: globalUseCustomBackground = false,
   themeVariant = "default",
   themeColors: providedThemeColors,
+  translations,
 }: OnboardingScreenProps) => {
   if (__DEV__) {
     console.log("[OnboardingScreen] Rendering with slides:", slides?.length);
@@ -147,7 +153,7 @@ export const OnboardingScreen = ({
   }
 
   return (
-    <OnboardingProvider useCustomBackground={useCustomBackground} colors={themeColors}>
+    <OnboardingProvider useCustomBackground={useCustomBackground} colors={themeColors} translations={translations}>
       <OnboardingScreenContent
         containerStyle={[styles.container, containerStyle]}
         useCustomBackground={useCustomBackground}

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) {

package/src/responsive/useResponsive.ts

@@ -25,24 +25,24 @@ export const useResponsive = (): UseResponsiveReturn => {
 
   // Memoize utility functions
   const getLogoSize = useCallback(
-    (baseSize?: number) => getResponsiveLogoSize(baseSize),
-    [],
+    (baseSize?: number) => getResponsiveLogoSize(baseSize, { width }),
+    [width],
   );
   const getInputHeight = useCallback(
-    (baseHeight?: number) => getResponsiveInputHeight(baseHeight),
-    [],
+    (baseHeight?: number) => getResponsiveInputHeight(baseHeight, { height }),
+    [height],
   );
   const getIconSize = useCallback(
-    (baseSize?: number) => getResponsiveIconContainerSize(baseSize),
-    [],
+    (baseSize?: number) => getResponsiveIconContainerSize(baseSize, { width }),
+    [width],
   );
   const getMaxWidth = useCallback(
-    (baseWidth?: number) => getResponsiveMaxWidth(baseWidth),
-    [],
+    (baseWidth?: number) => getResponsiveMaxWidth(baseWidth, { width }),
+    [width],
   );
   const getFontSize = useCallback(
-    (baseFontSize: number) => getResponsiveFontSize(baseFontSize),
-    [],
+    (baseFontSize: number) => getResponsiveFontSize(baseFontSize, { width }),
+    [width],
   );
   const getGridCols = useCallback(
     (mobile?: number, tablet?: number) =>
@@ -53,8 +53,9 @@ export const useResponsive = (): UseResponsiveReturn => {
   // Compute all responsive values
   const responsiveValues = useMemo(
     () => {
-      const deviceInfo = computeDeviceInfo();
-      const sizes = computeResponsiveSizes();
+      const dimensions = { width, height };
+      const deviceInfo = computeDeviceInfo(dimensions);
+      const sizes = computeResponsiveSizes(dimensions);
       const positioning = computeResponsivePositioning(insets);
       const onboarding = computeOnboardingSizes(deviceInfo);
 
@@ -110,7 +111,7 @@ export const useResponsive = (): UseResponsiveReturn => {
         getGridCols,
       };
     },
-    [width, height, insets],
+    [width, height, insets, getLogoSize, getInputHeight, getIconSize, getMaxWidth, getFontSize, getGridCols], // Added callbacks to dep array
   );
 
   return responsiveValues;