Separator

bunx --bun shadcn@latest add @woohl/separator

import type { ComponentProps, ReactNode } from "react";
import { Separator as SeparatorPrimitive } from "radix-ui";
import { cn } from "@/registry/tier-2-primitives/lib/utils";

/** Horizontal or vertical visual divider with optional label. */
export type SeparatorProps = Omit<ComponentProps<"div">, "children"> & {
  orientation?: "horizontal" | "vertical";
  decorative?: boolean;
  /** A word in the middle of the line — "or", "then". Horizontal only. */
  children?: ReactNode;
};

export function Separator({
  className,
  orientation = "horizontal",
  decorative = true,
  children,
  ...props
}: SeparatorProps) {
  if (children && orientation === "horizontal") {
    return (
      <div
        data-slot="separator"
        role={decorative ? "none" : "separator"}
        aria-orientation={decorative ? undefined : orientation}
        className={cn("flex items-center gap-4", className)}
        {...props}
      >
        <span aria-hidden className="bg-border-subtle h-px flex-1" />
        <span className="font-ui text-caption text-text-muted">{children}</span>
        <span aria-hidden className="bg-border-subtle h-px flex-1" />
      </div>
    );
  }

  return (
    <SeparatorPrimitive.Root
      data-slot="separator"
      orientation={orientation}
      decorative={decorative}
      className={cn(
        "bg-border-subtle flex-none",
        orientation === "horizontal"
          ? "h-px w-full"
          : "h-full w-px self-stretch",
        className,
      )}
      {...props}
    />
  );
}