{"$schema":"https://ui.shadcn.com/schema/registry-item.json","name":"navigation-menu","type":"registry:ui","title":"Navigation Menu","description":"Tailark Base UI Navigation Menu component","dependencies":["@base-ui/react","class-variance-authority"],"registryDependencies":["@tailark/core-utils"],"files":[{"path":"ui/navigation-menu.tsx","type":"registry:ui","target":"@ui/navigation-menu.tsx","content":"\"use client\"\n\nimport * as React from \"react\"\nimport { NavigationMenu as NavigationMenuPrimitive } from \"@base-ui/react/navigation-menu\"\nimport { cva } from \"class-variance-authority\"\nimport { ChevronDownIcon } from \"lucide-react\"\nimport { cn } from \"@/lib/utils\"\n\nconst sizeMorph =\n  \"duration-200 [transition-timing-function:cubic-bezier(0.215,0.61,0.355,1),cubic-bezier(0.215,0.61,0.355,1),cubic-bezier(0.645,0.045,0.355,1),cubic-bezier(0.645,0.045,0.355,1)]\"\n\nconst NavigationMenu = React.forwardRef<\n  HTMLElement,\n  NavigationMenuPrimitive.Root.Props & { viewport?: boolean }\n>(({ className, children, viewport = true, ...props }, ref) => (\n  <NavigationMenuPrimitive.Root\n    ref={ref}\n    data-slot=\"navigation-menu\"\n    data-viewport={viewport}\n    className={cn(\n      \"group/navigation-menu relative flex max-w-max flex-1 items-center justify-center\",\n      className\n    )}\n    {...props}\n  >\n    {children}\n    <NavigationMenuViewport unstyled={!viewport} />\n  </NavigationMenuPrimitive.Root>\n))\nNavigationMenu.displayName = \"NavigationMenu\"\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-1\",\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\nconst navigationMenuTriggerStyle = cva(\n  \"group ease inline-flex h-8 w-max items-center justify-center rounded-md px-4 py-1 text-sm font-medium text-muted-foreground transition-[color,box-shadow] duration-150 outline-none hover:bg-foreground/5 hover:text-foreground focus:bg-foreground/5 focus:text-foreground focus-visible:ring-[3px] focus-visible:ring-ring/50 focus-visible:outline-1 disabled:pointer-events-none disabled:opacity-50 data-popup-open:bg-foreground/5 data-popup-open:text-foreground data-popup-open:hover:bg-foreground/5 data-popup-open:focus:bg-foreground/5\"\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(navigationMenuTriggerStyle(), \"group\", className)}\n      {...props}\n    >\n      {children}{\" \"}\n      <ChevronDownIcon\n        className=\"ease relative top-px ml-1.5 size-3 opacity-75 transition-transform duration-150 group-data-popup-open:translate-y-px\"\n        aria-hidden=\"true\"\n        strokeWidth={2.5}\n      />\n    </NavigationMenuPrimitive.Trigger>\n  )\n}\n\nfunction NavigationMenuContent({\n  className,\n  ...props\n}: NavigationMenuPrimitive.Content.Props) {\n  return (\n    <NavigationMenuPrimitive.Content\n      data-slot=\"navigation-menu-content\"\n      className={cn(\n        \"h-full w-min p-2 pr-2.5\",\n        \"transition-[opacity,translate] duration-200 ease-[cubic-bezier(0.215,0.61,0.355,1)]\",\n        \"data-starting-style:data-activation-direction:opacity-0\",\n        \"data-ending-style:data-activation-direction:opacity-0\",\n        \"data-starting-style:data-[activation-direction=left]:-translate-x-4\",\n        \"data-starting-style:data-[activation-direction=right]:translate-x-4\",\n        \"data-ending-style:data-[activation-direction=left]:translate-x-4\",\n        \"data-ending-style:data-[activation-direction=right]:-translate-x-4\",\n        \"data-ending-style:duration-150\",\n        \"**:data-[slot=navigation-menu-link]:focus:ring-0 **:data-[slot=navigation-menu-link]:focus:outline-none\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction NavigationMenuViewport({\n  className,\n  unstyled = false,\n}: {\n  className?: string\n  unstyled?: boolean\n}) {\n  const [container, setContainer] = React.useState<HTMLDivElement | null>(null)\n\n  if (unstyled) {\n    return (\n      <>\n        <div\n          ref={setContainer}\n          data-slot=\"navigation-menu-viewport-parent\"\n          className=\"contents\"\n        />\n        {container ? (\n          <NavigationMenuPrimitive.Portal container={container}>\n            <NavigationMenuPrimitive.Positioner\n              side=\"bottom\"\n              align=\"start\"\n              sideOffset={8}\n              className=\"isolate z-50 h-(--positioner-height) w-(--positioner-width) max-w-(--available-width) transition-[top,left,right,bottom] duration-200 ease-[cubic-bezier(0.645,0.045,0.355,1)] outline-none data-instant:transition-none\"\n              collisionAvoidance={{ side: \"none\" }}\n            >\n              <NavigationMenuPrimitive.Popup\n                data-slot=\"navigation-menu-viewport\"\n                className={cn(\n                  \"h-(--popup-height) w-(--popup-width) origin-(--transform-origin) will-change-[opacity,transform] outline-none\",\n                  \"transition-[opacity,scale,width,height]\",\n                  sizeMorph,\n                  \"data-starting-style:scale-95 data-starting-style:opacity-0\",\n                  \"data-ending-style:scale-95 data-ending-style:opacity-0\",\n                  \"data-ending-style:duration-150\",\n                  \"relative -translate-x-1/3 overflow-hidden rounded-xl bg-popover text-popover-foreground shadow-lg ring-1 shadow-black/6.5 ring-border\",\n                  className\n                )}\n              >\n                <NavigationMenuPrimitive.Viewport\n                  data-slot=\"navigation-menu-popup\"\n                  className=\"relative size-full overflow-hidden\"\n                />\n              </NavigationMenuPrimitive.Popup>\n            </NavigationMenuPrimitive.Positioner>\n          </NavigationMenuPrimitive.Portal>\n        ) : null}\n      </>\n    )\n  }\n\n  return (\n    <>\n      <div\n        ref={setContainer}\n        data-slot=\"navigation-menu-viewport-parent\"\n        className=\"fixed inset-x-0 top-(--viewport-top,3rem) isolate z-50 mx-auto flex max-w-6xl px-(--viewport-outer-px) perspective-distant\"\n      />\n      {container ? (\n        <NavigationMenuPrimitive.Portal container={container}>\n          <NavigationMenuPrimitive.Positioner\n            style={{\n              position: \"relative\",\n              top: \"auto\",\n              left: \"auto\",\n              right: \"auto\",\n              bottom: \"auto\",\n              transform: \"none\",\n              width: \"max-content\",\n              maxWidth: \"100%\",\n              height: \"auto\",\n            }}\n            sideOffset={0}\n            align=\"start\"\n            positionMethod=\"fixed\"\n            collisionAvoidance={{ side: \"none\" }}\n          >\n            <NavigationMenuPrimitive.Popup\n              data-slot=\"navigation-menu-viewport\"\n              className={cn(\n                \"h-(--popup-height) w-(--popup-width) max-w-full origin-top will-change-[opacity,transform,width,height] outline-none\",\n                \"transition-[opacity,transform,width,height]\",\n                sizeMorph,\n                \"data-starting-style:transform-[rotateX(-8deg)_scale(0.96)] data-starting-style:opacity-0\",\n                \"data-ending-style:transform-[rotateX(-8deg)_scale(0.96)] data-ending-style:opacity-0\",\n                \"data-ending-style:duration-150\",\n                \"relative mt-1.5 overflow-hidden rounded-xl bg-popover text-popover-foreground shadow-xl ring-1 shadow-black/6.5 ring-border\",\n                className\n              )}\n            >\n              <NavigationMenuPrimitive.Viewport\n                data-slot=\"navigation-menu-popup\"\n                className=\"relative size-full overflow-hidden\"\n              />\n            </NavigationMenuPrimitive.Popup>\n          </NavigationMenuPrimitive.Positioner>\n        </NavigationMenuPrimitive.Portal>\n      ) : null}\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        \"ease flex flex-col gap-1 rounded-[11px] p-2 text-sm transition-colors duration-150 outline-none hover:bg-foreground/5 hover:text-foreground focus:bg-foreground/5 focus:text-foreground focus-visible:ring-[3px] focus-visible:ring-ring/50 focus-visible:outline-1 data-active:bg-foreground/2.5 data-active:text-foreground data-active:hover:bg-foreground/5 data-active:focus:bg-foreground/5 [&_svg:not([class*='size-'])]:size-4 [&_svg:not([class*='text-'])]:text-muted-foreground\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction NavigationMenuIndicator({\n  className,\n  ...props\n}: React.ComponentPropsWithoutRef<\"div\">) {\n  return (\n    <div\n      data-slot=\"navigation-menu-indicator\"\n      className={cn(\n        \"top-full z-1 flex h-1.5 items-end justify-center overflow-hidden\",\n        className\n      )}\n      {...props}\n    >\n      <div className=\"relative top-[60%] h-2 w-2 rotate-45 rounded-tl-sm bg-border shadow-md\" />\n    </div>\n  )\n}\n\nexport {\n  NavigationMenu,\n  NavigationMenuList,\n  NavigationMenuItem,\n  NavigationMenuContent,\n  NavigationMenuTrigger,\n  NavigationMenuLink,\n  NavigationMenuIndicator,\n  NavigationMenuViewport,\n  navigationMenuTriggerStyle,\n}\n"}]}