Build & Release v1.1.23

dist/components/Box.js

@@ -28,7 +28,7 @@ const m = (o) => (t, i) => {
 }, g = (o, t, i) => (e, f) => {
   if (typeof f == "number" || typeof f == "string")
     for (let c = 0; c < i.length; c++)
-      e[o + "-" + i[c]] = t(f);
+      e[o + i[c]] = t(f);
 }, s = (o) => (t, i) => {
   x(i) && (t[o] = i);
 }, C = {

dist/components/ColorBox.js

@@ -15,7 +15,7 @@ function d(r) {
         e(o)
       ]),
       ...n(o),
-      children: c || "."
+      children: c || ""
     }
   );
 }

dist/components/LabeledList.js

@@ -1,4 +1,4 @@
-import { jsx as l, jsxs as d } from "react/jsx-runtime";
+import { jsx as l, jsxs as b } from "react/jsx-runtime";
 import { classes as i } from "../common/react.js";
 import { Box as r, unit as g } from "./Box.js";
 import { Divider as x } from "./Divider.js";
@@ -12,7 +12,7 @@ import '../assets/LabeledList.css';const v = "_labeledList_pb6nb_9", y = "_row_p
 };
 function p(e) {
   const { children: t } = e;
-  return /* @__PURE__ */ l("table", { className: "LabeledList", children: t });
+  return /* @__PURE__ */ l("table", { className: "LabeledList", children: /* @__PURE__ */ l("tbody", { children: t }) });
 }
 function z(e) {
   const {
@@ -21,15 +21,15 @@ function z(e) {
     labelColor: _ = "label",
     labelWrap: m,
     color: L,
-    textAlign: f,
+    textAlign: h,
     buttons: a,
-    content: h,
+    content: f,
     children: u,
     verticalAlign: c = "baseline",
-    tooltip: b
+    tooltip: d
   } = e;
   let n;
-  s && (n = s, typeof s == "string" && (n += ":")), b !== void 0 && (n = /* @__PURE__ */ l(N, { content: b, children: /* @__PURE__ */ l(
+  s && (n = s, typeof s == "string" && (n += ":")), d !== void 0 && (n = /* @__PURE__ */ l(N, { content: d, children: /* @__PURE__ */ l(
     r,
     {
       as: "span",
@@ -53,19 +53,19 @@ function z(e) {
       children: n
     }
   );
-  return /* @__PURE__ */ d("tr", { className: i([o.row, t]), children: [
+  return /* @__PURE__ */ b("tr", { className: i([o.row, t]), children: [
     w,
-    /* @__PURE__ */ d(
+    /* @__PURE__ */ b(
       r,
       {
         as: "td",
         color: L,
-        textAlign: f,
+        textAlign: h,
         className: o.cell,
         colSpan: a ? void 0 : 2,
         verticalAlign: c,
         children: [
-          h,
+          f,
           u
         ]
       }

dist/components/TimeDisplay.d.ts

@@ -0,0 +1,10 @@
+interface TimeDisplayProps {
+    /** Whether the TimeDisplay should automatically increment or decrement (plain prop to dec.) */
+    auto?: 'up' | 'down' | true;
+    /** An optional function to format the value */
+    format?: (value: number) => string;
+    /** The value that the TimeDisplay needs to render - if you pass a wrong type it will be rendered directly */
+    value: number;
+}
+export declare function TimeDisplay(props: TimeDisplayProps): string | number | null;
+export {};

dist/components/TimeDisplay.js

@@ -1,34 +1,25 @@
-import { Component as a } from "react";
-import { formatTime as o } from "../common/format.js";
-function s(e) {
-  return typeof e == "number" && Number.isFinite(e) && !Number.isNaN(e);
-}
-class l extends a {
-  constructor(t) {
-    super(t), this.timer = null, this.last_seen_value = void 0, this.state = {
-      value: 0
-    }, s(t.value) && (this.state.value = Number(t.value), this.last_seen_value = Number(t.value));
-  }
-  componentDidUpdate() {
-    this.props.auto !== void 0 && (clearInterval(this.timer), this.timer = setInterval(() => this.tick(), 1e3));
-  }
-  tick() {
-    let t = Number(this.state.value);
-    this.props.value !== this.last_seen_value && (this.last_seen_value = this.props.value, t = this.props.value);
-    const i = this.props.auto === "up" ? 10 : -10, r = Math.max(0, t + i);
-    this.setState({ value: r });
-  }
-  componentDidMount() {
-    this.props.auto !== void 0 && (this.timer = setInterval(() => this.tick(), 1e3));
-  }
-  componentWillUnmount() {
-    clearInterval(this.timer);
-  }
-  render() {
-    const t = this.state.value;
-    return s(t) ? this.props.format ? this.props.format(t) : o(t) : this.state.value || null;
-  }
+import { useState as l, useRef as d, useEffect as f } from "react";
+import { formatTime as v } from "../common/format.js";
+const u = (t) => typeof t == "number" && Number.isFinite(t) && !Number.isNaN(t);
+function b(t) {
+  const {
+    value: e = 0,
+    auto: r = void 0,
+    format: o = void 0
+  } = t, [i, a] = l(
+    () => u(e) ? e : 0
+  ), [s, m] = l(
+    u(e) ? e : void 0
+  ), n = d(null);
+  return f(() => (console.log("auto", r), r !== void 0 && (n.current = setInterval(() => {
+    const c = r === "up" ? 10 : -10;
+    a((p) => Math.max(0, p + c));
+  }, 1e3)), () => {
+    n.current && clearInterval(n.current);
+  }), [r]), f(() => {
+    e !== s && (m(e), a(e));
+  }, [e, s]), u(e) ? o ? o(i) : v(i) : e || null;
 }
 export {
-  l as TimeDisplay
+  b as TimeDisplay
 };

package.json

@@ -1,6 +1,6 @@
 {
   "name": "tgui-core",
-  "version": "1.1.22",
+  "version": "1.1.23",
   "description": "TGUI core component library",
   "keywords": [
     "TGUI",