separator

1import * as React from "react"
2import { cva, type VariantProps } from "class-variance-authority"
3 
4import { cn } from "@/lib/utils"
5import "./separator.css"
6 
7const separatorVariants = cva("separator-base shrink-0", {
8  variants: {
9    orientation: {
10      horizontal: "w-full h-px",
11      vertical: "w-px h-full",
12    },
13    variant: {
14      subtle: "separator-subtle",
15      default: "separator-default",
16      strong: "separator-strong",
17    },
18  },
19  defaultVariants: {
20    orientation: "horizontal",
21    variant: "default",
22  },
23})
24 
25function Separator({
26  className,
27  orientation = "horizontal",
28  variant,
29  decorative = true,
30  ...props
31}: React.ComponentProps<"div"> &
32  VariantProps<typeof separatorVariants> & {
33    decorative?: boolean
34  }) {
35  return (
36    <div
37      data-slot="separator"
38      role={decorative ? "none" : "separator"}
39      aria-orientation={
40        !decorative && orientation === "vertical" ? "vertical" : undefined
41      }
42      aria-hidden={decorative ? true : undefined}
43      className={cn(separatorVariants({ orientation, variant, className }))}
44      {...props}
45    />
46  )
47}
48 
49export { Separator, separatorVariants }