@justin_evo/evo-ui 1.0.1

package/src/Pagination/Pagination.tsx

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

package/src/Radio/Radio.tsx

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