@umituz/react-native-design-system 2.6.1 → 2.6.3

package/package.json

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

@@ -108,3 +108,6 @@ export { AtomicSwitch, type AtomicSwitchProps } from './AtomicSwitch';
 
 // Touchable
 export { AtomicTouchable, type AtomicTouchableProps } from './AtomicTouchable';
+
+// StatusBar
+export { AtomicStatusBar, type AtomicStatusBarProps } from './status-bar';

package/src/atoms/status-bar/AtomicStatusBar.tsx

@@ -0,0 +1,37 @@
+/**
+ * AtomicStatusBar Component
+ * Theme-aware status bar that automatically adjusts based on theme mode
+ */
+
+import React from 'react';
+import { StatusBar, StatusBarProps } from 'react-native';
+import { useTheme } from '../../theme/hooks/useTheme';
+import { useAppDesignTokens } from '../../theme/hooks/useAppDesignTokens';
+
+export interface AtomicStatusBarProps extends Omit<StatusBarProps, 'barStyle' | 'backgroundColor'> {
+  barStyle?: 'auto' | 'light-content' | 'dark-content';
+  backgroundColor?: string;
+}
+
+export const AtomicStatusBar: React.FC<AtomicStatusBarProps> = ({
+  barStyle = 'auto',
+  backgroundColor,
+  ...props
+}) => {
+  const { themeMode } = useTheme();
+  const tokens = useAppDesignTokens();
+
+  const resolvedBarStyle = barStyle === 'auto'
+    ? themeMode === 'dark' ? 'light-content' : 'dark-content'
+    : barStyle;
+
+  const resolvedBackgroundColor = backgroundColor || tokens.colors.backgroundPrimary;
+
+  return (
+    <StatusBar
+      barStyle={resolvedBarStyle}
+      backgroundColor={resolvedBackgroundColor}
+      {...props}
+    />
+  );
+};

package/src/atoms/status-bar/index.ts

@@ -0,0 +1,6 @@
+/**
+ * Status Bar Exports
+ */
+
+export { AtomicStatusBar } from './AtomicStatusBar';
+export type { AtomicStatusBarProps } from './AtomicStatusBar';

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

@@ -1,14 +1,15 @@
 /**
  * Splash Screen Component
- * Pure prop-driven component, no context needed
+ * Pure prop-driven component with theme-aware defaults
  */
 
 import React, { useEffect, useState, useCallback } from "react";
-import { View, Image, StyleSheet } from "react-native";
+import { View, Image, StyleSheet, ActivityIndicator } from "react-native";
 import { LinearGradient } from "expo-linear-gradient";
 import { useSafeAreaInsets } from "react-native-safe-area-context";
 import { AtomicText } from "../../../atoms";
-import type { SplashScreenProps } from "../types";
+import { useAppDesignTokens } from "../../../theme";
+import type { SplashScreenProps, SplashColors } from "../types";
 import { SPLASH_CONSTANTS } from "../constants";
 
 declare const __DEV__: boolean;

package/src/molecules/splash/types/index.ts

@@ -67,8 +67,25 @@ export interface SplashScreenProps {
   /** App icon/logo image source */
   icon?: ImageSourcePropType;
 
-  /** Color configuration (required - must be provided by app) */
-  colors: SplashColors;
+  /**
+   * Color configuration (optional - uses design tokens by default)
+   *
+   * If not provided, colors will be automatically derived from the current theme:
+   * - Light mode: dark text on light background
+   * - Dark mode: light text on dark background
+   *
+   * @example
+   * // Auto theme-aware (recommended)
+   * <SplashScreen appName="MyApp" icon={icon} />
+   *
+   * // Custom colors
+   * <SplashScreen
+   *   appName="MyApp"
+   *   icon={icon}
+   *   colors={{ background: '#FF0000', text: '#FFFFFF' }}
+   * />
+   */
+  colors?: SplashColors;
 
   /** Optional gradient colors (overrides background color) */
   gradientColors?: readonly [string, string, ...string[]];

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

@@ -1,5 +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 { useThemeStore } from '../stores/themeStore';
 import { useDesignSystemTheme } from '../globalThemeStore';
 import type { CustomThemeColors } from '../../core/CustomColors';
@@ -89,25 +90,33 @@ export const DesignSystemProvider: React.FC<DesignSystemProviderProps> = ({
       });
   }, [initialize, customColors, setCustomColors, onInitialized, onError]);
 
-  // Show loading indicator if requested and not yet initialized
-  if (showLoadingIndicator && !isInitialized) {
-    if (loadingComponent) {
-      return <>{loadingComponent}</>;
-    }
-    
-    // Use SplashScreen if config provided, otherwise fallback to ActivityIndicator
-    if (splashConfig?.colors) {
-      return <SplashScreen {...splashConfig} />;
+  const renderContent = () => {
+    // Show loading indicator if requested and not yet initialized
+    if (showLoadingIndicator && !isInitialized) {
+      if (loadingComponent) {
+        return <>{loadingComponent}</>;
+      }
+      
+      // Use SplashScreen if config provided, otherwise fallback to ActivityIndicator
+      if (splashConfig?.colors) {
+        return <SplashScreen {...splashConfig} />;
+      }
+
+      return (
+        <View style={styles.loadingContainer}>
+          <ActivityIndicator size="large" />
+        </View>
+      );
     }
 
-    return (
-      <View style={styles.loadingContainer}>
-        <ActivityIndicator size="large" />
-      </View>
-    );
-  }
+    return <>{children}</>;
+  };
 
-  return <>{children}</>;
+  return (
+    <SafeAreaProvider initialMetrics={initialWindowMetrics}>
+      {renderContent()}
+    </SafeAreaProvider>
+  );
 };
 
 const styles = StyleSheet.create({