{"$schema":"https://ui.shadcn.com/schema/registry-item.json","author":"Eduardo Calvo <edu@smoothui.dev>","css":{},"dependencies":["@base-ui/react"],"description":"Site Navigation Menu for SmoothUI with Base UI / Radix twins.","devDependencies":[],"files":[{"content":"\"use client\";\n\nimport { NavigationMenu as NavPrimitive } from \"@base-ui/react/navigation-menu\";\nimport { cn } from \"@/lib/utils\";\nimport type { ComponentProps, ReactNode, SVGProps } from \"react\";\n\nexport interface NavigationMenuProps {\n  children?: ReactNode;\n  className?: string;\n}\n\nexport type NavigationMenuRootProps = Omit<\n  ComponentProps<typeof NavPrimitive.Root>,\n  \"className\"\n> & { className?: string };\nexport type NavigationMenuListProps = Omit<\n  ComponentProps<typeof NavPrimitive.List>,\n  \"className\"\n> & { className?: string };\nexport type NavigationMenuItemProps = Omit<\n  ComponentProps<typeof NavPrimitive.Item>,\n  \"className\"\n> & { className?: string };\nexport type NavigationMenuTriggerProps = Omit<\n  ComponentProps<typeof NavPrimitive.Trigger>,\n  \"className\"\n> & { className?: string };\nexport type NavigationMenuContentProps = Omit<\n  ComponentProps<typeof NavPrimitive.Content>,\n  \"className\"\n> & { className?: string };\nexport type NavigationMenuLinkProps = Omit<\n  ComponentProps<typeof NavPrimitive.Link>,\n  \"className\"\n> & { className?: string };\nexport type NavigationMenuViewportProps = Omit<\n  ComponentProps<typeof NavPrimitive.Viewport>,\n  \"className\"\n> & { className?: string };\n\nconst TRIGGER_CLASS =\n  \"inline-flex h-9 select-none items-center gap-1 rounded-md px-3 font-medium text-sm outline-none transition-colors hover:bg-muted focus-visible:bg-muted data-popup-open:bg-muted\";\n\nconst LINK_CLASS =\n  \"block select-none rounded-md p-3 text-sm outline-none transition-colors hover:bg-muted focus-visible:bg-muted\";\n\nconst CaretDownIcon = (props: SVGProps<SVGSVGElement>) => (\n  <svg\n    fill=\"currentColor\"\n    height=\"12\"\n    aria-hidden=\"true\"\n    focusable=\"false\"\n    viewBox=\"0 0 16 16\"\n    width=\"12\"\n    {...props}\n  >\n    <path d=\"M12 6H4l4 4.5z\" />\n  </svg>\n);\n\nexport const NavigationMenuRoot = ({\n  className,\n  ...props\n}: NavigationMenuRootProps) => (\n  <NavPrimitive.Root\n    className={cn(\"relative flex max-w-max flex-1 items-center\", className)}\n    data-slot=\"navigation-menu\"\n    {...props}\n  />\n);\n\nexport const NavigationMenuList = ({\n  className,\n  ...props\n}: NavigationMenuListProps) => (\n  <NavPrimitive.List\n    className={cn(\n      \"group flex flex-1 list-none items-center justify-center gap-1\",\n      className\n    )}\n    data-slot=\"navigation-menu-list\"\n    {...props}\n  />\n);\n\nexport const NavigationMenuItem = ({\n  className,\n  ...props\n}: NavigationMenuItemProps) => (\n  <NavPrimitive.Item\n    className={cn(className)}\n    data-slot=\"navigation-menu-item\"\n    {...props}\n  />\n);\n\nexport const NavigationMenuTrigger = ({\n  children,\n  className,\n  ...props\n}: NavigationMenuTriggerProps) => (\n  <NavPrimitive.Trigger\n    className={cn(TRIGGER_CLASS, className)}\n    data-slot=\"navigation-menu-trigger\"\n    {...props}\n  >\n    {children}\n    <NavPrimitive.Icon className=\"relative top-px transition-transform duration-200 ease-out data-popup-open:rotate-180 motion-reduce:transition-none\">\n      <CaretDownIcon />\n    </NavPrimitive.Icon>\n  </NavPrimitive.Trigger>\n);\n\nexport const NavigationMenuContent = ({\n  className,\n  ...props\n}: NavigationMenuContentProps) => (\n  <NavPrimitive.Content\n    className={cn(\n      \"w-auto p-2 data-ending-style:opacity-0 data-starting-style:opacity-0 motion-reduce:transition-none\",\n      className\n    )}\n    data-slot=\"navigation-menu-content\"\n    {...props}\n  />\n);\n\nexport const NavigationMenuLink = ({\n  className,\n  ...props\n}: NavigationMenuLinkProps) => (\n  <NavPrimitive.Link\n    className={cn(LINK_CLASS, className)}\n    data-slot=\"navigation-menu-link\"\n    {...props}\n  />\n);\n\nexport const NavigationMenuViewport = ({\n  className,\n  ...props\n}: NavigationMenuViewportProps) => (\n  <NavPrimitive.Portal>\n    <NavPrimitive.Positioner\n      className=\"outline-none\"\n      sideOffset={8}\n      collisionPadding={16}\n    >\n      <NavPrimitive.Popup className=\"overlay-surface origin-[var(--transform-origin)] overflow-hidden rounded-xl border bg-popover text-popover-foreground transition-[scale,opacity] duration-150 ease-out data-ending-style:scale-[0.98] data-starting-style:scale-[0.98] data-ending-style:opacity-0 data-starting-style:opacity-0 motion-reduce:transition-none\">\n        <NavPrimitive.Viewport\n          className={cn(\n            \"relative h-[var(--popup-height)] w-[var(--popup-width)] overflow-hidden transition-[width,height] duration-200 ease-out motion-reduce:transition-none\",\n            className\n          )}\n          data-slot=\"navigation-menu-viewport\"\n          {...props}\n        />\n      </NavPrimitive.Popup>\n    </NavPrimitive.Positioner>\n  </NavPrimitive.Portal>\n);\n\n/**\n * SmoothUI Navigation Menu — Base UI twin (default).\n * Convenience root; nest List / Item / Trigger / Content / Viewport.\n */\nexport default function NavigationMenu({\n  children,\n  className,\n}: NavigationMenuProps) {\n  return (\n    <NavigationMenuRoot className={className}>{children}</NavigationMenuRoot>\n  );\n}\n","path":"index.tsx","target":"components/smoothui/navigation-menu/index.tsx","type":"registry:ui"}],"name":"navigation-menu","registryDependencies":["https://smoothui.dev/r/tokens.json"],"title":"Navigation Menu","type":"registry:ui"}