@starasia/pagination 3.1.0 → 3.1.2

package/dist/pagination.es.js

@@ -76,6 +76,11 @@ const z = `:root {
   height: 8px;
 }
 
+/* PAGE NUMBERS — nudge text down 1px to compensate font cap-height offset */
+.sa-pagination-page {
+  padding-top: 7px;
+}
+
 /* HOVER & DOTS */
 .sa-pagination-item.sa-pagination-dots:hover {
   background-color: transparent;
@@ -88,10 +93,18 @@ const z = `:root {
 }
 
 /* ARROW */
+.sa-pagination-arrow {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  line-height: 0;
+  padding-right: 2px;
+  padding-top: 2px;
+}
+
 .sa-pagination-arrow::before {
-  position: relative;
   content: "";
-  display: inline-block;
+  display: block;
   width: 6px;
   height: 6px;
   border-right: var(--sa-border, 1px) solid var(--sa-pagination-text);
@@ -99,7 +112,7 @@ const z = `:root {
 }
 
 .sa-pagination-arrow.sa-pagination-left {
-  transform: rotate(-135deg) translateX(-25%);
+  transform: rotate(-135deg);
 }
 
 .sa-pagination-arrow.sa-pagination-right {
@@ -147,7 +160,7 @@ const z = `:root {
   color: var(--sa-pagination-bg-active);
   font-weight: 600;
 }
-`, d = "...", v = (i, n) => {
+`, l = "...", f = (i, n) => {
   let s = n - i + 1;
   return Array.from({ length: s }, (t, a) => a + i);
 }, w = ({
@@ -158,25 +171,25 @@ const z = `:root {
 }) => u(() => {
   const a = i;
   if (n + 5 >= a)
-    return v(1, a);
+    return f(1, a);
   const e = Math.max(s - n, 1), c = Math.min(
     s + n,
     a
-  ), p = e > 2, l = c < a - 2, m = 1, r = a;
-  if (!p && l) {
+  ), p = e > 2, d = c < a - 2, m = 1, r = a;
+  if (!p && d) {
     let o = 3 + 2 * n;
-    return [...v(1, o), d, a];
+    return [...f(1, o), l, a];
   }
-  if (p && !l) {
-    let o = 3 + 2 * n, h = v(
+  if (p && !d) {
+    let o = 3 + 2 * n, v = f(
       a - o + 1,
       a
     );
-    return [m, d, ...h];
+    return [m, l, ...v];
   }
-  if (p && l) {
-    let o = v(e, c);
-    return [m, d, ...o, d, r];
+  if (p && d) {
+    let o = f(e, c);
+    return [m, l, ...o, l, r];
   }
 }, [i, n, s]), x = "sa-pagination-styles", y = (i) => {
   if (!document.getElementById(x)) {
@@ -185,13 +198,13 @@ const z = `:root {
   }
 };
 y(z);
-const R = ({
+const k = ({
   onPageChange: i,
   totalCount: n,
   siblingCount: s = 1,
   currentPage: t,
   size: a = "md",
-  variant: f = "solid"
+  variant: h = "solid"
 }) => {
   const e = w({
     currentPage: t,
@@ -200,7 +213,7 @@ const R = ({
   });
   if (t === 0 || e.length < 2)
     return null;
-  const c = () => i(t + 1), p = () => i(t - 1), l = e[e.length - 1], m = `sa-pagination-container sa-pagination-size-${a} sa-pagination-variant-${f}`;
+  const c = () => i(t + 1), p = () => i(t - 1), d = e[e.length - 1], m = `sa-pagination-container sa-pagination-size-${a} sa-pagination-variant-${h}`;
   return /* @__PURE__ */ b("ul", { className: m, style: { padding: 0 }, children: [
     /* @__PURE__ */ g(
       "li",
@@ -210,10 +223,10 @@ const R = ({
         children: /* @__PURE__ */ g("div", { className: "sa-pagination-arrow sa-pagination-left" })
       }
     ),
-    e.map((r, o) => r === d ? /* @__PURE__ */ g("li", { className: "sa-pagination-item sa-pagination-dots", children: "…" }, o) : /* @__PURE__ */ g(
+    e.map((r, o) => r === l ? /* @__PURE__ */ g("li", { className: "sa-pagination-item sa-pagination-page sa-pagination-dots", children: "…" }, o) : /* @__PURE__ */ g(
       "li",
       {
-        className: `sa-pagination-item${r === t ? " sa-pagination-selected" : ""}`,
+        className: `sa-pagination-item sa-pagination-page${r === t ? " sa-pagination-selected" : ""}`,
         onClick: () => i(Number(r)),
         children: r
       },
@@ -222,7 +235,7 @@ const R = ({
     /* @__PURE__ */ g(
       "li",
       {
-        className: `sa-pagination-item${t === l ? " sa-pagination-disabled" : ""}`,
+        className: `sa-pagination-item${t === d ? " sa-pagination-disabled" : ""}`,
         onClick: c,
         children: /* @__PURE__ */ g("div", { className: "sa-pagination-arrow sa-pagination-right" })
       }
@@ -230,5 +243,5 @@ const R = ({
   ] });
 };
 export {
-  R as Pagination
+  k as Pagination
 };

package/dist/pagination.umd.js

@@ -74,6 +74,11 @@
   height: 8px;
 }
 
+/* PAGE NUMBERS — nudge text down 1px to compensate font cap-height offset */
+.sa-pagination-page {
+  padding-top: 7px;
+}
+
 /* HOVER & DOTS */
 .sa-pagination-item.sa-pagination-dots:hover {
   background-color: transparent;
@@ -86,10 +91,18 @@
 }
 
 /* ARROW */
+.sa-pagination-arrow {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  line-height: 0;
+  padding-right: 2px;
+  padding-top: 2px;
+}
+
 .sa-pagination-arrow::before {
-  position: relative;
   content: "";
-  display: inline-block;
+  display: block;
   width: 6px;
   height: 6px;
   border-right: var(--sa-border, 1px) solid var(--sa-pagination-text);
@@ -97,7 +110,7 @@
 }
 
 .sa-pagination-arrow.sa-pagination-left {
-  transform: rotate(-135deg) translateX(-25%);
+  transform: rotate(-135deg);
 }
 
 .sa-pagination-arrow.sa-pagination-right {
@@ -145,4 +158,4 @@
   color: var(--sa-pagination-bg-active);
   font-weight: 600;
 }
-`,d="...",m=(t,n)=>{let r=n-t+1;return Array.from({length:r},(e,a)=>a+t)},y=({totalCount:t,siblingCount:n=1,currentPage:r})=>u.useMemo(()=>{const a=t;if(n+5>=a)return m(1,a);const g=Math.max(r-n,1),f=Math.min(r+n,a),l=g>2,c=f<a-2,v=1,p=a;if(!l&&c){let s=3+2*n;return[...m(1,s),d,a]}if(l&&!c){let s=3+2*n,b=m(a-s+1,a);return[v,d,...b]}if(l&&c){let s=m(g,f);return[v,d,...s,d,p]}},[t,n,r]),h="sa-pagination-styles";(t=>{if(!document.getElementById(h)){const n=document.createElement("style");n.id=h,n.textContent=t,document.head.appendChild(n)}})(z);const w=({onPageChange:t,totalCount:n,siblingCount:r=1,currentPage:e,size:a="md",variant:x="solid"})=>{const g=y({currentPage:e,totalCount:n,siblingCount:r});if(e===0||g.length<2)return null;const f=()=>t(e+1),l=()=>t(e-1),c=g[g.length-1],v=`sa-pagination-container sa-pagination-size-${a} sa-pagination-variant-${x}`;return i.jsxs("ul",{className:v,style:{padding:0},children:[i.jsx("li",{className:`sa-pagination-item${e===1?" sa-pagination-disabled":""}`,onClick:l,children:i.jsx("div",{className:"sa-pagination-arrow sa-pagination-left"})}),g.map((p,s)=>p===d?i.jsx("li",{className:"sa-pagination-item sa-pagination-dots",children:"…"},s):i.jsx("li",{className:`sa-pagination-item${p===e?" sa-pagination-selected":""}`,onClick:()=>t(Number(p)),children:p},s)),i.jsx("li",{className:`sa-pagination-item${e===c?" sa-pagination-disabled":""}`,onClick:f,children:i.jsx("div",{className:"sa-pagination-arrow sa-pagination-right"})})]})};o.Pagination=w,Object.defineProperty(o,Symbol.toStringTag,{value:"Module"})});
+`,d="...",f=(t,n)=>{let r=n-t+1;return Array.from({length:r},(e,a)=>a+t)},y=({totalCount:t,siblingCount:n=1,currentPage:r})=>u.useMemo(()=>{const a=t;if(n+5>=a)return f(1,a);const g=Math.max(r-n,1),m=Math.min(r+n,a),l=g>2,c=m<a-2,h=1,p=a;if(!l&&c){let s=3+2*n;return[...f(1,s),d,a]}if(l&&!c){let s=3+2*n,b=f(a-s+1,a);return[h,d,...b]}if(l&&c){let s=f(g,m);return[h,d,...s,d,p]}},[t,n,r]),x="sa-pagination-styles";(t=>{if(!document.getElementById(x)){const n=document.createElement("style");n.id=x,n.textContent=t,document.head.appendChild(n)}})(z);const w=({onPageChange:t,totalCount:n,siblingCount:r=1,currentPage:e,size:a="md",variant:v="solid"})=>{const g=y({currentPage:e,totalCount:n,siblingCount:r});if(e===0||g.length<2)return null;const m=()=>t(e+1),l=()=>t(e-1),c=g[g.length-1],h=`sa-pagination-container sa-pagination-size-${a} sa-pagination-variant-${v}`;return i.jsxs("ul",{className:h,style:{padding:0},children:[i.jsx("li",{className:`sa-pagination-item${e===1?" sa-pagination-disabled":""}`,onClick:l,children:i.jsx("div",{className:"sa-pagination-arrow sa-pagination-left"})}),g.map((p,s)=>p===d?i.jsx("li",{className:"sa-pagination-item sa-pagination-page sa-pagination-dots",children:"…"},s):i.jsx("li",{className:`sa-pagination-item sa-pagination-page${p===e?" sa-pagination-selected":""}`,onClick:()=>t(Number(p)),children:p},s)),i.jsx("li",{className:`sa-pagination-item${e===c?" sa-pagination-disabled":""}`,onClick:m,children:i.jsx("div",{className:"sa-pagination-arrow sa-pagination-right"})})]})};o.Pagination=w,Object.defineProperty(o,Symbol.toStringTag,{value:"Module"})});

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@starasia/pagination",
-  "version": "3.1.0",
+  "version": "3.1.2",
   "description": "pagination component for starasia UI",
   "author": "Prawito Hudoro",
   "main": "dist/pagination.umd.js",