tgui-core 1.4.0 → 1.5.2

package/dist/components/MenuBar.js

@@ -1,165 +1,146 @@
-var C = Object.defineProperty;
-var x = (r, e, n) => e in r ? C(r, e, { enumerable: !0, configurable: !0, writable: !0, value: n }) : r[e] = n;
-var h = (r, e, n) => x(r, typeof e != "symbol" ? e + "" : e, n);
-import { jsx as o, jsxs as f } from "react/jsx-runtime";
-import { Component as B, createRef as N } from "react";
-import { classes as M } from "../common/react.js";
+import { jsx as t, jsxs as p } from "react/jsx-runtime";
+import { useRef as B, useEffect as h } from "react";
+import { classes as _ } from "../common/react.js";
 import { Box as l } from "./Box.js";
-import { Icon as g } from "./Icon.js";
-class I extends B {
-  constructor(n) {
-    super(n);
-    h(this, "handleClick");
-    this.handleClick = (t) => {
-      this.props.menuRef.current && (this.props.menuRef.current.contains(t.target) || this.props.onOutsideClick());
-    };
+import { Icon as v } from "./Icon.js";
+function k(n) {
+  const { children: e, menuRef: o, onOutsideClick: r, width: a } = n;
+  function u(i) {
+    var c;
+    (c = o.current) != null && c.contains(i.target) || r();
   }
-  componentWillMount() {
-    window.addEventListener("click", this.handleClick);
-  }
-  componentWillUnmount() {
-    window.removeEventListener("click", this.handleClick);
-  }
-  render() {
-    const { width: n, children: t } = this.props;
-    return /* @__PURE__ */ o(
-      "div",
+  return h(() => (document.addEventListener("click", u), () => {
+    document.removeEventListener("click", u);
+  }), []), /* @__PURE__ */ t(
+    "div",
+    {
+      className: "Menubar__menu",
+      style: {
+        width: a
+      },
+      children: e
+    }
+  );
+}
+function N(n) {
+  const {
+    children: e,
+    className: o,
+    disabled: r,
+    display: a,
+    onClick: u,
+    onMouseOver: i,
+    open: c,
+    openWidth: s,
+    onOutsideClick: m,
+    ...M
+  } = n, f = B(null);
+  return /* @__PURE__ */ p("div", { ref: f, children: [
+    /* @__PURE__ */ t(
+      l,
       {
-        className: "Menubar__menu",
-        style: {
-          width: n
-        },
-        children: t
+        className: _([
+          "MenuBar__MenuBarButton",
+          "MenuBar__font",
+          "MenuBar__hover",
+          o
+        ]),
+        ...M,
+        onClick: r ? () => null : u,
+        onMouseOver: i,
+        children: /* @__PURE__ */ t("span", { className: "MenuBar__MenuBarButton-text", children: a })
       }
-    );
-  }
-}
-class O extends B {
-  constructor(n) {
-    super(n);
-    h(this, "menuRef");
-    this.menuRef = N();
-  }
-  render() {
-    const { props: n } = this, {
-      open: t,
-      openWidth: s,
-      children: i,
-      disabled: c,
-      display: u,
-      onMouseOver: a,
-      onClick: m,
-      onOutsideClick: p,
-      ..._
-    } = n, { className: k, ...v } = _;
-    return /* @__PURE__ */ f("div", { ref: this.menuRef, children: [
-      /* @__PURE__ */ o(
-        l,
-        {
-          className: M([
-            "MenuBar__MenuBarButton",
-            "MenuBar__font",
-            "MenuBar__hover",
-            k
-          ]),
-          ...v,
-          onClick: c ? () => null : m,
-          onMouseOver: a,
-          children: /* @__PURE__ */ o("span", { className: "MenuBar__MenuBarButton-text", children: u })
-        }
-      ),
-      t && /* @__PURE__ */ o(
-        I,
-        {
-          width: s,
-          menuRef: this.menuRef,
-          onOutsideClick: p,
-          children: i
-        }
-      )
-    ] });
-  }
+    ),
+    c && /* @__PURE__ */ t(
+      k,
+      {
+        width: s,
+        menuRef: this.menuRef,
+        onOutsideClick: m,
+        children: e
+      }
+    )
+  ] });
 }
-function d(r) {
+function d(n) {
   const {
     entry: e,
-    children: n,
-    openWidth: t,
-    display: s,
-    setOpenMenuBar: i,
-    openMenuBar: c,
-    setOpenOnHover: u,
-    openOnHover: a,
+    children: o,
+    openWidth: r,
+    display: a,
+    setOpenMenuBar: u,
+    openMenuBar: i,
+    setOpenOnHover: c,
+    openOnHover: s,
     disabled: m,
-    className: p
-  } = r;
-  return /* @__PURE__ */ o(
-    O,
+    className: M
+  } = n;
+  return /* @__PURE__ */ t(
+    N,
     {
-      openWidth: t,
-      display: s,
+      openWidth: r,
+      display: a,
       disabled: m,
-      open: c === e,
-      className: p,
+      open: i === e,
+      className: M,
       onClick: () => {
-        i(c === e ? null : e), u(!a);
+        u(i === e ? null : e), c(!s);
       },
       onOutsideClick: () => {
-        i(null), u(!1);
+        u(null), c(!1);
       },
       onMouseOver: () => {
-        a && i(e);
+        s && u(e);
       },
-      children: n
+      children: o
     }
   );
 }
-function w(r) {
-  const { value: e, displayText: n, onClick: t, checked: s } = r;
-  return /* @__PURE__ */ f(
+O.Dropdown = d;
+function g(n) {
+  const { value: e, displayText: o, onClick: r, checked: a } = n;
+  return /* @__PURE__ */ p(
     l,
     {
-      className: M([
+      className: _([
         "MenuBar__font",
         "MenuBar__MenuItem",
         "MenuBar__MenuItemToggle",
         "MenuBar__hover"
       ]),
-      onClick: () => t(e),
+      onClick: () => r(e),
       children: [
-        /* @__PURE__ */ o("div", { className: "MenuBar__MenuItemToggle__check", children: s && /* @__PURE__ */ o(g, { size: 1.3, name: "check" }) }),
-        n
+        /* @__PURE__ */ t("div", { className: "MenuBar__MenuItemToggle__check", children: a && /* @__PURE__ */ t(v, { size: 1.3, name: "check" }) }),
+        o
       ]
     }
   );
 }
-d.MenuItemToggle = w;
-function R(r) {
-  const { value: e, displayText: n, onClick: t } = r;
-  return /* @__PURE__ */ o(
+d.MenuItemToggle = g;
+function C(n) {
+  const { value: e, displayText: o, onClick: r } = n;
+  return /* @__PURE__ */ t(
     l,
     {
-      className: M([
+      className: _([
         "MenuBar__font",
         "MenuBar__MenuItem",
         "MenuBar__hover"
       ]),
-      onClick: () => t(e),
-      children: n
+      onClick: () => r == null ? void 0 : r(e),
+      children: o
     }
   );
 }
-d.MenuItem = R;
-function y() {
-  return /* @__PURE__ */ o("div", { className: "MenuBar__Separator" });
+d.MenuItem = C;
+function I() {
+  return /* @__PURE__ */ t("div", { className: "MenuBar__Separator" });
 }
-d.Separator = y;
-function T(r) {
-  const { children: e } = r;
-  return /* @__PURE__ */ o(l, { className: "MenuBar", children: e });
+d.Separator = I;
+function O(n) {
+  const { children: e } = n;
+  return /* @__PURE__ */ t(l, { className: "MenuBar", children: e });
 }
-T.Dropdown = d;
 export {
-  d as Dropdown,
-  T as MenuBar
+  O as MenuBar
 };

package/dist/components/Modal.d.ts

@@ -1,2 +1,9 @@
 import { BoxProps } from './Box';
+/**
+ * ## Modal
+ * A modal window. Uses a [Dimmer](https://github.com/tgstation/tgui-core/tree/main/lib/components/Dimmer.tsx)
+ * under the hood, and dynamically adjusts its own size to fit the content you're trying to display.
+ *
+ * Must be a direct child of a layout component (e.g. `Window`).
+ */
 export declare function Modal(props: BoxProps): import("react/jsx-runtime").JSX.Element;

package/dist/components/NoticeBox.d.ts

@@ -18,5 +18,9 @@ type ExclusiveProps = None | (Omit<None, 'info'> & {
     /** Red notice */
     danger: boolean;
 });
+/**
+ * ## NoticeBox
+ * A notice box which warns you about something very important.
+ */
 export declare function NoticeBox(props: Props): import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/components/NumberInput.d.ts

@@ -1,24 +1,42 @@
-import { Component, FocusEventHandler, KeyboardEventHandler, MouseEventHandler, RefObject } from 'react';
+import { CSSProperties, Component, FocusEventHandler, KeyboardEventHandler, MouseEventHandler, RefObject } from 'react';
 import { BooleanLike } from '../common/react';
+import { BoxProps } from './Box';
 type Props = Required<{
+    /** Highest possible value. */
     maxValue: number;
+    /** Lowest possible value. */
     minValue: number;
+    /** Adjust value by this amount when dragging the input. */
     step: number;
+    /** Value itself. */
     value: number | string;
 }> & Partial<{
+    /** Animates the value if it was changed externally. */
     animated: BooleanLike;
-    className: string;
+    /** Custom class name. */
+    className: BoxProps['className'];
+    /** Makes the input field uneditable & non draggable to prevent user changes */
     disabled: BooleanLike;
+    /** Fill all available horizontal space. */
     fluid: BooleanLike;
-    fontSize: string;
+    /** Input font size */
+    fontSize: CSSProperties['fontSize'];
+    /** Format value using this function before displaying it. */
     format: (value: number) => string;
-    height: string;
-    lineHeight: string;
+    /** Input height */
+    height: CSSProperties['height'];
+    /** Input line height */
+    lineHeight: CSSProperties['lineHeight'];
+    /** An event which fires when you release the input or successfully enter a number. */
     onChange: (value: number) => void;
+    /** An event which fires about every 500ms when you drag the input up and down, on release and on manual editing. */
     onDrag: (value: number) => void;
+    /** Screen distance mouse needs to travel to adjust value by one `step`. */
     stepPixelSize: number;
+    /** Unit to display to the right of value. */
     unit: string;
-    width: string;
+    /** Width in Box units */
+    width: BoxProps['width'];
 }>;
 type State = {
     currentValue: number;
@@ -27,6 +45,11 @@ type State = {
     origin: number;
     previousValue: number;
 };
+/**
+ * ## NumberInput
+ * A fancy, interactive number input, which you can either drag up and down
+ * 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>;
     dragTimeout: NodeJS.Timeout;

package/dist/components/ProgressBar.d.ts

@@ -41,5 +41,9 @@ type Props = {
      */
     ranges: Record<string, [number, number]>;
 }> & BoxProps & PropsWithChildren;
+/**
+ * ## ProgressBar
+ * Progress indicators inform users about the status of ongoing processes.
+ */
 export declare function ProgressBar(props: Props): import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/components/Slider.d.ts

@@ -37,11 +37,10 @@ type Props = {
 }> & BoxProps & PropsWithChildren;
 /**
  * ## Slider
- * A horizontal, progressbar-like control which allows dialing
- * in precise values by dragging it left and right.
+ * A horizontal, [ProgressBar](https://github.com/tgstation/tgui-core/tree/main/lib/components/Progressbar.tsx)-like
+ * control which allows dialing * in precise values by dragging it left and right.
  *
  * Single click opens an input box to manually type in a number.
- *
  */
 export declare function Slider(props: Props): import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/components/Stack.d.ts

@@ -10,6 +10,57 @@ type Props = Partial<{
     /** Adds zebra striping to the stack. */
     zebra: boolean;
 }> & FlexProps;
+/**
+ * ## Stack
+ * A higher-level component that is based on
+ * [Flex](https://github.com/tgstation/tgui-core/tree/main/lib/components/Flex.tsx).
+ *
+ * The main difference from `Flex`, is that this component automatically adds
+ * spacing between all stack items, reducing the boilerplate that you have to write!
+ *
+ * Consists of two elements: `<Stack>` and `<Stack.Item>`.
+ *
+ * Stacks can be vertical by adding a `vertical` property.
+ *
+ * @example
+ * ```tsx
+ * <Stack vertical>
+ *   <Stack.Item grow>Button description</Stack.Item>
+ *   <Stack.Item>
+ *     <Button>Perform an action</Button>
+ *   </Stack.Item>
+ * </Stack>
+ * ```
+ *
+ * ### High level window layout
+ * Stacks can be used for high level window layout.
+ * Make sure to use the `fill` property.
+ *
+ * @example
+ * ```tsx
+ * <Window>
+ *   <Window.Content>
+ *     <Stack fill>
+ *       <Stack.Item>
+ *         <Section fill>Sidebar</Section>
+ *       </Stack.Item>
+ *       <Stack.Item grow>
+ *         <Stack fill vertical>
+ *           <Stack.Item grow>
+ *             <Section fill scrollable>
+ *               Main content
+ *             </Section>
+ *           </Stack.Item>
+ *           <Stack.Item>
+ *             <Section>Bottom pane</Section>
+ *           </Stack.Item>
+ *         </Stack>
+ *       </Stack.Item>
+ *     </Stack>
+ *   </Window.Content>
+ * </Window>
+ * ```
+ */
 export declare function Stack(props: Props): import("react/jsx-runtime").JSX.Element;
 export declare namespace Stack {
     var Item: typeof StackItem;

package/dist/components/Table.d.ts

@@ -3,6 +3,24 @@ type Props = Partial<{
     /** Collapses table to the smallest possible size. */
     collapsing: boolean;
 }> & BoxProps;
+/**
+ * ## Table
+ * A straight forward mapping to a standard html table, which is slightly
+ * simplified (does not need a `<tbody>` tag) and with sane default styles
+ * (e.g. table width is 100% by default).
+ *
+ * @example
+ * ```tsx
+ * <Table>
+ *   <Table.Row>
+ *     <Table.Cell bold>Hello world!</Table.Cell>
+ *     <Table.Cell collapsing color="label">
+ *       Label
+ *     </Table.Cell>
+ *   </Table.Row>
+ * </Table>
+ * ```
+ */
 export declare function Table(props: Props): import("react/jsx-runtime").JSX.Element;
 export declare namespace Table {
     var Row: typeof TableRow;
@@ -12,7 +30,7 @@ type RowProps = Partial<{
     /** Whether this is a header cell. */
     header: boolean;
 }> & BoxProps;
-export declare function TableRow(props: RowProps): import("react/jsx-runtime").JSX.Element;
+declare function TableRow(props: RowProps): import("react/jsx-runtime").JSX.Element;
 type CellProps = Partial<{
     /** Additional columns for this cell to expand, assuming there is room. */
     colSpan: number;
@@ -24,5 +42,5 @@ type CellProps = Partial<{
     /** Rows for this cell to expand, assuming there is room. */
     rowSpan: number;
 }> & BoxProps;
-export declare function TableCell(props: CellProps): import("react/jsx-runtime").JSX.Element;
+declare function TableCell(props: CellProps): import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/components/Table.js

@@ -52,7 +52,5 @@ function T(e) {
 }
 m.Cell = T;
 export {
-  m as Table,
-  T as TableCell,
-  i as TableRow
+  m as Table
 };

package/dist/components/Tabs.d.ts

@@ -1,23 +1,92 @@
-import { PropsWithChildren, ReactNode } from 'react';
+import { ReactNode } from 'react';
 import { BoxProps } from './Box';
 type Props = Partial<{
-    className: string;
+    /**
+     * Similarly to `fill` on
+     * [Section](https://github.com/tgstation/tgui-core/tree/main/lib/components/Section.tsx),
+     * tabs will fill all available vertical space. Only makes sense in a vertical
+     * configuration.
+     */
     fill: boolean;
+    /** If true, tabs will take all available horizontal space. */
     fluid: boolean;
+    /** Use a vertical configuration, where tabs will be stacked vertically. */
     vertical: boolean;
-}> & BoxProps & PropsWithChildren;
+}> & BoxProps;
+/**
+ *  ## Tabs
+ * Tabs make it easy to explore and switch between different views.
+ *
+ * Here is an example of how you would construct a simple tabbed view:
+ *
+ * @example
+ * ```tsx
+ * <Tabs>
+ *   <Tabs.Tab
+ *     selected={tabIndex === 1}
+ *     onClick={() => setTabIndex(1)}>
+ *     Tab one
+ *   </Tabs.Tab>
+ *   <Tabs.Tab
+ *     selected={tabIndex === 2}
+ *     onClick={() => setTabIndex(2)}>
+ *     Tab two
+ *   </Tabs.Tab>
+ * </Tabs>
+ * <Box>
+ *   Tab selected: {tabIndex}
+ * </Box>
+ * ```
+ *
+ * Notice that tabs do not contain state. It is your job to track the selected
+ * tab, handle clicks and place tab content where you need it. In return, you get
+ * a lot of flexibility in regards to how you can layout your tabs.
+ *
+ * Tabs also support a vertical configuration. This is usually paired with
+ * [Stack](https://github.com/tgstation/tgui-core/tree/main/lib/components/Stack.tsx)
+ * to render tab content to the right.
+ *
+ * @example
+ * ```tsx
+ * <Stack>
+ *   <Stack.Item>
+ *     <Tabs vertical>...</Tabs>
+ *   </Stack.Item>
+ *   <Stack.Item grow basis={0}>
+ *     Tab content.
+ *   </Stack.Item>
+ * </Stack>
+ * ```
+ *
+ * If you need to combine a tab section with other elements, or if you want to
+ * add scrollable functionality to tabs, pair them with the
+ * [Section](https://github.com/tgstation/tgui-core/tree/main/lib/components/Section.tsx)
+ * component:
+ *
+ * @example
+ * ```tsx
+ * <Section fill fitted scrollable width="128px">
+ *   <Tabs vertical>...</Tabs>
+ *   ... other things ...
+ * </Section>
+ * ```
+ */
+export declare function Tabs(props: Props): import("react/jsx-runtime").JSX.Element;
+export declare namespace Tabs {
+    var Tab: (props: TabProps) => import("react/jsx-runtime").JSX.Element;
+}
 type TabProps = Partial<{
-    className: string;
-    color: string;
+    /** Font awesome icon. */
     icon: string;
+    /** Causes the icon to spin */
     iconSpin: boolean;
+    /** Left slot content */
     leftSlot: ReactNode;
+    /** Called when element is clicked */
     onClick: (e?: any) => void;
+    /** Right slot content */
     rightSlot: ReactNode;
+    /** Whether the tab is selected */
     selected: boolean;
-}> & BoxProps & PropsWithChildren;
-export declare function Tabs(props: Props): import("react/jsx-runtime").JSX.Element;
-export declare namespace Tabs {
-    var Tab: (props: TabProps) => import("react/jsx-runtime").JSX.Element;
-}
+}> & BoxProps;
 export {};

package/dist/components/Tooltip.d.ts

@@ -12,6 +12,22 @@ type Props = {
 type State = {
     hovered: boolean;
 };
+/**
+ * ## Tooltip
+ * A boxy tooltip from tgui 1. It is very hacky in its current state, and
+ * requires setting `position: relative` on the container.
+ *
+ * Please note that
+ * [Button](https://github.com/tgstation/tgui-core/tree/main/lib/components/Button.tsx)
+ * component has a `tooltip` prop and it is recommended to use that prop instead.
+ *
+ * Usage:
+ * ```tsx
+ * <Tooltip position="bottom" content="Box tooltip">
+ *   <Box position="relative">Sample text.</Box>
+ * </Tooltip>
+ * ```
+ */
 export declare class Tooltip extends Component<Props, State> {
     static renderedTooltip: HTMLDivElement | undefined;
     static singletonPopper: ReturnType<typeof createPopper> | undefined;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "tgui-core",
-  "version": "1.4.0",
+  "version": "1.5.2",
   "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,16 +38,16 @@
   "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-console": "^3.0.0",
-    "@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-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",
@@ -51,9 +58,8 @@
     "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"
@@ -62,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"
 }