@umituz/react-native-design-system 2.6.34 → 2.6.36

package/package.json

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

@@ -43,7 +43,15 @@ export interface AtomicInputProps {
   /** Show character counter */
   showCharacterCount?: boolean;
   /** Keyboard type */
-  keyboardType?: 'default' | 'email-address' | 'numeric' | 'phone-pad' | 'url' | 'number-pad' | 'decimal-pad';
+  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 */
@@ -78,7 +86,7 @@ export interface AtomicInputProps {
  * - Responsive sizing
  * - Full accessibility support
  */
-export const AtomicInput: React.FC<AtomicInputProps> = ({
+export const AtomicInput = React.forwardRef<TextInput, AtomicInputProps>(({
   variant = 'outlined',
   state = 'default',
   size = 'md',
@@ -95,6 +103,10 @@ export const AtomicInput: React.FC<AtomicInputProps> = ({
   maxLength,
   showCharacterCount = false,
   keyboardType = 'default',
+  returnKeyType,
+  onSubmitEditing,
+  blurOnSubmit,
+  autoFocus,
   autoCapitalize = 'sentences',
   autoCorrect = true,
   disabled = false,
@@ -105,7 +117,7 @@ export const AtomicInput: React.FC<AtomicInputProps> = ({
   onFocus,
   multiline = false,
   numberOfLines,
-}) => {
+}, ref) => {
   const tokens = useAppDesignTokens();
 
   const {
@@ -198,6 +210,7 @@ export const AtomicInput: React.FC<AtomicInputProps> = ({
         )}
 
         <TextInput
+          ref={ref}
           value={localValue}
           onChangeText={handleTextChange}
           placeholder={placeholder}
@@ -205,6 +218,10 @@ export const AtomicInput: React.FC<AtomicInputProps> = ({
           secureTextEntry={secureTextEntry && !isPasswordVisible}
           maxLength={maxLength}
           keyboardType={keyboardType}
+          returnKeyType={returnKeyType}
+          onSubmitEditing={onSubmitEditing}
+          blurOnSubmit={blurOnSubmit}
+          autoFocus={autoFocus}
           autoCapitalize={autoCapitalize}
           autoCorrect={autoCorrect}
           editable={!isDisabled}
@@ -274,7 +291,7 @@ export const AtomicInput: React.FC<AtomicInputProps> = ({
       )}
     </View>
   );
-};
+});
 
 const styles = StyleSheet.create({
   container: {

package/src/atoms/AtomicKeyboardAvoidingView.tsx

@@ -0,0 +1,49 @@
+import React from 'react';
+import {
+  KeyboardAvoidingView,
+  Platform,
+  StyleSheet,
+  type KeyboardAvoidingViewProps,
+} from 'react-native';
+
+export interface AtomicKeyboardAvoidingViewProps extends KeyboardAvoidingViewProps {
+  /**
+   * Optional offset to adjust the position of the content.
+   * On iOS, this is often necessary to account for headers, tabs, etc.
+   */
+  offset?: number;
+}
+
+/**
+ * AtomicKeyboardAvoidingView - A consistent wrapper for React Native's KeyboardAvoidingView
+ * 
+ * Provides sensible defaults and OS-specific behaviors:
+ * - iOS: behavior="padding"
+ * - Android: behavior=undefined (handled by windowSoftInputMode="adjustResize")
+ */
+export const AtomicKeyboardAvoidingView: React.FC<AtomicKeyboardAvoidingViewProps> = ({
+  children,
+  behavior,
+  style,
+  offset = 0,
+  ...props
+}) => {
+  const defaultBehavior = Platform.OS === 'ios' ? 'padding' : undefined;
+
+  return (
+    <KeyboardAvoidingView
+      behavior={behavior ?? defaultBehavior}
+      style={[styles.container, style]}
+      keyboardVerticalOffset={offset}
+      {...props}
+    >
+      {children}
+    </KeyboardAvoidingView>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+  },
+});

package/src/atoms/AtomicTextArea.tsx

@@ -1,32 +1,52 @@
-/**
- * AtomicTextArea - Multiline Text Input Component
- *
- * Atomic Design Level: ATOM
- * Purpose: Multiline text input across all apps
- */
-
-import React from 'react';
-import { View, TextInput, StyleSheet, ViewStyle } from 'react-native';
+import React, { forwardRef } from 'react';
+import { View, TextInput, StyleSheet, type ViewStyle, type StyleProp, type TextStyle } from 'react-native';
 import { useAppDesignTokens } from '../theme';
 import { AtomicText } from './AtomicText';
 
 export interface AtomicTextAreaProps {
+  /** Text area label */
   label?: string;
+  /** Current value */
   value?: string;
+  /** Value change callback */
   onChangeText?: (text: string) => void;
+  /** Placeholder text */
   placeholder?: string;
+  /** Helper text below input */
   helperText?: string;
+  /** Error message to display */
   errorText?: string;
+  /** Maximum character length */
   maxLength?: number;
+  /** Number of lines (default: 4) */
   numberOfLines?: number;
+  /** Alternative to numberOfLines */
   rows?: number;
+  /** Minimum height override */
   minHeight?: number;
+  /** Disabled state */
   disabled?: boolean;
-  style?: ViewStyle;
+  /** Container style */
+  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 */
+  onSubmitEditing?: () => void;
+  /** Blur on submit */
+  blurOnSubmit?: boolean;
+  /** Test ID */
   testID?: string;
 }
 
-export const AtomicTextArea: React.FC<AtomicTextAreaProps> = ({
+/**
+ * AtomicTextArea - Multiline Text Input Component
+ * Consistent with AtomicInput but optimized for multiline usage.
+ */
+export const AtomicTextArea = forwardRef<TextInput, AtomicTextAreaProps>(({
   label,
   value,
   onChangeText,
@@ -39,8 +59,13 @@ export const AtomicTextArea: React.FC<AtomicTextAreaProps> = ({
   minHeight,
   disabled = false,
   style,
+  inputStyle,
+  autoFocus,
+  returnKeyType,
+  onSubmitEditing,
+  blurOnSubmit,
   testID,
-}) => {
+}, ref) => {
   const lineCount = numberOfLines ?? rows;
   const calculatedMinHeight = minHeight ?? lineCount * 24;
   const tokens = useAppDesignTokens();
@@ -51,20 +76,26 @@ export const AtomicTextArea: React.FC<AtomicTextAreaProps> = ({
       {label && (
         <AtomicText
           type="labelMedium"
-          style={[styles.label, { color: tokens.colors.textSecondary }]}
+          color={hasError ? 'error' : 'secondary'}
+          style={styles.label}
         >
           {label}
         </AtomicText>
       )}
       <TextInput
+        ref={ref}
         value={value}
         onChangeText={onChangeText}
         placeholder={placeholder}
-        placeholderTextColor={tokens.colors.textTertiary}
+        placeholderTextColor={tokens.colors.textSecondary}
         maxLength={maxLength}
         numberOfLines={lineCount}
         multiline
         editable={!disabled}
+        autoFocus={autoFocus}
+        returnKeyType={returnKeyType}
+        onSubmitEditing={onSubmitEditing}
+        blurOnSubmit={blurOnSubmit}
         textAlignVertical="top"
         style={[
           styles.input,
@@ -73,39 +104,57 @@ export const AtomicTextArea: React.FC<AtomicTextAreaProps> = ({
             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 },
         ]}
       />
       {(helperText || errorText) && (
-        <AtomicText
-          type="bodySmall"
-          style={[
-            styles.helperText,
-            { color: hasError ? tokens.colors.error : tokens.colors.textSecondary },
-          ]}
-        >
-          {errorText || helperText}
-        </AtomicText>
+        <View style={styles.helperRow}>
+          <AtomicText
+            type="bodySmall"
+            color={hasError ? 'error' : 'secondary'}
+            style={styles.helperText}
+          >
+            {errorText || helperText}
+          </AtomicText>
+          {maxLength && value !== undefined && (
+            <AtomicText
+              type="labelSmall"
+              color="secondary"
+              style={styles.characterCount}
+            >
+              {value.length}/{maxLength}
+            </AtomicText>
+          )}
+        </View>
       )}
     </View>
   );
-};
+});
 
 const styles = StyleSheet.create({
   container: {
-    marginBottom: 16,
+    width: '100%',
   },
   label: {
     marginBottom: 8,
   },
   input: {
     borderWidth: 1,
-    borderRadius: 12,
-    padding: 12,
-    fontSize: 16,
   },
-  helperText: {
+  helperRow: {
+    flexDirection: 'row',
+    justifyContent: 'space-between',
     marginTop: 4,
   },
+  helperText: {
+    flex: 1,
+  },
+  characterCount: {
+    marginLeft: 8,
+  },
 });

package/src/atoms/index.ts

@@ -111,3 +111,6 @@ export { AtomicTouchable, type AtomicTouchableProps } from './AtomicTouchable';
 
 // StatusBar
 export { AtomicStatusBar, type AtomicStatusBarProps } from './status-bar';
+
+// Keyboard Avoiding
+export { AtomicKeyboardAvoidingView, type AtomicKeyboardAvoidingViewProps } from './AtomicKeyboardAvoidingView';

package/src/layouts/FormLayout/FormLayout.tsx

@@ -6,9 +6,10 @@
  */
 
 import React, { useMemo } from 'react';
-import { View, ScrollView, KeyboardAvoidingView, StyleSheet, type StyleProp, type ViewStyle } from 'react-native';
+import { View, ScrollView, StyleSheet, type StyleProp, type ViewStyle } from 'react-native';
 import { useAppDesignTokens } from '../../theme';
 import { useResponsive } from '../../responsive';
+import { AtomicKeyboardAvoidingView } from '../../atoms';
 
 export interface FormLayoutProps {
   /** Form fields and content */
@@ -103,9 +104,9 @@ export const FormLayout: React.FC<FormLayoutProps> = ({
   const mainContent = disableKeyboardAvoid ? (
     scrollableContent
   ) : (
-    <KeyboardAvoidingView style={styles.container} behavior="padding">
+    <AtomicKeyboardAvoidingView style={styles.container}>
       {scrollableContent}
-    </KeyboardAvoidingView>
+    </AtomicKeyboardAvoidingView>
   );
 
   return (

package/src/layouts/ScreenLayout/ScreenLayout.tsx

@@ -24,10 +24,11 @@
  */
 
 import React, { useMemo } from 'react';
-import { View, ScrollView, StyleSheet, KeyboardAvoidingView, type ViewStyle, type RefreshControlProps } from 'react-native';
+import { View, ScrollView, StyleSheet, type ViewStyle, type RefreshControlProps } from 'react-native';
 import { SafeAreaView, useSafeAreaInsets, type Edge } from '../../safe-area';
 import { useAppDesignTokens } from '../../theme';
 import { getScreenLayoutConfig } from '../../responsive/responsiveLayout';
+import { AtomicKeyboardAvoidingView } from '../../atoms';
 
 /**
  * NOTE: This component now works in conjunction with the SafeAreaProvider
@@ -206,12 +207,11 @@ export const ScreenLayout: React.FC<ScreenLayoutProps> = ({
   const ContentWrapper: React.FC<{ children: React.ReactNode }> = ({ children: wrapperChildren }) => {
     if (keyboardAvoiding) {
       return (
-        <KeyboardAvoidingView
+        <AtomicKeyboardAvoidingView
           style={styles.keyboardAvoidingView}
-          behavior="padding"
         >
           {wrapperChildren}
-        </KeyboardAvoidingView>
+        </AtomicKeyboardAvoidingView>
       );
     }
     return <>{wrapperChildren}</>;