{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "avatar-hover-card",
  "type": "registry:ui",
  "title": "Avatar Hover Card",
  "description": "An interactive avatar that reveals a profile card on hover with spring physics, staggered content, and delayed open/close.",
  "dependencies": [
    "motion"
  ],
  "registryDependencies": [
    "avatar"
  ],
  "files": [
    {
      "path": "registry/ruixenui/avatar-hover-card.tsx",
      "content": "\"use client\";\n\nimport { Avatar, AvatarFallback, AvatarImage } from \"@/components/ui/avatar\";\nimport { cn } from \"@/lib/utils\";\nimport { AnimatePresence, motion } from \"motion/react\";\nimport { type ReactNode, useId, useRef, useState } from \"react\";\n\nexport interface AvatarHoverCardProps {\n  imageSrc: string;\n  imageAlt?: string;\n  name: string;\n  username?: string;\n  description?: string;\n  stats?: { label: string; value: string }[];\n  actions?: ReactNode;\n  size?: \"sm\" | \"md\" | \"lg\";\n  align?: \"start\" | \"center\" | \"end\";\n  className?: string;\n}\n\nconst triggerSizes = {\n  sm: \"size-8\",\n  md: \"size-10\",\n  lg: \"size-12\",\n};\n\nfunction initials(name: string) {\n  return name\n    .split(\" \")\n    .map((w) => w[0])\n    .join(\"\")\n    .toUpperCase()\n    .slice(0, 2);\n}\n\nexport default function AvatarHoverCard({\n  imageSrc,\n  imageAlt,\n  name,\n  username,\n  description,\n  stats,\n  actions,\n  size = \"md\",\n  align = \"start\",\n  className,\n}: AvatarHoverCardProps) {\n  const [open, setOpen] = useState(false);\n  const timer = useRef<ReturnType<typeof setTimeout> | null>(null);\n  const uid = useId();\n\n  const show = () => {\n    if (timer.current) clearTimeout(timer.current);\n    timer.current = setTimeout(() => setOpen(true), 80);\n  };\n\n  const hide = () => {\n    if (timer.current) clearTimeout(timer.current);\n    timer.current = setTimeout(() => setOpen(false), 100);\n  };\n\n  const alignClass: Record<string, string> = {\n    start: \"left-0\",\n    center: \"left-1/2 -translate-x-1/2\",\n    end: \"right-0\",\n  };\n\n  const spring = { type: \"spring\" as const, stiffness: 500, damping: 35 };\n\n  const avatarContent = (\n    <Avatar className=\"size-full\">\n      <AvatarImage src={imageSrc} alt={imageAlt || name} />\n      <AvatarFallback className=\"text-xs font-medium\">\n        {initials(name)}\n      </AvatarFallback>\n    </Avatar>\n  );\n\n  return (\n    <div\n      className={cn(\"relative inline-flex\", className)}\n      onMouseEnter={show}\n      onMouseLeave={hide}\n    >\n      {/* Trigger — always in flow for layout stability */}\n      <div\n        className={cn(\n          \"rounded-full transition-shadow duration-200\",\n          triggerSizes[size],\n          open\n            ? \"ring-[1.5px] ring-foreground/8\"\n            : \"ring-[1.5px] ring-transparent\",\n        )}\n      >\n        {!open && (\n          <motion.div\n            layoutId={`${uid}-av`}\n            className=\"size-full cursor-pointer overflow-hidden rounded-full\"\n            transition={spring}\n          >\n            {avatarContent}\n          </motion.div>\n        )}\n      </div>\n\n      {/* Card */}\n      <AnimatePresence>\n        {open && (\n          <motion.div\n            className={cn(\"absolute top-full z-50 pt-1.5\", alignClass[align])}\n            initial={{ opacity: 0 }}\n            animate={{ opacity: 1 }}\n            exit={{ opacity: 0 }}\n            transition={{ duration: 0.12 }}\n          >\n            <div className=\"w-[280px] overflow-hidden rounded-xl border border-border/50 bg-popover p-3.5 shadow-[0_8px_30px_-6px_rgba(0,0,0,0.12),0_2px_8px_-2px_rgba(0,0,0,0.05)]\">\n              {/* Header — avatar morphs here via layoutId */}\n              <div className=\"flex items-start gap-3\">\n                <motion.div\n                  layoutId={`${uid}-av`}\n                  className={cn(\n                    \"shrink-0 overflow-hidden rounded-full\",\n                    triggerSizes[size],\n                  )}\n                  transition={spring}\n                >\n                  {avatarContent}\n                </motion.div>\n                <motion.div\n                  className=\"min-w-0 pt-0.5\"\n                  initial={{ opacity: 0, x: -8 }}\n                  animate={{ opacity: 1, x: 0 }}\n                  transition={{ delay: 0.06, ...spring }}\n                >\n                  <p className=\"truncate text-[14px] font-semibold leading-tight text-foreground\">\n                    {name}\n                  </p>\n                  {username && (\n                    <p className=\"mt-0.5 truncate text-[13px] leading-tight text-muted-foreground\">\n                      @{username}\n                    </p>\n                  )}\n                </motion.div>\n              </div>\n\n              {/* Description */}\n              {description && (\n                <motion.p\n                  initial={{ opacity: 0, y: 4 }}\n                  animate={{ opacity: 1, y: 0 }}\n                  transition={{ delay: 0.1, duration: 0.2 }}\n                  className=\"mt-2.5 line-clamp-2 text-[13px] leading-relaxed text-muted-foreground\"\n                >\n                  {description}\n                </motion.p>\n              )}\n\n              {/* Stats */}\n              {stats && stats.length > 0 && (\n                <motion.div\n                  initial={{ opacity: 0, y: 4 }}\n                  animate={{ opacity: 1, y: 0 }}\n                  transition={{ delay: 0.14, duration: 0.2 }}\n                  className=\"mt-2.5 flex items-center gap-3.5\"\n                >\n                  {stats.map((s) => (\n                    <span\n                      key={s.label}\n                      className=\"text-[13px] text-muted-foreground\"\n                    >\n                      <span className=\"font-semibold text-foreground\">\n                        {s.value}\n                      </span>{\" \"}\n                      {s.label}\n                    </span>\n                  ))}\n                </motion.div>\n              )}\n\n              {/* Actions */}\n              {actions && (\n                <motion.div\n                  initial={{ opacity: 0, y: 4 }}\n                  animate={{ opacity: 1, y: 0 }}\n                  transition={{ delay: 0.18, duration: 0.2 }}\n                  className=\"mt-3\"\n                >\n                  {actions}\n                </motion.div>\n              )}\n            </div>\n          </motion.div>\n        )}\n      </AnimatePresence>\n    </div>\n  );\n}\n",
      "type": "registry:ui",
      "target": "components/ruixen/avatar-hover-card.tsx"
    }
  ]
}