<!-- source-hash: 03e68088323281da2f3ddac5a1dabf62 -->
A client-side React component that renders styled status/label badges with configurable size variants and color schemes using `class-variance-authority`.

## Key Components

- **`statusBadgeVariants`** — CVA variant config defining two axes:
  - `variant`: `"card"` (default, larger) or `"button"` (compact, stamp-like)
  - `colorScheme`: `cyan`, `pink`, `yellow`, `green`, `purple`, `success`, `error`, `warning`, `default`, `accentBorder`, `errorBorder`, `whiteBorder`
- **`StatusBadge`** — Main exported `<span>`-based component
- **`singleLine`** prop — Opt-out flag for the `button` variant's multi-word vertical stacking behavior

## Usage Example

```typescript
import { StatusBadge } from './status-badge';

// Default card badge
<StatusBadge text="Active" colorScheme="success" />

// Compact button badge with stacked multi-word text
<StatusBadge text="TO DO" variant="button" colorScheme="warning" />

// Compact button badge, single line (inline chat context)
<StatusBadge text="IN PROGRESS" variant="button" colorScheme="cyan" singleLine />

// Border-only accent badge (task type)
<StatusBadge text="BUG" colorScheme="errorBorder" />

// Custom class override
<StatusBadge text="Custom" colorScheme="purple" className="rounded-full" />
```

## Notes

- Renders as `<span>` (not `<div>`) to remain HTML-valid inside inline contexts such as `<p>`, `<a>`, or markdown-rendered content
- `variant="button"` with multi-word text auto-stacks each word vertically (stamp effect); pass `singleLine` to disable
- Extends `React.HTMLAttributes<HTMLSpanElement>`, so all standard span props (`id`, `onClick`, `aria-*`, etc.) are forwarded