{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "navigation-menu",
  "title": "Navigation Menu",
  "dependencies": [
    "@base-ui/react",
    "@phosphor-icons/react"
  ],
  "registryDependencies": [
    "https://ui.hotfix.jobs/r/recipes.json",
    "https://ui.hotfix.jobs/r/tokens.json",
    "https://ui.hotfix.jobs/r/utils.json"
  ],
  "files": [
    {
      "path": "registry/components/ui/navigation-menu.tsx",
      "content": "\"use client\";\n\nimport { NavigationMenu as NavigationMenuPrimitive } from \"@base-ui/react/navigation-menu\";\nimport type * as React from \"react\";\nimport { cn } from \"@/lib/utils\";\nimport { colorTransition, popupSurface, selectionFocus } from \"@/lib/recipes\";\n\nimport { CaretDown } from \"@phosphor-icons/react/dist/ssr\";\n/** Horizontal menu bar with morphing dropdown panels sharing one portalled popup. */\nexport function NavigationMenu({\n  className,\n  children,\n  ...props\n}: React.ComponentProps<typeof NavigationMenuPrimitive.Root>): React.ReactElement {\n  return (\n    <NavigationMenuPrimitive.Root\n      data-slot=\"navigation-menu\"\n      className={cn(\"relative\", className)}\n      {...props}\n    >\n      {children}\n      <NavigationMenuPrimitive.Portal>\n        <NavigationMenuPrimitive.Positioner\n          data-slot=\"navigation-menu-positioner\"\n          className=\"z-[80] box-border h-[var(--positioner-height)] w-[var(--positioner-width)] max-w-[var(--available-width)] transition-[top,left,right,bottom] duration-[var(--duration-overlay)] ease-[var(--ease-standard)]\"\n          sideOffset={8}\n          collisionPadding={12}\n        >\n          <NavigationMenuPrimitive.Popup\n            data-slot=\"navigation-menu-popup\"\n            className={cn(\n              popupSurface,\n              \"relative h-[var(--popup-height)] w-[var(--popup-width)] origin-[var(--transform-origin)] overflow-hidden text-ink\",\n              \"transition-[opacity,transform,width,height] duration-[var(--duration-overlay)] ease-[var(--ease-standard)]\",\n              \"data-[starting-style]:opacity-0 data-[starting-style]:scale-[0.97] data-[ending-style]:opacity-0 data-[ending-style]:scale-[0.97]\",\n            )}\n          >\n            <NavigationMenuPrimitive.Viewport className=\"relative h-full w-full\" />\n          </NavigationMenuPrimitive.Popup>\n        </NavigationMenuPrimitive.Positioner>\n      </NavigationMenuPrimitive.Portal>\n    </NavigationMenuPrimitive.Root>\n  );\n}\n\nexport function NavigationMenuList({\n  className,\n  ...props\n}: React.ComponentProps<typeof NavigationMenuPrimitive.List>): React.ReactElement {\n  return (\n    <NavigationMenuPrimitive.List\n      data-slot=\"navigation-menu-list\"\n      className={cn(\"flex items-center gap-1\", className)}\n      {...props}\n    />\n  );\n}\n\nexport function NavigationMenuItem(\n  props: React.ComponentProps<typeof NavigationMenuPrimitive.Item>,\n): React.ReactElement {\n  return <NavigationMenuPrimitive.Item data-slot=\"navigation-menu-item\" {...props} />;\n}\n\nconst chevron = <CaretDown aria-hidden=\"true\" className=\"size-3.5\" />;\n\nexport function NavigationMenuTrigger({\n  className,\n  children,\n  ...props\n}: React.ComponentProps<typeof NavigationMenuPrimitive.Trigger>): React.ReactElement {\n  return (\n    <NavigationMenuPrimitive.Trigger\n      data-slot=\"navigation-menu-trigger\"\n      className={cn(\n        \"group inline-flex items-center gap-1.5 rounded-[var(--radius-8)] px-3 py-1.5 text-small text-ink-muted hover:bg-layer-hover hover:text-ink active:bg-layer-hover data-[popup-open]:bg-layer-hover data-[popup-open]:text-ink\",\n        colorTransition,\n        selectionFocus,\n        className,\n      )}\n      {...props}\n    >\n      {children}\n      <NavigationMenuPrimitive.Icon className=\"transition-transform duration-[var(--duration-state)] ease-[var(--ease-standard)] group-data-[popup-open]:rotate-180\">\n        {chevron}\n      </NavigationMenuPrimitive.Icon>\n    </NavigationMenuPrimitive.Trigger>\n  );\n}\n\nexport function NavigationMenuContent({\n  className,\n  ...props\n}: React.ComponentProps<typeof NavigationMenuPrimitive.Content>): React.ReactElement {\n  return (\n    <NavigationMenuPrimitive.Content\n      data-slot=\"navigation-menu-content\"\n      className={cn(\n        \"w-max p-2 transition-[opacity,transform] duration-[var(--duration-overlay)] ease-[var(--ease-standard)]\",\n        \"data-[starting-style]:opacity-0 data-[ending-style]:opacity-0\",\n        \"data-[activation-direction=left]:data-[starting-style]:translate-x-3\",\n        \"data-[activation-direction=right]:data-[starting-style]:-translate-x-3\",\n        className,\n      )}\n      {...props}\n    />\n  );\n}\n\nexport function NavigationMenuLink({\n  className,\n  closeOnClick = true,\n  variant = \"item\",\n  ...props\n}: React.ComponentProps<typeof NavigationMenuPrimitive.Link> & {\n  variant?: \"item\" | \"trigger\";\n}): React.ReactElement {\n  return (\n    <NavigationMenuPrimitive.Link\n      data-slot=\"navigation-menu-link\"\n      data-variant={variant}\n      closeOnClick={closeOnClick}\n      className={cn(\n        variant === \"item\" &&\n          \"block rounded-[var(--radius-6)] px-3 py-2 text-small text-ink-muted hover:bg-layer-hover hover:text-ink\",\n        variant === \"trigger\" &&\n          \"inline-flex items-center rounded-[var(--radius-8)] px-3 py-1.5 text-small text-ink-muted hover:bg-layer-hover hover:text-ink active:bg-layer-hover\",\n        selectionFocus,\n        colorTransition,\n        className,\n      )}\n      {...props}\n    />\n  );\n}\n\nexport { NavigationMenuPrimitive };\n",
      "type": "registry:ui",
      "target": "components/ui/navigation-menu.tsx"
    }
  ],
  "type": "registry:ui"
}