tgui-core 5.5.9 → 5.5.10

package/dist/components/RoundGauge.d.ts

@@ -0,0 +1,57 @@
+import type { CSSProperties } from 'react';
+import type { BoxProps } from './Box';
+type Props = {
+    /** The current value of the metric. */
+    value: number;
+} & Partial<{
+    /** When provided, will cause an alert symbol on the gauge to begin flashing in the color upon which the needle currently rests, as defined in `ranges`. */
+    alertAfter: number;
+    /** As with alertAfter, but alerts below a value. If both are set, and alertAfter comes earlier, the alert will only flash when the needle is between both values. Otherwise, the alert will flash when on the active side of either threshold. */
+    alertBefore: number;
+    /** CSS style. */
+    className: string;
+    /** When provided, will be used to format the value of the metric for display. */
+    format: (value: number) => string;
+    /** The upper bound of the gauge. */
+    maxValue: number;
+    /** The lower bound of the gauge. */
+    minValue: number;
+    /** Provide regions of the gauge to color between two specified values of the metric. */
+    ranges: Record<string, [number, number]>;
+    /** When provided scales the gauge. */
+    size: number;
+    /** Custom css */
+    style: CSSProperties;
+}> & BoxProps;
+/**
+ * ## RoundGauge
+ *
+ * The RoundGauge component provides a visual representation of a single metric, as well as being capable of showing
+ * informational or cautionary boundaries related to that metric.
+ *
+ * Example:
+ *
+ * ```tsx
+ * <RoundGauge
+ *  size={1.75}
+ *  value={tankPressure}
+ *  minValue={0}
+ *  maxValue={pressureLimit}
+ *  alertAfter={pressureLimit * 0.7}
+ *  ranges={{
+ *     good: [0, pressureLimit * 0.7],
+ *     average: [pressureLimit * 0.7, pressureLimit * 0.85],
+ *     bad: [pressureLimit * 0.85, pressureLimit],
+ *   }}
+ *   format={formatPressure}
+ * />
+ * ```
+ *
+ * The alert on the gauge is optional, and will only be shown if the `alertAfter` prop is defined. When defined, the alert
+ * will begin to flash the respective color upon which the needle currently rests, as defined in the `ranges` prop.
+ *
+ * - [View documentation on tgui core](https://tgstation.github.io/tgui-core/?path=/docs/components-roundgauge--docs)
+ * - [View inherited Box props](https://tgstation.github.io/tgui-core/?path=/docs/components-box--docs)
+ */
+export declare function RoundGauge(props: Props): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/components/RoundGauge.js

@@ -0,0 +1 @@
+import{jsx as e,jsxs as r}from"react/jsx-runtime";import{clamp01 as a,keyOfMatchingRange as o,scale as t}from"../common/math.js";import{classes as n}from"../common/react.js";import{computeBoxClassName as l,computeBoxProps as c}from"../common/ui.js";import{AnimatedNumber as i}from"./AnimatedNumber.js";function m(m){let{alertAfter:s,alertBefore:u,className:d,format:g,maxValue:C=1,minValue:_=1,ranges:f,size:h=1,style:p,value:G,...R}=m,N=a(t(G,_,C)),y=f?{}:{primary:[0,1]};if(f)for(let e in f){let r=f[e];y[e]=[t(r[0],_,C),t(r[1],_,C)]}let x=(!!s&&!!u&&!!(G>s)&&!!(G<u)||!!s&&!!(G>s)||!!u&&!!(G<u))&&o(N,y);return r("div",{className:"RoundGauge__wrapper",children:[e("div",{className:n(["RoundGauge",d,l(R)]),...c({style:{fontSize:`${h}em`,...p},...R}),children:r("svg",{viewBox:"0 0 100 50",children:[(s||u)&&e("g",{className:n(["RoundGauge__alert",x?`active RoundGauge__alert--${x}`:""]),children:e("path",{d:"M48.211,14.578C48.55,13.9 49.242,13.472 50,13.472C50.758,13.472 51.45,13.9 51.789,14.578C54.793,20.587 60.795,32.589 63.553,38.106C63.863,38.726 63.83,39.462 63.465,40.051C63.101,40.641 62.457,41 61.764,41C55.996,41 44.004,41 38.236,41C37.543,41 36.899,40.641 36.535,40.051C36.17,39.462 36.137,38.726 36.447,38.106C39.205,32.589 45.207,20.587 48.211,14.578ZM50,34.417C51.426,34.417 52.583,35.574 52.583,37C52.583,38.426 51.426,39.583 50,39.583C48.574,39.583 47.417,38.426 47.417,37C47.417,35.574 48.574,34.417 50,34.417ZM50,32.75C50,32.75 53,31.805 53,22.25C53,20.594 51.656,19.25 50,19.25C48.344,19.25 47,20.594 47,22.25C47,31.805 50,32.75 50,32.75Z"})}),e("g",{children:e("circle",{className:"RoundGauge__ringTrack",cx:"50",cy:"50",r:"45"})}),e("g",{children:Object.keys(y).map((r,a)=>{let o=y[r];return e("circle",{className:`RoundGauge__ringFill RoundGauge--color--${r}`,cx:"50",cy:"50",r:"45",style:{strokeDashoffset:Math.max((2-(o[1]-o[0]))*Math.PI*50,0)},transform:`rotate(${180+180*o[0]} 50 50)`},a)})}),r("g",{className:"RoundGauge__needle",transform:`rotate(${180*N-90} 50 50)`,children:[e("polygon",{className:"RoundGauge__needleLine",points:"46,50 50,0 54,50"}),e("circle",{className:"RoundGauge__needleMiddle",cx:"50",cy:"50",r:"8"})]}),e("title",{children:"alert"})]})}),e(i,{format:g,value:G})]})}export{m as RoundGauge};

package/dist/components/Section.d.ts

@@ -0,0 +1,65 @@
+import { type ReactNode, type RefObject } from 'react';
+import type { 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;
+    /** Ref to the section element. */
+    ref: RefObject<HTMLDivElement | 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.
+ *
+ * They should be easy to scan for relevant and actionable information.
+ * Elements, like text and images, should be placed in them in a way that
+ * clearly indicates hierarchy.
+ *
+ * Sections can now be nested, and will automatically font size of the
+ * header according to their nesting level. Previously this was done via `level`
+ * prop, but now it is automatically calculated.
+ *
+ * Section can also be titled to clearly define its purpose.
+ *
+ * Example:
+ *
+ * ```tsx
+ * <Section title="Cargo">Here you can order supply crates.</Section>
+ * ```
+ *
+ * If you want to have a button on the right side of an section title
+ * (for example, to perform some sort of action), there is a way to do that:
+ *
+ * Example:
+ *
+ * ```tsx
+ * <Section title="Cargo" buttons={<Button>Send shuttle</Button>}>
+ *   Here you can order supply crates.
+ * </Section>
+ * ```
+ *
+ * - [View documentation on tgui core](https://tgstation.github.io/tgui-core/?path=/docs/components-section--docs)
+ * - [View inherited Box props](https://tgstation.github.io/tgui-core/?path=/docs/components-box--docs)
+ */
+export declare function Section(props: Props): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/components/Section.js

@@ -0,0 +1 @@
+import{jsx as e,jsxs as t}from"react/jsx-runtime";import{addScrollableNode as n,removeScrollableNode as o}from"../common/events.js";import{canRender as c,classes as i}from"../common/react.js";import{computeBoxClassName as r,computeBoxProps as l}from"../common/ui.js";import{useEffect as s,useRef as m}from"react";function a(a){let{buttons:d,children:S,className:_,container_id:f="",fill:u,fitted:p,flexGrow:h,noTopPadding:v,onScroll:N,ref:j,scrollable:x,scrollableHorizontal:b,stretchContents:T,title:g,...z}=a,C=c(g)||c(d),H=m(null),P=j??H;return s(()=>(P.current&&(x||b)&&n(P.current),()=>{P.current&&o(P.current)}),[]),t("div",{className:i(["Section",u&&"Section--fill",p&&"Section--fitted",x&&"Section--scrollable",b&&"Section--scrollableHorizontal",h&&"Section--flex",_,r(z)]),id:f,...l(z),children:[C&&t("div",{className:"Section__title",children:[e("span",{className:"Section__titleText",children:g}),e("div",{className:"Section__buttons",children:d})]}),e("div",{className:"Section__rest",children:e("div",{className:i(["Section__content",T&&"Section__content--stretchContents",v&&"Section__content--noTopPadding"]),onScroll:N,ref:P,children:S})})]})}export{a as Section};

package/dist/components/Slider.d.ts

@@ -0,0 +1,61 @@
+import type { PropsWithChildren } from 'react';
+import type { BoxProps } from './Box';
+type Props = {
+    /** Highest possible value. */
+    maxValue: number;
+    /** Lowest possible value. */
+    minValue: number;
+    /** Value itself, controls the position of the cursor. */
+    value: number;
+} & Partial<{
+    /** Animates the value if it was changed externally. */
+    animated: boolean;
+    /** Custom css */
+    className: string;
+    /** Color of the slider. */
+    color: string;
+    /** Disables the slider. */
+    disabled: boolean;
+    /** onChange also fires when you drag the input. */
+    tickWhileDragging: boolean;
+    /**
+     * If set, this value will be used to set the fill percentage of the
+     * progress bar filler independently of the main value.
+     */
+    fillValue: number;
+    /** Format value using this function before displaying it. */
+    format: (value: number) => string;
+    /**
+     * An event which fires when you release the slider or enter a number. This is
+     * the default value event for controls.
+     */
+    onChange: (event: Event, value: number) => void;
+    /**
+     * Applies a `color` to the slider based on whether the value lands in the
+     * range between `from` and `to`.
+     */
+    ranges: Record<string, [number, number]>;
+    /** Screen distance mouse needs to travel to adjust value by one `step`. */
+    step: number;
+    /**
+     * The sensitivity of the slider. Adjust this if it feels too slow/fast
+     * while dragging. Use higher for larger sliders. Default is 1.
+     */
+    stepPixelSize: number;
+    /** Unit to display to the right of value. */
+    unit: string;
+}> & BoxProps & PropsWithChildren;
+/**
+ * ## Slider
+ *
+ * A horizontal,
+ * [ProgressBar](https://tgstation.github.io/tgui-core/?path=/docs/components-progressbar--docs)-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.
+ *
+ * - [View documentation on tgui core](https://tgstation.github.io/tgui-core/?path=/docs/components-slider--docs)
+ * - [View inherited Box props](https://tgstation.github.io/tgui-core/?path=/docs/components-box--docs)
+ */
+export declare function Slider(props: Props): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/components/Slider.js

@@ -0,0 +1 @@
+import{jsx as r,jsxs as e}from"react/jsx-runtime";import{clamp01 as i,keyOfMatchingRange as s,scale as l}from"../common/math.js";import{classes as a}from"../common/react.js";import{computeBoxClassName as o,computeBoxProps as t}from"../common/ui.js";import{DraggableControl as m}from"./DraggableControl.js";function d(d){let{animated:c,tickWhileDragging:n,format:_,maxValue:f,minValue:h,onChange:u,step:g,stepPixelSize:p,unit:v,value:B,className:N,fillValue:P,color:S,ranges:j={},children:w,...x}=d,y=void 0!==w;return r(m,{dragMatrix:[1,0],animated:c,tickWhileDragging:n,format:_,maxValue:f,minValue:h,onChange:u,step:g,stepPixelSize:p,unit:v,value:B,children:m=>{let{displayElement:d,displayValue:c,dragging:n,editing:_,handleDragStart:u,inputElement:g}=m,p=null!=P,v=i(l(P??c,h,f)),M=i(l(c,h,f)),$=S||s(P??B,j)||"default";return e("div",{className:a(["Slider",_&&"Slider--editing","ProgressBar",`ProgressBar--color--${$}`,N,o(x)]),...t(x),onMouseDown:u,children:[r("div",{className:a(["ProgressBar__fill",p&&!n&&"ProgressBar__fill--animated"]),style:{opacity:.4,width:`${100*Math.max(v,M)}%`}}),r("div",{className:a(["ProgressBar__fill",!n&&"ProgressBar__fill--animated"]),style:{width:`${100*Math.min(v,M)}%`}}),r("div",{className:"Slider__cursorOffset",style:{width:`${100*M}%`},children:r("div",{className:"Slider__cursor",children:n&&r("div",{className:"Slider__popupValue",children:d})})}),r("div",{className:"ProgressBar__content",children:y?w:d}),g]})}})}export{d as Slider};

package/dist/components/Stack.d.ts

@@ -0,0 +1,83 @@
+import { type RefObject } from 'react';
+import { type FlexItemProps, type FlexProps } from './Flex';
+type Props = Partial<{
+    /** Fills available space. */
+    fill: boolean;
+    /** Reverses the stack. */
+    reverse: boolean;
+    /** Flex column */
+    vertical: boolean;
+    /** Adds zebra striping to the stack. */
+    zebra: boolean;
+}> & FlexProps;
+/**
+ * ## Stack
+ *
+ * A higher-level component that is based on
+ * [Flex](https://tgstation.github.io/tgui-core/?path=/docs/components-flex--docs).
+ *
+ * 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>
+ * ```
+ *
+ * - [View documentation on tgui core](https://tgstation.github.io/tgui-core/?path=/docs/components-stack--docs)
+ * - [View inherited Box props](https://tgstation.github.io/tgui-core/?path=/docs/components-box--docs)
+ */
+export declare function Stack(props: Props): import("react/jsx-runtime").JSX.Element;
+export declare namespace Stack {
+    var Item: typeof StackItem;
+    var Divider: typeof StackDivider;
+}
+type StackItemProps = FlexItemProps & Partial<{
+    innerRef: RefObject<HTMLDivElement | null>;
+}>;
+declare function StackItem(props: StackItemProps): import("react/jsx-runtime").JSX.Element;
+type StackDividerProps = FlexItemProps & Partial<{
+    hidden: boolean;
+}>;
+declare function StackDivider(props: StackDividerProps): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/components/Stack.js

@@ -0,0 +1 @@
+import{jsx as t}from"react/jsx-runtime";import{classes as r}from"../common/react.js";import{computeBoxClassName as e}from"../common/ui.js";import{useRef as i}from"react";import{computeFlexClassName as c,computeFlexItemProps as a,computeFlexProps as o}from"./Flex.js";function m(e){let{className:i,vertical:a,fill:m,reverse:n,zebra:l,...s}=e,d=n?"-reverse":"";return t("div",{className:r(["Stack",m&&"Stack--fill",a?"Stack--vertical":"Stack--horizontal",l&&"Stack--zebra",n&&`Stack--reverse${a?"--vertical":""}`,i,c(e)]),...o({direction:`${a?"column":"row"}${d}`,...s})})}m.Item=function(c){let{className:o,innerRef:m,...n}=c,l=i(m?.current??null);return t("div",{className:r(["Stack__item",o,e(n)]),ref:l,...a(n)})},m.Divider=function(i){let{className:c,hidden:o,...m}=i;return t("div",{className:r(["Stack__item","Stack__divider",o&&"Stack__divider--hidden",c,e(m)]),...a(m)})};export{m as Stack};

package/dist/components/StyleableSection.d.ts

@@ -0,0 +1,10 @@
+import type { PropsWithChildren, ReactNode } from 'react';
+type Props = Partial<{
+    style: Record<string, any>;
+    textStyle: Record<string, any>;
+    title: ReactNode;
+    titleStyle: Record<string, any>;
+    titleSubtext: string;
+}> & PropsWithChildren;
+export declare function StyleableSection(props: Props): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/components/StyleableSection.js

@@ -0,0 +1 @@
+import{jsx as e,jsxs as t}from"react/jsx-runtime";import{Box as c}from"./Box.js";function i(i){let{children:l,titleStyle:n,titleSubtext:s,title:r,textStyle:o,style:a}=i;return t(c,{style:a,children:[t(c,{className:"Section__title",style:n,children:[e(c,{className:"Section__titleText",style:o,children:r}),e("div",{className:"Section__buttons",children:s})," "]}),e(c,{className:"Section__rest",children:e(c,{className:"Section__content",children:l})})]})}export{i as StyleableSection};

package/dist/components/Table.d.ts

@@ -0,0 +1,59 @@
+import type { BoxProps } from './Box';
+type Props = Partial<{
+    /** Collapses table to the smallest possible size. */
+    collapsing: boolean;
+}> & BoxProps;
+export declare function Table(props: Props): import("react/jsx-runtime").JSX.Element;
+type RowProps = Partial<{
+    /** Whether this is a header cell. */
+    header: boolean;
+}> & BoxProps;
+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;
+    /** Collapses table cell to the smallest possible size,
+    and stops any text inside from wrapping. */
+    collapsing: boolean;
+    /** Whether this is a header cell. */
+    header: boolean;
+    /** Rows for this cell to expand, assuming there is room. */
+    rowSpan: number;
+}> & BoxProps;
+declare function TableCell(props: CellProps): import("react/jsx-runtime").JSX.Element;
+/**
+ * ## 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>
+ * ```
+ *
+ * - [View documentation on tgui core](https://tgstation.github.io/tgui-core/?path=/docs/components-table--docs)
+ * - [View inherited Box props](https://tgstation.github.io/tgui-core/?path=/docs/components-box--docs)
+ */
+export declare namespace Table {
+    /**
+     * ## Table.Cell
+     * A straight forward mapping to `<td>` element.
+     */
+    const Cell: typeof TableCell;
+    /**
+     * ## Table.Row
+     * A straight forward mapping to `<tr>` element.
+     */
+    const Row: typeof TableRow;
+}
+export {};

package/dist/components/Table.js

@@ -0,0 +1 @@
+var e;import{jsx as l}from"react/jsx-runtime";import{classes as a}from"../common/react.js";import{computeBoxClassName as r,computeBoxProps as o}from"../common/ui.js";function t(e){let{className:t,collapsing:c,children:n,...m}=e;return l("table",{className:a(["Table",c&&"Table--collapsing",t,r(m)]),...o(m),children:l("tbody",{children:n})})}(e=t||(t={})).Cell=function(e){let{className:t,collapsing:c,colSpan:n,header:m,...b}=e;return l("td",{className:a(["Table__cell",c&&"Table__cell--collapsing",m&&"Table__cell--header",t,r(e)]),colSpan:n,...o(b)})},e.Row=function(e){let{className:t,header:c,...n}=e;return l("tr",{className:a(["Table__row",c&&"Table__row--header",t,r(e)]),...o(n)})};export{t as Table};

package/dist/components/Tabs.d.ts

@@ -0,0 +1,110 @@
+import { type ReactNode } from 'react';
+import type { BoxProps } from './Box';
+type Props = Partial<{
+    /**
+     * 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;
+    /**
+     * Allows you to scroll horizontal tabs, and adds special buttons for it.
+     * Has no effect on vertical tabs.
+     */
+    scrollable: boolean;
+}> & BoxProps;
+export declare function Tabs(props: Props): import("react/jsx-runtime").JSX.Element;
+type TabProps = Partial<{
+    /** Font awesome icon. @see https://fontawesome.com/v6/search?o=r&m=free */
+    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;
+declare function TabItem(props: TabProps): import("react/jsx-runtime").JSX.Element;
+/**
+ * ## 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://tgstation.github.io/tgui-core/?path=/docs/components-stack--docs)
+ * 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://tgstation.github.io/tgui-core/?path=/docs/components-section--docs)
+ * component:
+ *
+ * Example:
+ *
+ * ```tsx
+ * <Section fill fitted scrollable width="128px">
+ *   <Tabs vertical>...</Tabs>
+ *   ... other things ...
+ * </Section>
+ * ```
+ *
+ * - [View documentation on tgui core](https://tgstation.github.io/tgui-core/?path=/docs/components-tabs--docs)
+ * - [View inherited Box props](https://tgstation.github.io/tgui-core/?path=/docs/components-box--docs)
+ */
+export declare namespace Tabs {
+    /**
+     * ## Tabs.Tab
+     * An individual tab element. Tabs function like buttons, so they inherit
+     * a lot of `Button` props.
+     */
+    const Tab: typeof TabItem;
+}
+export {};

package/dist/components/Tabs.js

@@ -0,0 +1 @@
+import{Fragment as e,jsx as r,jsxs as t}from"react/jsx-runtime";import{canRender as l,classes as n}from"../common/react.js";import{computeBoxClassName as i,computeBoxProps as c}from"../common/ui.js";import{useEffect as a,useRef as o,useState as s}from"react";import{Button as d}from"./Button.js";import{Icon as m}from"./Icon.js";function b(l){let{className:d,vertical:m,scrollable:b,fill:f,fluid:h,children:T,...v}=l,_=o(!0),p=o(null),L=o(null),[N,w]=s(!1),[E,j]=s(!1);function W(e){if(!p.current)return;let r=p.current,t=.5*r.clientWidth;r.scrollBy({left:"left"===e?-t:t,behavior:"smooth"})}a(()=>{if(!b||m||!p.current)return;let e=p.current;if(e.scrollWidth<e.clientWidth)return;function r(){w(e.scrollLeft>0),j(e.scrollLeft+e.clientWidth<e.scrollWidth)}function t(r){Math.abs(r.deltaY)>Math.abs(r.deltaX)&&(e.scrollLeft+=r.deltaY)}let l=e.querySelector(".Tab--selected");if(l)return L.current!==l&&(L.current=l,l.scrollIntoView({behavior:_.current?"auto":"smooth",inline:"center"})),_.current=!1,e.addEventListener("wheel",t,{passive:!0}),e.addEventListener("scroll",r),window.addEventListener("resize",r),r(),()=>{e.removeEventListener("wheel",t),e.removeEventListener("scroll",r),window.removeEventListener("resize",r)}},[b,m,T]);let g=T;return b&&!m&&(g=t(e,{children:[N&&r(u,{direction:"left",makeScroll:W}),r("div",{ref:p,className:n(["Tabs--scrollable-content",N&&"scrollable-left",E&&"scrollable-right"]),children:T}),E&&r(u,{direction:"right",makeScroll:W})]})),r("div",{className:n(["Tabs",m?"Tabs--vertical":"Tabs--horizontal",f&&"Tabs--fill",h&&"Tabs--fluid",!m&&b&&"Tabs--scrollable",d,i(v)]),...c(v),children:g})}function u(e){let{direction:t,makeScroll:l}=e;return r(d,{className:`scroll-${t}`,color:"transparent",icon:`angle-${t}`,onClick:()=>l(t)})}(b||(b={})).Tab=function(e){let{className:a,selected:o,color:s,icon:d,iconSpin:b,leftSlot:u,rightSlot:f,children:h,onClick:T,...v}=e;return t("div",{className:n(["Tab","Tabs__Tab",`Tab--color--${s}`,o&&"Tab--selected",a,i(v)]),onClick:e=>T?.(e),...c(v),children:[l(u)&&r("div",{className:"Tab__left",children:u})||!!d&&r("div",{className:"Tab__left",children:r(m,{name:d,spin:b})}),r("div",{className:"Tab__text",children:h}),l(f)&&r("div",{className:"Tab__right",children:f})]})};export{b as Tabs};

package/dist/components/TextArea.d.ts

@@ -0,0 +1,25 @@
+import type { RefObject } from 'react';
+import type { TextInputProps } from './Input';
+type Props = Partial<{
+    /** Don't use tab for indent */
+    dontUseTabForIndent: boolean;
+    /** Ref to the textarea element. */
+    ref: RefObject<HTMLTextAreaElement | null>;
+    /**
+     * Provides a Record with key: markupChar entries which can be used for
+     * ctrl + key combinations to surround a selected text with the markup
+     * character
+     */
+    userMarkup: Record<string, string>;
+}> & TextInputProps<HTMLTextAreaElement>;
+/**
+ * ## Textarea
+ *
+ * An input for larger amounts of text. Use this when you want inputs larger
+ * than one row.
+ *
+ * - [View documentation on tgui core](https://tgstation.github.io/tgui-core/?path=/docs/components-textarea--docs)
+ * - [View inherited Box props](https://tgstation.github.io/tgui-core/?path=/docs/components-box--docs)
+ */
+export declare function TextArea(props: Props): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/components/TextArea.js

@@ -0,0 +1 @@
+import{jsx as e}from"react/jsx-runtime";import{KEY as t,isEscape as r}from"../common/keys.js";import{classes as n}from"../common/react.js";import{computeBoxClassName as u,computeBoxProps as o}from"../common/ui.js";import{debounce as a}from"../common/timer.js";import{useEffect as c,useRef as l,useState as m}from"react";let i=a(e=>e(),250);function s(a){let{autoFocus:s,autoSelect:f,className:g,disabled:p,dontUseTabForIndent:T,expensive:v,fluid:y,maxLength:b,monospace:d,onBlur:k,onChange:$,onEnter:h,onEscape:x,onKeyDown:j,placeholder:D,ref:E,selfClear:I,spellcheck:K=!1,userMarkup:C,value:A,...w}=a,B=l(null),L=E??B,[N,q]=m(A??"");c(()=>{(s||f)&&setTimeout(()=>{L.current?.focus(),f&&L.current?.select()},1)},[]),c(()=>{L.current&&document.activeElement!==L.current&&A!==N&&q(A??"")},[A]);let z=o(w),F=n(["Input","TextArea",y&&"Input--fluid",d&&"Input--monospace",p&&"Input--disabled",u(w),g]);return e("textarea",{...z,autoComplete:"off",className:F,maxLength:b,onBlur:function(e){k?.(N)},onChange:function(e){let t=e.currentTarget.value;q(t),$&&(v?i(()=>$(t)):$(t))},onKeyDown:function(e){if(j?.(e),e.key===t.Enter&&!e.shiftKey){e.preventDefault(),h?.(e.currentTarget.value),I&&q(""),e.currentTarget.blur();return}if(r(e.key)){x?.(e.currentTarget.value),e.currentTarget.blur();return}if(!T&&e.key===t.Tab){e.preventDefault();let{value:t,selectionStart:r,selectionEnd:n}=e.currentTarget;q(`${t.substring(0,r)}	${t.substring(n)}`),e.currentTarget.selectionEnd=r+1,$?.(e.currentTarget.value);return}if(C&&(e.ctrlKey||e.metaKey)&&C[e.key]){e.preventDefault();let{selectionStart:t,selectionEnd:r,value:n}=e.currentTarget,u=C[e.key];q(`${n.substring(0,t)}${u}${n.substring(t,r)}${u}${n.substring(r)}`),e.currentTarget.selectionEnd=r+2*u.length,$?.(e.currentTarget.value);return}},placeholder:D,ref:L,spellCheck:K,value:N})}export{s as TextArea};

package/dist/components/TimeDisplay.d.ts

@@ -0,0 +1,18 @@
+type TimeDisplayProps = {
+    /** The value that the TimeDisplay needs to render - if you pass a wrong type it will be rendered directly */
+    value: number;
+} & Partial<{
+    /** Whether the TimeDisplay should automatically increment or decrement (plain prop to dec.) */
+    auto: 'up' | 'down' | true;
+    /** An optional function to format the value */
+    format: (value: number) => string;
+}>;
+/**
+ * ## TimeDisplay
+ *
+ * A simple component to format and display time values.
+ *
+ * - [View documentation on tgui core](https://tgstation.github.io/tgui-core/?path=/docs/components-timedisplay--docs)
+ */
+export declare function TimeDisplay(props: TimeDisplayProps): string | number | null;
+export {};

package/dist/components/TimeDisplay.js

@@ -0,0 +1 @@
+import{formatTime as r}from"../common/format.js";import{isSafeNumber as t}from"../common/math.js";import{useEffect as e,useRef as o,useState as m}from"react";function n(n){let{value:l=0,auto:a,format:u}=n,[c,i]=m(()=>t(l)?l:0),[p,f]=m(t(l)?l:void 0),v=o(null);return(e(()=>(void 0!==a&&(v.current=setInterval(()=>{let r="up"===a?10:-10;i(t=>Math.max(0,t+r))},1e3)),()=>{v.current&&clearInterval(v.current)}),[a]),e(()=>{l!==p&&(f(l),i(l))},[l,p]),t(l))?u?u(c):r(c):l||null}export{n as TimeDisplay};

package/dist/components/Tooltip.d.ts

@@ -0,0 +1,29 @@
+import type { Placement } from '@floating-ui/react';
+import type { ReactNode } from 'react';
+type Props = {
+    /** The content to display in the tooltip */
+    content: ReactNode;
+} & Partial<{
+    /** Hovering this element will show the tooltip */
+    children: ReactNode;
+    /** Where to place the tooltip relative to the reference element */
+    position: Placement;
+}>;
+/**
+ * ## Tooltip
+ *
+ * Displays a tooltip when hovering over the element. The tooltip
+ * can be customized with a custom content and position.
+ *
+ * Example:
+ *
+ * ```tsx
+ * <Tooltip content="This is a tooltip" position="top">
+ *   <Box>Hover over me</Box>
+ * </Tooltip>
+ * ```
+ *
+ * - [View documentation on tgui core](https://tgstation.github.io/tgui-core/?path=/docs/components-tooltip--docs)
+ */
+export declare function Tooltip(props: Props): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/components/Tooltip.js

@@ -0,0 +1 @@
+import{jsx as t}from"react/jsx-runtime";import{Floating as o}from"./Floating.js";function e(e){let{content:n,children:r,position:i}=e;return t(o,{content:n,contentClasses:"Tooltip",hoverOpen:!0,placement:i,children:r})}export{e as Tooltip};

package/dist/components/TrackOutsideClicks.d.ts

@@ -0,0 +1,34 @@
+import { type ReactElement } from 'react';
+type Props = {
+    /** The excluded element that CAN be clicked */
+    children: ReactElement<HTMLElement>;
+    /** Callback that fires whenever the user clicks something else */
+    onOutsideClick: () => void;
+};
+/**
+ * ## TrackOutsideClicks
+ *
+ * Allows you to track when the user clicks outside of a specific element.
+ *
+ * Example:
+ *
+ * ```tsx
+ * import { TrackOutsideClicks } from 'tgui-core/components';
+ *
+ * function MyComponent() {
+ *  const [isOpen, setIsOpen] = useState(false);
+ *
+ *  return (
+ *    <TrackOutsideClicks onOutsideClick={() => setIsOpen(false)}>
+ *     <div>
+ *       Hello world!
+ *    </div>
+ *   </TrackOutsideClicks>
+ *  );
+ * }
+ * ```
+ *
+ * - [View documentation on tgui core](https://tgstation.github.io/tgui-core/?path=/docs/components-trackoutsideclicks--docs)
+ */
+export declare function TrackOutsideClicks(props: Props): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/components/TrackOutsideClicks.js

@@ -0,0 +1 @@
+import{jsx as e}from"react/jsx-runtime";import{createRef as t,useEffect as r}from"react";function n(n){let{children:c,onOutsideClick:i}=n,o=t();function u(e){e.target instanceof Node&&o.current&&!o.current.contains(e.target)&&i()}return r(()=>(document.addEventListener("click",u),()=>{document.removeEventListener("click",u)}),[]),e("div",{ref:o,style:{userSelect:"none"},children:c})}export{n as TrackOutsideClicks};

package/dist/components/VirtualList.d.ts

@@ -0,0 +1,11 @@
+import { type PropsWithChildren } from 'react';
+/**
+ * ## VirtualList
+ *
+ * A vertical list that renders items to fill space up to the extents of the
+ * current window, and then defers rendering of other items until they come
+ * into view.
+ *
+ * - [View documentation on tgui core](https://tgstation.github.io/tgui-core/?path=/docs/components-virtuallist--docs)
+ */
+export declare function VirtualList(props: PropsWithChildren): import("react/jsx-runtime").JSX.Element;

package/dist/components/VirtualList.js

@@ -0,0 +1 @@
+import{jsx as t,jsxs as e}from"react/jsx-runtime";import{useCallback as r,useEffect as i,useRef as l,useState as a}from"react";function n(n){let{children:s}=n,o=l(null),[c,m]=a(1),[u,d]=a(0),h=r(()=>{let{current:t}=o;if(!s||!Array.isArray(s)||!t||c>=s.length)return;let e=document.body.offsetHeight-t.getBoundingClientRect().bottom,r=Math.ceil(t.offsetHeight/c);if(e>0){let t=Math.min(s.length,c+Math.max(1,Math.ceil(e/r)));m(t),d((s.length-t)*r)}},[o,c,s]);return i(()=>{h();let t=setInterval(h,100);return()=>clearInterval(t)},[h]),e("div",{className:"VirtualList",children:[t("div",{className:"VirtualList__Container",ref:o,children:Array.isArray(s)?s.slice(0,c):null}),t("div",{className:"VirtualList__Padding",style:{paddingBottom:`${u}px`}})]})}export{n as VirtualList};