# LivaPopup
Package: @dataliva/livalib
Description: @dataliva/livalib genel amaçlı açılır pencere (popup) bileşeni.

DevExtreme Popup'ın ince bir sarmalayıcısı. İçine istediğiniz JSX'i alır;
görünürlüğü `visible` prop'u ile kontrol edilir, kullanıcı pencereyi
kapattığında `onHiding` tetiklenir. DevExtreme `IPopupOptions`'tan gelen tüm
seçenekler (ör. `showCloseButton`, `hideOnOutsideClick`, `dragEnabled`)
doğrudan kullanılabilir.

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

## Temel Kullanım

Popup bir tetikleyici butonla açılır: state `true` olduğunda `visible` prop'u
pencereyi gösterir, `onHiding` state'i `false` yaparak kapatır.
`hideOnOutsideClick` ile dışarı tıklandığında da kapanır.

**Örnek — Temel popup:**

```tsx
const [open, setOpen] = useState<boolean>(false);

<LivaButton text="Popup Aç" onClick={() => setOpen(true)} />

<LivaPopup
  visible={open}
  onHiding={() => setOpen(false)}
  showTitle={false}
  hideOnOutsideClick
  width={360}
  height={200}
>
  <div style={{ display: "flex", flexDirection: "column", gap: 12 }}>
    <p>Bu, en yalın haliyle bir LivaPopup içeriğidir. Dışarı tıklayarak da kapatabilirsiniz.</p>
    <LivaButton text="Kapat" variant="outlined" onClick={() => setOpen(false)} />
  </div>
</LivaPopup>
```

## Başlık ve Boyut

`title` başlık çubuğunu doldurur, `showCloseButton` sağ üstte kapatma butonu
gösterir. `width` ve `height` sayı (piksel) ya da yüzde gibi bir `string`
değer alabilir; `dragEnabled` ile pencere başlık çubuğundan sürüklenebilir.

**Örnek — Başlık ve boyut:**

```tsx
const [open, setOpen] = useState<boolean>(false);

<LivaButton text="Detayı Göster" onClick={() => setOpen(true)} />

<LivaPopup
  visible={open}
  onHiding={() => setOpen(false)}
  title="Kullanıcı Detayı"
  showCloseButton
  dragEnabled
  width={480}
  height={300}
>
  <p>
    Başlık çubuğu, kapatma butonu ve sabit genişlik/yükseklik ile
    yapılandırılmış bir popup. Başlık çubuğundan sürüklenebilir.
  </p>
</LivaPopup>
```

## Prop'lar

| Prop | Tip | Varsayılan |
|------|------|---------|
| `visible` | `boolean` | `false` |
| `onHiding` | `() => void` | — |
| `title` | `ReactNode` | — |
| `width` | `number \| string` | — |
| `height` | `number \| string` | — |
| `variant` | `'standard' \| 'modal' \| 'sidebar'` | `'standard'` |
| `size` | `'small' \| 'medium' \| 'large' \| 'fullscreen'` | `'medium'` |
| `radius` | `'sm' \| 'md' \| 'lg' \| 'xl' \| 'none'` | `'md'` |
| `hideOnOutsideClick` | `boolean` | `false` |
| `showCloseButton` | `boolean` | — |
| `className` | `string` | — |
| `children` | `ReactNode` | — |

Ayrıca DevExtreme `IPopupOptions`'tan gelen tüm prop'lar (ör. `showTitle`,
`titleRender`, `dragEnabled`, `resizeEnabled`, `shading`, `position`) aynen
aktarılır.