Modal

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

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

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

  return (
    <>
      <Button label="Open Modal" onClick={open} />
      <Modal isOpen={isOpen} onClose={close} title="Confirm Action">
        <p>Are you sure you want to continue?</p>
        <div className="flex gap-2 mt-4">
          <Button label="Cancel" variant="ghost" onClick={close} />
          <Button label="Confirm" onClick={close} />
        </div>
      </Modal>
    </>
  );
}

<Modal isOpen={isOpen} onClose={close} size="sm" title="Small">
  <p>Compact modal content</p>
</Modal>

<Modal isOpen={isOpen} onClose={close} size="lg" title="Large">
  <p>Wider modal with more content</p>
</Modal>

<Modal isOpen={isOpen} onClose={close} size="full" title="Full Width">
  <p>Uses full viewport width with margin</p>
</Modal>

<Modal isOpen={isOpen} onClose={close} noPadding>
  <img src="/banner.jpg" alt="Banner" className="w-full" />
  <div className="p-6">
    <p>Custom padded content</p>
  </div>
</Modal>

<Modal isOpen={isOpen} onClose={close}>
  <div className="text-center p-4">
    <h3 className="text-xl font-bold mb-2">Custom Header</h3>
    <p>Full control over the content</p>
  </div>
</Modal>

<Modal
  isOpen={isOpen}
  onClose={close}
  title="Required Action"
  closeOnBackdrop={false}
>
  <p>You must complete this action</p>
  <Button label="Complete" onClick={close} />
</Modal>

<Modal
  isOpen={isOpen}
  onClose={close}
  title="Critical Dialog"
  closeOnEscape={false}
>
  <p>This dialog requires explicit confirmation</p>
</Modal>