{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "navbar",
  "title": "Navbar",
  "description": "Five minimal, animated navigation bars: glass pill, scroll morph, sliding underline, dynamic island mega-menu and full-screen overlay.",
  "dependencies": [
    "motion",
    "lucide-react"
  ],
  "registryDependencies": [
    "utils"
  ],
  "files": [
    {
      "path": "registry/new-york/navbar/navbar.tsx",
      "content": "\"use client\"\n\nimport { useEffect, useId, useRef, useState } from \"react\"\nimport {\n  AnimatePresence,\n  animate,\n  motion,\n  useMotionTemplate,\n  useMotionValue,\n  useReducedMotion,\n  type Transition,\n} from \"motion/react\"\nimport { ArrowUpRight } from \"lucide-react\"\nimport { cn } from \"@/lib/utils\"\n\nexport type NavbarVariant = \"pill\" | \"morph\" | \"underline\" | \"island\" | \"overlay\"\n\nexport interface NavbarChildLink {\n  label: string\n  href: string\n  description?: string\n}\n\nexport interface NavbarLink extends NavbarChildLink {\n  /** Sub-links shown in the island mega-menu and the overlay footer. */\n  children?: NavbarChildLink[]\n}\n\nexport interface NavbarProps {\n  /** Top-level links. */\n  links: NavbarLink[]\n  /** Brand shown on the left. Default: a small wordmark */\n  logo?: React.ReactNode\n  /** Call-to-action button on the right. */\n  cta?: { label: string; href: string }\n  /** Href of the current page, marked as active. */\n  activeHref?: string\n  /** Visual style. Default: \"pill\" */\n  variant?: NavbarVariant\n  /** Scroll distance in px before the morph variant turns into a pill. Default: 40 */\n  scrollThreshold?: number\n  /** Hide on fast downward scroll and reveal on scroll up (morph). Default: true */\n  hideOnScroll?: boolean\n  /** Element to read the scroll position from. Default: window */\n  scroller?: HTMLElement | null\n  /** CSS positioning of the bar. Default: \"sticky\" */\n  position?: \"fixed\" | \"sticky\" | \"absolute\"\n  /** Indicator and CTA color (any CSS color). Default: foreground */\n  accentColor?: string\n  /** Called when a link is clicked. Call `e.preventDefault()` to route yourself. */\n  onNavigate?: (href: string, e: React.MouseEvent<HTMLAnchorElement>) => void\n  className?: string\n}\n\ntype Shared = {\n  links: NavbarLink[]\n  logo: React.ReactNode\n  cta?: { label: string; href: string }\n  activeHref?: string\n  accent: string\n  accentColor?: string\n  onNavigate?: NavbarProps[\"onNavigate\"]\n  reduced: boolean\n}\n\nconst POSITION = {\n  fixed: \"fixed inset-x-0 top-0\",\n  sticky: \"sticky top-0\",\n  absolute: \"absolute inset-x-0 top-0\",\n}\n\nconst SPRING: Transition = { type: \"spring\", stiffness: 420, damping: 34 }\nconst SOFT: Transition = { type: \"spring\", stiffness: 260, damping: 30 }\nconst INSTANT: Transition = { duration: 0 }\nconst EASE = [0.76, 0, 0.24, 1] as const\n\nconst HOME = \"/\"\nconst focusRing = \"outline-none focus-visible:ring-2 focus-visible:ring-ring\"\n\nexport function Navbar({\n  links,\n  logo,\n  cta,\n  activeHref,\n  variant = \"pill\",\n  scrollThreshold = 40,\n  hideOnScroll = true,\n  scroller,\n  position = \"sticky\",\n  accentColor,\n  onNavigate,\n  className,\n}: NavbarProps) {\n  const reduced = !!useReducedMotion()\n  const s: Shared = {\n    links,\n    logo: logo ?? <DefaultLogo onNavigate={onNavigate} />,\n    cta,\n    activeHref,\n    accent: accentColor ?? \"currentColor\",\n    accentColor,\n    onNavigate,\n    reduced,\n  }\n  const root = cn(\"z-50 w-full\", POSITION[position], className)\n\n  switch (variant) {\n    case \"morph\":\n      return (\n        <MorphNav s={s} className={root} scroller={scroller} threshold={scrollThreshold} hideOnScroll={hideOnScroll} />\n      )\n    case \"underline\":\n      return <UnderlineNav s={s} className={root} />\n    case \"island\":\n      return <IslandNav s={s} className={root} />\n    case \"overlay\":\n      return <OverlayNav s={s} className={root} />\n    default:\n      return <PillNav s={s} className={root} />\n  }\n}\n\n// ------------------------------------------------------------------ shared\n\nfunction DefaultLogo({ onNavigate }: { onNavigate?: NavbarProps[\"onNavigate\"] }) {\n  return (\n    <a\n      href={HOME}\n      aria-label=\"Home\"\n      onClick={(e) => onNavigate?.(HOME, e)}\n      className={cn(\"flex items-center gap-2 rounded-md text-[15px] font-semibold tracking-tight\", focusRing)}\n    >\n      <span aria-hidden className=\"size-3 rotate-45 rounded-[3px] bg-current\" />\n      acme\n    </a>\n  )\n}\n\nfunction useEscape(active: boolean, onEscape: () => void) {\n  useEffect(() => {\n    if (!active) return\n    const onKey = (e: KeyboardEvent) => {\n      if (e.key === \"Escape\") onEscape()\n    }\n    document.addEventListener(\"keydown\", onKey)\n    return () => document.removeEventListener(\"keydown\", onKey)\n  }, [active, onEscape])\n}\n\nfunction useScrollState(scroller: HTMLElement | null | undefined, threshold: number) {\n  const [state, setState] = useState({ scrolled: false, hidden: false })\n\n  useEffect(() => {\n    const target: HTMLElement | Window = scroller ?? window\n    const read = () => (scroller ? scroller.scrollTop : window.scrollY)\n    let last = read()\n\n    const onScroll = () => {\n      const y = read()\n      const delta = y - last\n      last = y\n      setState((prev) => {\n        const scrolled = y > threshold\n        let hidden = prev.hidden\n        if (y <= threshold + 80) hidden = false\n        else if (delta > 8) hidden = true\n        else if (delta < -4) hidden = false\n        return scrolled === prev.scrolled && hidden === prev.hidden ? prev : { scrolled, hidden }\n      })\n    }\n\n    const raf = requestAnimationFrame(onScroll)\n    target.addEventListener(\"scroll\", onScroll, { passive: true })\n    return () => {\n      cancelAnimationFrame(raf)\n      target.removeEventListener(\"scroll\", onScroll)\n    }\n  }, [scroller, threshold])\n\n  return state\n}\n\nfunction Cta({ s, inverted, className }: { s: Shared; inverted?: boolean; className?: string }) {\n  if (!s.cta) return null\n  const { href, label } = s.cta\n  return (\n    <a\n      href={href}\n      onClick={(e) => s.onNavigate?.(href, e)}\n      style={s.accentColor ? { background: s.accentColor, color: \"#fff\" } : undefined}\n      className={cn(\n        \"group inline-flex h-8 shrink-0 items-center gap-1 whitespace-nowrap rounded-full pl-3.5 pr-3 text-sm font-medium transition-[opacity,transform] hover:opacity-90 active:scale-[0.97]\",\n        inverted ? \"bg-background text-foreground\" : \"bg-foreground text-background\",\n        focusRing,\n        className\n      )}\n    >\n      {label}\n      <ArrowUpRight className=\"size-3.5 transition-transform group-hover:-translate-y-px group-hover:translate-x-px\" />\n    </a>\n  )\n}\n\nfunction Burger({\n  open,\n  onClick,\n  controls,\n  className,\n  ref,\n}: {\n  open: boolean\n  onClick: () => void\n  controls: string\n  className?: string\n  ref?: React.Ref<HTMLButtonElement>\n}) {\n  const reduced = useReducedMotion()\n  const t: Transition = reduced ? INSTANT : { type: \"spring\", stiffness: 400, damping: 26 }\n  const line = \"absolute inset-x-0 top-1/2 -mt-[0.75px] h-[1.5px] rounded-full bg-current\"\n\n  return (\n    <button\n      ref={ref}\n      type=\"button\"\n      aria-expanded={open}\n      aria-controls={controls}\n      aria-label={open ? \"Close menu\" : \"Open menu\"}\n      onClick={onClick}\n      className={cn(\"grid size-9 shrink-0 place-items-center rounded-full\", focusRing, className)}\n    >\n      <span className=\"relative block h-3 w-4\">\n        <motion.span\n          className={line}\n          initial={false}\n          animate={open ? { y: 0, rotate: 45 } : { y: -3.5, rotate: 0 }}\n          transition={t}\n        />\n        <motion.span\n          className={line}\n          initial={false}\n          animate={open ? { y: 0, rotate: -45 } : { y: 3.5, rotate: 0 }}\n          transition={t}\n        />\n      </span>\n    </button>\n  )\n}\n\nfunction CapsuleLinks({\n  s,\n  tone = \"default\",\n  openIndex,\n  onHoverLink,\n  className,\n}: {\n  s: Shared\n  tone?: \"default\" | \"inverted\"\n  openIndex?: number | null\n  onHoverLink?: (index: number) => void\n  className?: string\n}) {\n  const id = useId()\n  const [hover, setHover] = useState<string | null>(null)\n  const inverted = tone === \"inverted\"\n  const t = s.reduced ? INSTANT : SPRING\n\n  return (\n    <ul className={cn(\"items-center\", className)} onPointerLeave={() => setHover(null)}>\n      {s.links.map((l, i) => {\n        const active = l.href === s.activeHref\n        const hasMenu = !!l.children?.length\n        const enter = () => {\n          setHover(l.href)\n          onHoverLink?.(i)\n        }\n        return (\n          <li key={l.href}>\n            <a\n              href={l.href}\n              aria-current={active ? \"page\" : undefined}\n              aria-expanded={onHoverLink && hasMenu ? openIndex === i : undefined}\n              onClick={(e) => s.onNavigate?.(l.href, e)}\n              onPointerEnter={enter}\n              onFocus={enter}\n              className={cn(\n                \"relative isolate flex items-center rounded-full px-3 py-1.5 text-sm transition-colors duration-200\",\n                focusRing,\n                inverted\n                  ? active || hover === l.href\n                    ? \"text-background\"\n                    : \"text-background/60\"\n                  : active || hover === l.href\n                    ? \"text-foreground\"\n                    : \"text-muted-foreground\"\n              )}\n            >\n              <AnimatePresence>\n                {hover === l.href && (\n                  <motion.span\n                    layoutId={`${id}-hl`}\n                    className={cn(\"absolute inset-0 -z-10 rounded-full\", inverted ? \"bg-background/15\" : \"bg-muted\")}\n                    initial={{ opacity: 0 }}\n                    animate={{ opacity: 1 }}\n                    exit={{ opacity: 0 }}\n                    transition={t}\n                  />\n                )}\n              </AnimatePresence>\n              {l.label}\n              {active && (\n                <motion.span\n                  layoutId={`${id}-dot`}\n                  className=\"absolute inset-x-0 bottom-0.5 mx-auto size-1 rounded-full\"\n                  style={{ background: s.accent }}\n                  transition={t}\n                />\n              )}\n            </a>\n          </li>\n        )\n      })}\n    </ul>\n  )\n}\n\nfunction MobileSheet({\n  s,\n  id,\n  open,\n  onClose,\n  className,\n}: {\n  s: Shared\n  id: string\n  open: boolean\n  onClose: () => void\n  className?: string\n}) {\n  const item = { hidden: { opacity: 0, y: 10 }, show: { opacity: 1, y: 0 } }\n\n  return (\n    <AnimatePresence>\n      {open && (\n        <motion.div\n          id={id}\n          initial={{ opacity: 0, y: -8, scale: 0.98 }}\n          animate={{ opacity: 1, y: 0, scale: 1 }}\n          exit={{ opacity: 0, y: -8, scale: 0.98 }}\n          transition={s.reduced ? INSTANT : { duration: 0.22, ease: [0.22, 1, 0.36, 1] }}\n          className={cn(\"absolute top-full origin-top\", className)}\n        >\n          <motion.ul\n            initial=\"hidden\"\n            animate=\"show\"\n            variants={{ show: { transition: { staggerChildren: s.reduced ? 0 : 0.045, delayChildren: 0.04 } } }}\n            className=\"flex flex-col p-2\"\n          >\n            {s.links.map((l) => (\n              <motion.li key={l.href} variants={item}>\n                <a\n                  href={l.href}\n                  aria-current={l.href === s.activeHref ? \"page\" : undefined}\n                  onClick={(e) => {\n                    s.onNavigate?.(l.href, e)\n                    onClose()\n                  }}\n                  className={cn(\n                    \"flex items-center justify-between rounded-xl px-3 py-2.5 text-[15px] transition-colors hover:bg-muted\",\n                    focusRing\n                  )}\n                >\n                  {l.label}\n                  {l.href === s.activeHref && <span className=\"size-1.5 rounded-full\" style={{ background: s.accent }} />}\n                </a>\n              </motion.li>\n            ))}\n            {s.cta && (\n              <motion.li variants={item} className=\"mt-1 px-1 pb-1\">\n                <Cta s={s} className=\"h-10 w-full justify-center\" />\n              </motion.li>\n            )}\n          </motion.ul>\n        </motion.div>\n      )}\n    </AnimatePresence>\n  )\n}\n\n// ------------------------------------------------------------------ pill\n\nfunction PillNav({ s, className }: { s: Shared; className?: string }) {\n  const [open, setOpen] = useState(false)\n  const sheetId = useId()\n  useEscape(open, () => setOpen(false))\n\n  return (\n    <header className={cn(\"@container flex justify-center px-3 pt-4\", className)}>\n      <nav\n        aria-label=\"Main\"\n        className=\"flex w-full max-w-max items-center gap-1 rounded-full border bg-background/70 p-1.5 pl-4 shadow-lg shadow-black/[0.04] backdrop-blur-xl dark:shadow-black/30\"\n      >\n        <div className=\"mr-2 flex shrink-0 items-center\">{s.logo}</div>\n        <CapsuleLinks s={s} className=\"hidden @lg:flex\" />\n        <div className=\"ml-auto flex items-center gap-1 @lg:ml-2\">\n          <Cta s={s} className=\"hidden @md:inline-flex\" />\n          <Burger open={open} onClick={() => setOpen((o) => !o)} controls={sheetId} className=\"@lg:hidden\" />\n        </div>\n      </nav>\n      <MobileSheet\n        s={s}\n        id={sheetId}\n        open={open}\n        onClose={() => setOpen(false)}\n        className=\"inset-x-3 mt-2 rounded-2xl border bg-popover text-popover-foreground shadow-xl @lg:hidden\"\n      />\n    </header>\n  )\n}\n\n// ------------------------------------------------------------------ morph\n\nfunction MorphNav({\n  s,\n  className,\n  scroller,\n  threshold,\n  hideOnScroll,\n}: {\n  s: Shared\n  className?: string\n  scroller?: HTMLElement | null\n  threshold: number\n  hideOnScroll: boolean\n}) {\n  const { scrolled, hidden } = useScrollState(scroller, threshold)\n  const [open, setOpen] = useState(false)\n  const sheetId = useId()\n  useEscape(open, () => setOpen(false))\n  const t = s.reduced ? INSTANT : SOFT\n\n  return (\n    <motion.header\n      className={cn(\"@container flex h-[72px] justify-center\", className)}\n      initial={false}\n      animate={{ y: hideOnScroll && hidden && !open ? \"-110%\" : \"0%\" }}\n      transition={t}\n    >\n      <motion.nav\n        layout\n        aria-label=\"Main\"\n        transition={t}\n        style={{ borderRadius: scrolled ? 24 : 0 }}\n        className={cn(\n          \"flex items-center gap-2 border transition-[background-color,border-color,box-shadow] duration-500\",\n          scrolled\n            ? \"mt-3 h-12 w-[min(100%_-_1.5rem,42rem)] border-border bg-background/70 pl-4 pr-1.5 shadow-xl shadow-black/[0.06] backdrop-blur-xl dark:shadow-black/40\"\n            : \"h-[72px] w-full border-transparent bg-transparent px-6\"\n        )}\n      >\n        <motion.div layout=\"position\" transition={t} className=\"flex shrink-0 items-center\">\n          {s.logo}\n        </motion.div>\n        <motion.div layout=\"position\" transition={t} className=\"mx-auto hidden @lg:block\">\n          <CapsuleLinks s={s} className=\"flex\" />\n        </motion.div>\n        <motion.div layout=\"position\" transition={t} className=\"ml-auto flex items-center gap-1 @lg:ml-0\">\n          <Cta s={s} className=\"hidden @md:inline-flex\" />\n          <Burger open={open} onClick={() => setOpen((o) => !o)} controls={sheetId} className=\"@lg:hidden\" />\n        </motion.div>\n      </motion.nav>\n      <MobileSheet\n        s={s}\n        id={sheetId}\n        open={open}\n        onClose={() => setOpen(false)}\n        className=\"inset-x-3 mt-2 rounded-2xl border bg-popover text-popover-foreground shadow-xl @lg:hidden\"\n      />\n    </motion.header>\n  )\n}\n\n// ------------------------------------------------------------------ underline\n\nfunction UnderlineNav({ s, className }: { s: Shared; className?: string }) {\n  const [open, setOpen] = useState(false)\n  const [hover, setHover] = useState<string | null>(null)\n  const sheetId = useId()\n  const id = useId()\n  useEscape(open, () => setOpen(false))\n  const current = hover ?? s.activeHref\n  const t = s.reduced ? INSTANT : SPRING\n\n  return (\n    <header className={cn(\"@container border-b bg-background/80 backdrop-blur-xl\", className)}>\n      <nav aria-label=\"Main\" className=\"mx-auto flex h-14 max-w-6xl items-center gap-4 px-5\">\n        <div className=\"mr-2 flex shrink-0 items-center\">{s.logo}</div>\n        <ul className=\"hidden h-full items-stretch @lg:flex\" onPointerLeave={() => setHover(null)}>\n          {s.links.map((l) => (\n            <li key={l.href} className=\"relative flex\">\n              <a\n                href={l.href}\n                aria-current={l.href === s.activeHref ? \"page\" : undefined}\n                onClick={(e) => s.onNavigate?.(l.href, e)}\n                onPointerEnter={() => setHover(l.href)}\n                onFocus={() => setHover(l.href)}\n                onBlur={() => setHover(null)}\n                className={cn(\n                  \"relative flex items-center px-3 text-sm transition-colors duration-200 focus-visible:ring-inset\",\n                  focusRing,\n                  current === l.href ? \"text-foreground\" : \"text-muted-foreground\"\n                )}\n              >\n                {l.label}\n                {current === l.href && (\n                  <motion.span\n                    layoutId={`${id}-line`}\n                    className=\"absolute inset-x-3 -bottom-px h-0.5 rounded-full\"\n                    style={{ background: s.accent }}\n                    transition={t}\n                  />\n                )}\n              </a>\n            </li>\n          ))}\n        </ul>\n        <div className=\"ml-auto flex items-center gap-1\">\n          <Cta s={s} className=\"hidden @md:inline-flex\" />\n          <Burger open={open} onClick={() => setOpen((o) => !o)} controls={sheetId} className=\"-mr-2 @lg:hidden\" />\n        </div>\n      </nav>\n      <MobileSheet\n        s={s}\n        id={sheetId}\n        open={open}\n        onClose={() => setOpen(false)}\n        className=\"inset-x-0 border-b bg-background shadow-lg shadow-black/5 @lg:hidden\"\n      />\n    </header>\n  )\n}\n\n// ------------------------------------------------------------------ island\n\nfunction IslandNav({ s, className }: { s: Shared; className?: string }) {\n  const [menu, setMenu] = useState<number | null>(null)\n  const [mobile, setMobile] = useState(false)\n  const panelId = useId()\n  const expanded = menu !== null || mobile\n  const close = () => {\n    setMenu(null)\n    setMobile(false)\n  }\n  useEscape(expanded, close)\n\n  const t: Transition = s.reduced ? INSTANT : { type: \"spring\", stiffness: 380, damping: 32 }\n  const fade: Transition = s.reduced ? INSTANT : { duration: 0.2, ease: \"easeOut\" }\n  const children = menu !== null ? s.links[menu]?.children : undefined\n\n  return (\n    <header className={cn(\"@container flex justify-center px-3 pt-3\", className)}>\n      <motion.nav\n        layout\n        aria-label=\"Main\"\n        transition={t}\n        onPointerLeave={() => setMenu(null)}\n        style={{ borderRadius: expanded ? 26 : 22 }}\n        className={cn(\n          \"relative overflow-hidden bg-foreground text-background shadow-2xl shadow-black/25\",\n          expanded && \"w-[min(36rem,100cqw_-_1.5rem)]\"\n        )}\n      >\n        <div className=\"flex h-11 items-center gap-1 pl-4 pr-1.5\">\n          <motion.div layout=\"position\" transition={t} className=\"mr-2 flex shrink-0 items-center\">\n            {s.logo}\n          </motion.div>\n          <motion.div layout=\"position\" transition={t} className=\"hidden @lg:block\">\n            <CapsuleLinks\n              s={s}\n              tone=\"inverted\"\n              openIndex={menu}\n              onHoverLink={(i) => {\n                setMobile(false)\n                setMenu(s.links[i]?.children?.length ? i : null)\n              }}\n              className=\"flex\"\n            />\n          </motion.div>\n          <motion.div layout=\"position\" transition={t} className=\"ml-auto flex items-center gap-1 pl-2\">\n            <Cta s={s} inverted className=\"hidden h-8 @md:inline-flex\" />\n            <Burger\n              open={mobile}\n              onClick={() => {\n                setMenu(null)\n                setMobile((m) => !m)\n              }}\n              controls={panelId}\n              className=\"@lg:hidden\"\n            />\n          </motion.div>\n        </div>\n\n        <AnimatePresence mode=\"popLayout\" initial={false}>\n          {children && (\n            <motion.div\n              key={menu}\n              initial={{ opacity: 0, y: 6, filter: \"blur(4px)\" }}\n              animate={{ opacity: 1, y: 0, filter: \"blur(0px)\" }}\n              exit={{ opacity: 0, y: -6, filter: \"blur(4px)\" }}\n              transition={fade}\n              className=\"grid grid-cols-1 gap-0.5 p-2 pt-1 @md:grid-cols-2\"\n            >\n              {children.map((c) => (\n                <a\n                  key={c.href}\n                  href={c.href}\n                  onClick={(e) => {\n                    s.onNavigate?.(c.href, e)\n                    close()\n                  }}\n                  className={cn(\"rounded-2xl px-3 py-2.5 transition-colors hover:bg-background/10\", focusRing)}\n                >\n                  <span className=\"block text-sm font-medium\">{c.label}</span>\n                  {c.description && (\n                    <span className=\"mt-0.5 block text-xs leading-relaxed text-background/55\">{c.description}</span>\n                  )}\n                </a>\n              ))}\n            </motion.div>\n          )}\n          {mobile && (\n            <motion.ul\n              key=\"mobile\"\n              id={panelId}\n              initial=\"hidden\"\n              animate=\"show\"\n              exit={{ opacity: 0 }}\n              variants={{ show: { transition: { staggerChildren: s.reduced ? 0 : 0.04 } } }}\n              className=\"flex flex-col p-2 pt-1\"\n            >\n              {s.links.map((l) => (\n                <motion.li key={l.href} variants={{ hidden: { opacity: 0, y: 8 }, show: { opacity: 1, y: 0 } }}>\n                  <a\n                    href={l.href}\n                    aria-current={l.href === s.activeHref ? \"page\" : undefined}\n                    onClick={(e) => {\n                      s.onNavigate?.(l.href, e)\n                      close()\n                    }}\n                    className={cn(\n                      \"flex items-center justify-between rounded-2xl px-3 py-2.5 text-[15px] transition-colors hover:bg-background/10\",\n                      focusRing\n                    )}\n                  >\n                    {l.label}\n                    {l.href === s.activeHref && <span className=\"size-1.5 rounded-full\" style={{ background: s.accent }} />}\n                  </a>\n                </motion.li>\n              ))}\n            </motion.ul>\n          )}\n        </AnimatePresence>\n      </motion.nav>\n    </header>\n  )\n}\n\n// ------------------------------------------------------------------ overlay\n\nfunction OverlayNav({ s, className }: { s: Shared; className?: string }) {\n  const [open, setOpen] = useState(false)\n  const menuId = useId()\n  const burgerRef = useRef<HTMLButtonElement>(null)\n  const overlayRef = useRef<HTMLDivElement>(null)\n  useEscape(open, () => setOpen(false))\n\n  const x = useMotionValue(0)\n  const y = useMotionValue(0)\n  const r = useMotionValue(0)\n  const clipPath = useMotionTemplate`circle(${r}px at ${x}px ${y}px)`\n  const { reduced } = s\n\n  // Grow the circle from the burger to the farthest corner of the overlay\n  useEffect(() => {\n    const b = burgerRef.current?.getBoundingClientRect()\n    const o = overlayRef.current?.getBoundingClientRect()\n    if (!b || !o) return\n    const cx = b.left + b.width / 2 - o.left\n    const cy = b.top + b.height / 2 - o.top\n    x.set(cx)\n    y.set(cy)\n    const target = open ? Math.hypot(Math.max(cx, o.width - cx), Math.max(cy, o.height - cy)) : 0\n    const controls = animate(r, target, reduced ? INSTANT : { duration: open ? 0.75 : 0.55, ease: EASE })\n    return () => controls.stop()\n  }, [open, reduced, r, x, y])\n\n  const secondary = s.links.flatMap((l) => l.children ?? []).slice(0, 6)\n  const rise: Transition = { duration: 0.8, ease: [0.22, 1, 0.36, 1] }\n\n  return (\n    <nav aria-label=\"Main\" className={className}>\n      <div\n        className={cn(\n          \"relative z-10 flex h-16 items-center justify-between px-5 transition-[color,background-color] duration-500\",\n          open ? \"bg-transparent text-background delay-150\" : \"bg-background/80 text-foreground backdrop-blur-xl\"\n        )}\n      >\n        <div className=\"flex shrink-0 items-center\">{s.logo}</div>\n        <div className=\"flex items-center gap-1\">\n          <span aria-hidden className=\"relative h-5 overflow-hidden text-sm\">\n            <motion.span\n              className=\"flex flex-col\"\n              initial={false}\n              animate={{ y: open ? \"-50%\" : \"0%\" }}\n              transition={reduced ? INSTANT : { duration: 0.5, ease: EASE }}\n            >\n              <span className=\"h-5 leading-5\">Menu</span>\n              <span className=\"h-5 leading-5\">Close</span>\n            </motion.span>\n          </span>\n          <Burger ref={burgerRef} open={open} onClick={() => setOpen((o) => !o)} controls={menuId} className=\"-mr-2\" />\n        </div>\n      </div>\n\n      <motion.div\n        ref={overlayRef}\n        id={menuId}\n        inert={!open}\n        aria-hidden={!open}\n        style={{ clipPath }}\n        className={cn(\n          \"fixed inset-0 flex flex-col bg-foreground px-6 pb-8 pt-24 text-background sm:px-10\",\n          !open && \"pointer-events-none\"\n        )}\n      >\n        <div className=\"mx-auto flex w-full max-w-5xl flex-1 flex-col justify-between gap-10\">\n          <ul className=\"flex flex-col\">\n            {s.links.map((l, i) => {\n              const active = l.href === s.activeHref\n              return (\n                <li key={l.href} className=\"overflow-hidden\">\n                  <motion.a\n                    href={l.href}\n                    aria-current={active ? \"page\" : undefined}\n                    onClick={(e) => {\n                      s.onNavigate?.(l.href, e)\n                      setOpen(false)\n                    }}\n                    initial={false}\n                    animate={open ? { y: \"0%\", opacity: 1 } : { y: \"105%\", opacity: 0 }}\n                    transition={reduced ? INSTANT : { ...rise, delay: open ? 0.25 + i * 0.07 : 0 }}\n                    className={cn(\n                      \"group flex items-baseline gap-4 rounded-lg py-1 text-5xl font-semibold tracking-tighter sm:text-7xl\",\n                      focusRing\n                    )}\n                  >\n                    <span className=\"w-6 font-mono text-xs font-normal tracking-normal text-background/40 tabular-nums\">\n                      {String(i + 1).padStart(2, \"0\")}\n                    </span>\n                    <span\n                      className={cn(\n                        \"transition-[opacity,transform] duration-300 group-hover:translate-x-2\",\n                        active ? \"opacity-100\" : \"opacity-70 group-hover:opacity-100\"\n                      )}\n                    >\n                      {l.label}\n                    </span>\n                    {active && (\n                      <span\n                        className=\"size-2 self-center rounded-full\"\n                        style={{ background: s.accentColor ?? \"currentColor\" }}\n                      />\n                    )}\n                  </motion.a>\n                </li>\n              )\n            })}\n          </ul>\n\n          <motion.div\n            initial={false}\n            animate={{ opacity: open ? 1 : 0, y: open ? 0 : 12 }}\n            transition={reduced ? INSTANT : { duration: 0.5, delay: open ? 0.5 : 0 }}\n            className=\"flex flex-wrap items-end justify-between gap-6 border-t border-background/15 pt-5 text-sm\"\n          >\n            {secondary.length > 0 && (\n              <ul className=\"grid grid-cols-2 gap-x-8 gap-y-1.5 sm:grid-cols-3\">\n                {secondary.map((c) => (\n                  <li key={c.href}>\n                    <a\n                      href={c.href}\n                      onClick={(e) => {\n                        s.onNavigate?.(c.href, e)\n                        setOpen(false)\n                      }}\n                      className={cn(\"rounded text-background/55 transition-colors hover:text-background\", focusRing)}\n                    >\n                      {c.label}\n                    </a>\n                  </li>\n                ))}\n              </ul>\n            )}\n            <Cta s={s} inverted className=\"h-10 px-5\" />\n          </motion.div>\n        </div>\n      </motion.div>\n    </nav>\n  )\n}\n",
      "type": "registry:component"
    }
  ],
  "docs": "Docs, live playground and every prop: https://trytweenly.vercel.app/docs/components/navbar",
  "type": "registry:component"
}