@gfazioli/mantine-clock 2.1.17 → 3.0.0

package/dist/esm/Clock.mjs

@@ -2,12 +2,19 @@
 import dayjs from 'dayjs';
 import timezonePlugin from 'dayjs/plugin/timezone';
 import utc from 'dayjs/plugin/utc';
-import React, { useState, useRef, useEffect } from 'react';
-import { createVarsResolver, px, getSize, parseThemeColor, factory, useProps, useStyles, Box, Text } from '@mantine/core';
+import React, { useState, useEffect, useRef, useMemo } from 'react';
+import { createVarsResolver, px, getSize, Box, Text, factory, useProps, useStyles, parseThemeColor } from '@mantine/core';
+import { useCallbackRef, useMergedRef } from '@mantine/hooks';
+import { ClockDigital } from './ClockDigital.mjs';
+import { hourAngleFromDate, minuteAngleFromDate, secondAngleFromDate, createGeometry } from './geometry.mjs';
 import classes from './Clock.module.css.mjs';
 
 dayjs.extend(utc);
 dayjs.extend(timezonePlugin);
+const TICK_OFFSET_RATIO = 0.028;
+const CENTER_DOT_RATIO = 0.034;
+const COUNTERWEIGHT_MULTIPLIER = 3;
+const round2 = (n) => Math.round(n * 100) / 100;
 const defaultProps = {
   size: 400,
   hourHandSize: 0.017,
@@ -19,6 +26,7 @@ const defaultProps = {
   secondHandOpacity: 1,
   minuteHandOpacity: 1,
   hourHandOpacity: 1,
+  secondHandBehavior: "tick",
   running: true
 };
 const defaultClockSizes = {
@@ -28,83 +36,37 @@ const defaultClockSizes = {
   lg: 480,
   xl: 512
 };
-const varsResolver = createVarsResolver(
-  (theme, {
-    size,
-    color,
-    hourTicksColor,
-    hourTicksOpacity,
-    minuteTicksColor,
-    minuteTicksOpacity,
-    primaryNumbersColor,
-    primaryNumbersOpacity,
-    secondaryNumbersColor,
-    secondaryNumbersOpacity,
-    secondHandColor,
-    minuteHandColor,
-    hourHandColor,
-    secondsArcColor,
-    minutesArcColor,
-    hoursArcColor
-  }) => {
-    const sizeValue = size || "md";
-    const clockSize = typeof sizeValue === "string" && sizeValue in defaultClockSizes ? defaultClockSizes[sizeValue] : sizeValue;
-    const effectiveSize = Math.round(px(getSize(clockSize, "clock-size")));
-    return {
-      root: {
-        "--clock-size": `${effectiveSize}px`,
-        "--clock-color": parseThemeColor({
-          color: color || "",
-          theme
-        }).value,
-        "--clock-hour-ticks-color": parseThemeColor({
-          color: hourTicksColor || "",
-          theme
-        }).value,
-        "--clock-hour-ticks-opacity": (Math.round((hourTicksOpacity || 1) * 100) / 100).toString(),
-        "--clock-minute-ticks-color": parseThemeColor({
-          color: minuteTicksColor || "",
-          theme
-        }).value,
-        "--clock-minute-ticks-opacity": (Math.round((minuteTicksOpacity || 1) * 100) / 100).toString(),
-        "--clock-primary-numbers-color": parseThemeColor({
-          color: primaryNumbersColor || "",
-          theme
-        }).value,
-        "--clock-primary-numbers-opacity": (Math.round((primaryNumbersOpacity || 1) * 100) / 100).toString(),
-        "--clock-secondary-numbers-color": parseThemeColor({
-          color: secondaryNumbersColor || "",
-          theme
-        }).value,
-        "--clock-secondary-numbers-opacity": (Math.round((secondaryNumbersOpacity || 1) * 100) / 100).toString(),
-        "--clock-second-hand-color": parseThemeColor({
-          color: secondHandColor || "",
-          theme
-        }).value,
-        "--clock-minute-hand-color": parseThemeColor({
-          color: minuteHandColor || "",
-          theme
-        }).value,
-        "--clock-hour-hand-color": parseThemeColor({
-          color: hourHandColor || "",
-          theme
-        }).value,
-        "--clock-seconds-arc-color": parseThemeColor({
-          color: secondsArcColor || secondHandColor || "",
-          theme
-        }).value,
-        "--clock-minutes-arc-color": parseThemeColor({
-          color: minutesArcColor || minuteHandColor || "",
-          theme
-        }).value,
-        "--clock-hours-arc-color": parseThemeColor({
-          color: hoursArcColor || hourHandColor || "",
-          theme
-        }).value
-      }
-    };
+const buildCssVars = (theme, clockSizePx, props) => {
+  const c = (color) => parseThemeColor({ color, theme }).value;
+  return {
+    "--clock-size": clockSizePx,
+    "--clock-color": c(props.color || ""),
+    "--clock-hour-ticks-color": c(props.hourTicksColor || ""),
+    "--clock-hour-ticks-opacity": round2(props.hourTicksOpacity ?? 1).toString(),
+    "--clock-minute-ticks-color": c(props.minuteTicksColor || ""),
+    "--clock-minute-ticks-opacity": round2(props.minuteTicksOpacity ?? 1).toString(),
+    "--clock-primary-numbers-color": c(props.primaryNumbersColor || ""),
+    "--clock-primary-numbers-opacity": round2(props.primaryNumbersOpacity ?? 1).toString(),
+    "--clock-secondary-numbers-color": c(props.secondaryNumbersColor || ""),
+    "--clock-secondary-numbers-opacity": round2(props.secondaryNumbersOpacity ?? 1).toString(),
+    "--clock-second-hand-color": c(props.secondHandColor || ""),
+    "--clock-minute-hand-color": c(props.minuteHandColor || ""),
+    "--clock-hour-hand-color": c(props.hourHandColor || ""),
+    "--clock-seconds-arc-color": c(props.secondsArcColor || props.secondHandColor || ""),
+    "--clock-minutes-arc-color": c(props.minutesArcColor || props.minuteHandColor || ""),
+    "--clock-hours-arc-color": c(props.hoursArcColor || props.hourHandColor || "")
+  };
+};
+const varsResolver = createVarsResolver((theme, props) => {
+  const { size } = props;
+  if (size === "auto") {
+    return { root: buildCssVars(theme, "400px", props) };
   }
-);
+  const sizeValue = size || "md";
+  const clockSize = typeof sizeValue === "string" && sizeValue in defaultClockSizes ? defaultClockSizes[sizeValue] : sizeValue;
+  const effectiveSize = Math.round(px(getSize(clockSize, "clock-size")));
+  return { root: buildCssVars(theme, `${effectiveSize}px`, props) };
+});
 const parseTimeValue = (value) => {
   if (!value) {
     return null;
@@ -133,12 +95,99 @@ const parseTimeValue = (value) => {
   }
   return null;
 };
-const RealClock = (props) => {
+const ClockFaceStatic = React.memo(
+  ({
+    getStyles,
+    effectiveSize,
+    geometry,
+    hourTicksOpacity,
+    minuteTicksOpacity,
+    primaryNumbersOpacity,
+    secondaryNumbersOpacity,
+    hourNumbersDistance = 0.75,
+    primaryNumbersProps,
+    secondaryNumbersProps
+  }) => {
+    const clockRadius = Math.round(effectiveSize / 2);
+    const numberRadius = Math.round(clockRadius * hourNumbersDistance);
+    const tickOffset = Math.round(effectiveSize * TICK_OFFSET_RATIO);
+    return /* @__PURE__ */ React.createElement(Box, { ...getStyles("hourMarks") }, (hourTicksOpacity ?? 1) !== 0 && Array.from({ length: 12 }, (_, i) => {
+      const pos = geometry.tickPosition(i, 12, tickOffset);
+      const tickStyle = pos.positioning === "absolute" ? {
+        top: pos.y,
+        left: pos.x,
+        transformOrigin: pos.transformOrigin,
+        transform: `translate(-50%, -50%) rotate(${pos.angle}deg)`
+      } : {
+        top: pos.y,
+        left: "50%",
+        transformOrigin: pos.transformOrigin,
+        transform: `translateX(-50%) rotate(${pos.angle}deg)`
+      };
+      return /* @__PURE__ */ React.createElement(Box, { key: `hour-tick-${i}`, ...getStyles("hourTick", { style: tickStyle }) });
+    }), (minuteTicksOpacity ?? 1) !== 0 && Array.from({ length: 60 }, (_, i) => {
+      if (i % 5 === 0) {
+        return null;
+      }
+      const pos = geometry.tickPosition(i, 60, tickOffset);
+      const tickStyle = pos.positioning === "absolute" ? {
+        top: pos.y,
+        left: pos.x,
+        transformOrigin: pos.transformOrigin,
+        transform: `translate(-50%, -50%) rotate(${pos.angle}deg)`
+      } : {
+        top: pos.y,
+        left: "50%",
+        transformOrigin: pos.transformOrigin,
+        transform: `translateX(-50%) rotate(${pos.angle}deg)`
+      };
+      return /* @__PURE__ */ React.createElement(Box, { key: `minute-tick-${i}`, ...getStyles("minuteTick", { style: tickStyle }) });
+    }), (primaryNumbersOpacity ?? 1) !== 0 && [12, 3, 6, 9].map((num) => {
+      const hourIndex = num === 12 ? 0 : num;
+      const pos = geometry.numberPosition(hourIndex, numberRadius);
+      return /* @__PURE__ */ React.createElement(
+        Text,
+        {
+          key: `primary-number-${num}`,
+          ...primaryNumbersProps,
+          ...getStyles("primaryNumber", {
+            className: getStyles("number").className,
+            style: {
+              left: pos.x,
+              top: pos.y
+            }
+          })
+        },
+        num
+      );
+    }), (secondaryNumbersOpacity ?? 1) !== 0 && [1, 2, 4, 5, 7, 8, 10, 11].map((num) => {
+      const pos = geometry.numberPosition(num, numberRadius);
+      return /* @__PURE__ */ React.createElement(
+        Text,
+        {
+          key: `secondary-number-${num}`,
+          ...secondaryNumbersProps,
+          ...getStyles("secondaryNumber", {
+            className: getStyles("number").className,
+            style: {
+              left: pos.x,
+              top: pos.y
+            }
+          })
+        },
+        num
+      );
+    }));
+  }
+);
+ClockFaceStatic.displayName = "ClockFaceStatic";
+const RealClock = React.memo((props) => {
   const {
     time,
     timezone: timezone2,
     getStyles,
     effectiveSize,
+    geometry,
     hourHandSize,
     minuteHandSize,
     secondHandSize,
@@ -168,7 +217,14 @@ const RealClock = (props) => {
     hoursArcDirection = "clockwise",
     secondsArcOpacity,
     minutesArcOpacity,
-    hoursArcOpacity
+    hoursArcOpacity,
+    renderHourHand,
+    renderMinuteHand,
+    renderSecondHand,
+    sectors,
+    faceContent,
+    animateOnMount,
+    animateOnMountDuration
   } = props;
   const timezoneTime = timezone2 && timezone2 !== "" ? dayjs(time).tz(timezone2) : dayjs(time);
   const hours = timezoneTime.hour() % 12;
@@ -179,9 +235,6 @@ const RealClock = (props) => {
   const minuteAngle = minutes * 6;
   let secondAngle = 0;
   switch (secondHandBehavior) {
-    case "tick":
-      secondAngle = seconds * 6;
-      break;
     case "tick-half":
       secondAngle = (seconds + Math.floor(milliseconds / 500) * 0.5) * 6;
       break;
@@ -189,303 +242,319 @@ const RealClock = (props) => {
       secondAngle = (seconds + Math.floor(milliseconds / 125) * 0.125) * 6;
       break;
     case "smooth":
-    default:
       secondAngle = (seconds + milliseconds / 1e3) * 6;
       break;
+    case "tick":
+    default:
+      secondAngle = seconds * 6;
+      break;
   }
+  const [mountPhase, setMountPhase] = useState(
+    animateOnMount ? "initial" : "done"
+  );
+  useEffect(() => {
+    if (mountPhase === "initial") {
+      const rafId = requestAnimationFrame(() => {
+        setMountPhase("animating");
+      });
+      return () => cancelAnimationFrame(rafId);
+    } else if (mountPhase === "animating") {
+      const timer = setTimeout(
+        () => {
+          setMountPhase("done");
+        },
+        (animateOnMountDuration ?? 1e3) + 50
+      );
+      return () => clearTimeout(timer);
+    }
+  }, [mountPhase, animateOnMountDuration]);
+  const showTransition = mountPhase === "animating";
+  const handAngles = mountPhase === "initial" ? { hour: 0, minute: 0, second: 0 } : { hour: round2(hourAngle), minute: round2(minuteAngle), second: round2(secondAngle) };
+  const transitionStyle = showTransition ? {
+    transition: `transform ${animateOnMountDuration ?? 1e3}ms cubic-bezier(0.34, 1.56, 0.64, 1)`
+  } : void 0;
   const size = effectiveSize;
-  const clockRadius = Math.round(size / 2);
-  const numberRadius = Math.round(clockRadius * hourNumbersDistance);
-  const calculatedHourHandLength = Math.round(
-    clockRadius * (hourHandLength ?? defaultProps.hourHandLength)
+  const { centerX, centerY } = geometry;
+  const calculatedHourHandLength = geometry.handLength(
+    hourHandLength ?? defaultProps.hourHandLength
   );
-  const calculatedMinuteHandLength = Math.round(
-    clockRadius * (minuteHandLength ?? defaultProps.minuteHandLength)
+  const calculatedMinuteHandLength = geometry.handLength(
+    minuteHandLength ?? defaultProps.minuteHandLength
   );
-  const calculatedSecondHandLength = Math.round(
-    clockRadius * (secondHandLength ?? defaultProps.secondHandLength)
+  const calculatedSecondHandLength = geometry.handLength(
+    secondHandLength ?? defaultProps.secondHandLength
   );
-  const centerSize = Math.round(size * 0.034);
-  const tickOffset = Math.round(size * 0.028);
-  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 centerSize = Math.round(size * CENTER_DOT_RATIO);
   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(Box, { ...getStyles("clockContainer") }, /* @__PURE__ */ React.createElement(Box, { ...getStyles("glassWrapper") }, /* @__PURE__ */ React.createElement(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(Box, { ...getStyles("hourMarks") }, hourTicksOpacity !== 0 && Array.from({ length: 12 }, (_, i) => /* @__PURE__ */ React.createElement(
+  const counterweightWidth = round2(
+    size * (secondHandSize ?? defaultProps.secondHandSize) * COUNTERWEIGHT_MULTIPLIER
+  );
+  return /* @__PURE__ */ React.createElement(
     Box,
     {
-      key: `hour-tick-${i}`,
-      ...getStyles("hourTick", {
+      ...getStyles("clockContainer", {
         style: {
-          top: tickOffset,
-          left: "50%",
-          transformOrigin: `50% ${clockRadius - tickOffset}px`,
-          transform: `translateX(-50%) rotate(${i * 30}deg)`
+          width: geometry.width,
+          height: geometry.height
         }
       })
-    }
-  )), minuteTicksOpacity !== 0 && Array.from({ length: 60 }, (_, i) => {
-    if (i % 5 === 0) {
-      return null;
-    }
-    return /* @__PURE__ */ React.createElement(
+    },
+    /* @__PURE__ */ React.createElement(
       Box,
       {
-        key: `minute-tick-${i}`,
-        ...getStyles("minuteTick", {
-          style: {
-            top: tickOffset,
-            left: "50%",
-            transformOrigin: `50% ${clockRadius - tickOffset}px`,
-            transform: `translateX(-50%) rotate(${i * 6}deg)`
-          }
-        })
-      }
-    );
-  }), primaryNumbersOpacity !== 0 && [12, 3, 6, 9].map((num) => {
-    const i = num === 12 ? 0 : num;
-    const angle = (i * 30 - 90) * (Math.PI / 180);
-    const x = Math.round(clockRadius + Math.cos(angle) * numberRadius);
-    const y = Math.round(clockRadius + Math.sin(angle) * numberRadius);
-    return /* @__PURE__ */ React.createElement(
-      Text,
-      {
-        key: `primary-number-${num}`,
-        ...primaryNumbersProps,
-        ...getStyles("primaryNumber", {
-          className: getStyles("number").className,
-          style: {
-            left: x,
-            top: y
-          }
+        ...getStyles("glassWrapper", {
+          style: { width: geometry.width, height: geometry.height }
         })
       },
-      num
-    );
-  }), secondaryNumbersOpacity !== 0 && [1, 2, 4, 5, 7, 8, 10, 11].map((num) => {
-    const i = num;
-    const angle = (i * 30 - 90) * (Math.PI / 180);
-    const x = Math.round(clockRadius + Math.cos(angle) * numberRadius);
-    const y = Math.round(clockRadius + Math.sin(angle) * numberRadius);
-    return /* @__PURE__ */ React.createElement(
-      Text,
-      {
-        key: `secondary-number-${num}`,
-        ...secondaryNumbersProps,
-        ...getStyles("secondaryNumber", {
-          className: getStyles("number").className,
-          style: {
-            left: x,
-            top: y
+      /* @__PURE__ */ React.createElement(
+        Box,
+        {
+          ...getStyles("clockFace", {
+            style: {
+              width: geometry.width,
+              height: geometry.height,
+              borderRadius: geometry.borderRadius(),
+              clipPath: geometry.clipPath()
+            }
+          })
+        },
+        faceContent && /* @__PURE__ */ React.createElement(Box, { ...getStyles("faceContent") }, faceContent),
+        (showSecArc || showMinArc || showHrArc || sectors && sectors.length > 0) && /* @__PURE__ */ React.createElement(
+          "svg",
+          {
+            ...getStyles("arcsLayer", {
+              style: { width: geometry.width, height: geometry.height }
+            }),
+            viewBox: `0 0 ${geometry.width} ${geometry.height}`
+          },
+          sectors && sectors.length > 0 && sectors.map((sector, idx) => {
+            const fromDate = parseTimeValue(sector.from);
+            const toDate = parseTimeValue(sector.to);
+            if (!fromDate || !toDate) {
+              return null;
+            }
+            const startAngle = hourAngleFromDate(fromDate, timezone2);
+            const endAngle = hourAngleFromDate(toDate, timezone2);
+            const sectorRadius = calculatedMinuteHandLength;
+            return /* @__PURE__ */ React.createElement(
+              "path",
+              {
+                key: `sector-${idx}`,
+                d: geometry.sectorPath(startAngle, endAngle, sectorRadius, "clockwise"),
+                fill: sector.color || "var(--clock-second-hand-color-resolved)",
+                fillOpacity: round2(sector.opacity ?? 0.2),
+                style: sector.interactive ? { cursor: "pointer" } : void 0,
+                role: sector.interactive ? "button" : void 0,
+                tabIndex: sector.interactive ? 0 : void 0,
+                "aria-label": sector.interactive ? sector.label : void 0,
+                onClick: sector.interactive && sector.onClick ? () => sector.onClick(sector) : void 0,
+                onKeyDown: sector.interactive && sector.onClick ? (e) => {
+                  if (e.key === "Enter" || e.key === " ") {
+                    e.preventDefault();
+                    sector.onClick(sector);
+                  }
+                } : void 0,
+                onMouseEnter: sector.interactive && sector.onHover ? () => sector.onHover(sector, true) : void 0,
+                onMouseLeave: sector.interactive && sector.onHover ? () => sector.onHover(sector, false) : void 0
+              },
+              sector.label && /* @__PURE__ */ React.createElement("title", null, sector.label)
+            );
+          }),
+          showHrArc && /* @__PURE__ */ React.createElement(
+            "path",
+            {
+              d: geometry.sectorPath(
+                hourAngleFromDate(parseTimeValue(hoursArcFrom) ?? null, timezone2),
+                hourAngle,
+                calculatedHourHandLength,
+                hoursArcDirection
+              ),
+              fill: "var(--clock-hours-arc-color-resolved)",
+              fillOpacity: round2(hoursArcOpacity ?? 1)
+            }
+          ),
+          showMinArc && /* @__PURE__ */ React.createElement(
+            "path",
+            {
+              d: geometry.sectorPath(
+                minuteAngleFromDate(parseTimeValue(minutesArcFrom) ?? null, timezone2),
+                minuteAngle,
+                calculatedMinuteHandLength,
+                minutesArcDirection
+              ),
+              fill: "var(--clock-minutes-arc-color-resolved)",
+              fillOpacity: round2(minutesArcOpacity ?? 1)
+            }
+          ),
+          showSecArc && /* @__PURE__ */ React.createElement(
+            "path",
+            {
+              d: geometry.sectorPath(
+                secondAngleFromDate(parseTimeValue(secondsArcFrom) ?? null, timezone2),
+                secondAngle,
+                calculatedSecondHandLength,
+                secondsArcDirection
+              ),
+              fill: "var(--clock-seconds-arc-color-resolved)",
+              fillOpacity: round2(secondsArcOpacity ?? 1)
+            }
+          )
+        ),
+        /* @__PURE__ */ React.createElement(
+          ClockFaceStatic,
+          {
+            getStyles,
+            effectiveSize: size,
+            geometry,
+            hourTicksOpacity,
+            minuteTicksOpacity,
+            primaryNumbersOpacity,
+            secondaryNumbersOpacity,
+            hourNumbersDistance,
+            primaryNumbersProps,
+            secondaryNumbersProps
           }
-        })
-      },
-      num
-    );
-  })), (hourHandOpacity ?? defaultProps.hourHandOpacity) !== 0 && /* @__PURE__ */ React.createElement(
-    Box,
-    {
-      ...getStyles("hand", {
-        className: getStyles("hourHand").className,
-        style: {
-          width: Math.round(size * (hourHandSize ?? defaultProps.hourHandSize) * 100) / 100,
-          height: calculatedHourHandLength,
-          opacity: Math.round((hourHandOpacity ?? defaultProps.hourHandOpacity) * 100) / 100,
-          bottom: clockRadius,
-          left: clockRadius,
-          marginLeft: Math.round(-(size * (hourHandSize ?? defaultProps.hourHandSize)) / 2 * 100) / 100,
-          borderRadius: `${Math.round(size * (hourHandSize ?? defaultProps.hourHandSize) * 100) / 100}px`,
-          transform: `rotate(${Math.round(hourAngle * 100) / 100}deg)`
-        }
-      })
-    }
-  ), (minuteHandOpacity ?? defaultProps.minuteHandOpacity) !== 0 && /* @__PURE__ */ React.createElement(
-    Box,
-    {
-      ...getStyles("hand", {
-        className: getStyles("minuteHand").className,
-        style: {
-          width: Math.round(size * (minuteHandSize ?? defaultProps.minuteHandSize) * 100) / 100,
-          height: calculatedMinuteHandLength,
-          opacity: Math.round((minuteHandOpacity ?? defaultProps.minuteHandOpacity) * 100) / 100,
-          bottom: clockRadius,
-          left: clockRadius,
-          marginLeft: Math.round(
-            -(size * (minuteHandSize ?? defaultProps.minuteHandSize)) / 2 * 100
-          ) / 100,
-          borderRadius: `${Math.round(size * (minuteHandSize ?? defaultProps.minuteHandSize) * 100) / 100}px`,
-          transform: `rotate(${Math.round(minuteAngle * 100) / 100}deg)`
-        }
-      })
-    }
-  ), (secondHandOpacity ?? defaultProps.secondHandOpacity) !== 0 && /* @__PURE__ */ React.createElement(
-    Box,
-    {
-      ...getStyles("secondHandContainer", {
-        style: {
-          width: Math.round(size * (secondHandSize ?? defaultProps.secondHandSize) * 100) / 100,
-          height: calculatedSecondHandLength,
-          top: clockRadius - calculatedSecondHandLength,
-          left: clockRadius,
-          marginLeft: Math.round(
-            -(size * (secondHandSize ?? defaultProps.secondHandSize)) / 2 * 100
-          ) / 100,
-          transformOrigin: `${Math.round(size * (secondHandSize ?? defaultProps.secondHandSize) / 2 * 100) / 100}px ${calculatedSecondHandLength}px`,
-          transform: `rotate(${Math.round(secondAngle * 100) / 100}deg)`
-        }
-      })
-    },
-    /* @__PURE__ */ React.createElement(
-      Box,
-      {
-        ...getStyles("secondHand", {
-          style: {
-            width: Math.round(size * (secondHandSize ?? defaultProps.secondHandSize) * 100) / 100,
-            height: calculatedSecondHandLength,
-            opacity: Math.round((secondHandOpacity ?? defaultProps.secondHandOpacity) * 100) / 100
+        ),
+        (hourHandOpacity ?? defaultProps.hourHandOpacity) !== 0 && (renderHourHand ? renderHourHand({
+          angle: handAngles.hour,
+          length: calculatedHourHandLength,
+          width: round2(size * (hourHandSize ?? defaultProps.hourHandSize)),
+          centerX: geometry.centerX,
+          centerY: geometry.centerY,
+          clockSize: size
+        }) : /* @__PURE__ */ React.createElement(
+          Box,
+          {
+            ...getStyles("hand", {
+              className: getStyles("hourHand").className,
+              style: {
+                width: round2(size * (hourHandSize ?? defaultProps.hourHandSize)),
+                height: calculatedHourHandLength,
+                opacity: round2(hourHandOpacity ?? defaultProps.hourHandOpacity),
+                bottom: centerY,
+                left: centerX,
+                marginLeft: round2(-(size * (hourHandSize ?? defaultProps.hourHandSize)) / 2),
+                borderRadius: `${round2(size * (hourHandSize ?? defaultProps.hourHandSize))}px`,
+                transform: `rotate(${handAngles.hour}deg)`,
+                ...transitionStyle
+              }
+            })
           }
-        })
-      }
-    ),
-    /* @__PURE__ */ React.createElement(
-      Box,
-      {
-        ...getStyles("secondHandCounterweight", {
-          style: {
-            width: Math.round(size * 6e-3 * 3 * 100) / 100,
-            opacity: Math.round((secondHandOpacity ?? defaultProps.secondHandOpacity) * 100) / 100,
-            left: Math.round(
-              size * (secondHandSize ?? defaultProps.secondHandSize) / 2 - size * 6e-3 * 3 / 2
-            )
+        )),
+        (minuteHandOpacity ?? defaultProps.minuteHandOpacity) !== 0 && (renderMinuteHand ? renderMinuteHand({
+          angle: handAngles.minute,
+          length: calculatedMinuteHandLength,
+          width: round2(size * (minuteHandSize ?? defaultProps.minuteHandSize)),
+          centerX: geometry.centerX,
+          centerY: geometry.centerY,
+          clockSize: size
+        }) : /* @__PURE__ */ React.createElement(
+          Box,
+          {
+            ...getStyles("hand", {
+              className: getStyles("minuteHand").className,
+              style: {
+                width: round2(size * (minuteHandSize ?? defaultProps.minuteHandSize)),
+                height: calculatedMinuteHandLength,
+                opacity: round2(minuteHandOpacity ?? defaultProps.minuteHandOpacity),
+                bottom: centerY,
+                left: centerX,
+                marginLeft: round2(
+                  -(size * (minuteHandSize ?? defaultProps.minuteHandSize)) / 2
+                ),
+                borderRadius: `${round2(size * (minuteHandSize ?? defaultProps.minuteHandSize))}px`,
+                transform: `rotate(${handAngles.minute}deg)`,
+                ...transitionStyle
+              }
+            })
           }
-        })
-      }
+        )),
+        (secondHandOpacity ?? defaultProps.secondHandOpacity) !== 0 && (renderSecondHand ? renderSecondHand({
+          angle: handAngles.second,
+          length: calculatedSecondHandLength,
+          width: round2(size * (secondHandSize ?? defaultProps.secondHandSize)),
+          centerX: geometry.centerX,
+          centerY: geometry.centerY,
+          clockSize: size
+        }) : /* @__PURE__ */ React.createElement(
+          Box,
+          {
+            ...getStyles("secondHandContainer", {
+              style: {
+                width: round2(size * (secondHandSize ?? defaultProps.secondHandSize)),
+                height: calculatedSecondHandLength,
+                top: centerY - calculatedSecondHandLength,
+                left: centerX,
+                marginLeft: round2(
+                  -(size * (secondHandSize ?? defaultProps.secondHandSize)) / 2
+                ),
+                transformOrigin: `${round2(size * (secondHandSize ?? defaultProps.secondHandSize) / 2)}px ${calculatedSecondHandLength}px`,
+                transform: `rotate(${handAngles.second}deg)`,
+                ...transitionStyle
+              }
+            })
+          },
+          /* @__PURE__ */ React.createElement(
+            Box,
+            {
+              ...getStyles("secondHand", {
+                style: {
+                  width: round2(size * (secondHandSize ?? defaultProps.secondHandSize)),
+                  height: calculatedSecondHandLength,
+                  opacity: round2(secondHandOpacity ?? defaultProps.secondHandOpacity)
+                }
+              })
+            }
+          ),
+          /* @__PURE__ */ React.createElement(
+            Box,
+            {
+              ...getStyles("secondHandCounterweight", {
+                style: {
+                  width: counterweightWidth,
+                  opacity: round2(secondHandOpacity ?? defaultProps.secondHandOpacity),
+                  left: Math.round(
+                    size * (secondHandSize ?? defaultProps.secondHandSize) / 2 - counterweightWidth / 2
+                  )
+                }
+              })
+            }
+          )
+        )),
+        /* @__PURE__ */ React.createElement(Box, { ...getStyles("centerBlur") }),
+        /* @__PURE__ */ React.createElement(
+          Box,
+          {
+            ...getStyles("centerDot", {
+              style: {
+                width: centerSize,
+                height: centerSize,
+                opacity: round2(secondHandOpacity ?? defaultProps.secondHandOpacity),
+                top: Math.round(centerY - centerSize / 2),
+                left: Math.round(centerX - centerSize / 2)
+              }
+            })
+          }
+        )
+      )
     )
-  ), /* @__PURE__ */ React.createElement(Box, { ...getStyles("centerBlur") }), /* @__PURE__ */ React.createElement(
-    Box,
-    {
-      ...getStyles("centerDot", {
-        style: {
-          width: centerSize,
-          height: centerSize,
-          opacity: Math.round((secondHandOpacity ?? defaultProps.secondHandOpacity) * 100) / 100,
-          top: Math.round(clockRadius - centerSize / 2),
-          left: Math.round(clockRadius - centerSize / 2)
-        }
-      })
-    }
-  ))));
-};
+  );
+});
+RealClock.displayName = "RealClock";
 const Clock = factory((_props, ref) => {
   const props = useProps("Clock", defaultProps, _props);
   const [time, setTime] = useState(/* @__PURE__ */ new Date());
   const [hasMounted, setHasMounted] = useState(false);
   const intervalRef = useRef(null);
+  const rafRef = useRef(null);
   const startTimeRef = useRef(null);
   const realStartTimeRef = useRef(null);
+  const onTimeChange = useCallbackRef(_props.onTimeChange);
+  const containerRef = useRef(null);
+  const [measuredSize, setMeasuredSize] = useState(null);
+  const mergedRef = useMergedRef(ref, containerRef);
   const {
     // Clock-specific props that should not be passed to DOM
     size,
@@ -511,14 +580,13 @@ const Clock = factory((_props, ref) => {
     hourHandOpacity,
     hourHandSize,
     hourHandLength,
-    hourTicksOpacity: _hourTicksOpacity,
-    minuteTicksOpacity: _minuteTicksOpacity,
     hourNumbersDistance,
     primaryNumbersProps,
     secondaryNumbersProps,
     timezone: timezone2,
     running,
     value,
+    ariaLabel,
     withSecondsArc,
     secondsArcFrom,
     secondsArcDirection,
@@ -534,6 +602,17 @@ const Clock = factory((_props, ref) => {
     hoursArcDirection,
     hoursArcColor,
     hoursArcOpacity,
+    sectors,
+    faceContent,
+    animateOnMount,
+    animateOnMountDuration,
+    shape,
+    aspectRatio,
+    borderRadius,
+    onTimeChange: _onTimeChange,
+    renderHourHand,
+    renderMinuteHand,
+    renderSecondHand,
     // Styles API props
     classNames,
     style,
@@ -555,7 +634,7 @@ const Clock = factory((_props, ref) => {
     vars,
     varsResolver
   });
-  const effectiveSize = Math.round(
+  const effectiveSize = size === "auto" ? measuredSize ?? 400 : Math.round(
     px(
       getSize(
         typeof size === "string" && size in defaultClockSizes ? defaultClockSizes[size] : size || defaultProps.size,
@@ -563,9 +642,34 @@ const Clock = factory((_props, ref) => {
       )
     )
   );
+  const geometry = useMemo(
+    () => createGeometry(effectiveSize, shape, { aspectRatio, borderRadius }),
+    [effectiveSize, shape, aspectRatio, borderRadius]
+  );
   useEffect(() => {
     setHasMounted(true);
   }, []);
+  useEffect(() => {
+    if (size !== "auto" || !hasMounted) {
+      return;
+    }
+    const element = containerRef.current;
+    if (!element || typeof ResizeObserver === "undefined") {
+      return;
+    }
+    const observer = new ResizeObserver((entries) => {
+      const entry = entries[0];
+      if (entry) {
+        const { width, height } = entry.contentRect;
+        const newSize = Math.round(Math.min(width, height));
+        if (newSize > 0) {
+          setMeasuredSize(newSize);
+        }
+      }
+    });
+    observer.observe(element);
+    return () => observer.disconnect();
+  }, [size, hasMounted]);
   const getEffectiveTime = () => {
     const parsedValue = parseTimeValue(value);
     if (!running) {
@@ -586,6 +690,10 @@ const Clock = factory((_props, ref) => {
       clearInterval(intervalRef.current);
       intervalRef.current = null;
     }
+    if (rafRef.current !== null) {
+      cancelAnimationFrame(rafRef.current);
+      rafRef.current = null;
+    }
     if (!running) {
       return;
     }
@@ -597,122 +705,179 @@ const Clock = factory((_props, ref) => {
       startTimeRef.current = null;
       realStartTimeRef.current = null;
     }
-    let interval = 1e3;
-    switch (secondHandBehavior) {
-      case "smooth":
-        interval = 16;
-        break;
-      case "tick-half":
-        interval = 500;
-        break;
-      case "tick-high-freq":
-        interval = 125;
-        break;
-      case "tick":
-      default:
-        interval = 1e3;
-        break;
-    }
+    const fireOnTimeChange = (now) => {
+      const tz = timezone2 && timezone2 !== "" ? dayjs(now).tz(timezone2) : dayjs(now);
+      onTimeChange({
+        hours: tz.hour(),
+        minutes: tz.minute(),
+        seconds: tz.second(),
+        milliseconds: tz.millisecond()
+      });
+    };
     const updateTime = () => {
-      setTime(/* @__PURE__ */ new Date());
+      const now = /* @__PURE__ */ new Date();
+      setTime(now);
+      fireOnTimeChange(now);
     };
     updateTime();
-    intervalRef.current = setInterval(updateTime, interval);
+    if (secondHandBehavior === "smooth") {
+      const animate = () => {
+        const now = /* @__PURE__ */ new Date();
+        setTime(now);
+        fireOnTimeChange(now);
+        rafRef.current = requestAnimationFrame(animate);
+      };
+      animate();
+    } else {
+      let interval = 1e3;
+      switch (secondHandBehavior) {
+        case "tick-half":
+          interval = 500;
+          break;
+        case "tick-high-freq":
+          interval = 125;
+          break;
+        case "tick":
+        default:
+          interval = 1e3;
+          break;
+      }
+      intervalRef.current = setInterval(updateTime, interval);
+    }
     return () => {
       if (intervalRef.current) {
         clearInterval(intervalRef.current);
       }
+      if (rafRef.current !== null) {
+        cancelAnimationFrame(rafRef.current);
+      }
     };
-  }, [running, value, secondHandBehavior, secondHandOpacity]);
+  }, [running, value, secondHandBehavior, timezone2]);
   if (!hasMounted) {
-    return /* @__PURE__ */ React.createElement(Box, { ...getStyles("root"), ref, ...others }, /* @__PURE__ */ React.createElement(Box, { ...getStyles("clockContainer") }, /* @__PURE__ */ React.createElement(Box, { ...getStyles("glassWrapper") }, /* @__PURE__ */ React.createElement(Box, { ...getStyles("clockFace") }, /* @__PURE__ */ React.createElement(Box, { ...getStyles("hourMarks") }, (hourTicksOpacity || 1) !== 0 && Array.from({ length: 12 }, (_, i) => /* @__PURE__ */ React.createElement(
+    return /* @__PURE__ */ React.createElement(
       Box,
       {
-        key: `hour-tick-${i}`,
-        ...getStyles("hourTick", {
-          style: {
-            top: Math.round(effectiveSize * 0.028),
-            left: "50%",
-            transformOrigin: `50% ${Math.round(effectiveSize / 2) - Math.round(effectiveSize * 0.028)}px`,
-            transform: `translateX(-50%) rotate(${i * 30}deg)`
-          }
-        })
-      }
-    )), (minuteTicksOpacity || 1) !== 0 && Array.from({ length: 60 }, (_, i) => {
-      if (i % 5 === 0) {
-        return null;
-      }
-      return /* @__PURE__ */ React.createElement(
+        ...getStyles("root", {
+          style: size === "auto" ? { width: "100%", height: "100%", "--clock-size": `${effectiveSize}px` } : { width: geometry.width, height: geometry.height }
+        }),
+        ref: mergedRef,
+        role: "img",
+        "aria-label": ariaLabel || "Clock",
+        ...others
+      },
+      /* @__PURE__ */ React.createElement(
         Box,
         {
-          key: `minute-tick-${i}`,
-          ...getStyles("minuteTick", {
-            style: {
-              top: Math.round(effectiveSize * 0.028),
-              left: "50%",
-              transformOrigin: `50% ${Math.round(effectiveSize / 2) - Math.round(effectiveSize * 0.028)}px`,
-              transform: `translateX(-50%) rotate(${i * 6}deg)`
-            }
-          })
-        }
-      );
-    }), (primaryNumbersOpacity || 1) !== 0 && [12, 3, 6, 9].map((num) => {
-      const i = num === 12 ? 0 : num;
-      const angle = (i * 30 - 90) * (Math.PI / 180);
-      const clockRadius = Math.round(effectiveSize / 2);
-      const numberRadius = Math.round(clockRadius * (hourNumbersDistance || 0.75));
-      const x = Math.round(clockRadius + Math.cos(angle) * numberRadius);
-      const y = Math.round(clockRadius + Math.sin(angle) * numberRadius);
-      return /* @__PURE__ */ React.createElement(
-        Text,
-        {
-          key: `primary-number-${num}`,
-          ...primaryNumbersProps,
-          ...getStyles("primaryNumber", {
-            className: getStyles("number").className,
-            style: {
-              left: x,
-              top: y
-            }
-          })
-        },
-        num
-      );
-    }), (secondaryNumbersOpacity || 1) !== 0 && [1, 2, 4, 5, 7, 8, 10, 11].map((num) => {
-      const i = num;
-      const angle = (i * 30 - 90) * (Math.PI / 180);
-      const clockRadius = Math.round(effectiveSize / 2);
-      const numberRadius = Math.round(clockRadius * (hourNumbersDistance || 0.75));
-      const x = Math.round(clockRadius + Math.cos(angle) * numberRadius);
-      const y = Math.round(clockRadius + Math.sin(angle) * numberRadius);
-      return /* @__PURE__ */ React.createElement(
-        Text,
-        {
-          key: `secondary-number-${num}`,
-          ...secondaryNumbersProps,
-          ...getStyles("secondaryNumber", {
-            className: getStyles("number").className,
+          ...getStyles("clockContainer", {
             style: {
-              left: x,
-              top: y
+              width: geometry.width,
+              height: geometry.height
             }
           })
         },
-        num
-      );
-    }))))));
+        /* @__PURE__ */ React.createElement(
+          Box,
+          {
+            ...getStyles("glassWrapper", {
+              style: { width: geometry.width, height: geometry.height }
+            })
+          },
+          /* @__PURE__ */ React.createElement(
+            Box,
+            {
+              ...getStyles("clockFace", {
+                style: {
+                  width: geometry.width,
+                  height: geometry.height,
+                  borderRadius: geometry.borderRadius(),
+                  clipPath: geometry.clipPath()
+                }
+              })
+            },
+            faceContent && /* @__PURE__ */ React.createElement(Box, { ...getStyles("faceContent") }, faceContent),
+            /* @__PURE__ */ React.createElement(
+              ClockFaceStatic,
+              {
+                getStyles,
+                effectiveSize,
+                geometry,
+                hourTicksOpacity,
+                minuteTicksOpacity,
+                primaryNumbersOpacity,
+                secondaryNumbersOpacity,
+                hourNumbersDistance,
+                primaryNumbersProps,
+                secondaryNumbersProps
+              }
+            )
+          )
+        )
+      )
+    );
   }
   const effectiveTime = getEffectiveTime();
-  return /* @__PURE__ */ React.createElement(Box, { ...getStyles("root"), ref, ...others }, /* @__PURE__ */ React.createElement(
-    RealClock,
+  const timezoneTime = timezone2 && timezone2 !== "" ? dayjs(effectiveTime).tz(timezone2) : dayjs(effectiveTime);
+  const computedAriaLabel = ariaLabel || `Clock showing ${String(timezoneTime.hour()).padStart(2, "0")}:${String(timezoneTime.minute()).padStart(2, "0")}:${String(timezoneTime.second()).padStart(2, "0")}`;
+  return /* @__PURE__ */ React.createElement(
+    Box,
     {
-      time: effectiveTime,
-      getStyles,
-      effectiveSize,
-      ...props
-    }
-  ));
+      ...getStyles("root", {
+        style: size === "auto" ? { width: "100%", height: "100%", "--clock-size": `${effectiveSize}px` } : { width: geometry.width, height: geometry.height }
+      }),
+      ref: mergedRef,
+      role: "img",
+      "aria-label": computedAriaLabel,
+      ...others
+    },
+    /* @__PURE__ */ React.createElement(
+      RealClock,
+      {
+        time: effectiveTime,
+        getStyles,
+        effectiveSize,
+        geometry,
+        timezone: timezone2,
+        hourHandSize,
+        minuteHandSize,
+        secondHandSize,
+        hourHandLength,
+        minuteHandLength,
+        secondHandLength,
+        secondHandBehavior,
+        secondHandOpacity,
+        minuteHandOpacity,
+        hourHandOpacity,
+        hourTicksOpacity,
+        minuteTicksOpacity,
+        primaryNumbersOpacity,
+        secondaryNumbersOpacity,
+        hourNumbersDistance,
+        primaryNumbersProps,
+        secondaryNumbersProps,
+        withSecondsArc,
+        secondsArcFrom,
+        secondsArcDirection,
+        secondsArcOpacity,
+        withMinutesArc,
+        minutesArcFrom,
+        minutesArcDirection,
+        minutesArcOpacity,
+        withHoursArc,
+        hoursArcFrom,
+        hoursArcDirection,
+        hoursArcOpacity,
+        sectors,
+        faceContent,
+        animateOnMount,
+        animateOnMountDuration,
+        renderHourHand,
+        renderMinuteHand,
+        renderSecondHand
+      }
+    )
+  );
 });
+Clock.Digital = ClockDigital;
 Clock.classes = classes;
 Clock.displayName = "Clock";