<!-- source-hash: bbf76fcab5ddf0e39246fdc2d4fe5d17 -->
Storybook stories for the `FileUpload` UI component, showcasing drag-and-drop file upload variants including label, multi-file, image-only, interactive state management, and disabled states.

## Key Components

| Story | Description |
|-------|-------------|
| `Default` | Basic dropzone with no additional configuration |
| `WithLabel` | Dropzone with a field label (`Attachments`) |
| `Multiple` | Multi-file upload with custom label and description |
| `ImagesOnly` | Restricted to `image/*` MIME types |
| `Interactive` | Stateful render with live file count display |
| `Disabled` | Non-interactive disabled dropzone |

## Usage Example

```typescript
// Basic usage
<FileUpload onChange={(files) => console.log(files)} />

// Multi-file with label
<FileUpload
  multiple
  fieldLabel="Attachments"
  label="Upload Files"
  description="(Click Here or Drag and Drop)"
  onChange={(files) => handleFiles(files)}
/>

// Images only
<FileUpload
  accept="image/*"
  label="Upload Images"
  description="PNG, JPEG, WebP only"
  onChange={(files) => handleImages(files)}
/>

// Controlled (stateful)
const [files, setFiles] = useState<File[]>([]);
<FileUpload
  value={files}
  onChange={(f) => setFiles(f as File[] || [])}
  multiple
  fieldLabel="Upload Files"
/>
```

## Notes

- All stories are wrapped in a `500px` container via a shared decorator for consistent layout.
- The `Interactive` story demonstrates controlled usage with `useState`, reflecting selected file count below the dropzone.
- `accept` prop follows standard MIME type syntax (e.g. `"image/*"`).
- `autodocs` tag enables automatic Storybook documentation generation.