tgui-core 1.1.11 → 1.1.13

package/dist/components/Button.js

@@ -0,0 +1,298 @@
+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,
+  "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
+};
+function m(u) {
+  const {
+    captureKeys: s = !0,
+    children: a,
+    circular: p,
+    className: f,
+    color: i,
+    compact: g,
+    content: y,
+    disabled: o,
+    ellipsis: c,
+    fluid: n,
+    icon: e,
+    iconColor: d,
+    iconPosition: v,
+    iconRotation: w,
+    iconSpin: N,
+    onClick: b,
+    selected: h,
+    tooltip: x,
+    tooltipPosition: A,
+    verticalAlignContent: C,
+    ...B
+  } = u, k = y || a;
+  let t = /* @__PURE__ */ l(
+    "div",
+    {
+      className: R([
+        _.button,
+        n && _.fluid,
+        o && _.disabled,
+        h && _.selected,
+        p && _.circular,
+        g && _.compact,
+        C && _.flex,
+        C && n && _.flex__fluid,
+        C && _["verticalAlignContent__" + C],
+        i && typeof i == "string" ? _["color__" + i] : _.color__default,
+        f,
+        j(B)
+      ]),
+      tabIndex: o ? void 0 : 0,
+      onClick: (r) => {
+        !o && b && b(r);
+      },
+      onKeyDown: (r) => {
+        if (s) {
+          if (r.key === I.Space || r.key === I.Enter) {
+            r.preventDefault(), !o && b && b(r);
+            return;
+          }
+          r.key === I.Escape && r.preventDefault();
+        }
+      },
+      ...q(B),
+      children: /* @__PURE__ */ E("div", { className: _.content, children: [
+        e && v !== "right" && /* @__PURE__ */ l(
+          D,
+          {
+            mr: 1,
+            name: e,
+            color: d,
+            rotation: w,
+            spin: N
+          }
+        ),
+        c ? /* @__PURE__ */ l(
+          "span",
+          {
+            className: R([_.ellipsis, e && _.textMargin]),
+            children: k
+          }
+        ) : k,
+        e && v === "right" && /* @__PURE__ */ l(
+          D,
+          {
+            ml: 1,
+            name: e,
+            color: d,
+            rotation: w,
+            spin: N
+          }
+        )
+      ] })
+    }
+  );
+  return x && (t = /* @__PURE__ */ l(P, { content: x, position: A, children: t })), t;
+}
+function No(u) {
+  const { checked: s, ...a } = u;
+  return /* @__PURE__ */ l(
+    m,
+    {
+      color: "transparent",
+      icon: s ? "check-square-o" : "square-o",
+      selected: s,
+      ...a
+    }
+  );
+}
+m.Checkbox = No;
+function Ro(u) {
+  const {
+    children: s,
+    color: a,
+    confirmColor: p = "bad",
+    confirmContent: f = "Confirm?",
+    confirmIcon: i,
+    ellipsis: g = !0,
+    icon: y,
+    onClick: o,
+    ...c
+  } = u, [n, e] = F(!1);
+  function d(v) {
+    if (!n) {
+      e(!0);
+      return;
+    }
+    o == null || o(v), e(!1);
+  }
+  return /* @__PURE__ */ l(
+    m,
+    {
+      icon: n ? i : y,
+      color: n ? p : a,
+      onClick: d,
+      ...c,
+      children: n ? f : s
+    }
+  );
+}
+m.Confirm = Ro;
+function Do(u) {
+  const {
+    children: s,
+    color: a = "default",
+    content: p,
+    currentValue: f,
+    defaultValue: i,
+    disabled: g,
+    fluid: y,
+    icon: o,
+    iconRotation: c,
+    iconSpin: n,
+    maxLength: e,
+    onCommit: d = () => null,
+    placeholder: v,
+    tooltip: w,
+    tooltipPosition: N,
+    ...b
+  } = u, [h, x] = F(!1), A = K(), C = p || s;
+  function B(t) {
+    const r = A.current;
+    if (!r) return;
+    r.value !== "" ? d(t, r.value) : i && d(t, i);
+  }
+  M(() => {
+    const t = A.current;
+    if (t && h) {
+      t.value = f || "";
+      try {
+        t.focus(), t.select();
+      } catch {
+      }
+    }
+  }, [h, f]);
+  let k = /* @__PURE__ */ E(
+    O,
+    {
+      className: R([
+        _.button,
+        y && _.fluid,
+        _["color__" + a]
+      ]),
+      ...b,
+      onClick: () => x(!0),
+      children: [
+        o && /* @__PURE__ */ l(D, { name: o, rotation: c, spin: n }),
+        /* @__PURE__ */ l("div", { children: C }),
+        /* @__PURE__ */ l(
+          "input",
+          {
+            disabled: !!g,
+            ref: A,
+            className: "NumberInput__input",
+            style: {
+              display: h ? "" : "none",
+              textAlign: "left"
+            },
+            onBlur: (t) => {
+              h && (x(!1), B(t));
+            },
+            onKeyDown: (t) => {
+              if (t.key === I.Enter) {
+                x(!1), B(t);
+                return;
+              }
+              t.key === I.Escape && x(!1);
+            }
+          }
+        )
+      ]
+    }
+  );
+  return w && (k = /* @__PURE__ */ l(P, { content: w, position: N, children: k })), k;
+}
+m.Input = Do;
+function Eo(u) {
+  const { accept: s, multiple: a, onSelectFiles: p, ...f } = u, i = V(null);
+  async function g(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 await Promise.all(c);
+  }
+  async function y(o) {
+    const c = o.target.files;
+    if (c != null && c.length) {
+      const n = await g(c);
+      p(a ? n : n[0]);
+    }
+  }
+  return /* @__PURE__ */ E(S, { children: [
+    /* @__PURE__ */ l(m, { onClick: () => {
+      var o;
+      return (o = i.current) == null ? void 0 : o.click();
+    }, ...f }),
+    /* @__PURE__ */ l(
+      "input",
+      {
+        hidden: !0,
+        type: "file",
+        ref: i,
+        accept: s,
+        multiple: a,
+        onChange: y
+      }
+    )
+  ] });
+}
+m.File = Eo;
+export {
+  m as Button,
+  No as ButtonCheckbox
+};

package/dist/components/ByondUi.js

@@ -0,0 +1,73 @@
+import { jsx as s } from "react/jsx-runtime";
+import { Component as a, createRef as c } from "react";
+import { shallowDiffers as r } from "../common/react.js";
+import { debounce as m } from "../common/timer.js";
+import { computeBoxProps as l } from "./Box.js";
+const o = [];
+function h(t) {
+  const n = o.length;
+  o.push(null);
+  const e = t || "byondui_" + n;
+  return {
+    render: (i) => {
+      o[n] = e, Byond.winset(e, i);
+    },
+    unmount: () => {
+      o[n] = null, Byond.winset(e, {
+        parent: ""
+      });
+    }
+  };
+}
+window.addEventListener("beforeunload", () => {
+  for (let t = 0; t < o.length; t++) {
+    const n = o[t];
+    typeof n == "string" && (o[t] = null, Byond.winset(n, {
+      parent: ""
+    }));
+  }
+});
+function u(t) {
+  const n = window.devicePixelRatio ?? 1, e = t.getBoundingClientRect();
+  return {
+    pos: [e.left * n, e.top * n],
+    size: [
+      (e.right - e.left) * n,
+      (e.bottom - e.top) * n
+    ]
+  };
+}
+class U extends a {
+  constructor(n) {
+    var e;
+    super(n), this.containerRef = c(), this.byondUiElement = h((e = n.params) == null ? void 0 : e.id), this.handleResize = m(() => {
+      this.forceUpdate();
+    }, 100);
+  }
+  shouldComponentUpdate(n) {
+    const { params: e = {}, ...i } = this.props, { params: d = {}, ...p } = n;
+    return r(e, d) || r(i, p);
+  }
+  componentDidMount() {
+    window.addEventListener("resize", this.handleResize), this.componentDidUpdate(), this.handleResize();
+  }
+  componentDidUpdate() {
+    const { params: n = {} } = this.props, e = u(this.containerRef.current);
+    this.byondUiElement.render({
+      parent: Byond.windowId,
+      ...n,
+      pos: e.pos[0] + "," + e.pos[1],
+      size: e.size[0] + "x" + e.size[1]
+    });
+  }
+  componentWillUnmount() {
+    window.removeEventListener("resize", this.handleResize), this.byondUiElement.unmount();
+  }
+  render() {
+    const { params: n, ...e } = this.props;
+    return /* @__PURE__ */ s("div", { ref: this.containerRef, ...l(e), children: /* @__PURE__ */ s("div", { style: { minHeight: "22px" } }) });
+  }
+}
+export {
+  U as ByondUi
+};

package/dist/components/Chart.d.ts

@@ -0,0 +1,28 @@
+import { Component, RefObject } from 'react';
+import { BoxProps } from './Box';
+
+type Props = {
+    data: number[][];
+} & Partial<{
+    fillColor: string;
+    rangeX: [number, number];
+    rangeY: [number, number];
+    strokeColor: string;
+    strokeWidth: number;
+}> & BoxProps;
+type State = {
+    viewBox: [number, number];
+};
+declare class LineChart extends Component<Props> {
+    ref: RefObject<HTMLDivElement>;
+    state: State;
+    constructor(props: Props);
+    componentDidMount(): void;
+    componentWillUnmount(): void;
+    handleResize: () => void;
+    render(): import("react/jsx-runtime").JSX.Element;
+}
+export declare const Chart: {
+    Line: typeof LineChart;
+};
+export {};

package/dist/components/Chart.js

@@ -0,0 +1,95 @@
+var w = Object.defineProperty;
+var R = (t, o, e) => o in t ? w(t, o, { enumerable: !0, configurable: !0, writable: !0, value: e }) : t[o] = e;
+var p = (t, o, e) => R(t, typeof o != "symbol" ? o + "" : o, e);
+import { jsx as c } from "react/jsx-runtime";
+import { Component as g, createRef as B } from "react";
+import { zip as u } from "../common/collections.js";
+import { Box as v } from "./Box.js";
+function C(t, o, e, n) {
+  if (t.length === 0)
+    return [];
+  const f = u(...t), h = f.map((r) => Math.min(...r)), a = f.map((r) => Math.max(...r));
+  return e !== void 0 && (h[0] = e[0], a[0] = e[1]), n !== void 0 && (h[1] = n[0], a[1] = n[1]), t.map(
+    (r) => u(r, h, a, o).map(
+      ([l, i, m, d]) => (l - i) / (m - i) * d
+    )
+  );
+}
+function L(t) {
+  let o = "";
+  for (let e = 0; e < t.length; e++) {
+    const n = t[e];
+    o += n[0] + "," + n[1] + " ";
+  }
+  return o;
+}
+class b extends g {
+  constructor(e) {
+    super(e);
+    p(this, "ref");
+    p(this, "state");
+    p(this, "handleResize", () => {
+      const e = this.ref.current;
+      e && this.setState({
+        viewBox: [e.offsetWidth, e.offsetHeight]
+      });
+    });
+    this.ref = B(), this.state = {
+      // Initial guess
+      viewBox: [600, 200]
+    }, this.handleResize = this.handleResize.bind(this);
+  }
+  componentDidMount() {
+    window.addEventListener("resize", this.handleResize), this.handleResize();
+  }
+  componentWillUnmount() {
+    window.removeEventListener("resize", this.handleResize);
+  }
+  render() {
+    const {
+      data: e = [],
+      rangeX: n,
+      rangeY: f,
+      fillColor: h = "none",
+      strokeColor: a = "#ffffff",
+      strokeWidth: s = 2,
+      ...r
+    } = this.props, { viewBox: l } = this.state, i = C(e, l, n, f);
+    if (i.length > 0) {
+      const z = i[0], x = i[i.length - 1];
+      i.push([l[0] + s, x[1]]), i.push([l[0] + s, -s]), i.push([-s, -s]), i.push([-s, z[1]]);
+    }
+    const m = L(i), d = { ...r, className: "", ref: this.ref };
+    return /* @__PURE__ */ c(v, { position: "relative", ...r, children: /* @__PURE__ */ c(v, { ...d, children: /* @__PURE__ */ c(
+      "svg",
+      {
+        viewBox: `0 0 ${l[0]} ${l[1]}`,
+        preserveAspectRatio: "none",
+        style: {
+          position: "absolute",
+          top: 0,
+          left: 0,
+          right: 0,
+          bottom: 0,
+          overflow: "hidden"
+        },
+        children: /* @__PURE__ */ c(
+          "polyline",
+          {
+            transform: `scale(1, -1) translate(0, -${l[1]})`,
+            fill: h,
+            stroke: a,
+            strokeWidth: s,
+            points: m
+          }
+        )
+      }
+    ) }) });
+  }
+}
+const $ = {
+  Line: b
+};
+export {
+  $ as Chart
+};

package/dist/components/Collapsible.d.ts

@@ -0,0 +1,15 @@
+import { ReactNode } from 'react';
+import { BoxProps } from './Box';
+
+type Props = Partial<{
+    /** Buttons or other content to render inline with the button */
+    buttons: ReactNode;
+    /** Icon to display with the collapsible */
+    icon: string;
+    /** Whether the collapsible is open */
+    open: boolean;
+    /** Text to display on the button for collapsing */
+    title: ReactNode;
+}> & BoxProps;
+export declare function Collapsible(props: Props): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/components/Collapsible.js

@@ -0,0 +1,27 @@
+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: [
+      /* @__PURE__ */ e("div", { className: "Table__cell", children: /* @__PURE__ */ e(
+        p,
+        {
+          fluid: !0,
+          color: s,
+          icon: c || (l ? "chevron-down" : "chevron-right"),
+          onClick: () => d(!l),
+          ...m,
+          children: a
+        }
+      ) }),
+      n && /* @__PURE__ */ e("div", { className: "Table__cell Table__cell--collapsing", children: n })
+    ] }),
+    l && /* @__PURE__ */ e(r, { mt: 1, children: t })
+  ] });
+}
+export {
+  v as Collapsible
+};

package/dist/components/ColorBox.d.ts

@@ -0,0 +1,8 @@
+import { ReactNode } from 'react';
+import { BoxProps } from './Box';
+
+type Props = {
+    content?: ReactNode;
+} & BoxProps;
+export declare function ColorBox(props: Props): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/components/ColorBox.js

@@ -0,0 +1,24 @@
+import { jsx as t } from "react/jsx-runtime";
+import { classes as s } from "../common/react.js";
+import { computeBoxClassName as e, computeBoxProps as n } from "./Box.js";
+import '../assets/ColorBox.css';const m = "_colorBox_110qz_5", a = {
+  colorBox: m
+};
+function d(r) {
+  const { content: c, children: x, className: l, ...o } = r;
+  return o.color = c ? null : "default", o.backgroundColor = r.color || "default", /* @__PURE__ */ t(
+    "div",
+    {
+      className: s([
+        a.colorBox,
+        l,
+        e(o)
+      ]),
+      ...n(o),
+      children: c || "."
+    }
+  );
+}
+export {
+  d as ColorBox
+};

package/dist/components/Dialog.d.ts

@@ -0,0 +1,24 @@
+type DialogProps = {
+    children: any;
+    height?: string;
+    onClose: () => void;
+    title: any;
+    width?: string;
+};
+export declare function Dialog(props: DialogProps): import("react/jsx-runtime").JSX.Element;
+export declare namespace Dialog {
+    var Button: typeof DialogButton;
+}
+type DialogButtonProps = {
+    children: any;
+    onClick: () => void;
+};
+declare function DialogButton(props: DialogButtonProps): import("react/jsx-runtime").JSX.Element;
+type UnsavedChangesDialogProps = {
+    documentName: string;
+    onClose: () => void;
+    onDiscard: () => void;
+    onSave: () => void;
+};
+export declare function UnsavedChangesDialog(props: UnsavedChangesDialogProps): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/components/Dialog.js

@@ -0,0 +1,67 @@
+import { jsx as t, jsxs as c } from "react/jsx-runtime";
+import { Box as s } from "./Box.js";
+import { Button as a } from "./Button.js";
+import '../assets/Dialog.css';const m = "_dialog_1hdv8_5", v = "_content_1hdv8_17", u = "_header_1hdv8_25", g = "_title_1hdv8_33", p = "_body_1hdv8_42", C = "_footer_1hdv8_47", f = "_button_1hdv8_55", o = {
+  dialog: m,
+  content: v,
+  header: u,
+  title: g,
+  body: p,
+  footer: C,
+  button: f
+};
+function h(n) {
+  const { title: e, onClose: i, children: r, width: l, height: _ } = n;
+  return /* @__PURE__ */ t("div", { className: o.dialog, children: /* @__PURE__ */ c(s, { className: o.content, width: l || "370px", height: _, children: [
+    /* @__PURE__ */ c("div", { className: o.header, children: [
+      /* @__PURE__ */ t("div", { className: o.title, children: e }),
+      /* @__PURE__ */ t(s, { mr: 2, children: /* @__PURE__ */ t(
+        a,
+        {
+          mr: "-3px",
+          width: "26px",
+          lineHeight: "22px",
+          textAlign: "center",
+          color: "transparent",
+          icon: "window-close-o",
+          tooltip: "Close",
+          tooltipPosition: "bottom-start",
+          onClick: i
+        }
+      ) })
+    ] }),
+    r
+  ] }) });
+}
+function d(n) {
+  const { onClick: e, children: i } = n;
+  return /* @__PURE__ */ t(
+    a,
+    {
+      onClick: e,
+      className: o.button,
+      verticalAlignContent: "middle",
+      children: i
+    }
+  );
+}
+h.Button = d;
+function w(n) {
+  const { documentName: e, onSave: i, onDiscard: r, onClose: l } = n;
+  return /* @__PURE__ */ c(h, { title: "Notepad", onClose: l, children: [
+    /* @__PURE__ */ c("div", { className: o.body, children: [
+      "Do you want to save changes to ",
+      e,
+      "?"
+    ] }),
+    /* @__PURE__ */ c("div", { className: o.footer, children: [
+      /* @__PURE__ */ t(d, { onClick: i, children: "Save" }),
+      /* @__PURE__ */ t(d, { onClick: r, children: "Don't Save" }),
+      /* @__PURE__ */ t(d, { onClick: l, children: "Cancel" })
+    ] })
+  ] });
+}
+export {
+  h as Dialog,
+  w as UnsavedChangesDialog
+};

package/dist/components/Dimmer.d.ts

@@ -0,0 +1,3 @@
+import { BoxProps } from './Box';
+
+export declare function Dimmer(props: BoxProps): import("react/jsx-runtime").JSX.Element;

package/dist/components/Dimmer.js

@@ -0,0 +1,13 @@
+import { jsx as m } from "react/jsx-runtime";
+import { classes as o } from "../common/react.js";
+import { Box as t } from "./Box.js";
+import '../assets/Dimmer.css';const c = "_dimmer_ldz2o_5", n = {
+  dimmer: c
+};
+function _(r) {
+  const { className: e, children: s, ...i } = r;
+  return /* @__PURE__ */ m(t, { className: o([n.dimmer, e]), ...i, children: /* @__PURE__ */ m("div", { className: "Dimmer__inner", children: s }) });
+}
+export {
+  _ as Dimmer
+};

package/dist/components/Divider.d.ts

@@ -0,0 +1,6 @@
+type Props = Partial<{
+    hidden: boolean;
+    vertical: boolean;
+}>;
+export declare function Divider(props: Props): import("react/jsx-runtime").JSX.Element;
+export {};