Separator (Extended)

1import * as React from "react";
2import { Separator as SeparatorPrimitive } from "@base-ui/react/separator";
3 
4import { cn } from "@/lib/utils";
5import { cva, VariantProps } from "class-variance-authority";
6 
7const separatorVariants = cva(
8  "shrink-0 data-[orientation=horizontal]:border-t data-[orientation=horizontal]:w-full data-[orientation=vertical]:h-full data-[orientation=vertical]:border-e",
9  {
10    variants: {
11      variant: {
12        default: "border-solid",
13        dashed: "border-dashed",
14        dotted: "border-dotted",
15        double:
16          "border-double p-px data-[orientation=horizontal]:border-y data-[orientation=vertical]:border-x",
17      },
18    },
19  }
20);
21 
22function Separator({
23  className,
24  ...props
25}: React.ComponentProps<typeof SeparatorPrimitive> &
26  VariantProps<typeof separatorVariants>) {
27  return (
28    <SeparatorPrimitive
29      data-slot="separator"
30      className={cn(separatorVariants({ variant: props.variant }), className)}
31      {...props}
32    />
33  );
34}
35 
36export { Separator };