separator

1import React from "react";
2
3interface SeparatorProps {
4  orientation?: "horizontal" | "vertical";
5  /** A few words set into the middle of the line, like "or" */
6  label?: React.ReactNode;
7  /** Only draws a line; screen readers skip it */
8  decorative?: boolean;
9  className?: string;
10}
11
12/* A groove scored into the surface: a dark line with a lit lip just
13   under it, the way a cut catches light from above.                */
14function Groove({ vertical }: { vertical: boolean }) {
15  return (
16    <span
17      aria-hidden
18      className={vertical ? "block w-px self-stretch" : "block h-px flex-1"}
19      style={{
20        background: "var(--groove)",
21        boxShadow: vertical ? "var(--groove-lip)" : "var(--groove-lip-below)",
22      }}
23    />
24  );
25}
26
27export function Separator({ orientation = "horizontal", label, decorative = false, className = "" }: SeparatorProps) {
28  const vertical = orientation === "vertical";
29  const a11y = decorative
30    ? { "aria-hidden": true as const }
31    : { role: "separator", "aria-orientation": orientation };
32
33  if (vertical) {
34    return (
35      <span {...a11y} className={["inline-flex self-stretch", className].join(" ")}>
36        <Groove vertical />
37      </span>
38    );
39  }
40
41  return (
42    <div {...a11y} className={["flex w-full items-center gap-3", className].join(" ")}>
43      <Groove vertical={false} />
44      {label && (
45        <>
46          <span className="shrink-0 text-[11.5px] font-medium text-ink-faint">{label}</span>
47          <Groove vertical={false} />
48        </>
49      )}
50    </div>
51  );
52}