meticulous-ui 2.9.2 → 2.9.4

package/components/Pagination/styles.js

@@ -1,20 +1,20 @@
-import r, { css as n } from "styled-components";
-import f from "../Icons/ChevronLeft/ChevronLeft.js";
-import s from "../Icons/ChevronRight/ChevronRight.js";
-import l from "../../colors/grey.js";
-import c from "../../colors/white.js";
-import a from "../../colors/black.js";
-import { SELECTED_BG as i, NOT_SELECTED_BG as m, ACTIVE_NOT_SELECTED_BG as u } from "./constants.js";
-const t = (o) => ({ $shades: e }) => {
-  if (["#FFFFFF"].includes(e))
-    return a.m900;
+import e, { css as n } from "styled-components";
+import m from "../Icons/ChevronLeft/ChevronLeft.js";
+import f from "../Icons/ChevronRight/ChevronRight.js";
+import s from "../../colors/grey.js";
+import l from "../../colors/white.js";
+import p from "../../colors/black.js";
+import { SELECTED_BG as i, NOT_SELECTED_BG as c, ACTIVE_NOT_SELECTED_BG as u } from "./constants.js";
+const t = (o) => ({ $shades: r }) => {
+  if (["#FFFFFF"].includes(r))
+    return p.m900;
   if (o === i)
-    return e.m600;
-  if (o === m)
-    return e.m50;
+    return r.m600;
+  if (o === c)
+    return r.m50;
   if (o === u)
-    return e.m100;
-}, $ = r.nav`
+    return r.m100;
+}, E = e.nav`
   display: flex;
   justify-content: center;
   align-items: center;
@@ -26,7 +26,7 @@ const t = (o) => ({ $shades: e }) => {
       pointer-events: none;
       opacity: 0.4;
     `};
-`, h = r.button`
+`, $ = e.button`
   border: none;
   padding: 0;
   font-family: inherit;
@@ -43,26 +43,33 @@ const t = (o) => ({ $shades: e }) => {
   font-size: ${({ $fontRemSize: o }) => o}rem;
   ${({ $isSelected: o }) => o ? n`
           cursor: auto;
-          color: ${c};
+          color: ${l};
           background-color: ${t(i)};
-          outline-color: ${t(i)};
+
+          &:focus-visible {
+            outline: 1px solid ${t(i)};
+          }
         ` : n`
           cursor: pointer;
-          color: ${l.m500};
+          color: ${s.m500};
 
           &:hover {
-            background-color: ${t(m)};
+            background-color: ${t(c)};
           }
 
           &:active {
             background-color: ${t(u)};
-            color: ${c};
+            color: ${l};
+          }
+
+          &:focus-visible {
+            outline: 1px solid ${t(c)};
           }
         `}
-`, v = r.span`
-  color: ${l.m500};
+`, C = e.span`
+  color: ${s.m500};
   user-select: none;
-`, x = r.button`
+`, h = e.button`
   border: none;
   background: none;
   padding: 0;
@@ -72,23 +79,26 @@ const t = (o) => ({ $shades: e }) => {
   justify-content: center;
   border-radius: 50%;
   outline-offset: 2px;
-  outline-color: ${({ $shades: o }) => o == null ? void 0 : o.m600};
-`, k = r(f)`
+
+  &:focus-visible {
+    outline: 1px solid ${({ $shades: o }) => o == null ? void 0 : o.m600};
+  }
+`, k = e(m)`
   cursor: pointer;
-`, w = r(s)`
+`, w = e(f)`
   cursor: pointer;
-`, F = r.div`
+`, F = e.div`
   min-width: ${({ size: o }) => o};
   display: flex;
   align-items: center;
   justify-content: space-between;
 `;
 export {
-  $ as AllPages,
-  x as ArrowButton,
+  E as AllPages,
+  h as ArrowButton,
   k as ClickableChevronLeft,
   w as ClickableChevronRight,
-  v as Ellipsis,
+  C as Ellipsis,
   F as MiddleLayer,
-  h as Page
+  $ as Page
 };

package/components/Toast/Toast.js

@@ -1,43 +1,55 @@
-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 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);
+  }, [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) }),
+    document.body
+  );
+}, d = (e, o, t) => () => {
+  e(!0), setTimeout(() => {
+    o(!1), t();
   }, 500);
-}, b = ({
-  type: o = L,
-  visible: e = !0,
+}, R = ({
+  type: e = k,
+  visible: o = !0,
   duration: t = 5,
-  onExpire: a = R,
-  title: l,
-  subtitle: i,
-  ...d
+  onExpire: a = O,
+  title: m,
+  subtitle: n,
+  ...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] = u(o), [l, f] = u(!1);
+  p(() => {
+    r(o);
+  }, [o]), p(() => {
+    const S = setTimeout(d(f, r, a), 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, 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__ */ r(M, { size: 20, color: $.m600, onClick: m(c, s, a) })
+      /* @__PURE__ */ s(M, { size: 20, color: N.m600, onClick: d(f, r, a) })
     ] });
 };
 export {
-  b as default
+  B as ToastContainer,
+  R 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.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",