@gfazioli/mantine-clock 1.0.4 → 2.0.0

package/dist/cjs/Clock.cjs

@@ -44,7 +44,10 @@ const varsResolver = core.createVarsResolver(
     secondaryNumbersOpacity,
     secondHandColor,
     minuteHandColor,
-    hourHandColor
+    hourHandColor,
+    secondsArcColor,
+    minutesArcColor,
+    hoursArcColor
   }) => {
     const sizeValue = size || "md";
     const clockSize = typeof sizeValue === "string" && sizeValue in defaultClockSizes ? defaultClockSizes[sizeValue] : sizeValue;
@@ -87,6 +90,18 @@ const varsResolver = core.createVarsResolver(
         "--clock-hour-hand-color": core.parseThemeColor({
           color: hourHandColor || "",
           theme
+        }).value,
+        "--clock-seconds-arc-color": core.parseThemeColor({
+          color: secondsArcColor || secondHandColor || "",
+          theme
+        }).value,
+        "--clock-minutes-arc-color": core.parseThemeColor({
+          color: minutesArcColor || minuteHandColor || "",
+          theme
+        }).value,
+        "--clock-hours-arc-color": core.parseThemeColor({
+          color: hoursArcColor || hourHandColor || "",
+          theme
         }).value
       }
     };
@@ -143,7 +158,19 @@ const RealClock = (props) => {
     hourNumbersDistance = 0.75,
     // Default distance for hour numbers
     primaryNumbersProps,
-    secondaryNumbersProps
+    secondaryNumbersProps,
+    withSecondsArc,
+    secondsArcFrom,
+    secondsArcDirection = "clockwise",
+    withMinutesArc,
+    minutesArcFrom,
+    minutesArcDirection = "clockwise",
+    withHoursArc,
+    hoursArcFrom,
+    hoursArcDirection = "clockwise",
+    secondsArcOpacity,
+    minutesArcOpacity,
+    hoursArcOpacity
   } = props;
   const timezoneTime = timezone2 && timezone2 !== "" ? dayjs(time).tz(timezone2) : dayjs(time);
   const hours = timezoneTime.hour() % 12;
@@ -182,7 +209,114 @@ const RealClock = (props) => {
   );
   const centerSize = Math.round(size * 0.034);
   const tickOffset = Math.round(size * 0.028);
-  return /* @__PURE__ */ React.createElement(core.Box, { ...getStyles("clockContainer") }, /* @__PURE__ */ React.createElement(core.Box, { ...getStyles("glassWrapper") }, /* @__PURE__ */ React.createElement(core.Box, { ...getStyles("clockFace") }, /* @__PURE__ */ React.createElement(core.Box, { ...getStyles("hourMarks") }, hourTicksOpacity !== 0 && Array.from({ length: 12 }, (_, i) => /* @__PURE__ */ React.createElement(
+  const toClockAngle = (deg) => (deg % 360 + 360) % 360;
+  const secAngleFromDate = (d) => {
+    if (!d) {
+      return 0;
+    }
+    const dt = timezone2 && timezone2 !== "" ? dayjs(d).tz(timezone2) : dayjs(d);
+    const s = dt.second();
+    const ms = dt.millisecond();
+    return toClockAngle((s + ms / 1e3) * 6);
+  };
+  const minAngleFromDate = (d) => {
+    if (!d) {
+      return 0;
+    }
+    const dt = timezone2 && timezone2 !== "" ? dayjs(d).tz(timezone2) : dayjs(d);
+    const m = dt.minute();
+    return toClockAngle(m * 6);
+  };
+  const hourAngleFromDate = (d) => {
+    if (!d) {
+      return 0;
+    }
+    const dt = timezone2 && timezone2 !== "" ? dayjs(d).tz(timezone2) : dayjs(d);
+    const h = dt.hour() % 12;
+    const m = dt.minute();
+    return toClockAngle(h * 30 + m * 0.5);
+  };
+  const describeSector = (cx, cy, r, startDeg, endDeg, direction) => {
+    const start = toClockAngle(startDeg);
+    const end = toClockAngle(endDeg);
+    let delta = 0;
+    if (direction === "clockwise") {
+      delta = end - start;
+      if (delta < 0) {
+        delta += 360;
+      }
+    } else {
+      delta = start - end;
+      if (delta < 0) {
+        delta += 360;
+      }
+    }
+    const largeArc = delta >= 180 ? 1 : 0;
+    const sweep = direction === "clockwise" ? 1 : 0;
+    const aStart = start * Math.PI / 180;
+    const aEnd = end * Math.PI / 180;
+    const x1 = cx + r * Math.sin(aStart);
+    const y1 = cy - r * Math.cos(aStart);
+    const x2 = cx + r * Math.sin(aEnd);
+    const y2 = cy - r * Math.cos(aEnd);
+    const fmt = (n) => Number.isFinite(n) ? n.toFixed(3) : "0";
+    return `M ${fmt(cx)} ${fmt(cy)} L ${fmt(x1)} ${fmt(y1)} A ${fmt(r)} ${fmt(r)} 0 ${largeArc} ${sweep} ${fmt(x2)} ${fmt(y2)} Z`;
+  };
+  const showSecArc = withSecondsArc === true && (secondsArcOpacity ?? 1) !== 0;
+  const showMinArc = withMinutesArc === true && (minutesArcOpacity ?? 1) !== 0;
+  const showHrArc = withHoursArc === true && (hoursArcOpacity ?? 1) !== 0;
+  return /* @__PURE__ */ React.createElement(core.Box, { ...getStyles("clockContainer") }, /* @__PURE__ */ React.createElement(core.Box, { ...getStyles("glassWrapper") }, /* @__PURE__ */ React.createElement(core.Box, { ...getStyles("clockFace") }, (showSecArc || showMinArc || showHrArc) && /* @__PURE__ */ React.createElement(
+    "svg",
+    {
+      ...getStyles("arcsLayer", { style: { width: size, height: size } }),
+      viewBox: `0 0 ${size} ${size}`
+    },
+    showHrArc && /* @__PURE__ */ React.createElement(
+      "path",
+      {
+        d: describeSector(
+          clockRadius,
+          clockRadius,
+          calculatedHourHandLength,
+          hourAngleFromDate(parseTimeValue(hoursArcFrom) ?? null),
+          hourAngle,
+          hoursArcDirection
+        ),
+        fill: "var(--clock-hours-arc-color-resolved)",
+        fillOpacity: Math.round((hoursArcOpacity ?? 1) * 100) / 100
+      }
+    ),
+    showMinArc && /* @__PURE__ */ React.createElement(
+      "path",
+      {
+        d: describeSector(
+          clockRadius,
+          clockRadius,
+          calculatedMinuteHandLength,
+          minAngleFromDate(parseTimeValue(minutesArcFrom) ?? null),
+          minuteAngle,
+          minutesArcDirection
+        ),
+        fill: "var(--clock-minutes-arc-color-resolved)",
+        fillOpacity: Math.round((minutesArcOpacity ?? 1) * 100) / 100
+      }
+    ),
+    showSecArc && /* @__PURE__ */ React.createElement(
+      "path",
+      {
+        d: describeSector(
+          clockRadius,
+          clockRadius,
+          calculatedSecondHandLength,
+          secAngleFromDate(parseTimeValue(secondsArcFrom) ?? null),
+          secondAngle,
+          secondsArcDirection
+        ),
+        fill: "var(--clock-seconds-arc-color-resolved)",
+        fillOpacity: Math.round((secondsArcOpacity ?? 1) * 100) / 100
+      }
+    )
+  ), /* @__PURE__ */ React.createElement(core.Box, { ...getStyles("hourMarks") }, hourTicksOpacity !== 0 && Array.from({ length: 12 }, (_, i) => /* @__PURE__ */ React.createElement(
     core.Box,
     {
       key: `hour-tick-${i}`,
@@ -387,6 +521,21 @@ const Clock = core.factory((_props, ref) => {
     timezone: timezone2,
     running,
     value,
+    withSecondsArc,
+    secondsArcFrom,
+    secondsArcDirection,
+    secondsArcColor,
+    secondsArcOpacity,
+    withMinutesArc,
+    minutesArcFrom,
+    minutesArcDirection,
+    minutesArcColor,
+    minutesArcOpacity,
+    withHoursArc,
+    hoursArcFrom,
+    hoursArcDirection,
+    hoursArcColor,
+    hoursArcOpacity,
     // Styles API props
     classNames,
     style,