import { Canvas, Meta } from '@storybook/blocks'
import * as Stories from './FileUploadField.stories'

<Meta of={Stories} />

# FileUploadField

A drag-and-drop file upload area with progress tracking and previews.

## Usage

```tsx
import { FileUploadField } from '@/components/onboarding'

<FileUploadField
  id="documents"
  label="Upload Documents"
  accept=".pdf,.doc,.docx"
  maxSize={10 * 1024 * 1024}
  maxFiles={5}
  files={uploadedFiles}
  onChange={handleUpload}
  onRemove={handleRemove}
/>
```

## Examples

### Default

<Canvas of={Stories.Default} />

### With Files

<Canvas of={Stories.WithFiles} />

### Image Upload

<Canvas of={Stories.ImageUpload} />

### With Error

<Canvas of={Stories.WithError} />

### Disabled

<Canvas of={Stories.Disabled} />