tgui-core 1.1.24 → 1.3.0

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

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

package/dist/components/Input.js

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

package/dist/components/KeyListener.d.ts

@@ -1,6 +1,5 @@
 import { Component } from 'react';
 import { KeyEvent } from '../common/events';
-
 type KeyListenerProps = Partial<{
     onKey: (key: KeyEvent) => void;
     onKeyDown: (key: KeyEvent) => void;

package/dist/components/Knob.d.ts

@@ -1,6 +1,5 @@
 import { BooleanLike } from '../common/react';
 import { BoxProps } from './Box';
-
 type Props = {
     /** Value itself, controls the position of the cursor. */
     value: number;