meticulous-ui 2.9.3 → 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,51 +1,55 @@
-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";
+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, n] = d(e);
-  T(() => {
-    n(e);
+}, B = ({ toasts: e, ...o }) => {
+  const [t, a] = u(e);
+  p(() => {
+    a(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) => () => {
+  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);
-}, W = ({
-  type: e = j,
+}, R = ({
+  type: e = k,
   visible: o = !0,
   duration: t = 5,
-  onExpire: n = O,
+  onExpire: a = O,
   title: m,
-  subtitle: a,
+  subtitle: n,
   ...c
 }) => {
-  const [i, r] = d(o), [l, f] = d(!1);
-  T(() => {
+  const [i, r] = u(o), [l, f] = u(!1);
+  p(() => {
     r(o);
-  }, [o]), T(() => {
-    const S = setTimeout(u(f, r, n), t * 1e3 - 500);
+  }, [o]), p(() => {
+    const S = setTimeout(d(f, r, a), t * 1e3 - 500);
     return () => {
       clearTimeout(S);
     };
-  }, [t, u]);
-  const { main: h, side: C, bg: g } = N[e] ?? k;
+  }, [t, d]);
+  const { main: h, side: C, bg: g } = j[e] ?? w;
   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: [
+    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 }),
-        a && /* @__PURE__ */ s(I, { children: a })
+        n && /* @__PURE__ */ s(I, { children: n })
       ] }),
-      /* @__PURE__ */ s(M, { size: 20, color: L.m600, onClick: u(f, r, n) })
+      /* @__PURE__ */ s(M, { size: 20, color: N.m600, onClick: d(f, r, a) })
     ] });
 };
 export {
-  b as ToastContainer,
-  W as default
+  B as ToastContainer,
+  R as default
 };

package/package.json

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