meticulous-ui 2.0.1 → 2.0.3

package/components/Dropdown/Dropdown.js

@@ -1,74 +1,83 @@
 import { j as o } from "../../_virtual/jsx-runtime.js";
-import { useState as h, useRef as g, useEffect as k, useLayoutEffect as y, createElement as z } from "react";
-import H from "../../node_modules/lodash-es/get.js";
-import p from "../../colors/grey.js";
-import L from "../MenuItem/MenuItem.js";
-import P from "../../colors/index.js";
-import I from "../../colors/blue.js";
-import M from "../Spinner/Spinner.js";
-import { DropdownWrapper as q, Box as A, PWrapper as F, ChevronDownWrapper as G, OptionWrapper as J, SpinnerWrapper as K } from "./styles.js";
-const oe = ({
-  options: l,
-  onChange: b,
+import { useState as g, useRef as b, useEffect as F, useLayoutEffect as k, createElement as B } from "react";
+import L from "../../node_modules/lodash-es/get.js";
+import d from "../../colors/grey.js";
+import P from "../MenuItem/MenuItem.js";
+import M from "../../colors/index.js";
+import V from "../../colors/blue.js";
+import H from "../Spinner/Spinner.js";
+import { DropdownWrapper as I, Box as q, PWrapper as A, ChevronDownWrapper as G, OptionWrapper as J, SpinnerWrapper as K } from "./styles.js";
+const N = (t) => {
+  if (typeof t != "string") return t;
+  if (t.endsWith("px"))
+    return parseFloat(t);
+  if (t.endsWith("rem")) {
+    const p = parseFloat(t), r = parseFloat(getComputedStyle(document.documentElement).fontSize);
+    return p * r;
+  }
+  return parseFloat(t);
+}, oe = ({
+  options: t,
+  onChange: p,
   value: r,
   width: n = "20rem",
-  menuHeight: x = "20rem",
+  menuHeight: m = "20rem",
   placeholder: $,
-  theme: w = "blue",
-  isLoading: f,
-  isDisabled: j,
+  theme: j = "blue",
+  isLoading: a,
+  isDisabled: w,
   loaderColor: C
 }) => {
-  const [i, c] = h(!1), [R, u] = h("bottom"), s = g(null), m = g(null), O = () => {
-    c((e) => !e);
+  const [s, l] = g(!1), [O, u] = g("bottom"), i = b(null), h = b(null), S = () => {
+    l((e) => !e);
   }, E = (e) => {
-    e !== r && (b(e), c(!1));
+    e !== r && (p(e), l(!1));
   };
-  k(() => {
-    const e = (t) => {
-      s.current && !s.current.contains(t.target) && c(!1);
+  F(() => {
+    const e = (c) => {
+      i.current && !i.current.contains(c.target) && l(!1);
     };
     return document.addEventListener("mousedown", e), () => document.removeEventListener("mousedown", e);
-  }, []), y(() => {
-    if (i && m.current && s.current) {
-      const e = m.current.getBoundingClientRect(), t = s.current.getBoundingClientRect(), a = window.innerHeight - t.bottom;
-      a < e.height + 8 && t.top > a ? u("top") : u("bottom");
+  }, []), k(() => {
+    if (s && h.current && i.current) {
+      const e = i.current.getBoundingClientRect(), c = window.innerHeight, f = N(m), x = c - e.bottom;
+      x < f + 8 && e.top > x ? u("top") : u("bottom");
     }
-  }, [i]);
+  }, [s, m]);
   const {
-    m50: D,
-    m100: S,
-    m200: W,
-    m500: v
-  } = H(P, w, I), B = ({ value: e, label: t, disabled: d }) => /* @__PURE__ */ z(
-    L,
+    m50: W,
+    m100: R,
+    m200: y,
+    m500: z
+  } = L(M, j, V), D = ({ value: e, label: c, disabled: f }) => /* @__PURE__ */ B(
+    P,
     {
       value: e,
-      label: t,
-      isDisabled: d,
+      label: c,
+      isDisabled: f,
       onSelect: E,
       isSelected: e === r,
       key: e,
       width: n,
-      selectedColor: W,
-      hoverColor: D,
-      activeColor: S
+      selectedColor: y,
+      hoverColor: W,
+      activeColor: R
     }
   );
   return /* @__PURE__ */ o.jsxs(
-    q,
+    I,
     {
-      ref: s,
+      ref: i,
       $width: n,
-      $isLoading: f,
-      $isDisabled: j,
+      $isLoading: a,
+      $isDisabled: w,
       children: [
-        /* @__PURE__ */ o.jsxs(A, { $width: n, onClick: O, $isOpen: i, $border: v, children: [
-          /* @__PURE__ */ o.jsx(F, { $width: n, color: r ? p.m700 : p.m500, size: "1.2rem", children: r ? l.find(({ value: e }) => r === e)?.label : $ }),
-          /* @__PURE__ */ o.jsx(G, { color: p.m500, size: 22, $isOpen: i })
+        /* @__PURE__ */ o.jsxs(q, { $width: n, onClick: S, $isOpen: s, $border: z, children: [
+          /* @__PURE__ */ o.jsx(A, { $width: n, color: r ? d.m700 : d.m500, size: "1.2rem", children: r ? t.find(({ value: e }) => r === e)?.label : $ }),
+          /* @__PURE__ */ o.jsx(G, { color: d.m500, size: 22, $isOpen: s })
         ] }),
-        i && /* @__PURE__ */ o.jsx(J, { ref: m, $width: n, $height: x, $top: R === "top", children: l.map(B) }),
-        f && /* @__PURE__ */ o.jsx(K, { children: /* @__PURE__ */ o.jsx(M, { size: "small", color: C }) })
+        /* @__PURE__ */ o.jsx(J, { $isOpen: s, $width: n, $height: m, $top: O === "top", children: /* @__PURE__ */ o.jsx("div", { ref: h, children: t.map(D) }) }),
+        a && /* @__PURE__ */ o.jsx(K, { children: /* @__PURE__ */ o.jsx(H, { size: "small", color: C }) })
       ]
     }
   );

package/components/Dropdown/styles.js

@@ -1,70 +1,77 @@
-import o, { css as e, keyframes as t } from "../../node_modules/styled-components/dist/styled-components.browser.esm.js";
+import o, { css as t, keyframes as i } from "../../node_modules/styled-components/dist/styled-components.browser.esm.js";
 import n from "../../colors/grey.js";
-import m from "../Typography/P/P.js";
-import a from "../Icons/ChevronDown/ChevronDown.js";
+import a from "../Typography/P/P.js";
+import m from "../Icons/ChevronDown/ChevronDown.js";
 import { DEFAULT_BORDER as s } from "./constants.js";
 import p from "../../colors/white.js";
-const d = t`
+const d = i`
   from {
     transform: rotate(0deg);
   }
   to {
     transform: rotate(180deg);
   }
-`, f = t`
+`, c = i`
   from {
     transform: rotate(180deg);
   }
   to {
     transform: rotate(0deg);
   }
-`, g = o.div`
+`, $ = o.div`
   max-width: ${({ $width: r }) => r};
   position: relative;
 
-  ${({ $isLoading: r }) => r && e`
+  ${({ $isLoading: r }) => r && t`
       pointer-events: none;
       opacity: 0.8;
     `}
 
-  ${({ $isDisabled: r }) => r && e`
+  ${({ $isDisabled: r }) => r && t`
       pointer-events: none;
     `}
 `, v = o.div`
   height: 2rem;
   width: ${({ $width: r }) => r};
   border-radius: 0.6rem;
-  border: ${({ $isOpen: r, $border: i }) => r ? `2px solid ${i}` : `1px solid ${s}`};
+  border: ${({ $isOpen: r, $border: e }) => r ? `2px solid ${e}` : `1px solid ${s}`};
   padding: 0.4rem 0.6rem 0.4rem;
   display: flex;
   align-items: center;
   justify-content: space-between;
   cursor: pointer;
-`, u = o(m)`
+`, x = o(a)`
   overflow: hidden;
   white-space: nowrap;
   text-overflow: ellipsis;
   max-width: calc(${({ $width: r }) => r} - 2rem);
   pointer-events: none;
-`, x = o(a)`
-  animation: ${({ $isOpen: r }) => r ? d : f} 0.15s linear;
+`, u = o(m)`
+  animation: ${({ $isOpen: r }) => r ? d : c} 0.15s linear;
   transform: rotate(${({ $isOpen: r }) => r ? 180 : 0}deg);
 `, y = o.div`
   border: 1px solid ${n.m700};
   width: calc(${({ $width: r }) => r} + 1rem);
-  max-height: ${({ $height: r }) => r};
   overflow: auto;
   position: absolute;
   z-index: 1000;
   background-color: ${p};
   left: 0.15rem;
+  max-height: 0;
+  transition: max-height 0.15s ease-out;
+  opacity: 0;
+
+  ${({ $isOpen: r }) => r && t`
+      max-height: ${({ $height: e }) => e};
+      opacity: 1;
+    `};
 
-  ${({ $top: r }) => r ? e`
+  ${({ $top: r }) => r ? t`
           bottom: 100%;
           border-top-right-radius: 0.6rem;
           border-top-left-radius: 0.6rem;
           border-bottom-width: 0;
-        ` : e`
+        ` : t`
           top: 100%;
           border-bottom-right-radius: 0.6rem;
           border-bottom-left-radius: 0.6rem;
@@ -77,9 +84,9 @@ const d = t`
 `;
 export {
   v as Box,
-  x as ChevronDownWrapper,
-  g as DropdownWrapper,
+  u as ChevronDownWrapper,
+  $ as DropdownWrapper,
   y as OptionWrapper,
-  u as PWrapper,
+  x as PWrapper,
   D as SpinnerWrapper
 };

package/components/Input/Input/Input.js

@@ -7,10 +7,10 @@ import M from "../../../colors/white.js";
 import N from "../../../colors/grey.js";
 const Z = ({
   label: r,
-  onChange: g,
+  onChange: $,
   value: t,
-  type: F,
-  hasError: $,
+  type: g,
+  hasError: F,
   name: B = "input",
   color: C = "blue",
   size: y = "20",
@@ -23,13 +23,13 @@ const Z = ({
   ...d
 }) => {
   const [n, u] = H(!1), e = K(C), W = () => u(!0), E = () => u(!1), S = (w) => {
-    g(w);
-  }, { placeholder: c } = d, x = { color: N.m500, size: 22 }, i = I(a), p = I(f), h = !!(a && i), j = !!(f && p), l = $;
+    $(w);
+  }, { placeholder: c } = d, x = { color: N.m500, size: 22 }, i = I(a), p = I(f), h = !!(a && i), j = !!(f && p), l = F;
   return /* @__PURE__ */ o.jsxs(P, { children: [
     /* @__PURE__ */ o.jsx(
       q,
       {
-        type: F,
+        type: g,
         name: B,
         $hasError: l,
         size: y,
@@ -56,7 +56,7 @@ const Z = ({
         $shade: e,
         value: t,
         background: s,
-        outerBackground: n || t ? R : s,
+        $outerBackground: n || t ? R : s,
         $hasLeftIcon: h,
         $hasRightIcon: j,
         $onlyPh: c && !r,

package/components/Input/Input/styles.js

@@ -62,7 +62,7 @@ const k = e.div`
   top: -0.4rem;
   left: 0.5rem;
   font-size: 0.8rem;
-  background-color: ${({ outerBackground: o }) => o};
+  background-color: ${({ $outerBackground: o }) => o};
   border-radius: 0.4rem;
   margin: 0 0.4rem;
   transition: 0.25s;

package/components/Input/Textarea/Textarea.js

@@ -1,9 +1,9 @@
 import { j as e } from "../../../_virtual/jsx-runtime.js";
-import A from "../../../node_modules/lodash-es/omit.js";
-import { useState as I, useRef as L } from "react";
-import { Wrapper as O, TextareaBox as S, Parent as W, Label as q, HelperText as z } from "./styles.js";
-import { getColor as G } from "./helpers.js";
-import J from "../../../colors/white.js";
+import z from "../../../node_modules/lodash-es/omit.js";
+import { useState as A, useRef as I } from "react";
+import { Wrapper as L, TextareaBox as N, Parent as O, Label as S, HelperText as W } from "./styles.js";
+import { getColor as q } from "./helpers.js";
+import G from "../../../colors/white.js";
 const X = ({
   label: s,
   onChange: m,
@@ -11,17 +11,17 @@ const X = ({
   type: d,
   hasError: u,
   name: j = "textarea",
-  color: g = "blue",
-  helperText: i = "",
+  color: $ = "blue",
+  helperText: a = "",
   background: n = "transparent",
-  outerBackground: $ = J,
+  outerBackground: g = G,
   isDynamic: c,
   isResizeNone: B,
   rows: F = "2",
-  cols: C = "20",
+  cols: R = "20",
   ...x
 }) => {
-  const [o, f] = I(!1), l = G(g), p = L(null), H = () => f(!0), R = () => f(!1), w = (P) => {
+  const [o, f] = A(!1), l = q($), p = I(null), C = () => f(!0), H = () => f(!1), w = (P) => {
     if (c) {
       const r = p.current;
       if (r) {
@@ -31,44 +31,44 @@ const X = ({
       }
     }
     m(P);
-  }, { placeholder: h } = x, a = u, y = c, E = c ? {} : { rows: F };
-  return /* @__PURE__ */ e.jsxs(O, { children: [
+  }, { placeholder: h } = x, i = u, y = c, E = c ? {} : { rows: F };
+  return /* @__PURE__ */ e.jsxs(L, { children: [
     /* @__PURE__ */ e.jsx(
-      S,
+      N,
       {
         type: d,
         name: j,
-        $hasError: a,
+        $hasError: i,
         value: t,
         $isFocused: o,
         $shade: l,
         $isDynamic: y,
         background: n,
-        cols: C,
-        isResizeNone: B,
+        cols: R,
+        $isResizeNone: B,
         ...E,
         ref: p,
-        onFocus: H,
-        onBlur: R,
+        onFocus: C,
+        onBlur: H,
         onChange: w,
-        ...A(x, "placeholder")
+        ...z(x, "placeholder")
       }
     ),
-    /* @__PURE__ */ e.jsxs(W, { children: [
+    /* @__PURE__ */ e.jsxs(O, { children: [
       (s || h && !t) && /* @__PURE__ */ e.jsx(
-        q,
+        S,
         {
-          $hasError: a,
+          $hasError: i,
           $isFocused: o,
           $shade: l,
           value: t,
           background: n,
-          outerBackground: o || t ? $ : n,
+          $outerBackground: o || t ? g : n,
           $onlyPh: h && !s,
           children: s || h
         }
       ),
-      i && /* @__PURE__ */ e.jsx(z, { $hasError: a, $isFocused: o, $shade: l, children: i })
+      a && /* @__PURE__ */ e.jsx(W, { $hasError: i, $isFocused: o, $shade: l, children: a })
     ] })
   ] });
 };

package/components/Input/Textarea/styles.js

@@ -14,7 +14,7 @@ const b = o.textarea`
   min-height: 1.4rem;
   min-width: 3rem;
 
-  ${({ isResizeNone: e }) => e && r`
+  ${({ $isResizeNone: e }) => e && r`
       resize: none;
     `}
 
@@ -59,7 +59,7 @@ const b = o.textarea`
   top: -0.4rem;
   left: 0.5rem;
   font-size: 0.8rem;
-  background-color: ${({ outerBackground: e }) => e};
+  background-color: ${({ $outerBackground: e }) => e};
   border-radius: 0.4rem;
   margin: 0 0.4rem;
   transition: 0.25s;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "meticulous-ui",
-  "version": "2.0.1",
+  "version": "2.0.3",
   "main": "dist/index.js",
   "module": "dist/index.js",
   "repository": {
@@ -35,6 +35,7 @@
     "toasts",
     "button",
     "input",
+    "textarea",
     "notification",
     "dropdown",
     "spinner",