{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "dropdown",
  "title": "Dropdown",
  "dependencies": [
    "lucide-react",
    "framer-motion"
  ],
  "registryDependencies": [
    "button",
    "dropdown-menu"
  ],
  "files": [
    {
      "path": "src/registry/dropdown-menu/Dropdown.jsx",
      "content": "import React from \"react\";\r\nimport { User, Settings, LogOut, Code, MessageCircle, Github, Heart, Sun, Moon, Laptop } from \"lucide-react\";\r\nimport { AnimatedDropdown } from \"@/components/dropdown-menu/AnimatedDropdown\";\r\nimport { Button } from \"@/components/ui/button\";\r\n\r\nconst menuData = {\r\n  label: \"My Account\",\r\n  items: [\r\n    {\r\n      label: \"Profile\",\r\n      icon: User,\r\n      onClick: () => console.log(\"Profile clicked\"),\r\n    },\r\n    {\r\n      label: \"Theme\",\r\n      icon: Sun,\r\n      submenu: {\r\n        label: \"Theme\",\r\n        items: [\r\n          { label: \"Light\", icon: Sun, onClick: () => console.log(\"Light theme\") },\r\n          { label: \"Dark\", icon: Moon, onClick: () => console.log(\"Dark theme\") },\r\n          { label: \"System\", icon: Laptop, onClick: () => console.log(\"System theme\") },\r\n        ],\r\n      },\r\n    },\r\n    {\r\n      label: \"Settings\",\r\n      icon: Settings,\r\n      submenu: {\r\n        label: \"Settings\",\r\n        items: [\r\n          {\r\n            label: \"Account\",\r\n            icon: User,\r\n            submenu: {\r\n              label: \"Account\",\r\n              items: [\r\n                { label: \"Security\", onClick: () => {} },\r\n                { label: \"Privacy\", onClick: () => {} },\r\n              ],\r\n            },\r\n          },\r\n          { label: \"Notifications\", icon: MessageCircle, onClick: () => {} },\r\n          { label: \"API Keys\", icon: Code, onClick: () => {} },\r\n        ],\r\n      },\r\n    },\r\n    { separator: true },\r\n    {\r\n      label: \"GitHub\",\r\n      icon: Github,\r\n      onClick: () => window.open(\"https://github.com\", \"_blank\"),\r\n    },\r\n    {\r\n      label: \"Support\",\r\n      icon: Heart,\r\n      submenu: {\r\n        label: \"Support\",\r\n        items: [\r\n          { label: \"Help Center\", onClick: () => {} },\r\n          { label: \"Chat with us\", onClick: () => {} },\r\n        ],\r\n      },\r\n    },\r\n    { separator: true },\r\n    {\r\n      label: \"Log out\",\r\n      icon: LogOut,\r\n      onClick: () => console.log(\"Logout clicked\"),\r\n    },\r\n  ],\r\n};\r\n\r\nexport function DropdownDemo() {\r\n  return (\r\n    <div className=\"flex items-center justify-center p-20 min-h-[350px]\">\r\n      <AnimatedDropdown \r\n        trigger={\r\n          <Button variant=\"outline\" className=\"w-[200px] justify-between text-black/80\">\r\n            Update Settings\r\n            <Settings className=\"w-4 h-4 ml-2 opacity-50\" />\r\n          </Button>\r\n        } \r\n        menu={menuData} \r\n      />\r\n    </div>\r\n  );\r\n}`;\r\n\r\nexport const AnimatedDropdownSource = `\"use client\";\r\n\r\nimport React, { useState, useEffect } from 'react';\r\nimport { motion, AnimatePresence } from 'framer-motion';\r\nimport { ChevronLeft, ChevronRight } from 'lucide-react';\r\nimport {\r\n    DropdownMenu,\r\n    DropdownMenuContent,\r\n    DropdownMenuTrigger,\r\n    DropdownMenuItem,\r\n    DropdownMenuSeparator,\r\n} from '@/components/ui/dropdown-menu';\r\nimport { cn } from '@/lib/utils';\r\n\r\n// Animation variants for sliding effects\r\nconst menuVariants = {\r\n    enter: (direction) => ({\r\n        x: direction === 'right' ? '100%' : '-100%',\r\n        opacity: 0,\r\n    }),\r\n    center: {\r\n        x: 0,\r\n        opacity: 1,\r\n    },\r\n    exit: (direction) => ({\r\n        x: direction === 'right' ? '-100%' : '100%',\r\n        opacity: 0,\r\n    }),\r\n};\r\n\r\nexport function AnimatedDropdown({\r\n    trigger,\r\n    menu,\r\n    className\r\n}) {\r\n    const [open, setOpen] = useState(false);\r\n    const [menuStack, setMenuStack] = useState([menu]);\r\n    const [direction, setDirection] = useState('right');\r\n\r\n    // Reset menu state when closed\r\n    useEffect(() => {\r\n        if (!open) {\r\n            const timer = setTimeout(() => {\r\n                setMenuStack([menu]);\r\n                setDirection('right');\r\n            }, 300);\r\n            return () => clearTimeout(timer);\r\n        }\r\n    }, [open, menu]);\r\n\r\n    const activeMenu = menuStack[menuStack.length - 1];\r\n\r\n    const handleSubmenu = (submenu) => {\r\n        setDirection('right');\r\n        setMenuStack((prev) => [...prev, submenu]);\r\n    };\r\n\r\n    const handleBack = () => {\r\n        setDirection('left');\r\n        setMenuStack((prev) => prev.slice(0, -1));\r\n    };\r\n\r\n    return (\r\n        <DropdownMenu open={open} onOpenChange={setOpen}>\r\n            <DropdownMenuTrigger asChild>\r\n                {trigger}\r\n            </DropdownMenuTrigger>\r\n\r\n            <DropdownMenuContent\r\n                className={cn(\"w-64 overflow-hidden p-0\", className)}\r\n                align=\"end\"\r\n            >\r\n                <motion.div \r\n                    className=\"relative w-full overflow-hidden\"\r\n                    layout\r\n                    transition={{ type: \"spring\", stiffness: 300, damping: 35 }}\r\n                >\r\n                    <AnimatePresence initial={false} mode=\"popLayout\" custom={direction}>\r\n                        <motion.div\r\n                            key={activeMenu.id || activeMenu.label || \"root\"}\r\n                            custom={direction}\r\n                            variants={menuVariants}\r\n                            initial=\"enter\"\r\n                            animate=\"center\"\r\n                            exit=\"exit\"\r\n                            transition={{ type: \"spring\", stiffness: 300, damping: 30 }}\r\n                            className=\"w-full\"\r\n                        >\r\n                            {/* Header / Back Button */}\r\n                            {menuStack.length > 1 ? (\r\n                                <div className=\"flex items-center gap-2 p-2 border-b\">\r\n                                    <button\r\n                                        onClick={(e) => {\r\n                                            e.preventDefault();\r\n                                            e.stopPropagation();\r\n                                            handleBack();\r\n                                        }}\r\n                                        className=\"p-1 hover:bg-accent rounded-sm transition-colors\"\r\n                                    >\r\n                                        <ChevronLeft className=\"w-4 h-4\" />\r\n                                    </button>\r\n                                    <span className=\"font-semibold text-sm\">{activeMenu.label}</span>\r\n                                </div>\r\n                            ) : (\r\n                                activeMenu.label && (\r\n                                    <div className=\"px-2 py-1.5 text-sm font-semibold text-muted-foreground border-b\">\r\n                                        {activeMenu.label}\r\n                                    </div>\r\n                                )\r\n                            )}\r\n\r\n                            {/* Menu Items */}\r\n                            <div className=\"p-1\">\r\n                                {activeMenu.items.map((item, index) => {\r\n                                    if (item.separator) {\r\n                                        return <DropdownMenuSeparator key={`sep-${index}`} />;\r\n                                    }\r\n\r\n                                    const hasSubmenu = !!item.submenu;\r\n\r\n                                    return (\r\n                                        <DropdownMenuItem\r\n                                            key={index}\r\n                                            className=\"justify-between cursor-pointer\"\r\n             \r\n             onClick={(e) => {\r\n                                                if (hasSubmenu) {\r\n                                                    e.preventDefault();\r\n                                                    e.stopPropagation();\r\n                                                    handleSubmenu(item.submenu);\r\n                                                } else if (item.onClick) {\r\n                                                    item.onClick();\r\n                                                    setOpen(false);\r\n                                                }\r\n                                            }}\r\n                                        >\r\n                                            <span className=\"flex items-center gap-2\">\r\n                                                {item.icon && <item.icon className=\"w-4 h-4\" />}\r\n                                                {item.label}\r\n                                            </span>\r\n                                            {hasSubmenu && (\r\n                                                <ChevronRight className=\"w-4 h-4 opacity-50\" />\r\n                                            )}\r\n                                        </DropdownMenuItem>\r\n                                    );\r\n                                })}\r\n                            </div>\r\n                        </motion.div>\r\n                    </AnimatePresence>\r\n                </motion.div>\r\n            </DropdownMenuContent>\r\n        </DropdownMenu>\r\n    );\r\n}\r\n\n",
      "type": "registry:component"
    }
  ],
  "type": "registry:component"
}