meticulous-ui 3.6.2 → 3.6.3

package/components/Timer/Timer.js

@@ -1,132 +1,133 @@
-import { jsxs as o, jsx as e, Fragment as O } from "react/jsx-runtime";
-import { useState as a, useRef as ce, useEffect as U } from "react";
+import { jsxs as l, jsx as e, Fragment as O } from "react/jsx-runtime";
+import { useState as c, useRef as he, useEffect as U } from "react";
 import r from "../../_virtual/index.js";
-import ue from "../Glass/Glass.js";
-import me from "./components/TimerRing/TimerRing.js";
-import p from "../../colors/white.js";
-import { Wrapper as he, AlarmRing as pe, BulletRing as ge, Bullet as be, VisuallyHidden as fe, Dimmer as Te, DotsWrapper as Se, AllDots as ye, Dots as $e, Time as _, TimeTxt as G, HourHand as Ae, MinuteHand as Pe, SecondHand as Re, LeftActions as we, ActionBtn as g, MediaStopFilledWrapper as De, MediaPauseFilledWrapper as He, MediaPlayFilledWrapper as Ie, RightActions as Me, AddWrapper as Ce } from "./styles.js";
-import { getSize as We } from "./helpers.js";
-const u = () => {
-}, ke = (b) => () => {
-  const s = (/* @__PURE__ */ new Date()).toLocaleString("en-Us", { hour12: !0, timeZone: b }).split(", ")[1].split(" ")[0], [T, i, m] = s.split(":").map(Number);
+import pe from "../Glass/Glass.js";
+import ge from "./components/TimerRing/TimerRing.js";
+import b from "../../colors/white.js";
+import { Wrapper as be, AlarmRing as fe, BulletRing as Te, Bullet as Se, VisuallyHidden as $e, Dimmer as ye, DotsWrapper as Ae, AllDots as Pe, Dots as we, Time as _, TimeTxt as G, HourHand as De, MinuteHand as Re, SecondHand as Me, LeftActions as Ce, ActionBtn as f, MediaStopFilledWrapper as ke, MediaPauseFilledWrapper as He, MediaPlayFilledWrapper as Ie, AlarmLabel as Le, TimerDigit as We, RightActions as ze, AddWrapper as xe } from "./styles.js";
+import { getSize as Ne } from "./helpers.js";
+import je from "../Icons/ClockCircleOutline/ClockCircleOutline.js";
+const h = () => {
+}, ve = (T) => () => {
+  const m = (/* @__PURE__ */ new Date()).toLocaleString("en-Us", { hour12: !0, timeZone: T }).split(", ")[1].split(" ")[0], [$, i, p] = m.split(":").map(Number);
   return {
-    second: m * 6,
-    minute: i * 6 + m * 0.1,
-    hour: T % 12 * 30 + i * 0.5
+    second: p * 6,
+    minute: i * 6 + p * 0.1,
+    hour: $ % 12 * 30 + i * 0.5
   };
-}, ze = ({
-  color: b = "green",
-  showTime: M = !0,
-  showTimeWithSec: f = !0,
-  timeZone: s = "Asia/Kolkata",
-  isDigital: T = !0,
+}, Be = ({
+  color: T = "green",
+  showTime: H = !0,
+  showTimeWithSec: S = !0,
+  timeZone: m = "Asia/Kolkata",
+  isDigital: $ = !0,
   timerSeconds: i = 0,
-  onTimerAdd: m = u,
-  onTimerComplete: K = u,
-  onTimerRemove: q = u,
-  onTimerPause: J = u,
-  onTimerPlay: Q = u,
-  size: C = 30,
+  onTimerAdd: p = h,
+  onTimerComplete: K = h,
+  onTimerRemove: q = h,
+  onTimerPause: J = h,
+  onTimerPlay: Q = h,
+  size: I = 30,
   ...V
 }) => {
-  const [S, X] = a(/* @__PURE__ */ new Date()), [l, y] = a(0), [h, $] = a(!1), [A, Y] = a(ke(s)), [Z, P] = a(0), [R, w] = a(!1), W = ce(h), t = Math.round(C), D = Math.round(14 * C / 20);
+  const [y, X] = c(/* @__PURE__ */ new Date()), [n, A] = c(0), [g, P] = c(!1), [w, Y] = c(ve(m)), [Z, D] = c(0), [u, R] = c(!1), L = he(g), t = Math.round(I), M = Math.round(14 * I / 20);
   U(() => {
-    W.current = h;
-  }, [h]);
+    L.current = g;
+  }, [g]);
   const ee = () => {
-    y(i), P(i % 60 * 6), $(!1), m();
+    A(i), D(i % 60 * 6), P(!1), p();
   }, te = () => {
-    w(!0), q();
+    R(!0), q();
   }, re = () => {
-    y(0), P(0), w(!1);
+    A(0), D(0), R(!1);
   }, ie = () => {
-    $(!0), J();
+    P(!0), J();
   }, ne = () => {
-    $(!1), Q();
+    P(!1), Q();
   };
   U(() => {
-    const j = setInterval(() => {
-      const c = /* @__PURE__ */ new Date();
-      X(c), Y((n) => {
-        const oe = c.toLocaleString("en-Us", { hour12: !0, timeZone: s }).split(", ")[1].split(" ")[0], [ae, v, x] = oe.split(":").map(Number), se = x * 6, le = v * 6 + x * 0.1, de = ae % 12 * 30 + v * 0.5, I = (B, E) => {
+    const s = setInterval(() => {
+      const o = /* @__PURE__ */ new Date();
+      X(o), Y((a) => {
+        const le = o.toLocaleString("en-Us", { hour12: !0, timeZone: m }).split(", ")[1].split(" ")[0], [de, j, v] = le.split(":").map(Number), ce = v * 6, me = j * 6 + v * 0.1, ue = de % 12 * 30 + j * 0.5, k = (B, E) => {
           const F = B % 360;
           return B - F + E + (E < F ? 360 : 0);
         };
         return {
-          second: I(n.second, se),
-          minute: I(n.minute, le),
-          hour: I(n.hour, de)
+          second: k(a.second, ce),
+          minute: k(a.minute, me),
+          hour: k(a.hour, ue)
         };
-      }), W.current || (y((n) => (n - 1 === 0 && (K(), w(!0)), n - 1)), P((n) => n - 6));
+      }), L.current || (A((a) => (a - 1 === 0 && (K(), R(!0)), a - 1)), D((a) => a - 6));
     }, 1e3);
-    return () => clearInterval(j);
+    return () => clearInterval(s);
   }, []);
-  const H = S.toLocaleString("en-Us", { hour12: !0, timeZone: s }).split(", ")[1], k = H.split(" ")[0], z = H.split(" ")[1], L = H.split(":").slice(0, 2).join(":"), d = !(Number.isInteger(l) && l > 0), N = `${f ? k : L} ${z}`;
-  return /* @__PURE__ */ o(he, { $color: b, role: "region", "aria-label": "Clock", $size: t, ...V, children: [
-    /* @__PURE__ */ e(ue, { borderRadius: `${We(16.67)({ $size: t })}rem`, "aria-hidden": "true" }),
-    (!d || R) && /* @__PURE__ */ o(O, { children: [
+  const C = y.toLocaleString("en-Us", { hour12: !0, timeZone: m }).split(", ")[1], W = C.split(" ")[0], z = C.split(" ")[1], x = C.split(":").slice(0, 2).join(":"), d = !(Number.isInteger(n) && n > 0), oe = String(Math.floor(n / 60)).padStart(2, "0"), ae = String(n % 60).padStart(2, "0"), se = `${oe}:${ae}`, N = `${S ? W : x} ${z}`;
+  return /* @__PURE__ */ l(be, { $color: T, role: "region", "aria-label": "Clock", $size: t, ...V, children: [
+    /* @__PURE__ */ e(pe, { borderRadius: `${Ne(16.67)({ $size: t })}rem`, "aria-hidden": "true" }),
+    (!d || u) && /* @__PURE__ */ l(O, { children: [
       /* @__PURE__ */ e(
-        pe,
+        fe,
         {
-          $dismissing: R,
+          $dismissing: u,
           onAnimationEnd: re,
           "aria-hidden": "true",
-          children: /* @__PURE__ */ e(me, { progress: l >= 60 ? 1 : l % 60 / 60 })
+          children: /* @__PURE__ */ e(ge, { progress: n >= 60 ? 1 : n % 60 / 60 })
         }
       ),
       /* @__PURE__ */ e(
-        ge,
+        Te,
         {
           $size: t,
           style: { "--bullet-rotate": `${Z}deg` },
-          $dismissing: R,
+          $dismissing: u,
           "aria-hidden": "true",
-          children: /* @__PURE__ */ e(be, { $size: t })
+          children: /* @__PURE__ */ e(Se, { $size: t })
         }
       ),
       /* @__PURE__ */ e(
-        fe,
+        $e,
         {
           role: "timer",
           "aria-live": "polite",
-          "aria-label": `${l} seconds remaining`
+          "aria-label": `${n} seconds remaining`
         }
       )
     ] }),
-    M && /* @__PURE__ */ o(O, { children: [
-      /* @__PURE__ */ e(Te, { "aria-hidden": "true", $size: t, children: /* @__PURE__ */ e(Se, { children: /* @__PURE__ */ e(ye, { "aria-hidden": "true", children: [...Array(60)].map((j, c) => /* @__PURE__ */ e($e, { $i: c, $size: t }, c)) }) }) }),
-      T ? /* @__PURE__ */ o(_, { as: "time", dateTime: S.toISOString(), "aria-label": N, children: [
-        /* @__PURE__ */ e(G, { $size: t, "aria-hidden": "true", children: f ? k : L }),
+    H && /* @__PURE__ */ l(O, { children: [
+      /* @__PURE__ */ e(ye, { "aria-hidden": "true", $size: t, children: /* @__PURE__ */ e(Ae, { children: /* @__PURE__ */ e(Pe, { "aria-hidden": "true", children: [...Array(60)].map((s, o) => /* @__PURE__ */ e(we, { $i: o, $size: t }, o)) }) }) }),
+      $ ? /* @__PURE__ */ l(_, { as: "time", dateTime: y.toISOString(), "aria-label": N, children: [
+        /* @__PURE__ */ e(G, { $size: t, "aria-hidden": "true", children: S ? W : x }),
         /* @__PURE__ */ e(G, { $size: t, "aria-hidden": "true", children: z })
-      ] }) : /* @__PURE__ */ o(_, { as: "time", dateTime: S.toISOString(), "aria-label": N, children: [
+      ] }) : /* @__PURE__ */ l(_, { as: "time", dateTime: y.toISOString(), "aria-label": N, children: [
         /* @__PURE__ */ e(
-          Ae,
+          De,
           {
             $size: t,
-            style: { "--hand-rotate": `${A.hour}deg` },
+            style: { "--hand-rotate": `${w.hour}deg` },
             "aria-hidden": "true"
           }
         ),
         /* @__PURE__ */ e(
-          Pe,
+          Re,
           {
             $size: t,
-            style: { "--hand-rotate": `${A.minute}deg` },
+            style: { "--hand-rotate": `${w.minute}deg` },
             "aria-hidden": "true"
           }
         ),
         /* @__PURE__ */ e(
-          Re,
+          Me,
           {
             $size: t,
-            style: { "--hand-rotate": `${A.second}deg` },
+            style: { "--hand-rotate": `${w.second}deg` },
             "aria-hidden": "true"
           }
         )
       ] })
     ] }),
-    i > 0 && /* @__PURE__ */ o(
-      we,
+    i > 0 && /* @__PURE__ */ l(
+      Ce,
       {
         $size: t,
         $noActions: d,
@@ -134,43 +135,63 @@ const u = () => {
         "aria-label": "Timer controls",
         children: [
           /* @__PURE__ */ e(
-            g,
+            f,
             {
               type: "button",
               onClick: te,
               $size: t,
               "aria-label": "Stop timer",
               "aria-disabled": d,
-              children: /* @__PURE__ */ e(De, { color: p, size: D, "aria-hidden": "true" })
+              children: /* @__PURE__ */ e(ke, { color: b, size: M, "aria-hidden": "true" })
             }
           ),
-          d || !h ? /* @__PURE__ */ e(
-            g,
+          d || !g ? /* @__PURE__ */ e(
+            f,
             {
               type: "button",
               onClick: ie,
               $size: t,
               "aria-label": "Pause timer",
               "aria-disabled": d,
-              children: /* @__PURE__ */ e(He, { color: p, size: D, "aria-hidden": "true" })
+              children: /* @__PURE__ */ e(He, { color: b, size: M, "aria-hidden": "true" })
+            }
+          ) : /* @__PURE__ */ e(f, { type: "button", onClick: ne, "aria-label": "Resume timer", $size: t, children: /* @__PURE__ */ e(Ie, { color: b, size: M, "aria-hidden": "true" }) })
+        ]
+      }
+    ),
+    (!d || u) && /* @__PURE__ */ l(
+      Le,
+      {
+        $size: t,
+        $dismissing: u,
+        "aria-label": `${n} seconds remaining`,
+        children: [
+          /* @__PURE__ */ e(
+            je,
+            {
+              color: "rgba(255,255,255,0.82)",
+              style: { width: "1em", height: "1em", flexShrink: 0 }
             }
-          ) : /* @__PURE__ */ e(g, { type: "button", onClick: ne, "aria-label": "Resume timer", $size: t, children: /* @__PURE__ */ e(Ie, { color: p, size: D, "aria-hidden": "true" }) })
+          ),
+          se.split("").map(
+            (s, o) => s === ":" ? /* @__PURE__ */ e("span", { children: s }, o) : /* @__PURE__ */ e(We, { children: s }, `${o}-${s}`)
+          )
         ]
       }
     ),
-    i > 0 && /* @__PURE__ */ e(Me, { role: "group", $size: t, "aria-label": "Start timer", children: /* @__PURE__ */ e(
-      g,
+    i > 0 && /* @__PURE__ */ e(ze, { role: "group", $size: t, "aria-label": "Start timer", children: /* @__PURE__ */ e(
+      f,
       {
         type: "button",
         onClick: ee,
         $size: t,
         "aria-label": `Start ${i} second timer`,
-        children: /* @__PURE__ */ e(Ce, { color: p, size: t, "aria-hidden": "true" })
+        children: /* @__PURE__ */ e(xe, { color: b, size: t, "aria-hidden": "true" })
       }
     ) })
   ] });
 };
-ze.propTypes = {
+Be.propTypes = {
   /** Color theme key for the clock and accent elements. Defaults to `'green'` */
   color: r.string,
   /** Diameter of the clock in pixels. Defaults to `30` */
@@ -197,5 +218,5 @@ ze.propTypes = {
   onTimerPlay: r.func
 };
 export {
-  ze as default
+  Be as default
 };

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

@@ -1,42 +1,93 @@
-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: 50,
-        cy: 48,
-        r,
-        stroke: "rgba(255,255,255,.2)",
-        strokeWidth: 1,
-        fill: "none"
-      }
-    ),
-    /* @__PURE__ */ t(
-      "circle",
-      {
-        ref: s,
-        cx: 50,
-        cy: 48,
-        r,
-        stroke: a,
-        strokeWidth: 1.33,
-        fill: "none",
-        strokeLinecap: "round",
-        strokeDasharray: e,
-        strokeDashoffset: e,
-        style: { transition: "stroke-dashoffset 0.2s linear" }
-      }
-    )
-  ] }) });
+import { jsxs as r, jsx as e } from "react/jsx-runtime";
+import { useRef as f, useEffect as d } from "react";
+import n from "../../../../colors/white.js";
+import { SVG as u } from "./styles.js";
+const i = 33, o = 2 * Math.PI * i, m = ({ progress: t }) => {
+  const c = f(null), l = 2 * Math.PI * t, s = 50 + i * Math.cos(l), a = 48 + i * Math.sin(l);
+  return d(() => {
+    const h = o * (1 - t);
+    c.current.style.strokeDashoffset = h;
+  }, [t]), /* @__PURE__ */ r(u, { viewBox: "0 0 100 100", width: "100%", height: "100%", children: [
+    /* @__PURE__ */ r("defs", { children: [
+      /* @__PURE__ */ r("filter", { id: "ambient-glow", x: "-40%", y: "-40%", width: "180%", height: "180%", children: [
+        /* @__PURE__ */ e("feGaussianBlur", { in: "SourceGraphic", stdDeviation: "3.5", result: "blur" }),
+        /* @__PURE__ */ e("feComposite", { in: "blur", in2: "SourceGraphic", operator: "over" })
+      ] }),
+      /* @__PURE__ */ r("filter", { id: "arc-glow", x: "-20%", y: "-20%", width: "140%", height: "140%", children: [
+        /* @__PURE__ */ e("feGaussianBlur", { in: "SourceGraphic", stdDeviation: "0.7", result: "blur" }),
+        /* @__PURE__ */ r("feMerge", { children: [
+          /* @__PURE__ */ e("feMergeNode", { in: "blur" }),
+          /* @__PURE__ */ e("feMergeNode", { in: "SourceGraphic" })
+        ] })
+      ] }),
+      /* @__PURE__ */ r("filter", { id: "head-glow", x: "-150%", y: "-150%", width: "400%", height: "400%", children: [
+        /* @__PURE__ */ e("feGaussianBlur", { in: "SourceGraphic", stdDeviation: "1.6", result: "blur" }),
+        /* @__PURE__ */ r("feMerge", { children: [
+          /* @__PURE__ */ e("feMergeNode", { in: "blur" }),
+          /* @__PURE__ */ e("feMergeNode", { in: "SourceGraphic" })
+        ] })
+      ] })
+    ] }),
+    /* @__PURE__ */ r("g", { transform: "rotate(-90, 50, 48)", children: [
+      t > 5e-3 && /* @__PURE__ */ e(
+        "circle",
+        {
+          cx: 50,
+          cy: 48,
+          r: i,
+          stroke: "rgba(255,255,255,0.09)",
+          strokeWidth: 6,
+          fill: "none",
+          strokeDasharray: o,
+          strokeDashoffset: o * (1 - t),
+          filter: "url(#ambient-glow)"
+        }
+      ),
+      /* @__PURE__ */ e("circle", { cx: 50, cy: 48, r: i, stroke: "rgba(0,0,0,0.28)", strokeWidth: 4, fill: "none" }),
+      /* @__PURE__ */ e(
+        "circle",
+        {
+          cx: 50,
+          cy: 48,
+          r: i,
+          stroke: "rgba(255,255,255,.14)",
+          strokeWidth: 1.4,
+          fill: "none"
+        }
+      ),
+      /* @__PURE__ */ e(
+        "circle",
+        {
+          ref: c,
+          cx: 50,
+          cy: 48,
+          r: i,
+          stroke: n,
+          strokeWidth: 2,
+          fill: "none",
+          strokeLinecap: "round",
+          strokeDasharray: o,
+          strokeDashoffset: o,
+          filter: "url(#arc-glow)",
+          style: { transition: "stroke-dashoffset 0.2s linear" }
+        }
+      ),
+      t > 5e-3 && /* @__PURE__ */ e(
+        "circle",
+        {
+          cx: s,
+          cy: a,
+          r: 1.8,
+          fill: n,
+          filter: "url(#head-glow)",
+          style: {
+            transition: "cx 0.35s cubic-bezier(0.34, 1.56, 0.64, 1), cy 0.35s cubic-bezier(0.34, 1.56, 0.64, 1)"
+          }
+        }
+      )
+    ] })
+  ] });
 };
 export {
-  u as default
+  m as default
 };

package/components/Timer/styles.js

@@ -1,55 +1,55 @@
-import o, { css as r, keyframes as l } from "styled-components";
-import i from "../../colors/white.js";
-import { black as m } from "../../colors/black.js";
-import p from "../../colors/red.js";
-import { COLOR_MAPPING as c } from "./constants.js";
+import o, { css as e, keyframes as i } from "styled-components";
+import a from "../../colors/white.js";
+import { black as p } from "../../colors/black.js";
+import c from "../../colors/red.js";
+import { COLOR_MAPPING as m } from "./constants.js";
 import { getSize as t } from "./helpers.js";
-import h from "../Icons/MediaStopFilled/MediaStopFilled.js";
-import u from "../Icons/MediaPauseFilled/MediaPauseFilled.js";
-import b from "../Icons/MediaPlayFilled/MediaPlayFilled.js";
-import $ from "../Icons/Add/Add.js";
-const s = 1, f = 16.67, a = 1.67, g = 3.404, v = ({ $color: e }) => c[e], n = r`
+import b from "../Icons/MediaStopFilled/MediaStopFilled.js";
+import g from "../Icons/MediaPauseFilled/MediaPauseFilled.js";
+import f from "../Icons/MediaPlayFilled/MediaPlayFilled.js";
+import u from "../Icons/Add/Add.js";
+const s = 1, h = 16.67, l = 1.67, $ = 3.404, v = ({ $color: r }) => m[r], n = e`
   position: absolute;
   bottom: 50%;
   transform-origin: bottom;
   border-radius: 4px;
   transition: rotate 0.3s ease-in-out;
   rotate: var(--hand-rotate);
-`, T = o.div`
+`, _ = o.div`
   position: relative;
   height: ${t(s)}rem;
   width: ${t(s)}rem;
-  border-radius: ${t(f)}rem;
+  border-radius: ${t(h)}rem;
   background-color: ${v};
-`, W = o.div`
+`, D = o.div`
   position: absolute;
   left: 50%;
   top: 48%;
-  width: ${t(a)}rem;
-  height: ${t(a)}rem;
+  width: ${t(l)}rem;
+  height: ${t(l)}rem;
   transform: translate(-50%, -50%);
   border-radius: 50%;
   background-color: rgba(0, 0, 0, 0.16);
   pointer-events: none;
-`, _ = o.div`
+`, F = o.div`
   position: absolute;
   left: 50%;
   top: 48%;
   transform: translate(-50%, -50%);
-`, F = o.div`
-  color: ${i};
+`, z = o.div`
+  color: ${a};
   font-size: ${t(13.33)}rem;
-  font-weight: 600;
+  font-weight: 650;
   text-align: center;
-  opacity: 0.8;
-`, S = o.span`
+  opacity: 0.84;
+`, H = o.span`
   position: absolute;
   width: ${t(120)}rem;
   height: ${t(120)}rem;
   background: rgba(255, 255, 255, 0.4);
-  transform-origin: ${t(g)}rem;
+  transform-origin: ${t($)}rem;
   border-radius: 2px;
-  rotate: ${({ $i: e }) => `${e * 6}deg`};
+  rotate: ${({ $i: r }) => `${r * 6}deg`};
 
   &:nth-child(5n) {
     width: ${t(90)}rem;
@@ -62,11 +62,11 @@ const s = 1, f = 16.67, a = 1.67, g = 3.404, v = ({ $color: e }) => c[e], n = r`
     height: ${t(130)}rem;
     background: rgba(255, 255, 255);
   }
-`, D = o.div`
+`, Y = o.div`
   position: relative;
   height: 100%;
   width: 100%;
-`, H = o.div`
+`, E = o.div`
   position: absolute;
   left: 1.6%;
   top: 43.8%;
@@ -75,28 +75,73 @@ const s = 1, f = 16.67, a = 1.67, g = 3.404, v = ({ $color: e }) => c[e], n = r`
   ${n};
   width: ${t(50)}rem;
   height: ${t(5.33)}rem;
-  background: ${i};
+  background: ${a};
 `, N = o.div`
   ${n};
   width: ${t(80)}rem;
   height: ${t(4)}rem;
-  background: ${m.m200};
-`, C = o.div`
+  background: ${p.m200};
+`, X = o.div`
   ${n};
   width: ${t(133.33)}rem;
   height: ${t(3.64)}rem;
-  background: ${p.m800};
-`, d = l`
+  background: ${c.m800};
+`, d = i`
   from { opacity: 1; transform: scale(1); }
   to   { opacity: 0; transform: scale(0.9); }
-`, E = o.div`
+`, w = i`
+  from { opacity: 0; transform: translateY(-5px); }
+  to   { opacity: 1; transform: translateY(0); }
+`, x = i`
+  from { opacity: 0; transform: translateX(-50%) translateY(calc(-100% + 8px)) scale(0.9); }
+  to   { opacity: 1; transform: translateX(-50%) translateY(-100%) scale(1); }
+`, k = i`
+  from { opacity: 1; transform: translateX(-50%) translateY(-100%) scale(1); }
+  to   { opacity: 0; transform: translateX(-50%) translateY(calc(-100% + 8px)) scale(0.85); }
+`, C = o.span`
+  display: inline-block;
+  animation: ${w} 0.28s cubic-bezier(0.34, 1.56, 0.64, 1) both;
+`, L = o.div`
   position: absolute;
   inset: 0;
   pointer-events: none;
-  ${({ $dismissing: e }) => e && r`
+  border-radius: inherit;
+  background: radial-gradient(
+    ellipse 88% 88% at 50% 48%,
+    rgba(0, 0, 0, 0) 18%,
+    rgba(0, 0, 0, 0.05) 42%,
+    rgba(0, 0, 0, 0.16) 65%,
+    rgba(0, 0, 0, 0.3) 85%,
+    rgba(0, 0, 0, 0.42) 100%
+  );
+  ${({ $dismissing: r }) => r && e`
       animation: ${d} 0.6s ease-out forwards;
     `}
-`, z = o.div`
+`, G = o.div`
+  position: absolute;
+  left: 50%;
+  top: calc(${t(100 / 12)}rem - ${t(55)}rem);
+  display: flex;
+  align-items: center;
+  gap: 0.3em;
+  white-space: nowrap;
+  color: rgba(255, 255, 255, 0.82);
+  font-size: ${t(21)}rem;
+  font-weight: 600;
+  letter-spacing: 0.05em;
+  padding: 0.22em 0.6em;
+  border-radius: 999px;
+  background: rgba(0, 0, 0, 0.22);
+  backdrop-filter: blur(6px);
+  -webkit-backdrop-filter: blur(6px);
+  border: 1px solid rgba(255, 255, 255, 0.12);
+  pointer-events: none;
+  animation: ${({ $dismissing: r }) => r ? e`
+          ${k} 0.5s cubic-bezier(0.4, 0, 0.2, 1) forwards
+        ` : e`
+          ${x} 0.4s cubic-bezier(0.34, 1.56, 0.64, 1) both
+        `};
+`, V = o.div`
   position: absolute;
   bottom: 6%;
   left: 8%;
@@ -104,65 +149,67 @@ const s = 1, f = 16.67, a = 1.67, g = 3.404, v = ({ $color: e }) => c[e], n = r`
   align-items: center;
   gap: ${t(50)}rem;
 
-  ${({ $noActions: e }) => e && r`
+  ${({ $noActions: r }) => r && e`
       pointer-events: none;
       opacity: 0.5;
     `}
-`, G = o.div`
+`, j = o.div`
   position: absolute;
   bottom: 6%;
   right: 8%;
   border-radius: ${t(50)}rem;
-`, L = o.button`
+`, q = o.button`
   position: relative;
   height: ${t(8.33)}rem;
   width: ${t(8.33)}rem;
   cursor: pointer;
-  background-color: rgba(0, 0, 0, 0.4);
-  border: none;
+  background-color: rgba(0, 0, 0, 0.28);
+  backdrop-filter: blur(6px);
+  -webkit-backdrop-filter: blur(6px);
+  border: 1px solid rgba(255, 255, 255, 0.1);
   border-radius: ${t(50)}rem;
   padding: 0;
 
   &:focus-visible {
-    outline: 2px solid ${i};
+    outline: 2px solid ${a};
     outline-offset: 2px;
   }
-`, V = o($)`
+`, J = o(u)`
   position: absolute;
   left: 50%;
   top: 50%;
   transform: translate(-50%, -50%);
-`, j = o(h)`
+`, K = o(b)`
   position: absolute;
   left: 50%;
   top: 50%;
   transform: translate(-50%, -50%);
-`, q = o(u)`
+`, Q = o(g)`
   position: absolute;
   left: 50%;
   top: 50%;
   transform: translate(-50%, -50%);
-`, J = o(b)`
+`, U = o(f)`
   position: absolute;
   left: 50%;
   top: 50%;
   transform: translate(-50%, -50%);
-`, K = o.span`
+`, Z = o.span`
   position: absolute;
   width: 1px;
   height: 1px;
   overflow: hidden;
   clip-path: inset(50%);
   white-space: nowrap;
-`, Q = o.div`
+`, tt = o.div`
   position: absolute;
   width: ${t(35)}rem;
   height: ${t(35)}rem;
   border-radius: 50%;
-  background-color: ${i};
+  background-color: ${a};
   left: calc(-${t(70)}rem);
   top: calc(-${t(100 / 33)}rem - ${t(70)}rem);
-`, U = o.div`
+`, ot = o.div`
   position: absolute;
   left: 50%;
   top: 48%;
@@ -171,30 +218,32 @@ const s = 1, f = 16.67, a = 1.67, g = 3.404, v = ({ $color: e }) => c[e], n = r`
   rotate: var(--bullet-rotate);
   transform-origin: 0 0;
   transition: rotate 0.3s ease;
-  ${({ $dismissing: e }) => e && r`
+  ${({ $dismissing: r }) => r && e`
       animation: ${d} 0.6s ease-out forwards;
     `}
 `;
 export {
-  L as ActionBtn,
-  V as AddWrapper,
-  E as AlarmRing,
-  H as AllDots,
-  Q as Bullet,
-  U as BulletRing,
-  W as Dimmer,
-  S as Dots,
-  D as DotsWrapper,
+  q as ActionBtn,
+  J as AddWrapper,
+  G as AlarmLabel,
+  L as AlarmRing,
+  E as AllDots,
+  tt as Bullet,
+  ot as BulletRing,
+  D as Dimmer,
+  H as Dots,
+  Y as DotsWrapper,
   B as HourHand,
-  z as LeftActions,
-  q as MediaPauseFilledWrapper,
-  J as MediaPlayFilledWrapper,
-  j as MediaStopFilledWrapper,
+  V as LeftActions,
+  Q as MediaPauseFilledWrapper,
+  U as MediaPlayFilledWrapper,
+  K as MediaStopFilledWrapper,
   N as MinuteHand,
-  G as RightActions,
-  C as SecondHand,
-  _ as Time,
-  F as TimeTxt,
-  K as VisuallyHidden,
-  T as Wrapper
+  j as RightActions,
+  X as SecondHand,
+  F as Time,
+  z as TimeTxt,
+  C as TimerDigit,
+  Z as VisuallyHidden,
+  _ as Wrapper
 };

package/package.json

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