@umituz/react-native-design-system 1.2.0 → 1.3.1

package/README.md

@@ -1,17 +1,19 @@
 # @umituz/react-native-design-system
 
-Universal design system for React Native apps following Domain-Driven Design (DDD) architecture with Material Design 3 components.
+Universal design system for React Native apps following Domain-Driven Design (DDD) architecture with Material Design 3 principles.
 
 ## ✨ Features
 
 - 🎨 **Material Design 3** - Modern, accessible UI components
-- ⚛️ **Atomic Design** - Organized component hierarchy (Atoms → Molecules → Organisms)
-- 🏗️ **DDD Architecture** - Clean domain-driven structure
+- ⚛️ **Pure React Native** - No external UI library dependencies (lightweight!)
+- 🏗️ **Atomic Design** - Organized component hierarchy (Atoms → Molecules → Organisms)
+- 🧬 **DDD Architecture** - Clean domain-driven structure
 - 🌓 **Theme Support** - Built-in light/dark mode
 - 📱 **Responsive** - Adaptive layouts for phones and tablets
 - ♿ **Accessible** - WCAG AA compliant components
 - 🎭 **Animations** - Smooth React Native Reanimated animations
 - 📦 **Zero Config** - Works out of the box
+- 🪶 **Lightweight** - Smaller bundle size (no Paper dependency)
 
 ## 📦 Installation
 
@@ -22,9 +24,11 @@ npm install @umituz/react-native-design-system
 ### Peer Dependencies
 
 ```bash
-npm install react@18.3.1 react-native@0.76.3 react-native-paper@^5.12.5 react-native-reanimated@~3.10.1
+npm install react@18.3.1 react-native@0.76.3 react-native-reanimated@~3.10.1 lucide-react-native@^0.468.0
 ```
 
+> **v1.3.0 Breaking Change**: React Native Paper dependency removed! All components now use pure React Native implementation for lighter bundle size and full control over styling.
+
 ## 🚀 Usage
 
 ```typescript
@@ -60,11 +64,12 @@ const MyScreen = () => {
 ## 🧩 Components
 
 ### Atoms (Primitive UI Components)
-- `AtomicButton` - Material Design 3 buttons with variants
-- `AtomicText` - Typography with MD3 type scale
-- `AtomicInput` - Text inputs with validation
-- `AtomicCard` - Container cards
-- `AtomicIcon` - Icon components
+- `AtomicButton` - Pure React Native buttons with variants (primary, secondary, outline, text, danger)
+- `AtomicText` - Typography with MD3 type scale (pure RN Text)
+- `AtomicInput` - Text inputs with validation states (pure RN TextInput)
+- `AtomicTextArea` - Multiline inputs with character counter (pure RN TextInput)
+- `AtomicCard` - Container cards with elevation (pure RN View)
+- `AtomicIcon` - Lucide icons with 1,639 icons
 - `AtomicSwitch` - Toggle switches
 - `AtomicBadge` - Status badges
 - `AtomicProgress` - Progress indicators
@@ -79,9 +84,9 @@ const MyScreen = () => {
 - And more...
 
 ### Organisms (Complex Patterns)
-- `ScreenLayout` - Screen wrapper with safe area
+- `ScreenLayout` - Screen wrapper with safe area (pure RN View)
 - `AppHeader` - Application header
-- `FormContainer` - Form layout container
+- `FormContainer` - Form layout container with keyboard handling (pure RN View + ScrollView)
 
 ## 🎨 Design Tokens
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@umituz/react-native-design-system",
-  "version": "1.2.0",
+  "version": "1.3.1",
   "description": "Universal design system for React Native apps - Domain-Driven Design architecture with Material Design 3 components",
   "main": "src/index.ts",
   "types": "src/index.ts",
@@ -27,7 +27,6 @@
   "peerDependencies": {
     "react": ">=18.2.0",
     "react-native": ">=0.74.0",
-    "react-native-paper": "^5.12.5",
     "react-native-reanimated": "~3.10.1",
     "@react-native-community/datetimepicker": "8.0.1",
     "@expo/vector-icons": "^14.0.0",

package/src/domains/icons/domain/interfaces/IIconAdapter.ts

@@ -16,6 +16,7 @@
 
 import type { DesignTokens } from '@umituz/react-native-design-system';
 
+export type IconName = string;
 export type IconSize = 'xs' | 'sm' | 'md' | 'lg' | 'xl' | 'xxl';
 export type IconColor =
   | 'primary'

package/src/presentation/atoms/AtomicButton.tsx

@@ -1,8 +1,10 @@
 import React from 'react';
-import { Button as PaperButton } from 'react-native-paper';
-import { StyleSheet, StyleProp, ViewStyle, TextStyle } from 'react-native';
+import { StyleSheet, StyleProp, ViewStyle, TextStyle, TouchableOpacity, ActivityIndicator, View } from 'react-native';
 import Animated, { useSharedValue, useAnimatedStyle, withSpring } from 'react-native-reanimated';
-import { Pressable } from 'react-native';
+import { AtomicText } from './AtomicText';
+import { Icon } from '../../domains/icons/presentation/components/Icon';
+import { useAppDesignTokens } from '../hooks/useAppDesignTokens';
+import type { IconName } from '../../domains/icons/domain/interfaces/IIconAdapter';
 
 export type ButtonVariant = 'primary' | 'secondary' | 'outline' | 'text' | 'danger';
 export type ButtonSize = 'sm' | 'md' | 'lg';
@@ -15,14 +17,14 @@ export interface AtomicButtonProps {
   size?: ButtonSize;
   disabled?: boolean;
   loading?: boolean;
-  icon?: string;
+  icon?: IconName;
   fullWidth?: boolean;
   style?: StyleProp<ViewStyle>;
   textStyle?: StyleProp<TextStyle>;
   testID?: string;
 }
 
-const AnimatedPressable = Animated.createAnimatedComponent(Pressable);
+const AnimatedTouchable = Animated.createAnimatedComponent(TouchableOpacity);
 
 export const AtomicButton: React.FC<AtomicButtonProps> = ({
   title,
@@ -35,8 +37,11 @@ export const AtomicButton: React.FC<AtomicButtonProps> = ({
   icon,
   fullWidth = false,
   style,
+  textStyle,
   testID,
 }) => {
+  const tokens = useAppDesignTokens();
+
   // Animation
   const scale = useSharedValue(1);
 
@@ -63,62 +68,205 @@ export const AtomicButton: React.FC<AtomicButtonProps> = ({
     }
   };
 
-  // Map variants to Paper modes
-  const getPaperMode = (): 'contained' | 'outlined' | 'text' | 'contained-tonal' | 'elevated' => {
+  // Size configurations
+  const sizeConfig = {
+    sm: {
+      paddingVertical: tokens.spacing.xs,
+      paddingHorizontal: tokens.spacing.sm,
+      fontSize: tokens.typography.bodySmall.fontSize,
+      iconSize: 16,
+      minHeight: 32,
+    },
+    md: {
+      paddingVertical: tokens.spacing.sm,
+      paddingHorizontal: tokens.spacing.md,
+      fontSize: tokens.typography.bodyMedium.fontSize,
+      iconSize: 20,
+      minHeight: 44,
+    },
+    lg: {
+      paddingVertical: tokens.spacing.md,
+      paddingHorizontal: tokens.spacing.lg,
+      fontSize: tokens.typography.bodyLarge.fontSize,
+      iconSize: 24,
+      minHeight: 52,
+    },
+  };
+
+  const config = sizeConfig[size];
+
+  // Variant styles
+  const getVariantStyles = () => {
+    const baseStyle: ViewStyle = {
+      backgroundColor: tokens.colors.primary,
+      borderWidth: 0,
+    };
+
+    const baseTextStyle: TextStyle = {
+      color: tokens.colors.textInverse,
+    };
+
     switch (variant) {
       case 'primary':
-        return 'contained';
+        return {
+          container: {
+            ...baseStyle,
+            backgroundColor: tokens.colors.primary,
+          },
+          text: {
+            ...baseTextStyle,
+            color: tokens.colors.textInverse,
+          },
+        };
+
       case 'secondary':
-        return 'contained-tonal';
+        return {
+          container: {
+            ...baseStyle,
+            backgroundColor: tokens.colors.surfaceSecondary,
+          },
+          text: {
+            ...baseTextStyle,
+            color: tokens.colors.textPrimary,
+          },
+        };
+
       case 'outline':
-        return 'outlined';
+        return {
+          container: {
+            ...baseStyle,
+            backgroundColor: 'transparent',
+            borderWidth: 1,
+            borderColor: tokens.colors.border,
+          },
+          text: {
+            ...baseTextStyle,
+            color: tokens.colors.textPrimary,
+          },
+        };
+
       case 'text':
-        return 'text';
+        return {
+          container: {
+            ...baseStyle,
+            backgroundColor: 'transparent',
+          },
+          text: {
+            ...baseTextStyle,
+            color: tokens.colors.primary,
+          },
+        };
+
       case 'danger':
-        return 'contained';
+        return {
+          container: {
+            ...baseStyle,
+            backgroundColor: tokens.colors.error,
+          },
+          text: {
+            ...baseTextStyle,
+            color: tokens.colors.textInverse,
+          },
+        };
+
       default:
-        return 'contained';
+        return {
+          container: baseStyle,
+          text: baseTextStyle,
+        };
     }
   };
 
-  // Map size to padding
-  const getContentStyle = () => {
-    const paddingMap = {
-      sm: { paddingVertical: 4, paddingHorizontal: 12 },
-      md: { paddingVertical: 8, paddingHorizontal: 16 },
-      lg: { paddingVertical: 12, paddingHorizontal: 20 },
-    };
-    return paddingMap[size];
-  };
+  const variantStyles = getVariantStyles();
 
-  const buttonStyle: StyleProp<ViewStyle> = StyleSheet.flatten([
-    fullWidth ? { width: '100%' } : undefined,
+  const containerStyle: StyleProp<ViewStyle> = [
+    styles.button,
+    {
+      paddingVertical: config.paddingVertical,
+      paddingHorizontal: config.paddingHorizontal,
+      minHeight: config.minHeight,
+      borderRadius: tokens.borders.radius.md,
+    },
+    variantStyles.container,
+    fullWidth ? styles.fullWidth : undefined,
+    disabled ? styles.disabled : undefined,
     style,
-  ]);
+  ];
+
+  const buttonTextStyle: StyleProp<TextStyle> = [
+    {
+      fontSize: config.fontSize,
+      fontWeight: '600',
+    },
+    variantStyles.text,
+    disabled ? styles.disabledText : undefined,
+    textStyle,
+  ];
 
   const buttonText = title || children;
+  const showIcon = icon && !loading;
+  const iconColor = variantStyles.text.color;
 
   return (
-    <AnimatedPressable
-      style={animatedStyle}
+    <AnimatedTouchable
+      style={[animatedStyle, containerStyle]}
       onPressIn={handlePressIn}
       onPressOut={handlePressOut}
       onPress={handlePress}
+      activeOpacity={0.8}
+      disabled={disabled || loading}
+      testID={testID}
     >
-      <PaperButton
-        mode={getPaperMode()}
-        disabled={disabled}
-        loading={loading}
-        icon={icon}
-        style={buttonStyle}
-        contentStyle={getContentStyle()}
-        testID={testID}
-        buttonColor={variant === 'danger' ? '#DC2626' : undefined}
-      >
-        {buttonText}
-      </PaperButton>
-    </AnimatedPressable>
+      <View style={styles.content}>
+        {loading ? (
+          <ActivityIndicator
+            size="small"
+            color={variantStyles.text.color}
+            style={styles.loader}
+          />
+        ) : showIcon ? (
+          <Icon
+            name={icon}
+            customSize={config.iconSize}
+            customColor={typeof iconColor === 'string' ? iconColor : undefined}
+            style={styles.icon}
+          />
+        ) : null}
+
+        <AtomicText style={buttonTextStyle}>
+          {buttonText}
+        </AtomicText>
+      </View>
+    </AnimatedTouchable>
   );
 };
 
+const styles = StyleSheet.create({
+  button: {
+    alignItems: 'center',
+    justifyContent: 'center',
+    flexDirection: 'row',
+  },
+  content: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+  fullWidth: {
+    width: '100%',
+  },
+  disabled: {
+    opacity: 0.5,
+  },
+  disabledText: {
+    opacity: 0.7,
+  },
+  icon: {
+    marginRight: 8,
+  },
+  loader: {
+    marginRight: 8,
+  },
+});
+
 export type { AtomicButtonProps as ButtonProps };

package/src/presentation/atoms/AtomicCard.tsx

@@ -1,8 +1,8 @@
 import React from 'react';
-import { Card as PaperCard } from 'react-native-paper';
-import { StyleProp, ViewStyle } from 'react-native';
+import { View, StyleProp, ViewStyle } from 'react-native';
 import Animated, { useSharedValue, useAnimatedStyle, withSpring } from 'react-native-reanimated';
 import { Pressable } from 'react-native';
+import { useAppDesignTokens } from '../hooks/useAppDesignTokens';
 
 export type AtomicCardVariant = 'flat' | 'elevated' | 'outlined';
 export type AtomicCardPadding = 'none' | 'sm' | 'md' | 'lg' | 'xl';
@@ -28,6 +28,8 @@ export const AtomicCard: React.FC<AtomicCardProps> = ({
   children,
   testID,
 }) => {
+  const tokens = useAppDesignTokens();
+
   // Animation for tap feedback
   const scale = useSharedValue(1);
 
@@ -54,43 +56,64 @@ export const AtomicCard: React.FC<AtomicCardProps> = ({
     }
   };
 
-  // Map variants to Paper modes
-  const getPaperMode = (): 'elevated' | 'outlined' | 'contained' => {
+  // Map padding to token values
+  const getPaddingValue = (): number => {
+    const paddingMap = {
+      none: 0,
+      sm: tokens.spacing.sm,
+      md: tokens.spacing.md,
+      lg: tokens.spacing.lg,
+      xl: tokens.spacing.xl,
+    };
+    return paddingMap[padding];
+  };
+
+  // Get variant styles
+  const getVariantStyle = (): ViewStyle => {
+    const baseStyle: ViewStyle = {
+      backgroundColor: tokens.colors.surface,
+      borderRadius: tokens.borders.radius.md,
+    };
+
     switch (variant) {
       case 'elevated':
-        return 'elevated';
+        return {
+          ...baseStyle,
+          borderWidth: 1,
+          borderColor: tokens.colors.border,
+        };
+
       case 'outlined':
-        return 'outlined';
+        return {
+          ...baseStyle,
+          borderWidth: 1,
+          borderColor: tokens.colors.border,
+        };
+
       case 'flat':
-        return 'contained';
+        return {
+          ...baseStyle,
+          borderWidth: 0,
+        };
+
       default:
-        return 'elevated';
+        return baseStyle;
     }
   };
 
-  // Map padding to actual values
-  const getContentStyle = () => {
-    const paddingMap = {
-      none: 0,
-      sm: 8,
-      md: 16,
-      lg: 24,
-      xl: 32,
-    };
-    const paddingValue = paddingMap[padding];
-    return { padding: paddingValue };
-  };
+  const cardStyle: StyleProp<ViewStyle> = [
+    getVariantStyle(),
+    {
+      padding: getPaddingValue(),
+      opacity: disabled ? 0.5 : 1,
+    },
+    style,
+  ];
 
   const cardContent = (
-    <PaperCard
-      mode={getPaperMode()}
-      style={style}
-      testID={testID}
-    >
-      <PaperCard.Content style={getContentStyle()}>
-        {children}
-      </PaperCard.Content>
-    </PaperCard>
+    <View style={cardStyle} testID={testID}>
+      {children}
+    </View>
   );
 
   // If onPress provided, wrap with animated pressable

package/src/presentation/atoms/AtomicInput.tsx

@@ -1,8 +1,8 @@
 import React, { useState } from 'react';
-import { View, Pressable, StyleProp, ViewStyle, TextStyle } from 'react-native';
-import { TextInput, HelperText } from 'react-native-paper';
+import { View, TextInput, Pressable, StyleSheet, StyleProp, ViewStyle, TextStyle } from 'react-native';
 import { useAppDesignTokens } from '../hooks/useAppDesignTokens';
 import { AtomicIcon } from './AtomicIcon';
+import { AtomicText } from './AtomicText';
 import type { AtomicIconName, AtomicIconSize } from './AtomicIcon';
 
 export type AtomicInputVariant = 'outlined' | 'filled' | 'flat';
@@ -61,12 +61,12 @@ export interface AtomicInputProps {
 }
 
 /**
- * AtomicInput - Material Design 3 Text Input
+ * AtomicInput - Pure React Native Text Input
  *
  * Features:
- * - React Native Paper TextInput integration
+ * - Pure React Native implementation (no Paper dependency)
  * - Lucide icons for password toggle and custom icons
- * - Material Design 3 outlined/filled/flat variants
+ * - Outlined/filled/flat variants
  * - Error, success, disabled states
  * - Character counter
  * - Responsive sizing
@@ -100,128 +100,212 @@ export const AtomicInput: React.FC<AtomicInputProps> = ({
 }) => {
   const tokens = useAppDesignTokens();
   const [isPasswordVisible, setIsPasswordVisible] = useState(false);
+  const [isFocused, setIsFocused] = useState(false);
   const isDisabled = state === 'disabled' || disabled;
   const characterCount = value?.toString().length || 0;
+  const hasError = state === 'error';
+  const hasSuccess = state === 'success';
 
-  // Map variant to Paper mode
-  const getPaperMode = (): 'outlined' | 'flat' => {
-    if (variant === 'outlined') return 'outlined';
-    return 'flat'; // filled and flat both use 'flat' mode
+  // Size configuration
+  const sizeConfig = {
+    sm: {
+      paddingVertical: tokens.spacing.xs,
+      paddingHorizontal: tokens.spacing.sm,
+      fontSize: tokens.typography.bodySmall.fontSize,
+      iconSize: 16,
+      minHeight: 40,
+    },
+    md: {
+      paddingVertical: tokens.spacing.sm,
+      paddingHorizontal: tokens.spacing.md,
+      fontSize: tokens.typography.bodyMedium.fontSize,
+      iconSize: 20,
+      minHeight: 48,
+    },
+    lg: {
+      paddingVertical: tokens.spacing.md,
+      paddingHorizontal: tokens.spacing.lg,
+      fontSize: tokens.typography.bodyLarge.fontSize,
+      iconSize: 24,
+      minHeight: 56,
+    },
   };
 
-  // Map state to Paper error prop
-  const hasError = state === 'error';
+  const config = sizeConfig[size];
 
-  // Get icon size based on input size
-  const getIconSize = (): AtomicIconSize => {
-    switch (size) {
-      case 'sm': return 'xs';
-      case 'lg': return 'md';
-      default: return 'sm';
-    }
-  };
+  // Get variant styles
+  const getVariantStyle = (): ViewStyle => {
+    const baseStyle: ViewStyle = {
+      backgroundColor: tokens.colors.surface,
+      borderRadius: tokens.borders.radius.md,
+    };
 
-  const iconSizeName = getIconSize();
-  const iconColor = isDisabled
-    ? tokens.colors.onSurfaceDisabled
-    : tokens.colors.surfaceVariant;
-
-  // Render leading icon
-  const renderLeadingIcon = leadingIcon ? () => (
-    <AtomicIcon
-      name={leadingIcon}
-      size={iconSizeName}
-      customColor={iconColor}
-    />
-  ) : undefined;
-
-  // Render trailing icon or password toggle
-  const renderTrailingIcon = () => {
-    if (showPasswordToggle && secureTextEntry) {
-      return (
-        <Pressable onPress={() => setIsPasswordVisible(!isPasswordVisible)}>
-          <AtomicIcon
-            name={isPasswordVisible ? "EyeOff" : "Eye"}
-            size={iconSizeName}
-            customColor={iconColor}
-          />
-        </Pressable>
-      );
-    }
+    let borderColor = tokens.colors.border;
+    if (isFocused) borderColor = tokens.colors.primary;
+    if (hasError) borderColor = tokens.colors.error;
+    if (hasSuccess) borderColor = tokens.colors.success;
+    if (isDisabled) borderColor = tokens.colors.borderDisabled;
 
-    if (trailingIcon) {
-      const icon = (
-        <AtomicIcon
-          name={trailingIcon}
-          size={iconSizeName}
-          customColor={iconColor}
-        />
-      );
+    switch (variant) {
+      case 'outlined':
+        return {
+          ...baseStyle,
+          borderWidth: isFocused ? 2 : 1,
+          borderColor,
+        };
 
-      return onTrailingIconPress ? (
-        <Pressable onPress={onTrailingIconPress}>{icon}</Pressable>
-      ) : icon;
-    }
+      case 'filled':
+        return {
+          ...baseStyle,
+          backgroundColor: tokens.colors.surfaceSecondary,
+          borderWidth: 0,
+          borderBottomWidth: isFocused ? 2 : 1,
+          borderBottomColor: borderColor,
+        };
+
+      case 'flat':
+        return {
+          ...baseStyle,
+          backgroundColor: 'transparent',
+          borderWidth: 0,
+          borderBottomWidth: 1,
+          borderBottomColor: borderColor,
+          borderRadius: 0,
+        };
 
-    return undefined;
+      default:
+        return baseStyle;
+    }
   };
 
   // Get text color based on state
   const getTextColor = () => {
-    if (state === 'error') return tokens.colors.error;
-    if (state === 'success') return tokens.colors.success;
-    return tokens.colors.onSurface;
+    if (isDisabled) return tokens.colors.textDisabled;
+    if (hasError) return tokens.colors.error;
+    if (hasSuccess) return tokens.colors.success;
+    return tokens.colors.textPrimary;
   };
 
+  const iconColor = isDisabled ? tokens.colors.textDisabled : tokens.colors.textSecondary;
+
+  const containerStyle: StyleProp<ViewStyle> = [
+    styles.container,
+    getVariantStyle(),
+    {
+      paddingVertical: config.paddingVertical,
+      paddingHorizontal: config.paddingHorizontal,
+      minHeight: config.minHeight,
+      opacity: isDisabled ? 0.5 : 1,
+    },
+    style,
+  ];
+
+  const textInputStyle: StyleProp<TextStyle> = [
+    styles.input,
+    {
+      fontSize: config.fontSize,
+      color: getTextColor(),
+    },
+    leadingIcon ? { paddingLeft: config.iconSize + 8 } : undefined,
+    (trailingIcon || showPasswordToggle) ? { paddingRight: config.iconSize + 8 } : undefined,
+    inputStyle,
+  ];
+
   return (
-    <View style={style} testID={testID}>
-      <TextInput
-        mode={getPaperMode()}
-        label={label}
-        value={value}
-        onChangeText={onChangeText}
-        placeholder={placeholder}
-        error={hasError}
-        disabled={isDisabled}
-        secureTextEntry={secureTextEntry && !isPasswordVisible}
-        maxLength={maxLength}
-        keyboardType={keyboardType}
-        autoCapitalize={autoCapitalize}
-        autoCorrect={autoCorrect}
-        left={renderLeadingIcon ? <TextInput.Icon icon={renderLeadingIcon} /> : undefined}
-        right={renderTrailingIcon() ? <TextInput.Icon icon={renderTrailingIcon} /> : undefined}
-        style={inputStyle}
-        textColor={getTextColor()}
-        onBlur={onBlur}
-        onFocus={onFocus}
-        testID={testID ? `${testID}-input` : undefined}
-      />
+    <View testID={testID}>
+      {label && (
+        <AtomicText
+          type="labelMedium"
+          color={hasError ? 'error' : hasSuccess ? 'success' : 'secondary'}
+          style={styles.label}
+        >
+          {label}
+        </AtomicText>
+      )}
+
+      <View style={containerStyle}>
+        {leadingIcon && (
+          <View style={styles.leadingIcon}>
+            <AtomicIcon
+              name={leadingIcon}
+              customSize={config.iconSize}
+              customColor={iconColor}
+            />
+          </View>
+        )}
+
+        <TextInput
+          value={value}
+          onChangeText={onChangeText}
+          placeholder={placeholder}
+          placeholderTextColor={tokens.colors.textSecondary}
+          secureTextEntry={secureTextEntry && !isPasswordVisible}
+          maxLength={maxLength}
+          keyboardType={keyboardType}
+          autoCapitalize={autoCapitalize}
+          autoCorrect={autoCorrect}
+          editable={!isDisabled}
+          style={textInputStyle}
+          onBlur={() => {
+            setIsFocused(false);
+            onBlur?.();
+          }}
+          onFocus={() => {
+            setIsFocused(true);
+            onFocus?.();
+          }}
+          testID={testID ? `${testID}-input` : undefined}
+        />
+
+        {(showPasswordToggle && secureTextEntry) && (
+          <Pressable
+            onPress={() => setIsPasswordVisible(!isPasswordVisible)}
+            style={styles.trailingIcon}
+          >
+            <AtomicIcon
+              name={isPasswordVisible ? "EyeOff" : "Eye"}
+              customSize={config.iconSize}
+              customColor={iconColor}
+            />
+          </Pressable>
+        )}
+
+        {trailingIcon && !showPasswordToggle && (
+          <Pressable
+            onPress={onTrailingIconPress}
+            style={styles.trailingIcon}
+            disabled={!onTrailingIconPress}
+          >
+            <AtomicIcon
+              name={trailingIcon}
+              customSize={config.iconSize}
+              customColor={iconColor}
+            />
+          </Pressable>
+        )}
+      </View>
 
       {(helperText || showCharacterCount) && (
-        <View style={{
-          flexDirection: 'row',
-          justifyContent: 'space-between',
-          marginTop: tokens.spacing.xs,
-        }}>
+        <View style={styles.helperRow}>
           {helperText && (
-            <HelperText
-              type={hasError ? 'error' : 'info'}
-              visible={Boolean(helperText)}
-              style={{ flex: 1 }}
+            <AtomicText
+              type="bodySmall"
+              color={hasError ? 'error' : 'secondary'}
+              style={styles.helperText}
               testID={testID ? `${testID}-helper` : undefined}
             >
               {helperText}
-            </HelperText>
+            </AtomicText>
           )}
           {showCharacterCount && maxLength && (
-            <HelperText
-              type="info"
-              visible={true}
-              style={{ marginLeft: tokens.spacing.xs }}
+            <AtomicText
+              type="bodySmall"
+              color="secondary"
+              style={styles.characterCount}
               testID={testID ? `${testID}-count` : undefined}
             >
               {characterCount}/{maxLength}
-            </HelperText>
+            </AtomicText>
           )}
         </View>
       )}
@@ -229,4 +313,38 @@ export const AtomicInput: React.FC<AtomicInputProps> = ({
   );
 };
 
+const styles = StyleSheet.create({
+  container: {
+    flexDirection: 'row',
+    alignItems: 'center',
+  },
+  input: {
+    flex: 1,
+  },
+  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/presentation/atoms/AtomicText.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
-import { Text as PaperText } from 'react-native-paper';
-import { StyleProp, TextStyle } from 'react-native';
+import { Text, StyleProp, TextStyle } from 'react-native';
+import { useAppDesignTokens } from '../hooks/useAppDesignTokens';
 
 export type TextStyleVariant =
   | 'displayLarge' | 'displayMedium' | 'displaySmall'
@@ -37,14 +37,46 @@ export const AtomicText: React.FC<AtomicTextProps> = ({
   style,
   testID,
 }) => {
+  const tokens = useAppDesignTokens();
+
+  // Get typography style from tokens
+  const typographyStyle = tokens.typography[type];
+
+  // Get color from tokens or use custom color
+  const getTextColor = (): string => {
+    if (!color) {
+      return tokens.colors.textPrimary;
+    }
+
+    // Check if it's a semantic color name
+    const colorMap: Record<ColorVariant, string> = {
+      primary: tokens.colors.textPrimary,
+      secondary: tokens.colors.textSecondary,
+      tertiary: tokens.colors.textTertiary,
+      disabled: tokens.colors.textDisabled,
+      inverse: tokens.colors.textInverse,
+      success: tokens.colors.success,
+      error: tokens.colors.error,
+      warning: tokens.colors.warning,
+      info: tokens.colors.info,
+    };
+
+    return colorMap[color as ColorVariant] || color;
+  };
+
+  const textStyle: StyleProp<TextStyle> = [
+    typographyStyle,
+    { color: getTextColor() },
+    style,
+  ];
+
   return (
-    <PaperText
-      variant={type}
+    <Text
       numberOfLines={numberOfLines}
-      style={style}
+      style={textStyle}
       testID={testID}
     >
       {children}
-    </PaperText>
+    </Text>
   );
 };

package/src/presentation/atoms/AtomicTextArea.tsx

@@ -1,12 +1,12 @@
 /**
  * AtomicTextArea Component
  *
- * A multiline text input component with Material Design 3 integration
+ * A multiline text input component with pure React Native implementation
  * for longer text entry with consistent styling.
  *
  * Features:
- * - React Native Paper TextInput with multiline
- * - Material Design 3 outlined/filled/flat variants
+ * - Pure React Native TextInput with multiline
+ * - Outlined/filled/flat variants
  * - Error, success, disabled states
  * - Character counter with max length
  * - Helper text for guidance or errors
@@ -31,10 +31,10 @@
  * ```
  */
 
-import React from 'react';
-import { View, StyleProp, ViewStyle, TextStyle } from 'react-native';
-import { TextInput, HelperText } from 'react-native-paper';
+import React, { useState } from 'react';
+import { View, TextInput, StyleSheet, StyleProp, ViewStyle, TextStyle } from 'react-native';
 import { useAppDesignTokens } from '../hooks/useAppDesignTokens';
+import { AtomicText } from './AtomicText';
 
 export type AtomicTextAreaVariant = 'outlined' | 'filled' | 'flat';
 export type AtomicTextAreaState = 'default' | 'error' | 'success' | 'disabled';
@@ -84,7 +84,7 @@ export interface AtomicTextAreaProps {
 }
 
 /**
- * AtomicTextArea - Material Design 3 Multiline Text Input
+ * AtomicTextArea - Pure React Native Multiline Text Input
  */
 export const AtomicTextArea: React.FC<AtomicTextAreaProps> = ({
   variant = 'outlined',
@@ -109,85 +109,177 @@ export const AtomicTextArea: React.FC<AtomicTextAreaProps> = ({
   onFocus,
 }) => {
   const tokens = useAppDesignTokens();
+  const [isFocused, setIsFocused] = useState(false);
   const isDisabled = state === 'disabled' || disabled;
   const characterCount = value?.toString().length || 0;
+  const hasError = state === 'error';
+  const hasSuccess = state === 'success';
 
-  // Map variant to Paper mode
-  const getPaperMode = (): 'outlined' | 'flat' => {
-    if (variant === 'outlined') return 'outlined';
-    return 'flat'; // filled and flat both use 'flat' mode
+  // Size configuration
+  const sizeConfig = {
+    sm: {
+      paddingVertical: tokens.spacing.xs,
+      paddingHorizontal: tokens.spacing.sm,
+      fontSize: tokens.typography.bodySmall.fontSize,
+      lineHeight: 20,
+    },
+    md: {
+      paddingVertical: tokens.spacing.sm,
+      paddingHorizontal: tokens.spacing.md,
+      fontSize: tokens.typography.bodyMedium.fontSize,
+      lineHeight: 24,
+    },
+    lg: {
+      paddingVertical: tokens.spacing.md,
+      paddingHorizontal: tokens.spacing.lg,
+      fontSize: tokens.typography.bodyLarge.fontSize,
+      lineHeight: 28,
+    },
   };
 
-  // Map state to Paper error prop
-  const hasError = state === 'error';
+  const config = sizeConfig[size];
 
   // Calculate height based on rows
   const getTextAreaHeight = () => {
     if (minHeight) return minHeight;
+    const paddingVertical = config.paddingVertical * 2;
+    return (rows * config.lineHeight) + paddingVertical;
+  };
+
+  // Get variant styles
+  const getVariantStyle = (): ViewStyle => {
+    const baseStyle: ViewStyle = {
+      backgroundColor: tokens.colors.surface,
+      borderRadius: tokens.borders.radius.md,
+    };
+
+    let borderColor = tokens.colors.border;
+    if (isFocused) borderColor = tokens.colors.primary;
+    if (hasError) borderColor = tokens.colors.error;
+    if (hasSuccess) borderColor = tokens.colors.success;
+    if (isDisabled) borderColor = tokens.colors.borderDisabled;
+
+    switch (variant) {
+      case 'outlined':
+        return {
+          ...baseStyle,
+          borderWidth: isFocused ? 2 : 1,
+          borderColor,
+        };
+
+      case 'filled':
+        return {
+          ...baseStyle,
+          backgroundColor: tokens.colors.surfaceSecondary,
+          borderWidth: 0,
+          borderBottomWidth: isFocused ? 2 : 1,
+          borderBottomColor: borderColor,
+        };
 
-    // Base line height: 24px per row (approximate)
-    const lineHeight = 24;
-    const padding = 32; // Top and bottom padding
-    return (rows * lineHeight) + padding;
+      case 'flat':
+        return {
+          ...baseStyle,
+          backgroundColor: 'transparent',
+          borderWidth: 0,
+          borderBottomWidth: 1,
+          borderBottomColor: borderColor,
+          borderRadius: 0,
+        };
+
+      default:
+        return baseStyle;
+    }
   };
 
   // Get text color based on state
   const getTextColor = () => {
-    if (state === 'error') return tokens.colors.error;
-    if (state === 'success') return tokens.colors.success;
-    return tokens.colors.onSurface;
+    if (isDisabled) return tokens.colors.textDisabled;
+    if (hasError) return tokens.colors.error;
+    if (hasSuccess) return tokens.colors.success;
+    return tokens.colors.textPrimary;
   };
 
+  const containerStyle: StyleProp<ViewStyle> = [
+    styles.container,
+    getVariantStyle(),
+    {
+      paddingVertical: config.paddingVertical,
+      paddingHorizontal: config.paddingHorizontal,
+      height: getTextAreaHeight(),
+      opacity: isDisabled ? 0.5 : 1,
+    },
+    style,
+  ];
+
+  const textInputStyle: StyleProp<TextStyle> = [
+    styles.input,
+    {
+      fontSize: config.fontSize,
+      lineHeight: config.lineHeight,
+      color: getTextColor(),
+    },
+    inputStyle,
+  ];
+
   return (
-    <View style={style} testID={testID}>
-      <TextInput
-        mode={getPaperMode()}
-        label={label}
-        value={value}
-        onChangeText={onChangeText}
-        placeholder={placeholder}
-        error={hasError}
-        disabled={isDisabled}
-        maxLength={maxLength}
-        autoCapitalize={autoCapitalize}
-        autoCorrect={autoCorrect}
-        multiline={true}
-        numberOfLines={rows}
-        style={[
-          { height: getTextAreaHeight(), textAlignVertical: 'top' },
-          inputStyle,
-        ]}
-        textColor={getTextColor()}
-        onBlur={onBlur}
-        onFocus={onFocus}
-        testID={testID ? `${testID}-input` : undefined}
-      />
+    <View testID={testID}>
+      {label && (
+        <AtomicText
+          type="labelMedium"
+          color={hasError ? 'error' : hasSuccess ? 'success' : 'secondary'}
+          style={styles.label}
+        >
+          {label}
+        </AtomicText>
+      )}
+
+      <View style={containerStyle}>
+        <TextInput
+          value={value}
+          onChangeText={onChangeText}
+          placeholder={placeholder}
+          placeholderTextColor={tokens.colors.textSecondary}
+          maxLength={maxLength}
+          autoCapitalize={autoCapitalize}
+          autoCorrect={autoCorrect}
+          editable={!isDisabled}
+          multiline={true}
+          numberOfLines={rows}
+          textAlignVertical="top"
+          style={textInputStyle}
+          onBlur={() => {
+            setIsFocused(false);
+            onBlur?.();
+          }}
+          onFocus={() => {
+            setIsFocused(true);
+            onFocus?.();
+          }}
+          testID={testID ? `${testID}-input` : undefined}
+        />
+      </View>
 
       {(helperText || showCharacterCount) && (
-        <View style={{
-          flexDirection: 'row',
-          justifyContent: 'space-between',
-          marginTop: tokens.spacing.xs,
-        }}>
+        <View style={styles.helperRow}>
           {helperText && (
-            <HelperText
-              type={hasError ? 'error' : 'info'}
-              visible={Boolean(helperText)}
-              style={{ flex: 1 }}
+            <AtomicText
+              type="bodySmall"
+              color={hasError ? 'error' : 'secondary'}
+              style={styles.helperText}
               testID={testID ? `${testID}-helper` : undefined}
             >
               {helperText}
-            </HelperText>
+            </AtomicText>
           )}
           {showCharacterCount && maxLength && (
-            <HelperText
-              type="info"
-              visible={true}
-              style={{ marginLeft: tokens.spacing.xs }}
+            <AtomicText
+              type="bodySmall"
+              color="secondary"
+              style={styles.characterCount}
               testID={testID ? `${testID}-count` : undefined}
             >
               {characterCount}/{maxLength}
-            </HelperText>
+            </AtomicText>
           )}
         </View>
       )}
@@ -195,4 +287,27 @@ export const AtomicTextArea: React.FC<AtomicTextAreaProps> = ({
   );
 };
 
+const styles = StyleSheet.create({
+  container: {
+    justifyContent: 'flex-start',
+  },
+  input: {
+    flex: 1,
+  },
+  label: {
+    marginBottom: 4,
+  },
+  helperRow: {
+    flexDirection: 'row',
+    justifyContent: 'space-between',
+    marginTop: 4,
+  },
+  helperText: {
+    flex: 1,
+  },
+  characterCount: {
+    marginLeft: 8,
+  },
+});
+
 export type { AtomicTextAreaProps as TextAreaProps };

package/src/presentation/organisms/FormContainer.tsx

@@ -1,17 +1,16 @@
 /**
  * FormContainer Component
  *
- * A reusable container for forms with Material Design 3 integration,
- * proper keyboard handling, and responsive layout.
+ * A reusable container for forms with proper keyboard handling and responsive layout.
  *
  * Features:
- * - Material Design 3 Surface component for elevation and theme integration
+ * - Pure React Native implementation (no Paper dependency)
  * - Universal keyboard handling (no platform-specific code)
  * - ScrollView with automatic content padding
  * - Safe area insets for bottom tab navigation overlap
  * - Responsive max width for large screens (tablets)
  * - Consistent vertical spacing between form elements
- * - Theme-aware surface colors and elevation
+ * - Theme-aware surface colors
  * - Optimized performance with memoized styles
  *
  * Usage:
@@ -31,13 +30,12 @@
  * - Consistent form layout across all 100+ generated apps
  * - Responsive design for tablets (max 700px) and phones (full width)
  * - Automatic vertical spacing between form elements (no manual marginBottom)
- * - Material Design 3 surface with proper elevation
  * - Reduces boilerplate in form screens
  * - Universal code - no platform checks, works on iOS, Android, Web
  *
  * Technical Details:
  * - Uses ScrollView with contentContainerStyle for keyboard handling
- * - React Native Paper Surface for Material Design 3 integration
+ * - Pure React Native View for surface (lightweight)
  * - Vertical spacing via Children.map() wrapping (universal compatibility)
  * - Safe area insets from react-native-safe-area-context
  * - Responsive values from useResponsive hook
@@ -53,7 +51,6 @@ import {
   StyleProp,
   ViewStyle,
 } from 'react-native';
-import { Surface } from 'react-native-paper';
 import { useSafeAreaInsets } from 'react-native-safe-area-context';
 import { useAppDesignTokens } from '../hooks/useAppDesignTokens';
 import { useResponsive } from '../hooks/useResponsive';
@@ -72,15 +69,15 @@ export interface FormContainerProps {
   showsVerticalScrollIndicator?: boolean;
   /** Optional test ID for E2E testing */
   testID?: string;
-  /** Disable Material Design elevation (default: false) */
-  disableElevation?: boolean;
+  /** Show surface border (default: true) */
+  showBorder?: boolean;
 }
 
 /**
  * FormContainer - Universal form wrapper component
  *
  * Wraps forms with:
- * - Material Design 3 Surface component
+ * - Pure React Native surface
  * - Universal keyboard handling (no platform checks)
  * - ScrollView for content overflow
  * - Safe area insets (bottom tabs, notch)
@@ -93,7 +90,7 @@ export const FormContainer: React.FC<FormContainerProps> = ({
   contentContainerStyle,
   showsVerticalScrollIndicator = false,
   testID,
-  disableElevation = false,
+  showBorder = true,
 }) => {
   const tokens = useAppDesignTokens();
   const insets = useSafeAreaInsets();
@@ -111,6 +108,9 @@ export const FormContainer: React.FC<FormContainerProps> = ({
         surface: {
           flex: 1,
           backgroundColor: tokens.colors.surface,
+          borderWidth: showBorder ? 1 : 0,
+          borderColor: tokens.colors.border,
+          borderRadius: tokens.borders.radius.md,
         },
         scrollView: {
           flex: 1,
@@ -135,12 +135,15 @@ export const FormContainer: React.FC<FormContainerProps> = ({
     [
       tokens.colors.backgroundPrimary,
       tokens.colors.surface,
+      tokens.colors.border,
+      tokens.borders.radius.md,
       tokens.spacing.lg,
       tokens.spacing.xl,
       formBottomPadding,
       formContentWidth,
       formElementSpacing,
       insets.bottom,
+      showBorder,
     ]
   );
 
@@ -160,10 +163,7 @@ export const FormContainer: React.FC<FormContainerProps> = ({
 
   return (
     <View style={[styles.container, containerStyle]} testID={testID}>
-      <Surface
-        style={styles.surface}
-        elevation={disableElevation ? 0 : 1}
-      >
+      <View style={styles.surface}>
         <ScrollView
           style={styles.scrollView}
           contentContainerStyle={[styles.contentContainer, contentContainerStyle]}
@@ -174,7 +174,7 @@ export const FormContainer: React.FC<FormContainerProps> = ({
         >
           {childrenWithSpacing}
         </ScrollView>
-      </Surface>
+      </View>
     </View>
   );
 };

package/src/presentation/tokens/core/ColorPalette.ts

@@ -155,6 +155,7 @@ export const lightColors = {
   borderLight: '#F1F5F9',
   borderMedium: '#CBD5E1',
   borderFocus: '#3B82F6',
+  borderDisabled: '#F1F5F9',
 
   // =============================================================================
   // COMPONENT-SPECIFIC COLORS
@@ -327,6 +328,7 @@ export const darkColors = {
   borderLight: '#475569',            // Slate 600 - Light border
   borderMedium: '#64748B',           // Slate 500 - Medium border
   borderFocus: '#60A5FA',            // Blue 400 - Focus border (lighter)
+  borderDisabled: '#475569',         // Slate 600 - Disabled border
 
   // =============================================================================
   // COMPONENT-SPECIFIC COLORS (dark mode specific)