meticulous-ui 2.0.0 → 2.0.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 (4) hide show
  1. package/README.md +12 -11
  2. package/components/Dropdown/Dropdown.js +55 -46
  3. package/components/Dropdown/styles.js +25 -18
  4. package/package.json +2 -1
package/README.md CHANGED
@@ -47,17 +47,18 @@ export default App;
47
47
 
48
48
  ## 📦 Components
49
49
 
50
- | Component | Description |
51
- | ------------- | ------------------------------------------- |
52
- | `Pagination` | Fully responsive pagination component |
53
- | `Toast` | Push 4 types of notifications on screen |
54
- | `Timer` | Renders analog / digital clock with alarm |
55
- | `OtpInput` | Gives inputs to enter and edit OTP |
56
- | `VideoPlayer` | Renders video with keyboard shortcuts |
57
- | `Input` | Renders input box to let user enter input |
58
- | `Dropdown` | Renders dropdown to select from options |
59
- | `Spinner` | Renders a spinner to show the loading state |
60
- | `Button` | Renders a button to click & take an action |
50
+ | Component | Description |
51
+ | ------------- | -------------------------------------------------- |
52
+ | `Pagination` | Fully responsive pagination component |
53
+ | `Toast` | Push 4 types of notifications on screen |
54
+ | `Timer` | Renders analog / digital clock with alarm |
55
+ | `OtpInput` | Gives inputs to enter and edit OTP |
56
+ | `VideoPlayer` | Renders video with keyboard shortcuts |
57
+ | `Input` | Renders input box to let user enter input |
58
+ | `Textarea` | Renders textarea box to let user enter description |
59
+ | `Dropdown` | Renders dropdown to select from options |
60
+ | `Spinner` | Renders a spinner to show the loading state |
61
+ | `Button` | Renders a button to click & take an action |
61
62
 
62
63
  ## 📦 Icon Components
63
64
 
package/components/Dropdown/Dropdown.js CHANGED
@@ -1,74 +1,83 @@
1
1
  import { j as o } from "../../_virtual/jsx-runtime.js";
2
- import { useState as h, useRef as g, useEffect as k, useLayoutEffect as y, createElement as z } from "react";
3
- import H from "../../node_modules/lodash-es/get.js";
4
- import p from "../../colors/grey.js";
5
- import L from "../MenuItem/MenuItem.js";
6
- import P from "../../colors/index.js";
7
- import I from "../../colors/blue.js";
8
- import M from "../Spinner/Spinner.js";
9
- import { DropdownWrapper as q, Box as A, PWrapper as F, ChevronDownWrapper as G, OptionWrapper as J, SpinnerWrapper as K } from "./styles.js";
10
- const oe = ({
11
- options: l,
12
- onChange: b,
2
+ import { useState as g, useRef as b, useEffect as F, useLayoutEffect as k, createElement as B } from "react";
3
+ import L from "../../node_modules/lodash-es/get.js";
4
+ import d from "../../colors/grey.js";
5
+ import P from "../MenuItem/MenuItem.js";
6
+ import M from "../../colors/index.js";
7
+ import V from "../../colors/blue.js";
8
+ import H from "../Spinner/Spinner.js";
9
+ import { DropdownWrapper as I, Box as q, PWrapper as A, ChevronDownWrapper as G, OptionWrapper as J, SpinnerWrapper as K } from "./styles.js";
10
+ const N = (t) => {
11
+ if (typeof t != "string") return t;
12
+ if (t.endsWith("px"))
13
+ return parseFloat(t);
14
+ if (t.endsWith("rem")) {
15
+ const p = parseFloat(t), r = parseFloat(getComputedStyle(document.documentElement).fontSize);
16
+ return p * r;
17
+ }
18
+ return parseFloat(t);
19
+ }, oe = ({
20
+ options: t,
21
+ onChange: p,
13
22
  value: r,
14
23
  width: n = "20rem",
15
- menuHeight: x = "20rem",
24
+ menuHeight: m = "20rem",
16
25
  placeholder: $,
17
- theme: w = "blue",
18
- isLoading: f,
19
- isDisabled: j,
26
+ theme: j = "blue",
27
+ isLoading: a,
28
+ isDisabled: w,
20
29
  loaderColor: C
21
30
  }) => {
22
- const [i, c] = h(!1), [R, u] = h("bottom"), s = g(null), m = g(null), O = () => {
23
- c((e) => !e);
31
+ const [s, l] = g(!1), [O, u] = g("bottom"), i = b(null), h = b(null), S = () => {
32
+ l((e) => !e);
24
33
  }, E = (e) => {
25
- e !== r && (b(e), c(!1));
34
+ e !== r && (p(e), l(!1));
26
35
  };
27
- k(() => {
28
- const e = (t) => {
29
- s.current && !s.current.contains(t.target) && c(!1);
36
+ F(() => {
37
+ const e = (c) => {
38
+ i.current && !i.current.contains(c.target) && l(!1);
30
39
  };
31
40
  return document.addEventListener("mousedown", e), () => document.removeEventListener("mousedown", e);
32
- }, []), y(() => {
33
- if (i && m.current && s.current) {
34
- const e = m.current.getBoundingClientRect(), t = s.current.getBoundingClientRect(), a = window.innerHeight - t.bottom;
35
- a < e.height + 8 && t.top > a ? u("top") : u("bottom");
41
+ }, []), k(() => {
42
+ if (s && h.current && i.current) {
43
+ const e = i.current.getBoundingClientRect(), c = window.innerHeight, f = N(m), x = c - e.bottom;
44
+ x < f + 8 && e.top > x ? u("top") : u("bottom");
36
45
  }
37
- }, [i]);
46
+ }, [s, m]);
38
47
  const {
39
- m50: D,
40
- m100: S,
41
- m200: W,
42
- m500: v
43
- } = H(P, w, I), B = ({ value: e, label: t, disabled: d }) => /* @__PURE__ */ z(
44
- L,
48
+ m50: W,
49
+ m100: R,
50
+ m200: y,
51
+ m500: z
52
+ } = L(M, j, V), D = ({ value: e, label: c, disabled: f }) => /* @__PURE__ */ B(
53
+ P,
45
54
  {
46
55
  value: e,
47
- label: t,
48
- isDisabled: d,
56
+ label: c,
57
+ isDisabled: f,
49
58
  onSelect: E,
50
59
  isSelected: e === r,
51
60
  key: e,
52
61
  width: n,
53
- selectedColor: W,
54
- hoverColor: D,
55
- activeColor: S
62
+ selectedColor: y,
63
+ hoverColor: W,
64
+ activeColor: R
56
65
  }
57
66
  );
58
67
  return /* @__PURE__ */ o.jsxs(
59
- q,
68
+ I,
60
69
  {
61
- ref: s,
70
+ ref: i,
62
71
  $width: n,
63
- $isLoading: f,
64
- $isDisabled: j,
72
+ $isLoading: a,
73
+ $isDisabled: w,
65
74
  children: [
66
- /* @__PURE__ */ o.jsxs(A, { $width: n, onClick: O, $isOpen: i, $border: v, children: [
67
- /* @__PURE__ */ o.jsx(F, { $width: n, color: r ? p.m700 : p.m500, size: "1.2rem", children: r ? l.find(({ value: e }) => r === e)?.label : $ }),
68
- /* @__PURE__ */ o.jsx(G, { color: p.m500, size: 22, $isOpen: i })
75
+ /* @__PURE__ */ o.jsxs(q, { $width: n, onClick: S, $isOpen: s, $border: z, children: [
76
+ /* @__PURE__ */ o.jsx(A, { $width: n, color: r ? d.m700 : d.m500, size: "1.2rem", children: r ? t.find(({ value: e }) => r === e)?.label : $ }),
77
+ /* @__PURE__ */ o.jsx(G, { color: d.m500, size: 22, $isOpen: s })
69
78
  ] }),
70
- i && /* @__PURE__ */ o.jsx(J, { ref: m, $width: n, $height: x, $top: R === "top", children: l.map(B) }),
71
- f && /* @__PURE__ */ o.jsx(K, { children: /* @__PURE__ */ o.jsx(M, { size: "small", color: C }) })
79
+ /* @__PURE__ */ o.jsx(J, { $isOpen: s, $width: n, $height: m, $top: O === "top", children: /* @__PURE__ */ o.jsx("div", { ref: h, children: t.map(D) }) }),
80
+ a && /* @__PURE__ */ o.jsx(K, { children: /* @__PURE__ */ o.jsx(H, { size: "small", color: C }) })
72
81
  ]
73
82
  }
74
83
  );
package/components/Dropdown/styles.js CHANGED
@@ -1,70 +1,77 @@
1
- import o, { css as e, keyframes as t } from "../../node_modules/styled-components/dist/styled-components.browser.esm.js";
1
+ import o, { css as t, keyframes as i } from "../../node_modules/styled-components/dist/styled-components.browser.esm.js";
2
2
  import n from "../../colors/grey.js";
3
- import m from "../Typography/P/P.js";
4
- import a from "../Icons/ChevronDown/ChevronDown.js";
3
+ import a from "../Typography/P/P.js";
4
+ import m from "../Icons/ChevronDown/ChevronDown.js";
5
5
  import { DEFAULT_BORDER as s } from "./constants.js";
6
6
  import p from "../../colors/white.js";
7
- const d = t`
7
+ const d = i`
8
8
  from {
9
9
  transform: rotate(0deg);
10
10
  }
11
11
  to {
12
12
  transform: rotate(180deg);
13
13
  }
14
- `, f = t`
14
+ `, c = i`
15
15
  from {
16
16
  transform: rotate(180deg);
17
17
  }
18
18
  to {
19
19
  transform: rotate(0deg);
20
20
  }
21
- `, g = o.div`
21
+ `, $ = o.div`
22
22
  max-width: ${({ $width: r }) => r};
23
23
  position: relative;
24
24
 
25
- ${({ $isLoading: r }) => r && e`
25
+ ${({ $isLoading: r }) => r && t`
26
26
  pointer-events: none;
27
27
  opacity: 0.8;
28
28
  `}
29
29
 
30
- ${({ $isDisabled: r }) => r && e`
30
+ ${({ $isDisabled: r }) => r && t`
31
31
  pointer-events: none;
32
32
  `}
33
33
  `, v = o.div`
34
34
  height: 2rem;
35
35
  width: ${({ $width: r }) => r};
36
36
  border-radius: 0.6rem;
37
- border: ${({ $isOpen: r, $border: i }) => r ? `2px solid ${i}` : `1px solid ${s}`};
37
+ border: ${({ $isOpen: r, $border: e }) => r ? `2px solid ${e}` : `1px solid ${s}`};
38
38
  padding: 0.4rem 0.6rem 0.4rem;
39
39
  display: flex;
40
40
  align-items: center;
41
41
  justify-content: space-between;
42
42
  cursor: pointer;
43
- `, u = o(m)`
43
+ `, x = o(a)`
44
44
  overflow: hidden;
45
45
  white-space: nowrap;
46
46
  text-overflow: ellipsis;
47
47
  max-width: calc(${({ $width: r }) => r} - 2rem);
48
48
  pointer-events: none;
49
- `, x = o(a)`
50
- animation: ${({ $isOpen: r }) => r ? d : f} 0.15s linear;
49
+ `, u = o(m)`
50
+ animation: ${({ $isOpen: r }) => r ? d : c} 0.15s linear;
51
51
  transform: rotate(${({ $isOpen: r }) => r ? 180 : 0}deg);
52
52
  `, y = o.div`
53
53
  border: 1px solid ${n.m700};
54
54
  width: calc(${({ $width: r }) => r} + 1rem);
55
- max-height: ${({ $height: r }) => r};
56
55
  overflow: auto;
57
56
  position: absolute;
58
57
  z-index: 1000;
59
58
  background-color: ${p};
60
59
  left: 0.15rem;
60
+ max-height: 0;
61
+ transition: max-height 0.15s ease-out;
62
+ opacity: 0;
63
+
64
+ ${({ $isOpen: r }) => r && t`
65
+ max-height: ${({ $height: e }) => e};
66
+ opacity: 1;
67
+ `};
61
68
 
62
- ${({ $top: r }) => r ? e`
69
+ ${({ $top: r }) => r ? t`
63
70
  bottom: 100%;
64
71
  border-top-right-radius: 0.6rem;
65
72
  border-top-left-radius: 0.6rem;
66
73
  border-bottom-width: 0;
67
- ` : e`
74
+ ` : t`
68
75
  top: 100%;
69
76
  border-bottom-right-radius: 0.6rem;
70
77
  border-bottom-left-radius: 0.6rem;
@@ -77,9 +84,9 @@ const d = t`
77
84
  `;
78
85
  export {
79
86
  v as Box,
80
- x as ChevronDownWrapper,
81
- g as DropdownWrapper,
87
+ u as ChevronDownWrapper,
88
+ $ as DropdownWrapper,
82
89
  y as OptionWrapper,
83
- u as PWrapper,
90
+ x as PWrapper,
84
91
  D as SpinnerWrapper
85
92
  };
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "meticulous-ui",
3
- "version": "2.0.0",
3
+ "version": "2.0.2",
4
4
  "main": "dist/index.js",
5
5
  "module": "dist/index.js",
6
6
  "repository": {
@@ -35,6 +35,7 @@
35
35
  "toasts",
36
36
  "button",
37
37
  "input",
38
+ "textarea",
38
39
  "notification",
39
40
  "dropdown",
40
41
  "spinner",