tgui-core 1.3.0 → 1.3.2

package/dist/components/ImageButton.js

@@ -1,56 +1,56 @@
-import { jsxs as f, jsx as t } from "react/jsx-runtime";
+import { jsxs as g, jsx as t } from "react/jsx-runtime";
 import { classes as l } from "../common/react.js";
-import { computeBoxProps as B } from "./Box.js";
+import { computeBoxProps as A } from "./Box.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 I } from "./Stack.js";
+import { Stack as y } from "./Stack.js";
 import { Tooltip as z } from "./Tooltip.js";
-function H(k) {
+function H(N) {
   const {
-    asset: h,
+    asset: f,
     base64: r,
     buttons: m,
-    buttonsAlt: g,
+    buttonsAlt: h,
     children: i,
-    className: w,
+    className: k,
     color: e,
     disabled: a,
-    dmFallback: b,
-    dmIcon: x,
-    dmIconState: C,
+    dmFallback: I,
+    dmIcon: b,
+    dmIconState: x,
     fluid: c,
     imageSize: o = 64,
     imageSrc: d,
     onClick: s,
-    onRightClick: p,
-    selected: _,
-    title: $,
-    tooltip: y,
-    tooltipPosition: v,
-    ...S
-  } = k;
-  function N(n, A) {
-    return /* @__PURE__ */ t(I, { height: `${o}px`, width: `${o}px`, children: /* @__PURE__ */ t(I.Item, { grow: !0, textAlign: "center", align: "center", children: /* @__PURE__ */ t(
+    onRightClick: u,
+    selected: B,
+    title: C,
+    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: A,
+        spin: S,
         name: n,
         color: "gray",
         style: { fontSize: `calc(${o}px * 0.75)` }
       }
     ) }) });
   }
-  let u = /* @__PURE__ */ f(
+  let p = /* @__PURE__ */ g(
     "div",
     {
       className: l([
         "container",
         m && "hasButtons",
-        !s && !p && "noAction",
-        _ && "selected",
-        a && "disabled",
-        e && typeof e == "string" ? `color__${e}` : "color__default"
+        !s && !u && "noAction",
+        B && "ImageButton--selected",
+        a && "ImageButton--disabled",
+        e && typeof e == "string" ? `ImageButton--color__${e}` : "ImageButton--color__default"
       ]),
       tabIndex: a ? void 0 : 0,
       onClick: (n) => {
@@ -60,39 +60,39 @@ function H(k) {
         n.key === "Enter" && !a && s && s(n);
       },
       onContextMenu: (n) => {
-        n.preventDefault(), !a && p && p(n);
+        n.preventDefault(), !a && u && u(n);
       },
       style: { width: c ? "auto" : `calc(${o}px + 0.5em + 2px)` },
       children: [
-        /* @__PURE__ */ t("div", { className: "image", children: r || h || d ? /* @__PURE__ */ t(
+        /* @__PURE__ */ t("div", { className: "image", children: r || f || d ? /* @__PURE__ */ t(
           j,
           {
-            className: l(!r && !d && h || []),
+            className: l(!r && !d && f || []),
             src: r ? `data:image/png;base64,${r}` : d,
             height: `${o}px`,
             width: `${o}px`
           }
-        ) : x && C ? /* @__PURE__ */ t(
+        ) : b && x ? /* @__PURE__ */ t(
           D,
           {
-            icon: x,
-            icon_state: C,
-            fallback: b || N("spinner", !0),
+            icon: b,
+            icon_state: x,
+            fallback: I || $("spinner", !0),
             height: `${o}px`,
             width: `${o}px`
           }
-        ) : N("question", !1) }),
-        c ? /* @__PURE__ */ f("div", { className: "info", children: [
-          $ && /* @__PURE__ */ t("span", { className: l(["title", i && "divider"]), children: $ }),
+        ) : $("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(
           "span",
           {
             className: l([
               "content",
-              _ && "contentSelected",
-              a && "contentDisabled",
-              e && typeof e == "string" ? `contentColor__${e}` : "contentColor__default"
+              B && "ImageButton--contentSelected",
+              a && "ImageButton--contentDisabled",
+              e && typeof e == "string" ? `ImageButton--contentColor__${e}` : "ImageButton--contentColor__default"
             ]),
             children: i
           }
@@ -100,24 +100,28 @@ function H(k) {
       ]
     }
   );
-  return y && (u = /* @__PURE__ */ t(z, { content: y, position: v, children: u })), /* @__PURE__ */ f(
+  return _ && (p = /* @__PURE__ */ t(z, { content: _, position: w, children: p })), /* @__PURE__ */ g(
     "div",
     {
-      className: l(["ImageButton", c && "fluid", w]),
-      ...B(S),
+      className: l([
+        "ImageButton",
+        c && "ImageButton--fluid",
+        k
+      ]),
+      ...A(v),
       children: [
-        u,
+        p,
         m && /* @__PURE__ */ t(
           "div",
           {
             className: l([
               "buttonsContainer",
-              g && "buttonsAltContainer",
+              h && "buttonsAltContainer",
               !i && "buttonsEmpty",
-              c && e && typeof e == "string" ? `buttonsContainerColor__${e}` : c && "buttonsContainerColor__default"
+              c && e && typeof e == "string" ? `ImageButton--buttonsContainerColor__${e}` : c && "ImageButton--buttonsContainerColor__default"
             ]),
             style: {
-              width: g ? `calc(${o}px + 0.5em)` : "auto"
+              width: h ? `calc(${o}px + 0.5em)` : "auto"
             },
             children: m
           }

package/dist/components/Section.js

@@ -7,9 +7,9 @@ function G(m) {
   const {
     buttons: n,
     children: f,
-    className: _,
+    className: S,
     fill: u,
-    fitted: S,
+    fitted: _,
     flexGrow: p,
     noTopPadding: N,
     onScroll: h,
@@ -33,11 +33,11 @@ function G(m) {
       className: a([
         "Section",
         u && "Section--fill",
-        S && "Section--fitted",
+        _ && "Section--fitted",
         c && "Section--scrollable",
         l && "Section--scrollableHorizontal",
-        p && "Section__flex",
-        _,
+        p && "Section--flex",
+        S,
         j(i)
       ]),
       ...z(i),
@@ -51,8 +51,8 @@ function G(m) {
           {
             className: a([
               "Section__content",
-              !!b && "content__stretchContents",
-              !!N && "content__noTopPadding"
+              b && "Section__content--stretchContents",
+              N && "Section__content--noTopPadding"
             ]),
             onScroll: h,
             ref: e,

package/package.json

@@ -1,15 +1,9 @@
 {
   "name": "tgui-core",
-  "version": "1.3.0",
+  "version": "1.3.2",
   "description": "TGUI core component library",
-  "keywords": [
-    "TGUI",
-    "library",
-    "typescript"
-  ],
-  "files": [
-    "dist"
-  ],
+  "keywords": ["TGUI", "library", "typescript"],
+  "files": ["dist"],
   "exports": {
     "./components": {
       "import": "./dist/components/index.js",
@@ -28,14 +22,24 @@
     "dev": "vite",
     "build": "tsc --noEmit && vite build",
     "lint": "biome check lib",
-    "lint:fix": "prettier . --write && biome check . --fix"
+    "lint:fix": "prettier . --write && biome check . --fix",
+    "storybook": "storybook dev -p 6006",
+    "build-storybook": "storybook build"
   },
   "author": "jlsnow301",
   "license": "MIT",
   "type": "module",
   "devDependencies": {
     "@biomejs/biome": "1.9.4",
+    "@chromatic-com/storybook": "3.2.2",
     "@popperjs/core": "^2.11.8",
+    "@storybook/addon-essentials": "8.4.4",
+    "@storybook/addon-interactions": "8.4.4",
+    "@storybook/addon-onboarding": "8.4.4",
+    "@storybook/blocks": "8.4.4",
+    "@storybook/react": "8.4.4",
+    "@storybook/react-vite": "8.4.4",
+    "@storybook/test": "8.4.4",
     "@types/node": "^22.9.0",
     "@types/react": "^18.3.3",
     "@types/react-dom": "^18.3.0",
@@ -44,6 +48,10 @@
     "glob": "^11.0.0",
     "prettier": "^3.3.3",
     "react-popper": "^2.3.0",
+    "sass": "^1.81.0",
+    "storybook": "8.4.4",
+    "storybook-addon-sass-postcss": "^0.3.2",
+    "tgui-styles": "^0.0.8",
     "typescript": "^5.6.3",
     "vite": "^5.4.11",
     "vite-plugin-dts": "^4.3.0"