meticulous-ui 3.7.11 → 3.7.13

package/components/Timer/Timer.js

@@ -1,140 +1,112 @@
-import { jsxs, jsx, Fragment } from "react/jsx-runtime";
-import { useState, useRef, useEffect } from "react";
-import PropTypes from "prop-types";
-import Glass from "../Glass/Glass.js";
-import TimerRing from "./components/TimerRing/TimerRing.js";
-import white from "../../colors/white.js";
-import { black } from "../../colors/black.js";
-import red from "../../colors/red.js";
-import ClockCircleOutline from "../Icons/ClockCircleOutline.js";
-import Add from "../Icons/Add.js";
-import MediaStopFilled from "../Icons/MediaStopFilled.js";
-import MediaPauseFilled from "../Icons/MediaPauseFilled.js";
-import MediaPlayFilled from "../Icons/MediaPlayFilled.js";
-import { COLOR_MAPPING } from "./constants.js";
-import styled, { css, keyframes } from "styled-components";
-const getSize = (ratio) => ({
-  $size
-}) => $size / ratio;
-const WRAPPER_RATIO = 1;
-const WRAPPER_BR_RATIO = 16.67;
-const DIMMER_RATIO = 1.67;
-const TRANSFORM_ORIGIN_RATIO = 3.404;
-const getColor = ({
-  $color
-}) => COLOR_MAPPING[$color];
-const HAND_CSS = css`
+import { jsxs as p, jsx as e, Fragment as U } from "react/jsx-runtime";
+import { useState as b, useRef as Tt, useEffect as K } from "react";
+import n from "prop-types";
+import vt from "../Glass/Glass.js";
+import St from "./components/TimerRing/TimerRing.js";
+import c from "../../colors/white.js";
+import { black as kt } from "../../colors/black.js";
+import At from "../../colors/red.js";
+import Rt from "../Icons/ClockCircleOutline.js";
+import xt from "../Icons/Add.js";
+import Pt from "../Icons/MediaStopFilled.js";
+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`
   position: absolute;
   bottom: 50%;
   transform-origin: bottom;
   border-radius: 4px;
   transition: rotate 0.3s ease-in-out;
   rotate: var(--hand-rotate);
-`;
-const Wrapper = /*@__PURE__*/styled.div`
+`, _t = r.div`
   position: relative;
-  height: ${/* @__PURE__ */ getSize(WRAPPER_RATIO)}rem;
-  width: ${/* @__PURE__ */ getSize(WRAPPER_RATIO)}rem;
-  border-radius: ${/* @__PURE__ */ getSize(WRAPPER_BR_RATIO)}rem;
-  background-color: ${getColor};
-`;
-const Dimmer = /*@__PURE__*/styled.div`
+  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__ */ getSize(DIMMER_RATIO)}rem;
-  height: ${/* @__PURE__ */ getSize(DIMMER_RATIO)}rem;
+  width: ${t(J)}rem;
+  height: ${t(J)}rem;
   transform: translate(-50%, -50%);
   border-radius: 50%;
   background-color: rgba(0, 0, 0, 0.16);
   pointer-events: none;
-`;
-const Time = /*@__PURE__*/styled.div`
+`, Q = r.div`
   position: absolute;
   left: 50%;
   top: 48%;
   transform: translate(-50%, -50%);
-`;
-const TimeTxt = /*@__PURE__*/styled.div`
-  color: ${white};
-  font-size: ${/* @__PURE__ */ getSize(13.33)}rem;
+`, V = r.div`
+  color: ${c};
+  font-size: ${t(13.33)}rem;
   font-weight: 650;
   text-align: center;
   opacity: 0.84;
-`;
-const Dots = /*@__PURE__*/styled.span`
+`, Ht = r.span`
   position: absolute;
-  width: ${/* @__PURE__ */ getSize(120)}rem;
-  height: ${/* @__PURE__ */ getSize(120)}rem;
+  width: ${t(120)}rem;
+  height: ${t(120)}rem;
   background: rgba(255, 255, 255, 0.4);
-  transform-origin: ${/* @__PURE__ */ getSize(TRANSFORM_ORIGIN_RATIO)}rem;
+  transform-origin: ${t(Ot)}rem;
   border-radius: 2px;
-  rotate: ${({
-  $i
-}) => `${$i * 6}deg`};
+  rotate: ${({ $i: i }) => `${i * 6}deg`};
 
   &:nth-child(5n) {
-    width: ${/* @__PURE__ */ getSize(90)}rem;
-    height: ${/* @__PURE__ */ getSize(90)}rem;
+    width: ${t(90)}rem;
+    height: ${t(90)}rem;
     background: rgba(255, 255, 255, 0.7);
   }
 
   &:nth-child(15n) {
-    width: ${/* @__PURE__ */ getSize(50)}rem;
-    height: ${/* @__PURE__ */ getSize(130)}rem;
+    width: ${t(50)}rem;
+    height: ${t(130)}rem;
     background: rgba(255, 255, 255);
   }
-`;
-const DotsWrapper = /*@__PURE__*/styled.div`
+`, Nt = r.div`
   position: relative;
   height: 100%;
   width: 100%;
-`;
-const AllDots = /*@__PURE__*/styled.div`
+`, Wt = r.div`
   position: absolute;
   left: 1.6%;
   top: 43.8%;
   transform: translate(-50%, -50%) rotate(6.7deg);
-`;
-const HourHand = /*@__PURE__*/styled.div`
-  ${HAND_CSS};
-  width: ${/* @__PURE__ */ getSize(50)}rem;
-  height: ${/* @__PURE__ */ getSize(5.33)}rem;
-  background: ${white};
-`;
-const MinuteHand = /*@__PURE__*/styled.div`
-  ${HAND_CSS};
-  width: ${/* @__PURE__ */ getSize(80)}rem;
-  height: ${/* @__PURE__ */ getSize(4)}rem;
-  background: ${black.m200};
-`;
-const SecondHand = /*@__PURE__*/styled.div`
-  ${HAND_CSS};
-  width: ${/* @__PURE__ */ getSize(133.33)}rem;
-  height: ${/* @__PURE__ */ getSize(3.64)}rem;
-  background: ${red.m800};
-`;
-const dismissAnimation = keyframes`
+`, Ft = r.div`
+  ${_};
+  width: ${t(50)}rem;
+  height: ${t(5.33)}rem;
+  background: ${c};
+`, Lt = r.div`
+  ${_};
+  width: ${t(80)}rem;
+  height: ${t(4)}rem;
+  background: ${kt.m200};
+`, Yt = r.div`
+  ${_};
+  width: ${t(133.33)}rem;
+  height: ${t(3.64)}rem;
+  background: ${At.m800};
+`, Z = S`
   from { opacity: 1; transform: scale(1); }
   to   { opacity: 0; transform: scale(0.9); }
-`;
-const digitSlideIn = keyframes`
+`, Bt = S`
   from { opacity: 0; transform: translateY(-5px); }
   to   { opacity: 1; transform: translateY(0); }
-`;
-const labelEnter = keyframes`
+`, jt = S`
   from { opacity: 0; transform: translateX(-50%) translateY(calc(-100% + 8px)) scale(0.9); }
   to   { opacity: 1; transform: translateX(-50%) translateY(-100%) scale(1); }
-`;
-const labelExit = keyframes`
+`, Xt = S`
   from { opacity: 1; transform: translateX(-50%) translateY(-100%) scale(1); }
   to   { opacity: 0; transform: translateX(-50%) translateY(calc(-100% + 8px)) scale(0.85); }
-`;
-const TimerDigit = /*@__PURE__*/styled.span`
+`, Gt = r.span`
   display: inline-block;
-  animation: ${digitSlideIn} 0.28s cubic-bezier(0.34, 1.56, 0.64, 1) both;
-`;
-const AlarmRing = /*@__PURE__*/styled.div`
+  animation: ${Bt} 0.28s cubic-bezier(0.34, 1.56, 0.64, 1) both;
+`, Ut = r.div`
   position: absolute;
   inset: 0;
   pointer-events: none;
@@ -147,22 +119,19 @@ const AlarmRing = /*@__PURE__*/styled.div`
     rgba(0, 0, 0, 0.3) 85%,
     rgba(0, 0, 0, 0.42) 100%
   );
-  ${({
-  $dismissing
-}) => $dismissing && css`
-      animation: ${dismissAnimation} 0.6s ease-out forwards;
+  ${({ $dismissing: i }) => i && h`
+      animation: ${Z} 0.6s ease-out forwards;
     `}
-`;
-const AlarmLabel = /*@__PURE__*/styled.div`
+`, Kt = r.div`
   position: absolute;
   left: 50%;
-  top: calc(${/* @__PURE__ */ getSize(100 / 12)}rem - ${/* @__PURE__ */ getSize(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__ */ getSize(21)}rem;
+  font-size: ${t(21)}rem;
   font-weight: 600;
   letter-spacing: 0.05em;
   padding: 0.22em 0.6em;
@@ -172,94 +141,80 @@ const AlarmLabel = /*@__PURE__*/styled.div`
   -webkit-backdrop-filter: blur(6px);
   border: 1px solid rgba(255, 255, 255, 0.12);
   pointer-events: none;
-  animation: ${({
-  $dismissing
-}) => $dismissing ? css`
-          ${labelExit} 0.5s cubic-bezier(0.4, 0, 0.2, 1) forwards
-        ` : css`
-          ${labelEnter} 0.4s cubic-bezier(0.34, 1.56, 0.64, 1) both
+  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
         `};
-`;
-const LeftActions = /*@__PURE__*/styled.div`
+`, qt = r.div`
   position: absolute;
   bottom: 6%;
   left: 8%;
   display: flex;
   align-items: center;
-  gap: ${/* @__PURE__ */ getSize(50)}rem;
+  gap: ${t(50)}rem;
 
-  ${({
-  $noActions
-}) => $noActions && css`
+  ${({ $noActions: i }) => i && h`
       pointer-events: none;
       opacity: 0.5;
     `}
-`;
-const RightActions = /*@__PURE__*/styled.div`
+`, Jt = r.div`
   position: absolute;
   bottom: 6%;
   right: 8%;
-  border-radius: ${/* @__PURE__ */ getSize(50)}rem;
-`;
-const ActionBtn = /*@__PURE__*/styled.button`
+  border-radius: ${t(50)}rem;
+`, v = r.button`
   position: relative;
-  height: ${/* @__PURE__ */ getSize(8.33)}rem;
-  width: ${/* @__PURE__ */ getSize(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__ */ getSize(50)}rem;
+  border-radius: ${t(50)}rem;
   padding: 0;
 
   &:focus-visible {
-    outline: 2px solid ${white};
+    outline: 2px solid ${c};
     outline-offset: 2px;
   }
-`;
-const AddWrapper = /*@__PURE__*/styled(Add)`
+`, Qt = r(xt)`
   position: absolute;
   left: 50%;
   top: 50%;
   transform: translate(-50%, -50%);
-`;
-const MediaStopFilledWrapper = /*@__PURE__*/styled(MediaStopFilled)`
+`, Vt = r(Pt)`
   position: absolute;
   left: 50%;
   top: 50%;
   transform: translate(-50%, -50%);
-`;
-const MediaPauseFilledWrapper = /*@__PURE__*/styled(MediaPauseFilled)`
+`, Zt = r(It)`
   position: absolute;
   left: 50%;
   top: 50%;
   transform: translate(-50%, -50%);
-`;
-const MediaPlayFilledWrapper = /*@__PURE__*/styled(MediaPlayFilled)`
+`, te = r(Mt)`
   position: absolute;
   left: 50%;
   top: 50%;
   transform: translate(-50%, -50%);
-`;
-const VisuallyHidden = /*@__PURE__*/styled.span`
+`, ee = r.span`
   position: absolute;
   width: 1px;
   height: 1px;
   overflow: hidden;
   clip-path: inset(50%);
   white-space: nowrap;
-`;
-const Bullet = /*@__PURE__*/styled.div`
+`, re = r.div`
   position: absolute;
-  width: ${/* @__PURE__ */ getSize(35)}rem;
-  height: ${/* @__PURE__ */ getSize(35)}rem;
+  width: ${t(35)}rem;
+  height: ${t(35)}rem;
   border-radius: 50%;
-  background-color: ${white};
-  left: calc(-${/* @__PURE__ */ getSize(70)}rem);
-  top: calc(-${/* @__PURE__ */ getSize(100 / 33)}rem - ${/* @__PURE__ */ getSize(70)}rem);
-`;
-const BulletRing = /*@__PURE__*/styled.div`
+  background-color: ${c};
+  left: calc(-${t(70)}rem);
+  top: calc(-${t(100 / 33)}rem - ${t(70)}rem);
+`, oe = r.div`
   position: absolute;
   left: 50%;
   top: 48%;
@@ -268,231 +223,219 @@ const BulletRing = /*@__PURE__*/styled.div`
   rotate: var(--bullet-rotate);
   transform-origin: 0 0;
   transition: rotate 0.3s ease;
-  ${({
-  $dismissing
-}) => $dismissing && css`
-      animation: ${dismissAnimation} 0.6s ease-out forwards;
+  ${({ $dismissing: i }) => i && h`
+      animation: ${Z} 0.6s ease-out forwards;
     `}
-`;
-const noop = () => {
-};
-const getHandRotations = (timeZone) => () => {
-  const now = /* @__PURE__ */ new Date();
-  const timeStr = now.toLocaleString("en-Us", {
-    hour12: true,
-    timeZone
-  });
-  const timePart = timeStr.split(", ")[1].split(" ")[0];
-  const [h, m, s] = timePart.split(":").map(Number);
+`, $ = () => {
+}, 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);
   return {
-    second: s * 6,
-    minute: m * 6 + s * 0.1,
-    hour: h % 12 * 30 + m * 0.5
+    second: y * 6,
+    minute: a * 6 + y * 0.1,
+    hour: A % 12 * 30 + a * 0.5
   };
-};
-const Timer = ({
-  color = "green",
-  showTime = true,
-  showTimeWithSec = true,
-  timeZone = "Asia/Kolkata",
-  isDigital = true,
-  timerSeconds = 0,
-  onTimerAdd = noop,
-  onTimerComplete = noop,
-  onTimerRemove = noop,
-  onTimerPause = noop,
-  onTimerPlay = noop,
-  size = 30,
-  ...rest
+}, ne = ({
+  color: i = "green",
+  showTime: w = !0,
+  showTimeWithSec: k = !0,
+  timeZone: g = "Asia/Kolkata",
+  isDigital: A = !0,
+  timerSeconds: a = 0,
+  onTimerAdd: y = $,
+  onTimerComplete: tt = $,
+  onTimerRemove: et = $,
+  onTimerPause: rt = $,
+  onTimerPlay: ot = $,
+  size: E = 30,
+  ...it
 }) => {
-  const [time, setTime] = useState(/* @__PURE__ */ new Date());
-  const [timerSec, setTimerSec] = useState(0);
-  const [isPaused, setPaused] = useState(false);
-  const [handRotations, setHandRotations] = useState(getHandRotations(timeZone));
-  const [bulletAngle, setBulletAngle] = useState(0);
-  const [isDismissing, setIsDismissing] = useState(false);
-  const isPausedRef = useRef(isPaused);
-  const $size = Math.round(size);
-  const ICON_SIZE = Math.round(14 * size / 20);
-  useEffect(() => {
-    isPausedRef.current = isPaused;
-  }, [isPaused]);
-  const setTimer = () => {
-    setTimerSec(timerSeconds);
-    setBulletAngle(timerSeconds % 60 * 6);
-    setPaused(false);
-    onTimerAdd();
-  };
-  const removeTimer = () => {
-    setIsDismissing(true);
-    onTimerRemove();
-  };
-  const handleDismissEnd = () => {
-    setTimerSec(0);
-    setBulletAngle(0);
-    setIsDismissing(false);
+  const [R, nt] = b(/* @__PURE__ */ new Date()), [s, x] = b(0), [T, P] = b(!1), [I, at] = b(ie(g)), [st, M] = b(0), [f, D] = b(!1), H = Tt(T), o = Math.round(E), C = Math.round(14 * E / 20);
+  K(() => {
+    H.current = T;
+  }, [T]);
+  const lt = () => {
+    x(a), M(a % 60 * 6), P(!1), y();
+  }, dt = () => {
+    D(!0), et();
+  }, ct = () => {
+    x(0), M(0), D(!1);
+  }, mt = () => {
+    P(!0), rt();
+  }, pt = () => {
+    P(!1), ot();
   };
-  const pauseTimer = () => {
-    setPaused(true);
-    onTimerPause();
-  };
-  const playTimer = () => {
-    setPaused(false);
-    onTimerPlay();
-  };
-  useEffect(() => {
-    const interval = setInterval(() => {
-      const now = /* @__PURE__ */ new Date();
-      setTime(now);
-      setHandRotations((prev) => {
-        const timeStr = now.toLocaleString("en-Us", {
-          hour12: true,
-          timeZone
-        });
-        const timePart = timeStr.split(", ")[1].split(" ")[0];
-        const [h, m, s] = timePart.split(":").map(Number);
-        const rawSecond = s * 6;
-        const rawMinute = m * 6 + s * 0.1;
-        const rawHour = h % 12 * 30 + m * 0.5;
-        const adjust = (prevVal, raw) => {
-          const prevMod = prevVal % 360;
-          return prevVal - prevMod + raw + (raw < prevMod ? 360 : 0);
+  K(() => {
+    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 G = j % 360;
+          return j - G + X + (X < G ? 360 : 0);
         };
         return {
-          second: adjust(prev.second, rawSecond),
-          minute: adjust(prev.minute, rawMinute),
-          hour: adjust(prev.hour, rawHour)
+          second: z(d.second, $t),
+          minute: z(d.minute, wt),
+          hour: z(d.hour, yt)
         };
-      });
-      if (!isPausedRef.current) {
-        setTimerSec((timerSec2) => {
-          if (timerSec2 - 1 === 0) {
-            onTimerComplete();
-            setIsDismissing(true);
-          }
-          return timerSec2 - 1;
-        });
-        setBulletAngle((prev) => prev - 6);
-      }
+      }), H.current || (x((d) => (d - 1 === 0 && (tt(), D(!0)), d - 1)), M((d) => d - 6));
     }, 1e3);
-    return () => clearInterval(interval);
+    return () => clearInterval(m);
   }, []);
-  const date = time.toLocaleString("en-Us", {
-    hour12: true,
-    timeZone
-  });
-  const currentTime = date.split(", ")[1];
-  const currentTimeWithoutAmPm = currentTime.split(" ")[0];
-  const amPm = currentTime.split(" ")[1];
-  const withoutSec = currentTime.split(":").slice(0, 2).join(":");
-  const hasNoTimer = !(Number.isInteger(timerSec) && timerSec > 0);
-  const timerMinutes = String(Math.floor(timerSec / 60)).padStart(2, "0");
-  const timerSeconds_ = String(timerSec % 60).padStart(2, "0");
-  const timerLabel = `${timerMinutes}:${timerSeconds_}`;
-  const timeLabel = `${showTimeWithSec ? currentTimeWithoutAmPm : withoutSec} ${amPm}`;
-  return /* @__PURE__ */ jsxs(Wrapper, { $color: color, role: "region", "aria-label": "Clock", ...{
-    $size
-  }, ...rest, children: [
-    /* @__PURE__ */ jsx(Glass, { borderRadius: `${getSize(16.67)({
-      $size
-    })}rem`, "aria-hidden": "true" }),
-    (!hasNoTimer || isDismissing) && /* @__PURE__ */ jsxs(Fragment, { children: [
-      /* @__PURE__ */ jsx(AlarmRing, { $dismissing: isDismissing, onAnimationEnd: handleDismissEnd, "aria-hidden": "true", children: /* @__PURE__ */ jsx(TimerRing, { progress: timerSec >= 60 ? 1 : timerSec % 60 / 60 }) }),
-      /* @__PURE__ */ jsx(BulletRing, { ...{
-        $size
-      }, style: {
-        "--bullet-rotate": `${bulletAngle}deg`
-      }, $dismissing: isDismissing, "aria-hidden": "true", children: /* @__PURE__ */ jsx(Bullet, { ...{
-        $size
-      } }) }),
-      /* @__PURE__ */ jsx(VisuallyHidden, { role: "timer", "aria-live": "polite", "aria-label": `${timerSec} seconds remaining` })
+  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" }),
+    (!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`
+        }
+      )
     ] }),
-    showTime && /* @__PURE__ */ jsxs(Fragment, { children: [
-      /* @__PURE__ */ jsx(Dimmer, { "aria-hidden": "true", ...{
-        $size
-      }, children: /* @__PURE__ */ jsx(DotsWrapper, { children: /* @__PURE__ */ jsx(AllDots, { "aria-hidden": "true", children: [...Array(60)].map((_, i) => /* @__PURE__ */ jsx(Dots, { $i: i, ...{
-        $size
-      } }, i)) }) }) }),
-      isDigital ? /* @__PURE__ */ jsxs(Time, { as: "time", dateTime: time.toISOString(), "aria-label": timeLabel, children: [
-        /* @__PURE__ */ jsx(TimeTxt, { ...{
-          $size
-        }, "aria-hidden": "true", children: showTimeWithSec ? currentTimeWithoutAmPm : withoutSec }),
-        /* @__PURE__ */ jsx(TimeTxt, { ...{
-          $size
-        }, "aria-hidden": "true", children: amPm })
-      ] }) : /* @__PURE__ */ jsxs(Time, { as: "time", dateTime: time.toISOString(), "aria-label": timeLabel, children: [
-        /* @__PURE__ */ jsx(HourHand, { ...{
-          $size
-        }, style: {
-          "--hand-rotate": `${handRotations.hour}deg`
-        }, "aria-hidden": "true" }),
-        /* @__PURE__ */ jsx(MinuteHand, { ...{
-          $size
-        }, style: {
-          "--hand-rotate": `${handRotations.minute}deg`
-        }, "aria-hidden": "true" }),
-        /* @__PURE__ */ jsx(SecondHand, { ...{
-          $size
-        }, style: {
-          "--hand-rotate": `${handRotations.second}deg`
-        }, "aria-hidden": "true" })
+    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)) }) }) }),
+      A ? /* @__PURE__ */ p(Q, { as: "time", dateTime: R.toISOString(), "aria-label": L, children: [
+        /* @__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"
+          }
+        )
       ] })
     ] }),
-    timerSeconds > 0 && /* @__PURE__ */ jsxs(LeftActions, { ...{
-      $size
-    }, $noActions: hasNoTimer, role: "group", "aria-label": "Timer controls", children: [
-      /* @__PURE__ */ jsx(ActionBtn, { type: "button", onClick: removeTimer, ...{
-        $size
-      }, "aria-label": "Stop timer", "aria-disabled": hasNoTimer, children: /* @__PURE__ */ jsx(MediaStopFilledWrapper, { color: white, size: ICON_SIZE, "aria-hidden": "true" }) }),
-      hasNoTimer || !isPaused ? /* @__PURE__ */ jsx(ActionBtn, { type: "button", onClick: pauseTimer, ...{
-        $size
-      }, "aria-label": "Pause timer", "aria-disabled": hasNoTimer, children: /* @__PURE__ */ jsx(MediaPauseFilledWrapper, { color: white, size: ICON_SIZE, "aria-hidden": "true" }) }) : /* @__PURE__ */ jsx(ActionBtn, { type: "button", onClick: playTimer, "aria-label": "Resume timer", ...{
-        $size
-      }, children: /* @__PURE__ */ jsx(MediaPlayFilledWrapper, { color: white, size: ICON_SIZE, "aria-hidden": "true" }) })
-    ] }),
-    (!hasNoTimer || isDismissing) && /* @__PURE__ */ jsxs(AlarmLabel, { ...{
-      $size
-    }, $dismissing: isDismissing, "aria-label": `${timerSec} seconds remaining`, children: [
-      /* @__PURE__ */ jsx(ClockCircleOutline, { color: "rgba(255,255,255,0.82)", style: {
-        width: "1em",
-        height: "1em",
-        flexShrink: 0
-      } }),
-      timerLabel.split("").map((char, i) => char === ":" ? /* @__PURE__ */ jsx("span", { children: char }, i) : /* @__PURE__ */ jsx(TimerDigit, { children: char }, `${i}-${char}`))
-    ] }),
-    timerSeconds > 0 && /* @__PURE__ */ jsx(RightActions, { role: "group", ...{
-      $size
-    }, "aria-label": "Start timer", children: /* @__PURE__ */ jsx(ActionBtn, { type: "button", onClick: setTimer, ...{
-      $size
-    }, "aria-label": `Start ${timerSeconds} second timer`, children: /* @__PURE__ */ jsx(AddWrapper, { color: white, size: $size, "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" })
+      }
+    ) })
   ] });
 };
-Timer.propTypes = {
+ne.propTypes = {
   /** Color theme key for the clock and accent elements. Defaults to `'green'` */
-  color: PropTypes.string,
+  color: n.string,
   /** Diameter of the clock in pixels. Defaults to `30` */
-  size: PropTypes.number,
+  size: n.number,
   /** Whether to display the time readout. Defaults to `true` */
-  showTime: PropTypes.bool,
+  showTime: n.bool,
   /** Includes seconds in the digital readout when true. Defaults to `true` */
-  showTimeWithSec: PropTypes.bool,
+  showTimeWithSec: n.bool,
   /** IANA timezone string (e.g. `'Asia/Kolkata'`). Defaults to `'Asia/Kolkata'` */
-  timeZone: PropTypes.string,
+  timeZone: n.string,
   /** Shows a digital readout when true; analog hands when false. Defaults to `true` */
-  isDigital: PropTypes.bool,
+  isDigital: n.bool,
   /** Countdown duration in seconds. Shows timer controls when > 0 */
-  timerSeconds: PropTypes.number,
+  timerSeconds: n.number,
   /** Called when the timer is started */
-  onTimerAdd: PropTypes.func,
+  onTimerAdd: n.func,
   /** Called when the countdown reaches zero */
-  onTimerComplete: PropTypes.func,
+  onTimerComplete: n.func,
   /** Called when the timer is stopped */
-  onTimerRemove: PropTypes.func,
+  onTimerRemove: n.func,
   /** Called when the timer is paused */
-  onTimerPause: PropTypes.func,
+  onTimerPause: n.func,
   /** Called when a paused timer is resumed */
-  onTimerPlay: PropTypes.func
+  onTimerPlay: n.func
 };
 export {
-  Timer as default
+  ne as default
 };