@zezosoft/zezo-ott-react-native-ui-kit 1.1.3 → 1.1.6

package/src/components/Headers/One.tsx

@@ -1,115 +0,0 @@
-/**
- * @author Naresh Dhamu
- * @lastModified Wed 25 Jun 2025 at 01:30 PM
- */
-
-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 type { ThemeOverride } from '../../theme/themes';
-import { useInternalTheme } from '../../theme/hook/useInternalTheme';
-import {
-  Menu as DefaultMenuIcon,
-  Search as DefaultSearchIcon,
-} from 'lucide-react-native';
-
-export interface HeaderOneProps {
-  theme?: ThemeOverride;
-  logoUri: string;
-  MenuIcon?: React.FC<{ width: number; height: number; color?: string }>;
-  SearchIcon?: React.FC<{ width: number; height: number; color?: string }>;
-  onMenuPress?: () => void;
-  onSearchPress?: () => void;
-  isLoading?: boolean;
-}
-
-const HeaderOne: React.FC<HeaderOneProps> = ({
-  theme,
-  logoUri,
-  MenuIcon = DefaultMenuIcon,
-  SearchIcon = DefaultSearchIcon,
-  onMenuPress,
-
-  onSearchPress,
-  isLoading,
-}) => {
-  const { theme: appliedTheme } = useInternalTheme(theme);
-
-  const iconColor = appliedTheme.colors?.onSurface;
-  const rippleColor = appliedTheme.colors.surfaceVariant + '33';
-  const pressedBackgroundColor = appliedTheme.colors.surfaceVariant;
-
-  const MemoMenuIcon = useMemo(
-    () => <MenuIcon width={scale(28)} height={scale(28)} color={iconColor} />,
-    [MenuIcon, iconColor]
-  );
-
-  const MemoSearchIcon = useMemo(
-    () => <SearchIcon width={scale(28)} height={scale(28)} color={iconColor} />,
-    [SearchIcon, iconColor]
-  );
-
-  return (
-    <View style={styles.headerContainer}>
-      <View style={styles.leftContainer}>
-        <Pressable
-          onPress={onMenuPress}
-          android_ripple={{ color: rippleColor, borderless: true }}
-          style={({ pressed }) => [
-            styles.iconPressable,
-            pressed && { backgroundColor: pressedBackgroundColor },
-          ]}
-        >
-          {MemoMenuIcon}
-        </Pressable>
-
-        <View style={styles.logo}>
-          <Logo
-            width={scale(50)}
-            height={verticalScale(50)}
-            logoUri={logoUri}
-            resizeMode="contain"
-            isLoading={isLoading}
-          />
-        </View>
-      </View>
-
-      <Pressable
-        onPress={onSearchPress}
-        android_ripple={{ color: rippleColor, borderless: true }}
-        style={({ pressed }) => [
-          styles.iconPressable,
-          pressed && { backgroundColor: pressedBackgroundColor },
-        ]}
-      >
-        {MemoSearchIcon}
-      </Pressable>
-    </View>
-  );
-};
-
-export default React.memo(HeaderOne);
-
-const styles = StyleSheet.create({
-  headerContainer: {
-    flexDirection: 'row',
-    justifyContent: 'space-between',
-    alignItems: 'center',
-    paddingHorizontal: scale(8),
-    height: verticalScale(40),
-  },
-  leftContainer: {
-    flexDirection: 'row',
-    alignItems: 'center',
-    gap: scale(10),
-  },
-  logo: {
-    alignItems: 'center',
-    marginVertical: Platform.OS === 'ios' ? verticalScale(0) : verticalScale(5),
-  },
-  iconPressable: {
-    padding: scale(6),
-    borderRadius: scale(20),
-  },
-});

package/src/components/Headers/Three.tsx

@@ -1,72 +0,0 @@
-/**
- * @author Naresh Dhamu
- * @lastModified Fri 13 Jun 2025 at 11:10 AM
- */
-import React, { useMemo } from 'react';
-import { Platform, StyleSheet, View } from 'react-native';
-import { scale, verticalScale } from 'react-native-size-matters';
-import { Logo } from '../Logo/Logo';
-import type { ThemeOverride } from '../../theme/themes';
-import { useInternalTheme } from '../../theme/hook/useInternalTheme';
-
-export interface HeaderThreeProps {
-  logoUri: string;
-  category?: React.ReactNode;
-  theme?: ThemeOverride;
-  isLoading?: boolean;
-}
-
-const HeaderThree: React.FC<HeaderThreeProps> = ({
-  logoUri,
-  category,
-  theme,
-  isLoading,
-}) => {
-  const { theme: appliedTheme } = useInternalTheme(theme);
-
-  const headerStyle = useMemo(
-    () => [
-      styles.headerContainer,
-      { backgroundColor: appliedTheme.colors.background },
-    ],
-    [appliedTheme.colors.background]
-  );
-
-  return (
-    <View style={headerStyle}>
-      <View style={styles.leftContainer}>
-        <View style={styles.logo}>
-          <Logo
-            width={scale(55)}
-            height={scale(50)}
-            logoUri={logoUri}
-            isLoading={isLoading}
-          />
-        </View>
-        {category || null}
-      </View>
-    </View>
-  );
-};
-
-export default React.memo(HeaderThree);
-
-const styles = StyleSheet.create({
-  headerContainer: {
-    flexDirection: 'row',
-    justifyContent: 'space-between',
-    alignItems: 'center',
-    paddingHorizontal: scale(8),
-    height: verticalScale(40),
-  },
-
-  leftContainer: {
-    flexDirection: 'row',
-    alignItems: 'center',
-    gap: scale(10),
-  },
-  logo: {
-    alignItems: 'center',
-    marginVertical: Platform.OS === 'ios' ? verticalScale(0) : verticalScale(5),
-  },
-});

package/src/components/Headers/Two.tsx

@@ -1,100 +0,0 @@
-/**
- * @author Naresh Dhamu
- * @lastModified Fri 13 Jun 2025 at 11:10 AM
- */
-import React, { useMemo, useCallback } from 'react';
-import { Platform, Pressable, StyleSheet, View } from 'react-native';
-import { scale, verticalScale } from 'react-native-size-matters';
-import { Logo } from '../Logo/Logo';
-import type { ThemeOverride } from '../../theme/themes';
-import { useInternalTheme } from '../../theme/hook/useInternalTheme';
-import { Menu } from 'lucide-react-native';
-export interface HeaderTwoProps {
-  theme?: ThemeOverride;
-  logoUri: string;
-  MenuIcon?: React.FC<{ width: number; height: number; color?: string }>;
-  onMenuPress?: () => void;
-  isLoading?: boolean;
-}
-
-const HeaderTwo: React.FC<HeaderTwoProps> = ({
-  theme,
-  logoUri,
-  MenuIcon = Menu,
-  onMenuPress,
-  isLoading,
-}) => {
-  const { theme: appliedTheme } = useInternalTheme(theme);
-
-  const rippleColor = useMemo(
-    () => appliedTheme.colors.surfaceVariant + '33',
-    [appliedTheme.colors.surfaceVariant]
-  );
-
-  const pressedBackgroundColor = useMemo(
-    () => appliedTheme.colors.surfaceVariant,
-    [appliedTheme.colors.surfaceVariant]
-  );
-
-  const handleMenuPress = useCallback(() => {
-    onMenuPress?.();
-  }, [onMenuPress]);
-
-  const pressableStyle = useCallback(
-    ({ pressed }: { pressed: boolean }) => [
-      styles.iconPressable,
-      pressed && { backgroundColor: pressedBackgroundColor },
-    ],
-    [pressedBackgroundColor]
-  );
-
-  const MemoMenuIcon = useMemo(
-    () => <MenuIcon width={scale(28)} height={scale(28)} />,
-    [MenuIcon]
-  );
-
-  return (
-    <View style={styles.headerContainer}>
-      <Pressable
-        onPress={handleMenuPress}
-        android_ripple={{ color: rippleColor, borderless: true }}
-        style={pressableStyle}
-      >
-        {MemoMenuIcon}
-      </Pressable>
-      <View style={styles.logo}>
-        <Logo
-          width={scale(100)}
-          height={scale(80)}
-          logoUri={logoUri}
-          isLoading={isLoading}
-        />
-      </View>
-      <View style={styles.placeholder} />
-    </View>
-  );
-};
-
-export default React.memo(HeaderTwo);
-
-const styles = StyleSheet.create({
-  headerContainer: {
-    flexDirection: 'row',
-    justifyContent: 'space-between',
-    alignItems: 'center',
-    paddingHorizontal: scale(8),
-    height: verticalScale(40),
-  },
-  logo: {
-    flex: 1,
-    alignItems: 'center',
-    marginVertical: Platform.OS === 'ios' ? verticalScale(0) : verticalScale(5),
-  },
-  iconPressable: {
-    padding: scale(6),
-    borderRadius: scale(20),
-  },
-  placeholder: {
-    width: scale(28 + 12),
-  },
-});

package/src/components/Headers/index.ts

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

package/src/components/Input/Input.ts

@@ -1,16 +0,0 @@
-/**
- * @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

@@ -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),
-  },
-});