meticulous-ui 3.5.2 → 3.5.3

package/components/Button/Button.js

@@ -1,56 +1,52 @@
-import { jsx as o } from "react/jsx-runtime";
+import { jsxs as D, jsx as o } from "react/jsx-runtime";
 import { useRef as v } from "react";
-import x from "../Spinner/Spinner.js";
+import L from "../Spinner/Spinner.js";
 import I from "../../colors/colorMap.js";
 import { blue as f } from "../../colors/blue.js";
 import { ButtonWrapper as K, SpinnerWrapper as R, Content as B, ButtonContainer as E } from "./styles.js";
-import L from "../Ripple/Ripple.js";
-import S from "../../colors/white.js";
+import S from "../Ripple/Ripple.js";
+import j from "../../colors/white.js";
 import k from "../../colors/grey.js";
 import { MEDIUM as z, SIZE as M } from "./constants.js";
-const P = ({ theme: t, children: n }) => /* @__PURE__ */ o(L, { rippleColor: t.m100, children: n }), Q = (t) => {
+const P = ({ theme: t, children: i }) => /* @__PURE__ */ o(S, { rippleColor: t.m100, children: i }), T = (t) => {
   const {
-    children: n,
-    theme: i = f,
+    children: i,
+    theme: n = f,
     size: u = z,
     width: l,
     leftIcon: W,
-    rightIcon: j,
-    isLoading: r,
+    rightIcon: U,
+    isLoading: e,
     textColor: s,
     onKeyDown: w,
     ...C
-  } = t || {}, d = v(0), $ = (e) => {
-    if (e.key === "Enter" || e.key === " ") {
-      const a = Date.now();
-      if (a - d.current < 500) {
-        e.preventDefault(), e.stopPropagation();
+  } = t || {}, d = v(0), $ = (r) => {
+    if (r.key === "Enter" || r.key === " ") {
+      const h = Date.now();
+      if (h - d.current < 500) {
+        r.preventDefault(), r.stopPropagation();
         return;
       }
-      d.current = a;
+      d.current = h;
     }
-    w?.(e);
-  }, { m400: y, m500: g, m600: b } = I[i] ?? f, { height: m, width: c, font: D } = M[u] || {}, p = ["white", "yellow"].includes(i) ? k.m600 : S, h = /* @__PURE__ */ o(
+    w?.(r);
+  }, { m400: g, m500: y, m600: b } = I[n] ?? f, { height: m, width: c, font: x } = M[u] || {}, a = ["white", "yellow"].includes(n) ? k.m600 : j, p = /* @__PURE__ */ D(
     K,
     {
       type: "button",
       ...C,
       onKeyDown: $,
-      $hoverColor: g,
+      $hoverColor: y,
       $activeColor: b,
-      $selectedColor: y,
+      $selectedColor: g,
       $height: m,
       $width: l || c,
       disabled: t.disabled,
-      $isLoading: r,
-      children: r ? /* @__PURE__ */ o(R, { children: /* @__PURE__ */ o(x, { size: "small", color: s || p }) }) : /* @__PURE__ */ o(
-        B,
-        {
-          $textColor: s || p,
-          $font: D,
-          children: n
-        }
-      )
+      $isLoading: e,
+      children: [
+        /* @__PURE__ */ o(R, { $isLoading: e, children: /* @__PURE__ */ o(L, { size: "small", color: s || a }) }),
+        /* @__PURE__ */ o(B, { $isLoading: e, $textColor: s || a, $font: x, children: i })
+      ]
     }
   );
   return /* @__PURE__ */ o(
@@ -59,11 +55,11 @@ const P = ({ theme: t, children: n }) => /* @__PURE__ */ o(L, { rippleColor: t.m
       $height: m,
       $width: l || c,
       disabled: t.disabled,
-      $isLoading: r,
-      children: r ? h : /* @__PURE__ */ o(P, { theme: i, children: h })
+      $isLoading: e,
+      children: e ? p : /* @__PURE__ */ o(P, { theme: n, children: p })
     }
   );
 };
 export {
-  Q as default
+  T as default
 };

package/components/Button/styles.js

@@ -1,19 +1,21 @@
-import e, { css as n } from "styled-components";
+import r, { css as n } from "styled-components";
 import i from "../../colors/grey.js";
-const d = e.button`
+const d = r.button`
   height: ${({ $height: o }) => o}rem;
   width: ${({ $width: o }) => o}rem;
   border-radius: 0.96rem;
   border: none;
   padding: 0.96rem 0.64rem;
-  background-color: ${({ $selectedColor: o, disabled: r }) => r ? i.m500 : o};
-  cursor: ${({ disabled: o, $isLoading: r }) => o ? "not-allowed" : r ? "auto" : "pointer"};
+  position: relative;
+  overflow: hidden;
+  background-color: ${({ $selectedColor: o, disabled: e }) => e ? i.m500 : o};
+  cursor: ${({ disabled: o, $isLoading: e }) => o ? "not-allowed" : e ? "auto" : "pointer"};
 
   ${({ $isLoading: o }) => o && n`
       pointer-events: none;
     `};
 
-  ${({ disabled: o, $isLoading: r }) => !(o || r) && n`
+  ${({ disabled: o, $isLoading: e }) => !(o || e) && n`
       &:hover {
         background-color: ${({ $hoverColor: t }) => t};
       }
@@ -26,20 +28,22 @@ const d = e.button`
   &:focus-visible {
     outline: none;
   }
-`, m = e.div`
+`, c = r.div`
   font-size: ${({ $font: o }) => o}rem;
   font-weight: 500;
   max-width: 100%;
   overflow: hidden;
   color: ${({ $textColor: o }) => o};
-`, c = e.div`
+  opacity: ${({ $isLoading: o }) => o ? 0 : 1};
+  transition: opacity 0.3s ease;
+`, m = r.div`
   height: ${({ $height: o }) => o}rem;
   width: ${({ $width: o }) => o}rem;
   display: inline-block;
   position: relative;
   border-radius: 0.96rem;
 
-  ${({ disabled: o, $isLoading: r }) => !(o || r) && n`
+  ${({ disabled: o, $isLoading: e }) => !(o || e) && n`
       box-shadow: 0 0.4rem 1.5rem rgba(0, 0, 0, 0.2);
       transition:
         transform 0.2s,
@@ -51,15 +55,19 @@ const d = e.button`
         transform: translateY(-2px);
       }
     `};
-`, l = e.div`
-  width: 100%;
+`, p = r.div`
+  position: absolute;
+  inset: 0;
   display: flex;
-  flex-direction: column;
   align-items: center;
+  justify-content: center;
+  opacity: ${({ $isLoading: o }) => o ? 1 : 0};
+  transition: opacity 0.3s ease;
+  pointer-events: none;
 `;
 export {
-  c as ButtonContainer,
+  m as ButtonContainer,
   d as ButtonWrapper,
-  m as Content,
-  l as SpinnerWrapper
+  c as Content,
+  p as SpinnerWrapper
 };

package/components/Input/FileUploader/FileUploader.js

@@ -1,94 +1,88 @@
-import { jsx as o, jsxs as E } from "react/jsx-runtime";
-import { useRef as y } from "react";
-import { UploadBtnContainer as U, Wrapper as j, HiddenInput as M, PWrapper as W } from "./styles.js";
-import B from "../../../colors/white.js";
-import { blue as C } from "../../../colors/blue.js";
-import F from "../../../colors/grey.js";
-import H from "../../../colors/colorMap.js";
-import P from "../../Ripple/Ripple.js";
-import { SIZE as Z, MEDIUM as q } from "./constants.js";
-import A from "../../Icons/Link/Link.js";
-const G = ({ theme: t, children: l }) => /* @__PURE__ */ o(P, { rippleColor: t.m100, children: l }), b = ({
+import { jsx as r, jsxs as d } from "react/jsx-runtime";
+import { useRef as w } from "react";
+import E from "../../Spinner/Spinner.js";
+import { UploadBtnContainer as U, Wrapper as j, HiddenInput as M, SpinnerWrapper as S, ContentWrapper as B, PWrapper as F } from "./styles.js";
+import H from "../../../colors/white.js";
+import { blue as y } from "../../../colors/blue.js";
+import P from "../../../colors/grey.js";
+import Z from "../../../colors/colorMap.js";
+import q from "../../Ripple/Ripple.js";
+import { SIZE as A, MEDIUM as G } from "./constants.js";
+import J from "../../Icons/Link/Link.js";
+const L = ({ theme: t, children: l }) => /* @__PURE__ */ r(q, { rippleColor: t.m100, children: l }), tr = ({
   label: t,
   labelColor: l,
-  theme: p = C,
-  size: x = q,
-  width: s,
-  isLoading: e,
-  disabled: r,
-  prefixIcon: c = A,
-  suffixIcon: m,
+  theme: c = y,
+  size: C = G,
+  width: x,
+  isLoading: o,
+  disabled: e,
+  prefixIcon: m = J,
+  suffixIcon: s,
   type: D = "file",
-  accept: I,
-  isMultiple: R,
-  onChange: k,
-  ...z
+  accept: z,
+  isMultiple: I,
+  onChange: R,
+  ...k
 }) => {
-  const h = y(null), { m400: K, m500: g, m600: v } = H[p] ?? C, { height: u, width: $, font: n } = Z[x] || {}, f = l || ["white", "yellow"].includes(p) ? F.m600 : B, a = y(0), d = /* @__PURE__ */ E(
+  const f = w(null), { m400: K, m500: W, m600: g } = Z[c] ?? y, { height: h, width: v, font: n } = A[C] || {}, i = l || ["white", "yellow"].includes(c) ? P.m600 : H, a = w(0), $ = /* @__PURE__ */ d(
     j,
     {
       $selectedColor: K,
-      $hoverColor: g,
-      $height: u,
-      $width: s || $,
-      $activeColor: v,
-      disabled: r,
-      $isLoading: e,
+      $hoverColor: W,
+      $height: h,
+      $width: x || v,
+      $activeColor: g,
+      disabled: e,
+      $isLoading: o,
       tabIndex: 0,
-      "aria-disabled": r,
-      onKeyDown: (i) => {
-        if (i.key === "Enter" || i.key === " ") {
-          i.preventDefault();
-          const w = Date.now();
-          if (w - a.current < 500) {
-            i.stopPropagation();
+      "aria-disabled": e,
+      onKeyDown: (p) => {
+        if (p.key === "Enter" || p.key === " ") {
+          p.preventDefault();
+          const u = Date.now();
+          if (u - a.current < 500) {
+            p.stopPropagation();
             return;
           }
-          a.current = w, !r && !e && h.current?.click();
+          a.current = u, !e && !o && f.current?.click();
         }
       },
       children: [
-        /* @__PURE__ */ o(
+        /* @__PURE__ */ r(
           M,
           {
-            ref: h,
+            ref: f,
             type: D,
-            accept: I,
-            multiple: R,
-            disabled: r,
-            onChange: k,
+            accept: z,
+            multiple: I,
+            disabled: e,
+            onChange: R,
             tabIndex: -1
           }
         ),
-        c && /* @__PURE__ */ o(c, { color: f, size: n + 19 }),
-        /* @__PURE__ */ o(
-          W,
-          {
-            color: f,
-            size: `${n}rem`,
-            $prefixIcon: !!c,
-            $suffixIcon: !!m,
-            $iconSize: n + 19,
-            title: t,
-            children: t
-          }
-        ),
-        m && /* @__PURE__ */ o(m, { color: f, size: n + 19 })
+        /* @__PURE__ */ r(S, { $isLoading: o, children: /* @__PURE__ */ r(E, { size: "small", color: i }) }),
+        /* @__PURE__ */ d(B, { $isLoading: o, children: [
+          m && /* @__PURE__ */ r(m, { color: i, size: n + 19 }),
+          /* @__PURE__ */ r(
+            F,
+            {
+              color: i,
+              size: `${n}rem`,
+              $prefixIcon: !!m,
+              $suffixIcon: !!s,
+              $iconSize: n + 19,
+              title: t,
+              children: t
+            }
+          ),
+          s && /* @__PURE__ */ r(s, { color: i, size: n + 19 })
+        ] })
       ]
     }
   );
-  return /* @__PURE__ */ o(
-    U,
-    {
-      $height: u,
-      $width: s || $,
-      disabled: r,
-      $isLoading: e,
-      ...z,
-      children: e || r ? d : /* @__PURE__ */ o(G, { theme: p, children: d })
-    }
-  );
+  return /* @__PURE__ */ r(U, { $height: h, disabled: e, $isLoading: o, ...k, children: o || e ? $ : /* @__PURE__ */ r(L, { theme: c, children: $ }) });
 };
 export {
-  b as default
+  tr as default
 };

package/components/Input/FileUploader/styles.js

@@ -1,10 +1,8 @@
 import r, { css as i } from "styled-components";
 import n from "../../Typography/P/P.js";
 import a from "../../../colors/grey.js";
-const l = r.div`
+const c = r.div`
   height: ${({ $height: e }) => e}rem;
-  width: fit-content;
-  max-width: ${({ $width: e }) => e}rem;
   display: inline-block;
   position: relative;
   border-radius: 0.96rem;
@@ -21,7 +19,7 @@ const l = r.div`
         transform: translateY(-2px);
       }
     `};
-`, c = r.label`
+`, d = r.label`
   height: ${({ $height: e }) => `${e}rem`};
   width: ${({ $width: e }) => `${e}rem`};
   border-radius: 0.96rem;
@@ -31,6 +29,8 @@ const l = r.div`
   align-items: center;
   gap: 0.8rem;
   outline: none;
+  position: relative;
+  overflow: hidden;
   background-color: ${({ $selectedColor: e, disabled: o }) => o ? a.m500 : e};
   cursor: ${({ disabled: e, $isLoading: o }) => e ? "not-allowed" : o ? "auto" : "pointer"};
 
@@ -61,7 +61,24 @@ const l = r.div`
   $iconSize: o
 }) => e ? ` - ${o}px - 0.8rem` : ""}
   );
-`, h = r.input`
+`, h = r.div`
+  position: absolute;
+  inset: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  opacity: ${({ $isLoading: e }) => e ? 1 : 0};
+  transition: opacity 0.3s ease;
+  pointer-events: none;
+`, $ = r.div`
+  display: flex;
+  align-items: center;
+  gap: 0.8rem;
+  flex: 1;
+  min-width: 0;
+  opacity: ${({ $isLoading: e }) => e ? 0 : 1};
+  transition: opacity 0.3s ease;
+`, w = r.input`
   position: absolute;
   width: 1px;
   height: 1px;
@@ -73,8 +90,10 @@ const l = r.div`
   pointer-events: none;
 `;
 export {
-  h as HiddenInput,
+  $ as ContentWrapper,
+  w as HiddenInput,
   m as PWrapper,
-  l as UploadBtnContainer,
-  c as Wrapper
+  h as SpinnerWrapper,
+  c as UploadBtnContainer,
+  d as Wrapper
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "meticulous-ui",
-  "version": "3.5.2",
+  "version": "3.5.3",
   "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",