Motion hover cards

"use client"

import * as React from "react"
import { AnimatePresence, motion, useReducedMotion } from "motion/react"

import { cn } from "@/lib/utils"

/* Motion hover-card family: 5 showy hover cards. The card itself is plain
   (bg-popover); the DIFFERENCE is the opening entrance animation. As in essentials
   it is a trigger + a card positioned below it, opened on HOVER (mouseenter/leave)
   AND focus (focus/blur); NO radix or portal, self-contained. AnimatePresence
   carries the enter/exit animation. The card is centered horizontally with x:"-50%"
   (a motion value rather than the translate CSS, so motion does not override the
   transform). Under reduced motion ALL transforms drop away and only an opacity
   fade remains. Color comes ONLY from tokens; alpha via color-mix. Size = card
   width. trigger = the trigger, children = the card content. */

export type StyledSize = "sm" | "md" | "lg" | "xl"

const cardWidth: Record<StyledSize, string> = {
  sm: "w-56",
  md: "w-64",
  lg: "w-72",
  xl: "w-80",
}

/* Card shell: position plus appearance. Horizontal centring is done with the motion x value, which is why there is NO -translate-x-1/2 here. lucide svg and remixicon i are kept at parity for icon compatibility. */
const cardBase =
  "absolute left-1/2 top-full z-20 mt-2 block origin-top rounded-xl border border-border bg-popover p-4 text-left text-popover-foreground shadow-lg [&_svg]:size-4 [&_svg]:shrink-0 [&_i]:text-base [&_i]:leading-none"

/* Trigger link appearance plus focus ring (same as essentials). */
const triggerBase =
  "inline-flex items-center rounded-md font-medium text-primary underline-offset-4 outline-none hover:underline focus-visible:ring-[3px] focus-visible:ring-ring/50"

interface Props {
  size?: StyledSize
  trigger?: React.ReactNode
  children?: React.ReactNode
  className?: string
}

/* The enter/exit animation supplied from outside; it differs in every export. Every value carries x:"-50%" so the card stays horizontally centred (the motion transform must not override it). */
type CardMotion = {
  initial: Record<string, number | string>
  animate: Record<string, number | string>
  exit: Record<string, number | string>
  transition?: Record<string, unknown>
}

/* Shared shell: trigger plus an AnimatePresence card. Hover AND focus are tracked separately, and the card is visible while either is active (it stays open on focus even after the mouse leaves). */
function HoverCardShell({
  props,
  cardMotion,
  cardClassName,
}: {
  props: Props
  cardMotion: CardMotion
  cardClassName?: string
}) {
  const { size = "md", trigger, children, className } = props
  const [hovered, setHovered] = React.useState(false)
  const [focused, setFocused] = React.useState(false)
  const reduce = useReducedMotion()
  const isOpen = hovered || focused

  /* reduced motion: no transform, fade only; x is kept for centring. */
  const fade: CardMotion = {
    initial: { opacity: 0, x: "-50%" },
    animate: { opacity: 1, x: "-50%" },
    exit: { opacity: 0, x: "-50%" },
    transition: { duration: 0.18, ease: "easeOut" },
  }
  const m = reduce ? fade : cardMotion

  return (
    <span
      data-slot="styled-hover-card"
      className="relative inline-flex"
      onMouseEnter={() => setHovered(true)}
      onMouseLeave={() => setHovered(false)}
      onFocus={() => setFocused(true)}
      onBlur={() => setFocused(false)}
    >
      {trigger ?? (
        <button type="button" className={triggerBase}>
          Hover me
        </button>
      )}

      <AnimatePresence>
        {isOpen ? (
          <motion.span
            role="dialog"
            className={cn(cardBase, cardWidth[size], cardClassName, className)}
            initial={m.initial}
            animate={m.animate}
            exit={m.exit}
            transition={m.transition ?? { duration: 0.18, ease: "easeOut" }}
          >
            {children ?? "A quick preview card that opens on hover or focus."}
          </motion.span>
        ) : null}
      </AnimatePresence>
    </span>
  )
}

/* Fade: it appears softly with opacity alone (no transform). */
export function FadeHoverCard(props: Props) {
  return (
    <HoverCardShell
      props={props}
      cardMotion={{
        initial: { opacity: 0, x: "-50%" },
        animate: { opacity: 1, x: "-50%" },
        exit: { opacity: 0, x: "-50%" },
        transition: { duration: 0.18, ease: "easeOut" },
      }}
    />
  )
}

/* Scale: it opens by growing from the top edge (origin-top, scale 0.92 -> 1). */
export function ScaleHoverCard(props: Props) {
  return (
    <HoverCardShell
      props={props}
      cardMotion={{
        initial: { opacity: 0, x: "-50%", scale: 0.92 },
        animate: { opacity: 1, x: "-50%", scale: 1 },
        exit: { opacity: 0, x: "-50%", scale: 0.96 },
        transition: { duration: 0.18, ease: "easeOut" },
      }}
    />
  )
}

/* Slide: alttan yukari kayarak girer (y 8 -> 0). */
export function SlideHoverCard(props: Props) {
  return (
    <HoverCardShell
      props={props}
      cardMotion={{
        initial: { opacity: 0, x: "-50%", y: 8 },
        animate: { opacity: 1, x: "-50%", y: 0 },
        exit: { opacity: 0, x: "-50%", y: 6 },
        transition: { duration: 0.2, ease: "easeOut" },
      }}
    />
  )
}

/* Pop: dusuk damping spring ile overshoot yaparak patlar (scale 0.8 -> 1). */
export function PopHoverCard(props: Props) {
  return (
    <HoverCardShell
      props={props}
      cardMotion={{
        initial: { opacity: 0, x: "-50%", scale: 0.8 },
        animate: { opacity: 1, x: "-50%", scale: 1 },
        exit: { opacity: 0, x: "-50%", scale: 0.9 },
        transition: { type: "spring", stiffness: 500, damping: 12 },
      }}
    />
  )
}

/* Spring: yumusak spring ile hafif yukselerek ve buyuyerek girer. */
export function SpringHoverCard(props: Props) {
  return (
    <HoverCardShell
      props={props}
      cardMotion={{
        initial: { opacity: 0, x: "-50%", y: 10, scale: 0.96 },
        animate: { opacity: 1, x: "-50%", y: 0, scale: 1 },
        exit: { opacity: 0, x: "-50%", y: 6 },
        transition: { type: "spring", stiffness: 300, damping: 22 },
      }}
    />
  )
}