{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "preview-card",
  "type": "registry:ui",
  "title": "Preview card",
  "description": "What is behind a link, seen by resting on it: after a steady hover the popover's plate rises out of the link with an image, title, description and host; it lingers so you can move onto it.",
  "dependencies": [
    "@base-ui/react@^1.8.0"
  ],
  "registryDependencies": [
    "https://metalui.dev/r/tokens.json"
  ],
  "files": [
    {
      "path": "packages/metalui/src/components/preview-card/preview-card.tsx",
      "type": "registry:ui",
      "target": "components/metalui/preview-card/preview-card.tsx",
      "content": "'use client';\n\nimport * as React from 'react';\nimport { PreviewCard as BaseCard } from '@base-ui/react/preview-card';\nimport { popoverParts } from '../popover/popover';\n\n/* ─────────────────────────────────────────────────────────\n * PREVIEW CARD, what is behind a link, seen by resting on it, on Base UI Preview Card\n *\n *   rest      the link, as it is\n *   wait      a steady hover of 600 ms: passing over a link never flashes the card\n *   open      the popover's frosted plate rises one nest out of the link on the surface spring:\n *             an optional image, the title, a line of description, where it goes\n *   linger    the pointer can move onto the card; it stays 300 ms after the pointer leaves\n *   close     it fades on the release spring\n * Reduce Motion: a crossfade.\n * The plate, rise and text are the popover's; the preview-card recipe adds the width and timing.\n * ───────────────────────────────────────────────────────── */\n\nconst POSITIONER = 'mu-preview-card-positioner z-menu-z';\nconst PLATE = `${popoverParts.PLATE} mu-preview-card w-preview-card-width grid gap-preview-card-gap`;\nconst IMAGE = 'mu-preview-card-image block w-full h-preview-card-image object-cover rounded-preview-card-radius';\n// The popover's description look; the card's own gap spaces it.\nconst DESCRIPTION = 'mu-preview-card-description m-0 type-body text-ink2';\nconst HOST = 'mu-preview-card-host type-meta text-ink3';\n\nexport interface Preview {\n  title: string;\n  description?: string;\n  /** Where it goes, shown small at the end: \"w3.org\". */\n  host?: string;\n  /** An image of the destination. */\n  image?: string;\n}\n\nexport interface PreviewCardProps {\n  /** The link it previews (it keeps its own look and behaviour). */\n  children: React.ReactElement;\n  preview: Preview;\n  side?: 'bottom' | 'top';\n}\n\nfunction timing(name: 'delay' | 'close', fallback: number) {\n  if (typeof window === 'undefined') return fallback;\n  return parseFloat(getComputedStyle(document.documentElement).getPropertyValue(`--mu-r-preview-card-self-${name}`)) || fallback;\n}\n\n/** Shows what is behind a link after a steady hover. */\nexport function PreviewCard({ children, preview, side = 'bottom' }: PreviewCardProps) {\n  return (\n    <BaseCard.Root>\n      <BaseCard.Trigger render={children} delay={timing('delay', 600)} closeDelay={timing('close', 300)} />\n      <BaseCard.Portal>\n        <BaseCard.Positioner className={POSITIONER} side={side} sideOffset={6} collisionPadding={8}>\n          <BaseCard.Popup className={PLATE}>\n            {preview.image && <img src={preview.image} alt=\"\" className={IMAGE} />}\n            <p className={popoverParts.TITLE}>{preview.title}</p>\n            {preview.description && <p className={DESCRIPTION}>{preview.description}</p>}\n            {preview.host && <span className={HOST}>{preview.host}</span>}\n          </BaseCard.Popup>\n        </BaseCard.Positioner>\n      </BaseCard.Portal>\n    </BaseCard.Root>\n  );\n}\n"
    }
  ],
  "docs": "Agent guide: https://metalui.dev/r/preview-card.md. SwiftUI: MetalPreviewCard in the MetalUI Swift package."
}