# LivaAccordion
Package: @dataliva/livalib
Description: @dataliva/livalib açılır/kapanır panel (accordion) bileşeni.

Tek başlık ve tek içerikten oluşan açılır/kapanır panel. Her panel kendi
aç/kapa durumunu içeride yönetir; birden fazla `LivaAccordion` alt alta
dizilerek SSS benzeri listeler oluşturulur.

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

## Temel Kullanım

`header` ve `content` hem düz metin hem React içeriği kabul eder.
`defaultExpanded` paneli açık başlatır.

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

```tsx
<div style={{ width: "100%", display: "flex", flexDirection: "column", gap: 8 }}>
  <LivaAccordion
    header="Bütçe dönemi ne zaman açılır?"
    content="Bütçe dönemi her yıl Ekim ayında planlama ekibi tarafından açılır ve iki ay boyunca giriş yapılabilir."
    defaultExpanded
  />
  <LivaAccordion
    header="Masraf girişini kimler yapabilir?"
    content="Yalnızca kendisine masraf merkezi yetkisi tanımlanan kullanıcılar giriş yapabilir."
  />
  <LivaAccordion
    header="Onay süreci nasıl işler?"
    content="Girilen kayıtlar önce yönetici onayına, ardından bütçe kontrolüne gönderilir."
  />
</div>
```

## Varyantlar

`variant` prop'u üç görünüm sunar: `standard`, `bordered`, `flat`.

**Örnek — Varyantlar:**

```tsx
<div style={{ width: "100%", display: "flex", flexDirection: "column", gap: 8 }}>
  <LivaAccordion
    variant="standard"
    header="Standard varyant"
    content="Varsayılan görünüm."
  />
  <LivaAccordion
    variant="bordered"
    header="Bordered varyant"
    content="Çerçeveli görünüm."
  />
  <LivaAccordion
    variant="flat"
    header="Flat varyant"
    content="Düz, arka plansız görünüm."
  />
</div>
```

## Etkileşim ve Durumlar

`onToggle`, panelin yeni durumunu boolean olarak iletir. `disabled` paneli
tamamen etkileşime kapatır.

**Örnek — Etkileşim ve durumlar:**

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

<div style={{ width: "100%", display: "flex", flexDirection: "column", gap: 8 }}>
  <LivaAccordion
    header="Bildirim Ayarları"
    content="E-posta ve uygulama içi bildirim tercihleri buradan yönetilir."
    onToggle={(isExpanded) => setOpen(isExpanded)}
  />
  <span style={{ fontSize: 13 }}>Panel şu anda {open ? "açık" : "kapalı"}.</span>
  <LivaAccordion
    header="Devre dışı bölüm"
    content="Bu içerik açılamaz."
    disabled
  />
</div>
```

## Prop'lar

| Prop | Tip | Varsayılan |
|------|------|---------|
| `header` | `React.ReactNode \| string` | — (zorunlu) |
| `content` | `React.ReactNode \| string` | — (zorunlu) |
| `variant` | `'standard' \| 'bordered' \| 'flat'` | `'standard'` |
| `size` | `'small' \| 'medium' \| 'large'` | `'medium'` |
| `defaultExpanded` | `boolean` | `false` |
| `onToggle` | `(isExpanded: boolean) => void` | — |
| `disabled` | `boolean` | `false` |
| `className` | `string` | `''` |
| `style` | `React.CSSProperties` | `{}` |