Dialog

<DialogRoot>
  <Button prefix={<PenSquareIcon />}>Create issue</Button>
  <Dialog
    title="Create a new issue"
    description="Report an issue or create a feature request."
  >
    <DialogBody>
      <TextField aria-label="Title" placeholder="Title" autoFocus />
      <TextArea aria-label="Description" placeholder="description" />
    </DialogBody>
    <DialogFooter>
      <Button slot="close">Cancel</Button>
      <Button slot="close">Save changes</Button>
    </DialogFooter>
  </Dialog>
</DialogRoot>

<DialogRoot>
  <Button>Create issue</Button>
  <Dialog type={type} mobileType={mobileType}>  {/* "modal", "popover", "drawer" */}
    {/* Dialog content */}
  </Dialog>
</DialogRoot>

<DialogRoot>
  <Button>Delete project</Button>
  <Dialog role="alertdialog">
    {/* Dialog content */}
  </Dialog>
</DialogRoot>

<DialogRoot>
  <Button>Create issue</Button>
  <Dialog isDismissable={isDismissable}>
    {/* Dialog content */}
  </Dialog>
</DialogRoot>

<DialogRoot>
  <Button>Create issue</Button>
  <Dialog title=".." description="..">
    <DialogBody>
      <DialogInset>
        Content within the inset.
      </DialogInset>
      <p className="mt-4">Content outside the inset.</p>
    </DialogBody>
    {/* Dialog footer */}
  </Dialog>
</DialogRoot>

const [isOpen, setOpen] = React.useState(false);
return (
  <DialogRoot isOpen={isOpen} onOpenChange={setOpen}>
    <Button>Open dialog</Button>
    <Dialog title="This is a heading" description="this is a description">
      content here
    </Dialog>
  </DialogRoot>
);

<DialogRoot>
  <Button>Create issue</Button>
  <Overlay>
    <DialogContent>
      <DialogHeader>
        <DialogHeading>Create a new issue</DialogHeading>
        <DialogDescription>
          Report an issue or create a feature request.
        </DialogDescription>
      </DialogHeader>
      <DialogBody>
        <TextField aria-label="Title" placeholder="Title" autoFocus />
        <TextArea aria-label="Description" placeholder="description" />
      </DialogBody>
      <DialogFooter>
        <Button>Cancel</Button>
        <Button>Save changes</Button>
      </DialogFooter>
    </DialogContent>
  </Overlay>
</DialogRoot>

"use client";

import React from "react";
import { Form } from "react-aria-components";
import { Button } from "@/components/dynamic-core/button";
import {
  DialogRoot,
  Dialog,
  DialogFooter,
  DialogBody,
} from "@/components/dynamic-core/dialog";
import { TextField } from "@/components/dynamic-core/text-field";

export default function DialogDemo() {
  const [isPending, setIsPending] = React.useState(false);

  const handleSubmit = async (e: React.FormEvent<HTMLFormElement>) => {
    e.preventDefault();
    setIsPending(true);
    await new Promise((resolve) => setTimeout(resolve, 1000));
    setIsPending(false);
  };

  return (
    <DialogRoot>
      <Button>Edit username</Button>
      <Dialog title="Edit username" description="Make changes to your profile.">
        {({ close }) => (
          <Form
            onSubmit={(e) => {
              handleSubmit(e);
              close();
            }}
          >
            <DialogBody>
              <TextField
                autoFocus
                label="Username"
                defaultValue="@mehdibha_"
                isRequired
                className="w-full"
              />
            </DialogBody>
            <DialogFooter>
              <Button variant="outline" slot="close">
                Cancel
              </Button>
              <Button type="submit" isPending={isPending} variant="primary">
                Save changes
              </Button>
            </DialogFooter>
          </Form>
        )}
      </Dialog>
    </DialogRoot>
  );
}

"use client";

import React from "react";
import { Button } from "@/components/dynamic-core/button";
import { DialogRoot, Dialog } from "@/components/dynamic-core/dialog";
import { Radio, RadioGroup } from "@/components/dynamic-core/radio-group";

type Type = "modal" | "drawer" | "popover";

export default function Demo() {
  const [type, setType] = React.useState<Type>("modal");
  return (
    <div className="flex w-full items-center gap-8">
      <DialogRoot>
        <Button variant="outline">Dialog</Button>
        <Dialog title="Dialog" type={type} mobileType={null}>
          <DialogRoot>
            <Button variant="outline">Nested dialog</Button>
            <Dialog
              title="Nested dialog"
              type={type}
              mobileType={null}
            ></Dialog>
          </DialogRoot>
        </Dialog>
      </DialogRoot>
      <RadioGroup
        label="Type"
        value={type}
        onChange={(value) => setType(value as Type)}
      >
        <Radio value="modal">Modal</Radio>
        <Radio value="drawer">Drawer</Radio>
        <Radio value="popover">Popover</Radio>
      </RadioGroup>
    </div>
  );
}