# LivaProgress
Package: @dataliva/livalib
Description: @dataliva/livalib ilerleme çubuğu bileşeni.

Bir işlemin tamamlanma oranını gösteren yatay ilerleme çubuğu. Çubuğun
doluluk yüzdesi `value / max` oranından hesaplanır ve 0–100 aralığına
sıkıştırılır; `showText` açıkken değerin yanında `%` etiketi görüntülenir.

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

## Temel kullanım

Yalnızca `value` zorunludur; varsayılan `max` değeri 100'dür.

**Örnek — Temel kullanım:**

```tsx
<div style={{ display: "grid", gap: 16, width: 320 }}>
  <LivaProgress value={25} />
  <LivaProgress value={50} />
  <LivaProgress value={75} />
</div>
```

## Varyantlar

`variant` çubuğun rengini belirler: `primary`, `success`, `warning`, `danger`.

**Örnek — Varyantlar:**

```tsx
<div style={{ display: "grid", gap: 16, width: 320 }}>
  <LivaProgress value={60} variant="primary" />
  <LivaProgress value={100} variant="success" />
  <LivaProgress value={45} variant="warning" />
  <LivaProgress value={20} variant="danger" />
</div>
```

## Metin, yükseklik ve max

`showText={false}` yüzde etiketini gizler; `height` çubuk kalınlığını,
`width` bileşen genişliğini kontrol eder. `max` ile 100 dışındaki ölçekler
kullanılabilir — son örnekte 2/8 oranı çubuğu %25 doldurur.

**Örnek — Metin, yükseklik ve max:**

```tsx
<div style={{ display: "grid", gap: 16, width: 320 }}>
  <LivaProgress value={40} showText={false} />
  <LivaProgress value={40} height={4} showText={false} />
  <LivaProgress value={40} height={16} width="70%" />
  <LivaProgress value={2} max={8} showText={false} variant="success" />
</div>
```

Not: `showText` etiketi ham `value` değerini `%` sonekiyle gösterir. `max`
100'den farklıysa etiket yanıltıcı olabileceği için gizlenmesi önerilir.

## Etkileşimli ilerleme

**Örnek — Etkileşimli ilerleme:**

```tsx
const [value, setValue] = useState<number>(30);

<div style={{ display: "grid", gap: 16, width: 320 }}>
  <LivaProgress value={value} variant={value === 100 ? "success" : "primary"} />
  <div style={{ display: "flex", gap: 8 }}>
    <LivaButton text="+10" size="small" onClick={() => setValue((v) => Math.min(100, v + 10))} />
    <LivaButton text="Sıfırla" size="small" variant="outlined" onClick={() => setValue(0)} />
  </div>
</div>
```

Yukarıdaki örnekte değer `useState` ile tutulur; %100'e ulaşınca varyant
`success`'e döner.

## Prop'lar

| Prop | Tip | Varsayılan |
|------|------|---------|
| `value` | `number` | — (zorunlu) |
| `max` | `number` | `100` |
| `showText` | `boolean` | `true` |
| `height` | `number \| string` | `8` |
| `variant` | `'primary' \| 'success' \| 'warning' \| 'danger'` | `'primary'` |
| `width` | `string \| number` | `'100%'` |
| `className` | `string` | — |