{
  "$schema": "https://blode.co/ui/schema/registry-item.json",
  "name": "navigation-menu",
  "title": "Navigation Menu",
  "author": "Matthew Blode",
  "description": "A responsive navigation component with support for dropdown panels.",
  "dependencies": ["@base-ui/react"],
  "files": [
    {
      "path": "ui/navigation-menu.tsx",
      "content": "import { NavigationMenu as NavigationMenuPrimitive } from \"@base-ui/react/navigation-menu\";\nimport { ChevronDownIcon } from \"blode-icons-react\";\nimport { cva } from \"class-variance-authority\";\nimport type * as React from \"react\";\n\nimport { cn } from \"@/lib/utils\";\n\nconst NavigationMenuPositioner = ({\n  className,\n  side = \"bottom\",\n  sideOffset = 8,\n  align = \"start\",\n  alignOffset = 0,\n  ...props\n}: NavigationMenuPrimitive.Positioner.Props) => (\n  <NavigationMenuPrimitive.Portal>\n    <NavigationMenuPrimitive.Positioner\n      align={align}\n      alignOffset={alignOffset}\n      className={cn(\n        \"isolate z-50 h-(--positioner-height) w-(--positioner-width) max-w-(--available-width) transition-[top,left,right,bottom] duration-[0.35s] ease-[cubic-bezier(0.22,1,0.36,1)] data-instant:transition-none data-[side=bottom]:before:top-[-10px] data-[side=bottom]:before:right-0 data-[side=bottom]:before:left-0\",\n        className,\n      )}\n      side={side}\n      sideOffset={sideOffset}\n      {...props}\n    >\n      <NavigationMenuPrimitive.Popup className=\"data-[ending-style]:easing-[ease] relative h-(--popup-height) w-(--popup-width) xs:w-(--popup-width) origin-(--transform-origin) rounded-lg bg-popover text-popover-foreground shadow outline-none ring-1 ring-foreground/10 transition-[opacity,transform,width,height,scale,translate] duration-[0.35s] ease-[cubic-bezier(0.22,1,0.36,1)] data-ending-style:scale-90 data-starting-style:scale-90 data-ending-style:opacity-0 data-starting-style:opacity-0 data-ending-style:duration-150\">\n        <NavigationMenuPrimitive.Viewport className=\"relative size-full overflow-hidden\" />\n      </NavigationMenuPrimitive.Popup>\n    </NavigationMenuPrimitive.Positioner>\n  </NavigationMenuPrimitive.Portal>\n);\n\nconst NavigationMenu = ({\n  align = \"start\",\n  className,\n  children,\n  ...props\n}: NavigationMenuPrimitive.Root.Props &\n  Pick<NavigationMenuPrimitive.Positioner.Props, \"align\">) => (\n  <NavigationMenuPrimitive.Root\n    className={cn(\n      \"group/navigation-menu relative flex max-w-max flex-1 items-center justify-center\",\n      className,\n    )}\n    data-slot=\"navigation-menu\"\n    {...props}\n  >\n    {children}\n    <NavigationMenuPositioner align={align} />\n  </NavigationMenuPrimitive.Root>\n);\n\nconst NavigationMenuList = ({\n  className,\n  ...props\n}: React.ComponentPropsWithRef<typeof NavigationMenuPrimitive.List>) => (\n  <NavigationMenuPrimitive.List\n    className={cn(\"group flex flex-1 list-none items-center justify-center gap-0\", className)}\n    data-slot=\"navigation-menu-list\"\n    {...props}\n  />\n);\n\nconst NavigationMenuItem = ({\n  className,\n  ...props\n}: React.ComponentPropsWithRef<typeof NavigationMenuPrimitive.Item>) => (\n  <NavigationMenuPrimitive.Item\n    className={cn(\"relative\", className)}\n    data-slot=\"navigation-menu-item\"\n    {...props}\n  />\n);\n\nconst navigationMenuTriggerStyle = cva(\n  \"group/navigation-menu-trigger inline-flex h-9 w-max items-center justify-center rounded-lg bg-background px-2.5 py-1.5 font-medium text-sm outline-none transition-[color,background-color,border-color,box-shadow] hover:bg-muted focus:bg-muted focus-visible:outline-1 focus-visible:ring-3 focus-visible:ring-ring/50 disabled:pointer-events-none disabled:opacity-50 data-open:bg-muted/50 data-popup-open:bg-muted/50 data-open:focus:bg-muted data-open:hover:bg-muted data-popup-open:hover:bg-muted\",\n);\n\nconst NavigationMenuTrigger = ({\n  className,\n  children,\n  ...props\n}: NavigationMenuPrimitive.Trigger.Props) => (\n  <NavigationMenuPrimitive.Trigger\n    className={cn(navigationMenuTriggerStyle(), \"group\", className)}\n    data-slot=\"navigation-menu-trigger\"\n    {...props}\n  >\n    {children}{\" \"}\n    <ChevronDownIcon\n      aria-hidden=\"true\"\n      className=\"relative top-px ml-1 size-3 transition duration-300 group-data-open/navigation-menu-trigger:rotate-180 group-data-popup-open/navigation-menu-trigger:rotate-180\"\n    />\n  </NavigationMenuPrimitive.Trigger>\n);\n\nconst NavigationMenuContent = ({ className, ...props }: NavigationMenuPrimitive.Content.Props) => (\n  <NavigationMenuPrimitive.Content\n    className={cn(\n      \"data-[motion^=from-]:fade-in data-[motion^=to-]:fade-out data-[motion=from-end]:slide-in-from-right-52 data-[motion=from-start]:slide-in-from-left-52 data-[motion=to-end]:slide-out-to-right-52 data-[motion=to-start]:slide-out-to-left-52 group-data-[viewport=false]/navigation-menu:data-closed:zoom-out-95 group-data-[viewport=false]/navigation-menu:data-open:zoom-in-95 group-data-[viewport=false]/navigation-menu:data-open:fade-in-0 group-data-[viewport=false]/navigation-menu:data-closed:fade-out-0 h-full w-auto p-1 transition-[opacity,transform,translate] duration-[0.35s] ease-[cubic-bezier(0.22,1,0.36,1)] data-ending-style:data-activation-direction=left:translate-x-[50%] data-ending-style:data-activation-direction=right:translate-x-[-50%] data-starting-style:data-activation-direction=left:translate-x-[-50%] data-starting-style:data-activation-direction=right:translate-x-[50%] data-[motion^=from-]:animate-in data-[motion^=to-]:animate-out data-ending-style:opacity-0 data-starting-style:opacity-0 **:data-[slot=navigation-menu-link]:focus:outline-none **:data-[slot=navigation-menu-link]:focus:ring-0 group-data-[viewport=false]/navigation-menu:rounded-lg group-data-[viewport=false]/navigation-menu:bg-popover group-data-[viewport=false]/navigation-menu:text-popover-foreground group-data-[viewport=false]/navigation-menu:shadow group-data-[viewport=false]/navigation-menu:ring-1 group-data-[viewport=false]/navigation-menu:ring-foreground/10 group-data-[viewport=false]/navigation-menu:duration-300 group-data-[viewport=false]/navigation-menu:data-closed:animate-out group-data-[viewport=false]/navigation-menu:data-open:animate-in\",\n      className,\n    )}\n    data-slot=\"navigation-menu-content\"\n    {...props}\n  />\n);\n\nconst NavigationMenuLink = ({ className, ...props }: NavigationMenuPrimitive.Link.Props) => (\n  <NavigationMenuPrimitive.Link\n    className={cn(\n      \"flex items-center gap-2 in-data-[slot=navigation-menu-content]:rounded-md rounded-lg p-2 text-sm outline-none transition-[color,background-color,border-color,box-shadow] hover:bg-muted focus:bg-muted focus-visible:outline-1 focus-visible:ring-3 focus-visible:ring-ring/50 data-active:bg-muted/50 data-active:focus:bg-muted data-active:hover:bg-muted [&_svg:not([class*='size-'])]:size-4\",\n      className,\n    )}\n    data-slot=\"navigation-menu-link\"\n    {...props}\n  />\n);\n\nconst NavigationMenuIndicator = ({\n  className,\n  ...props\n}: React.ComponentPropsWithRef<typeof NavigationMenuPrimitive.Icon>) => (\n  <NavigationMenuPrimitive.Icon\n    className={cn(\n      \"data-[state=hidden]:fade-out data-[state=visible]:fade-in top-full z-1 flex h-1.5 items-end justify-center overflow-hidden data-[state=hidden]:animate-out data-[state=visible]:animate-in\",\n      className,\n    )}\n    data-slot=\"navigation-menu-indicator\"\n    {...props}\n  >\n    <div className=\"relative top-[60%] h-2 w-2 rotate-45 rounded-tl-sm bg-border shadow-md\" />\n  </NavigationMenuPrimitive.Icon>\n);\n\nexport {\n  NavigationMenu,\n  NavigationMenuContent,\n  NavigationMenuIndicator,\n  NavigationMenuItem,\n  NavigationMenuLink,\n  NavigationMenuList,\n  NavigationMenuTrigger,\n  navigationMenuTriggerStyle,\n  NavigationMenuPositioner,\n};\n",
      "type": "registry:ui",
      "target": ""
    }
  ],
  "type": "registry:ui"
}