# Separator

## Overview

A thin horizontal (or vertical) line that visually divides sections of content. Primarily decorative but semantically meaningful as an `<hr>` element. Used to create visual breathing room between logically distinct sections.

---

## When to Use

- Between major content sections within a page
- Between action groups in menus or footers
- Dividing the header from the body in a panel or sidebar

---

## Props

| Prop          | Type                         | Default        | Description                                 |
| ------------- | ---------------------------- | -------------- | ------------------------------------------- |
| `orientation` | `'horizontal' \| 'vertical'` | `'horizontal'` | Line direction                              |
| `decorative`  | `boolean`                    | `true`         | When `true`, hidden from accessibility tree |
| `className`   | `string`                     | —              | Additional CSS classes                      |

---

## Examples

```tsx
import { Separator } from 'xertica-ui/ui';

<div>
  <h3>Section A</h3>
  <p>Content</p>
</div>
<Separator className="my-6" />
<div>
  <h3>Section B</h3>
</div>
```

### Vertical (in a toolbar)

```tsx
<div className="flex items-center gap-2">
  <Button variant="ghost">Bold</Button>
  <Separator orientation="vertical" className="h-6" />
  <Button variant="ghost">Italic</Button>
</div>
```

---

## AI Rules

- Add `className="my-6"` or `my-8` for proper vertical spacing between sections.
- Use `orientation="vertical"` in flex toolbars — remember to set a fixed `h-*` class for the height.
- `decorative` should remain `true` (default) unless the separator conveys structural meaning for screen readers.