meticulous-ui 3.0.2 → 3.0.4

package/components/Icons/WarningTriangleFilled/index.js

@@ -0,0 +1,4 @@
+import a from "./WarningTriangleFilled.js";
+export {
+  a as default
+};

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

@@ -1,17 +1,19 @@
-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 }) => {
-  const s = h(o, r);
-  return /* @__PURE__ */ c(u, { $side: n, children: [
-    /* @__PURE__ */ e(l, { $main: r }),
-    /* @__PURE__ */ e(C, { $main: r, type: o }),
-    /* @__PURE__ */ e(z, { size: I(o), children: s })
+import { jsxs as s, jsx as i } from "react/jsx-runtime";
+import { WARNING as e, ERROR as t, SUCCESS as n } from "./constants.js";
+import c from "../Icons/Close/Close.js";
+import l from "../Icons/Check/Check.js";
+import u from "../Icons/Info/Info.js";
+import g from "../Icons/WarningTriangleFilled/WarningTriangleFilled.js";
+import C from "../../colors/white.js";
+import { Outer as d, OuterChild as h, LogoContainer as z, Icon as I } from "./styles.js";
+const L = (r, o) => r === t ? /* @__PURE__ */ i(c, { size: 16, color: o }) : r === n ? /* @__PURE__ */ i(l, { size: 18, color: o }) : r === e ? /* @__PURE__ */ i(g, { size: 28, color: C }) : /* @__PURE__ */ i(u, { size: 22, color: o }), R = (r) => r === t ? 1.6 : r === n ? 1.76 : r === e ? 2.8 : 2.08, W = ({ type: r, $main: o, $side: f }) => {
+  const m = L(r, o);
+  return /* @__PURE__ */ s(d, { "aria-hidden": "true", $side: f, children: [
+    /* @__PURE__ */ i(h, { $main: o }),
+    r !== e && /* @__PURE__ */ i(z, { $main: o, type: r }),
+    /* @__PURE__ */ i(I, { size: R(r), children: m })
   ] });
 };
 export {
-  R as Logo
+  W as Logo
 };

package/components/Toast/styles.js

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

package/package.json

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