@umituz/react-native-design-system 4.23.48 → 4.23.50

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@umituz/react-native-design-system",
-  "version": "4.23.48",
+  "version": "4.23.50",
   "description": "Universal design system for React Native apps - Consolidated package with atoms, molecules, organisms, theme, typography, responsive, safe area, exception, infinite scroll, UUID, image, timezone, offline, onboarding, and loading utilities",
   "main": "./src/index.ts",
   "types": "./src/index.ts",

package/src/theme/hooks/useAppDesignTokens.ts

@@ -1,31 +1,16 @@
 import { useMemo } from 'react';
-import { useDesignSystemTheme } from '../infrastructure/globalThemeStore';
+import { useTheme } from '../infrastructure/stores/themeStore';
 import { createDesignTokens } from '../core/TokenFactory';
 import { useResponsive } from '../../responsive/useResponsive';
 import { type DesignTokens } from '../types/ThemeTypes';
 
 /**
  * Hook to access current design tokens (colors, spacing, typography, etc.)
- * 
- * ✅ Responsive by default - Scales based on device type
- * ✅ Theme-aware - Automatically updates on light/dark mode changes
- * ✅ Dynamic - Supports custom color overrides
- * 
- * @returns {DesignTokens} The current responsive design tokens
- * 
- * @example
- * ```tsx
- * const tokens = useAppDesignTokens();
- * return (
- *   <View style={{ 
- *     padding: tokens.spacing.md, 
- *     backgroundColor: tokens.colors.backgroundPrimary 
- *   }} />
- * );
- * ```
+ *
+ * Uses useTheme directly - single source of truth for theme state.
  */
 export const useAppDesignTokens = (): DesignTokens => {
-    const { themeMode, customColors } = useDesignSystemTheme();
+    const { themeMode, customColors } = useTheme();
     const { spacingMultiplier, getFontSize } = useResponsive();
 
     return useMemo(

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

@@ -44,12 +44,12 @@ export const DesignSystemProvider: React.FC<DesignSystemProviderProps> = ({
   const [fontsLoaded, fontError] = fonts ? useFonts(fonts) : [true, null];
 
   const initialize = useThemeStore((state) => state.initialize);
-  const setThemeMode = useThemeStore((state) => state.setThemeMode);
-  const setCustomColors = useDesignSystemTheme((state) => state.setCustomColors);
+  const setCustomColors = useThemeStore((state) => state.setCustomColors);
+  const setDefaultColors = useThemeStore((state) => state.setDefaultColors);
+  const setGlobalCustomColors = useDesignSystemTheme((state) => state.setCustomColors);
   const setGlobalThemeMode = useDesignSystemTheme((state) => state.setThemeMode);
 
   // Set icon config SYNCHRONOUSLY before first render
-  // This ensures icons are available immediately
   if (iconRenderer && iconNames) {
     const store = useIconStore.getState();
     if (!store.isConfigured) {
@@ -58,22 +58,24 @@ export const DesignSystemProvider: React.FC<DesignSystemProviderProps> = ({
   }
 
   useEffect(() => {
+    // Register app's default colors for reset feature
     if (customColors) {
+      setDefaultColors(customColors);
       setCustomColors(customColors);
+      setGlobalCustomColors(customColors);
     }
 
     setGlobalThemeMode(initialThemeMode);
 
     initialize()
-      .then(async () => {
-        await setThemeMode(initialThemeMode);
+      .then(() => {
         setIsInitialized(true);
       })
       .catch((error) => {
         setIsInitialized(true);
         onError?.(error);
       });
-  }, [initialize, customColors, initialThemeMode, setCustomColors, setGlobalThemeMode, setThemeMode, onError]);
+  }, []);
 
   useEffect(() => {
     if (isInitialized && fontsLoaded) {

package/src/theme/infrastructure/stores/themeStore.ts

@@ -16,6 +16,7 @@ interface ThemeState {
   theme: Theme;
   themeMode: ThemeMode;
   customColors?: CustomThemeColors;
+  defaultColors?: CustomThemeColors;
   isDark: boolean;
   isInitialized: boolean;
 }
@@ -23,6 +24,8 @@ interface ThemeState {
 interface ThemeActions {
   setThemeMode: (mode: ThemeMode) => Promise<void>;
   setCustomColors: (colors?: CustomThemeColors) => Promise<void>;
+  setDefaultColors: (colors: CustomThemeColors) => void;
+  resetToDefaults: () => Promise<void>;
   toggleTheme: () => Promise<void>;
   initialize: () => Promise<void>;
 }
@@ -36,13 +39,14 @@ export const useTheme = createStore<ThemeState, ThemeActions>({
     theme: lightTheme,
     themeMode: 'light',
     customColors: undefined,
+    defaultColors: undefined,
     isDark: false,
     isInitialized: false,
   },
   persist: false,
   actions: (set, get) => ({
     initialize: async () => {
-      const { isInitialized } = get();
+      const { isInitialized, customColors: currentColors } = get();
       if (isInitialized || themeInitInProgress) return;
 
       themeInitInProgress = true;
@@ -55,19 +59,20 @@ export const useTheme = createStore<ThemeState, ThemeActions>({
 
         const mode = savedMode || 'light';
         const theme = mode === 'light' ? lightTheme : darkTheme;
+        // Only use savedColors if they exist, otherwise keep current (prop-based) colors
+        const colors = savedColors !== undefined ? savedColors : currentColors;
 
         set({
           themeMode: mode,
           theme,
-          customColors: savedColors,
+          customColors: colors,
           isDark: mode === 'dark',
           isInitialized: true,
         });
 
-        // Sync with design system global theme
         const dsTheme = useDesignSystemTheme.getState();
         dsTheme.setThemeMode(mode);
-        dsTheme.setCustomColors(savedColors);
+        dsTheme.setCustomColors(colors);
       } catch {
         set({ isInitialized: true });
         useDesignSystemTheme.getState().setThemeMode('light');
@@ -98,6 +103,20 @@ export const useTheme = createStore<ThemeState, ThemeActions>({
       useDesignSystemTheme.getState().setCustomColors(colors);
     },
 
+    setDefaultColors: (colors: CustomThemeColors) => {
+      set({ defaultColors: colors });
+    },
+
+    resetToDefaults: async () => {
+      const { defaultColors } = get();
+      set({ themeMode: 'light', theme: lightTheme, isDark: false, customColors: defaultColors });
+      await ThemeStorage.clearThemeMode();
+      await ThemeStorage.clearCustomColors();
+      const dsTheme = useDesignSystemTheme.getState();
+      dsTheme.setThemeMode('light');
+      dsTheme.setCustomColors(defaultColors);
+    },
+
     toggleTheme: async () => {
       const { themeMode, setThemeMode } = get();
       await setThemeMode(themeMode === 'light' ? 'dark' : 'light');