Dialog

import { Dialog } from '@kivora/react';

import { Dialog, Button, useDisclosure } from '@kivora/react';

function Example() {
  const { isOpen, open, close } = useDisclosure();

  const handleConfirm = () => {
    // Perform action
    close();
  };

  return (
    <>
      <Button label="Delete Account" variant="destructive" onClick={open} />
      <Dialog
        isOpen={isOpen}
        onClose={close}
        title="Delete account?"
        description="This action cannot be undone. All your data will be permanently deleted."
        footer={
          <>
            <Button label="Cancel" variant="ghost" onClick={close} />
            <Button
              label="Delete"
              variant="destructive"
              onClick={handleConfirm}
            />
          </>
        }
      />
    </>
  );
}

<Dialog
  isOpen={isOpen}
  onClose={close}
  title="Confirm download"
  description="The file is 2.5GB and may take several minutes to download."
  footer={
    <>
      <Button label="Cancel" variant="ghost" onClick={close} />
      <Button label="Download" onClick={handleDownload} />
    </>
  }
>
  <div className="mt-4">
    <label className="flex items-center gap-2">
      <input type="checkbox" />
      <span className="text-sm">Don't ask me again</span>
    </label>
  </div>
</Dialog>

<Dialog
  isOpen={isOpen}
  onClose={close}
  title="Session expired"
  description="Please log in again to continue."
  closeOnBackdrop={true}
/>

function ConfirmDialog() {
  const { isOpen, open, close } = useDisclosure();
  const [loading, setLoading] = useState(false);

  const handleConfirm = async () => {
    setLoading(true);
    await performAction();
    setLoading(false);
    close();
  };

  return (
    <>
      <Button label="Save Changes" onClick={open} />
      <Dialog
        isOpen={isOpen}
        onClose={close}
        title="Save changes?"
        description="Your changes will be saved and visible to all users."
        footer={
          <>
            <Button
              label="Cancel"
              variant="ghost"
              onClick={close}
              disabled={loading}
            />
            <Button
              label="Save"
              onClick={handleConfirm}
              loading={loading}
            />
          </>
        }
      />
    </>
  );
}

<Dialog
  isOpen={isOpen}
  onClose={close}
  title="Delete 24 items?"
  description="This will permanently delete 24 files from your workspace. This action cannot be undone."
  footer={
    <>
      <Button label="Cancel" variant="ghost" onClick={close} />
      <Button
        label="Delete"
        variant="destructive"
        onClick={handleDelete}
      />
    </>
  }
/>

<Dialog
  isOpen={isOpen}
  onClose={close}
  size="sm"
  title="Small Dialog"
  description="Compact dialog for simple confirmations"
/>

<Dialog
  isOpen={isOpen}
  onClose={close}
  size="lg"
  title="Large Dialog"
  description="Wider dialog for more complex content"
/>

<Dialog
  isOpen={isOpen}
  onClose={close}
  title="Information"
  description="This is a non-critical message."
  closeOnBackdrop={true}
/>