{
  "name": "hamburger-menu-overlay",
  "type": "registry:ui",
  "title": "Hamburger Menu Overlay",
  "description": "Cinematic circular clip-path expanding navigation overlay with staggered entrance animations.",
  "dependencies": [
    "lucide-react"
  ],
  "files": [
    {
      "path": "registry/navigation/hamburger-menu-overlay/hamburger-menu-overlay.tsx",
      "type": "registry:ui",
      "target": "components/ui/hamburger-menu-overlay.tsx",
      "content": "import React, { useState, useEffect, useRef } from \"react\";\nimport { cn } from \"@/lib/utils\";\nimport { Menu, X, ArrowUpRight } from \"lucide-react\";\n\nexport interface MenuItem {\n  label: string;\n  href?: string;\n  tag?: string;\n  onClick?: () => void;\n  icon?: React.ReactNode;\n}\n\nexport interface HamburgerMenuOverlayProps {\n  /** Array of menu items */\n  items?: MenuItem[];\n  /** Button position from top */\n  buttonTop?: string;\n  /** Button position from left */\n  buttonLeft?: string;\n  /** Button size */\n  buttonSize?: \"sm\" | \"md\" | \"lg\";\n  /** Custom class for container */\n  className?: string;\n  /** Callback when menu opens */\n  onOpen?: () => void;\n  /** Callback when menu closes */\n  onClose?: () => void;\n}\n\nconst defaultItems: MenuItem[] = [\n  { label: \"Overview\", href: \"#overview\", tag: \"01\" },\n  { label: \"Components\", href: \"#components\", tag: \"02\" },\n  { label: \"Templates\", href: \"#templates\", tag: \"03\" },\n  { label: \"Showcase\", href: \"#showcase\", tag: \"04\" },\n  { label: \"Documentation\", href: \"#docs\", tag: \"05\" },\n];\n\nexport const HamburgerMenuOverlay: React.FC<HamburgerMenuOverlayProps> = ({\n  items = defaultItems,\n  buttonTop = \"24px\",\n  buttonLeft = \"24px\",\n  buttonSize = \"md\",\n  className,\n  onOpen,\n  onClose,\n}) => {\n  const [isOpen, setIsOpen] = useState(false);\n  const containerRef = useRef<HTMLDivElement>(null);\n\n  const buttonSizes = {\n    sm: \"w-9 h-9\",\n    md: \"w-11 h-11\",\n    lg: \"w-14 h-14\",\n  };\n\n  const toggleMenu = () => {\n    const next = !isOpen;\n    setIsOpen(next);\n    if (next) onOpen?.();\n    else onClose?.();\n  };\n\n  useEffect(() => {\n    const handleEscape = (e: KeyboardEvent) => {\n      if (e.key === \"Escape\" && isOpen) {\n        setIsOpen(false);\n        onClose?.();\n      }\n    };\n    document.addEventListener(\"keydown\", handleEscape);\n    return () => document.removeEventListener(\"keydown\", handleEscape);\n  }, [isOpen, onClose]);\n\n  return (\n    <div\n      ref={containerRef}\n      className={cn(\n        \"relative w-full h-full min-h-[280px] rounded-xl overflow-hidden border border-zinc-200 dark:border-zinc-800 bg-zinc-50 dark:bg-zinc-950 isolate select-none\",\n        className\n      )}\n    >\n      {/* Trigger Button */}\n      <button\n        onClick={toggleMenu}\n        aria-label={isOpen ? \"Close menu\" : \"Open menu\"}\n        style={{ left: buttonLeft, top: buttonTop }}\n        className={cn(\n          \"absolute -translate-x-1/2 -translate-y-1/2 rounded-full z-40 flex items-center justify-center transition-all duration-300 shadow-md\",\n          \"bg-indigo-600 hover:bg-indigo-500 text-white dark:bg-indigo-500 dark:hover:bg-indigo-400 cursor-pointer hover:scale-105 active:scale-95 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-indigo-400\",\n          buttonSizes[buttonSize]\n        )}\n      >\n        {isOpen ? <X className=\"w-5 h-5\" /> : <Menu className=\"w-5 h-5\" />}\n      </button>\n\n      {/* Background preview hints */}\n      <div className=\"absolute inset-0 flex flex-col items-center justify-center p-6 text-center pointer-events-none\">\n        <span className=\"text-xs uppercase font-mono tracking-widest text-zinc-400 dark:text-zinc-600\">\n          Navigation Reveal\n        </span>\n        <h4 className=\"text-sm font-medium text-zinc-600 dark:text-zinc-400 mt-1\">\n          Click button to expand radial overlay\n        </h4>\n      </div>\n\n      {/* Circular Clip-Path Overlay */}\n      <div\n        style={{\n          clipPath: isOpen\n            ? `circle(150% at ${buttonLeft} ${buttonTop})`\n            : `circle(0px at ${buttonLeft} ${buttonTop})`,\n          transition: \"clip-path 0.55s cubic-bezier(0.16, 1, 0.3, 1)\",\n        }}\n        className=\"absolute inset-0 w-full h-full z-30 flex flex-col justify-center px-10 sm:px-12 bg-white/95 dark:bg-zinc-900/95 backdrop-blur-xl border border-zinc-200 dark:border-zinc-800 shadow-2xl\"\n      >\n        <nav className=\"flex flex-col gap-2 max-w-sm mt-4\">\n          <span className=\"text-[10px] font-mono uppercase tracking-widest text-zinc-400 dark:text-zinc-500 mb-1\">\n            Menu Navigation\n          </span>\n          {items.map((item, idx) => (\n            <a\n              key={item.label}\n              href={item.href || \"#\"}\n              onClick={(e) => {\n                e.preventDefault();\n                item.onClick?.();\n                setIsOpen(false);\n              }}\n              style={{\n                transitionDelay: isOpen ? `${idx * 40 + 80}ms` : \"0ms\",\n                transform: isOpen ? \"translateX(0)\" : \"translateX(-12px)\",\n                opacity: isOpen ? 1 : 0,\n              }}\n              className=\"flex items-center justify-between py-1.5 text-zinc-800 dark:text-zinc-100 hover:text-indigo-600 dark:hover:text-indigo-400 transition-all duration-300 font-medium text-base group cursor-pointer\"\n            >\n              <div className=\"flex items-center gap-3\">\n                {item.tag && (\n                  <span className=\"text-xs font-mono text-zinc-400 dark:text-zinc-500\">\n                    {item.tag}\n                  </span>\n                )}\n                <span>{item.label}</span>\n              </div>\n              <ArrowUpRight className=\"w-4 h-4 opacity-0 -translate-x-1 group-hover:opacity-100 group-hover:translate-x-0 transition-all duration-200 text-indigo-600 dark:text-indigo-400\" />\n            </a>\n          ))}\n        </nav>\n      </div>\n    </div>\n  );\n};\n\nexport default HamburgerMenuOverlay;\n"
    }
  ],
  "$schema": "https://www.cooki-ui.design/schema/registry-item.json"
}