meticulous-ui 3.5.1 → 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/components/Toast/Toast.js

@@ -1,72 +1,74 @@
-import { jsxs as i, jsx as t } from "react/jsx-runtime";
-import { useState as l, useRef as h, useEffect as R, createElement as N } from "react";
+import { jsxs as c, jsx as t } from "react/jsx-runtime";
+import { useState as i, useRef as R, useEffect as C, createElement as N } from "react";
 import { createPortal as b } from "react-dom";
 import { Logo as j } from "./helpers.js";
-import k from "../../colors/grey.js";
-import { COLOR_MAP as y, INFO as A, INFO_COLORS as B, ERROR as v } from "./constants.js";
-import { ToastWrapper as D, Message as I, Title as W, Subtitle as _, CloseButtonContainer as z, ProgressRing as q, CloseWrapper as G, ToastsContainer as H } from "./styles.js";
+import y from "../../colors/grey.js";
+import { COLOR_MAP as A, INFO as B, INFO_COLORS as D, ERROR as M } from "./constants.js";
+import { ToastWrapper as I, Message as W, Title as _, Subtitle as z, CloseButtonContainer as q, ProgressRing as G, CloseWrapper as H, ToastsContainer as J } from "./styles.js";
 const x = () => {
-}, ee = ({ toasts: e, ...r }) => {
-  const [o, s] = l(e);
-  R(() => {
-    s(e);
+}, re = ({ toasts: e, ...r }) => {
+  const [o, n] = i(e);
+  C(() => {
+    n(e);
   }, [e]);
-  const u = ({ type: a, id: m, title: d, subtitle: n, duration: f, onExpire: c = x }, C) => /* @__PURE__ */ N(J, { type: a, title: d, subtitle: n, duration: f, key: m, onExpire: c });
+  const l = ({ type: u, id: a, title: m, subtitle: d, duration: s, onExpire: f = x }, T) => /* @__PURE__ */ N(K, { type: u, title: m, subtitle: d, duration: s, key: a, onExpire: f });
   return b(
-    /* @__PURE__ */ t(H, { ...r, children: [...o].reverse().map(u) }),
+    /* @__PURE__ */ t(J, { ...r, children: [...o].reverse().map(l) }),
     document.body
   );
-}, w = (e, r, o) => () => {
+}, v = (e, r, o) => () => {
   e(!0), setTimeout(() => {
     r(!1), o();
   }, 500);
-}, J = ({
-  type: e = A,
+}, K = ({
+  type: e = B,
   visible: r = !0,
   duration: o = 5,
-  onExpire: s = x,
+  onExpire: n = x,
+  hasClockwiseRotation: l = !1,
   title: u,
   subtitle: a,
   ...m
 }) => {
-  const [d, n] = l(r), [f, c] = l(!1), [C, O] = l(!1), T = h(null), p = h((o - 0.5) * 1e3), g = h(null), $ = (F) => {
-    g.current = Date.now(), T.current = setTimeout(w(c, n, s), F);
+  const [d, s] = i(r), [f, T] = i(!1), [L, O] = i(!1), h = R(null), p = R((o - 0.5) * 1e3), g = R(null), $ = (F) => {
+    g.current = Date.now(), h.current = setTimeout(v(T, s, n), F);
   };
-  R(() => {
-    n(r);
-  }, [r]), R(() => ($(p.current), () => clearTimeout(T.current)), []);
-  const L = () => {
-    clearTimeout(T.current), p.current -= Date.now() - g.current, O(!0);
-  }, E = () => {
+  C(() => {
+    s(r);
+  }, [r]), C(() => ($(p.current), () => clearTimeout(h.current)), []);
+  const E = () => {
+    clearTimeout(h.current), p.current -= Date.now() - g.current, O(!0);
+  }, P = () => {
     O(!1), $(p.current);
-  }, { main: M, side: P, bg: S } = y[e] ?? B;
+  }, { main: w, side: S, bg: k } = A[e] ?? D;
   if (d)
-    return /* @__PURE__ */ i(
-      D,
+    return /* @__PURE__ */ c(
+      I,
       {
-        $bg: S,
-        role: e === v ? "alert" : "status",
-        "aria-live": e === v ? "assertive" : "polite",
+        $bg: k,
+        role: e === M ? "alert" : "status",
+        "aria-live": e === M ? "assertive" : "polite",
         "aria-atomic": "true",
         className: `${f ? "fade-out" : "fade-in"}`,
-        onMouseEnter: L,
-        onMouseLeave: E,
+        onMouseEnter: E,
+        onMouseLeave: P,
         ...m,
         children: [
-          /* @__PURE__ */ t(j, { type: e, $main: M, $side: P }),
-          /* @__PURE__ */ i(I, { children: [
-            /* @__PURE__ */ t(W, { children: u }),
-            a && /* @__PURE__ */ t(_, { children: a })
+          /* @__PURE__ */ t(j, { type: e, $main: w, $side: S }),
+          /* @__PURE__ */ c(W, { children: [
+            /* @__PURE__ */ t(_, { children: u }),
+            a && /* @__PURE__ */ t(z, { children: a })
           ] }),
-          /* @__PURE__ */ i(z, { children: [
-            /* @__PURE__ */ i(
-              q,
+          /* @__PURE__ */ c(q, { children: [
+            /* @__PURE__ */ c(
+              G,
               {
                 "aria-hidden": "true",
                 viewBox: "0 0 28 28",
                 $duration: o,
-                $color: M,
-                $paused: C,
+                $color: w,
+                $paused: L,
+                $hasClockwiseRotation: l,
                 children: [
                   /* @__PURE__ */ t("circle", { cx: "14", cy: "14", r: "12" }),
                   /* @__PURE__ */ t("circle", { cx: "14", cy: "14", r: "12" })
@@ -74,12 +76,12 @@ const x = () => {
               }
             ),
             /* @__PURE__ */ t(
-              G,
+              H,
               {
                 "aria-label": "Close notification",
                 size: 13,
-                color: k.m600,
-                onClick: w(c, n, s)
+                color: y.m600,
+                onClick: v(T, s, n)
               }
             )
           ] })
@@ -88,6 +90,6 @@ const x = () => {
     );
 };
 export {
-  ee as ToastContainer,
-  J as default
+  re as ToastContainer,
+  K as default
 };

package/components/Toast/styles.js

@@ -182,7 +182,7 @@ const s = r`
 `, k = t.svg`
   position: absolute;
   inset: 0;
-  transform: rotate(-90deg);
+  transform: ${({ $hasClockwiseRotation: e }) => e ? "rotate(-90deg)" : "rotate(90deg) scaleX(-1)"};
   pointer-events: none;
 
   circle {
@@ -235,7 +235,7 @@ const s = r`
     max-width: 18rem;
     width: auto;
   }
-`, I = t.div`
+`, X = t.div`
   font-weight: 400;
   font-size: 1.6rem;
   color: ${a.m700};
@@ -257,7 +257,7 @@ export {
   b as Outer,
   y as OuterChild,
   k as ProgressRing,
-  I as Subtitle,
+  X as Subtitle,
   z as Title,
   g as ToastWrapper,
   w as ToastsContainer

package/package.json

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