@zezosoft/zezo-ott-react-native-ui-kit 1.1.2 → 1.1.5

package/src/components/Input/InputThree.tsx

@@ -0,0 +1,212 @@
+/**
+ * @author Naresh Dhamu
+ * @lastModified Tue 17 Jun 2025 at 11:20 AM
+ */
+
+import React, { useState, useMemo, useCallback } 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 { useInternalTheme } from '../../theme/hook/useInternalTheme';
+import type { ThemeOverride } from '../../theme/themes';
+import { RFValue } from 'react-native-responsive-fontsize';
+
+export interface InputThreeProps extends Omit<TextInputProps, 'theme'> {
+  containerStyle?: ViewStyle;
+  inputStyle?: TextStyle;
+  errorMessage?: string;
+  error?: boolean;
+  secureTextEntry?: boolean;
+  theme?: ThemeOverride;
+  label?: string;
+  placeholderTextColor?: string;
+  disabled?: boolean;
+  leftIcon?: React.ReactNode;
+}
+
+const InputThree: React.FC<InputThreeProps> = ({
+  containerStyle,
+  inputStyle,
+  error,
+  errorMessage,
+  secureTextEntry,
+  theme,
+  placeholderTextColor,
+  disabled,
+  leftIcon,
+  ...props
+}) => {
+  const { theme: appliedTheme, isDarkMode } = useInternalTheme(theme);
+
+  const [showPassword, setShowPassword] = useState(false);
+  const [, setIsFocused] = useState(false);
+
+  const isPasswordField = useMemo(() => !!secureTextEntry, [secureTextEntry]);
+  const inputSecure = useMemo(
+    () => isPasswordField && !showPassword,
+    [isPasswordField, showPassword]
+  );
+
+  const handleFocus = useCallback(() => setIsFocused(true), []);
+  const handleBlur = useCallback(() => setIsFocused(false), []);
+  const togglePassword = useCallback(
+    () => setShowPassword((prev) => !prev),
+    []
+  );
+
+  const {
+    textPrimary,
+    textSecondary,
+    textDisabled,
+    error: errorColor,
+  } = appliedTheme.colors;
+
+  const iconColor = 'white';
+
+  /* ===============================
+       🎨 GLASS BACKGROUND
+    =============================== */
+  const wrapperBackgroundColor = useMemo(() => {
+    if (disabled) return appliedTheme.colors.backgroundDisabled;
+    if (error) return appliedTheme.colors.errorContainer;
+
+    return isDarkMode
+      ? 'rgba(255, 255, 255, 0.2)'
+      : 'rgba(255, 255, 255, 0.24)';
+  }, [disabled, error, isDarkMode, appliedTheme.colors]);
+
+  /* ===============================
+       🟦 WHITE GLASS BORDER
+    =============================== */
+  const borderColor = useMemo(() => {
+    if (disabled) return appliedTheme.colors.outlineDisabled;
+    if (error) return errorColor;
+
+    return isDarkMode ? 'rgba(255, 255, 255, 0.46)' : 'rgba(255,255,255,0.9)';
+  }, [disabled, error, isDarkMode, errorColor, appliedTheme.colors]);
+
+  const inputWrapperStyle = useMemo(
+    () => [
+      styles.inputWrapper,
+      {
+        backgroundColor: wrapperBackgroundColor,
+        borderColor,
+
+        // glass polish
+        shadowColor: isDarkMode ? 'transparent' : '#000',
+        shadowOpacity: isDarkMode ? 0 : 0.12,
+        shadowRadius: 10,
+        shadowOffset: { width: 0, height: 6 },
+        elevation: isDarkMode ? 0 : 4,
+      },
+    ],
+    [wrapperBackgroundColor, borderColor, isDarkMode]
+  );
+
+  const inputTextColor = useMemo(
+    () => (disabled ? textDisabled : error ? errorColor : textPrimary),
+    [disabled, error, textDisabled, errorColor, textPrimary]
+  );
+
+  const inputColorStyle = useMemo(
+    () => [styles.input, { color: inputTextColor }, inputStyle],
+    [inputTextColor, inputStyle]
+  );
+
+  const placeholderColor = useMemo(
+    () => placeholderTextColor || (disabled ? textDisabled : textSecondary),
+    [placeholderTextColor, disabled, textDisabled, textSecondary]
+  );
+
+  // const iconColor = useMemo(
+  //     () => (disabled ? textDisabled : error ? errorColor : textPrimary),
+  //     [disabled, error, textDisabled, errorColor, textPrimary]
+  // );
+
+  return (
+    <View style={[styles.container, containerStyle]}>
+      <View style={inputWrapperStyle}>
+        {leftIcon && (
+          <View style={styles.leftIconWrapper}>
+            {React.isValidElement(leftIcon)
+              ? React.cloneElement(leftIcon as React.ReactElement<any>, {
+                  color: iconColor,
+                })
+              : leftIcon}
+          </View>
+        )}
+
+        <TextInput
+          {...props}
+          editable={!disabled}
+          onFocus={handleFocus}
+          onBlur={handleBlur}
+          placeholderTextColor={placeholderColor}
+          secureTextEntry={inputSecure}
+          cursorColor={appliedTheme.colors.primary}
+          selectionColor={appliedTheme.colors.primary}
+          style={inputColorStyle}
+        />
+
+        {isPasswordField && (
+          <TouchableOpacity onPress={togglePassword} disabled={disabled}>
+            {showPassword ? (
+              <EyeOff size={scale(20)} color={iconColor} />
+            ) : (
+              <Eye size={scale(20)} color={iconColor} />
+            )}
+          </TouchableOpacity>
+        )}
+      </View>
+
+      {error && errorMessage && (
+        <Text style={[styles.errorText, { color: errorColor }]}>
+          {errorMessage}
+        </Text>
+      )}
+    </View>
+  );
+};
+
+export default React.memo(InputThree);
+
+const styles = StyleSheet.create({
+  container: {
+    width: '100%',
+    marginBottom: verticalScale(10),
+  },
+  leftIconWrapper: {
+    marginRight: scale(8),
+    justifyContent: 'center',
+    alignItems: 'center',
+  },
+  inputWrapper: {
+    width: '100%',
+    flexDirection: 'row',
+    alignItems: 'center',
+    borderWidth: scale(1.2),
+    borderRadius: moderateScale(5),
+    paddingHorizontal: scale(12),
+    paddingVertical: verticalScale(5.5),
+  },
+  input: {
+    flex: 1,
+    width: '100%',
+    fontSize: RFValue(14),
+    minHeight: verticalScale(34),
+  },
+  errorText: {
+    fontSize: RFValue(10),
+    marginTop: verticalScale(4),
+    marginLeft: scale(8),
+  },
+});

package/src/components/Input/PhoneNumberInput.tsx

@@ -30,8 +30,10 @@ import { useInternalTheme } from '../../theme/hook/useInternalTheme';
 import type { ThemeOverride } 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;

package/src/components/Input/PhoneNumberInputTwo.tsx

@@ -0,0 +1,418 @@
+/**
+ * @author Naresh Dhamu
+ * @lastModified Mon 16 Jun 2025 at 12:35 PM
+ */
+
+import React, {
+  useRef,
+  useState,
+  useCallback,
+  useMemo,
+  useEffect,
+} from 'react';
+import {
+  StyleSheet,
+  View,
+  Text,
+  Animated,
+  type AccessibilityProps,
+  type TextStyle,
+  type ViewStyle,
+} from 'react-native';
+import PhoneInput from 'react-native-phone-number-input';
+import { scale, verticalScale, moderateScale } from 'react-native-size-matters';
+import { ChevronDown } from 'lucide-react-native';
+import { getExampleNumber } from 'libphonenumber-js';
+import examples from 'libphonenumber-js/mobile/examples';
+import { parsePhoneNumberFromString } from 'libphonenumber-js';
+import debounce from 'lodash.debounce';
+import { useInternalTheme } from '../../theme/hook/useInternalTheme';
+import type { ThemeOverride } from '../../theme/themes';
+import { RFValue } from 'react-native-responsive-fontsize';
+
+export interface PhoneNumberInputProps extends Pick<
+  AccessibilityProps,
+  'accessibilityLabel' | 'accessibilityHint'
+> {
+  value: string;
+  onChangeText: (params: {
+    fullNumber: string;
+    countryCode: string;
+    formattedNumber: string;
+  }) => void;
+  label?: string;
+  placeholder?: string;
+  error?: boolean;
+  errorMessage?: string;
+  inputStyle?: TextStyle;
+  containerStyle?: ViewStyle;
+  theme?: ThemeOverride;
+  disabled?: boolean;
+}
+
+const getMaxLengthForCountry = (
+  countryCode: string,
+  defaultMaxLength: number
+): number => {
+  try {
+    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);
+    return defaultMaxLength;
+  }
+};
+
+const PhoneNumberInputTwo: React.FC<PhoneNumberInputProps> = ({
+  value = '',
+  onChangeText,
+  label,
+  placeholder = 'Phone Number',
+  error = false,
+  errorMessage,
+  inputStyle,
+  containerStyle,
+  theme: propTheme,
+  accessibilityLabel = label || 'Phone number input',
+  accessibilityHint,
+  disabled = false,
+}) => {
+  const phoneInputRef = useRef<PhoneInput>(null);
+  const { theme: appliedTheme, isDarkMode } = useInternalTheme(propTheme);
+  const { textPrimary, textDisabled, error: errorColor } = appliedTheme.colors;
+
+  const [inputError, setInputError] = useState<string | null>(null);
+  const [, setIsFocused] = useState<boolean>(false);
+  const errorAnimation = useRef(new Animated.Value(0)).current;
+
+  // ✅ Hard set country to India
+  useEffect(() => {
+    phoneInputRef.current?.getCountryCode();
+  }, []);
+
+  useEffect(() => {
+    if (inputError || error) {
+      Animated.timing(errorAnimation, {
+        toValue: 1,
+        duration: 300,
+        useNativeDriver: true,
+      }).start();
+    } else {
+      Animated.timing(errorAnimation, {
+        toValue: 0,
+        duration: 300,
+        useNativeDriver: true,
+      }).start();
+    }
+  }, [inputError, error, errorAnimation]);
+
+  const validatePhoneNumber = useCallback(
+    (formattedText: string, inputCallingCode: string) => {
+      const rawInput = formattedText.replace(/[^\d]/g, '');
+      const fullRawNumber = `+${inputCallingCode}${rawInput}`;
+      const parsedNumber = parsePhoneNumberFromString(fullRawNumber);
+      const maxLength = getMaxLengthForCountry('IN', 10);
+
+      if (!rawInput) {
+        setInputError(null);
+        onChangeText({
+          fullNumber: '',
+          formattedNumber: formattedText,
+          countryCode: inputCallingCode,
+        });
+        return;
+      }
+
+      if (!parsedNumber || !inputCallingCode) {
+        setInputError('Invalid phone number format');
+        onChangeText({
+          fullNumber: '',
+          formattedNumber: formattedText,
+          countryCode: inputCallingCode,
+        });
+        return;
+      }
+
+      if (rawInput.length > maxLength) {
+        setInputError(`Phone number must not exceed ${maxLength} digits`);
+        onChangeText({
+          fullNumber: '',
+          formattedNumber: formattedText,
+          countryCode: inputCallingCode,
+        });
+        return;
+      }
+
+      if (rawInput.length < maxLength) {
+        setInputError(`Phone number must be at least ${maxLength} digits`);
+        onChangeText({
+          fullNumber: '',
+          formattedNumber: formattedText,
+          countryCode: inputCallingCode,
+        });
+        return;
+      }
+
+      const isValid = parsedNumber.isValid();
+      const e164 = parsedNumber.number;
+
+      if (isValid && e164) {
+        setInputError(null);
+        onChangeText({
+          fullNumber: e164,
+          formattedNumber: formattedText,
+          countryCode: inputCallingCode,
+        });
+      } else {
+        setInputError('Please enter a valid phone number');
+        onChangeText({
+          fullNumber: '',
+          formattedNumber: formattedText,
+          countryCode: inputCallingCode,
+        });
+      }
+    },
+    [onChangeText]
+  );
+
+  const phoneTextColor = useMemo(
+    () =>
+      disabled ? textDisabled : inputError || error ? errorColor : textPrimary,
+    [disabled, inputError, error, textDisabled, errorColor, textPrimary]
+  );
+
+  const debouncedHandlePhoneChange = useMemo(
+    () =>
+      debounce((formattedText: string) => {
+        const currentCallingCode = phoneInputRef.current?.getCallingCode();
+        validatePhoneNumber(formattedText, currentCallingCode || '');
+      }, 300),
+    [validatePhoneNumber]
+  );
+
+  useEffect(() => {
+    return () => {
+      debouncedHandlePhoneChange.cancel();
+    };
+  }, [debouncedHandlePhoneChange]);
+
+  const maxLength = useMemo(() => getMaxLengthForCountry('IN', 10), []);
+
+  const wrapperBackgroundColor = useMemo(() => {
+    if (disabled) return appliedTheme.colors.backgroundDisabled;
+    if (inputError || error) return appliedTheme.colors.errorContainer;
+
+    return isDarkMode
+      ? 'rgba(255, 255, 255, 0.2)'
+      : 'rgba(255, 255, 255, 0.24)';
+  }, [disabled, inputError, error, isDarkMode, appliedTheme.colors]);
+
+  const borderColor = useMemo(() => {
+    if (disabled) return appliedTheme.colors.outlineDisabled;
+    if (inputError || error) return errorColor;
+
+    return isDarkMode ? 'rgba(255,255,255,0.50)' : 'rgba(255,255,255,0.9)';
+  }, [
+    disabled,
+    appliedTheme.colors.outlineDisabled,
+    inputError,
+    error,
+    errorColor,
+    isDarkMode,
+  ]);
+
+  const inputWrapperStyle = useMemo(
+    () => [
+      styles.inputWrapper,
+      {
+        backgroundColor: wrapperBackgroundColor,
+        borderColor,
+        borderWidth: scale(1.2),
+
+        shadowColor: isDarkMode ? 'transparent' : '#000',
+        shadowOpacity: isDarkMode ? 0 : 0.12,
+        shadowRadius: 10,
+        shadowOffset: { width: 0, height: 6 },
+        elevation: isDarkMode ? 0 : 4,
+      },
+    ],
+    [wrapperBackgroundColor, borderColor, isDarkMode]
+  );
+
+  const computedAccessibilityLabel = useMemo(
+    () =>
+      `${accessibilityLabel}, country code: +91${inputError || error ? `, error: ${inputError || errorMessage || 'Invalid phone number'}` : ''}`,
+    [accessibilityLabel, inputError, error, errorMessage]
+  );
+
+  return (
+    <Animated.View
+      style={[
+        styles.container,
+        containerStyle,
+        {
+          opacity: errorAnimation.interpolate({
+            inputRange: [0, 1],
+            outputRange: [1, 0.95],
+          }),
+        },
+      ]}
+    >
+      {label && (
+        <View
+          style={[
+            styles.labelContainer,
+            { backgroundColor: appliedTheme.colors.background },
+          ]}
+        />
+      )}
+      <View style={inputWrapperStyle}>
+        <PhoneInput
+          ref={phoneInputRef}
+          defaultCode="IN"
+          layout="second"
+          value={value}
+          onChangeText={debouncedHandlePhoneChange}
+          flagButtonStyle={styles.flagButtonStyle}
+          withShadow={false}
+          autoFocus={false}
+          disabled={disabled}
+          placeholder={placeholder}
+          containerStyle={[
+            styles.phoneInputContainer,
+            { backgroundColor: 'transparent' },
+          ]}
+          textContainerStyle={[
+            styles.phoneInputTextContainer,
+            { backgroundColor: 'transparent' },
+          ]}
+          textInputStyle={[
+            styles.textInput,
+            { color: phoneTextColor, backgroundColor: 'transparent' },
+            inputStyle,
+          ]}
+          codeTextStyle={[styles.codeTextStyle, { color: 'white' }]}
+          countryPickerButtonStyle={[
+            styles.countryPickerButtonStyle,
+            { backgroundColor: 'transparent' },
+          ]}
+          renderDropdownImage={<ChevronDown color={'white'} size={scale(18)} />}
+          textInputProps={{
+            keyboardType: 'numeric',
+            maxLength,
+            placeholderTextColor: disabled
+              ? appliedTheme.colors.textDisabled
+              : appliedTheme.colors.textSecondary,
+            accessibilityLabel: computedAccessibilityLabel,
+            accessibilityHint,
+            cursorColor:
+              inputError || error
+                ? appliedTheme.colors.onErrorContainer
+                : appliedTheme.colors.primary,
+            selectionColor:
+              inputError || error
+                ? appliedTheme.colors.onErrorContainer
+                : appliedTheme.colors.primary,
+            onFocus: () => setIsFocused(true),
+            onBlur: () => setIsFocused(false),
+          }}
+          withDarkTheme={isDarkMode}
+        />
+      </View>
+      {(error || inputError) && (
+        <Text
+          style={[
+            styles.errorText,
+            { color: appliedTheme.colors.onErrorContainer },
+          ]}
+        >
+          {inputError || errorMessage || 'Invalid phone number'}
+        </Text>
+      )}
+    </Animated.View>
+  );
+};
+
+export default React.memo(PhoneNumberInputTwo);
+
+const styles = StyleSheet.create({
+  container: {
+    width: '100%',
+    marginBottom: verticalScale(16),
+  },
+  labelContainer: {
+    position: 'absolute',
+    top: -verticalScale(7),
+    left: scale(12),
+    zIndex: 1,
+    paddingHorizontal: scale(6),
+    borderRadius: scale(4),
+  },
+  label: {
+    fontSize: RFValue(10),
+    fontWeight: '500',
+    letterSpacing: 0.3,
+  },
+  inputWrapper: {
+    width: '100%',
+    height: verticalScale(50),
+    borderRadius: moderateScale(8),
+    paddingHorizontal: scale(8),
+    flexDirection: 'row',
+    alignItems: 'center',
+    shadowColor: 'transparent',
+    shadowOffset: { width: 0, height: 0 },
+    shadowOpacity: 0,
+    shadowRadius: 0,
+    elevation: 0,
+  },
+  flagButtonStyle: {
+    justifyContent: 'center',
+    alignItems: 'center',
+    marginRight: scale(4),
+  },
+  phoneInputContainer: {
+    flex: 1,
+    borderWidth: 0,
+    elevation: 0,
+  },
+  phoneInputTextContainer: {
+    flex: 1,
+    flexDirection: 'row',
+    alignItems: 'center',
+    justifyContent: 'flex-start',
+    paddingVertical: 0,
+    paddingHorizontal: scale(4),
+  },
+  textInput: {
+    flex: 1,
+    fontSize: RFValue(16),
+    padding: 0,
+    fontWeight: '400',
+  },
+  codeTextStyle: {
+    fontSize: RFValue(16),
+    marginLeft: scale(4),
+    fontWeight: '500',
+  },
+  countryPickerButtonStyle: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    justifyContent: 'center',
+    height: verticalScale(42),
+    paddingHorizontal: scale(8),
+    borderRightWidth: 0.8,
+    borderRightColor: '#D0D0D0',
+  },
+
+  errorText: {
+    fontSize: RFValue(10),
+    marginTop: verticalScale(8),
+    marginLeft: scale(12),
+    fontWeight: '400',
+    opacity: 0.9,
+  },
+});

package/src/components/Loader/Loader.tsx

@@ -1,17 +1,34 @@
-import React from 'react';
+import React, { useMemo } from 'react';
 import { StyleSheet, View, ActivityIndicator } from 'react-native';
+import { useInternalTheme } from '../../theme/hook/useInternalTheme';
+import type { ThemeOverride } from '../../theme/themes';
 
 interface LoaderProps {
   color?: string;
+  theme?: ThemeOverride;
 }
 
-export const Loader: React.FC<LoaderProps> = React.memo(({ color }) => {
-  return (
-    <View style={styles.root}>
-      <ActivityIndicator size="large" color={color} />
-    </View>
-  );
-});
+export const Loader: React.FC<LoaderProps> = React.memo(
+  ({ color, theme: themeOverride }) => {
+    const { theme } = useInternalTheme(themeOverride);
+
+    const rootStyle = useMemo(
+      () => [styles.root, { backgroundColor: theme.colors.scrim }],
+      [theme.colors.scrim]
+    );
+
+    const indicatorColor = useMemo(
+      () => color ?? theme.colors.primary,
+      [color, theme.colors.primary]
+    );
+
+    return (
+      <View style={rootStyle}>
+        <ActivityIndicator size="large" color={indicatorColor} />
+      </View>
+    );
+  }
+);
 
 const styles = StyleSheet.create({
   root: {
@@ -23,6 +40,5 @@ const styles = StyleSheet.create({
     justifyContent: 'center',
     alignItems: 'center',
     zIndex: 999,
-    backgroundColor: 'rgba(255,255,255,0.4)', // optional semi-transparent backdrop
   },
 });