@umituz/react-native-design-system 2.6.72 → 2.6.74

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@umituz/react-native-design-system",
-  "version": "2.6.72",
+  "version": "2.6.74",
   "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/organisms/FormContainer.tsx

@@ -43,7 +43,7 @@
  * @module FormContainer
  */
 
-import React, { Children } from 'react';
+import React from 'react';
 import {
   ScrollView,
   View,
@@ -129,25 +129,8 @@ export const FormContainer: React.FC<FormContainerProps> = ({
       maxWidth: formContentWidth,
       alignSelf: 'center',
       width: '100%',
+      gap: formElementSpacing,
     },
-    formElementWrapper: {
-      marginBottom: formElementSpacing,
-    },
-  });
-
-  // Wrap each child with spacing View (universal gap replacement)
-  // Children.map() handles arrays, fragments, single elements correctly
-  const childrenWithSpacing = Children.map(children, (child, index) => {
-    const childArray = Children.toArray(children);
-    const childKey = (child as React.ReactElement)?.key || `child-${index}`;
-    return (
-      <View
-        key={childKey}
-        style={index < childArray.length - 1 ? styles.formElementWrapper : undefined}
-      >
-        {child}
-      </View>
-    );
   });
 
   return (
@@ -161,7 +144,7 @@ export const FormContainer: React.FC<FormContainerProps> = ({
           showsVerticalScrollIndicator={showsVerticalScrollIndicator}
           testID={testID ? `${testID}-scroll` : undefined}
         >
-          {childrenWithSpacing}
+          {children}
         </ScrollView>
       </View>
     </View>

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;
 
@@ -163,9 +163,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}</>;
-};