meticulous-ui 2.9.0 → 2.9.2

package/components/Timer/Timer.js

@@ -15,7 +15,7 @@ const c = () => {
   };
 }, ve = ({
   color: g = "green",
-  showTime: M = !0,
+  showTime: I = !0,
   showTimeWithSec: b = !0,
   timeZone: o = "Asia/Kolkata",
   isDigital: f = !0,
@@ -25,55 +25,55 @@ const c = () => {
   onTimerRemove: K = c,
   onTimerPause: q = c,
   onTimerPlay: J = c,
-  size: S = 20,
+  size: M = 20,
   ...Q
 }) => {
-  const [T, V] = a(/* @__PURE__ */ new Date()), [s, $] = a(0), [m, A] = a(!1), [y, X] = a(Ce(o)), [Y, R] = a(0), [D, P] = a(!1), k = de(m), t = Math.round(S), w = Math.round(14 * S / 20);
+  const [S, V] = a(/* @__PURE__ */ new Date()), [s, T] = a(0), [m, $] = a(!1), [A, X] = a(Ce(o)), [Y, y] = a(0), [R, D] = a(!1), k = de(m), t = Math.round(M), P = Math.round(14 * M / 20);
   O(() => {
     k.current = m;
   }, [m]);
   const Z = () => {
-    $(r), R(r % 60 * 6), A(!1), u();
+    T(r), y(r % 60 * 6), $(!1), u();
   }, ee = () => {
-    P(!0), K();
+    D(!0), K();
   }, te = () => {
-    $(0), R(0), P(!1);
+    T(0), y(0), D(!1);
   }, re = () => {
-    A(!0), q();
+    $(!0), q();
   }, ie = () => {
-    A(!1), J();
+    $(!1), J();
   };
   O(() => {
-    const j = setInterval(() => {
+    const N = setInterval(() => {
       const d = /* @__PURE__ */ new Date();
       V(d), X((i) => {
-        const ne = d.toLocaleString("en-Us", { hour12: !0, timeZone: o }).split(", ")[1].split(" ")[0], [ae, x, z] = ne.split(":").map(Number), oe = z * 6, se = x * 6 + z * 0.1, le = ae % 12 * 30 + x * 0.5, I = (B, E) => {
+        const ne = d.toLocaleString("en-Us", { hour12: !0, timeZone: o }).split(", ")[1].split(" ")[0], [ae, j, x] = ne.split(":").map(Number), oe = x * 6, se = j * 6 + x * 0.1, le = ae % 12 * 30 + j * 0.5, H = (B, E) => {
           const F = B % 360;
           return B - F + E + (E < F ? 360 : 0);
         };
         return {
-          second: I(i.second, oe),
-          minute: I(i.minute, se),
-          hour: I(i.hour, le)
+          second: H(i.second, oe),
+          minute: H(i.minute, se),
+          hour: H(i.hour, le)
         };
-      }), k.current || ($((i) => (i - 1 === 0 && (G(), P(!0)), i - 1)), R((i) => i - 6));
+      }), k.current || (T((i) => (i - 1 === 0 && (G(), D(!0)), i - 1)), y((i) => i - 6));
     }, 1e3);
-    return () => clearInterval(j);
+    return () => clearInterval(N);
   }, []);
-  const H = T.toLocaleString("en-Us", { hour12: !0, timeZone: o }).split(", ")[1], C = H.split(" ")[0], W = H.split(" ")[1], L = H.split(":").slice(0, 2).join(":"), l = !(Number.isInteger(s) && s > 0), N = `${b ? C : L} ${W}`;
+  const w = S.toLocaleString("en-Us", { hour12: !0, timeZone: o }).split(", ")[1], C = w.split(" ")[0], W = w.split(" ")[1], z = w.split(":").slice(0, 2).join(":"), l = !(Number.isInteger(s) && s > 0), L = `${b ? C : z} ${W}`;
   return /* @__PURE__ */ n(me, { $color: g, role: "region", "aria-label": "Clock", $size: t, ...Q, children: [
     /* @__PURE__ */ e(ce, { borderRadius: `${ke(16.67)({ $size: t })}rem`, "aria-hidden": "true" }),
-    M && /* @__PURE__ */ n(v, { children: [
-      /* @__PURE__ */ e(he, { "aria-hidden": "true", $size: t, children: /* @__PURE__ */ e(pe, { children: /* @__PURE__ */ e(ge, { "aria-hidden": "true", children: [...Array(60)].map((j, d) => /* @__PURE__ */ e(be, { $i: d, $size: t }, d)) }) }) }),
-      f ? /* @__PURE__ */ n(U, { as: "time", dateTime: T.toISOString(), "aria-label": N, children: [
-        /* @__PURE__ */ e(_, { $size: t, "aria-hidden": "true", children: b ? C : L }),
+    I && /* @__PURE__ */ n(v, { children: [
+      /* @__PURE__ */ e(he, { "aria-hidden": "true", $size: t, children: /* @__PURE__ */ e(pe, { children: /* @__PURE__ */ e(ge, { "aria-hidden": "true", children: [...Array(60)].map((N, d) => /* @__PURE__ */ e(be, { $i: d, $size: t }, d)) }) }) }),
+      f ? /* @__PURE__ */ n(U, { as: "time", dateTime: S.toISOString(), "aria-label": L, children: [
+        /* @__PURE__ */ e(_, { $size: t, "aria-hidden": "true", children: b ? C : z }),
         /* @__PURE__ */ e(_, { $size: t, "aria-hidden": "true", children: W })
-      ] }) : /* @__PURE__ */ n(U, { as: "time", dateTime: T.toISOString(), "aria-label": N, children: [
+      ] }) : /* @__PURE__ */ n(U, { as: "time", dateTime: S.toISOString(), "aria-label": L, children: [
         /* @__PURE__ */ e(
           fe,
           {
             $size: t,
-            style: { "--hand-rotate": `${y.hour}deg` },
+            style: { "--hand-rotate": `${A.hour}deg` },
             "aria-hidden": "true"
           }
         ),
@@ -81,7 +81,7 @@ const c = () => {
           Se,
           {
             $size: t,
-            style: { "--hand-rotate": `${y.minute}deg` },
+            style: { "--hand-rotate": `${A.minute}deg` },
             "aria-hidden": "true"
           }
         ),
@@ -89,20 +89,20 @@ const c = () => {
           Te,
           {
             $size: t,
-            style: { "--hand-rotate": `${y.second}deg` },
+            style: { "--hand-rotate": `${A.second}deg` },
             "aria-hidden": "true"
           }
         )
       ] })
     ] }),
-    (!l || D) && /* @__PURE__ */ n(v, { children: [
+    (!l || R) && /* @__PURE__ */ n(v, { children: [
       /* @__PURE__ */ e(
         $e,
         {
-          $dismissing: D,
+          $dismissing: R,
           onAnimationEnd: te,
           "aria-hidden": "true",
-          children: /* @__PURE__ */ e(ue, { size: S, progress: s >= 60 ? 1 : s % 60 / 60 })
+          children: /* @__PURE__ */ e(ue, { progress: s >= 60 ? 1 : s % 60 / 60 })
         }
       ),
       /* @__PURE__ */ e(
@@ -110,7 +110,7 @@ const c = () => {
         {
           $size: t,
           style: { "--bullet-rotate": `${45 + Y}deg` },
-          $dismissing: D,
+          $dismissing: R,
           "aria-hidden": "true",
           children: /* @__PURE__ */ e(ye, { $size: t })
         }
@@ -140,7 +140,7 @@ const c = () => {
               $size: t,
               "aria-label": "Stop timer",
               "aria-disabled": l,
-              children: /* @__PURE__ */ e(Pe, { color: h, size: w, "aria-hidden": "true" })
+              children: /* @__PURE__ */ e(Pe, { color: h, size: P, "aria-hidden": "true" })
             }
           ),
           l || !m ? /* @__PURE__ */ e(
@@ -151,9 +151,9 @@ const c = () => {
               $size: t,
               "aria-label": "Pause timer",
               "aria-disabled": l,
-              children: /* @__PURE__ */ e(we, { color: h, size: w, "aria-hidden": "true" })
+              children: /* @__PURE__ */ e(we, { color: h, size: P, "aria-hidden": "true" })
             }
-          ) : /* @__PURE__ */ e(p, { type: "button", onClick: ie, "aria-label": "Resume timer", $size: t, children: /* @__PURE__ */ e(He, { color: h, size: w, "aria-hidden": "true" }) })
+          ) : /* @__PURE__ */ e(p, { type: "button", onClick: ie, "aria-label": "Resume timer", $size: t, children: /* @__PURE__ */ e(He, { color: h, size: P, "aria-hidden": "true" }) })
         ]
       }
     ),

package/components/Timer/components/TimerRing/TimerRing.js

@@ -1,33 +1,33 @@
-import { jsxs as n, jsx as c } from "react/jsx-runtime";
-import { useRef as i, useEffect as a } from "react";
-import l from "../../../../colors/white.js";
-import { SVG as h } from "./styles.js";
-const p = ({ progress: o, size: r }) => {
-  const s = i(null), t = r * 5.25, e = 2 * Math.PI * t;
-  return a(() => {
-    const f = e * (1 - o);
-    s.current.style.strokeDashoffset = f;
-  }, [o]), /* @__PURE__ */ n(h, { width: r * 11, height: r * 11, children: [
-    /* @__PURE__ */ c(
+import { jsx as t, jsxs as f } from "react/jsx-runtime";
+import { useRef as n, useEffect as c } from "react";
+import a from "../../../../colors/white.js";
+import { SVG as l } from "./styles.js";
+const r = 33, e = 2 * Math.PI * r, u = ({ progress: o }) => {
+  const s = n(null);
+  return c(() => {
+    const i = e * (1 - o);
+    s.current.style.strokeDashoffset = i;
+  }, [o]), /* @__PURE__ */ t(l, { viewBox: "0 0 100 100", width: "100%", height: "100%", children: /* @__PURE__ */ f("g", { transform: "rotate(-90, 50, 48)", children: [
+    /* @__PURE__ */ t(
       "circle",
       {
-        cx: r * 5.5,
-        cy: r * 5.5,
-        r: t,
+        cx: 50,
+        cy: 48,
+        r,
         stroke: "rgba(255,255,255,.2)",
-        strokeWidth: r * 0.2,
+        strokeWidth: 2,
         fill: "none"
       }
     ),
-    /* @__PURE__ */ c(
+    /* @__PURE__ */ t(
       "circle",
       {
         ref: s,
-        cx: r * 5.5,
-        cy: r * 5.5,
-        r: t,
-        stroke: l,
-        strokeWidth: r * 0.2,
+        cx: 50,
+        cy: 48,
+        r,
+        stroke: a,
+        strokeWidth: 1,
         fill: "none",
         strokeLinecap: "round",
         strokeDasharray: e,
@@ -35,8 +35,8 @@ const p = ({ progress: o, size: r }) => {
         style: { transition: "stroke-dashoffset 0.2s linear" }
       }
     )
-  ] });
+  ] }) });
 };
 export {
-  p as default
+  u as default
 };

package/components/Timer/components/TimerRing/styles.js

@@ -1,7 +1,5 @@
-import t from "styled-components";
-const e = t.svg`
-  rotate: -90deg;
-`;
+import o from "styled-components";
+const r = o.svg``;
 export {
-  e as SVG
+  r as SVG
 };

package/components/Timer/styles.js

@@ -8,7 +8,7 @@ import u from "../../colors/black.js";
 import b from "../../colors/red.js";
 import { COLOR_MAPPING as $ } from "./constants.js";
 import { getSize as t } from "./helpers.js";
-const a = 1, f = 16.67, s = 1.67, g = 3.404, v = ({ $color: e }) => $[e], n = r`
+const s = 1, g = 16.67, a = 1.67, f = 3.404, v = ({ $color: e }) => $[e], n = r`
   position: absolute;
   bottom: 50%;
   transform-origin: bottom;
@@ -17,16 +17,16 @@ const a = 1, f = 16.67, s = 1.67, g = 3.404, v = ({ $color: e }) => $[e], n = r`
   rotate: var(--hand-rotate);
 `, T = o.div`
   position: relative;
-  height: ${t(a)}rem;
-  width: ${t(a)}rem;
-  border-radius: ${t(f)}rem;
+  height: ${t(s)}rem;
+  width: ${t(s)}rem;
+  border-radius: ${t(g)}rem;
   background-color: ${v};
 `, W = o.div`
   position: absolute;
   left: 50%;
   top: 48%;
-  width: ${t(s)}rem;
-  height: ${t(s)}rem;
+  width: ${t(a)}rem;
+  height: ${t(a)}rem;
   transform: translate(-50%, -50%);
   border-radius: 50%;
   background-color: rgba(0, 0, 0, 0.16);
@@ -47,7 +47,7 @@ const a = 1, f = 16.67, s = 1.67, g = 3.404, v = ({ $color: e }) => $[e], n = r`
   width: ${t(120)}rem;
   height: ${t(120)}rem;
   background: rgba(255, 255, 255, 0.4);
-  transform-origin: ${t(g)}rem;
+  transform-origin: ${t(f)}rem;
   border-radius: 2px;
   rotate: ${({ $i: e }) => `${e * 6}deg`};
 
@@ -91,8 +91,8 @@ const a = 1, f = 16.67, s = 1.67, g = 3.404, v = ({ $color: e }) => $[e], n = r`
   to   { opacity: 0; transform: scale(0.85); }
 `, E = o.div`
   position: absolute;
-  left: 16%;
-  top: 14%;
+  inset: 0;
+  pointer-events: none;
   ${({ $dismissing: e }) => e && r`
       animation: ${d} 0.4s ease-out forwards;
     `}

package/package.json

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