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

package/src/components/Input/InputTwo.tsx

@@ -12,7 +12,7 @@ import {
   TouchableOpacity,
   type TextInputProps,
   type TextStyle,
-  type ViewStyle
+  type ViewStyle,
 } from 'react-native';
 import { Eye, EyeOff } from 'lucide-react-native';
 import { scale, verticalScale, moderateScale } from 'react-native-size-matters';
@@ -66,18 +66,37 @@ const InputTwo: React.FC<InputTwoProps> = ({
     error: inputErrorColor,
     backgroundDisabled,
     errorContainer,
-    skeletonBaseColor
+    skeletonBaseColor,
   } = appliedTheme?.colors || {};
 
-  const computedBorderColor = disabled ? outline : error ? inputErrorColor : outlineDisabled;
-  const computedBackgroundColor = disabled ? backgroundDisabled : error ? errorContainer : skeletonBaseColor;
-  const computedTextColor = disabled ? textDisabled : error ? inputErrorColor : textPrimary;
+  const computedBorderColor = disabled
+    ? outline
+    : error
+      ? inputErrorColor
+      : outlineDisabled;
+  const computedBackgroundColor = disabled
+    ? backgroundDisabled
+    : error
+      ? errorContainer
+      : skeletonBaseColor;
+  const computedTextColor = disabled
+    ? textDisabled
+    : error
+      ? inputErrorColor
+      : textPrimary;
 
   return (
     <View style={[styles.container, containerStyle]}>
       {label && (
-        <View style={[styles.labelContainer, { backgroundColor: skeletonBaseColor, borderRadius: scale(3) }]}>
-          <Text style={[styles.label, { color: computedTextColor }]}>{label}</Text>
+        <View
+          style={[
+            styles.labelContainer,
+            { backgroundColor: skeletonBaseColor, borderRadius: scale(3) },
+          ]}
+        >
+          <Text style={[styles.label, { color: computedTextColor }]}>
+            {label}
+          </Text>
         </View>
       )}
 
@@ -86,8 +105,8 @@ const InputTwo: React.FC<InputTwoProps> = ({
           styles.inputWrapper,
           {
             borderColor: computedBorderColor,
-            backgroundColor: computedBackgroundColor
-          }
+            backgroundColor: computedBackgroundColor,
+          },
         ]}
       >
         {/* Left Icon */}
@@ -139,7 +158,11 @@ const InputTwo: React.FC<InputTwoProps> = ({
         ) : null}
       </View>
 
-      {error && errorMessage && <Text style={[styles.errorText, { color: inputErrorColor }]}>{errorMessage}</Text>}
+      {error && errorMessage && (
+        <Text style={[styles.errorText, { color: inputErrorColor }]}>
+          {errorMessage}
+        </Text>
+      )}
     </View>
   );
 };
@@ -149,19 +172,19 @@ export default InputTwo;
 const styles = StyleSheet.create({
   container: {
     width: '100%',
-    marginBottom: verticalScale(5)
+    marginBottom: verticalScale(5),
   },
   labelContainer: {
     position: 'absolute',
     top: -9,
     left: scale(12),
     zIndex: 1,
-    paddingHorizontal: scale(4)
+    paddingHorizontal: scale(4),
   },
   label: {
     fontSize: RFValue(11),
     fontWeight: '500',
-    backgroundColor: 'transparent'
+    backgroundColor: 'transparent',
   },
   inputWrapper: {
     width: '100%',
@@ -170,20 +193,20 @@ const styles = StyleSheet.create({
     paddingHorizontal: scale(10),
     paddingVertical: verticalScale(6),
     flexDirection: 'row',
-    alignItems: 'center'
+    alignItems: 'center',
   },
   iconWrapper: {
-    marginHorizontal: scale(5)
+    marginHorizontal: scale(5),
   },
   input: {
     flex: 1,
     fontSize: RFValue(14),
     minHeight: verticalScale(30),
-    padding: 0
+    padding: 0,
   },
   errorText: {
     fontSize: RFValue(11),
     marginTop: verticalScale(4),
-    marginLeft: scale(8)
-  }
+    marginLeft: scale(8),
+  },
 });

package/src/components/Input/PhoneNumberInput.tsx

@@ -3,7 +3,13 @@
  * @lastModified Mon 16 Jun 2025 at 12:35 PM
  */
 
-import React, { useRef, useState, useCallback, useMemo, useEffect } from 'react';
+import React, {
+  useRef,
+  useState,
+  useCallback,
+  useMemo,
+  useEffect,
+} from 'react';
 import {
   StyleSheet,
   View,
@@ -11,7 +17,7 @@ import {
   Animated,
   type AccessibilityProps,
   type TextStyle,
-  type ViewStyle
+  type ViewStyle,
 } from 'react-native';
 import PhoneInput from 'react-native-phone-number-input';
 import { scale, verticalScale, moderateScale } from 'react-native-size-matters';
@@ -24,9 +30,14 @@ import { useTheme } from '../../theme/hook/useTheme';
 import type { AppTheme } from '../../theme/themes';
 import { RFValue } from 'react-native-responsive-fontsize';
 
-export interface PhoneNumberInputProps extends Pick<AccessibilityProps, 'accessibilityLabel' | 'accessibilityHint'> {
+export interface PhoneNumberInputProps
+  extends Pick<AccessibilityProps, 'accessibilityLabel' | 'accessibilityHint'> {
   value: string;
-  onChangeText: (params: { fullNumber: string; countryCode: string; formattedNumber: string }) => void;
+  onChangeText: (params: {
+    fullNumber: string;
+    countryCode: string;
+    formattedNumber: string;
+  }) => void;
   label?: string;
   placeholder?: string;
   error?: boolean;
@@ -37,9 +48,15 @@ export interface PhoneNumberInputProps extends Pick<AccessibilityProps, 'accessi
   disabled?: boolean;
 }
 
-const getMaxLengthForCountry = (countryCode: string, defaultMaxLength: number): number => {
+const getMaxLengthForCountry = (
+  countryCode: string,
+  defaultMaxLength: number
+): number => {
   try {
-    const example = getExampleNumber(countryCode as keyof typeof examples, examples);
+    const example = getExampleNumber(
+      countryCode as keyof typeof examples,
+      examples
+    );
     return example?.nationalNumber?.length ?? defaultMaxLength;
   } catch (error) {
     console.warn(`Failed to get max length for country ${countryCode}:`, error);
@@ -59,7 +76,7 @@ const PhoneNumberInputOne: React.FC<PhoneNumberInputProps> = ({
   theme: propTheme,
   accessibilityLabel = label || 'Phone number input',
   accessibilityHint,
-  disabled = false
+  disabled = false,
 }) => {
   const phoneInputRef = useRef<PhoneInput>(null);
   const { theme: appliedTheme } = useTheme(propTheme);
@@ -77,13 +94,13 @@ const PhoneNumberInputOne: React.FC<PhoneNumberInputProps> = ({
       Animated.timing(errorAnimation, {
         toValue: 1,
         duration: 300,
-        useNativeDriver: true
+        useNativeDriver: true,
       }).start();
     } else {
       Animated.timing(errorAnimation, {
         toValue: 0,
         duration: 300,
-        useNativeDriver: true
+        useNativeDriver: true,
       }).start();
     }
   }, [inputError, error, errorAnimation]);
@@ -100,7 +117,7 @@ const PhoneNumberInputOne: React.FC<PhoneNumberInputProps> = ({
         onChangeText({
           fullNumber: '',
           formattedNumber: formattedText,
-          countryCode: inputCallingCode
+          countryCode: inputCallingCode,
         });
         return;
       }
@@ -110,7 +127,7 @@ const PhoneNumberInputOne: React.FC<PhoneNumberInputProps> = ({
         onChangeText({
           fullNumber: '',
           formattedNumber: formattedText,
-          countryCode: inputCallingCode
+          countryCode: inputCallingCode,
         });
         return;
       }
@@ -120,7 +137,7 @@ const PhoneNumberInputOne: React.FC<PhoneNumberInputProps> = ({
         onChangeText({
           fullNumber: '',
           formattedNumber: formattedText,
-          countryCode: inputCallingCode
+          countryCode: inputCallingCode,
         });
         return;
       }
@@ -130,7 +147,7 @@ const PhoneNumberInputOne: React.FC<PhoneNumberInputProps> = ({
         onChangeText({
           fullNumber: '',
           formattedNumber: formattedText,
-          countryCode: inputCallingCode
+          countryCode: inputCallingCode,
         });
         return;
       }
@@ -143,14 +160,14 @@ const PhoneNumberInputOne: React.FC<PhoneNumberInputProps> = ({
         onChangeText({
           fullNumber: e164,
           formattedNumber: formattedText,
-          countryCode: inputCallingCode
+          countryCode: inputCallingCode,
         });
       } else {
         setInputError('Please enter a valid phone number');
         onChangeText({
           fullNumber: '',
           formattedNumber: formattedText,
-          countryCode: inputCallingCode
+          countryCode: inputCallingCode,
         });
       }
     },
@@ -190,8 +207,8 @@ const PhoneNumberInputOne: React.FC<PhoneNumberInputProps> = ({
           : inputError || error
             ? appliedTheme.colors.errorContainer
             : appliedTheme.colors.background,
-        borderWidth: isFocused ? scale(1.5) : scale(1)
-      }
+        borderWidth: isFocused ? scale(1.5) : scale(1),
+      },
     ],
     [
       disabled,
@@ -204,7 +221,7 @@ const PhoneNumberInputOne: React.FC<PhoneNumberInputProps> = ({
       appliedTheme.colors.background,
       inputError,
       error,
-      isFocused
+      isFocused,
     ]
   );
 
@@ -222,13 +239,18 @@ const PhoneNumberInputOne: React.FC<PhoneNumberInputProps> = ({
         {
           opacity: errorAnimation.interpolate({
             inputRange: [0, 1],
-            outputRange: [1, 0.95]
-          })
-        }
+            outputRange: [1, 0.95],
+          }),
+        },
       ]}
     >
       {label && (
-        <View style={[styles.labelContainer, { backgroundColor: appliedTheme.colors.background }]}>
+        <View
+          style={[
+            styles.labelContainer,
+            { backgroundColor: appliedTheme.colors.background },
+          ]}
+        >
           <Text
             style={[
               styles.label,
@@ -237,8 +259,8 @@ const PhoneNumberInputOne: React.FC<PhoneNumberInputProps> = ({
                   ? appliedTheme.colors.textDisabled
                   : error || inputError
                     ? appliedTheme.colors.error
-                    : appliedTheme.colors.textPrimary
-              }
+                    : appliedTheme.colors.textPrimary,
+              },
             ]}
           >
             {label}
@@ -256,15 +278,23 @@ const PhoneNumberInputOne: React.FC<PhoneNumberInputProps> = ({
           autoFocus={false}
           disabled={disabled}
           placeholder={placeholder}
-          containerStyle={[styles.phoneInputContainer, { backgroundColor: 'transparent' }]}
-          textContainerStyle={[styles.phoneInputTextContainer, { backgroundColor: 'transparent' }]}
+          containerStyle={[
+            styles.phoneInputContainer,
+            { backgroundColor: 'transparent' },
+          ]}
+          textContainerStyle={[
+            styles.phoneInputTextContainer,
+            { backgroundColor: 'transparent' },
+          ]}
           textInputStyle={[
             styles.textInput,
             {
-              color: disabled ? appliedTheme.colors.textDisabled : appliedTheme.colors.textPrimary,
-              backgroundColor: 'transparent'
+              color: disabled
+                ? appliedTheme.colors.textDisabled
+                : appliedTheme.colors.textPrimary,
+              backgroundColor: 'transparent',
             },
-            inputStyle
+            inputStyle,
           ]}
           codeTextStyle={[
             styles.codeTextStyle,
@@ -274,10 +304,13 @@ const PhoneNumberInputOne: React.FC<PhoneNumberInputProps> = ({
                 : error || inputError
                   ? appliedTheme.colors.onErrorContainer
                   : appliedTheme.colors.textPrimary,
-              backgroundColor: 'transparent'
-            }
+              backgroundColor: 'transparent',
+            },
+          ]}
+          countryPickerButtonStyle={[
+            styles.countryPickerButtonStyle,
+            { backgroundColor: 'transparent' },
           ]}
-          countryPickerButtonStyle={[styles.countryPickerButtonStyle, { backgroundColor: 'transparent' }]}
           renderDropdownImage={
             <ChevronDown
               color={
@@ -293,20 +326,33 @@ const PhoneNumberInputOne: React.FC<PhoneNumberInputProps> = ({
           textInputProps={{
             keyboardType: 'numeric',
             maxLength,
-            placeholderTextColor: disabled ? appliedTheme.colors.textDisabled : appliedTheme.colors.textSecondary,
+            placeholderTextColor: disabled
+              ? appliedTheme.colors.textDisabled
+              : appliedTheme.colors.textSecondary,
             accessibilityLabel: computedAccessibilityLabel,
             accessibilityHint: accessibilityHint,
-            cursorColor: inputError || error ? appliedTheme.colors.error : appliedTheme.colors.primary,
-            selectionColor: inputError || error ? appliedTheme.colors.error : appliedTheme.colors.primary,
+            cursorColor:
+              inputError || error
+                ? appliedTheme.colors.error
+                : appliedTheme.colors.primary,
+            selectionColor:
+              inputError || error
+                ? appliedTheme.colors.error
+                : appliedTheme.colors.primary,
 
             onFocus: () => setIsFocused(true),
-            onBlur: () => setIsFocused(false)
+            onBlur: () => setIsFocused(false),
           }}
           withDarkTheme={appliedTheme.dark}
         />
       </View>
       {(error || inputError) && (
-        <Text style={[styles.errorText, { color: appliedTheme.colors.onErrorContainer }]}>
+        <Text
+          style={[
+            styles.errorText,
+            { color: appliedTheme.colors.onErrorContainer },
+          ]}
+        >
           {inputError || errorMessage || 'Invalid phone number'}
         </Text>
       )}
@@ -319,7 +365,7 @@ export default React.memo(PhoneNumberInputOne);
 const styles = StyleSheet.create({
   container: {
     width: '100%',
-    marginBottom: verticalScale(16)
+    marginBottom: verticalScale(16),
   },
   labelContainer: {
     position: 'absolute',
@@ -327,12 +373,12 @@ const styles = StyleSheet.create({
     left: scale(12),
     zIndex: 1,
     paddingHorizontal: scale(6),
-    borderRadius: scale(4)
+    borderRadius: scale(4),
   },
   label: {
     fontSize: RFValue(10),
     fontWeight: '500',
-    letterSpacing: 0.3
+    letterSpacing: 0.3,
   },
   inputWrapper: {
     width: '100%',
@@ -345,39 +391,39 @@ const styles = StyleSheet.create({
     shadowOffset: { width: 0, height: 0 },
     shadowOpacity: 0,
     shadowRadius: 0,
-    elevation: 0
+    elevation: 0,
   },
   phoneInputContainer: {
     flex: 1,
     borderWidth: 0,
-    elevation: 0
+    elevation: 0,
   },
   phoneInputTextContainer: {
     flex: 1,
     paddingVertical: 0,
     paddingHorizontal: scale(2),
-    alignItems: 'center'
+    alignItems: 'center',
   },
   textInput: {
     flex: 1,
     fontSize: RFValue(16),
     padding: 0,
-    fontWeight: '400'
+    fontWeight: '400',
   },
   codeTextStyle: {
     fontSize: RFValue(16),
-    fontWeight: '500'
+    fontWeight: '500',
   },
   countryPickerButtonStyle: {
     marginRight: scale(-4),
     padding: scale(2),
-    marginLeft: scale(-4)
+    marginLeft: scale(-4),
   },
   errorText: {
     fontSize: RFValue(10),
     marginTop: verticalScale(8),
     marginLeft: scale(12),
     fontWeight: '400',
-    opacity: 0.9
-  }
+    opacity: 0.9,
+  },
 });

package/src/components/Keyboard/HideKeyboard.tsx

@@ -11,7 +11,7 @@ import {
   Animated,
   Platform,
   StatusBar,
-  type ViewStyle
+  type ViewStyle,
 } from 'react-native';
 import { scale } from 'react-native-size-matters';
 
@@ -26,22 +26,26 @@ const HideKeyboard: React.FC<HideKeyboardProps> = ({
   children,
   containerStyle,
   behavior = 'padding',
-  keyboardVerticalOffset = scale(-160)
+  keyboardVerticalOffset = scale(-160),
 }) => {
   const fadeAnim = useRef(new Animated.Value(1)).current;
 
   // Platform-based offset
-  const offset = keyboardVerticalOffset ?? (Platform.OS === 'ios' ? 0 : (StatusBar.currentHeight ?? 0));
+  const offset =
+    keyboardVerticalOffset ??
+    (Platform.OS === 'ios' ? 0 : (StatusBar.currentHeight ?? 0));
 
   useEffect(() => {
-    const showEvent = Platform.OS === 'ios' ? 'keyboardWillShow' : 'keyboardDidShow';
-    const hideEvent = Platform.OS === 'ios' ? 'keyboardWillHide' : 'keyboardDidHide';
+    const showEvent =
+      Platform.OS === 'ios' ? 'keyboardWillShow' : 'keyboardDidShow';
+    const hideEvent =
+      Platform.OS === 'ios' ? 'keyboardWillHide' : 'keyboardDidHide';
 
     const showSub = Keyboard.addListener(showEvent, () => {
       Animated.timing(fadeAnim, {
         toValue: 0.98,
         duration: 250,
-        useNativeDriver: true
+        useNativeDriver: true,
       }).start();
     });
 
@@ -49,7 +53,7 @@ const HideKeyboard: React.FC<HideKeyboardProps> = ({
       Animated.timing(fadeAnim, {
         toValue: 1,
         duration: 250,
-        useNativeDriver: true
+        useNativeDriver: true,
       }).start();
     });
 
@@ -66,7 +70,9 @@ const HideKeyboard: React.FC<HideKeyboardProps> = ({
       keyboardVerticalOffset={offset}
     >
       <TouchableWithoutFeedback onPress={Keyboard.dismiss} accessible={false}>
-        <Animated.View style={{ flex: 1, transform: [{ scale: fadeAnim }] }}>{children}</Animated.View>
+        <Animated.View style={{ flex: 1, transform: [{ scale: fadeAnim }] }}>
+          {children}
+        </Animated.View>
       </TouchableWithoutFeedback>
     </KeyboardAvoidingView>
   );
@@ -75,8 +81,8 @@ const HideKeyboard: React.FC<HideKeyboardProps> = ({
 const styles = StyleSheet.create({
   keyboardAvoidingView: {
     flex: 1,
-    width: '100%'
-  }
+    width: '100%',
+  },
 });
 
 export default HideKeyboard;

package/src/components/Loader/Loader.tsx

@@ -1,10 +1,5 @@
-/**
- * @author Naresh Dhamu
- * @lastModified Sun 08 Jun 2025 at 03:30 PM
- */
 import React from 'react';
-import { StyleSheet, View } from 'react-native';
-import { ActivityIndicator } from 'react-native-paper';
+import { StyleSheet, View, ActivityIndicator } from 'react-native';
 
 interface LoaderProps {
   color?: string;
@@ -28,6 +23,6 @@ const styles = StyleSheet.create({
     justifyContent: 'center',
     alignItems: 'center',
     zIndex: 999,
-    backgroundColor: 'rgba(255,255,255,0.4)' // optional semi-transparent backdrop
-  }
+    backgroundColor: 'rgba(255,255,255,0.4)', // optional semi-transparent backdrop
+  },
 });

package/src/components/Logo/Logo.tsx

@@ -3,7 +3,13 @@
  * @lastModified Sun 08 Jun 2025 at 03:23 PM
  */
 import React from 'react';
-import { Image, View, type StyleProp, type ImageStyle, type ViewStyle } from 'react-native';
+import {
+  Image,
+  View,
+  type StyleProp,
+  type ImageStyle,
+  type ViewStyle,
+} from 'react-native';
 import { moderateScale } from 'react-native-size-matters';
 import SkeletonPlaceholder from 'react-native-skeleton-placeholder';
 import { useInitSplashCacheSync } from '../../hooks/useInitSplashCacheSync';
@@ -33,19 +39,21 @@ export const Logo: React.FC<ILogoProps> = ({
   aspectRatio,
   fallbackUri,
   theme,
-  isLoading = false
+  isLoading = false,
 }) => {
   const { theme: appliedTheme } = useTheme(theme);
 
   const {
     data: { localPathLogo },
-    isLoading: isSplashLoading
+    isLoading: isSplashLoading,
   } = useInitSplashCacheSync({
-    logoUrl: logoUri
+    logoUrl: logoUri,
   });
   const finalSource = localPathLogo
     ? {
-        uri: localPathLogo.startsWith('file://') ? localPathLogo : `file://${localPathLogo}`
+        uri: localPathLogo.startsWith('file://')
+          ? localPathLogo
+          : `file://${localPathLogo}`,
       }
     : logoUri
       ? { uri: logoUri }
@@ -61,9 +69,9 @@ export const Logo: React.FC<ILogoProps> = ({
       style={[
         {
           alignItems: 'center',
-          justifyContent: 'center'
+          justifyContent: 'center',
         },
-        containerStyle
+        containerStyle,
       ]}
     >
       {isLoading || isSplashLoading ? (
@@ -89,9 +97,9 @@ export const Logo: React.FC<ILogoProps> = ({
               {
                 width: moderateScale(width),
                 height: moderateScale(height),
-                ...(aspectRatio ? { aspectRatio } : {})
+                ...(aspectRatio ? { aspectRatio } : {}),
               },
-              imageStyle
+              imageStyle,
             ]}
             onError={() => {
               return null;