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

<Meta of={AspectRatioStories} />

<Title />
<Subtitle>Displays content within a fixed ratio.</Subtitle>

<Description />

<Primary />

---

## Variations

<Stories />

---

## AI Best Practices

> [!IMPORTANT]
> - **Width Constraints** — Hand over a defined width to the parent container; `AspectRatio` will compute the height.
> - **Child Fill** — Children must use `w-full h-full` and `object-cover` for images to properly fill the container.