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

package/src/components/Account/Account.tsx

@@ -11,7 +11,7 @@ import {
   type TextStyle,
 } from 'react-native';
 import { ChevronRight, Trash2 } from 'lucide-react-native';
-import { useTheme } from '../../theme/hook/useTheme';
+import { useInternalTheme } from '../../theme/hook/useInternalTheme';
 import { moderateScale, scale, verticalScale } from 'react-native-size-matters';
 import AppHeader from '../Headers/AppHeader';
 import SkeletonPlaceholder from 'react-native-skeleton-placeholder';
@@ -19,7 +19,7 @@ import UserSection from '../User/components/UserSection';
 import TextButton from '../Button/TextButton';
 import { Text } from '../Text';
 import { useSafeAreaInsets } from 'react-native-safe-area-context';
-import type { AppTheme, ITheme } from '../../theme/themes';
+import type { ThemeOverride, ITheme } from '../../theme/themes';
 import { RFValue } from 'react-native-responsive-fontsize';
 import { cloneElement, isValidElement, memo, type ReactElement } from 'react';
 
@@ -62,7 +62,7 @@ export type AccountProps = {
   renderUserInfo?: (userInfo: UserInfo) => React.ReactNode;
   sections: AccountSection[];
   onBackPress?: () => void;
-  theme?: AppTheme;
+  theme?: ThemeOverride;
   isLoading?: boolean;
   avatarComponent?: React.ReactNode;
   skeletonProps?: Partial<React.ComponentProps<typeof SkeletonPlaceholder>>;
@@ -118,7 +118,7 @@ export const Account: React.FC<AccountProps> = ({
   onHelpPress,
   onDeleteAccountPress,
 }) => {
-  const { theme: appliedTheme } = useTheme(theme);
+  const { theme: appliedTheme } = useInternalTheme(theme);
   const insets = useSafeAreaInsets();
 
   return (
@@ -128,7 +128,7 @@ export const Account: React.FC<AccountProps> = ({
         { backgroundColor: appliedTheme.colors.background },
       ]}
     >
-      <AppHeader onBackPress={onBackPress} title={title} theme={appliedTheme} />
+      <AppHeader onBackPress={onBackPress} title={title} theme={theme} />
 
       <ScrollView
         contentContainerStyle={[
@@ -139,7 +139,7 @@ export const Account: React.FC<AccountProps> = ({
         keyboardShouldPersistTaps="handled"
       >
         <UserSection
-          theme={appliedTheme}
+          theme={theme}
           userInfo={userInfo}
           avatarComponent={avatarComponent}
           isLoading={isLoading}

package/src/components/Alert/AlertDialog.tsx

@@ -0,0 +1,247 @@
+/**
+ * @author Naresh Dhamu
+ * @lastModified Sat 18 Oct 2025 at 06:45 PM
+ */
+import React, { useEffect, useRef } from 'react';
+import {
+  View,
+  TouchableOpacity,
+  StyleSheet,
+  Dimensions,
+  Modal,
+  Animated,
+  TouchableWithoutFeedback,
+} from 'react-native';
+import { Text } from '../Text';
+import { X } from 'lucide-react-native';
+import LottieView from 'lottie-react-native';
+import { useInternalTheme } from '../../theme/hook/useInternalTheme';
+import type { ThemeOverride } from '../../theme/themes';
+import { scale, verticalScale, moderateScale } from 'react-native-size-matters';
+import { RFValue } from 'react-native-responsive-fontsize';
+import { Button } from '../Button';
+
+const { width } = Dimensions.get('window');
+
+export interface AlertDialogProps {
+  visible: boolean;
+  type: 'success' | 'pending' | 'failed';
+  title: string;
+  buttonText?: string;
+  onPressButton?: () => void;
+  onClose?: () => void;
+  theme?: ThemeOverride;
+}
+
+export const AlertDialog: React.FC<AlertDialogProps> = ({
+  visible,
+  type = 'success',
+  title,
+  buttonText,
+  onPressButton,
+  onClose,
+  theme,
+}) => {
+  const { theme: appliedTheme } = useInternalTheme(theme);
+
+  const fadeAnim = useRef(new Animated.Value(0)).current;
+  const scaleAnim = useRef(new Animated.Value(0.85)).current;
+
+  useEffect(() => {
+    if (visible) {
+      Animated.parallel([
+        Animated.timing(fadeAnim, {
+          toValue: 1,
+          duration: 220,
+          useNativeDriver: true,
+        }),
+        Animated.spring(scaleAnim, {
+          toValue: 1,
+          friction: 7,
+          tension: 90,
+          useNativeDriver: true,
+        }),
+      ]).start();
+    } else {
+      Animated.parallel([
+        Animated.timing(fadeAnim, {
+          toValue: 0,
+          duration: 180,
+          useNativeDriver: true,
+        }),
+        Animated.timing(scaleAnim, {
+          toValue: 0.85,
+          duration: 180,
+          useNativeDriver: true,
+        }),
+      ]).start();
+    }
+  }, [fadeAnim, scaleAnim, visible]);
+
+  const animationMap = {
+    success: require('../../assets/animations/Successful.json'),
+    pending: require('../../assets/animations/Pending.json'),
+    failed: require('../../assets/animations/Failed.json'),
+  };
+
+  const defaultTitles = {
+    success: 'Account successfully created!',
+    pending: 'Please wait... Processing',
+    failed: 'Something went wrong!',
+  };
+
+  const defaultButtonText = {
+    success: 'Go to Home',
+    pending: 'Please Wait...',
+    failed: 'Try Again',
+  };
+
+  return (
+    <Modal
+      transparent
+      visible={visible}
+      animationType="none"
+      onRequestClose={onClose}
+    >
+      <Animated.View
+        style={[
+          styles.backdrop,
+          { backgroundColor: appliedTheme.colors.shadow },
+        ]}
+      >
+        <TouchableWithoutFeedback onPress={onClose}>
+          <View style={StyleSheet.absoluteFillObject} />
+        </TouchableWithoutFeedback>
+
+        <Animated.View
+          style={[
+            styles.centerContainer,
+            { opacity: fadeAnim, transform: [{ scale: scaleAnim }] },
+          ]}
+        >
+          <View
+            style={[
+              styles.dialogBox,
+              {
+                backgroundColor: appliedTheme.colors.surface,
+                shadowColor: appliedTheme.colors.shadow,
+              },
+            ]}
+          >
+            {/* Close Button */}
+            <TouchableOpacity
+              style={[
+                styles.closeButton,
+                { backgroundColor: appliedTheme.colors.background },
+              ]}
+              onPress={onClose}
+              activeOpacity={0.7}
+            >
+              <X
+                color={appliedTheme.colors.textPrimary}
+                size={scale(18)}
+                strokeWidth={2}
+              />
+            </TouchableOpacity>
+
+            {/* Content Wrapper */}
+            <View style={styles.contentWrapper}>
+              {/* Animation */}
+              <View style={styles.lottieStyle}>
+                <LottieView
+                  source={animationMap[type]}
+                  autoPlay
+                  loop={type === 'pending'}
+                  style={{ width: 500, height: 500, padding: 0 }}
+                />
+              </View>
+
+              {/* Title */}
+              <Text
+                style={[
+                  styles.titleText,
+                  { color: appliedTheme.colors.textPrimary },
+                ]}
+              >
+                {title || defaultTitles[type]}
+              </Text>
+            </View>
+
+            {/* Button fixed at bottom */}
+            <Button.Primary
+              title={buttonText || defaultButtonText[type]}
+              onPress={onPressButton}
+              disabled={type === 'pending'}
+              containerStyle={styles.bottomButton}
+            />
+          </View>
+        </Animated.View>
+      </Animated.View>
+    </Modal>
+  );
+};
+
+export default AlertDialog;
+const styles = StyleSheet.create({
+  backdrop: {
+    flex: 1,
+    zIndex: 10,
+    backgroundColor: 'rgba(0,0,0,0.5)',
+    justifyContent: 'center',
+    alignItems: 'center',
+    overflow: 'hidden',
+    paddingHorizontal: scale(15),
+  },
+  centerContainer: {
+    justifyContent: 'center',
+    alignItems: 'center',
+  },
+  dialogBox: {
+    width: width * 0.85,
+    borderRadius: moderateScale(16),
+    paddingTop: verticalScale(20),
+    paddingBottom: verticalScale(15),
+    paddingHorizontal: scale(20),
+    shadowOpacity: 0.25,
+    shadowRadius: moderateScale(8),
+    shadowOffset: { width: 0, height: 3 },
+    elevation: 8,
+    minHeight: verticalScale(250),
+    justifyContent: 'flex-start',
+  },
+  closeButton: {
+    position: 'absolute',
+    top: verticalScale(8),
+    right: scale(8),
+    width: scale(28),
+    height: scale(28),
+    borderRadius: scale(14),
+    justifyContent: 'center',
+    alignItems: 'center',
+    zIndex: 10,
+    elevation: 6,
+  },
+  contentWrapper: {
+    alignItems: 'center',
+    marginBottom: verticalScale(50),
+  },
+  lottieStyle: {
+    width: scale(150),
+    height: scale(150),
+    justifyContent: 'center',
+    alignItems: 'center',
+    marginBottom: verticalScale(10),
+  },
+  titleText: {
+    fontSize: RFValue(15),
+    fontWeight: '600',
+    textAlign: 'center',
+    lineHeight: RFValue(20),
+  },
+  bottomButton: {
+    position: 'absolute',
+    bottom: verticalScale(15),
+    left: scale(15),
+    right: scale(15),
+  },
+});

package/src/components/Alert/UAAlert.tsx

@@ -1,10 +1,11 @@
 import React from 'react';
 import { Modal, Text, View, TouchableOpacity, StyleSheet } from 'react-native';
 import { scale } from 'react-native-size-matters';
-import type { AppTheme } from '../../theme';
+import type { ThemeOverride } from '../../theme/themes';
+import { useInternalTheme } from '../../theme/hook';
 
 interface IProps {
-  theme: AppTheme;
+  theme?: ThemeOverride;
   visible: boolean;
   title?: string;
   message?: string;
@@ -16,7 +17,7 @@ interface IProps {
 }
 
 export const UAAlert: React.FC<IProps> = ({
-  theme,
+  theme: themeOverride,
   visible,
   title = 'Maturity Rating: 18+',
   message = 'May contain non-explicit sexual behavior, nudity, violence, strong language, substances.',
@@ -26,6 +27,7 @@ export const UAAlert: React.FC<IProps> = ({
   onPress,
   onRequestClose,
 }): React.ReactElement => {
+  const { theme } = useInternalTheme(themeOverride);
   return (
     <Modal
       animationType="fade"

package/src/components/Alert/index.ts

@@ -1 +1,2 @@
 export * from './UAAlert';
+export * from './AlertDialog';

package/src/components/Auth/AuthProvider/AuthProvider.tsx

@@ -0,0 +1,294 @@
+/**
+ * @author Naresh Dhamu
+ * @lastModified Tue 22 Oct 2025
+ */
+import React, { useEffect, useRef, useState } from 'react';
+import {
+  View,
+  StyleSheet,
+  SafeAreaView,
+  TouchableOpacity,
+  Animated,
+  Platform,
+} from 'react-native';
+import { moderateScale, scale, verticalScale } from 'react-native-size-matters';
+import { useInternalTheme } from '../../../theme/hook/useInternalTheme';
+import { type ThemeOverride } from '../../../theme/themes';
+import { Logo } from '../../Logo/Logo';
+import { Text } from '../../Text';
+import { BackgroundLayout } from '../../BackgroundLayout/BackgroundLayout';
+import { Phone, Mail } from 'lucide-react-native';
+import { Button } from '../../Button';
+
+export interface AuthProviderProps {
+  logoUri: string;
+  title: string;
+  description?: string;
+  backgroundImage?: {
+    source: string | null;
+    gradientSplitBackground?: number;
+    resizeMode?: 'cover' | 'contain' | 'stretch' | 'repeat';
+  };
+  text?: {
+    loginWithPhone?: string;
+    loginWithEmail?: string;
+  };
+  variant?: 'one' | 'two';
+  theme?: ThemeOverride;
+  authProvider?: {
+    phone?: {
+      enabled?: boolean;
+      onPress?: () => void;
+    };
+    email?: {
+      enabled?: boolean;
+      onPress?: () => void;
+    };
+  };
+}
+
+const AuthProvider: React.FC<AuthProviderProps> = ({
+  title = 'Your Favourite OTT Platform',
+  description,
+  backgroundImage,
+  logoUri,
+  text,
+  variant = 'one',
+  theme: overrideTheme,
+  authProvider = {
+    phone: { enabled: true },
+    email: { enabled: true },
+  },
+}) => {
+  const { theme: resolvedTheme } = useInternalTheme(overrideTheme);
+  const { colors } = resolvedTheme;
+
+  const phoneEnabled = !!authProvider.phone?.enabled;
+  const emailEnabled = !!authProvider.email?.enabled;
+
+  const [activeTab, setActiveTab] = useState<'phone' | 'email'>(
+    phoneEnabled ? 'phone' : 'email'
+  );
+
+  const slideAnim = useRef(new Animated.Value(80)).current;
+  const opacityAnim = useRef(new Animated.Value(0)).current;
+
+  useEffect(() => {
+    setActiveTab(phoneEnabled ? 'phone' : 'email');
+
+    Animated.parallel([
+      Animated.timing(slideAnim, {
+        toValue: 0,
+        duration: 600,
+        useNativeDriver: true,
+      }),
+      Animated.timing(opacityAnim, {
+        toValue: 1,
+        duration: 600,
+        useNativeDriver: true,
+      }),
+    ]).start();
+  }, [phoneEnabled, emailEnabled, slideAnim, opacityAnim]);
+
+  const triggerEvent = (type: 'phone' | 'email') => {
+    if (type === 'phone') authProvider.phone?.onPress?.();
+    else authProvider.email?.onPress?.();
+  };
+
+  const handlePress = (type: 'phone' | 'email') => {
+    if (activeTab !== type) setActiveTab(type);
+    setTimeout(() => triggerEvent(type), 100);
+  };
+
+  const authMethods: {
+    key: 'phone' | 'email';
+    label: string;
+    icon: React.ReactNode;
+    enabled: boolean;
+  }[] = [
+    {
+      key: 'phone',
+      label: text?.loginWithPhone || 'Phone',
+      icon: <Phone size={moderateScale(16)} />,
+      enabled: phoneEnabled,
+    },
+    {
+      key: 'email',
+      label: text?.loginWithEmail || 'Email',
+      icon: <Mail size={moderateScale(16)} />,
+      enabled: emailEnabled,
+    },
+  ];
+
+  const renderButtons = () => (
+    <View style={styles.buttonContainer}>
+      {authMethods
+        .filter((item) => item.enabled)
+        .map((item) => (
+          <Button.Secondary
+            key={item.key}
+            containerStyle={{
+              backgroundColor:
+                activeTab === item.key ? colors.button : 'transparent',
+              borderWidth: 1.2,
+              borderColor: colors.button,
+            }}
+            titleStyle={{
+              color:
+                activeTab === item.key ? colors.buttonText : colors.textPrimary,
+            }}
+            title={`Continue with ${item.label}`}
+            onPress={() => handlePress(item.key)}
+            leftIcon={React.cloneElement(item.icon as any, {
+              color:
+                activeTab === item.key ? colors.buttonText : colors.textPrimary,
+              size: moderateScale(18),
+            })}
+          />
+        ))}
+    </View>
+  );
+
+  // Toggle render without absolute
+  const renderToggle = () => {
+    const enabledMethods = authMethods.filter((m) => m.enabled);
+    return (
+      <View
+        style={[
+          styles.toggleWrapper,
+          {
+            backgroundColor: colors.surfaceVariant,
+            borderColor: colors.border,
+          },
+        ]}
+      >
+        {enabledMethods.map((item) => {
+          const isActive = activeTab === item.key;
+          return (
+            <TouchableOpacity
+              key={item.key}
+              style={[
+                styles.toggleHalf,
+                { backgroundColor: isActive ? colors.primary : 'transparent' },
+              ]}
+              onPress={() => handlePress(item.key)}
+              activeOpacity={0.8}
+            >
+              <View style={styles.iconTextRow}>
+                {React.cloneElement(item.icon as any, {
+                  color: isActive ? colors.buttonText : colors.textPrimary,
+                })}
+                <Text
+                  style={[
+                    styles.toggleText,
+                    {
+                      color: isActive ? colors.buttonText : colors.textPrimary,
+                    },
+                  ]}
+                >
+                  {item.label}
+                </Text>
+              </View>
+            </TouchableOpacity>
+          );
+        })}
+      </View>
+    );
+  };
+
+  return (
+    <BackgroundLayout
+      backgroundImage={backgroundImage?.source}
+      theme={overrideTheme}
+      gradientSplitBackground={backgroundImage?.gradientSplitBackground ?? 0.35}
+      resizeMode={backgroundImage?.resizeMode ?? 'cover'}
+    >
+      <SafeAreaView style={styles.safeArea}>
+        <View style={styles.container}>
+          <View style={styles.logoWrapper}>
+            <Logo logoUri={logoUri} />
+          </View>
+
+          <View style={styles.bottomSection}>
+            <Text style={[styles.title, { color: colors.textPrimary }]}>
+              {title}
+            </Text>
+            <Text
+              style={[styles.description, { color: colors.textSecondary }]}
+              numberOfLines={2}
+              adjustsFontSizeToFit
+            >
+              {description}
+            </Text>
+
+            <Animated.View
+              style={{
+                transform: [{ translateY: slideAnim }],
+                opacity: opacityAnim,
+                width: '100%',
+              }}
+            >
+              {variant === 'one' ? renderButtons() : renderToggle()}
+            </Animated.View>
+          </View>
+        </View>
+      </SafeAreaView>
+    </BackgroundLayout>
+  );
+};
+
+export default AuthProvider;
+
+const styles = StyleSheet.create({
+  safeArea: { flex: 1, width: '100%' },
+  container: {
+    flex: 1,
+    justifyContent: 'space-between',
+    alignItems: 'center',
+    width: '100%',
+    paddingHorizontal: scale(18),
+    paddingVertical: verticalScale(20),
+  },
+  logoWrapper: {
+    flex: 1,
+    justifyContent: 'center',
+    alignItems: 'center',
+  },
+  bottomSection: {
+    width: '100%',
+    alignItems: 'center',
+    paddingBottom: verticalScale(Platform.OS === 'ios' ? 40 : 30),
+  },
+  title: {
+    fontSize: moderateScale(18),
+    fontWeight: '700',
+    textAlign: 'center',
+    marginBottom: verticalScale(12),
+  },
+  description: {
+    fontSize: moderateScale(14),
+    textAlign: 'center',
+    width: '90%',
+    marginBottom: verticalScale(30),
+  },
+  buttonContainer: { width: '100%', gap: verticalScale(10) },
+  toggleWrapper: {
+    flexDirection: 'row',
+    height: verticalScale(48),
+    borderRadius: 50,
+    borderWidth: scale(0.5),
+    padding: scale(4),
+    overflow: 'hidden',
+    alignItems: 'center',
+    width: '100%',
+  },
+  toggleHalf: {
+    flex: 1,
+    borderRadius: scale(50),
+    height: '100%',
+    justifyContent: 'center',
+    alignItems: 'center',
+  },
+  toggleText: { fontSize: moderateScale(14), fontWeight: '600' },
+  iconTextRow: { flexDirection: 'row', alignItems: 'center', gap: scale(6) },
+});

package/src/components/Auth/ForgotPassword/ForgotPassword.tsx

@@ -17,13 +17,12 @@ import { Input } from '../../Input/Input';
 import { Button } from '../../Button';
 import { BackgroundLayout } from '../../BackgroundLayout/BackgroundLayout';
 import { Logo } from '../../Logo/Logo';
-import { useTheme } from '../../../theme/hook/useTheme';
 import { useKeyboard } from '../../../hooks/useKeyboard';
 import HideKeyboard from '../../Keyboard/HideKeyboard';
 import BackBtn from '../../Button/BackBtn';
 import { Text } from '../../Text';
-import type { AppTheme } from '../../../theme/themes';
 import { RFValue } from 'react-native-responsive-fontsize';
+import type { ThemeOverride } from '../../../theme/themes';
 
 type FormValues = {
   email: string;
@@ -54,7 +53,7 @@ type ForgetPasswordProps = {
     resizeMode?: 'cover' | 'contain' | 'stretch' | 'repeat';
   };
   logoUri?: string;
-  theme?: AppTheme;
+  theme?: ThemeOverride;
   loadingSubmitBtn?: boolean;
   text?: TextConfig;
   renderLogo?: () => React.ReactNode;
@@ -103,7 +102,6 @@ const ForgetPassword: React.FC<ForgetPasswordProps> = ({
     mode: 'onChange',
   });
 
-  const { theme: resolvedTheme } = useTheme(overrideTheme);
   const { isKeyboardOpen } = useKeyboard();
   const [isLoading, setIsLoading] = useState(false);
 
@@ -134,7 +132,7 @@ const ForgetPassword: React.FC<ForgetPasswordProps> = ({
   return (
     <BackgroundLayout
       backgroundImage={backgroundImage?.source}
-      theme={resolvedTheme}
+      theme={overrideTheme}
       gradientSplitBackground={
         isKeyboardOpen ? (Platform.OS === 'ios' ? 0.19 : 0.14) : 0.3
       }
@@ -149,7 +147,7 @@ const ForgetPassword: React.FC<ForgetPasswordProps> = ({
               })
             ) : (
               <BackBtn
-                theme={resolvedTheme}
+                theme={overrideTheme}
                 style={topBackBtnStyle}
                 onPress={onTopBackBtnPress}
               />
@@ -205,7 +203,7 @@ const ForgetPassword: React.FC<ForgetPasswordProps> = ({
                     errorMessage={errors.email?.message}
                     inputStyle={inputStyle}
                     containerStyle={inputContainerStyle}
-                    theme={resolvedTheme}
+                    theme={overrideTheme}
                     textContentType="emailAddress"
                     autoCapitalize="none"
                     keyboardType="email-address"
@@ -225,7 +223,7 @@ const ForgetPassword: React.FC<ForgetPasswordProps> = ({
                 <Button.Primary
                   title={text.forgetPasswordButton || 'Continue'}
                   disabled={isSubmitDisabled || !isValid}
-                  theme={resolvedTheme}
+                  theme={overrideTheme}
                   loading={loadingSubmitBtn || isLoading}
                   loadingText={text.loadingSubmitBtnText || 'Please wait...'}
                   onPress={handleSubmit(handleFormSubmit)}