# LivaSkeleton
Package: @dataliva/livalib
Description: @dataliva/livalib iskelet (skeleton) yükleme bileşeni.

İçerik yüklenirken yer tutucu olarak parlayan bir iskelet gösterir. İki
kullanım şekli vardır: `children` verilmezse tek başına bir iskelet kutusu
çizer; `children` verilirse içeriği sarar ve `visible` prop'u `true` olduğu
sürece içeriğin üzerine tam kaplayan bir iskelet katmanı bindirir.

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

## Metin satırları

Farklı genişlikte satırlar dizerek paragraf yer tutucusu oluşturulur.
`mb`, `mt`, `ml`, `mr` prop'ları hızlı kenar boşluğu verir.

**Örnek — Metin satırları:**

```tsx
<div style={{ width: 320 }}>
  <LivaSkeleton height={14} width="100%" mb={8} />
  <LivaSkeleton height={14} width="85%" mb={8} />
  <LivaSkeleton height={14} width="60%" />
</div>
```

## Şekiller

`circle` genişlik, yükseklik ve köşe yarıçapını `height` değerine eşitleyerek
daire çizer; `radius` serbest köşe yuvarlaklığı sağlar; `animate={false}`
parlamayı kapatır.

**Örnek — Şekiller:**

```tsx
<LivaSkeleton height={56} circle />
<LivaSkeleton height={32} width={120} radius={16} />
<LivaSkeleton height={56} width={56} radius={8} animate={false} />
```

## İçerik üzerinde iskelet

Gerçek içerik `LivaSkeleton` ile sarılır; `visible` açıkken içerik yerinde
kalır ama üzeri iskeletle örtülür. Yükleme bitince yalnızca `visible`
kapatılır — yerleşim zıplamaz.

**Örnek — İçerik üzerinde iskelet (visible):**

```tsx
const [loading, setLoading] = useState<boolean>(true);

<div style={{ display: "grid", gap: 12, width: 320 }}>
  <LivaSkeleton visible={loading}>
    <div
      style={{
        padding: 16,
        border: "1px solid var(--dx-color-border, #e4e4e7)",
        borderRadius: 8,
      }}
    >
      <strong>Bütçe Raporu</strong>
      <p style={{ margin: "4px 0 0", fontSize: 13 }}>
        2026 yılı ilk çeyrek gider dağılımı hazır.
      </p>
    </div>
  </LivaSkeleton>
  <LivaButton
    text={loading ? "Yüklendi olarak işaretle" : "Yükleniyor durumuna dön"}
    size="small"
    variant="outlined"
    onClick={() => setLoading((l) => !l)}
  />
</div>
```

## Prop'lar

| Prop | Tip | Varsayılan |
|------|------|---------|
| `height` | `string \| number` | `'100%'` |
| `width` | `string \| number` | `'100%'` |
| `radius` | `string \| number` | `'4px'` |
| `circle` | `boolean` | `false` |
| `animate` | `boolean` | `true` |
| `visible` | `boolean` | `false` |
| `children` | `ReactNode` | — |
| `className` | `string` | — |
| `style` | `CSSProperties` | — |
| `mb` | `string \| number` | — |
| `mt` | `string \| number` | — |
| `ml` | `string \| number` | — |
| `mr` | `string \| number` | — |

Sayısal değerler otomatik olarak `px` birimine çevrilir. `visible` yalnızca
`children` ile birlikte anlamlıdır; tek başına kullanımda iskelet her zaman
görünür.