{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "navbar-menu",
  "type": "registry:ui",
  "title": "Navbar Menu",
  "description": "A beautiful animated dropdown menu for navigation with support for icons, descriptions, and custom layouts.",
  "dependencies": [
    "motion",
    "next"
  ],
  "registryDependencies": [
    "raised-button"
  ],
  "files": [
    {
      "path": "registry/new-york/ui/navbar-menu.tsx",
      "content": "\"use client\";\n\nimport { AnimatePresence, motion } from \"motion/react\";\nimport Image from \"next/image\";\nimport * as React from \"react\";\nimport { ArrowDown01Icon, HugeiconsIcon } from \"@/components/icons\";\n\nimport { cn } from \"@/lib/utils\";\nimport { RaisedButton } from \"@/registry/new-york/ui/raised-button\";\n\nexport interface NavbarMenuLink {\n  label: string;\n  href: string;\n  icon?: React.ReactNode;\n  external?: boolean;\n  description?: string;\n  backgroundImage?: string;\n  rowSpan?: number;\n}\n\nexport interface NavbarMenuSection {\n  id: string;\n  links: NavbarMenuLink[];\n  gridLayout?: string;\n}\n\nexport interface NavbarMenuProps {\n  activeMenu: string;\n  sections: NavbarMenuSection[];\n  onClose?: () => void;\n}\n\nexport interface NavbarWithMenuProps {\n  sections: NavbarMenuSection[];\n  navItems?: Array<\n    | { type: \"link\"; label: string; href: string }\n    | { type: \"dropdown\"; label: string; menu: string }\n  >;\n  logo?: React.ReactNode;\n  cta?: React.ReactNode;\n}\n\nconst ListItem = React.forwardRef<\n  HTMLAnchorElement,\n  React.AnchorHTMLAttributes<HTMLAnchorElement> & {\n    title: string;\n    children?: React.ReactNode;\n    href: string;\n    external?: boolean;\n    icon?: React.ReactNode;\n    backgroundImage?: string;\n    rowSpan?: number;\n  }\n>(\n  (\n    {\n      className,\n      title,\n      children,\n      href,\n      external,\n      icon,\n      backgroundImage,\n      rowSpan,\n      ...props\n    },\n    ref,\n  ) => {\n    return (\n      <li className={cn(\"list-none\", rowSpan === 2 && \"row-span-2\")}>\n        <a\n          ref={ref}\n          href={href}\n          target={external ? \"_blank\" : undefined}\n          rel={external ? \"noopener noreferrer\" : undefined}\n          className={cn(\n            \"group relative flex h-full min-h-18 w-full flex-col justify-center overflow-hidden rounded-2xl bg-zinc-800/0 p-3.5 leading-none no-underline outline-none transition-all duration-150 select-none hover:bg-zinc-800 hover:text-zinc-100 focus:bg-zinc-800 focus:text-zinc-100\",\n            className,\n          )}\n          {...props}\n        >\n          {backgroundImage && (\n            <>\n              <Image\n                fill\n                src={backgroundImage}\n                alt={title}\n                className=\"absolute inset-0 z-0 h-full w-full object-cover transition-all group-hover:brightness-60\"\n              />\n              <div className=\"absolute inset-0 z-[1] bg-gradient-to-t from-black/90 via-black/50 to-black/20\" />\n            </>\n          )}\n          <div\n            className={cn(\n              \"flex items-start gap-3\",\n              backgroundImage && \"relative z-[2] mt-auto\",\n            )}\n          >\n            {icon && (\n              <span\n                className={cn(\n                  \"relative flex min-h-10 min-w-10 items-center justify-center rounded-xl p-2 text-primary transition group-hover:text-zinc-300\",\n                  backgroundImage\n                    ? \"bg-white/5 backdrop-blur group-hover:bg-white/10\"\n                    : \"bg-zinc-800/80 group-hover:bg-zinc-700/80\",\n                )}\n              >\n                {icon}\n              </span>\n            )}\n            <div className=\"flex h-full flex-col justify-start gap-1 leading-none font-normal text-zinc-100\">\n              {title}\n\n              {children && (\n                <p\n                  className={cn(\n                    \"line-clamp-2 text-sm leading-tight font-light text-zinc-500\",\n                    backgroundImage && \"relative z-[2]\",\n                  )}\n                >\n                  {children}\n                </p>\n              )}\n            </div>\n          </div>\n        </a>\n      </li>\n    );\n  },\n);\n\nListItem.displayName = \"ListItem\";\n\nexport function NavbarMenu({ activeMenu, sections }: NavbarMenuProps) {\n  const activeSection = sections.find((section) => section.id === activeMenu);\n\n  if (!activeSection) return null;\n\n  const gridLayout =\n    activeSection.gridLayout || \"grid w-full grid-cols-2 gap-4\";\n\n  return (\n    <motion.div\n      initial={{ scaleY: 0.95, opacity: 0 }}\n      animate={{ scaleY: 1, opacity: 1 }}\n      exit={{ scaleY: 0.95, opacity: 0 }}\n      transition={{\n        ease: [0.19, 1, 0.15, 1.01],\n      }}\n      className={cn(\n        \"absolute top-full left-0 z-40 w-full origin-top overflow-hidden rounded-b-2xl border-1 border-y-0 border-white/5 bg-gradient-to-b from-zinc-950 to-zinc-900/30 backdrop-blur-2xl outline-none\",\n      )}\n    >\n      <div className=\"p-6\">\n        <ul className={gridLayout}>\n          {activeSection.links.map((link) => (\n            <ListItem\n              key={link.href}\n              href={link.href}\n              title={link.label}\n              external={link.external}\n              icon={link.icon}\n              backgroundImage={link.backgroundImage}\n              rowSpan={link.rowSpan}\n            >\n              {link.description}\n            </ListItem>\n          ))}\n        </ul>\n      </div>\n    </motion.div>\n  );\n}\n\nexport function NavbarWithMenu({\n  sections,\n  navItems,\n  logo,\n  cta,\n}: NavbarWithMenuProps) {\n  const [activeDropdown, setActiveDropdown] = React.useState<string | null>(\n    null,\n  );\n  const [hoveredItem, setHoveredItem] = React.useState<string | null>(null);\n\n  const defaultNavItems = [\n    { type: \"dropdown\", label: \"Product\", menu: \"product\" },\n    { type: \"dropdown\", label: \"Resources\", menu: \"resources\" },\n    { type: \"dropdown\", label: \"Socials\", menu: \"socials\" },\n  ] as const;\n\n  const items = navItems || defaultNavItems;\n\n  const handleNavbarMouseLeave = () => {\n    setActiveDropdown(null);\n    setHoveredItem(null);\n  };\n\n  const handleMouseEnter = (menu: string) => {\n    setActiveDropdown(menu);\n    setHoveredItem(menu);\n  };\n\n  return (\n    <div className=\"min-h-[350px] w-full bg-zinc-950 p-4 flex items-start justify-center transition\">\n      {/* biome-ignore lint/a11y/noStaticElementInteractions: Hover container for menu, not interactive content */}\n      <div\n        className=\"relative mx-auto w-screen max-w-4xl\"\n        onMouseLeave={handleNavbarMouseLeave}\n      >\n        <div\n          className={cn(\n            \"navbar_content flex h-14 w-full items-center justify-between border border-white/5 px-3 backdrop-blur-md transition-all\",\n            activeDropdown\n              ? \"rounded-t-2xl border-b-0 bg-zinc-950\"\n              : \"rounded-2xl bg-zinc-900/30\",\n          )}\n        >\n          <div className=\"flex items-center gap-2 px-2\">\n            {logo || (\n              <Image\n                src=\"/media/text_w_logo_white.webp\"\n                alt=\"Logo\"\n                width={100}\n                height={30}\n                className=\"object-contain\"\n              />\n            )}\n          </div>\n\n          <div className=\"flex items-center gap-1 rounded-lg px-1 py-1\">\n            {items.map((item) =>\n              item.type === \"link\" ? (\n                <button\n                  type=\"button\"\n                  key={item.href}\n                  className={cn(\n                    \"relative flex h-9 cursor-pointer items-center rounded-xl px-4 py-2 text-sm transition-colors hover:bg-zinc-800/40\",\n                    hoveredItem === item.label.toLowerCase()\n                      ? \"text-zinc-100\"\n                      : \"text-zinc-400 hover:text-zinc-100\",\n                  )}\n                  onMouseEnter={() => {\n                    setHoveredItem(item.label.toLowerCase());\n                    setActiveDropdown(null);\n                  }}\n                >\n                  <span className=\"relative z-10\">{item.label}</span>\n                </button>\n              ) : (\n                <button\n                  type=\"button\"\n                  key={item.menu}\n                  className=\"relative flex h-9 cursor-pointer items-center rounded-xl px-4 py-2 text-sm text-zinc-400 capitalize transition-colors hover:text-zinc-100\"\n                  onMouseEnter={() => handleMouseEnter(item.menu)}\n                >\n                  {hoveredItem === item.menu && (\n                    <div className=\"absolute inset-0 h-full w-full rounded-xl bg-zinc-800 transition-all duration-300 ease-out\" />\n                  )}\n                  <div className=\"relative z-10 flex items-center gap-2\">\n                    <span>\n                      {item.label.charAt(0).toUpperCase() + item.label.slice(1)}\n                    </span>\n                    <HugeiconsIcon\n                      icon={ArrowDown01Icon}\n                      size={17}\n                      className={cn(\n                        \"transition duration-200\",\n                        hoveredItem === item.menu && \"rotate-180\",\n                      )}\n                    />\n                  </div>\n                </button>\n              ),\n            )}\n          </div>\n\n          <div className=\"flex items-center gap-2\">\n            {cta || <RaisedButton color=\"#00bbff\">Get Started</RaisedButton>}\n          </div>\n        </div>\n\n        <AnimatePresence>\n          {activeDropdown && (\n            <NavbarMenu activeMenu={activeDropdown} sections={sections} />\n          )}\n        </AnimatePresence>\n      </div>\n    </div>\n  );\n}\n",
      "type": "registry:ui"
    }
  ]
}