Separator

1import type { ValidComponent } from "solid-js"
2import { splitProps } from "solid-js"
3 
4import type { PolymorphicProps } from "@kobalte/core/polymorphic"
5import * as SeparatorPrimitive from "@kobalte/core/separator"
6 
7import { cn } from "~/lib/utils"
8 
9type SeparatorRootProps<T extends ValidComponent = "hr"> =
10  SeparatorPrimitive.SeparatorRootProps<T> & { class?: string | undefined }
11 
12const Separator = <T extends ValidComponent = "hr">(
13  props: PolymorphicProps<T, SeparatorRootProps<T>>
14) => {
15  const [local, others] = splitProps(props as SeparatorRootProps, ["class", "orientation"])
16  return (
17    <SeparatorPrimitive.Root
18      orientation={local.orientation ?? "horizontal"}
19      class={cn(
20        "shrink-0 bg-border",
21        local.orientation === "vertical" ? "h-full w-px" : "h-px w-full",
22        local.class
23      )}
24      {...others}
25    />
26  )
27}
28 
29export { Separator }