{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "animated-profile-menu-shadcnui",
  "type": "registry:component",
  "title": "Animated Profile Menu",
  "description": "Floating profile avatar that reveals quick action cards with smooth motion",
  "registryDependencies": [
    "button"
  ],
  "dependencies": [
    "framer-motion",
    "lucide-react",
    "react"
  ],
  "files": [
    {
      "path": "@uitripled/react-shadcn/src/components/navigation/animated-profile-menu.tsx",
      "content": "\"use client\";\n\nimport { Avatar, AvatarFallback, AvatarImage } from \"@/components/ui/avatar\";\nimport { AnimatePresence, motion, type Variants } from \"framer-motion\";\nimport type { LucideIcon } from \"lucide-react\";\nimport { ChevronRight, LogOut, Settings, TrendingUp, User } from \"lucide-react\";\nimport { useCallback, useId, useState } from \"react\";\n\ninterface MenuItem {\n  id: number;\n  icon: LucideIcon;\n  title: string;\n  description: string;\n}\n\nconst PROFILE_MENU_ITEMS: MenuItem[] = [\n  {\n    id: 1,\n    icon: User,\n    title: \"Profile\",\n    description: \"View your details\",\n  },\n  {\n    id: 2,\n    icon: TrendingUp,\n    title: \"Stats\",\n    description: \"Track your activity\",\n  },\n  {\n    id: 3,\n    icon: Settings,\n    title: \"Settings\",\n    description: \"Manage preferences\",\n  },\n  {\n    id: 4,\n    icon: LogOut,\n    title: \"Logout\",\n    description: \"Sign out securely\",\n  },\n];\n\nconst containerVariants: Variants = {\n  hidden: { opacity: 0 },\n  visible: {\n    opacity: 1,\n    transition: {\n      staggerChildren: 0.1,\n      delayChildren: 0.12,\n    },\n  },\n};\n\nconst itemVariants: Variants = {\n  hidden: {\n    opacity: 0,\n    x: -16,\n    scale: 0.94,\n  },\n  visible: {\n    opacity: 1,\n    x: 0,\n    scale: 1,\n    transition: { duration: 0.3, ease: \"easeOut\" },\n  },\n  exit: {\n    opacity: 0,\n    x: -16,\n    scale: 0.92,\n    transition: { duration: 0.18, ease: \"easeInOut\" },\n  },\n};\n\nexport function AnimatedProfileMenu() {\n  const [isOpen, setIsOpen] = useState(false);\n  const menuId = useId();\n\n  const toggleMenu = useCallback(() => {\n    setIsOpen((previous) => !previous);\n  }, []);\n\n  const closeMenu = useCallback(() => {\n    setIsOpen(false);\n  }, []);\n\n  return (\n    <nav\n      className=\"fixed preview:absolute not-preview:bottom-6 not-preview:left-6 z-50\"\n      role=\"navigation\"\n      aria-label=\"Profile quick actions\"\n    >\n      <AnimatePresence>\n        {isOpen && (\n          <motion.div\n            key=\"profile-menu\"\n            variants={containerVariants}\n            initial=\"hidden\"\n            animate=\"visible\"\n            exit=\"hidden\"\n            className=\"absolute bottom-24 left-0 space-y-3\"\n            role=\"presentation\"\n          >\n            <motion.ul\n              id={menuId}\n              role=\"list\"\n              aria-label=\"Profile actions\"\n              className=\"flex flex-col gap-3\"\n            >\n              {PROFILE_MENU_ITEMS.map((item) => {\n                const Icon = item.icon;\n\n                return (\n                  <motion.li\n                    key={item.id}\n                    variants={itemVariants}\n                    whileHover={{ x: 6 }}\n                    transition={{ duration: 0.2 }}\n                    role=\"listitem\"\n                  >\n                    <motion.button\n                      type=\"button\"\n                      onClick={closeMenu}\n                      whileHover={{ scale: 1.02 }}\n                      whileTap={{ scale: 0.98 }}\n                      transition={{ duration: 0.18 }}\n                      className=\"group relative block w-full overflow-hidden rounded-2xl border border-border/40 bg-background/60 text-left shadow-[0_24px_80px_-32px_rgba(15,23,42,0.45)] backdrop-blur px-4 py-4 transition-all hover:border-border/60 hover:shadow-lg focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary focus-visible:ring-offset-2 focus-visible:ring-offset-background\"\n                      aria-label={`${item.title}: ${item.description}`}\n                    >\n                      <div className=\"absolute inset-0 bg-gradient-to-br from-foreground/[0.04] via-transparent to-transparent opacity-0 transition-opacity duration-300 group-hover:opacity-100 -z-10\" />\n\n                      <div className=\"relative flex min-w-[240px] items-center gap-4\">\n                        <span className=\"flex h-10 w-10 items-center justify-center rounded-xl border border-border/30 bg-primary/10 text-primary transition-colors duration-300 group-hover:bg-primary/20 group-hover:text-primary/90\">\n                          <Icon className=\"h-5 w-5\" aria-hidden=\"true\" />\n                        </span>\n                        <div className=\"flex-1\">\n                          <h3 className=\"text-sm font-semibold text-foreground\">\n                            {item.title}\n                          </h3>\n                          <p className=\"text-xs text-foreground/60\">\n                            {item.description}\n                          </p>\n                        </div>\n                        <ChevronRight\n                          className=\"h-4 w-4 text-foreground/40 transition-transform duration-300 group-hover:translate-x-1\"\n                          aria-hidden=\"true\"\n                        />\n                      </div>\n                    </motion.button>\n                  </motion.li>\n                );\n              })}\n            </motion.ul>\n          </motion.div>\n        )}\n      </AnimatePresence>\n\n      <motion.button\n        type=\"button\"\n        onClick={toggleMenu}\n        whileHover={{ scale: 1.05 }}\n        whileTap={{ scale: 0.95 }}\n        animate={{ rotate: isOpen ? 90 : 0 }}\n        transition={{ duration: 0.28, ease: \"easeInOut\" }}\n        className=\"group relative flex h-16 w-16 items-center justify-center\"\n        aria-label={isOpen ? \"Close profile menu\" : \"Open profile menu\"}\n        aria-haspopup=\"true\"\n        aria-expanded={isOpen}\n        aria-controls={menuId}\n      >\n        <span\n          aria-hidden=\"true\"\n          className=\"absolute inset-0 rounded-full bg-primary/20 blur-xl opacity-0 transition-opacity duration-300 group-hover:opacity-100\"\n        />\n\n        <Avatar className=\"relative h-16 w-16 cursor-pointer border-4 border-background shadow-xl ring-2 ring-border/40 transition-all duration-300 group-hover:ring-4 group-hover:ring-primary/40\">\n          <AvatarImage\n            src=\"https://iimydr2b8o.ufs.sh/f/Zqn6AViLMoTte8EAuCfSJKE21d4F6TYyNAxBGU3aRflMr5Sn\"\n            alt=\"User profile picture\"\n            className=\"object-cover\"\n          />\n          <AvatarFallback className=\"bg-gradient-to-br from-primary/80 to-primary text-primary-foreground text-xl font-semibold\">\n            JD\n          </AvatarFallback>\n        </Avatar>\n      </motion.button>\n\n      <span className=\"sr-only\" role=\"status\" aria-live=\"polite\">\n        {isOpen ? \"Profile menu expanded\" : \"Profile menu collapsed\"}\n      </span>\n    </nav>\n  );\n}\n",
      "type": "registry:component",
      "target": "components/uitripled/animated-profile-menu-shadcnui.tsx"
    }
  ]
}