meticulous-ui 3.7.12 → 3.7.13

package/components/Spinner/Spinner.js

@@ -28,29 +28,36 @@ const k = a`
 `, S = n.circle`
   animation: ${u} 1.4s ease-in-out infinite;
 `, $ = {
-  small: {
-    strokeWidth: 6,
-    $length: "2.4rem"
-  },
-  medium: {
-    strokeWidth: 5,
-    $length: "3.6rem"
-  },
-  large: {
-    strokeWidth: 5,
-    $length: "5rem"
-  }
-}, x = ({
-  color: r = "green",
-  size: m = "medium",
-  ...l
-}) => {
+  small: { strokeWidth: 6, $length: "2.4rem" },
+  medium: { strokeWidth: 5, $length: "3.6rem" },
+  large: { strokeWidth: 5, $length: "5rem" }
+}, x = ({ color: r = "green", size: m = "medium", ...l }) => {
   var t, o;
-  const {
-    strokeWidth: d,
-    $length: e
-  } = $[m], f = [p, g.m600].includes(r) ? r : (o = (t = h[r]) != null ? t : c) == null ? void 0 : o.m500;
-  return /* @__PURE__ */ s(y, { viewBox: "0 0 50 50", width: e, height: e, role: "status", "aria-label": "Loading", "aria-live": "polite", ...l, children: /* @__PURE__ */ s(S, { cx: "25", cy: "25", r: "20", fill: "none", stroke: f, strokeWidth: d, strokeLinecap: "round" }) });
+  const { strokeWidth: d, $length: e } = $[m], f = [p, g.m600].includes(r) ? r : (o = (t = h[r]) != null ? t : c) == null ? void 0 : o.m500;
+  return /* @__PURE__ */ s(
+    y,
+    {
+      viewBox: "0 0 50 50",
+      width: e,
+      height: e,
+      role: "status",
+      "aria-label": "Loading",
+      "aria-live": "polite",
+      ...l,
+      children: /* @__PURE__ */ s(
+        S,
+        {
+          cx: "25",
+          cy: "25",
+          r: "20",
+          fill: "none",
+          stroke: f,
+          strokeWidth: d,
+          strokeLinecap: "round"
+        }
+      )
+    }
+  );
 };
 x.propTypes = {
   /** Color theme key (e.g. `'green'`, `'blue'`) or a raw color value. Defaults to `'green'` */

package/components/Timer/Timer.js

@@ -13,11 +13,7 @@ import It from "../Icons/MediaPauseFilled.js";
 import Mt from "../Icons/MediaPlayFilled.js";
 import { COLOR_MAPPING as Dt } from "./constants.js";
 import r, { css as h, keyframes as S } from "styled-components";
-const t = (i) => ({
-  $size: w
-}) => w / i, q = 1, Ct = 16.67, J = 1.67, Ot = 3.404, zt = ({
-  $color: i
-}) => Dt[i], _ = h`
+const t = (i) => ({ $size: w }) => w / i, q = 1, Ct = 16.67, J = 1.67, Ot = 3.404, zt = ({ $color: i }) => Dt[i], _ = h`
   position: absolute;
   bottom: 50%;
   transform-origin: bottom;
@@ -26,16 +22,16 @@ const t = (i) => ({
   rotate: var(--hand-rotate);
 `, _t = r.div`
   position: relative;
-  height: ${/* @__PURE__ */ t(q)}rem;
-  width: ${/* @__PURE__ */ t(q)}rem;
-  border-radius: ${/* @__PURE__ */ t(Ct)}rem;
+  height: ${t(q)}rem;
+  width: ${t(q)}rem;
+  border-radius: ${t(Ct)}rem;
   background-color: ${zt};
 `, Et = r.div`
   position: absolute;
   left: 50%;
   top: 48%;
-  width: ${/* @__PURE__ */ t(J)}rem;
-  height: ${/* @__PURE__ */ t(J)}rem;
+  width: ${t(J)}rem;
+  height: ${t(J)}rem;
   transform: translate(-50%, -50%);
   border-radius: 50%;
   background-color: rgba(0, 0, 0, 0.16);
@@ -47,30 +43,28 @@ const t = (i) => ({
   transform: translate(-50%, -50%);
 `, V = r.div`
   color: ${c};
-  font-size: ${/* @__PURE__ */ t(13.33)}rem;
+  font-size: ${t(13.33)}rem;
   font-weight: 650;
   text-align: center;
   opacity: 0.84;
 `, Ht = r.span`
   position: absolute;
-  width: ${/* @__PURE__ */ t(120)}rem;
-  height: ${/* @__PURE__ */ t(120)}rem;
+  width: ${t(120)}rem;
+  height: ${t(120)}rem;
   background: rgba(255, 255, 255, 0.4);
-  transform-origin: ${/* @__PURE__ */ t(Ot)}rem;
+  transform-origin: ${t(Ot)}rem;
   border-radius: 2px;
-  rotate: ${({
-  $i: i
-}) => `${i * 6}deg`};
+  rotate: ${({ $i: i }) => `${i * 6}deg`};
 
   &:nth-child(5n) {
-    width: ${/* @__PURE__ */ t(90)}rem;
-    height: ${/* @__PURE__ */ t(90)}rem;
+    width: ${t(90)}rem;
+    height: ${t(90)}rem;
     background: rgba(255, 255, 255, 0.7);
   }
 
   &:nth-child(15n) {
-    width: ${/* @__PURE__ */ t(50)}rem;
-    height: ${/* @__PURE__ */ t(130)}rem;
+    width: ${t(50)}rem;
+    height: ${t(130)}rem;
     background: rgba(255, 255, 255);
   }
 `, Nt = r.div`
@@ -84,18 +78,18 @@ const t = (i) => ({
   transform: translate(-50%, -50%) rotate(6.7deg);
 `, Ft = r.div`
   ${_};
-  width: ${/* @__PURE__ */ t(50)}rem;
-  height: ${/* @__PURE__ */ t(5.33)}rem;
+  width: ${t(50)}rem;
+  height: ${t(5.33)}rem;
   background: ${c};
 `, Lt = r.div`
   ${_};
-  width: ${/* @__PURE__ */ t(80)}rem;
-  height: ${/* @__PURE__ */ t(4)}rem;
+  width: ${t(80)}rem;
+  height: ${t(4)}rem;
   background: ${kt.m200};
 `, Yt = r.div`
   ${_};
-  width: ${/* @__PURE__ */ t(133.33)}rem;
-  height: ${/* @__PURE__ */ t(3.64)}rem;
+  width: ${t(133.33)}rem;
+  height: ${t(3.64)}rem;
   background: ${At.m800};
 `, Z = S`
   from { opacity: 1; transform: scale(1); }
@@ -125,21 +119,19 @@ const t = (i) => ({
     rgba(0, 0, 0, 0.3) 85%,
     rgba(0, 0, 0, 0.42) 100%
   );
-  ${({
-  $dismissing: i
-}) => i && h`
+  ${({ $dismissing: i }) => i && h`
       animation: ${Z} 0.6s ease-out forwards;
     `}
 `, Kt = r.div`
   position: absolute;
   left: 50%;
-  top: calc(${/* @__PURE__ */ t(100 / 12)}rem - ${/* @__PURE__ */ t(55)}rem);
+  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: ${/* @__PURE__ */ t(21)}rem;
+  font-size: ${t(21)}rem;
   font-weight: 600;
   letter-spacing: 0.05em;
   padding: 0.22em 0.6em;
@@ -149,9 +141,7 @@ const t = (i) => ({
   -webkit-backdrop-filter: blur(6px);
   border: 1px solid rgba(255, 255, 255, 0.12);
   pointer-events: none;
-  animation: ${({
-  $dismissing: i
-}) => i ? h`
+  animation: ${({ $dismissing: i }) => i ? h`
           ${Xt} 0.5s cubic-bezier(0.4, 0, 0.2, 1) forwards
         ` : h`
           ${jt} 0.4s cubic-bezier(0.34, 1.56, 0.64, 1) both
@@ -162,11 +152,9 @@ const t = (i) => ({
   left: 8%;
   display: flex;
   align-items: center;
-  gap: ${/* @__PURE__ */ t(50)}rem;
+  gap: ${t(50)}rem;
 
-  ${({
-  $noActions: i
-}) => i && h`
+  ${({ $noActions: i }) => i && h`
       pointer-events: none;
       opacity: 0.5;
     `}
@@ -174,17 +162,17 @@ const t = (i) => ({
   position: absolute;
   bottom: 6%;
   right: 8%;
-  border-radius: ${/* @__PURE__ */ t(50)}rem;
+  border-radius: ${t(50)}rem;
 `, v = r.button`
   position: relative;
-  height: ${/* @__PURE__ */ t(8.33)}rem;
-  width: ${/* @__PURE__ */ t(8.33)}rem;
+  height: ${t(8.33)}rem;
+  width: ${t(8.33)}rem;
   cursor: pointer;
   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: ${/* @__PURE__ */ t(50)}rem;
+  border-radius: ${t(50)}rem;
   padding: 0;
 
   &:focus-visible {
@@ -220,12 +208,12 @@ const t = (i) => ({
   white-space: nowrap;
 `, re = r.div`
   position: absolute;
-  width: ${/* @__PURE__ */ t(35)}rem;
-  height: ${/* @__PURE__ */ t(35)}rem;
+  width: ${t(35)}rem;
+  height: ${t(35)}rem;
   border-radius: 50%;
   background-color: ${c};
-  left: calc(-${/* @__PURE__ */ t(70)}rem);
-  top: calc(-${/* @__PURE__ */ t(100 / 33)}rem - ${/* @__PURE__ */ t(70)}rem);
+  left: calc(-${t(70)}rem);
+  top: calc(-${t(100 / 33)}rem - ${t(70)}rem);
 `, oe = r.div`
   position: absolute;
   left: 50%;
@@ -235,17 +223,12 @@ const t = (i) => ({
   rotate: var(--bullet-rotate);
   transform-origin: 0 0;
   transition: rotate 0.3s ease;
-  ${({
-  $dismissing: i
-}) => i && h`
+  ${({ $dismissing: i }) => i && h`
       animation: ${Z} 0.6s ease-out forwards;
     `}
 `, $ = () => {
 }, ie = (i) => () => {
-  const g = (/* @__PURE__ */ new Date()).toLocaleString("en-Us", {
-    hour12: !0,
-    timeZone: i
-  }).split(", ")[1].split(" ")[0], [A, a, y] = g.split(":").map(Number);
+  const g = (/* @__PURE__ */ new Date()).toLocaleString("en-Us", { hour12: !0, timeZone: i }).split(", ")[1].split(" ")[0], [A, a, y] = g.split(":").map(Number);
   return {
     second: y * 6,
     minute: a * 6 + y * 0.1,
@@ -285,10 +268,7 @@ const t = (i) => ({
     const m = setInterval(() => {
       const l = /* @__PURE__ */ new Date();
       nt(l), at((d) => {
-        const gt = l.toLocaleString("en-Us", {
-          hour12: !0,
-          timeZone: g
-        }).split(", ")[1].split(" ")[0], [ft, Y, B] = gt.split(":").map(Number), $t = B * 6, wt = Y * 6 + B * 0.1, yt = ft % 12 * 30 + Y * 0.5, z = (j, X) => {
+        const gt = l.toLocaleString("en-Us", { hour12: !0, timeZone: g }).split(", ")[1].split(" ")[0], [ft, Y, B] = gt.split(":").map(Number), $t = B * 6, wt = Y * 6 + B * 0.1, yt = ft % 12 * 30 + Y * 0.5, z = (j, X) => {
           const G = j % 360;
           return j - G + X + (X < G ? 360 : 0);
         };
@@ -301,20 +281,37 @@ const t = (i) => ({
     }, 1e3);
     return () => clearInterval(m);
   }, []);
-  const O = R.toLocaleString("en-Us", {
-    hour12: !0,
-    timeZone: g
-  }).split(", ")[1], N = O.split(" ")[0], W = O.split(" ")[1], F = O.split(":").slice(0, 2).join(":"), u = !(Number.isInteger(s) && s > 0), ut = String(Math.floor(s / 60)).padStart(2, "0"), bt = String(s % 60).padStart(2, "0"), ht = `${ut}:${bt}`, L = `${k ? N : F} ${W}`;
+  const O = R.toLocaleString("en-Us", { hour12: !0, timeZone: g }).split(", ")[1], N = O.split(" ")[0], W = O.split(" ")[1], F = O.split(":").slice(0, 2).join(":"), u = !(Number.isInteger(s) && s > 0), ut = String(Math.floor(s / 60)).padStart(2, "0"), bt = String(s % 60).padStart(2, "0"), ht = `${ut}:${bt}`, L = `${k ? N : F} ${W}`;
   return /* @__PURE__ */ p(_t, { $color: i, role: "region", "aria-label": "Clock", $size: o, ...it, children: [
-    /* @__PURE__ */ e(vt, { borderRadius: `${t(16.67)({
-      $size: o
-    })}rem`, "aria-hidden": "true" }),
+    /* @__PURE__ */ e(vt, { borderRadius: `${t(16.67)({ $size: o })}rem`, "aria-hidden": "true" }),
     (!u || f) && /* @__PURE__ */ p(U, { children: [
-      /* @__PURE__ */ e(Ut, { $dismissing: f, onAnimationEnd: ct, "aria-hidden": "true", children: /* @__PURE__ */ e(St, { progress: s >= 60 ? 1 : s % 60 / 60 }) }),
-      /* @__PURE__ */ e(oe, { $size: o, style: {
-        "--bullet-rotate": `${st}deg`
-      }, $dismissing: f, "aria-hidden": "true", children: /* @__PURE__ */ e(re, { $size: o }) }),
-      /* @__PURE__ */ e(ee, { role: "timer", "aria-live": "polite", "aria-label": `${s} seconds remaining` })
+      /* @__PURE__ */ e(
+        Ut,
+        {
+          $dismissing: f,
+          onAnimationEnd: ct,
+          "aria-hidden": "true",
+          children: /* @__PURE__ */ e(St, { progress: s >= 60 ? 1 : s % 60 / 60 })
+        }
+      ),
+      /* @__PURE__ */ e(
+        oe,
+        {
+          $size: o,
+          style: { "--bullet-rotate": `${st}deg` },
+          $dismissing: f,
+          "aria-hidden": "true",
+          children: /* @__PURE__ */ e(re, { $size: o })
+        }
+      ),
+      /* @__PURE__ */ e(
+        ee,
+        {
+          role: "timer",
+          "aria-live": "polite",
+          "aria-label": `${s} seconds remaining`
+        }
+      )
     ] }),
     w && /* @__PURE__ */ p(U, { children: [
       /* @__PURE__ */ e(Et, { "aria-hidden": "true", $size: o, children: /* @__PURE__ */ e(Nt, { children: /* @__PURE__ */ e(Wt, { "aria-hidden": "true", children: [...Array(60)].map((m, l) => /* @__PURE__ */ e(Ht, { $i: l, $size: o }, l)) }) }) }),
@@ -322,30 +319,95 @@ const t = (i) => ({
         /* @__PURE__ */ e(V, { $size: o, "aria-hidden": "true", children: k ? N : F }),
         /* @__PURE__ */ e(V, { $size: o, "aria-hidden": "true", children: W })
       ] }) : /* @__PURE__ */ p(Q, { as: "time", dateTime: R.toISOString(), "aria-label": L, children: [
-        /* @__PURE__ */ e(Ft, { $size: o, style: {
-          "--hand-rotate": `${I.hour}deg`
-        }, "aria-hidden": "true" }),
-        /* @__PURE__ */ e(Lt, { $size: o, style: {
-          "--hand-rotate": `${I.minute}deg`
-        }, "aria-hidden": "true" }),
-        /* @__PURE__ */ e(Yt, { $size: o, style: {
-          "--hand-rotate": `${I.second}deg`
-        }, "aria-hidden": "true" })
+        /* @__PURE__ */ e(
+          Ft,
+          {
+            $size: o,
+            style: { "--hand-rotate": `${I.hour}deg` },
+            "aria-hidden": "true"
+          }
+        ),
+        /* @__PURE__ */ e(
+          Lt,
+          {
+            $size: o,
+            style: { "--hand-rotate": `${I.minute}deg` },
+            "aria-hidden": "true"
+          }
+        ),
+        /* @__PURE__ */ e(
+          Yt,
+          {
+            $size: o,
+            style: { "--hand-rotate": `${I.second}deg` },
+            "aria-hidden": "true"
+          }
+        )
       ] })
     ] }),
-    a > 0 && /* @__PURE__ */ p(qt, { $size: o, $noActions: u, role: "group", "aria-label": "Timer controls", children: [
-      /* @__PURE__ */ e(v, { type: "button", onClick: dt, $size: o, "aria-label": "Stop timer", "aria-disabled": u, children: /* @__PURE__ */ e(Vt, { color: c, size: C, "aria-hidden": "true" }) }),
-      u || !T ? /* @__PURE__ */ e(v, { type: "button", onClick: mt, $size: o, "aria-label": "Pause timer", "aria-disabled": u, children: /* @__PURE__ */ e(Zt, { color: c, size: C, "aria-hidden": "true" }) }) : /* @__PURE__ */ e(v, { type: "button", onClick: pt, "aria-label": "Resume timer", $size: o, children: /* @__PURE__ */ e(te, { color: c, size: C, "aria-hidden": "true" }) })
-    ] }),
-    (!u || f) && /* @__PURE__ */ p(Kt, { $size: o, $dismissing: f, "aria-label": `${s} seconds remaining`, children: [
-      /* @__PURE__ */ e(Rt, { color: "rgba(255,255,255,0.82)", style: {
-        width: "1em",
-        height: "1em",
-        flexShrink: 0
-      } }),
-      ht.split("").map((m, l) => m === ":" ? /* @__PURE__ */ e("span", { children: m }, l) : /* @__PURE__ */ e(Gt, { children: m }, `${l}-${m}`))
-    ] }),
-    a > 0 && /* @__PURE__ */ e(Jt, { role: "group", $size: o, "aria-label": "Start timer", children: /* @__PURE__ */ e(v, { type: "button", onClick: lt, $size: o, "aria-label": `Start ${a} second timer`, children: /* @__PURE__ */ e(Qt, { color: c, size: o, "aria-hidden": "true" }) }) })
+    a > 0 && /* @__PURE__ */ p(
+      qt,
+      {
+        $size: o,
+        $noActions: u,
+        role: "group",
+        "aria-label": "Timer controls",
+        children: [
+          /* @__PURE__ */ e(
+            v,
+            {
+              type: "button",
+              onClick: dt,
+              $size: o,
+              "aria-label": "Stop timer",
+              "aria-disabled": u,
+              children: /* @__PURE__ */ e(Vt, { color: c, size: C, "aria-hidden": "true" })
+            }
+          ),
+          u || !T ? /* @__PURE__ */ e(
+            v,
+            {
+              type: "button",
+              onClick: mt,
+              $size: o,
+              "aria-label": "Pause timer",
+              "aria-disabled": u,
+              children: /* @__PURE__ */ e(Zt, { color: c, size: C, "aria-hidden": "true" })
+            }
+          ) : /* @__PURE__ */ e(v, { type: "button", onClick: pt, "aria-label": "Resume timer", $size: o, children: /* @__PURE__ */ e(te, { color: c, size: C, "aria-hidden": "true" }) })
+        ]
+      }
+    ),
+    (!u || f) && /* @__PURE__ */ p(
+      Kt,
+      {
+        $size: o,
+        $dismissing: f,
+        "aria-label": `${s} seconds remaining`,
+        children: [
+          /* @__PURE__ */ e(
+            Rt,
+            {
+              color: "rgba(255,255,255,0.82)",
+              style: { width: "1em", height: "1em", flexShrink: 0 }
+            }
+          ),
+          ht.split("").map(
+            (m, l) => m === ":" ? /* @__PURE__ */ e("span", { children: m }, l) : /* @__PURE__ */ e(Gt, { children: m }, `${l}-${m}`)
+          )
+        ]
+      }
+    ),
+    a > 0 && /* @__PURE__ */ e(Jt, { role: "group", $size: o, "aria-label": "Start timer", children: /* @__PURE__ */ e(
+      v,
+      {
+        type: "button",
+        onClick: lt,
+        $size: o,
+        "aria-label": `Start ${a} second timer`,
+        children: /* @__PURE__ */ e(Qt, { color: c, size: o, "aria-hidden": "true" })
+      }
+    ) })
   ] });
 };
 ne.propTypes = {

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

@@ -2,9 +2,7 @@ import { jsxs as r, jsx as e } from "react/jsx-runtime";
 import { useRef as f, useEffect as d } from "react";
 import s from "../../../../colors/white.js";
 import u from "styled-components";
-const g = u.svg``, i = 33, o = 2 * Math.PI * i, x = ({
-  progress: t
-}) => {
+const g = u.svg``, i = 33, o = 2 * Math.PI * i, x = ({ progress: t }) => {
   const c = f(null), l = 2 * Math.PI * t, n = 50 + i * Math.cos(l), a = 48 + i * Math.sin(l);
   return d(() => {
     const h = o * (1 - t);
@@ -31,15 +29,62 @@ const g = u.svg``, i = 33, o = 2 * Math.PI * i, x = ({
       ] })
     ] }),
     /* @__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)" }),
+      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: s, 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: n, cy: a, r: 1.8, fill: s, 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)"
-      } })
+      /* @__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: s,
+          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: n,
+          cy: a,
+          r: 1.8,
+          fill: s,
+          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)"
+          }
+        }
+      )
     ] })
   ] });
 };