separator

1import type { PolymorphicProps } from "@kobalte/core/polymorphic";
2import * as SeparatorPrimitive from "@kobalte/core/separator";
3 
4import { cn } from "~/lib/utils.ts";
5import type { ValidComponent } from "solid-js";
6 
7import { splitProps } from "solid-js";
8 
9type SeparatorRootProps<T extends ValidComponent = "div"> =
10  & SeparatorPrimitive.SeparatorRootProps<T>
11  & {
12    class?: string | undefined;
13    decorative?: boolean | undefined;
14  };
15 
16const Separator = <T extends ValidComponent = "div">(
17  props: PolymorphicProps<T, SeparatorRootProps<T>>,
18) => {
19  const [local, others] = splitProps(props as SeparatorRootProps, [
20    "class",
21    "orientation",
22    "decorative",
23  ]);
24  const orientation = () => local.orientation ?? "horizontal";
25  const decorative = () => local.decorative ?? true;
26  // Rendered as a div like the upstream radix separator: tailwind's
27  // preflight and typeset both style hr (stray top border, height: 0,
28  // prose margins).
29  //
30  // Note that a vertical separator stretches instead of taking h-full: a
31  // percentage height collapses to 0 inside a flex row that has no definite
32  // height. Setting an explicit height on it defeats align-self: stretch
33  // (the item falls back to flex-start), so pair a forced height with
34  // self-center.
35  //
36  // Kobalte has no `decorative` prop and always announces the separator, so
37  // the semantics are authored here instead of being derived from the
38  // primitive's `orientation`: a decorative separator gets `role="none"` and
39  // no `aria-orientation`, exactly like the radix one.
40  return (
41    <SeparatorPrimitive.Root
42      as="div"
43      data-slot="separator"
44      data-orientation={orientation()}
45      role={decorative() ? "none" : "separator"}
46      aria-orientation={!decorative() && orientation() === "vertical"
47        ? "vertical"
48        : undefined}
49      class={cn(
50        "shrink-0 bg-border data-[orientation=horizontal]:h-px data-[orientation=horizontal]:w-full data-[orientation=vertical]:w-px data-[orientation=vertical]:self-stretch",
51        local.class,
52      )}
53      {...others}
54    />
55  );
56};
57 
58export { Separator };