Separator

1// Base UI base separator — runs on the @octanejs/base-ui `Separator` primitive.
2//
3// THE CLASS STRING IS DELIBERATELY THE ARIA BASE'S, NOT THE RADIX BASE'S, and this is the one
4// family where copying the wrong base is a real bug rather than a cosmetic risk. The
5// orientation-conditional utilities must key off the attribute the primitive actually emits:
6//
7//   Radix     sets `data-orientation` -> `data-horizontal:h-px`
8//   RAC       sets `aria-orientation` -> `aria-[orientation=horizontal]:h-px`
9//   Base UI   sets `aria-orientation` -> same as RAC (verified in the primitive: it renders
10//             `role="separator"` plus `aria-orientation={orientation}`)
11//
12// Taking the Radix string here would produce a separator with no height or width at all, and
13// nothing in a class-string comparison would flag it. Upstream's own bases diverge here for
14// exactly this reason. The non-conditional utilities stay in step with the other bases.
15import { Separator as SeparatorPrimitive } from '@octanejs/base-ui/separator';
16 
17import { cn } from '@/lib/utils';
18 
19export interface SeparatorProps extends Record<string, unknown> {
20	className?: string;
21	orientation?: 'horizontal' | 'vertical';
22}
23 
24export function Separator({ className, orientation = 'horizontal', ...props }: SeparatorProps) @{
25	<SeparatorPrimitive
26		data-slot="separator"
27		orientation={orientation}
28		className={cn(
29			'block shrink-0 border-0 bg-border aria-[orientation=horizontal]:h-px aria-[orientation=horizontal]:w-full aria-[orientation=vertical]:w-px aria-[orientation=vertical]:self-stretch [:is(hr)]:h-px [:is(hr)]:w-full',
30			className,
31		)}
32		{...props}
33	/>
34}