cynx-lib 1.3.83 → 1.3.85

package/ui/components/Pagination.jsx

@@ -1,145 +1,145 @@
-import React from 'react';
-import { ChevronLeft, ChevronRight } from 'lucide-react';
-
-export function Pagination({ page = 1, pages = 1, total, perPage, pageSize, onChange, size = 'md', style = {} }) {
-  const effectivePerPage = pageSize || perPage || 20;
-  const totalPages = pages || (total && effectivePerPage ? Math.ceil(total / effectivePerPage) : 0);
-  if (!totalPages || totalPages <= 1) return null;
-
-  const items = [];
-  for (let i = 1; i <= totalPages; i++) {
-    if (i === 1 || i === totalPages || (i >= page - 1 && i <= page + 1)) items.push(i);
-    else if (items[items.length - 1] !== '...') items.push('...');
-  }
-
-  const start = effectivePerPage ? (page - 1) * effectivePerPage + 1 : null;
-  const end = effectivePerPage ? Math.min(page * effectivePerPage, total) : null;
-
-  const SIZES = {
-    xs: { box: 26, icon: 13, font: '11px', gap: 6 },
-    sm: { box: 30, icon: 15, font: '12px', gap: 8 },
-    md: { box: 34, icon: 17, font: '13.5px', gap: 10 },
-    lg: { box: 38, icon: 19, font: '15px', gap: 12 },
-  };
-  const currentSize = SIZES[size] || SIZES.md;
-
-  return (
-    <div
-      style={{
-        display: 'flex',
-        alignItems: 'center',
-        justifyContent: 'space-between',
-        width: '100%',
-        padding: '8px 0',
-        userSelect: 'none',
-        ...style,
-      }}
-    >
-      {start !== null && (
-        <div style={{ fontSize: '.75rem', color: 'var(--muted, #797b8d)', fontFamily: 'var(--mono, ui-monospace, monospace)' }}>
-          {start}–{end} of {total}
-        </div>
-      )}
-
-      <div style={{ display: 'flex', gap: currentSize.gap, alignItems: 'center', marginLeft: start !== null ? 'auto' : 0 }}>
-        {/* Prev Button */}
-        <button
-          type="button"
-          disabled={page <= 1}
-          onClick={() => onChange?.(page - 1)}
-          style={{
-            display: 'inline-flex',
-            alignItems: 'center',
-            justifyContent: 'center',
-            width: currentSize.box,
-            height: currentSize.box,
-            borderRadius: 'var(--radm, var(--rads, var(--radius, 10px)))',
-            background: 'var(--surface, #ffffff)',
-            border: '1px solid var(--border, var(--bd, #e2e8f0))',
-            boxShadow: '0 2px 5px rgba(0, 0, 0, 0.04), 0 1px 2px rgba(0, 0, 0, 0.02)',
-            color: 'var(--muted, #64748b)',
-            cursor: page <= 1 ? 'not-allowed' : 'pointer',
-            opacity: page <= 1 ? 0.35 : 1,
-            transition: 'all .14s',
-          }}
-          title="Previous page"
-        >
-          <ChevronLeft size={currentSize.icon} strokeWidth={2.2} />
-        </button>
-
-        {/* Page numbers */}
-        {items.map((item, i) =>
-          item === '...' ? (
-            <span
-              key={`e${i}`}
-              style={{
-                display: 'inline-flex',
-                alignItems: 'center',
-                justifyContent: 'center',
-                minWidth: currentSize.box,
-                height: currentSize.box,
-                color: 'var(--muted, #94a3b8)',
-                fontSize: currentSize.font,
-                fontWeight: 500,
-              }}
-            >
-              …
-            </span>
-          ) : (
-            <button
-              key={item}
-              type="button"
-              onClick={() => onChange?.(item)}
-              style={{
-                display: 'inline-flex',
-                alignItems: 'center',
-                justifyContent: 'center',
-                minWidth: currentSize.box,
-                height: currentSize.box,
-                padding: '0 6px',
-                borderRadius: 'var(--radm, var(--rads, var(--radius, 10px)))',
-                fontSize: currentSize.font,
-                fontWeight: item === page ? 600 : 500,
-                background: item === page ? 'var(--accent, #12675D)' : 'transparent',
-                color: item === page ? '#ffffff' : 'var(--muted, #64748b)',
-                boxShadow: item === page ? '0 3px 8px rgba(0, 0, 0, 0.12)' : 'none',
-                border: 'none',
-                cursor: 'pointer',
-                transition: 'all .14s',
-              }}
-            >
-              {item}
-            </button>
-          )
-        )}
-
-        {/* Next Button */}
-        <button
-          type="button"
-          disabled={page >= totalPages}
-          onClick={() => onChange?.(page + 1)}
-          style={{
-            display: 'inline-flex',
-            alignItems: 'center',
-            justifyContent: 'center',
-            width: currentSize.box,
-            height: currentSize.box,
-            borderRadius: 'var(--radm, var(--rads, var(--radius, 10px)))',
-            background: 'var(--surface, #ffffff)',
-            border: '1px solid var(--border, var(--bd, #e2e8f0))',
-            boxShadow: '0 2px 5px rgba(0, 0, 0, 0.04), 0 1px 2px rgba(0, 0, 0, 0.02)',
-            color: 'var(--muted, #64748b)',
-            cursor: page >= totalPages ? 'not-allowed' : 'pointer',
-            opacity: page >= totalPages ? 0.35 : 1,
-            transition: 'all .14s',
-          }}
-          title="Next page"
-        >
-          <ChevronRight size={currentSize.icon} strokeWidth={2.2} />
-        </button>
-      </div>
-    </div>
-  );
-}
-
-export default Pagination;
+import React from 'react';
+import { ChevronLeft, ChevronRight } from 'lucide-react';
+
+export function Pagination({ page = 1, pages = 1, total, perPage, pageSize, onChange, size = 'md', style = {} }) {
+  const effectivePerPage = pageSize || perPage || 20;
+  const totalPages = pages || (total && effectivePerPage ? Math.ceil(total / effectivePerPage) : 0);
+  if (!totalPages || totalPages <= 1) return null;
+
+  const items = [];
+  for (let i = 1; i <= totalPages; i++) {
+    if (i === 1 || i === totalPages || (i >= page - 1 && i <= page + 1)) items.push(i);
+    else if (items[items.length - 1] !== '...') items.push('...');
+  }
+
+  const start = effectivePerPage ? (page - 1) * effectivePerPage + 1 : null;
+  const end = effectivePerPage ? Math.min(page * effectivePerPage, total) : null;
+
+  const SIZES = {
+    xs: { box: 26, icon: 13, font: '11px', gap: 6 },
+    sm: { box: 30, icon: 15, font: '12px', gap: 8 },
+    md: { box: 34, icon: 17, font: '13.5px', gap: 10 },
+    lg: { box: 38, icon: 19, font: '15px', gap: 12 },
+  };
+  const currentSize = SIZES[size] || SIZES.md;
+
+  return (
+    <div
+      style={{
+        display: 'flex',
+        alignItems: 'center',
+        justifyContent: 'space-between',
+        width: '100%',
+        padding: '8px 0',
+        userSelect: 'none',
+        ...style,
+      }}
+    >
+      {start !== null && (
+        <div style={{ fontSize: '.75rem', color: 'var(--muted, #797b8d)', fontFamily: 'var(--mono, ui-monospace, monospace)' }}>
+          {start}–{end} of {total}
+        </div>
+      )}
+
+      <div style={{ display: 'flex', gap: currentSize.gap, alignItems: 'center', marginLeft: start !== null ? 'auto' : 0 }}>
+        {/* Prev Button */}
+        <button
+          type="button"
+          disabled={page <= 1}
+          onClick={() => onChange?.(page - 1)}
+          style={{
+            display: 'inline-flex',
+            alignItems: 'center',
+            justifyContent: 'center',
+            width: currentSize.box,
+            height: currentSize.box,
+            borderRadius: 'var(--radm, var(--rads, var(--radius, 10px)))',
+            background: 'var(--surface, #ffffff)',
+            border: '1px solid var(--border, var(--bd, #e2e8f0))',
+            boxShadow: '0 2px 5px rgba(0, 0, 0, 0.04), 0 1px 2px rgba(0, 0, 0, 0.02)',
+            color: 'var(--muted, #64748b)',
+            cursor: page <= 1 ? 'not-allowed' : 'pointer',
+            opacity: page <= 1 ? 0.35 : 1,
+            transition: 'all .14s',
+          }}
+          title="Previous page"
+        >
+          <ChevronLeft size={currentSize.icon} strokeWidth={2.2} />
+        </button>
+
+        {/* Page numbers */}
+        {items.map((item, i) =>
+          item === '...' ? (
+            <span
+              key={`e${i}`}
+              style={{
+                display: 'inline-flex',
+                alignItems: 'center',
+                justifyContent: 'center',
+                minWidth: currentSize.box,
+                height: currentSize.box,
+                color: 'var(--muted, #94a3b8)',
+                fontSize: currentSize.font,
+                fontWeight: 500,
+              }}
+            >
+              …
+            </span>
+          ) : (
+            <button
+              key={item}
+              type="button"
+              onClick={() => onChange?.(item)}
+              style={{
+                display: 'inline-flex',
+                alignItems: 'center',
+                justifyContent: 'center',
+                minWidth: currentSize.box,
+                height: currentSize.box,
+                padding: '0 6px',
+                borderRadius: 'var(--radm, var(--rads, var(--radius, 10px)))',
+                fontSize: currentSize.font,
+                fontWeight: item === page ? 600 : 500,
+                background: item === page ? 'var(--accent, #12675D)' : 'transparent',
+                color: item === page ? '#ffffff' : 'var(--muted, #64748b)',
+                boxShadow: item === page ? '0 3px 8px rgba(0, 0, 0, 0.12)' : 'none',
+                border: 'none',
+                cursor: 'pointer',
+                transition: 'all .14s',
+              }}
+            >
+              {item}
+            </button>
+          )
+        )}
+
+        {/* Next Button */}
+        <button
+          type="button"
+          disabled={page >= totalPages}
+          onClick={() => onChange?.(page + 1)}
+          style={{
+            display: 'inline-flex',
+            alignItems: 'center',
+            justifyContent: 'center',
+            width: currentSize.box,
+            height: currentSize.box,
+            borderRadius: 'var(--radm, var(--rads, var(--radius, 10px)))',
+            background: 'var(--surface, #ffffff)',
+            border: '1px solid var(--border, var(--bd, #e2e8f0))',
+            boxShadow: '0 2px 5px rgba(0, 0, 0, 0.04), 0 1px 2px rgba(0, 0, 0, 0.02)',
+            color: 'var(--muted, #64748b)',
+            cursor: page >= totalPages ? 'not-allowed' : 'pointer',
+            opacity: page >= totalPages ? 0.35 : 1,
+            transition: 'all .14s',
+          }}
+          title="Next page"
+        >
+          <ChevronRight size={currentSize.icon} strokeWidth={2.2} />
+        </button>
+      </div>
+    </div>
+  );
+}
+
+export default Pagination;