tgui-core 5.5.2 → 5.5.9

package/dist/components/FitText.d.ts

@@ -1,21 +0,0 @@
-import { Component, type HTMLAttributes, type PropsWithChildren } from 'react';
-type Props = {
-    acceptableDifference?: number;
-    maxFontSize: number;
-    maxWidth: number;
-    native?: HTMLAttributes<HTMLDivElement>;
-} & PropsWithChildren;
-type State = {
-    fontSize: number;
-};
-export declare class FitText extends Component<Props, State> {
-    ref: import("react").RefObject<HTMLDivElement | null>;
-    state: State;
-    constructor(props: Props);
-    componentDidUpdate(prevProps: any): void;
-    componentWillUnmount(): void;
-    resize(): void;
-    componentDidMount(): void;
-    render(): import("react/jsx-runtime").JSX.Element;
-}
-export {};

package/dist/components/FitText.js

@@ -1 +0,0 @@
-import{jsx as e}from"react/jsx-runtime";import{Component as t,createRef as i}from"react";class s extends t{ref=i();state={fontSize:0};constructor(e){super(e),this.resize=this.resize.bind(this),window.addEventListener("resize",this.resize)}componentDidUpdate(e){e.children!==this.props.children&&this.resize()}componentWillUnmount(){window.removeEventListener("resize",this.resize)}resize(){let e=this.ref.current;if(!e)return;let t=this.props.maxWidth,i=0,s=this.props.maxFontSize;for(let r=0;r<10;r++){let r=Math.round((i+s)/2);e.style.fontSize=`${r}px`;let n=e.offsetWidth-t;if(n>0)s=r;else if(n<(this.props.acceptableDifference??5))i=r;else break}this.setState({fontSize:Math.round((i+s)/2)})}componentDidMount(){this.resize()}render(){return e("span",{ref:this.ref,style:{fontSize:`${this.state.fontSize}px`,..."object"==typeof this.props.native?.style?this.props.native.style:{}},children:this.props.children})}}export{s as FitText};

package/dist/components/Flex.d.ts

@@ -1,130 +0,0 @@
-import type { 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`. */
-    inlineFlex: 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;
-    /**
-     * 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;
-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.
- *
- * - [View documentation on tgui core](https://tgstation.github.io/tgui-core/?path=/docs/components-flex--docs)
- * - [View inherited Box props](https://tgstation.github.io/tgui-core/?path=/docs/components-box--docs)
- */
-export declare function Flex(props: any): import("react/jsx-runtime").JSX.Element;
-export declare namespace Flex {
-    var Item: typeof FlexItem;
-}
-export declare function computeFlexItemClassName(props: FlexItemProps): string;
-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;
-}> & BoxProps;
-export declare function computeFlexItemProps(props: FlexItemProps): Record<string, any>;
-declare function FlexItem(props: any): import("react/jsx-runtime").JSX.Element;
-export {};

package/dist/components/Flex.js

@@ -1 +0,0 @@
-import{jsx as e}from"react/jsx-runtime";import{classes as t}from"../common/react.js";import{computeBoxClassName as r,computeBoxProps as n,unit as o}from"../common/ui.js";function i(e){return t(["Flex",e.inlineFlex&&"Flex--inline",r(e)])}function l(e){let{direction:t,wrap:r,align:o,justify:i,...l}=e;return n({style:{...l.style,alignItems:o,flexDirection:t,flexWrap:!0===r?"wrap":r,justifyContent:i},...l})}function m(r){let{className:n,...o}=r;return e("div",{className:t([n,i(o)]),...l(o)})}function u(e){return t(["Flex__item",r(e)])}function s(e){let{style:t,grow:r,order:i,shrink:l,basis:m,align:u,...s}=e,c=m??e.width??(void 0!==r?0:void 0);return n({style:{...t,alignSelf:u,flexBasis:o(c),flexGrow:void 0!==r&&Number(r),flexShrink:void 0!==l&&Number(l),order:i},...s})}m.Item=function(r){let{className:n,...o}=r;return e("div",{className:t([n,u(r)]),...s(o)})};export{m as Flex,i as computeFlexClassName,u as computeFlexItemClassName,s as computeFlexItemProps,l as computeFlexProps};

package/dist/components/Floating.d.ts

@@ -1,87 +0,0 @@
-import { type BooleanLike } from '../common/react.ts';
-import { type Placement } from '@floating-ui/react';
-import { type CSSProperties, type ReactNode } from 'react';
-type Props = {
-    /** Interacting with this element will open the floating element. */
-    children: ReactNode;
-    /** The content to display like floating. */
-    content: ReactNode;
-} & Partial<{
-    /**
-     * Where the content will be displayed, relative to children.
-     * - See [Placement](https://floating-ui.com/docs/useFloating#placement)
-     * @default 'bottom'
-     */
-    placement: Placement;
-    /** Classes with will be applied to the content. */
-    contentClasses: string;
-    /** Inline styles with will be applied to the content. */
-    contentStyles: CSSProperties;
-    /** Use calculated by Floating UI children width as content width. */
-    contentAutoWidth: boolean;
-    /**
-     * Indentation of content element from children.
-     * @default 6
-     */
-    contentOffset: number;
-    /** Disables all interactions. */
-    disabled: BooleanLike;
-    /**
-     * How long the animation takes in ms.
-     * - If specified, default animation will be disabled.
-     * - Fully disables animations if 0
-     * @default 200
-     */
-    animationDuration: number;
-    /** Direct content open state control. */
-    handleOpen: boolean;
-    /** Content will open when you hover over children. */
-    hoverOpen: boolean;
-    /**
-     * Delay in ms before opening and closing the content.
-     * - Works only if used `hoverOpen` prop.
-     * @default 200
-     */
-    hoverDelay: number;
-    /**
-     * Content will not close if the mouse moves out of the children while
-     * trying to move into the content.
-     * - Works only if used `hoverOpen` prop.
-     */
-    hoverSafePolygon: boolean;
-    /**
-     * Whitelisted classes.
-     * Used to allow to add some secured classes,
-     * click on which will not close the content.
-     * - Classes must be sent like this: `".class1, .class2"`
-     */
-    allowedOutsideClasses: string;
-    /** Do not wrap content in FloatingPortal, thus preventing it from moving into the body */
-    preventPortal: true;
-    /** Stops event propagation on children. */
-    stopChildPropagation: boolean;
-    /** Close the content after interaction with it. */
-    closeAfterInteract: boolean;
-    /**
-     * Called when the open state changes.
-     * Returns the new open state.
-     * Can be used this way:
-     * ```tsx
-     * onOpenChange={open ? makeThingsOnOpen : makeThingsOnClose}
-     * ```
-     */
-    onOpenChange: (open: boolean) => void;
-    /**
-     * Called when mounted
-     */
-    onMounted: () => void;
-}>;
-/**
- * ## Floating
- *
- *  Floating lets you position elements so that they don't go out of the bounds of the window.
- *
- * - [Documentation](https://floating-ui.com/docs/react) for more information.
- */
-export declare function Floating(props: Props): import("react/jsx-runtime").JSX.Element;
-export {};

package/dist/components/Floating.js

@@ -1 +0,0 @@
-import{Fragment as e,jsx as t,jsxs as n}from"react/jsx-runtime";import{classes as o}from"../common/react.js";import{FloatingPortal as r,autoUpdate as i,flip as a,offset as l,safePolygon as s,shift as c,size as d,useClick as m,useDismiss as p,useFloating as g,useHover as f,useInteractions as h,useTransitionStatus as u}from"@floating-ui/react";import{cloneElement as C,isValidElement as v,useEffect as w,useState as F}from"react";function b(b){let x,{allowedOutsideClasses:y,animationDuration:O,children:R,closeAfterInteract:j,content:k,contentAutoWidth:z,contentClasses:E,contentOffset:M=6,contentStyles:P,disabled:S,hoverDelay:q,hoverOpen:I,hoverSafePolygon:N,handleOpen:$,onMounted:A,placement:B,preventPortal:D,stopChildPropagation:G,onOpenChange:H}=b,[J,K]=F(!1),{refs:L,floatingStyles:Q,context:T}=g({middleware:[l(M),a({padding:6}),c(),z&&d({apply({rects:e,elements:t}){t.floating.style.width=`${e.reference.width}px`}})],onOpenChange(e){K(e),H?.(e)},open:J,placement:B||"bottom",transform:!1,whileElementsMounted:(e,t,n)=>(void 0!==A&&A(),i(e,t,n,{ancestorResize:!1,ancestorScroll:!1,elementResize:!1}))}),{isMounted:U,status:V}=u(T,{duration:O||200}),W=p(T,{ancestorScroll:!0,outsidePress:e=>!y||e.target instanceof Element&&!e.target.closest(y)}),X=m(T,{enabled:!S}),Y=f(T,{enabled:!S,restMs:q||200,handleClose:N?s({requireIntent:!1}):null}),Z=void 0!==$,{getReferenceProps:_,getFloatingProps:ee}=h(Z?[]:[W,I?Y:X]),et=_({ref:L.setReference,...G&&{onClick:e=>e.stopPropagation()}}),en=ee({onClick:()=>{j&&T.onOpenChange(!1)},ref:L.setFloating});w(()=>{Z&&T.onOpenChange($)},[$]),x=v(R)?C(R,et):t("div",{...et,children:R});let eo=t("div",{className:o(["Floating",!O&&"Floating--animated",E]),"data-position":T.placement,"data-transition":V,style:{...Q,...P},...en,children:k});return n(e,{children:[x,U&&!!k&&(D?eo:t(r,{id:"tgui-root",children:eo}))]})}export{b as Floating};

package/dist/components/Icon.d.ts

@@ -1,53 +0,0 @@
-import { type BooleanLike } from '../common/react.ts';
-import type { BoxProps } from './Box';
-type Props = {
-    /** Icon name. @see https://fontawesome.com/v6/search?o=r&m=free */
-    name: string;
-} & Partial<{
-    /** 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;
-}> & Omit<BoxProps, 'children'>;
-export declare function Icon(props: Props): import("react/jsx-runtime").JSX.Element;
-type IconStackProps = {
-    /** Works same as `Icon` size prop, but for all icons inside. */
-    size?: number;
-};
-declare function IconStack(props: BoxProps & IconStackProps): import("react/jsx-runtime").JSX.Element;
-/**
- * ## Icon
- *
- * Renders one of the FontAwesome icons of your choice.
- *
- * Example:
- *
- * ```tsx
- * <Icon name="plus" />
- * ```
- *
- * Icons: https://fontawesome.com/v6/search?o=r&m=free
- *
- * - [View documentation on tgui core](http://localhost:6006/?path=/docs/components-icon--docs)
- * - [View inherited Box props](https://tgstation.github.io/tgui-core/?path=/docs/components-box--docs)
- */
-export declare namespace Icon {
-    /**
-     * ## Icon.Stack
-     * Renders children icons on top of each other in order to make your own icon.
-     *
-     * Example:
-   *
-  
-     * ```tsx
-     * <Icon.Stack>
-     *   <Icon name="pen" />
-     *   <Icon name="slash" />
-     * </Icon.Stack>
-     * ```
-     */
-    const Stack: typeof IconStack;
-}
-export {};

package/dist/components/Icon.js

@@ -1 +0,0 @@
-import{jsx as t}from"react/jsx-runtime";import{classes as e}from"../common/react.js";import{computeBoxClassName as o,computeBoxProps as r}from"../common/ui.js";let s=/-o$/;function a(a){let{name:n="",size:c,spin:i,className:f,rotation:l,...m}=a,p=m.style||{};c&&(p.fontSize=`${100*c}%`),l&&(p.transform=`rotate(${l}deg)`),m.style=p;let u=r(m),I="";if(n.startsWith("tg-"))I=n;else{let t=s.test(n),e=n.replace(s,""),o=!e.startsWith("fa-");I=t?"far ":"fas ",o&&(I+="fa-"),I+=e,i&&(I+=" fa-spin")}return t("i",{className:e(["Icon",I,f,o(m)]),...u})}(a||(a={})).Stack=function(s){let{className:a,children:n,size:c,...i}=s,f=i.style||{};return c&&(f.fontSize=`${100*c}%`),i.style=f,t("span",{className:e(["IconStack",a,o(i)]),...r(i),children:n})};export{a as Icon};

package/dist/components/Image.d.ts

@@ -1,30 +0,0 @@
-import type { BoxProps } from './Box';
-type Props = Partial<{
-    /** True is default, this fixes DM icon rendering issues */
-    fixBlur: boolean;
-    /**
-     * False by default. Good if you're fetching images on UIs that do not auto
-     * update. This will attempt to fix the 'x' icon 5 times.
-     */
-    fixErrors: boolean;
-    /** Fill is default. */
-    objectFit: 'contain' | 'cover';
-    /**
-     * The image source.
-     *
-     * Use transparent base64 pixel if there is no src so we don't get a broken
-     * image icon when using assets.
-     */
-    src: string;
-}> & BoxProps;
-/**
- * ## Image
- *
- * A wrapper for the `<img>` element.
- *
- * It can attempt to fix broken images by fetching them again with `fixErrors`.
- *
- * 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/Image.js

@@ -1 +0,0 @@
-import{jsx as r}from"react/jsx-runtime";import{computeBoxProps as e}from"../common/ui.js";import{useEffect as t,useRef as A}from"react";function n(n){let{fixBlur:u=!0,fixErrors:c,objectFit:i="fill",src:m="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVR42mNkYAAAAAYAAjCB0C8AAAAASUVORK5CYII=",...o}=n,a=A(0),l=A(null),g=e(o);return g.style={...g.style,imageRendering:u?"pixelated":"auto",objectFit:i},t(()=>()=>{l.current&&clearTimeout(l.current)},[]),r("img",{alt:"dm icon",onError:function(r){if(!c||a.current>=5){l.current&&clearTimeout(l.current);return}let e=r.currentTarget;l.current=setTimeout(()=>{e.src=`${m}?attempt=${a.current}`,a.current++},1e3)},src:m,...g})}export{n as Image};

package/dist/components/ImageButton.d.ts

@@ -1,90 +0,0 @@
-/**
- * @file
- * @copyright 2024 Aylong (https://github.com/AyIong)
- * @license MIT
- */
-import { type BooleanLike } from '../common/react.ts';
-import type { Placement } from '@floating-ui/react';
-import type { ReactNode } from 'react';
-import type { BoxProps } from './Box';
-import { type Direction } from './DmIcon';
-type Props = Partial<{
-    /** Asset cache. Example: `asset={['assetname32x32', thing.key]}` */
-    asset: string[];
-    /**
-     * Asset size. Used for asset scaling. Example: `assetSize={32}`
-     * With that, you can use `imageSize` to set asset image size in px.
-     * By default, it's 32px. So if you have 32x32 you don't need to touch it.
-     */
-    assetSize: number;
-    /** Classic way to put images. Example: `base64={thing.image}` */
-    base64: string;
-    /**
-     * Special container for buttons.
-     * You can put any other component here.
-     * Has some special stylings!
-     * Example: `buttons={<Button>Send</Button>}`
-     */
-    buttons: ReactNode;
-    /**
-     * Same as buttons, but. Have disabled pointer-events on content inside if non-fluid.
-     * Fluid version have humburger layout.
-     * Can be used with buttons prop.
-     */
-    buttonsAlt: ReactNode;
-    /** Content under image. Or on the right if fluid. */
-    children: ReactNode;
-    /** Applies a CSS class to the element. */
-    className: string;
-    /**
-     * 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;
-    /** Optional. Replaces default "stub" when loading DmIcon. */
-    dmFallback: ReactNode;
-    /** Parameter `icon` of component `DmIcon`. */
-    dmIcon: string | null;
-    /** Parameter `icon_state` of component `DmIcon`. */
-    dmIconState: string | null;
-    /** Parameter `direction` of component `DmIcon`. */
-    dmDirection: Direction;
-    /**
-     * Changes the layout of the button, making it fill the entire horizontally available space.
-     * Allows the use of `title`
-     */
-    fluid: boolean;
-    /** Replaces default "question" icon when image missing. */
-    fallbackIcon: string;
-    /** Parameter responsible for the size of the image, component and standard "stubs". */
-    imageSize: number;
-    /** Prop `src` of Image component. Example: `imageSrc={resolveAsset(thing.image)}` */
-    imageSrc: string;
-    /** Called when button is clicked with LMB. */
-    onClick: (e: any) => void;
-    /** Called when button is clicked with RMB. */
-    onRightClick: (e: any) => void;
-    /** Makes button selected and green if true. */
-    selected: BooleanLike;
-    /** Requires `fluid` for work. Bold text with divider betwen content. */
-    title: string;
-    /** 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;
-}> & BoxProps;
-/**
- * ## ImageButton
- *
- * Stylized button, with the ability to easily and simply insert any picture into it.
- * - Without image, will be default question icon.
- * - If an image is specified but for some reason cannot be displayed, there will be a spinner fallback until it is loaded.
- *
- * - [View documentation on tgui core](https://tgstation.github.io/tgui-core/?path=/docs/components-imagebutton--docs)
- * - [View inherited Box props](https://tgstation.github.io/tgui-core/?path=/docs/components-box--docs)
- */
-export declare function ImageButton(props: Props): import("react/jsx-runtime").JSX.Element;
-export {};

package/dist/components/ImageButton.js

@@ -1 +0,0 @@
-import{jsx as t,jsxs as e}from"react/jsx-runtime";import{classes as n}from"../common/react.js";import{computeBoxProps as o}from"../common/ui.js";import{DmIcon as a}from"./DmIcon.js";import{Icon as i}from"./Icon.js";import{Image as m}from"./Image.js";import{Tooltip as s}from"./Tooltip.js";function c(i){let{asset:c,assetSize:r=32,base64:u,buttons:p,buttonsAlt:d,children:g,className:_,color:h,disabled:I,dmFallback:B,dmIcon:f,dmIconState:x,fluid:$,fallbackIcon:y,imageSize:N=64,imageSrc:b,onClick:v,onRightClick:w,selected:j,title:k,tooltip:z,tooltipPosition:D,...C}=i,q=e("div",{className:"ImageButton__container",onClick:t=>{!I&&v&&v(t)},onContextMenu:t=>{t.preventDefault(),!I&&w&&w(t)},onKeyDown:t=>{"Enter"===t.key&&!I&&v&&v(t)},style:{width:$?"auto":`calc(${N}px + 0.5em + 2px)`},tabIndex:I?void 0:0,children:[t("div",{className:"ImageButton__image",children:u||b?t(m,{height:`${N}px`,src:u?`data:image/png;base64,${u}`:b,width:`${N}px`}):f&&x?t(a,{fallback:B||t(l,{icon:"spinner",size:N,spin:!0}),height:`${N}px`,icon:f,icon_state:x,width:`${N}px`}):c?t(m,{className:n(c||[]),height:`${N}px`,style:{transform:`scale(${N/r})`,transformOrigin:"top left"},width:`${N}px`}):t(l,{icon:y||"question",size:N})}),$&&(k||g)?e("div",{className:"ImageButton__content",children:[k&&t("span",{className:n(["ImageButton__content--title",!!g&&"ImageButton__content--divider"]),children:k}),g&&t("span",{className:"ImageButton__content--text",children:g})]}):g&&t("span",{className:"ImageButton__content",children:g})]});return z&&(q=t(s,{content:z,position:D,children:q})),e("div",{className:n(["ImageButton",$&&"ImageButton--fluid",j&&"ImageButton--selected",I&&"ImageButton--disabled",!g&&"ImageButton--empty",!(v||w)&&"ImageButton--noAction",h&&"string"==typeof h?`ImageButton__color--${h}`:"ImageButton__color--default",_]),...o(C),children:[q,p&&t("div",{className:n(["ImageButton__buttons",!g&&"ImageButton__buttons--empty"]),style:{width:"auto"},children:p}),d&&t("div",{className:n(["ImageButton__buttons","ImageButton__buttons--alt",!g&&"ImageButton__buttons--empty"]),style:{maxWidth:$?"auto":`calc(${N}px +  0.5em)`,width:`calc(${N}px + ${.5*!$}em)`},children:d})]})}function l(e){let{icon:n,spin:o,size:a=64}=e;return t(i,{className:"ImageButton__image--fallback",height:`${a}px`,name:n,spin:o,style:{fontSize:`${a}px`},width:`${a}px`})}export{c as ImageButton};

package/dist/components/InfinitePlane.d.ts

@@ -1,64 +0,0 @@
-import { type PropsWithChildren } from 'react';
-import type { BoxProps } from './Box';
-type Props = {
-    /** The width of the image to display. */
-    imageWidth: number;
-} & Partial<{
-    /** The background image to display. */
-    backgroundImage: string;
-    /** The initial left position of the image. */
-    initialLeft: number;
-    /** The initial top position of the image. */
-    initialTop: number;
-    /** Padding applied to the right of the zoom controls */
-    zoomPadding: number;
-    /**
-     * Minimum level of zoom possible
-     * @default 0.5
-     */
-    minimumZoom: number;
-    /**
-     * Maximum level of zoom possible
-     * @default 1.5
-     */
-    maximumZoom: number;
-    /**
-     * Increments by which zoom level changes every scroll/button click
-     * @default 0.1
-     */
-    zoomIncrement: number;
-    /** X position to snap to. When this value is changed, the element will snap to said position */
-    zoomToX: number;
-    /** Y position to snap to. When this value is changed, the element will snap to said position */
-    zoomToY: number;
-    /** A callback function that is called when the background image is moved. */
-    onBackgroundMoved: (newX: number, newY: number) => void;
-    /** A callback function that is called when the zoom value changes. */
-    onZoomChange: (newZoomValue: number) => void;
-}> & BoxProps & PropsWithChildren;
-/**
- * ## InfinitePlane
- *
- * Creates a scrolling infinite plane using a background image.
- *
- * Example:
- *
- * ```tsx
- * <InfinitePlane imageWidth={100} backgroundImage="https://example.com/image.png">
- *   <Box position="absolute" top={0} left={0}>
- *     Hello, world!
- *   </Box>
- *   <Box position="absolute" top={0} left={100}>
- *     Hello, world!
- *   </Box>
- *   <Box position="absolute" top={0} left={200}>
- *     Hello, world!
- *   </Box>
- * </InfinitePlane>
- * ```
- *
- * - [View documentation on tgui core](https://tgstation.github.io/tgui-core/?path=/docs/components-infiniteplane--docs)
- * - [View inherited Box props](https://tgstation.github.io/tgui-core/?path=/docs/components-box--docs)
- */
-export declare function InfinitePlane(props: Props): import("react/jsx-runtime").JSX.Element;
-export {};

package/dist/components/InfinitePlane.js

@@ -1 +0,0 @@
-import{jsx as e,jsxs as t}from"react/jsx-runtime";import{computeBoxProps as n}from"../common/ui.js";import{useEffect as i,useRef as o,useState as r}from"react";import{Button as s}from"./Button.js";import{ProgressBar as l}from"./ProgressBar.js";import{Stack as a}from"./Stack.js";function c(s){let{backgroundImage:l,children:a,imageWidth:c,zoomPadding:d=0,initialLeft:m=0,initialTop:f=0,minimumZoom:p=.5,maximumZoom:h=1.5,zoomIncrement:v=.1,zoomToX:g=m,zoomToY:w=f,onBackgroundMoved:x,onZoomChange:b,...$}=s,[k,M]=r(m),[Y,j]=r(f),[y,I]=r(m),[z,E]=r(f),[X,C]=r(!1),[D,P]=r(1),Z=o(null);function B(e){M(e.clientX-y),j(e.clientY-z),C(!0)}function L(e){if(!X)return;let t=e.clientX-k,n=e.clientY-Y;x?.(t,n),I(t),E(n)}function S(){C(!1)}function V(e,t,n){if("increase"===e&&D>=h||"decrease"===e&&D<=p)return;let i=Math.round((D+("increase"===e?v:-v))*10)/10;P(i),I((y-t)/D*i+t),E((z-n)*i+n),b?.(i)}return i(()=>(window.addEventListener("mouseup",S),()=>{window.removeEventListener("mouseup",S)}),[]),i(()=>{void 0!==g&&void 0!==w&&(I(g),E(w))},[g,w]),t("div",{...n({...$,style:{...$.style,height:"100%",overflow:"hidden",position:"relative",width:"100%"}}),ref:Z,children:[e("div",{onMouseDown:B,onMouseMove:L,onWheel:function(e){0!==e.deltaY&&(e.preventDefault(),V(e.deltaY<0?"increase":"decrease",e.nativeEvent.offsetX,e.nativeEvent.offsetY))},style:{backgroundImage:`url("${l}")`,backgroundPosition:`${y}px ${z}px`,backgroundRepeat:"repeat",backgroundSize:`${D*c}px`,transition:`${X?"0s":"0.075s"} linear`,height:"100%",inset:0,position:"absolute",width:"100%"}}),e("div",{onMouseDown:B,onMouseMove:L,style:{height:"100%",inset:0,position:"absolute",transform:`translate(${y}px, ${z}px) scale(${D})`,transition:`${X?"0s":"0.075s"} linear`,transformOrigin:"top left",width:"100%"},children:a}),e(u,{padding:d,minimumZoom:p,maximumZoom:h,zoomX:(Z.current?.offsetWidth||0)/2,zoomY:(Z.current?.offsetHeight||0)/2,onZoomClick:V,zoom:D})]})}function u(n){let{zoom:i,padding:o,onZoomClick:r,minimumZoom:c,maximumZoom:u,zoomX:d,zoomY:m}=n;return e("div",{style:{left:5,position:"absolute",right:5+o,top:5},children:t(a,{children:[e(a.Item,{children:e(s,{disabled:i<=c,icon:"minus",onClick:()=>r("decrease",d,m)})}),e(a.Item,{grow:!0,children:t(l,{maxValue:u,minValue:c,value:i,children:[i,"x"]})}),e(a.Item,{children:e(s,{disabled:i>=u,icon:"plus",onClick:()=>r("increase",d,m)})})]})})}export{c as InfinitePlane};

package/dist/components/Input.d.ts

@@ -1,98 +0,0 @@
-import { type RefObject } from 'react';
-import type { BoxProps } from './Box';
-export type BaseInputProps<TElement = HTMLInputElement> = Partial<{
-    /** Automatically focuses the input on mount */
-    autoFocus: boolean;
-    /** Automatically selects the input value on focus */
-    autoSelect: boolean;
-    /** Custom css classes */
-    className: string;
-    /** Disables the input. Outlined in gray */
-    disabled: boolean;
-    /**
-     * Whether to debounce the onChange event.
-     *
-     * Do this if it's performing expensive ops on each input, like filtering or
-     * sending the value immediate to Byond (via act).
-     *
-     * It will only fire once every 250ms.
-     */
-    expensive: boolean;
-    /** Fills the parent container */
-    fluid: boolean;
-    /** Mark this if you want to use a monospace font */
-    monospace: boolean;
-    /** Allows to toggle on spellcheck on inputs */
-    spellcheck: boolean;
-}> & BoxProps<TElement>;
-export type TextInputProps<TElement = HTMLInputElement> = Partial<{
-    /** The maximum length of the input value */
-    maxLength: number;
-    /** Fires each time focus leaves the input, including if Esc or Enter are pressed */
-    onBlur: (value: string) => void;
-    /** Fires each time the input has been changed */
-    onChange: (value: string) => void;
-    /** Fires once the enter key is pressed */
-    onEnter: (value: string) => void;
-    /** Fires once the escape key is pressed */
-    onEscape: (value: string) => void;
-    /** The placeholder text when everything is cleared */
-    placeholder: string;
-    /** Clears the input value on enter */
-    selfClear: boolean;
-    /**
-     * Generally, input can handle its own state value. You might not NEED this.
-     *
-     * Use this if you want to hold the value in the parent for external
-     * manipulation. For instance:
-     *
-     * Clearing the input
-     *
-     * ```tsx
-     * const [value, setValue] = useState('');
-     *
-     * return (
-     *  <>
-     *    <Button onClick={() => act('inputVal', {inputVal: value})}>
-     *      Submit
-     *    </Button>
-     *    <Input
-     *      value={value}
-     *      onChange={setValue} />
-     *    <Button onClick={() => setValue('')}>
-     *      Clear
-     *    </Button>
-     *  </>
-     * )
-     * ```
-     *
-     * Updating the value from the backend
-     *
-     * ```tsx
-     * const { data } = useBackend<Data>();
-     * const { valveSetting } = data;
-     *
-     * return (
-     *  <Input
-     *    value={valveSetting}
-     *    onEnter={(value) => act('submit', { valveSetting: value })}
-     *  />
-     * )
-     * ```
-     */
-    value: string;
-}> & BaseInputProps<TElement>;
-type Props = Partial<{
-    /** Ref of the input element */
-    ref: RefObject<HTMLInputElement | null>;
-}> & BaseInputProps & TextInputProps;
-/**
- * ## Input
- *
- * A basic text input which allow users to enter text into a UI.
- *
- * - [View documentation on tgui core](https://tgstation.github.io/tgui-core/?path=/docs/components-input--docs)
- * - [View inherited Box props](https://tgstation.github.io/tgui-core/?path=/docs/components-box--docs)
- */
-export declare function Input(props: Props): import("react/jsx-runtime").JSX.Element;
-export {};

package/dist/components/Input.js

@@ -1 +0,0 @@
-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{debounce as u}from"../common/timer.js";import{computeBoxClassName as o,computeBoxProps as m}from"../common/ui.js";import{useEffect as c,useRef as l,useState as a}from"react";let i=u(e=>e(),250);function p(u){let{autoFocus:p,autoSelect:f,className:s,disabled:d,expensive:g,fluid:v,maxLength:T,monospace:j,onBlur:y,onChange:I,onEnter:b,onEscape:h,onKeyDown:k,placeholder:x,ref:C,selfClear:D,spellcheck:E=!1,value:w,...B}=u,K=l(null),L=C??K,[N,q]=a(w??"");c(()=>{let e;return(p||f)&&(e=setTimeout(()=>{L.current?.focus(),f&&L.current?.select()},1)),()=>clearTimeout(e)},[]),c(()=>{L.current&&document.activeElement!==L.current&&w!==N&&q(w??"")},[w]);let z=m(B),A=n(["Input",d&&"Input--disabled",v&&"Input--fluid",j&&"Input--monospace",o(B),s]);return e("input",{...z,autoComplete:"off",className:A,disabled:d,maxLength:T,onBlur:()=>y?.(N),onChange:function(e){let t=e.currentTarget.value;q(t),g?i(()=>I?.(t)):I?.(t)},onKeyDown:function(e){if(k?.(e),e.key===t.Enter){e.preventDefault(),b?.(e.currentTarget.value),D&&q(""),e.currentTarget.blur();return}r(e.key)&&(e.preventDefault(),h?.(e.currentTarget.value),e.currentTarget.blur())},placeholder:x,ref:L,spellCheck:E,type:"text",value:N})}export{p as Input};

package/dist/components/Interactive.d.ts

@@ -1,39 +0,0 @@
-/**
- * MIT License
- * https://github.com/omgovich/react-colorful/
- *
- * Copyright (c) 2020 Vlad Shilov <omgovich@ya.ru>
- * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
- * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
- * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
- * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
- * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
- * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
- * SOFTWARE.
- */
-import type { CSSProperties, ReactNode, RefObject } from 'react';
-export type Interaction = {
-    left: number;
-    top: number;
-};
-export type InteractiveProps = {
-    /** Callback when interaction moves */
-    onMove: (interaction: Interaction) => void;
-    /** Callback when key is pressed */
-    onKey: (offset: Interaction) => void;
-    /** Child elements */
-    children: ReactNode;
-    /** Ref to the container element */
-    containerRef: RefObject<HTMLDivElement | null>;
-    /** Optional styles */
-    style?: CSSProperties;
-};
-/**
- * ## Interactive
- *
- * A low-level component that handles pointer and keyboard interactions.
- *
- * See an example of usage in the story:
- * - [View Colorpicker story](https://tgstation.github.io/tgui-core/?path=/story/interfaces-colorpickermodal--default)
- */
-export declare function Interactive(props: InteractiveProps): import("react/jsx-runtime").JSX.Element;