tgui-core 1.1.2 → 1.1.4

package/dist/components/Popper.js

@@ -1,85 +1,86 @@
-import { jsxs as M, Fragment as P, jsx as S } from "react/jsx-runtime";
-import * as l from "react";
-import { useState as E, useRef as g, useEffect as F } from "react";
-import * as _ from "react-dom";
-import { c as A } from "../popper-CiqSDJTE.js";
-var j = function(r) {
-  return r.reduce(function(n, t) {
-    var o = t[0], u = t[1];
-    return n[o] = u, n;
+import { jsxs as M, Fragment as j, jsx as E } from "react/jsx-runtime";
+import * as c from "react";
+import { useState as O, useRef as R, useEffect as N } from "react";
+import * as x from "react-dom";
+import { c as A } from "../index-jLZg_duJ.js";
+var W = c.createContext(), Y = c.createContext();
+var P = function(r) {
+  return r.reduce(function(n, e) {
+    var o = e[0], a = e[1];
+    return n[o] = a, n;
   }, {});
-}, R = typeof window < "u" && window.document && window.document.createElement ? l.useLayoutEffect : l.useEffect;
-function I(e) {
-  return e && e.__esModule && Object.prototype.hasOwnProperty.call(e, "default") ? e.default : e;
+}, S = typeof window < "u" && window.document && window.document.createElement ? c.useLayoutEffect : c.useEffect;
+function I(t) {
+  return t && t.__esModule && Object.prototype.hasOwnProperty.call(t, "default") ? t.default : t;
 }
-var U = typeof Element < "u", x = typeof Map == "function", z = typeof Set == "function", B = typeof ArrayBuffer == "function" && !!ArrayBuffer.isView;
-function w(e, r) {
-  if (e === r) return !0;
-  if (e && r && typeof e == "object" && typeof r == "object") {
-    if (e.constructor !== r.constructor) return !1;
-    var n, t, o;
-    if (Array.isArray(e)) {
-      if (n = e.length, n != r.length) return !1;
-      for (t = n; t-- !== 0; )
-        if (!w(e[t], r[t])) return !1;
+var _ = typeof Element < "u", F = typeof Map == "function", b = typeof Set == "function", D = typeof ArrayBuffer == "function" && !!ArrayBuffer.isView;
+function g(t, r) {
+  if (t === r) return !0;
+  if (t && r && typeof t == "object" && typeof r == "object") {
+    if (t.constructor !== r.constructor) return !1;
+    var n, e, o;
+    if (Array.isArray(t)) {
+      if (n = t.length, n != r.length) return !1;
+      for (e = n; e-- !== 0; )
+        if (!g(t[e], r[e])) return !1;
       return !0;
     }
-    var u;
-    if (x && e instanceof Map && r instanceof Map) {
-      if (e.size !== r.size) return !1;
-      for (u = e.entries(); !(t = u.next()).done; )
-        if (!r.has(t.value[0])) return !1;
-      for (u = e.entries(); !(t = u.next()).done; )
-        if (!w(t.value[1], r.get(t.value[0]))) return !1;
+    var a;
+    if (F && t instanceof Map && r instanceof Map) {
+      if (t.size !== r.size) return !1;
+      for (a = t.entries(); !(e = a.next()).done; )
+        if (!r.has(e.value[0])) return !1;
+      for (a = t.entries(); !(e = a.next()).done; )
+        if (!g(e.value[1], r.get(e.value[0]))) return !1;
       return !0;
     }
-    if (z && e instanceof Set && r instanceof Set) {
-      if (e.size !== r.size) return !1;
-      for (u = e.entries(); !(t = u.next()).done; )
-        if (!r.has(t.value[0])) return !1;
+    if (b && t instanceof Set && r instanceof Set) {
+      if (t.size !== r.size) return !1;
+      for (a = t.entries(); !(e = a.next()).done; )
+        if (!r.has(e.value[0])) return !1;
       return !0;
     }
-    if (B && ArrayBuffer.isView(e) && ArrayBuffer.isView(r)) {
-      if (n = e.length, n != r.length) return !1;
-      for (t = n; t-- !== 0; )
-        if (e[t] !== r[t]) return !1;
+    if (D && ArrayBuffer.isView(t) && ArrayBuffer.isView(r)) {
+      if (n = t.length, n != r.length) return !1;
+      for (e = n; e-- !== 0; )
+        if (t[e] !== r[e]) return !1;
       return !0;
     }
-    if (e.constructor === RegExp) return e.source === r.source && e.flags === r.flags;
-    if (e.valueOf !== Object.prototype.valueOf && typeof e.valueOf == "function" && typeof r.valueOf == "function") return e.valueOf() === r.valueOf();
-    if (e.toString !== Object.prototype.toString && typeof e.toString == "function" && typeof r.toString == "function") return e.toString() === r.toString();
-    if (o = Object.keys(e), n = o.length, n !== Object.keys(r).length) return !1;
-    for (t = n; t-- !== 0; )
-      if (!Object.prototype.hasOwnProperty.call(r, o[t])) return !1;
-    if (U && e instanceof Element) return !1;
-    for (t = n; t-- !== 0; )
-      if (!((o[t] === "_owner" || o[t] === "__v" || o[t] === "__o") && e.$$typeof) && !w(e[o[t]], r[o[t]]))
+    if (t.constructor === RegExp) return t.source === r.source && t.flags === r.flags;
+    if (t.valueOf !== Object.prototype.valueOf && typeof t.valueOf == "function" && typeof r.valueOf == "function") return t.valueOf() === r.valueOf();
+    if (t.toString !== Object.prototype.toString && typeof t.toString == "function" && typeof r.toString == "function") return t.toString() === r.toString();
+    if (o = Object.keys(t), n = o.length, n !== Object.keys(r).length) return !1;
+    for (e = n; e-- !== 0; )
+      if (!Object.prototype.hasOwnProperty.call(r, o[e])) return !1;
+    if (_ && t instanceof Element) return !1;
+    for (e = n; e-- !== 0; )
+      if (!((o[e] === "_owner" || o[e] === "__v" || o[e] === "__o") && t.$$typeof) && !g(t[o[e]], r[o[e]]))
         return !1;
     return !0;
   }
-  return e !== e && r !== r;
+  return t !== t && r !== r;
 }
-var L = function(r, n) {
+var U = function(r, n) {
   try {
-    return w(r, n);
-  } catch (t) {
-    if ((t.message || "").match(/stack|recursion/i))
+    return g(r, n);
+  } catch (e) {
+    if ((e.message || "").match(/stack|recursion/i))
       return console.warn("react-fast-compare cannot handle circular refs"), !1;
-    throw t;
+    throw e;
   }
 };
-const q = /* @__PURE__ */ I(L);
-var D = [], $ = function(r, n, t) {
-  t === void 0 && (t = {});
-  var o = l.useRef(null), u = {
-    onFirstUpdate: t.onFirstUpdate,
-    placement: t.placement || "bottom",
-    strategy: t.strategy || "absolute",
-    modifiers: t.modifiers || D
-  }, m = l.useState({
+const $ = /* @__PURE__ */ I(U);
+var C = [], B = function(r, n, e) {
+  e === void 0 && (e = {});
+  var o = c.useRef(null), a = {
+    onFirstUpdate: e.onFirstUpdate,
+    placement: e.placement || "bottom",
+    strategy: e.strategy || "absolute",
+    modifiers: e.modifiers || C
+  }, l = c.useState({
     styles: {
       popper: {
-        position: u.strategy,
+        position: a.strategy,
         left: "0",
         top: "0"
       },
@@ -88,90 +89,119 @@ var D = [], $ = function(r, n, t) {
       }
     },
     attributes: {}
-  }), y = m[0], O = m[1], v = l.useMemo(function() {
+  }), v = l[0], h = l[1], y = c.useMemo(function() {
     return {
       name: "updateState",
       enabled: !0,
       phase: "write",
-      fn: function(d) {
-        var i = d.state, f = Object.keys(i.elements);
-        _.flushSync(function() {
-          O({
-            styles: j(f.map(function(c) {
-              return [c, i.styles[c] || {}];
+      fn: function(m) {
+        var p = m.state, f = Object.keys(p.elements);
+        x.flushSync(function() {
+          h({
+            styles: P(f.map(function(i) {
+              return [i, p.styles[i] || {}];
             })),
-            attributes: j(f.map(function(c) {
-              return [c, i.attributes[c]];
+            attributes: P(f.map(function(i) {
+              return [i, p.attributes[i]];
             }))
           });
         });
       },
       requires: ["computeStyles"]
     };
-  }, []), p = l.useMemo(function() {
-    var a = {
-      onFirstUpdate: u.onFirstUpdate,
-      placement: u.placement,
-      strategy: u.strategy,
-      modifiers: [].concat(u.modifiers, [v, {
+  }, []), d = c.useMemo(function() {
+    var s = {
+      onFirstUpdate: a.onFirstUpdate,
+      placement: a.placement,
+      strategy: a.strategy,
+      modifiers: [].concat(a.modifiers, [y, {
         name: "applyStyles",
         enabled: !1
       }])
     };
-    return q(o.current, a) ? o.current || a : (o.current = a, a);
-  }, [u.onFirstUpdate, u.placement, u.strategy, u.modifiers, v]), s = l.useRef();
-  return R(function() {
-    s.current && s.current.setOptions(p);
-  }, [p]), R(function() {
+    return $(o.current, s) ? o.current || s : (o.current = s, s);
+  }, [a.onFirstUpdate, a.placement, a.strategy, a.modifiers, y]), u = c.useRef();
+  return S(function() {
+    u.current && u.current.setOptions(d);
+  }, [d]), S(function() {
     if (!(r == null || n == null)) {
-      var a = t.createPopper || A, d = a(r, n, p);
-      return s.current = d, function() {
-        d.destroy(), s.current = null;
+      var s = e.createPopper || A, m = s(r, n, d);
+      return u.current = m, function() {
+        m.destroy(), u.current = null;
       };
     }
-  }, [r, n, t.createPopper]), {
-    state: s.current ? s.current.state : null,
-    styles: y.styles,
-    attributes: y.attributes,
-    update: s.current ? s.current.update : null,
-    forceUpdate: s.current ? s.current.forceUpdate : null
+  }, [r, n, e.createPopper]), {
+    state: u.current ? u.current.state : null,
+    styles: v.styles,
+    attributes: v.attributes,
+    update: u.current ? u.current.update : null,
+    forceUpdate: u.current ? u.current.forceUpdate : null
   };
 };
-function W(e) {
-  const { children: r, content: n, isOpen: t, onClickOutside: o, placement: u } = e, [m, y] = E(null), [O, v] = E(
+var q = process.env.NODE_ENV !== "production", z = function() {
+};
+if (q) {
+  var L = function(r, n) {
+    var e = arguments.length;
+    n = new Array(e > 1 ? e - 1 : 0);
+    for (var o = 1; o < e; o++)
+      n[o - 1] = arguments[o];
+    var a = 0, l = "Warning: " + r.replace(/%s/g, function() {
+      return n[a++];
+    });
+    typeof console < "u" && console.error(l);
+    try {
+      throw new Error(l);
+    } catch {
+    }
+  };
+  z = function(t, r, n) {
+    var e = arguments.length;
+    n = new Array(e > 2 ? e - 2 : 0);
+    for (var o = 2; o < e; o++)
+      n[o - 2] = arguments[o];
+    if (r === void 0)
+      throw new Error(
+        "`warning(condition, format, ...args)` requires a warning message argument"
+      );
+    t || L.apply(null, [r].concat(n));
+  };
+}
+function G(t) {
+  const { children: r, content: n, isOpen: e, onClickOutside: o, placement: a } = t, [l, v] = O(null), [h, y] = O(
     null
-  ), p = g(null), s = g(null), { styles: a, attributes: d } = $(m, O, {
-    placement: u
+  ), d = R(null), u = R(null), { styles: s, attributes: m } = B(l, h, {
+    placement: a
   });
-  function i(f) {
-    var c, h;
-    !((c = p.current) != null && c.contains(f.target)) && !((h = s.current) != null && h.contains(f.target)) && (o == null || o());
+  function p(f) {
+    var i, w;
+    !((i = d.current) != null && i.contains(f.target)) && !((w = u.current) != null && w.contains(f.target)) && (o == null || o());
   }
-  return F(() => (t ? document.addEventListener("mousedown", i) : document.removeEventListener("mousedown", i), () => {
-    document.removeEventListener("mousedown", i);
-  }), [t]), /* @__PURE__ */ M(P, { children: [
-    /* @__PURE__ */ S(
+  return N(() => (e ? document.addEventListener("mousedown", p) : document.removeEventListener("mousedown", p), () => {
+    document.removeEventListener("mousedown", p);
+  }), [e]), /* @__PURE__ */ M(j, { children: [
+    /* @__PURE__ */ E(
       "div",
       {
         ref: (f) => {
-          y(f), s.current = f;
+          v(f), u.current = f;
         },
         children: r
       }
     ),
-    t && /* @__PURE__ */ S(
+    e && /* @__PURE__ */ E(
       "div",
       {
         ref: (f) => {
-          v(f), p.current = f;
+          y(f), d.current = f;
         },
-        style: { ...a.popper, zIndex: e.baseZIndex ?? 5 },
-        ...d.popper,
+        style: { ...s.popper, zIndex: t.baseZIndex ?? 5 },
+        ...m.popper,
         children: n
       }
     )
   ] });
 }
 export {
-  W as Popper
+  G as Popper
 };

package/dist/components/ProgressBar.d.ts

@@ -1,19 +1,46 @@
-import { CSSProperties, PropsWithChildren } from 'react';
+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).
+     * Determines the percentage and how filled the bar is.
+     */
     value: number;
 } & Partial<{
-    backgroundColor: string;
-    className: string;
+    /**
+     * Color of the progress bar. Can take any of the following formats:
+     * - `#ffffff` - Hex format
+     * - `rgb(r,g,b) / rgba(r,g,b,a)` - RGB format
+     * - `<name>` - the name of a `color-<name>` CSS class. See `CSS_COLORS` in `constants.js`.
+     * - `<name>` - the name of a base CSS color, if not overridden by the definitions above.
+     */
     color: string;
-    height: string | number;
+    /** Highest possible value. */
     maxValue: number;
+    /** Lowest possible value. */
     minValue: number;
+    /**
+     * Applies a `color` to the progress bar based on whether the value lands in the range between `from` and `to`.
+     * This takes an object with the following format:
+     * ```tsx
+     * {
+     *   (colorname): [from, to]
+     * }
+     * ```
+     * For example:
+     * ```tsx
+     * <ProgressBar
+     *   value={0.5}
+     *   ranges={{
+     *     bad: [0, 0.5],
+     *     good: [0.5, 1],
+     *   }}
+     * />
+     * ```
+     *
+     */
     ranges: Record<string, [number, number]>;
-    style: CSSProperties;
-    title: string;
-    width: string | number;
 }> & BoxProps & PropsWithChildren;
 export declare function ProgressBar(props: Props): import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/components/ProgressBar.js

@@ -1,6 +1,6 @@
 import { jsxs as g, 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 _, clamp01 as B } from "../common/math.js";
+import { scale as y, keyOfMatchingRange as N, clamp01 as _, toFixed as B } from "../common/math.js";
 import { classes as m } from "../common/react.js";
 import { s as o } from "../ProgressBar.module-BkAFfFy0.js";
 import { computeBoxProps as S, computeBoxClassName as O } from "./Box.js";
@@ -14,12 +14,12 @@ function w(d) {
     ranges: h = {},
     children: l,
     ...t
-  } = d, a = _(r, u, p), x = l !== void 0, s = C || y(r, h) || "default", e = S(t), c = [
+  } = d, a = y(r, u, p), x = l !== void 0, s = C || N(r, h) || "default", e = S(t), c = [
     o.progressBar,
     f,
     O(t)
   ], i = {
-    width: B(a) * 100 + "%"
+    width: _(a) * 100 + "%"
   };
   return v.includes(s) || s === "default" ? c.push(o["color__" + s]) : (e.style = { ...e.style, borderColor: s }, i.backgroundColor = s), /* @__PURE__ */ g("div", { className: m(c), ...e, children: [
     /* @__PURE__ */ n(
@@ -29,7 +29,7 @@ function w(d) {
         style: i
       }
     ),
-    /* @__PURE__ */ n("div", { className: o.content, children: x ? l : N(a * 100) + "%" })
+    /* @__PURE__ */ n("div", { className: o.content, children: x ? l : B(a * 100) + "%" })
   ] });
 }
 export {

package/dist/components/RoundGauge.js

@@ -1,5 +1,5 @@
 import { jsxs as k, jsx as _ } from "react/jsx-runtime";
-import { scale as d, keyOfMatchingRange as M, clamp01 as N } from "../common/math.js";
+import { scale as d, clamp01 as M, keyOfMatchingRange as N } from "../common/math.js";
 import { classes as u } from "../common/react.js";
 import { AnimatedNumber as A } from "./AnimatedNumber.js";
 import { Box as B, computeBoxClassName as G, computeBoxProps as j } from "./Box.js";
@@ -65,7 +65,7 @@ function A_(y) {
     style: w,
     value: l,
     ...m
-  } = y, C = d(l, s, n), p = N(C), c = a ? {} : { primary: [0, 1] };
+  } = y, C = d(l, s, n), p = M(C), c = a ? {} : { primary: [0, 1] };
   a && Object.keys(a).forEach((t) => {
     const g = a[t];
     c[t] = [
@@ -76,7 +76,7 @@ function A_(y) {
   function x() {
     return o && r && l > o && l < r || o && l > o ? !0 : !!(r && l < r);
   }
-  const b = x() && M(p, c);
+  const b = x() && N(p, c);
   return /* @__PURE__ */ k(B, { inline: !0, children: [
     /* @__PURE__ */ _(
       "div",

package/dist/components/Section.d.ts

@@ -48,7 +48,7 @@ export declare const Section: import('react').ForwardRefExoticComponent<Partial<
     as: string;
     children: ReactNode;
     className: string | import('../common/react').BooleanLike;
-    style: Partial<CSSStyleDeclaration>;
+    style: import('react').CSSProperties;
 }> & Partial<Record<"bold" | "italic" | "nowrap" | "fillPositionedParent" | "inline" | "preserveWhitespace", boolean>> & Partial<Record<"fontWeight" | "textAlign" | "bottom" | "fontFamily" | "fontSize" | "height" | "left" | "maxHeight" | "maxWidth" | "minHeight" | "minWidth" | "opacity" | "overflow" | "overflowX" | "overflowY" | "position" | "right" | "top" | "verticalAlign" | "width" | "color" | "backgroundColor" | "align" | "lineHeight" | "m" | "mb" | "ml" | "mr" | "mt" | "mx" | "my" | "p" | "pb" | "pl" | "pr" | "pt" | "px" | "py" | "textColor", string | import('../common/react').BooleanLike>> & Partial<{
     onClick: import('react').MouseEventHandler<HTMLDivElement>;
     onContextMenu: import('react').MouseEventHandler<HTMLDivElement>;

package/dist/components/Section.js

@@ -1,7 +1,7 @@
 import { jsxs as r, jsx as s } from "react/jsx-runtime";
 import { forwardRef as S, useEffect as j } from "react";
 import { addScrollableNode as z, removeScrollableNode as B } from "../common/events.js";
-import { classes as H, canRender as m } from "../common/react.js";
+import { canRender as m, classes as H } from "../common/react.js";
 import { s as t } from "../Section.module-CLVHJ4yA.js";
 import { computeBoxClassName as T, computeBoxProps as y } from "./Box.js";
 const q = S(

package/dist/components/Slider.js

@@ -1,5 +1,5 @@
 import { jsx as s, jsxs as m } from "react/jsx-runtime";
-import { keyOfMatchingRange as R, clamp01 as t, scale as f } from "../common/math.js";
+import { scale as f, keyOfMatchingRange as R, clamp01 as t } from "../common/math.js";
 import { classes as _ } from "../common/react.js";
 import { s as e } from "../ProgressBar.module-BkAFfFy0.js";
 import { computeBoxClassName as $, computeBoxProps as q } from "./Box.js";

package/dist/components/TextArea.d.ts

@@ -24,7 +24,7 @@ export declare const TextArea: import('react').ForwardRefExoticComponent<Partial
     as: string;
     children: import('react').ReactNode;
     className: string | import('../common/react').BooleanLike;
-    style: Partial<CSSStyleDeclaration>;
+    style: import('react').CSSProperties;
 }> & Partial<Record<"bold" | "italic" | "nowrap" | "fillPositionedParent" | "inline" | "preserveWhitespace", boolean>> & Partial<Record<"fontWeight" | "textAlign" | "bottom" | "fontFamily" | "fontSize" | "height" | "left" | "maxHeight" | "maxWidth" | "minHeight" | "minWidth" | "opacity" | "overflow" | "overflowX" | "overflowY" | "position" | "right" | "top" | "verticalAlign" | "width" | "color" | "backgroundColor" | "align" | "lineHeight" | "m" | "mb" | "ml" | "mr" | "mt" | "mx" | "my" | "p" | "pb" | "pl" | "pr" | "pt" | "px" | "py" | "textColor", string | import('../common/react').BooleanLike>> & Partial<{
     onClick: import('react').MouseEventHandler<HTMLDivElement>;
     onContextMenu: import('react').MouseEventHandler<HTMLDivElement>;

package/dist/components/Tooltip.d.ts

@@ -1,15 +1,19 @@
 import { createPopper, Placement, VirtualElement } from '@popperjs/core';
 import { Component, ReactNode } from 'react';
 
-type TooltipProps = {
-    children?: ReactNode;
+type Props = {
+    /** The content to display in the tooltip */
     content: ReactNode;
-    position?: Placement;
-};
-type TooltipState = {
+} & Partial<{
+    /** Hovering this element will show the tooltip */
+    children: ReactNode;
+    /** Where to place the tooltip relative to the reference element */
+    position: Placement;
+}>;
+type State = {
     hovered: boolean;
 };
-export declare class Tooltip extends Component<TooltipProps, TooltipState> {
+export declare class Tooltip extends Component<Props, State> {
     static renderedTooltip: HTMLDivElement | undefined;
     static singletonPopper: ReturnType<typeof createPopper> | undefined;
     static currentHoveredElement: Element | undefined;

package/dist/components/Tooltip.js

@@ -2,9 +2,9 @@ import '../assets/Tooltip.css';var s = Object.defineProperty;
 var p = (o, e, n) => e in o ? s(o, e, { enumerable: !0, configurable: !0, writable: !0, value: n }) : o[e] = n;
 var r = (o, e, n) => p(o, typeof e != "symbol" ? e + "" : e, n);
 import { jsx as l } from "react/jsx-runtime";
-import { Component as c } from "react";
-import { findDOMNode as m, render as a } from "react-dom";
-import { c as u } from "../popper-CiqSDJTE.js";
+import { c } from "../index-jLZg_duJ.js";
+import { Component as m } from "react";
+import { findDOMNode as a, render as u } from "react-dom";
 const h = "_tooltip_1pib4_13", f = {
   tooltip: h
 }, i = {
@@ -24,9 +24,9 @@ const h = "_tooltip_1pib4_13", f = {
   x: 0,
   y: 0,
   toJSON: () => null
-}, t = class t extends c {
+}, t = class t extends m {
   getDOMNode() {
-    return m(this);
+    return a(this);
   }
   componentDidMount() {
     const e = this.getDOMNode();
@@ -42,9 +42,9 @@ const h = "_tooltip_1pib4_13", f = {
   }
   renderPopperContent() {
     const e = t.renderedTooltip;
-    e && a(/* @__PURE__ */ l("span", { children: this.props.content }), e, () => {
+    e && u(/* @__PURE__ */ l("span", { children: this.props.content }), e, () => {
       let n = t.singletonPopper;
-      n === void 0 ? (n = u(
+      n === void 0 ? (n = c(
         t.virtualElement,
         e,
         {