<!-- source-hash: 5d248f58ad416e0486c3eb74baeb29fc -->
A styled, accessible HTML input component built with `React.forwardRef`, supporting error states and full HTML input attribute passthrough.

## Key Components

- **`Input`** — Forwarded-ref input component with ODS (OpenFrame Design System) theming, focus/disabled states, hover animations, and optional error styling
- **`InputProps`** — Extended interface adding an `invalid` boolean prop on top of standard `React.InputHTMLAttributes<HTMLInputElement>`

## Usage Example

```typescript
import { Input } from "./input"

// Basic usage
<Input placeholder="Enter your email" type="email" />

// With error state
<Input
  type="text"
  invalid={true}
  placeholder="Invalid field"
/>

// With ref forwarding
const ref = React.useRef<HTMLInputElement>(null)
<Input ref={ref} type="text" />

// Disabled state
<Input disabled placeholder="Not editable" />
```

## Styling Highlights

| State | Applied Classes |
|-------|----------------|
| Default | `bg-ods-card border-ods-border text-ods-text-primary` |
| Hover | `hover:border-ods-accent/30` |
| Focus | `focus:border-ods-accent focus-visible:ring-ods-accent/20` |
| Disabled | `disabled:cursor-not-allowed disabled:bg-ods-bg` |
| Invalid | `border-red-500 focus-visible:ring-red-500` |