{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "navigation-menu",
  "title": "Navigation Menu",
  "description": "Site nav panels with peer crossfade and soft-rect Mira popup.",
  "dependencies": [
    "@base-ui/react",
    "lucide-react",
    "motion"
  ],
  "registryDependencies": [
    "@atroui/utils",
    "@atroui/motion"
  ],
  "files": [
    {
      "path": "registry/default/ui/navigation-menu.tsx",
      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { NavigationMenu as NavigationMenuPrimitive } from \"@base-ui/react/navigation-menu\"\nimport { ChevronDown } from \"lucide-react\"\nimport { AnimatePresence, motion, useReducedMotion } from \"motion/react\"\n\nimport { enterTween, pageFade, popupMotion, easeOutSoft } from \"@/lib/motion\"\nimport { cn } from \"@/lib/utils\"\n\n/** Layered pop elevation — ring-as-border + cast stack + top light. */\nconst overlayElevation =\n  \"ds-elev-pop\"\n\ntype NavigationMenuOpenContextValue = {\n  open: boolean\n}\n\nconst NavigationMenuOpenContext =\n  React.createContext<NavigationMenuOpenContextValue | null>(null)\n\nfunction useNavigationMenuOpen() {\n  const ctx = React.useContext(NavigationMenuOpenContext)\n  if (!ctx) {\n    throw new Error(\"NavigationMenu parts must be used within <NavigationMenu>\")\n  }\n  return ctx.open\n}\n\nfunction NavigationMenu({\n  value: valueProp,\n  defaultValue = null,\n  onValueChange,\n  className,\n  ...props\n}: NavigationMenuPrimitive.Root.Props) {\n  const [uncontrolledValue, setUncontrolledValue] = React.useState(defaultValue)\n  const isControlled = valueProp !== undefined\n  const value = isControlled ? valueProp : uncontrolledValue\n  const open = value != null\n\n  const handleValueChange = React.useCallback<\n    NonNullable<NavigationMenuPrimitive.Root.Props[\"onValueChange\"]>\n  >(\n    (next, eventDetails) => {\n      if (!isControlled) setUncontrolledValue(next)\n      onValueChange?.(next, eventDetails)\n    },\n    [isControlled, onValueChange]\n  )\n\n  return (\n    <NavigationMenuOpenContext.Provider value={{ open }}>\n      <NavigationMenuPrimitive.Root\n        data-slot=\"navigation-menu\"\n        value={value}\n        onValueChange={handleValueChange}\n        className={cn(\"relative isolate z-10 flex max-w-max flex-1 items-center justify-center\", className)}\n        {...props}\n      />\n    </NavigationMenuOpenContext.Provider>\n  )\n}\n\nfunction NavigationMenuList({\n  className,\n  ...props\n}: NavigationMenuPrimitive.List.Props) {\n  return (\n    <NavigationMenuPrimitive.List\n      data-slot=\"navigation-menu-list\"\n      className={cn(\n        \"group flex flex-1 list-none items-center justify-center gap-0.5\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction NavigationMenuItem({\n  className,\n  ...props\n}: NavigationMenuPrimitive.Item.Props) {\n  return (\n    <NavigationMenuPrimitive.Item\n      data-slot=\"navigation-menu-item\"\n      className={cn(\"relative\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction NavigationMenuTrigger({\n  className,\n  children,\n  ...props\n}: NavigationMenuPrimitive.Trigger.Props) {\n  return (\n    <NavigationMenuPrimitive.Trigger\n      data-slot=\"navigation-menu-trigger\"\n      className={cn(\n        \"group inline-flex h-7 w-max items-center justify-center gap-1 rounded-[calc(var(--radius)-2px)] bg-transparent px-2 text-[0.8125rem] font-medium text-foreground outline-none select-none\",\n        \"hover:bg-muted/80 focus-visible:ring-2 focus-visible:ring-ring/40\",\n        \"data-popup-open:bg-muted/80 data-pressed:bg-muted/80\",\n        className\n      )}\n      {...props}\n    >\n      {children}\n      <NavigationMenuPrimitive.Icon\n        data-slot=\"navigation-menu-icon\"\n        className=\"relative top-px ml-0.5 inline-flex text-muted-foreground transition-transform duration-200 ease-[cubic-bezier(0.32,0.72,0,1)] data-popup-open:rotate-180\"\n      >\n        <ChevronDown className=\"size-3\" aria-hidden />\n      </NavigationMenuPrimitive.Icon>\n    </NavigationMenuPrimitive.Trigger>\n  )\n}\n\nfunction NavigationMenuContent({\n  className,\n  render,\n  ...props\n}: NavigationMenuPrimitive.Content.Props) {\n  const reduce = useReducedMotion()\n\n  return (\n    <NavigationMenuPrimitive.Content\n      data-slot=\"navigation-menu-content\"\n      className={cn(\n        \"h-full w-[calc(100vw-2.5rem)] p-1.5 sm:w-auto sm:max-w-md\",\n        className\n      )}\n      render={\n        render ?? (\n          <motion.div\n            initial={\n              reduce ? false : { opacity: 0, y: 4 }\n            }\n            animate={{ opacity: 1, y: 0 }}\n            transition={\n              reduce\n                ? { duration: 0 }\n                : enterTween(pageFade.duration, easeOutSoft)\n            }\n          />\n        )\n      }\n      {...props}\n    />\n  )\n}\n\nfunction NavigationMenuLink({\n  className,\n  ...props\n}: NavigationMenuPrimitive.Link.Props) {\n  return (\n    <NavigationMenuPrimitive.Link\n      data-slot=\"navigation-menu-link\"\n      className={cn(\n        \"flex flex-col gap-0.5 rounded-[calc(var(--radius)-2px)] p-1.5 text-sm text-foreground no-underline outline-none transition-colors\",\n        \"hover:bg-muted/80 focus-visible:ring-2 focus-visible:ring-ring/40\",\n        \"data-active:bg-muted/80\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction NavigationMenuIcon({\n  className,\n  ...props\n}: NavigationMenuPrimitive.Icon.Props) {\n  return (\n    <NavigationMenuPrimitive.Icon\n      data-slot=\"navigation-menu-icon\"\n      className={cn(\n        \"size-3 text-muted-foreground transition-transform duration-200 ease-[cubic-bezier(0.32,0.72,0,1)] data-popup-open:rotate-180\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\n/**\n * Portal + positioner + popup + viewport — peer panel surface.\n * Open when any item value is set; settle with popupMotion; size via Base UI CSS vars.\n */\nfunction NavigationMenuViewport({\n  className,\n  align = \"start\",\n  side = \"bottom\",\n  sideOffset = 8,\n  render,\n  ...props\n}: NavigationMenuPrimitive.Popup.Props &\n  Pick<\n    NavigationMenuPrimitive.Positioner.Props,\n    \"align\" | \"side\" | \"sideOffset\"\n  >) {\n  const open = useNavigationMenuOpen()\n  const reduce = useReducedMotion()\n\n  return (\n    <AnimatePresence>\n      {open ? (\n        <NavigationMenuPrimitive.Portal keepMounted key=\"navigation-menu-portal\">\n          <NavigationMenuPrimitive.Positioner\n            className=\"isolate z-50 outline-none\"\n            align={align}\n            side={side}\n            sideOffset={sideOffset}\n            collisionPadding={{ top: 5, bottom: 5, left: 16, right: 16 }}\n          >\n            <NavigationMenuPrimitive.Popup\n              data-slot=\"navigation-menu-viewport\"\n              className={cn(\n                \"relative h-(--popup-height) w-(--popup-width) origin-(--transform-origin) overflow-hidden rounded-[var(--radius)] bg-popover text-popover-foreground outline-none transition-[width,height] duration-200 ease-[cubic-bezier(0.32,0.72,0,1)] motion-reduce:transition-none\",\n                overlayElevation,\n                className\n              )}\n              render={render ?? <motion.div {...popupMotion(reduce)} />}\n              {...props}\n            >\n              <NavigationMenuPrimitive.Viewport className=\"relative h-full w-full overflow-hidden\" />\n            </NavigationMenuPrimitive.Popup>\n          </NavigationMenuPrimitive.Positioner>\n        </NavigationMenuPrimitive.Portal>\n      ) : null}\n    </AnimatePresence>\n  )\n}\n\nfunction NavigationMenuPortal({\n  ...props\n}: NavigationMenuPrimitive.Portal.Props) {\n  return (\n    <NavigationMenuPrimitive.Portal\n      data-slot=\"navigation-menu-portal\"\n      {...props}\n    />\n  )\n}\n\nfunction NavigationMenuPositioner({\n  className,\n  ...props\n}: NavigationMenuPrimitive.Positioner.Props) {\n  return (\n    <NavigationMenuPrimitive.Positioner\n      data-slot=\"navigation-menu-positioner\"\n      className={cn(\"isolate z-50 outline-none\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction NavigationMenuPopup({\n  className,\n  ...props\n}: NavigationMenuPrimitive.Popup.Props) {\n  return (\n    <NavigationMenuPrimitive.Popup\n      data-slot=\"navigation-menu-popup\"\n      className={cn(\n        \"relative h-(--popup-height) w-(--popup-width) origin-(--transform-origin) overflow-hidden rounded-[var(--radius)] bg-popover text-popover-foreground outline-none\",\n        overlayElevation,\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nexport {\n  NavigationMenu,\n  NavigationMenuContent,\n  NavigationMenuIcon,\n  NavigationMenuItem,\n  NavigationMenuLink,\n  NavigationMenuList,\n  NavigationMenuPortal,\n  NavigationMenuPopup,\n  NavigationMenuPositioner,\n  NavigationMenuTrigger,\n  NavigationMenuViewport,\n}\n",
      "type": "registry:ui",
      "target": "components/ui/navigation-menu.tsx"
    }
  ],
  "type": "registry:ui"
}