tgui-core 1.3.1 → 1.4.0

package/dist/components/Section.js

@@ -1,68 +1,66 @@
-import { jsxs as s, jsx as t } from "react/jsx-runtime";
-import { useRef as T, useEffect as C } from "react";
-import { addScrollableNode as P, removeScrollableNode as g } from "../common/events.js";
-import { classes as a, canRender as d } from "../common/react.js";
-import { computeBoxClassName as j, computeBoxProps as z } from "./Box.js";
-function G(m) {
-  const {
-    buttons: n,
-    children: f,
-    className: S,
-    fill: u,
-    fitted: _,
-    flexGrow: p,
-    noTopPadding: N,
-    onScroll: h,
-    scrollable: c,
-    scrollableHorizontal: l,
-    stretchContents: b,
-    title: r,
-    container_id: x,
-    ...i
-  } = m, e = T(null), v = d(r) || d(n);
-  return C(() => {
-    if (!(e != null && e.current) || !c && !l) return;
-    const o = e.current;
-    return P(o), () => {
-      o && g(o);
-    };
-  }, []), /* @__PURE__ */ s(
-    "div",
-    {
-      id: x || "",
-      className: a([
-        "Section",
-        u && "Section--fill",
-        _ && "Section--fitted",
-        c && "Section--scrollable",
-        l && "Section--scrollableHorizontal",
-        p && "Section--flex",
-        S,
-        j(i)
-      ]),
-      ...z(i),
-      children: [
-        v && /* @__PURE__ */ s("div", { className: "Section__title", children: [
-          /* @__PURE__ */ t("span", { className: "Section__titleText", children: r }),
-          /* @__PURE__ */ t("div", { className: "Section__buttons", children: n })
-        ] }),
-        /* @__PURE__ */ t("div", { className: "Section__rest", children: /* @__PURE__ */ t(
-          "div",
-          {
-            className: a([
-              "Section__content",
-              b && "Section__content--stretchContents",
-              N && "Section__content--noTopPadding"
-            ]),
-            onScroll: h,
-            ref: e,
-            children: f
-          }
-        ) })
-      ]
-    }
-  );
-}
+import { jsxs as i, jsx as t } from "react/jsx-runtime";
+import { forwardRef as C, useRef as P, useEffect as g } from "react";
+import { addScrollableNode as j, removeScrollableNode as w } from "../common/events.js";
+import { classes as s, canRender as a } from "../common/react.js";
+import { computeBoxClassName as z, computeBoxProps as B } from "../common/ui.js";
+const q = C(
+  (d, m) => {
+    const {
+      buttons: o,
+      children: f,
+      className: S,
+      container_id: _ = "",
+      fill: u,
+      fitted: p,
+      flexGrow: N,
+      noTopPadding: h,
+      onScroll: b,
+      scrollable: n,
+      scrollableHorizontal: c,
+      stretchContents: x,
+      title: r,
+      ...l
+    } = d, v = P(null), e = m || v, T = a(r) || a(o);
+    return g(() => (e != null && e.current && (n || c) && j(e.current), () => {
+      e != null && e.current && w(e.current);
+    }), []), /* @__PURE__ */ i(
+      "div",
+      {
+        id: _,
+        className: s([
+          "Section",
+          u && "Section--fill",
+          p && "Section--fitted",
+          n && "Section--scrollable",
+          c && "Section--scrollableHorizontal",
+          N && "Section--flex",
+          S,
+          z(l)
+        ]),
+        ...B(l),
+        children: [
+          T && /* @__PURE__ */ i("div", { className: "Section__title", children: [
+            /* @__PURE__ */ t("span", { className: "Section__titleText", children: r }),
+            /* @__PURE__ */ t("div", { className: "Section__buttons", children: o })
+          ] }),
+          /* @__PURE__ */ t("div", { className: "Section__rest", children: /* @__PURE__ */ t(
+            "div",
+            {
+              className: s([
+                "Section__content",
+                x && "Section__content--stretchContents",
+                h && "Section__content--noTopPadding"
+              ]),
+              onScroll: b,
+              ref: e,
+              children: f
+            }
+          ) })
+        ]
+      }
+    );
+  }
+);
 export {
-  G as Section
+  q as Section
 };

package/dist/components/Slider.js

@@ -1,7 +1,7 @@
 import { jsx as e, jsxs as m } from "react/jsx-runtime";
 import { keyOfMatchingRange as O, clamp01 as r, scale as u } from "../common/math.js";
 import { classes as p } from "../common/react.js";
-import { computeBoxClassName as b, computeBoxProps as z } from "./Box.js";
+import { computeBoxClassName as b, computeBoxProps as z } from "../common/ui.js";
 import { DraggableControl as R } from "./DraggableControl.js";
 function J(g) {
   const {

package/dist/components/Stack.js

@@ -1,6 +1,6 @@
 import { jsx as i } from "react/jsx-runtime";
 import { classes as a } from "../common/react.js";
-import { computeBoxClassName as o } from "./Box.js";
+import { computeBoxClassName as o } from "../common/ui.js";
 import { computeFlexClassName as k, computeFlexProps as v, computeFlexItemProps as m } from "./Flex.js";
 function n(r) {
   const { className: c, vertical: e, fill: t, reverse: s, zebra: l, ...d } = r, f = e ? "column" : "row", S = s ? "-reverse" : "";

package/dist/components/Table.js

@@ -1,6 +1,6 @@
 import { jsx as c } from "react/jsx-runtime";
 import { classes as r } from "../common/react.js";
-import { computeBoxClassName as t, computeBoxProps as n } from "./Box.js";
+import { computeBoxClassName as t, computeBoxProps as n } from "../common/ui.js";
 function m(e) {
   const { className: l, collapsing: a, children: s, ...o } = e;
   return /* @__PURE__ */ c(

package/dist/components/Tabs.js

@@ -1,6 +1,6 @@
 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 "./Box.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;

package/dist/components/TextArea.d.ts

@@ -25,7 +25,8 @@ export declare const TextArea: import('react').ForwardRefExoticComponent<Partial
     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<{
+    tw: string;
+} & import('../common/ui').BooleanStyleMap & import('../common/ui').StringStyleMap & {
     onClick: import('react').MouseEventHandler<HTMLDivElement>;
     onContextMenu: import('react').MouseEventHandler<HTMLDivElement>;
     onDoubleClick: import('react').MouseEventHandler<HTMLDivElement>;

package/package.json

@@ -1,15 +1,9 @@
 {
   "name": "tgui-core",
-  "version": "1.3.1",
+  "version": "1.4.0",
   "description": "TGUI core component library",
-  "keywords": [
-    "TGUI",
-    "library",
-    "typescript"
-  ],
-  "files": [
-    "dist"
-  ],
+  "keywords": ["TGUI", "library", "typescript"],
+  "files": ["dist"],
   "exports": {
     "./components": {
       "import": "./dist/components/index.js",
@@ -39,6 +33,7 @@
     "@biomejs/biome": "1.9.4",
     "@chromatic-com/storybook": "3.2.2",
     "@popperjs/core": "^2.11.8",
+    "@storybook/addon-console": "^3.0.0",
     "@storybook/addon-essentials": "8.4.4",
     "@storybook/addon-interactions": "8.4.4",
     "@storybook/addon-onboarding": "8.4.4",
@@ -51,6 +46,7 @@
     "@types/react-dom": "^18.3.0",
     "@types/webpack-env": "^1.18.5",
     "@vitejs/plugin-react-swc": "^3.7.1",
+    "chromatic": "^11.18.1",
     "glob": "^11.0.0",
     "prettier": "^3.3.3",
     "react-popper": "^2.3.0",