{
  "name": "DrawerDialog",
  "type": "registry:example",
  "dependencies": [
    "@vueuse/core"
  ],
  "registryDependencies": [
    "button",
    "dialog",
    "drawer",
    "input",
    "label"
  ],
  "files": [
    {
      "path": "example/DrawerDialog.vue",
      "content": "<script lang=\"ts\" setup>\nimport { Button } from '@/registry/default/ui/button'\nimport {\n  Dialog,\n  DialogContent,\n  DialogDescription,\n  DialogHeader,\n  DialogTitle,\n  DialogTrigger,\n} from '@/registry/default/ui/dialog'\nimport {\n  Drawer,\n  DrawerClose,\n  DrawerContent,\n  DrawerDescription,\n  DrawerFooter,\n  DrawerHeader,\n  DrawerTitle,\n  DrawerTrigger,\n} from '@/registry/default/ui/drawer'\nimport { Input } from '@/registry/default/ui/input'\nimport { Label } from '@/registry/default/ui/label'\nimport { createReusableTemplate, useMediaQuery } from '@vueuse/core'\nimport { ref } from 'vue'\n\n// Reuse `form` section\nconst [UseTemplate, GridForm] = createReusableTemplate()\nconst isDesktop = useMediaQuery('(min-width: 768px)')\n\nconst isOpen = ref(false)\n</script>\n\n<template>\n  <UseTemplate>\n    <form class=\"grid items-start gap-4 px-4\">\n      <div class=\"grid gap-2\">\n        <Label html-for=\"email\">Email</Label>\n        <Input id=\"email\" type=\"email\" default-value=\"shadcn@example.com\" />\n      </div>\n      <div class=\"grid gap-2\">\n        <Label html-for=\"username\">Username</Label>\n        <Input id=\"username\" default-value=\"@shadcn\" />\n      </div>\n      <Button type=\"submit\">\n        Save changes\n      </Button>\n    </form>\n  </UseTemplate>\n\n  <Dialog v-if=\"isDesktop\" v-model:open=\"isOpen\">\n    <DialogTrigger as-child>\n      <Button variant=\"outline\">\n        Edit Profile\n      </Button>\n    </DialogTrigger>\n    <DialogContent class=\"sm:max-w-[425px]\">\n      <DialogHeader>\n        <DialogTitle>Edit profile</DialogTitle>\n        <DialogDescription>\n          Make changes to your profile here. Click save when you're done.\n        </DialogDescription>\n      </DialogHeader>\n      <GridForm />\n    </DialogContent>\n  </Dialog>\n\n  <Drawer v-else v-model:open=\"isOpen\">\n    <DrawerTrigger as-child>\n      <Button variant=\"outline\">\n        Edit Profile\n      </Button>\n    </DrawerTrigger>\n    <DrawerContent>\n      <DrawerHeader class=\"text-left\">\n        <DrawerTitle>Edit profile</DrawerTitle>\n        <DrawerDescription>\n          Make changes to your profile here. Click save when you're done.\n        </DrawerDescription>\n      </DrawerHeader>\n      <GridForm />\n      <DrawerFooter class=\"pt-2\">\n        <DrawerClose as-child>\n          <Button variant=\"outline\">\n            Cancel\n          </Button>\n        </DrawerClose>\n      </DrawerFooter>\n    </DrawerContent>\n  </Drawer>\n</template>\n",
      "type": "registry:example",
      "target": ""
    }
  ]
}