meticulous-ui 3.7.11 → 3.7.13

package/cjs/components/Timer/Timer.cjs

@@ -1,145 +1,97 @@
-"use strict";
-Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: "Module" } });
-const jsxRuntime = require("react/jsx-runtime");
-const react = require("react");
-const PropTypes = require("prop-types");
-const Glass = require("../Glass/Glass.cjs");
-const TimerRing = require("./components/TimerRing/TimerRing.cjs");
-const white = require("../../colors/white.cjs");
-const black = require("../../colors/black.cjs");
-const red = require("../../colors/red.cjs");
-const ClockCircleOutline = require("../Icons/ClockCircleOutline.cjs");
-const Add = require("../Icons/Add.cjs");
-const MediaStopFilled = require("../Icons/MediaStopFilled.cjs");
-const MediaPauseFilled = require("../Icons/MediaPauseFilled.cjs");
-const MediaPlayFilled = require("../Icons/MediaPlayFilled.cjs");
-const constants = require("./constants.cjs");
-const styled = require("styled-components");
-const _interopDefault = (e) => e && e.__esModule ? e : { default: e };
-const PropTypes__default = /* @__PURE__ */ _interopDefault(PropTypes);
-const styled__default = /* @__PURE__ */ _interopDefault(styled);
-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
-}) => constants.COLOR_MAPPING[$color];
-const HAND_CSS = /*@__PURE__*/styled.css`
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=require("react/jsx-runtime"),n=require("react"),xe=require("prop-types"),je=require("../Glass/Glass.cjs"),ye=require("./components/TimerRing/TimerRing.cjs"),m=require("../../colors/white.cjs"),we=require("../../colors/black.cjs"),Se=require("../../colors/red.cjs"),ke=require("../Icons/ClockCircleOutline.cjs"),Te=require("../Icons/Add.cjs"),ve=require("../Icons/MediaStopFilled.cjs"),Re=require("../Icons/MediaPauseFilled.cjs"),Ae=require("../Icons/MediaPlayFilled.cjs"),Pe=require("./constants.cjs"),s=require("styled-components"),K=a=>a&&a.__esModule?a:{default:a},o=K(xe),r=K(s),t=a=>({$size:$})=>$/a,B=1,Me=16.67,X=1.67,_e=3.404,Ie=({$color:a})=>Pe.COLOR_MAPPING[a],q=s.css`
   position: absolute;
   bottom: 50%;
   transform-origin: bottom;
   border-radius: 4px;
   transition: rotate 0.3s ease-in-out;
   rotate: var(--hand-rotate);
-`;
-const Wrapper = styled__default.default.div`
+`,qe=r.default.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 = styled__default.default.div`
+  height: ${t(B)}rem;
+  width: ${t(B)}rem;
+  border-radius: ${t(Me)}rem;
+  background-color: ${Ie};
+`,De=r.default.div`
   position: absolute;
   left: 50%;
   top: 48%;
-  width: ${/* @__PURE__ */ getSize(DIMMER_RATIO)}rem;
-  height: ${/* @__PURE__ */ getSize(DIMMER_RATIO)}rem;
+  width: ${t(X)}rem;
+  height: ${t(X)}rem;
   transform: translate(-50%, -50%);
   border-radius: 50%;
   background-color: rgba(0, 0, 0, 0.16);
   pointer-events: none;
-`;
-const Time = styled__default.default.div`
+`,G=r.default.div`
   position: absolute;
   left: 50%;
   top: 48%;
   transform: translate(-50%, -50%);
-`;
-const TimeTxt = styled__default.default.div`
-  color: ${white.default};
-  font-size: ${/* @__PURE__ */ getSize(13.33)}rem;
+`,U=r.default.div`
+  color: ${m.default};
+  font-size: ${t(13.33)}rem;
   font-weight: 650;
   text-align: center;
   opacity: 0.84;
-`;
-const Dots = styled__default.default.span`
+`,Oe=r.default.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(_e)}rem;
   border-radius: 2px;
-  rotate: ${({
-  $i
-}) => `${$i * 6}deg`};
+  rotate: ${({$i:a})=>`${a*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 = styled__default.default.div`
+`,Ce=r.default.div`
   position: relative;
   height: 100%;
   width: 100%;
-`;
-const AllDots = styled__default.default.div`
+`,ze=r.default.div`
   position: absolute;
   left: 1.6%;
   top: 43.8%;
   transform: translate(-50%, -50%) rotate(6.7deg);
-`;
-const HourHand = styled__default.default.div`
-  ${HAND_CSS};
-  width: ${/* @__PURE__ */ getSize(50)}rem;
-  height: ${/* @__PURE__ */ getSize(5.33)}rem;
-  background: ${white.default};
-`;
-const MinuteHand = styled__default.default.div`
-  ${HAND_CSS};
-  width: ${/* @__PURE__ */ getSize(80)}rem;
-  height: ${/* @__PURE__ */ getSize(4)}rem;
-  background: ${black.black.m200};
-`;
-const SecondHand = styled__default.default.div`
-  ${HAND_CSS};
-  width: ${/* @__PURE__ */ getSize(133.33)}rem;
-  height: ${/* @__PURE__ */ getSize(3.64)}rem;
-  background: ${red.default.m800};
-`;
-const dismissAnimation = /*@__PURE__*/styled.keyframes`
+`,Ee=r.default.div`
+  ${q};
+  width: ${t(50)}rem;
+  height: ${t(5.33)}rem;
+  background: ${m.default};
+`,Fe=r.default.div`
+  ${q};
+  width: ${t(80)}rem;
+  height: ${t(4)}rem;
+  background: ${we.black.m200};
+`,He=r.default.div`
+  ${q};
+  width: ${t(133.33)}rem;
+  height: ${t(3.64)}rem;
+  background: ${Se.default.m800};
+`,J=s.keyframes`
   from { opacity: 1; transform: scale(1); }
   to   { opacity: 0; transform: scale(0.9); }
-`;
-const digitSlideIn = /*@__PURE__*/styled.keyframes`
+`,Ne=s.keyframes`
   from { opacity: 0; transform: translateY(-5px); }
   to   { opacity: 1; transform: translateY(0); }
-`;
-const labelEnter = /*@__PURE__*/styled.keyframes`
+`,We=s.keyframes`
   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 = /*@__PURE__*/styled.keyframes`
+`,Le=s.keyframes`
   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 = styled__default.default.span`
+`,Ye=r.default.span`
   display: inline-block;
-  animation: ${digitSlideIn} 0.28s cubic-bezier(0.34, 1.56, 0.64, 1) both;
-`;
-const AlarmRing = styled__default.default.div`
+  animation: ${Ne} 0.28s cubic-bezier(0.34, 1.56, 0.64, 1) both;
+`,Be=r.default.div`
   position: absolute;
   inset: 0;
   pointer-events: none;
@@ -152,22 +104,19 @@ const AlarmRing = styled__default.default.div`
     rgba(0, 0, 0, 0.3) 85%,
     rgba(0, 0, 0, 0.42) 100%
   );
-  ${({
-  $dismissing
-}) => $dismissing && /*@__PURE__*/styled.css`
-      animation: ${dismissAnimation} 0.6s ease-out forwards;
+  ${({$dismissing:a})=>a&&s.css`
+      animation: ${J} 0.6s ease-out forwards;
     `}
-`;
-const AlarmLabel = styled__default.default.div`
+`,Xe=r.default.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;
@@ -177,94 +126,80 @@ const AlarmLabel = styled__default.default.div`
   -webkit-backdrop-filter: blur(6px);
   border: 1px solid rgba(255, 255, 255, 0.12);
   pointer-events: none;
-  animation: ${({
-  $dismissing
-}) => $dismissing ? /*@__PURE__*/styled.css`
-          ${labelExit} 0.5s cubic-bezier(0.4, 0, 0.2, 1) forwards
-        ` : /*@__PURE__*/styled.css`
-          ${labelEnter} 0.4s cubic-bezier(0.34, 1.56, 0.64, 1) both
+  animation: ${({$dismissing:a})=>a?s.css`
+          ${Le} 0.5s cubic-bezier(0.4, 0, 0.2, 1) forwards
+        `:s.css`
+          ${We} 0.4s cubic-bezier(0.34, 1.56, 0.64, 1) both
         `};
-`;
-const LeftActions = styled__default.default.div`
+`,Ge=r.default.div`
   position: absolute;
   bottom: 6%;
   left: 8%;
   display: flex;
   align-items: center;
-  gap: ${/* @__PURE__ */ getSize(50)}rem;
+  gap: ${t(50)}rem;
 
-  ${({
-  $noActions
-}) => $noActions && /*@__PURE__*/styled.css`
+  ${({$noActions:a})=>a&&s.css`
       pointer-events: none;
       opacity: 0.5;
     `}
-`;
-const RightActions = styled__default.default.div`
+`,Ue=r.default.div`
   position: absolute;
   bottom: 6%;
   right: 8%;
-  border-radius: ${/* @__PURE__ */ getSize(50)}rem;
-`;
-const ActionBtn = styled__default.default.button`
+  border-radius: ${t(50)}rem;
+`,y=r.default.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.default};
+    outline: 2px solid ${m.default};
     outline-offset: 2px;
   }
-`;
-const AddWrapper = styled__default.default(Add.default)`
+`,Ke=r.default(Te.default)`
   position: absolute;
   left: 50%;
   top: 50%;
   transform: translate(-50%, -50%);
-`;
-const MediaStopFilledWrapper = styled__default.default(MediaStopFilled.default)`
+`,Je=r.default(ve.default)`
   position: absolute;
   left: 50%;
   top: 50%;
   transform: translate(-50%, -50%);
-`;
-const MediaPauseFilledWrapper = styled__default.default(MediaPauseFilled.default)`
+`,Qe=r.default(Re.default)`
   position: absolute;
   left: 50%;
   top: 50%;
   transform: translate(-50%, -50%);
-`;
-const MediaPlayFilledWrapper = styled__default.default(MediaPlayFilled.default)`
+`,Ve=r.default(Ae.default)`
   position: absolute;
   left: 50%;
   top: 50%;
   transform: translate(-50%, -50%);
-`;
-const VisuallyHidden = styled__default.default.span`
+`,Ze=r.default.span`
   position: absolute;
   width: 1px;
   height: 1px;
   overflow: hidden;
   clip-path: inset(50%);
   white-space: nowrap;
-`;
-const Bullet = styled__default.default.div`
+`,et=r.default.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.default};
-  left: calc(-${/* @__PURE__ */ getSize(70)}rem);
-  top: calc(-${/* @__PURE__ */ getSize(100 / 33)}rem - ${/* @__PURE__ */ getSize(70)}rem);
-`;
-const BulletRing = styled__default.default.div`
+  background-color: ${m.default};
+  left: calc(-${t(70)}rem);
+  top: calc(-${t(100/33)}rem - ${t(70)}rem);
+`,tt=r.default.div`
   position: absolute;
   left: 50%;
   top: 48%;
@@ -273,229 +208,7 @@ const BulletRing = styled__default.default.div`
   rotate: var(--bullet-rotate);
   transform-origin: 0 0;
   transition: rotate 0.3s ease;
-  ${({
-  $dismissing
-}) => $dismissing && /*@__PURE__*/styled.css`
-      animation: ${dismissAnimation} 0.6s ease-out forwards;
+  ${({$dismissing:a})=>a&&s.css`
+      animation: ${J} 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);
-  return {
-    second: s * 6,
-    minute: m * 6 + s * 0.1,
-    hour: h % 12 * 30 + m * 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
-}) => {
-  const [time, setTime] = react.useState(/* @__PURE__ */ new Date());
-  const [timerSec, setTimerSec] = react.useState(0);
-  const [isPaused, setPaused] = react.useState(false);
-  const [handRotations, setHandRotations] = react.useState(getHandRotations(timeZone));
-  const [bulletAngle, setBulletAngle] = react.useState(0);
-  const [isDismissing, setIsDismissing] = react.useState(false);
-  const isPausedRef = react.useRef(isPaused);
-  const $size = Math.round(size);
-  const ICON_SIZE = Math.round(14 * size / 20);
-  react.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 pauseTimer = () => {
-    setPaused(true);
-    onTimerPause();
-  };
-  const playTimer = () => {
-    setPaused(false);
-    onTimerPlay();
-  };
-  react.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);
-        };
-        return {
-          second: adjust(prev.second, rawSecond),
-          minute: adjust(prev.minute, rawMinute),
-          hour: adjust(prev.hour, rawHour)
-        };
-      });
-      if (!isPausedRef.current) {
-        setTimerSec((timerSec2) => {
-          if (timerSec2 - 1 === 0) {
-            onTimerComplete();
-            setIsDismissing(true);
-          }
-          return timerSec2 - 1;
-        });
-        setBulletAngle((prev) => prev - 6);
-      }
-    }, 1e3);
-    return () => clearInterval(interval);
-  }, []);
-  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__ */ jsxRuntime.jsxs(Wrapper, { $color: color, role: "region", "aria-label": "Clock", ...{
-    $size
-  }, ...rest, children: [
-    /* @__PURE__ */ jsxRuntime.jsx(Glass.default, { borderRadius: `${getSize(16.67)({
-      $size
-    })}rem`, "aria-hidden": "true" }),
-    (!hasNoTimer || isDismissing) && /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
-      /* @__PURE__ */ jsxRuntime.jsx(AlarmRing, { $dismissing: isDismissing, onAnimationEnd: handleDismissEnd, "aria-hidden": "true", children: /* @__PURE__ */ jsxRuntime.jsx(TimerRing.default, { progress: timerSec >= 60 ? 1 : timerSec % 60 / 60 }) }),
-      /* @__PURE__ */ jsxRuntime.jsx(BulletRing, { ...{
-        $size
-      }, style: {
-        "--bullet-rotate": `${bulletAngle}deg`
-      }, $dismissing: isDismissing, "aria-hidden": "true", children: /* @__PURE__ */ jsxRuntime.jsx(Bullet, { ...{
-        $size
-      } }) }),
-      /* @__PURE__ */ jsxRuntime.jsx(VisuallyHidden, { role: "timer", "aria-live": "polite", "aria-label": `${timerSec} seconds remaining` })
-    ] }),
-    showTime && /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
-      /* @__PURE__ */ jsxRuntime.jsx(Dimmer, { "aria-hidden": "true", ...{
-        $size
-      }, children: /* @__PURE__ */ jsxRuntime.jsx(DotsWrapper, { children: /* @__PURE__ */ jsxRuntime.jsx(AllDots, { "aria-hidden": "true", children: [...Array(60)].map((_, i) => /* @__PURE__ */ jsxRuntime.jsx(Dots, { $i: i, ...{
-        $size
-      } }, i)) }) }) }),
-      isDigital ? /* @__PURE__ */ jsxRuntime.jsxs(Time, { as: "time", dateTime: time.toISOString(), "aria-label": timeLabel, children: [
-        /* @__PURE__ */ jsxRuntime.jsx(TimeTxt, { ...{
-          $size
-        }, "aria-hidden": "true", children: showTimeWithSec ? currentTimeWithoutAmPm : withoutSec }),
-        /* @__PURE__ */ jsxRuntime.jsx(TimeTxt, { ...{
-          $size
-        }, "aria-hidden": "true", children: amPm })
-      ] }) : /* @__PURE__ */ jsxRuntime.jsxs(Time, { as: "time", dateTime: time.toISOString(), "aria-label": timeLabel, children: [
-        /* @__PURE__ */ jsxRuntime.jsx(HourHand, { ...{
-          $size
-        }, style: {
-          "--hand-rotate": `${handRotations.hour}deg`
-        }, "aria-hidden": "true" }),
-        /* @__PURE__ */ jsxRuntime.jsx(MinuteHand, { ...{
-          $size
-        }, style: {
-          "--hand-rotate": `${handRotations.minute}deg`
-        }, "aria-hidden": "true" }),
-        /* @__PURE__ */ jsxRuntime.jsx(SecondHand, { ...{
-          $size
-        }, style: {
-          "--hand-rotate": `${handRotations.second}deg`
-        }, "aria-hidden": "true" })
-      ] })
-    ] }),
-    timerSeconds > 0 && /* @__PURE__ */ jsxRuntime.jsxs(LeftActions, { ...{
-      $size
-    }, $noActions: hasNoTimer, role: "group", "aria-label": "Timer controls", children: [
-      /* @__PURE__ */ jsxRuntime.jsx(ActionBtn, { type: "button", onClick: removeTimer, ...{
-        $size
-      }, "aria-label": "Stop timer", "aria-disabled": hasNoTimer, children: /* @__PURE__ */ jsxRuntime.jsx(MediaStopFilledWrapper, { color: white.default, size: ICON_SIZE, "aria-hidden": "true" }) }),
-      hasNoTimer || !isPaused ? /* @__PURE__ */ jsxRuntime.jsx(ActionBtn, { type: "button", onClick: pauseTimer, ...{
-        $size
-      }, "aria-label": "Pause timer", "aria-disabled": hasNoTimer, children: /* @__PURE__ */ jsxRuntime.jsx(MediaPauseFilledWrapper, { color: white.default, size: ICON_SIZE, "aria-hidden": "true" }) }) : /* @__PURE__ */ jsxRuntime.jsx(ActionBtn, { type: "button", onClick: playTimer, "aria-label": "Resume timer", ...{
-        $size
-      }, children: /* @__PURE__ */ jsxRuntime.jsx(MediaPlayFilledWrapper, { color: white.default, size: ICON_SIZE, "aria-hidden": "true" }) })
-    ] }),
-    (!hasNoTimer || isDismissing) && /* @__PURE__ */ jsxRuntime.jsxs(AlarmLabel, { ...{
-      $size
-    }, $dismissing: isDismissing, "aria-label": `${timerSec} seconds remaining`, children: [
-      /* @__PURE__ */ jsxRuntime.jsx(ClockCircleOutline.default, { color: "rgba(255,255,255,0.82)", style: {
-        width: "1em",
-        height: "1em",
-        flexShrink: 0
-      } }),
-      timerLabel.split("").map((char, i) => char === ":" ? /* @__PURE__ */ jsxRuntime.jsx("span", { children: char }, i) : /* @__PURE__ */ jsxRuntime.jsx(TimerDigit, { children: char }, `${i}-${char}`))
-    ] }),
-    timerSeconds > 0 && /* @__PURE__ */ jsxRuntime.jsx(RightActions, { role: "group", ...{
-      $size
-    }, "aria-label": "Start timer", children: /* @__PURE__ */ jsxRuntime.jsx(ActionBtn, { type: "button", onClick: setTimer, ...{
-      $size
-    }, "aria-label": `Start ${timerSeconds} second timer`, children: /* @__PURE__ */ jsxRuntime.jsx(AddWrapper, { color: white.default, size: $size, "aria-hidden": "true" }) }) })
-  ] });
-};
-Timer.propTypes = {
-  /** Color theme key for the clock and accent elements. Defaults to `'green'` */
-  color: PropTypes__default.default.string,
-  /** Diameter of the clock in pixels. Defaults to `30` */
-  size: PropTypes__default.default.number,
-  /** Whether to display the time readout. Defaults to `true` */
-  showTime: PropTypes__default.default.bool,
-  /** Includes seconds in the digital readout when true. Defaults to `true` */
-  showTimeWithSec: PropTypes__default.default.bool,
-  /** IANA timezone string (e.g. `'Asia/Kolkata'`). Defaults to `'Asia/Kolkata'` */
-  timeZone: PropTypes__default.default.string,
-  /** Shows a digital readout when true; analog hands when false. Defaults to `true` */
-  isDigital: PropTypes__default.default.bool,
-  /** Countdown duration in seconds. Shows timer controls when > 0 */
-  timerSeconds: PropTypes__default.default.number,
-  /** Called when the timer is started */
-  onTimerAdd: PropTypes__default.default.func,
-  /** Called when the countdown reaches zero */
-  onTimerComplete: PropTypes__default.default.func,
-  /** Called when the timer is stopped */
-  onTimerRemove: PropTypes__default.default.func,
-  /** Called when the timer is paused */
-  onTimerPause: PropTypes__default.default.func,
-  /** Called when a paused timer is resumed */
-  onTimerPlay: PropTypes__default.default.func
-};
-exports.default = Timer;
+`,g=()=>{},rt=a=>()=>{const b=new Date().toLocaleString("en-Us",{hour12:!0,timeZone:a}).split(", ")[1].split(" ")[0],[S,l,x]=b.split(":").map(Number);return{second:x*6,minute:l*6+x*.1,hour:S%12*30+l*.5}},Q=({color:a="green",showTime:$=!0,showTimeWithSec:w=!0,timeZone:b="Asia/Kolkata",isDigital:S=!0,timerSeconds:l=0,onTimerAdd:x=g,onTimerComplete:V=g,onTimerRemove:Z=g,onTimerPause:ee=g,onTimerPlay:te=g,size:D=30,...re})=>{const[k,ae]=n.useState(new Date),[d,T]=n.useState(0),[j,v]=n.useState(!1),[R,ie]=n.useState(rt(b)),[oe,A]=n.useState(0),[h,P]=n.useState(!1),O=n.useRef(j),i=Math.round(D),M=Math.round(14*D/20);n.useEffect(()=>{O.current=j},[j]);const se=()=>{T(l),A(l%60*6),v(!1),x()},ne=()=>{P(!0),Z()},le=()=>{T(0),A(0),P(!1)},de=()=>{v(!0),ee()},ce=()=>{v(!1),te()};n.useEffect(()=>{const p=setInterval(()=>{const c=new Date;ae(c),ie(u=>{const fe=c.toLocaleString("en-Us",{hour12:!0,timeZone:b}).split(", ")[1].split(" ")[0],[be,H,N]=fe.split(":").map(Number),he=N*6,ge=H*6+N*.1,$e=be%12*30+H*.5,I=(W,L)=>{const Y=W%360;return W-Y+L+(L<Y?360:0)};return{second:I(u.second,he),minute:I(u.minute,ge),hour:I(u.hour,$e)}}),O.current||(T(u=>(u-1===0&&(V(),P(!0)),u-1)),A(u=>u-6))},1e3);return()=>clearInterval(p)},[]);const _=k.toLocaleString("en-Us",{hour12:!0,timeZone:b}).split(", ")[1],C=_.split(" ")[0],z=_.split(" ")[1],E=_.split(":").slice(0,2).join(":"),f=!(Number.isInteger(d)&&d>0),ue=String(Math.floor(d/60)).padStart(2,"0"),me=String(d%60).padStart(2,"0"),pe=`${ue}:${me}`,F=`${w?C:E} ${z}`;return e.jsxs(qe,{$color:a,role:"region","aria-label":"Clock",$size:i,...re,children:[e.jsx(je.default,{borderRadius:`${t(16.67)({$size:i})}rem`,"aria-hidden":"true"}),(!f||h)&&e.jsxs(e.Fragment,{children:[e.jsx(Be,{$dismissing:h,onAnimationEnd:le,"aria-hidden":"true",children:e.jsx(ye.default,{progress:d>=60?1:d%60/60})}),e.jsx(tt,{$size:i,style:{"--bullet-rotate":`${oe}deg`},$dismissing:h,"aria-hidden":"true",children:e.jsx(et,{$size:i})}),e.jsx(Ze,{role:"timer","aria-live":"polite","aria-label":`${d} seconds remaining`})]}),$&&e.jsxs(e.Fragment,{children:[e.jsx(De,{"aria-hidden":"true",$size:i,children:e.jsx(Ce,{children:e.jsx(ze,{"aria-hidden":"true",children:[...Array(60)].map((p,c)=>e.jsx(Oe,{$i:c,$size:i},c))})})}),S?e.jsxs(G,{as:"time",dateTime:k.toISOString(),"aria-label":F,children:[e.jsx(U,{$size:i,"aria-hidden":"true",children:w?C:E}),e.jsx(U,{$size:i,"aria-hidden":"true",children:z})]}):e.jsxs(G,{as:"time",dateTime:k.toISOString(),"aria-label":F,children:[e.jsx(Ee,{$size:i,style:{"--hand-rotate":`${R.hour}deg`},"aria-hidden":"true"}),e.jsx(Fe,{$size:i,style:{"--hand-rotate":`${R.minute}deg`},"aria-hidden":"true"}),e.jsx(He,{$size:i,style:{"--hand-rotate":`${R.second}deg`},"aria-hidden":"true"})]})]}),l>0&&e.jsxs(Ge,{$size:i,$noActions:f,role:"group","aria-label":"Timer controls",children:[e.jsx(y,{type:"button",onClick:ne,$size:i,"aria-label":"Stop timer","aria-disabled":f,children:e.jsx(Je,{color:m.default,size:M,"aria-hidden":"true"})}),f||!j?e.jsx(y,{type:"button",onClick:de,$size:i,"aria-label":"Pause timer","aria-disabled":f,children:e.jsx(Qe,{color:m.default,size:M,"aria-hidden":"true"})}):e.jsx(y,{type:"button",onClick:ce,"aria-label":"Resume timer",$size:i,children:e.jsx(Ve,{color:m.default,size:M,"aria-hidden":"true"})})]}),(!f||h)&&e.jsxs(Xe,{$size:i,$dismissing:h,"aria-label":`${d} seconds remaining`,children:[e.jsx(ke.default,{color:"rgba(255,255,255,0.82)",style:{width:"1em",height:"1em",flexShrink:0}}),pe.split("").map((p,c)=>p===":"?e.jsx("span",{children:p},c):e.jsx(Ye,{children:p},`${c}-${p}`))]}),l>0&&e.jsx(Ue,{role:"group",$size:i,"aria-label":"Start timer",children:e.jsx(y,{type:"button",onClick:se,$size:i,"aria-label":`Start ${l} second timer`,children:e.jsx(Ke,{color:m.default,size:i,"aria-hidden":"true"})})})]})};Q.propTypes={color:o.default.string,size:o.default.number,showTime:o.default.bool,showTimeWithSec:o.default.bool,timeZone:o.default.string,isDigital:o.default.bool,timerSeconds:o.default.number,onTimerAdd:o.default.func,onTimerComplete:o.default.func,onTimerRemove:o.default.func,onTimerPause:o.default.func,onTimerPlay:o.default.func};exports.default=Q;

package/cjs/components/Timer/components/TimerRing/TimerRing.cjs

@@ -1,57 +1 @@
-"use strict";
-Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: "Module" } });
-const jsxRuntime = require("react/jsx-runtime");
-const react = require("react");
-const white = require("../../../../colors/white.cjs");
-const styled = require("styled-components");
-const _interopDefault = (e) => e && e.__esModule ? e : { default: e };
-const styled__default = /* @__PURE__ */ _interopDefault(styled);
-const SVG = styled__default.default.svg``;
-const RADIUS = 33;
-const CIRCUMFERENCE = 2 * Math.PI * RADIUS;
-const TimerRing = ({
-  progress
-}) => {
-  const circleRef = react.useRef(null);
-  const groupAngle = 2 * Math.PI * progress;
-  const headX = 50 + RADIUS * Math.cos(groupAngle);
-  const headY = 48 + RADIUS * Math.sin(groupAngle);
-  react.useEffect(() => {
-    const offset = CIRCUMFERENCE * (1 - progress);
-    circleRef.current.style.strokeDashoffset = offset;
-  }, [progress]);
-  return /* @__PURE__ */ jsxRuntime.jsxs(SVG, { viewBox: "0 0 100 100", width: "100%", height: "100%", children: [
-    /* @__PURE__ */ jsxRuntime.jsxs("defs", { children: [
-      /* @__PURE__ */ jsxRuntime.jsxs("filter", { id: "ambient-glow", x: "-40%", y: "-40%", width: "180%", height: "180%", children: [
-        /* @__PURE__ */ jsxRuntime.jsx("feGaussianBlur", { in: "SourceGraphic", stdDeviation: "3.5", result: "blur" }),
-        /* @__PURE__ */ jsxRuntime.jsx("feComposite", { in: "blur", in2: "SourceGraphic", operator: "over" })
-      ] }),
-      /* @__PURE__ */ jsxRuntime.jsxs("filter", { id: "arc-glow", x: "-20%", y: "-20%", width: "140%", height: "140%", children: [
-        /* @__PURE__ */ jsxRuntime.jsx("feGaussianBlur", { in: "SourceGraphic", stdDeviation: "0.7", result: "blur" }),
-        /* @__PURE__ */ jsxRuntime.jsxs("feMerge", { children: [
-          /* @__PURE__ */ jsxRuntime.jsx("feMergeNode", { in: "blur" }),
-          /* @__PURE__ */ jsxRuntime.jsx("feMergeNode", { in: "SourceGraphic" })
-        ] })
-      ] }),
-      /* @__PURE__ */ jsxRuntime.jsxs("filter", { id: "head-glow", x: "-150%", y: "-150%", width: "400%", height: "400%", children: [
-        /* @__PURE__ */ jsxRuntime.jsx("feGaussianBlur", { in: "SourceGraphic", stdDeviation: "1.6", result: "blur" }),
-        /* @__PURE__ */ jsxRuntime.jsxs("feMerge", { children: [
-          /* @__PURE__ */ jsxRuntime.jsx("feMergeNode", { in: "blur" }),
-          /* @__PURE__ */ jsxRuntime.jsx("feMergeNode", { in: "SourceGraphic" })
-        ] })
-      ] })
-    ] }),
-    /* @__PURE__ */ jsxRuntime.jsxs("g", { transform: "rotate(-90, 50, 48)", children: [
-      progress > 5e-3 && /* @__PURE__ */ jsxRuntime.jsx("circle", { cx: 50, cy: 48, r: RADIUS, stroke: "rgba(255,255,255,0.09)", strokeWidth: 6, fill: "none", strokeDasharray: CIRCUMFERENCE, strokeDashoffset: CIRCUMFERENCE * (1 - progress), filter: "url(#ambient-glow)" }),
-      /* @__PURE__ */ jsxRuntime.jsx("circle", { cx: 50, cy: 48, r: RADIUS, stroke: "rgba(0,0,0,0.28)", strokeWidth: 4, fill: "none" }),
-      /* @__PURE__ */ jsxRuntime.jsx("circle", { cx: 50, cy: 48, r: RADIUS, stroke: "rgba(255,255,255,.14)", strokeWidth: 1.4, fill: "none" }),
-      /* @__PURE__ */ jsxRuntime.jsx("circle", { ref: circleRef, cx: 50, cy: 48, r: RADIUS, stroke: white.default, strokeWidth: 2, fill: "none", strokeLinecap: "round", strokeDasharray: CIRCUMFERENCE, strokeDashoffset: CIRCUMFERENCE, filter: "url(#arc-glow)", style: {
-        transition: "stroke-dashoffset 0.2s linear"
-      } }),
-      progress > 5e-3 && /* @__PURE__ */ jsxRuntime.jsx("circle", { cx: headX, cy: headY, r: 1.8, fill: white.default, 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)"
-      } })
-    ] })
-  ] });
-};
-exports.default = TimerRing;
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=require("react/jsx-runtime"),o=require("react"),c=require("../../../../colors/white.cjs"),f=require("styled-components"),d=r=>r&&r.__esModule?r:{default:r},h=d(f),x=h.default.svg``,t=33,s=2*Math.PI*t,j=({progress:r})=>{const i=o.useRef(null),l=2*Math.PI*r,n=50+t*Math.cos(l),a=48+t*Math.sin(l);return o.useEffect(()=>{const u=s*(1-r);i.current.style.strokeDashoffset=u},[r]),e.jsxs(x,{viewBox:"0 0 100 100",width:"100%",height:"100%",children:[e.jsxs("defs",{children:[e.jsxs("filter",{id:"ambient-glow",x:"-40%",y:"-40%",width:"180%",height:"180%",children:[e.jsx("feGaussianBlur",{in:"SourceGraphic",stdDeviation:"3.5",result:"blur"}),e.jsx("feComposite",{in:"blur",in2:"SourceGraphic",operator:"over"})]}),e.jsxs("filter",{id:"arc-glow",x:"-20%",y:"-20%",width:"140%",height:"140%",children:[e.jsx("feGaussianBlur",{in:"SourceGraphic",stdDeviation:"0.7",result:"blur"}),e.jsxs("feMerge",{children:[e.jsx("feMergeNode",{in:"blur"}),e.jsx("feMergeNode",{in:"SourceGraphic"})]})]}),e.jsxs("filter",{id:"head-glow",x:"-150%",y:"-150%",width:"400%",height:"400%",children:[e.jsx("feGaussianBlur",{in:"SourceGraphic",stdDeviation:"1.6",result:"blur"}),e.jsxs("feMerge",{children:[e.jsx("feMergeNode",{in:"blur"}),e.jsx("feMergeNode",{in:"SourceGraphic"})]})]})]}),e.jsxs("g",{transform:"rotate(-90, 50, 48)",children:[r>.005&&e.jsx("circle",{cx:50,cy:48,r:t,stroke:"rgba(255,255,255,0.09)",strokeWidth:6,fill:"none",strokeDasharray:s,strokeDashoffset:s*(1-r),filter:"url(#ambient-glow)"}),e.jsx("circle",{cx:50,cy:48,r:t,stroke:"rgba(0,0,0,0.28)",strokeWidth:4,fill:"none"}),e.jsx("circle",{cx:50,cy:48,r:t,stroke:"rgba(255,255,255,.14)",strokeWidth:1.4,fill:"none"}),e.jsx("circle",{ref:i,cx:50,cy:48,r:t,stroke:c.default,strokeWidth:2,fill:"none",strokeLinecap:"round",strokeDasharray:s,strokeDashoffset:s,filter:"url(#arc-glow)",style:{transition:"stroke-dashoffset 0.2s linear"}}),r>.005&&e.jsx("circle",{cx:n,cy:a,r:1.8,fill:c.default,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)"}})]})]})};exports.default=j;