@starasia/pagination 1.0.5 → 3.0.0

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 +111 -151
  2. package/dist/pagination.umd.js +45 -85
  3. package/package.json +6 -6
package/dist/pagination.es.js CHANGED
@@ -1,69 +1,29 @@
1
- import { jsxs as h, jsx as o } from "react/jsx-runtime";
2
- import { useMemo as f } from "react";
3
- const x = `@import url("https://fonts.googleapis.com/css2?family=Montserrat:wght@500&display=swap");
1
+ import { jsxs as b, jsx as s } from "react/jsx-runtime";
2
+ import { useMemo as u } from "react";
3
+ const y = `@import url("https://fonts.googleapis.com/css2?family=Montserrat:wght@500&display=swap");
4
4
 
5
5
  :root {
6
- /* spacing */
7
- --starasia-ui-pagination-spacing-xs: var(--starasia-ui-spacing-xs, 4px);
8
- --starasia-ui-pagination-spacing-sm: var(--starasia-ui-spacing-sm, 8px);
9
-
10
- /* color */
11
- --starasia-ui-pagination-color-primary-gray: var(
12
- --starasia-ui-color-gray-700,
13
- rgba(55, 65, 81, 1)
14
- );
15
- --starasia-ui-pagination-color-secondary-gray: var(
16
- --starasia-ui-color-gray-500,
17
- rgba(107, 114, 128, 1)
18
- );
19
- --starasia-ui-pagination-color-tertiary-gray: var(
20
- --starasia-ui-color-gray-300,
21
- rgba(209, 213, 219, 1)
22
- );
23
- --starasia-ui-pagination-color-quaternary-gray: var(
24
- --starasia-ui-color-gray-100,
25
- rgba(243, 244, 246, 1)
26
- );
27
- --starasia-ui-pagination-color-quinary-gray: var(
28
- --starasia-ui-color-gray-50,
29
- rgba(249, 250, 251, 1)
30
- );
31
- --starasia-ui-pagination-color-white: var(--starasia-ui-color-gray-50, rgba(255, 254, 255, 1));
32
- /* brand color */
33
- --starasia-ui-pagination-color-primary-blue: var(--starasia-ui-brand-primary-default, rgba(74, 106, 148, 1));
34
- --starasia-ui-pagination-color-secondary-blue: var(--starasia-ui-brand-primary-default, rgba(74, 106, 148, 1));
35
- --starasia-ui-pagination-color-tertiary-blue: var(--starasia-ui-brand-primary-secondary, rgba(144, 176, 218, 1));
36
- --starasia-ui-pagination-color-quaternary-blue: var(--starasia-ui-brand-primary-tertiary, rgba(227, 237, 248, 1));
37
- --starasia-ui-pagination-color-quinary-blue: var(--starasia-ui-brand-primary-tertiary, rgba(227, 237, 248, 1));
38
-
39
- /* border radius */
40
- --starasia-ui-pagination-border-radius: var(--starasia-ui-radii-base, 4px);
41
-
42
- /* font size */
43
- --starasia-ui-pagination-font-size-xs: var(--starasia-ui-fontSizes-sm, 12px);
44
- --starasia-ui-pagination-font-size-sm: var(--starasia-ui-fontSizes-md, 14px);
45
-
46
- /* font weight */
47
- --starasia-ui-pagination-font-weight: var(
48
- --starasia-ui-fontWeights-medium,
49
- 400
50
- );
51
-
52
- /* border widht */
53
- --starasia-ui-pagination-border-width: var(--starasia-ui-border, 1px);
6
+ --sa-pagination-text: var(--sa-color-gray-700, #6b6e76);
7
+ --sa-pagination-text-muted: var(--sa-color-gray-500, #8c8f97);
8
+ --sa-pagination-divider: var(--sa-color-gray-300, #dddee1);
9
+ --sa-pagination-bg-hover: var(--sa-color-gray-100, #f8f8f8);
10
+ --sa-pagination-bg-selected: var(--sa-color-brand-50, #e6edf6);
11
+ --sa-pagination-color-selected: var(--sa-background-primary, #ffffff);
12
+ --sa-pagination-bg-active: var(--sa-background-brand, #04254f);
13
+ --sa-pagination-radius: var(--sa-radii-base, 0.25rem);
54
14
  }
55
15
 
56
- .starasia-pagination-container {
16
+ .sa-pagination-container {
57
17
  display: flex;
58
18
  list-style-type: none;
59
19
  }
60
20
 
61
- .starasia-pagination-item {
62
- padding: var(--starasia-ui-pagination-spacing-xs)
63
- var(--starasia-ui-pagination-spacing-sm);
21
+ .sa-pagination-item {
22
+ padding: var(--sa-spacing-xs, 4px)
23
+ var(--sa-spacing-sm, 8px);
64
24
  text-align: center;
65
- margin: auto var(--starasia-ui-pagination-spacing-xs);
66
- color: var(--starasia-ui-pagination-color-primary-gray);
25
+ margin: auto var(--sa-spacing-xs, 4px);
26
+ color: var(--sa-pagination-text);
67
27
  display: flex;
68
28
  box-sizing: border-box;
69
29
  align-items: center;
@@ -71,39 +31,39 @@ const x = `@import url("https://fonts.googleapis.com/css2?family=Montserrat:wght
71
31
  border-radius: 8px !important;
72
32
  height: 32px !important;
73
33
  width: 32px !important;
74
- font-size: var(--starasia-ui-pagination-font-size-sm);
34
+ font-size: var(--sa-font-size-md, 14px);
75
35
  font-family: "Montserrat";
76
36
  }
77
37
 
78
- .starasia-pagination-item.starasia-pagination-item-responsive {
38
+ .sa-pagination-item.sa-pagination-item-responsive {
79
39
  margin: auto 0;
80
- font-size: var(--starasia-ui-pagination-font-size-xs);
81
- padding: var(--starasia-ui-pagination-spacing-xs)
82
- var(--starasia-ui-pagination-spacing-sm);
40
+ font-size: var(--sa-font-size-sm, 12px);
41
+ padding: var(--sa-spacing-xs, 4px)
42
+ var(--sa-spacing-sm, 8px);
83
43
  }
84
44
 
85
- .starasia-pagination-item.starasia-pagination-dots:hover {
45
+ .sa-pagination-item.sa-pagination-dots:hover {
86
46
  background-color: transparent;
87
47
  cursor: default;
88
48
  }
89
49
 
90
- .starasia-pagination-item:hover {
91
- background-color: var(--starasia-ui-pagination-color-quaternary-gray);
50
+ .sa-pagination-item:hover {
51
+ background-color: var(--sa-pagination-bg-hover);
92
52
  cursor: pointer;
93
53
  }
94
54
 
95
- .starasia-pagination-item.starasia-pagination-selected {
96
- background-color: var(--starasia-ui-pagination-color-quinary-blue);
97
- color: var(--starasia-ui-pagination-color-white) !important;
98
- font-weight: var(--starasia-ui-pagination-font-weight);
55
+ .sa-pagination-item.sa-pagination-selected {
56
+ background-color: var(--sa-pagination-bg-selected);
57
+ color: var(--sa-pagination-color-selected) !important;
58
+ font-weight: var(--sa-font-weight-medium, 400);
99
59
  }
100
60
 
101
- .starasia-pagination-selected {
102
- background-color: var(--starasia-ui-brand-primary-default, rgba(74, 106, 148, 1)) !important;
61
+ .sa-pagination-selected {
62
+ background-color: var(--sa-pagination-bg-active) !important;
103
63
  border-radius: 8px !important;
104
64
  }
105
65
 
106
- .starasia-pagination-arrow::before {
66
+ .sa-pagination-arrow::before {
107
67
  position: relative;
108
68
  /* top: 3pt; Uncomment this to lower the icons as requested in comments*/
109
69
  content: "";
@@ -111,128 +71,128 @@ const x = `@import url("https://fonts.googleapis.com/css2?family=Montserrat:wght
111
71
  display: inline-block;
112
72
  width: 6px;
113
73
  height: 6px;
114
- border-right: var(--starasia-ui-pagination-border-width) solid
115
- var(--starasia-ui-pagination-color-primary-gray);
116
- border-top: var(--starasia-ui-pagination-border-width) solid
117
- var(--starasia-ui-pagination-color-primary-gray);
74
+ border-right: var(--sa-border, 1px) solid
75
+ var(--sa-pagination-text);
76
+ border-top: var(--sa-border, 1px) solid
77
+ var(--sa-pagination-text);
118
78
  }
119
79
 
120
- .starasia-pagination-arrow.starasia-pagination-left {
80
+ .sa-pagination-arrow.sa-pagination-left {
121
81
  transform: rotate(-135deg) translateX(-25%);
122
82
  }
123
83
 
124
- .starasia-pagination-arrow.starasia-pagination-right {
84
+ .sa-pagination-arrow.sa-pagination-right {
125
85
  transform: rotate(45deg);
126
86
  }
127
87
 
128
- .starasia-pagination-item.starasia-pagination-disabled {
88
+ .sa-pagination-item.sa-pagination-disabled {
129
89
  pointer-events: none;
130
90
  }
131
91
 
132
- .starasia-pagination-item.starasia-pagination-disabled
133
- .starasia-pagination-arrow::before {
134
- border-right: var(--starasia-ui-pagination-border-width) solid
135
- var(--starasia-ui-pagination-color-tertiary-gray);
136
- border-top: var(--starasia-ui-pagination-border-width) solid
137
- var(--starasia-ui-pagination-color-tertiary-gray);
92
+ .sa-pagination-item.sa-pagination-disabled
93
+ .sa-pagination-arrow::before {
94
+ border-right: var(--sa-border, 1px) solid
95
+ var(--sa-pagination-divider);
96
+ border-top: var(--sa-border, 1px) solid
97
+ var(--sa-pagination-divider);
138
98
  }
139
- .starasia-pagination-item.starasia-pagination-disabled:hover {
99
+ .sa-pagination-item.sa-pagination-disabled:hover {
140
100
  background-color: transparent;
141
101
  cursor: default;
142
102
  }
143
- `, d = "...", m = (n, i) => {
144
- let s = i - n + 1;
145
- return Array.from({ length: s }, (t, a) => a + n);
103
+ `, d = "...", f = (t, a) => {
104
+ let e = a - t + 1;
105
+ return Array.from({ length: e }, (i, n) => n + t);
146
106
  }, w = ({
147
- totalCount: n,
107
+ totalCount: t,
148
108
  // pageSize,
149
- siblingCount: i = 1,
150
- currentPage: s
151
- }) => f(() => {
152
- const a = n;
153
- if (i + 5 >= a)
154
- return m(1, a);
155
- const u = Math.max(s - i, 1), c = Math.min(
156
- s + i,
157
- a
158
- ), g = u > 2, r = c < a - 2, p = 1, v = a;
159
- if (!g && r) {
160
- let l = 3 + 2 * i;
161
- return [...m(1, l), d, a];
109
+ siblingCount: a = 1,
110
+ currentPage: e
111
+ }) => u(() => {
112
+ const n = t;
113
+ if (a + 5 >= n)
114
+ return f(1, n);
115
+ const c = Math.max(e - a, 1), m = Math.min(
116
+ e + a,
117
+ n
118
+ ), p = c > 2, o = m < n - 2, l = 1, x = n;
119
+ if (!p && o) {
120
+ let g = 3 + 2 * a;
121
+ return [...f(1, g), d, n];
162
122
  }
163
- if (g && !r) {
164
- let l = 3 + 2 * i, y = m(
165
- a - l + 1,
166
- a
123
+ if (p && !o) {
124
+ let g = 3 + 2 * a, v = f(
125
+ n - g + 1,
126
+ n
167
127
  );
168
- return [p, d, ...y];
128
+ return [l, d, ...v];
169
129
  }
170
- if (g && r) {
171
- let l = m(u, c);
172
- return [p, d, ...l, d, v];
130
+ if (p && o) {
131
+ let g = f(c, m);
132
+ return [l, d, ...g, d, x];
173
133
  }
174
- }, [n, i, s]), b = "starasia-pagination-styles", k = (n) => {
175
- if (!document.getElementById(b)) {
176
- const i = document.createElement("style");
177
- i.id = b, i.textContent = n, document.head.appendChild(i);
134
+ }, [t, a, e]), h = "sa-pagination-styles", k = (t) => {
135
+ if (!document.getElementById(h)) {
136
+ const a = document.createElement("style");
137
+ a.id = h, a.textContent = t, document.head.appendChild(a);
178
138
  }
179
139
  };
180
- k(x);
181
- const N = ({
182
- onPageChange: n,
183
- totalCount: i,
184
- siblingCount: s = 1,
185
- currentPage: t,
186
- size: a = "md"
140
+ k(y);
141
+ const R = ({
142
+ onPageChange: t,
143
+ totalCount: a,
144
+ siblingCount: e = 1,
145
+ currentPage: i,
146
+ size: n = "md"
187
147
  }) => {
188
- const e = w({
189
- currentPage: t,
190
- totalCount: i,
191
- siblingCount: s
148
+ const r = w({
149
+ currentPage: i,
150
+ totalCount: a,
151
+ siblingCount: e
192
152
  // pageSize
193
153
  });
194
- if (t === 0 || e.length < 2)
154
+ if (i === 0 || r.length < 2)
195
155
  return null;
196
- const u = () => {
197
- n(t + 1);
198
- }, c = () => {
199
- n(t - 1);
156
+ const c = () => {
157
+ t(i + 1);
158
+ }, m = () => {
159
+ t(i - 1);
200
160
  };
201
- let g = e[e.length - 1];
202
- return /* @__PURE__ */ h("ul", { className: "starasia-pagination-container", style: { padding: 0 }, children: [
203
- /* @__PURE__ */ o(
161
+ let p = r[r.length - 1];
162
+ return /* @__PURE__ */ b("ul", { className: "sa-pagination-container", style: { padding: 0 }, children: [
163
+ /* @__PURE__ */ s(
204
164
  "li",
205
165
  {
206
- className: `starasia-pagination-item ${t === 1 ? "starasia-pagination-disabled" : null} ${a === "sm" ? "starasia-pagination-item-responsive" : ""}`,
207
- onClick: c,
208
- children: /* @__PURE__ */ o("div", { className: "starasia-pagination-arrow starasia-pagination-left" })
166
+ className: `sa-pagination-item ${i === 1 ? "sa-pagination-disabled" : null} ${n === "sm" ? "sa-pagination-item-responsive" : ""}`,
167
+ onClick: m,
168
+ children: /* @__PURE__ */ s("div", { className: "sa-pagination-arrow sa-pagination-left" })
209
169
  }
210
170
  ),
211
- e.map((r, p) => r === d ? /* @__PURE__ */ o(
171
+ r.map((o, l) => o === d ? /* @__PURE__ */ s(
212
172
  "li",
213
173
  {
214
- className: `starasia-pagination-item starasia-pagination-dots ${a === "sm" ? "starasia-pagination-item-responsive" : ""}`,
174
+ className: `sa-pagination-item sa-pagination-dots ${n === "sm" ? "sa-pagination-item-responsive" : ""}`,
215
175
  children: "…"
216
176
  },
217
- p
218
- ) : /* @__PURE__ */ o(
177
+ l
178
+ ) : /* @__PURE__ */ s(
219
179
  "li",
220
180
  {
221
- className: `starasia-pagination-item ${r === t ? "starasia-pagination-selected" : null} ${a === "sm" ? "starasia-pagination-item-responsive" : ""}`,
222
- onClick: () => n(Number(r)),
223
- children: r
181
+ className: `sa-pagination-item ${o === i ? "sa-pagination-selected" : null} ${n === "sm" ? "sa-pagination-item-responsive" : ""}`,
182
+ onClick: () => t(Number(o)),
183
+ children: o
224
184
  },
225
- p
185
+ l
226
186
  )),
227
- /* @__PURE__ */ o(
187
+ /* @__PURE__ */ s(
228
188
  "li",
229
189
  {
230
- className: `starasia-pagination-item ${t === g ? "starasia-pagination-disabled" : null} ${a === "sm" ? "starasia-pagination-item-responsive" : ""}`,
231
- onClick: u,
232
- children: /* @__PURE__ */ o(
190
+ className: `sa-pagination-item ${i === p ? "sa-pagination-disabled" : null} ${n === "sm" ? "sa-pagination-item-responsive" : ""}`,
191
+ onClick: c,
192
+ children: /* @__PURE__ */ s(
233
193
  "div",
234
194
  {
235
- className: "starasia-pagination-arrow starasia-pagination-right"
195
+ className: "sa-pagination-arrow sa-pagination-right"
236
196
  }
237
197
  )
238
198
  }
@@ -240,5 +200,5 @@ const N = ({
240
200
  ] });
241
201
  };
242
202
  export {
243
- N as Pagination
203
+ R as Pagination
244
204
  };
package/dist/pagination.umd.js CHANGED
@@ -1,67 +1,27 @@
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");
1
+ (function(o,t){typeof exports=="object"&&typeof module<"u"?t(exports,require("react/jsx-runtime"),require("react")):typeof define=="function"&&define.amd?define(["exports","react/jsx-runtime","react"],t):(o=typeof globalThis<"u"?globalThis:o||self,t(o.Pagination={},o.jsxRuntime,o.React))})(this,function(o,t,x){"use strict";const b=`@import url("https://fonts.googleapis.com/css2?family=Montserrat:wght@500&display=swap");
2
2
 
3
3
  :root {
4
- /* spacing */
5
- --starasia-ui-pagination-spacing-xs: var(--starasia-ui-spacing-xs, 4px);
6
- --starasia-ui-pagination-spacing-sm: var(--starasia-ui-spacing-sm, 8px);
7
-
8
- /* color */
9
- --starasia-ui-pagination-color-primary-gray: var(
10
- --starasia-ui-color-gray-700,
11
- rgba(55, 65, 81, 1)
12
- );
13
- --starasia-ui-pagination-color-secondary-gray: var(
14
- --starasia-ui-color-gray-500,
15
- rgba(107, 114, 128, 1)
16
- );
17
- --starasia-ui-pagination-color-tertiary-gray: var(
18
- --starasia-ui-color-gray-300,
19
- rgba(209, 213, 219, 1)
20
- );
21
- --starasia-ui-pagination-color-quaternary-gray: var(
22
- --starasia-ui-color-gray-100,
23
- rgba(243, 244, 246, 1)
24
- );
25
- --starasia-ui-pagination-color-quinary-gray: var(
26
- --starasia-ui-color-gray-50,
27
- rgba(249, 250, 251, 1)
28
- );
29
- --starasia-ui-pagination-color-white: var(--starasia-ui-color-gray-50, rgba(255, 254, 255, 1));
30
- /* brand color */
31
- --starasia-ui-pagination-color-primary-blue: var(--starasia-ui-brand-primary-default, rgba(74, 106, 148, 1));
32
- --starasia-ui-pagination-color-secondary-blue: var(--starasia-ui-brand-primary-default, rgba(74, 106, 148, 1));
33
- --starasia-ui-pagination-color-tertiary-blue: var(--starasia-ui-brand-primary-secondary, rgba(144, 176, 218, 1));
34
- --starasia-ui-pagination-color-quaternary-blue: var(--starasia-ui-brand-primary-tertiary, rgba(227, 237, 248, 1));
35
- --starasia-ui-pagination-color-quinary-blue: var(--starasia-ui-brand-primary-tertiary, rgba(227, 237, 248, 1));
36
-
37
- /* border radius */
38
- --starasia-ui-pagination-border-radius: var(--starasia-ui-radii-base, 4px);
39
-
40
- /* font size */
41
- --starasia-ui-pagination-font-size-xs: var(--starasia-ui-fontSizes-sm, 12px);
42
- --starasia-ui-pagination-font-size-sm: var(--starasia-ui-fontSizes-md, 14px);
43
-
44
- /* font weight */
45
- --starasia-ui-pagination-font-weight: var(
46
- --starasia-ui-fontWeights-medium,
47
- 400
48
- );
49
-
50
- /* border widht */
51
- --starasia-ui-pagination-border-width: var(--starasia-ui-border, 1px);
4
+ --sa-pagination-text: var(--sa-color-gray-700, #6b6e76);
5
+ --sa-pagination-text-muted: var(--sa-color-gray-500, #8c8f97);
6
+ --sa-pagination-divider: var(--sa-color-gray-300, #dddee1);
7
+ --sa-pagination-bg-hover: var(--sa-color-gray-100, #f8f8f8);
8
+ --sa-pagination-bg-selected: var(--sa-color-brand-50, #e6edf6);
9
+ --sa-pagination-color-selected: var(--sa-background-primary, #ffffff);
10
+ --sa-pagination-bg-active: var(--sa-background-brand, #04254f);
11
+ --sa-pagination-radius: var(--sa-radii-base, 0.25rem);
52
12
  }
53
13
 
54
- .starasia-pagination-container {
14
+ .sa-pagination-container {
55
15
  display: flex;
56
16
  list-style-type: none;
57
17
  }
58
18
 
59
- .starasia-pagination-item {
60
- padding: var(--starasia-ui-pagination-spacing-xs)
61
- var(--starasia-ui-pagination-spacing-sm);
19
+ .sa-pagination-item {
20
+ padding: var(--sa-spacing-xs, 4px)
21
+ var(--sa-spacing-sm, 8px);
62
22
  text-align: center;
63
- margin: auto var(--starasia-ui-pagination-spacing-xs);
64
- color: var(--starasia-ui-pagination-color-primary-gray);
23
+ margin: auto var(--sa-spacing-xs, 4px);
24
+ color: var(--sa-pagination-text);
65
25
  display: flex;
66
26
  box-sizing: border-box;
67
27
  align-items: center;
@@ -69,39 +29,39 @@
69
29
  border-radius: 8px !important;
70
30
  height: 32px !important;
71
31
  width: 32px !important;
72
- font-size: var(--starasia-ui-pagination-font-size-sm);
32
+ font-size: var(--sa-font-size-md, 14px);
73
33
  font-family: "Montserrat";
74
34
  }
75
35
 
76
- .starasia-pagination-item.starasia-pagination-item-responsive {
36
+ .sa-pagination-item.sa-pagination-item-responsive {
77
37
  margin: auto 0;
78
- font-size: var(--starasia-ui-pagination-font-size-xs);
79
- padding: var(--starasia-ui-pagination-spacing-xs)
80
- var(--starasia-ui-pagination-spacing-sm);
38
+ font-size: var(--sa-font-size-sm, 12px);
39
+ padding: var(--sa-spacing-xs, 4px)
40
+ var(--sa-spacing-sm, 8px);
81
41
  }
82
42
 
83
- .starasia-pagination-item.starasia-pagination-dots:hover {
43
+ .sa-pagination-item.sa-pagination-dots:hover {
84
44
  background-color: transparent;
85
45
  cursor: default;
86
46
  }
87
47
 
88
- .starasia-pagination-item:hover {
89
- background-color: var(--starasia-ui-pagination-color-quaternary-gray);
48
+ .sa-pagination-item:hover {
49
+ background-color: var(--sa-pagination-bg-hover);
90
50
  cursor: pointer;
91
51
  }
92
52
 
93
- .starasia-pagination-item.starasia-pagination-selected {
94
- background-color: var(--starasia-ui-pagination-color-quinary-blue);
95
- color: var(--starasia-ui-pagination-color-white) !important;
96
- font-weight: var(--starasia-ui-pagination-font-weight);
53
+ .sa-pagination-item.sa-pagination-selected {
54
+ background-color: var(--sa-pagination-bg-selected);
55
+ color: var(--sa-pagination-color-selected) !important;
56
+ font-weight: var(--sa-font-weight-medium, 400);
97
57
  }
98
58
 
99
- .starasia-pagination-selected {
100
- background-color: var(--starasia-ui-brand-primary-default, rgba(74, 106, 148, 1)) !important;
59
+ .sa-pagination-selected {
60
+ background-color: var(--sa-pagination-bg-active) !important;
101
61
  border-radius: 8px !important;
102
62
  }
103
63
 
104
- .starasia-pagination-arrow::before {
64
+ .sa-pagination-arrow::before {
105
65
  position: relative;
106
66
  /* top: 3pt; Uncomment this to lower the icons as requested in comments*/
107
67
  content: "";
@@ -109,33 +69,33 @@
109
69
  display: inline-block;
110
70
  width: 6px;
111
71
  height: 6px;
112
- border-right: var(--starasia-ui-pagination-border-width) solid
113
- var(--starasia-ui-pagination-color-primary-gray);
114
- border-top: var(--starasia-ui-pagination-border-width) solid
115
- var(--starasia-ui-pagination-color-primary-gray);
72
+ border-right: var(--sa-border, 1px) solid
73
+ var(--sa-pagination-text);
74
+ border-top: var(--sa-border, 1px) solid
75
+ var(--sa-pagination-text);
116
76
  }
117
77
 
118
- .starasia-pagination-arrow.starasia-pagination-left {
78
+ .sa-pagination-arrow.sa-pagination-left {
119
79
  transform: rotate(-135deg) translateX(-25%);
120
80
  }
121
81
 
122
- .starasia-pagination-arrow.starasia-pagination-right {
82
+ .sa-pagination-arrow.sa-pagination-right {
123
83
  transform: rotate(45deg);
124
84
  }
125
85
 
126
- .starasia-pagination-item.starasia-pagination-disabled {
86
+ .sa-pagination-item.sa-pagination-disabled {
127
87
  pointer-events: none;
128
88
  }
129
89
 
130
- .starasia-pagination-item.starasia-pagination-disabled
131
- .starasia-pagination-arrow::before {
132
- border-right: var(--starasia-ui-pagination-border-width) solid
133
- var(--starasia-ui-pagination-color-tertiary-gray);
134
- border-top: var(--starasia-ui-pagination-border-width) solid
135
- var(--starasia-ui-pagination-color-tertiary-gray);
90
+ .sa-pagination-item.sa-pagination-disabled
91
+ .sa-pagination-arrow::before {
92
+ border-right: var(--sa-border, 1px) solid
93
+ var(--sa-pagination-divider);
94
+ border-top: var(--sa-border, 1px) solid
95
+ var(--sa-pagination-divider);
136
96
  }
137
- .starasia-pagination-item.starasia-pagination-disabled:hover {
97
+ .sa-pagination-item.sa-pagination-disabled:hover {
138
98
  background-color: transparent;
139
99
  cursor: default;
140
100
  }
141
- `,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"})});
101
+ `,p="...",m=(i,a)=>{let r=a-i+1;return Array.from({length:r},(e,n)=>n+i)},y=({totalCount:i,siblingCount:a=1,currentPage:r})=>x.useMemo(()=>{const n=i;if(a+5>=n)return m(1,n);const f=Math.max(r-a,1),v=Math.min(r+a,n),d=f>2,s=v<n-2,g=1,k=n;if(!d&&s){let c=3+2*a;return[...m(1,c),p,n]}if(d&&!s){let c=3+2*a,u=m(n-c+1,n);return[g,p,...u]}if(d&&s){let c=m(f,v);return[g,p,...c,p,k]}},[i,a,r]),h="sa-pagination-styles";(i=>{if(!document.getElementById(h)){const a=document.createElement("style");a.id=h,a.textContent=i,document.head.appendChild(a)}})(b);const w=({onPageChange:i,totalCount:a,siblingCount:r=1,currentPage:e,size:n="md"})=>{const l=y({currentPage:e,totalCount:a,siblingCount:r});if(e===0||l.length<2)return null;const f=()=>{i(e+1)},v=()=>{i(e-1)};let d=l[l.length-1];return t.jsxs("ul",{className:"sa-pagination-container",style:{padding:0},children:[t.jsx("li",{className:`sa-pagination-item ${e===1?"sa-pagination-disabled":null} ${n==="sm"?"sa-pagination-item-responsive":""}`,onClick:v,children:t.jsx("div",{className:"sa-pagination-arrow sa-pagination-left"})}),l.map((s,g)=>s===p?t.jsx("li",{className:`sa-pagination-item sa-pagination-dots ${n==="sm"?"sa-pagination-item-responsive":""}`,children:"…"},g):t.jsx("li",{className:`sa-pagination-item ${s===e?"sa-pagination-selected":null} ${n==="sm"?"sa-pagination-item-responsive":""}`,onClick:()=>i(Number(s)),children:s},g)),t.jsx("li",{className:`sa-pagination-item ${e===d?"sa-pagination-disabled":null} ${n==="sm"?"sa-pagination-item-responsive":""}`,onClick:f,children:t.jsx("div",{className:"sa-pagination-arrow sa-pagination-right"})})]})};o.Pagination=w,Object.defineProperty(o,Symbol.toStringTag,{value:"Module"})});
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@starasia/pagination",
3
- "version": "1.0.5",
3
+ "version": "3.0.0",
4
4
  "description": "pagination component for starasia UI",
5
5
  "author": "Prawito Hudoro",
6
6
  "main": "dist/pagination.umd.js",
@@ -12,10 +12,6 @@
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
- },
19
15
  "keywords": [],
20
16
  "license": "ISC",
21
17
  "type": "module",
@@ -37,5 +33,9 @@
37
33
  "react-dom": "^18.2.0",
38
34
  "@types/react": "^18.2.55",
39
35
  "@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
+ }