@umituz/react-native-design-system 4.25.8 → 4.25.10

package/package.json

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

@@ -154,8 +154,3 @@ export const AtomicAvatar: React.FC<AtomicAvatarProps> = ({
   );
 };
 
-// =============================================================================
-// EXPORTS
-// =============================================================================
-
-export default AtomicAvatar;

package/src/atoms/AtomicInput.tsx

@@ -29,7 +29,6 @@ export const AtomicInput = React.forwardRef<React.ElementRef<typeof TextInput>,
   returnKeyType,
   onSubmitEditing,
   blurOnSubmit,
-  autoFocus,
   autoCapitalize = 'sentences',
   autoCorrect = true,
   autoComplete,
@@ -116,7 +115,6 @@ export const AtomicInput = React.forwardRef<React.ElementRef<typeof TextInput>,
           returnKeyType={returnKeyType}
           onSubmitEditing={onSubmitEditing}
           blurOnSubmit={blurOnSubmit}
-          autoFocus={autoFocus}
           autoCapitalize={autoCapitalize}
           autoCorrect={autoCorrect}
           autoComplete={autoComplete}

package/src/atoms/AtomicProgress.tsx

@@ -144,8 +144,3 @@ const styles = StyleSheet.create({
   },
 });
 
-// =============================================================================
-// EXPORTS
-// =============================================================================
-
-export default AtomicProgress;

package/src/atoms/AtomicTextArea.tsx

@@ -30,8 +30,6 @@ export interface AtomicTextAreaProps {
   style?: StyleProp<ViewStyle>;
   /** Input text style */
   inputStyle?: StyleProp<TextStyle>;
-  /** Auto focus */
-  autoFocus?: boolean;
   /** Return key type */
   returnKeyType?: 'done' | 'go' | 'next' | 'search' | 'send';
   /** Callback when submit button is pressed */
@@ -60,7 +58,6 @@ export const AtomicTextArea = forwardRef<React.ElementRef<typeof TextInput>, Ato
   disabled = false,
   style,
   inputStyle,
-  autoFocus,
   returnKeyType,
   onSubmitEditing,
   blurOnSubmit,
@@ -92,7 +89,6 @@ export const AtomicTextArea = forwardRef<React.ElementRef<typeof TextInput>, Ato
         numberOfLines={lineCount}
         multiline
         editable={!disabled}
-        autoFocus={autoFocus}
         returnKeyType={returnKeyType}
         onSubmitEditing={onSubmitEditing}
         blurOnSubmit={blurOnSubmit}

package/src/atoms/card/AtomicCard.tsx

@@ -1,6 +1,6 @@
 /**
  * AtomicCard
- * 
+ *
  * Unified card component that handles base card states, media, info, and glowing effects.
  * Replaces InfoCard, MediaCard, and GlowingCard molecules.
  */
@@ -10,6 +10,8 @@ import {
   View,
   Pressable,
   type GestureResponderEvent,
+  type StyleProp,
+  type TextStyle,
 } from 'react-native';
 import { AtomicImage } from '../image/AtomicImage';
 import { AtomicText } from '../AtomicText';
@@ -19,66 +21,45 @@ import { getCardVariantStyles, cardStyles } from './styles/cardStyles';
 import { getCardPadding } from './configs/cardPaddingConfig';
 import type { AtomicCardProps } from './types';
 
-const AtomicCardComponent: React.FC<AtomicCardProps> = ({
-  children,
-  variant = 'elevated',
-  padding = 'md',
+interface CardContentProps {
+  badge?: string;
+  image?: AtomicCardProps['image'];
+  imageAspectRatio: number;
+  selected: boolean;
+  checkCircleIcon: string;
+  paddingValue: number;
+  title?: string;
+  subtitle?: string;
+  description?: string;
+  leftIcon?: string;
+  rightIcon?: string;
+  titleStyle?: StyleProp<TextStyle>;
+  subtitleStyle?: StyleProp<TextStyle>;
+  descriptionStyle?: StyleProp<TextStyle>;
+  children?: React.ReactNode;
+}
+
+const CardContent: React.FC<CardContentProps> = ({
+  badge,
+  image,
+  imageAspectRatio,
+  selected,
+  checkCircleIcon,
+  paddingValue,
   title,
   subtitle,
   description,
-  image,
-  imageAspectRatio = 1.6,
-  badge,
   leftIcon,
   rightIcon,
-  selected = false,
-  glowColor,
-  glowIntensity = 1,
-  onPress,
-  disabled = false,
-  style,
   titleStyle,
   subtitleStyle,
   descriptionStyle,
-  testID,
+  children,
 }) => {
   const tokens = useAppDesignTokens();
-  const checkCircleIcon = useIconName('checkCircle');
-  
-  const variantStyles = useMemo(() => {
-    const base = getCardVariantStyles(variant, tokens);
-    if (variant === 'glowing' && glowColor) {
-      return {
-        ...base,
-        container: {
-          ...base.container,
-          borderColor: glowColor,
-          borderWidth: 2 * glowIntensity,
-        }
-      };
-    }
-    return base;
-  }, [variant, tokens, glowColor, glowIntensity]);
-
-  const paddingValue = getCardPadding(padding, tokens);
 
-  const containerStyle = [
-    cardStyles.container,
-    { borderRadius: tokens.borders.radius.lg },
-    variantStyles.container,
-    selected && { borderColor: tokens.colors.primary, borderWidth: 2 },
-    style,
-  ];
-
-  const handlePress = (event: GestureResponderEvent) => {
-    if (!disabled && onPress) {
-      onPress(event);
-    }
-  };
-
-  const renderContent = () => (
+  return (
     <>
-      {/* Badge */}
       {badge && (
         <View style={[cardStyles.badge, { backgroundColor: tokens.colors.primary }]}>
           <AtomicText type="labelSmall" color="onPrimary">
@@ -87,7 +68,6 @@ const AtomicCardComponent: React.FC<AtomicCardProps> = ({
         </View>
       )}
 
-      {/* Media */}
       {image && (
         <AtomicImage
           source={typeof image === 'string' ? { uri: image } : image}
@@ -96,14 +76,12 @@ const AtomicCardComponent: React.FC<AtomicCardProps> = ({
         />
       )}
 
-      {/* Selected Indicator */}
       {selected && (
         <View style={cardStyles.selectedOverlay}>
           <AtomicIcon name={checkCircleIcon} color="primary" size="md" />
         </View>
       )}
 
-      {/* Text Content */}
       <View style={{ padding: paddingValue }}>
         {(title || leftIcon || rightIcon) && (
           <View style={cardStyles.header}>
@@ -159,6 +137,85 @@ const AtomicCardComponent: React.FC<AtomicCardProps> = ({
       </View>
     </>
   );
+};
+
+const AtomicCardComponent: React.FC<AtomicCardProps> = ({
+  children,
+  variant = 'elevated',
+  padding = 'md',
+  title,
+  subtitle,
+  description,
+  image,
+  imageAspectRatio = 1.6,
+  badge,
+  leftIcon,
+  rightIcon,
+  selected = false,
+  glowColor,
+  glowIntensity = 1,
+  onPress,
+  disabled = false,
+  style,
+  titleStyle,
+  subtitleStyle,
+  descriptionStyle,
+  testID,
+}) => {
+  const tokens = useAppDesignTokens();
+  const checkCircleIcon = useIconName('checkCircle');
+
+  const variantStyles = useMemo(() => {
+    const base = getCardVariantStyles(variant, tokens);
+    if (variant === 'glowing' && glowColor) {
+      return {
+        ...base,
+        container: {
+          ...base.container,
+          borderColor: glowColor,
+          borderWidth: 2 * glowIntensity,
+        }
+      };
+    }
+    return base;
+  }, [variant, tokens, glowColor, glowIntensity]);
+
+  const paddingValue = getCardPadding(padding, tokens);
+
+  const containerStyle = [
+    cardStyles.container,
+    { borderRadius: tokens.borders.radius.lg },
+    variantStyles.container,
+    selected && { borderColor: tokens.colors.primary, borderWidth: 2 },
+    style,
+  ];
+
+  const handlePress = (event: GestureResponderEvent) => {
+    if (!disabled && onPress) {
+      onPress(event);
+    }
+  };
+
+  const content = (
+    <CardContent
+      badge={badge}
+      image={image}
+      imageAspectRatio={imageAspectRatio}
+      selected={selected}
+      checkCircleIcon={checkCircleIcon}
+      paddingValue={paddingValue}
+      title={title}
+      subtitle={subtitle}
+      description={description}
+      leftIcon={leftIcon}
+      rightIcon={rightIcon}
+      titleStyle={titleStyle}
+      subtitleStyle={subtitleStyle}
+      descriptionStyle={descriptionStyle}
+    >
+      {children}
+    </CardContent>
+  );
 
   if (onPress) {
     return (
@@ -171,14 +228,14 @@ const AtomicCardComponent: React.FC<AtomicCardProps> = ({
         ]}
         testID={testID}
       >
-        {renderContent()}
+        {content}
       </Pressable>
     );
   }
 
   return (
     <View style={containerStyle} testID={testID}>
-      {renderContent()}
+      {content}
     </View>
   );
 };

package/src/atoms/input/types.ts

@@ -45,8 +45,6 @@ export interface AtomicInputProps {
   onSubmitEditing?: () => void;
   /** Blur on submit */
   blurOnSubmit?: boolean;
-  /** Auto focus */
-  autoFocus?: boolean;
   /** Auto-capitalize */
   autoCapitalize?: 'none' | 'sentences' | 'words' | 'characters';
   /** Auto-correct */

package/src/atoms/skeleton/AtomicSkeleton.tsx

@@ -79,9 +79,9 @@ export const AtomicSkeleton: React.FC<AtomicSkeletonProps> = ({
 
   const renderSkeletonItem = (index: number) => (
     <View key={`skeleton-group-${index}`} style={styles.skeletonGroup}>
-      {skeletonConfigs.map((config, configIndex) => (
+      {skeletonConfigs.map((config) => (
         <SkeletonItem
-          key={`skeleton-${index}-${configIndex}`}
+          key={`skeleton-${index}-${config.width}-${config.height}`}
           config={config}
           baseColor={tokens.colors.surfaceSecondary}
           multiplier={tokens.spacingMultiplier}

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

@@ -1,11 +1,11 @@
 /**
  * Presentation - Image Gallery Component
- * 
+ *
  * High-performance, premium image gallery using expo-image.
  * Replaces slow standard image components for instant loading.
  */
 
-import React, { useCallback, useState, useEffect, useMemo } from 'react';
+import React, { useCallback, useRef, useMemo } from 'react';
 import { Modal, View, StyleSheet, FlatList, useWindowDimensions, type NativeSyntheticEvent, type NativeScrollEvent } from 'react-native';
 import { Image } from 'expo-image';
 import { useSafeAreaInsets } from 'react-native-safe-area-context';
@@ -35,7 +35,8 @@ export const ImageGallery: React.FC<ImageGalleryProps> = ({
 }) => {
     const insets = useSafeAreaInsets();
     const { width: SCREEN_WIDTH, height: SCREEN_HEIGHT } = useWindowDimensions();
-    const [currentIndex, setCurrentIndex] = useState(index);
+    const currentIndexRef = useRef(index);
+    const [, forceRender] = React.useReducer((x: number) => x + 1, 0);
 
     const styles = useMemo(() => StyleSheet.create({
         container: {
@@ -63,23 +64,24 @@ export const ImageGallery: React.FC<ImageGalleryProps> = ({
         }
     }), [SCREEN_WIDTH, SCREEN_HEIGHT]);
 
-    useEffect(() => {
-        if (visible) setCurrentIndex(index);
-    }, [visible, index]);
+    if (visible) {
+        currentIndexRef.current = index;
+    }
 
     const handleEdit = useCallback(async () => {
-        const currentImage = images[currentIndex];
+        const currentImage = images[currentIndexRef.current];
         if (!currentImage || !onImageChange) return;
-        await onImageChange(currentImage.uri, currentIndex);
-    }, [images, currentIndex, onImageChange]);
+        await onImageChange(currentImage.uri, currentIndexRef.current);
+    }, [images, onImageChange]);
 
     const handleScroll = useCallback((event: NativeSyntheticEvent<NativeScrollEvent>) => {
         const nextIndex = Math.round(event.nativeEvent.contentOffset.x / SCREEN_WIDTH);
-        if (nextIndex !== currentIndex) {
-            setCurrentIndex(nextIndex);
+        if (nextIndex !== currentIndexRef.current) {
+            currentIndexRef.current = nextIndex;
             onIndexChange?.(nextIndex);
+            forceRender();
         }
-    }, [currentIndex, onIndexChange, SCREEN_WIDTH]);
+    }, [onIndexChange, SCREEN_WIDTH]);
 
     const renderItem = useCallback(({ item }: { item: ImageViewerItem }) => (
         <View style={styles.imageWrapper}>
@@ -98,7 +100,7 @@ export const ImageGallery: React.FC<ImageGalleryProps> = ({
         index: i,
     }), [SCREEN_WIDTH]);
 
-    if (!visible && !currentIndex) return null;
+    if (!visible) return null;
 
     return (
         <Modal
@@ -112,7 +114,7 @@ export const ImageGallery: React.FC<ImageGalleryProps> = ({
                 <GalleryHeader
                     onClose={onDismiss}
                     onEdit={enableEditing ? handleEdit : undefined}
-                    title={title || `${currentIndex + 1} / ${images.length}`}
+                    title={title || `${currentIndexRef.current + 1} / ${images.length}`}
                 />
 
                 <FlatList
@@ -130,7 +132,6 @@ export const ImageGallery: React.FC<ImageGalleryProps> = ({
                 />
 
                 <View style={[styles.footer, { paddingBottom: Math.max(insets.bottom, 20) }]}>
-                    {/* Potential for thumbnail strip or captions in future */}
                 </View>
             </View>
         </Modal>

package/src/image/presentation/components/editor/StickerPickerSheet.tsx

@@ -2,7 +2,7 @@
  * Presentation - Sticker Picker Sheet
  */
 
-import React, { forwardRef, useMemo } from 'react';
+import React, { forwardRef } from 'react';
 import { View, TouchableOpacity, ScrollView, Image, useWindowDimensions } from 'react-native';
 import { BottomSheetModal } from '../../../../molecules/bottom-sheet/components/BottomSheetModal';
 import type { BottomSheetModalRef } from '../../../../molecules/bottom-sheet/types/BottomSheet';
@@ -22,10 +22,7 @@ export const StickerPickerSheet = forwardRef<BottomSheetModalRef, StickerPickerS
     const tokens = useAppDesignTokens();
     const { width: SCREEN_WIDTH } = useWindowDimensions();
 
-    const stickerSize = useMemo(
-      () => (SCREEN_WIDTH - 64) / 3,
-      [SCREEN_WIDTH]
-    );
+    const stickerSize = (SCREEN_WIDTH - 64) / 3;
 
     return (
       <BottomSheetModal ref={ref} snapPoints={snapPoints} onDismiss={onDismiss}>
@@ -36,9 +33,9 @@ export const StickerPickerSheet = forwardRef<BottomSheetModalRef, StickerPickerS
 
           <ScrollView showsVerticalScrollIndicator={false}>
             <View style={{ flexDirection: 'row', flexWrap: 'wrap', gap: tokens.spacing.md }}>
-              {stickers.map((uri, index) => (
+              {stickers.map((uri) => (
                 <TouchableOpacity
-                  key={index}
+                  key={uri}
                   onPress={() => onSelectSticker(uri)}
                   style={{
                     width: stickerSize,

package/src/index.ts

@@ -109,3 +109,8 @@ export * from "./storage";
 // CAROUSEL EXPORTS
 // =============================================================================
 export * from "./carousel";
+
+// =============================================================================
+// OFFLINE EXPORTS
+// =============================================================================
+export * from "./offline";

package/src/layouts/ScreenHeader/ScreenHeader.tsx

@@ -166,5 +166,3 @@ export const ScreenHeader: React.FC<ScreenHeaderProps> = ({
     </View>
   );
 };
-
-export default ScreenHeader;

package/src/loading/presentation/providers/LoadingProvider.tsx

@@ -3,11 +3,20 @@
  * Global loading provider with auto-detection
  */
 
-import React, { useEffect, useRef, useState } from 'react';
+import React, { useEffect, useReducer, useRef } from 'react';
 import { useIsFetching } from '@tanstack/react-query';
 import { LoadingOverlay } from '../components/LoadingOverlay';
 import type { LoadingProviderProps } from '../../domain/types/loading.types';
 
+type LoadingAction = { type: 'SHOW' } | { type: 'HIDE' };
+
+function loadingReducer(state: boolean, action: LoadingAction): boolean {
+  switch (action.type) {
+    case 'SHOW': return true;
+    case 'HIDE': return false;
+  }
+}
+
 export const LoadingProvider: React.FC<LoadingProviderProps> = ({
   children,
   spinnerColor,
@@ -18,7 +27,7 @@ export const LoadingProvider: React.FC<LoadingProviderProps> = ({
   minDisplayTime = 300,
 }) => {
   const isFetching = useIsFetching();
-  const [showFetchLoading, setShowFetchLoading] = useState(false);
+  const [showFetchLoading, dispatch] = useReducer(loadingReducer, false);
   const hideTimeoutRef = useRef<ReturnType<typeof setTimeout> | null>(null);
   const showTimeRef = useRef<number>(0);
 
@@ -31,13 +40,13 @@ export const LoadingProvider: React.FC<LoadingProviderProps> = ({
         hideTimeoutRef.current = null;
       }
       showTimeRef.current = Date.now();
-      setShowFetchLoading(true);
+      dispatch({ type: 'SHOW' });
     } else if (showFetchLoading) {
       const elapsed = Date.now() - showTimeRef.current;
       const remaining = Math.max(0, minDisplayTime - elapsed);
 
       hideTimeoutRef.current = setTimeout(() => {
-        setShowFetchLoading(false);
+        dispatch({ type: 'HIDE' });
         hideTimeoutRef.current = null;
       }, remaining);
     }

package/src/molecules/SearchBar/SearchBar.tsx

@@ -18,7 +18,6 @@ export const SearchBar: React.FC<SearchBarProps> = ({
     onFocus,
     onBlur,
     placeholder = 'Search...',
-    autoFocus = false,
     loading = false,
     disabled = false,
     containerStyle,
@@ -67,7 +66,6 @@ export const SearchBar: React.FC<SearchBarProps> = ({
                 onBlur={onBlur}
                 placeholder={placeholder}
                 placeholderTextColor={tokens.colors.textSecondary}
-                autoFocus={autoFocus}
                 editable={!disabled}
                 returnKeyType="search"
                 autoCapitalize="none"

package/src/molecules/SearchBar/SearchSuggestions.tsx

@@ -41,7 +41,7 @@ export function SearchSuggestions<T>({
         >
             {displayedSuggestions.map((item, index) => (
                 <TouchableOpacity
-                    key={index}
+                    key={String(item)}
                     onPress={() => onSelectSuggestion(item)}
                     style={[
                         styles.item,

package/src/molecules/SearchBar/types.ts

@@ -14,7 +14,6 @@ export interface SearchBarProps {
     onFocus?: () => void;
     onBlur?: () => void;
     placeholder?: string;
-    autoFocus?: boolean;
     loading?: boolean;
     disabled?: boolean;
     showCancelButton?: boolean;

package/src/molecules/StepHeader/StepHeader.tsx

@@ -102,7 +102,7 @@ export const StepHeader: React.FC<StepHeaderProps> = ({
           <View style={styles.stepIndicator}>
             {Array.from({ length: cfg.totalSteps }, (_, i) => (
               <View
-                key={i}
+                key={`step-${i}`}
                 style={[
                   styles.stepDot,
                   i + 1 <= cfg.currentStep!