tgui-core 1.1.11 → 1.1.13

package/dist/components/Knob.js

@@ -0,0 +1,162 @@
+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) {
+  const {
+    // Draggable props (passthrough)
+    animated: d,
+    format: g,
+    maxValue: r,
+    minValue: l,
+    onChange: p,
+    onDrag: u,
+    step: m,
+    stepPixelSize: q,
+    suppressFlicker: v,
+    unclamped: b,
+    unit: k,
+    value: h,
+    // Own props
+    bipolar: c,
+    className: y,
+    color: x,
+    fillValue: n,
+    ranges: f = {},
+    size: w = 1,
+    style: N,
+    ...a
+  } = t;
+  return /* @__PURE__ */ _(
+    O,
+    {
+      dragMatrix: [0, -1],
+      animated: d,
+      format: g,
+      maxValue: r,
+      minValue: l,
+      onChange: p,
+      onDrag: u,
+      step: m,
+      stepPixelSize: q,
+      suppressFlicker: v,
+      unclamped: b,
+      unit: k,
+      value: h,
+      children: (P) => {
+        const {
+          displayElement: F,
+          displayValue: i,
+          dragging: V,
+          handleDragStart: B,
+          inputElement: T,
+          value: D
+        } = P, M = s(
+          n ?? 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(
+          "div",
+          {
+            className: e([
+              o.knob,
+              o["color__" + z],
+              c && o.bipolar,
+              y,
+              K(a)
+            ]),
+            ...I({
+              style: {
+                fontSize: w + "em",
+                ...N
+              },
+              ...a
+            }),
+            onMouseDown: B,
+            children: [
+              /* @__PURE__ */ _("div", { className: o.circle, children: /* @__PURE__ */ _(
+                "div",
+                {
+                  className: o.cursorBox,
+                  style: {
+                    transform: `rotate(${S}deg)`
+                  },
+                  children: /* @__PURE__ */ _("div", { className: o.cursor })
+                }
+              ) }),
+              V && /* @__PURE__ */ _("div", { className: o.popupValue, children: F }),
+              /* @__PURE__ */ _(
+                "svg",
+                {
+                  className: e([o.ring, o.ringTrackPivot]),
+                  viewBox: "0 0 100 100",
+                  children: /* @__PURE__ */ _("circle", { className: "Knob__ringTrack", cx: "50", cy: "50", r: "50" })
+                }
+              ),
+              /* @__PURE__ */ _(
+                "svg",
+                {
+                  className: e([o.ring, o.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"
+                    }
+                  )
+                }
+              ),
+              T
+            ]
+          }
+        );
+      }
+    }
+  );
+}
+export {
+  xo as Knob
+};

package/dist/components/LabeledControls.d.ts

@@ -0,0 +1,11 @@
+import { FlexProps } from './Flex';
+
+export declare function LabeledControls(props: FlexProps): import("react/jsx-runtime").JSX.Element;
+export declare namespace LabeledControls {
+    var Item: typeof LabeledControlsItem;
+}
+type ItemProps = {
+    label: string;
+} & FlexProps;
+declare function LabeledControlsItem(props: ItemProps): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/components/LabeledControls.js

@@ -0,0 +1,39 @@
+import { jsx as t, jsxs as o } from "react/jsx-runtime";
+import { Flex as e } from "./Flex.js";
+function s(n) {
+  const { children: r, wrap: l, ...c } = n;
+  return /* @__PURE__ */ t(
+    e,
+    {
+      mx: -0.5,
+      wrap: l,
+      align: "stretch",
+      justify: "space-between",
+      ...c,
+      children: r
+    }
+  );
+}
+function m(n) {
+  const { label: r, children: l, mx: c = 1, ...i } = n;
+  return /* @__PURE__ */ t(e.Item, { mx: c, children: /* @__PURE__ */ o(
+    e,
+    {
+      height: "100%",
+      direction: "column",
+      align: "center",
+      textAlign: "center",
+      justify: "space-between",
+      ...i,
+      children: [
+        /* @__PURE__ */ t(e.Item, {}),
+        /* @__PURE__ */ t(e.Item, { children: l }),
+        /* @__PURE__ */ t(e.Item, { color: "label", children: r })
+      ]
+    }
+  ) });
+}
+s.Item = m;
+export {
+  s as LabeledControls
+};

package/dist/components/LabeledList.d.ts

@@ -0,0 +1,57 @@
+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;
+    var Divider: typeof LabeledListDivider;
+}
+type LabeledListItemProps = Partial<{
+    /** Buttons to render aside the content. */
+    buttons: ReactNode;
+    /** Content of this labeled item. */
+    children: ReactNode;
+    /** Applies a CSS class to the element. */
+    className: string | BooleanLike;
+    /** Sets the color of the content text. */
+    color: string;
+    /** @deprecated */
+    content: any;
+    /**
+     * Sometimes this does not properly register in TS.
+     * See [react key docs](https://react.dev/learn/rendering-lists#keeping-list-items-in-order-with-key) for more info.
+     */
+    key: string | number;
+    /** Item label. Appends a colon at the end. */
+    label: ReactNode;
+    /** Sets the color of the label. */
+    labelColor: string;
+    /** Lets the label wrap and makes it not take the minimum width. */
+    labelWrap: boolean;
+    /**
+     * Align the content text.
+     *
+     * - `left` (default)
+     * - `center`
+     * - `right`
+     */
+    textAlign: string;
+    /** Tooltip text. */
+    tooltip: string;
+    /**
+     * Align both the label and the content vertically.
+     *
+     * - `baseline` (default)
+     * - `top`
+     * - `middle`
+     * - `bottom`
+     */
+    verticalAlign: string;
+}>;
+declare function LabeledListItem(props: LabeledListItemProps): import("react/jsx-runtime").JSX.Element;
+type LabeledListDividerProps = {
+    /** Size of the divider. */
+    size?: number;
+};
+declare function LabeledListDivider(props: LabeledListDividerProps): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/components/LabeledList.js

@@ -0,0 +1,94 @@
+import { jsx as l, jsxs as d } from "react/jsx-runtime";
+import { classes as i } from "../common/react.js";
+import { Box as r, 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: t });
+}
+function z(e) {
+  const {
+    className: t,
+    label: s,
+    labelColor: _ = "label",
+    labelWrap: m,
+    color: L,
+    textAlign: f,
+    buttons: a,
+    content: h,
+    children: u,
+    verticalAlign: c = "baseline",
+    tooltip: b
+  } = e;
+  let n;
+  s && (n = s, typeof s == "string" && (n += ":")), b !== void 0 && (n = /* @__PURE__ */ l(N, { content: b, children: /* @__PURE__ */ l(
+    r,
+    {
+      as: "span",
+      style: {
+        borderBottom: "2px dotted rgba(255, 255, 255, 0.8)"
+      },
+      children: n
+    }
+  ) }));
+  const w = /* @__PURE__ */ l(
+    r,
+    {
+      as: "td",
+      color: _,
+      className: i([
+        o.cell,
+        // Kinda flipped because we want nowrap as default. Cleaner CSS this way though.
+        !m && o.label__nowrap
+      ]),
+      verticalAlign: c,
+      children: n
+    }
+  );
+  return /* @__PURE__ */ d("tr", { className: i([o.row, t]), children: [
+    w,
+    /* @__PURE__ */ d(
+      r,
+      {
+        as: "td",
+        color: L,
+        textAlign: f,
+        className: o.cell,
+        colSpan: a ? void 0 : 2,
+        verticalAlign: c,
+        children: [
+          h,
+          u
+        ]
+      }
+    ),
+    a && /* @__PURE__ */ l("td", { className: i([o.cell, o.buttons]), children: a })
+  ] });
+}
+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(
+    "td",
+    {
+      colSpan: 3,
+      style: {
+        paddingTop: t,
+        paddingBottom: t
+      },
+      children: /* @__PURE__ */ l(x, {})
+    }
+  ) });
+}
+p.Divider = A;
+export {
+  p as LabeledList
+};

package/dist/components/MenuBar.d.ts

@@ -0,0 +1,28 @@
+import { ReactNode } from 'react';
+
+type MenuBarItemProps = {
+    children: any;
+    className?: string;
+    disabled?: boolean;
+    display: ReactNode;
+    entry: string;
+    openMenuBar: string | null;
+    openOnHover: boolean;
+    openWidth: string;
+    setOpenMenuBar: (entry: string | null) => void;
+    setOpenOnHover: (flag: boolean) => void;
+};
+export declare function Dropdown(props: MenuBarItemProps): import("react/jsx-runtime").JSX.Element;
+export declare namespace Dropdown {
+    var MenuItemToggle: (props: any) => import("react/jsx-runtime").JSX.Element;
+    var MenuItem: (props: any) => import("react/jsx-runtime").JSX.Element;
+    var Separator: () => import("react/jsx-runtime").JSX.Element;
+}
+type MenuBarProps = {
+    children: any;
+};
+export declare function MenuBar(props: MenuBarProps): import("react/jsx-runtime").JSX.Element;
+export declare namespace MenuBar {
+    var Dropdown: typeof import("./MenuBar").Dropdown;
+}
+export {};

package/dist/components/MenuBar.js

@@ -0,0 +1,174 @@
+import '../assets/MenuBar.css';var z = Object.defineProperty;
+var M = (t, e, n) => e in t ? z(t, e, { enumerable: !0, configurable: !0, writable: !0, value: n }) : t[e] = n;
+var h = (t, e, n) => M(t, typeof e != "symbol" ? e + "" : e, n);
+import { jsx as r, jsxs as v } from "react/jsx-runtime";
+import { Component as g, createRef as b } from "react";
+import { classes as f } from "../common/react.js";
+import { Box as m } from "./Box.js";
+import { Icon as B } from "./Icon.js";
+const N = "_menuBar_esza9_9", O = "_font_esza9_13", w = "_hover_esza9_19", R = "_button_esza9_24", y = "_menu_esza9_9", I = "_item_esza9_36", T = "_toggle_esza9_44", W = "_toggle__check_esza9_48", j = "_over_esza9_55", D = "_button__text_esza9_60", E = "_separator_esza9_66", o = {
+  menuBar: N,
+  font: O,
+  hover: w,
+  button: R,
+  menu: y,
+  item: I,
+  toggle: T,
+  toggle__check: W,
+  over: j,
+  button__text: D,
+  separator: E
+};
+class H extends g {
+  constructor(n) {
+    super(n);
+    h(this, "handleClick");
+    this.handleClick = (s) => {
+      this.props.menuRef.current && (this.props.menuRef.current.contains(s.target) || this.props.onOutsideClick());
+    };
+  }
+  componentWillMount() {
+    window.addEventListener("click", this.handleClick);
+  }
+  componentWillUnmount() {
+    window.removeEventListener("click", this.handleClick);
+  }
+  render() {
+    const { width: n, children: s } = this.props;
+    return /* @__PURE__ */ r(
+      "div",
+      {
+        className: o.menu,
+        style: {
+          width: n
+        },
+        children: s
+      }
+    );
+  }
+}
+class L extends g {
+  constructor(n) {
+    super(n);
+    h(this, "menuRef");
+    this.menuRef = b();
+  }
+  render() {
+    const { props: n } = this, {
+      open: s,
+      openWidth: c,
+      children: i,
+      disabled: l,
+      display: a,
+      onMouseOver: u,
+      onClick: p,
+      onOutsideClick: d,
+      ...k
+    } = n, { className: C, ...x } = k;
+    return /* @__PURE__ */ v("div", { ref: this.menuRef, children: [
+      /* @__PURE__ */ r(
+        m,
+        {
+          className: f([
+            o.button,
+            o.font,
+            o.hover,
+            C
+          ]),
+          ...x,
+          onClick: l ? () => null : p,
+          onMouseOver: u,
+          children: /* @__PURE__ */ r("span", { className: o.button__text, children: a })
+        }
+      ),
+      s && /* @__PURE__ */ r(
+        H,
+        {
+          width: c,
+          menuRef: this.menuRef,
+          onOutsideClick: d,
+          children: i
+        }
+      )
+    ] });
+  }
+}
+function _(t) {
+  const {
+    entry: e,
+    children: n,
+    openWidth: s,
+    display: c,
+    setOpenMenuBar: i,
+    openMenuBar: l,
+    setOpenOnHover: a,
+    openOnHover: u,
+    disabled: p,
+    className: d
+  } = t;
+  return /* @__PURE__ */ r(
+    L,
+    {
+      openWidth: s,
+      display: c,
+      disabled: p,
+      open: l === e,
+      className: d,
+      onClick: () => {
+        i(l === e ? null : e), a(!u);
+      },
+      onOutsideClick: () => {
+        i(null), a(!1);
+      },
+      onMouseOver: () => {
+        u && i(e);
+      },
+      children: n
+    }
+  );
+}
+function S(t) {
+  const { value: e, displayText: n, onClick: s, checked: c } = t;
+  return /* @__PURE__ */ v(
+    m,
+    {
+      className: f([
+        o.font,
+        o.item,
+        o.toggle,
+        o.hover
+      ]),
+      onClick: () => s(e),
+      children: [
+        /* @__PURE__ */ r("div", { className: o.toggle__check, children: c && /* @__PURE__ */ r(B, { size: 1.3, name: "check" }) }),
+        n
+      ]
+    }
+  );
+}
+_.MenuItemToggle = S;
+function P(t) {
+  const { value: e, displayText: n, onClick: s } = t;
+  return /* @__PURE__ */ r(
+    m,
+    {
+      className: f([o.font, o.item, o.hover]),
+      onClick: () => s(e),
+      children: n
+    }
+  );
+}
+_.MenuItem = P;
+function U() {
+  return /* @__PURE__ */ r("div", { className: o.separator });
+}
+_.Separator = U;
+function q(t) {
+  const { children: e } = t;
+  return /* @__PURE__ */ r(m, { className: o.menuBar, children: e });
+}
+q.Dropdown = _;
+export {
+  _ as Dropdown,
+  q as MenuBar
+};

package/dist/components/Modal.d.ts

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

package/dist/components/Modal.js

@@ -0,0 +1,25 @@
+import { jsx as m } from "react/jsx-runtime";
+import { classes as e } from "../common/react.js";
+import { computeBoxClassName as a, computeBoxProps as l } from "./Box.js";
+import { Dimmer as c } from "./Dimmer.js";
+import '../assets/Modal.css';const i = "_modal_1e7qt_9", d = {
+  modal: i
+};
+function x(s) {
+  const { className: r, children: t, ...o } = s;
+  return /* @__PURE__ */ m(c, { children: /* @__PURE__ */ m(
+    "div",
+    {
+      className: e([
+        d.modal,
+        r,
+        a(o)
+      ]),
+      ...l(o),
+      children: t
+    }
+  ) });
+}
+export {
+  x as Modal
+};

package/dist/components/NoticeBox.d.ts

@@ -0,0 +1,20 @@
+import { BoxProps } from './Box';
+
+type Props = ExclusiveProps & BoxProps;
+/** You MUST use only one or none */
+type NoticeType = 'info' | 'success' | 'danger';
+type None = {
+    [K in NoticeType]?: undefined;
+};
+type ExclusiveProps = None | (Omit<None, 'info'> & {
+    /** Blue notice */
+    info: boolean;
+}) | (Omit<None, 'success'> & {
+    /** Green notice */
+    success: boolean;
+}) | (Omit<None, 'danger'> & {
+    /** Red notice */
+    danger: boolean;
+});
+export declare function NoticeBox(props: Props): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/components/NoticeBox.js

@@ -0,0 +1,49 @@
+import { jsx as t } from "react/jsx-runtime";
+import { classes as a } from "../common/react.js";
+import { Box as y } from "./Box.js";
+import '../assets/NoticeBox.css';const m = "_noticeBox_56yom_17", i = "_color__black_56yom_28", g = "_color__white_56yom_33", b = "_color__red_56yom_38", d = "_color__orange_56yom_43", p = "_color__yellow_56yom_48", u = "_color__olive_56yom_53", w = "_color__green_56yom_58", f = "_color__teal_56yom_63", v = "_color__blue_56yom_68", x = "_color__violet_56yom_73", k = "_color__purple_56yom_78", B = "_color__pink_56yom_83", h = "_color__brown_56yom_88", N = "_color__grey_56yom_93", j = "_color__good_56yom_103", q = "_color__average_56yom_108", z = "_color__bad_56yom_113", A = "_color__label_56yom_118", C = "_info_56yom_123", D = "_success_56yom_128", E = "_warning_56yom_133", F = "_danger_56yom_138", o = {
+  noticeBox: m,
+  color__black: i,
+  color__white: g,
+  color__red: b,
+  color__orange: d,
+  color__yellow: p,
+  color__olive: u,
+  color__green: w,
+  color__teal: f,
+  color__blue: v,
+  color__violet: x,
+  color__purple: k,
+  color__pink: B,
+  color__brown: h,
+  color__grey: N,
+  "color__light-grey": "_color__light-grey_56yom_98",
+  color__good: j,
+  color__average: q,
+  color__bad: z,
+  color__label: A,
+  info: C,
+  success: D,
+  warning: E,
+  danger: F
+};
+function J(c) {
+  const { className: r, color: _, info: l, success: e, danger: n, ...s } = c;
+  return /* @__PURE__ */ t(
+    y,
+    {
+      className: a([
+        o.noticeBox,
+        _ && o["color__" + _],
+        l && o.info,
+        e && o.success,
+        n && o.danger,
+        r
+      ]),
+      ...s
+    }
+  );
+}
+export {
+  J as NoticeBox
+};