# LivaStepper
Package: @dataliva/livalib
Description: @dataliva/livalib adım göstergesi (stepper) bileşeni.

Çok adımlı süreçleri (sihirbaz, onay akışı, sipariş takibi) görselleştiren adım
göstergesi. Adımlar `items` dizisiyle tanımlanır; yatay ve dikey yönelim,
üç farklı boyut, opsiyonel ve devre dışı adımlar desteklenir.

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

## Yatay Kullanım ve Etkileşim

Aktif adım `selectedIndex` ile kontrol edilir. Kullanıcı bir adıma
tıkladığında `onSelectionChanged` tetiklenir; butonlarla da state üzerinden
ileri/geri gidilebilir.

**Örnek — Yatay stepper — butonlarla ilerletme:**

```tsx
const [step, setStep] = useState<number>(1);

<div style={{ width: "100%", display: "flex", flexDirection: "column", gap: 16 }}>
  <LivaStepper
    items={[
      { label: "Sepet" },
      { label: "Teslimat" },
      { label: "Ödeme" },
      { label: "Onay" },
    ]}
    selectedIndex={step}
    onSelectionChanged={(e) => setStep(e.component.option("selectedIndex") ?? 0)}
  />
  <div style={{ display: "flex", gap: 8, alignItems: "center" }}>
    <LivaButton
      text="Geri"
      variant="outlined"
      size="small"
      onClick={() => setStep((s) => Math.max(0, s - 1))}
    />
    <LivaButton
      text="İleri"
      size="small"
      onClick={() => setStep((s) => Math.min(3, s + 1))}
    />
    <span>Adım {step + 1} / 4</span>
  </div>
</div>
```

## Dikey Yönelim

`orientation="vertical"` adımları alt alta dizer. `optional: true` adımı
isteğe bağlı olarak işaretler, `disabled: true` adımı tıklanamaz yapar,
`icon` ise DevExtreme simge adlarını kabul eder.

**Örnek — Dikey yönelim — opsiyonel ve devre dışı adımlar:**

```tsx
<LivaStepper
  orientation="vertical"
  selectedIndex={1}
  items={[
    { label: "Talep Oluştur", icon: "plus" },
    { label: "Yönetici Onayı", icon: "user" },
    { label: "Bütçe Kontrolü", icon: "money", optional: true },
    { label: "Tamamlandı", icon: "check", disabled: true },
  ]}
/>
```

## Boyutlar

**Örnek — Boyutlar:**

```tsx
<div style={{ width: "100%", display: "flex", flexDirection: "column", gap: 24 }}>
  <LivaStepper
    size="small"
    selectedIndex={1}
    items={[{ label: "Taslak" }, { label: "Onayda" }, { label: "Yayında" }]}
  />
  <LivaStepper
    size="medium"
    selectedIndex={1}
    items={[{ label: "Taslak" }, { label: "Onayda" }, { label: "Yayında" }]}
  />
  <LivaStepper
    size="large"
    selectedIndex={1}
    items={[{ label: "Taslak" }, { label: "Onayda" }, { label: "Yayında" }]}
  />
</div>
```

## Prop'lar

| Prop | Tip | Varsayılan |
|------|------|---------|
| `items` | `LivaStepperItem[]` | — (zorunlu) |
| `selectedIndex` | `number` | — |
| `onSelectionChanged` | `(e) => void` | — |
| `onSelectionChanging` | `(e) => void` | — |
| `orientation` | `'horizontal' \| 'vertical'` | `'horizontal'` |
| `itemRender` | `(item: LivaStepperItem) => React.ReactNode` | — |
| `size` | `'small' \| 'medium' \| 'large'` | `'medium'` |
| `variant` | `'standard'` | `'standard'` |
| `disabled` | `boolean` | `false` |
| `className` | `string` | `''` |

### LivaStepperItem

| Alan | Tip | Varsayılan |
|------|------|---------|
| `label` | `string` | — |
| `icon` | `string` | — |
| `optional` | `boolean` | `false` |
| `disabled` | `boolean` | `false` |
| `render` | `(data: LivaStepperItem) => React.ReactElement` | — |