{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "navigation-menu",
  "title": "Navigation Menu",
  "description": "A collection of links for navigating websites.",
  "dependencies": [
    "@base-ui/react",
    "lucide-react",
    "class-variance-authority",
    "clsx",
    "tailwind-merge"
  ],
  "registryDependencies": [
    "https://optics.agusmayol.com.ar/r/button.json",
    "https://optics.agusmayol.com.ar/r/utils.json"
  ],
  "files": [
    {
      "path": "registry/optics/navigation-menu.jsx",
      "content": "import { NavigationMenu as NavigationMenuPrimitive } from \"@base-ui/react/navigation-menu\";\nimport { cva } from \"class-variance-authority\";\nimport { cn } from \"@/lib/utils\";\nimport { ChevronDownIcon } from \"lucide-react\";\nimport { buttonVariants } from \"@/registry/optics/button\";\n\nfunction NavigationMenu({ className = \"\", children = null, ...props }) {\n\treturn (\n\t\t<NavigationMenuPrimitive.Root\n\t\t\tdata-slot=\"navigation-menu\"\n\t\t\tclassName={cn(\n\t\t\t\t\"max-w-max group/navigation-menu relative flex flex-1 items-center justify-center\",\n\t\t\t\tclassName,\n\t\t\t)}\n\t\t\t{...props}\n\t\t>\n\t\t\t{children}\n\t\t\t<NavigationMenuPositioner />\n\t\t</NavigationMenuPrimitive.Root>\n\t);\n}\n\nfunction NavigationMenuList({ className = \"\", ...props }) {\n\treturn (\n\t\t<NavigationMenuPrimitive.List\n\t\t\tdata-slot=\"navigation-menu-list\"\n\t\t\tclassName={cn(\n\t\t\t\t\"gap-0 group flex flex-1 list-none items-center justify-center\",\n\t\t\t\tclassName,\n\t\t\t)}\n\t\t\t{...props}\n\t\t/>\n\t);\n}\n\nfunction NavigationMenuItem({ className = \"\", ...props }) {\n\treturn (\n\t\t<NavigationMenuPrimitive.Item\n\t\t\tdata-slot=\"navigation-menu-item\"\n\t\t\tclassName={cn(\"relative\", className)}\n\t\t\t{...props}\n\t\t/>\n\t);\n}\n\nconst navigationMenuTriggerStyle = cva(\n\t\"bg-background hover:bg-muted focus:bg-muted data-open:hover:bg-muted data-open:focus:bg-muted data-open:bg-muted/50 focus-visible:ring-ring/30 data-popup-open:bg-muted/50 data-popup-open:hover:bg-muted rounded-md px-2.5 py-1.5 text-xs/relaxed font-medium transition-all focus-visible:ring-[2px] focus-visible:outline-1 disabled:opacity-50 group/navigation-menu-trigger inline-flex h-9 w-max items-center justify-center disabled:pointer-events-none outline-none\",\n);\n\nfunction NavigationMenuTrigger({ className = \"\", children = null, ...props }) {\n\treturn (\n\t\t<NavigationMenuPrimitive.Trigger\n\t\t\tdata-slot=\"navigation-menu-trigger\"\n\t\t\tclassName={cn(\n\t\t\t\tnavigationMenuTriggerStyle(),\n\t\t\t\t\"group\",\n\t\t\t\tbuttonVariants({ variant: \"ghost\" }),\n\t\t\t\tclassName,\n\t\t\t)}\n\t\t\t{...props}\n\t\t>\n\t\t\t{children}{\" \"}\n\t\t\t<ChevronDownIcon\n\t\t\t\tclassName=\"relative top-[1px] 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\t\t\t\taria-hidden=\"true\"\n\t\t\t/>\n\t\t</NavigationMenuPrimitive.Trigger>\n\t);\n}\n\nfunction NavigationMenuContent({ className = \"\", ...props }) {\n\treturn (\n\t\t<NavigationMenuPrimitive.Content\n\t\t\tdata-slot=\"navigation-menu-content\"\n\t\t\tclassName={cn(\n\t\t\t\t\"data-[motion^=from-]:animate-in data-[motion^=to-]:animate-out 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:bg-popover group-data-[viewport=false]/navigation-menu:text-popover-foreground group-data-[viewport=false]/navigation-menu:data-open:animate-in group-data-[viewport=false]/navigation-menu:data-closed:animate-out 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 group-data-[viewport=false]/navigation-menu:ring-foreground/10 p-1.5 ease-[cubic-bezier(0.22,1,0.36,1)] group-data-[viewport=false]/navigation-menu:rounded-xl group-data-[viewport=false]/navigation-menu:shadow-md group-data-[viewport=false]/navigation-menu:ring-1 group-data-[viewport=false]/navigation-menu:duration-300 h-full w-auto **:data-[slot=navigation-menu-link]:focus:ring-0 **:data-[slot=navigation-menu-link]:focus:outline-none\",\n\t\t\t\tclassName,\n\t\t\t)}\n\t\t\t{...props}\n\t\t/>\n\t);\n}\n\nfunction NavigationMenuPositioner({\n\tclassName = \"\",\n\tside = \"bottom\",\n\tsideOffset = 8,\n\talign = \"start\",\n\talignOffset = 0,\n\t...props\n}) {\n\treturn (\n\t\t<NavigationMenuPrimitive.Portal>\n\t\t\t<NavigationMenuPrimitive.Positioner\n\t\t\t\tside={side}\n\t\t\t\tsideOffset={sideOffset}\n\t\t\t\talign={align}\n\t\t\t\talignOffset={alignOffset}\n\t\t\t\tclassName={cn(\n\t\t\t\t\t\"transition-[top,left,right,bottom] duration-300 ease-[cubic-bezier(0.22,1,0.36,1)] data-[side=bottom]:before:top-[-10px] data-[side=bottom]:before:right-0 data-[side=bottom]:before:left-0 isolate z-50 h-[var(--positioner-height)] w-[var(--positioner-width)] max-w-[var(--available-width)] data-[instant]:transition-none\",\n\t\t\t\t\tclassName,\n\t\t\t\t)}\n\t\t\t\t{...props}\n\t\t\t>\n\t\t\t\t<NavigationMenuPrimitive.Popup className=\"bg-popover text-popover-foreground ring-foreground/10 rounded-xl shadow ring-1 transition-all ease-[cubic-bezier(0.22,1,0.36,1)] outline-none 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 xs:w-(--popup-width) relative h-(--popup-height) w-(--popup-width) origin-(--transform-origin)\">\n\t\t\t\t\t<NavigationMenuPrimitive.Viewport className=\"relative size-full overflow-hidden\" />\n\t\t\t\t</NavigationMenuPrimitive.Popup>\n\t\t\t</NavigationMenuPrimitive.Positioner>\n\t\t</NavigationMenuPrimitive.Portal>\n\t);\n}\n\nfunction NavigationMenuLink({\n\tclassName = \"\",\n\trender,\n\tasChild,\n\tchildren,\n\t...props\n}) {\n\tif (render) {\n\t\treturn (\n\t\t\t<NavigationMenuPrimitive.Link\n\t\t\t\tdata-slot=\"navigation-menu-link\"\n\t\t\t\tclassName={cn(\n\t\t\t\t\t\"data-[active=true]:focus:bg-muted data-[active=true]:hover:bg-muted data-[active=true]:bg-muted/50 focus-visible:ring-ring/30 hover:bg-muted focus:bg-muted flex items-center gap-1.5 rounded-lg p-2 text-xs/relaxed transition-all outline-none focus-visible:ring-[2px] focus-visible:outline-1 [&_svg:not([class*='size-'])]:size-4\",\n\t\t\t\t\tclassName,\n\t\t\t\t)}\n\t\t\t\tasChild\n\t\t\t\t{...props}\n\t\t\t>\n\t\t\t\t{render}\n\t\t\t</NavigationMenuPrimitive.Link>\n\t\t);\n\t}\n\n\treturn (\n\t\t<NavigationMenuPrimitive.Link\n\t\t\tdata-slot=\"navigation-menu-link\"\n\t\t\tclassName={cn(\n\t\t\t\t\"data-[active=true]:focus:bg-muted data-[active=true]:hover:bg-muted data-[active=true]:bg-muted/50 focus-visible:ring-ring/30 hover:bg-muted focus:bg-muted flex items-center gap-1.5 rounded-lg p-2 text-xs/relaxed transition-all outline-none focus-visible:ring-[2px] focus-visible:outline-1 [&_svg:not([class*='size-'])]:size-4\",\n\t\t\t\tclassName,\n\t\t\t)}\n\t\t\tasChild={asChild}\n\t\t\t{...props}\n\t\t>\n\t\t\t{children}\n\t\t</NavigationMenuPrimitive.Link>\n\t);\n}\n\nfunction NavigationMenuIndicator({ className = \"\", ...props }) {\n\treturn (\n\t\t<NavigationMenuPrimitive.Icon\n\t\t\tdata-slot=\"navigation-menu-indicator\"\n\t\t\tclassName={cn(\n\t\t\t\t\"data-[state=visible]:animate-in data-[state=hidden]:animate-out data-[state=hidden]:fade-out data-[state=visible]:fade-in top-full z-[1] flex h-1.5 items-end justify-center overflow-hidden\",\n\t\t\t\tclassName,\n\t\t\t)}\n\t\t\t{...props}\n\t\t>\n\t\t\t<div className=\"bg-border rounded-tl-sm shadow-md relative top-[60%] h-2 w-2 rotate-45\" />\n\t\t</NavigationMenuPrimitive.Icon>\n\t);\n}\n\nNavigationMenu.displayName = \"NavigationMenu\";\nNavigationMenuContent.displayName = \"NavigationMenuContent\";\nNavigationMenuIndicator.displayName = \"NavigationMenuIndicator\";\nNavigationMenuItem.displayName = \"NavigationMenuItem\";\nNavigationMenuLink.displayName = \"NavigationMenuLink\";\nNavigationMenuList.displayName = \"NavigationMenuList\";\nNavigationMenuTrigger.displayName = \"NavigationMenuTrigger\";\nNavigationMenuPositioner.displayName = \"NavigationMenuPositioner\";\n\nexport {\n\tNavigationMenu,\n\tNavigationMenuContent,\n\tNavigationMenuIndicator,\n\tNavigationMenuItem,\n\tNavigationMenuLink,\n\tNavigationMenuList,\n\tNavigationMenuTrigger,\n\tnavigationMenuTriggerStyle,\n\tNavigationMenuPositioner,\n};\n",
      "type": "registry:component",
      "target": "components/optics/navigation-menu.jsx"
    }
  ],
  "type": "registry:component"
}