tgui-core 1.1.11 → 1.1.13

package/dist/components/Flex.js

@@ -0,0 +1,72 @@
+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,
+    m(e)
+  ]);
+}
+function v(e) {
+  const { direction: n, wrap: t, align: o, justify: s, ...i } = e;
+  return a({
+    style: {
+      ...i.style,
+      flexDirection: n,
+      flexWrap: t === !0 ? "wrap" : t,
+      alignItems: o,
+      justifyContent: s
+    },
+    ...i
+  });
+}
+function _(e) {
+  const { className: n, ...t } = e;
+  return /* @__PURE__ */ c(
+    "div",
+    {
+      className: l([n, y(t)]),
+      ...v(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
+  // 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,
+      flexGrow: t !== void 0 && Number(t),
+      flexShrink: s !== void 0 && Number(s),
+      flexBasis: d(x),
+      order: o,
+      alignSelf: u
+    },
+    ...f
+  });
+}
+function j(e) {
+  const { className: n, ...t } = e;
+  return /* @__PURE__ */ c(
+    "div",
+    {
+      className: l([n, m(e)]),
+      ...g(t)
+    }
+  );
+}
+_.Item = j;
+export {
+  _ as Flex,
+  y as computeFlexClassName,
+  g as computeFlexItemProps,
+  v as computeFlexProps
+};

package/dist/components/Icon.d.ts

@@ -0,0 +1,30 @@
+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;
+} & Partial<{
+    /** Custom CSS class. */
+    className: string;
+    /** Icon rotation, in degrees. */
+    rotation: number;
+    /** Icon size. `1` is normal size, `2` is two times bigger. Fractional numbers are supported. */
+    size: number;
+    /** Whether an icon should be spinning. Good for load indicators. */
+    spin: BooleanLike;
+    /** Custom CSS. */
+    style: CSSProperties;
+}> & BoxProps;
+export declare function Icon(props: Props): import("react/jsx-runtime").JSX.Element;
+export declare namespace Icon {
+    var Stack: typeof IconStack;
+}
+type IconStackUnique = {
+    children: ReactNode;
+    className?: string;
+};
+export type IconStackProps = IconStackUnique & BoxProps;
+export declare function IconStack(props: IconStackProps): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/components/Icon.js

@@ -0,0 +1,51 @@
+import { jsx as l } from "react/jsx-runtime";
+import { classes as m } 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;
+  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");
+  }
+  return /* @__PURE__ */ l(
+    "i",
+    {
+      className: m([
+        S.icon,
+        s,
+        _,
+        u(n)
+      ]),
+      ...N
+    }
+  );
+}
+function d(a) {
+  const { className: t, children: o, ...c } = a;
+  return /* @__PURE__ */ l(
+    "span",
+    {
+      className: m([
+        S.iconStack,
+        t,
+        u(c)
+      ]),
+      ...p(c),
+      children: o
+    }
+  );
+}
+b.Stack = d;
+export {
+  b as Icon,
+  d as IconStack
+};

package/dist/components/Image.d.ts

@@ -0,0 +1,14 @@
+import { BoxProps } from './Box';
+
+type Props = Partial<{
+    className: string;
+    /** True is default, this fixes an ie thing */
+    fixBlur: boolean;
+    /** False by default. Good if you're fetching images on UIs that do not auto update. This will attempt to fix the 'x' icon 5 times. */
+    fixErrors: boolean;
+    /** Fill is default. */
+    objectFit: 'contain' | 'cover';
+    src: string;
+}> & BoxProps;
+export declare function Image(props: Props): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/components/Image.js

@@ -0,0 +1,35 @@
+import { jsx as p } from "react/jsx-runtime";
+import { useRef as f } from "react";
+import { computeBoxProps as a } from "./Box.js";
+const l = 5;
+function b(o) {
+  const {
+    fixBlur: s = !0,
+    fixErrors: m = !1,
+    objectFit: n = "fill",
+    src: e,
+    ...c
+  } = o, t = f(0), r = a(c);
+  return r.style = {
+    ...r.style,
+    "-ms-interpolation-mode": s ? "nearest-neighbor" : "auto",
+    objectFit: n
+  }, /* @__PURE__ */ p(
+    "img",
+    {
+      onError: (i) => {
+        if (m && t.current < l) {
+          const u = i.currentTarget;
+          setTimeout(() => {
+            u.src = `${e}?attempt=${t.current}`, t.current++;
+          }, 1e3);
+        }
+      },
+      src: e,
+      ...r
+    }
+  );
+}
+export {
+  b as Image
+};

package/dist/components/InfinitePlane.js

@@ -0,0 +1,139 @@
+import { jsxs as l, jsx as n } from "react/jsx-runtime";
+import { Component as v } from "react";
+import { computeBoxProps as Z } from "./Box.js";
+import { Button as c } from "./Button.js";
+import { ProgressBar as g } from "./ProgressBar.js";
+import { Stack as d } from "./Stack.js";
+const p = 0.5, f = 1.5, M = 0.1;
+class k extends v {
+  constructor(e) {
+    super(e), this.state = {
+      mouseDown: !1,
+      left: 0,
+      top: 0,
+      lastLeft: 0,
+      lastTop: 0,
+      zoom: 1
+    }, this.handleMouseDown = this.handleMouseDown.bind(this), this.handleMouseMove = this.handleMouseMove.bind(this), this.handleZoomIncrease = this.handleZoomIncrease.bind(this), this.handleZoomDecrease = this.handleZoomDecrease.bind(this), this.onMouseUp = this.onMouseUp.bind(this), this.doOffsetMouse = this.doOffsetMouse.bind(this);
+  }
+  componentDidMount() {
+    window.addEventListener("mouseup", this.onMouseUp), window.addEventListener("mousedown", this.doOffsetMouse), window.addEventListener("mousemove", this.doOffsetMouse), window.addEventListener("mouseup", this.doOffsetMouse);
+  }
+  componentWillUnmount() {
+    window.removeEventListener("mouseup", this.onMouseUp), window.removeEventListener("mousedown", this.doOffsetMouse), window.removeEventListener("mousemove", this.doOffsetMouse), window.removeEventListener("mouseup", this.doOffsetMouse);
+  }
+  doOffsetMouse(e) {
+    const { zoom: o } = this.state;
+    e.screenZoomX = e.screenX * Math.pow(o, -1), e.screenZoomY = e.screenY * Math.pow(o, -1);
+  }
+  handleMouseDown(e) {
+    this.setState((o) => ({
+      mouseDown: !0,
+      lastLeft: e.clientX - o.left,
+      lastTop: e.clientY - o.top
+    }));
+  }
+  onMouseUp() {
+    this.setState({
+      mouseDown: !1
+    });
+  }
+  handleZoomIncrease(e) {
+    const { onZoomChange: o } = this.props, { zoom: s } = this.state, t = Math.min(s + M, f);
+    this.setState({
+      zoom: t
+    }), o && o(t);
+  }
+  handleZoomDecrease(e) {
+    const { onZoomChange: o } = this.props, { zoom: s } = this.state, t = Math.max(s - M, p);
+    this.setState({
+      zoom: t
+    }), o && o(t);
+  }
+  handleMouseMove(e) {
+    const { onBackgroundMoved: o, initialLeft: s = 0, initialTop: t = 0 } = this.props;
+    if (this.state.mouseDown) {
+      let a, i;
+      this.setState((h) => (a = e.clientX - h.lastLeft, i = e.clientY - h.lastTop, {
+        left: a,
+        top: i
+      })), o && o(a + s, i + t);
+    }
+  }
+  render() {
+    const {
+      children: e,
+      backgroundImage: o,
+      imageWidth: s,
+      initialLeft: t = 0,
+      initialTop: a = 0,
+      ...i
+    } = this.props, { left: h, top: w, zoom: r } = this.state, m = t + h, u = a + w;
+    return /* @__PURE__ */ l(
+      "div",
+      {
+        ref: this.ref,
+        ...Z({
+          ...i,
+          style: {
+            ...i.style,
+            overflow: "hidden",
+            position: "relative"
+          }
+        }),
+        children: [
+          /* @__PURE__ */ n(
+            "div",
+            {
+              onMouseDown: this.handleMouseDown,
+              onMouseMove: this.handleMouseMove,
+              style: {
+                position: "fixed",
+                height: "100%",
+                width: "100%",
+                backgroundImage: `url("${o}")`,
+                backgroundPosition: `${m}px ${u}px`,
+                backgroundRepeat: "repeat",
+                backgroundSize: `${r * s}px`
+              }
+            }
+          ),
+          /* @__PURE__ */ n(
+            "div",
+            {
+              onMouseDown: this.handleMouseDown,
+              onMouseMove: this.handleMouseMove,
+              style: {
+                position: "fixed",
+                transform: `translate(${m}px, ${u}px) scale(${r})`,
+                transformOrigin: "top left",
+                height: "100%",
+                width: "100%"
+              },
+              children: e
+            }
+          ),
+          /* @__PURE__ */ l(d, { position: "absolute", width: "100%", children: [
+            /* @__PURE__ */ n(d.Item, { children: /* @__PURE__ */ n(c, { icon: "minus", onClick: this.handleZoomDecrease }) }),
+            /* @__PURE__ */ n(d.Item, { grow: 1, children: /* @__PURE__ */ l(
+              g,
+              {
+                minValue: p,
+                value: r,
+                maxValue: f,
+                children: [
+                  r,
+                  "x"
+                ]
+              }
+            ) }),
+            /* @__PURE__ */ n(d.Item, { children: /* @__PURE__ */ n(c, { icon: "plus", onClick: this.handleZoomIncrease }) })
+          ] })
+        ]
+      }
+    );
+  }
+}
+export {
+  k as InfinitePlane
+};

package/dist/components/Input.d.ts

@@ -0,0 +1,61 @@
+import { SyntheticEvent } from 'react';
+import { BoxProps } from './Box';
+
+type ConditionalProps = {
+    /**
+     * Mark this if you want to debounce onInput.
+     *
+     * This is useful for expensive filters, large lists etc.
+     *
+     * Requires `onInput` to be set.
+     */
+    expensive?: boolean;
+    /**
+     * Fires on each key press / value change. Used for searching.
+     *
+     * If it's a large list, consider using `expensive` prop.
+     */
+    onInput: (event: SyntheticEvent<HTMLInputElement>, value: string) => void;
+} | {
+    /** This prop requires onInput to be set */
+    expensive?: never;
+    onInput?: never;
+};
+type OptionalProps = Partial<{
+    /** Automatically focuses the input on mount */
+    autoFocus: boolean;
+    /** Automatically selects the input value on focus */
+    autoSelect: boolean;
+    /** The class name of the input */
+    className: string;
+    /** Disables the input */
+    disabled: boolean;
+    /** Mark this if you want the input to be as wide as possible */
+    fluid: boolean;
+    /** The maximum length of the input value */
+    maxLength: number;
+    /** Mark this if you want to use a monospace font */
+    monospace: boolean;
+    /** Fires when user is 'done typing': Clicked out, blur, enter key */
+    onChange: (event: SyntheticEvent<HTMLInputElement>, value: string) => void;
+    /** Fires once the enter key is pressed */
+    onEnter?: (event: SyntheticEvent<HTMLInputElement>, value: string) => void;
+    /** Fires once the escape key is pressed */
+    onEscape: (event: SyntheticEvent<HTMLInputElement>) => void;
+    /** The placeholder text when everything is cleared */
+    placeholder: string;
+    /** Clears the input value on enter */
+    selfClear: boolean;
+    /** The state variable of the input. */
+    value: string | number;
+}>;
+type Props = OptionalProps & ConditionalProps & BoxProps;
+export declare function toInputValue(value: string | number | undefined): string;
+/**
+ * ### Input
+ * A basic text input which allow users to enter text into a UI.
+ * > Input does not support custom font size and height due to the way
+ * > it's implemented in CSS. Eventually, this needs to be fixed.
+ */
+export declare function Input(props: Props): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/components/Input.js

@@ -0,0 +1,89 @@
+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 { 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
+};
+function _(r) {
+  return typeof r != "number" && typeof r != "string" ? "" : String(r);
+}
+const z = R((r) => r(), 250);
+function P(r) {
+  const {
+    autoFocus: d,
+    autoSelect: c,
+    className: b,
+    disabled: g,
+    expensive: T,
+    fluid: y,
+    maxLength: x,
+    monospace: h,
+    onChange: n,
+    onEnter: i,
+    onEscape: o,
+    onInput: s,
+    placeholder: I,
+    selfClear: N,
+    value: l,
+    ...w
+  } = r, a = k(null);
+  function D(e) {
+    var f;
+    if (!s) return;
+    const t = (f = e.currentTarget) == null ? void 0 : f.value;
+    T ? z(() => s(e, t)) : s(e, t);
+  }
+  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));
+      return;
+    }
+    e.key === m.Escape && (o == null || o(e), e.currentTarget.value = _(l), e.currentTarget.blur());
+  }
+  return B(() => {
+    const e = a.current;
+    if (!e) return;
+    const t = _(l);
+    e.value !== t && (e.value = t), !(!d && !c) && setTimeout(() => {
+      e.focus(), c && e.select();
+    }, 1);
+  }, []), /* @__PURE__ */ j(
+    S,
+    {
+      className: E([
+        u.input,
+        y && u.fluid,
+        h && u.monospace,
+        b
+      ]),
+      ...w,
+      children: [
+        /* @__PURE__ */ p("div", { className: u.baseline, children: "." }),
+        /* @__PURE__ */ p(
+          "input",
+          {
+            className: u.inner,
+            disabled: g,
+            maxLength: x,
+            onBlur: (e) => n == null ? void 0 : n(e, e.target.value),
+            onChange: D,
+            onKeyDown: K,
+            placeholder: I,
+            ref: a
+          }
+        )
+      ]
+    }
+  );
+}
+export {
+  P as Input,
+  _ as toInputValue
+};

package/dist/components/KeyListener.d.ts

@@ -0,0 +1,15 @@
+import { Component } from 'react';
+import { KeyEvent } from '../common/events';
+
+type KeyListenerProps = Partial<{
+    onKey: (key: KeyEvent) => void;
+    onKeyDown: (key: KeyEvent) => void;
+    onKeyUp: (key: KeyEvent) => void;
+}>;
+export declare class KeyListener extends Component<KeyListenerProps> {
+    dispose: () => void;
+    constructor(props: any);
+    componentWillUnmount(): void;
+    render(): null;
+}
+export {};

package/dist/components/KeyListener.js

@@ -0,0 +1,23 @@
+var t = Object.defineProperty;
+var e = (s, o, p) => o in s ? t(s, o, { enumerable: !0, configurable: !0, writable: !0, value: p }) : s[o] = p;
+var i = (s, o, p) => e(s, typeof o != "symbol" ? o + "" : o, p);
+import { Component as r } from "react";
+import { listenForKeyEvents as h } from "../common/hotkeys.js";
+class d extends r {
+  constructor(p) {
+    super(p);
+    i(this, "dispose");
+    this.dispose = h((n) => {
+      this.props.onKey && this.props.onKey(n), n.isDown() && this.props.onKeyDown && this.props.onKeyDown(n), n.isUp() && this.props.onKeyUp && this.props.onKeyUp(n);
+    });
+  }
+  componentWillUnmount() {
+    this.dispose();
+  }
+  render() {
+    return null;
+  }
+}
+export {
+  d as KeyListener
+};

package/dist/components/Knob.d.ts

@@ -0,0 +1,49 @@
+import { BooleanLike } from '../common/react';
+import { BoxProps } from './Box';
+
+type Props = {
+    /** Value itself, controls the position of the cursor. */
+    value: number;
+} & Partial<{
+    /** Animates the value if it was changed externally. */
+    animated: boolean;
+    /** Knob can be bipolar or unipolar. */
+    bipolar: boolean;
+    /** Color of the outer ring around the knob. */
+    color: string | BooleanLike;
+    /** If set, this value will be used to set the fill percentage of the outer ring independently of the main value. */
+    fillValue: number;
+    /** Format value using this function before displaying it. */
+    format: (value: number) => string;
+    /** Highest possible value. */
+    maxValue: number;
+    /** Lowest possible value. */
+    minValue: number;
+    /** Adjust value by this amount when dragging the input. */
+    onChange: (event: Event, value: number) => void;
+    /** An event, which fires about every 500ms when you drag the input up and down, on release and on manual editing. */
+    onDrag: (event: Event, value: number) => void;
+    /** Applies a `color` to the outer ring around the knob based on whether the value lands in the range between `from` and `to`. */
+    ranges: Record<string, [number, number]>;
+    /** Relative size of the knob. `1` is normal size, `2` is two times bigger. Fractional numbers are supported. */
+    size: number;
+    /** Adjust value by this amount when dragging the input. */
+    step: number;
+    /** Screen distance mouse needs to travel to adjust value by one `step`. */
+    stepPixelSize: number;
+    /** A number in milliseconds, for which the input will hold off from updating while events propagate through the backend. Default is about 250ms, increase it if you still see flickering. */
+    suppressFlicker: boolean;
+    /** Whether to clamp the value to the range. */
+    unclamped: boolean;
+    /** Unit to display to the right of value. */
+    unit: string;
+}> & BoxProps;
+/**
+ * ## Knob
+ * A radial control which allows dialing in precise values by dragging it
+ * up and down.
+ *
+ * Single click opens an input box to manually type in a number.
+ */
+export declare function Knob(props: Props): import("react/jsx-runtime").JSX.Element;
+export {};