@justin_evo/evo-ui 1.2.0 → 1.2.1

package/src/Input/Input.tsx

@@ -1,74 +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>
-  );
-};
+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

@@ -1,77 +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;
+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;