{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "navigation-menu",
  "title": "Navigation Menu",
  "description": "Site navigation whose panel slides and resizes between items.",
  "dependencies": [
    "@base-ui/react"
  ],
  "registryDependencies": [
    "https://ui.ndekocode.dev/r/theme.json",
    "https://ui.ndekocode.dev/r/utils.json",
    "https://ui.ndekocode.dev/r/icons.json"
  ],
  "files": [
    {
      "path": "registry/ndeko/ui/navigation-menu.tsx",
      "content": "'use client';\n\nimport { NavigationMenu as NavigationMenuPrimitive } from '@base-ui/react/navigation-menu';\n\nimport { ChevronDownIcon } from '@/registry/ndeko/lib/icons';\nimport { cn } from '@/registry/ndeko/lib/utils';\n\ntype WithClassName<Props> = Omit<Props, 'className'> & { className?: string };\n\nconst MORPH_STYLE = {\n  '--duration': '0.25s',\n  '--easing': 'var(--ease-out-strong)',\n} as React.CSSProperties;\n\nfunction NavigationMenu({\n  className,\n  children,\n  ...props\n}: WithClassName<NavigationMenuPrimitive.Root.Props>) {\n  return (\n    <NavigationMenuPrimitive.Root\n      data-slot='navigation-menu'\n      className={cn('relative min-w-max', className)}\n      {...props}\n    >\n      {children}\n      <NavigationMenuPrimitive.Portal>\n        <NavigationMenuPrimitive.Positioner\n          sideOffset={8}\n          collisionPadding={{ top: 5, bottom: 5, left: 16, right: 16 }}\n          collisionAvoidance={{ side: 'none' }}\n          style={MORPH_STYLE}\n          className=\"z-50 h-(--positioner-height) w-(--positioner-width) max-w-(--available-width) transition-[top,left,right,bottom] duration-(--duration) ease-(--easing) before:absolute before:content-[''] data-instant:transition-none data-[side=bottom]:before:inset-x-0 data-[side=bottom]:before:-top-2.5 data-[side=bottom]:before:h-2.5\"\n        >\n          <NavigationMenuPrimitive.Popup className='surface-raised relative h-(--popup-height) w-(--popup-width) origin-(--transform-origin) overflow-hidden rounded-xl transition-[opacity,scale,width,height] duration-(--duration) ease-(--easing) outline-none data-ending-style:scale-95 data-ending-style:opacity-0 data-ending-style:duration-100 data-starting-style:scale-95 data-starting-style:opacity-0'>\n            <NavigationMenuPrimitive.Viewport className='relative h-full w-full overflow-hidden' />\n          </NavigationMenuPrimitive.Popup>\n        </NavigationMenuPrimitive.Positioner>\n      </NavigationMenuPrimitive.Portal>\n    </NavigationMenuPrimitive.Root>\n  );\n}\n\nfunction NavigationMenuList({\n  className,\n  ...props\n}: WithClassName<NavigationMenuPrimitive.List.Props>) {\n  return (\n    <NavigationMenuPrimitive.List\n      data-slot='navigation-menu-list'\n      className={cn('relative flex items-center gap-1', className)}\n      {...props}\n    />\n  );\n}\n\nfunction NavigationMenuItem({\n  className,\n  ...props\n}: WithClassName<NavigationMenuPrimitive.Item.Props>) {\n  return (\n    <NavigationMenuPrimitive.Item\n      data-slot='navigation-menu-item'\n      className={cn('relative', className)}\n      {...props}\n    />\n  );\n}\n\nconst TRIGGER =\n  'inline-flex h-8 items-center justify-center gap-1 rounded-md px-3 text-[13px] font-medium text-muted-foreground outline-none transition-colors hover:bg-foreground/5 hover:text-foreground focus-visible:ring-[3px] focus-visible:ring-ring/25 data-popup-open:bg-foreground/5 data-popup-open:text-foreground';\n\nfunction NavigationMenuTrigger({\n  className,\n  children,\n  ...props\n}: WithClassName<NavigationMenuPrimitive.Trigger.Props>) {\n  return (\n    <NavigationMenuPrimitive.Trigger\n      data-slot='navigation-menu-trigger'\n      className={cn(TRIGGER, className)}\n      {...props}\n    >\n      {children}\n      <NavigationMenuPrimitive.Icon className='transition-transform duration-200 ease-(--ease-out-strong) data-popup-open:rotate-180'>\n        <ChevronDownIcon className='size-3.5' />\n      </NavigationMenuPrimitive.Icon>\n    </NavigationMenuPrimitive.Trigger>\n  );\n}\n\nconst CONTENT = [\n  'w-[calc(100vw-2.5rem)] p-2 sm:w-max sm:min-w-80',\n  'transition-[opacity,translate] duration-(--duration) ease-(--easing)',\n  'data-starting-style:opacity-0 data-ending-style:opacity-0',\n  'data-starting-style:data-[activation-direction=left]:-translate-x-1/2 data-starting-style:data-[activation-direction=right]:translate-x-1/2',\n  'data-ending-style:data-[activation-direction=left]:translate-x-1/2 data-ending-style:data-[activation-direction=right]:-translate-x-1/2',\n].join(' ');\n\nfunction NavigationMenuContent({\n  className,\n  ...props\n}: WithClassName<NavigationMenuPrimitive.Content.Props>) {\n  return (\n    <NavigationMenuPrimitive.Content\n      data-slot='navigation-menu-content'\n      className={cn(CONTENT, className)}\n      {...props}\n    />\n  );\n}\n\nfunction NavigationMenuLink({\n  className,\n  ...props\n}: WithClassName<NavigationMenuPrimitive.Link.Props>) {\n  return (\n    <NavigationMenuPrimitive.Link\n      data-slot='navigation-menu-link'\n      className={cn(\n        'hover:bg-foreground/[0.04] focus-visible:ring-ring/25 data-active:bg-primary/[0.06] flex flex-col gap-1 rounded-lg p-2.5 text-[13px] transition-colors outline-none focus-visible:ring-[3px]',\n        className\n      )}\n      {...props}\n    />\n  );\n}\n\nexport {\n  NavigationMenu,\n  NavigationMenuContent,\n  NavigationMenuItem,\n  NavigationMenuLink,\n  NavigationMenuList,\n  NavigationMenuTrigger,\n  TRIGGER as navigationMenuTriggerStyle,\n};\n",
      "type": "registry:ui"
    }
  ],
  "categories": [
    "primitives"
  ],
  "type": "registry:ui"
}