@zezosoft/zezo-ott-react-native-ui-kit 1.3.6 → 1.3.8

package/src/components/Headers/AppHeader.tsx

@@ -1,151 +0,0 @@
-/**
- * @author Naresh Dhamu
- * @LastModified Mon 13 Jul 2026 at 10:13 AM
- */
-
-import React, { useMemo, useCallback } from 'react';
-import {
-  View,
-  StyleSheet,
-  TouchableOpacity,
-  type StyleProp,
-  type ViewStyle,
-  type TextStyle,
-} from 'react-native';
-import { ArrowLeft } from 'lucide-react-native';
-import { useTheme } from '../../theme';
-import { scale, verticalScale } from 'react-native-size-matters';
-import { Text } from '../Text';
-import type { ThemeOverride } from '../../theme/themes';
-import { RFValue } from 'react-native-responsive-fontsize';
-
-export type AppHeaderProps = {
-  title: string;
-  onBackPress?: () => void;
-  onRightPress?: () => void;
-  rightIcon?: React.ReactNode;
-  style?: StyleProp<ViewStyle>;
-  titleStyle?: StyleProp<TextStyle>;
-  titleAlign?: 'center' | 'left';
-  theme?: ThemeOverride;
-};
-
-const AppHeader: React.FC<AppHeaderProps> = ({
-  title,
-  onBackPress,
-  onRightPress,
-  rightIcon,
-  style,
-  titleStyle,
-  titleAlign = 'center',
-  theme,
-}) => {
-  const { theme: appliedTheme } = useTheme(theme);
-
-  const headerStyle = useMemo(
-    () => [
-      styles.header,
-      { backgroundColor: appliedTheme.colors.background },
-      style,
-    ],
-    [appliedTheme.colors.background, style]
-  );
-
-  const titleWrapperStyle = useMemo(
-    () => [
-      styles.titleWrapper,
-      titleAlign === 'center' ? styles.centered : styles.leftAligned,
-    ],
-    [titleAlign]
-  );
-
-  const titleTextStyle = useMemo(
-    () => [
-      { color: appliedTheme.colors.onBackground },
-      !onBackPress && { ...titleStyle },
-      titleStyle,
-      styles.title,
-    ],
-    [appliedTheme.colors.onBackground, onBackPress, titleStyle]
-  );
-
-  const handleBackPress = useCallback(() => {
-    onBackPress?.();
-  }, [onBackPress]);
-
-  const handleRightPress = useCallback(() => {
-    onRightPress?.();
-  }, [onRightPress]);
-
-  return (
-    <View style={headerStyle}>
-      {/* Left icon */}
-      {onBackPress && (
-        <TouchableOpacity
-          onPress={handleBackPress}
-          activeOpacity={0.7}
-          style={styles.iconButton}
-        >
-          <ArrowLeft size={scale(22)} color={appliedTheme.colors.textPrimary} />
-        </TouchableOpacity>
-      )}
-
-      {/* Title */}
-      <View style={titleWrapperStyle}>
-        <Text numberOfLines={1} style={titleTextStyle}>
-          {title}
-        </Text>
-      </View>
-
-      {/* Right icon */}
-      {rightIcon && onRightPress ? (
-        <TouchableOpacity
-          onPress={handleRightPress}
-          activeOpacity={0.7}
-          style={styles.iconButton}
-        >
-          {rightIcon}
-        </TouchableOpacity>
-      ) : (
-        <View style={styles.iconButton} />
-      )}
-    </View>
-  );
-};
-
-export default React.memo(AppHeader);
-
-const styles = StyleSheet.create({
-  header: {
-    height: verticalScale(40),
-    paddingHorizontal: scale(12),
-    paddingBottom: verticalScale(4),
-    flexDirection: 'row',
-    alignItems: 'center',
-  },
-  iconButton: {
-    width: scale(42),
-    height: scale(42),
-    borderRadius: scale(21),
-    justifyContent: 'center',
-    alignItems: 'center',
-    overflow: 'hidden',
-    backgroundColor: 'transparent',
-  },
-  titleWrapper: {
-    flex: 1,
-    justifyContent: 'center',
-  },
-  centered: {
-    alignItems: 'center',
-  },
-  leftAligned: {
-    alignItems: 'flex-start',
-    paddingLeft: scale(2),
-  },
-  title: {
-    fontSize: RFValue(14),
-    textTransform: 'capitalize',
-    fontWeight: '500',
-  },
-});

package/src/components/Headers/Four.tsx

@@ -1,84 +0,0 @@
-/**
- * @author Naresh Dhamu
- * @LastModified Mon 13 Jul 2026 at 10:13 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 { useSafeAreaInsets } from 'react-native-safe-area-context';
-import CategoryCardTwo, {
-  type ICategory,
-} from '../Content/Card/Category/CategroyTwo';
-
-export interface HeaderFourProps {
-  logoUri: string;
-  category?: ICategory[] | null;
-  activeCategory?: ICategory | null;
-  onPressCategory?: (category: ICategory) => void;
-  theme?: ThemeOverride;
-  isLoading?: boolean;
-}
-
-const HeaderFour: React.FC<HeaderFourProps> = ({
-  logoUri,
-  category,
-  activeCategory,
-  onPressCategory,
-  theme,
-  isLoading,
-}) => {
-  const insets = useSafeAreaInsets();
-
-  const headerStyle = useMemo(
-    () => [styles.headerContainer, { paddingTop: insets.top }],
-    [insets.top]
-  );
-
-  return (
-    <View style={headerStyle}>
-      <View style={styles.leftContainer}>
-        <View style={styles.logo}>
-          <Logo
-            width={scale(55)}
-            height={scale(30)}
-            logoUri={logoUri}
-            isLoading={isLoading}
-            theme={theme}
-          />
-        </View>
-        <CategoryCardTwo
-          category={category ?? undefined}
-          activeCategory={activeCategory ?? undefined}
-          onPressCategory={onPressCategory}
-          theme={theme}
-        />
-      </View>
-    </View>
-  );
-};
-
-export default React.memo(HeaderFour);
-
-const styles = StyleSheet.create({
-  headerContainer: {
-    position: 'absolute',
-    top: 0,
-    left: 0,
-    right: 0,
-    height: verticalScale(40),
-    paddingHorizontal: scale(8),
-  },
-
-  leftContainer: {
-    flexDirection: 'row',
-    alignItems: 'center',
-    gap: scale(10),
-  },
-  logo: {
-    alignItems: 'center',
-    marginVertical: Platform.OS === 'ios' ? verticalScale(0) : verticalScale(5),
-  },
-});

package/src/components/Headers/One.tsx

@@ -1,115 +0,0 @@
-/**
- * @author Naresh Dhamu
- * @LastModified Mon 13 Jul 2026 at 10:13 AM
- */
-
-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 { useTheme } from '../../theme';
-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 } = useTheme(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(30)}
-            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,137 +0,0 @@
-/**
- * @author Naresh Dhamu
- * @LastModified Mon 13 Jul 2026 at 10:13 AM
- */
-
-import React, { useMemo } from 'react';
-import { StyleSheet, View, type StyleProp, type ViewStyle } from 'react-native';
-import { scale, verticalScale } from 'react-native-size-matters';
-import LinearGradient from 'react-native-linear-gradient';
-import Animated, {
-  useAnimatedStyle,
-  interpolate,
-  Extrapolation,
-  type SharedValue,
-} from 'react-native-reanimated';
-import { Logo } from '../Logo/Logo';
-import type { ThemeOverride } from '../../theme/themes';
-import { useTheme } from '../../theme';
-import CategoryCard from '../Content/Card/Category/Category';
-import type { ICategory } from '../Content/Card/Category/CategroyTwo';
-
-const AnimatedLinearGradient = Animated.createAnimatedComponent(LinearGradient);
-
-export interface HeaderThreeProps {
-  logoUri: string;
-  categories?: ICategory[];
-  activeCategory?: ICategory;
-  onPressCategory?: (category: ICategory) => void;
-  theme?: ThemeOverride;
-  isLoading?: boolean;
-  style?: StyleProp<ViewStyle>;
-  scrollY?: SharedValue<number>;
-  scrollThreshold?: number;
-}
-
-const HeaderThree: React.FC<HeaderThreeProps> = ({
-  logoUri,
-  categories,
-  theme,
-  isLoading,
-  style,
-  scrollY,
-  scrollThreshold = 50,
-  activeCategory,
-  onPressCategory,
-}) => {
-  const { theme: appliedTheme, isDarkMode } = useTheme(theme);
-
-  const headerWrapperStyle = useMemo(
-    () => [styles.wrapper, { backgroundColor: 'transparent' }, style],
-    [style]
-  );
-
-  const gradientColors = useMemo(() => {
-    const bgColor = appliedTheme.colors.background;
-    return [bgColor, isDarkMode ? 'rgba(0,0, 0, 0)' : 'rgba(255,255, 255, 0)'];
-  }, [appliedTheme.colors.background, isDarkMode]);
-
-  const scrollBackgroundStyle = useAnimatedStyle(() => {
-    if (!scrollY) {
-      return { opacity: 0 };
-    }
-
-    const opacity = interpolate(
-      scrollY.value,
-      [0, scrollThreshold],
-      [0, 1],
-      Extrapolation.CLAMP
-    );
-
-    return {
-      opacity,
-    };
-  }, [scrollY, scrollThreshold]);
-
-  return (
-    <View style={headerWrapperStyle}>
-      {scrollY && (
-        <AnimatedLinearGradient
-          colors={gradientColors}
-          start={{ x: 0, y: 0 }}
-          end={{ x: 0, y: 1 }}
-          locations={[0.75, 1]}
-          style={[styles.scrollBackgroundOverlay, scrollBackgroundStyle]}
-        />
-      )}
-      <View style={styles.headerContent}>
-        <View style={styles.logoContainer}>
-          <Logo
-            width={scale(55)}
-            height={scale(30)}
-            logoUri={logoUri}
-            isLoading={isLoading}
-          />
-        </View>
-        {categories && (
-          <View style={styles.categoryWrapper}>
-            <CategoryCard
-              category={categories}
-              theme={theme}
-              activeCategory={activeCategory}
-              onPressCategory={onPressCategory}
-            />
-          </View>
-        )}
-      </View>
-    </View>
-  );
-};
-
-export default React.memo(HeaderThree);
-
-const styles = StyleSheet.create({
-  wrapper: {
-    overflow: 'hidden',
-  },
-  scrollBackgroundOverlay: {
-    ...StyleSheet.absoluteFill,
-  },
-  headerContent: {
-    flexDirection: 'row',
-    alignItems: 'center',
-    paddingTop: verticalScale(7),
-    paddingHorizontal: scale(10),
-    minHeight: verticalScale(40),
-    zIndex: 9999,
-  },
-  logoContainer: {
-    alignItems: 'center',
-    justifyContent: 'center',
-    marginVertical: verticalScale(5),
-  },
-  categoryWrapper: {
-    flex: 1,
-    marginLeft: scale(10),
-  },
-});

package/src/components/Headers/Two.tsx

@@ -1,101 +0,0 @@
-/**
- * @author Naresh Dhamu
- * @LastModified Mon 13 Jul 2026 at 10:13 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 { useTheme } from '../../theme';
-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 } = useTheme(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,34 +0,0 @@
-/**
- * @author Naresh Dhamu
- * @LastModified Mon 13 Jul 2026 at 10:13 AM
- */
-
-// Import all header components
-import HeaderOne from './One';
-import HeaderTwo from './Two';
-import HeaderThree from './Three';
-import HeaderFour from './Four';
-
-// Export individual header components
-export { default as HeaderOne } from './One';
-export { default as HeaderTwo } from './Two';
-export { default as HeaderThree } from './Three';
-export { default as HeaderFour } from './Four';
-export { default as AppHeader } from './AppHeader';
-
-// Export all props types
-export type { HeaderOneProps } from './One';
-export type { HeaderTwoProps } from './Two';
-export type { HeaderThreeProps } from './Three';
-export type { HeaderFourProps } from './Four';
-export type { AppHeaderProps } from './AppHeader';
-
-// Export Header namespace for convenience
-const Header = {
-  One: HeaderOne,
-  Two: HeaderTwo,
-  Three: HeaderThree,
-  Four: HeaderFour,
-};
-
-export { Header };

package/src/components/Input/Input.ts

@@ -1,18 +0,0 @@
-/**
- * @author Naresh Dhamu
- * @LastModified Mon 13 Jul 2026 at 10:13 AM
- */
-
-import InputOne from './InputOne';
-import InputThree from './InputThree';
-import InputTwo from './InputTwo';
-import { PhoneInput } from './PhoneInput';
-
-const Input = {
-  One: InputOne,
-  Two: InputTwo,
-  Three: InputThree,
-  PhoneInput,
-};
-
-export { Input };