tgui-core 1.2.0 → 1.3.0

package/dist/components/Input.js

@@ -1,88 +1,81 @@
-import { jsxs as K, jsx as m } from "react/jsx-runtime";
-import { useRef as V, useEffect as d } from "react";
-import { KEY as j, isEscape as k } from "../common/keys.js";
-import { classes as B } from "../common/react.js";
-import { debounce as R } from "../common/timer.js";
-import { Box as S } from "./Box.js";
-import '../assets/Input.css';const F = "_input_17i79_20", L = "_fluid_17i79_35", Y = "_baseline_17i79_40", q = "_inner_17i79_45", v = "_monospace_17i79_71", u = {
-  input: F,
-  fluid: L,
-  baseline: Y,
-  inner: q,
-  monospace: v
-};
-function a(r) {
-  return typeof r != "number" && typeof r != "string" ? "" : String(r);
+import { jsxs as E, jsx as p } from "react/jsx-runtime";
+import { useRef as K, useEffect as m } from "react";
+import { KEY as V, isEscape as j } from "../common/keys.js";
+import { classes as k } from "../common/react.js";
+import { debounce as B } from "../common/timer.js";
+import { Box as R } from "./Box.js";
+function l(u) {
+  return typeof u != "number" && typeof u != "string" ? "" : String(u);
 }
-const z = R((r) => r(), 250);
-function P(r) {
+const S = B((u) => u(), 250);
+function A(u) {
   const {
-    autoFocus: _,
-    autoSelect: f,
-    className: b,
-    disabled: g,
+    autoFocus: d,
+    autoSelect: s,
+    className: g,
+    disabled: I,
     expensive: T,
-    fluid: y,
+    fluid: b,
     maxLength: x,
-    monospace: h,
+    monospace: y,
     onChange: t,
-    onEnter: i,
+    onEnter: n,
     onEscape: o,
-    onInput: s,
-    placeholder: w,
-    selfClear: I,
-    value: c,
+    onInput: i,
+    placeholder: h,
+    selfClear: w,
+    value: a,
     ...N
-  } = r, l = V(null);
-  function D(e) {
-    var p;
-    if (!s) return;
-    const n = (p = e.currentTarget) == null ? void 0 : p.value;
-    T ? z(() => s(e, n)) : s(e, n);
+  } = u, c = K(null);
+  function _(e) {
+    var f;
+    if (!i) return;
+    const r = (f = e.currentTarget) == null ? void 0 : f.value;
+    T ? S(() => i(e, r)) : i(e, r);
   }
-  function E(e) {
-    if (e.key === j.Enter) {
-      i == null || i(e, e.currentTarget.value), I ? e.currentTarget.value = "" : (e.currentTarget.blur(), t == null || t(e, e.currentTarget.value));
+  function D(e) {
+    if (e.key === V.Enter) {
+      n == null || n(e, e.currentTarget.value), w ? e.currentTarget.value = "" : (e.currentTarget.blur(), t == null || t(e, e.currentTarget.value));
       return;
     }
-    k(e.key) && (o == null || o(e), e.currentTarget.value = a(c), e.currentTarget.blur());
+    j(e.key) && (o == null || o(e), e.currentTarget.value = l(a), e.currentTarget.blur());
   }
-  return d(() => {
-    const e = l.current;
+  return m(() => {
+    const e = c.current;
     if (!e) return;
-    const n = a(c);
-    e.value !== n && (e.value = n), !(!_ && !f) && setTimeout(() => {
-      e.focus(), f && e.select();
+    const r = l(a);
+    e.value !== r && (e.value = r), !(!d && !s) && setTimeout(() => {
+      e.focus(), s && e.select();
     }, 1);
-  }, []), d(() => {
-    const e = l.current;
+  }, []), m(() => {
+    const e = c.current;
     if (!e || document.activeElement === e)
       return;
-    const n = a(c);
-    e.value !== n && (e.value = n);
-  }), /* @__PURE__ */ K(
-    S,
+    const r = l(a);
+    e.value !== r && (e.value = r);
+  }), /* @__PURE__ */ E(
+    R,
     {
-      className: B([
-        u.input,
-        y && u.fluid,
-        h && u.monospace,
-        b
+      className: k([
+        "Input",
+        b && "Input--fluid",
+        y && "Input--monospace",
+        g
       ]),
       ...N,
       children: [
-        /* @__PURE__ */ m("div", { className: u.baseline, children: "." }),
-        /* @__PURE__ */ m(
+        /* @__PURE__ */ p("div", { className: "Input__baseline", children: "." }),
+        /* @__PURE__ */ p(
           "input",
           {
-            className: u.inner,
-            disabled: g,
+            className: "Input__input",
+            disabled: I,
             maxLength: x,
             onBlur: (e) => t == null ? void 0 : t(e, e.target.value),
-            onChange: D,
-            onKeyDown: E,
-            placeholder: w,
-            ref: l
+            onChange: _,
+            onKeyDown: D,
+            placeholder: h,
+            ref: c
           }
         )
       ]
@@ -90,6 +83,6 @@ function P(r) {
   );
 }
 export {
-  P as Input,
-  a as toInputValue
+  A as Input,
+  l as toInputValue
 };

package/dist/components/KeyListener.d.ts

@@ -1,6 +1,5 @@
 import { Component } from 'react';
 import { KeyEvent } from '../common/events';
-
 type KeyListenerProps = Partial<{
     onKey: (key: KeyEvent) => void;
     onKeyDown: (key: KeyEvent) => void;

package/dist/components/Knob.d.ts

@@ -1,6 +1,5 @@
 import { BooleanLike } from '../common/react';
 import { BoxProps } from './Box';
-
 type Props = {
     /** Value itself, controls the position of the cursor. */
     value: number;

package/dist/components/Knob.js

@@ -1,155 +1,129 @@
-import { jsx as _, jsxs as j } from "react/jsx-runtime";
-import { keyOfMatchingRange as E, scale as s } from "../common/math.js";
-import { classes as e } from "../common/react.js";
-import { computeBoxClassName as K, computeBoxProps as I } from "./Box.js";
-import { DraggableControl as O } from "./DraggableControl.js";
-import '../assets/Knob.css';const R = "_knob_69dqe_17", $ = "_circle_69dqe_32", A = "_cursorBox_69dqe_45", G = "_cursor_69dqe_45", H = "_popupValue_69dqe_62", J = "_ring_69dqe_75", L = "_ringTrackPivot_69dqe_84", Q = "_ringTrack_69dqe_84", U = "_ringFillPivot_69dqe_96", W = "_bipolar_69dqe_100", X = "_ringFill_69dqe_96", Y = "_color__black_69dqe_113", Z = "_color__white_69dqe_117", oo = "_color__red_69dqe_121", _o = "_color__orange_69dqe_125", ro = "_color__yellow_69dqe_129", lo = "_color__olive_69dqe_133", eo = "_color__green_69dqe_137", co = "_color__teal_69dqe_141", no = "_color__blue_69dqe_145", ao = "_color__violet_69dqe_149", io = "_color__purple_69dqe_153", so = "_color__pink_69dqe_157", to = "_color__brown_69dqe_161", go = "_color__grey_69dqe_165", po = "_color__good_69dqe_173", uo = "_color__average_69dqe_177", mo = "_color__bad_69dqe_181", qo = "_color__label_69dqe_185", o = {
-  knob: R,
-  circle: $,
-  cursorBox: A,
-  cursor: G,
-  popupValue: H,
-  ring: J,
-  ringTrackPivot: L,
-  ringTrack: Q,
-  ringFillPivot: U,
-  bipolar: W,
-  ringFill: X,
-  color__black: Y,
-  color__white: Z,
-  color__red: oo,
-  color__orange: _o,
-  color__yellow: ro,
-  color__olive: lo,
-  color__green: eo,
-  color__teal: co,
-  color__blue: no,
-  color__violet: ao,
-  color__purple: io,
-  color__pink: so,
-  color__brown: to,
-  color__grey: go,
-  "color__light-grey": "_color__light-grey_69dqe_169",
-  color__good: po,
-  color__average: uo,
-  color__bad: mo,
-  color__label: qo
-};
-function xo(t) {
+import { jsx as e, jsxs as o } from "react/jsx-runtime";
+import { keyOfMatchingRange as $, scale as t } from "../common/math.js";
+import { classes as j } from "../common/react.js";
+import { computeBoxClassName as E, computeBoxProps as T } from "./Box.js";
+import { DraggableControl as I } from "./DraggableControl.js";
+function H(c) {
   const {
     // Draggable props (passthrough)
-    animated: d,
-    format: g,
-    maxValue: r,
+    animated: m,
+    format: d,
+    maxValue: a,
     minValue: l,
-    onChange: p,
-    onDrag: u,
-    step: m,
-    stepPixelSize: q,
-    suppressFlicker: v,
-    unclamped: b,
-    unit: k,
-    value: h,
+    onChange: u,
+    onDrag: p,
+    step: g,
+    stepPixelSize: _,
+    suppressFlicker: b,
+    unclamped: f,
+    unit: h,
+    value: v,
     // Own props
-    bipolar: c,
-    className: y,
-    color: x,
-    fillValue: n,
-    ranges: f = {},
-    size: w = 1,
-    style: N,
-    ...a
-  } = t;
-  return /* @__PURE__ */ _(
-    O,
+    bipolar: r,
+    className: x,
+    color: K,
+    fillValue: s,
+    ranges: N = {},
+    size: y = 1,
+    style: V,
+    ...n
+  } = c;
+  return /* @__PURE__ */ e(
+    I,
     {
       dragMatrix: [0, -1],
-      animated: d,
-      format: g,
-      maxValue: r,
+      animated: m,
+      format: d,
+      maxValue: a,
       minValue: l,
-      onChange: p,
-      onDrag: u,
-      step: m,
-      stepPixelSize: q,
-      suppressFlicker: v,
-      unclamped: b,
-      unit: k,
-      value: h,
-      children: (P) => {
+      onChange: u,
+      onDrag: p,
+      step: g,
+      stepPixelSize: _,
+      suppressFlicker: b,
+      unclamped: f,
+      unit: h,
+      value: v,
+      children: (k) => {
         const {
-          displayElement: F,
+          displayElement: D,
           displayValue: i,
-          dragging: V,
+          dragging: M,
           handleDragStart: B,
-          inputElement: T,
-          value: D
-        } = P, M = s(
-          n ?? i,
+          inputElement: P,
+          value: C
+        } = k, F = t(
+          s ?? i,
           l,
-          r
-        ), C = s(i, l, r), z = x || E(n ?? D, f) || "default", S = Math.min((C - 0.5) * 270, 225);
-        return /* @__PURE__ */ j(
+          a
+        ), w = t(i, l, a), z = K || $(s ?? C, N) || "default", S = Math.min((w - 0.5) * 270, 225);
+        return /* @__PURE__ */ o(
           "div",
           {
-            className: e([
-              o.knob,
-              o["color__" + z],
-              c && o.bipolar,
-              y,
-              K(a)
+            className: j([
+              "Knob",
+              `Knob--color--${z}`,
+              r && "Knob--bipolar",
+              x,
+              E(n)
             ]),
-            ...I({
+            ...T({
               style: {
-                fontSize: w + "em",
-                ...N
+                fontSize: `${y}em`,
+                ...V
               },
-              ...a
+              ...n
             }),
             onMouseDown: B,
             children: [
-              /* @__PURE__ */ _("div", { className: o.circle, children: /* @__PURE__ */ _(
+              /* @__PURE__ */ e("div", { className: "Knob__circle", children: /* @__PURE__ */ e(
                 "div",
                 {
-                  className: o.cursorBox,
+                  className: "Knob__cursorBox",
                   style: {
                     transform: `rotate(${S}deg)`
                   },
-                  children: /* @__PURE__ */ _("div", { className: o.cursor })
+                  children: /* @__PURE__ */ e("div", { className: "Knob__cursor" })
                 }
               ) }),
-              V && /* @__PURE__ */ _("div", { className: o.popupValue, children: F }),
-              /* @__PURE__ */ _(
+              M && /* @__PURE__ */ e("div", { className: "Knob__popupValue", children: D }),
+              /* @__PURE__ */ o(
                 "svg",
                 {
-                  className: e([o.ring, o.ringTrackPivot]),
+                  className: "Knob__ring Knob__ringTrackPivot",
                   viewBox: "0 0 100 100",
-                  children: /* @__PURE__ */ _("circle", { className: "Knob__ringTrack", cx: "50", cy: "50", r: "50" })
+                  children: [
+                    /* @__PURE__ */ e("circle", { className: "Knob__ringTrack", cx: "50", cy: "50", r: "50" }),
+                    /* @__PURE__ */ e("title", { children: "track" })
+                  ]
                 }
               ),
-              /* @__PURE__ */ _(
+              /* @__PURE__ */ o(
                 "svg",
                 {
-                  className: e([o.ring, o.ringFillPivot]),
+                  className: "Knob__ring Knob__ringFillPivot",
                   viewBox: "0 0 100 100",
-                  children: /* @__PURE__ */ _(
-                    "circle",
-                    {
-                      className: o.ringFill,
-                      style: {
-                        strokeDashoffset: Math.max(
-                          ((c ? 2.75 : 2) - M * 1.5) * Math.PI * 50,
-                          0
-                        )
-                      },
-                      cx: "50",
-                      cy: "50",
-                      r: "50"
-                    }
-                  )
+                  children: [
+                    /* @__PURE__ */ e("title", { children: "fill" }),
+                    /* @__PURE__ */ e(
+                      "circle",
+                      {
+                        className: "Knob__ringFill",
+                        style: {
+                          strokeDashoffset: Math.max(
+                            ((r ? 2.75 : 2) - F * 1.5) * Math.PI * 50,
+                            0
+                          )
+                        },
+                        cx: "50",
+                        cy: "50",
+                        r: "50"
+                      }
+                    )
+                  ]
                 }
               ),
-              T
+              P
             ]
           }
         );
@@ -158,5 +132,5 @@ function xo(t) {
   );
 }
 export {
-  xo as Knob
+  H as Knob
 };

package/dist/components/LabeledControls.d.ts

@@ -1,5 +1,4 @@
 import { FlexProps } from './Flex';
-
 export declare function LabeledControls(props: FlexProps): import("react/jsx-runtime").JSX.Element;
 export declare namespace LabeledControls {
     var Item: typeof LabeledControlsItem;

package/dist/components/LabeledList.d.ts

@@ -1,6 +1,5 @@
 import { PropsWithChildren, ReactNode } from 'react';
 import { BooleanLike } from '../common/react';
-
 export declare function LabeledList(props: PropsWithChildren): import("react/jsx-runtime").JSX.Element;
 export declare namespace LabeledList {
     var Item: typeof LabeledListItem;

package/dist/components/LabeledList.js

@@ -1,82 +1,75 @@
-import { jsx as l, jsxs as b } from "react/jsx-runtime";
-import { classes as i } from "../common/react.js";
-import { Box as r, unit as g } from "./Box.js";
+import { jsx as e, jsxs as d } from "react/jsx-runtime";
+import { classes as c } from "../common/react.js";
+import { Box as s, unit as g } from "./Box.js";
 import { Divider as x } from "./Divider.js";
 import { Tooltip as N } from "./Tooltip.js";
-import '../assets/LabeledList.css';const v = "_labeledList_pb6nb_9", y = "_row_pb6nb_20", B = "_cell_pb6nb_24", D = "_label__nowrap_pb6nb_36", j = "_buttons_pb6nb_42", o = {
-  labeledList: v,
-  row: y,
-  cell: B,
-  label__nowrap: D,
-  buttons: j
-};
-function p(e) {
-  const { children: t } = e;
-  return /* @__PURE__ */ l("table", { className: "LabeledList", children: /* @__PURE__ */ l("tbody", { children: t }) });
+function b(l) {
+  const { children: t } = l;
+  return /* @__PURE__ */ e("table", { className: "LabeledList", children: /* @__PURE__ */ e("tbody", { children: t }) });
 }
-function z(e) {
+function v(l) {
   const {
     className: t,
-    label: s,
-    labelColor: _ = "label",
+    label: a,
+    labelColor: L = "label",
     labelWrap: m,
-    color: L,
-    textAlign: h,
-    buttons: a,
-    content: f,
-    children: u,
-    verticalAlign: c = "baseline",
-    tooltip: d
-  } = e;
-  let n;
-  s && (n = s, typeof s == "string" && (n += ":")), d !== void 0 && (n = /* @__PURE__ */ l(N, { content: d, children: /* @__PURE__ */ l(
-    r,
+    color: p,
+    textAlign: _,
+    buttons: o,
+    content: h,
+    children: f,
+    verticalAlign: r = "baseline",
+    tooltip: n
+  } = l;
+  let i;
+  a && (i = a, typeof a == "string" && (i += ":")), n !== void 0 && (i = /* @__PURE__ */ e(N, { content: n, children: /* @__PURE__ */ e(
+    s,
     {
       as: "span",
       style: {
         borderBottom: "2px dotted rgba(255, 255, 255, 0.8)"
       },
-      children: n
+      children: i
     }
   ) }));
-  const w = /* @__PURE__ */ l(
-    r,
+  const u = /* @__PURE__ */ e(
+    s,
     {
       as: "td",
-      color: _,
-      className: i([
-        o.cell,
+      color: L,
+      className: c([
+        "LabeledList__cell",
         // Kinda flipped because we want nowrap as default. Cleaner CSS this way though.
-        !m && o.label__nowrap
+        !m && "LabeledList__label--nowrap"
       ]),
-      verticalAlign: c,
-      children: n
+      verticalAlign: r,
+      children: i
     }
   );
-  return /* @__PURE__ */ b("tr", { className: i([o.row, t]), children: [
-    w,
-    /* @__PURE__ */ b(
-      r,
+  return /* @__PURE__ */ d("tr", { className: c(["LabeledList__row", t]), children: [
+    u,
+    /* @__PURE__ */ d(
+      s,
       {
         as: "td",
-        color: L,
-        textAlign: h,
-        className: o.cell,
-        colSpan: a ? void 0 : 2,
-        verticalAlign: c,
+        color: p,
+        textAlign: _,
+        className: "LabeledList__cell",
+        colSpan: o ? void 0 : 2,
+        verticalAlign: r,
         children: [
-          f,
-          u
+          h,
+          f
         ]
       }
     ),
-    a && /* @__PURE__ */ l("td", { className: i([o.cell, o.buttons]), children: a })
+    o && /* @__PURE__ */ e("td", { className: "LabeledList__cell LabeledList__buttons", children: o })
   ] });
 }
-p.Item = z;
-function A(e) {
-  const t = e.size ? g(Math.max(0, e.size - 1)) : 0;
-  return /* @__PURE__ */ l("tr", { className: "LabeledList__row", children: /* @__PURE__ */ l(
+b.Item = v;
+function y(l) {
+  const t = l.size ? g(Math.max(0, l.size - 1)) : 0;
+  return /* @__PURE__ */ e("tr", { className: "LabeledList__row", children: /* @__PURE__ */ e(
     "td",
     {
       colSpan: 3,
@@ -84,11 +77,11 @@ function A(e) {
         paddingTop: t,
         paddingBottom: t
       },
-      children: /* @__PURE__ */ l(x, {})
+      children: /* @__PURE__ */ e(x, {})
     }
   ) });
 }
-p.Divider = A;
+b.Divider = y;
 export {
-  p as LabeledList
+  b as LabeledList
 };

package/dist/components/MenuBar.d.ts

@@ -1,5 +1,4 @@
 import { ReactNode } from 'react';
-
 type MenuBarItemProps = {
     children: any;
     className?: string;