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

<Meta of={HoverCardStories} />

<Title />
<Subtitle>A non-interactive floating panel for content previews.</Subtitle>

<Description />

<Primary />

---

## Variations

<Stories />

---

## AI Best Practices

> [!IMPORTANT]
> - **Non-Interactive** — Use `HoverCard` only for read-only content previews. For interactive elements that require clicks inside the panel, use `Popover`.
> - **Width Sizing** — Apply horizontal width constraints (e.g., `w-80`) to the `HoverCardContent` to ensure enough space for rich text or layouts.
> - **Trigger Placement** — Use `asChild` on the `HoverCardTrigger` when wrapping a button or any styled primitive.