gvf3n4ygn-test/__generated/registry-schemes/styles/tailwind/dialog.json

CLI for SIGMA-UI components.

{
  "name": "dialog",
  "dependencies": [],
  "registryDependencies": [],
  "files": [
    {
      "name": "Dialog.vue",
      "content": "<script setup lang=\"ts\">\nimport { DialogRoot, type DialogRootEmits, type DialogRootProps, useForwardPropsEmits } from 'radix-vue';\n\nconst props = defineProps<DialogRootProps>();\nconst emits = defineEmits<DialogRootEmits>();\n\nconst forwarded = useForwardPropsEmits(props, emits);\n</script>\n\n<template>\n  <DialogRoot v-bind=\"forwarded\">\n    <slot />\n  </DialogRoot>\n</template>\n"
    },
    {
      "name": "DialogClose.vue",
      "content": "<script setup lang=\"ts\">\nimport { DialogClose, type DialogCloseProps } from 'radix-vue';\n\nconst props = defineProps<DialogCloseProps>();\n</script>\n\n<template>\n  <DialogClose v-bind=\"props\">\n    <slot />\n  </DialogClose>\n</template>\n"
    },
    {
      "name": "DialogContent.vue",
      "content": "<script setup lang=\"ts\">\nimport {\n  DialogClose,\n  DialogContent,\n  type DialogContentEmits,\n  type DialogContentProps,\n  DialogOverlay,\n  DialogPortal,\n  useForwardPropsEmits,\n} from 'radix-vue';\nimport { XIcon } from 'lucide-vue-next';\nimport { cn } from '@ui/utils';\n\nconst props = defineProps<DialogContentProps>();\nconst emits = defineEmits<DialogContentEmits>();\n\nconst forwarded = useForwardPropsEmits(props, emits);\n</script>\n\n<template>\n  <DialogPortal>\n    <DialogOverlay\n      class=\"fixed inset-0 z-50 bg-black/80  data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0\"\n    />\n    <DialogContent\n      v-bind=\"forwarded\"\n      :class=\"\n        cn(\n          'fixed left-1/2 top-1/2 z-50 grid w-full max-w-lg -translate-x-1/2 -translate-y-1/2 gap-4 border bg-background p-6 shadow-lg duration-200 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 sm:rounded-lg',\n          $attrs.class ?? '',\n        )\"\n    >\n      <slot />\n\n      <DialogClose\n        class=\"absolute right-4 top-4 rounded-sm opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none data-[state=open]:bg-accent data-[state=open]:text-muted-foreground\"\n      >\n        <XIcon class=\"w-4 h-4\" />\n        <span class=\"sr-only\">Close</span>\n      </DialogClose>\n    </DialogContent>\n  </DialogPortal>\n</template>\n"
    },
    {
      "name": "DialogDescription.vue",
      "content": "<script setup lang=\"ts\">\nimport { DialogDescription, type DialogDescriptionProps, useForwardProps } from 'radix-vue';\nimport { cn } from '@ui/utils';\n\nconst props = defineProps<DialogDescriptionProps>();\n\nconst forwardedProps = useForwardProps(props);\n</script>\n\n<template>\n  <DialogDescription\n    v-bind=\"forwardedProps\"\n    :class=\"cn('text-sm text-muted-foreground', $attrs.class ?? '')\"\n  >\n    <slot />\n  </DialogDescription>\n</template>\n"
    },
    {
      "name": "DialogFooter.vue",
      "content": "<script setup lang=\"ts\">\nimport { cn } from '@ui/utils';\n\n</script>\n\n<template>\n  <div\n    :class=\"\n      cn(\n        'flex flex-col-reverse sm:flex-row sm:justify-end sm:gap-x-2',\n        $attrs.class ?? '',\n      )\n    \"\n  >\n    <slot />\n  </div>\n</template>\n"
    },
    {
      "name": "DialogHeader.vue",
      "content": "<script setup lang=\"ts\">\nimport { cn } from '@ui/utils';\n\n</script>\n\n<template>\n  <div\n    :class=\"cn('flex flex-col gap-y-1.5 text-center sm:text-left', $attrs.class ?? '')\"\n  >\n    <slot />\n  </div>\n</template>\n"
    },
    {
      "name": "DialogScrollContent.vue",
      "content": "<script setup lang=\"ts\">\nimport {\n  DialogClose,\n  DialogContent,\n  type DialogContentEmits,\n  type DialogContentProps,\n  DialogOverlay,\n  DialogPortal,\n  useForwardPropsEmits,\n} from 'radix-vue';\nimport { XIcon } from 'lucide-vue-next';\nimport { cn } from '@ui/utils';\n\nconst props = defineProps<DialogContentProps>();\nconst emits = defineEmits<DialogContentEmits>();\n\nconst forwarded = useForwardPropsEmits(props, emits);\n</script>\n\n<template>\n  <DialogPortal>\n    <DialogOverlay\n      class=\"fixed inset-0 z-50 grid place-items-center overflow-y-auto bg-black/80  data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0\"\n    >\n      <DialogContent\n        :class=\"\n          cn(\n            'relative z-50 grid w-full max-w-lg my-8 gap-4 border border-border bg-background p-6 shadow-lg duration-200 sm:rounded-lg md:w-full',\n            $attrs.class ?? '',\n          )\n        \"\n        v-bind=\"forwarded\"\n        @pointer-down-outside=\"(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        <slot />\n\n        <DialogClose\n          class=\"absolute top-3 right-3 p-0.5 transition-colors rounded-md hover:bg-secondary\"\n        >\n          <XIcon class=\"w-4 h-4\" />\n          <span class=\"sr-only\">Close</span>\n        </DialogClose>\n      </DialogContent>\n    </DialogOverlay>\n  </DialogPortal>\n</template>\n"
    },
    {
      "name": "DialogTitle.vue",
      "content": "<script setup lang=\"ts\">\nimport { DialogTitle, type DialogTitleProps, useForwardProps } from 'radix-vue';\nimport { cn } from '@ui/utils';\n\nconst props = defineProps<DialogTitleProps>();\n\nconst forwardedProps = useForwardProps(props);\n</script>\n\n<template>\n  <DialogTitle\n    v-bind=\"forwardedProps\"\n    :class=\"\n      cn(\n        'text-lg font-semibold leading-none tracking-tight',\n        $attrs.class ?? '',\n      )\n    \"\n  >\n    <slot />\n  </DialogTitle>\n</template>\n"
    },
    {
      "name": "DialogTrigger.vue",
      "content": "<script setup lang=\"ts\">\nimport { DialogTrigger, type DialogTriggerProps } from 'radix-vue';\n\nconst props = defineProps<DialogTriggerProps>();\n</script>\n\n<template>\n  <DialogTrigger v-bind=\"props\">\n    <slot />\n  </DialogTrigger>\n</template>\n"
    },
    {
      "name": "index.ts",
      "content": "export { default as Dialog } from './Dialog.vue';\nexport { default as DialogClose } from './DialogClose.vue';\nexport { default as DialogTrigger } from './DialogTrigger.vue';\nexport { default as DialogHeader } from './DialogHeader.vue';\nexport { default as DialogTitle } from './DialogTitle.vue';\nexport { default as DialogDescription } from './DialogDescription.vue';\nexport { default as DialogContent } from './DialogContent.vue';\nexport { default as DialogScrollContent } from './DialogScrollContent.vue';\nexport { default as DialogFooter } from './DialogFooter.vue';\n"
    }
  ],
  "type": "components:ui"
}