# LivaSelectBox
Package: @dataliva/livalib
Description: @dataliva/livalib açılır seçim kutusu bileşeni.

DevExtreme'in SelectBox bileşeni üzerine kurulu; `variant`, `size`, `label`,
`hint` ve `errorMessage` prop'larıyla genişletilmiş bir açılır seçim kutusu.

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

## Temel kullanım

Dizi tabanlı `dataSource` ile birlikte `displayExpr` görünen metni,
`valueExpr` seçilen değeri belirler.

**Örnek — Temel kullanım:**

```tsx
const sehirler = [
  { id: 1, ad: "İstanbul" },
  { id: 2, ad: "Ankara" },
  { id: 3, ad: "İzmir" },
  { id: 4, ad: "Bursa" },
  { id: 5, ad: "Antalya" },
];

<LivaSelectBox
  dataSource={sehirler}
  displayExpr="ad"
  valueExpr="id"
  label="Şehir"
  placeholder="Şehir seçin"
  width={260}
/>
```

## Kontrollü seçim

`value` ve `onValueChanged` ile bileşen React state'ine bağlanır.

**Örnek — Kontrollü seçim:**

```tsx
const [value, setValue] = useState<number | null>(2);

<LivaSelectBox
  dataSource={sehirler}
  displayExpr="ad"
  valueExpr="id"
  label="Şehir"
  value={value}
  onValueChanged={(e) => setValue(e.value)}
  width={260}
/>
<span>Seçilen: {secilen ? secilen.ad : "—"}</span>
```

## Arama

`searchEnabled` yazarak filtrelemeyi, `showClearButton` seçimi temizleme
düğmesini etkinleştirir.

**Örnek — Arama:**

```tsx
<LivaSelectBox
  dataSource={sehirler}
  displayExpr="ad"
  valueExpr="id"
  label="Şehir"
  placeholder="Yazarak arayın"
  searchEnabled
  showClearButton
  width={260}
/>
```

## Durumlar

`disabled` bileşeni kapatır; `required` etiketin yanına yıldız ekler,
`errorMessage` alanın altında hata metni gösterir.

**Örnek — Durumlar:**

```tsx
<LivaSelectBox
  dataSource={sehirler}
  displayExpr="ad"
  valueExpr="id"
  label="Devre dışı"
  value={1}
  disabled
  width={220}
/>
<LivaSelectBox
  dataSource={sehirler}
  displayExpr="ad"
  valueExpr="id"
  label="Zorunlu alan"
  required
  hint="Bu alan zorunludur"
  width={220}
/>
<LivaSelectBox
  dataSource={sehirler}
  displayExpr="ad"
  valueExpr="id"
  label="Hatalı"
  errorMessage="Şehir seçilmedi"
  width={220}
/>
```

## Prop'lar

| Prop | Tip | Varsayılan |
|------|------|---------|
| `dataSource` | `any[] \| { loadUrl, key?, pageSize?, paginate? }` | — |
| `value` | `any` | — |
| `displayExpr` | `string` | — |
| `valueExpr` | `string` | — |
| `onValueChanged` | `(e) => void` | — |
| `placeholder` | `string` | — |
| `label` | `string` | — |
| `labelPosition` | `LabelPosition` | `'top-start'` |
| `variant` | `'standard' \| 'outlined' \| 'filled'` | `'standard'` |
| `size` | `'small' \| 'medium' \| 'large'` | `'medium'` |
| `disabled` | `boolean` | `false` |
| `required` | `boolean` | `false` |
| `hint` | `string` | — |
| `errorMessage` | `string` | — |

Ayrıca DevExtreme `ISelectBoxOptions`'tan gelen tüm prop'lar (ör.
`searchEnabled`, `showClearButton`, `width`).