Separator

1"use client";
2 
3import { Separator as SeparatorPrimitive } from "radix-ui";
4import * as React from "react";
5 
6import { cn } from "@/lib/utils";
7 
8const Separator = React.forwardRef<
9  React.ElementRef<typeof SeparatorPrimitive.Root>,
10  React.ComponentPropsWithoutRef<typeof SeparatorPrimitive.Root> & {
11    variant?: "default" | "glass";
12    /** Soft themed shadow (folded from the glass wrapper). */
13    glow?: boolean;
14  }
15>(({ className, orientation = "horizontal", decorative = true, variant = "glass", glow, ...props }, ref) => {
16  // A colored line, not a glass panel — the variant map stays (token use, no resolveMaterial).
17  const variants = {
18    default: "bg-border",
19    glass: "bg-[var(--glass-border)]",
20  };
21 
22  return (
23    <SeparatorPrimitive.Root
24      ref={ref}
25      data-slot="separator"
26      decorative={decorative}
27      orientation={orientation}
28      className={cn(
29        "shrink-0",
30        orientation === "horizontal" ? "h-[1px] w-full" : "h-full w-[1px]",
31        variants[variant],
32        glow && "shadow-sm shadow-(color:--glass-glow)",
33        className,
34      )}
35      {...props}
36    />
37  );
38});
39Separator.displayName = SeparatorPrimitive.Root.displayName;
40 
41export { Separator };