meticulous-ui 3.6.3 → 3.6.4

package/components/Input/Textarea/Textarea.js

@@ -1,92 +1,91 @@
-import { jsxs as R, jsx as e } from "react/jsx-runtime";
+import { jsxs as F, jsx as o } from "react/jsx-runtime";
 import { useState as J, useRef as K } from "react";
 import { Wrapper as M, TextareaBox as Q, Parent as U, Label as V, HelperText as X } from "./styles.js";
 import { LeftIconWrapper as Y, RightIconWrapper as Z } from "../Input/styles.js";
-import { getColor as _, getIcon as F } from "./helpers.js";
-import D from "../../../colors/white.js";
-import ee from "../../../colors/grey.js";
-import b from "./SvgIcon.js";
-const he = ({
+import { getColor as _, getIcon as v } from "./helpers.js";
+import tt from "../../../colors/white.js";
+import ot from "../../../colors/grey.js";
+import w from "./SvgIcon.js";
+const dt = ({
   label: s,
-  onChange: v,
-  value: t,
-  type: B,
-  hasError: j,
-  name: p = "textarea",
-  color: C = "blue",
+  onChange: C,
+  value: r,
+  type: b,
+  hasError: B,
+  name: u = "textarea",
+  color: H = "blue",
   helperText: c = "",
-  background: u = "transparent",
-  outerBackground: H = D,
-  isDynamic: i,
-  isResizeNone: L,
-  rows: S = "2",
-  cols: W = "20",
-  leftIcon: w,
-  rightIcon: z,
-  placeholder: a,
-  ...P
+  background: g = "transparent",
+  outerBackground: S = tt,
+  isDynamic: m,
+  isResizeNone: j,
+  rows: z = "2",
+  cols: L = "20",
+  leftIcon: W,
+  rightIcon: P,
+  placeholder: i,
+  ...T
 }) => {
-  const [o, g] = J(!1), h = _(C), $ = K(null), k = () => g(!0), A = () => g(!1), E = (q) => {
-    if (i) {
-      const n = $.current;
-      if (n) {
-        n.style.height = "0px";
-        const G = n.scrollHeight;
-        n.style.height = `${G}px`;
-      }
+  const [e, $] = J(!1), a = _(H), h = K(null), k = (t) => {
+    t.style.height = "";
+    const R = t.scrollHeight - t.clientHeight;
+    if (R > 0) {
+      const G = parseFloat(window.getComputedStyle(t).height);
+      t.style.height = `${G + R}px`;
     }
-    v(q);
-  }, I = { color: ee.m500, size: 20 }, l = F(w), d = F(z), f = !!l, x = !!d, r = j, N = i, O = u, T = i ? {} : { rows: S }, m = `textarea-${p}`, y = c ? `${m}-helper` : void 0;
-  return /* @__PURE__ */ R(M, { children: [
-    /* @__PURE__ */ e(
+  }, A = () => $(!0), E = () => $(!1), N = (t) => {
+    m && h.current && k(h.current), C(t);
+  }, I = { color: ot.m500, size: 20 }, d = v(W), f = v(P), l = !!d, x = !!f, n = B, O = m, q = g, D = { rows: z }, p = `textarea-${u}`, y = c ? `${p}-helper` : void 0;
+  return /* @__PURE__ */ F(M, { children: [
+    /* @__PURE__ */ o(
       Q,
       {
-        type: B,
-        name: p,
-        $hasError: r,
-        value: t,
-        $isFocused: o,
-        $shade: h,
-        $isDynamic: N,
-        $background: O,
-        cols: W,
-        $hasLeftIcon: f,
+        type: b,
+        name: u,
+        $hasError: n,
+        value: r,
+        $isFocused: e,
+        $shade: a,
+        $isDynamic: O,
+        $background: q,
+        cols: L,
+        $hasLeftIcon: l,
         $hasRightIcon: x,
-        $isResizeNone: L,
-        ...T,
-        id: m,
-        "aria-invalid": r ? !0 : void 0,
+        $isResizeNone: j,
+        ...D,
+        id: p,
+        "aria-invalid": n ? !0 : void 0,
         "aria-describedby": y,
-        ref: $,
-        onFocus: k,
-        onBlur: A,
-        onChange: E,
-        ...P
+        ref: h,
+        onFocus: A,
+        onBlur: E,
+        onChange: N,
+        ...T
       }
     ),
-    l && /* @__PURE__ */ e(Y, { "aria-hidden": "true", style: { top: "1.2rem", transform: "none" }, children: /* @__PURE__ */ e(b, { svgIcon: l, iconStyles: I }) }),
-    d && /* @__PURE__ */ e(Z, { "aria-hidden": "true", style: { top: "1.2rem", transform: "none" }, children: /* @__PURE__ */ e(b, { svgIcon: d, iconStyles: I }) }),
-    /* @__PURE__ */ R(U, { children: [
-      (s || a && !t) && /* @__PURE__ */ e(
+    d && /* @__PURE__ */ o(Y, { "aria-hidden": "true", style: { top: "1.2rem", transform: "none" }, children: /* @__PURE__ */ o(w, { svgIcon: d, iconStyles: I }) }),
+    f && /* @__PURE__ */ o(Z, { "aria-hidden": "true", style: { top: "1.2rem", transform: "none" }, children: /* @__PURE__ */ o(w, { svgIcon: f, iconStyles: I }) }),
+    /* @__PURE__ */ F(U, { children: [
+      (s || i && !r) && /* @__PURE__ */ o(
         V,
         {
           as: "label",
-          htmlFor: m,
-          $hasError: r,
-          $isFocused: o,
-          $shade: h,
-          $value: t,
-          $outerBackground: o || t ? H : u,
-          $hasLeftIcon: f,
+          htmlFor: p,
+          $hasError: n,
+          $isFocused: e,
+          $shade: a,
+          $value: r,
+          $outerBackground: e || r ? S : g,
+          $hasLeftIcon: l,
           $hasRightIcon: x,
-          $onlyPh: a && !s,
-          children: s || a
+          $onlyPh: i && !s,
+          children: s || i
         }
       ),
-      c && /* @__PURE__ */ e(X, { id: y, $hasError: r, $isFocused: o, $shade: h, $hasLeftIcon: f, children: c })
+      c && /* @__PURE__ */ o(X, { id: y, $hasError: n, $isFocused: e, $shade: a, $hasLeftIcon: l, children: c })
     ] })
   ] });
 };
 export {
-  he as default
+  dt as default
 };

package/components/Input/Textarea/styles.js

@@ -1,12 +1,12 @@
 import o, { css as r } from "styled-components";
 import { black as a } from "../../../colors/black.js";
 import l from "../../../colors/grey.js";
-import s from "../../../colors/red.js";
+import m from "../../../colors/red.js";
 import { getCssShade as i } from "./helpers.js";
 const b = o.textarea`
   border-radius: 0.64rem;
   font-size: 2.24rem;
-  border: 2px solid ${({ $hasError: e }) => e ? s.m400 : a.m200};
+  border: 2px solid ${({ $hasError: e }) => e ? m.m400 : a.m200};
   padding: 0.96rem;
   font-weight: 400;
   transition: border-color 0.3s ease;
@@ -20,8 +20,6 @@ const b = o.textarea`
 
   ${({ $isDynamic: e }) => e && r`
       resize: none;
-      display: block;
-      overflow: hidden;
     `}
 
   &:-webkit-autofill,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "meticulous-ui",
-  "version": "3.6.3",
+  "version": "3.6.4",
   "license": "ISC",
   "description": "A comprehensive React UI component library with a wide range of customizable components, icons, colors, and utilities for building modern web applications.",
   "types": "./index.d.ts",