# LivaBadge
Package: @dataliva/livalib
Description: @dataliva/livalib rozet (badge) bileşeni.

Durum, etiket ve sayaç göstermek için kullanılan hafif bir rozet bileşeni.
`span` tabanlıdır; `variant` ile anlamsal renk, `stylingMode` ile dolgu stili,
`size` ile boyut seçilir. İçerik `text` prop'u ya da `children` ile verilir.

```tsx
import { LivaBadge } from "@dataliva/livalib";
```

## Varyantlar

`variant` prop'u beş anlamsal renge karşılık gelir: `primary`, `secondary`,
`success`, `warning`, `danger`.

**Örnek — Varyantlar:**

```tsx
<LivaBadge text="Primary" variant="primary" />
<LivaBadge text="Secondary" variant="secondary" />
<LivaBadge text="Success" variant="success" />
<LivaBadge text="Warning" variant="warning" />
<LivaBadge text="Danger" variant="danger" />
```

## Stil modları

`stylingMode` rozetin dolgusunu belirler: `contained` dolu arka plan,
`outlined` çerçeveli, `light` soluk arka plan, `text` yalnızca renkli metin.

**Örnek — Stil modları (stylingMode):**

```tsx
<LivaBadge text="Contained" variant="primary" stylingMode="contained" />
<LivaBadge text="Outlined" variant="primary" stylingMode="outlined" />
<LivaBadge text="Light" variant="primary" stylingMode="light" />
<LivaBadge text="Text" variant="primary" stylingMode="text" />
```

## Kombinasyonlar

Beş varyant ve dört stil modu serbestçe birleştirilebilir.

**Örnek — Varyant × stil modu kombinasyonları:**

```tsx
<div style={{ display: "grid", gap: 12 }}>
  <div style={{ display: "flex", alignItems: "center", gap: 8 }}>
    <span style={{ width: 80, fontSize: 12, color: "#71717a" }}>contained</span>
    <LivaBadge text="Primary" variant="primary" stylingMode="contained" />
    <LivaBadge text="Secondary" variant="secondary" stylingMode="contained" />
    <LivaBadge text="Success" variant="success" stylingMode="contained" />
    <LivaBadge text="Warning" variant="warning" stylingMode="contained" />
    <LivaBadge text="Danger" variant="danger" stylingMode="contained" />
  </div>
  <div style={{ display: "flex", alignItems: "center", gap: 8 }}>
    <span style={{ width: 80, fontSize: 12, color: "#71717a" }}>outlined</span>
    <LivaBadge text="Primary" variant="primary" stylingMode="outlined" />
    <LivaBadge text="Secondary" variant="secondary" stylingMode="outlined" />
    <LivaBadge text="Success" variant="success" stylingMode="outlined" />
    <LivaBadge text="Warning" variant="warning" stylingMode="outlined" />
    <LivaBadge text="Danger" variant="danger" stylingMode="outlined" />
  </div>
  <div style={{ display: "flex", alignItems: "center", gap: 8 }}>
    <span style={{ width: 80, fontSize: 12, color: "#71717a" }}>light</span>
    <LivaBadge text="Primary" variant="primary" stylingMode="light" />
    <LivaBadge text="Secondary" variant="secondary" stylingMode="light" />
    <LivaBadge text="Success" variant="success" stylingMode="light" />
    <LivaBadge text="Warning" variant="warning" stylingMode="light" />
    <LivaBadge text="Danger" variant="danger" stylingMode="light" />
  </div>
  <div style={{ display: "flex", alignItems: "center", gap: 8 }}>
    <span style={{ width: 80, fontSize: 12, color: "#71717a" }}>text</span>
    <LivaBadge text="Primary" variant="primary" stylingMode="text" />
    <LivaBadge text="Secondary" variant="secondary" stylingMode="text" />
    <LivaBadge text="Success" variant="success" stylingMode="text" />
    <LivaBadge text="Warning" variant="warning" stylingMode="text" />
    <LivaBadge text="Danger" variant="danger" stylingMode="text" />
  </div>
</div>
```

## Boyutlar

**Örnek — Boyutlar:**

```tsx
<LivaBadge text="Small" variant="success" size="small" />
<LivaBadge text="Medium" variant="success" size="medium" />
<LivaBadge text="Large" variant="success" size="large" />
```

## Prop'lar

| Prop | Tip | Varsayılan |
|------|------|---------|
| `text` | `string` | — |
| `variant` | `'primary' \| 'secondary' \| 'success' \| 'warning' \| 'danger'` | `'primary'` |
| `stylingMode` | `'text' \| 'outlined' \| 'contained' \| 'light'` | `'contained'` |
| `size` | `'small' \| 'medium' \| 'large'` | `'medium'` |
| `width` | `string` | `'fit-content'` |
| `maxWidth` | `string` | — |
| `className` | `string` | — |
| `children` | `ReactNode` | — |

`text` verilmezse `children` render edilir. Ayrıca
`React.HTMLAttributes<HTMLSpanElement>`'ten gelen tüm prop'lar
(ör. `onClick`, `style`, `title`) desteklenir.