tgui-core 1.8.4 → 2.0.1

package/dist/components/ProgressBar.js

@@ -1,6 +1,6 @@
 import { jsxs as B, jsx as i } from "react/jsx-runtime";
 import { CSS_COLORS as C } from "../common/constants.js";
-import { keyOfMatchingRange as P, toFixed as h, scale as x, clamp01 as _ } from "../common/math.js";
+import { keyOfMatchingRange as P, toFixed as h, clamp01 as x, scale as _ } from "../common/math.js";
 import { classes as v } from "../common/react.js";
 import { computeBoxProps as y, computeBoxClassName as N } from "../common/ui.js";
 function j(n) {
@@ -13,8 +13,8 @@ function j(n) {
     ranges: p = {},
     children: r,
     ...l
-  } = n, a = x(o, d, f), g = r !== void 0, s = u || P(o, p) || "default", e = y(l), t = ["ProgressBar", m, N(l)], c = {
-    width: `${_(a) * 100}%`
+  } = n, a = _(o, d, f), g = r !== void 0, s = u || P(o, p) || "default", e = y(l), t = ["ProgressBar", m, N(l)], c = {
+    width: `${x(a) * 100}%`
   };
   return C.includes(s) || s === "default" ? t.push(`ProgressBar--color--${s}`) : (e.style = { ...e.style, borderColor: s }, c.backgroundColor = s), /* @__PURE__ */ B("div", { className: v(t), ...e, children: [
     /* @__PURE__ */ i(

package/dist/components/RoundGauge.js

@@ -1,47 +1,47 @@
 import { jsxs as m, jsx as e } from "react/jsx-runtime";
-import { scale as d, keyOfMatchingRange as M, clamp01 as k } from "../common/math.js";
+import { scale as d, keyOfMatchingRange as M, clamp01 as v } from "../common/math.js";
 import { classes as p } from "../common/react.js";
-import { computeBoxClassName as v, computeBoxProps as B } from "../common/ui.js";
-import { AnimatedNumber as $ } from "./AnimatedNumber.js";
-import { Box as j } from "./Box.js";
-function z(h) {
+import { computeBoxProps as k, computeBoxClassName as $ } from "../common/ui.js";
+import { AnimatedNumber as B } from "./AnimatedNumber.js";
+function b(_) {
   const {
     alertAfter: a,
     alertBefore: t,
-    className: _,
+    className: h,
     format: R,
     maxValue: c = 1,
-    minValue: i = 1,
+    minValue: u = 1,
     ranges: n,
     size: y = 1,
-    style: x,
+    style: G,
     value: r,
     ...g
-  } = h, G = d(r, i, c), f = k(G), l = n ? {} : { primary: [0, 1] };
-  n && Object.keys(n).forEach((o) => {
-    const s = n[o];
-    l[o] = [
-      d(s[0], i, c),
-      d(s[1], i, c)
-    ];
-  });
-  function N() {
+  } = _, N = d(r, u, c), f = v(N), s = n ? {} : { primary: [0, 1] };
+  if (n)
+    for (const o in n) {
+      const l = n[o];
+      s[o] = [
+        d(l[0], u, c),
+        d(l[1], u, c)
+      ];
+    }
+  function x() {
     return !!(a && t && r > a && r < t || a && r > a || t && r < t);
   }
-  const C = N() && M(f, l);
-  return /* @__PURE__ */ m(j, { inline: !0, children: [
+  const C = x() && M(f, s);
+  return /* @__PURE__ */ m("div", { className: "RoundGauge__wrapper", children: [
     /* @__PURE__ */ e(
       "div",
       {
         className: p([
           "RoundGauge",
-          _,
-          v(g)
+          h,
+          $(g)
         ]),
-        ...B({
+        ...k({
           style: {
             fontSize: `${y}em`,
-            ...x
+            ...G
           },
           ...g
         }),
@@ -57,24 +57,24 @@ function z(h) {
             }
           ),
           /* @__PURE__ */ e("g", { children: /* @__PURE__ */ e("circle", { className: "RoundGauge__ringTrack", cx: "50", cy: "50", r: "45" }) }),
-          /* @__PURE__ */ e("g", { children: Object.keys(l).map((o, s) => {
-            const u = l[o];
+          /* @__PURE__ */ e("g", { children: Object.keys(s).map((o, l) => {
+            const i = s[o];
             return /* @__PURE__ */ e(
               "circle",
               {
                 className: `RoundGauge__ringFill RoundGauge--color--${o}`,
                 style: {
                   strokeDashoffset: Math.max(
-                    (2 - (u[1] - u[0])) * Math.PI * 50,
+                    (2 - (i[1] - i[0])) * Math.PI * 50,
                     0
                   )
                 },
-                transform: `rotate(${180 + 180 * u[0]} 50 50)`,
+                transform: `rotate(${180 + 180 * i[0]} 50 50)`,
                 cx: "50",
                 cy: "50",
                 r: "45"
               },
-              s
+              l
             );
           }) }),
           /* @__PURE__ */ m(
@@ -106,9 +106,9 @@ function z(h) {
         ] })
       }
     ),
-    /* @__PURE__ */ e($, { value: r, format: R })
+    /* @__PURE__ */ e(B, { value: r, format: R })
   ] });
 }
 export {
-  z as RoundGauge
+  b as RoundGauge
 };

package/dist/components/Section.js

@@ -1,8 +1,8 @@
 import { jsxs as i, jsx as t } from "react/jsx-runtime";
 import { forwardRef as C, useRef as P, useEffect as g } from "react";
 import { addScrollableNode as j, removeScrollableNode as w } from "../common/events.js";
-import { classes as s, canRender as a } from "../common/react.js";
-import { computeBoxClassName as z, computeBoxProps as B } from "../common/ui.js";
+import { canRender as s, classes as a } from "../common/react.js";
+import { computeBoxProps as z, computeBoxClassName as B } from "../common/ui.js";
 const q = C(
   (d, m) => {
     const {
@@ -20,14 +20,14 @@ const q = C(
       stretchContents: x,
       title: r,
       ...l
-    } = d, v = P(null), e = m || v, T = a(r) || a(o);
+    } = d, v = P(null), e = m || v, T = s(r) || s(o);
     return g(() => (e != null && e.current && (n || c) && j(e.current), () => {
       e != null && e.current && w(e.current);
     }), []), /* @__PURE__ */ i(
       "div",
       {
         id: _,
-        className: s([
+        className: a([
           "Section",
           u && "Section--fill",
           p && "Section--fitted",
@@ -35,9 +35,9 @@ const q = C(
           c && "Section--scrollableHorizontal",
           N && "Section--flex",
           S,
-          z(l)
+          B(l)
         ]),
-        ...B(l),
+        ...z(l),
         children: [
           T && /* @__PURE__ */ i("div", { className: "Section__title", children: [
             /* @__PURE__ */ t("span", { className: "Section__titleText", children: r }),
@@ -46,7 +46,7 @@ const q = C(
           /* @__PURE__ */ t("div", { className: "Section__rest", children: /* @__PURE__ */ t(
             "div",
             {
-              className: s([
+              className: a([
                 "Section__content",
                 x && "Section__content--stretchContents",
                 h && "Section__content--noTopPadding"

package/dist/components/Slider.d.ts

@@ -16,22 +16,38 @@ type Props = {
     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. */
+    /**
+     * 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. */
     format: (value: number) => string;
     /** Adjust value by this amount when dragging the input. */
     onChange: (event: Event, value: number) => void;
-    /** An event, which fires when you release the input, or successfully enter a number. */
+    /**
+     * An event which fires when you release the input or successfully enter
+     * a number.
+     */
     onDrag: (event: Event, value: number) => void;
-    /** Applies a `color` to the slider based on whether the value lands in the range between `from` and `to`. */
+    /**
+     * Applies a `color` to the slider based on whether the value lands in the
+     * range between `from` and `to`.
+     */
     ranges: Record<string, [number, number]>;
     /** Screen distance mouse needs to travel to adjust value by one `step`. */
     step: 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. */
+    /**
+     * The sensitivity of the slider. Adjust this if it feels too slow/fast
+     * while dragging. Use higher for larger sliders. Default is 1.
+     */
     stepPixelSize: number;
-    /** Adjust value by this amount when dragging the input. */
-    suppressFlicker: boolean;
+    /**
+     * 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: number;
     /** Unit to display to the right of value. */
     unit: string;
 }> & BoxProps & PropsWithChildren;

package/dist/components/Slider.js

@@ -1,80 +1,79 @@
-import { jsx as e, jsxs as m } from "react/jsx-runtime";
-import { keyOfMatchingRange as O, clamp01 as r, scale as u } from "../common/math.js";
-import { classes as p } from "../common/react.js";
-import { computeBoxClassName as b, computeBoxProps as z } from "../common/ui.js";
-import { DraggableControl as R } from "./DraggableControl.js";
-function J(g) {
+import { jsx as e, jsxs as p } from "react/jsx-runtime";
+import { keyOfMatchingRange as E, clamp01 as r, scale as u } from "../common/math.js";
+import { classes as g } from "../common/react.js";
+import { computeBoxProps as O, computeBoxClassName as b } from "../common/ui.js";
+import { DraggableControl as z } from "./DraggableControl.js";
+function I(f) {
   const {
     // Draggable props (passthrough)
-    animated: f,
-    format: _,
-    maxValue: l,
-    minValue: s,
-    onChange: h,
-    onDrag: v,
-    step: N,
-    stepPixelSize: x,
-    suppressFlicker: y,
-    unit: B,
-    value: P,
+    animated: _,
+    format: h,
+    maxValue: a,
+    minValue: l,
+    onChange: v,
+    onDrag: N,
+    step: x,
+    stepPixelSize: y,
+    suppressFlicker: B,
+    unit: P,
+    value: i,
     // Own props
     className: S,
-    fillValue: a,
+    fillValue: s,
     color: V,
     ranges: C = {},
-    children: i,
-    ...o
-  } = g, D = i !== void 0;
+    children: o,
+    ...t
+  } = f, D = o !== void 0;
   return /* @__PURE__ */ e(
-    R,
+    z,
     {
       dragMatrix: [1, 0],
-      animated: f,
-      format: _,
-      maxValue: l,
-      minValue: s,
-      onChange: h,
-      onDrag: v,
-      step: N,
-      stepPixelSize: x,
-      suppressFlicker: y,
-      unit: B,
-      value: P,
+      animated: _,
+      format: h,
+      maxValue: a,
+      minValue: l,
+      onChange: v,
+      onDrag: N,
+      step: x,
+      stepPixelSize: y,
+      suppressFlicker: B,
+      unit: P,
+      value: i,
       children: (w) => {
         const {
-          displayElement: t,
-          displayValue: n,
+          displayElement: n,
+          displayValue: c,
           dragging: M,
           handleDragStart: $,
-          inputElement: F,
-          value: j
-        } = w, k = a != null, c = u(
-          a ?? n,
-          s,
-          l
-        ), d = u(n, s, l), E = V || O(a ?? j, C) || "default";
-        return /* @__PURE__ */ m(
+          inputElement: F
+        } = w, j = s != null, d = u(
+          s ?? c,
+          l,
+          a
+        ), m = u(c, l, a), k = V || E(s ?? i, C) || "default";
+        return /* @__PURE__ */ p(
           "div",
           {
-            className: p([
+            className: g([
               "Slider",
               "ProgressBar",
-              `ProgressBar--color--${E}`,
+              `ProgressBar--color--${k}`,
               S,
-              b(o)
+              b(t)
             ]),
-            ...z(o),
+            ...O(t),
             onMouseDown: $,
             children: [
               /* @__PURE__ */ e(
                 "div",
                 {
-                  className: p([
+                  className: g([
                     "ProgressBar__fill",
-                    k && "ProgressBar__fill--animated"
+                    j && "ProgressBar__fill--animated"
                   ]),
                   style: {
-                    width: `${r(c) * 100}%`,
+                    width: `${r(d) * 100}%`,
                     opacity: 0.4
                   }
                 }
@@ -84,25 +83,25 @@ function J(g) {
                 {
                   className: "ProgressBar__fill",
                   style: {
-                    width: `${r(Math.min(c, d)) * 100}%`
+                    width: `${r(Math.min(d, m)) * 100}%`
                   }
                 }
               ),
-              /* @__PURE__ */ m(
+              /* @__PURE__ */ p(
                 "div",
                 {
                   className: "Slider__cursorOffset",
                   style: {
-                    width: `${r(d) * 100}%`
+                    width: `${r(m) * 100}%`
                   },
                   children: [
                     /* @__PURE__ */ e("div", { className: "Slider__cursor" }),
                     /* @__PURE__ */ e("div", { className: "Slider__pointer" }),
-                    M && /* @__PURE__ */ e("div", { className: "Slider__popupValue", children: t })
+                    M && /* @__PURE__ */ e("div", { className: "Slider__popupValue", children: n })
                   ]
                 }
               ),
-              /* @__PURE__ */ e("div", { className: "ProgressBar__content", children: D ? i : t }),
+              /* @__PURE__ */ e("div", { className: "ProgressBar__content", children: D ? o : n }),
               F
             ]
           }
@@ -112,5 +111,5 @@ function J(g) {
   );
 }
 export {
-  J as Slider
+  I as Slider
 };

package/dist/components/Stack.js

@@ -1,7 +1,7 @@
 import { jsx as i } from "react/jsx-runtime";
 import { classes as a } from "../common/react.js";
 import { computeBoxClassName as o } from "../common/ui.js";
-import { computeFlexClassName as k, computeFlexProps as v, computeFlexItemProps as m } from "./Flex.js";
+import { computeFlexProps as k, computeFlexClassName as v, computeFlexItemProps as m } from "./Flex.js";
 function n(r) {
   const { className: c, vertical: e, fill: t, reverse: s, zebra: l, ...d } = r, f = e ? "column" : "row", S = s ? "-reverse" : "";
   return /* @__PURE__ */ i(
@@ -14,9 +14,9 @@ function n(r) {
         l && "Stack--zebra",
         s && `Stack--reverse${e ? "--vertical" : ""}`,
         c,
-        k(r)
+        v(r)
       ]),
-      ...v({
+      ...k({
         direction: `${f}${S}`,
         ...d
       })

package/dist/components/Table.js

@@ -1,6 +1,6 @@
 import { jsx as c } from "react/jsx-runtime";
 import { classes as r } from "../common/react.js";
-import { computeBoxClassName as t, computeBoxProps as n } from "../common/ui.js";
+import { computeBoxProps as t, computeBoxClassName as n } from "../common/ui.js";
 function m(e) {
   const { className: l, collapsing: a, children: s, ...o } = e;
   return /* @__PURE__ */ c(
@@ -10,9 +10,9 @@ function m(e) {
         "Table",
         a && "Table--collapsing",
         l,
-        t(o)
+        n(o)
       ]),
-      ...n(o),
+      ...t(o),
       children: /* @__PURE__ */ c("tbody", { children: s })
     }
   );
@@ -26,9 +26,9 @@ function b(e) {
         "Table__row",
         a && "Table__row--header",
         l,
-        t(e)
+        n(e)
       ]),
-      ...n(s)
+      ...t(s)
     }
   );
 }
@@ -42,10 +42,10 @@ function _(e) {
         a && "Table__cell--collapsing",
         o && "Table__cell--header",
         l,
-        t(e)
+        n(e)
       ]),
       colSpan: s,
-      ...n(i)
+      ...t(i)
     }
   );
 }

package/dist/components/Tabs.js

@@ -1,6 +1,6 @@
-import { jsx as a, jsxs as N } from "react/jsx-runtime";
-import { classes as f, canRender as d } from "../common/react.js";
-import { computeBoxClassName as h, computeBoxProps as p } from "../common/ui.js";
+import { jsxs as N, jsx as a } from "react/jsx-runtime";
+import { canRender as d, classes as f } from "../common/react.js";
+import { computeBoxProps as h, computeBoxClassName as p } from "../common/ui.js";
 import { Icon as v } from "./Icon.js";
 function T(e) {
   const { className: i, vertical: c, fill: o, fluid: s, children: r, ...l } = e;
@@ -13,9 +13,9 @@ function T(e) {
         o && "Tabs--fill",
         s && "Tabs--fluid",
         i,
-        h(l)
+        p(l)
       ]),
-      ...p(l),
+      ...h(l),
       children: r
     }
   );
@@ -45,10 +45,10 @@ function x(e) {
         `Tab--color--${o}`,
         c && "Tab--selected",
         i,
-        h(m)
+        p(m)
       ]),
       onClick: _,
-      ...p(m),
+      ...h(m),
       children: [
         d(l) && /* @__PURE__ */ a("div", { className: "Tab__left", children: l }) || !!s && /* @__PURE__ */ a("div", { className: "Tab__left", children: /* @__PURE__ */ a(v, { name: s, spin: r }) }),
         /* @__PURE__ */ a("div", { className: "Tab__text", children: u }),

package/dist/components/TextArea.d.ts

@@ -1,11 +1,24 @@
 import { SyntheticEvent } from 'react';
+/**
+ * ## Textarea
+ *
+ * An input for larger amounts of text. Use this when you want inputs larger
+ * than one row.
+ */
 export declare const TextArea: import('react').ForwardRefExoticComponent<Partial<{
+    /** Automatically focus the textarea on mount */
     autoFocus: boolean;
+    /** Selects all text on mount */
     autoSelect: boolean;
+    /** The value to display in the textarea */
     displayedValue: string;
+    /** Don't use tab for indent */
     dontUseTabForIndent: boolean;
+    /** Sets width to 100% */
     fluid: boolean;
+    /** Maximum length of the textarea */
     maxLength: number;
+    /** Removes the border. */
     noborder: boolean;
     /** Fires when user is 'done typing': Clicked out, blur, enter key (but not shift+enter) */
     onChange: (event: SyntheticEvent<HTMLTextAreaElement>, value: string) => void;
@@ -15,11 +28,15 @@ export declare const TextArea: import('react').ForwardRefExoticComponent<Partial
     onEscape: (event: SyntheticEvent<HTMLTextAreaElement>) => void;
     /** Fires on each key press / value change. Used for searching */
     onInput: (event: SyntheticEvent<HTMLTextAreaElement>, value: string) => void;
+    /** Dummy text inside the textarea when it's empty */
     placeholder: string;
+    /** Whether the textarea is scrollable when it has more content than height */
     scrollbar: boolean;
+    /** Clears the textarea when the enter key is pressed */
     selfClear: boolean;
     /** Provides a Record with key: markupChar entries which can be used for ctrl + key combinations to surround a selected text with the markup character */
     userMarkup: Record<string, string>;
+    /** The value of the textarea */
     value: string;
 }> & Partial<{
     as: string;