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

<Meta of={ChartStories} />

<Title />
<Subtitle>Token-driven, theme-aware chart components built on Recharts.</Subtitle>

<Description />

<Primary />

---

## Variations

<Stories />

---

## AI Best Practices

> [!IMPORTANT]
> - **No Hard-coded Colors** — Never use hex codes for `fill` or `stroke`. Use `fill="var(--color-yourKey)"`.
> - **Chart Container** — Always wrap charts in `ChartContainer` to inject the necessary CSS variables from your `ChartConfig`.
> - **Theme support** — Reference theme-aware colors in `ChartConfig` using `hsl(var(--primary))`.