{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "BubbleMenu-TS-TW",
  "type": "registry:block",
  "title": "BubbleMenu",
  "description": "Floating circular expanding menu with staggered item reveal.",
  "dependencies": [
    "gsap"
  ],
  "files": [
    {
      "path": "public/ts/tailwind/src/ts-tailwind/Components/BubbleMenu/BubbleMenu.tsx",
      "content": "import type { CSSProperties, ReactNode } from 'react';\r\nimport { useEffect, useRef, useState } from 'react';\r\nimport { gsap } from 'gsap';\r\n\r\ntype MenuItem = {\r\n  label: string;\r\n  href: string;\r\n  ariaLabel?: string;\r\n  rotation?: number;\r\n  hoverStyles?: {\r\n    bgColor?: string;\r\n    textColor?: string;\r\n  };\r\n};\r\n\r\nexport type BubbleMenuProps = {\r\n  logo: ReactNode | string;\r\n  onMenuClick?: (open: boolean) => void;\r\n  className?: string;\r\n  style?: CSSProperties;\r\n  menuAriaLabel?: string;\r\n  menuBg?: string;\r\n  menuContentColor?: string;\r\n  useFixedPosition?: boolean;\r\n  items?: MenuItem[];\r\n  animationEase?: string;\r\n  animationDuration?: number;\r\n  staggerDelay?: number;\r\n};\r\n\r\nconst DEFAULT_ITEMS: MenuItem[] = [\r\n  {\r\n    label: 'home',\r\n    href: '#',\r\n    ariaLabel: 'Home',\r\n    rotation: -8,\r\n    hoverStyles: { bgColor: '#3b82f6', textColor: '#ffffff' }\r\n  },\r\n  {\r\n    label: 'about',\r\n    href: '#',\r\n    ariaLabel: 'About',\r\n    rotation: 8,\r\n    hoverStyles: { bgColor: '#10b981', textColor: '#ffffff' }\r\n  },\r\n  {\r\n    label: 'projects',\r\n    href: '#',\r\n    ariaLabel: 'Documentation',\r\n    rotation: 8,\r\n    hoverStyles: { bgColor: '#f59e0b', textColor: '#ffffff' }\r\n  },\r\n  {\r\n    label: 'blog',\r\n    href: '#',\r\n    ariaLabel: 'Blog',\r\n    rotation: 8,\r\n    hoverStyles: { bgColor: '#ef4444', textColor: '#ffffff' }\r\n  },\r\n  {\r\n    label: 'contact',\r\n    href: '#',\r\n    ariaLabel: 'Contact',\r\n    rotation: -8,\r\n    hoverStyles: { bgColor: '#8b5cf6', textColor: '#ffffff' }\r\n  }\r\n];\r\n\r\nexport default function BubbleMenu({\r\n  logo,\r\n  onMenuClick,\r\n  className,\r\n  style,\r\n  menuAriaLabel = 'Toggle menu',\r\n  menuBg = '#fff',\r\n  menuContentColor = '#111',\r\n  useFixedPosition = false,\r\n  items,\r\n  animationEase = 'back.out(1.5)',\r\n  animationDuration = 0.5,\r\n  staggerDelay = 0.12\r\n}: BubbleMenuProps) {\r\n  const [isMenuOpen, setIsMenuOpen] = useState(false);\r\n  const [showOverlay, setShowOverlay] = useState(false);\r\n\r\n  const overlayRef = useRef<HTMLDivElement>(null);\r\n  const bubblesRef = useRef<HTMLAnchorElement[]>([]);\r\n  const labelRefs = useRef<HTMLSpanElement[]>([]);\r\n\r\n  const menuItems = items?.length ? items : DEFAULT_ITEMS;\r\n\r\n  const containerClassName = [\r\n    'bubble-menu',\r\n    useFixedPosition ? 'fixed' : 'absolute',\r\n    'left-0 right-0 top-8',\r\n    'flex items-center justify-between',\r\n    'gap-4 px-8',\r\n    'pointer-events-none',\r\n    'z-1001',\r\n    className\r\n  ]\r\n    .filter(Boolean)\r\n    .join(' ');\r\n\r\n  const handleToggle = () => {\r\n    const nextState = !isMenuOpen;\r\n    if (nextState) setShowOverlay(true);\r\n    setIsMenuOpen(nextState);\r\n    onMenuClick?.(nextState);\r\n  };\r\n\r\n  useEffect(() => {\r\n    const overlay = overlayRef.current;\r\n    const bubbles = bubblesRef.current.filter(Boolean);\r\n    const labels = labelRefs.current.filter(Boolean);\r\n    if (!overlay || !bubbles.length) return;\r\n\r\n    if (isMenuOpen) {\r\n      gsap.set(overlay, { display: 'flex' });\r\n      gsap.killTweensOf([...bubbles, ...labels]);\r\n      gsap.set(bubbles, { scale: 0, transformOrigin: '50% 50%' });\r\n      gsap.set(labels, { y: 24, autoAlpha: 0 });\r\n\r\n      bubbles.forEach((bubble, i) => {\r\n        const delay = i * staggerDelay + gsap.utils.random(-0.05, 0.05);\r\n        const tl = gsap.timeline({ delay });\r\n        tl.to(bubble, {\r\n          scale: 1,\r\n          duration: animationDuration,\r\n          ease: animationEase\r\n        });\r\n        if (labels[i]) {\r\n          tl.to(\r\n            labels[i],\r\n            {\r\n              y: 0,\r\n              autoAlpha: 1,\r\n              duration: animationDuration,\r\n              ease: 'power3.out'\r\n            },\r\n            '-=' + animationDuration * 0.9\r\n          );\r\n        }\r\n      });\r\n    } else if (showOverlay) {\r\n      gsap.killTweensOf([...bubbles, ...labels]);\r\n      gsap.to(labels, {\r\n        y: 24,\r\n        autoAlpha: 0,\r\n        duration: 0.2,\r\n        ease: 'power3.in'\r\n      });\r\n      gsap.to(bubbles, {\r\n        scale: 0,\r\n        duration: 0.2,\r\n        ease: 'power3.in',\r\n        onComplete: () => {\r\n          gsap.set(overlay, { display: 'none' });\r\n          setShowOverlay(false);\r\n        }\r\n      });\r\n    }\r\n  }, [isMenuOpen, showOverlay, animationEase, animationDuration, staggerDelay]);\r\n\r\n  useEffect(() => {\r\n    const handleResize = () => {\r\n      if (isMenuOpen) {\r\n        const bubbles = bubblesRef.current.filter(Boolean);\r\n        const isDesktop = window.innerWidth >= 900;\r\n        bubbles.forEach((bubble, i) => {\r\n          const item = menuItems[i];\r\n          if (bubble && item) {\r\n            const rotation = isDesktop ? (item.rotation ?? 0) : 0;\r\n            gsap.set(bubble, { rotation });\r\n          }\r\n        });\r\n      }\r\n    };\r\n    window.addEventListener('resize', handleResize);\r\n    return () => window.removeEventListener('resize', handleResize);\r\n  }, [isMenuOpen, menuItems]);\r\n\r\n  return (\r\n    <>\r\n      {/* Workaround for silly Tailwind capabilities */}\r\n      <style>{`\r\n        .bubble-menu .menu-line {\r\n          transition: transform 0.3s ease, opacity 0.3s ease;\r\n          transform-origin: center;\r\n        }\r\n        .bubble-menu-items .pill-list .pill-col:nth-child(4):nth-last-child(2) {\r\n          margin-left: calc(100% / 6);\r\n        }\r\n        .bubble-menu-items .pill-list .pill-col:nth-child(4):last-child {\r\n          margin-left: calc(100% / 3);\r\n        }\r\n        @media (min-width: 900px) {\r\n          .bubble-menu-items .pill-link {\r\n            transform: rotate(var(--item-rot));\r\n          }\r\n          .bubble-menu-items .pill-link:hover {\r\n            transform: rotate(var(--item-rot)) scale(1.06);\r\n            background: var(--hover-bg) !important;\r\n            color: var(--hover-color) !important;\r\n          }\r\n          .bubble-menu-items .pill-link:active {\r\n            transform: rotate(var(--item-rot)) scale(.94);\r\n          }\r\n        }\r\n        @media (max-width: 899px) {\r\n          .bubble-menu-items {\r\n            padding-top: 120px;\r\n            align-items: flex-start;\r\n          }\r\n          .bubble-menu-items .pill-list {\r\n            row-gap: 16px;\r\n          }\r\n          .bubble-menu-items .pill-list .pill-col {\r\n            flex: 0 0 100% !important;\r\n            margin-left: 0 !important;\r\n            overflow: visible;\r\n          }\r\n          .bubble-menu-items .pill-link {\r\n            font-size: clamp(1.2rem, 3vw, 4rem);\r\n            padding: clamp(1rem, 2vw, 2rem) 0;\r\n            min-height: 80px !important;\r\n          }\r\n          .bubble-menu-items .pill-link:hover {\r\n            transform: scale(1.06);\r\n            background: var(--hover-bg);\r\n            color: var(--hover-color);\r\n          }\r\n          .bubble-menu-items .pill-link:active {\r\n            transform: scale(.94);\r\n          }\r\n        }\r\n      `}</style>\r\n\r\n      <nav className={containerClassName} style={style} aria-label=\"Main navigation\">\r\n        <div\r\n          className={[\r\n            'bubble logo-bubble',\r\n            'inline-flex items-center justify-center',\r\n            'rounded-full',\r\n            'bg-white',\r\n            'shadow-[0_4px_16px_rgba(0,0,0,0.12)]',\r\n            'pointer-events-auto',\r\n            'h-12 md:h-14',\r\n            'px-4 md:px-8',\r\n            'gap-2',\r\n            'will-change-transform'\r\n          ].join(' ')}\r\n          aria-label=\"Logo\"\r\n          style={{\r\n            background: menuBg,\r\n            minHeight: '48px',\r\n            borderRadius: '9999px'\r\n          }}\r\n        >\r\n          <span\r\n            className={['logo-content', 'inline-flex items-center justify-center', 'w-[120px] h-full'].join(' ')}\r\n            style={\r\n              {\r\n                ['--logo-max-height']: '60%',\r\n                ['--logo-max-width']: '100%'\r\n              } as CSSProperties\r\n            }\r\n          >\r\n            {typeof logo === 'string' ? (\r\n              <img src={logo} alt=\"Logo\" className=\"bubble-logo max-h-[60%] max-w-full object-contain block\" />\r\n            ) : (\r\n              logo\r\n            )}\r\n          </span>\r\n        </div>\r\n\r\n        <button\r\n          type=\"button\"\r\n          className={[\r\n            'bubble toggle-bubble menu-btn',\r\n            isMenuOpen ? 'open' : '',\r\n            'inline-flex flex-col items-center justify-center',\r\n            'rounded-full',\r\n            'bg-white',\r\n            'shadow-[0_4px_16px_rgba(0,0,0,0.12)]',\r\n            'pointer-events-auto',\r\n            'w-12 h-12 md:w-14 md:h-14',\r\n            'border-0 cursor-pointer p-0',\r\n            'will-change-transform'\r\n          ].join(' ')}\r\n          onClick={handleToggle}\r\n          aria-label={menuAriaLabel}\r\n          aria-pressed={isMenuOpen}\r\n          style={{ background: menuBg }}\r\n        >\r\n          <span\r\n            className=\"menu-line block mx-auto rounded-[2px]\"\r\n            style={{\r\n              width: 26,\r\n              height: 2,\r\n              background: menuContentColor,\r\n              transform: isMenuOpen ? 'translateY(4px) rotate(45deg)' : 'none'\r\n            }}\r\n          />\r\n          <span\r\n            className=\"menu-line short block mx-auto rounded-[2px]\"\r\n            style={{\r\n              marginTop: '6px',\r\n              width: 26,\r\n              height: 2,\r\n              background: menuContentColor,\r\n              transform: isMenuOpen ? 'translateY(-4px) rotate(-45deg)' : 'none'\r\n            }}\r\n          />\r\n        </button>\r\n      </nav>\r\n\r\n      {showOverlay && (\r\n        <div\r\n          ref={overlayRef}\r\n          className={[\r\n            'bubble-menu-items',\r\n            useFixedPosition ? 'fixed' : 'absolute',\r\n            'inset-0',\r\n            'flex items-center justify-center',\r\n            'pointer-events-none',\r\n            'z-1000'\r\n          ].join(' ')}\r\n          aria-hidden={!isMenuOpen}\r\n        >\r\n          <ul\r\n            className={[\r\n              'pill-list',\r\n              'list-none m-0 px-6',\r\n              'w-full max-w-[1600px] mx-auto',\r\n              'flex flex-wrap',\r\n              'gap-x-0 gap-y-1',\r\n              'pointer-events-auto'\r\n            ].join(' ')}\r\n            role=\"menu\"\r\n            aria-label=\"Menu links\"\r\n          >\r\n            {menuItems.map((item, idx) => (\r\n              <li\r\n                key={idx}\r\n                role=\"none\"\r\n                className={[\r\n                  'pill-col',\r\n                  'flex justify-center items-stretch',\r\n                  'flex-[0_0_calc(100%/3)]',\r\n                  'box-border'\r\n                ].join(' ')}\r\n              >\r\n                <a\r\n                  role=\"menuitem\"\r\n                  href={item.href}\r\n                  aria-label={item.ariaLabel || item.label}\r\n                  className={[\r\n                    'pill-link',\r\n                    'w-full',\r\n                    'rounded-[999px]',\r\n                    'no-underline',\r\n                    'bg-white',\r\n                    'text-inherit',\r\n                    'shadow-[0_4px_14px_rgba(0,0,0,0.10)]',\r\n                    'flex items-center justify-center',\r\n                    'relative',\r\n                    'transition-[background,color] duration-300 ease-in-out',\r\n                    'box-border',\r\n                    'whitespace-nowrap overflow-hidden'\r\n                  ].join(' ')}\r\n                  style={\r\n                    {\r\n                      ['--item-rot']: `${item.rotation ?? 0}deg`,\r\n                      ['--pill-bg']: menuBg,\r\n                      ['--pill-color']: menuContentColor,\r\n                      ['--hover-bg']: item.hoverStyles?.bgColor || '#f3f4f6',\r\n                      ['--hover-color']: item.hoverStyles?.textColor || menuContentColor,\r\n                      background: 'var(--pill-bg)',\r\n                      color: 'var(--pill-color)',\r\n                      minHeight: 'var(--pill-min-h, 160px)',\r\n                      padding: 'clamp(1.5rem, 3vw, 8rem) 0',\r\n                      fontSize: 'clamp(1.5rem, 4vw, 4rem)',\r\n                      fontWeight: 400,\r\n                      lineHeight: 0,\r\n                      willChange: 'transform',\r\n                      height: 10\r\n                    } as CSSProperties\r\n                  }\r\n                  ref={el => {\r\n                    if (el) bubblesRef.current[idx] = el;\r\n                  }}\r\n                >\r\n                  <span\r\n                    className=\"pill-label inline-block\"\r\n                    style={{\r\n                      willChange: 'transform, opacity',\r\n                      height: '1.2em',\r\n                      lineHeight: 1.2\r\n                    }}\r\n                    ref={el => {\r\n                      if (el) labelRefs.current[idx] = el;\r\n                    }}\r\n                  >\r\n                    {item.label}\r\n                  </span>\r\n                </a>\r\n              </li>\r\n            ))}\r\n          </ul>\r\n        </div>\r\n      )}\r\n    </>\r\n  );\r\n}\r\n",
      "type": "registry:component"
    }
  ]
}