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

package/src/components/Input/InputOne.tsx

@@ -1,259 +0,0 @@
-/**
- * @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 InputOneProps extends Omit<TextInputProps, 'theme'> {
-  containerStyle?: ViewStyle;
-  inputStyle?: TextStyle;
-  errorMessage?: string;
-  error?: boolean;
-  secureTextEntry?: boolean;
-  theme?: ThemeOverride;
-  label?: string;
-  placeholderTextColor?: string;
-  disabled?: boolean;
-}
-
-const InputOne: React.FC<InputOneProps> = ({
-  containerStyle,
-  inputStyle,
-  error,
-  errorMessage,
-  secureTextEntry,
-  theme,
-  label,
-  placeholderTextColor,
-  disabled,
-  ...props
-}) => {
-  const { theme: appliedTheme } = useInternalTheme(theme);
-  const [showPassword, setShowPassword] = useState(false);
-  const [isFocused, 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,
-    outline,
-    outlineDisabled,
-    error: inputErrorColor,
-    background,
-    primary,
-  } = appliedTheme?.colors || {};
-
-  const labelColor = useMemo(
-    () => (error ? inputErrorColor : disabled ? textDisabled : textPrimary),
-    [error, disabled, inputErrorColor, textDisabled, textPrimary]
-  );
-
-  const labelContainerStyle = useMemo(
-    () => [
-      styles.labelContainer,
-      { backgroundColor: background, borderRadius: scale(5) },
-    ],
-    [background]
-  );
-
-  const labelStyle = useMemo(
-    () => [styles.label, { color: labelColor }],
-    [labelColor]
-  );
-
-  const borderColor = useMemo(
-    () =>
-      disabled
-        ? outlineDisabled
-        : error
-          ? inputErrorColor
-          : isFocused
-            ? primary || '#007AFF'
-            : outline,
-    [
-      disabled,
-      error,
-      isFocused,
-      outlineDisabled,
-      inputErrorColor,
-      primary,
-      outline,
-    ]
-  );
-
-  const wrapperBackgroundColor = useMemo(
-    () =>
-      disabled
-        ? appliedTheme.colors.backgroundDisabled
-        : error
-          ? appliedTheme.colors.errorContainer
-          : appliedTheme.colors.background,
-    [disabled, error, appliedTheme.colors]
-  );
-
-  const inputWrapperStyle = useMemo(
-    () => [
-      styles.inputWrapper,
-      {
-        borderColor,
-        backgroundColor: wrapperBackgroundColor,
-        flexDirection: 'row' as const,
-        alignItems: 'center' as const,
-      },
-    ],
-    [borderColor, wrapperBackgroundColor]
-  );
-
-  const inputTextColor = useMemo(
-    () => (disabled ? textDisabled : error ? inputErrorColor : textPrimary),
-    [disabled, error, textDisabled, inputErrorColor, textPrimary]
-  );
-
-  const inputColorStyle = useMemo(
-    () => [styles.input, { color: inputTextColor }, inputStyle],
-    [inputTextColor, inputStyle]
-  );
-
-  const placeholderColor = useMemo(
-    () => placeholderTextColor || (disabled ? textDisabled : textSecondary),
-    [placeholderTextColor, disabled, textDisabled, textSecondary]
-  );
-
-  const cursorColor = useMemo(
-    () =>
-      disabled
-        ? textDisabled
-        : error
-          ? inputErrorColor
-          : isFocused
-            ? primary || '#007AFF'
-            : textPrimary,
-    [
-      disabled,
-      error,
-      isFocused,
-      textDisabled,
-      inputErrorColor,
-      primary,
-      textPrimary,
-    ]
-  );
-
-  const iconColor = useMemo(
-    () => (disabled ? textDisabled : error ? inputErrorColor : textPrimary),
-    [disabled, error, textDisabled, inputErrorColor, textPrimary]
-  );
-
-  const textContentType = useMemo(
-    () => (isPasswordField ? 'oneTimeCode' : props.textContentType || 'none'),
-    [isPasswordField, props.textContentType]
-  );
-
-  return (
-    <View style={[styles.container, containerStyle]}>
-      {label && (
-        <View style={labelContainerStyle}>
-          <Text style={labelStyle}>{label}</Text>
-        </View>
-      )}
-
-      <View style={inputWrapperStyle}>
-        <TextInput
-          {...props}
-          editable={!disabled}
-          onFocus={handleFocus}
-          onBlur={handleBlur}
-          placeholderTextColor={placeholderColor}
-          secureTextEntry={inputSecure}
-          textContentType={textContentType}
-          cursorColor={cursorColor}
-          selectionColor={cursorColor}
-          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: inputErrorColor }]}>
-          {errorMessage}
-        </Text>
-      )}
-    </View>
-  );
-};
-
-export default React.memo(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.4),
-    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),
-  },
-});

package/src/components/Input/InputThree.tsx

@@ -1,212 +0,0 @@
-/**
- * @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/InputTwo.tsx

@@ -1,212 +0,0 @@
-/**
- * @author Naresh Dhamu
- * @lastModified Fri 04 Jul 2025 at 10:53 PM
- */
-
-import React, { useState } from 'react';
-import {
-  StyleSheet,
-  View,
-  Text,
-  TextInput,
-  TouchableOpacity,
-  type TextInputProps,
-  type TextStyle,
-  type ViewStyle,
-} 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 InputTwoProps 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;
-  onPressLeftIcon?: () => void;
-  rightIcon?: React.ReactNode;
-  onPressRightIcon?: () => void;
-}
-
-const InputTwo: React.FC<InputTwoProps> = ({
-  containerStyle,
-  inputStyle,
-  error,
-  errorMessage,
-  secureTextEntry,
-  theme,
-  label,
-  placeholderTextColor,
-  disabled,
-  leftIcon,
-  onPressLeftIcon,
-  rightIcon,
-  onPressRightIcon,
-  ...props
-}) => {
-  const { theme: appliedTheme } = useInternalTheme(theme);
-  const [showPassword, setShowPassword] = useState(false);
-  const isPasswordField = !!secureTextEntry;
-  const inputSecure = isPasswordField && !showPassword;
-
-  const {
-    textPrimary,
-    textDisabled,
-    outline,
-    outlineDisabled,
-    error: inputErrorColor,
-    backgroundDisabled,
-    errorContainer,
-    skeletonBaseColor,
-  } = appliedTheme?.colors || {};
-
-  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>
-      )}
-
-      <View
-        style={[
-          styles.inputWrapper,
-          {
-            borderColor: computedBorderColor,
-            backgroundColor: computedBackgroundColor,
-          },
-        ]}
-      >
-        {/* Left Icon */}
-        {leftIcon && (
-          <TouchableOpacity
-            disabled={!onPressLeftIcon}
-            activeOpacity={onPressLeftIcon ? 0.8 : 1}
-            onPress={onPressLeftIcon}
-            style={styles.iconWrapper}
-            accessibilityRole="button"
-          >
-            {leftIcon}
-          </TouchableOpacity>
-        )}
-
-        {/* Text Input */}
-        <TextInput
-          {...props}
-          editable={!disabled}
-          placeholderTextColor={placeholderTextColor || textPrimary}
-          secureTextEntry={inputSecure}
-          style={[styles.input, { color: computedTextColor }, inputStyle]}
-        />
-
-        {/* Right Icon or Eye Toggle */}
-        {rightIcon ? (
-          <TouchableOpacity
-            activeOpacity={0.8}
-            disabled={!onPressRightIcon}
-            onPress={onPressRightIcon}
-            style={styles.iconWrapper}
-            accessibilityRole="button"
-          >
-            {rightIcon}
-          </TouchableOpacity>
-        ) : isPasswordField ? (
-          <TouchableOpacity
-            onPress={() => setShowPassword((prev) => !prev)}
-            disabled={disabled}
-            activeOpacity={0.8}
-            style={styles.iconWrapper}
-          >
-            {showPassword ? (
-              <EyeOff size={scale(20)} color={textPrimary} />
-            ) : (
-              <Eye size={scale(20)} color={textPrimary} />
-            )}
-          </TouchableOpacity>
-        ) : null}
-      </View>
-
-      {error && errorMessage && (
-        <Text style={[styles.errorText, { color: inputErrorColor }]}>
-          {errorMessage}
-        </Text>
-      )}
-    </View>
-  );
-};
-
-export default InputTwo;
-
-const styles = StyleSheet.create({
-  container: {
-    width: '100%',
-    marginBottom: verticalScale(5),
-  },
-  labelContainer: {
-    position: 'absolute',
-    top: -9,
-    left: scale(12),
-    zIndex: 1,
-    paddingHorizontal: scale(4),
-  },
-  label: {
-    fontSize: RFValue(11),
-    fontWeight: '500',
-    backgroundColor: 'transparent',
-  },
-  inputWrapper: {
-    width: '100%',
-    borderWidth: scale(0.5),
-    borderRadius: moderateScale(7.18),
-    paddingHorizontal: scale(10),
-    paddingVertical: verticalScale(6),
-    flexDirection: 'row',
-    alignItems: 'center',
-  },
-  iconWrapper: {
-    marginHorizontal: scale(5),
-  },
-  input: {
-    flex: 1,
-    fontSize: RFValue(14),
-    minHeight: verticalScale(30),
-    padding: 0,
-  },
-  errorText: {
-    fontSize: RFValue(11),
-    marginTop: verticalScale(4),
-    marginLeft: scale(8),
-  },
-});