tgui-core 3.1.4 → 3.2.0

package/dist/components/Dialog.d.ts

@@ -13,14 +13,18 @@ type DialogProps = {
 };
 /**
  * ## 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 {

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/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

@@ -11,6 +11,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/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

@@ -17,9 +17,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 +35,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,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,{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)},zoom:b})]})}function a(t){let{zoom:o,onZoomClick:r}=t;return(0,e.jsx)("div",{style:{left:5,position:"absolute",right:5,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:()=>r("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:()=>r("increase")})})]})})}export{r as InfinitePlane};

package/dist/components/Input.d.ts

@@ -1,6 +1,6 @@
 import { type RefObject } from 'react';
 import type { BoxProps } from './Box';
-export type BaseInputProps = Partial<{
+export type BaseInputProps<TElement = HTMLInputElement> = Partial<{
     /** Automatically focuses the input on mount */
     autoFocus: boolean;
     /** Automatically selects the input value on focus */
@@ -22,8 +22,8 @@ export type BaseInputProps = Partial<{
     fluid: boolean;
     /** Mark this if you want to use a monospace font */
     monospace: boolean;
-}> & BoxProps;
-export type TextInputProps = Partial<{
+}> & BoxProps<TElement>;
+export type TextInputProps<TElement = HTMLInputElement> = Partial<{
     /** The maximum length of the input value */
     maxLength: number;
     /** Fires each time focus leaves the input, including if Esc or Enter are pressed */
@@ -77,7 +77,7 @@ export type TextInputProps = Partial<{
      * ```
      */
     value: string;
-}> & BaseInputProps;
+}> & BaseInputProps<TElement>;
 type Props = Partial<{
     /** Ref of the input element */
     ref: RefObject<HTMLInputElement | null>;
@@ -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/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 u from"../common/react.js";import*as n from"../common/timer.js";import*as o from"../common/ui.js";let a=(0,n.debounce)(e=>e(),250);function c(n){let{autoFocus:c,autoSelect:s,className:m,disabled:l,expensive:p,fluid:f,maxLength:i,monospace:d,onBlur:g,onChange:v,onEnter:x,onEscape:T,placeholder:j,ref:E,selfClear:b,value:y,...I}=n,h=(0,t.useRef)(null),k=E??h,[C,B]=(0,t.useState)(y??"");(0,t.useEffect)(()=>{let e;return(c||s)&&(e=setTimeout(()=>{k.current?.focus(),s&&k.current?.select()},1)),()=>clearTimeout(e)},[]),(0,t.useEffect)(()=>{k.current&&document.activeElement!==k.current&&y!==C&&B(y??"")},[y]);let D=(0,o.computeBoxProps)(I),K=(0,u.classes)(["Input",l&&"Input--disabled",f&&"Input--fluid",d&&"Input--monospace",(0,o.computeBoxClassName)(I),m]);return(0,e.jsx)("input",{...D,autoComplete:"off",className:K,disabled:l,maxLength:i,onBlur:function(e){g?.(C)},onChange:function(e){let t=e.currentTarget.value;B(t),p?a(()=>v?.(t)):v?.(t)},onKeyDown:function(e){if(e.key===r.KEY.Enter){e.preventDefault(),x?.(e.currentTarget.value),b&&B(""),e.currentTarget.blur();return}(0,r.isEscape)(e.key)&&(e.preventDefault(),T?.(e.currentTarget.value),e.currentTarget.blur())},placeholder:j,ref:k,spellCheck:!1,type:"text",value:C})}export{c as Input};
+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/timer.js";import*as o from"../common/ui.js";let a=(0,n.debounce)(e=>e(),250);function c(n){let{autoFocus:c,autoSelect:s,className:m,disabled:l,expensive:p,fluid:f,maxLength:i,monospace:d,onBlur:g,onChange:v,onEnter:x,onEscape:T,onKeyDown:j,placeholder:E,ref:b,selfClear:y,value:I,...h}=n,k=(0,t.useRef)(null),C=b??k,[B,D]=(0,t.useState)(I??"");(0,t.useEffect)(()=>{let e;return(c||s)&&(e=setTimeout(()=>{C.current?.focus(),s&&C.current?.select()},1)),()=>clearTimeout(e)},[]),(0,t.useEffect)(()=>{C.current&&document.activeElement!==C.current&&I!==B&&D(I??"")},[I]);let K=(0,o.computeBoxProps)(h),N=(0,u.classes)(["Input",l&&"Input--disabled",f&&"Input--fluid",d&&"Input--monospace",(0,o.computeBoxClassName)(h),m]);return(0,e.jsx)("input",{...K,autoComplete:"off",className:N,disabled:l,maxLength:i,onBlur:function(e){g?.(B)},onChange:function(e){let t=e.currentTarget.value;D(t),p?a(()=>v?.(t)):v?.(t)},onKeyDown:function(e){if(j?.(e),e.key===r.KEY.Enter){e.preventDefault(),x?.(e.currentTarget.value),y&&D(""),e.currentTarget.blur();return}(0,r.isEscape)(e.key)&&(e.preventDefault(),T?.(e.currentTarget.value),e.currentTarget.blur())},placeholder:E,ref:C,spellCheck:!1,type:"text",value:B})}export{c as Input};

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,6 +83,8 @@ 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 {
     /**

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

@@ -8,9 +8,14 @@ export type ModalProps = BoxProps & Partial<{
 }>;
 /**
  * ## 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

@@ -20,7 +20,10 @@ type ExclusiveProps = None | (Omit<None, 'info'> & {
 });
 /**
  * ## 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/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};

package/dist/components/ProgressBar.d.ts

@@ -45,7 +45,10 @@ type Props = {
 }> & BoxProps & PropsWithChildren;
 /**
  * ## ProgressBar
+ *
  * Progress indicators inform users about the status of ongoing processes.
+ *
+ * - [View documentation on tgui core](https://tgstation.github.io/tgui-core/?path=/docs/components-progressbar--docs)
  */
 export declare function ProgressBar(props: Props): import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/components/RestrictedInput.d.ts

@@ -61,9 +61,9 @@ type Props = Partial<{
  *
  * Creates a numerical input which rejects improper keys.
  *
- *  Has a special event for changes in validation states - `onValidationChange`.
+ * Has a special event for changes in validation states - `onValidationChange`.
  *
- * @see https://github.com/tgstation/tgui-core/blob/main/lib/components/RestrictedInput.tsx
+ * - [View documentation on tgui core](https://tgstation.github.io/tgui-core/?path=/docs/components-restrictedinput--docs)
  */
 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 t from"../common/react.js";import*as r from"../common/timer.js";import*as n from"../common/ui.js";import*as u from"react";import*as o from"../common/keys.js";let s=(0,r.debounce)(e=>e(),250);function c(r){let{allowFloats:c,autoFocus:i,autoSelect:m,className:a,disabled:l,expensive:f,fluid:p,maxValue:d=1e4,minValue:v=0,monospace:y,onBlur:E,onChange:b,onEnter:I,onEscape:j,onValidationChange:x,value:k,...C}=r,D=(0,u.useRef)(null),[R,B]=(0,u.useState)(k??v),[K,N]=(0,u.useState)(!0);function g(e){b&&(f?s(()=>b(e)):b(e))}(0,u.useEffect)(()=>{let e;return(i||m)&&(e=setTimeout(()=>{D.current?.focus(),m&&D.current?.select()},1)),()=>clearTimeout(e)},[]),(0,u.useEffect)(()=>{if(D.current){let e=D.current.validity.valid;K!==e&&(N(e),x?.(e))}},[R]),(0,u.useEffect)(()=>{D.current&&document.activeElement!==D.current&&k!==R&&B(k??v)},[k]);let h=(0,n.computeBoxProps)(C),S=(0,t.classes)(["Input","RestrictedInput",l&&"Input--disabled",p&&"Input--fluid",y&&"Input--monospace",(0,n.computeBoxClassName)(C),a,!K&&"RestrictedInput--invalid"]);return(0,e.jsx)("input",{...h,autoComplete:"off",className:S,disabled:l,max:d,min:v,onBlur:function(e){E?.(R)},onChange:function(e){let t=Number(e.target.value);B(t),g(t)},onKeyDown:function(e){if(e.key===o.KEY.Enter){e.preventDefault(),I?.(R),D.current?.blur();return}if((0,o.isEscape)(e.key)){e.preventDefault(),j?.(R),D.current?.blur();return}if(e.key===o.KEY.Minus){e.preventDefault();let t=-1*R;B(t),g(t);return}},ref:D,spellCheck:!1,step:c?"any":"1",type:"number",value:R})}export{c as RestrictedInput};
+import*as e from"react/jsx-runtime";import*as t from"../common/react.js";import*as r from"../common/timer.js";import*as n from"../common/ui.js";import*as u from"react";import*as o from"../common/keys.js";let s=(0,r.debounce)(e=>e(),250);function c(r){let{allowFloats:c,autoFocus:i,autoSelect:m,className:a,disabled:l,expensive:f,fluid:p,maxValue:d=1e4,minValue:v=0,monospace:y,onBlur:E,onChange:b,onEnter:I,onEscape:j,onKeyDown:x,onValidationChange:k,value:C,...D}=r,R=(0,u.useRef)(null),[B,K]=(0,u.useState)(C??v),[N,g]=(0,u.useState)(!0);function h(e){b&&(f?s(()=>b(e)):b(e))}(0,u.useEffect)(()=>{let e;return(i||m)&&(e=setTimeout(()=>{R.current?.focus(),m&&R.current?.select()},1)),()=>clearTimeout(e)},[]),(0,u.useEffect)(()=>{if(R.current){let e=R.current.validity.valid;N!==e&&(g(e),k?.(e))}},[B]),(0,u.useEffect)(()=>{R.current&&document.activeElement!==R.current&&C!==B&&K(C??v)},[C]);let S=(0,n.computeBoxProps)(D),T=(0,t.classes)(["Input","RestrictedInput",l&&"Input--disabled",p&&"Input--fluid",y&&"Input--monospace",(0,n.computeBoxClassName)(D),a,!N&&"RestrictedInput--invalid"]);return(0,e.jsx)("input",{...S,autoComplete:"off",className:T,disabled:l,max:d,min:v,onBlur:function(e){E?.(B)},onChange:function(e){let t=Number(e.target.value);K(t),h(t)},onKeyDown:function(e){if(x?.(e),e.key===o.KEY.Enter){e.preventDefault(),I?.(B),R.current?.blur();return}if((0,o.isEscape)(e.key)){e.preventDefault(),j?.(B),R.current?.blur();return}if(e.key===o.KEY.Minus){e.preventDefault();let t=-1*B;K(t),h(t);return}},ref:R,spellCheck:!1,step:c?"any":"1",type:"number",value:B})}export{c as RestrictedInput};

package/dist/components/RoundGauge.d.ts

@@ -25,10 +25,12 @@ type Props = {
 }> & BoxProps;
 /**
  * ## RoundGauge
+ *
  * The RoundGauge component provides a visual representation of a single metric, as well as being capable of showing
  * informational or cautionary boundaries related to that metric.
  *
- * @example
+ * Example:
+ *
  * ```tsx
  * <RoundGauge
  *  size={1.75}
@@ -48,6 +50,7 @@ type Props = {
  * The alert on the gauge is optional, and will only be shown if the `alertAfter` prop is defined. When defined, the alert
  * will begin to flash the respective color upon which the needle currently rests, as defined in the `ranges` prop.
  *
+ * - [View documentation on tgui core](https://tgstation.github.io/tgui-core/?path=/docs/components-roundgauge--docs)
  */
 export declare function RoundGauge(props: Props): import("react/jsx-runtime").JSX.Element;
 export {};