tgui-core 2.0.2 → 2.0.4

package/dist/components/Button.js

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

package/dist/components/DraggableControl.d.ts

@@ -37,8 +37,6 @@ type Props = {
     step: number;
     /** The step size in pixels. */
     stepPixelSize: number;
-    /** The number of milliseconds to suppress flickering. */
-    suppressFlicker: number;
     /** Whether to unclamp the value. */
     unclamped: boolean;
     /** The unit of the value. */

package/dist/components/DraggableControl.js

@@ -1,132 +1,111 @@
-import { jsxs as W, Fragment as Z, jsx as P } from "react/jsx-runtime";
-import { useState as y, useRef as c, useEffect as C } from "react";
-import { KEY as Y } from "../common/keys.js";
-import { clamp as F } from "../common/math.js";
-import { AnimatedNumber as ee } from "./AnimatedNumber.js";
-const te = 400;
-function K(r, p) {
-  return r.screenX * p[0] + r.screenY * p[1];
+import { jsxs as $, Fragment as q, jsx as D } from "react/jsx-runtime";
+import { useState as F, useRef as i, useEffect as J } from "react";
+import { KEY as Q, isEscape as W } from "../common/keys.js";
+import { clamp as b } from "../common/math.js";
+import { AnimatedNumber as Z } from "./AnimatedNumber.js";
+const C = 400, x = -1;
+function A(n, m) {
+  return n.screenX * m[0] + n.screenY * m[1];
 }
-function se(r) {
+function ie(n) {
   const {
     // Our props
-    animated: p,
-    children: M,
-    dragMatrix: V = [1, 0],
-    format: E,
-    maxValue: g = Number.POSITIVE_INFINITY,
-    minValue: l = Number.NEGATIVE_INFINITY,
-    onChange: s,
-    onDrag: a,
-    step: o = 1,
+    animated: m,
+    children: L,
+    dragMatrix: S = [1, 0],
+    format: g,
+    maxValue: N = Number.POSITIVE_INFINITY,
+    minValue: o = Number.NEGATIVE_INFINITY,
+    onChange: a,
+    onDrag: l,
+    step: s = 1,
     stepPixelSize: O = 1,
-    suppressFlicker: S = 50,
-    unclamped: j,
-    unit: h,
-    updateRate: w = te,
+    unclamped: Y,
+    unit: V,
+    updateRate: k = C,
     // Box props
-    fontSize: z,
-    height: B,
+    fontSize: K,
+    height: P,
     lineHeight: U
-  } = r, [G, T] = y(r.value), [v, f] = y(!1), [k, D] = y(!1), i = c(!1), n = c(0), m = c(0), R = c(null), N = c(null), I = c(null), b = c(null);
-  C(() => {
-    T(r.value);
-  }, [r.value]);
-  function _(e) {
-    if (document.body.style["pointer-events"] = "auto", b.current && clearTimeout(b.current), I.current && clearInterval(I.current), i.current = !1, f(!1), m.current = 0, document.removeEventListener("mousemove", x), document.removeEventListener("mouseup", _), L(), s == null || s(e, n.current), a == null || a(e, n.current), N.current) {
-      const t = N.current;
-      t.value = n.toString(), setTimeout(() => {
+  } = n, [ee, I] = F(n.value), [d, v] = F(!1), r = i(!1), u = i(n.value), c = i(0), E = i(x), y = i(null), T = i(null), p = i(null);
+  J(() => {
+    n.value !== u.current && (u.current = n.value, I(n.value));
+  }, [n.value]);
+  function j(e) {
+    d || (document.body.style["pointer-events"] = "none", E.current = A(e.nativeEvent, S), c.current = n.value, r.current = !0, document.addEventListener("mouseup", _), p.current = setTimeout(() => {
+      w(e.nativeEvent);
+    }, 100));
+  }
+  function w(e) {
+    if (r.current)
+      document.addEventListener("mousemove", h), T.current = setInterval(() => {
+        r.current && (l == null || l(e, n.value));
+      }, k);
+    else if (v(!0), y.current) {
+      const t = y.current;
+      t.value = c.current.toString(), setTimeout(() => {
         t.focus(), t.select();
       }, 10);
     }
+    p.current && clearTimeout(p.current);
   }
-  function x(e) {
-    if (!m.current) return;
-    const t = K(e, V), u = t - m.current;
-    if (!i.current) {
-      Math.abs(u) > 4 && (i.current = !0);
-      return;
-    }
-    const Q = Number.isFinite(l) ? l % o : 0;
-    n.current = F(
-      n.current + u * o / O,
-      l - o,
-      g + o
-    ), T(
-      F(
-        n.current - n.current % o + Q,
-        l,
-        g
-      )
-    ), m.current = t;
+  function h(e) {
+    const t = A(e, S), H = t - E.current, X = Number.isFinite(o) ? o % s : 0;
+    c.current = b(
+      c.current + H * s / O,
+      o - s,
+      N + s
+    );
+    const R = b(
+      c.current - c.current % s + X,
+      o,
+      N
+    );
+    u.current = R, I(R), E.current = t;
   }
-  function H(e) {
-    if (v) return;
-    const t = e.nativeEvent;
-    document.body.style["pointer-events"] = "none", m.current = K(t, V), n.current = r.value, b.current = setTimeout(() => {
-      i.current = !0;
-    }, 250), I.current = setInterval(() => {
-      i && (a == null || a(t, r.value));
-    }, w), document.addEventListener("mousemove", x), document.addEventListener("mouseup", _);
+  function _(e) {
+    document.body.style["pointer-events"] = "auto", T.current && clearInterval(T.current), E.current = x, document.removeEventListener("mousemove", h), document.removeEventListener("mouseup", _), r.current && (a == null || a(e, u.current), l == null || l(e, u.current), r.current = !1);
   }
-  function X(e) {
-    if (e.key === Y.Enter) {
-      e.preventDefault(), e.stopPropagation(), A(e.nativeEvent, e.currentTarget.value);
-      return;
-    }
-    if (e.key === Y.Escape) {
-      f(!1);
-      return;
-    }
+  function z(e) {
+    (e.key === Q.Enter || W(e.key)) && v(!1);
   }
-  function A(e, t) {
-    let u = Number.parseFloat(t);
-    if (j || (u = F(u, l, g)), Number.isNaN(u)) {
-      f(!1);
+  function B(e) {
+    let t = Number.parseFloat(e.currentTarget.value);
+    if (Y || (t = b(t, o, N)), Number.isNaN(t)) {
+      v(!1);
       return;
     }
-    f(!1), T(u), n.current = u, L(), s == null || s(e, u);
-  }
-  function L() {
-    if (S <= 0) return;
-    const e = R.current;
-    if (e)
-      return D(!0), clearTimeout(e), R.current = setTimeout(() => {
-        D(!1);
-      }, S), () => clearTimeout(e);
-  }
-  function $(e) {
-    v && f(!1), A(e.nativeEvent, e.currentTarget.value);
+    c.current = t, u.current = t, I(t), a == null || a(e.nativeEvent, t), d && v(!1);
   }
-  let d = r.value;
-  (i.current || k) && (d = G);
-  const q = /* @__PURE__ */ W(Z, { children: [
-    p && !i.current && !k ? /* @__PURE__ */ P(ee, { value: d, format: E }) : E ? E(d) : d,
-    h ? ` ${h}` : ""
-  ] }), J = /* @__PURE__ */ P(
+  let f = n.value;
+  r.current && (f = u.current);
+  const G = /* @__PURE__ */ $(q, { children: [
+    m && !r.current ? /* @__PURE__ */ D(Z, { value: f, format: g }) : g ? g(f) : f,
+    V ? ` ${V}` : ""
+  ] }), M = /* @__PURE__ */ D(
     "input",
     {
-      ref: N,
+      ref: y,
       className: "NumberInput__input",
       style: {
-        display: v ? void 0 : "none",
-        height: B,
+        display: d ? void 0 : "none",
+        height: P,
         lineHeight: U,
-        fontSize: z
+        fontSize: K
       },
-      onBlur: $,
-      onKeyDown: X
+      onBlur: B,
+      onKeyDown: z
     }
   );
-  return M({
-    displayElement: q,
-    displayValue: d,
-    dragging: i.current,
-    editing: v,
-    handleDragStart: H,
-    inputElement: J
+  return L({
+    displayElement: G,
+    displayValue: f,
+    dragging: r.current,
+    editing: d,
+    handleDragStart: j,
+    inputElement: M
   });
 }
 export {
-  se as DraggableControl
+  ie as DraggableControl
 };

package/dist/components/FitText.d.ts

@@ -1,4 +1,4 @@
-import { Component, HTMLAttributes, PropsWithChildren, RefObject } from 'react';
+import { Component, HTMLAttributes, PropsWithChildren } from 'react';
 type Props = {
     acceptableDifference?: number;
     maxFontSize: number;
@@ -9,7 +9,7 @@ type State = {
     fontSize: number;
 };
 export declare class FitText extends Component<Props, State> {
-    ref: RefObject<HTMLDivElement | null>;
+    ref: import('react').RefObject<HTMLDivElement | null>;
     state: State;
     constructor(props: Props);
     componentDidUpdate(prevProps: any): void;

package/dist/components/NumberInput.d.ts

@@ -1,4 +1,4 @@
-import { CSSProperties, Component, FocusEventHandler, KeyboardEventHandler, MouseEventHandler, RefObject } from 'react';
+import { CSSProperties, Component, FocusEventHandler, KeyboardEventHandler, MouseEventHandler } from 'react';
 import { BooleanLike } from '../common/react';
 import { BoxProps } from './Box';
 type Props = Required<{
@@ -51,7 +51,7 @@ type State = {
  * to fine tune the value, or single click it to manually type a number.
  */
 export declare class NumberInput extends Component<Props, State> {
-    inputRef: RefObject<HTMLInputElement | null>;
+    inputRef: import('react').RefObject<HTMLInputElement | null>;
     dragTimeout: NodeJS.Timeout;
     dragInterval: NodeJS.Timeout;
     state: State;

package/package.json

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

package/styles/components/Button.scss

@@ -71,30 +71,29 @@ $border-radius: 0 !default;
     }
   }
 
-  i {
+  .Button--icon {
     min-width: 1.333em;
     text-align: center;
-    vertical-align: middle;
   }
 
-  &:has(i) {
+  &:has(.Button--icon) {
     padding-left: 0;
 
-    i {
+    .Button--icon {
       margin: 0 var(--space-s);
     }
   }
 
-  &--icon-right:has(i) {
+  &--icon-right:has(.Button--icon) {
     padding-left: var(--space-m);
     padding-right: var(--space-s);
 
-    i {
+    .Button--icon {
       margin: 0 0 0 var(--space-s);
     }
   }
 
-  &--empty:has(i) {
+  &--empty:has(.Button--icon) {
     padding: 0;
   }
 
@@ -102,7 +101,7 @@ $border-radius: 0 !default;
     padding: 0 var(--space-s);
     line-height: 1.333em;
 
-    &:has(i) i {
+    &:has(.Button--icon) .Button--icon {
       margin: 0 var(--space-xxs);
     }
   }
@@ -123,6 +122,11 @@ $border-radius: 0 !default;
     overflow: hidden;
     margin-right: calc(-1 * var(--space-s));
   }
+
+  // We don't need additional margin if button inside stack
+  .Stack__item & {
+    margin: 0;
+  }
 }
 
 @each $color-name, $color-value in $bg-map {

package/styles/components/NoticeBox.scss

@@ -23,7 +23,7 @@ $color-stripes: 0 !default;
 }
 
 @mixin box-color($color) {
-  background-color: hsl(from $color h calc(s - 15) calc(l - 15));
+  background-color: oklch(from $color calc(l - 0.14) calc(c - 0.06) h);
   color: var(--color-text-fixed-white);
 }
 
@@ -35,6 +35,10 @@ $color-stripes: 0 !default;
       }
     }
 
+    @if $color-name == "black" {
+      --notice-box-stripes: hsla(0, 0%, 100%, 0.1);
+    }
+
     @include box-color($color-value);
   }
 }

package/styles/components/Tooltip.scss

@@ -14,4 +14,5 @@ $border-radius: 0 !default;
   padding: var(--space-m) var(--space-l);
   pointer-events: none;
   text-align: left;
+  width: max-content;
 }