@umituz/react-native-design-system 2.6.19 → 2.6.21

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@umituz/react-native-design-system",
-  "version": "2.6.19",
+  "version": "2.6.21",
   "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/atoms/datepicker/components/DatePickerModal.tsx

@@ -13,7 +13,7 @@ import {
   StyleSheet,
   Platform,
 } from 'react-native';
-import { useSafeAreaInsets } from 'react-native-safe-area-context';
+import { useSafeAreaInsets } from '../../../safe-area';
 import DateTimePicker, { DateTimePickerEvent } from '@react-native-community/datetimepicker';
 import { useAppDesignTokens } from '../../../theme';
 import { AtomicText } from '../../AtomicText';

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

@@ -19,7 +19,7 @@ import {
   TextInput,
   TouchableOpacity,
 } from 'react-native';
-import { useSafeAreaInsets } from 'react-native-safe-area-context';
+import { useSafeAreaInsets } from '../../../safe-area';
 import { useAppDesignTokens } from '../../../theme';
 import { PickerOption } from '../types';
 import { AtomicIcon } from '../../AtomicIcon';

package/src/layouts/AppHeader/AppHeader.tsx

@@ -10,7 +10,7 @@
 
 import React from 'react';
 import { View, type ViewStyle } from 'react-native';
-import { SafeAreaView } from 'react-native-safe-area-context';
+import { SafeAreaView } from '../../safe-area';
 import { useAppDesignTokens } from '../../theme';
 import { AtomicText, AtomicButton, type IconName } from '../../atoms';
 

package/src/layouts/ScreenLayout/ScreenLayout.tsx

@@ -25,8 +25,7 @@
 
 import React, { useMemo } from 'react';
 import { View, ScrollView, StyleSheet, KeyboardAvoidingView, type ViewStyle, type RefreshControlProps } from 'react-native';
-import { SafeAreaView, useSafeAreaInsets } from 'react-native-safe-area-context';
-import type { Edge } from 'react-native-safe-area-context';
+import { SafeAreaView, useSafeAreaInsets, type Edge } from '../../safe-area';
 import { useAppDesignTokens } from '../../theme';
 import { getScreenLayoutConfig } from '../../responsive/responsiveLayout';
 

package/src/molecules/alerts/AlertBanner.tsx

@@ -7,7 +7,7 @@
 
 import React from 'react';
 import { StyleSheet, View, Pressable } from 'react-native';
-import { useSafeAreaInsets } from 'react-native-safe-area-context';
+import { useSafeAreaInsets } from '../../safe-area';
 import { AtomicText, AtomicIcon } from '../../atoms';
 import { useAppDesignTokens } from '../../theme';
 import { Alert, AlertType, AlertPosition } from './AlertTypes';

package/src/molecules/alerts/AlertContainer.tsx

@@ -4,7 +4,7 @@
 
 import React from 'react';
 import { View, StyleSheet } from 'react-native';
-import { useSafeAreaInsets } from 'react-native-safe-area-context';
+import { useSafeAreaInsets } from '../../safe-area';
 import { useAppDesignTokens } from '../../theme';
 import { useAlertStore } from './AlertStore';
 import { AlertToast } from './AlertToast';

package/src/molecules/bottom-sheet/components/filter/FilterSheet.tsx

@@ -1,6 +1,6 @@
 import React, { useCallback } from "react";
 import { View, StyleSheet, ScrollView, Modal, Pressable, GestureResponderEvent } from "react-native";
-import { useSafeAreaInsets } from "react-native-safe-area-context";
+import { useSafeAreaInsets } from "../../../../safe-area";
 import { AtomicButton } from '../../../../atoms';
 import { useAppDesignTokens } from '../../../../theme';
 import type { FilterOption } from "../../types/Filter";

package/src/molecules/navigation/hooks/useTabBarStyles.ts

@@ -1,5 +1,5 @@
 import { useMemo } from 'react';
-import { useSafeAreaInsets } from 'react-native-safe-area-context';
+import { useSafeAreaInsets } from '../../../safe-area';
 import { useAppDesignTokens } from '../../../theme';
 import { getResponsiveTabBarConfig } from '../../../responsive/responsiveLayout';
 

package/src/molecules/splash/components/SplashScreen.tsx

@@ -6,7 +6,7 @@
 import React, { useEffect, useState, useCallback } from "react";
 import { View, Image, StyleSheet, ActivityIndicator } from "react-native";
 import { LinearGradient } from "expo-linear-gradient";
-import { useSafeAreaInsets } from "react-native-safe-area-context";
+import { useSafeAreaInsets } from "../../../safe-area";
 import { AtomicText } from "../../../atoms";
 import { useAppDesignTokens } from "../../../theme";
 import type { SplashScreenProps, SplashColors } from "../types";

package/src/organisms/FormContainer.tsx

@@ -51,7 +51,7 @@ import {
   StyleProp,
   ViewStyle,
 } from 'react-native';
-import { useSafeAreaInsets } from 'react-native-safe-area-context';
+import { useSafeAreaInsets } from '../safe-area';
 import { useAppDesignTokens } from '../theme';
 import { useResponsive } from '../responsive';
 

package/src/responsive/useResponsive.ts

@@ -12,7 +12,7 @@
 
 import { useCallback, useMemo } from "react";
 import { useWindowDimensions } from "react-native";
-import { useSafeAreaInsets } from "react-native-safe-area-context";
+import { useSafeAreaInsets } from "../safe-area";
 import {
   getResponsiveLogoSize,
   getResponsiveInputHeight,

package/src/safe-area/index.ts

@@ -21,4 +21,5 @@ export { useStableOptions, clearPerformanceCaches } from './utils/optimization';
 export { validateNumericInput, throttledWarn, clearValidationCache } from './utils/validation';
 
 // Re-export from react-native-safe-area-context for convenience
-export { initialWindowMetrics } from 'react-native-safe-area-context';
+export { initialWindowMetrics, SafeAreaView } from 'react-native-safe-area-context';
+export type { Edge } from 'react-native-safe-area-context';

package/src/theme/infrastructure/providers/DesignSystemProvider.tsx

@@ -1,6 +1,6 @@
 import React, { useEffect, useState, ReactNode } from 'react';
 import { ActivityIndicator, View, StyleSheet } from 'react-native';
-import { SafeAreaProvider, initialWindowMetrics } from 'react-native-safe-area-context';
+import { SafeAreaProvider, initialWindowMetrics } from '../../../safe-area';
 import { useThemeStore } from '../stores/themeStore';
 import { useDesignSystemTheme } from '../globalThemeStore';
 import type { CustomThemeColors } from '../../core/CustomColors';

package/src/typography/presentation/utils/textColorUtils.ts

@@ -108,11 +108,11 @@ class MaterialColorMapper implements ColorMapper {
       case 'info':
         return tokens.colors.info;
 
-      // Legacy support (deprecated - maps to new names)
+      // Brand colors (can be used as text color)
       case 'primary':
-        return tokens.colors.textPrimary;
+        return tokens.colors.primary;
       case 'secondary':
-        return tokens.colors.textSecondary;
+        return tokens.colors.secondary;
       case 'tertiary':
         return tokens.colors.textTertiary;
       case 'disabled':
@@ -120,7 +120,7 @@ class MaterialColorMapper implements ColorMapper {
       case 'inverse':
         return tokens.colors.textInverse;
       case 'surfaceVariant':
-        return tokens.colors.textSecondary;
+        return tokens.colors.surfaceVariant;
 
       default:
         return tokens.colors.textPrimary;