meticulous-ui 3.10.8 → 3.11.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.
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const r=require("react/jsx-runtime"),D=require("react"),y=require("styled-components"),L=require("../Icons/ChevronLeft.cjs"),b=require("../Icons/ChevronRight.cjs"),I=require("../Ripple/Ripple.cjs"),B=require("../../colors/colorMap.cjs"),P=require("../../colors/teal.cjs"),M=require("../../colors/grey.cjs"),q=require("../../colors/white.cjs"),O=require("../../colors/black.cjs"),o=require("./constants.cjs"),F=e=>e&&e.__esModule?e:{default:e},
|
|
1
|
+
"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const r=require("react/jsx-runtime"),D=require("react"),y=require("styled-components"),L=require("../Icons/ChevronLeft.cjs"),b=require("../Icons/ChevronRight.cjs"),I=require("../Ripple/Ripple.cjs"),B=require("../../colors/colorMap.cjs"),P=require("../../colors/teal.cjs"),M=require("../../colors/grey.cjs"),q=require("../../colors/white.cjs"),O=require("../../colors/black.cjs"),o=require("./constants.cjs"),F=e=>e&&e.__esModule?e:{default:e},a=F(y),j=e=>({$shades:i})=>{if(["#FFFFFF"].includes(i))return O.black.m900;if(e===o.SELECTED_BG)return i.m600;if(e===o.NOT_SELECTED_BG)return i.m50;if(e===o.ACTIVE_NOT_SELECTED_BG)return i.m100},p=a.default.nav`
|
|
2
2
|
display: flex;
|
|
3
3
|
justify-content: center;
|
|
4
4
|
align-items: center;
|
|
@@ -10,7 +10,7 @@
|
|
|
10
10
|
pointer-events: none;
|
|
11
11
|
opacity: 0.4;
|
|
12
12
|
`};
|
|
13
|
-
`,K=
|
|
13
|
+
`,K=a.default.button`
|
|
14
14
|
border: none;
|
|
15
15
|
padding: 0;
|
|
16
16
|
font-family: inherit;
|
|
@@ -36,6 +36,7 @@
|
|
|
36
36
|
`:y.css`
|
|
37
37
|
cursor: pointer;
|
|
38
38
|
color: ${M.default.m500};
|
|
39
|
+
background-color: transparent;
|
|
39
40
|
|
|
40
41
|
&:hover {
|
|
41
42
|
background-color: ${j(o.NOT_SELECTED_BG)};
|
|
@@ -50,11 +51,11 @@
|
|
|
50
51
|
outline: 1px solid ${j(o.NOT_SELECTED_BG)};
|
|
51
52
|
}
|
|
52
53
|
`}
|
|
53
|
-
`,Z=
|
|
54
|
+
`,Z=a.default.span`
|
|
54
55
|
color: ${M.default.m700};
|
|
55
56
|
font-size: 1.4rem;
|
|
56
57
|
user-select: none;
|
|
57
|
-
`,G=
|
|
58
|
+
`,G=a.default.button`
|
|
58
59
|
border: none;
|
|
59
60
|
background: none;
|
|
60
61
|
padding: 0;
|
|
@@ -68,13 +69,13 @@
|
|
|
68
69
|
&:focus-visible {
|
|
69
70
|
outline: 1px solid ${({$shades:e})=>e==null?void 0:e.m600};
|
|
70
71
|
}
|
|
71
|
-
`,z=
|
|
72
|
+
`,z=a.default(L.default)`
|
|
72
73
|
cursor: pointer;
|
|
73
|
-
`,
|
|
74
|
+
`,g=a.default(b.default)`
|
|
74
75
|
cursor: pointer;
|
|
75
|
-
`,
|
|
76
|
+
`,w=a.default.div`
|
|
76
77
|
min-width: ${({size:e})=>e};
|
|
77
78
|
display: flex;
|
|
78
79
|
align-items: center;
|
|
79
80
|
justify-content: space-between;
|
|
80
|
-
`,h=({size:e,selected:i,shades:n,changePage:C})=>t=>{const _=o.SIZE_REM_MAPPING[e],$=o.FONT_SIZE_MAPPING[e],
|
|
81
|
+
`,h=({size:e,selected:i,shades:n,changePage:C})=>t=>{const _=o.SIZE_REM_MAPPING[e],$=o.FONT_SIZE_MAPPING[e],f=n,s=i===t,l=()=>{C(t)},x=u=>{(u.key==="Enter"||u.key===" ")&&(u.preventDefault(),l())};return r.jsx(K,{"data-testid":s?"current-page":`test-${t}`,$isSelected:s,onClick:l,onKeyDown:x,tabIndex:s?0:-1,"aria-label":`Page ${t}`,"aria-current":s?"page":void 0,$shades:f,$individualRemSize:_,$fontRemSize:$,children:t},`page_${t}`)},T=()=>r.jsx(Z,{"aria-hidden":"true",children:"…"}),A=({iconSize:e,shades:i,setPrevPage:n})=>r.jsx(G,{onClick:n,"aria-label":"Previous page",$shades:i,children:r.jsx(I.default,{rippleColor:i.m50,children:r.jsx(z,{size:e,"aria-hidden":"true"})})}),k=({iconSize:e,shades:i,setNextPage:n})=>r.jsx(G,{onClick:n,"aria-label":"Next page",$shades:i,children:r.jsx(I.default,{rippleColor:i.m50,children:r.jsx(g,{size:e,"aria-hidden":"true"})})}),U=({pageNumber:e,setPageNumber:i,totalPages:n,theme:C="lime",size:t=o.MEDIUM,isDisabled:_=!1,...$})=>{var R;const f=D.useRef(null),s=D.useRef(!1);D.useEffect(()=>{var d,v;s.current&&(s.current=!1,(v=(d=f.current)==null?void 0:d.querySelector('[aria-current="page"]'))==null||v.focus())},[e]);const l=d=>{d!==e&&i(d)},x=()=>{e>1&&l(e-1)},u=()=>{e<n&&l(e+1)},S=d=>{["ArrowLeft","ArrowUp"].includes(d.code)&&(s.current=!0,x()),["ArrowRight","ArrowDown"].includes(d.code)&&(s.current=!0,u())},c=(R=B.default[C])!=null?R:P.default,m=o.SIZE_REM_MAPPING[t],E=o.ICON_SIZE_MAPPING[t];return n<=7?r.jsxs(p,{ref:f,onKeyDown:S,"aria-label":"Pagination",$isDisabled:_,...$,children:[r.jsx(A,{iconSize:E,shades:c,setPrevPage:x}),r.jsx(w,{size:`${n*m}rem`,children:Array.from({length:n},(d,v)=>v+1).map(h({size:t,selected:e,shades:c,changePage:l}))}),r.jsx(k,{iconSize:E,shades:c,setNextPage:u})]}):n<10||e<4||e>n-3&&e<=n?r.jsxs(p,{ref:f,onKeyDown:S,"aria-label":"Pagination",$isDisabled:_,...$,children:[r.jsx(A,{iconSize:E,shades:c,setPrevPage:x}),r.jsxs(w,{size:`${9*m}rem`,children:[[1,2,3,4].map(h({size:t,selected:e,shades:c,changePage:l})),T(),[n-3,n-2,n-1,n].map(h({size:t,selected:e,shades:c,changePage:l}))]}),r.jsx(k,{iconSize:E,shades:c,setNextPage:u})]}):r.jsxs(p,{ref:f,onKeyDown:S,"aria-label":"Pagination",$isDisabled:_,children:[r.jsx(A,{iconSize:E,shades:c,setPrevPage:x}),r.jsxs(w,{size:`${9*m}rem`,children:[[1,2].map(h({size:t,selected:e,shades:c,changePage:l})),e>4&&T(),[e-1,e,e+1].map(h({size:t,selected:e,shades:c,changePage:l})),e<n-3&&T(),[n-1,n].map(h({size:t,selected:e,shades:c,changePage:l}))]}),r.jsx(k,{iconSize:E,shades:c,setNextPage:u})]})};exports.default=U;
|
|
@@ -1,25 +1,25 @@
|
|
|
1
|
-
import { jsxs as $, jsx as
|
|
2
|
-
import { useRef as
|
|
1
|
+
import { jsxs as $, jsx as o } from "react/jsx-runtime";
|
|
2
|
+
import { useRef as F, useEffect as B } from "react";
|
|
3
3
|
import f, { css as R } from "styled-components";
|
|
4
4
|
import O from "../Icons/ChevronLeft.js";
|
|
5
5
|
import z from "../Icons/ChevronRight.js";
|
|
6
|
-
import
|
|
6
|
+
import M from "../Ripple/Ripple.js";
|
|
7
7
|
import Z from "../../colors/colorMap.js";
|
|
8
8
|
import U from "../../colors/teal.js";
|
|
9
9
|
import j from "../../colors/grey.js";
|
|
10
|
-
import
|
|
10
|
+
import L from "../../colors/white.js";
|
|
11
11
|
import { black as q } from "../../colors/black.js";
|
|
12
|
-
import { ICON_SIZE_MAPPING as H, MEDIUM as V, FONT_SIZE_MAPPING as
|
|
13
|
-
const v = (e) => ({ $shades:
|
|
14
|
-
if (["#FFFFFF"].includes(
|
|
12
|
+
import { ICON_SIZE_MAPPING as H, MEDIUM as V, FONT_SIZE_MAPPING as g, SIZE_REM_MAPPING as G, SELECTED_BG as I, NOT_SELECTED_BG as T, ACTIVE_NOT_SELECTED_BG as K } from "./constants.js";
|
|
13
|
+
const v = (e) => ({ $shades: i }) => {
|
|
14
|
+
if (["#FFFFFF"].includes(i))
|
|
15
15
|
return q.m900;
|
|
16
16
|
if (e === I)
|
|
17
|
-
return
|
|
17
|
+
return i.m600;
|
|
18
18
|
if (e === T)
|
|
19
|
-
return
|
|
19
|
+
return i.m50;
|
|
20
20
|
if (e === K)
|
|
21
|
-
return
|
|
22
|
-
},
|
|
21
|
+
return i.m100;
|
|
22
|
+
}, k = f.nav`
|
|
23
23
|
display: flex;
|
|
24
24
|
justify-content: center;
|
|
25
25
|
align-items: center;
|
|
@@ -31,7 +31,7 @@ const v = (e) => ({ $shades: o }) => {
|
|
|
31
31
|
pointer-events: none;
|
|
32
32
|
opacity: 0.4;
|
|
33
33
|
`};
|
|
34
|
-
`,
|
|
34
|
+
`, J = f.button`
|
|
35
35
|
border: none;
|
|
36
36
|
padding: 0;
|
|
37
37
|
font-family: inherit;
|
|
@@ -48,7 +48,7 @@ const v = (e) => ({ $shades: o }) => {
|
|
|
48
48
|
font-size: ${({ $fontRemSize: e }) => e}rem;
|
|
49
49
|
${({ $isSelected: e }) => e ? R`
|
|
50
50
|
cursor: auto;
|
|
51
|
-
color: ${
|
|
51
|
+
color: ${L};
|
|
52
52
|
background-color: ${v(I)};
|
|
53
53
|
|
|
54
54
|
&:focus-visible {
|
|
@@ -57,6 +57,7 @@ const v = (e) => ({ $shades: o }) => {
|
|
|
57
57
|
` : R`
|
|
58
58
|
cursor: pointer;
|
|
59
59
|
color: ${j.m500};
|
|
60
|
+
background-color: transparent;
|
|
60
61
|
|
|
61
62
|
&:hover {
|
|
62
63
|
background-color: ${v(T)};
|
|
@@ -64,14 +65,14 @@ const v = (e) => ({ $shades: o }) => {
|
|
|
64
65
|
|
|
65
66
|
&:active {
|
|
66
67
|
background-color: ${v(K)};
|
|
67
|
-
color: ${
|
|
68
|
+
color: ${L};
|
|
68
69
|
}
|
|
69
70
|
|
|
70
71
|
&:focus-visible {
|
|
71
72
|
outline: 1px solid ${v(T)};
|
|
72
73
|
}
|
|
73
74
|
`}
|
|
74
|
-
`,
|
|
75
|
+
`, Q = f.span`
|
|
75
76
|
color: ${j.m700};
|
|
76
77
|
font-size: 1.4rem;
|
|
77
78
|
user-select: none;
|
|
@@ -89,64 +90,64 @@ const v = (e) => ({ $shades: o }) => {
|
|
|
89
90
|
&:focus-visible {
|
|
90
91
|
outline: 1px solid ${({ $shades: e }) => e == null ? void 0 : e.m600};
|
|
91
92
|
}
|
|
92
|
-
`,
|
|
93
|
+
`, W = f(O)`
|
|
93
94
|
cursor: pointer;
|
|
94
|
-
`,
|
|
95
|
+
`, X = f(z)`
|
|
95
96
|
cursor: pointer;
|
|
96
|
-
`,
|
|
97
|
+
`, A = f.div`
|
|
97
98
|
min-width: ${({ size: e }) => e};
|
|
98
99
|
display: flex;
|
|
99
100
|
align-items: center;
|
|
100
101
|
justify-content: space-between;
|
|
101
|
-
`, h = ({ size: e, selected:
|
|
102
|
-
const p = G[e], y =
|
|
103
|
-
x(
|
|
102
|
+
`, h = ({ size: e, selected: i, shades: r, changePage: x }) => (n) => {
|
|
103
|
+
const p = G[e], y = g[e], a = r, l = i === n, c = () => {
|
|
104
|
+
x(n);
|
|
104
105
|
}, u = (d) => {
|
|
105
106
|
(d.key === "Enter" || d.key === " ") && (d.preventDefault(), c());
|
|
106
107
|
};
|
|
107
|
-
return /* @__PURE__ */
|
|
108
|
-
|
|
108
|
+
return /* @__PURE__ */ o(
|
|
109
|
+
J,
|
|
109
110
|
{
|
|
110
|
-
"data-testid": l ? "current-page" : `test-${
|
|
111
|
+
"data-testid": l ? "current-page" : `test-${n}`,
|
|
111
112
|
$isSelected: l,
|
|
112
113
|
onClick: c,
|
|
113
114
|
onKeyDown: u,
|
|
114
115
|
tabIndex: l ? 0 : -1,
|
|
115
|
-
"aria-label": `Page ${
|
|
116
|
+
"aria-label": `Page ${n}`,
|
|
116
117
|
"aria-current": l ? "page" : void 0,
|
|
117
118
|
$shades: a,
|
|
118
119
|
$individualRemSize: p,
|
|
119
120
|
$fontRemSize: y,
|
|
120
|
-
children:
|
|
121
|
+
children: n
|
|
121
122
|
},
|
|
122
|
-
`page_${
|
|
123
|
+
`page_${n}`
|
|
123
124
|
);
|
|
124
|
-
},
|
|
125
|
+
}, D = () => /* @__PURE__ */ o(Q, { "aria-hidden": "true", children: "…" }), S = ({ iconSize: e, shades: i, setPrevPage: r }) => /* @__PURE__ */ o(P, { onClick: r, "aria-label": "Previous page", $shades: i, children: /* @__PURE__ */ o(M, { rippleColor: i.m50, children: /* @__PURE__ */ o(W, { size: e, "aria-hidden": "true" }) }) }), _ = ({ iconSize: e, shades: i, setNextPage: r }) => /* @__PURE__ */ o(P, { onClick: r, "aria-label": "Next page", $shades: i, children: /* @__PURE__ */ o(M, { rippleColor: i.m50, children: /* @__PURE__ */ o(X, { size: e, "aria-hidden": "true" }) }) }), fe = ({
|
|
125
126
|
pageNumber: e,
|
|
126
|
-
setPageNumber:
|
|
127
|
-
totalPages:
|
|
127
|
+
setPageNumber: i,
|
|
128
|
+
totalPages: r,
|
|
128
129
|
theme: x = "lime",
|
|
129
|
-
size:
|
|
130
|
+
size: n = V,
|
|
130
131
|
isDisabled: p = !1,
|
|
131
132
|
...y
|
|
132
133
|
}) => {
|
|
133
|
-
var
|
|
134
|
-
const a =
|
|
134
|
+
var b;
|
|
135
|
+
const a = F(null), l = F(!1);
|
|
135
136
|
B(() => {
|
|
136
137
|
var s, w;
|
|
137
138
|
l.current && (l.current = !1, (w = (s = a.current) == null ? void 0 : s.querySelector('[aria-current="page"]')) == null || w.focus());
|
|
138
139
|
}, [e]);
|
|
139
140
|
const c = (s) => {
|
|
140
|
-
s !== e &&
|
|
141
|
+
s !== e && i(s);
|
|
141
142
|
}, u = () => {
|
|
142
143
|
e > 1 && c(e - 1);
|
|
143
144
|
}, d = () => {
|
|
144
|
-
e <
|
|
145
|
+
e < r && c(e + 1);
|
|
145
146
|
}, E = (s) => {
|
|
146
147
|
["ArrowLeft", "ArrowUp"].includes(s.code) && (l.current = !0, u()), ["ArrowRight", "ArrowDown"].includes(s.code) && (l.current = !0, d());
|
|
147
|
-
}, t = (
|
|
148
|
-
return
|
|
149
|
-
|
|
148
|
+
}, t = (b = Z[x]) != null ? b : U, C = G[n], m = H[n];
|
|
149
|
+
return r <= 7 ? /* @__PURE__ */ $(
|
|
150
|
+
k,
|
|
150
151
|
{
|
|
151
152
|
ref: a,
|
|
152
153
|
onKeyDown: E,
|
|
@@ -154,15 +155,15 @@ const v = (e) => ({ $shades: o }) => {
|
|
|
154
155
|
$isDisabled: p,
|
|
155
156
|
...y,
|
|
156
157
|
children: [
|
|
157
|
-
/* @__PURE__ */
|
|
158
|
-
/* @__PURE__ */
|
|
159
|
-
h({ size:
|
|
158
|
+
/* @__PURE__ */ o(S, { iconSize: m, shades: t, setPrevPage: u }),
|
|
159
|
+
/* @__PURE__ */ o(A, { size: `${r * C}rem`, children: Array.from({ length: r }, (s, w) => w + 1).map(
|
|
160
|
+
h({ size: n, selected: e, shades: t, changePage: c })
|
|
160
161
|
) }),
|
|
161
|
-
/* @__PURE__ */
|
|
162
|
+
/* @__PURE__ */ o(_, { iconSize: m, shades: t, setNextPage: d })
|
|
162
163
|
]
|
|
163
164
|
}
|
|
164
|
-
) :
|
|
165
|
-
|
|
165
|
+
) : r < 10 || e < 4 || e > r - 3 && e <= r ? /* @__PURE__ */ $(
|
|
166
|
+
k,
|
|
166
167
|
{
|
|
167
168
|
ref: a,
|
|
168
169
|
onKeyDown: E,
|
|
@@ -170,38 +171,38 @@ const v = (e) => ({ $shades: o }) => {
|
|
|
170
171
|
$isDisabled: p,
|
|
171
172
|
...y,
|
|
172
173
|
children: [
|
|
173
|
-
/* @__PURE__ */
|
|
174
|
-
/* @__PURE__ */ $(
|
|
175
|
-
[1, 2, 3, 4].map(h({ size:
|
|
176
|
-
|
|
177
|
-
[
|
|
178
|
-
h({ size:
|
|
174
|
+
/* @__PURE__ */ o(S, { iconSize: m, shades: t, setPrevPage: u }),
|
|
175
|
+
/* @__PURE__ */ $(A, { size: `${9 * C}rem`, children: [
|
|
176
|
+
[1, 2, 3, 4].map(h({ size: n, selected: e, shades: t, changePage: c })),
|
|
177
|
+
D(),
|
|
178
|
+
[r - 3, r - 2, r - 1, r].map(
|
|
179
|
+
h({ size: n, selected: e, shades: t, changePage: c })
|
|
179
180
|
)
|
|
180
181
|
] }),
|
|
181
|
-
/* @__PURE__ */
|
|
182
|
+
/* @__PURE__ */ o(_, { iconSize: m, shades: t, setNextPage: d })
|
|
182
183
|
]
|
|
183
184
|
}
|
|
184
185
|
) : /* @__PURE__ */ $(
|
|
185
|
-
|
|
186
|
+
k,
|
|
186
187
|
{
|
|
187
188
|
ref: a,
|
|
188
189
|
onKeyDown: E,
|
|
189
190
|
"aria-label": "Pagination",
|
|
190
191
|
$isDisabled: p,
|
|
191
192
|
children: [
|
|
192
|
-
/* @__PURE__ */
|
|
193
|
-
/* @__PURE__ */ $(
|
|
194
|
-
[1, 2].map(h({ size:
|
|
195
|
-
e > 4 &&
|
|
193
|
+
/* @__PURE__ */ o(S, { iconSize: m, shades: t, setPrevPage: u }),
|
|
194
|
+
/* @__PURE__ */ $(A, { size: `${9 * C}rem`, children: [
|
|
195
|
+
[1, 2].map(h({ size: n, selected: e, shades: t, changePage: c })),
|
|
196
|
+
e > 4 && D(),
|
|
196
197
|
[e - 1, e, e + 1].map(
|
|
197
|
-
h({ size:
|
|
198
|
+
h({ size: n, selected: e, shades: t, changePage: c })
|
|
198
199
|
),
|
|
199
|
-
e <
|
|
200
|
-
[
|
|
201
|
-
h({ size:
|
|
200
|
+
e < r - 3 && D(),
|
|
201
|
+
[r - 1, r].map(
|
|
202
|
+
h({ size: n, selected: e, shades: t, changePage: c })
|
|
202
203
|
)
|
|
203
204
|
] }),
|
|
204
|
-
/* @__PURE__ */
|
|
205
|
+
/* @__PURE__ */ o(_, { iconSize: m, shades: t, setNextPage: d })
|
|
205
206
|
]
|
|
206
207
|
}
|
|
207
208
|
);
|
package/index.d.ts
CHANGED
|
@@ -1403,10 +1403,7 @@ export interface JsonQrResult {
|
|
|
1403
1403
|
* if (result.success) imgEl.src = result.dataUrl!;
|
|
1404
1404
|
* ```
|
|
1405
1405
|
*/
|
|
1406
|
-
export declare function getJsonContentAsQr(
|
|
1407
|
-
json: unknown,
|
|
1408
|
-
options?: JsonQrOptions,
|
|
1409
|
-
): JsonQrResult;
|
|
1406
|
+
export declare function getJsonContentAsQr(json: unknown, options?: JsonQrOptions): JsonQrResult;
|
|
1410
1407
|
|
|
1411
1408
|
// ---------------------------------------------------------------------------
|
|
1412
1409
|
// Utility — OCR
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "meticulous-ui",
|
|
3
|
-
"version": "3.
|
|
3
|
+
"version": "3.11.0",
|
|
4
4
|
"license": "ISC",
|
|
5
5
|
"description": "A comprehensive React UI component library with a wide range of customizable components, icons, colors, and utilities for building modern web applications.",
|
|
6
6
|
"types": "./index.d.ts",
|