@gfazioli/mantine-clock 2.1.17 → 3.1.0

package/dist/esm/Clock.mjs

@@ -1,26 +1,20 @@
 'use client';
 import dayjs from 'dayjs';
-import timezonePlugin from 'dayjs/plugin/timezone';
+import timezone 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, useRef, useMemo, useEffect } from 'react';
+import { createVarsResolver, factory, useProps, useStyles, useMatches, px, getSize, Box, parseThemeColor } from '@mantine/core';
+import { useCallbackRef, useMergedRef } from '@mantine/hooks';
+import { round2, defaultClockProps, parseTimeValue } from './clock-utils.mjs';
+import { ClockDigital } from './ClockDigital.mjs';
+import { ClockFaceStatic } from './ClockFaceStatic.mjs';
+import { createGeometry } from './geometry.mjs';
+import { RealClock } from './RealClock.mjs';
 import classes from './Clock.module.css.mjs';
 
 dayjs.extend(utc);
-dayjs.extend(timezonePlugin);
-const defaultProps = {
-  size: 400,
-  hourHandSize: 0.017,
-  minuteHandSize: 0.011,
-  secondHandSize: 6e-3,
-  hourHandLength: 0.4,
-  minuteHandLength: 0.57,
-  secondHandLength: 0.68,
-  secondHandOpacity: 1,
-  minuteHandOpacity: 1,
-  hourHandOpacity: 1,
-  running: true
-};
+dayjs.extend(timezone);
+const defaultProps = defaultClockProps;
 const defaultClockSizes = {
   xs: 100,
   sm: 200,
@@ -28,464 +22,41 @@ 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 parseTimeValue = (value) => {
-  if (!value) {
-    return null;
-  }
-  if (value instanceof Date) {
-    return value;
-  }
-  if (dayjs.isDayjs(value)) {
-    return value.toDate();
-  }
-  if (typeof value === "string") {
-    const timeRegex = /^(\d{1,2}):(\d{1,2})(?::(\d{1,2}))?$/;
-    const match = value.match(timeRegex);
-    if (match) {
-      const hours = parseInt(match[1], 10);
-      const minutes = parseInt(match[2], 10);
-      const seconds = parseInt(match[3] || "0", 10);
-      const date = /* @__PURE__ */ new Date();
-      date.setHours(hours, minutes, seconds, 0);
-      return date;
-    }
-    const parsed = new Date(value);
-    if (!isNaN(parsed.getTime())) {
-      return parsed;
-    }
-  }
-  return null;
-};
-const RealClock = (props) => {
-  const {
-    time,
-    timezone: timezone2,
-    getStyles,
-    effectiveSize,
-    hourHandSize,
-    minuteHandSize,
-    secondHandSize,
-    hourHandLength,
-    minuteHandLength,
-    secondHandLength,
-    secondHandBehavior,
-    secondHandOpacity,
-    minuteHandOpacity,
-    hourHandOpacity,
-    hourTicksOpacity,
-    minuteTicksOpacity,
-    primaryNumbersOpacity,
-    secondaryNumbersOpacity,
-    hourNumbersDistance = 0.75,
-    // Default distance for hour numbers
-    primaryNumbersProps,
-    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;
-  const minutes = timezoneTime.minute();
-  const seconds = timezoneTime.second();
-  const milliseconds = timezoneTime.millisecond();
-  const hourAngle = hours * 30 + minutes * 0.5;
-  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;
-    case "tick-high-freq":
-      secondAngle = (seconds + Math.floor(milliseconds / 125) * 0.125) * 6;
-      break;
-    case "smooth":
-    default:
-      secondAngle = (seconds + milliseconds / 1e3) * 6;
-      break;
-  }
-  const size = effectiveSize;
-  const clockRadius = Math.round(size / 2);
-  const numberRadius = Math.round(clockRadius * hourNumbersDistance);
-  const calculatedHourHandLength = Math.round(
-    clockRadius * (hourHandLength ?? defaultProps.hourHandLength)
-  );
-  const calculatedMinuteHandLength = Math.round(
-    clockRadius * (minuteHandLength ?? defaultProps.minuteHandLength)
-  );
-  const calculatedSecondHandLength = Math.round(
-    clockRadius * (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 varsResolver = createVarsResolver((theme, props) => {
+  const c = (color) => parseThemeColor({ color, theme }).value;
+  return {
+    root: {
+      "--clock-size": void 0,
+      "--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 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(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(
-    Box,
-    {
-      key: `hour-tick-${i}`,
-      ...getStyles("hourTick", {
-        style: {
-          top: tickOffset,
-          left: "50%",
-          transformOrigin: `50% ${clockRadius - tickOffset}px`,
-          transform: `translateX(-50%) rotate(${i * 30}deg)`
-        }
-      })
-    }
-  )), minuteTicksOpacity !== 0 && Array.from({ length: 60 }, (_, i) => {
-    if (i % 5 === 0) {
-      return null;
-    }
-    return /* @__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
-          }
-        })
-      },
-      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
-          }
-        })
-      },
-      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
-          }
-        })
-      }
-    ),
-    /* @__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
-            )
-          }
-        })
-      }
-    )
-  ), /* @__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)
-        }
-      })
-    }
-  ))));
-};
+});
 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 +82,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 +104,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,17 +136,46 @@ const Clock = factory((_props, ref) => {
     vars,
     varsResolver
   });
-  const effectiveSize = Math.round(
+  const resolvedSize = useMatches(
+    typeof size === "object" && size !== null && !Array.isArray(size) ? size : { base: size ?? defaultProps.size }
+  );
+  const isAutoSize = resolvedSize === "auto";
+  const effectiveSize = isAutoSize ? measuredSize ?? 400 : Math.round(
     px(
       getSize(
-        typeof size === "string" && size in defaultClockSizes ? defaultClockSizes[size] : size || defaultProps.size,
+        typeof resolvedSize === "string" && resolvedSize in defaultClockSizes ? defaultClockSizes[resolvedSize] : resolvedSize || defaultProps.size,
         "clock-size"
       )
     )
   );
+  const geometry = useMemo(
+    () => createGeometry(effectiveSize, shape, { aspectRatio, borderRadius }),
+    [effectiveSize, shape, aspectRatio, borderRadius]
+  );
   useEffect(() => {
     setHasMounted(true);
   }, []);
+  useEffect(() => {
+    if (!isAutoSize || !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();
+  }, [isAutoSize, hasMounted]);
   const getEffectiveTime = () => {
     const parsedValue = parseTimeValue(value);
     if (!running) {
@@ -586,6 +196,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 +211,185 @@ 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", {
+        ...getStyles("root", {
           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)`
+            ...{ "--clock-size": `${effectiveSize}px` },
+            ...isAutoSize ? { width: "100%", height: "100%" } : { width: geometry.width, height: geometry.height }
           }
-        })
-      }
-    )), (minuteTicksOpacity || 1) !== 0 && Array.from({ length: 60 }, (_, i) => {
-      if (i % 5 === 0) {
-        return null;
-      }
-      return /* @__PURE__ */ React.createElement(
+        }),
+        ref: mergedRef,
+        role: "img",
+        "aria-label": ariaLabel || "Clock",
+        ...others
+      },
+      /* @__PURE__ */ React.createElement(
         Box,
         {
-          key: `minute-tick-${i}`,
-          ...getStyles("minuteTick", {
+          ...getStyles("clockContainer", {
             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
+              width: geometry.width,
+              height: geometry.height
             }
           })
         },
-        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,
-            style: {
-              left: x,
-              top: y
-            }
-          })
-        },
-        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: {
+          ...{ "--clock-size": `${effectiveSize}px` },
+          ...isAutoSize ? { width: "100%", height: "100%" } : { 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";