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

package/src/components/Headers/AppHeader.tsx

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

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

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

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

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

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

@@ -0,0 +1,18 @@
+/**
+ * @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 };