{
  "name": "morphing-dialog",
  "type": "registry:ui",
  "registryDependencies": [],
  "dependencies": [
    "motion-v",
    "@vueuse/core"
  ],
  "devDependencies": [],
  "tailwind": {},
  "cssVars": {
    "light": {},
    "dark": {}
  },
  "files": [
    {
      "path": "MorphingDialog.vue",
      "content": "<script setup lang=\"ts\">\nimport { MotionConfig } from 'motion-v'\n\nconst props = defineProps<{\n  transition?: Record<string, string | number | boolean>\n}>()\n\nconst isOpen = ref(false)\nconst uniqueId = useId()\nconst triggerRef = ref<HTMLButtonElement | null>(null)\n\nprovide('morphingDialog', {\n  isOpen,\n  setIsOpen: (val: boolean) => (isOpen.value = val),\n  uniqueId,\n  triggerRef,\n})\n</script>\n\n<template>\n  <MotionConfig :transition=\"props.transition\">\n    <slot />\n  </MotionConfig>\n</template>\n",
      "type": "registry:ui"
    },
    {
      "path": "MorphingDialogClose.vue",
      "content": "<script setup lang=\"ts\">\nimport { cn } from '~/lib/utils'\nimport { Motion } from 'motion-v'\nimport { XIcon } from 'lucide-vue-next'\nimport type { VariantType } from '~/types/motion'\n\ndefineProps<{\n  class?: string\n  variants?: {\n    initial: VariantType\n    animate: VariantType\n    exit: VariantType\n  }\n}>()\n\nconst { setIsOpen, uniqueId } = inject<{\n  isOpen: Ref<boolean>\n  setIsOpen: (val: boolean) => void\n  uniqueId: string\n}>('morphingDialog')!\n</script>\n\n<template>\n  <Motion\n    :key=\"`dialog-close-${uniqueId}`\"\n    as=\"button\"\n    type=\"button\"\n    aria-label=\"Close dialog\"\n    :class=\"cn('absolute top-6 right-6', $props.class)\"\n    initial=\"initial\"\n    animate=\"animate\"\n    exit=\"exit\"\n    :variants=\"$props.variants\"\n    @click=\"setIsOpen(false)\"\n  >\n    <slot>\n      <XIcon :size=\"24\" />\n    </slot>\n  </Motion>\n</template>\n",
      "type": "registry:ui"
    },
    {
      "path": "MorphingDialogContainer.vue",
      "content": "<script setup lang=\"ts\">\nimport { Motion, AnimatePresence } from 'motion-v'\n\nconst { isOpen, uniqueId } = inject<{\n  isOpen: Ref<boolean>\n  setIsOpen: (val: boolean) => void\n  uniqueId: string\n}>('morphingDialog')!\n</script>\n\n<template>\n  <Teleport to=\"body\">\n    <AnimatePresence :initial=\"false\" mode=\"sync\">\n      <template v-if=\"isOpen\">\n        <Motion\n          :key=\"`backdrop-${uniqueId}`\"\n          class=\"fixed inset-0 h-full w-full bg-white/40 backdrop-blur-xs dark:bg-black/40\"\n          :initial=\"{ opacity: 0 }\"\n          :animate=\"{ opacity: 1 }\"\n          :exit=\"{ opacity: 0 }\"\n        />\n        <div class=\"fixed inset-0 z-50 flex items-center justify-center\">\n          <slot />\n        </div>\n      </template>\n    </AnimatePresence>\n  </Teleport>\n</template>\n",
      "type": "registry:ui"
    },
    {
      "path": "MorphingDialogContent.vue",
      "content": "<script setup lang=\"ts\">\nimport { cn } from '~/lib/utils'\nimport { Motion } from 'motion-v'\nimport { onClickOutside } from '@vueuse/core'\n\ndefineProps<{\n  class?: string\n  style?: Record<string, string | number>\n}>()\n\nconst { isOpen, setIsOpen, uniqueId, triggerRef } = inject<{\n  isOpen: Ref<boolean>\n  setIsOpen: (val: boolean) => void\n  uniqueId: string\n  triggerRef: Ref<HTMLButtonElement | null>\n}>('morphingDialog')!\n\nconst containerRef = useTemplateRef('morphContentEl')\n\nonClickOutside(containerRef, () => {\n  if (isOpen.value) setIsOpen(false)\n})\n\nonMounted(() => {\n  const handleKeyDown = (e: KeyboardEvent) => {\n    if (e.key === 'Escape') setIsOpen(false)\n  }\n  document.addEventListener('keydown', handleKeyDown)\n\n  watch(\n    isOpen,\n    (val) => {\n      if (val) {\n        document.body.classList.add('overflow-hidden')\n      } else {\n        document.body.classList.remove('overflow-hidden')\n        triggerRef.value?.focus()\n      }\n    },\n    { immediate: true },\n  )\n\n  onUnmounted(() => {\n    document.removeEventListener('keydown', handleKeyDown)\n    document.body.classList.remove('overflow-hidden')\n  })\n})\n</script>\n\n<template>\n  <Motion\n    ref=\"morphContentEl\"\n    :layout-id=\"`dialog-${uniqueId}`\"\n    :class=\"cn('overflow-hidden', $props.class)\"\n    :style=\"$props.style\"\n    role=\"dialog\"\n    aria-modal=\"true\"\n    :aria-labelledby=\"`motion-ui-morphing-dialog-title-${uniqueId}`\"\n    :aria-describedby=\"`motion-ui-morphing-dialog-description-${uniqueId}`\"\n  >\n    <slot />\n  </Motion>\n</template>\n",
      "type": "registry:ui"
    },
    {
      "path": "MorphingDialogDescription.vue",
      "content": "<script setup lang=\"ts\">\nimport { Motion } from 'motion-v'\nimport type { VariantType } from '~/types/motion'\n\nconst props = defineProps<{\n  class?: string\n  disableLayoutAnimation?: boolean\n  variants?: {\n    initial: VariantType\n    animate: VariantType\n    exit: VariantType\n  }\n}>()\n\nconst { uniqueId } = inject<{ uniqueId: string }>('morphingDialog')!\n</script>\n\n<template>\n  <Motion\n    :id=\"`dialog-description-${uniqueId}`\"\n    :key=\"`dialog-description-${uniqueId}`\"\n    :layout-id=\"props.disableLayoutAnimation ? undefined : `dialog-description-content-${uniqueId}`\"\n    :variants=\"props.variants\"\n    :class=\"props.class\"\n    initial=\"initial\"\n    animate=\"animate\"\n    exit=\"exit\"\n  >\n    <slot />\n  </Motion>\n</template>\n",
      "type": "registry:ui"
    },
    {
      "path": "MorphingDialogImage.vue",
      "content": "<script setup lang=\"ts\">\nimport { cn } from '~/lib/utils'\nimport { Motion } from 'motion-v'\n\ndefineProps<{\n  src: string\n  alt: string\n  class?: string\n  style?: Record<string, string | number>\n}>()\n\nconst { uniqueId } = inject<{ uniqueId: string }>('morphingDialog')!\n</script>\n\n<template>\n  <Motion\n    as=\"img\"\n    :src=\"$props.src\"\n    :alt=\"$props.alt\"\n    :class=\"cn($props.class)\"\n    :layout-id=\"`dialog-img-${uniqueId}`\"\n    :style=\"$props.style\"\n  />\n</template>\n",
      "type": "registry:ui"
    },
    {
      "path": "MorphingDialogSubtitle.vue",
      "content": "<script setup lang=\"ts\">\nimport { Motion } from 'motion-v'\n\ndefineProps<{\n  class?: string\n  style?: Record<string, string | number>\n}>()\n\nconst { uniqueId } = inject<{ uniqueId: string }>('morphingDialog')!\n</script>\n\n<template>\n  <Motion\n    :layout-id=\"`dialog-subtitle-container-${uniqueId}`\"\n    :class=\"$props.class\"\n    :style=\"$props.style\"\n  >\n    <slot />\n  </Motion>\n</template>\n",
      "type": "registry:ui"
    },
    {
      "path": "MorphingDialogTitle.vue",
      "content": "<script setup lang=\"ts\">\nimport { Motion } from 'motion-v'\n\ndefineProps<{\n  class?: string\n  style?: Record<string, string | number>\n}>()\n\nconst { uniqueId } = inject<{ uniqueId: string }>('morphingDialog')!\n</script>\n\n<template>\n  <Motion\n    :layout-id=\"`dialog-title-container-${uniqueId}`\"\n    :class=\"$props.class\"\n    :style=\"$props.style\"\n    layout\n  >\n    <slot />\n  </Motion>\n</template>\n",
      "type": "registry:ui"
    },
    {
      "path": "MorphingDialogTrigger.vue",
      "content": "<script setup lang=\"ts\">\nimport { cn } from '~/lib/utils'\nimport { Motion } from 'motion-v'\n\ndefineProps<{\n  class?: string\n  style?: Record<string, string | number>\n}>()\n\nconst { isOpen, setIsOpen, uniqueId } = inject<{\n  isOpen: Ref<boolean>\n  setIsOpen: (val: boolean) => void\n  uniqueId: string\n  triggerRef: Ref<HTMLButtonElement | null>\n}>('morphingDialog')!\n\nfunction handleClick() {\n  setIsOpen(!isOpen.value)\n}\n\nfunction handleKeyDown(e: KeyboardEvent) {\n  if (e.key === 'Enter' || e.key === ' ') {\n    e.preventDefault()\n    setIsOpen(!isOpen.value)\n  }\n}\n</script>\n\n<template>\n  <Motion\n    as=\"button\"\n    :layout-id=\"`dialog-${uniqueId}`\"\n    :class=\"cn('relative cursor-pointer', $props.class)\"\n    :style=\"$props.style\"\n    aria-haspopup=\"dialog\"\n    :aria-expanded=\"isOpen\"\n    :aria-controls=\"`motion-ui-morphing-dialog-content-${uniqueId}`\"\n    :aria-label=\"`Open dialog ${uniqueId}`\"\n    @click=\"handleClick\"\n    @keydown=\"handleKeyDown\"\n  >\n    <slot />\n  </Motion>\n</template>\n",
      "type": "registry:ui"
    },
    {
      "path": "composables/useClickOutside.ts",
      "content": "import type { Ref } from 'vue'\n\nexport function useClickOutside(\n  ref: Ref<HTMLElement | null>,\n  handler: (event: MouseEvent | TouchEvent) => void,\n): void {\n  const handleClickOutside = (event: MouseEvent | TouchEvent) => {\n    if (!ref.value || ref.value.contains(event.target as Node)) {\n      return\n    }\n    handler(event)\n  }\n\n  onMounted(() => {\n    document.addEventListener('mousedown', handleClickOutside)\n    document.addEventListener('touchstart', handleClickOutside)\n  })\n\n  onUnmounted(() => {\n    document.removeEventListener('mousedown', handleClickOutside)\n    document.removeEventListener('touchstart', handleClickOutside)\n  })\n}\n",
      "type": "registry:hook"
    }
  ]
}