{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "navbar-4-retro",
  "title": "Navbar 4Retro",
  "dependencies": [
    "@gsap/react",
    "gsap",
    "next",
    "lucide-react"
  ],
  "files": [
    {
      "path": "src/registry/navbars/retro/Navbar4Retro.jsx",
      "content": "\"use client\";\n\nimport React, { useState, useRef, useEffect, useCallback } from \"react\";\nimport { useGSAP } from \"@gsap/react\";\nimport gsap from \"gsap\";\nimport { Draggable, InertiaPlugin } from \"gsap/all\";\nimport Link from \"next/link\";\nimport { Menu } from \"lucide-react\";\n\n/**\n * Note: Ensure you have installed gsap: npm install gsap\n */\n\nconst navItems = [\n  { label: \"PROJECTS\", href: \"#\" },\n  { label: \"CONTACT\", href: \"#\" },\n];\n\nexport function NavbarRetro() {\n  gsap.registerPlugin(Draggable, InertiaPlugin);\n\n  const LOGO_TEXT = \"PIXELFLOW_UI\";\n  const [isNav, setIsNav] = useState(false);\n  const refs = useRef([]);\n  const [activePillStyle, setActivePillStyle] = useState({ width: 0, left: 0 });\n  const navbarRef = useRef(null);\n\n  const toggleNav = useCallback(() => {\n    setIsNav((prev) => !prev);\n  }, []);\n\n  useGSAP(() => {\n    const draggables = [];\n    LOGO_TEXT.split(\"\").forEach((_item, index) => {\n      draggables.push(\n        Draggable.create(`.logo-${index}`, {\n          bounds: \".nav-wrapper\",\n          inertia: true,\n        })[0]\n      );\n    });\n\n    return () => {\n      draggables.forEach((d) => d && d.kill());\n    };\n  }, [isNav]);\n\n  const handlePillStyle = useCallback((index) => {\n    if (!refs.current[index]) return;\n    const rect = refs.current[index].getBoundingClientRect();\n    const navRect = navbarRef.current.getBoundingClientRect();\n\n    setActivePillStyle({\n      width: rect.width,\n      left: rect.left - navRect.left - 4,\n    });\n  }, []);\n\n  const resetPillStyle = useCallback(() => {\n    setActivePillStyle({ width: 0, left: 0 });\n  }, []);\n\n  return (\n    <nav className=\"w-full flex justify-center items-center absolute top-0 z-30 left-0 navbar-wrapper bg-white border-b-2 border-black font-mono\">\n      <div className=\"px-5 md:px-12 py-5 flex items-center gap-4 justify-between w-full z-20\">\n        <Link\n          href=\"/\"\n          className=\"nav-left text-white bg-black border-2 border-black px-4 py-2 font-bold text-sm md:text-xl z-20 whitespace-nowrap uppercase tracking-wider hover:bg-white hover:text-black transition-colors duration-200\"\n        >\n          PIXELFLOW_UI\n        </Link>\n\n        {/* Right side controls */}\n        <div\n          ref={navbarRef}\n          className=\"z-50 border-2 border-black p-1 md:p-1 flex items-center gap-2 bg-white\"\n        >\n          <div className=\"relative flex items-center gap-2 md:gap-4\">\n            \n            {/* Sliding Block */}\n            <div\n              style={{\n                width: `${activePillStyle.width}px`,\n                transform: `translateX(${activePillStyle.left}px)`,\n                opacity: activePillStyle.width > 0 ? 1 : 0,\n              }}\n              className=\"absolute h-full z-10 transition-all duration-300 bg-black cursor-pointer pointer-events-none\"\n            ></div>\n\n            <div className=\"hidden md:flex items-center gap-2\">\n              {navItems.map((item, index) => (\n                <Link\n                  ref={(navItem) => (refs.current[index] = navItem)}\n                  key={index}\n                  href={item.href}\n                  className=\"text-black px-5 py-1 cursor-pointer z-30 hover:text-white transition-colors duration-300 relative font-bold uppercase\"\n                  onMouseEnter={() => handlePillStyle(index)}\n                  onMouseLeave={resetPillStyle}\n                >\n                  {item.label}\n                </Link>\n              ))}\n            </div>\n\n            <div\n              onClick={toggleNav}\n              className=\"flex cursor-pointer w-10 h-10 transition-all duration-200 bg-white border-l-2 border-black hover:bg-black hover:text-white z-30 items-center justify-center text-black\"\n            >\n              <Menu strokeWidth={3} className=\"w-6 h-6\" />\n            </div>\n          </div>\n        </div>\n      </div>\n\n      {/* Fullscreen Overlay */}\n      <div\n        style={{ height: `${isNav ? \"70vh\" : \"0%\"}` }}\n        className=\"bg-white w-full ease-in-out absolute top-0 left-0 nav-bg z-30 overflow-hidden transition-all duration-700 flex flex-col border-b-2 border-black\"\n      >\n        <div className=\"w-full h-full flex flex-col bg-white overflow-hidden relative\">\n          \n          <div className=\"w-full h-[80px] md:h-[100px] flex items-center justify-between px-5 md:px-12 py-5 shrink-0 border-b-2 border-dashed border-black\">\n            <div className=\"nav-left text-black border-2 border-black px-4 py-2 font-bold text-sm md:text-xl z-40 uppercase\">\n              PIXELFLOW_UI\n            </div>\n\n            <div className=\"z-50 flex items-center justify-end\">\n              <div\n                onClick={toggleNav}\n                className=\"flex bg-black w-10 h-10 md:w-12 md:h-12 border-2 border-black transition-all duration-300 justify-center items-center cursor-pointer hover:bg-white hover:text-black z-50 text-white\"\n              >\n                <Menu strokeWidth={3} size={24} />\n              </div>\n            </div>\n          </div>\n\n          <div className=\"relative w-full flex flex-col md:grid md:grid-cols-2 px-5 md:px-12 pb-12 pt-4 flex-1 nav-wrapper overflow-hidden bg-[radial-gradient(#000_1px,transparent_1px)] [background-size:16px_16px]\">\n            <div className=\"w-full flex flex-col justify-start md:justify-end gap-6 z-40 order-2 md:order-1 mt-10 md:mt-0\">\n              <div className=\"space-y-6 flex flex-col text-3xl md:text-5xl font-black uppercase tracking-tighter\">\n                {[\n                  { label: \"Work\", href: \"#\" },\n                  { label: \"Services\", href: \"#\" },\n                  { label: \"About\", href: \"#\" },\n                ].map((item, index) => (\n                  <button\n                    key={index}\n                    className=\"text-left relative group w-fit hover:translate-x-4 transition-transform duration-300\"\n                  >\n                    <span className=\"relative z-10 text-black group-hover:text-white transition-colors duration-0\">\n                        {item.label}\n                    </span>\n                    <span className=\"absolute inset-0 bg-black z-0 w-0 group-hover:w-full transition-all duration-300\"></span>\n                  </button>\n                ))}\n              </div>\n            </div>\n\n            <div className=\"right w-full flex items-center md:items-end justify-center md:justify-end h-[200px] md:h-full relative order-1 md:order-2\">\n              <div className=\"flex flex-col justify-center gap-2 text-4xl md:text-5xl lg:text-7xl font-black text-black relative select-none\">\n                <div className=\"flex gap-1 md:gap-2 flex-wrap md:flex-nowrap justify-center md:justify-end\">\n                  {Array.from({ length: LOGO_TEXT.length }).map((_, index) => (\n                    <div\n                      key={index}\n                      className={`logo-${index} cursor-grab active:cursor-grabbing inline-block hover:text-gray-500 transition-colors`}\n                    >\n                      {LOGO_TEXT[index]}\n                    </div>\n                  ))}\n                </div>\n              </div>\n            </div>\n          </div>\n        </div>\n      </div>\n    </nav>\n  );\n}\n\nexport default NavbarRetro;\n",
      "type": "registry:component"
    }
  ],
  "type": "registry:component"
}