@zezosoft/zezo-ott-react-native-ui-kit 1.1.2 → 1.1.5

package/src/hooks/useSplashCache.ts

@@ -3,37 +3,45 @@
  * @lastModified Fri 17 Oct 2025 at 09:55 PM
  */
 
-import { useEffect, useState } from 'react';
+import { useEffect, useRef, useState } from 'react';
 import RNFS from 'react-native-fs';
 import CryptoJS from 'crypto-js';
 import { MMKV } from 'react-native-mmkv';
+import NetInfo from '@react-native-community/netinfo';
 import { useSplashStore } from '../store/splashStore';
 
-const storage = new MMKV();
-const activeDownloads = new Map<string, Promise<string | null>>();
+const mmkvStorage = new MMKV();
+const activeDownloadTasks = new Map<string, Promise<string | null>>();
+const DEFAULT_EXTENSION = 'bin';
+const CACHE_FILE_PREFIX = 'splash_';
 
-const SUPPORTED_EXTENSIONS = [
-  'json',
-  'mp4',
-  'jpg',
-  'jpeg',
-  'png',
-  'webp',
-] as const;
+const isNetworkOnline = async () => {
+  const state = await NetInfo.fetch();
+  return !!state.isConnected;
+};
 
-const getFileExtension = (url: string): string => {
+const getUrlExtension = (url: string): string => {
   try {
+    if (!url || typeof url !== 'string') return DEFAULT_EXTENSION;
     const cleanUrl = url.split('?')[0];
-    const ext = cleanUrl
-      ?.substring(cleanUrl?.lastIndexOf('.') + 1)
-      .toLowerCase();
-    return SUPPORTED_EXTENSIONS.includes(ext as any) ? (ext as string) : 'png';
+    const dot = cleanUrl?.lastIndexOf('.') ?? -1;
+    if (dot === -1) return DEFAULT_EXTENSION;
+
+    const ext = cleanUrl?.substring(dot + 1).toLowerCase() ?? DEFAULT_EXTENSION;
+    if (!/^[a-z0-9]+$/i.test(ext)) return DEFAULT_EXTENSION;
+    return ext;
   } catch {
-    return 'png';
+    return DEFAULT_EXTENSION;
   }
 };
 
-const downloadAndCacheAsset = async (
+const buildCachePath = (url: string, cacheKey: string, extension: string) => {
+  const ext = extension.replace(/^\./, '') || DEFAULT_EXTENSION;
+  const hash = CryptoJS.MD5(`${url}|${cacheKey}|${ext}`).toString();
+  return `${RNFS.CachesDirectoryPath}/${CACHE_FILE_PREFIX}${hash}.${ext}`;
+};
+
+const downloadAndCacheFile = async (
   url: string,
   extension: string,
   cacheKey: string,
@@ -41,52 +49,62 @@ const downloadAndCacheAsset = async (
 ): Promise<string | null> => {
   if (!url?.trim()) return null;
 
-  const ext = extension.replace(/^\./, '') || 'png';
-  const hash = CryptoJS.MD5(`${url}|${cacheKey}|${ext}`).toString();
-  const localFile = `${RNFS.CachesDirectoryPath}/splash_${hash}.${ext}`;
+  const localFile = buildCachePath(url, cacheKey, extension);
 
-  if (activeDownloads.has(hash)) {
-    return activeDownloads.get(hash)!;
+  if (activeDownloadTasks.has(localFile)) {
+    return activeDownloadTasks.get(localFile)!;
   }
 
   const task = (async () => {
+    let oldFile: string | null = null;
+
     try {
-      const savedHash = storage.getString(cacheKey);
+      const savedPath = mmkvStorage.getString(cacheKey);
+      oldFile = savedPath && savedPath !== localFile ? savedPath : null;
 
-      if (savedHash && savedHash !== hash) {
-        const oldFile = `${RNFS.CachesDirectoryPath}/splash_${savedHash}.${ext}`;
-        if (await RNFS.exists(oldFile)) {
-          await RNFS.unlink(oldFile).catch(() => {});
-        }
+      if (!force && savedPath === localFile) {
+        const exists = await RNFS.exists(localFile);
+        if (exists) return localFile;
       }
 
-      if (!force) {
-        const exists = await RNFS.exists(localFile);
-        if (exists && savedHash === hash) {
-          return localFile;
-        }
+      if (!(await isNetworkOnline())) {
+        return oldFile && (await RNFS.exists(oldFile)) ? oldFile : null;
       }
 
-      const { statusCode } = await RNFS.downloadFile({
+      const result = await RNFS.downloadFile({
         fromUrl: url,
         toFile: localFile,
         cacheable: true,
         readTimeout: 15000,
         connectionTimeout: 10000,
-      }).promise;
+      }).promise.catch(() => null);
 
-      if (statusCode === 200) {
-        storage.set(cacheKey, hash);
-        return localFile;
+      if (!result || result.statusCode !== 200) {
+        const code = result?.statusCode ?? 'unknown';
+        throw new Error(`RNFS download failed (status: ${code})`);
       }
-    } catch {
-      return null;
+
+      mmkvStorage.set(cacheKey, localFile);
+
+      if (oldFile && (await RNFS.exists(oldFile))) {
+        await RNFS.unlink(oldFile).catch(() => {});
+      }
+
+      return localFile;
+    } catch (err) {
+      console.warn('[SplashCache] download failed:', url, err);
+    }
+
+    if (oldFile && (await RNFS.exists(oldFile))) {
+      return oldFile;
     }
 
     return null;
-  })();
+  })().finally(() => {
+    activeDownloadTasks.delete(localFile);
+  });
 
-  activeDownloads.set(hash, task);
+  activeDownloadTasks.set(localFile, task);
   return task;
 };
 
@@ -101,67 +119,68 @@ export const useSplashCache = ({
   backgroundUrl,
   forceDownload = false,
 }: SplashCacheOptions) => {
-  const [state, setState] = useState({
+  const [loadState, setLoadState] = useState({
     isReady: false,
     error: null as Error | null,
   });
-
-  const setLogo = useSplashStore((s) => s.setLogoPath);
-  const setBackground = useSplashStore((s) => s.setBackdropPath);
+  const setLogoPath = useSplashStore((s) => s.setLogoPath);
+  const setBackdropPath = useSplashStore((s) => s.setBackdropPath);
+  const isMountedRef = useRef(true);
 
   useEffect(() => {
-    let mounted = true;
+    isMountedRef.current = true;
 
     const syncAssets = async () => {
       try {
-        const [logoPath, bgPath] = await Promise.all([
+        const [logoLocalPath, backdropLocalPath] = await Promise.all([
           logoUrl
-            ? downloadAndCacheAsset(
+            ? downloadAndCacheFile(
                 logoUrl,
-                getFileExtension(logoUrl),
+                getUrlExtension(logoUrl),
                 'splash_logo',
                 forceDownload
               )
             : Promise.resolve(null),
           backgroundUrl
-            ? downloadAndCacheAsset(
+            ? downloadAndCacheFile(
                 backgroundUrl,
-                getFileExtension(backgroundUrl),
+                getUrlExtension(backgroundUrl),
                 'splash_background',
                 forceDownload
               )
             : Promise.resolve(null),
         ]);
 
-        if (!mounted) return;
+        if (!isMountedRef.current) return;
 
-        if (logoPath) setLogo?.(logoPath);
-        if (bgPath) setBackground?.(bgPath);
+        if (logoLocalPath) setLogoPath?.(logoLocalPath);
+        if (backdropLocalPath) setBackdropPath?.(backdropLocalPath);
 
-        setState({ isReady: true, error: null });
+        setLoadState({ isReady: true, error: null });
       } catch (err) {
-        if (mounted) {
-          setState({ isReady: true, error: err as Error });
-        }
+        if (!isMountedRef.current) return;
+        const error =
+          err instanceof Error ? err : new Error('Splash cache failed');
+        setLoadState({ isReady: true, error });
       }
     };
 
     syncAssets();
+
     return () => {
-      mounted = false;
+      isMountedRef.current = false;
     };
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [logoUrl, backgroundUrl, forceDownload]);
+  }, [logoUrl, backgroundUrl, forceDownload, setLogoPath, setBackdropPath]);
 
-  const logoPath = useSplashStore((s) => s.logo.localPath);
-  const bgPath = useSplashStore((s) => s.backdrop.localPath);
+  const logoLocalPath = useSplashStore((s) => s.logo.localPath);
+  const backdropLocalPath = useSplashStore((s) => s.backdrop.localPath);
 
   return {
-    state,
-    isLoading: !state.isReady && !state.error,
+    state: loadState,
+    isLoading: !loadState.isReady,
     data: {
-      logoPath,
-      backgroundPath: bgPath,
+      logoPath: logoLocalPath,
+      backgroundPath: backdropLocalPath,
     },
   };
 };

package/src/theme/ThemeProvider.tsx

@@ -6,10 +6,13 @@
 import React, {
   createContext,
   useContext,
+  useEffect,
   useMemo,
   type ReactNode,
 } from 'react';
-import { StyleSheet, View } from 'react-native';
+import 'react-native-gesture-handler';
+import 'react-native-reanimated';
+import { Platform, StyleSheet, View } from 'react-native';
 import {
   SafeAreaProvider,
   initialWindowMetrics,
@@ -18,7 +21,8 @@ import { GestureHandlerRootView } from 'react-native-gesture-handler';
 import { AppStatusBar } from '../components/common/AppStatusBar';
 import { useInternalTheme } from './hook/useInternalTheme';
 import { type ITheme, type ThemeOverride } from './themes';
-
+import SystemNavigationBar from 'react-native-system-navigation-bar';
+import Color from 'color';
 type ThemeContextType = {
   theme: {
     dark: ITheme['colors'];
@@ -80,6 +84,15 @@ export const ZezoUIProvider: React.FC<ZezoUIProviderProps> = ({
     [finalTheme.colors.background]
   );
 
+  // Update system navigation bar (Android) with theme colors
+  useEffect(() => {
+    const isDarkBackground = Color(finalTheme.colors.background).isDark();
+    if (Platform.OS === 'android') {
+      SystemNavigationBar.setNavigationColor(
+        isDarkBackground ? '#212121' : '#FFFFFF'
+      );
+    }
+  }, [finalTheme.colors.background]);
   return (
     <GestureHandlerRootView style={styles.container}>
       <SafeAreaProvider initialMetrics={initialWindowMetrics}>

package/src/theme/hook/index.ts

@@ -1,2 +1 @@
 export * from './useInternalTheme';
-export * from './useThemeStatusBar';

package/src/theme/hook/useInternalTheme.ts

@@ -11,7 +11,9 @@ import {
   type ThemeOverride,
   type useInternalThemeReturn,
 } from '../themes';
+import { filterValidOverrideColors } from '../utils/validateColor';
 import { useInternalThemeStore } from '../../store/themeStore';
+
 import { Appearance } from 'react-native';
 
 export const useInternalTheme = (
@@ -50,11 +52,11 @@ export const useInternalTheme = (
     [isDarkMode]
   );
 
-  // Memoize override colors
-  const overrideColors = useMemo(
-    () => (isDarkMode ? (override?.dark ?? {}) : (override?.light ?? {})),
-    [override?.dark, override?.light, isDarkMode]
-  );
+  // Memoize override colors — only valid, non-empty colors; empty/invalid skipped
+  const overrideColors = useMemo(() => {
+    const raw = isDarkMode ? (override?.dark ?? {}) : (override?.light ?? {});
+    return filterValidOverrideColors(raw) as Partial<ITheme['colors']>;
+  }, [override?.dark, override?.light, isDarkMode]);
 
   // Memoize final theme with proper dependencies
   const finalTheme = useMemo<ITheme>(
@@ -68,14 +70,21 @@ export const useInternalTheme = (
     [baseTheme, overrideColors]
   );
 
-  // Memoize themeFull with proper dependencies
-  const themeFull = useMemo(
-    () => ({
-      light: (override?.light as ITheme['colors']) ?? LightTheme.colors,
-      dark: (override?.dark as ITheme['colors']) ?? DarkTheme.colors,
-    }),
-    [override?.light, override?.dark]
-  );
+  // Memoize themeFull — only valid overrides merged with base; empty/invalid skipped
+  const themeFull = useMemo(() => {
+    const validLight = filterValidOverrideColors(override?.light);
+    const validDark = filterValidOverrideColors(override?.dark);
+    return {
+      light: {
+        ...LightTheme.colors,
+        ...(validLight as Partial<ITheme['colors']>),
+      } as ITheme['colors'],
+      dark: {
+        ...DarkTheme.colors,
+        ...(validDark as Partial<ITheme['colors']>),
+      } as ITheme['colors'],
+    };
+  }, [override?.light, override?.dark]);
 
   return useMemo(
     () => ({

package/src/theme/themes.ts

@@ -70,6 +70,7 @@ export type BaseColors = {
   white: string;
   black: string;
   transparent: string;
+  newRelease: string;
   backgroundLayoutGradient: string[];
 
   heroBannerGradient: string[];
@@ -186,6 +187,7 @@ export const LightTheme: ITheme = {
     white: 'rgba(255, 255, 255, 1)',
     black: 'rgba(0, 0, 0, 1)',
     transparent: 'rgba(0, 0, 0, 0)',
+    newRelease: 'rgba(255, 221, 51, 1)',
 
     backgroundLayoutGradient: [
       'rgba(255, 255, 255, 0.3)',
@@ -295,6 +297,7 @@ export const DarkTheme: ITheme = {
     white: 'rgba(255, 255, 255, 1)',
     black: 'rgba(0, 0, 0, 1)',
     transparent: 'rgba(255, 255, 255, 0.04)',
+    newRelease: 'rgba(255, 221, 51, 1)',
 
     backgroundLayoutGradient: [
       'rgba(22, 21, 21, 0.65)',

package/src/theme/utils/validateColor.ts

@@ -0,0 +1,127 @@
+/**
+ * @author Naresh Dhamu
+ * @lastModified Sun 08 Feb 2026
+ *
+ * Validates theme color values. Only valid colors are used for overrides.
+ */
+
+/** Hex color: #RGB | #RRGGBB | #RRGGBBAA */
+const HEX_REGEX = /^#([A-Fa-f0-9]{3}|[A-Fa-f0-9]{6}|[A-Fa-f0-9]{8})$/;
+
+/** rgb(r, g, b) - numbers 0-255 */
+const RGB_REGEX = /^rgb\(\s*(\d{1,3})\s*,\s*(\d{1,3})\s*,\s*(\d{1,3})\s*\)$/;
+
+/** rgba(r, g, b, a) */
+const RGBA_REGEX =
+  /^rgba\(\s*([\d.]+)\s*,\s*([\d.]+)\s*,\s*([\d.]+)\s*,\s*([\d.]+)\s*\)$/;
+
+/** React Native / CSS named colors (common set) */
+const VALID_NAMED_COLORS = new Set([
+  'transparent',
+  'black',
+  'white',
+  'red',
+  'green',
+  'blue',
+  'yellow',
+  'orange',
+  'gray',
+  'grey',
+  'purple',
+  'pink',
+  'cyan',
+  'magenta',
+  'brown',
+  'lime',
+  'navy',
+  'teal',
+  'silver',
+  'maroon',
+  'olive',
+  'aqua',
+  'fuchsia',
+  'currentColor',
+]);
+
+/**
+ * Returns true if the given string is a valid color (hex, rgb, rgba, or named).
+ */
+export function isValidColorString(value: string): boolean {
+  if (typeof value !== 'string' || value.length === 0) return false;
+
+  if (HEX_REGEX.test(value)) return true;
+  if (VALID_NAMED_COLORS.has(value.toLowerCase())) return true;
+
+  const rgbMatch = value.match(RGB_REGEX);
+  if (rgbMatch) {
+    const r = Number(rgbMatch[1]);
+    const g = Number(rgbMatch[2]);
+    const b = Number(rgbMatch[3]);
+    return r >= 0 && r <= 255 && g >= 0 && g <= 255 && b >= 0 && b <= 255;
+  }
+
+  const rgbaMatch = value.match(RGBA_REGEX);
+  if (rgbaMatch) {
+    const r = Number(rgbaMatch[1]);
+    const g = Number(rgbaMatch[2]);
+    const b = Number(rgbaMatch[3]);
+    const a = Number(rgbaMatch[4]);
+    return (
+      r >= 0 &&
+      r <= 255 &&
+      g >= 0 &&
+      g <= 255 &&
+      b >= 0 &&
+      b <= 255 &&
+      a >= 0 &&
+      a <= 1
+    );
+  }
+
+  return false;
+}
+
+/**
+ * Validates a single theme color value (string, string[], or nested object).
+ * Empty values (empty string, empty array, empty object) are invalid — no override.
+ */
+export function isValidColorValue(value: unknown): boolean {
+  if (value == null) return false;
+
+  if (typeof value === 'string') {
+    if (value.trim().length === 0) return false;
+    return isValidColorString(value);
+  }
+
+  if (Array.isArray(value)) {
+    if (value.length === 0) return false;
+    return value.every((item) => isValidColorString(item));
+  }
+
+  if (typeof value === 'object' && value !== null) {
+    const entries = Object.values(value);
+    if (entries.length === 0) return false;
+    return entries.every((v) => isValidColorValue(v));
+  }
+
+  return false;
+}
+
+/**
+ * Filters override colors to only include entries with valid, non-empty color values.
+ * Empty colors (empty string, [], {}) and invalid values are skipped — no override.
+ */
+export function filterValidOverrideColors<T extends Record<string, unknown>>(
+  override: T | undefined | null
+): Partial<T> {
+  if (!override || typeof override !== 'object') return {};
+
+  const result: Partial<T> = {};
+  for (const key of Object.keys(override) as (keyof T)[]) {
+    const value = override[key];
+    if (isValidColorValue(value)) {
+      (result as Record<string, unknown>)[key as string] = value;
+    }
+  }
+  return result;
+}

package/src/types/content/content-view.types.ts

@@ -10,7 +10,7 @@ import type { IGetSectionData, ISectionItem } from '../../types/sections';
 import type { MoreFetchData } from '../../types/hook/usePaginatedSetion';
 import type { IHistoryItem } from '../../components/User/WatchHistory/WatchHistory';
 import type React from 'react';
-import type { MiniInfo } from '../../components/ContentView/components/MiniInfo';
+import type { MiniInfo } from '../../components/ContentView/One/components/MiniInfo';
 import type { IContentData } from '@zezosoft/zezo-ott-api-client';
 
 // 🔷 Common Style Aliases
@@ -24,6 +24,35 @@ export type TitleStyles = {
   title?: TextStyleProp;
   subTitle?: TextStyleProp;
   rating?: TextStyleProp;
+  releaseYear?: TextStyleProp;
+  duration?: TextStyleProp;
+  language?: TextStyleProp;
+};
+
+export type LikeShareActionsStyles = {
+  container?: ViewStyleProp;
+  likeButton?: ViewStyleProp;
+  shareButton?: ViewStyleProp;
+};
+
+export type SectionTabsStyles = {
+  container?: ViewStyleProp;
+  tab?: ViewStyleProp;
+  title?: TextStyleProp;
+  indicator?: ViewStyleProp;
+};
+
+export type DetailsStyles = {
+  container?: ViewStyleProp;
+  section?: ViewStyleProp;
+  labelText?: TextStyleProp;
+  valueText?: TextStyleProp;
+  release_year?: ViewStyleProp;
+  cast?: ViewStyleProp;
+  directors?: ViewStyleProp;
+  writers?: ViewStyleProp;
+  producers?: ViewStyleProp;
+  maturity_rating?: ViewStyleProp;
 };
 
 export type GenreTagStyles = {
@@ -82,6 +111,15 @@ export type PlayEventArgs = {
   seekTime?: number;
   mode?: 'fullscreen' | 'normal';
 };
+export type LikeShareEventArgs = {
+  id: IContentData['_id'];
+  source?: 'title' | 'card' | 'hero' | 'list';
+};
+
+// 🟩 Events
+export type LikeResponse = {
+  is_liked: boolean;
+};
 
 export type ContentViewEvents = {
   onPlay?: (args: PlayEventArgs) => void;
@@ -94,6 +132,8 @@ export type ContentViewEvents = {
   onBackPress?: () => void;
   onPressCast?: (args: { cast: IContentData }) => void;
   moreFetchDataRecommended?: MoreFetchData<IContentData>;
+  onLikeContent?: (args: LikeShareEventArgs) => Promise<{ is_liked: boolean }>;
+  onShareContent?: (args: LikeShareEventArgs) => void;
 };
 
 // 🟦 Menu
@@ -122,6 +162,7 @@ export type SkeletonOverrides = Partial<{
 export type HeroBannerProps = {
   backgroundImage: IContentData['thumbnail'];
   title: IContentData['name'];
+  titleImage?: string | null;
   theme?: ThemeOverride;
   isLoading?: boolean;
   onPressPlay?: ({ is_trailer }: { is_trailer: boolean }) => void;
@@ -153,6 +194,7 @@ export type ComponentProps = {
   seasonsIsLoading?: boolean;
   recommendedContent?: ISectionItem | null;
   events?: ContentViewEvents;
+  isLiked?: boolean;
   heroBannerProps?: Partial<HeroBannerProps>;
   titleStyles?: TitleStyles;
   genreTagsStyles?: GenreTagStyles;

package/src/types/sections/index.ts

@@ -1,10 +1,12 @@
 /**
  * @author Naresh Dhamu
- * @lastModified Fri 04 Jul 2025 at 10:58 AM
+ * @lastModified Wed 24 Dec 2025 at 12:09 PM
  */
 
-import type { IContentData } from '@zezosoft/zezo-ott-api-client';
-
+import type { IContentData, IServeAd } from '@zezosoft/zezo-ott-api-client';
+export type IAdItem = IServeAd & {
+  type: 'ads';
+};
 export type ISectionType =
   | 'normal'
   | 'card_style_2'
@@ -15,6 +17,7 @@ export type ISectionType =
   | 'card_rotate_in_out'
   | 'slider'
   | 'slider_style_2'
+  | 'slider_style_3'
   | 'card_series_featured_style_1'
   | 'continue_watching'
   | 'new_releases'
@@ -50,7 +53,7 @@ export interface IGetSectionData {
   };
   genre?: string;
   content: {
-    data: IContentData[];
+    data: (IContentData | IAdItem)[];
     meta: {
       pagination: ISectionPagination;
     };

package/src/utils/colorUtils.ts

@@ -0,0 +1,70 @@
+/**
+ * Color utility functions
+ * @author Naresh Dhamu
+ */
+
+/**
+ * Converts a color string to rgba format with specified opacity
+ * Supports multiple color formats: rgba, rgb, hex (#RGB, #RRGGBB, #RRGGBBAA)
+ *
+ * @param color - Color string in any supported format
+ * @param opacity - Opacity value between 0 and 1 (default: 0.9)
+ * @returns Color string in rgba format with specified opacity
+ *
+ * @example
+ * convertColorWithOpacity('rgb(255, 0, 0)', 0.5) // 'rgba(255, 0, 0, 0.5)'
+ * convertColorWithOpacity('#FF0000', 0.8) // 'rgba(255, 0, 0, 0.8)'
+ * convertColorWithOpacity('rgba(255, 0, 0, 1)', 0.5) // 'rgba(255, 0, 0, 0.5)'
+ */
+export const convertColorWithOpacity = (
+  color: string,
+  opacity: number = 0.9
+): string => {
+  // Handle rgba format
+  if (color.startsWith('rgba(')) {
+    return color.replace(/rgba\(([^)]+)\)/, (match, rgb) => {
+      const values = rgb.split(',').map((v: string) => v.trim());
+      if (values.length === 4) {
+        return `rgba(${values[0]}, ${values[1]}, ${values[2]}, ${opacity})`;
+      }
+      return match;
+    });
+  }
+
+  // Handle rgb format
+  if (color.startsWith('rgb(')) {
+    return color.replace(/rgb\(([^)]+)\)/, (match, rgb) => {
+      const values = rgb.split(',').map((v: string) => v.trim());
+      if (values.length === 3) {
+        return `rgba(${values[0]}, ${values[1]}, ${values[2]}, ${opacity})`;
+      }
+      return match;
+    });
+  }
+
+  // Handle hex format (#RGB, #RRGGBB, #RRGGBBAA)
+  if (color.startsWith('#')) {
+    const hex = color.replace('#', '');
+    let r: number, g: number, b: number;
+
+    if (hex.length === 3) {
+      // #RGB format
+      r = parseInt(hex[0]! + hex[0]!, 16);
+      g = parseInt(hex[1]! + hex[1]!, 16);
+      b = parseInt(hex[2]! + hex[2]!, 16);
+    } else if (hex.length === 6 || hex.length === 8) {
+      // #RRGGBB or #RRGGBBAA format
+      r = parseInt(hex.substring(0, 2)!, 16);
+      g = parseInt(hex.substring(2, 4)!, 16);
+      b = parseInt(hex.substring(4, 6)!, 16);
+    } else {
+      return color; // Invalid hex, return as is
+    }
+
+    return `rgba(${r}, ${g}, ${b}, ${opacity})`;
+  }
+
+  // For other formats (named colors, etc.), return as is
+  // In a real scenario, you might want to convert named colors to rgba
+  return color;
+};