{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "CardNav-TS-TW",
  "type": "registry:block",
  "title": "CardNav",
  "description": "Expandable navigation bar with card panels revealing nested links.",
  "dependencies": [
    "gsap"
  ],
  "files": [
    {
      "path": "public/ts/tailwind/src/ts-tailwind/Components/CardNav/CardNav.tsx",
      "content": "import React, { useLayoutEffect, useRef, useState } from 'react';\r\nimport { gsap } from 'gsap';\r\n// use your own icon import if react-icons is not available\r\nimport { GoArrowUpRight } from 'react-icons/go';\r\n\r\ntype CardNavLink = {\r\n  label: string;\r\n  href: string;\r\n  ariaLabel: string;\r\n};\r\n\r\nexport type CardNavItem = {\r\n  label: string;\r\n  bgColor: string;\r\n  textColor: string;\r\n  links: CardNavLink[];\r\n};\r\n\r\nexport interface CardNavProps {\r\n  logo: string;\r\n  logoAlt?: string;\r\n  items: CardNavItem[];\r\n  className?: string;\r\n  ease?: string;\r\n  baseColor?: string;\r\n  menuColor?: string;\r\n  buttonBgColor?: string;\r\n  buttonTextColor?: string;\r\n}\r\n\r\nconst CardNav: React.FC<CardNavProps> = ({\r\n  logo,\r\n  logoAlt = 'Logo',\r\n  items,\r\n  className = '',\r\n  ease = 'power3.out',\r\n  baseColor = '#fff',\r\n  menuColor,\r\n  buttonBgColor,\r\n  buttonTextColor\r\n}) => {\r\n  const [isHamburgerOpen, setIsHamburgerOpen] = useState(false);\r\n  const [isExpanded, setIsExpanded] = useState(false);\r\n  const navRef = useRef<HTMLDivElement | null>(null);\r\n  const cardsRef = useRef<HTMLDivElement[]>([]);\r\n  const tlRef = useRef<gsap.core.Timeline | null>(null);\r\n\r\n  const calculateHeight = () => {\r\n    const navEl = navRef.current;\r\n    if (!navEl) return 260;\r\n\r\n    const isMobile = window.matchMedia('(max-width: 768px)').matches;\r\n    if (isMobile) {\r\n      const contentEl = navEl.querySelector('.card-nav-content') as HTMLElement;\r\n      if (contentEl) {\r\n        const wasVisible = contentEl.style.visibility;\r\n        const wasPointerEvents = contentEl.style.pointerEvents;\r\n        const wasPosition = contentEl.style.position;\r\n        const wasHeight = contentEl.style.height;\r\n\r\n        contentEl.style.visibility = 'visible';\r\n        contentEl.style.pointerEvents = 'auto';\r\n        contentEl.style.position = 'static';\r\n        contentEl.style.height = 'auto';\r\n\r\n        contentEl.offsetHeight;\r\n\r\n        const topBar = 60;\r\n        const padding = 16;\r\n        const contentHeight = contentEl.scrollHeight;\r\n\r\n        contentEl.style.visibility = wasVisible;\r\n        contentEl.style.pointerEvents = wasPointerEvents;\r\n        contentEl.style.position = wasPosition;\r\n        contentEl.style.height = wasHeight;\r\n\r\n        return topBar + contentHeight + padding;\r\n      }\r\n    }\r\n    return 260;\r\n  };\r\n\r\n  const createTimeline = () => {\r\n    const navEl = navRef.current;\r\n    if (!navEl) return null;\r\n\r\n    gsap.set(navEl, { height: 60, overflow: 'hidden' });\r\n    gsap.set(cardsRef.current, { y: 50, opacity: 0 });\r\n\r\n    const tl = gsap.timeline({ paused: true });\r\n\r\n    tl.to(navEl, {\r\n      height: calculateHeight,\r\n      duration: 0.4,\r\n      ease\r\n    });\r\n\r\n    tl.to(cardsRef.current, { y: 0, opacity: 1, duration: 0.4, ease, stagger: 0.08 }, '-=0.1');\r\n\r\n    return tl;\r\n  };\r\n\r\n  useLayoutEffect(() => {\r\n    const tl = createTimeline();\r\n    tlRef.current = tl;\r\n\r\n    return () => {\r\n      tl?.kill();\r\n      tlRef.current = null;\r\n    };\r\n  }, [ease, items]);\r\n\r\n  useLayoutEffect(() => {\r\n    const handleResize = () => {\r\n      if (!tlRef.current) return;\r\n\r\n      if (isExpanded) {\r\n        const newHeight = calculateHeight();\r\n        gsap.set(navRef.current, { height: newHeight });\r\n\r\n        tlRef.current.kill();\r\n        const newTl = createTimeline();\r\n        if (newTl) {\r\n          newTl.progress(1);\r\n          tlRef.current = newTl;\r\n        }\r\n      } else {\r\n        tlRef.current.kill();\r\n        const newTl = createTimeline();\r\n        if (newTl) {\r\n          tlRef.current = newTl;\r\n        }\r\n      }\r\n    };\r\n\r\n    window.addEventListener('resize', handleResize);\r\n    return () => window.removeEventListener('resize', handleResize);\r\n  }, [isExpanded]);\r\n\r\n  const toggleMenu = () => {\r\n    const tl = tlRef.current;\r\n    if (!tl) return;\r\n    if (!isExpanded) {\r\n      setIsHamburgerOpen(true);\r\n      setIsExpanded(true);\r\n      tl.play(0);\r\n    } else {\r\n      setIsHamburgerOpen(false);\r\n      tl.eventCallback('onReverseComplete', () => setIsExpanded(false));\r\n      tl.reverse();\r\n    }\r\n  };\r\n\r\n  const setCardRef = (i: number) => (el: HTMLDivElement | null) => {\r\n    if (el) cardsRef.current[i] = el;\r\n  };\r\n\r\n  return (\r\n    <div\r\n      className={`card-nav-container absolute left-1/2 -translate-x-1/2 w-[90%] max-w-[800px] z-99 top-[1.2em] md:top-[2em] ${className}`}\r\n    >\r\n      <nav\r\n        ref={navRef}\r\n        className={`card-nav ${isExpanded ? 'open' : ''} block h-[60px] p-0 rounded-xl shadow-md relative overflow-hidden will-change-[height]`}\r\n        style={{ backgroundColor: baseColor }}\r\n      >\r\n        <div className=\"card-nav-top absolute inset-x-0 top-0 h-[60px] flex items-center justify-between p-2 pl-[1.1rem] z-2\">\r\n          <div\r\n            className={`hamburger-menu ${isHamburgerOpen ? 'open' : ''} group h-full flex flex-col items-center justify-center cursor-pointer gap-[6px] order-2 md:order-0`}\r\n            onClick={toggleMenu}\r\n            role=\"button\"\r\n            aria-label={isExpanded ? 'Close menu' : 'Open menu'}\r\n            tabIndex={0}\r\n            style={{ color: menuColor || '#000' }}\r\n          >\r\n            <div\r\n              className={`hamburger-line w-[30px] h-[2px] bg-current transition-[transform,opacity,margin] duration-300 ease-linear origin-[50%_50%] ${\r\n                isHamburgerOpen ? 'translate-y-[4px] rotate-45' : ''\r\n              } group-hover:opacity-75`}\r\n            />\r\n            <div\r\n              className={`hamburger-line w-[30px] h-[2px] bg-current transition-[transform,opacity,margin] duration-300 ease-linear origin-[50%_50%] ${\r\n                isHamburgerOpen ? 'translate-y-[-4px] -rotate-45' : ''\r\n              } group-hover:opacity-75`}\r\n            />\r\n          </div>\r\n\r\n          <div className=\"logo-container flex items-center md:absolute md:left-1/2 md:top-1/2 md:-translate-x-1/2 md:-translate-y-1/2 order-1 md:order-0\">\r\n            <img src={logo} alt={logoAlt} className=\"logo h-[28px]\" />\r\n          </div>\r\n\r\n          <button\r\n            type=\"button\"\r\n            className=\"card-nav-cta-button hidden md:inline-flex border-0 rounded-[0.55rem] px-4 h-full font-medium cursor-pointer transition-colors duration-300\"\r\n            style={{ backgroundColor: buttonBgColor, color: buttonTextColor }}\r\n          >\r\n            Get Started\r\n          </button>\r\n        </div>\r\n\r\n        <div\r\n          className={`card-nav-content absolute left-0 right-0 top-[60px] bottom-0 p-2 flex flex-col items-stretch gap-2 justify-start z-1 ${\r\n            isExpanded ? 'visible pointer-events-auto' : 'invisible pointer-events-none'\r\n          } md:flex-row md:items-end md:gap-[12px]`}\r\n          aria-hidden={!isExpanded}\r\n        >\r\n          {(items || []).slice(0, 3).map((item, idx) => (\r\n            <div\r\n              key={`${item.label}-${idx}`}\r\n              className=\"nav-card select-none relative flex flex-col gap-2 p-[12px_16px] rounded-[0.55rem] min-w-0 flex-[1_1_auto] h-auto min-h-[60px] md:h-full md:min-h-0 md:flex-[1_1_0%]\"\r\n              ref={setCardRef(idx)}\r\n              style={{ backgroundColor: item.bgColor, color: item.textColor }}\r\n            >\r\n              <div className=\"nav-card-label font-normal tracking-[-0.5px] text-[18px] md:text-[22px]\">\r\n                {item.label}\r\n              </div>\r\n              <div className=\"nav-card-links mt-auto flex flex-col gap-[2px]\">\r\n                {item.links?.map((lnk, i) => (\r\n                  <a\r\n                    key={`${lnk.label}-${i}`}\r\n                    className=\"nav-card-link inline-flex items-center gap-[6px] no-underline cursor-pointer transition-opacity duration-300 hover:opacity-75 text-[15px] md:text-[16px]\"\r\n                    href={lnk.href}\r\n                    aria-label={lnk.ariaLabel}\r\n                  >\r\n                    <GoArrowUpRight className=\"nav-card-link-icon shrink-0\" aria-hidden=\"true\" />\r\n                    {lnk.label}\r\n                  </a>\r\n                ))}\r\n              </div>\r\n            </div>\r\n          ))}\r\n        </div>\r\n      </nav>\r\n    </div>\r\n  );\r\n};\r\n\r\nexport default CardNav;\r\n",
      "type": "registry:component"
    }
  ]
}