tgui-core 1.5.6 → 1.6.1

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