tgui-core 3.1.5 → 3.2.0

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

@@ -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,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/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 {};

package/dist/components/RoundGauge.js

@@ -1 +1 @@
-import*as e from"react/jsx-runtime";import*as a from"../common/math.js";import*as s from"../common/react.js";import*as r from"../common/ui.js";import*as o from"./AnimatedNumber.js";function c(c){let{alertAfter:l,alertBefore:t,className:n,format:m,maxValue:i=1,minValue:u=1,ranges:d,size:x=1,style:g,value:j,...C}=c,p=(0,a.scale)(j,u,i),_=(0,a.clamp01)(p),f=d?{}:{primary:[0,1]};if(d)for(let e in d){let s=d[e];f[e]=[(0,a.scale)(s[0],u,i),(0,a.scale)(s[1],u,i)]}let h=(!!l&&!!t&&!!(j>l)&&!!(j<t)||!!l&&!!(j>l)||!!t&&!!(j<t))&&(0,a.keyOfMatchingRange)(_,f);return(0,e.jsxs)("div",{className:"RoundGauge__wrapper",children:[(0,e.jsx)("div",{className:(0,s.classes)(["RoundGauge",n,(0,r.computeBoxClassName)(C)]),...(0,r.computeBoxProps)({style:{fontSize:`${x}em`,...g},...C}),children:(0,e.jsxs)("svg",{viewBox:"0 0 100 50",children:[(l||t)&&(0,e.jsx)("g",{className:(0,s.classes)(["RoundGauge__alert",h?`active RoundGauge__alert--${h}`:""]),children:(0,e.jsx)("path",{d:"M48.211,14.578C48.55,13.9 49.242,13.472 50,13.472C50.758,13.472 51.45,13.9 51.789,14.578C54.793,20.587 60.795,32.589 63.553,38.106C63.863,38.726 63.83,39.462 63.465,40.051C63.101,40.641 62.457,41 61.764,41C55.996,41 44.004,41 38.236,41C37.543,41 36.899,40.641 36.535,40.051C36.17,39.462 36.137,38.726 36.447,38.106C39.205,32.589 45.207,20.587 48.211,14.578ZM50,34.417C51.426,34.417 52.583,35.574 52.583,37C52.583,38.426 51.426,39.583 50,39.583C48.574,39.583 47.417,38.426 47.417,37C47.417,35.574 48.574,34.417 50,34.417ZM50,32.75C50,32.75 53,31.805 53,22.25C53,20.594 51.656,19.25 50,19.25C48.344,19.25 47,20.594 47,22.25C47,31.805 50,32.75 50,32.75Z"})}),(0,e.jsx)("g",{children:(0,e.jsx)("circle",{className:"RoundGauge__ringTrack",cx:"50",cy:"50",r:"45"})}),(0,e.jsx)("g",{children:Object.keys(f).map((a,s)=>{let r=f[a];return(0,e.jsx)("circle",{className:`RoundGauge__ringFill RoundGauge--color--${a}`,style:{strokeDashoffset:Math.max((2-(r[1]-r[0]))*Math.PI*50,0)},transform:`rotate(${180+180*r[0]} 50 50)`,cx:"50",cy:"50",r:"45"},s)})}),(0,e.jsxs)("g",{className:"RoundGauge__needle",transform:`rotate(${180*_-90} 50 50)`,children:[(0,e.jsx)("polygon",{className:"RoundGauge__needleLine",points:"46,50 50,0 54,50"}),(0,e.jsx)("circle",{className:"RoundGauge__needleMiddle",cx:"50",cy:"50",r:"8"})]}),(0,e.jsx)("title",{children:"alert"})]})}),(0,e.jsx)(o.AnimatedNumber,{value:j,format:m})]})}export{c as RoundGauge};
+import*as e from"react/jsx-runtime";import*as a from"../common/math.js";import*as s from"../common/react.js";import*as r from"../common/ui.js";import*as o from"./AnimatedNumber.js";function c(c){let{alertAfter:l,alertBefore:t,className:n,format:m,maxValue:i=1,minValue:u=1,ranges:d,size:x=1,style:g,value:j,...C}=c,p=(0,a.scale)(j,u,i),_=(0,a.clamp01)(p),f=d?{}:{primary:[0,1]};if(d)for(let e in d){let s=d[e];f[e]=[(0,a.scale)(s[0],u,i),(0,a.scale)(s[1],u,i)]}let h=(!!l&&!!t&&!!(j>l)&&!!(j<t)||!!l&&!!(j>l)||!!t&&!!(j<t))&&(0,a.keyOfMatchingRange)(_,f);return(0,e.jsxs)("div",{className:"RoundGauge__wrapper",children:[(0,e.jsx)("div",{className:(0,s.classes)(["RoundGauge",n,(0,r.computeBoxClassName)(C)]),...(0,r.computeBoxProps)({style:{fontSize:`${x}em`,...g},...C}),children:(0,e.jsxs)("svg",{viewBox:"0 0 100 50",children:[(l||t)&&(0,e.jsx)("g",{className:(0,s.classes)(["RoundGauge__alert",h?`active RoundGauge__alert--${h}`:""]),children:(0,e.jsx)("path",{d:"M48.211,14.578C48.55,13.9 49.242,13.472 50,13.472C50.758,13.472 51.45,13.9 51.789,14.578C54.793,20.587 60.795,32.589 63.553,38.106C63.863,38.726 63.83,39.462 63.465,40.051C63.101,40.641 62.457,41 61.764,41C55.996,41 44.004,41 38.236,41C37.543,41 36.899,40.641 36.535,40.051C36.17,39.462 36.137,38.726 36.447,38.106C39.205,32.589 45.207,20.587 48.211,14.578ZM50,34.417C51.426,34.417 52.583,35.574 52.583,37C52.583,38.426 51.426,39.583 50,39.583C48.574,39.583 47.417,38.426 47.417,37C47.417,35.574 48.574,34.417 50,34.417ZM50,32.75C50,32.75 53,31.805 53,22.25C53,20.594 51.656,19.25 50,19.25C48.344,19.25 47,20.594 47,22.25C47,31.805 50,32.75 50,32.75Z"})}),(0,e.jsx)("g",{children:(0,e.jsx)("circle",{className:"RoundGauge__ringTrack",cx:"50",cy:"50",r:"45"})}),(0,e.jsx)("g",{children:Object.keys(f).map((a,s)=>{let r=f[a];return(0,e.jsx)("circle",{className:`RoundGauge__ringFill RoundGauge--color--${a}`,cx:"50",cy:"50",r:"45",style:{strokeDashoffset:Math.max((2-(r[1]-r[0]))*Math.PI*50,0)},transform:`rotate(${180+180*r[0]} 50 50)`},s)})}),(0,e.jsxs)("g",{className:"RoundGauge__needle",transform:`rotate(${180*_-90} 50 50)`,children:[(0,e.jsx)("polygon",{className:"RoundGauge__needleLine",points:"46,50 50,0 54,50"}),(0,e.jsx)("circle",{className:"RoundGauge__needleMiddle",cx:"50",cy:"50",r:"8"})]}),(0,e.jsx)("title",{children:"alert"})]})}),(0,e.jsx)(o.AnimatedNumber,{format:m,value:j})]})}export{c as RoundGauge};

package/dist/components/Section.d.ts

@@ -28,6 +28,7 @@ type Props = Partial<{
 }> & BoxProps;
 /**
  * ## Section
+ *
  * Section is a surface that displays content and actions on a single topic.
  *
  * They should be easy to scan for relevant and actionable information.
@@ -40,6 +41,8 @@ type Props = Partial<{
  *
  * Section can also be titled to clearly define its purpose.
  *
+ * Example:
+ *
  * ```tsx
  * <Section title="Cargo">Here you can order supply crates.</Section>
  * ```
@@ -47,11 +50,15 @@ type Props = Partial<{
  * If you want to have a button on the right side of an section title
  * (for example, to perform some sort of action), there is a way to do that:
  *
+ * Example:
+ *
  * ```tsx
  * <Section title="Cargo" buttons={<Button>Send shuttle</Button>}>
  *   Here you can order supply crates.
  * </Section>
  * ```
+ *
+ * - [View documentation on tgui core](https://tgstation.github.io/tgui-core/?path=/docs/components-section--docs)
  */
 export declare function Section(props: Props): import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/components/Section.js

@@ -1 +1 @@
-import*as e from"react/jsx-runtime";import*as t from"react";import*as o from"../common/events.js";import*as c from"../common/react.js";import*as n from"../common/ui.js";function s(s){let{buttons:r,children:i,className:l,container_id:a="",fill:m,fitted:d,flexGrow:S,noTopPadding:u,onScroll:_,ref:f,scrollable:x,scrollableHorizontal:p,stretchContents:j,title:N,...h}=s,v=(0,c.canRender)(N)||(0,c.canRender)(r),b=(0,t.useRef)(null),R=f??b;return(0,t.useEffect)(()=>(R.current&&(x||p)&&(0,o.addScrollableNode)(R.current),()=>{R.current&&(0,o.removeScrollableNode)(R.current)}),[]),(0,e.jsxs)("div",{id:a,className:(0,c.classes)(["Section",m&&"Section--fill",d&&"Section--fitted",x&&"Section--scrollable",p&&"Section--scrollableHorizontal",S&&"Section--flex",l,(0,n.computeBoxClassName)(h)]),...(0,n.computeBoxProps)(h),children:[v&&(0,e.jsxs)("div",{className:"Section__title",children:[(0,e.jsx)("span",{className:"Section__titleText",children:N}),(0,e.jsx)("div",{className:"Section__buttons",children:r})]}),(0,e.jsx)("div",{className:"Section__rest",children:(0,e.jsx)("div",{className:(0,c.classes)(["Section__content",j&&"Section__content--stretchContents",u&&"Section__content--noTopPadding"]),onScroll:_,ref:R,children:i})})]})}export{s as Section};
+import*as e from"react/jsx-runtime";import*as t from"react";import*as o from"../common/events.js";import*as c from"../common/react.js";import*as n from"../common/ui.js";function s(s){let{buttons:r,children:i,className:l,container_id:a="",fill:m,fitted:d,flexGrow:S,noTopPadding:u,onScroll:_,ref:f,scrollable:x,scrollableHorizontal:p,stretchContents:j,title:N,...h}=s,v=(0,c.canRender)(N)||(0,c.canRender)(r),b=(0,t.useRef)(null),R=f??b;return(0,t.useEffect)(()=>(R.current&&(x||p)&&(0,o.addScrollableNode)(R.current),()=>{R.current&&(0,o.removeScrollableNode)(R.current)}),[]),(0,e.jsxs)("div",{className:(0,c.classes)(["Section",m&&"Section--fill",d&&"Section--fitted",x&&"Section--scrollable",p&&"Section--scrollableHorizontal",S&&"Section--flex",l,(0,n.computeBoxClassName)(h)]),id:a,...(0,n.computeBoxProps)(h),children:[v&&(0,e.jsxs)("div",{className:"Section__title",children:[(0,e.jsx)("span",{className:"Section__titleText",children:N}),(0,e.jsx)("div",{className:"Section__buttons",children:r})]}),(0,e.jsx)("div",{className:"Section__rest",children:(0,e.jsx)("div",{className:(0,c.classes)(["Section__content",j&&"Section__content--stretchContents",u&&"Section__content--noTopPadding"]),onScroll:_,ref:R,children:i})})]})}export{s as Section};

package/dist/components/Slider.d.ts

@@ -47,10 +47,14 @@ type Props = {
 }> & BoxProps & PropsWithChildren;
 /**
  * ## Slider
- * A horizontal, [ProgressBar](https://github.com/tgstation/tgui-core/tree/main/lib/components/Progressbar.tsx)-like
+ *
+ * A horizontal,
+ * [ProgressBar](https://tgstation.github.io/tgui-core/?path=/docs/components-progressbar--docs)-like
  * control which allows dialing * in precise values by dragging it left and right.
  *
  * 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-slider--docs)
  */
 export declare function Slider(props: Props): import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/components/Slider.js

@@ -1 +1 @@
-import*as s from"react/jsx-runtime";import*as r from"../common/math.js";import*as e from"../common/react.js";import*as a from"../common/ui.js";import*as l from"./DraggableControl.js";function o(o){let{animated:i,format:t,maxValue:c,minValue:m,onChange:d,onDrag:n,step:p,stepPixelSize:_,unit:j,value:u,className:x,fillValue:f,color:g,ranges:h={},children:v,...N}=o,B=void 0!==v;return(0,s.jsx)(l.DraggableControl,{dragMatrix:[1,0],animated:i,format:t,maxValue:c,minValue:m,onChange:d,onDrag:n,step:p,stepPixelSize:_,unit:j,value:u,children:l=>{let{displayElement:o,displayValue:i,dragging:t,handleDragStart:d,inputElement:n}=l,p=null!=f,_=(0,r.scale)(f??i,m,c),j=(0,r.scale)(i,m,c),P=g||(0,r.keyOfMatchingRange)(f??u,h)||"default";return(0,s.jsxs)("div",{className:(0,e.classes)(["Slider","ProgressBar",`ProgressBar--color--${P}`,x,(0,a.computeBoxClassName)(N)]),...(0,a.computeBoxProps)(N),onMouseDown:d,children:[(0,s.jsx)("div",{className:(0,e.classes)(["ProgressBar__fill",p&&"ProgressBar__fill--animated"]),style:{width:`${100*(0,r.clamp01)(_)}%`,opacity:.4}}),(0,s.jsx)("div",{className:"ProgressBar__fill",style:{width:`${100*(0,r.clamp01)(Math.min(_,j))}%`}}),(0,s.jsxs)("div",{className:"Slider__cursorOffset",style:{width:`${100*(0,r.clamp01)(j)}%`},children:[(0,s.jsx)("div",{className:"Slider__cursor"}),(0,s.jsx)("div",{className:"Slider__pointer"}),t&&(0,s.jsx)("div",{className:"Slider__popupValue",children:o})]}),(0,s.jsx)("div",{className:"ProgressBar__content",children:B?v:o}),n]})}})}export{o as Slider};
+import*as s from"react/jsx-runtime";import*as r from"../common/math.js";import*as e from"../common/react.js";import*as a from"../common/ui.js";import*as l from"./DraggableControl.js";function o(o){let{animated:i,format:t,maxValue:c,minValue:m,onChange:d,onDrag:n,step:p,stepPixelSize:_,unit:j,value:u,className:x,fillValue:f,color:g,ranges:h={},children:v,...N}=o,B=void 0!==v;return(0,s.jsx)(l.DraggableControl,{dragMatrix:[1,0],animated:i,format:t,maxValue:c,minValue:m,onChange:d,onDrag:n,step:p,stepPixelSize:_,unit:j,value:u,children:l=>{let{displayElement:o,displayValue:i,dragging:t,handleDragStart:d,inputElement:n}=l,p=null!=f,_=(0,r.scale)(f??i,m,c),j=(0,r.scale)(i,m,c),P=g||(0,r.keyOfMatchingRange)(f??u,h)||"default";return(0,s.jsxs)("div",{className:(0,e.classes)(["Slider","ProgressBar",`ProgressBar--color--${P}`,x,(0,a.computeBoxClassName)(N)]),...(0,a.computeBoxProps)(N),onMouseDown:d,children:[(0,s.jsx)("div",{className:(0,e.classes)(["ProgressBar__fill",p&&"ProgressBar__fill--animated"]),style:{opacity:.4,width:`${100*(0,r.clamp01)(_)}%`}}),(0,s.jsx)("div",{className:"ProgressBar__fill",style:{width:`${100*(0,r.clamp01)(Math.min(_,j))}%`}}),(0,s.jsxs)("div",{className:"Slider__cursorOffset",style:{width:`${100*(0,r.clamp01)(j)}%`},children:[(0,s.jsx)("div",{className:"Slider__cursor"}),(0,s.jsx)("div",{className:"Slider__pointer"}),t&&(0,s.jsx)("div",{className:"Slider__popupValue",children:o})]}),(0,s.jsx)("div",{className:"ProgressBar__content",children:B?v:o}),n]})}})}export{o as Slider};

package/dist/components/Stack.d.ts

@@ -12,8 +12,9 @@ type Props = Partial<{
 }> & FlexProps;
 /**
  * ## Stack
+ *
  * A higher-level component that is based on
- * [Flex](https://github.com/tgstation/tgui-core/tree/main/lib/components/Flex.tsx).
+ * [Flex](https://tgstation.github.io/tgui-core/?path=/docs/components-flex--docs).
  *
  * The main difference from `Flex`, is that this component automatically adds
  * spacing between all stack items, reducing the boilerplate that you have to write!
@@ -22,7 +23,8 @@ type Props = Partial<{
  *
  * Stacks can be vertical by adding a `vertical` property.
  *
- * @example
+ * Example:
+ *
  * ```tsx
  * <Stack vertical>
  *   <Stack.Item grow>Button description</Stack.Item>
@@ -36,7 +38,8 @@ type Props = Partial<{
  * Stacks can be used for high level window layout.
  * Make sure to use the `fill` property.
  *
- * @example
+ * Example:
+ *
  * ```tsx
  * <Window>
  *   <Window.Content>
@@ -60,6 +63,8 @@ type Props = Partial<{
  *   </Window.Content>
  * </Window>
  * ```
+ *
+ * - [View documentation on tgui core](https://tgstation.github.io/tgui-core/?path=/docs/components-stack--docs)
  */
 export declare function Stack(props: Props): import("react/jsx-runtime").JSX.Element;
 export declare namespace Stack {