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

package/src/components/BottomSheet/BottomSheet.tsx

@@ -1,204 +0,0 @@
-/**
- * @author Naresh Dhamu
- * @LastModified Mon 13 Jul 2026 at 10:13 AM
- */
-
-import React, { useCallback, useMemo } from 'react';
-import type { ReactNode } from 'react';
-import {
-  TouchableOpacity,
-  StyleSheet,
-  View,
-  ScrollView,
-  Dimensions,
-} from 'react-native';
-import type { ViewStyle, StyleProp } 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 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?: StyleProp<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}
-      animationIn="slideInUp"
-      animationOut="slideOutDown"
-      animationInTiming={260}
-      animationOutTiming={220}
-      backdropTransitionInTiming={200}
-      backdropTransitionOutTiming={180}
-      useNativeDriver
-      useNativeDriverForBackdrop
-      propagateSwipe
-      avoidKeyboard
-      statusBarTranslucent={false}
-      hardwareAccelerated
-      hideModalContentWhileAnimating={false}
-      deviceHeight={SCREEN_HEIGHT}
-    >
-      <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>
-        )}
-      </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,
-    minHeight: 0,
-  },
-  handleIndicator: {
-    width: moderateScale(45),
-    height: verticalScale(4),
-    borderRadius: moderateScale(3),
-    alignSelf: 'center',
-    marginVertical: verticalScale(10),
-  },
-  scrollContent: {
-    flexGrow: 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,223 +0,0 @@
-/**
- * @author Naresh Dhamu
- * @LastModified Mon 13 Jul 2026 at 10:13 AM
- */
-
-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, StyleProp } 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 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?: StyleProp<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}
-      animationIn="slideInUp"
-      animationOut="slideOutDown"
-      animationInTiming={260}
-      animationOutTiming={220}
-      useNativeDriver
-      useNativeDriverForBackdrop
-      propagateSwipe
-      avoidKeyboard
-      statusBarTranslucent={false}
-      hardwareAccelerated
-    >
-      <View
-        style={[
-          styles.bottomSheetContainer,
-          {
-            backgroundColor: theme.colors.background,
-            height: calculatedHeight,
-          },
-        ]}
-      >
-        {backgroundImage && (
-          <>
-            <ImageBackground
-              source={{ uri: backgroundImage }}
-              style={[
-                StyleSheet.absoluteFill,
-                { 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>
-        )}
-      </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.absoluteFill,
-    backgroundColor: 'rgba(0,0,0,0.55)',
-  },
-
-  handleIndicator: {
-    width: moderateScale(60),
-    height: verticalScale(4),
-    borderRadius: moderateScale(30),
-    alignSelf: 'center',
-    marginVertical: verticalScale(10),
-  },
-  scrollContent: {
-    flexGrow: 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,9 +0,0 @@
-/**
- * @author Naresh Dhamu
- * @LastModified Mon 13 Jul 2026 at 10:13 AM
- */
-
-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,149 +0,0 @@
-/**
- * @author Naresh Dhamu
- * @LastModified Tue 14 Jul 2026 at 3:45 PM
- */
-
-import React, { 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 { BlurView } from '@react-native-community/blur';
-import { scale, verticalScale } from 'react-native-size-matters';
-
-import { useTheme } from '../../theme';
-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(30),
-  color,
-  onPress,
-  style,
-  theme,
-  enableBlur = false,
-  label,
-  textStyle,
-}) => {
-  const insets = useSafeAreaInsets();
-  const { theme: appliedTheme } = useTheme(theme);
-
-  const handlePress = useCallback(() => {
-    if (onPress) {
-      onPress();
-      return;
-    }
-
-    Alert.alert(
-      'Back Action Not Provided',
-      'Please define the back action using onPress prop.'
-    );
-  }, [onPress]);
-
-  const flattenedStyle = StyleSheet.flatten(style) || {};
-
-  const hasTopStyle = flattenedStyle.top !== undefined;
-
-  const top = Platform.select({
-    ios: insets.top > 20 ? insets.top - verticalScale(5) : insets.top,
-    android: insets.top + verticalScale(5),
-    default: insets.top,
-  });
-
-  const iconColor = color || appliedTheme.colors.textPrimary;
-
-  const shouldRenderBlur = enableBlur && !!flattenedStyle.backgroundColor;
-
-  const blurFallbackColor =
-    typeof flattenedStyle.backgroundColor === 'string'
-      ? flattenedStyle.backgroundColor
-      : String(appliedTheme.colors.backdrop);
-
-  return (
-    <TouchableOpacity
-      activeOpacity={0.8}
-      onPress={handlePress}
-      hitSlop={{ top: 12, bottom: 12, left: 12, right: 12 }}
-      style={[
-        styles.container,
-        {
-          width: size,
-          height: size,
-        },
-        label && styles.containerWithLabel,
-        !hasTopStyle && { top },
-        style,
-      ]}
-    >
-      {shouldRenderBlur && (
-        <BlurView
-          style={StyleSheet.absoluteFill}
-          blurType="light"
-          blurAmount={10}
-          reducedTransparencyFallbackColor={blurFallbackColor}
-        />
-      )}
-
-      <ArrowLeft size={size * 0.65} color={iconColor} />
-
-      {!!label && (
-        <Text
-          color={iconColor}
-          style={[styles.label, { color: iconColor }, textStyle]}
-        >
-          {label}
-        </Text>
-      )}
-    </TouchableOpacity>
-  );
-};
-
-export default React.memo(BackBtn);
-
-const styles = StyleSheet.create({
-  container: {
-    position: 'absolute',
-    left: scale(13),
-    justifyContent: 'center',
-    alignItems: 'center',
-    borderRadius: scale(100),
-    overflow: 'hidden',
-  },
-
-  containerWithLabel: {
-    width: undefined,
-    paddingHorizontal: scale(12),
-    flexDirection: 'row',
-    borderRadius: scale(20),
-  },
-
-  label: {
-    marginLeft: scale(8),
-    fontSize: scale(14),
-    fontWeight: '600',
-    textShadowColor: 'rgba(0,0,0,0.75)',
-    textShadowOffset: {
-      width: 0,
-      height: 1,
-    },
-    textShadowRadius: 3,
-  },
-});