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

package/src/components/Button/MenuBtn.tsx

@@ -0,0 +1,220 @@
+/**
+ * @author Naresh Dhamu
+ * @LastModified Mon 13 Jul 2026 at 10:13 AM
+ */
+
+import React, { useState, useMemo, useCallback, useRef } from 'react';
+import {
+  TouchableOpacity,
+  View,
+  StyleSheet,
+  Modal,
+  Pressable,
+  Text,
+  Platform,
+  StatusBar,
+  type StyleProp,
+  type ViewStyle,
+  type HostInstance,
+} from 'react-native';
+import { Ellipsis } from 'lucide-react-native';
+import { useSafeAreaInsets } from 'react-native-safe-area-context';
+import { BlurView } from '@react-native-community/blur';
+import { useTheme } from '../../theme';
+import { scale, verticalScale } from 'react-native-size-matters';
+import type { ThemeOverride } from '../../theme/themes';
+import type { MenuAction } from '../../types/content/content-view.types';
+import { RFValue } from 'react-native-responsive-fontsize';
+
+type MenuBtnProps = {
+  actions: MenuAction[];
+  theme?: ThemeOverride;
+  style?: StyleProp<ViewStyle>;
+  enableBlur?: boolean;
+};
+
+const MenuBtn: React.FC<MenuBtnProps> = ({
+  actions,
+  theme,
+  style,
+  enableBlur = false,
+}) => {
+  const insets = useSafeAreaInsets();
+  const { theme: appliedTheme } = useTheme(theme);
+  const [visible, setVisible] = useState(false);
+  const [menuPosition, setMenuPosition] = useState<{
+    top: number;
+    right: number;
+  }>({ top: 0, right: scale(13) });
+
+  const btnRef = useRef<HostInstance>(null);
+
+  const flattenedStyle = useMemo(
+    () => StyleSheet.flatten(style) || {},
+    [style]
+  );
+  const shouldRenderBlur = useMemo(
+    () => enableBlur && !!flattenedStyle.backgroundColor,
+    [enableBlur, flattenedStyle.backgroundColor]
+  );
+
+  const openMenu = useCallback(() => {
+    if (!btnRef.current) {
+      setVisible(true);
+      return;
+    }
+    btnRef.current.measureInWindow((_x, y) => {
+      const extraOffset =
+        Platform.OS === 'android'
+          ? (StatusBar.currentHeight ?? 0) - verticalScale(2)
+          : 0;
+      setMenuPosition({
+        top: y + verticalScale(32) + extraOffset,
+        right: scale(13),
+      });
+      setVisible(true);
+    });
+  }, []);
+
+  const closeMenu = useCallback(() => setVisible(false), []);
+  const memoizedActions = useMemo(() => actions, [actions]);
+
+  const dynamicContainerStyle = {
+    top: insets.top + verticalScale(5),
+  };
+  const dynamicBgStyle = {
+    backgroundColor:
+      flattenedStyle.backgroundColor || appliedTheme.colors.backdrop,
+  };
+  const dynamicMenuBoxStyle = {
+    position: 'absolute' as const,
+    top: menuPosition.top,
+    right: menuPosition.right,
+    backgroundColor: appliedTheme.colors.surface,
+  };
+
+  return (
+    <>
+      <TouchableOpacity
+        ref={btnRef}
+        activeOpacity={0.7}
+        style={[styles.container, dynamicContainerStyle, style]}
+        onPress={openMenu}
+      >
+        {shouldRenderBlur && Platform.OS === 'ios' ? (
+          <BlurView
+            style={StyleSheet.absoluteFill}
+            blurType="light"
+            blurAmount={10}
+            reducedTransparencyFallbackColor={String(
+              flattenedStyle.backgroundColor || appliedTheme.colors.backdrop
+            )}
+          />
+        ) : (
+          <View style={[StyleSheet.absoluteFill, dynamicBgStyle]} />
+        )}
+        <Ellipsis size={scale(20)} color={appliedTheme.colors.textPrimary} />
+      </TouchableOpacity>
+
+      <Modal
+        transparent
+        visible={visible}
+        animationType="fade"
+        onRequestClose={closeMenu}
+        hardwareAccelerated
+        presentationStyle="overFullScreen"
+        statusBarTranslucent
+      >
+        <Pressable style={styles.modalRoot} onPress={closeMenu}>
+          <Pressable
+            onPress={() => {}}
+            style={[styles.menuBox, dynamicMenuBoxStyle]}
+          >
+            {memoizedActions.map((action, index) => (
+              <Pressable
+                key={`${action.label}-${index}`}
+                onPress={() => {
+                  closeMenu();
+                  try {
+                    action.onPress();
+                  } catch (error) {
+                    console.error('Action failed:', error);
+                  }
+                }}
+                disabled={action.isLoading || false}
+                style={({ pressed }) => [
+                  styles.menuItem,
+                  {
+                    backgroundColor: pressed
+                      ? appliedTheme.colors.surfaceVariant
+                      : 'transparent',
+                  },
+                ]}
+              >
+                {action?.icon && (
+                  <View style={styles.iconBox}>
+                    <action.icon
+                      size={scale(18)}
+                      color={appliedTheme.colors.textPrimary}
+                    />
+                  </View>
+                )}
+                <Text
+                  style={[
+                    styles.label,
+                    { color: appliedTheme.colors.textPrimary },
+                  ]}
+                >
+                  {action.label}
+                </Text>
+              </Pressable>
+            ))}
+          </Pressable>
+        </Pressable>
+      </Modal>
+    </>
+  );
+};
+
+export default React.memo(MenuBtn);
+
+const styles = StyleSheet.create({
+  container: {
+    position: 'absolute',
+    right: scale(13),
+    padding: scale(6),
+    borderRadius: scale(100),
+    justifyContent: 'center',
+    alignItems: 'center',
+    overflow: 'hidden',
+    zIndex: 4,
+  },
+  modalRoot: {
+    ...StyleSheet.absoluteFill,
+    backgroundColor: 'rgba(0,0,0,0.2)',
+  },
+  menuBox: {
+    borderRadius: scale(6),
+    elevation: 5,
+    shadowColor: '#000',
+    shadowOffset: { width: 0, height: 2 },
+    shadowOpacity: 0.15,
+    shadowRadius: 4,
+    minWidth: scale(150),
+    paddingVertical: verticalScale(2),
+  },
+  menuItem: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    paddingVertical: verticalScale(8),
+    paddingHorizontal: scale(10),
+    borderRadius: scale(5),
+  },
+  iconBox: {
+    marginRight: scale(8),
+  },
+  label: {
+    fontSize: RFValue(12),
+    includeFontPadding: false,
+  },
+});

package/src/components/Button/PrimaryBtn.tsx

@@ -0,0 +1,123 @@
+/**
+ * @author Naresh Dhamu
+ * @LastModified Mon 13 Jul 2026 at 10:13 AM
+ */
+
+import React, { useMemo } from 'react';
+import { useSafePressHandler } from '../../hooks/useSafeCallback';
+import {
+  TouchableOpacity,
+  ActivityIndicator,
+  StyleSheet,
+  View,
+} from 'react-native';
+import { scale, verticalScale } from 'react-native-size-matters';
+import { useTheme } from '../../theme';
+import { Text } from '../Text';
+import { RFValue } from 'react-native-responsive-fontsize';
+import type { ButtonProps } from './types';
+
+export const PrimaryBtn: React.FC<ButtonProps> = ({
+  title,
+  onPress,
+  loading = false,
+  loadingText = 'Loading...',
+  disabled = false,
+  containerStyle,
+  titleStyle,
+  theme,
+  leftIcon,
+}) => {
+  const { theme: appliedTheme } = useTheme(theme);
+
+  const backgroundColor = useMemo(
+    () =>
+      disabled || loading
+        ? appliedTheme.colors?.buttonDisabled
+        : appliedTheme.colors?.button,
+    [
+      disabled,
+      loading,
+      appliedTheme.colors?.buttonDisabled,
+      appliedTheme.colors?.button,
+    ]
+  );
+
+  const buttonStyle = useMemo(
+    () => [styles.button, { backgroundColor }, containerStyle],
+    [backgroundColor, containerStyle]
+  );
+
+  const textStyle = useMemo(
+    () => [styles.text, { color: appliedTheme.colors.buttonText }, titleStyle],
+    [appliedTheme.colors.buttonText, titleStyle]
+  );
+
+  const loadingTextStyle = useMemo(
+    () => [
+      styles.text,
+      { color: appliedTheme.colors.buttonText, opacity: 0.75 },
+      titleStyle,
+    ],
+    [appliedTheme.colors.buttonText, titleStyle]
+  );
+
+  const handlePress = useSafePressHandler(onPress, disabled || loading);
+
+  return (
+    <TouchableOpacity
+      onPress={handlePress}
+      disabled={disabled || loading}
+      activeOpacity={0.8}
+      style={buttonStyle}
+      accessibilityRole="button"
+      accessibilityState={{ disabled: disabled || loading }}
+    >
+      {loading ? (
+        <View style={styles.row}>
+          <ActivityIndicator
+            color={appliedTheme.colors.buttonText}
+            style={styles.activityIndicator}
+          />
+          <Text style={loadingTextStyle}>{loadingText}</Text>
+        </View>
+      ) : (
+        <View style={styles.row}>
+          {leftIcon && <View style={styles.iconWrapper}>{leftIcon}</View>}
+          <Text style={textStyle}>{title}</Text>
+        </View>
+      )}
+    </TouchableOpacity>
+  );
+};
+
+export default React.memo(PrimaryBtn);
+
+const styles = StyleSheet.create({
+  button: {
+    alignSelf: 'stretch',
+    paddingVertical: verticalScale(12),
+    paddingHorizontal: scale(16),
+    borderRadius: scale(6),
+    alignItems: 'center',
+    justifyContent: 'center',
+    minHeight: verticalScale(44),
+    flexShrink: 1,
+  },
+  text: {
+    textAlign: 'center',
+    fontSize: RFValue(13),
+    fontWeight: '600',
+  },
+  row: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+  iconWrapper: {
+    marginRight: scale(8),
+  },
+  activityIndicator: {
+    marginRight: scale(8),
+  },
+});

package/src/components/Button/SecondaryBtn.tsx

@@ -0,0 +1,123 @@
+/**
+ * @author Naresh Dhamu
+ * @LastModified Mon 13 Jul 2026 at 10:13 AM
+ */
+
+import React, { useMemo } from 'react';
+import { useSafePressHandler } from '../../hooks/useSafeCallback';
+import {
+  TouchableOpacity,
+  ActivityIndicator,
+  StyleSheet,
+  View,
+} from 'react-native';
+import { scale, verticalScale } from 'react-native-size-matters';
+import { useTheme } from '../../theme';
+import { Text } from '../Text';
+import { RFValue } from 'react-native-responsive-fontsize';
+import type { ButtonProps } from './types';
+
+export const SecondaryBtn: React.FC<ButtonProps> = ({
+  title,
+  onPress,
+  loading = false,
+  loadingText = 'Loading...',
+  disabled = false,
+  containerStyle,
+  titleStyle,
+  leftIcon,
+  theme,
+}) => {
+  const { theme: appliedTheme } = useTheme(theme);
+
+  // borderColor and textColor are identical — unified into a single accentColor
+  const accentColor = useMemo(
+    () =>
+      disabled || loading
+        ? appliedTheme.colors?.buttonDisabled
+        : appliedTheme.colors?.button,
+    [
+      disabled,
+      loading,
+      appliedTheme.colors?.buttonDisabled,
+      appliedTheme.colors?.button,
+    ]
+  );
+
+  const buttonStyle = useMemo(
+    () => [styles.button, { borderColor: accentColor }, containerStyle],
+    [accentColor, containerStyle]
+  );
+
+  const textStyle = useMemo(
+    () => [styles.text, { color: accentColor }, titleStyle],
+    [accentColor, titleStyle]
+  );
+
+  const loadingTextStyle = useMemo(
+    () => [styles.text, { color: accentColor, opacity: 0.75 }, titleStyle],
+    [accentColor, titleStyle]
+  );
+
+  const handlePress = useSafePressHandler(onPress, disabled || loading);
+
+  return (
+    <TouchableOpacity
+      onPress={handlePress}
+      disabled={disabled || loading}
+      activeOpacity={0.7}
+      style={buttonStyle}
+      accessibilityRole="button"
+      accessibilityState={{ disabled: disabled || loading }}
+    >
+      <View style={styles.row}>
+        {leftIcon && <View style={styles.iconWrapper}>{leftIcon}</View>}
+
+        {loading ? (
+          <>
+            <ActivityIndicator
+              color={accentColor}
+              style={styles.activityIndicator}
+            />
+            <Text style={loadingTextStyle}>{loadingText}</Text>
+          </>
+        ) : (
+          <Text style={textStyle}>{title}</Text>
+        )}
+      </View>
+    </TouchableOpacity>
+  );
+};
+
+export default React.memo(SecondaryBtn);
+
+const styles = StyleSheet.create({
+  button: {
+    alignSelf: 'stretch',
+    paddingVertical: verticalScale(11),
+    paddingHorizontal: scale(16),
+    borderRadius: scale(6),
+    borderWidth: scale(1.5),
+    backgroundColor: 'transparent',
+    alignItems: 'center',
+    justifyContent: 'center',
+    minHeight: verticalScale(44),
+    flexShrink: 1,
+  },
+  row: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+  text: {
+    textAlign: 'center',
+    fontSize: RFValue(13),
+    fontWeight: '600',
+  },
+  iconWrapper: {
+    marginRight: scale(8),
+  },
+  activityIndicator: {
+    marginRight: scale(6),
+  },
+});

package/src/components/Button/TextButton.tsx

@@ -0,0 +1,150 @@
+/**
+ * @author Naresh Dhamu
+ * @LastModified Mon 13 Jul 2026 at 10:13 AM
+ */
+
+import React, { useMemo } from 'react';
+import { useSafePressHandler } from '../../hooks/useSafeCallback';
+import {
+  StyleSheet,
+  Pressable,
+  View,
+  type StyleProp,
+  type TextStyle,
+  type ViewStyle,
+} from 'react-native';
+import { useTheme } from '../../theme';
+import { scale, verticalScale } from 'react-native-size-matters';
+import { Text } from '../Text';
+import { RFValue } from 'react-native-responsive-fontsize';
+
+type TextButtonProps = {
+  title: string;
+  onPress: () => void;
+  color?: string;
+  style?: StyleProp<TextStyle>;
+  containerStyle?: StyleProp<ViewStyle>;
+  disabled?: boolean;
+  underline?: boolean;
+  bold?: boolean;
+  align?: 'left' | 'center' | 'right';
+  leftIcon?: React.ReactNode;
+};
+
+const TextButton: React.FC<TextButtonProps> = ({
+  title,
+  onPress,
+  color,
+  style,
+  containerStyle,
+  disabled = false,
+  underline = false,
+  bold = false,
+  align = 'center',
+  leftIcon,
+}) => {
+  const { theme } = useTheme();
+
+  const alignSelfMap = useMemo<
+    Record<'left' | 'center' | 'right', ViewStyle['alignSelf']>
+  >(
+    () => ({
+      left: 'flex-start',
+      center: 'center',
+      right: 'flex-end',
+    }),
+    []
+  );
+
+  const alignSelf = useMemo(() => alignSelfMap[align], [alignSelfMap, align]);
+
+  const textStyle = useMemo<TextStyle>(
+    () => ({
+      textAlign: align,
+      textDecorationLine: underline ? 'underline' : 'none',
+      fontWeight: bold ? '700' : '400',
+    }),
+    [align, underline, bold]
+  );
+
+  const textColor = useMemo(
+    () => color || theme.colors.textPrimary,
+    [color, theme.colors.textPrimary]
+  );
+
+  const justifyContent = useMemo<ViewStyle['justifyContent']>(
+    () =>
+      align === 'left'
+        ? 'flex-start'
+        : align === 'right'
+          ? 'flex-end'
+          : 'center',
+    [align]
+  );
+
+  const rowStyle = useMemo<ViewStyle[]>(
+    () => [styles.row, { justifyContent }],
+    [justifyContent]
+  );
+
+  const finalTextStyle = useMemo(
+    () => [styles.text, textStyle, style],
+    [textStyle, style]
+  );
+
+  const handlePress = useSafePressHandler(onPress, disabled);
+
+  return (
+    <Pressable
+      onPress={handlePress}
+      disabled={disabled}
+      accessibilityRole="button"
+      accessibilityState={{ disabled }}
+      style={({ pressed }) => [
+        styles.defaultContainer,
+        { alignSelf },
+        containerStyle,
+        pressed && styles.pressed,
+        disabled && styles.disabled,
+      ]}
+    >
+      <View style={rowStyle}>
+        {leftIcon && <View style={styles.iconSpacing}>{leftIcon}</View>}
+        <Text
+          color={textColor}
+          style={finalTextStyle}
+          size={12}
+          numberOfLines={1}
+          allowFontScaling={false}
+        >
+          {title}
+        </Text>
+      </View>
+    </Pressable>
+  );
+};
+
+export default React.memo(TextButton);
+
+const styles = StyleSheet.create({
+  defaultContainer: {
+    paddingVertical: verticalScale(4),
+    paddingHorizontal: scale(6),
+  },
+  text: {
+    fontSize: RFValue(10),
+  },
+  row: {
+    flexDirection: 'row',
+    alignItems: 'center',
+  },
+  iconSpacing: {
+    marginRight: scale(1),
+  },
+  pressed: {
+    opacity: 0.6,
+  },
+  disabled: {
+    opacity: 0.4,
+  },
+});

package/src/components/Button/index.ts

@@ -0,0 +1,18 @@
+/**
+ * @author Naresh Dhamu
+ * @LastModified Mon 13 Jul 2026 at 10:13 AM
+ */
+
+import BackBtn from './BackBtn';
+import { PrimaryBtn } from './PrimaryBtn';
+import { SecondaryBtn } from './SecondaryBtn';
+import TextButton from './TextButton';
+
+const Button = {
+  Primary: PrimaryBtn,
+  Secondary: SecondaryBtn,
+  BackBtn,
+  TextButton,
+};
+
+export { Button };

package/src/components/Button/types.ts

@@ -0,0 +1,33 @@
+/**
+ * @author Naresh Dhamu
+ * @LastModified Mon 13 Jul 2026 at 10:13 AM
+ */
+
+import type React from 'react';
+import type { StyleProp, ViewStyle, TextStyle } from 'react-native';
+import type { ThemeOverride } from '../../theme/themes';
+
+/**
+ * Shared base props used by PrimaryBtn and SecondaryBtn.
+ * Keeping them in sync ensures both buttons accept the same API.
+ */
+export type ButtonProps = {
+  /** Button label */
+  title: string;
+  /** Press handler */
+  onPress?: () => void;
+  /** Show loading spinner instead of label */
+  loading?: boolean;
+  /** Label shown next to the spinner while loading */
+  loadingText?: string;
+  /** Disables press and applies disabled styling */
+  disabled?: boolean;
+  /** Override outer container style — accepts array / StyleSheet ref / null */
+  containerStyle?: StyleProp<ViewStyle>;
+  /** Override text style — accepts array / StyleSheet ref / null */
+  titleStyle?: StyleProp<TextStyle>;
+  /** Theme override */
+  theme?: ThemeOverride;
+  /** Optional icon rendered to the left of the label */
+  leftIcon?: React.ReactNode;
+};