hover-card

1import * as HoverCardPrimitive from "@kobalte/core/hover-card";
2import type { PolymorphicProps } from "@kobalte/core/polymorphic";
3 
4import { cn } from "~/lib/utils.ts";
5import type { Component, ValidComponent } from "solid-js";
6 
7import { splitProps } from "solid-js";
8 
9const HoverCard: Component<HoverCardPrimitive.HoverCardRootProps> = (props) => {
10  return (
11    <HoverCardPrimitive.Root data-slot="hover-card" gutter={4} {...props} />
12  );
13};
14 
15type HoverCardTriggerProps<T extends ValidComponent = "a"> =
16  & HoverCardPrimitive.HoverCardTriggerProps<T>
17  & { class?: string | undefined };
18 
19const HoverCardTrigger = <T extends ValidComponent = "a">(
20  props: PolymorphicProps<T, HoverCardTriggerProps<T>>,
21) => {
22  return (
23    <HoverCardPrimitive.Trigger
24      data-slot="hover-card-trigger"
25      {...(props as HoverCardTriggerProps)}
26    />
27  );
28};
29 
30type HoverCardContentProps<T extends ValidComponent = "div"> =
31  & HoverCardPrimitive.HoverCardContentProps<T>
32  & {
33    class?: string | undefined;
34  };
35 
36const HoverCardContent = <T extends ValidComponent = "div">(
37  props: PolymorphicProps<T, HoverCardContentProps<T>>,
38) => {
39  const [local, others] = splitProps(props as HoverCardContentProps, ["class"]);
40  return (
41    <HoverCardPrimitive.Portal>
42      <HoverCardPrimitive.Content
43        data-slot="hover-card-content"
44        class={cn(
45          "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 bg-popover text-popover-foreground w-64 rounded-lg p-2.5 text-sm shadow-md ring-1 duration-100 z-50 origin-(--kb-hovercard-content-transform-origin) outline-hidden",
46          local.class,
47        )}
48        {...others}
49      />
50    </HoverCardPrimitive.Portal>
51  );
52};
53 
54export { HoverCard, HoverCardContent, HoverCardTrigger };