{
  "name": "toolbar-expandable",
  "type": "registry:ui",
  "registryDependencies": [],
  "dependencies": [
    "motion-v",
    "@vueuse/core"
  ],
  "devDependencies": [],
  "tailwind": {},
  "cssVars": {
    "light": {},
    "dark": {}
  },
  "files": [
    {
      "path": "ToolbarExpandable.vue",
      "content": "<script setup lang=\"ts\">\nimport { cn } from '~/lib/utils'\nimport { Motion, AnimatePresence, MotionConfig } from 'motion-v'\nimport { Folder, MessageCircle, User, WalletCards } from 'lucide-vue-next'\nimport { onClickOutside } from '@vueuse/core'\n\nconst transition = {\n  type: 'spring' as const,\n  bounce: 0.1,\n  duration: 0.25,\n}\n\nconst ITEMS = [\n  { id: 1, label: 'User', icon: User },\n  { id: 2, label: 'Messages', icon: MessageCircle },\n  { id: 3, label: 'Documents', icon: Folder },\n  { id: 4, label: 'Wallet', icon: WalletCards },\n]\n\nconst active = ref<number | null>(null)\nconst isOpen = ref(false)\nconst maxWidth = ref(0)\nconst heightContent = ref(0)\n\nconst containerRef = useTemplateRef<HTMLDivElement>('toolbarExpandableEl')\nconst contentRef = useTemplateRef<HTMLDivElement>('contentEl')\nconst menuRef = useTemplateRef<HTMLDivElement>('menuEl')\n\nonClickOutside(containerRef, () => {\n  isOpen.value = false\n  active.value = null\n})\n\nonMounted(() => {\n  if (menuRef.value && !maxWidth.value) {\n    maxWidth.value = menuRef.value.getBoundingClientRect().width\n  }\n})\n\nwatch(\n  [isOpen, active],\n  () => {\n    nextTick(() => {\n      if (contentRef.value) {\n        heightContent.value = contentRef.value.getBoundingClientRect().height\n      }\n    })\n  },\n)\n\nfunction handleClick(itemId: number) {\n  if (!isOpen.value) isOpen.value = true\n  if (active.value === itemId) {\n    isOpen.value = false\n    active.value = null\n    return\n  }\n  active.value = itemId\n}\n</script>\n\n<template>\n  <MotionConfig :transition=\"transition\">\n    <div ref=\"toolbarExpandableEl\" class=\"absolute bottom-8\">\n      <div class=\"h-full w-full rounded-xl border border-zinc-950/10 bg-white\">\n        <div class=\"overflow-hidden\">\n          <AnimatePresence :initial=\"false\" mode=\"sync\">\n            <Motion\n              v-if=\"isOpen\"\n              key=\"content\"\n              :initial=\"{ height: 0 }\"\n              :animate=\"{ height: heightContent || 0 }\"\n              :exit=\"{ height: 0 }\"\n              :style=\"{ width: `${maxWidth}px` }\"\n            >\n              <div ref=\"contentEl\" class=\"p-2\">\n                <Motion\n                  v-for=\"item in ITEMS\"\n                  :key=\"item.id\"\n                  :initial=\"{ opacity: 0 }\"\n                  :animate=\"{ opacity: active === item.id ? 1 : 0 }\"\n                  :exit=\"{ opacity: 0 }\"\n                >\n                  <div\n                    :class=\"cn('px-2 pt-2 text-sm', active === item.id ? 'block' : 'hidden')\"\n                  >\n                    <slot :name=\"`content-${item.id}`\">\n                      <div v-if=\"item.id === 1\" class=\"flex flex-col space-y-4\">\n                        <div class=\"flex flex-col space-y-1 text-zinc-700\">\n                          <div class=\"h-8 w-8 rounded-full bg-linear-to-br from-blue-500 to-blue-400\" />\n                          <span>Ibelick</span>\n                        </div>\n                        <button class=\"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]\" type=\"button\">\n                          Edit Profile\n                        </button>\n                      </div>\n                      <div v-else-if=\"item.id === 2\" class=\"flex flex-col space-y-4\">\n                        <div class=\"text-zinc-700\">You have 3 new messages.</div>\n                        <button class=\"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]\" type=\"button\">\n                          View more\n                        </button>\n                      </div>\n                      <div v-else-if=\"item.id === 3\" class=\"flex flex-col space-y-4\">\n                        <div class=\"flex flex-col text-zinc-700\">\n                          <div class=\"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 class=\"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]\" type=\"button\">\n                          Manage documents\n                        </button>\n                      </div>\n                      <div v-else-if=\"item.id === 4\" class=\"flex flex-col space-y-4\">\n                        <div class=\"flex flex-col text-zinc-700\">\n                          <span>Current Balance</span>\n                          <span>$1,250.32</span>\n                        </div>\n                        <button class=\"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]\" type=\"button\">\n                          View Transactions\n                        </button>\n                      </div>\n                    </slot>\n                  </div>\n                </Motion>\n              </div>\n            </Motion>\n          </AnimatePresence>\n        </div>\n        <div ref=\"menuEl\" class=\"flex space-x-2 p-2\">\n          <button\n            v-for=\"item in ITEMS\"\n            :key=\"item.id\"\n            :aria-label=\"item.label\"\n            :class=\"\n              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            \"\n            type=\"button\"\n            @click=\"handleClick(item.id)\"\n          >\n            <component :is=\"item.icon\" class=\"h-5 w-5\" />\n          </button>\n        </div>\n      </div>\n    </div>\n  </MotionConfig>\n</template>\n",
      "type": "registry:ui"
    }
  ]
}