@umituz/react-native-design-system 4.25.60 → 4.25.62

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@umituz/react-native-design-system",
-  "version": "4.25.60",
+  "version": "4.25.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/AtomicPicker.tsx

@@ -64,7 +64,7 @@ export const AtomicPicker: React.FC<AtomicPickerProps> = ({
         onPress={() => !disabled && pickerState.openModal()}
         disabled={disabled}
         accessibilityRole="button"
-        accessibilityLabel={label || placeholder}
+        accessibilityLabel={label || placeholder || 'Select option'}
         accessibilityState={{ disabled }}
         testID={testID}
         style={StyleSheet.flatten([

package/src/atoms/AtomicTextArea.tsx

@@ -120,7 +120,7 @@ export const AtomicTextArea = forwardRef<React.ElementRef<typeof TextInput>, Ato
           {maxLength && value !== undefined && (
             <AtomicText
               type="labelSmall"
-              color="secondary"
+              color={hasError ? 'error' : 'secondary'}
               style={styles.characterCount}
             >
               {value.length}/{maxLength}

package/src/atoms/button/AtomicButton.tsx

@@ -94,7 +94,7 @@ export const AtomicButton: React.FC<AtomicButtonProps> = React.memo(({
           color={iconColor as string}
           style={iconPosition === 'right' ? buttonStyles.iconRight : buttonStyles.iconLeft}
         />
-      ) : (showIcon && icon) ? (
+      ) : showIcon ? (
         <AtomicIcon
           name={icon}
           customSize={config.iconSize}

package/src/atoms/card/AtomicCard.tsx

@@ -39,7 +39,7 @@ interface CardContentProps {
   children?: React.ReactNode;
 }
 
-const CardContent: React.FC<CardContentProps> = ({
+const CardContent: React.FC<CardContentProps> = React.memo(({
   badge,
   image,
   imageAspectRatio,
@@ -137,7 +137,7 @@ const CardContent: React.FC<CardContentProps> = ({
       </View>
     </>
   );
-};
+});
 
 const AtomicCardComponent: React.FC<AtomicCardProps> = ({
   children,

package/src/atoms/datepicker/components/DatePickerModal.tsx

@@ -113,7 +113,7 @@ export const DatePickerModal: React.FC<DatePickerModalProps> = ({
       transparent
       animationType="none"
       onRequestClose={onClose}
-      testID={`${testID}-modal`}
+      testID={testID ? `${testID}-modal` : undefined}
       accessibilityViewIsModal={true}
     >
       <View style={modalStyles.overlay}>
@@ -131,7 +131,7 @@ export const DatePickerModal: React.FC<DatePickerModalProps> = ({
             <TouchableOpacity
               onPress={onClose}
               style={modalStyles.doneButton}
-              testID={`${testID}-done`}
+              testID={testID ? `${testID}-done` : undefined}
             >
               <AtomicText style={modalStyles.doneButtonText}>{doneButtonText}</AtomicText>
             </TouchableOpacity>
@@ -146,7 +146,7 @@ export const DatePickerModal: React.FC<DatePickerModalProps> = ({
             maximumDate={maximumDate}
             display="spinner"
             style={{ alignSelf: 'center' }}
-            testID={`${testID}-picker`}
+            testID={testID ? `${testID}-picker` : undefined}
           />
         </View>
       </View>

package/src/atoms/input/components/InputIcon.tsx

@@ -23,19 +23,27 @@ export const InputIcon: React.FC<InputIconProps> = ({
 
   if (onPress) {
     return (
-      <Pressable onPress={onPress} style={style} testID={testID} hitSlop={{ top: 10, bottom: 10, left: 10, right: 10 }}>
+      <Pressable
+        onPress={onPress}
+        style={style}
+        testID={testID}
+        hitSlop={{ top: 10, bottom: 10, left: 10, right: 10 }}
+        accessibilityRole="button"
+        accessibilityLabel={name}
+      >
         <AtomicIcon name={name} customSize={size} customColor={color} />
       </Pressable>
     );
   }
 
   return (
-    <AtomicIcon 
-      name={name} 
-      customSize={size} 
-      customColor={color} 
+    <AtomicIcon
+      name={name}
+      customSize={size}
+      customColor={color}
       style={style}
       testID={testID}
+      accessibilityRole="image"
     />
   );
 };

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

@@ -1,4 +1,4 @@
-import { useState, useCallback, useEffect, useMemo } from 'react';
+import { useState, useCallback, useEffect } from 'react';
 
 interface UseInputStateProps {
   value?: string;
@@ -45,7 +45,7 @@ export const useInputState = ({
   const characterCount = localValue.length;
   const isAtMaxLength = maxLength ? characterCount >= maxLength : false;
 
-  return useMemo(() => ({
+  return {
     localValue,
     isFocused,
     isPasswordVisible,
@@ -54,5 +54,5 @@ export const useInputState = ({
     setIsFocused,
     handleTextChange,
     togglePasswordVisibility,
-  }), [localValue, isFocused, isPasswordVisible, characterCount, isAtMaxLength, setIsFocused, handleTextChange, togglePasswordVisibility]);
+  };
 };

package/src/atoms/picker/components/PickerChips.tsx

@@ -46,7 +46,9 @@ export const PickerChips: React.FC<PickerChipsProps> = React.memo(({
               e.stopPropagation();
               onRemoveChip(opt.value);
             }}
-            hitSlop={{ top: 4, bottom: 4, left: 4, right: 4 }}
+            hitSlop={{ top: 8, bottom: 8, left: 8, right: 8 }}
+            accessibilityRole="button"
+            accessibilityLabel={`Remove ${opt.label}`}
           >
             <AtomicIcon name={closeIcon} size="sm" color="primary" />
           </TouchableOpacity>

package/src/carousel/useCarouselScroll.ts

@@ -1,4 +1,4 @@
-import { useState, useCallback } from "react";
+import { useState, useCallback, useRef } from "react";
 import { NativeScrollEvent, NativeSyntheticEvent } from "react-native";
 import { calculateIndexFromScroll } from "./carouselCalculations";
 
@@ -12,18 +12,20 @@ export const useCarouselScroll = ({
   onIndexChange,
 }: UseCarouselScrollOptions) => {
   const [currentIndex, setCurrentIndex] = useState(0);
+  const currentIndexRef = useRef(0);
 
   const handleScroll = useCallback(
     (event: NativeSyntheticEvent<NativeScrollEvent>) => {
       const scrollPosition = event.nativeEvent.contentOffset.x;
       const newIndex = calculateIndexFromScroll(scrollPosition, itemWidth);
 
-      if (newIndex !== currentIndex) {
+      if (newIndex !== currentIndexRef.current) {
+        currentIndexRef.current = newIndex;
         setCurrentIndex(newIndex);
         onIndexChange?.(newIndex);
       }
     },
-    [itemWidth, currentIndex, onIndexChange],
+    [itemWidth, onIndexChange],
   );
 
   return {

package/src/image/presentation/components/ImageGallery.tsx

@@ -76,13 +76,14 @@ export const ImageGallery: React.FC<ImageGalleryProps> = ({
   }, [images, onImageChange]);
 
   const handleScroll = useCallback((event: NativeSyntheticEvent<NativeScrollEvent>) => {
-    const nextIndex = Math.round(event.nativeEvent.contentOffset.x / SCREEN_WIDTH);
+    const rawIndex = Math.round(event.nativeEvent.contentOffset.x / SCREEN_WIDTH);
+    const nextIndex = Math.max(0, Math.min(rawIndex, images.length - 1));
     if (nextIndex !== currentIndexRef.current) {
       currentIndexRef.current = nextIndex;
       onIndexChange?.(nextIndex);
       forceRender();
     }
-  }, [onIndexChange, SCREEN_WIDTH]);
+  }, [onIndexChange, SCREEN_WIDTH, images.length]);
 
   const renderItem = useCallback(({ item }: { item: ImageViewerItem }) => (
     <View style={styles.imageWrapper}>
@@ -92,12 +93,14 @@ export const ImageGallery: React.FC<ImageGalleryProps> = ({
           style={styles.fullImage}
           contentFit="contain"
           cachePolicy="memory-disk"
+          onError={() => { if (__DEV__) console.warn('[ImageGallery] Failed to load image:', item.uri); }}
         />
       ) : (
         <RNImage
           source={{ uri: item.uri }}
           style={styles.fullImage}
           resizeMode="contain"
+          onError={() => { if (__DEV__) console.warn('[ImageGallery] Failed to load image:', item.uri); }}
         />
       )}
     </View>

package/src/layouts/ScreenLayout/ScreenLayout.tsx

@@ -67,16 +67,22 @@ export const ScreenLayout: React.FC<ScreenLayoutProps> = (props: ScreenLayoutPro
       }
     ]}>
       {header}
-      <ScrollView
-        style={styles.scrollView}
-        contentContainerStyle={[styles.scrollContent, contentContainerStyle]}
-        showsVerticalScrollIndicator={!hideScrollIndicator}
-        keyboardShouldPersistTaps="handled"
-        refreshControl={refreshControl}
-        nestedScrollEnabled
-      >
-        {children}
-      </ScrollView>
+      {scrollable ? (
+        <ScrollView
+          style={styles.scrollView}
+          contentContainerStyle={[styles.scrollContent, contentContainerStyle]}
+          showsVerticalScrollIndicator={!hideScrollIndicator}
+          keyboardShouldPersistTaps="handled"
+          refreshControl={refreshControl}
+          nestedScrollEnabled
+        >
+          {children}
+        </ScrollView>
+      ) : (
+        <View style={[styles.scrollView, styles.scrollContent, contentContainerStyle]}>
+          {children}
+        </View>
+      )}
       {footer && (
         <View style={{ paddingBottom }}>
           {footer}

package/src/molecules/FormField.tsx

@@ -7,7 +7,7 @@
  * Composition: AtomicText + AtomicInput
  */
 
-import React from 'react';
+import React, { useMemo } from 'react';
 import { View, ViewStyle } from 'react-native';
 import { useAppDesignTokens } from '../theme';
 import { AtomicText, AtomicInput, type AtomicInputProps } from '../atoms';
@@ -96,7 +96,7 @@ export const FormField: React.FC<FormFieldProps> = ({
 }) => {
   const tokens = useAppDesignTokens();
   const inputState = error ? 'error' : 'default';
-  const styles = getStyles(tokens);
+  const styles = useMemo(() => getStyles(tokens), [tokens]);
 
   return (
     <View style={[styles.container, containerStyle || style]}>

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

@@ -67,6 +67,8 @@ export const ActionFooter: React.FC<ActionFooterProps> = ({
         onPress={onBack}
         activeOpacity={0.7}
         testID="action-footer-back"
+        accessibilityRole="button"
+        accessibilityLabel="Go back"
       >
         <AtomicIcon
           name={backIcon}
@@ -81,6 +83,9 @@ export const ActionFooter: React.FC<ActionFooterProps> = ({
         activeOpacity={0.9}
         disabled={loading}
         testID="action-footer-action"
+        accessibilityRole="button"
+        accessibilityLabel={actionLabel}
+        accessibilityState={{ disabled: loading, busy: loading }}
       >
         <View style={themedStyles.actionContent}>
           <AtomicText style={themedStyles.actionText}>{actionLabel}</AtomicText>

package/src/molecules/alerts/AlertContainer.tsx

@@ -2,7 +2,7 @@
  * AlertContainer Component
  */
 
-import React from 'react';
+import React, { useMemo } from 'react';
 import { View, StyleSheet } from 'react-native';
 import { useSafeAreaInsets } from '../../safe-area';
 import { useAppDesignTokens } from '../../theme';
@@ -12,14 +12,14 @@ import { AlertBanner } from './AlertBanner';
 import { AlertModal } from './AlertModal';
 import { Alert, AlertMode } from './AlertTypes';
 
-export const AlertContainer: React.FC = () => {
+const AlertContainerComponent: React.FC = () => {
     const alerts = useAlertStore((state: { alerts: Alert[] }) => state.alerts);
     const insets = useSafeAreaInsets();
     const tokens = useAppDesignTokens();
 
-    const toasts = alerts.filter((a: Alert) => a.mode === AlertMode.TOAST);
-    const banners = alerts.filter((a: Alert) => a.mode === AlertMode.BANNER);
-    const modals = alerts.filter((a: Alert) => a.mode === AlertMode.MODAL);
+    const toasts = useMemo(() => alerts.filter((a: Alert) => a.mode === AlertMode.TOAST), [alerts]);
+    const banners = useMemo(() => alerts.filter((a: Alert) => a.mode === AlertMode.BANNER), [alerts]);
+    const modals = useMemo(() => alerts.filter((a: Alert) => a.mode === AlertMode.MODAL), [alerts]);
 
     return (
         <View style={styles.container} pointerEvents="box-none">
@@ -53,6 +53,9 @@ export const AlertContainer: React.FC = () => {
     );
 };
 
+export const AlertContainer = React.memo(AlertContainerComponent);
+AlertContainerComponent.displayName = 'AlertContainer';
+
 const styles = StyleSheet.create({
     container: {
         ...StyleSheet.absoluteFillObject,

package/src/molecules/alerts/AlertToast.tsx

@@ -86,11 +86,17 @@ export function AlertToast({ alert }: AlertToastProps) {
               <Pressable
                 key={action.id}
                 onPress={async () => {
-                  await action.onPress();
+                  try {
+                    await action.onPress();
+                  } catch (e) {
+                    if (__DEV__) console.error('[AlertToast] action.onPress failed', e);
+                  }
                   if (action.closeOnPress ?? true) {
                     handleDismiss();
                   }
                 }}
+                accessibilityRole="button"
+                accessibilityLabel={action.label}
                 style={[
                   styles.actionButton,
                   {

package/src/molecules/alerts/hooks/useAlertAutoDismiss.ts

@@ -21,5 +21,5 @@ export function useAlertAutoDismiss(
 
     const timer = setTimeout(onDismiss, duration);
     return () => clearTimeout(timer);
-  }, [alert.duration, alert.dismissible, onDismiss]);
+  }, [alert.id, alert.duration, alert.dismissible, onDismiss]);
 }

package/src/molecules/alerts/hooks/useAlertDismissHandler.ts

@@ -15,7 +15,7 @@ export function useAlertDismissHandler(alert: Alert) {
   const handleDismiss = useCallback(() => {
     dismissAlert(alert.id);
     alert.onDismiss?.();
-  }, [alert, dismissAlert]);
+  }, [alert.id, alert.onDismiss, dismissAlert]);
 
   return handleDismiss;
 }

package/src/molecules/bottom-sheet/components/BottomSheet.tsx

@@ -90,7 +90,7 @@ export const BottomSheet = forwardRef<BottomSheetRef, BottomSheetProps>((props,
     content: {
       flex: 1,
     }
-  }), [sheetHeight, backgroundColor, tokens.colors, borderRadius, insets.bottom]);
+  }), [sheetHeight, backgroundColor, tokens.colors.modalOverlay, tokens.colors.surface, tokens.colors.border, borderRadius, insets.bottom]);
 
   return (
     <Modal
@@ -101,9 +101,9 @@ export const BottomSheet = forwardRef<BottomSheetRef, BottomSheetProps>((props,
       statusBarTranslucent
       accessibilityViewIsModal={true}
     >
-      <Pressable style={styles.overlay} onPress={dismiss}>
+      <Pressable style={styles.overlay} onPress={dismiss} accessibilityLabel="Close" accessibilityRole="button">
         <View style={styles.container}>
-          <Pressable onPress={(e) => e.stopPropagation()} style={styles.content}>
+          <Pressable onPress={(e) => e.stopPropagation()} style={styles.content} accessibilityRole="none">
             <View style={styles.handle} />
             {children}
           </Pressable>

package/src/molecules/calendar/infrastructure/stores/useCalendarEvents.ts

@@ -70,8 +70,8 @@ export const useCalendarEvents = create<CalendarEventsStore>()((set, get) => ({
       if (validEvents.length > 0) {
         const hydratedEvents = validEvents.map((event) => ({
           ...event,
-          createdAt: new Date(event.createdAt),
-          updatedAt: new Date(event.updatedAt),
+          createdAt: event.createdAt ? new Date(event.createdAt) : new Date(),
+          updatedAt: event.updatedAt ? new Date(event.updatedAt) : new Date(),
         }));
         set({ events: hydratedEvents, isLoading: false });
       } else {

package/src/molecules/countdown/components/CountdownHeader.tsx

@@ -53,6 +53,8 @@ export const CountdownHeader: React.FC<CountdownHeaderProps> = ({
                         },
                     ]}
                     onPress={onToggle}
+                    accessibilityRole="button"
+                    accessibilityLabel="Toggle view"
                 >
                     <AtomicIcon
                         name={swapIcon}

package/src/molecules/info-grid/InfoGrid.tsx

@@ -1,5 +1,5 @@
 
-import React from 'react';
+import React, { useMemo } from 'react';
 import { View, StyleSheet } from 'react-native';
 import { AtomicText } from '../../atoms/AtomicText';
 import { AtomicIcon } from '../../atoms';
@@ -16,7 +16,7 @@ export const InfoGrid: React.FC<InfoGridProps> = ({
 }) => {
   const tokens = useAppDesignTokens();
 
-  const styles = StyleSheet.create({
+  const styles = useMemo(() => StyleSheet.create({
     container: {
       gap: tokens.spacing.md,
     },
@@ -68,7 +68,7 @@ export const InfoGrid: React.FC<InfoGridProps> = ({
       color: tokens.colors.textPrimary,
       fontWeight: '500',
     },
-  });
+  }), [tokens, columns]);
 
   return (
     <View style={[styles.container, style]}>

package/src/molecules/navigation/components/NavigationHeader.tsx

@@ -50,7 +50,12 @@ export const NavigationHeader: React.FC<NavigationHeaderProps> = ({
   return (
     <View style={styles.container}>
       {onBackPress && (
-        <TouchableOpacity onPress={onBackPress} style={styles.backButton}>
+        <TouchableOpacity
+          onPress={onBackPress}
+          style={styles.backButton}
+          accessibilityRole="button"
+          accessibilityLabel="Go back"
+        >
           <AtomicIcon
             name={arrowLeftIcon}
             size="md"

package/src/offline/infrastructure/events/NetworkEvents.ts

@@ -32,15 +32,21 @@ class NetworkEventEmitter implements NetworkEvents {
   }
 
   emit(event: 'online' | 'offline' | 'change', state: NetworkState): void {
-    this.listeners.get(event)?.forEach((listener) => {
+    const listeners = this.listeners.get(event);
+    if (!listeners) return;
+
+    const failedListeners: NetworkEventListener[] = [];
+    listeners.forEach((listener) => {
       try {
         listener(state);
       } catch (_error) {
+        failedListeners.push(listener);
         if (__DEV__) {
-          console.error('[DesignSystem] PersistentDeviceIdService: Initialization failed', _error);
+          console.error('[DesignSystem] NetworkEventEmitter: listener threw an error', _error);
         }
       }
     });
+    failedListeners.forEach((listener) => listeners.delete(listener));
   }
 
   removeAllListeners(): void {

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

@@ -5,7 +5,7 @@
  * Combines React state with automatic storage persistence
  */
 
-import { useState, useCallback, useEffect } from 'react';
+import { useState, useCallback } from 'react';
 import { storageRepository } from '../../infrastructure/repositories/AsyncStorageRepository';
 import { unwrap } from '../../domain/entities/StorageResult';
 import type { StorageKey } from '../../domain/value-objects/StorageKey';
@@ -42,13 +42,6 @@ export const useStorageState = <T>(
     }
   );
 
-  // Sync state with loaded data
-  useEffect(() => {
-    if (data !== undefined && data !== null) {
-      setState(data);
-    }
-  }, [data]);
-
   // Update state and persist to storage
   const updateState = useCallback(
     async (value: T) => {