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

package/src/components/BlogView/BlogView.tsx

@@ -1,276 +0,0 @@
-import React, { useMemo, useCallback } from 'react';
-import {
-  ScrollView,
-  StyleSheet,
-  View,
-  type TextStyle,
-  type ViewStyle,
-  ActivityIndicator,
-} from 'react-native';
-import Markdown from 'react-native-markdown-display';
-import { Text } from '../Text';
-import { useInternalTheme } from '../../theme/hook/useInternalTheme';
-import AppHeader from '../Headers/AppHeader';
-import { scale, moderateScale } from 'react-native-size-matters';
-import type { ITheme, ThemeOverride } from '../../theme/themes';
-import { RFValue } from 'react-native-responsive-fontsize';
-
-type BlogViewProps = {
-  content: string;
-  containerStyle?: ViewStyle;
-  scrollable?: boolean;
-  emptyText?: string;
-  theme?: ThemeOverride;
-
-  // Header customization
-  headerTitle?: string;
-  onBackPress?: () => void;
-  onRightPress?: () => void;
-  headerComponent?: React.ReactNode;
-  renderHeader?: () => React.ReactNode;
-
-  // Custom content
-  renderContent?: () => React.ReactNode;
-  renderEmpty?: () => React.ReactNode;
-
-  isLoading?: boolean;
-};
-
-export const BlogView: React.FC<BlogViewProps> = ({
-  content,
-  containerStyle,
-  scrollable = true,
-  emptyText = 'No content available.',
-  theme,
-  headerTitle = 'Blog',
-  onBackPress = () => {},
-  onRightPress,
-  headerComponent,
-  renderHeader,
-  renderContent,
-  renderEmpty,
-  isLoading = false,
-}) => {
-  const { theme: appliedTheme, isDarkMode } = useInternalTheme(theme);
-
-  // Memoize markdown styles
-  const markdownStyles = useMemo(
-    () => getMarkdownStyles(appliedTheme, isDarkMode),
-    [appliedTheme, isDarkMode]
-  );
-
-  // Memoize header title style
-  const headerTitleStyle = useMemo(
-    () => ({
-      ...styles.headerTitle,
-      color: appliedTheme.colors.onBackground,
-    }),
-    [appliedTheme.colors.onBackground]
-  );
-
-  // Memoize empty text style
-  const emptyTextStyle = useMemo(
-    () => [styles.emptyText, { color: appliedTheme.colors.onSurfaceVariant }],
-    [appliedTheme.colors.onSurfaceVariant]
-  );
-
-  // Memoize container style
-  const containerStyleMemo = useMemo(
-    () => [styles.flex, { backgroundColor: appliedTheme.colors.background }],
-    [appliedTheme.colors.background]
-  );
-
-  // Memoize scroll content style
-  const scrollContentStyle = useMemo(
-    () => [
-      styles.container,
-      containerStyle,
-      { paddingBottom: scale(40), flexGrow: 1 },
-    ],
-    [containerStyle]
-  );
-
-  const renderFinalHeader = useCallback(() => {
-    if (renderHeader) return renderHeader();
-    if (headerComponent) return headerComponent;
-    return (
-      <AppHeader
-        onBackPress={onBackPress}
-        onRightPress={onRightPress}
-        title={headerTitle}
-        titleAlign="left"
-        theme={theme}
-        titleStyle={headerTitleStyle}
-      />
-    );
-  }, [
-    renderHeader,
-    headerComponent,
-    onBackPress,
-    onRightPress,
-    headerTitle,
-    theme,
-    headerTitleStyle,
-  ]);
-
-  const renderFinalContent = useCallback(() => {
-    if (isLoading) {
-      return (
-        <View style={styles.fullCenter}>
-          <ActivityIndicator size="large" color={appliedTheme.colors.primary} />
-        </View>
-      );
-    }
-
-    if (renderContent) return renderContent();
-    if (content) {
-      return <Markdown style={markdownStyles}>{content}</Markdown>;
-    }
-
-    if (renderEmpty) return renderEmpty();
-
-    return (
-      <View style={styles.center}>
-        <Text style={emptyTextStyle}>{emptyText}</Text>
-      </View>
-    );
-  }, [
-    isLoading,
-    renderContent,
-    content,
-    markdownStyles,
-    renderEmpty,
-    emptyText,
-    emptyTextStyle,
-    appliedTheme.colors.primary,
-  ]);
-
-  return (
-    <View style={containerStyleMemo}>
-      {renderFinalHeader()}
-      {scrollable ? (
-        <ScrollView
-          style={styles.flex}
-          contentContainerStyle={scrollContentStyle}
-          showsVerticalScrollIndicator={false}
-          keyboardShouldPersistTaps="handled"
-        >
-          {renderFinalContent()}
-        </ScrollView>
-      ) : (
-        <View style={[styles.container, containerStyle]}>
-          {renderFinalContent()}
-        </View>
-      )}
-    </View>
-  );
-};
-
-export default React.memo(BlogView);
-
-const getMarkdownStyles = (
-  theme: ITheme,
-  isDarkMode: boolean
-): { [key: string]: TextStyle } => {
-  const baseColor = theme.colors.textPrimary;
-
-  return {
-    body: { color: baseColor, fontSize: moderateScale(14) },
-    text: { color: baseColor },
-    paragraph: { color: baseColor, marginBottom: scale(8) },
-    heading1: {
-      fontSize: RFValue(21),
-      fontWeight: 'bold',
-      color: baseColor,
-      marginBottom: scale(12),
-    },
-    heading2: {
-      fontSize: RFValue(19),
-      fontWeight: 'bold',
-      color: baseColor,
-      marginBottom: scale(10),
-    },
-    heading3: {
-      fontSize: RFValue(17),
-      fontWeight: 'bold',
-      color: baseColor,
-      marginBottom: scale(8),
-    },
-    strong: { fontWeight: 'bold', color: baseColor },
-    listItem: { color: baseColor, marginBottom: scale(6) },
-    bullet_list: { color: baseColor },
-    ordered_list: { color: baseColor },
-    link: { color: theme.colors.primary },
-    blockquote: {
-      backgroundColor: isDarkMode
-        ? theme.colors.surfaceVariant
-        : theme.colors.surface,
-      color: theme.colors.onSurface,
-      borderLeftWidth: scale(1.5),
-      borderLeftColor: theme.colors.primary,
-      paddingHorizontal: scale(12),
-      borderRadius: scale(4),
-      marginVertical: scale(10),
-      fontStyle: 'italic',
-      fontSize: RFValue(15),
-    },
-    code_inline: {
-      backgroundColor: theme.colors.surfaceVariant,
-      color: baseColor,
-      fontFamily: 'monospace',
-      paddingHorizontal: scale(4),
-      borderRadius: scale(4),
-    },
-
-    code_block: {
-      backgroundColor: theme.colors.surfaceVariant,
-      color: baseColor,
-      fontFamily: 'monospace',
-      padding: scale(8),
-      borderRadius: scale(6),
-    },
-    fence: {
-      backgroundColor: theme.colors.surfaceVariant,
-      color: baseColor,
-    },
-    hr: {
-      borderBottomColor: theme.colors.outline,
-      borderBottomWidth: StyleSheet.hairlineWidth,
-      marginVertical: scale(16),
-    },
-  };
-};
-
-const styles = StyleSheet.create({
-  flex: {
-    flex: 1,
-  },
-  container: {
-    padding: scale(16),
-  },
-  center: {
-    flex: 1,
-    alignItems: 'center',
-    justifyContent: 'center',
-    paddingHorizontal: scale(16),
-  },
-  fullCenter: {
-    flex: 1,
-    alignItems: 'center',
-    justifyContent: 'center',
-    paddingHorizontal: scale(16),
-  },
-  emptyText: {
-    textAlign: 'center',
-    fontSize: RFValue(13),
-  },
-  headerTitle: {
-    fontSize: RFValue(15),
-    fontWeight: '600',
-  },
-});
-
-export namespace BlogView {
-  export type Props = BlogViewProps;
-  export type Content = Props['content'];
-}

package/src/components/BlogView/index.ts

@@ -1,8 +0,0 @@
-/**
- * @author Naresh Dhamu
- * @lastModified Tue 24 Jun 2025 at 11:11 PM
- */
-
-import { BlogView } from './BlogView';
-
-export { BlogView };

package/src/components/BlurView/BlurView.tsx

@@ -1,199 +0,0 @@
-/**
- * @author Naresh Dhamu
- * @lastModified Thu 06 Nov 2025 at 05:00 PM
- */
-
-import React from 'react';
-import { View, StyleSheet, type ViewStyle, type StyleProp } from 'react-native';
-
-/**
- * BlurView Props - Same as @react-native-community/blur
- */
-export interface BlurViewProps {
-  /** Style of the BlurView container */
-  style?: StyleProp<ViewStyle>;
-
-  /** The blur type (tint) - exactly matches community lib */
-  blurType?:
-    | 'dark'
-    | 'light'
-    | 'xlight'
-    | 'extraDark'
-    | 'regular'
-    | 'prominent'
-    | 'chromeMaterial'
-    | 'material'
-    | 'thickMaterial'
-    | 'thinMaterial'
-    | 'ultraThinMaterial'
-    | 'chromeMaterialDark'
-    | 'materialDark'
-    | 'thickMaterialDark'
-    | 'thinMaterialDark'
-    | 'ultraThinMaterialDark'
-    | 'chromeMaterialLight'
-    | 'materialLight'
-    | 'thickMaterialLight'
-    | 'thinMaterialLight'
-    | 'ultraThinMaterialLight';
-
-  /** The blur intensity amount (0-100) - exactly matches community lib */
-  blurAmount?: number;
-
-  /** Fallback color for reduced transparency - exactly matches community lib */
-  reducedTransparencyFallbackColor?: string;
-
-  /** iOS only: Overlay color - exactly matches community lib */
-  overlayColor?: string;
-
-  /** Android only: Downsample factor (higher = more blur but lower quality) */
-  downsampleFactor?: number;
-
-  /** Android only: Blur radius */
-  blurRadius?: number;
-
-  /** Child components */
-  children?: React.ReactNode;
-}
-
-/**
- * Custom BlurView - 100% Compatible with @react-native-community/blur
- *
- * ✅ Same API as @react-native-community/blur
- * ✅ Works on iOS, Android, and Web
- * ✅ Drop-in replacement - just change the import
- * 🚫 Simulates blur (no live backdrop) using semi-transparent layers
- *
- * @example
- * ```tsx
- * <BlurView
- *   style={styles.blur}
- *   blurType="light"
- *   blurAmount={10}
- *   reducedTransparencyFallbackColor="white"
- * />
- * ```
- */
-const BlurView: React.FC<BlurViewProps> = ({
-  style,
-  blurType = 'light',
-  blurAmount = 100,
-  reducedTransparencyFallbackColor,
-  overlayColor,
-  children,
-}) => {
-  // Clamp blur amount to 0-100 range (same as community lib)
-  const intensity = Math.max(0, Math.min(100, blurAmount));
-
-  // Get tint style based on blur type
-  const tintStyle = getBlurTintStyle(
-    blurType,
-    intensity,
-    reducedTransparencyFallbackColor,
-    overlayColor
-  );
-
-  // Platform-specific rendering
-  return (
-    <View style={[styles.container, style]}>
-      {/* Background blur layer */}
-      <View style={[StyleSheet.absoluteFillObject, tintStyle]} />
-
-      {/* Content layer */}
-      <View pointerEvents="box-none" style={styles.content}>
-        {children}
-      </View>
-    </View>
-  );
-};
-
-/**
- * Get blur tint style based on blurType
- * Matches the exact behavior of @react-native-community/blur
- */
-function getBlurTintStyle(
-  blurType: string,
-  intensity: number,
-  fallbackColor?: string,
-  overlayColor?: string
-): ViewStyle {
-  // If overlayColor is provided, use it (iOS behavior)
-  if (overlayColor) {
-    return { backgroundColor: overlayColor };
-  }
-
-  // Calculate opacity based on intensity (0-100)
-  // Higher intensity = more opaque = stronger blur effect
-  const opacity = Math.min(0.95, intensity / 100);
-  const lightOpacity = opacity * 0.7;
-  const darkOpacity = opacity * 0.8;
-
-  // Match exact blur types from @react-native-community/blur
-  switch (blurType) {
-    // Dark blur types
-    case 'dark':
-      return { backgroundColor: `rgba(0, 0, 0, ${darkOpacity})` };
-    case 'extraDark':
-      return {
-        backgroundColor: `rgba(0, 0, 0, ${Math.min(0.98, darkOpacity * 1.2)})`,
-      };
-    case 'materialDark':
-    case 'thickMaterialDark':
-    case 'chromeMaterialDark':
-      return { backgroundColor: `rgba(28, 28, 30, ${darkOpacity})` };
-    case 'thinMaterialDark':
-      return { backgroundColor: `rgba(28, 28, 30, ${darkOpacity * 0.7})` };
-    case 'ultraThinMaterialDark':
-      return { backgroundColor: `rgba(28, 28, 30, ${darkOpacity * 0.5})` };
-
-    // Light blur types
-    case 'light':
-      return {
-        backgroundColor:
-          fallbackColor || `rgba(255, 255, 255, ${lightOpacity})`,
-      };
-    case 'xlight':
-      return { backgroundColor: `rgba(255, 255, 255, ${lightOpacity * 0.6})` };
-    case 'materialLight':
-    case 'chromeMaterialLight':
-      return { backgroundColor: `rgba(255, 255, 255, ${lightOpacity})` };
-    case 'thickMaterialLight':
-      return { backgroundColor: `rgba(242, 242, 247, ${lightOpacity})` };
-    case 'thinMaterialLight':
-      return { backgroundColor: `rgba(242, 242, 247, ${lightOpacity * 0.7})` };
-    case 'ultraThinMaterialLight':
-      return { backgroundColor: `rgba(242, 242, 247, ${lightOpacity * 0.5})` };
-
-    // Regular/prominent types
-    case 'regular':
-    case 'prominent':
-      return { backgroundColor: `rgba(255, 255, 255, ${lightOpacity * 0.8})` };
-    case 'material':
-    case 'chromeMaterial':
-      return { backgroundColor: `rgba(242, 242, 247, ${lightOpacity})` };
-    case 'thickMaterial':
-      return { backgroundColor: `rgba(242, 242, 247, ${lightOpacity * 1.1})` };
-    case 'thinMaterial':
-      return { backgroundColor: `rgba(242, 242, 247, ${lightOpacity * 0.7})` };
-    case 'ultraThinMaterial':
-      return { backgroundColor: `rgba(242, 242, 247, ${lightOpacity * 0.5})` };
-
-    // Default
-    default:
-      return {
-        backgroundColor:
-          fallbackColor || `rgba(255, 255, 255, ${lightOpacity})`,
-      };
-  }
-}
-
-const styles = StyleSheet.create({
-  container: {
-    overflow: 'hidden',
-  },
-  content: {
-    flex: 1,
-  },
-});
-
-export default BlurView;

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,195 +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}
-      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,
-            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/index.ts

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