50:I[707087,["/_next/static/immutable/chunks/3arlv5bvukoo2.js","/_next/static/immutable/chunks/39v64hmfyo-sr.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/04j_o97cgxn2x.js","/_next/static/immutable/chunks/3upr08c9vtj8w.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/3j06ow7w40nxu.js","/_next/static/immutable/chunks/31nn7jwsjvqii.js","/_next/static/immutable/chunks/43_s7jweyypoh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1lo-zn37dolb5.js","/_next/static/immutable/chunks/1v8k6yxw1rg0u.js"],"RegistryDependencies"] 51:I[314491,["/_next/static/immutable/chunks/3arlv5bvukoo2.js","/_next/static/immutable/chunks/39v64hmfyo-sr.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/04j_o97cgxn2x.js","/_next/static/immutable/chunks/3upr08c9vtj8w.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/3j06ow7w40nxu.js","/_next/static/immutable/chunks/31nn7jwsjvqii.js","/_next/static/immutable/chunks/43_s7jweyypoh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1lo-zn37dolb5.js","/_next/static/immutable/chunks/1v8k6yxw1rg0u.js"],"FilesView"] 52:T3d71,"use client"; import { AnimatePresence, motion } from "motion/react"; import Image from "next/image"; import { useTheme } from "next-themes"; import * as React from "react"; import { ArrowDown01Icon, HugeiconsIcon } from "@/components/icons"; import { cn } from "@/lib/utils"; import { RaisedButton } from "@/registry/new-york/ui/raised-button"; export interface NavbarMenuLink { label: string; href: string; icon?: React.ReactNode; external?: boolean; description?: string; backgroundImage?: string; rowSpan?: number; } export interface NavbarMenuSection { id: string; links: NavbarMenuLink[]; gridLayout?: string; } export interface NavbarMenuProps { activeMenu: string; sections: NavbarMenuSection[]; onClose?: () => void; } export interface NavbarWithMenuProps { sections: NavbarMenuSection[]; navItems?: Array< | { type: "link"; label: string; href: string } | { type: "dropdown"; label: string; menu: string } >; logo?: React.ReactNode; cta?: React.ReactNode; } const ListItem = React.forwardRef< HTMLAnchorElement, React.AnchorHTMLAttributes & { title: string; children?: React.ReactNode; href: string; external?: boolean; icon?: React.ReactNode; backgroundImage?: string; rowSpan?: number; } >( ( { className, title, children, href, external, icon, backgroundImage, rowSpan, ...props }, ref, ) => { return (

{backgroundImage && ( <> {title}

{icon && ( {icon} )}

{title} {children && (

{children}

)}

); }, ); ListItem.displayName = "ListItem"; export function NavbarMenu({ activeMenu, sections }: NavbarMenuProps) { const activeSection = sections.find((section) => section.id === activeMenu); if (!activeSection) return null; const gridLayout = activeSection.gridLayout || "grid w-full grid-cols-2 gap-4"; return (

{link.description}

); } export function NavbarWithMenu({ sections, navItems, logo, cta, }: NavbarWithMenuProps) { const { resolvedTheme } = useTheme(); const [activeDropdown, setActiveDropdown] = React.useState( null, ); const [hoveredItem, setHoveredItem] = React.useState(null); const [isMounted, setIsMounted] = React.useState(false); const theme = resolvedTheme ?? "light"; const logoSrc = theme === "dark" ? "/media/text_w_logo_white.webp" : "/media/logo_black.webp"; React.useEffect(() => { setIsMounted(true); }, []); // Keyboard accessibility const menuButtonRefs = React.useRef< (HTMLButtonElement | HTMLAnchorElement | null)[] >([]); const handleKeyDown = ( e: React.KeyboardEvent, item: | { type: "link"; label: string; href: string } | { type: "dropdown"; label: string; menu: string }, idx: number, ) => { if (e.key === "Enter" || e.key === " ") { if (item.type === "dropdown") { e.preventDefault(); setActiveDropdown(item.menu); setHoveredItem(item.menu); } else { // For links, let default anchor behavior occur } } else if (e.key === "Escape") { handleNavbarMouseLeave(); } else if (e.key === "ArrowDown") { e.preventDefault(); const nextIdx = (idx + 1) % items.length; menuButtonRefs.current[nextIdx]?.focus(); } else if (e.key === "ArrowUp") { e.preventDefault(); const prevIdx = (idx - 1 + items.length) % items.length; menuButtonRefs.current[prevIdx]?.focus(); } }; React.useEffect(() => { const onGlobalEscape = (e: KeyboardEvent) => { if (e.key === "Escape") { setActiveDropdown(null); setHoveredItem(null); } }; window.addEventListener("keydown", onGlobalEscape); return () => window.removeEventListener("keydown", onGlobalEscape); }, []); const defaultNavItems = [ { type: "dropdown", label: "Product", menu: "product" }, { type: "dropdown", label: "Resources", menu: "resources" }, { type: "dropdown", label: "Socials", menu: "socials" }, ] as const; const items = navItems || defaultNavItems; const handleNavbarMouseLeave = () => { setActiveDropdown(null); setHoveredItem(null); }; const handleMouseEnter = (menu: string) => { setActiveDropdown(menu); setHoveredItem(menu); }; return (

{/* biome-ignore lint/a11y/noStaticElementInteractions: Hover container for menu, not interactive content */}

{logo || (isMounted && ( Logo

))}

{items.map((item, idx) => item.type === "link" ? ( { menuButtonRefs.current[idx] = el; }} key={item.href} href={item.href} className={cn( "relative flex h-9 cursor-pointer items-center rounded-xl px-4 py-2 text-sm transition-colors hover:bg-muted/80", hoveredItem === item.label.toLowerCase() ? "text-foreground" : "text-muted-foreground hover:text-foreground", )} onMouseEnter={() => { setHoveredItem( item.label.toLowerCase(), ); setActiveDropdown(null); }} onKeyDown={(e) => handleKeyDown(e, item, idx) } role="menuitem" tabIndex={0} // Only add target/rel if item has external property {...("external" in item && item.external ? { target: "_blank", rel: "noopener noreferrer", } : {})} > {item.label} ) : ( ), )}

{cta || ( Get Started )}

{activeDropdown && ( )}

); } 4f:["$","div",null,{"className":"mt-3 flex min-h-0 min-w-0 flex-1 flex-col gap-3","children":[["$","div",null,{"className":"flex shrink-0 items-start gap-3","children":[["$","div",null,{"className":"flex max-h-28 min-w-0 flex-1 flex-wrap items-center gap-2 overflow-y-auto","children":[["$","ul",null,{"className":"flex min-w-0 flex-wrap gap-2","aria-label":"Package dependencies","children":[["$","li","motion",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/motion","target":"_blank","rel":"noopener noreferrer","className":"flex max-w-full min-w-0 items-center gap-1.5 rounded-md border px-2 py-1.5 text-xs","children":[["$","svg",null,{"viewBox":"0 0 24 24","className":"size-3 shrink-0","children":["$","path",null,{"d":"M1.763 0C.786 0 0 .786 0 1.763v20.474C0 23.214.786 24 1.763 24h20.474c.977 0 1.763-.786 1.763-1.763V1.763C24 .786 23.214 0 22.237 0zM5.13 5.323l13.837.019-.009 13.836h-3.464l.01-10.382h-3.456L12.04 19.17H5.113z","fill":"currentColor"}]}],["$","span",null,{"className":"min-w-0 break-all text-xs font-medium","children":"motion"}]]}]}],["$","li","next",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/next","target":"_blank","rel":"noopener noreferrer","className":"flex max-w-full min-w-0 items-center gap-1.5 rounded-md border px-2 py-1.5 text-xs","children":[["$","svg",null,{"viewBox":"0 0 24 24","className":"size-3 shrink-0","children":["$","path",null,{"d":"M1.763 0C.786 0 0 .786 0 1.763v20.474C0 23.214.786 24 1.763 24h20.474c.977 0 1.763-.786 1.763-1.763V1.763C24 .786 23.214 0 22.237 0zM5.13 5.323l13.837.019-.009 13.836h-3.464l.01-10.382h-3.456L12.04 19.17H5.113z","fill":"currentColor"}]}],["$","span",null,{"className":"min-w-0 break-all text-xs font-medium","children":"next"}]]}]}]]}],["$","$L50",null,{"namespace":"@gaia","registryDependencies":["raised-button"]}]]}],null]}],["$","$L51",null,{"files":[{"path":"registry/new-york/ui/navbar-menu.tsx","content":"$52","type":"registry:ui"}],"className":"h-[70svh] min-h-80"}]]}]