import { Meta, Title, Subtitle, Description, Primary, Controls, Stories, Canvas } from '@storybook/addon-docs/blocks';
import * as FileUploadStories from './file-upload.stories';

<Meta of={FileUploadStories} />

<Title />
<Subtitle>A drag-and-drop file uploader with type and size validation.</Subtitle>

<Description />

<Primary />

---

## Variations

<Stories />

---

## AI Best Practices

> [!IMPORTANT]
> - **Validation** — Always use `accept` and `maxSize` to restrict file types and sizes as early as possible.
> - **Form Integration** — Use the `onFilesChange` callback to manually update form states (e.g., using `field.onChange` in React Hook Form).
> - **UX** — For the best experience, specify a clear maximum width for the dropzone container.
> - **Compact layout** — Use `size="compact"` in dense forms or sidebars instead of hand-building a smaller drop zone.
> - **Localization** — Every visible string (`uploadLabel`, `dragAndDropLabel`, `multipleFilesLabel`, `singleFileLabel`, `maxSizeLabel`, `sizeErrorLabel`, `countErrorLabel`) is a prop — override them instead of hardcoding a wrapper with translated copy.