@zezosoft/zezo-ott-react-native-ui-kit 1.0.5 → 1.0.6

package/src/components/layout/SafeAreaWrapper.tsx

@@ -1,13 +1,13 @@
 import React, { useMemo } from 'react';
 import { StyleSheet, type ViewStyle } from 'react-native';
 import { SafeAreaView } from 'react-native-safe-area-context';
-import type { AppTheme } from '../../theme/themes';
-import { useTheme } from '../../theme/hook/useTheme';
+import type { ThemeOverride } from '../../theme/themes';
+import { useInternalTheme } from '../../theme/hook/useInternalTheme';
 
 type SafeAreaWrapperProps = {
   children: React.ReactNode;
   style?: ViewStyle;
-  theme?: AppTheme;
+  theme?: ThemeOverride;
   edges?: ('top' | 'right' | 'bottom' | 'left')[];
   fallbackBackground?: string;
 };
@@ -19,7 +19,7 @@ export const SafeAreaWrapper: React.FC<SafeAreaWrapperProps> = ({
   edges = ['top'],
   fallbackBackground = '#fff',
 }) => {
-  const { theme: appliedTheme } = useTheme(theme);
+  const { theme: appliedTheme } = useInternalTheme(theme);
 
   const containerStyle = useMemo(() => {
     return [

package/src/store/splashStore.ts

@@ -5,9 +5,9 @@
 
 import { create } from 'zustand';
 import { persist, createJSONStorage } from 'zustand/middleware';
-import { MMKV } from 'react-native-mmkv'; // Updated import
+import { MMKV } from 'react-native-mmkv';
 
-const mmkv = new MMKV(); // Initialize MMKV instance
+const mmkv = new MMKV();
 
 interface ImageState {
   localPath: string | null;
@@ -72,9 +72,9 @@ export const useSplashStore = create<SplashState>()(
     {
       name: 'splash-storage',
       storage: createJSONStorage(() => ({
-        getItem: (name) => mmkv.getString(name) || null, // Updated to use MMKV getString
-        setItem: (name, value) => mmkv.set(name, value), // Updated to use MMKV set
-        removeItem: (name) => mmkv.delete(name), // Updated to use MMKV delete
+        getItem: (name) => mmkv.getString(name) || null,
+        setItem: (name, value) => mmkv.set(name, value),
+        removeItem: (name) => mmkv.delete(name),
       })),
       partialize: (state) => ({
         logo: {

package/src/store/themeStore.ts

@@ -0,0 +1,53 @@
+import { create } from 'zustand';
+import { Appearance, type ColorSchemeName } from 'react-native';
+import { MMKV } from 'react-native-mmkv';
+
+const storage = new MMKV({ id: 'theme_store' });
+
+interface ThemeState {
+  isDarkMode: boolean;
+  setTheme: (mode: 'dark' | 'light' | 'system') => void;
+}
+
+const getInitialIsDarkMode = (): boolean => {
+  const storedMode = storage.getString('themeMode') as
+    | 'dark'
+    | 'light'
+    | 'system'
+    | null;
+  if (storedMode === 'dark') return true;
+  if (storedMode === 'light') return false;
+  return Appearance.getColorScheme() === 'dark';
+};
+
+export const useInternalThemeStore = create<ThemeState>((set) => ({
+  isDarkMode: getInitialIsDarkMode(),
+
+  setTheme: (mode) => {
+    let isDark: boolean;
+
+    if (mode === 'dark') {
+      isDark = true;
+    } else if (mode === 'light') {
+      isDark = false;
+    } else {
+      const systemColorScheme: ColorSchemeName = Appearance.getColorScheme();
+      isDark = systemColorScheme === 'dark';
+    }
+
+    storage.set('themeMode', mode);
+
+    set({ isDarkMode: isDark });
+  },
+}));
+
+Appearance.addChangeListener(() => {
+  const storedMode = storage.getString('themeMode') as
+    | 'dark'
+    | 'light'
+    | 'system'
+    | null;
+  if (!storedMode || storedMode === 'system') {
+    useInternalThemeStore.getState().setTheme('system');
+  }
+});

package/src/theme/ThemeProvider.tsx

@@ -1,135 +1,73 @@
 /**
  * @author Naresh Dhamu
- * @lastModified Sat 26 Jul 2025 at 02:11 PM
+ * @lastModified Wed 22 Oct 2025 at 11:29 AM
  */
-import React, {
-  createContext,
-  useMemo,
-  useState,
-  useCallback,
-  useEffect,
-  useContext,
-  type ReactNode,
-} from 'react';
-import { View, StatusBar, Platform, Appearance } from 'react-native';
+
+import React, { createContext, useContext, type ReactNode } from 'react';
+import { View } from 'react-native';
 import {
   SafeAreaProvider,
   initialWindowMetrics,
 } from 'react-native-safe-area-context';
-import { LightTheme, DarkTheme, type ITheme, type AppTheme } from './themes';
 import { GestureHandlerRootView } from 'react-native-gesture-handler';
+import { AppStatusBar } from '../components/common/AppStatusBar';
+
+import { useInternalTheme } from './hook/useInternalTheme';
+import { type ITheme, type ThemeOverride } from './themes';
 
 type ThemeContextType = {
-  theme: ITheme;
+  theme: {
+    dark: ITheme['colors'];
+    light: ITheme['colors'];
+  };
   isDarkMode: boolean;
-  toggleTheme: () => void;
-  setThemeOverride: (override?: Partial<AppTheme>) => void;
+  setTheme: (mode: 'light' | 'dark' | 'system') => void;
+  finalTheme: ITheme;
 };
 
 const ThemeContext = createContext<ThemeContextType | null>(null);
 
-export const useThemeContext = () => {
+/**
+ * Custom hook to access ZezoUI theme context.
+ */
+export const useTheme = (): ThemeContextType => {
   const ctx = useContext(ThemeContext);
-  if (!ctx) throw new Error('useTheme must be used within ZezoUIProvider');
+  if (!ctx) {
+    throw new Error('useTheme must be used within ZezoUIProvider');
+  }
   return ctx;
 };
 
 type ZezoUIProviderProps = {
   children: ReactNode;
-  theme?: Partial<AppTheme> & { dark?: boolean };
-  autoSwitchTheme?: boolean;
-};
-
-const getIsDarkMode = (
-  autoSwitchTheme: boolean | undefined,
-  colorScheme: 'dark' | 'light' | null,
-  userDark?: boolean
-): boolean => {
-  if (autoSwitchTheme) return colorScheme === 'dark';
-  return userDark ?? false;
+  theme?: ThemeOverride;
+  isDark?: boolean;
 };
 
+/**
+ * ZezoUIProvider — Wraps your app with theming, safe area, and gesture support.
+ */
 export const ZezoUIProvider: React.FC<ZezoUIProviderProps> = ({
   children,
-  theme,
-  autoSwitchTheme,
+  theme: overrideTheme,
+  isDark,
 }) => {
-  const colorScheme = Appearance.getColorScheme();
-  const [overrideTheme, setOverrideTheme] = useState<
-    Partial<AppTheme> | undefined
-  >(theme);
-
-  // ✅ Sync prop to state if changed externally
-  useEffect(() => {
-    if (theme) {
-      setOverrideTheme(theme);
-    }
-  }, [theme]);
-
-  // ✅ This prioritizes externally passed theme.dark
-  const isDarkMode = useMemo(() => {
-    if (theme?.dark !== undefined) return theme.dark;
-    return getIsDarkMode(
-      autoSwitchTheme,
-      colorScheme || 'dark',
-      overrideTheme?.dark
-    );
-  }, [theme?.dark, autoSwitchTheme, colorScheme, overrideTheme?.dark]);
-
-  const baseTheme = useMemo<ITheme>(
-    () => (isDarkMode ? DarkTheme : LightTheme),
-    [isDarkMode]
-  );
-
-  const mergedTheme = useMemo<ITheme>(() => {
-    return {
-      ...baseTheme,
-      ...overrideTheme,
-      dark: isDarkMode,
-      colors: {
-        ...baseTheme.colors,
-        ...(overrideTheme?.colors ?? {}),
-      },
-    };
-  }, [baseTheme, overrideTheme, isDarkMode]);
-
-  const toggleTheme = useCallback(() => {
-    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);
-
-    if (Platform.OS === 'android') {
-      StatusBar.setBackgroundColor(mergedTheme.colors.background, true);
-    }
-  }, [isDarkMode, mergedTheme.colors.background]);
-  const contextValue = useMemo(
-    () => ({
-      theme: mergedTheme,
-      isDarkMode,
-      toggleTheme,
-      setThemeOverride,
-    }),
-    [mergedTheme, isDarkMode, toggleTheme, setThemeOverride]
-  );
+  const {
+    theme: finalTheme,
+    isDarkMode,
+    setTheme,
+    themeFull,
+  } = useInternalTheme(overrideTheme, isDark);
 
   return (
-    <GestureHandlerRootView>
+    <GestureHandlerRootView style={{ flex: 1 }}>
       <SafeAreaProvider initialMetrics={initialWindowMetrics}>
-        <ThemeContext.Provider value={contextValue}>
+        <ThemeContext.Provider
+          value={{ theme: themeFull, isDarkMode, setTheme, finalTheme }}
+        >
+          <AppStatusBar theme={overrideTheme} />
           <View
-            style={{ flex: 1, backgroundColor: mergedTheme.colors.background }}
+            style={{ flex: 1, backgroundColor: finalTheme.colors.background }}
           >
             {children}
           </View>

package/src/theme/hook/index.ts

@@ -0,0 +1,2 @@
+export * from './useInternalTheme';
+export * from './useThemeStatusBar';

package/src/theme/hook/useInternalTheme.ts

@@ -0,0 +1,61 @@
+/**
+ * @author Naresh Dhamu
+ * @lastModified Sun 19 Oct 2025 at 08:29 PM
+ */
+import { useMemo, useEffect } from 'react';
+import {
+  DarkTheme,
+  LightTheme,
+  type ITheme,
+  type ThemeOverride,
+  type useInternalThemeReturn,
+} from '../themes';
+import { useInternalThemeStore } from '../../store/themeStore';
+
+export const useInternalTheme = (
+  override?: ThemeOverride,
+  isDark?: boolean
+): useInternalThemeReturn => {
+  const { isDarkMode: storeDarkMode, setTheme } = useInternalThemeStore();
+
+  const isDarkMode = isDark !== undefined ? isDark : storeDarkMode;
+
+  useEffect(() => {
+    if (isDark !== undefined) {
+      setTheme(isDark ? 'dark' : 'light');
+    }
+  }, [isDark, setTheme]);
+
+  const selectedOverride = useMemo(() => {
+    if (!override) return {};
+    const colors = isDarkMode ? override.dark : override.light;
+    return colors ?? {};
+  }, [override, isDarkMode]);
+  const baseTheme = useMemo(
+    () => (isDarkMode ? DarkTheme : LightTheme),
+    [isDarkMode]
+  );
+
+  const finalTheme = useMemo<ITheme>(() => {
+    return {
+      ...baseTheme,
+      colors: {
+        ...baseTheme.colors,
+        ...selectedOverride,
+      },
+    };
+  }, [baseTheme, selectedOverride]);
+
+  return useMemo(
+    () => ({
+      theme: finalTheme,
+      isDarkMode,
+      setTheme,
+      themeFull: {
+        light: (override?.light as ITheme['colors']) ?? LightTheme.colors,
+        dark: (override?.dark as ITheme['colors']) ?? DarkTheme.colors,
+      },
+    }),
+    [finalTheme, isDarkMode, override?.dark, override?.light, setTheme]
+  );
+};

package/src/theme/hook/useThemeStatusBar.ts

@@ -0,0 +1,33 @@
+/**
+ * @author Naresh Dhamu
+ * @lastModified Wed 22 Oct 2025 at 10:29 AM
+ */
+/**
+ * Automatically syncs StatusBar color & style with current theme.
+ */
+import { useEffect } from 'react';
+import { StatusBar, Platform, type StatusBarStyle } from 'react-native';
+import Color from 'color';
+import type { ITheme } from '../themes';
+
+interface UseThemeStatusBarOptions {
+  theme: ITheme;
+  backgroundColor?: string;
+  barStyle?: StatusBarStyle;
+}
+
+export const useThemeStatusBar = ({
+  theme,
+  backgroundColor,
+  barStyle,
+}: UseThemeStatusBarOptions) => {
+  useEffect(() => {
+    const bgColor = backgroundColor ?? theme.colors.background;
+    const contentStyle: StatusBarStyle =
+      barStyle ?? (Color(bgColor).isDark() ? 'light-content' : 'dark-content');
+    StatusBar.setBarStyle(contentStyle, true);
+    if (Platform.OS === 'android') {
+      StatusBar.setBackgroundColor(bgColor, true);
+    }
+  }, [theme, backgroundColor, barStyle]);
+};

package/src/theme/index.ts

@@ -1,13 +1,7 @@
-import type { BaseColors, ITheme } from './themes';
-
 /**
  * @author Naresh Dhamu
  * @lastModified Sat 14 Jun 2025 at 11:47 AM
  */
-export type AppTheme = Omit<ITheme, 'colors'> & {
-  dark?: boolean;
-  colors?: Partial<BaseColors>;
-};
 
 export * from './ThemeProvider';
-export * from './hook/useTheme';
+export * from './themes';

package/src/theme/themes.ts

@@ -82,21 +82,34 @@ export type BaseColors = {
   switchThumbColor: string;
   switchTrackColorDisabled: string;
   switchThumbColorDisabled: string;
+
+  premiumIcon: string;
 };
 
 export interface ITheme {
-  dark: boolean;
-
   colors: BaseColors;
 }
+
 export type AppTheme = Omit<ITheme, 'colors'> & {
-  dark?: boolean;
   colors?: Partial<BaseColors>;
 };
 
-export const LightTheme: ITheme = {
-  dark: false,
+// New type for override object
+export type ThemeOverride = {
+  light?: Partial<BaseColors>;
+  dark?: Partial<BaseColors>;
+};
+export interface useInternalThemeReturn {
+  theme: ITheme;
+  themeFull: {
+    light: ITheme['colors'];
+    dark: ITheme['colors'];
+  };
+  isDarkMode: boolean;
+  setTheme: (mode: 'dark' | 'light' | 'system') => void;
+}
 
+export const LightTheme: ITheme = {
   colors: {
     primary: 'rgba(244, 197, 66, 1)',
     onPrimary: 'rgba(255, 255, 255, 1)',
@@ -194,11 +207,11 @@ export const LightTheme: ITheme = {
     switchThumbColor: 'white',
     switchTrackColorDisabled: '#D5D5D5',
     switchThumbColorDisabled: 'white',
+    premiumIcon: '#CA091E',
   },
 };
 
 export const DarkTheme: ITheme = {
-  dark: true,
   colors: {
     primary: 'rgba(244, 197, 66, 1)',
     onPrimary: 'rgba(15, 23, 42, 1)',
@@ -295,5 +308,6 @@ export const DarkTheme: ITheme = {
     switchThumbColor: 'white',
     switchTrackColorDisabled: '#D5D5D5',
     switchThumbColorDisabled: 'white',
+    premiumIcon: '#CA091E',
   },
 };

package/src/types/content/content-view.types.ts

@@ -5,7 +5,7 @@
 
 import type { StyleProp, TextStyle, ViewStyle } from 'react-native';
 import type { ImageStyle as FastImageStyle } from 'react-native-fast-image';
-import type { AppTheme, ITheme } from '../../theme/themes';
+import type { ThemeOverride } from '../../theme/themes';
 import type { IContentData } from '../../types';
 import type { IGetSectionData, ISectionItem } from '../../types/sections';
 import type { MoreFetchData } from '../../types/hook/usePaginatedSetion';
@@ -121,7 +121,7 @@ export type SkeletonOverrides = Partial<{
 export type HeroBannerProps = {
   backgroundImage: IContentData['thumbnail'];
   title: IContentData['name'];
-  theme: ITheme;
+  theme?: ThemeOverride;
   isLoading?: boolean;
   onPressPlay?: ({ is_trailer }: { is_trailer: boolean }) => void;
   onBackPress?: () => void;
@@ -136,7 +136,7 @@ export type HeroBannerProps = {
 export type ComponentProps = {
   content: IContentData;
   seasons?: IContentData['seasons'];
-  theme?: AppTheme;
+  theme?: ThemeOverride;
   isLoading?: boolean;
   seasonsIsLoading?: boolean;
   recommendedContent?: ISectionItem | null;

package/lib/module/theme/hook/useTheme.js

@@ -1,45 +0,0 @@
-"use strict";
-
-/**
- * @author Naresh Dhamu
- * @lastModified Sat 26 Jul 2025 at 02:11 PM
- */
-
-import React, { useMemo } from 'react';
-import { useThemeContext } from "../ThemeProvider.js";
-import { DarkTheme, LightTheme } from "../themes.js";
-export const useTheme = override => {
-  const {
-    theme: contextTheme,
-    isDarkMode,
-    setThemeOverride
-  } = useThemeContext();
-  const isOverrideDark = override?.dark ?? contextTheme.dark ?? isDarkMode;
-  const baseTheme = useMemo(() => {
-    return isOverrideDark ? DarkTheme : LightTheme;
-  }, [isOverrideDark]);
-  const finalTheme = useMemo(() => {
-    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]);
-};
-//# sourceMappingURL=useTheme.js.map

package/lib/module/theme/hook/useTheme.js.map

@@ -1 +0,0 @@
-{"version":3,"names":["React","useMemo","useThemeContext","DarkTheme","LightTheme","useTheme","override","theme","contextTheme","isDarkMode","setThemeOverride","isOverrideDark","dark","baseTheme","finalTheme","colors","useEffect","undefined"],"sourceRoot":"../../../../src","sources":["theme/hook/useTheme.ts"],"mappings":";;AAAA;AACA;AACA;AACA;;AAEA,OAAOA,KAAK,IAAIC,OAAO,QAAQ,OAAO;AACtC,SAASC,eAAe,QAAQ,qBAAkB;AAClD,SAASC,SAAS,EAAEC,UAAU,QAAoC,cAAW;AAE7E,OAAO,MAAMC,QAAQ,GAAIC,QAA4B,IAAwB;EAC3E,MAAM;IACJC,KAAK,EAAEC,YAAY;IACnBC,UAAU;IACVC;EACF,CAAC,GAAGR,eAAe,CAAC,CAAC;EAErB,MAAMS,cAAc,GAAGL,QAAQ,EAAEM,IAAI,IAAIJ,YAAY,CAACI,IAAI,IAAIH,UAAU;EAExE,MAAMI,SAAS,GAAGZ,OAAO,CAAC,MAAM;IAC9B,OAAOU,cAAc,GAAGR,SAAS,GAAGC,UAAU;EAChD,CAAC,EAAE,CAACO,cAAc,CAAC,CAAC;EAEpB,MAAMG,UAAU,GAAGb,OAAO,CAAS,MAAM;IACvC,OAAO;MACL,GAAGY,SAAS;MACZ,GAAGP,QAAQ;MACXM,IAAI,EAAED,cAAc;MACpBI,MAAM,EAAE;QACN,GAAGF,SAAS,CAACE,MAAM;QACnB,IAAIT,QAAQ,EAAES,MAAM,IAAI,CAAC,CAAC;MAC5B;IACF,CAAC;EACH,CAAC,EAAE,CAACF,SAAS,EAAEP,QAAQ,EAAEK,cAAc,CAAC,CAAC;;EAEzC;EACAX,KAAK,CAACgB,SAAS,CAAC,MAAM;IACpB,IAAIV,QAAQ,EAAE;MACZI,gBAAgB,CAACJ,QAAQ,CAAC;IAC5B,CAAC,MAAM;MACLI,gBAAgB,CAACO,SAAS,CAAC;IAC7B;EACF,CAAC,EAAE,CAACX,QAAQ,EAAEI,gBAAgB,CAAC,CAAC;EAEhC,OAAOT,OAAO,CAAC,OAAO;IAAEM,KAAK,EAAEO;EAAW,CAAC,CAAC,EAAE,CAACA,UAAU,CAAC,CAAC;AAC7D,CAAC","ignoreList":[]}

package/lib/typescript/src/theme/hook/useTheme.d.ts

@@ -1,9 +0,0 @@
-/**
- * @author Naresh Dhamu
- * @lastModified Sat 26 Jul 2025 at 02:11 PM
- */
-import { type AppTheme, type ITheme } from '../themes';
-export declare const useTheme: (override?: Partial<AppTheme>) => {
-    theme: ITheme;
-};
-//# sourceMappingURL=useTheme.d.ts.map

package/lib/typescript/src/theme/hook/useTheme.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"useTheme.d.ts","sourceRoot":"","sources":["../../../../../src/theme/hook/useTheme.ts"],"names":[],"mappings":"AAAA;;;GAGG;AAIH,OAAO,EAAyB,KAAK,QAAQ,EAAE,KAAK,MAAM,EAAE,MAAM,WAAW,CAAC;AAE9E,eAAO,MAAM,QAAQ,GAAI,WAAW,OAAO,CAAC,QAAQ,CAAC,KAAG;IAAE,KAAK,EAAE,MAAM,CAAA;CAmCtE,CAAC"}

package/src/theme/hook/useTheme.ts

@@ -1,45 +0,0 @@
-/**
- * @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]);
-};