tgui-core 1.1.23 → 1.2.0

package/dist/components/DraggableControl.js

@@ -1,4 +1,4 @@
-import { jsxs as N, Fragment as T, jsx as F } from "react/jsx-runtime";
+import { jsxs as T, Fragment as N, jsx as F } from "react/jsx-runtime";
 import { clamp as m } from "../common/math.js";
 import { Component as b, createRef as I } from "react";
 import { AnimatedNumber as M } from "./AnimatedNumber.js";
@@ -67,11 +67,9 @@ class C extends b {
         this.suppressFlicker(), i && i(e, o), l && l(e, o);
       else if (this.inputRef) {
         const a = this.inputRef.current;
-        a.value = g;
-        try {
+        a.value = g, setTimeout(() => {
           a.focus(), a.select();
-        } catch {
-        }
+        }, 10);
       }
     };
   }
@@ -99,7 +97,7 @@ class C extends b {
     } = this.props;
     let d = o;
     (u || l) && (d = i);
-    const E = /* @__PURE__ */ N(T, { children: [
+    const E = /* @__PURE__ */ T(N, { children: [
       s && !u && !l ? /* @__PURE__ */ F(M, { value: d, format: h }) : h ? h(d) : d,
       g ? " " + g : ""
     ] }), x = /* @__PURE__ */ F(

package/dist/components/ImageButton.d.ts

@@ -0,0 +1,61 @@
+import { Placement } from '@popperjs/core';
+import { ReactNode } from 'react';
+import { BooleanLike } from '../common/react';
+import { BoxProps } from './Box';
+
+type Props = Partial<{
+    /** Asset cache. Example: `asset={['assetname32x32', thing.key]}` */
+    asset: string[];
+    /** Classic way to put images. Example: `base64={thing.image}` */
+    base64: string;
+    /**
+     * Special container for buttons.
+     * You can put any other component here.
+     * Has some special stylings!
+     * Example: `buttons={<Button>Send</Button>}`
+     */
+    buttons: ReactNode;
+    /**
+     * Enables alternate layout for `buttons` container.
+     * Without fluid, buttons will be on top and with `pointer-events: none`, useful for text info.
+     * With fluid, buttons will be in "hamburger" style.
+     */
+    buttonsAlt: boolean;
+    /** Content under image. Or on the right if fluid. */
+    children: ReactNode;
+    /** Applies a CSS class to the element. */
+    className: string;
+    /** Color of the button. See [Button](#button) but without `transparent`. */
+    color: string;
+    /** Makes button disabled and dark red if true. Also disables onClick. */
+    disabled: BooleanLike;
+    /** Optional. Adds a "stub" when loading DmIcon. */
+    dmFallback: ReactNode;
+    /** Parameter `icon` of component `DmIcon`. */
+    dmIcon: string | null;
+    /** Parameter `icon_state` of component `DmIcon`. */
+    dmIconState: string | null;
+    /**
+     * Changes the layout of the button, making it fill the entire horizontally available space.
+     * Allows the use of `title`
+     */
+    fluid: boolean;
+    /** Parameter responsible for the size of the image, component and standard "stubs". */
+    imageSize: number;
+    /** Prop `src` of Image component. Example: `imageSrc={resolveAsset(thing.image}` */
+    imageSrc: string;
+    /** Called when button is clicked with LMB. */
+    onClick: (e: any) => void;
+    /** Called when button is clicked with RMB. */
+    onRightClick: (e: any) => void;
+    /** Makes button selected and green if true. */
+    selected: BooleanLike;
+    /** Requires `fluid` for work. Bold text with divider betwen content. */
+    title: string;
+    /** A fancy, boxy tooltip, which appears when hovering over the button */
+    tooltip: ReactNode;
+    /** Position of the tooltip. See [`Popper`](#Popper) for valid options. */
+    tooltipPosition: Placement;
+}> & BoxProps;
+export declare function ImageButton(props: Props): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/components/ImageButton.js

@@ -0,0 +1,218 @@
+import { jsxs as d, jsx as t } from "react/jsx-runtime";
+import { classes as e } from "../common/react.js";
+import { computeBoxProps as D } from "./Box.js";
+import { DmIcon as F } from "./DmIcon.js";
+import { Icon as E } from "./Icon.js";
+import { Image as j } from "./Image.js";
+import { Stack as I } from "./Stack.js";
+import { Tooltip as z } from "./Tooltip.js";
+import '../assets/ImageButton.css';const P = "_color__black_7gau9_18", q = "_contentColor__black_7gau9_29", M = "_buttonsContainerColor__black_7gau9_37", R = "_color__white_7gau9_45", T = "_contentColor__white_7gau9_56", G = "_buttonsContainerColor__white_7gau9_64", H = "_color__red_7gau9_72", J = "_contentColor__red_7gau9_83", K = "_buttonsContainerColor__red_7gau9_91", L = "_color__orange_7gau9_99", O = "_contentColor__orange_7gau9_110", Q = "_buttonsContainerColor__orange_7gau9_118", U = "_color__yellow_7gau9_126", V = "_contentColor__yellow_7gau9_137", W = "_buttonsContainerColor__yellow_7gau9_145", X = "_color__olive_7gau9_153", Y = "_contentColor__olive_7gau9_164", Z = "_buttonsContainerColor__olive_7gau9_172", oo = "_color__green_7gau9_180", to = "_contentColor__green_7gau9_191", _o = "_buttonsContainerColor__green_7gau9_199", no = "_color__teal_7gau9_207", eo = "_contentColor__teal_7gau9_218", ro = "_buttonsContainerColor__teal_7gau9_226", lo = "_color__blue_7gau9_234", ao = "_contentColor__blue_7gau9_245", co = "_buttonsContainerColor__blue_7gau9_253", so = "_color__violet_7gau9_261", io = "_contentColor__violet_7gau9_272", uo = "_buttonsContainerColor__violet_7gau9_280", Co = "_color__purple_7gau9_288", go = "_contentColor__purple_7gau9_299", bo = "_buttonsContainerColor__purple_7gau9_307", po = "_color__pink_7gau9_315", mo = "_contentColor__pink_7gau9_326", fo = "_buttonsContainerColor__pink_7gau9_334", ho = "_color__brown_7gau9_342", vo = "_contentColor__brown_7gau9_353", yo = "_buttonsContainerColor__brown_7gau9_361", wo = "_color__grey_7gau9_369", ko = "_contentColor__grey_7gau9_380", xo = "_buttonsContainerColor__grey_7gau9_388", Io = "_color__good_7gau9_423", $o = "_contentColor__good_7gau9_434", Ao = "_buttonsContainerColor__good_7gau9_442", Bo = "_color__average_7gau9_450", No = "_contentColor__average_7gau9_461", So = "_buttonsContainerColor__average_7gau9_469", Do = "_color__bad_7gau9_477", Fo = "_contentColor__bad_7gau9_488", Eo = "_buttonsContainerColor__bad_7gau9_496", jo = "_color__label_7gau9_504", zo = "_contentColor__label_7gau9_515", Po = "_buttonsContainerColor__label_7gau9_523", qo = "_color__default_7gau9_531", Mo = "_disabled_7gau9_542", Ro = "_selected_7gau9_547", To = "_contentColor__default_7gau9_558", Go = "_contentDisabled_7gau9_566", Ho = "_contentSelected_7gau9_571", Jo = "_buttonsContainerColor__default_7gau9_579", Ko = "_ImageButton_7gau9_587", Lo = "_noAction_7gau9_595", Oo = "_container_7gau9_598", Qo = "_image_7gau9_603", Uo = "_buttonsContainer_7gau9_37", Vo = "_buttonsAltContainer_7gau9_621", Wo = "_buttonsEmpty_7gau9_628", Xo = "_content_7gau9_29", Yo = "_fluid_7gau9_649", Zo = "_info_7gau9_661", ot = "_title_7gau9_667", tt = "_divider_7gau9_671", _t = "_contentFluid_7gau9_675", nt = "_hasButtons_7gau9_683", o = {
+  color__black: P,
+  contentColor__black: q,
+  buttonsContainerColor__black: M,
+  color__white: R,
+  contentColor__white: T,
+  buttonsContainerColor__white: G,
+  color__red: H,
+  contentColor__red: J,
+  buttonsContainerColor__red: K,
+  color__orange: L,
+  contentColor__orange: O,
+  buttonsContainerColor__orange: Q,
+  color__yellow: U,
+  contentColor__yellow: V,
+  buttonsContainerColor__yellow: W,
+  color__olive: X,
+  contentColor__olive: Y,
+  buttonsContainerColor__olive: Z,
+  color__green: oo,
+  contentColor__green: to,
+  buttonsContainerColor__green: _o,
+  color__teal: no,
+  contentColor__teal: eo,
+  buttonsContainerColor__teal: ro,
+  color__blue: lo,
+  contentColor__blue: ao,
+  buttonsContainerColor__blue: co,
+  color__violet: so,
+  contentColor__violet: io,
+  buttonsContainerColor__violet: uo,
+  color__purple: Co,
+  contentColor__purple: go,
+  buttonsContainerColor__purple: bo,
+  color__pink: po,
+  contentColor__pink: mo,
+  buttonsContainerColor__pink: fo,
+  color__brown: ho,
+  contentColor__brown: vo,
+  buttonsContainerColor__brown: yo,
+  color__grey: wo,
+  contentColor__grey: ko,
+  buttonsContainerColor__grey: xo,
+  "color__light-grey": "_color__light-grey_7gau9_396",
+  "contentColor__light-grey": "_contentColor__light-grey_7gau9_407",
+  "buttonsContainerColor__light-grey": "_buttonsContainerColor__light-grey_7gau9_415",
+  color__good: Io,
+  contentColor__good: $o,
+  buttonsContainerColor__good: Ao,
+  color__average: Bo,
+  contentColor__average: No,
+  buttonsContainerColor__average: So,
+  color__bad: Do,
+  contentColor__bad: Fo,
+  buttonsContainerColor__bad: Eo,
+  color__label: jo,
+  contentColor__label: zo,
+  buttonsContainerColor__label: Po,
+  color__default: qo,
+  disabled: Mo,
+  selected: Ro,
+  contentColor__default: To,
+  contentDisabled: Go,
+  contentSelected: Ho,
+  buttonsContainerColor__default: Jo,
+  ImageButton: Ko,
+  noAction: Lo,
+  container: Oo,
+  image: Qo,
+  buttonsContainer: Uo,
+  buttonsAltContainer: Vo,
+  buttonsEmpty: Wo,
+  content: Xo,
+  fluid: Yo,
+  info: Zo,
+  title: ot,
+  divider: tt,
+  contentFluid: _t,
+  hasButtons: nt
+};
+function Ct($) {
+  const {
+    asset: p,
+    base64: s,
+    buttons: i,
+    buttonsAlt: m,
+    children: r,
+    className: A,
+    color: _,
+    disabled: a,
+    dmFallback: f,
+    dmIcon: h,
+    dmIconState: v,
+    fluid: c,
+    imageSize: n = 64,
+    imageSrc: u,
+    onClick: C,
+    onRightClick: g,
+    selected: y,
+    title: w,
+    tooltip: k,
+    tooltipPosition: B,
+    ...N
+  } = $;
+  function x(l, S) {
+    return /* @__PURE__ */ t(I, { height: `${n}px`, width: `${n}px`, children: /* @__PURE__ */ t(I.Item, { grow: !0, textAlign: "center", align: "center", children: /* @__PURE__ */ t(
+      E,
+      {
+        spin: S,
+        name: l,
+        color: "gray",
+        style: { fontSize: `calc(${n}px * 0.75)` }
+      }
+    ) }) });
+  }
+  let b = /* @__PURE__ */ d(
+    "div",
+    {
+      className: e([
+        o.container,
+        i && o.hasButtons,
+        !C && !g && o.noAction,
+        y && o.selected,
+        a && o.disabled,
+        _ && typeof _ == "string" ? o["color__" + _] : o.color__default
+      ]),
+      tabIndex: a ? void 0 : 0,
+      onClick: (l) => {
+        !a && C && C(l);
+      },
+      onContextMenu: (l) => {
+        l.preventDefault(), !a && g && g(l);
+      },
+      style: { width: c ? "auto" : `calc(${n}px + 0.5em + 2px)` },
+      children: [
+        /* @__PURE__ */ t("div", { className: e([o.image]), children: s || p || u ? /* @__PURE__ */ t(
+          j,
+          {
+            className: e(!s && !u && p || []),
+            src: s ? `data:image/png;base64,${s}` : u,
+            height: `${n}px`,
+            width: `${n}px`
+          }
+        ) : h && v ? /* @__PURE__ */ t(
+          F,
+          {
+            icon: h,
+            icon_state: v,
+            fallback: f || x("spinner", !0),
+            height: `${n}px`,
+            width: `${n}px`
+          }
+        ) : x("question", !1) }),
+        c ? /* @__PURE__ */ d("div", { className: e([o.info]), children: [
+          w && /* @__PURE__ */ t(
+            "span",
+            {
+              className: e([o.title, r && o.divider]),
+              children: w
+            }
+          ),
+          r && /* @__PURE__ */ t("span", { className: e([o.contentFluid]), children: r })
+        ] }) : r && /* @__PURE__ */ t(
+          "span",
+          {
+            className: e([
+              o.content,
+              y && o.contentSelected,
+              a && o.contentDisabled,
+              _ && typeof _ == "string" ? o["contentColor__" + _] : o.contentColor__default
+            ]),
+            children: r
+          }
+        )
+      ]
+    }
+  );
+  return k && (b = /* @__PURE__ */ t(z, { content: k, position: B, children: b })), /* @__PURE__ */ d(
+    "div",
+    {
+      className: e([
+        o.ImageButton,
+        c && o.fluid,
+        A
+      ]),
+      ...D(N),
+      children: [
+        b,
+        i && /* @__PURE__ */ t(
+          "div",
+          {
+            className: e([
+              o.buttonsContainer,
+              m && o.buttonsAltContainer,
+              !r && o.buttonsEmpty,
+              c && _ && typeof _ == "string" ? o["buttonsContainerColor__" + _] : c && o.buttonsContainerColor__default
+            ]),
+            style: {
+              width: m ? `calc(${n}px + 0.5em)` : "auto"
+            },
+            children: i
+          }
+        )
+      ]
+    }
+  );
+}
+export {
+  Ct as ImageButton
+};

package/dist/components/Input.js

@@ -1,82 +1,88 @@
-import { jsxs as j, jsx as p } from "react/jsx-runtime";
-import { useRef as k, useEffect as B } from "react";
-import { KEY as m } from "../common/keys.js";
-import { classes as E } from "../common/react.js";
+import { jsxs as K, jsx as m } from "react/jsx-runtime";
+import { useRef as V, useEffect as d } from "react";
+import { KEY as j, isEscape as k } from "../common/keys.js";
+import { classes as B } from "../common/react.js";
 import { debounce as R } from "../common/timer.js";
 import { Box as S } from "./Box.js";
-import '../assets/Input.css';const V = "_input_17i79_20", F = "_fluid_17i79_35", L = "_baseline_17i79_40", Y = "_inner_17i79_45", q = "_monospace_17i79_71", u = {
-  input: V,
-  fluid: F,
-  baseline: L,
-  inner: Y,
-  monospace: q
+import '../assets/Input.css';const F = "_input_17i79_20", L = "_fluid_17i79_35", Y = "_baseline_17i79_40", q = "_inner_17i79_45", v = "_monospace_17i79_71", u = {
+  input: F,
+  fluid: L,
+  baseline: Y,
+  inner: q,
+  monospace: v
 };
-function _(r) {
+function a(r) {
   return typeof r != "number" && typeof r != "string" ? "" : String(r);
 }
 const z = R((r) => r(), 250);
 function P(r) {
   const {
-    autoFocus: d,
-    autoSelect: c,
+    autoFocus: _,
+    autoSelect: f,
     className: b,
     disabled: g,
     expensive: T,
     fluid: y,
     maxLength: x,
     monospace: h,
-    onChange: n,
+    onChange: t,
     onEnter: i,
     onEscape: o,
     onInput: s,
-    placeholder: I,
-    selfClear: N,
-    value: l,
-    ...w
-  } = r, a = k(null);
+    placeholder: w,
+    selfClear: I,
+    value: c,
+    ...N
+  } = r, l = V(null);
   function D(e) {
-    var f;
+    var p;
     if (!s) return;
-    const t = (f = e.currentTarget) == null ? void 0 : f.value;
-    T ? z(() => s(e, t)) : s(e, t);
+    const n = (p = e.currentTarget) == null ? void 0 : p.value;
+    T ? z(() => s(e, n)) : s(e, n);
   }
-  function K(e) {
-    if (e.key === m.Enter) {
-      i == null || i(e, e.currentTarget.value), N ? e.currentTarget.value = "" : (e.currentTarget.blur(), n == null || n(e, e.currentTarget.value));
+  function E(e) {
+    if (e.key === j.Enter) {
+      i == null || i(e, e.currentTarget.value), I ? e.currentTarget.value = "" : (e.currentTarget.blur(), t == null || t(e, e.currentTarget.value));
       return;
     }
-    e.key === m.Escape && (o == null || o(e), e.currentTarget.value = _(l), e.currentTarget.blur());
+    k(e.key) && (o == null || o(e), e.currentTarget.value = a(c), e.currentTarget.blur());
   }
-  return B(() => {
-    const e = a.current;
+  return d(() => {
+    const e = l.current;
     if (!e) return;
-    const t = _(l);
-    e.value !== t && (e.value = t), !(!d && !c) && setTimeout(() => {
-      e.focus(), c && e.select();
+    const n = a(c);
+    e.value !== n && (e.value = n), !(!_ && !f) && setTimeout(() => {
+      e.focus(), f && e.select();
     }, 1);
-  }, []), /* @__PURE__ */ j(
+  }, []), d(() => {
+    const e = l.current;
+    if (!e || document.activeElement === e)
+      return;
+    const n = a(c);
+    e.value !== n && (e.value = n);
+  }), /* @__PURE__ */ K(
     S,
     {
-      className: E([
+      className: B([
         u.input,
         y && u.fluid,
         h && u.monospace,
         b
       ]),
-      ...w,
+      ...N,
       children: [
-        /* @__PURE__ */ p("div", { className: u.baseline, children: "." }),
-        /* @__PURE__ */ p(
+        /* @__PURE__ */ m("div", { className: u.baseline, children: "." }),
+        /* @__PURE__ */ m(
           "input",
           {
             className: u.inner,
             disabled: g,
             maxLength: x,
-            onBlur: (e) => n == null ? void 0 : n(e, e.target.value),
+            onBlur: (e) => t == null ? void 0 : t(e, e.target.value),
             onChange: D,
-            onKeyDown: K,
-            placeholder: I,
-            ref: a
+            onKeyDown: E,
+            placeholder: w,
+            ref: l
           }
         )
       ]
@@ -85,5 +91,5 @@ function P(r) {
 }
 export {
   P as Input,
-  _ as toInputValue
+  a as toInputValue
 };

package/dist/components/NoticeBox.d.ts

@@ -2,7 +2,7 @@ import { BoxProps } from './Box';
 
 type Props = ExclusiveProps & BoxProps;
 /** You MUST use only one or none */
-type NoticeType = 'info' | 'success' | 'danger';
+type NoticeType = 'info' | 'success' | 'warning' | 'danger';
 type None = {
     [K in NoticeType]?: undefined;
 };
@@ -12,6 +12,9 @@ type ExclusiveProps = None | (Omit<None, 'info'> & {
 }) | (Omit<None, 'success'> & {
     /** Green notice */
     success: boolean;
+}) | (Omit<None, 'warning'> & {
+    /** Orange notice */
+    warning: boolean;
 }) | (Omit<None, 'danger'> & {
     /** Red notice */
     danger: boolean;

package/dist/components/NoticeBox.js

@@ -1,49 +1,50 @@
-import { jsx as t } from "react/jsx-runtime";
-import { classes as a } from "../common/react.js";
+import { jsx as a } from "react/jsx-runtime";
+import { classes as i } from "../common/react.js";
 import { Box as y } from "./Box.js";
-import '../assets/NoticeBox.css';const m = "_noticeBox_56yom_17", i = "_color__black_56yom_28", g = "_color__white_56yom_33", b = "_color__red_56yom_38", d = "_color__orange_56yom_43", p = "_color__yellow_56yom_48", u = "_color__olive_56yom_53", w = "_color__green_56yom_58", f = "_color__teal_56yom_63", v = "_color__blue_56yom_68", x = "_color__violet_56yom_73", k = "_color__purple_56yom_78", B = "_color__pink_56yom_83", h = "_color__brown_56yom_88", N = "_color__grey_56yom_93", j = "_color__good_56yom_103", q = "_color__average_56yom_108", z = "_color__bad_56yom_113", A = "_color__label_56yom_118", C = "_info_56yom_123", D = "_success_56yom_128", E = "_warning_56yom_133", F = "_danger_56yom_138", o = {
+import '../assets/NoticeBox.css';const m = "_noticeBox_56yom_17", g = "_color__black_56yom_28", b = "_color__white_56yom_33", d = "_color__red_56yom_38", w = "_color__orange_56yom_43", p = "_color__yellow_56yom_48", u = "_color__olive_56yom_53", f = "_color__green_56yom_58", v = "_color__teal_56yom_63", x = "_color__blue_56yom_68", k = "_color__violet_56yom_73", B = "_color__purple_56yom_78", h = "_color__pink_56yom_83", N = "_color__brown_56yom_88", j = "_color__grey_56yom_93", q = "_color__good_56yom_103", z = "_color__average_56yom_108", A = "_color__bad_56yom_113", C = "_color__label_56yom_118", D = "_info_56yom_123", E = "_success_56yom_128", F = "_warning_56yom_133", G = "_danger_56yom_138", o = {
   noticeBox: m,
-  color__black: i,
-  color__white: g,
-  color__red: b,
-  color__orange: d,
+  color__black: g,
+  color__white: b,
+  color__red: d,
+  color__orange: w,
   color__yellow: p,
   color__olive: u,
-  color__green: w,
-  color__teal: f,
-  color__blue: v,
-  color__violet: x,
-  color__purple: k,
-  color__pink: B,
-  color__brown: h,
-  color__grey: N,
+  color__green: f,
+  color__teal: v,
+  color__blue: x,
+  color__violet: k,
+  color__purple: B,
+  color__pink: h,
+  color__brown: N,
+  color__grey: j,
   "color__light-grey": "_color__light-grey_56yom_98",
-  color__good: j,
-  color__average: q,
-  color__bad: z,
-  color__label: A,
-  info: C,
-  success: D,
-  warning: E,
-  danger: F
+  color__good: q,
+  color__average: z,
+  color__bad: A,
+  color__label: C,
+  info: D,
+  success: E,
+  warning: F,
+  danger: G
 };
-function J(c) {
-  const { className: r, color: _, info: l, success: e, danger: n, ...s } = c;
-  return /* @__PURE__ */ t(
+function K(c) {
+  const { className: r, color: _, info: l, success: e, warning: n, danger: s, ...t } = c;
+  return /* @__PURE__ */ a(
     y,
     {
-      className: a([
+      className: i([
         o.noticeBox,
         _ && o["color__" + _],
         l && o.info,
         e && o.success,
-        n && o.danger,
+        n && o.warning,
+        s && o.danger,
         r
       ]),
-      ...s
+      ...t
     }
   );
 }
 export {
-  J as NoticeBox
+  K as NoticeBox
 };