{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "navigation-menu",
  "title": "Navigation-menu",
  "description": "A navigation-menu component.",
  "dependencies": [
    "class-variance-authority"
  ],
  "registryDependencies": [
    "@cubby-ui/elevated"
  ],
  "files": [
    {
      "path": "registry/default/navigation-menu/navigation-menu.tsx",
      "content": "import * as React from \"react\";\nimport { NavigationMenu as NavigationMenuPrimitive } from \"@base-ui/react/navigation-menu\";\nimport { cva } from \"class-variance-authority\";\nimport { cn } from \"@/lib/utils\";\nimport {\n  solidSurface,\n  type SurfaceLevel,\n} from \"@/registry/default/lib/elevated\";\n\ninterface NavigationMenuProps extends React.ComponentProps<\n  typeof NavigationMenuPrimitive.Root\n> {\n  side?: React.ComponentProps<\n    typeof NavigationMenuPrimitive.Positioner\n  >[\"side\"];\n  sideOffset?: React.ComponentProps<\n    typeof NavigationMenuPrimitive.Positioner\n  >[\"sideOffset\"];\n  align?: React.ComponentProps<\n    typeof NavigationMenuPrimitive.Positioner\n  >[\"align\"];\n  alignOffset?: React.ComponentProps<\n    typeof NavigationMenuPrimitive.Positioner\n  >[\"alignOffset\"];\n  collisionPadding?: React.ComponentProps<\n    typeof NavigationMenuPrimitive.Positioner\n  >[\"collisionPadding\"];\n  collisionBoundary?: React.ComponentProps<\n    typeof NavigationMenuPrimitive.Positioner\n  >[\"collisionBoundary\"];\n  arrow?: boolean;\n  /** Surface elevation level (1-8) for the bar. Defaults to 2 — subtle toolbar above the page. */\n  level?: SurfaceLevel;\n  /** Shadow weight (1-8) for the bar. Defaults to 2. */\n  shadowLevel?: SurfaceLevel;\n}\n\nfunction NavigationMenu({\n  className,\n  children,\n  side,\n  sideOffset = 10,\n  align,\n  alignOffset,\n  collisionPadding = { top: 5, bottom: 5, left: 20, right: 20 },\n  collisionBoundary,\n  arrow = false,\n  level = 2,\n  shadowLevel = 2,\n  ...props\n}: NavigationMenuProps) {\n  return (\n    <NavigationMenuPrimitive.Root\n      data-slot=\"navigation-menu\"\n      data-level={level}\n      className={cn(\n        \"text-foreground min-w-max rounded-xl p-1\",\n        solidSurface(level, shadowLevel),\n        className,\n      )}\n      {...props}\n    >\n      {children}\n      <NavigationMenuViewport\n        side={side}\n        sideOffset={sideOffset}\n        align={align}\n        alignOffset={alignOffset}\n        collisionPadding={collisionPadding}\n        collisionBoundary={collisionBoundary}\n        arrow={arrow}\n      />\n    </NavigationMenuPrimitive.Root>\n  );\n}\n\nfunction NavigationMenuList({\n  className,\n  ...props\n}: React.ComponentProps<typeof NavigationMenuPrimitive.List>) {\n  return (\n    <NavigationMenuPrimitive.List\n      data-slot=\"navigation-menu-list\"\n      className={cn(\"relative flex\", className)}\n      {...props}\n    />\n  );\n}\n\nfunction NavigationMenuItem({\n  className,\n  ...props\n}: React.ComponentProps<typeof NavigationMenuPrimitive.Item>) {\n  return (\n    <NavigationMenuPrimitive.Item\n      data-slot=\"navigation-menu-item\"\n      className={cn(\"relative\", className)}\n      {...props}\n    />\n  );\n}\n\nconst navigationMenuTriggerStyle = cva(\n  \"box-border flex items-center justify-center gap-1.5 h-10 px-2.5 xs:px-3 m-0 rounded-md text-foreground font-medium text-[0.925rem] xs:text-base leading-6 select-none no-underline transition-colors duration-150 hover:duration-0 hover:bg-surface-hover hover:text-accent-foreground data-[popup-open]:bg-surface-hover data-[popup-open]:text-accent-foreground focus-visible:outline focus-visible:outline-2 focus-visible:-outline-offset-1 focus-visible:outline-ring focus-visible:relative\",\n);\n\nfunction NavigationMenuTrigger({\n  className,\n  children,\n  ...props\n}: React.ComponentProps<typeof NavigationMenuPrimitive.Trigger>) {\n  return (\n    <NavigationMenuPrimitive.Trigger\n      data-slot=\"navigation-menu-trigger\"\n      className={cn(navigationMenuTriggerStyle(), className)}\n      {...props}\n    >\n      {children}\n      <NavigationMenuIcon />\n    </NavigationMenuPrimitive.Trigger>\n  );\n}\n\nfunction NavigationMenuIcon({\n  className,\n  render = <ChevronDownIcon />,\n  ...props\n}: React.ComponentProps<typeof NavigationMenuPrimitive.Icon>) {\n  return (\n    <NavigationMenuPrimitive.Icon\n      className={cn(\n        \"transition-transform duration-200 ease-in-out data-[popup-open]:rotate-180\",\n        className,\n      )}\n      render={render}\n      {...props}\n    />\n  );\n}\n\nconst navigationMenuSubTriggerStyle = cva(\n  \"w-full text-left relative block rounded-md p-2.5 xs:p-3 no-underline text-inherit transition-colors duration-150 hover:duration-0 hover:bg-surface-hover hover:text-accent-foreground focus-visible:relative focus-visible:outline focus-visible:outline-2 focus-visible:-outline-offset-1 focus-visible:outline-ring data-[popup-open]:bg-surface-hover data-[popup-open]:text-accent-foreground\",\n);\n\nfunction NavigationMenuSubTrigger({\n  className,\n  children,\n  ...props\n}: React.ComponentProps<typeof NavigationMenuPrimitive.Trigger>) {\n  return (\n    <NavigationMenuPrimitive.Trigger\n      data-slot=\"navigation-menu-sub-trigger\"\n      className={cn(navigationMenuSubTriggerStyle(), className)}\n      {...props}\n    >\n      {children}\n      <NavigationMenuPrimitive.Icon\n        className=\"absolute top-1/2 right-2.5 flex h-2.5 w-2.5 -translate-y-1/2 items-center justify-center transition-transform duration-200 ease-in-out data-[popup-open]:rotate-180\"\n        render={<ChevronRightIcon />}\n      />\n    </NavigationMenuPrimitive.Trigger>\n  );\n}\n\nfunction NavigationMenuContent({\n  className,\n  ...props\n}: React.ComponentProps<typeof NavigationMenuPrimitive.Content>) {\n  return (\n    <NavigationMenuPrimitive.Content\n      data-slot=\"navigation-menu-content\"\n      className={cn(\n        \"h-full w-[calc(100vw-2.5rem)] p-4 sm:w-max\",\n        // Transitions for opacity/transform/scale/translate\n        \"transition-[opacity,transform,scale,translate] duration-(--duration) ease-(--easing)\",\n        // Starting/ending opacity\n        \"data-ending-style:opacity-0 data-starting-style:opacity-0\",\n        // Direction-aware slide (starting)\n        \"data-starting-style:data-[activation-direction=left]:-translate-x-1/2\",\n        \"data-starting-style:data-[activation-direction=right]:translate-x-1/2\",\n        // Direction-aware slide (ending)\n        \"data-ending-style:data-[activation-direction=left]:translate-x-1/2\",\n        \"data-ending-style:data-[activation-direction=right]:-translate-x-1/2\",\n        // scale effect during transitions\n        \"data-ending-style:scale-97 data-starting-style:scale-97\",\n        // Motion reduce support\n        \"motion-reduce:transition-none\",\n        className,\n      )}\n      {...props}\n    />\n  );\n}\n\ninterface NavigationMenuLinkProps extends React.ComponentProps<\n  typeof NavigationMenuPrimitive.Link\n> {\n  /**\n   * When true, applies trigger button styling for top-level navigation links\n   */\n  standalone?: boolean;\n}\n\nfunction NavigationMenuLink({\n  className,\n  standalone,\n  ...props\n}: NavigationMenuLinkProps) {\n  return (\n    <NavigationMenuPrimitive.Link\n      data-slot=\"navigation-menu-link\"\n      className={cn(\n        standalone\n          ? navigationMenuTriggerStyle()\n          : \"xs:p-3 hover:bg-surface-hover hover:text-accent-foreground focus-visible:outline-ring block rounded-md p-2.5 text-inherit no-underline transition-colors duration-150 hover:duration-0 focus-visible:relative focus-visible:outline-2 focus-visible:-outline-offset-1\",\n        className,\n      )}\n      {...props}\n    />\n  );\n}\n\nfunction NavigationMenuBackdrop({\n  ...props\n}: React.ComponentProps<typeof NavigationMenuPrimitive.Backdrop>) {\n  return (\n    <NavigationMenuPrimitive.Backdrop\n      data-slot=\"navigation-menu-backdrop\"\n      {...props}\n    />\n  );\n}\n\nfunction NavigationMenuPortal({\n  ...props\n}: React.ComponentProps<typeof NavigationMenuPrimitive.Portal>) {\n  return (\n    <NavigationMenuPrimitive.Portal\n      data-slot=\"navigation-menu-portal\"\n      {...props}\n    />\n  );\n}\n\nfunction NavigationMenuArrow({\n  ...props\n}: React.ComponentProps<typeof NavigationMenuPrimitive.Arrow>) {\n  return (\n    <NavigationMenuPrimitive.Arrow\n      className=\"flex transition-[left] duration-[var(--duration)] ease-[var(--easing)] data-[side=bottom]:top-[-8px] data-[side=left]:right-[-13px] data-[side=left]:rotate-90 data-[side=right]:left-[-13px] data-[side=right]:-rotate-90 data-[side=top]:bottom-[-8px] data-[side=top]:rotate-180\"\n      {...props}\n    >\n      <ArrowSvg />\n    </NavigationMenuPrimitive.Arrow>\n  );\n}\n\ninterface NavigationMenuViewportProps extends React.ComponentProps<\n  typeof NavigationMenuPrimitive.Viewport\n> {\n  side?: React.ComponentProps<\n    typeof NavigationMenuPrimitive.Positioner\n  >[\"side\"];\n  sideOffset?: React.ComponentProps<\n    typeof NavigationMenuPrimitive.Positioner\n  >[\"sideOffset\"];\n  align?: React.ComponentProps<\n    typeof NavigationMenuPrimitive.Positioner\n  >[\"align\"];\n  alignOffset?: React.ComponentProps<\n    typeof NavigationMenuPrimitive.Positioner\n  >[\"alignOffset\"];\n  collisionPadding?: React.ComponentProps<\n    typeof NavigationMenuPrimitive.Positioner\n  >[\"collisionPadding\"];\n  collisionBoundary?: React.ComponentProps<\n    typeof NavigationMenuPrimitive.Positioner\n  >[\"collisionBoundary\"];\n  arrow?: boolean;\n}\n\nfunction NavigationMenuViewport({\n  className,\n  children,\n  side,\n  sideOffset,\n  align,\n  alignOffset,\n  collisionPadding,\n  collisionBoundary,\n  arrow = false,\n  ...props\n}: NavigationMenuViewportProps) {\n  return (\n    <NavigationMenuPortal>\n      <NavigationMenuPrimitive.Positioner\n        data-slot=\"navigation-menu-positioner\"\n        side={side}\n        sideOffset={sideOffset}\n        align={align}\n        alignOffset={alignOffset}\n        collisionPadding={collisionPadding}\n        collisionBoundary={collisionBoundary}\n        className=\"box-border h-(--positioner-height) w-(--positioner-width) max-w-(--available-width) transition-[top,left,right,bottom] duration-(--duration) ease-(--easing) before:absolute before:content-[''] data-instant:transition-none data-[side=bottom]:before:top-[-10px] data-[side=bottom]:before:right-0 data-[side=bottom]:before:left-0 data-[side=bottom]:before:h-2.5 data-[side=left]:before:top-0 data-[side=left]:before:right-[-10px] data-[side=left]:before:bottom-0 data-[side=left]:before:w-2.5 data-[side=right]:before:top-0 data-[side=right]:before:bottom-0 data-[side=right]:before:left-[-10px] data-[side=right]:before:w-2.5 data-[side=top]:before:right-0 data-[side=top]:before:bottom-[-10px] data-[side=top]:before:left-0 data-[side=top]:before:h-2.5\"\n        style={{\n          [\"--duration\" as string]: \"0.35s\",\n          [\"--easing\" as string]: \"cubic-bezier(0.22, 1, 0.36, 1)\",\n        }}\n      >\n        <NavigationMenuPrimitive.Popup\n          data-slot=\"navigation-menu-content\"\n          className={cn(\n            \"text-popover-foreground relative h-(--popup-height) w-(--popup-width) origin-(--transform-origin) overflow-hidden rounded-xl transition-[opacity,transform,width,height,scale,translate] duration-(--duration) ease-(--easing) data-ending-style:scale-90 data-ending-style:opacity-0 data-ending-style:duration-150 data-starting-style:scale-90 data-starting-style:opacity-0\",\n            solidSurface(3, 3),\n          )}\n        >\n          {arrow && <NavigationMenuArrow />}\n          <NavigationMenuPrimitive.Viewport\n            data-slot=\"navigation-menu-viewport\"\n            className={cn(\"relative h-full w-full overflow-hidden\", className)}\n            {...props}\n          >\n            {children}\n          </NavigationMenuPrimitive.Viewport>\n        </NavigationMenuPrimitive.Popup>\n      </NavigationMenuPrimitive.Positioner>\n    </NavigationMenuPortal>\n  );\n}\n\ninterface NavigationMenuSubProps extends React.ComponentProps<\n  typeof NavigationMenuPrimitive.Root\n> {\n  side?: React.ComponentProps<\n    typeof NavigationMenuPrimitive.Positioner\n  >[\"side\"];\n  sideOffset?: React.ComponentProps<\n    typeof NavigationMenuPrimitive.Positioner\n  >[\"sideOffset\"];\n  align?: React.ComponentProps<\n    typeof NavigationMenuPrimitive.Positioner\n  >[\"align\"];\n  alignOffset?: React.ComponentProps<\n    typeof NavigationMenuPrimitive.Positioner\n  >[\"alignOffset\"];\n  arrow?: boolean;\n}\n\nfunction NavigationMenuSub({\n  className,\n  children,\n  orientation = \"vertical\",\n  side = \"right\",\n  sideOffset = 24,\n  align = \"end\",\n  alignOffset = -24,\n  arrow = false,\n  ...props\n}: NavigationMenuSubProps) {\n  return (\n    <NavigationMenuPrimitive.Root\n      data-slot=\"navigation-menu-sub\"\n      className={cn(\"\", className)}\n      orientation={orientation}\n      {...props}\n    >\n      {children}\n      <NavigationMenuPortal>\n        <NavigationMenuPrimitive.Positioner\n          data-slot=\"navigation-menu-sub-positioner\"\n          sideOffset={sideOffset}\n          alignOffset={alignOffset}\n          align={align}\n          side={side}\n          className=\"box-border h-(--positioner-height) w-(--positioner-width) max-w-(--available-width) transition-[top,left,right,bottom] duration-(--duration) ease-(--easing) before:absolute before:content-[''] data-instant:transition-none data-[side=bottom]:before:top-[-10px] data-[side=bottom]:before:right-0 data-[side=bottom]:before:left-0 data-[side=bottom]:before:h-2.5 data-[side=left]:before:top-0 data-[side=left]:before:right-[-10px] data-[side=left]:before:bottom-0 data-[side=left]:before:w-2.5 data-[side=right]:before:top-0 data-[side=right]:before:bottom-0 data-[side=right]:before:left-[-10px] data-[side=right]:before:w-2.5 data-[side=top]:before:right-0 data-[side=top]:before:bottom-[-10px] data-[side=top]:before:left-0 data-[side=top]:before:h-2.5\"\n          style={{\n            [\"--duration\" as string]: \"0.35s\",\n            [\"--easing\" as string]: \"cubic-bezier(0.22, 1, 0.36, 1)\",\n          }}\n        >\n          <NavigationMenuPrimitive.Popup\n            data-slot=\"navigation-menu-sub-content\"\n            className={cn(\n              \"text-popover-foreground relative h-(--popup-height) w-(--popup-width) origin-(--transform-origin) overflow-hidden rounded-xl transition-[opacity,transform,width,height,scale,translate] duration-(--duration) ease-(--easing) data-ending-style:scale-90 data-ending-style:opacity-0 data-ending-style:duration-150 data-starting-style:scale-90 data-starting-style:opacity-0\",\n              solidSurface(5, 5),\n            )}\n          >\n            {arrow && <NavigationMenuArrow />}\n            <NavigationMenuPrimitive.Viewport\n              data-slot=\"navigation-menu-sub-viewport\"\n              className=\"relative h-full w-full overflow-hidden\"\n            />\n          </NavigationMenuPrimitive.Popup>\n        </NavigationMenuPrimitive.Positioner>\n      </NavigationMenuPortal>\n    </NavigationMenuPrimitive.Root>\n  );\n}\n\nfunction ChevronDownIcon(props: React.ComponentProps<\"svg\">) {\n  return (\n    <svg width=\"10\" height=\"10\" viewBox=\"0 0 10 10\" fill=\"none\" {...props}>\n      <path d=\"M1 3.5L5 7.5L9 3.5\" stroke=\"currentColor\" strokeWidth=\"1.5\" />\n    </svg>\n  );\n}\n\nfunction ChevronRightIcon(props: React.ComponentProps<\"svg\">) {\n  return (\n    <svg width=\"10\" height=\"10\" viewBox=\"0 0 10 10\" fill=\"none\" {...props}>\n      <path d=\"M3.5 1L7.5 5L3.5 9\" stroke=\"currentColor\" strokeWidth=\"1.5\" />\n    </svg>\n  );\n}\n\nfunction ArrowSvg(props: React.ComponentProps<\"svg\">) {\n  return (\n    <svg width=\"20\" height=\"10\" viewBox=\"0 0 20 10\" fill=\"none\" {...props}>\n      <path\n        d=\"M9.66437 2.60207L4.80758 6.97318C4.07308 7.63423 3.11989 8 2.13172 8H0V10H20V8H18.5349C17.5468 8 16.5936 7.63423 15.8591 6.97318L11.0023 2.60207C10.622 2.2598 10.0447 2.25979 9.66437 2.60207Z\"\n        className=\"fill-(--popup-surface,var(--popover))\"\n      />\n      <path\n        d=\"M8.99542 1.85876C9.75604 1.17425 10.9106 1.17422 11.6713 1.85878L16.5281 6.22989C17.0789 6.72568 17.7938 7.00001 18.5349 7.00001L15.89 7L11.0023 2.60207C10.622 2.2598 10.0447 2.2598 9.66436 2.60207L4.77734 7L2.13171 7.00001C2.87284 7.00001 3.58774 6.72568 4.13861 6.22989L8.99542 1.85876Z\"\n        className=\"fill-border\"\n      />\n      <path\n        d=\"M10.3333 3.34539L5.47654 7.71648C4.55842 8.54279 3.36693 9 2.13172 9H0V8H2.13172C3.11989 8 4.07308 7.63423 4.80758 6.97318L9.66437 2.60207C10.0447 2.25979 10.622 2.2598 11.0023 2.60207L15.8591 6.97318C16.5936 7.63423 17.5468 8 18.5349 8H20V9H18.5349C17.2998 9 16.1083 8.54278 15.1901 7.71648L10.3333 3.34539Z\"\n        className=\"fill-border\"\n      />\n    </svg>\n  );\n}\n\nexport {\n  NavigationMenu,\n  NavigationMenuList,\n  NavigationMenuItem,\n  NavigationMenuTrigger,\n  NavigationMenuSubTrigger,\n  NavigationMenuSub,\n  NavigationMenuIcon,\n  NavigationMenuContent,\n  NavigationMenuLink,\n  NavigationMenuBackdrop,\n  NavigationMenuPortal,\n  NavigationMenuViewport,\n  NavigationMenuArrow,\n  navigationMenuTriggerStyle,\n  navigationMenuSubTriggerStyle,\n  ChevronRightIcon,\n};\n",
      "type": "registry:ui",
      "target": "components/ui/cubby-ui/navigation-menu.tsx"
    }
  ],
  "type": "registry:ui"
}