{
  "$schema": "https://shadcn-vue.com/schema/registry-item.json",
  "name": "dialog",
  "title": "Dialog",
  "type": "registry:ui",
  "files": [
    {
      "path": "packages/registry-vue/components/dialog/Dialog.vue",
      "content": "<script setup lang=\"ts\">\nimport { computed } from 'vue'\nimport type { DialogRootEmits, DialogRootProps } from 'reka-ui'\nimport { DialogRoot, useForwardPropsEmits } from 'reka-ui'\n\nconst props = defineProps<DialogRootProps>()\nconst emits = defineEmits<DialogRootEmits>()\n\nconst forwarded = useForwardPropsEmits(props, emits)\n\n// Merge forwarded with slotProps to ensure state is passed through\nconst mergedProps = computed(() => ({\n  ...forwarded.value,\n}))\n</script>\n\n<template>\n  <DialogRoot v-slot=\"slotProps\" v-bind=\"mergedProps\">\n    <slot v-bind=\"slotProps\" />\n  </DialogRoot>\n</template>\n",
      "type": "registry:ui",
      "target": "~/app/components/ui/dialog/Dialog.vue"
    },
    {
      "path": "packages/registry-vue/components/dialog/DialogClose.vue",
      "content": "<script setup lang=\"ts\">\nimport type { DialogCloseProps } from 'reka-ui'\nimport { DialogClose } from 'reka-ui'\n\nconst props = defineProps<DialogCloseProps>()\n</script>\n\n<template>\n  <DialogClose data-uipkge data-slot=\"dialog-close\" v-bind=\"props\">\n    <slot />\n  </DialogClose>\n</template>\n",
      "type": "registry:ui",
      "target": "~/app/components/ui/dialog/DialogClose.vue"
    },
    {
      "path": "packages/registry-vue/components/dialog/DialogContent.vue",
      "content": "<script setup lang=\"ts\">\nimport type { DialogContentEmits, DialogContentProps } from 'reka-ui'\nimport type { HTMLAttributes } from 'vue'\nimport { reactiveOmit } from '@vueuse/core'\nimport { X } from 'lucide-vue-next'\nimport { DialogClose, DialogContent, DialogPortal, useForwardPropsEmits } from 'reka-ui'\nimport { cn } from '@/lib/utils'\nimport DialogOverlay from './DialogOverlay.vue'\n\ndefineOptions({\n  inheritAttrs: false,\n})\n\nconst props = withDefaults(\n  defineProps<DialogContentProps & { class?: HTMLAttributes['class']; showCloseButton?: boolean }>(),\n  {\n    showCloseButton: true,\n  },\n)\nconst emits = defineEmits<DialogContentEmits>()\n\nconst delegatedProps = reactiveOmit(props, 'class')\n\nconst forwarded = useForwardPropsEmits(delegatedProps, emits)\n</script>\n\n<template>\n  <DialogPortal>\n    <DialogOverlay />\n    <DialogContent\n      data-uipkge\n      data-slot=\"dialog-content\"\n      role=\"dialog\"\n      v-bind=\"{ ...$attrs, ...forwarded }\"\n      :class=\"\n        cn(\n          'bg-background data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 fixed top-[50%] left-[50%] z-50 grid w-full max-w-[calc(100%-2rem)] translate-x-[-50%] translate-y-[-50%] gap-4 rounded-lg border p-6 shadow-lg duration-200 sm:max-w-lg',\n          props.class,\n        )\n      \"\n    >\n      <slot />\n\n      <DialogClose\n        v-if=\"showCloseButton\"\n        data-uipkge\n        data-slot=\"dialog-close\"\n        class=\"ring-offset-background focus:ring-ring data-[state=open]:bg-accent data-[state=open]:text-muted-foreground absolute top-4 right-4 rounded-xs opacity-70 transition-opacity hover:opacity-100 focus:ring-2 focus:ring-offset-2 focus:outline-hidden disabled:pointer-events-none [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4\"\n      >\n        <X />\n        <span class=\"sr-only\">Close</span>\n      </DialogClose>\n    </DialogContent>\n  </DialogPortal>\n</template>\n",
      "type": "registry:ui",
      "target": "~/app/components/ui/dialog/DialogContent.vue"
    },
    {
      "path": "packages/registry-vue/components/dialog/DialogDescription.vue",
      "content": "<script setup lang=\"ts\">\nimport type { DialogDescriptionProps } from 'reka-ui'\nimport type { HTMLAttributes } from 'vue'\nimport { reactiveOmit } from '@vueuse/core'\nimport { DialogDescription, useForwardProps } from 'reka-ui'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<DialogDescriptionProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = reactiveOmit(props, 'class')\n\nconst forwardedProps = useForwardProps(delegatedProps)\n</script>\n\n<template>\n  <DialogDescription\n    data-uipkge\n    data-slot=\"dialog-description\"\n    v-bind=\"forwardedProps\"\n    :class=\"cn('text-muted-foreground text-sm', props.class)\"\n  >\n    <slot />\n  </DialogDescription>\n</template>\n",
      "type": "registry:ui",
      "target": "~/app/components/ui/dialog/DialogDescription.vue"
    },
    {
      "path": "packages/registry-vue/components/dialog/DialogFooter.vue",
      "content": "<script setup lang=\"ts\">\nimport type { HTMLAttributes } from 'vue'\nimport { DialogClose } from 'reka-ui'\nimport { cn } from '@/lib/utils'\nimport { Button } from '@/components/ui/button'\n\nconst props = withDefaults(\n  defineProps<{\n    class?: HTMLAttributes['class']\n    showCloseButton?: boolean\n  }>(),\n  {\n    showCloseButton: false,\n  },\n)\n</script>\n\n<template>\n  <div\n    data-uipkge\n    data-slot=\"dialog-footer\"\n    :class=\"cn('flex flex-col-reverse gap-2 sm:flex-row sm:justify-end', props.class)\"\n  >\n    <slot />\n    <DialogClose v-if=\"showCloseButton\" as-child>\n      <Button variant=\"outline\"> Close </Button>\n    </DialogClose>\n  </div>\n</template>\n",
      "type": "registry:ui",
      "target": "~/app/components/ui/dialog/DialogFooter.vue"
    },
    {
      "path": "packages/registry-vue/components/dialog/DialogHeader.vue",
      "content": "<script setup lang=\"ts\">\nimport type { HTMLAttributes } from 'vue'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<{\n  class?: HTMLAttributes['class']\n}>()\n</script>\n\n<template>\n  <div data-uipkge data-slot=\"dialog-header\" :class=\"cn('flex flex-col gap-2 text-center sm:text-left', props.class)\">\n    <slot />\n  </div>\n</template>\n",
      "type": "registry:ui",
      "target": "~/app/components/ui/dialog/DialogHeader.vue"
    },
    {
      "path": "packages/registry-vue/components/dialog/DialogOverlay.vue",
      "content": "<script setup lang=\"ts\">\nimport type { DialogOverlayProps } from 'reka-ui'\nimport type { HTMLAttributes } from 'vue'\nimport { reactiveOmit } from '@vueuse/core'\nimport { DialogOverlay } from 'reka-ui'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<DialogOverlayProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = reactiveOmit(props, 'class')\n</script>\n\n<template>\n  <DialogOverlay\n    data-uipkge\n    data-slot=\"dialog-overlay\"\n    v-bind=\"delegatedProps\"\n    :class=\"\n      cn(\n        'data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 bg-foreground/50 fixed inset-0 z-50',\n        props.class,\n      )\n    \"\n  >\n    <slot />\n  </DialogOverlay>\n</template>\n",
      "type": "registry:ui",
      "target": "~/app/components/ui/dialog/DialogOverlay.vue"
    },
    {
      "path": "packages/registry-vue/components/dialog/DialogScrollContent.vue",
      "content": "<script setup lang=\"ts\">\nimport type { DialogContentEmits, DialogContentProps } from 'reka-ui'\nimport type { HTMLAttributes } from 'vue'\nimport { reactiveOmit } from '@vueuse/core'\nimport { X } from 'lucide-vue-next'\nimport { DialogClose, DialogContent, DialogOverlay, DialogPortal, useForwardPropsEmits } from 'reka-ui'\nimport { cn } from '@/lib/utils'\n\ndefineOptions({\n  inheritAttrs: false,\n})\n\nconst props = defineProps<DialogContentProps & { class?: HTMLAttributes['class'] }>()\nconst emits = defineEmits<DialogContentEmits>()\n\nconst delegatedProps = reactiveOmit(props, 'class')\n\nconst forwarded = useForwardPropsEmits(delegatedProps, emits)\n</script>\n\n<template>\n  <DialogPortal>\n    <DialogOverlay\n      class=\"data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 bg-foreground/50 fixed inset-0 z-50 grid place-items-center overflow-y-auto\"\n    >\n      <DialogContent\n        :class=\"\n          cn(\n            'bg-background relative z-50 my-8 grid w-full max-w-lg gap-4 border p-6 shadow-lg duration-200 sm:rounded-lg md:w-full',\n            props.class,\n          )\n        \"\n        v-bind=\"{ ...$attrs, ...forwarded }\"\n        @pointer-down-outside=\"\n          (event) => {\n            const originalEvent = event.detail.originalEvent\n            const target = originalEvent.target as HTMLElement\n            if (originalEvent.offsetX > target.clientWidth || originalEvent.offsetY > target.clientHeight) {\n              event.preventDefault()\n            }\n          }\n        \"\n      >\n        <slot />\n\n        <DialogClose class=\"hover:bg-secondary absolute top-4 right-4 rounded-md p-0.5 transition-colors duration-200\">\n          <X class=\"h-4 w-4\" />\n          <span class=\"sr-only\">Close</span>\n        </DialogClose>\n      </DialogContent>\n    </DialogOverlay>\n  </DialogPortal>\n</template>\n",
      "type": "registry:ui",
      "target": "~/app/components/ui/dialog/DialogScrollContent.vue"
    },
    {
      "path": "packages/registry-vue/components/dialog/DialogTitle.vue",
      "content": "<script setup lang=\"ts\">\nimport type { DialogTitleProps } from 'reka-ui'\nimport type { HTMLAttributes } from 'vue'\nimport { reactiveOmit } from '@vueuse/core'\nimport { DialogTitle, useForwardProps } from 'reka-ui'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<DialogTitleProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = reactiveOmit(props, 'class')\n\nconst forwardedProps = useForwardProps(delegatedProps)\n</script>\n\n<template>\n  <DialogTitle\n    data-uipkge\n    data-slot=\"dialog-title\"\n    v-bind=\"forwardedProps\"\n    :class=\"cn('text-lg leading-none font-semibold', props.class)\"\n  >\n    <slot />\n  </DialogTitle>\n</template>\n",
      "type": "registry:ui",
      "target": "~/app/components/ui/dialog/DialogTitle.vue"
    },
    {
      "path": "packages/registry-vue/components/dialog/DialogTrigger.vue",
      "content": "<script setup lang=\"ts\">\nimport type { HTMLAttributes } from 'vue'\nimport { DialogTrigger } from 'reka-ui'\n\nconst props = defineProps<{\n  class?: HTMLAttributes['class']\n  asChild?: boolean\n  dialog?: any\n}>()\n</script>\n\n<template>\n  <DialogTrigger data-uipkge data-slot=\"dialog-trigger\" :class=\"props.class\" :as-child=\"props.asChild\">\n    <slot />\n  </DialogTrigger>\n</template>\n",
      "type": "registry:ui",
      "target": "~/app/components/ui/dialog/DialogTrigger.vue"
    },
    {
      "path": "packages/registry-vue/components/dialog/index.ts",
      "content": "export { default as Dialog } from './Dialog.vue'\nexport { default as DialogClose } from './DialogClose.vue'\nexport { default as DialogContent } from './DialogContent.vue'\nexport { default as DialogDescription } from './DialogDescription.vue'\nexport { default as DialogFooter } from './DialogFooter.vue'\nexport { default as DialogHeader } from './DialogHeader.vue'\nexport { default as DialogOverlay } from './DialogOverlay.vue'\nexport { default as DialogScrollContent } from './DialogScrollContent.vue'\nexport { default as DialogTitle } from './DialogTitle.vue'\nexport { default as DialogTrigger } from './DialogTrigger.vue'\n",
      "type": "registry:ui",
      "target": "~/app/components/ui/dialog/index.ts"
    }
  ],
  "dependencies": [
    "@vueuse/core",
    "lucide-vue-next",
    "reka-ui"
  ],
  "devDependencies": [],
  "registryDependencies": [
    "https://uipkge.dev/r/vue/button.json"
  ],
  "description": "Free-form modal primitive — composable from `Dialog`, `DialogTrigger`, `DialogContent`, and friends. Use for forms, info cards, pickers, and any custom modal layout. For confirm/destructive prompts, prefer the prebuilt `AlertModal` shortcut.",
  "categories": [
    "overlay"
  ]
}