tgui-core 1.5.5 → 1.5.7

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/dist/components/index.d.ts

@@ -21,7 +21,6 @@ export { Image } from './Image';
 export { ImageButton } from './ImageButton';
 export { InfinitePlane } from './InfinitePlane';
 export { Input } from './Input';
-export { Interactive, type Interaction } from './Interactive';
 export { KeyListener } from './KeyListener';
 export { Knob } from './Knob';
 export { LabeledControls } from './LabeledControls';
@@ -30,7 +29,6 @@ export { MenuBar } from './MenuBar';
 export { Modal } from './Modal';
 export { NoticeBox } from './NoticeBox';
 export { NumberInput } from './NumberInput';
-export { Pointer } from './Pointer';
 export { Popper } from './Popper';
 export { ProgressBar } from './ProgressBar';
 export { RestrictedInput } from './RestrictedInput';