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

package/src/components/Subscription/index.ts

@@ -1,12 +0,0 @@
-/**
- * @author Ashok Desai
- * @lastModified jul 10 Jul 2025 at 6:40 PM
- */
-
-import SubscriptionOne from './SubOne';
-
-const Subscription = {
-  One: SubscriptionOne,
-};
-
-export { Subscription };

package/src/components/TabBar/One.tsx

@@ -1,148 +0,0 @@
-/**
- * @author Naresh Dhamu
- * @lastModified Thu 06 Nov 2025 at 11:50 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 { useInternalTheme } from '../../theme/hook/useInternalTheme';
-import type { ThemeOverride } from '../../theme/themes';
-import { RFValue } from 'react-native-responsive-fontsize';
-import { useSafeAreaInsets } from 'react-native-safe-area-context';
-import { useNavigationMode } from '../../hooks/useNavigationMode';
-
-type ITab = {
-  key: string;
-  name: string;
-  screenComponent: React.ComponentType<any>;
-  icon: React.ComponentType<{
-    width: number;
-    height: number;
-    color: string;
-  }>;
-};
-
-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 TabBarOne = ({ tabs, theme, onTabPress, renderIcon }: TabBarOneProps) => {
-  const { isGestureNav } = useNavigationMode();
-  const insets = useSafeAreaInsets();
-  const { theme: appliedTheme } = useInternalTheme(theme);
-
-  const baseHeight =
-    Platform.OS === 'android'
-      ? isGestureNav
-        ? scale(53)
-        : scale(68)
-      : scale(35);
-
-  const tabBarHeight = 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) => {
-              const {
-                onPress,
-                onLongPress,
-                accessibilityRole,
-                accessibilityState,
-                testID,
-                style,
-                children,
-              } = props;
-              return (
-                <Pressable
-                  android_ripple={{
-                    color: appliedTheme.colors.border,
-                    borderless: true,
-                    radius: scale(30),
-                  }}
-                  onPress={onPress}
-                  onLongPress={onLongPress}
-                  accessibilityRole={accessibilityRole}
-                  accessibilityState={accessibilityState}
-                  testID={testID}
-                  style={style}
-                >
-                  {children}
-                </Pressable>
-              );
-            },
-            onTabPress: () => onTabPress?.(tab.key),
-            tabBarLabel: tab.name,
-            tabBarIcon: ({
-              color,
-            }: {
-              color: string;
-              focused: boolean;
-              size: number;
-            }) => {
-              const iconSize = scale(24);
-              return renderIcon ? (
-                <View style={styles.iconContainer}>
-                  {renderIcon({ icon: tab.icon, color, size: iconSize })}
-                </View>
-              ) : (
-                <View style={styles.iconContainer}>
-                  <tab.icon width={iconSize} height={iconSize} color={color} />
-                </View>
-              );
-            },
-          }}
-        />
-      ))}
-    </Tab.Navigator>
-  );
-};
-
-export default TabBarOne;
-
-const styles = StyleSheet.create({
-  iconContainer: {
-    justifyContent: 'center',
-    alignItems: 'center',
-  },
-});

package/src/components/TabBar/Three.tsx

@@ -1,169 +0,0 @@
-/**
- * @author Naresh Dhamu
- * @lastModified Sun 09 Nov 2025 at 01:33 PM
- */
-
-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 { useInternalTheme } from '../../theme/hook/useInternalTheme';
-
-export interface ITab {
-  key: string;
-  name: string;
-  screenComponent: React.ComponentType<any>;
-  icon: React.ComponentType<{ width: number; height: number; color: string }>;
-}
-
-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 } = useInternalTheme(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) => (
-    <View
-      style={[styles.container, { bottom: insets.bottom + TAB_BAR_OFFSET }]}
-    >
-      <View
-        style={[
-          styles.tabBar,
-          {
-            height: tabBarHeight,
-            width: totalWidth,
-            paddingHorizontal: tabPadding,
-            gap: tabGap,
-            borderRadius: scale(tabBarHeight / 2),
-            borderColor: appliedTheme.colors.border,
-            backgroundColor:
-              Platform.OS === 'android'
-                ? appliedTheme.colors.backdrop
-                : 'transparent',
-          },
-        ]}
-      >
-        {Platform.OS !== 'web' && (
-          <BlurView
-            style={StyleSheet.absoluteFillObject}
-            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,189 +0,0 @@
-/**
- * @author Naresh Dhamu
- * @lastModified Thu 06 Nov 2025 at 12:30 PM
- */
-
-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 { useInternalTheme } from '../../theme/hook/useInternalTheme';
-import type { ThemeOverride } from '../../theme/themes';
-import { RFValue } from 'react-native-responsive-fontsize';
-import { useSafeAreaInsets } from 'react-native-safe-area-context';
-
-export type ITab = {
-  key: string;
-  name: string;
-  screenComponent: React.ComponentType<any>;
-  icon: React.ComponentType<{
-    width: number;
-    height: number;
-    color: string;
-  }>;
-};
-
-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 } = useInternalTheme(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: 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 Ashok Desai
- * @lastModified jun 23 Jun 2025 at 11:40 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,85 +0,0 @@
-import React, { useMemo } from 'react';
-import {
-  Text as RNText,
-  type TextProps as RNTextProps,
-  type TextStyle,
-} from 'react-native';
-import { useInternalTheme } from '../../theme/hook/useInternalTheme';
-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 } = useInternalTheme(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,5 +0,0 @@
-/**
- * @author Naresh Dhamu
- * @lastModified Tue 24 Jun 2025 at 05:02 PM
- */
-export { default as Text } from './Text';