# LivaPasswordBox
Package: @dataliva/livalib
Description: @dataliva/livalib şifre girişi bileşeni.

Girilen değeri maskeleyen şifre giriş alanı. `LivaTextBox` ile birebir aynı
prop yapısını kullanır.

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

## Varyantlar

Görünüm stilini `variant` belirler: `standard`, `outlined`, `filled`.

**Örnek — Varyantlar:**

```tsx
<LivaPasswordBox variant="standard" label="Standard" placeholder="Şifrenizi girin" width={220} />
<LivaPasswordBox variant="outlined" label="Outlined" placeholder="Şifrenizi girin" width={220} />
<LivaPasswordBox variant="filled" label="Filled" placeholder="Şifrenizi girin" width={220} />
```

## Boyutlar

**Örnek — Boyutlar:**

```tsx
<LivaPasswordBox size="small" placeholder="Small" width={200} />
<LivaPasswordBox size="medium" placeholder="Medium" width={200} />
<LivaPasswordBox size="large" placeholder="Large" width={200} />
```

## Kontrollü değer

`value` ve `onValueChanged` ile şifre değeri state üzerinden yönetilebilir.

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

```tsx
<LivaPasswordBox
  label="Şifre"
  placeholder="Şifrenizi girin"
  value={password}
  valueChangeEvent="keyup"
  onValueChanged={(e: { value: string }) => setPassword(e.value)}
  width={240}
/>
<p>Uzunluk: {password.length} karakter</p>
```

## Durumlar

`disabled`, `required`, `errorMessage` ve `hint` giriş alanının durumunu belirtir.

**Örnek — Durumlar:**

```tsx
<LivaPasswordBox label="Devre dışı" disabled defaultValue="gizli123" width={220} />
<LivaPasswordBox label="Zorunlu" required placeholder="Şifre girin" width={220} />
<LivaPasswordBox label="Yeni şifre" errorMessage="Şifre en az 8 karakter olmalı" defaultValue="123" width={220} />
<LivaPasswordBox label="Şifre" hint="Harf, rakam ve simge kullanın" width={220} />
```

## Prop'lar

| Prop | Tip | Varsayılan |
|------|------|---------|
| `value` | `string` | — |
| `defaultValue` | `string` | — |
| `placeholder` | `string` | — |
| `variant` | `'standard' \| 'outlined' \| 'filled'` | `'outlined'` |
| `size` | `'small' \| 'medium' \| 'large'` | `'medium'` |
| `label` | `string` | — |
| `labelPosition` | `'top' \| 'left' \| 'right' \| 'bottom' \| 'floating' \| ...` | — |
| `onValueChanged` | `(e) => void` | — |
| `onType` | `(value: string) => void` | — |
| `disabled` | `boolean` | `false` |
| `readOnly` | `boolean` | `false` |
| `required` | `boolean` | `false` |
| `hint` | `string` | — |
| `errorMessage` | `string` | — |

`LivaPasswordBoxProps`, `LivaTextBoxProps` ile aynıdır; DevExtreme
`ITextBoxOptions`'tan gelen tüm prop'lar da kullanılabilir.