Separator

1import * as React from 'react'
2import * as SeparatorPrimitive from '@radix-ui/react-separator'
3import { cn } from '@/lib/utils'
4 
5export interface SeparatorProps
6  extends React.ComponentPropsWithoutRef<typeof SeparatorPrimitive.Root> {
7  label?: string
8}
9 
10const Separator = React.forwardRef<
11  React.ElementRef<typeof SeparatorPrimitive.Root>,
12  SeparatorProps
13>(
14  (
15    { className, orientation = 'horizontal', decorative = true, label, style, ...props },
16    ref
17  ) => {
18    if (label && orientation === 'horizontal') {
19      return (
20        <div
21          style={{
22            display:    'flex',
23            alignItems: 'center',
24            gap:        '0.75rem',
25            width:      '100%',
26            ...style,
27          }}
28        >
29          <div style={{ flex: 1, height: '1px', background: 'var(--border)' }} />
30          <span
31            style={{
32              fontSize:      '0.6rem',
33              color:         'var(--text-muted)',
34              letterSpacing: '0.12em',
35              whiteSpace:    'nowrap',
36              textTransform: 'uppercase',
37            }}
38          >
39            {label}
40          </span>
41          <div style={{ flex: 1, height: '1px', background: 'var(--border)' }} />
42        </div>
43      )
44    }
45 
46    return (
47      <SeparatorPrimitive.Root
48        ref={ref}
49        decorative={decorative}
50        orientation={orientation}
51        className={cn(
52          'shrink-0 rounded-none',
53          orientation === 'horizontal'
54            ? 'h-px w-full'
55            : 'h-full w-px',
56          className
57        )}
58        style={{
59          background: 'var(--border)',
60          ...style,
61        }}
62        {...props}
63      />
64    )
65  }
66)
67Separator.displayName = SeparatorPrimitive.Root.displayName
68 
69export { Separator }