@starasia/pagination 1.0.2 → 1.0.4

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (3) hide show
  1. package/dist/pagination.es.js +40 -49
  2. package/dist/pagination.umd.js +18 -27
  3. package/package.json +6 -6
package/dist/pagination.es.js CHANGED
@@ -1,4 +1,4 @@
1
- import { jsxs as b, jsx as o } from "react/jsx-runtime";
1
+ import { jsxs as v, jsx as o } from "react/jsx-runtime";
2
2
  import { useMemo as h } from "react";
3
3
  const x = `@import url("https://fonts.googleapis.com/css2?family=Montserrat:wght@500&display=swap");
4
4
 
@@ -28,28 +28,12 @@ const x = `@import url("https://fonts.googleapis.com/css2?family=Montserrat:wght
28
28
  --starasia-ui-color-gray-50,
29
29
  #f9fafb
30
30
  );
31
- /* blue color */
32
- /* blue */
33
- --starasia-ui-pagination-color-primary-blue: var(
34
- --starasia-ui-color-blue-700,
35
- #1d4ed8
36
- );
37
- --starasia-ui-pagination-color-secondary-blue: var(
38
- --starasia-ui-color-blue-500,
39
- #3b82f6
40
- );
41
- --starasia-ui-pagination-color-tertiary-blue: var(
42
- --starasia-ui-color-blue-300,
43
- #93c5fd
44
- );
45
- --starasia-ui-pagination-color-quaternary-blue: var(
46
- --starasia-ui-color-blue-100,
47
- #dbeafe
48
- );
49
- --starasia-ui-pagination-color-quinary-blue: var(
50
- --starasia-ui-color-blue-50,
51
- #eff6ff
52
- );
31
+ /* brand color */
32
+ --starasia-ui-pagination-color-primary-blue: var(--starasia-ui-brand-primary-default, rgba(74, 106, 148, 1));
33
+ --starasia-ui-pagination-color-secondary-blue: var(--starasia-ui-brand-primary-default, rgba(74, 106, 148, 1));
34
+ --starasia-ui-pagination-color-tertiary-blue: var(--starasia-ui-brand-primary-secondary, rgba(144, 176, 218, 1));
35
+ --starasia-ui-pagination-color-quaternary-blue: var(--starasia-ui-brand-primary-tertiary, rgba(227, 237, 248, 1));
36
+ --starasia-ui-pagination-color-quinary-blue: var(--starasia-ui-brand-primary-tertiary, rgba(227, 237, 248, 1));
53
37
 
54
38
  /* border radius */
55
39
  --starasia-ui-pagination-border-radius: var(--starasia-ui-radii-base, 4px);
@@ -82,10 +66,12 @@ const x = `@import url("https://fonts.googleapis.com/css2?family=Montserrat:wght
82
66
  display: flex;
83
67
  box-sizing: border-box;
84
68
  align-items: center;
85
- border-radius: var(--starasia-ui-pagination-border-radius);
69
+ justify-content: center;
70
+ border-radius: 8px !important;
71
+ height: 32px !important;
72
+ width: 32px !important;
86
73
  font-size: var(--starasia-ui-pagination-font-size-sm);
87
74
  font-family: "Montserrat";
88
- text-align: center;
89
75
  }
90
76
 
91
77
  .starasia-pagination-item.starasia-pagination-item-responsive {
@@ -107,10 +93,15 @@ const x = `@import url("https://fonts.googleapis.com/css2?family=Montserrat:wght
107
93
 
108
94
  .starasia-pagination-item.starasia-pagination-selected {
109
95
  background-color: var(--starasia-ui-pagination-color-quinary-blue);
110
- color: var(--starasia-ui-pagination-color-secondary-blue);
96
+ color: #ffffff !important;
111
97
  font-weight: var(--starasia-ui-pagination-font-weight);
112
98
  }
113
99
 
100
+ .starasia-pagination-selected {
101
+ background-color: var(--starasia-ui-brand-primary-default, rgba(74, 106, 148, 1)) !important;
102
+ border-radius: 8px !important;
103
+ }
104
+
114
105
  .starasia-pagination-arrow::before {
115
106
  position: relative;
116
107
  /* top: 3pt; Uncomment this to lower the icons as requested in comments*/
@@ -148,7 +139,7 @@ const x = `@import url("https://fonts.googleapis.com/css2?family=Montserrat:wght
148
139
  background-color: transparent;
149
140
  cursor: default;
150
141
  }
151
- `, u = "...", m = (n, i) => {
142
+ `, d = "...", m = (n, i) => {
152
143
  let s = i - n + 1;
153
144
  return Array.from({ length: s }, (t, a) => a + n);
154
145
  }, w = ({
@@ -160,24 +151,24 @@ const x = `@import url("https://fonts.googleapis.com/css2?family=Montserrat:wght
160
151
  const a = n;
161
152
  if (i + 5 >= a)
162
153
  return m(1, a);
163
- const c = Math.max(s - i, 1), d = Math.min(
154
+ const u = Math.max(s - i, 1), c = Math.min(
164
155
  s + i,
165
156
  a
166
- ), l = c > 2, r = d < a - 2, g = 1, v = a;
167
- if (!l && r) {
168
- let p = 3 + 2 * i;
169
- return [...m(1, p), u, a];
157
+ ), g = u > 2, r = c < a - 2, p = 1, b = a;
158
+ if (!g && r) {
159
+ let l = 3 + 2 * i;
160
+ return [...m(1, l), d, a];
170
161
  }
171
- if (l && !r) {
172
- let p = 3 + 2 * i, f = m(
173
- a - p + 1,
162
+ if (g && !r) {
163
+ let l = 3 + 2 * i, f = m(
164
+ a - l + 1,
174
165
  a
175
166
  );
176
- return [g, u, ...f];
167
+ return [p, d, ...f];
177
168
  }
178
- if (l && r) {
179
- let p = m(c, d);
180
- return [g, u, ...p, u, v];
169
+ if (g && r) {
170
+ let l = m(u, c);
171
+ return [p, d, ...l, d, b];
181
172
  }
182
173
  }, [n, i, s]), y = "starasia-pagination-styles", k = (n) => {
183
174
  if (!document.getElementById(y)) {
@@ -201,28 +192,28 @@ const N = ({
201
192
  });
202
193
  if (t === 0 || e.length < 2)
203
194
  return null;
204
- const c = () => {
195
+ const u = () => {
205
196
  n(t + 1);
206
- }, d = () => {
197
+ }, c = () => {
207
198
  n(t - 1);
208
199
  };
209
- let l = e[e.length - 1];
210
- return /* @__PURE__ */ b("ul", { className: "starasia-pagination-container", style: { padding: 0 }, children: [
200
+ let g = e[e.length - 1];
201
+ return /* @__PURE__ */ v("ul", { className: "starasia-pagination-container", style: { padding: 0 }, children: [
211
202
  /* @__PURE__ */ o(
212
203
  "li",
213
204
  {
214
205
  className: `starasia-pagination-item ${t === 1 ? "starasia-pagination-disabled" : null} ${a === "sm" ? "starasia-pagination-item-responsive" : ""}`,
215
- onClick: d,
206
+ onClick: c,
216
207
  children: /* @__PURE__ */ o("div", { className: "starasia-pagination-arrow starasia-pagination-left" })
217
208
  }
218
209
  ),
219
- e.map((r, g) => r === u ? /* @__PURE__ */ o(
210
+ e.map((r, p) => r === d ? /* @__PURE__ */ o(
220
211
  "li",
221
212
  {
222
213
  className: `starasia-pagination-item starasia-pagination-dots ${a === "sm" ? "starasia-pagination-item-responsive" : ""}`,
223
214
  children: "…"
224
215
  },
225
- g
216
+ p
226
217
  ) : /* @__PURE__ */ o(
227
218
  "li",
228
219
  {
@@ -230,13 +221,13 @@ const N = ({
230
221
  onClick: () => n(Number(r)),
231
222
  children: r
232
223
  },
233
- g
224
+ p
234
225
  )),
235
226
  /* @__PURE__ */ o(
236
227
  "li",
237
228
  {
238
- className: `starasia-pagination-item ${t === l ? "starasia-pagination-disabled" : null} ${a === "sm" ? "starasia-pagination-item-responsive" : ""}`,
239
- onClick: c,
229
+ className: `starasia-pagination-item ${t === g ? "starasia-pagination-disabled" : null} ${a === "sm" ? "starasia-pagination-item-responsive" : ""}`,
230
+ onClick: u,
240
231
  children: /* @__PURE__ */ o(
241
232
  "div",
242
233
  {
package/dist/pagination.umd.js CHANGED
@@ -1,4 +1,4 @@
1
- (function(r,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):(r=typeof globalThis<"u"?globalThis:r||self,n(r.Pagination={},r.jsxRuntime,r.React))})(this,function(r,n,h){"use strict";const b=`@import url("https://fonts.googleapis.com/css2?family=Montserrat:wght@500&display=swap");
1
+ (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");
2
2
 
3
3
  :root {
4
4
  /* spacing */
@@ -26,28 +26,12 @@
26
26
  --starasia-ui-color-gray-50,
27
27
  #f9fafb
28
28
  );
29
- /* blue color */
30
- /* blue */
31
- --starasia-ui-pagination-color-primary-blue: var(
32
- --starasia-ui-color-blue-700,
33
- #1d4ed8
34
- );
35
- --starasia-ui-pagination-color-secondary-blue: var(
36
- --starasia-ui-color-blue-500,
37
- #3b82f6
38
- );
39
- --starasia-ui-pagination-color-tertiary-blue: var(
40
- --starasia-ui-color-blue-300,
41
- #93c5fd
42
- );
43
- --starasia-ui-pagination-color-quaternary-blue: var(
44
- --starasia-ui-color-blue-100,
45
- #dbeafe
46
- );
47
- --starasia-ui-pagination-color-quinary-blue: var(
48
- --starasia-ui-color-blue-50,
49
- #eff6ff
50
- );
29
+ /* brand color */
30
+ --starasia-ui-pagination-color-primary-blue: var(--starasia-ui-brand-primary-default, rgba(74, 106, 148, 1));
31
+ --starasia-ui-pagination-color-secondary-blue: var(--starasia-ui-brand-primary-default, rgba(74, 106, 148, 1));
32
+ --starasia-ui-pagination-color-tertiary-blue: var(--starasia-ui-brand-primary-secondary, rgba(144, 176, 218, 1));
33
+ --starasia-ui-pagination-color-quaternary-blue: var(--starasia-ui-brand-primary-tertiary, rgba(227, 237, 248, 1));
34
+ --starasia-ui-pagination-color-quinary-blue: var(--starasia-ui-brand-primary-tertiary, rgba(227, 237, 248, 1));
51
35
 
52
36
  /* border radius */
53
37
  --starasia-ui-pagination-border-radius: var(--starasia-ui-radii-base, 4px);
@@ -80,10 +64,12 @@
80
64
  display: flex;
81
65
  box-sizing: border-box;
82
66
  align-items: center;
83
- border-radius: var(--starasia-ui-pagination-border-radius);
67
+ justify-content: center;
68
+ border-radius: 8px !important;
69
+ height: 32px !important;
70
+ width: 32px !important;
84
71
  font-size: var(--starasia-ui-pagination-font-size-sm);
85
72
  font-family: "Montserrat";
86
- text-align: center;
87
73
  }
88
74
 
89
75
  .starasia-pagination-item.starasia-pagination-item-responsive {
@@ -105,10 +91,15 @@
105
91
 
106
92
  .starasia-pagination-item.starasia-pagination-selected {
107
93
  background-color: var(--starasia-ui-pagination-color-quinary-blue);
108
- color: var(--starasia-ui-pagination-color-secondary-blue);
94
+ color: #ffffff !important;
109
95
  font-weight: var(--starasia-ui-pagination-font-weight);
110
96
  }
111
97
 
98
+ .starasia-pagination-selected {
99
+ background-color: var(--starasia-ui-brand-primary-default, rgba(74, 106, 148, 1)) !important;
100
+ border-radius: 8px !important;
101
+ }
102
+
112
103
  .starasia-pagination-arrow::before {
113
104
  position: relative;
114
105
  /* top: 3pt; Uncomment this to lower the icons as requested in comments*/
@@ -146,4 +137,4 @@
146
137
  background-color: transparent;
147
138
  cursor: default;
148
139
  }
149
- `,l="...",d=(t,i)=>{let e=i-t+1;return Array.from({length:e},(s,a)=>a+t)},x=({totalCount:t,siblingCount:i=1,currentPage:e})=>h.useMemo(()=>{const a=t;if(i+5>=a)return d(1,a);const m=Math.max(e-i,1),f=Math.min(e+i,a),p=m>2,o=f<a-2,c=1,S=a;if(!p&&o){let u=3+2*i;return[...d(1,u),l,a]}if(p&&!o){let u=3+2*i,v=d(a-u+1,a);return[c,l,...v]}if(p&&o){let u=d(m,f);return[c,l,...u,l,S]}},[t,i,e]),y="starasia-pagination-styles";(t=>{if(!document.getElementById(y)){const i=document.createElement("style");i.id=y,i.textContent=t,document.head.appendChild(i)}})(b);const w=({onPageChange:t,totalCount:i,siblingCount:e=1,currentPage:s,size:a="md"})=>{const g=x({currentPage:s,totalCount:i,siblingCount:e});if(s===0||g.length<2)return null;const m=()=>{t(s+1)},f=()=>{t(s-1)};let p=g[g.length-1];return n.jsxs("ul",{className:"starasia-pagination-container",style:{padding:0},children:[n.jsx("li",{className:`starasia-pagination-item ${s===1?"starasia-pagination-disabled":null} ${a==="sm"?"starasia-pagination-item-responsive":""}`,onClick:f,children:n.jsx("div",{className:"starasia-pagination-arrow starasia-pagination-left"})}),g.map((o,c)=>o===l?n.jsx("li",{className:`starasia-pagination-item starasia-pagination-dots ${a==="sm"?"starasia-pagination-item-responsive":""}`,children:"…"},c):n.jsx("li",{className:`starasia-pagination-item ${o===s?"starasia-pagination-selected":null} ${a==="sm"?"starasia-pagination-item-responsive":""}`,onClick:()=>t(Number(o)),children:o},c)),n.jsx("li",{className:`starasia-pagination-item ${s===p?"starasia-pagination-disabled":null} ${a==="sm"?"starasia-pagination-item-responsive":""}`,onClick:m,children:n.jsx("div",{className:"starasia-pagination-arrow starasia-pagination-right"})})]})};r.Pagination=w,Object.defineProperty(r,Symbol.toStringTag,{value:"Module"})});
140
+ `,p="...",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),f=Math.min(e+i,a),l=m>2,o=f<a-2,d=1,S=a;if(!l&&o){let c=3+2*i;return[...u(1,c),p,a]}if(l&&!o){let c=3+2*i,b=u(a-c+1,a);return[d,p,...b]}if(l&&o){let c=u(m,f);return[d,p,...c,p,S]}},[t,i,e]),y="starasia-pagination-styles";(t=>{if(!document.getElementById(y)){const i=document.createElement("style");i.id=y,i.textContent=t,document.head.appendChild(i)}})(v);const w=({onPageChange:t,totalCount:i,siblingCount:e=1,currentPage:r,size:a="md"})=>{const g=x({currentPage:r,totalCount:i,siblingCount:e});if(r===0||g.length<2)return null;const m=()=>{t(r+1)},f=()=>{t(r-1)};let l=g[g.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:f,children:n.jsx("div",{className:"starasia-pagination-arrow starasia-pagination-left"})}),g.map((o,d)=>o===p?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 CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@starasia/pagination",
3
- "version": "1.0.2",
3
+ "version": "1.0.4",
4
4
  "description": "pagination component for starasia UI",
5
5
  "author": "Prawito Hudoro",
6
6
  "main": "dist/pagination.umd.js",
@@ -12,6 +12,10 @@
12
12
  "dist/*.map",
13
13
  "dist/*.css"
14
14
  ],
15
+ "scripts": {
16
+ "dev": "vite --config vite.config.ts --port 3000",
17
+ "build": "vite build --config vite.config.ts"
18
+ },
15
19
  "keywords": [],
16
20
  "license": "ISC",
17
21
  "type": "module",
@@ -33,9 +37,5 @@
33
37
  "react-dom": "^18.2.0",
34
38
  "@types/react": "^18.2.55",
35
39
  "@types/react-dom": "^18.2.19"
36
- },
37
- "scripts": {
38
- "dev": "vite --config vite.config.ts --port 3000",
39
- "build": "vite build --config vite.config.ts"
40
40
  }
41
- }
41
+ }