{
  "name": "toolbar-expandable",
  "type": "registry:ui",
  "registryDependencies": [],
  "dependencies": [
    "motion",
    "react-use-measure"
  ],
  "devDependencies": [],
  "tailwind": {},
  "cssVars": {
    "light": {},
    "dark": {}
  },
  "files": [
    {
      "path": "toolbar-expandable.tsx",
      "content": "'use client';\n\nimport React, { useEffect, useRef, useState } from 'react';\nimport useMeasure from 'react-use-measure';\nimport { AnimatePresence, motion, MotionConfig } from 'motion/react';\nimport { cn } from '@/lib/utils';\nimport useClickOutside from '@/hooks/useClickOutside';\nimport { Folder, MessageCircle, User, WalletCards } from 'lucide-react';\n\nconst transition = {\n  type: 'spring',\n  bounce: 0.1,\n  duration: 0.25,\n};\n\nconst ITEMS = [\n  {\n    id: 1,\n    label: 'User',\n    title: <User className='h-5 w-5' />,\n    content: (\n      <div className='flex flex-col space-y-4'>\n        <div className='flex flex-col space-y-1 text-zinc-700'>\n          <div className='h-8 w-8 rounded-full bg-linear-to-br from-blue-500 to-blue-400' />\n          <span>Ibelick</span>\n        </div>\n        <button\n          className='relative h-8 w-full scale-100 select-none appearance-none items-center justify-center rounded-lg border border-zinc-950/10 px-2 text-sm text-zinc-500 transition-colors hover:bg-zinc-100 hover:text-zinc-800 focus-visible:ring-2 active:scale-[0.98]'\n          type='button'\n        >\n          Edit Profile\n        </button>\n      </div>\n    ),\n  },\n  {\n    id: 2,\n    label: 'Messages',\n    title: <MessageCircle className='h-5 w-5' />,\n    content: (\n      <div className='flex flex-col space-y-4'>\n        <div className='text-zinc-700'>You have 3 new messages.</div>\n        <button\n          className='relative h-8 w-full scale-100 select-none appearance-none items-center justify-center rounded-lg border border-zinc-950/10 px-2 text-sm text-zinc-500 transition-colors hover:bg-zinc-100 hover:text-zinc-800 focus-visible:ring-2 active:scale-[0.98]'\n          type='button'\n        >\n          View more\n        </button>\n      </div>\n    ),\n  },\n  {\n    id: 3,\n    label: 'Documents',\n    title: <Folder className='h-5 w-5' />,\n    content: (\n      <div className='flex flex-col space-y-4'>\n        <div className='flex flex-col text-zinc-700'>\n          <div className='space-y-1'>\n            <div>Project_Proposal.pdf</div>\n            <div>Meeting_Notes.docx</div>\n            <div>Financial_Report.xls</div>\n          </div>\n        </div>\n        <button\n          className='relative h-8 w-full scale-100 select-none appearance-none items-center justify-center rounded-lg border border-zinc-950/10 px-2 text-sm text-zinc-500 transition-colors hover:bg-zinc-100 hover:text-zinc-800 focus-visible:ring-2 active:scale-[0.98]'\n          type='button'\n        >\n          Manage documents\n        </button>\n      </div>\n    ),\n  },\n  {\n    id: 4,\n    label: 'Wallet',\n    title: <WalletCards className='h-5 w-5' />,\n    content: (\n      <div className='flex flex-col space-y-4'>\n        <div className='flex flex-col text-zinc-700'>\n          <span>Current Balance</span>\n          <span>$1,250.32</span>\n        </div>\n        <button\n          className='relative h-8 w-full scale-100 select-none appearance-none items-center justify-center rounded-lg border border-zinc-950/10 px-2 text-sm text-zinc-500 transition-colors hover:bg-zinc-100 hover:text-zinc-800 focus-visible:ring-2 active:scale-[0.98]'\n          type='button'\n        >\n          View Transactions\n        </button>\n      </div>\n    ),\n  },\n];\n\nexport default function ToolbarExpandable() {\n  const [active, setActive] = useState<number | null>(null);\n  const [contentRef, { height: heightContent }] = useMeasure();\n  const [menuRef, { width: widthContainer }] = useMeasure();\n  const ref = useRef<HTMLDivElement>(null);\n  const [isOpen, setIsOpen] = useState(false);\n  const [maxWidth, setMaxWidth] = useState(0);\n\n  useClickOutside(ref, () => {\n    setIsOpen(false);\n    setActive(null);\n  });\n\n  useEffect(() => {\n    if (!widthContainer || maxWidth > 0) return;\n\n    setMaxWidth(widthContainer);\n  }, [widthContainer, maxWidth]);\n\n  return (\n    <MotionConfig transition={transition}>\n      <div className='absolute bottom-8' ref={ref}>\n        <div className='h-full w-full rounded-xl border border-zinc-950/10 bg-white'>\n          <div className='overflow-hidden'>\n            <AnimatePresence initial={false} mode='sync'>\n              {isOpen ? (\n                <motion.div\n                  key='content'\n                  initial={{ height: 0 }}\n                  animate={{ height: heightContent || 0 }}\n                  exit={{ height: 0 }}\n                  style={{\n                    width: maxWidth,\n                  }}\n                >\n                  <div ref={contentRef} className='p-2'>\n                    {ITEMS.map((item) => {\n                      const isSelected = active === item.id;\n\n                      return (\n                        <motion.div\n                          key={item.id}\n                          initial={{ opacity: 0 }}\n                          animate={{ opacity: isSelected ? 1 : 0 }}\n                          exit={{ opacity: 0 }}\n                        >\n                          <div\n                            className={cn(\n                              'px-2 pt-2 text-sm',\n                              isSelected ? 'block' : 'hidden'\n                            )}\n                          >\n                            {item.content}\n                          </div>\n                        </motion.div>\n                      );\n                    })}\n                  </div>\n                </motion.div>\n              ) : null}\n            </AnimatePresence>\n          </div>\n          <div className='flex space-x-2 p-2' ref={menuRef}>\n            {ITEMS.map((item) => (\n              <button\n                key={item.id}\n                aria-label={item.label}\n                className={cn(\n                  'relative flex h-9 w-9 shrink-0 scale-100 select-none appearance-none items-center justify-center rounded-lg text-zinc-500 transition-colors hover:bg-zinc-100 hover:text-zinc-800 focus-visible:ring-2 active:scale-[0.98]',\n                  active === item.id ? 'bg-zinc-100 text-zinc-800' : ''\n                )}\n                type='button'\n                onClick={() => {\n                  if (!isOpen) setIsOpen(true);\n                  if (active === item.id) {\n                    setIsOpen(false);\n                    setActive(null);\n                    return;\n                  }\n\n                  setActive(item.id);\n                }}\n              >\n                {item.title}\n              </button>\n            ))}\n          </div>\n        </div>\n      </div>\n    </MotionConfig>\n  );\n}\n",
      "type": "registry:ui"
    },
    {
      "path": "hooks/useClickOutside.tsx",
      "content": "import { RefObject, useEffect } from 'react';\n\nfunction useClickOutside<T extends HTMLElement>(\n  ref: RefObject<T>,\n  handler: (event: MouseEvent | TouchEvent) => void\n): void {\n  useEffect(() => {\n    const handleClickOutside = (event: MouseEvent | TouchEvent) => {\n      if (!ref || !ref.current || ref.current.contains(event.target as Node)) {\n        return;\n      }\n\n      handler(event);\n    };\n\n    document.addEventListener('mousedown', handleClickOutside);\n    document.addEventListener('touchstart', handleClickOutside);\n\n    return () => {\n      document.removeEventListener('mousedown', handleClickOutside);\n      document.removeEventListener('touchstart', handleClickOutside);\n    };\n  }, [ref, handler]);\n}\n\nexport default useClickOutside;\n",
      "type": "registry:hook"
    }
  ]
}