# Accordion

> Compound component đóng/mở từng panel — dùng cho FAQ ngắn, settings group, danh sách giải thích collapse.

## API

### `<Accordion>` (root)

| Prop | Type | Default | Description |
|---|---|---|---|
| `type` | `'single' \| 'multiple'` | `'single'` | `single` chỉ mở 1 panel; `multiple` cho mở nhiều panel song song |
| `defaultValue` | `string \| string[]` | — | Giá trị mở mặc định (uncontrolled). String cho `single`, array cho `multiple` |
| `value` | `string \| string[]` | — | Controlled mode — pass kèm `onValueChange` |
| `onValueChange` | `(v: string \| string[]) => void` | — | Callback khi panel toggle |
| `className` | `string` | — | Override container |
| `...rest` | `HTMLAttributes<HTMLDivElement>` | — | Pass-through |

### `<Accordion.Item value>` · `<Accordion.Trigger>` · `<Accordion.Content>`

`Item` cần `value` để root track open state. `Trigger` nằm trong `Item`, render button. `Content` chỉ render khi panel mở.

## Variants

- `type='single'`: kiểu FAQ classic, mở panel mới đóng panel cũ.
- `type='multiple'`: settings page, cho phép user mở nhiều section cùng lúc.

## Composition

```
<Accordion>
  <Accordion.Item value="…">
    <Accordion.Trigger>Câu hỏi</Accordion.Trigger>
    <Accordion.Content>Câu trả lời</Accordion.Content>
  </Accordion.Item>
</Accordion>
```

## States

- **Default**: tất cả panel đóng (trừ khi pass `defaultValue`)
- **Open**: `data-state="open"` trên Item, icon chevron xoay 180deg
- **Closed**: `data-state="closed"`, Content unmount khỏi DOM

## Usage

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

<Accordion type="single" defaultValue="q1">
  <Accordion.Item value="q1">
    <Accordion.Trigger>Trầm hương An Nhiên là gì?</Accordion.Trigger>
    <Accordion.Content>Trầm hương tự nhiên từ rừng Việt Nam…</Accordion.Content>
  </Accordion.Item>
  <Accordion.Item value="q2">
    <Accordion.Trigger>Cách bảo quản nhang trầm?</Accordion.Trigger>
    <Accordion.Content>Để nơi khô ráo, tránh ánh nắng…</Accordion.Content>
  </Accordion.Item>
</Accordion>
```

## Real-world example

FAQ ngắn trên product page An Nhien — 4-5 câu hỏi xoay quanh nguồn gốc, cách dùng, vận chuyển. Hoặc settings panel KHI Wellness CRM khi admin mở rộng từng section (account · notifications · billing).

## Accessibility

- `aria-expanded` trên Trigger phản ánh đúng open state
- Trigger là `<button>` native → keyboard `Enter`/`Space` toggle
- Khi nhiều Item, dùng `Tab` chuyển focus giữa các Trigger
- Icon chevron có `aria-hidden="true"` không screen-reader đọc

## Responsive behavior

Mobile-first — full width container. Trigger giữ tap-target ≥40px (`py-3` + text). Không có breakpoint switch.

## Related

- [[FAQ]] — section landing có heading + nhiều câu hỏi (Accordion là building block bên dưới)
- [[Tabs]] — cùng family compound, dùng khi nội dung mutually exclusive theo chiều ngang
- [[Card]] — wrap Accordion trong Card khi cần elevation

## Source

`react/src/molecules/Accordion.tsx`