cynx-lib 1.3.59 → 1.3.61

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "cynx-lib",
-  "version": "1.3.59",
+  "version": "1.3.61",
   "type": "module",
   "main": "./index.cjs",
   "module": "./index.js",

package/ui/components/Pagination.jsx

@@ -1,52 +1,145 @@
-import Button from './Button';
-import { ChevronLeft, ChevronRight } from 'lucide-react';
-
-export function Pagination({ page = 1, pages = 1, total, perPage, onChange, style = {} }) {
-  const totalPages = pages || (total && perPage ? Math.ceil(total / perPage) : 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 = perPage ? (page - 1) * perPage + 1 : null;
-  const end = perPage ? Math.min(page * perPage, total) : null;
-
-  return (
-    <div style={{
-      display: 'flex',
-      alignItems: 'center',
-      gap: 8,
-      ...style,
-    }}>
-      {start !== null && (
-        <div style={{ fontSize: '.72rem', color: 'var(--muted, #797b8d)', fontFamily: 'var(--mono, ui-monospace, monospace)' }}>
-          {start}–{end} of {total}
-        </div>
-      )}
-      <div style={{ display: 'flex', gap: 4, alignItems: 'center', marginLeft: start !== null ? 'auto' : 0 }}>
-        <Button
-          variant="ghost"
-          size="xs"
-          icon={<ChevronLeft size={14} />}
-          onClick={() => onChange?.(page - 1)}
-          disabled={page <= 1}
-        />
-        {items.map((item, i) =>
-          item === '...'
-            ? <span key={`e${i}`} style={{ padding: '0 4px', color: 'var(--muted, #797b8d)', fontSize: '.78rem' }}>…</span>
-            : <Button key={item} variant={item === page ? 'primary' : 'no-line'} size="xs" onClick={() => onChange?.(item)} style={{ minWidth: 28 }}>{item}</Button>
-        )}
-        <Button
-          variant="ghost"
-          size="xs"
-          icon={<ChevronRight size={14} />}
-          onClick={() => onChange?.(page + 1)}
-          disabled={page >= totalPages}
-        />
-      </div>
-    </div>
-  );
-}
+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;

package/vue/components/Pagination.vue

@@ -1,7 +1,6 @@
 <script setup lang="ts">
 import { computed } from "vue";
 import { ChevronLeft, ChevronRight } from "lucide-vue-next";
-import Button from "./Button.vue";
 
 const props = withDefaults(
   defineProps<{
@@ -11,6 +10,7 @@ const props = withDefaults(
     perPage?: number;
     pageSize?: number;
     disabled?: boolean;
+    size?: "xs" | "sm" | "md" | "lg";
   }>(),
   {
     page: 1,
@@ -18,6 +18,7 @@ const props = withDefaults(
     total: 0,
     perPage: 20,
     disabled: false,
+    size: "md",
   }
 );
 
@@ -69,59 +70,130 @@ const handlePageChange = (newPage: number) => {
   emit("update:page", newPage);
   emit("change", newPage);
 };
+
+const SIZES = {
+  xs: { box: 26, icon: 13, font: "11px", gap: "6px" },
+  sm: { box: 30, icon: 15, font: "12px", gap: "8px" },
+  md: { box: 34, icon: 17, font: "13.5px", gap: "10px" },
+  lg: { box: 38, icon: 19, font: "15px", gap: "12px" },
+};
+
+const currentSize = computed(() => SIZES[props.size] || SIZES.md);
 </script>
 
 <template>
-  <div v-if="totalPages > 1 || (total != null && total > 0)" class="flex items-center justify-between w-full py-2 select-none">
+  <div
+    v-if="totalPages > 1 || (total != null && total > 0)"
+    class="flex items-center justify-between w-full py-2 select-none"
+  >
     <!-- Info Counter -->
     <div v-if="startItem !== null" class="text-xs text-slate-500 dark:text-slate-400 font-mono">
       {{ startItem }}–{{ endItem }} of {{ total }}
     </div>
     <div v-else />
 
-    <!-- Page Buttons -->
-    <div class="flex items-center gap-1">
-      <Button
-        variant="ghost"
-        size="xs"
+    <!-- Page Controls Container -->
+    <div
+      class="flex items-center"
+      :style="{ gap: currentSize.gap }"
+    >
+      <!-- Prev Arrow Button (Card Style) -->
+      <button
+        type="button"
         :disabled="disabled || page <= 1"
+        class="cynx-page-arrow inline-flex items-center justify-center transition-all"
+        :style="{
+          width: `${currentSize.box}px`,
+          height: `${currentSize.box}px`,
+          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: disabled || page <= 1 ? 'not-allowed' : 'pointer',
+          opacity: disabled || page <= 1 ? 0.35 : 1,
+        }"
         title="Previous page"
         @click="handlePageChange(page - 1)"
       >
-        <template #icon>
-          <ChevronLeft :size="14" />
-        </template>
-      </Button>
+        <ChevronLeft :size="currentSize.icon" :stroke-width="2.2" />
+      </button>
 
-      <template v-for="(item, i) in pageItems" :key="`p-${i}`">
+      <!-- Page Numbers / Ellipsis -->
+      <template v-for="(item, i) in pageItems" :key="`page-${i}`">
+        <!-- Ellipsis -->
         <span
           v-if="item === '...'"
-          class="px-1 text-xs text-slate-400 dark:text-slate-500"
+          class="inline-flex items-center justify-center text-slate-400 dark:text-slate-500 select-none font-medium"
+          :style="{
+            minWidth: `${currentSize.box}px`,
+            height: `${currentSize.box}px`,
+            fontSize: currentSize.font,
+          }"
         >
           …
         </span>
-        <Button
-          :variant="item === page ? 'primary' : 'ghost'"
-          size="xs"
-          class="min-w-[28px] h-7 px-2 font-semibold text-xs"
+
+        <!-- Page Button -->
+        <button
+          v-else
+          type="button"
           :disabled="disabled"
+          class="cynx-page-num inline-flex items-center justify-center transition-all"
+          :class="[
+            item === page ? 'cynx-page-num--active font-semibold' : 'cynx-page-num--inactive font-medium hover:bg-slate-100/70 dark:hover:bg-slate-800/70'
+          ]"
+          :style="{
+            minWidth: `${currentSize.box}px`,
+            height: `${currentSize.box}px`,
+            padding: '0 6px',
+            borderRadius: 'var(--radm, var(--rads, var(--radius, 10px)))',
+            fontSize: currentSize.font,
+            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: disabled ? 'not-allowed' : 'pointer',
+          }"
           @click="handlePageChange(Number(item))"
         >
           {{ item }}
-        </Button>
+        </button>
       </template>
 
-      <Button
-        variant="ghost"
-        size="xs"
+      <!-- Next Arrow Button (Card Style) -->
+      <button
+        type="button"
         :disabled="disabled || page >= totalPages"
+        class="cynx-page-arrow inline-flex items-center justify-center transition-all"
+        :style="{
+          width: `${currentSize.box}px`,
+          height: `${currentSize.box}px`,
+          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: disabled || page >= totalPages ? 'not-allowed' : 'pointer',
+          opacity: disabled || page >= totalPages ? 0.35 : 1,
+        }"
         title="Next page"
         @click="handlePageChange(page + 1)"
       >
-        <template #icon>
-          <ChevronRight :size="14" />
-        </template>
-      </Button>
+        <ChevronRight :size="currentSize.icon" :stroke-width="2.2" />
+      </button>
     </div>
   </div>
 </template>
+
+<style scoped>
+.cynx-page-arrow:not(:disabled):hover {
+  color: var(--t, #0f111c);
+  border-color: var(--border-hover, #cbd5e1);
+  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.07);
+}
+
+.cynx-page-num--inactive:not(:disabled):hover {
+  color: var(--t, #0f111c);
+}
+</style>