{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "p-dialog-4",
  "description": "Dialog with close confirmation",
  "registryDependencies": [
    "@coss/alert-dialog",
    "@coss/button",
    "@coss/dialog",
    "@coss/field",
    "@coss/form",
    "@coss/textarea"
  ],
  "files": [
    {
      "path": "registry/default/particles/p-dialog-4.tsx",
      "content": "\"use client\";\n\nimport { useState } from \"react\";\nimport {\n  AlertDialog,\n  AlertDialogClose,\n  AlertDialogDescription,\n  AlertDialogFooter,\n  AlertDialogHeader,\n  AlertDialogPopup,\n  AlertDialogTitle,\n} from \"@/registry/default/ui/alert-dialog\";\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 { Field } from \"@/registry/default/ui/field\";\nimport { Form } from \"@/registry/default/ui/form\";\nimport { Textarea } from \"@/registry/default/ui/textarea\";\n\nexport default function Particle() {\n  const [dialogOpen, setDialogOpen] = useState(false);\n  const [confirmOpen, setConfirmOpen] = useState(false);\n  const [value, setValue] = useState(\"\");\n\n  return (\n    <Dialog\n      onOpenChange={(o) => {\n        if (!o && value) {\n          setConfirmOpen(true);\n        } else {\n          setDialogOpen(o);\n        }\n      }}\n      open={dialogOpen}\n    >\n      <DialogTrigger render={<Button variant=\"outline\" />}>\n        Compose\n      </DialogTrigger>\n      <DialogPopup showCloseButton={false}>\n        <DialogHeader>\n          <DialogTitle>New message</DialogTitle>\n          <DialogDescription>Type something and try closing.</DialogDescription>\n        </DialogHeader>\n        <Form\n          className=\"contents\"\n          onSubmit={(event) => {\n            event.preventDefault();\n            // Close the dialog when submitting\n            setDialogOpen(false);\n          }}\n        >\n          <DialogPanel>\n            <Field>\n              <Textarea\n                onChange={(e) => setValue(e.target.value)}\n                value={value}\n              />\n            </Field>\n          </DialogPanel>\n          <DialogFooter>\n            <DialogClose render={<Button variant=\"ghost\" />}>\n              Cancel\n            </DialogClose>\n            <Button\n              onClick={() => {\n                setValue(\"\");\n                setDialogOpen(false);\n              }}\n            >\n              Send\n            </Button>\n          </DialogFooter>\n        </Form>\n      </DialogPopup>\n\n      {/* Confirmation dialog */}\n      <AlertDialog onOpenChange={setConfirmOpen} open={confirmOpen}>\n        <AlertDialogPopup>\n          <AlertDialogHeader>\n            <AlertDialogTitle>Discard changes?</AlertDialogTitle>\n            <AlertDialogDescription>\n              Your message will be lost.\n            </AlertDialogDescription>\n          </AlertDialogHeader>\n          <AlertDialogFooter>\n            <AlertDialogClose render={<Button variant=\"ghost\" />}>\n              Go back\n            </AlertDialogClose>\n            <Button\n              onClick={() => {\n                setConfirmOpen(false);\n                setValue(\"\");\n                setDialogOpen(false);\n              }}\n            >\n              Discard\n            </Button>\n          </AlertDialogFooter>\n        </AlertDialogPopup>\n      </AlertDialog>\n    </Dialog>\n  );\n}\n",
      "type": "registry:block"
    }
  ],
  "categories": [
    "alert dialog",
    "dialog"
  ],
  "type": "registry:block"
}