npm - time-runner - Versions diffs - 1.0.0 - Mend

time-runner 1.0.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (9) hide show

package/README.md ADDED Viewed

@@ -0,0 +1,104 @@
+# 时间/计时/倒计时组件
+![时间/计时/倒计时组件](https://showscene.oss-cn-shanghai.aliyuncs.com/time-countdown.gif)
+这是一个展示时间、计时、倒计时的组件。
+基于 React 开发。 主要功能包括：
+- 展示当前时间
+- 展示显示计时（电脑锁屏、笔记本盒盖不中断计时）
+- 展示倒计时
+- 些许动画效果
+## 安装
+```bash
+npm i time-runner
+```
+或者
+```bash
+yarn add time-runner
+```
+## 页面引入
+```bash
+import { TimeRunner } from "time-runner";
+import "time-runner/dist/time-runner.css";
+```
+## 使用说明
+```react
+// 当前时间
+<TimeRunner />
+// 计时器
+<TimeRunner showType="count" />
+// 倒计时
+<TimeRunner showType="2025-10-31" />
+// 当前时间 + 翻牌效果
+<TimeRunner mode="card" />
+// 计时器 + 翻牌效果
+<TimeRunner mode="card" showType="count" />
+// 倒计时 + 翻牌效果
+<TimeRunner mode="card" showType="2025-10-31" />
+// 当前时间 + 翻转（左右）
+<TimeRunner mode="cube-h" />
+// 计时器 + 翻转（左右）
+<TimeRunner mode="cube-h" showType="count" />
+// 倒计时 + 翻转（左右）
+<TimeRunner mode="cube-h" showType="2025-10-31" />
+// 当前时间 + 翻转（上下）
+<TimeRunner mode="cube-v" />
+// 计时器 + 翻转（上下）
+<TimeRunner mode="cube-v" showType="count" />
+// 倒计时 + 翻转（上下）
+<TimeRunner mode="cube-v" showType="2025-10-31" />
+```
+### 组件属性（props）
+```js
+/**
+ * 显示模式，默认：default
+ * default: 当前时间
+ * count: 计时器
+ * 指定时间：倒计时。
+ */
+showType?: string;
+/**
+ * 动画模式，
+ * card：卡片
+ * cube-v：上下翻转
+ * cube-h：左右翻转
+ */
+mode?: TransMode;
+/** 倒计时结束后执行的方法 */
+finishCountFn?: Function;
+/** 尺寸，默认40 */
+size?: number;
+/** 自定义样式类名 */
+className?: string;
+/** 背景颜色 */
+bgColor?: string;
+/** 边框颜色 */
+borderColor?: string;
+```
+### 倒计时传入日期的格式
+```
+"YYYY-MM-DD",
+"YYYY/MM/DD",
+"YYYY-MM-DD HH:mm",
+"YYYY/MM/DD HH:mm",
+"YYYY-MM-DD HH:mm:ss",
+"YYYY/MM/DD HH:mm:ss",
+```
+# 更新日志
+## [1.0.0] - 2025-10-07
+### 首次发布

package/dist/TimeRunner.d.ts ADDED Viewed

@@ -0,0 +1,37 @@
+/**
+ * 翻转模式类型：
+ *
+ * card:   翻牌翻转
+ * cube-v: 立方体上下翻转
+ * cube-h: 立方体左右翻转
+ *
+ */
+type TransMode = "card" | "cube-v" | "cube-h";
+interface PropsType {
+    /**
+     * 显示模式，默认：default
+     * default: 当前时间
+     * count: 计时器
+     * 指定时间：倒计时。
+     */
+    showType?: string;
+    /**
+     * 动画模式，
+     * card：卡片
+     * cube-v：上下翻转
+     * cube-h：左右翻转
+     */
+    mode?: TransMode;
+    /** 尺寸，默认40 */
+    size?: number;
+    /** 自定义样式类名 */
+    className?: string;
+    /** 背景颜色 */
+    bgColor?: string;
+    /** 边框颜色 */
+    borderColor?: string;
+    /** 倒计时结束后执行的方法 */
+    finishCountFn?: Function;
+}
+declare const TimeCountdown: (props: PropsType) => import("react/jsx-runtime").JSX.Element;
+export default TimeCountdown;

package/dist/Tools.d.ts ADDED Viewed

@@ -0,0 +1,3 @@
+export declare const getTimeDiff: (endTime: string) => string;
+export declare const countTime: (t: number) => string;
+export declare const isValidTime: (time: string) => boolean;

package/dist/index.d.ts ADDED Viewed

	@@ -0,0 +1,2 @@
1	+ import { default as TimeRunner } from './TimeRunner';
2	+ export { TimeRunner };

package/dist/time-runner.css ADDED Viewed

@@ -0,0 +1 @@

+ .time-runner{width:max-content;display:flex;justify-content:space-between;align-items:center;margin:0 auto;-webkit-user-select:none;user-select:none;position:relative;font-variant-numeric:tabular-nums}.time-runner span{font-size:var(--card-size, 40px);margin:0 3px;padding-bottom:3px;display:inline-block}.time-runner>p{margin:0 3px}.time-runner>div{font-size:var(--card-size, 40px)}.time-runner>div>p{color:#333}.clock-card{position:relative;height:var(--card-h, 80px);width:var(--card-w, 50px);box-shadow:0 1px 5px #333;border-radius:6px}.clock-card:before{content:"";position:absolute;top:50%;left:0;background-color:#999;width:100%;height:1.5px;z-index:3;overflow:hidden}.clock-card .clock-f,.clock-card .clock-b{width:100%;height:100%;position:absolute;top:0;left:0}.clock-card .clock-f p,.clock-card .clock-b p{position:absolute;left:0;height:50%;width:100%;margin-bottom:0;text-align:center;font-size:var(--card-size, 40px);background-color:var(--bgColor, #333);color:#fff;overflow:hidden;border-left:solid 1px var(--borderColor, #999);border-right:solid 1px var(--borderColor, #999)}.clock-card .clock-f p:nth-child(1),.clock-card .clock-b p:nth-child(1){top:0;border-top:solid 1px var(--borderColor, #999)}.clock-card .clock-f p:nth-child(2),.clock-card .clock-b p:nth-child(2){bottom:0;border-bottom:solid 1px var(--borderColor, #999)}.clock-card .clock-f p:nth-child(1){line-height:calc(var(--card-h, 80px) - 2px);transform-origin:bottom;backface-visibility:hidden;border-radius:7px 7px 0 0}.clock-card .clock-f p:nth-child(2){line-height:2px;border-radius:0 0 6px 6px}.clock-card .clock-f.run p:nth-child(1){transition:var(--delay) ease-in-out;transform:perspective(50px) rotateX(-180deg)}.clock-card .clock-b p:nth-child(1){line-height:calc(var(--card-h, 80px) - 2px);border-radius:7px 7px 0 0}.clock-card .clock-b p:nth-child(2){line-height:2px;transform-origin:top;transform:perspective(50px) rotateX(179.99deg);backface-visibility:hidden;border-radius:0 0 6px 6px}.clock-card .clock-b.run p:nth-child(2){transition:var(--delay) ease-in-out;transform:rotateX(0);z-index:2}.clock-cube-3d-v{width:var(--card-w, 50px);height:var(--card-h, 80px);position:relative;perspective:300px}.clock-cube-3d-v div{width:100%;height:100%;transform-style:preserve-3d;transform-origin:center center var(--transy)}.clock-cube-3d-v p{width:100%;height:100%;line-height:var(--card-h, 80px);text-align:center;font-size:var(--card-size, 40px);background-color:var(--bgColor, #333);border:solid 1px var(--borderColor, #999);color:#fff;margin-bottom:0;box-shadow:0 1px 2px #333;border-radius:2px}.clock-cube-3d-v p:nth-child(1){position:absolute;transform-origin:0 100%;transform:translateY(-100%) rotateX(90deg)}.clock-cube-3d-v.run div{transform:rotateX(-90deg);transition:var(--delay)}.clock-cube-3d-h{width:var(--card-w, 50px);height:var(--card-h, 80px);position:relative;perspective:300px}.clock-cube-3d-h div{width:100%;height:100%;transform-style:preserve-3d;transform-origin:center center var(--transx)}.clock-cube-3d-h p{width:100%;height:100%;line-height:var(--card-h, 80px);text-align:center;font-size:var(--card-size, 40px);background-color:var(--bgColor, #333);border:solid 1px var(--borderColor, #999);color:#fff;margin-bottom:0;box-shadow:0 1px 2px #333;border-radius:2px}.clock-cube-3d-h p:nth-child(1){position:absolute;transform-origin:100% 0;transform:translate(-100%) rotateY(-90deg)}.clock-cube-3d-h.run div{transform:rotateY(90deg);transition:var(--delay)}

package/dist/time-runner.d.ts ADDED Viewed

	@@ -0,0 +1,2 @@
1	+ export * from './index'
2	+ export {}

package/dist/time-runner.es.js ADDED Viewed

@@ -0,0 +1,393 @@
+import { jsx as c, Fragment as et, jsxs as W } from "react/jsx-runtime";
+import { memo as ft, useState as ct, useRef as lt, useEffect as K } from "react";
+function ht(m) {
+  return m && m.__esModule && Object.prototype.hasOwnProperty.call(m, "default") ? m.default : m;
+}
+var G = { exports: {} }, mt = G.exports, it;
+function $t() {
+  return it || (it = 1, (function(m, d) {
+    (function(l, v) {
+      m.exports = v();
+    })(mt, (function() {
+      var l = 1e3, v = 6e4, Y = 36e5, k = "millisecond", g = "second", O = "minute", f = "hour", D = "day", x = "week", b = "month", Z = "quarter", $ = "year", S = "date", V = "Invalid Date", q = /^(\d{4})[-/]?(\d{1,2})?[-/]?(\d{0,2})[Tt\s]*(\d{1,2})?:?(\d{1,2})?:?(\d{1,2})?[.:]?(\d+)?$/, X = /\[([^\]]+)]|Y{1,4}|M{1,4}|D{1,2}|d{1,4}|H{1,2}|h{1,2}|a|A|m{1,2}|s{1,2}|Z{1,2}|SSS/g, _ = { name: "en", weekdays: "Sunday_Monday_Tuesday_Wednesday_Thursday_Friday_Saturday".split("_"), months: "January_February_March_April_May_June_July_August_September_October_November_December".split("_"), ordinal: function(s) {
+        var r = ["th", "st", "nd", "rd"], t = s % 100;
+        return "[" + s + (r[(t - 20) % 10] || r[t] || r[0]) + "]";
+      } }, A = function(s, r, t) {
+        var n = String(s);
+        return !n || n.length >= r ? s : "" + Array(r + 1 - n.length).join(t) + s;
+      }, z = { s: A, z: function(s) {
+        var r = -s.utcOffset(), t = Math.abs(r), n = Math.floor(t / 60), e = t % 60;
+        return (r <= 0 ? "+" : "-") + A(n, 2, "0") + ":" + A(e, 2, "0");
+      }, m: function s(r, t) {
+        if (r.date() < t.date()) return -s(t, r);
+        var n = 12 * (t.year() - r.year()) + (t.month() - r.month()), e = r.clone().add(n, b), i = t - e < 0, a = r.clone().add(n + (i ? -1 : 1), b);
+        return +(-(n + (t - e) / (i ? e - a : a - e)) || 0);
+      }, a: function(s) {
+        return s < 0 ? Math.ceil(s) || 0 : Math.floor(s);
+      }, p: function(s) {
+        return { M: b, y: $, w: x, d: D, D: S, h: f, m: O, s: g, ms: k, Q: Z }[s] || String(s || "").toLowerCase().replace(/s$/, "");
+      }, u: function(s) {
+        return s === void 0;
+      } }, j = "en", H = {};
+      H[j] = _;
+      var nt = "$isDayjsObject", tt = function(s) {
+        return s instanceof B || !(!s || !s[nt]);
+      }, P = function s(r, t, n) {
+        var e;
+        if (!r) return j;
+        if (typeof r == "string") {
+          var i = r.toLowerCase();
+          H[i] && (e = i), t && (H[i] = t, e = i);
+          var a = r.split("-");
+          if (!e && a.length > 1) return s(a[0]);
+        } else {
+          var o = r.name;
+          H[o] = r, e = o;
+        }
+        return !n && e && (j = e), e || !n && j;
+      }, p = function(s, r) {
+        if (tt(s)) return s.clone();
+        var t = typeof r == "object" ? r : {};
+        return t.date = s, t.args = arguments, new B(t);
+      }, u = z;
+      u.l = P, u.i = tt, u.w = function(s, r) {
+        return p(s, { locale: r.$L, utc: r.$u, x: r.$x, $offset: r.$offset });
+      };
+      var B = (function() {
+        function s(t) {
+          this.$L = P(t.locale, null, !0), this.parse(t), this.$x = this.$x || t.x || {}, this[nt] = !0;
+        }
+        var r = s.prototype;
+        return r.parse = function(t) {
+          this.$d = (function(n) {
+            var e = n.date, i = n.utc;
+            if (e === null) return /* @__PURE__ */ new Date(NaN);
+            if (u.u(e)) return /* @__PURE__ */ new Date();
+            if (e instanceof Date) return new Date(e);
+            if (typeof e == "string" && !/Z$/i.test(e)) {
+              var a = e.match(q);
+              if (a) {
+                var o = a[2] - 1 || 0, h = (a[7] || "0").substring(0, 3);
+                return i ? new Date(Date.UTC(a[1], o, a[3] || 1, a[4] || 0, a[5] || 0, a[6] || 0, h)) : new Date(a[1], o, a[3] || 1, a[4] || 0, a[5] || 0, a[6] || 0, h);
+              }
+            }
+            return new Date(e);
+          })(t), this.init();
+        }, r.init = function() {
+          var t = this.$d;
+          this.$y = t.getFullYear(), this.$M = t.getMonth(), this.$D = t.getDate(), this.$W = t.getDay(), this.$H = t.getHours(), this.$m = t.getMinutes(), this.$s = t.getSeconds(), this.$ms = t.getMilliseconds();
+        }, r.$utils = function() {
+          return u;
+        }, r.isValid = function() {
+          return this.$d.toString() !== V;
+        }, r.isSame = function(t, n) {
+          var e = p(t);
+          return this.startOf(n) <= e && e <= this.endOf(n);
+        }, r.isAfter = function(t, n) {
+          return p(t) < this.startOf(n);
+        }, r.isBefore = function(t, n) {
+          return this.endOf(n) < p(t);
+        }, r.$g = function(t, n, e) {
+          return u.u(t) ? this[n] : this.set(e, t);
+        }, r.unix = function() {
+          return Math.floor(this.valueOf() / 1e3);
+        }, r.valueOf = function() {
+          return this.$d.getTime();
+        }, r.startOf = function(t, n) {
+          var e = this, i = !!u.u(n) || n, a = u.p(t), o = function(N, w) {
+            var C = u.w(e.$u ? Date.UTC(e.$y, w, N) : new Date(e.$y, w, N), e);
+            return i ? C : C.endOf(D);
+          }, h = function(N, w) {
+            return u.w(e.toDate()[N].apply(e.toDate("s"), (i ? [0, 0, 0, 0] : [23, 59, 59, 999]).slice(w)), e);
+          }, M = this.$W, y = this.$M, T = this.$D, F = "set" + (this.$u ? "UTC" : "");
+          switch (a) {
+            case $:
+              return i ? o(1, 0) : o(31, 11);
+            case b:
+              return i ? o(1, y) : o(0, y + 1);
+            case x:
+              var L = this.$locale().weekStart || 0, R = (M < L ? M + 7 : M) - L;
+              return o(i ? T - R : T + (6 - R), y);
+            case D:
+            case S:
+              return h(F + "Hours", 0);
+            case f:
+              return h(F + "Minutes", 1);
+            case O:
+              return h(F + "Seconds", 2);
+            case g:
+              return h(F + "Milliseconds", 3);
+            default:
+              return this.clone();
+          }
+        }, r.endOf = function(t) {
+          return this.startOf(t, !1);
+        }, r.$set = function(t, n) {
+          var e, i = u.p(t), a = "set" + (this.$u ? "UTC" : ""), o = (e = {}, e[D] = a + "Date", e[S] = a + "Date", e[b] = a + "Month", e[$] = a + "FullYear", e[f] = a + "Hours", e[O] = a + "Minutes", e[g] = a + "Seconds", e[k] = a + "Milliseconds", e)[i], h = i === D ? this.$D + (n - this.$W) : n;
+          if (i === b || i === $) {
+            var M = this.clone().set(S, 1);
+            M.$d[o](h), M.init(), this.$d = M.set(S, Math.min(this.$D, M.daysInMonth())).$d;
+          } else o && this.$d[o](h);
+          return this.init(), this;
+        }, r.set = function(t, n) {
+          return this.clone().$set(t, n);
+        }, r.get = function(t) {
+          return this[u.p(t)]();
+        }, r.add = function(t, n) {
+          var e, i = this;
+          t = Number(t);
+          var a = u.p(n), o = function(y) {
+            var T = p(i);
+            return u.w(T.date(T.date() + Math.round(y * t)), i);
+          };
+          if (a === b) return this.set(b, this.$M + t);
+          if (a === $) return this.set($, this.$y + t);
+          if (a === D) return o(1);
+          if (a === x) return o(7);
+          var h = (e = {}, e[O] = v, e[f] = Y, e[g] = l, e)[a] || 1, M = this.$d.getTime() + t * h;
+          return u.w(M, this);
+        }, r.subtract = function(t, n) {
+          return this.add(-1 * t, n);
+        }, r.format = function(t) {
+          var n = this, e = this.$locale();
+          if (!this.isValid()) return e.invalidDate || V;
+          var i = t || "YYYY-MM-DDTHH:mm:ssZ", a = u.z(this), o = this.$H, h = this.$m, M = this.$M, y = e.weekdays, T = e.months, F = e.meridiem, L = function(w, C, U, Q) {
+            return w && (w[C] || w(n, i)) || U[C].slice(0, Q);
+          }, R = function(w) {
+            return u.s(o % 12 || 12, w, "0");
+          }, N = F || function(w, C, U) {
+            var Q = w < 12 ? "AM" : "PM";
+            return U ? Q.toLowerCase() : Q;
+          };
+          return i.replace(X, (function(w, C) {
+            return C || (function(U) {
+              switch (U) {
+                case "YY":
+                  return String(n.$y).slice(-2);
+                case "YYYY":
+                  return u.s(n.$y, 4, "0");
+                case "M":
+                  return M + 1;
+                case "MM":
+                  return u.s(M + 1, 2, "0");
+                case "MMM":
+                  return L(e.monthsShort, M, T, 3);
+                case "MMMM":
+                  return L(T, M);
+                case "D":
+                  return n.$D;
+                case "DD":
+                  return u.s(n.$D, 2, "0");
+                case "d":
+                  return String(n.$W);
+                case "dd":
+                  return L(e.weekdaysMin, n.$W, y, 2);
+                case "ddd":
+                  return L(e.weekdaysShort, n.$W, y, 3);
+                case "dddd":
+                  return y[n.$W];
+                case "H":
+                  return String(o);
+                case "HH":
+                  return u.s(o, 2, "0");
+                case "h":
+                  return R(1);
+                case "hh":
+                  return R(2);
+                case "a":
+                  return N(o, h, !0);
+                case "A":
+                  return N(o, h, !1);
+                case "m":
+                  return String(h);
+                case "mm":
+                  return u.s(h, 2, "0");
+                case "s":
+                  return String(n.$s);
+                case "ss":
+                  return u.s(n.$s, 2, "0");
+                case "SSS":
+                  return u.s(n.$ms, 3, "0");
+                case "Z":
+                  return a;
+              }
+              return null;
+            })(w) || a.replace(":", "");
+          }));
+        }, r.utcOffset = function() {
+          return 15 * -Math.round(this.$d.getTimezoneOffset() / 15);
+        }, r.diff = function(t, n, e) {
+          var i, a = this, o = u.p(n), h = p(t), M = (h.utcOffset() - this.utcOffset()) * v, y = this - h, T = function() {
+            return u.m(a, h);
+          };
+          switch (o) {
+            case $:
+              i = T() / 12;
+              break;
+            case b:
+              i = T();
+              break;
+            case Z:
+              i = T() / 3;
+              break;
+            case x:
+              i = (y - M) / 6048e5;
+              break;
+            case D:
+              i = (y - M) / 864e5;
+              break;
+            case f:
+              i = y / Y;
+              break;
+            case O:
+              i = y / v;
+              break;
+            case g:
+              i = y / l;
+              break;
+            default:
+              i = y;
+          }
+          return e ? i : u.a(i);
+        }, r.daysInMonth = function() {
+          return this.endOf(b).$D;
+        }, r.$locale = function() {
+          return H[this.$L];
+        }, r.locale = function(t, n) {
+          if (!t) return this.$L;
+          var e = this.clone(), i = P(t, n, !0);
+          return i && (e.$L = i), e;
+        }, r.clone = function() {
+          return u.w(this.$d, this);
+        }, r.toDate = function() {
+          return new Date(this.valueOf());
+        }, r.toJSON = function() {
+          return this.isValid() ? this.toISOString() : null;
+        }, r.toISOString = function() {
+          return this.$d.toISOString();
+        }, r.toString = function() {
+          return this.$d.toUTCString();
+        }, s;
+      })(), st = B.prototype;
+      return p.prototype = st, [["$ms", k], ["$s", g], ["$m", O], ["$H", f], ["$W", D], ["$M", b], ["$y", $], ["$D", S]].forEach((function(s) {
+        st[s[1]] = function(r) {
+          return this.$g(r, s[0], s[1]);
+        };
+      })), p.extend = function(s, r) {
+        return s.$i || (s(r, B, p), s.$i = !0), p;
+      }, p.locale = P, p.isDayjs = tt, p.unix = function(s) {
+        return p(1e3 * s);
+      }, p.en = H[j], p.Ls = H, p.p = {}, p;
+    }));
+  })(G)), G.exports;
+}
+var pt = $t();
+const J = /* @__PURE__ */ ht(pt), E = 60, Mt = [
+  "YYYY-MM-DD",
+  "YYYY/MM/DD",
+  "YYYY-MM-DD HH:mm",
+  "YYYY/MM/DD HH:mm",
+  "YYYY-MM-DD HH:mm:ss",
+  "YYYY/MM/DD HH:mm:ss"
+], at = (m) => {
+  if (!rt(m))
+    return "00:00:00";
+  const d = J(m).diff(J());
+  if (d <= 0)
+    return "00:00:00";
+  const l = Math.floor(d / 1e3), v = Math.floor(l / 86400), Y = Math.floor(l % 86400 / 3600), k = Math.floor(l % 3600 / 60), g = l % 60;
+  return `${v ? `${v}:` : ""}${`${Y}`.padStart(2, "0")}:${`${k}`.padStart(2, "0")}:${`${g}`.padStart(2, "0")}`;
+}, ut = (m) => {
+  const d = (l) => `${l}`.padStart(2, "0");
+  return `${d(Math.floor(m / E / E))}:${d(Math.floor(m / E) % E)}:${d(m % E)}`;
+}, rt = (m) => Mt.some((d) => J(m, d, !0).isValid()), ot = "HH:mm:ss", dt = 900, gt = (m) => {
+  const { mode: d, showType: l = "default", size: v = 40, className: Y, bgColor: k, borderColor: g, finishCountFn: O } = m, [f, D] = ct(
+    l === "count" ? ut(0) : l === "default" ? J().format(ot) : at(l)
+  ), x = lt({
+    t: null
+  }), b = {
+    "--card-size": `${v}px`,
+    "--card-w": `${v * 1.25}px`,
+    "--card-h": `${v * 2}px`,
+    // 下面两个必须是一个确定的数字，不能是表达式
+    "--transx": `${-v * 1.25 / 2}px`,
+    "--transy": `${-v}px`,
+    "--delay": `${dt / 1e3}s`,
+    "--bgColor": k,
+    "--borderColor": g
+  };
+  K(() => {
+    let $ = Date.now();
+    x.current.t && (clearInterval(x.current.t), x.current.t = null, $ = Date.now()), x.current.t = setInterval(() => {
+      let S = () => "";
+      l === "count" ? S = () => ut(Math.floor((Date.now() - $) / 1e3)) : l === "default" ? S = () => J().format(ot) : S = () => at(l), D(S());
+    }, 1e3);
+  }, [l]), K(() => {
+    rt(l) && f === "00:00:00" && O && setTimeout(() => {
+      O();
+    }, 1e3);
+  }, [f, l, O]);
+  const Z = () => {
+    if (!f)
+      return null;
+    const $ = f.split(":"), S = $[$.length - 3].split(""), V = $[$.length - 2].split(""), q = $[$.length - 1].split(""), X = $.length === 4 ? $[0].split("") : [], _ = rt(l), A = X.map((j, H) => /* @__PURE__ */ c(I, { mode: d, time: +j, limit: _ ? -9 : 9 }, H)), z = /* @__PURE__ */ c("span", { children: ":" });
+    return /* @__PURE__ */ W(et, { children: [
+      A.length ? /* @__PURE__ */ W(et, { children: [
+        A,
+        _ ? /* @__PURE__ */ c("p", { children: "天" }) : z
+      ] }) : null,
+      /* @__PURE__ */ c(I, { mode: d, time: +S[0], limit: _ ? -2 : 2 }),
+      /* @__PURE__ */ c(I, { mode: d, time: +S[1], limit: _ ? -9 : 9 }),
+      _ ? /* @__PURE__ */ c("p", { children: "小时" }) : z,
+      /* @__PURE__ */ c(I, { mode: d, time: +V[0], limit: _ ? -5 : 5 }),
+      /* @__PURE__ */ c(I, { mode: d, time: +V[1], limit: _ ? -9 : 9 }),
+      _ ? /* @__PURE__ */ c("p", { children: "分" }) : z,
+      /* @__PURE__ */ c(I, { mode: d, time: +q[0], limit: _ ? -5 : 5 }),
+      /* @__PURE__ */ c(I, { mode: d, time: +q[1], limit: _ ? -9 : 9 }),
+      _ && /* @__PURE__ */ c("p", { children: "秒" })
+    ] });
+  };
+  return /* @__PURE__ */ c("div", { className: `time-runner ${Y || ""}`, style: b, children: Z() });
+}, Dt = (m) => {
+  const { time: d, limit: l, mode: v } = m, [Y, k] = ct(!1), g = lt({
+    t: d
+  });
+  return K(() => {
+    d !== g.current.t && k(!0);
+  }, [d]), K(() => {
+    Y && setTimeout(() => {
+      g.current.t = d, k(!1);
+    }, dt);
+  }, [Y, d]), /* @__PURE__ */ c(et, { children: (() => {
+    const { t: f } = g.current;
+    let D = f;
+    switch (l > 0 ? D = f >= l ? 0 : f + 1 : D = f <= 0 ? Math.abs(l) : f - 1, v) {
+      case "card":
+        return /* @__PURE__ */ W("div", { className: "clock-card", children: [
+          /* @__PURE__ */ W("div", { className: `clock-b ${Y ? "run" : ""}`, children: [
+            /* @__PURE__ */ c("p", { children: D }),
+            /* @__PURE__ */ c("p", { children: D })
+          ] }),
+          /* @__PURE__ */ W("div", { className: `clock-f ${Y ? "run" : ""}`, children: [
+            /* @__PURE__ */ c("p", { children: f }),
+            /* @__PURE__ */ c("p", { children: f })
+          ] })
+        ] });
+      case "cube-v":
+        return /* @__PURE__ */ c("div", { className: `clock-cube-3d-v ${Y ? "run" : ""}`, children: /* @__PURE__ */ W("div", { children: [
+          /* @__PURE__ */ c("p", { children: D }),
+          /* @__PURE__ */ c("p", { children: f })
+        ] }) });
+      case "cube-h":
+        return /* @__PURE__ */ c("div", { className: `clock-cube-3d-h ${Y ? "run" : ""}`, children: /* @__PURE__ */ W("div", { children: [
+          /* @__PURE__ */ c("p", { children: D }),
+          /* @__PURE__ */ c("p", { children: f })
+        ] }) });
+      default:
+        return /* @__PURE__ */ c("div", { children: /* @__PURE__ */ c("p", { children: f }) });
+    }
+  })() });
+}, I = ft(Dt);
+export {
+  gt as TimeRunner
+};

package/dist/time-runner.umd.js ADDED Viewed

@@ -0,0 +1 @@

package/package.json ADDED Viewed

@@ -0,0 +1,42 @@
+{
+  "name": "time-runner",
+  "version": "1.0.0",
+  "description": "Displaying timer, current time, and countdown with light animation effects(React component)",
+  "keywords": ["react", "countdown", "timer", "hook", "card", "less", "animation", "vite"],
+  "main": "./dist/time-runner.umd.js",
+  "module": "./dist/time-runner.es.js",
+  "types": "./dist/time-runner.d.ts",
+  "type": "module",
+  "author": "feiqi",
+  "license": "MIT",
+  "scripts": {
+    "build": "vite build",
+    "dev": "vite --port 3001"
+  },
+  "files": [
+    "dist"
+  ],
+  "peerDependencies": {
+    "react": ">=16.8.0",
+    "react-dom": ">=16.8.0"
+  },
+  "devDependencies": {
+    "@types/react": "^18.2.56",
+    "@typescript-eslint/parser": "^8.44.0",
+    "@vitejs/plugin-react": "^5.0.4",
+    "eslint": "^8.56.0",
+    "eslint-plugin-react": "^7.33.2",
+    "eslint-plugin-react-hooks": "^4.6.0",
+    "eslint-plugin-react-refresh": "^0.4.5",
+    "less": "^4.4.1",
+    "react": "18.2.0",
+    "react-dom": "18.2.0",
+    "typescript": "^5.9.3",
+    "vite": "^7.1.8",
+    "vite-plugin-dts": "^4.5.4",
+    "vite-plugin-eslint": "^1.8.1"
+  },
+  "dependencies": {
+    "dayjs": "^1.11.18"
+  }
+}