<!-- source-hash: 9dd457c6026b39fc08a255fe78ab6006 -->
A React component that renders visual separators (horizontal or vertical lines) built on top of Radix UI's separator primitive with customizable styling.

## Key Components

- **Separator**: A forwarded ref component that creates horizontal or vertical dividing lines
- Built on `@radix-ui/react-separator` for accessibility compliance
- Uses `cn` utility for conditional className merging

## Usage Example

```typescript
import { Separator } from "./separator"

function MyComponent() {
  return (
    <div>
      <p>Content above</p>
      
      {/* Horizontal separator (default) */}
      <Separator />
      
      <p>Content below</p>
      
      {/* Vertical separator */}
      <div className="flex items-center space-x-4">
        <span>Left content</span>
        <Separator orientation="vertical" className="h-6" />
        <span>Right content</span>
      </div>
      
      {/* Custom styled separator */}
      <Separator className="my-4 bg-red-500" />
    </div>
  )
}
```

The component defaults to horizontal orientation with decorative behavior (non-focusable). It automatically applies appropriate dimensions: 1px height for horizontal separators and 1px width for vertical ones. The `bg-border` class provides the default border color styling.