import { Canvas, Controls, Meta, Title } from '@storybook/addon-docs/blocks';
import * as SpinnerStories from './Spinner.stories';
<Meta of={SpinnerStories} name='Usage' />
<Title />
## Purpose
The PDS Spinner, extended with an agentic color: `color='agentic'` paints the arc and track with the AI gradient.
`hasAvatar` adds the Zappy bolt inside the ring, in the plain foreground color (not the gradient). It is half the ring tall and shows from `2xl` up.
## Implementation
See the table below for the available props. The other stories show every variant and state.
<hr />
<Canvas of={SpinnerStories.Default} />
<Controls of={SpinnerStories.Default} />
<hr />
<Canvas of={SpinnerStories.WithIcon} />
Spinner: agentic color variant
Extend the existing PDS v2 Spinner (not a new component).
Extends a PDS componentOpen in Storybook