react-clock - npm Package Compare versions

Comparing version 4.0.0 to 4.1.0

dist/cjs/Clock.js

 "use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports["default"] = Clock;
-var _react = _interopRequireDefault(require("react"));
-var _propTypes = _interopRequireDefault(require("prop-types"));
-var _clsx = _interopRequireDefault(require("clsx"));
-var _dateUtils = require("@wojtekmaj/date-utils");
-var _Hand = _interopRequireDefault(require("./Hand"));
-var _MinuteMark = _interopRequireDefault(require("./MinuteMark"));
-var _HourMark = _interopRequireDefault(require("./HourMark"));
-var _propTypes2 = require("./shared/propTypes");
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
-function Clock(_ref) {
-  var className = _ref.className,
-    formatHour = _ref.formatHour,
-    _ref$hourHandLength = _ref.hourHandLength,
-    hourHandLength = _ref$hourHandLength === void 0 ? 50 : _ref$hourHandLength,
-    hourHandOppositeLength = _ref.hourHandOppositeLength,
-    _ref$hourHandWidth = _ref.hourHandWidth,
-    hourHandWidth = _ref$hourHandWidth === void 0 ? 4 : _ref$hourHandWidth,
-    _ref$hourMarksLength = _ref.hourMarksLength,
-    hourMarksLength = _ref$hourMarksLength === void 0 ? 10 : _ref$hourMarksLength,
-    _ref$hourMarksWidth = _ref.hourMarksWidth,
-    hourMarksWidth = _ref$hourMarksWidth === void 0 ? 3 : _ref$hourMarksWidth,
-    locale = _ref.locale,
-    _ref$minuteHandLength = _ref.minuteHandLength,
-    minuteHandLength = _ref$minuteHandLength === void 0 ? 70 : _ref$minuteHandLength,
-    minuteHandOppositeLength = _ref.minuteHandOppositeLength,
-    _ref$minuteHandWidth = _ref.minuteHandWidth,
-    minuteHandWidth = _ref$minuteHandWidth === void 0 ? 2 : _ref$minuteHandWidth,
-    _ref$minuteMarksLengt = _ref.minuteMarksLength,
-    minuteMarksLength = _ref$minuteMarksLengt === void 0 ? 6 : _ref$minuteMarksLengt,
-    _ref$minuteMarksWidth = _ref.minuteMarksWidth,
-    minuteMarksWidth = _ref$minuteMarksWidth === void 0 ? 1 : _ref$minuteMarksWidth,
-    _ref$renderHourMarks = _ref.renderHourMarks,
-    renderHourMarks = _ref$renderHourMarks === void 0 ? true : _ref$renderHourMarks,
-    _ref$renderMinuteHand = _ref.renderMinuteHand,
-    renderMinuteHand = _ref$renderMinuteHand === void 0 ? true : _ref$renderMinuteHand,
-    _ref$renderMinuteMark = _ref.renderMinuteMarks,
-    renderMinuteMarks = _ref$renderMinuteMark === void 0 ? true : _ref$renderMinuteMark,
-    renderNumbers = _ref.renderNumbers,
-    _ref$renderSecondHand = _ref.renderSecondHand,
-    renderSecondHand = _ref$renderSecondHand === void 0 ? true : _ref$renderSecondHand,
-    _ref$secondHandLength = _ref.secondHandLength,
-    secondHandLength = _ref$secondHandLength === void 0 ? 90 : _ref$secondHandLength,
-    secondHandOppositeLength = _ref.secondHandOppositeLength,
-    _ref$secondHandWidth = _ref.secondHandWidth,
-    secondHandWidth = _ref$secondHandWidth === void 0 ? 1 : _ref$secondHandWidth,
-    _ref$size = _ref.size,
-    size = _ref$size === void 0 ? 150 : _ref$size,
-    value = _ref.value;
-  function renderMinuteMarksFn() {
-    if (!renderMinuteMarks) {
-      return null;
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+var react_1 = __importDefault(require("react"));
+var prop_types_1 = __importDefault(require("prop-types"));
+var clsx_1 = __importDefault(require("clsx"));
+var date_utils_1 = require("@wojtekmaj/date-utils");
+var Hand_1 = __importDefault(require("./Hand"));
+var MinuteMark_1 = __importDefault(require("./MinuteMark"));
+var HourMark_1 = __importDefault(require("./HourMark"));
+var propTypes_1 = require("./shared/propTypes");
+function Clock(_a) {
+    var className = _a.className, formatHour = _a.formatHour, _b = _a.hourHandLength, hourHandLength = _b === void 0 ? 50 : _b, hourHandOppositeLength = _a.hourHandOppositeLength, _c = _a.hourHandWidth, hourHandWidth = _c === void 0 ? 4 : _c, _d = _a.hourMarksLength, hourMarksLength = _d === void 0 ? 10 : _d, _e = _a.hourMarksWidth, hourMarksWidth = _e === void 0 ? 3 : _e, locale = _a.locale, _f = _a.minuteHandLength, minuteHandLength = _f === void 0 ? 70 : _f, minuteHandOppositeLength = _a.minuteHandOppositeLength, _g = _a.minuteHandWidth, minuteHandWidth = _g === void 0 ? 2 : _g, _h = _a.minuteMarksLength, minuteMarksLength = _h === void 0 ? 6 : _h, _j = _a.minuteMarksWidth, minuteMarksWidth = _j === void 0 ? 1 : _j, _k = _a.renderHourMarks, renderHourMarks = _k === void 0 ? true : _k, _l = _a.renderMinuteHand, renderMinuteHand = _l === void 0 ? true : _l, _m = _a.renderMinuteMarks, renderMinuteMarks = _m === void 0 ? true : _m, renderNumbers = _a.renderNumbers, _o = _a.renderSecondHand, renderSecondHand = _o === void 0 ? true : _o, _p = _a.secondHandLength, secondHandLength = _p === void 0 ? 90 : _p, secondHandOppositeLength = _a.secondHandOppositeLength, _q = _a.secondHandWidth, secondHandWidth = _q === void 0 ? 1 : _q, _r = _a.size, size = _r === void 0 ? 150 : _r, value = _a.value;
+    function renderMinuteMarksFn() {
+        if (!renderMinuteMarks) {
+            return null;
+        }
+        var minuteMarks = [];
+        for (var i = 1; i <= 60; i += 1) {
+            var isHourMark = renderHourMarks && !(i % 5);
+            if (!isHourMark) {
+                minuteMarks.push(react_1.default.createElement(MinuteMark_1.default, { key: "minute_".concat(i), angle: i * 6, length: minuteMarksLength, name: "minute", width: minuteMarksWidth }));
+            }
+        }
+        return minuteMarks;
     }
-    var minuteMarks = [];
-    for (var i = 1; i <= 60; i += 1) {
-      var isHourMark = renderHourMarks && !(i % 5);
-      if (!isHourMark) {
-        minuteMarks.push( /*#__PURE__*/_react["default"].createElement(_MinuteMark["default"], {
-          key: "minute_".concat(i),
-          angle: i * 6,
-          length: minuteMarksLength,
-          name: "minute",
-          width: minuteMarksWidth
-        }));
-      }
+    function renderHourMarksFn() {
+        if (!renderHourMarks) {
+            return null;
+        }
+        var hourMarks = [];
+        for (var i = 1; i <= 12; i += 1) {
+            hourMarks.push(react_1.default.createElement(HourMark_1.default, { key: "hour_".concat(i), angle: i * 30, formatHour: formatHour, length: hourMarksLength, locale: locale, name: "hour", number: renderNumbers ? i : undefined, width: hourMarksWidth }));
+        }
+        return hourMarks;
     }
-    return minuteMarks;
-  }
-  function renderHourMarksFn() {
-    if (!renderHourMarks) {
-      return null;
+    function renderFace() {
+        return (react_1.default.createElement("div", { className: "react-clock__face" },
+            renderMinuteMarksFn(),
+            renderHourMarksFn()));
     }
-    var hourMarks = [];
-    for (var i = 1; i <= 12; i += 1) {
-      hourMarks.push( /*#__PURE__*/_react["default"].createElement(_HourMark["default"], {
-        key: "hour_".concat(i),
-        angle: i * 30,
-        formatHour: formatHour,
-        length: hourMarksLength,
-        locale: locale,
-        name: "hour",
-        number: renderNumbers ? i : null,
-        width: hourMarksWidth
-      }));
+    function renderHourHandFn() {
+        var angle = value
+            ? (0, date_utils_1.getHours)(value) * 30 + (0, date_utils_1.getMinutes)(value) / 2 + (0, date_utils_1.getSeconds)(value) / 600
+            : 0;
+        return (react_1.default.createElement(Hand_1.default, { angle: angle, length: hourHandLength, name: "hour", oppositeLength: hourHandOppositeLength, width: hourHandWidth }));
     }
-    return hourMarks;
-  }
-  function renderFace() {
-    return /*#__PURE__*/_react["default"].createElement("div", {
-      className: "react-clock__face"
-    }, renderMinuteMarksFn(), renderHourMarksFn());
-  }
-  function renderHourHandFn() {
-    var angle = value ? (0, _dateUtils.getHours)(value) * 30 + (0, _dateUtils.getMinutes)(value) / 2 + (0, _dateUtils.getSeconds)(value) / 600 : 0;
-    return /*#__PURE__*/_react["default"].createElement(_Hand["default"], {
-      angle: angle,
-      length: hourHandLength,
-      name: "hour",
-      oppositeLength: hourHandOppositeLength,
-      width: hourHandWidth
-    });
-  }
-  function renderMinuteHandFn() {
-    if (!renderMinuteHand) {
-      return null;
+    function renderMinuteHandFn() {
+        if (!renderMinuteHand) {
+            return null;
+        }
+        var angle = value
+            ? (0, date_utils_1.getHours)(value) * 360 + (0, date_utils_1.getMinutes)(value) * 6 + (0, date_utils_1.getSeconds)(value) / 10
+            : 0;
+        return (react_1.default.createElement(Hand_1.default, { angle: angle, length: minuteHandLength, name: "minute", oppositeLength: minuteHandOppositeLength, width: minuteHandWidth }));
     }
-    var angle = value ? (0, _dateUtils.getHours)(value) * 360 + (0, _dateUtils.getMinutes)(value) * 6 + (0, _dateUtils.getSeconds)(value) / 10 : 0;
-    return /*#__PURE__*/_react["default"].createElement(_Hand["default"], {
-      angle: angle,
-      length: minuteHandLength,
-      name: "minute",
-      oppositeLength: minuteHandOppositeLength,
-      width: minuteHandWidth
-    });
-  }
-  function renderSecondHandFn() {
-    if (!renderSecondHand) {
-      return null;
+    function renderSecondHandFn() {
+        if (!renderSecondHand) {
+            return null;
+        }
+        var angle = value ? (0, date_utils_1.getMinutes)(value) * 360 + (0, date_utils_1.getSeconds)(value) * 6 : 0;
+        return (react_1.default.createElement(Hand_1.default, { angle: angle, length: secondHandLength, name: "second", oppositeLength: secondHandOppositeLength, width: secondHandWidth }));
     }
-    var angle = value ? (0, _dateUtils.getMinutes)(value) * 360 + (0, _dateUtils.getSeconds)(value) * 6 : 0;
-    return /*#__PURE__*/_react["default"].createElement(_Hand["default"], {
-      angle: angle,
-      length: secondHandLength,
-      name: "second",
-      oppositeLength: secondHandOppositeLength,
-      width: secondHandWidth
-    });
-  }
-  return /*#__PURE__*/_react["default"].createElement("time", {
-    className: (0, _clsx["default"])('react-clock', className),
-    dateTime: value instanceof Date ? value.toISOString() : value,
-    style: {
-      width: "".concat(size, "px"),
-      height: "".concat(size, "px")
-    }
-  }, renderFace(), renderHourHandFn(), renderMinuteHandFn(), renderSecondHandFn());
+    return (react_1.default.createElement("time", { className: (0, clsx_1.default)('react-clock', className), dateTime: value instanceof Date ? value.toISOString() : value, style: {
+            width: size,
+            height: size,
+        } },
+        renderFace(),
+        renderHourHandFn(),
+        renderMinuteHandFn(),
+        renderSecondHandFn()));
 }
+exports.default = Clock;
 Clock.propTypes = {
-  className: _propTypes["default"].oneOfType([_propTypes["default"].string, _propTypes["default"].arrayOf(_propTypes["default"].string)]),
-  formatHour: _propTypes["default"].func,
-  hourHandLength: _propTypes2.isHandLength,
-  hourHandOppositeLength: _propTypes2.isOppositeHandLength,
-  hourHandWidth: _propTypes2.isHandWidth,
-  hourMarksLength: _propTypes2.isMarkLength,
-  hourMarksWidth: _propTypes2.isMarkWidth,
-  locale: _propTypes["default"].string,
-  minuteHandLength: _propTypes2.isHandLength,
-  minuteHandOppositeLength: _propTypes2.isOppositeHandLength,
-  minuteHandWidth: _propTypes2.isHandWidth,
-  minuteMarksLength: _propTypes2.isMarkLength,
-  minuteMarksWidth: _propTypes2.isMarkWidth,
-  renderHourMarks: _propTypes["default"].bool,
-  renderMinuteHand: _propTypes["default"].bool,
-  renderMinuteMarks: _propTypes["default"].bool,
-  renderNumbers: _propTypes["default"].bool,
-  renderSecondHand: _propTypes["default"].bool,
-  secondHandLength: _propTypes2.isHandLength,
-  secondHandOppositeLength: _propTypes2.isOppositeHandLength,
-  secondHandWidth: _propTypes2.isHandWidth,
-  size: _propTypes["default"].number,
-  value: _propTypes["default"].oneOfType([_propTypes["default"].string, _propTypes["default"].instanceOf(Date)])
-};
+    className: prop_types_1.default.oneOfType([prop_types_1.default.string, prop_types_1.default.arrayOf(prop_types_1.default.string)]),
+    formatHour: prop_types_1.default.func,
+    hourHandLength: propTypes_1.isHandLength,
+    hourHandOppositeLength: propTypes_1.isOppositeHandLength,
+    hourHandWidth: propTypes_1.isHandWidth,
+    hourMarksLength: propTypes_1.isMarkLength,
+    hourMarksWidth: propTypes_1.isMarkWidth,
+    locale: prop_types_1.default.string,
+    minuteHandLength: propTypes_1.isHandLength,
+    minuteHandOppositeLength: propTypes_1.isOppositeHandLength,
+    minuteHandWidth: propTypes_1.isHandWidth,
+    minuteMarksLength: propTypes_1.isMarkLength,
+    minuteMarksWidth: propTypes_1.isMarkWidth,
+    renderHourMarks: prop_types_1.default.bool,
+    renderMinuteHand: prop_types_1.default.bool,
+    renderMinuteMarks: prop_types_1.default.bool,
+    renderNumbers: prop_types_1.default.bool,
+    renderSecondHand: prop_types_1.default.bool,
+    secondHandLength: propTypes_1.isHandLength,
+    secondHandOppositeLength: propTypes_1.isOppositeHandLength,
+    secondHandWidth: propTypes_1.isHandWidth,
+    size: prop_types_1.default.oneOfType([prop_types_1.default.number, prop_types_1.default.string]),
+    value: prop_types_1.default.oneOfType([prop_types_1.default.string, prop_types_1.default.instanceOf(Date)]),
+};

dist/cjs/Hand.js

 "use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports["default"] = Hand;
-var _react = _interopRequireDefault(require("react"));
-var _propTypes = _interopRequireDefault(require("prop-types"));
-var _propTypes2 = require("./shared/propTypes");
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
-function Hand(_ref) {
-  var _ref$angle = _ref.angle,
-    angle = _ref$angle === void 0 ? 0 : _ref$angle,
-    name = _ref.name,
-    _ref$length = _ref.length,
-    length = _ref$length === void 0 ? 100 : _ref$length,
-    _ref$oppositeLength = _ref.oppositeLength,
-    oppositeLength = _ref$oppositeLength === void 0 ? 10 : _ref$oppositeLength,
-    _ref$width = _ref.width,
-    width = _ref$width === void 0 ? 1 : _ref$width;
-  return /*#__PURE__*/_react["default"].createElement("div", {
-    className: "react-clock__hand react-clock__".concat(name, "-hand"),
-    style: {
-      transform: "rotate(".concat(angle, "deg)")
-    }
-  }, /*#__PURE__*/_react["default"].createElement("div", {
-    className: "react-clock__hand__body react-clock__".concat(name, "-hand__body"),
-    style: {
-      width: "".concat(width, "px"),
-      top: "".concat(50 - length / 2, "%"),
-      bottom: "".concat(50 - oppositeLength / 2, "%")
-    }
-  }));
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+var react_1 = __importDefault(require("react"));
+var prop_types_1 = __importDefault(require("prop-types"));
+var propTypes_1 = require("./shared/propTypes");
+function Hand(_a) {
+    var _b = _a.angle, angle = _b === void 0 ? 0 : _b, name = _a.name, _c = _a.length, length = _c === void 0 ? 100 : _c, _d = _a.oppositeLength, oppositeLength = _d === void 0 ? 10 : _d, _e = _a.width, width = _e === void 0 ? 1 : _e;
+    return (react_1.default.createElement("div", { className: "react-clock__hand react-clock__".concat(name, "-hand"), style: {
+            transform: "rotate(".concat(angle, "deg)"),
+        } },
+        react_1.default.createElement("div", { className: "react-clock__hand__body react-clock__".concat(name, "-hand__body"), style: {
+                width: "".concat(width, "px"),
+                top: "".concat(50 - length / 2, "%"),
+                bottom: "".concat(50 - oppositeLength / 2, "%"),
+            } })));
 }
+exports.default = Hand;
 Hand.propTypes = {
-  angle: _propTypes["default"].number,
-  length: _propTypes2.isHandLength,
-  name: _propTypes["default"].string.isRequired,
-  oppositeLength: _propTypes2.isHandLength,
-  width: _propTypes["default"].number
-};
+    angle: prop_types_1.default.number,
+    length: propTypes_1.isHandLength,
+    name: prop_types_1.default.string.isRequired,
+    oppositeLength: propTypes_1.isHandLength,
+    width: propTypes_1.isHandWidth,
+};

dist/cjs/HourMark.js

 "use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports["default"] = HourMark;
-var _react = _interopRequireDefault(require("react"));
-var _propTypes = _interopRequireDefault(require("prop-types"));
-var _Mark = _interopRequireDefault(require("./Mark"));
-var _hourFormatter = require("./shared/hourFormatter");
-var _excluded = ["formatHour", "locale", "number"];
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
-function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
-function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
-function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
-function HourMark(_ref) {
-  var _ref$formatHour = _ref.formatHour,
-    formatHour = _ref$formatHour === void 0 ? _hourFormatter.formatHour : _ref$formatHour,
-    locale = _ref.locale,
-    number = _ref.number,
-    otherProps = _objectWithoutProperties(_ref, _excluded);
-  return /*#__PURE__*/_react["default"].createElement(_Mark["default"], _extends({
-    number: number && formatHour(locale, number)
-  }, otherProps));
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+var react_1 = __importDefault(require("react"));
+var prop_types_1 = __importDefault(require("prop-types"));
+var Mark_1 = __importDefault(require("./Mark"));
+var hourFormatter_1 = require("./shared/hourFormatter");
+function HourMark(_a) {
+    var _b = _a.formatHour, formatHour = _b === void 0 ? hourFormatter_1.formatHour : _b, locale = _a.locale, number = _a.number, otherProps = __rest(_a, ["formatHour", "locale", "number"]);
+    return react_1.default.createElement(Mark_1.default, __assign({ number: number && formatHour(locale, number) }, otherProps));
 }
+exports.default = HourMark;
 HourMark.propTypes = {
-  formatHour: _propTypes["default"].func,
-  locale: _propTypes["default"].string,
-  number: _propTypes["default"].oneOfType([_propTypes["default"].number, _propTypes["default"].string])
-};
+    formatHour: prop_types_1.default.func,
+    locale: prop_types_1.default.string,
+    number: prop_types_1.default.number,
+};

dist/cjs/index.js

 "use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports["default"] = void 0;
-var _Clock = _interopRequireDefault(require("./Clock"));
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
-var _default = _Clock["default"];
-exports["default"] = _default;
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+var Clock_1 = __importDefault(require("./Clock"));
+exports.default = Clock_1.default;

dist/cjs/Mark.js

 "use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports["default"] = Mark;
-var _react = _interopRequireDefault(require("react"));
-var _propTypes = _interopRequireDefault(require("prop-types"));
-var _propTypes2 = require("./shared/propTypes");
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
-function Mark(_ref) {
-  var _ref$angle = _ref.angle,
-    angle = _ref$angle === void 0 ? 0 : _ref$angle,
-    _ref$length = _ref.length,
-    length = _ref$length === void 0 ? 10 : _ref$length,
-    name = _ref.name,
-    _ref$width = _ref.width,
-    width = _ref$width === void 0 ? 1 : _ref$width,
-    number = _ref.number;
-  return /*#__PURE__*/_react["default"].createElement("div", {
-    className: "react-clock__mark react-clock__".concat(name, "-mark"),
-    style: {
-      transform: "rotate(".concat(angle, "deg)")
-    }
-  }, /*#__PURE__*/_react["default"].createElement("div", {
-    className: "react-clock__mark__body react-clock__".concat(name, "-mark__body"),
-    style: {
-      width: "".concat(width, "px"),
-      top: 0,
-      bottom: "".concat(100 - length / 2, "%")
-    }
-  }), number && /*#__PURE__*/_react["default"].createElement("div", {
-    className: "react-clock__mark__number",
-    style: {
-      transform: "rotate(-".concat(angle, "deg)"),
-      top: "".concat(length / 2, "%")
-    }
-  }, number));
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+var react_1 = __importDefault(require("react"));
+var prop_types_1 = __importDefault(require("prop-types"));
+var propTypes_1 = require("./shared/propTypes");
+function Mark(_a) {
+    var _b = _a.angle, angle = _b === void 0 ? 0 : _b, _c = _a.length, length = _c === void 0 ? 10 : _c, name = _a.name, _d = _a.width, width = _d === void 0 ? 1 : _d, number = _a.number;
+    return (react_1.default.createElement("div", { className: "react-clock__mark react-clock__".concat(name, "-mark"), style: {
+            transform: "rotate(".concat(angle, "deg)"),
+        } },
+        react_1.default.createElement("div", { className: "react-clock__mark__body react-clock__".concat(name, "-mark__body"), style: {
+                width: "".concat(width, "px"),
+                top: 0,
+                bottom: "".concat(100 - length / 2, "%"),
+            } }),
+        number && (react_1.default.createElement("div", { className: "react-clock__mark__number", style: {
+                transform: "rotate(-".concat(angle, "deg)"),
+                top: "".concat(length / 2, "%"),
+            } }, number))));
 }
+exports.default = Mark;
 Mark.propTypes = {
-  angle: _propTypes["default"].number,
-  length: _propTypes2.isMarkLength,
-  name: _propTypes["default"].string.isRequired,
-  number: _propTypes["default"].oneOfType([_propTypes["default"].number, _propTypes["default"].string]),
-  width: _propTypes2.isMarkWidth
-};
+    angle: prop_types_1.default.number,
+    length: propTypes_1.isMarkLength,
+    name: prop_types_1.default.string.isRequired,
+    number: prop_types_1.default.node,
+    width: propTypes_1.isMarkWidth,
+};

dist/cjs/MinuteMark.js

 "use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports["default"] = MinuteMark;
-var _react = _interopRequireDefault(require("react"));
-var _Mark = _interopRequireDefault(require("./Mark"));
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+var react_1 = __importDefault(require("react"));
+var Mark_1 = __importDefault(require("./Mark"));
 function MinuteMark(props) {
-  return /*#__PURE__*/_react["default"].createElement(_Mark["default"], props);
-}
+    return react_1.default.createElement(Mark_1.default, __assign({}, props));
+}
+exports.default = MinuteMark;

dist/cjs/shared/hourFormatter.js

 "use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
 exports.formatHour = void 0;
-var _getUserLocale = _interopRequireDefault(require("get-user-locale"));
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
-var formatHour = function formatHour(locale, hour) {
-  return hour.toLocaleString(locale || (0, _getUserLocale["default"])());
+var get_user_locale_1 = __importDefault(require("get-user-locale"));
+var formatHour = function (locale, hour) {
+    return hour.toLocaleString(locale || (0, get_user_locale_1.default)());
 };
-exports.formatHour = formatHour;
+exports.formatHour = formatHour;

dist/cjs/shared/propTypes.js

 "use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.isOppositeHandLength = exports.isMarkWidth = exports.isMarkLength = exports.isHandWidth = exports.isHandLength = void 0;
-var _utils = require("./utils");
-function _typeof(obj) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (obj) { return typeof obj; } : function (obj) { return obj && "function" == typeof Symbol && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }, _typeof(obj); }
-var isNumberBetween = function isNumberBetween(min, max) {
-  return function (props, propName, componentName) {
-    var value = props[propName];
-    if ((0, _utils.isDefined)(value)) {
-      if (typeof value !== 'number') {
-        return new Error("Invalid prop `".concat(propName, "` of type `").concat(_typeof(value), "` supplied to `").concat(componentName, "`, expected `number`."));
-      }
-      if (value < min || value > max) {
-        return new Error("Invalid prop `".concat(propName, "` of type `").concat(_typeof(value), "` supplied to `").concat(componentName, "`, length must be between ").concat(min, " and ").concat(max, "."));
-      }
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.isMarkWidth = exports.isMarkLength = exports.isHandWidth = exports.isOppositeHandLength = exports.isHandLength = void 0;
+function isNumberBetween(min, max) {
+    return function (props, propName, componentName) {
+        var _a = props, _b = propName, value = _a[_b];
+        if (typeof value !== 'undefined') {
+            if (typeof value !== 'number') {
+                return new Error("Invalid prop `".concat(propName, "` of type `").concat(typeof value, "` supplied to `").concat(componentName, "`, expected `number`."));
+            }
+            if (value < min || value > max) {
+                return new Error("Invalid prop `".concat(propName, "` of type `").concat(typeof value, "` supplied to `").concat(componentName, "`, length must be between ").concat(min, " and ").concat(max, "."));
+            }
+        }
+        // Everything is fine
+        return null;
+    };
+}
+exports.isHandLength = isNumberBetween(0, 100);
+exports.isOppositeHandLength = isNumberBetween(-100, 100);
+function isHandWidth(props, propName, componentName) {
+    var _a = props, _b = propName, width = _a[_b];
+    if (typeof width !== 'undefined') {
+        if (typeof width !== 'number') {
+            return new Error("Invalid prop `".concat(propName, "` of type `").concat(typeof width, "` supplied to `").concat(componentName, "`, expected `number`."));
+        }
+        if (width < 0) {
+            return new Error("Invalid prop `".concat(propName, "` of type `").concat(typeof width, "` supplied to `").concat(componentName, "`, width must be greater or equal to 0."));
+        }
     }
-
     // Everything is fine
     return null;
-  };
-};
-var isHandLength = isNumberBetween(0, 100);
-exports.isHandLength = isHandLength;
-var isOppositeHandLength = isNumberBetween(-100, 100);
-exports.isOppositeHandLength = isOppositeHandLength;
-var isHandWidth = function isHandWidth(props, propName, componentName) {
-  var width = props[propName];
-  if ((0, _utils.isDefined)(width)) {
-    if (typeof width !== 'number') {
-      return new Error("Invalid prop `".concat(propName, "` of type `").concat(_typeof(width), "` supplied to `").concat(componentName, "`, expected `number`."));
-    }
-    if (width < 0) {
-      return new Error("Invalid prop `".concat(propName, "` of type `").concat(_typeof(width), "` supplied to `").concat(componentName, "`, width must be greater or equal to 0."));
-    }
-  }
-
-  // Everything is fine
-  return null;
-};
+}
 exports.isHandWidth = isHandWidth;
-var isMarkLength = isHandLength;
-exports.isMarkLength = isMarkLength;
-var isMarkWidth = isHandWidth;
-exports.isMarkWidth = isMarkWidth;
+exports.isMarkLength = exports.isHandLength;
+exports.isMarkWidth = isHandWidth;

dist/esm/Clock.js

@@ -8,154 +8,88 @@ import React from 'react';
 import HourMark from './HourMark';
-import { isHandLength, isOppositeHandLength, isHandWidth, isMarkLength, isMarkWidth } from './shared/propTypes';
-export default function Clock(_ref) {
-  var className = _ref.className,
-    formatHour = _ref.formatHour,
-    _ref$hourHandLength = _ref.hourHandLength,
-    hourHandLength = _ref$hourHandLength === void 0 ? 50 : _ref$hourHandLength,
-    hourHandOppositeLength = _ref.hourHandOppositeLength,
-    _ref$hourHandWidth = _ref.hourHandWidth,
-    hourHandWidth = _ref$hourHandWidth === void 0 ? 4 : _ref$hourHandWidth,
-    _ref$hourMarksLength = _ref.hourMarksLength,
-    hourMarksLength = _ref$hourMarksLength === void 0 ? 10 : _ref$hourMarksLength,
-    _ref$hourMarksWidth = _ref.hourMarksWidth,
-    hourMarksWidth = _ref$hourMarksWidth === void 0 ? 3 : _ref$hourMarksWidth,
-    locale = _ref.locale,
-    _ref$minuteHandLength = _ref.minuteHandLength,
-    minuteHandLength = _ref$minuteHandLength === void 0 ? 70 : _ref$minuteHandLength,
-    minuteHandOppositeLength = _ref.minuteHandOppositeLength,
-    _ref$minuteHandWidth = _ref.minuteHandWidth,
-    minuteHandWidth = _ref$minuteHandWidth === void 0 ? 2 : _ref$minuteHandWidth,
-    _ref$minuteMarksLengt = _ref.minuteMarksLength,
-    minuteMarksLength = _ref$minuteMarksLengt === void 0 ? 6 : _ref$minuteMarksLengt,
-    _ref$minuteMarksWidth = _ref.minuteMarksWidth,
-    minuteMarksWidth = _ref$minuteMarksWidth === void 0 ? 1 : _ref$minuteMarksWidth,
-    _ref$renderHourMarks = _ref.renderHourMarks,
-    renderHourMarks = _ref$renderHourMarks === void 0 ? true : _ref$renderHourMarks,
-    _ref$renderMinuteHand = _ref.renderMinuteHand,
-    renderMinuteHand = _ref$renderMinuteHand === void 0 ? true : _ref$renderMinuteHand,
-    _ref$renderMinuteMark = _ref.renderMinuteMarks,
-    renderMinuteMarks = _ref$renderMinuteMark === void 0 ? true : _ref$renderMinuteMark,
-    renderNumbers = _ref.renderNumbers,
-    _ref$renderSecondHand = _ref.renderSecondHand,
-    renderSecondHand = _ref$renderSecondHand === void 0 ? true : _ref$renderSecondHand,
-    _ref$secondHandLength = _ref.secondHandLength,
-    secondHandLength = _ref$secondHandLength === void 0 ? 90 : _ref$secondHandLength,
-    secondHandOppositeLength = _ref.secondHandOppositeLength,
-    _ref$secondHandWidth = _ref.secondHandWidth,
-    secondHandWidth = _ref$secondHandWidth === void 0 ? 1 : _ref$secondHandWidth,
-    _ref$size = _ref.size,
-    size = _ref$size === void 0 ? 150 : _ref$size,
-    value = _ref.value;
-  function renderMinuteMarksFn() {
-    if (!renderMinuteMarks) {
-      return null;
+import { isHandLength, isOppositeHandLength, isHandWidth, isMarkLength, isMarkWidth, } from './shared/propTypes';
+export default function Clock(_a) {
+    var className = _a.className, formatHour = _a.formatHour, _b = _a.hourHandLength, hourHandLength = _b === void 0 ? 50 : _b, hourHandOppositeLength = _a.hourHandOppositeLength, _c = _a.hourHandWidth, hourHandWidth = _c === void 0 ? 4 : _c, _d = _a.hourMarksLength, hourMarksLength = _d === void 0 ? 10 : _d, _e = _a.hourMarksWidth, hourMarksWidth = _e === void 0 ? 3 : _e, locale = _a.locale, _f = _a.minuteHandLength, minuteHandLength = _f === void 0 ? 70 : _f, minuteHandOppositeLength = _a.minuteHandOppositeLength, _g = _a.minuteHandWidth, minuteHandWidth = _g === void 0 ? 2 : _g, _h = _a.minuteMarksLength, minuteMarksLength = _h === void 0 ? 6 : _h, _j = _a.minuteMarksWidth, minuteMarksWidth = _j === void 0 ? 1 : _j, _k = _a.renderHourMarks, renderHourMarks = _k === void 0 ? true : _k, _l = _a.renderMinuteHand, renderMinuteHand = _l === void 0 ? true : _l, _m = _a.renderMinuteMarks, renderMinuteMarks = _m === void 0 ? true : _m, renderNumbers = _a.renderNumbers, _o = _a.renderSecondHand, renderSecondHand = _o === void 0 ? true : _o, _p = _a.secondHandLength, secondHandLength = _p === void 0 ? 90 : _p, secondHandOppositeLength = _a.secondHandOppositeLength, _q = _a.secondHandWidth, secondHandWidth = _q === void 0 ? 1 : _q, _r = _a.size, size = _r === void 0 ? 150 : _r, value = _a.value;
+    function renderMinuteMarksFn() {
+        if (!renderMinuteMarks) {
+            return null;
+        }
+        var minuteMarks = [];
+        for (var i = 1; i <= 60; i += 1) {
+            var isHourMark = renderHourMarks && !(i % 5);
+            if (!isHourMark) {
+                minuteMarks.push(React.createElement(MinuteMark, { key: "minute_".concat(i), angle: i * 6, length: minuteMarksLength, name: "minute", width: minuteMarksWidth }));
+            }
+        }
+        return minuteMarks;
     }
-    var minuteMarks = [];
-    for (var i = 1; i <= 60; i += 1) {
-      var isHourMark = renderHourMarks && !(i % 5);
-      if (!isHourMark) {
-        minuteMarks.push( /*#__PURE__*/React.createElement(MinuteMark, {
-          key: "minute_".concat(i),
-          angle: i * 6,
-          length: minuteMarksLength,
-          name: "minute",
-          width: minuteMarksWidth
-        }));
-      }
+    function renderHourMarksFn() {
+        if (!renderHourMarks) {
+            return null;
+        }
+        var hourMarks = [];
+        for (var i = 1; i <= 12; i += 1) {
+            hourMarks.push(React.createElement(HourMark, { key: "hour_".concat(i), angle: i * 30, formatHour: formatHour, length: hourMarksLength, locale: locale, name: "hour", number: renderNumbers ? i : undefined, width: hourMarksWidth }));
+        }
+        return hourMarks;
     }
-    return minuteMarks;
-  }
-  function renderHourMarksFn() {
-    if (!renderHourMarks) {
-      return null;
+    function renderFace() {
+        return (React.createElement("div", { className: "react-clock__face" },
+            renderMinuteMarksFn(),
+            renderHourMarksFn()));
     }
-    var hourMarks = [];
-    for (var i = 1; i <= 12; i += 1) {
-      hourMarks.push( /*#__PURE__*/React.createElement(HourMark, {
-        key: "hour_".concat(i),
-        angle: i * 30,
-        formatHour: formatHour,
-        length: hourMarksLength,
-        locale: locale,
-        name: "hour",
-        number: renderNumbers ? i : null,
-        width: hourMarksWidth
-      }));
+    function renderHourHandFn() {
+        var angle = value
+            ? getHours(value) * 30 + getMinutes(value) / 2 + getSeconds(value) / 600
+            : 0;
+        return (React.createElement(Hand, { angle: angle, length: hourHandLength, name: "hour", oppositeLength: hourHandOppositeLength, width: hourHandWidth }));
     }
-    return hourMarks;
-  }
-  function renderFace() {
-    return /*#__PURE__*/React.createElement("div", {
-      className: "react-clock__face"
-    }, renderMinuteMarksFn(), renderHourMarksFn());
-  }
-  function renderHourHandFn() {
-    var angle = value ? getHours(value) * 30 + getMinutes(value) / 2 + getSeconds(value) / 600 : 0;
-    return /*#__PURE__*/React.createElement(Hand, {
-      angle: angle,
-      length: hourHandLength,
-      name: "hour",
-      oppositeLength: hourHandOppositeLength,
-      width: hourHandWidth
-    });
-  }
-  function renderMinuteHandFn() {
-    if (!renderMinuteHand) {
-      return null;
+    function renderMinuteHandFn() {
+        if (!renderMinuteHand) {
+            return null;
+        }
+        var angle = value
+            ? getHours(value) * 360 + getMinutes(value) * 6 + getSeconds(value) / 10
+            : 0;
+        return (React.createElement(Hand, { angle: angle, length: minuteHandLength, name: "minute", oppositeLength: minuteHandOppositeLength, width: minuteHandWidth }));
     }
-    var angle = value ? getHours(value) * 360 + getMinutes(value) * 6 + getSeconds(value) / 10 : 0;
-    return /*#__PURE__*/React.createElement(Hand, {
-      angle: angle,
-      length: minuteHandLength,
-      name: "minute",
-      oppositeLength: minuteHandOppositeLength,
-      width: minuteHandWidth
-    });
-  }
-  function renderSecondHandFn() {
-    if (!renderSecondHand) {
-      return null;
+    function renderSecondHandFn() {
+        if (!renderSecondHand) {
+            return null;
+        }
+        var angle = value ? getMinutes(value) * 360 + getSeconds(value) * 6 : 0;
+        return (React.createElement(Hand, { angle: angle, length: secondHandLength, name: "second", oppositeLength: secondHandOppositeLength, width: secondHandWidth }));
     }
-    var angle = value ? getMinutes(value) * 360 + getSeconds(value) * 6 : 0;
-    return /*#__PURE__*/React.createElement(Hand, {
-      angle: angle,
-      length: secondHandLength,
-      name: "second",
-      oppositeLength: secondHandOppositeLength,
-      width: secondHandWidth
-    });
-  }
-  return /*#__PURE__*/React.createElement("time", {
-    className: clsx('react-clock', className),
-    dateTime: value instanceof Date ? value.toISOString() : value,
-    style: {
-      width: "".concat(size, "px"),
-      height: "".concat(size, "px")
-    }
-  }, renderFace(), renderHourHandFn(), renderMinuteHandFn(), renderSecondHandFn());
+    return (React.createElement("time", { className: clsx('react-clock', className), dateTime: value instanceof Date ? value.toISOString() : value, style: {
+            width: size,
+            height: size,
+        } },
+        renderFace(),
+        renderHourHandFn(),
+        renderMinuteHandFn(),
+        renderSecondHandFn()));
 }
 Clock.propTypes = {
-  className: PropTypes.oneOfType([PropTypes.string, PropTypes.arrayOf(PropTypes.string)]),
-  formatHour: PropTypes.func,
-  hourHandLength: isHandLength,
-  hourHandOppositeLength: isOppositeHandLength,
-  hourHandWidth: isHandWidth,
-  hourMarksLength: isMarkLength,
-  hourMarksWidth: isMarkWidth,
-  locale: PropTypes.string,
-  minuteHandLength: isHandLength,
-  minuteHandOppositeLength: isOppositeHandLength,
-  minuteHandWidth: isHandWidth,
-  minuteMarksLength: isMarkLength,
-  minuteMarksWidth: isMarkWidth,
-  renderHourMarks: PropTypes.bool,
-  renderMinuteHand: PropTypes.bool,
-  renderMinuteMarks: PropTypes.bool,
-  renderNumbers: PropTypes.bool,
-  renderSecondHand: PropTypes.bool,
-  secondHandLength: isHandLength,
-  secondHandOppositeLength: isOppositeHandLength,
-  secondHandWidth: isHandWidth,
-  size: PropTypes.number,
-  value: PropTypes.oneOfType([PropTypes.string, PropTypes.instanceOf(Date)])
-};
+    className: PropTypes.oneOfType([PropTypes.string, PropTypes.arrayOf(PropTypes.string)]),
+    formatHour: PropTypes.func,
+    hourHandLength: isHandLength,
+    hourHandOppositeLength: isOppositeHandLength,
+    hourHandWidth: isHandWidth,
+    hourMarksLength: isMarkLength,
+    hourMarksWidth: isMarkWidth,
+    locale: PropTypes.string,
+    minuteHandLength: isHandLength,
+    minuteHandOppositeLength: isOppositeHandLength,
+    minuteHandWidth: isHandWidth,
+    minuteMarksLength: isMarkLength,
+    minuteMarksWidth: isMarkWidth,
+    renderHourMarks: PropTypes.bool,
+    renderMinuteHand: PropTypes.bool,
+    renderMinuteMarks: PropTypes.bool,
+    renderNumbers: PropTypes.bool,
+    renderSecondHand: PropTypes.bool,
+    secondHandLength: isHandLength,
+    secondHandOppositeLength: isOppositeHandLength,
+    secondHandWidth: isHandWidth,
+    size: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
+    value: PropTypes.oneOfType([PropTypes.string, PropTypes.instanceOf(Date)]),
+};

dist/esm/Hand.js

 import React from 'react';
 import PropTypes from 'prop-types';
-import { isHandLength } from './shared/propTypes';
-export default function Hand(_ref) {
-  var _ref$angle = _ref.angle,
-    angle = _ref$angle === void 0 ? 0 : _ref$angle,
-    name = _ref.name,
-    _ref$length = _ref.length,
-    length = _ref$length === void 0 ? 100 : _ref$length,
-    _ref$oppositeLength = _ref.oppositeLength,
-    oppositeLength = _ref$oppositeLength === void 0 ? 10 : _ref$oppositeLength,
-    _ref$width = _ref.width,
-    width = _ref$width === void 0 ? 1 : _ref$width;
-  return /*#__PURE__*/React.createElement("div", {
-    className: "react-clock__hand react-clock__".concat(name, "-hand"),
-    style: {
-      transform: "rotate(".concat(angle, "deg)")
-    }
-  }, /*#__PURE__*/React.createElement("div", {
-    className: "react-clock__hand__body react-clock__".concat(name, "-hand__body"),
-    style: {
-      width: "".concat(width, "px"),
-      top: "".concat(50 - length / 2, "%"),
-      bottom: "".concat(50 - oppositeLength / 2, "%")
-    }
-  }));
+import { isHandLength, isHandWidth } from './shared/propTypes';
+export default function Hand(_a) {
+    var _b = _a.angle, angle = _b === void 0 ? 0 : _b, name = _a.name, _c = _a.length, length = _c === void 0 ? 100 : _c, _d = _a.oppositeLength, oppositeLength = _d === void 0 ? 10 : _d, _e = _a.width, width = _e === void 0 ? 1 : _e;
+    return (React.createElement("div", { className: "react-clock__hand react-clock__".concat(name, "-hand"), style: {
+            transform: "rotate(".concat(angle, "deg)"),
+        } },
+        React.createElement("div", { className: "react-clock__hand__body react-clock__".concat(name, "-hand__body"), style: {
+                width: "".concat(width, "px"),
+                top: "".concat(50 - length / 2, "%"),
+                bottom: "".concat(50 - oppositeLength / 2, "%"),
+            } })));
 }
 Hand.propTypes = {
-  angle: PropTypes.number,
-  length: isHandLength,
-  name: PropTypes.string.isRequired,
-  oppositeLength: isHandLength,
-  width: PropTypes.number
-};
+    angle: PropTypes.number,
+    length: isHandLength,
+    name: PropTypes.string.isRequired,
+    oppositeLength: isHandLength,
+    width: isHandWidth,
+};

dist/esm/HourMark.js

@@ -1,5 +0,23 @@
-var _excluded = ["formatHour", "locale", "number"];
-function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
-function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
-function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
 import React from 'react';
@@ -9,16 +27,10 @@ import PropTypes from 'prop-types';
 import { formatHour as defaultFormatHour } from './shared/hourFormatter';
-export default function HourMark(_ref) {
-  var _ref$formatHour = _ref.formatHour,
-    formatHour = _ref$formatHour === void 0 ? defaultFormatHour : _ref$formatHour,
-    locale = _ref.locale,
-    number = _ref.number,
-    otherProps = _objectWithoutProperties(_ref, _excluded);
-  return /*#__PURE__*/React.createElement(Mark, _extends({
-    number: number && formatHour(locale, number)
-  }, otherProps));
+export default function HourMark(_a) {
+    var _b = _a.formatHour, formatHour = _b === void 0 ? defaultFormatHour : _b, locale = _a.locale, number = _a.number, otherProps = __rest(_a, ["formatHour", "locale", "number"]);
+    return React.createElement(Mark, __assign({ number: number && formatHour(locale, number) }, otherProps));
 }
 HourMark.propTypes = {
-  formatHour: PropTypes.func,
-  locale: PropTypes.string,
-  number: PropTypes.oneOfType([PropTypes.number, PropTypes.string])
-};
+    formatHour: PropTypes.func,
+    locale: PropTypes.string,
+    number: PropTypes.number,
+};

dist/esm/index.js

 import Clock from './Clock';
-export default Clock;
+export default Clock;

dist/esm/Mark.js

 import React from 'react';
 import PropTypes from 'prop-types';
 import { isMarkLength, isMarkWidth } from './shared/propTypes';
-export default function Mark(_ref) {
-  var _ref$angle = _ref.angle,
-    angle = _ref$angle === void 0 ? 0 : _ref$angle,
-    _ref$length = _ref.length,
-    length = _ref$length === void 0 ? 10 : _ref$length,
-    name = _ref.name,
-    _ref$width = _ref.width,
-    width = _ref$width === void 0 ? 1 : _ref$width,
-    number = _ref.number;
-  return /*#__PURE__*/React.createElement("div", {
-    className: "react-clock__mark react-clock__".concat(name, "-mark"),
-    style: {
-      transform: "rotate(".concat(angle, "deg)")
-    }
-  }, /*#__PURE__*/React.createElement("div", {
-    className: "react-clock__mark__body react-clock__".concat(name, "-mark__body"),
-    style: {
-      width: "".concat(width, "px"),
-      top: 0,
-      bottom: "".concat(100 - length / 2, "%")
-    }
-  }), number && /*#__PURE__*/React.createElement("div", {
-    className: "react-clock__mark__number",
-    style: {
-      transform: "rotate(-".concat(angle, "deg)"),
-      top: "".concat(length / 2, "%")
-    }
-  }, number));
+export default function Mark(_a) {
+    var _b = _a.angle, angle = _b === void 0 ? 0 : _b, _c = _a.length, length = _c === void 0 ? 10 : _c, name = _a.name, _d = _a.width, width = _d === void 0 ? 1 : _d, number = _a.number;
+    return (React.createElement("div", { className: "react-clock__mark react-clock__".concat(name, "-mark"), style: {
+            transform: "rotate(".concat(angle, "deg)"),
+        } },
+        React.createElement("div", { className: "react-clock__mark__body react-clock__".concat(name, "-mark__body"), style: {
+                width: "".concat(width, "px"),
+                top: 0,
+                bottom: "".concat(100 - length / 2, "%"),
+            } }),
+        number && (React.createElement("div", { className: "react-clock__mark__number", style: {
+                transform: "rotate(-".concat(angle, "deg)"),
+                top: "".concat(length / 2, "%"),
+            } }, number))));
 }
 Mark.propTypes = {
-  angle: PropTypes.number,
-  length: isMarkLength,
-  name: PropTypes.string.isRequired,
-  number: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
-  width: isMarkWidth
-};
+    angle: PropTypes.number,
+    length: isMarkLength,
+    name: PropTypes.string.isRequired,
+    number: PropTypes.node,
+    width: isMarkWidth,
+};

dist/esm/MinuteMark.js

@@ -0,5 +1,16 @@
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
 import React from 'react';
 import Mark from './Mark';
 export default function MinuteMark(props) {
-  return /*#__PURE__*/React.createElement(Mark, props);
-}
+    return React.createElement(Mark, __assign({}, props));
+}

dist/esm/shared/hourFormatter.js

 import getUserLocale from 'get-user-locale';
-export var formatHour = function formatHour(locale, hour) {
-  return hour.toLocaleString(locale || getUserLocale());
-};
+export var formatHour = function (locale, hour) {
+    return hour.toLocaleString(locale || getUserLocale());
+};

dist/esm/shared/propTypes.js

@@ -1,36 +0,32 @@
-function _typeof(obj) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (obj) { return typeof obj; } : function (obj) { return obj && "function" == typeof Symbol && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }, _typeof(obj); }
-import { isDefined } from './utils';
-var isNumberBetween = function isNumberBetween(min, max) {
-  return function (props, propName, componentName) {
-    var value = props[propName];
-    if (isDefined(value)) {
-      if (typeof value !== 'number') {
-        return new Error("Invalid prop `".concat(propName, "` of type `").concat(_typeof(value), "` supplied to `").concat(componentName, "`, expected `number`."));
-      }
-      if (value < min || value > max) {
-        return new Error("Invalid prop `".concat(propName, "` of type `").concat(_typeof(value), "` supplied to `").concat(componentName, "`, length must be between ").concat(min, " and ").concat(max, "."));
-      }
+function isNumberBetween(min, max) {
+    return function (props, propName, componentName) {
+        var _a = props, _b = propName, value = _a[_b];
+        if (typeof value !== 'undefined') {
+            if (typeof value !== 'number') {
+                return new Error("Invalid prop `".concat(propName, "` of type `").concat(typeof value, "` supplied to `").concat(componentName, "`, expected `number`."));
+            }
+            if (value < min || value > max) {
+                return new Error("Invalid prop `".concat(propName, "` of type `").concat(typeof value, "` supplied to `").concat(componentName, "`, length must be between ").concat(min, " and ").concat(max, "."));
+            }
+        }
+        // Everything is fine
+        return null;
+    };
+}
+export var isHandLength = isNumberBetween(0, 100);
+export var isOppositeHandLength = isNumberBetween(-100, 100);
+export function isHandWidth(props, propName, componentName) {
+    var _a = props, _b = propName, width = _a[_b];
+    if (typeof width !== 'undefined') {
+        if (typeof width !== 'number') {
+            return new Error("Invalid prop `".concat(propName, "` of type `").concat(typeof width, "` supplied to `").concat(componentName, "`, expected `number`."));
+        }
+        if (width < 0) {
+            return new Error("Invalid prop `".concat(propName, "` of type `").concat(typeof width, "` supplied to `").concat(componentName, "`, width must be greater or equal to 0."));
+        }
     }
-
     // Everything is fine
     return null;
-  };
-};
-export var isHandLength = isNumberBetween(0, 100);
-export var isOppositeHandLength = isNumberBetween(-100, 100);
-export var isHandWidth = function isHandWidth(props, propName, componentName) {
-  var width = props[propName];
-  if (isDefined(width)) {
-    if (typeof width !== 'number') {
-      return new Error("Invalid prop `".concat(propName, "` of type `").concat(_typeof(width), "` supplied to `").concat(componentName, "`, expected `number`."));
-    }
-    if (width < 0) {
-      return new Error("Invalid prop `".concat(propName, "` of type `").concat(_typeof(width), "` supplied to `").concat(componentName, "`, width must be greater or equal to 0."));
-    }
-  }
-
-  // Everything is fine
-  return null;
-};
+}
 export var isMarkLength = isHandLength;
-export var isMarkWidth = isHandWidth;
+export var isMarkWidth = isHandWidth;

package.json

 {
   "name": "react-clock",
-  "version": "4.0.0",
+  "version": "4.1.0",
   "description": "An analog clock for your React app.",
   "main": "dist/cjs/index.js",
   "module": "dist/esm/index.js",
-  "source": "src/index.js",
+  "source": "src/index.ts",
+  "types": "dist/cjs/index.d.ts",
   "sideEffects": [
-    "*.css",
-    "*.less"
+    "*.css"
   ],
   "scripts": {
-    "build": "yarn build-js && yarn copy-styles && yarn build-styles",
+    "build": "yarn build-js && yarn copy-styles",
     "build-js": "yarn build-js-esm && yarn build-js-cjs",
-    "build-js-esm": "BABEL_ENV=production-esm babel src -d dist/esm --ignore \"**/*.spec.js,**/*.spec.jsx\"",
-    "build-js-cjs": "BABEL_ENV=production-cjs babel src -d dist/cjs --ignore \"**/*.spec.js,**/*.spec.jsx\"",
-    "build-styles": "lessc ./dist/Clock.less ./dist/Clock.css",
+    "build-js-esm": "tsc --project tsconfig.build.json --outDir dist/esm --module esnext",
+    "build-js-cjs": "tsc --project tsconfig.build.json --outDir dist/cjs --module commonjs",
     "clean": "rimraf dist",
-    "copy-styles": "node ./copy-styles.js",
+    "copy-styles": "node ./copy-styles.mjs",
     "jest": "jest",
-    "lint": "eslint sample src test --ext .jsx,.js",
+    "lint": "eslint . --ext .js,.jsx,.ts,.tsx",
     "prepack": "yarn clean && yarn build",
     "prettier": "prettier --check . --cache",
-    "test": "yarn lint && yarn prettier && yarn jest"
+    "test": "yarn lint && yarn tsc && yarn prettier && yarn jest",
+    "tsc": "tsc --noEmit"
   },
@@ -45,14 +45,18 @@ "keywords": [
   "dependencies": {
-    "@wojtekmaj/date-utils": "^1.0.0",
+    "@types/react": "*",
+    "@wojtekmaj/date-utils": "^1.1.2",
     "clsx": "^1.2.1",
-    "get-user-locale": "^1.4.0",
+    "get-user-locale": "^2.0.0",
     "prop-types": "^15.6.0"
   },
   "devDependencies": {
-    "@babel/cli": "^7.15.0",
     "@babel/core": "^7.15.0",
     "@babel/preset-env": "^7.15.0",
     "@babel/preset-react": "^7.14.0",
+    "@babel/preset-typescript": "^7.18.6",
     "@testing-library/jest-dom": "^5.15.0",
     "@testing-library/react": "^13.4.0",
+    "@types/jest": "^29.0.0",
+    "@typescript-eslint/eslint-plugin": "^5.41.0",
+    "@typescript-eslint/parser": "^5.44.0",
     "eslint": "^8.26.0",
@@ -63,3 +67,2 @@ "eslint-config-wojtekmaj": "^0.7.1",
     "jest-environment-jsdom": "^29.0.0",
-    "less": "^4.0.0",
     "prettier": "^2.7.0",
@@ -69,3 +72,4 @@ "pretty-quick": "^3.1.0",
     "react-dom": "^18.2.0",
-    "rimraf": "^3.0.0"
+    "rimraf": "^3.0.0",
+    "typescript": "^4.9.4"
   },
@@ -72,0 +76,0 @@ "peerDependencies": {

README.md

@@ -1,2 +0,2 @@
-[![npm](https://img.shields.io/npm/v/react-clock.svg)](https://www.npmjs.com/package/react-clock) ![downloads](https://img.shields.io/npm/dt/react-clock.svg) [![CI](https://github.com/wojtekmaj/react-clock/workflows/CI/badge.svg)](https://github.com/wojtekmaj/react-clock/actions) ![dependencies](https://img.shields.io/david/wojtekmaj/react-clock.svg) ![dev dependencies](https://img.shields.io/david/dev/wojtekmaj/react-clock.svg) [![tested with jest](https://img.shields.io/badge/tested_with-jest-99424f.svg)](https://github.com/facebook/jest)
+[![npm](https://img.shields.io/npm/v/react-clock.svg)](https://www.npmjs.com/package/react-clock) ![downloads](https://img.shields.io/npm/dt/react-clock.svg) [![CI](https://github.com/wojtekmaj/react-clock/workflows/CI/badge.svg)](https://github.com/wojtekmaj/react-clock/actions) [![tested with jest](https://img.shields.io/badge/tested_with-jest-99424f.svg)](https://github.com/facebook/jest)
 
@@ -90,3 +90,3 @@ # React-Clock
 | secondHandWidth          | Second hand width, in pixels.                                                                                             | `1`                     | `2`                                                                                                 |
-| size                     | Clock size, in pixels.                                                                                                    | `150`                   | `250`                                                                                               |
+| size                     | Clock size, in pixels (e.g. `200`) or as string (e.g. `"50vw"`).                                                          | `150`                   | <ul><li>Number: `250`</li><li>String: `"50vw"`</li></ul>                                            |
 | value                    | Clock value. Must be provided.                                                                                            | n/a                     | Date: `new Date()`                                                                                  |
@@ -93,0 +93,0 @@

New alerts

Major refactor

Supply chain risk

Package has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

79732

increased by18.17%

Number of package files

55

increased by44.74%

Lines of code

1604

increased by20.15%

Worsened metrics

Dependency count

7

increased by16.67%

Dev dependency count

20

increased by17.65%

Number of medium supply chain risk alerts

1

increased byInfinity%

Dependency changes

• + Added@types/react@*

• + Added@types/react@19.0.9(transitive)

• + Addedcsstype@3.1.3(transitive)

• + Addedget-user-locale@2.3.2(transitive)

• + Addedmap-age-cleaner@0.1.3(transitive)

• + Addedmem@8.1.1(transitive)

• + Addedmimic-fn@3.1.0(transitive)

• + Addedp-defer@1.0.0(transitive)

• - Removedget-user-locale@1.5.1(transitive)

• - Removedlodash.memoize@4.1.2(transitive)

• Updated@wojtekmaj/date-utils@^1.1.2

• Updatedget-user-locale@^2.0.0