{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "p-drawer-12",
  "description": "Responsive edit profile: dialog on desktop, drawer on mobile",
  "registryDependencies": [
    "@coss/button",
    "@coss/dialog",
    "@coss/drawer",
    "@coss/field",
    "@coss/form",
    "@coss/input",
    "@coss/use-media-query"
  ],
  "files": [
    {
      "path": "registry/default/particles/p-drawer-12.tsx",
      "content": "\"use client\";\n\nimport { useMediaQuery } from \"@/registry/default/hooks/use-media-query\";\nimport { Button } from \"@/registry/default/ui/button\";\nimport {\n  Dialog,\n  DialogClose,\n  DialogDescription,\n  DialogFooter,\n  DialogHeader,\n  DialogPanel,\n  DialogPopup,\n  DialogTitle,\n  DialogTrigger,\n} from \"@/registry/default/ui/dialog\";\nimport {\n  Drawer,\n  DrawerClose,\n  DrawerDescription,\n  DrawerFooter,\n  DrawerHeader,\n  DrawerPanel,\n  DrawerPopup,\n  DrawerTitle,\n  DrawerTrigger,\n} from \"@/registry/default/ui/drawer\";\nimport { Field, FieldLabel } from \"@/registry/default/ui/field\";\nimport { Form } from \"@/registry/default/ui/form\";\nimport { Input } from \"@/registry/default/ui/input\";\n\nconst FORM_TITLE = \"Edit profile\";\nconst FORM_DESCRIPTION =\n  \"Make changes to your profile here. Click save when you're done.\";\nconst TRIGGER_LABEL = \"Open\";\nconst CANCEL_LABEL = \"Cancel\";\nconst SAVE_LABEL = \"Save\";\n\nconst formFields = (\n  <>\n    <Field>\n      <FieldLabel>Name</FieldLabel>\n      <Input defaultValue=\"Margaret Welsh\" type=\"text\" />\n    </Field>\n    <Field>\n      <FieldLabel>Username</FieldLabel>\n      <Input defaultValue=\"@maggie.welsh\" type=\"text\" />\n    </Field>\n  </>\n);\n\nexport default function Particle() {\n  const isMobile = useMediaQuery(\"max-md\");\n\n  if (isMobile) {\n    return (\n      <Drawer>\n        <DrawerTrigger render={<Button variant=\"outline\" />}>\n          {TRIGGER_LABEL}\n        </DrawerTrigger>\n        <DrawerPopup showBar>\n          <Form className=\"contents\">\n            <DrawerHeader>\n              <DrawerTitle>{FORM_TITLE}</DrawerTitle>\n              <DrawerDescription>{FORM_DESCRIPTION}</DrawerDescription>\n            </DrawerHeader>\n            <DrawerPanel className=\"grid gap-4\" scrollable={false}>\n              {formFields}\n            </DrawerPanel>\n            <DrawerFooter>\n              <DrawerClose render={<Button variant=\"ghost\" />}>\n                {CANCEL_LABEL}\n              </DrawerClose>\n              <Button type=\"submit\">{SAVE_LABEL}</Button>\n            </DrawerFooter>\n          </Form>\n        </DrawerPopup>\n      </Drawer>\n    );\n  }\n\n  return (\n    <Dialog>\n      <DialogTrigger render={<Button variant=\"outline\" />}>\n        {TRIGGER_LABEL}\n      </DialogTrigger>\n      <DialogPopup className=\"sm:max-w-sm\">\n        <Form className=\"contents\">\n          <DialogHeader>\n            <DialogTitle>{FORM_TITLE}</DialogTitle>\n            <DialogDescription>{FORM_DESCRIPTION}</DialogDescription>\n          </DialogHeader>\n          <DialogPanel className=\"grid gap-4\">{formFields}</DialogPanel>\n          <DialogFooter>\n            <DialogClose render={<Button variant=\"ghost\" />}>\n              {CANCEL_LABEL}\n            </DialogClose>\n            <Button type=\"submit\">{SAVE_LABEL}</Button>\n          </DialogFooter>\n        </Form>\n      </DialogPopup>\n    </Dialog>\n  );\n}\n",
      "type": "registry:block"
    }
  ],
  "categories": [
    "drawer",
    "dialog"
  ],
  "type": "registry:block"
}