tgui-core 3.1.4 → 3.2.0

package/README.md

@@ -74,3 +74,9 @@ This project uses [pnpm](https://pnpm.io/installation) for its package manager.
 
 To set up the repository:
 `pnpm install`
+
+To test your changes using [Storybook](https://storybook.js.org/docs) run:
+`pnpm run storybook`
+
+To run unit tests run
+`pnpm test`

package/dist/common/color.js

@@ -1 +1 @@
-class t{r;g;b;a;constructor(t=0,r=0,e=0,s=1){this.r=t,this.g=r,this.b=e,this.a=s}toString(){let t=this.a;return"string"==typeof t&&(t=Number.parseFloat(this.a)),Number.isNaN(t)&&(t=1),`rgba(${0|this.r}, ${0|this.g}, ${0|this.b}, ${t})`}darken(r){let e=r/100;return new t(this.r-this.r*e,this.g-this.g*e,this.b-this.b*e,this.a)}lighten(t){return this.darken(-t)}static fromHex(r){return new t(Number.parseInt(r.slice(1,3),16),Number.parseInt(r.slice(3,5),16),Number.parseInt(r.slice(5,7),16))}static lerp(r,e,s){return new t((e.r-r.r)*s+r.r,(e.g-r.g)*s+r.g,(e.b-r.b)*s+r.b,(e.a-r.a)*s+r.a)}static lookup(r,e){let s=e.length;if(s<2)throw Error("Needs at least two colors!");let i=r*(s-1);if(r<1e-4)return e[0];if(r>=.9999)return e[s-1];let a=0|i;return t.lerp(e[a],e[a+1],i%1)}}export{t as Color};
+class r{r;g;b;a;constructor(r=0,t=0,e=0,s=1){this.r=r,this.g=t,this.b=e,this.a=s}toString(){let r=this.a;return"string"==typeof r&&(r=Number.parseFloat(this.a)),Number.isNaN(r)&&(r=1),`rgba(${0|this.r}, ${0|this.g}, ${0|this.b}, ${r})`}darken(t){let e=t/100;return new r(this.r-this.r*e,this.g-this.g*e,this.b-this.b*e,this.a)}lighten(r){return this.darken(-r)}static fromHex(t){if(7===t.length)return new r(Number.parseInt(t.slice(1,3),16),Number.parseInt(t.slice(3,5),16),Number.parseInt(t.slice(5,7),16));if(9===t.length)return new r(Number.parseInt(t.slice(1,3),16),Number.parseInt(t.slice(3,5),16),Number.parseInt(t.slice(5,7),16),Number.parseInt(t.slice(7,9),16)/256);throw Error("Invalid hex color format. Expected #RRGGBB or #RRGGBBAA.")}static lerp(t,e,s){return new r((e.r-t.r)*s+t.r,(e.g-t.g)*s+t.g,(e.b-t.b)*s+t.b,(e.a-t.a)*s+t.a)}static lookup(t,e){let s=e.length;if(s<2)throw Error("Needs at least two colors!");let i=t*(s-1);if(t<1e-4)return e[0];if(t>=.9999)return e[s-1];let n=0|i;return r.lerp(e[n],e[n+1],i%1)}}export{r as Color};

package/dist/common/constants.d.ts

@@ -10,22 +10,22 @@ export declare const UI_UPDATE = 1;
 export declare const UI_DISABLED = 0;
 export declare const UI_CLOSE = -1;
 export declare const COLORS: {
+    readonly damageType: {
+        readonly brute: "#e74c3c";
+        readonly burn: "#e67e22";
+        readonly oxy: "#3498db";
+        readonly toxin: "#2ecc71";
+    };
     readonly department: {
         readonly captain: "#c06616";
-        readonly security: "#e74c3c";
-        readonly medbay: "#3498db";
-        readonly science: "#9b59b6";
-        readonly engineering: "#f1c40f";
         readonly cargo: "#f39c12";
-        readonly service: "#7cc46a";
         readonly centcom: "#00c100";
+        readonly engineering: "#f1c40f";
+        readonly medbay: "#3498db";
         readonly other: "#c38312";
-    };
-    readonly damageType: {
-        readonly oxy: "#3498db";
-        readonly toxin: "#2ecc71";
-        readonly burn: "#e67e22";
-        readonly brute: "#e74c3c";
+        readonly science: "#9b59b6";
+        readonly security: "#e74c3c";
+        readonly service: "#7cc46a";
     };
     readonly reagent: {
         readonly acidicbuffer: "#fbc314";
@@ -35,72 +35,72 @@ export declare const COLORS: {
 export declare const CSS_COLORS: readonly ["average", "bad", "black", "blue", "brown", "good", "green", "grey", "label", "olive", "orange", "pink", "purple", "red", "teal", "transparent", "violet", "white", "yellow"];
 export type CssColor = (typeof CSS_COLORS)[number];
 export declare const RADIO_CHANNELS: readonly [{
-    readonly name: "Syndicate";
-    readonly freq: 1213;
     readonly color: "#8f4a4b";
+    readonly freq: 1213;
+    readonly name: "Syndicate";
 }, {
-    readonly name: "Red Team";
-    readonly freq: 1215;
     readonly color: "#ff4444";
+    readonly freq: 1215;
+    readonly name: "Red Team";
 }, {
-    readonly name: "Blue Team";
-    readonly freq: 1217;
     readonly color: "#3434fd";
+    readonly freq: 1217;
+    readonly name: "Blue Team";
 }, {
-    readonly name: "Green Team";
-    readonly freq: 1219;
     readonly color: "#34fd34";
+    readonly freq: 1219;
+    readonly name: "Green Team";
 }, {
-    readonly name: "Yellow Team";
-    readonly freq: 1221;
     readonly color: "#fdfd34";
+    readonly freq: 1221;
+    readonly name: "Yellow Team";
 }, {
-    readonly name: "CentCom";
-    readonly freq: 1337;
     readonly color: "#2681a5";
+    readonly freq: 1337;
+    readonly name: "CentCom";
 }, {
-    readonly name: "Supply";
-    readonly freq: 1347;
     readonly color: "#b88646";
+    readonly freq: 1347;
+    readonly name: "Supply";
 }, {
-    readonly name: "Service";
-    readonly freq: 1349;
     readonly color: "#6ca729";
+    readonly freq: 1349;
+    readonly name: "Service";
 }, {
-    readonly name: "Science";
-    readonly freq: 1351;
     readonly color: "#c68cfa";
+    readonly freq: 1351;
+    readonly name: "Science";
 }, {
-    readonly name: "Command";
-    readonly freq: 1353;
     readonly color: "#fcdf03";
+    readonly freq: 1353;
+    readonly name: "Command";
 }, {
-    readonly name: "Medical";
-    readonly freq: 1355;
     readonly color: "#57b8f0";
+    readonly freq: 1355;
+    readonly name: "Medical";
 }, {
-    readonly name: "Engineering";
-    readonly freq: 1357;
     readonly color: "#f37746";
+    readonly freq: 1357;
+    readonly name: "Engineering";
 }, {
-    readonly name: "Security";
-    readonly freq: 1359;
     readonly color: "#dd3535";
+    readonly freq: 1359;
+    readonly name: "Security";
 }, {
-    readonly name: "AI Private";
-    readonly freq: 1447;
     readonly color: "#d65d95";
+    readonly freq: 1447;
+    readonly name: "AI Private";
 }, {
-    readonly name: "Common";
-    readonly freq: 1459;
     readonly color: "#1ecc43";
+    readonly freq: 1459;
+    readonly name: "Common";
 }];
 export declare function getGasLabel(gasId: string, fallbackValue?: string): string;
 export declare function getGasColor(gasId: string): string;
 export declare const getGasFromId: (gasId: string) => Gas | undefined;
 export declare const getGasFromPath: (gasPath: string) => Gas | undefined;
 export declare const COMPONENT_COLORS: {
-    readonly states: readonly ["", "good", "average", "bad", "black", "white"];
     readonly spectrum: readonly ["red", "orange", "yellow", "olive", "green", "teal", "blue", "violet", "purple", "pink", "brown", "grey", "gold"];
+    readonly states: readonly ["", "good", "average", "bad", "black", "white"];
 };
 export {};

package/dist/common/constants.js

@@ -1 +1 @@
-let e=2,a=1,o=0,r=-1,l={department:{captain:"#c06616",security:"#e74c3c",medbay:"#3498db",science:"#9b59b6",engineering:"#f1c40f",cargo:"#f39c12",service:"#7cc46a",centcom:"#00c100",other:"#c38312"},damageType:{oxy:"#3498db",toxin:"#2ecc71",burn:"#e67e22",brute:"#e74c3c"},reagent:{acidicbuffer:"#fbc314",basicbuffer:"#3853a4"}},t=["average","bad","black","blue","brown","good","green","grey","label","olive","orange","pink","purple","red","teal","transparent","violet","white","yellow"],i=[{name:"Syndicate",freq:1213,color:"#8f4a4b"},{name:"Red Team",freq:1215,color:"#ff4444"},{name:"Blue Team",freq:1217,color:"#3434fd"},{name:"Green Team",freq:1219,color:"#34fd34"},{name:"Yellow Team",freq:1221,color:"#fdfd34"},{name:"CentCom",freq:1337,color:"#2681a5"},{name:"Supply",freq:1347,color:"#b88646"},{name:"Service",freq:1349,color:"#6ca729"},{name:"Science",freq:1351,color:"#c68cfa"},{name:"Command",freq:1353,color:"#fcdf03"},{name:"Medical",freq:1355,color:"#57b8f0"},{name:"Engineering",freq:1357,color:"#f37746"},{name:"Security",freq:1359,color:"#dd3535"},{name:"AI Private",freq:1447,color:"#d65d95"},{name:"Common",freq:1459,color:"#1ecc43"}],n=[{id:"o2",path:"/datum/gas/oxygen",name:"Oxygen",label:"O₂",color:"blue"},{id:"n2",path:"/datum/gas/nitrogen",name:"Nitrogen",label:"N₂",color:"yellow"},{id:"co2",path:"/datum/gas/carbon_dioxide",name:"Carbon Dioxide",label:"CO₂",color:"grey"},{id:"plasma",path:"/datum/gas/plasma",name:"Plasma",label:"Plasma",color:"pink"},{id:"water_vapor",path:"/datum/gas/water_vapor",name:"Water Vapor",label:"H₂O",color:"lightsteelblue"},{id:"hypernoblium",path:"/datum/gas/hypernoblium",name:"Hyper-noblium",label:"Hyper-nob",color:"teal"},{id:"n2o",path:"/datum/gas/nitrous_oxide",name:"Nitrous Oxide",label:"N₂O",color:"bisque"},{id:"no2",path:"/datum/gas/nitrium",name:"Nitrium",label:"Nitrium",color:"brown"},{id:"tritium",path:"/datum/gas/tritium",name:"Tritium",label:"Tritium",color:"limegreen"},{id:"bz",path:"/datum/gas/bz",name:"BZ",label:"BZ",color:"mediumpurple"},{id:"pluoxium",path:"/datum/gas/pluoxium",name:"Pluoxium",label:"Pluoxium",color:"mediumslateblue"},{id:"miasma",path:"/datum/gas/miasma",name:"Miasma",label:"Miasma",color:"olive"},{id:"freon",path:"/datum/gas/freon",name:"Freon",label:"Freon",color:"paleturquoise"},{id:"hydrogen",path:"/datum/gas/hydrogen",name:"Hydrogen",label:"H₂",color:"white"},{id:"healium",path:"/datum/gas/healium",name:"Healium",label:"Healium",color:"salmon"},{id:"proto_nitrate",path:"/datum/gas/proto_nitrate",name:"Proto Nitrate",label:"Proto-Nitrate",color:"greenyellow"},{id:"zauker",path:"/datum/gas/zauker",name:"Zauker",label:"Zauker",color:"darkgreen"},{id:"halon",path:"/datum/gas/halon",name:"Halon",label:"Halon",color:"purple"},{id:"helium",path:"/datum/gas/helium",name:"Helium",label:"He",color:"aliceblue"},{id:"antinoblium",path:"/datum/gas/antinoblium",name:"Antinoblium",label:"Anti-Noblium",color:"maroon"},{id:"nitrium",path:"/datum/gas/nitrium",name:"Nitrium",label:"Nitrium",color:"brown"}];function m(e,a){if(!e)return a||"None";let o=e.toLowerCase();for(let e=0;e<n.length;e++)if(n[e].id===o)return n[e].label;return a||"None"}function u(e){if(!e)return"black";let a=e.toLowerCase();for(let e=0;e<n.length;e++)if(n[e].id===a)return n[e].color;return"black"}let c=e=>{if(!e)return;let a=e.toLowerCase();for(let e=0;e<n.length;e++)if(n[e].id===a)return n[e]},d=e=>{if(e){for(let a=0;a<n.length;a++)if(n[a].path===e)return n[a]}},b={states:["","good","average","bad","black","white"],spectrum:["red","orange","yellow","olive","green","teal","blue","violet","purple","pink","brown","grey","gold"]};export{l as COLORS,b as COMPONENT_COLORS,t as CSS_COLORS,i as RADIO_CHANNELS,r as UI_CLOSE,o as UI_DISABLED,e as UI_INTERACTIVE,a as UI_UPDATE,u as getGasColor,c as getGasFromId,d as getGasFromPath,m as getGasLabel};
+let e=2,a=1,o=0,r=-1,l={damageType:{brute:"#e74c3c",burn:"#e67e22",oxy:"#3498db",toxin:"#2ecc71"},department:{captain:"#c06616",cargo:"#f39c12",centcom:"#00c100",engineering:"#f1c40f",medbay:"#3498db",other:"#c38312",science:"#9b59b6",security:"#e74c3c",service:"#7cc46a"},reagent:{acidicbuffer:"#fbc314",basicbuffer:"#3853a4"}},t=["average","bad","black","blue","brown","good","green","grey","label","olive","orange","pink","purple","red","teal","transparent","violet","white","yellow"],i=[{color:"#8f4a4b",freq:1213,name:"Syndicate"},{color:"#ff4444",freq:1215,name:"Red Team"},{color:"#3434fd",freq:1217,name:"Blue Team"},{color:"#34fd34",freq:1219,name:"Green Team"},{color:"#fdfd34",freq:1221,name:"Yellow Team"},{color:"#2681a5",freq:1337,name:"CentCom"},{color:"#b88646",freq:1347,name:"Supply"},{color:"#6ca729",freq:1349,name:"Service"},{color:"#c68cfa",freq:1351,name:"Science"},{color:"#fcdf03",freq:1353,name:"Command"},{color:"#57b8f0",freq:1355,name:"Medical"},{color:"#f37746",freq:1357,name:"Engineering"},{color:"#dd3535",freq:1359,name:"Security"},{color:"#d65d95",freq:1447,name:"AI Private"},{color:"#1ecc43",freq:1459,name:"Common"}],n=[{color:"blue",id:"o2",label:"O₂",name:"Oxygen",path:"/datum/gas/oxygen"},{color:"yellow",id:"n2",label:"N₂",name:"Nitrogen",path:"/datum/gas/nitrogen"},{color:"grey",id:"co2",label:"CO₂",name:"Carbon Dioxide",path:"/datum/gas/carbon_dioxide"},{color:"pink",id:"plasma",label:"Plasma",name:"Plasma",path:"/datum/gas/plasma"},{color:"lightsteelblue",id:"water_vapor",label:"H₂O",name:"Water Vapor",path:"/datum/gas/water_vapor"},{color:"teal",id:"hypernoblium",label:"Hyper-nob",name:"Hyper-noblium",path:"/datum/gas/hypernoblium"},{color:"bisque",id:"n2o",label:"N₂O",name:"Nitrous Oxide",path:"/datum/gas/nitrous_oxide"},{color:"brown",id:"no2",label:"Nitrium",name:"Nitrium",path:"/datum/gas/nitrium"},{color:"limegreen",id:"tritium",label:"Tritium",name:"Tritium",path:"/datum/gas/tritium"},{color:"mediumpurple",id:"bz",label:"BZ",name:"BZ",path:"/datum/gas/bz"},{color:"mediumslateblue",id:"pluoxium",label:"Pluoxium",name:"Pluoxium",path:"/datum/gas/pluoxium"},{color:"olive",id:"miasma",label:"Miasma",name:"Miasma",path:"/datum/gas/miasma"},{color:"paleturquoise",id:"freon",label:"Freon",name:"Freon",path:"/datum/gas/freon"},{color:"white",id:"hydrogen",label:"H₂",name:"Hydrogen",path:"/datum/gas/hydrogen"},{color:"salmon",id:"healium",label:"Healium",name:"Healium",path:"/datum/gas/healium"},{color:"greenyellow",id:"proto_nitrate",label:"Proto-Nitrate",name:"Proto Nitrate",path:"/datum/gas/proto_nitrate"},{color:"darkgreen",id:"zauker",label:"Zauker",name:"Zauker",path:"/datum/gas/zauker"},{color:"purple",id:"halon",label:"Halon",name:"Halon",path:"/datum/gas/halon"},{color:"aliceblue",id:"helium",label:"He",name:"Helium",path:"/datum/gas/helium"},{color:"maroon",id:"antinoblium",label:"Anti-Noblium",name:"Antinoblium",path:"/datum/gas/antinoblium"},{color:"brown",id:"nitrium",label:"Nitrium",name:"Nitrium",path:"/datum/gas/nitrium"}];function m(e,a){if(!e)return a||"None";let o=e.toLowerCase();for(let e=0;e<n.length;e++)if(n[e].id===o)return n[e].label;return a||"None"}function u(e){if(!e)return"black";let a=e.toLowerCase();for(let e=0;e<n.length;e++)if(n[e].id===a)return n[e].color;return"black"}let c=e=>{if(!e)return;let a=e.toLowerCase();for(let e=0;e<n.length;e++)if(n[e].id===a)return n[e]},d=e=>{if(e){for(let a=0;a<n.length;a++)if(n[a].path===e)return n[a]}},b={spectrum:["red","orange","yellow","olive","green","teal","blue","violet","purple","pink","brown","grey","gold"],states:["","good","average","bad","black","white"]};export{l as COLORS,b as COMPONENT_COLORS,t as CSS_COLORS,i as RADIO_CHANNELS,r as UI_CLOSE,o as UI_DISABLED,e as UI_INTERACTIVE,a as UI_UPDATE,u as getGasColor,c as getGasFromId,d as getGasFromPath,m as getGasLabel};

package/dist/common/fp.d.ts

@@ -4,7 +4,8 @@ type Func = (...args: any[]) => any;
  * functions, where each successive invocation is supplied the return
  * value of the previous.
  *
- * @example
+ * Example:
+ *
  * ```tsx
  * const add2 = (x) => x + 2;
  * const multiplyBy3 = (x) => x * 3;

package/dist/common/fuzzysearch.d.ts

@@ -0,0 +1,22 @@
+interface UseFuzzySearchProps<T> {
+    /** An input array to match */
+    searchArray: T[];
+    /**
+     * The matching strategy to use. `off` - don't use fuzzy search.
+     * `smart` - ignore low density matches. `agressive` - accept
+     * any match avaliable. Defaults to 'smart' if not set.
+     */
+    matchStrategy?: 'off' | 'smart' | 'aggressive';
+    /** The input string to match */
+    getSearchString: (item: T) => string;
+}
+/**
+ * A simple hook prooviding fuzzy searching - approximate rather
+ * than exact pattern matching.
+ */
+export declare function useFuzzySearch<T>({ searchArray, matchStrategy, getSearchString, }: UseFuzzySearchProps<T>): {
+    query: string;
+    setQuery: (value: string) => void;
+    results: T[];
+};
+export {};

package/dist/common/fuzzysearch.js

@@ -0,0 +1 @@
+import*as t from"@nozbe/microfuzz";import*as e from"react";function r({searchArray:r,matchStrategy:a="smart",getSearchString:u}){let[o,i]=(0,e.useState)(""),[m,s]=(0,e.useState)([]),f=(0,e.useCallback)((0,t.default)(r,{getText:t=>[u(t)],strategy:a}),[r,u]);return{query:o,setQuery:function(t){if(i(t),""===t.trim())return void s([]);s(f(t).map(t=>t.item))},results:m}}export{r as useFuzzySearch};

package/dist/common/hotkeys.d.ts

@@ -10,6 +10,8 @@ export declare function acquireHotKey(keyCode: number): void;
 export declare function releaseHotKey(keyCode: number): void;
 export declare function releaseHeldKeys(): void;
 export declare function setupHotKeys(): void;
+export declare function startKeyPassthrough(): void;
+export declare function stopKeyPassthrough(): void;
 /**
  * Registers for any key events, such as key down or key up.
  * This should be preferred over directly connecting to keydown/keyup

package/dist/common/hotkeys.js

@@ -1 +1 @@
-import*as e from"./events.js";import*as t from"./keycodes.js";let o={},n=[t.KEY_ESCAPE,t.KEY_ENTER,t.KEY_SPACE,t.KEY_TAB,t.KEY_CTRL,t.KEY_SHIFT,t.KEY_UP,t.KEY_DOWN,t.KEY_LEFT,t.KEY_RIGHT,t.KEY_F5],l={},r=[];function i(e){n.push(e)}function s(e){let t=n.indexOf(e);t>=0&&n.splice(t,1)}function d(){for(let e in l)l[e]&&(l[e]=!1,Byond.command(`${globalThis.ByondKeyUp} "${e}"`))}function a(){globalThis.ByondKeyUp||(globalThis.ByondKeyUp="KeyUp",globalThis.ByondKeyDown="KeyDown"),Byond.winget("default.*").then(e=>{let t={};for(let o in e){let n=o.split("."),l=n[1],r=n[2];l&&r&&(t[l]||(t[l]={}),t[l][r]=e[o])}let n=/\\"/g;function l(e){return e.substring(1,e.length-1).replace(n,'"')}for(let e in t){let n=t[e];o[l(n.name)]=l(n.command)}}),e.globalEvents.on("window-blur",()=>{d()}),e.globalEvents.on("key",e=>{for(let t of r)t(e);!function(e){var t;let r=String(e);if("Ctrl+F5"===r||"Ctrl+R"===r)return location.reload();if("Ctrl+F"===r||e.event.defaultPrevented||e.isModifierKey()||n.includes(e.code))return;let i=16===(t=e.code)?"Shift":17===t?"Ctrl":18===t?"Alt":33===t?"Northeast":34===t?"Southeast":35===t?"Southwest":36===t?"Northwest":37===t?"West":38===t?"North":39===t?"East":40===t?"South":45===t?"Insert":46===t?"Delete":t>=48&&t<=57||t>=65&&t<=90?String.fromCharCode(t):t>=96&&t<=105?`Numpad${t-96}`:t>=112&&t<=123?`F${t-111}`:188===t?",":189===t?"-":190===t?".":void 0;if(!i)return;let s=o[i];if(s)return Byond.command(s);if(e.isDown()&&!l[i]){l[i]=!0;let e=`${globalThis.ByondKeyDown} "${i}"`;return Byond.command(e)}if(e.isUp()&&l[i]){l[i]=!1;let e=`${globalThis.ByondKeyUp} "${i}"`;Byond.command(e)}}(e)})}function f(e){r.push(e);let t=!1;return()=>{t||(t=!0,r.splice(r.indexOf(e),1))}}export{i as acquireHotKey,f as listenForKeyEvents,d as releaseHeldKeys,s as releaseHotKey,a as setupHotKeys};
+import*as e from"./events.js";import*as t from"./keycodes.js";let o={},n=[t.KEY_ESCAPE,t.KEY_ENTER,t.KEY_SPACE,t.KEY_TAB,t.KEY_CTRL,t.KEY_SHIFT,t.KEY_UP,t.KEY_DOWN,t.KEY_LEFT,t.KEY_RIGHT,t.KEY_F5],l={},r=[];function i(e){n.push(e)}function s(e){let t=n.indexOf(e);t>=0&&n.splice(t,1)}function a(){for(let e in l)l[e]&&(l[e]=!1,Byond.command(`${globalThis.ByondKeyUp} "${e}"`))}function d(){globalThis.ByondKeyUp||(globalThis.ByondKeyUp="KeyUp",globalThis.ByondKeyDown="KeyDown"),Byond.winget("default.*").then(e=>{let t={};for(let o in e){let n=o.split("."),l=n[1],r=n[2];l&&r&&(t[l]||(t[l]={}),t[l][r]=e[o])}let n=/\\"/g;function l(e){return e.substring(1,e.length-1).replace(n,'"')}for(let e in t){let n=t[e];o[l(n.name)]=l(n.command)}}),e.globalEvents.on("window-blur",()=>{a()}),f()}function f(){e.globalEvents.on("key",y)}function u(){e.globalEvents.off("key",y)}function y(e){for(let t of r)t(e);!function(e){var t;let r=String(e);if("Ctrl+F5"===r||"Ctrl+R"===r)return location.reload();if("Ctrl+F"===r||e.event.defaultPrevented||e.isModifierKey()||n.includes(e.code))return;let i=16===(t=e.code)?"Shift":17===t?"Ctrl":18===t?"Alt":33===t?"Northeast":34===t?"Southeast":35===t?"Southwest":36===t?"Northwest":37===t?"West":38===t?"North":39===t?"East":40===t?"South":45===t?"Insert":46===t?"Delete":t>=48&&t<=57||t>=65&&t<=90?String.fromCharCode(t):t>=96&&t<=105?`Numpad${t-96}`:t>=112&&t<=123?`F${t-111}`:188===t?",":189===t?"-":190===t?".":void 0;if(!i)return;let s=o[i];if(s)return Byond.command(s);if(e.isDown()&&!l[i]){l[i]=!0;let e=`${globalThis.ByondKeyDown} "${i}"`;return Byond.command(e)}if(e.isUp()&&l[i]){l[i]=!1;let e=`${globalThis.ByondKeyUp} "${i}"`;Byond.command(e)}}(e)}function K(e){r.push(e);let t=!1;return()=>{t||(t=!0,r.splice(r.indexOf(e),1))}}export{i as acquireHotKey,K as listenForKeyEvents,a as releaseHeldKeys,s as releaseHotKey,d as setupHotKeys,f as startKeyPassthrough,u as stopKeyPassthrough};

package/dist/common/string.d.ts

@@ -1,7 +1,8 @@
 /**
  * Creates a search terms matcher. Returns true if given string matches the search text.
  *
- * @example
+ * Example:
+ *
  * ```tsx
  * type Thing = { id: string; name: string };
  *
@@ -23,7 +24,8 @@ export declare const VOWELS: string[];
  *
  * @param override - A custom string to be appended instead for plurals. Useful for words that don't follow the standard rules.
  *
- * @example
+ * Example:
+ *
  * ```tsx
  * pluralize('Dog', 1) // Dog
  * pluralize('Dog', 2) // Dogs
@@ -34,7 +36,8 @@ export declare function pluralize(str: string, n: number, override?: string): st
 /**
  * Capitalizes a word and lowercases the rest.
  *
- * @example
+ * Example:
+ *
  * ```tsx
  * capitalize('heLLo') // Hello
  * ```
@@ -44,7 +47,8 @@ export declare function capitalize(str: string): string;
  * Similar to capitalize, this takes a string and replaces all first letters
  * of any words.
  *
- * @example
+ * Example:
+ *
  * ```tsx
  * capitalizeAll('heLLo woRLd') // 'HeLLo WoRLd'
  * ```
@@ -53,7 +57,8 @@ export declare function capitalizeAll(str: string): string;
 /**
  * Capitalizes only the first letter of the str, leaving others untouched.
  *
- * @example
+ * Example:
+ *
  * ```tsx
  * capitalizeFirst('heLLo woRLd') // 'HeLLo woRLd'
  * ```
@@ -62,7 +67,8 @@ export declare function capitalizeFirst(str: string): string;
 /**
  * Converts a string to title case.
  *
- * @example
+ * Example:
+ *
  * ```tsx
  * toTitleCase('a tale of two cities') // 'A Tale of Two Cities'
  * ```
@@ -71,7 +77,8 @@ export declare function toTitleCase(str: string): string;
 /**
  * Decodes HTML entities and removes unnecessary HTML tags.
  *
- * @example
+ * Example:
+ *
  * ```tsx
  * decodeHtmlEntities('&') // returns '&'
  * decodeHtmlEntities('&lt;') // returns '<'

package/dist/common/string.js

@@ -1 +1 @@
-function e(t,r=e=>JSON.stringify(e)){let n=t.toLowerCase().trim();return e=>{if(!n)return!0;let t=r(e);return!!t&&t.toLowerCase().includes(n)}}let t=["a","e","i","o","u"];function r(e,r,n){return 1===r?e:n?e+n:e.endsWith("s")||e.endsWith("x")||e.endsWith("z")||e.endsWith("ch")||e.endsWith("sh")?`${e}es`:e.endsWith("y")&&!t.includes(e.charAt(e.length-2))?`${e.slice(0,-1)}ies`:`${e}s`}function n(e){return e.charAt(0).toUpperCase()+e.slice(1).toLowerCase()}function o(e){return e.replace(/(^\w{1})|(\s+\w{1})/g,e=>e.toUpperCase())}function a(e){return e.replace(/^\w/,e=>e.toUpperCase())}let i=["Id","Tv"],s=["A","An","And","As","At","But","By","For","For","From","In","Into","Near","Nor","Of","On","Onto","Or","The","To","With"];function l(e){if(!e)return e;let t=e.replace(/([^\W_]+[^\s-]*) */g,e=>n(e));for(let e of s){let r=RegExp(`\\s${e}\\s`,"g");t=t.replace(r,e=>e.toLowerCase())}for(let e of i){let r=RegExp(`\\b${e}\\b`,"g");t=t.replace(r,e=>e.toLowerCase())}return t}let p=/&(nbsp|amp|quot|lt|gt|apos|trade|copy);/g,c={amp:"&",apos:"'",gt:">",lt:"<",nbsp:" ",quot:'"',trade:"™",cops:"\xa9"};function u(e){return e?e.replace(/<br>/gi,"\n").replace(/<\/?[a-z0-9-_]+[^>]*>/gi,"").replace(p,(e,t)=>c[t]).replace(/&#?([0-9]+);/gi,(e,t)=>String.fromCharCode(Number.parseInt(t,10))).replace(/&#x?([0-9a-f]+);/gi,(e,t)=>String.fromCharCode(Number.parseInt(t,16))):e}export{t as VOWELS,n as capitalize,o as capitalizeAll,a as capitalizeFirst,e as createSearch,u as decodeHtmlEntities,r as pluralize,l as toTitleCase};
+function e(t,r=e=>JSON.stringify(e)){let n=t.toLowerCase().trim();return e=>{if(!n)return!0;let t=r(e);return!!t&&t.toLowerCase().includes(n)}}let t=["a","e","i","o","u"];function r(e,r,n){return 1===r?e:n?e+n:e.endsWith("s")||e.endsWith("x")||e.endsWith("z")||e.endsWith("ch")||e.endsWith("sh")?`${e}es`:e.endsWith("y")&&!t.includes(e.charAt(e.length-2))?`${e.slice(0,-1)}ies`:`${e}s`}function n(e){return e.charAt(0).toUpperCase()+e.slice(1).toLowerCase()}function o(e){return e.replace(/(^\w{1})|(\s+\w{1})/g,e=>e.toUpperCase())}function a(e){return e.replace(/^\w/,e=>e.toUpperCase())}let i=["Id","Tv"],s=["A","An","And","As","At","But","By","For","For","From","In","Into","Near","Nor","Of","On","Onto","Or","The","To","With"];function l(e){if(!e)return e;let t=e.replace(/([^\W_]+[^\s-]*) */g,e=>n(e));for(let e of s){let r=RegExp(`\\s${e}\\s`,"g");t=t.replace(r,e=>e.toLowerCase())}for(let e of i){let r=RegExp(`\\b${e}\\b`,"g");t=t.replace(r,e=>e.toLowerCase())}return t}let p=/&(nbsp|amp|quot|lt|gt|apos|trade|copy);/g,c={amp:"&",apos:"'",cops:"\xa9",gt:">",lt:"<",nbsp:" ",quot:'"',trade:"™"};function u(e){return e?e.replace(/<br>/gi,"\n").replace(/<\/?[a-z0-9-_]+[^>]*>/gi,"").replace(p,(e,t)=>c[t]).replace(/&#?([0-9]+);/gi,(e,t)=>String.fromCharCode(Number.parseInt(t,10))).replace(/&#x?([0-9a-f]+);/gi,(e,t)=>String.fromCharCode(Number.parseInt(t,16))):e}export{t as VOWELS,n as capitalize,o as capitalizeAll,a as capitalizeFirst,e as createSearch,u as decodeHtmlEntities,r as pluralize,l as toTitleCase};

package/dist/common/type-utils.d.ts

@@ -1,6 +1,7 @@
 /**
  * Helps visualize highly complex ui data on the fly.
- * @example
+ * Example:
+ *
  * ```tsx
  * const { data } = useBackend<CargoData>();
  * logger.log(getShallowTypes(data));

package/dist/common/ui.d.ts

@@ -112,7 +112,7 @@ export type BooleanStyleMap = {
 };
 export declare const booleanStyleMap: Record<keyof BooleanStyleMap, any>;
 export declare function computeBoxProps(props: any): Record<string, any>;
-export declare function computeBoxClassName(props: BoxProps): string;
+export declare function computeBoxClassName<TElement = HTMLDivElement>(props: BoxProps<TElement>): string;
 type StyleMap = StringStyleMap & BooleanStyleMap;
 /** Super light implementation of tailwind-like class names. */
 export declare function computeTwClass(input: string | undefined): StyleMap;

package/dist/common/ui.js

@@ -1 +1 @@
-import*as t from"./constants.js";import*as o from"./react.js";let i=t=>"string"==typeof t?t.endsWith("px")?`${Number.parseFloat(t)/12}rem`:t:"number"==typeof t?`${t}rem`:void 0,e=t=>"string"==typeof t?i(t):"number"==typeof t?i(.5*t):void 0;function n(o){return"string"==typeof o&&t.CSS_COLORS.includes(o)}let r=t=>(o,i)=>{("number"==typeof i||"string"==typeof i)&&(o[t]=i)},l=(t,o)=>(i,e)=>{("number"==typeof e||"string"==typeof e)&&(i[t]=o(e))},p=(t,o)=>(i,e)=>{e&&(i[t]=o)},a=(t,o,i)=>(e,n)=>{if("number"==typeof n||"string"==typeof n)for(let r=0;r<i.length;r++)e[t+i[r]]=o(n)},g=t=>(o,i)=>{n(i)||(o[t]=i)},f={align:r("textAlign"),bottom:l("bottom",i),fontFamily:r("fontFamily"),fontSize:l("fontSize",i),fontWeight:r("fontWeight"),height:l("height",i),left:l("left",i),maxHeight:l("maxHeight",i),maxWidth:l("maxWidth",i),minHeight:l("minHeight",i),minWidth:l("minWidth",i),opacity:r("opacity"),overflow:r("overflow"),overflowX:r("overflowX"),overflowY:r("overflowY"),position:r("position"),right:l("right",i),textAlign:r("textAlign"),top:l("top",i),verticalAlign:r("verticalAlign"),width:l("width",i),lineHeight:(t,o)=>{"number"==typeof o?t.lineHeight=o:"string"==typeof o&&(t.lineHeight=i(o))},m:a("margin",e,["Top","Bottom","Left","Right"]),mb:l("marginBottom",e),ml:l("marginLeft",e),mr:l("marginRight",e),mt:l("marginTop",e),mx:a("margin",e,["Left","Right"]),my:a("margin",e,["Top","Bottom"]),g:l("gap",e),gr:l("rowGap",e),gc:l("columnGap",e),p:a("padding",e,["Top","Bottom","Left","Right"]),pb:l("paddingBottom",e),pl:l("paddingLeft",e),pr:l("paddingRight",e),pt:l("paddingTop",e),px:a("padding",e,["Left","Right"]),py:a("padding",e,["Top","Bottom"]),color:g("color"),textColor:g("color"),backgroundColor:g("backgroundColor")},m={bold:p("fontWeight","bold"),fillPositionedParent:(t,o)=>{o&&(t.position="absolute",t.top=0,t.bottom=0,t.left=0,t.right=0)},inline:p("display","inline-block"),italic:p("fontStyle","italic"),nowrap:p("whiteSpace","nowrap"),preserveWhitespace:p("whiteSpace","pre-wrap")};function s(t){let o={},i={};for(let e in t){if("style"===e)continue;let n=t[e],r=f[e]||m[e];r?r(i,n):o[e]=n}return o.style={...i,...t.style},o}function h(t){let i=t.textColor||t.color,{backgroundColor:e}=t;return(0,o.classes)([n(i)&&`color-${i}`,n(e)&&`color-bg-${e}`])}function c(t){let o={};if(!t)return o;for(let i of t.split(" ")){let[t,e]=i.split("-");if(t)if(t in f){if(""===e)continue;let i=Number(e);!Number.isNaN(i)&&Number.isFinite(i)?o[t]=i:o[t]=e}else t in m?o[t]=!0:console.warn(`Unknown prop ${t}`)}return o}export{m as booleanStyleMap,h as computeBoxClassName,s as computeBoxProps,c as computeTwClass,e as halfUnit,f as stringStyleMap,i as unit};
+import*as t from"./constants.js";import*as o from"./react.js";let i=t=>"string"==typeof t?t.endsWith("px")?`${Number.parseFloat(t)/12}rem`:t:"number"==typeof t?`${t}rem`:void 0,e=t=>"string"==typeof t?i(t):"number"==typeof t?i(.5*t):void 0;function n(o){return"string"==typeof o&&t.CSS_COLORS.includes(o)}let r=t=>(o,i)=>{("number"==typeof i||"string"==typeof i)&&(o[t]=i)},l=(t,o)=>(i,e)=>{("number"==typeof e||"string"==typeof e)&&(i[t]=o(e))},p=(t,o)=>(i,e)=>{e&&(i[t]=o)},a=(t,o,i)=>(e,n)=>{if("number"==typeof n||"string"==typeof n)for(let r=0;r<i.length;r++)e[t+i[r]]=o(n)},g=t=>(o,i)=>{n(i)||(o[t]=i)},f={align:r("textAlign"),backgroundColor:g("backgroundColor"),bottom:l("bottom",i),color:g("color"),fontFamily:r("fontFamily"),fontSize:l("fontSize",i),fontWeight:r("fontWeight"),g:l("gap",e),gc:l("columnGap",e),gr:l("rowGap",e),height:l("height",i),left:l("left",i),lineHeight:(t,o)=>{"number"==typeof o?t.lineHeight=o:"string"==typeof o&&(t.lineHeight=i(o))},m:a("margin",e,["Top","Bottom","Left","Right"]),maxHeight:l("maxHeight",i),maxWidth:l("maxWidth",i),mb:l("marginBottom",e),minHeight:l("minHeight",i),minWidth:l("minWidth",i),ml:l("marginLeft",e),mr:l("marginRight",e),mt:l("marginTop",e),mx:a("margin",e,["Left","Right"]),my:a("margin",e,["Top","Bottom"]),opacity:r("opacity"),overflow:r("overflow"),overflowX:r("overflowX"),overflowY:r("overflowY"),p:a("padding",e,["Top","Bottom","Left","Right"]),pb:l("paddingBottom",e),pl:l("paddingLeft",e),position:r("position"),pr:l("paddingRight",e),pt:l("paddingTop",e),px:a("padding",e,["Left","Right"]),py:a("padding",e,["Top","Bottom"]),right:l("right",i),textAlign:r("textAlign"),textColor:g("color"),top:l("top",i),verticalAlign:r("verticalAlign"),width:l("width",i)},m={bold:p("fontWeight","bold"),fillPositionedParent:(t,o)=>{o&&(t.position="absolute",t.top=0,t.bottom=0,t.left=0,t.right=0)},inline:p("display","inline-block"),italic:p("fontStyle","italic"),nowrap:p("whiteSpace","nowrap"),preserveWhitespace:p("whiteSpace","pre-wrap")};function s(t){let o={},i={};for(let e in t){if("style"===e)continue;let n=t[e],r=f[e]||m[e];r?r(i,n):o[e]=n}return o.style={...i,...t.style},o}function h(t){let i=t.textColor||t.color,{backgroundColor:e}=t;return(0,o.classes)([n(i)&&`color-${i}`,n(e)&&`color-bg-${e}`])}function c(t){let o={};if(!t)return o;for(let i of t.split(" ")){let[t,e]=i.split("-");if(t)if(t in f){if(""===e)continue;let i=Number(e);!Number.isNaN(i)&&Number.isFinite(i)?o[t]=i:o[t]=e}else t in m?o[t]=!0:console.warn(`Unknown prop ${t}`)}return o}export{m as booleanStyleMap,h as computeBoxClassName,s as computeBoxProps,c as computeTwClass,e as halfUnit,f as stringStyleMap,i as unit};

package/dist/common/uuid.d.ts

@@ -1,7 +1,8 @@
 /**
  * Creates a UUID v4 string
  *
- * @example
+ * Example:
+ *
  * ```tsx
  * createUuid(); // 'f47ac10b-58cc-4372-a567-0e02b2c3d479'
  * ```

package/dist/components/AnimatedNumber.d.ts

@@ -19,8 +19,11 @@ type Props = {
 }>;
 /**
  * ## AnimatedNumber
+ *
  * An animated number label. Shows a number, formatted with an optionally
  * provided function, and animates it towards its target value.
+ *
+ * - [View documentation on tgui core](https://tgstation.github.io/tgui-core/?path=/docs/components-animatednumber--docs)
  */
 export declare class AnimatedNumber extends Component<Props> {
     /**

package/dist/components/Autofocus.d.ts

@@ -1,3 +1,7 @@
 import { type PropsWithChildren } from 'react';
-/** Used to force the window to steal focus on load. Children optional */
+/**
+ * ## Autofocus
+ *
+ * Used to force the window to steal focus on load. Children optional.
+ */
 export declare function Autofocus(props: PropsWithChildren): import("react/jsx-runtime").JSX.Element;

package/dist/components/Blink.d.ts

@@ -12,6 +12,13 @@ type Props = Partial<{
 type State = {
     hidden: boolean;
 };
+/**
+ * ## Blink
+ *
+ * A component that blinks its children at a specified interval.
+ *
+ * - [View documentation on tgui core](https://tgstation.github.io/tgui-core/?path=/docs/components-blink--docs)
+ */
 export declare class Blink extends Component<Props, State> {
     interval: NodeJS.Timeout;
     timer: NodeJS.Timeout;

package/dist/components/BlockQuote.d.ts

@@ -1,7 +1,10 @@
 import { type BoxProps } from './Box';
 /**
  * ## BlockQuote
+ *
  * Just a block quote, just like this example in markdown:
  * > Here's an example of a block quote.
+ *
+ * - [View documentation on tgui core](https://tgstation.github.io/tgui-core/?path=/docs/components-blockquote--docs)
  */
 export declare function BlockQuote(props: BoxProps): import("react/jsx-runtime").JSX.Element;

package/dist/components/Box.d.ts

@@ -1,18 +1,18 @@
 import { type CSSProperties, type KeyboardEventHandler, type MouseEventHandler, type ReactNode, type UIEventHandler } from 'react';
 import type { BooleanLike } from '../common/react';
 import { type BooleanStyleMap, type StringStyleMap } from '../common/ui';
-type EventHandlers = {
-    onClick: MouseEventHandler<HTMLDivElement>;
-    onContextMenu: MouseEventHandler<HTMLDivElement>;
-    onDoubleClick: MouseEventHandler<HTMLDivElement>;
-    onKeyDown: KeyboardEventHandler<HTMLDivElement>;
-    onKeyUp: KeyboardEventHandler<HTMLDivElement>;
-    onMouseDown: MouseEventHandler<HTMLDivElement>;
-    onMouseLeave: MouseEventHandler<HTMLDivElement>;
-    onMouseMove: MouseEventHandler<HTMLDivElement>;
-    onMouseOver: MouseEventHandler<HTMLDivElement>;
-    onMouseUp: MouseEventHandler<HTMLDivElement>;
-    onScroll: UIEventHandler<HTMLDivElement | HTMLTextAreaElement>;
+type EventHandlers<TElement = HTMLDivElement> = {
+    onClick: MouseEventHandler<TElement>;
+    onContextMenu: MouseEventHandler<TElement>;
+    onDoubleClick: MouseEventHandler<TElement>;
+    onKeyDown: KeyboardEventHandler<TElement>;
+    onKeyUp: KeyboardEventHandler<TElement>;
+    onMouseDown: MouseEventHandler<TElement>;
+    onMouseLeave: MouseEventHandler<TElement>;
+    onMouseMove: MouseEventHandler<TElement>;
+    onMouseOver: MouseEventHandler<TElement>;
+    onMouseUp: MouseEventHandler<TElement>;
+    onScroll: UIEventHandler<TElement>;
 };
 type InternalProps = {
     /** The component used for the root node. */
@@ -49,7 +49,7 @@ type InternalProps = {
      */
     tw: string;
 };
-export type BoxProps = Partial<InternalProps & BooleanStyleMap & StringStyleMap & EventHandlers>;
+export type BoxProps<TElement = HTMLDivElement> = Partial<InternalProps & BooleanStyleMap & StringStyleMap & EventHandlers<TElement>>;
 type DangerDoNotUse = {
     dangerouslySetInnerHTML?: {
         __html: any;
@@ -57,11 +57,13 @@ type DangerDoNotUse = {
 };
 /**
  * ## Box
+ *
  * The Box component serves as a wrapper component for most of the CSS utility
  * needs. It creates a new DOM element, a `<div>` by default that can be changed
  * with the `as` property. Let's say you want to use a `<span>` instead:
  *
- * @example
+ * Example:
+ *
  * ```tsx
  * <Box as="span" m={1}>
  *   <Button />
@@ -78,7 +80,8 @@ type DangerDoNotUse = {
  * To workaround this problem, the Box children accept a render props function.
  * This way, `Button` can pull out the `className` generated by the `Box`.
  *
- * @example
+ * Example:
+ *
  * ```tsx
  * <Box color="primary">{(props) => <Button {...props} />}</Box>
  * ```
@@ -96,8 +99,10 @@ type DangerDoNotUse = {
  * If you need more precision, you can always use fractional numbers.
  *
  * Default font size (`1rem`) is equal to `12px`.
+ *
+ * - [View documentation on tgui core](https://tgstation.github.io/tgui-core/?path=/docs/components-box--docs)
  */
-export declare function Box(props: BoxProps & DangerDoNotUse): import("react").ReactElement<{
+export declare function Box<TElement = HTMLDivElement>(props: BoxProps<TElement> & DangerDoNotUse): import("react").ReactElement<{
     className: string;
 }, string | import("react").JSXElementConstructor<any>>;
 export {};

package/dist/components/Button.d.ts

@@ -90,7 +90,10 @@ type FileProps = {
 declare function ButtonFile(props: FileProps): import("react/jsx-runtime").JSX.Element;
 /**
  * ## Button
+ *
  * Buttons allow users to take actions, and make choices, with a single click.
+ *
+ * - [View documentation on tgui core](https://tgstation.github.io/tgui-core/?path=/docs/components-button--docs)
  */
 export declare namespace Button {
     /**

package/dist/components/Button.js

@@ -1 +1 @@
-var t;import*as e from"react/jsx-runtime";import*as n from"react";import*as o from"../common/keys.js";import*as r from"../common/react.js";import*as s from"../common/ui.js";import*as u from"./Box.js";import*as i from"./Icon.js";import*as c from"./Tooltip.js";function l(t){let{captureKeys:n=!0,children:u,circular:l,className:a,color:f,compact:m,content:p,disabled:d,ellipsis:B,fluid:x,icon:j,iconColor:h,iconPosition:y,iconRotation:g,iconSize:k,iconSpin:v,onClick:C,selected:b,tooltip:E,tooltipPosition:N,verticalAlignContent:_,...w}=t,D=p||u,I=(0,e.jsx)(i.Icon,{className:"Button--icon",name:j||"",color:h,rotation:g,size:k,spin:v}),T=(0,e.jsx)("div",{className:(0,r.classes)(["Button",x&&"Button--fluid",d&&"Button--disabled",b&&"Button--selected",l&&"Button--circular",m&&"Button--compact",!D&&"Button--empty",y&&`Button--icon-${y}`,_&&"Button--flex",_&&x&&"Button--flex--fluid",_&&`Button--verticalAlignContent--${_}`,f&&"string"==typeof f?`Button--color--${f}`:"Button--color--default",a,(0,s.computeBoxClassName)(w)]),tabIndex:d?void 0:0,onClick:t=>{!d&&C&&C(t)},onKeyDown:t=>{if(n){if(t.key===o.KEY.Space||t.key===o.KEY.Enter){t.preventDefault(),!d&&C&&C(t);return}(0,o.isEscape)(t.key)&&t.preventDefault()}},...(0,s.computeBoxProps)(w),children:(0,e.jsxs)("div",{className:(0,r.classes)(["Button__content",B&&"Button__content--ellipsis"]),children:[j&&"right"!==y&&I,B?(0,e.jsx)("span",{className:"Button--ellipsis",children:D}):D,j&&"right"===y&&I]})});return E&&(T=(0,e.jsx)(c.Tooltip,{content:E,position:N,children:T})),T}(t=l||(l={})).Checkbox=function(t){let{checked:n,...o}=t;return(0,e.jsx)(l,{color:"transparent",icon:n?"check-square-o":"square-o",selected:n,...o})},t.Confirm=function(t){let{children:o,color:r,confirmColor:s="bad",confirmContent:u="Confirm?",confirmIcon:i,ellipsis:c=!0,icon:a,onBlur:f,onClick:m,...p}=t,[d,B]=(0,n.useState)(!1);return(0,e.jsx)(l,{icon:d?i:a,color:d?s:r,onBlur:function(t){B(!1),f?.(t)},onClick:function(t){if(!d)return void B(!0);m?.(t),B(!1)},...p,children:d?u:o})},t.Input=function(t){let{buttonText:s,children:c,color:l="default",disabled:a,fluid:f,icon:m,iconRotation:p,iconSpin:d,maxLength:B,onCommit:x,ref:j,value:h="",...y}=t,[g,k]=(0,n.useState)(h),[v,C]=(0,n.useState)(!1),b=(0,n.useRef)(!1),E=(0,n.createRef)(),N=j??E;return(0,n.useEffect)(()=>{v&&(N.current?.focus(),N.current?.select())},[v]),(0,n.useEffect)(()=>{v||h===g||k(h)},[v,h]),(0,e.jsxs)(u.Box,{className:(0,r.classes)(["Button",f&&"Button--fluid",a&&"Button--disabled",`Button--color--${l}`]),onClick:()=>C(!0),...y,children:[m&&(0,e.jsx)(i.Icon,{name:m,rotation:p,spin:d}),s??g,(0,e.jsx)("input",{className:"NumberInput__input",disabled:!!a,maxLength:B,onBlur:function(){b.current||h===g||(x?.(g),b.current=!1),C(!1)},onChange:function(t){k(t.currentTarget.value)},onKeyDown:function(t){if(t.key===o.KEY.Enter){t.preventDefault(),t.currentTarget.blur();return}if((0,o.isEscape)(t.key)){t.preventDefault(),b.current=!0,t.currentTarget.blur();return}},ref:N,spellCheck:"false",style:{display:v?"":"none",textAlign:"left"},type:"text",value:g})]})},t.File=function(t){let{accept:o,multiple:r,onSelectFiles:s,...u}=t,i=(0,n.useRef)(null);async function c(t){let e=Array.from(t).map(t=>{let e=new FileReader;return new Promise(n=>{e.onload=()=>n(e.result),e.readAsText(t)})});return await Promise.all(e)}async function a(t){let e=t.target.files;if(e?.length){let t=await c(e);s(r?t:t[0])}}return(0,e.jsxs)(e.Fragment,{children:[(0,e.jsx)(l,{onClick:()=>i.current?.click(),...u}),(0,e.jsx)("input",{hidden:!0,type:"file",ref:i,accept:o,multiple:r,onChange:a})]})};export{l as Button};
+var t;import*as e from"react/jsx-runtime";import*as n from"react";import*as o from"../common/keys.js";import*as r from"../common/react.js";import*as s from"../common/ui.js";import*as u from"./Box.js";import*as i from"./Icon.js";import*as c from"./Tooltip.js";function l(t){let{captureKeys:n=!0,children:u,circular:l,className:a,color:f,compact:m,content:p,disabled:d,ellipsis:B,fluid:x,icon:j,iconColor:h,iconPosition:y,iconRotation:g,iconSize:k,iconSpin:v,onClick:C,selected:b,tooltip:E,tooltipPosition:N,verticalAlignContent:_,...w}=t,D=p||u,I=(0,e.jsx)(i.Icon,{className:"Button--icon",color:h,name:j||"",rotation:g,size:k,spin:v}),T=(0,e.jsx)("div",{className:(0,r.classes)(["Button",x&&"Button--fluid",d&&"Button--disabled",b&&"Button--selected",l&&"Button--circular",m&&"Button--compact",!D&&"Button--empty",y&&`Button--icon-${y}`,_&&"Button--flex",_&&x&&"Button--flex--fluid",_&&`Button--verticalAlignContent--${_}`,f&&"string"==typeof f?`Button--color--${f}`:"Button--color--default",a,(0,s.computeBoxClassName)(w)]),onClick:t=>{!d&&C&&C(t)},onKeyDown:t=>{if(n){if(t.key===o.KEY.Space||t.key===o.KEY.Enter){t.preventDefault(),!d&&C&&C(t);return}(0,o.isEscape)(t.key)&&t.preventDefault()}},tabIndex:d?void 0:0,...(0,s.computeBoxProps)(w),children:(0,e.jsxs)("div",{className:(0,r.classes)(["Button__content",B&&"Button__content--ellipsis"]),children:[j&&"right"!==y&&I,B?(0,e.jsx)("span",{className:"Button--ellipsis",children:D}):D,j&&"right"===y&&I]})});return E&&(T=(0,e.jsx)(c.Tooltip,{content:E,position:N,children:T})),T}(t=l||(l={})).Checkbox=function(t){let{checked:n,...o}=t;return(0,e.jsx)(l,{color:"transparent",icon:n?"check-square-o":"square-o",selected:n,...o})},t.Confirm=function(t){let{children:o,color:r,confirmColor:s="bad",confirmContent:u="Confirm?",confirmIcon:i,ellipsis:c=!0,icon:a,onBlur:f,onClick:m,...p}=t,[d,B]=(0,n.useState)(!1);return(0,e.jsx)(l,{color:d?s:r,icon:d?i:a,onBlur:function(t){B(!1),f?.(t)},onClick:function(t){if(!d)return void B(!0);m?.(t),B(!1)},...p,children:d?u:o})},t.Input=function(t){let{buttonText:s,children:c,color:l="default",disabled:a,fluid:f,icon:m,iconRotation:p,iconSpin:d,maxLength:B,onCommit:x,ref:j,value:h="",...y}=t,[g,k]=(0,n.useState)(h),[v,C]=(0,n.useState)(!1),b=(0,n.useRef)(!1),E=(0,n.createRef)(),N=j??E;return(0,n.useEffect)(()=>{v&&(N.current?.focus(),N.current?.select())},[v]),(0,n.useEffect)(()=>{v||h===g||k(h)},[v,h]),(0,e.jsxs)(u.Box,{className:(0,r.classes)(["Button",f&&"Button--fluid",a&&"Button--disabled",`Button--color--${l}`]),onClick:()=>C(!0),...y,children:[m&&(0,e.jsx)(i.Icon,{name:m,rotation:p,spin:d}),s??g,(0,e.jsx)("input",{className:"NumberInput__input",disabled:!!a,maxLength:B,onBlur:function(){b.current||h===g||(x?.(g),b.current=!1),C(!1)},onChange:function(t){k(t.currentTarget.value)},onKeyDown:function(t){if(t.key===o.KEY.Enter){t.preventDefault(),t.currentTarget.blur();return}if((0,o.isEscape)(t.key)){t.preventDefault(),b.current=!0,t.currentTarget.blur();return}},ref:N,spellCheck:"false",style:{display:v?"":"none",textAlign:"left"},type:"text",value:g})]})},t.File=function(t){let{accept:o,multiple:r,onSelectFiles:s,...u}=t,i=(0,n.useRef)(null);async function c(t){let e=Array.from(t).map(t=>{let e=new FileReader;return new Promise(n=>{e.onload=()=>n(e.result),e.readAsText(t)})});return await Promise.all(e)}async function a(t){let e=t.target.files;if(e?.length){let t=await c(e);s(r?t:t[0])}}return(0,e.jsxs)(e.Fragment,{children:[(0,e.jsx)(l,{onClick:()=>i.current?.click(),...u}),(0,e.jsx)("input",{accept:o,hidden:!0,multiple:r,onChange:a,ref:i,type:"file"})]})};export{l as Button};

package/dist/components/ByondUi.d.ts

@@ -19,12 +19,14 @@ type Props = Partial<{
 }> & BoxProps;
 /**
  * ## ByondUi
+ *
  * Displays a BYOND UI element on top of the browser, and leverages browser's
  * layout engine to position it just like any other HTML element. It is
  * especially useful if you want to display a secondary game map in your
  * interface.
  *
- * @example
+ * Example:
+ *
  * ```tsx
  * <ByondUi
  *   params={{
@@ -35,7 +37,8 @@ type Props = Partial<{
  *   }} />
  * ```
  *
- * @example
+ * Example:
+ *
  * ```tsx
  * <ByondUi
  *   params={{

package/dist/components/Chart.js

@@ -1 +1 @@
-import*as e from"react/jsx-runtime";import*as t from"react";import*as i from"../common/collections.js";import*as n from"./Box.js";let r={position:"absolute",top:0,left:0,right:0,bottom:0,overflow:"hidden"};function o(o){let{data:s=[],rangeX:l,rangeY:f,fillColor:a="none",strokeColor:h="#ffffff",strokeWidth:p=2,...u}=o,m=(0,t.useRef)(null),[c,d]=(0,t.useState)([600,200]),v=function(e,t,n,r){if(0===e.length)return[];let o=(0,i.zip)(...e),s=o.map(e=>Math.min(...e)),l=o.map(e=>Math.max(...e));return void 0!==n&&(s[0]=n[0],l[0]=n[1]),void 0!==r&&(s[1]=r[0],l[1]=r[1]),e.map(e=>(0,i.zip)(e,s,l,t).map(([e,t,i,n])=>(e-t)/(i-t)*n))}(s,c,l,f);if(v.length>0){let e=v[0],t=v[v.length-1];v.push([c[0]+p,t[1]]),v.push([c[0]+p,-p]),v.push([-p,-p]),v.push([-p,e[1]])}let x=function(e){let t="";for(let i=0;i<e.length;i++){let n=e[i];t+=`${n[0]},${n[1]} `}return t}(v);function g(){let e=m.current;if(!e)return;let t=e.getBoundingClientRect();d([t.width,t.height])}return(0,t.useEffect)(()=>(window.addEventListener("resize",g),g(),()=>{window.removeEventListener("resize",g)}),[]),(0,e.jsx)(n.Box,{position:"relative",...u,children:(0,e.jsx)("div",{ref:m,style:r,children:(0,e.jsxs)("svg",{viewBox:`0 0 ${c[0]} ${c[1]}`,preserveAspectRatio:"none",style:r,children:[(0,e.jsx)("title",{children:"chart"}),(0,e.jsx)("polyline",{transform:`scale(1, -1) translate(0, -${c[1]})`,fill:a,stroke:h,strokeWidth:p,points:x})]})})})}o.Line=o;export{o as Chart};
+import*as e from"react/jsx-runtime";import*as t from"react";import*as i from"../common/collections.js";import*as n from"./Box.js";let r={bottom:0,left:0,overflow:"hidden",position:"absolute",right:0,top:0};function o(o){let{data:s=[],rangeX:l,rangeY:f,fillColor:a="none",strokeColor:h="#ffffff",strokeWidth:p=2,...u}=o,m=(0,t.useRef)(null),[c,d]=(0,t.useState)([600,200]),v=function(e,t,n,r){if(0===e.length)return[];let o=(0,i.zip)(...e),s=o.map(e=>Math.min(...e)),l=o.map(e=>Math.max(...e));return void 0!==n&&(s[0]=n[0],l[0]=n[1]),void 0!==r&&(s[1]=r[0],l[1]=r[1]),e.map(e=>(0,i.zip)(e,s,l,t).map(([e,t,i,n])=>(e-t)/(i-t)*n))}(s,c,l,f);if(v.length>0){let e=v[0],t=v[v.length-1];v.push([c[0]+p,t[1]]),v.push([c[0]+p,-p]),v.push([-p,-p]),v.push([-p,e[1]])}let x=function(e){let t="";for(let i=0;i<e.length;i++){let n=e[i];t+=`${n[0]},${n[1]} `}return t}(v);function g(){let e=m.current;if(!e)return;let t=e.getBoundingClientRect();d([t.width,t.height])}return(0,t.useEffect)(()=>(window.addEventListener("resize",g),g(),()=>{window.removeEventListener("resize",g)}),[]),(0,e.jsx)(n.Box,{position:"relative",...u,children:(0,e.jsx)("div",{ref:m,style:r,children:(0,e.jsxs)("svg",{preserveAspectRatio:"none",style:r,viewBox:`0 0 ${c[0]} ${c[1]}`,children:[(0,e.jsx)("title",{children:"chart"}),(0,e.jsx)("polyline",{fill:a,points:x,stroke:h,strokeWidth:p,transform:`scale(1, -1) translate(0, -${c[1]})`})]})})})}o.Line=o;export{o as Chart};

package/dist/components/Collapsible.d.ts

@@ -16,9 +16,12 @@ type Props = Partial<{
 }> & BoxProps;
 /**
  * ## Collapsible
+ *
  * Displays contents when open, acts as a fluid button when closed.
  *
  * Click to toggle, closed by default.
+ *
+ * - [View documentation on tgui core](https://tgstation.github.io/tgui-core/?path=/docs/components-collapsible--docs)
  */
 export declare function Collapsible(props: Props): import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/components/Collapsible.js

@@ -1 +1 @@
-import*as e from"react/jsx-runtime";import*as l from"react";import*as o from"./Box.js";import*as s from"./Button.js";function r(r){let{children:c,child_mt:i=1,childStyles:t,color:a,title:n,buttons:m,icon:d,...x}=r,[h,j]=(0,l.useState)(r.open);return(0,e.jsxs)(o.Box,{mb:1,children:[(0,e.jsxs)("div",{className:"Table",children:[(0,e.jsx)("div",{className:"Table__cell",children:(0,e.jsx)(s.Button,{fluid:!0,color:a,icon:d||(h?"chevron-down":"chevron-right"),onClick:()=>j(!h),...x,children:n})}),m&&(0,e.jsx)("div",{className:"Table__cell Table__cell--collapsing",children:m})]}),h&&(0,e.jsx)(o.Box,{mt:i,style:t,children:c})]})}export{r as Collapsible};
+import*as e from"react/jsx-runtime";import*as l from"react";import*as o from"./Box.js";import*as s from"./Button.js";function r(r){let{children:c,child_mt:i=1,childStyles:t,color:a,title:n,buttons:m,icon:d,...x}=r,[h,j]=(0,l.useState)(r.open);return(0,e.jsxs)(o.Box,{mb:1,children:[(0,e.jsxs)("div",{className:"Table",children:[(0,e.jsx)("div",{className:"Table__cell",children:(0,e.jsx)(s.Button,{color:a,fluid:!0,icon:d||(h?"chevron-down":"chevron-right"),onClick:()=>j(!h),...x,children:n})}),m&&(0,e.jsx)("div",{className:"Table__cell Table__cell--collapsing",children:m})]}),h&&(0,e.jsx)(o.Box,{mt:i,style:t,children:c})]})}export{r as Collapsible};

package/dist/components/ColorBox.d.ts

@@ -5,11 +5,14 @@ type Props = {
 } & BoxProps;
 /**
  * ## ColorBox
+ *
  * Displays a 1-character wide colored square. Can be used as a status indicator,
  * or for visually representing a color.
  *
  * If you want to set a background color on an element, use a plain
  * [Box](https://github.com/tgstation/tgui-core/tree/main/lib/components/Box.tsx) instead.
+ *
+ * - [View documentation on tgui core](https://tgstation.github.io/tgui-core/?path=/docs/components-colorbox--docs)
  */
 export declare function ColorBox(props: Props): import("react/jsx-runtime").JSX.Element;
 export {};