# LivaDrawer
Package: @dataliva/livalib
Description: @dataliva/livalib kayar panel (drawer) bileşeni.

DevExtreme Drawer üzerine kurulu kayar panel bileşeni. `drawerContent`
panelin içeriğini, `children` ise ana içeriği tanımlar. Görünürlük
`visible` + `onVisibilityChange` ile kontrollü yönetilir.

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

## Temel kullanım

Varsayılan `variant="overlay"` panelde içeriğin üzerine açılır. Aşağıdaki
örnek, sınırlı yükseklikteki bir kapsayıcı içinde çalışır; panel butonla
açılıp kapatılır.

Not: `children` ilk render'da sabitlenir (performans için memoize edilir);
bu yüzden ana içerikteki durum güncellemelerinde fonksiyonel `setState`
kullanın.

**Örnek — Temel kullanım (overlay):**

```tsx
const [visible, setVisible] = useState(false);

<LivaDrawer
  visible={visible}
  onVisibilityChange={setVisible}
  variant="overlay"
  size="small"
  drawerContent={
    <div style={{ padding: 16 }}>
      <strong>Menü</strong>
      <ul style={{ marginTop: 8, paddingLeft: 20 }}>
        <li>Ana Sayfa</li>
        <li>Raporlar</li>
        <li>Ayarlar</li>
      </ul>
    </div>
  }
>
  <div style={{ padding: 16 }}>
    <LivaButton
      text="Menüyü Aç / Kapat"
      onClick={() => setVisible((v) => !v)}
    />
    <p style={{ marginTop: 12 }}>Ana içerik alanı.</p>
  </div>
</LivaDrawer>
```

## Push varyantı

`variant="push"` panel açılırken ana içeriği iter; `variant="shrink"` ise
içerik alanını daraltır. `position` ile panelin açılacağı kenar, `size`
ile genişliği (hazır boyut adı ya da piksel) belirlenir.

**Örnek — Push varyantı, sağ konum ve sayısal boyut:**

```tsx
const [visible, setVisible] = useState(true);

<LivaDrawer
  visible={visible}
  onVisibilityChange={setVisible}
  variant="push"
  position="right"
  size={220}
  drawerContent={
    <div style={{ padding: 16 }}>
      <strong>Filtreler</strong>
      <p style={{ marginTop: 8 }}>Dönem: 2026</p>
      <p>Şirket: Dataliva</p>
    </div>
  }
>
  <div style={{ padding: 16 }}>
    <LivaButton
      text="Filtre Panelini Aç / Kapat"
      onClick={() => setVisible((v) => !v)}
    />
    <p style={{ marginTop: 12 }}>
      Panel açılınca içerik sola itilir (push).
    </p>
  </div>
</LivaDrawer>
```

## Prop'lar

| Prop | Tip | Varsayılan |
|------|------|---------|
| `visible` | `boolean` | `false` |
| `onVisibilityChange` | `(visible: boolean) => void` | — |
| `variant` | `'overlay' \| 'push' \| 'shrink'` | `'overlay'` |
| `size` | `'small' \| 'medium' \| 'large' \| number` | `'medium'` |
| `minSize` | `number` | `0` |
| `height` | `number \| string` | `'100%'` |
| `position` | `'left' \| 'right' \| 'top' \| 'bottom'` | `'left'` |
| `drawerContent` | `ReactNode` | — (zorunlu) |
| `children` | `ReactNode` | — (zorunlu) |
| `drawerContentClassName` | `string` | `''` |
| `contentClassName` | `string` | `''` |
| `className` | `string` | `''` |

Hazır boyutlar piksel karşılıkları: `small` 250, `medium` 300, `large` 400.
Ayrıca DevExtreme `IDrawerOptions`'tan gelen diğer prop'lar (ör. `shading`,
`closeOnOutsideClick`) aynen aktarılır.