@umituz/react-native-design-system 1.0.5 → 1.1.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@umituz/react-native-design-system",
-  "version": "1.0.5",
+  "version": "1.1.0",
   "description": "Universal design system for React Native apps - Domain-Driven Design architecture with Material Design 3 components",
   "main": "src/index.ts",
   "types": "src/index.ts",
@@ -31,7 +31,8 @@
     "react-native-reanimated": "~3.10.1",
     "@react-native-community/datetimepicker": "8.0.1",
     "@expo/vector-icons": "^14.0.0",
-    "lucide-react-native": "^0.468.0"
+    "lucide-react-native": "^0.468.0",
+    "zustand": "^5.0.2"
   },
   "peerDependenciesMeta": {
     "@react-native-community/datetimepicker": {

package/src/index.ts

@@ -343,3 +343,12 @@ export {
   getOnboardingDescriptionMarginTop,
   DeviceType,
 } from './presentation/utils/responsive';
+
+// =============================================================================
+// THEME MANAGEMENT - Global Theme Store
+// =============================================================================
+
+export {
+  useDesignSystemTheme,
+  type ThemeMode,
+} from './infrastructure/theme/globalThemeStore';

package/src/infrastructure/theme/globalThemeStore.ts

@@ -0,0 +1,49 @@
+/**
+ * Global Theme Store for Design System
+ *
+ * Minimal Zustand store for theme state management.
+ * Apps can sync their theme state with this global store.
+ *
+ * WHY THIS EXISTS:
+ * - ScreenLayout needs to know current theme mode
+ * - Without prop drilling or Context API
+ * - Single source of truth for design system components
+ * - Apps control theme, design system reacts
+ *
+ * USAGE IN APP:
+ * ```typescript
+ * import { useDesignSystemTheme } from '@umituz/react-native-design-system';
+ * import { useTheme } from '@domains/theme';
+ *
+ * // Sync app theme with design system
+ * const { themeMode } = useTheme();
+ * const { setThemeMode } = useDesignSystemTheme();
+ *
+ * useEffect(() => {
+ *   setThemeMode(themeMode);
+ * }, [themeMode]);
+ * ```
+ */
+
+import { create } from 'zustand';
+
+export type ThemeMode = 'light' | 'dark';
+
+interface GlobalThemeStore {
+  /** Current theme mode */
+  themeMode: ThemeMode;
+
+  /** Update theme mode (called by app when theme changes) */
+  setThemeMode: (mode: ThemeMode) => void;
+}
+
+/**
+ * Global theme store for design system components
+ *
+ * This is a MINIMAL store - app has the real theme logic.
+ * Design system just mirrors the current theme for its components.
+ */
+export const useDesignSystemTheme = create<GlobalThemeStore>((set) => ({
+  themeMode: 'light',
+  setThemeMode: (mode: ThemeMode) => set({ themeMode: mode }),
+}));

package/src/presentation/organisms/ScreenLayout.tsx

@@ -30,6 +30,8 @@ import { View, ScrollView, StyleSheet, ViewStyle } from 'react-native';
 import { SafeAreaView, Edge } from 'react-native-safe-area-context';
 import { useAppDesignTokens } from '../hooks/useAppDesignTokens';
 import { LoadingState } from '../loading/presentation/components/LoadingState';
+import { useDesignSystemTheme } from '../../infrastructure/theme/globalThemeStore';
+import type { ThemeMode } from '../tokens/core/TokenFactory';
 
 export interface ScreenLayoutProps {
   /**
@@ -111,6 +113,13 @@ export interface ScreenLayoutProps {
    * Useful for screens with inputs
    */
   keyboardAvoiding?: boolean;
+
+  /**
+   * Theme mode for design tokens
+   * If not provided, uses global theme from useDesignSystemTheme()
+   * Apps should sync their theme with the global store instead of passing this prop
+   */
+  themeMode?: ThemeMode;
 }
 
 export const ScreenLayout: React.FC<ScreenLayoutProps> = ({
@@ -128,8 +137,13 @@ export const ScreenLayout: React.FC<ScreenLayoutProps> = ({
   testID,
   hideScrollIndicator = false,
   keyboardAvoiding = false,
+  themeMode,
 }) => {
-  const tokens = useAppDesignTokens();
+  // Use global theme if themeMode prop not provided
+  const { themeMode: globalTheme } = useDesignSystemTheme();
+  const effectiveTheme = themeMode ?? globalTheme;
+
+  const tokens = useAppDesignTokens(effectiveTheme);
   const styles = useMemo(() => getStyles(tokens), [tokens]);
 
   const bgColor = backgroundColor || tokens.colors.backgroundPrimary;