meticulous-ui 3.0.1 → 3.0.3

package/components/Toast/Toast.js

@@ -1,55 +1,93 @@
-import { jsxs as T, jsx as s } from "react/jsx-runtime";
-import { useState as u, useEffect as p, createElement as $ } 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 { jsxs as c, jsx as t } from "react/jsx-runtime";
+import { useState as i, useRef as h, useEffect as R, 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 M } 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";
+const w = () => {
+}, ee = ({ toasts: e, ...r }) => {
+  const [o, s] = i(e);
+  R(() => {
+    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 });
-  return F(
-    /* @__PURE__ */ s(P, { ...o, children: [...t].reverse().map(m) }),
+  const l = ({ type: a, id: u, title: m, subtitle: n, onExpire: d = w }, f) => /* @__PURE__ */ N(J, { type: a, title: m, subtitle: n, key: u, onExpire: d });
+  return b(
+    /* @__PURE__ */ t(H, { ...r, children: [...o].reverse().map(l) }),
     document.body
   );
-}, d = (e, o, t) => () => {
+}, v = (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
+}, J = ({
+  type: e = A,
+  visible: r = !0,
+  duration: o = 5,
+  onExpire: s = w,
+  title: l,
+  subtitle: a,
+  ...u
 }) => {
-  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] = i(r), [d, f] = i(!1), [x, C] = i(!1), T = h(null), p = h((o - 0.5) * 1e3), O = h(null), g = (F) => {
+    O.current = Date.now(), T.current = setTimeout(v(f, n, s), F);
+  };
+  R(() => {
+    n(r);
+  }, [r]), R(() => (g(p.current), () => clearTimeout(T.current)), []);
+  const L = () => {
+    clearTimeout(T.current), p.current -= Date.now() - O.current, C(!0);
+  }, E = () => {
+    C(!1), g(p.current);
+  }, { main: $, side: P, bg: S } = y[e] ?? B;
+  if (m)
+    return /* @__PURE__ */ c(
+      D,
+      {
+        $bg: S,
+        role: e === M ? "alert" : "status",
+        "aria-live": e === M ? "assertive" : "polite",
+        "aria-atomic": "true",
+        className: `${d ? "fade-out" : "fade-in"}`,
+        onMouseEnter: L,
+        onMouseLeave: E,
+        ...u,
+        children: [
+          /* @__PURE__ */ t(j, { type: e, $main: $, $side: P }),
+          /* @__PURE__ */ c(I, { children: [
+            /* @__PURE__ */ t(W, { children: l }),
+            a && /* @__PURE__ */ t(_, { children: a })
+          ] }),
+          /* @__PURE__ */ c(z, { children: [
+            /* @__PURE__ */ c(
+              q,
+              {
+                "aria-hidden": "true",
+                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(
+              G,
+              {
+                "aria-label": "Close notification",
+                size: 13,
+                color: k.m600,
+                onClick: v(f, n, s)
+              }
+            )
+          ] })
+        ]
+      }
+    );
 };
 export {
-  B as ToastContainer,
-  R as default
+  ee as ToastContainer,
+  J as default
 };

package/components/Toast/helpers.js

@@ -2,14 +2,14 @@ import { jsxs as c, jsx as e } from "react/jsx-runtime";
 import { ERROR as t, SUCCESS as i } from "./constants.js";
 import f from "../Icons/Close/Close.js";
 import m from "../Icons/Check/Check.js";
-import g from "../Icons/Info/Info.js";
-import { Outer as u, OuterChild as l, LogoContainer as C, Icon as z } from "./styles.js";
-const h = (o, r) => o === t ? /* @__PURE__ */ e(f, { size: 16, color: r }) : o === i ? /* @__PURE__ */ e(m, { size: 18, color: r }) : /* @__PURE__ */ e(g, { size: 22, color: r }), I = (o) => o === t ? 1.6 : o === i ? 1.76 : 2.08, R = ({ type: o, $main: r, $side: n }) => {
+import u from "../Icons/Info/Info.js";
+import { Outer as g, OuterChild as l, LogoContainer as C, Icon as d } from "./styles.js";
+const h = (o, r) => o === t ? /* @__PURE__ */ e(f, { size: 16, color: r }) : o === i ? /* @__PURE__ */ e(m, { size: 18, color: r }) : /* @__PURE__ */ e(u, { size: 22, color: r }), z = (o) => o === t ? 1.6 : o === i ? 1.76 : 2.08, R = ({ type: o, $main: r, $side: n }) => {
   const s = h(o, r);
-  return /* @__PURE__ */ c(u, { $side: n, children: [
+  return /* @__PURE__ */ c(g, { "aria-hidden": "true", $side: n, children: [
     /* @__PURE__ */ e(l, { $main: r }),
     /* @__PURE__ */ e(C, { $main: r, type: o }),
-    /* @__PURE__ */ e(z, { size: I(o), children: s })
+    /* @__PURE__ */ e(d, { size: z(o), children: s })
   ] });
 };
 export {

package/components/Toast/styles.js

@@ -1,9 +1,15 @@
-import r, { keyframes as s, css as o } from "styled-components";
-import i from "../../colors/white.js";
-import n from "../Icons/Close/Close.js";
+import t, { keyframes as o, css as i } from "styled-components";
+import s from "../../colors/white.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 = o`
+  from { transform: scale(0); }
+  to   { transform: scale(1); }
+`, c = o`
+  from { transform: translate(-50%, -50%) scale(0); }
+  to   { transform: translate(-50%, -50%) scale(1); }
+`, h = o`
   from {
     opacity: 0;
     transform: translateX(100%); /* Start off-screen to the right */
@@ -12,7 +18,7 @@ const m = s`
     opacity: 1;
     transform: translateX(0); /* Move to its final position */
   }
-`, h = s`
+`, f = o`
   from {
     opacity: 1;
     transform: translateX(0);
@@ -21,7 +27,7 @@ const m = s`
     opacity: 0;
     transform: translateX(100%); /* Move off-screen to the right */
   }
-`, w = r.div`
+`, $ = t.div`
   position: fixed;
   top: 1.6rem;
   right: 1.6rem;
@@ -30,7 +36,7 @@ const m = s`
   display: flex;
   flex-direction: column;
   gap: 1.6rem;
-`, x = r.div`
+`, y = t.div`
   display: flex;
   align-items: center;
   justify-content: space-between;
@@ -44,12 +50,12 @@ const m = s`
 
   &.fade-in {
     opacity: 1;
-    animation: ${m} 0.5s ease-out forwards; /* slide down + fade */
+    animation: ${h} 0.5s ease-out forwards; /* slide down + fade */
   }
 
   &.fade-out {
     opacity: 0;
-    animation: ${h} 0.5s ease-in forwards; /* slide right */
+    animation: ${f} 0.5s ease-in forwards; /* slide right */
   }
 
   @media screen and (max-width: 768px) {
@@ -58,21 +64,21 @@ const m = s`
     border-radius: 0.96rem;
     padding: 0.48rem 1.28rem;
   }
-`, b = r.div`
+`, v = t.div`
   position: absolute;
   top: 50%;
   left: 50%;
   transform: translate(-50%, -50%);
-  background-color: ${i};
+  background-color: ${s};
 
-  ${({ type: e, $main: t }) => e === a ? o`
+  ${({ type: e, $main: r }) => e === n ? i`
           top: 48%;
-          border-color: ${t} ${t} ${i} ${t};
+          border-color: ${r} ${r} ${s} ${r};
           border-style: solid;
           border-width: 0 1.44rem 2.24rem 1.44rem;
           height: 0;
           width: 0;
-        ` : o`
+        ` : i`
           top: 50%;
           width: 2.88rem;
           height: 2.88rem;
@@ -80,32 +86,33 @@ const m = s`
         `}
 
   @media screen and (max-width: 768px) {
-    ${({ type: e, $main: t }) => e === a ? o`
+    ${({ type: e, $main: r }) => e === n ? i`
             top: 48%;
-            border-color: ${t} ${t} ${i} ${t};
+            border-color: ${r} ${r} ${s} ${r};
             border-style: solid;
             border-width: 0 1.12rem 1.68rem 1.088rem;
             height: 0;
             width: 0;
-          ` : o`
+          ` : i`
             top: 50%;
             width: 2.16rem;
             height: 2.16rem;
             border-radius: 50%;
           `}
   }
-`, u = r.div`
+`, k = t.div`
   position: relative;
   width: 6.4rem;
   height: 6.4rem;
   border-radius: 50%;
   background-color: ${({ $side: e }) => e};
+  animation: ${l} 0.7s cubic-bezier(0.16, 1, 0.3, 1) 0.5s both;
 
   @media screen and (max-width: 768px) {
     width: 4.8rem;
     height: 4.8rem;
   }
-`, $ = r.div`
+`, C = t.div`
   position: absolute;
   top: 50%;
   left: 50%;
@@ -119,7 +126,7 @@ const m = s`
     transform: translate(-42.8%, -42.8%);
     scale: 0.75;
   }
-`, y = r.div`
+`, R = t.div`
   position: absolute;
   top: 50%;
   left: 50%;
@@ -128,18 +135,54 @@ const m = s`
   height: 4.8rem;
   border-radius: 50%;
   background-color: ${({ $main: e }) => e};
+  animation: ${c} 0.7s cubic-bezier(0.16, 1, 0.3, 1) 0.65s both;
 
   @media screen and (max-width: 768px) {
     width: 3.6rem;
     height: 3.6rem;
   }
-`, v = r(n)`
+`, a = 75.4, p = o`
+  from { stroke-dashoffset: ${a}; }
+  to   { stroke-dashoffset: 0; }
+`, z = 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: ${a};
+  }
+
+  circle:first-child {
+    opacity: 0.15;
+    stroke-dashoffset: 0;
+  }
+
+  circle:last-child {
+    stroke-dashoffset: ${a};
+    animation: ${p} ${({ $duration: e }) => e - 0.5}s linear forwards;
+    animation-play-state: ${({ $paused: e }) => e ? "paused" : "running"};
+  }
+`, G = 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 +191,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,
+  z as CloseButtonContainer,
+  G as CloseWrapper,
+  C as Icon,
+  v as LogoContainer,
+  N as Message,
+  k as Outer,
+  R as OuterChild,
+  I as ProgressRing,
   X as Subtitle,
-  k as Title,
-  x as ToastWrapper,
-  w as ToastsContainer
+  M as Title,
+  y as ToastWrapper,
+  $ as ToastsContainer
 };

package/package.json

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