{
  "name": "drawer",
  "type": "registry:ui",
  "dependencies": [
    "vaul-vue",
    "reka-ui",
    "@vueuse/core"
  ],
  "registryDependencies": [],
  "files": [
    {
      "path": "ui/drawer/Drawer.vue",
      "content": "<script lang=\"ts\" setup>\nimport type { DrawerRootEmits, DrawerRootProps } from \"vaul-vue\"\nimport type { ComputedRef } from \"vue\"\nimport { useForwardPropsEmits } from \"reka-ui\"\nimport { DrawerRoot } from \"vaul-vue\"\n\nconst props = withDefaults(defineProps<DrawerRootProps>(), {\n  shouldScaleBackground: true,\n})\n\nconst emits = defineEmits<DrawerRootEmits>()\n\nconst forwarded = useForwardPropsEmits(props, emits) as ComputedRef<Record<string, unknown>>\n</script>\n\n<template>\n  <DrawerRoot v-bind=\"forwarded\">\n    <slot />\n  </DrawerRoot>\n</template>\n",
      "type": "registry:ui",
      "target": ""
    },
    {
      "path": "ui/drawer/DrawerContent.vue",
      "content": "<script lang=\"ts\" setup>\nimport type { DialogContentEmits, DialogContentProps } from \"reka-ui\"\nimport type { HTMLAttributes } from \"vue\"\nimport { reactiveOmit } from \"@vueuse/core\"\nimport { useForwardPropsEmits } from \"reka-ui\"\nimport { DrawerContent, DrawerPortal } from \"vaul-vue\"\nimport { cn } from \"@/lib/utils\"\nimport DrawerOverlay from \"./DrawerOverlay.vue\"\n\nconst props = defineProps<DialogContentProps & { class?: HTMLAttributes[\"class\"] }>()\nconst emits = defineEmits<DialogContentEmits>()\n\nconst delegatedProps = reactiveOmit(props, \"class\")\nconst forwardedProps = useForwardPropsEmits(delegatedProps, emits)\n</script>\n\n<template>\n  <DrawerPortal>\n    <DrawerOverlay />\n    <DrawerContent\n      v-bind=\"forwardedProps\" :class=\"cn(\n        'fixed inset-x-0 bottom-0 z-50 mt-24 flex h-auto flex-col rounded-t-[10px] border bg-background',\n        props.class,\n      )\"\n    >\n      <div class=\"mx-auto mt-4 h-2 w-[100px] rounded-full bg-muted\" />\n      <slot />\n    </DrawerContent>\n  </DrawerPortal>\n</template>\n",
      "type": "registry:ui",
      "target": ""
    },
    {
      "path": "ui/drawer/DrawerDescription.vue",
      "content": "<script lang=\"ts\" setup>\nimport type { DrawerDescriptionProps } from \"vaul-vue\"\nimport type { HTMLAttributes } from \"vue\"\nimport { reactiveOmit } from \"@vueuse/core\"\nimport { DrawerDescription } from \"vaul-vue\"\nimport { cn } from \"@/lib/utils\"\n\nconst props = defineProps<DrawerDescriptionProps & { class?: HTMLAttributes[\"class\"] }>()\n\nconst delegatedProps = reactiveOmit(props, \"class\")\n</script>\n\n<template>\n  <DrawerDescription v-bind=\"delegatedProps\" :class=\"cn('text-sm text-muted-foreground', props.class)\">\n    <slot />\n  </DrawerDescription>\n</template>\n",
      "type": "registry:ui",
      "target": ""
    },
    {
      "path": "ui/drawer/DrawerFooter.vue",
      "content": "<script lang=\"ts\" setup>\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 :class=\"cn('mt-auto flex flex-col gap-2 p-4', props.class)\">\n    <slot />\n  </div>\n</template>\n",
      "type": "registry:ui",
      "target": ""
    },
    {
      "path": "ui/drawer/DrawerHeader.vue",
      "content": "<script lang=\"ts\" setup>\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 :class=\"cn('grid gap-1.5 p-4 text-center sm:text-left', props.class)\">\n    <slot />\n  </div>\n</template>\n",
      "type": "registry:ui",
      "target": ""
    },
    {
      "path": "ui/drawer/DrawerOverlay.vue",
      "content": "<script lang=\"ts\" setup>\nimport type { DialogOverlayProps } from \"reka-ui\"\nimport type { HTMLAttributes } from \"vue\"\nimport { reactiveOmit } from \"@vueuse/core\"\nimport { DrawerOverlay } from \"vaul-vue\"\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  <DrawerOverlay v-bind=\"delegatedProps\" :class=\"cn('fixed inset-0 z-50 bg-black/80', props.class)\" />\n</template>\n",
      "type": "registry:ui",
      "target": ""
    },
    {
      "path": "ui/drawer/DrawerTitle.vue",
      "content": "<script lang=\"ts\" setup>\nimport type { DrawerTitleProps } from \"vaul-vue\"\nimport type { HTMLAttributes } from \"vue\"\nimport { reactiveOmit } from \"@vueuse/core\"\nimport { DrawerTitle } from \"vaul-vue\"\nimport { cn } from \"@/lib/utils\"\n\nconst props = defineProps<DrawerTitleProps & { class?: HTMLAttributes[\"class\"] }>()\n\nconst delegatedProps = reactiveOmit(props, \"class\")\n</script>\n\n<template>\n  <DrawerTitle v-bind=\"delegatedProps\" :class=\"cn('text-lg font-semibold leading-none tracking-tight', props.class)\">\n    <slot />\n  </DrawerTitle>\n</template>\n",
      "type": "registry:ui",
      "target": ""
    },
    {
      "path": "ui/drawer/index.ts",
      "content": "export { default as Drawer } from \"./Drawer.vue\"\nexport { default as DrawerContent } from \"./DrawerContent.vue\"\nexport { default as DrawerDescription } from \"./DrawerDescription.vue\"\nexport { default as DrawerFooter } from \"./DrawerFooter.vue\"\nexport { default as DrawerHeader } from \"./DrawerHeader.vue\"\nexport { default as DrawerOverlay } from \"./DrawerOverlay.vue\"\nexport { default as DrawerTitle } from \"./DrawerTitle.vue\"\nexport { DrawerClose, DrawerPortal, DrawerTrigger } from \"vaul-vue\"\n",
      "type": "registry:ui",
      "target": ""
    }
  ]
}