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

package/src/components/BackgroundLayout/Two/Two.tsx

@@ -1,65 +0,0 @@
-/**
- * @author Naresh Dhamu
- * @LastModified Mon 13 Jul 2026 at 10:13 AM
- */
-
-import React, { memo, useRef, useEffect } from 'react';
-import { View, StyleSheet, Animated, ImageBackground } from 'react-native';
-import LinearGradient from 'react-native-linear-gradient';
-import { AppStatusBar } from '../../common/AppStatusBar';
-
-const IMAGE_URL =
-  'https://res.cloudinary.com/dm4uaqlio/image/upload/v1704380994/869671_zohjp9.png';
-
-type IProps = {
-  backgroundImageUrl?: string | null;
-  children: React.ReactNode;
-};
-
-const BackgroundLayoutTwo: React.FC<IProps> = ({
-  backgroundImageUrl,
-  children,
-}) => {
-  const fadeAnim = useRef(new Animated.Value(0)).current;
-  const imageUri = backgroundImageUrl ?? IMAGE_URL;
-  useEffect(() => {
-    Animated.timing(fadeAnim, {
-      toValue: 1,
-      duration: 400,
-      useNativeDriver: true,
-    }).start();
-  }, [fadeAnim]);
-
-  return (
-    <View style={styles.root}>
-      <AppStatusBar backgroundColor="transparent" translucent />
-      <ImageBackground
-        source={{ uri: imageUri }}
-        resizeMode="cover"
-        style={StyleSheet.absoluteFill}
-      />
-
-      <Animated.View style={[StyleSheet.absoluteFill, { opacity: fadeAnim }]}>
-        <LinearGradient
-          colors={['rgba(0,0,0,0.85)', 'rgba(0,0,0,0.6)', 'rgba(0,0,0,0.85)']}
-          style={StyleSheet.absoluteFill}
-        />
-
-        <View style={styles.content}>{children}</View>
-      </Animated.View>
-    </View>
-  );
-};
-
-export default memo(BackgroundLayoutTwo);
-
-const styles = StyleSheet.create({
-  root: {
-    flex: 1,
-    backgroundColor: '#000',
-  },
-  content: {
-    flex: 1,
-    width: '100%',
-  },
-});

package/src/components/BackgroundLayout/index.ts

@@ -1,14 +0,0 @@
-/**
- * @author Naresh Dhamu
- * @LastModified Mon 13 Jul 2026 at 10:13 AM
- */
-
-import { BackgroundLayoutOne } from './One/One';
-import BackgroundLayoutTwo from './Two/Two';
-
-export const BackgroundLayout = {
-  One: BackgroundLayoutOne,
-  Two: BackgroundLayoutTwo,
-};
-
-export { BackgroundLayoutOne, BackgroundLayoutTwo };

package/src/components/BlogView/BlogView.tsx

@@ -1,282 +0,0 @@
-/**
- * @author Naresh Dhamu
- * @LastModified Mon 13 Jul 2026 at 10:13 AM
- */
-
-import React, { useMemo, useCallback } from 'react';
-import {
-  ScrollView,
-  StyleSheet,
-  View,
-  type TextStyle,
-  type ViewStyle,
-  type StyleProp,
-  ActivityIndicator,
-} from 'react-native';
-import Markdown from 'react-native-markdown-display';
-import { Text } from '../Text';
-import { useTheme } from '../../theme';
-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?: StyleProp<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 } = useTheme(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 Mon 13 Jul 2026 at 10:13 AM
- */
-
-import { BlogView } from './BlogView';
-
-export { BlogView };

package/src/components/BlurView/BlurView.tsx

@@ -1,199 +0,0 @@
-/**
- * @author Naresh Dhamu
- * @LastModified Mon 13 Jul 2026 at 10:13 AM
- */
-
-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.absoluteFill, 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 Mon 13 Jul 2026 at 10:13 AM
- */
-
-export { default as BlurView, default } from './BlurView';
-export type { BlurViewProps } from './BlurView';