import { Dialog, DialogTrigger, DialogPortal, DialogBackdrop, DialogPopup, DialogHeader, DialogTitle, DialogDescription, DialogFooter, DialogClose } from '@mks2508/mks-ui/react';

<Dialog>
  <DialogTrigger>
    <Button>Open Dialog</Button>
  </DialogTrigger>
  <DialogPortal>
    <DialogBackdrop />
    <DialogPopup>
      <DialogHeader>
        <DialogTitle>Are you sure?</DialogTitle>
        <DialogDescription>
          This action cannot be undone.
        </DialogDescription>
      </DialogHeader>
      <DialogFooter>
        <DialogClose>
          <Button variant="outline">Cancel</Button>
        </DialogClose>
        <Button>Confirm</Button>
      </DialogFooter>
    </DialogPopup>
  </DialogPortal>
</Dialog>

<DialogPopup from="top">    {/* Flips in from top */}
<DialogPopup from="bottom"> {/* Flips in from bottom */}
<DialogPopup from="left">   {/* Flips in from left */}
<DialogPopup from="right">  {/* Flips in from right */}

const [open, setOpen] = useState(false);

<Dialog open={open} onOpenChange={setOpen}>
  <DialogPortal>
    <DialogBackdrop />
    <DialogPopup>
      <DialogHeader>
        <DialogTitle>Controlled Dialog</DialogTitle>
      </DialogHeader>
      <p>This dialog is controlled externally.</p>
    </DialogPopup>
  </DialogPortal>
</Dialog>

<Button onClick={() => setOpen(true)}>Open</Button>