# Separator

Một đường mỏng chia nội dung thành các nhóm: các phần của một card, các mục trong toolbar, các link trong footer. Mặc định horizontal; vertical giữa các mục trên một hàng. label đặt một chữ ở giữa, như chữ hoặc giữa hai cách đăng nhập.

**Phụ thuộc:** npm: 1 trực tiếp, 2 tổng; registry: 2 trực tiếp, 2 tổng.

## Cách dùng

### Khi nào dùng

- Chia nội dung thành các nhóm ở chỗ chỉ khoảng cách không cho thấy một nhóm kết thúc đâu: các phần của một card, các nhóm mục menu.
- Chia các mục trên một hàng, như link trong footer hoặc button trong toolbar.

### Khi nào không dùng

- Khung nội dung cả bốn phía. Dùng Card.
- Một đường dưới mọi hàng của danh sách hoặc bảng; các hàng có viền riêng.
- Đặt tên một nhóm. Viết một heading.

## Biến thể

### orientation

horizontal chia nội dung xếp chồng; vertical chia các mục trên một hàng, như các button trên toolbar.

Giá trị: `horizontal`, `vertical`. Mặc định: `horizontal`.

## Ví dụ

### Giữa các phần

```tsx
<div className="flex flex-col gap-lg">
  <p className="text-sm text-text-primary">Đã đăng nhập bằng ada@example.com</p>
  <Separator />
  <p className="text-sm text-text-secondary">Thanh toán và hóa đơn</p>
</div>
```

### Trên một hàng

Vertical, giữa các link. Đường kéo dài bằng chiều cao của hàng.

```tsx
<div className="flex items-center gap-md text-sm text-text-secondary">
  <a href="#docs">Tài liệu</a>
  <Separator orientation="vertical" />
  <a href="#changelog">Nhật ký thay đổi</a>
  <Separator orientation="vertical" />
  <a href="#status">Trạng thái</a>
</div>
```

### Có label

Chữ hoặc giữa hai cách đăng nhập. label được đọc ở chỗ nó đứng.

```tsx
<div className="flex w-full max-w-xs flex-col gap-lg">
  <Button variant="secondary">Tiếp tục với email</Button>
  <Separator label="or" />
  <Button variant="secondary">Tiếp tục với passkey</Button>
</div>
```

### Được trình đọc màn hình đọc

Không có gì khác chia hai nhóm này, nên đường là một separator.

```tsx
<div className="flex flex-col gap-md">
  <p className="text-sm text-text-primary">Dự án của bạn</p>
  <Separator decorative={false} />
  <p className="text-sm text-text-primary">Được chia sẻ với bạn</p>
</div>
```

## Nên và không nên

### Nên

- Dùng khoảng cách trước; thêm separator khi chỉ khoảng cách không cho thấy một nhóm kết thúc ở đâu.
- Chừa chỗ hai bên bằng gap của phần tử cha, lớn hơn một bậc so với gap bên trong mỗi nhóm.

### Không nên

- Đừng đặt separator dưới mọi hàng của danh sách hoặc bảng; các hàng có viền riêng.
- Đừng dùng để khung nội dung cả bốn phía; đó là Card.
- Đừng dùng làm heading. label là một chữ như hoặc; nhóm cần tên thì dùng heading.

## Props

| Tên | Kiểu | Giá trị | Mặc định | Mô tả |
| --- | --- | --- | --- | --- |
| `orientation` | `enum` | `horizontal`, `vertical` | `horizontal` | horizontal chia nội dung xếp chồng; vertical chia các mục trên một hàng, như các button trên toolbar. |
| `decorative` | `boolean` |  | `true` | Bị ẩn với trình đọc màn hình. Đặt false khi đường là thứ duy nhất chia hai nhóm. |
| `label` | `node` |  |  | Một hay hai chữ ở giữa đường horizontal: hoặc. Giữ ngắn; nhóm cần tên thì dùng heading. |

## Cấu tạo

| Phần | Mô tả |
| --- | --- |
| `root` | Đường: viền 1px màu divider, viền trên khi horizontal (hết chiều rộng) và viền phía đầu khi vertical (hết chiều cao của hàng). |
| `wrapper` | Khi có label: hàng giữ một đường mỗi bên label, gap-md. Hàng nhận role và className của root. |
| `line` | Khi có label: mỗi đường là viền trên màu divider, chia nhau chiều rộng còn lại. |
| `label` | Khi có label: chữ secondary 14px ở giữa, trên một dòng. |

## Khả năng truy cập

Role: `none`

- Mặc định để trang trí: trình đọc màn hình bỏ qua, vì heading và danh sách đã cho biết nhóm bắt đầu ở đâu.
- Đặt decorative={false} khi đường là thứ duy nhất chia hai nhóm; nó trở thành separator, và đường vertical nói hướng bằng aria-orientation.
- Khi có label, chữ được đọc ở chỗ nó đứng. Để đường có label vẫn decorative: role separator giấu chữ bên trong khỏi trình đọc màn hình.
- Separator không bao giờ focus được và không nhận phím.

## Cài đặt

```bash
npx werewolf-ui add separator
```

Chạy `npx werewolf-ui init` một lần trong app trước khi thêm component. Init cài token, thêm CSS import và luật cho agent. Add cài component này cùng các dependency và giữ nguyên theme của bạn. Xem [Cài đặt](https://www.werewolf-ui.dev/vi/docs/installation.md) để biết yêu cầu và cách cài qua registry.