# 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