@gfazioli/mantine-clock 1.0.0

package/dist/esm/Clock.mjs

@@ -0,0 +1,571 @@
+'use client';
+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 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
+};
+const defaultClockSizes = {
+  xs: 100,
+  sm: 200,
+  md: 400,
+  lg: 480,
+  xl: 512
+};
+const varsResolver = createVarsResolver(
+  (theme, {
+    size,
+    color,
+    hourTicksColor,
+    hourTicksOpacity,
+    minuteTicksColor,
+    minuteTicksOpacity,
+    primaryNumbersColor,
+    primaryNumbersOpacity,
+    secondaryNumbersColor,
+    secondaryNumbersOpacity,
+    secondHandColor,
+    minuteHandColor,
+    hourHandColor
+  }) => {
+    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
+      }
+    };
+  }
+);
+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
+  } = 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);
+  return /* @__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 !== 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 startTimeRef = useRef(null);
+  const realStartTimeRef = useRef(null);
+  const {
+    // Clock-specific props that should not be passed to DOM
+    size,
+    color,
+    hourTicksColor,
+    hourTicksOpacity,
+    minuteTicksColor,
+    minuteTicksOpacity,
+    primaryNumbersColor,
+    primaryNumbersOpacity,
+    secondaryNumbersColor,
+    secondaryNumbersOpacity,
+    secondHandBehavior,
+    secondHandColor,
+    secondHandOpacity,
+    secondHandLength,
+    secondHandSize,
+    minuteHandColor,
+    minuteHandOpacity,
+    minuteHandSize,
+    minuteHandLength,
+    hourHandColor,
+    hourHandOpacity,
+    hourHandSize,
+    hourHandLength,
+    hourTicksOpacity: _hourTicksOpacity,
+    minuteTicksOpacity: _minuteTicksOpacity,
+    hourNumbersDistance,
+    primaryNumbersProps,
+    secondaryNumbersProps,
+    timezone: timezone2,
+    running,
+    value,
+    // Styles API props
+    classNames,
+    style,
+    styles,
+    unstyled,
+    vars,
+    className,
+    ...others
+  } = props;
+  const getStyles = useStyles({
+    name: "Clock",
+    props,
+    classes,
+    className,
+    style,
+    classNames,
+    styles,
+    unstyled,
+    vars,
+    varsResolver
+  });
+  const effectiveSize = Math.round(
+    px(
+      getSize(
+        typeof size === "string" && size in defaultClockSizes ? defaultClockSizes[size] : size || defaultProps.size,
+        "clock-size"
+      )
+    )
+  );
+  useEffect(() => {
+    setHasMounted(true);
+  }, []);
+  const getEffectiveTime = () => {
+    const parsedValue = parseTimeValue(value);
+    if (!running) {
+      if (parsedValue) {
+        return parsedValue;
+      }
+      return time;
+    }
+    if (parsedValue && startTimeRef.current && realStartTimeRef.current) {
+      const now = /* @__PURE__ */ new Date();
+      const elapsed = now.getTime() - realStartTimeRef.current.getTime();
+      return new Date(startTimeRef.current.getTime() + elapsed);
+    }
+    return time;
+  };
+  useEffect(() => {
+    if (intervalRef.current) {
+      clearInterval(intervalRef.current);
+      intervalRef.current = null;
+    }
+    if (!running) {
+      return;
+    }
+    const parsedValue = parseTimeValue(value);
+    if (parsedValue) {
+      startTimeRef.current = parsedValue;
+      realStartTimeRef.current = /* @__PURE__ */ new Date();
+    } else {
+      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 updateTime = () => {
+      setTime(/* @__PURE__ */ new Date());
+    };
+    updateTime();
+    intervalRef.current = setInterval(updateTime, interval);
+    return () => {
+      if (intervalRef.current) {
+        clearInterval(intervalRef.current);
+      }
+    };
+  }, [running, value, secondHandBehavior, secondHandOpacity]);
+  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(
+      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(
+        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,
+            style: {
+              left: x,
+              top: y
+            }
+          })
+        },
+        num
+      );
+    }))))));
+  }
+  const effectiveTime = getEffectiveTime();
+  return /* @__PURE__ */ React.createElement(Box, { ...getStyles("root"), ref, ...others }, /* @__PURE__ */ React.createElement(
+    RealClock,
+    {
+      time: effectiveTime,
+      getStyles,
+      effectiveSize,
+      ...props
+    }
+  ));
+});
+Clock.classes = classes;
+Clock.displayName = "Clock";
+
+export { Clock, defaultProps };
+//# sourceMappingURL=Clock.mjs.map