{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "profile-avatar",
  "title": "Profile Avatar",
  "description": "An animated profile avatar preview that morphs from the trigger into a focused overlay.",
  "dependencies": [
    "motion"
  ],
  "registryDependencies": [
    "avatar"
  ],
  "files": [
    {
      "path": "registry/corr/components/profile-avatar.tsx",
      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { AnimatePresence, motion } from \"motion/react\"\n\nimport {\n  Avatar,\n  AvatarBadge,\n  AvatarFallback,\n  AvatarImage,\n} from \"@/components/ui/avatar\"\nimport { cn } from \"@/lib/utils\"\n\nexport type ProfileAvatarProps = {\n  src?: string\n  alt?: string\n  fallback: string\n  name: string\n  description?: string\n  badge?: boolean\n  badgeClassName?: string\n  size?: \"sm\" | \"default\" | \"lg\"\n  previewSize?: \"default\" | \"lg\"\n  className?: string\n  previewClassName?: string\n  open?: boolean\n  onOpenChange?: (open: boolean) => void\n}\n\nconst avatarSizeClassName = {\n  sm: \"size-8\",\n  default: \"size-11\",\n  lg: \"size-14\",\n}\n\nconst previewSizeClassName = {\n  default: \"w-[min(82vw,18rem)]\",\n  lg: \"w-[min(82vw,28rem)]\",\n}\n\nexport function ProfileAvatar({\n  src,\n  alt,\n  fallback,\n  name,\n  description,\n  badge,\n  badgeClassName,\n  size = \"default\",\n  previewSize = \"default\",\n  className,\n  previewClassName,\n  open,\n  onOpenChange,\n}: ProfileAvatarProps) {\n  const generatedId = React.useId()\n  const layoutId = `profile-avatar-${generatedId}`\n  const [internalOpen, setInternalOpen] = React.useState(false)\n  const isOpen = open ?? internalOpen\n\n  const setOpen = React.useCallback(\n    (nextOpen: boolean) => {\n      setInternalOpen(nextOpen)\n      onOpenChange?.(nextOpen)\n    },\n    [onOpenChange]\n  )\n\n  React.useEffect(() => {\n    if (!isOpen) return\n\n    const handleKeyDown = (event: KeyboardEvent) => {\n      if (event.key === \"Escape\") {\n        setOpen(false)\n      }\n    }\n\n    document.addEventListener(\"keydown\", handleKeyDown)\n    return () => document.removeEventListener(\"keydown\", handleKeyDown)\n  }, [isOpen, setOpen])\n\n  return (\n    <>\n      <button\n        type=\"button\"\n        aria-label={`Preview ${name}`}\n        aria-expanded={isOpen}\n        onClick={() => setOpen(true)}\n        className={cn(\n          \"rounded-full focus-visible:ring-3 focus-visible:ring-ring/50 focus-visible:outline-none\",\n          className\n        )}\n      >\n        <motion.span\n          layoutId={layoutId}\n          className={cn(\n            \"block overflow-hidden rounded-full\",\n            avatarSizeClassName[size]\n          )}\n          transition={{ type: \"spring\", stiffness: 360, damping: 34 }}\n        >\n          <Avatar className=\"size-full\">\n            {src ? <AvatarImage src={src} alt={alt || name} /> : null}\n            <AvatarFallback>{fallback}</AvatarFallback>\n            {badge ? <AvatarBadge className={badgeClassName} /> : null}\n          </Avatar>\n        </motion.span>\n      </button>\n      <AnimatePresence>\n        {isOpen ? (\n          <motion.div\n            className=\"fixed inset-0 z-[70] flex items-center justify-center bg-black/70 p-6 backdrop-blur-sm\"\n            initial={{ opacity: 0 }}\n            animate={{ opacity: 1 }}\n            exit={{ opacity: 0 }}\n            onClick={() => setOpen(false)}\n          >\n            <motion.div\n              layoutId={layoutId}\n              role=\"dialog\"\n              aria-modal=\"true\"\n              aria-label={name}\n              aria-description={description}\n              className={cn(\n                \"aspect-square overflow-hidden rounded-xl border border-white/15 bg-background shadow-2xl\",\n                previewSizeClassName[previewSize],\n                previewClassName\n              )}\n              onClick={(event) => event.stopPropagation()}\n              transition={{ type: \"spring\", stiffness: 360, damping: 34 }}\n            >\n              {src ? (\n                <img\n                  src={src}\n                  alt={alt || name}\n                  className=\"size-full object-cover\"\n                />\n              ) : (\n                <div className=\"flex size-full items-center justify-center bg-muted text-4xl font-medium text-muted-foreground\">\n                  {fallback}\n                </div>\n              )}\n            </motion.div>\n          </motion.div>\n        ) : null}\n      </AnimatePresence>\n    </>\n  )\n}\n",
      "type": "registry:component"
    }
  ],
  "type": "registry:component"
}