{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "smooth-dropdown",
  "title": "Smooth Dropdown",
  "description": "A dropdown menu with premium layout transitions.",
  "dependencies": [
    "motion",
    "@hugeicons/core-free-icons",
    "@hugeicons/react",
    "clsx",
    "tailwind-merge"
  ],
  "files": [
    {
      "path": "registry/default/example/smooth-dropdown.tsx",
      "content": "\"use client\";\n\nimport { useState, useRef, useEffect } from \"react\";\nimport { motion } from \"motion/react\";\nimport { HugeiconsIcon } from \"@hugeicons/react\";\nimport useMeasure from \"react-use-measure\";\nimport {\n  UserIcon,\n  CreditCardIcon,\n  FolderIcon,\n  File01Icon,\n  SettingsIcon,\n  HelpCircleIcon,\n  LogoutIcon,\n  MoreHorizontalCircle01Icon,\n} from \"@hugeicons/core-free-icons\";\n\n// Change Here\nconst menuItems = [\n  { id: \"profile\", label: \"Profile\", icon: UserIcon },\n  { id: \"upgrade\", label: \"Upgrade\", icon: CreditCardIcon },\n  { id: \"projects\", label: \"Projects\", icon: FolderIcon },\n  { id: \"documentation\", label: \"Documentation\", icon: File01Icon },\n  { id: \"divider\", label: \"\", icon: null },\n  { id: \"settings\", label: \"Settings\", icon: SettingsIcon },\n  { id: \"help\", label: \"Get Help\", icon: HelpCircleIcon },\n  { id: \"logout\", label: \"Logout\", icon: LogoutIcon },\n];\n\nconst easeOutQuint: [number, number, number, number] = [0.23, 1, 0.32, 1];\n\nexport default function TwentyTwelveOne() {\n  const [isOpen, setIsOpen] = useState(false);\n  const [activeItem, setActiveItem] = useState(\"profile\");\n  const [hoveredItem, setHoveredItem] = useState<string | null>(null);\n  const containerRef = useRef<HTMLDivElement>(null);\n\n  const [contentRef, contentBounds] = useMeasure();\n\n  useEffect(() => {\n    const handleClickOutside = (event: MouseEvent) => {\n      if (\n        containerRef.current &&\n        !containerRef.current.contains(event.target as Node)\n      ) {\n        setIsOpen(false);\n      }\n    };\n\n    if (isOpen) {\n      document.addEventListener(\"mousedown\", handleClickOutside);\n    }\n    return () => document.removeEventListener(\"mousedown\", handleClickOutside);\n  }, [isOpen]);\n\n  const openHeight = Math.max(40, Math.ceil(contentBounds.height));\n  return (\n    <div ref={containerRef} className=\"relative h-10 w-10 not-prose\">\n      <motion.div\n        layout\n        initial={false}\n        animate={{\n          width: isOpen ? 220 : 40,\n          height: isOpen ? openHeight : 40,\n          borderRadius: isOpen ? 14 : 12,\n        }}\n        transition={{\n          type: \"spring\" as const,\n          damping: 34,\n          stiffness: 380,\n          mass: 0.8,\n        }}\n        className=\"absolute top-0 right-0 bg-popover border border-border shadow-lg overflow-hidden cursor-pointer origin-top-right \"\n        onClick={() => !isOpen && setIsOpen(true)}\n      >\n        <motion.div\n          initial={false}\n          animate={{\n            opacity: isOpen ? 0 : 1,\n            scale: isOpen ? 0.8 : 1,\n          }}\n          transition={{ duration: 0.15 }}\n          className=\"absolute inset-0 flex items-center justify-center\"\n          style={{\n            pointerEvents: isOpen ? \"none\" : \"auto\",\n            willChange: \"transform\",\n          }}\n        >\n          <HugeiconsIcon\n            icon={MoreHorizontalCircle01Icon}\n            className=\"w-6 h-6 text-muted-foreground\"\n          />\n        </motion.div>\n\n        {/* Menu Content - visible when open */}\n        <div ref={contentRef}>\n          <motion.div\n            layout\n            initial={false}\n            animate={{\n              opacity: isOpen ? 1 : 0,\n            }}\n            transition={{\n              duration: 0.2,\n              delay: isOpen ? 0.08 : 0,\n            }}\n            className=\"p-2\"\n            style={{\n              pointerEvents: isOpen ? \"auto\" : \"none\",\n              willChange: \"transform\",\n            }}\n          >\n            <ul className=\"flex flex-col gap-0.5 m-0! p-0! list-none!\">\n              {menuItems.map((item, index) => {\n                if (item.id === \"divider\") {\n                  return (\n                    <motion.hr\n                      key={item.id}\n                      initial={{ opacity: 0 }}\n                      animate={{ opacity: isOpen ? 1 : 0 }}\n                      transition={{ delay: isOpen ? 0.12 + index * 0.015 : 0 }}\n                      className=\"border-border my-1.5!\"\n                    />\n                  );\n                }\n\n                const iconRef = item.icon!;\n                const isActive = activeItem === item.id;\n                const isLogout = item.id === \"logout\";\n                const showIndicator = hoveredItem\n                  ? hoveredItem === item.id\n                  : isActive;\n\n                const itemDuration = item.id === \"logout\" ? 0.12 : 0.15;\n                const itemDelay = isOpen ? 0.06 + index * 0.02 : 0;\n\n                return (\n                  <motion.li\n                    key={item.id}\n                    initial={{ opacity: 0, x: 8 }}\n                    animate={{\n                      opacity: isOpen ? 1 : 0,\n                      x: isOpen ? 0 : 8,\n                    }}\n                    transition={{\n                      delay: itemDelay,\n                      duration: itemDuration,\n                      ease: easeOutQuint,\n                    }}\n                    onClick={() => {\n                      setActiveItem(item.id);\n                      if (item.id === \"logout\") {\n                        setIsOpen(false);\n                      }\n                    }}\n                    onMouseEnter={() => setHoveredItem(item.id)}\n                    onMouseLeave={() => setHoveredItem(null)}\n                    className={`relative flex items-center gap-3 rounded-lg text-sm cursor-pointer transition-colors duration-200 ease-out m-0! pl-3! py-2! ${\n                      isLogout && showIndicator\n                        ? \"text-red-600\"\n                        : isActive\n                        ? \"text-foreground\"\n                        : isLogout\n                        ? \"text-muted-foreground hover:text-red-600\"\n                        : \"text-muted-foreground hover:text-foreground\"\n                    }`}\n                  >\n                    {/* Hover/Active background indicator */}\n                    {showIndicator && (\n                      <motion.div\n                        layoutId=\"activeIndicator\"\n                        className={`absolute inset-0 rounded-lg ${\n                          isLogout ? \"bg-red-50\" : \"bg-muted\"\n                        }`}\n                        transition={{\n                          type: \"spring\",\n                          damping: 30,\n                          stiffness: 520,\n                          mass: 0.8,\n                        }}\n                      />\n                    )}\n                    {/* Left bar indicator */}\n                    {showIndicator && (\n                      <motion.div\n                        layoutId=\"leftBar\"\n                        className={`absolute left-0 top-0 bottom-0 my-auto w-[3px] h-5 rounded-full ${\n                          isLogout ? \"bg-red-500\" : \"bg-foreground\"\n                        }`}\n                        transition={{\n                          type: \"spring\",\n                          damping: 30,\n                          stiffness: 520,\n                          mass: 0.8,\n                        }}\n                      />\n                    )}\n                    <HugeiconsIcon\n                      icon={iconRef}\n                      className=\"w-[18px] h-[18px] relative z-10\"\n                    />\n                    <span className=\"font-medium relative z-10\">\n                      {item.label}\n                    </span>\n                  </motion.li>\n                );\n              })}\n            </ul>\n          </motion.div>\n        </div>\n      </motion.div>\n    </div>\n  );\n}\n",
      "type": "registry:component"
    }
  ],
  "type": "registry:component"
}