tgui-core 1.2.0 → 1.3.1

package/dist/components/Flex.js

@@ -1,72 +1,70 @@
-import { jsx as c } from "react/jsx-runtime";
-import { classes as l } from "../common/react.js";
-import { computeBoxClassName as m, computeBoxProps as a, unit as d } from "./Box.js";
-import '../assets/Flex.css';const p = "_flex_djoni_5", N = "_inline_djoni_10", r = {
-  flex: p,
-  inline: N
-};
-function y(e) {
-  return l([
-    r.flex,
-    e.inline && r.inline,
+import { jsx as l } from "react/jsx-runtime";
+import { classes as r } from "../common/react.js";
+import { computeBoxClassName as m, computeBoxProps as a, unit as f } from "./Box.js";
+function p(e) {
+  return r([
+    "Flex",
+    e.inline && "Flex--inline",
     m(e)
   ]);
 }
-function v(e) {
-  const { direction: n, wrap: t, align: o, justify: s, ...i } = e;
+function d(e) {
+  const { direction: s, wrap: t, align: i, justify: n, ...o } = e;
   return a({
     style: {
-      ...i.style,
-      flexDirection: n,
+      ...o.style,
+      flexDirection: s,
       flexWrap: t === !0 ? "wrap" : t,
-      alignItems: o,
-      justifyContent: s
+      alignItems: i,
+      justifyContent: n
     },
-    ...i
+    ...o
   });
 }
-function _(e) {
-  const { className: n, ...t } = e;
-  return /* @__PURE__ */ c(
+function F(e) {
+  const { className: s, ...t } = e;
+  return /* @__PURE__ */ l(
     "div",
     {
-      className: l([n, y(t)]),
-      ...v(t)
+      className: r([s, p(t)]),
+      ...d(t)
     }
   );
 }
-function g(e) {
-  const { style: n, grow: t, order: o, shrink: s, basis: i, align: u, ...f } = e, x = i ?? // IE11: Set basis to specified width if it's known, which fixes certain
+const N = (e) => r(["Flex__item", m(e)]);
+function v(e) {
+  const { style: s, grow: t, order: i, shrink: n, basis: o, align: c, ...u } = e, x = o ?? // IE11: Set basis to specified width if it's known, which fixes certain
   // bugs when rendering tables inside the flex.
   e.width ?? // If grow is used, basis should be set to 0 to be consistent with
   // flex css shorthand `flex: 1`.
   (t !== void 0 ? 0 : void 0);
   return a({
     style: {
-      ...n,
+      ...s,
       flexGrow: t !== void 0 && Number(t),
-      flexShrink: s !== void 0 && Number(s),
-      flexBasis: d(x),
-      order: o,
-      alignSelf: u
+      flexShrink: n !== void 0 && Number(n),
+      flexBasis: f(x),
+      order: i,
+      alignSelf: c
     },
-    ...f
+    ...u
   });
 }
-function j(e) {
-  const { className: n, ...t } = e;
-  return /* @__PURE__ */ c(
+function y(e) {
+  const { className: s, ...t } = e;
+  return /* @__PURE__ */ l(
     "div",
     {
-      className: l([n, m(e)]),
-      ...g(t)
+      className: r([s, N(e)]),
+      ...v(t)
     }
   );
 }
-_.Item = j;
+F.Item = y;
 export {
-  _ as Flex,
-  y as computeFlexClassName,
-  g as computeFlexItemProps,
-  v as computeFlexProps
+  F as Flex,
+  p as computeFlexClassName,
+  N as computeFlexItemClassName,
+  v as computeFlexItemProps,
+  d as computeFlexProps
 };

package/dist/components/Icon.d.ts

@@ -1,7 +1,6 @@
 import { CSSProperties, ReactNode } from 'react';
 import { BooleanLike } from '../common/react';
 import { BoxProps } from './Box';
-
 type Props = {
     /** Icon name. See [icon list](https://fontawesome.com/v5/search?o=r&m=free) */
     name: string;

package/dist/components/Icon.js

@@ -1,51 +1,44 @@
-import { jsx as l } from "react/jsx-runtime";
-import { classes as m } from "../common/react.js";
+import { jsx as m } from "react/jsx-runtime";
+import { classes as l } from "../common/react.js";
 import { computeBoxProps as p, computeBoxClassName as u } from "./Box.js";
-import '../assets/Icon.css';const x = "_iconStack_bg05l_7", y = "_icon_bg05l_7", S = {
-  iconStack: x,
-  icon: y
-}, f = /-o$/;
-function b(a) {
-  const { name: t, size: o, spin: c, className: _, rotation: i, ...n } = a, e = n.style || {};
-  o && (e.fontSize = o * 100 + "%"), i && (e.transform = `rotate(${i}deg)`), n.style = e;
-  const N = p(n);
-  let s = "";
-  if (t.startsWith("tg-"))
-    s = t;
+const f = /-o$/;
+function d(c) {
+  const { name: s, size: o, spin: a, className: N, rotation: r, ...e } = c, n = e.style || {};
+  o && (n.fontSize = `${o * 100}%`), r && (n.transform = `rotate(${r}deg)`), e.style = n;
+  const x = p(e);
+  let t = "";
+  if (s.startsWith("tg-"))
+    t = s;
   else {
-    const k = f.test(t), r = t.replace(f, ""), g = !r.startsWith("fa-");
-    s = k ? "far " : "fas ", g && (s += "fa-"), s += r, c && (s += " fa-spin");
+    const I = f.test(s), i = s.replace(f, ""), S = !i.startsWith("fa-");
+    t = I ? "far " : "fas ", S && (t += "fa-"), t += i, a && (t += " fa-spin");
   }
-  return /* @__PURE__ */ l(
+  return /* @__PURE__ */ m(
     "i",
     {
-      className: m([
-        S.icon,
-        s,
-        _,
-        u(n)
+      className: l([
+        "Icon",
+        t,
+        N,
+        u(e)
       ]),
-      ...N
+      ...x
     }
   );
 }
-function d(a) {
-  const { className: t, children: o, ...c } = a;
-  return /* @__PURE__ */ l(
+function g(c) {
+  const { className: s, children: o, ...a } = c;
+  return /* @__PURE__ */ m(
     "span",
     {
-      className: m([
-        S.iconStack,
-        t,
-        u(c)
-      ]),
-      ...p(c),
+      className: l(["IconStack", s, u(a)]),
+      ...p(a),
       children: o
     }
   );
 }
-b.Stack = d;
+d.Stack = g;
 export {
-  b as Icon,
-  d as IconStack
+  d as Icon,
+  g as IconStack
 };

package/dist/components/Image.d.ts

@@ -1,5 +1,4 @@
 import { BoxProps } from './Box';
-
 type Props = Partial<{
     className: string;
     /** True is default, this fixes an ie thing */

package/dist/components/Image.js

@@ -1,15 +1,15 @@
 import { jsx as p } from "react/jsx-runtime";
-import { useRef as f } from "react";
-import { computeBoxProps as a } from "./Box.js";
+import { useRef as a } from "react";
+import { computeBoxProps as f } from "./Box.js";
 const l = 5;
-function b(o) {
+function E(o) {
   const {
     fixBlur: s = !0,
     fixErrors: m = !1,
     objectFit: n = "fill",
     src: e,
     ...c
-  } = o, t = f(0), r = a(c);
+  } = o, t = a(0), r = f(c);
   return r.style = {
     ...r.style,
     "-ms-interpolation-mode": s ? "nearest-neighbor" : "auto",
@@ -26,10 +26,11 @@ function b(o) {
         }
       },
       src: e,
-      ...r
+      ...r,
+      alt: "dm icon"
     }
   );
 }
 export {
-  b as Image
+  E as Image
 };

package/dist/components/ImageButton.d.ts

@@ -2,7 +2,6 @@ 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[];

package/dist/components/ImageButton.js

@@ -1,212 +1,129 @@
-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 { jsxs as g, jsx as t } from "react/jsx-runtime";
+import { classes as l } from "../common/react.js";
+import { computeBoxProps as A } from "./Box.js";
+import { DmIcon as D } from "./DmIcon.js";
+import { Icon as F } from "./Icon.js";
 import { Image as j } from "./Image.js";
-import { Stack as I } from "./Stack.js";
+import { Stack as y } 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($) {
+function H(N) {
   const {
-    asset: p,
-    base64: s,
-    buttons: i,
-    buttonsAlt: m,
-    children: r,
-    className: A,
-    color: _,
+    asset: f,
+    base64: r,
+    buttons: m,
+    buttonsAlt: h,
+    children: i,
+    className: k,
+    color: e,
     disabled: a,
-    dmFallback: f,
-    dmIcon: h,
-    dmIconState: v,
+    dmFallback: I,
+    dmIcon: b,
+    dmIconState: x,
     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,
+    imageSize: o = 64,
+    imageSrc: d,
+    onClick: s,
+    onRightClick: u,
+    selected: B,
+    title: C,
+    tooltip: _,
+    tooltipPosition: w,
+    ...v
+  } = N;
+  function $(n, S) {
+    return /* @__PURE__ */ t(y, { height: `${o}px`, width: `${o}px`, children: /* @__PURE__ */ t(y.Item, { grow: !0, textAlign: "center", align: "center", children: /* @__PURE__ */ t(
+      F,
       {
         spin: S,
-        name: l,
+        name: n,
         color: "gray",
-        style: { fontSize: `calc(${n}px * 0.75)` }
+        style: { fontSize: `calc(${o}px * 0.75)` }
       }
     ) }) });
   }
-  let b = /* @__PURE__ */ d(
+  let p = /* @__PURE__ */ g(
     "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
+      className: l([
+        "container",
+        m && "hasButtons",
+        !s && !u && "noAction",
+        B && "ImageButton--selected",
+        a && "ImageButton--disabled",
+        e && typeof e == "string" ? `ImageButton--color__${e}` : "ImageButton--color__default"
       ]),
       tabIndex: a ? void 0 : 0,
-      onClick: (l) => {
-        !a && C && C(l);
+      onClick: (n) => {
+        !a && s && s(n);
+      },
+      onKeyDown: (n) => {
+        n.key === "Enter" && !a && s && s(n);
       },
-      onContextMenu: (l) => {
-        l.preventDefault(), !a && g && g(l);
+      onContextMenu: (n) => {
+        n.preventDefault(), !a && u && u(n);
       },
-      style: { width: c ? "auto" : `calc(${n}px + 0.5em + 2px)` },
+      style: { width: c ? "auto" : `calc(${o}px + 0.5em + 2px)` },
       children: [
-        /* @__PURE__ */ t("div", { className: e([o.image]), children: s || p || u ? /* @__PURE__ */ t(
+        /* @__PURE__ */ t("div", { className: "image", children: r || f || d ? /* @__PURE__ */ t(
           j,
           {
-            className: e(!s && !u && p || []),
-            src: s ? `data:image/png;base64,${s}` : u,
-            height: `${n}px`,
-            width: `${n}px`
+            className: l(!r && !d && f || []),
+            src: r ? `data:image/png;base64,${r}` : d,
+            height: `${o}px`,
+            width: `${o}px`
           }
-        ) : h && v ? /* @__PURE__ */ t(
-          F,
+        ) : b && x ? /* @__PURE__ */ t(
+          D,
           {
-            icon: h,
-            icon_state: v,
-            fallback: f || x("spinner", !0),
-            height: `${n}px`,
-            width: `${n}px`
+            icon: b,
+            icon_state: x,
+            fallback: I || $("spinner", !0),
+            height: `${o}px`,
+            width: `${o}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(
+        ) : $("question", !1) }),
+        c ? /* @__PURE__ */ g("div", { className: "info", children: [
+          C && /* @__PURE__ */ t("span", { className: l(["title", i && "divider"]), children: C }),
+          i && /* @__PURE__ */ t("span", { className: "contentFluid", children: i })
+        ] }) : i && /* @__PURE__ */ t(
           "span",
           {
-            className: e([
-              o.content,
-              y && o.contentSelected,
-              a && o.contentDisabled,
-              _ && typeof _ == "string" ? o["contentColor__" + _] : o.contentColor__default
+            className: l([
+              "content",
+              B && "ImageButton--contentSelected",
+              a && "ImageButton--contentDisabled",
+              e && typeof e == "string" ? `ImageButton--contentColor__${e}` : "ImageButton--contentColor__default"
             ]),
-            children: r
+            children: i
           }
         )
       ]
     }
   );
-  return k && (b = /* @__PURE__ */ t(z, { content: k, position: B, children: b })), /* @__PURE__ */ d(
+  return _ && (p = /* @__PURE__ */ t(z, { content: _, position: w, children: p })), /* @__PURE__ */ g(
     "div",
     {
-      className: e([
-        o.ImageButton,
-        c && o.fluid,
-        A
+      className: l([
+        "ImageButton",
+        c && "ImageButton--fluid",
+        k
       ]),
-      ...D(N),
+      ...A(v),
       children: [
-        b,
-        i && /* @__PURE__ */ t(
+        p,
+        m && /* @__PURE__ */ t(
           "div",
           {
-            className: e([
-              o.buttonsContainer,
-              m && o.buttonsAltContainer,
-              !r && o.buttonsEmpty,
-              c && _ && typeof _ == "string" ? o["buttonsContainerColor__" + _] : c && o.buttonsContainerColor__default
+            className: l([
+              "buttonsContainer",
+              h && "buttonsAltContainer",
+              !i && "buttonsEmpty",
+              c && e && typeof e == "string" ? `ImageButton--buttonsContainerColor__${e}` : c && "ImageButton--buttonsContainerColor__default"
             ]),
             style: {
-              width: m ? `calc(${n}px + 0.5em)` : "auto"
+              width: h ? `calc(${o}px + 0.5em)` : "auto"
             },
-            children: i
+            children: m
           }
         )
       ]
@@ -214,5 +131,5 @@ function Ct($) {
   );
 }
 export {
-  Ct as ImageButton
+  H as ImageButton
 };

package/dist/components/InfinitePlane.js

@@ -24,7 +24,7 @@ class k extends v {
   }
   doOffsetMouse(e) {
     const { zoom: o } = this.state;
-    e.screenZoomX = e.screenX * Math.pow(o, -1), e.screenZoomY = e.screenY * Math.pow(o, -1);
+    e.screenZoomX = e.screenX * o ** -1, e.screenZoomY = e.screenY * o ** -1;
   }
   handleMouseDown(e) {
     this.setState((o) => ({

package/dist/components/Input.d.ts

@@ -1,6 +1,5 @@
 import { SyntheticEvent } from 'react';
 import { BoxProps } from './Box';
-
 type ConditionalProps = {
     /**
      * Mark this if you want to debounce onInput.