Modal Styles

Basic Modal

Sizes

Confirm Modal

Form Modal

Usage

import { Modal, ConfirmModal } from '@/components/Modal';

// Basic Modal
const [isOpen, setIsOpen] = useState(false);

<Modal
  isOpen={isOpen}
  onClose={() => setIsOpen(false)}
  title="Modal Title"
  size="md"  // 'sm' | 'md' | 'lg' | 'xl' | 'full'
  footer={<button>Save</button>}
>
  Modal content here
</Modal>

// Confirm Modal
<ConfirmModal
  isOpen={isOpen}
  onClose={() => setIsOpen(false)}
  onConfirm={() => console.log('Confirmed')}
  title="Confirm"
  message="Are you sure?"
  type="danger"  // 'danger' | 'warning' | 'info'
/>