Separator

1'use client'
2 
3import type * as React from 'react'
4 
5import { Separator as SeparatorPrimitive } from '@base-ui/react/separator'
6 
7import { cn } from '@/lib/utils'
8 
9type SeparatorProps = SeparatorPrimitive.Props & {
10  /**
11   * When true, the separator is purely presentational and is hidden from
12   * assistive tech by setting `role="none"`. Defaults to `false`, in which
13   * case Base UI's default `role="separator"` is left intact so AT users
14   * hear it as a region boundary.
15   */
16  decorative?: boolean
17}
18 
19function Separator({
20  className,
21  orientation = 'horizontal',
22  decorative = false,
23  role,
24  ref,
25  ...props
26}: SeparatorProps) {
27  // Base UI's Separator emits `data-orientation="horizontal|vertical"` for
28  // CSS targeting AND `aria-orientation` for assistive tech. The previous
29  // `data-horizontal:` / `data-vertical:` selectors targeted non-existent
30  // boolean attributes and never matched, leaving the separator with no
31  // explicit axis sizing.
32  const sharedClassName = cn(
33    'shrink-0 bg-border data-[orientation=horizontal]:h-px data-[orientation=horizontal]:w-full data-[orientation=vertical]:w-px data-[orientation=vertical]:self-stretch',
34    className,
35  )
36 
37  // A consumer passing `role="none"` / `"presentation"` is asking for a
38  // presentational separator just as `decorative` does — treat them the same.
39  // Otherwise Base UI would still emit `aria-orientation` (which it sets from
40  // the orientation prop regardless of role), recreating the axe
41  // `aria-allowed-attr` violation that `decorative` exists to avoid.
42  const isPresentational = decorative || role === 'none' || role === 'presentation'
43 
44  if (isPresentational) {
45    // Render a plain <div> for presentational separators. Bypass the
46    // primitive so the rendered element carries no ARIA semantics at all
47    // (no `aria-orientation`).
48    return (
49      <div
50        ref={ref as React.Ref<HTMLDivElement>}
51        data-slot='separator'
52        data-orientation={orientation}
53        role='none'
54        className={sharedClassName}
55        {...(props as React.HTMLAttributes<HTMLDivElement>)}
56      />
57    )
58  }
59 
60  return (
61    <SeparatorPrimitive
62      ref={ref}
63      data-slot='separator'
64      orientation={orientation}
65      role={role ?? 'separator'}
66      className={sharedClassName}
67      {...props}
68    />
69  )
70}
71 
72export { Separator }
73export type { SeparatorProps }