meticulous-ui 2.8.2 → 2.8.3

package/components/Timer/Timer.js

@@ -1,113 +1,130 @@
-import { jsxs as i, jsx as e, Fragment as B } from "react/jsx-runtime";
-import { useState as n, useRef as se, useEffect as F } from "react";
-import oe from "../Glass/Glass.js";
+import { jsxs as i, jsx as e, Fragment as F } from "react/jsx-runtime";
+import { useState as n, useRef as oe, useEffect as N } from "react";
+import se from "../Glass/Glass.js";
 import le from "./components/TimerRing/TimerRing.js";
-import u from "../../colors/white.js";
-import { Wrapper as ce, Dimmer as de, Time as N, TimeTxt as E, HourHand as ue, MinuteHand as me, SecondHand as he, AllDots as pe, Dots as ge, AlarmRing as fe, BulletRing as Se, Bullet as be, LeftActions as Te, ActionBtn as m, MediaStopFilledWrapper as we, MediaPauseFilledWrapper as Ae, MediaPlayFilledWrapper as $e, RightActions as Re, AddWrapper as Pe } from "./styles.js";
-const l = () => {
-}, De = (h) => () => {
-  const a = (/* @__PURE__ */ new Date()).toLocaleString("en-Us", { hour12: !0, timeZone: h }).split(", ")[1].split(" ")[0], [g, r, c] = a.split(":").map(Number);
+import m from "../../colors/white.js";
+import { Wrapper as de, Dimmer as ce, DotsWrapper as ue, AllDots as me, Dots as he, Time as v, TimeTxt as E, HourHand as pe, MinuteHand as ge, SecondHand as be, AlarmRing as fe, BulletRing as Se, Bullet as Te, VisuallyHidden as Ae, LeftActions as $e, ActionBtn as h, MediaStopFilledWrapper as Re, MediaPauseFilledWrapper as De, MediaPlayFilledWrapper as Pe, RightActions as we, AddWrapper as ye } from "./styles.js";
+const d = () => {
+}, He = (p) => () => {
+  const a = (/* @__PURE__ */ new Date()).toLocaleString("en-Us", { hour12: !0, timeZone: p }).split(", ")[1].split(" ")[0], [b, r, c] = a.split(":").map(Number);
   return {
     second: c * 6,
     minute: r * 6 + c * 0.1,
-    hour: g % 12 * 30 + r * 0.5
+    hour: b % 12 * 30 + r * 0.5
   };
-}, je = ({
-  color: h = "green",
-  showTime: H = !0,
-  showTimeWithSec: p = !0,
+}, ze = ({
+  color: p = "green",
+  showTime: y = !0,
+  showTimeWithSec: g = !0,
   timeZone: a = "Asia/Kolkata",
-  isDigital: g = !0,
+  isDigital: b = !0,
   timerSeconds: r = 0,
-  onTimerAdd: c = l,
-  onTimerComplete: U = l,
-  onTimerRemove: O = l,
-  onTimerPause: G = l,
-  onTimerPlay: K = l,
+  onTimerAdd: c = d,
+  onTimerComplete: U = d,
+  onTimerRemove: O = d,
+  onTimerPause: G = d,
+  onTimerPlay: K = d,
   ..._
 }) => {
-  const [f, q] = n(/* @__PURE__ */ new Date()), [s, S] = n(0), [d, b] = n(!1), [T, J] = n(De(a)), [Q, w] = n(0), [A, $] = n(!1), k = se(d);
-  F(() => {
-    k.current = d;
-  }, [d]);
-  const X = () => {
-    S(r), w(r % 60 * 6), b(!1), c();
+  const [f, q] = n(/* @__PURE__ */ new Date()), [o, S] = n(0), [u, T] = n(!1), [A, J] = n(He(a)), [Q, $] = n(0), [R, D] = n(!1), H = oe(u);
+  N(() => {
+    H.current = u;
+  }, [u]);
+  const V = () => {
+    S(r), $(r % 60 * 6), T(!1), c();
+  }, X = () => {
+    D(!0), O();
   }, Y = () => {
-    $(!0), O();
-  }, V = () => {
-    S(0), w(0), $(!1);
+    S(0), $(0), D(!1);
   }, Z = () => {
-    b(!0), G();
+    T(!0), G();
   }, ee = () => {
-    b(!1), K();
+    T(!1), K();
   };
-  F(() => {
-    const L = setInterval(() => {
-      const o = /* @__PURE__ */ new Date();
-      q(o), J((t) => {
-        const te = o.toLocaleString("en-Us", { hour12: !0, timeZone: a }).split(", ")[1].split(" ")[0], [re, W, j] = te.split(":").map(Number), ie = j * 6, ne = W * 6 + j * 0.1, ae = re % 12 * 30 + W * 0.5, D = (v, x) => {
-          const z = v % 360;
-          return v - z + x + (x < z ? 360 : 0);
+  N(() => {
+    const C = setInterval(() => {
+      const l = /* @__PURE__ */ new Date();
+      q(l), J((t) => {
+        const te = l.toLocaleString("en-Us", { hour12: !0, timeZone: a }).split(", ")[1].split(" ")[0], [re, L, j] = te.split(":").map(Number), ie = j * 6, ne = L * 6 + j * 0.1, ae = re % 12 * 30 + L * 0.5, w = (x, z) => {
+          const B = x % 360;
+          return x - B + z + (z < B ? 360 : 0);
         };
         return {
-          second: D(t.second, ie),
-          minute: D(t.minute, ne),
-          hour: D(t.hour, ae)
+          second: w(t.second, ie),
+          minute: w(t.minute, ne),
+          hour: w(t.hour, ae)
         };
-      }), k.current || (S((t) => (t - 1 === 0 && (U(), $(!0)), t - 1)), w((t) => t - 6));
+      }), H.current || (S((t) => (t - 1 === 0 && (U(), D(!0)), t - 1)), $((t) => t - 6));
     }, 1e3);
-    return () => clearInterval(L);
+    return () => clearInterval(C);
   }, []);
-  const R = f.toLocaleString("en-Us", { hour12: !0, timeZone: a }).split(", ")[1], I = R.split(" ")[0], M = R.split(" ")[1], y = R.split(":").slice(0, 2).join(":"), P = !(Number.isInteger(s) && s > 0), C = `${p ? I : y} ${M}`;
-  return /* @__PURE__ */ i(ce, { $color: h, role: "region", "aria-label": "Clock", ..._, children: [
-    /* @__PURE__ */ e(oe, { borderRadius: "1.2rem", "aria-hidden": "true" }),
-    H && /* @__PURE__ */ i(B, { children: [
-      /* @__PURE__ */ e(de, { "aria-hidden": "true" }),
-      g ? /* @__PURE__ */ i(N, { as: "time", dateTime: f.toISOString(), "aria-label": C, children: [
-        /* @__PURE__ */ e(E, { "aria-hidden": "true", children: p ? I : y }),
-        /* @__PURE__ */ e(E, { "aria-hidden": "true", children: M })
-      ] }) : /* @__PURE__ */ i(N, { as: "time", dateTime: f.toISOString(), "aria-label": C, children: [
-        /* @__PURE__ */ e(ue, { $rotate: T.hour, "aria-hidden": "true" }),
-        /* @__PURE__ */ e(me, { $rotate: T.minute, "aria-hidden": "true" }),
-        /* @__PURE__ */ e(he, { $rotate: T.second, "aria-hidden": "true" })
+  const P = f.toLocaleString("en-Us", { hour12: !0, timeZone: a }).split(", ")[1], k = P.split(" ")[0], I = P.split(" ")[1], M = P.split(":").slice(0, 2).join(":"), s = !(Number.isInteger(o) && o > 0), W = `${g ? k : M} ${I}`;
+  return /* @__PURE__ */ i(de, { $color: p, role: "region", "aria-label": "Clock", ..._, children: [
+    /* @__PURE__ */ e(se, { borderRadius: "1.2rem", "aria-hidden": "true" }),
+    y && /* @__PURE__ */ i(F, { children: [
+      /* @__PURE__ */ e(ce, { "aria-hidden": "true", children: /* @__PURE__ */ e(ue, { children: /* @__PURE__ */ e(me, { "aria-hidden": "true", children: [...Array(60)].map((C, l) => /* @__PURE__ */ e(he, { style: { rotate: `${l * 6}deg` } }, l)) }) }) }),
+      b ? /* @__PURE__ */ i(v, { as: "time", dateTime: f.toISOString(), "aria-label": W, children: [
+        /* @__PURE__ */ e(E, { "aria-hidden": "true", children: g ? k : M }),
+        /* @__PURE__ */ e(E, { "aria-hidden": "true", children: I })
+      ] }) : /* @__PURE__ */ i(v, { as: "time", dateTime: f.toISOString(), "aria-label": W, children: [
+        /* @__PURE__ */ e(pe, { $rotate: A.hour, "aria-hidden": "true" }),
+        /* @__PURE__ */ e(ge, { $rotate: A.minute, "aria-hidden": "true" }),
+        /* @__PURE__ */ e(be, { $rotate: A.second, "aria-hidden": "true" })
       ] })
     ] }),
-    /* @__PURE__ */ e(pe, { "aria-hidden": "true", children: [...Array(60)].map((L, o) => /* @__PURE__ */ e(ge, { style: { rotate: `${o * 6}deg` } }, o)) }),
-    (!P || A) && /* @__PURE__ */ i(B, { children: [
+    (!s || R) && /* @__PURE__ */ i(F, { children: [
       /* @__PURE__ */ e(
         fe,
         {
-          $dismissing: A,
-          onAnimationEnd: V,
+          $dismissing: R,
+          onAnimationEnd: Y,
           "aria-hidden": "true",
-          children: /* @__PURE__ */ e(le, { progress: s >= 60 ? 1 : s % 60 / 60 })
+          children: /* @__PURE__ */ e(le, { progress: o >= 60 ? 1 : o % 60 / 60 })
         }
       ),
-      /* @__PURE__ */ e(Se, { $angle: Q, $dismissing: A, "aria-hidden": "true", children: /* @__PURE__ */ e(be, {}) }),
+      /* @__PURE__ */ e(Se, { $angle: Q, $dismissing: R, "aria-hidden": "true", children: /* @__PURE__ */ e(Te, {}) }),
       /* @__PURE__ */ e(
-        "span",
+        Ae,
         {
           role: "timer",
           "aria-live": "polite",
-          "aria-label": `${s} seconds remaining`,
-          style: {
-            position: "absolute",
-            width: 1,
-            height: 1,
-            overflow: "hidden",
-            clip: "rect(0 0 0 0)",
-            whiteSpace: "nowrap"
-          }
+          "aria-label": `${o} seconds remaining`
         }
       )
     ] }),
-    /* @__PURE__ */ i(Te, { $noActions: P, children: [
-      /* @__PURE__ */ e(m, { onClick: Y, "aria-label": "Stop timer", children: /* @__PURE__ */ e(we, { color: u, size: 14, "aria-hidden": "true" }) }),
-      P || !d ? /* @__PURE__ */ e(m, { onClick: Z, "aria-label": "Pause timer", children: /* @__PURE__ */ e(Ae, { color: u, size: 14, "aria-hidden": "true" }) }) : /* @__PURE__ */ e(m, { onClick: ee, "aria-label": "Resume timer", children: /* @__PURE__ */ e($e, { color: u, size: 14, "aria-hidden": "true" }) })
+    /* @__PURE__ */ i($e, { $noActions: s, role: "group", "aria-label": "Timer controls", children: [
+      /* @__PURE__ */ e(
+        h,
+        {
+          type: "button",
+          onClick: X,
+          "aria-label": "Stop timer",
+          "aria-disabled": s,
+          children: /* @__PURE__ */ e(Re, { color: m, size: 14, "aria-hidden": "true" })
+        }
+      ),
+      s || !u ? /* @__PURE__ */ e(
+        h,
+        {
+          type: "button",
+          onClick: Z,
+          "aria-label": "Pause timer",
+          "aria-disabled": s,
+          children: /* @__PURE__ */ e(De, { color: m, size: 14, "aria-hidden": "true" })
+        }
+      ) : /* @__PURE__ */ e(h, { type: "button", onClick: ee, "aria-label": "Resume timer", children: /* @__PURE__ */ e(Pe, { color: m, size: 14, "aria-hidden": "true" }) })
     ] }),
-    /* @__PURE__ */ e(Re, { children: /* @__PURE__ */ e(m, { onClick: X, "aria-label": `Start ${r} second timer`, children: /* @__PURE__ */ e(Pe, { color: u, size: 20, "aria-hidden": "true" }) }) })
+    /* @__PURE__ */ e(we, { role: "group", "aria-label": "Start timer", children: /* @__PURE__ */ e(
+      h,
+      {
+        type: "button",
+        onClick: V,
+        "aria-label": `Start ${r} second timer`,
+        children: /* @__PURE__ */ e(ye, { color: m, size: 20, "aria-hidden": "true" })
+      }
+    ) })
   ] });
 };
 export {
-  je as default
+  ze as default
 };

package/components/Timer/styles.js

@@ -1,25 +1,25 @@
-import t, { css as i, keyframes as a } from "styled-components";
-import s from "../Icons/Add/Add.js";
+import t, { css as i, keyframes as s } from "styled-components";
+import a from "../Icons/Add/Add.js";
 import d from "../Icons/MediaStopFilled/MediaStopFilled.js";
 import p from "../Icons/MediaPauseFilled/MediaPauseFilled.js";
 import l from "../Icons/MediaPlayFilled/MediaPlayFilled.js";
-import r from "../../colors/white.js";
-import m from "../../colors/black.js";
-import c from "../../colors/red.js";
+import e from "../../colors/white.js";
+import c from "../../colors/black.js";
+import m from "../../colors/red.js";
 import { COLOR_MAPPING as h } from "./constants.js";
-const g = ({ $color: o }) => h[o], e = i`
+const u = ({ $color: o }) => h[o], r = i`
   position: absolute;
   bottom: 50%;
   transform-origin: bottom;
   border-radius: 4px;
   transition: rotate 0.3s ease-in-out;
   rotate: ${({ $rotate: o }) => o}deg;
-`, y = t.div`
+`, A = t.div`
   position: relative;
   height: 20rem;
   width: 20rem;
   border-radius: 1.2rem;
-  background-color: ${g};
+  background-color: ${u};
 `, M = t.div`
   position: absolute;
   left: 50%;
@@ -35,18 +35,18 @@ const g = ({ $color: o }) => h[o], e = i`
   left: 50%;
   top: 48%;
   transform: translate(-50%, -50%);
-`, P = t.div`
-  color: ${r};
+`, H = t.div`
+  color: ${e};
   font-size: 1.5rem;
   font-weight: 600;
   text-align: center;
   opacity: 0.8;
-`, H = t.span`
+`, P = t.span`
   position: absolute;
   width: 2.4px;
   height: 2.4px;
   background: rgba(255, 255, 255, 0.4);
-  transform-origin: 94px;
+  transform-origin: 5.875rem;
   border-radius: 2px;
 
   &:nth-child(5n) {
@@ -60,37 +60,41 @@ const g = ({ $color: o }) => h[o], e = i`
     height: 2px;
     background: rgba(255, 255, 255);
   }
-`, S = t.div`
+`, W = t.div`
+  position: relative;
+  height: 100%;
+  width: 100%;
+`, D = t.div`
   position: absolute;
-  left: 21%;
-  top: 44.3%;
+  left: 1.6%;
+  top: 44%;
   transform: translate(-50%, -50%) rotate(6.7deg);
-`, W = t.div`
-  ${e};
+`, S = t.div`
+  ${r};
   width: 6px;
   height: 60px;
-  background: ${r};
-`, D = t.div`
-  ${e};
+  background: ${e};
+`, R = t.div`
+  ${r};
   width: 4px;
   height: 80px;
-  background: ${m.m200};
-`, R = t.div`
-  ${e};
+  background: ${c.m200};
+`, B = t.div`
+  ${r};
   width: 2px;
   height: 90px;
-  background: ${c.m800};
-`, n = a`
+  background: ${m.m800};
+`, n = s`
   from { opacity: 1; transform: scale(1); }
   to   { opacity: 0; transform: scale(0.85); }
-`, B = t.div`
+`, C = t.div`
   position: absolute;
   left: 16%;
   top: 14%;
   ${({ $dismissing: o }) => o && i`
       animation: ${n} 0.4s ease-out forwards;
     `}
-`, C = t.div`
+`, T = t.div`
   position: absolute;
   bottom: 6%;
   left: 8%;
@@ -102,47 +106,58 @@ const g = ({ $color: o }) => h[o], e = i`
       pointer-events: none;
       opacity: 0.5;
     `}
-`, T = t.div`
+`, L = t.div`
   position: absolute;
   bottom: 6%;
   right: 8%;
   border-radius: 0.4rem;
-`, L = t.button`
+`, N = t.button`
   position: relative;
-  width: 100%;
-  height: 100%;
   height: 2.4rem;
   width: 2.4rem;
   cursor: pointer;
   background-color: rgba(0, 0, 0, 0.4);
   border: none;
+  border-radius: 0.4rem;
   padding: 0;
-`, N = t(s)`
+
+  &:focus-visible {
+    outline: 2px solid ${e};
+    outline-offset: 2px;
+  }
+`, O = t(a)`
   position: absolute;
   left: 50%;
   top: 50%;
   transform: translate(-50%, -50%);
-`, O = t(d)`
+`, _ = t(d)`
   position: absolute;
   left: 50%;
   top: 50%;
   transform: translate(-50%, -50%);
-`, _ = t(p)`
+`, z = t(p)`
   position: absolute;
   left: 50%;
   top: 50%;
   transform: translate(-50%, -50%);
-`, z = t(l)`
+`, G = t(l)`
   position: absolute;
   left: 50%;
   top: 50%;
   transform: translate(-50%, -50%);
-`, G = t.div`
+`, I = t.span`
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  overflow: hidden;
+  clip-path: inset(50%);
+  white-space: nowrap;
+`, V = t.div`
   width: 9px;
   height: 9px;
   border-radius: 50%;
-  background-color: ${r};
-`, I = t.div`
+  background-color: ${e};
+`, j = t.div`
   position: absolute;
   left: 26%;
   top: 24%;
@@ -156,23 +171,25 @@ const g = ({ $color: o }) => h[o], e = i`
     `}
 `;
 export {
-  L as ActionBtn,
-  N as AddWrapper,
-  B as AlarmRing,
-  S as AllDots,
-  G as Bullet,
-  I as BulletRing,
+  N as ActionBtn,
+  O as AddWrapper,
+  C as AlarmRing,
+  D as AllDots,
+  V as Bullet,
+  j as BulletRing,
   M as Dimmer,
-  H as Dots,
-  W as HourHand,
-  C as LeftActions,
-  _ as MediaPauseFilledWrapper,
-  z as MediaPlayFilledWrapper,
-  O as MediaStopFilledWrapper,
-  D as MinuteHand,
-  T as RightActions,
-  R as SecondHand,
+  P as Dots,
+  W as DotsWrapper,
+  S as HourHand,
+  T as LeftActions,
+  z as MediaPauseFilledWrapper,
+  G as MediaPlayFilledWrapper,
+  _ as MediaStopFilledWrapper,
+  R as MinuteHand,
+  L as RightActions,
+  B as SecondHand,
   F as Time,
-  P as TimeTxt,
-  y as Wrapper
+  H as TimeTxt,
+  I as VisuallyHidden,
+  A as Wrapper
 };

package/package.json

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