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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@umituz/react-native-design-system",
-  "version": "4.25.62",
+  "version": "4.25.64",
   "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/carousel/CarouselDots.tsx

@@ -3,7 +3,7 @@ import { View, StyleSheet } from "react-native";
 import { useAppDesignTokens } from "../theme";
 import type { CarouselDotsProps } from "./types";
 
-export const CarouselDots: React.FC<CarouselDotsProps> = ({
+const CarouselDotsComponent: React.FC<CarouselDotsProps> = ({
   count,
   currentIndex,
   activeColor,
@@ -35,6 +35,7 @@ export const CarouselDots: React.FC<CarouselDotsProps> = ({
     </View>
   );
 };
+export const CarouselDots = React.memo(CarouselDotsComponent);
 
 const styles = StyleSheet.create({
   container: {

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

@@ -33,6 +33,8 @@ export function GalleryHeader({ onEdit, onClose, title }: GalleryHeaderProps) {
                         style={[styles.actionButton, { backgroundColor: 'rgba(255, 255, 255, 0.15)' }]}
                         onPress={onEdit}
                         activeOpacity={0.7}
+                        accessibilityRole="button"
+                        accessibilityLabel="Edit"
                     >
                         <AtomicText style={styles.buttonText}>Edit</AtomicText>
                     </TouchableOpacity>
@@ -55,6 +57,8 @@ export function GalleryHeader({ onEdit, onClose, title }: GalleryHeaderProps) {
                     onPress={onClose}
                     activeOpacity={0.7}
                     hitSlop={{ top: 20, bottom: 20, left: 20, right: 20 }}
+                    accessibilityRole="button"
+                    accessibilityLabel="Close gallery"
                 >
                     <AtomicText style={styles.closeIcon}>✕</AtomicText>
                 </TouchableOpacity>

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

@@ -68,7 +68,7 @@ export const TextEditorSheet = forwardRef<BottomSheetModalRef, TextEditorSheetPr
           ))}
         </View>
 
-        <ScrollView showsVerticalScrollIndicator={false} contentContainerStyle={{ paddingBottom: 60 }}>
+        <ScrollView showsVerticalScrollIndicator={false} contentContainerStyle={{ paddingBottom: 60 }} keyboardShouldPersistTaps="handled">
           {activeTab === 'content' && <TextContentTab text={props.text} onTextChange={props.onTextChange} t={t} />}
           {activeTab === 'style' && (
             <TextStyleTab 

package/src/molecules/ConfirmationModalContent.tsx

@@ -4,7 +4,7 @@
  * Content component for confirmation modal
  */
 
-import React, { useCallback } from 'react';
+import React, { useMemo } 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 useCallback(() => {
+  return useMemo(() => {
     const baseStyle = getButtonStyle();
     const variantStyles: ViewStyle[] = [];
 
@@ -54,7 +54,7 @@ export const ConfirmationModalContent: React.FC<{
 }> = ({ tokens, variant, title, message, confirmText, cancelText, icon, onConfirm, onCancel, style, testID }) => {
   const variantConfig = getVariantConfig(variant as 'default' | 'destructive' | 'warning' | 'success');
   const finalIcon = icon || variantConfig.icon;
-  const getConfirmButtonStyle = useConfirmButtonStyle(variant, tokens);
+  const confirmButtonStyle = useConfirmButtonStyle(variant, tokens);
 
   return (
     <View style={[getModalContainerStyle(tokens), style]}>
@@ -79,7 +79,7 @@ export const ConfirmationModalContent: React.FC<{
         cancelText={cancelText}
         onConfirm={onConfirm}
         onCancel={onCancel}
-        confirmButtonStyle={getConfirmButtonStyle()}
+        confirmButtonStyle={confirmButtonStyle}
         testID={testID}
       />
     </View>

package/src/molecules/ConfirmationModalMain.tsx

@@ -26,7 +26,7 @@ const ConfirmationModalBackdrop: React.FC<{
   showBackdrop: boolean;
   onBackdropPress: () => void;
   testID: string;
-}> = ({ showBackdrop, onBackdropPress, testID }) => {
+}> = React.memo(({ showBackdrop, onBackdropPress, testID }) => {
   if (!showBackdrop) return null;
 
   return (
@@ -37,7 +37,7 @@ const ConfirmationModalBackdrop: React.FC<{
       testID={`${testID}-backdrop`}
     />
   );
-};
+});
 
 export const ConfirmationModal: React.FC<ConfirmationModalProps> = ({
   visible,

package/src/molecules/SearchBar/SearchHistory.tsx

@@ -80,6 +80,8 @@ export const SearchHistory: React.FC<SearchHistoryProps> = ({
                         onPress={() => onRemoveItem(item.id)}
                         style={styles.removeButton}
                         hitSlop={{ top: 10, bottom: 10, left: 10, right: 10 }}
+                        accessibilityRole="button"
+                        accessibilityLabel={`Remove ${item.query} from history`}
                     >
                         <AtomicIcon
                             name={closeIcon}

package/src/molecules/avatar/Avatar.tsx

@@ -38,7 +38,7 @@ interface AvatarContentProps {
   imageStyle?: StyleProp<ImageStyle>;
 }
 
-const AvatarContent: React.FC<AvatarContentProps> = ({
+const AvatarContent: React.FC<AvatarContentProps> = React.memo(({
   hasImage,
   hasName,
   uri,
@@ -91,7 +91,7 @@ const AvatarContent: React.FC<AvatarContentProps> = ({
       customColor={tokens.colors.textInverse}
     />
   );
-};
+});
 
 export const Avatar: React.FC<AvatarProps> = ({
   uri,

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

@@ -103,7 +103,12 @@ export const FilterBottomSheet = forwardRef<BottomSheetModalRef, FilterBottomShe
       <View style={styles.container}>
         <View style={styles.header}>
           <AtomicText type="headlineSmall">{title || 'Filter'}</AtomicText>
-          <TouchableOpacity onPress={() => internalRef.current?.dismiss()}>
+          <TouchableOpacity
+            onPress={() => internalRef.current?.dismiss()}
+            hitSlop={{ top: 10, bottom: 10, left: 10, right: 10 }}
+            accessibilityRole="button"
+            accessibilityLabel="Close filter"
+          >
             <AtomicIcon name={icons.close} size="md" color="textPrimary" />
           </TouchableOpacity>
         </View>

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

@@ -22,7 +22,7 @@ interface CalendarDayCellProps {
   testID?: string;
 }
 
-export const CalendarDayCell: React.FC<CalendarDayCellProps> = ({
+export const CalendarDayCell: React.FC<CalendarDayCellProps> = React.memo(({
   day,
   index,
   isSelected,
@@ -98,4 +98,4 @@ export const CalendarDayCell: React.FC<CalendarDayCellProps> = ({
       </View>
     </TouchableOpacity>
   );
-};
+});

package/src/molecules/circular-menu/CircularMenuItem.tsx

@@ -11,7 +11,7 @@ export interface CircularMenuItemProps {
   onPress: () => void;
 }
 
-export const CircularMenuItem: React.FC<CircularMenuItemProps> = ({
+export const CircularMenuItem: React.FC<CircularMenuItemProps> = React.memo(({
   icon,
   label,
   onPress,
@@ -49,7 +49,7 @@ export const CircularMenuItem: React.FC<CircularMenuItemProps> = ({
       </AtomicText>
     </TouchableOpacity>
   );
-};
+});
 
 const styles = StyleSheet.create({
   container: {

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

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { useMemo } from 'react';
 import { StyleSheet, View, type ViewStyle } from 'react-native';
 import { useAppDesignTokens } from '../../../theme';
 
@@ -18,16 +18,13 @@ export const FabButton: React.FC<FabButtonProps> = ({
     style,
 }) => {
     const tokens = useAppDesignTokens();
+    const themedStyle = useMemo(() => ({
+        backgroundColor: tokens.colors.primary,
+        borderColor: tokens.colors.onPrimary,
+    }), [tokens.colors.primary, tokens.colors.onPrimary]);
 
     return (
-        <View style={[
-            styles.container,
-            {
-                backgroundColor: tokens.colors.primary,
-                borderColor: tokens.colors.onPrimary,
-            },
-            style
-        ]}>
+        <View style={[styles.container, themedStyle, style]}>
             {children}
         </View>
     );

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

@@ -86,14 +86,15 @@ export const SwipeActionButton: React.FC<SwipeActionButtonProps> = ({
   const backgroundColor = getBackgroundColor();
 
   const handlePress = async () => {
-    // Trigger haptic feedback
-    if (enableHaptics) {
-      const intensity = getHapticsIntensity(action);
-      await HapticService.impact(intensity);
+    try {
+      if (enableHaptics) {
+        const intensity = getHapticsIntensity(action);
+        await HapticService.impact(intensity);
+      }
+      await action.onPress();
+    } catch (error) {
+      if (__DEV__) console.warn('[SwipeActionButton] Action failed:', error);
     }
-
-    // Execute action
-    await action.onPress();
   };
 
   return (
@@ -111,6 +112,8 @@ export const SwipeActionButton: React.FC<SwipeActionButtonProps> = ({
       ]}
       onPress={handlePress}
       activeOpacity={0.7}
+      accessibilityRole="button"
+      accessibilityLabel={label}
     >
       <View style={styles.content}>
         <AtomicIcon

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

@@ -39,6 +39,7 @@ export const BaseSlide = ({
       contentContainerStyle={contentContainerStyle}
       showsVerticalScrollIndicator={false}
       bounces={false}
+      keyboardShouldPersistTaps="handled"
     >
       <View style={slideContainerStyle}>{children}</View>
     </ScrollView>

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

@@ -66,6 +66,9 @@ export const OnboardingFooter = ({
         onPress={onNext}
         disabled={disabled}
         activeOpacity={0.7}
+        accessibilityRole="button"
+        accessibilityLabel={buttonText}
+        accessibilityState={{ disabled }}
         style={[
           styles.button,
           {

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

@@ -49,7 +49,13 @@ export const OnboardingHeader = ({
         <View style={styles.headerButton} />
       )}
       {showSkipButton && skipButtonText ? (
-        <TouchableOpacity onPress={onSkip} activeOpacity={0.7}>
+        <TouchableOpacity
+          onPress={onSkip}
+          activeOpacity={0.7}
+          accessibilityRole="button"
+          accessibilityLabel={skipButtonText}
+          hitSlop={{ top: 10, bottom: 10, left: 10, right: 10 }}
+        >
           <AtomicText
             type="labelLarge"
             style={[styles.skipText, { color: colors.textColor }]}

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

@@ -16,7 +16,7 @@ export interface OnboardingSlideProps {
   variant?: "default" | "card" | "minimal" | "fullscreen";
 }
 
-export const OnboardingSlide = ({
+export const OnboardingSlide = React.memo(({
   slide,
   variant = "default",
 }: OnboardingSlideProps) => {
@@ -89,7 +89,7 @@ export const OnboardingSlide = ({
       )}
     </BaseSlide>
   );
-};
+});
 
 const styles = StyleSheet.create({
   iconBox: {

package/src/onboarding/presentation/components/questions/QuestionOptionItem.tsx

@@ -16,7 +16,7 @@ export interface QuestionOptionItemProps {
   colors: OnboardingColors;
 }
 
-export const QuestionOptionItem = ({
+export const QuestionOptionItem = React.memo(({
   option,
   isSelected,
   onPress,
@@ -36,6 +36,9 @@ export const QuestionOptionItem = ({
       ]}
       onPress={onPress}
       activeOpacity={0.8}
+      accessibilityRole="button"
+      accessibilityLabel={option.label}
+      accessibilityState={{ selected: isSelected }}
     >
       {option.icon && (
         <View style={[
@@ -83,7 +86,7 @@ export const QuestionOptionItem = ({
       </View>
     </TouchableOpacity>
   );
-};
+});
 
 const styles = StyleSheet.create({
   option: {

package/src/onboarding/presentation/components/questions/RatingQuestion.tsx

@@ -26,7 +26,16 @@ export const RatingQuestion = ({
         {Array.from({ length: max }).map((_, i) => {
           const isFilled = i < value;
           return (
-            <TouchableOpacity key={i} onPress={() => onChange(i + 1)} activeOpacity={0.8} style={styles.star}>
+            <TouchableOpacity
+                key={i}
+                onPress={() => onChange(i + 1)}
+                activeOpacity={0.8}
+                style={styles.star}
+                hitSlop={{ top: 8, bottom: 8, left: 8, right: 8 }}
+                accessibilityRole="button"
+                accessibilityLabel={`Rate ${i + 1} out of ${max}`}
+                accessibilityState={{ selected: isFilled }}
+              >
               <AtomicIcon
                 name={isFilled ? "star" : "star-outline"}
                 customSize={48}