tgui-core 1.1.11 → 1.1.13

package/dist/components/NumberInput.d.ts

@@ -0,0 +1,45 @@
+import { Component, FocusEventHandler, KeyboardEventHandler, MouseEventHandler, RefObject } from 'react';
+import { BooleanLike } from '../common/react';
+
+type Props = Required<{
+    maxValue: number;
+    minValue: number;
+    step: number;
+    value: number | string;
+}> & Partial<{
+    animated: BooleanLike;
+    className: string;
+    disabled: BooleanLike;
+    fluid: BooleanLike;
+    fontSize: string;
+    format: (value: number) => string;
+    height: string;
+    lineHeight: string;
+    onChange: (value: number) => void;
+    onDrag: (value: number) => void;
+    stepPixelSize: number;
+    unit: string;
+    width: string;
+}>;
+type State = {
+    currentValue: number;
+    dragging: BooleanLike;
+    editing: BooleanLike;
+    origin: number;
+    previousValue: number;
+};
+export declare class NumberInput extends Component<Props, State> {
+    inputRef: RefObject<HTMLInputElement>;
+    dragTimeout: NodeJS.Timeout;
+    dragInterval: NodeJS.Timeout;
+    state: State;
+    constructor(props: Props);
+    componentDidMount(): void;
+    handleDragStart: MouseEventHandler<HTMLDivElement>;
+    handleDragMove: (event: MouseEvent) => void;
+    handleDragEnd: (_event: MouseEvent) => void;
+    handleBlur: FocusEventHandler<HTMLInputElement>;
+    handleKeyDown: KeyboardEventHandler<HTMLInputElement>;
+    render(): import("react/jsx-runtime").JSX.Element;
+}
+export {};

package/dist/components/NumberInput.js

@@ -0,0 +1,221 @@
+import '../assets/NumberInput.css';var w = Object.defineProperty;
+var E = (c, d, e) => d in c ? w(c, d, { enumerable: !0, configurable: !0, writable: !0, value: e }) : c[d] = e;
+var l = (c, d, e) => E(c, typeof d != "symbol" ? d + "" : d, e);
+import { jsxs as _, jsx as g } from "react/jsx-runtime";
+import { Component as I, createRef as D } from "react";
+import { KEY as S } from "../common/keys.js";
+import { clamp as h } from "../common/math.js";
+import { classes as T } from "../common/react.js";
+import { AnimatedNumber as F } from "./AnimatedNumber.js";
+import { Box as M } from "./Box.js";
+const R = "_numberInput_4xyrw_20", B = "_fluid_4xyrw_36", K = "_content_4xyrw_40", L = "_barContainer_4xyrw_44", Y = "_bar_4xyrw_44", j = "_inner_4xyrw_61", p = {
+  numberInput: R,
+  fluid: B,
+  content: K,
+  barContainer: L,
+  bar: Y,
+  inner: j
+};
+class $ extends I {
+  constructor(e) {
+    super(e);
+    // Ref to the input field to set focus & highlight
+    l(this, "inputRef", D());
+    // After this time has elapsed we are in drag mode so no editing when dragging ends
+    l(this, "dragTimeout");
+    // Call onDrag at this interval
+    l(this, "dragInterval");
+    // default values for the number input state
+    l(this, "state", {
+      editing: !1,
+      dragging: !1,
+      currentValue: 0,
+      previousValue: 0,
+      origin: 0
+    });
+    l(this, "handleDragStart", (e) => {
+      const { value: a, disabled: u } = this.props, { editing: n } = this.state;
+      if (u || n)
+        return;
+      document.body.style["pointer-events"] = "none";
+      const i = parseFloat(a.toString());
+      this.setState({
+        dragging: !1,
+        origin: e.screenY,
+        currentValue: i,
+        previousValue: i
+      }), this.dragTimeout = setTimeout(() => {
+        this.setState({
+          dragging: !0
+        });
+      }, 250), this.dragInterval = setInterval(() => {
+        const { dragging: o, currentValue: s, previousValue: t } = this.state, { onDrag: r } = this.props;
+        o && s !== t && (this.setState({
+          previousValue: s
+        }), r == null || r(s));
+      }, 400), document.addEventListener("mousemove", this.handleDragMove), document.addEventListener("mouseup", this.handleDragEnd);
+    });
+    l(this, "handleDragMove", (e) => {
+      const { minValue: a, maxValue: u, step: n, stepPixelSize: i, disabled: o } = this.props;
+      o || this.setState((s) => {
+        const t = { ...s }, r = t.origin - e.screenY;
+        if (s.dragging) {
+          const f = isFinite(a) ? a % n : 0;
+          t.currentValue = h(
+            t.currentValue + r * n / (i || 1),
+            a - n,
+            u + n
+          ), t.currentValue = h(
+            t.currentValue - t.currentValue % n + f,
+            a,
+            u
+          ), t.origin = e.screenY;
+        } else Math.abs(r) > 4 && (t.dragging = !0);
+        return t;
+      });
+    });
+    l(this, "handleDragEnd", (e) => {
+      const { dragging: a, currentValue: u } = this.state, { onDrag: n, onChange: i, disabled: o } = this.props;
+      if (!o) {
+        if (document.body.style["pointer-events"] = "auto", clearInterval(this.dragInterval), clearTimeout(this.dragTimeout), this.setState({
+          dragging: !1,
+          editing: !a,
+          previousValue: u
+        }), a)
+          i == null || i(u), n == null || n(u);
+        else if (this.inputRef) {
+          const s = this.inputRef.current;
+          s && (s.value = `${u}`, setTimeout(() => {
+            s.focus(), s.select();
+          }, 1));
+        }
+        document.removeEventListener("mousemove", this.handleDragMove), document.removeEventListener("mouseup", this.handleDragEnd);
+      }
+    });
+    l(this, "handleBlur", (e) => {
+      const { editing: a, previousValue: u } = this.state, { minValue: n, maxValue: i, onChange: o, onDrag: s, disabled: t } = this.props;
+      if (t || !a)
+        return;
+      const r = h(
+        parseFloat(e.target.value),
+        n,
+        i
+      );
+      if (isNaN(r)) {
+        this.setState({
+          editing: !1
+        });
+        return;
+      }
+      this.setState({
+        editing: !1,
+        currentValue: r,
+        previousValue: r
+      }), u !== r && (o == null || o(r), s == null || s(r));
+    });
+    l(this, "handleKeyDown", (e) => {
+      const { minValue: a, maxValue: u, onChange: n, onDrag: i, disabled: o } = this.props;
+      if (o)
+        return;
+      const { previousValue: s } = this.state;
+      if (e.key === S.Enter) {
+        const t = h(
+          parseFloat(e.currentTarget.value),
+          a,
+          u
+        );
+        if (isNaN(t)) {
+          this.setState({
+            editing: !1
+          });
+          return;
+        }
+        this.setState({
+          editing: !1,
+          currentValue: t,
+          previousValue: t
+        }), s !== t && (n == null || n(t), i == null || i(t));
+      } else e.key === S.Escape && this.setState({
+        editing: !1
+      });
+    });
+  }
+  componentDidMount() {
+    const e = parseFloat(this.props.value.toString());
+    this.setState({
+      currentValue: e,
+      previousValue: e
+    });
+  }
+  render() {
+    const { dragging: e, editing: a, currentValue: u } = this.state, {
+      className: n,
+      fluid: i,
+      animated: o,
+      unit: s,
+      value: t,
+      minValue: r,
+      maxValue: f,
+      height: v,
+      width: x,
+      lineHeight: b,
+      fontSize: y,
+      format: V
+    } = this.props;
+    let m = parseFloat(t.toString());
+    e && (m = u);
+    const N = /* @__PURE__ */ _("div", { className: p.content, children: [
+      o && !e ? /* @__PURE__ */ g(F, { value: m, format: V }) : V ? V(m) : m,
+      s ? " " + s : ""
+    ] });
+    return /* @__PURE__ */ _(
+      M,
+      {
+        className: T([
+          p.numberInput,
+          i && p.fluid,
+          n
+        ]),
+        minWidth: x,
+        minHeight: v,
+        lineHeight: b,
+        fontSize: y,
+        onMouseDown: this.handleDragStart,
+        children: [
+          /* @__PURE__ */ g("div", { className: p.barContainer, children: /* @__PURE__ */ g(
+            "div",
+            {
+              className: p.bar,
+              style: {
+                height: h(
+                  (m - r) / (f - r) * 100,
+                  0,
+                  100
+                ) + "%"
+              }
+            }
+          ) }),
+          N,
+          /* @__PURE__ */ g(
+            "input",
+            {
+              ref: this.inputRef,
+              className: p.inner,
+              style: {
+                display: a ? "inline" : "none",
+                height: v,
+                lineHeight: b,
+                fontSize: y
+              },
+              onBlur: this.handleBlur,
+              onKeyDown: this.handleKeyDown
+            }
+          )
+        ]
+      }
+    );
+  }
+}
+export {
+  $ as NumberInput
+};

package/dist/components/Popper.d.ts

@@ -0,0 +1,27 @@
+import { Placement } from '@popperjs/core';
+import { PropsWithChildren, ReactNode } from 'react';
+
+type RequiredProps = {
+    /** The content to display in the popper */
+    content: ReactNode;
+    /** Whether the popper is open */
+    isOpen: boolean;
+};
+type OptionalProps = Partial<{
+    /** Base z-index of the popper div
+     * @default 5
+     */
+    baseZIndex: number;
+    /** Called when the user clicks outside the popper */
+    onClickOutside: () => void;
+    /** Where to place the popper relative to the reference element */
+    placement: Placement;
+}>;
+type Props = RequiredProps & OptionalProps;
+/**
+ * ## Popper
+ *  Popper lets you position elements so that they don't go out of the bounds of the window.
+ * @url https://popper.js.org/react-popper/ for more information.
+ */
+export declare function Popper(props: PropsWithChildren<Props>): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/components/Popper.js

@@ -0,0 +1,177 @@
+import { jsxs as M, Fragment as P, jsx as S } from "react/jsx-runtime";
+import * as l from "react";
+import { useState as E, useRef as g, useEffect as F } from "react";
+import * as _ from "react-dom";
+import { c as A } from "../popper-CiqSDJTE.js";
+var j = function(r) {
+  return r.reduce(function(n, t) {
+    var o = t[0], u = t[1];
+    return n[o] = u, n;
+  }, {});
+}, R = typeof window < "u" && window.document && window.document.createElement ? l.useLayoutEffect : l.useEffect;
+function I(e) {
+  return e && e.__esModule && Object.prototype.hasOwnProperty.call(e, "default") ? e.default : e;
+}
+var U = typeof Element < "u", x = typeof Map == "function", z = typeof Set == "function", B = typeof ArrayBuffer == "function" && !!ArrayBuffer.isView;
+function w(e, r) {
+  if (e === r) return !0;
+  if (e && r && typeof e == "object" && typeof r == "object") {
+    if (e.constructor !== r.constructor) return !1;
+    var n, t, o;
+    if (Array.isArray(e)) {
+      if (n = e.length, n != r.length) return !1;
+      for (t = n; t-- !== 0; )
+        if (!w(e[t], r[t])) return !1;
+      return !0;
+    }
+    var u;
+    if (x && e instanceof Map && r instanceof Map) {
+      if (e.size !== r.size) return !1;
+      for (u = e.entries(); !(t = u.next()).done; )
+        if (!r.has(t.value[0])) return !1;
+      for (u = e.entries(); !(t = u.next()).done; )
+        if (!w(t.value[1], r.get(t.value[0]))) return !1;
+      return !0;
+    }
+    if (z && e instanceof Set && r instanceof Set) {
+      if (e.size !== r.size) return !1;
+      for (u = e.entries(); !(t = u.next()).done; )
+        if (!r.has(t.value[0])) return !1;
+      return !0;
+    }
+    if (B && ArrayBuffer.isView(e) && ArrayBuffer.isView(r)) {
+      if (n = e.length, n != r.length) return !1;
+      for (t = n; t-- !== 0; )
+        if (e[t] !== r[t]) return !1;
+      return !0;
+    }
+    if (e.constructor === RegExp) return e.source === r.source && e.flags === r.flags;
+    if (e.valueOf !== Object.prototype.valueOf && typeof e.valueOf == "function" && typeof r.valueOf == "function") return e.valueOf() === r.valueOf();
+    if (e.toString !== Object.prototype.toString && typeof e.toString == "function" && typeof r.toString == "function") return e.toString() === r.toString();
+    if (o = Object.keys(e), n = o.length, n !== Object.keys(r).length) return !1;
+    for (t = n; t-- !== 0; )
+      if (!Object.prototype.hasOwnProperty.call(r, o[t])) return !1;
+    if (U && e instanceof Element) return !1;
+    for (t = n; t-- !== 0; )
+      if (!((o[t] === "_owner" || o[t] === "__v" || o[t] === "__o") && e.$$typeof) && !w(e[o[t]], r[o[t]]))
+        return !1;
+    return !0;
+  }
+  return e !== e && r !== r;
+}
+var L = function(r, n) {
+  try {
+    return w(r, n);
+  } catch (t) {
+    if ((t.message || "").match(/stack|recursion/i))
+      return console.warn("react-fast-compare cannot handle circular refs"), !1;
+    throw t;
+  }
+};
+const q = /* @__PURE__ */ I(L);
+var D = [], $ = function(r, n, t) {
+  t === void 0 && (t = {});
+  var o = l.useRef(null), u = {
+    onFirstUpdate: t.onFirstUpdate,
+    placement: t.placement || "bottom",
+    strategy: t.strategy || "absolute",
+    modifiers: t.modifiers || D
+  }, m = l.useState({
+    styles: {
+      popper: {
+        position: u.strategy,
+        left: "0",
+        top: "0"
+      },
+      arrow: {
+        position: "absolute"
+      }
+    },
+    attributes: {}
+  }), y = m[0], O = m[1], v = l.useMemo(function() {
+    return {
+      name: "updateState",
+      enabled: !0,
+      phase: "write",
+      fn: function(d) {
+        var i = d.state, f = Object.keys(i.elements);
+        _.flushSync(function() {
+          O({
+            styles: j(f.map(function(c) {
+              return [c, i.styles[c] || {}];
+            })),
+            attributes: j(f.map(function(c) {
+              return [c, i.attributes[c]];
+            }))
+          });
+        });
+      },
+      requires: ["computeStyles"]
+    };
+  }, []), p = l.useMemo(function() {
+    var a = {
+      onFirstUpdate: u.onFirstUpdate,
+      placement: u.placement,
+      strategy: u.strategy,
+      modifiers: [].concat(u.modifiers, [v, {
+        name: "applyStyles",
+        enabled: !1
+      }])
+    };
+    return q(o.current, a) ? o.current || a : (o.current = a, a);
+  }, [u.onFirstUpdate, u.placement, u.strategy, u.modifiers, v]), s = l.useRef();
+  return R(function() {
+    s.current && s.current.setOptions(p);
+  }, [p]), R(function() {
+    if (!(r == null || n == null)) {
+      var a = t.createPopper || A, d = a(r, n, p);
+      return s.current = d, function() {
+        d.destroy(), s.current = null;
+      };
+    }
+  }, [r, n, t.createPopper]), {
+    state: s.current ? s.current.state : null,
+    styles: y.styles,
+    attributes: y.attributes,
+    update: s.current ? s.current.update : null,
+    forceUpdate: s.current ? s.current.forceUpdate : null
+  };
+};
+function W(e) {
+  const { children: r, content: n, isOpen: t, onClickOutside: o, placement: u } = e, [m, y] = E(null), [O, v] = E(
+    null
+  ), p = g(null), s = g(null), { styles: a, attributes: d } = $(m, O, {
+    placement: u
+  });
+  function i(f) {
+    var c, h;
+    !((c = p.current) != null && c.contains(f.target)) && !((h = s.current) != null && h.contains(f.target)) && (o == null || o());
+  }
+  return F(() => (t ? document.addEventListener("mousedown", i) : document.removeEventListener("mousedown", i), () => {
+    document.removeEventListener("mousedown", i);
+  }), [t]), /* @__PURE__ */ M(P, { children: [
+    /* @__PURE__ */ S(
+      "div",
+      {
+        ref: (f) => {
+          y(f), s.current = f;
+        },
+        children: r
+      }
+    ),
+    t && /* @__PURE__ */ S(
+      "div",
+      {
+        ref: (f) => {
+          v(f), p.current = f;
+        },
+        style: { ...a.popper, zIndex: e.baseZIndex ?? 5 },
+        ...d.popper,
+        children: n
+      }
+    )
+  ] });
+}
+export {
+  W as Popper
+};

package/dist/components/ProgressBar.d.ts

@@ -0,0 +1,46 @@
+import { PropsWithChildren } from 'react';
+import { BoxProps } from './Box';
+
+type Props = {
+    /**
+     * Current progress as a floating point number between `minValue` (default: 0) and `maxValue` (default: 1).
+     * Determines the percentage and how filled the bar is.
+     */
+    value: number;
+} & Partial<{
+    /**
+     * Color of the progress bar. Can take any of the following formats:
+     * - `#ffffff` - Hex format
+     * - `rgb(r,g,b) / rgba(r,g,b,a)` - RGB format
+     * - `<name>` - the name of a `color-<name>` CSS class. See `CSS_COLORS` in `constants.js`.
+     * - `<name>` - the name of a base CSS color, if not overridden by the definitions above.
+     */
+    color: string;
+    /** Highest possible value. */
+    maxValue: number;
+    /** Lowest possible value. */
+    minValue: number;
+    /**
+     * Applies a `color` to the progress bar based on whether the value lands in the range between `from` and `to`.
+     * This takes an object with the following format:
+     * ```tsx
+     * {
+     *   (colorname): [from, to]
+     * }
+     * ```
+     * For example:
+     * ```tsx
+     * <ProgressBar
+     *   value={0.5}
+     *   ranges={{
+     *     bad: [0, 0.5],
+     *     good: [0.5, 1],
+     *   }}
+     * />
+     * ```
+     *
+     */
+    ranges: Record<string, [number, number]>;
+}> & BoxProps & PropsWithChildren;
+export declare function ProgressBar(props: Props): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/components/ProgressBar.js

@@ -0,0 +1,37 @@
+import { jsxs as g, jsx as n } from "react/jsx-runtime";
+import { CSS_COLORS as v } from "../common/constants.js";
+import { keyOfMatchingRange as y, toFixed as N, scale as _, clamp01 as B } from "../common/math.js";
+import { classes as m } from "../common/react.js";
+import { s as o } from "../ProgressBar.module-BkAFfFy0.js";
+import { computeBoxProps as S, computeBoxClassName as O } from "./Box.js";
+function w(d) {
+  const {
+    className: f,
+    value: r,
+    minValue: u = 0,
+    maxValue: p = 1,
+    color: C,
+    ranges: h = {},
+    children: l,
+    ...t
+  } = d, a = _(r, u, p), x = l !== void 0, s = C || y(r, h) || "default", e = S(t), c = [
+    o.progressBar,
+    f,
+    O(t)
+  ], i = {
+    width: B(a) * 100 + "%"
+  };
+  return v.includes(s) || s === "default" ? c.push(o["color__" + s]) : (e.style = { ...e.style, borderColor: s }, i.backgroundColor = s), /* @__PURE__ */ g("div", { className: m(c), ...e, children: [
+    /* @__PURE__ */ n(
+      "div",
+      {
+        className: m([o.fill, o.fill__animated]),
+        style: i
+      }
+    ),
+    /* @__PURE__ */ n("div", { className: o.content, children: x ? l : N(a * 100) + "%" })
+  ] });
+}
+export {
+  w as ProgressBar
+};