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

<Meta of={NotificationBadgeStories} />

<Title />
<Subtitle>A compact overlay indicator for counts and attention cues.</Subtitle>

<Description />

<Primary />

---

## Variations

<Stories />

---

## AI Best Practices

> [!IMPORTANT]
> - **Positioning** — Always use `relative` on the trigger parent and `absolute` with negative offsets (e.g., `-top-1 -right-1`) on the badge for proper alignment.
> - **Zero Handling** — When the count is 0, avoid rendering the component entirely to keep the UI clean.
> - **Max Display** — Large numbers are automatically truncated with a `+` suffix based on the `max` prop (defaults to 99).