laif-ds/dist/agent-docs/components/Spinner.md

Design System di Laif con componenti React basati su principi di Atomic Design

# Spinner

## Overview

Animated loading spinner component with multiple size and color variants. Provides a rotating circular indicator for loading states.

---

## Props

| Prop       | Type                                                      | Default     | Description                                  |
| ---------- | --------------------------------------------------------- | ----------- | -------------------------------------------- |
| `size`     | `"xxs" \| "xs" \| "sm" \| "md" \| "lg" \| "xl" \| "xxl" \| number` | `"md"`      | Size of the spinner (preset or custom px)    |
| `variant`  | `"default" \| "destructive" \| "primary" \| "secondary"`  | `"default"` | Color variant of the spinner                 |
| `className`| `string`                                                  | `""`        | Additional Tailwind classes                  |

---

## Size Mapping

| Size    | Pixels |
| ------- | ------ |
| `xxs`   | 12px   |
| `xs`    | 14px   |
| `sm`    | 16px   |
| `md`    | 20px   |
| `lg`    | 24px   |
| `xl`    | 28px   |
| `xxl`   | 36px   |

You can also provide a custom number for precise pixel sizing.

---

## Variants

- **`default`**: Uses foreground color (`text-d-foreground`)
- **`destructive`**: Uses destructive color (`text-d-destructive`)
- **`primary`**: Uses primary color (`text-d-primary`)
- **`secondary`**: Uses secondary color (`text-d-secondary`)

---

## Examples

### Basic Usage

```tsx
import { Spinner } from "laif-ds";

export function BasicSpinner() {
  return <Spinner />;
}
```

### Size Variants

```tsx
import { Spinner } from "laif-ds";

export function SpinnerSizes() {
  return (
    <div className="flex items-center gap-4">
      <Spinner size="xxs" />
      <Spinner size="xs" />
      <Spinner size="sm" />
      <Spinner size="md" />
      <Spinner size="lg" />
      <Spinner size="xl" />
      <Spinner size="xxl" />
    </div>
  );
}
```

### Color Variants

```tsx
import { Spinner } from "laif-ds";

export function SpinnerColors() {
  return (
    <div className="flex items-center gap-4">
      <Spinner variant="default" />
      <Spinner variant="primary" />
      <Spinner variant="secondary" />
      <Spinner variant="destructive" />
    </div>
  );
}
```

### Custom Size

```tsx
import { Spinner } from "laif-ds";

export function CustomSizeSpinner() {
  return <Spinner size={48} />;
}
```

### In Button

```tsx
import { Spinner, Button } from "laif-ds";

export function ButtonWithSpinner() {
  return (
    <Button disabled>
      <Spinner size="sm" className="mr-2" />
      Loading...
    </Button>
  );
}
```

### Centered Loading

```tsx
import { Spinner } from "laif-ds";

export function CenteredSpinner() {
  return (
    <div className="flex h-screen items-center justify-center">
      <Spinner size="xl" variant="primary" />
    </div>
  );
}
```

---

## Notes

- **Animation**: Uses Tailwind's `animate-spin` utility for smooth rotation
- **SVG Based**: Rendered as an SVG element for crisp display at any size
- **Current Color**: Inherits text color from parent if no variant specified
- **Accessibility**: Consider adding `aria-label` or visually hidden text for screen readers