@starasia/pagination 1.0.3 → 1.0.5

package/dist/pagination.es.js

@@ -1,5 +1,5 @@
 import { jsxs as h, jsx as o } from "react/jsx-runtime";
-import { useMemo as b } from "react";
+import { useMemo as f } from "react";
 const x = `@import url("https://fonts.googleapis.com/css2?family=Montserrat:wght@500&display=swap");
 
 :root {
@@ -10,30 +10,31 @@ const x = `@import url("https://fonts.googleapis.com/css2?family=Montserrat:wght
   /* color */
   --starasia-ui-pagination-color-primary-gray: var(
     --starasia-ui-color-gray-700,
-    #374151
+    rgba(55, 65, 81, 1)
   );
   --starasia-ui-pagination-color-secondary-gray: var(
     --starasia-ui-color-gray-500,
-    #6b7280
+    rgba(107, 114, 128, 1)
   );
   --starasia-ui-pagination-color-tertiary-gray: var(
     --starasia-ui-color-gray-300,
-    #d1d5db
+    rgba(209, 213, 219, 1)
   );
   --starasia-ui-pagination-color-quaternary-gray: var(
     --starasia-ui-color-gray-100,
-    #f3f4f6
+    rgba(243, 244, 246, 1)
   );
   --starasia-ui-pagination-color-quinary-gray: var(
     --starasia-ui-color-gray-50,
-    #f9fafb
+    rgba(249, 250, 251, 1)
   );
+  --starasia-ui-pagination-color-white: var(--starasia-ui-color-gray-50, rgba(255, 254, 255, 1));
   /* brand color */
-  --starasia-ui-pagination-color-primary-blue: var(--starasia-ui-brand-primary-default);
-  --starasia-ui-pagination-color-secondary-blue: var(--starasia-ui-brand-primary-default);
-  --starasia-ui-pagination-color-tertiary-blue: var(--starasia-ui-brand-primary-secondary);
-  --starasia-ui-pagination-color-quaternary-blue: var(--starasia-ui-brand-primary-tertiary);
-  --starasia-ui-pagination-color-quinary-blue: var(--starasia-ui-brand-primary-tertiary);
+  --starasia-ui-pagination-color-primary-blue: var(--starasia-ui-brand-primary-default, rgba(74, 106, 148, 1));
+  --starasia-ui-pagination-color-secondary-blue: var(--starasia-ui-brand-primary-default, rgba(74, 106, 148, 1));
+  --starasia-ui-pagination-color-tertiary-blue: var(--starasia-ui-brand-primary-secondary, rgba(144, 176, 218, 1));
+  --starasia-ui-pagination-color-quaternary-blue: var(--starasia-ui-brand-primary-tertiary, rgba(227, 237, 248, 1));
+  --starasia-ui-pagination-color-quinary-blue: var(--starasia-ui-brand-primary-tertiary, rgba(227, 237, 248, 1));
 
   /* border radius */
   --starasia-ui-pagination-border-radius: var(--starasia-ui-radii-base, 4px);
@@ -66,10 +67,12 @@ const x = `@import url("https://fonts.googleapis.com/css2?family=Montserrat:wght
   display: flex;
   box-sizing: border-box;
   align-items: center;
-  border-radius: var(--starasia-ui-pagination-border-radius);
+  justify-content: center;
+  border-radius: 8px !important;
+  height: 32px !important;
+  width: 32px !important;
   font-size: var(--starasia-ui-pagination-font-size-sm);
   font-family: "Montserrat";
-  text-align: center;
 }
 
 .starasia-pagination-item.starasia-pagination-item-responsive {
@@ -91,10 +94,15 @@ const x = `@import url("https://fonts.googleapis.com/css2?family=Montserrat:wght
 
 .starasia-pagination-item.starasia-pagination-selected {
   background-color: var(--starasia-ui-pagination-color-quinary-blue);
-  color: var(--starasia-ui-pagination-color-secondary-blue);
+  color: var(--starasia-ui-pagination-color-white) !important;
   font-weight: var(--starasia-ui-pagination-font-weight);
 }
 
+.starasia-pagination-selected {
+  background-color: var(--starasia-ui-brand-primary-default, rgba(74, 106, 148, 1)) !important;
+  border-radius: 8px !important;
+}
+
 .starasia-pagination-arrow::before {
   position: relative;
   /* top: 3pt; Uncomment this to lower the icons as requested in comments*/
@@ -140,7 +148,7 @@ const x = `@import url("https://fonts.googleapis.com/css2?family=Montserrat:wght
   // pageSize,
   siblingCount: i = 1,
   currentPage: s
-}) => b(() => {
+}) => f(() => {
   const a = n;
   if (i + 5 >= a)
     return m(1, a);
@@ -163,10 +171,10 @@ const x = `@import url("https://fonts.googleapis.com/css2?family=Montserrat:wght
     let l = m(u, c);
     return [p, d, ...l, d, v];
   }
-}, [n, i, s]), f = "starasia-pagination-styles", k = (n) => {
-  if (!document.getElementById(f)) {
+}, [n, i, s]), b = "starasia-pagination-styles", k = (n) => {
+  if (!document.getElementById(b)) {
     const i = document.createElement("style");
-    i.id = f, i.textContent = n, document.head.appendChild(i);
+    i.id = b, i.textContent = n, document.head.appendChild(i);
   }
 };
 k(x);

package/dist/pagination.umd.js

@@ -1,4 +1,4 @@
-(function(s,n){typeof exports=="object"&&typeof module<"u"?n(exports,require("react/jsx-runtime"),require("react")):typeof define=="function"&&define.amd?define(["exports","react/jsx-runtime","react"],n):(s=typeof globalThis<"u"?globalThis:s||self,n(s.Pagination={},s.jsxRuntime,s.React))})(this,function(s,n,h){"use strict";const b=`@import url("https://fonts.googleapis.com/css2?family=Montserrat:wght@500&display=swap");
+(function(s,n){typeof exports=="object"&&typeof module<"u"?n(exports,require("react/jsx-runtime"),require("react")):typeof define=="function"&&define.amd?define(["exports","react/jsx-runtime","react"],n):(s=typeof globalThis<"u"?globalThis:s||self,n(s.Pagination={},s.jsxRuntime,s.React))})(this,function(s,n,h){"use strict";const v=`@import url("https://fonts.googleapis.com/css2?family=Montserrat:wght@500&display=swap");
 
 :root {
   /* spacing */
@@ -8,30 +8,31 @@
   /* color */
   --starasia-ui-pagination-color-primary-gray: var(
     --starasia-ui-color-gray-700,
-    #374151
+    rgba(55, 65, 81, 1)
   );
   --starasia-ui-pagination-color-secondary-gray: var(
     --starasia-ui-color-gray-500,
-    #6b7280
+    rgba(107, 114, 128, 1)
   );
   --starasia-ui-pagination-color-tertiary-gray: var(
     --starasia-ui-color-gray-300,
-    #d1d5db
+    rgba(209, 213, 219, 1)
   );
   --starasia-ui-pagination-color-quaternary-gray: var(
     --starasia-ui-color-gray-100,
-    #f3f4f6
+    rgba(243, 244, 246, 1)
   );
   --starasia-ui-pagination-color-quinary-gray: var(
     --starasia-ui-color-gray-50,
-    #f9fafb
+    rgba(249, 250, 251, 1)
   );
+  --starasia-ui-pagination-color-white: var(--starasia-ui-color-gray-50, rgba(255, 254, 255, 1));
   /* brand color */
-  --starasia-ui-pagination-color-primary-blue: var(--starasia-ui-brand-primary-default);
-  --starasia-ui-pagination-color-secondary-blue: var(--starasia-ui-brand-primary-default);
-  --starasia-ui-pagination-color-tertiary-blue: var(--starasia-ui-brand-primary-secondary);
-  --starasia-ui-pagination-color-quaternary-blue: var(--starasia-ui-brand-primary-tertiary);
-  --starasia-ui-pagination-color-quinary-blue: var(--starasia-ui-brand-primary-tertiary);
+  --starasia-ui-pagination-color-primary-blue: var(--starasia-ui-brand-primary-default, rgba(74, 106, 148, 1));
+  --starasia-ui-pagination-color-secondary-blue: var(--starasia-ui-brand-primary-default, rgba(74, 106, 148, 1));
+  --starasia-ui-pagination-color-tertiary-blue: var(--starasia-ui-brand-primary-secondary, rgba(144, 176, 218, 1));
+  --starasia-ui-pagination-color-quaternary-blue: var(--starasia-ui-brand-primary-tertiary, rgba(227, 237, 248, 1));
+  --starasia-ui-pagination-color-quinary-blue: var(--starasia-ui-brand-primary-tertiary, rgba(227, 237, 248, 1));
 
   /* border radius */
   --starasia-ui-pagination-border-radius: var(--starasia-ui-radii-base, 4px);
@@ -64,10 +65,12 @@
   display: flex;
   box-sizing: border-box;
   align-items: center;
-  border-radius: var(--starasia-ui-pagination-border-radius);
+  justify-content: center;
+  border-radius: 8px !important;
+  height: 32px !important;
+  width: 32px !important;
   font-size: var(--starasia-ui-pagination-font-size-sm);
   font-family: "Montserrat";
-  text-align: center;
 }
 
 .starasia-pagination-item.starasia-pagination-item-responsive {
@@ -89,10 +92,15 @@
 
 .starasia-pagination-item.starasia-pagination-selected {
   background-color: var(--starasia-ui-pagination-color-quinary-blue);
-  color: var(--starasia-ui-pagination-color-secondary-blue);
+  color: var(--starasia-ui-pagination-color-white) !important;
   font-weight: var(--starasia-ui-pagination-font-weight);
 }
 
+.starasia-pagination-selected {
+  background-color: var(--starasia-ui-brand-primary-default, rgba(74, 106, 148, 1)) !important;
+  border-radius: 8px !important;
+}
+
 .starasia-pagination-arrow::before {
   position: relative;
   /* top: 3pt; Uncomment this to lower the icons as requested in comments*/
@@ -130,4 +138,4 @@
   background-color: transparent;
   cursor: default;
 }
-`,g="...",u=(t,i)=>{let e=i-t+1;return Array.from({length:e},(r,a)=>a+t)},x=({totalCount:t,siblingCount:i=1,currentPage:e})=>h.useMemo(()=>{const a=t;if(i+5>=a)return u(1,a);const m=Math.max(e-i,1),y=Math.min(e+i,a),l=m>2,o=y<a-2,d=1,S=a;if(!l&&o){let c=3+2*i;return[...u(1,c),g,a]}if(l&&!o){let c=3+2*i,v=u(a-c+1,a);return[d,g,...v]}if(l&&o){let c=u(m,y);return[d,g,...c,g,S]}},[t,i,e]),f="starasia-pagination-styles";(t=>{if(!document.getElementById(f)){const i=document.createElement("style");i.id=f,i.textContent=t,document.head.appendChild(i)}})(b);const w=({onPageChange:t,totalCount:i,siblingCount:e=1,currentPage:r,size:a="md"})=>{const p=x({currentPage:r,totalCount:i,siblingCount:e});if(r===0||p.length<2)return null;const m=()=>{t(r+1)},y=()=>{t(r-1)};let l=p[p.length-1];return n.jsxs("ul",{className:"starasia-pagination-container",style:{padding:0},children:[n.jsx("li",{className:`starasia-pagination-item ${r===1?"starasia-pagination-disabled":null} ${a==="sm"?"starasia-pagination-item-responsive":""}`,onClick:y,children:n.jsx("div",{className:"starasia-pagination-arrow starasia-pagination-left"})}),p.map((o,d)=>o===g?n.jsx("li",{className:`starasia-pagination-item starasia-pagination-dots ${a==="sm"?"starasia-pagination-item-responsive":""}`,children:"…"},d):n.jsx("li",{className:`starasia-pagination-item ${o===r?"starasia-pagination-selected":null} ${a==="sm"?"starasia-pagination-item-responsive":""}`,onClick:()=>t(Number(o)),children:o},d)),n.jsx("li",{className:`starasia-pagination-item ${r===l?"starasia-pagination-disabled":null} ${a==="sm"?"starasia-pagination-item-responsive":""}`,onClick:m,children:n.jsx("div",{className:"starasia-pagination-arrow starasia-pagination-right"})})]})};s.Pagination=w,Object.defineProperty(s,Symbol.toStringTag,{value:"Module"})});
+`,g="...",u=(t,i)=>{let e=i-t+1;return Array.from({length:e},(r,a)=>a+t)},x=({totalCount:t,siblingCount:i=1,currentPage:e})=>h.useMemo(()=>{const a=t;if(i+5>=a)return u(1,a);const m=Math.max(e-i,1),y=Math.min(e+i,a),l=m>2,o=y<a-2,d=1,S=a;if(!l&&o){let c=3+2*i;return[...u(1,c),g,a]}if(l&&!o){let c=3+2*i,b=u(a-c+1,a);return[d,g,...b]}if(l&&o){let c=u(m,y);return[d,g,...c,g,S]}},[t,i,e]),f="starasia-pagination-styles";(t=>{if(!document.getElementById(f)){const i=document.createElement("style");i.id=f,i.textContent=t,document.head.appendChild(i)}})(v);const w=({onPageChange:t,totalCount:i,siblingCount:e=1,currentPage:r,size:a="md"})=>{const p=x({currentPage:r,totalCount:i,siblingCount:e});if(r===0||p.length<2)return null;const m=()=>{t(r+1)},y=()=>{t(r-1)};let l=p[p.length-1];return n.jsxs("ul",{className:"starasia-pagination-container",style:{padding:0},children:[n.jsx("li",{className:`starasia-pagination-item ${r===1?"starasia-pagination-disabled":null} ${a==="sm"?"starasia-pagination-item-responsive":""}`,onClick:y,children:n.jsx("div",{className:"starasia-pagination-arrow starasia-pagination-left"})}),p.map((o,d)=>o===g?n.jsx("li",{className:`starasia-pagination-item starasia-pagination-dots ${a==="sm"?"starasia-pagination-item-responsive":""}`,children:"…"},d):n.jsx("li",{className:`starasia-pagination-item ${o===r?"starasia-pagination-selected":null} ${a==="sm"?"starasia-pagination-item-responsive":""}`,onClick:()=>t(Number(o)),children:o},d)),n.jsx("li",{className:`starasia-pagination-item ${r===l?"starasia-pagination-disabled":null} ${a==="sm"?"starasia-pagination-item-responsive":""}`,onClick:m,children:n.jsx("div",{className:"starasia-pagination-arrow starasia-pagination-right"})})]})};s.Pagination=w,Object.defineProperty(s,Symbol.toStringTag,{value:"Module"})});

package/package.json

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