@umituz/react-native-design-system 2.6.73 → 2.6.75

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@umituz/react-native-design-system",
-  "version": "2.6.73",
+  "version": "2.6.75",
   "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",
@@ -81,9 +81,6 @@
     "@react-navigation/native": {
       "optional": true
     },
-    "expo-device": {
-      "optional": true
-    },
     "expo-application": {
       "optional": true
     }

package/src/atoms/AtomicText.tsx

@@ -4,8 +4,7 @@ import { useAppDesignTokens } from '../theme';
 import { getTextColor, type TextStyleVariant, type ColorVariant } from '../typography';
 
 export interface AtomicTextProps extends Omit<TextProps, 'style'> {
-  /** Typographic style variant from tokens (alias for 'type') */
-  variant?: TextStyleVariant;
+
 
   /** Typographic style variant from tokens */
   type?: TextStyleVariant;
@@ -43,7 +42,6 @@ export interface AtomicTextProps extends Omit<TextProps, 'style'> {
  * ✅ SOLID, DRY, KISS
  */
 export const AtomicText = ({
-  variant,
   type = 'bodyMedium',
   color = 'textPrimary',
   align,
@@ -57,11 +55,8 @@ export const AtomicText = ({
 }: AtomicTextProps) => {
   const tokens = useAppDesignTokens();
 
-  // Support both 'variant' and 'type' props for backward compatibility
-  const textType = variant || type;
-
   // Get typography style from tokens
-  const typographyStyle = tokens.typography[textType as keyof typeof tokens.typography] as TextStyle & { responsiveFontSize?: number };
+  const typographyStyle = tokens.typography[type] as TextStyle & { responsiveFontSize?: number };
 
   // Use responsive font size if available
   const fontSize = typographyStyle?.responsiveFontSize || typographyStyle?.fontSize;

package/src/atoms/index.ts

@@ -9,7 +9,7 @@ export {
     type AtomicButtonProps,
     type ButtonVariant,
     type ButtonSize,
-} from './AtomicButton';
+} from './button';
 
 // Text
 export { AtomicText, type AtomicTextProps } from './AtomicText';

package/src/device/detection/deviceDetection.ts

@@ -11,37 +11,10 @@
  */
 
 import { Dimensions } from 'react-native';
+import * as Device from 'expo-device';
 import { DEVICE_BREAKPOINTS, LAYOUT_CONSTANTS } from '../../responsive/config';
 import { validateScreenDimensions } from '../../responsive/validation';
 
-// Safely try to import expo-device
-let Device: any = null;
-let ExpoDeviceType: any = null;
-
-try {
-  // eslint-disable-next-line @typescript-eslint/no-require-imports
-  const ExpoDevice = require('expo-device');
-  Device = ExpoDevice;
-  ExpoDeviceType = ExpoDevice.DeviceType;
-} catch {
-  // Fallback if expo-device is not available
-  console.warn('[Design System] expo-device not found, using screen dimensions for device detection');
-}
-
-/**
- * Helper function for device detection with fallback
- */
-const withDeviceDetectionFallback = <T>(
-  operation: () => T,
-  fallback: T
-): T => {
-  try {
-    return operation();
-  } catch {
-    return fallback;
-  }
-};
-
 /**
  * Device type enum for conditional rendering
  * Used for fine-grained phone size distinctions
@@ -72,10 +45,7 @@ export const getScreenDimensions = () => {
  * Uses expo-device for accurate system-level detection
  */
 export const isTablet = (): boolean => {
-  return withDeviceDetectionFallback(
-    () => Device.deviceType === ExpoDeviceType.TABLET,
-    false
-  );
+  return Device.deviceType === Device.DeviceType.TABLET;
 };
 
 /**
@@ -83,10 +53,7 @@ export const isTablet = (): boolean => {
  * Uses expo-device for accurate system-level detection
  */
 export const isPhone = (): boolean => {
-  return withDeviceDetectionFallback(
-    () => Device.deviceType === ExpoDeviceType.PHONE,
-    true
-  );
+  return Device.deviceType === Device.DeviceType.PHONE;
 };
 
 /**
@@ -94,14 +61,9 @@ export const isPhone = (): boolean => {
  * Uses width breakpoint within phone category
  */
 export const isSmallPhone = (): boolean => {
-  return withDeviceDetectionFallback(
-    () => {
-      if (!isPhone()) return false;
-      const { width } = getScreenDimensions();
-      return width <= DEVICE_BREAKPOINTS.SMALL_PHONE;
-    },
-    false
-  );
+  if (!isPhone()) return false;
+  const { width } = getScreenDimensions();
+  return width <= DEVICE_BREAKPOINTS.SMALL_PHONE;
 };
 
 /**
@@ -109,27 +71,17 @@ export const isSmallPhone = (): boolean => {
  * Uses width breakpoint within phone category
  */
 export const isLargePhone = (): boolean => {
-  return withDeviceDetectionFallback(
-    () => {
-      if (!isPhone()) return false;
-      const { width } = getScreenDimensions();
-      return width >= DEVICE_BREAKPOINTS.MEDIUM_PHONE;
-    },
-    false
-  );
+  if (!isPhone()) return false;
+  const { width } = getScreenDimensions();
+  return width >= DEVICE_BREAKPOINTS.MEDIUM_PHONE;
 };
 
 /**
  * Check if device is in landscape mode
  */
 export const isLandscape = (): boolean => {
-  return withDeviceDetectionFallback(
-    () => {
-      const { width, height } = getScreenDimensions();
-      return width > height;
-    },
-    false
-  );
+  const { width, height } = getScreenDimensions();
+  return width > height;
 };
 
 /**
@@ -137,44 +89,34 @@ export const isLandscape = (): boolean => {
  * Uses expo-device for PHONE vs TABLET, width for phone size variants
  */
 export const getDeviceType = (): DeviceType => {
-  return withDeviceDetectionFallback(
-    () => {
-      // Use expo-device for primary detection
-      if (isTablet()) {
-        return DeviceType.TABLET;
-      }
-
-      // For phones, use width for size variants
-      const { width } = getScreenDimensions();
-
-      if (width <= DEVICE_BREAKPOINTS.SMALL_PHONE) {
-        return DeviceType.SMALL_PHONE;
-      } else if (width <= DEVICE_BREAKPOINTS.MEDIUM_PHONE) {
-        return DeviceType.MEDIUM_PHONE;
-      }
-
-      return DeviceType.LARGE_PHONE;
-    },
-    DeviceType.MEDIUM_PHONE
-  );
+  // Use expo-device for primary detection
+  if (isTablet()) {
+    return DeviceType.TABLET;
+  }
+
+  // For phones, use width for size variants
+  const { width } = getScreenDimensions();
+
+  if (width <= DEVICE_BREAKPOINTS.SMALL_PHONE) {
+    return DeviceType.SMALL_PHONE;
+  } else if (width <= DEVICE_BREAKPOINTS.MEDIUM_PHONE) {
+    return DeviceType.MEDIUM_PHONE;
+  }
+
+  return DeviceType.LARGE_PHONE;
 };
 
 /**
  * Responsive spacing multiplier based on device type
  */
 export const getSpacingMultiplier = (): number => {
-  return withDeviceDetectionFallback(
-    () => {
-      if (isTablet()) {
-        return LAYOUT_CONSTANTS.SPACING_MULTIPLIER_TABLET;
-      }
-
-      if (isSmallPhone()) {
-        return LAYOUT_CONSTANTS.SPACING_MULTIPLIER_SMALL;
-      }
-
-      return LAYOUT_CONSTANTS.SPACING_MULTIPLIER_STANDARD;
-    },
-    LAYOUT_CONSTANTS.SPACING_MULTIPLIER_STANDARD
-  );
+  if (isTablet()) {
+    return LAYOUT_CONSTANTS.SPACING_MULTIPLIER_TABLET;
+  }
+
+  if (isSmallPhone()) {
+    return LAYOUT_CONSTANTS.SPACING_MULTIPLIER_SMALL;
+  }
+
+  return LAYOUT_CONSTANTS.SPACING_MULTIPLIER_STANDARD;
 };

package/src/exports/molecules.ts

@@ -31,7 +31,7 @@ export {
   // Bottom Sheet
   BottomSheet,
   BottomSheetModal,
-  SafeBottomSheetModalProvider,
+
   FilterBottomSheet,
   FilterSheet,
   useBottomSheet,

package/src/molecules/bottom-sheet/index.ts

@@ -1,6 +1,6 @@
 export * from './components/BottomSheet';
 export * from './components/BottomSheetModal';
-export * from './components/SafeBottomSheetModalProvider';
+
 export * from './components/filter/FilterBottomSheet';
 export * from './components/filter/FilterSheet';
 export * from './hooks/useBottomSheet';

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

@@ -7,7 +7,7 @@ import { useDesignSystemTheme } from '../globalThemeStore';
 import type { CustomThemeColors } from '../../core/CustomColors';
 import { SplashScreen } from '../../../molecules/splash';
 import type { SplashScreenProps } from '../../../molecules/splash/types';
-import { SafeBottomSheetModalProvider } from '../../../molecules/bottom-sheet';
+
 
 declare const __DEV__: boolean;
 
@@ -30,33 +30,7 @@ interface DesignSystemProviderProps {
 
 /**
  * DesignSystemProvider
- * 
  * Initializes theme store and applies custom colors.
- * Wrap your app with this provider to enable design system features.
- * 
- * Features:
- * - Auto-initializes theme from storage
- * - Supports custom color overrides
- * - Optional loading state
- * - Error handling
- * - GestureHandlerRootView integration
- * - BottomSheetModalProvider integration
- * 
- * Usage:
- * ```tsx
- * import { DesignSystemProvider } from '@umituz/react-native-design-system';
- * 
- * export default function App() {
- *   return (
- *     <DesignSystemProvider
- *       customColors={{ primary: '#FF6B6B' }}
- *       showLoadingIndicator
- *     >
- *       <YourApp />
- *     </DesignSystemProvider>
- *   );
- * }
- * ```
  */
 export const DesignSystemProvider: React.FC<DesignSystemProviderProps> = ({
   children,
@@ -163,9 +137,7 @@ export const DesignSystemProvider: React.FC<DesignSystemProviderProps> = ({
   return (
     <GestureHandlerRootView style={{ flex: 1 }}>
       <SafeAreaProvider initialMetrics={initialWindowMetrics}>
-        <SafeBottomSheetModalProvider>
           {renderContent()}
-        </SafeBottomSheetModalProvider>
       </SafeAreaProvider>
     </GestureHandlerRootView>
   );

package/src/atoms/AtomicButton.tsx

@@ -1,7 +0,0 @@
-/**
- * AtomicButton - Re-export from button module
- * Maintains backward compatibility
- */
-
-export { AtomicButton } from './button';
-export type { AtomicButtonProps, ButtonVariant, ButtonSize } from './button';

package/src/molecules/bottom-sheet/components/SafeBottomSheetModalProvider.tsx

@@ -1,15 +0,0 @@
-import React, { ReactNode } from 'react';
-
-export interface SafeBottomSheetModalProviderProps {
-  children: ReactNode;
-}
-
-/**
- * SafeBottomSheetModalProvider
- * 
- * Simple wrapper for backward compatibility.
- * No longer uses @gorhom/bottom-sheet provider.
- */
-export const SafeBottomSheetModalProvider = ({ children }: SafeBottomSheetModalProviderProps) => {
-  return <>{children}</>;
-};