{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "navigation-menu",
  "type": "registry:ui",
  "title": "Navigation Menu",
  "description": "Link-first site and app navigation with disclosure flyout panels, rich sections and featured items, animated indicator and viewport morphing via CSS motion presets, controlled or uncontrolled open state, activation modes, current-state handling, and token-backed variants, sizes, and orientations.",
  "dependencies": [],
  "devDependencies": [],
  "registryDependencies": [
    "https://components.dethink.co.uk/r/dethink-base.json"
  ],
  "files": [
    {
      "path": "packages/components/src/components/navigation-menu/navigation-menu.tsx",
      "type": "registry:file",
      "target": "~/components/dethink/components/navigation-menu/navigation-menu.tsx",
      "content": "import {\n  Children,\n  cloneElement,\n  createContext,\n  forwardRef,\n  isValidElement,\n  useCallback,\n  useContext,\n  useEffect,\n  useId,\n  useMemo,\n  useRef,\n  useState,\n  type AnchorHTMLAttributes,\n  type ButtonHTMLAttributes,\n  type FocusEventHandler,\n  type ForwardedRef,\n  type HTMLAttributes,\n  type KeyboardEventHandler,\n  type LiHTMLAttributes,\n  type MouseEventHandler,\n  type PointerEventHandler,\n  type ReactElement,\n  type ReactNode,\n  type Ref,\n} from \"react\";\nimport { createPortal } from \"react-dom\";\nimport { cn } from \"../../utils/cn\";\n\nexport type NavigationMenuVariant = \"default\" | \"quiet\" | \"underline\";\n\nexport type NavigationMenuSize = \"sm\" | \"md\" | \"lg\";\n\nexport type NavigationMenuOrientation = \"horizontal\" | \"vertical\";\n\nexport type NavigationMenuCurrent = boolean | \"page\" | \"location\";\n\nexport type NavigationMenuActivationMode =\n  \"click\" | \"hover\" | \"focus\" | \"manual\";\n\nexport type NavigationMenuMotionPreset =\n  \"none\" | \"subtle\" | \"standard\" | \"expressive\";\n\nexport type NavigationMenuMotionDirection =\n  \"from-start\" | \"from-end\" | \"to-start\" | \"to-end\";\n\nexport interface NavigationMenuProps extends Omit<\n  HTMLAttributes<HTMLElement>,\n  \"defaultValue\"\n> {\n  variant?: NavigationMenuVariant;\n  size?: NavigationMenuSize;\n  orientation?: NavigationMenuOrientation;\n  value?: string | null;\n  defaultValue?: string | null;\n  onValueChange?: (value: string | null) => void;\n  activationMode?: NavigationMenuActivationMode;\n  delay?: number;\n  closeDelay?: number;\n  motion?: NavigationMenuMotionPreset;\n}\n\nexport type NavigationMenuListProps = HTMLAttributes<HTMLUListElement>;\n\nexport interface NavigationMenuItemProps extends LiHTMLAttributes<HTMLLIElement> {\n  value?: string;\n}\n\nexport interface NavigationMenuTriggerProps extends ButtonHTMLAttributes<HTMLButtonElement> {\n  showChevron?: boolean;\n}\n\nexport type NavigationMenuContentProps = HTMLAttributes<HTMLDivElement>;\n\nexport type NavigationMenuViewportProps = HTMLAttributes<HTMLDivElement>;\n\nexport type NavigationMenuIndicatorProps = LiHTMLAttributes<HTMLLIElement>;\n\nexport type NavigationMenuSectionProps = HTMLAttributes<HTMLDivElement>;\n\nexport type NavigationMenuLabelProps = HTMLAttributes<HTMLDivElement>;\n\nexport type NavigationMenuDescriptionProps =\n  HTMLAttributes<HTMLParagraphElement>;\n\nexport interface NavigationMenuSeparatorProps extends HTMLAttributes<HTMLDivElement> {\n  orientation?: NavigationMenuOrientation;\n}\n\ntype NavigationMenuLinkBaseProps = {\n  asChild?: boolean;\n  current?: NavigationMenuCurrent;\n  disabled?: boolean;\n  external?: boolean;\n  icon?: ReactNode;\n};\n\ntype NativeNavigationMenuLinkProps = Omit<\n  AnchorHTMLAttributes<HTMLAnchorElement>,\n  \"children\" | \"href\"\n> &\n  NavigationMenuLinkBaseProps & {\n    asChild?: false;\n    href: string;\n    children: ReactNode;\n  };\n\ntype ChildNavigationMenuLinkProps = Omit<\n  AnchorHTMLAttributes<HTMLAnchorElement>,\n  \"children\" | \"href\"\n> &\n  NavigationMenuLinkBaseProps & {\n    asChild: true;\n    href?: string;\n    children: ReactElement<NavigationMenuLinkSlotProps>;\n  };\n\nexport type NavigationMenuLinkProps =\n  NativeNavigationMenuLinkProps | ChildNavigationMenuLinkProps;\n\ntype NavigationMenuFeaturedItemBaseProps = {\n  asChild?: boolean;\n  disabled?: boolean;\n  external?: boolean;\n};\n\ntype NativeNavigationMenuFeaturedItemProps = Omit<\n  AnchorHTMLAttributes<HTMLAnchorElement>,\n  \"children\" | \"href\"\n> &\n  NavigationMenuFeaturedItemBaseProps & {\n    asChild?: false;\n    href: string;\n    children: ReactNode;\n  };\n\ntype ChildNavigationMenuFeaturedItemProps = Omit<\n  AnchorHTMLAttributes<HTMLAnchorElement>,\n  \"children\" | \"href\"\n> &\n  NavigationMenuFeaturedItemBaseProps & {\n    asChild: true;\n    href?: string;\n    children: ReactElement<NavigationMenuLinkSlotProps>;\n  };\n\nexport type NavigationMenuFeaturedItemProps =\n  NativeNavigationMenuFeaturedItemProps | ChildNavigationMenuFeaturedItemProps;\n\ntype NavigationMenuLinkSlotProps = Record<string, unknown> & {\n  children?: ReactNode;\n  className?: string;\n  href?: string;\n  onClick?: MouseEventHandler<HTMLElement>;\n  ref?: Ref<HTMLElement>;\n  rel?: string;\n  target?: AnchorHTMLAttributes<HTMLAnchorElement>[\"target\"];\n  \"aria-current\"?: AnchorHTMLAttributes<HTMLAnchorElement>[\"aria-current\"];\n  \"aria-disabled\"?: AnchorHTMLAttributes<HTMLAnchorElement>[\"aria-disabled\"];\n};\n\ntype NavigationMenuMotionDirectionState = {\n  enter: NavigationMenuMotionDirection | null;\n  exit: NavigationMenuMotionDirection | null;\n};\n\ntype NavigationMenuContextValue = {\n  variant: NavigationMenuVariant;\n  size: NavigationMenuSize;\n  orientation: NavigationMenuOrientation;\n  activationMode: NavigationMenuActivationMode;\n  motionPreset: NavigationMenuMotionPreset;\n  motionDirection: NavigationMenuMotionDirectionState;\n  openValue: string | null;\n  open: (value: string) => void;\n  close: () => void;\n  toggle: (value: string) => void;\n  scheduleOpen: (value: string) => void;\n  scheduleClose: () => void;\n  cancelScheduledOpen: () => void;\n  cancelScheduledClose: () => void;\n  registerTrigger: (value: string, element: HTMLButtonElement | null) => void;\n  registerItem: (value: string) => () => void;\n  viewportElement: HTMLDivElement | null;\n  setViewportElement: (element: HTMLDivElement | null) => void;\n};\n\nconst defaultNavigationMenuContext: NavigationMenuContextValue = {\n  variant: \"default\",\n  size: \"md\",\n  orientation: \"horizontal\",\n  activationMode: \"click\",\n  motionPreset: \"standard\",\n  motionDirection: { enter: null, exit: null },\n  openValue: null,\n  open: () => undefined,\n  close: () => undefined,\n  toggle: () => undefined,\n  scheduleOpen: () => undefined,\n  scheduleClose: () => undefined,\n  cancelScheduledOpen: () => undefined,\n  cancelScheduledClose: () => undefined,\n  registerTrigger: () => undefined,\n  registerItem: () => () => undefined,\n  viewportElement: null,\n  setViewportElement: () => undefined,\n};\n\nconst NavigationMenuContext = createContext<NavigationMenuContextValue>(\n  defaultNavigationMenuContext,\n);\n\nfunction useNavigationMenuContext() {\n  return useContext(NavigationMenuContext);\n}\n\ntype NavigationMenuItemContextValue = {\n  value: string;\n  contentId: string;\n  open: boolean;\n};\n\nconst NavigationMenuItemContext =\n  createContext<NavigationMenuItemContextValue | null>(null);\n\nconst NavigationMenuPanelContext = createContext(false);\n\nconst navigationMenuBaseClasses = \"relative max-w-full\";\n\nconst navigationMenuOrientationClasses: Record<\n  NavigationMenuOrientation,\n  string\n> = {\n  horizontal: \"flex items-center\",\n  vertical: \"flex flex-col items-stretch\",\n};\n\nconst navigationMenuListBaseClasses =\n  \"relative m-0 flex list-none gap-[var(--dt-space-1)] p-0\";\n\nconst navigationMenuListOrientationClasses: Record<\n  NavigationMenuOrientation,\n  string\n> = {\n  horizontal: \"flex-row items-center\",\n  vertical: \"w-full flex-col items-stretch\",\n};\n\nconst navigationMenuItemBaseClasses = \"relative flex\";\n\nconst navigationMenuLinkBaseClasses =\n  \"relative inline-flex select-none items-center gap-[var(--dt-space-2)] whitespace-nowrap text-start font-medium transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background data-[disabled=true]:pointer-events-none data-[disabled=true]:opacity-50\";\n\nconst navigationMenuLinkVariantClasses: Record<NavigationMenuVariant, string> =\n  {\n    default:\n      \"rounded-md text-muted-foreground hover:bg-muted hover:text-foreground active:bg-muted/80 data-[current=true]:bg-muted data-[current=true]:font-semibold data-[current=true]:text-foreground\",\n    quiet:\n      \"rounded-md text-muted-foreground hover:text-foreground active:text-foreground data-[current=true]:font-semibold data-[current=true]:text-foreground\",\n    underline:\n      \"rounded-none border-b-2 border-transparent text-muted-foreground hover:border-border hover:text-foreground data-[current=true]:border-primary data-[current=true]:text-foreground\",\n  };\n\nconst navigationMenuLinkSizeClasses: Record<NavigationMenuSize, string> = {\n  sm: \"h-8 px-[var(--dt-space-2)] text-sm\",\n  md: \"h-density-control px-[var(--dt-space-3)] text-sm\",\n  lg: \"h-11 px-[var(--dt-space-4)] text-base\",\n};\n\nconst navigationMenuPanelLinkBaseClasses =\n  \"relative flex w-full min-w-40 select-none items-start gap-[var(--dt-space-2)] rounded-sm px-[var(--dt-space-2)] py-[var(--dt-space-1-5)] text-sm leading-5 font-medium text-foreground no-underline outline-none transition-colors hover:bg-muted active:bg-muted/80 focus-visible:ring-2 focus-visible:ring-ring data-[current=true]:bg-muted data-[current=true]:font-semibold data-[disabled=true]:pointer-events-none data-[disabled=true]:opacity-50\";\n\nconst navigationMenuLinkIconClasses =\n  \"flex size-4 shrink-0 items-center justify-center text-muted-foreground [&>svg]:size-4\";\n\nconst navigationMenuLinkTextClasses =\n  \"flex min-w-0 flex-col gap-[var(--dt-space-0-5)]\";\n\nconst navigationMenuTriggerBaseClasses =\n  \"group/navigation-menu-trigger cursor-pointer border-transparent bg-transparent disabled:pointer-events-none disabled:opacity-50\";\n\nconst navigationMenuTriggerVariantClasses: Record<\n  NavigationMenuVariant,\n  string\n> = {\n  default: \"data-[state=open]:bg-muted data-[state=open]:text-foreground\",\n  quiet: \"data-[state=open]:text-foreground\",\n  underline:\n    \"data-[state=open]:border-border data-[state=open]:text-foreground\",\n};\n\nconst navigationMenuTriggerChevronClasses =\n  \"size-3 shrink-0 transition-transform duration-200 group-data-[state=open]/navigation-menu-trigger:rotate-180 motion-reduce:transition-none\";\n\nconst navigationMenuContentBaseClasses =\n  \"flex w-max min-w-48 max-w-[min(var(--dt-navigation-menu-content-max-width,40rem),calc(100vw_-_var(--dt-space-4)))] items-start gap-[var(--dt-space-4)] p-[var(--dt-space-3)] text-foreground\";\n\nconst navigationMenuContentSurfaceClasses =\n  \"rounded-md border border-border bg-background shadow-lg\";\n\nconst navigationMenuContentInlineClasses: Record<\n  NavigationMenuOrientation,\n  string\n> = {\n  horizontal: \"absolute start-0 top-full z-50 mt-[var(--dt-space-2)]\",\n  vertical: \"absolute start-full top-0 z-50 ms-[var(--dt-space-2)]\",\n};\n\nconst navigationMenuContentViewportClasses = \"col-start-1 row-start-1\";\n\nconst navigationMenuContentMotionPresetClasses: Record<\n  NavigationMenuMotionPreset,\n  string\n> = {\n  none: \"\",\n  subtle:\n    \"[--dt-nav-motion-from-x:0px] [--dt-nav-motion-from-y:0px] [--dt-nav-motion-to-x:0px] [--dt-nav-motion-to-y:0px] motion-safe:data-[state=open]:animate-nav-slide-in motion-safe:data-[state=closed]:animate-nav-slide-out motion-reduce:animate-none\",\n  standard:\n    \"motion-safe:data-[state=open]:animate-nav-slide-in motion-safe:data-[state=closed]:animate-nav-slide-out motion-reduce:animate-none data-[motion=from-start]:[--dt-nav-motion-from-x:calc(var(--dt-space-4)*-1)] data-[motion=from-start]:[--dt-nav-motion-from-y:0px] data-[motion=from-end]:[--dt-nav-motion-from-x:var(--dt-space-4)] data-[motion=from-end]:[--dt-nav-motion-from-y:0px] data-[motion=to-start]:[--dt-nav-motion-to-x:calc(var(--dt-space-4)*-1)] data-[motion=to-start]:[--dt-nav-motion-to-y:0px] data-[motion=to-end]:[--dt-nav-motion-to-x:var(--dt-space-4)] data-[motion=to-end]:[--dt-nav-motion-to-y:0px] rtl:data-[motion=from-start]:[--dt-nav-motion-from-x:var(--dt-space-4)] rtl:data-[motion=from-end]:[--dt-nav-motion-from-x:calc(var(--dt-space-4)*-1)] rtl:data-[motion=to-start]:[--dt-nav-motion-to-x:var(--dt-space-4)] rtl:data-[motion=to-end]:[--dt-nav-motion-to-x:calc(var(--dt-space-4)*-1)]\",\n  expressive:\n    \"motion-safe:data-[state=open]:animate-nav-slide-in motion-safe:data-[state=closed]:animate-nav-slide-out motion-reduce:animate-none data-[motion=from-start]:[--dt-nav-motion-from-x:calc(var(--dt-space-4)*-1)] data-[motion=from-start]:[--dt-nav-motion-from-y:0px] data-[motion=from-end]:[--dt-nav-motion-from-x:var(--dt-space-4)] data-[motion=from-end]:[--dt-nav-motion-from-y:0px] data-[motion=to-start]:[--dt-nav-motion-to-x:calc(var(--dt-space-4)*-1)] data-[motion=to-start]:[--dt-nav-motion-to-y:0px] data-[motion=to-end]:[--dt-nav-motion-to-x:var(--dt-space-4)] data-[motion=to-end]:[--dt-nav-motion-to-y:0px] rtl:data-[motion=from-start]:[--dt-nav-motion-from-x:var(--dt-space-4)] rtl:data-[motion=from-end]:[--dt-nav-motion-from-x:calc(var(--dt-space-4)*-1)] rtl:data-[motion=to-start]:[--dt-nav-motion-to-x:var(--dt-space-4)] rtl:data-[motion=to-end]:[--dt-nav-motion-to-x:calc(var(--dt-space-4)*-1)]\",\n};\n\nconst navigationMenuViewportBaseClasses =\n  \"pointer-events-none absolute inset-x-0 top-full z-50 mt-[var(--dt-space-2)] flex justify-center\";\n\nconst navigationMenuViewportBodyClasses =\n  \"pointer-events-auto relative grid overflow-hidden rounded-md border border-border bg-background shadow-lg transition-[width,height] duration-200 ease-out motion-reduce:transition-none data-[state=closed]:hidden\";\n\nconst navigationMenuIndicatorBaseClasses =\n  \"pointer-events-none absolute z-0 rounded-full bg-primary transition-[transform,width,height,opacity] duration-200 ease-out motion-reduce:transition-none data-[state=hidden]:opacity-0\";\n\nconst navigationMenuIndicatorOrientationClasses: Record<\n  NavigationMenuOrientation,\n  string\n> = {\n  horizontal: \"bottom-0 left-0 h-0.5\",\n  vertical: \"start-0 top-0 w-0.5\",\n};\n\nconst navigationMenuSectionBaseClasses =\n  \"flex min-w-40 flex-col gap-[var(--dt-space-0-5)]\";\n\nconst navigationMenuLabelBaseClasses =\n  \"px-[var(--dt-space-2)] py-[var(--dt-space-1-5)] text-xs font-semibold uppercase tracking-normal text-muted-foreground\";\n\nconst navigationMenuDescriptionBaseClasses =\n  \"text-xs font-normal leading-5 text-muted-foreground\";\n\nconst navigationMenuSeparatorBaseClasses = \"shrink-0 bg-border\";\n\nconst navigationMenuSeparatorOrientationClasses: Record<\n  NavigationMenuOrientation,\n  string\n> = {\n  horizontal: \"my-[var(--dt-space-1)] h-px w-full\",\n  vertical: \"mx-[var(--dt-space-1)] w-px self-stretch\",\n};\n\nconst navigationMenuFeaturedItemBaseClasses =\n  \"relative flex min-h-28 w-56 select-none flex-col justify-end gap-[var(--dt-space-1)] overflow-hidden rounded-md border border-border bg-muted p-[var(--dt-space-3)] text-sm font-semibold text-foreground no-underline outline-none transition-colors hover:bg-muted/80 focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background data-[disabled=true]:pointer-events-none data-[disabled=true]:opacity-50\";\n\nexport function navigationMenuClassNames({\n  orientation = \"horizontal\",\n  className,\n}: Pick<NavigationMenuProps, \"orientation\" | \"className\"> = {}) {\n  return cn(\n    navigationMenuBaseClasses,\n    navigationMenuOrientationClasses[orientation],\n    className,\n  );\n}\n\nexport function navigationMenuListClassNames({\n  orientation = \"horizontal\",\n  className,\n}: {\n  orientation?: NavigationMenuOrientation;\n  className?: string;\n} = {}) {\n  return cn(\n    navigationMenuListBaseClasses,\n    navigationMenuListOrientationClasses[orientation],\n    className,\n  );\n}\n\nexport function navigationMenuItemClassNames({\n  className,\n}: Pick<NavigationMenuItemProps, \"className\"> = {}) {\n  return cn(navigationMenuItemBaseClasses, className);\n}\n\nexport function navigationMenuLinkClassNames({\n  variant = \"default\",\n  size = \"md\",\n  className,\n}: {\n  variant?: NavigationMenuVariant;\n  size?: NavigationMenuSize;\n  className?: string;\n} = {}) {\n  return cn(\n    navigationMenuLinkBaseClasses,\n    navigationMenuLinkSizeClasses[size],\n    navigationMenuLinkVariantClasses[variant],\n    className,\n  );\n}\n\nexport function navigationMenuPanelLinkClassNames({\n  className,\n}: {\n  className?: string;\n} = {}) {\n  return cn(navigationMenuPanelLinkBaseClasses, className);\n}\n\nexport function navigationMenuTriggerClassNames({\n  variant = \"default\",\n  size = \"md\",\n  className,\n}: {\n  variant?: NavigationMenuVariant;\n  size?: NavigationMenuSize;\n  className?: string;\n} = {}) {\n  return cn(\n    navigationMenuLinkBaseClasses,\n    navigationMenuLinkSizeClasses[size],\n    navigationMenuLinkVariantClasses[variant],\n    navigationMenuTriggerBaseClasses,\n    navigationMenuTriggerVariantClasses[variant],\n    className,\n  );\n}\n\nexport function navigationMenuContentClassNames({\n  orientation = \"horizontal\",\n  inline = true,\n  motionPreset = \"standard\",\n  className,\n}: {\n  orientation?: NavigationMenuOrientation;\n  inline?: boolean;\n  motionPreset?: NavigationMenuMotionPreset;\n  className?: string;\n} = {}) {\n  return cn(\n    navigationMenuContentBaseClasses,\n    inline\n      ? cn(\n          navigationMenuContentSurfaceClasses,\n          navigationMenuContentInlineClasses[orientation],\n        )\n      : navigationMenuContentViewportClasses,\n    navigationMenuContentMotionPresetClasses[motionPreset],\n    className,\n  );\n}\n\nexport function navigationMenuViewportClassNames({\n  className,\n}: {\n  className?: string;\n} = {}) {\n  return cn(navigationMenuViewportBaseClasses, className);\n}\n\nexport function navigationMenuViewportBodyClassNames({\n  className,\n}: {\n  className?: string;\n} = {}) {\n  return cn(navigationMenuViewportBodyClasses, className);\n}\n\nexport function navigationMenuIndicatorClassNames({\n  orientation = \"horizontal\",\n  className,\n}: {\n  orientation?: NavigationMenuOrientation;\n  className?: string;\n} = {}) {\n  return cn(\n    navigationMenuIndicatorBaseClasses,\n    navigationMenuIndicatorOrientationClasses[orientation],\n    className,\n  );\n}\n\nexport function navigationMenuSectionClassNames({\n  className,\n}: Pick<NavigationMenuSectionProps, \"className\"> = {}) {\n  return cn(navigationMenuSectionBaseClasses, className);\n}\n\nexport function navigationMenuLabelClassNames({\n  className,\n}: Pick<NavigationMenuLabelProps, \"className\"> = {}) {\n  return cn(navigationMenuLabelBaseClasses, className);\n}\n\nexport function navigationMenuDescriptionClassNames({\n  className,\n}: Pick<NavigationMenuDescriptionProps, \"className\"> = {}) {\n  return cn(navigationMenuDescriptionBaseClasses, className);\n}\n\nexport function navigationMenuSeparatorClassNames({\n  orientation = \"horizontal\",\n  className,\n}: Pick<NavigationMenuSeparatorProps, \"orientation\" | \"className\"> = {}) {\n  return cn(\n    navigationMenuSeparatorBaseClasses,\n    navigationMenuSeparatorOrientationClasses[orientation],\n    className,\n  );\n}\n\nexport function navigationMenuFeaturedItemClassNames({\n  className,\n}: {\n  className?: string;\n} = {}) {\n  return cn(navigationMenuFeaturedItemBaseClasses, className);\n}\n\nfunction setRef<T>(ref: Ref<T> | undefined, node: T | null) {\n  if (typeof ref === \"function\") {\n    ref(node);\n    return;\n  }\n\n  if (ref) {\n    ref.current = node;\n  }\n}\n\nfunction composeRefs<T>(...refs: Array<Ref<T> | undefined>) {\n  return (node: T | null) => {\n    for (const ref of refs) {\n      setRef(ref, node);\n    }\n  };\n}\n\nfunction composeClickHandlers(\n  componentHandler: MouseEventHandler<HTMLElement>,\n  childHandler: MouseEventHandler<HTMLElement> | undefined,\n) {\n  return (event: React.MouseEvent<HTMLElement>) => {\n    componentHandler(event);\n\n    if (!event.defaultPrevented) {\n      childHandler?.(event);\n    }\n  };\n}\n\nfunction getChildRef(child: ReactElement<NavigationMenuLinkSlotProps>) {\n  return child.props.ref;\n}\n\nfunction mergeRel(\n  rel: string | undefined,\n  target: AnchorHTMLAttributes<HTMLAnchorElement>[\"target\"] | undefined,\n  external: boolean,\n) {\n  if (!external && target !== \"_blank\") {\n    return rel;\n  }\n\n  const tokens = new Set((rel ?? \"\").split(/\\s+/).filter(Boolean));\n  tokens.add(\"noopener\");\n\n  if (external) {\n    tokens.add(\"noreferrer\");\n  }\n\n  return Array.from(tokens).join(\" \");\n}\n\nfunction resolveAriaCurrent(\n  ariaCurrent: AnchorHTMLAttributes<HTMLAnchorElement>[\"aria-current\"],\n  current: NavigationMenuCurrent | undefined,\n) {\n  if (ariaCurrent !== undefined) {\n    return ariaCurrent;\n  }\n\n  if (current === true) {\n    return \"page\" as const;\n  }\n\n  if (current === \"page\" || current === \"location\") {\n    return current;\n  }\n\n  return undefined;\n}\n\nfunction hasCurrentState(\n  ariaCurrent: AnchorHTMLAttributes<HTMLAnchorElement>[\"aria-current\"],\n) {\n  return (\n    ariaCurrent !== undefined &&\n    ariaCurrent !== false &&\n    ariaCurrent !== \"false\"\n  );\n}\n\nfunction renderLinkContent({\n  children,\n  icon,\n  inPanel,\n}: {\n  children: ReactNode;\n  icon: ReactNode;\n  inPanel: boolean;\n}) {\n  if (!icon && !inPanel) {\n    return children;\n  }\n\n  return (\n    <>\n      {icon ? (\n        <span\n          aria-hidden=\"true\"\n          data-slot=\"navigation-menu-link-icon\"\n          className={cn(\n            navigationMenuLinkIconClasses,\n            // Panel links align to the first text line; bar links center.\n            inPanel && \"mt-0.5\",\n          )}\n        >\n          {icon}\n        </span>\n      ) : null}\n      {inPanel ? (\n        <span\n          data-slot=\"navigation-menu-link-text\"\n          className={navigationMenuLinkTextClasses}\n        >\n          {children}\n        </span>\n      ) : (\n        children\n      )}\n    </>\n  );\n}\n\nfunction usePresence(open: boolean) {\n  const [exitPresent, setExitPresent] = useState(open);\n  const nodeRef = useRef<HTMLDivElement | null>(null);\n\n  useEffect(() => {\n    if (open) {\n      // eslint-disable-next-line react-hooks/set-state-in-effect -- Presence tracks committed open content so CSS exit animations can finish before unmounting.\n      setExitPresent(true);\n      return undefined;\n    }\n\n    const node = nodeRef.current;\n\n    if (!node || typeof window === \"undefined\") {\n      setExitPresent(false);\n      return undefined;\n    }\n\n    const { animationName } = window.getComputedStyle(node);\n\n    if (!animationName || animationName === \"none\") {\n      setExitPresent(false);\n      return undefined;\n    }\n\n    let finished = false;\n    const finish = () => {\n      if (!finished) {\n        finished = true;\n        setExitPresent(false);\n      }\n    };\n    const handleAnimationEnd = (event: AnimationEvent) => {\n      if (event.target === node) {\n        finish();\n      }\n    };\n    const fallback = window.setTimeout(finish, 300);\n\n    node.addEventListener(\"animationend\", handleAnimationEnd);\n    node.addEventListener(\"animationcancel\", handleAnimationEnd);\n\n    return () => {\n      window.clearTimeout(fallback);\n      node.removeEventListener(\"animationend\", handleAnimationEnd);\n      node.removeEventListener(\"animationcancel\", handleAnimationEnd);\n    };\n  }, [open]);\n\n  return { present: open || exitPresent, nodeRef };\n}\n\nfunction TriggerChevron() {\n  return (\n    <svg\n      aria-hidden=\"true\"\n      data-slot=\"navigation-menu-trigger-icon\"\n      className={navigationMenuTriggerChevronClasses}\n      fill=\"none\"\n      viewBox=\"0 0 12 12\"\n    >\n      <path\n        d=\"m3 4.5 3 3 3-3\"\n        stroke=\"currentColor\"\n        strokeLinecap=\"round\"\n        strokeLinejoin=\"round\"\n        strokeWidth=\"1.5\"\n      />\n    </svg>\n  );\n}\n\nexport const NavigationMenu = forwardRef<HTMLElement, NavigationMenuProps>(\n  (\n    {\n      \"aria-label\": ariaLabel,\n      \"aria-labelledby\": ariaLabelledby,\n      activationMode = \"click\",\n      children,\n      className,\n      closeDelay = 300,\n      defaultValue = null,\n      delay = 150,\n      motion = \"standard\",\n      onBlur,\n      onKeyDown,\n      onPointerDown,\n      onValueChange,\n      orientation = \"horizontal\",\n      size = \"md\",\n      value,\n      variant = \"default\",\n      ...props\n    },\n    ref,\n  ) => {\n    const [uncontrolledValue, setUncontrolledValue] = useState<string | null>(\n      defaultValue,\n    );\n    const isControlled = value !== undefined;\n    const openValue = isControlled ? value : uncontrolledValue;\n    const openValueRef = useRef(openValue);\n    const rootRef = useRef<HTMLElement | null>(null);\n    const triggerElementsRef = useRef(new Map<string, HTMLButtonElement>());\n    const itemOrderRef = useRef<string[]>([]);\n    const openTimerRef = useRef<number | null>(null);\n    const closeTimerRef = useRef<number | null>(null);\n    const pointerDownInsideRef = useRef(false);\n    const [viewportElement, setViewportElement] =\n      useState<HTMLDivElement | null>(null);\n    const [motionDirection, setMotionDirection] =\n      useState<NavigationMenuMotionDirectionState>({ enter: null, exit: null });\n\n    useEffect(() => {\n      openValueRef.current = openValue;\n    }, [openValue]);\n\n    const cancelScheduledOpen = useCallback(() => {\n      if (openTimerRef.current !== null) {\n        window.clearTimeout(openTimerRef.current);\n        openTimerRef.current = null;\n      }\n    }, []);\n\n    const cancelScheduledClose = useCallback(() => {\n      if (closeTimerRef.current !== null) {\n        window.clearTimeout(closeTimerRef.current);\n        closeTimerRef.current = null;\n      }\n    }, []);\n\n    const setOpenValue = useCallback(\n      (next: string | null) => {\n        cancelScheduledOpen();\n        cancelScheduledClose();\n\n        const previous = openValueRef.current;\n\n        if (next === previous) {\n          return;\n        }\n\n        let direction: NavigationMenuMotionDirectionState = {\n          enter: null,\n          exit: null,\n        };\n\n        if (previous !== null && next !== null) {\n          const order = itemOrderRef.current;\n          const previousIndex = order.indexOf(previous);\n          const nextIndex = order.indexOf(next);\n\n          if (\n            previousIndex !== -1 &&\n            nextIndex !== -1 &&\n            previousIndex !== nextIndex\n          ) {\n            const forward = nextIndex > previousIndex;\n\n            direction = {\n              enter: forward ? \"from-end\" : \"from-start\",\n              exit: forward ? \"to-start\" : \"to-end\",\n            };\n          }\n        }\n\n        setMotionDirection(direction);\n        openValueRef.current = next;\n\n        if (!isControlled) {\n          setUncontrolledValue(next);\n        }\n\n        onValueChange?.(next);\n      },\n      [cancelScheduledClose, cancelScheduledOpen, isControlled, onValueChange],\n    );\n\n    const registerItem = useCallback((itemValue: string) => {\n      itemOrderRef.current.push(itemValue);\n\n      return () => {\n        itemOrderRef.current = itemOrderRef.current.filter(\n          (existing) => existing !== itemValue,\n        );\n      };\n    }, []);\n\n    const scheduleOpen = useCallback(\n      (nextValue: string) => {\n        cancelScheduledClose();\n        cancelScheduledOpen();\n        openTimerRef.current = window.setTimeout(() => {\n          openTimerRef.current = null;\n          setOpenValue(nextValue);\n        }, delay);\n      },\n      [cancelScheduledClose, cancelScheduledOpen, delay, setOpenValue],\n    );\n\n    const scheduleClose = useCallback(() => {\n      cancelScheduledClose();\n      closeTimerRef.current = window.setTimeout(() => {\n        closeTimerRef.current = null;\n        setOpenValue(null);\n      }, closeDelay);\n    }, [cancelScheduledClose, closeDelay, setOpenValue]);\n\n    useEffect(() => {\n      return () => {\n        if (openTimerRef.current !== null) {\n          window.clearTimeout(openTimerRef.current);\n        }\n\n        if (closeTimerRef.current !== null) {\n          window.clearTimeout(closeTimerRef.current);\n        }\n      };\n    }, []);\n\n    useEffect(() => {\n      if (openValue === null || activationMode === \"manual\") {\n        return undefined;\n      }\n\n      const handleDocumentPointerDown = (event: PointerEvent) => {\n        const root = rootRef.current;\n\n        if (\n          root &&\n          event.target instanceof Node &&\n          !root.contains(event.target)\n        ) {\n          setOpenValue(null);\n        }\n      };\n\n      document.addEventListener(\"pointerdown\", handleDocumentPointerDown);\n\n      return () => {\n        document.removeEventListener(\"pointerdown\", handleDocumentPointerDown);\n      };\n    }, [activationMode, openValue, setOpenValue]);\n\n    const registerTrigger = useCallback(\n      (triggerValue: string, element: HTMLButtonElement | null) => {\n        if (element) {\n          triggerElementsRef.current.set(triggerValue, element);\n          return;\n        }\n\n        triggerElementsRef.current.delete(triggerValue);\n      },\n      [],\n    );\n\n    const handleKeyDown: KeyboardEventHandler<HTMLElement> = (event) => {\n      onKeyDown?.(event);\n\n      if (event.defaultPrevented || activationMode === \"manual\") {\n        return;\n      }\n\n      if (event.key === \"Escape\" && openValueRef.current !== null) {\n        const trigger = triggerElementsRef.current.get(openValueRef.current);\n\n        setOpenValue(null);\n        trigger?.focus();\n        event.preventDefault();\n      }\n    };\n\n    const handlePointerDown: PointerEventHandler<HTMLElement> = (event) => {\n      onPointerDown?.(event);\n      pointerDownInsideRef.current = true;\n      window.setTimeout(() => {\n        pointerDownInsideRef.current = false;\n      }, 0);\n    };\n\n    const handleBlur: FocusEventHandler<HTMLElement> = (event) => {\n      onBlur?.(event);\n\n      if (activationMode === \"manual\" || openValueRef.current === null) {\n        return;\n      }\n\n      if (pointerDownInsideRef.current) {\n        return;\n      }\n\n      const nextFocused = event.relatedTarget as Node | null;\n\n      if (!nextFocused || !event.currentTarget.contains(nextFocused)) {\n        setOpenValue(null);\n      }\n    };\n\n    const contextValue = useMemo<NavigationMenuContextValue>(\n      () => ({\n        variant,\n        size,\n        orientation,\n        activationMode,\n        motionPreset: motion,\n        motionDirection,\n        openValue,\n        open: (nextValue) => setOpenValue(nextValue),\n        close: () => setOpenValue(null),\n        toggle: (nextValue) =>\n          setOpenValue(openValueRef.current === nextValue ? null : nextValue),\n        scheduleOpen,\n        scheduleClose,\n        cancelScheduledOpen,\n        cancelScheduledClose,\n        registerTrigger,\n        registerItem,\n        viewportElement,\n        setViewportElement,\n      }),\n      [\n        activationMode,\n        cancelScheduledClose,\n        cancelScheduledOpen,\n        motion,\n        motionDirection,\n        openValue,\n        orientation,\n        registerItem,\n        registerTrigger,\n        scheduleClose,\n        scheduleOpen,\n        setOpenValue,\n        size,\n        variant,\n        viewportElement,\n      ],\n    );\n\n    const resolvedAriaLabel =\n      ariaLabel ?? (ariaLabelledby === undefined ? \"Main\" : undefined);\n\n    return (\n      // eslint-disable-next-line jsx-a11y/no-noninteractive-element-interactions -- Keyboard events delegate to the navigation’s roving links and triggers.\n      <nav\n        {...props}\n        ref={composeRefs(ref, rootRef)}\n        aria-label={resolvedAriaLabel}\n        aria-labelledby={ariaLabelledby}\n        data-slot=\"navigation-menu\"\n        data-variant={variant}\n        data-size={size}\n        data-orientation={orientation}\n        data-state={openValue !== null ? \"open\" : \"closed\"}\n        data-motion-preset={motion}\n        className={navigationMenuClassNames({ orientation, className })}\n        onBlur={handleBlur}\n        onKeyDown={handleKeyDown}\n        onPointerDown={handlePointerDown}\n      >\n        <NavigationMenuContext.Provider value={contextValue}>\n          {children}\n        </NavigationMenuContext.Provider>\n      </nav>\n    );\n  },\n);\n\nNavigationMenu.displayName = \"NavigationMenu\";\n\nexport const NavigationMenuList = forwardRef<\n  HTMLUListElement,\n  NavigationMenuListProps\n>(({ className, ...props }, ref) => {\n  const { orientation } = useNavigationMenuContext();\n\n  return (\n    <ul\n      {...props}\n      ref={ref}\n      data-slot=\"navigation-menu-list\"\n      data-orientation={orientation}\n      className={navigationMenuListClassNames({ orientation, className })}\n    />\n  );\n});\n\nNavigationMenuList.displayName = \"NavigationMenuList\";\n\nexport const NavigationMenuItem = forwardRef<\n  HTMLLIElement,\n  NavigationMenuItemProps\n>(\n  (\n    { children, className, onPointerEnter, onPointerLeave, value, ...props },\n    ref,\n  ) => {\n    const context = useNavigationMenuContext();\n    const autoValue = useId();\n    const itemValue = value ?? autoValue;\n    const contentId = useId();\n    const open = context.openValue === itemValue;\n    const { registerItem } = context;\n    const itemContextValue = useMemo<NavigationMenuItemContextValue>(\n      () => ({ value: itemValue, contentId, open }),\n      [contentId, itemValue, open],\n    );\n\n    useEffect(() => registerItem(itemValue), [itemValue, registerItem]);\n\n    const handlePointerEnter: PointerEventHandler<HTMLLIElement> = (event) => {\n      onPointerEnter?.(event);\n\n      if (context.activationMode === \"hover\") {\n        context.cancelScheduledClose();\n      }\n    };\n\n    const handlePointerLeave: PointerEventHandler<HTMLLIElement> = (event) => {\n      onPointerLeave?.(event);\n\n      if (context.activationMode === \"hover\") {\n        context.cancelScheduledOpen();\n\n        if (open) {\n          context.scheduleClose();\n        }\n      }\n    };\n\n    return (\n      <li\n        {...props}\n        ref={ref}\n        data-slot=\"navigation-menu-item\"\n        data-value={value}\n        data-state={open ? \"open\" : \"closed\"}\n        className={navigationMenuItemClassNames({ className })}\n        onPointerEnter={handlePointerEnter}\n        onPointerLeave={handlePointerLeave}\n      >\n        <NavigationMenuItemContext.Provider value={itemContextValue}>\n          {children}\n        </NavigationMenuItemContext.Provider>\n      </li>\n    );\n  },\n);\n\nNavigationMenuItem.displayName = \"NavigationMenuItem\";\n\nexport const NavigationMenuTrigger = forwardRef<\n  HTMLButtonElement,\n  NavigationMenuTriggerProps\n>(\n  (\n    {\n      children,\n      className,\n      disabled,\n      onClick,\n      onFocus,\n      onPointerEnter,\n      showChevron = true,\n      type = \"button\",\n      ...props\n    },\n    ref,\n  ) => {\n    const context = useNavigationMenuContext();\n    const itemContext = useContext(NavigationMenuItemContext);\n\n    if (!itemContext) {\n      throw new Error(\n        \"NavigationMenuTrigger must be used within a NavigationMenuItem.\",\n      );\n    }\n\n    const { contentId, open, value } = itemContext;\n\n    const handleClick: MouseEventHandler<HTMLButtonElement> = (event) => {\n      onClick?.(event);\n\n      if (\n        event.defaultPrevented ||\n        disabled ||\n        context.activationMode === \"manual\"\n      ) {\n        return;\n      }\n\n      context.toggle(value);\n    };\n\n    const handlePointerEnter: PointerEventHandler<HTMLButtonElement> = (\n      event,\n    ) => {\n      onPointerEnter?.(event);\n\n      if (disabled || context.activationMode !== \"hover\") {\n        return;\n      }\n\n      if (!open) {\n        context.scheduleOpen(value);\n      }\n    };\n\n    const handleFocus: FocusEventHandler<HTMLButtonElement> = (event) => {\n      onFocus?.(event);\n\n      if (disabled || context.activationMode !== \"focus\") {\n        return;\n      }\n\n      context.open(value);\n    };\n\n    return (\n      <button\n        {...props}\n        ref={composeRefs(ref, (node) => context.registerTrigger(value, node))}\n        type={type}\n        disabled={disabled}\n        aria-expanded={open}\n        aria-controls={open ? contentId : undefined}\n        data-slot=\"navigation-menu-trigger\"\n        data-variant={context.variant}\n        data-size={context.size}\n        data-state={open ? \"open\" : \"closed\"}\n        className={navigationMenuTriggerClassNames({\n          variant: context.variant,\n          size: context.size,\n          className,\n        })}\n        onClick={handleClick}\n        onFocus={handleFocus}\n        onPointerEnter={handlePointerEnter}\n      >\n        {children}\n        {showChevron ? <TriggerChevron /> : null}\n      </button>\n    );\n  },\n);\n\nNavigationMenuTrigger.displayName = \"NavigationMenuTrigger\";\n\nexport const NavigationMenuContent = forwardRef<\n  HTMLDivElement,\n  NavigationMenuContentProps\n>(({ children, className, ...props }, ref) => {\n  const context = useNavigationMenuContext();\n  const itemContext = useContext(NavigationMenuItemContext);\n  const open = itemContext?.open ?? false;\n  const { present, nodeRef } = usePresence(open);\n\n  if (!itemContext) {\n    throw new Error(\n      \"NavigationMenuContent must be used within a NavigationMenuItem.\",\n    );\n  }\n\n  if (!present) {\n    return null;\n  }\n\n  const { \"aria-hidden\": ariaHidden, inert, ...contentProps } = props;\n  const inline = context.viewportElement === null;\n  const motionAttr = open\n    ? context.motionDirection.enter\n    : context.motionDirection.exit;\n  const panel = (\n    <div\n      {...contentProps}\n      ref={composeRefs(ref, nodeRef)}\n      id={itemContext.contentId}\n      data-slot=\"navigation-menu-content\"\n      data-state={open ? \"open\" : \"closed\"}\n      data-orientation={context.orientation}\n      data-motion={motionAttr ?? undefined}\n      data-motion-preset={context.motionPreset}\n      aria-hidden={open ? ariaHidden : true}\n      inert={open ? inert : true}\n      className={navigationMenuContentClassNames({\n        orientation: context.orientation,\n        inline,\n        motionPreset: context.motionPreset,\n        className,\n      })}\n    >\n      <NavigationMenuPanelContext.Provider value={true}>\n        {children}\n      </NavigationMenuPanelContext.Provider>\n    </div>\n  );\n\n  if (!inline && context.viewportElement) {\n    return createPortal(panel, context.viewportElement);\n  }\n\n  return panel;\n});\n\nNavigationMenuContent.displayName = \"NavigationMenuContent\";\n\nexport const NavigationMenuViewport = forwardRef<\n  HTMLDivElement,\n  NavigationMenuViewportProps\n>(({ className, onPointerEnter, onPointerLeave, style, ...props }, ref) => {\n  const context = useNavigationMenuContext();\n  const open = context.openValue !== null;\n  const { openValue, setViewportElement } = context;\n  const bodyRef = useRef<HTMLDivElement | null>(null);\n  const [size, setSize] = useState<{ width: number; height: number } | null>(\n    null,\n  );\n  const composedBodyRef = useMemo(\n    () =>\n      composeRefs<HTMLDivElement>(bodyRef, (node) => setViewportElement(node)),\n    [setViewportElement],\n  );\n\n  useEffect(() => {\n    const body = bodyRef.current;\n\n    if (!body || openValue === null) {\n      setSize(null);\n      return undefined;\n    }\n\n    const measure = () => {\n      const panel = body.querySelector(\n        '[data-slot=\"navigation-menu-content\"][data-state=\"open\"]',\n      );\n\n      if (panel instanceof HTMLElement) {\n        setSize({ width: panel.offsetWidth, height: panel.offsetHeight });\n      }\n    };\n\n    measure();\n\n    if (typeof ResizeObserver === \"undefined\") {\n      return undefined;\n    }\n\n    const observer = new ResizeObserver(measure);\n    const panel = body.querySelector(\n      '[data-slot=\"navigation-menu-content\"][data-state=\"open\"]',\n    );\n\n    if (panel instanceof HTMLElement) {\n      observer.observe(panel);\n    }\n\n    return () => {\n      observer.disconnect();\n    };\n  }, [openValue]);\n\n  const handlePointerEnter: PointerEventHandler<HTMLDivElement> = (event) => {\n    onPointerEnter?.(event);\n\n    if (context.activationMode === \"hover\") {\n      context.cancelScheduledClose();\n    }\n  };\n\n  const handlePointerLeave: PointerEventHandler<HTMLDivElement> = (event) => {\n    onPointerLeave?.(event);\n\n    if (context.activationMode === \"hover\" && open) {\n      context.scheduleClose();\n    }\n  };\n\n  return (\n    <div\n      {...props}\n      ref={ref}\n      data-slot=\"navigation-menu-viewport\"\n      data-state={open ? \"open\" : \"closed\"}\n      className={navigationMenuViewportClassNames({ className })}\n      style={style}\n      onPointerEnter={handlePointerEnter}\n      onPointerLeave={handlePointerLeave}\n    >\n      <div\n        ref={composedBodyRef}\n        data-slot=\"navigation-menu-viewport-body\"\n        data-state={open ? \"open\" : \"closed\"}\n        className={navigationMenuViewportBodyClassNames()}\n        style={\n          size && context.motionPreset !== \"none\"\n            ? { width: size.width, height: size.height }\n            : undefined\n        }\n      />\n    </div>\n  );\n});\n\nNavigationMenuViewport.displayName = \"NavigationMenuViewport\";\n\nexport const NavigationMenuIndicator = forwardRef<\n  HTMLLIElement,\n  NavigationMenuIndicatorProps\n>(({ className, style, ...props }, ref) => {\n  const context = useNavigationMenuContext();\n  const { orientation } = context;\n  const localRef = useRef<HTMLLIElement | null>(null);\n  const lastStyleKeyRef = useRef(\"\");\n  const measureRef = useRef(() => {});\n  const [indicatorStyle, setIndicatorStyle] = useState<{\n    transform: string;\n    width?: string;\n    height?: string;\n  } | null>(null);\n\n  const applyIndicatorStyle = (\n    style: { transform: string; width?: string; height?: string } | null,\n  ) => {\n    const key = style\n      ? `${style.transform}|${style.width ?? \"\"}|${style.height ?? \"\"}`\n      : \"\";\n\n    if (key === lastStyleKeyRef.current) {\n      return;\n    }\n\n    lastStyleKeyRef.current = key;\n    setIndicatorStyle(style);\n  };\n\n  const measure = () => {\n    const node = localRef.current;\n    const list = node?.closest('[data-slot=\"navigation-menu-list\"]');\n\n    if (!node || !(list instanceof HTMLElement)) {\n      return;\n    }\n\n    const openTarget = list.querySelector(\n      ':scope > [data-slot=\"navigation-menu-item\"] > [data-slot=\"navigation-menu-trigger\"][data-state=\"open\"]',\n    );\n    const currentTarget = list.querySelector(\n      ':scope > [data-slot=\"navigation-menu-item\"] > [data-slot=\"navigation-menu-link\"][data-current=\"true\"]',\n    );\n    const target = openTarget ?? currentTarget;\n\n    if (!(target instanceof HTMLElement)) {\n      applyIndicatorStyle(null);\n      return;\n    }\n\n    const listRect = list.getBoundingClientRect();\n    const targetRect = target.getBoundingClientRect();\n\n    if (orientation === \"vertical\") {\n      applyIndicatorStyle({\n        transform: `translateY(${targetRect.top - listRect.top}px)`,\n        height: `${targetRect.height}px`,\n      });\n      return;\n    }\n\n    applyIndicatorStyle({\n      transform: `translateX(${targetRect.left - listRect.left}px)`,\n      width: `${targetRect.width}px`,\n    });\n  };\n\n  useEffect(() => {\n    measureRef.current = measure;\n    measure();\n  });\n\n  useEffect(() => {\n    const node = localRef.current;\n    const list = node?.closest('[data-slot=\"navigation-menu-list\"]');\n\n    if (\n      !(list instanceof HTMLElement) ||\n      typeof ResizeObserver === \"undefined\"\n    ) {\n      return undefined;\n    }\n\n    const observer = new ResizeObserver(() => measureRef.current());\n\n    observer.observe(list);\n\n    return () => {\n      observer.disconnect();\n    };\n  }, []);\n\n  return (\n    <li\n      {...props}\n      ref={composeRefs(ref, localRef)}\n      aria-hidden=\"true\"\n      data-slot=\"navigation-menu-indicator\"\n      data-state={indicatorStyle ? \"visible\" : \"hidden\"}\n      data-orientation={orientation}\n      className={navigationMenuIndicatorClassNames({ orientation, className })}\n      style={{ ...style, ...(indicatorStyle ?? {}) }}\n    />\n  );\n});\n\nNavigationMenuIndicator.displayName = \"NavigationMenuIndicator\";\n\nexport const NavigationMenuSection = forwardRef<\n  HTMLDivElement,\n  NavigationMenuSectionProps\n>(({ className, ...props }, ref) => (\n  <div\n    {...props}\n    ref={ref}\n    data-slot=\"navigation-menu-section\"\n    className={navigationMenuSectionClassNames({ className })}\n  />\n));\n\nNavigationMenuSection.displayName = \"NavigationMenuSection\";\n\nexport const NavigationMenuLabel = forwardRef<\n  HTMLDivElement,\n  NavigationMenuLabelProps\n>(({ className, ...props }, ref) => (\n  <div\n    {...props}\n    ref={ref}\n    data-slot=\"navigation-menu-label\"\n    className={navigationMenuLabelClassNames({ className })}\n  />\n));\n\nNavigationMenuLabel.displayName = \"NavigationMenuLabel\";\n\nexport const NavigationMenuDescription = forwardRef<\n  HTMLParagraphElement,\n  NavigationMenuDescriptionProps\n>(({ className, ...props }, ref) => (\n  <p\n    {...props}\n    ref={ref}\n    data-slot=\"navigation-menu-description\"\n    className={navigationMenuDescriptionClassNames({ className })}\n  />\n));\n\nNavigationMenuDescription.displayName = \"NavigationMenuDescription\";\n\nexport const NavigationMenuSeparator = forwardRef<\n  HTMLDivElement,\n  NavigationMenuSeparatorProps\n>(({ className, orientation = \"horizontal\", ...props }, ref) => (\n  <div\n    {...props}\n    ref={ref}\n    aria-hidden=\"true\"\n    data-slot=\"navigation-menu-separator\"\n    data-orientation={orientation}\n    className={navigationMenuSeparatorClassNames({ orientation, className })}\n  />\n));\n\nNavigationMenuSeparator.displayName = \"NavigationMenuSeparator\";\n\nexport const NavigationMenuLink = forwardRef<\n  HTMLAnchorElement,\n  NavigationMenuLinkProps\n>(\n  (\n    {\n      \"aria-current\": ariaCurrent,\n      asChild = false,\n      children,\n      className,\n      current,\n      disabled = false,\n      external = false,\n      href,\n      icon,\n      onClick,\n      rel,\n      target,\n      ...props\n    },\n    ref,\n  ) => {\n    const { variant, size } = useNavigationMenuContext();\n    const inPanel = useContext(NavigationMenuPanelContext);\n    const classes = inPanel\n      ? navigationMenuPanelLinkClassNames({ className })\n      : navigationMenuLinkClassNames({ variant, size, className });\n    const handleClick: MouseEventHandler<HTMLElement> = (event) => {\n      if (disabled) {\n        event.preventDefault();\n        return;\n      }\n\n      onClick?.(event as React.MouseEvent<HTMLAnchorElement>);\n    };\n\n    if (asChild) {\n      const child = Children.only(children);\n\n      if (!isValidElement<NavigationMenuLinkSlotProps>(child)) {\n        throw new Error(\n          \"NavigationMenuLink with asChild expects a single React element child.\",\n        );\n      }\n\n      const resolvedHref = child.props.href ?? href;\n      const resolvedTarget =\n        child.props.target ?? target ?? (external ? \"_blank\" : undefined);\n      const resolvedRel = mergeRel(\n        child.props.rel ?? rel,\n        resolvedTarget,\n        external,\n      );\n      const resolvedAriaCurrent = resolveAriaCurrent(\n        child.props[\"aria-current\"] ?? ariaCurrent,\n        current,\n      );\n      const isCurrent = hasCurrentState(resolvedAriaCurrent);\n      const clonedProps: NavigationMenuLinkSlotProps = {\n        ...props,\n        ...child.props,\n        ref: (node) => {\n          composeRefs(ref as Ref<HTMLElement>, getChildRef(child))(node);\n        },\n        \"data-slot\": \"navigation-menu-link\",\n        \"data-variant\": variant,\n        \"data-size\": size,\n        \"data-panel\": inPanel ? \"true\" : undefined,\n        \"data-current\": isCurrent ? \"true\" : undefined,\n        \"data-disabled\": disabled ? \"true\" : undefined,\n        \"data-external\": external ? \"true\" : undefined,\n        className: cn(classes, child.props.className),\n        onClick: composeClickHandlers(handleClick, child.props.onClick),\n      };\n\n      if (disabled) {\n        clonedProps[\"aria-disabled\"] = true;\n        clonedProps.href = undefined;\n      } else if (resolvedHref !== undefined) {\n        clonedProps.href = resolvedHref;\n      }\n\n      if (resolvedTarget !== undefined) {\n        clonedProps.target = resolvedTarget;\n      }\n\n      if (resolvedRel !== undefined) {\n        clonedProps.rel = resolvedRel;\n      }\n\n      if (resolvedAriaCurrent !== undefined) {\n        clonedProps[\"aria-current\"] = resolvedAriaCurrent;\n      }\n\n      if (!icon && !inPanel) {\n        // eslint-disable-next-line react-hooks/refs -- React forwards this ref during commit; createElement/cloneElement does not read ref.current.\n        return cloneElement(child, clonedProps);\n      }\n\n      return cloneElement(\n        child,\n        // eslint-disable-next-line react-hooks/refs -- React forwards this ref during commit; createElement/cloneElement does not read ref.current.\n        clonedProps,\n        renderLinkContent({ children: child.props.children, icon, inPanel }),\n      );\n    }\n\n    const resolvedTarget = target ?? (external ? \"_blank\" : undefined);\n    const resolvedAriaCurrent = resolveAriaCurrent(ariaCurrent, current);\n    const isCurrent = hasCurrentState(resolvedAriaCurrent);\n\n    return (\n      <a\n        {...props}\n        ref={ref as ForwardedRef<HTMLAnchorElement>}\n        href={disabled ? undefined : href}\n        target={resolvedTarget}\n        rel={mergeRel(rel, resolvedTarget, external)}\n        aria-current={resolvedAriaCurrent}\n        aria-disabled={disabled ? true : undefined}\n        data-slot=\"navigation-menu-link\"\n        data-variant={variant}\n        data-size={size}\n        data-panel={inPanel ? \"true\" : undefined}\n        data-current={isCurrent ? \"true\" : undefined}\n        data-disabled={disabled ? \"true\" : undefined}\n        data-external={external ? \"true\" : undefined}\n        className={classes}\n        onClick={handleClick as MouseEventHandler<HTMLAnchorElement>}\n      >\n        {renderLinkContent({ children, icon, inPanel })}\n      </a>\n    );\n  },\n);\n\nNavigationMenuLink.displayName = \"NavigationMenuLink\";\n\nexport const NavigationMenuFeaturedItem = forwardRef<\n  HTMLAnchorElement,\n  NavigationMenuFeaturedItemProps\n>(\n  (\n    {\n      asChild = false,\n      children,\n      className,\n      disabled = false,\n      external = false,\n      href,\n      onClick,\n      rel,\n      target,\n      ...props\n    },\n    ref,\n  ) => {\n    const classes = navigationMenuFeaturedItemClassNames({ className });\n    const handleClick: MouseEventHandler<HTMLElement> = (event) => {\n      if (disabled) {\n        event.preventDefault();\n        return;\n      }\n\n      onClick?.(event as React.MouseEvent<HTMLAnchorElement>);\n    };\n\n    if (asChild) {\n      const child = Children.only(children);\n\n      if (!isValidElement<NavigationMenuLinkSlotProps>(child)) {\n        throw new Error(\n          \"NavigationMenuFeaturedItem with asChild expects a single React element child.\",\n        );\n      }\n\n      const resolvedHref = child.props.href ?? href;\n      const resolvedTarget =\n        child.props.target ?? target ?? (external ? \"_blank\" : undefined);\n      const resolvedRel = mergeRel(\n        child.props.rel ?? rel,\n        resolvedTarget,\n        external,\n      );\n      const clonedProps: NavigationMenuLinkSlotProps = {\n        ...props,\n        ...child.props,\n        ref: (node) => {\n          composeRefs(ref as Ref<HTMLElement>, getChildRef(child))(node);\n        },\n        \"data-slot\": \"navigation-menu-featured-item\",\n        \"data-disabled\": disabled ? \"true\" : undefined,\n        \"data-external\": external ? \"true\" : undefined,\n        className: cn(classes, child.props.className),\n        onClick: composeClickHandlers(handleClick, child.props.onClick),\n      };\n\n      if (disabled) {\n        clonedProps[\"aria-disabled\"] = true;\n        clonedProps.href = undefined;\n      } else if (resolvedHref !== undefined) {\n        clonedProps.href = resolvedHref;\n      }\n\n      if (resolvedTarget !== undefined) {\n        clonedProps.target = resolvedTarget;\n      }\n\n      if (resolvedRel !== undefined) {\n        clonedProps.rel = resolvedRel;\n      }\n\n      // eslint-disable-next-line react-hooks/refs -- React forwards this ref during commit; createElement/cloneElement does not read ref.current.\n      return cloneElement(child, clonedProps);\n    }\n\n    const resolvedTarget = target ?? (external ? \"_blank\" : undefined);\n\n    return (\n      <a\n        {...props}\n        ref={ref as ForwardedRef<HTMLAnchorElement>}\n        href={disabled ? undefined : href}\n        target={resolvedTarget}\n        rel={mergeRel(rel, resolvedTarget, external)}\n        aria-disabled={disabled ? true : undefined}\n        data-slot=\"navigation-menu-featured-item\"\n        data-disabled={disabled ? \"true\" : undefined}\n        data-external={external ? \"true\" : undefined}\n        className={classes}\n        onClick={handleClick as MouseEventHandler<HTMLAnchorElement>}\n      >\n        {children}\n      </a>\n    );\n  },\n);\n\nNavigationMenuFeaturedItem.displayName = \"NavigationMenuFeaturedItem\";\n"
    },
    {
      "path": "packages/components/src/components/navigation-menu/index.ts",
      "type": "registry:file",
      "target": "~/components/dethink/components/navigation-menu/index.ts",
      "content": "export {\n  NavigationMenu,\n  NavigationMenuContent,\n  NavigationMenuDescription,\n  NavigationMenuFeaturedItem,\n  NavigationMenuIndicator,\n  NavigationMenuItem,\n  NavigationMenuLabel,\n  NavigationMenuLink,\n  NavigationMenuList,\n  NavigationMenuSection,\n  NavigationMenuSeparator,\n  NavigationMenuTrigger,\n  NavigationMenuViewport,\n  navigationMenuClassNames,\n  navigationMenuContentClassNames,\n  navigationMenuDescriptionClassNames,\n  navigationMenuFeaturedItemClassNames,\n  navigationMenuIndicatorClassNames,\n  navigationMenuItemClassNames,\n  navigationMenuLabelClassNames,\n  navigationMenuLinkClassNames,\n  navigationMenuListClassNames,\n  navigationMenuPanelLinkClassNames,\n  navigationMenuSectionClassNames,\n  navigationMenuSeparatorClassNames,\n  navigationMenuTriggerClassNames,\n  navigationMenuViewportBodyClassNames,\n  navigationMenuViewportClassNames,\n} from \"./navigation-menu\";\nexport type {\n  NavigationMenuActivationMode,\n  NavigationMenuContentProps,\n  NavigationMenuCurrent,\n  NavigationMenuDescriptionProps,\n  NavigationMenuFeaturedItemProps,\n  NavigationMenuIndicatorProps,\n  NavigationMenuItemProps,\n  NavigationMenuLabelProps,\n  NavigationMenuLinkProps,\n  NavigationMenuListProps,\n  NavigationMenuMotionDirection,\n  NavigationMenuMotionPreset,\n  NavigationMenuOrientation,\n  NavigationMenuProps,\n  NavigationMenuSectionProps,\n  NavigationMenuSeparatorProps,\n  NavigationMenuSize,\n  NavigationMenuTriggerProps,\n  NavigationMenuVariant,\n  NavigationMenuViewportProps,\n} from \"./navigation-menu\";\n"
    },
    {
      "path": "packages/components/src/utils/cn.ts",
      "type": "registry:file",
      "target": "~/components/dethink/utils/cn.ts",
      "content": "import { clsx, type ClassValue } from \"clsx\";\nimport { twMerge } from \"tailwind-merge\";\n\nexport function cn(...inputs: ClassValue[]) {\n  return twMerge(clsx(inputs));\n}\n"
    }
  ]
}