meticulous-ui 1.8.0 → 1.8.2

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 (8) hide show
  1. package/README.md +1 -1
  2. package/components/Input/Input/Input.js +25 -25
  3. package/components/Input/Input/helpers.js +1 -1
  4. package/components/Input/Input/styles.js +5 -5
  5. package/components/Pagination/Pagination.js +31 -31
  6. package/components/Pagination/helpers.js +3 -3
  7. package/components/Pagination/styles.js +5 -5
  8. package/package.json +1 -1
package/README.md CHANGED
@@ -6,7 +6,7 @@ A lightweight, modern React component library designed for elegance and precisio
6
6
 
7
7
  ## 🚀 Demo
8
8
 
9
- <a href="https://meticulous-ui-dkim-xe3110s-projects.vercel.app" target="_blank">meticulous-ui</a>
9
+ <a href="https://meticulous-ui.vercel.app/" target="_blank">meticulous-ui</a>
10
10
 
11
11
  ## 🚀 Installation
12
12
 
package/components/Input/Input/Input.js CHANGED
@@ -10,58 +10,58 @@ const Y = ({
10
10
  onChange: g,
11
11
  value: n,
12
12
  type: F,
13
- hasError: e,
13
+ hasError: $,
14
14
  name: C = "input",
15
15
  color: y = "blue",
16
16
  size: B = "20",
17
17
  disableAutoComplete: L,
18
- helperText: m = "",
19
- background: h = K,
20
- leftIcon: f,
21
- rightIcon: d,
22
- ...u
18
+ helperText: l = "",
19
+ background: m = K,
20
+ leftIcon: a,
21
+ rightIcon: f,
22
+ ...d
23
23
  }) => {
24
- const [s, a] = z(!1), c = J(y), R = () => a(!0), W = () => a(!1), S = ($) => {
25
- g($);
26
- }, { placeholder: r } = u, x = { color: M.m500, size: 22 }, i = I(f), p = I(d), l = !!(f && i), j = !!(d && p);
24
+ const [s, u] = z(!1), e = J(y), R = () => u(!0), W = () => u(!1), E = (S) => {
25
+ g(S);
26
+ }, { placeholder: r } = d, x = { color: M.m500, size: 22 }, c = I(a), i = I(f), p = !!(a && c), j = !!(f && i), h = $;
27
27
  return /* @__PURE__ */ o.jsxs(H, { children: [
28
28
  /* @__PURE__ */ o.jsx(
29
29
  P,
30
30
  {
31
31
  type: F,
32
32
  name: C,
33
- hasError: e,
33
+ $hasError: h,
34
34
  size: B,
35
35
  value: n,
36
36
  $isFocused: s,
37
- $shade: c,
38
- background: h,
39
- hasLeftIcon: l,
40
- hasRightIcon: j,
37
+ $shade: e,
38
+ background: m,
39
+ $hasLeftIcon: p,
40
+ $hasRightIcon: j,
41
41
  onFocus: R,
42
42
  onBlur: W,
43
- onChange: S,
43
+ onChange: E,
44
44
  autoComplete: L ? "off" : "on",
45
- ...w(u, "placeholder")
45
+ ...w(d, "placeholder")
46
46
  }
47
47
  ),
48
- i && /* @__PURE__ */ o.jsx(q, { children: i(x) }),
49
- p && /* @__PURE__ */ o.jsx(A, { children: p(x) }),
48
+ c && /* @__PURE__ */ o.jsx(q, { children: c(x) }),
49
+ i && /* @__PURE__ */ o.jsx(A, { children: i(x) }),
50
50
  (t || r && !n) && /* @__PURE__ */ o.jsx(
51
51
  D,
52
52
  {
53
- hasError: e,
53
+ $hasError: h,
54
54
  $isFocused: s,
55
- $shade: c,
55
+ $shade: e,
56
56
  value: n,
57
- background: h,
58
- hasLeftIcon: l,
59
- hasRightIcon: j,
60
- onlyPh: r && !t,
57
+ background: m,
58
+ $hasLeftIcon: p,
59
+ $hasRightIcon: j,
60
+ $onlyPh: r && !t,
61
61
  children: t || r
62
62
  }
63
63
  ),
64
- m && /* @__PURE__ */ o.jsx(G, { hasError: e, $isFocused: s, $shade: c, hasLeftIcon: l, children: m })
64
+ l && /* @__PURE__ */ o.jsx(G, { $hasError: h, $isFocused: s, $shade: e, $hasLeftIcon: p, children: l })
65
65
  ] });
66
66
  };
67
67
  export {
package/components/Input/Input/helpers.js CHANGED
@@ -24,7 +24,7 @@ const k = {
24
24
  teal: s.m500,
25
25
  purple: y.m500,
26
26
  pink: b.m500
27
- }, j = (r) => n(k, r, e.m500), q = ({ hasError: r, $shade: m, $isFocused: o, value: t, onlyPh: f }) => r ? typeof t == "string" && !t && !o ? e.m500 : p.m400 : o && !f ? m : e.m500, z = (r) => n(d, r, null), B = ({ hasLeftIcon: r, hasRightIcon: m }) => r && m ? "0 2.4rem" : r ? "0 0.6rem 0 2.4rem" : m ? "0 2.4rem 0 0.6rem" : "0 0.6rem";
27
+ }, j = (r) => n(k, r, e.m500), q = ({ $hasError: r, $shade: m, $isFocused: o, value: t, $onlyPh: f }) => r ? typeof t == "string" && !t && !o ? e.m500 : p.m400 : o && !f ? m : e.m500, z = (r) => n(d, r, null), B = ({ $hasLeftIcon: r, $hasRightIcon: m }) => r && m ? "0 2.4rem" : r ? "0 0.6rem 0 2.4rem" : m ? "0 2.4rem 0 0.6rem" : "0 0.6rem";
28
28
  export {
29
29
  j as getColor,
30
30
  q as getCssShade,
package/components/Input/Input/styles.js CHANGED
@@ -7,7 +7,7 @@ const g = t.input`
7
7
  height: 3rem;
8
8
  border-radius: 0.4rem;
9
9
  font-size: 1.4rem;
10
- border: 2px solid ${({ hasError: o }) => o ? m.m400 : a.m200};
10
+ border: 2px solid ${({ $hasError: o }) => o ? m.m400 : a.m200};
11
11
  padding: ${p};
12
12
  font-weight: 400;
13
13
  transition: border-color 0.3s ease;
@@ -33,7 +33,7 @@ const g = t.input`
33
33
 
34
34
  &:focus {
35
35
  border: 2px solid
36
- ${({ $shade: o, hasError: e }) => i({ $shade: o, hasError: e, $isFocused: !0 })};
36
+ ${({ $shade: o, $hasError: e }) => i({ $shade: o, $hasError: e, $isFocused: !0 })};
37
37
  outline: none;
38
38
  }
39
39
  `, h = t.p`
@@ -69,14 +69,14 @@ const k = t.div`
69
69
  pointer-events: none;
70
70
  color: ${i};
71
71
 
72
- ${({ $isFocused: o, value: e, onlyPh: s }) => !s && (o || e) ? n`
72
+ ${({ $isFocused: o, value: e, $onlyPh: s }) => !s && (o || e) ? n`
73
73
  top: -0.4rem;
74
- left: ${({ hasLeftIcon: r }) => r ? 2.2 : 0.5}rem;
74
+ left: ${({ $hasLeftIcon: r }) => r ? 2.2 : 0.5}rem;
75
75
  padding: 0 0.4rem;
76
76
  margin: 0;
77
77
  ` : n`
78
78
  top: 0.8rem;
79
- left: ${({ hasLeftIcon: r }) => r ? 2.2 : 0.5}rem;
79
+ left: ${({ $hasLeftIcon: r }) => r ? 2.2 : 0.5}rem;
80
80
  font-size: 1.4rem;
81
81
  `}
82
82
  `;
package/components/Pagination/Pagination.js CHANGED
@@ -1,58 +1,58 @@
1
- import { j as c } from "../../_virtual/jsx-runtime.js";
2
- import K from "../../node_modules/lodash-es/get.js";
1
+ import { j as i } from "../../_virtual/jsx-runtime.js";
2
+ import E from "../../node_modules/lodash-es/get.js";
3
3
  import h from "../../node_modules/lodash-es/range.js";
4
4
  import { PrevArrow as w, renderPageNum as x, NextArrow as A, renderThreeDots as I } from "./helpers.js";
5
- import R from "../../colors/index.js";
6
- import S from "../../colors/teal.js";
7
- import { ICON_SIZE_MAPPING as _, MEDIUM as v, SIZE_REM_MAPPING as $ } from "./constants.js";
8
- import { AllPages as M, MiddleLayer as y } from "./styles.js";
5
+ import K from "../../colors/index.js";
6
+ import R from "../../colors/teal.js";
7
+ import { ICON_SIZE_MAPPING as S, MEDIUM as _, SIZE_REM_MAPPING as v } from "./constants.js";
8
+ import { AllPages as D, MiddleLayer as M } from "./styles.js";
9
9
  const k = ({
10
10
  pageNumber: n,
11
- setPageNumber: D,
11
+ setPageNumber: $,
12
12
  totalPages: r,
13
- theme: E = "lime",
14
- size: i = v,
15
- isDisabled: j = !1
13
+ theme: y = "lime",
14
+ size: s = _,
15
+ isDisabled: l = !1
16
16
  }) => {
17
17
  const d = (e) => {
18
- e !== n && D(e);
18
+ e !== n && $(e);
19
19
  }, f = () => {
20
20
  n > 1 && d(n - 1);
21
21
  }, t = () => {
22
22
  n < r && d(n + 1);
23
- }, m = (e) => {
23
+ }, j = (e) => {
24
24
  console.log({ e }), ["ArrowLeft", "ArrowUp"].includes(e.code) && f(), ["ArrowRight", "ArrowDown"].includes(e.code) && t();
25
- }, o = K(R, E, S), l = $[i], s = _[i];
26
- return r <= 7 ? /* @__PURE__ */ c.jsxs(M, { onKeyDown: m, tabIndex: "0", isDisabled: j, children: [
27
- /* @__PURE__ */ c.jsx(w, { iconSize: s, shades: o, setPrevPage: f }),
28
- /* @__PURE__ */ c.jsx(y, { size: `${r * l}rem`, children: h(1, r + 1).map(
29
- x({ size: i, selected: n, shades: o, changePage: d })
25
+ }, o = E(K, y, R), m = v[s], c = S[s];
26
+ return r <= 7 ? /* @__PURE__ */ i.jsxs(D, { onKeyDown: j, tabIndex: "0", $isDisabled: l, children: [
27
+ /* @__PURE__ */ i.jsx(w, { iconSize: c, shades: o, setPrevPage: f }),
28
+ /* @__PURE__ */ i.jsx(M, { size: `${r * m}rem`, children: h(1, r + 1).map(
29
+ x({ size: s, selected: n, shades: o, changePage: d })
30
30
  ) }),
31
- /* @__PURE__ */ c.jsx(A, { iconSize: s, shades: o, setNextPage: t })
32
- ] }) : r < 10 || n < 4 || n > r - 3 && n <= r ? /* @__PURE__ */ c.jsxs(M, { onKeyDown: m, tabIndex: "0", isDisabled: j, children: [
33
- /* @__PURE__ */ c.jsx(w, { iconSize: s, shades: o, setPrevPage: f }),
34
- /* @__PURE__ */ c.jsxs(y, { size: `${9 * l}rem`, children: [
35
- h(1, 5).map(x({ size: i, selected: n, shades: o, changePage: d })),
31
+ /* @__PURE__ */ i.jsx(A, { iconSize: c, shades: o, setNextPage: t })
32
+ ] }) : r < 10 || n < 4 || n > r - 3 && n <= r ? /* @__PURE__ */ i.jsxs(D, { onKeyDown: j, tabIndex: "0", $isDisabled: l, children: [
33
+ /* @__PURE__ */ i.jsx(w, { iconSize: c, shades: o, setPrevPage: f }),
34
+ /* @__PURE__ */ i.jsxs(M, { size: `${9 * m}rem`, children: [
35
+ h(1, 5).map(x({ size: s, selected: n, shades: o, changePage: d })),
36
36
  I(),
37
37
  [r - 3, r - 2, r - 1, r].map(
38
- x({ size: i, selected: n, shades: o, changePage: d })
38
+ x({ size: s, selected: n, shades: o, changePage: d })
39
39
  )
40
40
  ] }),
41
- /* @__PURE__ */ c.jsx(A, { iconSize: s, shades: o, setNextPage: t })
42
- ] }) : /* @__PURE__ */ c.jsxs(M, { onKeyDown: m, tabIndex: "0", isDisabled: j, children: [
43
- /* @__PURE__ */ c.jsx(w, { iconSize: s, shades: o, setPrevPage: f }),
44
- /* @__PURE__ */ c.jsxs(y, { size: `${9 * l}rem`, children: [
45
- h(1, 3).map(x({ size: i, selected: n, shades: o, changePage: d })),
41
+ /* @__PURE__ */ i.jsx(A, { iconSize: c, shades: o, setNextPage: t })
42
+ ] }) : /* @__PURE__ */ i.jsxs(D, { onKeyDown: j, tabIndex: "0", $isDisabled: l, children: [
43
+ /* @__PURE__ */ i.jsx(w, { iconSize: c, shades: o, setPrevPage: f }),
44
+ /* @__PURE__ */ i.jsxs(M, { size: `${9 * m}rem`, children: [
45
+ h(1, 3).map(x({ size: s, selected: n, shades: o, changePage: d })),
46
46
  I(),
47
47
  [n - 1, n, n + 1].map(
48
- x({ size: i, selected: n, shades: o, changePage: d })
48
+ x({ size: s, selected: n, shades: o, changePage: d })
49
49
  ),
50
50
  I(),
51
51
  [r - 1, r].map(
52
- x({ size: i, selected: n, shades: o, changePage: d })
52
+ x({ size: s, selected: n, shades: o, changePage: d })
53
53
  )
54
54
  ] }),
55
- /* @__PURE__ */ c.jsx(A, { iconSize: s, shades: o, setNextPage: t })
55
+ /* @__PURE__ */ i.jsx(A, { iconSize: c, shades: o, setNextPage: t })
56
56
  ] });
57
57
  };
58
58
  export {
package/components/Pagination/helpers.js CHANGED
@@ -10,11 +10,11 @@ const R = ({ size: e, selected: i, shades: n, changePage: c }) => (o) => {
10
10
  p,
11
11
  {
12
12
  "data-testid": i === o ? "current-page" : `test-${o}`,
13
- isSelected: i === o,
13
+ $isSelected: i === o,
14
14
  onClick: d,
15
15
  shades: n,
16
- individualRemSize: l,
17
- fontRemSize: m,
16
+ $individualRemSize: l,
17
+ $fontRemSize: m,
18
18
  children: o
19
19
  },
20
20
  `page_${o}`
package/components/Pagination/styles.js CHANGED
@@ -22,21 +22,21 @@ const t = (r) => ({ shades: e }) => {
22
22
  min-width: 100%;
23
23
  width: 100%;
24
24
 
25
- ${({ isDisabled: r }) => r && i`
25
+ ${({ $isDisabled: r }) => r && i`
26
26
  pointer-events: none;
27
27
  opacity: 0.4;
28
28
  `};
29
29
  `, b = o.div`
30
- height: ${({ individualRemSize: r }) => `${r}rem`};
31
- width: ${({ individualRemSize: r }) => `${r}rem`};
30
+ height: ${({ $individualRemSize: r }) => `${r}rem`};
31
+ width: ${({ $individualRemSize: r }) => `${r}rem`};
32
32
  border-radius: 50%;
33
33
  display: flex;
34
34
  align-items: center;
35
35
  flex-direction: column;
36
36
  justify-content: center;
37
37
  text-align: center;
38
- font-size: ${({ fontRemSize: r }) => r}rem;
39
- ${({ isSelected: r }) => r ? i`
38
+ font-size: ${({ $fontRemSize: r }) => r}rem;
39
+ ${({ $isSelected: r }) => r ? i`
40
40
  cursor: auto;
41
41
  color: ${n};
42
42
  background-color: ${t(m)};
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "meticulous-ui",
3
- "version": "1.8.0",
3
+ "version": "1.8.2",
4
4
  "main": "dist/index.js",
5
5
  "module": "dist/index.js",
6
6
  "repository": {