{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "resizable-header",
  "title": "Resizable Header",
  "description": "A sticky navbar that springs into a compact, blurred floating pill as you scroll, with a shared-element active indicator.",
  "dependencies": ["framer-motion"],
  "registryDependencies": ["@godui/godui-theme"],
  "files": [
    {
      "path": "packages/components/src/resizable-header/resizable-header.tsx",
      "content": "\"use client\";\n\nimport {\n  AnimatePresence,\n  motion,\n  useMotionValueEvent,\n  useReducedMotion,\n  useScroll,\n} from \"framer-motion\";\nimport * as React from \"react\";\n\nexport type HeaderLink = {\n  label: string;\n  href: string;\n};\n\nexport type ResizableHeaderProps = Omit<\n  React.HTMLAttributes<HTMLElement>,\n  \"onChange\"\n> & {\n  /** Brand mark shown on the left. */\n  logo?: React.ReactNode;\n  /** Primary navigation links. */\n  links?: HeaderLink[];\n  /** Value matching a link `href` to mark active. */\n  activeHref?: string;\n  /** Call-to-action node shown on the right. */\n  cta?: React.ReactNode;\n  /** Scroll distance (px) before the bar morphs into a floating pill. */\n  scrollThreshold?: number;\n  /** Stick the header to the top of the viewport. */\n  sticky?: boolean;\n  /** Scroll container to track. Defaults to the window. */\n  scrollRef?: React.RefObject<HTMLElement | null>;\n  /** Called when a link is clicked, with its href. */\n  onNavigate?: (href: string) => void;\n};\n\nlet headerSeed = 0;\n\nconst ResizableHeader = React.forwardRef<HTMLElement, ResizableHeaderProps>(\n  (\n    {\n      logo,\n      links = [],\n      activeHref,\n      cta,\n      scrollThreshold = 24,\n      sticky = true,\n      scrollRef,\n      onNavigate,\n      className,\n      ...props\n    },\n    ref,\n  ) => {\n    const reduceMotion = useReducedMotion();\n    const ids = React.useMemo(() => {\n      const n = headerSeed++;\n      return { pill: `header-pill-${n}` };\n    }, []);\n    const { scrollY } = useScroll(\n      scrollRef ? { container: scrollRef } : undefined,\n    );\n    const [shrunk, setShrunk] = React.useState(false);\n    const [hovered, setHovered] = React.useState<string | null>(null);\n    const [open, setOpen] = React.useState(false);\n\n    useMotionValueEvent(scrollY, \"change\", (latest) => {\n      setShrunk(latest > scrollThreshold);\n    });\n\n    const spring = reduceMotion\n      ? { duration: 0 }\n      : ({ type: \"spring\", stiffness: 320, damping: 32, mass: 0.9 } as const);\n\n    const select = (href: string) => {\n      onNavigate?.(href);\n      setOpen(false);\n    };\n\n    return (\n      <header\n        ref={ref}\n        className={`${sticky ? \"sticky top-0\" : \"relative\"} z-sticky flex w-full max-w-full justify-center overflow-x-clip px-4 ${className ?? \"\"}`}\n        {...props}\n      >\n        <motion.nav\n          layout\n          transition={spring}\n          aria-label=\"Main\"\n          className={`mt-3 flex min-w-0 max-w-full items-center justify-between gap-4 border border-border bg-background/70 backdrop-blur-xl ${\n            shrunk\n              ? \"w-full max-w-2xl rounded-full px-3 py-2 shadow-lg\"\n              : \"w-full max-w-5xl rounded-2xl px-4 py-3 shadow-sm\"\n          }`}\n        >\n          <div className=\"flex shrink-0 items-center gap-2 font-semibold text-foreground\">\n            {logo ?? \"GodUI\"}\n          </div>\n\n          <ul\n            className=\"hidden items-center gap-1 md:flex\"\n            onMouseLeave={() => setHovered(null)}\n          >\n            {links.map((link) => {\n              const isActive = link.href === activeHref;\n              return (\n                <li key={link.href} className=\"relative\">\n                  <a\n                    href={link.href}\n                    aria-current={isActive ? \"page\" : undefined}\n                    onMouseEnter={() => setHovered(link.href)}\n                    onClick={(e) => {\n                      if (onNavigate) {\n                        e.preventDefault();\n                        select(link.href);\n                      }\n                    }}\n                    className={`relative block rounded-full px-3 py-1.5 font-medium text-sm [transition:color_150ms_ease] focus:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background ${\n                      isActive\n                        ? \"text-foreground\"\n                        : \"text-muted-foreground hover:text-foreground\"\n                    }`}\n                  >\n                    {hovered === link.href && (\n                      <motion.span\n                        layoutId={`${ids.pill}-hover`}\n                        transition={spring}\n                        className=\"absolute inset-0 rounded-full bg-accent\"\n                      />\n                    )}\n                    {isActive && (\n                      <motion.span\n                        layoutId={ids.pill}\n                        transition={spring}\n                        className=\"absolute inset-x-2 -bottom-0.5 h-0.5 rounded-full bg-foreground\"\n                      />\n                    )}\n                    <span className=\"relative\">{link.label}</span>\n                  </a>\n                </li>\n              );\n            })}\n          </ul>\n\n          <div className=\"flex shrink-0 items-center gap-2\">\n            {cta && <div className=\"hidden md:block\">{cta}</div>}\n            <button\n              type=\"button\"\n              aria-label=\"Toggle menu\"\n              aria-expanded={open}\n              onClick={() => setOpen((v) => !v)}\n              className=\"inline-flex h-9 w-9 items-center justify-center rounded-full text-foreground [transition:background-color_150ms_ease] hover:bg-accent focus:outline-none focus-visible:ring-2 focus-visible:ring-ring md:hidden\"\n            >\n              <motion.span\n                animate={open ? \"open\" : \"closed\"}\n                className=\"relative block h-4 w-5\"\n              >\n                <motion.span\n                  variants={{\n                    closed: { rotate: 0, y: -4 },\n                    open: { rotate: 45, y: 0 },\n                  }}\n                  transition={spring}\n                  className=\"absolute inset-x-0 top-1/2 block h-0.5 rounded-full bg-current\"\n                />\n                <motion.span\n                  variants={{\n                    closed: { rotate: 0, y: 4 },\n                    open: { rotate: -45, y: 0 },\n                  }}\n                  transition={spring}\n                  className=\"absolute inset-x-0 top-1/2 block h-0.5 rounded-full bg-current\"\n                />\n              </motion.span>\n            </button>\n          </div>\n        </motion.nav>\n\n        <AnimatePresence>\n          {open && (\n            <motion.div\n              initial={reduceMotion ? { opacity: 0 } : { opacity: 0, y: -8 }}\n              animate={{ opacity: 1, y: 0 }}\n              exit={reduceMotion ? { opacity: 0 } : { opacity: 0, y: -8 }}\n              transition={\n                reduceMotion\n                  ? { duration: 0 }\n                  : { duration: 0.2, ease: \"easeOut\" }\n              }\n              className=\"absolute inset-x-4 top-full mt-2 origin-top rounded-2xl border border-border bg-background p-2 shadow-xl md:hidden\"\n            >\n              <ul className=\"flex flex-col\">\n                {links.map((link) => {\n                  const isActive = link.href === activeHref;\n                  return (\n                    <li key={link.href}>\n                      <a\n                        href={link.href}\n                        aria-current={isActive ? \"page\" : undefined}\n                        onClick={(e) => {\n                          if (onNavigate) {\n                            e.preventDefault();\n                            select(link.href);\n                          } else {\n                            setOpen(false);\n                          }\n                        }}\n                        className={`block rounded-xl px-3 py-2.5 font-medium text-sm [transition:background-color_150ms_ease] hover:bg-accent ${\n                          isActive ? \"text-foreground\" : \"text-muted-foreground\"\n                        }`}\n                      >\n                        {link.label}\n                      </a>\n                    </li>\n                  );\n                })}\n              </ul>\n              {cta && <div className=\"mt-2 px-1\">{cta}</div>}\n            </motion.div>\n          )}\n        </AnimatePresence>\n      </header>\n    );\n  },\n);\nResizableHeader.displayName = \"ResizableHeader\";\n\nexport { ResizableHeader };\n",
      "type": "registry:ui",
      "target": "components/godui/resizable-header.tsx"
    }
  ],
  "type": "registry:ui"
}