# LivaPinInput
Package: @dataliva/livalib
Description: @dataliva/livalib PIN / OTP giriş bileşeni.

Doğrulama kodu, PIN veya OTP girişleri için hane hane ilerleyen giriş bileşeni.
Her haneye tek karakter yazılır; odak otomatik olarak sonraki haneye geçer.

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

## Hane sayısı

`length` prop'u hane sayısını belirler; varsayılan 6'dır.

**Örnek — Hane sayısı (length):**

```tsx
<LivaPinInput length={4} />
<LivaPinInput length={6} />
```

## Kontrollü değer

`value` ve `onValueChanged` ile mevcut PIN değeri dışarıdan yönetilebilir.

**Örnek — Kontrollü değer:**

```tsx
<LivaPinInput
  length={4}
  value={pin}
  onValueChanged={(value) => setPin(value)}
/>
<p>Girilen: {pin || "-"}</p>
```

## Tamamlanma geri çağrımı

Tüm haneler doldurulduğunda `onComplete` tetiklenir ve tamamlanan PIN'i
string olarak verir.

**Örnek — onComplete geri çağrımı:**

```tsx
<LivaPinInput
  length={4}
  onComplete={(pin) => setCompleted(pin)}
/>
{completed && <p>Kod tamamlandı: {completed}</p>}
```

## Maskeleme

`mask` girilen karakterleri nokta olarak gösterir; `type="number"` yalnızca
rakam girişine izin verir.

**Örnek — Maskeleme ve sayısal tip:**

```tsx
<LivaPinInput length={4} mask />
<LivaPinInput length={4} type="number" />
```

## Prop'lar

| Prop | Tip | Varsayılan |
|------|------|---------|
| `length` | `number` | `6` |
| `value` | `string` | `''` |
| `onValueChanged` | `(value: string) => void` | — |
| `onComplete` | `(pin: string) => void` | — |
| `type` | `'text' \| 'number' \| 'password'` | `'text'` |
| `mask` | `boolean` | `false` |
| `placeholder` | `string` | `''` |
| `autoFocus` | `boolean` | `false` |
| `disabled` | `boolean` | `false` |
| `className` | `string` | `''` |