@gfazioli/mantine-clock 3.0.0 → 3.1.0

package/dist/esm/Clock.mjs

@@ -1,34 +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, useEffect, useRef, useMemo } from 'react';
-import { createVarsResolver, px, getSize, Box, Text, factory, useProps, useStyles, parseThemeColor } 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 { hourAngleFromDate, minuteAngleFromDate, secondAngleFromDate, createGeometry } from './geometry.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 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,
-  minuteHandSize: 0.011,
-  secondHandSize: 6e-3,
-  hourHandLength: 0.4,
-  minuteHandLength: 0.57,
-  secondHandLength: 0.68,
-  secondHandOpacity: 1,
-  minuteHandOpacity: 1,
-  hourHandOpacity: 1,
-  secondHandBehavior: "tick",
-  running: true
-};
+dayjs.extend(timezone);
+const defaultProps = defaultClockProps;
 const defaultClockSizes = {
   xs: 100,
   sm: 200,
@@ -36,513 +22,29 @@ const defaultClockSizes = {
   lg: 480,
   xl: 512
 };
-const buildCssVars = (theme, clockSizePx, props) => {
+const varsResolver = createVarsResolver((theme, 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;
-  }
-  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;
+    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 parsed = new Date(value);
-    if (!isNaN(parsed.getTime())) {
-      return parsed;
-    }
-  }
-  return null;
-};
-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,
-    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,
-    renderHourHand,
-    renderMinuteHand,
-    renderSecondHand,
-    sectors,
-    faceContent,
-    animateOnMount,
-    animateOnMountDuration
-  } = 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-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":
-      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 { centerX, centerY } = geometry;
-  const calculatedHourHandLength = geometry.handLength(
-    hourHandLength ?? defaultProps.hourHandLength
-  );
-  const calculatedMinuteHandLength = geometry.handLength(
-    minuteHandLength ?? defaultProps.minuteHandLength
-  );
-  const calculatedSecondHandLength = geometry.handLength(
-    secondHandLength ?? defaultProps.secondHandLength
-  );
-  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;
-  const counterweightWidth = round2(
-    size * (secondHandSize ?? defaultProps.secondHandSize) * COUNTERWEIGHT_MULTIPLIER
-  );
-  return /* @__PURE__ */ React.createElement(
-    Box,
-    {
-      ...getStyles("clockContainer", {
-        style: {
-          width: geometry.width,
-          height: geometry.height
-        }
-      })
-    },
-    /* @__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),
-        (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
-          }
-        ),
-        (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
-              }
-            })
-          }
-        )),
-        (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)
-              }
-            })
-          }
-        )
-      )
-    )
-  );
+  };
 });
-RealClock.displayName = "RealClock";
 const Clock = factory((_props, ref) => {
   const props = useProps("Clock", defaultProps, _props);
   const [time, setTime] = useState(/* @__PURE__ */ new Date());
@@ -634,10 +136,14 @@ const Clock = factory((_props, ref) => {
     vars,
     varsResolver
   });
-  const effectiveSize = size === "auto" ? measuredSize ?? 400 : 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"
       )
     )
@@ -650,7 +156,7 @@ const Clock = factory((_props, ref) => {
     setHasMounted(true);
   }, []);
   useEffect(() => {
-    if (size !== "auto" || !hasMounted) {
+    if (!isAutoSize || !hasMounted) {
       return;
     }
     const element = containerRef.current;
@@ -669,7 +175,7 @@ const Clock = factory((_props, ref) => {
     });
     observer.observe(element);
     return () => observer.disconnect();
-  }, [size, hasMounted]);
+  }, [isAutoSize, hasMounted]);
   const getEffectiveTime = () => {
     const parsedValue = parseTimeValue(value);
     if (!running) {
@@ -758,7 +264,10 @@ const Clock = factory((_props, ref) => {
       Box,
       {
         ...getStyles("root", {
-          style: size === "auto" ? { width: "100%", height: "100%", "--clock-size": `${effectiveSize}px` } : { width: geometry.width, height: geometry.height }
+          style: {
+            ...{ "--clock-size": `${effectiveSize}px` },
+            ...isAutoSize ? { width: "100%", height: "100%" } : { width: geometry.width, height: geometry.height }
+          }
         }),
         ref: mergedRef,
         role: "img",
@@ -822,7 +331,10 @@ const Clock = factory((_props, ref) => {
     Box,
     {
       ...getStyles("root", {
-        style: size === "auto" ? { width: "100%", height: "100%", "--clock-size": `${effectiveSize}px` } : { width: geometry.width, height: geometry.height }
+        style: {
+          ...{ "--clock-size": `${effectiveSize}px` },
+          ...isAutoSize ? { width: "100%", height: "100%" } : { width: geometry.width, height: geometry.height }
+        }
       }),
       ref: mergedRef,
       role: "img",