# LivaTabPanel
Package: @dataliva/livalib
Description: @dataliva/livalib sekme paneli bileşeni.

DevExtreme'in TabPanel bileşeni üzerine kurulu sekme container'ı. Sekmeler
`LivaTabPanelItem` alt bileşeniyle bildirimsel olarak tanımlanır; her sekmeye
başlık, simge, rozet ve devre dışı durumu verilebilir.

```tsx
import { LivaTabPanel, LivaTabPanelItem } from "@dataliva/livalib";
```

## Temel Kullanım

Her `LivaTabPanelItem` bir sekmeyi temsil eder; sekme içeriği doğrudan
`children` olarak verilir.

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

```tsx
<LivaTabPanel height={240} width="100%">
  <LivaTabPanelItem title="Genel">
    <div style={{ padding: 16 }}>
      Genel bilgiler bu sekmede yer alır. Bütçe adı, dönem ve para birimi
      gibi temel alanlar burada gösterilir.
    </div>
  </LivaTabPanelItem>
  <LivaTabPanelItem title="Detay">
    <div style={{ padding: 16 }}>
      Kalem bazında dağılım ve aylık kırılımlar bu sekmede listelenir.
    </div>
  </LivaTabPanelItem>
  <LivaTabPanelItem title="Ayarlar">
    <div style={{ padding: 16 }}>
      Onay akışı ve bildirim tercihleri bu sekmeden yönetilir.
    </div>
  </LivaTabPanelItem>
</LivaTabPanel>
```

## Simge, Rozet ve Devre Dışı Sekmeler

`icon` prop'u DevExtreme simge adlarını kabul eder, `badge` sekme başlığının
yanında küçük bir rozet gösterir, `disabled` ise sekmeyi tıklanamaz yapar.

**Örnek — Simge, rozet ve devre dışı sekme:**

```tsx
<LivaTabPanel height={200} width="100%">
  <LivaTabPanelItem title="Genel" icon="home">
    <div style={{ padding: 16 }}>Ana sekme içeriği.</div>
  </LivaTabPanelItem>
  <LivaTabPanelItem title="Bildirimler" icon="email" badge="3">
    <div style={{ padding: 16 }}>Okunmamış 3 bildirim bulunuyor.</div>
  </LivaTabPanelItem>
  <LivaTabPanelItem title="Arşiv" icon="box" disabled>
    <div style={{ padding: 16 }}>Bu sekme şu an devre dışı.</div>
  </LivaTabPanelItem>
</LivaTabPanel>
```

## Kontrollü Seçim

`selectedIndex` ve `onSelectionChanged` birlikte kullanılarak aktif sekme
dışarıdan yönetilebilir. Kullanıcı sekmeye tıkladığında da state güncellenir.

**Örnek — Kontrollü seçim:**

```tsx
const [index, setIndex] = useState<number>(0);

<div style={{ width: "100%", display: "flex", flexDirection: "column", gap: 12 }}>
  <div style={{ display: "flex", gap: 8, alignItems: "center" }}>
    <LivaButton
      text="Önceki"
      variant="outlined"
      size="small"
      onClick={() => setIndex((i) => Math.max(0, i - 1))}
    />
    <LivaButton
      text="Sonraki"
      size="small"
      onClick={() => setIndex((i) => Math.min(2, i + 1))}
    />
    <span>Seçili sekme: {index + 1} / 3</span>
  </div>
  <LivaTabPanel
    selectedIndex={index}
    onSelectionChanged={(e) => setIndex(e.component.option("selectedIndex") ?? 0)}
    height={180}
    width="100%"
  >
    <LivaTabPanelItem title="Genel">
      <div style={{ padding: 16 }}>Genel sekmesi içeriği.</div>
    </LivaTabPanelItem>
    <LivaTabPanelItem title="Detay">
      <div style={{ padding: 16 }}>Detay sekmesi içeriği.</div>
    </LivaTabPanelItem>
    <LivaTabPanelItem title="Ayarlar">
      <div style={{ padding: 16 }}>Ayarlar sekmesi içeriği.</div>
    </LivaTabPanelItem>
  </LivaTabPanel>
</div>
```

## Prop'lar

| Prop | Tip | Varsayılan |
|------|------|---------|
| `selectedIndex` | `number` | `0` |
| `onSelectionChanged` | `(e: LivaTabPanelSelectionChangedEvent) => void` | — |
| `onSelectionChanging` | `(e: LivaTabPanelSelectionChangingEvent) => void` | — |
| `animationEnabled` | `boolean` | `true` |
| `swipeEnabled` | `boolean` | `true` |
| `focusStateEnabled` | `boolean` | `true` |
| `fullHeight` | `boolean` | `false` |
| `hashRouteEnabled` | `boolean` | — |
| `height` | `number \| string` | — |
| `width` | `number \| string` | — |
| `disabled` | `boolean` | `false` |
| `className` | `string` | `''` |
| `children` | `React.ReactNode` | — |

`fullHeight` verildiğinde panel, yüksekliği yok sayıp bulunduğu kabın tamamını
kaplar. Ayrıca DevExtreme `ITabPanelOptions`'tan gelen tüm prop'lar
(ör. `loop`, `deferRendering`) kullanılabilir.

### LivaTabPanelItem

| Prop | Tip | Varsayılan |
|------|------|---------|
| `title` | `string` | — (zorunlu) |
| `icon` | `string` | — |
| `badge` | `string` | — |
| `disabled` | `boolean` | `false` |
| `children` | `React.ReactNode` | — |