# LivaNumberBox
Package: @dataliva/livalib
Description: @dataliva/livalib sayısal giriş bileşeni.

DevExtreme'in NumberBox bileşeni üzerine kurulu sayısal giriş alanı;
min/maks sınırları, adım ve biçimlendirme desteğiyle birlikte gelir.

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

## Varyantlar

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

**Örnek — Varyantlar:**

```tsx
<LivaNumberBox variant="standard" label="Standard" defaultValue={42} width={200} />
<LivaNumberBox variant="outlined" label="Outlined" defaultValue={42} width={200} />
<LivaNumberBox variant="filled" label="Filled" defaultValue={42} width={200} />
```

## Min/Maks ve adım

`min` ve `max` değer aralığını sınırlar; `showSpinButtons` ile artırma/azaltma
okları görünür ve her tıklama değeri `step` kadar değiştirir.

**Örnek — Min/Maks ve adım:**

```tsx
<LivaNumberBox label="Adet" defaultValue={5} min={0} max={10} step={1} showSpinButtons width={200} />
<LivaNumberBox label="Oran" defaultValue={2.5} min={0} max={5} step={0.5} showSpinButtons width={200} />
```

## Sayı biçimi

`format` prop'u değerin nasıl görüntüleneceğini belirler; binlik ayracı,
ondalık basamak ve yüzde gösterimi desteklenir.

**Örnek — Sayı biçimi (format):**

```tsx
<LivaNumberBox label="Tutar" defaultValue={12345.67} format="#,##0.00" width={200} />
<LivaNumberBox label="KDV oranı" defaultValue={0.2} format="#0%" width={200} />
<LivaNumberBox label="Yıl" defaultValue={2026} format="#" width={200} />
```

## Durumlar

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

**Örnek — Durumlar:**

```tsx
<LivaNumberBox label="Devre dışı" disabled defaultValue={100} width={200} />
<LivaNumberBox label="Zorunlu" required width={200} />
<LivaNumberBox label="Bütçe" errorMessage="Değer 0'dan büyük olmalı" defaultValue={0} width={200} />
<LivaNumberBox label="Aylık hedef" hint="Bin TL cinsinden girin" defaultValue={250} width={200} />
```

## Prop'lar

| Prop | Tip | Varsayılan |
|------|------|---------|
| `value` | `number` | — |
| `min` | `number` | — |
| `max` | `number` | — |
| `step` | `number` | `1` |
| `format` | `string \| object` | — |
| `showSpinButtons` | `boolean` | `false` |
| `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` |
| `required` | `boolean` | `false` |
| `errorMessage` | `string` | — |

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