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:T5c66,"use client"; import * as React from "react"; import { AnimatePresence, MotionConfig, motion, useIsPresent, type HTMLMotionProps, } from "motion/react"; import { ArrowRightIcon, CheckIcon, ChevronDownIcon, GlobeIcon } from "lucide-react"; import { cn } from "@/lib/utils"; import { useControllableState } from "@/lib/use-controllable-state"; import { useListboxNavigation } from "@/lib/use-listbox-navigation"; import type { Locale } from "./types"; import { getFlag, getLanguageName, isRtl } from "./locale-data"; export type { Locale }; export interface NavLink { /** Visible link text */ label: string; /** Destination passed to `linkComponent` as `href` */ href: string; } /** Per-part class overrides, merged after the defaults with `cn`. */ export interface NavBarClassNames { /** The `

` element (same as `className`) */ root?: string; /** The bar itself — the full-width row, or the floating card */ container?: string; /** The desktop link group */ links?: string; /** Each link, on desktop and in the mobile menu */ link?: string; /** The desktop group holding the language menu, GitHub link and CTA */ actions?: string; /** The call-to-action button, on desktop and in the mobile menu */ cta?: string; /** The language menu triggers */ languageTrigger?: string; /** The language menu panel */ languageContent?: string; /** Each language option */ languageItem?: string; /** The mobile menu panel */ mobileMenu?: string; } export interface NavBarProps extends Omit< React.ComponentPropsWithoutRef<"nav">, "defaultValue" | "onChange" > { /** Brand mark rendered at the start of the bar */ logo?: React.ReactNode; /** Navigation links */ links?: NavLink[]; /** `href` of the current page. The matching link gets `aria-current="page"` and a highlight. */ activeHref?: string; /** Locales offered by the built-in language menu */ locales?: Locale[]; /** Selected locale code. Provide this to control the component. */ value?: string; /** Initial selected locale code when uncontrolled (default: first locale's code) */ defaultValue?: string; /** Callback when the locale changes */ onValueChange?: (code: string) => void; /** Primary call-to-action button */ cta?: { label: string; href: string }; /** Show a GitHub icon link. Needs `githubUrl`; without one, nothing renders. */ showGitHub?: boolean; /** * Target of the GitHub icon link: a full URL, or `"owner"` / `"owner/repo"` * shorthand for a github.com profile or repository. */ githubUrl?: string; /** Pin the bar to the top of the viewport (default: true) */ sticky?: boolean; /** * Bar style (default: "default"). `"default"` spans the full width with a * bottom border; `"floating"` is a rounded card inset from the top edge. */ variant?: "default" | "floating"; /** Show flag emojis in the language menu (default: true) */ showFlags?: boolean; /** Max height of the scrolling language menu, before it scrolls (default: "15rem") */ maxHeight?: number | string; /** * Component used to render internal links. Defaults to `"a"` so the * component works in any React app; pass your router's link (e.g. * `next/link`) to get client-side navigation. */ linkComponent?: React.ElementType; /** Per-part class overrides */ classNames?: NavBarClassNames; } function getLocaleInfo(code: string, override?: Locale) { // Per-locale `label`/`flag` props win; otherwise fall back to the shared // locale data, which resolves regional codes via the base language subtag. return { label: override?.label ?? getLanguageName(code) ?? code.toUpperCase(), flag: override?.flag ?? getFlag(code), }; } /** * A panel that animates out. While it plays its exit animation it is still * mounted, so it leaves the accessibility tree first: a closing menu is not a menu. */ const Panel = React.forwardRef>(function Panel(props, ref) { const isPresent = useIsPresent(); return ( ); }); const FOCUS_RING = "outline-none focus-visible:ring-[3px] focus-visible:ring-ring/50"; const GHOST_BUTTON = cn( "inline-flex items-center justify-center rounded-md text-sm font-medium text-muted-foreground transition-colors no-underline select-none", "hover:bg-accent hover:text-accent-foreground aria-expanded:bg-accent aria-expanded:text-accent-foreground", "dark:hover:bg-accent/50", FOCUS_RING, ); const EASE = [0.16, 1, 0.3, 1] as const; /** * Expands `"owner"` / `"owner/repo"` shorthand to a github.com URL. Anything else, * full URLs included, passes through unchanged. */ function resolveGitHubUrl(value: string | undefined): string | undefined { const trimmed = value?.trim(); if (!trimmed) return undefined; if (/^[a-z][a-z\d+.-]*:/i.test(trimmed)) return trimmed; const path = trimmed.replace(/^(www\.)?github\.com\//i, "").replace(/^\/+|\/+$/g, ""); return /^[A-Za-z\d-]+(\/[\w.-]+)?$/.test(path) ? `https://github.com/${path}` : trimmed; } export const NavBar = React.forwardRef(function NavBar( { logo, links = [], activeHref, locales = [], value, defaultValue, onValueChange, cta, showGitHub = false, githubUrl, sticky = true, variant = "default", className, classNames, dir, showFlags = true, maxHeight = "15rem", linkComponent: Link = "a", onKeyDown, ...rest }, forwardedRef, ) { const [locale, setLocale] = useControllableState( value, defaultValue ?? locales[0]?.code ?? "en", onValueChange, ); const [mobileOpen, setMobileOpen] = React.useState(false); // Which bar opened the language menu, rather than a single boolean. The desktop // and mobile bars are both always in the DOM — only CSS hides one — so a shared // boolean mounted two listboxes into the accessibility tree at once. const [langOpen, setLangOpen] = React.useState<"desktop" | "mobile" | null>(null); // The link under the pointer or keyboard focus; the highlight follows it and // settles back on the active link when it leaves. const [hoveredHref, setHoveredHref] = React.useState(null); const langRef = React.useRef(null); const mobileLangRef = React.useRef(null); const desktopTriggerRef = React.useRef(null); const mobileTriggerRef = React.useRef(null); const menuId = React.useId(); const activeLocale = locales.find((l) => l.code === locale); const direction = dir ?? ((activeLocale?.rtl ?? isRtl(locale)) ? "rtl" : "ltr"); const currentLocaleInfo = getLocaleInfo(locale, activeLocale); const floating = variant === "floating"; const highlightedHref = hoveredHref ?? activeHref ?? null; /** * The trigger that owns the interaction: whichever bar is open, or — while the * menu is closed — whichever one the keyboard event landed on. */ const getTrigger = () => langOpen === "mobile" ? mobileTriggerRef.current : langOpen === "desktop" ? desktopTriggerRef.current : document.activeElement === mobileTriggerRef.current ? mobileTriggerRef.current : desktopTriggerRef.current; // No search field lives in this menu, so the highlight moves real DOM focus // onto the active option instead — `aria-activedescendant` is not valid on a // ` ); })} ); const githubHref = resolveGitHubUrl(githubUrl); // `showGitHub` alone used to link to this library's own repository. Now it // renders nothing, so say why instead of failing silently. const missingGitHubUrl = showGitHub && !githubHref; React.useEffect(() => { if (missingGitHubUrl) { console.warn( 'NavBar: `showGitHub` needs `githubUrl` (a URL or "owner/repo"); the GitHub link is hidden.', ); } }, [missingGitHubUrl]); const hasGitHub = showGitHub && !!githubHref; const githubLink = ( ); const ctaClass = cn( "group inline-flex h-9 items-center justify-center gap-1.5 rounded-md bg-primary px-4 text-sm font-medium whitespace-nowrap text-primary-foreground no-underline shadow-xs transition-colors hover:bg-primary/90", FOCUS_RING, classNames?.cta, ); const ctaArrow = ( ); return (

{ nav.onKeyDown(event); onKeyDown?.(event); }} className={cn( "z-50 w-full text-foreground", sticky ? "sticky top-0" : "relative", floating ? "px-3 pt-3 sm:px-4 sm:pt-4" : "border-b bg-background/80 backdrop-blur-lg supports-[backdrop-filter]:bg-background/60", classNames?.root, className, )} >

{/* Desktop */} {/* Mobile */}

{logo &&

{logo}

}

{locales.length > 0 && (

{langOpen === "mobile" && langDropdown}

)}

{/* Mobile menu panel */} {mobileOpen && (

{links.map((link, index) => ( setMobileOpen(false)} className={cn( "flex items-center rounded-md px-3 py-2.5 text-sm font-medium text-muted-foreground no-underline transition-colors", "hover:bg-accent hover:text-accent-foreground aria-[current=page]:bg-accent aria-[current=page]:text-accent-foreground", FOCUS_RING, classNames?.link, )} > {link.label} ))} {(cta || hasGitHub) && ( {cta && ( setMobileOpen(false)} className={cn(ctaClass, "flex-1")} > {cta.label} {ctaArrow} )} {hasGitHub && githubLink} )}

)}

); }); 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","clsx",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/clsx","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":"clsx"}]]}]}],["$","li","tailwind-merge",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/tailwind-merge","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":"tailwind-merge"}]]}]}],["$","li","lucide-react",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/lucide-react","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":"lucide-react"}]]}]}],["$","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"}]]}]}]]}],["$","$L50",null,{"namespace":"@babelize","registryDependencies":["https://elements.babelize.co/r/locale-types.json","https://elements.babelize.co/r/locale-data.json","https://elements.babelize.co/r/use-controllable-state.json","https://elements.babelize.co/r/use-listbox-navigation.json"]}]]}],null]}],["$","$L51",null,{"files":[{"path":"ui/navbar.tsx","content":"$52","type":"registry:ui"}],"className":"h-[70svh] min-h-80"}]]}]