Separator

<div className="space-y-6">
  <div className="text-sm">Content above separator</div>
  <div>
    <Separator className="my-4">OR</Separator>
  </div>
  <div className="flex items-center space-x-4 text-sm">
    <span>Home</span>
    <Separator orientation="vertical" className="h-4" />
    <span>About</span>
    <Separator orientation="vertical" className="h-4" />
    <span>Contact</span>
    <Separator orientation="vertical" className="h-4" />
    <span>Blog</span>
  </div>
</div>

"use client";

import * as React from "react";
import * as SeparatorPrimitive from "@radix-ui/react-separator";
import { cva, type VariantProps } from "class-variance-authority";
import { cn } from "@/lib/utils";

const separatorVariants = cva("shrink-0 bg-[hsl(var(--hu-border))]", {
  variants: {
    orientation: {
      horizontal: "h-[1px] w-full",
      vertical: "h-full w-[1px]",
    },
    size: {
      sm: "",
      md: "",
      lg: "",
    },
  },
  compoundVariants: [
    {
      orientation: "horizontal",
      size: "sm",
      className: "h-[1px]",
    },
    {
      orientation: "horizontal",
      size: "md",
      className: "h-[2px]",
    },
    {
      orientation: "horizontal",
      size: "lg",
      className: "h-[4px]",
    },
    {
      orientation: "vertical",
      size: "sm",
      className: "w-[1px]",
    },
    {
      orientation: "vertical",
      size: "md",
      className: "w-[2px]",
    },
    {
      orientation: "vertical",
      size: "lg",
      className: "w-[4px]",
    },
  ],
  defaultVariants: {
    orientation: "horizontal",
    size: "sm",
  },
});

export interface SeparatorProps
  extends React.ComponentPropsWithoutRef<typeof SeparatorPrimitive.Root>,
    VariantProps<typeof separatorVariants> {}

const Separator = React.forwardRef<
  React.ElementRef<typeof SeparatorPrimitive.Root>,
  SeparatorProps
>(({ className, orientation = "horizontal", size, ...props }, ref) => (
  <SeparatorPrimitive.Root
    ref={ref}
    decorative
    orientation={orientation}
    className={cn(separatorVariants({ orientation, size }), className)}
    {...props}
  />
));
Separator.displayName = SeparatorPrimitive.Root.displayName;

export { Separator, separatorVariants };

<div className="space-y-4">
  <p>Content above</p>
  <Separator />
  <p>Content below</p>
</div>

{/* Horizontal */}
<div className="space-y-4">
  <p>Content above</p>
  <Separator orientation="horizontal" />
  <p>Content below</p>
</div>

{/* Vertical */}
<div className="flex h-12 items-center space-x-4">
  <span>Left content</span>
  <Separator orientation="vertical" />
  <span>Right content</span>
</div>

<Separator size="sm" />
<Separator size="md" />
<Separator size="lg" />

<Separator orientation="vertical" size="sm" className="h-8" />
<Separator orientation="vertical" size="md" className="h-8" />
<Separator orientation="vertical" size="lg" className="h-8" />

<div className="flex items-center space-x-4 text-sm">
  <span>Home</span>
  <Separator orientation="vertical" className="h-4" />
  <span>About</span>
  <Separator orientation="vertical" className="h-4" />
  <span>Contact</span>
  <Separator orientation="vertical" className="h-4" />
  <span>Blog</span>
</div>

{/* Horizontal text separators */}
<Separator>OR</Separator>
<Separator>AND</Separator>
<Separator>Continue with</Separator>
<Separator>More options</Separator>

{/* Vertical text separator */}
<div className="flex h-full items-center space-x-4">
    <div>Option A</div>
    <Separator orientation="vertical">OR</Separator>
    <div>Option B</div>
</div>