{
  "name": "toolbar-dynamic",
  "type": "registry:ui",
  "registryDependencies": [],
  "dependencies": [
    "motion"
  ],
  "devDependencies": [],
  "tailwind": {},
  "cssVars": {
    "light": {},
    "dark": {}
  },
  "files": [
    {
      "path": "toolbar-dynamic.tsx",
      "content": "'use client';\nimport React, { useRef, useState } from 'react';\nimport { motion, MotionConfig } from 'motion/react';\nimport useClickOutside from '@/hooks/useClickOutside';\nimport { ArrowLeft, Search, User } from 'lucide-react';\n\nconst transition = {\n  type: 'spring',\n  bounce: 0.1,\n  duration: 0.2,\n};\n\nfunction Button({\n  children,\n  onClick,\n  disabled,\n  ariaLabel,\n}: {\n  children: React.ReactNode;\n  onClick?: () => void;\n  disabled?: boolean;\n  ariaLabel?: string;\n}) {\n  return (\n    <button\n      className='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] disabled:pointer-events-none disabled:opacity-50'\n      type='button'\n      onClick={onClick}\n      disabled={disabled}\n      aria-label={ariaLabel}\n    >\n      {children}\n    </button>\n  );\n}\n\nexport default function ToolbarDynamic() {\n  const [isOpen, setIsOpen] = useState(false);\n  const containerRef = useRef<HTMLDivElement>(null);\n\n  useClickOutside(containerRef, () => {\n    setIsOpen(false);\n  });\n\n  return (\n    <MotionConfig transition={transition}>\n      <div className='absolute bottom-8' ref={containerRef}>\n        <div className='h-full w-full rounded-xl border border-zinc-950/10 bg-white'>\n          <motion.div\n            animate={{\n              // @todo: here I want to remove the width\n              width: isOpen ? '300px' : '98px',\n            }}\n            initial={false}\n          >\n            <div className='overflow-hidden p-2'>\n              {!isOpen ? (\n                <div className='flex space-x-2'>\n                  <Button disabled ariaLabel='User profile'>\n                    <User className='h-5 w-5' />\n                  </Button>\n                  <Button\n                    onClick={() => setIsOpen(true)}\n                    ariaLabel='Search notes'\n                  >\n                    <Search className='h-5 w-5' />\n                  </Button>\n                </div>\n              ) : (\n                <div className='flex space-x-2'>\n                  <Button onClick={() => setIsOpen(false)} ariaLabel='Back'>\n                    <ArrowLeft className='h-5 w-5' />\n                  </Button>\n                  <div className='relative w-full'>\n                    <input\n                      className='h-9 w-full rounded-lg border border-zinc-950/10 bg-transparent p-2 text-zinc-900 placeholder-zinc-500 focus:outline-hidden'\n                      autoFocus\n                      placeholder='Search notes'\n                    />\n                    <div className='absolute right-1 top-0 flex h-full items-center justify-center'></div>\n                  </div>\n                </div>\n              )}\n            </div>\n          </motion.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"
    }
  ]
}