tgui-core 1.5.6 → 1.6.1

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/Collapsible.d.ts

@@ -1,4 +1,4 @@
-import { ReactNode } from 'react';
+import { CSSProperties, ReactNode } from 'react';
 import { BoxProps } from './Box';
 type Props = Partial<{
     /** Buttons or other content to render inline with the button */
@@ -11,6 +11,8 @@ type Props = Partial<{
     open: boolean;
     /** Text to display on the button for collapsing */
     title: ReactNode;
+    /** Custom styles for the child nodes */
+    childStyles: CSSProperties;
 }> & BoxProps;
 /**
  * ## Collapsible

package/dist/components/Collapsible.js

@@ -1,35 +1,36 @@
-import { jsxs as n, jsx as e } from "react/jsx-runtime";
-import { useState as p } from "react";
-import { Box as t } from "./Box.js";
-import { Button as b } from "./Button.js";
-function x(o) {
+import { jsxs as i, jsx as e } from "react/jsx-runtime";
+import { useState as b } from "react";
+import { Box as n } from "./Box.js";
+import { Button as u } from "./Button.js";
+function T(o) {
   const {
     children: r,
     child_mt: s = 1,
-    color: m,
-    title: a,
-    buttons: c,
-    icon: i,
-    ...d
-  } = o, [l, h] = p(o.open);
-  return /* @__PURE__ */ n(t, { mb: 1, children: [
-    /* @__PURE__ */ n("div", { className: "Table", children: [
+    childStyles: m,
+    color: a,
+    title: d,
+    buttons: t,
+    icon: c,
+    ...h
+  } = o, [l, p] = b(o.open);
+  return /* @__PURE__ */ i(n, { mb: 1, children: [
+    /* @__PURE__ */ i("div", { className: "Table", children: [
       /* @__PURE__ */ e("div", { className: "Table__cell", children: /* @__PURE__ */ e(
-        b,
+        u,
         {
           fluid: !0,
-          color: m,
-          icon: i || (l ? "chevron-down" : "chevron-right"),
-          onClick: () => h(!l),
-          ...d,
-          children: a
+          color: a,
+          icon: c || (l ? "chevron-down" : "chevron-right"),
+          onClick: () => p(!l),
+          ...h,
+          children: d
         }
       ) }),
-      c && /* @__PURE__ */ e("div", { className: "Table__cell Table__cell--collapsing", children: c })
+      t && /* @__PURE__ */ e("div", { className: "Table__cell Table__cell--collapsing", children: t })
     ] }),
-    l && /* @__PURE__ */ e(t, { mt: s, children: r })
+    l && /* @__PURE__ */ e(n, { mt: s, style: m, children: r })
   ] });
 }
 export {
-  x as Collapsible
+  T as Collapsible
 };

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