{
  "name": "morphing-popover",
  "type": "registry:ui",
  "registryDependencies": [],
  "dependencies": [
    "motion-v",
    "@vueuse/core"
  ],
  "devDependencies": [],
  "tailwind": {},
  "cssVars": {
    "light": {},
    "dark": {}
  },
  "files": [
    {
      "path": "MorphingPopover.vue",
      "content": "<script setup lang=\"ts\">\nimport { cn } from '~/lib/utils'\nimport { MotionConfig } from 'motion-v'\nimport type { Variants } from '~/types/motion'\n\nconst props = withDefaults(\n  defineProps<{\n    class?: string\n    transition?: Record<string, string | number | boolean>\n    defaultOpen?: boolean\n    open?: boolean\n    variants?: Variants\n  }>(),\n  {\n    transition: () => ({\n      type: 'spring',\n      bounce: 0.1,\n      duration: 0.4,\n    }),\n    defaultOpen: false,\n  },\n)\n\nconst emit = defineEmits<{\n  openChange: [value: boolean]\n  'update:open': [value: boolean]\n}>()\n\nconst uniqueId = useId()\nconst isOpen = ref(props.defaultOpen)\n\nwatch(() => props.open, (val) => {\n  if (val !== undefined) isOpen.value = val\n})\n\nfunction openPopover() {\n  isOpen.value = true\n  emit('openChange', true)\n  emit('update:open', true)\n}\n\nfunction closePopover() {\n  isOpen.value = false\n  emit('openChange', false)\n  emit('update:open', false)\n}\n\nprovide('morphingPopover', {\n  isOpen,\n  open: openPopover,\n  close: closePopover,\n  uniqueId,\n  variants: computed(() => props.variants),\n})\n</script>\n\n<template>\n  <MotionConfig :transition=\"props.transition\">\n    <div :class=\"cn('relative flex items-center justify-center', props.class)\">\n      <slot />\n    </div>\n  </MotionConfig>\n</template>\n",
      "type": "registry:ui"
    },
    {
      "path": "MorphingPopoverContent.vue",
      "content": "<script setup lang=\"ts\">\nimport { cn } from '~/lib/utils'\nimport { Motion, AnimatePresence } from 'motion-v'\nimport { onClickOutside } from '@vueuse/core'\nimport type { Ref, ComputedRef } from 'vue'\nimport type { Variants } from '~/types/motion'\n\ndefineProps<{\n  class?: string\n}>()\n\nconst { isOpen, close, uniqueId, variants } = inject<{\n  isOpen: Ref<boolean>\n  open: () => void\n  close: () => void\n  uniqueId: string\n  variants: ComputedRef<Variants | undefined>\n}>('morphingPopover')!\n\nconst contentRef = useTemplateRef('popoverContentEl')\nonClickOutside(contentRef, close)\n\nonMounted(() => {\n  const handleKeyDown = (e: KeyboardEvent) => {\n    if (e.key === 'Escape' && isOpen.value) close()\n  }\n  document.addEventListener('keydown', handleKeyDown)\n  onUnmounted(() => document.removeEventListener('keydown', handleKeyDown))\n})\n</script>\n\n<template>\n  <AnimatePresence>\n    <Motion\n      v-if=\"isOpen\"\n      :id=\"`popover-content-${uniqueId}`\"\n      ref=\"popoverContentEl\"\n      :layout-id=\"`popover-trigger-${uniqueId}`\"\n      role=\"dialog\"\n      aria-modal=\"true\"\n      :class=\"\n        cn(\n          'absolute overflow-hidden rounded-md border border-zinc-950/10 bg-white p-2 text-zinc-950 shadow-md dark:border-zinc-50/10 dark:bg-zinc-700 dark:text-zinc-50',\n          $props.class,\n        )\n      \"\n      initial=\"initial\"\n      animate=\"animate\"\n      exit=\"exit\"\n      :variants=\"variants\"\n    >\n      <slot />\n    </Motion>\n  </AnimatePresence>\n</template>\n",
      "type": "registry:ui"
    },
    {
      "path": "MorphingPopoverTrigger.vue",
      "content": "<script setup lang=\"ts\">\nimport { Motion } from 'motion-v'\nimport type { Ref } from 'vue'\n\ndefineProps<{\n  class?: string\n}>()\n\nconst { open, isOpen, uniqueId } = inject<{\n  isOpen: Ref<boolean>\n  open: () => void\n  close: () => void\n  uniqueId: string\n}>('morphingPopover')!\n</script>\n\n<template>\n  <Motion\n    :layout-id=\"`popover-trigger-${uniqueId}`\"\n    @click=\"open\"\n  >\n    <Motion\n      as=\"button\"\n      :layout-id=\"`popover-label-${uniqueId}`\"\n      :class=\"$props.class\"\n      :aria-expanded=\"isOpen\"\n      :aria-controls=\"`popover-content-${uniqueId}`\"\n    >\n      <slot />\n    </Motion>\n  </Motion>\n</template>\n",
      "type": "registry:ui"
    }
  ]
}