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

package/src/components/Headers/One.tsx

@@ -1,14 +1,15 @@
 /**
  * @author Naresh Dhamu
- * @lastModified Mon 09 Jun 2025 at 03:11 PM
+ * @lastModified Wed 25 Jun 2025 at 01:30 PM
  */
-import React from 'react';
+
+import React, { useMemo } 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 { useAppTheme } from '../../theme/useAppTheme'; // यहाँ import करें
+import { useTheme } from '../../theme/hook/useTheme';
+import { Menu as DefaultMenuIcon, Search as DefaultSearchIcon } from 'lucide-react-native';
 
 export interface HeaderOneProps {
   theme?: AppTheme;
@@ -17,25 +18,34 @@ export interface HeaderOneProps {
   SearchIcon?: React.FC<{ width: number; height: number; color?: string }>;
   onMenuPress?: () => void;
   onSearchPress?: () => void;
+  isLoading?: boolean;
 }
 
 const HeaderOne: React.FC<HeaderOneProps> = ({
   theme,
   logoUri,
-  MenuIcon,
-  SearchIcon,
+  MenuIcon = DefaultMenuIcon,
+  SearchIcon = DefaultSearchIcon,
   onMenuPress,
+
   onSearchPress,
+  isLoading
 }) => {
-  const { colors, isDarkMode } = useAppTheme(theme);
+  const { theme: appliedTheme } = useTheme(theme);
 
-  const Menu = MenuIcon || DefaultIcons.MenuBar;
-  const Search = SearchIcon || DefaultIcons.Search;
+  const iconColor = appliedTheme.colors?.onSurface;
+  const rippleColor = appliedTheme.colors.surfaceVariant + '33';
+  const pressedBackgroundColor = appliedTheme.colors.backdrop;
 
-  const iconColor = colors?.onSurface || (isDarkMode ? '#FFFFFF' : '#000000');
+  const MemoMenuIcon = useMemo(
+    () => <MenuIcon width={scale(28)} height={scale(28)} color={iconColor} />,
+    [MenuIcon, iconColor]
+  );
 
-  const rippleColor = colors.surfaceVariant + '33';
-  const pressedBackgroundColor = colors.backdrop;
+  const MemoSearchIcon = useMemo(
+    () => <SearchIcon width={scale(28)} height={scale(28)} color={iconColor} />,
+    [SearchIcon, iconColor]
+  );
 
   return (
     <View style={styles.headerContainer}>
@@ -43,12 +53,9 @@ 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 }]}
         >
-          <Menu width={scale(28)} height={scale(28)} color={iconColor} />
+          {MemoMenuIcon}
         </Pressable>
 
         <View style={styles.logo}>
@@ -56,6 +63,8 @@ const HeaderOne: React.FC<HeaderOneProps> = ({
             width={scale(50)}
             height={verticalScale(50)}
             logoUri={logoUri}
+            resizeMode="contain"
+            isLoading={isLoading}
           />
         </View>
       </View>
@@ -63,18 +72,15 @@ 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 }]}
       >
-        <Search width={scale(28)} height={scale(28)} color={iconColor} />
+        {MemoSearchIcon}
       </Pressable>
     </View>
   );
 };
 
-export default HeaderOne;
+export default React.memo(HeaderOne);
 
 const styles = StyleSheet.create({
   headerContainer: {
@@ -82,19 +88,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

@@ -1,34 +1,28 @@
 /**
  * @author Naresh Dhamu
- * @lastModified Mon 09 Jun 2025 at 03:11 PM
+ * @lastModified Fri 13 Jun 2025 at 11:10 AM
  */
 import React from 'react';
 import { Platform, StyleSheet, View } from 'react-native';
 import { scale, verticalScale } from 'react-native-size-matters';
 import { Logo } from '../Logo/Logo';
-import type { ITheme } from '../../theme/themes';
-import { useAppTheme } from '../../theme/useAppTheme'; // import your hook
+import type { AppTheme } from '../../theme/themes';
+import { useTheme } from '../../theme/hook/useTheme';
 
 export interface HeaderThreeProps {
   logoUri: string;
   category?: React.ReactNode;
-  theme?: ITheme;
+  theme?: AppTheme;
+  isLoading?: boolean;
 }
 
-const HeaderThree: React.FC<HeaderThreeProps> = ({
-  logoUri,
-  category,
-  theme,
-}) => {
-  const { colors } = useAppTheme(theme);
-
+const HeaderThree: React.FC<HeaderThreeProps> = ({ logoUri, category, theme, isLoading }) => {
+  const { theme: appliedTheme } = useTheme(theme);
   return (
-    <View
-      style={[styles.headerContainer, { backgroundColor: 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} />
+          <Logo width={scale(55)} height={scale(50)} logoUri={logoUri} isLoading={isLoading} />
         </View>
         {category || null}
       </View>
@@ -44,20 +38,16 @@ const styles = StyleSheet.create({
     justifyContent: 'space-between',
     alignItems: 'center',
     paddingHorizontal: scale(8),
-    height: verticalScale(40),
-    position: 'absolute',
-    top: 0,
-    left: 0,
-    right: 0,
-    zIndex: 100,
+    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

@@ -1,49 +1,42 @@
 /**
  * @author Naresh Dhamu
- * @lastModified Mon 09 Jun 2025 at 03:11 PM
+ * @lastModified Fri 13 Jun 2025 at 11:10 AM
  */
 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 { ITheme } from '../../theme/themes';
-import { useAppTheme } from '../../theme/useAppTheme';
+import type { AppTheme } from '../../theme/themes';
+import { useTheme } from '../../theme/hook/useTheme';
 
 export interface HeaderTwoProps {
-  theme?: ITheme;
+  theme?: AppTheme;
   logoUri: string;
   MenuIcon?: React.FC<{ width: number; height: number; color?: string }>;
   onMenuPress?: () => void;
+  isLoading?: boolean;
 }
 
-const HeaderTwo: React.FC<HeaderTwoProps> = ({
-  theme,
-  logoUri,
-  MenuIcon,
-  onMenuPress,
-}) => {
-  const { colors } = useAppTheme(theme);
+const HeaderTwo: React.FC<HeaderTwoProps> = ({ theme, logoUri, MenuIcon, onMenuPress, isLoading }) => {
+  const { theme: appliedTheme } = useTheme(theme);
 
   const Menu = MenuIcon || DefaultIcons.MenuBar;
 
-  const rippleColor = colors.surfaceVariant + '33';
-  const pressedBackgroundColor = colors.backdrop;
+  const rippleColor = appliedTheme.colors.surfaceVariant + '33';
+  const pressedBackgroundColor = appliedTheme.colors.backdrop;
 
   return (
     <View style={styles.headerContainer}>
       <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)} />
       </Pressable>
       <View style={styles.logo}>
-        <Logo width={scale(100)} height={scale(80)} logoUri={logoUri} />
+        <Logo width={scale(100)} height={scale(80)} logoUri={logoUri} isLoading={isLoading} />
       </View>
       <View style={styles.placeholder} />
     </View>
@@ -58,18 +51,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

@@ -1,6 +1,6 @@
 /**
  * @author Naresh Dhamu
- * @lastModified Sun 08 Jun 2025 at 03:16 PM
+ * @lastModified Fri 13 Jun 2025 at 11:11 AM
  */
 
 import HeaderOne from './One';
@@ -10,7 +10,7 @@ import HeaderTwo from './Two';
 const Header = {
   One: HeaderOne,
   Two: HeaderTwo,
-  Three: HeaderThree,
+  Three: HeaderThree
 };
 
 export { Header };

package/src/components/Icons/AlertIcon.tsx

@@ -2,21 +2,10 @@ import React from 'react';
 import { scale } from 'react-native-size-matters';
 import Svg, { Path, Circle } from 'react-native-svg';
 
-export function AlertIcon({
-  size = scale(213),
-  strokeColor = '#DF1212',
-  bgColor = '#D9D9D9',
-}) {
+export function AlertIcon({ size = scale(213), strokeColor = '#DF1212', bgColor = '#D9D9D9' }) {
   return (
     <Svg width={size} height={size} viewBox="0 0 213 214" fill="none">
-      <Circle
-        cx={106.268}
-        cy={106.923}
-        r={103.018}
-        fill={bgColor}
-        stroke={strokeColor}
-        strokeWidth={6.49971}
-      />
+      <Circle cx={106.268} cy={106.923} r={103.018} fill={bgColor} stroke={strokeColor} strokeWidth={6.49971} />
       <Path
         d="M99.01 73.857l-33.936 56.655a8.01 8.01 0 002.876 10.913 8.016 8.016 0 003.975 1.107h67.873a8.017 8.017 0 007.926-8.036 8.018 8.018 0 00-1.074-3.984l-33.937-56.655a8.012 8.012 0 00-13.703 0zM106 94.452v16.027M106 126.505h.041"
         stroke={strokeColor}

package/src/components/Icons/DeviceIcon.tsx

@@ -1,13 +1,7 @@
 import * as React from 'react';
 import Svg, { Path } from 'react-native-svg';
 
-function DeviceIcon({
-  size = 25,
-  color = '#FFF',
-}: {
-  size?: number;
-  color?: string;
-}) {
+function DeviceIcon({ size = 25, color = '#FFF' }: { size?: number; color?: string }) {
   return (
     <Svg width={size} height={size} viewBox="0 0 18 24" fill="none">
       <Path

package/src/components/Icons/ForgotPasswordMessageIcon.tsx

@@ -3,24 +3,10 @@ import Svg, { G, Rect, Path, Circle, Defs } from 'react-native-svg';
 
 export function ForgotPasswordMessageIcon(props: any) {
   return (
-    <Svg
-      width={109}
-      height={109}
-      viewBox="0 0 109 109"
-      fill="none"
-      xmlns="http://www.w3.org/2000/svg"
-      {...props}
-    >
+    <Svg width={109} height={109} viewBox="0 0 109 109" fill="none" xmlns="http://www.w3.org/2000/svg" {...props}>
       <G filter="url(#filter0_d_972_1083)">
         <G filter="url(#filter1_d_972_1083)">
-          <Rect
-            x={6.73749}
-            y={5.68115}
-            width={96.1664}
-            height={96.1664}
-            rx={17.31}
-            fill="#000"
-          />
+          <Rect x={6.73749} y={5.68115} width={96.1664} height={96.1664} rx={17.31} fill="#000" />
           <Rect
             x={7.3786}
             y={6.32226}
@@ -40,14 +26,7 @@ export function ForgotPasswordMessageIcon(props: any) {
         <Circle cx={45.9888} cy={52.1289} r={2.61677} fill="#000" />
         <Circle cx={55.1472} cy={52.1289} r={2.61677} fill="#000" />
         <Circle cx={64.3064} cy={52.1289} r={2.61677} fill="#000" />
-        <Circle
-          cx={73.4644}
-          cy={35.7741}
-          r={7.55593}
-          fill="#fff"
-          stroke="#000"
-          strokeWidth={3.20555}
-        />
+        <Circle cx={73.4644} cy={35.7741} r={7.55593} fill="#fff" stroke="#000" strokeWidth={3.20555} />
       </G>
       <Defs />
     </Svg>

package/src/components/Icons/ForgotPasswordMessageIconTwo.tsx

@@ -3,14 +3,7 @@ import Svg, { G, Rect, Path, Circle, Defs } from 'react-native-svg';
 
 export function ForgotPasswordMessageIconTwo(props: any) {
   return (
-    <Svg
-      width={115}
-      height={114}
-      viewBox="0 0 115 114"
-      fill="none"
-      xmlns="http://www.w3.org/2000/svg"
-      {...props}
-    >
+    <Svg width={115} height={114} viewBox="0 0 115 114" fill="none" xmlns="http://www.w3.org/2000/svg" {...props}>
       <G filter="url(#filter0_d_972_1131)">
         <Rect
           x={10.3786}
@@ -31,14 +24,7 @@ export function ForgotPasswordMessageIconTwo(props: any) {
         <Circle cx={48.9888} cy={53.1295} r={2.61677} fill="#fff" />
         <Circle cx={58.1472} cy={53.1295} r={2.61677} fill="#fff" />
         <Circle cx={67.3064} cy={53.1295} r={2.61677} fill="#fff" />
-        <Circle
-          cx={76.4643}
-          cy={36.7749}
-          r={7.55593}
-          fill="#000"
-          stroke="#fff"
-          strokeWidth={3.20555}
-        />
+        <Circle cx={76.4643} cy={36.7749} r={7.55593} fill="#000" stroke="#fff" strokeWidth={3.20555} />
       </G>
       <Defs />
     </Svg>

package/src/components/Icons/NewIndex.ts

@@ -7,6 +7,12 @@ import FavoritesIcon from '../../assets/svg/favorites.svg';
 import PlayIconWithBg from '../../assets/svg/play-icon-with-bg.svg';
 import ContentErrorIcon from '../../assets/svg/content-error.svg';
 import ServerErrorIcon from '../../assets/svg/server-error.svg';
+import ProfileIcon from '../../assets/svg/profile.svg';
+import FavouriteIcon from '../../assets/svg/Favourite.svg';
+import UpcomingIcon from '../../assets/svg/Upcoming.svg';
+import AccountIcon from '../../assets/svg/Account.svg';
+import Home1Icon from '../../assets/svg/home1.svg';
+import Search1Icon from '../../assets/svg/search1.svg';
 
 const Icons = {
   MenuBar: MenuBarICon,
@@ -18,6 +24,12 @@ const Icons = {
   PlayIconWithBg: PlayIconWithBg,
   ContentError: ContentErrorIcon,
   ServerError: ServerErrorIcon,
+  Profile: ProfileIcon,
+  Favourite: FavouriteIcon,
+  Upcoming: UpcomingIcon,
+  Account: AccountIcon,
+  Home1: Home1Icon,
+  Search1: Search1Icon
 };
 
 export default Icons;

package/src/components/Icons/ResendOTP.tsx

@@ -1,18 +1,8 @@
 import * as React from 'react';
 import Svg, { Path } from 'react-native-svg';
-export function ResendOTP(props: {
-  width?: number;
-  height?: number;
-  stroke?: string;
-}) {
+export function ResendOTP(props: { width?: number; height?: number; stroke?: string }) {
   return (
-    <Svg
-      width={props.width || 14}
-      height={props.height || 13}
-      stroke={props.stroke}
-      viewBox="0 0 14 13"
-      fill="none"
-    >
+    <Svg width={props.width || 14} height={props.height || 13} stroke={props.stroke} viewBox="0 0 14 13" fill="none">
       <Path
         d="M7.452 9.998v-.532H2.13A1.597 1.597 0 01.531 7.869v-5.74c0-.882.715-1.597 1.597-1.597h9.582c.882 0 1.597.715 1.597 1.597v5.74c0 .882-.715 1.597-1.597 1.597H10.38c-.3 0-.59.108-.816.305l-2.112 1.836V9.998z"
         // stroke="#74798F"

package/src/components/Input/Input.ts

@@ -0,0 +1,16 @@
+/**
+ * @author Naresh Dhamu
+ * @lastModified Fri 13 Jun 2025 at 11:11 AM
+ */
+
+import InputOne from './InputOne';
+import InputTwo from './InputTwo';
+import PhoneNumberInputOne from './PhoneNumberInput';
+
+const Input = {
+  One: InputOne,
+  Two: InputTwo,
+  Phone: PhoneNumberInputOne
+};
+
+export { Input };

package/src/components/Input/InputOne.tsx

@@ -0,0 +1,162 @@
+/**
+ * @author Naresh Dhamu
+ * @lastModified Tue 17 Jun 2025 at 11:20 AM
+ */
+import React, { useState } from 'react';
+import {
+  StyleSheet,
+  View,
+  Text,
+  TextInput,
+  TouchableOpacity,
+  type ViewStyle,
+  type TextInputProps,
+  type TextStyle
+} from 'react-native';
+import { Eye, EyeOff } from 'lucide-react-native';
+import { scale, verticalScale, moderateScale } from 'react-native-size-matters';
+import { useTheme } from '../../theme/hook/useTheme';
+import type { AppTheme } from '../../theme/themes';
+import { RFValue } from 'react-native-responsive-fontsize';
+
+export interface InputOneProps extends Omit<TextInputProps, 'theme'> {
+  containerStyle?: ViewStyle;
+  inputStyle?: TextStyle;
+  errorMessage?: string;
+  error?: boolean;
+  secureTextEntry?: boolean;
+  theme?: AppTheme;
+  label?: string;
+  placeholderTextColor?: string;
+  disabled?: boolean;
+}
+
+const InputOne: React.FC<InputOneProps> = ({
+  containerStyle,
+  inputStyle,
+  error,
+  errorMessage,
+  secureTextEntry,
+  theme,
+  label,
+  placeholderTextColor,
+  disabled,
+  ...props
+}) => {
+  const { theme: appliedTheme } = useTheme(theme);
+  const [showPassword, setShowPassword] = useState(false);
+  const isPasswordField = !!secureTextEntry;
+  const inputSecure = isPasswordField && !showPassword;
+
+  const {
+    textPrimary,
+    textSecondary,
+    textDisabled,
+    outline,
+    outlineDisabled,
+    error: inputErrorColor,
+    background
+  } = appliedTheme?.colors || {};
+
+  return (
+    <View style={[styles.container, containerStyle]}>
+      {label && (
+        <View style={[styles.labelContainer, { backgroundColor: background, borderRadius: scale(5) }]}>
+          <Text
+            style={[
+              styles.label,
+              {
+                color: error ? inputErrorColor : disabled ? textDisabled : textPrimary
+              }
+            ]}
+          >
+            {label}
+          </Text>
+        </View>
+      )}
+
+      <View
+        style={[
+          styles.inputWrapper,
+
+          {
+            borderColor: disabled ? outlineDisabled : error ? inputErrorColor : outline,
+            backgroundColor: disabled
+              ? appliedTheme.colors.backgroundDisabled
+              : error
+                ? appliedTheme.colors.errorContainer
+                : appliedTheme.colors.background,
+            flexDirection: 'row',
+            alignItems: 'center'
+          }
+        ]}
+      >
+        <TextInput
+          {...props}
+          editable={!disabled}
+          placeholderTextColor={placeholderTextColor || (disabled ? textDisabled : textSecondary)}
+          secureTextEntry={inputSecure}
+          textContentType={isPasswordField ? 'oneTimeCode' : props.textContentType || 'none'}
+          style={[
+            styles.input,
+            {
+              color: disabled ? textDisabled : error ? inputErrorColor : textPrimary
+            },
+            inputStyle
+          ]}
+        />
+
+        {isPasswordField && (
+          <TouchableOpacity onPress={() => setShowPassword((prev) => !prev)} disabled={disabled}>
+            {showPassword ? (
+              <EyeOff 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>}
+    </View>
+  );
+};
+
+export default InputOne;
+
+const styles = StyleSheet.create({
+  container: {
+    width: '100%',
+    marginBottom: verticalScale(10)
+  },
+  labelContainer: {
+    position: 'absolute',
+    top: -9,
+    left: scale(12),
+    zIndex: 1,
+    paddingHorizontal: scale(4)
+  },
+  label: {
+    fontSize: RFValue(10),
+    fontWeight: '500',
+    backgroundColor: 'transparent'
+  },
+  inputWrapper: {
+    width: '100%',
+    borderWidth: scale(1),
+    borderRadius: moderateScale(10),
+    paddingHorizontal: scale(10),
+    paddingVertical: verticalScale(6)
+  },
+  input: {
+    flex: 1,
+    width: '100%',
+    fontSize: RFValue(14),
+    minHeight: verticalScale(30)
+  },
+  errorText: {
+    fontSize: RFValue(10),
+    marginTop: verticalScale(4),
+    marginLeft: scale(8)
+  }
+});