@umituz/react-native-design-system 4.26.13 → 4.27.1

package/dist/molecules/ListItem.d.ts

@@ -1,4 +1,4 @@
 import React from 'react';
 import { ListItemProps } from './listitem/types';
 export type { ListItemProps };
-export declare const ListItem: React.FC<ListItemProps>;
+export declare const ListItem: React.NamedExoticComponent<ListItemProps>;

package/dist/molecules/action-footer/ActionFooter.d.ts

@@ -1,3 +1,3 @@
 import React from 'react';
 import type { ActionFooterProps } from './types';
-export declare const ActionFooter: React.FC<ActionFooterProps>;
+export declare const ActionFooter: React.NamedExoticComponent<ActionFooterProps>;

package/dist/molecules/icon-grid/IconGrid.d.ts

@@ -44,4 +44,4 @@ export interface IconGridProps {
  * />
  * ```
  */
-export declare const IconGrid: React.FC<IconGridProps>;
+export declare const IconGrid: React.NamedExoticComponent<IconGridProps>;

package/dist/molecules/navigation/index.d.ts

@@ -8,14 +8,92 @@ export type { BottomTabScreenProps, BottomTabNavigationOptions, } from "@react-n
 export { DEFAULT_FAB_CONFIG } from "./types";
 export { NavigationCleanupManager } from "./utils/NavigationCleanup";
 export type { NavigationCleanup } from "./utils/NavigationCleanup";
+/**
+ * AppNavigation - Global navigation utility for programmatic navigation outside React components.
+ *
+ * @example
+ * ```typescript
+ * import { AppNavigation } from '@umituz/react-native-design-system/molecules';
+ *
+ * // Navigate from a non-React context
+ * AppNavigation.navigate('ScreenName', { param: 'value' });
+ * ```
+ */
 export { AppNavigation } from "./utils/AppNavigation";
 export { TabLabel, type TabLabelProps } from "./components/TabLabel";
 export * from "./components/NavigationHeader";
 export { useTabBarStyles, type TabBarConfig } from "./hooks/useTabBarStyles";
 export { useTabConfig, type UseTabConfigProps } from "./hooks/useTabConfig";
+/**
+ * useAppNavigation - Standard navigation hook for all React Native packages.
+ *
+ * Provides a clean, type-safe navigation API that wraps React Navigation.
+ * Use this hook instead of @react-navigation/native's useNavigation for consistency.
+ *
+ * @example
+ * ```typescript
+ * import { useAppNavigation } from '@umituz/react-native-design-system/molecules';
+ *
+ * function MyScreen() {
+ *   const navigation = useAppNavigation();
+ *
+ *   return (
+ *     <Button onPress={() => navigation.navigate('Details', { id: 123 })}>
+ *       Go to Details
+ *     </Button>
+ *   );
+ * }
+ * ```
+ */
 export { useAppNavigation } from "./hooks/useAppNavigation";
+export type { AppNavigationResult } from "./hooks/useAppNavigation";
+/**
+ * useAppRoute - Hook to access current route parameters.
+ *
+ * @example
+ * ```typescript
+ * import { useAppRoute } from '@umituz/react-native-design-system/molecules';
+ *
+ * function DetailsScreen() {
+ *   const route = useAppRoute<{ id: number }>();
+ *   const id = route.params?.id;
+ * }
+ * ```
+ */
 export { useAppRoute, type RouteProp } from "./hooks/useAppRoute";
+/**
+ * useAppFocusEffect - Run effects when screen comes into focus.
+ *
+ * @example
+ * ```typescript
+ * import { useAppFocusEffect } from '@umituz/react-native-design-system/molecules';
+ * import { useCallback } from 'react';
+ *
+ * function ProfileScreen() {
+ *   useAppFocusEffect(
+ *     useCallback(() => {
+ *       console.log('Screen focused');
+ *       return () => console.log('Screen unfocused');
+ *     }, [])
+ *   );
+ * }
+ * ```
+ */
 export { useAppFocusEffect } from "./hooks/useAppFocusEffect";
+/**
+ * useAppIsFocused - Check if current screen is focused.
+ *
+ * @example
+ * ```typescript
+ * import { useAppIsFocused } from '@umituz/react-native-design-system/molecules';
+ *
+ * function VideoPlayer() {
+ *   const isFocused = useAppIsFocused();
+ *
+ *   return <Video playing={isFocused} />;
+ * }
+ * ```
+ */
 export { useAppIsFocused } from "./hooks/useAppIsFocused";
 export { createScreenOptions } from "./utils/createScreenOptions";
 export type { ScreenOptionsParams } from "./utils/createScreenOptions";

package/dist/onboarding/presentation/components/OnboardingFooter.d.ts

@@ -9,4 +9,4 @@ export interface OnboardingFooterProps {
     showProgressText?: boolean;
     disabled?: boolean;
 }
-export declare const OnboardingFooter: ({ currentIndex, totalSlides, isLastSlide, onNext, showProgressBar, showDots, showProgressText, disabled, }: OnboardingFooterProps) => React.JSX.Element;
+export declare const OnboardingFooter: React.NamedExoticComponent<OnboardingFooterProps>;

package/dist/onboarding/presentation/components/OnboardingHeader.d.ts

@@ -7,4 +7,4 @@ export interface OnboardingHeaderProps {
     showSkipButton?: boolean;
     skipButtonText?: string;
 }
-export declare const OnboardingHeader: ({ isFirstSlide, onBack, onSkip, showBackButton, showSkipButton, skipButtonText, }: OnboardingHeaderProps) => React.JSX.Element;
+export declare const OnboardingHeader: React.NamedExoticComponent<OnboardingHeaderProps>;

package/dist/utils/math/CalculationUtils.d.ts

@@ -0,0 +1,69 @@
+/**
+ * Calculation Utilities
+ *
+ * Common mathematical calculations used throughout the app
+ */
+/**
+ * Clamps a number between a minimum and maximum value
+ * @param value - The value to clamp
+ * @param min - Minimum allowed value (default: 0)
+ * @param max - Maximum allowed value (default: 100)
+ * @returns Clamped value
+ */
+export declare function clamp(value: number, min?: number, max?: number): number;
+/**
+ * Calculates progress percentage
+ * @param current - Current value
+ * @param total - Total value
+ * @returns Percentage (0-100)
+ */
+export declare function calculatePercentage(current: number, total: number): number;
+/**
+ * Rounds a number to specified decimal places
+ * @param value - The value to round
+ * @param decimals - Number of decimal places (default: 0)
+ * @returns Rounded value
+ */
+export declare function roundTo(value: number, decimals?: number): number;
+/**
+ * Converts intensity (0-100) to opacity (0-1)
+ * @param intensity - Intensity value (0-100)
+ * @param minOpacity - Minimum opacity (default: 0.05)
+ * @param maxOpacity - Maximum opacity (default: 0.95)
+ * @returns Opacity value (0-1)
+ */
+export declare function intensityToOpacity(intensity: number, minOpacity?: number, maxOpacity?: number): number;
+/**
+ * Calculates grid item width based on container width and columns
+ * @param containerWidth - Total container width
+ * @param columns - Number of columns
+ * @param gap - Gap between items in pixels
+ * @returns Item width in pixels
+ */
+export declare function calculateGridItemWidth(containerWidth: number, columns: number, gap: number): number;
+/**
+ * Checks if a value is within a range (inclusive)
+ * @param value - Value to check
+ * @param min - Range minimum
+ * @param max - Range maximum
+ * @returns True if value is in range
+ */
+export declare function isInRange(value: number, min: number, max: number): boolean;
+/**
+ * Linear interpolation between two values
+ * @param start - Start value
+ * @param end - End value
+ * @param progress - Progress (0-1)
+ * @returns Interpolated value
+ */
+export declare function lerp(start: number, end: number, progress: number): number;
+/**
+ * Maps a value from one range to another
+ * @param value - Value to map
+ * @param inMin - Input range minimum
+ * @param inMax - Input range maximum
+ * @param outMin - Output range minimum
+ * @param outMax - Output range maximum
+ * @returns Mapped value
+ */
+export declare function mapRange(value: number, inMin: number, inMax: number, outMin: number, outMax: number): number;

package/dist/utils/math/OpacityUtils.d.ts

@@ -0,0 +1,31 @@
+/**
+ * Opacity Utilities
+ *
+ * Helper functions for opacity-related calculations
+ */
+/**
+ * Converts intensity value to opacity for glassmorphism effects
+ * @param intensity - Intensity value (0-100)
+ * @param options - Configuration options
+ * @returns Opacity value (0-1)
+ */
+export declare function intensityToOpacity(intensity: number, options?: {
+    minOpacity?: number;
+    maxOpacity?: number;
+    invert?: boolean;
+}): number;
+/**
+ * Creates an RGBA color string with specified opacity
+ * @param rgb - RGB color as array [r, g, b]
+ * @param opacity - Opacity value (0-1)
+ * @returns RGBA color string
+ */
+export declare function createRgbaColor(rgb: [number, number, number], opacity: number): string;
+/**
+ * Calculates opacity based on a ratio (0-1)
+ * @param ratio - Ratio value (0-1)
+ * @param minOpacity - Minimum opacity (default: 0.1)
+ * @param maxOpacity - Maximum opacity (default: 1)
+ * @returns Opacity value (0-1)
+ */
+export declare function ratioToOpacity(ratio: number, minOpacity?: number, maxOpacity?: number): number;

package/dist/utils/math/ProgressUtils.d.ts

@@ -0,0 +1,37 @@
+/**
+ * Progress Utilities
+ *
+ * Helper functions for progress-related calculations
+ */
+/**
+ * Validates and clamps a progress value to ensure it's within valid range
+ * @param value - Raw progress value
+ * @returns Clamped progress value (0-100)
+ */
+export declare function normalizeProgress(value: number): number;
+/**
+ * Formats a progress value as a percentage string
+ * @param value - Progress value (0-100)
+ * @param decimals - Number of decimal places (default: 0)
+ * @returns Formatted percentage string
+ */
+export declare function formatPercentage(value: number, decimals?: number): string;
+/**
+ * Calculates the percentage completed of a multi-step process
+ * @param currentStep - Current step (1-indexed)
+ * @param totalSteps - Total number of steps
+ * @returns Percentage (0-100)
+ */
+export declare function calculateStepProgress(currentStep: number, totalSteps: number): number;
+/**
+ * Checks if progress is complete
+ * @param value - Progress value (0-100)
+ * @returns True if progress is 100%
+ */
+export declare function isComplete(value: number): boolean;
+/**
+ * Checks if progress has started
+ * @param value - Progress value (0-100)
+ * @returns True if progress > 0%
+ */
+export declare function hasStarted(value: number): boolean;

package/dist/utils/math/index.d.ts

@@ -0,0 +1,6 @@
+/**
+ * Math Utilities Index
+ */
+export { clamp, calculatePercentage, roundTo, calculateGridItemWidth, isInRange, lerp, mapRange, } from './CalculationUtils';
+export { normalizeProgress, formatPercentage, calculateStepProgress, isComplete, hasStarted, } from './ProgressUtils';
+export { intensityToOpacity, createRgbaColor, ratioToOpacity, } from './OpacityUtils';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@umituz/react-native-design-system",
-  "version": "4.26.13",
+  "version": "4.27.1",
   "description": "Universal design system for React Native apps - Consolidated package with atoms, molecules, organisms, theme, typography, responsive, safe area, exception, infinite scroll, UUID, image, timezone, offline, onboarding, and loading utilities - TanStack persistence and expo-image-manipulator now lazy loaded",
   "main": "./src/index.ts",
   "types": "./dist/index.d.ts",

package/src/device/detection/deviceDetection.ts

@@ -46,7 +46,9 @@ export const isTablet = (): boolean => {
     return Device.deviceType === Device.DeviceType.TABLET;
   }
   // Fallback: Platform.isPad (iOS) or screen width >= 600dp (Android)
-  if (Platform.OS === 'ios' && (Platform as any).isPad) return true;
+  // Platform.isPad is not in React Native types but exists on iOS
+  const platformWithIsPad = Platform as { isPad?: boolean };
+  if (Platform.OS === 'ios' && platformWithIsPad.isPad) return true;
   const { width, height } = getScreenDimensions();
   return Math.min(width, height) >= 600;
 };

package/src/device/presentation/hooks/useAnonymousUser.ts

@@ -46,7 +46,6 @@ export const useAnonymousUser = (
 ): UseAnonymousUserResult => {
   const {
     anonymousDisplayName = 'Anonymous',
-    fallbackUserId = 'anonymous_fallback',
   } = options || {};
 
   const { data: anonymousUser, isLoading, error, execute } = useAsyncOperation<AnonymousUser, string>(
@@ -56,9 +55,14 @@ export const useAnonymousUser = (
         DeviceService.getUserFriendlyId(),
       ]);
 
+      // No fallback - if we can't get ID, let it error
+      if (!userId) {
+        throw new Error('Failed to generate device ID');
+      }
+
       return {
-        userId: userId || fallbackUserId,
-        deviceName: deviceName || 'Unknown Device',
+        userId,
+        deviceName: deviceName ?? 'Device',
         displayName: anonymousDisplayName,
         isAnonymous: true,
       };
@@ -66,16 +70,7 @@ export const useAnonymousUser = (
     {
       immediate: true,
       initialData: null,
-      errorHandler: () => 'Failed to generate device ID',
-      onError: () => {
-        // Fallback on error - set default anonymous user
-        return {
-          userId: fallbackUserId,
-          deviceName: 'Unknown Device',
-          displayName: anonymousDisplayName,
-          isAnonymous: true,
-        };
-      },
+      errorHandler: (err) => `Failed to generate device ID: ${err instanceof Error ? err.message : String(err)}`,
     }
   );
 

package/src/molecules/calendar/infrastructure/storage/CalendarStore.ts

@@ -27,7 +27,13 @@ export const useCalendar = () => {
   const view = useCalendarView();
 
   // Utility functions - memoized to prevent recreating on every render
-  const getEventsForDate = useCallback((date: Date) => {
+  const getEventsForDate = useCallback((date: Date | null | undefined) => {
+    if (!date || !(date instanceof Date) || isNaN(date.getTime())) {
+      if (__DEV__) {
+        console.warn('[CalendarStore] getEventsForDate called with invalid date:', date);
+      }
+      return [];
+    }
     return events.events.filter(event => {
       const eventDate = new Date(event.date);
       return eventDate.toDateString() === date.toDateString();
@@ -35,6 +41,13 @@ export const useCalendar = () => {
   }, [events.events]);
 
   const getEventsForMonth = useCallback((year: number, month: number) => {
+    if (typeof year !== 'number' || typeof month !== 'number' ||
+        isNaN(year) || isNaN(month) || month < 0 || month > 11) {
+      if (__DEV__) {
+        console.warn('[CalendarStore] getEventsForMonth called with invalid year/month:', { year, month });
+      }
+      return [];
+    }
     return events.events.filter(event => {
       const eventDate = new Date(event.date);
       return eventDate.getFullYear() === year && eventDate.getMonth() === month;

package/src/molecules/navigation/hooks/useAppNavigation.ts

@@ -1,4 +1,4 @@
-import { useNavigation, StackActions } from "@react-navigation/native";
+import { useNavigation, StackActions, CommonActions } from "@react-navigation/native";
 import type { NavigationProp, ParamListBase } from "@react-navigation/native";
 import { useCallback, useMemo } from "react";
 
@@ -31,8 +31,13 @@ export function useAppNavigation(): AppNavigationResult {
 
   const navigate = useCallback(
     (screen: string, params?: Record<string, unknown>) => {
-      // Dynamic navigation: bypass ParamListBase constraint to allow arbitrary screen names
-      (navigation as any).navigate(screen, params);
+      // Dynamic navigation: use CommonActions for type-safe arbitrary screen navigation
+      navigation.dispatch(
+        CommonActions.navigate({
+          name: screen,
+          params,
+        })
+      );
     },
     [navigation]
   );

package/src/molecules/navigation/index.ts

@@ -31,14 +31,98 @@ export { NavigationCleanupManager } from "./utils/NavigationCleanup";
 export type { NavigationCleanup } from "./utils/NavigationCleanup";
 
 // Navigation Utilities
+
+/**
+ * AppNavigation - Global navigation utility for programmatic navigation outside React components.
+ *
+ * @example
+ * ```typescript
+ * import { AppNavigation } from '@umituz/react-native-design-system/molecules';
+ *
+ * // Navigate from a non-React context
+ * AppNavigation.navigate('ScreenName', { param: 'value' });
+ * ```
+ */
 export { AppNavigation } from "./utils/AppNavigation";
+
 export { TabLabel, type TabLabelProps } from "./components/TabLabel";
-export * from "./components/NavigationHeader";
+export { NavigationHeader, type NavigationHeaderProps } from "./components/NavigationHeader";
 export { useTabBarStyles, type TabBarConfig } from "./hooks/useTabBarStyles";
 export { useTabConfig, type UseTabConfigProps } from "./hooks/useTabConfig";
+
+/**
+ * useAppNavigation - Standard navigation hook for all React Native packages.
+ *
+ * Provides a clean, type-safe navigation API that wraps React Navigation.
+ * Use this hook instead of @react-navigation/native's useNavigation for consistency.
+ *
+ * @example
+ * ```typescript
+ * import { useAppNavigation } from '@umituz/react-native-design-system/molecules';
+ *
+ * function MyScreen() {
+ *   const navigation = useAppNavigation();
+ *
+ *   return (
+ *     <Button onPress={() => navigation.navigate('Details', { id: 123 })}>
+ *       Go to Details
+ *     </Button>
+ *   );
+ * }
+ * ```
+ */
 export { useAppNavigation } from "./hooks/useAppNavigation";
+export type { AppNavigationResult } from "./hooks/useAppNavigation";
+
+/**
+ * useAppRoute - Hook to access current route parameters.
+ *
+ * @example
+ * ```typescript
+ * import { useAppRoute } from '@umituz/react-native-design-system/molecules';
+ *
+ * function DetailsScreen() {
+ *   const route = useAppRoute<{ id: number }>();
+ *   const id = route.params?.id;
+ * }
+ * ```
+ */
 export { useAppRoute, type RouteProp } from "./hooks/useAppRoute";
+
+/**
+ * useAppFocusEffect - Run effects when screen comes into focus.
+ *
+ * @example
+ * ```typescript
+ * import { useAppFocusEffect } from '@umituz/react-native-design-system/molecules';
+ * import { useCallback } from 'react';
+ *
+ * function ProfileScreen() {
+ *   useAppFocusEffect(
+ *     useCallback(() => {
+ *       console.log('Screen focused');
+ *       return () => console.log('Screen unfocused');
+ *     }, [])
+ *   );
+ * }
+ * ```
+ */
 export { useAppFocusEffect } from "./hooks/useAppFocusEffect";
+
+/**
+ * useAppIsFocused - Check if current screen is focused.
+ *
+ * @example
+ * ```typescript
+ * import { useAppIsFocused } from '@umituz/react-native-design-system/molecules';
+ *
+ * function VideoPlayer() {
+ *   const isFocused = useAppIsFocused();
+ *
+ *   return <Video playing={isFocused} />;
+ * }
+ * ```
+ */
 export { useAppIsFocused } from "./hooks/useAppIsFocused";
 
 // Screen Options

package/src/onboarding/presentation/components/BackgroundImageCollage.tsx

@@ -5,7 +5,7 @@
  */
 
 import React, { useMemo } from "react";
-import { View, Image as RNImage, StyleSheet } from "react-native";
+import { View, Image as RNImage, StyleSheet, type ImageURISource, type ImageStyle } from "react-native";
 import { useSafeAreaInsets } from "../../../safe-area/hooks/useSafeAreaInsets";
 import {
   generateGridLayout,
@@ -93,8 +93,8 @@ export const BackgroundImageCollage: React.FC<BackgroundImageCollageProps> = ({
         return (
           <RNImage
             key={String(item.source)}
-            source={item.source as any}
-            style={item.style as any}
+            source={item.source as ImageURISource | number}
+            style={item.style as ImageStyle}
             resizeMode="cover"
           />
         );

package/src/onboarding/presentation/components/OnboardingFooter.tsx

@@ -52,7 +52,7 @@ export const OnboardingFooter = React.memo<OnboardingFooterProps>(({
   const progressFillStyle = useMemo(
     () => ({
       ...styles.progressFill,
-      width: `${progressPercent}%` as any,
+      width: `${progressPercent}%` as `${number}%`,
       backgroundColor: colors.progressFillColor,
     }),
     [progressPercent, colors.progressFillColor]

package/src/storage/cache/domain/CacheManager.ts

@@ -20,10 +20,12 @@ export class CacheManager {
   }
 
   getCache<T>(name: string, config?: CacheConfig): Cache<T> {
-    if (!this.caches.has(name)) {
-      this.caches.set(name, new Cache<T>(config));
+    let cache = this.caches.get(name);
+    if (!cache) {
+      cache = new Cache<T>(config);
+      this.caches.set(name, cache);
     }
-    return this.caches.get(name)!;
+    return cache;
   }
 
   deleteCache(name: string): boolean {

package/src/storage/cache/presentation/useCachedValue.ts

@@ -25,7 +25,12 @@ export function useCachedValue<T>(
         return cached;
       }
 
-      const data = await fetcherRef.current!();
+      const fetcherFn = fetcherRef.current;
+      if (!fetcherFn) {
+        throw new Error('Fetcher function is not defined');
+      }
+
+      const data = await fetcherFn();
       cache.set(key, data, configRef.current?.ttl);
       return data;
     },

package/src/storage/presentation/hooks/usePersistentCache.ts

@@ -142,10 +142,25 @@ export function usePersistentCache<T>(
 
   const setData = useCallback(
     async (value: T) => {
-      await cacheOps.saveToStorage(key, value, { ttl, version, enabled });
+      // Optimistic update
+      const previousData = state.data;
       stableActionsRef.current.setData(value);
+
+      try {
+        await cacheOps.saveToStorage(key, value, { ttl, version, enabled });
+      } catch (error) {
+        // Rollback on error
+        if (previousData !== null) {
+          stableActionsRef.current.setData(previousData);
+        } else {
+          stableActionsRef.current.clearData();
+        }
+        if (__DEV__) {
+          console.warn('[usePersistentCache] Failed to save to storage, rolling back:', error);
+        }
+      }
     },
-    [key, ttl, version, enabled, cacheOps],
+    [key, ttl, version, enabled, cacheOps, state.data],
   );
 
   const clearData = useCallback(async () => {

package/src/storage/presentation/hooks/useStorageState.ts

@@ -57,10 +57,21 @@ export const useStorageState = <T>(
   // Update state and persist to storage
   const updateState = useCallback(
     async (value: T) => {
+      // Optimistic update
+      const previousValue = state;
       setState(value);
-      await storageRepository.setItem(keyString, value);
+
+      try {
+        await storageRepository.setItem(keyString, value);
+      } catch (error) {
+        // Rollback on error
+        setState(previousValue);
+        if (__DEV__) {
+          console.warn('[useStorageState] Failed to persist state, rolling back:', error);
+        }
+      }
     },
-    [keyString]
+    [keyString, state]
   );
 
   return [state, updateState, isLoading];

package/src/tanstack/infrastructure/monitoring/DevMonitor.ts

@@ -188,8 +188,6 @@ class DevMonitorClass {
   reset(): void {
     if (!this.isEnabled) return;
     this.detach();
-    this.stopStatsLogging();
-    this.clear();
     if (this.options.enableLogging) {
       DevMonitorLogger.logReset();
     }

package/src/theme/infrastructure/providers/DesignSystemProvider.tsx

@@ -9,6 +9,7 @@ import type { CustomThemeColors } from '../../core/CustomColors';
 import type { SplashScreenProps } from '../../../molecules/splash/types';
 import { useIconStore } from '../../../atoms/icon/iconStore';
 import type { IconRenderer, IconNames } from '../../../atoms/icon/iconStore';
+import { FIVE_SECONDS_MS } from '../../../utils/constants/TimeConstants';
 
 // Lazy load SplashScreen to avoid circular dependency
 const SplashScreen = lazy(() => import('../../../molecules/splash').then(m => ({ default: m.SplashScreen })));
@@ -82,7 +83,7 @@ export const DesignSystemProvider: React.FC<DesignSystemProviderProps> = ({
         if (!prev) onError?.(new Error('DesignSystemProvider initialization timed out'));
         return true;
       });
-    }, 5000);
+    }, FIVE_SECONDS_MS);
 
     initialize()
       .then(() => {

package/src/theme/infrastructure/stores/themeStore.ts

@@ -12,6 +12,26 @@ import { useDesignSystemTheme } from '../globalThemeStore';
 import type { ThemeMode } from '../../core/ColorPalette';
 import type { CustomThemeColors } from '../../core/CustomColors';
 
+/**
+ * Shallow equality check for CustomThemeColors
+ * Compares all defined properties without deep object traversal
+ */
+function areCustomColorsEqual(a?: CustomThemeColors, b?: CustomThemeColors): boolean {
+  if (a === b) return true;
+  if (!a || !b) return false;
+
+  const keysA = Object.keys(a) as (keyof CustomThemeColors)[];
+  const keysB = Object.keys(b) as (keyof CustomThemeColors)[];
+
+  if (keysA.length !== keysB.length) return false;
+
+  for (const key of keysA) {
+    if (a[key] !== b[key]) return false;
+  }
+
+  return true;
+}
+
 interface ThemeState {
   theme: Theme;
   themeMode: ThemeMode;
@@ -118,8 +138,8 @@ export const useTheme = createStore<ThemeState, ThemeActions>({
       const { _updateInProgress, customColors: currentColors } = get();
       if (_updateInProgress) return;
 
-      // Deep comparison to avoid redundant updates from new object references
-      if (JSON.stringify(colors) === JSON.stringify(currentColors)) return;
+      // Shallow comparison to avoid redundant updates from new object references
+      if (areCustomColorsEqual(colors, currentColors)) return;
 
       const updateId = Date.now();
       set({ _updateInProgress: true, _lastUpdateId: updateId, customColors: colors });

package/src/timezone/infrastructure/utils/SimpleCache.ts

@@ -5,6 +5,8 @@
  * No external dependencies - pure TypeScript implementation
  */
 
+import { ONE_MINUTE_MS } from '../../../utils/constants/TimeConstants';
+
 interface CacheEntry<T> {
   value: T;
   expires: number;
@@ -17,7 +19,7 @@ export class SimpleCache<T> {
   private destroyed = false;
   private cleanupScheduleLock = false;
 
-  constructor(defaultTTL: number = 60000) {
+  constructor(defaultTTL: number = ONE_MINUTE_MS) {
     this.defaultTTL = defaultTTL;
     this.scheduleCleanup();
   }
@@ -91,9 +93,13 @@ export class SimpleCache<T> {
 
       if (!this.destroyed) {
         this.cleanupTimeout = setTimeout(() => {
-          this.cleanupScheduleLock = false;
-          this.scheduleCleanup();
-        }, 60000);
+          if (!this.destroyed) {
+            this.cleanupScheduleLock = false;
+            this.scheduleCleanup();
+          }
+        }, ONE_MINUTE_MS);
+      } else {
+        this.cleanupScheduleLock = false;
       }
     } catch (error) {
       this.cleanupScheduleLock = false;

package/src/typography/presentation/utils/textColorUtils.ts

@@ -53,7 +53,10 @@ export function getTextColor(
 
   const cacheKey = `${color}_${Object.keys(tokens.colors).length}_${tokens.colors.textPrimary}`;
 
-  if (colorCache.has(cacheKey)) return colorCache.get(cacheKey)!;
+  if (colorCache.has(cacheKey)) {
+    const cached = colorCache.get(cacheKey);
+    if (cached) return cached;
+  }
 
   const colorKey = COLOR_MAP[color as ColorVariant] ?? 'textPrimary';
   const resolvedColor = tokens.colors[colorKey];

package/src/typography/presentation/utils/textStyleUtils.ts

@@ -112,7 +112,8 @@ export function getTextStyle(
 
   // Check cache first
   if (typographyCache.has(cacheKey)) {
-    return typographyCache.get(cacheKey)!;
+    const cached = typographyCache.get(cacheKey);
+    if (cached) return cached;
   }
 
   // Resolve style and cache it

package/src/utils/async/retryWithBackoff.ts

@@ -5,6 +5,8 @@
  * Useful for network requests, file operations, etc.
  */
 
+import { DEFAULT_LONG_TIMEOUT_MS, DEFAULT_TIMEOUT_MS, ONE_MINUTE_MS, ONE_SECOND_MS, TEN_SECONDS_MS } from '../constants/TimeConstants';
+
 export interface RetryOptions {
   /**
    * Maximum number of retry attempts
@@ -59,14 +61,14 @@ export async function retryWithBackoff<T>(
 ): Promise<T> {
   const {
     maxRetries = 3,
-    baseDelay = 1000,
-    maxDelay = 10000,
+    baseDelay = ONE_SECOND_MS,
+    maxDelay = TEN_SECONDS_MS,
     backoffMultiplier = 2,
     shouldRetry = () => true,
     onRetry,
   } = options;
 
-  let lastError: Error;
+  let lastError: Error | undefined;
 
   for (let attempt = 0; attempt <= maxRetries; attempt++) {
     try {
@@ -106,7 +108,7 @@ export async function retryWithBackoff<T>(
   }
 
   // This should never be reached, but TypeScript needs it
-  throw lastError!;
+  throw lastError ?? new Error('Retry operation failed with unknown error');
 }
 
 /**
@@ -125,7 +127,7 @@ export async function retryWithTimeout<T>(
   fn: () => Promise<T>,
   options: RetryOptions & { timeout?: number } = {}
 ): Promise<T> {
-  const { timeout = 30000, ...retryOptions } = options;
+  const { timeout = DEFAULT_LONG_TIMEOUT_MS, ...retryOptions } = options;
 
   return retryWithBackoff(
     () => withTimeout(fn(), timeout),

package/src/utils/constants/TimeConstants.ts

@@ -0,0 +1,34 @@
+/**
+ * Time Constants
+ *
+ * Centralized time-related constants to replace magic numbers
+ */
+
+export const MILLISECONDS_PER_SECOND = 1000;
+export const MILLISECONDS_PER_MINUTE = 60 * 1000; // 60000
+export const MILLISECONDS_PER_HOUR = 60 * 60 * 1000; // 3600000
+export const MILLISECONDS_PER_DAY = 24 * 60 * 60 * 1000; // 86400000
+
+export const SECONDS_PER_MINUTE = 60;
+export const SECONDS_PER_HOUR = 60 * 60;
+export const SECONDS_PER_DAY = 24 * 60 * 60;
+
+export const MINUTES_PER_HOUR = 60;
+export const MINUTES_PER_DAY = 24 * 60;
+
+// Common time intervals
+export const ONE_SECOND_MS = MILLISECONDS_PER_SECOND;
+export const FIVE_SECONDS_MS = 5 * MILLISECONDS_PER_SECOND;
+export const TEN_SECONDS_MS = 10 * MILLISECONDS_PER_SECOND;
+export const THIRTY_SECONDS_MS = 30 * MILLISECONDS_PER_SECOND;
+export const ONE_MINUTE_MS = MILLISECONDS_PER_MINUTE;
+export const FIVE_MINUTES_MS = 5 * MILLISECONDS_PER_MINUTE;
+export const TEN_MINUTES_MS = 10 * MILLISECONDS_PER_MINUTE;
+export const THIRTY_MINUTES_MS = 30 * MILLISECONDS_PER_MINUTE;
+export const ONE_HOUR_MS = MILLISECONDS_PER_HOUR;
+export const ONE_DAY_MS = MILLISECONDS_PER_DAY;
+
+// Default timeouts
+export const DEFAULT_TIMEOUT_MS = FIVE_SECONDS_MS;
+export const DEFAULT_LONG_TIMEOUT_MS = THIRTY_SECONDS_MS;
+export const DEFAULT_CACHE_TTL_MS = ONE_MINUTE_MS;

package/src/utils/errors/DesignSystemError.ts

@@ -60,8 +60,9 @@ export class DesignSystemError extends Error {
     this.retryable = metadata?.retryable ?? false;
 
     // Maintains proper stack trace for where our error was thrown (only available on V8)
-    if (typeof (Error as any).captureStackTrace === 'function') {
-      (Error as any).captureStackTrace(this, DesignSystemError);
+    const ErrorConstructor = Error as { captureStackTrace?: (error: Error, constructor: typeof DesignSystemError) => void };
+    if (typeof ErrorConstructor.captureStackTrace === 'function') {
+      ErrorConstructor.captureStackTrace(this, DesignSystemError);
     }
   }
 

package/src/utils/logger.ts

@@ -100,8 +100,11 @@ class Logger {
    * Use for performance measurements
    */
   time(label: string): void {
-    if (this.isDev && (console as any).time) {
-      (console as any).time(label);
+    if (this.isDev) {
+      const consoleWithTime = console as { time?: (label: string) => void };
+      if (typeof consoleWithTime.time === 'function') {
+        consoleWithTime.time(label);
+      }
     }
   }
 
@@ -109,8 +112,11 @@ class Logger {
    * End time measurement - only in development
    */
   timeEnd(label: string): void {
-    if (this.isDev && (console as any).timeEnd) {
-      (console as any).timeEnd(label);
+    if (this.isDev) {
+      const consoleWithTimeEnd = console as { timeEnd?: (label: string) => void };
+      if (typeof consoleWithTimeEnd.timeEnd === 'function') {
+        consoleWithTimeEnd.timeEnd(label);
+      }
     }
   }