# SearchBar

> Input search có icon kính lúp + nút clear — primitive cho header search, table filter, command palette trigger.

## API

| Prop | Type | Default | Description |
|---|---|---|---|
| `value` | `string` | `''` | Controlled value |
| `onChange` | `(value: string) => void` | — | Callback khi user gõ — nhận trực tiếp string (không phải event) |
| `onClear` | `() => void` | — | Callback khi click nút × clear |
| `placeholder` | `string` | `'Search…'` | Placeholder text |
| `disabled` | `boolean` | `false` | Disable input + ẩn nút clear |
| `...rest` | `InputHTMLAttributes` | — | Pass-through (autoFocus, name, …) |

Component dùng `forwardRef<HTMLInputElement>`.

## Variants

Không có variant. Layout duy nhất: kính lúp + input + clear button (xuất hiện khi có value).

## States

- **Empty**: chỉ icon + placeholder
- **Has value**: thêm nút × bên phải
- **Focus**: border chuyển primary + ring xuất hiện
- **Disabled**: opacity 60% + cursor-not-allowed, nút clear ẩn

## Usage

```tsx
import { SearchBar } from '@cowork/ui';

const [q, setQ] = useState('');

<SearchBar
  value={q}
  onChange={setQ}
  placeholder="Tìm khách hàng theo tên hoặc SĐT…"
  autoFocus
/>
```

## Real-world example

- An Nhien admin: SearchBar trên bảng đơn hàng, filter theo mã đơn / tên khách / SĐT.
- KHI Pilates studio: SearchBar trong drawer "Tìm member" với debounce 300ms ở caller.
- A-Kryphan blog: SearchBar header full-width, mobile-first, gắn với search route.

## Accessibility

- `<input type="search">` — browser native, kèm clear cross-browser
- Nút clear có `aria-label="Clear search"`
- Icon kính lúp có `aria-hidden="true"` (không text)
- Focus ring rõ ràng (`focus-within:ring-2 focus-within:ring-primary-ring`)

## Responsive behavior

Height fixed 36px (`h-9`). Width = `w-full` của parent — caller kiểm soát qua container. Trên mobile có thể đặt trong `<div className="px-4">` để có gutter.

## Related

- [[CmdPalette]] — search advanced với keyboard nav + grouping kết quả
- [[DataTable]] — pair SearchBar (filter) + DataTable (data) là pattern phổ biến
- [[Dropdown]] — combo SearchBar + Dropdown filter cho bảng

## Source

`react/src/molecules/SearchBar.tsx`