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

package/src/theme/store/theme.ts

@@ -1,50 +0,0 @@
-/**
- * @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

@@ -1,262 +0,0 @@
-/**
- * @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

@@ -1,71 +0,0 @@
-/**
- * @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

@@ -1,150 +0,0 @@
-/**
- * @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;
-  }
-}