Modal

import { Modal, Button } from '@yourproject/components';
import { useState } from 'react';

function Example() {
  const [isOpen, setIsOpen] = useState(false);
  
  return (
    <>
      <Button onClick={() => setIsOpen(true)}>
        Open Modal
      </Button>
      
      <Modal 
        isOpen={isOpen} 
        onClose={() => setIsOpen(false)}
      >
        <h2>Modal Title</h2>
        <p>Modal content goes here.</p>
      </Modal>
    </>
  );
}

import { Modal, ModalHeader, ModalBody, ModalFooter, Button } from '@yourproject/components';

function Example() {
  const [isOpen, setIsOpen] = useState(false);
  
  return (
    <Modal isOpen={isOpen} onClose={() => setIsOpen(false)}>
      <ModalHeader>
        Confirm Action
      </ModalHeader>
      
      <ModalBody>
        Are you sure you want to proceed? This action cannot be undone.
      </ModalBody>
      
      <ModalFooter>
        <Button variant="secondary" onClick={() => setIsOpen(false)}>
          Cancel
        </Button>
        <Button variant="primary" onClick={handleConfirm}>
          Confirm
        </Button>
      </ModalFooter>
    </Modal>
  );
}

<Modal 
  isOpen={isOpen} 
  onClose={onClose}
  closeOnOutsideClick={false}
>
  This modal won't close when clicking the backdrop.
</Modal>

<Modal 
  isOpen={isOpen} 
  onClose={onClose}
  closeOnEscape={false}
>
  This modal won't close with the Escape key.
</Modal>

<Modal 
  isOpen={isOpen} 
  onClose={onClose}
  showCloseButton={false}
>
  This modal has no close button (must be closed programmatically).
</Modal>

interface ModalProps {
  isOpen: boolean;
  onClose: () => void;
  size?: 'sm' | 'md' | 'lg' | 'full';
  closeOnOutsideClick?: boolean;
  closeOnEscape?: boolean;
  showCloseButton?: boolean;
  children: React.ReactNode;
  className?: string;
  overlayClassName?: string;
}

interface ModalHeaderProps {
  children: React.ReactNode;
  className?: string;
}

interface ModalBodyProps {
  children: React.ReactNode;
  className?: string;
}

interface ModalFooterProps {
  children: React.ReactNode;
  align?: 'left' | 'center' | 'right';
  className?: string;
}

import { Modal, ModalHeader, ModalBody, ModalFooter, Button } from '@yourproject/components';
import { useState } from 'react';

function DeleteConfirmation() {
  const [isOpen, setIsOpen] = useState(false);
  
  const handleDelete = async () => {
    await deleteItem();
    setIsOpen(false);
  };
  
  return (
    <>
      <Button variant="danger" onClick={() => setIsOpen(true)}>
        Delete Item
      </Button>
      
      <Modal 
        isOpen={isOpen} 
        onClose={() => setIsOpen(false)}
        size="sm"
      >
        <ModalHeader>
          Confirm Deletion
        </ModalHeader>
        
        <ModalBody>
          Are you sure you want to delete this item? This action cannot be undone.
        </ModalBody>
        
        <ModalFooter>
          <Button variant="secondary" onClick={() => setIsOpen(false)}>
            Cancel
          </Button>
          <Button variant="danger" onClick={handleDelete}>
            Delete
          </Button>
        </ModalFooter>
      </Modal>
    </>
  );
}

import { Modal, ModalHeader, ModalBody, ModalFooter, Input, Button } from '@yourproject/components';
import { useState } from 'react';

function CreateUserModal() {
  const [isOpen, setIsOpen] = useState(false);
  const [formData, setFormData] = useState({ name: '', email: '' });
  
  const handleSubmit = async (e: React.FormEvent) => {
    e.preventDefault();
    await createUser(formData);
    setIsOpen(false);
  };
  
  return (
    <>
      <Button onClick={() => setIsOpen(true)}>
        Create User
      </Button>
      
      <Modal isOpen={isOpen} onClose={() => setIsOpen(false)}>
        <form onSubmit={handleSubmit}>
          <ModalHeader>
            Create New User
          </ModalHeader>
          
          <ModalBody>
            <Input 
              label="Name"
              value={formData.name}
              onChange={(e) => setFormData({ ...formData, name: e.target.value })}
              required
            />
            <Input 
              label="Email"
              type="email"
              value={formData.email}
              onChange={(e) => setFormData({ ...formData, email: e.target.value })}
              required
            />
          </ModalBody>
          
          <ModalFooter>
            <Button variant="secondary" onClick={() => setIsOpen(false)}>
              Cancel
            </Button>
            <Button variant="primary" type="submit">
              Create
            </Button>
          </ModalFooter>
        </form>
      </Modal>
    </>
  );
}