Modal

<!-- Trigger Button -->
<button class="lyd-button primary" onclick="openModal('myModal')">
    Open Modal
</button>

<!-- Modal Structure -->
<div class="lyd-modal-backdrop" id="myModal-backdrop">
    <div class="lyd-modal" id="myModal">
        <div class="lyd-modal-header">
            <h3 class="lyd-modal-title">Modal Title</h3>
            <button class="lyd-modal-close" onclick="closeModal('myModal')">
                <svg>...</svg>
            </button>
        </div>
        <div class="lyd-modal-body">
            <!-- Modal content -->
        </div>
        <div class="lyd-modal-footer">
            <button class="lyd-button secondary">Cancel</button>
            <button class="lyd-button primary">Confirm</button>
        </div>
    </div>
</div>

// Open modal
function openModal(modalId) {
    const backdrop = document.getElementById(modalId + '-backdrop');
    const modal = document.getElementById(modalId);
    
    if (backdrop && modal) {
        backdrop.classList.add('active');
        modal.classList.add('active');
        document.body.style.overflow = 'hidden';
    }
}

// Close modal
function closeModal(modalId) {
    const backdrop = document.getElementById(modalId + '-backdrop');
    const modal = document.getElementById(modalId);
    
    if (backdrop && modal) {
        backdrop.classList.remove('active');
        modal.classList.remove('active');
        document.body.style.overflow = '';
    }
}

// Close on backdrop click
document.querySelectorAll('.lyd-modal-backdrop').forEach(backdrop => {
    backdrop.addEventListener('click', (e) => {
        if (e.target === backdrop) {
            const modalId = backdrop.id.replace('-backdrop', '');
            closeModal(modalId);
        }
    });
});

// components/Modal.tsx
import { ReactNode, useEffect } from 'react';

interface ModalProps {
  isOpen: boolean;
  onClose: () => void;
  title: string;
  children: ReactNode;
  size?: 'small' | 'medium' | 'large';
}

export const Modal = ({ 
  isOpen, 
  onClose, 
  title, 
  children,
  size = 'medium' 
}: ModalProps) => {
  useEffect(() => {
    if (isOpen) {
      document.body.style.overflow = 'hidden';
    } else {
      document.body.style.overflow = '';
    }
    return () => {
      document.body.style.overflow = '';
    };
  }, [isOpen]);
  
  if (!isOpen) return null;
  
  return (
    <div 
      className={`lyd-modal-backdrop ${isOpen ? 'active' : ''}`}
      onClick={onClose}
    >
      <div 
        className={`lyd-modal ${size} ${isOpen ? 'active' : ''}`}
        onClick={(e) => e.stopPropagation()}
      >
        <div className="lyd-modal-header">
          <h3 className="lyd-modal-title">{title}</h3>
          <button className="lyd-modal-close" onClick={onClose}>
            <svg>...</svg>
          </button>
        </div>
        <div className="lyd-modal-body">
          {children}
        </div>
      </div>
    </div>
  );
};