@umituz/react-native-design-system 4.28.11 → 4.28.13

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@umituz/react-native-design-system",
-  "version": "4.28.11",
+  "version": "4.28.13",
   "description": "Universal design system for React Native apps with safe navigation hooks - updated SKILL.md with navigation documentation",
   "main": "./src/index.ts",
   "types": "./dist/index.d.ts",
@@ -178,15 +178,10 @@
     "build": "tsc --project tsconfig.build.json",
     "setup:skill": "node -e \"const fs = require('fs'); const path = require('path'); const skillDir = path.join(process.env.HOME, '.claude', 'skills', 'react-native-design-system'); fs.mkdirSync(skillDir, {recursive: true}); fs.copyFileSync(path.join(__dirname, 'skills/SKILL.md'), path.join(skillDir, 'SKILL.md')); console.log('✅ @umituz/react-native-design-system setup skill installed to Claude Code!');\""
   },
-  "dependencies": {
-    "@react-native-async-storage/async-storage": "^2.2.0",
-    "react-native-svg": "^15.12.1",
-    "rn-emoji-keyboard": "^1.7.0"
-  },
+  "dependencies": {},
   "optionalDependencies": {
     "@tanstack/query-async-storage-persister": "^5.0.0",
-    "@tanstack/react-query-persist-client": "^5.0.0",
-    "expo-image-manipulator": "~14.0.0"
+    "@tanstack/react-query-persist-client": "^5.0.0"
   },
   "keywords": [
     "react-native",
@@ -213,6 +208,7 @@
     "url": "https://github.com/umituz/react-native-design-system"
   },
   "peerDependencies": {
+    "@react-native-async-storage/async-storage": ">=2.0.0",
     "@react-native-community/datetimepicker": ">=8.0.0",
     "@react-navigation/bottom-tabs": ">=7.0.0",
     "@react-navigation/native": ">=7.0.0",
@@ -223,13 +219,17 @@
     "expo": ">=54.0.0",
     "expo-application": ">=5.0.0",
     "expo-clipboard": ">=8.0.0",
+    "expo-constants": ">=18.0.0",
     "expo-crypto": ">=13.0.0",
     "expo-device": ">=5.0.0",
+    "expo-file-system": ">=19.0.0",
     "expo-font": ">=12.0.0",
     "expo-haptics": ">=14.0.0",
     "expo-image": ">=3.0.0",
     "expo-image-manipulator": ">=14.0.0",
     "expo-image-picker": ">=14.0.0",
+    "expo-localization": ">=17.0.0",
+    "expo-media-library": ">=18.0.0",
     "expo-network": ">=8.0.0",
     "expo-secure-store": ">=14.0.0",
     "expo-sharing": ">=12.0.0",
@@ -238,9 +238,14 @@
     "react-native-gesture-handler": ">=2.20.0",
     "react-native-keyboard-controller": ">=1.0.0",
     "react-native-safe-area-context": ">=5.6.2",
+    "react-native-svg": ">=15.0.0",
+    "rn-emoji-keyboard": ">=1.0.0",
     "zustand": ">=5.0.0"
   },
   "peerDependenciesMeta": {
+    "@react-native-async-storage/async-storage": {
+      "optional": true
+    },
     "react-native-keyboard-controller": {
       "optional": true
     },
@@ -265,9 +270,15 @@
     "expo-clipboard": {
       "optional": true
     },
+    "expo-constants": {
+      "optional": true
+    },
     "expo-crypto": {
       "optional": true
     },
+    "expo-file-system": {
+      "optional": true
+    },
     "expo-font": {
       "optional": true
     },
@@ -283,6 +294,12 @@
     "expo-image-picker": {
       "optional": true
     },
+    "expo-localization": {
+      "optional": true
+    },
+    "expo-media-library": {
+      "optional": true
+    },
     "expo-network": {
       "optional": true
     },
@@ -292,6 +309,12 @@
     "expo-sharing": {
       "optional": true
     },
+    "react-native-svg": {
+      "optional": true
+    },
+    "rn-emoji-keyboard": {
+      "optional": true
+    },
     "@react-native-community/datetimepicker": {
       "optional": true
     }

package/src/atoms/AtomicAvatar.tsx

@@ -14,11 +14,37 @@
  * - Default user placeholders
  */
 
-import React from 'react';
+import React, { useMemo } from 'react';
 import { View, Image, StyleSheet, ViewStyle, ImageStyle, ImageSourcePropType } from 'react-native';
 import { AtomicText } from './AtomicText';
 import { useAppDesignTokens } from '../theme';
 
+// =============================================================================
+// UTILITY FUNCTIONS (moved outside component)
+// =============================================================================
+
+/**
+ * Generate initials from name
+ */
+const getInitials = (name: string): string => {
+  return name
+    .split(' ')
+    .map(word => word.charAt(0))
+    .join('')
+    .toUpperCase()
+    .slice(0, 2);
+};
+
+/**
+ * Calculate font size based on avatar size
+ */
+const getAvatarFontSize = (sizeValue: number, spacingMultiplier: number): number => {
+  const baseFontSize = sizeValue <= 32 ? 12 :
+                      sizeValue <= 48 ? 16 :
+                      sizeValue <= 64 ? 20 : 24;
+  return baseFontSize * spacingMultiplier;
+};
+
 // =============================================================================
 // TYPE DEFINITIONS
 // =============================================================================
@@ -70,49 +96,58 @@ export const AtomicAvatar: React.FC<AtomicAvatarProps> = React.memo(({
 }) => {
   const tokens = useAppDesignTokens();
 
-  const avatarSize = customSize ? customSize * tokens.spacingMultiplier : tokens.avatarSizes[size];
-  const avatarRadius = borderRadius ?? avatarSize / 2;
-
-  // Generate initials from name
-  const getInitials = (name: string): string => {
-    return name
-      .split(' ')
-      .map(word => word.charAt(0))
-      .join('')
-      .toUpperCase()
-      .slice(0, 2);
-  };
-
-  // Default colors
-  const defaultBackgroundColor = backgroundColor || tokens.colors.primary;
-  const defaultTextColor = textColor || tokens.colors.onPrimary;
-  const defaultBorderColor = borderColor || tokens.colors.border;
-
-  const avatarStyle: ViewStyle = {
+  const avatarSize = useMemo(() =>
+    customSize ? customSize * tokens.spacingMultiplier : tokens.avatarSizes[size],
+    [customSize, size, tokens.spacingMultiplier, tokens.avatarSizes]
+  );
+
+  const avatarRadius = useMemo(() =>
+    borderRadius ?? avatarSize / 2,
+    [borderRadius, avatarSize]
+  );
+
+  const defaultBackgroundColor = useMemo(() =>
+    backgroundColor || tokens.colors.primary,
+    [backgroundColor, tokens.colors.primary]
+  );
+
+  const defaultTextColor = useMemo(() =>
+    textColor || tokens.colors.onPrimary,
+    [textColor, tokens.colors.onPrimary]
+  );
+
+  const defaultBorderColor = useMemo(() =>
+    borderColor || tokens.colors.border,
+    [borderColor, tokens.colors.border]
+  );
+
+  const avatarStyle = useMemo<ViewStyle>(() => ({
     width: avatarSize,
     height: avatarSize,
     borderRadius: avatarRadius,
     backgroundColor: defaultBackgroundColor,
     borderWidth,
     borderColor: defaultBorderColor,
-    alignItems: 'center',
-    justifyContent: 'center',
+    alignItems: 'center' as const,
+    justifyContent: 'center' as const,
     overflow: 'hidden',
-  };
+  }), [avatarSize, avatarRadius, defaultBackgroundColor, borderWidth, defaultBorderColor]);
 
-  const imageStyleFinal: ImageStyle = {
+  const imageStyleFinal = useMemo<ImageStyle>(() => ({
     width: avatarSize,
     height: avatarSize,
     borderRadius: avatarRadius,
-  };
+  }), [avatarSize, avatarRadius]);
+
+  const avatarFontSize = useMemo(() =>
+    getAvatarFontSize(avatarSize, tokens.spacingMultiplier),
+    [avatarSize, tokens.spacingMultiplier]
+  );
 
-  // Font size based on avatar size (scaled)
-  const getAvatarFontSize = (sizeValue: number): number => {
-    const baseFontSize = sizeValue <= 32 ? 12 : 
-                        sizeValue <= 48 ? 16 : 
-                        sizeValue <= 64 ? 20 : 24;
-    return baseFontSize * tokens.spacingMultiplier;
-  };
+  const textStyle = useMemo(() => ({
+    fontSize: avatarFontSize,
+    fontWeight: tokens.typography.semibold,
+  }), [avatarFontSize, tokens.typography.semibold]);
 
   return (
     <View
@@ -131,10 +166,7 @@ export const AtomicAvatar: React.FC<AtomicAvatarProps> = React.memo(({
         <AtomicText
           type="labelLarge"
           color={defaultTextColor}
-          style={{
-            fontSize: getAvatarFontSize(avatarSize),
-            fontWeight: tokens.typography.semibold,
-          }}
+          style={textStyle}
         >
           {getInitials(name)}
         </AtomicText>
@@ -142,10 +174,7 @@ export const AtomicAvatar: React.FC<AtomicAvatarProps> = React.memo(({
         <AtomicText
           type="labelLarge"
           color={defaultTextColor}
-          style={{
-            fontSize: getAvatarFontSize(avatarSize),
-            fontWeight: tokens.typography.semibold,
-          }}
+          style={textStyle}
         >
           ?
         </AtomicText>

package/src/atoms/AtomicDatePicker.tsx

@@ -11,7 +11,7 @@
  * @module AtomicDatePicker
  */
 
-import React, { useState } from 'react';
+import React, { useState, useCallback, useMemo } from 'react';
 import {
   View,
   Platform,
@@ -82,7 +82,7 @@ export const AtomicDatePicker: React.FC<AtomicDatePickerProps> = ({
   const tokens = useAppDesignTokens();
   const [showPicker, setShowPicker] = useState(false);
 
-  const handleChange = (event: DateTimePickerEvent, selectedDate?: Date) => {
+  const handleChange = useCallback((event: DateTimePickerEvent, selectedDate?: Date) => {
     if (Platform.OS === 'android') {
       setShowPicker(false);
       if (event.type === 'set' && selectedDate) {
@@ -96,9 +96,9 @@ export const AtomicDatePicker: React.FC<AtomicDatePickerProps> = ({
         setShowPicker(false);
       }
     }
-  };
+  }, [onChange]);
 
-  const handleOpen = () => {
+  const handleOpen = useCallback(() => {
     if (!DateTimePicker) {
       console.warn(
         '[AtomicDatePicker] @react-native-community/datetimepicker is not installed. ' +
@@ -107,10 +107,10 @@ export const AtomicDatePicker: React.FC<AtomicDatePickerProps> = ({
       return;
     }
     setShowPicker(true);
-  };
+  }, [DateTimePicker]);
 
   const { displayText } = useDatePickerText({ value, placeholder, mode });
-  const styles = getDatePickerStyles(tokens);
+  const styles = useMemo(() => getDatePickerStyles(tokens), [tokens]);
 
   return (
     <View style={[styles.container, style]} testID={testID}>

package/src/atoms/AtomicSpinner.tsx

@@ -13,7 +13,7 @@
  * - Async operation feedback
  */
 
-import React from 'react';
+import React, { useMemo } from 'react';
 import { View, ActivityIndicator, StyleSheet, ViewStyle } from 'react-native';
 import { useAppDesignTokens } from '../theme';
 import { AtomicText } from './AtomicText';
@@ -84,13 +84,13 @@ export const AtomicSpinner: React.FC<AtomicSpinnerProps> = ({
   // Resolve size (scaled)
   const baseSize = typeof size === 'number' ? size : SIZE_MAP[size];
   const resolvedSize = baseSize * tokens.spacingMultiplier;
-  
+
   const activitySize = typeof size === 'number'
     ? (size >= 30 ? 'large' : 'small')
     : ACTIVITY_SIZE_MAP[size];
 
-  // Resolve color
-  const resolveColor = (): string => {
+  // Resolve color (memoized)
+  const spinnerColor = useMemo(() => {
     if (color.startsWith('#') || color.startsWith('rgb')) {
       return color;
     }
@@ -103,26 +103,34 @@ export const AtomicSpinner: React.FC<AtomicSpinnerProps> = ({
       white: '#FFFFFF',
     };
     return colorMap[color as SpinnerColor] || tokens.colors.primary;
-  };
+  }, [color, tokens.colors.primary, tokens.colors.secondary, tokens.colors.success, tokens.colors.error, tokens.colors.warning]);
 
-  const spinnerColor = resolveColor();
   const resolvedOverlayColor = overlayColor || 'rgba(0, 0, 0, 0.5)';
 
-  // Container styles
-  const containerStyles: ViewStyle[] = [
+  // Container styles (memoized)
+  const containerStyles = useMemo<ViewStyle[]>(() => [
     styles.container,
-    textPosition === 'right' && { flexDirection: 'row' },
+    textPosition === 'right' && { flexDirection: 'row' as const },
     fullContainer && styles.fullContainer,
     overlay && [styles.overlay, { backgroundColor: resolvedOverlayColor }],
-  ].filter(Boolean) as ViewStyle[];
+  ].filter(Boolean) as ViewStyle[], [textPosition, fullContainer, overlay, resolvedOverlayColor]);
 
-  // Spinner wrapper styles
-  const spinnerWrapperStyles: ViewStyle = {
+  // Spinner wrapper styles (memoized)
+  const spinnerWrapperStyles = useMemo<ViewStyle>(() => ({
     width: resolvedSize,
     height: resolvedSize,
-    justifyContent: 'center',
-    alignItems: 'center',
-  };
+    justifyContent: 'center' as const,
+    alignItems: 'center' as const,
+  }), [resolvedSize]);
+
+  // Text style (memoized)
+  const textStyle = useMemo(() => [
+    styles.text,
+    textPosition === 'right'
+      ? { marginLeft: 12 * tokens.spacingMultiplier }
+      : { marginTop: 12 * tokens.spacingMultiplier },
+    { color: overlay ? '#FFFFFF' : tokens.colors.textSecondary },
+  ], [textPosition, overlay, tokens.spacingMultiplier, tokens.colors.textSecondary]);
 
   return (
     <View
@@ -142,13 +150,7 @@ export const AtomicSpinner: React.FC<AtomicSpinnerProps> = ({
       {text && (
         <AtomicText
           type="bodyMedium"
-          style={[
-            styles.text,
-            textPosition === 'right' 
-              ? { marginLeft: 12 * tokens.spacingMultiplier }
-              : { marginTop: 12 * tokens.spacingMultiplier },
-            { color: overlay ? '#FFFFFF' : tokens.colors.textSecondary },
-          ]}
+          style={textStyle}
         >
           {text}
         </AtomicText>

package/src/atoms/AtomicText.tsx

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { useMemo } from 'react';
 import { Text, type StyleProp, type TextStyle, type TextProps } from 'react-native';
 import { useAppDesignTokens } from '../theme';
 import { getTextColor, type TextStyleVariant, type ColorVariant } from '../typography';
@@ -36,12 +36,13 @@ export interface AtomicTextProps extends Omit<TextProps, 'style'> {
 
 /**
  * AtomicText - Primitive Text Component
- * 
+ *
  * ✅ Responsive by default
  * ✅ Theme-aware
+ * ✅ Memoized for performance
  * ✅ SOLID, DRY, KISS
  */
-export const AtomicText = ({
+export const AtomicText = React.memo(({
   type = 'bodyMedium',
   color = 'textPrimary',
   align,
@@ -55,29 +56,31 @@ export const AtomicText = ({
 }: AtomicTextProps) => {
   const tokens = useAppDesignTokens();
 
-  // Get typography style from tokens
-  const typographyStyle = tokens.typography[type] as TextStyle & { responsiveFontSize?: number };
-
-  // Use responsive font size if available
-  const fontSize = typographyStyle?.responsiveFontSize || typographyStyle?.fontSize;
-
-  // Resolve color
-  const resolvedColor = typeof color === 'string' && !color.includes('.')
-    ? getTextColor(color as ColorVariant, tokens)
-    : color;
-
-  const textStyle: StyleProp<TextStyle> = [
-    typographyStyle,
-    {
-      color: resolvedColor as string,
-      ...(fontSize && { fontSize }),
-      ...(align && { textAlign: align }),
-      ...(fontWeight && { fontWeight }),
-      ...(marginTop && { marginTop: tokens.spacing[marginTop] as number }),
-      ...(marginBottom && { marginBottom: tokens.spacing[marginBottom] as number }),
-    },
-    style,
-  ];
+  const textStyle = useMemo<StyleProp<TextStyle>>(() => {
+    // Get typography style from tokens
+    const typographyStyle = tokens.typography[type] as TextStyle & { responsiveFontSize?: number };
+
+    // Use responsive font size if available
+    const fontSize = typographyStyle?.responsiveFontSize || typographyStyle?.fontSize;
+
+    // Resolve color
+    const resolvedColor = typeof color === 'string' && !color.includes('.')
+      ? getTextColor(color as ColorVariant, tokens)
+      : color;
+
+    return [
+      typographyStyle,
+      {
+        color: resolvedColor as string,
+        ...(fontSize && { fontSize }),
+        ...(align && { textAlign: align }),
+        ...(fontWeight && { fontWeight }),
+        ...(marginTop && { marginTop: tokens.spacing[marginTop] as number }),
+        ...(marginBottom && { marginBottom: tokens.spacing[marginBottom] as number }),
+      },
+      style,
+    ];
+  }, [tokens, type, color, align, fontWeight, marginTop, marginBottom, style]);
 
   return (
     <Text
@@ -88,4 +91,6 @@ export const AtomicText = ({
       {children}
     </Text>
   );
-};
+});
+
+AtomicText.displayName = 'AtomicText';

package/src/atoms/AtomicTextArea.tsx

@@ -1,4 +1,4 @@
-import React, { forwardRef } from 'react';
+import React, { forwardRef, useMemo } from 'react';
 import { View, TextInput, StyleSheet, type ViewStyle, type StyleProp, type TextStyle } from 'react-native';
 import { useAppDesignTokens } from '../theme';
 import { AtomicText } from './AtomicText';
@@ -68,6 +68,21 @@ export const AtomicTextArea = forwardRef<React.ElementRef<typeof TextInput>, Ato
   const tokens = useAppDesignTokens();
   const hasError = !!errorText;
 
+  const textInputStyle = useMemo<StyleProp<TextStyle>>(() => [
+    styles.input,
+    {
+      backgroundColor: tokens.colors.surface,
+      borderColor: hasError ? tokens.colors.error : tokens.colors.border,
+      color: tokens.colors.textPrimary,
+      minHeight: calculatedMinHeight,
+      padding: tokens.spacing.md,
+      borderRadius: tokens.borderRadius.md,
+      fontSize: 16,
+    },
+    inputStyle,
+    disabled && { opacity: 0.5 },
+  ], [tokens, hasError, calculatedMinHeight, inputStyle, disabled]);
+
   return (
     <View style={[styles.container, style]} testID={testID}>
       {label && (
@@ -93,20 +108,7 @@ export const AtomicTextArea = forwardRef<React.ElementRef<typeof TextInput>, Ato
         onSubmitEditing={onSubmitEditing}
         blurOnSubmit={blurOnSubmit}
         textAlignVertical="top"
-        style={[
-          styles.input,
-          {
-            backgroundColor: tokens.colors.surface,
-            borderColor: hasError ? tokens.colors.error : tokens.colors.border,
-            color: tokens.colors.textPrimary,
-            minHeight: calculatedMinHeight,
-            padding: tokens.spacing.md,
-            borderRadius: tokens.borderRadius.md,
-            fontSize: 16,
-          },
-          inputStyle,
-          disabled && { opacity: 0.5 },
-        ]}
+        style={textInputStyle}
       />
       {(helperText || errorText) && (
         <View style={styles.helperRow}>

package/src/atoms/EmptyState.tsx

@@ -43,49 +43,55 @@ export const EmptyState: React.FC<EmptyStateProps> = ({
   const spacingMultiplier = tokens.spacingMultiplier;
 
   const themedStyles = useMemo(
-    () =>
-      StyleSheet.create({
-        container: {
-          flex: 1,
-          alignItems: 'flex-start',
-          justifyContent: 'flex-start',
-          padding: tokens.spacing.xl,
-        },
-        iconContainer: {
-          width: calculateResponsiveSize(EMPTY_STATE_ICON.width, spacingMultiplier),
-          height: calculateResponsiveSize(EMPTY_STATE_ICON.height, spacingMultiplier),
-          borderRadius: calculateResponsiveSize(EMPTY_STATE_ICON.borderRadius, spacingMultiplier),
-          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,
-        },
-      }),
+    () => ({
+      container: {
+        flex: 1,
+        alignItems: 'flex-start' as const,
+        justifyContent: 'flex-start' as const,
+        padding: tokens.spacing.xl,
+      },
+      iconContainer: {
+        width: calculateResponsiveSize(EMPTY_STATE_ICON.width, spacingMultiplier),
+        height: calculateResponsiveSize(EMPTY_STATE_ICON.height, spacingMultiplier),
+        borderRadius: calculateResponsiveSize(EMPTY_STATE_ICON.borderRadius, spacingMultiplier),
+        alignItems: 'flex-start' as const,
+        justifyContent: 'flex-start' as const,
+        marginBottom: tokens.spacing.lg,
+      },
+      title: {
+        marginBottom: tokens.spacing.sm,
+        textAlign: 'left' as const,
+      },
+      description: {
+        marginBottom: tokens.spacing.lg,
+        textAlign: 'left' as const,
+      },
+      actionButton: {
+        paddingHorizontal: tokens.spacing.lg,
+        paddingVertical: tokens.spacing.md,
+        borderRadius: tokens.borders.radius.md,
+        marginTop: tokens.spacing.sm,
+      },
+    }),
     [tokens, spacingMultiplier],
   );
 
+  const iconContainerStyle = useMemo(() => [
+    themedStyles.iconContainer,
+    { backgroundColor: tokens.colors.surface },
+  ], [themedStyles.iconContainer, tokens.colors.surface]);
+
+  const actionButtonStyle = useMemo(() => [
+    themedStyles.actionButton,
+    { backgroundColor: tokens.colors.primary },
+  ], [themedStyles.actionButton, tokens.colors.primary]);
+
   return (
     <View style={[themedStyles.container, style]} testID={testID}>
       {illustration ? (
         illustration
       ) : (
-        <View
-          style={[
-            themedStyles.iconContainer,
-            { backgroundColor: tokens.colors.surface },
-          ]}
-        >
+        <View style={iconContainerStyle}>
           <AtomicIcon name={icon} size="xxl" color="secondary" />
         </View>
       )}
@@ -93,7 +99,7 @@ export const EmptyState: React.FC<EmptyStateProps> = ({
       <AtomicText
         type="headlineSmall"
         color="primary"
-        style={[themedStyles.title, { textAlign: 'left' }]}
+        style={themedStyles.title}
       >
         {title}
       </AtomicText>
@@ -102,7 +108,7 @@ export const EmptyState: React.FC<EmptyStateProps> = ({
         <AtomicText
           type="bodyMedium"
           color="secondary"
-          style={[themedStyles.description, { textAlign: 'left' }]}
+          style={themedStyles.description}
         >
           {displayDescription}
         </AtomicText>
@@ -110,10 +116,7 @@ export const EmptyState: React.FC<EmptyStateProps> = ({
 
       {actionLabel && onAction && (
         <TouchableOpacity
-          style={[
-            themedStyles.actionButton,
-            { backgroundColor: tokens.colors.primary },
-          ]}
+          style={actionButtonStyle}
           onPress={onAction}
           activeOpacity={0.8}
         >