{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "navigation-menu",
  "type": "registry:ui",
  "dependencies": [
    "@kobalte/core",
    "lucide-solid"
  ],
  "files": [
    {
      "path": "ui/navigation-menu.tsx",
      "content": "import type { Component, JSX, ValidComponent } from \"solid-js\"\nimport { mergeProps, splitProps } from \"solid-js\"\n\nimport * as NavigationMenuPrimitive from \"@kobalte/core/navigation-menu\"\nimport type { PolymorphicProps } from \"@kobalte/core/polymorphic\"\nimport { cva, type VariantProps } from \"class-variance-authority\"\nimport { ChevronDown } from \"lucide-solid\"\n\nimport { cn } from \"@/lib/utils\"\n\ntype NavigationMenuRootProps<T extends ValidComponent = \"ul\"> =\n  NavigationMenuPrimitive.NavigationMenuRootProps<T> & {\n    class?: string | undefined\n    viewport?: boolean\n    children?: JSX.Element\n  }\n\nconst NavigationMenu = <T extends ValidComponent = \"ul\">(\n  rawProps: PolymorphicProps<T, NavigationMenuRootProps<T>>\n) => {\n  const props = mergeProps({ viewport: true }, rawProps)\n  const [local, others] = splitProps(props as NavigationMenuRootProps, [\n    \"class\",\n    \"viewport\",\n    \"children\"\n  ])\n  return (\n    <NavigationMenuPrimitive.Root\n      class={cn(\"cn-navigation-menu group/navigation-menu relative\", local.class)}\n      data-slot=\"navigation-menu\"\n      data-viewport={local.viewport}\n      {...others}\n    >\n      {local.children}\n      {local.viewport && <NavigationMenuViewport />}\n    </NavigationMenuPrimitive.Root>\n  )\n}\n\ntype NavigationMenuListProps<T extends ValidComponent = \"ul\"> =\n  NavigationMenuPrimitive.NavigationMenuRootProps<T> & {\n    class?: string | undefined\n    children?: JSX.Element\n  }\n\nconst NavigationMenuList = <T extends ValidComponent = \"ul\">(\n  props: PolymorphicProps<T, NavigationMenuListProps<T>>\n) => {\n  const [local, others] = splitProps(props as NavigationMenuListProps, [\"class\"])\n  return (\n    <div\n      class={cn(\n        \"cn-navigation-menu-list group flex flex-1 list-none items-center justify-center gap-1\",\n        local.class\n      )}\n      data-slot=\"navigation-menu-list\"\n    >\n      {others.children}\n    </div>\n  )\n}\n\nconst NavigationMenuMenu: Component<NavigationMenuPrimitive.NavigationMenuMenuProps> = (props) => {\n  return <NavigationMenuPrimitive.Menu data-slot=\"navigation-menu-menu\" {...props} />\n}\n\nconst navigationMenuTriggerStyle = cva(\n  \"cn-navigation-menu-trigger group inline-flex h-9 w-max items-center justify-center rounded-md bg-background px-4 py-2 font-medium text-sm outline-hidden transition-[color,box-shadow] hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground focus-visible:outline-1 focus-visible:ring-[3px] focus-visible:ring-ring/50 disabled:pointer-events-none disabled:opacity-50 data-[expanded]:bg-accent/50 data-[expanded]:text-accent-foreground data-[expanded]:focus:bg-accent data-[expanded]:hover:bg-accent\"\n)\n\ntype NavigationMenuTriggerProps<T extends ValidComponent = \"button\"> =\n  NavigationMenuPrimitive.NavigationMenuTriggerProps<T> & {\n    class?: string | undefined\n    children?: JSX.Element\n  }\n\nconst NavigationMenuTrigger = <T extends ValidComponent = \"button\">(\n  props: PolymorphicProps<T, NavigationMenuTriggerProps<T>>\n) => {\n  const [local, others] = splitProps(props as NavigationMenuTriggerProps, [\"class\", \"children\"])\n  return (\n    <NavigationMenuPrimitive.Trigger\n      class={cn(navigationMenuTriggerStyle(), \"group\", local.class)}\n      data-slot=\"navigation-menu-trigger\"\n      {...others}\n    >\n      {local.children}{\" \"}\n      <ChevronDown class=\"relative top-px ml-1 size-3 transition-transform duration-300 group-data-[expanded]:rotate-180\" />\n    </NavigationMenuPrimitive.Trigger>\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          \"cn-navigation-menu-content 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]:fade-out-0 group-data-[viewport=false]/navigation-menu:data-[closed]:zoom-out-95 group-data-[viewport=false]/navigation-menu:data-[expanded]:fade-in-0 group-data-[viewport=false]/navigation-menu:data-[expanded]:zoom-in-95 top-0 left-0 w-full p-2 pr-2.5 data-[motion^=from-]:animate-in data-[motion^=to-]:animate-out **:data-[slot=navigation-menu-link]:focus:outline-none **:data-[slot=navigation-menu-link]:focus:ring-0 group-data-[viewport=false]/navigation-menu:mt-1.5 group-data-[viewport=false]/navigation-menu:overflow-hidden group-data-[viewport=false]/navigation-menu:rounded-md group-data-[viewport=false]/navigation-menu:border 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:duration-200 group-data-[viewport=false]/navigation-menu:data-[closed]:animate-out group-data-[viewport=false]/navigation-menu:data-[expanded]:animate-in md:absolute md:w-auto\",\n          local.class\n        )}\n        data-slot=\"navigation-menu-content\"\n        {...others}\n      />\n    </NavigationMenuPrimitive.Portal>\n  )\n}\n\ntype NavigationMenuLinkProps<T extends ValidComponent = \"a\"> =\n  NavigationMenuPrimitive.NavigationMenuItemProps<T> & {\n    class?: string | undefined\n  }\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        \"cn-navigation-menu-link flex flex-col gap-1 rounded-sm p-2 text-sm outline-hidden transition-all hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground focus-visible:outline-1 focus-visible:ring-[3px] focus-visible:ring-ring/50 data-[active]:bg-accent/50 data-[active]:text-accent-foreground data-[active]:focus:bg-accent data-[active]:hover:bg-accent [&_svg:not([class*='size-'])]:size-4 [&_svg:not([class*='text-'])]:text-muted-foreground\",\n        local.class\n      )}\n      data-slot=\"navigation-menu-link\"\n      {...others}\n    />\n  )\n}\n\ntype NavigationMenuViewportProps<T extends ValidComponent = \"li\"> =\n  NavigationMenuPrimitive.NavigationMenuViewportProps<T> & {\n    class?: string | undefined\n  }\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    <div class={cn(\"absolute top-full left-0 isolate z-50 flex justify-center\")}>\n      <NavigationMenuPrimitive.Viewport\n        class={cn(\n          \"cn-navigation-menu-viewport data-[closed]:zoom-out-95 data-[expanded]:zoom-in-90 relative mt-1.5 h-[var(--kb-navigation-menu-viewport-height)] w-full origin-top-center overflow-hidden rounded-md border bg-popover text-popover-foreground shadow data-[closed]:animate-out data-[expanded]:animate-in md:w-[var(--kb-navigation-menu-viewport-width)]\",\n          local.class\n        )}\n        data-slot=\"navigation-menu-viewport\"\n        {...others}\n      />\n    </div>\n  )\n}\n\ntype NavigationMenuIndicatorProps<T extends ValidComponent = \"div\"> =\n  NavigationMenuPrimitive.NavigationMenuArrowProps<T> & {\n    class?: string | undefined\n  }\n\nconst NavigationMenuIndicator = <T extends ValidComponent = \"div\">(\n  props: PolymorphicProps<T, NavigationMenuIndicatorProps<T>>\n) => {\n  const [local, others] = splitProps(props as NavigationMenuIndicatorProps, [\"class\"])\n  return (\n    <NavigationMenuPrimitive.Arrow\n      class={cn(\n        \"cn-navigation-menu-indicator data-[closed]:fade-out data-[expanded]:fade-in relative top-[60%] z-[1] flex h-1.5 items-end justify-center overflow-hidden data-[closed]:animate-out data-[expanded]:animate-in\",\n        local.class\n      )}\n      data-slot=\"navigation-menu-indicator\"\n      {...others}\n    >\n      <div class=\"relative h-2 w-2 rotate-45 rounded-tl-sm border bg-border shadow-md\" />\n    </NavigationMenuPrimitive.Arrow>\n  )\n}\n\nexport {\n  NavigationMenu,\n  NavigationMenuList,\n  NavigationMenuMenu,\n  NavigationMenuContent,\n  NavigationMenuTrigger,\n  NavigationMenuLink,\n  NavigationMenuIndicator,\n  NavigationMenuViewport,\n  navigationMenuTriggerStyle\n}\nexport type { VariantProps }\n",
      "type": "registry:ui"
    }
  ]
}