tgui-core 5.5.2 → 5.5.9

package/dist/components/Box.d.ts

@@ -1,104 +0,0 @@
-import type { BooleanLike } from '../common/react.ts';
-import { type BooleanStyleMap, type EventHandlers, type StringStyleMap } from '../common/ui.ts';
-import { type CSSProperties, type HTMLAttributes, type ReactNode } from 'react';
-export type BoxInternalProps = Partial<{
-    /**
-     * The component used for the root node.
-     * @default <div>
-     */
-    as: string;
-    /** The content of the component. */
-    children: ReactNode;
-    /** Class name to pass into the component. */
-    className: string | BooleanLike;
-    /** The unique id of the component. */
-    id: string;
-    /** The inline style of the component. */
-    style: CSSProperties;
-    /**
-     * A shorthand classname syntax based loosely on tailwind.
-     *
-     * This takes all Box style props with a dash separator for params, e.g.'mb-4' or the prop name alone e.g. 'bold'.
-     *
-     * It's compatible with regular Box props, even on the same component, but it will take precedence.
-     *
-     * Example:
-     * ```tsx
-     * <Box tw="mb-2 bold fontSize-16px">
-     *  // Is equivalent to
-     * <Box mb={2} bold fontSize="16px">
-     *  ```
-     *
-     * Caveats:
-     * 1. You can't use this for custom props from other components.
-     *
-     * 2. There is no type info or safety for this method. Like the old days, it simply won't work if you use it incorrectly.
-     *
-     * 3. This should be a static string with minimal interpolation. If you need more logic, prefer the props approach.
-     */
-    tw: string;
-}>;
-type LiftedHTMLAttributes<TElement> = {
-    /** Whether this element is draggable.
-     * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Global_attributes/draggable
-     */
-    draggable?: HTMLAttributes<TElement>['draggable'];
-};
-export interface BoxProps<TElement = HTMLDivElement> extends BoxInternalProps, BooleanStyleMap, StringStyleMap, LiftedHTMLAttributes<TElement>, EventHandlers<TElement> {
-}
-type DangerDoNotUse = {
-    dangerouslySetInnerHTML?: {
-        __html: any;
-    };
-};
-/**
- * ## Box
- *
- * The Box component serves as a wrapper component for most of the CSS utility
- * needs. It creates a new DOM element, a `<div>` by default that can be changed
- * with the `as` property. Let's say you want to use a `<span>` instead:
- *
- * Example:
- *
- * ```tsx
- * <Box as="span" m={1}>
- *   <Button />
- * </Box>
- * ```
- *
- * This works great when the changes can be isolated to a new DOM element.
- * For instance, you can change the margin this way.
- *
- * However, sometimes you have to target the underlying DOM element.
- * For instance, you want to change the text color of the button. The Button
- * component defines its own color. CSS inheritance doesn't help.
- *
- * To workaround this problem, the Box children accept a render props function.
- * This way, `Button` can pull out the `className` generated by the `Box`.
- *
- * Example:
- *
- * ```tsx
- * <Box color="primary">{(props) => <Button {...props} />}</Box>
- * ```
- *
- * ## Box Units
- *
- * `Box` units, like width, height and margins can be defined in two ways:
- *
- * - By plain numbers
- *   - 1 unit equals `1rem` for width, height and positioning properties.
- *   - 1 unit equals `0.5rem` for margins and paddings.
- * - By strings with proper CSS units
- *   - For example: `100px`, `2em`, `1rem`, `100%`, etc.
- *
- * If you need more precision, you can always use fractional numbers.
- *
- * Default font size (`1rem`) is equal to `12px`.
- *
- * - [View documentation on tgui core](https://tgstation.github.io/tgui-core/?path=/docs/components-box--docs)
- */
-export declare function Box<TElement = HTMLDivElement>(props: BoxProps<TElement> & DangerDoNotUse): import("react").ReactElement<{
-    className: string;
-}, string | import("react").JSXElementConstructor<any>>;
-export {};

package/dist/components/Box.js

@@ -1 +0,0 @@
-import{computeBoxClassName as o,computeBoxProps as r,computeTwClass as m}from"../common/ui.js";import{createElement as t}from"react";function e(e){let{as:i="div",className:c,children:n,tw:a,...f}=e,p=c?`${c} ${o(f)}`:o(f);return t(i,{...r({...f,...m(a)}),className:p},n)}export{e as Box};

package/dist/components/Button.d.ts

@@ -1,123 +0,0 @@
-import { type BooleanLike } from '../common/react.ts';
-import type { Placement } from '@floating-ui/react';
-import { type ReactNode, type RefObject } from 'react';
-import { type BoxProps } from './Box';
-/**
- * Getting ellipses to work requires that you use:
- * 1. A string rather than a node
- * 2. A fixed width here or in a parent
- * 3. Children prop rather than content
- */
-type EllipsisUnion = {
-    children: string;
-    /** @deprecated use children instead */
-    content?: never;
-    /** Cuts off text with an ellipsis */
-    ellipsis: true;
-} | Partial<{
-    children: ReactNode;
-    /** @deprecated use children instead */
-    content: ReactNode;
-    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 button and makes it semi-transparent */
-    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;
-    /** Icon size */
-    iconSize: number;
-    /** Makes the icon spin */
-    iconSpin: BooleanLike;
-    /** Called when the button is blurred */
-    onBlur: (e: any) => void;
-    /** 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. Does not guarantee the position is respected. */
-    tooltipPosition: Placement;
-    /** Align content vertically using flex. Use lineHeight if the height is static. */
-    verticalAlignContent: string;
-}> & EllipsisUnion & BoxProps;
-export declare function Button(props: Props): import("react/jsx-runtime").JSX.Element;
-type CheckProps = Partial<{
-    checked: BooleanLike;
-}> & Props;
-declare function ButtonCheckbox(props: CheckProps): import("react/jsx-runtime").JSX.Element;
-type ConfirmProps = Partial<{
-    confirmColor: string;
-    confirmContent: ReactNode;
-    confirmIcon: string;
-}> & Props;
-declare function ButtonConfirm(props: ConfirmProps): import("react/jsx-runtime").JSX.Element;
-type InputProps = Partial<{
-    /** Text to display on the button exclusively. If left blank, displays the value */
-    buttonText: string;
-    /** Use the value prop. This is done to be uniform with other inputs. */
-    children: never;
-    /** Max length of the input */
-    maxLength: number;
-    /** Action on outside click or enter key */
-    onCommit: (value: string) => void;
-    /** Reference to the inner input */
-    ref: RefObject<HTMLInputElement | null>;
-    /** The value of the input */
-    value: string;
-}> & Props;
-declare function ButtonInput(props: InputProps): import("react/jsx-runtime").JSX.Element;
-type FileProps = {
-    accept: string;
-    multiple?: boolean;
-    onSelectFiles: (files: string | string[]) => void;
-} & Props;
-declare function ButtonFile(props: FileProps): import("react/jsx-runtime").JSX.Element;
-/**
- * ## Button
- *
- * Buttons allow users to take actions, and make choices, with a single click.
- *
- * - [View documentation on tgui core](https://tgstation.github.io/tgui-core/?path=/docs/components-button--docs)
- * - [View inherited Box props](https://tgstation.github.io/tgui-core/?path=/docs/components-box--docs)
- */
-export declare namespace Button {
-    /**
-     * ## Button.Checkbox
-     * A ghetto checkbox, made entirely using existing Button API.
-     */
-    const Checkbox: typeof ButtonCheckbox;
-    /**
-     * ## Button.Confirm
-     * A button with an extra confirmation step, using native button component.
-     */
-    const Confirm: typeof ButtonConfirm;
-    /**
-     * ## 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.
-     */
-    const Input: typeof ButtonInput;
-    /**
-     * ## Button.File
-     * Accepts file input, based on the native element.
-     */
-    const File: typeof ButtonFile;
-}
-export {};

package/dist/components/Button.js

@@ -1 +0,0 @@
-var t;import{Fragment as n,jsx as e,jsxs as o}from"react/jsx-runtime";import{KEY as r,isEscape as i}from"../common/keys.js";import{classes as u}from"../common/react.js";import{computeBoxClassName as l,computeBoxProps as c}from"../common/ui.js";import{createRef as a,useEffect as s,useRef as f,useState as m}from"react";import{Box as p}from"./Box.js";import{Icon as d}from"./Icon.js";import{Tooltip as B}from"./Tooltip.js";function h(t){let{captureKeys:n=!0,children:a,circular:s,className:f,color:m,compact:p,content:h,disabled:y,ellipsis:k,fluid:g,icon:v,iconColor:x,iconPosition:C,iconRotation:b,iconSize:j,iconSpin:N,onClick:_,selected:w,tooltip:D,tooltipPosition:I,verticalAlignContent:T,...A}=t,$=h||a,q=e(d,{className:"Button--icon",color:x,name:v||"",rotation:b,size:j,spin:N}),E=e("div",{className:u(["Button",g&&"Button--fluid",y&&"Button--disabled",w&&"Button--selected",s&&"Button--circular",p&&"Button--compact",!$&&"Button--empty",v&&"Button--hasIcon",C&&`Button--icon-${C}`,T&&"Button--flex",T&&g&&"Button--flex--fluid",T&&`Button--verticalAlignContent--${T}`,`Button--color--${m||"default"}`,f,l(A)]),onClick:t=>{!y&&_&&_(t)},onKeyDown:t=>{if(n){if(t.key===r.Space||t.key===r.Enter){t.preventDefault(),!y&&_&&_(t);return}i(t.key)&&t.preventDefault()}},tabIndex:y?void 0:0,...c(A),children:o("div",{className:u(["Button__content",k&&"Button__content--ellipsis"]),children:[v&&"right"!==C&&q,k?e("span",{className:"Button--ellipsis",children:$}):$,v&&"right"===C&&q]})});return D&&(E=e(B,{content:D,position:I,children:E})),E}(t=h||(h={})).Checkbox=function(t){let{checked:n,...o}=t;return e(h,{color:"transparent",icon:n?"check-square-o":"square-o",selected:n,...o})},t.Confirm=function(t){let{children:n,color:o,confirmColor:r="bad",confirmContent:i="Confirm?",confirmIcon:u,ellipsis:l=!0,icon:c,onBlur:a,onClick:s,...f}=t,[p,d]=m(!1);return e(h,{color:p?r:o,icon:p?u:c,onBlur:function(t){d(!1),a?.(t)},onClick:function(t){p?(s?.(t),d(!1)):d(!0)},...f,children:p?i:n})},t.Input=function(t){let{buttonText:n,children:l,color:c="default",disabled:B,fluid:h,icon:y,iconRotation:k,iconSpin:g,maxLength:v,onCommit:x,ref:C,value:b="",...j}=t,[N,_]=m(b),[w,D]=m(!1),I=f(!1),T=a(),A=C??T;return s(()=>{w&&(A.current?.focus(),A.current?.select())},[w]),s(()=>{w||b===N||_(b)},[w,b]),o(p,{className:u(["Button",h&&"Button--fluid",B&&"Button--disabled",`Button--color--${c}`]),onClick:()=>{B||D(!0)},...j,children:[y&&e(d,{name:y,rotation:k,spin:g}),n??N,e("input",{className:"NumberInput__input",disabled:!!B,maxLength:v,onBlur:function(){I.current||b===N||(x?.(N),I.current=!1),D(!1)},onChange:function(t){_(t.currentTarget.value)},onKeyDown:function(t){if(t.key===r.Enter){t.preventDefault(),t.currentTarget.blur();return}if(i(t.key)){t.preventDefault(),I.current=!0,t.currentTarget.blur();return}},ref:A,spellCheck:"false",style:{display:w?"":"none",textAlign:"left"},type:"text",value:N})]})},t.File=function(t){let{accept:r,multiple:i,onSelectFiles:u,...l}=t,c=f(null);async function a(t){let n=Array.from(t).map(t=>{let n=new FileReader;return new Promise(e=>{n.onload=()=>e(n.result),n.readAsText(t)})});return await Promise.all(n)}async function s(t){let n=t.target.files;if(n?.length){let t=await a(n);u(i?t:t[0])}}return o(n,{children:[e(h,{onClick:()=>c.current?.click(),...l}),e("input",{accept:r,hidden:!0,multiple:i,onChange:s,ref:c,type:"file"})]})};export{h as Button};

package/dist/components/ByondUi.d.ts

@@ -1,61 +0,0 @@
-import type { BoxProps } from './Box';
-type SampleByondParams = Partial<{
-    /** Can be auto-generated. */
-    id: string;
-    /**  Defaults to the current window */
-    parent: string;
-    /** The type of control. Read-only. */
-    type: string;
-    /** Text shown in label/button/input. For input controls this setting is only available at runtime. */
-    text: string;
-}>;
-type Props = Partial<{
-    /** An object with parameters, which are directly passed to
-     * the `winset` proc call.
-     *
-     * You can find a full reference of these parameters
-     * in [BYOND controls and parameters guide](https://secure.byond.com/docs/ref/skinparams.html). */
-    params: SampleByondParams & Record<string, any>;
-    /**
-     * If this ByondUi element should tell DreamMaker that it has been created or not.
-     *
-     * Defaults to on.
-     */
-    phonehome: boolean;
-}> & BoxProps;
-/**
- * ## ByondUi
- *
- * Displays a BYOND UI element on top of the browser, and leverages browser's
- * layout engine to position it just like any other HTML element. It is
- * especially useful if you want to display a secondary game map in your
- * interface.
- *
- * Example:
- *
- * ```tsx
- * <ByondUi
- *   params={{
- *    id: 'test_button', // optional, can be auto-generated
- *    parent: 'some_container', // optional, defaults to the current window
- *    type: 'button',
- *    text: 'Hello, world!',
- *   }} />
- * ```
- *
- * Example:
- *
- * ```tsx
- * <ByondUi
- *   params={{
- *    id: 'test_map',
- *    type: 'map',
- *   }} />
- * ```
- *
- * It supports a full set of `Box` properties for layout purposes.
- *
- * - [View inherited Box props](https://tgstation.github.io/tgui-core/?path=/docs/components-box--docs)
- */
-export declare function ByondUi(props: Props): import("react/jsx-runtime").JSX.Element;
-export {};

package/dist/components/ByondUi.js

@@ -1 +0,0 @@
-import{jsx as e}from"react/jsx-runtime";import{debounce as n}from"../common/timer.js";import{computeBoxProps as t}from"../common/ui.js";import{useEffect as o,useRef as r}from"react";let i=[];function d(d){let{params:s,phonehome:l,...u}=d,m=r(null),p=r(function(e,n=!0){let t=i.length;i.push(null);let o=e||`byondui_${t}`;return{render:e=>{n&&Byond.sendMessage("renderByondUi",{renderByondUi:o}),i[t]=o,Byond.winset(o,e)},unmount:()=>{n&&Byond.sendMessage("unmountByondUi",{renderByondUi:o}),i[t]=null,Byond.winset(o,{parent:""})}}}(s?.id,l));function f(){let e,n,t=m.current;if(!t)return;let o=(e=window.devicePixelRatio??1,{pos:[(n=t.getBoundingClientRect()).left*e,n.top*e],size:[(n.right-n.left)*e,(n.bottom-n.top)*e]});p.current.render({parent:Byond.windowId,...s,pos:`${o.pos[0]},${o.pos[1]}`,size:`${o.size[0]}x${o.size[1]}`})}let y=n(()=>{f()},100);return o(()=>(window.addEventListener("resize",y),f(),()=>{window.removeEventListener("resize",y),p.current.unmount()}),[]),e("div",{ref:m,...t(u),children:e("div",{style:{minHeight:"22px"}})})}window.addEventListener("beforeunload",()=>{for(let e=0;e<i.length;e++){let n=i[e];"string"==typeof n&&(i[e]=null,Byond.winset(n,{parent:""}))}});export{d as ByondUi};

package/dist/components/Chart.d.ts

@@ -1,24 +0,0 @@
-import { type BoxProps } from './Box';
-type Props = {
-    data: number[][];
-} & Partial<{
-    fillColor: string;
-    rangeX: [number, number];
-    rangeY: [number, number];
-    strokeColor: string;
-    strokeWidth: number;
-}> & BoxProps;
-/**
- * ## Chart
- *
- * A simple chart component that displays a polyline based on the provided data.
- *
- * It normalizes the data to fit within the viewBox dimensions and allows for custom fill and stroke colors.
- *
- * - [View inherited Box Props](https://tgstation.github.io/tgui-core/?path=/docs/components-box--docs)
- */
-export declare function Chart(props: Props): import("react/jsx-runtime").JSX.Element;
-export declare namespace Chart {
-    var Line: typeof Chart;
-}
-export {};

package/dist/components/Chart.js

@@ -1 +0,0 @@
-import{jsx as e,jsxs as t}from"react/jsx-runtime";import{zip as n}from"../common/collections.js";import{useEffect as r,useRef as i,useState as o}from"react";import{Box as l}from"./Box.js";let s={bottom:0,left:0,overflow:"hidden",position:"absolute",right:0,top:0};function f(f){let{data:h=[],rangeX:m,rangeY:p,fillColor:a="none",strokeColor:c="#ffffff",strokeWidth:u=2,...d}=f,v=i(null),[g,w]=o([600,200]),x=function(e,t,r,i){if(0===e.length)return[];let o=n(...e),l=o.map(e=>Math.min(...e)),s=o.map(e=>Math.max(...e));return void 0!==r&&(l[0]=r[0],s[0]=r[1]),void 0!==i&&(l[1]=i[0],s[1]=i[1]),e.map(e=>n(e,l,s,t).map(([e,t,n,r])=>(e-t)/(n-t)*r))}(h,g,m,p);if(x.length>0){let e=x[0],t=x[x.length-1];x.push([g[0]+u,t[1]]),x.push([g[0]+u,-u]),x.push([-u,-u]),x.push([-u,e[1]])}let $=function(e){let t="";for(let n=0;n<e.length;n++){let r=e[n];t+=`${r[0]},${r[1]} `}return t}(x);function j(){let e=v.current;if(!e)return;let t=e.getBoundingClientRect();w([t.width,t.height])}return r(()=>(window.addEventListener("resize",j),j(),()=>{window.removeEventListener("resize",j)}),[]),e(l,{position:"relative",...d,children:e("div",{ref:v,style:s,children:t("svg",{preserveAspectRatio:"none",style:s,viewBox:`0 0 ${g[0]} ${g[1]}`,children:[e("title",{children:"chart"}),e("polyline",{fill:a,points:$,stroke:c,strokeWidth:u,transform:`scale(1, -1) translate(0, -${g[1]})`})]})})})}f.Line=f;export{f as Chart};

package/dist/components/Collapsible.d.ts

@@ -1,28 +0,0 @@
-import { type CSSProperties, type ReactNode } from 'react';
-import { type BoxProps } from './Box';
-type Props = Partial<{
-    /** Buttons or other content to render inline with the button */
-    buttons: ReactNode;
-    /** Top margin of the child nodes, defaulted to 1 */
-    child_mt: number;
-    /** 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;
-    /** Custom styles for the child nodes */
-    childStyles: CSSProperties;
-}> & BoxProps;
-/**
- * ## Collapsible
- *
- * Displays contents when open, acts as a fluid button when closed.
- *
- * Click to toggle, closed by default.
- *
- * - [View documentation on tgui core](https://tgstation.github.io/tgui-core/?path=/docs/components-collapsible--docs)
- * - [View inherited Box props](https://tgstation.github.io/tgui-core/?path=/docs/components-box--docs)
- */
-export declare function Collapsible(props: Props): import("react/jsx-runtime").JSX.Element;
-export {};

package/dist/components/Collapsible.js

@@ -1 +0,0 @@
-import{jsx as l,jsxs as e}from"react/jsx-runtime";import{useState as r}from"react";import{Box as o}from"./Box.js";import{Button as c}from"./Button.js";function i(i){let{children:n,child_mt:t=1,childStyles:a,color:m,title:s,buttons:d,icon:h,...p}=i,[b,f]=r(i.open);return e(o,{mb:1,children:[e("div",{className:"Table",children:[l("div",{className:"Table__cell",children:l(c,{color:m,fluid:!0,icon:h||(b?"chevron-down":"chevron-right"),onClick:()=>f(!b),...p,children:s})}),d&&l("div",{className:"Table__cell Table__cell--collapsing",children:d})]}),b&&l(o,{mt:t,style:a,children:n})]})}export{i as Collapsible};

package/dist/components/ColorBox.d.ts

@@ -1,19 +0,0 @@
-import type { ReactNode } from 'react';
-import type { 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.
- *
- * - [View documentation on tgui core](https://tgstation.github.io/tgui-core/?path=/docs/components-colorbox--docs)
- * - [View inherited Box props](https://tgstation.github.io/tgui-core/?path=/docs/components-box--docs)
- */
-export declare function ColorBox(props: Props): import("react/jsx-runtime").JSX.Element;
-export {};

package/dist/components/ColorBox.js

@@ -1 +0,0 @@
-import{jsx as o}from"react/jsx-runtime";import{classes as r}from"../common/react.js";import{computeBoxClassName as l,computeBoxProps as m}from"../common/ui.js";function t(t){let{content:c,children:e,className:n,...i}=t;return i.color=c?null:"default",i.backgroundColor=t.color||"default",o("div",{className:r(["ColorBox",n,l(i)]),...m(i),children:c||""})}export{t as ColorBox};

package/dist/components/Dialog.d.ts

@@ -1,39 +0,0 @@
-import type { ReactNode } from 'react';
-type DialogProps = {
-    /** The content of the dialog. */
-    children: ReactNode;
-    /** The function to call when close is clicked */
-    onClose: () => void;
-    /** The title of the dialog. */
-    title: ReactNode;
-} & Partial<{
-    /** The height of the dialog. */
-    height: string;
-    /** The width of the dialog. */
-    width: string;
-}>;
-/**
- * ## Dialog
- *
- * A themed dialog for user interaction.
- *
- * Example:
- *
- * ```tsx
- * <Dialog title="Dialog Title" onClose={() => {}}>
- *   <div>Dialog Content</div>
- * </Dialog>
- * ```
- *
- * - [View documentation on tgui core](https://tgstation.github.io/tgui-core/?path=/docs/components-dialog--docs)
- */
-export declare function Dialog(props: DialogProps): import("react/jsx-runtime").JSX.Element;
-export declare namespace Dialog {
-    var Button: typeof DialogButton;
-}
-type DialogButtonProps = {
-    children: ReactNode;
-    onClick: () => void;
-};
-declare function DialogButton(props: DialogButtonProps): import("react/jsx-runtime").JSX.Element;
-export {};

package/dist/components/Dialog.js

@@ -1 +0,0 @@
-import{jsx as t,jsxs as i}from"react/jsx-runtime";import{Box as o}from"./Box.js";import{Button as e}from"./Button.js";function l(l){let{title:n,onClose:r,children:a,width:c,height:s}=l;return t("div",{className:"Dialog",children:i(o,{className:"Dialog__content",height:s,width:c||"370px",children:[i("div",{className:"Dialog__header",children:[t("div",{className:"Dialog__title",children:n}),t(o,{mr:2,children:t(e,{color:"transparent",icon:"window-close-o",lineHeight:"22px",mr:"-3px",onClick:r,textAlign:"center",tooltip:"Close",tooltipPosition:"bottom-start",width:"26px"})})]}),a]})})}l.Button=function(i){let{onClick:o,children:l}=i;return t(e,{className:"Dialog__button",onClick:o,verticalAlignContent:"middle",children:l})};export{l as Dialog};

package/dist/components/Dimmer.d.ts

@@ -1,11 +0,0 @@
-import { type BoxProps } from './Box';
-/**
- * ## Dimmer
- *
- * Dims surrounding area to emphasize content placed inside.
- *
- * Content is automatically centered inside the dimmer.
- *
- * - [View documentation on tgui core](https://tgstation.github.io/tgui-core/?path=/docs/components-dimmer--docs)
- */
-export declare function Dimmer(props: BoxProps): import("react/jsx-runtime").JSX.Element;

package/dist/components/Dimmer.js

@@ -1 +0,0 @@
-import{jsx as r}from"react/jsx-runtime";import{classes as m}from"../common/react.js";import{Box as e}from"./Box.js";function i(i){let{className:o,children:t,...n}=i;return r(e,{className:m(["Dimmer",o]),...n,children:r("div",{className:"Dimmer__inner",children:t})})}export{i as Dimmer};

package/dist/components/Divider.d.ts

@@ -1,17 +0,0 @@
-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.
- *
- * - [View documentation on tgui core](https://tgstation.github.io/tgui-core/?path=/docs/components-divider--docs)
- */
-export declare function Divider(props: Props): import("react/jsx-runtime").JSX.Element;
-export {};

package/dist/components/Divider.js

@@ -1 +0,0 @@
-import{jsx as i}from"react/jsx-runtime";import{classes as r}from"../common/react.js";function e(e){let{hidden:t,vertical:o}=e;return i("div",{className:r(["Divider",t&&"Divider--hidden",o?"Divider--vertical":"Divider--horizontal"])})}export{e as Divider};

package/dist/components/DmIcon.d.ts

@@ -1,35 +0,0 @@
-import type { ReactNode } from 'react';
-import type { BoxProps } from './Box';
-export declare enum Direction {
-    NORTH = 1,
-    SOUTH = 2,
-    EAST = 4,
-    WEST = 8,
-    NORTHEAST = 5,
-    NORTHWEST = 9,
-    SOUTHEAST = 6,
-    SOUTHWEST = 10
-}
-type Props = {
-    /** Required: The path of the icon */
-    icon: string;
-    /** Required: The state of the icon */
-    icon_state: string;
-} & Partial<{
-    /** Facing direction. See direction enum. Default is South */
-    direction: Direction;
-    /** Fallback icon. */
-    fallback: ReactNode;
-    /** Frame number. Default is 1 */
-    frame: number;
-    /** 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 | bigint | boolean | Iterable<ReactNode> | Promise<string | number | bigint | boolean | import("react").ReactPortal | import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>> | Iterable<ReactNode> | null | undefined> | import("react/jsx-runtime").JSX.Element | null | undefined;
-export {};

package/dist/components/DmIcon.js

@@ -1 +0,0 @@
-import{jsx as T}from"react/jsx-runtime";import{Image as r}from"./Image.js";var S,o=((S={})[S.NORTH=1]="NORTH",S[S.SOUTH=2]="SOUTH",S[S.EAST=4]="EAST",S[S.WEST=8]="WEST",S[S.NORTHEAST=5]="NORTHEAST",S[S.NORTHWEST=9]="NORTHWEST",S[S.SOUTHEAST=6]="SOUTHEAST",S[S.SOUTHWEST=10]="SOUTHWEST",S);function e(S){let{direction:o=2,fallback:e,frame:t=1,icon_state:E,icon:H,movement:O=!1,...i}=S,m=Byond.iconRefMap?.[H];return m?T(r,{fixErrors:!0,src:`${m}?state=${E}&dir=${o}&movement=${!!O}&frame=${t}`,...i}):e}export{o as Direction,e as DmIcon};

package/dist/components/DraggableControl.d.ts

@@ -1,57 +0,0 @@
-import { type MouseEventHandler, type ReactNode } from 'react';
-import type { BoxProps } from './Box';
-type Control = {
-    /** Tooltip-like node to display. */
-    displayElement: ReactNode;
-    /** The value to display. */
-    displayValue: number;
-    /** Whether the element is being dragged */
-    dragging: boolean;
-    /** Whether the input is currently being edited */
-    editing: boolean;
-    /** Attach this to the element you want to be draggable  */
-    handleDragStart: MouseEventHandler<HTMLDivElement>;
-    /** The input element. */
-    inputElement: ReactNode;
-};
-type Props = {
-    children: (control: Control) => ReactNode;
-    /** The external state value. */
-    value: number;
-} & Partial<{
-    /** Animates the value if it was changed externally. */
-    animated: boolean;
-    /** The matrix to use for the drag. */
-    dragMatrix: [number, number];
-    /** onChange also fires when you drag the input. */
-    tickWhileDragging: boolean;
-    /** Format the value using this function before displaying it. */
-    format: (value: number) => string;
-    /** The maximum value. */
-    maxValue: number;
-    /** The minimum value. */
-    minValue: number;
-    /**
-     * An event which fires when you release the input or successfully enter a
-     * number. This is the default value event for controls.
-     */
-    onChange: (event: Event, value: number) => void;
-    /** The step size. */
-    step: number;
-    /** The step size in pixels. */
-    stepPixelSize: number | ((defaultStepPixelSize: number) => number);
-    /** Whether to unclamp the value. */
-    unclamped: boolean;
-    /** The unit of the value. */
-    unit: string;
-    /** The rate at which the value is updated. */
-    updateRate: number;
-}> & Omit<BoxProps, 'children'>;
-/**
- * ## DraggableControl
- *
- * A wrapper component for draggable elements.
- * Generally, you won't need to use this component directly.
- */
-export declare function DraggableControl(props: Props): ReactNode;
-export {};

package/dist/components/DraggableControl.js

@@ -1 +0,0 @@
-import{Fragment as e,jsx as r,jsxs as t}from"react/jsx-runtime";import{KEY as n,isEscape as u}from"../common/keys.js";import{clamp as o}from"../common/math.js";import{useEffect as l,useRef as c,useState as i}from"react";import{AnimatedNumber as a}from"./AnimatedNumber.js";function s(e,r){return e.screenX*r[0]+e.screenY*r[1]}function m(m){let{animated:f,children:v,dragMatrix:p=[1,0],tickWhileDragging:d,format:h,maxValue:y=1/0,minValue:g=-1/0,onChange:E,step:b=1,stepPixelSize:N,unclamped:w,unit:T,updateRate:j=400,fontSize:x,height:L,lineHeight:S}=m,[k,z]=i(m.value),[D,I]=i(!1),F=c(!1),M=c(m.value),O=c(0),$=c(0),_=c(null),A=c(null),B=c(null),C=c(null);function H(e){let r=$.current;if(null===r)throw Error("Origin is unset.");let t=s(e,p),n=_.current;if(null===n)throw Error("Final step pixel size has not been computed.");let u=O.current;if(null===u)throw Error("Original value is unset.");let l=o(Math.floor(u/b)*b+Math.trunc((t-r)/n)*b,g,y);M.current=l,z(l)}function K(e){document.body.style["pointer-events"]="auto",B.current&&clearInterval(B.current),$.current=null,_.current=null,O.current=null,document.removeEventListener("mousemove",H),document.removeEventListener("mouseup",K),F.current&&(E?.(e,M.current),F.current=!1)}l(()=>{m.value!==M.current&&(M.current=m.value,z(m.value))},[m.value]);let P=m.value;F.current&&(P=M.current);let U=t(e,{children:[f&&!F.current?r(a,{format:h,value:P}):h?h(P):P,T?` ${T}`:""]}),W=r("input",{className:"NumberInput__input",onBlur:function(e){let r=Number.parseFloat(e.currentTarget.value);(w||(r=o(r,g,y)),Number.isNaN(r))?I(!1):(M.current=r,z(r),E?.(e.nativeEvent,r),D&&I(!1))},onKeyDown:function(e){(e.key===n.Enter||u(e.key))&&I(!1)},ref:A,style:{display:D?void 0:"none",fontSize:x,height:L,lineHeight:S}});return v({displayElement:U,displayValue:P,dragging:F.current,editing:D,handleDragStart:function(e){if(!D){if("number"!=typeof N){let r=e.currentTarget.offsetWidth/((y-g)/b);if(void 0===N)_.current=r;else if("function"==typeof N)_.current=N(r);else throw Error(`Unsupported value for stepPixelSize of type ${typeof N}`)}else _.current=N;document.body.style["pointer-events"]="none",$.current=s(e.nativeEvent,p),O.current=m.value,F.current=!0,document.addEventListener("mouseup",K),C.current=setTimeout(()=>{var r=e.nativeEvent;if(F.current)document.addEventListener("mousemove",H),B.current=setInterval(()=>{F.current&&d&&E?.(r,M.current)},j);else if(I(!0),A.current){let e=A.current;e.value=M.current.toString(),setTimeout(()=>{e.focus(),e.select()},10)}C.current&&clearTimeout(C.current)},100)}},inputElement:W})}export{m as DraggableControl};

package/dist/components/Dropdown.d.ts

@@ -1,60 +0,0 @@
-import { type ReactNode } from 'react';
-import type { BoxProps } from './Box';
-type DropdownEntry = {
-    displayText: ReactNode;
-    value: string | number;
-};
-type DropdownOption = string | DropdownEntry;
-type Props = {
-    /** Called when a value is picked from the list, `value` is the value that was picked */
-    onSelected: (value: any) => void;
-    /** An array of strings which will be displayed in the
-    dropdown when open. See Dropdown.tsx for more advanced usage with DropdownEntry */
-    options: DropdownOption[];
-    /** Currently selected entry to display. Can be left stateless to permanently display this value. */
-    selected: DropdownOption | null | undefined;
-} & Partial<{
-    /** Whether to scroll automatically on open. Defaults to true */
-    autoScroll: boolean;
-    /** Whether to display previous / next buttons */
-    buttons: boolean;
-    /** Color of dropdown button */
-    color: string;
-    /** Disables the dropdown */
-    disabled: boolean;
-    /** Overwrites selection text with this. Good for objects etc. */
-    displayText: ReactNode;
-    /** Icon to display in dropdown button */
-    icon: string;
-    /** Whether the icon should be displayed alone */
-    iconOnly: boolean;
-    /** Angle of the icon */
-    iconRotation: number;
-    /** Whether or not the icon should spin */
-    iconSpin: boolean;
-    /** Width of the dropdown menu in box units. Default: 15 */
-    menuWidth: string | number;
-    /** Whether or not the arrow on the right hand side of the dropdown button is visible */
-    noChevron: boolean;
-    /** Dropdown renders over instead of below */
-    over: boolean;
-    /** Fill all available horizontal space  */
-    fluid: boolean;
-    /** Text to show when nothing has been selected. */
-    placeholder: string;
-    /** @deprecated If you want to allow dropdown breaks layout, set width 100% */
-    clipSelectedText: boolean;
-    /** Called when dropdown button is clicked */
-    onClick: (event: any) => void;
-}> & BoxProps;
-/**
- * ## Dropdown
- *
- * A simple dropdown box component. Lets the user select from a list of options
- * and displays selected entry.
- *
- * - [View documentation on tgui core](https://tgstation.github.io/tgui-core/?path=/docs/components-dropdown--docs)
- * - [View inherited Box props](https://tgstation.github.io/tgui-core/?path=/docs/components-box--docs)
- */
-export declare function Dropdown(props: Props): import("react/jsx-runtime").JSX.Element;
-export {};

package/dist/components/Dropdown.js

@@ -1 +0,0 @@
-import{Fragment as o,jsx as n,jsxs as e}from"react/jsx-runtime";import{KEY as t}from"../common/keys.js";import{classes as r}from"../common/react.js";import{unit as l}from"../common/ui.js";import{useRef as i,useState as c}from"react";import{Button as d}from"./Button.js";import{Floating as s}from"./Floating.js";import{Icon as a}from"./Icon.js";function m(o){return"string"==typeof o?o:o.value}function p(p){let{autoScroll:u=!0,buttons:_,className:w,color:f="default",disabled:h,displayText:D,icon:y,iconRotation:v,iconSpin:N,iconOnly:g,menuWidth:b,noChevron:x,onClick:j,onSelected:k,options:C=[],over:B,placeholder:I="Select...",selected:T,fluid:A,width:E=15}=p,[K,O]=c(!1),S=i(null),$=C.findIndex(o=>m(o)===T)||0;function F(o){let n=o;n=o<$?o<2?0:o-2:o>C.length-3?C.length-1:o-2;let e=S.current,t=e?.children[n];e&&t&&(e.scrollTop=t.offsetTop)}function M(o){let n;if(C.length<1||h)return;let e=C.length-1;n=$<0?"next"===o?e:0:"next"===o?$===e?0:$+1:0===$?e:$-1,K&&u&&F(n),k?.(m(C[n]))}let W=B?"top":"bottom";return g&&(W=`${W}-start`),e("div",{className:r(["Dropdown",A&&"Dropdown--fluid"]),children:[n(s,{allowedOutsideClasses:".Dropdown__button",closeAfterInteract:!0,content:n("div",{className:"Dropdown__menu",ref:S,children:0===C.length?n("div",{className:"Dropdown__menu--entry",children:"No options"}):C.map(o=>{let e=m(o);return n("div",{className:r(["Dropdown__menu--entry",T===e&&"selected"]),onClick:()=>{k?.(e)},onKeyDown:o=>{o.key===t.Enter&&k?.(e)},children:"string"==typeof o?o:o.displayText},e)})}),contentAutoWidth:!b,contentClasses:"Dropdown__menu--wrapper",contentStyles:{width:b?l(b):void 0},disabled:h,onMounted:()=>{K&&u&&-1!==$&&F($)},onOpenChange:O,placement:W,children:e("div",{className:r(["Dropdown__control",`Button--color--${f}`,h&&"Button--disabled",g&&"Dropdown__control--icon-only",w]),onClick:o=>{(!h||K)&&j?.(o)},onKeyDown:o=>{o.key!==t.Enter||h||j?.(o)},style:{width:l(E)},children:[y&&n(a,{className:"Dropdown__icon",name:y,rotation:v,spin:N}),!g&&e(o,{children:[n("span",{className:"Dropdown__selected-text",children:D||T&&m(T)||I}),!x&&n(a,{className:r(["Dropdown__icon","Dropdown__icon--arrow",B&&"over",K&&"open"]),name:"chevron-down"})]})]})}),_&&e(o,{children:[n(d,{className:"Dropdown__button",disabled:h,icon:"chevron-left",onClick:()=>{M("previous")}}),n(d,{className:"Dropdown__button",disabled:h,icon:"chevron-right",onClick:()=>{M("next")}})]})]})}export{p as Dropdown};