cosscom__coss/apps/ui/public/r/dialog-nested.json

{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "dialog-nested",
  "type": "registry:example",
  "description": "Dialog with a nested dialog",
  "registryDependencies": [
    "@coss/dialog",
    "@coss/button",
    "@coss/field",
    "@coss/input"
  ],
  "files": [
    {
      "path": "registry/default/examples/dialog-nested.tsx",
      "content": "import { Button } from \"@/registry/default/ui/button\"\nimport {\n  Dialog,\n  DialogClose,\n  DialogDescription,\n  DialogFooter,\n  DialogHeader,\n  DialogPopup,\n  DialogTitle,\n  DialogTrigger,\n} from \"@/registry/default/ui/dialog\"\nimport { Field, FieldLabel } from \"@/registry/default/ui/field\"\nimport { Input } from \"@/registry/default/ui/input\"\n\nexport default function DialogNestedDemo() {\n  return (\n    <Dialog>\n      <DialogTrigger render={<Button variant=\"outline\" />}>\n        Open parent\n      </DialogTrigger>\n      <DialogPopup showCloseButton={false}>\n        <DialogHeader>\n          <DialogTitle>Manage team member</DialogTitle>\n          <DialogDescription>\n            View and manage a user in your team.\n          </DialogDescription>\n        </DialogHeader>\n        <div className=\"grid gap-4\">\n          <div className=\"grid gap-1\">\n            <p className=\"text-sm text-muted-foreground\">Name</p>\n            <p className=\"text-sm font-medium\">Bora Baloglu</p>\n          </div>\n          <div className=\"grid gap-1\">\n            <p className=\"text-sm text-muted-foreground\">Email</p>\n            <p className=\"text-sm font-medium\">bora@example.com</p>\n          </div>\n        </div>\n        <DialogFooter>\n          <Dialog>\n            <DialogTrigger render={<Button variant=\"outline\" />}>\n              Edit details\n            </DialogTrigger>\n            <DialogPopup showCloseButton={false}>\n              <DialogHeader>\n                <DialogTitle>Edit details</DialogTitle>\n                <DialogDescription>\n                  Make changes to the member&apos;s information.\n                </DialogDescription>\n              </DialogHeader>\n              <div className=\"flex flex-col gap-4\">\n                <Field>\n                  <FieldLabel>Name</FieldLabel>\n                  <Input type=\"text\" defaultValue=\"Bora Baloglu\" />\n                </Field>\n                <Field>\n                  <FieldLabel>Email</FieldLabel>\n                  <Input type=\"text\" defaultValue=\"bora@example.com\" />\n                </Field>\n              </div>\n              <DialogFooter>\n                <DialogClose render={<Button variant=\"ghost\" />}>\n                  Cancel\n                </DialogClose>\n                <Button type=\"submit\">Save changes</Button>\n              </DialogFooter>\n            </DialogPopup>\n          </Dialog>\n        </DialogFooter>\n      </DialogPopup>\n    </Dialog>\n  )\n}\n",
      "type": "registry:example"
    }
  ],
  "categories": ["dialog", "field", "button"]
}