Hover Card

"use client"

import * as React from "react"
import { AnimatePresence, motion } from "motion/react"
import { HoverCard as Primitive } from "radix-ui"

import { cn } from "@/lib/utils"
import { useControllableState } from "@/hooks/use-controllable-state"
import { fade, spring, useMotionSafe } from "@/lib/motion"

// Spread rather than written as an attribute: in Base UI projects the shadcn CLI
// rewrites a literal `asChild` into a `render` prop, and these are Radix parts.
const slot = { asChild: true } as const

const OpenContext = React.createContext(false)

export type HoverCardProps = Omit<
  React.ComponentProps<typeof Primitive.Root>,
  "open" | "defaultOpen" | "onOpenChange"
> & {
  open?: boolean
  defaultOpen?: boolean
  onOpenChange?: (open: boolean) => void
}

/** A preview that opens beside a link shortly after the pointer or focus rests on it. */
function HoverCard({
  open: openProp,
  defaultOpen = false,
  onOpenChange,
  // Long enough to ignore a pointer passing over, short enough to feel attached to the link.
  openDelay = 150,
  closeDelay = 100,
  ...props
}: HoverCardProps) {
  const [open, setOpen] = useControllableState({
    value: openProp,
    defaultValue: defaultOpen,
    onChange: onOpenChange,
  })
  return (
    <OpenContext.Provider value={open}>
      <Primitive.Root open={open} onOpenChange={setOpen} openDelay={openDelay} closeDelay={closeDelay} {...props} />
    </OpenContext.Provider>
  )
}

function HoverCardTrigger(props: React.ComponentProps<typeof Primitive.Trigger>) {
  return <Primitive.Trigger {...slot} {...props} />
}

function HoverCardContent({
  className,
  children,
  sideOffset = 6,
  ...props
}: React.ComponentProps<typeof Primitive.Content>) {
  const open = React.useContext(OpenContext)
  const { reduced, safe } = useMotionSafe()

  return (
    <AnimatePresence>
      {open && (
        <Primitive.Portal forceMount>
          <Primitive.Content {...slot} forceMount sideOffset={sideOffset} collisionPadding={8} {...props}>
            <motion.div
              data-slot="hover-card-content"
              initial={{ opacity: 0, scale: reduced ? 1 : 0.95 }}
              animate={{ opacity: 1, scale: 1 }}
              exit={{ opacity: 0, scale: reduced ? 1 : 0.97, transition: fade }}
              transition={safe(spring.snappy)}
              className={cn(
                "z-50 w-72 max-w-[calc(100vw-2rem)] origin-(--radix-hover-card-content-transform-origin) rounded-lg border border-border bg-popover p-4 text-sm text-popover-foreground shadow-lg outline-none",
                className
              )}
            >
              {children}
            </motion.div>
          </Primitive.Content>
        </Primitive.Portal>
      )}
    </AnimatePresence>
  )
}

export { HoverCard, HoverCardTrigger, HoverCardContent }