meticulous-ui 2.9.2 → 2.9.3

package/components/Toast/Toast.js

@@ -1,43 +1,51 @@
-import { jsxs as n, jsx as r } from "react/jsx-runtime";
-import { useState as f, useEffect as u } from "react";
-import { Logo as S } from "./helpers.js";
-import $ from "../../colors/grey.js";
-import { COLOR_MAP as F, INFO as L, INFO_COLORS as N } from "./constants.js";
-import { ToastWrapper as j, Message as w, Title as x, Subtitle as I, CloseWrapper as M } from "./styles.js";
-const R = () => {
-}, m = (o, e, t) => () => {
-  o(!0), setTimeout(() => {
-    e(!1), t();
+import { jsxs as p, jsx as s } from "react/jsx-runtime";
+import { useState as d, useEffect as T, createElement as $ } from "react";
+import { Logo as F } from "./helpers.js";
+import L from "../../colors/grey.js";
+import { COLOR_MAP as N, INFO as j, INFO_COLORS as k } from "./constants.js";
+import { ToastWrapper as w, Message as x, Title as A, Subtitle as I, CloseWrapper as M, ToastsContainer as R } from "./styles.js";
+const O = () => {
+}, b = ({ toasts: e, ...o }) => {
+  const [t, n] = d(e);
+  T(() => {
+    n(e);
+  }, [e]);
+  const m = ({ type: a, id: c, title: i, subtitle: r, onExpire: l = O }, f) => /* @__PURE__ */ $(W, { type: a, title: i, subtitle: r, key: c, onExpire: l });
+  return /* @__PURE__ */ s(R, { ...o, children: [...t].reverse().map(m) });
+}, u = (e, o, t) => () => {
+  e(!0), setTimeout(() => {
+    o(!1), t();
   }, 500);
-}, b = ({
-  type: o = L,
-  visible: e = !0,
+}, W = ({
+  type: e = j,
+  visible: o = !0,
   duration: t = 5,
-  onExpire: a = R,
-  title: l,
-  subtitle: i,
-  ...d
+  onExpire: n = O,
+  title: m,
+  subtitle: a,
+  ...c
 }) => {
-  const [p, s] = f(e), [O, c] = f(!1);
-  u(() => {
-    s(e);
-  }, [e]), u(() => {
-    const C = setTimeout(m(c, s, a), t * 1e3 - 500);
+  const [i, r] = d(o), [l, f] = d(!1);
+  T(() => {
+    r(o);
+  }, [o]), T(() => {
+    const S = setTimeout(u(f, r, n), t * 1e3 - 500);
     return () => {
-      clearTimeout(C);
+      clearTimeout(S);
     };
-  }, [t, m]);
-  const { main: T, side: h, bg: g } = F[o] ?? N;
-  if (p)
-    return /* @__PURE__ */ n(j, { $bg: g, className: `${O ? "fade-out" : "fade-in"}`, ...d, children: [
-      /* @__PURE__ */ r(S, { type: o, $main: T, $side: h }),
-      /* @__PURE__ */ n(w, { children: [
-        /* @__PURE__ */ r(x, { children: l }),
-        i && /* @__PURE__ */ r(I, { children: i })
+  }, [t, u]);
+  const { main: h, side: C, bg: g } = N[e] ?? k;
+  if (i)
+    return /* @__PURE__ */ p(w, { $bg: g, className: `${l ? "fade-out" : "fade-in"}`, ...c, children: [
+      /* @__PURE__ */ s(F, { type: e, $main: h, $side: C }),
+      /* @__PURE__ */ p(x, { children: [
+        /* @__PURE__ */ s(A, { children: m }),
+        a && /* @__PURE__ */ s(I, { children: a })
       ] }),
-      /* @__PURE__ */ r(M, { size: 20, color: $.m600, onClick: m(c, s, a) })
+      /* @__PURE__ */ s(M, { size: 20, color: L.m600, onClick: u(f, r, n) })
     ] });
 };
 export {
-  b as default
+  b as ToastContainer,
+  W as default
 };

package/components/Toast/index.js

@@ -1,4 +1,6 @@
 import t from "./Toast.js";
+import { ToastContainer as e } from "./Toast.js";
 export {
+  e as ToastContainer,
   t as default
 };

package/components/Toast/styles.js

@@ -1,9 +1,9 @@
-import r, { keyframes as d, css as o } from "styled-components";
+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 s from "../../colors/grey.js";
+import d from "../../colors/grey.js";
 import { WARNING as a } from "./constants.js";
-const m = d`
+const m = s`
   from {
     opacity: 0;
     transform: translateX(100%); /* Start off-screen to the right */
@@ -12,7 +12,7 @@ const m = d`
     opacity: 1;
     transform: translateX(0); /* Move to its final position */
   }
-`, h = d`
+`, h = s`
   from {
     opacity: 1;
     transform: translateX(0);
@@ -21,8 +21,7 @@ const m = d`
     opacity: 0;
     transform: translateX(100%); /* Move off-screen to the right */
   }
-`;
-r.div`
+`, w = r.div`
   position: fixed;
   top: 1rem;
   right: 1rem;
@@ -31,8 +30,7 @@ r.div`
   display: flex;
   flex-direction: column;
   gap: 1rem;
-`;
-const w = r.div`
+`, x = r.div`
   display: flex;
   align-items: center;
   justify-content: space-between;
@@ -60,7 +58,7 @@ const w = r.div`
     border-radius: 0.6rem;
     padding: 0.3rem 0.8rem;
   }
-`, x = r.div`
+`, b = r.div`
   position: absolute;
   top: 50%;
   left: 50%;
@@ -96,7 +94,7 @@ const w = r.div`
             border-radius: 50%;
           `}
   }
-`, b = r.div`
+`, u = r.div`
   position: relative;
   width: 4rem;
   height: 4rem;
@@ -107,7 +105,7 @@ const w = r.div`
     width: 3rem;
     height: 3rem;
   }
-`, u = r.div`
+`, $ = r.div`
   position: absolute;
   top: 50%;
   left: 50%;
@@ -121,7 +119,7 @@ const w = r.div`
     transform: translate(-42.8%, -42.8%);
     scale: 0.75;
   }
-`, $ = r.div`
+`, y = r.div`
   position: absolute;
   top: 50%;
   left: 50%;
@@ -135,13 +133,13 @@ const w = r.div`
     width: 2.25rem;
     height: 2.25rem;
   }
-`, y = r(n)`
+`, v = r(n)`
   cursor: pointer;
-`, v = r.div`
+`, k = r.div`
   font-weight: 600;
   font-size: 1.2rem;
-  color: ${s.m800};
-`, k = r.div`
+  color: ${d.m800};
+`, C = r.div`
   display: flex;
   flex-direction: column;
   gap: 0.2rem;
@@ -150,19 +148,20 @@ const w = r.div`
   @media screen and (max-width: 768px) {
     width: 15rem;
   }
-`, C = r.div`
+`, X = r.div`
   font-weight: 400;
   font-size: 1rem;
-  color: ${s.m700};
+  color: ${d.m700};
 `;
 export {
-  y as CloseWrapper,
-  u as Icon,
-  x as LogoContainer,
-  k as Message,
-  b as Outer,
-  $ as OuterChild,
-  C as Subtitle,
-  v as Title,
-  w as ToastWrapper
+  v as CloseWrapper,
+  $ as Icon,
+  b as LogoContainer,
+  C as Message,
+  u as Outer,
+  y as OuterChild,
+  X as Subtitle,
+  k as Title,
+  x as ToastWrapper,
+  w as ToastsContainer
 };

package/index.js

@@ -1,58 +1,59 @@
 import { default as a } from "./components/Pagination/Pagination.js";
-import { default as t } from "./components/Toast/Toast.js";
-import { default as p } from "./components/Spinner/Spinner.js";
-import { default as l } from "./components/Loader/Loader.js";
+import { default as t, ToastContainer as f } from "./components/Toast/Toast.js";
+import { default as d } from "./components/Spinner/Spinner.js";
+import { default as s } from "./components/Loader/Loader.js";
 import { default as m } from "./components/PageLoader/PageLoader.js";
-import { default as x } from "./components/OtpInput/OtpInput.js";
-import { default as n } from "./components/Dropdown/Dropdown.js";
-import { default as c } from "./components/Selectbox/Selectbox.js";
+import { default as i } from "./components/OtpInput/OtpInput.js";
+import { default as H } from "./components/Dropdown/Dropdown.js";
+import { default as P } from "./components/Selectbox/Selectbox.js";
 import { default as g } from "./components/Button/Button.js";
 import { default as S } from "./components/Timer/Timer.js";
-import { default as b } from "./components/Shimmer/Shimmer.js";
+import { default as h } from "./components/Shimmer/Shimmer.js";
 import { default as L } from "./components/VideoPlayer/VideoPlayer.js";
 import { default as w } from "./components/Image/Image.js";
 import { default as B } from "./components/Typography/P/P.js";
-import { default as D } from "./components/Input/Input/Input.js";
-import { default as G } from "./components/Input/Textarea/Textarea.js";
-import { default as R } from "./components/Input/Checkbox/Checkbox.js";
-import { default as V } from "./components/Input/RadioGroup/RadioGroup.js";
-import { default as q } from "./components/Input/FileUploader/FileUploader.js";
-import { default as z } from "./colors/index.js";
-import { default as E } from "./utils/index.js";
-import { default as K } from "./components/Icons/index.js";
-import { default as N } from "./components/Typography/Headings/H1.js";
-import { default as W } from "./components/Typography/Headings/H2.js";
-import { default as Y } from "./components/Typography/Headings/H3.js";
-import { default as _ } from "./components/Typography/Headings/H4.js";
-import { default as ee } from "./components/Typography/Headings/H5.js";
-import { default as ae } from "./components/Typography/Headings/H6.js";
+import { default as F } from "./components/Input/Input/Input.js";
+import { default as O } from "./components/Input/Textarea/Textarea.js";
+import { default as U } from "./components/Input/Checkbox/Checkbox.js";
+import { default as j } from "./components/Input/RadioGroup/RadioGroup.js";
+import { default as v } from "./components/Input/FileUploader/FileUploader.js";
+import { default as A } from "./colors/index.js";
+import { default as J } from "./utils/index.js";
+import { default as M } from "./components/Icons/index.js";
+import { default as Q } from "./components/Typography/Headings/H1.js";
+import { default as X } from "./components/Typography/Headings/H2.js";
+import { default as Z } from "./components/Typography/Headings/H3.js";
+import { default as $ } from "./components/Typography/Headings/H4.js";
+import { default as eo } from "./components/Typography/Headings/H5.js";
+import { default as ro } from "./components/Typography/Headings/H6.js";
 export {
   g as Button,
-  R as Checkbox,
-  n as Dropdown,
-  q as FileUploader,
-  N as H1,
-  W as H2,
-  Y as H3,
-  _ as H4,
-  ee as H5,
-  ae as H6,
+  U as Checkbox,
+  H as Dropdown,
+  v as FileUploader,
+  Q as H1,
+  X as H2,
+  Z as H3,
+  $ as H4,
+  eo as H5,
+  ro as H6,
   w as Image,
-  D as Input,
-  l as Loader,
-  x as OtpInput,
+  F as Input,
+  s as Loader,
+  i as OtpInput,
   B as P,
   m as PageLoader,
   a as Pagination,
-  V as RadioGroup,
-  c as Selectbox,
-  b as Shimmer,
-  p as Spinner,
-  G as Textarea,
+  j as RadioGroup,
+  P as Selectbox,
+  h as Shimmer,
+  d as Spinner,
+  O as Textarea,
   S as Timer,
   t as Toast,
+  f as ToastContainer,
   L as VideoPlayer,
-  z as colors,
-  K as icons,
-  E as utils
+  A as colors,
+  M as icons,
+  J as utils
 };

package/package.json

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