{
  "name": "dialog",
  "type": "registry:ui",
  "registryDependencies": [],
  "dependencies": [
    "motion-v"
  ],
  "devDependencies": [],
  "tailwind": {},
  "cssVars": {
    "light": {},
    "dark": {}
  },
  "files": [
    {
      "path": "Dialog.vue",
      "content": "<script setup lang=\"ts\">\nimport type { Variants } from '~/types/motion'\n\nconst props = withDefaults(\n  defineProps<{\n    variants?: Variants\n    transition?: Record<string, string | number | boolean>\n    defaultOpen?: boolean\n    open?: boolean\n  }>(),\n  {\n    variants: () => ({ initial: { opacity: 0, scale: 0.9 }, animate: { opacity: 1, scale: 1 } }),\n    transition: () => ({ ease: 'easeOut', duration: 0.2 }),\n    defaultOpen: false,\n  },\n)\n\nconst emit = defineEmits<{\n  'update:open': [value: boolean]\n  openChange: [value: boolean]\n}>()\n\nconst isOpen = ref(props.defaultOpen)\n\n// Sync external v-model:open → internal state\nwatch(() => props.open, (val) => {\n  if (val !== undefined) isOpen.value = val\n})\n\nfunction setIsOpen(value: boolean) {\n  isOpen.value = value\n  emit('update:open', value)\n  emit('openChange', value)\n}\n\nfunction handleEscape(e: KeyboardEvent) {\n  if (e.key === 'Escape') setIsOpen(false)\n}\n\nwatch(isOpen, (val) => {\n  if (val) {\n    document.body.classList.add('overflow-hidden')\n    document.addEventListener('keydown', handleEscape)\n  } else {\n    document.body.classList.remove('overflow-hidden')\n    document.removeEventListener('keydown', handleEscape)\n  }\n})\n\nonUnmounted(() => {\n  document.body.classList.remove('overflow-hidden')\n  document.removeEventListener('keydown', handleEscape)\n})\n\nconst baseId = useId()\nconst ids = {\n  dialog: `motion-ui-dialog-${baseId}`,\n  title: `motion-ui-dialog-title-${baseId}`,\n  description: `motion-ui-dialog-description-${baseId}`,\n}\n\nprovide('dialog', {\n  isOpen,\n  setIsOpen,\n  variants: computed(() => props.variants),\n  transition: computed(() => props.transition),\n  ids,\n})\n</script>\n\n<template>\n  <slot />\n</template>\n",
      "type": "registry:ui"
    },
    {
      "path": "DialogClose.vue",
      "content": "<script setup lang=\"ts\">\nimport { cn } from '~/lib/utils'\nimport { X } from 'lucide-vue-next'\n\ndefineProps<{\n  class?: string\n  disabled?: boolean\n}>()\n\nconst { setIsOpen } = inject<{\n  setIsOpen: (value: boolean) => void\n}>('dialog')!\n</script>\n\n<template>\n  <button\n    type=\"button\"\n    aria-label=\"Close dialog\"\n    :class=\"\n      cn(\n        'absolute top-4 right-4 rounded-xs opacity-70 transition-opacity',\n        'hover:opacity-100 focus:ring-2 focus:outline-hidden',\n        'focus:ring-zinc-500 focus:ring-offset-2 disabled:pointer-events-none',\n        $props.class,\n      )\n    \"\n    :disabled=\"disabled\"\n    @click=\"setIsOpen(false)\"\n  >\n    <slot>\n      <X class=\"h-4 w-4\" />\n    </slot>\n    <span class=\"sr-only\">Close</span>\n  </button>\n</template>\n",
      "type": "registry:ui"
    },
    {
      "path": "DialogContent.vue",
      "content": "<script setup lang=\"ts\">\nimport { cn } from '~/lib/utils'\nimport { Motion, AnimatePresence } from 'motion-v'\nimport type { Variants } from '~/types/motion'\n\ndefineProps<{\n  class?: string\n}>()\n\nconst { isOpen, setIsOpen, variants, transition, ids } =\n  inject<{\n    isOpen: Ref<boolean>\n    setIsOpen: (value: boolean) => void\n    variants: ComputedRef<Variants>\n    transition: ComputedRef<Record<string, string | number | boolean>>\n    ids: { dialog: string; title: string; description: string }\n  }>('dialog')!\n</script>\n\n<template>\n  <Teleport to=\"body\">\n    <!-- Backdrop -->\n    <Transition\n      enter-active-class=\"transition-opacity duration-200\"\n      leave-active-class=\"transition-opacity duration-200\"\n      enter-from-class=\"opacity-0\"\n      leave-to-class=\"opacity-0\"\n    >\n      <div\n        v-if=\"isOpen\"\n        class=\"fixed inset-0 z-50 bg-black/50 backdrop-blur-xs\"\n        @click=\"setIsOpen(false)\"\n      />\n    </Transition>\n    <!-- Content -->\n    <AnimatePresence>\n      <Motion\n        v-if=\"isOpen\"\n        :key=\"ids.dialog\"\n        :id=\"ids.dialog\"\n        :aria-labelledby=\"ids.title\"\n        :aria-describedby=\"ids.description\"\n        aria-modal=\"true\"\n        role=\"dialog\"\n        initial=\"initial\"\n        animate=\"animate\"\n        exit=\"exit\"\n        :variants=\"variants\"\n        :transition=\"transition\"\n        :class=\"\n          cn(\n            'fixed z-50 top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2',\n            'rounded-lg border border-zinc-200 p-0 shadow-lg',\n            'dark:border dark:border-zinc-700',\n            $props.class,\n          )\n        \"\n      >\n        <slot />\n      </Motion>\n    </AnimatePresence>\n  </Teleport>\n</template>\n",
      "type": "registry:ui"
    },
    {
      "path": "DialogDescription.vue",
      "content": "<script setup lang=\"ts\">\nimport { cn } from '~/lib/utils'\n\ndefineProps<{\n  class?: string\n}>()\n\nconst { ids } = inject<{\n  ids: { dialog: string; title: string; description: string }\n}>('dialog')!\n</script>\n\n<template>\n  <p :id=\"ids.description\" :class=\"cn('text-base text-zinc-500', $props.class)\">\n    <slot />\n  </p>\n</template>\n",
      "type": "registry:ui"
    },
    {
      "path": "DialogHeader.vue",
      "content": "<script setup lang=\"ts\">\nimport { cn } from '~/lib/utils'\n\ndefineProps<{\n  class?: string\n}>()\n</script>\n\n<template>\n  <div :class=\"cn('flex flex-col space-y-1.5', $props.class)\">\n    <slot />\n  </div>\n</template>\n",
      "type": "registry:ui"
    },
    {
      "path": "DialogTitle.vue",
      "content": "<script setup lang=\"ts\">\nimport { cn } from '~/lib/utils'\n\ndefineProps<{\n  class?: string\n}>()\n\nconst { ids } = inject<{\n  ids: { dialog: string; title: string; description: string }\n}>('dialog')!\n</script>\n\n<template>\n  <h2 :id=\"ids.title\" :class=\"cn('text-base font-medium', $props.class)\">\n    <slot />\n  </h2>\n</template>\n",
      "type": "registry:ui"
    },
    {
      "path": "DialogTrigger.vue",
      "content": "<script setup lang=\"ts\">\nimport { cn } from '~/lib/utils'\n\ndefineProps<{\n  class?: string\n}>()\n\nconst { setIsOpen } = inject<{\n  setIsOpen: (value: boolean) => void\n}>('dialog')!\n</script>\n\n<template>\n  <button\n    type=\"button\"\n    :class=\"\n      cn(\n        'inline-flex items-center justify-center rounded-md text-sm font-medium',\n        'transition-colors focus-visible:ring-2 focus-visible:outline-hidden',\n        'focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50',\n        $props.class,\n      )\n    \"\n    @click=\"setIsOpen(true)\"\n  >\n    <slot />\n  </button>\n</template>\n",
      "type": "registry:ui"
    },
    {
      "path": "composables/usePreventScroll.ts",
      "content": "/* eslint-disable @typescript-eslint/no-explicit-any */\n// Adapted from https://github.com/adobe/react-spectrum/blob/main/packages/%40react-aria/overlays/src/usePreventScroll.ts\n\nfunction isMac(): boolean | undefined {\n  return testPlatform(/^Mac/)\n}\n\nfunction isIPhone(): boolean | undefined {\n  return testPlatform(/^iPhone/)\n}\n\nfunction isIPad(): boolean | undefined {\n  return (\n    testPlatform(/^iPad/) ||\n    (isMac() && navigator.maxTouchPoints > 1)\n  )\n}\n\nfunction isIOS(): boolean | undefined {\n  return isIPhone() || isIPad()\n}\n\nfunction testPlatform(re: RegExp): boolean | undefined {\n  return typeof window !== 'undefined' && window.navigator != null\n    ? re.test(window.navigator.platform)\n    : undefined\n}\n\nfunction chain(...callbacks: any[]): (...args: any[]) => void {\n  return (...args: any[]) => {\n    for (const callback of callbacks) {\n      if (typeof callback === 'function') {\n        callback(...args)\n      }\n    }\n  }\n}\n\nconst visualViewport =\n  typeof document !== 'undefined' && window.visualViewport\n\nfunction isScrollable(node: Element): boolean {\n  const style = window.getComputedStyle(node)\n  return /(auto|scroll)/.test(\n    style.overflow + style.overflowX + style.overflowY,\n  )\n}\n\nfunction getScrollParent(node: Element): Element {\n  if (isScrollable(node)) {\n    node = node.parentElement as HTMLElement\n  }\n  while (node && !isScrollable(node)) {\n    node = node.parentElement as HTMLElement\n  }\n  return node || document.scrollingElement || document.documentElement\n}\n\nconst nonTextInputTypes = new Set([\n  'checkbox',\n  'radio',\n  'range',\n  'color',\n  'file',\n  'image',\n  'button',\n  'submit',\n  'reset',\n])\n\nfunction isInput(target: Element) {\n  return (\n    (target instanceof HTMLInputElement &&\n      !nonTextInputTypes.has(target.type)) ||\n    target instanceof HTMLTextAreaElement ||\n    (target instanceof HTMLElement && target.isContentEditable)\n  )\n}\n\nconst KEYBOARD_BUFFER = 24\n\nlet preventScrollCount = 0\nlet restore: () => void\n\ninterface PreventScrollOptions {\n  isDisabled?: boolean\n}\n\nexport function usePreventScroll(options: PreventScrollOptions = {}) {\n  const { isDisabled } = options\n\n  watch(\n    () => isDisabled,\n    (disabled) => {\n      if (disabled) return\n\n      preventScrollCount++\n      if (preventScrollCount === 1) {\n        if (isIOS()) {\n          restore = preventScrollMobileSafari()\n        }\n      }\n    },\n    { immediate: true },\n  )\n\n  onUnmounted(() => {\n    if (!isDisabled) {\n      preventScrollCount--\n      if (preventScrollCount === 0) {\n        restore?.()\n      }\n    }\n  })\n}\n\nfunction setStyle(\n  element: HTMLElement,\n  style: string,\n  value: string,\n) {\n  const cur = (element.style as any)[style]\n  ;(element.style as any)[style] = value\n  return () => {\n    ;(element.style as any)[style] = cur\n  }\n}\n\nfunction addEvent<K extends keyof GlobalEventHandlersEventMap>(\n  target: EventTarget,\n  event: K,\n  handler: (ev: GlobalEventHandlersEventMap[K]) => any,\n  options?: boolean | AddEventListenerOptions,\n) {\n  target.addEventListener(event as string, handler as any, options)\n  return () => {\n    target.removeEventListener(event as string, handler as any, options)\n  }\n}\n\nfunction scrollIntoView(target: Element) {\n  const root = document.scrollingElement || document.documentElement\n  while (target && target !== root) {\n    const scrollable = getScrollParent(target)\n    if (\n      scrollable !== document.documentElement &&\n      scrollable !== document.body &&\n      scrollable !== target\n    ) {\n      const targetTop = target.getBoundingClientRect().top\n      const scrollableTop = scrollable.getBoundingClientRect().top\n      const targetBottom = target.getBoundingClientRect().bottom\n      const keyboardHeight =\n        scrollable.getBoundingClientRect().bottom + KEYBOARD_BUFFER\n      if (targetBottom > keyboardHeight) {\n        scrollable.scrollTop += targetTop - scrollableTop\n      }\n    }\n    target = scrollable.parentElement as Element\n  }\n}\n\nfunction preventScrollMobileSafari() {\n  let scrollable: Element\n  let lastY = 0\n\n  const onTouchStart = (e: TouchEvent) => {\n    scrollable = getScrollParent(e.target as Element)\n    if (\n      scrollable === document.documentElement &&\n      scrollable === document.body\n    ) {\n      return\n    }\n    lastY = e.changedTouches[0]!.pageY\n  }\n\n  const onTouchMove = (e: TouchEvent) => {\n    if (\n      !scrollable ||\n      scrollable === document.documentElement ||\n      scrollable === document.body\n    ) {\n      e.preventDefault()\n      return\n    }\n    const y = e.changedTouches[0]!.pageY\n    const scrollTop = scrollable.scrollTop\n    const bottom = scrollable.scrollHeight - scrollable.clientHeight\n    if (bottom === 0) return\n    if ((scrollTop <= 0 && y > lastY) || (scrollTop >= bottom && y < lastY)) {\n      e.preventDefault()\n    }\n    lastY = y\n  }\n\n  const onTouchEnd = (e: TouchEvent) => {\n    const target = e.target as HTMLElement\n    if (isInput(target) && target !== document.activeElement) {\n      e.preventDefault()\n      target.style.transform = 'translateY(-2000px)'\n      target.focus()\n      requestAnimationFrame(() => {\n        target.style.transform = ''\n      })\n    }\n  }\n\n  const onFocus = (e: FocusEvent) => {\n    const target = e.target as HTMLElement\n    if (isInput(target)) {\n      target.style.transform = 'translateY(-2000px)'\n      requestAnimationFrame(() => {\n        target.style.transform = ''\n        if (visualViewport) {\n          if (visualViewport.height < window.innerHeight) {\n            requestAnimationFrame(() => {\n              scrollIntoView(target)\n            })\n          } else {\n            visualViewport.addEventListener(\n              'resize',\n              () => scrollIntoView(target),\n              { once: true },\n            )\n          }\n        }\n      })\n    }\n  }\n\n  const onWindowScroll = () => {\n    window.scrollTo(0, 0)\n  }\n\n  const scrollX = window.pageXOffset\n  const scrollY = window.pageYOffset\n\n  const restoreStyles = chain(\n    setStyle(\n      document.documentElement,\n      'paddingRight',\n      `${window.innerWidth - document.documentElement.clientWidth}px`,\n    ),\n  )\n\n  window.scrollTo(0, 0)\n\n  const removeEvents = chain(\n    addEvent(document, 'touchstart', onTouchStart, {\n      passive: false,\n      capture: true,\n    }),\n    addEvent(document, 'touchmove', onTouchMove, {\n      passive: false,\n      capture: true,\n    }),\n    addEvent(document, 'touchend', onTouchEnd, {\n      passive: false,\n      capture: true,\n    }),\n    addEvent(document, 'focus', onFocus, true),\n    addEvent(window, 'scroll', onWindowScroll),\n  )\n\n  return () => {\n    restoreStyles()\n    removeEvents()\n    window.scrollTo(scrollX, scrollY)\n  }\n}\n",
      "type": "registry:hook"
    }
  ]
}