{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "tooltip-preview",
  "title": "Tooltip Preview",
  "description": "Link tooltip that reveals a website preview card with title, description, image and favicon.",
  "dependencies": [
    "motion"
  ],
  "registryDependencies": [],
  "files": [
    {
      "path": "registry/components/unlumen/tooltip-preview/index.tsx",
      "content": "\"use client\";\n\nimport { useState, useRef, type ReactNode, type HTMLAttributes } from \"react\";\nimport { AnimatePresence, motion } from \"motion/react\";\nimport { cn } from \"@/lib/utils\";\n\ninterface TooltipPreviewProps extends HTMLAttributes<HTMLAnchorElement> {\n  href: string;\n  title: string;\n  description?: string;\n  image?: string;\n  favicon?: string;\n  children: ReactNode;\n}\n\nfunction TooltipPreview({\n  href,\n  title,\n  description,\n  image,\n  favicon,\n  children,\n  className,\n  ...props\n}: TooltipPreviewProps) {\n  const [open, setOpen] = useState(false);\n  const timeoutRef = useRef<ReturnType<typeof setTimeout> | null>(null);\n\n  const show = () => {\n    if (timeoutRef.current) clearTimeout(timeoutRef.current);\n    timeoutRef.current = setTimeout(() => setOpen(true), 200);\n  };\n\n  const hide = () => {\n    if (timeoutRef.current) clearTimeout(timeoutRef.current);\n    timeoutRef.current = setTimeout(() => setOpen(false), 100);\n  };\n\n  const domain = (() => {\n    try {\n      return new URL(href).hostname.replace(/^www\\./, \"\");\n    } catch {\n      return href;\n    }\n  })();\n\n  return (\n    <span className=\"relative inline-block\">\n      <a\n        href={href}\n        target=\"_blank\"\n        rel=\"noopener noreferrer\"\n        className={cn(\n          \"underline decoration-dotted underline-offset-2 decoration-muted-foreground/50 hover:decoration-foreground/60 transition-colors\",\n          className,\n        )}\n        onMouseEnter={show}\n        onMouseLeave={hide}\n        onFocus={show}\n        onBlur={hide}\n        {...props}\n      >\n        {children}\n      </a>\n\n      <AnimatePresence>\n        {open && (\n          <motion.div\n            role=\"tooltip\"\n            className={cn(\n              \"absolute bottom-full left-1/2 z-50 mb-3 w-64 -translate-x-1/2\",\n              \"rounded-xl border border-border bg-card shadow-xl shadow-black/10\",\n              \"pointer-events-none overflow-hidden\",\n            )}\n            initial={{ opacity: 0, y: 6, scale: 0.96 }}\n            animate={{ opacity: 1, y: 0, scale: 1 }}\n            exit={{\n              opacity: 0,\n              y: 4,\n              scale: 0.97,\n              transition: { duration: 0.1 },\n            }}\n            transition={{ type: \"spring\", duration: 0.25, bounce: 0.1 }}\n            onMouseEnter={show}\n            onMouseLeave={hide}\n          >\n            {image && (\n              <div className=\"h-32 w-full overflow-hidden border-b border-border\">\n                <img\n                  src={image}\n                  alt={title}\n                  className=\"h-full w-full object-cover\"\n                />\n              </div>\n            )}\n            <div className=\"p-3 space-y-1\">\n              <div className=\"flex items-center gap-2\">\n                {favicon ? (\n                  <img\n                    src={favicon}\n                    alt=\"\"\n                    className=\"h-4 w-4 rounded-sm object-contain\"\n                    aria-hidden\n                  />\n                ) : (\n                  <span\n                    className=\"flex h-4 w-4 items-center justify-center rounded-sm bg-muted text-[9px] font-bold text-muted-foreground uppercase shrink-0\"\n                    aria-hidden\n                  >\n                    {domain.charAt(0)}\n                  </span>\n                )}\n                <span className=\"text-[12px] font-semibold text-foreground line-clamp-1 leading-tight\">\n                  {title}\n                </span>\n              </div>\n              {description && (\n                <p className=\"text-[11px] text-muted-foreground line-clamp-2 leading-relaxed\">\n                  {description}\n                </p>\n              )}\n              <p className=\"text-[11px] text-muted-foreground/60 truncate\">\n                {domain}\n              </p>\n            </div>\n          </motion.div>\n        )}\n      </AnimatePresence>\n    </span>\n  );\n}\n\nexport { TooltipPreview };\nexport type { TooltipPreviewProps };\n",
      "type": "registry:ui",
      "target": "components/unlumen-ui/tooltip-preview.tsx"
    }
  ],
  "type": "registry:ui"
}