@gfazioli/mantine-clock 3.0.0 → 3.1.0

package/README.md

@@ -229,11 +229,16 @@ function ControllableCountdown() {
 
 - **Real-time Updates**: Automatic time synchronization with configurable frequency
 - **Timezone Support**: Global timezone compatibility with IANA timezone database
-- **Customizable Styling**: Full control over appearance and theming
+- **Clock.Digital**: Compound component for digital clock display with AM/PM, date, and custom separators
+- **Responsive Size**: Breakpoint-based responsive sizing (`{ base: "sm", md: "lg" }`) using Mantine's native CSS media queries
+- **Clock Shapes**: Circle and rounded-rectangle (Apple Watch style) with configurable aspect ratio
+- **Sector Arcs**: Visual arcs aligned to seconds, minutes, and hours hands
+- **Custom Hand Rendering**: Full control via render props for hour, minute, and second hands
+- **Mount Animation**: Entrance animation from 12:00 to current time
+- **Countdown Timer**: `useClockCountDown` hook with target dates, durations, and completion callbacks
+- **Customizable Styling**: Full control over appearance via Styles API and CSS variables
 - **TypeScript Support**: Complete type definitions for better developer experience
 - **Accessibility**: Built with WCAG compliance and screen reader support
-- **Performance Optimized**: Efficient updates with minimal re-renders
-- **Responsive Design**: Adapts to different screen sizes automatically
 
 ## Sponsor
 

package/dist/cjs/Clock.cjs

@@ -2,35 +2,21 @@
 'use strict';
 
 var dayjs = require('dayjs');
-var timezonePlugin = require('dayjs/plugin/timezone');
+var timezone = require('dayjs/plugin/timezone');
 var utc = require('dayjs/plugin/utc');
 var React = require('react');
 var core = require('@mantine/core');
 var hooks = require('@mantine/hooks');
+var clockUtils = require('./clock-utils.cjs');
 var ClockDigital = require('./ClockDigital.cjs');
+var ClockFaceStatic = require('./ClockFaceStatic.cjs');
 var geometry = require('./geometry.cjs');
+var RealClock = require('./RealClock.cjs');
 var Clock_module = require('./Clock.module.css.cjs');
 
 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 = clockUtils.defaultClockProps;
 const defaultClockSizes = {
   xs: 100,
   sm: 200,
@@ -38,513 +24,29 @@ const defaultClockSizes = {
   lg: 480,
   xl: 512
 };
-const buildCssVars = (theme, clockSizePx, props) => {
+const varsResolver = core.createVarsResolver((theme, props) => {
   const c = (color) => core.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 = core.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(core.px(core.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": clockUtils.round2(props.hourTicksOpacity ?? 1).toString(),
+      "--clock-minute-ticks-color": c(props.minuteTicksColor || ""),
+      "--clock-minute-ticks-opacity": clockUtils.round2(props.minuteTicksOpacity ?? 1).toString(),
+      "--clock-primary-numbers-color": c(props.primaryNumbersColor || ""),
+      "--clock-primary-numbers-opacity": clockUtils.round2(props.primaryNumbersOpacity ?? 1).toString(),
+      "--clock-secondary-numbers-color": c(props.secondaryNumbersColor || ""),
+      "--clock-secondary-numbers-opacity": clockUtils.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(core.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(core.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(core.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(
-        core.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(
-        core.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: geometry$1,
-    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] = React.useState(
-    animateOnMount ? "initial" : "done"
-  );
-  React.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$1;
-  const calculatedHourHandLength = geometry$1.handLength(
-    hourHandLength ?? defaultProps.hourHandLength
-  );
-  const calculatedMinuteHandLength = geometry$1.handLength(
-    minuteHandLength ?? defaultProps.minuteHandLength
-  );
-  const calculatedSecondHandLength = geometry$1.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(
-    core.Box,
-    {
-      ...getStyles("clockContainer", {
-        style: {
-          width: geometry$1.width,
-          height: geometry$1.height
-        }
-      })
-    },
-    /* @__PURE__ */ React.createElement(
-      core.Box,
-      {
-        ...getStyles("glassWrapper", {
-          style: { width: geometry$1.width, height: geometry$1.height }
-        })
-      },
-      /* @__PURE__ */ React.createElement(
-        core.Box,
-        {
-          ...getStyles("clockFace", {
-            style: {
-              width: geometry$1.width,
-              height: geometry$1.height,
-              borderRadius: geometry$1.borderRadius(),
-              clipPath: geometry$1.clipPath()
-            }
-          })
-        },
-        faceContent && /* @__PURE__ */ React.createElement(core.Box, { ...getStyles("faceContent") }, faceContent),
-        (showSecArc || showMinArc || showHrArc || sectors && sectors.length > 0) && /* @__PURE__ */ React.createElement(
-          "svg",
-          {
-            ...getStyles("arcsLayer", {
-              style: { width: geometry$1.width, height: geometry$1.height }
-            }),
-            viewBox: `0 0 ${geometry$1.width} ${geometry$1.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 = geometry.hourAngleFromDate(fromDate, timezone2);
-            const endAngle = geometry.hourAngleFromDate(toDate, timezone2);
-            const sectorRadius = calculatedMinuteHandLength;
-            return /* @__PURE__ */ React.createElement(
-              "path",
-              {
-                key: `sector-${idx}`,
-                d: geometry$1.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$1.sectorPath(
-                geometry.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$1.sectorPath(
-                geometry.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$1.sectorPath(
-                geometry.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: geometry$1,
-            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$1.centerX,
-          centerY: geometry$1.centerY,
-          clockSize: size
-        }) : /* @__PURE__ */ React.createElement(
-          core.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$1.centerX,
-          centerY: geometry$1.centerY,
-          clockSize: size
-        }) : /* @__PURE__ */ React.createElement(
-          core.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$1.centerX,
-          centerY: geometry$1.centerY,
-          clockSize: size
-        }) : /* @__PURE__ */ React.createElement(
-          core.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(
-            core.Box,
-            {
-              ...getStyles("secondHand", {
-                style: {
-                  width: round2(size * (secondHandSize ?? defaultProps.secondHandSize)),
-                  height: calculatedSecondHandLength,
-                  opacity: round2(secondHandOpacity ?? defaultProps.secondHandOpacity)
-                }
-              })
-            }
-          ),
-          /* @__PURE__ */ React.createElement(
-            core.Box,
-            {
-              ...getStyles("secondHandCounterweight", {
-                style: {
-                  width: counterweightWidth,
-                  opacity: round2(secondHandOpacity ?? defaultProps.secondHandOpacity),
-                  left: Math.round(
-                    size * (secondHandSize ?? defaultProps.secondHandSize) / 2 - counterweightWidth / 2
-                  )
-                }
-              })
-            }
-          )
-        )),
-        /* @__PURE__ */ React.createElement(core.Box, { ...getStyles("centerBlur") }),
-        /* @__PURE__ */ React.createElement(
-          core.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 = core.factory((_props, ref) => {
   const props = core.useProps("Clock", defaultProps, _props);
   const [time, setTime] = React.useState(/* @__PURE__ */ new Date());
@@ -636,10 +138,14 @@ const Clock = core.factory((_props, ref) => {
     vars,
     varsResolver
   });
-  const effectiveSize = size === "auto" ? measuredSize ?? 400 : Math.round(
+  const resolvedSize = core.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(
     core.px(
       core.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"
       )
     )
@@ -652,7 +158,7 @@ const Clock = core.factory((_props, ref) => {
     setHasMounted(true);
   }, []);
   React.useEffect(() => {
-    if (size !== "auto" || !hasMounted) {
+    if (!isAutoSize || !hasMounted) {
       return;
     }
     const element = containerRef.current;
@@ -671,9 +177,9 @@ const Clock = core.factory((_props, ref) => {
     });
     observer.observe(element);
     return () => observer.disconnect();
-  }, [size, hasMounted]);
+  }, [isAutoSize, hasMounted]);
   const getEffectiveTime = () => {
-    const parsedValue = parseTimeValue(value);
+    const parsedValue = clockUtils.parseTimeValue(value);
     if (!running) {
       if (parsedValue) {
         return parsedValue;
@@ -699,7 +205,7 @@ const Clock = core.factory((_props, ref) => {
     if (!running) {
       return;
     }
-    const parsedValue = parseTimeValue(value);
+    const parsedValue = clockUtils.parseTimeValue(value);
     if (parsedValue) {
       startTimeRef.current = parsedValue;
       realStartTimeRef.current = /* @__PURE__ */ new Date();
@@ -760,7 +266,10 @@ const Clock = core.factory((_props, ref) => {
       core.Box,
       {
         ...getStyles("root", {
-          style: size === "auto" ? { width: "100%", height: "100%", "--clock-size": `${effectiveSize}px` } : { width: geometry$1.width, height: geometry$1.height }
+          style: {
+            ...{ "--clock-size": `${effectiveSize}px` },
+            ...isAutoSize ? { width: "100%", height: "100%" } : { width: geometry$1.width, height: geometry$1.height }
+          }
         }),
         ref: mergedRef,
         role: "img",
@@ -798,7 +307,7 @@ const Clock = core.factory((_props, ref) => {
             },
             faceContent && /* @__PURE__ */ React.createElement(core.Box, { ...getStyles("faceContent") }, faceContent),
             /* @__PURE__ */ React.createElement(
-              ClockFaceStatic,
+              ClockFaceStatic.ClockFaceStatic,
               {
                 getStyles,
                 effectiveSize,
@@ -824,7 +333,10 @@ const Clock = core.factory((_props, ref) => {
     core.Box,
     {
       ...getStyles("root", {
-        style: size === "auto" ? { width: "100%", height: "100%", "--clock-size": `${effectiveSize}px` } : { width: geometry$1.width, height: geometry$1.height }
+        style: {
+          ...{ "--clock-size": `${effectiveSize}px` },
+          ...isAutoSize ? { width: "100%", height: "100%" } : { width: geometry$1.width, height: geometry$1.height }
+        }
       }),
       ref: mergedRef,
       role: "img",
@@ -832,7 +344,7 @@ const Clock = core.factory((_props, ref) => {
       ...others
     },
     /* @__PURE__ */ React.createElement(
-      RealClock,
+      RealClock.RealClock,
       {
         time: effectiveTime,
         getStyles,