A client-side React input component with support for labels, validation states, adornments, loading indicators, and range slider rendering. ## Key Components - **`Input`** — A `forwardRef` component extending `React.InputHTMLAttributes` with additional props for UI composition and validation feedback. - **`InputProps`** — Interface extending native input attributes with fields: `invalid`, `startAdornment`, `endAdornment`, `label`, `error`, `errorVariant`, and `loading`. - **`invalidBorderClasses`** — Internal map of Tailwind border classes applied per invalid variant (`"error"` | `"warning"`). - **`FieldWrapper`** — Wraps the input with a label and status message when `label` or `error` props are provided. ## Usage Example ```typescript import { Input } from "@/components/ui/input"; import { Search } from "lucide-react"; // Basic with label and validation // With adornments and loading state } loading={isSearching} placeholder="Search..." /> // Warning variant (invalid border without error severity) // Range slider (stripped-down rendering, no border/adornments) ``` ## Notes - `"error"` and `"warning"` variants both mark the field visually invalid (colored border); `"success"` and `"muted"` are informational only. - `type="range"` receives a separate rendering path with a custom slider style and no wrapper chrome. - The `loading` prop takes precedence over `endAdornment` — both will not render simultaneously. - Autofill background override is handled via webkit-specific CSS to preserve theme colors.