{
	"$schema": "https://shadcn-svelte.com/schema/registry-item.json",
	"name": "navigation-menu",
	"title": "Navigation Menu",
	"type": "registry:ui",
	"description": "Kura Navigation Menu component source.",
	"devDependencies": [
		"bits-ui@^2.18.1",
		"@internationalized/date@^3.12.2",
		"phosphor-svelte@^3.1.0",
		"tailwind-variants@^3.2.2"
	],
	"registryDependencies": [
		"utils"
	],
	"files": [
		{
			"content": "import Root from './navigation-menu.svelte';\nimport Content from './navigation-menu-content.svelte';\nimport Indicator from './navigation-menu-indicator.svelte';\nimport Item from './navigation-menu-item.svelte';\nimport Link from './navigation-menu-link.svelte';\nimport List from './navigation-menu-list.svelte';\nimport Trigger from './navigation-menu-trigger.svelte';\nimport Viewport from './navigation-menu-viewport.svelte';\n\nexport {\n  Root,\n  Content,\n  Indicator,\n  Item,\n  Link,\n  List,\n  Trigger,\n  Viewport,\n  //\n  Root as NavigationMenuRoot,\n  Content as NavigationMenuContent,\n  Indicator as NavigationMenuIndicator,\n  Item as NavigationMenuItem,\n  Link as NavigationMenuLink,\n  List as NavigationMenuList,\n  Trigger as NavigationMenuTrigger,\n  Viewport as NavigationMenuViewport\n};\n",
			"type": "registry:file",
			"target": "navigation-menu/index.ts"
		},
		{
			"content": "<script lang=\"ts\">\n  import { NavigationMenu as NavigationMenuPrimitive } from 'bits-ui';\n  import { cn } from '$UTILS$.js';\n\n  let {\n    ref = $bindable(null),\n    class: className,\n    ...restProps\n  }: NavigationMenuPrimitive.ContentProps = $props();\n</script>\n\n<NavigationMenuPrimitive.Content\n  bind:ref\n  data-slot=\"navigation-menu-content\"\n  class={cn(\n    'top-0 left-0 w-full p-2.5 pr-3 ease-[cubic-bezier(0.22,1,0.36,1)] data-[motion^=from-]:animate-in data-[motion^=to-]:animate-out 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:top-full group-data-[viewport=false]/navigation-menu:mt-1.5 group-data-[viewport=false]/navigation-menu:overflow-hidden group-data-[viewport=false]/navigation-menu:border group-data-[viewport=false]/navigation-menu:border-[#222225] group-data-[viewport=false]/navigation-menu:bg-[#09090b] group-data-[viewport=false]/navigation-menu:text-zinc-50 group-data-[viewport=false]/navigation-menu:shadow-none group-data-[viewport=false]/navigation-menu:duration-300 group-data-[viewport=false]/navigation-menu:data-open:animate-in group-data-[viewport=false]/navigation-menu:data-closed:animate-out group-data-[viewport=false]/navigation-menu:data-closed:zoom-out-95 group-data-[viewport=false]/navigation-menu:data-open:zoom-in-95 group-data-[viewport=false]/navigation-menu:data-open:fade-in-0 group-data-[viewport=false]/navigation-menu:data-closed:fade-out-0 **:data-[slot=navigation-menu-link]:focus:ring-0 **:data-[slot=navigation-menu-link]:focus:outline-none md:absolute md:w-auto',\n    className\n  )}\n  {...restProps}\n/>\n",
			"type": "registry:file",
			"target": "navigation-menu/navigation-menu-content.svelte"
		},
		{
			"content": "<script lang=\"ts\">\n  import { NavigationMenu as NavigationMenuPrimitive } from 'bits-ui';\n  import { cn } from '$UTILS$.js';\n\n  let {\n    ref = $bindable(null),\n    class: className,\n    ...restProps\n  }: NavigationMenuPrimitive.IndicatorProps = $props();\n</script>\n\n<NavigationMenuPrimitive.Indicator\n  bind:ref\n  data-slot=\"navigation-menu-indicator\"\n  class={cn(\n    'top-full z-[1] flex h-1.5 items-end justify-center overflow-hidden data-[state=visible]:animate-in data-[state=hidden]:animate-out data-[state=hidden]:fade-out data-[state=visible]:fade-in',\n    className\n  )}\n  {...restProps}\n>\n  <div\n    class=\"relative top-[60%] h-2 w-2 rotate-45 border-t border-l border-[#222225] bg-[#09090b] shadow-none\"\n  ></div>\n</NavigationMenuPrimitive.Indicator>\n",
			"type": "registry:file",
			"target": "navigation-menu/navigation-menu-indicator.svelte"
		},
		{
			"content": "<script lang=\"ts\">\n  import { NavigationMenu as NavigationMenuPrimitive } from 'bits-ui';\n  import { cn } from '$UTILS$.js';\n\n  let {\n    ref = $bindable(null),\n    class: className,\n    ...restProps\n  }: NavigationMenuPrimitive.ItemProps = $props();\n</script>\n\n<NavigationMenuPrimitive.Item\n  bind:ref\n  data-slot=\"navigation-menu-item\"\n  class={cn('cn-navigation-menu-item relative isolation-auto', className)}\n  {...restProps}\n/>\n",
			"type": "registry:file",
			"target": "navigation-menu/navigation-menu-item.svelte"
		},
		{
			"content": "<script lang=\"ts\">\n  import { NavigationMenu as NavigationMenuPrimitive } from 'bits-ui';\n  import { cn } from '$UTILS$.js';\n\n  let {\n    ref = $bindable(null),\n    class: className,\n    ...restProps\n  }: NavigationMenuPrimitive.LinkProps = $props();\n</script>\n\n<NavigationMenuPrimitive.Link\n  bind:ref\n  data-slot=\"navigation-menu-link\"\n  class={cn(\n    \"flex items-center gap-1.5 border border-transparent p-3 font-mono text-xs uppercase tracking-[0.04em] text-zinc-400 outline-none transition-colors hover:border-[#b9d765]/50 hover:bg-[#18181b] hover:text-zinc-50 focus:border-[#b9d765]/50 focus:bg-[#18181b] focus:text-zinc-50 focus-visible:ring-2 focus-visible:ring-zinc-300/60 focus-visible:outline-1 data-[active=true]:border-[#b9d765]/50 data-[active=true]:bg-[#18181b] data-[active=true]:text-[#d0e891] data-[active=true]:focus:bg-[#18181b] data-[active=true]:hover:bg-[#18181b] in-data-[slot=navigation-menu-content]:rounded-none [&_svg:not([class*='size-'])]:size-3.5\",\n    className\n  )}\n  {...restProps}\n/>\n",
			"type": "registry:file",
			"target": "navigation-menu/navigation-menu-link.svelte"
		},
		{
			"content": "<script lang=\"ts\">\n  import { NavigationMenu as NavigationMenuPrimitive } from 'bits-ui';\n  import { cn } from '$UTILS$.js';\n\n  let {\n    ref = $bindable(null),\n    class: className,\n    ...restProps\n  }: NavigationMenuPrimitive.ListProps = $props();\n</script>\n\n<NavigationMenuPrimitive.List\n  bind:ref\n  data-slot=\"navigation-menu-list\"\n  class={cn('group flex flex-1 list-none items-center justify-center gap-1', className)}\n  {...restProps}\n/>\n",
			"type": "registry:file",
			"target": "navigation-menu/navigation-menu-list.svelte"
		},
		{
			"content": "<script lang=\"ts\" module>\n  import { cn } from '$UTILS$.js';\n  import { tv } from 'tailwind-variants';\n\n  export const navigationMenuTriggerStyle = tv({\n    base: 'inline-flex h-9 w-max items-center justify-center rounded-full px-4.5 py-2.5 font-mono text-xs font-medium uppercase tracking-[0.04em] text-zinc-400 outline-none transition-colors hover:bg-zinc-50 hover:text-zinc-950 focus:bg-zinc-50 focus:text-zinc-950 focus-visible:ring-2 focus-visible:ring-zinc-300/60 focus-visible:outline-1 data-open:bg-zinc-50 data-open:text-zinc-950 data-open:hover:bg-zinc-50 data-open:focus:bg-zinc-50 data-popup-open:bg-zinc-50 data-popup-open:text-zinc-950 data-popup-open:hover:bg-zinc-50 disabled:pointer-events-none disabled:opacity-50 group/navigation-menu-trigger'\n  });\n</script>\n\n<script lang=\"ts\">\n  import { NavigationMenu as NavigationMenuPrimitive } from 'bits-ui';\n  import CaretDownIcon from 'phosphor-svelte/lib/CaretDown';\n  let {\n    ref = $bindable(null),\n    class: className,\n    children,\n    ...restProps\n  }: NavigationMenuPrimitive.TriggerProps = $props();\n</script>\n\n<NavigationMenuPrimitive.Trigger\n  bind:ref\n  data-slot=\"navigation-menu-trigger\"\n  class={cn(navigationMenuTriggerStyle(), 'group', className)}\n  {...restProps}\n>\n  {@render children?.()}\n  <CaretDownIcon\n    class=\"relative top-px ml-1 size-3 transition duration-300 group-data-open/navigation-menu-trigger:rotate-180 group-data-popup-open/navigation-menu-trigger:rotate-180\"\n    aria-hidden=\"true\"\n  />\n</NavigationMenuPrimitive.Trigger>\n",
			"type": "registry:file",
			"target": "navigation-menu/navigation-menu-trigger.svelte"
		},
		{
			"content": "<script lang=\"ts\">\n  import { NavigationMenu as NavigationMenuPrimitive } from 'bits-ui';\n  import { cn } from '$UTILS$.js';\n\n  let {\n    ref = $bindable(null),\n    class: className,\n    ...restProps\n  }: NavigationMenuPrimitive.ViewportProps = $props();\n</script>\n\n<div class={cn('absolute start-0 top-full isolate z-50 flex justify-center')}>\n  <NavigationMenuPrimitive.Viewport\n    bind:ref\n    data-slot=\"navigation-menu-viewport\"\n    class={cn(\n      'relative mt-1.5 h-[calc(var(--bits-navigation-menu-viewport-height)+1rem)] w-full origin-top-center overflow-hidden border border-[#222225] bg-[#09090b] text-zinc-50 shadow-none duration-100 data-open:animate-in data-closed:animate-out data-closed:zoom-out-90 data-open:zoom-in-90 md:w-[calc(var(--bits-navigation-menu-viewport-width)+1rem)]',\n      className\n    )}\n    {...restProps}\n  />\n</div>\n",
			"type": "registry:file",
			"target": "navigation-menu/navigation-menu-viewport.svelte"
		},
		{
			"content": "<script lang=\"ts\">\n  import { NavigationMenu as NavigationMenuPrimitive } from 'bits-ui';\n  import { cn } from '$UTILS$.js';\n  import NavigationMenuViewport from './navigation-menu-viewport.svelte';\n\n  let {\n    ref = $bindable(null),\n    class: className,\n    viewport = true,\n    children,\n    ...restProps\n  }: NavigationMenuPrimitive.RootProps & {\n    viewport?: boolean;\n  } = $props();\n</script>\n\n<NavigationMenuPrimitive.Root\n  bind:ref\n  data-slot=\"navigation-menu\"\n  data-viewport={viewport}\n  class={cn(\n    'group/navigation-menu relative flex max-w-max flex-1 items-center justify-center',\n    className\n  )}\n  {...restProps}\n>\n  {@render children?.()}\n  {#if viewport}\n    <NavigationMenuViewport />\n  {/if}\n</NavigationMenuPrimitive.Root>\n",
			"type": "registry:file",
			"target": "navigation-menu/navigation-menu.svelte"
		}
	]
}