@starasia/pagination 3.0.0 → 3.1.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 (5) hide show
  1. package/dist/Pagination.d.ts +1 -1
  2. package/dist/pagination.es.js +147 -117
  3. package/dist/pagination.umd.js +93 -46
  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,48 @@ 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;
36
56
  }
37
57
 
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);
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;
43
77
  }
44
78
 
79
+ /* HOVER & DOTS */
45
80
  .sa-pagination-item.sa-pagination-dots:hover {
46
81
  background-color: transparent;
47
82
  cursor: default;
@@ -52,29 +87,15 @@ const y = `@import url("https://fonts.googleapis.com/css2?family=Montserrat:wght
52
87
  cursor: pointer;
53
88
  }
54
89
 
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;
64
- }
65
-
90
+ /* ARROW */
66
91
  .sa-pagination-arrow::before {
67
92
  position: relative;
68
- /* top: 3pt; Uncomment this to lower the icons as requested in comments*/
69
93
  content: "";
70
- /* By using an em scale, the arrows will size with the font */
71
94
  display: inline-block;
72
95
  width: 6px;
73
96
  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);
97
+ border-right: var(--sa-border, 1px) solid var(--sa-pagination-text);
98
+ border-top: var(--sa-border, 1px) solid var(--sa-pagination-text);
78
99
  }
79
100
 
80
101
  .sa-pagination-arrow.sa-pagination-left {
@@ -85,116 +106,125 @@ const y = `@import url("https://fonts.googleapis.com/css2?family=Montserrat:wght
85
106
  transform: rotate(45deg);
86
107
  }
87
108
 
109
+ /* DISABLED */
88
110
  .sa-pagination-item.sa-pagination-disabled {
89
111
  pointer-events: none;
90
112
  }
91
113
 
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);
114
+ .sa-pagination-item.sa-pagination-disabled .sa-pagination-arrow::before {
115
+ border-right: var(--sa-border, 1px) solid var(--sa-pagination-divider);
116
+ border-top: var(--sa-border, 1px) solid var(--sa-pagination-divider);
98
117
  }
118
+
99
119
  .sa-pagination-item.sa-pagination-disabled:hover {
100
120
  background-color: transparent;
101
121
  cursor: default;
102
122
  }
103
- `, d = "...", f = (t, a) => {
104
- let e = a - t + 1;
105
- return Array.from({ length: e }, (i, n) => n + t);
123
+
124
+ /* VARIANTS — selected state */
125
+
126
+ .sa-pagination-variant-solid .sa-pagination-item.sa-pagination-selected {
127
+ background-color: var(--sa-pagination-bg-active);
128
+ color: #ffffff;
129
+ font-weight: 500;
130
+ }
131
+
132
+ .sa-pagination-variant-subtle .sa-pagination-item.sa-pagination-selected {
133
+ background-color: var(--sa-pagination-bg-selected);
134
+ color: var(--sa-pagination-bg-active);
135
+ font-weight: 500;
136
+ }
137
+
138
+ .sa-pagination-variant-outline .sa-pagination-item.sa-pagination-selected {
139
+ background-color: transparent;
140
+ border: 1px solid var(--sa-pagination-bg-active);
141
+ color: var(--sa-pagination-bg-active);
142
+ font-weight: 500;
143
+ }
144
+
145
+ .sa-pagination-variant-ghost .sa-pagination-item.sa-pagination-selected {
146
+ background-color: transparent;
147
+ color: var(--sa-pagination-bg-active);
148
+ font-weight: 600;
149
+ }
150
+ `, d = "...", v = (i, n) => {
151
+ let s = n - i + 1;
152
+ return Array.from({ length: s }, (t, a) => a + i);
106
153
  }, w = ({
107
- totalCount: t,
154
+ totalCount: i,
108
155
  // pageSize,
109
- siblingCount: a = 1,
110
- currentPage: e
156
+ siblingCount: n = 1,
157
+ currentPage: s
111
158
  }) => 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];
159
+ const a = i;
160
+ if (n + 5 >= a)
161
+ return v(1, a);
162
+ const e = Math.max(s - n, 1), c = Math.min(
163
+ s + n,
164
+ a
165
+ ), p = e > 2, l = c < a - 2, m = 1, r = a;
166
+ if (!p && l) {
167
+ let o = 3 + 2 * n;
168
+ return [...v(1, o), d, a];
122
169
  }
123
- if (p && !o) {
124
- let g = 3 + 2 * a, v = f(
125
- n - g + 1,
126
- n
170
+ if (p && !l) {
171
+ let o = 3 + 2 * n, h = v(
172
+ a - o + 1,
173
+ a
127
174
  );
128
- return [l, d, ...v];
175
+ return [m, d, ...h];
129
176
  }
130
- if (p && o) {
131
- let g = f(c, m);
132
- return [l, d, ...g, d, x];
177
+ if (p && l) {
178
+ let o = v(e, c);
179
+ return [m, d, ...o, d, r];
133
180
  }
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);
181
+ }, [i, n, s]), x = "sa-pagination-styles", y = (i) => {
182
+ if (!document.getElementById(x)) {
183
+ const n = document.createElement("style");
184
+ n.id = x, n.textContent = i, document.head.appendChild(n);
138
185
  }
139
186
  };
140
- k(y);
187
+ y(z);
141
188
  const R = ({
142
- onPageChange: t,
143
- totalCount: a,
144
- siblingCount: e = 1,
145
- currentPage: i,
146
- size: n = "md"
189
+ onPageChange: i,
190
+ totalCount: n,
191
+ siblingCount: s = 1,
192
+ currentPage: t,
193
+ size: a = "md",
194
+ variant: f = "solid"
147
195
  }) => {
148
- const r = w({
149
- currentPage: i,
150
- totalCount: a,
151
- siblingCount: e
152
- // pageSize
196
+ const e = w({
197
+ currentPage: t,
198
+ totalCount: n,
199
+ siblingCount: s
153
200
  });
154
- if (i === 0 || r.length < 2)
201
+ if (t === 0 || e.length < 2)
155
202
  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(
203
+ 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}`;
204
+ return /* @__PURE__ */ b("ul", { className: m, style: { padding: 0 }, children: [
205
+ /* @__PURE__ */ g(
164
206
  "li",
165
207
  {
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" })
208
+ className: `sa-pagination-item${t === 1 ? " sa-pagination-disabled" : ""}`,
209
+ onClick: p,
210
+ children: /* @__PURE__ */ g("div", { className: "sa-pagination-arrow sa-pagination-left" })
169
211
  }
170
212
  ),
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(
213
+ e.map((r, o) => r === d ? /* @__PURE__ */ g("li", { className: "sa-pagination-item sa-pagination-dots", children: "…" }, o) : /* @__PURE__ */ g(
179
214
  "li",
180
215
  {
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
216
+ className: `sa-pagination-item${r === t ? " sa-pagination-selected" : ""}`,
217
+ onClick: () => i(Number(r)),
218
+ children: r
184
219
  },
185
- l
220
+ o
186
221
  )),
187
- /* @__PURE__ */ s(
222
+ /* @__PURE__ */ g(
188
223
  "li",
189
224
  {
190
- className: `sa-pagination-item ${i === p ? "sa-pagination-disabled" : null} ${n === "sm" ? "sa-pagination-item-responsive" : ""}`,
225
+ className: `sa-pagination-item${t === l ? " sa-pagination-disabled" : ""}`,
191
226
  onClick: c,
192
- children: /* @__PURE__ */ s(
193
- "div",
194
- {
195
- className: "sa-pagination-arrow sa-pagination-right"
196
- }
197
- )
227
+ children: /* @__PURE__ */ g("div", { className: "sa-pagination-arrow sa-pagination-right" })
198
228
  }
199
229
  )
200
230
  ] });
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,48 @@
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;
34
42
  }
35
43
 
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);
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;
41
54
  }
42
55
 
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;
75
+ }
76
+
77
+ /* HOVER & DOTS */
43
78
  .sa-pagination-item.sa-pagination-dots:hover {
44
79
  background-color: transparent;
45
80
  cursor: default;
@@ -50,29 +85,15 @@
50
85
  cursor: pointer;
51
86
  }
52
87
 
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;
62
- }
63
-
88
+ /* ARROW */
64
89
  .sa-pagination-arrow::before {
65
90
  position: relative;
66
- /* top: 3pt; Uncomment this to lower the icons as requested in comments*/
67
91
  content: "";
68
- /* By using an em scale, the arrows will size with the font */
69
92
  display: inline-block;
70
93
  width: 6px;
71
94
  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);
95
+ border-right: var(--sa-border, 1px) solid var(--sa-pagination-text);
96
+ border-top: var(--sa-border, 1px) solid var(--sa-pagination-text);
76
97
  }
77
98
 
78
99
  .sa-pagination-arrow.sa-pagination-left {
@@ -83,19 +104,45 @@
83
104
  transform: rotate(45deg);
84
105
  }
85
106
 
107
+ /* DISABLED */
86
108
  .sa-pagination-item.sa-pagination-disabled {
87
109
  pointer-events: none;
88
110
  }
89
111
 
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);
112
+ .sa-pagination-item.sa-pagination-disabled .sa-pagination-arrow::before {
113
+ border-right: var(--sa-border, 1px) solid var(--sa-pagination-divider);
114
+ border-top: var(--sa-border, 1px) solid var(--sa-pagination-divider);
96
115
  }
116
+
97
117
  .sa-pagination-item.sa-pagination-disabled:hover {
98
118
  background-color: transparent;
99
119
  cursor: default;
100
120
  }
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"})});
121
+
122
+ /* VARIANTS — selected state */
123
+
124
+ .sa-pagination-variant-solid .sa-pagination-item.sa-pagination-selected {
125
+ background-color: var(--sa-pagination-bg-active);
126
+ color: #ffffff;
127
+ font-weight: 500;
128
+ }
129
+
130
+ .sa-pagination-variant-subtle .sa-pagination-item.sa-pagination-selected {
131
+ background-color: var(--sa-pagination-bg-selected);
132
+ color: var(--sa-pagination-bg-active);
133
+ font-weight: 500;
134
+ }
135
+
136
+ .sa-pagination-variant-outline .sa-pagination-item.sa-pagination-selected {
137
+ background-color: transparent;
138
+ border: 1px solid var(--sa-pagination-bg-active);
139
+ color: var(--sa-pagination-bg-active);
140
+ font-weight: 500;
141
+ }
142
+
143
+ .sa-pagination-variant-ghost .sa-pagination-item.sa-pagination-selected {
144
+ background-color: transparent;
145
+ color: var(--sa-pagination-bg-active);
146
+ font-weight: 600;
147
+ }
148
+ `,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"})});
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.0",
4
4
  "description": "pagination component for starasia UI",
5
5
  "author": "Prawito Hudoro",
6
6
  "main": "dist/pagination.umd.js",