UI组件开发

帮我实现一个[组件名称]组件：

核心功能：[描述组件功能]
视觉细节：
- 风格：[现代/拟物/扁平化/玻璃态]
- 颜色：[主色/配色]
- 动画：[过渡/hover/点击效果]
- 响应式：[如何适配不同屏幕]

交互细节：
- 有哪些状态（default/hover/active/disabled/loading）
- 触发什么事件
- 键盘 accessibility

技术栈：[React/Vue/原生JS + Tailwind/CSS]

要求：
1. 可复用，props可配置
2. 支持主题定制
3. 包含使用示例
4. 无障碍支持

interface ModalProps {
  isOpen: boolean;
  onClose: () => void;
  title: string;
  children: React.ReactNode;
  size?: 'sm' | 'md' | 'lg';
}

export function Modal({ isOpen, onClose, title, children, size = 'md' }: ModalProps) {
  useEffect(() => {
    const handleEsc = (e: KeyboardEvent) => e.key === 'Escape' && onClose();
    if (isOpen) document.addEventListener('keydown', handleEsc);
    return () => document.removeEventListener('keydown', handleEsc);
  }, [isOpen, onClose]);

  if (!isOpen) return null;

  return (
    <div className="fixed inset-0 z-50 flex items-center justify-center">
      <div className="absolute inset-0 bg-black/50" onClick={onClose} />
      <div className={`relative bg-white rounded-lg shadow-xl p-6 ${sizeClasses[size]}`}>
        <h2 className="text-lg font-semibold mb-4">{title}</h2>
        {children}
      </div>
    </div>
  );
}