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

package/src/components/TabBar/One.tsx

@@ -1,145 +0,0 @@
-/**
- * @author Naresh Dhamu
- * @LastModified Mon 13 Jul 2026 at 10:13 AM
- */
-
-import React from 'react';
-import { View, StyleSheet, Pressable, Platform } from 'react-native';
-import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';
-import type { BottomTabBarButtonProps } from '@react-navigation/bottom-tabs';
-import { scale } from 'react-native-size-matters';
-import { useTheme } from '../../theme';
-import type { ThemeOverride } from '../../theme/themes';
-import type { ITab } from '../../types';
-import { RFValue } from 'react-native-responsive-fontsize';
-import { useSafeAreaInsets } from 'react-native-safe-area-context';
-import { useNavigationMode } from '../../hooks/useNavigationMode';
-
-export type TabBarOneProps = {
-  tabs: ITab[];
-  onTabPress?: (key: string) => void;
-  theme?: ThemeOverride;
-  renderIcon?: ({
-    icon,
-    color,
-    size,
-  }: {
-    icon: React.ComponentType<{ width: number; height: number; color: string }>;
-    color: string;
-    size: number;
-  }) => React.ReactNode;
-};
-
-const Tab = createBottomTabNavigator();
-
-const renderTabBarButton = (
-  props: BottomTabBarButtonProps,
-  rippleColor: string
-) => {
-  const {
-    onPress,
-    onLongPress,
-    accessibilityRole,
-    accessibilityState,
-    testID,
-    style,
-    children,
-  } = props;
-  return (
-    <Pressable
-      android_ripple={{
-        color: rippleColor,
-        borderless: true,
-        radius: scale(30),
-      }}
-      onPress={onPress}
-      onLongPress={onLongPress}
-      accessibilityRole={accessibilityRole}
-      accessibilityState={accessibilityState}
-      testID={testID}
-      style={style}
-    >
-      {children}
-    </Pressable>
-  );
-};
-
-const renderTabBarIcon = (
-  TabIcon: ITab['icon'],
-  color: string,
-  renderIcon?: TabBarOneProps['renderIcon']
-) => {
-  const iconSize = scale(24);
-  return renderIcon ? (
-    <View style={styles.iconContainer}>
-      {renderIcon({ icon: TabIcon, color, size: iconSize })}
-    </View>
-  ) : (
-    <View style={styles.iconContainer}>
-      <TabIcon width={iconSize} height={iconSize} color={color} />
-    </View>
-  );
-};
-
-const TabBarOne = ({ tabs, theme, onTabPress, renderIcon }: TabBarOneProps) => {
-  const { isGestureNav } = useNavigationMode();
-  const insets = useSafeAreaInsets();
-  const { theme: appliedTheme } = useTheme(theme);
-
-  const baseHeight =
-    Platform.OS === 'android'
-      ? isGestureNav
-        ? scale(53)
-        : scale(68)
-      : scale(49);
-
-  const tabBarHeight = Math.max(scale(49), baseHeight + insets.bottom);
-
-  return (
-    <Tab.Navigator
-      screenOptions={{
-        headerShown: false,
-        tabBarHideOnKeyboard: true,
-        tabBarStyle: {
-          backgroundColor: appliedTheme.colors.background,
-          borderColor: appliedTheme.colors.border,
-          borderTopWidth: scale(0.5),
-          paddingHorizontal: scale(5),
-          height: tabBarHeight,
-        },
-
-        tabBarActiveTintColor: appliedTheme.colors.primary,
-        tabBarInactiveTintColor: appliedTheme.colors.textPrimary,
-
-        tabBarLabelStyle: {
-          fontSize: RFValue(10),
-        },
-      }}
-    >
-      {tabs.map((tab) => (
-        <Tab.Screen
-          key={tab.key}
-          name={tab.key}
-          component={tab.screenComponent}
-          options={{
-            tabBarButton: (props: BottomTabBarButtonProps) =>
-              renderTabBarButton(props, appliedTheme.colors.border),
-            onTabPress: () => onTabPress?.(tab.key),
-            tabBarLabel: tab.name,
-            tabBarIcon: ({ color }: { color: string }) =>
-              renderTabBarIcon(tab.icon, color, renderIcon),
-          }}
-        />
-      ))}
-    </Tab.Navigator>
-  );
-};
-
-export default TabBarOne;
-
-const styles = StyleSheet.create({
-  iconContainer: {
-    justifyContent: 'center',
-    alignItems: 'center',
-  },
-});

package/src/components/TabBar/Three.tsx

@@ -1,162 +0,0 @@
-/**
- * @author Naresh Dhamu
- * @LastModified Mon 13 Jul 2026 at 10:13 AM
- */
-
-import React from 'react';
-import { View, Pressable, StyleSheet, Platform } from 'react-native';
-import {
-  createBottomTabNavigator,
-  type BottomTabBarProps,
-} from '@react-navigation/bottom-tabs';
-import { scale } from 'react-native-size-matters';
-import { useSafeAreaInsets } from 'react-native-safe-area-context';
-import { BlurView } from '@react-native-community/blur';
-
-import type { ThemeOverride } from '../../theme/themes';
-import type { ITab } from '../../types';
-import { useTheme } from '../../theme';
-
-export interface TabBarThreeProps {
-  tabs: ITab[];
-  theme?: ThemeOverride;
-  onTabPress?: (key: string) => void;
-  tabBarHeight?: number;
-}
-
-const Tab = createBottomTabNavigator();
-const TAB_BAR_HEIGHT = scale(65);
-const TAB_BAR_OFFSET = Platform.OS === 'android' ? scale(5) : scale(8);
-
-const TabBarThree: React.FC<TabBarThreeProps> = ({
-  tabs,
-  theme,
-  onTabPress,
-  tabBarHeight = TAB_BAR_HEIGHT,
-}) => {
-  const insets = useSafeAreaInsets();
-  const { theme: appliedTheme } = useTheme(theme);
-
-  const tabWidth = tabBarHeight - scale(10);
-  const tabPadding = scale(7);
-  const tabGap = scale(8);
-  const totalWidth =
-    tabs.length * tabWidth + tabPadding * 2 + tabGap * (tabs.length - 1);
-
-  const renderTabBar = (props: BottomTabBarProps) => {
-    const containerBottomStyle = {
-      bottom: Math.max(scale(8), insets.bottom + TAB_BAR_OFFSET),
-    };
-    const dynamicTabBarStyle = {
-      height: tabBarHeight,
-      width: totalWidth,
-      paddingHorizontal: tabPadding,
-      gap: tabGap,
-      borderRadius: scale(tabBarHeight / 2),
-      borderColor: appliedTheme.colors.border,
-      backgroundColor:
-        Platform.OS === 'android'
-          ? appliedTheme.colors.backdrop
-          : 'transparent',
-    };
-    return (
-      <View style={[styles.container, containerBottomStyle]}>
-        <View style={[styles.tabBar, dynamicTabBarStyle]}>
-          {Platform.OS !== 'web' && (
-            <BlurView
-              style={StyleSheet.absoluteFill}
-              blurType="light"
-              blurAmount={25}
-              reducedTransparencyFallbackColor="transparent"
-            />
-          )}
-
-          {tabs.map((tab, index) => {
-            const isFocused = props.state.index === index;
-
-            return (
-              <Pressable
-                key={tab.key}
-                onPress={() => {
-                  onTabPress?.(tab.key);
-                  props.navigation.navigate(tab.key);
-                }}
-                style={[
-                  styles.tab,
-                  {
-                    padding: scale(tabBarHeight / 5.1),
-                    borderWidth: Platform.select({
-                      ios: scale(1),
-                      android: scale(1.5),
-                    }),
-                    backgroundColor: isFocused
-                      ? appliedTheme.colors.button
-                      : appliedTheme.colors.background,
-                    borderColor: isFocused
-                      ? appliedTheme.colors.button
-                      : appliedTheme.colors.border,
-                  },
-                ]}
-              >
-                <tab.icon
-                  width={scale(tabBarHeight / 3.1)}
-                  height={scale(tabBarHeight / 3.1)}
-                  color={
-                    isFocused
-                      ? appliedTheme.colors.buttonText
-                      : appliedTheme.colors.textPrimary
-                  }
-                />
-              </Pressable>
-            );
-          })}
-        </View>
-      </View>
-    );
-  };
-
-  return (
-    <Tab.Navigator
-      screenOptions={{
-        headerShown: false,
-        tabBarShowLabel: false,
-        tabBarHideOnKeyboard: true,
-      }}
-      tabBar={renderTabBar}
-    >
-      {tabs.map((tab) => (
-        <Tab.Screen
-          key={tab.key}
-          name={tab.key}
-          component={tab.screenComponent}
-        />
-      ))}
-    </Tab.Navigator>
-  );
-};
-
-const styles = StyleSheet.create({
-  container: {
-    position: 'absolute',
-    left: 0,
-    right: 0,
-    alignItems: 'center',
-  },
-  tabBar: {
-    flexDirection: 'row',
-    justifyContent: 'space-between',
-    alignItems: 'center',
-
-    borderWidth: Platform.select({ ios: scale(1), android: scale(1.5) }),
-    overflow: 'hidden',
-    marginHorizontal: 'auto',
-  },
-  tab: {
-    justifyContent: 'center',
-    alignItems: 'center',
-    borderRadius: scale(100),
-    aspectRatio: 1,
-  },
-});
-
-export default TabBarThree;

package/src/components/TabBar/Two.tsx

@@ -1,179 +0,0 @@
-/**
- * @author Naresh Dhamu
- * @LastModified Mon 13 Jul 2026 at 10:13 AM
- */
-
-import React, { useMemo } from 'react';
-import { View, StyleSheet, Pressable, Platform } from 'react-native';
-import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';
-import type { BottomTabBarButtonProps } from '@react-navigation/bottom-tabs';
-import { scale } from 'react-native-size-matters';
-import { useTheme } from '../../theme';
-import type { ThemeOverride } from '../../theme/themes';
-import type { ITab } from '../../types';
-import { RFValue } from 'react-native-responsive-fontsize';
-import { useSafeAreaInsets } from 'react-native-safe-area-context';
-
-export type TabBarTwoProps = {
-  tabs: ITab[];
-  onTabPress?: (key: string) => void;
-  theme?: ThemeOverride;
-  renderIcon?: ({
-    icon,
-    color,
-    size,
-  }: {
-    icon: React.ComponentType<{ width: number; height: number; color: string }>;
-    color: string;
-    size: number;
-  }) => React.ReactNode;
-};
-
-const Tab = createBottomTabNavigator();
-
-const ICON_SIZE = scale(24);
-const RIPPLE_RADIUS = scale(35);
-const TAB_BAR_HEIGHT = scale(60);
-const TAB_BAR_BORDER_RADIUS = scale(40);
-const TAB_BAR_MARGIN = scale(16);
-const TAB_BAR_BORDER_WIDTH = scale(2);
-const TAB_BAR_BOTTOM_OFFSET = Platform.OS === 'android' ? scale(5) : scale(8);
-
-const CustomTabButton = React.memo(
-  ({
-    props,
-    rippleColor,
-  }: {
-    props: BottomTabBarButtonProps;
-    rippleColor?: string;
-  }) => {
-    const {
-      onPress,
-      onLongPress,
-      accessibilityRole,
-      accessibilityState,
-      testID,
-      style,
-      children,
-    } = props;
-
-    return (
-      <Pressable
-        android_ripple={{
-          color: rippleColor,
-          borderless: true,
-          radius: RIPPLE_RADIUS,
-        }}
-        onPress={onPress}
-        onLongPress={onLongPress}
-        accessibilityRole={accessibilityRole}
-        accessibilityState={accessibilityState}
-        testID={testID}
-        style={[style, styles.tabButton]}
-      >
-        {children}
-      </Pressable>
-    );
-  }
-);
-
-CustomTabButton.displayName = 'CustomTabButton';
-
-const TabBarTwo = ({ tabs, theme, onTabPress, renderIcon }: TabBarTwoProps) => {
-  const insets = useSafeAreaInsets();
-  const { theme: appliedTheme } = useTheme(theme);
-
-  const screenOptions = useMemo(
-    () => ({
-      headerShown: false,
-      tabBarHideOnKeyboard: true,
-
-      tabBarStyle: {
-        backgroundColor: appliedTheme.colors.background,
-        position: 'absolute' as const,
-        borderRadius: TAB_BAR_BORDER_RADIUS,
-        marginHorizontal: TAB_BAR_MARGIN,
-        paddingHorizontal: scale(5),
-        paddingBottom: 0,
-        borderColor: appliedTheme.colors.border,
-        borderWidth: TAB_BAR_BORDER_WIDTH,
-        height: TAB_BAR_HEIGHT,
-        borderTopWidth: TAB_BAR_BORDER_WIDTH,
-        bottom: Math.max(scale(8), insets.bottom + TAB_BAR_BOTTOM_OFFSET),
-      },
-
-      tabBarActiveTintColor: appliedTheme.colors.primary,
-      tabBarInactiveTintColor: appliedTheme.colors.textPrimary,
-
-      tabBarLabelStyle: {
-        fontSize: RFValue(10),
-      },
-    }),
-    [appliedTheme.colors, insets.bottom]
-  );
-
-  return (
-    <Tab.Navigator screenOptions={screenOptions}>
-      {tabs.map((tab) => {
-        const handleTabPress = () => onTabPress?.(tab.key);
-
-        const renderTabIcon = ({
-          color,
-        }: {
-          color: string;
-          focused: boolean;
-          size: number;
-        }) => {
-          if (renderIcon) {
-            return (
-              <View style={styles.iconContainer}>
-                {renderIcon({ icon: tab.icon, color, size: ICON_SIZE })}
-              </View>
-            );
-          }
-
-          return (
-            <View style={styles.iconContainer}>
-              <tab.icon width={ICON_SIZE} height={ICON_SIZE} color={color} />
-            </View>
-          );
-        };
-
-        const renderTabButton = (props: BottomTabBarButtonProps) => (
-          <CustomTabButton
-            props={props}
-            rippleColor={appliedTheme.colors.border}
-          />
-        );
-
-        return (
-          <Tab.Screen
-            key={tab.key}
-            name={tab.key}
-            component={tab.screenComponent}
-            options={{
-              tabBarButton: renderTabButton,
-              tabBarLabel: tab.name,
-              tabBarIcon: renderTabIcon,
-              onTabPress: handleTabPress,
-            }}
-          />
-        );
-      })}
-    </Tab.Navigator>
-  );
-};
-
-export default TabBarTwo;
-
-const styles = StyleSheet.create({
-  tabButton: {
-    flex: 1,
-    justifyContent: 'center',
-    alignItems: 'center',
-  },
-  iconContainer: {
-    justifyContent: 'center',
-    alignItems: 'center',
-  },
-});

package/src/components/TabBar/index.ts

@@ -1,20 +0,0 @@
-/**
- * @author Naresh Dhamu
- * @LastModified Mon 13 Jul 2026 at 10:13 AM
- */
-
-import TabBarOne from './One';
-import TabBarTwo from './Two';
-import TabBarThree from './Three';
-
-const TabBar = {
-  One: TabBarOne,
-  Two: TabBarTwo,
-  Three: TabBarThree,
-};
-
-export type { TabBarOneProps } from './One';
-export type { TabBarTwoProps } from './Two';
-export type { TabBarThreeProps } from './Three';
-
-export { TabBar };

package/src/components/Text/Text.tsx

@@ -1,90 +0,0 @@
-/**
- * @author Naresh Dhamu
- * @LastModified Mon 13 Jul 2026 at 10:13 AM
- */
-
-import React, { useMemo } from 'react';
-import {
-  Text as RNText,
-  type TextProps as RNTextProps,
-  type TextStyle,
-} from 'react-native';
-import { useTheme } from '../../theme';
-import { RFValue } from 'react-native-responsive-fontsize';
-import type { ThemeOverride } from '../../theme/themes';
-
-export interface TextProps extends RNTextProps {
-  children: React.ReactNode;
-  type?: 'title' | 'subtitle' | 'body' | 'caption';
-  size?: number;
-  color?: string;
-  weight?: TextStyle['fontWeight'];
-  align?: TextStyle['textAlign'];
-  fontFamily?: string;
-  numberOfLines?: number;
-  allowFontScaling?: boolean;
-  theme?: ThemeOverride;
-}
-
-const Text: React.FC<TextProps> = ({
-  children,
-  type = 'body',
-  size,
-  color,
-  weight,
-  align = 'left',
-  fontFamily,
-  numberOfLines,
-  allowFontScaling = false,
-  style,
-  theme: overrideTheme,
-  ...rest
-}) => {
-  const { theme } = useTheme(overrideTheme);
-
-  // Memoize default styles for each type
-  const typeStyles = useMemo<
-    Record<
-      string,
-      { size: number; weight: TextStyle['fontWeight']; color?: string }
-    >
-  >(
-    () => ({
-      title: { size: 18, weight: '700', color: theme.colors.textPrimary },
-      subtitle: { size: 14, weight: '500', color: theme.colors.textSecondary },
-      body: { size: 12, weight: '400', color: theme.colors.textPrimary },
-      caption: { size: 10, weight: '400', color: theme.colors.textSecondary },
-    }),
-    [theme.colors.textPrimary, theme.colors.textSecondary]
-  );
-
-  const typeStyle = typeStyles[type] || typeStyles.body;
-
-  // Memoize computed style
-  const computedStyle = useMemo(
-    () => [
-      {
-        color: color ?? typeStyle?.color,
-        fontSize: size ? RFValue(size) : RFValue(Number(typeStyle?.size)),
-        fontWeight: weight ?? typeStyle?.weight,
-        textAlign: align,
-        fontFamily,
-      },
-      style,
-    ],
-    [color, typeStyle, size, weight, align, fontFamily, style]
-  );
-
-  return (
-    <RNText
-      {...rest}
-      allowFontScaling={allowFontScaling}
-      numberOfLines={numberOfLines}
-      style={computedStyle}
-    >
-      {children}
-    </RNText>
-  );
-};
-
-export default React.memo(Text);

package/src/components/Text/index.ts

@@ -1,6 +0,0 @@
-/**
- * @author Naresh Dhamu
- * @LastModified Mon 13 Jul 2026 at 10:13 AM
- */
-
-export { default as Text } from './Text';