tgui-core 1.2.0 → 1.3.0

package/dist/components/RoundGauge.js

@@ -1,116 +1,67 @@
-import { jsxs as k, jsx as _ } from "react/jsx-runtime";
-import { scale as d, keyOfMatchingRange as M, clamp01 as N } from "../common/math.js";
-import { classes as u } from "../common/react.js";
-import { AnimatedNumber as A } from "./AnimatedNumber.js";
-import { Box as B, computeBoxClassName as G, computeBoxProps as j } from "./Box.js";
-import '../assets/RoundGauge.css';const F = "_roundGauge_gktag_17", L = "_ringTrack_gktag_25", T = "_ringFill_gktag_33", V = "_needle_gktag_41", O = "_needleLine_gktag_46", R = "_needleMiddle_gktag_47", Z = "_alert_gktag_51", z = "_max_gktag_59", P = "_color__black_gktag_63", S = "_color__white_gktag_67", $ = "_color__red_gktag_71", D = "_color__orange_gktag_75", E = "_color__yellow_gktag_79", I = "_color__olive_gktag_83", q = "_color__green_gktag_87", H = "_color__teal_gktag_91", J = "_color__blue_gktag_95", K = "_color__violet_gktag_99", Q = "_color__purple_gktag_103", U = "_color__pink_gktag_107", W = "_color__brown_gktag_111", X = "_color__grey_gktag_115", Y = "_color__good_gktag_123", __ = "_color__average_gktag_127", e_ = "_color__bad_gktag_131", l_ = "_color__label_gktag_135", o_ = "_alert__black_gktag_139", r_ = "_alertAnim_gktag_1", t_ = "_alert__white_gktag_145", a_ = "_alert__red_gktag_151", c_ = "_alert__orange_gktag_157", g_ = "_alert__yellow_gktag_163", n_ = "_alert__olive_gktag_169", s_ = "_alert__green_gktag_175", i_ = "_alert__teal_gktag_181", k_ = "_alert__blue_gktag_187", d_ = "_alert__violet_gktag_193", u_ = "_alert__purple_gktag_199", m_ = "_alert__pink_gktag_205", p_ = "_alert__brown_gktag_211", b_ = "_alert__grey_gktag_217", y_ = "_alert__good_gktag_229", h_ = "_alert__average_gktag_235", f_ = "_alert__bad_gktag_241", v_ = "_alert__label_gktag_247", e = {
-  roundGauge: F,
-  ringTrack: L,
-  ringFill: T,
-  needle: V,
-  needleLine: O,
-  needleMiddle: R,
-  alert: Z,
-  max: z,
-  color__black: P,
-  color__white: S,
-  color__red: $,
-  color__orange: D,
-  color__yellow: E,
-  color__olive: I,
-  color__green: q,
-  color__teal: H,
-  color__blue: J,
-  color__violet: K,
-  color__purple: Q,
-  color__pink: U,
-  color__brown: W,
-  color__grey: X,
-  "color__light-grey": "_color__light-grey_gktag_119",
-  color__good: Y,
-  color__average: __,
-  color__bad: e_,
-  color__label: l_,
-  alert__black: o_,
-  alertAnim: r_,
-  alert__white: t_,
-  alert__red: a_,
-  alert__orange: c_,
-  alert__yellow: g_,
-  alert__olive: n_,
-  alert__green: s_,
-  alert__teal: i_,
-  alert__blue: k_,
-  alert__violet: d_,
-  alert__purple: u_,
-  alert__pink: m_,
-  alert__brown: p_,
-  alert__grey: b_,
-  "alert__light-grey": "_alert__light-grey_gktag_223",
-  alert__good: y_,
-  alert__average: h_,
-  alert__bad: f_,
-  alert__label: v_
-};
-function A_(y) {
+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 { classes as h } from "../common/react.js";
+import { AnimatedNumber as v } from "./AnimatedNumber.js";
+import { Box as B, computeBoxClassName as $, computeBoxProps as j } from "./Box.js";
+function w(p) {
   const {
-    alertAfter: o,
-    alertBefore: r,
-    className: h,
-    format: f,
-    maxValue: n = 1,
-    minValue: s = 1,
-    ranges: a,
-    size: v = 1,
-    style: w,
-    value: l,
-    ...m
-  } = y, C = d(l, s, n), p = N(C), c = a ? {} : { primary: [0, 1] };
-  a && Object.keys(a).forEach((t) => {
-    const g = a[t];
-    c[t] = [
-      d(g[0], s, n),
-      d(g[1], s, n)
+    alertAfter: a,
+    alertBefore: t,
+    className: _,
+    format: R,
+    maxValue: c = 1,
+    minValue: u = 1,
+    ranges: n,
+    size: y = 1,
+    style: x,
+    value: r,
+    ...g
+  } = p, G = d(r, u, c), f = k(G), l = n ? {} : { primary: [0, 1] };
+  n && Object.keys(n).forEach((o) => {
+    const s = n[o];
+    l[o] = [
+      d(s[0], u, c),
+      d(s[1], u, c)
     ];
   });
-  function x() {
-    return o && r && l > o && l < r || o && l > o ? !0 : !!(r && l < r);
+  function N() {
+    return !!(a && t && r > a && r < t || a && r > a || t && r < t);
   }
-  const b = x() && M(p, c);
-  return /* @__PURE__ */ k(B, { inline: !0, children: [
-    /* @__PURE__ */ _(
+  const C = N() && M(f, l);
+  return /* @__PURE__ */ m(B, { inline: !0, children: [
+    /* @__PURE__ */ e(
       "div",
       {
-        className: u([
-          e.roundGauge,
-          h,
-          G(m)
+        className: h([
+          "RoundGauge",
+          _,
+          $(g)
         ]),
         ...j({
           style: {
-            fontSize: v + "em",
-            ...w
+            fontSize: `${y}em`,
+            ...x
           },
-          ...m
+          ...g
         }),
-        children: /* @__PURE__ */ k("svg", { viewBox: "0 0 100 50", children: [
-          (o || r) && /* @__PURE__ */ _(
+        children: /* @__PURE__ */ m("svg", { viewBox: "0 0 100 50", children: [
+          (a || t) && /* @__PURE__ */ e(
             "g",
             {
-              className: u([
-                e.alert,
-                b ? e["alert__" + b] : ""
+              className: h([
+                "RoundGauge__alert",
+                C ? `active RoundGauge__alert--${C}` : ""
               ]),
-              children: /* @__PURE__ */ _("path", { d: "M48.211,14.578C48.55,13.9 49.242,13.472 50,13.472C50.758,13.472 51.45,13.9 51.789,14.578C54.793,20.587 60.795,32.589 63.553,38.106C63.863,38.726 63.83,39.462 63.465,40.051C63.101,40.641 62.457,41 61.764,41C55.996,41 44.004,41 38.236,41C37.543,41 36.899,40.641 36.535,40.051C36.17,39.462 36.137,38.726 36.447,38.106C39.205,32.589 45.207,20.587 48.211,14.578ZM50,34.417C51.426,34.417 52.583,35.574 52.583,37C52.583,38.426 51.426,39.583 50,39.583C48.574,39.583 47.417,38.426 47.417,37C47.417,35.574 48.574,34.417 50,34.417ZM50,32.75C50,32.75 53,31.805 53,22.25C53,20.594 51.656,19.25 50,19.25C48.344,19.25 47,20.594 47,22.25C47,31.805 50,32.75 50,32.75Z" })
+              children: /* @__PURE__ */ e("path", { d: "M48.211,14.578C48.55,13.9 49.242,13.472 50,13.472C50.758,13.472 51.45,13.9 51.789,14.578C54.793,20.587 60.795,32.589 63.553,38.106C63.863,38.726 63.83,39.462 63.465,40.051C63.101,40.641 62.457,41 61.764,41C55.996,41 44.004,41 38.236,41C37.543,41 36.899,40.641 36.535,40.051C36.17,39.462 36.137,38.726 36.447,38.106C39.205,32.589 45.207,20.587 48.211,14.578ZM50,34.417C51.426,34.417 52.583,35.574 52.583,37C52.583,38.426 51.426,39.583 50,39.583C48.574,39.583 47.417,38.426 47.417,37C47.417,35.574 48.574,34.417 50,34.417ZM50,32.75C50,32.75 53,31.805 53,22.25C53,20.594 51.656,19.25 50,19.25C48.344,19.25 47,20.594 47,22.25C47,31.805 50,32.75 50,32.75Z" })
             }
           ),
-          /* @__PURE__ */ _("g", { children: /* @__PURE__ */ _("circle", { className: e.ringTrack, cx: "50", cy: "50", r: "45" }) }),
-          /* @__PURE__ */ _("g", { children: Object.keys(c).map((t, g) => {
-            const i = c[t];
-            return /* @__PURE__ */ _(
+          /* @__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 i = l[o];
+            return /* @__PURE__ */ e(
               "circle",
               {
-                className: u([e.ringFill, e["color__" + t]]),
+                className: `RoundGauge__ringFill RoundGauge--color--${o}`,
                 style: {
                   strokeDashoffset: Math.max(
                     (2 - (i[1] - i[0])) * Math.PI * 50,
@@ -122,26 +73,41 @@ function A_(y) {
                 cy: "50",
                 r: "45"
               },
-              g
+              s
             );
           }) }),
-          /* @__PURE__ */ k(
+          /* @__PURE__ */ m(
             "g",
             {
-              className: e.needle,
-              transform: `rotate(${p * 180 - 90} 50 50)`,
+              className: "RoundGauge__needle",
+              transform: `rotate(${f * 180 - 90} 50 50)`,
               children: [
-                /* @__PURE__ */ _("polygon", { className: e.needleLine, points: "46,50 50,0 54,50" }),
-                /* @__PURE__ */ _("circle", { className: e.needleMiddle, cx: "50", cy: "50", r: "8" })
+                /* @__PURE__ */ e(
+                  "polygon",
+                  {
+                    className: "RoundGauge__needleLine",
+                    points: "46,50 50,0 54,50"
+                  }
+                ),
+                /* @__PURE__ */ e(
+                  "circle",
+                  {
+                    className: "RoundGauge__needleMiddle",
+                    cx: "50",
+                    cy: "50",
+                    r: "8"
+                  }
+                )
               ]
             }
-          )
+          ),
+          /* @__PURE__ */ e("title", { children: "alert" })
         ] })
       }
     ),
-    /* @__PURE__ */ _(A, { value: l, format: f })
+    /* @__PURE__ */ e(v, { value: r, format: R })
   ] });
 }
 export {
-  A_ as RoundGauge
+  w as RoundGauge
 };

package/dist/components/Section.d.ts

@@ -1,6 +1,5 @@
 import { ReactNode } from 'react';
 import { BoxProps } from './Box';
-
 type Props = Partial<{
     /** Buttons to render aside the section title. */
     buttons: ReactNode;
@@ -52,5 +51,5 @@ type Props = Partial<{
  * </Section>
  * ```
  */
-export declare const Section: (props: Props) => import("react/jsx-runtime").JSX.Element;
+export declare function Section(props: Props): import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/components/Section.js

@@ -1,69 +1,68 @@
-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) => {
+import { jsxs as s, jsx as t } from "react/jsx-runtime";
+import { useRef as T, useEffect as C } from "react";
+import { addScrollableNode as P, removeScrollableNode as g } from "../common/events.js";
+import { classes as a, canRender as d } from "../common/react.js";
+import { computeBoxClassName as j, computeBoxProps as z } from "./Box.js";
+function G(m) {
   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,
+    buttons: n,
+    children: f,
+    className: _,
+    fill: u,
+    fitted: S,
+    flexGrow: p,
+    noTopPadding: N,
+    onScroll: h,
+    scrollable: c,
+    scrollableHorizontal: l,
+    stretchContents: b,
+    title: r,
+    container_id: x,
     ...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);
+  } = m, e = T(null), v = d(r) || d(n);
+  return C(() => {
+    if (!(e != null && e.current) || !c && !l) return;
+    const o = e.current;
+    return P(o), () => {
+      o && g(o);
     };
-  }, []), /* @__PURE__ */ a(
+  }, []), /* @__PURE__ */ s(
     "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)
+      id: x || "",
+      className: a([
+        "Section",
+        u && "Section--fill",
+        S && "Section--fitted",
+        c && "Section--scrollable",
+        l && "Section--scrollableHorizontal",
+        p && "Section__flex",
+        _,
+        j(i)
       ]),
-      ...H(i),
+      ...z(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 })
+        v && /* @__PURE__ */ s("div", { className: "Section__title", children: [
+          /* @__PURE__ */ t("span", { className: "Section__titleText", children: r }),
+          /* @__PURE__ */ t("div", { className: "Section__buttons", children: n })
         ] }),
-        /* @__PURE__ */ r("div", { className: e.rest, children: /* @__PURE__ */ r(
+        /* @__PURE__ */ t("div", { className: "Section__rest", children: /* @__PURE__ */ t(
           "div",
           {
-            className: d([
-              e.content,
-              !!S && e.stretchContents,
-              !!x && e.noTopPadding
+            className: a([
+              "Section__content",
+              !!b && "content__stretchContents",
+              !!N && "content__noTopPadding"
             ]),
-            onScroll: v,
-            ref: t,
-            children: u
+            onScroll: h,
+            ref: e,
+            children: f
           }
         ) })
       ]
     }
   );
-};
+}
 export {
-  _ as Section
+  G as Section
 };

package/dist/components/Slider.d.ts

@@ -1,6 +1,5 @@
 import { PropsWithChildren } from 'react';
 import { BoxProps } from './Box';
-
 type Props = {
     /** Highest possible value. */
     maxValue: number;

package/dist/components/Slider.js

@@ -1,117 +1,109 @@
-import { jsx as s, jsxs as m } from "react/jsx-runtime";
-import { keyOfMatchingRange as R, clamp01 as t, scale as f } from "../common/math.js";
-import { classes as _ } from "../common/react.js";
-import { p as e } from "../ProgressBar.module-Jzqlebbx.js";
-import { computeBoxClassName as q, computeBoxProps as A } from "./Box.js";
-import { DraggableControl as G } from "./DraggableControl.js";
-import '../assets/Slider.css';const H = "_slider_1assx_9", I = "_cursorOffset_1assx_13", J = "_cursor_1assx_13", K = "_pointer_1assx_30", L = "_popupValue_1assx_41", a = {
-  slider: H,
-  cursorOffset: I,
-  cursor: J,
-  pointer: K,
-  popupValue: L
-};
-function Z(h) {
+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 "./Box.js";
+import { DraggableControl as R } from "./DraggableControl.js";
+function J(g) {
   const {
     // Draggable props (passthrough)
-    animated: g,
-    format: v,
-    maxValue: o,
-    minValue: r,
-    onChange: x,
-    onDrag: V,
-    step: y,
-    stepPixelSize: N,
-    suppressFlicker: C,
-    unit: D,
-    value: O,
+    animated: f,
+    format: _,
+    maxValue: l,
+    minValue: s,
+    onChange: h,
+    onDrag: v,
+    step: N,
+    stepPixelSize: x,
+    suppressFlicker: y,
+    unit: B,
+    value: P,
     // Own props
-    className: w,
-    fillValue: l,
-    color: M,
-    ranges: S = {},
+    className: S,
+    fillValue: a,
+    color: V,
+    ranges: C = {},
     children: i,
-    ...c
-  } = h, B = i !== void 0;
-  return /* @__PURE__ */ s(
-    G,
+    ...o
+  } = g, D = i !== void 0;
+  return /* @__PURE__ */ e(
+    R,
     {
       dragMatrix: [1, 0],
-      animated: g,
-      format: v,
-      maxValue: o,
-      minValue: r,
-      onChange: x,
-      onDrag: V,
-      step: y,
-      stepPixelSize: N,
-      suppressFlicker: C,
-      unit: D,
-      value: O,
-      children: (F) => {
+      animated: f,
+      format: _,
+      maxValue: l,
+      minValue: s,
+      onChange: h,
+      onDrag: v,
+      step: N,
+      stepPixelSize: x,
+      suppressFlicker: y,
+      unit: B,
+      value: P,
+      children: (w) => {
         const {
-          displayElement: n,
-          displayValue: p,
-          dragging: j,
-          handleDragStart: k,
-          inputElement: E,
-          value: P
-        } = F, b = l != null, u = f(
-          l ?? p,
-          r,
-          o
-        ), d = f(p, r, o), z = M || R(l ?? P, S) || "default";
+          displayElement: t,
+          displayValue: n,
+          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(
           "div",
           {
-            className: _([
-              a.slider,
-              e.progressBar,
-              e["color__" + z],
-              w,
-              q(c)
+            className: p([
+              "Slider",
+              "ProgressBar",
+              `ProgressBar--color--${E}`,
+              S,
+              b(o)
             ]),
-            ...A(c),
-            onMouseDown: k,
+            ...z(o),
+            onMouseDown: $,
             children: [
-              /* @__PURE__ */ s(
+              /* @__PURE__ */ e(
                 "div",
                 {
-                  className: _([
-                    e.fill,
-                    b && e.fill__animated
+                  className: p([
+                    "ProgressBar__fill",
+                    k && "ProgressBar__fill--animated"
                   ]),
                   style: {
-                    width: t(u) * 100 + "%",
+                    width: `${r(c) * 100}%`,
                     opacity: 0.4
                   }
                 }
               ),
-              /* @__PURE__ */ s(
+              /* @__PURE__ */ e(
                 "div",
                 {
-                  className: e.fill,
+                  className: "ProgressBar__fill",
                   style: {
-                    width: t(Math.min(u, d)) * 100 + "%"
+                    width: `${r(Math.min(c, d)) * 100}%`
                   }
                 }
               ),
               /* @__PURE__ */ m(
                 "div",
                 {
-                  className: a.cursorOffset,
+                  className: "Slider__cursorOffset",
                   style: {
-                    width: t(d) * 100 + "%"
+                    width: `${r(d) * 100}%`
                   },
                   children: [
-                    /* @__PURE__ */ s("div", { className: a.cursor }),
-                    /* @__PURE__ */ s("div", { className: a.pointer }),
-                    j && /* @__PURE__ */ s("div", { className: a.popupValue, children: n })
+                    /* @__PURE__ */ e("div", { className: "Slider__cursor" }),
+                    /* @__PURE__ */ e("div", { className: "Slider__pointer" }),
+                    M && /* @__PURE__ */ e("div", { className: "Slider__popupValue", children: t })
                   ]
                 }
               ),
-              /* @__PURE__ */ s("div", { className: e.content, children: B ? i : n }),
-              E
+              /* @__PURE__ */ e("div", { className: "ProgressBar__content", children: D ? i : t }),
+              F
             ]
           }
         );
@@ -120,5 +112,5 @@ function Z(h) {
   );
 }
 export {
-  Z as Slider
+  J as Slider
 };

package/dist/components/Stack.d.ts

@@ -1,6 +1,5 @@
 import { RefObject } from 'react';
 import { FlexItemProps, FlexProps } from './Flex';
-
 type Props = Partial<{
     /** Fills available space. */
     fill: boolean;