@zezosoft/zezo-ott-react-native-ui-kit 1.0.2 → 1.0.3

package/src/components/ContentView/components/Title.tsx

@@ -4,7 +4,13 @@
  */
 
 import React from 'react';
-import { View, StyleSheet, type StyleProp, type ViewStyle, type TextStyle } from 'react-native';
+import {
+  View,
+  StyleSheet,
+  type StyleProp,
+  type ViewStyle,
+  type TextStyle,
+} from 'react-native';
 import SkeletonPlaceholder from 'react-native-skeleton-placeholder';
 import { scale } from 'react-native-size-matters';
 import { Text } from '../../Text';
@@ -26,7 +32,14 @@ type Props = {
   };
 };
 
-export const Title = ({ title, subtitle, rating, theme, isLoading = false, style }: Props): React.ReactElement => {
+export const Title = ({
+  title,
+  subtitle,
+  rating,
+  theme,
+  isLoading = false,
+  style,
+}: Props): React.ReactElement => {
   if (isLoading) {
     return (
       <View style={StyleSheet.flatten([styles.container, style?.container])}>
@@ -37,7 +50,11 @@ export const Title = ({ title, subtitle, rating, theme, isLoading = false, style
           <SkeletonPlaceholder.Item>
             {/* Title & Subtitle */}
             <SkeletonPlaceholder.Item flexDirection="row" alignItems="center">
-              <SkeletonPlaceholder.Item width={scale(160)} height={scale(22)} borderRadius={scale(4)} />
+              <SkeletonPlaceholder.Item
+                width={scale(160)}
+                height={scale(22)}
+                borderRadius={scale(4)}
+              />
               <SkeletonPlaceholder.Item
                 width={scale(60)}
                 height={scale(22)}
@@ -84,7 +101,10 @@ export const Title = ({ title, subtitle, rating, theme, isLoading = false, style
       </View>
 
       {!!rating && (
-        <Text color={theme.colors.textSecondary} style={StyleSheet.flatten([styles.rating, style?.rating])}>
+        <Text
+          color={theme.colors.textSecondary}
+          style={StyleSheet.flatten([styles.rating, style?.rating])}
+        >
           ⭐ {rating}
         </Text>
       )}
@@ -95,27 +115,27 @@ export const Title = ({ title, subtitle, rating, theme, isLoading = false, style
 const styles = StyleSheet.create({
   container: {
     paddingHorizontal: scale(12),
-    marginTop: scale(5)
+    marginTop: scale(5),
   },
   row: {
     flexDirection: 'row',
     alignItems: 'center',
-    maxWidth: '100%'
+    maxWidth: '100%',
   },
   title: {
     fontSize: RFValue(17),
     fontWeight: 'bold',
     flexShrink: 1,
-    maxWidth: '60%'
+    maxWidth: '60%',
   },
   subTitle: {
     fontSize: RFValue(17),
     marginLeft: scale(4),
     flexShrink: 1,
-    maxWidth: '40%'
+    maxWidth: '40%',
   },
   rating: {
     fontSize: RFValue(13),
-    marginTop: scale(4)
-  }
+    marginTop: scale(4),
+  },
 });

package/src/components/ContentView/components/TrailerButton.tsx

@@ -4,8 +4,13 @@
  */
 
 import { PlayCircle } from 'lucide-react-native';
-import React from 'react';
-import { TouchableOpacity, StyleSheet, type GestureResponderEvent, type TextStyle, type ViewStyle } from 'react-native';
+import {
+  TouchableOpacity,
+  StyleSheet,
+  type GestureResponderEvent,
+  type TextStyle,
+  type ViewStyle,
+} from 'react-native';
 import { scale, verticalScale, moderateScale } from 'react-native-size-matters';
 import { Text } from '../../Text';
 
@@ -26,10 +31,14 @@ export const TrailerButton = ({
   iconColor = '#000',
   backgroundColor = '#FFD700',
   textStyle,
-  style
+  style,
 }: Props) => {
   return (
-    <TouchableOpacity onPress={onPress} activeOpacity={0.8} style={[styles.button, { backgroundColor }, style]}>
+    <TouchableOpacity
+      onPress={onPress}
+      activeOpacity={0.8}
+      style={[styles.button, { backgroundColor }, style]}
+    >
       <PlayCircle size={iconSize} color={iconColor} />
       <Text style={[styles.text, textStyle]}> {label}</Text>
     </TouchableOpacity>
@@ -42,12 +51,12 @@ const styles = StyleSheet.create({
     paddingVertical: verticalScale(3),
     paddingHorizontal: scale(6),
     borderRadius: moderateScale(20),
-    alignItems: 'center'
+    alignItems: 'center',
   },
   text: {
     color: '#000',
     fontWeight: '600',
     fontSize: scale(12),
-    marginLeft: scale(2)
-  }
+    marginLeft: scale(2),
+  },
 });

package/src/components/Headers/AppHeader.tsx

@@ -3,7 +3,14 @@
  * @lastModified Sat 21 Jun 2025 at 02:52 PM
  */
 import React from 'react';
-import { View, StyleSheet, TouchableOpacity, type StyleProp, type ViewStyle, type TextStyle } from 'react-native';
+import {
+  View,
+  StyleSheet,
+  TouchableOpacity,
+  type StyleProp,
+  type ViewStyle,
+  type TextStyle,
+} from 'react-native';
 import { ArrowLeft } from 'lucide-react-native';
 import { useTheme } from '../../theme/hook/useTheme';
 import { scale, verticalScale } from 'react-native-size-matters';
@@ -30,28 +37,43 @@ const AppHeader: React.FC<AppHeaderProps> = ({
   style,
   titleStyle,
   titleAlign = 'center',
-  theme
+  theme,
 }) => {
   const { theme: appliedTheme } = useTheme(theme);
 
   return (
-    <View style={[styles.header, { backgroundColor: appliedTheme.colors.background }, style]}>
+    <View
+      style={[
+        styles.header,
+        { backgroundColor: appliedTheme.colors.background },
+        style,
+      ]}
+    >
       {/* Left icon */}
       {onBackPress && (
-        <TouchableOpacity onPress={onBackPress} activeOpacity={0.7} style={styles.iconButton}>
+        <TouchableOpacity
+          onPress={onBackPress}
+          activeOpacity={0.7}
+          style={styles.iconButton}
+        >
           <ArrowLeft size={scale(22)} color={appliedTheme.colors.textPrimary} />
         </TouchableOpacity>
       )}
 
       {/* Title */}
-      <View style={[styles.titleWrapper, titleAlign === 'center' ? styles.centered : styles.leftAligned]}>
+      <View
+        style={[
+          styles.titleWrapper,
+          titleAlign === 'center' ? styles.centered : styles.leftAligned,
+        ]}
+      >
         <Text
           numberOfLines={1}
           style={[
             { color: appliedTheme.colors.onBackground },
             !onBackPress && { ...titleStyle },
             titleStyle,
-            styles.title
+            styles.title,
           ]}
         >
           {title}
@@ -60,7 +82,11 @@ const AppHeader: React.FC<AppHeaderProps> = ({
 
       {/* Right icon */}
       {rightIcon ? (
-        <TouchableOpacity onPress={onRightPress} activeOpacity={0.7} style={styles.iconButton}>
+        <TouchableOpacity
+          onPress={onRightPress}
+          activeOpacity={0.7}
+          style={styles.iconButton}
+        >
           {rightIcon}
         </TouchableOpacity>
       ) : (
@@ -78,7 +104,7 @@ const styles = StyleSheet.create({
     paddingHorizontal: scale(12),
     paddingBottom: verticalScale(4),
     flexDirection: 'row',
-    alignItems: 'center'
+    alignItems: 'center',
   },
   iconButton: {
     width: scale(42),
@@ -87,22 +113,22 @@ const styles = StyleSheet.create({
     justifyContent: 'center',
     alignItems: 'center',
     overflow: 'hidden',
-    backgroundColor: 'transparent'
+    backgroundColor: 'transparent',
   },
   titleWrapper: {
     flex: 1,
-    justifyContent: 'center'
+    justifyContent: 'center',
   },
   centered: {
-    alignItems: 'center'
+    alignItems: 'center',
   },
   leftAligned: {
     alignItems: 'flex-start',
-    paddingLeft: scale(2)
+    paddingLeft: scale(2),
   },
   title: {
     fontSize: RFValue(14),
     textTransform: 'capitalize',
-    fontWeight: '500'
-  }
+    fontWeight: '500',
+  },
 });

package/src/components/Headers/One.tsx

@@ -9,7 +9,10 @@ import { scale, verticalScale } from 'react-native-size-matters';
 import { Logo } from '../Logo/Logo';
 import type { AppTheme } from '../../theme/themes';
 import { useTheme } from '../../theme/hook/useTheme';
-import { Menu as DefaultMenuIcon, Search as DefaultSearchIcon } from 'lucide-react-native';
+import {
+  Menu as DefaultMenuIcon,
+  Search as DefaultSearchIcon,
+} from 'lucide-react-native';
 
 export interface HeaderOneProps {
   theme?: AppTheme;
@@ -29,7 +32,7 @@ const HeaderOne: React.FC<HeaderOneProps> = ({
   onMenuPress,
 
   onSearchPress,
-  isLoading
+  isLoading,
 }) => {
   const { theme: appliedTheme } = useTheme(theme);
 
@@ -53,7 +56,10 @@ const HeaderOne: React.FC<HeaderOneProps> = ({
         <Pressable
           onPress={onMenuPress}
           android_ripple={{ color: rippleColor, borderless: true }}
-          style={({ pressed }) => [styles.iconPressable, pressed && { backgroundColor: pressedBackgroundColor }]}
+          style={({ pressed }) => [
+            styles.iconPressable,
+            pressed && { backgroundColor: pressedBackgroundColor },
+          ]}
         >
           {MemoMenuIcon}
         </Pressable>
@@ -72,7 +78,10 @@ const HeaderOne: React.FC<HeaderOneProps> = ({
       <Pressable
         onPress={onSearchPress}
         android_ripple={{ color: rippleColor, borderless: true }}
-        style={({ pressed }) => [styles.iconPressable, pressed && { backgroundColor: pressedBackgroundColor }]}
+        style={({ pressed }) => [
+          styles.iconPressable,
+          pressed && { backgroundColor: pressedBackgroundColor },
+        ]}
       >
         {MemoSearchIcon}
       </Pressable>
@@ -88,19 +97,19 @@ const styles = StyleSheet.create({
     justifyContent: 'space-between',
     alignItems: 'center',
     paddingHorizontal: scale(8),
-    height: verticalScale(40)
+    height: verticalScale(40),
   },
   leftContainer: {
     flexDirection: 'row',
     alignItems: 'center',
-    gap: scale(10)
+    gap: scale(10),
   },
   logo: {
     alignItems: 'center',
-    marginVertical: Platform.OS === 'ios' ? verticalScale(0) : verticalScale(5)
+    marginVertical: Platform.OS === 'ios' ? verticalScale(0) : verticalScale(5),
   },
   iconPressable: {
     padding: scale(6),
-    borderRadius: scale(20)
-  }
+    borderRadius: scale(20),
+  },
 });

package/src/components/Headers/Three.tsx

@@ -16,13 +16,28 @@ export interface HeaderThreeProps {
   isLoading?: boolean;
 }
 
-const HeaderThree: React.FC<HeaderThreeProps> = ({ logoUri, category, theme, isLoading }) => {
+const HeaderThree: React.FC<HeaderThreeProps> = ({
+  logoUri,
+  category,
+  theme,
+  isLoading,
+}) => {
   const { theme: appliedTheme } = useTheme(theme);
   return (
-    <View style={[styles.headerContainer, { backgroundColor: appliedTheme.colors.background }]}>
+    <View
+      style={[
+        styles.headerContainer,
+        { backgroundColor: appliedTheme.colors.background },
+      ]}
+    >
       <View style={styles.leftContainer}>
         <View style={styles.logo}>
-          <Logo width={scale(55)} height={scale(50)} logoUri={logoUri} isLoading={isLoading} />
+          <Logo
+            width={scale(55)}
+            height={scale(50)}
+            logoUri={logoUri}
+            isLoading={isLoading}
+          />
         </View>
         {category || null}
       </View>
@@ -38,16 +53,16 @@ const styles = StyleSheet.create({
     justifyContent: 'space-between',
     alignItems: 'center',
     paddingHorizontal: scale(8),
-    height: verticalScale(40)
+    height: verticalScale(40),
   },
 
   leftContainer: {
     flexDirection: 'row',
     alignItems: 'center',
-    gap: scale(10)
+    gap: scale(10),
   },
   logo: {
     alignItems: 'center',
-    marginVertical: Platform.OS === 'ios' ? verticalScale(0) : verticalScale(5)
-  }
+    marginVertical: Platform.OS === 'ios' ? verticalScale(0) : verticalScale(5),
+  },
 });

package/src/components/Headers/Two.tsx

@@ -6,10 +6,9 @@ import React from 'react';
 import { Platform, Pressable, StyleSheet, View } from 'react-native';
 import { scale, verticalScale } from 'react-native-size-matters';
 import { Logo } from '../Logo/Logo';
-import DefaultIcons from '../Icons/NewIndex';
 import type { AppTheme } from '../../theme/themes';
 import { useTheme } from '../../theme/hook/useTheme';
-
+import { Menu } from 'lucide-react-native';
 export interface HeaderTwoProps {
   theme?: AppTheme;
   logoUri: string;
@@ -18,11 +17,15 @@ export interface HeaderTwoProps {
   isLoading?: boolean;
 }
 
-const HeaderTwo: React.FC<HeaderTwoProps> = ({ theme, logoUri, MenuIcon, onMenuPress, isLoading }) => {
+const HeaderTwo: React.FC<HeaderTwoProps> = ({
+  theme,
+  logoUri,
+  MenuIcon = Menu,
+  onMenuPress,
+  isLoading,
+}) => {
   const { theme: appliedTheme } = useTheme(theme);
 
-  const Menu = MenuIcon || DefaultIcons.MenuBar;
-
   const rippleColor = appliedTheme.colors.surfaceVariant + '33';
   const pressedBackgroundColor = appliedTheme.colors.backdrop;
 
@@ -31,12 +34,20 @@ const HeaderTwo: React.FC<HeaderTwoProps> = ({ theme, logoUri, MenuIcon, onMenuP
       <Pressable
         onPress={onMenuPress}
         android_ripple={{ color: rippleColor, borderless: true }}
-        style={({ pressed }) => [styles.iconPressable, pressed && { backgroundColor: pressedBackgroundColor }]}
+        style={({ pressed }) => [
+          styles.iconPressable,
+          pressed && { backgroundColor: pressedBackgroundColor },
+        ]}
       >
-        <Menu width={scale(28)} height={scale(28)} />
+        <MenuIcon width={scale(28)} height={scale(28)} />
       </Pressable>
       <View style={styles.logo}>
-        <Logo width={scale(100)} height={scale(80)} logoUri={logoUri} isLoading={isLoading} />
+        <Logo
+          width={scale(100)}
+          height={scale(80)}
+          logoUri={logoUri}
+          isLoading={isLoading}
+        />
       </View>
       <View style={styles.placeholder} />
     </View>
@@ -51,18 +62,18 @@ const styles = StyleSheet.create({
     justifyContent: 'space-between',
     alignItems: 'center',
     paddingHorizontal: scale(8),
-    height: verticalScale(40)
+    height: verticalScale(40),
   },
   logo: {
     flex: 1,
     alignItems: 'center',
-    marginVertical: Platform.OS === 'ios' ? verticalScale(0) : verticalScale(5)
+    marginVertical: Platform.OS === 'ios' ? verticalScale(0) : verticalScale(5),
   },
   iconPressable: {
     padding: scale(6),
-    borderRadius: scale(20)
+    borderRadius: scale(20),
   },
   placeholder: {
-    width: scale(28 + 12)
-  }
+    width: scale(28 + 12),
+  },
 });

package/src/components/Headers/index.ts

@@ -10,7 +10,7 @@ import HeaderTwo from './Two';
 const Header = {
   One: HeaderOne,
   Two: HeaderTwo,
-  Three: HeaderThree
+  Three: HeaderThree,
 };
 
 export { Header };

package/src/components/Input/Input.ts

@@ -10,7 +10,7 @@ import PhoneNumberInputOne from './PhoneNumberInput';
 const Input = {
   One: InputOne,
   Two: InputTwo,
-  Phone: PhoneNumberInputOne
+  Phone: PhoneNumberInputOne,
 };
 
 export { Input };

package/src/components/Input/InputOne.tsx

@@ -11,7 +11,7 @@ import {
   TouchableOpacity,
   type ViewStyle,
   type TextInputProps,
-  type TextStyle
+  type TextStyle,
 } from 'react-native';
 import { Eye, EyeOff } from 'lucide-react-native';
 import { scale, verticalScale, moderateScale } from 'react-native-size-matters';
@@ -55,19 +55,28 @@ const InputOne: React.FC<InputOneProps> = ({
     outline,
     outlineDisabled,
     error: inputErrorColor,
-    background
+    background,
   } = appliedTheme?.colors || {};
 
   return (
     <View style={[styles.container, containerStyle]}>
       {label && (
-        <View style={[styles.labelContainer, { backgroundColor: background, borderRadius: scale(5) }]}>
+        <View
+          style={[
+            styles.labelContainer,
+            { backgroundColor: background, borderRadius: scale(5) },
+          ]}
+        >
           <Text
             style={[
               styles.label,
               {
-                color: error ? inputErrorColor : disabled ? textDisabled : textPrimary
-              }
+                color: error
+                  ? inputErrorColor
+                  : disabled
+                    ? textDisabled
+                    : textPrimary,
+              },
             ]}
           >
             {label}
@@ -80,44 +89,81 @@ const InputOne: React.FC<InputOneProps> = ({
           styles.inputWrapper,
 
           {
-            borderColor: disabled ? outlineDisabled : error ? inputErrorColor : outline,
+            borderColor: disabled
+              ? outlineDisabled
+              : error
+                ? inputErrorColor
+                : outline,
             backgroundColor: disabled
               ? appliedTheme.colors.backgroundDisabled
               : error
                 ? appliedTheme.colors.errorContainer
                 : appliedTheme.colors.background,
             flexDirection: 'row',
-            alignItems: 'center'
-          }
+            alignItems: 'center',
+          },
         ]}
       >
         <TextInput
           {...props}
           editable={!disabled}
-          placeholderTextColor={placeholderTextColor || (disabled ? textDisabled : textSecondary)}
+          placeholderTextColor={
+            placeholderTextColor || (disabled ? textDisabled : textSecondary)
+          }
           secureTextEntry={inputSecure}
-          textContentType={isPasswordField ? 'oneTimeCode' : props.textContentType || 'none'}
+          textContentType={
+            isPasswordField ? 'oneTimeCode' : props.textContentType || 'none'
+          }
           style={[
             styles.input,
             {
-              color: disabled ? textDisabled : error ? inputErrorColor : textPrimary
+              color: disabled
+                ? textDisabled
+                : error
+                  ? inputErrorColor
+                  : textPrimary,
             },
-            inputStyle
+            inputStyle,
           ]}
         />
 
         {isPasswordField && (
-          <TouchableOpacity onPress={() => setShowPassword((prev) => !prev)} disabled={disabled}>
+          <TouchableOpacity
+            onPress={() => setShowPassword((prev) => !prev)}
+            disabled={disabled}
+          >
             {showPassword ? (
-              <EyeOff size={scale(20)} color={disabled ? textDisabled : error ? inputErrorColor : textPrimary} />
+              <EyeOff
+                size={scale(20)}
+                color={
+                  disabled
+                    ? textDisabled
+                    : error
+                      ? inputErrorColor
+                      : textPrimary
+                }
+              />
             ) : (
-              <Eye size={scale(20)} color={disabled ? textDisabled : error ? inputErrorColor : textPrimary} />
+              <Eye
+                size={scale(20)}
+                color={
+                  disabled
+                    ? textDisabled
+                    : error
+                      ? inputErrorColor
+                      : textPrimary
+                }
+              />
             )}
           </TouchableOpacity>
         )}
       </View>
 
-      {error && errorMessage && <Text style={[styles.errorText, { color: inputErrorColor }]}>{errorMessage}</Text>}
+      {error && errorMessage && (
+        <Text style={[styles.errorText, { color: inputErrorColor }]}>
+          {errorMessage}
+        </Text>
+      )}
     </View>
   );
 };
@@ -127,36 +173,36 @@ export default InputOne;
 const styles = StyleSheet.create({
   container: {
     width: '100%',
-    marginBottom: verticalScale(10)
+    marginBottom: verticalScale(10),
   },
   labelContainer: {
     position: 'absolute',
     top: -9,
     left: scale(12),
     zIndex: 1,
-    paddingHorizontal: scale(4)
+    paddingHorizontal: scale(4),
   },
   label: {
     fontSize: RFValue(10),
     fontWeight: '500',
-    backgroundColor: 'transparent'
+    backgroundColor: 'transparent',
   },
   inputWrapper: {
     width: '100%',
     borderWidth: scale(1),
     borderRadius: moderateScale(10),
     paddingHorizontal: scale(10),
-    paddingVertical: verticalScale(6)
+    paddingVertical: verticalScale(6),
   },
   input: {
     flex: 1,
     width: '100%',
     fontSize: RFValue(14),
-    minHeight: verticalScale(30)
+    minHeight: verticalScale(30),
   },
   errorText: {
     fontSize: RFValue(10),
     marginTop: verticalScale(4),
-    marginLeft: scale(8)
-  }
+    marginLeft: scale(8),
+  },
 });