tgui-core 1.1.23 → 1.1.24

package/dist/Section.module-qhQWhlUX.js

@@ -0,0 +1,18 @@
+import './assets/Section.css';const t = "_section_10c68_17", _ = "_title_10c68_28", n = "_titleText_10c68_34", o = "_buttons_10c68_40", c = "_rest_10c68_47", e = "_content_10c68_51", s = "_fitted_10c68_55", l = "_fill_10c68_59", i = "_scrollable_10c68_73", r = "_scrollableHorizontal_10c68_90", a = "_section__flex_10c68_125", b = "_content__noTopPadding_10c68_135", d = "_content__stretchContents_10c68_139", f = {
+  section: t,
+  title: _,
+  titleText: n,
+  buttons: o,
+  rest: c,
+  content: e,
+  fitted: s,
+  fill: l,
+  scrollable: i,
+  scrollableHorizontal: r,
+  section__flex: a,
+  content__noTopPadding: b,
+  content__stretchContents: d
+};
+export {
+  f as s
+};

package/dist/assets/Section.css

@@ -1 +1 @@
-._section_1awt0_17{position:relative;margin-bottom:.5em;background-color:#191919;background-color:#00000054;box-sizing:border-box}._section_1awt0_17:last-child{margin-bottom:0}._title_1awt0_28{position:relative;padding:.5em;border-bottom:.1666666667em solid #4972a1}._titleText_1awt0_34{font-size:1.1666666667em;font-weight:700;color:#fff}._buttons_1awt0_40{position:absolute;display:inline-block;right:.5em;margin-top:-.0833333333em}._rest_1awt0_47{position:relative}._content_1awt0_51{padding:.66em .5em}._fitted_1awt0_55>._rest_1awt0_47>._content_1awt0_51{padding:0}._fill_1awt0_59{display:flex;flex-direction:column;height:100%}._fill_1awt0_59>._rest_1awt0_47{flex-grow:1}._fill_1awt0_59>._rest_1awt0_47>._content_1awt0_51{height:100%}._fill_1awt0_59._scrollable_1awt0_73>._rest_1awt0_47>._content_1awt0_51{position:absolute;top:0;left:0;right:0;bottom:0}._scrollable_1awt0_73{overflow-x:hidden;overflow-y:hidden}._scrollable_1awt0_73>._rest_1awt0_47>._content_1awt0_51{overflow-y:scroll;overflow-x:hidden}._scrollableHorizontal_1awt0_90{overflow-x:hidden;overflow-y:hidden}._scrollableHorizontal_1awt0_90>._rest_1awt0_47>._content_1awt0_51{overflow-y:hidden;overflow-x:scroll}._scrollable_1awt0_73._scrollableHorizontal_1awt0_90{overflow-x:hidden;overflow-y:hidden}._scrollable_1awt0_73._scrollableHorizontal_1awt0_90>._rest_1awt0_47>._content_1awt0_51{overflow-y:scroll;overflow-x:scroll}._section_1awt0_17 ._section_1awt0_17{background-color:transparent;margin-left:-.5em;margin-right:-.5em}._section_1awt0_17 ._section_1awt0_17:first-child{margin-top:-.5em}._section_1awt0_17 ._section_1awt0_17 ._titleText_1awt0_34{font-size:1.0833333333em}._section_1awt0_17 ._section_1awt0_17 ._section_1awt0_17 ._titleText_1awt0_34{font-size:1em}
+._section_10c68_17{position:relative;margin-bottom:.5em;background-color:#191919;background-color:#00000054;box-sizing:border-box}._section_10c68_17:last-child{margin-bottom:0}._title_10c68_28{position:relative;padding:.5em;border-bottom:.1666666667em solid #4972a1}._titleText_10c68_34{font-size:1.1666666667em;font-weight:700;color:#fff}._buttons_10c68_40{position:absolute;display:inline-block;right:.5em;margin-top:-.0833333333em}._rest_10c68_47{position:relative}._content_10c68_51{padding:.66em .5em}._fitted_10c68_55>._rest_10c68_47>._content_10c68_51{padding:0}._fill_10c68_59{display:flex;flex-direction:column;height:100%}._fill_10c68_59>._rest_10c68_47{flex-grow:1}._fill_10c68_59>._rest_10c68_47>._content_10c68_51{height:100%}._fill_10c68_59._scrollable_10c68_73>._rest_10c68_47>._content_10c68_51{position:absolute;top:0;left:0;right:0;bottom:0}._scrollable_10c68_73{overflow-x:hidden;overflow-y:hidden}._scrollable_10c68_73>._rest_10c68_47>._content_10c68_51{overflow-y:scroll;overflow-x:hidden}._scrollableHorizontal_10c68_90{overflow-x:hidden;overflow-y:hidden}._scrollableHorizontal_10c68_90>._rest_10c68_47>._content_10c68_51{overflow-y:hidden;overflow-x:scroll}._scrollable_10c68_73._scrollableHorizontal_10c68_90{overflow-x:hidden;overflow-y:hidden}._scrollable_10c68_73._scrollableHorizontal_10c68_90>._rest_10c68_47>._content_10c68_51{overflow-y:scroll;overflow-x:scroll}._section_10c68_17 ._section_10c68_17{background-color:transparent;margin-left:-.5em;margin-right:-.5em}._section_10c68_17 ._section_10c68_17:first-child{margin-top:-.5em}._section_10c68_17 ._section_10c68_17 ._titleText_10c68_34{font-size:1.0833333333em}._section_10c68_17 ._section_10c68_17 ._section_10c68_17 ._titleText_10c68_34{font-size:1em}._section__flex_10c68_125{display:flex;flex-flow:column}._section__flex_10c68_125 ._content_10c68_51{overflow:auto;flex-grow:1}._content__noTopPadding_10c68_135{padding-top:0}._content__stretchContents_10c68_139{height:calc(100% - 3rem)}

package/dist/components/Button.d.ts

@@ -40,6 +40,8 @@ type Props = Partial<{
     iconPosition: string;
     /** Icon rotation */
     iconRotation: number;
+    /** Icon size */
+    iconSize: number;
     /** Makes the icon spin */
     iconSpin: BooleanLike;
     /** Called when element is clicked */

package/dist/components/Button.js

@@ -1,267 +1,270 @@
-import { jsx as l, jsxs as E, Fragment as S } from "react/jsx-runtime";
-import { useState as F, createRef as K, useEffect as M, useRef as V } from "react";
-import { KEY as I } from "../common/keys.js";
-import { classes as R } from "../common/react.js";
-import { computeBoxClassName as j, computeBoxProps as q, Box as O } from "./Box.js";
-import { Icon as D } from "./Icon.js";
-import { Tooltip as P } from "./Tooltip.js";
-import '../assets/Button.css';const T = "_button_433yx_17", L = "_fa_433yx_34", Y = "_fas_433yx_35", z = "_far_433yx_36", G = "_dropdown_433yx_43", H = "_ellipsis_433yx_49", J = "_fluid_433yx_54", Q = "_circular_433yx_60", U = "_compact_433yx_64", W = "_color__black_433yx_69", X = "_color__white_433yx_82", Z = "_color__red_433yx_95", $ = "_color__orange_433yx_108", oo = "_color__yellow_433yx_121", to = "_color__olive_433yx_134", _o = "_color__green_433yx_147", no = "_color__teal_433yx_160", eo = "_color__blue_433yx_173", lo = "_color__violet_433yx_186", co = "_color__purple_433yx_199", ro = "_color__pink_433yx_212", io = "_color__brown_433yx_225", so = "_color__grey_433yx_238", ao = "_color__good_433yx_264", uo = "_color__average_433yx_277", fo = "_color__bad_433yx_290", po = "_color__label_433yx_303", yo = "_color__default_433yx_316", xo = "_color__caution_433yx_329", mo = "_color__danger_433yx_342", go = "_color__transparent_433yx_355", bo = "_disabled_433yx_370", ho = "_selected_433yx_374", Co = "_flex_433yx_387", ko = "_flex__fluid_433yx_392", vo = "_verticalAlignContent__top_433yx_396", wo = "_verticalAlignContent__middle_433yx_400", Ao = "_verticalAlignContent__bottom_433yx_404", Bo = "_content_433yx_408", Io = "_textMargin_433yx_413", _ = {
-  button: T,
-  fa: L,
-  fas: Y,
-  far: z,
-  dropdown: G,
-  ellipsis: H,
-  fluid: J,
-  circular: Q,
-  compact: U,
-  color__black: W,
-  color__white: X,
-  color__red: Z,
-  color__orange: $,
-  color__yellow: oo,
-  color__olive: to,
-  color__green: _o,
-  color__teal: no,
-  color__blue: eo,
-  color__violet: lo,
-  color__purple: co,
-  color__pink: ro,
-  color__brown: io,
-  color__grey: so,
+import { jsx as l, jsxs as P, Fragment as M } from "react/jsx-runtime";
+import { useState as S, createRef as V, useEffect as z, useRef as j } from "react";
+import { KEY as R, isEscape as E } from "../common/keys.js";
+import { classes as D } from "../common/react.js";
+import { computeBoxClassName as q, computeBoxProps as O, Box as T } from "./Box.js";
+import { Icon as F } from "./Icon.js";
+import { Tooltip as K } from "./Tooltip.js";
+import '../assets/Button.css';const L = "_button_433yx_17", Y = "_fa_433yx_34", G = "_fas_433yx_35", H = "_far_433yx_36", J = "_dropdown_433yx_43", Q = "_ellipsis_433yx_49", U = "_fluid_433yx_54", W = "_circular_433yx_60", X = "_compact_433yx_64", Z = "_color__black_433yx_69", $ = "_color__white_433yx_82", oo = "_color__red_433yx_95", to = "_color__orange_433yx_108", _o = "_color__yellow_433yx_121", no = "_color__olive_433yx_134", eo = "_color__green_433yx_147", lo = "_color__teal_433yx_160", co = "_color__blue_433yx_173", ro = "_color__violet_433yx_186", io = "_color__purple_433yx_199", so = "_color__pink_433yx_212", ao = "_color__brown_433yx_225", uo = "_color__grey_433yx_238", fo = "_color__good_433yx_264", po = "_color__average_433yx_277", yo = "_color__bad_433yx_290", xo = "_color__label_433yx_303", mo = "_color__default_433yx_316", go = "_color__caution_433yx_329", bo = "_color__danger_433yx_342", ho = "_color__transparent_433yx_355", Co = "_disabled_433yx_370", ko = "_selected_433yx_374", vo = "_flex_433yx_387", wo = "_flex__fluid_433yx_392", Ao = "_verticalAlignContent__top_433yx_396", Bo = "_verticalAlignContent__middle_433yx_400", Io = "_verticalAlignContent__bottom_433yx_404", No = "_content_433yx_408", Ro = "_textMargin_433yx_413", _ = {
+  button: L,
+  fa: Y,
+  fas: G,
+  far: H,
+  dropdown: J,
+  ellipsis: Q,
+  fluid: U,
+  circular: W,
+  compact: X,
+  color__black: Z,
+  color__white: $,
+  color__red: oo,
+  color__orange: to,
+  color__yellow: _o,
+  color__olive: no,
+  color__green: eo,
+  color__teal: lo,
+  color__blue: co,
+  color__violet: ro,
+  color__purple: io,
+  color__pink: so,
+  color__brown: ao,
+  color__grey: uo,
   "color__light-grey": "_color__light-grey_433yx_251",
-  color__good: ao,
-  color__average: uo,
-  color__bad: fo,
-  color__label: po,
-  color__default: yo,
-  color__caution: xo,
-  color__danger: mo,
-  color__transparent: go,
-  disabled: bo,
-  selected: ho,
-  flex: Co,
-  flex__fluid: ko,
-  verticalAlignContent__top: vo,
-  verticalAlignContent__middle: wo,
-  verticalAlignContent__bottom: Ao,
-  content: Bo,
-  textMargin: Io
+  color__good: fo,
+  color__average: po,
+  color__bad: yo,
+  color__label: xo,
+  color__default: mo,
+  color__caution: go,
+  color__danger: bo,
+  color__transparent: ho,
+  disabled: Co,
+  selected: ko,
+  flex: vo,
+  flex__fluid: wo,
+  verticalAlignContent__top: Ao,
+  verticalAlignContent__middle: Bo,
+  verticalAlignContent__bottom: Io,
+  content: No,
+  textMargin: Ro
 };
-function g(u) {
+function b(a) {
   const {
-    captureKeys: s = !0,
-    children: a,
+    captureKeys: i = !0,
+    children: s,
     circular: y,
-    className: f,
-    color: i,
-    compact: b,
+    className: p,
+    color: r,
+    compact: h,
     content: x,
     disabled: o,
     ellipsis: c,
     fluid: n,
     icon: e,
-    iconColor: d,
-    iconPosition: v,
-    iconRotation: w,
-    iconSpin: N,
-    onClick: h,
+    iconColor: u,
+    iconPosition: w,
+    iconRotation: A,
+    iconSize: B,
+    iconSpin: I,
+    onClick: d,
     selected: C,
-    tooltip: m,
-    tooltipPosition: A,
-    verticalAlignContent: k,
-    ...B
-  } = u, p = x || a;
-  let t = /* @__PURE__ */ l(
+    tooltip: k,
+    tooltipPosition: N,
+    verticalAlignContent: m,
+    ...v
+  } = a, t = x || s;
+  let g = /* @__PURE__ */ l(
     "div",
     {
-      className: R([
+      className: D([
         _.button,
         n && _.fluid,
         o && _.disabled,
         C && _.selected,
         y && _.circular,
-        b && _.compact,
-        k && _.flex,
-        k && n && _.flex__fluid,
-        k && _["verticalAlignContent__" + k],
-        i && typeof i == "string" ? _["color__" + i] : _.color__default,
-        f,
-        j(B)
+        h && _.compact,
+        m && _.flex,
+        m && n && _.flex__fluid,
+        m && _["verticalAlignContent__" + m],
+        r && typeof r == "string" ? _["color__" + r] : _.color__default,
+        p,
+        q(v)
       ]),
       tabIndex: o ? void 0 : 0,
-      onClick: (r) => {
-        !o && h && h(r);
+      onClick: (f) => {
+        !o && d && d(f);
       },
-      onKeyDown: (r) => {
-        if (s) {
-          if (r.key === I.Space || r.key === I.Enter) {
-            r.preventDefault(), !o && h && h(r);
+      onKeyDown: (f) => {
+        if (i) {
+          if (f.key === R.Space || f.key === R.Enter) {
+            f.preventDefault(), !o && d && d(f);
             return;
           }
-          r.key === I.Escape && r.preventDefault();
+          E(f.key) && f.preventDefault();
         }
       },
-      ...q(B),
-      children: /* @__PURE__ */ E("div", { className: _.content, children: [
-        e && v !== "right" && /* @__PURE__ */ l(
-          D,
+      ...O(v),
+      children: /* @__PURE__ */ P("div", { className: _.content, children: [
+        e && w !== "right" && /* @__PURE__ */ l(
+          F,
           {
-            mr: p ? 1 : 0,
+            mr: t ? 1 : 0,
             name: e,
-            color: d,
-            rotation: w,
-            spin: N
+            color: u,
+            rotation: A,
+            size: B,
+            spin: I
           }
         ),
         c ? /* @__PURE__ */ l(
           "span",
           {
-            className: R([_.ellipsis, e && _.textMargin]),
-            children: p
+            className: D([_.ellipsis, e && _.textMargin]),
+            children: t
           }
-        ) : p,
-        e && v === "right" && /* @__PURE__ */ l(
-          D,
+        ) : t,
+        e && w === "right" && /* @__PURE__ */ l(
+          F,
           {
-            ml: p ? 1 : 0,
+            ml: t ? 1 : 0,
             name: e,
-            color: d,
-            rotation: w,
-            spin: N
+            color: u,
+            rotation: A,
+            size: B,
+            spin: I
           }
         )
       ] })
     }
   );
-  return m && (t = /* @__PURE__ */ l(P, { content: m, position: A, children: t })), t;
+  return k && (g = /* @__PURE__ */ l(K, { content: k, position: N, children: g })), g;
 }
-function No(u) {
-  const { checked: s, ...a } = u;
+function Do(a) {
+  const { checked: i, ...s } = a;
   return /* @__PURE__ */ l(
-    g,
+    b,
     {
       color: "transparent",
-      icon: s ? "check-square-o" : "square-o",
-      selected: s,
-      ...a
+      icon: i ? "check-square-o" : "square-o",
+      selected: i,
+      ...s
     }
   );
 }
-g.Checkbox = No;
-function Ro(u) {
+b.Checkbox = Do;
+function Fo(a) {
   const {
-    children: s,
-    color: a,
+    children: i,
+    color: s,
     confirmColor: y = "bad",
-    confirmContent: f = "Confirm?",
-    confirmIcon: i,
-    ellipsis: b = !0,
+    confirmContent: p = "Confirm?",
+    confirmIcon: r,
+    ellipsis: h = !0,
     icon: x,
     onClick: o,
     ...c
-  } = u, [n, e] = F(!1);
-  function d(v) {
+  } = a, [n, e] = S(!1);
+  function u(w) {
     if (!n) {
       e(!0);
       return;
     }
-    o == null || o(v), e(!1);
+    o == null || o(w), e(!1);
   }
   return /* @__PURE__ */ l(
-    g,
+    b,
     {
-      icon: n ? i : x,
-      color: n ? y : a,
-      onClick: d,
+      icon: n ? r : x,
+      color: n ? y : s,
+      onClick: u,
       ...c,
-      children: n ? f : s
+      children: n ? p : i
     }
   );
 }
-g.Confirm = Ro;
-function Do(u) {
+b.Confirm = Fo;
+function Po(a) {
   const {
-    children: s,
-    color: a = "default",
+    children: i,
+    color: s = "default",
     content: y,
-    currentValue: f,
-    defaultValue: i,
-    disabled: b,
+    currentValue: p,
+    defaultValue: r,
+    disabled: h,
     fluid: x,
     icon: o,
     iconRotation: c,
     iconSpin: n,
     maxLength: e,
-    onCommit: d = () => null,
-    placeholder: v,
-    tooltip: w,
-    tooltipPosition: N,
-    ...h
-  } = u, [C, m] = F(!1), A = K(), k = y || s;
-  function B(t) {
-    const r = A.current;
-    if (!r) return;
-    r.value !== "" ? d(t, r.value) : i && d(t, i);
+    onCommit: u = () => null,
+    placeholder: w,
+    tooltip: A,
+    tooltipPosition: B,
+    ...I
+  } = a, [d, C] = S(!1), k = V(), N = y || i;
+  function m(t) {
+    const g = k.current;
+    if (!g) return;
+    g.value !== "" ? u(t, g.value) : r && u(t, r);
   }
-  M(() => {
-    const t = A.current;
-    if (t && C) {
-      t.value = f || "";
+  z(() => {
+    const t = k.current;
+    if (t && d) {
+      t.value = p || "";
       try {
         t.focus(), t.select();
       } catch {
       }
     }
-  }, [C, f]);
-  let p = /* @__PURE__ */ E(
-    O,
+  }, [d, p]);
+  let v = /* @__PURE__ */ P(
+    T,
     {
-      className: R([
+      className: D([
         _.button,
         x && _.fluid,
-        _["color__" + a]
+        _["color__" + s]
       ]),
-      ...h,
-      onClick: () => m(!0),
+      ...I,
+      onClick: () => C(!0),
       children: [
-        o && /* @__PURE__ */ l(D, { name: o, rotation: c, spin: n }),
-        /* @__PURE__ */ l("div", { children: k }),
+        o && /* @__PURE__ */ l(F, { name: o, rotation: c, spin: n }),
+        /* @__PURE__ */ l("div", { children: N }),
         /* @__PURE__ */ l(
           "input",
           {
-            disabled: !!b,
-            ref: A,
+            disabled: !!h,
+            ref: k,
             className: "NumberInput__input",
             style: {
-              display: C ? "" : "none",
+              display: d ? "" : "none",
               textAlign: "left"
             },
             onBlur: (t) => {
-              C && (m(!1), B(t));
+              d && (C(!1), m(t));
             },
             onKeyDown: (t) => {
-              if (t.key === I.Enter) {
-                m(!1), B(t);
+              if (t.key === R.Enter) {
+                C(!1), m(t);
                 return;
               }
-              t.key === I.Escape && m(!1);
+              E(t.key) && C(!1);
             }
           }
         )
       ]
     }
   );
-  return w && (p = /* @__PURE__ */ l(P, { content: w, position: N, children: p })), p;
+  return A && (v = /* @__PURE__ */ l(K, { content: A, position: B, children: v })), v;
 }
-g.Input = Do;
-function Eo(u) {
-  const { accept: s, multiple: a, onSelectFiles: y, ...f } = u, i = V(null);
-  async function b(o) {
+b.Input = Po;
+function So(a) {
+  const { accept: i, multiple: s, onSelectFiles: y, ...p } = a, r = j(null);
+  async function h(o) {
     const c = Array.from(o).map((n) => {
       const e = new FileReader();
-      return new Promise((d) => {
-        e.onload = () => d(e.result), e.readAsText(n);
+      return new Promise((u) => {
+        e.onload = () => u(e.result), e.readAsText(n);
       });
     });
     return await Promise.all(c);
@@ -269,30 +272,30 @@ function Eo(u) {
   async function x(o) {
     const c = o.target.files;
     if (c != null && c.length) {
-      const n = await b(c);
-      y(a ? n : n[0]);
+      const n = await h(c);
+      y(s ? n : n[0]);
     }
   }
-  return /* @__PURE__ */ E(S, { children: [
-    /* @__PURE__ */ l(g, { onClick: () => {
+  return /* @__PURE__ */ P(M, { children: [
+    /* @__PURE__ */ l(b, { onClick: () => {
       var o;
-      return (o = i.current) == null ? void 0 : o.click();
-    }, ...f }),
+      return (o = r.current) == null ? void 0 : o.click();
+    }, ...p }),
     /* @__PURE__ */ l(
       "input",
       {
         hidden: !0,
         type: "file",
-        ref: i,
-        accept: s,
-        multiple: a,
+        ref: r,
+        accept: i,
+        multiple: s,
         onChange: x
       }
     )
   ] });
 }
-g.File = Eo;
+b.File = So;
 export {
-  g as Button,
-  No as ButtonCheckbox
+  b as Button,
+  Do as ButtonCheckbox
 };

package/dist/components/Collapsible.d.ts

@@ -4,6 +4,8 @@ import { BoxProps } from './Box';
 type Props = Partial<{
     /** Buttons or other content to render inline with the button */
     buttons: ReactNode;
+    /** Top margin of the child nodes, defaulted to 1 */
+    child_mt: number;
     /** Icon to display with the collapsible */
     icon: string;
     /** Whether the collapsible is open */

package/dist/components/Collapsible.js

@@ -1,27 +1,35 @@
-import { jsxs as i, jsx as e } from "react/jsx-runtime";
-import { useState as h } from "react";
-import { Box as r } from "./Box.js";
-import { Button as p } from "./Button.js";
-function v(o) {
-  const { children: t, color: s, title: a, buttons: n, icon: c, ...m } = o, [l, d] = h(o.open);
-  return /* @__PURE__ */ i(r, { mb: 1, children: [
-    /* @__PURE__ */ i("div", { className: "Table", children: [
+import { jsxs as n, jsx as e } from "react/jsx-runtime";
+import { useState as p } from "react";
+import { Box as t } from "./Box.js";
+import { Button as b } from "./Button.js";
+function x(o) {
+  const {
+    children: r,
+    child_mt: s = 1,
+    color: m,
+    title: a,
+    buttons: c,
+    icon: i,
+    ...d
+  } = o, [l, h] = p(o.open);
+  return /* @__PURE__ */ n(t, { mb: 1, children: [
+    /* @__PURE__ */ n("div", { className: "Table", children: [
       /* @__PURE__ */ e("div", { className: "Table__cell", children: /* @__PURE__ */ e(
-        p,
+        b,
         {
           fluid: !0,
-          color: s,
-          icon: c || (l ? "chevron-down" : "chevron-right"),
-          onClick: () => d(!l),
-          ...m,
+          color: m,
+          icon: i || (l ? "chevron-down" : "chevron-right"),
+          onClick: () => h(!l),
+          ...d,
           children: a
         }
       ) }),
-      n && /* @__PURE__ */ e("div", { className: "Table__cell Table__cell--collapsing", children: n })
+      c && /* @__PURE__ */ e("div", { className: "Table__cell Table__cell--collapsing", children: c })
     ] }),
-    l && /* @__PURE__ */ e(r, { mt: 1, children: t })
+    l && /* @__PURE__ */ e(t, { mt: s, children: r })
   ] });
 }
 export {
-  v as Collapsible
+  x as Collapsible
 };