tgui-core 1.1.23 → 1.2.0

package/dist/components/Tabs.js

@@ -1,89 +1,94 @@
-import { jsx as o, jsxs as f } from "react/jsx-runtime";
-import { classes as h, canRender as i } from "../common/react.js";
-import { computeBoxClassName as b, computeBoxProps as d } from "./Box.js";
-import { Icon as m } from "./Icon.js";
-import '../assets/Tabs.css';const v = "_tabs_9h380_13", p = "_fill_9h380_20", u = "_vertical_9h380_35", w = "_horizontal_9h380_40", x = "_tabs__tab_9h380_48", y = "_fluid_9h380_52", N = "_tab_9h380_13", k = "_selected_9h380_66", z = "_tab__text_9h380_75", T = "_tab__left_9h380_80", j = "_tab__right_9h380_86", B = "_color__black_9h380_113", S = "_color__white_9h380_125", C = "_color__red_9h380_137", I = "_color__orange_9h380_149", P = "_color__yellow_9h380_161", R = "_color__olive_9h380_173", q = "_color__green_9h380_185", A = "_color__teal_9h380_197", D = "_color__blue_9h380_209", E = "_color__violet_9h380_221", F = "_color__purple_9h380_233", G = "_color__pink_9h380_245", H = "_color__brown_9h380_257", J = "_color__grey_9h380_269", K = "_color__good_9h380_293", L = "_color__average_9h380_305", M = "_color__bad_9h380_317", O = "_color__label_9h380_329", _ = {
-  tabs: v,
-  fill: p,
-  vertical: u,
-  horizontal: w,
-  tabs__tab: x,
-  fluid: y,
-  tab: N,
-  selected: k,
-  tab__text: z,
-  tab__left: T,
-  tab__right: j,
-  color__black: B,
-  color__white: S,
-  color__red: C,
-  color__orange: I,
-  color__yellow: P,
-  color__olive: R,
-  color__green: q,
-  color__teal: A,
-  color__blue: D,
-  color__violet: E,
-  color__purple: F,
-  color__pink: G,
-  color__brown: H,
-  color__grey: J,
+import { jsx as o, jsxs as u } from "react/jsx-runtime";
+import { classes as g, canRender as d } from "../common/react.js";
+import { computeBoxClassName as f, computeBoxProps as m } from "./Box.js";
+import { Icon as k } from "./Icon.js";
+import '../assets/Tabs.css';const w = "_tabs_9h380_13", x = "_fill_9h380_20", y = "_vertical_9h380_35", N = "_horizontal_9h380_40", z = "_tabs__tab_9h380_48", C = "_fluid_9h380_52", S = "_tab_9h380_13", T = "_selected_9h380_66", j = "_tab__text_9h380_75", B = "_tab__left_9h380_80", I = "_tab__right_9h380_86", P = "_color__black_9h380_113", R = "_color__white_9h380_125", q = "_color__red_9h380_137", A = "_color__orange_9h380_149", D = "_color__yellow_9h380_161", E = "_color__olive_9h380_173", F = "_color__green_9h380_185", G = "_color__teal_9h380_197", H = "_color__blue_9h380_209", J = "_color__violet_9h380_221", K = "_color__purple_9h380_233", L = "_color__pink_9h380_245", M = "_color__brown_9h380_257", O = "_color__grey_9h380_269", Q = "_color__good_9h380_293", U = "_color__average_9h380_305", V = "_color__bad_9h380_317", W = "_color__label_9h380_329", _ = {
+  tabs: w,
+  fill: x,
+  vertical: y,
+  horizontal: N,
+  tabs__tab: z,
+  fluid: C,
+  tab: S,
+  selected: T,
+  tab__text: j,
+  tab__left: B,
+  tab__right: I,
+  color__black: P,
+  color__white: R,
+  color__red: q,
+  color__orange: A,
+  color__yellow: D,
+  color__olive: E,
+  color__green: F,
+  color__teal: G,
+  color__blue: H,
+  color__violet: J,
+  color__purple: K,
+  color__pink: L,
+  color__brown: M,
+  color__grey: O,
   "color__light-grey": "_color__light-grey_9h380_281",
-  color__good: K,
-  color__average: L,
-  color__bad: M,
-  color__label: O
+  color__good: Q,
+  color__average: U,
+  color__bad: V,
+  color__label: W
 };
-function Q(r) {
-  const { className: e, vertical: a, fill: s, fluid: c, children: t, ...l } = r;
+function X(t) {
+  const { className: r, vertical: e, fill: a, fluid: c, children: s, ...l } = t;
   return /* @__PURE__ */ o(
     "div",
     {
-      className: h([
+      className: g([
         _.tabs,
-        a ? _.vertical : _.horizontal,
-        s && _.fill,
+        e ? _.vertical : _.horizontal,
+        a && _.fill,
         c && _.fluid,
-        e,
-        b(l)
+        r,
+        f(l)
       ]),
-      ...d(l),
-      children: t
+      ...m(l),
+      children: s
     }
   );
 }
-function U(r) {
+function Y(t) {
   const {
-    className: e,
-    selected: a,
-    color: s,
+    className: r,
+    selected: e,
+    color: a,
     icon: c,
-    leftSlot: t,
-    rightSlot: l,
-    children: g,
-    ...n
-  } = r;
-  return /* @__PURE__ */ f(
+    iconSpin: s,
+    leftSlot: l,
+    rightSlot: n,
+    children: v,
+    onClick: i,
+    ...h
+  } = t, p = (b) => {
+    i && (i(b), b.target.blur());
+  };
+  return /* @__PURE__ */ u(
     "div",
     {
-      className: h([
+      className: g([
         _.tab,
         _.tabs__tab,
-        _["color__" + s],
-        a && _.selected,
-        e,
-        b(n)
+        _["color__" + a],
+        e && _.selected,
+        r,
+        f(h)
       ]),
-      ...d(n),
+      onClick: p,
+      ...m(h),
       children: [
-        i(t) && /* @__PURE__ */ o("div", { className: _.tab__left, children: t }) || !!c && /* @__PURE__ */ o("div", { className: _.tab__left, children: /* @__PURE__ */ o(m, { name: c }) }),
-        /* @__PURE__ */ o("div", { className: _.tab__text, children: g }),
-        i(l) && /* @__PURE__ */ o("div", { className: _.tab__right, children: l })
+        d(l) && /* @__PURE__ */ o("div", { className: _.tab__left, children: l }) || !!c && /* @__PURE__ */ o("div", { className: _.tab__left, children: /* @__PURE__ */ o(k, { name: c, spin: s }) }),
+        /* @__PURE__ */ o("div", { className: _.tab__text, children: v }),
+        d(n) && /* @__PURE__ */ o("div", { className: _.tab__right, children: n })
       ]
     }
   );
 }
-Q.Tab = U;
+X.Tab = Y;
 export {
-  Q as Tabs
+  X as Tabs
 };

package/dist/components/TextArea.d.ts

@@ -24,6 +24,7 @@ export declare const TextArea: import('react').ForwardRefExoticComponent<Partial
     as: string;
     children: import('react').ReactNode;
     className: string | import('../common/react').BooleanLike;
+    id: string;
     style: import('react').CSSProperties;
 }> & Partial<Record<"bold" | "italic" | "nowrap" | "fillPositionedParent" | "inline" | "preserveWhitespace", boolean>> & Partial<Record<"fontWeight" | "textAlign" | "bottom" | "fontFamily" | "fontSize" | "height" | "left" | "maxHeight" | "maxWidth" | "minHeight" | "minWidth" | "opacity" | "overflow" | "overflowX" | "overflowY" | "position" | "right" | "top" | "verticalAlign" | "width" | "color" | "backgroundColor" | "align" | "lineHeight" | "m" | "mb" | "ml" | "mr" | "mt" | "mx" | "my" | "p" | "pb" | "pl" | "pr" | "pt" | "px" | "py" | "textColor", string | import('../common/react').BooleanLike>> & Partial<{
     onClick: import('react').MouseEventHandler<HTMLDivElement>;
@@ -32,6 +33,7 @@ export declare const TextArea: import('react').ForwardRefExoticComponent<Partial
     onKeyDown: import('react').KeyboardEventHandler<HTMLDivElement>;
     onKeyUp: import('react').KeyboardEventHandler<HTMLDivElement>;
     onMouseDown: import('react').MouseEventHandler<HTMLDivElement>;
+    onMouseLeave: import('react').MouseEventHandler<HTMLDivElement>;
     onMouseMove: import('react').MouseEventHandler<HTMLDivElement>;
     onMouseOver: import('react').MouseEventHandler<HTMLDivElement>;
     onMouseUp: import('react').MouseEventHandler<HTMLDivElement>;

package/dist/components/TextArea.js

@@ -1,74 +1,74 @@
 import { jsxs as I, jsx as f } from "react/jsx-runtime";
-import { forwardRef as Y, useRef as C, useState as H, useImperativeHandle as L, useEffect as g } from "react";
-import { KEY as p } from "../common/keys.js";
-import { classes as d } from "../common/react.js";
-import { Box as P } from "./Box.js";
+import { forwardRef as Y, useRef as C, useState as H, useImperativeHandle as L, useEffect as _ } from "react";
+import { KEY as g, isEscape as P } from "../common/keys.js";
+import { classes as p } from "../common/react.js";
+import { Box as U } from "./Box.js";
 import { toInputValue as T } from "./Input.js";
-import '../assets/TextArea.css';const U = "_textArea_1bert_20", $ = "_fluid_1bert_33", q = "_noborder_1bert_39", z = "_inner_1bert_43", G = "_scrollable_1bert_43", J = "_custom_1bert_78", M = "_nowrap_1bert_83", O = "_wrapper_1bert_89", e = {
-  textArea: U,
-  fluid: $,
-  noborder: q,
-  inner: z,
-  scrollable: G,
-  custom: J,
-  nowrap: M,
-  wrapper: O
-}, er = Y(
+import '../assets/TextArea.css';const $ = "_textArea_1bert_20", q = "_fluid_1bert_33", z = "_noborder_1bert_39", G = "_inner_1bert_43", J = "_scrollable_1bert_43", M = "_custom_1bert_78", O = "_nowrap_1bert_83", Q = "_wrapper_1bert_89", e = {
+  textArea: $,
+  fluid: q,
+  noborder: z,
+  inner: G,
+  scrollable: J,
+  custom: M,
+  nowrap: O,
+  wrapper: Q
+}, tr = Y(
   (x, w) => {
     const {
-      autoFocus: m,
-      autoSelect: l,
+      autoFocus: d,
+      autoSelect: s,
       displayedValue: a,
       dontUseTabForIndent: y,
       maxLength: h,
       noborder: A,
-      onChange: s,
+      onChange: l,
       onEnter: n,
       onEscape: u,
       onInput: c,
       placeholder: N,
       scrollbar: S,
-      selfClear: b,
+      selfClear: m,
       value: i,
       ...E
     } = x, { className: K, fluid: k, nowrap: D, ...R } = E, t = C(null), [V, j] = H(0);
     function B(r) {
-      if (r.key === p.Enter) {
+      if (r.key === g.Enter) {
         if (r.shiftKey) {
           r.currentTarget.focus();
           return;
         }
-        n == null || n(r, r.currentTarget.value), b && (r.currentTarget.value = ""), r.currentTarget.blur();
+        n == null || n(r, r.currentTarget.value), m && (r.currentTarget.value = ""), r.currentTarget.blur();
         return;
       }
-      if (r.key === p.Escape) {
-        u == null || u(r), b ? r.currentTarget.value = "" : (r.currentTarget.value = T(i), r.currentTarget.blur());
+      if (P(r.key)) {
+        u == null || u(r), m ? r.currentTarget.value = "" : (r.currentTarget.value = T(i), r.currentTarget.blur());
         return;
       }
-      if (!y && r.key === p.Tab) {
+      if (!y && r.key === g.Tab) {
         r.preventDefault();
-        const { value: o, selectionStart: _, selectionEnd: F } = r.currentTarget;
-        r.currentTarget.value = o.substring(0, _) + "	" + o.substring(F), r.currentTarget.selectionEnd = _ + 1;
+        const { value: o, selectionStart: b, selectionEnd: F } = r.currentTarget;
+        r.currentTarget.value = o.substring(0, b) + "	" + o.substring(F), r.currentTarget.selectionEnd = b + 1;
       }
     }
     return L(
       w,
       () => t.current
-    ), g(() => {
-      if (!m && !l) return;
+    ), _(() => {
+      if (!d && !s) return;
       const r = t.current;
-      r && (m || l) && setTimeout(() => {
-        r.focus(), l && r.select();
+      r && (d || s) && setTimeout(() => {
+        r.focus(), s && r.select();
       }, 1);
-    }, []), g(() => {
+    }, []), _(() => {
       const r = t.current;
       if (!r) return;
       const o = T(i);
       r.value !== o && (r.value = o);
     }, [i]), /* @__PURE__ */ I(
-      P,
+      U,
       {
-        className: d([
+        className: p([
           e.textArea,
           k && e.fluid,
           A && e.noborder,
@@ -79,7 +79,7 @@ import '../assets/TextArea.css';const U = "_textArea_1bert_20", $ = "_fluid_1ber
           !!a && /* @__PURE__ */ f("div", { className: e.wrapper, children: /* @__PURE__ */ f(
             "div",
             {
-              className: d([e.inner, e.custom]),
+              className: p([e.inner, e.custom]),
               style: {
                 transform: `translateY(-${V}px)`
               },
@@ -89,13 +89,13 @@ import '../assets/TextArea.css';const U = "_textArea_1bert_20", $ = "_fluid_1ber
           /* @__PURE__ */ f(
             "textarea",
             {
-              className: d([
+              className: p([
                 e.inner,
                 S && e.scrollable,
                 D && e.nowrap
               ]),
               maxLength: h,
-              onBlur: (r) => s == null ? void 0 : s(r, r.target.value),
+              onBlur: (r) => l == null ? void 0 : l(r, r.target.value),
               onChange: (r) => c == null ? void 0 : c(r, r.target.value),
               onKeyDown: B,
               onScroll: () => {
@@ -114,5 +114,5 @@ import '../assets/TextArea.css';const U = "_textArea_1bert_20", $ = "_fluid_1ber
   }
 );
 export {
-  er as TextArea
+  tr as TextArea
 };

package/dist/components/TimeDisplay.js

@@ -1,24 +1,24 @@
-import { useState as l, useRef as d, useEffect as f } from "react";
+import { useState as f, useRef as d, useEffect as m } from "react";
 import { formatTime as v } from "../common/format.js";
 const u = (t) => typeof t == "number" && Number.isFinite(t) && !Number.isNaN(t);
 function b(t) {
   const {
     value: e = 0,
     auto: r = void 0,
-    format: o = void 0
-  } = t, [i, a] = l(
+    format: i = void 0
+  } = t, [o, a] = f(
     () => u(e) ? e : 0
-  ), [s, m] = l(
+  ), [s, l] = f(
     u(e) ? e : void 0
   ), n = d(null);
-  return f(() => (console.log("auto", r), r !== void 0 && (n.current = setInterval(() => {
+  return m(() => (r !== void 0 && (n.current = setInterval(() => {
     const c = r === "up" ? 10 : -10;
     a((p) => Math.max(0, p + c));
   }, 1e3)), () => {
     n.current && clearInterval(n.current);
-  }), [r]), f(() => {
-    e !== s && (m(e), a(e));
-  }, [e, s]), u(e) ? o ? o(i) : v(i) : e || null;
+  }), [r]), m(() => {
+    e !== s && (l(e), a(e));
+  }, [e, s]), u(e) ? i ? i(o) : v(o) : e || null;
 }
 export {
   b as TimeDisplay

package/dist/components/index.d.ts

@@ -18,6 +18,7 @@ export { FitText } from './FitText';
 export { Flex } from './Flex';
 export { Icon } from './Icon';
 export { Image } from './Image';
+export { ImageButton } from './ImageButton';
 export { InfinitePlane } from './InfinitePlane';
 export { Input } from './Input';
 export { KeyListener } from './KeyListener';

package/dist/components/index.js

@@ -1,13 +1,13 @@
 import { AnimatedNumber as e } from "./AnimatedNumber.js";
-import { Autofocus as p } from "./Autofocus.js";
+import { Autofocus as m } from "./Autofocus.js";
 import { Blink as x } from "./Blink.js";
 import { BlockQuote as i } from "./BlockQuote.js";
-import { Box as a } from "./Box.js";
+import { Box as l } from "./Box.js";
 import { Button as u } from "./Button.js";
 import { ByondUi as c } from "./ByondUi.js";
 import { Chart as b } from "./Chart.js";
-import { Collapsible as D } from "./Collapsible.js";
-import { ColorBox as T } from "./ColorBox.js";
+import { Collapsible as I } from "./Collapsible.js";
+import { ColorBox as D } from "./ColorBox.js";
 import { Dialog as C } from "./Dialog.js";
 import { Dimmer as L } from "./Dimmer.js";
 import { Divider as y } from "./Divider.js";
@@ -18,42 +18,43 @@ import { FitText as h } from "./FitText.js";
 import { Flex as w } from "./Flex.js";
 import { Icon as O } from "./Icon.js";
 import { Image as U } from "./Image.js";
-import { InfinitePlane as j } from "./InfinitePlane.js";
-import { Input as z } from "./Input.js";
-import { KeyListener as H } from "./KeyListener.js";
-import { Knob as W } from "./Knob.js";
-import { LabeledControls as Y } from "./LabeledControls.js";
-import { LabeledList as _ } from "./LabeledList.js";
-import { MenuBar as oo } from "./MenuBar.js";
-import { Modal as eo } from "./Modal.js";
-import { NoticeBox as po } from "./NoticeBox.js";
-import { NumberInput as xo } from "./NumberInput.js";
-import { Popper as io } from "./Popper.js";
-import { ProgressBar as ao } from "./ProgressBar.js";
-import { RestrictedInput as uo } from "./RestrictedInput.js";
-import { RoundGauge as co } from "./RoundGauge.js";
-import { Section as Bo } from "./Section.js";
-import { Slider as Io } from "./Slider.js";
-import { Stack as go } from "./Stack.js";
-import { StyleableSection as ko } from "./StyleableSection.js";
-import { Table as So } from "./Table.js";
-import { Tabs as Ao } from "./Tabs.js";
-import { TextArea as Po } from "./TextArea.js";
-import { TimeDisplay as Ko } from "./TimeDisplay.js";
-import { Tooltip as Ro } from "./Tooltip.js";
-import { TrackOutsideClicks as vo } from "./TrackOutsideClicks.js";
-import { VirtualList as Go } from "./VirtualList.js";
+import { ImageButton as j } from "./ImageButton.js";
+import { InfinitePlane as z } from "./InfinitePlane.js";
+import { Input as H } from "./Input.js";
+import { KeyListener as W } from "./KeyListener.js";
+import { Knob as Y } from "./Knob.js";
+import { LabeledControls as _ } from "./LabeledControls.js";
+import { LabeledList as oo } from "./LabeledList.js";
+import { MenuBar as eo } from "./MenuBar.js";
+import { Modal as mo } from "./Modal.js";
+import { NoticeBox as xo } from "./NoticeBox.js";
+import { NumberInput as io } from "./NumberInput.js";
+import { Popper as lo } from "./Popper.js";
+import { ProgressBar as uo } from "./ProgressBar.js";
+import { RestrictedInput as co } from "./RestrictedInput.js";
+import { RoundGauge as Bo } from "./RoundGauge.js";
+import { Section as go } from "./Section.js";
+import { Slider as To } from "./Slider.js";
+import { Stack as ko } from "./Stack.js";
+import { StyleableSection as So } from "./StyleableSection.js";
+import { Table as Ao } from "./Table.js";
+import { Tabs as Po } from "./Tabs.js";
+import { TextArea as Ko } from "./TextArea.js";
+import { TimeDisplay as Ro } from "./TimeDisplay.js";
+import { Tooltip as vo } from "./Tooltip.js";
+import { TrackOutsideClicks as Go } from "./TrackOutsideClicks.js";
+import { VirtualList as Qo } from "./VirtualList.js";
 export {
   e as AnimatedNumber,
-  p as Autofocus,
+  m as Autofocus,
   x as Blink,
   i as BlockQuote,
-  a as Box,
+  l as Box,
   u as Button,
   c as ByondUi,
   b as Chart,
-  D as Collapsible,
-  T as ColorBox,
+  I as Collapsible,
+  D as ColorBox,
   C as Dialog,
   L as Dimmer,
   y as Divider,
@@ -64,29 +65,30 @@ export {
   w as Flex,
   O as Icon,
   U as Image,
-  j as InfinitePlane,
-  z as Input,
-  H as KeyListener,
-  W as Knob,
-  Y as LabeledControls,
-  _ as LabeledList,
-  oo as MenuBar,
-  eo as Modal,
-  po as NoticeBox,
-  xo as NumberInput,
-  io as Popper,
-  ao as ProgressBar,
-  uo as RestrictedInput,
-  co as RoundGauge,
-  Bo as Section,
-  Io as Slider,
-  go as Stack,
-  ko as StyleableSection,
-  So as Table,
-  Ao as Tabs,
-  Po as TextArea,
-  Ko as TimeDisplay,
-  Ro as Tooltip,
-  vo as TrackOutsideClicks,
-  Go as VirtualList
+  j as ImageButton,
+  z as InfinitePlane,
+  H as Input,
+  W as KeyListener,
+  Y as Knob,
+  _ as LabeledControls,
+  oo as LabeledList,
+  eo as MenuBar,
+  mo as Modal,
+  xo as NoticeBox,
+  io as NumberInput,
+  lo as Popper,
+  uo as ProgressBar,
+  co as RestrictedInput,
+  Bo as RoundGauge,
+  go as Section,
+  To as Slider,
+  ko as Stack,
+  So as StyleableSection,
+  Ao as Table,
+  Po as Tabs,
+  Ko as TextArea,
+  Ro as TimeDisplay,
+  vo as Tooltip,
+  Go as TrackOutsideClicks,
+  Qo as VirtualList
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "tgui-core",
-  "version": "1.1.23",
+  "version": "1.2.0",
   "description": "TGUI core component library",
   "keywords": [
     "TGUI",

package/dist/Section.module-CLVHJ4yA.js

@@ -1,15 +0,0 @@
-import './assets/Section.css';const t = "_section_1awt0_17", l = "_title_1awt0_28", o = "_titleText_1awt0_34", s = "_buttons_1awt0_40", _ = "_rest_1awt0_47", e = "_content_1awt0_51", n = "_fitted_1awt0_55", c = "_fill_1awt0_59", a = "_scrollable_1awt0_73", i = "_scrollableHorizontal_1awt0_90", r = {
-  section: t,
-  title: l,
-  titleText: o,
-  buttons: s,
-  rest: _,
-  content: e,
-  fitted: n,
-  fill: c,
-  scrollable: a,
-  scrollableHorizontal: i
-};
-export {
-  r as s
-};