meticulous-ui 3.5.1 → 3.5.2

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.2",
   "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",