tgui-core 1.3.2 → 1.5.1

package/dist/components/RoundGauge.js

@@ -1,43 +1,44 @@
 import { jsxs as m, jsx as e } from "react/jsx-runtime";
 import { scale as d, keyOfMatchingRange as M, clamp01 as k } from "../common/math.js";
-import { classes as h } from "../common/react.js";
-import { AnimatedNumber as v } from "./AnimatedNumber.js";
-import { Box as B, computeBoxClassName as $, computeBoxProps as j } from "./Box.js";
-function w(p) {
+import { classes as p } from "../common/react.js";
+import { computeBoxClassName as v, computeBoxProps as B } from "../common/ui.js";
+import { AnimatedNumber as $ } from "./AnimatedNumber.js";
+import { Box as j } from "./Box.js";
+function z(h) {
   const {
     alertAfter: a,
     alertBefore: t,
     className: _,
     format: R,
     maxValue: c = 1,
-    minValue: u = 1,
+    minValue: i = 1,
     ranges: n,
     size: y = 1,
     style: x,
     value: r,
     ...g
-  } = p, G = d(r, u, c), f = k(G), l = n ? {} : { primary: [0, 1] };
+  } = h, G = d(r, i, c), f = k(G), l = n ? {} : { primary: [0, 1] };
   n && Object.keys(n).forEach((o) => {
     const s = n[o];
     l[o] = [
-      d(s[0], u, c),
-      d(s[1], u, c)
+      d(s[0], i, c),
+      d(s[1], i, c)
     ];
   });
   function N() {
     return !!(a && t && r > a && r < t || a && r > a || t && r < t);
   }
   const C = N() && M(f, l);
-  return /* @__PURE__ */ m(B, { inline: !0, children: [
+  return /* @__PURE__ */ m(j, { inline: !0, children: [
     /* @__PURE__ */ e(
       "div",
       {
-        className: h([
+        className: p([
           "RoundGauge",
           _,
-          $(g)
+          v(g)
         ]),
-        ...j({
+        ...B({
           style: {
             fontSize: `${y}em`,
             ...x
@@ -48,7 +49,7 @@ function w(p) {
           (a || t) && /* @__PURE__ */ e(
             "g",
             {
-              className: h([
+              className: p([
                 "RoundGauge__alert",
                 C ? `active RoundGauge__alert--${C}` : ""
               ]),
@@ -57,18 +58,18 @@ function w(p) {
           ),
           /* @__PURE__ */ e("g", { children: /* @__PURE__ */ e("circle", { className: "RoundGauge__ringTrack", cx: "50", cy: "50", r: "45" }) }),
           /* @__PURE__ */ e("g", { children: Object.keys(l).map((o, s) => {
-            const i = l[o];
+            const u = l[o];
             return /* @__PURE__ */ e(
               "circle",
               {
                 className: `RoundGauge__ringFill RoundGauge--color--${o}`,
                 style: {
                   strokeDashoffset: Math.max(
-                    (2 - (i[1] - i[0])) * Math.PI * 50,
+                    (2 - (u[1] - u[0])) * Math.PI * 50,
                     0
                   )
                 },
-                transform: `rotate(${180 + 180 * i[0]} 50 50)`,
+                transform: `rotate(${180 + 180 * u[0]} 50 50)`,
                 cx: "50",
                 cy: "50",
                 r: "45"
@@ -105,9 +106,9 @@ function w(p) {
         ] })
       }
     ),
-    /* @__PURE__ */ e(v, { value: r, format: R })
+    /* @__PURE__ */ e($, { value: r, format: R })
   ] });
 }
 export {
-  w as RoundGauge
+  z as RoundGauge
 };

package/dist/components/Section.d.ts

@@ -1,29 +1,4 @@
 import { ReactNode } from 'react';
-import { BoxProps } from './Box';
-type Props = Partial<{
-    /** Buttons to render aside the section title. */
-    buttons: ReactNode;
-    /** id to assosiate with the parent div element used by this section, for uses with procs like getElementByID */
-    container_id: string;
-    /** If true, fills all available vertical space. */
-    fill: boolean;
-    /** If true, removes all section padding. */
-    fitted: boolean;
-    /** If true, fills the area without forcing height to 100% */
-    flexGrow: boolean;
-    /** If true, removes the section top padding */
-    noTopPadding: boolean;
-    /** @member Callback function for the `scroll` event */
-    onScroll: ((this: GlobalEventHandlers, ev: Event) => any) | null;
-    /** Shows or hides the scrollbar. */
-    scrollable: boolean;
-    /** Shows or hides the horizontal scrollbar. */
-    scrollableHorizontal: boolean;
-    /** If true, filly the area except for -3rem */
-    stretchContents: boolean;
-    /** Title of the section. */
-    title: ReactNode;
-}> & BoxProps;
 /**
  * ## Section
  * Section is a surface that displays content and actions on a single topic.
@@ -51,5 +26,46 @@ type Props = Partial<{
  * </Section>
  * ```
  */
-export declare function Section(props: Props): import("react/jsx-runtime").JSX.Element;
-export {};
+export declare const Section: import('react').ForwardRefExoticComponent<Partial<{
+    /** Buttons to render aside the section title. */
+    buttons: ReactNode;
+    /** id to assosiate with the parent div element used by this section, for uses with procs like getElementByID */
+    container_id: string;
+    /** If true, fills all available vertical space. */
+    fill: boolean;
+    /** If true, removes all section padding. */
+    fitted: boolean;
+    /** If true, fills the area without forcing height to 100% */
+    flexGrow: boolean;
+    /** If true, removes the section top padding */
+    noTopPadding: boolean;
+    /** @member Callback function for the `scroll` event */
+    onScroll: ((this: GlobalEventHandlers, ev: Event) => any) | null;
+    /** Shows or hides the scrollbar. */
+    scrollable: boolean;
+    /** Shows or hides the horizontal scrollbar. */
+    scrollableHorizontal: boolean;
+    /** If true, filly the area except for -3rem */
+    stretchContents: boolean;
+    /** Title of the section. */
+    title: ReactNode;
+}> & Partial<{
+    as: string;
+    children: ReactNode;
+    className: string | import('../common/react').BooleanLike;
+    id: string;
+    style: import('react').CSSProperties;
+    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>;
+    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>;
+    onScroll: import('react').UIEventHandler<HTMLDivElement>;
+}> & import('react').RefAttributes<HTMLDivElement>>;

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,6 +1,6 @@
 {
   "name": "tgui-core",
-  "version": "1.3.2",
+  "version": "1.5.1",
   "description": "TGUI core component library",
   "keywords": ["TGUI", "library", "typescript"],
   "files": ["dist"],
@@ -12,6 +12,13 @@
     "./*": {
       "import": "./dist/common/*.js",
       "require": "./dist/common/*.cjs"
+    },
+    "./styles": {
+      "default": "./lib/styles/main.scss",
+      "sass": "./lib/styles/main.scss"
+    },
+    "./styles/components/*": {
+      "sass": "./lib/styles/components/*"
     }
   },
   "repository": {
@@ -31,27 +38,28 @@
   "type": "module",
   "devDependencies": {
     "@biomejs/biome": "1.9.4",
-    "@chromatic-com/storybook": "3.2.2",
+    "@chromatic-com/storybook": "^3.2.3",
     "@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",
+    "@storybook/addon-console": "^3.0.0",
+    "@storybook/addon-essentials": "^8.4.7",
+    "@storybook/addon-interactions": "^8.4.7",
+    "@storybook/addon-onboarding": "^8.4.7",
+    "@storybook/blocks": "^8.4.7",
+    "@storybook/react": "^8.4.7",
+    "@storybook/react-vite": "^8.4.7",
+    "@storybook/test": "^8.4.7",
     "@types/node": "^22.9.0",
     "@types/react": "^18.3.3",
     "@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",
     "sass": "^1.81.0",
-    "storybook": "8.4.4",
+    "storybook": "^8.4.7",
     "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"
@@ -60,5 +68,5 @@
     "react": "^18.2.0",
     "react-dom": "^18.2.0"
   },
-  "packageManager": "pnpm@9.13.0+sha512.beb9e2a803db336c10c9af682b58ad7181ca0fbd0d4119f2b33d5f2582e96d6c0d93c85b23869295b765170fbdaa92890c0da6ada457415039769edf3c959efe"
+  "packageManager": "pnpm@9.15.1+sha512.1acb565e6193efbebda772702950469150cf12bcc764262e7587e71d19dc98a423dff9536e57ea44c49bdf790ff694e83c27be5faa23d67e0c033b583be4bfcf"
 }