{
  "title": "Menubar",
  "description": "A desktop-style horizontal menu bar with shared gliding trigger indicators, floating popup transition, and animated items.",
  "name": "motion-menubar",
  "dependencies": [
    "motion",
    "@base-ui/react",
    "lucide-react"
  ],
  "registryDependencies": [],
  "type": "registry:ui",
  "files": [
    {
      "path": "components/paceui/motion/menubar.tsx",
      "type": "registry:ui",
      "content": "import * as React from \"react\";\n\nimport { Menu as MenuPrimitive } from \"@base-ui/react/menu\";\nimport { Menubar as MenubarPrimitive } from \"@base-ui/react/menubar\";\nimport { CheckIcon, ChevronRightIcon } from \"lucide-react\";\nimport { motion } from \"motion/react\";\n\nimport { cn } from \"@/lib/utils\";\n\ninterface MenubarTransitionContextType {\n    /** Called by MenubarMenu when a menu opens. Pass the trigger element to measure position. */\n    notifyMenuOpen: (triggerElement: HTMLElement | null) => { isCrossTransition: boolean; direction: number };\n    /** Called by MenubarMenu when a menu closes. Pass the trigger element to store position. */\n    notifyMenuClose: (triggerElement: HTMLElement | null) => void;\n    /** Whether the current open is a cross-menu transition */\n    isCrossTransitionRef: React.RefObject<boolean>;\n    /** Direction of the transition: -1 (left), 1 (right), 0 (none) */\n    directionRef: React.RefObject<number>;\n}\n\nconst MenubarTransitionContext = React.createContext<MenubarTransitionContextType | null>(null);\n\ninterface MenubarTriggerHighlightContextType {\n    highlightLayoutId: string;\n    activeTriggerId: string | null;\n    hasActiveTrigger: boolean;\n    setActiveTrigger: (id: string) => void;\n    clearActiveTriggerWithDelay: () => void;\n}\n\nconst MenubarTriggerHighlightContext = React.createContext<MenubarTriggerHighlightContextType | null>(null);\n\ninterface MenubarHighlightContextType {\n    highlightLayoutId: string;\n    activeItemId: string | null;\n    setActiveItem: (id: string) => void;\n    clearActiveItemWithDelay: () => void;\n}\n\nconst MenubarHighlightContext = React.createContext<MenubarHighlightContextType | null>(null);\n\nexport interface MenubarProps extends MenubarPrimitive.Props {}\n\nfunction Menubar({ className, children, ...props }: MenubarProps) {\n    const generatedLayoutId = React.useId();\n    const [activeTriggerId, setActiveTriggerId] = React.useState<string | null>(null);\n    const [hasActiveTrigger, setHasActiveTrigger] = React.useState(false);\n    const triggerTimeoutRef = React.useRef<any>(null);\n\n    const setActiveTrigger = React.useCallback((id: string) => {\n        if (triggerTimeoutRef.current) clearTimeout(triggerTimeoutRef.current);\n        setActiveTriggerId(id);\n        setHasActiveTrigger(true);\n    }, []);\n\n    const clearActiveTriggerWithDelay = React.useCallback(() => {\n        if (triggerTimeoutRef.current) clearTimeout(triggerTimeoutRef.current);\n        triggerTimeoutRef.current = setTimeout(() => {\n            setActiveTriggerId(null);\n            setHasActiveTrigger(false);\n        }, 180);\n    }, []);\n\n    const triggerHighlightValue = React.useMemo(\n        () => ({\n            highlightLayoutId: generatedLayoutId,\n            activeTriggerId,\n            hasActiveTrigger,\n            setActiveTrigger,\n            clearActiveTriggerWithDelay,\n        }),\n        [generatedLayoutId, activeTriggerId, hasActiveTrigger, setActiveTrigger, clearActiveTriggerWithDelay],\n    );\n\n    // --- Cross-menu transition tracking ---\n    const lastTriggerXRef = React.useRef<number | null>(null);\n    const pendingCloseXRef = React.useRef<number | null>(null);\n    const isCrossTransitionRef = React.useRef(false);\n    const directionRef = React.useRef(0);\n    const clearPendingCloseTimerRef = React.useRef<any>(null);\n\n    const notifyMenuOpen = React.useCallback((triggerElement: HTMLElement | null) => {\n        if (clearPendingCloseTimerRef.current) {\n            clearTimeout(clearPendingCloseTimerRef.current);\n            clearPendingCloseTimerRef.current = null;\n        }\n\n        const triggerX = triggerElement?.getBoundingClientRect().left ?? null;\n\n        if (pendingCloseXRef.current !== null && triggerX !== null) {\n            // A menu was recently closed - this is a cross-transition\n            isCrossTransitionRef.current = true;\n            directionRef.current =\n                triggerX > pendingCloseXRef.current ? 1 : triggerX < pendingCloseXRef.current ? -1 : 0;\n        } else {\n            isCrossTransitionRef.current = false;\n            directionRef.current = 0;\n        }\n\n        pendingCloseXRef.current = null;\n        if (triggerX !== null) lastTriggerXRef.current = triggerX;\n\n        return {\n            isCrossTransition: isCrossTransitionRef.current,\n            direction: directionRef.current,\n        };\n    }, []);\n\n    const notifyMenuClose = React.useCallback((triggerElement: HTMLElement | null) => {\n        const triggerX = triggerElement?.getBoundingClientRect().left ?? lastTriggerXRef.current;\n        pendingCloseXRef.current = triggerX;\n\n        // Clear pending close after a short window - if no new menu opens, it's not a cross-transition\n        clearPendingCloseTimerRef.current = setTimeout(() => {\n            pendingCloseXRef.current = null;\n            isCrossTransitionRef.current = false;\n            directionRef.current = 0;\n        }, 200);\n    }, []);\n\n    const transitionValue = React.useMemo(\n        () => ({\n            notifyMenuOpen,\n            notifyMenuClose,\n            isCrossTransitionRef,\n            directionRef,\n        }),\n        [notifyMenuOpen, notifyMenuClose],\n    );\n\n    return (\n        <MenubarTransitionContext.Provider value={transitionValue}>\n            <MenubarTriggerHighlightContext.Provider value={triggerHighlightValue}>\n                <MenubarPrimitive\n                    data-slot=\"menubar\"\n                    className={cn(\n                        \"bg-background flex h-9 items-center gap-1 rounded-md border p-1 shadow-xs outline-none select-none\",\n                        className,\n                    )}\n                    onPointerLeave={clearActiveTriggerWithDelay}\n                    {...props}>\n                    {children}\n                </MenubarPrimitive>\n            </MenubarTriggerHighlightContext.Provider>\n        </MenubarTransitionContext.Provider>\n    );\n}\n\nexport interface MenubarMenuProps extends MenuPrimitive.Root.Props {}\n\n/** Context to pass the trigger element ref from MenubarTrigger to MenubarMenu */\ninterface MenubarMenuTriggerRefContextType {\n    triggerRef: React.RefObject<HTMLElement | null>;\n    setTriggerElement: (el: HTMLElement | null) => void;\n}\n\nconst MenubarMenuTriggerRefContext = React.createContext<MenubarMenuTriggerRefContextType | null>(null);\n\nfunction MenubarMenu({ onOpenChange, ...props }: MenubarMenuProps) {\n    const transitionContext = React.useContext(MenubarTransitionContext);\n\n    const triggerRef = React.useRef<HTMLElement | null>(null);\n    const setTriggerElement = React.useCallback((el: HTMLElement | null) => {\n        triggerRef.current = el;\n    }, []);\n\n    const triggerRefValue = React.useMemo(() => ({ triggerRef, setTriggerElement }), [setTriggerElement]);\n\n    const handleOpenChange = React.useCallback(\n        (open: boolean, eventDetails: any) => {\n            if (open) {\n                transitionContext?.notifyMenuOpen(triggerRef.current);\n            } else {\n                transitionContext?.notifyMenuClose(triggerRef.current);\n            }\n            onOpenChange?.(open, eventDetails);\n        },\n        [transitionContext, onOpenChange],\n    );\n\n    return (\n        <MenubarMenuTriggerRefContext.Provider value={triggerRefValue}>\n            <MenuPrimitive.Root data-slot=\"menubar-menu\" onOpenChange={handleOpenChange} {...props} />\n        </MenubarMenuTriggerRefContext.Provider>\n    );\n}\n\nfunction MenubarPortal({ ...props }: MenuPrimitive.Portal.Props) {\n    return <MenuPrimitive.Portal data-slot=\"menubar-portal\" {...props} />;\n}\n\nexport interface MenubarTriggerProps extends MenuPrimitive.Trigger.Props {}\n\nfunction MenubarTrigger({ className, children, ...props }: MenubarTriggerProps) {\n    const highlightContext = React.useContext(MenubarTriggerHighlightContext);\n    const menuTriggerRefContext = React.useContext(MenubarMenuTriggerRefContext);\n    const triggerId = React.useId();\n\n    return (\n        <MenuPrimitive.Trigger\n            data-slot=\"menubar-trigger\"\n            {...props}\n            render={(triggerProps, state) => {\n                const isCurrentActive = highlightContext?.activeTriggerId === triggerId;\n                const canGlide = highlightContext?.hasActiveTrigger;\n\n                return (\n                    <motion.div\n                        {...triggerProps}\n                        ref={(el: HTMLDivElement | null) => {\n                            (triggerProps as any).ref?.(el);\n                            menuTriggerRefContext?.setTriggerElement(el);\n                        }}\n                        onPointerEnter={(e: any) => {\n                            triggerProps.onPointerEnter?.(e);\n                            highlightContext?.setActiveTrigger(triggerId);\n                        }}\n                        onFocus={(e: any) => {\n                            triggerProps.onFocus?.(e);\n                            highlightContext?.setActiveTrigger(triggerId);\n                        }}\n                        whileTap={{ scale: 0.96 }}\n                        transition={{ type: \"spring\", stiffness: 400, damping: 25 }}\n                        className={cn(\n                            \"relative flex cursor-default items-center rounded-sm px-2 py-1 text-sm font-medium outline-hidden select-none\",\n                            (state.open || isCurrentActive) && \"text-accent-foreground\",\n                            className,\n                        )}>\n                        {isCurrentActive && highlightContext?.highlightLayoutId ? (\n                            canGlide ? (\n                                <motion.div\n                                    layoutId={highlightContext.highlightLayoutId}\n                                    className=\"bg-muted pointer-events-none absolute inset-0 z-0 rounded-sm\"\n                                    transition={{ type: \"spring\", stiffness: 450, damping: 32 }}\n                                />\n                            ) : (\n                                <motion.div\n                                    initial={{ opacity: 1 }}\n                                    animate={{ opacity: 1 }}\n                                    exit={{ opacity: 1 }}\n                                    transition={{ duration: 0.12 }}\n                                    className=\"bg-muted pointer-events-none absolute inset-0 z-0 rounded-sm\"\n                                />\n                            )\n                        ) : state.open ? (\n                            <div className=\"bg-muted pointer-events-none absolute inset-0 z-0 rounded-sm\" />\n                        ) : null}\n                        <span className=\"relative z-10 flex items-center gap-1\">{children}</span>\n                    </motion.div>\n                );\n            }}\n        />\n    );\n}\n\nexport interface MenubarContentProps\n    extends\n        MenuPrimitive.Popup.Props,\n        Pick<MenuPrimitive.Positioner.Props, \"align\" | \"alignOffset\" | \"side\" | \"sideOffset\"> {}\n\nfunction MenubarContent({\n    align = \"start\",\n    alignOffset = -4,\n    side = \"bottom\",\n    sideOffset = 8,\n    className,\n    children,\n    ...props\n}: MenubarContentProps) {\n    const parentHighlightContext = React.useContext(MenubarHighlightContext);\n\n    const generatedLayoutId = React.useId();\n    const highlightLayoutId = parentHighlightContext?.highlightLayoutId ?? generatedLayoutId;\n\n    const [localActiveItemId, setLocalActiveItemId] = React.useState<string | null>(null);\n    const timeoutRef = React.useRef<any>(null);\n\n    const setActiveItem =\n        parentHighlightContext?.setActiveItem ??\n        React.useCallback((id: string) => {\n            if (timeoutRef.current) clearTimeout(timeoutRef.current);\n            setLocalActiveItemId(id);\n        }, []);\n\n    const clearActiveItemWithDelay =\n        parentHighlightContext?.clearActiveItemWithDelay ??\n        React.useCallback(() => {\n            if (timeoutRef.current) clearTimeout(timeoutRef.current);\n            timeoutRef.current = setTimeout(() => {\n                setLocalActiveItemId(null);\n            }, 180);\n        }, []);\n\n    const activeItemId = parentHighlightContext ? parentHighlightContext.activeItemId : localActiveItemId;\n\n    const highlightValue: MenubarHighlightContextType = parentHighlightContext ?? {\n        highlightLayoutId,\n        activeItemId,\n        setActiveItem,\n        clearActiveItemWithDelay,\n    };\n\n    return (\n        <MenuPrimitive.Portal>\n            <MenuPrimitive.Positioner\n                className=\"isolate z-500 outline-none\"\n                align={align}\n                alignOffset={alignOffset}\n                side={side}\n                sideOffset={sideOffset}>\n                <MenuPrimitive.Popup\n                    data-slot=\"menubar-content\"\n                    {...props}\n                    className={cn(\n                        \"bg-popover text-popover-foreground ring-foreground/10 z-50 flex min-w-36 origin-(--transform-origin) flex-col gap-0.5 overflow-x-hidden overflow-y-auto rounded-md p-1 shadow-md ring-1 outline-none\",\n                        \"transition-[opacity,transform,scale] duration-300 ease-[cubic-bezier(0.22,1,0.36,1)]\",\n                        \"data-starting-style:-translate-y-1.5 data-starting-style:scale-96 data-starting-style:opacity-0\",\n                        \"data-ending-style:-translate-y-1.5 data-ending-style:scale-96 data-ending-style:opacity-0 data-ending-style:duration-150\",\n                        className,\n                    )}>\n                    <MenubarHighlightContext.Provider value={highlightValue}>\n                        <div onPointerLeave={clearActiveItemWithDelay} className=\"contents\">\n                            {children}\n                        </div>\n                    </MenubarHighlightContext.Provider>\n                </MenuPrimitive.Popup>\n            </MenuPrimitive.Positioner>\n        </MenuPrimitive.Portal>\n    );\n}\n\nfunction MenubarGroup({ ...props }: MenuPrimitive.Group.Props) {\n    return <MenuPrimitive.Group data-slot=\"menubar-group\" {...props} />;\n}\n\nfunction MenubarLabel({\n    className,\n    inset,\n    ...props\n}: MenuPrimitive.GroupLabel.Props & {\n    inset?: boolean;\n}) {\n    return (\n        <MenuPrimitive.Group>\n            <MenuPrimitive.GroupLabel\n                data-slot=\"menubar-label\"\n                data-inset={inset}\n                className={cn(\n                    \"text-muted-foreground px-2 py-1.5 text-xs font-medium select-none data-inset:pl-8\",\n                    className,\n                )}\n                {...props}\n            />\n        </MenuPrimitive.Group>\n    );\n}\n\nexport interface MenubarItemProps extends MenuPrimitive.Item.Props {\n    inset?: boolean;\n    variant?: \"default\" | \"destructive\";\n}\n\nfunction MenubarItem({ className, inset, variant = \"default\", children, ...props }: MenubarItemProps) {\n    const highlightContext = React.useContext(MenubarHighlightContext);\n    const itemId = React.useId();\n\n    return (\n        <MenuPrimitive.Item\n            data-slot=\"menubar-item\"\n            data-inset={inset}\n            data-variant={variant}\n            {...props}\n            render={(itemProps, state) => {\n                const isCurrentActive = highlightContext?.activeItemId === itemId;\n\n                return (\n                    <motion.div\n                        {...itemProps}\n                        onPointerEnter={(e: any) => {\n                            itemProps.onPointerEnter?.(e);\n                            highlightContext?.setActiveItem(itemId);\n                        }}\n                        onFocus={(e: any) => {\n                            itemProps.onFocus?.(e);\n                            highlightContext?.setActiveItem(itemId);\n                        }}\n                        whileTap={{ scale: 0.98 }}\n                        transition={{ type: \"spring\", stiffness: 400, damping: 25 }}\n                        className={cn(\n                            \"group/menubar-item relative flex cursor-default items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-hidden select-none data-disabled:pointer-events-none data-disabled:opacity-50 data-inset:pl-8 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4\",\n                            (state.highlighted || isCurrentActive) &&\n                                (variant === \"destructive\" ? \"text-destructive\" : \"text-accent-foreground\"),\n                            className,\n                        )}>\n                        {isCurrentActive && highlightContext?.highlightLayoutId && (\n                            <motion.div\n                                layoutId={highlightContext.highlightLayoutId}\n                                className={cn(\n                                    \"pointer-events-none absolute inset-0 z-0 rounded-sm\",\n                                    variant === \"destructive\"\n                                        ? \"bg-destructive/10 dark:bg-destructive/20\"\n                                        : \"bg-accent\",\n                                )}\n                                transition={{ type: \"spring\", stiffness: 450, damping: 32 }}\n                            />\n                        )}\n                        <span className=\"relative z-10 flex w-full items-center gap-2\">{children}</span>\n                    </motion.div>\n                );\n            }}\n        />\n    );\n}\n\nfunction MenubarSub({ ...props }: MenuPrimitive.SubmenuRoot.Props) {\n    return <MenuPrimitive.SubmenuRoot data-slot=\"menubar-sub\" {...props} />;\n}\n\nexport interface MenubarSubTriggerProps extends MenuPrimitive.SubmenuTrigger.Props {\n    inset?: boolean;\n}\n\nfunction MenubarSubTrigger({ className, inset, children, ...props }: MenubarSubTriggerProps) {\n    const highlightContext = React.useContext(MenubarHighlightContext);\n    const itemId = React.useId();\n\n    return (\n        <MenuPrimitive.SubmenuTrigger\n            data-slot=\"menubar-sub-trigger\"\n            data-inset={inset}\n            {...props}\n            render={(triggerProps, state) => {\n                const isCurrentActive = highlightContext?.activeItemId === itemId;\n\n                return (\n                    <motion.div\n                        {...triggerProps}\n                        onPointerEnter={(e: any) => {\n                            triggerProps.onPointerEnter?.(e);\n                            highlightContext?.setActiveItem(itemId);\n                        }}\n                        onFocus={(e: any) => {\n                            triggerProps.onFocus?.(e);\n                            highlightContext?.setActiveItem(itemId);\n                        }}\n                        whileTap={{ scale: 0.98 }}\n                        transition={{ type: \"spring\", stiffness: 400, damping: 25 }}\n                        className={cn(\n                            \"group/menubar-sub-trigger relative flex cursor-default items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-hidden select-none data-inset:pl-8 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4\",\n                            (state.highlighted || state.open || isCurrentActive) && \"text-accent-foreground\",\n                            className,\n                        )}\n                        {...props}>\n                        {isCurrentActive && highlightContext?.highlightLayoutId ? (\n                            <motion.div\n                                layoutId={highlightContext.highlightLayoutId}\n                                className=\"bg-accent pointer-events-none absolute inset-0 z-0 rounded-sm\"\n                                transition={{ type: \"spring\", stiffness: 450, damping: 32 }}\n                            />\n                        ) : state.open ? (\n                            <div className=\"bg-accent/60 pointer-events-none absolute inset-0 z-0 rounded-sm\" />\n                        ) : null}\n                        <span className=\"relative z-10 flex w-full items-center gap-2\">{children}</span>\n                        <ChevronRightIcon className=\"relative z-10 ml-auto\" />\n                    </motion.div>\n                );\n            }}\n        />\n    );\n}\n\nfunction MenubarSubContent({\n    align = \"start\",\n    alignOffset = -3,\n    side = \"right\",\n    sideOffset = 4,\n    className,\n    ...props\n}: React.ComponentProps<typeof MenubarContent>) {\n    return (\n        <MenubarContent\n            data-slot=\"menubar-sub-content\"\n            className={cn(\"w-auto min-w-[120px] shadow-lg\", className)}\n            align={align}\n            alignOffset={alignOffset}\n            side={side}\n            sideOffset={sideOffset}\n            {...props}\n        />\n    );\n}\n\nexport interface MenubarCheckboxItemProps extends MenuPrimitive.CheckboxItem.Props {}\n\nfunction MenubarCheckboxItem({ className, children, checked, ...props }: MenubarCheckboxItemProps) {\n    const highlightContext = React.useContext(MenubarHighlightContext);\n    const itemId = React.useId();\n\n    return (\n        <MenuPrimitive.CheckboxItem\n            data-slot=\"menubar-checkbox-item\"\n            className={cn(\n                \"group/menubar-checkbox-item relative flex cursor-default items-center gap-2 rounded-sm py-1.5 pr-2 pl-8 text-sm outline-hidden select-none data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4\",\n                className,\n            )}\n            checked={checked}\n            {...props}\n            render={(itemProps, state) => {\n                const isCurrentActive = highlightContext?.activeItemId === itemId;\n\n                return (\n                    <motion.div\n                        {...itemProps}\n                        onPointerEnter={(e: any) => {\n                            itemProps.onPointerEnter?.(e);\n                            highlightContext?.setActiveItem(itemId);\n                        }}\n                        onFocus={(e: any) => {\n                            itemProps.onFocus?.(e);\n                            highlightContext?.setActiveItem(itemId);\n                        }}\n                        whileTap={{ scale: 0.98 }}\n                        transition={{ type: \"spring\", stiffness: 400, damping: 25 }}\n                        className={cn(\n                            \"group/menubar-checkbox-item relative flex cursor-default items-center gap-2 rounded-sm py-1.5 pr-2 pl-8 text-sm outline-hidden select-none data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4\",\n                            (state.highlighted || isCurrentActive) && \"text-accent-foreground\",\n                            className,\n                        )}>\n                        {isCurrentActive && highlightContext?.highlightLayoutId && (\n                            <motion.div\n                                layoutId={highlightContext.highlightLayoutId}\n                                className=\"bg-accent pointer-events-none absolute inset-0 z-0 rounded-sm\"\n                                transition={{ type: \"spring\", stiffness: 450, damping: 32 }}\n                            />\n                        )}\n                        <span\n                            className=\"pointer-events-none absolute left-2 z-10 flex size-4 items-center justify-center [&_svg:not([class*='size-'])]:size-4\"\n                            data-slot=\"menubar-checkbox-item-indicator\">\n                            <MenuPrimitive.CheckboxItemIndicator>\n                                <motion.span\n                                    initial={{ scale: 0, opacity: 1 }}\n                                    animate={{ scale: 1, opacity: 1 }}\n                                    exit={{ scale: 0, opacity: 1 }}\n                                    transition={{ type: \"spring\", stiffness: 400, damping: 22 }}\n                                    className=\"flex items-center justify-center\">\n                                    <CheckIcon />\n                                </motion.span>\n                            </MenuPrimitive.CheckboxItemIndicator>\n                        </span>\n                        <span className=\"relative z-10 flex items-center gap-2\">{children}</span>\n                    </motion.div>\n                );\n            }}\n        />\n    );\n}\n\nfunction MenubarRadioGroup({ ...props }: MenuPrimitive.RadioGroup.Props) {\n    return <MenuPrimitive.RadioGroup data-slot=\"menubar-radio-group\" {...props} />;\n}\n\nexport interface MenubarRadioItemProps extends MenuPrimitive.RadioItem.Props {}\n\nfunction MenubarRadioItem({ className, children, ...props }: MenubarRadioItemProps) {\n    const highlightContext = React.useContext(MenubarHighlightContext);\n    const itemId = React.useId();\n\n    return (\n        <MenuPrimitive.RadioItem\n            data-slot=\"menubar-radio-item\"\n            className={cn(\n                \"group/menubar-radio-item relative flex cursor-default items-center gap-2 rounded-sm py-1.5 pr-2 pl-8 text-sm outline-hidden select-none data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4\",\n                className,\n            )}\n            {...props}\n            render={(itemProps, state) => {\n                const isCurrentActive = highlightContext?.activeItemId === itemId;\n\n                return (\n                    <motion.div\n                        {...itemProps}\n                        onPointerEnter={(e: any) => {\n                            itemProps.onPointerEnter?.(e);\n                            highlightContext?.setActiveItem(itemId);\n                        }}\n                        onFocus={(e: any) => {\n                            itemProps.onFocus?.(e);\n                            highlightContext?.setActiveItem(itemId);\n                        }}\n                        whileTap={{ scale: 0.98 }}\n                        transition={{ type: \"spring\", stiffness: 400, damping: 25 }}\n                        className={cn(\n                            \"group/menubar-radio-item relative flex cursor-default items-center gap-2 rounded-sm py-1.5 pr-2 pl-8 text-sm outline-hidden select-none data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4\",\n                            (state.highlighted || isCurrentActive) && \"text-accent-foreground\",\n                            className,\n                        )}>\n                        {isCurrentActive && highlightContext?.highlightLayoutId && (\n                            <motion.div\n                                layoutId={highlightContext.highlightLayoutId}\n                                className=\"bg-accent pointer-events-none absolute inset-0 z-0 rounded-sm\"\n                                transition={{ type: \"spring\", stiffness: 450, damping: 32 }}\n                            />\n                        )}\n                        <span\n                            className=\"pointer-events-none absolute left-2 z-10 flex size-4 items-center justify-center [&_svg:not([class*='size-'])]:size-4\"\n                            data-slot=\"menubar-radio-item-indicator\">\n                            <MenuPrimitive.RadioItemIndicator>\n                                <motion.span\n                                    initial={{ scale: 0, opacity: 1 }}\n                                    animate={{ scale: 1, opacity: 1 }}\n                                    exit={{ scale: 0, opacity: 1 }}\n                                    transition={{ type: \"spring\", stiffness: 400, damping: 22 }}\n                                    className=\"flex items-center justify-center\">\n                                    <CheckIcon />\n                                </motion.span>\n                            </MenuPrimitive.RadioItemIndicator>\n                        </span>\n                        <span className=\"relative z-10 flex items-center gap-2\">{children}</span>\n                    </motion.div>\n                );\n            }}\n        />\n    );\n}\n\nfunction MenubarSeparator({ className, ...props }: MenuPrimitive.Separator.Props) {\n    return (\n        <MenuPrimitive.Separator\n            data-slot=\"menubar-separator\"\n            className={cn(\"bg-border -mx-1 my-1 h-px\", className)}\n            {...props}\n        />\n    );\n}\n\nfunction MenubarShortcut({ className, ...props }: React.ComponentProps<\"span\">) {\n    return (\n        <span\n            data-slot=\"menubar-shortcut\"\n            className={cn(\n                \"text-muted-foreground group-hover/menubar-item:text-accent-foreground ml-auto text-xs tracking-widest\",\n                className,\n            )}\n            {...props}\n        />\n    );\n}\n\nexport {\n    Menubar,\n    MenubarPortal,\n    MenubarMenu,\n    MenubarTrigger,\n    MenubarContent,\n    MenubarGroup,\n    MenubarSeparator,\n    MenubarLabel,\n    MenubarItem,\n    MenubarShortcut,\n    MenubarCheckboxItem,\n    MenubarRadioGroup,\n    MenubarRadioItem,\n    MenubarSub,\n    MenubarSubTrigger,\n    MenubarSubContent,\n};\n"
    }
  ],
  "mcp": {
    "description": "A desktop-style horizontal menubar. Provides shared gliding trigger highlights, floating popup content transitions across open menus, gliding item highlights, and animated checkmarks.",
    "tags": [
      "component",
      "menubar",
      "menu",
      "navigation",
      "paceui",
      "animation"
    ]
  }
}