import { Meta, Primary, Controls, Canvas } from "@storybook/addon-docs/blocks";

import * as stories from "./spinner.stories";

<Meta of={stories} />

```ts
import { SpinnerComponent } from "@bitwarden/components";
```

# Spinner

Spinners provide visual feedback during loading states with support for multiple variants and sizes.

<Canvas of={stories.Primary} />

## Variants

6 supported color variants & 4 sizes are available:

- **sm** (16px) - Small indicators for list items or compact cards
- **md** (24px) - Medium size for use cases where Default is to large
- **base** (56px) - Default size for most use cases
- **lg** (80px) - Extra large for hero sections or feature highlights

<Canvas of={stories.AllVariants} />

## Sizes

<Canvas of={stories.SmallSize} />

<Canvas of={stories.MediumSize} />

<Canvas of={stories.BaseSize} />

<Canvas of={stories.LargeSize} />

## Accessibility

The SVG is always marked `aria-hidden="true"` as it is purely decorative. The `title` input provides
screen reader text rendered as a visually hidden element alongside the SVG. Defaults to "Loading"
from the i18n service.

```html
<bit-spinner variant="primary" size="base" title="Processing payment"></bit-spinner>
```
