{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "navigation-menu",
  "type": "registry:ui",
  "title": "Navigation Menu",
  "description": "A navigation menu component",
  "dependencies": [
    "solid-js",
    "@kobalte/core"
  ],
  "files": [
    {
      "path": "src/registry/ui/navigation-menu.tsx",
      "content": "import type { JSX, ValidComponent } from \"solid-js\"\nimport { splitProps } from \"solid-js\"\n\nimport type { PolymorphicProps } from \"@kobalte/core\"\nimport * as NavigationMenuPrimitive from \"@kobalte/core/navigation-menu\"\n\nimport { cn } from \"~/lib/utils\"\n\nconst NavigationMenuItem = NavigationMenuPrimitive.Menu\n\ntype NavigationMenuProps<T extends ValidComponent = \"ul\"> =\n  NavigationMenuPrimitive.NavigationMenuRootProps<T> & {\n    class?: string | undefined\n    children?: JSX.Element\n  }\n\nconst NavigationMenu = <T extends ValidComponent = \"ul\">(\n  props: PolymorphicProps<T, NavigationMenuProps<T>>\n) => {\n  const [local, others] = splitProps(props as NavigationMenuProps, [\"class\", \"children\"])\n  return (\n    <NavigationMenuPrimitive.Root\n      gutter={6}\n      class={cn(\n        \"group/menu flex w-max flex-1 list-none items-center justify-center data-[orientation=vertical]:flex-col [&>li]:w-full\",\n        local.class\n      )}\n      {...others}\n    >\n      {local.children}\n      <NavigationMenuViewport />\n    </NavigationMenuPrimitive.Root>\n  )\n}\n\ntype NavigationMenuTriggerProps<T extends ValidComponent = \"button\"> =\n  NavigationMenuPrimitive.NavigationMenuTriggerProps<T> & {\n    class?: string | undefined\n  }\n\nconst NavigationMenuTrigger = <T extends ValidComponent = \"button\">(\n  props: PolymorphicProps<T, NavigationMenuTriggerProps<T>>\n) => {\n  const [local, others] = splitProps(props as NavigationMenuTriggerProps, [\"class\"])\n  return (\n    <NavigationMenuPrimitive.Trigger\n      class={cn(\n        \"group/trigger inline-flex h-10 w-full items-center justify-center whitespace-nowrap rounded-md bg-background px-4 py-2 text-sm font-medium transition-colors hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground focus:outline-none disabled:pointer-events-none disabled:opacity-50 data-[active]:bg-accent/50 data-[expanded]:bg-accent/50\",\n        local.class\n      )}\n      {...others}\n    />\n  )\n}\nconst NavigationMenuIcon = () => {\n  return (\n    <NavigationMenuPrimitive.Icon aria-hidden=\"true\">\n      <svg\n        xmlns=\"http://www.w3.org/2000/svg\"\n        viewBox=\"0 0 24 24\"\n        fill=\"none\"\n        stroke=\"currentColor\"\n        stroke-width=\"2\"\n        stroke-linecap=\"round\"\n        stroke-linejoin=\"round\"\n        class=\"relative top-px ml-1 size-3 transition duration-200 group-data-[expanded]/trigger:rotate-180 group-data-[orientation=vertical]/menu:-rotate-90 group-data-[orientation=vertical]/menu:group-data-[expanded]/trigger:rotate-90\"\n      >\n        <path d=\"M6 9l6 6l6 -6\" />\n      </svg>\n    </NavigationMenuPrimitive.Icon>\n  )\n}\n\ntype NavigationMenuViewportProps<T extends ValidComponent = \"li\"> =\n  NavigationMenuPrimitive.NavigationMenuViewportProps<T> & { class?: string | undefined }\n\nconst NavigationMenuViewport = <T extends ValidComponent = \"li\">(\n  props: PolymorphicProps<T, NavigationMenuViewportProps<T>>\n) => {\n  const [local, others] = splitProps(props as NavigationMenuViewportProps, [\"class\"])\n  return (\n    <NavigationMenuPrimitive.Viewport\n      class={cn(\n        // base settings\n        \"pointer-events-none z-[1000] flex h-[var(--kb-navigation-menu-viewport-height)] w-[var(--kb-navigation-menu-viewport-width)] origin-[var(--kb-menu-content-transform-origin)] items-center justify-center overflow-x-clip overflow-y-visible rounded-md border bg-popover opacity-0 shadow-lg data-[expanded]:pointer-events-auto data-[orientation=vertical]:overflow-y-clip data-[orientation=vertical]:overflow-x-visible data-[expanded]:rounded-md\",\n        // animate\n        \"animate-content-hide transition-[width,height] duration-200 ease-in data-[expanded]:animate-content-show data-[expanded]:opacity-100 data-[expanded]:ease-out\",\n        local.class\n      )}\n      {...others}\n    />\n  )\n}\n\ntype NavigationMenuContentProps<T extends ValidComponent = \"ul\"> =\n  NavigationMenuPrimitive.NavigationMenuContentProps<T> & {\n    class?: string | undefined\n  }\n\nconst NavigationMenuContent = <T extends ValidComponent = \"ul\">(\n  props: PolymorphicProps<T, NavigationMenuContentProps<T>>\n) => {\n  const [local, others] = splitProps(props as NavigationMenuContentProps, [\"class\"])\n  return (\n    <NavigationMenuPrimitive.Portal>\n      <NavigationMenuPrimitive.Content\n        class={cn(\n          // base settings\n          \"pointer-events-none absolute left-0 top-0 box-border p-4 focus:outline-none data-[expanded]:pointer-events-auto\",\n          // base animation settings\n          \"data-[motion^=from-]:animate-in data-[motion^=to-]:animate-out data-[motion^=from-]:fade-in data-[motion^=to-]:fade-out\",\n          // left to right\n          \"data-[orientation=horizontal]:data-[motion=from-start]:slide-in-from-left-52 data-[orientation=horizontal]:data-[motion=to-end]:slide-out-to-right-52\",\n          // right to left\n          \"data-[orientation=horizontal]:data-[motion=from-end]:slide-in-from-right-52 data-[orientation=horizontal]:data-[motion=to-start]:slide-out-to-left-52\",\n          // top to bottom\n          \"data-[orientation=vertical]:data-[motion=from-start]:slide-in-from-top-52 data-[orientation=vertical]:data-[motion=to-end]:slide-out-to-bottom-52\",\n          //bottom to top\n          \"data-[orientation=vertical]:data-[motion=from-end]:slide-in-from-bottom-52 data-[orientation=vertical]:data-[motion=to-start]:slide-out-to-bottom-52\",\n          local.class\n        )}\n        {...others}\n      />\n    </NavigationMenuPrimitive.Portal>\n  )\n}\n\ntype NavigationMenuLinkProps<T extends ValidComponent = \"a\"> =\n  NavigationMenuPrimitive.NavigationMenuItemProps<T> & { class?: string | undefined }\n\nconst NavigationMenuLink = <T extends ValidComponent = \"a\">(\n  props: PolymorphicProps<T, NavigationMenuLinkProps<T>>\n) => {\n  const [local, others] = splitProps(props as NavigationMenuLinkProps, [\"class\"])\n  return (\n    <NavigationMenuPrimitive.Item\n      class={cn(\n        \"block select-none space-y-1 rounded-md p-3 leading-none no-underline outline-none transition-colors  hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground\",\n        local.class\n      )}\n      {...others}\n    />\n  )\n}\n\ntype NavigationMenuLabelProps<T extends ValidComponent = \"div\"> =\n  NavigationMenuPrimitive.NavigationMenuItemLabelProps<T> & { class?: string | undefined }\n\nconst NavigationMenuLabel = <T extends ValidComponent = \"div\">(\n  props: PolymorphicProps<T, NavigationMenuLabelProps<T>>\n) => {\n  const [local, others] = splitProps(props as NavigationMenuLabelProps, [\"class\"])\n  return (\n    <NavigationMenuPrimitive.ItemLabel\n      class={cn(\"text-sm font-medium leading-none\", local.class)}\n      {...others}\n    />\n  )\n}\n\ntype NavigationMenuDescriptionProps<T extends ValidComponent = \"div\"> =\n  NavigationMenuPrimitive.NavigationMenuItemDescriptionProps<T> & { class?: string | undefined }\n\nconst NavigationMenuDescription = <T extends ValidComponent = \"div\">(\n  props: PolymorphicProps<T, NavigationMenuDescriptionProps<T>>\n) => {\n  const [local, others] = splitProps(props as NavigationMenuDescriptionProps, [\"class\"])\n  return (\n    <NavigationMenuPrimitive.ItemDescription\n      class={cn(\"text-sm leading-snug text-muted-foreground\", local.class)}\n      {...others}\n    />\n  )\n}\n\nexport {\n  NavigationMenu,\n  NavigationMenuItem,\n  NavigationMenuTrigger,\n  NavigationMenuIcon,\n  NavigationMenuViewport,\n  NavigationMenuContent,\n  NavigationMenuLink,\n  NavigationMenuLabel,\n  NavigationMenuDescription\n}\n",
      "type": "registry:ui"
    }
  ]
}