{
  "name": "navigation-menu",
  "type": "registry:ui",
  "dependencies": [
    "@vueuse/core",
    "class-variance-authority",
    "reka-ui"
  ],
  "registryDependencies": [],
  "files": [
    {
      "path": "ui/navigation-menu/NavigationMenu.vue",
      "type": "registry:ui",
      "content": "<script setup lang=\"ts\">\nimport type { NavigationMenuRootEmits, NavigationMenuRootProps } from \"reka-ui\"\nimport type { HTMLAttributes } from \"vue\"\nimport { reactiveOmit } from \"@vueuse/core\"\nimport {\n  NavigationMenuRoot,\n  useForwardPropsEmits,\n} from \"reka-ui\"\nimport { cn } from \"@/lib/utils\"\nimport NavigationMenuViewport from \"./NavigationMenuViewport.vue\"\n\nconst props = withDefaults(defineProps<NavigationMenuRootProps & {\n  class?: HTMLAttributes[\"class\"]\n  viewport?: boolean\n}>(), {\n  viewport: true,\n})\nconst emits = defineEmits<NavigationMenuRootEmits>()\n\nconst delegatedProps = reactiveOmit(props, \"class\", \"viewport\")\nconst forwarded = useForwardPropsEmits(delegatedProps, emits)\n</script>\n\n<template>\n  <NavigationMenuRoot\n    v-slot=\"slotProps\"\n    data-slot=\"navigation-menu\"\n    :data-viewport=\"viewport\"\n    v-bind=\"forwarded\"\n    :class=\"cn('cn-navigation-menu group/navigation-menu relative flex max-w-max flex-1 items-center justify-center', props.class)\"\n  >\n    <slot v-bind=\"slotProps\" />\n    <NavigationMenuViewport v-if=\"viewport\" />\n  </NavigationMenuRoot>\n</template>\n"
    },
    {
      "path": "ui/navigation-menu/NavigationMenuContent.vue",
      "type": "registry:ui",
      "content": "<script setup lang=\"ts\">\nimport type { NavigationMenuContentEmits, NavigationMenuContentProps } from \"reka-ui\"\nimport type { HTMLAttributes } from \"vue\"\nimport { reactiveOmit } from \"@vueuse/core\"\nimport {\n  NavigationMenuContent,\n  useForwardPropsEmits,\n} from \"reka-ui\"\nimport { cn } from \"@/lib/utils\"\n\nconst props = defineProps<NavigationMenuContentProps & { class?: HTMLAttributes[\"class\"] }>()\nconst emits = defineEmits<NavigationMenuContentEmits>()\n\nconst delegatedProps = reactiveOmit(props, \"class\")\n\nconst forwarded = useForwardPropsEmits(delegatedProps, emits)\n</script>\n\n<template>\n  <NavigationMenuContent\n    data-slot=\"navigation-menu-content\"\n    v-bind=\"forwarded\"\n    :class=\"cn(\n      'cn-navigation-menu-content top-0 left-0 w-full group-data-[viewport=false]/navigation-menu:top-full group-data-[viewport=false]/navigation-menu:mt-1.5 group-data-[viewport=false]/navigation-menu:overflow-hidden **:data-[slot=navigation-menu-link]:focus:ring-0 **:data-[slot=navigation-menu-link]:focus:outline-none md:absolute md:w-auto',\n      props.class,\n    )\"\n  >\n    <slot />\n  </NavigationMenuContent>\n</template>\n"
    },
    {
      "path": "ui/navigation-menu/NavigationMenuIndicator.vue",
      "type": "registry:ui",
      "content": "<script setup lang=\"ts\">\nimport type { NavigationMenuIndicatorProps } from \"reka-ui\"\nimport type { HTMLAttributes } from \"vue\"\nimport { reactiveOmit } from \"@vueuse/core\"\nimport { NavigationMenuIndicator, useForwardProps } from \"reka-ui\"\nimport { cn } from \"@/lib/utils\"\n\nconst props = defineProps<NavigationMenuIndicatorProps & { class?: HTMLAttributes[\"class\"] }>()\n\nconst delegatedProps = reactiveOmit(props, \"class\")\n\nconst forwardedProps = useForwardProps(delegatedProps)\n</script>\n\n<template>\n  <NavigationMenuIndicator\n    data-slot=\"navigation-menu-indicator\"\n    v-bind=\"forwardedProps\"\n    :class=\"cn('cn-navigation-menu-indicator top-full z-1 flex h-1.5 items-end justify-center overflow-hidden', props.class)\"\n  >\n    <div class=\"cn-navigation-menu-indicator-arrow relative top-[60%] h-2 w-2 rotate-45\" />\n  </NavigationMenuIndicator>\n</template>\n"
    },
    {
      "path": "ui/navigation-menu/NavigationMenuItem.vue",
      "type": "registry:ui",
      "content": "<script setup lang=\"ts\">\nimport type { NavigationMenuItemProps } from \"reka-ui\"\nimport type { HTMLAttributes } from \"vue\"\nimport { reactiveOmit } from \"@vueuse/core\"\nimport { NavigationMenuItem } from \"reka-ui\"\nimport { cn } from \"@/lib/utils\"\n\nconst props = defineProps<NavigationMenuItemProps & { class?: HTMLAttributes[\"class\"] }>()\n\nconst delegatedProps = reactiveOmit(props, \"class\")\n</script>\n\n<template>\n  <NavigationMenuItem\n    data-slot=\"navigation-menu-item\"\n    v-bind=\"delegatedProps\"\n    :class=\"cn('cn-navigation-menu-item relative', props.class)\"\n  >\n    <slot />\n  </NavigationMenuItem>\n</template>\n"
    },
    {
      "path": "ui/navigation-menu/NavigationMenuLink.vue",
      "type": "registry:ui",
      "content": "<script setup lang=\"ts\">\nimport type { NavigationMenuLinkEmits, NavigationMenuLinkProps } from \"reka-ui\"\nimport type { HTMLAttributes } from \"vue\"\nimport { reactiveOmit } from \"@vueuse/core\"\nimport {\n  NavigationMenuLink,\n  useForwardPropsEmits,\n} from \"reka-ui\"\nimport { cn } from \"@/lib/utils\"\n\nconst props = defineProps<NavigationMenuLinkProps & { class?: HTMLAttributes[\"class\"] }>()\nconst emits = defineEmits<NavigationMenuLinkEmits>()\n\nconst delegatedProps = reactiveOmit(props, \"class\")\nconst forwarded = useForwardPropsEmits(delegatedProps, emits)\n</script>\n\n<template>\n  <NavigationMenuLink\n    data-slot=\"navigation-menu-link\"\n    v-bind=\"forwarded\"\n    :class=\"cn('cn-navigation-menu-link', props.class)\"\n  >\n    <slot />\n  </NavigationMenuLink>\n</template>\n"
    },
    {
      "path": "ui/navigation-menu/NavigationMenuList.vue",
      "type": "registry:ui",
      "content": "<script setup lang=\"ts\">\nimport type { NavigationMenuListProps } from \"reka-ui\"\nimport type { HTMLAttributes } from \"vue\"\nimport { reactiveOmit } from \"@vueuse/core\"\nimport { NavigationMenuList, useForwardProps } from \"reka-ui\"\nimport { cn } from \"@/lib/utils\"\n\nconst props = defineProps<NavigationMenuListProps & { class?: HTMLAttributes[\"class\"] }>()\n\nconst delegatedProps = reactiveOmit(props, \"class\")\n\nconst forwardedProps = useForwardProps(delegatedProps)\n</script>\n\n<template>\n  <NavigationMenuList\n    data-slot=\"navigation-menu-list\"\n    v-bind=\"forwardedProps\"\n    :class=\"\n      cn(\n        'cn-navigation-menu-list group flex flex-1 list-none items-center justify-center',\n        props.class,\n      )\n    \"\n  >\n    <slot />\n  </NavigationMenuList>\n</template>\n"
    },
    {
      "path": "ui/navigation-menu/NavigationMenuTrigger.vue",
      "type": "registry:ui",
      "content": "<script setup lang=\"ts\">\nimport type { NavigationMenuTriggerProps } from \"reka-ui\"\nimport type { HTMLAttributes } from \"vue\"\nimport { reactiveOmit } from \"@vueuse/core\"\nimport {\n  NavigationMenuTrigger,\n  useForwardProps,\n} from \"reka-ui\"\nimport { cn } from \"@/lib/utils\"\nimport { IconPlaceholder } from \"@/components/docs/icon-placeholder\"\nimport { navigationMenuTriggerStyle } from \".\"\n\nconst props = defineProps<NavigationMenuTriggerProps & { class?: HTMLAttributes[\"class\"] }>()\n\nconst delegatedProps = reactiveOmit(props, \"class\")\n\nconst forwardedProps = useForwardProps(delegatedProps)\n</script>\n\n<template>\n  <NavigationMenuTrigger\n    data-slot=\"navigation-menu-trigger\"\n    v-bind=\"forwardedProps\"\n    :class=\"cn(navigationMenuTriggerStyle(), 'group', props.class)\"\n  >\n    <slot />\n    <IconPlaceholder\n      lucide=\"ChevronDownIcon\"\n      tabler=\"IconChevronDown\"\n      hugeicons=\"ArrowDown01Icon\"\n      phosphor=\"CaretDownIcon\"\n      remixicon=\"RiArrowDownSLine\"\n      class=\"cn-navigation-menu-trigger-icon\"\n      aria-hidden=\"true\"\n    />\n  </NavigationMenuTrigger>\n</template>\n"
    },
    {
      "path": "ui/navigation-menu/NavigationMenuViewport.vue",
      "type": "registry:ui",
      "content": "<script setup lang=\"ts\">\nimport type { NavigationMenuViewportProps } from \"reka-ui\"\nimport type { HTMLAttributes } from \"vue\"\nimport { reactiveOmit } from \"@vueuse/core\"\nimport {\n  NavigationMenuViewport,\n  useForwardProps,\n} from \"reka-ui\"\nimport { cn } from \"@/lib/utils\"\n\nconst props = defineProps<NavigationMenuViewportProps & { class?: HTMLAttributes[\"class\"] }>()\n\nconst delegatedProps = reactiveOmit(props, \"class\")\n\nconst forwardedProps = useForwardProps(delegatedProps)\n</script>\n\n<template>\n  <div class=\"cn-navigation-menu-viewport-wrapper absolute top-full left-0 isolate z-50 flex justify-center\">\n    <NavigationMenuViewport\n      data-slot=\"navigation-menu-viewport\"\n      v-bind=\"forwardedProps\"\n      :class=\"\n        cn(\n          'cn-navigation-menu-viewport origin-top-center relative mt-1.5 h-(--reka-navigation-menu-viewport-height) w-full overflow-hidden md:w-(--reka-navigation-menu-viewport-width)',\n          props.class,\n        )\n      \"\n    />\n  </div>\n</template>\n"
    },
    {
      "path": "ui/navigation-menu/index.ts",
      "type": "registry:ui",
      "content": "import { cva } from \"class-variance-authority\"\n\nexport { default as NavigationMenu } from \"./NavigationMenu.vue\"\nexport { default as NavigationMenuContent } from \"./NavigationMenuContent.vue\"\nexport { default as NavigationMenuIndicator } from \"./NavigationMenuIndicator.vue\"\nexport { default as NavigationMenuItem } from \"./NavigationMenuItem.vue\"\nexport { default as NavigationMenuLink } from \"./NavigationMenuLink.vue\"\nexport { default as NavigationMenuList } from \"./NavigationMenuList.vue\"\nexport { default as NavigationMenuTrigger } from \"./NavigationMenuTrigger.vue\"\nexport { default as NavigationMenuViewport } from \"./NavigationMenuViewport.vue\"\n\nexport const navigationMenuTriggerStyle = cva(\n  \"cn-navigation-menu-trigger group/navigation-menu-trigger inline-flex h-9 w-max items-center justify-center outline-none disabled:pointer-events-none\",\n)\n"
    }
  ]
}