Labeled Separator

1import type * as React from 'react'
2 
3import { Separator } from '@/components/separator'
4import { cn } from '@/lib/utils'
5 
6/**
7 * A horizontal divider broken by a centred label — e.g. the "or" rule that
8 * separates one sign-in method from another in a login form.
9 *
10 * Always renders a label (defaulting to "or"); it is not a plain horizontal
11 * rule. For an unbroken divider, use the `Separator` component instead.
12 *
13 * The two flanking rules are rendered `decorative` (role="none") because the
14 * visible label already conveys the boundary to assistive tech; exposing two
15 * `role="separator"` elements either side of it would be redundant noise.
16 */
17function LabeledSeparator({
18  className,
19  children = 'or',
20  ref,
21  ...props
22}: React.ComponentProps<'div'> & { children?: React.ReactNode }) {
23  return (
24    <div
25      ref={ref}
26      data-slot='labeled-separator'
27      className={cn('flex items-center gap-3', className)}
28      {...props}
29    >
30      <Separator decorative className='flex-1' />
31      <span
32        data-slot='labeled-separator-content'
33        className='shrink-0 text-sm text-muted-foreground'
34      >
35        {children}
36      </span>
37      <Separator decorative className='flex-1' />
38    </div>
39  )
40}
41 
42export { LabeledSeparator }
43 
44export type LabeledSeparatorProps = React.ComponentProps<typeof LabeledSeparator>