@umituz/react-native-design-system 4.23.60 → 4.23.62

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@umituz/react-native-design-system",
-  "version": "4.23.60",
+  "version": "4.23.62",
   "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",
   "main": "./src/index.ts",
   "types": "./src/index.ts",

package/src/atoms/EmptyState.tsx

@@ -11,7 +11,7 @@ import React from 'react';
 import { View, StyleSheet, TouchableOpacity, ViewStyle } from 'react-native';
 import { AtomicIcon } from './icon';
 import { AtomicText } from './AtomicText';
-import { useAppDesignTokens, BASE_TOKENS } from '../theme';
+import { useAppDesignTokens } from '../theme';
 
 export interface EmptyStateProps {
   icon?: string;
@@ -39,14 +39,47 @@ export const EmptyState: React.FC<EmptyStateProps> = ({
   const tokens = useAppDesignTokens();
   const displayDescription = description || subtitle;
 
+  const themedStyles = React.useMemo(
+    () =>
+      StyleSheet.create({
+        container: {
+          flex: 1,
+          alignItems: 'flex-start',
+          justifyContent: 'flex-start',
+          padding: tokens.spacing.xl,
+        },
+        iconContainer: {
+          width: 120,
+          height: 120,
+          borderRadius: 60,
+          alignItems: 'flex-start',
+          justifyContent: 'flex-start',
+          marginBottom: tokens.spacing.lg,
+        },
+        title: {
+          marginBottom: tokens.spacing.sm,
+        },
+        description: {
+          marginBottom: tokens.spacing.lg,
+        },
+        actionButton: {
+          paddingHorizontal: tokens.spacing.lg,
+          paddingVertical: tokens.spacing.md,
+          borderRadius: tokens.borders.radius.md,
+          marginTop: tokens.spacing.sm,
+        },
+      }),
+    [tokens],
+  );
+
   return (
-    <View style={[styles.container, style]} testID={testID}>
+    <View style={[themedStyles.container, style]} testID={testID}>
       {illustration ? (
         illustration
       ) : (
         <View
           style={[
-            styles.iconContainer,
+            themedStyles.iconContainer,
             { backgroundColor: tokens.colors.surface },
           ]}
         >
@@ -57,7 +90,7 @@ export const EmptyState: React.FC<EmptyStateProps> = ({
       <AtomicText
         type="headlineSmall"
         color="primary"
-        style={[styles.title, { textAlign: 'left' }]}
+        style={[themedStyles.title, { textAlign: 'left' }]}
       >
         {title}
       </AtomicText>
@@ -66,7 +99,7 @@ export const EmptyState: React.FC<EmptyStateProps> = ({
         <AtomicText
           type="bodyMedium"
           color="secondary"
-          style={[styles.description, { textAlign: 'left' }]}
+          style={[themedStyles.description, { textAlign: 'left' }]}
         >
           {displayDescription}
         </AtomicText>
@@ -75,7 +108,7 @@ export const EmptyState: React.FC<EmptyStateProps> = ({
       {actionLabel && onAction && (
         <TouchableOpacity
           style={[
-            styles.actionButton,
+            themedStyles.actionButton,
             { backgroundColor: tokens.colors.primary },
           ]}
           onPress={onAction}
@@ -90,31 +123,3 @@ export const EmptyState: React.FC<EmptyStateProps> = ({
   );
 };
 
-const styles = StyleSheet.create({
-  container: {
-    flex: 1,
-    alignItems: 'flex-start',
-    justifyContent: 'flex-start',
-    padding: BASE_TOKENS.spacing.xl,
-  },
-  iconContainer: {
-    width: 120,
-    height: 120,
-    borderRadius: 60,
-    alignItems: 'flex-start',
-    justifyContent: 'flex-start',
-    marginBottom: BASE_TOKENS.spacing.lg,
-  },
-  title: {
-    marginBottom: BASE_TOKENS.spacing.sm,
-  },
-  description: {
-    marginBottom: BASE_TOKENS.spacing.lg,
-  },
-  actionButton: {
-    paddingHorizontal: BASE_TOKENS.spacing.lg,
-    paddingVertical: BASE_TOKENS.spacing.md,
-    borderRadius: BASE_TOKENS.borders.radius.md,
-    marginTop: BASE_TOKENS.spacing.sm,
-  },
-});

package/src/atoms/input/hooks/useInputState.ts

@@ -1,4 +1,4 @@
-import { useState, useCallback } from 'react';
+import { useState, useCallback, useEffect } from 'react';
 
 interface UseInputStateProps {
   value?: string;
@@ -34,6 +34,11 @@ export const useInputState = ({
   const [isFocused, setIsFocused] = useState(false);
   const [isPasswordVisible, setIsPasswordVisible] = useState(!secureTextEntry);
 
+  // Sync localValue when controlled value prop changes externally
+  useEffect(() => {
+    setLocalValue(value);
+  }, [value]);
+
   const handleTextChange = useCallback((text: string) => {
     setLocalValue(text);
     onChangeText?.(text);

package/src/device/infrastructure/services/DeviceCapabilityService.ts

@@ -27,13 +27,28 @@ export class DeviceCapabilityService {
     return {
       isDevice: info.isDevice,
       isTablet: info.deviceType === DeviceType.TABLET,
-      hasNotch: await this.hasNotch(),
+      hasNotch: this.hasNotchFromInfo(info),
       totalMemoryGB: info.totalMemory
         ? info.totalMemory / (1024 * 1024 * 1024)
         : null,
     };
   }
 
+  /**
+   * Check if device has notch/dynamic island from existing info
+   */
+  private static hasNotchFromInfo(info: { modelName?: string | null }): boolean {
+    if (Platform.OS !== 'ios') {
+      return false;
+    }
+    const modelName = info.modelName?.toLowerCase() ?? '';
+    return (
+      modelName.includes('iphone x') ||
+      modelName.includes('iphone 1') ||
+      modelName.includes('pro')
+    );
+  }
+
   /**
    * Check if device has notch/dynamic island
    */

package/src/exports/exception.ts

@@ -5,5 +5,3 @@
  */
 
 export * from "../exception";
-
-export { ErrorBoundary } from "../exception/presentation/components/ErrorBoundary";

package/src/exports/tanstack.ts

@@ -1,6 +1 @@
 export * from "../tanstack";
-
-export {
-  getGlobalQueryClient,
-  hasGlobalQueryClient,
-} from "../tanstack/infrastructure/config/QueryClientSingleton";

package/src/exports/timezone.ts

@@ -5,5 +5,3 @@
  */
 
 export * from "../timezone";
-
-export { timezoneService } from "../timezone/infrastructure/services/TimezoneService";

package/src/index.ts

@@ -61,7 +61,6 @@ export * from "./exports/safe-area";
 // EXCEPTION EXPORTS
 // =============================================================================
 export * from "./exports/exception";
-export { ErrorBoundary } from "./exception/presentation/components/ErrorBoundary";
 
 // =============================================================================
 // INFINITE SCROLL EXPORTS
@@ -82,7 +81,6 @@ export * from "./exports/timezone";
 // OFFLINE EXPORTS
 // =============================================================================
 export * from "./exports/offline";
-export { NetworkProvider, useOffline, OfflineBanner } from "./offline";
 
 // =============================================================================
 // IMAGE EXPORTS
@@ -109,10 +107,6 @@ export * from "./exports/utilities";
 // =============================================================================
 export * from "./exports/storage";
 
-// =============================================================================
-// STORAGE STATE EXPORTS
-// =============================================================================
-export * from "./storage/presentation/hooks/useStorageState";
 
 // =============================================================================
 // ONBOARDING EXPORTS
@@ -132,7 +126,6 @@ export * from "./exports/media";
 // TANSTACK EXPORTS
 // =============================================================================
 export * from "./exports/tanstack";
-export { TanstackProvider } from "./tanstack";
 
 // =============================================================================
 // LOADING EXPORTS

package/src/molecules/action-footer/ActionFooter.tsx

@@ -1,5 +1,5 @@
 
-import React from 'react';
+import React, { useMemo } from 'react';
 import { View, StyleSheet, TouchableOpacity } from 'react-native';
 import { AtomicText } from '../../atoms/AtomicText';
 import { AtomicIcon } from '../../atoms';
@@ -17,49 +17,53 @@ export const ActionFooter: React.FC<ActionFooterProps> = ({
 }) => {
   const tokens = useAppDesignTokens();
 
-  const styles = StyleSheet.create({
-    container: {
-      flexDirection: 'row',
-      alignItems: 'center',
-      paddingVertical: tokens.spacing.md,
-      gap: tokens.spacing.md,
-    },
-    backButton: {
-      width: 56,
-      height: 56,
-      borderRadius: tokens.borders.radius.lg,
-      backgroundColor: tokens.colors.surface,
-      justifyContent: 'center',
-      alignItems: 'center',
-      borderWidth: 1,
-      borderColor: tokens.colors.outlineVariant,
-    },
-    actionButton: {
-      flex: 1,
-      height: 56,
-      borderRadius: tokens.borders.radius.lg,
-      overflow: 'hidden',
-    },
-    actionContent: {
-      flex: 1,
-      flexDirection: 'row',
-      alignItems: 'center',
-      justifyContent: 'flex-start',
-      backgroundColor: tokens.colors.primary,
-      gap: tokens.spacing.sm,
-      paddingHorizontal: tokens.spacing.lg,
-    },
-    actionText: {
-      color: tokens.colors.onPrimary,
-      fontWeight: '800',
-      fontSize: 18,
-    },
-  });
+  const themedStyles = useMemo(
+    () =>
+      StyleSheet.create({
+        container: {
+          flexDirection: 'row',
+          alignItems: 'center',
+          paddingVertical: tokens.spacing.md,
+          gap: tokens.spacing.md,
+        },
+        backButton: {
+          width: 56,
+          height: 56,
+          borderRadius: tokens.borders.radius.lg,
+          backgroundColor: tokens.colors.surface,
+          justifyContent: 'center',
+          alignItems: 'center',
+          borderWidth: 1,
+          borderColor: tokens.colors.outlineVariant,
+        },
+        actionButton: {
+          flex: 1,
+          height: 56,
+          borderRadius: tokens.borders.radius.lg,
+          overflow: 'hidden',
+        },
+        actionContent: {
+          flex: 1,
+          flexDirection: 'row',
+          alignItems: 'center',
+          justifyContent: 'flex-start',
+          backgroundColor: tokens.colors.primary,
+          gap: tokens.spacing.sm,
+          paddingHorizontal: tokens.spacing.lg,
+        },
+        actionText: {
+          color: tokens.colors.onPrimary,
+          fontWeight: '800',
+          fontSize: 18,
+        },
+      }),
+    [tokens],
+  );
 
   return (
-    <View style={[styles.container, style]}>
+    <View style={[themedStyles.container, style]}>
       <TouchableOpacity
-        style={styles.backButton}
+        style={themedStyles.backButton}
         onPress={onBack}
         activeOpacity={0.7}
         testID="action-footer-back"
@@ -72,14 +76,14 @@ export const ActionFooter: React.FC<ActionFooterProps> = ({
       </TouchableOpacity>
 
       <TouchableOpacity
-        style={styles.actionButton}
+        style={themedStyles.actionButton}
         onPress={onAction}
         activeOpacity={0.9}
         disabled={loading}
         testID="action-footer-action"
       >
-        <View style={styles.actionContent}>
-          <AtomicText style={styles.actionText}>{actionLabel}</AtomicText>
+        <View style={themedStyles.actionContent}>
+          <AtomicText style={themedStyles.actionText}>{actionLabel}</AtomicText>
           <AtomicIcon
             name={actionIcon}
             size="sm"

package/src/molecules/hero-section/HeroSection.tsx

@@ -1,5 +1,5 @@
 
-import React from 'react';
+import React, { useMemo } from 'react';
 import { View, StyleSheet, Text, Image } from 'react-native';
 import { useAppDesignTokens } from '../../theme';
 import type { HeroSectionProps } from './types';
@@ -12,62 +12,41 @@ export const HeroSection: React.FC<HeroSectionProps> = ({
   style,
 }) => {
   const tokens = useAppDesignTokens();
-  // Default height 50% of screen if not provided? No, components shouldn't guess screen height directly if possible, or use prop.
-  // We'll leave height control to the parent or style, but provide a sensible default if passed as prop.
 
-  const styles = StyleSheet.create({
-    container: {
-      width: '100%',
-      height: height || 400,
-      position: 'relative',
-      backgroundColor: tokens.colors.surface,
-      justifyContent: 'flex-start',
-      alignItems: 'flex-start',
-      overflow: 'hidden',
-    },
-    background: {
-      ...StyleSheet.absoluteFillObject,
-      backgroundColor: tokens.colors.surfaceVariant,
-    },
-    image: {
-      ...StyleSheet.absoluteFillObject,
-      width: '100%',
-      height: '100%',
-    },
-    iconWrapper: {
-      width: 120,
-      height: 120,
-      borderRadius: 60,
-      backgroundColor: tokens.colors.surfaceVariant,
-      justifyContent: 'flex-start',
-      alignItems: 'flex-start',
-      borderWidth: 2,
-      borderColor: tokens.colors.outlineVariant,
-      zIndex: 10,
-    },
-    emoji: {
-      fontSize: 64,
-      textAlign: 'left',
-      includeFontPadding: false,
-    },
-    fadeOverlay: {
-      position: 'absolute',
-      bottom: -1,
-      left: 0,
-      right: 0,
-      height: 100,
-      // We can't use LinearGradient here per rules.
-      // Use a solid color with opacity or a series of views if really needed, but user said NO GRADIENT.
-      // The original code used backgroundColor: "rgba(15, 5, 10, 0.7)".
-      // We'll use a semi-transparent overlay at the bottom.
-      backgroundColor: 'rgba(0,0,0,0.5)', // Generic dark overlay
-    },
-  });
+  const themedStyles = useMemo(
+    () => ({
+      container: {
+        width: '100%' as const,
+        height: height || 400,
+        position: 'relative' as const,
+        backgroundColor: tokens.colors.surface,
+        justifyContent: 'flex-start' as const,
+        alignItems: 'flex-start' as const,
+        overflow: 'hidden' as const,
+      },
+      background: {
+        ...StyleSheet.absoluteFillObject,
+        backgroundColor: tokens.colors.surfaceVariant,
+      },
+      iconWrapper: {
+        width: 120,
+        height: 120,
+        borderRadius: 60,
+        backgroundColor: tokens.colors.surfaceVariant,
+        justifyContent: 'flex-start' as const,
+        alignItems: 'flex-start' as const,
+        borderWidth: 2,
+        borderColor: tokens.colors.outlineVariant,
+        zIndex: 10,
+      },
+    }),
+    [tokens, height],
+  );
 
   const source = imageUrl ? { uri: imageUrl } : imageSource;
 
   return (
-    <View style={[styles.container, style]}>
+    <View style={[themedStyles.container, style]}>
       {source ? (
         <Image
           source={source}
@@ -75,12 +54,12 @@ export const HeroSection: React.FC<HeroSectionProps> = ({
           resizeMode="cover"
         />
       ) : (
-        <View style={styles.background} />
+        <View style={themedStyles.background} />
       )}
 
       {/* Show icon only if no image */}
       {!source && icon && (
-        <View style={styles.iconWrapper}>
+        <View style={themedStyles.iconWrapper}>
           <Text style={styles.emoji}>{icon}</Text>
         </View>
       )}
@@ -89,3 +68,24 @@ export const HeroSection: React.FC<HeroSectionProps> = ({
     </View>
   );
 };
+
+const styles = StyleSheet.create({
+  image: {
+    ...StyleSheet.absoluteFillObject,
+    width: '100%',
+    height: '100%',
+  },
+  emoji: {
+    fontSize: 64,
+    textAlign: 'left',
+    includeFontPadding: false,
+  },
+  fadeOverlay: {
+    position: 'absolute',
+    bottom: -1,
+    left: 0,
+    right: 0,
+    height: 100,
+    backgroundColor: 'rgba(0,0,0,0.5)',
+  },
+});

package/src/organisms/FormContainer.tsx

@@ -105,33 +105,37 @@ export const FormContainer: React.FC<FormContainerProps> = ({
   const formBottomPadding = bottomPosition;
   const formElementSpacing = tokens.spacing.lg;
 
-  // Create styles for form container
-  const styles = StyleSheet.create({
-    container: {
-      flex: 1,
-      backgroundColor: tokens.colors.backgroundPrimary,
-    },
-    surface: {
-      flex: 1,
-      backgroundColor: tokens.colors.surface,
-      borderWidth: showBorder ? 1 : 0,
-      borderColor: tokens.colors.border,
-      borderRadius: tokens.borders.radius.md,
-    },
-    scrollView: {
-      flex: 1,
-    },
-    contentContainer: {
-      flexGrow: 1,
-      padding: tokens.spacing.lg,
-      paddingTop: tokens.spacing.xl,
-      paddingBottom: formBottomPadding + insets.bottom,
-      maxWidth: formContentWidth,
-      alignSelf: 'center',
-      width: '100%',
-      gap: formElementSpacing,
-    },
-  });
+  // Create styles for form container (memoized to avoid re-creation on every render)
+  const styles = React.useMemo(
+    () =>
+      StyleSheet.create({
+        container: {
+          flex: 1,
+          backgroundColor: tokens.colors.backgroundPrimary,
+        },
+        surface: {
+          flex: 1,
+          backgroundColor: tokens.colors.surface,
+          borderWidth: showBorder ? 1 : 0,
+          borderColor: tokens.colors.border,
+          borderRadius: tokens.borders.radius.md,
+        },
+        scrollView: {
+          flex: 1,
+        },
+        contentContainer: {
+          flexGrow: 1,
+          padding: tokens.spacing.lg,
+          paddingTop: tokens.spacing.xl,
+          paddingBottom: formBottomPadding + insets.bottom,
+          maxWidth: formContentWidth,
+          alignSelf: 'center',
+          width: '100%',
+          gap: formElementSpacing,
+        },
+      }),
+    [tokens, showBorder, formBottomPadding, insets.bottom, formContentWidth, formElementSpacing],
+  );
 
   return (
     <View style={[styles.container, containerStyle]} testID={testID}>

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

@@ -48,16 +48,37 @@ export function useCachedValue<T>(
   useEffect(() => {
     let isMounted = true;
 
-    loadValue().then(() => {
-      if (!isMounted) {
-        setValue(undefined);
+    const doLoad = async () => {
+      const cache = cacheManager.getCache<T>(cacheName, configRef.current);
+      const cached = cache.get(key);
+
+      if (cached !== undefined) {
+        if (isMounted) setValue(cached);
+        return;
+      }
+
+      if (isMounted) {
+        setIsLoading(true);
+        setError(null);
       }
-    });
+
+      try {
+        const data = await fetcherRef.current!();
+        cache.set(key, data, configRef.current?.ttl);
+        if (isMounted) setValue(data);
+      } catch (err) {
+        if (isMounted) setError(err as Error);
+      } finally {
+        if (isMounted) setIsLoading(false);
+      }
+    };
+
+    doLoad();
 
     return () => {
       isMounted = false;
     };
-  }, [loadValue]);
+  }, [cacheName, key]);
 
   const invalidate = useCallback(() => {
     const cache = cacheManager.getCache<T>(cacheName);

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

@@ -138,10 +138,10 @@ export function usePersistentCache<T>(
     await loadFromStorage();
   }, [loadFromStorage]);
 
-  // Prevent infinite loops by only running when key or enabled changes
+  // Load from storage when key, enabled, or version changes
   useEffect(() => {
     loadFromStorage();
-  }, [key, enabled]);
+  }, [loadFromStorage]);
 
   return {
     data: state.data,

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

@@ -3,13 +3,14 @@
  * Helper for creating stores in components
  */
 
-import { useMemo } from 'react';
+import { useMemo, useRef } from 'react';
 import { createStore } from '../../domain/factories/StoreFactory';
 import type { StoreConfig } from '../../domain/types/Store';
 
 export function useStore<T extends object>(config: StoreConfig<T>) {
-  // Config objesini stabilize et ki sonsuz re-render olmasın
-  const stableConfig = useMemo(() => config, [config.name, JSON.stringify(config)]);
-  const store = useMemo(() => createStore(stableConfig), [stableConfig]);
+  // Config objesini stabilize et - sadece name değiştiğinde yeni store oluştur
+  const configRef = useRef(config);
+  configRef.current = config;
+  const store = useMemo(() => createStore(configRef.current), [config.name]);
   return store;
 }

package/src/tanstack/presentation/hooks/usePrefetch.ts

@@ -56,15 +56,15 @@ export function usePrefetchQuery<
   options: PrefetchOptions = {},
 ) {
   const queryClient = useQueryClient();
-  const prefetchingRef = new Set<TVariables>();
+  const prefetchingRef = useRef(new Set<TVariables>());
 
   const prefetch = useCallback(
     async (variables: TVariables) => {
-      if (prefetchingRef.has(variables)) {
+      if (prefetchingRef.current.has(variables)) {
         return;
       }
 
-      prefetchingRef.add(variables);
+      prefetchingRef.current.add(variables);
 
       try {
         await queryClient.prefetchQuery({
@@ -79,7 +79,7 @@ export function usePrefetchQuery<
           console.log('[TanStack Query] Prefetched:', [...queryKey, variables]);
         }
       } finally {
-        prefetchingRef.delete(variables);
+        prefetchingRef.current.delete(variables);
       }
     },
     [queryClient, queryKey, queryFn, options.staleTime, options.gcTime],

package/src/timezone/presentation/hooks/useTimezone.ts

@@ -1,4 +1,4 @@
-import { useMemo, useCallback } from 'react';
+import { useMemo } from 'react';
 import { timezoneService } from '../../infrastructure/services/TimezoneService';
 import type { TimezoneInfo, TimezoneCalendarDay } from '../../domain/entities/Timezone';
 
@@ -51,101 +51,57 @@ export const useTimezone = (options?: UseTimezoneOptions): UseTimezoneReturn =>
   const locale = options?.locale ?? 'en';
   const timezoneInfo = useMemo(() => timezoneService.getTimezoneInfo(), []);
 
-  const formatDate = useCallback((date: Date, options?: Intl.DateTimeFormatOptions) =>
-    timezoneService.formatDate(date, locale, options), [locale]);
-
-  const formatTime = useCallback((date: Date, options?: Intl.DateTimeFormatOptions) =>
-    timezoneService.formatTime(date, locale, options), [locale]);
-
-  const formatDateTime = useCallback((date: Date, options?: Intl.DateTimeFormatOptions) =>
-    timezoneService.formatDateTime(date, locale, options), [locale]);
-
-  const formatRelativeTime = useCallback((date: Date) =>
-    timezoneService.formatRelativeTime(date, locale), [locale]);
-
-  const fromNow = useCallback((date: Date) =>
-    timezoneService.fromNow(date, locale), [locale]);
-
-  const getCalendarDays = useCallback((year: number, month: number) =>
-    timezoneService.getCalendarDays(year, month), []);
-
-  const isToday = useCallback((date: Date) => timezoneService.isToday(date), []);
-  const isSameDay = useCallback((date1: Date, date2: Date) => timezoneService.isSameDay(date1, date2), []);
-  const addDays = useCallback((date: Date, days: number) => timezoneService.addDays(date, days), []);
-  const startOfDay = useCallback((date: Date) => timezoneService.startOfDay(date), []);
-  const endOfDay = useCallback((date: Date) => timezoneService.endOfDay(date), []);
-  const formatDateToString = useCallback((date: Date) => timezoneService.formatDateToString(date), []);
-  const getCurrentISOString = useCallback(() => timezoneService.getCurrentISOString(), []);
-  const formatToISOString = useCallback((date: Date) => timezoneService.formatToISOString(date), []);
-  const getTimezones = useCallback(() => timezoneService.getTimezones(), []);
-  const isValid = useCallback((date: Date) => timezoneService.isValid(date), []);
-  const getAge = useCallback((birthDate: Date) => timezoneService.getAge(birthDate), []);
-  const isBetween = useCallback((date: Date, start: Date, end: Date) =>
-    timezoneService.isBetween(date, start, end), []);
-  const min = useCallback((dates: Date[]) => timezoneService.min(dates), []);
-  const max = useCallback((dates: Date[]) => timezoneService.max(dates), []);
-  const getWeek = useCallback((date: Date) => timezoneService.getWeek(date), []);
-  const getQuarter = useCallback((date: Date) => timezoneService.getQuarter(date), []);
-  const getTimezoneOffsetFor = useCallback((timezone: string, date?: Date) =>
-    timezoneService.getTimezoneOffsetFor(timezone, date), []);
-  const convertTimezone = useCallback((date: Date, fromTimezone: string, toTimezone: string) =>
-    timezoneService.convertTimezone(date, fromTimezone, toTimezone), []);
-  const formatDuration = useCallback((milliseconds: number) => timezoneService.formatDuration(milliseconds), []);
-  const isWeekend = useCallback((date: Date) => timezoneService.isWeekend(date), []);
-  const addBusinessDays = useCallback((date: Date, days: number) =>
-    timezoneService.addBusinessDays(date, days), []);
-  const isFirstDayOfMonth = useCallback((date: Date) => timezoneService.isFirstDayOfMonth(date), []);
-  const isLastDayOfMonth = useCallback((date: Date) => timezoneService.isLastDayOfMonth(date), []);
-  const getDaysInMonth = useCallback((date: Date) => timezoneService.getDaysInMonth(date), []);
-  const getDateRange = useCallback((start: Date, end: Date) => timezoneService.getDateRange(start, end), []);
-  const areRangesOverlapping = useCallback((start1: Date, end1: Date, start2: Date, end2: Date) =>
-    timezoneService.areRangesOverlapping(start1, end1, start2, end2), []);
-  const clampDate = useCallback((date: Date, min: Date, max: Date) =>
-    timezoneService.clampDate(date, min, max), []);
-  const areSameHour = useCallback((date1: Date, date2: Date) =>
-    timezoneService.areSameHour(date1, date2), []);
-  const areSameMinute = useCallback((date1: Date, date2: Date) =>
-    timezoneService.areSameMinute(date1, date2), []);
-  const getMiddleOfDay = useCallback((date: Date) => timezoneService.getMiddleOfDay(date), []);
-
-  return {
-    timezone: timezoneInfo.timezone || '',
-    timezoneInfo,
-    formatDate,
-    formatTime,
-    getCalendarDays,
-    isToday,
-    isSameDay,
-    addDays,
-    startOfDay,
-    endOfDay,
-    formatDateToString,
-    getCurrentISOString,
-    formatToISOString,
-    formatRelativeTime,
-    formatDateTime,
-    getTimezones,
-    isValid,
-    getAge,
-    isBetween,
-    min,
-    max,
-    getWeek,
-    getQuarter,
-    getTimezoneOffsetFor,
-    convertTimezone,
-    formatDuration,
-    isWeekend,
-    addBusinessDays,
-    isFirstDayOfMonth,
-    isLastDayOfMonth,
-    getDaysInMonth,
-    getDateRange,
-    areRangesOverlapping,
-    clampDate,
-    areSameHour,
-    areSameMinute,
-    getMiddleOfDay,
-    fromNow,
-  };
+  // timezoneService is a singleton with pure functions - no need for individual useCallbacks.
+  // Only locale-dependent functions need to be memoized when locale changes.
+  return useMemo(
+    () => ({
+      timezone: timezoneInfo.timezone || '',
+      timezoneInfo,
+      // Locale-dependent formatters
+      formatDate: (date: Date, opts?: Intl.DateTimeFormatOptions) =>
+        timezoneService.formatDate(date, locale, opts),
+      formatTime: (date: Date, opts?: Intl.DateTimeFormatOptions) =>
+        timezoneService.formatTime(date, locale, opts),
+      formatDateTime: (date: Date, opts?: Intl.DateTimeFormatOptions) =>
+        timezoneService.formatDateTime(date, locale, opts),
+      formatRelativeTime: (date: Date) =>
+        timezoneService.formatRelativeTime(date, locale),
+      fromNow: (date: Date) =>
+        timezoneService.fromNow(date, locale),
+      // Locale-independent delegates
+      getCalendarDays: (year: number, month: number) => timezoneService.getCalendarDays(year, month),
+      isToday: (date: Date) => timezoneService.isToday(date),
+      isSameDay: (date1: Date, date2: Date) => timezoneService.isSameDay(date1, date2),
+      addDays: (date: Date, days: number) => timezoneService.addDays(date, days),
+      startOfDay: (date: Date) => timezoneService.startOfDay(date),
+      endOfDay: (date: Date) => timezoneService.endOfDay(date),
+      formatDateToString: (date: Date) => timezoneService.formatDateToString(date),
+      getCurrentISOString: () => timezoneService.getCurrentISOString(),
+      formatToISOString: (date: Date) => timezoneService.formatToISOString(date),
+      getTimezones: () => timezoneService.getTimezones(),
+      isValid: (date: Date) => timezoneService.isValid(date),
+      getAge: (birthDate: Date) => timezoneService.getAge(birthDate),
+      isBetween: (date: Date, start: Date, end: Date) => timezoneService.isBetween(date, start, end),
+      min: (dates: Date[]) => timezoneService.min(dates),
+      max: (dates: Date[]) => timezoneService.max(dates),
+      getWeek: (date: Date) => timezoneService.getWeek(date),
+      getQuarter: (date: Date) => timezoneService.getQuarter(date),
+      getTimezoneOffsetFor: (tz: string, date?: Date) => timezoneService.getTimezoneOffsetFor(tz, date),
+      convertTimezone: (date: Date, from: string, to: string) => timezoneService.convertTimezone(date, from, to),
+      formatDuration: (ms: number) => timezoneService.formatDuration(ms),
+      isWeekend: (date: Date) => timezoneService.isWeekend(date),
+      addBusinessDays: (date: Date, days: number) => timezoneService.addBusinessDays(date, days),
+      isFirstDayOfMonth: (date: Date) => timezoneService.isFirstDayOfMonth(date),
+      isLastDayOfMonth: (date: Date) => timezoneService.isLastDayOfMonth(date),
+      getDaysInMonth: (date: Date) => timezoneService.getDaysInMonth(date),
+      getDateRange: (start: Date, end: Date) => timezoneService.getDateRange(start, end),
+      areRangesOverlapping: (s1: Date, e1: Date, s2: Date, e2: Date) =>
+        timezoneService.areRangesOverlapping(s1, e1, s2, e2),
+      clampDate: (date: Date, mn: Date, mx: Date) => timezoneService.clampDate(date, mn, mx),
+      areSameHour: (d1: Date, d2: Date) => timezoneService.areSameHour(d1, d2),
+      areSameMinute: (d1: Date, d2: Date) => timezoneService.areSameMinute(d1, d2),
+      getMiddleOfDay: (date: Date) => timezoneService.getMiddleOfDay(date),
+    }),
+    [locale, timezoneInfo],
+  );
 };