tgui-core 3.1.5 → 3.3.1

package/dist/components/Dialog.d.ts

@@ -2,32 +2,37 @@ import type { ReactNode } from 'react';
 type DialogProps = {
     /** The content of the dialog. */
     children: ReactNode;
-    /** The height of the dialog. */
-    height?: string;
     /** 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;
-};
+    width: string;
+}>;
 /**
  * ## Dialog
+ *
  * A themed dialog for user interaction.
  *
- * @example
+ * 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: any;
+    children: ReactNode;
     onClick: () => void;
 };
 declare function DialogButton(props: DialogButtonProps): import("react/jsx-runtime").JSX.Element;

package/dist/components/Dialog.js

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

package/dist/components/Dimmer.d.ts

@@ -1,8 +1,11 @@
 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/Divider.d.ts

@@ -7,8 +7,11 @@ type Props = Partial<{
 /**
  *
  * ## 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/DmIcon.d.ts

@@ -27,6 +27,7 @@ type Props = {
 }> & BoxProps;
 /**
  * ## DmIcon
+ *
  * Displays an icon from the BYOND icon reference map. Requires Byond 515+.
  * A much faster alternative to base64 icons.
  */

package/dist/components/DmIcon.js

@@ -1 +1 @@
-import*as T from"react/jsx-runtime";import*as r from"./Image.js";var S,e=((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 t(S){let{className:e,direction:t=2,fallback:o,frame:E=1,icon_state:i,icon:m,movement:n=!1,...H}=S,O=Byond.iconRefMap?.[m];if(!O)return o;let a=`${O}?state=${i}&dir=${t}&movement=${!!n}&frame=${E}`;return(0,T.jsx)(r.Image,{fixErrors:!0,src:a,...H})}export{e as Direction,t as DmIcon};
+import*as T from"react/jsx-runtime";import*as r from"./Image.js";var S,e=((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 t(S){let{direction:e=2,fallback:t,frame:o=1,icon_state:E,icon:i,movement:m=!1,...n}=S,H=Byond.iconRefMap?.[i];if(!H)return t;let O=`${H}?state=${E}&dir=${e}&movement=${!!m}&frame=${o}`;return(0,T.jsx)(r.Image,{fixErrors:!0,src:O,...n})}export{e as Direction,t as DmIcon};

package/dist/components/DraggableControl.js

@@ -1 +1 @@
-import*as e from"react/jsx-runtime";import*as r from"react";import*as t from"../common/keys.js";import*as n from"../common/math.js";import*as u from"./AnimatedNumber.js";function c(e,r){return e.screenX*r[0]+e.screenY*r[1]}function o(o){let{animated:a,children:s,dragMatrix:m=[1,0],format:i,maxValue:l=Number.POSITIVE_INFINITY,minValue:v=Number.NEGATIVE_INFINITY,onChange:f,onDrag:d,step:p=1,stepPixelSize:N=1,unclamped:E,unit:I,updateRate:b=400,fontSize:g,height:y,lineHeight:T}=o,[j,R]=(0,r.useState)(o.value),[h,S]=(0,r.useState)(!1),x=(0,r.useRef)(!1),F=(0,r.useRef)(o.value),L=(0,r.useRef)(0),Y=(0,r.useRef)(-1),_=(0,r.useRef)(null),k=(0,r.useRef)(null),A=(0,r.useRef)(null);function D(e){let r=c(e,m),t=r-Y.current,u=Number.isFinite(v)?v%p:0;L.current=(0,n.clamp)(L.current+t*p/N,v-p,l+p);let o=(0,n.clamp)(L.current-L.current%p+u,v,l);F.current=o,R(o),Y.current=r}function K(e){document.body.style["pointer-events"]="auto",k.current&&clearInterval(k.current),Y.current=-1,document.removeEventListener("mousemove",D),document.removeEventListener("mouseup",K),x.current&&(f?.(e,F.current),d?.(e,F.current),x.current=!1)}(0,r.useEffect)(()=>{o.value!==F.current&&(F.current=o.value,R(o.value))},[o.value]);let V=o.value;x.current&&(V=F.current);let w=(0,e.jsxs)(e.Fragment,{children:[a&&!x.current?(0,e.jsx)(u.AnimatedNumber,{value:V,format:i}):i?i(V):V,I?` ${I}`:""]}),z=(0,e.jsx)("input",{ref:_,className:"NumberInput__input",style:{display:h?void 0:"none",height:y,lineHeight:T,fontSize:g},onBlur:function(e){let r=Number.parseFloat(e.currentTarget.value);if(E||(r=(0,n.clamp)(r,v,l)),Number.isNaN(r))return void S(!1);L.current=r,F.current=r,R(r),f?.(e.nativeEvent,r),h&&S(!1)},onKeyDown:function(e){(e.key===t.KEY.Enter||(0,t.isEscape)(e.key))&&S(!1)}});return s({displayElement:w,displayValue:V,dragging:x.current,editing:h,handleDragStart:function(e){h||(document.body.style["pointer-events"]="none",Y.current=c(e.nativeEvent,m),L.current=o.value,x.current=!0,document.addEventListener("mouseup",K),A.current=setTimeout(()=>{var r=e.nativeEvent;if(x.current)document.addEventListener("mousemove",D),k.current=setInterval(()=>{x.current&&d?.(r,o.value)},b);else if(S(!0),_.current){let e=_.current;e.value=L.current.toString(),setTimeout(()=>{e.focus(),e.select()},10)}A.current&&clearTimeout(A.current)},100))},inputElement:z})}export{o as DraggableControl};
+import*as e from"react/jsx-runtime";import*as r from"react";import*as t from"../common/keys.js";import*as n from"../common/math.js";import*as u from"./AnimatedNumber.js";function c(e,r){return e.screenX*r[0]+e.screenY*r[1]}function o(o){let{animated:a,children:s,dragMatrix:m=[1,0],format:i,maxValue:l=Number.POSITIVE_INFINITY,minValue:v=Number.NEGATIVE_INFINITY,onChange:f,onDrag:d,step:p=1,stepPixelSize:N=1,unclamped:E,unit:I,updateRate:b=400,fontSize:g,height:y,lineHeight:T}=o,[j,R]=(0,r.useState)(o.value),[h,S]=(0,r.useState)(!1),x=(0,r.useRef)(!1),F=(0,r.useRef)(o.value),L=(0,r.useRef)(0),Y=(0,r.useRef)(-1),_=(0,r.useRef)(null),k=(0,r.useRef)(null),A=(0,r.useRef)(null);function D(e){let r=c(e,m),t=r-Y.current,u=Number.isFinite(v)?v%p:0;L.current=(0,n.clamp)(L.current+t*p/N,v-p,l+p);let o=(0,n.clamp)(L.current-L.current%p+u,v,l);F.current=o,R(o),Y.current=r}function K(e){document.body.style["pointer-events"]="auto",k.current&&clearInterval(k.current),Y.current=-1,document.removeEventListener("mousemove",D),document.removeEventListener("mouseup",K),x.current&&(f?.(e,F.current),d?.(e,F.current),x.current=!1)}(0,r.useEffect)(()=>{o.value!==F.current&&(F.current=o.value,R(o.value))},[o.value]);let V=o.value;x.current&&(V=F.current);let w=(0,e.jsxs)(e.Fragment,{children:[a&&!x.current?(0,e.jsx)(u.AnimatedNumber,{format:i,value:V}):i?i(V):V,I?` ${I}`:""]}),z=(0,e.jsx)("input",{className:"NumberInput__input",onBlur:function(e){let r=Number.parseFloat(e.currentTarget.value);if(E||(r=(0,n.clamp)(r,v,l)),Number.isNaN(r))return void S(!1);L.current=r,F.current=r,R(r),f?.(e.nativeEvent,r),h&&S(!1)},onKeyDown:function(e){(e.key===t.KEY.Enter||(0,t.isEscape)(e.key))&&S(!1)},ref:_,style:{display:h?void 0:"none",fontSize:g,height:y,lineHeight:T}});return s({displayElement:w,displayValue:V,dragging:x.current,editing:h,handleDragStart:function(e){h||(document.body.style["pointer-events"]="none",Y.current=c(e.nativeEvent,m),L.current=o.value,x.current=!0,document.addEventListener("mouseup",K),A.current=setTimeout(()=>{var r=e.nativeEvent;if(x.current)document.addEventListener("mousemove",D),k.current=setInterval(()=>{x.current&&d?.(r,o.value)},b);else if(S(!0),_.current){let e=_.current;e.value=L.current.toString(),setTimeout(()=>{e.focus(),e.select()},10)}A.current&&clearTimeout(A.current)},100))},inputElement:z})}export{o as DraggableControl};

package/dist/components/Dropdown.d.ts

@@ -47,8 +47,11 @@ type Props = {
 }> & 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)
  */
 export declare function Dropdown(props: Props): import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/components/Dropdown.js

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

package/dist/components/Flex.d.ts

@@ -57,6 +57,7 @@ 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.
  *
@@ -69,7 +70,8 @@ export declare function computeFlexProps(props: FlexProps): Record<string, any>;
  * One of the most basic usage of flex, is to align certain elements
  * to the left, and certain elements to the right:
  *
- * @example
+ * Example:
+ *
  * ```tsx
  * <Flex>
  *   <Flex.Item grow>Button description</Flex.Item>
@@ -86,6 +88,8 @@ export declare function computeFlexProps(props: FlexProps): Record<string, any>;
  * @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)
  */
 export declare function Flex(props: any): import("react/jsx-runtime").JSX.Element;
 export declare namespace Flex {

package/dist/components/Flex.js

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

package/dist/components/Floating.d.ts

@@ -72,6 +72,7 @@ type Props = {
 }>;
 /**
  * ## 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.
  */

package/dist/components/Floating.js

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

package/dist/components/Icon.d.ts

@@ -15,20 +15,27 @@ export declare function Icon(props: Props): import("react/jsx-runtime").JSX.Elem
 declare function IconStack(props: BoxProps): import("react/jsx-runtime").JSX.Element;
 /**
  * ## Icon
+ *
  * Renders one of the FontAwesome icons of your choice.
  *
- * @example
+ * Example:
+ *
  * ```tsx
  * <Icon name="plus" />
  * ```
- * @url https://fontawesome.com/v6/search?o=r&m=free
+ *
+ * Icons: https://fontawesome.com/v6/search?o=r&m=free
+ *
+ * - [View documentation on tgui core](http://localhost:6006/?path=/docs/components-icon--docs)
  */
 export declare namespace Icon {
     /**
      * ## Icon.Stack
      * Renders children icons on top of each other in order to make your own icon.
      *
-     * @example
+     * Example:
+   *
+  
      * ```tsx
      * <Icon.Stack>
      *   <Icon name="pen" />

package/dist/components/Image.d.ts

@@ -1,9 +1,11 @@
 import type { BoxProps } from './Box';
 type Props = Partial<{
-    className: string;
-    /** True is default, this fixes an ie thing */
+    /** 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. */
+    /**
+     * 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';
@@ -11,6 +13,7 @@ type Props = Partial<{
 }> & BoxProps;
 /**
  * ## Image
+ *
  * A wrapper for the `<img>` element.
  *
  * By default, it will attempt to fix broken images by fetching them again.

package/dist/components/Image.js

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

package/dist/components/ImageButton.d.ts

@@ -77,9 +77,13 @@ type Props = Partial<{
     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)
  */
 export declare function ImageButton(props: Props): import("react/jsx-runtime").JSX.Element;
 export {};

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

package/dist/components/InfinitePlane.d.ts

@@ -10,6 +10,8 @@ type Props = {
     initialLeft: number;
     /** The initial top position of the image. */
     initialTop: number;
+    /** Padding applied to the right of the zoom controls */
+    zoomPadding: 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. */
@@ -17,9 +19,11 @@ type Props = {
 }> & BoxProps & PropsWithChildren;
 /**
  * ## InfinitePlane
+ *
  * Creates a scrolling infinite plane using a background image.
  *
- * @example
+ * Example:
+ *
  * ```tsx
  * <InfinitePlane imageWidth={100} backgroundImage="https://example.com/image.png">
  *   <Box position="absolute" top={0} left={0}>
@@ -33,6 +37,8 @@ type Props = {
  *   </Box>
  * </InfinitePlane>
  * ```
+ *
+ * - [View documentation on tgui core](https://tgstation.github.io/tgui-core/?path=/docs/components-infiniteplane--docs)
  */
 export declare function InfinitePlane(props: Props): import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/components/InfinitePlane.js

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

package/dist/components/Input.d.ts

@@ -87,7 +87,7 @@ type Props = Partial<{
  *
  * A basic text input which allow users to enter text into a UI.
  *
- * @see https://github.com/tgstation/tgui-core/blob/main/lib/components/Input.tsx
+ * - [View documentation on tgui core](https://tgstation.github.io/tgui-core/?path=/docs/components-input--docs)
  */
 export declare function Input(props: Props): import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/components/KeyListener.d.ts

@@ -6,8 +6,11 @@ type Props = Partial<{
 }>;
 /**
  * ## KeyListener
+ *
  * A component that listens for keyboard events and calls the provided
  * callbacks.
+ *
+ * - [View documentation on tgui core](https://tgstation.github.io/tgui-core/?path=/docs/components-keylistener--docs)
  */
 export declare function KeyListener(props: Props): null;
 export {};

package/dist/components/Knob.d.ts

@@ -52,10 +52,13 @@ type Props = {
 }> & BoxProps;
 /**
  * ## Knob
+ *
  * A radial control which allows dialing in precise values by dragging it
  * up and down.
  *
  * Single click opens an input box to manually type in a number.
+ *
+ * - [View documentation on tgui core](https://tgstation.github.io/tgui-core/?path=/docs/components-knob--docs)
  */
 export declare function Knob(props: Props): import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/components/Knob.js

@@ -1 +1 @@
-import*as o from"react/jsx-runtime";import*as s from"../common/math.js";import*as e from"../common/react.js";import*as r from"../common/ui.js";import*as a from"./DraggableControl.js";import*as n from"./Floating.js";function t(t){let{animated:l,format:c,maxValue:i,minValue:m,onChange:x,onDrag:_,step:g,stepPixelSize:j,unclamped:p,unit:b,value:d,bipolar:h,popupPosition:f,className:K,color:u,fillValue:v,ranges:N={},size:y=1,style:M,...k}=t;return(0,o.jsx)(a.DraggableControl,{dragMatrix:[0,-1],animated:l,format:c,maxValue:i,minValue:m,onChange:x,onDrag:_,step:g,stepPixelSize:j,unclamped:p,unit:b,value:d,children:a=>{let{displayElement:t,displayValue:l,dragging:c,handleDragStart:x,inputElement:_}=a,g=(0,s.scale)(v??l,m,i),j=(0,s.scale)(l,m,i),p=u||(0,s.keyOfMatchingRange)(v??d,N)||"default",b=Math.min((j-.5)*270,225);return(0,o.jsx)(n.Floating,{preventPortal:!0,handleOpen:c,contentClasses:"Knob__popupValue",content:t,placement:f||"top",children:(0,o.jsxs)("div",{className:(0,e.classes)(["Knob",`Knob--color--${p}`,h&&"Knob--bipolar",K,(0,r.computeBoxClassName)(k)]),...(0,r.computeBoxProps)({style:{fontSize:`${y}em`,...M},...k}),onMouseDown:x,children:[(0,o.jsx)("div",{className:"Knob__circle",children:(0,o.jsx)("div",{className:"Knob__cursorBox",style:{transform:`rotate(${b}deg)`},children:(0,o.jsx)("div",{className:"Knob__cursor"})})}),(0,o.jsxs)("svg",{className:"Knob__ring Knob__ringTrackPivot",viewBox:"0 0 100 100",children:[(0,o.jsx)("circle",{className:"Knob__ringTrack",cx:"50",cy:"50",r:"50"}),(0,o.jsx)("title",{children:"track"})]}),(0,o.jsxs)("svg",{className:"Knob__ring Knob__ringFillPivot",viewBox:"0 0 100 100",children:[(0,o.jsx)("title",{children:"fill"}),(0,o.jsx)("circle",{className:"Knob__ringFill",style:{strokeDashoffset:Math.max(((h?2.75:2)-1.5*g)*Math.PI*50,0)},cx:"50",cy:"50",r:"50"})]}),_]})})}})}export{t as Knob};
+import*as o from"react/jsx-runtime";import*as s from"../common/math.js";import*as e from"../common/react.js";import*as r from"../common/ui.js";import*as a from"./DraggableControl.js";import*as n from"./Floating.js";function t(t){let{animated:l,format:c,maxValue:i,minValue:m,onChange:x,onDrag:_,step:g,stepPixelSize:j,unclamped:p,unit:b,value:d,bipolar:h,popupPosition:f,className:K,color:u,fillValue:v,ranges:N={},size:y=1,style:M,...k}=t;return(0,o.jsx)(a.DraggableControl,{dragMatrix:[0,-1],animated:l,format:c,maxValue:i,minValue:m,onChange:x,onDrag:_,step:g,stepPixelSize:j,unclamped:p,unit:b,value:d,children:a=>{let{displayElement:t,displayValue:l,dragging:c,handleDragStart:x,inputElement:_}=a,g=(0,s.scale)(v??l,m,i),j=(0,s.scale)(l,m,i),p=u||(0,s.keyOfMatchingRange)(v??d,N)||"default",b=Math.min((j-.5)*270,225);return(0,o.jsx)(n.Floating,{content:t,contentClasses:"Knob__popupValue",handleOpen:c,placement:f||"top",preventPortal:!0,children:(0,o.jsxs)("div",{className:(0,e.classes)(["Knob",`Knob--color--${p}`,h&&"Knob--bipolar",K,(0,r.computeBoxClassName)(k)]),...(0,r.computeBoxProps)({style:{fontSize:`${y}em`,...M},...k}),onMouseDown:x,children:[(0,o.jsx)("div",{className:"Knob__circle",children:(0,o.jsx)("div",{className:"Knob__cursorBox",style:{transform:`rotate(${b}deg)`},children:(0,o.jsx)("div",{className:"Knob__cursor"})})}),(0,o.jsxs)("svg",{className:"Knob__ring Knob__ringTrackPivot",viewBox:"0 0 100 100",children:[(0,o.jsx)("circle",{className:"Knob__ringTrack",cx:"50",cy:"50",r:"50"}),(0,o.jsx)("title",{children:"track"})]}),(0,o.jsxs)("svg",{className:"Knob__ring Knob__ringFillPivot",viewBox:"0 0 100 100",children:[(0,o.jsx)("title",{children:"fill"}),(0,o.jsx)("circle",{className:"Knob__ringFill",cx:"50",cy:"50",r:"50",style:{strokeDashoffset:Math.max(((h?2.75:2)-1.5*g)*Math.PI*50,0)}})]}),_]})})}})}export{t as Knob};

package/dist/components/LabeledControls.d.ts

@@ -1,19 +1,23 @@
 import { type FlexProps } from './Flex';
 /**
- *  ## LabeledControls
+ * ## LabeledControls
+ *
  * LabeledControls is a horizontal grid that is designed to hold various
  * controls, like [Knobs](https://github.com/tgstation/tgui-core/tree/main/lib/components/Knob.tsx)
  * or small [Buttons](https://github.com/tgstation/tgui-core/tree/main/lib/components/Button.tsx).
  *
  * Every item in this grid is labeled at the bottom.
  *
- * @example
+ * Example:
+ *
  * ```tsx
  * <LabeledControls>
  *   <LabeledControls.Item label="Temperature"><Knob /></LabeledControls.Item>
  *   <LabeledControls.Item label="Submit"><Button /></LabeledControls.Item>
  * </LabeledControls>
  * ```
+ *
+ * - [View documentation on tgui core](https://tgstation.github.io/tgui-core/?path=/docs/components-labeledcontrols--docs)
  */
 export declare function LabeledControls(props: FlexProps): import("react/jsx-runtime").JSX.Element;
 export declare namespace LabeledControls {

package/dist/components/LabeledControls.js

@@ -1 +1 @@
-import*as e from"react/jsx-runtime";import*as t from"./Flex.js";function l(l){let{children:r,wrap:n,...i}=l;return(0,e.jsx)(t.Flex,{mx:-.5,wrap:n,align:"stretch",justify:"space-between",...i,children:r})}l.Item=function(l){let{label:r,children:n,mx:i=1,...x}=l;return(0,e.jsx)(t.Flex.Item,{mx:i,children:(0,e.jsxs)(t.Flex,{height:"100%",direction:"column",align:"center",textAlign:"center",justify:"space-between",...x,children:[(0,e.jsx)(t.Flex.Item,{}),(0,e.jsx)(t.Flex.Item,{children:n}),(0,e.jsx)(t.Flex.Item,{color:"label",children:r})]})})};export{l as LabeledControls};
+import*as e from"react/jsx-runtime";import*as t from"./Flex.js";function l(l){let{children:r,wrap:n,...i}=l;return(0,e.jsx)(t.Flex,{align:"stretch",justify:"space-between",mx:-.5,wrap:n,...i,children:r})}l.Item=function(l){let{label:r,children:n,mx:i=1,...x}=l;return(0,e.jsx)(t.Flex.Item,{mx:i,children:(0,e.jsxs)(t.Flex,{align:"center",direction:"column",height:"100%",justify:"space-between",textAlign:"center",...x,children:[(0,e.jsx)(t.Flex.Item,{}),(0,e.jsx)(t.Flex.Item,{children:n}),(0,e.jsx)(t.Flex.Item,{color:"label",children:r})]})})};export{l as LabeledControls};

package/dist/components/LabeledList.d.ts

@@ -56,13 +56,15 @@ type LabeledListDividerProps = {
 declare function LabeledListDivider(props: LabeledListDividerProps): import("react/jsx-runtime").JSX.Element;
 /**
  * ## LabeledList
+ *
  * LabeledList is a continuous, vertical list of text and other content, where
  * every item is labeled.
  *
  * It works just like a two column table, where first column is labels, and
  * second column is content.
  *
- * @example
+ * Example:
+ *
  * ```tsx
  * <LabeledList>
  *   <LabeledList.Item label="Item">Content</LabeledList.Item>
@@ -72,7 +74,8 @@ declare function LabeledListDivider(props: LabeledListDividerProps): import("rea
  * If you want to have a button on the right side of an item (for example,
  * to perform some sort of action), there is a way to do that:
  *
- * @example
+ * Example:
+ *
  * ```tsx
  * <LabeledList>
  *   <LabeledList.Item label="Item" buttons={<Button>Click me!</Button>}>
@@ -80,11 +83,11 @@ declare function LabeledListDivider(props: LabeledListDividerProps): import("rea
  *   </LabeledList.Item>
  * </LabeledList>
  * ```
+ *
+ * - [View documentation on tgui core](https://tgstation.github.io/tgui-core/?path=/docs/components-labeledlist--docs)
  */
 export declare namespace LabeledList {
-    /**
-     * Adds some empty space between LabeledList items.
-     */
+    /** Adds some empty space between LabeledList items. */
     const Divider: typeof LabeledListDivider;
     const Item: typeof LabeledListItem;
 }

package/dist/components/LabeledList.js

@@ -1 +1 @@
-var e;import*as s from"react/jsx-runtime";import*as t from"../common/react.js";import*as l from"../common/ui.js";import*as i from"./Box.js";import*as a from"./Divider.js";import*as o from"./Tooltip.js";function r(e){let{children:t}=e;return(0,s.jsx)("table",{className:"LabeledList",children:(0,s.jsx)("tbody",{children:t})})}(e=r||(r={})).Divider=function(e){let t=e.size?(0,l.unit)(Math.max(0,e.size-1)):0;return(0,s.jsx)("tr",{className:"LabeledList__row",children:(0,s.jsx)("td",{colSpan:3,style:{paddingTop:t,paddingBottom:t},children:(0,s.jsx)(a.Divider,{})})})},e.Item=function(e){let l,{className:a,label:r,labelColor:d="label",labelWrap:n,color:c,textAlign:m,buttons:L,content:p,children:x,verticalAlign:b="baseline",preserveWhitespace:j,tooltip:_,tooltipPosition:h}=e;r&&(l=r,"string"==typeof r&&(l+=":")),void 0!==_&&(l=(0,s.jsx)(o.Tooltip,{content:_,position:h,children:(0,s.jsx)(i.Box,{as:"span",style:{borderBottom:"2px dotted rgba(255, 255, 255, 0.8)"},children:l})}));let f=(0,s.jsx)(i.Box,{as:"td",color:d,className:(0,t.classes)(["LabeledList__cell",!n&&"LabeledList__label--nowrap"]),verticalAlign:b,preserveWhitespace:j,children:l});return(0,s.jsxs)("tr",{className:(0,t.classes)(["LabeledList__row",a]),children:[f,(0,s.jsxs)(i.Box,{as:"td",color:c,textAlign:m,className:"LabeledList__cell",colSpan:L?void 0:2,verticalAlign:b,children:[p,x]}),L&&(0,s.jsx)("td",{className:"LabeledList__cell LabeledList__buttons",children:L})]})};export{r as LabeledList};
+var e;import*as s from"react/jsx-runtime";import*as t from"../common/react.js";import*as l from"../common/ui.js";import*as i from"./Box.js";import*as a from"./Divider.js";import*as o from"./Tooltip.js";function r(e){let{children:t}=e;return(0,s.jsx)("table",{className:"LabeledList",children:(0,s.jsx)("tbody",{children:t})})}(e=r||(r={})).Divider=function(e){let t=e.size?(0,l.unit)(Math.max(0,e.size-1)):0;return(0,s.jsx)("tr",{className:"LabeledList__row",children:(0,s.jsx)("td",{colSpan:3,style:{paddingBottom:t,paddingTop:t},children:(0,s.jsx)(a.Divider,{})})})},e.Item=function(e){let l,{className:a,label:r,labelColor:d="label",labelWrap:n,color:c,textAlign:m,buttons:L,content:p,children:x,verticalAlign:b="baseline",preserveWhitespace:j,tooltip:_,tooltipPosition:h}=e;r&&(l=r,"string"==typeof r&&(l+=":")),void 0!==_&&(l=(0,s.jsx)(o.Tooltip,{content:_,position:h,children:(0,s.jsx)(i.Box,{as:"span",style:{borderBottom:"2px dotted rgba(255, 255, 255, 0.8)"},children:l})}));let f=(0,s.jsx)(i.Box,{as:"td",className:(0,t.classes)(["LabeledList__cell",!n&&"LabeledList__label--nowrap"]),color:d,preserveWhitespace:j,verticalAlign:b,children:l});return(0,s.jsxs)("tr",{className:(0,t.classes)(["LabeledList__row",a]),children:[f,(0,s.jsxs)(i.Box,{as:"td",className:"LabeledList__cell",color:c,colSpan:L?void 0:2,textAlign:m,verticalAlign:b,children:[p,x]}),L&&(0,s.jsx)("td",{className:"LabeledList__cell LabeledList__buttons",children:L})]})};export{r as LabeledList};

package/dist/components/MenuBar.js

@@ -1 +1 @@
-import*as e from"react/jsx-runtime";import*as n from"react";import*as r from"../common/react.js";import*as s from"./Box.js";import*as a from"./Floating.js";import*as o from"./Icon.js";function t(o){let{children:t,className:l,disabled:u,display:c,onClick:i,onMouseOver:m,open:_,openWidth:M,onOutsideClick:B,...d}=o,x=(0,n.useRef)(null);return(0,e.jsx)(a.Floating,{allowedOutsideClasses:".Menubar_inner",content:(0,e.jsx)("div",{className:"MenuBar__menu",style:{width:M},children:t}),children:(0,e.jsx)("div",{ref:x,className:"Menubar_inner",children:(0,e.jsx)(s.Box,{className:(0,r.classes)(["MenuBar__MenuBarButton","MenuBar__font","MenuBar__hover",l]),...d,onClick:u?()=>null:i,onMouseOver:m,children:(0,e.jsx)("span",{className:"MenuBar__MenuBarButton-text",children:c})})})})}function l(n){let{entry:r,children:s,openWidth:a,display:o,setOpenMenuBar:l,openMenuBar:u,setOpenOnHover:c,openOnHover:i,disabled:m,className:_}=n;return(0,e.jsx)(t,{openWidth:a,display:o,disabled:m,open:u===r,className:_,onClick:()=>{l(u===r?null:r),c(!i)},onOutsideClick:()=>{l(null),c(!1)},onMouseOver:()=>{i&&l(r)},children:s})}function u(n){let{children:r}=n;return(0,e.jsx)(s.Box,{className:"MenuBar",children:r})}u.Dropdown=l,l.MenuItemToggle=function(n){let{value:a,displayText:t,onClick:l,checked:u}=n;return(0,e.jsxs)(s.Box,{className:(0,r.classes)(["MenuBar__font","MenuBar__MenuItem","MenuBar__MenuItemToggle","MenuBar__hover"]),onClick:()=>l(a),children:[(0,e.jsx)("div",{className:"MenuBar__MenuItemToggle__check",children:(0,e.jsx)(o.Icon,{size:1.3,name:u?"check":""})}),t]})},l.MenuItem=function(n){let{value:a,displayText:o,onClick:t}=n;return(0,e.jsx)(s.Box,{className:(0,r.classes)(["MenuBar__font","MenuBar__MenuItem","MenuBar__hover"]),onClick:()=>t?.(a),children:o})},l.Separator=function(){return(0,e.jsx)("div",{className:"MenuBar__Separator"})};export{u as MenuBar};
+import*as e from"react/jsx-runtime";import*as n from"react";import*as r from"../common/react.js";import*as s from"./Box.js";import*as a from"./Floating.js";import*as o from"./Icon.js";function t(o){let{children:t,className:l,disabled:u,display:c,onClick:i,onMouseOver:m,open:_,openWidth:M,onOutsideClick:B,...d}=o,x=(0,n.useRef)(null);return(0,e.jsx)(a.Floating,{allowedOutsideClasses:".Menubar_inner",content:(0,e.jsx)("div",{className:"MenuBar__menu",style:{width:M},children:t}),children:(0,e.jsx)("div",{className:"Menubar_inner",ref:x,children:(0,e.jsx)(s.Box,{className:(0,r.classes)(["MenuBar__MenuBarButton","MenuBar__font","MenuBar__hover",l]),...d,onClick:u?()=>null:i,onMouseOver:m,children:(0,e.jsx)("span",{className:"MenuBar__MenuBarButton-text",children:c})})})})}function l(n){let{entry:r,children:s,openWidth:a,display:o,setOpenMenuBar:l,openMenuBar:u,setOpenOnHover:c,openOnHover:i,disabled:m,className:_}=n;return(0,e.jsx)(t,{className:_,disabled:m,display:o,onClick:()=>{l(u===r?null:r),c(!i)},onMouseOver:()=>{i&&l(r)},onOutsideClick:()=>{l(null),c(!1)},open:u===r,openWidth:a,children:s})}function u(n){let{children:r}=n;return(0,e.jsx)(s.Box,{className:"MenuBar",children:r})}u.Dropdown=l,l.MenuItemToggle=function(n){let{value:a,displayText:t,onClick:l,checked:u}=n;return(0,e.jsxs)(s.Box,{className:(0,r.classes)(["MenuBar__font","MenuBar__MenuItem","MenuBar__MenuItemToggle","MenuBar__hover"]),onClick:()=>l(a),children:[(0,e.jsx)("div",{className:"MenuBar__MenuItemToggle__check",children:(0,e.jsx)(o.Icon,{name:u?"check":"",size:1.3})}),t]})},l.MenuItem=function(n){let{value:a,displayText:o,onClick:t}=n;return(0,e.jsx)(s.Box,{className:(0,r.classes)(["MenuBar__font","MenuBar__MenuItem","MenuBar__hover"]),onClick:()=>t?.(a),children:o})},l.Separator=function(){return(0,e.jsx)("div",{className:"MenuBar__Separator"})};export{u as MenuBar};

package/dist/components/Modal.d.ts

@@ -1,16 +1,21 @@
 import type { KeyboardEvent } from 'react';
 import type { BoxProps } from './Box';
-export type ModalProps = BoxProps & Partial<{
+export type ModalProps = Partial<{
     /** Fires once the enter key is pressed */
     onEnter: (e: KeyboardEvent<HTMLInputElement>) => void;
     /** Fires once the escape key is pressed */
     onEscape: (e: KeyboardEvent<HTMLInputElement>) => void;
-}>;
+}> & BoxProps;
 /**
  * ## Modal
- * A modal window. Uses a [Dimmer](https://github.com/tgstation/tgui-core/tree/main/lib/components/Dimmer.tsx)
- * under the hood, and dynamically adjusts its own size to fit the content you're trying to display.
+ *
+ * A modal window. Uses a
+ * [Dimmer](https://tgstation.github.io/tgui-core/?path=/docs/components-dimmer--docs)
+ * under the hood, and dynamically adjusts its own size to fit the content
+ * you're trying to display.
  *
  * Must be a direct child of a layout component (e.g. `Window`).
+ *
+ * - [View documentation on tgui core](https://tgstation.github.io/tgui-core/?path=/docs/components-modal--docs)
  */
 export declare function Modal(props: ModalProps): import("react/jsx-runtime").JSX.Element;

package/dist/components/NoticeBox.d.ts

@@ -1,7 +1,7 @@
 import { type BoxProps } from './Box';
 type Props = ExclusiveProps & BoxProps;
 /** You MUST use only one or none */
-type NoticeType = 'info' | 'success' | 'warning' | 'danger';
+type NoticeType = 'info' | 'success' | 'danger';
 type None = {
     [K in NoticeType]?: undefined;
 };
@@ -11,16 +11,16 @@ type ExclusiveProps = None | (Omit<None, 'info'> & {
 }) | (Omit<None, 'success'> & {
     /** Green notice */
     success: boolean;
-}) | (Omit<None, 'warning'> & {
-    /** Orange notice */
-    warning: boolean;
 }) | (Omit<None, 'danger'> & {
     /** Red notice */
     danger: boolean;
 });
 /**
  * ## NoticeBox
+ *
  * A notice box which warns you about something very important.
+ *
+ * - [View documentation on tgui core](https://tgstation.github.io/tgui-core/?path=/docs/components-noticebox--docs)
  */
 export declare function NoticeBox(props: Props): import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/components/NoticeBox.js

@@ -1 +1 @@
-import*as o from"react/jsx-runtime";import*as e from"../common/react.js";import*as t from"./Box.js";function c(c){let{className:s,color:r,info:i,success:x,warning:m,danger:a,...B}=c;return(0,o.jsx)(t.Box,{className:(0,e.classes)(["NoticeBox",r&&`NoticeBox--color--${r}`,i&&"NoticeBox--type--info",x&&"NoticeBox--type--success",a&&"NoticeBox--type--danger",s]),...B})}export{c as NoticeBox};
+import*as o from"react/jsx-runtime";import*as e from"../common/react.js";import*as t from"./Box.js";function c(c){let{className:s,color:r,info:i,success:x,danger:m,...a}=c;return(0,o.jsx)(t.Box,{className:(0,e.classes)(["NoticeBox",r&&`NoticeBox--color--${r}`,i&&"NoticeBox--type--info",x&&"NoticeBox--type--success",m&&"NoticeBox--type--danger",s]),...a})}export{c as NoticeBox};

package/dist/components/NumberInput.d.ts

@@ -37,8 +37,11 @@ type State = {
 };
 /**
  * ## NumberInput
+ *
  * A fancy, interactive number input, which you can either drag up and down
  * to fine tune the value, or single click it to manually type a number.
+ *
+ * - [View documentation on tgui core](https://tgstation.github.io/tgui-core/?path=/docs/components-numberinput--docs)
  */
 export declare class NumberInput extends Component<Props, State> {
     inputRef: import("react").RefObject<HTMLInputElement | null>;

package/dist/components/NumberInput.js

@@ -1 +1 @@
-import*as e from"react/jsx-runtime";import*as t from"react";import*as r from"../common/keys.js";import*as s from"../common/math.js";import*as i from"../common/react.js";import*as a from"./AnimatedNumber.js";import*as n from"./Box.js";class o extends t.Component{inputRef=(0,t.createRef)();dragTimeout;dragInterval;state={editing:!1,dragging:!1,currentValue:0,previousValue:0,origin:0};componentDidMount(){let e=Number.parseFloat(this.props.value.toString());this.setState({currentValue:e,previousValue:e})}handleDragStart=e=>{let{value:t,disabled:r}=this.props,{editing:s}=this.state;if(r||s)return;document.body.style["pointer-events"]="none";let i=Number.parseFloat(t.toString());this.setState({dragging:!1,origin:e.screenY,currentValue:i,previousValue:i}),this.dragTimeout=setTimeout(()=>{this.setState({dragging:!0})},250),this.dragInterval=setInterval(()=>{let{dragging:e,currentValue:t,previousValue:r}=this.state,{onDrag:s}=this.props;e&&t!==r&&(this.setState({previousValue:t}),s?.(t))},400),document.addEventListener("mousemove",this.handleDragMove),document.addEventListener("mouseup",this.handleDragEnd)};handleDragMove=e=>{let{minValue:t,maxValue:r,step:i,stepPixelSize:a,disabled:n}=this.props;n||this.setState(n=>{let o={...n},u=o.origin-e.screenY;if(n.dragging){let n=a||1,l=(0,s.clamp)(o.currentValue+u*i/n,t-i,r+i);Math.abs(l-o.currentValue)>=i?(o.currentValue=(0,s.clamp)((0,s.round)(l/i,0)*i,t,r),o.origin=e.screenY):Math.abs(u)>n&&(o.origin=e.screenY)}else Math.abs(u)>4&&(o.dragging=!0);return o})};handleDragEnd=e=>{let{dragging:t,currentValue:r}=this.state,{onDrag:s,onChange:i,disabled:a}=this.props;if(!a){if(document.body.style["pointer-events"]="auto",clearInterval(this.dragInterval),clearTimeout(this.dragTimeout),this.setState({dragging:!1,editing:!t,previousValue:r}),t)i?.(r),s?.(r);else if(this.inputRef){let e=this.inputRef.current;e&&(e.value=`${r}`,setTimeout(()=>{e.focus(),e.select()},10))}document.removeEventListener("mousemove",this.handleDragMove),document.removeEventListener("mouseup",this.handleDragEnd)}};handleBlur=e=>{let{editing:t,previousValue:r}=this.state,{minValue:i,maxValue:a,onChange:n,onDrag:o,disabled:u}=this.props;if(u||!t)return;let l=(0,s.clamp)(Number.parseFloat(e.target.value),i,a);if(Number.isNaN(l))return void this.setState({editing:!1});this.setState({editing:!1,currentValue:l,previousValue:l}),r!==l&&(n?.(l),o?.(l))};handleKeyDown=e=>{let{minValue:t,maxValue:i,onChange:a,onDrag:n,disabled:o}=this.props;if(o)return;let{previousValue:u}=this.state;if(e.key===r.KEY.Enter){let r=(0,s.clamp)(Number.parseFloat(e.currentTarget.value),t,i);if(Number.isNaN(r))return void this.setState({editing:!1});this.setState({editing:!1,currentValue:r,previousValue:r}),u!==r&&(a?.(r),n?.(r))}else(0,r.isEscape)(e.key)&&this.setState({editing:!1})};render(){let{dragging:t,editing:r,currentValue:o}=this.state,{className:u,fluid:l,animated:m,unit:h,value:d,minValue:p,maxValue:g,height:c,width:v,lineHeight:f,fontSize:N,format:b}=this.props,S=Number.parseFloat(d.toString());t&&(S=o);let V=(0,e.jsxs)("div",{className:"NumberInput__content",children:[m&&!t?(0,e.jsx)(a.AnimatedNumber,{value:S,format:b}):b?b(S):S,h?` ${h}`:""]});return(0,e.jsxs)(n.Box,{className:(0,i.classes)(["NumberInput",l&&"NumberInput--fluid",u]),minWidth:v,minHeight:c,lineHeight:f,fontSize:N,onMouseDown:this.handleDragStart,children:[(0,e.jsx)("div",{className:"NumberInput__barContainer",children:(0,e.jsx)("div",{className:"NumberInput__bar",style:{height:`${(0,s.clamp)((S-p)/(g-p)*100,0,100)}%`}})}),V,(0,e.jsx)("input",{ref:this.inputRef,className:"NumberInput__input",style:{display:r?"inline":"none",height:c,lineHeight:f,fontSize:N},onBlur:this.handleBlur,onKeyDown:this.handleKeyDown})]})}}export{o as NumberInput};
+import*as e from"react/jsx-runtime";import*as t from"react";import*as r from"../common/keys.js";import*as s from"../common/math.js";import*as i from"../common/react.js";import*as a from"./AnimatedNumber.js";import*as n from"./Box.js";class o extends t.Component{inputRef=(0,t.createRef)();dragTimeout;dragInterval;state={currentValue:0,dragging:!1,editing:!1,origin:0,previousValue:0};componentDidMount(){let e=Number.parseFloat(this.props.value.toString());this.setState({currentValue:e,previousValue:e})}handleDragStart=e=>{let{value:t,disabled:r}=this.props,{editing:s}=this.state;if(r||s)return;document.body.style["pointer-events"]="none";let i=Number.parseFloat(t.toString());this.setState({currentValue:i,dragging:!1,origin:e.screenY,previousValue:i}),this.dragTimeout=setTimeout(()=>{this.setState({dragging:!0})},250),this.dragInterval=setInterval(()=>{let{dragging:e,currentValue:t,previousValue:r}=this.state,{onDrag:s}=this.props;e&&t!==r&&(this.setState({previousValue:t}),s?.(t))},400),document.addEventListener("mousemove",this.handleDragMove),document.addEventListener("mouseup",this.handleDragEnd)};handleDragMove=e=>{let{minValue:t,maxValue:r,step:i,stepPixelSize:a,disabled:n}=this.props;n||this.setState(n=>{let o={...n},u=o.origin-e.screenY;if(n.dragging){let n=a||1,l=(0,s.clamp)(o.currentValue+u*i/n,t-i,r+i);Math.abs(l-o.currentValue)>=i?(o.currentValue=(0,s.clamp)((0,s.round)(l/i,0)*i,t,r),o.origin=e.screenY):Math.abs(u)>n&&(o.origin=e.screenY)}else Math.abs(u)>4&&(o.dragging=!0);return o})};handleDragEnd=e=>{let{dragging:t,currentValue:r}=this.state,{onDrag:s,onChange:i,disabled:a}=this.props;if(!a){if(document.body.style["pointer-events"]="auto",clearInterval(this.dragInterval),clearTimeout(this.dragTimeout),this.setState({dragging:!1,editing:!t,previousValue:r}),t)i?.(r),s?.(r);else if(this.inputRef){let e=this.inputRef.current;e&&(e.value=`${r}`,setTimeout(()=>{e.focus(),e.select()},10))}document.removeEventListener("mousemove",this.handleDragMove),document.removeEventListener("mouseup",this.handleDragEnd)}};handleBlur=e=>{let{editing:t,previousValue:r}=this.state,{minValue:i,maxValue:a,onChange:n,onDrag:o,disabled:u}=this.props;if(u||!t)return;let l=(0,s.clamp)(Number.parseFloat(e.target.value),i,a);if(Number.isNaN(l))return void this.setState({editing:!1});this.setState({currentValue:l,editing:!1,previousValue:l}),r!==l&&(n?.(l),o?.(l))};handleKeyDown=e=>{let{minValue:t,maxValue:i,onChange:a,onDrag:n,disabled:o}=this.props;if(o)return;let{previousValue:u}=this.state;if(e.key===r.KEY.Enter){let r=(0,s.clamp)(Number.parseFloat(e.currentTarget.value),t,i);if(Number.isNaN(r))return void this.setState({editing:!1});this.setState({currentValue:r,editing:!1,previousValue:r}),u!==r&&(a?.(r),n?.(r))}else(0,r.isEscape)(e.key)&&this.setState({editing:!1})};render(){let{dragging:t,editing:r,currentValue:o}=this.state,{className:u,fluid:l,animated:m,unit:h,value:d,minValue:p,maxValue:g,height:c,width:v,lineHeight:f,fontSize:N,format:b}=this.props,S=Number.parseFloat(d.toString());t&&(S=o);let V=(0,e.jsxs)("div",{className:"NumberInput__content",children:[m&&!t?(0,e.jsx)(a.AnimatedNumber,{format:b,value:S}):b?b(S):S,h?` ${h}`:""]});return(0,e.jsxs)(n.Box,{className:(0,i.classes)(["NumberInput",l&&"NumberInput--fluid",u]),fontSize:N,lineHeight:f,minHeight:c,minWidth:v,onMouseDown:this.handleDragStart,children:[(0,e.jsx)("div",{className:"NumberInput__barContainer",children:(0,e.jsx)("div",{className:"NumberInput__bar",style:{height:`${(0,s.clamp)((S-p)/(g-p)*100,0,100)}%`}})}),V,(0,e.jsx)("input",{className:"NumberInput__input",onBlur:this.handleBlur,onKeyDown:this.handleKeyDown,ref:this.inputRef,style:{display:r?"inline":"none",fontSize:N,height:c,lineHeight:f}})]})}}export{o as NumberInput};

package/dist/components/Popper.d.ts

@@ -17,6 +17,7 @@ type Props = {
 }> & PropsWithChildren;
 /**
  * ## Popper
+ *
  * Popper lets you position elements so that they don't go out of the bounds of the window.
  *
  * @deprecated - Use
@@ -24,6 +25,8 @@ type Props = {
  * instead.
  *
  * This will serve as a wrapper for floating ui until replaced.
+ *
+ * - [View documentation on tgui core](https://tgstation.github.io/tgui-core/?path=/docs/components-popper--docs)
  */
 export declare function Popper(props: Props): import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/components/Popper.js

@@ -1 +1 @@
-import*as e from"react/jsx-runtime";import*as t from"@floating-ui/react";function n(n){let{baseZIndex:i=5,children:r,content:s,isOpen:o,onClickOutside:a,placement:l}=n,{refs:f,floatingStyles:d,context:m}=(0,t.useFloating)({open:o,onOpenChange:a,middleware:[(0,t.offset)(5),(0,t.flip)(),(0,t.shift)()],placement:l,whileElementsMounted:t.autoUpdate}),p=(0,t.useDismiss)(m),{getReferenceProps:u,getFloatingProps:c}=(0,t.useInteractions)([p]);return(0,e.jsxs)(e.Fragment,{children:[(0,e.jsx)("div",{ref:f.setReference,...u(),children:r}),o&&(0,e.jsx)("div",{ref:f.setFloating,style:{...d,zIndex:i},...c(),children:s})]})}export{n as Popper};
+import*as e from"react/jsx-runtime";import*as t from"@floating-ui/react";function n(n){let{baseZIndex:i=5,children:r,content:s,isOpen:o,onClickOutside:a,placement:l}=n,{refs:f,floatingStyles:d,context:m}=(0,t.useFloating)({middleware:[(0,t.offset)(5),(0,t.flip)(),(0,t.shift)()],onOpenChange:a,open:o,placement:l,whileElementsMounted:t.autoUpdate}),p=(0,t.useDismiss)(m),{getReferenceProps:u,getFloatingProps:c}=(0,t.useInteractions)([p]);return(0,e.jsxs)(e.Fragment,{children:[(0,e.jsx)("div",{ref:f.setReference,...u(),children:r}),o&&(0,e.jsx)("div",{ref:f.setFloating,style:{...d,zIndex:i},...c(),children:s})]})}export{n as Popper};