tgui-core 1.5.1 → 1.5.3

package/README.md

@@ -41,7 +41,7 @@ You have two options for importing styles:
 To import all styles at once, add the following line to your main Sass file:
 
 ```scss
-@use "pkg:tgui-styles";
+@use "pkg:tgui-core/styles";
 ```
 
 ### 2. Importing Individual Styles
@@ -49,9 +49,9 @@ To import all styles at once, add the following line to your main Sass file:
 To import individual styles, add any of the exported styles to your main Sass file:
 
 ```scss
-@use "pkg:tgui-styles/components/Button";
-@use "pkg:tgui-styles/components/Dialog";
-@use "pkg:tgui-styles/components/NoticeBox";
+@use "pkg:tgui-core/styles/components/Button";
+@use "pkg:tgui-core/styles/components/Dialog";
+@use "pkg:tgui-core/styles/components/NoticeBox";
 ```
 
 ## License

package/dist/components/Button.d.ts

@@ -68,20 +68,12 @@ export declare namespace Button {
 type CheckProps = Partial<{
     checked: BooleanLike;
 }> & Props;
-/**
- * ## Button.Checkbox
- * A ghetto checkbox, made entirely using existing Button API.
- */
 export declare function ButtonCheckbox(props: CheckProps): import("react/jsx-runtime").JSX.Element;
 type ConfirmProps = Partial<{
     confirmColor: string;
     confirmContent: ReactNode;
     confirmIcon: string;
 }> & Props;
-/**
- * ## Button.Confirm
- * A button with an extra confirmation step, using native button component.
- */
 declare function ButtonConfirm(props: ConfirmProps): import("react/jsx-runtime").JSX.Element;
 type InputProps = Partial<{
     currentValue: string;
@@ -91,21 +83,11 @@ type InputProps = Partial<{
     onCommit: (e: any, value: string) => void;
     placeholder: string;
 }> & Props;
-/**
- * ## Button.Input
- * A button that turns into an input box after the first click.
- *
- * Turns back into a button after the user hits enter, defocuses, or hits escape. Enter and defocus commit, while escape cancels.
- */
 declare function ButtonInput(props: InputProps): import("react/jsx-runtime").JSX.Element;
 type FileProps = {
     accept: string;
     multiple?: boolean;
     onSelectFiles: (files: string | string[]) => void;
 } & Props;
-/**
- * ## Button.File
- * Accepts file input, based on the native element.
- */
 declare function ButtonFile(props: FileProps): import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/components/Collapsible.d.ts

@@ -12,5 +12,11 @@ type Props = Partial<{
     /** Text to display on the button for collapsing */
     title: ReactNode;
 }> & BoxProps;
+/**
+ * ## Collapsible
+ * Displays contents when open, acts as a fluid button when closed.
+ *
+ * Click to toggle, closed by default.
+ */
 export declare function Collapsible(props: Props): import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/components/ColorBox.d.ts

@@ -3,5 +3,13 @@ import { BoxProps } from './Box';
 type Props = {
     content?: ReactNode;
 } & BoxProps;
+/**
+ * ## ColorBox
+ * Displays a 1-character wide colored square. Can be used as a status indicator,
+ * or for visually representing a color.
+ *
+ * If you want to set a background color on an element, use a plain
+ * [Box](https://github.com/tgstation/tgui-core/tree/main/lib/components/Box.tsx) instead.
+ */
 export declare function ColorBox(props: Props): import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/components/Dialog.d.ts

@@ -1,8 +1,9 @@
+import { ReactNode } from 'react';
 type DialogProps = {
-    children: any;
+    children: ReactNode;
     height?: string;
     onClose: () => void;
-    title: any;
+    title: ReactNode;
     width?: string;
 };
 export declare function Dialog(props: DialogProps): import("react/jsx-runtime").JSX.Element;
@@ -14,11 +15,4 @@ type DialogButtonProps = {
     onClick: () => void;
 };
 declare function DialogButton(props: DialogButtonProps): import("react/jsx-runtime").JSX.Element;
-type UnsavedChangesDialogProps = {
-    documentName: string;
-    onClose: () => void;
-    onDiscard: () => void;
-    onSave: () => void;
-};
-export declare function UnsavedChangesDialog(props: UnsavedChangesDialogProps): import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/components/Dialog.js

@@ -1,13 +1,13 @@
-import { jsx as o, jsxs as e } from "react/jsx-runtime";
-import { Box as r } from "./Box.js";
-import { Button as s } from "./Button.js";
-function d(i) {
-  const { title: n, onClose: t, children: c, width: l, height: h } = i;
-  return /* @__PURE__ */ o("div", { className: "Dialog", children: /* @__PURE__ */ e(r, { className: "Dialog__content", width: l || "370px", height: h, children: [
-    /* @__PURE__ */ e("div", { className: "Dialog__header", children: [
-      /* @__PURE__ */ o("div", { className: "Dialog__title", children: n }),
-      /* @__PURE__ */ o(r, { mr: 2, children: /* @__PURE__ */ o(
-        s,
+import { jsx as t, jsxs as l } from "react/jsx-runtime";
+import { Box as e } from "./Box.js";
+import { Button as r } from "./Button.js";
+function d(o) {
+  const { title: i, onClose: n, children: c, width: a, height: s } = o;
+  return /* @__PURE__ */ t("div", { className: "Dialog", children: /* @__PURE__ */ l(e, { className: "Dialog__content", width: a || "370px", height: s, children: [
+    /* @__PURE__ */ l("div", { className: "Dialog__header", children: [
+      /* @__PURE__ */ t("div", { className: "Dialog__title", children: i }),
+      /* @__PURE__ */ t(e, { mr: 2, children: /* @__PURE__ */ t(
+        r,
         {
           mr: "-3px",
           width: "26px",
@@ -17,42 +17,26 @@ function d(i) {
           icon: "window-close-o",
           tooltip: "Close",
           tooltipPosition: "bottom-start",
-          onClick: t
+          onClick: n
         }
       ) })
     ] }),
     c
   ] }) });
 }
-function a(i) {
-  const { onClick: n, children: t } = i;
-  return /* @__PURE__ */ o(
-    s,
+function m(o) {
+  const { onClick: i, children: n } = o;
+  return /* @__PURE__ */ t(
+    r,
     {
-      onClick: n,
+      onClick: i,
       className: "Dialog__button",
       verticalAlignContent: "middle",
-      children: t
+      children: n
     }
   );
 }
-d.Button = a;
-function p(i) {
-  const { documentName: n, onSave: t, onDiscard: c, onClose: l } = i;
-  return /* @__PURE__ */ e(d, { title: "Notepad", onClose: l, children: [
-    /* @__PURE__ */ e("div", { className: "Dialog__body", children: [
-      "Do you want to save changes to ",
-      n,
-      "?"
-    ] }),
-    /* @__PURE__ */ e("div", { className: "Dialog__footer", children: [
-      /* @__PURE__ */ o(a, { onClick: t, children: "Save" }),
-      /* @__PURE__ */ o(a, { onClick: c, children: "Don't Save" }),
-      /* @__PURE__ */ o(a, { onClick: l, children: "Cancel" })
-    ] })
-  ] });
-}
+d.Button = m;
 export {
-  d as Dialog,
-  p as UnsavedChangesDialog
+  d as Dialog
 };

package/dist/components/Dimmer.d.ts

@@ -1,2 +1,8 @@
 import { BoxProps } from './Box';
+/**
+ * ## Dimmer
+ * Dims surrounding area to emphasize content placed inside.
+ *
+ * Content is automatically centered inside the dimmer.
+ */
 export declare function Dimmer(props: BoxProps): import("react/jsx-runtime").JSX.Element;

package/dist/components/Divider.d.ts

@@ -1,6 +1,14 @@
 type Props = Partial<{
+    /** Divider can divide content without creating a dividing line. */
     hidden: boolean;
+    /** Divide content vertically. */
     vertical: boolean;
 }>;
+/**
+ *
+ * ## Divider
+ * Draws a horizontal or vertical line, dividing a section into groups.
+ * Works like the good old `<hr>` element, but it's fancier.
+ */
 export declare function Divider(props: Props): import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/components/DmIcon.d.ts

@@ -25,5 +25,10 @@ type Props = {
     /** Movement state. Default is false */
     movement: any;
 }> & BoxProps;
+/**
+ * ## DmIcon
+ * Displays an icon from the BYOND icon reference map. Requires Byond 515+.
+ * A much faster alternative to base64 icons.
+ */
 export declare function DmIcon(props: Props): string | number | boolean | Iterable<ReactNode> | import("react/jsx-runtime").JSX.Element | null | undefined;
 export {};

package/dist/components/Dropdown.d.ts

@@ -1,6 +1,6 @@
 import { ReactNode } from 'react';
 import { BoxProps } from './Box';
-export type DropdownEntry = {
+type DropdownEntry = {
     displayText: ReactNode;
     value: string | number;
 };
@@ -43,5 +43,10 @@ type Props = {
     /** Text to show when nothing has been selected. */
     placeholder: string;
 }> & BoxProps;
+/**
+ * ## Dropdown
+ * A simple dropdown box component. Lets the user select from a list of options
+ * and displays selected entry.
+ */
 export declare function Dropdown(props: Props): import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/components/Flex.d.ts

@@ -55,6 +55,38 @@ export type FlexProps = Partial<{
 }> & BoxProps;
 export declare function computeFlexClassName(props: FlexProps): string;
 export declare function computeFlexProps(props: FlexProps): Record<string, any>;
+/**
+ * ## Flex
+ * Quickly manage the layout, alignment, and sizing of grid columns, navigation,
+ * components, and more with a full suite of responsive flexbox utilities.
+ *
+ * If you are new to or unfamiliar with flexbox, we encourage you to read this
+ * [CSS-Tricks flexbox guide](https://css-tricks.com/snippets/css/a-guide-to-flexbox/).
+ *
+ * Consists of two elements: `<Flex>` and `<Flex.Item>`. Both of them provide
+ * the most straight-forward mapping to flex CSS properties as possible.
+ *
+ * One of the most basic usage of flex, is to align certain elements
+ * to the left, and certain elements to the right:
+ *
+ * @example
+ * ```tsx
+ * <Flex>
+ *   <Flex.Item grow>Button description</Flex.Item>
+ *   <Flex.Item>
+ *     <Button>Perform an action</Button>
+ *   </Flex.Item>
+ * </Flex>
+ * ```
+ *
+ * Flex item with `grow` property will grow to take all available empty space,
+ * while flex items without grow will take the minimum amount of space. This
+ * effectively places the last flex item to the very end of the flex container.
+ *
+ * @deprecated - Use
+ * [Stack](https://github.com/tgstation/tgui-core/tree/main/lib/components/Stack.tsx)
+ * where possible.
+ */
 export declare function Flex(props: any): import("react/jsx-runtime").JSX.Element;
 export declare namespace Flex {
     var Item: typeof FlexItem;

package/dist/components/Icon.d.ts

@@ -1,29 +1,29 @@
-import { CSSProperties, ReactNode } from 'react';
 import { BooleanLike } from '../common/react';
 import { BoxProps } from './Box';
 type Props = {
     /** Icon name. See [icon list](https://fontawesome.com/v5/search?o=r&m=free) */
     name: string;
 } & Partial<{
-    /** Custom CSS class. */
-    className: string;
     /** Icon rotation, in degrees. */
     rotation: number;
     /** Icon size. `1` is normal size, `2` is two times bigger. Fractional numbers are supported. */
     size: number;
     /** Whether an icon should be spinning. Good for load indicators. */
     spin: BooleanLike;
-    /** Custom CSS. */
-    style: CSSProperties;
 }> & Omit<BoxProps, 'children'>;
+/**
+ * ## Icon
+ * Renders one of the FontAwesome icons of your choice.
+ *
+ * @example
+ * ```tsx
+ * <Icon name="plus" />
+ * ```
+ * @url https://fontawesome.com/v5/search?o=r&m=free
+ */
 export declare function Icon(props: Props): import("react/jsx-runtime").JSX.Element;
 export declare namespace Icon {
     var Stack: typeof IconStack;
 }
-type IconStackUnique = {
-    children: ReactNode;
-    className?: string;
-};
-export type IconStackProps = IconStackUnique & BoxProps;
-export declare function IconStack(props: IconStackProps): import("react/jsx-runtime").JSX.Element;
+declare function IconStack(props: BoxProps): import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/components/Icon.js

@@ -39,6 +39,5 @@ function g(c) {
 }
 d.Stack = g;
 export {
-  d as Icon,
-  g as IconStack
+  d as Icon
 };

package/dist/components/Image.d.ts

@@ -9,5 +9,13 @@ type Props = Partial<{
     objectFit: 'contain' | 'cover';
     src: string;
 }> & BoxProps;
+/**
+ * ## Image
+ * A wrapper for the `<img>` element.
+ *
+ * By default, it will attempt to fix broken images by fetching them again.
+ *
+ * It will also try to fix blurry images by rendering them pixelated.
+ */
 export declare function Image(props: Props): import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/components/ImageButton.d.ts

@@ -24,7 +24,11 @@ type Props = Partial<{
     children: ReactNode;
     /** Applies a CSS class to the element. */
     className: string;
-    /** Color of the button. See [Button](#button) but without `transparent`. */
+    /**
+     * Color of the button. See
+     * [Button](https://github.com/tgstation/tgui-core/tree/main/lib/components/Button.tsx)
+     * but without `transparent`.
+     */
     color: string;
     /** Makes button disabled and dark red if true. Also disables onClick. */
     disabled: BooleanLike;

package/dist/components/KeyListener.d.ts

@@ -4,5 +4,10 @@ type Props = Partial<{
     onKeyDown: (key: KeyEvent) => void;
     onKeyUp: (key: KeyEvent) => void;
 }>;
+/**
+ * ## KeyListener
+ * A component that listens for keyboard events and calls the provided
+ * callbacks.
+ */
 export declare function KeyListener(props: Props): null;
 export {};

package/dist/components/LabeledControls.d.ts

@@ -1,4 +1,20 @@
 import { FlexProps } from './Flex';
+/**
+ *  ## LabeledControls
+ * LabeledControls is a horizontal grid that is designed to hold various
+ * controls, like [Knobs](https://github.com/tgstation/tgui-core/tree/main/lib/components/Knob.tsx)
+ * or small [Buttons](https://github.com/tgstation/tgui-core/tree/main/lib/components/Button.tsx).
+ *
+ * Every item in this grid is labeled at the bottom.
+ *
+ * @example
+ * ```tsx
+ * <LabeledControls>
+ *   <LabeledControls.Item label="Temperature"><Knob /></LabeledControls.Item>
+ *   <LabeledControls.Item label="Submit"><Button /></LabeledControls.Item>
+ * </LabeledControls>
+ * ```
+ */
 export declare function LabeledControls(props: FlexProps): import("react/jsx-runtime").JSX.Element;
 export declare namespace LabeledControls {
     var Item: typeof LabeledControlsItem;

package/dist/components/LabeledList.d.ts

@@ -1,5 +1,32 @@
 import { PropsWithChildren, ReactNode } from 'react';
 import { BooleanLike } from '../common/react';
+/**
+ * ## LabeledList
+ * LabeledList is a continuous, vertical list of text and other content, where
+ * every item is labeled.
+ *
+ * It works just like a two column table, where first column is labels, and
+ * second column is content.
+ *
+ * @example
+ * ```tsx
+ * <LabeledList>
+ *   <LabeledList.Item label="Item">Content</LabeledList.Item>
+ * </LabeledList>
+ * ```
+ *
+ * If you want to have a button on the right side of an item (for example,
+ * to perform some sort of action), there is a way to do that:
+ *
+ * @example
+ * ```tsx
+ * <LabeledList>
+ *   <LabeledList.Item label="Item" buttons={<Button>Click me!</Button>}>
+ *     Content
+ *   </LabeledList.Item>
+ * </LabeledList>
+ * ```
+ */
 export declare function LabeledList(props: PropsWithChildren): import("react/jsx-runtime").JSX.Element;
 export declare namespace LabeledList {
     var Item: typeof LabeledListItem;

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.5.1",
+  "version": "1.5.3",
   "description": "TGUI core component library",
   "keywords": ["TGUI", "library", "typescript"],
   "files": ["dist"],

package/dist/components/MenuBar.d.ts

@@ -1,27 +0,0 @@
-import { ReactNode } from 'react';
-type MenuBarItemProps = {
-    children: any;
-    className?: string;
-    disabled?: boolean;
-    display: ReactNode;
-    entry: string;
-    openMenuBar: string | null;
-    openOnHover: boolean;
-    openWidth: string;
-    setOpenMenuBar: (entry: string | null) => void;
-    setOpenOnHover: (flag: boolean) => void;
-};
-export declare function Dropdown(props: MenuBarItemProps): import("react/jsx-runtime").JSX.Element;
-export declare namespace Dropdown {
-    var MenuItemToggle: (props: any) => import("react/jsx-runtime").JSX.Element;
-    var MenuItem: (props: any) => import("react/jsx-runtime").JSX.Element;
-    var Separator: () => import("react/jsx-runtime").JSX.Element;
-}
-type MenuBarProps = {
-    children: any;
-};
-export declare function MenuBar(props: MenuBarProps): import("react/jsx-runtime").JSX.Element;
-export declare namespace MenuBar {
-    var Dropdown: typeof import("./MenuBar").Dropdown;
-}
-export {};