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

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

<Meta of={stories} />

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

<Title />
<Description />

<Canvas of={stories.PrimaryVariant} />

## Layout

Two layout options control the arrangement of spinner and text:

- `horizontal` - Spinner and text side-by-side (default)
- `vertical` - Spinner above text, centered

## Variants

All 6 spinner variants are supported: `primary`, `subtle`, `success`, `warning`, `danger`,
`contrast`.

## Sizes

4 sizes are supported alongside Spinner: `sm`, `md`, `base`, `lg`.

Text sizing scales automatically with the spinner size

## Content Slots

Slots support HTML content for emphasis and formatting:

- `[slot=title]` - Bold heading slot using semantic heading color
- `[slot=description]` - Normal body slot using semantic body color

## All Vertical Variants

<Canvas of={stories.AllVerticalVariants} />

## All Vertical Sizes

<Canvas of={stories.AllVerticalSizes} />

## All Horizontal Variants

<Canvas of={stories.AllHorizontalVariants} />

## All Horizontal Sizes

<Canvas of={stories.AllHorizontalSizes} />
