sigma-ui/__generated/registry-schemes/style-system/css/sheet.json

CLI for SIGMA-UI components.

{
  "name": "sheet",
  "dependencies": [],
  "registryDependencies": [],
  "files": [
    {
      "name": "Sheet.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": "SheetClose.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": "SheetContent.vue",
      "content": "<script setup lang=\"ts\">\nimport { computed } from 'vue';\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';\nimport { type SheetVariants, sheetVariants } from '.';\n\ninterface SheetContentProps extends DialogContentProps {\n  side?: SheetVariants['side'];\n}\n\ndefineOptions({\n  inheritAttrs: false,\n});\n\nconst props = defineProps<SheetContentProps>();\nconst emits = defineEmits<DialogContentEmits>();\n\nconst delegatedProps = computed(() => ({ ...props, side: undefined }));\nconst forwarded = useForwardPropsEmits(delegatedProps, emits);\n</script>\n\n<template>\n  <DialogPortal>\n    <DialogOverlay class=\"sigma-ui-sheet-overlay\" />\n    <DialogContent\n      :class=\"[sheetVariants({ side }), $attrs.class]\"\n      v-bind=\"{ ...forwarded, ...$attrs }\"\n    >\n      <slot />\n\n      <DialogClose class=\"sigma-ui-sheet-close\">\n        <XIcon class=\"sigma-ui-sheet-close__icon\" />\n      </DialogClose>\n    </DialogContent>\n  </DialogPortal>\n</template>\n\n<style>\n.sigma-ui-sheet-overlay {\n  position: fixed;\n  z-index: 50;\n  background-color: rgb(0 0 0 / 80%);\n  inset: 0;\n}\n\n.sigma-ui-sheet-overlay[data-state=\"open\"] {\n  animation: overlayShow 150ms ease-out;\n}\n\n.sigma-ui-sheet-overlay[data-state=\"closed\"] {\n  animation: overlayHide 150ms ease-in;\n}\n\n.sigma-ui-sheet-content__base {\n  position: fixed;\n  z-index: 50;\n  padding: 1.5rem;\n  background-color: hsl(var(--background));\n  box-shadow: 0 2px 10px rgb(0 0 0 / 10%);\n  transition: all 0.3s ease-in-out;\n}\n\n.sigma-ui-sheet-content__base[data-state=\"open\"] {\n  animation-duration: 500ms;\n  animation-timing-function: cubic-bezier(0.4, 0, 0.2, 1);\n}\n\n.sigma-ui-sheet-content__base[data-state=\"closed\"] {\n  animation-duration: 300ms;\n  animation-timing-function: cubic-bezier(0.4, 0, 0.2, 1);\n}\n\n.sigma-ui-sheet-content--top {\n  top: 0;\n  border-bottom: 1px solid hsl(var(--border));\n  inset-inline: 0;\n}\n\n.sigma-ui-sheet-content--top[data-state=\"closed\"] {\n  animation-name: slide-out-to-top;\n}\n\n.sigma-ui-sheet-content--top[data-state=\"open\"] {\n  animation-name: slide-in-from-top;\n}\n\n.sigma-ui-sheet-content--bottom {\n  bottom: 0;\n  border-top: 1px solid hsl(var(--border));\n  inset-inline: 0;\n}\n\n.sigma-ui-sheet-content--bottom[data-state=\"closed\"] {\n  animation-name: slide-out-to-bottom;\n}\n\n.sigma-ui-sheet-content--bottom[data-state=\"open\"] {\n  animation-name: slide-in-from-bottom;\n}\n\n.sigma-ui-sheet-content--left {\n  left: 0;\n  width: 75%;\n  height: 100%;\n  border-right: 1px solid hsl(var(--border));\n  inset-block: 0;\n}\n\n.sigma-ui-sheet-content--left[data-state=\"closed\"] {\n  animation-name: slide-out-to-left;\n}\n\n.sigma-ui-sheet-content--left[data-state=\"open\"] {\n  animation-name: slide-in-from-left;\n}\n\n@media (width >= 640px) {\n  .sigma-ui-sheet-content--left {\n    max-width: 24rem;\n  }\n}\n\n.sigma-ui-sheet-content--right {\n  right: 0;\n  width: 75%;\n  height: 100%;\n  border-left: 1px solid hsl(var(--border));\n  inset-block: 0;\n}\n\n.sigma-ui-sheet-content--right[data-state=\"closed\"] {\n  animation-name: slide-out-to-right;\n}\n\n.sigma-ui-sheet-content--right[data-state=\"open\"] {\n  animation-name: slide-in-from-right;\n}\n\n@media (width >= 640px) {\n  .sigma-ui-sheet-content--right {\n    max-width: 24rem;\n  }\n}\n\n.sigma-ui-sheet-close {\n  position: absolute;\n  top: 1rem;\n  right: 1rem;\n  border-radius: var(--radius-sm);\n  opacity: 0.7;\n  transition: opacity 0.2s;\n}\n\n.sigma-ui-sheet-close:hover {\n  opacity: 1;\n}\n\n.sigma-ui-sheet-close:focus {\n  box-shadow: 0 0 0 2px hsl(var(--ring)), 0 0 0 4px hsl(var(--background));\n  outline: none;\n}\n\n.sigma-ui-sheet-close:disabled {\n  pointer-events: none;\n}\n\n.sigma-ui-sheet-close[data-state=\"open\"] {\n  background-color: hsl(var(--secondary));\n}\n\n.sigma-ui-sheet-close__icon {\n  width: 1rem;\n  height: 1rem;\n  color: hsl(var(--muted-foreground));\n}\n\n@keyframes overlay-show {\n  from {\n    opacity: 0;\n  }\n\n  to {\n    opacity: 1;\n  }\n}\n\n@keyframes overlay-hide {\n  from {\n    opacity: 1;\n  }\n\n  to {\n    opacity: 0;\n  }\n}\n\n@keyframes slide-in-from-top {\n  from {\n    transform: translateY(-100%);\n  }\n\n  to {\n    transform: translateY(0);\n  }\n}\n\n@keyframes slide-out-to-top {\n  from {\n    transform: translateY(0);\n  }\n\n  to {\n    transform: translateY(-100%);\n  }\n}\n\n@keyframes slide-in-from-bottom {\n  from {\n    transform: translateY(100%);\n  }\n\n  to {\n    transform: translateY(0);\n  }\n}\n\n@keyframes slide-out-to-bottom {\n  from {\n    transform: translateY(0);\n  }\n\n  to {\n    transform: translateY(100%);\n  }\n}\n\n@keyframes slide-in-from-left {\n  from {\n    transform: translateX(-100%);\n  }\n\n  to {\n    transform: translateX(0);\n  }\n}\n\n@keyframes slide-out-to-left {\n  from {\n    transform: translateX(0);\n  }\n\n  to {\n    transform: translateX(-100%);\n  }\n}\n\n@keyframes slide-in-from-right {\n  from {\n    transform: translateX(100%);\n  }\n\n  to {\n    transform: translateX(0);\n  }\n}\n\n@keyframes slide-out-to-right {\n  from {\n    transform: translateX(0);\n  }\n\n  to {\n    transform: translateX(100%);\n  }\n}\n</style>\n"
    },
    {
      "name": "SheetDescription.vue",
      "content": "<script setup lang=\"ts\">\nimport { DialogDescription, type DialogDescriptionProps } from 'reka-ui';\n\nconst props = defineProps<DialogDescriptionProps>();\n</script>\n\n<template>\n  <DialogDescription\n    class=\"sigma-ui-sheet-description\"\n    v-bind=\"props\"\n  >\n    <slot />\n  </DialogDescription>\n</template>\n\n<style>\n.sigma-ui-sheet-description {\n  color: hsl(var(--muted-foreground));\n  font-size: 0.875rem;\n}\n</style>\n"
    },
    {
      "name": "SheetFooter.vue",
      "content": "<script setup lang=\"ts\">\n\n</script>\n\n<template>\n  <div\n    class=\"sigma-ui-sheet-footer\"\n    :class=\"[$attrs.class]\"\n  >\n    <slot />\n  </div>\n</template>\n\n<style>\n.sigma-ui-sheet-footer {\n  display: flex;\n  flex-direction: column-reverse;\n}\n\n@media (width >= 640px) {\n  .sigma-ui-sheet-footer {\n    flex-direction: row;\n    justify-content: flex-end;\n    gap: 0.5rem;\n  }\n}\n</style>\n"
    },
    {
      "name": "SheetHeader.vue",
      "content": "<script setup lang=\"ts\">\n\n</script>\n\n<template>\n  <div\n    class=\"sigma-ui-sheet-header\"\n    :class=\"[$attrs.class]\"\n  >\n    <slot />\n  </div>\n</template>\n\n<style>\n.sigma-ui-sheet-header {\n  display: flex;\n  flex-direction: column;\n  gap: 0.5rem;\n  text-align: center;\n}\n\n@media (width >= 640px) {\n  .sigma-ui-sheet-header {\n    text-align: left;\n  }\n}\n</style>\n"
    },
    {
      "name": "SheetTitle.vue",
      "content": "<script setup lang=\"ts\">\nimport { DialogTitle, type DialogTitleProps } from 'reka-ui';\n\nconst props = defineProps<DialogTitleProps>();\n</script>\n\n<template>\n  <DialogTitle\n    class=\"sigma-ui-sheet-title\"\n    v-bind=\"props\"\n  >\n    <slot />\n  </DialogTitle>\n</template>\n\n<style>\n.sigma-ui-sheet-title {\n  color: hsl(var(--foreground));\n  font-size: 1.125rem;\n  font-weight: 600;\n}\n</style>\n"
    },
    {
      "name": "SheetTrigger.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": "import { type VariantProps, cva } from 'class-variance-authority';\n\nexport { default as Sheet } from './Sheet.vue';\nexport { default as SheetTrigger } from './SheetTrigger.vue';\nexport { default as SheetClose } from './SheetClose.vue';\nexport { default as SheetContent } from './SheetContent.vue';\nexport { default as SheetHeader } from './SheetHeader.vue';\nexport { default as SheetTitle } from './SheetTitle.vue';\nexport { default as SheetDescription } from './SheetDescription.vue';\nexport { default as SheetFooter } from './SheetFooter.vue';\n\nexport const sheetVariants = cva(\n  'sigma-ui-sheet-content__base',\n  {\n    variants: {\n      side: {\n        top: 'sigma-ui-sheet-content--top',\n        bottom: 'sigma-ui-sheet-content--bottom',\n        left: 'sigma-ui-sheet-content--left',\n        right: 'sigma-ui-sheet-content--right',\n      },\n    },\n    defaultVariants: {\n      side: 'right',\n    },\n  },\n);\n\nexport type SheetVariants = VariantProps<typeof sheetVariants>;\n"
    }
  ],
  "type": "components:ui"
}