meticulous-ui 3.7.11 → 3.7.13

package/components/Toast/Toast.js

@@ -1,26 +1,23 @@
-import { jsxs, jsx } from "react/jsx-runtime";
-import { useState, useRef, useEffect, createElement } from "react";
-import { createPortal } from "react-dom";
-import PropTypes from "prop-types";
-import styled, { keyframes } from "styled-components";
-import Close from "../Icons/Close.js";
-import Check from "../Icons/Check.js";
-import Info from "../Icons/Info.js";
-import WarningTriangleFilled from "../Icons/WarningTriangleFilled.js";
-import white from "../../colors/white.js";
-import grey from "../../colors/grey.js";
-import { COLOR_MAP, INFO, INFO_COLORS, ERROR, WARNING, SUCCESS } from "./constants.js";
-const noop = () => {
-};
-const outerRingGrow = keyframes`
+import { jsxs as m, jsx as i } from "react/jsx-runtime";
+import { useState as h, useRef as v, useEffect as y, createElement as B } from "react";
+import { createPortal as D } from "react-dom";
+import t from "prop-types";
+import o, { keyframes as c } from "styled-components";
+import S from "../Icons/Close.js";
+import U from "../Icons/Check.js";
+import q from "../Icons/Info.js";
+import H from "../Icons/WarningTriangleFilled.js";
+import L from "../../colors/white.js";
+import k from "../../colors/grey.js";
+import { COLOR_MAP as J, INFO as K, INFO_COLORS as Q, ERROR as f, WARNING as R, SUCCESS as N } from "./constants.js";
+const P = () => {
+}, V = c`
   from { transform: scale(0); }
   to   { transform: scale(1); }
-`;
-const innerRingGrow = keyframes`
+`, Y = c`
   from { transform: translate(-50%, -50%) scale(0); }
   to   { transform: translate(-50%, -50%) scale(1); }
-`;
-const slideIn = keyframes`
+`, Z = c`
   from {
     opacity: 0;
     transform: translateX(100%); /* Start off-screen to the right */
@@ -29,8 +26,7 @@ const slideIn = keyframes`
     opacity: 1;
     transform: translateX(0); /* Move to its final position */
   }
-`;
-const slideOut = keyframes`
+`, ee = c`
   from {
     opacity: 1;
     transform: translateX(0);
@@ -39,8 +35,7 @@ const slideOut = keyframes`
     opacity: 0;
     transform: translateX(100%); /* Move off-screen to the right */
   }
-`;
-const ToastsContainer = /*@__PURE__*/styled.div`
+`, re = o.div`
   position: fixed;
   top: 1.6rem;
   right: 1.6rem;
@@ -49,14 +44,11 @@ const ToastsContainer = /*@__PURE__*/styled.div`
   display: flex;
   flex-direction: column;
   gap: 1.6rem;
-`;
-const ToastWrapper = /*@__PURE__*/styled.div`
+`, te = o.div`
   display: flex;
   align-items: center;
   justify-content: space-between;
-  background-color: ${({
-  $bg
-}) => $bg};
+  background-color: ${({ $bg: e }) => e};
   height: 7.68rem;
   width: 44.8rem;
   border-radius: 1.28rem;
@@ -66,12 +58,12 @@ const ToastWrapper = /*@__PURE__*/styled.div`
 
   &.fade-in {
     opacity: 1;
-    animation: ${slideIn} 0.5s ease-out forwards; /* slide down + fade */
+    animation: ${Z} 0.5s ease-out forwards; /* slide down + fade */
   }
 
   &.fade-out {
     opacity: 0;
-    animation: ${slideOut} 0.5s ease-in forwards; /* slide right */
+    animation: ${ee} 0.5s ease-in forwards; /* slide right */
   }
 
   @media screen and (max-width: 768px) {
@@ -94,13 +86,12 @@ const ToastWrapper = /*@__PURE__*/styled.div`
     border-radius: 0.8rem;
     padding: 0.4rem 1rem;
   }
-`;
-const LogoContainer = /*@__PURE__*/styled.div`
+`, ie = o.div`
   position: absolute;
   top: 50%;
   left: 50%;
   transform: translate(-50%, -50%);
-  background-color: ${white};
+  background-color: ${L};
   width: 2.88rem;
   height: 2.88rem;
   border-radius: 50%;
@@ -119,16 +110,13 @@ const LogoContainer = /*@__PURE__*/styled.div`
     width: 1.76rem;
     height: 1.76rem;
   }
-`;
-const Outer = /*@__PURE__*/styled.div`
+`, oe = o.div`
   position: relative;
   width: 6.4rem;
   height: 6.4rem;
   border-radius: 50%;
-  background-color: ${({
-  $side
-}) => $side};
-  animation: ${outerRingGrow} 0.7s cubic-bezier(0.16, 1, 0.3, 1) 0.5s both;
+  background-color: ${({ $side: e }) => e};
+  animation: ${V} 0.7s cubic-bezier(0.16, 1, 0.3, 1) 0.5s both;
 
   @media screen and (max-width: 768px) {
     width: 4.8rem;
@@ -144,20 +132,13 @@ const Outer = /*@__PURE__*/styled.div`
     width: 3.9rem;
     height: 3.9rem;
   }
-`;
-const Icon = /*@__PURE__*/styled.div`
+`, ne = o.div`
   position: absolute;
-  top: ${({
-  $isWarning
-}) => $isWarning ? "49%" : "50%"};
+  top: ${({ $isWarning: e }) => e ? "49%" : "50%"};
   left: 50%;
   transform: translate(-50%, -50%);
-  width: ${({
-  size
-}) => size}rem;
-  height: ${({
-  size
-}) => size}rem;
+  width: ${({ size: e }) => e}rem;
+  height: ${({ size: e }) => e}rem;
   display: flex;
   align-items: center;
   justify-content: center;
@@ -166,17 +147,12 @@ const Icon = /*@__PURE__*/styled.div`
     top: 42.8%;
     left: 42.8%;
     transform: translate(
-      ${({
-  $isWarning
-}) => $isWarning ? "-45.8%" : "-42.8%"},
-      ${({
-  $isWarning
-}) => $isWarning ? "-50.8%" : "-42.8%"}
+      ${({ $isWarning: e }) => e ? "-45.8%" : "-42.8%"},
+      ${({ $isWarning: e }) => e ? "-50.8%" : "-42.8%"}
     );
     scale: 0.75;
   }
-`;
-const OuterChild = /*@__PURE__*/styled.div`
+`, ae = o.div`
   position: absolute;
   top: 50%;
   left: 50%;
@@ -184,10 +160,8 @@ const OuterChild = /*@__PURE__*/styled.div`
   width: 4.8rem;
   height: 4.8rem;
   border-radius: 50%;
-  background-color: ${({
-  $main
-}) => $main};
-  animation: ${innerRingGrow} 0.7s cubic-bezier(0.16, 1, 0.3, 1) 0.65s both;
+  background-color: ${({ $main: e }) => e};
+  animation: ${Y} 0.7s cubic-bezier(0.16, 1, 0.3, 1) 0.65s both;
 
   @media screen and (max-width: 768px) {
     width: 3.6rem;
@@ -203,13 +177,10 @@ const OuterChild = /*@__PURE__*/styled.div`
     width: 2.9rem;
     height: 2.9rem;
   }
-`;
-const RING_CIRCUMFERENCE = 75.4;
-const timerProgress = keyframes`
-  from { stroke-dashoffset: ${RING_CIRCUMFERENCE}; }
+`, C = 75.4, se = c`
+  from { stroke-dashoffset: ${C}; }
   to   { stroke-dashoffset: 0; }
-`;
-const CloseButtonContainer = /*@__PURE__*/styled.div`
+`, de = o.div`
   position: relative;
   display: inline-flex;
   align-items: center;
@@ -217,23 +188,18 @@ const CloseButtonContainer = /*@__PURE__*/styled.div`
   flex-shrink: 0;
   width: 2.8rem;
   height: 2.8rem;
-`;
-const ProgressRing = /*@__PURE__*/styled.svg`
+`, me = o.svg`
   position: absolute;
   inset: 0;
-  transform: ${({
-  $hasClockwiseRotation
-}) => $hasClockwiseRotation ? "rotate(-90deg)" : "rotate(90deg) scaleX(-1)"};
+  transform: ${({ $hasClockwiseRotation: e }) => e ? "rotate(-90deg)" : "rotate(90deg) scaleX(-1)"};
   pointer-events: none;
 
   circle {
     fill: none;
-    stroke: ${({
-  $color
-}) => $color};
+    stroke: ${({ $color: e }) => e};
     stroke-width: 2;
     stroke-linecap: round;
-    stroke-dasharray: ${RING_CIRCUMFERENCE};
+    stroke-dasharray: ${C};
   }
 
   circle:first-child {
@@ -242,22 +208,16 @@ const ProgressRing = /*@__PURE__*/styled.svg`
   }
 
   circle:last-child {
-    stroke-dashoffset: ${RING_CIRCUMFERENCE};
-    animation: ${timerProgress} ${({
-  $duration
-}) => $duration - 0.5}s linear forwards;
-    animation-play-state: ${({
-  $paused
-}) => $paused ? "paused" : "running"};
+    stroke-dashoffset: ${C};
+    animation: ${se} ${({ $duration: e }) => e - 0.5}s linear forwards;
+    animation-play-state: ${({ $paused: e }) => e ? "paused" : "running"};
   }
-`;
-const CloseWrapper = /*@__PURE__*/styled(Close)`
+`, ce = o(S)`
   cursor: pointer;
-`;
-const Title = /*@__PURE__*/styled.div`
+`, le = o.div`
   font-weight: 600;
   font-size: 1.92rem;
-  color: ${grey.m800};
+  color: ${k.m800};
 
   @media screen and (max-width: 480px) {
     font-size: 1.72rem;
@@ -266,8 +226,7 @@ const Title = /*@__PURE__*/styled.div`
   @media screen and (max-width: 380px) {
     font-size: 1.56rem;
   }
-`;
-const Message = /*@__PURE__*/styled.div`
+`, he = o.div`
   display: flex;
   flex-direction: column;
   gap: 0.32rem;
@@ -285,11 +244,10 @@ const Message = /*@__PURE__*/styled.div`
     max-width: 18rem;
     width: auto;
   }
-`;
-const Subtitle = /*@__PURE__*/styled.div`
+`, fe = o.div`
   font-weight: 400;
   font-size: 1.6rem;
-  color: ${grey.m700};
+  color: ${k.m700};
 
   @media screen and (max-width: 480px) {
     font-size: 1.44rem;
@@ -298,172 +256,128 @@ const Subtitle = /*@__PURE__*/styled.div`
   @media screen and (max-width: 380px) {
     font-size: 1.32rem;
   }
-`;
-const getLogoImage = (type, main) => {
-  if (type === ERROR) {
-    return /* @__PURE__ */ jsx(Close, { size: 16, color: main });
-  }
-  if (type === SUCCESS) {
-    return /* @__PURE__ */ jsx(Check, { size: 18, color: main });
-  }
-  if (type === WARNING) {
-    return /* @__PURE__ */ jsx(WarningTriangleFilled, { size: 28, color: white });
-  }
-  return /* @__PURE__ */ jsx(Info, { size: 22, color: main });
-};
-const getLogoContainerSize = (type) => {
-  if (type === ERROR) {
-    return 1.6;
-  }
-  if (type === SUCCESS) {
-    return 1.76;
-  }
-  if (type === WARNING) {
-    return 2.8;
-  }
-  return 2.08;
-};
-const Logo = ({
-  type,
-  $main,
-  $side
-}) => {
-  const logoImg = getLogoImage(type, $main);
-  const isWarning = type === WARNING;
-  return /* @__PURE__ */ jsxs(Outer, { "aria-hidden": "true", ...{
-    $side
-  }, children: [
-    /* @__PURE__ */ jsx(OuterChild, { ...{
-      $main
-    } }),
-    !isWarning && /* @__PURE__ */ jsx(LogoContainer, { ...{
-      $main,
-      type
-    } }),
-    /* @__PURE__ */ jsx(Icon, { size: getLogoContainerSize(type), $isWarning: isWarning, children: logoImg })
+`, ue = (e, r) => e === f ? /* @__PURE__ */ i(S, { size: 16, color: r }) : e === N ? /* @__PURE__ */ i(U, { size: 18, color: r }) : e === R ? /* @__PURE__ */ i(H, { size: 28, color: L }) : /* @__PURE__ */ i(q, { size: 22, color: r }), pe = (e) => e === f ? 1.6 : e === N ? 1.76 : e === R ? 2.8 : 2.08, ge = ({ type: e, $main: r, $side: n }) => {
+  const a = ue(e, r), s = e === R;
+  return /* @__PURE__ */ m(oe, { "aria-hidden": "true", $side: n, children: [
+    /* @__PURE__ */ i(ae, { $main: r }),
+    !s && /* @__PURE__ */ i(ie, { $main: r, type: e }),
+    /* @__PURE__ */ i(ne, { size: pe(e), $isWarning: s, children: a })
   ] });
+}, we = ({ toasts: e, ...r }) => {
+  const [n, a] = h(e);
+  y(() => {
+    a(e);
+  }, [e]);
+  const s = ({ type: u, id: l, title: p, subtitle: g, duration: d, onExpire: w = P }, x) => /* @__PURE__ */ B(W, { type: u, title: p, subtitle: g, duration: d, key: l, onExpire: w });
+  return D(
+    /* @__PURE__ */ i(re, { ...r, children: [...n].reverse().map(s) }),
+    document.body
+  );
 };
-const ToastContainer = ({
-  toasts,
-  ...rest
-}) => {
-  const [allToasts, setAllToasts] = useState(toasts);
-  useEffect(() => {
-    setAllToasts(toasts);
-  }, [toasts]);
-  const renderToasts = ({
-    type,
-    id,
-    title,
-    subtitle,
-    duration,
-    onExpire = noop
-  }, i) => /* @__PURE__ */ createElement(Toast, { ...{
-    type,
-    title,
-    subtitle,
-    duration
-  }, key: id, onExpire });
-  return createPortal(/* @__PURE__ */ jsx(ToastsContainer, { ...rest, children: [...allToasts].reverse().map(renderToasts) }), document.body);
-};
-ToastContainer.propTypes = {
+we.propTypes = {
   /** Array of toast config objects, each with `{ id, type, title, subtitle, duration, onExpire }` */
-  toasts: /* @__PURE__ */ PropTypes.arrayOf(/* @__PURE__ */ PropTypes.shape({
-    id: PropTypes.any,
-    type: PropTypes.string,
-    title: PropTypes.string,
-    subtitle: PropTypes.string,
-    duration: PropTypes.number,
-    onExpire: PropTypes.func
-  }))
+  toasts: t.arrayOf(
+    t.shape({
+      id: t.any,
+      type: t.string,
+      title: t.string,
+      subtitle: t.string,
+      duration: t.number,
+      onExpire: t.func
+    })
+  )
 };
-const remove = (setFadeOut, setShow, onExpire) => () => {
-  setFadeOut(true);
-  setTimeout(() => {
-    setShow(false);
-    onExpire();
+const M = (e, r, n) => () => {
+  e(!0), setTimeout(() => {
+    r(!1), n();
   }, 500);
-};
-const Toast = ({
-  type = INFO,
-  visible = true,
-  duration = 5,
-  onExpire = noop,
-  hasClockwiseRotation = false,
-  title,
-  subtitle,
-  ...rest
+}, W = ({
+  type: e = K,
+  visible: r = !0,
+  duration: n = 5,
+  onExpire: a = P,
+  hasClockwiseRotation: s = !1,
+  title: u,
+  subtitle: l,
+  ...p
 }) => {
-  var _a;
-  const [show, setShow] = useState(visible);
-  const [fadeOut, setFadeOut] = useState(false);
-  const [paused, setPaused] = useState(false);
-  const timerRef = useRef(null);
-  const remainingRef = useRef((duration - 0.5) * 1e3);
-  const startTimeRef = useRef(null);
-  const startTimer = (ms) => {
-    startTimeRef.current = Date.now();
-    timerRef.current = setTimeout(remove(setFadeOut, setShow, onExpire), ms);
+  var I;
+  const [g, d] = h(r), [w, x] = h(!1), [j, T] = h(!1), b = v(null), $ = v((n - 0.5) * 1e3), z = v(null), O = (_) => {
+    z.current = Date.now(), b.current = setTimeout(M(x, d, a), _);
   };
-  useEffect(() => {
-    setShow(visible);
-  }, [visible]);
-  useEffect(() => {
-    startTimer(remainingRef.current);
-    return () => clearTimeout(timerRef.current);
-  }, []);
-  const handleMouseEnter = () => {
-    clearTimeout(timerRef.current);
-    remainingRef.current -= Date.now() - startTimeRef.current;
-    setPaused(true);
-  };
-  const handleMouseLeave = () => {
-    setPaused(false);
-    startTimer(remainingRef.current);
-  };
-  const {
-    main: $main,
-    side: $side,
-    bg
-  } = (_a = COLOR_MAP[type]) != null ? _a : INFO_COLORS;
-  if (show) {
-    return /* @__PURE__ */ jsxs(ToastWrapper, { $bg: bg, role: type === ERROR ? "alert" : "status", "aria-live": type === ERROR ? "assertive" : "polite", "aria-atomic": "true", className: `${fadeOut ? "fade-out" : "fade-in"}`, onMouseEnter: handleMouseEnter, onMouseLeave: handleMouseLeave, ...rest, children: [
-      /* @__PURE__ */ jsx(Logo, { ...{
-        type,
-        $main,
-        $side
-      } }),
-      /* @__PURE__ */ jsxs(Message, { children: [
-        /* @__PURE__ */ jsx(Title, { children: title }),
-        subtitle && /* @__PURE__ */ jsx(Subtitle, { children: subtitle })
-      ] }),
-      /* @__PURE__ */ jsxs(CloseButtonContainer, { children: [
-        /* @__PURE__ */ jsxs(ProgressRing, { "aria-hidden": "true", viewBox: "0 0 28 28", $duration: duration, $color: $main, $paused: paused, $hasClockwiseRotation: hasClockwiseRotation, children: [
-          /* @__PURE__ */ jsx("circle", { cx: "14", cy: "14", r: "12" }),
-          /* @__PURE__ */ jsx("circle", { cx: "14", cy: "14", r: "12" })
-        ] }),
-        /* @__PURE__ */ jsx(CloseWrapper, { "aria-label": "Close notification", size: 13, color: grey.m600, onClick: remove(setFadeOut, setShow, onExpire) })
-      ] })
-    ] });
-  }
+  y(() => {
+    d(r);
+  }, [r]), y(() => (O($.current), () => clearTimeout(b.current)), []);
+  const F = () => {
+    clearTimeout(b.current), $.current -= Date.now() - z.current, T(!0);
+  }, X = () => {
+    T(!1), O($.current);
+  }, { main: E, side: G, bg: A } = (I = J[e]) != null ? I : Q;
+  if (g)
+    return /* @__PURE__ */ m(
+      te,
+      {
+        $bg: A,
+        role: e === f ? "alert" : "status",
+        "aria-live": e === f ? "assertive" : "polite",
+        "aria-atomic": "true",
+        className: `${w ? "fade-out" : "fade-in"}`,
+        onMouseEnter: F,
+        onMouseLeave: X,
+        ...p,
+        children: [
+          /* @__PURE__ */ i(ge, { type: e, $main: E, $side: G }),
+          /* @__PURE__ */ m(he, { children: [
+            /* @__PURE__ */ i(le, { children: u }),
+            l && /* @__PURE__ */ i(fe, { children: l })
+          ] }),
+          /* @__PURE__ */ m(de, { children: [
+            /* @__PURE__ */ m(
+              me,
+              {
+                "aria-hidden": "true",
+                viewBox: "0 0 28 28",
+                $duration: n,
+                $color: E,
+                $paused: j,
+                $hasClockwiseRotation: s,
+                children: [
+                  /* @__PURE__ */ i("circle", { cx: "14", cy: "14", r: "12" }),
+                  /* @__PURE__ */ i("circle", { cx: "14", cy: "14", r: "12" })
+                ]
+              }
+            ),
+            /* @__PURE__ */ i(
+              ce,
+              {
+                "aria-label": "Close notification",
+                size: 13,
+                color: k.m600,
+                onClick: M(x, d, a)
+              }
+            )
+          ] })
+        ]
+      }
+    );
 };
-Toast.propTypes = {
+W.propTypes = {
   /** Notification variant: `'info'`, `'success'`, `'warning'`, or `'error'`. Defaults to `'info'` */
-  type: PropTypes.string,
+  type: t.string,
   /** Controls initial visibility. Defaults to `true` */
-  visible: PropTypes.bool,
+  visible: t.bool,
   /** Auto-dismiss delay in seconds. Defaults to `5` */
-  duration: PropTypes.number,
+  duration: t.number,
   /** Called when the toast auto-dismisses or is closed */
-  onExpire: PropTypes.func,
+  onExpire: t.func,
   /** Reverses the progress ring rotation direction */
-  hasClockwiseRotation: PropTypes.bool,
+  hasClockwiseRotation: t.bool,
   /** Primary notification text */
-  title: PropTypes.string,
+  title: t.string,
   /** Secondary detail text shown below the title */
-  subtitle: PropTypes.string
+  subtitle: t.string
 };
 export {
-  ToastContainer,
-  Toast as default
+  we as ToastContainer,
+  W as default
 };

package/components/Toast/constants.js

@@ -1,39 +1,34 @@
-import green from "../../colors/green.js";
-import orange from "../../colors/orange.js";
-import red from "../../colors/red.js";
-import { blue } from "../../colors/blue.js";
-const SUCCESS = "success";
-const WARNING = "warning";
-const INFO = "info";
-const ERROR = "error";
-const INFO_COLORS = {
-  main: blue.m500,
-  side: blue.m100,
-  bg: blue.m50
-};
-const COLOR_MAP = {
-  [SUCCESS]: {
-    main: green.m500,
-    side: green.m100,
-    bg: green.m50
+import m from "../../colors/green.js";
+import o from "../../colors/orange.js";
+import r from "../../colors/red.js";
+import { blue as n } from "../../colors/blue.js";
+const i = "success", s = "warning", e = "info", t = "error", c = {
+  main: n.m500,
+  side: n.m100,
+  bg: n.m50
+}, b = {
+  [i]: {
+    main: m.m500,
+    side: m.m100,
+    bg: m.m50
   },
-  [WARNING]: {
-    main: orange.m500,
-    side: orange.m100,
-    bg: orange.m50
+  [s]: {
+    main: o.m500,
+    side: o.m100,
+    bg: o.m50
   },
-  [INFO]: INFO_COLORS,
-  [ERROR]: {
-    main: red.m500,
-    side: red.m100,
-    bg: red.m50
+  [e]: c,
+  [t]: {
+    main: r.m500,
+    side: r.m100,
+    bg: r.m50
   }
 };
 export {
-  COLOR_MAP,
-  ERROR,
-  INFO,
-  INFO_COLORS,
-  SUCCESS,
-  WARNING
+  b as COLOR_MAP,
+  t as ERROR,
+  e as INFO,
+  c as INFO_COLORS,
+  i as SUCCESS,
+  s as WARNING
 };

package/components/Toast/index.js

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

package/components/Typography/Headings/H1.js

@@ -1,25 +1,16 @@
-import { jsx } from "react/jsx-runtime";
-import styled from "styled-components";
-import PropTypes from "prop-types";
-const H1Wrapper = /*@__PURE__*/styled.h1`
-  color: ${({
-  $color
-}) => $color};
+import { jsx as t } from "react/jsx-runtime";
+import s from "styled-components";
+import r from "prop-types";
+const m = s.h1`
+  color: ${({ $color: o }) => o};
   font-size: 5.76rem;
-`;
-const H1 = ({
-  color,
-  children,
-  ...rest
-}) => {
-  return /* @__PURE__ */ jsx(H1Wrapper, { $color: color, ...rest, children });
-};
-H1.propTypes = {
+`, n = ({ color: o, children: e, ...p }) => /* @__PURE__ */ t(m, { $color: o, ...p, children: e });
+n.propTypes = {
   /** Heading content */
-  children: PropTypes.node,
+  children: r.node,
   /** Text color (CSS color value or token) */
-  color: PropTypes.string
+  color: r.string
 };
 export {
-  H1 as default
+  n as default
 };