sigma-ui/__generated/registry-schemes/style-system/css/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 'reka-ui';\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 'reka-ui';\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 'reka-ui';\nimport { XIcon } from 'lucide-vue-next';\n\nconst props = defineProps<DialogContentProps>();\nconst emits = defineEmits<DialogContentEmits>();\n\nconst forwarded = useForwardPropsEmits(props, emits);\n</script>\n\n<template>\n  <DialogPortal>\n    <DialogOverlay class=\"sigma-ui-dialog-overlay\" />\n    <DialogContent\n      v-bind=\"forwarded\"\n      class=\"sigma-ui-dialog-content\"\n      :class=\"[$attrs.class]\"\n    >\n      <slot />\n\n      <DialogClose class=\"sigma-ui-dialog-close\">\n        <XIcon class=\"sigma-ui-dialog-close__icon\" />\n        <span class=\"sigma-ui-dialog-close__label\">Close</span>\n      </DialogClose>\n    </DialogContent>\n  </DialogPortal>\n</template>\n\n<style>\n.sigma-ui-dialog-overlay {\n  position: fixed;\n  z-index: 50;\n  animation: fade-in 0.2s ease-out;\n  background-color: rgb(0 0 0 / 80%);\n  inset: 0;\n}\n\n.sigma-ui-dialog-overlay[data-state=\"open\"] {\n  animation: fade-in 0.2s ease-out;\n}\n\n.sigma-ui-dialog-overlay[data-state=\"closed\"] {\n  animation: fade-out 0.2s ease-in;\n}\n\n.sigma-ui-dialog-content {\n  position: fixed;\n  z-index: 50;\n  top: 50%;\n  left: 50%;\n  display: grid;\n  width: 100%;\n  max-width: 32rem;\n  padding: 1.5rem;\n  border: 1px solid hsl(var(--border));\n  background-color: hsl(var(--background));\n  box-shadow: var(--shadow-lg);\n  gap: 1rem;\n  transform: translate(-50%, -50%);\n  transition-duration: 200ms;\n}\n\n.sigma-ui-dialog-content[data-state=\"open\"] {\n  animation: dialog-show 0.2s ease-out;\n}\n\n.sigma-ui-dialog-content[data-state=\"closed\"] {\n  animation: dialog-hide 0.2s ease-in;\n}\n\n.sigma-ui-dialog-close {\n  position: absolute;\n  top: 1rem;\n  right: 1rem;\n  border-radius: var(--radius-sm);\n  opacity: 0.7;\n  transition-duration: 150ms;\n  transition-property: opacity;\n  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);\n}\n\n.sigma-ui-dialog-close:hover {\n  opacity: 1;\n}\n\n.sigma-ui-dialog-close:focus {\n  box-shadow: 0 0 0 2px hsl(var(--background)), 0 0 0 4px hsl(var(--ring));\n  outline: none;\n}\n\n.sigma-ui-dialog-close[data-state=\"open\"] {\n  background-color: hsl(var(--secondary));\n  color: hsl(var(--muted-foreground));\n}\n\n.sigma-ui-dialog-close:disabled {\n  pointer-events: none;\n}\n\n.sigma-ui-dialog-close__icon {\n  width: 1rem;\n  height: 1rem;\n}\n\n.sigma-ui-dialog-close__label {\n  position: absolute;\n  overflow: hidden;\n  width: 1px;\n  height: 1px;\n  padding: 0;\n  border-width: 0;\n  margin: -1px;\n  clip: rect(0, 0, 0, 0);\n  white-space: nowrap;\n}\n\n@keyframes fade-in {\n  from {\n    opacity: 0;\n  }\n\n  to {\n    opacity: 1;\n  }\n}\n\n@keyframes fade-out {\n  from {\n    opacity: 1;\n  }\n\n  to {\n    opacity: 0;\n  }\n}\n\n@keyframes dialog-show {\n  from {\n    opacity: 0;\n    transform: translate(-50%, -48%) scale(0.95);\n  }\n\n  to {\n    opacity: 1;\n    transform: translate(-50%, -50%) scale(1);\n  }\n}\n\n@keyframes dialog-hide {\n  from {\n    opacity: 1;\n    transform: translate(-50%, -50%) scale(1);\n  }\n\n  to {\n    opacity: 0;\n    transform: translate(-50%, -48%) scale(0.95);\n  }\n}\n\n@media (width >= 640px) {\n  .sigma-ui-dialog-content {\n    border-radius: var(--radius-lg);\n  }\n}\n</style>\n"
    },
    {
      "name": "DialogDescription.vue",
      "content": "<script setup lang=\"ts\">\nimport { DialogDescription, type DialogDescriptionProps, useForwardProps } from 'reka-ui';\n\nconst props = defineProps<DialogDescriptionProps>();\n\nconst forwardedProps = useForwardProps(props);\n</script>\n\n<template>\n  <DialogDescription\n    v-bind=\"forwardedProps\"\n    class=\"sigma-ui-dialog-description\"\n  >\n    <slot />\n  </DialogDescription>\n</template>\n\n<style>\n.sigma-ui-dialog-description {\n  color: hsl(var(--muted-foreground));\n  font-size: 0.875rem;\n}\n</style>\n"
    },
    {
      "name": "DialogFooter.vue",
      "content": "<script setup lang=\"ts\">\n</script>\n\n<template>\n  <div\n    class=\"sigma-ui-dialog-footer\"\n    :class=\"[$attrs.class]\"\n  >\n    <slot />\n  </div>\n</template>\n\n<style>\n.sigma-ui-dialog-footer {\n  display: flex;\n  flex-direction: column-reverse;\n}\n\n@media (width >= 640px) {\n  .sigma-ui-dialog-footer {\n    flex-direction: row;\n    justify-content: flex-end;\n    gap: 0.5rem;\n  }\n}\n</style>\n"
    },
    {
      "name": "DialogHeader.vue",
      "content": "<script setup lang=\"ts\">\n\n;\n</script>\n\n<template>\n  <div\n    class=\"sigma-ui-dialog-header\"\n    :class=\"[$attrs.class]\"\n  >\n    <slot />\n  </div>\n</template>\n\n<style>\n.sigma-ui-dialog-header {\n  display: flex;\n  flex-direction: column;\n  gap: 0.375rem;\n  text-align: center;\n}\n\n@media (width >= 640px) {\n  .sigma-ui-dialog-header {\n    text-align: left;\n  }\n}\n</style>\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 'reka-ui';\nimport { XIcon } from 'lucide-vue-next';\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=\"sigma-ui-dialog-scroll-overlay\"\n    >\n      <DialogContent\n        class=\"sigma-ui-dialog-scroll-content\"\n        :class=\"[$attrs.class]\"\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 class=\"sigma-ui-dialog-scroll-close\">\n          <XIcon class=\"sigma-ui-dialog-scroll-close__icon\" />\n          <span class=\"sigma-ui-dialog-scroll-close__label\">Close</span>\n        </DialogClose>\n      </DialogContent>\n    </DialogOverlay>\n  </DialogPortal>\n</template>\n\n<style>\n.sigma-ui-dialog-scroll-overlay {\n  position: fixed;\n  z-index: 50;\n  display: grid;\n  animation: fade-in 0.2s ease-out;\n  background-color: rgb(0 0 0 / 80%);\n  inset: 0;\n  overflow-y: auto;\n  place-items: center;\n}\n\n.sigma-ui-dialog-scroll-overlay[data-state=\"open\"] {\n  animation: fade-in 0.2s ease-out;\n}\n\n.sigma-ui-dialog-scroll-overlay[data-state=\"closed\"] {\n  animation: fade-out 0.2s ease-in;\n}\n\n.sigma-ui-dialog-scroll-content {\n  position: relative;\n  z-index: 50;\n  display: grid;\n  width: 100%;\n  max-width: 32rem;\n  padding: 1.5rem;\n  border: 1px solid hsl(var(--border));\n  margin: 2rem 0;\n  background-color: hsl(var(--background));\n  box-shadow: var(--shadow-lg);\n  gap: 1rem;\n  transition-duration: 200ms;\n}\n\n.sigma-ui-dialog-scroll-close {\n  position: absolute;\n  top: 0.75rem;\n  right: 0.75rem;\n  padding: 0.125rem;\n  border-radius: var(--radius-md);\n  transition-duration: 150ms;\n  transition-property: background-color;\n  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);\n}\n\n.sigma-ui-dialog-scroll-close:hover {\n  background-color: hsl(var(--secondary));\n}\n\n.sigma-ui-dialog-scroll-close__icon {\n  width: 1rem;\n  height: 1rem;\n}\n\n.sigma-ui-dialog-scroll-close__label {\n  position: absolute;\n  overflow: hidden;\n  width: 1px;\n  height: 1px;\n  padding: 0;\n  border-width: 0;\n  margin: -1px;\n  clip: rect(0, 0, 0, 0);\n  white-space: nowrap;\n}\n\n@media (width >= 640px) {\n  .sigma-ui-dialog-scroll-content {\n    border-radius: var(--radius-lg);\n  }\n}\n\n@media (width >= 768px) {\n  .sigma-ui-dialog-scroll-content {\n    width: 100%;\n  }\n}\n\n@keyframes fade-in {\n  from {\n    opacity: 0;\n  }\n\n  to {\n    opacity: 1;\n  }\n}\n\n@keyframes fade-out {\n  from {\n    opacity: 1;\n  }\n\n  to {\n    opacity: 0;\n  }\n}\n</style>\n"
    },
    {
      "name": "DialogTitle.vue",
      "content": "<script setup lang=\"ts\">\nimport { DialogTitle, type DialogTitleProps, useForwardProps } from 'reka-ui';\n\nconst props = defineProps<DialogTitleProps>();\n\nconst forwardedProps = useForwardProps(props);\n</script>\n\n<template>\n  <DialogTitle\n    v-bind=\"forwardedProps\"\n    class=\"sigma-ui-dialog-title\"\n  >\n    <slot />\n  </DialogTitle>\n</template>\n\n<style>\n.sigma-ui-dialog-title {\n  font-size: 1.125rem;\n  font-weight: 600;\n  letter-spacing: -0.025em;\n  line-height: 1;\n}\n</style>\n"
    },
    {
      "name": "DialogTrigger.vue",
      "content": "<script setup lang=\"ts\">\nimport { DialogTrigger, type DialogTriggerProps } from 'reka-ui';\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"
}