{
  "$schema": "https://shadcn-vue.com/schema/registry-item.json",
  "name": "sheet",
  "title": "Sheet",
  "type": "registry:ui",
  "files": [
    {
      "path": "packages/registry-vue/components/sheet/Sheet.vue",
      "content": "<script setup lang=\"ts\">\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</script>\n\n<template>\n  <DialogRoot v-slot=\"slotProps\" data-uipkge data-slot=\"sheet\" v-bind=\"forwarded\">\n    <slot v-bind=\"slotProps\" />\n  </DialogRoot>\n</template>\n",
      "type": "registry:ui",
      "target": "~/app/components/ui/sheet/Sheet.vue"
    },
    {
      "path": "packages/registry-vue/components/sheet/SheetClose.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=\"sheet-close\" v-bind=\"props\">\n    <slot />\n  </DialogClose>\n</template>\n",
      "type": "registry:ui",
      "target": "~/app/components/ui/sheet/SheetClose.vue"
    },
    {
      "path": "packages/registry-vue/components/sheet/SheetContent.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 SheetOverlay from './SheetOverlay.vue'\n\n// SFC compiler quirk: when the extension type is a *named* interface\n// in an intersection (`DialogContentProps & ExtraProps`), the runtime\n// extractor occasionally drops fields from the named interface --\n// `side` then warns \"accessed during render but not defined on\n// instance\" every time the FilterSheet mounts. Inlining the literal\n// keeps the extractor happy. DialogContentProps stays in the\n// intersection so reka-ui's typed props (asChild, trapFocus, etc.)\n// flow through useForwardPropsEmits below.\ndefineOptions({\n  inheritAttrs: false,\n})\n\nconst props = withDefaults(\n  defineProps<\n    DialogContentProps & {\n      class?: HTMLAttributes['class']\n      side?: 'top' | 'right' | 'bottom' | 'left'\n    }\n  >(),\n  { side: 'right' },\n)\nconst emits = defineEmits<DialogContentEmits>()\n\nconst delegatedProps = reactiveOmit(props, 'class', 'side')\n\nconst forwarded = useForwardPropsEmits(delegatedProps, emits)\n</script>\n\n<template>\n  <DialogPortal>\n    <SheetOverlay />\n    <DialogContent\n      data-uipkge\n      data-slot=\"sheet-content\"\n      :class=\"\n        cn(\n          'bg-background motion-safe:data-[state=open]:animate-in motion-safe:data-[state=closed]:animate-out fixed z-50 flex flex-col gap-4 shadow-lg transition ease-in-out motion-safe:data-[state=closed]:duration-200 motion-safe:data-[state=open]:duration-300',\n          side === 'right' &&\n            'motion-safe:data-[state=closed]:slide-out-to-right motion-safe:data-[state=open]:slide-in-from-right inset-y-0 right-0 h-full w-3/4 border-l sm:max-w-sm',\n          side === 'left' &&\n            'motion-safe:data-[state=closed]:slide-out-to-left motion-safe:data-[state=open]:slide-in-from-left inset-y-0 left-0 h-full w-3/4 border-r sm:max-w-sm',\n          side === 'top' &&\n            'motion-safe:data-[state=closed]:slide-out-to-top motion-safe:data-[state=open]:slide-in-from-top inset-x-0 top-0 h-auto border-b',\n          side === 'bottom' &&\n            'motion-safe:data-[state=closed]:slide-out-to-bottom motion-safe:data-[state=open]:slide-in-from-bottom inset-x-0 bottom-0 h-auto border-t',\n          props.class,\n        )\n      \"\n      v-bind=\"{ ...$attrs, ...forwarded }\"\n    >\n      <slot />\n\n      <DialogClose\n        class=\"ring-offset-background focus:ring-ring data-[state=open]:bg-secondary 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\"\n      >\n        <X class=\"size-4\" aria-hidden=\"true\" />\n        <span class=\"sr-only\">Close</span>\n      </DialogClose>\n    </DialogContent>\n  </DialogPortal>\n</template>\n",
      "type": "registry:ui",
      "target": "~/app/components/ui/sheet/SheetContent.vue"
    },
    {
      "path": "packages/registry-vue/components/sheet/SheetDescription.vue",
      "content": "<script setup lang=\"ts\">\nimport type { DialogDescriptionProps } from 'reka-ui'\nimport type { HTMLAttributes } from 'vue'\nimport { reactiveOmit } from '@vueuse/core'\nimport { DialogDescription } from 'reka-ui'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<DialogDescriptionProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = reactiveOmit(props, 'class')\n</script>\n\n<template>\n  <DialogDescription\n    data-uipkge\n    data-slot=\"sheet-description\"\n    :class=\"cn('text-muted-foreground text-sm', props.class)\"\n    v-bind=\"delegatedProps\"\n  >\n    <slot />\n  </DialogDescription>\n</template>\n",
      "type": "registry:ui",
      "target": "~/app/components/ui/sheet/SheetDescription.vue"
    },
    {
      "path": "packages/registry-vue/components/sheet/SheetFooter.vue",
      "content": "<script setup lang=\"ts\">\nimport type { HTMLAttributes } from 'vue'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<{ class?: HTMLAttributes['class'] }>()\n</script>\n\n<template>\n  <div data-uipkge data-slot=\"sheet-footer\" :class=\"cn('mt-auto flex flex-col gap-2 p-4', props.class)\">\n    <slot />\n  </div>\n</template>\n",
      "type": "registry:ui",
      "target": "~/app/components/ui/sheet/SheetFooter.vue"
    },
    {
      "path": "packages/registry-vue/components/sheet/SheetHeader.vue",
      "content": "<script setup lang=\"ts\">\nimport type { HTMLAttributes } from 'vue'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<{ class?: HTMLAttributes['class'] }>()\n</script>\n\n<template>\n  <div data-uipkge data-slot=\"sheet-header\" :class=\"cn('flex flex-col gap-1.5 p-4', props.class)\">\n    <slot />\n  </div>\n</template>\n",
      "type": "registry:ui",
      "target": "~/app/components/ui/sheet/SheetHeader.vue"
    },
    {
      "path": "packages/registry-vue/components/sheet/SheetOverlay.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=\"sheet-overlay\"\n    :class=\"\n      cn(\n        'motion-safe:data-[state=open]:animate-in motion-safe:data-[state=closed]:animate-out motion-safe:data-[state=closed]:fade-out-0 motion-safe:data-[state=open]:fade-in-0 bg-foreground/50 fixed inset-0 z-50',\n        props.class,\n      )\n    \"\n    v-bind=\"delegatedProps\"\n  >\n    <slot />\n  </DialogOverlay>\n</template>\n",
      "type": "registry:ui",
      "target": "~/app/components/ui/sheet/SheetOverlay.vue"
    },
    {
      "path": "packages/registry-vue/components/sheet/SheetTitle.vue",
      "content": "<script setup lang=\"ts\">\nimport type { DialogTitleProps } from 'reka-ui'\nimport type { HTMLAttributes } from 'vue'\nimport { reactiveOmit } from '@vueuse/core'\nimport { DialogTitle } from 'reka-ui'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<DialogTitleProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = reactiveOmit(props, 'class')\n</script>\n\n<template>\n  <DialogTitle\n    data-uipkge\n    data-slot=\"sheet-title\"\n    :class=\"cn('text-foreground font-semibold', props.class)\"\n    v-bind=\"delegatedProps\"\n  >\n    <slot />\n  </DialogTitle>\n</template>\n",
      "type": "registry:ui",
      "target": "~/app/components/ui/sheet/SheetTitle.vue"
    },
    {
      "path": "packages/registry-vue/components/sheet/SheetTrigger.vue",
      "content": "<script setup lang=\"ts\">\nimport type { DialogTriggerProps } from 'reka-ui'\nimport { DialogTrigger } from 'reka-ui'\n\nconst props = defineProps<DialogTriggerProps>()\n</script>\n\n<template>\n  <DialogTrigger data-uipkge data-slot=\"sheet-trigger\" v-bind=\"props\">\n    <slot />\n  </DialogTrigger>\n</template>\n",
      "type": "registry:ui",
      "target": "~/app/components/ui/sheet/SheetTrigger.vue"
    },
    {
      "path": "packages/registry-vue/components/sheet/index.ts",
      "content": "export { default as Sheet } from './Sheet.vue'\nexport { default as SheetClose } from './SheetClose.vue'\nexport { default as SheetContent } from './SheetContent.vue'\nexport { default as SheetDescription } from './SheetDescription.vue'\nexport { default as SheetFooter } from './SheetFooter.vue'\nexport { default as SheetHeader } from './SheetHeader.vue'\nexport { default as SheetTitle } from './SheetTitle.vue'\nexport { default as SheetTrigger } from './SheetTrigger.vue'\n",
      "type": "registry:ui",
      "target": "~/app/components/ui/sheet/index.ts"
    }
  ],
  "dependencies": [
    "@vueuse/core",
    "lucide-vue-next",
    "reka-ui"
  ],
  "devDependencies": [],
  "registryDependencies": [],
  "description": "Side-mounted modal that slides in from the top, right, bottom, or left edge. Use for filter panels, edit drawers, and mobile menus.",
  "categories": [
    "overlay"
  ]
}