# INPUT COMPONENTS - COMPREHENSIVE PROPS REVIEW
# ==============================================

## COMPONENT OVERVIEW
====================
The Input module contains three main components:
1. Input (Standard Text Input)
2. InputNumeric (Numeric/Currency Input) 
3. InputInline (Inline Editing Input)

## COMPONENT-SPECIFIC PROPS
===========================

### 1. INPUT (Standard Text Input)
==================================
**Purpose**: Versatile text input for general text, passwords, and emails
**File**: Input.tsx / Input.types.ts

**Core Props**:
- id?: string                    // Unique identifier for accessibility/testing
- label?: string                 // Text label displayed above input
- type: "text" | "password" | "email"  // Input type with validation
- value?: string                 // Controlled input value
- placeholder?: string           // Placeholder text when empty
- assistiveText?: string         // Helper text below input
- maxLength?: number             // Character limit

**Visual & Styling**:
- style?: React.CSSProperties    // Custom CSS styles
- className?: string             // Additional CSS classes
- icon?: string                  // Icon name to display
- iconPosition?: "left" | "right" // Icon placement (default: "right")

**State & Behavior**:
- isDisabled?: boolean           // Disable input interaction
- loading?: boolean              // Show loading state
- autoFocus?: boolean            // Auto-focus on mount

**Interactive Elements**:
- buttonText?: string            // Text for button inside input
- tooltip?: string               // Tooltip text for info icon

**Event Handlers**:
- onChange?: (value: string) => void    // Value change callback
- onClick?: () => void                  // Button click callback

**Internal State**:
- focused: boolean               // Focus state for styling
- inputRef: RefObject           // Reference to input element

### 2. INPUT NUMERIC
===================
**Purpose**: Specialized input for numeric values with currency formatting
**File**: InputNumeric.tsx / InputNumeric.types.ts

**Core Props**:
- id?: string                    // Unique identifier
- label?: string                 // Text label above input
- type: "currency" | "number"    // Numeric input type
- value?: any                    // Numeric value (number or string)
- placeholder?: string           // Placeholder text
- assistiveText?: string         // Helper text below

**Numeric Validation**:
- isInteger?: boolean            // Only allow integers (default: false)
- step?: number                  // Increment/decrement step (default: 0.1)
- decimalPlaces?: number         // Number of decimal places
- min?: number                   // Minimum allowed value
- max?: number                   // Maximum allowed value
- maxLength?: number             // Character limit

**Visual & Styling**:
- style?: React.CSSProperties    // Custom CSS styles
- className?: string             // Additional CSS classes
- icon?: string                  // Icon name
- iconPosition?: "left" | "right" // Icon placement (default: "right")

**State & Behavior**:
- isDisabled?: boolean           // Disable input
- loading?: boolean              // Loading state

**Interactive Elements**:
- buttonText?: string            // Button text inside input
- tooltip?: string               // Tooltip text

**Event Handlers**:
- onChange?: (value: any) => void // Value change callback
- onClick?: () => void           // Button click callback

**Internal State**:
- focused: boolean               // Focus state for styling
- currencyValue: string          // Formatted currency display

**Special Features**:
- Currency formatting with '$' prefix
- Decimal place validation
- Integer-only mode
- Min/max value constraints

### 3. INPUT INLINE
==================
**Purpose**: Inline editing input with edit/save/cancel functionality
**File**: InputInline.tsx / InputInline.types.tsx

**Core Props**:
- id?: string                    // Unique identifier
- type: "text" | "password" | "email"  // Input type
- value?: string                 // Current value
- placeholder?: string           // Placeholder text
- assistiveText?: string         // Helper text below

**Styling**:
- style?: React.CSSProperties    // Input container styles
- valueStyle?: React.CSSProperties // Styles for displayed value
- className?: string             // Additional CSS classes

**State & Behavior**:
- disabled?: boolean             // Disable editing
- loading?: boolean              // Loading state
- maxLength?: number             // Character limit

**Event Handlers**:
- onChange?: (value: string) => void // Value change callback
- onClick?: () => void           // Click callback

**Internal State**:
- focused: boolean               // Focus state
- invalid: boolean               // Validation state
- editMode: boolean              // Edit mode toggle
- backupValue: string            // Temporary value during editing

**Special Features**:
- Toggle between view/edit modes
- Check (save) and cancel buttons
- Validation on save
- Backup value management

## SHARED PROPS ACROSS COMPONENTS
=================================

### Common Props (All Components):
- id?: string                    // Unique identifier
- value?: string | any           // Input value
- placeholder?: string           // Placeholder text
- assistiveText?: string         // Helper text
- style?: React.CSSProperties    // Custom styles
- className?: string             // CSS classes
- loading?: boolean              // Loading state
- onChange?: (value: any) => void // Change callback

### Visual Props (Input & InputNumeric):
- label?: string                 // Label text
- icon?: string                  // Icon name
- iconPosition?: "left" | "right" // Icon placement
- tooltip?: string               // Tooltip text
- buttonText?: string            // Button text

### State Props (Input & InputNumeric):
- isDisabled?: boolean           // Disable state
- autoFocus?: boolean            // Auto-focus (Input only)

### Validation Props (InputNumeric):
- min?: number                   // Minimum value
- max?: number                   // Maximum value
- maxLength?: number             // Character limit
- isInteger?: boolean            // Integer-only
- decimalPlaces?: number         // Decimal precision
- step?: number                  // Step increment

## COMPONENT-SPECIFIC FEATURES
==============================

### Input (Standard):
- Text, password, email types
- Icon click to focus
- Button integration
- Tooltip support

### InputNumeric:
- Currency formatting
- Decimal place validation
- Step increments
- Min/max constraints
- Integer mode

### InputInline:
- Edit mode toggle
- Save/cancel functionality
- Validation on save
- Backup value management
- View/edit state switching

## USAGE RECOMMENDATIONS
========================

### Use Input when:
- General text input needed
- Password or email input required
- Simple form fields

### Use InputNumeric when:
- Currency values needed
- Numeric validation required
- Step increments needed
- Min/max constraints required

### Use InputInline when:
- Inline editing required
- Save/cancel workflow needed
- Minimal UI footprint desired
- Quick value editing needed
