@starasia/pagination 2.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 +148 -118
  3. package/dist/pagination.umd.js +102 -55
  4. package/dist/types.d.ts +2 -1
  5. package/package.json +6 -6
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,26 +1,33 @@
1
- import { jsxs as b, jsx as r } 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
- .starasia-pagination-container {
23
+ .sa-pagination-container {
17
24
  display: flex;
18
25
  list-style-type: none;
19
26
  }
20
27
 
21
- .starasia-pagination-item {
22
- padding: var(--sa-spacing-xs, 4px)
23
- var(--sa-spacing-sm, 8px);
28
+ /* BASE ITEM — defaults to md */
29
+ .sa-pagination-item {
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,173 +35,196 @@ 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;
36
44
  }
37
45
 
38
- .starasia-pagination-item.starasia-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);
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;
43
56
  }
44
57
 
45
- .starasia-pagination-item.starasia-pagination-dots:hover {
46
- background-color: transparent;
47
- cursor: default;
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;
48
67
  }
49
68
 
50
- .starasia-pagination-item:hover {
51
- background-color: var(--sa-pagination-bg-hover);
52
- cursor: pointer;
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;
53
77
  }
54
78
 
55
- .starasia-pagination-item.starasia-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);
79
+ /* HOVER & DOTS */
80
+ .sa-pagination-item.sa-pagination-dots:hover {
81
+ background-color: transparent;
82
+ cursor: default;
59
83
  }
60
84
 
61
- .starasia-pagination-selected {
62
- background-color: var(--sa-pagination-bg-active) !important;
63
- border-radius: 8px !important;
85
+ .sa-pagination-item:hover {
86
+ background-color: var(--sa-pagination-bg-hover);
87
+ cursor: pointer;
64
88
  }
65
89
 
66
- .starasia-pagination-arrow::before {
90
+ /* ARROW */
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
- .starasia-pagination-arrow.starasia-pagination-left {
101
+ .sa-pagination-arrow.sa-pagination-left {
81
102
  transform: rotate(-135deg) translateX(-25%);
82
103
  }
83
104
 
84
- .starasia-pagination-arrow.starasia-pagination-right {
105
+ .sa-pagination-arrow.sa-pagination-right {
85
106
  transform: rotate(45deg);
86
107
  }
87
108
 
88
- .starasia-pagination-item.starasia-pagination-disabled {
109
+ /* DISABLED */
110
+ .sa-pagination-item.sa-pagination-disabled {
89
111
  pointer-events: none;
90
112
  }
91
113
 
92
- .starasia-pagination-item.starasia-pagination-disabled
93
- .starasia-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
  }
99
- .starasia-pagination-item.starasia-pagination-disabled:hover {
118
+
119
+ .sa-pagination-item.sa-pagination-disabled:hover {
100
120
  background-color: transparent;
101
121
  cursor: default;
102
122
  }
103
- `, d = "...", f = (t, n) => {
104
- let o = n - t + 1;
105
- return Array.from({ length: o }, (i, a) => a + 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
156
  siblingCount: n = 1,
110
- currentPage: o
157
+ currentPage: s
111
158
  }) => u(() => {
112
- const a = t;
159
+ const a = i;
113
160
  if (n + 5 >= a)
114
- return f(1, a);
115
- const c = Math.max(o - n, 1), m = Math.min(
116
- o + n,
161
+ return v(1, a);
162
+ const e = Math.max(s - n, 1), c = Math.min(
163
+ s + n,
117
164
  a
118
- ), p = c > 2, s = m < a - 2, l = 1, x = a;
119
- if (!p && s) {
120
- let g = 3 + 2 * n;
121
- return [...f(1, g), d, 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 && !s) {
124
- let g = 3 + 2 * n, v = f(
125
- a - g + 1,
170
+ if (p && !l) {
171
+ let o = 3 + 2 * n, h = v(
172
+ a - o + 1,
126
173
  a
127
174
  );
128
- return [l, d, ...v];
175
+ return [m, d, ...h];
129
176
  }
130
- if (p && s) {
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, n, o]), h = "starasia-pagination-styles", k = (t) => {
135
- if (!document.getElementById(h)) {
181
+ }, [i, n, s]), x = "sa-pagination-styles", y = (i) => {
182
+ if (!document.getElementById(x)) {
136
183
  const n = document.createElement("style");
137
- n.id = h, n.textContent = t, document.head.appendChild(n);
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,
189
+ onPageChange: i,
143
190
  totalCount: n,
144
- siblingCount: o = 1,
145
- currentPage: i,
146
- size: a = "md"
191
+ siblingCount: s = 1,
192
+ currentPage: t,
193
+ size: a = "md",
194
+ variant: f = "solid"
147
195
  }) => {
148
196
  const e = w({
149
- currentPage: i,
197
+ currentPage: t,
150
198
  totalCount: n,
151
- siblingCount: o
152
- // pageSize
199
+ siblingCount: s
153
200
  });
154
- if (i === 0 || e.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 = e[e.length - 1];
162
- return /* @__PURE__ */ b("ul", { className: "starasia-pagination-container", style: { padding: 0 }, children: [
163
- /* @__PURE__ */ r(
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: `starasia-pagination-item ${i === 1 ? "starasia-pagination-disabled" : null} ${a === "sm" ? "starasia-pagination-item-responsive" : ""}`,
167
- onClick: m,
168
- children: /* @__PURE__ */ r("div", { className: "starasia-pagination-arrow starasia-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
- e.map((s, l) => s === d ? /* @__PURE__ */ r(
172
- "li",
173
- {
174
- className: `starasia-pagination-item starasia-pagination-dots ${a === "sm" ? "starasia-pagination-item-responsive" : ""}`,
175
- children: "…"
176
- },
177
- l
178
- ) : /* @__PURE__ */ r(
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: `starasia-pagination-item ${s === i ? "starasia-pagination-selected" : null} ${a === "sm" ? "starasia-pagination-item-responsive" : ""}`,
182
- onClick: () => t(Number(s)),
183
- children: s
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__ */ r(
222
+ /* @__PURE__ */ g(
188
223
  "li",
189
224
  {
190
- className: `starasia-pagination-item ${i === p ? "starasia-pagination-disabled" : null} ${a === "sm" ? "starasia-pagination-item-responsive" : ""}`,
225
+ className: `sa-pagination-item${t === l ? " sa-pagination-disabled" : ""}`,
191
226
  onClick: c,
192
- children: /* @__PURE__ */ r(
193
- "div",
194
- {
195
- className: "starasia-pagination-arrow starasia-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,24 +1,31 @@
1
- (function(e,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):(e=typeof globalThis<"u"?globalThis:e||self,t(e.Pagination={},e.jsxRuntime,e.React))})(this,function(e,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
- .starasia-pagination-container {
21
+ .sa-pagination-container {
15
22
  display: flex;
16
23
  list-style-type: none;
17
24
  }
18
25
 
19
- .starasia-pagination-item {
20
- padding: var(--sa-spacing-xs, 4px)
21
- var(--sa-spacing-sm, 8px);
26
+ /* BASE ITEM — defaults to md */
27
+ .sa-pagination-item {
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,76 +33,116 @@
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
- .starasia-pagination-item.starasia-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
 
43
- .starasia-pagination-item.starasia-pagination-dots:hover {
44
- background-color: transparent;
45
- cursor: default;
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;
46
65
  }
47
66
 
48
- .starasia-pagination-item:hover {
49
- background-color: var(--sa-pagination-bg-hover);
50
- cursor: pointer;
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;
51
75
  }
52
76
 
53
- .starasia-pagination-item.starasia-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);
77
+ /* HOVER & DOTS */
78
+ .sa-pagination-item.sa-pagination-dots:hover {
79
+ background-color: transparent;
80
+ cursor: default;
57
81
  }
58
82
 
59
- .starasia-pagination-selected {
60
- background-color: var(--sa-pagination-bg-active) !important;
61
- border-radius: 8px !important;
83
+ .sa-pagination-item:hover {
84
+ background-color: var(--sa-pagination-bg-hover);
85
+ cursor: pointer;
62
86
  }
63
87
 
64
- .starasia-pagination-arrow::before {
88
+ /* ARROW */
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
- .starasia-pagination-arrow.starasia-pagination-left {
99
+ .sa-pagination-arrow.sa-pagination-left {
79
100
  transform: rotate(-135deg) translateX(-25%);
80
101
  }
81
102
 
82
- .starasia-pagination-arrow.starasia-pagination-right {
103
+ .sa-pagination-arrow.sa-pagination-right {
83
104
  transform: rotate(45deg);
84
105
  }
85
106
 
86
- .starasia-pagination-item.starasia-pagination-disabled {
107
+ /* DISABLED */
108
+ .sa-pagination-item.sa-pagination-disabled {
87
109
  pointer-events: none;
88
110
  }
89
111
 
90
- .starasia-pagination-item.starasia-pagination-disabled
91
- .starasia-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
  }
97
- .starasia-pagination-item.starasia-pagination-disabled:hover {
116
+
117
+ .sa-pagination-item.sa-pagination-disabled:hover {
98
118
  background-color: transparent;
99
119
  cursor: default;
100
120
  }
101
- `,p="...",m=(i,n)=>{let r=n-i+1;return Array.from({length:r},(s,a)=>a+i)},y=({totalCount:i,siblingCount:n=1,currentPage:r})=>x.useMemo(()=>{const a=i;if(n+5>=a)return m(1,a);const f=Math.max(r-n,1),v=Math.min(r+n,a),d=f>2,o=v<a-2,g=1,k=a;if(!d&&o){let c=3+2*n;return[...m(1,c),p,a]}if(d&&!o){let c=3+2*n,u=m(a-c+1,a);return[g,p,...u]}if(d&&o){let c=m(f,v);return[g,p,...c,p,k]}},[i,n,r]),h="starasia-pagination-styles";(i=>{if(!document.getElementById(h)){const n=document.createElement("style");n.id=h,n.textContent=i,document.head.appendChild(n)}})(b);const w=({onPageChange:i,totalCount:n,siblingCount:r=1,currentPage:s,size:a="md"})=>{const l=y({currentPage:s,totalCount:n,siblingCount:r});if(s===0||l.length<2)return null;const f=()=>{i(s+1)},v=()=>{i(s-1)};let d=l[l.length-1];return t.jsxs("ul",{className:"starasia-pagination-container",style:{padding:0},children:[t.jsx("li",{className:`starasia-pagination-item ${s===1?"starasia-pagination-disabled":null} ${a==="sm"?"starasia-pagination-item-responsive":""}`,onClick:v,children:t.jsx("div",{className:"starasia-pagination-arrow starasia-pagination-left"})}),l.map((o,g)=>o===p?t.jsx("li",{className:`starasia-pagination-item starasia-pagination-dots ${a==="sm"?"starasia-pagination-item-responsive":""}`,children:"…"},g):t.jsx("li",{className:`starasia-pagination-item ${o===s?"starasia-pagination-selected":null} ${a==="sm"?"starasia-pagination-item-responsive":""}`,onClick:()=>i(Number(o)),children:o},g)),t.jsx("li",{className:`starasia-pagination-item ${s===d?"starasia-pagination-disabled":null} ${a==="sm"?"starasia-pagination-item-responsive":""}`,onClick:f,children:t.jsx("div",{className:"starasia-pagination-arrow starasia-pagination-right"})})]})};e.Pagination=w,Object.defineProperty(e,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": "2.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",
@@ -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
+ }