@justin_evo/evo-ui 1.2.0 → 1.2.1

package/src/Pagination/Pagination.tsx

@@ -1,76 +1,76 @@
-import styles from '../css/pagination.module.scss';
-
-interface EvoPaginationProps {
-  total: number;
-  page: number;
-  pageSize?: number;
-  siblingCount?: number;
-  onChange: (page: number) => void;
-  className?: string;
-}
-
-const range = (start: number, end: number) =>
-  Array.from({ length: end - start + 1 }, (_, i) => start + i);
-
-export const EvoPagination = ({
-  total,
-  page,
-  pageSize = 10,
-  siblingCount = 1,
-  onChange,
-  className = '',
-}: EvoPaginationProps) => {
-  const totalPages = Math.max(1, Math.ceil(total / pageSize));
-
-  const getPages = (): (number | '...')[] => {
-    if (totalPages <= 7) return range(1, totalPages);
-    const left = Math.max(2, page - siblingCount);
-    const right = Math.min(totalPages - 1, page + siblingCount);
-    const pages: (number | '...')[] = [1];
-    if (left > 2) pages.push('...');
-    pages.push(...range(left, right));
-    if (right < totalPages - 1) pages.push('...');
-    if (totalPages > 1) pages.push(totalPages);
-    return pages;
-  };
-
-  return (
-    <nav className={`${styles.pagination} ${className}`} aria-label="Pagination">
-      <button
-        className={`${styles.pageBtn} ${styles.navBtn}`}
-        disabled={page <= 1}
-        onClick={() => onChange(page - 1)}
-        aria-label="Previous page"
-      >
-        ‹
-      </button>
-
-      {getPages().map((p, i) =>
-        p === '...' ? (
-          <span key={`ellipsis-${i}`} className={styles.ellipsis}>
-            …
-          </span>
-        ) : (
-          <button
-            key={p}
-            className={[styles.pageBtn, p === page ? styles.activePage : ''].filter(Boolean).join(' ')}
-            onClick={() => onChange(p)}
-            aria-label={`Page ${p}`}
-            aria-current={p === page ? 'page' : undefined}
-          >
-            {p}
-          </button>
-        )
-      )}
-
-      <button
-        className={`${styles.pageBtn} ${styles.navBtn}`}
-        disabled={page >= totalPages}
-        onClick={() => onChange(page + 1)}
-        aria-label="Next page"
-      >
-        ›
-      </button>
-    </nav>
-  );
-};
+import styles from '../css/pagination.module.scss';
+
+interface EvoPaginationProps {
+  total: number;
+  page: number;
+  pageSize?: number;
+  siblingCount?: number;
+  onChange: (page: number) => void;
+  className?: string;
+}
+
+const range = (start: number, end: number) =>
+  Array.from({ length: end - start + 1 }, (_, i) => start + i);
+
+export const EvoPagination = ({
+  total,
+  page,
+  pageSize = 10,
+  siblingCount = 1,
+  onChange,
+  className = '',
+}: EvoPaginationProps) => {
+  const totalPages = Math.max(1, Math.ceil(total / pageSize));
+
+  const getPages = (): (number | '...')[] => {
+    if (totalPages <= 7) return range(1, totalPages);
+    const left = Math.max(2, page - siblingCount);
+    const right = Math.min(totalPages - 1, page + siblingCount);
+    const pages: (number | '...')[] = [1];
+    if (left > 2) pages.push('...');
+    pages.push(...range(left, right));
+    if (right < totalPages - 1) pages.push('...');
+    if (totalPages > 1) pages.push(totalPages);
+    return pages;
+  };
+
+  return (
+    <nav className={`${styles.pagination} ${className}`} aria-label="Pagination">
+      <button
+        className={`${styles.pageBtn} ${styles.navBtn}`}
+        disabled={page <= 1}
+        onClick={() => onChange(page - 1)}
+        aria-label="Previous page"
+      >
+        ‹
+      </button>
+
+      {getPages().map((p, i) =>
+        p === '...' ? (
+          <span key={`ellipsis-${i}`} className={styles.ellipsis}>
+            …
+          </span>
+        ) : (
+          <button
+            key={p}
+            className={[styles.pageBtn, p === page ? styles.activePage : ''].filter(Boolean).join(' ')}
+            onClick={() => onChange(p)}
+            aria-label={`Page ${p}`}
+            aria-current={p === page ? 'page' : undefined}
+          >
+            {p}
+          </button>
+        )
+      )}
+
+      <button
+        className={`${styles.pageBtn} ${styles.navBtn}`}
+        disabled={page >= totalPages}
+        onClick={() => onChange(page + 1)}
+        aria-label="Next page"
+      >
+        ›
+      </button>
+    </nav>
+  );
+};

package/src/Radio/Radio.tsx

@@ -1,69 +1,69 @@
-import React, { createContext, useContext } from 'react';
-import styles from '../css/radio.module.scss';
-
-interface RadioGroupContextType {
-  name: string;
-  value: string;
-  onChange: (value: string) => void;
-}
-
-const RadioGroupContext = createContext<RadioGroupContextType | null>(null);
-
-interface EvoRadioGroupProps {
-  children: React.ReactNode;
-  name: string;
-  value: string;
-  onChange: (value: string) => void;
-  label?: string;
-  className?: string;
-}
-
-interface EvoRadioProps {
-  value: string;
-  label: string;
-  disabled?: boolean;
-  className?: string;
-}
-
-const EvoRadioGroup = ({
-  children,
-  name,
-  value,
-  onChange,
-  label,
-  className = '',
-}: EvoRadioGroupProps) => (
-  <RadioGroupContext.Provider value={{ name, value, onChange }}>
-    <fieldset className={`${styles.group} ${className}`}>
-      {label && <legend className={styles.groupLabel}>{label}</legend>}
-      {children}
-    </fieldset>
-  </RadioGroupContext.Provider>
-);
-
-export const EvoRadio = ({ value, label, disabled = false, className = '' }: EvoRadioProps) => {
-  const ctx = useContext(RadioGroupContext);
-  const isChecked = ctx ? ctx.value === value : false;
-  const inputId = `${ctx?.name ?? 'radio'}-${value}`;
-
-  return (
-    <div className={[styles.radio, disabled ? styles.disabled : '', className].filter(Boolean).join(' ')}>
-      <input
-        type="radio"
-        id={inputId}
-        name={ctx?.name}
-        value={value}
-        checked={isChecked}
-        disabled={disabled}
-        className={styles.input}
-        onChange={() => ctx?.onChange(value)}
-      />
-      <label htmlFor={inputId} className={styles.label}>
-        <span className={styles.radiomark} />
-        <span className={styles.labelText}>{label}</span>
-      </label>
-    </div>
-  );
-};
-
-EvoRadio.Group = EvoRadioGroup;
+import React, { createContext, useContext } from 'react';
+import styles from '../css/radio.module.scss';
+
+interface RadioGroupContextType {
+  name: string;
+  value: string;
+  onChange: (value: string) => void;
+}
+
+const RadioGroupContext = createContext<RadioGroupContextType | null>(null);
+
+interface EvoRadioGroupProps {
+  children: React.ReactNode;
+  name: string;
+  value: string;
+  onChange: (value: string) => void;
+  label?: string;
+  className?: string;
+}
+
+interface EvoRadioProps {
+  value: string;
+  label: string;
+  disabled?: boolean;
+  className?: string;
+}
+
+const EvoRadioGroup = ({
+  children,
+  name,
+  value,
+  onChange,
+  label,
+  className = '',
+}: EvoRadioGroupProps) => (
+  <RadioGroupContext.Provider value={{ name, value, onChange }}>
+    <fieldset className={`${styles.group} ${className}`}>
+      {label && <legend className={styles.groupLabel}>{label}</legend>}
+      {children}
+    </fieldset>
+  </RadioGroupContext.Provider>
+);
+
+export const EvoRadio = ({ value, label, disabled = false, className = '' }: EvoRadioProps) => {
+  const ctx = useContext(RadioGroupContext);
+  const isChecked = ctx ? ctx.value === value : false;
+  const inputId = `${ctx?.name ?? 'radio'}-${value}`;
+
+  return (
+    <div className={[styles.radio, disabled ? styles.disabled : '', className].filter(Boolean).join(' ')}>
+      <input
+        type="radio"
+        id={inputId}
+        name={ctx?.name}
+        value={value}
+        checked={isChecked}
+        disabled={disabled}
+        className={styles.input}
+        onChange={() => ctx?.onChange(value)}
+      />
+      <label htmlFor={inputId} className={styles.label}>
+        <span className={styles.radiomark} />
+        <span className={styles.labelText}>{label}</span>
+      </label>
+    </div>
+  );
+};
+
+EvoRadio.Group = EvoRadioGroup;