Separator

1"use client";
2 
3import { Separator as SeparatorPrimitive } from "@base-ui/react/separator";
4import { mergeProps } from "@base-ui/react/merge-props";
5import { useRender } from "@base-ui/react/use-render";
6import type * as React from "react";
7import { cn } from "@/lib/utils";
8 
9export interface SeparatorProps extends useRender.ComponentProps<"div"> {
10  orientation?: React.ComponentProps<
11    typeof SeparatorPrimitive
12  >["orientation"];
13  /** Optional inline label (horizontal only) for "OR"/"AND" split patterns. */
14  label?: React.ReactNode;
15  /** Hide the separator from screen readers. Defaults to true unless labeled. */
16  decorative?: boolean;
17}
18 
19export function Separator({
20  orientation = "horizontal",
21  label,
22  decorative,
23  className,
24  children,
25  render,
26  ...props
27}: SeparatorProps): React.ReactElement {
28  const hasLabel = Boolean(label && orientation === "horizontal");
29  const isDecorative = decorative ?? !hasLabel;
30  const defaultProps = {
31    role: isDecorative ? "none" : "separator",
32    "aria-orientation": orientation,
33    "data-slot": "separator",
34    "data-orientation": orientation,
35    className: cn(
36      hasLabel
37        ? "flex w-full items-center gap-3 text-mini text-ink-muted"
38        : "shrink-0 bg-hairline",
39      !hasLabel &&
40        (orientation === "horizontal" ? "h-px w-full" : "h-full w-px"),
41      className,
42    ),
43    children: hasLabel ? (
44      <>
45        <span className="h-px flex-1 bg-hairline" aria-hidden />
46        <span>{label}</span>
47        <span className="h-px flex-1 bg-hairline" aria-hidden />
48      </>
49    ) : (
50      children
51    ),
52  };
53 
54  return useRender({
55    defaultTagName: "div",
56    render,
57    props: mergeProps<"div">(props, defaultProps),
58  });
59}
60 
61export { SeparatorPrimitive };