# LivaTextBox
Package: @dataliva/livalib
Description: @dataliva/livalib tek satırlık metin girişi bileşeni.

DevExtreme'in TextBox bileşeni üzerine kurulu tek satırlık metin girişi;
`variant`, `size`, `label` ve doğrulama prop'larıyla genişletilmiştir.

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

## Varyantlar

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

**Örnek — Varyantlar:**

```tsx
<LivaTextBox variant="standard" label="Standard" placeholder="Adınız" width={220} />
<LivaTextBox variant="outlined" label="Outlined" placeholder="Adınız" width={220} />
<LivaTextBox variant="filled" label="Filled" placeholder="Adınız" width={220} />
```

## Boyutlar

**Örnek — Boyutlar:**

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

## Etiket konumları

`labelPosition` etiketi girişin üstüne, soluna veya altına yerleştirir;
`floating` ile etiket alanın içinde yüzer.

**Örnek — Etiket konumları:**

```tsx
<LivaTextBox label="Üstte" labelPosition="top" placeholder="Değer girin" width={220} />
<LivaTextBox label="Solda" labelPosition="left" placeholder="Değer girin" width={280} />
<LivaTextBox label="Altta" labelPosition="bottom" placeholder="Değer girin" width={220} />
<LivaTextBox label="Floating" labelPosition="floating" width={220} />
```

## Kontrollü değer

`value` ve `onValueChanged` ile bileşen kontrollü kullanılabilir;
`valueChangeEvent="keyup"` değeri her tuş vuruşunda günceller.

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

```tsx
<LivaTextBox
  label="Mesaj"
  placeholder="Yazmaya başlayın"
  value={value}
  valueChangeEvent="keyup"
  onValueChanged={(e: { value: string }) => setValue(e.value)}
  width={260}
/>
<p>Yazılan: {value || "—"}</p>
```

## Durumlar

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

**Örnek — Durumlar:**

```tsx
<LivaTextBox label="Devre dışı" disabled defaultValue="Düzenlenemez" width={220} />
<LivaTextBox label="Zorunlu" required placeholder="Doldurulması zorunlu" width={220} />
<LivaTextBox label="E-posta" errorMessage="Geçerli bir e-posta girin" defaultValue="yanlis@" width={220} />
<LivaTextBox label="Kullanıcı adı" hint="En az 3 karakter olmalı" placeholder="kullanici" 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' \| ...` | — |
| `labelWidth` | `number \| string` | — |
| `onValueChanged` | `(e) => void` | — |
| `onType` | `(value: string) => void` | — |
| `disabled` | `boolean` | `false` |
| `readOnly` | `boolean` | `false` |
| `required` | `boolean` | `false` |
| `hint` | `string` | — |
| `errorMessage` | `string` | — |

Ayrıca DevExtreme `ITextBoxOptions`'tan gelen tüm prop'lar (ör. `mask`,
`maxLength`, `showClearButton`) kullanılabilir.