@umituz/react-native-design-system 4.23.79 → 4.23.81

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@umituz/react-native-design-system",
-  "version": "4.23.79",
+  "version": "4.23.81",
   "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",
@@ -38,6 +38,12 @@
     "version:minor": "npm version minor -m 'chore: release v%s'",
     "version:major": "npm version major -m 'chore: release v%s'"
   },
+  "dependencies": {
+    "@react-native-async-storage/async-storage": "^2.2.0",
+    "@react-native-community/datetimepicker": "^8.6.0",
+    "react-native-svg": "^15.12.1",
+    "rn-emoji-keyboard": "^1.7.0"
+  },
   "keywords": [
     "react-native",
     "design-system",
@@ -64,8 +70,6 @@
   },
   "peerDependencies": {
     "expo": ">=54.0.0",
-    "@react-native-async-storage/async-storage": ">=1.18.0",
-    "@react-native-community/datetimepicker": ">=8.0.0",
     "@react-navigation/bottom-tabs": ">=7.0.0",
     "@react-navigation/native": ">=7.0.0",
     "@react-navigation/stack": ">=7.0.0",
@@ -86,11 +90,9 @@
     "expo-sharing": ">=12.0.0",
     "expo-video": ">=3.0.0",
     "react": ">=19.0.0",
-    "react-native": "0.81.5",
+    "react-native": "0.81.4",
     "react-native-gesture-handler": ">=2.20.0",
-    "react-native-safe-area-context": ">=5.0.0",
-    "react-native-svg": ">=15.0.0",
-    "rn-emoji-keyboard": ">=1.7.0",
+    "react-native-safe-area-context": ">=5.6.2",
     "zustand": ">=5.0.0"
   },
   "peerDependenciesMeta": {
@@ -141,7 +143,7 @@
     "expo-sharing": "~14.0.8",
     "expo-video": "~3.0.15",
     "react": "19.1.0",
-    "react-native": "0.81.5",
+    "react-native": "0.81.4",
     "react-native-gesture-handler": "^2.20.0",
     "react-native-safe-area-context": "^5.6.0",
     "react-native-svg": "15.12.1",

package/src/atoms/AtomicInput.tsx

@@ -9,18 +9,6 @@ import { InputLabel } from './input/components/InputLabel';
 import { InputIcon } from './input/components/InputIcon';
 import { InputHelper } from './input/components/InputHelper';
 
-/**
- * AtomicInput - Pure React Native Text Input
- *
- * Features:
- * - Pure React Native implementation (no Paper dependency)
- * - Icon support via AtomicIcon (app provides renderer)
- * - Outlined/filled/flat variants
- * - Error, success, disabled states
- * - Character counter
- * - Responsive sizing
- * - Full accessibility support
- */
 export const AtomicInput = React.forwardRef<React.ElementRef<typeof TextInput>, AtomicInputProps>(({
   variant = 'outlined',
   state = 'default',
@@ -79,22 +67,10 @@ export const AtomicInput = React.forwardRef<React.ElementRef<typeof TextInput>,
   const hasSuccess = state === 'success';
 
   const sizeConfig = getSizeConfig({ size, tokens });
-  const variantStyle = getVariantStyle({
-    variant,
-    isFocused,
-    hasError,
-    hasSuccess,
-    isDisabled,
-    tokens,
-  });
-  const textColor = getTextColor({
-    isDisabled,
-    hasError,
-    hasSuccess,
-    tokens,
-  });
-
+  const variantStyle = getVariantStyle({ variant, isFocused, hasError, hasSuccess, isDisabled, tokens });
+  const textColor = getTextColor({ isDisabled, hasError, hasSuccess, tokens });
   const iconColor = isDisabled ? tokens.colors.textDisabled : tokens.colors.textSecondary;
+  const iconPadding = sizeConfig.iconSize + 8;
 
   const containerStyle: StyleProp<ViewStyle> = [
     inputStyles.container,
@@ -117,9 +93,9 @@ export const AtomicInput = React.forwardRef<React.ElementRef<typeof TextInput>,
       lineHeight: (sizeConfig.fontSize || 16) * 1.2,
       color: textColor,
       paddingVertical: 4,
+      paddingLeft: leadingIcon ? iconPadding : undefined,
+      paddingRight: (trailingIcon || showPasswordToggle) ? iconPadding : undefined,
     },
-    leadingIcon ? { paddingLeft: sizeConfig.iconSize + 8 } : undefined,
-    (trailingIcon || showPasswordToggle) ? { paddingRight: sizeConfig.iconSize + 8 } : undefined,
     inputStyle,
   ];
 
@@ -128,14 +104,7 @@ export const AtomicInput = React.forwardRef<React.ElementRef<typeof TextInput>,
       <InputLabel label={label} state={state} />
 
       <View style={containerStyle}>
-        {leadingIcon && (
-          <InputIcon
-            name={leadingIcon }
-            size={sizeConfig.iconSize}
-            color={iconColor}
-            position="leading"
-          />
-        )}
+        {leadingIcon && <InputIcon name={leadingIcon} size={sizeConfig.iconSize} color={iconColor} position="leading" />}
 
         <TextInput
           ref={ref}
@@ -158,31 +127,25 @@ export const AtomicInput = React.forwardRef<React.ElementRef<typeof TextInput>,
           numberOfLines={numberOfLines}
           textContentType={textContentType}
           style={textInputStyle}
-          onBlur={() => {
-            setIsFocused(false);
-            onBlur?.();
-          }}
-          onFocus={() => {
-            setIsFocused(true);
-            onFocus?.();
-          }}
+          onBlur={() => { setIsFocused(false); onBlur?.(); }}
+          onFocus={() => { setIsFocused(true); onFocus?.(); }}
           testID={testID ? `${testID}-input` : undefined}
         />
 
-        {(showPasswordToggle && secureTextEntry) && (
+        {showPasswordToggle && secureTextEntry && (
           <InputIcon
             name={isPasswordVisible ? "eye-off-outline" : "eye-outline"}
             size={sizeConfig.iconSize}
             color={iconColor}
             position="trailing"
-            onPress={() => togglePasswordVisibility()}
+            onPress={togglePasswordVisibility}
             testID={testID ? `${testID}-toggle-password` : undefined}
           />
         )}
 
         {trailingIcon && !showPasswordToggle && (
           <InputIcon
-            name={trailingIcon }
+            name={trailingIcon}
             size={sizeConfig.iconSize}
             color={iconColor}
             position="trailing"

package/src/atoms/AtomicPicker.tsx

@@ -2,53 +2,12 @@
  * AtomicPicker Component
  *
  * A reusable option picker/dropdown component for selecting from a list of options.
- *
- * Features:
- * - Single and multi-select support
- * - Modal display mode (full-screen on mobile)
- * - Optional search/filter capability
- * - Error and disabled states
- * - Theme-aware styling
- * - Icons for options
- * - Clearable selection
- * - react-hook-form integration ready
- *
- * Architecture:
- * - Follows AtomicButton pattern with separated types and styles
- * - Uses helper functions from picker/styles/pickerStyles.ts
- * - Types defined in picker/types/index.ts
- * - Zero inline StyleSheet.create()
- *
- * Usage:
- * ```tsx
- * const [partyType, setPartyType] = useState('birthday');
- *
- * <AtomicPicker
- *   value={partyType}
- *   onChange={setPartyType}
- *   options={[
- *     { label: 'Birthday Party', value: 'birthday', icon: 'cake' },
- *     { label: 'Wedding', value: 'wedding', icon: 'heart' },
- *     { label: 'Corporate Event', value: 'corporate', icon: 'briefcase' },
- *   ]}
- *   label="Party Type"
- *   placeholder="Select party type"
- *   searchable
- * />
- * ```
- *
- * @module AtomicPicker
  */
 
 import React from 'react';
-import {
-  View,
-  TouchableOpacity,
-  StyleSheet,
-} from 'react-native';
+import { View, TouchableOpacity, StyleSheet } from 'react-native';
 import { useAppDesignTokens } from '../theme';
 import { AtomicPickerProps } from './picker/types';
-
 import { AtomicText } from './AtomicText';
 import { PickerModal } from './picker/components/PickerModal';
 import { PickerChips } from './picker/components/PickerChips';
@@ -64,12 +23,6 @@ import { usePickerState } from './picker/hooks/usePickerState';
 
 export type { AtomicPickerProps, PickerOption, PickerSize } from './picker/types';
 
-/**
- * AtomicPicker - Universal option picker component
- *
- * Displays a button that opens a modal for selection.
- * Supports single/multi-select, search, and custom rendering.
- */
 export const AtomicPicker: React.FC<AtomicPickerProps> = ({
   value,
   onChange,
@@ -93,70 +46,45 @@ export const AtomicPicker: React.FC<AtomicPickerProps> = ({
   testID,
 }) => {
   const tokens = useAppDesignTokens();
+  const pickerState = usePickerState({ value, multiple, options, placeholder, autoClose, onChange });
 
-  const pickerState = usePickerState({
-    value,
-    multiple,
-    options,
-    placeholder,
-    autoClose,
-    onChange,
-  });
-
-  // Get style helpers with design tokens
   const containerStyles = getPickerContainerStyles(tokens);
   const labelStyles = getPickerLabelStyles(tokens);
   const placeholderStyles = getPickerPlaceholderStyles(tokens);
   const valueStyles = getPickerValueStyles(tokens);
   const errorStyles = getPickerErrorStyles(tokens);
 
-  const pickerContainerStyle = StyleSheet.flatten([
-    containerStyles.base,
-    containerStyles.size[size],
-    error ? containerStyles.state.error : undefined,
-    disabled ? containerStyles.state.disabled : undefined,
-    style,
-  ]);
-
-  const pickerLabelStyle = StyleSheet.flatten([
-    labelStyles.base,
-    labelStyles.size[size],
-    labelStyle,
-  ]);
-
-  const pickerValueStyle = StyleSheet.flatten([
-    pickerState.selectedOptions.length > 0 ? valueStyles.base : placeholderStyles.base,
-    pickerState.selectedOptions.length > 0
-      ? valueStyles.size[size]
-      : placeholderStyles.size[size],
-  ]);
-
-  const handleOpenModal = () => {
-    if (disabled) return;
-    pickerState.openModal();
-  };
+  const hasSelection = pickerState.selectedOptions.length > 0;
 
   return (
     <View>
-      {/* Label */}
-      {label && <AtomicText style={pickerLabelStyle}>{label}</AtomicText>}
+      {label && <AtomicText style={StyleSheet.flatten([labelStyles.base, labelStyles.size[size], labelStyle])}>{label}</AtomicText>}
 
-      {/* Picker Button */}
       <TouchableOpacity
-        onPress={handleOpenModal}
+        onPress={() => !disabled && pickerState.openModal()}
         disabled={disabled}
         accessibilityRole="button"
         accessibilityLabel={label || placeholder}
         accessibilityState={{ disabled }}
         testID={testID}
-        style={pickerContainerStyle}
+        style={StyleSheet.flatten([
+          containerStyles.base,
+          containerStyles.size[size],
+          error && containerStyles.state.error,
+          disabled && containerStyles.state.disabled,
+          style,
+        ])}
       >
-        {/* Display Text */}
-        <AtomicText style={pickerValueStyle} numberOfLines={1}>
+        <AtomicText
+          style={StyleSheet.flatten([
+            hasSelection ? valueStyles.base : placeholderStyles.base,
+            hasSelection ? valueStyles.size[size] : placeholderStyles.size[size],
+          ])}
+          numberOfLines={1}
+        >
           {pickerState.displayText}
         </AtomicText>
 
-        {/* Icons */}
         <PickerIcons
           clearable={clearable}
           disabled={disabled}
@@ -168,17 +96,14 @@ export const AtomicPicker: React.FC<AtomicPickerProps> = ({
         />
       </TouchableOpacity>
 
-      {/* Selected Chips (Multi-select) */}
       <PickerChips
         selectedOptions={pickerState.selectedOptions}
         onRemoveChip={pickerState.handleChipRemove}
         testID={testID}
       />
 
-      {/* Error Message */}
       {error && <AtomicText style={errorStyles}>{error}</AtomicText>}
 
-      {/* Selection Modal */}
       <PickerModal
         visible={pickerState.modalVisible}
         onClose={pickerState.closeModal}

package/src/atoms/EmptyState.tsx

@@ -7,7 +7,7 @@
  * Purpose: Empty state indication across all apps
  */
 
-import React, { useState, useEffect, useCallback, useMemo, useRef, useContext } from 'react';
+import React, { useMemo } from 'react';
 import { View, StyleSheet, TouchableOpacity, ViewStyle } from 'react-native';
 import { AtomicIcon } from './icon';
 import { AtomicText } from './AtomicText';

package/src/atoms/icon/AtomicIcon.tsx

@@ -122,7 +122,6 @@ export const AtomicIcon: React.FC<AtomicIconProps> = React.memo(
     // No icon renderer provided - warn in dev and render nothing
     if (!iconRenderer) {
       if (__DEV__) {
-        console.warn(
           '[DesignSystem] AtomicIcon requires an iconRenderer in DesignSystemProvider.\n' +
             'Example:\n' +
             '<DesignSystemProvider\n' +

package/src/atoms/icon/iconStore.ts

@@ -75,7 +75,6 @@ export const useIconStore = create<IconStore>((set) => ({
     if (__DEV__) {
       const missingKeys = REQUIRED_ICON_KEYS.filter(key => !iconNames[key]);
       if (missingKeys.length > 0) {
-        console.error(
           `[DesignSystem] Missing icon names: ${missingKeys.join(', ')}`
         );
       }
@@ -101,7 +100,6 @@ export const useIconName = (key: keyof IconNames): string => {
 
   if (!iconNames) {
     if (__DEV__) {
-      console.warn(
         `[DesignSystem] useIconName("${key}") - iconNames not configured.`
       );
     }

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

@@ -1,16 +1,9 @@
 /**
  * PickerModal - Selection modal for AtomicPicker
- * Handles search, filtering, and option selection.
  */
 
 import React from 'react';
-import {
-  View,
-  Modal,
-  FlatList,
-  TextInput,
-  TouchableOpacity,
-} from 'react-native';
+import { View, Modal, FlatList, TextInput, TouchableOpacity } from 'react-native';
 import { useSafeAreaInsets } from '../../../safe-area';
 import { useAppDesignTokens } from '../../../theme';
 import { PickerOption } from '../types';
@@ -42,9 +35,9 @@ interface PickerModalProps {
   onSearchChange: (query: string) => void;
   filteredOptions: PickerOption[];
   multiple?: boolean;
-  emptyMessage?: string; // Translated string
-  searchPlaceholder?: string; // Translated string
-  closeAccessibilityLabel?: string; // Translated string
+  emptyMessage?: string;
+  searchPlaceholder?: string;
+  closeAccessibilityLabel?: string;
   testID?: string;
 }
 
@@ -65,145 +58,71 @@ export const PickerModal: React.FC<PickerModalProps> = React.memo(({
 }) => {
   const tokens = useAppDesignTokens();
   const insets = useSafeAreaInsets();
-  const checkCircleIcon = useIconName('checkCircle');
-  const searchIcon = useIconName('search');
-  const closeIcon = useIconName('close');
-  const infoIcon = useIconName('info');
-
-  const modalOverlayStyles = getModalOverlayStyles();
-  const modalContainerStyles = getModalContainerStyles(tokens, 0);
-  const modalHeaderStyles = getModalHeaderStyles(tokens);
-  const modalTitleStyles = getModalTitleStyles(tokens);
-  const searchContainerStyles = getSearchContainerStyles(tokens);
-  const searchInputStyles = getSearchInputStyles(tokens);
-  const emptyStateStyles = getEmptyStateStyles(tokens);
-  const emptyStateTextStyles = getEmptyStateTextStyles(tokens);
-
-  const safeSelectedValues = selectedValues ?? [];
+  const icons = { checkCircle: useIconName('checkCircle'), search: useIconName('search'), close: useIconName('close'), info: useIconName('info') };
 
-  const isSelected = (optionValue: string): boolean => {
-    return safeSelectedValues.includes(optionValue);
+  const styles = {
+    overlay: getModalOverlayStyles(),
+    container: getModalContainerStyles(tokens, 0),
+    header: getModalHeaderStyles(tokens),
+    title: getModalTitleStyles(tokens),
+    search: getSearchContainerStyles(tokens),
+    searchInput: getSearchInputStyles(tokens),
+    empty: getEmptyStateStyles(tokens),
+    emptyText: getEmptyStateTextStyles(tokens),
   };
 
+  const isSelected = (value: string) => selectedValues?.includes(value) ?? false;
+
   const renderOption = ({ item }: { item: PickerOption }) => {
     const selected = isSelected(item.value);
-    const itemDisabled = item.disabled || false;
-
-    const optionContainerStyle = getOptionContainerStyles(
-      tokens,
-      selected,
-      itemDisabled
-    );
-    const optionTextStyle = getOptionTextStyles(tokens, selected);
-    const optionDescriptionStyle = getOptionDescriptionStyles(tokens);
+    const disabled = item.disabled || false;
 
     return (
       <TouchableOpacity
-        onPress={() => !itemDisabled && onSelect(item.value)}
-        disabled={itemDisabled}
+        onPress={() => !disabled && onSelect(item.value)}
+        disabled={disabled}
         testID={item.testID || `${testID}-option-${item.value}`}
-        style={optionContainerStyle}
+        style={getOptionContainerStyles(tokens, selected, disabled)}
       >
-        {/* Option Icon */}
-        {item.icon && (
-          <AtomicIcon
-            name={item.icon}
-            size="md"
-            color={selected ? 'primary' : 'secondary'}
-          />
-        )}
-
-        {/* Option Content */}
+        {item.icon && <AtomicIcon name={item.icon} size="md" color={selected ? 'primary' : 'secondary'} />}
         <View style={{ flex: 1 }}>
-          <AtomicText style={optionTextStyle}>{item.label}</AtomicText>
-          {item.description && (
-            <AtomicText style={optionDescriptionStyle}>
-              {item.description}
-            </AtomicText>
-          )}
+          <AtomicText style={getOptionTextStyles(tokens, selected)}>{item.label}</AtomicText>
+          {item.description && <AtomicText style={getOptionDescriptionStyles(tokens)}>{item.description}</AtomicText>}
         </View>
-
-        {/* Selected Indicator */}
-        {selected && (
-          <AtomicIcon name={checkCircleIcon} size="md" color="primary" />
-        )}
+        {selected && <AtomicIcon name={icons.checkCircle} size="md" color="primary" />}
       </TouchableOpacity>
     );
   };
 
   return (
-    <Modal
-      visible={visible}
-      animationType="none"
-      transparent
-      onRequestClose={onClose}
-      testID={`${testID}-modal`}
-    >
-      <View style={modalOverlayStyles}>
-        <View
-          style={[
-            modalContainerStyles,
-            { paddingBottom: insets.bottom + tokens.spacing.md },
-          ]}
-        >
-          {/* Modal Header */}
-          <View style={modalHeaderStyles}>
-            {/* Title */}
-            <AtomicText style={modalTitleStyles}>
-              {title || 'Select'}
-            </AtomicText>
-
-            {/* Close Button */}
-            <TouchableOpacity
-              onPress={onClose}
-              hitSlop={{ top: 8, bottom: 8, left: 8, right: 8 }}
-              accessibilityRole="button"
-              accessibilityLabel={closeAccessibilityLabel}
-              testID={`${testID}-close`}
-            >
-              <AtomicIcon name={closeIcon} size="md" color="primary" />
+    <Modal visible={visible} animationType="none" transparent onRequestClose={onClose} testID={`${testID}-modal`}>
+      <View style={styles.overlay}>
+        <View style={[styles.container, { paddingBottom: insets.bottom + tokens.spacing.md }]}>
+          <View style={styles.header}>
+            <AtomicText style={styles.title}>{title || 'Select'}</AtomicText>
+            <TouchableOpacity onPress={onClose} hitSlop={{ top: 8, bottom: 8, left: 8, right: 8 }} accessibilityRole="button" accessibilityLabel={closeAccessibilityLabel} testID={`${testID}-close`}>
+              <AtomicIcon name={icons.close} size="md" color="primary" />
             </TouchableOpacity>
           </View>
 
-          {/* Search Bar */}
           {searchable && (
-            <View style={searchContainerStyles}>
-              <AtomicIcon name={searchIcon} size="sm" color="secondary" />
-              <TextInput
-                value={searchQuery}
-                onChangeText={onSearchChange}
-                placeholder={searchPlaceholder}
-                placeholderTextColor={tokens.colors.textSecondary}
-                style={searchInputStyles}
-                testID={`${testID}-search`}
-              />
-              {searchQuery.length > 0 && (
-                <TouchableOpacity onPress={() => onSearchChange('')}>
-                  <AtomicIcon name={closeIcon} size="sm" color="secondary" />
-                </TouchableOpacity>
-              )}
+            <View style={styles.search}>
+              <AtomicIcon name={icons.search} size="sm" color="secondary" />
+              <TextInput value={searchQuery} onChangeText={onSearchChange} placeholder={searchPlaceholder} placeholderTextColor={tokens.colors.textSecondary} style={styles.searchInput} testID={`${testID}-search`} />
+              {searchQuery.length > 0 && <TouchableOpacity onPress={() => onSearchChange('')}><AtomicIcon name={icons.close} size="sm" color="secondary" /></TouchableOpacity>}
             </View>
           )}
 
-          {/* Options List */}
           {filteredOptions.length > 0 ? (
-            <FlatList
-              data={filteredOptions}
-              keyExtractor={(item: PickerOption) => item.value}
-              renderItem={renderOption}
-              showsVerticalScrollIndicator
-              testID={`${testID}-list`}
-            />
+            <FlatList data={filteredOptions} keyExtractor={(item: PickerOption) => item.value} renderItem={renderOption} showsVerticalScrollIndicator testID={`${testID}-list`} />
           ) : (
-            <View style={emptyStateStyles}>
-              <AtomicIcon name={infoIcon} size="xl" color="secondary" />
-              <AtomicText style={emptyStateTextStyles}>
-                {emptyMessage}
-              </AtomicText>
+            <View style={styles.empty}>
+              <AtomicIcon name={icons.info} size="xl" color="secondary" />
+              <AtomicText style={styles.emptyText}>{emptyMessage}</AtomicText>
             </View>
           )}
         </View>
       </View>
     </Modal>
   );
-});
+});

package/src/device/infrastructure/services/PersistentDeviceIdService.ts

@@ -43,7 +43,6 @@ export class PersistentDeviceIdService {
 
       if (secureId) {
         if (__DEV__) {
-          console.log('[PersistentDeviceIdService] Found secure device ID:', secureId);
         }
         cachedDeviceId = secureId;
         return secureId;
@@ -54,14 +53,12 @@ export class PersistentDeviceIdService {
       await this.secureRepo.set(newId);
 
       if (__DEV__) {
-        console.log('[PersistentDeviceIdService] Created new persistent ID:', newId);
       }
 
       cachedDeviceId = newId;
       return newId;
     } catch (error) {
       if (__DEV__) {
-        console.error('[PersistentDeviceIdService] Initialization failed, using fallback:', error);
       }
       const fallbackId = `fallback_${generateUUID()}`;
       cachedDeviceId = fallbackId;
@@ -103,7 +100,6 @@ export class PersistentDeviceIdService {
       cachedDeviceId = null;
       initializationPromise = null;
       if (__DEV__) {
-        console.log('[PersistentDeviceIdService] All device identifiers cleared');
       }
     } catch {
       // Silent fail