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

package/src/theme/store/theme.ts

@@ -0,0 +1,50 @@
+/**
+ * @author Naresh Dhamu
+ * @LastModified Mon 13 Jul 2026 at 10:13 AM
+ */
+
+import { create } from 'zustand';
+import { persist, createJSONStorage } from 'zustand/middleware';
+import { mmkvZustandStorage } from '../../store/storage';
+import { Appearance } from 'react-native';
+
+interface ThemeState {
+  isDarkMode: boolean;
+  themeMode: 'dark' | 'light' | 'system';
+  setIsDarkMode: (value: boolean) => void;
+  setTheme: (mode: 'dark' | 'light' | 'system') => void;
+}
+
+export const useThemeStore = create(
+  persist<ThemeState>(
+    (set) => ({
+      isDarkMode: Appearance.getColorScheme() === 'dark',
+      themeMode: 'system',
+
+      setIsDarkMode: (value: boolean) => {
+        set({ isDarkMode: value });
+      },
+
+      setTheme: (mode: 'dark' | 'light' | 'system') => {
+        if (mode === 'system') {
+          set({
+            themeMode: 'system',
+            isDarkMode: Appearance.getColorScheme() === 'dark',
+          });
+        } else {
+          set({ themeMode: mode, isDarkMode: mode === 'dark' });
+        }
+      },
+    }),
+    {
+      name: 'theme-storage',
+      storage: createJSONStorage(() => mmkvZustandStorage),
+      version: 1,
+      partialize: (state) =>
+        ({
+          isDarkMode: state.isDarkMode,
+          themeMode: state.themeMode,
+        }) as ThemeState,
+    }
+  )
+);

package/src/theme/themes.ts

@@ -0,0 +1,262 @@
+/**
+ * @author Naresh Dhamu
+ * @LastModified Mon 13 Jul 2026 at 10:13 AM
+ */
+
+export type MD3ElevationColors = {
+  level0: string;
+  level1: string;
+  level2: string;
+  level3: string;
+  level4: string;
+  level5: string;
+};
+
+export type BaseColors = {
+  primary: string;
+  onPrimary: string;
+  primaryContainer: string;
+
+  secondary: string;
+
+  background: string;
+  backgroundDisabled: string;
+  onBackground: string;
+  blueBackground: string;
+
+  surface: string;
+  onSurface: string;
+  surfaceVariant: string;
+  onSurfaceVariant: string;
+
+  surfaceDisabled: string;
+
+  error: string;
+  errorContainer: string;
+  onErrorContainer: string;
+
+  outline: string;
+  outlineDisabled: string;
+  outlineVariant: string;
+
+  border: string;
+
+  shadow: string;
+  scrim: string;
+  backdrop: string;
+  overlay: string;
+
+  elevation: MD3ElevationColors;
+
+  textPrimary: string;
+  textSecondary: string;
+  textDisabled: string;
+
+  button: string;
+  buttonDisabled: string;
+  buttonText: string;
+
+  white: string;
+  black: string;
+  transparent: string;
+  newRelease: string;
+  backgroundLayoutGradient: string[];
+
+  cardGradient: string[];
+
+  skeletonHighlightColor: string;
+  skeletonBaseColor: string;
+
+  switchTrackColor: string;
+  switchThumbColor: string;
+  switchTrackColorDisabled: string;
+  switchThumbColorDisabled: string;
+
+  alert: {
+    success: string;
+    warning: string;
+    info: string;
+    error: string;
+  };
+  premiumIcon: string;
+};
+
+export interface ITheme {
+  colors: BaseColors;
+}
+
+export type AppTheme = Omit<ITheme, 'colors'> & {
+  colors?: Partial<BaseColors>;
+};
+
+// New type for override object
+export type CustomTheme = {
+  light?: Partial<BaseColors>;
+  dark?: Partial<BaseColors>;
+};
+export type ThemeOverride = CustomTheme | ITheme;
+export interface UseThemeReturn {
+  theme: ITheme;
+  finalTheme: ITheme;
+  themeColors: {
+    light: ITheme['colors'];
+    dark: ITheme['colors'];
+  };
+  isDarkMode: boolean;
+  setTheme: (mode: 'dark' | 'light' | 'system') => void;
+}
+
+const commonColors = {
+  primary: 'rgba(244, 197, 66, 1)',
+  tertiary: 'rgba(253, 224, 71, 1)',
+  onTertiary: 'rgba(38, 38, 38, 1)',
+  onTertiaryContainer: 'rgba(120, 53, 15, 1)',
+  blueBackground: 'rgba(255, 255, 255, 0.25)',
+  error: 'rgba(239, 68, 68, 1)',
+  onError: 'rgba(255, 255, 255, 1)',
+  white: 'rgba(255, 255, 255, 1)',
+  black: 'rgba(0, 0, 0, 1)',
+  newRelease: 'rgba(255, 221, 51, 1)',
+  cardGradient: [
+    'rgba(223, 178, 50, 1)',
+    'rgba(243, 146, 35, 1)',
+    'rgba(248, 159, 16, 1)',
+  ],
+  switchTrackColor: '#3CD141',
+  switchThumbColor: 'white',
+  switchTrackColorDisabled: '#D5D5D5',
+  switchThumbColorDisabled: 'white',
+  premiumIcon: '#CA091E',
+  alert: {
+    success: '#4CAF50',
+    error: 'rgba(255, 0, 0, 1)',
+    warning: '#FF9800',
+    info: '#2196F3',
+  },
+};
+
+export const LightTheme: ITheme = {
+  colors: {
+    ...commonColors,
+    transparent: 'rgba(0, 0, 0, 0)',
+    onPrimary: 'rgba(255, 255, 255, 1)',
+    primaryContainer: 'rgba(254, 243, 199, 1)',
+
+    secondary: 'rgba(37, 99, 235, 1)',
+
+    background: 'rgba(249, 250, 251, 1)',
+    onBackground: 'rgba(17, 24, 39, 1)',
+    backgroundDisabled: 'rgba(242, 242, 242, 0.78)',
+
+    surface: 'rgba(255, 255, 255, 1)',
+    onSurface: 'rgba(31, 41, 55, 1)',
+    surfaceVariant: 'rgba(243, 244, 246, 1)',
+    onSurfaceVariant: 'rgba(107, 114, 128, 1)',
+
+    surfaceDisabled: 'rgba(0, 0, 0, 0.08)',
+
+    errorContainer: 'rgba(254, 202, 202, 0.5)',
+    onErrorContainer: 'rgba(127, 29, 29, 1)',
+
+    outline: 'rgba(52, 53, 58, 1)',
+    outlineDisabled: 'rgba(208, 208, 208, 1)',
+    outlineVariant: 'rgba(229, 231, 235, 1)',
+
+    border: 'rgba(0, 0, 0, 0.1)',
+
+    shadow: 'rgba(0, 0, 0, 0.1)',
+    scrim: 'rgba(0, 0, 0, 0.2)',
+    backdrop: 'rgba(243, 244, 246, 0.7)',
+    overlay: 'rgba(0,0,0,0.55)',
+
+    elevation: {
+      level0: 'transparent',
+      level1: 'rgba(243, 244, 246, 1)',
+      level2: 'rgba(229, 231, 235, 1)',
+      level3: 'rgba(209, 213, 219, 1)',
+      level4: 'rgba(156, 163, 175, 1)',
+      level5: 'rgba(107, 114, 128, 1)',
+    },
+
+    textPrimary: 'rgba(0, 0, 0, 1)',
+    textSecondary: 'rgba(107, 114, 128, 0.89)',
+    textDisabled: 'rgba(160, 160, 160, 0.7)',
+
+    button: 'rgba(244, 197, 66, 1)',
+    buttonDisabled: 'rgba(244, 197, 66, 0.59)',
+    buttonText: 'rgba(0, 0, 0, 1)',
+
+    backgroundLayoutGradient: [
+      'rgba(255, 255, 255, 0.3)',
+      'rgba(255, 255, 255, 0.98)',
+      'rgb(255, 255, 255)',
+      'rgb(249, 250, 251)',
+    ],
+
+    skeletonHighlightColor: '#D6D6D6',
+    skeletonBaseColor: '#EDEDED',
+  },
+};
+
+export const DarkTheme: ITheme = {
+  colors: {
+    ...commonColors,
+    transparent: 'rgba(255, 255, 255, 0.04)',
+    onPrimary: 'rgba(15, 23, 42, 1)',
+    primaryContainer: 'rgba(250, 204, 21, 0.12)',
+
+    secondary: 'rgba(147, 197, 253, 1)',
+
+    background: 'rgb(22, 21, 21)',
+    onBackground: 'rgba(229, 231, 235, 1)',
+    backgroundDisabled: 'rgba(10, 10, 10, 0.5)',
+
+    surface: 'rgba(24, 33, 51, 1)',
+    onSurface: 'rgba(229, 231, 235, 1)',
+    surfaceVariant: '#2e2e2e',
+    onSurfaceVariant: 'rgba(203, 213, 225, 1)',
+
+    surfaceDisabled: 'rgba(255, 255, 255, 0.05)',
+
+    errorContainer: 'rgba(239, 68, 68, 0.05)',
+    onErrorContainer: 'rgba(255, 255, 255, 0.92)',
+
+    outline: 'rgba(148, 163, 184, 0.35)',
+    outlineDisabled: 'rgba(58, 58, 58, 1)',
+    outlineVariant: 'rgba(71, 85, 105, 1)',
+
+    border: 'rgba(223, 223, 223, 0.12)',
+
+    shadow: 'rgba(0, 0, 0, 0.5)',
+    scrim: 'rgba(0, 0, 0, 0.4)',
+    backdrop: 'rgba(30, 41, 59, 0.7)',
+    overlay: 'rgba(0,0,0,0.55)',
+
+    elevation: {
+      level0: 'transparent',
+      level1: 'rgba(34, 34, 34, 1)',
+      level2: 'rgba(60, 60, 60, 1)',
+      level3: 'rgba(76, 76, 76, 1)',
+      level4: 'rgba(71, 85, 105, 1)',
+      level5: 'rgba(100, 116, 139, 1)',
+    },
+
+    textPrimary: 'rgba(243, 244, 246, 1)',
+    textSecondary: 'rgba(203, 213, 225, 0.85)',
+    textDisabled: 'rgba(148, 163, 184, 0.6)',
+
+    button: 'rgba(250, 204, 21, 1)',
+    buttonDisabled: 'rgba(250, 204, 21, 0.5)',
+    buttonText: 'rgba(15, 23, 42, 1)',
+
+    backgroundLayoutGradient: [
+      'rgba(22, 21, 21, 0.65)',
+      'rgba(22, 21, 21, 0.98)',
+      'rgb(22, 21, 21)',
+      'rgb(22, 21, 21)',
+    ],
+
+    skeletonHighlightColor: '#C2C2C2',
+    skeletonBaseColor: '#2A2A2A',
+  },
+};

package/src/theme/utils/cleanColors.ts

@@ -0,0 +1,71 @@
+/**
+ * @author Naresh Dhamu
+ * @LastModified Mon 13 Jul 2026 at 10:13 AM
+ */
+
+/**
+ * Recursively cleans an object/array, removing null, undefined, empty strings,
+ * empty arrays, and empty objects.
+ */
+export const cleanColors = <T>(obj: T): T | undefined => {
+  if (obj == null) return undefined;
+
+  if (typeof obj === 'string') {
+    return obj.trim() !== '' ? obj : undefined;
+  }
+
+  if (Array.isArray(obj)) {
+    const cleanedArr = obj
+      .map((item) => cleanColors(item))
+      .filter((item) => item !== undefined);
+    return cleanedArr.length > 0 ? (cleanedArr as unknown as T) : undefined;
+  }
+
+  if (typeof obj === 'object') {
+    const cleanedObj: Record<string, any> = {};
+    let hasKeys = false;
+    for (const key in obj) {
+      if (Object.prototype.hasOwnProperty.call(obj, key)) {
+        const val = cleanColors((obj as any)[key]);
+        if (val !== undefined) {
+          cleanedObj[key] = val;
+          hasKeys = true;
+        }
+      }
+    }
+    return hasKeys ? (cleanedObj as T) : undefined;
+  }
+
+  return obj;
+};
+
+/**
+ * Recursively merges override colors into base colors, preserving nested structures
+ * (like elevation and alert) without overwriting unspecified sibling properties.
+ */
+export const mergeColors = <T extends Record<string, any>>(
+  base: T,
+  override?: Record<string, any>
+): T => {
+  if (!override) return base;
+  const result = { ...base };
+  for (const key in override) {
+    if (Object.prototype.hasOwnProperty.call(override, key)) {
+      const baseVal = base[key];
+      const overrideVal = override[key];
+      if (
+        overrideVal &&
+        typeof overrideVal === 'object' &&
+        !Array.isArray(overrideVal) &&
+        baseVal &&
+        typeof baseVal === 'object' &&
+        !Array.isArray(baseVal)
+      ) {
+        (result as any)[key] = mergeColors(baseVal, overrideVal);
+      } else {
+        (result as any)[key] = overrideVal;
+      }
+    }
+  }
+  return result;
+};

package/src/theme/utils/toRgba.ts

@@ -0,0 +1,150 @@
+/**
+ * @author Naresh Dhamu
+ * @LastModified Mon 13 Jul 2026 at 10:13 AM
+ */
+
+const HEX_REGEX = /^#([a-f0-9]{3,4}|[a-f0-9]{6}|[a-f0-9]{8})$/;
+const FUNCTION_REGEX = /^(rgb|rgba|hsl|hsla)\((.+)\)$/;
+
+const BASIC_COLORS_HEX: Record<string, string> = {
+  transparent: '#00000000',
+  black: '#000000',
+  white: '#ffffff',
+  red: '#ff0000',
+  green: '#00ff00',
+  blue: '#0000ff',
+};
+
+function parseHex(hex: string): [number, number, number, number] {
+  let hexStr = hex.slice(1);
+  if (hexStr.length === 3 || hexStr.length === 4) {
+    hexStr = hexStr
+      .split('')
+      .map((char) => char + char)
+      .join('');
+  }
+  const r = parseInt(hexStr.slice(0, 2), 16);
+  const g = parseInt(hexStr.slice(2, 4), 16);
+  const b = parseInt(hexStr.slice(4, 6), 16);
+  let a = 1;
+  if (hexStr.length === 8) {
+    a = parseInt(hexStr.slice(6, 8), 16) / 255;
+    a = Math.round(a * 1000) / 1000;
+  }
+  return [r, g, b, a];
+}
+
+function parseNumberOrPercent(val: string, max: number): number {
+  const isPercent = val.endsWith('%');
+  const numStr = isPercent ? val.slice(0, -1) : val;
+  const num = Number(numStr);
+  if (isPercent) {
+    return (num / 100) * max;
+  }
+  return num;
+}
+
+function parseAlpha(val: string): number {
+  const isPercent = val.endsWith('%');
+  const numStr = isPercent ? val.slice(0, -1) : val;
+  const num = Number(numStr);
+  if (isPercent) {
+    return num / 100;
+  }
+  return num;
+}
+
+function hslToRgb(h: number, s: number, l: number): [number, number, number] {
+  s /= 100;
+  l /= 100;
+  const k = (n: number) => (n + h / 30) % 12;
+  const a = s * Math.min(l, 1 - l);
+  const f = (n: number) =>
+    l - a * Math.max(-1, Math.min(k(n) - 3, 9 - k(n), 1));
+  return [
+    Math.round(f(0) * 255),
+    Math.round(f(8) * 255),
+    Math.round(f(4) * 255),
+  ];
+}
+
+/**
+ * Converts any CSS color string (hex, rgb, rgba, hsl, hsla, basic named color)
+ * to `rgba(r, g, b, a)` format.
+ *
+ * An optional alpha override can be provided to change the opacity.
+ * If conversion is not possible, returns the original color.
+ *
+ * @param color CSS color string
+ * @param alpha Optional override opacity (0 to 1)
+ */
+export function toRgba(color: string, alpha?: number): string {
+  if (typeof color !== 'string') return color;
+
+  const normalized = color.trim().toLowerCase();
+  if (normalized.length === 0) return color;
+
+  try {
+    let r = 0,
+      g = 0,
+      b = 0,
+      a = 1;
+    let parsed = false;
+
+    let hexOrColor = normalized;
+    if (normalized in BASIC_COLORS_HEX) {
+      hexOrColor = BASIC_COLORS_HEX[normalized]!;
+    }
+
+    if (HEX_REGEX.test(hexOrColor)) {
+      [r, g, b, a] = parseHex(hexOrColor);
+      parsed = true;
+    } else {
+      const funcMatch = normalized.match(FUNCTION_REGEX);
+      if (funcMatch) {
+        const [, name, argsStr] = funcMatch;
+        if (name && argsStr) {
+          const args = argsStr
+            .replace(/\//g, ',')
+            .split(/[\s,]+/)
+            .map((s) => s.trim())
+            .filter(Boolean);
+
+          if (args.length === 3 || args.length === 4) {
+            if (args.length === 4) {
+              a = parseAlpha(args[3]!);
+            }
+            if (name === 'rgb' || name === 'rgba') {
+              r = Math.round(parseNumberOrPercent(args[0]!, 255));
+              g = Math.round(parseNumberOrPercent(args[1]!, 255));
+              b = Math.round(parseNumberOrPercent(args[2]!, 255));
+              parsed = true;
+            } else if (name === 'hsl' || name === 'hsla') {
+              const h = Number(args[0]);
+              const s = parseNumberOrPercent(args[1]!, 100);
+              const l = parseNumberOrPercent(args[2]!, 100);
+              [r, g, b] = hslToRgb(h, s, l);
+              parsed = true;
+            }
+          }
+        }
+      }
+    }
+
+    if (!parsed) {
+      return color;
+    }
+
+    const finalAlpha = alpha !== undefined ? alpha : a;
+    const clampedR = Math.max(0, Math.min(255, r));
+    const clampedG = Math.max(0, Math.min(255, g));
+    const clampedB = Math.max(0, Math.min(255, b));
+    const clampedA = Math.max(0, Math.min(1, finalAlpha));
+    const formattedAlpha = Math.round(clampedA * 1000) / 1000;
+
+    return `rgba(${clampedR}, ${clampedG}, ${clampedB}, ${formattedAlpha})`;
+  } catch (error) {
+    console.warn(`toRgba: Failed to parse color "${color}":`, error);
+    return color;
+  }
+}