Separator

"use client";

import { Separator as SeparatorPrimitive } from "@base-ui/react/separator";
import { cn } from "cn";

type SeparatorVariant = "single" | "double" | "fill";
type SeparatorAlign = "start" | "center" | "end";

function Separator({
  className,
  orientation = "horizontal",
  variant = "single",
  align = "center",
  children,
  contentClassName,
  ...props
}: SeparatorPrimitive.Props & {
  variant?: SeparatorVariant;
  align?: SeparatorAlign;
  contentClassName?: string;
}) {
  const hasContent = children !== undefined && children !== null;
  const horizontalContent = hasContent && orientation === "horizontal";

  return (
    <SeparatorPrimitive
      data-slot="separator"
      data-variant={variant}
      data-align={horizontalContent ? align : undefined}
      orientation={orientation}
      role={horizontalContent ? "group" : undefined}
      aria-orientation={horizontalContent ? undefined : orientation}
      className={cn(
        "shrink-0 data-horizontal:w-full data-vertical:self-stretch",
        horizontalContent
          ? cn(
              "flex items-center",
              align === "start" && "justify-start",
              align === "center" && "justify-center",
              align === "end" && "justify-end",
              variant === "single" && "gap-3",
              variant === "double" &&
                "border-y border-[var(--surface-strong,var(--border))] py-2.5",
              variant === "fill" &&
                "rounded-[10px] bg-[var(--surface-subtle,var(--muted))] px-4 py-2.5"
            )
          : cn(
              // In dark mode the popover surface equals --surface-strong, so
              // inside a popover the hairline uses --border, as
              // DropdownMenuSeparator does.
              variant === "single" &&
                "bg-[var(--surface-strong,var(--border))] data-horizontal:h-px data-vertical:w-px dark:in-data-[slot=popover-content]:bg-border",
              variant === "double" &&
                "border-[var(--surface-strong,var(--border))] data-horizontal:h-2 data-horizontal:border-y data-vertical:w-2 data-vertical:border-x",
              variant === "fill" &&
                "rounded-full bg-[var(--surface-subtle,var(--muted))] data-horizontal:h-2 data-vertical:w-2"
            ),
        className
      )}
      {...props}
    >
      {horizontalContent ? (
        <>
          {variant === "single" && align !== "start" && (
            <span
              aria-hidden
              className="h-px min-w-0 flex-1 bg-[var(--surface-strong,var(--border))]"
            />
          )}
          <div
            className={cn(
              "shrink-0 text-sm leading-5 font-medium tracking-normal text-[color:var(--foreground-secondary,var(--muted-foreground))]",
              contentClassName
            )}
          >
            {children}
          </div>
          {variant === "single" && align !== "end" && (
            <span
              aria-hidden
              className="h-px min-w-0 flex-1 bg-[var(--surface-strong,var(--border))]"
            />
          )}
        </>
      ) : (
        children
      )}
    </SeparatorPrimitive>
  );
}

export { Separator };