{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "context-menu-shadcnui",
  "type": "registry:component",
  "title": "Context Menu",
  "description": "Right-click context menu with nested items animation",
  "registryDependencies": [
    "button"
  ],
  "dependencies": [
    "framer-motion",
    "lucide-react",
    "react"
  ],
  "files": [
    {
      "path": "@uitripled/react-shadcn/src/components/navigation/context-menu.tsx",
      "content": "\"use client\";\n\nimport { AnimatePresence, motion } from \"framer-motion\";\nimport { Copy, Edit, Share, Trash } from \"lucide-react\";\nimport { useState } from \"react\";\n\nconst menuItems = [\n  { icon: Copy, label: \"Copy\", shortcut: \"⌘C\" },\n  { icon: Edit, label: \"Edit\", shortcut: \"⌘E\" },\n  { icon: Share, label: \"Share\", shortcut: \"⌘S\" },\n  { icon: Trash, label: \"Delete\", shortcut: \"⌘D\", danger: true },\n];\n\nexport function ContextMenu() {\n  const [position, setPosition] = useState({ x: 0, y: 0 });\n  const [isVisible, setIsVisible] = useState(false);\n\n  const handleContextMenu = (e: React.MouseEvent) => {\n    e.preventDefault();\n    setPosition({ x: e.clientX, y: e.clientY });\n    setIsVisible(true);\n  };\n\n  return (\n    <>\n      <div\n        onContextMenu={handleContextMenu}\n        onClick={() => setIsVisible(false)}\n        className=\"flex h-64 w-64 items-center justify-center rounded-2xl border-2 border-dashed  bg-[var(--card-bg)]\"\n      >\n        <p className=\"text-sm text-[var(--foreground)]/60\">Right-click here</p>\n      </div>\n\n      <AnimatePresence>\n        {isVisible && (\n          <>\n            <div\n              className=\"fixed inset-0 z-40\"\n              onClick={() => setIsVisible(false)}\n            />\n            <motion.div\n              initial={{ opacity: 0, scale: 0.95 }}\n              animate={{ opacity: 1, scale: 1 }}\n              exit={{ opacity: 0, scale: 0.95 }}\n              transition={{ duration: 0.15 }}\n              className=\"fixed bg-card z-50 w-56 rounded-xl border  bg-[var(--card-bg)] p-2 shadow-2xl\"\n              style={{ left: position.x, top: position.y }}\n            >\n              {menuItems.map((item, index) => {\n                const Icon = item.icon;\n                return (\n                  <motion.button\n                    key={item.label}\n                    initial={{ opacity: 0, x: -10 }}\n                    animate={{ opacity: 1, x: 0 }}\n                    transition={{ delay: index * 0.05 }}\n                    className={`flex w-full items-center justify-between rounded-lg px-3 py-2 text-left text-sm ${\n                      item.danger\n                        ? \"text-red-500 hover:bg-red-500/10\"\n                        : \"hover:bg-accent/10\"\n                    }`}\n                    whileHover={{ x: 4 }}\n                    onClick={() => setIsVisible(false)}\n                  >\n                    <div className=\"flex items-center gap-3\">\n                      <Icon className=\"h-4 w-4\" />\n                      <span>{item.label}</span>\n                    </div>\n                    <kbd className=\"text-xs opacity-60\">{item.shortcut}</kbd>\n                  </motion.button>\n                );\n              })}\n            </motion.div>\n          </>\n        )}\n      </AnimatePresence>\n    </>\n  );\n}\n",
      "type": "registry:component",
      "target": "components/uitripled/context-menu-shadcnui.tsx"
    }
  ]
}