Separator

1"use client";
2 
3import "./separator.css";
4import { Separator as BaseSeparator } from "@base-ui/react/separator";
5import type React from "react";
6import { cn } from "tailwind-variants";
7 
8import { SeparatorContext } from "./separator.context";
9import { separatorVariants, type SeparatorVariants } from "./separator.variants";
10 
11export type SeparatorProps = SeparatorVariants & React.ComponentProps<typeof BaseSeparator>;
12 
13export const SeparatorRoot = ({
14  className,
15  orientation = "horizontal",
16  ...props
17}: SeparatorProps) => {
18  const slots = separatorVariants({ orientation });
19 
20  return (
21    <SeparatorContext.Provider value={{ slots }}>
22      <BaseSeparator className={cn(slots.root(), className)} orientation={orientation} {...props} />
23    </SeparatorContext.Provider>
24  );
25};
26 
27export const Separator = SeparatorRoot;