import { SeparatorHorizontalDemo } from "../../../src/components/separator-horizontal-demo";
import { SeparatorVerticalDemo } from "../../../src/components/separator-vertical-demo";
import { SeparatorDecorativeDemo } from "../../../src/components/separator-decorative-demo";

## Overview

The Separator component provides a visual divider to separate content sections in your interface. It supports both horizontal and vertical orientations with proper ARIA attributes for accessibility, and can be marked as decorative when used purely for visual styling.

## Import

```tsx
import { Separator } from "@px-ui/core";
```

## Usage

<Preview>
  <SeparatorHorizontalDemo />
</Preview>

<CodeBlock>
  ```tsx
  <div>
    <div className="space-y-1">
      <h4>Profile Settings</h4>
      <p>Manage your account preferences</p>
    </div>
    <Separator orientation="horizontal" className="my-4" />
    <div className="flex h-5 items-center space-x-4">
      <div>Account</div>
      <Separator orientation="vertical" />
      <div>Privacy</div>
      <Separator orientation="vertical" />
      <div>Security</div>
    </div>
  </div>
  ```
</CodeBlock>

## Examples

### Vertical Orientation

Use vertical separators to divide content horizontally, such as in navigation menus or toolbars.

<Preview>
  <SeparatorVerticalDemo />
</Preview>

<CodeBlock>
  ```tsx
  <div className="flex h-20 items-center space-x-4">
    <div>Profile</div>
    <Separator orientation="vertical" />
    <div>Settings</div>
    <Separator orientation="vertical" />
    <div>Help</div>
    <Separator orientation="vertical" />
    <div>Logout</div>
  </div>
  ```
</CodeBlock>

### Decorative vs Semantic

By default, separators are semantic (announced by screen readers). Use `decorative` when the separator is purely visual and shouldn't be announced.

<Preview>
  <SeparatorDecorativeDemo />
</Preview>

<CodeBlock>
  ```tsx
  {/* Semantic separator - announced by screen readers */}
  <Separator orientation="horizontal" />

  {/* Decorative separator - not announced by screen readers */}
  <Separator orientation="horizontal" decorative />
  ```
</CodeBlock>

## API Reference

### Separator

A visual divider component with configurable orientation and semantic behavior.

| Prop          | Type                         | Default      | Description                                                                                    |
| ------------- | ---------------------------- | ------------ | ---------------------------------------------------------------------------------------------- |
| `orientation` | `"horizontal" \| "vertical"` | `"vertical"` | Direction of the separator line                                                                |
| `decorative`  | `boolean`                    | `false`      | When true, sets `role="none"` to hide from screen readers. When false, uses `role="separator"` |
| `className`   | `string`                     | -            | Additional CSS classes                                                                         |

**Inherited Props:** Inherits all props from native HTML `div` element.

**Accessibility:**

* Non-decorative separators use `role="separator"` and include `aria-orientation` for vertical separators
* Decorative separators use `role="none"` and are hidden from assistive technologies