Aurora Hover Card

1"use client"
2 
3import * as React from "react"
4import * as HoverCardPrimitive from "@radix-ui/react-hover-card"
5import { cn } from "@/lib/utils"
6import { usePortalContainer } from "@/registry/aurora/lib/portal-container"
7 
8const HoverCardRoot = HoverCardPrimitive.Root
9const HoverCardTrigger = HoverCardPrimitive.Trigger
10 
11function HoverCardContent({
12  ref,
13  className,
14  align = "start",
15  sideOffset = 8,
16  style,
17  ...props
18}: React.ComponentProps<typeof HoverCardPrimitive.Content> & {
19  ref?: React.Ref<React.ComponentRef<typeof HoverCardPrimitive.Content>>
20}) {
21  const portalContainer = usePortalContainer()
22  return (
23    <HoverCardPrimitive.Portal container={portalContainer ?? undefined}>
24      <HoverCardPrimitive.Content
25        ref={ref}
26        data-slot="hover-card-content"
27        align={align}
28        sideOffset={sideOffset}
29        className={cn(
30          "z-50 w-64 origin-(--radix-hover-card-content-transform-origin) overflow-hidden rounded-[var(--aurora-radius-2)] border p-3 outline-none",
31          "data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2",
32          "data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
33          "data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95",
34          "data-[state=open]:animate-in data-[state=open]:fade-in-0 data-[state=open]:zoom-in-95",
35          className
36        )}
37        style={{
38          background: "var(--aurora-panel-strong)",
39          borderColor: "var(--aurora-border-strong)",
40          boxShadow: "var(--aurora-shadow-strong), var(--aurora-highlight-strong)",
41          color: "var(--aurora-text-primary)",
42          ...style,
43        }}
44        {...props}
45      />
46    </HoverCardPrimitive.Portal>
47  )
48}
49 
50export interface HoverCardProps
51  extends Omit<React.ComponentPropsWithoutRef<typeof HoverCardPrimitive.Root>, "children"> {
52  trigger: React.ReactNode
53  children: React.ReactNode
54  className?: string
55  style?: React.CSSProperties
56  contentClassName?: string
57  contentStyle?: React.CSSProperties
58}
59 
60function HoverCard({
61  trigger,
62  children,
63  className,
64  style,
65  contentClassName,
66  contentStyle,
67  openDelay = 180,
68  closeDelay = 120,
69  ...props
70}: HoverCardProps) {
71  return (
72    <HoverCardRoot openDelay={openDelay} closeDelay={closeDelay} {...props}>
73      <HoverCardTrigger asChild>
74        <span className={cn("inline-flex", className)} style={style}>
75          {trigger}
76        </span>
77// … truncated