Popover

1import type { Component, ValidComponent } from "solid-js"
2import { splitProps } from "solid-js"
3 
4import type { PolymorphicProps } from "@kobalte/core/polymorphic"
5import * as PopoverPrimitive from "@kobalte/core/popover"
6 
7import { cn } from "~/lib/utils"
8 
9const PopoverTrigger = PopoverPrimitive.Trigger
10 
11const Popover: Component<PopoverPrimitive.PopoverRootProps> = (props) => {
12  return <PopoverPrimitive.Root gutter={4} {...props} />
13}
14 
15type PopoverContentProps<T extends ValidComponent = "div"> =
16  PopoverPrimitive.PopoverContentProps<T> & { class?: string | undefined }
17 
18const PopoverContent = <T extends ValidComponent = "div">(
19  props: PolymorphicProps<T, PopoverContentProps<T>>
20) => {
21  const [local, others] = splitProps(props as PopoverContentProps, ["class"])
22  return (
23    <PopoverPrimitive.Portal>
24      <PopoverPrimitive.Content
25        class={cn(
26          "z-50 w-72 origin-[var(--kb-popover-content-transform-origin)] rounded-md border bg-popover p-4 text-popover-foreground shadow-md outline-none 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",
27          local.class
28        )}
29        {...others}
30      />
31    </PopoverPrimitive.Portal>
32  )
33}
34 
35export { Popover, PopoverTrigger, PopoverContent }