meticulous-ui 3.11.2 → 3.11.4

package/cjs/components/Toast/Toast.cjs

@@ -1,4 +1,4 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const t=require("react/jsx-runtime"),n=require("react"),G=require("react-dom"),A=require("prop-types"),l=require("styled-components"),S=require("../Icons/Close.cjs"),F=require("../Icons/Check.cjs"),X=require("../Icons/Info.cjs"),D=require("../Icons/WarningTriangleFilled.cjs"),z=require("../../colors/white.cjs"),$=require("../../colors/grey.cjs"),s=require("./constants.cjs"),E=e=>e&&e.__esModule?e:{default:e},a=E(A),i=E(l),q=()=>{},U=l.keyframes`
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const t=require("react/jsx-runtime"),s=require("react"),G=require("react-dom"),A=require("prop-types"),l=require("styled-components"),S=require("../Icons/Close.cjs"),F=require("../Icons/Check.cjs"),X=require("../Icons/Info.cjs"),D=require("../Icons/WarningTriangleFilled.cjs"),z=require("../../colors/white.cjs"),$=require("../../colors/grey.cjs"),i=require("./constants.cjs"),E=e=>e&&e.__esModule?e:{default:e},a=E(A),n=E(l),q=()=>{},U=l.keyframes`
   from { transform: scale(0); }
   to   { transform: scale(1); }
 `,B=l.keyframes`
@@ -22,7 +22,7 @@
     opacity: 0;
     transform: translateX(100%); /* Move off-screen to the right */
   }
-`,K=i.default.div`
+`,K=n.default.div`
   position: fixed;
   top: 1.6rem;
   right: 1.6rem;
@@ -31,7 +31,7 @@
   display: flex;
   flex-direction: column;
   gap: 1.6rem;
-`,Q=i.default.div`
+`,Q=n.default.div`
   display: flex;
   align-items: center;
   justify-content: space-between;
@@ -73,7 +73,7 @@
     border-radius: 0.8rem;
     padding: 0.4rem 1rem;
   }
-`,V=i.default.div`
+`,V=n.default.div`
   position: absolute;
   top: 50%;
   left: 50%;
@@ -97,7 +97,7 @@
     width: 1.76rem;
     height: 1.76rem;
   }
-`,Y=i.default.div`
+`,Y=n.default.div`
   position: relative;
   width: 6.4rem;
   height: 6.4rem;
@@ -119,7 +119,7 @@
     width: 3.9rem;
     height: 3.9rem;
   }
-`,Z=i.default.div`
+`,Z=n.default.div`
   position: absolute;
   top: ${({$isWarning:e})=>e?"49%":"50%"};
   left: 50%;
@@ -139,7 +139,7 @@
     );
     scale: 0.75;
   }
-`,ee=i.default.div`
+`,ee=n.default.div`
   position: absolute;
   top: 50%;
   left: 50%;
@@ -167,7 +167,7 @@
 `,R=75.4,te=l.keyframes`
   from { stroke-dashoffset: ${R}; }
   to   { stroke-dashoffset: 0; }
-`,re=i.default.div`
+`,re=n.default.div`
   position: relative;
   display: inline-flex;
   align-items: center;
@@ -175,7 +175,8 @@
   flex-shrink: 0;
   width: 2.8rem;
   height: 2.8rem;
-`,ae=i.default.svg`
+  cursor: pointer;
+`,ae=n.default.svg`
   position: absolute;
   inset: 0;
   transform: ${({$hasClockwiseRotation:e})=>e?"rotate(-90deg)":"rotate(90deg) scaleX(-1)"};
@@ -199,9 +200,7 @@
     animation: ${te} ${({$duration:e})=>e-.5}s linear forwards;
     animation-play-state: ${({$paused:e})=>e?"paused":"running"};
   }
-`,se=i.default(S.default)`
-  cursor: pointer;
-`,ie=i.default.div`
+`,ie=n.default.div`
   font-weight: 600;
   font-size: 1.92rem;
   color: ${$.default.m800};
@@ -213,7 +212,7 @@
   @media screen and (max-width: 380px) {
     font-size: 1.56rem;
   }
-`,ne=i.default.div`
+`,se=n.default.div`
   display: flex;
   flex-direction: column;
   gap: 0.32rem;
@@ -231,7 +230,7 @@
     max-width: 18rem;
     width: auto;
   }
-`,oe=i.default.div`
+`,ne=n.default.div`
   font-weight: 400;
   font-size: 1.6rem;
   color: ${$.default.m700};
@@ -243,4 +242,4 @@
   @media screen and (max-width: 380px) {
     font-size: 1.32rem;
   }
-`,de=(e,r)=>e===s.ERROR?t.jsx(S.default,{size:16,color:r}):e===s.SUCCESS?t.jsx(F.default,{size:18,color:r}):e===s.WARNING?t.jsx(D.default,{size:28,color:z.default}):t.jsx(X.default,{size:22,color:r}),ce=e=>e===s.ERROR?1.6:e===s.SUCCESS?1.76:e===s.WARNING?2.8:2.08,le=({type:e,$main:r,$side:o})=>{const d=de(e,r),c=e===s.WARNING;return t.jsxs(Y,{"aria-hidden":"true",$side:o,children:[t.jsx(ee,{$main:r}),!c&&t.jsx(V,{$main:r,type:e}),t.jsx(Z,{size:ce(e),$isWarning:c,children:d})]})},I=({toasts:e,...r})=>{const[o,d]=n.useState(e);n.useEffect(()=>{d(e)},[e]);const c=({type:f,id:u,title:h,subtitle:x,duration:m,onExpire:p=q},g)=>n.createElement(y,{type:f,title:h,subtitle:x,duration:m,key:u,onExpire:p});return G.createPortal(t.jsx(K,{...r,children:[...o].reverse().map(c)}),document.body)};I.propTypes={toasts:a.default.arrayOf(a.default.shape({id:a.default.any,type:a.default.string,title:a.default.string,subtitle:a.default.string,duration:a.default.number,onExpire:a.default.func}))};const O=(e,r,o)=>()=>{e(!0),setTimeout(()=>{r(!1),o()},500)},y=({type:e=s.INFO,visible:r=!0,duration:o=5,onExpire:d=q,hasClockwiseRotation:c=!1,title:f,subtitle:u,...h})=>{var T;const[x,m]=n.useState(r),[p,g]=n.useState(!1),[M,j]=n.useState(!1),w=n.useRef(null),b=n.useRef((o-.5)*1e3),v=n.useRef(null),C=W=>{v.current=Date.now(),w.current=setTimeout(O(g,m,d),W)};n.useEffect(()=>{m(r)},[r]),n.useEffect(()=>(C(b.current),()=>clearTimeout(w.current)),[]);const _=()=>{clearTimeout(w.current),b.current-=Date.now()-v.current,j(!0)},N=()=>{j(!1),C(b.current)},{main:k,side:L,bg:P}=(T=s.COLOR_MAP[e])!=null?T:s.INFO_COLORS;if(x)return t.jsxs(Q,{$bg:P,role:e===s.ERROR?"alert":"status","aria-live":e===s.ERROR?"assertive":"polite","aria-atomic":"true",className:`${p?"fade-out":"fade-in"}`,onMouseEnter:_,onMouseLeave:N,...h,children:[t.jsx(le,{type:e,$main:k,$side:L}),t.jsxs(ne,{children:[t.jsx(ie,{children:f}),u&&t.jsx(oe,{children:u})]}),t.jsxs(re,{children:[t.jsxs(ae,{"aria-hidden":"true",viewBox:"0 0 28 28",$duration:o,$color:k,$paused:M,$hasClockwiseRotation:c,children:[t.jsx("circle",{cx:"14",cy:"14",r:"12"}),t.jsx("circle",{cx:"14",cy:"14",r:"12"})]}),t.jsx(se,{"aria-label":"Close notification",size:13,color:$.default.m600,onClick:O(g,m,d)})]})]})};y.propTypes={type:a.default.string,visible:a.default.bool,duration:a.default.number,onExpire:a.default.func,hasClockwiseRotation:a.default.bool,title:a.default.string,subtitle:a.default.string};exports.ToastContainer=I;exports.default=y;
+`,oe=(e,r)=>e===i.ERROR?t.jsx(S.default,{size:16,color:r}):e===i.SUCCESS?t.jsx(F.default,{size:18,color:r}):e===i.WARNING?t.jsx(D.default,{size:28,color:z.default}):t.jsx(X.default,{size:22,color:r}),de=e=>e===i.ERROR?1.6:e===i.SUCCESS?1.76:e===i.WARNING?2.8:2.08,ce=({type:e,$main:r,$side:o})=>{const d=oe(e,r),c=e===i.WARNING;return t.jsxs(Y,{"aria-hidden":"true",$side:o,children:[t.jsx(ee,{$main:r}),!c&&t.jsx(V,{$main:r,type:e}),t.jsx(Z,{size:de(e),$isWarning:c,children:d})]})},I=({toasts:e,...r})=>{const[o,d]=s.useState(e);s.useEffect(()=>{d(e)},[e]);const c=({type:f,id:u,title:h,subtitle:x,duration:m,onExpire:g=q},p)=>s.createElement(y,{type:f,title:h,subtitle:x,duration:m,key:u,onExpire:g});return G.createPortal(t.jsx(K,{...r,children:[...o].reverse().map(c)}),document.body)};I.propTypes={toasts:a.default.arrayOf(a.default.shape({id:a.default.any,type:a.default.string,title:a.default.string,subtitle:a.default.string,duration:a.default.number,onExpire:a.default.func}))};const O=(e,r,o)=>()=>{e(!0),setTimeout(()=>{r(!1),o()},500)},y=({type:e=i.INFO,visible:r=!0,duration:o=5,onExpire:d=q,hasClockwiseRotation:c=!1,title:f,subtitle:u,...h})=>{var T;const[x,m]=s.useState(r),[g,p]=s.useState(!1),[M,j]=s.useState(!1),w=s.useRef(null),b=s.useRef((o-.5)*1e3),v=s.useRef(null),k=W=>{v.current=Date.now(),w.current=setTimeout(O(p,m,d),W)};s.useEffect(()=>{m(r)},[r]),s.useEffect(()=>(k(b.current),()=>clearTimeout(w.current)),[]);const _=()=>{clearTimeout(w.current),b.current-=Date.now()-v.current,j(!0)},N=()=>{j(!1),k(b.current)},{main:C,side:L,bg:P}=(T=i.COLOR_MAP[e])!=null?T:i.INFO_COLORS;if(x)return t.jsxs(Q,{$bg:P,role:e===i.ERROR?"alert":"status","aria-live":e===i.ERROR?"assertive":"polite","aria-atomic":"true",className:`${g?"fade-out":"fade-in"}`,onMouseEnter:_,onMouseLeave:N,...h,children:[t.jsx(ce,{type:e,$main:C,$side:L}),t.jsxs(se,{children:[t.jsx(ie,{children:f}),u&&t.jsx(ne,{children:u})]}),t.jsxs(re,{onClick:O(p,m,d),children:[t.jsxs(ae,{"aria-hidden":"true",viewBox:"0 0 28 28",$duration:o,$color:C,$paused:M,$hasClockwiseRotation:c,children:[t.jsx("circle",{cx:"14",cy:"14",r:"12"}),t.jsx("circle",{cx:"14",cy:"14",r:"12"})]}),t.jsx(S.default,{"aria-label":"Close notification",size:13,color:$.default.m600})]})]})};y.propTypes={type:a.default.string,visible:a.default.bool,duration:a.default.number,onExpire:a.default.func,hasClockwiseRotation:a.default.bool,title:a.default.string,subtitle:a.default.string};exports.ToastContainer=I;exports.default=y;

package/cjs/utils/randomValue.cjs

@@ -1 +1 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const r=(e,t)=>Math.random()*(t-e)+e;exports.default=r;
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const r=(e,t)=>Math.random()*(t-e+1)+e;exports.default=r;

package/components/Toast/Toast.js

@@ -188,6 +188,7 @@ const P = () => {
   flex-shrink: 0;
   width: 2.8rem;
   height: 2.8rem;
+  cursor: pointer;
 `, me = o.svg`
   position: absolute;
   inset: 0;
@@ -212,9 +213,7 @@ const P = () => {
     animation: ${se} ${({ $duration: e }) => e - 0.5}s linear forwards;
     animation-play-state: ${({ $paused: e }) => e ? "paused" : "running"};
   }
-`, ce = o(S)`
-  cursor: pointer;
-`, le = o.div`
+`, ce = o.div`
   font-weight: 600;
   font-size: 1.92rem;
   color: ${k.m800};
@@ -226,7 +225,7 @@ const P = () => {
   @media screen and (max-width: 380px) {
     font-size: 1.56rem;
   }
-`, he = o.div`
+`, le = o.div`
   display: flex;
   flex-direction: column;
   gap: 0.32rem;
@@ -244,7 +243,7 @@ const P = () => {
     max-width: 18rem;
     width: auto;
   }
-`, fe = o.div`
+`, he = o.div`
   font-weight: 400;
   font-size: 1.6rem;
   color: ${k.m700};
@@ -256,25 +255,25 @@ const P = () => {
   @media screen and (max-width: 380px) {
     font-size: 1.32rem;
   }
-`, 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;
+`, fe = (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 }), ue = (e) => e === f ? 1.6 : e === N ? 1.76 : e === R ? 2.8 : 2.08, pe = ({ type: e, $main: r, $side: n }) => {
+  const a = fe(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 })
+    /* @__PURE__ */ i(ne, { size: ue(e), $isWarning: s, children: a })
   ] });
-}, we = ({ toasts: e, ...r }) => {
+}, ge = ({ 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 });
+  const s = ({ type: u, id: l, title: p, subtitle: g, duration: d, onExpire: w = P }, x) => /* @__PURE__ */ B(j, { 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
   );
 };
-we.propTypes = {
+ge.propTypes = {
   /** Array of toast config objects, each with `{ id, type, title, subtitle, duration, onExpire }` */
   toasts: t.arrayOf(
     t.shape({
@@ -291,7 +290,7 @@ const M = (e, r, n) => () => {
   e(!0), setTimeout(() => {
     r(!1), n();
   }, 500);
-}, W = ({
+}, j = ({
   type: e = K,
   visible: r = !0,
   duration: n = 5,
@@ -302,13 +301,13 @@ const M = (e, r, n) => () => {
   ...p
 }) => {
   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 = (_) => {
+  const [g, d] = h(r), [w, x] = h(!1), [F, 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), _);
   };
   y(() => {
     d(r);
   }, [r]), y(() => (O($.current), () => clearTimeout(b.current)), []);
-  const F = () => {
+  const W = () => {
     clearTimeout(b.current), $.current -= Date.now() - z.current, T(!0);
   }, X = () => {
     T(!1), O($.current);
@@ -322,16 +321,16 @@ const M = (e, r, n) => () => {
         "aria-live": e === f ? "assertive" : "polite",
         "aria-atomic": "true",
         className: `${w ? "fade-out" : "fade-in"}`,
-        onMouseEnter: F,
+        onMouseEnter: W,
         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__ */ i(pe, { type: e, $main: E, $side: G }),
+          /* @__PURE__ */ m(le, { children: [
+            /* @__PURE__ */ i(ce, { children: u }),
+            l && /* @__PURE__ */ i(he, { children: l })
           ] }),
-          /* @__PURE__ */ m(de, { children: [
+          /* @__PURE__ */ m(de, { onClick: M(x, d, a), children: [
             /* @__PURE__ */ m(
               me,
               {
@@ -339,7 +338,7 @@ const M = (e, r, n) => () => {
                 viewBox: "0 0 28 28",
                 $duration: n,
                 $color: E,
-                $paused: j,
+                $paused: F,
                 $hasClockwiseRotation: s,
                 children: [
                   /* @__PURE__ */ i("circle", { cx: "14", cy: "14", r: "12" }),
@@ -347,21 +346,13 @@ const M = (e, r, n) => () => {
                 ]
               }
             ),
-            /* @__PURE__ */ i(
-              ce,
-              {
-                "aria-label": "Close notification",
-                size: 13,
-                color: k.m600,
-                onClick: M(x, d, a)
-              }
-            )
+            /* @__PURE__ */ i(S, { "aria-label": "Close notification", size: 13, color: k.m600 })
           ] })
         ]
       }
     );
 };
-W.propTypes = {
+j.propTypes = {
   /** Notification variant: `'info'`, `'success'`, `'warning'`, or `'error'`. Defaults to `'info'` */
   type: t.string,
   /** Controls initial visibility. Defaults to `true` */
@@ -378,6 +369,6 @@ W.propTypes = {
   subtitle: t.string
 };
 export {
-  we as ToastContainer,
-  W as default
+  ge as ToastContainer,
+  j as default
 };

package/package.json

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

package/utils/randomValue.js

@@ -1,4 +1,4 @@
-const t = (a, r) => Math.random() * (r - a) + a;
+const t = (a, r) => Math.random() * (r - a + 1) + a;
 export {
   t as default
 };