react-clock - npm Package Compare versions

Comparing version 4.6.0 to 5.0.0

dist/cjs/Clock.d.ts

@@ -1,2 +0,2 @@
-import React from 'react';
+/// <reference types="react" />
 import type { formatHour as defaultFormatHour } from './shared/hourFormatter.js';
@@ -177,3 +177,2 @@ import type { ClassName, HandLength, HandWidth, MarkLength, MarkWidth, OppositeHandLength } from './shared/types.js';
  */
-declare const Clock: React.FC<ClockProps>;
-export default Clock;
+export default function Clock({ className, formatHour, hourHandLength, hourHandOppositeLength, hourHandWidth, hourMarksLength, hourMarksWidth, locale, minuteHandLength, minuteHandOppositeLength, minuteHandWidth, minuteMarksLength, minuteMarksWidth, renderHourMarks, renderMinuteHand, renderMinuteMarks, renderNumbers, renderSecondHand, secondHandLength, secondHandOppositeLength, secondHandWidth, size, useMillisecondPrecision, value, }: ClockProps): JSX.Element;

dist/cjs/Clock.js

@@ -6,4 +6,3 @@ "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-var react_1 = __importDefault(require("react"));
-var prop_types_1 = __importDefault(require("prop-types"));
+var jsx_runtime_1 = require("react/jsx-runtime");
 var clsx_1 = __importDefault(require("clsx"));
@@ -14,7 +13,6 @@ var date_utils_1 = require("@wojtekmaj/date-utils");
 var HourMark_js_1 = __importDefault(require("./HourMark.js"));
-var propTypes_js_1 = require("./shared/propTypes.js");
 /**
  * Displays a complete clock.
  */
-var Clock = function Clock(_a) {
+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, useMillisecondPrecision = _a.useMillisecondPrecision, value = _a.value;
@@ -29,3 +27,3 @@ function renderMinuteMarksFn() {
             if (!isHourMark) {
-                minuteMarks.push(react_1.default.createElement(MinuteMark_js_1.default, { key: "minute_".concat(i), angle: i * 6, length: minuteMarksLength, name: "minute", width: minuteMarksWidth }));
+                minuteMarks.push((0, jsx_runtime_1.jsx)(MinuteMark_js_1.default, { angle: i * 6, length: minuteMarksLength, name: "minute", width: minuteMarksWidth }, "minute_".concat(i)));
             }
@@ -41,3 +39,3 @@ }
         for (var i = 1; i <= 12; i += 1) {
-            hourMarks.push(react_1.default.createElement(HourMark_js_1.default, { key: "hour_".concat(i), angle: i * 30, formatHour: formatHour, length: hourMarksLength, locale: locale, name: "hour", number: renderNumbers ? i : undefined, width: hourMarksWidth }));
+            hourMarks.push((0, jsx_runtime_1.jsx)(HourMark_js_1.default, { angle: i * 30, formatHour: formatHour, length: hourMarksLength, locale: locale, name: "hour", number: renderNumbers ? i : undefined, width: hourMarksWidth }, "hour_".concat(i)));
         }
@@ -47,5 +45,3 @@ return hourMarks;
     function renderFace() {
-        return (react_1.default.createElement("div", { className: "react-clock__face" },
-            renderMinuteMarksFn(),
-            renderHourMarksFn()));
+        return ((0, jsx_runtime_1.jsxs)("div", { className: "react-clock__face", children: [renderMinuteMarksFn(), renderHourMarksFn()] }));
     }
@@ -59,3 +55,3 @@ function renderHourHandFn() {
             : 0;
-        return (react_1.default.createElement(Hand_js_1.default, { angle: angle, length: hourHandLength, name: "hour", oppositeLength: hourHandOppositeLength, width: hourHandWidth }));
+        return ((0, jsx_runtime_1.jsx)(Hand_js_1.default, { angle: angle, length: hourHandLength, name: "hour", oppositeLength: hourHandOppositeLength, width: hourHandWidth }));
     }
@@ -72,3 +68,3 @@ function renderMinuteHandFn() {
             : 0;
-        return (react_1.default.createElement(Hand_js_1.default, { angle: angle, length: minuteHandLength, name: "minute", oppositeLength: minuteHandOppositeLength, width: minuteHandWidth }));
+        return ((0, jsx_runtime_1.jsx)(Hand_js_1.default, { angle: angle, length: minuteHandLength, name: "minute", oppositeLength: minuteHandOppositeLength, width: minuteHandWidth }));
     }
@@ -84,38 +80,9 @@ function renderSecondHandFn() {
             : 0;
-        return (react_1.default.createElement(Hand_js_1.default, { angle: angle, length: secondHandLength, name: "second", oppositeLength: secondHandOppositeLength, width: secondHandWidth }));
+        return ((0, jsx_runtime_1.jsx)(Hand_js_1.default, { angle: angle, length: secondHandLength, name: "second", oppositeLength: secondHandOppositeLength, width: secondHandWidth }));
     }
-    return (react_1.default.createElement("time", { className: (0, clsx_1.default)('react-clock', className), dateTime: value instanceof Date ? value.toISOString() : value || undefined, style: {
+    return ((0, jsx_runtime_1.jsxs)("time", { className: (0, clsx_1.default)('react-clock', className), dateTime: value instanceof Date ? value.toISOString() : value || undefined, style: {
             width: size,
             height: size,
-        } },
-        renderFace(),
-        renderHourHandFn(),
-        renderMinuteHandFn(),
-        renderSecondHandFn()));
-};
-Clock.propTypes = {
-    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_js_1.isHandLength,
-    hourHandOppositeLength: propTypes_js_1.isOppositeHandLength,
-    hourHandWidth: propTypes_js_1.isHandWidth,
-    hourMarksLength: propTypes_js_1.isMarkLength,
-    hourMarksWidth: propTypes_js_1.isMarkWidth,
-    locale: prop_types_1.default.string,
-    minuteHandLength: propTypes_js_1.isHandLength,
-    minuteHandOppositeLength: propTypes_js_1.isOppositeHandLength,
-    minuteHandWidth: propTypes_js_1.isHandWidth,
-    minuteMarksLength: propTypes_js_1.isMarkLength,
-    minuteMarksWidth: propTypes_js_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_js_1.isHandLength,
-    secondHandOppositeLength: propTypes_js_1.isOppositeHandLength,
-    secondHandWidth: propTypes_js_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)]),
-};
+        }, children: [renderFace(), renderHourHandFn(), renderMinuteHandFn(), renderSecondHandFn()] }));
+}
 exports.default = Clock;

dist/cjs/Hand.js

 "use strict";
-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 jsx_runtime_1 = require("react/jsx-runtime");
 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: {
+    return ((0, jsx_runtime_1.jsx)("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: {
+        }, children: (0, jsx_runtime_1.jsx)("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;

dist/cjs/HourMark.d.ts

@@ -1,2 +0,2 @@
-import React from 'react';
+/// <reference types="react" />
 import Mark from './Mark.js';
@@ -9,3 +9,3 @@ import { formatHour as defaultFormatHour } from './shared/hourFormatter.js';
 };
-declare const HourMark: React.NamedExoticComponent<HourMarkProps>;
+declare const HourMark: import("react").NamedExoticComponent<HourMarkProps>;
 export default HourMark;

dist/cjs/HourMark.js

@@ -13,25 +13,2 @@ "use strict";
 };
-var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    var desc = Object.getOwnPropertyDescriptor(m, k);
-    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
-      desc = { enumerable: true, get: function() { return m[k]; } };
-    }
-    Object.defineProperty(o, k2, desc);
-}) : (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    o[k2] = m[k];
-}));
-var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
-    Object.defineProperty(o, "default", { enumerable: true, value: v });
-}) : function(o, v) {
-    o["default"] = v;
-});
-var __importStar = (this && this.__importStar) || function (mod) {
-    if (mod && mod.__esModule) return mod;
-    var result = {};
-    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
-    __setModuleDefault(result, mod);
-    return result;
-};
 var __rest = (this && this.__rest) || function (s, e) {
@@ -52,3 +29,4 @@ var t = {};
 Object.defineProperty(exports, "__esModule", { value: true });
-var react_1 = __importStar(require("react"));
+var jsx_runtime_1 = require("react/jsx-runtime");
+var react_1 = require("react");
 var Mark_js_1 = __importDefault(require("./Mark.js"));
@@ -58,4 +36,4 @@ var hourFormatter_js_1 = require("./shared/hourFormatter.js");
     var _b = _a.formatHour, formatHour = _b === void 0 ? hourFormatter_js_1.formatHour : _b, locale = _a.locale, number = _a.number, otherProps = __rest(_a, ["formatHour", "locale", "number"]);
-    return react_1.default.createElement(Mark_js_1.default, __assign({ number: number ? formatHour(locale, number) : null }, otherProps));
+    return (0, jsx_runtime_1.jsx)(Mark_js_1.default, __assign({ number: number ? formatHour(locale, number) : null }, otherProps));
 });
 exports.default = HourMark;

dist/cjs/Mark.d.ts

@@ -1,2 +0,2 @@
-import React from 'react';
+/// <reference types="react" />
 import type { MarkLength, MarkWidth } from './shared/types.js';
@@ -3,0 +3,0 @@ type MarkProps = {

dist/cjs/Mark.js

 "use strict";
-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 jsx_runtime_1 = require("react/jsx-runtime");
 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: {
+    return ((0, jsx_runtime_1.jsxs)("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)) : null));
+        }, children: [(0, jsx_runtime_1.jsx)("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 ? ((0, jsx_runtime_1.jsx)("div", { className: "react-clock__mark__number", style: {
+                    transform: "rotate(-".concat(angle, "deg)"),
+                    top: "".concat(length / 2, "%"),
+                }, children: number })) : null] }));
 }
 exports.default = Mark;

dist/cjs/MinuteMark.d.ts

@@ -1,9 +0,9 @@
-import React from 'react';
-declare const MinuteMark: React.NamedExoticComponent<{
+/// <reference types="react" />
+declare const MinuteMark: import("react").NamedExoticComponent<{
     angle?: number | undefined;
     length?: number | undefined;
     name: string;
-    number?: React.ReactNode;
+    number?: import("react").ReactNode;
     width?: number | undefined;
 }>;
 export default MinuteMark;

dist/cjs/MinuteMark.js

@@ -13,25 +13,2 @@ "use strict";
 };
-var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    var desc = Object.getOwnPropertyDescriptor(m, k);
-    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
-      desc = { enumerable: true, get: function() { return m[k]; } };
-    }
-    Object.defineProperty(o, k2, desc);
-}) : (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    o[k2] = m[k];
-}));
-var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
-    Object.defineProperty(o, "default", { enumerable: true, value: v });
-}) : function(o, v) {
-    o["default"] = v;
-});
-var __importStar = (this && this.__importStar) || function (mod) {
-    if (mod && mod.__esModule) return mod;
-    var result = {};
-    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
-    __setModuleDefault(result, mod);
-    return result;
-};
 var __importDefault = (this && this.__importDefault) || function (mod) {
@@ -41,7 +18,8 @@ return (mod && mod.__esModule) ? mod : { "default": mod };
 Object.defineProperty(exports, "__esModule", { value: true });
-var react_1 = __importStar(require("react"));
+var jsx_runtime_1 = require("react/jsx-runtime");
+var react_1 = require("react");
 var Mark_js_1 = __importDefault(require("./Mark.js"));
 var MinuteMark = (0, react_1.memo)(function MinuteMark(props) {
-    return react_1.default.createElement(Mark_js_1.default, __assign({}, props));
+    return (0, jsx_runtime_1.jsx)(Mark_js_1.default, __assign({}, props));
 });
 exports.default = MinuteMark;

dist/esm/Clock.d.ts

@@ -1,2 +0,2 @@
-import React from 'react';
+/// <reference types="react" />
 import type { formatHour as defaultFormatHour } from './shared/hourFormatter.js';
@@ -177,3 +177,2 @@ import type { ClassName, HandLength, HandWidth, MarkLength, MarkWidth, OppositeHandLength } from './shared/types.js';
  */
-declare const Clock: React.FC<ClockProps>;
-export default Clock;
+export default function Clock({ className, formatHour, hourHandLength, hourHandOppositeLength, hourHandWidth, hourMarksLength, hourMarksWidth, locale, minuteHandLength, minuteHandOppositeLength, minuteHandWidth, minuteMarksLength, minuteMarksWidth, renderHourMarks, renderMinuteHand, renderMinuteMarks, renderNumbers, renderSecondHand, secondHandLength, secondHandOppositeLength, secondHandWidth, size, useMillisecondPrecision, value, }: ClockProps): JSX.Element;

dist/esm/Clock.js

@@ -1,3 +0,2 @@
-import React from 'react';
-import PropTypes from 'prop-types';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import clsx from 'clsx';
@@ -8,7 +7,6 @@ import { getHours, getMilliseconds, getMinutes, getSeconds } from '@wojtekmaj/date-utils';
 import HourMark from './HourMark.js';
-import { isHandLength, isOppositeHandLength, isHandWidth, isMarkLength, isMarkWidth, } from './shared/propTypes.js';
 /**
  * Displays a complete clock.
  */
-var Clock = function Clock(_a) {
+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, useMillisecondPrecision = _a.useMillisecondPrecision, value = _a.value;
@@ -23,3 +21,3 @@ function renderMinuteMarksFn() {
             if (!isHourMark) {
-                minuteMarks.push(React.createElement(MinuteMark, { key: "minute_".concat(i), angle: i * 6, length: minuteMarksLength, name: "minute", width: minuteMarksWidth }));
+                minuteMarks.push(_jsx(MinuteMark, { angle: i * 6, length: minuteMarksLength, name: "minute", width: minuteMarksWidth }, "minute_".concat(i)));
             }
@@ -35,3 +33,3 @@ }
         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 }));
+            hourMarks.push(_jsx(HourMark, { angle: i * 30, formatHour: formatHour, length: hourMarksLength, locale: locale, name: "hour", number: renderNumbers ? i : undefined, width: hourMarksWidth }, "hour_".concat(i)));
         }
@@ -41,5 +39,3 @@ return hourMarks;
     function renderFace() {
-        return (React.createElement("div", { className: "react-clock__face" },
-            renderMinuteMarksFn(),
-            renderHourMarksFn()));
+        return (_jsxs("div", { className: "react-clock__face", children: [renderMinuteMarksFn(), renderHourMarksFn()] }));
     }
@@ -53,3 +49,3 @@ function renderHourHandFn() {
             : 0;
-        return (React.createElement(Hand, { angle: angle, length: hourHandLength, name: "hour", oppositeLength: hourHandOppositeLength, width: hourHandWidth }));
+        return (_jsx(Hand, { angle: angle, length: hourHandLength, name: "hour", oppositeLength: hourHandOppositeLength, width: hourHandWidth }));
     }
@@ -66,3 +62,3 @@ function renderMinuteHandFn() {
             : 0;
-        return (React.createElement(Hand, { angle: angle, length: minuteHandLength, name: "minute", oppositeLength: minuteHandOppositeLength, width: minuteHandWidth }));
+        return (_jsx(Hand, { angle: angle, length: minuteHandLength, name: "minute", oppositeLength: minuteHandOppositeLength, width: minuteHandWidth }));
     }
@@ -78,38 +74,8 @@ function renderSecondHandFn() {
             : 0;
-        return (React.createElement(Hand, { angle: angle, length: secondHandLength, name: "second", oppositeLength: secondHandOppositeLength, width: secondHandWidth }));
+        return (_jsx(Hand, { angle: angle, length: secondHandLength, name: "second", oppositeLength: secondHandOppositeLength, width: secondHandWidth }));
     }
-    return (React.createElement("time", { className: clsx('react-clock', className), dateTime: value instanceof Date ? value.toISOString() : value || undefined, style: {
+    return (_jsxs("time", { className: clsx('react-clock', className), dateTime: value instanceof Date ? value.toISOString() : value || undefined, 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.oneOfType([PropTypes.number, PropTypes.string]),
-    value: PropTypes.oneOfType([PropTypes.string, PropTypes.instanceOf(Date)]),
-};
-export default Clock;
+        }, children: [renderFace(), renderHourHandFn(), renderMinuteHandFn(), renderSecondHandFn()] }));
+}

dist/esm/Hand.js

@@ -1,12 +0,11 @@
-import React from 'react';
+import { jsx as _jsx } from "react/jsx-runtime";
 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: {
+    return (_jsx("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: {
+        }, children: _jsx("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, "%"),
-            } })));
+            } }) }));
 }

dist/esm/HourMark.d.ts

@@ -1,2 +0,2 @@
-import React from 'react';
+/// <reference types="react" />
 import Mark from './Mark.js';
@@ -9,3 +9,3 @@ import { formatHour as defaultFormatHour } from './shared/hourFormatter.js';
 };
-declare const HourMark: React.NamedExoticComponent<HourMarkProps>;
+declare const HourMark: import("react").NamedExoticComponent<HourMarkProps>;
 export default HourMark;

dist/esm/HourMark.js

@@ -23,3 +23,4 @@ var __assign = (this && this.__assign) || function () {
 };
-import React, { memo } from 'react';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { memo } from 'react';
 import Mark from './Mark.js';
@@ -29,4 +30,4 @@ import { formatHour as defaultFormatHour } from './shared/hourFormatter.js';
     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) : null }, otherProps));
+    return _jsx(Mark, __assign({ number: number ? formatHour(locale, number) : null }, otherProps));
 });
 export default HourMark;

dist/esm/Mark.d.ts

@@ -1,2 +0,2 @@
-import React from 'react';
+/// <reference types="react" />
 import type { MarkLength, MarkWidth } from './shared/types.js';
@@ -3,0 +3,0 @@ type MarkProps = {

dist/esm/Mark.js

@@ -1,16 +0,14 @@
-import React from 'react';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 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: {
+    return (_jsxs("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)) : null));
+        }, children: [_jsx("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 ? (_jsx("div", { className: "react-clock__mark__number", style: {
+                    transform: "rotate(-".concat(angle, "deg)"),
+                    top: "".concat(length / 2, "%"),
+                }, children: number })) : null] }));
 }

dist/esm/MinuteMark.d.ts

@@ -1,9 +0,9 @@
-import React from 'react';
-declare const MinuteMark: React.NamedExoticComponent<{
+/// <reference types="react" />
+declare const MinuteMark: import("react").NamedExoticComponent<{
     angle?: number | undefined;
     length?: number | undefined;
     name: string;
-    number?: React.ReactNode;
+    number?: import("react").ReactNode;
     width?: number | undefined;
 }>;
 export default MinuteMark;

dist/esm/MinuteMark.js

@@ -12,7 +12,8 @@ var __assign = (this && this.__assign) || function () {
 };
-import React, { memo } from 'react';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { memo } from 'react';
 import Mark from './Mark.js';
 var MinuteMark = memo(function MinuteMark(props) {
-    return React.createElement(Mark, __assign({}, props));
+    return _jsx(Mark, __assign({}, props));
 });
 export default MinuteMark;

package.json

 {
   "name": "react-clock",
-  "version": "4.6.0",
+  "version": "5.0.0",
   "description": "An analog clock for your React app.",
@@ -24,10 +24,10 @@ "type": "module",
     "build-js-esm": "tsc --project tsconfig.build.json --outDir dist/esm",
-    "build-js-cjs": "tsc --project tsconfig.build.json --outDir dist/cjs --module commonjs --verbatimModuleSyntax false",
+    "build-js-cjs": "tsc --project tsconfig.build.json --outDir dist/cjs --module commonjs --moduleResolution node --verbatimModuleSyntax false",
     "build-js-cjs-package": "echo '{\n  \"type\": \"commonjs\"\n}' > dist/cjs/package.json",
     "clean": "rimraf dist",
     "copy-styles": "cpy 'src/**/*.css' dist",
+    "format": "prettier --check . --cache",
     "lint": "eslint . --ext .js,.jsx,.ts,.tsx",
     "prepack": "yarn clean && yarn build",
-    "prettier": "prettier --check . --cache",
-    "test": "yarn lint && yarn tsc && yarn prettier && yarn unit",
+    "test": "yarn lint && yarn tsc && yarn format && yarn unit",
     "tsc": "tsc",
@@ -58,26 +58,25 @@ "unit": "vitest",
     "clsx": "^2.0.0",
-    "get-user-locale": "^2.2.1",
-    "prop-types": "^15.6.0"
+    "get-user-locale": "^2.2.1"
   },
   "devDependencies": {
     "@testing-library/jest-dom": "^6.0.0",
-    "@testing-library/react": "^14.0.0",
+    "@testing-library/react": "^15.0.0",
     "@types/node": "*",
     "@types/react": "*",
     "cpy-cli": "^5.0.0",
-    "eslint": "^8.26.0",
-    "eslint-config-wojtekmaj": "^0.9.0",
+    "eslint": "^8.56.0",
+    "eslint-config-wojtekmaj": "^1.0.0",
     "happy-dom": "^12.6.0",
     "nodemon": "^3.0.0",
-    "prettier": "^3.0.0",
+    "prettier": "^3.2.0",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "rimraf": "^3.0.0",
-    "typescript": "^5.3.2",
+    "typescript": "^5.4.2",
     "vitest": "^1.0.2"
   },
   "peerDependencies": {
-    "@types/react": "^16.8.0 || ^17.0.0 || ^18.0.0",
-    "react": "^16.8.0 || ^17.0.0 || ^18.0.0",
-    "react-dom": "^16.8.0 || ^17.0.0 || ^18.0.0"
+    "@types/react": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0",
+    "react": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0",
+    "react-dom": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0"
   },
@@ -99,3 +98,3 @@ "peerDependenciesMeta": {
     "type": "git",
-    "url": "https://github.com/wojtekmaj/react-clock.git",
+    "url": "git+https://github.com/wojtekmaj/react-clock.git",
     "directory": "packages/react-clock"
@@ -102,0 +101,0 @@ },

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Dependency count

6

decreased by-14.29%

Worsened metrics

Total package byte prevSize

78140

decreased by-12.6%

Number of package files

51

decreased by-8.93%

Lines of code

1722

decreased by-14.16%

Dependency changes

• - Removedprop-types@^15.6.0

• - Removedobject-assign@4.1.1(transitive)

• - Removedprop-types@15.8.1(transitive)

• - Removedreact-is@16.13.1(transitive)