tgui-core 1.5.6 → 1.5.7

package/dist/components/AnimatedNumber.d.ts

@@ -9,13 +9,13 @@ type Props = {
      * If provided, a function that formats the inner string. By default,
      * attempts to match the numeric precision of `value`.
      */
-    format?: (value: number) => string;
+    format: (value: number) => string;
     /**
      * If provided, the initial value displayed. By default, the same as `value`.
      * If `initial` and `value` are different, the component immediately starts
      * animating.
      */
-    initial?: number;
+    initial: number;
 }>;
 /**
  * ## AnimatedNumber

package/dist/components/Button.d.ts

@@ -54,21 +54,11 @@ type Props = Partial<{
     /** Align content vertically using flex. Use lineHeight if the height is static. */
     verticalAlignContent: string;
 }> & EllipsisUnion & BoxProps;
-/**
- * ## Button
- * Buttons allow users to take actions, and make choices, with a single click.
- */
 export declare function Button(props: Props): import("react/jsx-runtime").JSX.Element;
-export declare namespace Button {
-    var Checkbox: typeof ButtonCheckbox;
-    var Confirm: typeof ButtonConfirm;
-    var Input: typeof ButtonInput;
-    var File: typeof ButtonFile;
-}
 type CheckProps = Partial<{
     checked: BooleanLike;
 }> & Props;
-export declare function ButtonCheckbox(props: CheckProps): import("react/jsx-runtime").JSX.Element;
+declare function ButtonCheckbox(props: CheckProps): import("react/jsx-runtime").JSX.Element;
 type ConfirmProps = Partial<{
     confirmColor: string;
     confirmContent: ReactNode;
@@ -78,7 +68,6 @@ declare function ButtonConfirm(props: ConfirmProps): import("react/jsx-runtime")
 type InputProps = Partial<{
     currentValue: string;
     defaultValue: string;
-    fluid: boolean;
     maxLength: number;
     onCommit: (e: any, value: string) => void;
     placeholder: string;
@@ -90,4 +79,32 @@ type FileProps = {
     onSelectFiles: (files: string | string[]) => void;
 } & Props;
 declare function ButtonFile(props: FileProps): import("react/jsx-runtime").JSX.Element;
+/**
+ * ## Button
+ * Buttons allow users to take actions, and make choices, with a single click.
+ */
+export declare namespace Button {
+    /**
+     * ## Button.Checkbox
+     * A ghetto checkbox, made entirely using existing Button API.
+     */
+    const Checkbox: typeof ButtonCheckbox;
+    /**
+     * ## Button.Confirm
+     * A button with an extra confirmation step, using native button component.
+     */
+    const Confirm: typeof ButtonConfirm;
+    /**
+     * ## Button.Input
+     * A button that turns into an input box after the first click.
+     *
+     * Turns back into a button after the user hits enter, defocuses, or hits escape. Enter and defocus commit, while escape cancels.
+     */
+    const Input: typeof ButtonInput;
+    /**
+     * ## Button.File
+     * Accepts file input, based on the native element.
+     */
+    const File: typeof ButtonFile;
+}
 export {};

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 {};

package/dist/components/ImageButton.js

@@ -1,135 +1,151 @@
-import { jsxs as g, jsx as t } from "react/jsx-runtime";
+import { jsxs as I, jsx as t } from "react/jsx-runtime";
 import { classes as l } from "../common/react.js";
-import { computeBoxProps as A } from "../common/ui.js";
-import { DmIcon as D } from "./DmIcon.js";
-import { Icon as F } from "./Icon.js";
-import { Image as j } from "./Image.js";
-import { Stack as y } from "./Stack.js";
-import { Tooltip as z } from "./Tooltip.js";
-function H(N) {
+import { computeBoxProps as S } from "../common/ui.js";
+import { DmIcon as z } from "./DmIcon.js";
+import { Icon as A } from "./Icon.js";
+import { Image as D } from "./Image.js";
+import { Stack as $ } from "./Stack.js";
+import { Tooltip as E } from "./Tooltip.js";
+function W(d) {
   const {
-    asset: f,
-    base64: r,
-    buttons: m,
-    buttonsAlt: h,
-    children: i,
-    className: k,
-    color: e,
-    disabled: a,
-    dmFallback: I,
+    asset: u,
+    base64: c,
+    buttons: i,
+    buttonsAlt: p,
+    children: a,
+    className: N,
+    color: o,
+    disabled: r,
+    dmFallback: k,
     dmIcon: b,
     dmIconState: x,
-    fluid: c,
-    imageSize: o = 64,
-    imageSrc: d,
-    onClick: s,
-    onRightClick: u,
-    selected: B,
-    title: C,
+    fluid: e,
+    imageSize: n = 64,
+    imageSrc: g,
+    onClick: m,
+    onRightClick: f,
+    selected: C,
+    title: B,
     tooltip: _,
     tooltipPosition: w,
     ...v
-  } = N;
-  function $(n, S) {
-    return /* @__PURE__ */ t(y, { height: `${o}px`, width: `${o}px`, children: /* @__PURE__ */ t(y.Item, { grow: !0, textAlign: "center", align: "center", children: /* @__PURE__ */ t(
-      F,
-      {
-        spin: S,
-        name: n,
-        color: "gray",
-        style: { fontSize: `calc(${o}px * 0.75)` }
-      }
-    ) }) });
-  }
-  let p = /* @__PURE__ */ g(
+  } = d;
+  let h = /* @__PURE__ */ I(
     "div",
     {
       className: l([
         "container",
-        m && "hasButtons",
-        !s && !u && "noAction",
-        B && "ImageButton--selected",
-        a && "ImageButton--disabled",
-        e && typeof e == "string" ? `ImageButton--color__${e}` : "ImageButton--color__default"
+        i || e && p && "hasButtons",
+        !m && !f && "noAction",
+        C && "ImageButton--selected",
+        r && "ImageButton--disabled",
+        o && typeof o == "string" ? `ImageButton--color__${o}` : "ImageButton--color__default"
       ]),
-      tabIndex: a ? void 0 : 0,
-      onClick: (n) => {
-        !a && s && s(n);
+      tabIndex: r ? void 0 : 0,
+      onClick: (s) => {
+        !r && m && m(s);
       },
-      onKeyDown: (n) => {
-        n.key === "Enter" && !a && s && s(n);
+      onKeyDown: (s) => {
+        s.key === "Enter" && !r && m && m(s);
       },
-      onContextMenu: (n) => {
-        n.preventDefault(), !a && u && u(n);
+      onContextMenu: (s) => {
+        s.preventDefault(), !r && f && f(s);
       },
-      style: { width: c ? "auto" : `calc(${o}px + 0.5em + 2px)` },
+      style: { width: e ? "auto" : `calc(${n}px + 0.5em + 2px)` },
       children: [
-        /* @__PURE__ */ t("div", { className: "image", children: r || f || d ? /* @__PURE__ */ t(
-          j,
+        /* @__PURE__ */ t("div", { className: "image", children: c || u || g ? /* @__PURE__ */ t(
+          D,
           {
-            className: l(!r && !d && f || []),
-            src: r ? `data:image/png;base64,${r}` : d,
-            height: `${o}px`,
-            width: `${o}px`
+            className: l(!c && !g && u || []),
+            src: c ? `data:image/png;base64,${c}` : g,
+            height: `${n}px`,
+            width: `${n}px`
           }
         ) : b && x ? /* @__PURE__ */ t(
-          D,
+          z,
           {
             icon: b,
             icon_state: x,
-            fallback: I || $("spinner", !0),
-            height: `${o}px`,
-            width: `${o}px`
+            fallback: k || /* @__PURE__ */ t(y, { icon: "spinner", spin: !0, size: n }),
+            height: `${n}px`,
+            width: `${n}px`
           }
-        ) : $("question", !1) }),
-        c ? /* @__PURE__ */ g("div", { className: "info", children: [
-          C && /* @__PURE__ */ t("span", { className: l(["title", i && "divider"]), children: C }),
-          i && /* @__PURE__ */ t("span", { className: "contentFluid", children: i })
-        ] }) : i && /* @__PURE__ */ t(
+        ) : /* @__PURE__ */ t(y, { icon: "question" }) }),
+        e ? /* @__PURE__ */ I("div", { className: "info", children: [
+          B && /* @__PURE__ */ t("span", { className: l(["title", a && "divider"]), children: B }),
+          a && /* @__PURE__ */ t("span", { className: "contentFluid", children: a })
+        ] }) : a && /* @__PURE__ */ t(
           "span",
           {
             className: l([
               "content",
-              B && "ImageButton--contentSelected",
-              a && "ImageButton--contentDisabled",
-              e && typeof e == "string" ? `ImageButton--contentColor__${e}` : "ImageButton--contentColor__default"
+              C && "ImageButton--contentSelected",
+              r && "ImageButton--contentDisabled",
+              o && typeof o == "string" ? `ImageButton--contentColor__${o}` : "ImageButton--contentColor__default"
             ]),
-            children: i
+            children: a
           }
         )
       ]
     }
   );
-  return _ && (p = /* @__PURE__ */ t(z, { content: _, position: w, children: p })), /* @__PURE__ */ g(
+  return _ && (h = /* @__PURE__ */ t(E, { content: _, position: w, children: h })), /* @__PURE__ */ I(
     "div",
     {
       className: l([
         "ImageButton",
-        c && "ImageButton--fluid",
-        k
+        e && "ImageButton--fluid",
+        N
       ]),
-      ...A(v),
+      ...S(v),
       children: [
-        p,
-        m && /* @__PURE__ */ t(
+        h,
+        i && /* @__PURE__ */ t(
           "div",
           {
             className: l([
               "buttonsContainer",
-              h && "buttonsAltContainer",
-              !i && "buttonsEmpty",
-              c && e && typeof e == "string" ? `ImageButton--buttonsContainerColor__${e}` : c && "ImageButton--buttonsContainerColor__default"
+              !a && "buttonsEmpty",
+              e && o && typeof o == "string" ? `ImageButton--buttonsContainerColor__${o}` : e && "ImageButton--buttonsContainerColor__default"
             ]),
             style: {
-              width: h ? `calc(${o}px + 0.5em)` : "auto"
+              width: "auto"
             },
-            children: m
+            children: i
+          }
+        ),
+        p && /* @__PURE__ */ t(
+          "div",
+          {
+            className: l([
+              "buttonsContainer",
+              "buttonsAltContainer",
+              !a && "buttonsEmpty",
+              e && o && typeof o == "string" ? `ImageButton--buttonsContainerColor__${o}` : e && "ImageButton--buttonsContainerColor__default"
+            ]),
+            style: {
+              width: `calc(${n}px + ${e ? 0 : 0.5}em)`,
+              maxWidth: e ? "auto" : `calc(${n}px +  0.5em)`
+            },
+            children: p
           }
         )
       ]
     }
   );
 }
+function y(d) {
+  const { icon: u, spin: c = !1, size: i = 64 } = d;
+  return /* @__PURE__ */ t($, { height: `${i}px`, width: `${i}px`, children: /* @__PURE__ */ t($.Item, { grow: !0, textAlign: "center", align: "center", children: /* @__PURE__ */ t(
+    A,
+    {
+      spin: c,
+      name: u,
+      color: "gray",
+      style: { fontSize: `calc(${i}px * 0.75)` }
+    }
+  ) }) });
+}
 export {
-  H as ImageButton
+  W as ImageButton
 };

package/dist/components/LabeledList.d.ts

@@ -1,37 +1,6 @@
 import { PropsWithChildren, ReactNode } from 'react';
 import { BooleanLike } from '../common/react';
-/**
- * ## LabeledList
- * LabeledList is a continuous, vertical list of text and other content, where
- * every item is labeled.
- *
- * It works just like a two column table, where first column is labels, and
- * second column is content.
- *
- * @example
- * ```tsx
- * <LabeledList>
- *   <LabeledList.Item label="Item">Content</LabeledList.Item>
- * </LabeledList>
- * ```
- *
- * If you want to have a button on the right side of an item (for example,
- * to perform some sort of action), there is a way to do that:
- *
- * @example
- * ```tsx
- * <LabeledList>
- *   <LabeledList.Item label="Item" buttons={<Button>Click me!</Button>}>
- *     Content
- *   </LabeledList.Item>
- * </LabeledList>
- * ```
- */
 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;
@@ -80,4 +49,38 @@ type LabeledListDividerProps = {
     size?: number;
 };
 declare function LabeledListDivider(props: LabeledListDividerProps): import("react/jsx-runtime").JSX.Element;
+/**
+ * ## LabeledList
+ * LabeledList is a continuous, vertical list of text and other content, where
+ * every item is labeled.
+ *
+ * It works just like a two column table, where first column is labels, and
+ * second column is content.
+ *
+ * @example
+ * ```tsx
+ * <LabeledList>
+ *   <LabeledList.Item label="Item">Content</LabeledList.Item>
+ * </LabeledList>
+ * ```
+ *
+ * If you want to have a button on the right side of an item (for example,
+ * to perform some sort of action), there is a way to do that:
+ *
+ * @example
+ * ```tsx
+ * <LabeledList>
+ *   <LabeledList.Item label="Item" buttons={<Button>Click me!</Button>}>
+ *     Content
+ *   </LabeledList.Item>
+ * </LabeledList>
+ * ```
+ */
+export declare namespace LabeledList {
+    /**
+     * Adds some empty space between LabeledList items.
+     */
+    const Divider: typeof LabeledListDivider;
+    const Item: typeof LabeledListItem;
+}
 export {};

package/dist/components/LabeledList.js

@@ -1,29 +1,29 @@
-import { jsx as e, jsxs as d } from "react/jsx-runtime";
+import { jsx as l, jsxs as d } from "react/jsx-runtime";
 import { classes as c } from "../common/react.js";
 import { unit as g } from "../common/ui.js";
 import { Box as r } from "./Box.js";
 import { Divider as x } from "./Divider.js";
 import { Tooltip as N } from "./Tooltip.js";
-function b(l) {
-  const { children: t } = l;
-  return /* @__PURE__ */ e("table", { className: "LabeledList", children: /* @__PURE__ */ e("tbody", { children: t }) });
+function b(e) {
+  const { children: t } = e;
+  return /* @__PURE__ */ l("table", { className: "LabeledList", children: /* @__PURE__ */ l("tbody", { children: t }) });
 }
-function v(l) {
+function v(e) {
   const {
     className: t,
-    label: a,
+    label: o,
     labelColor: m = "label",
     labelWrap: L,
     color: p,
     textAlign: _,
-    buttons: o,
+    buttons: a,
     content: f,
     children: h,
     verticalAlign: s = "baseline",
     tooltip: n
-  } = l;
+  } = e;
   let i;
-  a && (i = a, typeof a == "string" && (i += ":")), n !== void 0 && (i = /* @__PURE__ */ e(N, { content: n, children: /* @__PURE__ */ e(
+  o && (i = o, typeof o == "string" && (i += ":")), n !== void 0 && (i = /* @__PURE__ */ l(N, { content: n, children: /* @__PURE__ */ l(
     r,
     {
       as: "span",
@@ -33,7 +33,7 @@ function v(l) {
       children: i
     }
   ) }));
-  const u = /* @__PURE__ */ e(
+  const u = /* @__PURE__ */ l(
     r,
     {
       as: "td",
@@ -56,7 +56,7 @@ function v(l) {
         color: p,
         textAlign: _,
         className: "LabeledList__cell",
-        colSpan: o ? void 0 : 2,
+        colSpan: a ? void 0 : 2,
         verticalAlign: s,
         children: [
           f,
@@ -64,13 +64,12 @@ function v(l) {
         ]
       }
     ),
-    o && /* @__PURE__ */ e("td", { className: "LabeledList__cell LabeledList__buttons", children: o })
+    a && /* @__PURE__ */ l("td", { className: "LabeledList__cell LabeledList__buttons", children: a })
   ] });
 }
-b.Item = v;
-function y(l) {
-  const t = l.size ? g(Math.max(0, l.size - 1)) : 0;
-  return /* @__PURE__ */ e("tr", { className: "LabeledList__row", children: /* @__PURE__ */ e(
+function y(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,
@@ -78,11 +77,13 @@ function y(l) {
         paddingTop: t,
         paddingBottom: t
       },
-      children: /* @__PURE__ */ e(x, {})
+      children: /* @__PURE__ */ l(x, {})
     }
   ) });
 }
-b.Divider = y;
+((e) => {
+  e.Divider = y, e.Item = v;
+})(b || (b = {}));
 export {
   b as LabeledList
 };

package/dist/components/Table.d.ts

@@ -3,6 +3,24 @@ type Props = Partial<{
     /** Collapses table to the smallest possible size. */
     collapsing: boolean;
 }> & BoxProps;
+export declare function Table(props: Props): import("react/jsx-runtime").JSX.Element;
+type RowProps = Partial<{
+    /** Whether this is a header cell. */
+    header: boolean;
+}> & BoxProps;
+declare function TableRow(props: RowProps): import("react/jsx-runtime").JSX.Element;
+type CellProps = Partial<{
+    /** Additional columns for this cell to expand, assuming there is room. */
+    colSpan: number;
+    /** Collapses table cell to the smallest possible size,
+    and stops any text inside from wrapping. */
+    collapsing: boolean;
+    /** Whether this is a header cell. */
+    header: boolean;
+    /** Rows for this cell to expand, assuming there is room. */
+    rowSpan: number;
+}> & BoxProps;
+declare function TableCell(props: CellProps): import("react/jsx-runtime").JSX.Element;
 /**
  * ## Table
  * A straight forward mapping to a standard html table, which is slightly
@@ -21,26 +39,16 @@ type Props = Partial<{
  * </Table>
  * ```
  */
-export declare function Table(props: Props): import("react/jsx-runtime").JSX.Element;
 export declare namespace Table {
-    var Row: typeof TableRow;
-    var Cell: typeof TableCell;
+    /**
+     * ## Table.Cell
+     * A straight forward mapping to `<td>` element.
+     */
+    const Cell: typeof TableCell;
+    /**
+     * ## Table.Row
+     * A straight forward mapping to `<tr>` element.
+     */
+    const Row: typeof TableRow;
 }
-type RowProps = Partial<{
-    /** Whether this is a header cell. */
-    header: boolean;
-}> & BoxProps;
-declare function TableRow(props: RowProps): import("react/jsx-runtime").JSX.Element;
-type CellProps = Partial<{
-    /** Additional columns for this cell to expand, assuming there is room. */
-    colSpan: number;
-    /** Collapses table cell to the smallest possible size,
-    and stops any text inside from wrapping. */
-    collapsing: boolean;
-    /** Whether this is a header cell. */
-    header: boolean;
-    /** Rows for this cell to expand, assuming there is room. */
-    rowSpan: number;
-}> & BoxProps;
-declare function TableCell(props: CellProps): import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/components/Table.js

@@ -17,7 +17,7 @@ function m(e) {
     }
   );
 }
-function i(e) {
+function b(e) {
   const { className: l, header: a, ...s } = e;
   return /* @__PURE__ */ c(
     "tr",
@@ -32,9 +32,8 @@ function i(e) {
     }
   );
 }
-m.Row = i;
-function T(e) {
-  const { className: l, collapsing: a, colSpan: s, header: o, ...b } = e;
+function _(e) {
+  const { className: l, collapsing: a, colSpan: s, header: o, ...i } = e;
   return /* @__PURE__ */ c(
     "td",
     {
@@ -46,11 +45,13 @@ function T(e) {
         t(e)
       ]),
       colSpan: s,
-      ...n(b)
+      ...n(i)
     }
   );
 }
-m.Cell = T;
+((e) => {
+  e.Cell = _, e.Row = b;
+})(m || (m = {}));
 export {
   m as Table
 };

package/dist/components/Tabs.d.ts

@@ -13,6 +13,22 @@ type Props = Partial<{
     /** Use a vertical configuration, where tabs will be stacked vertically. */
     vertical: boolean;
 }> & BoxProps;
+export declare function Tabs(props: Props): import("react/jsx-runtime").JSX.Element;
+type TabProps = Partial<{
+    /** Font awesome icon. @see https://fontawesome.com/v6/search?o=r&m=free */
+    icon: string;
+    /** Causes the icon to spin */
+    iconSpin: boolean;
+    /** Left slot content */
+    leftSlot: ReactNode;
+    /** Called when element is clicked */
+    onClick: (e?: any) => void;
+    /** Right slot content */
+    rightSlot: ReactNode;
+    /** Whether the tab is selected */
+    selected: boolean;
+}> & BoxProps;
+declare function TabItem(props: TabProps): import("react/jsx-runtime").JSX.Element;
 /**
  *  ## Tabs
  * Tabs make it easy to explore and switch between different views.
@@ -71,22 +87,12 @@ type Props = Partial<{
  * </Section>
  * ```
  */
-export declare function Tabs(props: Props): import("react/jsx-runtime").JSX.Element;
 export declare namespace Tabs {
-    var Tab: (props: TabProps) => import("react/jsx-runtime").JSX.Element;
+    /**
+     * ## Tabs.Tab
+     * An individual tab element. Tabs function like buttons, so they inherit
+     * a lot of `Button` props.
+     */
+    const Tab: typeof TabItem;
 }
-type TabProps = Partial<{
-    /** Font awesome icon. */
-    icon: string;
-    /** Causes the icon to spin */
-    iconSpin: boolean;
-    /** Left slot content */
-    leftSlot: ReactNode;
-    /** Called when element is clicked */
-    onClick: (e?: any) => void;
-    /** Right slot content */
-    rightSlot: ReactNode;
-    /** Whether the tab is selected */
-    selected: boolean;
-}> & BoxProps;
 export {};

package/dist/components/Tabs.js

@@ -1,62 +1,65 @@
-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 "../common/ui.js";
-import { Icon as N } from "./Icon.js";
-function v(l) {
-  const { className: c, vertical: i, fill: o, fluid: e, children: r, ...s } = l;
+import { jsx as a, jsxs as N } from "react/jsx-runtime";
+import { classes as f, canRender as d } from "../common/react.js";
+import { computeBoxClassName as h, computeBoxProps as p } from "../common/ui.js";
+import { Icon as v } from "./Icon.js";
+function T(e) {
+  const { className: i, vertical: c, fill: o, fluid: s, children: r, ...l } = e;
   return /* @__PURE__ */ a(
     "div",
     {
-      className: T([
+      className: f([
         "Tabs",
-        i ? "Tabs--vertical" : "Tabs--horizontal",
+        c ? "Tabs--vertical" : "Tabs--horizontal",
         o && "Tabs--fill",
-        e && "Tabs--fluid",
-        c,
-        f(s)
+        s && "Tabs--fluid",
+        i,
+        h(l)
       ]),
-      ...h(s),
+      ...p(l),
       children: r
     }
   );
 }
-function x(l) {
+function x(e) {
   const {
-    className: c,
-    selected: i,
+    className: i,
+    selected: c,
     color: o,
-    icon: e,
+    icon: s,
     iconSpin: r,
-    leftSlot: s,
+    leftSlot: l,
     rightSlot: t,
-    children: p,
+    children: u,
     onClick: n,
     ...m
-  } = l, _ = (b) => {
+  } = e;
+  function _(b) {
     n && (n(b), b.target.blur());
-  };
-  return /* @__PURE__ */ u(
+  }
+  return /* @__PURE__ */ N(
     "div",
     {
-      className: T([
+      className: f([
         "Tab",
         "Tabs__Tab",
         `Tab--color--${o}`,
-        i && "Tab--selected",
-        c,
-        f(m)
+        c && "Tab--selected",
+        i,
+        h(m)
       ]),
       onClick: _,
-      ...h(m),
+      ...p(m),
       children: [
-        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(l) && /* @__PURE__ */ a("div", { className: "Tab__left", children: l }) || !!s && /* @__PURE__ */ a("div", { className: "Tab__left", children: /* @__PURE__ */ a(v, { name: s, spin: r }) }),
+        /* @__PURE__ */ a("div", { className: "Tab__text", children: u }),
         d(t) && /* @__PURE__ */ a("div", { className: "Tab__right", children: t })
       ]
     }
   );
 }
-v.Tab = x;
+((e) => {
+  e.Tab = x;
+})(T || (T = {}));
 export {
-  v as Tabs
+  T as Tabs
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "tgui-core",
-  "version": "1.5.6",
+  "version": "1.5.7",
   "description": "TGUI core component library",
   "keywords": ["TGUI", "library", "typescript"],
   "files": ["dist"],