popover

1import type { PolymorphicProps } from "@kobalte/core/polymorphic";
2import * as PopoverPrimitive from "@kobalte/core/popover";
3 
4import { cn } from "~/lib/utils.ts";
5import type { Component, ComponentProps, ValidComponent } from "solid-js";
6 
7import { splitProps } from "solid-js";
8 
9const Popover: Component<PopoverPrimitive.PopoverRootProps> = (props) => {
10  return <PopoverPrimitive.Root data-slot="popover" gutter={4} {...props} />;
11};
12 
13type PopoverTriggerProps<T extends ValidComponent = "button"> =
14  & PopoverPrimitive.PopoverTriggerProps<T>
15  & { class?: string | undefined };
16 
17const PopoverTrigger = <T extends ValidComponent = "button">(
18  props: PolymorphicProps<T, PopoverTriggerProps<T>>,
19) => {
20  return (
21    <PopoverPrimitive.Trigger
22      data-slot="popover-trigger"
23      {...(props as PopoverTriggerProps)}
24    />
25  );
26};
27 
28type PopoverContentProps<T extends ValidComponent = "div"> =
29  & PopoverPrimitive.PopoverContentProps<T>
30  & { class?: string | undefined };
31 
32const PopoverContent = <T extends ValidComponent = "div">(
33  props: PolymorphicProps<T, PopoverContentProps<T>>,
34) => {
35  const [local, others] = splitProps(props as PopoverContentProps, ["class"]);
36  return (
37    <PopoverPrimitive.Portal>
38      <PopoverPrimitive.Content
39        data-slot="popover-content"
40        class={cn(
41          "bg-popover text-popover-foreground data-expanded:animate-in data-closed:animate-out data-closed:fade-out-0 data-expanded:fade-in-0 data-closed:zoom-out-95 data-expanded:zoom-in-95 ring-foreground/10 flex flex-col gap-2.5 rounded-lg p-2.5 text-sm shadow-md ring-1 duration-100 z-50 w-72 origin-(--kb-popover-content-transform-origin) outline-hidden",
42          local.class,
43        )}
44        {...others}
45      />
46    </PopoverPrimitive.Portal>
47  );
48};
49 
50type PopoverAnchorProps<T extends ValidComponent = "div"> =
51  PopoverPrimitive.PopoverAnchorProps<T>;
52 
53const PopoverAnchor = <T extends ValidComponent = "div">(
54  props: PolymorphicProps<T, PopoverAnchorProps<T>>,
55) => {
56  return (
57    <PopoverPrimitive.Anchor
58      data-slot="popover-anchor"
59      {...(props as PopoverAnchorProps)}
60    />
61  );
62};
63 
64const PopoverHeader: Component<ComponentProps<"div">> = (props) => {
65  const [local, others] = splitProps(props, ["class"]);
66  return (
67    <div
68      data-slot="popover-header"
69      class={cn("flex flex-col gap-0.5 text-sm", local.class)}
70      {...others}
71    />
72  );
73};
74 
75type PopoverTitleProps<T extends ValidComponent = "h2"> =
76  & PopoverPrimitive.PopoverTitleProps<T>
77// … truncated