@zezosoft/zezo-ott-react-native-ui-kit 1.0.2 → 1.0.3

package/src/components/Button/MenuBtn.tsx

@@ -16,7 +16,7 @@ import {
   UIManager,
   StatusBar,
   type StyleProp,
-  type ViewStyle
+  type ViewStyle,
 } from 'react-native';
 import { Ellipsis } from 'lucide-react-native';
 import { useSafeAreaInsets } from 'react-native-safe-area-context';
@@ -34,15 +34,26 @@ type MenuBtnProps = {
   enableBlur?: boolean;
 };
 
-const MenuBtn: React.FC<MenuBtnProps> = ({ actions, theme, style, enableBlur = false }) => {
+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 [menuPosition, setMenuPosition] = useState<{
+    top: number;
+    right: number;
+  }>({ top: 0, right: scale(13) });
 
   const btnRef = useRef(null);
 
-  const flattenedStyle = useMemo(() => StyleSheet.flatten(style) || {}, [style]);
+  const flattenedStyle = useMemo(
+    () => StyleSheet.flatten(style) || {},
+    [style]
+  );
   const shouldRenderBlur = useMemo(
     () => enableBlur && !!flattenedStyle.backgroundColor,
     [enableBlur, flattenedStyle.backgroundColor]
@@ -52,8 +63,14 @@ const MenuBtn: React.FC<MenuBtnProps> = ({ actions, theme, style, enableBlur = f
     const handle = findNodeHandle(btnRef.current);
     if (handle) {
       UIManager.measureInWindow(handle, (_x, y, _w, _h) => {
-        const extraOffset = Platform.OS === 'android' ? (StatusBar.currentHeight ?? 0) - verticalScale(2) : 0;
-        setMenuPosition({ top: y + verticalScale(32) + extraOffset, right: scale(13) });
+        const extraOffset =
+          Platform.OS === 'android'
+            ? (StatusBar.currentHeight ?? 0) - verticalScale(2)
+            : 0;
+        setMenuPosition({
+          top: y + verticalScale(32) + extraOffset,
+          right: scale(13),
+        });
         setVisible(true);
       });
     } else {
@@ -69,7 +86,11 @@ const MenuBtn: React.FC<MenuBtnProps> = ({ actions, theme, style, enableBlur = f
       <TouchableOpacity
         ref={btnRef}
         activeOpacity={0.7}
-        style={[styles.container, { top: insets.top + verticalScale(5) }, style]}
+        style={[
+          styles.container,
+          { top: insets.top + verticalScale(5) },
+          style,
+        ]}
         onPress={openMenu}
       >
         {shouldRenderBlur && Platform.OS === 'ios' ? (
@@ -77,13 +98,19 @@ const MenuBtn: React.FC<MenuBtnProps> = ({ actions, theme, style, enableBlur = f
             style={StyleSheet.absoluteFill}
             blurType="light"
             blurAmount={10}
-            reducedTransparencyFallbackColor={String(flattenedStyle.backgroundColor || appliedTheme.colors.backdrop)}
+            reducedTransparencyFallbackColor={String(
+              flattenedStyle.backgroundColor || appliedTheme.colors.backdrop
+            )}
           />
         ) : (
           <View
             style={[
               StyleSheet.absoluteFill,
-              { backgroundColor: flattenedStyle.backgroundColor || appliedTheme.colors.backdrop }
+              {
+                backgroundColor:
+                  flattenedStyle.backgroundColor ||
+                  appliedTheme.colors.backdrop,
+              },
             ]}
           />
         )}
@@ -108,8 +135,8 @@ const MenuBtn: React.FC<MenuBtnProps> = ({ actions, theme, style, enableBlur = f
                 position: 'absolute',
                 top: menuPosition.top,
                 right: menuPosition.right,
-                backgroundColor: appliedTheme.colors.surface
-              }
+                backgroundColor: appliedTheme.colors.surface,
+              },
             ]}
           >
             {memoizedActions.map((action, index) => (
@@ -127,16 +154,28 @@ const MenuBtn: React.FC<MenuBtnProps> = ({ actions, theme, style, enableBlur = f
                 style={({ pressed }) => [
                   styles.menuItem,
                   {
-                    backgroundColor: pressed ? appliedTheme.colors.surfaceVariant : 'transparent'
-                  }
+                    backgroundColor: pressed
+                      ? appliedTheme.colors.surfaceVariant
+                      : 'transparent',
+                  },
                 ]}
               >
                 {action?.icon && (
                   <View style={styles.iconBox}>
-                    <action.icon size={scale(18)} color={appliedTheme.colors.textPrimary} />
+                    <action.icon
+                      size={scale(18)}
+                      color={appliedTheme.colors.textPrimary}
+                    />
                   </View>
                 )}
-                <Text style={[styles.label, { color: appliedTheme.colors.textPrimary }]}>{action.label}</Text>
+                <Text
+                  style={[
+                    styles.label,
+                    { color: appliedTheme.colors.textPrimary },
+                  ]}
+                >
+                  {action.label}
+                </Text>
               </Pressable>
             ))}
           </Pressable>
@@ -157,11 +196,11 @@ const styles = StyleSheet.create({
     justifyContent: 'center',
     alignItems: 'center',
     overflow: 'hidden',
-    zIndex: 4
+    zIndex: 4,
   },
   modalRoot: {
     ...StyleSheet.absoluteFillObject,
-    backgroundColor: 'rgba(0,0,0,0.2)'
+    backgroundColor: 'rgba(0,0,0,0.2)',
   },
   menuBox: {
     borderRadius: scale(6),
@@ -171,20 +210,20 @@ const styles = StyleSheet.create({
     shadowOpacity: 0.15,
     shadowRadius: 4,
     minWidth: scale(150),
-    paddingVertical: verticalScale(2)
+    paddingVertical: verticalScale(2),
   },
   menuItem: {
     flexDirection: 'row',
     alignItems: 'center',
     paddingVertical: verticalScale(8),
     paddingHorizontal: scale(10),
-    borderRadius: scale(5)
+    borderRadius: scale(5),
   },
   iconBox: {
-    marginRight: scale(8)
+    marginRight: scale(8),
   },
   label: {
     fontSize: RFValue(12),
-    includeFontPadding: false
-  }
+    includeFontPadding: false,
+  },
 });

package/src/components/Button/PrimaryBtn.tsx

@@ -11,7 +11,7 @@ import {
   View,
   type GestureResponderEvent,
   type ViewStyle,
-  type TextStyle
+  type TextStyle,
 } from 'react-native';
 import { scale, verticalScale } from 'react-native-size-matters';
 import { useTheme } from '../../theme/hook/useTheme';
@@ -38,10 +38,13 @@ export const PrimaryBtn: React.FC<PrimaryBtnProps> = ({
   disabled = false,
   containerStyle,
   titleStyle,
-  theme
+  theme,
 }) => {
   const { theme: appliedTheme } = useTheme(theme);
-  const backgroundColor = disabled || loading ? appliedTheme.colors?.buttonDisabled : appliedTheme.colors?.button;
+  const backgroundColor =
+    disabled || loading
+      ? appliedTheme.colors?.buttonDisabled
+      : appliedTheme.colors?.button;
 
   return (
     <TouchableOpacity
@@ -54,13 +57,30 @@ export const PrimaryBtn: React.FC<PrimaryBtnProps> = ({
     >
       {loading ? (
         <View style={styles.row}>
-          <ActivityIndicator color={appliedTheme.colors.buttonText} style={{ marginRight: scale(8) }} />
-          <Text style={[styles.text, { color: appliedTheme.colors.buttonText, opacity: 0.75 }, titleStyle]}>
+          <ActivityIndicator
+            color={appliedTheme.colors.buttonText}
+            style={{ marginRight: scale(8) }}
+          />
+          <Text
+            style={[
+              styles.text,
+              { color: appliedTheme.colors.buttonText, opacity: 0.75 },
+              titleStyle,
+            ]}
+          >
             {loadingText}
           </Text>
         </View>
       ) : (
-        <Text style={[styles.text, { color: appliedTheme.colors.buttonText }, titleStyle]}>{title}</Text>
+        <Text
+          style={[
+            styles.text,
+            { color: appliedTheme.colors.buttonText },
+            titleStyle,
+          ]}
+        >
+          {title}
+        </Text>
       )}
     </TouchableOpacity>
   );
@@ -74,16 +94,16 @@ const styles = StyleSheet.create({
     paddingHorizontal: scale(16),
     borderRadius: scale(6),
     alignItems: 'center',
-    justifyContent: 'center'
+    justifyContent: 'center',
   },
   text: {
     textAlign: 'center',
     fontSize: RFValue(13),
-    fontWeight: '600'
+    fontWeight: '600',
   },
   row: {
     flexDirection: 'row',
     alignItems: 'center',
-    justifyContent: 'center'
-  }
+    justifyContent: 'center',
+  },
 });

package/src/components/Button/TextButton.tsx

@@ -1,5 +1,12 @@
 import React from 'react';
-import { StyleSheet, Pressable, View, type GestureResponderEvent, type TextStyle, type ViewStyle } from 'react-native';
+import {
+  StyleSheet,
+  Pressable,
+  View,
+  type GestureResponderEvent,
+  type TextStyle,
+  type ViewStyle,
+} from 'react-native';
 import { useTheme } from '../../theme/hook/useTheme';
 import { scale, verticalScale } from 'react-native-size-matters';
 import { Text } from '../Text';
@@ -28,21 +35,24 @@ const TextButton: React.FC<TextButtonProps> = ({
   underline = false,
   bold = false,
   align = 'center',
-  leftIcon
+  leftIcon,
 }) => {
   const { theme } = useTheme();
 
-  const alignSelfMap: Record<'left' | 'center' | 'right', ViewStyle['alignSelf']> = {
+  const alignSelfMap: Record<
+    'left' | 'center' | 'right',
+    ViewStyle['alignSelf']
+  > = {
     left: 'flex-start',
     center: 'center',
-    right: 'flex-end'
+    right: 'flex-end',
   };
   const alignSelf = alignSelfMap[align];
 
   const textStyle: TextStyle = {
     textAlign: align,
     textDecorationLine: underline ? 'underline' : 'none',
-    fontWeight: bold ? '700' : '400'
+    fontWeight: bold ? '700' : '400',
   };
 
   return (
@@ -56,15 +66,20 @@ const TextButton: React.FC<TextButtonProps> = ({
         { alignSelf },
         containerStyle,
         pressed && styles.pressed,
-        disabled && styles.disabled
+        disabled && styles.disabled,
       ]}
     >
       <View
         style={[
           styles.row,
           {
-            justifyContent: align === 'left' ? 'flex-start' : align === 'right' ? 'flex-end' : 'center'
-          }
+            justifyContent:
+              align === 'left'
+                ? 'flex-start'
+                : align === 'right'
+                  ? 'flex-end'
+                  : 'center',
+          },
         ]}
       >
         {leftIcon && <View style={styles.iconSpacing}>{leftIcon}</View>}
@@ -87,22 +102,22 @@ export default TextButton;
 const styles = StyleSheet.create({
   defaultContainer: {
     paddingVertical: verticalScale(4),
-    paddingHorizontal: scale(6)
+    paddingHorizontal: scale(6),
   },
   text: {
-    fontSize: RFValue(10)
+    fontSize: RFValue(10),
   },
   row: {
     flexDirection: 'row',
-    alignItems: 'center'
+    alignItems: 'center',
   },
   iconSpacing: {
-    marginRight: scale(1)
+    marginRight: scale(1),
   },
   pressed: {
-    opacity: 0.6
+    opacity: 0.6,
   },
   disabled: {
-    opacity: 0.4
-  }
+    opacity: 0.4,
+  },
 });

package/src/components/Button/index.ts

@@ -10,7 +10,7 @@ import TextButton from './TextButton';
 const Button = {
   Primary: PrimaryBtn,
   BackBtn,
-  TextButton
+  TextButton,
 };
 
 export { Button };

package/src/components/Content/Card/Category/Category.tsx

@@ -3,7 +3,14 @@
  * @lastModified Mon 30 Jun 2025 at 10:46 PM
  */
 
-import React, { useRef, useLayoutEffect, useCallback, useMemo, useState, useEffect } from 'react';
+import React, {
+  useRef,
+  useLayoutEffect,
+  useCallback,
+  useMemo,
+  useState,
+  useEffect,
+} from 'react';
 import {
   View,
   FlatList,
@@ -12,7 +19,7 @@ import {
   Dimensions,
   InteractionManager,
   type LayoutChangeEvent,
-  type ListRenderItemInfo
+  type ListRenderItemInfo,
 } from 'react-native';
 import { Text } from '../../../Text';
 import { useTheme } from '../../../../theme/hook/useTheme';
@@ -53,18 +60,29 @@ function usePrevious<T>(value: T): T | undefined {
 }
 
 const CategoryCard = React.memo(
-  ({ category = [], activeCategory, onPressCategory, theme, mode = 'text', isLoading = false }: CategoryCardProps) => {
+  ({
+    category = [],
+    activeCategory,
+    onPressCategory,
+    theme,
+    mode = 'text',
+    isLoading = false,
+  }: CategoryCardProps) => {
     const { theme: appliedTheme } = useTheme(theme);
     const flatListRef = useRef<FlatList<ICategory>>(null);
     const [itemWidths, setItemWidths] = useState<number[]>([]);
 
-    const selectedCategory = useMemo(() => activeCategory || category?.[0] || null, [activeCategory, category]);
+    const selectedCategory = useMemo(
+      () => activeCategory || category?.[0] || null,
+      [activeCategory, category]
+    );
 
     const prevCategoryId = usePrevious(selectedCategory?._id);
 
     const scrollToCategory = useCallback(
       (index: number, animated: boolean) => {
-        if (!flatListRef.current || index < 0 || index >= category.length) return;
+        if (!flatListRef.current || index < 0 || index >= category.length)
+          return;
 
         const RIGHT_SCROLL_BIAS = scale(40);
         const offset = itemWidths.length
@@ -72,30 +90,42 @@ const CategoryCard = React.memo(
             (itemWidths[index] ?? ITEM_WIDTH) / 2 -
             SCREEN_WIDTH / 2 +
             RIGHT_SCROLL_BIAS
-          : index * ITEM_WIDTH + ITEM_WIDTH / 2 - SCREEN_WIDTH / 2 + RIGHT_SCROLL_BIAS;
+          : index * ITEM_WIDTH +
+            ITEM_WIDTH / 2 -
+            SCREEN_WIDTH / 2 +
+            RIGHT_SCROLL_BIAS;
 
         InteractionManager.runAfterInteractions(() => {
           flatListRef.current?.scrollToOffset({
             offset: Math.max(0, offset),
-            animated
+            animated,
           });
         });
       },
       [category, itemWidths]
     );
 
-    const onItemLayout = useCallback((event: LayoutChangeEvent, index: number) => {
-      const { width } = event.nativeEvent.layout;
-      setItemWidths((prev) => {
-        const newWidths = [...prev];
-        newWidths[index] = width;
-        return newWidths;
-      });
-    }, []);
+    const onItemLayout = useCallback(
+      (event: LayoutChangeEvent, index: number) => {
+        const { width } = event.nativeEvent.layout;
+        setItemWidths((prev) => {
+          const newWidths = [...prev];
+          newWidths[index] = width;
+          return newWidths;
+        });
+      },
+      []
+    );
 
     useLayoutEffect(() => {
-      if (selectedCategory && category.length > 0 && selectedCategory._id !== prevCategoryId) {
-        const index = category.findIndex((cat) => cat._id === selectedCategory._id);
+      if (
+        selectedCategory &&
+        category.length > 0 &&
+        selectedCategory._id !== prevCategoryId
+      ) {
+        const index = category.findIndex(
+          (cat) => cat._id === selectedCategory._id
+        );
         if (index >= 0) scrollToCategory(index, true);
       }
     }, [selectedCategory, category, scrollToCategory, prevCategoryId]);
@@ -121,9 +151,13 @@ const CategoryCard = React.memo(
           isFilledMode && {
             borderRadius: scale(8),
             borderWidth: scale(1),
-            borderColor: isSelected ? appliedTheme.colors.primary : appliedTheme.colors.outline,
-            backgroundColor: isSelected ? appliedTheme.colors.primary : 'transparent'
-          }
+            borderColor: isSelected
+              ? appliedTheme.colors.primary
+              : appliedTheme.colors.outline,
+            backgroundColor: isSelected
+              ? appliedTheme.colors.primary
+              : 'transparent',
+          },
         ];
 
         const textColor = isFilledMode
@@ -146,14 +180,19 @@ const CategoryCard = React.memo(
               style={[
                 styles.tabText,
                 {
-                  color: textColor
-                }
+                  color: textColor,
+                },
               ]}
             >
               {item.name}
             </Text>
             {mode === 'text' && isSelected && (
-              <View style={[styles.underline, { backgroundColor: appliedTheme.colors.primary }]} />
+              <View
+                style={[
+                  styles.underline,
+                  { backgroundColor: appliedTheme.colors.primary },
+                ]}
+              />
             )}
           </TouchableOpacity>
         );
@@ -175,7 +214,7 @@ const CategoryCard = React.memo(
                   width: ITEM_WIDTH - scale(20),
                   height: verticalScale(26),
                   borderRadius: scale(8),
-                  marginRight: scale(8)
+                  marginRight: scale(8),
                 }}
               />
             ))}
@@ -188,8 +227,10 @@ const CategoryCard = React.memo(
     const getItemLayout = useCallback(
       (_: unknown, index: number) => ({
         length: itemWidths[index] || ITEM_WIDTH,
-        offset: itemWidths.slice(0, index).reduce((sum, width) => sum + (width || ITEM_WIDTH), 0),
-        index
+        offset: itemWidths
+          .slice(0, index)
+          .reduce((sum, width) => sum + (width || ITEM_WIDTH), 0),
+        index,
       }),
       [itemWidths]
     );
@@ -232,32 +273,32 @@ const CategoryCard = React.memo(
 const styles = StyleSheet.create({
   container: {
     marginVertical: verticalScale(2),
-    paddingVertical: verticalScale(10)
+    paddingVertical: verticalScale(10),
   },
   listContainer: {
     paddingLeft: CONTAINER_PADDING,
     flexDirection: 'row',
-    paddingRight: CONTAINER_PADDING + scale(2)
+    paddingRight: CONTAINER_PADDING + scale(2),
   },
   tabContainer: {
     alignItems: 'center',
     justifyContent: 'center',
     marginRight: scale(8),
     paddingHorizontal: scale(12),
-    paddingVertical: verticalScale(6)
+    paddingVertical: verticalScale(6),
   },
   tabText: {
     fontSize: RFValue(10),
     textTransform: 'capitalize',
     fontWeight: '500',
-    lineHeight: scale(13)
+    lineHeight: scale(13),
   },
   underline: {
     marginTop: verticalScale(2),
     height: scale(2),
     width: '60%',
-    borderRadius: scale(2)
-  }
+    borderRadius: scale(2),
+  },
 });
 
 export default CategoryCard;