tgui-core 1.1.23 → 1.2.0

package/dist/components/NumberInput.js

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

package/dist/components/Section.d.ts

@@ -1,5 +1,30 @@
 import { ReactNode } from 'react';
+import { BoxProps } from './Box';
 
+type Props = Partial<{
+    /** Buttons to render aside the section title. */
+    buttons: ReactNode;
+    /** id to assosiate with the parent div element used by this section, for uses with procs like getElementByID */
+    container_id: string;
+    /** If true, fills all available vertical space. */
+    fill: boolean;
+    /** If true, removes all section padding. */
+    fitted: boolean;
+    /** If true, fills the area without forcing height to 100% */
+    flexGrow: boolean;
+    /** If true, removes the section top padding */
+    noTopPadding: boolean;
+    /** @member Callback function for the `scroll` event */
+    onScroll: ((this: GlobalEventHandlers, ev: Event) => any) | null;
+    /** Shows or hides the scrollbar. */
+    scrollable: boolean;
+    /** Shows or hides the horizontal scrollbar. */
+    scrollableHorizontal: boolean;
+    /** If true, filly the area except for -3rem */
+    stretchContents: boolean;
+    /** Title of the section. */
+    title: ReactNode;
+}> & BoxProps;
 /**
  * ## Section
  * Section is a surface that displays content and actions on a single topic.
@@ -27,37 +52,5 @@ import { ReactNode } from 'react';
  * </Section>
  * ```
  */
-export declare const Section: import('react').ForwardRefExoticComponent<Partial<{
-    /** Buttons to render aside the section title. */
-    buttons: ReactNode;
-    /** id to assosiate with the parent div element used by this section, for uses with procs like getElementByID */
-    container_id: string;
-    /** If true, fills all available vertical space. */
-    fill: boolean;
-    /** If true, removes all section padding. */
-    fitted: boolean;
-    /** @member Callback function for the `scroll` event */
-    onScroll: ((this: GlobalEventHandlers, ev: Event) => any) | null;
-    /** Shows or hides the scrollbar. */
-    scrollable: boolean;
-    /** Shows or hides the horizontal scrollbar. */
-    scrollableHorizontal: boolean;
-    /** Title of the section. */
-    title: ReactNode;
-}> & Partial<{
-    as: string;
-    children: ReactNode;
-    className: string | import('../common/react').BooleanLike;
-    style: import('react').CSSProperties;
-}> & Partial<Record<"bold" | "italic" | "nowrap" | "fillPositionedParent" | "inline" | "preserveWhitespace", boolean>> & Partial<Record<"fontWeight" | "textAlign" | "bottom" | "fontFamily" | "fontSize" | "height" | "left" | "maxHeight" | "maxWidth" | "minHeight" | "minWidth" | "opacity" | "overflow" | "overflowX" | "overflowY" | "position" | "right" | "top" | "verticalAlign" | "width" | "color" | "backgroundColor" | "align" | "lineHeight" | "m" | "mb" | "ml" | "mr" | "mt" | "mx" | "my" | "p" | "pb" | "pl" | "pr" | "pt" | "px" | "py" | "textColor", string | import('../common/react').BooleanLike>> & Partial<{
-    onClick: import('react').MouseEventHandler<HTMLDivElement>;
-    onContextMenu: import('react').MouseEventHandler<HTMLDivElement>;
-    onDoubleClick: import('react').MouseEventHandler<HTMLDivElement>;
-    onKeyDown: import('react').KeyboardEventHandler<HTMLDivElement>;
-    onKeyUp: import('react').KeyboardEventHandler<HTMLDivElement>;
-    onMouseDown: import('react').MouseEventHandler<HTMLDivElement>;
-    onMouseMove: import('react').MouseEventHandler<HTMLDivElement>;
-    onMouseOver: import('react').MouseEventHandler<HTMLDivElement>;
-    onMouseUp: import('react').MouseEventHandler<HTMLDivElement>;
-    onScroll: import('react').UIEventHandler<HTMLDivElement>;
-}> & import('react').RefAttributes<HTMLDivElement>>;
+export declare const Section: (props: Props) => import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/components/Section.js

@@ -1,62 +1,69 @@
-import { jsxs as r, jsx as s } from "react/jsx-runtime";
-import { forwardRef as S, useEffect as j } from "react";
-import { addScrollableNode as z, removeScrollableNode as B } from "../common/events.js";
-import { classes as H, canRender as m } from "../common/react.js";
-import { s as t } from "../Section.module-CLVHJ4yA.js";
-import { computeBoxClassName as T, computeBoxProps as y } from "./Box.js";
-const q = S(
-  (a, l) => {
-    const {
-      buttons: c,
-      children: u,
-      className: p,
-      fill: N,
-      fitted: b,
-      onScroll: h,
-      scrollable: i,
-      scrollableHorizontal: e,
-      title: n,
-      container_id: v,
-      ...o
-    } = a, x = m(n) || m(c);
-    return j(() => {
-      if (l != null && l.current && !(!i && !e))
-        return z(l.current), () => {
-          l != null && l.current && B(l.current);
-        };
-    }, []), /* @__PURE__ */ r(
-      "div",
-      {
-        id: v || "",
-        className: H([
-          t.section,
-          N && t.fill,
-          b && t.fitted,
-          i && t.scrollable,
-          e && t.scrollableHorizontal,
-          p,
-          T(o)
-        ]),
-        ...y(o),
-        children: [
-          x && /* @__PURE__ */ r("div", { className: t.title, children: [
-            /* @__PURE__ */ s("span", { className: t.titleText, children: n }),
-            /* @__PURE__ */ s("div", { className: t.buttons, children: c })
-          ] }),
-          /* @__PURE__ */ s("div", { className: t.rest, children: /* @__PURE__ */ s(
-            "div",
-            {
-              className: t.content,
-              onScroll: h,
-              ref: l,
-              children: u
-            }
-          ) })
-        ]
-      }
-    );
-  }
-);
+import { jsxs as a, jsx as r } from "react/jsx-runtime";
+import { useRef as P, useEffect as g } from "react";
+import { addScrollableNode as j, removeScrollableNode as z } from "../common/events.js";
+import { classes as d, canRender as m } from "../common/react.js";
+import { s as e } from "../Section.module-qhQWhlUX.js";
+import { computeBoxClassName as B, computeBoxProps as H } from "./Box.js";
+const _ = (f) => {
+  const {
+    buttons: o,
+    children: u,
+    className: p,
+    fill: N,
+    fitted: h,
+    flexGrow: b,
+    noTopPadding: x,
+    onScroll: v,
+    scrollable: s,
+    scrollableHorizontal: n,
+    stretchContents: S,
+    title: c,
+    container_id: T,
+    ...i
+  } = f, t = P(null), C = m(c) || m(o);
+  return g(() => {
+    if (!(t != null && t.current) || !s && !n) return;
+    const l = t.current;
+    return j(l), () => {
+      l && z(l);
+    };
+  }, []), /* @__PURE__ */ a(
+    "div",
+    {
+      id: T || "",
+      className: d([
+        e.section,
+        N && e.fill,
+        h && e.fitted,
+        s && e.scrollable,
+        n && e.scrollableHorizontal,
+        b && e.sectionFlex,
+        p,
+        B(i)
+      ]),
+      ...H(i),
+      children: [
+        C && /* @__PURE__ */ a("div", { className: e.title, children: [
+          /* @__PURE__ */ r("span", { className: e.titleText, children: c }),
+          /* @__PURE__ */ r("div", { className: e.buttons, children: o })
+        ] }),
+        /* @__PURE__ */ r("div", { className: e.rest, children: /* @__PURE__ */ r(
+          "div",
+          {
+            className: d([
+              e.content,
+              !!S && e.stretchContents,
+              !!x && e.noTopPadding
+            ]),
+            onScroll: v,
+            ref: t,
+            children: u
+          }
+        ) })
+      ]
+    }
+  );
+};
 export {
-  q as Section
+  _ as Section
 };

package/dist/components/Slider.d.ts

@@ -15,6 +15,8 @@ type Props = {
     className: string;
     /** Color of the slider. */
     color: string;
+    /** Disables the slider. */
+    disabled: boolean;
     /** If set, this value will be used to set the fill percentage of the progress bar filler independently of the main value. */
     fillValue: number;
     /** Format value using this function before displaying it. */

package/dist/components/StyleableSection.js

@@ -1,5 +1,5 @@
 import { jsxs as s, jsx as l } from "react/jsx-runtime";
-import { s as t } from "../Section.module-CLVHJ4yA.js";
+import { s as t } from "../Section.module-qhQWhlUX.js";
 import { Box as e } from "./Box.js";
 function h(i) {
   const { children: r, titleStyle: c, titleSubtext: n, title: o, textStyle: a, style: m } = i;

package/dist/components/Tabs.d.ts

@@ -11,6 +11,7 @@ type TabProps = Partial<{
     className: string;
     color: string;
     icon: string;
+    iconSpin: boolean;
     leftSlot: ReactNode;
     onClick: (e?: any) => void;
     rightSlot: ReactNode;