@starasia/pagination 3.0.0 → 3.1.1

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