tgui-core 1.2.0 → 1.3.0

package/dist/components/NumberInput.js

@@ -1,44 +1,36 @@
-import '../assets/NumberInput.css';var N = Object.defineProperty;
-var w = (c, d, e) => d in c ? N(c, d, { enumerable: !0, configurable: !0, writable: !0, value: e }) : c[d] = e;
-var l = (c, d, e) => w(c, typeof d != "symbol" ? d + "" : d, e);
-import { jsxs as _, jsx as V } from "react/jsx-runtime";
-import { Component as E, createRef as I } from "react";
-import { KEY as D, isEscape as M } from "../common/keys.js";
-import { clamp as g, round as T } from "../common/math.js";
-import { classes as F } from "../common/react.js";
-import { AnimatedNumber as R } from "./AnimatedNumber.js";
-import { Box as Y } from "./Box.js";
-const B = "_numberInput_4xyrw_20", K = "_fluid_4xyrw_36", L = "_content_4xyrw_40", z = "_barContainer_4xyrw_44", j = "_bar_4xyrw_44", k = "_inner_4xyrw_61", p = {
-  numberInput: B,
-  fluid: K,
-  content: L,
-  barContainer: z,
-  bar: j,
-  inner: k
-};
-class J extends E {
-  constructor(e) {
-    super(e);
+var I = Object.defineProperty;
+var E = (m, d, e) => d in m ? I(m, d, { enumerable: !0, configurable: !0, writable: !0, value: e }) : m[d] = e;
+var o = (m, d, e) => E(m, typeof d != "symbol" ? d + "" : d, e);
+import { jsxs as N, jsx as f } from "react/jsx-runtime";
+import { Component as x, createRef as D } from "react";
+import { KEY as _, isEscape as M } from "../common/keys.js";
+import { clamp as h, round as T } from "../common/math.js";
+import { classes as w } from "../common/react.js";
+import { AnimatedNumber as F } from "./AnimatedNumber.js";
+import { Box as R } from "./Box.js";
+class H extends x {
+  constructor() {
+    super(...arguments);
     // Ref to the input field to set focus & highlight
-    l(this, "inputRef", I());
+    o(this, "inputRef", D());
     // After this time has elapsed we are in drag mode so no editing when dragging ends
-    l(this, "dragTimeout");
+    o(this, "dragTimeout");
     // Call onDrag at this interval
-    l(this, "dragInterval");
+    o(this, "dragInterval");
     // default values for the number input state
-    l(this, "state", {
+    o(this, "state", {
       editing: !1,
       dragging: !1,
       currentValue: 0,
       previousValue: 0,
       origin: 0
     });
-    l(this, "handleDragStart", (e) => {
-      const { value: o, disabled: a } = this.props, { editing: s } = this.state;
-      if (a || s)
+    o(this, "handleDragStart", (e) => {
+      const { value: u, disabled: n } = this.props, { editing: s } = this.state;
+      if (n || s)
         return;
       document.body.style["pointer-events"] = "none";
-      const r = parseFloat(o.toString());
+      const r = Number.parseFloat(u.toString());
       this.setState({
         dragging: !1,
         origin: e.screenY,
@@ -49,59 +41,59 @@ class J extends E {
           dragging: !0
         });
       }, 250), this.dragInterval = setInterval(() => {
-        const { dragging: u, currentValue: i, previousValue: t } = this.state, { onDrag: n } = this.props;
-        u && i !== t && (this.setState({
+        const { dragging: l, currentValue: i, previousValue: t } = this.state, { onDrag: a } = this.props;
+        l && i !== t && (this.setState({
           previousValue: i
-        }), n == null || n(i));
+        }), a == null || a(i));
       }, 400), document.addEventListener("mousemove", this.handleDragMove), document.addEventListener("mouseup", this.handleDragEnd);
     });
-    l(this, "handleDragMove", (e) => {
-      const { minValue: o, maxValue: a, step: s, stepPixelSize: r, disabled: u } = this.props;
-      u || this.setState((i) => {
-        const t = { ...i }, n = t.origin - e.screenY;
+    o(this, "handleDragMove", (e) => {
+      const { minValue: u, maxValue: n, step: s, stepPixelSize: r, disabled: l } = this.props;
+      l || this.setState((i) => {
+        const t = { ...i }, a = t.origin - e.screenY;
         if (i.dragging) {
-          const f = r || 1, m = g(
-            t.currentValue + n * s / f,
-            o - s,
-            a + s
+          const g = r || 1, c = h(
+            t.currentValue + a * s / g,
+            u - s,
+            n + s
           );
-          Math.abs(m - t.currentValue) >= s ? (t.currentValue = g(
-            T(m / s, 0) * s,
-            o,
-            a
-          ), t.origin = e.screenY) : Math.abs(n) > f && (t.origin = e.screenY);
-        } else Math.abs(n) > 4 && (t.dragging = !0);
+          Math.abs(c - t.currentValue) >= s ? (t.currentValue = h(
+            T(c / s, 0) * s,
+            u,
+            n
+          ), t.origin = e.screenY) : Math.abs(a) > g && (t.origin = e.screenY);
+        } else Math.abs(a) > 4 && (t.dragging = !0);
         return t;
       });
     });
-    l(this, "handleDragEnd", (e) => {
-      const { dragging: o, currentValue: a } = this.state, { onDrag: s, onChange: r, disabled: u } = this.props;
-      if (!u) {
+    o(this, "handleDragEnd", (e) => {
+      const { dragging: u, currentValue: n } = this.state, { onDrag: s, onChange: r, disabled: l } = this.props;
+      if (!l) {
         if (document.body.style["pointer-events"] = "auto", clearInterval(this.dragInterval), clearTimeout(this.dragTimeout), this.setState({
           dragging: !1,
-          editing: !o,
-          previousValue: a
-        }), o)
-          r == null || r(a), s == null || s(a);
+          editing: !u,
+          previousValue: n
+        }), u)
+          r == null || r(n), s == null || s(n);
         else if (this.inputRef) {
           const i = this.inputRef.current;
-          i && (i.value = `${a}`, setTimeout(() => {
+          i && (i.value = `${n}`, setTimeout(() => {
             i.focus(), i.select();
           }, 10));
         }
         document.removeEventListener("mousemove", this.handleDragMove), document.removeEventListener("mouseup", this.handleDragEnd);
       }
     });
-    l(this, "handleBlur", (e) => {
-      const { editing: o, previousValue: a } = this.state, { minValue: s, maxValue: r, onChange: u, onDrag: i, disabled: t } = this.props;
-      if (t || !o)
+    o(this, "handleBlur", (e) => {
+      const { editing: u, previousValue: n } = this.state, { minValue: s, maxValue: r, onChange: l, onDrag: i, disabled: t } = this.props;
+      if (t || !u)
         return;
-      const n = g(
-        parseFloat(e.target.value),
+      const a = h(
+        Number.parseFloat(e.target.value),
         s,
         r
       );
-      if (isNaN(n)) {
+      if (Number.isNaN(a)) {
         this.setState({
           editing: !1
         });
@@ -109,22 +101,22 @@ class J extends E {
       }
       this.setState({
         editing: !1,
-        currentValue: n,
-        previousValue: n
-      }), a !== n && (u == null || u(n), i == null || i(n));
+        currentValue: a,
+        previousValue: a
+      }), n !== a && (l == null || l(a), i == null || i(a));
     });
-    l(this, "handleKeyDown", (e) => {
-      const { minValue: o, maxValue: a, onChange: s, onDrag: r, disabled: u } = this.props;
-      if (u)
+    o(this, "handleKeyDown", (e) => {
+      const { minValue: u, maxValue: n, onChange: s, onDrag: r, disabled: l } = this.props;
+      if (l)
         return;
       const { previousValue: i } = this.state;
-      if (e.key === D.Enter) {
-        const t = g(
-          parseFloat(e.currentTarget.value),
-          o,
-          a
+      if (e.key === _.Enter) {
+        const t = h(
+          Number.parseFloat(e.currentTarget.value),
+          u,
+          n
         );
-        if (isNaN(t)) {
+        if (Number.isNaN(t)) {
           this.setState({
             editing: !1
           });
@@ -141,71 +133,71 @@ class J extends E {
     });
   }
   componentDidMount() {
-    const e = parseFloat(this.props.value.toString());
+    const e = Number.parseFloat(this.props.value.toString());
     this.setState({
       currentValue: e,
       previousValue: e
     });
   }
   render() {
-    const { dragging: e, editing: o, currentValue: a } = this.state, {
+    const { dragging: e, editing: u, currentValue: n } = this.state, {
       className: s,
       fluid: r,
-      animated: u,
+      animated: l,
       unit: i,
       value: t,
-      minValue: n,
-      maxValue: f,
-      height: m,
+      minValue: a,
+      maxValue: g,
+      height: c,
       width: S,
-      lineHeight: b,
-      fontSize: y,
-      format: v
+      lineHeight: v,
+      fontSize: b,
+      format: V
     } = this.props;
-    let h = parseFloat(t.toString());
-    e && (h = a);
-    const x = /* @__PURE__ */ _("div", { className: p.content, children: [
-      u && !e ? /* @__PURE__ */ V(R, { value: h, format: v }) : v ? v(h) : h,
-      i ? " " + i : ""
+    let p = Number.parseFloat(t.toString());
+    e && (p = n);
+    const y = /* @__PURE__ */ N("div", { className: "NumberInput__content", children: [
+      l && !e ? /* @__PURE__ */ f(F, { value: p, format: V }) : V ? V(p) : p,
+      i ? ` ${i}` : ""
     ] });
-    return /* @__PURE__ */ _(
-      Y,
+    return /* @__PURE__ */ N(
+      R,
       {
-        className: F([
-          p.numberInput,
-          r && p.fluid,
+        className: w([
+          "NumberInput",
+          r && "NumberInput--fluid",
           s
         ]),
         minWidth: S,
-        minHeight: m,
-        lineHeight: b,
-        fontSize: y,
+        minHeight: c,
+        lineHeight: v,
+        fontSize: b,
         onMouseDown: this.handleDragStart,
         children: [
-          /* @__PURE__ */ V("div", { className: p.barContainer, children: /* @__PURE__ */ V(
+          /* @__PURE__ */ f("div", { className: "NumberInput__barContainer", children: /* @__PURE__ */ f(
             "div",
             {
-              className: p.bar,
+              className: "NumberInput__bar",
               style: {
-                height: g(
-                  (h - n) / (f - n) * 100,
+                height: `${h(
+                  (p - a) / (g - a) * 100,
                   0,
                   100
-                ) + "%"
+                )}%`
               }
             }
           ) }),
-          x,
-          /* @__PURE__ */ V(
+          y,
+          /* @__PURE__ */ f(
             "input",
             {
               ref: this.inputRef,
-              className: p.inner,
+              className: "NumberInput__input",
               style: {
-                display: o ? "inline" : "none",
-                height: m,
-                lineHeight: b,
-                fontSize: y
+                display: u ? "inline" : "none",
+                height: c,
+                lineHeight: v,
+                fontSize: b
               },
               onBlur: this.handleBlur,
               onKeyDown: this.handleKeyDown
@@ -217,5 +209,5 @@ class J extends E {
   }
 }
 export {
-  J as NumberInput
+  H as NumberInput
 };

package/dist/components/Popper.d.ts

@@ -1,6 +1,5 @@
 import { Placement } from '@popperjs/core';
 import { PropsWithChildren, ReactNode } from 'react';
-
 type RequiredProps = {
     /** The content to display in the popper */
     content: ReactNode;

package/dist/components/ProgressBar.d.ts

@@ -1,6 +1,5 @@
 import { PropsWithChildren } from 'react';
 import { BoxProps } from './Box';
-
 type Props = {
     /**
      * Current progress as a floating point number between `minValue` (default: 0) and `maxValue` (default: 1).

package/dist/components/ProgressBar.js

@@ -1,37 +1,32 @@
-import { jsxs as x, jsx as n } from "react/jsx-runtime";
-import { CSS_COLORS as v } from "../common/constants.js";
-import { keyOfMatchingRange as y, toFixed as N, scale as S, clamp01 as _ } from "../common/math.js";
-import { classes as m } from "../common/react.js";
-import { p as e } from "../ProgressBar.module-Jzqlebbx.js";
-import { computeBoxProps as B, computeBoxClassName as O } from "./Box.js";
-function w(d) {
+import { jsxs as B, jsx as i } from "react/jsx-runtime";
+import { CSS_COLORS as C } from "../common/constants.js";
+import { keyOfMatchingRange as P, toFixed as h, scale as x, clamp01 as _ } from "../common/math.js";
+import { classes as v } from "../common/react.js";
+import { computeBoxProps as y, computeBoxClassName as N } from "./Box.js";
+function j(n) {
   const {
-    className: f,
-    value: r,
-    minValue: p = 0,
-    maxValue: u = 1,
-    color: C,
-    ranges: g = {},
-    children: l,
-    ...t
-  } = d, a = S(r, p, u), h = l !== void 0, o = C || y(r, g) || "default", s = B(t), c = [
-    e.progressBar,
-    f,
-    O(t)
-  ], i = {
-    width: _(a) * 100 + "%"
+    className: m,
+    value: o,
+    minValue: d = 0,
+    maxValue: f = 1,
+    color: u,
+    ranges: p = {},
+    children: r,
+    ...l
+  } = n, a = x(o, d, f), g = r !== void 0, s = u || P(o, p) || "default", e = y(l), t = ["ProgressBar", m, N(l)], c = {
+    width: `${_(a) * 100}%`
   };
-  return v.includes(o) || o === "default" ? c.push(e["color__" + o]) : (s.style = { ...s.style, borderColor: o }, i.backgroundColor = o), /* @__PURE__ */ x("div", { className: m(c), ...s, children: [
-    /* @__PURE__ */ n(
+  return C.includes(s) || s === "default" ? t.push(`ProgressBar--color--${s}`) : (e.style = { ...e.style, borderColor: s }, c.backgroundColor = s), /* @__PURE__ */ B("div", { className: v(t), ...e, children: [
+    /* @__PURE__ */ i(
       "div",
       {
-        className: m([e.fill, e.fill__animated]),
-        style: i
+        className: "ProgressBar__fill ProgressBar__fill--animated",
+        style: c
       }
     ),
-    /* @__PURE__ */ n("div", { className: e.content, children: h ? l : N(a * 100) + "%" })
+    /* @__PURE__ */ i("div", { className: "ProgressBar__content", children: g ? r : `${h(a * 100)}%` })
   ] });
 }
 export {
-  w as ProgressBar
+  j as ProgressBar
 };

package/dist/components/RestrictedInput.js

@@ -1,89 +1,95 @@
 import { jsxs as E, jsx as h } from "react/jsx-runtime";
-import { KEY_ENTER as I, KEY_ESCAPE as S } from "../common/keycodes.js";
-import { clamp as m } from "../common/math.js";
+import { Component as N, createRef as S } from "react";
+import { KEY_ENTER as I, KEY_ESCAPE as b } from "../common/keycodes.js";
+import { clamp as d } from "../common/math.js";
 import { classes as v } from "../common/react.js";
-import { Component as F, createRef as N } from "react";
-import { Box as C } from "./Box.js";
+import { Box as F } from "./Box.js";
 const g = 0, x = 1e4;
-function M(e, n, t, s) {
-  const i = n || g, o = t || t === 0 ? t : x;
-  let r = s ? e.replace(/[^\-\d.]/g, "") : e.replace(/[^\-\d]/g, "");
-  return s && (r = b(r, i), r = d(".", r)), n < 0 ? (r = _(r), r = d("-", r)) : r = r.replaceAll("-", ""), i <= 1 && o >= 0 ? V(r, i, o, s) : r;
+function C(s, e, t, n) {
+  const i = e || g, o = t || t === 0 ? t : x;
+  let r = n ? s.replace(/[^\-\d.]/g, "") : s.replace(/[^\-\d]/g, "");
+  return n && (r = V(r, i), r = m(".", r)), e < 0 ? (r = _(r), r = m("-", r)) : r = r.replaceAll("-", ""), i <= 1 && o >= 0 ? M(r, i, o, n) : r;
 }
-const V = (e, n, t, s) => {
-  let i = s ? parseFloat(e) : parseInt(e, 10);
-  if (!isNaN(i) && (e.slice(-1) !== "." || i < Math.floor(n))) {
-    let o = m(i, n, t);
+const M = (s, e, t, n) => {
+  const i = n ? Number.parseFloat(s) : Number.parseInt(s, 10);
+  if (!Number.isNaN(i) && (s.slice(-1) !== "." || i < Math.floor(e))) {
+    const o = d(i, e, t);
     if (i !== o)
       return String(o);
   }
-  return e;
+  return s;
 };
-function _(e) {
-  let n = e, t = e.indexOf("-");
-  return t > 0 ? (e = e.replace("-", ""), n = "-".concat(e)) : t === 0 && e.indexOf("-", t + 1) > 0 && (n = e.replaceAll("-", "")), n;
+function _(s) {
+  let e = s;
+  const t = s.indexOf("-");
+  if (t > 0) {
+    const n = s.replace("-", "");
+    e = "-".concat(n);
+  } else t === 0 && s.indexOf("-", t + 1) > 0 && (e = s.replaceAll("-", ""));
+  return e;
 }
-function b(e, n) {
-  let t = e, s = Math.sign(n) * Math.floor(Math.abs(n));
-  return e.indexOf(".") === 0 ? t = String(s).concat(e) : e.indexOf("-") === 0 && e.indexOf(".") === 1 && (t = s + ".".concat(e.slice(2))), t;
+function V(s, e) {
+  let t = s;
+  const n = Math.sign(e) * Math.floor(Math.abs(e));
+  return s.indexOf(".") === 0 ? t = String(n).concat(s) : s.indexOf("-") === 0 && s.indexOf(".") === 1 && (t = n + ".".concat(s.slice(2))), t;
 }
-function d(e, n) {
-  const t = n.indexOf(e), s = n.length;
-  let i = n;
-  if (t !== -1 && t < s - 1) {
-    let o = n.slice(t + 1, s);
-    o = o.replaceAll(e, ""), i = n.slice(0, t + 1).concat(o);
+function m(s, e) {
+  const t = e.indexOf(s), n = e.length;
+  let i = e;
+  if (t !== -1 && t < n - 1) {
+    let o = e.slice(t + 1, n);
+    o = o.replaceAll(s, ""), i = e.slice(0, t + 1).concat(o);
   }
   return i;
 }
-function f(e, n, t, s) {
-  const i = n || g, o = t || t === 0 ? t : x;
-  if (!e || !e.length)
+function f(s, e, t, n) {
+  const i = e || g, o = t || t === 0 ? t : x;
+  if (!s || !s.length)
     return String(i);
-  let r = s ? parseFloat(e.replace(/[^\-\d.]/g, "")) : parseInt(e.replace(/[^\-\d]/g, ""), 10);
-  return isNaN(r) ? String(i) : String(m(r, i, o));
+  const r = n ? Number.parseFloat(s.replace(/[^\-\d.]/g, "")) : Number.parseInt(s.replace(/[^\-\d]/g, ""), 10);
+  return Number.isNaN(r) ? String(i) : String(d(r, i, o));
 }
-class B extends F {
-  constructor(n) {
-    super(n), this.inputRef = N(), this.state = {
+class B extends N {
+  constructor(e) {
+    super(e), this.inputRef = S(), this.state = {
       editing: !1
     }, this.handleBlur = (t) => {
-      const { maxValue: s, minValue: i, onBlur: o, allowFloats: r } = this.props, { editing: l } = this.state;
+      const { maxValue: n, minValue: i, onBlur: o, allowFloats: r } = this.props, { editing: l } = this.state;
       l && this.setEditing(!1);
       const a = f(
         t.target.value,
         i,
-        s,
+        n,
         r
       );
       o && o(t, +a);
     }, this.handleChange = (t) => {
-      const { maxValue: s, minValue: i, onChange: o, allowFloats: r } = this.props;
-      t.target.value = M(
+      const { maxValue: n, minValue: i, onChange: o, allowFloats: r } = this.props;
+      t.target.value = C(
         t.target.value,
         i,
-        s,
+        n,
         r
       ), o && o(t, +t.target.value);
     }, this.handleFocus = (t) => {
-      const { editing: s } = this.state;
-      s || this.setEditing(!0);
+      const { editing: n } = this.state;
+      n || this.setEditing(!0);
     }, this.handleInput = (t) => {
-      const { editing: s } = this.state, { onInput: i } = this.props;
-      s || this.setEditing(!0), i && i(t, +t.target.value);
+      const { editing: n } = this.state, { onInput: i } = this.props;
+      n || this.setEditing(!0), i && i(t, +t.target.value);
     }, this.handleKeyDown = (t) => {
-      const { maxValue: s, minValue: i, onChange: o, onEnter: r, allowFloats: l } = this.props;
+      const { maxValue: n, minValue: i, onChange: o, onEnter: r, allowFloats: l } = this.props;
       if (t.keyCode === I) {
         const a = f(
           t.target.value,
           i,
-          s,
+          n,
           l
         );
         this.setEditing(!1), o && o(t, +a), r && r(t, +a), t.target.blur();
         return;
       }
-      if (t.keyCode === S) {
+      if (t.keyCode === b) {
         if (this.props.onEscape) {
           this.props.onEscape(t);
           return;
@@ -95,41 +101,41 @@ class B extends F {
   }
   componentDidMount() {
     var r;
-    const { maxValue: n, minValue: t, allowFloats: s } = this.props, i = (r = this.props.value) == null ? void 0 : r.toString(), o = this.inputRef.current;
+    const { maxValue: e, minValue: t, allowFloats: n } = this.props, i = (r = this.props.value) == null ? void 0 : r.toString(), o = this.inputRef.current;
     o && (o.value = f(
       i,
       t,
-      n,
-      s
+      e,
+      n
     )), (this.props.autoFocus || this.props.autoSelect) && setTimeout(() => {
       o.focus(), this.props.autoSelect && o.select();
     }, 1);
   }
-  componentDidUpdate(n, t) {
-    var p, c;
-    const { maxValue: s, minValue: i, allowFloats: o } = this.props, { editing: r } = this.state, l = (p = n.value) == null ? void 0 : p.toString(), a = (c = this.props.value) == null ? void 0 : c.toString(), u = this.inputRef.current;
+  componentDidUpdate(e, t) {
+    var c, p;
+    const { maxValue: n, minValue: i, allowFloats: o } = this.props, { editing: r } = this.state, l = (c = e.value) == null ? void 0 : c.toString(), a = (p = this.props.value) == null ? void 0 : p.toString(), u = this.inputRef.current;
     u && !r && a !== l && a !== u.value && (u.value = f(
       a,
       i,
-      s,
+      n,
       o
     ));
   }
-  setEditing(n) {
-    this.setState({ editing: n });
+  setEditing(e) {
+    this.setState({ editing: e });
   }
   render() {
-    const { props: n } = this, { onChange: t, onEnter: s, onInput: i, onBlur: o, value: r, ...l } = n, { className: a, fluid: u, monospace: p, ...c } = l;
+    const { props: e } = this, { onChange: t, onEnter: n, onInput: i, onBlur: o, value: r, ...l } = e, { className: a, fluid: u, monospace: c, ...p } = l;
     return /* @__PURE__ */ E(
-      C,
+      F,
       {
         className: v([
           "Input",
           u && "Input--fluid",
-          p && "Input--monospace",
+          c && "Input--monospace",
           a
         ]),
-        ...c,
+        ...p,
         children: [
           /* @__PURE__ */ h("div", { className: "Input__baseline", children: "." }),
           /* @__PURE__ */ h(

package/dist/components/RoundGauge.d.ts

@@ -1,5 +1,4 @@
 import { BoxProps } from './Box';
-
 type Props = {
     /** The current value of the metric. */
     value: number;