@zezosoft/zezo-ott-react-native-ui-kit 1.0.0 → 1.0.1

package/src/components/User/WatchLater/WatchLater.tsx

@@ -19,7 +19,7 @@ import { scale } from 'react-native-size-matters';
 import { Search } from 'lucide-react-native';
 import SkeletonPlaceholder from 'react-native-skeleton-placeholder';
 
-import { useTheme } from '../../../theme';
+import { useTheme } from '../../../theme/hook/useTheme';
 
 import AppHeader from '../../Headers/AppHeader';
 import { Text } from '../../Text';
@@ -27,6 +27,7 @@ import { ThumbnailCard } from '../../Content/Card/components/ThumbnailCard';
 import CardPoster from '../../Content/Card/components/CardPoster';
 import type { IContentData } from '../../../types';
 import type { AppTheme, ITheme } from '../../../theme/themes';
+import { RFValue } from 'react-native-responsive-fontsize';
 
 type IWatchLaterItem = {
   _id: string;
@@ -158,7 +159,7 @@ export const WatchLater: React.FC<WatchLaterProps> = ({
             <Text numberOfLines={1} style={styles.detailedTitle}>
               {item?.content?.name}
             </Text>
-            <Text numberOfLines={4} style={[styles.detailedDesc, { color: appliedTheme.colors.textSecondary }]}>
+            <Text numberOfLines={5} style={[styles.detailedDesc, { color: appliedTheme.colors.textSecondary }]}>
               {item?.content?.description}
             </Text>
           </View>
@@ -239,14 +240,14 @@ const styles = StyleSheet.create({
     justifyContent: 'center'
   },
   noDataText: {
-    fontSize: scale(14),
+    fontSize: RFValue(13),
     opacity: 0.5
   },
   contentContainerFlatStyle: {
-    paddingBottom: scale(100)
+    paddingBottom: scale(50)
   },
   thumbnailWrapper: {
-    width: scale(140),
+    width: scale(150),
     aspectRatio: 16 / 9,
     borderRadius: scale(6),
     overflow: 'hidden',
@@ -271,14 +272,16 @@ const styles = StyleSheet.create({
   },
   detailedInfo: {
     flex: 1,
-    marginLeft: scale(8)
+    marginLeft: scale(5)
   },
   detailedTitle: {
-    fontSize: scale(13),
-    fontWeight: 'bold'
+    fontSize: RFValue(11),
+    fontWeight: '500'
   },
   detailedDesc: {
-    fontSize: scale(10),
+    fontSize: RFValue(9),
+    textAlign: 'auto',
+    fontWeight: '400',
     marginTop: scale(1)
   }
 });

package/src/components/User/components/UserAvatar.tsx

@@ -1,7 +1,7 @@
 import React, { useState } from 'react';
 import { Image, StyleSheet, View } from 'react-native';
 import { scale } from 'react-native-size-matters';
-import { useTheme } from '../../../theme';
+import { useTheme } from '../../../theme/hook/useTheme';
 import type { AppTheme } from '../../../theme/themes';
 
 const fallbackAvatar = require('../../../assets/img/profile.jpg');

package/src/components/User/components/UserSection.tsx

@@ -9,8 +9,9 @@ import SkeletonPlaceholder from 'react-native-skeleton-placeholder';
 import { moderateScale, scale, verticalScale } from 'react-native-size-matters';
 import UserAvatar from './UserAvatar';
 import { Text } from '../../Text';
-import { useTheme } from '../../../theme';
+import { useTheme } from '../../../theme/hook/useTheme';
 import type { AppTheme } from '../../../theme/themes';
+import { RFValue } from 'react-native-responsive-fontsize';
 
 export interface UserInfo {
   name: string;
@@ -143,19 +144,19 @@ const styles = {
     justifyContent: 'center'
   } as ViewStyle,
   editLabel: {
-    fontSize: moderateScale(9),
+    fontSize: RFValue(8),
     marginTop: verticalScale(1),
     fontWeight: '500',
     lineHeight: moderateScale(12)
   } as TextStyle,
   userName: {
-    fontSize: moderateScale(16),
+    fontSize: RFValue(15),
     fontWeight: '600',
     marginTop: verticalScale(10),
     marginBottom: verticalScale(2)
   } as TextStyle,
   userEmail: {
-    fontSize: moderateScale(14),
+    fontSize: RFValue(13),
     opacity: 0.7
   } as TextStyle,
   skeletonWrapper: {

package/src/components/index.ts

@@ -8,7 +8,6 @@ export * from './Loader/Loader';
 export * from './Headers';
 export * from './Content/Content';
 export * from './Logo/Logo';
-export * from './SplashScreen';
 export * from './Auth';
 export * from './layout';
 export * from './Settings';

package/src/components/layout/SafeAreaWrapper.tsx

@@ -1,25 +1,32 @@
-/**
- * @author Naresh Dhamu
- * @lastModified Wed 25 Jun 2025 at 02:34 PM
- */
-
-import React from 'react';
+import React, { useMemo } from 'react';
 import { StyleSheet, type ViewStyle } from 'react-native';
 import { SafeAreaView } from 'react-native-safe-area-context';
-import { useTheme } from '../../theme';
 import type { AppTheme } from '../../theme/themes';
+import { useTheme } from '../../theme/hook/useTheme';
 
 type SafeAreaWrapperProps = {
   children: React.ReactNode;
   style?: ViewStyle;
   theme?: AppTheme;
+  edges?: ('top' | 'right' | 'bottom' | 'left')[];
+  fallbackBackground?: string;
 };
 
-export const SafeAreaWrapper: React.FC<SafeAreaWrapperProps> = ({ children, style, theme }) => {
+export const SafeAreaWrapper: React.FC<SafeAreaWrapperProps> = ({
+  children,
+  style,
+  theme,
+  edges = ['top'],
+  fallbackBackground = '#fff'
+}) => {
   const { theme: appliedTheme } = useTheme(theme);
 
+  const containerStyle = useMemo(() => {
+    return [styles.container, { backgroundColor: appliedTheme?.colors?.background || fallbackBackground }, style];
+  }, [appliedTheme.colors.background, fallbackBackground, style]);
+
   return (
-    <SafeAreaView style={[styles.container, { backgroundColor: appliedTheme.colors.background }, style]}>
+    <SafeAreaView edges={edges} style={containerStyle}>
       {children}
     </SafeAreaView>
   );

package/src/hooks/useInitSplashCacheSync.ts

@@ -1,6 +1,6 @@
 /**
  * @author Naresh Dhamu
- * @lastModified Thu 12 Jun 2025 at 07:57 PM
+ * @lastModified Tue 29 Jul 2025 at 05:37 PM
  */
 
 import { useEffect, useState } from 'react';
@@ -9,59 +9,75 @@ import CryptoJS from 'crypto-js';
 import { MMKV } from 'react-native-mmkv';
 import { useSplashStore } from '../store/splashStore';
 
-const mmkv = new MMKV(); // Initialize MMKV instance
-const downloadPromises = new Map<string, Promise<string | null>>();
+const mmkvStorage = new MMKV();
+const inFlightDownloadsMap = new Map<string, Promise<string | null>>();
 
-const getSplashLocalPath = async (
+const SUPPORTED_FILE_TYPES = ['json', 'mp4', 'jpg', 'jpeg', 'png', 'webp'] as const;
+
+const extractFileExtension = (url: string): string => {
+  try {
+    const cleanUrl = url.split('?')[0];
+    const ext = cleanUrl?.substring(cleanUrl.lastIndexOf('.') + 1).toLowerCase() || '';
+    return SUPPORTED_FILE_TYPES.includes(ext as (typeof SUPPORTED_FILE_TYPES)[number]) ? ext : 'png';
+  } catch {
+    return 'png';
+  }
+};
+
+const cacheSplashAsset = async (
   url: string,
   extension: string,
-  LAST_HASH_KEY: string,
+  mmkvKey: string,
   forceDownload: boolean
 ): Promise<string | null> => {
   if (!url?.trim()) return null;
 
-  const sanitizedExtension = extension.replace(/^\./, '').trim() || 'mp4';
-  const currentHash = CryptoJS.MD5(`${url}|${LAST_HASH_KEY}|${sanitizedExtension}`).toString();
-  const filePath = `${RNFS.CachesDirectoryPath}/splash_${currentHash}.${sanitizedExtension}`;
+  const ext = extension.replace(/^\./, '').trim() || 'mp4';
+  const hash = CryptoJS.MD5(`${url}|${mmkvKey}|${ext}`).toString();
+  const localPath = `${RNFS.CachesDirectoryPath}/splash_${hash}.${ext}`;
 
-  if (downloadPromises.has(currentHash)) {
-    return downloadPromises.get(currentHash)!;
+  if (inFlightDownloadsMap.has(hash)) {
+    return inFlightDownloadsMap.get(hash)!;
   }
 
-  const downloadOperation = (async () => {
-    const lastUsedHash = mmkv.getString(LAST_HASH_KEY); // Updated to use MMKV getString
+  const downloadTask = (async () => {
+    try {
+      const previousHash = mmkvStorage.getString(mmkvKey);
 
-    if (lastUsedHash && lastUsedHash !== currentHash) {
-      const oldFilePath = `${RNFS.CachesDirectoryPath}/splash_${lastUsedHash}.${sanitizedExtension}`;
-      const existsOld = await RNFS.exists(oldFilePath);
-      if (existsOld) await RNFS.unlink(oldFilePath).catch(() => {});
-    }
+      if (previousHash && previousHash !== hash) {
+        const oldPath = `${RNFS.CachesDirectoryPath}/splash_${previousHash}.${ext}`;
+        const exists = await RNFS.exists(oldPath);
+        if (exists) {
+          await RNFS.unlink(oldPath).catch(() => {});
+        }
+      }
 
-    if (!forceDownload) {
-      const exists = await RNFS.exists(filePath);
-      if (exists && lastUsedHash === currentHash) {
-        return filePath;
+      if (!forceDownload) {
+        const exists = await RNFS.exists(localPath);
+        if (exists && previousHash === hash) {
+          return localPath;
+        }
       }
-    }
 
-    const result = await RNFS.downloadFile({
-      fromUrl: url,
-      toFile: filePath,
-      cacheable: true,
-      readTimeout: 15000,
-      connectionTimeout: 10000
-    }).promise;
-
-    if (result.statusCode === 200) {
-      mmkv.set(LAST_HASH_KEY, currentHash); // Updated to use MMKV set
-      return filePath;
-    }
+      const { statusCode } = await RNFS.downloadFile({
+        fromUrl: url,
+        toFile: localPath,
+        cacheable: true,
+        readTimeout: 15000,
+        connectionTimeout: 10000
+      }).promise;
+
+      if (statusCode === 200) {
+        mmkvStorage.set(mmkvKey, hash);
+        return localPath;
+      }
+    } catch {}
 
     return null;
   })();
 
-  downloadPromises.set(currentHash, downloadOperation);
-  return downloadOperation;
+  inFlightDownloadsMap.set(hash, downloadTask);
+  return downloadTask;
 };
 
 type UseSplashCacheSyncOptions = {
@@ -70,90 +86,61 @@ type UseSplashCacheSyncOptions = {
   forceDownload?: boolean;
 };
 
-// Helper to extract extension from URL
-const SUPPORTED_EXTENSIONS = ['json', 'mp4', 'jpg', 'jpeg', 'png', 'webp'] as const;
-
-const extractExtensionFromUrl = (url: string): string => {
-  try {
-    const cleanUrl = url.split('?')[0];
-    const ext =
-      cleanUrl
-        ?.substring(cleanUrl.lastIndexOf('.') + 1)
-        .trim()
-        .toLowerCase() || '';
-
-    return SUPPORTED_EXTENSIONS.includes(ext as any) ? ext : 'png';
-  } catch {
-    return 'png';
-  }
-};
-
 export const useInitSplashCacheSync = ({
   logoUrl,
   backgroundUrl,
   forceDownload = false
-}: UseSplashCacheSyncOptions): {
-  state: { isReady: boolean; error: Error | null };
-  isLoading: boolean;
-  data: {
-    localPathLogo: string | null;
-    localPathBackground: string | null;
-  };
-} => {
-  const [state, setState] = useState({
+}: UseSplashCacheSyncOptions) => {
+  const [splashSyncState, setSplashSyncState] = useState({
     isReady: false,
     error: null as Error | null
   });
 
-  const setLocalPathLogo = useSplashStore((s) => s.setLogoPath);
-  const setLocalPathBackground = useSplashStore((s) => s.setBackdropPath);
+  const setSplashLogoPath = useSplashStore((s) => s.setLogoPath);
+  const setSplashBackgroundPath = useSplashStore((s) => s.setBackdropPath);
 
   useEffect(() => {
     let isMounted = true;
 
-    const syncCache = async () => {
+    const syncSplashAssets = async () => {
       try {
-        const [logoPath, bgPath] = await Promise.all([
+        const [logoPath, backgroundPath] = await Promise.all([
           logoUrl
-            ? getSplashLocalPath(logoUrl, extractExtensionFromUrl(logoUrl), 'logo', forceDownload)
+            ? cacheSplashAsset(logoUrl, extractFileExtension(logoUrl), 'splash_logo', forceDownload)
             : Promise.resolve(null),
           backgroundUrl
-            ? getSplashLocalPath(
-                backgroundUrl,
-                extractExtensionFromUrl(backgroundUrl),
-                'backgroundImage',
-                forceDownload
-              )
+            ? cacheSplashAsset(backgroundUrl, extractFileExtension(backgroundUrl), 'splash_background', forceDownload)
             : Promise.resolve(null)
         ]);
 
         if (!isMounted) return;
 
-        if (logoPath) setLocalPathLogo?.(`file://${logoPath}`);
-        if (bgPath) setLocalPathBackground?.(`file://${bgPath}`);
+        if (logoPath) setSplashLogoPath?.(logoPath);
+        if (backgroundPath) setSplashBackgroundPath?.(backgroundPath);
 
-        setState({ isReady: true, error: null });
+        setSplashSyncState({ isReady: true, error: null });
       } catch (err) {
         if (isMounted) {
-          setState({ isReady: true, error: err as Error });
+          setSplashSyncState({ isReady: true, error: err as Error });
         }
       }
     };
 
-    syncCache();
-
+    syncSplashAssets();
     return () => {
       isMounted = false;
     };
-  }, [logoUrl, backgroundUrl, forceDownload, setLocalPathLogo, setLocalPathBackground]);
-  const localPathLogo = useSplashStore((s) => s.logo.localPath);
-  const localPathBackground = useSplashStore((s) => s.backdrop.localPath);
+  }, [logoUrl, backgroundUrl, forceDownload, setSplashLogoPath, setSplashBackgroundPath]);
+
+  const splashLogoLocalPath = useSplashStore((s) => s.logo.localPath);
+  const splashBackgroundLocalPath = useSplashStore((s) => s.backdrop.localPath);
+
   return {
-    state,
-    isLoading: !state.isReady && !state.error,
+    state: splashSyncState,
+    isLoading: !splashSyncState.isReady && !splashSyncState.error,
     data: {
-      localPathLogo,
-      localPathBackground
+      localPathLogo: splashLogoLocalPath,
+      localPathBackground: splashBackgroundLocalPath
     }
   };
 };

package/src/hooks/useKeyboard.ts

@@ -3,26 +3,27 @@
  * @lastModified Sat 14 Jun 2025 at 03:01 PM
  */
 
-// use keyboard hook check keyboard open or not
 import { useEffect, useState } from 'react';
-import { Keyboard } from 'react-native';
+import { Keyboard, Platform } from 'react-native';
 
 export const useKeyboard = () => {
   const [isKeyboardOpen, setKeyboardOpen] = useState(false);
 
-  // hide keyboard when keyboard open
-
   useEffect(() => {
-    const keyboardDidShowListener = Keyboard.addListener('keyboardDidShow', () => {
+    const showEvent = Platform.OS === 'ios' ? 'keyboardWillShow' : 'keyboardDidShow';
+    const hideEvent = Platform.OS === 'ios' ? 'keyboardWillHide' : 'keyboardDidHide';
+
+    const showListener = Keyboard.addListener(showEvent, () => {
       setKeyboardOpen(true);
     });
-    const keyboardDidHideListener = Keyboard.addListener('keyboardDidHide', () => {
+
+    const hideListener = Keyboard.addListener(hideEvent, () => {
       setKeyboardOpen(false);
     });
 
     return () => {
-      keyboardDidHideListener.remove();
-      keyboardDidShowListener.remove();
+      showListener.remove();
+      hideListener.remove();
     };
   }, []);
 

package/src/hooks/usePaginatedSection.ts

@@ -21,6 +21,7 @@ export function usePaginatedSection<T>(
   });
   const [loading, setLoading] = useState(false);
 
+  // Sync initial data on mount or loading complete
   React.useEffect(() => {
     if (!isLoading && initialData.length) {
       setData(initialData);
@@ -46,6 +47,8 @@ export function usePaginatedSection<T>(
           return;
         }
 
+        const { hasNextPage, nextPage } = res.meta.pagination;
+
         setData((prev) => {
           const existingIds = new Set((prev as any[]).map((item: any) => item._id));
           const newItems = res.data.filter((item: any) => !existingIds.has(item._id));
@@ -53,8 +56,8 @@ export function usePaginatedSection<T>(
         });
 
         setPagination({
-          hasNextPage: res.meta.pagination.hasNextPage,
-          nextPage: res.meta.pagination.nextPage
+          hasNextPage,
+          nextPage
         });
       } catch (err) {
         console.error(`❌ Error loading section [${sectionId}]:`, err);
@@ -62,13 +65,14 @@ export function usePaginatedSection<T>(
         setLoading(false);
       }
     },
-    [loading, pagination, fetchFn, sectionId]
+    [loading, pagination.hasNextPage, fetchFn, sectionId]
   );
 
   return {
     data,
     pagination,
     loading,
+    hasMore: pagination.hasNextPage,
     loadMoreData
   };
 }

package/src/theme/ThemeProvider.tsx

@@ -1,19 +1,26 @@
 /**
  * @author Naresh Dhamu
- * @lastModified Sat 14 Jun 2025 at 11:11 AM
+ * @lastModified Sat 26 Jul 2025 at 02:11 PM
  */
-import React, { createContext, useContext, useMemo, useState, useCallback, useEffect, type ReactNode } from 'react';
+import React, { createContext, useMemo, useState, useCallback, useEffect, useContext, type ReactNode } from 'react';
 import { View, useColorScheme, StatusBar } from 'react-native';
+import { SafeAreaProvider, initialWindowMetrics } from 'react-native-safe-area-context';
 import { LightTheme, DarkTheme, type ITheme, type AppTheme } from './themes';
-import { SafeAreaProvider } from 'react-native-safe-area-context';
+
 type ThemeContextType = {
   theme: ITheme;
   isDarkMode: boolean;
   toggleTheme: () => void;
+  setThemeOverride: (override?: Partial<AppTheme>) => void;
 };
 
 const ThemeContext = createContext<ThemeContextType | null>(null);
-ThemeContext.displayName = 'AppThemeContext';
+
+export const useThemeContext = () => {
+  const ctx = useContext(ThemeContext);
+  if (!ctx) throw new Error('useTheme must be used within ZezoUIProvider');
+  return ctx;
+};
 
 type ZezoUIProviderProps = {
   children: ReactNode;
@@ -21,83 +28,80 @@ type ZezoUIProviderProps = {
   autoSwitchTheme?: boolean;
 };
 
-// ✅ Cleanly handles auto switch and manual dark mode
 const getIsDarkMode = (
-  autoSwitchTheme: boolean,
+  autoSwitchTheme: boolean | undefined,
   systemScheme: 'dark' | 'light' | null,
   userDark?: boolean
 ): boolean => {
-  if (autoSwitchTheme) {
-    return systemScheme === 'dark';
-  }
-  return userDark === true;
+  if (autoSwitchTheme) return systemScheme === 'dark';
+  return userDark ?? false;
 };
 
-export const ZezoUIProvider: React.FC<ZezoUIProviderProps> = ({ children, theme, autoSwitchTheme = false }) => {
+export const ZezoUIProvider: React.FC<ZezoUIProviderProps> = ({ children, theme, autoSwitchTheme }) => {
   const systemScheme = useColorScheme() ?? null;
 
-  const [isDarkMode, setIsDarkMode] = useState<boolean>(() =>
-    getIsDarkMode(autoSwitchTheme, systemScheme, theme?.dark)
-  );
+  const [overrideTheme, setOverrideTheme] = useState<Partial<AppTheme> | undefined>(theme);
 
+  // ✅ Sync prop to state if changed externally
   useEffect(() => {
-    setIsDarkMode(getIsDarkMode(autoSwitchTheme, systemScheme, theme?.dark));
-  }, [autoSwitchTheme, systemScheme, theme?.dark]);
+    if (theme) {
+      setOverrideTheme(theme);
+    }
+  }, [theme]);
+
+  // ✅ This prioritizes externally passed theme.dark
+  const isDarkMode = useMemo(() => {
+    if (theme?.dark !== undefined) return theme.dark;
+    return getIsDarkMode(autoSwitchTheme, systemScheme, overrideTheme?.dark);
+  }, [theme?.dark, autoSwitchTheme, systemScheme, overrideTheme?.dark]);
 
   const baseTheme = useMemo<ITheme>(() => (isDarkMode ? DarkTheme : LightTheme), [isDarkMode]);
 
   const mergedTheme = useMemo<ITheme>(() => {
     return {
       ...baseTheme,
-      ...theme,
+      ...overrideTheme,
+      dark: isDarkMode,
       colors: {
         ...baseTheme.colors,
-        ...(theme?.colors || {})
+        ...(overrideTheme?.colors ?? {})
       }
     };
-  }, [baseTheme, theme]);
+  }, [baseTheme, overrideTheme, isDarkMode]);
 
   const toggleTheme = useCallback(() => {
-    if (autoSwitchTheme) return; // skip toggle in auto mode
-    setIsDarkMode((prev) => !prev);
-  }, [autoSwitchTheme]);
+    if (autoSwitchTheme || theme?.dark !== undefined) return;
+    setOverrideTheme((prev) => ({
+      ...prev,
+      dark: !getIsDarkMode(false, null, prev?.dark)
+    }));
+  }, [autoSwitchTheme, theme?.dark]);
+
+  const setThemeOverride = useCallback((override?: Partial<AppTheme>) => {
+    setOverrideTheme(override);
+  }, []);
+
+  // ✅ Update StatusBar only when required
+  useEffect(() => {
+    StatusBar.setBarStyle(isDarkMode ? 'light-content' : 'dark-content', true);
+    StatusBar.setBackgroundColor(mergedTheme.colors.background, true);
+  }, [isDarkMode, mergedTheme.colors.background]);
+
+  const contextValue = useMemo(
+    () => ({
+      theme: mergedTheme,
+      isDarkMode,
+      toggleTheme,
+      setThemeOverride
+    }),
+    [mergedTheme, isDarkMode, toggleTheme, setThemeOverride]
+  );
 
   return (
-    <SafeAreaProvider>
-      <ThemeContext.Provider
-        value={{
-          theme: mergedTheme,
-          isDarkMode,
-          toggleTheme
-        }}
-      >
-        <StatusBar
-          barStyle={isDarkMode ? 'light-content' : 'dark-content'}
-          backgroundColor={mergedTheme.colors.background}
-        />
+    <SafeAreaProvider initialMetrics={initialWindowMetrics}>
+      <ThemeContext.Provider value={contextValue}>
         <View style={{ flex: 1, backgroundColor: mergedTheme.colors.background }}>{children}</View>
       </ThemeContext.Provider>
     </SafeAreaProvider>
   );
 };
-
-// ✅ useTheme hook with optional override support
-export const useTheme = (overrideTheme?: Partial<AppTheme>): { theme: ITheme } => {
-  const context = useContext(ThemeContext);
-  if (!context) {
-    throw new Error('useTheme must be used within a ZezoUIProvider');
-  }
-
-  const finalTheme = useMemo<ITheme>(() => {
-    return {
-      ...context.theme,
-      ...overrideTheme,
-      colors: {
-        ...context.theme.colors,
-        ...(overrideTheme?.colors || {})
-      }
-    };
-  }, [context.theme, overrideTheme]);
-
-  return { theme: finalTheme };
-};

package/src/theme/hook/useTheme.ts

@@ -0,0 +1,41 @@
+/**
+ * @author Naresh Dhamu
+ * @lastModified Sat 26 Jul 2025 at 02:11 PM
+ */
+
+import React, { useMemo } from 'react';
+import { useThemeContext } from '../ThemeProvider';
+import { DarkTheme, LightTheme, type AppTheme, type ITheme } from '../themes';
+
+export const useTheme = (override?: Partial<AppTheme>): { theme: ITheme } => {
+  const { theme: contextTheme, isDarkMode, setThemeOverride } = useThemeContext();
+
+  const isOverrideDark = override?.dark ?? contextTheme.dark ?? isDarkMode;
+
+  const baseTheme = useMemo(() => {
+    return isOverrideDark ? DarkTheme : LightTheme;
+  }, [isOverrideDark]);
+
+  const finalTheme = useMemo<ITheme>(() => {
+    return {
+      ...baseTheme,
+      ...override,
+      dark: isOverrideDark,
+      colors: {
+        ...baseTheme.colors,
+        ...(override?.colors ?? {})
+      }
+    };
+  }, [baseTheme, override, isOverrideDark]);
+
+  // 🔄 Push override only once (optional)
+  React.useEffect(() => {
+    if (override) {
+      setThemeOverride(override);
+    } else {
+      setThemeOverride(undefined);
+    }
+  }, [override, setThemeOverride]);
+
+  return useMemo(() => ({ theme: finalTheme }), [finalTheme]);
+};