HoverCard

import {
  HoverCard,
  HoverCardTrigger,
  HoverCardContent,
} from '@mihcm/ui/HoverCard';
 
<HoverCard timing="fast">
  <HoverCardTrigger asChild>
    <a href="#" className="text-sm font-medium underline underline-offset-4">
      @yashi
    </a>
  </HoverCardTrigger>
  <HoverCardContent size="lg" showArrow>
    <div className="space-y-2">
      <h4 className="text-sm font-semibold">Yashi EL</h4>
      <p className="text-sm text-muted-foreground">
        Design Engineer building the design system.
      </p>
      <div className="flex items-center gap-2 text-xs text-muted-foreground">
        <span>Joined Dec 2023</span>
      </div>
    </div>
  </HoverCardContent>
</HoverCard>

<HoverCard openDelay={250} closeDelay={150}>
  <HoverCardTrigger asChild>
    <span className="cursor-pointer text-sm font-medium text-primary underline underline-offset-4">
      Aisha Kumari
    </span>
  </HoverCardTrigger>
  <HoverCardContent variant="soft" padding="md" side="right" align="start">
    <div className="space-y-1">
      <p className="text-sm font-semibold">Aisha Kumari</p>
      <p className="text-xs text-muted-foreground">Senior Engineer · Engineering</p>
      <p className="text-xs text-muted-foreground">Colombo, Sri Lanka</p>
    </div>
  </HoverCardContent>
</HoverCard>

<HoverCard>
  <HoverCardTrigger asChild>
    <span className="underline">Hover me</span>
  </HoverCardTrigger>
  <HoverCardContent align="start" side="top" sideOffset={12} collisionPadding={16} showArrow>
    <p className="text-sm">Aligned to the start with extra offset.</p>
  </HoverCardContent>
</HoverCard>

<HoverCard timing="instant">
  <HoverCardTrigger asChild>
    <span>Policy summary</span>
  </HoverCardTrigger>
  <HoverCardContent
    size="xl"
    maxHeight="sm"
    scrollable
    variant="elevated"
    padding="lg"
    portal
  >
    {/* long preview content */}
  </HoverCardContent>
</HoverCard>