meticulous-ui 3.2.4 → 3.2.5

package/components/Timer/Timer.js

@@ -3,7 +3,7 @@ import { useState as a, useRef as de, useEffect as O } from "react";
 import ce from "../Glass/Glass.js";
 import ue from "./components/TimerRing/TimerRing.js";
 import h from "../../colors/white.js";
-import { Wrapper as me, Dimmer as he, DotsWrapper as pe, AllDots as ge, Dots as be, Time as U, TimeTxt as _, HourHand as fe, MinuteHand as Se, SecondHand as Te, AlarmRing as $e, BulletRing as Ae, Bullet as ye, VisuallyHidden as Re, LeftActions as De, ActionBtn as p, MediaStopFilledWrapper as Pe, MediaPauseFilledWrapper as we, MediaPlayFilledWrapper as He, RightActions as Ie, AddWrapper as Me } from "./styles.js";
+import { Wrapper as me, AlarmRing as he, BulletRing as pe, Bullet as ge, VisuallyHidden as be, Dimmer as fe, DotsWrapper as Se, AllDots as Te, Dots as $e, Time as U, TimeTxt as _, HourHand as Ae, MinuteHand as ye, SecondHand as Re, LeftActions as De, ActionBtn as p, MediaStopFilledWrapper as Pe, MediaPauseFilledWrapper as we, MediaPlayFilledWrapper as He, RightActions as Ie, AddWrapper as Me } from "./styles.js";
 import { getSize as ke } from "./helpers.js";
 const c = () => {
 }, Ce = (g) => () => {
@@ -63,14 +63,43 @@ const c = () => {
   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" }),
+    (!l || R) && /* @__PURE__ */ n(v, { children: [
+      /* @__PURE__ */ e(
+        he,
+        {
+          $dismissing: R,
+          onAnimationEnd: te,
+          "aria-hidden": "true",
+          children: /* @__PURE__ */ e(ue, { progress: s >= 60 ? 1 : s % 60 / 60 })
+        }
+      ),
+      /* @__PURE__ */ e(
+        pe,
+        {
+          $size: t,
+          style: { "--bullet-rotate": `${Y}deg` },
+          $dismissing: R,
+          "aria-hidden": "true",
+          children: /* @__PURE__ */ e(ge, { $size: t })
+        }
+      ),
+      /* @__PURE__ */ e(
+        be,
+        {
+          role: "timer",
+          "aria-live": "polite",
+          "aria-label": `${s} seconds remaining`
+        }
+      )
+    ] }),
     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)) }) }) }),
+      /* @__PURE__ */ e(fe, { "aria-hidden": "true", $size: t, children: /* @__PURE__ */ e(Se, { children: /* @__PURE__ */ e(Te, { "aria-hidden": "true", children: [...Array(60)].map((N, d) => /* @__PURE__ */ e($e, { $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: S.toISOString(), "aria-label": L, children: [
         /* @__PURE__ */ e(
-          fe,
+          Ae,
           {
             $size: t,
             style: { "--hand-rotate": `${A.hour}deg` },
@@ -78,7 +107,7 @@ const c = () => {
           }
         ),
         /* @__PURE__ */ e(
-          Se,
+          ye,
           {
             $size: t,
             style: { "--hand-rotate": `${A.minute}deg` },
@@ -86,7 +115,7 @@ const c = () => {
           }
         ),
         /* @__PURE__ */ e(
-          Te,
+          Re,
           {
             $size: t,
             style: { "--hand-rotate": `${A.second}deg` },
@@ -95,35 +124,6 @@ const c = () => {
         )
       ] })
     ] }),
-    (!l || R) && /* @__PURE__ */ n(v, { children: [
-      /* @__PURE__ */ e(
-        $e,
-        {
-          $dismissing: R,
-          onAnimationEnd: te,
-          "aria-hidden": "true",
-          children: /* @__PURE__ */ e(ue, { progress: s >= 60 ? 1 : s % 60 / 60 })
-        }
-      ),
-      /* @__PURE__ */ e(
-        Ae,
-        {
-          $size: t,
-          style: { "--bullet-rotate": `${45 + Y}deg` },
-          $dismissing: R,
-          "aria-hidden": "true",
-          children: /* @__PURE__ */ e(ye, { $size: t })
-        }
-      ),
-      /* @__PURE__ */ e(
-        Re,
-        {
-          role: "timer",
-          "aria-live": "polite",
-          "aria-label": `${s} seconds remaining`
-        }
-      )
-    ] }),
     r > 0 && /* @__PURE__ */ n(
       De,
       {

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

@@ -15,7 +15,7 @@ const r = 33, e = 2 * Math.PI * r, u = ({ progress: o }) => {
         cy: 48,
         r,
         stroke: "rgba(255,255,255,.2)",
-        strokeWidth: 2,
+        strokeWidth: 1,
         fill: "none"
       }
     ),
@@ -27,7 +27,7 @@ const r = 33, e = 2 * Math.PI * r, u = ({ progress: o }) => {
         cy: 48,
         r,
         stroke: a,
-        strokeWidth: 1,
+        strokeWidth: 1.33,
         fill: "none",
         strokeLinecap: "round",
         strokeDasharray: e,

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 s = 1, g = 16.67, a = 1.67, f = 3.404, v = ({ $color: e }) => $[e], n = r`
+const s = 1, f = 16.67, a = 1.67, g = 3.404, v = ({ $color: e }) => $[e], n = r`
   position: absolute;
   bottom: 50%;
   transform-origin: bottom;
@@ -19,7 +19,7 @@ const s = 1, g = 16.67, a = 1.67, f = 3.404, v = ({ $color: e }) => $[e], n = r`
   position: relative;
   height: ${t(s)}rem;
   width: ${t(s)}rem;
-  border-radius: ${t(g)}rem;
+  border-radius: ${t(f)}rem;
   background-color: ${v};
 `, W = o.div`
   position: absolute;
@@ -47,7 +47,7 @@ const s = 1, g = 16.67, a = 1.67, f = 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(f)}rem;
+  transform-origin: ${t(g)}rem;
   border-radius: 2px;
   rotate: ${({ $i: e }) => `${e * 6}deg`};
 
@@ -88,13 +88,13 @@ const s = 1, g = 16.67, a = 1.67, f = 3.404, v = ({ $color: e }) => $[e], n = r`
   background: ${b.m800};
 `, d = l`
   from { opacity: 1; transform: scale(1); }
-  to   { opacity: 0; transform: scale(0.85); }
+  to   { opacity: 0; transform: scale(0.9); }
 `, E = o.div`
   position: absolute;
   inset: 0;
   pointer-events: none;
   ${({ $dismissing: e }) => e && r`
-      animation: ${d} 0.4s ease-out forwards;
+      animation: ${d} 0.6s ease-out forwards;
     `}
 `, z = o.div`
   position: absolute;
@@ -155,21 +155,24 @@ const s = 1, g = 16.67, a = 1.67, f = 3.404, v = ({ $color: e }) => $[e], n = r`
   clip-path: inset(50%);
   white-space: nowrap;
 `, Q = o.div`
+  position: absolute;
   width: ${t(35)}rem;
   height: ${t(35)}rem;
   border-radius: 50%;
   background-color: ${i};
+  left: calc(-${t(70)}rem);
+  top: calc(-${t(100 / 33)}rem - ${t(70)}rem);
 `, U = o.div`
   position: absolute;
-  left: 26%;
-  top: 24%;
+  left: 50%;
+  top: 48%;
+  width: 0;
+  height: 0;
   rotate: var(--bullet-rotate);
-  height: ${t(2.05)}rem;
-  width: ${t(2.05)}rem;
-  transform-origin: center;
+  transform-origin: 0 0;
   transition: rotate 0.3s ease;
   ${({ $dismissing: e }) => e && r`
-      animation: ${d} 0.4s ease-out forwards;
+      animation: ${d} 0.6s ease-out forwards;
     `}
 `;
 export {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "meticulous-ui",
-  "version": "3.2.4",
+  "version": "3.2.5",
   "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.",
   "main": "./index.js",