Storybook stories for the `Input` UI component, covering all supported props, states, and adornment combinations for visual testing and documentation. ## Key Components | Story | Description | |---|---| | `Default` | Basic input with placeholder text | | `WithEndAdornmentText` | Input with trailing text label (e.g., "Seconds") | | `WithStartAdornmentIcon` | Input with leading icon or emoji | | `WithBothAdornments` | Combined start and end adornments (e.g., currency `$` / `USD`) | | `DisabledWithAdornments` | Disabled state with adornments | | `InvalidWithAdornments` | Error state with adornments | | `NumberWithUnit` | Numeric input with unit suffix | | `WithLabel` | Input with an accessible label | | `WithLabelAndError` | Label + inline error message | | `SearchInput` | Controlled search input with `SearchIcon` start adornment | | `Loading` | Input showing a loading spinner | | `WithButton` | Input paired with a submit `Button` | | `AllVariants` | Side-by-side comparison of all visual states | | `ErrorState` | Full matrix of error/status variants: short, long-wrapping, success, and muted | ## Usage Example ```typescript // Controlled search input with icon adornment import { useState } from 'react'; import { Input } from '../components/ui/input'; import { SearchIcon } from '../components/icons-v2-generated/interface/search-icon'; function SearchField() { const [value, setValue] = useState(''); return ( setValue(e.target.value)} placeholder="Search..." startAdornment={} loading={false} /> ); } // Input with label, error, and end adornment // Error status variants ``` ## Notes - `errorVariant` accepts `"success"` and `"muted"` in addition to the default error styling. - Long error messages wrap up to two lines before truncating with ellipsis. - Stories using stateful interactions (e.g., `SearchInput`, `WithButton`) use the `render` function pattern with `useState`.