@justin_evo/evo-ui 1.0.1

package/src/Input/Input.tsx

@@ -0,0 +1,74 @@
+import React from 'react';
+import styles from '../css/input.module.scss';
+
+interface EvoInputProps extends Omit<React.InputHTMLAttributes<HTMLInputElement>, 'size'> {
+  label?: string;
+  helperText?: string;
+  error?: string;
+  size?: 'sm' | 'md' | 'lg';
+  leadingAdornment?: React.ReactNode;
+  trailingAdornment?: React.ReactNode;
+  fullWidth?: boolean;
+}
+
+export const EvoInput = ({
+  label,
+  helperText,
+  error,
+  size = 'md',
+  leadingAdornment,
+  trailingAdornment,
+  fullWidth = false,
+  className = '',
+  id,
+  ...rest
+}: EvoInputProps) => {
+  const inputId = id ?? label?.toLowerCase().replace(/\s+/g, '-');
+
+  return (
+    <div className={[styles.field, fullWidth ? styles.fullWidth : '', className].filter(Boolean).join(' ')}>
+      {label && (
+        <label htmlFor={inputId} className={styles.label}>
+          {label}
+        </label>
+      )}
+
+      <div
+        className={[
+          styles.inputWrapper,
+          styles[size],
+          error ? styles.hasError : '',
+        ]
+          .filter(Boolean)
+          .join(' ')}
+      >
+        {leadingAdornment && <span className={styles.adornment}>{leadingAdornment}</span>}
+        <input
+          id={inputId}
+          className={styles.input}
+          aria-invalid={!!error}
+          aria-describedby={
+            error ? `${inputId}-error` : helperText ? `${inputId}-helper` : undefined
+          }
+          {...rest}
+        />
+        {trailingAdornment && (
+          <span className={`${styles.adornment} ${styles.trailingAdornment}`}>
+            {trailingAdornment}
+          </span>
+        )}
+      </div>
+
+      {error && (
+        <p id={`${inputId}-error`} className={styles.errorText}>
+          {error}
+        </p>
+      )}
+      {!error && helperText && (
+        <p id={`${inputId}-helper`} className={styles.helperText}>
+          {helperText}
+        </p>
+      )}
+    </div>
+  );
+};

package/src/Modal/Modal.tsx

@@ -0,0 +1,77 @@
+import React, { useEffect } from 'react';
+import ReactDOM from 'react-dom';
+import styles from '../css/modal.module.scss';
+
+type ModalSize = 'sm' | 'md' | 'lg' | 'fullscreen';
+
+interface EvoModalProps {
+  open: boolean;
+  onClose: () => void;
+  children: React.ReactNode;
+  size?: ModalSize;
+  className?: string;
+}
+
+interface EvoModalHeaderProps {
+  children: React.ReactNode;
+  onClose?: () => void;
+}
+
+interface EvoModalBodyProps { children: React.ReactNode; }
+interface EvoModalFooterProps { children: React.ReactNode; }
+
+const EvoModalHeader = ({ children, onClose }: EvoModalHeaderProps) => (
+  <div className={styles.header}>
+    <div className={styles.headerContent}>{children}</div>
+    {onClose && (
+      <button className={styles.closeBtn} onClick={onClose} aria-label="Close modal">
+        ✕
+      </button>
+    )}
+  </div>
+);
+
+const EvoModalBody = ({ children }: EvoModalBodyProps) => (
+  <div className={styles.body}>{children}</div>
+);
+
+const EvoModalFooter = ({ children }: EvoModalFooterProps) => (
+  <div className={styles.footer}>{children}</div>
+);
+
+export const EvoModal = ({ open, onClose, children, size = 'md', className = '' }: EvoModalProps) => {
+  useEffect(() => {
+    if (!open) return;
+    document.body.style.overflow = 'hidden';
+    return () => { document.body.style.overflow = ''; };
+  }, [open]);
+
+  useEffect(() => {
+    if (!open) return;
+    const handler = (e: KeyboardEvent) => { if (e.key === 'Escape') onClose(); };
+    document.addEventListener('keydown', handler);
+    return () => document.removeEventListener('keydown', handler);
+  }, [open, onClose]);
+
+  if (!open) return null;
+
+  return ReactDOM.createPortal(
+    <div
+      className={styles.overlay}
+      onClick={(e) => { if (e.target === e.currentTarget) onClose(); }}
+    >
+      <div
+        className={[styles.dialog, styles[size], className].filter(Boolean).join(' ')}
+        role="dialog"
+        aria-modal="true"
+      >
+        {children}
+      </div>
+    </div>,
+    document.body
+  );
+};
+
+EvoModal.Header = EvoModalHeader;
+EvoModal.Body = EvoModalBody;
+EvoModal.Footer = EvoModalFooter;