tgui-core 2.1.0 → 3.0.0

package/dist/common/keys.d.ts

@@ -36,9 +36,11 @@ export declare enum KEY {
     Home = "Home",
     Insert = "Insert",
     Left = "ArrowLeft",
+    Minus = "-",
     N = "n",
     PageDown = "PageDown",
     PageUp = "PageUp",
+    Plus = "+",
     Right = "ArrowRight",
     S = "s",
     Shift = "Shift",

package/dist/common/keys.js

@@ -1 +1 @@
-var r,e=((r={}).A="a",r.Alt="Alt",r.Backspace="Backspace",r.Control="Control",r.D="d",r.Delete="Delete",r.Down="ArrowDown",r.E="e",r.End="End",r.Enter="Enter",r.Esc="Esc",r.Escape="Escape",r.Home="Home",r.Insert="Insert",r.Left="ArrowLeft",r.N="n",r.PageDown="PageDown",r.PageUp="PageUp",r.Right="ArrowRight",r.S="s",r.Shift="Shift",r.Space=" ",r.Tab="Tab",r.Up="ArrowUp",r.W="w",r.Z="z",r);function n(r){return"Esc"===r||"Escape"===r}function t(r){return r>="a"&&r<="z"}function o(r){return r>="0"&&r<="9"}function a(r){return"n"===r||"s"===r||"w"===r||"e"===r}function s(r){return"ArrowUp"===r||"ArrowDown"===r||"ArrowLeft"===r||"ArrowRight"===r}function i(r){return"w"===r||"a"===r||"s"===r||"d"===r}function c(r){return i(r)||s(r)}export{e as KEY,t as isAlphabetic,s as isArrow,a as isCardinal,n as isEscape,c as isMovement,o as isNumeric,i as isWasd};
+var r,e=((r={}).A="a",r.Alt="Alt",r.Backspace="Backspace",r.Control="Control",r.D="d",r.Delete="Delete",r.Down="ArrowDown",r.E="e",r.End="End",r.Enter="Enter",r.Esc="Esc",r.Escape="Escape",r.Home="Home",r.Insert="Insert",r.Left="ArrowLeft",r.Minus="-",r.N="n",r.PageDown="PageDown",r.PageUp="PageUp",r.Plus="+",r.Right="ArrowRight",r.S="s",r.Shift="Shift",r.Space=" ",r.Tab="Tab",r.Up="ArrowUp",r.W="w",r.Z="z",r);function n(r){return"Esc"===r||"Escape"===r}function t(r){return r>="a"&&r<="z"}function o(r){return r>="0"&&r<="9"}function s(r){return"n"===r||"s"===r||"w"===r||"e"===r}function a(r){return"ArrowUp"===r||"ArrowDown"===r||"ArrowLeft"===r||"ArrowRight"===r}function i(r){return"w"===r||"a"===r||"s"===r||"d"===r}function c(r){return i(r)||a(r)}export{e as KEY,t as isAlphabetic,a as isArrow,s as isCardinal,n as isEscape,c as isMovement,o as isNumeric,i as isWasd};

package/dist/components/Box.d.ts

@@ -12,7 +12,7 @@ type EventHandlers = {
     onMouseMove: MouseEventHandler<HTMLDivElement>;
     onMouseOver: MouseEventHandler<HTMLDivElement>;
     onMouseUp: MouseEventHandler<HTMLDivElement>;
-    onScroll: UIEventHandler<HTMLDivElement>;
+    onScroll: UIEventHandler<HTMLDivElement | HTMLTextAreaElement>;
 };
 type InternalProps = {
     /** The component used for the root node. */

package/dist/components/Floating.js

@@ -1 +1 @@
-import*as e from"react/jsx-runtime";import*as t from"@floating-ui/react";import*as a from"react";import*as n from"../common/react.js";function o(o){let s,{allowedOutsideClasses:i,animationDuration:r,children:l,closeAfterInteract:c,content:m,contentAutoWidth:d,contentClasses:p,contentOffset:f=6,contentStyles:u,disabled:g,hoverDelay:h,hoverOpen:x,onMounted:F,placement:b,stopChildPropagation:j,onOpenChange:C}=o,[k,v]=(0,a.useState)(!1),{refs:w,floatingStyles:E,context:P}=(0,t.useFloating)({open:k,onOpenChange(e){v(e),C?.(e)},whileElementsMounted:(e,a,n)=>(void 0!==F&&F(),(0,t.autoUpdate)(e,a,n)),placement:b||"bottom",transform:!1,middleware:[(0,t.offset)(f),(0,t.flip)({padding:6,fallbackPlacements:["bottom-start","bottom-end","top","top-start","top-end"]}),d&&(0,t.size)({apply({rects:e,elements:t}){t.floating.style.width=`${e.reference.width}px`}})]}),{isMounted:y,status:S}=(0,t.useTransitionStatus)(P,{duration:r||200}),M=(0,t.useDismiss)(P,{ancestorScroll:!0,outsidePress:e=>i&&e.target instanceof Element&&!e.target.closest(i)||!1}),O=(0,t.useClick)(P,{enabled:!g}),z=(0,t.useHover)(P,{enabled:!g,restMs:h||200}),{getReferenceProps:D,getFloatingProps:H}=(0,t.useInteractions)([M,x?z:O]),I=D({ref:w.setReference,...j&&{onClick:e=>e.stopPropagation()}}),N=H({onClick:()=>{c&&P.onOpenChange(!1)}});return s=(0,a.isValidElement)(l)?(0,a.cloneElement)(l,I):(0,e.jsx)("div",{...I,children:l}),(0,e.jsxs)(e.Fragment,{children:[s,y&&!!m&&(0,e.jsx)(t.FloatingPortal,{children:(0,e.jsx)("div",{ref:w.setFloating,className:(0,n.classes)(["Floating",!r&&"Floating--animated",p]),"data-position":P.placement,"data-transition":S,style:{...E,...u},...N,children:m})})]})}export{o as Floating};
+import*as e from"react/jsx-runtime";import*as t from"@floating-ui/react";import*as a from"react";import*as n from"../common/react.js";function o(o){let s,{allowedOutsideClasses:i,animationDuration:r,children:l,closeAfterInteract:c,content:m,contentAutoWidth:d,contentClasses:p,contentOffset:f=6,contentStyles:u,disabled:g,hoverDelay:h,hoverOpen:x,onMounted:F,placement:b,stopChildPropagation:j,onOpenChange:C}=o,[k,v]=(0,a.useState)(!1),{refs:w,floatingStyles:E,context:P}=(0,t.useFloating)({open:k,onOpenChange(e){v(e),C?.(e)},whileElementsMounted:(e,a,n)=>(void 0!==F&&F(),(0,t.autoUpdate)(e,a,n)),placement:b||"bottom",transform:!1,middleware:[(0,t.offset)(f),(0,t.flip)({padding:6,fallbackPlacements:["bottom-start","bottom-end","top","top-start","top-end"]}),d&&(0,t.size)({apply({rects:e,elements:t}){t.floating.style.width=`${e.reference.width}px`}})]}),{isMounted:y,status:S}=(0,t.useTransitionStatus)(P,{duration:r||200}),M=(0,t.useDismiss)(P,{ancestorScroll:!0,outsidePress:e=>!i||e.target instanceof Element&&!e.target.closest(i)}),O=(0,t.useClick)(P,{enabled:!g}),z=(0,t.useHover)(P,{enabled:!g,restMs:h||200}),{getReferenceProps:D,getFloatingProps:H}=(0,t.useInteractions)([M,x?z:O]),I=D({ref:w.setReference,...j&&{onClick:e=>e.stopPropagation()}}),N=H({onClick:()=>{c&&P.onOpenChange(!1)}});return s=(0,a.isValidElement)(l)?(0,a.cloneElement)(l,I):(0,e.jsx)("div",{...I,children:l}),(0,e.jsxs)(e.Fragment,{children:[s,y&&!!m&&(0,e.jsx)(t.FloatingPortal,{children:(0,e.jsx)("div",{ref:w.setFloating,className:(0,n.classes)(["Floating",!r&&"Floating--animated",p]),"data-position":P.placement,"data-transition":S,style:{...E,...u},...N,children:m})})]})}export{o as Floating};

package/dist/components/ImageButton.js

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

package/dist/components/Input.d.ts

@@ -1,63 +1,73 @@
-import { type SyntheticEvent } from 'react';
-import { type BoxProps } from './Box';
-type ConditionalProps = {
-    /**
-     * Mark this if you want to debounce onInput.
-     *
-     * This is useful for expensive filters, large lists etc.
-     *
-     * Requires `onInput` to be set.
-     */
-    expensive?: boolean;
-    /**
-     * Fires on each key press / value change. Used for searching.
-     *
-     * If it's a large list, consider using `expensive` prop.
-     */
-    onInput: (event: SyntheticEvent<HTMLInputElement>, value: string) => void;
-} | {
-    /** This prop requires onInput to be set */
-    expensive?: never;
-    onInput?: never;
-};
-type OptionalProps = Partial<{
+import { type RefObject } from 'react';
+import type { BoxProps } from './Box';
+export type BaseInputProps = Partial<{
     /** Automatically focuses the input on mount */
     autoFocus: boolean;
     /** Automatically selects the input value on focus */
     autoSelect: boolean;
-    /** The class name of the input */
+    /** Custom css classes */
     className: string;
-    /** Disables the input */
+    /** Disables the input. Outlined in gray */
     disabled: boolean;
-    /** Mark this if you want the input to be as wide as possible */
+    /** Fills the parent container */
     fluid: boolean;
-    /** The maximum length of the input value */
-    maxLength: number;
     /** Mark this if you want to use a monospace font */
     monospace: boolean;
-    /** Fires when user is 'done typing': Clicked out, blur, enter key */
-    onChange: (event: SyntheticEvent<HTMLInputElement>, value: string) => void;
+}> & BoxProps;
+export type TextInputProps = Partial<{
+    /** The maximum length of the input value */
+    maxLength: number;
+    /** Fires each time the input has been changed */
+    onChange: (value: string) => void;
     /** Fires once the enter key is pressed */
-    onEnter: (event: SyntheticEvent<HTMLInputElement>, value: string) => void;
+    onEnter: (value: string) => void;
     /** Fires once the escape key is pressed */
-    onEscape: (event: SyntheticEvent<HTMLInputElement>) => void;
+    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.
+     *
+     * Use this if you want to hold the value in the parent for external manipulation.
+     *
+     * ```tsx
+     * const [value, setValue] = useState('');
+     *
+     * return (
+     *  <>
+     *    <Button onClick={() => act('inputVal', {inputVal: value})}>
+     *      Submit
+     *    </Button>
+     *    <Input value={value} onChange={setValue} />
+     *    <Button onClick={() => setValue('')}>
+     *      Clear
+     *    </Button>
+     *  </>
+     * )
+     * ```
+     */
+    value: string;
+}> & BaseInputProps;
+type Props = Partial<{
+    /**
+     * Whether to debounce the input.
+     * Do this if it's performing expensive ops on each input.
+     * It will only fire once every 250ms.
+     */
+    expensive: boolean;
+    /** Ref of the input element */
+    ref: RefObject<HTMLInputElement | null>;
     /** Auto-updates the input value on props change, ie, data from Byond */
     updateOnPropsChange: boolean;
-    /** The state variable of the input. */
-    value: string | number;
-}>;
-type Props = OptionalProps & ConditionalProps & Omit<BoxProps, 'children'>;
-type InputValue = string | number | undefined;
-export declare function toInputValue(value: InputValue): string;
+}> & BaseInputProps & TextInputProps;
 /**
- * ### Input
+ * ## Input
+ *
  * A basic text input which allow users to enter text into a UI.
- * > Input does not support custom font size and height due to the way
- * > it's implemented in CSS. Eventually, this needs to be fixed.
+ *
+ * @see https://github.com/tgstation/tgui-core/blob/main/lib/components/Input.tsx
  */
 export declare function Input(props: Props): import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/components/Input.js

@@ -1 +1 @@
-import*as e from"react/jsx-runtime";import*as t from"react";import*as r from"../common/keys.js";import*as n from"../common/react.js";import*as u from"../common/timer.js";import*as a from"./Box.js";function o(e){return"number"!=typeof e&&"string"!=typeof e?"":String(e)}let c=(0,u.debounce)(e=>e(),250);function s(u){let{autoFocus:s,autoSelect:l,className:i,disabled:m,expensive:f,fluid:p,maxLength:g,monospace:v,onChange:d,onEnter:j,onEscape:x,onInput:T,placeholder:E,selfClear:I,updateOnPropsChange:b,value:y,...h}=u,_=(0,t.useRef)(null);function k(e){let t=_.current;if(!t)return;let r=o(e);t.value!==r&&(t.value=r)}return(0,t.useEffect)(()=>{let e=_.current;if(e){k(y);let t=document.activeElement===e;(s||l)&&!t&&setTimeout(()=>{e.focus(),l&&e.select()},1)}},[]),(0,t.useEffect)(()=>{if(b){let e=_.current;e&&document.activeElement!==e&&k(y)}},[y]),(0,e.jsxs)(a.Box,{className:(0,n.classes)(["Input",p&&"Input--fluid",v&&"Input--monospace",i]),...h,children:[(0,e.jsx)("div",{className:"Input__baseline",children:"."}),(0,e.jsx)("input",{className:"Input__input",disabled:m,maxLength:g,onBlur:e=>d?.(e,e.target.value),onChange:function(e){if(!T)return;let t=e.currentTarget?.value;f?c(()=>T(e,t)):T(e,t)},onKeyDown:function(e){if(e.key===r.KEY.Enter){j?.(e,e.currentTarget.value),I?e.currentTarget.value="":(e.currentTarget.blur(),d?.(e,e.currentTarget.value));return}(0,r.isEscape)(e.key)&&(x?.(e),e.currentTarget.value=o(y),e.currentTarget.blur())},placeholder:E,ref:_})]})}export{s as Input,o as toInputValue};
+import*as e from"react/jsx-runtime";import*as t from"react";import*as r from"../common/keys.js";import*as u from"../common/react.js";import*as o from"../common/timer.js";import*as n from"../common/ui.js";let a=(0,o.debounce)(e=>e(),250);function c(o){let{autoFocus:c,autoSelect:s,className:m,disabled:l,expensive:p,fluid:f,maxLength:i,monospace:v,onChange:d,onEnter:g,onEscape:T,placeholder:j,ref:x,selfClear:E,updateOnPropsChange:b,...y}=o,I=(0,t.useRef)(null),h=x??I,[k,C]=(0,t.useState)(o.value),D=(0,t.useMemo)(()=>(0,n.computeBoxProps)(y),[y]),K=(0,t.useMemo)(()=>(0,u.classes)(["Input",l&&"Input--disabled",f&&"Input--fluid",v&&"Input--monospace",m]),[m,f,v]);return(0,t.useEffect)(()=>{let e;return(c||s)&&(e=setTimeout(()=>{h.current?.focus(),s&&h.current?.select()},1)),()=>clearTimeout(e)},[]),(0,t.useEffect)(()=>{b&&h.current&&document.activeElement!==h.current&&o.value!==k&&C(o.value??"")},[o.value]),(0,e.jsx)("input",{...D,autoComplete:"off",className:K,disabled:l,maxLength:i,onChange:function(e){let t=e.currentTarget?.value;p?a(()=>d?.(t)):d?.(t),C(t)},onKeyDown:function(e){if(e.key===r.KEY.Enter){e.preventDefault(),g?.(e.currentTarget.value),E&&C(""),e.currentTarget.blur();return}(0,r.isEscape)(e.key)&&(e.preventDefault(),T?.(e.currentTarget.value),e.currentTarget.blur())},placeholder:j,ref:h,type:"text",value:k,spellCheck:!1})}export{c as Input};

package/dist/components/RestrictedInput.d.ts

@@ -1,29 +1,46 @@
-import type { BoxProps } from './Box';
-type Props = {
-    value: number;
-} & Partial<{
+import type { BaseInputProps } from './Input';
+type Props = Partial<{
+    /** Restricted inputs round by default.  */
     allowFloats: boolean;
-    autoFocus: boolean;
-    autoSelect: boolean;
-    disabled: boolean;
-    fluid: boolean;
-    maxValue: number | null;
-    minValue: number | null;
-    onBlur: (e: Event, value: number) => void;
-    onChange: (e: Event, value: number) => void;
-    onEnter: (e: Event, value: number) => void;
-}> & BoxProps;
+    /** Max value. 10,000 by default. */
+    maxValue: number;
+    /** Min value. 0 by default. */
+    minValue: number;
+    /** Fires each time the input has been changed */
+    onChange: (value: number) => void;
+    /** Fires once the enter key is pressed */
+    onEnter: (value: number) => void;
+    /** Fires once the escape key is pressed */
+    onEscape: (value: number) => void;
+    /**
+     * Generally, input can handle its own state value.
+     *
+     * Use this if you want to hold the value in the parent for external manipulation.
+     *
+     * ```tsx
+     * const [value, setValue] = useState(1;
+     *
+     * return (
+     *  <>
+     *    <Button onClick={() => act('inputVal', {inputVal: value})}>
+     *      Submit
+     *    </Button>
+     *    <RestrictedInput value={value} onChange={setValue} />
+     *    <Button onClick={() => setValue(1)}>
+     *      Clear
+     *    </Button>
+     *  </>
+     * )
+     * ```
+     */
+    value: number;
+}> & BaseInputProps;
 /**
  * ## RestrictedInput
- * Creates an input which rejects improper keys.
- *
- * @deprecated Use `NumberInput` instead.
  *
- * This will server as a wrapper for NumberInput until removal. This decision was
- * made because it's poor UX. Users should be allowed to type in whatever they
- * want, but have the UI notify them it's invalid after it's entered.
+ * Creates a numerical input which rejects improper keys.
  *
- * It also gives a false sense of security. It's just an annoying input.
+ * @see https://github.com/tgstation/tgui-core/blob/main/lib/components/RestrictedInput.tsx
  */
 export declare function RestrictedInput(props: Props): import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/components/RestrictedInput.js

@@ -1 +1 @@
-import*as e from"react/jsx-runtime";import*as r from"../common/keys.js";import*as t from"./NumberInput.js";function m(m){let{minValue:n,maxValue:u,onChange:o,onEnter:a,onBlur:s,...p}=m;return(0,e.jsx)(t.NumberInput,{...p,minValue:n??0,maxValue:u??Number.POSITIVE_INFINITY,onChange:e=>{o?.({},e)},onKeyDown:e=>{e.key===r.KEY.Enter&&a?.({},Number(e.currentTarget.value))},step:1})}export{m as RestrictedInput};
+import*as e from"react/jsx-runtime";import*as t from"../common/math.js";import*as r from"../common/react.js";import*as u from"../common/ui.js";import*as n from"react";import*as o from"../common/keys.js";function m(m){let{allowFloats:s,autoFocus:a,autoSelect:c,className:i,disabled:l,fluid:f,maxValue:p=1e4,minValue:v=0,monospace:d,onChange:b,onEnter:E,onEscape:j,...y}=m,I=(0,n.useRef)(null),[k,x]=(0,n.useState)(m.value??v),N=(0,n.useMemo)(()=>(0,u.computeBoxProps)(y),[y]),h=(0,n.useMemo)(()=>(0,r.classes)(["Input","RestrictedInput",l&&"Input--disabled",f&&"Input--fluid",d&&"Input--monospace",i]),[i,f,d]);function D(e){if(e===k)return;let r=e;Number.isNaN(e)?r=v:s||(r=Math.round(e)),x(r=(0,t.clamp)(r,v,p)),b?.(r)}return(0,n.useEffect)(()=>{let e;return(a||c)&&(e=setTimeout(()=>{I.current?.focus(),c&&I.current?.select()},1)),()=>clearTimeout(e)},[]),(0,n.useEffect)(()=>{document.activeElement===I.current&&m.value!==k&&x(m.value??v)},[m.value]),(0,e.jsx)("input",{...N,autoComplete:"off",className:h,disabled:l,max:p,min:v,onChange:function(e){D(Number(e.target.value))},onKeyDown:function(e){if(e.key===o.KEY.Enter){e.preventDefault(),E?.(k),I.current?.blur();return}if((0,o.isEscape)(e.key)){e.preventDefault(),j?.(k),I.current?.blur();return}if(e.key===o.KEY.Minus){e.preventDefault(),D(-1*k);return}},ref:I,spellCheck:!1,type:"number",value:k})}export{m as RestrictedInput};

package/dist/components/TextArea.d.ts

@@ -1,46 +1,24 @@
-import type { RefObject, SyntheticEvent } from 'react';
-import { type BoxProps } from './Box';
+import type { RefObject } from 'react';
+import type { TextInputProps } from './Input';
 type Props = Partial<{
-    /** Automatically focus the textarea on mount */
-    autoFocus: boolean;
-    /** Selects all text on mount */
-    autoSelect: boolean;
-    /** The value to display in the textarea */
-    displayedValue: string;
     /** Don't use tab for indent */
     dontUseTabForIndent: boolean;
-    /** Sets width to 100% */
-    fluid: boolean;
-    /** Maximum length of the textarea */
-    maxLength: number;
-    /** Removes the border. */
-    noborder: boolean;
-    /** Fires when user is 'done typing': Clicked out, blur, enter key (but not shift+enter) */
-    onChange: (event: SyntheticEvent<HTMLTextAreaElement>, value: string) => void;
-    /** Fires once the enter key is pressed */
-    onEnter: (event: SyntheticEvent<HTMLTextAreaElement>, value: string) => void;
-    /** Fires once the escape key is pressed */
-    onEscape: (event: SyntheticEvent<HTMLTextAreaElement>) => void;
-    /** Fires on each key press / value change. Used for searching */
-    onInput: (event: SyntheticEvent<HTMLTextAreaElement>, value: string) => void;
-    /** Dummy text inside the textarea when it's empty */
-    placeholder: string;
     /** Ref to the textarea element. */
     ref: RefObject<HTMLTextAreaElement | null>;
-    /** Whether the textarea is scrollable when it has more content than height */
-    scrollbar: boolean;
-    /** Clears the textarea when the enter key is pressed */
-    selfClear: boolean;
-    /** Provides a Record with key: markupChar entries which can be used for ctrl + key combinations to surround a selected text with the markup character */
+    /**
+     * 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>;
-    /** The value of the textarea */
-    value: string;
-}> & BoxProps;
+}> & TextInputProps;
 /**
  * ## Textarea
  *
  * An input for larger amounts of text. Use this when you want inputs larger
  * than one row.
+ *
+ * @see https://github.com/tgstation/tgui-core/blob/main/lib/components/TextArea.tsx
  */
 export declare function TextArea(props: Props): import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/components/TextArea.js

@@ -1 +1 @@
-import*as e from"react/jsx-runtime";import*as r from"react";import*as t from"../common/keys.js";import*as a from"../common/react.js";import*as s from"./Box.js";import*as n from"./Input.js";function u(u){let{autoFocus:l,autoSelect:c,displayedValue:o,dontUseTabForIndent:i,maxLength:f,noborder:m,onChange:T,onEnter:x,onEscape:g,onInput:p,placeholder:v,ref:_,scrollbar:d,selfClear:y,userMarkup:b,value:h,...A}=u,{className:j,fluid:E,nowrap:$,...k}=A,K=(0,r.useRef)(null),N=_??K,[B,C]=(0,r.useState)(0);return(0,r.useEffect)(()=>{if(l||c){let e=N.current;e&&setTimeout(()=>{e.focus(),c&&e.select()},1)}},[]),(0,r.useEffect)(()=>{let e=N.current;if(e){let r=(0,n.toInputValue)(h);e.value!==r&&(e.value=r)}},[h]),(0,e.jsxs)(s.Box,{className:(0,a.classes)(["TextArea",E&&"TextArea--fluid",m&&"TextArea--noborder",j]),...k,children:[!!o&&(0,e.jsx)("div",{className:"TextArea__value-container",children:(0,e.jsx)("div",{className:(0,a.classes)(["TextArea__textarea","TextArea__textarea_custom"]),style:{transform:`translateY(-${B}px)`},children:o})}),(0,e.jsx)("textarea",{autoComplete:"off",className:(0,a.classes)(["TextArea__textarea",d&&"TextArea__textarea--scrollable",$&&"TextArea__nowrap"]),maxLength:f,onBlur:e=>T?.(e,e.target.value),onChange:e=>p?.(e,e.target.value),onKeyDown:function(e){if(e.key===t.KEY.Enter)return e.shiftKey?void e.currentTarget.focus():(x?.(e,e.currentTarget.value),y&&(e.currentTarget.value=""),void e.currentTarget.blur());if((0,t.isEscape)(e.key)){g?.(e),y?e.currentTarget.value="":(e.currentTarget.value=(0,n.toInputValue)(h),e.currentTarget.blur());return}if(!i&&e.key===t.KEY.Tab){e.preventDefault();let{value:r,selectionStart:t,selectionEnd:a}=e.currentTarget;e.currentTarget.value=`${r.substring(0,t)}	${r.substring(a)}`,e.currentTarget.selectionEnd=t+1}if(b&&(e.ctrlKey||e.metaKey)&&b[e.key]){e.preventDefault();let{value:r,selectionStart:t,selectionEnd:a}=e.currentTarget,s=b[e.key];e.currentTarget.value=`${r.substring(0,t)}${s}${r.substring(t,a)}${s}${r.substring(a)}`,e.currentTarget.selectionEnd=a+2*s.length}},onScroll:()=>{o&&N.current&&C(N.current.scrollTop)},placeholder:v,ref:N,spellCheck:!1,style:{color:o?"rgba(0, 0, 0, 0)":"inherit"}})]})}export{u as TextArea};
+import*as e from"react/jsx-runtime";import*as t from"react";import*as r from"../common/keys.js";import*as u from"../common/react.js";import*as n from"../common/ui.js";function a(a){let{autoFocus:s,autoSelect:c,disabled:o,dontUseTabForIndent:l,fluid:m,maxLength:i,monospace:f,onChange:p,onEnter:g,onEscape:T,placeholder:v,ref:y,selfClear:b,userMarkup:E,...x}=a,d=(0,t.useRef)(null),k=y??d,[$,h]=(0,t.useState)(a.value??""),K=(0,t.useMemo)(()=>(0,n.computeBoxProps)(x),[x]),j=(0,t.useMemo)(()=>(0,u.classes)(["Input","TextArea",m&&"Input--fluid",f&&"Input--monospace",o&&"Input--disabled"]),[o,m,f]);return(0,t.useEffect)(()=>{(s||c)&&setTimeout(()=>{k.current?.focus(),c&&k.current?.select()},1)},[]),(0,t.useEffect)(()=>{document.activeElement===k.current&&a.value!==$&&h(a.value??"")},[a.value]),(0,e.jsx)("textarea",{...K,autoComplete:"off",className:j,maxLength:i,onChange:function(e){h(e.currentTarget.value)},onKeyDown:function(e){if(e.key===r.KEY.Enter&&!e.shiftKey){e.preventDefault(),g?.(e.currentTarget.value),b&&h(""),e.currentTarget.blur();return}if((0,r.isEscape)(e.key)){T?.(e.currentTarget.value),e.currentTarget.blur();return}if(!l&&e.key===r.KEY.Tab){e.preventDefault();let{value:t,selectionStart:r,selectionEnd:u}=e.currentTarget;h(`${t.substring(0,r)}	${t.substring(u)}`),e.currentTarget.selectionEnd=r+1,p?.(e.currentTarget.value);return}if(E&&(e.ctrlKey||e.metaKey)&&E[e.key]){e.preventDefault();let{selectionStart:t,selectionEnd:r,value:u}=e.currentTarget,n=E[e.key];h(`${u.substring(0,t)}${n}${u.substring(t,r)}${n}${u.substring(r)}`),e.currentTarget.selectionEnd=r+2*n.length,p?.(e.currentTarget.value);return}},placeholder:v,ref:k,spellCheck:!1,value:$})}export{a as TextArea};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "tgui-core",
-  "version": "2.1.0",
+  "version": "3.0.0",
   "description": "TGUI core component library",
   "keywords": ["TGUI", "library", "typescript"],
   "files": ["dist", "styles"],

package/styles/components/ImageButton.scss

@@ -4,15 +4,24 @@ $bg-map: colors.$color-map !default;
 
 @mixin button-style($color) {
   background-color: hsl(
-    from $color h s calc(l - var(--adjust-color) * 2) / 0.2
+    from $color h s calc(l - var(--adjust-color) * 2) /
+      var(--imagebutton-transparecy)
   );
-  border: 1px solid hsl(from $color h s calc(l + var(--adjust-color) * 2) / 0.2);
+  border: var(--border-thickness-tiny) solid
+    hsl(
+      from $color h s calc(l + var(--adjust-color)) /
+        var(--imagebutton-transparecy)
+    );
+
+  &:not(.ImageButton--disabled, .ImageButton--noAction) {
+    .ImageButton__container {
+      cursor: var(--cursor-pointer);
+    }
 
-  &:not(.ImageButton--disabled) {
     &:hover {
       background-color: hsl(
         from $color h s calc(l - var(--adjust-color) + var(--adjust-hover)) /
-          0.2
+          var(--imagebutton-transparecy)
       );
     }
 
@@ -27,7 +36,8 @@ $bg-map: colors.$color-map !default;
       &:has(.ImageButton__buttons:hover),
       &:has(.ImageButton__buttons:active) {
         background-color: hsl(
-          from $color h s calc(l - var(--adjust-color) * 2) / 0.2
+          from $color h s calc(l - var(--adjust-color) * 2) /
+            var(--imagebutton-transparecy)
         );
         box-shadow: none;
       }
@@ -51,6 +61,27 @@ $bg-map: colors.$color-map !default;
   @include button-style(hsl(from var(--color-base) h s 30));
 }
 
+.ImageButton__color--primary {
+  @include button-style(hsl(from var(--color-primary) h s 30));
+}
+
+.ImageButton__color--transparent {
+  @include button-style(hsl(from var(--color-base) h s 30));
+
+  background-color: transparent;
+  border-color: transparent !important;
+
+  .ImageButton__content {
+    background-color: transparent !important;
+    color: var(--color-text-translucent);
+    border-color: transparent !important;
+  }
+
+  &:hover:not(.ImageButton--disabled) .ImageButton__content {
+    color: var(--color-text);
+  }
+}
+
 .ImageButton--selected {
   @include button-style(var(--button-background-selected));
 }
@@ -83,7 +114,6 @@ $bg-map: colors.$color-map !default;
   border-width: 0;
 
   &__container {
-    cursor: var(--cursor-pointer);
     display: flex;
     flex-direction: column;
     transition: opacity var(--transition-time-medium);
@@ -97,8 +127,8 @@ $bg-map: colors.$color-map !default;
     overflow: hidden;
     line-height: 0;
     padding: var(--space-s);
-    border: 1px solid;
-    border-bottom: 0;
+    border: var(--border-thickness-tiny) solid;
+    border-bottom: none;
     border-color: inherit;
     border-radius: var(--border-radius-medium) var(--border-radius-medium) 0 0;
   }
@@ -116,7 +146,7 @@ $bg-map: colors.$color-map !default;
     display: flex;
     position: absolute;
     overflow: hidden;
-    left: 0;
+    left: var(--border-thickness-tiny);
     bottom: 1.8em;
     max-width: 100%;
     z-index: 1;
@@ -125,8 +155,8 @@ $bg-map: colors.$color-map !default;
       overflow: visible;
       flex-direction: column;
       pointer-events: none;
-      top: 1px;
-      bottom: inherit !important;
+      top: var(--border-thickness-tiny);
+      bottom: unset !important;
       /** Text outline. Sort of. */
       text-shadow:
         0px 1px 2px var(--color-base),
@@ -135,6 +165,11 @@ $bg-map: colors.$color-map !default;
         0px -1px 2px var(--color-base);
     }
 
+    &--empty {
+      bottom: 0;
+      left: 0;
+    }
+
     & > * {
       /* I know !important is bad, but here's no other way */
       margin: 0 !important;
@@ -142,6 +177,20 @@ $bg-map: colors.$color-map !default;
       border-radius: 0 !important;
     }
   }
+
+  &--empty {
+    border-width: var(--border-thickness-tiny);
+
+    .ImageButton__image {
+      border: none;
+      border-radius: var(--border-radius-medium);
+    }
+  }
+
+  .Stack > &,
+  .Stack__item > & {
+    margin: 0;
+  }
 }
 
 .ImageButton--fluid {

package/styles/components/Input.scss

@@ -1,63 +1,45 @@
-@use "../base";
-
-$text-color: 0 !default;
-$background-color: 0 !default;
-$border-color: 0 !default;
-$border-radius: 0 !default;
-$font-family: 0 !default;
-$mono-font-family: 0 !default;
-
 .Input {
-  overflow: visible;
-  position: relative;
-  display: inline-block;
-  width: base.em(120px);
-  line-height: base.em(17px);
-  padding: 0 var(--space-sm);
-  margin-right: var(--space-xs);
   background-color: var(--input-background);
-  color: var(--input-color);
-  border: var(--border-thickness-tiny) solid var(--input-border-color);
   border-radius: var(--input-border-radius);
-
+  border: var(--border-thickness-tiny) solid var(--input-border-color);
+  color: var(--input-color);
+  font-family: var(--input-font-family);
+  padding: var(--space-xxs) var(--space-sm);
+  width: var(--input-width);
+  &:focus {
+    outline: none;
+  }
   &:focus-within {
     border-color: var(--input-border-color-focus);
   }
+  &::placeholder {
+    font-style: italic;
+    color: var(--input-color-placeholder);
+  }
 }
 
-.Input--fluid {
-  display: block;
-  width: auto;
-}
-
-.Input__baseline {
-  display: inline-block;
-  color: transparent;
+.Input--disabled {
+  border-color: var(--input-border-disabled);
+  color: var(--input-color-placeholder);
 }
 
-.Input__input {
-  display: block;
-  position: absolute;
-  inset: 0;
-  border: 0;
-  outline: 0;
+.Input--fluid {
   width: 100%;
-  font-size: base.em(12px);
-  line-height: base.em(17px);
-  height: base.em(17px);
-  margin: 0;
-  padding: 0 var(--space-m);
-  font-family: var(--input-font-family);
-  background-color: transparent;
-  color: var(--input-color);
-  color: inherit;
-
-  &::placeholder {
-    font-style: italic;
-    color: var(--input-color-placeholder);
-  }
 }
 
-.Input--monospace .Input__input {
+.Input--monospace {
   font-family: var(--input-font-family-mono);
 }
+
+.RestrictedInput {
+  border-color: var(--restricted-input-border-color);
+  text-align: right;
+  &:focus-within {
+    border-color: var(--restricted-input-border-color-focus);
+  }
+  &::-webkit-inner-spin-button,
+  &::-webkit-outer-spin-button {
+    -webkit-appearance: none;
+    margin: 0;
+  }
+}

package/styles/components/TextArea.scss

@@ -1,82 +1,3 @@
-@use "../base";
-@use "./Input";
-
-$text-color: 0 !default;
-$background-color: 0 !default;
-$border-color: 0 !default;
-$border-radius: 0 !default;
-
 .TextArea {
-  background-color: var(--input-background);
-  border-radius: var(--input-border-radius);
-  border: var(--border-thickness-tiny) solid var(--input-border-color);
-  box-sizing: border-box;
-  display: inline-block;
-  line-height: base.em(17px);
-  margin-right: base.em(2px);
-  position: relative;
-  width: 100%;
-  &:focus-within {
-    border-color: var(--input-border-color-focus);
-  }
-}
-
-.TextArea--fluid {
-  display: block;
-  height: auto;
-  width: auto;
-}
-
-.TextArea--noborder {
-  border: 0px;
-}
-
-.TextArea__textarea.TextArea__textarea--scrollable {
-  overflow: hidden auto;
-}
-
-.TextArea__textarea {
-  background-color: transparent;
-  border: 0;
-  box-sizing: border-box;
-  color: var(--input-color);
-  display: block;
-  font-family: inherit;
-  font-size: 1em;
-  height: 100%;
-  inset: 0;
-  line-height: base.em(17px);
-  margin: 0;
-  min-height: base.em(17px);
-  outline: 0;
-  overflow: hidden;
-  padding: 0 var(--space-m);
-  position: absolute;
   resize: none;
-  width: 100%;
-  // Make sure the div and the textarea wrap words in the same way
-  word-wrap: break-word;
-
-  &::placeholder {
-    font-style: italic;
-    color: var(--input-color-placeholder);
-  }
-}
-
-.TextArea__textarea_custom {
-  overflow: visible;
-  white-space: pre-wrap;
-}
-
-.TextArea__nowrap {
-  overflow-wrap: normal;
-  overflow-x: scroll;
-  white-space: nowrap;
-}
-
-.TextArea__value-container {
-  height: 100%;
-  overflow: hidden;
-  position: absolute;
-  width: 100%;
 }

package/styles/vars-components.scss

@@ -80,6 +80,9 @@
   --tab-transition: var(--transition-time-medium);
   --tabs-container-background: var(--color-section);
 
+  /* ImageButton */
+  --imagebutton-transparecy: 0.25;
+
   /* Input */
   --input-background-lightness: 5;
   --input-background: hsl(
@@ -90,9 +93,11 @@
   --input-border-color: var(--color-border-primary);
   --input-border-color-focus: var(--color-border-secondary);
   --input-border-radius: var(--border-radius-tiny);
+  --input-border-disabled: var(--color-gray);
   --input-transition: var(--transition-time-medium);
   --input-font-family: var(--font-family);
   --input-font-family-mono: var(--font-family-mono);
+  --input-width: 9em;
 
   /* Knob */
   --knob-color: hsl(from var(--color-base) h 5 20);
@@ -131,6 +136,12 @@
   --progress-bar-border-radius: var(--border-radius-tiny);
   --progress-bar-transition: var(--transition-time-slowest);
 
+  /* Restricted Input */
+  --restricted-input-border-color: var(--color-green);
+  --restricted-input-border-color-focus: hsl(
+    from var(--color-green) h s calc(l + 10)
+  );
+
   /* Round Gauge */
   --round-gauge-ring-color: var(--input-border-color);
   --round-gauge-transition: var(--transition-time-medium);