Initial commit

docs/form-inputs/input.md

@@ -0,0 +1,95 @@
+# Input Component Documentation
+
+## Overview
+
+The Input component represents a fundamental UI element within the toolkit, supporting multiple visual presentations, dimensions, and operational states.
+
+## Props Configuration
+
+### InputRoot Properties
+
+| Property | Type | Default | Purpose |
+|----------|------|---------|---------|
+| `size` | `'sm' \| 'base' \| 'lg'` | `'base'` | Adjusts input dimensions |
+| `state` | `'default' \| 'error'` | `'default'` | Visual feedback styling |
+| `side` | `'left' \| 'center' \| 'right'` | — | Text positioning and cursor placement |
+| `inputClassName` | `string` | — | Custom classes for inner input element |
+| Standard input attributes | `ComponentProps<'input'>` | — | Native HTML input properties |
+
+### InputSlot Properties
+
+| Property | Type | Default | Purpose |
+|----------|------|---------|---------|
+| `side` | `'left' \| 'right'` | `'left'` | Slot positioning |
+| Standard div attributes | `ComponentProps<'div'>` | — | Native HTML div properties |
+
+## Type Definitions
+
+```typescript
+interface InputRootProps extends ComponentProps<"div">, VariantProps<typeof inputVariants> {
+  state?: "default" | "error";
+  side?: "left" | "right" | "center";
+  asChild?: boolean;
+  inputClassName?: string;
+  size?: "sm" | "base" | "lg";
+}
+
+interface InputSlotProps extends ComponentProps<"div"> {
+  side?: "left" | "right";
+}
+```
+
+## Text Alignment Options
+
+The component accommodates three alignment directions: left (default), center, and right. Slot components enable prefixes and suffixes through positioned elements.
+
+## State Management
+
+**Default State**: Standard appearance for typical interactions
+
+**Error State**: Visual indication for validation failures and user feedback
+
+**Disabled State**: Prevents user interaction and modification
+
+## Input Type Examples
+
+- **Text Input**: Standard character input
+- **Number Input**: Numeric values with optional currency symbols
+- **Password Input**: Masked character display
+- **Email Input**: Email-specific validation
+- **Search Input**: Search functionality with supplementary icons
+
+## Interactive Examples
+
+### Character Counter Implementation
+
+```javascript
+const [value, setValue] = useState('');
+const [count, setCount] = useState(0);
+
+return (
+  <InputRoot
+    size="sm"
+    placeholder="Type something..."
+    value={value}
+    onChange={(e) => {
+      setValue(e.target.value);
+      setCount(e.target.value.length);
+    }}
+  />
+);
+```
+
+### Calculation Feature
+
+Combines price and quantity inputs for real-time total computation:
+
+```javascript
+const [price, setPrice] = useState('');
+const [quantity, setQuantity] = useState('');
+const total = (parseFloat(price) || 0) * (parseInt(quantity) || 0);
+```
+
+### Form Validation Pattern
+
+Implements error detection and submission handling through state management and conditional styling based on validation results.