tgui-core 1.1.11 → 1.1.13

package/dist/components/Divider.js

@@ -0,0 +1,22 @@
+import { jsx as r } from "react/jsx-runtime";
+import { classes as e } from "../common/react.js";
+import '../assets/Divider.css';const d = "_horizontal_1dhv5_9", c = "_hidden_1dhv5_12", s = "_vertical_1dhv5_16", i = {
+  horizontal: d,
+  hidden: c,
+  vertical: s
+};
+function l(t) {
+  const { hidden: o, vertical: n } = t;
+  return /* @__PURE__ */ r(
+    "div",
+    {
+      className: e([
+        o && i.hidden,
+        n ? i.vertical : i.horizontal
+      ])
+    }
+  );
+}
+export {
+  l as Divider
+};

package/dist/components/DmIcon.d.ts

@@ -0,0 +1,33 @@
+import { ReactNode } from 'react';
+import { BooleanLike } from '../common/react';
+import { BoxProps } from './Box';
+
+declare enum Direction {
+    NORTH = 1,
+    SOUTH = 2,
+    EAST = 4,
+    WEST = 8,
+    NORTHEAST = 5,
+    NORTHWEST = 9,
+    SOUTHEAST = 6,
+    SOUTHWEST = 10
+}
+type Props = {
+    /** Required: The path of the icon */
+    icon: string;
+    /** Required: The state of the icon */
+    icon_state: string;
+} & Partial<{
+    /** Facing direction. See direction enum. Default is South */
+    direction: Direction;
+    /** Fallback icon. */
+    fallback: ReactNode;
+    /** Frame number. Default is 1 */
+    frame: number;
+    /** Movement state. Default is false */
+    movement: BooleanLike;
+}> & BoxProps;
+export declare function DmIcon(props: Props): {
+    displayText: string;
+};
+export {};

package/dist/components/DmIcon.js

@@ -0,0 +1,29 @@
+import { useState as r, useEffect as i } from "react";
+import { resolveAsset as u } from "../common/assets.js";
+let e;
+function p(c) {
+  const {
+    // className,
+    // direction = Direction.SOUTH,
+    // fallback,
+    // frame = 1,
+    // icon_state,
+    icon: o
+    // movement = false,
+    // ...rest
+  } = c, [a, s] = r(""), [f, n] = r("unloaded");
+  return i(() => {
+    if (e) {
+      n(Object.keys(e).length.toString()), s(e[o]);
+      return;
+    }
+    fetch(u("icon_ref_map.json")).then((t) => (n(t.statusText), t.json())).then((t) => {
+      e = t, s(t[o]);
+    }).catch((t) => {
+      n(t.message);
+    });
+  }, []), { displayText: f };
+}
+export {
+  p as DmIcon
+};

package/dist/components/DraggableControl.js

@@ -0,0 +1,176 @@
+import { jsxs as N, Fragment as T, 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";
+const R = 400;
+function S(v, u) {
+  return v.screenX * u[0] + v.screenY * u[1];
+}
+class C extends b {
+  constructor(u) {
+    super(u), this.inputRef = I(), this.state = {
+      value: u.value,
+      dragging: !1,
+      editing: !1,
+      internalValue: null,
+      origin: null,
+      suppressingFlicker: !1
+    }, this.flickerTimer = null, this.suppressFlicker = () => {
+      const { suppressFlicker: e } = this.props;
+      e > 0 && (this.setState({
+        suppressingFlicker: !0
+      }), clearTimeout(this.flickerTimer), this.flickerTimer = setTimeout(() => {
+        this.setState({
+          suppressingFlicker: !1
+        });
+      }, e));
+    }, this.handleDragStart = (e) => {
+      const { value: i, dragMatrix: l } = this.props, { editing: s } = this.state;
+      s || (document.body.style["pointer-events"] = "none", this.ref = e.target, this.setState({
+        dragging: !1,
+        origin: S(e, l),
+        value: i,
+        internalValue: i
+      }), this.timer = setTimeout(() => {
+        this.setState({
+          dragging: !0
+        });
+      }, 250), this.dragInterval = setInterval(() => {
+        const { dragging: o, value: g } = this.state, { onDrag: a } = this.props;
+        o && a && a(e, g);
+      }, this.props.updateRate || R), document.addEventListener("mousemove", this.handleDragMove), document.addEventListener("mouseup", this.handleDragEnd));
+    }, this.handleDragMove = (e) => {
+      const { minValue: i, maxValue: l, step: s, stepPixelSize: o, dragMatrix: g } = this.props;
+      this.setState((a) => {
+        const n = { ...a }, p = S(e, g) - n.origin;
+        if (a.dragging) {
+          const h = Number.isFinite(i) ? i % s : 0;
+          n.internalValue = m(
+            n.internalValue + p * s / o,
+            i - s,
+            l + s
+          ), n.value = m(
+            n.internalValue - n.internalValue % s + h,
+            i,
+            l
+          ), n.origin = S(e, g);
+        } else Math.abs(p) > 4 && (n.dragging = !0);
+        return n;
+      });
+    }, this.handleDragEnd = (e) => {
+      const { onChange: i, onDrag: l } = this.props, { dragging: s, value: o, internalValue: g } = this.state;
+      if (document.body.style["pointer-events"] = "auto", clearTimeout(this.timer), clearInterval(this.dragInterval), this.setState({
+        dragging: !1,
+        editing: !s,
+        origin: null
+      }), document.removeEventListener("mousemove", this.handleDragMove), document.removeEventListener("mouseup", this.handleDragEnd), s)
+        this.suppressFlicker(), i && i(e, o), l && l(e, o);
+      else if (this.inputRef) {
+        const a = this.inputRef.current;
+        a.value = g;
+        try {
+          a.focus(), a.select();
+        } catch {
+        }
+      }
+    };
+  }
+  render() {
+    const {
+      dragging: u,
+      editing: e,
+      value: i,
+      suppressingFlicker: l
+    } = this.state, {
+      animated: s,
+      value: o,
+      unit: g,
+      minValue: a,
+      maxValue: n,
+      unclamped: p,
+      format: h,
+      onChange: f,
+      onDrag: c,
+      children: D,
+      // Input props
+      height: k,
+      lineHeight: V,
+      fontSize: y
+    } = this.props;
+    let d = o;
+    (u || l) && (d = i);
+    const E = /* @__PURE__ */ N(T, { children: [
+      s && !u && !l ? /* @__PURE__ */ F(M, { value: d, format: h }) : h ? h(d) : d,
+      g ? " " + g : ""
+    ] }), x = /* @__PURE__ */ F(
+      "input",
+      {
+        ref: this.inputRef,
+        className: "NumberInput__input",
+        style: {
+          display: e ? void 0 : "none",
+          height: k,
+          lineHeight: V,
+          fontsize: y
+        },
+        onBlur: (r) => {
+          if (!e)
+            return;
+          let t;
+          if (p ? t = parseFloat(r.target.value) : t = m(parseFloat(r.target.value), a, n), Number.isNaN(t)) {
+            this.setState({
+              editing: !1
+            });
+            return;
+          }
+          this.setState({
+            editing: !1,
+            value: t
+          }), this.suppressFlicker(), f && f(r, t), c && c(r, t);
+        },
+        onKeyDown: (r) => {
+          if (r.keyCode === 13) {
+            let t;
+            if (p ? t = parseFloat(r.target.value) : t = m(parseFloat(r.target.value), a, n), Number.isNaN(t)) {
+              this.setState({
+                editing: !1
+              });
+              return;
+            }
+            this.setState({
+              editing: !1,
+              value: t
+            }), this.suppressFlicker(), f && f(r, t), c && c(r, t);
+            return;
+          }
+          if (r.keyCode === 27) {
+            this.setState({
+              editing: !1
+            });
+            return;
+          }
+        }
+      }
+    );
+    return D({
+      dragging: u,
+      editing: e,
+      value: o,
+      displayValue: d,
+      displayElement: E,
+      inputElement: x,
+      handleDragStart: this.handleDragStart
+    });
+  }
+}
+C.defaultProps = {
+  minValue: -1 / 0,
+  maxValue: 1 / 0,
+  step: 1,
+  stepPixelSize: 1,
+  suppressFlicker: 50,
+  dragMatrix: [1, 0]
+};
+export {
+  C as DraggableControl
+};

package/dist/components/Dropdown.d.ts

@@ -0,0 +1,48 @@
+import { ReactNode } from 'react';
+import { BoxProps } from './Box';
+
+export type DropdownEntry = {
+    displayText: ReactNode;
+    value: string | number;
+};
+type DropdownOption = string | DropdownEntry;
+type Props = {
+    /** Called when a value is picked from the list, `value` is the value that was picked */
+    onSelected: (value: any) => void;
+    /** An array of strings which will be displayed in the
+    dropdown when open. See Dropdown.tsx for more advanced usage with DropdownEntry */
+    options: DropdownOption[];
+    /** Currently selected entry to display. Can be left stateless to permanently display this value. */
+    selected: DropdownOption | null | undefined;
+} & Partial<{
+    /** Whether to scroll automatically on open. Defaults to true */
+    autoScroll: boolean;
+    /** Whether to display previous / next buttons */
+    buttons: boolean;
+    /** Whether to clip the selected text */
+    clipSelectedText: boolean;
+    /** Color of dropdown button */
+    color: string;
+    /** Disables the dropdown */
+    disabled: boolean;
+    /** Overwrites selection text with this. Good for objects etc. */
+    displayText: ReactNode;
+    /** Icon to display in dropdown button */
+    icon: string;
+    /** Angle of the icon */
+    iconRotation: number;
+    /** Whether or not the icon should spin */
+    iconSpin: boolean;
+    /** Width of the dropdown menu. Default: 15rem */
+    menuWidth: string;
+    /** Whether or not the arrow on the right hand side of the dropdown button is visible */
+    noChevron: boolean;
+    /** Called when dropdown button is clicked */
+    onClick: (event: any) => void;
+    /** Dropdown renders over instead of below */
+    over: boolean;
+    /** Text to show when nothing has been selected. */
+    placeholder: string;
+}> & BoxProps;
+export declare function Dropdown(props: Props): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/components/Dropdown.js

@@ -0,0 +1,152 @@
+import { jsx as o, jsxs as m, Fragment as W } from "react/jsx-runtime";
+import { useState as F, useRef as L, useEffect as q } from "react";
+import { classes as y } from "../common/react.js";
+import { unit as z } from "./Box.js";
+import { Button as D } from "./Button.js";
+import { Icon as b } from "./Icon.js";
+import { Popper as A } from "./Popper.js";
+const G = -1;
+function f(d) {
+  return typeof d == "string" ? d : d.value;
+}
+function Y(d) {
+  const {
+    autoScroll: w = !0,
+    buttons: I,
+    className: O,
+    clipSelectedText: k = !0,
+    color: B = "default",
+    disabled: a,
+    displayText: C,
+    icon: x,
+    iconRotation: T,
+    iconSpin: j,
+    menuWidth: R = "15rem",
+    noChevron: S,
+    onClick: p,
+    onSelected: i,
+    options: r = [],
+    over: g,
+    placeholder: E = "Select...",
+    selected: u,
+    width: P = "15rem"
+  } = d, [l, h] = F(!1), V = g ? !l : l, v = L(null), s = r.findIndex((e) => f(e) === u) || 0;
+  function _(e) {
+    var c;
+    let t = e;
+    e < s ? t = e < 2 ? 0 : e - 2 : t = e > r.length - 3 ? r.length - 1 : e - 2;
+    const n = (c = v.current) == null ? void 0 : c.children[t];
+    n == null || n.scrollIntoView({ block: "nearest" });
+  }
+  function N(e) {
+    if (r.length < 1 || a)
+      return;
+    const t = 0, n = r.length - 1;
+    let c;
+    s < 0 ? c = e === "next" ? n : t : e === "next" ? c = s === n ? t : s + 1 : c = s === t ? n : s - 1, l && w && _(c), i == null || i(f(r[c]));
+  }
+  return q(() => {
+    var e;
+    l && (w && s !== G && _(s), (e = v.current) == null || e.focus());
+  }, [l]), /* @__PURE__ */ o(
+    A,
+    {
+      isOpen: l,
+      onClickOutside: () => h(!1),
+      placement: g ? "top-start" : "bottom-start",
+      content: /* @__PURE__ */ m(
+        "div",
+        {
+          className: "Layout Dropdown__menu",
+          style: { minWidth: R },
+          ref: v,
+          children: [
+            r.length === 0 && /* @__PURE__ */ o("div", { className: "Dropdown__menuentry", children: "No options" }),
+            r.map((e, t) => {
+              const n = f(e);
+              return /* @__PURE__ */ o(
+                "div",
+                {
+                  className: y([
+                    "Dropdown__menuentry",
+                    u === n && "selected"
+                  ]),
+                  onClick: () => {
+                    h(!1), i == null || i(n);
+                  },
+                  children: typeof e == "string" ? e : e.displayText
+                },
+                t
+              );
+            })
+          ]
+        }
+      ),
+      children: /* @__PURE__ */ m("div", { className: "Dropdown", style: { width: z(P) }, children: [
+        /* @__PURE__ */ m(
+          "div",
+          {
+            className: y([
+              "Dropdown__control",
+              "Button",
+              "Button--dropdown",
+              "Button--color--" + B,
+              a && "Button--disabled",
+              O
+            ]),
+            onClick: (e) => {
+              a && !l || (h(!l), p == null || p(e));
+            },
+            children: [
+              x && /* @__PURE__ */ o(b, { mr: 1, name: x, rotation: T, spin: j }),
+              /* @__PURE__ */ o(
+                "span",
+                {
+                  className: "Dropdown__selected-text",
+                  style: {
+                    overflow: k ? "hidden" : "visible"
+                  },
+                  children: C || u && f(u) || E
+                }
+              ),
+              !S && /* @__PURE__ */ o("span", { className: "Dropdown__arrow-button", children: /* @__PURE__ */ o(b, { name: V ? "chevron-up" : "chevron-down" }) })
+            ]
+          }
+        ),
+        I && /* @__PURE__ */ m(W, { children: [
+          /* @__PURE__ */ o(
+            D,
+            {
+              disabled: a,
+              height: 1.8,
+              icon: "chevron-left",
+              onClick: () => {
+                N(
+                  "previous"
+                  /* Previous */
+                );
+              }
+            }
+          ),
+          /* @__PURE__ */ o(
+            D,
+            {
+              disabled: a,
+              height: 1.8,
+              icon: "chevron-right",
+              onClick: () => {
+                N(
+                  "next"
+                  /* Next */
+                );
+              }
+            }
+          )
+        ] })
+      ] })
+    }
+  );
+}
+export {
+  Y as Dropdown
+};

package/dist/components/FakeTerminal.js

@@ -0,0 +1,38 @@
+import { jsx as r, jsxs as i } from "react/jsx-runtime";
+import { Component as o, Fragment as c } from "react";
+import { Box as m } from "./Box.js";
+class h extends o {
+  constructor(e) {
+    super(e), this.timer = null, this.state = {
+      currentIndex: 0,
+      currentDisplay: []
+    };
+  }
+  tick() {
+    const { props: e, state: t } = this;
+    if (t.currentIndex <= e.allMessages.length) {
+      this.setState((n) => ({
+        currentIndex: n.currentIndex + 1
+      }));
+      const { currentDisplay: s } = t;
+      s.push(e.allMessages[t.currentIndex]);
+    } else
+      clearTimeout(this.timer), setTimeout(e.onFinished, e.finishedTimeout);
+  }
+  componentDidMount() {
+    const { linesPerSecond: e = 2.5 } = this.props;
+    this.timer = setInterval(() => this.tick(), 1e3 / e);
+  }
+  componentWillUnmount() {
+    clearTimeout(this.timer);
+  }
+  render() {
+    return /* @__PURE__ */ r(m, { m: 1, children: this.state.currentDisplay.map((e) => /* @__PURE__ */ i(c, { children: [
+      e,
+      /* @__PURE__ */ r("br", {})
+    ] }, e)) });
+  }
+}
+export {
+  h as FakeTerminal
+};

package/dist/components/FitText.d.ts

@@ -0,0 +1,22 @@
+import { Component, HTMLAttributes, PropsWithChildren, RefObject } from 'react';
+
+type Props = {
+    acceptableDifference?: number;
+    maxFontSize: number;
+    maxWidth: number;
+    native?: HTMLAttributes<HTMLDivElement>;
+} & PropsWithChildren;
+type State = {
+    fontSize: number;
+};
+export declare class FitText extends Component<Props, State> {
+    ref: RefObject<HTMLDivElement>;
+    state: State;
+    constructor(props: Props);
+    componentDidUpdate(prevProps: any): void;
+    componentWillUnmount(): void;
+    resize(): void;
+    componentDidMount(): void;
+    render(): import("react/jsx-runtime").JSX.Element;
+}
+export {};

package/dist/components/FitText.js

@@ -0,0 +1,63 @@
+var d = Object.defineProperty;
+var c = (i, t, e) => t in i ? d(i, t, { enumerable: !0, configurable: !0, writable: !0, value: e }) : i[t] = e;
+var o = (i, t, e) => c(i, typeof t != "symbol" ? t + "" : t, e);
+import { jsx as a } from "react/jsx-runtime";
+import { Component as l, createRef as m } from "react";
+const z = 5;
+class S extends l {
+  constructor(e) {
+    super(e);
+    o(this, "ref", m());
+    o(this, "state", {
+      fontSize: 0
+    });
+    this.resize = this.resize.bind(this), window.addEventListener("resize", this.resize);
+  }
+  componentDidUpdate(e) {
+    e.children !== this.props.children && this.resize();
+  }
+  componentWillUnmount() {
+    window.removeEventListener("resize", this.resize);
+  }
+  resize() {
+    const e = this.ref.current;
+    if (!e)
+      return;
+    const f = this.props.maxWidth;
+    let s = 0, r = this.props.maxFontSize;
+    for (let p = 0; p < 10; p++) {
+      const n = Math.round((s + r) / 2);
+      e.style.fontSize = `${n}px`;
+      const h = e.offsetWidth - f;
+      if (h > 0)
+        r = n;
+      else if (h < (this.props.acceptableDifference ?? z))
+        s = n;
+      else
+        break;
+    }
+    this.setState({
+      fontSize: Math.round((s + r) / 2)
+    });
+  }
+  componentDidMount() {
+    this.resize();
+  }
+  render() {
+    var e;
+    return /* @__PURE__ */ a(
+      "span",
+      {
+        ref: this.ref,
+        style: {
+          fontSize: `${this.state.fontSize}px`,
+          ...typeof ((e = this.props.native) == null ? void 0 : e.style) == "object" ? this.props.native.style : {}
+        },
+        children: this.props.children
+      }
+    );
+  }
+}
+export {
+  S as FitText
+};

package/dist/components/Flex.d.ts

@@ -0,0 +1,93 @@
+import { BoxProps } from './Box';
+
+export type FlexProps = Partial<{
+    /**
+     * Default alignment of all children.
+     *
+     * - `stretch` (default) - stretch to fill the container.
+     * - `start` - items are placed at the start of the cross axis.
+     * - `end` - items are placed at the end of the cross axis.
+     * - `center` - items are centered on the cross axis.
+     * - `baseline` - items are aligned such as their baselines align.
+     */
+    align: string | boolean;
+    /**
+     * This establishes the main-axis, thus defining the direction flex items are placed in the flex container.
+     *
+     *  - `row` (default) - left to right.
+     *  - `row-reverse` - right to left.
+     *  - `column` - top to bottom.
+     *  - `column-reverse` - bottom to top.
+     */
+    direction: string;
+    /** Makes flexbox container inline, with similar behavior to an `inline` property on a `Box`. */
+    inline: boolean;
+    /**
+     * This defines the alignment along the main axis. It helps distribute extra free space leftover when either all the flex items on a line are
+     * inflexible, or are flexible but have reached their maximum size. It also exerts some control over the alignment of items when they overflow
+     * the line.
+     *
+     *   - `flex-start` (default) - items are packed toward the start of the
+     *  flex-direction.
+     * - `flex-end` - items are packed toward the end of the flex-direction.
+     * - `space-between` - items are evenly distributed in the line; first item is
+     *   on the start line, last item on the end line
+     * - `space-around` - items are evenly distributed in the line with equal space
+     *   around them. Note that visually the spaces aren't equal, since all the items
+     *   have equal space on both sides. The first item will have one unit of space
+     *   against the container edge, but two units of space between the next item
+     *  because that next item has its own spacing that applies.
+     *  - `space-evenly` - items are distributed so that the spacing between any two
+     *  items (and the space to the edges) is equal.
+     */
+    justify: string;
+    /** By default, flex items will all try to fit onto one line. You can change that and allow the items to wrap as needed with this property. */
+    scrollable: boolean;
+    /**
+     * This defines the alignment along the cross axis. It helps distribute extra free space leftover when either all the flex items on a line are
+     *  inflexible, or are flexible but have reached their maximum size. It also exerts some control over the alignment of items when they overflow
+     *  the line.
+     *
+     *  - `nowrap` (default) - all flex items will be on one line
+     *  - `wrap` - flex items will wrap onto multiple lines, from top to bottom.
+     *  - `wrap-reverse` - flex items will wrap onto multiple lines from bottom to top.
+     */
+    wrap: string | boolean;
+}> & BoxProps;
+export declare function computeFlexClassName(props: FlexProps): string;
+export declare function computeFlexProps(props: FlexProps): Record<string, any>;
+export declare function Flex(props: any): import("react/jsx-runtime").JSX.Element;
+export declare namespace Flex {
+    var Item: typeof FlexItem;
+}
+export type FlexItemProps = Partial<{
+    /** This allows the default alignment (or the one specified by align-items) to be overridden for individual flex items. */
+    align: string | boolean;
+    /**
+     * This defines the default size of an element
+     * before any flex-related calculations are done. Has to be a length
+     * (e.g. `20%`, `5rem`), an `auto` or `content` keyword.
+     *
+     * - **Important:** IE11 flex is buggy, and auto width/height calculations
+     * can sometimes end up in a circular dependency. This usually happens, when
+     * working with tables inside flex (they have wacky internal widths and such).
+     * Setting basis to `0` breaks the loop and fixes all of the problems.
+     */
+    basis: string | number;
+    /**
+     * This defines the ability for a flex item to grow if necessary. It accepts a unitless value that serves as a proportion.
+     * It dictates what amount of the available space inside the flex container the item should take up.
+     * This number is unit-less and is relative to other siblings.
+     */
+    grow: number | boolean;
+    /**
+     * By default, flex items are laid out in the source order. However, the order property controls the order in which they appear in the
+     * flex container
+     */
+    order: number;
+    /** This defines the ability for a flex item to shrink if necessary. Inverse of `grow`. */
+    shrink: number | boolean;
+}> & BoxProps;
+export declare function computeFlexItemProps(props: FlexItemProps): Record<string, any>;
+declare function FlexItem(props: any): import("react/jsx-runtime").JSX.Element;
+export {};