meticulous-ui 2.2.1 → 2.2.3

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 (9) hide show
  1. package/README.md +1 -0
  2. package/components/Input/Input/Input.js +36 -37
  3. package/components/Input/Input/styles.js +2 -2
  4. package/components/Input/Textarea/Textarea.js +42 -43
  5. package/components/Input/Textarea/styles.js +2 -2
  6. package/components/Pagination/Pagination.js +15 -15
  7. package/components/Pagination/helpers.js +15 -15
  8. package/components/Pagination/styles.js +1 -1
  9. package/package.json +1 -1
package/README.md CHANGED
@@ -55,6 +55,7 @@ export default App;
55
55
  | `OtpInput` | Gives inputs to enter and edit OTP |
56
56
  | `VideoPlayer` | Renders video with keyboard shortcuts |
57
57
  | `Input` | Renders input box to let user enter input |
58
+ | `Checkbox` | Renders checkbox to let user give boolean value |
58
59
  | `Textarea` | Renders textarea box to let user enter description |
59
60
  | `Dropdown` | Renders dropdown to select from options |
60
61
  | `Spinner` | Renders a spinner to show the loading state |
package/components/Input/Input/Input.js CHANGED
@@ -1,71 +1,70 @@
1
1
  import { j as o } from "../../../_virtual/jsx-runtime.js";
2
2
  import z from "../../../node_modules/lodash-es/omit.js";
3
3
  import { useState as H } from "react";
4
- import { Wrapper as P, InputBox as q, LeftIconWrapper as A, RightIconWrapper as D, Label as G, HelperText as J } from "./styles.js";
5
- import { getColor as K, getIcon as I } from "./helpers.js";
6
- import M from "../../../colors/white.js";
7
- import N from "../../../colors/grey.js";
8
- const Z = ({
4
+ import { Wrapper as P, InputBox as b, LeftIconWrapper as q, RightIconWrapper as A, Label as D, HelperText as G } from "./styles.js";
5
+ import { getColor as J, getIcon as j } from "./helpers.js";
6
+ import K from "../../../colors/white.js";
7
+ import M from "../../../colors/grey.js";
8
+ const Y = ({
9
9
  label: r,
10
- onChange: $,
10
+ onChange: I,
11
11
  value: t,
12
- type: g,
12
+ type: $,
13
13
  hasError: F,
14
14
  name: B = "input",
15
15
  color: C = "blue",
16
16
  size: y = "20",
17
17
  disableAutoComplete: L,
18
- helperText: m = "",
19
- background: s = "transparent",
20
- outerBackground: R = M,
21
- leftIcon: a,
22
- rightIcon: f,
23
- ...d
18
+ helperText: a = "",
19
+ background: l = "transparent",
20
+ outerBackground: R = K,
21
+ leftIcon: m,
22
+ rightIcon: d,
23
+ ...u
24
24
  }) => {
25
- const [n, u] = H(!1), e = K(C), W = () => u(!0), E = () => u(!1), S = (w) => {
26
- $(w);
27
- }, { placeholder: c } = d, x = { color: N.m500, size: 22 }, i = I(a), p = I(f), h = !!(a && i), j = !!(f && p), l = F;
25
+ const [n, f] = H(!1), s = J(C), W = () => f(!0), E = () => f(!1), S = (w) => {
26
+ I(w);
27
+ }, { placeholder: e } = u, x = { color: M.m500, size: 22 }, c = j(m), i = j(d), p = !!(m && c), g = !!(d && i), h = F, k = l;
28
28
  return /* @__PURE__ */ o.jsxs(P, { children: [
29
29
  /* @__PURE__ */ o.jsx(
30
- q,
30
+ b,
31
31
  {
32
- type: g,
32
+ type: $,
33
33
  name: B,
34
- $hasError: l,
34
+ $hasError: h,
35
35
  size: y,
36
36
  value: t,
37
37
  $isFocused: n,
38
- $shade: e,
39
- background: s,
40
- $hasLeftIcon: h,
41
- $hasRightIcon: j,
38
+ $shade: s,
39
+ $background: k,
40
+ $hasLeftIcon: p,
41
+ $hasRightIcon: g,
42
42
  onFocus: W,
43
43
  onBlur: E,
44
44
  onChange: S,
45
45
  autoComplete: L ? "off" : "on",
46
- ...z(d, "placeholder")
46
+ ...z(u, "placeholder")
47
47
  }
48
48
  ),
49
+ c && /* @__PURE__ */ o.jsx(q, { children: c(x) }),
49
50
  i && /* @__PURE__ */ o.jsx(A, { children: i(x) }),
50
- p && /* @__PURE__ */ o.jsx(D, { children: p(x) }),
51
- (r || c && !t) && /* @__PURE__ */ o.jsx(
52
- G,
51
+ (r || e && !t) && /* @__PURE__ */ o.jsx(
52
+ D,
53
53
  {
54
- $hasError: l,
54
+ $hasError: h,
55
55
  $isFocused: n,
56
- $shade: e,
56
+ $shade: s,
57
57
  value: t,
58
- background: s,
59
- $outerBackground: n || t ? R : s,
60
- $hasLeftIcon: h,
61
- $hasRightIcon: j,
62
- $onlyPh: c && !r,
63
- children: r || c
58
+ $outerBackground: n || t ? R : l,
59
+ $hasLeftIcon: p,
60
+ $hasRightIcon: g,
61
+ $onlyPh: e && !r,
62
+ children: r || e
64
63
  }
65
64
  ),
66
- m && /* @__PURE__ */ o.jsx(J, { $hasError: l, $isFocused: n, $shade: e, $hasLeftIcon: h, children: m })
65
+ a && /* @__PURE__ */ o.jsx(G, { $hasError: h, $isFocused: n, $shade: s, $hasLeftIcon: p, children: a })
67
66
  ] });
68
67
  };
69
68
  export {
70
- Z as default
69
+ Y as default
71
70
  };
package/components/Input/Input/styles.js CHANGED
@@ -11,7 +11,7 @@ const g = e.input`
11
11
  padding: ${p};
12
12
  font-weight: 400;
13
13
  transition: border-color 0.3s ease;
14
- background-color: ${({ background: o }) => o} !important;
14
+ background-color: ${({ $background: o }) => o} !important;
15
15
  overflow: hidden;
16
16
 
17
17
  &:-webkit-autofill,
@@ -27,7 +27,7 @@ const g = e.input`
27
27
  color: ${m.m500};
28
28
  font-weight: 300;
29
29
  font-size: 1.4rem;
30
- background-color: ${({ background: o }) => o};
30
+ background-color: ${({ $background: o }) => o};
31
31
  pointer-events: none;
32
32
  }
33
33
 
package/components/Input/Textarea/Textarea.js CHANGED
@@ -1,77 +1,76 @@
1
1
  import { j as e } from "../../../_virtual/jsx-runtime.js";
2
- import z from "../../../node_modules/lodash-es/omit.js";
3
- import { useState as A, useRef as I } from "react";
4
- import { Wrapper as L, TextareaBox as N, Parent as O, Label as S, HelperText as W } from "./styles.js";
5
- import { getColor as q } from "./helpers.js";
6
- import G from "../../../colors/white.js";
7
- const X = ({
2
+ import k from "../../../node_modules/lodash-es/omit.js";
3
+ import { useState as z, useRef as A } from "react";
4
+ import { Wrapper as I, TextareaBox as L, Parent as N, Label as O, HelperText as S } from "./styles.js";
5
+ import { getColor as W } from "./helpers.js";
6
+ import q from "../../../colors/white.js";
7
+ const V = ({
8
8
  label: s,
9
- onChange: m,
9
+ onChange: p,
10
10
  value: t,
11
- type: d,
12
- hasError: u,
13
- name: j = "textarea",
14
- color: $ = "blue",
15
- helperText: a = "",
16
- background: n = "transparent",
17
- outerBackground: g = G,
18
- isDynamic: c,
11
+ type: u,
12
+ hasError: m,
13
+ name: $ = "textarea",
14
+ color: g = "blue",
15
+ helperText: h = "",
16
+ background: i = "transparent",
17
+ outerBackground: j = q,
18
+ isDynamic: n,
19
19
  isResizeNone: B,
20
20
  rows: F = "2",
21
21
  cols: R = "20",
22
22
  ...x
23
23
  }) => {
24
- const [o, f] = A(!1), l = q($), p = I(null), C = () => f(!0), H = () => f(!1), w = (P) => {
25
- if (c) {
26
- const r = p.current;
24
+ const [o, d] = z(!1), c = W(g), f = A(null), C = () => d(!0), H = () => d(!1), w = (T) => {
25
+ if (n) {
26
+ const r = f.current;
27
27
  if (r) {
28
28
  r.style.height = "0px";
29
- const T = r.scrollHeight;
30
- r.style.height = `${T}px`;
29
+ const b = r.scrollHeight;
30
+ r.style.height = `${b}px`;
31
31
  }
32
32
  }
33
- m(P);
34
- }, { placeholder: h } = x, i = u, y = c, E = c ? {} : { rows: F };
35
- return /* @__PURE__ */ e.jsxs(L, { children: [
33
+ p(T);
34
+ }, { placeholder: l } = x, a = m, y = n, E = i, P = n ? {} : { rows: F };
35
+ return /* @__PURE__ */ e.jsxs(I, { children: [
36
36
  /* @__PURE__ */ e.jsx(
37
- N,
37
+ L,
38
38
  {
39
- type: d,
40
- name: j,
41
- $hasError: i,
39
+ type: u,
40
+ name: $,
41
+ $hasError: a,
42
42
  value: t,
43
43
  $isFocused: o,
44
- $shade: l,
44
+ $shade: c,
45
45
  $isDynamic: y,
46
- background: n,
46
+ $background: E,
47
47
  cols: R,
48
48
  $isResizeNone: B,
49
- ...E,
50
- ref: p,
49
+ ...P,
50
+ ref: f,
51
51
  onFocus: C,
52
52
  onBlur: H,
53
53
  onChange: w,
54
- ...z(x, "placeholder")
54
+ ...k(x, "placeholder")
55
55
  }
56
56
  ),
57
- /* @__PURE__ */ e.jsxs(O, { children: [
58
- (s || h && !t) && /* @__PURE__ */ e.jsx(
59
- S,
57
+ /* @__PURE__ */ e.jsxs(N, { children: [
58
+ (s || l && !t) && /* @__PURE__ */ e.jsx(
59
+ O,
60
60
  {
61
- $hasError: i,
61
+ $hasError: a,
62
62
  $isFocused: o,
63
- $shade: l,
63
+ $shade: c,
64
64
  value: t,
65
- background: n,
66
- $outerBackground: o || t ? g : n,
67
- $onlyPh: h && !s,
68
- children: s || h
65
+ $outerBackground: o || t ? j : i,
66
+ $onlyPh: l && !s,
67
+ children: s || l
69
68
  }
70
69
  ),
71
- a && /* @__PURE__ */ e.jsx(W, { $hasError: i, $isFocused: o, $shade: l, children: a })
70
+ h && /* @__PURE__ */ e.jsx(S, { $hasError: a, $isFocused: o, $shade: c, children: h })
72
71
  ] })
73
72
  ] });
74
73
  };
75
74
  export {
76
- X as default
75
+ V as default
77
76
  };
package/components/Input/Textarea/styles.js CHANGED
@@ -10,7 +10,7 @@ const b = o.textarea`
10
10
  padding: 0.6rem;
11
11
  font-weight: 400;
12
12
  transition: border-color 0.3s ease;
13
- background-color: ${({ background: e }) => e} !important;
13
+ background-color: ${({ $background: e }) => e} !important;
14
14
  min-height: 1.4rem;
15
15
  min-width: 3rem;
16
16
 
@@ -37,7 +37,7 @@ const b = o.textarea`
37
37
  color: ${l.m500};
38
38
  font-weight: 300;
39
39
  font-size: 1.4rem;
40
- background-color: ${({ background: e }) => e};
40
+ background-color: ${({ $background: e }) => e};
41
41
  pointer-events: none;
42
42
  }
43
43
 
package/components/Pagination/Pagination.js CHANGED
@@ -1,7 +1,7 @@
1
1
  import { j as i } from "../../_virtual/jsx-runtime.js";
2
2
  import E from "../../node_modules/lodash-es/get.js";
3
3
  import h from "../../node_modules/lodash-es/range.js";
4
- import { PrevArrow as w, renderPageNum as x, NextArrow as A, renderThreeDots as I } from "./helpers.js";
4
+ import { PrevArrow as w, renderPageNum as e, NextArrow as A, renderThreeDots as I } from "./helpers.js";
5
5
  import K from "../../colors/index.js";
6
6
  import R from "../../colors/teal.js";
7
7
  import { ICON_SIZE_MAPPING as S, MEDIUM as _, SIZE_REM_MAPPING as v } from "./constants.js";
@@ -12,44 +12,44 @@ const k = ({
12
12
  totalPages: r,
13
13
  theme: y = "lime",
14
14
  size: s = _,
15
- isDisabled: l = !1
15
+ isDisabled: j = !1
16
16
  }) => {
17
- const d = (e) => {
18
- e !== n && $(e);
17
+ const d = (x) => {
18
+ x !== n && $(x);
19
19
  }, f = () => {
20
20
  n > 1 && d(n - 1);
21
21
  }, t = () => {
22
22
  n < r && d(n + 1);
23
- }, j = (e) => {
24
- console.log({ e }), ["ArrowLeft", "ArrowUp"].includes(e.code) && f(), ["ArrowRight", "ArrowDown"].includes(e.code) && t();
23
+ }, l = (x) => {
24
+ ["ArrowLeft", "ArrowUp"].includes(x.code) && f(), ["ArrowRight", "ArrowDown"].includes(x.code) && t();
25
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: [
26
+ return r <= 7 ? /* @__PURE__ */ i.jsxs(D, { onKeyDown: l, tabIndex: "0", $isDisabled: j, children: [
27
27
  /* @__PURE__ */ i.jsx(w, { iconSize: c, shades: o, setPrevPage: f }),
28
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 })
29
+ e({ size: s, selected: n, shades: o, changePage: d })
30
30
  ) }),
31
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: [
32
+ ] }) : r < 10 || n < 4 || n > r - 3 && n <= r ? /* @__PURE__ */ i.jsxs(D, { onKeyDown: l, tabIndex: "0", $isDisabled: j, children: [
33
33
  /* @__PURE__ */ i.jsx(w, { iconSize: c, shades: o, setPrevPage: f }),
34
34
  /* @__PURE__ */ i.jsxs(M, { size: `${9 * m}rem`, children: [
35
- h(1, 5).map(x({ size: s, selected: n, shades: o, changePage: d })),
35
+ h(1, 5).map(e({ size: s, selected: n, shades: o, changePage: d })),
36
36
  I(),
37
37
  [r - 3, r - 2, r - 1, r].map(
38
- x({ size: s, selected: n, shades: o, changePage: d })
38
+ e({ size: s, selected: n, shades: o, changePage: d })
39
39
  )
40
40
  ] }),
41
41
  /* @__PURE__ */ i.jsx(A, { iconSize: c, shades: o, setNextPage: t })
42
- ] }) : /* @__PURE__ */ i.jsxs(D, { onKeyDown: j, tabIndex: "0", $isDisabled: l, children: [
42
+ ] }) : /* @__PURE__ */ i.jsxs(D, { onKeyDown: l, tabIndex: "0", $isDisabled: j, children: [
43
43
  /* @__PURE__ */ i.jsx(w, { iconSize: c, shades: o, setPrevPage: f }),
44
44
  /* @__PURE__ */ i.jsxs(M, { size: `${9 * m}rem`, children: [
45
- h(1, 3).map(x({ size: s, selected: n, shades: o, changePage: d })),
45
+ h(1, 3).map(e({ size: s, selected: n, shades: o, changePage: d })),
46
46
  I(),
47
47
  [n - 1, n, n + 1].map(
48
- x({ size: s, selected: n, shades: o, changePage: d })
48
+ e({ size: s, selected: n, shades: o, changePage: d })
49
49
  ),
50
50
  I(),
51
51
  [r - 1, r].map(
52
- x({ size: s, selected: n, shades: o, changePage: d })
52
+ e({ size: s, selected: n, shades: o, changePage: d })
53
53
  )
54
54
  ] }),
55
55
  /* @__PURE__ */ i.jsx(A, { iconSize: c, shades: o, setNextPage: t })
package/components/Pagination/helpers.js CHANGED
@@ -1,32 +1,32 @@
1
1
  import { j as r } from "../../_virtual/jsx-runtime.js";
2
2
  import s from "../Ripple/Ripple.js";
3
- import { FONT_SIZE_MAPPING as x, SIZE_REM_MAPPING as h } from "./constants.js";
4
- import { ClickableChevronLeft as j, Page as p, ClickableChevronRight as C, P as t } from "./styles.js";
5
- const R = ({ size: e, selected: i, shades: n, changePage: c }) => (o) => {
6
- const l = h[e], m = x[e], d = () => {
7
- c(o);
3
+ import { FONT_SIZE_MAPPING as h, SIZE_REM_MAPPING as j } from "./constants.js";
4
+ import { ClickableChevronLeft as p, Page as C, ClickableChevronRight as a, P as t } from "./styles.js";
5
+ const $ = ({ size: e, selected: o, shades: n, changePage: c }) => (i) => {
6
+ const l = j[e], d = h[e], m = n, x = () => {
7
+ c(i);
8
8
  };
9
9
  return /* @__PURE__ */ r.jsx(
10
- p,
10
+ C,
11
11
  {
12
- "data-testid": i === o ? "current-page" : `test-${o}`,
13
- $isSelected: i === o,
14
- onClick: d,
15
- shades: n,
12
+ "data-testid": o === i ? "current-page" : `test-${i}`,
13
+ $isSelected: o === i,
14
+ onClick: x,
15
+ $shades: m,
16
16
  $individualRemSize: l,
17
- $fontRemSize: m,
18
- children: o
17
+ $fontRemSize: d,
18
+ children: i
19
19
  },
20
- `page_${o}`
20
+ `page_${i}`
21
21
  );
22
22
  }, u = () => /* @__PURE__ */ r.jsxs(r.Fragment, { children: [
23
23
  /* @__PURE__ */ r.jsx(t, { children: "." }),
24
24
  /* @__PURE__ */ r.jsx(t, { children: "." }),
25
25
  /* @__PURE__ */ r.jsx(t, { children: "." })
26
- ] }), N = ({ iconSize: e, shades: i, setPrevPage: n }) => /* @__PURE__ */ r.jsx(s, { rippleColor: i.m50, children: /* @__PURE__ */ r.jsx(j, { size: e, onClick: n }) }), S = ({ iconSize: e, shades: i, setNextPage: n }) => /* @__PURE__ */ r.jsx(s, { rippleColor: i.m50, children: /* @__PURE__ */ r.jsx(C, { size: e, onClick: n }) });
26
+ ] }), N = ({ iconSize: e, shades: o, setPrevPage: n }) => /* @__PURE__ */ r.jsx(s, { rippleColor: o.m50, children: /* @__PURE__ */ r.jsx(p, { size: e, onClick: n }) }), S = ({ iconSize: e, shades: o, setNextPage: n }) => /* @__PURE__ */ r.jsx(s, { rippleColor: o.m50, children: /* @__PURE__ */ r.jsx(a, { size: e, onClick: n }) });
27
27
  export {
28
28
  S as NextArrow,
29
29
  N as PrevArrow,
30
- R as renderPageNum,
30
+ $ as renderPageNum,
31
31
  u as renderThreeDots
32
32
  };
package/components/Pagination/styles.js CHANGED
@@ -5,7 +5,7 @@ import c from "../../colors/grey.js";
5
5
  import n from "../../colors/white.js";
6
6
  import d from "../../colors/black.js";
7
7
  import { SELECTED_BG as m, NOT_SELECTED_BG as l, ACTIVE_NOT_SELECTED_BG as s } from "./constants.js";
8
- const t = (r) => ({ shades: e }) => {
8
+ const t = (r) => ({ $shades: e }) => {
9
9
  if (["#FFFFFF"].includes(e))
10
10
  return d.m900;
11
11
  if (r === m)
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "meticulous-ui",
3
- "version": "2.2.1",
3
+ "version": "2.2.3",
4
4
  "main": "dist/index.js",
5
5
  "module": "dist/index.js",
6
6
  "repository": {