tgui-core 1.5.5 → 1.5.7

package/dist/components/Button.js

@@ -1,4 +1,4 @@
-import { jsx as i, jsxs as _, Fragment as K } from "react/jsx-runtime";
+import { jsx as r, jsxs as _, Fragment as K } from "react/jsx-runtime";
 import { useState as A, createRef as V, useEffect as $, useRef as z } from "react";
 import { KEY as D, isEscape as E } from "../common/keys.js";
 import { classes as F } from "../common/react.js";
@@ -6,55 +6,55 @@ import { computeBoxClassName as j, computeBoxProps as q } from "../common/ui.js"
 import { Box as O } from "./Box.js";
 import { Icon as S } from "./Icon.js";
 import { Tooltip as v } from "./Tooltip.js";
-function x(u) {
+function N(o) {
   const {
-    captureKeys: l = !0,
-    children: s,
+    captureKeys: s = !0,
+    children: u,
     circular: m,
     className: d,
-    color: c,
+    color: l,
     compact: h,
     content: B,
     disabled: t,
-    ellipsis: r,
-    fluid: o,
-    icon: e,
+    ellipsis: c,
+    fluid: e,
+    icon: i,
     iconColor: a,
     iconPosition: C,
-    iconRotation: N,
+    iconRotation: I,
     iconSize: R,
     iconSpin: P,
     onClick: f,
-    selected: g,
-    tooltip: b,
+    selected: x,
+    tooltip: g,
     tooltipPosition: w,
     verticalAlignContent: y,
-    ...I
-  } = u, n = B || s;
-  let k = /* @__PURE__ */ i(
+    ...b
+  } = o, n = B || u;
+  let k = /* @__PURE__ */ r(
     "div",
     {
       className: F([
         "Button",
-        o && "Button--fluid",
+        e && "Button--fluid",
         t && "Button--disabled",
-        g && "Button--selected",
+        x && "Button--selected",
         m && "Button--circular",
         h && "Button--compact",
         C && `Button--iconPosition--${C}`,
         y && "Button--flex",
-        y && o && "Button--flex--fluid",
+        y && e && "Button--flex--fluid",
         y && `Button--verticalAlignContent--${y}`,
-        c && typeof c == "string" ? `Button--color--${c}` : "Button--color--default",
+        l && typeof l == "string" ? `Button--color--${l}` : "Button--color--default",
         d,
-        j(I)
+        j(b)
       ]),
       tabIndex: t ? void 0 : 0,
       onClick: (p) => {
         !t && f && f(p);
       },
       onKeyDown: (p) => {
-        if (l) {
+        if (s) {
           if (p.key === D.Space || p.key === D.Enter) {
             p.preventDefault(), !t && f && f(p);
             return;
@@ -62,36 +62,36 @@ function x(u) {
           E(p.key) && p.preventDefault();
         }
       },
-      ...q(I),
+      ...q(b),
       children: /* @__PURE__ */ _("div", { className: "Button__content", children: [
-        e && C !== "right" && /* @__PURE__ */ i(
+        i && C !== "right" && /* @__PURE__ */ r(
           S,
           {
             mr: n ? 0.5 : 0,
-            name: e,
+            name: i,
             color: a,
-            rotation: N,
+            rotation: I,
             size: R,
             spin: P
           }
         ),
-        r ? /* @__PURE__ */ i(
+        c ? /* @__PURE__ */ r(
           "span",
           {
             className: F([
               "Button--ellipsis",
-              e && "Button__textMargin"
+              i && "Button__textMargin"
             ]),
             children: n
           }
         ) : n,
-        e && C === "right" && /* @__PURE__ */ i(
+        i && C === "right" && /* @__PURE__ */ r(
           S,
           {
             ml: n ? 0.5 : 0,
-            name: e,
+            name: i,
             color: a,
-            rotation: N,
+            rotation: I,
             size: R,
             spin: P
           }
@@ -99,78 +99,76 @@ function x(u) {
       ] })
     }
   );
-  return b && (k = /* @__PURE__ */ i(v, { content: b, position: w, children: k })), k;
+  return g && (k = /* @__PURE__ */ r(v, { content: g, position: w, children: k })), k;
 }
-function T(u) {
-  const { checked: l, ...s } = u;
-  return /* @__PURE__ */ i(
-    x,
+function T(o) {
+  const { checked: s, ...u } = o;
+  return /* @__PURE__ */ r(
+    N,
     {
       color: "transparent",
-      icon: l ? "check-square-o" : "square-o",
-      selected: l,
-      ...s
+      icon: s ? "check-square-o" : "square-o",
+      selected: s,
+      ...u
     }
   );
 }
-x.Checkbox = T;
-function L(u) {
+function L(o) {
   const {
-    children: l,
-    color: s,
+    children: s,
+    color: u,
     confirmColor: m = "bad",
     confirmContent: d = "Confirm?",
-    confirmIcon: c,
+    confirmIcon: l,
     ellipsis: h = !0,
     icon: B,
     onClick: t,
-    ...r
-  } = u, [o, e] = A(!1);
+    ...c
+  } = o, [e, i] = A(!1);
   function a(C) {
-    if (!o) {
-      e(!0);
+    if (!e) {
+      i(!0);
       return;
     }
-    t == null || t(C), e(!1);
+    t == null || t(C), i(!1);
   }
-  return /* @__PURE__ */ i(
-    x,
+  return /* @__PURE__ */ r(
+    N,
     {
-      icon: o ? c : B,
-      color: o ? m : s,
+      icon: e ? l : B,
+      color: e ? m : u,
       onClick: a,
-      ...r,
-      children: o ? d : l
+      ...c,
+      children: e ? d : s
     }
   );
 }
-x.Confirm = L;
-function M(u) {
+function M(o) {
   const {
-    children: l,
-    color: s = "default",
+    children: s,
+    color: u = "default",
     content: m,
     currentValue: d,
-    defaultValue: c,
+    defaultValue: l,
     disabled: h,
     fluid: B,
     icon: t,
-    iconRotation: r,
-    iconSpin: o,
-    maxLength: e,
+    iconRotation: c,
+    iconSpin: e,
+    maxLength: i,
     onCommit: a = () => null,
     placeholder: C,
-    tooltip: N,
+    tooltip: I,
     tooltipPosition: R,
     ...P
-  } = u, [f, g] = A(!1), b = V(), w = m || l;
+  } = o, [f, x] = A(!1), g = V(), w = m || s;
   function y(n) {
-    const k = b.current;
+    const k = g.current;
     if (!k) return;
-    k.value !== "" ? a(n, k.value) : c && a(n, c);
+    k.value !== "" ? a(n, k.value) : l && a(n, l);
   }
   $(() => {
-    const n = b.current;
+    const n = g.current;
     if (n && f) {
       n.value = d || "";
       try {
@@ -179,86 +177,86 @@ function M(u) {
       }
     }
   }, [f, d]);
-  let I = /* @__PURE__ */ _(
+  let b = /* @__PURE__ */ _(
     O,
     {
       className: F([
         "Button",
         B && "Button--fluid",
         h && "Button--disabled",
-        `Button--color--${s}`
+        `Button--color--${u}`
       ]),
       ...P,
-      onClick: () => g(!0),
+      onClick: () => x(!0),
       children: [
-        t && /* @__PURE__ */ i(S, { name: t, rotation: r, spin: o }),
-        /* @__PURE__ */ i("div", { children: w }),
-        /* @__PURE__ */ i(
+        t && /* @__PURE__ */ r(S, { name: t, rotation: c, spin: e }),
+        /* @__PURE__ */ r("div", { children: w }),
+        /* @__PURE__ */ r(
           "input",
           {
             disabled: !!h,
-            ref: b,
+            ref: g,
             className: "NumberInput__input",
             style: {
               display: f ? "" : "none",
               textAlign: "left"
             },
             onBlur: (n) => {
-              f && (g(!1), y(n));
+              f && (x(!1), y(n));
             },
             onKeyDown: (n) => {
               if (n.key === D.Enter) {
-                g(!1), y(n);
+                x(!1), y(n);
                 return;
               }
-              E(n.key) && g(!1);
+              E(n.key) && x(!1);
             }
           }
         )
       ]
     }
   );
-  return N && (I = /* @__PURE__ */ i(v, { content: N, position: R, children: I })), I;
+  return I && (b = /* @__PURE__ */ r(v, { content: I, position: R, children: b })), b;
 }
-x.Input = M;
-function Y(u) {
-  const { accept: l, multiple: s, onSelectFiles: m, ...d } = u, c = z(null);
+function Y(o) {
+  const { accept: s, multiple: u, onSelectFiles: m, ...d } = o, l = z(null);
   async function h(t) {
-    const r = Array.from(t).map((o) => {
-      const e = new FileReader();
+    const c = Array.from(t).map((e) => {
+      const i = new FileReader();
       return new Promise((a) => {
-        e.onload = () => a(e.result), e.readAsText(o);
+        i.onload = () => a(i.result), i.readAsText(e);
       });
     });
-    return await Promise.all(r);
+    return await Promise.all(c);
   }
   async function B(t) {
-    const r = t.target.files;
-    if (r != null && r.length) {
-      const o = await h(r);
-      m(s ? o : o[0]);
+    const c = t.target.files;
+    if (c != null && c.length) {
+      const e = await h(c);
+      m(u ? e : e[0]);
     }
   }
   return /* @__PURE__ */ _(K, { children: [
-    /* @__PURE__ */ i(x, { onClick: () => {
+    /* @__PURE__ */ r(N, { onClick: () => {
       var t;
-      return (t = c.current) == null ? void 0 : t.click();
+      return (t = l.current) == null ? void 0 : t.click();
     }, ...d }),
-    /* @__PURE__ */ i(
+    /* @__PURE__ */ r(
       "input",
       {
         hidden: !0,
         type: "file",
-        ref: c,
-        accept: l,
-        multiple: s,
+        ref: l,
+        accept: s,
+        multiple: u,
         onChange: B
       }
     )
   ] });
 }
-x.File = Y;
+((o) => {
+  o.Checkbox = T, o.Confirm = L, o.Input = M, o.File = Y;
+})(N || (N = {}));
 export {
-  x as Button,
-  T as ButtonCheckbox
+  N as Button
 };

package/dist/components/DmIcon.d.ts

@@ -1,6 +1,6 @@
 import { ReactNode } from 'react';
 import { BoxProps } from './Box';
-declare enum Direction {
+export declare enum Direction {
     NORTH = 1,
     SOUTH = 2,
     EAST = 4,

package/dist/components/DmIcon.js

@@ -1,21 +1,23 @@
-import { jsx as u } from "react/jsx-runtime";
-import { Image as $ } from "./Image.js";
-function x(o) {
-  var r;
+import { jsx as N } from "react/jsx-runtime";
+import { Image as e } from "./Image.js";
+var u = /* @__PURE__ */ ((T) => (T[T.NORTH = 1] = "NORTH", T[T.SOUTH = 2] = "SOUTH", T[T.EAST = 4] = "EAST", T[T.WEST = 8] = "WEST", T[T.NORTHEAST = 5] = "NORTHEAST", T[T.NORTHWEST = 9] = "NORTHWEST", T[T.SOUTHEAST = 6] = "SOUTHEAST", T[T.SOUTHWEST = 10] = "SOUTHWEST", T))(u || {});
+function $(T) {
+  var m;
   const {
-    className: l,
-    direction: t = 2,
-    fallback: n,
-    frame: c = 1,
-    icon_state: m,
-    icon: i,
-    movement: s = !1,
-    ...a
-  } = o, e = (r = Byond.iconRefMap) == null ? void 0 : r[i];
-  if (!e) return n;
-  const f = `${e}?state=${m}&dir=${t}&movement=${!!s}&frame=${c}`;
-  return /* @__PURE__ */ u($, { fixErrors: !0, src: f, ...a });
+    className: A,
+    direction: E = 2,
+    fallback: a,
+    frame: s = 1,
+    icon_state: H,
+    icon: O,
+    movement: f = !1,
+    ...r
+  } = T, S = (m = Byond.iconRefMap) == null ? void 0 : m[O];
+  if (!S) return a;
+  const R = `${S}?state=${H}&dir=${E}&movement=${!!f}&frame=${s}`;
+  return /* @__PURE__ */ N(e, { fixErrors: !0, src: R, ...r });
 }
 export {
-  x as DmIcon
+  u as Direction,
+  $ as DmIcon
 };

package/dist/components/Icon.d.ts

@@ -1,7 +1,7 @@
 import { BooleanLike } from '../common/react';
 import { BoxProps } from './Box';
 type Props = {
-    /** Icon name. See [icon list](https://fontawesome.com/v5/search?o=r&m=free) */
+    /** Icon name. @see https://fontawesome.com/v6/search?o=r&m=free */
     name: string;
 } & Partial<{
     /** Icon rotation, in degrees. */
@@ -11,6 +11,8 @@ type Props = {
     /** Whether an icon should be spinning. Good for load indicators. */
     spin: BooleanLike;
 }> & Omit<BoxProps, 'children'>;
+export declare function Icon(props: Props): import("react/jsx-runtime").JSX.Element;
+declare function IconStack(props: BoxProps): import("react/jsx-runtime").JSX.Element;
 /**
  * ## Icon
  * Renders one of the FontAwesome icons of your choice.
@@ -19,11 +21,21 @@ type Props = {
  * ```tsx
  * <Icon name="plus" />
  * ```
- * @url https://fontawesome.com/v5/search?o=r&m=free
+ * @url https://fontawesome.com/v6/search?o=r&m=free
  */
-export declare function Icon(props: Props): import("react/jsx-runtime").JSX.Element;
 export declare namespace Icon {
-    var Stack: typeof IconStack;
+    /**
+     * ## Icon.Stack
+     * Renders children icons on top of each other in order to make your own icon.
+     *
+     * @example
+     * ```tsx
+     * <Icon.Stack>
+     *   <Icon name="pen" />
+     *   <Icon name="slash" />
+     * </Icon.Stack>
+     * ```
+     */
+    const Stack: typeof IconStack;
 }
-declare function IconStack(props: BoxProps): import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/components/Icon.js

@@ -1,43 +1,45 @@
-import { jsx as m } from "react/jsx-runtime";
-import { classes as l } from "../common/react.js";
-import { computeBoxProps as p, computeBoxClassName as u } from "../common/ui.js";
+import { jsx as l } from "react/jsx-runtime";
+import { classes as p } from "../common/react.js";
+import { computeBoxProps as u, computeBoxClassName as N } from "../common/ui.js";
 const f = /-o$/;
-function d(c) {
-  const { name: s = "", size: o, spin: a, className: N, rotation: r, ...e } = c, n = e.style || {};
-  o && (n.fontSize = `${o * 100}%`), r && (n.transform = `rotate(${r}deg)`), e.style = n;
-  const x = p(e);
+function m(o) {
+  const { name: s = "", size: a, spin: e, className: x, rotation: r, ...c } = o, n = c.style || {};
+  a && (n.fontSize = `${a * 100}%`), r && (n.transform = `rotate(${r}deg)`), c.style = n;
+  const I = u(c);
   let t = "";
   if (s.startsWith("tg-"))
     t = s;
   else {
-    const I = f.test(s), i = s.replace(f, ""), S = !i.startsWith("fa-");
-    t = I ? "far " : "fas ", S && (t += "fa-"), t += i, a && (t += " fa-spin");
+    const S = f.test(s), i = s.replace(f, ""), d = !i.startsWith("fa-");
+    t = S ? "far " : "fas ", d && (t += "fa-"), t += i, e && (t += " fa-spin");
   }
-  return /* @__PURE__ */ m(
+  return /* @__PURE__ */ l(
     "i",
     {
-      className: l([
+      className: p([
         "Icon",
         t,
-        N,
-        u(e)
+        x,
+        N(c)
       ]),
-      ...x
+      ...I
     }
   );
 }
-function g(c) {
-  const { className: s, children: o, ...a } = c;
-  return /* @__PURE__ */ m(
+function g(o) {
+  const { className: s, children: a, ...e } = o;
+  return /* @__PURE__ */ l(
     "span",
     {
-      className: l(["IconStack", s, u(a)]),
-      ...p(a),
-      children: o
+      className: p(["IconStack", s, N(e)]),
+      ...u(e),
+      children: a
     }
   );
 }
-d.Stack = g;
+((o) => {
+  o.Stack = g;
+})(m || (m = {}));
 export {
-  d as Icon
+  m as Icon
 };

package/dist/components/ImageButton.d.ts

@@ -2,6 +2,7 @@ import { Placement } from '@popperjs/core';
 import { ReactNode } from 'react';
 import { BooleanLike } from '../common/react';
 import { BoxProps } from './Box';
+import { Direction } from './DmIcon';
 type Props = Partial<{
     /** Asset cache. Example: `asset={['assetname32x32', thing.key]}` */
     asset: string[];
@@ -15,11 +16,11 @@ type Props = Partial<{
      */
     buttons: ReactNode;
     /**
-     * Enables alternate layout for `buttons` container.
-     * Without fluid, buttons will be on top and with `pointer-events: none`, useful for text info.
-     * With fluid, buttons will be in "hamburger" style.
+     * Same as buttons, but. Have disabled pointer-events on content inside if non-fluid.
+     * Fluid version have humburger layout.
+     * Can be used with buttons prop.
      */
-    buttonsAlt: boolean;
+    buttonsAlt: ReactNode;
     /** Content under image. Or on the right if fluid. */
     children: ReactNode;
     /** Applies a CSS class to the element. */
@@ -38,6 +39,8 @@ type Props = Partial<{
     dmIcon: string | null;
     /** Parameter `icon_state` of component `DmIcon`. */
     dmIconState: string | null;
+    /** Parameter `direction` of component `DmIcon`. */
+    dmDirection: Direction;
     /**
      * Changes the layout of the button, making it fill the entire horizontally available space.
      * Allows the use of `title`
@@ -45,7 +48,7 @@ type Props = Partial<{
     fluid: boolean;
     /** Parameter responsible for the size of the image, component and standard "stubs". */
     imageSize: number;
-    /** Prop `src` of Image component. Example: `imageSrc={resolveAsset(thing.image}` */
+    /** Prop `src` of Image component. Example: `imageSrc={resolveAsset(thing.image)}` */
     imageSrc: string;
     /** Called when button is clicked with LMB. */
     onClick: (e: any) => void;
@@ -60,5 +63,11 @@ type Props = Partial<{
     /** Position of the tooltip. See [`Popper`](#Popper) for valid options. */
     tooltipPosition: Placement;
 }> & BoxProps;
+/**
+ * Stylized button, with the ability to easily and simply insert any picture into it.
+ * - Without image, will be default question icon.
+ * - If an image is specified but for some reason cannot be displayed, there will be a spinner fallback until it is loaded.
+ * - Component has no **hover** effects, if `onClick` or `onRightClick` is not specified.
+ */
 export declare function ImageButton(props: Props): import("react/jsx-runtime").JSX.Element;
 export {};