Hover Card

import {
  Avatar,
  AvatarFallback,
  CalendarIcon,
  HoverCard,
  HoverCardContent,
  HoverCardTrigger,
} from "@smallest-inc/ui";

export default function HoverCardDefault() {
  return (
    <p className="text-sm text-fg-secondary">
      Escalated by{" "}
      <HoverCard>
        <HoverCardTrigger href="#support-agent" className="font-medium text-fg underline-offset-4 hover:underline">
          Support agent
        </HoverCardTrigger>
        <HoverCardContent className="w-80">
          <div className="flex gap-3">
            <Avatar size="lg">
              <AvatarFallback>SA</AvatarFallback>
            </Avatar>
            <div className="flex min-w-0 flex-1 flex-col gap-1">
              <p className="text-sm font-medium text-fg">Support agent</p>
              <p className="text-sm text-fg-secondary">Answers inbound billing and order calls in English and Spanish.</p>
              <div className="flex items-center gap-1.5 pt-1 text-sm text-fg-tertiary">
                <CalendarIcon className="size-4 shrink-0" />
                Deployed March 2026
              </div>
            </div>
          </div>
        </HoverCardContent>
      </HoverCard>{" "}
      after 2 failed transfers.
    </p>
  );
}

import { Button, HoverCard, HoverCardContent, HoverCardTrigger } from "@smallest-inc/ui";

const sides = [
  { side: "top", label: "Top", className: "col-start-2 row-start-1" },
  { side: "left", label: "Left", className: "col-start-1 row-start-2" },
  { side: "right", label: "Right", className: "col-start-3 row-start-2" },
  { side: "bottom", label: "Bottom", className: "col-start-2 row-start-3" },
] as const;

export default function HoverCardSide() {
  return (
    <div className="mx-auto grid grid-cols-3 grid-rows-3 place-items-center gap-3 py-16">
      {sides.map(({ side, label, className }) => (
        <HoverCard key={side}>
          <HoverCardTrigger delay={200} className={className} render={<Button variant="secondary" />}>
            {label}
          </HoverCardTrigger>
          <HoverCardContent side={side} collisionAvoidance={{ side: "none" }} className="w-56">
            Opens on the {side} of the trigger.
          </HoverCardContent>
        </HoverCard>
      ))}
    </div>
  );
}

import { Button, HoverCard, HoverCardContent, HoverCardTrigger } from "@smallest-inc/ui";

const aligns = [
  { align: "start", label: "Start" },
  { align: "center", label: "Center" },
  { align: "end", label: "End" },
] as const;

export default function HoverCardAlign() {
  return (
    <div className="flex flex-wrap items-center gap-3">
      {aligns.map(({ align, label }) => (
        <HoverCard key={align}>
          <HoverCardTrigger delay={200} render={<Button variant="secondary" />}>
            {label}
          </HoverCardTrigger>
          <HoverCardContent align={align} className="w-56">
            Aligned to the {align} of the trigger.
          </HoverCardContent>
        </HoverCard>
      ))}
    </div>
  );
}

import { Button, HoverCard, HoverCardContent, HoverCardTrigger } from "@smallest-inc/ui";

export default function HoverCardDelay() {
  return (
    <div className="flex flex-wrap items-center gap-3">
      <HoverCard>
        <HoverCardTrigger delay={100} closeDelay={100} render={<Button variant="secondary" />}>
          Fast
        </HoverCardTrigger>
        <HoverCardContent className="w-56">Opens after 100ms and closes after 100ms.</HoverCardContent>
      </HoverCard>
      <HoverCard>
        <HoverCardTrigger render={<Button variant="secondary" />}>Default</HoverCardTrigger>
        <HoverCardContent className="w-56">Opens after 600ms and closes after 300ms.</HoverCardContent>
      </HoverCard>
      <HoverCard>
        <HoverCardTrigger delay={800} closeDelay={400} render={<Button variant="secondary" />}>
          Slow
        </HoverCardTrigger>
        <HoverCardContent className="w-56">Opens after 800ms and closes after 400ms.</HoverCardContent>
      </HoverCard>
    </div>
  );
}