@umituz/react-native-design-system 2.6.62 → 2.6.65

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@umituz/react-native-design-system",
-  "version": "2.6.62",
+  "version": "2.6.65",
   "description": "Universal design system for React Native apps - Consolidated package with atoms, molecules, organisms, theme, typography, responsive and safe area utilities",
   "main": "./src/index.ts",
   "types": "./src/index.ts",

package/src/atoms/AtomicIcon.tsx

@@ -12,11 +12,12 @@ import Svg, { Path } from "react-native-svg";
 import { useAppDesignTokens } from '../theme';
 import {
   type IconSize as BaseIconSize,
-  type IoniconsName
+  type IconName,
 } from "./AtomicIcon.types";
 
 // Re-export IconSize for convenience
 export type IconSize = BaseIconSize;
+export type { IconName };
 
 const FALLBACK_ICON = "help-circle-outline";
 
@@ -38,11 +39,6 @@ export type IconColor =
   | "textTertiary"
   | "onSurfaceVariant";
 
-/**
- * IconName can be a valid Ionicons name or any string (for custom SVGs)
- */
-export type IconName = IoniconsName | string;
-
 export interface AtomicIconProps {
   /** Icon name (Ionicons) */
   name?: IconName;

package/src/atoms/AtomicIcon.types.ts

@@ -10,6 +10,11 @@ import type { Ionicons } from "@expo/vector-icons";
  */
 export type IoniconsName = keyof typeof Ionicons.glyphMap;
 
+/**
+ * Icon name - either Ionicons or custom string
+ */
+export type IconName = IoniconsName | string;
+
 /**
  * Semantic icon size presets
  */

package/src/atoms/AtomicInput.tsx

@@ -1,78 +1,12 @@
 import React from 'react';
-import { View, TextInput, Pressable, StyleSheet, StyleProp, ViewStyle, TextStyle } from 'react-native';
+import { View, TextInput, StyleSheet, StyleProp, ViewStyle, TextStyle } from 'react-native';
 import { useAppDesignTokens } from '../theme';
-import { AtomicIcon } from './AtomicIcon';
-import { AtomicText } from './AtomicText';
 import { useInputState } from './input/hooks/useInputState';
 import { getSizeConfig, getVariantStyle, getTextColor } from './input/styles/inputStylesHelper';
-import type { IconName } from './AtomicIcon';
-
-export type AtomicInputVariant = 'outlined' | 'filled' | 'flat';
-export type AtomicInputState = 'default' | 'error' | 'success' | 'disabled';
-export type AtomicInputSize = 'sm' | 'md' | 'lg';
-
-export interface AtomicInputProps {
-  /** Input label */
-  label?: string;
-  /** Current input value */
-  value?: string;
-  /** Value change callback */
-  onChangeText?: (text: string) => void;
-  /** Input variant (outlined, filled, flat) */
-  variant?: AtomicInputVariant;
-  /** Input state (default, error, success, disabled) */
-  state?: AtomicInputState;
-  /** Input size (sm, md, lg) */
-  size?: AtomicInputSize;
-  /** Placeholder text */
-  placeholder?: string;
-  /** Helper text below input */
-  helperText?: string;
-  /** Leading icon (Ionicons name) */
-  leadingIcon?: IconName;
-  /** Trailing icon (Ionicons name) */
-  trailingIcon?: IconName;
-  /** Callback when trailing icon is pressed */
-  onTrailingIconPress?: () => void;
-  /** Show password toggle for secure inputs */
-  showPasswordToggle?: boolean;
-  /** Secure text entry (password field) */
-  secureTextEntry?: boolean;
-  /** Maximum character length */
-  maxLength?: number;
-  /** Show character counter */
-  showCharacterCount?: boolean;
-  /** Keyboard type */
-  keyboardType?: 'default' | 'email-address' | 'numeric' | 'phone-pad' | 'url' | 'number-pad' | 'decimal-pad' | 'web-search' | 'twitter' | 'numeric' | 'visible-password';
-  /** Return key type */
-  returnKeyType?: 'done' | 'go' | 'next' | 'search' | 'send';
-  /** Callback when submit button is pressed */
-  onSubmitEditing?: () => void;
-  /** Blur on submit */
-  blurOnSubmit?: boolean;
-  /** Auto focus */
-  autoFocus?: boolean;
-  /** Auto-capitalize */
-  autoCapitalize?: 'none' | 'sentences' | 'words' | 'characters';
-  /** Auto-correct */
-  autoCorrect?: boolean;
-  /** Disabled state */
-  disabled?: boolean;
-  /** Container style */
-  style?: StyleProp<ViewStyle>;
-  /** Input text style */
-  inputStyle?: StyleProp<TextStyle>;
-  /** Test ID for E2E testing */
-  testID?: string;
-  /** Blur callback */
-  onBlur?: () => void;
-  /** Focus callback */
-  onFocus?: () => void;
-  /** Multiline input support */
-  multiline?: boolean;
-  /** Number of lines for multiline input */
-  numberOfLines?: number;
-}
+import type { AtomicInputProps } from './input/types';
+import { InputLabel } from './input/components/InputLabel';
+import { InputIcon } from './input/components/InputIcon';
+import { InputHelper } from './input/components/InputHelper';
 
 /**
  * AtomicInput - Pure React Native Text Input
@@ -188,25 +122,16 @@ export const AtomicInput = React.forwardRef<TextInput, AtomicInputProps>(({
 
   return (
     <View testID={testID}>
-      {label && (
-        <AtomicText
-          type="labelMedium"
-          color={hasError ? 'error' : hasSuccess ? 'success' : 'secondary'}
-          style={styles.label}
-        >
-          {label}
-        </AtomicText>
-      )}
+      <InputLabel label={label} state={state} />
 
       <View style={containerStyle}>
         {leadingIcon && (
-          <View style={styles.leadingIcon}>
-            <AtomicIcon
-              name={leadingIcon}
-              customSize={sizeConfig.iconSize}
-              customColor={iconColor}
-            />
-          </View>
+          <InputIcon
+            name={leadingIcon}
+            size={sizeConfig.iconSize}
+            color={iconColor}
+            position="leading"
+          />
         )}
 
         <TextInput
@@ -240,55 +165,36 @@ export const AtomicInput = React.forwardRef<TextInput, AtomicInputProps>(({
         />
 
         {(showPasswordToggle && secureTextEntry) && (
-          <Pressable
+          <InputIcon
+            name={isPasswordVisible ? "eye-off-outline" : "eye-outline"}
+            size={sizeConfig.iconSize}
+            color={iconColor}
+            position="trailing"
             onPress={() => togglePasswordVisibility()}
-            style={styles.trailingIcon}
-          >
-            <AtomicIcon
-              name={isPasswordVisible ? "eye-off-outline" : "eye-outline"}
-              customSize={sizeConfig.iconSize}
-              customColor={iconColor}
-            />
-          </Pressable>
+            testID={testID ? `${testID}-toggle-password` : undefined}
+          />
         )}
 
         {trailingIcon && !showPasswordToggle && (
-          <Pressable
+          <InputIcon
+            name={trailingIcon}
+            size={sizeConfig.iconSize}
+            color={iconColor}
+            position="trailing"
             onPress={onTrailingIconPress}
-            style={styles.trailingIcon}
-            disabled={!onTrailingIconPress}
-          >
-            <AtomicIcon
-              name={trailingIcon}
-              customSize={sizeConfig.iconSize}
-              customColor={iconColor}
-            />
-          </Pressable>
+            testID={testID ? `${testID}-trailing-icon` : undefined}
+          />
         )}
       </View>
 
-      {(helperText || showCharacterCount) && (
-        <View style={styles.helperRow}>
-          {helperText && (
-            <AtomicText
-              style={styles.helperText}
-              color={hasError ? 'error' : 'secondary'}
-              testID={testID ? `${testID}-helper` : undefined}
-            >
-              {helperText}
-            </AtomicText>
-          )}
-          {showCharacterCount && maxLength && (
-            <AtomicText
-              style={[styles.helperText, styles.characterCount]}
-              color="secondary"
-              testID={testID ? `${testID}-count` : undefined}
-            >
-              {characterCount}/{maxLength}
-            </AtomicText>
-          )}
-        </View>
-      )}
+      <InputHelper
+        helperText={helperText}
+        showCharacterCount={showCharacterCount}
+        characterCount={characterCount}
+        maxLength={maxLength}
+        state={state}
+        testID={testID}
+      />
     </View>
   );
 });
@@ -303,30 +209,4 @@ const styles = StyleSheet.create({
     margin: 0,
     padding: 0,
   },
-  label: {
-    marginBottom: 4,
-  },
-  leadingIcon: {
-    position: 'absolute',
-    left: 12,
-    zIndex: 1,
-  },
-  trailingIcon: {
-    position: 'absolute',
-    right: 12,
-    zIndex: 1,
-  },
-  helperRow: {
-    flexDirection: 'row',
-    justifyContent: 'space-between',
-    marginTop: 4,
-  },
-  helperText: {
-    flex: 1,
-  },
-  characterCount: {
-    marginLeft: 8,
-  },
 });
-
-export type { AtomicInputProps as InputProps };

package/src/atoms/AtomicPicker.tsx

@@ -40,7 +40,7 @@
  * @module AtomicPicker
  */
 
-import React, { useState, useMemo } from 'react';
+import React from 'react';
 import {
   View,
   TouchableOpacity,
@@ -59,6 +59,7 @@ import {
   getPickerValueStyles,
   getPickerErrorStyles,
 } from './picker/styles/pickerStyles';
+import { usePickerState } from './picker/hooks/usePickerState';
 
 export type { AtomicPickerProps, PickerOption, PickerSize } from './picker/types';
 
@@ -92,8 +93,14 @@ export const AtomicPicker: React.FC<AtomicPickerProps> = ({
 }) => {
   const tokens = useAppDesignTokens();
 
-  const [modalVisible, setModalVisible] = useState(false);
-  const [searchQuery, setSearchQuery] = useState('');
+  const pickerState = usePickerState({
+    value,
+    multiple,
+    options,
+    placeholder,
+    autoClose,
+    onChange,
+  });
 
   // Get style helpers with design tokens
   const containerStyles = getPickerContainerStyles(tokens);
@@ -102,110 +109,6 @@ export const AtomicPicker: React.FC<AtomicPickerProps> = ({
   const valueStyles = getPickerValueStyles(tokens);
   const errorStyles = getPickerErrorStyles(tokens);
 
-  /**
-   * Normalize value to array for consistent handling
-   */
-  const selectedValues = useMemo(() => {
-    if (multiple) {
-      return Array.isArray(value) ? value : [];
-    }
-    return value ? [value as string] : [];
-  }, [value, multiple]);
-
-  /**
-   * Get selected option objects
-   */
-  const selectedOptions = useMemo(() => {
-    return options.filter((opt) => selectedValues.includes(opt.value));
-  }, [options, selectedValues]);
-
-  /**
-   * Filter options based on search query
-   */
-  const filteredOptions = useMemo(() => {
-    if (!searchQuery.trim()) return options;
-
-    const query = searchQuery.toLowerCase();
-    return options.filter(
-      (opt) =>
-        opt.label.toLowerCase().includes(query) ||
-        opt.description?.toLowerCase().includes(query)
-    );
-  }, [options, searchQuery]);
-
-  /**
-   * Format display text for selected value(s)
-   */
-  const displayText = useMemo(() => {
-    if (selectedOptions.length === 0) {
-      return placeholder;
-    }
-
-    if (multiple) {
-      return selectedOptions.length === 1
-        ? selectedOptions[0]?.label || placeholder
-        : `${selectedOptions.length} selected`;
-    }
-    return selectedOptions[0]?.label || placeholder;
-  }, [selectedOptions, placeholder, multiple]);
-
-  /**
-   * Handle modal open
-   */
-  const openModal = () => {
-    if (disabled) return;
-    setModalVisible(true);
-    setSearchQuery('');
-  };
-
-  /**
-   * Handle modal close
-   */
-  const closeModal = () => {
-    setModalVisible(false);
-    setSearchQuery('');
-  };
-
-  /**
-   * Handle option selection
-   */
-  const handleSelect = (optionValue: string) => {
-    if (multiple) {
-      const newValues = selectedValues.includes(optionValue)
-        ? selectedValues.filter((v) => v !== optionValue)
-        : [...selectedValues, optionValue];
-      onChange(newValues);
-    } else {
-      onChange(optionValue);
-      if (autoClose) {
-        closeModal();
-      }
-    }
-  };
-
-  /**
-   * Handle clear selection
-   */
-  const handleClear = () => {
-    onChange(multiple ? [] : '');
-  };
-
-  /**
-   * Handle search query change
-   */
-  const handleSearch = (query: string) => {
-    setSearchQuery(query);
-  };
-
-
-
-  /**
-   * Handle chip removal
-   */
-  const handleChipRemove = (value: string) => {
-    handleSelect(value);
-  };
-
   const pickerContainerStyle = StyleSheet.flatten([
     containerStyles.base,
     containerStyles.size[size],
@@ -221,12 +124,17 @@ export const AtomicPicker: React.FC<AtomicPickerProps> = ({
   ]);
 
   const pickerValueStyle = StyleSheet.flatten([
-    selectedOptions.length > 0 ? valueStyles.base : placeholderStyles.base,
-    selectedOptions.length > 0
+    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();
+  };
+
   return (
     <View>
       {/* Label */}
@@ -234,7 +142,7 @@ export const AtomicPicker: React.FC<AtomicPickerProps> = ({
 
       {/* Picker Button */}
       <TouchableOpacity
-        onPress={openModal}
+        onPress={handleOpenModal}
         disabled={disabled}
         accessibilityRole="button"
         accessibilityLabel={label || placeholder}
@@ -244,15 +152,15 @@ export const AtomicPicker: React.FC<AtomicPickerProps> = ({
       >
         {/* Display Text */}
         <AtomicText style={pickerValueStyle} numberOfLines={1}>
-          {displayText}
+          {pickerState.displayText}
         </AtomicText>
 
         {/* Icons */}
         <View style={{ flexDirection: 'row', alignItems: 'center', gap: tokens.spacing.xs }}>
           {/* Clear Button */}
-          {clearable && selectedOptions.length > 0 && !disabled && (
+          {clearable && pickerState.selectedOptions.length > 0 && !disabled && (
             <TouchableOpacity
-              onPress={handleClear}
+              onPress={pickerState.handleClear}
               hitSlop={{ top: 8, bottom: 8, left: 8, right: 8 }}
               accessibilityRole="button"
               accessibilityLabel={clearAccessibilityLabel}
@@ -264,7 +172,7 @@ export const AtomicPicker: React.FC<AtomicPickerProps> = ({
 
           {/* Dropdown Icon */}
           <AtomicIcon
-            name={modalVisible ? 'ChevronUp' : 'ChevronDown'}
+            name={pickerState.modalVisible ? 'ChevronUp' : 'ChevronDown'}
             size="sm"
             color={disabled ? 'surfaceVariant' : 'secondary'}
           />
@@ -273,8 +181,8 @@ export const AtomicPicker: React.FC<AtomicPickerProps> = ({
 
       {/* Selected Chips (Multi-select) */}
       <PickerChips
-        selectedOptions={selectedOptions}
-        onRemoveChip={handleChipRemove}
+        selectedOptions={pickerState.selectedOptions}
+        onRemoveChip={pickerState.handleChipRemove}
         testID={testID}
       />
 
@@ -283,16 +191,16 @@ export const AtomicPicker: React.FC<AtomicPickerProps> = ({
 
       {/* Selection Modal */}
       <PickerModal
-        visible={modalVisible}
-        onClose={closeModal}
+        visible={pickerState.modalVisible}
+        onClose={pickerState.closeModal}
         options={options}
-        selectedValues={selectedValues}
-        onSelect={handleSelect}
+        selectedValues={pickerState.selectedValues}
+        onSelect={pickerState.handleSelect}
         title={modalTitle || label}
         searchable={searchable}
-        searchQuery={searchQuery}
-        onSearchChange={handleSearch}
-        filteredOptions={filteredOptions}
+        searchQuery={pickerState.searchQuery}
+        onSearchChange={pickerState.handleSearch}
+        filteredOptions={pickerState.filteredOptions}
         multiple={multiple}
         emptyMessage={emptyMessage}
         searchPlaceholder={searchPlaceholder}

package/src/atoms/index.ts

@@ -25,11 +25,13 @@ export {
 // Input
 export {
     AtomicInput,
-    type AtomicInputProps,
-    type AtomicInputVariant,
-    type AtomicInputState,
-    type AtomicInputSize,
 } from './AtomicInput';
+export type {
+    AtomicInputProps,
+    AtomicInputVariant,
+    AtomicInputState,
+    AtomicInputSize,
+} from './input/types';
 
 // Icon
 export {

package/src/atoms/input/components/InputHelper.tsx

@@ -0,0 +1,49 @@
+import React from 'react';
+import { View } from 'react-native';
+import { AtomicText } from '../../AtomicText';
+import type { AtomicInputState } from '../../input/types';
+
+interface InputHelperProps {
+  helperText?: string;
+  showCharacterCount?: boolean;
+  characterCount?: number;
+  maxLength?: number;
+  state?: AtomicInputState;
+  testID?: string;
+}
+
+export const InputHelper: React.FC<InputHelperProps> = ({
+  helperText,
+  showCharacterCount,
+  characterCount = 0,
+  maxLength,
+  state,
+  testID,
+}) => {
+  if (!helperText && !showCharacterCount) return null;
+
+  const color = state === 'error' ? 'error' : 'secondary';
+
+  return (
+    <View style={{ flexDirection: 'row', justifyContent: 'space-between', marginTop: 4 }}>
+      {helperText && (
+        <AtomicText
+          style={{ flex: 1 }}
+          color={color}
+          testID={testID ? `${testID}-helper` : undefined}
+        >
+          {helperText}
+        </AtomicText>
+      )}
+      {showCharacterCount && maxLength && (
+        <AtomicText
+          style={{ marginLeft: 8 }}
+          color="secondary"
+          testID={testID ? `${testID}-count` : undefined}
+        >
+          {characterCount}/{maxLength}
+        </AtomicText>
+      )}
+    </View>
+  );
+};

package/src/atoms/input/components/InputIcon.tsx

@@ -0,0 +1,44 @@
+import React from 'react';
+import { View, Pressable } from 'react-native';
+import { AtomicIcon } from '../../AtomicIcon';
+
+interface InputIconProps {
+  name: string;
+  size: number;
+  color: string;
+  position: 'leading' | 'trailing';
+  onPress?: () => void;
+  testID?: string;
+}
+
+export const InputIcon: React.FC<InputIconProps> = ({
+  name,
+  size,
+  color,
+  position,
+  onPress,
+  testID,
+}) => {
+  const positionStyle = position === 'leading' ? styles.leadingIcon : styles.trailingIcon;
+  const Wrapper = onPress ? Pressable : View;
+  const wrapperProps = onPress ? { onPress, testID } : {};
+
+  return (
+    <Wrapper style={positionStyle} {...wrapperProps}>
+      <AtomicIcon name={name} customSize={size} customColor={color} />
+    </Wrapper>
+  );
+};
+
+const styles = {
+  leadingIcon: {
+    position: 'absolute' as const,
+    left: 12,
+    zIndex: 1,
+  },
+  trailingIcon: {
+    position: 'absolute' as const,
+    right: 12,
+    zIndex: 1,
+  },
+};

package/src/atoms/input/components/InputLabel.tsx

@@ -0,0 +1,20 @@
+import React from 'react';
+import { AtomicText } from '../../AtomicText';
+import type { AtomicInputState } from '../../input/types';
+
+interface InputLabelProps {
+  label?: string;
+  state?: AtomicInputState;
+}
+
+export const InputLabel: React.FC<InputLabelProps> = ({ label, state }) => {
+  if (!label) return null;
+
+  const color = state === 'error' ? 'error' : state === 'success' ? 'success' : 'secondary';
+
+  return (
+    <AtomicText type="labelMedium" color={color} style={{ marginBottom: 4 }}>
+      {label}
+    </AtomicText>
+  );
+};

package/src/atoms/input/styles/inputStylesHelper.ts

@@ -7,7 +7,7 @@
 
 import { ViewStyle } from 'react-native';
 import { useAppDesignTokens } from '../../../theme';
-import type { AtomicInputVariant, AtomicInputSize } from '../../AtomicInput';
+import type { AtomicInputVariant, AtomicInputSize } from '../../input/types';
 
 interface GetVariantStyleParams {
   variant: AtomicInputVariant;