@umituz/react-native-design-system 4.23.68 → 4.23.70

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@umituz/react-native-design-system",
-  "version": "4.23.68",
+  "version": "4.23.70",
   "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

@@ -7,7 +7,7 @@
  * Purpose: Empty state indication across all apps
  */
 
-import React from 'react';
+import React, { useState, useEffect, useCallback, useMemo, useRef, useContext } from 'react';
 import { View, StyleSheet, TouchableOpacity, ViewStyle } from 'react-native';
 import { AtomicIcon } from './icon';
 import { AtomicText } from './AtomicText';
@@ -39,7 +39,7 @@ export const EmptyState: React.FC<EmptyStateProps> = ({
   const tokens = useAppDesignTokens();
   const displayDescription = description || subtitle;
 
-  const themedStyles = React.useMemo(
+  const themedStyles = useMemo(
     () =>
       StyleSheet.create({
         container: {

package/src/atoms/icon/AtomicIcon.tsx

@@ -22,7 +22,7 @@
 
 import React from 'react';
 import { StyleProp, ViewStyle } from 'react-native';
-import { useAppDesignTokens } from '../../theme';
+import { useAppDesignTokens } from '../../theme/hooks/useAppDesignTokens';
 import { useIconRenderer } from './iconStore';
 import {
   type IconSize as BaseIconSize,

package/src/atoms/icon/utils/iconUtils.ts

@@ -4,7 +4,7 @@
  */
 
 import type { IconColor } from '../AtomicIcon.types';
-import type { DesignTokens } from '../../../theme';
+import type { DesignTokens } from '../../../theme/types/ThemeTypes';
 
 /**
  * Maps semantic color names to actual color values from tokens

package/src/exception/infrastructure/services/ExceptionService.ts

@@ -21,17 +21,22 @@ import { ExceptionLogger } from './ExceptionLogger';
 import { useExceptionStore } from '../storage/ExceptionStore';
 
 export class ExceptionService {
-  private logger: ExceptionLogger;
-  private reporter: ExceptionReporter;
+  private logger: ExceptionLogger | null = null;
+  private reporter: ExceptionReporter | null = null;
+  private reporterConfig: ExceptionReporter['config'];
 
   constructor(reporterConfig?: ExceptionReporter['config']) {
-    this.logger = new ExceptionLogger();
-    this.reporter = new ExceptionReporter(
-      reporterConfig || {
-        enabled: false,
-        environment: 'development'
-      }
-    );
+    this.reporterConfig = reporterConfig || {
+      enabled: false,
+      environment: 'development'
+    };
+  }
+
+  private ensureInitialized() {
+    if (!this.logger) {
+      this.logger = new ExceptionLogger();
+      this.reporter = new ExceptionReporter(this.reporterConfig);
+    }
   }
 
   /**
@@ -43,17 +48,19 @@ export class ExceptionService {
     category: ExceptionCategory = 'unknown',
     context: ExceptionContext = {},
   ): Promise<void> {
+    this.ensureInitialized();
+
     const exception = ExceptionHandler.createException(error, severity, category, context);
 
     // Add to store
     useExceptionStore.getState().addException(exception);
 
     // Log locally
-    await this.logger.logException(exception);
+    await this.logger!.logException(exception);
 
     // Report to external service if needed
     if (ExceptionHandler.shouldReportException(exception)) {
-      await this.reporter.reportException(exception);
+      await this.reporter!.reportException(exception);
     }
 
     // Mark as handled
@@ -92,35 +99,40 @@ export class ExceptionService {
    * Get stored exceptions
    */
   async getStoredExceptions(): Promise<ExceptionEntity[]> {
-    return this.logger.getStoredExceptions();
+    this.ensureInitialized();
+    return this.logger!.getStoredExceptions();
   }
 
   /**
    * Get exception statistics
    */
   async getExceptionStats() {
-    return this.logger.getExceptionStats();
+    this.ensureInitialized();
+    return this.logger!.getExceptionStats();
   }
 
   /**
    * Clear stored exceptions
    */
   async clearStoredExceptions(): Promise<void> {
-    await this.logger.clearStoredExceptions();
+    this.ensureInitialized();
+    await this.logger!.clearStoredExceptions();
   }
 
   /**
    * Update reporter configuration
    */
   updateReporterConfig(config: Partial<ExceptionReporter['config']>): void {
-    this.reporter.updateConfig(config);
+    this.ensureInitialized();
+    this.reporter!.updateConfig(config);
   }
 
   /**
    * Set max stored exceptions
    */
   setMaxStoredExceptions(limit: number): void {
-    this.logger.setMaxStoredExceptions(limit);
+    this.ensureInitialized();
+    this.logger!.setMaxStoredExceptions(limit);
   }
 
   /**
@@ -145,7 +157,7 @@ export class ExceptionService {
   }
 }
 
-// Export default instance
+// Export default instance - lazy initialization
 export const exceptionService = new ExceptionService();
 
 

package/src/exception/presentation/components/ExceptionEmptyState.tsx

@@ -29,7 +29,7 @@ export const ExceptionEmptyState: React.FC<ExceptionEmptyStateProps> = ({
 }) => {
   const tokens = useAppDesignTokens();
 
-  const styles = React.useMemo(
+  const styles = useMemo(
     () =>
       StyleSheet.create({
         actionButton: {

package/src/exception/presentation/components/ExceptionErrorState.tsx

@@ -44,7 +44,7 @@ export const ExceptionErrorState: React.FC<ExceptionErrorStateProps> = ({
   const refreshIcon = useIconName('refresh');
   const displayIcon = icon || alertCircleIcon;
 
-  const styles = React.useMemo(
+  const styles = useMemo(
     () =>
       StyleSheet.create({
         actionButton: {

package/src/image/infrastructure/services/ImageBatchService.ts

@@ -5,6 +5,7 @@
  */
 
 import type { ImageManipulationResult } from '../../domain/entities/ImageTypes';
+import type { BatchOperation } from '../types/BatchTypes';
 import { BatchProcessor } from '../utils/BatchProcessor';
 
 export interface BatchProcessingOptions {
@@ -27,13 +28,6 @@ export interface BatchProcessingResult {
   failureCount: number;
 }
 
-export interface BatchOperation {
-  uri: string;
-  type: 'resize' | 'crop' | 'filter' | 'compress' | 'convert';
-  params: Record<string, unknown>;
-  options?: Record<string, unknown>;
-}
-
 export class ImageBatchService {
   static async processBatch(
     operations: BatchOperation[],

package/src/image/infrastructure/types/BatchTypes.ts

@@ -0,0 +1,11 @@
+/**
+ * Batch Operation Types
+ * Shared types for batch processing operations
+ */
+
+export interface BatchOperation {
+  uri: string;
+  type: 'resize' | 'crop' | 'filter' | 'compress' | 'convert';
+  params: Record<string, unknown>;
+  options?: Record<string, unknown>;
+}

package/src/image/infrastructure/utils/BatchProcessor.ts

@@ -5,7 +5,7 @@
  */
 
 import type { ImageManipulationResult, ImageCropArea, SaveFormat } from '../../domain/entities/ImageTypes';
-import type { BatchOperation } from '../services/ImageBatchService';
+import type { BatchOperation } from '../types/BatchTypes';
 import { ImageTransformService } from '../services/ImageTransformService';
 import { ImageConversionService } from '../services/ImageConversionService';
 import { ImageValidator } from './ImageValidator';

package/src/image/infrastructure/utils/ImageErrorHandler.ts

@@ -9,6 +9,7 @@ export class ImageError extends Error {
     ) {
         super(message);
         this.name = 'ImageError';
+        Object.setPrototypeOf(this, ImageError.prototype);
     }
 }
 

package/src/infinite-scroll/presentation/components/infinite-scroll-list.tsx

@@ -62,13 +62,13 @@ function InfiniteScrollListComponent<T>({
 }: InfiniteScrollListProps<T>): React.ReactElement {
   const { items, state, loadMore, refresh, canLoadMore } = useInfiniteScroll(config);
 
-  const handleEndReached = React.useCallback(() => {
+  const handleEndReached = useCallback(() => {
     if (canLoadMore && config.autoLoad !== false) {
       loadMore();
     }
   }, [canLoadMore, loadMore, config.autoLoad]);
 
-  const getItemKey = React.useCallback(
+  const getItemKey = useCallback(
     (item: T, index: number): string => {
       if (config.getItemKey) {
         return config.getItemKey(item, index);

package/src/layouts/ScreenHeader/ScreenHeader.tsx

@@ -12,7 +12,7 @@
  * - Fully configurable for general purpose use
  */
 
-import React from 'react';
+import React, { useState, useEffect, useCallback, useMemo, useRef, useContext } from 'react';
 import { View, TouchableOpacity, ViewStyle } from 'react-native';
 import { AtomicIcon, AtomicText } from '../../atoms';
 import { useAppDesignTokens } from '../../theme';
@@ -71,7 +71,7 @@ const ScreenHeaderBackButton: React.FC<{
   backIconColor?: 'primary' | 'secondary' | 'error' | 'warning' | 'success' | 'surfaceVariant';
   testID?: string;
 }> = ({ hideBackButton, onBackPress, backIconName, backIconColor, testID }) => {
-  const handleBackPress = React.useCallback(() => {
+  const handleBackPress = useCallback(() => {
     if (onBackPress) {
       onBackPress();
     }
@@ -136,7 +136,7 @@ export const ScreenHeader: React.FC<ScreenHeaderProps> = ({
 }) => {
   const tokens = useAppDesignTokens();
 
-  const headerStyle = React.useMemo(() => [
+  const headerStyle = useMemo(() => [
     {
       flexDirection: 'row' as const,
       alignItems: 'center' as const,

package/src/media/presentation/hooks/useCardMediaGeneration.ts

@@ -12,12 +12,12 @@ import type {
 } from "../../domain/entities/CardMultimedia.types";
 
 export const useCardMediaGeneration = (): UseCardMediaGenerationResult => {
-  const [isGenerating, setIsGenerating] = React.useState(false);
+  const [isGenerating, setIsGenerating] = useState(false);
   const [generationResult, setGenerationResult] =
-    React.useState<CardMediaGenerationResult | null>(null);
-  const [error, setError] = React.useState<string | null>(null);
+    useState<CardMediaGenerationResult | null>(null);
+  const [error, setError] = useState<string | null>(null);
 
-  const generateMedia = React.useCallback(
+  const generateMedia = useCallback(
     async (
       request: CardMediaGenerationRequest,
     ): Promise<CardMediaGenerationResult> => {

package/src/media/presentation/hooks/useCardMediaUpload.ts

@@ -15,12 +15,12 @@ import type {
 } from "../../domain/entities/CardMultimedia.types";
 
 export const useCardMediaUpload = (): UseCardMediaUploadResult => {
-  const [isUploading, setIsUploading] = React.useState(false);
+  const [isUploading, setIsUploading] = useState(false);
   const [uploadProgress, setUploadProgress] =
-    React.useState<CardMediaUploadProgress | null>(null);
-  const [error, setError] = React.useState<string | null>(null);
+    useState<CardMediaUploadProgress | null>(null);
+  const [error, setError] = useState<string | null>(null);
 
-  const uploadMedia = React.useCallback(
+  const uploadMedia = useCallback(
     async (file: CardMediaFile, _options?: CardMediaCompressionOptions) => {
       try {
         setIsUploading(true);

package/src/media/presentation/hooks/useCardMediaValidation.ts

@@ -9,12 +9,12 @@ import type { UseCardMediaValidationResult } from "./card-multimedia.types";
 import type { CardMediaValidation, CardMediaFile } from "../../domain/entities/CardMultimedia.types";
 
 export const useCardMediaValidation = (): UseCardMediaValidationResult => {
-  const [isValidating, setIsValidating] = React.useState(false);
+  const [isValidating, setIsValidating] = useState(false);
   const [validation, setValidation] =
-    React.useState<CardMediaValidation | null>(null);
-  const [error, setError] = React.useState<string | null>(null);
+    useState<CardMediaValidation | null>(null);
+  const [error, setError] = useState<string | null>(null);
 
-  const validateMedia = React.useCallback(
+  const validateMedia = useCallback(
     async (file: CardMediaFile): Promise<CardMediaValidation> => {
       try {
         setIsValidating(true);

package/src/media/presentation/hooks/useCardMultimediaFlashcard.ts

@@ -30,10 +30,10 @@ export type {
  */
 export const useCardMultimediaFlashcard =
   (): UseCardMultimediaFlashcardResult => {
-    const [isProcessing, setIsProcessing] = React.useState(false);
-    const [error, setError] = React.useState<string | null>(null);
+    const [isProcessing, setIsProcessing] = useState(false);
+    const [error, setError] = useState<string | null>(null);
 
-    const createCardMultimedia = React.useCallback(
+    const createCardMultimedia = useCallback(
       async (cardData: CreateCardMultimediaData): Promise<CardMultimediaFlashcard> => {
         try {
           setIsProcessing(true);
@@ -72,7 +72,7 @@ export const useCardMultimediaFlashcard =
       [],
     );
 
-    const updateCardMedia = React.useCallback(
+    const updateCardMedia = useCallback(
       async (
         _cardId: string,
         _media: CardMediaAttachment[],
@@ -84,7 +84,7 @@ export const useCardMultimediaFlashcard =
       [],
     );
 
-    const deleteCardMedia = React.useCallback(
+    const deleteCardMedia = useCallback(
       async (_attachmentId: string): Promise<void> => {
         // Mock implementation
         await new Promise((resolve) => setTimeout(resolve, 500));

package/src/media/presentation/hooks/useMediaGeneration.ts

@@ -12,12 +12,12 @@ import type {
 } from "../../domain/entities/MultimediaFlashcardTypes";
 
 export const useMediaGeneration = (): UseMediaGenerationResult => {
-  const [isGenerating, setIsGenerating] = React.useState(false);
+  const [isGenerating, setIsGenerating] = useState(false);
   const [generationResult, setGenerationResult] =
-    React.useState<MediaGenerationResult | null>(null);
-  const [error, setError] = React.useState<string | null>(null);
+    useState<MediaGenerationResult | null>(null);
+  const [error, setError] = useState<string | null>(null);
 
-  const generateMedia = React.useCallback(
+  const generateMedia = useCallback(
     async (request: MediaGenerationRequest): Promise<MediaGenerationResult> => {
       try {
         setIsGenerating(true);

package/src/media/presentation/hooks/useMediaUpload.ts

@@ -15,12 +15,12 @@ import type {
 } from "../../domain/entities/MultimediaFlashcardTypes";
 
 export const useMediaUpload = (): UseMediaUploadResult => {
-  const [isUploading, setIsUploading] = React.useState(false);
+  const [isUploading, setIsUploading] = useState(false);
   const [uploadProgress, setUploadProgress] =
-    React.useState<MediaUploadProgress | null>(null);
-  const [error, setError] = React.useState<string | null>(null);
+    useState<MediaUploadProgress | null>(null);
+  const [error, setError] = useState<string | null>(null);
 
-  const uploadMedia = React.useCallback(
+  const uploadMedia = useCallback(
     async (file: MediaFile, _options?: MediaCompressionOptions) => {
       try {
         setIsUploading(true);

package/src/media/presentation/hooks/useMediaValidation.ts

@@ -9,13 +9,13 @@ import type { UseMediaValidationResult } from "./multimedia.types";
 import type { MediaValidation, MediaFile } from "../../domain/entities/MultimediaFlashcardTypes";
 
 export const useMediaValidation = (): UseMediaValidationResult => {
-  const [isValidating, setIsValidating] = React.useState(false);
-  const [validation, setValidation] = React.useState<MediaValidation | null>(
+  const [isValidating, setIsValidating] = useState(false);
+  const [validation, setValidation] = useState<MediaValidation | null>(
     null,
   );
-  const [error, setError] = React.useState<string | null>(null);
+  const [error, setError] = useState<string | null>(null);
 
-  const validateMedia = React.useCallback(
+  const validateMedia = useCallback(
     async (file: MediaFile): Promise<MediaValidation> => {
       try {
         setIsValidating(true);

package/src/media/presentation/hooks/useMultimediaFlashcard.ts

@@ -29,10 +29,10 @@ export type {
  * Main hook for multimedia flashcard operations
  */
 export const useMultimediaFlashcard = (): UseMultimediaFlashcardResult => {
-  const [isProcessing, setIsProcessing] = React.useState(false);
-  const [error, setError] = React.useState<string | null>(null);
+  const [isProcessing, setIsProcessing] = useState(false);
+  const [error, setError] = useState<string | null>(null);
 
-  const createMultimediaCard = React.useCallback(
+  const createMultimediaCard = useCallback(
     async (cardData: CreateMultimediaCardData): Promise<MultimediaFlashcard> => {
       try {
         setIsProcessing(true);
@@ -71,7 +71,7 @@ export const useMultimediaFlashcard = (): UseMultimediaFlashcardResult => {
     [],
   );
 
-  const updateMedia = React.useCallback(
+  const updateMedia = useCallback(
     async (
       _cardId: string,
       _media: MediaAttachment[],
@@ -83,7 +83,7 @@ export const useMultimediaFlashcard = (): UseMultimediaFlashcardResult => {
     [],
   );
 
-  const deleteMedia = React.useCallback(
+  const deleteMedia = useCallback(
     async (_attachmentId: string): Promise<void> => {
       // Mock implementation
       await new Promise((resolve) => setTimeout(resolve, 500));

package/src/molecules/BaseModal.tsx

@@ -47,7 +47,7 @@ export const BaseModal: React.FC<BaseModalProps> = ({
     }
   }, [visible, testID, modalLayout.width, modalLayout.height]);
 
-  const handleBackdropPress = React.useCallback(() => {
+  const handleBackdropPress = useCallback(() => {
     if (dismissOnBackdrop) {
       onClose();
     }

package/src/molecules/ConfirmationModalContent.tsx

@@ -4,7 +4,7 @@
  * Content component for confirmation modal
  */
 
-import React from 'react';
+import React, { useState, useEffect, useCallback, useMemo, useRef, useContext } from 'react';
 import { View, ViewStyle, StyleProp } from 'react-native';
 import { useAppDesignTokens } from '../theme';
 import { ConfirmationModalVariant } from './confirmation-modal/types/';
@@ -27,7 +27,7 @@ const useConfirmButtonStyle = (
   variant: ConfirmationModalVariant,
   tokens: ReturnType<typeof useAppDesignTokens>
 ) => {
-  return React.useCallback(() => {
+  return useCallback(() => {
     const baseStyle = getButtonStyle();
     const variantStyles: ViewStyle[] = [];
 

package/src/molecules/ConfirmationModalMain.tsx

@@ -4,7 +4,7 @@
  * Main confirmation modal component
  */
 
-import React from 'react';
+import React, { useState, useEffect, useCallback, useMemo, useRef, useContext } from 'react';
 import { View, Modal, TouchableOpacity } from 'react-native';
 import { useAppDesignTokens } from '../theme';
 import { ConfirmationModalProps } from './confirmation-modal/types/';
@@ -15,7 +15,7 @@ import {
 import { ConfirmationModalContent } from './ConfirmationModalContent';
 
 const useBackdropHandler = (backdropDismissible: boolean, onCancel: () => void) => {
-  return React.useCallback(() => {
+  return useCallback(() => {
     if (backdropDismissible) {
       onCancel();
     }

package/src/molecules/bottom-sheet/components/filter/FilterBottomSheet.tsx

@@ -54,7 +54,7 @@ export const FilterBottomSheet = forwardRef<BottomSheetModalRef, FilterBottomShe
         });
     }
 
-    const styles = React.useMemo(() => StyleSheet.create({
+    const styles = useMemo(() => StyleSheet.create({
         container: {
             flex: 1,
             padding: 16,
@@ -151,7 +151,7 @@ export const FilterBottomSheet = forwardRef<BottomSheetModalRef, FilterBottomShe
 
     const hasActiveFilters = FilterUtils.hasActiveFilter(safeSelectedIds, defaultId);
 
-    React.useEffect(() => {
+    useEffect(() => {
         if (__DEV__) {
             console.log('[FilterBottomSheet] useEffect - Component ready', {
                 refCurrent: !!internalRef.current,

package/src/molecules/calendar/presentation/components/AtomicCalendar.tsx

@@ -32,7 +32,7 @@
 
 import React from 'react';
 import { View, StyleProp, ViewStyle } from 'react-native';
-import { useAppDesignTokens } from '../../../../index';
+import { useAppDesignTokens } from '../../../../theme/hooks/useAppDesignTokens';
 import type { CalendarDay } from '../../domain/entities/CalendarDay.entity';
 import { CalendarService } from '../../infrastructure/services/CalendarService';
 import { calendarStyles } from './calendarStyles';

package/src/molecules/calendar/presentation/components/CalendarDayCell.tsx

@@ -4,7 +4,8 @@
 
 import React from 'react';
 import { TouchableOpacity, View, StyleProp, ViewStyle } from 'react-native';
-import { AtomicText, useAppDesignTokens } from '../../../../index';
+import { AtomicText } from '../../../../atoms';
+import { useAppDesignTokens } from '../../../../theme/hooks/useAppDesignTokens';
 import type { CalendarDay } from '../../domain/entities/CalendarDay.entity';
 
 import { calendarStyles } from './calendarStyles';

package/src/molecules/calendar/presentation/components/CalendarWeekdayHeader.tsx

@@ -4,7 +4,7 @@
 
 import React from 'react';
 import { View } from 'react-native';
-import { AtomicText } from '../../../../index';
+import { AtomicText } from '../../../../atoms';
 import { calendarStyles } from './calendarStyles';
 
 interface CalendarWeekdayHeaderProps {

package/src/molecules/confirmation-modal/useConfirmationModal.ts

@@ -4,14 +4,14 @@
  * Hook for managing confirmation modal state
  */
 
-import React from 'react';
+import React, { useState, useEffect, useCallback, useMemo, useRef, useContext } from 'react';
 import { ConfirmationModalProps, ConfirmationModalVariant } from './types';
 
 const useConfirmationModalState = () => {
-  const [visible, setVisible] = React.useState(false);
+  const [visible, setVisible] = useState(false);
 
-  const showConfirmation = React.useCallback(() => setVisible(true), []);
-  const hideConfirmation = React.useCallback(() => setVisible(false), []);
+  const showConfirmation = useCallback(() => setVisible(true), []);
+  const hideConfirmation = useCallback(() => setVisible(false), []);
 
   return { visible, showConfirmation, hideConfirmation };
 };
@@ -26,12 +26,12 @@ export const useConfirmationModal = (config: {
 }) => {
   const { visible, showConfirmation, hideConfirmation } = useConfirmationModalState();
 
-  const handleConfirm = React.useCallback(() => {
+  const handleConfirm = useCallback(() => {
     config.onConfirm();
     hideConfirmation();
   }, [config, hideConfirmation]);
 
-  const confirmationProps: ConfirmationModalProps = React.useMemo(() => ({
+  const confirmationProps: ConfirmationModalProps = useMemo(() => ({
     visible,
     title: config.title,
     message: config.message,

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

@@ -37,7 +37,7 @@ export const Countdown: React.FC<CountdownProps> = ({
         showSeconds = true,
     } = displayConfig;
 
-    const [currentTargetIndex, setCurrentTargetIndex] = React.useState(0);
+    const [currentTargetIndex, setCurrentTargetIndex] = useState(0);
     const allTargets = useMemo(
         () => [target, ...alternateTargets],
         [target, alternateTargets]
@@ -49,7 +49,7 @@ export const Countdown: React.FC<CountdownProps> = ({
         onExpire,
     });
 
-    React.useEffect(() => {
+    useEffect(() => {
         if (currentTarget) {
             updateTarget(currentTarget);
         }

package/src/molecules/splash/components/SplashScreen.tsx

@@ -1,9 +1,8 @@
 
 import React, { useEffect, useState, useCallback } from "react";
-import { View, Image, StyleSheet } from "react-native";
+import { View, Image, StyleSheet, Text, ActivityIndicator } from "react-native";
 import { initialWindowMetrics } from "../../../safe-area";
-import { AtomicText, AtomicSpinner } from "../../../atoms";
-import { useAppDesignTokens } from "../../../theme";
+import { useAppDesignTokens } from "../../../theme/hooks/useAppDesignTokens";
 import type { SplashScreenProps, SplashColors } from "../types";
 import { SPLASH_CONSTANTS } from "../constants";
 
@@ -100,39 +99,26 @@ export const SplashScreen: React.FC<SplashScreenProps> = ({
         )}
 
         {appName ? (
-          <AtomicText
-            type="displaySmall"
-            style={[styles.title, { color: colors.text }]}
-          >
+          <Text style={[styles.title, { color: colors.text, fontSize: 30, fontWeight: '800' }]}>
             {appName}
-          </AtomicText>
+          </Text>
         ) : null}
 
         {tagline ? (
-          <AtomicText
-            type="bodyLarge"
-            style={[styles.tagline, { color: colors.text }]}
-          >
+          <Text style={[styles.tagline, { color: colors.text, fontSize: 16 }]}>
             {tagline}
-          </AtomicText>
+          </Text>
         ) : null}
 
         {/* Always show loading indicator during initialization */}
         <View style={styles.loadingContainer}>
-          <AtomicSpinner
-            size="lg"
-            color={colors.text}
-            style={styles.loadingIndicator}
-          />
+          <ActivityIndicator size="large" color={colors.text} />
         </View>
 
         {timedOut && __DEV__ ? (
-          <AtomicText
-            type="labelSmall"
-            style={[styles.timeoutText, { color: colors.text }]}
-          >
+          <Text style={[styles.timeoutText, { color: colors.text, fontSize: 12 }]}>
             Initialization timeout
-          </AtomicText>
+          </Text>
         ) : null}
       </View>
     </View>

package/src/molecules/swipe-actions/domain/entities/SwipeAction.ts

@@ -8,7 +8,7 @@
  * @layer domain/entities
  */
 
-import type { IconName } from '../../../../index';
+import type { IconName } from '../../../../atoms/icon';
 
 /**
  * Pre-built swipe action types

package/src/molecules/swipe-actions/presentation/components/SwipeActionButton.tsx

@@ -10,8 +10,8 @@
 
 import React from 'react';
 import { StyleSheet, TouchableOpacity, View, type StyleProp, type ViewStyle } from 'react-native';
-import { AtomicText, AtomicIcon } from '../../../../index';
-import { useAppDesignTokens } from '../../../../index';
+import { AtomicText, AtomicIcon } from '../../../../atoms';
+import { useAppDesignTokens } from '../../../../theme/hooks/useAppDesignTokens';
 import { HapticService } from '../../../../haptics';
 import type { SwipeActionConfig } from '../../domain/entities/SwipeAction';
 import { SwipeActionUtils } from '../../domain/entities/SwipeAction';

package/src/organisms/FormContainer.tsx

@@ -43,7 +43,7 @@
  * @module FormContainer
  */
 
-import React from 'react';
+import React, { useState, useEffect, useCallback, useMemo, useRef, useContext } from 'react';
 import {
   ScrollView,
   View,
@@ -106,7 +106,7 @@ export const FormContainer: React.FC<FormContainerProps> = ({
   const formElementSpacing = tokens.spacing.lg;
 
   // Create styles for form container (memoized to avoid re-creation on every render)
-  const styles = React.useMemo(
+  const styles = useMemo(
     () =>
       StyleSheet.create({
         container: {

package/src/responsive/validation.ts

@@ -14,6 +14,7 @@ export class ResponsiveValidationError extends Error {
   constructor(message: string) {
     super(`[Responsive] ${message}`);
     this.name = 'ResponsiveValidationError';
+    Object.setPrototypeOf(this, ResponsiveValidationError.prototype);
   }
 }
 

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

@@ -6,6 +6,7 @@ export class CacheError extends Error {
   constructor(message: string, public readonly code: string) {
     super(message);
     this.name = 'CacheError';
+    Object.setPrototypeOf(this, CacheError.prototype);
   }
 }
 

package/src/storage/domain/errors/StorageError.ts

@@ -12,6 +12,7 @@ export class StorageError extends Error {
   constructor(message: string, public readonly key?: string) {
     super(message);
     this.name = 'StorageError';
+    Object.setPrototypeOf(this, StorageError.prototype);
   }
 }
 
@@ -25,6 +26,7 @@ export class StorageReadError extends StorageError {
     super(`Failed to read from storage: ${key}`, key);
     this.name = 'StorageReadError';
     this.cause = cause;
+    Object.setPrototypeOf(this, StorageReadError.prototype);
   }
 }
 
@@ -38,6 +40,7 @@ export class StorageWriteError extends StorageError {
     super(`Failed to write to storage: ${key}`, key);
     this.name = 'StorageWriteError';
     this.cause = cause;
+    Object.setPrototypeOf(this, StorageWriteError.prototype);
   }
 }
 
@@ -51,6 +54,7 @@ export class StorageDeleteError extends StorageError {
     super(`Failed to delete from storage: ${key}`, key);
     this.name = 'StorageDeleteError';
     this.cause = cause;
+    Object.setPrototypeOf(this, StorageDeleteError.prototype);
   }
 }
 
@@ -64,6 +68,7 @@ export class StorageSerializationError extends StorageError {
     super(`Failed to serialize data for key: ${key}`, key);
     this.name = 'StorageSerializationError';
     this.cause = cause;
+    Object.setPrototypeOf(this, StorageSerializationError.prototype);
   }
 }
 
@@ -77,5 +82,6 @@ export class StorageDeserializationError extends StorageError {
     super(`Failed to deserialize data for key: ${key}`, key);
     this.name = 'StorageDeserializationError';
     this.cause = cause;
+    Object.setPrototypeOf(this, StorageDeserializationError.prototype);
   }
 }

package/src/storage/infrastructure/repositories/AsyncStorageRepository.ts

@@ -16,63 +16,76 @@ import { BatchStorageOperations } from './BatchStorageOperations';
  * Uses composition to follow Single Responsibility Principle
  */
 export class AsyncStorageRepository implements IStorageRepository {
-  private baseOps: BaseStorageOperations;
-  private stringOps: StringStorageOperations;
-  private batchOps: BatchStorageOperations;
+  private baseOps: BaseStorageOperations | null = null;
+  private stringOps: StringStorageOperations | null = null;
+  private batchOps: BatchStorageOperations | null = null;
 
   constructor() {
-    this.baseOps = new BaseStorageOperations();
-    this.stringOps = new StringStorageOperations();
-    this.batchOps = new BatchStorageOperations();
+    // Lazy initialization - defer object creation
+  }
+
+  private ensureInitialized() {
+    if (!this.baseOps) {
+      this.baseOps = new BaseStorageOperations();
+      this.stringOps = new StringStorageOperations();
+      this.batchOps = new BatchStorageOperations();
+    }
   }
 
   /**
    * Get item from AsyncStorage with type safety
    */
   async getItem<T>(key: string, defaultValue: T): Promise<StorageResult<T>> {
-    return this.baseOps.getItem(key, defaultValue);
+    this.ensureInitialized();
+    return this.baseOps!.getItem(key, defaultValue);
   }
 
   /**
    * Set item in AsyncStorage with automatic JSON serialization
    */
   async setItem<T>(key: string, value: T): Promise<StorageResult<T>> {
-    return this.baseOps.setItem(key, value);
+    this.ensureInitialized();
+    return this.baseOps!.setItem(key, value);
   }
 
   /**
    * Get string value (no JSON parsing)
    */
   async getString(key: string, defaultValue: string): Promise<StorageResult<string>> {
-    return this.stringOps.getString(key, defaultValue);
+    this.ensureInitialized();
+    return this.stringOps!.getString(key, defaultValue);
   }
 
   /**
    * Set string value (no JSON serialization)
    */
   async setString(key: string, value: string): Promise<StorageResult<string>> {
-    return this.stringOps.setString(key, value);
+    this.ensureInitialized();
+    return this.stringOps!.setString(key, value);
   }
 
   /**
    * Remove item from AsyncStorage
    */
   async removeItem(key: string): Promise<StorageResult<void>> {
-    return this.baseOps.removeItem(key);
+    this.ensureInitialized();
+    return this.baseOps!.removeItem(key);
   }
 
   /**
    * Check if key exists in storage
    */
   async hasItem(key: string): Promise<boolean> {
-    return this.baseOps.hasItem(key);
+    this.ensureInitialized();
+    return this.baseOps!.hasItem(key);
   }
 
   /**
    * Clear all AsyncStorage data
    */
   async clearAll(): Promise<StorageResult<void>> {
-    return this.baseOps.clearAll();
+    this.ensureInitialized();
+    return this.baseOps!.clearAll();
   }
 
   /**
@@ -81,18 +94,20 @@ export class AsyncStorageRepository implements IStorageRepository {
   async getMultiple(
     keys: string[]
   ): Promise<StorageResult<Record<string, string | null>>> {
-    return this.batchOps.getMultiple(keys);
+    this.ensureInitialized();
+    return this.batchOps!.getMultiple(keys);
   }
 
   /**
    * Get all keys from storage
    */
   async getAllKeys(): Promise<StorageResult<string[]>> {
-    return this.batchOps.getAllKeys();
+    this.ensureInitialized();
+    return this.batchOps!.getAllKeys();
   }
 }
 
 /**
- * Singleton instance
+ * Singleton instance - lazy initialization
  */
 export const storageRepository = new AsyncStorageRepository();

package/src/tanstack/domain/repositories/IBaseRepository.ts

@@ -0,0 +1,34 @@
+/**
+ * Base Repository Interface
+ * Defines the contract for repository implementations
+ */
+
+import type { QueryClient } from '@tanstack/react-query';
+import type { QueryKeyFactory } from '../utils/QueryKeyFactory';
+import type {
+  CreateParams,
+  UpdateParams,
+  ListParams,
+  RepositoryOptions,
+} from './RepositoryTypes';
+
+export interface IBaseRepository<TData, TCreateVariables, TUpdateVariables> {
+  /** Query client instance */
+  getClient(): QueryClient;
+
+  /** Resource name */
+  readonly resource: string;
+
+  /** Query key factory */
+  readonly keys: QueryKeyFactory;
+
+  /** Cache options */
+  getCacheOptions(): RepositoryOptions;
+
+  /** Abstract methods to be implemented by subclasses */
+  fetchAll(params?: ListParams): Promise<TData[]>;
+  fetchById(id: string | number): Promise<TData>;
+  create(data: CreateParams<TCreateVariables>): Promise<TData>;
+  update(id: string | number, data: UpdateParams<TUpdateVariables>): Promise<TData>;
+  remove(id: string | number): Promise<void>;
+}

package/src/tanstack/domain/repositories/mixins/repositoryInvalidationMethods.ts

@@ -4,7 +4,7 @@
  */
 
 import type { QueryClient } from '@tanstack/react-query';
-import type { BaseRepository } from '../BaseRepository';
+import type { IBaseRepository } from '../IBaseRepository';
 import { matchesResource } from '../helpers/repositoryHelpers';
 
 /**
@@ -13,7 +13,7 @@ import { matchesResource } from '../helpers/repositoryHelpers';
  * @param repository - Repository instance
  */
 export function invalidateAll<TData>(
-  repository: BaseRepository<TData, unknown, unknown>
+  repository: IBaseRepository<TData, unknown, unknown>
 ): Promise<void> {
   const client = (repository as any).getClient() as QueryClient;
   const resource = (repository as any).resource;
@@ -31,7 +31,7 @@ export function invalidateAll<TData>(
  * @param repository - Repository instance
  */
 export function invalidateLists<TData>(
-  repository: BaseRepository<TData, unknown, unknown>
+  repository: IBaseRepository<TData, unknown, unknown>
 ): Promise<void> {
   const client = (repository as any).getClient() as QueryClient;
   return client.invalidateQueries({
@@ -46,7 +46,7 @@ export function invalidateLists<TData>(
  * @param id - Item ID
  */
 export function invalidateDetail<TData>(
-  repository: BaseRepository<TData, unknown, unknown>,
+  repository: IBaseRepository<TData, unknown, unknown>,
   id: string | number
 ): Promise<void> {
   const client = (repository as any).getClient() as QueryClient;

package/src/tanstack/domain/repositories/mixins/repositoryQueryMethods.ts

@@ -5,7 +5,7 @@
 
 import type { QueryClient, QueryKey } from '@tanstack/react-query';
 import type { ListParams } from '../RepositoryTypes';
-import type { BaseRepository } from '../BaseRepository';
+import type { IBaseRepository } from '../IBaseRepository';
 
 /**
  * Query all items with caching
@@ -15,7 +15,7 @@ import type { BaseRepository } from '../BaseRepository';
  * @returns Promise of data array
  */
 export async function queryAll<TData>(
-  repository: BaseRepository<TData, unknown, unknown>,
+  repository: IBaseRepository<TData, unknown, unknown>,
   params?: ListParams
 ): Promise<TData[]> {
   const client = (repository as any).getClient() as QueryClient;
@@ -39,7 +39,7 @@ export async function queryAll<TData>(
  * @returns Promise of data or undefined if not found
  */
 export async function queryById<TData>(
-  repository: BaseRepository<TData, unknown, unknown>,
+  repository: IBaseRepository<TData, unknown, unknown>,
   id: string | number
 ): Promise<TData | undefined> {
   const client = (repository as any).getClient() as QueryClient;

package/src/tanstack/infrastructure/providers/TanstackProvider.tsx

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { useState } from 'react';
 import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
 import { PersistQueryClientProvider } from '@tanstack/react-query-persist-client';
 import type { Persister } from '@tanstack/react-query-persist-client';
@@ -78,7 +78,7 @@ export function TanstackProvider({
   onPersistError,
 }: TanstackProviderProps): React.ReactElement {
   // Create QueryClient if not provided and set as global singleton
-  const [queryClient] = React.useState(() => {
+  const [queryClient] = useState(() => {
     const client = providedQueryClient ?? createQueryClient(queryClientOptions);
     setGlobalQueryClient(client);
 
@@ -90,7 +90,7 @@ export function TanstackProvider({
   });
 
   // Create persister if persistence is enabled
-  const [persister] = React.useState(() => {
+  const [persister] = useState(() => {
     if (!enablePersistence) return undefined;
     return providedPersister ?? createPersister(persisterOptions);
   });

package/src/theme/index.ts

@@ -76,9 +76,6 @@ export { useCommonStyles } from './hooks/useCommonStyles';
 
 export { DesignSystemProvider } from './infrastructure/providers/DesignSystemProvider';
 
-// Re-export icon types for convenience
-export type { IconRenderer, IconRenderProps, IconNames } from '../atoms/icon';
-
 // =============================================================================
 // THEME OBJECTS
 // =============================================================================

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

@@ -1,4 +1,4 @@
-import React, { useEffect, useState, ReactNode } from 'react';
+import React, { useEffect, useState, ReactNode, lazy, Suspense } from 'react';
 import { ActivityIndicator, View, StyleSheet } from 'react-native';
 import { GestureHandlerRootView } from 'react-native-gesture-handler';
 import { useFonts } from 'expo-font';
@@ -6,9 +6,12 @@ import { SafeAreaProvider, initialWindowMetrics } from '../../../safe-area';
 import { useTheme } from '../stores/themeStore';
 import { useDesignSystemTheme, type ThemeMode } from '../globalThemeStore';
 import type { CustomThemeColors } from '../../core/CustomColors';
-import { SplashScreen } from '../../../molecules/splash';
 import type { SplashScreenProps } from '../../../molecules/splash/types';
-import { useIconStore, type IconRenderer, type IconNames } from '../../../atoms/icon';
+import { useIconStore } from '../../../atoms/icon/iconStore';
+import type { IconRenderer, IconNames } from '../../../atoms/icon/iconStore';
+
+// Lazy load SplashScreen to avoid circular dependency
+const SplashScreen = lazy(() => import('../../../molecules/splash').then(m => ({ default: m.SplashScreen })));
 
 
 interface DesignSystemProviderProps {
@@ -97,7 +100,15 @@ export const DesignSystemProvider: React.FC<DesignSystemProviderProps> = ({
     if (loadingComponent) {
       content = loadingComponent;
     } else if (splashConfig) {
-      content = <SplashScreen {...splashConfig} visible={true} />;
+      content = (
+        <Suspense fallback={
+          <View style={styles.loadingContainer}>
+            <ActivityIndicator size="large" />
+          </View>
+        }>
+          <SplashScreen {...splashConfig} visible={true} />
+        </Suspense>
+      );
     } else {
       content = (
         <View style={styles.loadingContainer}>