Toolbar divider

/* A separator carries no meaning on its own, so it stays decorative and only has to read against the surface it sits on. */
.divider { flex: none; background: var(--border); border-radius: var(--radius-pill); }
.vertical { width: 1px; }
.horizontal { height: 1px; }
.vertical.sm { height: var(--space-4); }
.vertical.md { height: var(--space-6); }
.vertical.lg { height: var(--space-8); }
.horizontal.sm { width: var(--space-4); }
.horizontal.md { width: var(--space-6); }
.horizontal.lg { width: var(--space-8); }

import type { HTMLAttributes } from "react";
import styles from "./toolbar-divider.module.css";

export type ToolbarDividerSize = "sm" | "md" | "lg";

export interface ToolbarDividerProps extends HTMLAttributes<HTMLSpanElement> {
  /** How tall the line is: sm 16px, md 24px, lg 32px. */
  size?: ToolbarDividerSize;
  /** Lays the line across instead of down, for a stacked toolbar. */
  orientation?: "vertical" | "horizontal";
}

/** A hairline between groups of actions in a toolbar or header. Decorative, so it never reaches the accessibility tree. */
export function ToolbarDivider({ className, size = "md", orientation = "vertical", ...props }: ToolbarDividerProps) {
  const classes = [styles.divider, styles[size], styles[orientation], className].filter(Boolean).join(" ");
  return <span aria-hidden="true" className={classes} {...props} />;
}

ToolbarDivider.displayName = "ToolbarDivider";

export default ToolbarDivider;