Added tooltips

dist/common/keys.d.ts

@@ -5,17 +5,20 @@
  * Handles modifier keys (Shift, Alt, Control) and arrow keys.
  *
  * For alphabetical keys, use the actual character (e.g. 'a') instead of the key code.
+ * Don't access Esc or Escape directly, use isEscape() instead
  *
  * Something isn't here that you want? Just add it:
  * @url https://developer.mozilla.org/en-US/docs/Web/API/KeyboardEvent/key/Key_Values
  * @usage
  * ```ts
- * import { KEY } from 'tgui/keys';
+ * import { KEY } from 'tgui/common/keys';
  *
  * if (event.key === KEY.Enter) {
  *   // do something
  * }
  * ```
+ *
+ *
  */
 export declare enum KEY {
     Alt = "Alt",
@@ -25,6 +28,7 @@ export declare enum KEY {
     Down = "ArrowDown",
     End = "End",
     Enter = "Enter",
+    Esc = "Esc",
     Escape = "Escape",
     Home = "Home",
     Insert = "Insert",
@@ -37,3 +41,15 @@ export declare enum KEY {
     Tab = "Tab",
     Up = "ArrowUp"
 }
+/**
+ * ### isEscape
+ *
+ * Checks if the user has hit the 'ESC' key on their keyboard.
+ * There's a weirdness in BYOND where this could be either the string
+ * 'Escape' or 'Esc' depending on the browser. This function handles
+ * both cases.
+ *
+ * @param key - the key to check, typically from event.key
+ * @returns true if key is Escape or Esc, false otherwise
+ */
+export declare function isEscape(key: string): boolean;

dist/common/keys.js

@@ -1,4 +1,8 @@
-var r = /* @__PURE__ */ ((e) => (e.Alt = "Alt", e.Backspace = "Backspace", e.Control = "Control", e.Delete = "Delete", e.Down = "ArrowDown", e.End = "End", e.Enter = "Enter", e.Escape = "Escape", e.Home = "Home", e.Insert = "Insert", e.Left = "ArrowLeft", e.PageDown = "PageDown", e.PageUp = "PageUp", e.Right = "ArrowRight", e.Shift = "Shift", e.Space = " ", e.Tab = "Tab", e.Up = "ArrowUp", e))(r || {});
+var r = /* @__PURE__ */ ((e) => (e.Alt = "Alt", e.Backspace = "Backspace", e.Control = "Control", e.Delete = "Delete", e.Down = "ArrowDown", e.End = "End", e.Enter = "Enter", e.Esc = "Esc", e.Escape = "Escape", e.Home = "Home", e.Insert = "Insert", e.Left = "ArrowLeft", e.PageDown = "PageDown", e.PageUp = "PageUp", e.Right = "ArrowRight", e.Shift = "Shift", e.Space = " ", e.Tab = "Tab", e.Up = "ArrowUp", e))(r || {});
+function t(e) {
+  return e === "Esc" || e === "Escape";
+}
 export {
-  r as KEY
+  r as KEY,
+  t as isEscape
 };

dist/components/AnimatedNumber.d.ts

@@ -1,6 +1,6 @@
 import { Component } from 'react';
 
-export type AnimatedNumberProps = {
+type Props = {
     /**
      * If provided, a function that formats the inner string. By default,
      * attempts to match the numeric precision of `value`.
@@ -21,7 +21,7 @@ export type AnimatedNumberProps = {
  * An animated number label. Shows a number, formatted with an optionally
  * provided function, and animates it towards its target value.
  */
-export declare class AnimatedNumber extends Component<AnimatedNumberProps> {
+export declare class AnimatedNumber extends Component<Props> {
     /**
      * The inner `<span/>` being updated sixty times per second.
      */
@@ -34,10 +34,10 @@ export declare class AnimatedNumber extends Component<AnimatedNumberProps> {
      * The current value. This values approaches the target value.
      */
     currentValue: number;
-    constructor(props: AnimatedNumberProps);
+    constructor(props: Props);
     componentDidMount(): void;
     componentWillUnmount(): void;
-    shouldComponentUpdate(newProps: AnimatedNumberProps): boolean;
+    shouldComponentUpdate(newProps: Props): boolean;
     /**
      * Starts animating the inner span. If the inner span is already animating,
      * this is a no-op.
@@ -57,3 +57,4 @@ export declare class AnimatedNumber extends Component<AnimatedNumberProps> {
     getText(): string;
     render(): import("react/jsx-runtime").JSX.Element;
 }
+export {};

dist/components/Box.d.ts

@@ -1,4 +1,4 @@
-import { KeyboardEventHandler, MouseEventHandler, ReactNode, UIEventHandler } from 'react';
+import { CSSProperties, KeyboardEventHandler, MouseEventHandler, ReactNode, UIEventHandler } from 'react';
 import { BooleanLike } from '../common/react';
 
 type BooleanProps = Partial<Record<keyof typeof booleanStyleMap, boolean>>;
@@ -19,7 +19,7 @@ export type BoxProps = Partial<{
     as: string;
     children: ReactNode;
     className: string | BooleanLike;
-    style: Partial<CSSStyleDeclaration>;
+    style: CSSProperties;
 }> & BooleanProps & StringProps & EventHandlers;
 type DangerDoNotUse = {
     dangerouslySetInnerHTML?: {

dist/components/Button.d.ts

@@ -13,6 +13,7 @@ type EllipsisUnion = {
     children: string;
     /** @deprecated use children instead */
     content?: never;
+    /** Cuts off text with an ellipsis */
     ellipsis: true;
 } | Partial<{
     children: ReactNode;
@@ -21,20 +22,35 @@ type EllipsisUnion = {
     ellipsis: undefined;
 }>;
 type Props = Partial<{
+    /** Captures keyboard events */
     captureKeys: boolean;
+    /** Makes the button circular */
     circular: boolean;
+    /** Reduces the padding of the button */
     compact: boolean;
+    /** Disables and greys out the button */
     disabled: BooleanLike;
+    /** Fill all available horizontal space */
     fluid: boolean;
+    /** Adds an icon to the button */
     icon: string | false;
+    /** Icon color */
     iconColor: string;
+    /** Icon position */
     iconPosition: string;
+    /** Icon rotation */
     iconRotation: number;
+    /** Makes the icon spin */
     iconSpin: BooleanLike;
+    /** Called when element is clicked */
     onClick: (e: any) => void;
+    /** Activates the button (gives it a green color) */
     selected: BooleanLike;
+    /** A fancy, boxy tooltip, which appears when hovering over the button */
     tooltip: ReactNode;
+    /** Position of the tooltip. See [`Popper`](#Popper) for valid options. */
     tooltipPosition: Placement;
+    /** Align content vertically using flex. Use lineHeight if the height is static. */
     verticalAlignContent: string;
 }> & EllipsisUnion & BoxProps;
 /** Clickable button. Comes with variants. Read more in the documentation. */

dist/components/Collapsible.d.ts

@@ -2,9 +2,13 @@ import { ReactNode } from 'react';
 import { BoxProps } from './Box';
 
 type Props = Partial<{
+    /** Buttons or other content to render inline with the button */
     buttons: ReactNode;
+    /** Icon to display with the collapsible */
     icon: string;
+    /** Whether the collapsible is open */
     open: boolean;
+    /** Text to display on the button for collapsing */
     title: ReactNode;
 }> & BoxProps;
 export declare function Collapsible(props: Props): import("react/jsx-runtime").JSX.Element;

dist/components/DmIcon.d.ts

@@ -1,4 +1,5 @@
 import { ReactNode } from 'react';
+import { BooleanLike } from '../common/react';
 import { BoxProps } from './Box';
 
 declare enum Direction {
@@ -24,7 +25,7 @@ type Props = {
     /** Frame number. Default is 1 */
     frame: number;
     /** Movement state. Default is false */
-    movement: boolean;
+    movement: BooleanLike;
 }> & BoxProps;
 export declare function DmIcon(props: Props): string | number | boolean | Iterable<ReactNode> | import("react/jsx-runtime").JSX.Element | null | undefined;
 export {};

dist/components/Flex.d.ts

@@ -1,13 +1,57 @@
-import { CSSProperties } from 'react';
 import { BoxProps } from './Box';
 
 export type FlexProps = Partial<{
+    /**
+     * Default alignment of all children.
+     *
+     * - `stretch` (default) - stretch to fill the container.
+     * - `start` - items are placed at the start of the cross axis.
+     * - `end` - items are placed at the end of the cross axis.
+     * - `center` - items are centered on the cross axis.
+     * - `baseline` - items are aligned such as their baselines align.
+     */
     align: string | boolean;
+    /**
+     * This establishes the main-axis, thus defining the direction flex items are placed in the flex container.
+     *
+     *  - `row` (default) - left to right.
+     *  - `row-reverse` - right to left.
+     *  - `column` - top to bottom.
+     *  - `column-reverse` - bottom to top.
+     */
     direction: string;
+    /** Makes flexbox container inline, with similar behavior to an `inline` property on a `Box`. */
     inline: boolean;
+    /**
+     * This defines the alignment along the main axis. It helps distribute extra free space leftover when either all the flex items on a line are
+     * inflexible, or are flexible but have reached their maximum size. It also exerts some control over the alignment of items when they overflow
+     * the line.
+     *
+     *   - `flex-start` (default) - items are packed toward the start of the
+     *  flex-direction.
+     * - `flex-end` - items are packed toward the end of the flex-direction.
+     * - `space-between` - items are evenly distributed in the line; first item is
+     *   on the start line, last item on the end line
+     * - `space-around` - items are evenly distributed in the line with equal space
+     *   around them. Note that visually the spaces aren't equal, since all the items
+     *   have equal space on both sides. The first item will have one unit of space
+     *   against the container edge, but two units of space between the next item
+     *  because that next item has its own spacing that applies.
+     *  - `space-evenly` - items are distributed so that the spacing between any two
+     *  items (and the space to the edges) is equal.
+     */
     justify: string;
+    /** By default, flex items will all try to fit onto one line. You can change that and allow the items to wrap as needed with this property. */
     scrollable: boolean;
-    style: CSSProperties;
+    /**
+     * This defines the alignment along the cross axis. It helps distribute extra free space leftover when either all the flex items on a line are
+     *  inflexible, or are flexible but have reached their maximum size. It also exerts some control over the alignment of items when they overflow
+     *  the line.
+     *
+     *  - `nowrap` (default) - all flex items will be on one line
+     *  - `wrap` - flex items will wrap onto multiple lines, from top to bottom.
+     *  - `wrap-reverse` - flex items will wrap onto multiple lines from bottom to top.
+     */
     wrap: string | boolean;
 }> & BoxProps;
 export declare function computeFlexClassName(props: FlexProps): string;
@@ -16,14 +60,34 @@ export declare function Flex(props: any): import("react/jsx-runtime").JSX.Elemen
 export declare namespace Flex {
     var Item: typeof FlexItem;
 }
-export type FlexItemProps = BoxProps & Partial<{
+export type FlexItemProps = Partial<{
+    /** This allows the default alignment (or the one specified by align-items) to be overridden for individual flex items. */
     align: string | boolean;
+    /**
+     * This defines the default size of an element
+     * before any flex-related calculations are done. Has to be a length
+     * (e.g. `20%`, `5rem`), an `auto` or `content` keyword.
+     *
+     * - **Important:** IE11 flex is buggy, and auto width/height calculations
+     * can sometimes end up in a circular dependency. This usually happens, when
+     * working with tables inside flex (they have wacky internal widths and such).
+     * Setting basis to `0` breaks the loop and fixes all of the problems.
+     */
     basis: string | number;
+    /**
+     * This defines the ability for a flex item to grow if necessary. It accepts a unitless value that serves as a proportion.
+     * It dictates what amount of the available space inside the flex container the item should take up.
+     * This number is unit-less and is relative to other siblings.
+     */
     grow: number | boolean;
+    /**
+     * By default, flex items are laid out in the source order. However, the order property controls the order in which they appear in the
+     * flex container
+     */
     order: number;
+    /** This defines the ability for a flex item to shrink if necessary. Inverse of `grow`. */
     shrink: number | boolean;
-    style: Partial<HTMLDivElement['style']>;
-}>;
+}> & BoxProps;
 export declare function computeFlexItemProps(props: FlexItemProps): Record<string, any>;
 declare function FlexItem(props: any): import("react/jsx-runtime").JSX.Element;
 export {};

dist/components/Icon.d.ts

@@ -2,17 +2,22 @@ import { CSSProperties, ReactNode } from 'react';
 import { BooleanLike } from '../common/react';
 import { BoxProps } from './Box';
 
-type IconPropsUnique = {
+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;
-}>;
-export type IconProps = IconPropsUnique & BoxProps;
-export declare function Icon(props: IconProps): import("react/jsx-runtime").JSX.Element;
+}> & BoxProps;
+export declare function Icon(props: Props): import("react/jsx-runtime").JSX.Element;
 export declare namespace Icon {
     var Stack: typeof IconStack;
 }

dist/components/Image.d.ts

@@ -10,6 +10,5 @@ type Props = Partial<{
     objectFit: 'contain' | 'cover';
     src: string;
 }> & BoxProps;
-/** Image component. Use this instead of Box as="img". */
 export declare function Image(props: Props): import("react/jsx-runtime").JSX.Element;
 export {};

dist/components/LabeledList.d.ts

@@ -7,22 +7,50 @@ export declare namespace LabeledList {
     var Divider: typeof LabeledListDivider;
 }
 type LabeledListItemProps = Partial<{
+    /** Buttons to render aside the content. */
     buttons: ReactNode;
+    /** Content of this labeled item. */
     children: ReactNode;
+    /** Applies a CSS class to the element. */
     className: string | BooleanLike;
+    /** Sets the color of the content text. */
     color: string;
     /** @deprecated */
     content: any;
+    /**
+     * Sometimes this does not properly register in TS.
+     * See [react key docs](https://react.dev/learn/rendering-lists#keeping-list-items-in-order-with-key) for more info.
+     */
     key: string | number;
-    label: string | ReactNode | BooleanLike;
+    /** Item label. Appends a colon at the end. */
+    label: ReactNode;
+    /** Sets the color of the label. */
     labelColor: string;
+    /** Lets the label wrap and makes it not take the minimum width. */
     labelWrap: boolean;
+    /**
+     * Align the content text.
+     *
+     * - `left` (default)
+     * - `center`
+     * - `right`
+     */
     textAlign: string;
+    /** Tooltip text. */
     tooltip: string;
+    /**
+     * Align both the label and the content vertically.
+     *
+     * - `baseline` (default)
+     * - `top`
+     * - `middle`
+     * - `bottom`
+     */
     verticalAlign: string;
 }>;
 declare function LabeledListItem(props: LabeledListItemProps): import("react/jsx-runtime").JSX.Element;
 type LabeledListDividerProps = {
+    /** Size of the divider. */
     size?: number;
 };
 declare function LabeledListDivider(props: LabeledListDividerProps): import("react/jsx-runtime").JSX.Element;

dist/components/LabeledList.js

@@ -73,6 +73,7 @@ function z(e) {
     a && /* @__PURE__ */ l("td", { className: i([o.cell, o.buttons]), children: a })
   ] });
 }
+p.Item = z;
 function A(e) {
   const t = e.size ? g(Math.max(0, e.size - 1)) : 0;
   return /* @__PURE__ */ l("tr", { className: "LabeledList__row", children: /* @__PURE__ */ l(
@@ -87,7 +88,6 @@ function A(e) {
     }
   ) });
 }
-p.Item = z;
 p.Divider = A;
 export {
   p as LabeledList

dist/components/NoticeBox.d.ts

@@ -7,10 +7,13 @@ type None = {
     [K in NoticeType]?: undefined;
 };
 type ExclusiveProps = None | (Omit<None, 'info'> & {
+    /** Blue notice */
     info: boolean;
 }) | (Omit<None, 'success'> & {
+    /** Green notice */
     success: boolean;
 }) | (Omit<None, 'danger'> & {
+    /** Red notice */
     danger: boolean;
 });
 export declare function NoticeBox(props: Props): import("react/jsx-runtime").JSX.Element;