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

package/src/components/TabBar/Two.tsx

@@ -7,8 +7,8 @@ import { View, Pressable, StyleSheet, Platform } from 'react-native';
 import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';
 import { scale } from 'react-native-size-matters';
 import { Text } from '../Text';
-import type { AppTheme, ITheme } from '../../theme/themes';
-import { useTheme } from '../../theme/hook/useTheme';
+import type { ITheme, ThemeOverride } from '../../theme/themes';
+import { useInternalTheme } from '../../theme/hook/useInternalTheme';
 import { RFValue } from 'react-native-responsive-fontsize';
 
 export type ITab = {
@@ -24,7 +24,7 @@ export type ITab = {
 
 export type TabBarTwoProps = {
   tabs: ITab[];
-  theme?: AppTheme;
+  theme?: ThemeOverride;
   onTabPress?: (key: string) => void;
 };
 
@@ -35,12 +35,14 @@ const TabBarButton = ({
   tab,
   isActive,
   appliedTheme,
+  isDarkMode,
   onPress,
   onTabPress,
   setActiveTab,
 }: {
   tab: ITab;
   isActive: boolean;
+  isDarkMode: boolean;
   appliedTheme: ITheme;
   onPress?: (e: any) => void;
   onTabPress?: (key: string) => void;
@@ -60,7 +62,7 @@ const TabBarButton = ({
           onTabPress?.(tab.key);
         }}
         android_ripple={{
-          color: appliedTheme.dark
+          color: isDarkMode
             ? 'rgba(255, 255, 255, 0.12)'
             : 'rgba(0, 0, 0, 0.08)',
           borderless: true,
@@ -80,7 +82,7 @@ const TabBarButton = ({
 };
 
 const TabBarTwo = ({ tabs, theme, onTabPress }: TabBarTwoProps) => {
-  const { theme: appliedTheme } = useTheme(theme);
+  const { theme: appliedTheme, isDarkMode } = useInternalTheme(theme);
   const [activeTab, setActiveTab] = useState(tabs[0]?.key);
 
   return (
@@ -95,7 +97,7 @@ const TabBarTwo = ({ tabs, theme, onTabPress }: TabBarTwoProps) => {
           marginHorizontal: scale(16),
           height: scale(70),
           borderRadius: scale(40),
-          backgroundColor: appliedTheme.colors.background + '80',
+          backgroundColor: appliedTheme.colors.background,
           borderWidth: 2,
           borderTopWidth: 2,
           borderTopColor: appliedTheme.colors.border,
@@ -122,6 +124,7 @@ const TabBarTwo = ({ tabs, theme, onTabPress }: TabBarTwoProps) => {
                 tab={tab}
                 isActive={tab.key === activeTab}
                 appliedTheme={appliedTheme}
+                isDarkMode={isDarkMode}
                 onPress={onPress}
                 onTabPress={onTabPress}
                 setActiveTab={setActiveTab}

package/src/components/Text/Text.tsx

@@ -1,41 +1,54 @@
-/**
- * @author Naresh Dhamu
- * @lastModified Tue 24 Jun 2025 at 04:33 PM
- */
-
 import React from 'react';
 import {
   Text as RNText,
   type TextProps as RNTextProps,
   type TextStyle,
 } from 'react-native';
-import { useTheme } from '../../theme/hook/useTheme';
+import { useInternalTheme } from '../../theme/hook/useInternalTheme';
 import { RFValue } from 'react-native-responsive-fontsize';
+import type { ThemeOverride } from '../../theme/themes';
 
 export interface TextProps extends RNTextProps {
   children: React.ReactNode;
-  size?: number; // base size
+  type?: 'title' | 'subtitle' | 'body' | 'caption';
+  size?: number;
   color?: string;
   weight?: TextStyle['fontWeight'];
   align?: TextStyle['textAlign'];
   fontFamily?: string;
   numberOfLines?: number;
   allowFontScaling?: boolean;
+  theme?: ThemeOverride;
 }
 
 const Text: React.FC<TextProps> = ({
   children,
-  size = 10,
+  type = 'body',
+  size,
   color,
-  weight = '500',
+  weight,
   align = 'left',
   fontFamily,
   numberOfLines,
   allowFontScaling = false,
   style,
+  theme: overrideTheme,
   ...rest
 }) => {
-  const { theme } = useTheme();
+  const { theme } = useInternalTheme(overrideTheme);
+
+  // Define default styles for each type
+  const typeStyles: Record<
+    string,
+    { size: number; weight: TextStyle['fontWeight']; color?: string }
+  > = {
+    title: { size: 18, weight: '700', color: theme.colors.textPrimary },
+    subtitle: { size: 14, weight: '500', color: theme.colors.textSecondary },
+    body: { size: 12, weight: '400', color: theme.colors.textPrimary },
+    caption: { size: 10, weight: '400', color: theme.colors.textSecondary },
+  };
+
+  const typeStyle = typeStyles[type] || typeStyles.body;
 
   return (
     <RNText
@@ -44,9 +57,9 @@ const Text: React.FC<TextProps> = ({
       numberOfLines={numberOfLines}
       style={[
         {
-          color: color ?? theme.colors.textPrimary,
-          fontSize: RFValue(size),
-          fontWeight: weight,
+          color: color ?? typeStyle?.color,
+          fontSize: size ? RFValue(size) : RFValue(Number(typeStyle?.size)),
+          fontWeight: weight ?? typeStyle?.weight,
           textAlign: align,
           fontFamily,
         },

package/src/components/User/DeviceSessions/DeviceSessions.tsx

@@ -15,10 +15,10 @@ import {
 } from 'react-native';
 import { scale, verticalScale } from 'react-native-size-matters';
 import { Text } from '../../Text';
-import { useTheme } from '../../../theme/hook/useTheme';
+import { useInternalTheme } from '../../../theme/hook/useInternalTheme';
 import AppHeader from '../../Headers/AppHeader';
 import SkeletonPlaceholder from 'react-native-skeleton-placeholder';
-import type { AppTheme } from '../../../theme/themes';
+import type { ThemeOverride } from '../../../theme/themes';
 import { RFValue } from 'react-native-responsive-fontsize';
 import { ScanLine } from 'lucide-react-native';
 
@@ -74,7 +74,7 @@ type IDeviceSessionsProps = {
   headerTitleAlign?: 'left' | 'center';
   headerTitleStyle?: StyleProp<any>;
   renderHeader?: () => React.ReactNode;
-  theme?: AppTheme;
+  theme?: ThemeOverride;
   isLoading?: boolean;
   isLoadingLogout?: boolean;
 };
@@ -99,7 +99,7 @@ export const DeviceSessions: React.FC<IDeviceSessionsProps> = ({
   isLoading,
   isLoadingLogout,
 }) => {
-  const { theme: appliedTheme } = useTheme(theme);
+  const { theme: appliedTheme } = useInternalTheme(theme);
   const colors = appliedTheme.colors;
 
   const [logoutSessionId, setLogoutSessionId] = React.useState<string | null>(
@@ -178,7 +178,7 @@ export const DeviceSessions: React.FC<IDeviceSessionsProps> = ({
                 >
                   <Text
                     numberOfLines={1}
-                    style={[styles.badgeText, { color: colors.black }]}
+                    style={[styles.badgeText, { color: colors.buttonText }]}
                   >
                     {thisDevice}
                   </Text>
@@ -320,6 +320,7 @@ export const DeviceSessions: React.FC<IDeviceSessionsProps> = ({
               color={colors.onSurfaceVariant}
             />
           }
+          theme={theme}
           titleAlign={headerTitleAlign}
           style={headerStyle}
           titleStyle={headerTitleStyle}

package/src/components/User/ProfileUpdate/ProfileUpdate.tsx

@@ -18,8 +18,8 @@ import { Camera } from 'lucide-react-native';
 import { useForm, Controller } from 'react-hook-form';
 import { Text } from '../../Text';
 import AppHeader from '../../Headers/AppHeader';
-import { useTheme } from '../../../theme/hook/useTheme';
-import type { AppTheme } from '../../../theme/themes';
+import { useInternalTheme } from '../../../theme/hook/useInternalTheme';
+import type { ThemeOverride } from '../../../theme/themes';
 import UserAvatar from '../components/UserAvatar';
 import { Input } from '../../Input/Input';
 import { Button } from '../../Button';
@@ -36,7 +36,7 @@ export type ProfileUpdateProps = {
   avatarUri?: string;
   onBackPress?: () => void;
   onSubmit?: (val: { fullName: string; avatarFile?: Image }) => void;
-  theme?: AppTheme;
+  theme?: ThemeOverride;
   loading?: boolean;
   onError?: (error: { message: string }) => void;
 };
@@ -51,7 +51,7 @@ export const ProfileUpdate = ({
   loading = false,
   onError,
 }: ProfileUpdateProps) => {
-  const { theme: appliedTheme } = useTheme(theme);
+  const { theme: appliedTheme } = useInternalTheme(theme);
   const { colors } = appliedTheme;
 
   const {
@@ -124,22 +124,18 @@ export const ProfileUpdate = ({
           <AppHeader
             title={title}
             onBackPress={onBackPress}
-            theme={appliedTheme}
+            theme={theme}
             titleAlign="left"
           />
 
           <View style={styles.content}>
             <View style={styles.avatarBox}>
-              <UserAvatar
-                avatarUri={avatar?.path}
-                theme={appliedTheme}
-                size={100}
-              />
+              <UserAvatar avatarUri={avatar?.path} theme={theme} size={100} />
               <TouchableOpacity
                 style={[
                   styles.cameraBtn,
                   {
-                    borderColor: colors.button,
+                    borderColor: colors.primary,
                     backgroundColor: colors.surfaceVariant,
                     shadowColor: colors.shadow || colors.surface,
                   },
@@ -149,7 +145,7 @@ export const ProfileUpdate = ({
               >
                 <Camera
                   size={moderateScale(13)}
-                  color={colors.button}
+                  color={colors.primary}
                   strokeWidth={2}
                 />
               </TouchableOpacity>
@@ -180,7 +176,7 @@ export const ProfileUpdate = ({
                       placeholder={'Enter your full name'}
                       placeholderTextColor={colors.textDisabled}
                       containerStyle={{ marginTop: verticalScale(20) }}
-                      theme={appliedTheme}
+                      theme={theme}
                       returnKeyType="done"
                       onSubmitEditing={handleSubmit(handleFormSubmit)}
                     />
@@ -196,7 +192,7 @@ export const ProfileUpdate = ({
               <Button.Primary
                 title={'Update Profile'}
                 onPress={handleSubmit(handleFormSubmit)}
-                theme={appliedTheme}
+                theme={theme}
                 titleStyle={{ fontSize: RFValue(14) }}
                 loading={loading}
                 containerStyle={{ marginTop: verticalScale(5) }}

package/src/components/User/WatchHistory/WatchHistory.tsx

@@ -16,13 +16,13 @@ import { FlatGrid } from 'react-native-super-grid';
 import { scale } from 'react-native-size-matters';
 import { Search } from 'lucide-react-native';
 
-import { useTheme } from '../../../theme/hook/useTheme';
+import { useInternalTheme } from '../../../theme/hook/useInternalTheme';
 
 import AppHeader from '../../Headers/AppHeader';
 import { Text } from '../../Text';
 import CardPoster from '../../Content/Card/components/CardPoster';
 import type { IContentData } from '../../../types';
-import type { AppTheme } from '../../../theme/themes';
+import type { ThemeOverride } from '../../../theme/themes';
 import { RFValue } from 'react-native-responsive-fontsize';
 
 export interface IHistoryItem {
@@ -56,7 +56,7 @@ export interface WatchHistoryProps {
   contentContainerStyle?: StyleProp<ViewStyle>;
 
   // Theme
-  theme?: AppTheme;
+  theme?: ThemeOverride;
 
   // Rendering Overrides
   renderItem?: (item: IHistoryItem, index: number) => React.ReactElement | null;
@@ -97,7 +97,7 @@ export const WatchHistory: React.FC<WatchHistoryProps> = ({
   onEndReached,
   onEndReachedThreshold,
 }) => {
-  const { theme: appliedTheme } = useTheme(theme);
+  const { theme: appliedTheme } = useInternalTheme(theme);
 
   const listData = isLoading
     ? Array.from({ length: skeletonCount }, (_, i) => ({
@@ -134,7 +134,7 @@ export const WatchHistory: React.FC<WatchHistoryProps> = ({
           onBackPress={onBackPress}
           title={title}
           titleAlign="left"
-          theme={appliedTheme}
+          theme={theme}
           titleStyle={{
             color: appliedTheme.colors.onBackground,
           }}

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

@@ -19,14 +19,14 @@ import { scale } from 'react-native-size-matters';
 import { Search } from 'lucide-react-native';
 import SkeletonPlaceholder from 'react-native-skeleton-placeholder';
 
-import { useTheme } from '../../../theme/hook/useTheme';
+import { useInternalTheme } from '../../../theme/hook/useInternalTheme';
 
 import AppHeader from '../../Headers/AppHeader';
 import { Text } from '../../Text';
 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 type { ITheme, ThemeOverride } from '../../../theme/themes';
 import { RFValue } from 'react-native-responsive-fontsize';
 
 type IWatchLaterItem = {
@@ -49,7 +49,7 @@ export type WatchLaterProps = {
   titleStyle?: StyleProp<TextStyle>;
   listStyle?: StyleProp<ViewStyle>;
   contentContainerStyle?: StyleProp<ViewStyle>;
-  theme?: AppTheme;
+  theme?: ThemeOverride;
   viewMode?: 'poster' | 'detailed';
   renderItem?: (
     item: IWatchLaterItem,
@@ -150,7 +150,7 @@ export const WatchLater: React.FC<WatchLaterProps> = ({
   onEndReachedThreshold,
   viewMode = 'poster',
 }) => {
-  const { theme: appliedTheme } = useTheme(theme);
+  const { theme: appliedTheme } = useInternalTheme(theme);
 
   const listData = isLoading
     ? (Array.from({ length: skeletonCount }, (_, i) => ({
@@ -192,10 +192,11 @@ export const WatchLater: React.FC<WatchLaterProps> = ({
             />
           </View>
           <View style={styles.detailedInfo}>
-            <Text numberOfLines={1} style={styles.detailedTitle}>
+            <Text theme={theme} numberOfLines={1} style={styles.detailedTitle}>
               {item?.content?.name}
             </Text>
             <Text
+              theme={theme}
               numberOfLines={5}
               style={[
                 styles.detailedDesc,
@@ -234,7 +235,7 @@ export const WatchLater: React.FC<WatchLaterProps> = ({
           onBackPress={onBackPress}
           title={title}
           titleAlign="left"
-          theme={appliedTheme}
+          theme={theme}
           titleStyle={{
             ...(titleStyle ? StyleSheet.flatten(titleStyle) : {}),
             color: appliedTheme.colors.onBackground,

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

@@ -6,15 +6,15 @@ import React, { useState } from 'react';
 import { Image, StyleSheet, View } from 'react-native';
 import SkeletonPlaceholder from 'react-native-skeleton-placeholder';
 import { scale } from 'react-native-size-matters';
-import { useTheme } from '../../../theme/hook/useTheme';
-import type { AppTheme } from '../../../theme/themes';
+import { useInternalTheme } from '../../../theme/hook/useInternalTheme';
+import type { ThemeOverride } from '../../../theme/themes';
 
 const fallbackAvatar = require('../../../assets/img/profile.jpg');
 
 type UserAvatarProps = {
   avatarUri?: string;
   size?: number;
-  theme?: AppTheme;
+  theme?: ThemeOverride;
 };
 
 const UserAvatar: React.FC<UserAvatarProps> = ({
@@ -22,14 +22,23 @@ const UserAvatar: React.FC<UserAvatarProps> = ({
   size = scale(80),
   theme,
 }) => {
+  const { theme: appliedTheme } = useInternalTheme(theme);
   const [imageError, setImageError] = useState(false);
   const [loading, setLoading] = useState(!!avatarUri);
-  const { theme: appliedTheme } = useTheme(theme);
+
   const borderColor = appliedTheme.colors.primary || '#ccc';
   const skeletonBaseColor = appliedTheme.colors.skeletonBaseColor || '#E0E0E0';
   const skeletonHighlightColor =
     appliedTheme.colors.skeletonHighlightColor || '#F5F5F5';
 
+  const handleError = () => {
+    setImageError(true);
+    setLoading(false);
+  };
+
+  const handleLoadStart = () => setLoading(true);
+  const handleLoadEnd = () => setLoading(false);
+
   return (
     <View style={styles(size).wrapper}>
       {loading && (
@@ -49,12 +58,9 @@ const UserAvatar: React.FC<UserAvatarProps> = ({
       <Image
         source={imageError || !avatarUri ? fallbackAvatar : { uri: avatarUri }}
         style={[styles(size).avatar, { borderColor, position: 'absolute' }]}
-        onError={() => {
-          setImageError(true);
-          setLoading(false);
-        }}
-        onLoadStart={() => setLoading(true)}
-        onLoadEnd={() => setLoading(false)}
+        onError={handleError}
+        onLoadStart={handleLoadStart}
+        onLoadEnd={handleLoadEnd}
       />
     </View>
   );

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

@@ -9,8 +9,8 @@ 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/hook/useTheme';
-import type { AppTheme } from '../../../theme/themes';
+import { useInternalTheme } from '../../../theme/hook/useInternalTheme';
+import type { ThemeOverride } from '../../../theme/themes';
 import { RFValue } from 'react-native-responsive-fontsize';
 
 export interface UserInfo {
@@ -29,7 +29,7 @@ interface UserSectionProps {
   userInfo: UserInfo;
   isLoading?: boolean;
   renderUserInfo?: (userInfo: UserInfo) => React.ReactNode;
-  theme?: AppTheme;
+  theme?: ThemeOverride;
   avatarComponent?: React.ReactNode;
   skeletonProps?: Partial<React.ComponentProps<typeof SkeletonPlaceholder>>;
   userInfoTextStyle?: UserInfoTextStyle;
@@ -44,7 +44,7 @@ const UserSection: React.FC<UserSectionProps> = ({
   skeletonProps = {},
   userInfoTextStyle = {},
 }) => {
-  const { theme: appliedTheme } = useTheme(theme);
+  const { theme: appliedTheme } = useInternalTheme(theme);
   if (!userInfo) return null;
   if (renderUserInfo) return renderUserInfo(userInfo);
 
@@ -72,7 +72,7 @@ const UserSection: React.FC<UserSectionProps> = ({
       <View style={styles.avatarWrapper}>
         {avatarComponent ?? (
           <>
-            <UserAvatar avatarUri={userInfo.avatarUri} theme={appliedTheme} />
+            <UserAvatar avatarUri={userInfo.avatarUri} theme={theme} />
             {userInfo.onEditPress && (
               <Pressable
                 onPress={userInfo.onEditPress}

package/src/components/View/View.tsx

@@ -6,11 +6,12 @@ import React from 'react';
 import {
   View as RNView,
   type ViewProps as RNViewProps,
+  type StyleProp,
   type ViewStyle,
 } from 'react-native';
 
 export type ViewProps = RNViewProps & {
-  style?: ViewStyle;
+  style?: StyleProp<ViewStyle> | undefined;
   backgroundColor?: string;
 };
 

package/src/components/common/AppStatusBar.tsx

@@ -0,0 +1,51 @@
+/**
+ * @author Naresh Dhamu
+ * @lastModified Wed 22 Oct 2025 at 11:22 AM
+ */
+
+import React, { useMemo } from 'react';
+import { StatusBar, Platform, type StatusBarStyle } from 'react-native';
+import Color from 'color';
+import type { ThemeOverride } from '../../theme/themes';
+import { useInternalTheme } from '../../theme/hook';
+
+type AppStatusBarProps = {
+  backgroundColor?: string;
+  barStyle?: StatusBarStyle;
+  translucent?: boolean;
+  hidden?: boolean;
+  theme?: ThemeOverride;
+};
+
+export const AppStatusBar: React.FC<AppStatusBarProps> = ({
+  backgroundColor,
+  barStyle,
+  translucent = true,
+  hidden = false,
+  theme: overrideTheme,
+}) => {
+  const { theme } = useInternalTheme(overrideTheme);
+
+  const resolvedBackground = useMemo(() => {
+    if (backgroundColor) return backgroundColor;
+    return theme.colors.background;
+  }, [backgroundColor, theme]);
+
+  // 🌗 Auto bar style
+  const resolvedBarStyle: StatusBarStyle = useMemo(() => {
+    if (barStyle) return barStyle;
+    const isDarkBg = Color(resolvedBackground).isDark();
+    return isDarkBg ? 'light-content' : 'dark-content';
+  }, [barStyle, resolvedBackground]);
+
+  return (
+    <StatusBar
+      translucent={translucent}
+      hidden={hidden}
+      barStyle={resolvedBarStyle}
+      backgroundColor={
+        Platform.OS === 'android' ? resolvedBackground : 'transparent'
+      }
+    />
+  );
+};

package/src/components/index.ts

@@ -3,7 +3,9 @@
  * @lastModified Sun 08 Jun 2025 at 03:23 PM
  */
 
-export * from './Button/PrimaryBtn';
+export * from './Button';
+export * from './Fallbacks';
+export * from './Input/Input';
 export * from './Loader/Loader';
 export * from './Headers';
 export * from './Content/Content';

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,43 @@
+/**
+ * @author Naresh Dhamu
+ * @lastModified Thu 12 Jun 2025 at 07:57 PM
+ */
+
+import { create } from 'zustand';
+import { persist, createJSONStorage } from 'zustand/middleware';
+import { MMKV } from 'react-native-mmkv';
+
+const storage = new MMKV();
+
+interface ThemeState {
+  isDarkMode: boolean;
+  themeMode: 'dark' | 'light' | 'system';
+  setIsDarkMode: (value: boolean) => void;
+  setTheme: (mode: 'dark' | 'light' | 'system') => void;
+}
+
+export const useInternalThemeStore = create(
+  persist<ThemeState>(
+    (set, _get) => ({
+      isDarkMode: false,
+      themeMode: 'system',
+
+      setIsDarkMode: (value: boolean) => {
+        const mode = value ? 'dark' : 'light';
+        set({ isDarkMode: value, themeMode: mode });
+      },
+
+      setTheme: (mode: 'dark' | 'light' | 'system') => {
+        set({ themeMode: mode, isDarkMode: mode === 'dark' });
+      },
+    }),
+    {
+      name: 'theme-storage',
+      storage: createJSONStorage(() => ({
+        getItem: (key: string) => storage.getString(key) ?? null,
+        setItem: (key: string, value: string) => storage.set(key, value),
+        removeItem: (key: string) => storage.delete(key),
+      })),
+    }
+  )
+);