tgui-core 1.8.3 → 2.0.0

package/dist/common/constants.d.ts

@@ -99,4 +99,8 @@ export declare function getGasLabel(gasId: string, fallbackValue?: string): stri
 export declare function getGasColor(gasId: string): string;
 export declare const getGasFromId: (gasId: string) => Gas | undefined;
 export declare const getGasFromPath: (gasPath: string) => Gas | undefined;
+export declare const COMPONENT_COLORS: {
+    readonly states: readonly ["", "good", "average", "bad", "black", "white"];
+    readonly spectrum: readonly ["red", "orange", "yellow", "olive", "green", "teal", "blue", "violet", "purple", "pink", "brown", "grey"];
+};
 export {};

package/dist/common/constants.js

@@ -296,9 +296,26 @@ const g = (a) => {
       if (e[o].path === a)
         return e[o];
   }
+}, f = {
+  states: ["", "good", "average", "bad", "black", "white"],
+  spectrum: [
+    "red",
+    "orange",
+    "yellow",
+    "olive",
+    "green",
+    "teal",
+    "blue",
+    "violet",
+    "purple",
+    "pink",
+    "brown",
+    "grey"
+  ]
 };
 export {
   c as COLORS,
+  f as COMPONENT_COLORS,
   u as CSS_COLORS,
   d as RADIO_CHANNELS,
   m as UI_CLOSE,

package/dist/common/hotkeys.js

@@ -1,19 +1,19 @@
-import { globalEvents as l } from "./events.js";
-import { KEY_ESCAPE as K, KEY_ENTER as E, KEY_SPACE as p, KEY_TAB as h, KEY_CTRL as d, KEY_SHIFT as g, KEY_UP as S, KEY_DOWN as Y, KEY_LEFT as _, KEY_RIGHT as B, KEY_F5 as w } from "./keycodes.js";
-const m = {}, c = [
-  K,
-  E,
-  p,
+import { globalEvents as a } from "./events.js";
+import { KEY_ESCAPE as m, KEY_ENTER as h, KEY_SPACE as p, KEY_TAB as E, KEY_CTRL as d, KEY_SHIFT as g, KEY_UP as B, KEY_DOWN as T, KEY_LEFT as b, KEY_RIGHT as S, KEY_F5 as Y } from "./keycodes.js";
+const K = {}, c = [
+  m,
   h,
+  p,
+  E,
   d,
   g,
-  S,
-  Y,
-  _,
   B,
-  w
-], o = {}, u = [];
-function F(n) {
+  T,
+  b,
+  S,
+  Y
+], i = {}, u = [];
+function _(n) {
   if (n === 16) return "Shift";
   if (n === 17) return "Ctrl";
   if (n === 18) return "Alt";
@@ -37,7 +37,7 @@ function F(n) {
   if (n === 189) return "-";
   if (n === 190) return ".";
 }
-function N(n) {
+function y(n) {
   const t = String(n);
   if (t === "Ctrl+F5" || t === "Ctrl+R") {
     location.reload();
@@ -45,58 +45,58 @@ function N(n) {
   }
   if (t === "Ctrl+F" || n.event.defaultPrevented || n.isModifierKey() || c.includes(n.code))
     return;
-  const i = F(n.code);
-  if (!i)
+  const o = _(n.code);
+  if (!o)
     return;
-  const f = m[i];
-  if (f)
-    return Byond.command(f);
-  if (n.isDown() && !o[i]) {
-    o[i] = !0;
-    const r = `KeyDown "${i}"`;
+  const s = K[o];
+  if (s)
+    return Byond.command(s);
+  if (n.isDown() && !i[o]) {
+    i[o] = !0;
+    const r = `${globalThis.ByondKeyDown} "${o}"`;
     return Byond.command(r);
   }
-  if (n.isUp() && o[i]) {
-    o[i] = !1;
-    const r = `KeyUp "${i}"`;
+  if (n.isUp() && i[o]) {
+    i[o] = !1;
+    const r = `${globalThis.ByondKeyUp} "${o}"`;
     return Byond.command(r);
   }
 }
-function P(n) {
+function N(n) {
   c.push(n);
 }
-function R(n) {
+function U(n) {
   const t = c.indexOf(n);
   t >= 0 && c.splice(t, 1);
 }
-function T() {
-  for (const n in o)
-    o[n] && (o[n] = !1, Byond.command(`KeyUp "${n}"`));
+function w() {
+  for (const n in i)
+    i[n] && (i[n] = !1, Byond.command(`${globalThis.ByondKeyUp} "${n}"`));
 }
-function v() {
-  Byond.winget("default.*").then((n) => {
+function D() {
+  globalThis.ByondKeyUp || (globalThis.ByondKeyUp = "KeyUp", globalThis.ByondKeyDown = "KeyDown"), Byond.winget("default.*").then((n) => {
     const t = {};
     for (const r in n) {
-      const s = r.split("."), e = s[1], a = s[2];
-      e && a && (t[e] || (t[e] = {}), t[e][a] = n[r]);
+      const f = r.split("."), e = f[1], l = f[2];
+      e && l && (t[e] || (t[e] = {}), t[e][l] = n[r]);
     }
-    const i = /\\"/g;
-    function f(r) {
-      return r.substring(1, r.length - 1).replace(i, '"');
+    const o = /\\"/g;
+    function s(r) {
+      return r.substring(1, r.length - 1).replace(o, '"');
     }
     for (const r in t) {
-      const s = t[r], e = f(s.name);
-      m[e] = f(s.command);
+      const f = t[r], e = s(f.name);
+      K[e] = s(f.command);
     }
-  }), l.on("window-blur", () => {
-    T();
-  }), l.on("key", (n) => {
+  }), a.on("window-blur", () => {
+    w();
+  }), a.on("key", (n) => {
     for (const t of u)
       t(n);
-    N(n);
+    y(n);
   });
 }
-function x(n) {
+function H(n) {
   u.push(n);
   let t = !1;
   return () => {
@@ -104,9 +104,9 @@ function x(n) {
   };
 }
 export {
-  P as acquireHotKey,
-  x as listenForKeyEvents,
-  T as releaseHeldKeys,
-  R as releaseHotKey,
-  v as setupHotKeys
+  N as acquireHotKey,
+  H as listenForKeyEvents,
+  w as releaseHeldKeys,
+  U as releaseHotKey,
+  D as setupHotKeys
 };

package/dist/common/ui.d.ts

@@ -46,6 +46,12 @@ export type StringStyleMap = {
     right: string | BooleanLike;
     /** Top margin. */
     top: string | BooleanLike;
+    /** Gap on all sides. */
+    g: string | BooleanLike;
+    /** Row gap. */
+    gr: string | BooleanLike;
+    /** Column gap. */
+    gc: string | BooleanLike;
     /** Overflow property. */
     overflow: string | BooleanLike;
     /** Overflow-X property. */

package/dist/common/ui.js

@@ -1,11 +1,11 @@
-import { CSS_COLORS as u } from "./constants.js";
+import { CSS_COLORS as b } from "./constants.js";
 import { classes as y } from "./react.js";
 const f = (o) => {
   if (typeof o == "string")
     return o.endsWith("px") ? `${Number.parseFloat(o) / 12}rem` : o;
   if (typeof o == "number")
     return `${o}rem`;
-}, p = (o) => {
+}, e = (o) => {
   if (typeof o == "string")
     return f(o);
   if (typeof o == "number")
@@ -15,76 +15,80 @@ function w(o) {
   return !h(o);
 }
 function h(o) {
-  return typeof o == "string" && u.includes(o);
+  return typeof o == "string" && b.includes(o);
 }
-const c = (o) => (t, i) => {
-  (typeof i == "number" || typeof i == "string") && (t[o] = i);
-}, n = (o, t) => (i, e) => {
-  (typeof e == "number" || typeof e == "string") && (i[o] = t(e));
-}, l = (o, t) => (i, e) => {
-  e && (i[o] = t);
-}, s = (o, t, i) => (e, r) => {
-  if (typeof r == "number" || typeof r == "string")
-    for (let m = 0; m < i.length; m++)
-      e[o + i[m]] = t(r);
-}, a = (o) => (t, i) => {
-  w(i) && (t[o] = i);
+const c = (o) => (t, n) => {
+  (typeof n == "number" || typeof n == "string") && (t[o] = n);
+}, i = (o, t) => (n, r) => {
+  (typeof r == "number" || typeof r == "string") && (n[o] = t(r));
+}, l = (o, t) => (n, r) => {
+  r && (n[o] = t);
+}, g = (o, t, n) => (r, p) => {
+  if (typeof p == "number" || typeof p == "string")
+    for (let m = 0; m < n.length; m++)
+      r[o + n[m]] = t(p);
+}, a = (o) => (t, n) => {
+  w(n) && (t[o] = n);
 }, d = {
   align: c("textAlign"),
-  bottom: n("bottom", f),
+  bottom: i("bottom", f),
   fontFamily: c("fontFamily"),
-  fontSize: n("fontSize", f),
+  fontSize: i("fontSize", f),
   fontWeight: c("fontWeight"),
-  height: n("height", f),
-  left: n("left", f),
-  maxHeight: n("maxHeight", f),
-  maxWidth: n("maxWidth", f),
-  minHeight: n("minHeight", f),
-  minWidth: n("minWidth", f),
+  height: i("height", f),
+  left: i("left", f),
+  maxHeight: i("maxHeight", f),
+  maxWidth: i("maxWidth", f),
+  minHeight: i("minHeight", f),
+  minWidth: i("minWidth", f),
   opacity: c("opacity"),
   overflow: c("overflow"),
   overflowX: c("overflowX"),
   overflowY: c("overflowY"),
   position: c("position"),
-  right: n("right", f),
+  right: i("right", f),
   textAlign: c("textAlign"),
-  top: n("top", f),
+  top: i("top", f),
   verticalAlign: c("verticalAlign"),
-  width: n("width", f),
+  width: i("width", f),
   lineHeight: (o, t) => {
     typeof t == "number" ? o.lineHeight = t : typeof t == "string" && (o.lineHeight = f(t));
   },
   // Margin
-  m: s("margin", p, [
+  m: g("margin", e, [
     "Top",
     "Bottom",
     "Left",
     "Right"
   ]),
-  mb: n("marginBottom", p),
-  ml: n("marginLeft", p),
-  mr: n("marginRight", p),
-  mt: n("marginTop", p),
-  mx: s("margin", p, ["Left", "Right"]),
-  my: s("margin", p, ["Top", "Bottom"]),
+  mb: i("marginBottom", e),
+  ml: i("marginLeft", e),
+  mr: i("marginRight", e),
+  mt: i("marginTop", e),
+  mx: g("margin", e, ["Left", "Right"]),
+  my: g("margin", e, ["Top", "Bottom"]),
+  // Gap
+  g: i("gap", e),
+  gr: i("rowGap", e),
+  gc: i("columnGap", e),
   // Padding
-  p: s("padding", p, [
+  p: g("padding", e, [
     "Top",
     "Bottom",
     "Left",
     "Right"
   ]),
-  pb: n("paddingBottom", p),
-  pl: n("paddingLeft", p),
-  pr: n("paddingRight", p),
-  pt: n("paddingTop", p),
-  px: s("padding", p, ["Left", "Right"]),
-  py: s("padding", p, ["Top", "Bottom"]),
+  pb: i("paddingBottom", e),
+  pl: i("paddingLeft", e),
+  pr: i("paddingRight", e),
+  pt: i("paddingTop", e),
+  px: g("padding", e, ["Left", "Right"]),
+  py: g("padding", e, ["Top", "Bottom"]),
   // Color props
   color: a("color"),
   textColor: a("color"),
   backgroundColor: a("backgroundColor")
-}, b = {
+}, u = {
   bold: l("fontWeight", "bold"),
   fillPositionedParent: (o, t) => {
     t && (o.position = "absolute", o.top = 0, o.bottom = 0, o.left = 0, o.right = 0);
@@ -95,43 +99,43 @@ const c = (o) => (t, i) => {
   preserveWhitespace: l("whiteSpace", "pre-wrap")
 };
 function T(o) {
-  const t = {}, i = {};
-  for (const e in o) {
-    if (e === "style")
+  const t = {}, n = {};
+  for (const r in o) {
+    if (r === "style")
       continue;
-    const r = o[e], m = d[e] || b[e];
-    m ? m(i, r) : t[e] = r;
+    const p = o[r], m = d[r] || u[r];
+    m ? m(n, p) : t[r] = p;
   }
-  return t.style = { ...i, ...o.style }, t;
+  return t.style = { ...n, ...o.style }, t;
 }
 function S(o) {
-  const t = o.textColor || o.color, { backgroundColor: i } = o;
+  const t = o.textColor || o.color, { backgroundColor: n } = o;
   return y([
     h(t) && `color-${t}`,
-    h(i) && `color-bg-${i}`
+    h(n) && `color-bg-${n}`
   ]);
 }
 function P(o) {
   const t = {};
   if (!o) return t;
-  const i = o.split(" ");
-  for (const e of i) {
-    const [r, m] = e.split("-");
-    if (r)
-      if (r in d) {
+  const n = o.split(" ");
+  for (const r of n) {
+    const [p, m] = r.split("-");
+    if (p)
+      if (p in d) {
         if (m === "") continue;
-        const g = Number(m);
-        !Number.isNaN(g) && Number.isFinite(g) ? t[r] = g : t[r] = m;
-      } else r in b ? t[r] = !0 : console.warn(`Unknown prop ${r}`);
+        const s = Number(m);
+        !Number.isNaN(s) && Number.isFinite(s) ? t[p] = s : t[p] = m;
+      } else p in u ? t[p] = !0 : console.warn(`Unknown prop ${p}`);
   }
   return t;
 }
 export {
-  b as booleanStyleMap,
+  u as booleanStyleMap,
   S as computeBoxClassName,
   T as computeBoxProps,
   P as computeTwClass,
-  p as halfUnit,
+  e as halfUnit,
   d as stringStyleMap,
   f as unit
 };

package/dist/components/AnimatedNumber.d.ts

@@ -26,7 +26,7 @@ export declare class AnimatedNumber extends Component<Props> {
     /**
      * The inner `<span/>` being updated sixty times per second.
      */
-    ref: import('react').RefObject<HTMLSpanElement>;
+    ref: import('react').RefObject<HTMLSpanElement | null>;
     /**
      * The interval being used to update the inner span.
      */

package/dist/components/Button.d.ts

@@ -1,4 +1,4 @@
-import { Placement } from '@popperjs/core';
+import { Placement } from '@floating-ui/react';
 import { ReactNode } from 'react';
 import { BooleanLike } from '../common/react';
 import { BoxProps } from './Box';
@@ -27,7 +27,7 @@ type Props = Partial<{
     circular: boolean;
     /** Reduces the padding of the button */
     compact: boolean;
-    /** Disables and greys out the button */
+    /** Disables button and makes it semi-transparent */
     disabled: BooleanLike;
     /** Fill all available horizontal space */
     fluid: boolean;
@@ -51,7 +51,7 @@ type Props = Partial<{
     selected: BooleanLike;
     /** A fancy, boxy tooltip, which appears when hovering over the button */
     tooltip: ReactNode;
-    /** Position of the tooltip. See [`Popper`](#Popper) for valid options. */
+    /** Position of the tooltip. Does not guarantee the position is respected. */
     tooltipPosition: Placement;
     /** Align content vertically using flex. Use lineHeight if the height is static. */
     verticalAlignContent: string;

package/dist/components/Button.js

@@ -1,8 +1,8 @@
 import { jsx as r, jsxs as _, Fragment as K } from "react/jsx-runtime";
 import { useState as A, createRef as V, useEffect as $, useRef as z } from "react";
-import { KEY as D, isEscape as E } from "../common/keys.js";
-import { classes as F } from "../common/react.js";
-import { computeBoxClassName as j, computeBoxProps as q } from "../common/ui.js";
+import { KEY as F, isEscape as E } from "../common/keys.js";
+import { classes as P } from "../common/react.js";
+import { computeBoxProps as j, computeBoxClassName as q } from "../common/ui.js";
 import { Box as O } from "./Box.js";
 import { Icon as S } from "./Icon.js";
 import { Tooltip as v } from "./Tooltip.js";
@@ -23,31 +23,32 @@ function R(e) {
     iconPosition: y,
     iconRotation: k,
     iconSize: m,
-    iconSpin: P,
+    iconSpin: w,
     onClick: f,
     selected: g,
     tooltip: I,
-    tooltipPosition: w,
+    tooltipPosition: D,
     verticalAlignContent: x,
     ...N
   } = e, n = C || a;
   let b = /* @__PURE__ */ r(
     "div",
     {
-      className: F([
+      className: P([
         "Button",
         l && "Button--fluid",
         t && "Button--disabled",
         g && "Button--selected",
         h && "Button--circular",
         B && "Button--compact",
-        y && `Button--iconPosition--${y}`,
+        !n && "Button--empty",
+        y && `Button--icon-${y}`,
         x && "Button--flex",
         x && l && "Button--flex--fluid",
         x && `Button--verticalAlignContent--${x}`,
         c && typeof c == "string" ? `Button--color--${c}` : "Button--color--default",
         d,
-        j(N)
+        q(N)
       ]),
       tabIndex: t ? void 0 : 0,
       onClick: (p) => {
@@ -55,18 +56,18 @@ function R(e) {
       },
       onKeyDown: (p) => {
         if (u) {
-          if (p.key === D.Space || p.key === D.Enter) {
+          if (p.key === F.Space || p.key === F.Enter) {
             p.preventDefault(), !t && f && f(p);
             return;
           }
           E(p.key) && p.preventDefault();
         }
       },
-      ...q(N),
+      ...j(N),
       children: /* @__PURE__ */ _(
         "div",
         {
-          className: F([
+          className: P([
             "Button__content",
             o && "Button__content--ellipsis"
           ]),
@@ -74,24 +75,22 @@ function R(e) {
             i && y !== "right" && /* @__PURE__ */ r(
               S,
               {
-                mr: n && 0.5,
                 name: i,
                 color: s,
                 rotation: k,
                 size: m,
-                spin: P
+                spin: w
               }
             ),
             o ? /* @__PURE__ */ r("span", { className: "Button--ellipsis", children: n }) : n,
             i && y === "right" && /* @__PURE__ */ r(
               S,
               {
-                ml: n && 0.5,
                 name: i,
                 color: s,
                 rotation: k,
                 size: m,
-                spin: P
+                spin: w
               }
             )
           ]
@@ -99,7 +98,7 @@ function R(e) {
       )
     }
   );
-  return I && (b = /* @__PURE__ */ r(v, { content: I, position: w, children: b })), b;
+  return I && (b = /* @__PURE__ */ r(v, { content: I, position: D, children: b })), b;
 }
 function T(e) {
   const { checked: u, ...a } = e;
@@ -165,8 +164,8 @@ function Y(e) {
     placeholder: y,
     tooltip: k,
     tooltipPosition: m,
-    ...P
-  } = e, [f, g] = A(!1), I = V(), w = h || u;
+    ...w
+  } = e, [f, g] = A(!1), I = V(), D = h || u;
   function x(n) {
     const b = I.current;
     if (!b) return;
@@ -185,17 +184,17 @@ function Y(e) {
   let N = /* @__PURE__ */ _(
     O,
     {
-      className: F([
+      className: P([
         "Button",
         C && "Button--fluid",
         B && "Button--disabled",
         `Button--color--${a}`
       ]),
-      ...P,
+      ...w,
       onClick: () => g(!0),
       children: [
         t && /* @__PURE__ */ r(S, { name: t, rotation: o, spin: l }),
-        /* @__PURE__ */ r("div", { children: w }),
+        /* @__PURE__ */ r("div", { children: D }),
         /* @__PURE__ */ r(
           "input",
           {
@@ -210,7 +209,7 @@ function Y(e) {
               f && (g(!1), x(n));
             },
             onKeyDown: (n) => {
-              if (n.key === D.Enter) {
+              if (n.key === F.Enter) {
                 g(!1), x(n);
                 return;
               }

package/dist/components/Chart.d.ts

@@ -1,4 +1,3 @@
-import { Component, RefObject } from 'react';
 import { BoxProps } from './Box';
 type Props = {
     data: number[][];
@@ -9,19 +8,8 @@ type Props = {
     strokeColor: string;
     strokeWidth: number;
 }> & BoxProps;
-type State = {
-    viewBox: [number, number];
-};
-declare class LineChart extends Component<Props> {
-    ref: RefObject<HTMLDivElement>;
-    state: State;
-    constructor(props: Props);
-    componentDidMount(): void;
-    componentWillUnmount(): void;
-    handleResize: () => void;
-    render(): import("react/jsx-runtime").JSX.Element;
+export declare function Chart(props: Props): import("react/jsx-runtime").JSX.Element;
+export declare namespace Chart {
+    var Line: typeof Chart;
 }
-export declare const Chart: {
-    Line: typeof LineChart;
-};
 export {};