meticulous-ui 3.0.2 → 3.0.3

package/components/Toast/Toast.js

@@ -1,71 +1,85 @@
-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 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";
+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 = () => {
-}, Z = ({ toasts: e, ...r }) => {
-  const [o, s] = u(e);
-  g(() => {
+}, ee = ({ toasts: e, ...r }) => {
+  const [o, s] = i(e);
+  R(() => {
     s(e);
   }, [e]);
-  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__ */ t(G, { ...r, children: [...o].reverse().map(i) }),
+  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
   );
-}, M = (e, r, o) => () => {
+}, v = (e, r, o) => () => {
   e(!0), setTimeout(() => {
     r(!1), o();
   }, 500);
-}, H = ({
+}, J = ({
   type: e = A,
   visible: r = !0,
   duration: o = 5,
   onExpire: s = w,
-  title: i,
-  subtitle: c,
-  ...l
+  title: l,
+  subtitle: a,
+  ...u
 }) => {
-  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);
+  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);
   };
-  g(() => {
+  R(() => {
     n(r);
-  }, [r]), g(() => (R(T.current), () => clearTimeout(p.current)), []);
+  }, [r]), R(() => (g(p.current), () => clearTimeout(T.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;
+    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__ */ a(
+    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: y,
-        ...l,
+        onMouseLeave: E,
+        ...u,
         children: [
-          /* @__PURE__ */ t(N, { type: e, $main: $, $side: P }),
-          /* @__PURE__ */ a(I, { children: [
-            /* @__PURE__ */ t(W, { children: i }),
-            c && /* @__PURE__ */ t(_, { children: c })
+          /* @__PURE__ */ t(j, { type: e, $main: $, $side: P }),
+          /* @__PURE__ */ c(I, { children: [
+            /* @__PURE__ */ t(W, { children: l }),
+            a && /* @__PURE__ */ t(_, { children: a })
           ] }),
-          /* @__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(
+          /* @__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: j.m600,
-                onClick: M(f, n, s)
+                color: k.m600,
+                onClick: v(f, n, s)
               }
             )
           ] })
@@ -74,6 +88,6 @@ const w = () => {
     );
 };
 export {
-  Z as ToastContainer,
-  H 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 t, { keyframes as a, css as o } from "styled-components";
-import i from "../../colors/white.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 n } from "./constants.js";
-const l = a`
+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 l = a`
     opacity: 1;
     transform: translateX(0); /* Move to its final position */
   }
-`, c = a`
+`, f = o`
   from {
     opacity: 1;
     transform: translateX(0);
@@ -21,7 +27,7 @@ const l = a`
     opacity: 0;
     transform: translateX(100%); /* Move off-screen to the right */
   }
-`, x = t.div`
+`, $ = t.div`
   position: fixed;
   top: 1.6rem;
   right: 1.6rem;
@@ -30,7 +36,7 @@ const l = a`
   display: flex;
   flex-direction: column;
   gap: 1.6rem;
-`, b = t.div`
+`, y = t.div`
   display: flex;
   align-items: center;
   justify-content: space-between;
@@ -44,12 +50,12 @@ const l = a`
 
   &.fade-in {
     opacity: 1;
-    animation: ${l} 0.5s ease-out forwards; /* slide down + fade */
+    animation: ${h} 0.5s ease-out forwards; /* slide down + fade */
   }
 
   &.fade-out {
     opacity: 0;
-    animation: ${c} 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 l = a`
     border-radius: 0.96rem;
     padding: 0.48rem 1.28rem;
   }
-`, $ = t.div`
+`, v = t.div`
   position: absolute;
   top: 50%;
   left: 50%;
   transform: translate(-50%, -50%);
-  background-color: ${i};
+  background-color: ${s};
 
-  ${({ type: e, $main: r }) => e === n ? o`
+  ${({ type: e, $main: r }) => e === n ? i`
           top: 48%;
-          border-color: ${r} ${r} ${i} ${r};
+          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 l = a`
         `}
 
   @media screen and (max-width: 768px) {
-    ${({ type: e, $main: r }) => e === n ? o`
+    ${({ type: e, $main: r }) => e === n ? i`
             top: 48%;
-            border-color: ${r} ${r} ${i} ${r};
+            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%;
           `}
   }
-`, y = t.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;
   }
-`, v = t.div`
+`, C = t.div`
   position: absolute;
   top: 50%;
   left: 50%;
@@ -119,7 +126,7 @@ const l = a`
     transform: translate(-42.8%, -42.8%);
     scale: 0.75;
   }
-`, k = t.div`
+`, R = t.div`
   position: absolute;
   top: 50%;
   left: 50%;
@@ -128,15 +135,16 @@ const l = a`
   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;
   }
-`, s = 75.4, h = a`
-  from { stroke-dashoffset: ${s}; }
+`, a = 75.4, p = o`
+  from { stroke-dashoffset: ${a}; }
   to   { stroke-dashoffset: 0; }
-`, C = t.div`
+`, z = t.div`
   position: relative;
   display: inline-flex;
   align-items: center;
@@ -155,7 +163,7 @@ const l = a`
     stroke: ${({ $color: e }) => e};
     stroke-width: 2;
     stroke-linecap: round;
-    stroke-dasharray: ${s};
+    stroke-dasharray: ${a};
   }
 
   circle:first-child {
@@ -164,11 +172,11 @@ const l = a`
   }
 
   circle:last-child {
-    stroke-dashoffset: ${s};
-    animation: ${h} ${({ $duration: e }) => e - 0.5}s linear forwards;
+    stroke-dashoffset: ${a};
+    animation: ${p} ${({ $duration: e }) => e - 0.5}s linear forwards;
     animation-play-state: ${({ $paused: e }) => e ? "paused" : "running"};
   }
-`, R = t(m)`
+`, G = t(m)`
   cursor: pointer;
 `, M = t.div`
   font-weight: 600;
@@ -189,16 +197,16 @@ const l = a`
   color: ${d.m700};
 `;
 export {
-  C as CloseButtonContainer,
-  R as CloseWrapper,
-  v as Icon,
-  $ as LogoContainer,
+  z as CloseButtonContainer,
+  G as CloseWrapper,
+  C as Icon,
+  v as LogoContainer,
   N as Message,
-  y as Outer,
-  k as OuterChild,
+  k as Outer,
+  R as OuterChild,
   I as ProgressRing,
   X as Subtitle,
   M as Title,
-  b as ToastWrapper,
-  x as ToastsContainer
+  y as ToastWrapper,
+  $ as ToastsContainer
 };

package/package.json

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