tgui-core 1.2.0 → 1.3.1

package/dist/components/Stack.js

@@ -1,67 +1,57 @@
-import { jsx as l } from "react/jsx-runtime";
-import { classes as o } from "../common/react.js";
-import { computeBoxClassName as _ } from "./Box.js";
-import { computeFlexClassName as f, computeFlexProps as w, computeFlexItemProps as n } from "./Flex.js";
-import '../assets/Stack.css';const h = "_fill_wrul1_9", p = "_horizontal_wrul1_13", z = "_item_wrul1_13", x = "_vertical_wrul1_20", N = "_reverse_wrul1_27", b = "_reverse__vertical_wrul1_35", S = "_zebra_wrul1_43", k = "_divider_wrul1_47", F = "_divider__hidden_wrul1_47", e = {
-  fill: h,
-  horizontal: p,
-  item: z,
-  vertical: x,
-  reverse: N,
-  reverse__vertical: b,
-  zebra: S,
-  divider: k,
-  divider__hidden: F
-};
-function a(t) {
-  const { className: s, vertical: r, fill: i, reverse: c, zebra: d, ...v } = t, m = r ? "column" : "row", u = c ? "-reverse" : "";
-  return /* @__PURE__ */ l(
+import { jsx as i } from "react/jsx-runtime";
+import { classes as a } from "../common/react.js";
+import { computeBoxClassName as o } from "./Box.js";
+import { computeFlexClassName as k, computeFlexProps 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(
     "div",
     {
-      className: o([
-        i && e.fill,
-        r ? e.vertical : e.horizontal,
-        d && e.zebra,
-        c && e[`reverse${r ? "__vertical" : ""}`],
-        s,
-        f(t)
+      className: a([
+        "Stack",
+        t && "Stack--fill",
+        e ? "Stack--vertical" : "Stack--horizontal",
+        l && "Stack--zebra",
+        s && `Stack--reverse${e ? "--vertical" : ""}`,
+        c,
+        k(r)
       ]),
-      ...w({
-        direction: `${m}${u}`,
-        ...v
+      ...v({
+        direction: `${f}${S}`,
+        ...d
       })
     }
   );
 }
-function I(t) {
-  const { className: s, innerRef: r, ...i } = t;
-  return /* @__PURE__ */ l(
+function u(r) {
+  const { className: c, innerRef: e, ...t } = r;
+  return /* @__PURE__ */ i(
     "div",
     {
-      className: o([e.item, s, _(i)]),
-      ref: r,
-      ...n(i)
+      className: a(["Stack__item", c, o(t)]),
+      ref: e,
+      ...m(t)
     }
   );
 }
-a.Item = I;
-function P(t) {
-  const { className: s, hidden: r, ...i } = t;
-  return /* @__PURE__ */ l(
+n.Item = u;
+function p(r) {
+  const { className: c, hidden: e, ...t } = r;
+  return /* @__PURE__ */ i(
     "div",
     {
-      className: o([
-        e.item,
-        e.divider,
-        r && e.divider__hidden,
-        s,
-        _(i)
+      className: a([
+        "Stack__item",
+        "Stack__divider",
+        e && "Stack__divider--hidden",
+        c,
+        o(t)
       ]),
-      ...n(i)
+      ...m(t)
     }
   );
 }
-a.Divider = P;
+n.Divider = p;
 export {
-  a as Stack
+  n as Stack
 };

package/dist/components/StyleableSection.d.ts

@@ -1,5 +1,4 @@
 import { PropsWithChildren, ReactNode } from 'react';
-
 type Props = Partial<{
     style: Record<string, any>;
     textStyle: Record<string, any>;

package/dist/components/StyleableSection.js

@@ -1,16 +1,16 @@
-import { jsxs as s, jsx as l } from "react/jsx-runtime";
-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;
-  return /* @__PURE__ */ s(e, { style: m, children: [
-    /* @__PURE__ */ s(e, { className: t.title, style: c, children: [
-      /* @__PURE__ */ l(e, { className: t.titleText, style: a, children: o }),
-      /* @__PURE__ */ l("div", { className: t.buttons, children: n })
+import { jsxs as l, jsx as e } from "react/jsx-runtime";
+import { Box as t } from "./Box.js";
+function m(i) {
+  const { children: c, titleStyle: n, titleSubtext: s, title: o, textStyle: r, style: a } = i;
+  return /* @__PURE__ */ l(t, { style: a, children: [
+    /* @__PURE__ */ l(t, { className: "Section__title", style: n, children: [
+      /* @__PURE__ */ e(t, { className: "Section__titleText", style: r, children: o }),
+      /* @__PURE__ */ e("div", { className: "Section__buttons", children: s }),
+      " "
     ] }),
-    /* @__PURE__ */ l(e, { className: t.rest, children: /* @__PURE__ */ l(e, { className: t.content, children: r }) })
+    /* @__PURE__ */ e(t, { className: "Section__rest", children: /* @__PURE__ */ e(t, { className: "Section__content", children: c }) })
   ] });
 }
 export {
-  h as StyleableSection
+  m as StyleableSection
 };

package/dist/components/Table.d.ts

@@ -1,5 +1,4 @@
 import { BoxProps } from './Box';
-
 type Props = Partial<{
     /** Collapses table to the smallest possible size. */
     collapsing: boolean;

package/dist/components/Table.js

@@ -1,67 +1,58 @@
-import { jsx as s } from "react/jsx-runtime";
-import { classes as t } from "../common/react.js";
-import { computeBoxClassName as n, computeBoxProps as r } from "./Box.js";
-import '../assets/Table.css';const m = "_table_1hctn_5", d = "_collapsing_1hctn_13", p = "_row_1hctn_17", g = "_cell_1hctn_21", w = "_row__header_1hctn_32", b = "_cell__header_1hctn_33", u = "_cell__collapsing_1hctn_38", e = {
-  table: m,
-  collapsing: d,
-  row: p,
-  cell: g,
-  row__header: w,
-  cell__header: b,
-  cell__collapsing: u
-};
-function h(l) {
-  const { className: c, collapsing: o, children: _, ...a } = l;
-  return /* @__PURE__ */ s(
+import { jsx as c } from "react/jsx-runtime";
+import { classes as r } from "../common/react.js";
+import { computeBoxClassName as t, computeBoxProps as n } from "./Box.js";
+function m(e) {
+  const { className: l, collapsing: a, children: s, ...o } = e;
+  return /* @__PURE__ */ c(
     "table",
     {
-      className: t([
-        e.table,
-        o && e.collapsing,
-        c,
-        n(a)
+      className: r([
+        "Table",
+        a && "Table--collapsing",
+        l,
+        t(o)
       ]),
-      ...r(a),
-      children: /* @__PURE__ */ s("tbody", { children: _ })
+      ...n(o),
+      children: /* @__PURE__ */ c("tbody", { children: s })
     }
   );
 }
-function N(l) {
-  const { className: c, header: o, ..._ } = l;
-  return /* @__PURE__ */ s(
+function i(e) {
+  const { className: l, header: a, ...s } = e;
+  return /* @__PURE__ */ c(
     "tr",
     {
-      className: t([
-        e.row,
-        o && e.row__header,
-        c,
-        n(l)
+      className: r([
+        "Table__row",
+        a && "Table__row--header",
+        l,
+        t(e)
       ]),
-      ...r(_)
+      ...n(s)
     }
   );
 }
-h.Row = N;
-function f(l) {
-  const { className: c, collapsing: o, colSpan: _, header: a, ...i } = l;
-  return /* @__PURE__ */ s(
+m.Row = i;
+function T(e) {
+  const { className: l, collapsing: a, colSpan: s, header: o, ...b } = e;
+  return /* @__PURE__ */ c(
     "td",
     {
-      className: t([
-        e.cell,
-        o && e.cell__collapsing,
-        a && e.cell__header,
-        c,
-        n(l)
+      className: r([
+        "Table__cell",
+        a && "Table__cell--collapsing",
+        o && "Table__cell--header",
+        l,
+        t(e)
       ]),
-      colSpan: _,
-      ...r(i)
+      colSpan: s,
+      ...n(b)
     }
   );
 }
-h.Cell = f;
+m.Cell = T;
 export {
-  h as Table,
-  f as TableCell,
-  N as TableRow
+  m as Table,
+  T as TableCell,
+  i as TableRow
 };

package/dist/components/Tabs.d.ts

@@ -1,6 +1,5 @@
 import { PropsWithChildren, ReactNode } from 'react';
 import { BoxProps } from './Box';
-
 type Props = Partial<{
     className: string;
     fill: boolean;

package/dist/components/Tabs.js

@@ -1,94 +1,62 @@
-import { jsx as o, jsxs as u } from "react/jsx-runtime";
-import { classes as g, canRender as d } from "../common/react.js";
-import { computeBoxClassName as f, computeBoxProps as m } from "./Box.js";
-import { Icon as k } from "./Icon.js";
-import '../assets/Tabs.css';const w = "_tabs_9h380_13", x = "_fill_9h380_20", y = "_vertical_9h380_35", N = "_horizontal_9h380_40", z = "_tabs__tab_9h380_48", C = "_fluid_9h380_52", S = "_tab_9h380_13", T = "_selected_9h380_66", j = "_tab__text_9h380_75", B = "_tab__left_9h380_80", I = "_tab__right_9h380_86", P = "_color__black_9h380_113", R = "_color__white_9h380_125", q = "_color__red_9h380_137", A = "_color__orange_9h380_149", D = "_color__yellow_9h380_161", E = "_color__olive_9h380_173", F = "_color__green_9h380_185", G = "_color__teal_9h380_197", H = "_color__blue_9h380_209", J = "_color__violet_9h380_221", K = "_color__purple_9h380_233", L = "_color__pink_9h380_245", M = "_color__brown_9h380_257", O = "_color__grey_9h380_269", Q = "_color__good_9h380_293", U = "_color__average_9h380_305", V = "_color__bad_9h380_317", W = "_color__label_9h380_329", _ = {
-  tabs: w,
-  fill: x,
-  vertical: y,
-  horizontal: N,
-  tabs__tab: z,
-  fluid: C,
-  tab: S,
-  selected: T,
-  tab__text: j,
-  tab__left: B,
-  tab__right: I,
-  color__black: P,
-  color__white: R,
-  color__red: q,
-  color__orange: A,
-  color__yellow: D,
-  color__olive: E,
-  color__green: F,
-  color__teal: G,
-  color__blue: H,
-  color__violet: J,
-  color__purple: K,
-  color__pink: L,
-  color__brown: M,
-  color__grey: O,
-  "color__light-grey": "_color__light-grey_9h380_281",
-  color__good: Q,
-  color__average: U,
-  color__bad: V,
-  color__label: W
-};
-function X(t) {
-  const { className: r, vertical: e, fill: a, fluid: c, children: s, ...l } = t;
-  return /* @__PURE__ */ o(
+import { jsx as a, jsxs as u } from "react/jsx-runtime";
+import { classes as T, canRender as d } from "../common/react.js";
+import { computeBoxClassName as f, computeBoxProps as h } from "./Box.js";
+import { Icon as N } from "./Icon.js";
+function v(l) {
+  const { className: c, vertical: i, fill: o, fluid: e, children: r, ...s } = l;
+  return /* @__PURE__ */ a(
     "div",
     {
-      className: g([
-        _.tabs,
-        e ? _.vertical : _.horizontal,
-        a && _.fill,
-        c && _.fluid,
-        r,
-        f(l)
+      className: T([
+        "Tabs",
+        i ? "Tabs--vertical" : "Tabs--horizontal",
+        o && "Tabs--fill",
+        e && "Tabs--fluid",
+        c,
+        f(s)
       ]),
-      ...m(l),
-      children: s
+      ...h(s),
+      children: r
     }
   );
 }
-function Y(t) {
+function x(l) {
   const {
-    className: r,
-    selected: e,
-    color: a,
-    icon: c,
-    iconSpin: s,
-    leftSlot: l,
-    rightSlot: n,
-    children: v,
-    onClick: i,
-    ...h
-  } = t, p = (b) => {
-    i && (i(b), b.target.blur());
+    className: c,
+    selected: i,
+    color: o,
+    icon: e,
+    iconSpin: r,
+    leftSlot: s,
+    rightSlot: t,
+    children: p,
+    onClick: n,
+    ...m
+  } = l, _ = (b) => {
+    n && (n(b), b.target.blur());
   };
   return /* @__PURE__ */ u(
     "div",
     {
-      className: g([
-        _.tab,
-        _.tabs__tab,
-        _["color__" + a],
-        e && _.selected,
-        r,
-        f(h)
+      className: T([
+        "Tab",
+        "Tabs__Tab",
+        `Tab--color--${o}`,
+        i && "Tab--selected",
+        c,
+        f(m)
       ]),
-      onClick: p,
-      ...m(h),
+      onClick: _,
+      ...h(m),
       children: [
-        d(l) && /* @__PURE__ */ o("div", { className: _.tab__left, children: l }) || !!c && /* @__PURE__ */ o("div", { className: _.tab__left, children: /* @__PURE__ */ o(k, { name: c, spin: s }) }),
-        /* @__PURE__ */ o("div", { className: _.tab__text, children: v }),
-        d(n) && /* @__PURE__ */ o("div", { className: _.tab__right, children: n })
+        d(s) && /* @__PURE__ */ a("div", { className: "Tab__left", children: s }) || !!e && /* @__PURE__ */ a("div", { className: "Tab__left", children: /* @__PURE__ */ a(N, { name: e, spin: r }) }),
+        /* @__PURE__ */ a("div", { className: "Tab__text", children: p }),
+        d(t) && /* @__PURE__ */ a("div", { className: "Tab__right", children: t })
       ]
     }
   );
 }
-X.Tab = Y;
+v.Tab = x;
 export {
-  X as Tabs
+  v as Tabs
 };

package/dist/components/TextArea.d.ts

@@ -1,5 +1,4 @@
 import { SyntheticEvent } from 'react';
-
 export declare const TextArea: import('react').ForwardRefExoticComponent<Partial<{
     autoFocus: boolean;
     autoSelect: boolean;

package/dist/components/TextArea.js

@@ -1,108 +1,113 @@
-import { jsxs as I, jsx as f } from "react/jsx-runtime";
-import { forwardRef as Y, useRef as C, useState as H, useImperativeHandle as L, useEffect as _ } from "react";
-import { KEY as g, isEscape as P } from "../common/keys.js";
-import { classes as p } from "../common/react.js";
-import { Box as U } from "./Box.js";
-import { toInputValue as T } from "./Input.js";
-import '../assets/TextArea.css';const $ = "_textArea_1bert_20", q = "_fluid_1bert_33", z = "_noborder_1bert_39", G = "_inner_1bert_43", J = "_scrollable_1bert_43", M = "_custom_1bert_78", O = "_nowrap_1bert_83", Q = "_wrapper_1bert_89", e = {
-  textArea: $,
-  fluid: q,
-  noborder: z,
-  inner: G,
-  scrollable: J,
-  custom: M,
-  nowrap: O,
-  wrapper: Q
-}, tr = Y(
-  (x, w) => {
+import { jsxs as B, jsx as i } from "react/jsx-runtime";
+import { forwardRef as F, useRef as I, useState as Y, useImperativeHandle as C, useEffect as x } from "react";
+import { KEY as p, isEscape as H } from "../common/keys.js";
+import { classes as f } from "../common/react.js";
+import { Box as L } from "./Box.js";
+import { toInputValue as g } from "./Input.js";
+const M = F(
+  (b, h) => {
     const {
       autoFocus: d,
-      autoSelect: s,
+      autoSelect: o,
       displayedValue: a,
-      dontUseTabForIndent: y,
-      maxLength: h,
-      noborder: A,
+      dontUseTabForIndent: A,
+      maxLength: _,
+      noborder: y,
       onChange: l,
-      onEnter: n,
-      onEscape: u,
+      onEnter: u,
+      onEscape: s,
       onInput: c,
-      placeholder: N,
+      placeholder: w,
       scrollbar: S,
       selfClear: m,
-      value: i,
+      value: n,
       ...E
-    } = x, { className: K, fluid: k, nowrap: D, ...R } = E, t = C(null), [V, j] = H(0);
-    function B(r) {
-      if (r.key === g.Enter) {
+    } = b, { className: K, fluid: N, nowrap: k, ...D } = E, e = I(null), [R, V] = Y(0);
+    function $(r) {
+      if (r.key === p.Enter) {
         if (r.shiftKey) {
           r.currentTarget.focus();
           return;
         }
-        n == null || n(r, r.currentTarget.value), m && (r.currentTarget.value = ""), r.currentTarget.blur();
+        u == null || u(r, r.currentTarget.value), m && (r.currentTarget.value = ""), r.currentTarget.blur();
         return;
       }
-      if (P(r.key)) {
-        u == null || u(r), m ? r.currentTarget.value = "" : (r.currentTarget.value = T(i), r.currentTarget.blur());
+      if (H(r.key)) {
+        s == null || s(r), m ? r.currentTarget.value = "" : (r.currentTarget.value = g(n), r.currentTarget.blur());
         return;
       }
-      if (!y && r.key === g.Tab) {
+      if (!A && r.key === p.Tab) {
         r.preventDefault();
-        const { value: o, selectionStart: b, selectionEnd: F } = r.currentTarget;
-        r.currentTarget.value = o.substring(0, b) + "	" + o.substring(F), r.currentTarget.selectionEnd = b + 1;
+        const { value: t, selectionStart: T, selectionEnd: j } = r.currentTarget;
+        r.currentTarget.value = `${t.substring(0, T)}	${t.substring(j)}`, r.currentTarget.selectionEnd = T + 1;
       }
     }
-    return L(
-      w,
-      () => t.current
-    ), _(() => {
-      if (!d && !s) return;
-      const r = t.current;
-      r && (d || s) && setTimeout(() => {
-        r.focus(), s && r.select();
+    return C(
+      h,
+      () => e.current
+    ), x(() => {
+      if (!d && !o) return;
+      const r = e.current;
+      r && (d || o) && setTimeout(() => {
+        r.focus(), o && r.select();
       }, 1);
-    }, []), _(() => {
-      const r = t.current;
+    }, []), x(() => {
+      const r = e.current;
       if (!r) return;
-      const o = T(i);
-      r.value !== o && (r.value = o);
-    }, [i]), /* @__PURE__ */ I(
-      U,
+      const t = g(n);
+      r.value !== t && (r.value = t);
+    }, [n]), /* @__PURE__ */ B(
+      L,
       {
-        className: p([
-          e.textArea,
-          k && e.fluid,
-          A && e.noborder,
+        className: f([
+          "TextArea",
+          N && "TextArea--fluid",
+          y && "TextArea--noborder",
           K
         ]),
-        ...R,
+        ...D,
         children: [
-          !!a && /* @__PURE__ */ f("div", { className: e.wrapper, children: /* @__PURE__ */ f(
+          !!a && /* @__PURE__ */ i(
             "div",
             {
-              className: p([e.inner, e.custom]),
               style: {
-                transform: `translateY(-${V}px)`
+                height: "100%",
+                overflow: "hidden",
+                position: "absolute",
+                width: "100%"
               },
-              children: a
+              children: /* @__PURE__ */ i(
+                "div",
+                {
+                  className: f([
+                    "TextArea__textarea",
+                    "TextArea__textarea_custom"
+                  ]),
+                  style: {
+                    transform: `translateY(-${R}px)`
+                  },
+                  children: a
+                }
+              )
             }
-          ) }),
-          /* @__PURE__ */ f(
+          ),
+          /* @__PURE__ */ i(
             "textarea",
             {
-              className: p([
-                e.inner,
-                S && e.scrollable,
-                D && e.nowrap
+              className: f([
+                "TextArea__textarea",
+                S && "TextArea__textarea--scrollable",
+                k && "TextArea__nowrap"
               ]),
-              maxLength: h,
+              maxLength: _,
               onBlur: (r) => l == null ? void 0 : l(r, r.target.value),
               onChange: (r) => c == null ? void 0 : c(r, r.target.value),
-              onKeyDown: B,
+              onKeyDown: $,
               onScroll: () => {
-                a && t.current && j(t.current.scrollTop);
+                a && e.current && V(e.current.scrollTop);
               },
-              placeholder: N,
-              ref: t,
+              placeholder: w,
+              ref: e,
               style: {
                 color: a ? "rgba(0, 0, 0, 0)" : "inherit"
               }
@@ -114,5 +119,5 @@ import '../assets/TextArea.css';const $ = "_textArea_1bert_20", q = "_fluid_1ber
   }
 );
 export {
-  tr as TextArea
+  M as TextArea
 };

package/dist/components/TimeDisplay.d.ts

@@ -1,10 +1,11 @@
-interface TimeDisplayProps {
-    /** Whether the TimeDisplay should automatically increment or decrement (plain prop to dec.) */
-    auto?: 'up' | 'down' | true;
-    /** An optional function to format the value */
-    format?: (value: number) => string;
+type TimeDisplayProps = {
     /** The value that the TimeDisplay needs to render - if you pass a wrong type it will be rendered directly */
     value: number;
-}
+} & Partial<{
+    /** Whether the TimeDisplay should automatically increment or decrement (plain prop to dec.) */
+    auto: 'up' | 'down' | true;
+    /** An optional function to format the value */
+    format: (value: number) => string;
+}>;
 export declare function TimeDisplay(props: TimeDisplayProps): string | number | null;
 export {};