meticulous-ui 3.0.1 → 3.0.2

package/components/Toast/Toast.js

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

package/components/Toast/styles.js

@@ -1,9 +1,9 @@
-import r, { keyframes as s, css as o } from "styled-components";
+import t, { keyframes as a, css as o } from "styled-components";
 import i from "../../colors/white.js";
-import n from "../Icons/Close/Close.js";
+import m from "../Icons/Close/Close.js";
 import d from "../../colors/grey.js";
-import { WARNING as a } from "./constants.js";
-const m = s`
+import { WARNING as n } from "./constants.js";
+const l = a`
   from {
     opacity: 0;
     transform: translateX(100%); /* Start off-screen to the right */
@@ -12,7 +12,7 @@ const m = s`
     opacity: 1;
     transform: translateX(0); /* Move to its final position */
   }
-`, h = s`
+`, c = a`
   from {
     opacity: 1;
     transform: translateX(0);
@@ -21,7 +21,7 @@ const m = s`
     opacity: 0;
     transform: translateX(100%); /* Move off-screen to the right */
   }
-`, w = r.div`
+`, x = t.div`
   position: fixed;
   top: 1.6rem;
   right: 1.6rem;
@@ -30,7 +30,7 @@ const m = s`
   display: flex;
   flex-direction: column;
   gap: 1.6rem;
-`, x = r.div`
+`, b = t.div`
   display: flex;
   align-items: center;
   justify-content: space-between;
@@ -44,12 +44,12 @@ const m = s`
 
   &.fade-in {
     opacity: 1;
-    animation: ${m} 0.5s ease-out forwards; /* slide down + fade */
+    animation: ${l} 0.5s ease-out forwards; /* slide down + fade */
   }
 
   &.fade-out {
     opacity: 0;
-    animation: ${h} 0.5s ease-in forwards; /* slide right */
+    animation: ${c} 0.5s ease-in forwards; /* slide right */
   }
 
   @media screen and (max-width: 768px) {
@@ -58,16 +58,16 @@ const m = s`
     border-radius: 0.96rem;
     padding: 0.48rem 1.28rem;
   }
-`, b = r.div`
+`, $ = t.div`
   position: absolute;
   top: 50%;
   left: 50%;
   transform: translate(-50%, -50%);
   background-color: ${i};
 
-  ${({ type: e, $main: t }) => e === a ? o`
+  ${({ type: e, $main: r }) => e === n ? o`
           top: 48%;
-          border-color: ${t} ${t} ${i} ${t};
+          border-color: ${r} ${r} ${i} ${r};
           border-style: solid;
           border-width: 0 1.44rem 2.24rem 1.44rem;
           height: 0;
@@ -80,9 +80,9 @@ const m = s`
         `}
 
   @media screen and (max-width: 768px) {
-    ${({ type: e, $main: t }) => e === a ? o`
+    ${({ type: e, $main: r }) => e === n ? o`
             top: 48%;
-            border-color: ${t} ${t} ${i} ${t};
+            border-color: ${r} ${r} ${i} ${r};
             border-style: solid;
             border-width: 0 1.12rem 1.68rem 1.088rem;
             height: 0;
@@ -94,7 +94,7 @@ const m = s`
             border-radius: 50%;
           `}
   }
-`, u = r.div`
+`, y = t.div`
   position: relative;
   width: 6.4rem;
   height: 6.4rem;
@@ -105,7 +105,7 @@ const m = s`
     width: 4.8rem;
     height: 4.8rem;
   }
-`, $ = r.div`
+`, v = t.div`
   position: absolute;
   top: 50%;
   left: 50%;
@@ -119,7 +119,7 @@ const m = s`
     transform: translate(-42.8%, -42.8%);
     scale: 0.75;
   }
-`, y = r.div`
+`, k = t.div`
   position: absolute;
   top: 50%;
   left: 50%;
@@ -133,13 +133,48 @@ const m = s`
     width: 3.6rem;
     height: 3.6rem;
   }
-`, v = r(n)`
+`, s = 75.4, h = a`
+  from { stroke-dashoffset: ${s}; }
+  to   { stroke-dashoffset: 0; }
+`, C = t.div`
+  position: relative;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+  width: 2.8rem;
+  height: 2.8rem;
+`, I = t.svg`
+  position: absolute;
+  inset: 0;
+  transform: rotate(-90deg);
+  pointer-events: none;
+
+  circle {
+    fill: none;
+    stroke: ${({ $color: e }) => e};
+    stroke-width: 2;
+    stroke-linecap: round;
+    stroke-dasharray: ${s};
+  }
+
+  circle:first-child {
+    opacity: 0.15;
+    stroke-dashoffset: 0;
+  }
+
+  circle:last-child {
+    stroke-dashoffset: ${s};
+    animation: ${h} ${({ $duration: e }) => e - 0.5}s linear forwards;
+    animation-play-state: ${({ $paused: e }) => e ? "paused" : "running"};
+  }
+`, R = t(m)`
   cursor: pointer;
-`, k = r.div`
+`, M = t.div`
   font-weight: 600;
   font-size: 1.92rem;
   color: ${d.m800};
-`, C = r.div`
+`, N = t.div`
   display: flex;
   flex-direction: column;
   gap: 0.32rem;
@@ -148,20 +183,22 @@ const m = s`
   @media screen and (max-width: 768px) {
     width: 24rem;
   }
-`, X = r.div`
+`, X = t.div`
   font-weight: 400;
   font-size: 1.6rem;
   color: ${d.m700};
 `;
 export {
-  v as CloseWrapper,
-  $ as Icon,
-  b as LogoContainer,
-  C as Message,
-  u as Outer,
-  y as OuterChild,
+  C as CloseButtonContainer,
+  R as CloseWrapper,
+  v as Icon,
+  $ as LogoContainer,
+  N as Message,
+  y as Outer,
+  k as OuterChild,
+  I as ProgressRing,
   X as Subtitle,
-  k as Title,
-  x as ToastWrapper,
-  w as ToastsContainer
+  M as Title,
+  b as ToastWrapper,
+  x as ToastsContainer
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "meticulous-ui",
-  "version": "3.0.1",
+  "version": "3.0.2",
   "license": "MIT",
   "description": "A comprehensive React UI component library with a wide range of customizable components, icons, colors, and utilities for building modern web applications.",
   "main": "./index.js",