# LivaCard
Package: @dataliva/livalib
Description: @dataliva/livalib kart ve daraltılabilir kart bölümü bileşenleri.

İçeriği çerçeve, gölge ve dolgu ile gruplayan kart container'ı. `header` ve
`footer` alanları opsiyoneldir. Aynı dosyadan gelen `LivaCardSection`,
kart içinde başlıklı ve daraltılabilir bölümler oluşturur.

```tsx
import { LivaCard, LivaCardSection } from "@dataliva/livalib";
```

## Başlık ve Alt Bilgi

`header` ve `footer` herhangi bir React içeriği kabul eder; alt bilgiye buton
gibi eylemler yerleştirilebilir.

**Örnek — Başlık ve alt bilgi:**

```tsx
<LivaCard
  header="Bütçe Özeti"
  footer={<LivaButton text="Detaya Git" size="small" variant="text" />}
  style={{ width: 320 }}
>
  <p style={{ margin: "8px 0" }}>
    2026 pazarlama bütçesinde kullanım oranı %68. Kalan tutar 1.240.000 TL.
  </p>
</LivaCard>
```

## Görünüm Varyasyonları

`withBorder` çerçeveyi, `elevated` gölgeyi kontrol eder; `padding` iç boşluğu
piksel ya da CSS değeri olarak alır.

**Örnek — Görünüm varyasyonları:**

```tsx
<LivaCard style={{ width: 220 }}>
  <strong>Varsayılan</strong>
  <p style={{ margin: "8px 0 0" }}>Çerçeveli, gölgesiz kart.</p>
</LivaCard>
<LivaCard elevated withBorder={false} style={{ width: 220 }}>
  <strong>Elevated</strong>
  <p style={{ margin: "8px 0 0" }}>Çerçevesiz, gölgeli kart.</p>
</LivaCard>
<LivaCard elevated padding={24} style={{ width: 220 }}>
  <strong>Geniş Dolgu</strong>
  <p style={{ margin: "8px 0 0" }}>Çerçeve + gölge + 24px dolgu.</p>
</LivaCard>
```

## Bölümlü Kart

`LivaCardSection` varsayılan olarak daraltılabilirdir (`collapsible`).
`defaultCollapsed` bölümü kapalı başlatır, `headerRight` başlığın sağına
özel içerik ekler.

**Örnek — Bölümlü kart (LivaCardSection):**

```tsx
<LivaCard header="Masraf Talebi" style={{ width: 420 }}>
  <div style={{ display: "flex", flexDirection: "column", gap: 12 }}>
    <LivaCardSection
      title="Genel Bilgiler"
      headerRight={<span style={{ fontSize: 12 }}>3 alan</span>}
    >
      <p style={{ margin: 0 }}>
        Talep sahibi, tarih ve masraf merkezi bilgileri bu bölümde yer alır.
      </p>
    </LivaCardSection>
    <LivaCardSection title="Kalem Detayları" defaultCollapsed>
      <p style={{ margin: 0 }}>
        Kalem bazında tutarlar bu bölümde listelenir. Başlıktaki butonla
        açıp kapatabilirsiniz.
      </p>
    </LivaCardSection>
  </div>
</LivaCard>
```

## Prop'lar

| Prop | Tip | Varsayılan |
|------|------|---------|
| `header` | `React.ReactNode` | — |
| `footer` | `React.ReactNode` | — |
| `withBorder` | `boolean` | `true` |
| `elevated` | `boolean` | `false` |
| `padding` | `number \| string` | `16` |
| `footerClassName` | `string` | `''` |
| `footerStyle` | `React.CSSProperties` | — |
| `className` | `string` | `''` |
| `style` | `React.CSSProperties` | — |
| `children` | `React.ReactNode` | — |

### LivaCardSection

| Prop | Tip | Varsayılan |
|------|------|---------|
| `title` | `React.ReactNode` | — |
| `collapsible` | `boolean` | `true` |
| `defaultCollapsed` | `boolean` | `false` |
| `headerRight` | `React.ReactNode` | — |
| `withBorder` | `boolean` | `true` |
| `elevated` | `boolean` | `false` |
| `padding` | `number \| string` | `16` |
| `contentClassName` | `string` | `''` |
| `className` | `string` | `''` |
| `style` | `React.CSSProperties` | — |
| `children` | `React.ReactNode` | — |