@zezosoft/zezo-ott-react-native-ui-kit 1.1.5 → 1.1.7

package/src/components/BlurView/index.ts

@@ -1,7 +0,0 @@
-/**
- * @author Naresh Dhamu
- * @lastModified Thu 06 Nov 2025 at 05:00 PM
- */
-
-export { default as BlurView, default } from './BlurView';
-export type { BlurViewProps } from './BlurView';

package/src/components/BottomSheet/BottomSheet.tsx

@@ -1,200 +0,0 @@
-import React, { useCallback, useMemo } from 'react';
-import type { ReactNode } from 'react';
-import {
-  TouchableOpacity,
-  StyleSheet,
-  View,
-  ScrollView,
-  Dimensions,
-} from 'react-native';
-import type { ViewStyle } from 'react-native';
-import Modal from 'react-native-modal';
-import { X } from 'lucide-react-native';
-import { moderateScale, verticalScale } from 'react-native-size-matters';
-import { RFValue } from 'react-native-responsive-fontsize';
-import Animated from 'react-native-reanimated';
-import type { ITheme } from '../../theme';
-import { Text } from '../Text';
-
-const { height: SCREEN_HEIGHT } = Dimensions.get('window');
-
-export interface BottomSheetProps {
-  theme: ITheme;
-  children: ReactNode;
-  title?: string;
-  height?: string | number;
-  showCloseButton?: boolean;
-  visible?: boolean;
-  onClose?: () => void;
-  handleIndicatorStyle?: ViewStyle;
-  scrollable?: boolean;
-}
-
-const BottomSheet: React.FC<BottomSheetProps> = ({
-  theme,
-  children,
-  title,
-  height,
-  showCloseButton = true,
-  visible = false,
-  onClose,
-  handleIndicatorStyle,
-  scrollable = true,
-}) => {
-  const calculatedHeight = useMemo(() => {
-    if (!height) return SCREEN_HEIGHT * 0.75;
-
-    if (typeof height === 'number') return height;
-
-    if (typeof height === 'string' && height.includes('%')) {
-      const num = parseFloat(height);
-      if (!isNaN(num)) {
-        return (num / 100) * SCREEN_HEIGHT;
-      }
-    }
-
-    return SCREEN_HEIGHT * 0.75;
-  }, [height]);
-
-  const handleClosePress = useCallback(() => {
-    onClose?.();
-  }, [onClose]);
-
-  const renderHeader = useMemo(() => {
-    if (title) {
-      return (
-        <Text style={[styles.title, { color: theme.colors.textPrimary }]}>
-          {title}
-        </Text>
-      );
-    }
-    return null;
-  }, [title, theme.colors.textPrimary]);
-
-  const renderCloseButton = useMemo(() => {
-    if (!showCloseButton) return null;
-    return (
-      <TouchableOpacity
-        onPress={handleClosePress}
-        style={[
-          styles.closeButtonWrapper,
-          { backgroundColor: theme.colors.button },
-        ]}
-        activeOpacity={0.8}
-      >
-        <X size={moderateScale(16)} color={theme.colors.buttonText} />
-      </TouchableOpacity>
-    );
-  }, [showCloseButton, handleClosePress, theme.colors]);
-
-  return (
-    <Modal
-      isVisible={visible}
-      onBackdropPress={handleClosePress}
-      onBackButtonPress={handleClosePress}
-      onSwipeComplete={handleClosePress}
-      style={styles.modal}
-      backdropOpacity={0.45}
-      swipeDirection="down"
-      animationIn="slideInUp"
-      animationOut="slideOutDown"
-      animationInTiming={260}
-      animationOutTiming={220}
-      backdropTransitionInTiming={200}
-      backdropTransitionOutTiming={180}
-      useNativeDriver
-      useNativeDriverForBackdrop
-      propagateSwipe
-      avoidKeyboard
-      statusBarTranslucent={false}
-      hardwareAccelerated
-      hideModalContentWhileAnimating={false}
-      deviceHeight={SCREEN_HEIGHT}
-    >
-      <Animated.View
-        style={[
-          styles.bottomSheetContainer,
-          {
-            backgroundColor: theme.colors.background,
-            maxHeight: calculatedHeight,
-          },
-        ]}
-      >
-        {renderCloseButton}
-        <View
-          style={[
-            styles.handleIndicator,
-            { backgroundColor: theme.colors.button },
-            handleIndicatorStyle,
-          ]}
-        />
-
-        {scrollable ? (
-          <ScrollView
-            showsVerticalScrollIndicator={false}
-            bounces={false}
-            nestedScrollEnabled
-            keyboardShouldPersistTaps="handled"
-            contentContainerStyle={styles.scrollContent}
-          >
-            {renderHeader}
-            {children}
-          </ScrollView>
-        ) : (
-          <View style={styles.viewContent}>
-            {renderHeader}
-            {children}
-          </View>
-        )}
-      </Animated.View>
-    </Modal>
-  );
-};
-
-export default BottomSheet;
-
-const styles = StyleSheet.create({
-  modal: {
-    justifyContent: 'flex-end',
-    margin: 0,
-  },
-  bottomSheetContainer: {
-    borderTopLeftRadius: moderateScale(22),
-    borderTopRightRadius: moderateScale(22),
-    overflow: 'hidden',
-    position: 'relative',
-    flex: 1,
-  },
-  handleIndicator: {
-    width: moderateScale(45),
-    height: verticalScale(4),
-    borderRadius: moderateScale(3),
-    alignSelf: 'center',
-    marginVertical: verticalScale(10),
-  },
-  scrollContent: {
-    flex: 1,
-    paddingBottom: verticalScale(30),
-    paddingHorizontal: moderateScale(12),
-  },
-  viewContent: {
-    paddingBottom: verticalScale(10),
-    paddingHorizontal: moderateScale(12),
-    flex: 1,
-  },
-  closeButtonWrapper: {
-    position: 'absolute',
-    top: verticalScale(10),
-    right: moderateScale(14),
-    borderRadius: moderateScale(18),
-    padding: moderateScale(6),
-    zIndex: 1000,
-    elevation: 10,
-  },
-  title: {
-    fontSize: RFValue(16),
-    fontWeight: '700',
-    textAlign: 'center',
-    marginBottom: verticalScale(15),
-  },
-});

package/src/components/BottomSheet/BottomSheetOne.tsx

@@ -1,220 +0,0 @@
-import React, { useCallback, useMemo } from 'react';
-import type { ReactNode } from 'react';
-import {
-  TouchableOpacity,
-  StyleSheet,
-  View,
-  ScrollView,
-  Dimensions,
-  ImageBackground,
-  Platform,
-} from 'react-native';
-import type { ViewStyle } from 'react-native';
-import Modal from 'react-native-modal';
-import { X } from 'lucide-react-native';
-import { moderateScale, verticalScale } from 'react-native-size-matters';
-import { RFValue } from 'react-native-responsive-fontsize';
-import Animated from 'react-native-reanimated';
-import type { ITheme } from '../../theme';
-import { Text } from '../Text';
-import FastImage from 'react-native-fast-image';
-
-const { height: SCREEN_HEIGHT } = Dimensions.get('window');
-
-export interface BottomSheetOneProps {
-  theme: ITheme;
-  children: ReactNode;
-  backgroundImage?: string;
-  title?: string;
-  height?: string | number;
-  showCloseButton?: boolean;
-  visible?: boolean;
-  onClose?: () => void;
-  handleIndicatorStyle?: ViewStyle;
-  scrollable?: boolean;
-}
-
-const BottomSheetOne: React.FC<BottomSheetOneProps> = ({
-  theme,
-  children,
-  title,
-  height,
-  backgroundImage,
-  showCloseButton = true,
-  visible = false,
-  onClose,
-  handleIndicatorStyle,
-  scrollable = true,
-}) => {
-  const calculatedHeight = useMemo(() => {
-    if (!height) return SCREEN_HEIGHT * 0.75;
-
-    if (typeof height === 'number') return height;
-
-    if (typeof height === 'string' && height.includes('%')) {
-      const num = parseFloat(height);
-      if (!isNaN(num)) {
-        return (num / 100) * SCREEN_HEIGHT;
-      }
-    }
-
-    return SCREEN_HEIGHT * 0.75;
-  }, [height]);
-
-  const handleClosePress = useCallback(() => {
-    onClose?.();
-  }, [onClose]);
-
-  const renderHeader = useMemo(() => {
-    if (title) {
-      return (
-        <Text style={[styles.title, { color: theme.colors.textPrimary }]}>
-          {title}
-        </Text>
-      );
-    }
-    return null;
-  }, [title, theme.colors.textPrimary]);
-
-  const renderCloseButton = useMemo(() => {
-    if (!showCloseButton) return null;
-    return (
-      <TouchableOpacity
-        onPress={handleClosePress}
-        style={[
-          styles.closeButtonWrapper,
-          { backgroundColor: theme.colors.black },
-        ]}
-        activeOpacity={0.8}
-      >
-        <X size={moderateScale(22)} color={theme.colors.white} />
-      </TouchableOpacity>
-    );
-  }, [showCloseButton, handleClosePress, theme.colors]);
-
-  return (
-    <Modal
-      isVisible={visible}
-      onBackdropPress={handleClosePress}
-      onSwipeComplete={handleClosePress}
-      style={styles.modal}
-      backdropOpacity={0.45}
-      // swipeDirection="down"
-      animationIn="slideInUp"
-      animationOut="slideOutDown"
-      animationInTiming={260}
-      animationOutTiming={220}
-      useNativeDriver
-      useNativeDriverForBackdrop
-      propagateSwipe
-      avoidKeyboard
-      statusBarTranslucent={false}
-      hardwareAccelerated
-    >
-      <Animated.View
-        style={[
-          styles.bottomSheetContainer,
-          {
-            backgroundColor: theme.colors.background,
-            height: calculatedHeight,
-          },
-        ]}
-      >
-        {backgroundImage && (
-          <>
-            <ImageBackground
-              source={{ uri: backgroundImage }}
-              style={[
-                StyleSheet.absoluteFillObject,
-                { backgroundColor: theme.colors.background },
-              ]}
-              resizeMode={FastImage.resizeMode.cover}
-              blurRadius={Platform.OS === 'ios' ? 15 : 25}
-            />
-            <View style={styles.backgroundOverlay} />
-          </>
-        )}
-
-        {renderCloseButton}
-
-        <View
-          style={[
-            styles.handleIndicator,
-            { backgroundColor: theme.colors.textSecondary },
-            handleIndicatorStyle,
-          ]}
-        />
-
-        {scrollable ? (
-          <ScrollView
-            showsVerticalScrollIndicator={false}
-            bounces={false}
-            nestedScrollEnabled
-            keyboardShouldPersistTaps="handled"
-            contentContainerStyle={styles.scrollContent}
-          >
-            {renderHeader}
-            {children}
-          </ScrollView>
-        ) : (
-          <View style={styles.viewContent}>
-            {renderHeader}
-            {children}
-          </View>
-        )}
-      </Animated.View>
-    </Modal>
-  );
-};
-
-export default BottomSheetOne;
-
-const styles = StyleSheet.create({
-  modal: {
-    justifyContent: 'flex-end',
-    margin: 0,
-  },
-  bottomSheetContainer: {
-    borderTopLeftRadius: moderateScale(22),
-    borderTopRightRadius: moderateScale(22),
-    overflow: 'hidden',
-    position: 'relative',
-  },
-  backgroundOverlay: {
-    ...StyleSheet.absoluteFillObject,
-    backgroundColor: 'rgba(0,0,0,0.55)',
-  },
-
-  handleIndicator: {
-    width: moderateScale(60),
-    height: verticalScale(4),
-    borderRadius: moderateScale(30),
-    alignSelf: 'center',
-    marginVertical: verticalScale(10),
-  },
-  scrollContent: {
-    flex: 1,
-    paddingBottom: verticalScale(30),
-    paddingHorizontal: moderateScale(12),
-  },
-  viewContent: {
-    paddingBottom: verticalScale(10),
-    paddingHorizontal: moderateScale(12),
-    flex: 1,
-  },
-  closeButtonWrapper: {
-    position: 'absolute',
-    top: verticalScale(10),
-    right: moderateScale(14),
-    borderRadius: moderateScale(30),
-    padding: moderateScale(10),
-    zIndex: 1000,
-    elevation: 10,
-  },
-  title: {
-    fontSize: RFValue(16),
-    fontWeight: '700',
-    textAlign: 'center',
-    marginBottom: verticalScale(15),
-  },
-});

package/src/components/BottomSheet/index.ts

@@ -1,4 +0,0 @@
-export { default as BottomSheet } from './BottomSheet';
-export { default as BottomSheetOne } from './BottomSheetOne';
-export type { BottomSheetProps } from './BottomSheet';
-export type { BottomSheetOneProps } from './BottomSheetOne';

package/src/components/Button/BackBtn.tsx

@@ -1,168 +0,0 @@
-/**
- * @author Naresh Dhamu
- * @lastModified Wed 02 Jul 2025 at 09:30 AM
- */
-import React, { useMemo, useCallback } from 'react';
-import {
-  TouchableOpacity,
-  StyleSheet,
-  Alert,
-  Platform,
-  type ViewStyle,
-  type TextStyle,
-  type StyleProp,
-} from 'react-native';
-import { ArrowLeft } from 'lucide-react-native';
-import { useSafeAreaInsets } from 'react-native-safe-area-context';
-import { useInternalTheme } from '../../theme/hook/useInternalTheme';
-import { scale, verticalScale } from 'react-native-size-matters';
-import { BlurView } from '@react-native-community/blur';
-import type { ThemeOverride } from '../../theme/themes';
-import { Text } from '../Text';
-
-type BackBtnProps = {
-  size?: number;
-  color?: string;
-  onPress?: () => void;
-  style?: StyleProp<ViewStyle>;
-  theme?: ThemeOverride;
-  enableBlur?: boolean;
-  label?: string;
-  textStyle?: StyleProp<TextStyle>;
-};
-
-const BackBtn: React.FC<BackBtnProps> = ({
-  size = scale(24),
-  color,
-  onPress,
-  style,
-  theme,
-  enableBlur = false,
-  label,
-  textStyle,
-}) => {
-  const insets = useSafeAreaInsets();
-  const { theme: appliedTheme } = useInternalTheme(theme);
-
-  const handlePress = useCallback(() => {
-    if (onPress) {
-      onPress();
-    } else {
-      Alert.alert(
-        'Back Action Not Provided',
-        'Please define the back action using onPress prop.'
-      );
-    }
-  }, [onPress]);
-
-  const flattenedStyle = useMemo(
-    () => StyleSheet.flatten(style) || {},
-    [style]
-  );
-
-  const hasTopInStyle = useMemo(
-    () => style && flattenedStyle.top !== undefined,
-    [style, flattenedStyle.top]
-  );
-
-  const calculatedTop = useMemo(
-    () =>
-      Platform.select({
-        ios: insets.top > 20 ? insets.top - verticalScale(5) : insets.top,
-        android: insets.top + verticalScale(5),
-        default: insets.top,
-      }),
-    [insets.top]
-  );
-
-  const hasBackground = useMemo(
-    () => !!flattenedStyle.backgroundColor,
-    [flattenedStyle.backgroundColor]
-  );
-
-  const shouldRenderBlur = useMemo(
-    () => enableBlur && hasBackground,
-    [enableBlur, hasBackground]
-  );
-
-  const hasLabel = useMemo(() => !!label, [label]);
-
-  const iconColor = useMemo(
-    () => color || appliedTheme.colors.textPrimary,
-    [color, appliedTheme.colors.textPrimary]
-  );
-
-  const containerStyle = useMemo(
-    () => [
-      styles.container,
-      hasLabel && styles.containerWithText,
-      !hasTopInStyle && { top: calculatedTop },
-      style,
-    ],
-    [hasLabel, hasTopInStyle, calculatedTop, style]
-  );
-
-  const textStyleMemo = useMemo(
-    () => [styles.text, { color: iconColor }, textStyle],
-    [iconColor, textStyle]
-  );
-
-  const blurFallbackColor = useMemo(
-    () =>
-      (typeof flattenedStyle.backgroundColor === 'string'
-        ? flattenedStyle.backgroundColor
-        : undefined) || String(appliedTheme.colors.backdrop),
-    [flattenedStyle.backgroundColor, appliedTheme.colors.backdrop]
-  );
-
-  return (
-    <TouchableOpacity
-      activeOpacity={0.8}
-      style={containerStyle}
-      onPress={handlePress}
-    >
-      {shouldRenderBlur && (
-        <BlurView
-          style={StyleSheet.absoluteFill}
-          blurType="light"
-          blurAmount={10}
-          reducedTransparencyFallbackColor={blurFallbackColor}
-        />
-      )}
-
-      <ArrowLeft size={size} color={iconColor} />
-      {hasLabel && (
-        <Text style={textStyleMemo} color={iconColor}>
-          {label}
-        </Text>
-      )}
-    </TouchableOpacity>
-  );
-};
-
-export default React.memo(BackBtn);
-
-const styles = StyleSheet.create({
-  container: {
-    position: 'absolute',
-    left: scale(13),
-    padding: scale(6),
-    borderRadius: scale(100),
-    justifyContent: 'center',
-    alignItems: 'center',
-    overflow: 'hidden',
-  },
-  containerWithText: {
-    flexDirection: 'row',
-    borderRadius: scale(20),
-    paddingHorizontal: scale(12),
-  },
-  text: {
-    fontSize: scale(14),
-    fontWeight: '600',
-    marginLeft: scale(8),
-    textShadowColor: 'rgba(0, 0, 0, 0.75)',
-    textShadowOffset: { width: 0, height: 1 },
-    textShadowRadius: 3,
-  },
-});