import { ArgTypes, Canvas, Meta } from '@storybook/blocks';
import { RdxSeparatorRootDirective } from '../src/separator.directive';
import * as SeparatorDirectiveStories from './separator.stories';

<Meta title="Primitives/Separator" />

# Separator

#### Visually or semantically separates content.

<Canvas sourceState="hidden" of={SeparatorDirectiveStories.Default} />

## Features

- ✅ Supports horizontal and vertical orientations.

## Usage

Get started with importing the directive:

```typescript
import { RdxSeparatorRootDirective } from '@radix-ng/primitives/separator';
```

## Examples

```html
<div rdxSeparatorRoot decorative="decorative" orientation="vertical"></div>
```

## API Reference

<ArgTypes of={RdxSeparatorRootDirective} />

## Accessibility

Adheres to the [`separator` role requirements](https://www.w3.org/TR/wai-aria-1.2/#separator).
