tgui-core 4.0.3 → 4.1.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (107) hide show
  1. package/README.md +7 -0
  2. package/dist/common/constants.d.ts +1 -1
  3. package/dist/common/constants.js +1 -1
  4. package/dist/common/events.js +1 -1
  5. package/dist/common/fuzzysearch.js +1 -1
  6. package/dist/common/hotkeys.js +1 -1
  7. package/dist/common/random.js +1 -1
  8. package/dist/common/ui.js +1 -1
  9. package/dist/common/uuid.js +1 -1
  10. package/dist/common/vector.js +1 -1
  11. package/dist/components/AnimatedNumber.d.ts +2 -42
  12. package/dist/components/AnimatedNumber.js +1 -1
  13. package/dist/components/Autofocus.js +1 -1
  14. package/dist/components/Blink.js +1 -1
  15. package/dist/components/BlockQuote.js +1 -1
  16. package/dist/components/Box.d.ts +2 -2
  17. package/dist/components/Box.js +1 -1
  18. package/dist/components/Button.d.ts +1 -1
  19. package/dist/components/Button.js +1 -1
  20. package/dist/components/ByondUi.js +1 -1
  21. package/dist/components/Chart.js +1 -1
  22. package/dist/components/Collapsible.js +1 -1
  23. package/dist/components/ColorBox.js +1 -1
  24. package/dist/components/Dialog.js +1 -1
  25. package/dist/components/Dimmer.js +1 -1
  26. package/dist/components/Divider.js +1 -1
  27. package/dist/components/DmIcon.js +1 -1
  28. package/dist/components/DraggableControl.d.ts +4 -1
  29. package/dist/components/DraggableControl.js +1 -1
  30. package/dist/components/Dropdown.d.ts +2 -0
  31. package/dist/components/Dropdown.js +1 -1
  32. package/dist/components/FitText.js +1 -1
  33. package/dist/components/Flex.d.ts +1 -1
  34. package/dist/components/Flex.js +1 -1
  35. package/dist/components/Floating.d.ts +2 -1
  36. package/dist/components/Floating.js +1 -1
  37. package/dist/components/Icon.d.ts +1 -1
  38. package/dist/components/Icon.js +1 -1
  39. package/dist/components/Image.d.ts +7 -1
  40. package/dist/components/Image.js +1 -1
  41. package/dist/components/ImageButton.d.ts +1 -1
  42. package/dist/components/ImageButton.js +1 -1
  43. package/dist/components/InfinitePlane.js +1 -1
  44. package/dist/components/Input.js +1 -1
  45. package/dist/components/KeyListener.d.ts +1 -1
  46. package/dist/components/KeyListener.js +1 -1
  47. package/dist/components/Knob.d.ts +5 -5
  48. package/dist/components/Knob.js +1 -1
  49. package/dist/components/LabeledControls.js +1 -1
  50. package/dist/components/LabeledList.d.ts +1 -1
  51. package/dist/components/LabeledList.js +1 -1
  52. package/dist/components/MenuBar.js +1 -1
  53. package/dist/components/Modal.d.ts +2 -3
  54. package/dist/components/Modal.js +1 -1
  55. package/dist/components/NoticeBox.js +1 -1
  56. package/dist/components/NumberInput.d.ts +3 -3
  57. package/dist/components/NumberInput.js +1 -1
  58. package/dist/components/Popper.js +1 -1
  59. package/dist/components/ProgressBar.js +1 -1
  60. package/dist/components/RestrictedInput.js +1 -1
  61. package/dist/components/RoundGauge.js +1 -1
  62. package/dist/components/Section.js +1 -1
  63. package/dist/components/Slider.d.ts +4 -4
  64. package/dist/components/Slider.js +1 -1
  65. package/dist/components/Stack.js +1 -1
  66. package/dist/components/StyleableSection.js +1 -1
  67. package/dist/components/Table.js +1 -1
  68. package/dist/components/Tabs.js +1 -1
  69. package/dist/components/TextArea.js +1 -1
  70. package/dist/components/TimeDisplay.js +1 -1
  71. package/dist/components/Tooltip.js +1 -1
  72. package/dist/components/TrackOutsideClicks.js +1 -1
  73. package/dist/components/VirtualList.js +1 -1
  74. package/dist/components/index.js +1 -1
  75. package/package.json +15 -20
  76. package/styles/atomic/candystripe.scss +8 -0
  77. package/styles/atomic/centered-image.scss +7 -0
  78. package/styles/atomic/color.scss +17 -0
  79. package/styles/atomic/debug-layout.scss +12 -0
  80. package/styles/atomic/fit-text.scss +15 -0
  81. package/styles/atomic/links.scss +21 -0
  82. package/styles/atomic/outline.scss +43 -0
  83. package/styles/atomic/text.scss +39 -0
  84. package/styles/atomic.scss +11 -0
  85. package/styles/components/BlockQuote.scss +0 -2
  86. package/styles/components/Button.scss +83 -84
  87. package/styles/components/Dimmer.scss +0 -2
  88. package/styles/components/Divider.scss +0 -5
  89. package/styles/components/Dropdown.scss +8 -0
  90. package/styles/components/ImageButton.scss +104 -102
  91. package/styles/components/Input.scss +4 -1
  92. package/styles/components/Knob.scss +5 -21
  93. package/styles/components/LabeledList.scss +0 -2
  94. package/styles/components/NoticeBox.scss +15 -21
  95. package/styles/components/NumberInput.scss +1 -9
  96. package/styles/components/ProgressBar.scss +27 -48
  97. package/styles/components/RestrictedInput.scss +3 -0
  98. package/styles/components/RoundGauge.scss +8 -13
  99. package/styles/components/Section.scss +0 -7
  100. package/styles/components/Slider.scss +49 -42
  101. package/styles/components/Tabs.scss +1 -12
  102. package/styles/components/TextArea.scss +3 -0
  103. package/styles/components/Tooltip.scss +0 -4
  104. package/styles/functions.scss +10 -0
  105. package/styles/main.scss +0 -1
  106. package/styles/reset.scss +1 -0
  107. package/styles/vars-components.scss +5 -2
package/README.md CHANGED
@@ -4,7 +4,14 @@ A collection of utilities and components for the [tgui](https://github.com/tgsta
4
4
 
5
5
  This package was built to help the various downstream SS13 servers stay up to date with TGUI without having to keep a local version of each file.
6
6
 
7
+ ## Testing / Demos
8
+
9
+ This project uses Storybook both for testing locally (via `bun storybook`) and our live demo site (https://tgstation.github.io/tgui-core/).
10
+
11
+ Storybook is a sandbox environment for UI components so you can test them in isolation without needing to boot the game.
12
+
7
13
  ## Links
14
+
8
15
  - [GitHub](https://github.com/tgstation/tgui-core)
9
16
  - [npm](https://www.npmjs.com/package/tgui-core)
10
17
  - [Storybook](https://tgstation.github.io/tgui-core/?path=/docs/components-animatednumber--docs)
@@ -101,6 +101,6 @@ export declare function getGasFromId(gasId: string): Gas | undefined;
101
101
  export declare function getGasFromPath(gasPath: string): Gas | undefined;
102
102
  export declare const COMPONENT_COLORS: {
103
103
  readonly spectrum: readonly ["red", "orange", "yellow", "olive", "green", "teal", "blue", "violet", "purple", "pink", "brown", "grey", "gold"];
104
- readonly states: readonly ["", "good", "average", "bad", "black", "white"];
104
+ readonly states: readonly ["default", "good", "average", "bad", "black", "white", "transparent"];
105
105
  };
106
106
  export {};
@@ -1 +1 @@
1
- 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"}function 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]}function d(e){if(e){for(let a=0;a<n.length;a++)if(n[a].path===e)return n[a]}}let 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};
1
+ 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"],n=[{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"}],i=[{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<i.length;e++)if(i[e].id===o)return i[e].label;return a||"None"}function u(e){if(!e)return"black";let a=e.toLowerCase();for(let e=0;e<i.length;e++)if(i[e].id===a)return i[e].color;return"black"}function c(e){if(!e)return;let a=e.toLowerCase();for(let e=0;e<i.length;e++)if(i[e].id===a)return i[e]}function d(e){if(e){for(let a=0;a<i.length;a++)if(i[a].path===e)return i[a]}}let b={spectrum:["red","orange","yellow","olive","green","teal","blue","violet","purple","pink","brown","grey","gold"],states:["default","good","average","bad","black","white","transparent"]};export{l as COLORS,b as COMPONENT_COLORS,t as CSS_COLORS,n 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};
@@ -1 +1 @@
1
- let t;import*as e from"./keycodes.js";class i{listeners;constructor(){this.listeners={}}on(t,e){this.listeners[t]=this.listeners[t]||[],this.listeners[t].push(e)}off(t,e){let i=this.listeners[t];if(!i)throw Error(`There is no listeners for "${t}"`);this.listeners[t]=i.filter(t=>t!==e)}emit(t,...e){let i=this.listeners[t];if(i)for(let t=0,s=i.length;t<s;t+=1)(0,i[t])(...e)}clear(){this.listeners={}}}let s=new i,r=!1,n=(t={})=>{r=!!t.ignoreWindowFocus},o=!0;function l(e,i){if(r){o=!0;return}if(t&&(clearTimeout(t),t=null),i){t=setTimeout(()=>l(e));return}o!==e&&(o=e,s.emit(e?"window-focus":"window-blur"),s.emit("window-focus-change",e))}let d=null;function u(t){let e=String(t.tagName).toLowerCase();return"input"===e||"textarea"===e}function h(){d&&(d.removeEventListener("blur",h),d=null)}let c=null,a=null,f=[];function w(t){f.push(t)}function y(t){let e=f.indexOf(t);e>=0&&f.splice(e,1)}window.addEventListener("mousemove",t=>{let e=t.target;e!==a&&(a=e,function(t){if(d||!o)return;let e=document.body;for(;t&&t!==e;){if(f.includes(t)){if(t.contains(c))return;c=t,t.focus();return}t=t.parentElement}}(e))}),window.addEventListener("focusin",t=>{var e;a=null,c=t.target,l(!0),u(t.target)&&(e=t.target,h(),(d=e).addEventListener("blur",h))}),window.addEventListener("focusout",()=>{a=null,l(!1,!0)}),window.addEventListener("blur",()=>{a=null,l(!1,!0)}),window.addEventListener("beforeunload",()=>{l(!1)});let m={};class E{event;type;code;ctrl;shift;alt;repeat;_str;constructor(t,e,i){this.event=t,this.type=e,this.code=t.keyCode,this.ctrl=t.ctrlKey,this.shift=t.shiftKey,this.alt=t.altKey,this.repeat=!!i}hasModifierKeys(){return this.ctrl||this.alt||this.shift}isModifierKey(){return this.code===e.KEY_CTRL||this.code===e.KEY_SHIFT||this.code===e.KEY_ALT}isDown(){return"keydown"===this.type}isUp(){return"keyup"===this.type}toString(){return this._str||(this._str="",this.ctrl&&(this._str+="Ctrl+"),this.alt&&(this._str+="Alt+"),this.shift&&(this._str+="Shift+"),this.code>=48&&this.code<=90?this._str+=String.fromCharCode(this.code):this.code>=e.KEY_F1&&this.code<=e.KEY_F12?this._str+=`F${this.code-111}`:this._str+=`[${this.code}]`),this._str}}document.addEventListener("keydown",t=>{if(u(t.target))return;let e=t.keyCode,i=new E(t,"keydown",m[e]);s.emit("keydown",i),s.emit("key",i),m[e]=!0}),document.addEventListener("keyup",t=>{if(u(t.target))return;let e=t.keyCode,i=new E(t,"keyup");s.emit("keyup",i),s.emit("key",i),m[e]=!1});export{i as EventEmitter,E as KeyEvent,w as addScrollableNode,u as canStealFocus,s as globalEvents,y as removeScrollableNode,n as setupGlobalEvents};
1
+ let t;import{KEY_ALT as e,KEY_CTRL as i,KEY_F1 as s,KEY_F12 as n,KEY_SHIFT as r}from"./keycodes.js";class o{listeners;constructor(){this.listeners={}}on(t,e){this.listeners[t]=this.listeners[t]||[],this.listeners[t].push(e)}off(t,e){let i=this.listeners[t];if(!i)throw Error(`There is no listeners for "${t}"`);this.listeners[t]=i.filter(t=>t!==e)}emit(t,...e){let i=this.listeners[t];if(i)for(let t=0,s=i.length;t<s;t+=1)(0,i[t])(...e)}clear(){this.listeners={}}}let l=new o,u=!1,d=(t={})=>{u=!!t.ignoreWindowFocus},h=!0;function c(e,i){if(u){h=!0;return}if(t&&(clearTimeout(t),t=null),i){t=setTimeout(()=>c(e));return}h!==e&&(h=e,l.emit(e?"window-focus":"window-blur"),l.emit("window-focus-change",e))}let a=null;function f(t){let e=String(t.tagName).toLowerCase();return"input"===e||"textarea"===e}function m(){a&&(a.removeEventListener("blur",m),a=null,l.emit("input-blur"))}let w=null,y=null,p=[];function v(t){p.push(t)}function E(t){let e=p.indexOf(t);e>=0&&p.splice(e,1)}window.addEventListener("mousemove",t=>{let e=t.target;e!==y&&(y=e,function(t){if(a||!h)return;let e=document.body;for(;t&&t!==e;){if(p.includes(t)){if(t.contains(w))return;w=t,t.focus();return}t=t.parentElement}}(e))}),document.addEventListener("focus",t=>{var e;if(!(t.target instanceof Element)){y=null,w=null;return}y=null,w=t.target,f(t.target)&&(e=t.target,m(),(a=e).addEventListener("blur",m),l.emit("input-focus"))},!0),document.addEventListener("blur",()=>{y=null},!0),window.addEventListener("focus",()=>{c(!0)}),window.addEventListener("blur",()=>{y=null,c(!1,!0)}),window.addEventListener("close",()=>{c(!1)});let g={};class k{event;type;code;ctrl;shift;alt;repeat;_str;constructor(t,e,i){this.event=t,this.type=e,this.code=t.keyCode,this.ctrl=t.ctrlKey,this.shift=t.shiftKey,this.alt=t.altKey,this.repeat=!!i}hasModifierKeys(){return this.ctrl||this.alt||this.shift}isModifierKey(){return this.code===i||this.code===r||this.code===e}isDown(){return"keydown"===this.type}isUp(){return"keyup"===this.type}toString(){return this._str||(this._str="",this.ctrl&&(this._str+="Ctrl+"),this.alt&&(this._str+="Alt+"),this.shift&&(this._str+="Shift+"),this.code>=48&&this.code<=90?this._str+=String.fromCharCode(this.code):this.code>=s&&this.code<=n?this._str+=`F${this.code-111}`:this._str+=`[${this.code}]`),this._str}}document.addEventListener("keydown",t=>{if(f(t.target))return;let e=t.keyCode,i=new k(t,"keydown",g[e]);l.emit("keydown",i),l.emit("key",i),g[e]=!0}),document.addEventListener("keyup",t=>{if(f(t.target))return;let e=t.keyCode,i=new k(t,"keyup");l.emit("keyup",i),l.emit("key",i),g[e]=!1});export{o as EventEmitter,k as KeyEvent,v as addScrollableNode,f as canStealFocus,l as globalEvents,E as removeScrollableNode,d as setupGlobalEvents};
@@ -1 +1 @@
1
- import*as t from"@nozbe/microfuzz";import*as e from"react";function r(r){let{getSearchString:a,matchStrategy:u="smart",searchArray:o}=r,[i,m]=(0,e.useState)(""),[s,f]=(0,e.useState)([]),n=(0,e.useCallback)((0,t.default)(o,{getText:t=>[a(t)],strategy:u}),[o,a]);return{query:i,setQuery:function(t){if(m(t),""===t.trim())return void f([]);f(n(t).map(t=>t.item))},results:s}}export{r as useFuzzySearch};
1
+ import t from"@nozbe/microfuzz";import{useCallback as r,useState as e}from"react";function o(o){let{getSearchString:i,matchStrategy:m="smart",searchArray:u}=o,[n,f]=e(""),[a,c]=e([]),z=r(t(u,{getText:t=>[i(t)],strategy:m}),[u,i]);return{query:n,setQuery:function(t){if(f(t),""===t.trim())return void c([]);c(z(t).map(t=>t.item))},results:a}}export{o as useFuzzySearch};
@@ -1 +1 @@
1
- import*as e from"./events.js";import*as t from"./keycodes.js";let n={},o=[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],r={},l=[];function s(e){o.push(e)}function i(e){let t=o.indexOf(e);t>=0&&o.splice(t,1)}function a(){for(let e in r)r[e]&&(r[e]=!1,Byond.command(f.verbParamsFn(f.keyUpVerb,e)))}let f={keyDownVerb:"KeyDown",keyUpVerb:"KeyUp",verbParamsFn:(e,t)=>`${e} "${t}"`};function u(t){t&&(f=t),Byond.winget("default.*").then(e=>{let t={};for(let n in e){let o=n.split("."),r=o[1],l=o[2];r&&l&&(t[r]||(t[r]={}),t[r][l]=e[n])}let o=/\\"/g;function r(e){return e.substring(1,e.length-1).replace(o,'"')}for(let e in t){let o=t[e];n[r(o.name)]=r(o.command)}}),e.globalEvents.on("window-blur",()=>{a()}),d()}function d(){e.globalEvents.on("key",y)}function c(){e.globalEvents.off("key",y)}function y(e){for(let t of l)t(e);!function(e){var t;let l=String(e);if("Ctrl+F5"===l||"Ctrl+R"===l)return location.reload();if("Ctrl+F"===l||e.event.defaultPrevented||e.isModifierKey()||o.includes(e.code))return;let s=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(!s)return;let i=n[s];if(i)return Byond.command(i);if(e.isDown()&&!r[s]){r[s]=!0;let e=f.verbParamsFn(f.keyDownVerb,s);return Byond.command(e)}if(e.isUp()&&r[s]){r[s]=!1;let e=f.verbParamsFn(f.keyUpVerb,s);Byond.command(e)}}(e)}function E(e){l.push(e);let t=!1;return()=>{t||(t=!0,l.splice(l.indexOf(e),1))}}export{s as acquireHotKey,E as listenForKeyEvents,a as releaseHeldKeys,i as releaseHotKey,u as setupHotKeys,d as startKeyPassthrough,c as stopKeyPassthrough};
1
+ import{globalEvents as e}from"./events.js";import{KEY_CTRL as t,KEY_DOWN as n,KEY_ENTER as o,KEY_ESCAPE as r,KEY_F5 as i,KEY_LEFT as s,KEY_RIGHT as l,KEY_SHIFT as u,KEY_SPACE as f,KEY_TAB as a,KEY_UP as d}from"./keycodes.js";let c={},y=[r,o,f,a,t,u,d,n,s,l,i],m={},p=[];function h(e){y.push(e)}function b(e){let t=y.indexOf(e);t>=0&&y.splice(t,1)}function v(){for(let e in m)m[e]&&(m[e]=!1,Byond.command(K.verbParamsFn(K.keyUpVerb,e)))}let K={keyDownVerb:"KeyDown",keyUpVerb:"KeyUp",verbParamsFn:(e,t)=>`${e} "${t}"`};function w(t){t&&(K=t),Byond.winget("default.*").then(e=>{let t={};for(let n in e){let o=n.split("."),r=o[1],i=o[2];r&&i&&(t[r]||(t[r]={}),t[r][i]=e[n])}let n=/\\"/g;function o(e){return e.substring(1,e.length-1).replace(n,'"')}for(let e in t){let n=t[e];c[o(n.name)]=o(n.command)}}),e.on("window-blur",()=>{v()}),e.on("input-focus",()=>{v()}),g()}function g(){e.on("key",F)}function k(){e.off("key",F)}function F(e){for(let t of p)t(e);!function(e){var t;let n=String(e);if("Ctrl+F5"===n||"Ctrl+R"===n)return location.reload();if("Ctrl+F"===n||e.event.defaultPrevented||e.isModifierKey()||y.includes(e.code))return;let o=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(!o)return;let r=c[o];if(r)return Byond.command(r);if(e.isDown()&&!m[o]){m[o]=!0;let e=K.verbParamsFn(K.keyDownVerb,o);return Byond.command(e)}if(e.isUp()&&m[o]){m[o]=!1;let e=K.verbParamsFn(K.keyUpVerb,o);Byond.command(e)}}(e)}function P(e){p.push(e);let t=!1;return()=>{t||(t=!0,p.splice(p.indexOf(e),1))}}export{h as acquireHotKey,P as listenForKeyEvents,v as releaseHeldKeys,b as releaseHotKey,w as setupHotKeys,g as startKeyPassthrough,k as stopKeyPassthrough};
@@ -1 +1 @@
1
- import*as r from"./math.js";function n(r,n){return Math.random()*(n-r)+r}function o(r,n){let o=Math.ceil(r);return Math.floor(Math.random()*(Math.floor(n)-o)+o)}function t(r){return r[Math.floor(Math.random()*r.length)]}function a(n){return Math.random()<=(0,r.clamp)(n,0,100)/100}export{o as randomInteger,n as randomNumber,t as randomPick,a as randomProb};
1
+ import{clamp as r}from"./math.js";function n(r,n){return Math.random()*(n-r)+r}function o(r,n){let o=Math.ceil(r);return Math.floor(Math.random()*(Math.floor(n)-o)+o)}function t(r){return r[Math.floor(Math.random()*r.length)]}function a(n){return Math.random()<=r(n,0,100)/100}export{o as randomInteger,n as randomNumber,t as randomPick,a as randomProb};
package/dist/common/ui.js CHANGED
@@ -1 +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"),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};
1
+ import{CSS_COLORS as t}from"./constants.js";import{classes 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.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)},g=(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)},a=t=>(o,i)=>{n(i)||(o[t]=i)},f={align:r("textAlign"),backgroundColor:a("backgroundColor"),bottom:l("bottom",i),color:a("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:g("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:g("margin",e,["Left","Right"]),my:g("margin",e,["Top","Bottom"]),opacity:r("opacity"),overflow:r("overflow"),overflowX:r("overflowX"),overflowY:r("overflowY"),p:g("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:g("padding",e,["Left","Right"]),py:g("padding",e,["Top","Bottom"]),right:l("right",i),textAlign:r("textAlign"),textColor:a("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 o([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};
@@ -1 +1 @@
1
- function x(){let x=new Date().getTime();return"xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx".replace(/[xy]/g,e=>{let t=(x+16*Math.random())%16|0;return x=Math.floor(x/16),("x"===e?t:3&t|8).toString(16)})}export{x as createUuid};
1
+ function x(){let x=Date.now();return"xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx".replace(/[xy]/g,t=>{let e=(x+16*Math.random())%16|0;return x=Math.floor(x/16),("x"===t?e:3&e|8).toString(16)})}export{x as createUuid};
@@ -1 +1 @@
1
- import*as e from"./collections.js";function n(e,n){return e+n}function r(e,n){return e-n}function t(e,n){return e*n}function u(e,n){return e/n}function c(...r){return(0,e.zip)(...r).map(e=>e.reduce(n))}function i(...n){return(0,e.zip)(...n).map(e=>e.reduce(r))}function o(...n){return(0,e.zip)(...n).map(e=>e.reduce(t))}function p(...n){return(0,e.zip)(...n).map(e=>e.reduce(u))}function f(e,n){return e.map(e=>e*n)}function a(e){return e.map(e=>-e)}function m(e){return Math.sqrt(o(e,e).reduce(n))}function v(e){let n=m(e);return e.map(e=>e/n)}export{c as vecAdd,p as vecDivide,a as vecInverse,m as vecLength,o as vecMultiply,v as vecNormalize,f as vecScale,i as vecSubtract};
1
+ import{zip as e}from"./collections.js";function n(e,n){return e+n}function r(e,n){return e-n}function t(e,n){return e*n}function u(e,n){return e/n}function c(...r){return e(...r).map(e=>e.reduce(n))}function i(...n){return e(...n).map(e=>e.reduce(r))}function o(...n){return e(...n).map(e=>e.reduce(t))}function f(...n){return e(...n).map(e=>e.reduce(u))}function a(e,n){return e.map(e=>e*n)}function m(e){return e.map(e=>-e)}function p(e){return Math.sqrt(o(e,e).reduce(n))}function v(e){let n=p(e);return e.map(e=>e/n)}export{c as vecAdd,f as vecDivide,m as vecInverse,p as vecLength,o as vecMultiply,v as vecNormalize,a as vecScale,i as vecSubtract};
@@ -1,8 +1,5 @@
1
- import { Component } from 'react';
2
1
  type Props = {
3
- /**
4
- * The target value to approach.
5
- */
2
+ /** The target value to approach. */
6
3
  value: number;
7
4
  } & Partial<{
8
5
  /**
@@ -22,43 +19,6 @@ type Props = {
22
19
  *
23
20
  * An animated number label. Shows a number, formatted with an optionally
24
21
  * provided function, and animates it towards its target value.
25
- *
26
- * - [View documentation on tgui core](https://tgstation.github.io/tgui-core/?path=/docs/components-animatednumber--docs)
27
22
  */
28
- export declare class AnimatedNumber extends Component<Props> {
29
- /**
30
- * The inner `<span/>` being updated sixty times per second.
31
- */
32
- ref: import("react").RefObject<HTMLSpanElement | null>;
33
- /**
34
- * The interval being used to update the inner span.
35
- */
36
- interval?: NodeJS.Timeout;
37
- /**
38
- * The current value. This values approaches the target value.
39
- */
40
- currentValue: number;
41
- constructor(props: Props);
42
- componentDidMount(): void;
43
- componentWillUnmount(): void;
44
- shouldComponentUpdate(newProps: Props): boolean;
45
- /**
46
- * Starts animating the inner span. If the inner span is already animating,
47
- * this is a no-op.
48
- */
49
- startTicking(): void;
50
- /**
51
- * Stops animating the inner span.
52
- */
53
- stopTicking(): void;
54
- /**
55
- * Steps forward one frame.
56
- */
57
- tick(): void;
58
- /**
59
- * Gets the inner text of the span.
60
- */
61
- getText(): string;
62
- render(): import("react/jsx-runtime").JSX.Element;
63
- }
23
+ export declare function AnimatedNumber(props: Props): import("react/jsx-runtime").JSX.Element;
64
24
  export {};
@@ -1 +1 @@
1
- import*as t from"react/jsx-runtime";import*as e from"react";import*as r from"../common/math.js";let i=1e3/60;class s extends e.Component{ref=(0,e.createRef)();interval;currentValue=0;constructor(t){super(t);let{initial:e,value:i}=t;void 0!==e&&(0,r.isSafeNumber)(e)?this.currentValue=e:(0,r.isSafeNumber)(i)&&(this.currentValue=i)}componentDidMount(){this.currentValue!==this.props.value&&this.startTicking()}componentWillUnmount(){this.stopTicking()}shouldComponentUpdate(t){return t.value!==this.props.value&&this.startTicking(),!1}startTicking(){void 0===this.interval&&(this.interval=setInterval(()=>this.tick(),i))}stopTicking(){void 0!==this.interval&&(clearInterval(this.interval),this.interval=void 0)}tick(){let{currentValue:t}=this,{value:e}=this.props;(0,r.isSafeNumber)(e)?this.currentValue=.8333*t+.16669999999999996*e:this.stopTicking(),Math.abs(e-this.currentValue)<Math.max(.001,.001*e)&&(this.currentValue=e,this.stopTicking()),this.ref.current&&(this.ref.current.textContent=this.getText())}getText(){let{props:t,currentValue:e}=this,{format:i,value:s}=t;if(!(0,r.isSafeNumber)(s))return String(s);if(i)return i(this.currentValue);let n=String(s).split(".")[1],a=n?n.length:0;return(0,r.toFixed)(e,(0,r.clamp)(a,0,8))}render(){return(0,t.jsx)("span",{ref:this.ref,children:this.getText()})}}export{s as AnimatedNumber};
1
+ import{jsx as r}from"react/jsx-runtime";import{clamp as t,isSafeNumber as n,toFixed as e}from"../common/math.js";import{useEffect as u,useRef as l,useState as i}from"react";let o=1e3/60;function c(c){let{format:m,initial:a,value:f}=c,p=l(null),[s,h]=i(void 0!==a&&n(a)?a:n(f)?f:0);function d(){null!==p.current&&(clearInterval(p.current),p.current=null)}function v(){if(!n(f))return void d();h(r=>{let t=.8333*r+.16669999999999996*f;return Math.abs(f-t)<Math.max(.001,.001*f)?(d(),f):t})}return u(()=>{s!==f&&null===p.current&&(p.current=setInterval(v,o))},[f]),u(()=>()=>d(),[]),r("span",{children:n(f)?m?m(s):function(){let r=String(f).split(".")[1];return e(s,t(r?r.length:0,0,8))}():String(f)})}export{c as AnimatedNumber};
@@ -1 +1 @@
1
- import*as e from"react/jsx-runtime";import*as t from"react";function r(r){let{children:u}=r,o=(0,t.useRef)(null);return(0,t.useEffect)(()=>{let e=setTimeout(()=>{o.current?.focus()},1);return()=>{clearTimeout(e)}},[]),(0,e.jsx)("div",{ref:o,tabIndex:-1,children:u})}export{r as Autofocus};
1
+ import{jsx as r}from"react/jsx-runtime";import{useEffect as t,useRef as e}from"react";function o(o){let{children:u}=o,n=e(null);return t(()=>{let r=setTimeout(()=>{n.current?.focus()},1);return()=>{clearTimeout(r)}},[]),r("div",{ref:n,tabIndex:-1,children:u})}export{o as Autofocus};
@@ -1 +1 @@
1
- import*as e from"react/jsx-runtime";import*as t from"react";function r(r){let{children:i,interval:s=1e3,time:n=1e3}=r,[l,a]=(0,t.useState)(!1);return(0,t.useEffect)(()=>{let e=setInterval(()=>{a(!0),setTimeout(()=>{a(!1)},n)},s+n);return()=>{clearInterval(e)}},[s,n]),(0,e.jsx)("span",{style:{visibility:l?"hidden":"visible"},children:i})}export{r as Blink};
1
+ import{jsx as e}from"react/jsx-runtime";import{useEffect as t,useState as r}from"react";function i(i){let{children:n,interval:l=1e3,time:o=1e3}=i,[s,a]=r(!1);return t(()=>{let e=setInterval(()=>{a(!0),setTimeout(()=>{a(!1)},o)},l+o);return()=>{clearInterval(e)}},[l,o]),e("span",{style:{visibility:s?"hidden":"visible"},children:n})}export{i as Blink};
@@ -1 +1 @@
1
- import*as o from"react/jsx-runtime";import*as r from"../common/react.js";import*as s from"./Box.js";function t(t){let{className:e,...m}=t;return(0,o.jsx)(s.Box,{className:(0,r.classes)(["BlockQuote",e]),...m})}export{t as BlockQuote};
1
+ import{jsx as o}from"react/jsx-runtime";import{classes as r}from"../common/react.js";import{Box as t}from"./Box.js";function m(m){let{className:e,...c}=m;return o(t,{className:r(["BlockQuote",e]),...c})}export{m as BlockQuote};
@@ -1,6 +1,6 @@
1
+ import type { BooleanLike } from '../common/react.ts';
2
+ import { type BooleanStyleMap, type StringStyleMap } from '../common/ui.ts';
1
3
  import { type CSSProperties, type KeyboardEventHandler, type MouseEventHandler, type ReactNode, type UIEventHandler } from 'react';
2
- import type { BooleanLike } from '../common/react';
3
- import { type BooleanStyleMap, type StringStyleMap } from '../common/ui';
4
4
  type EventHandlers<TElement = HTMLDivElement> = Partial<{
5
5
  onClick: MouseEventHandler<TElement>;
6
6
  onContextMenu: MouseEventHandler<TElement>;
@@ -1 +1 @@
1
- import*as o from"react";import*as e from"../common/ui.js";function m(m){let{as:t="div",className:s,children:a,tw:r,...c}=m,p=s?`${s} ${(0,e.computeBoxClassName)(c)}`:(0,e.computeBoxClassName)(c),u=(0,e.computeBoxProps)({...c,...(0,e.computeTwClass)(r)});return(0,o.createElement)(t,{...u,className:p},a)}export{m as Box};
1
+ import{computeBoxClassName as o,computeBoxProps as r,computeTwClass as m}from"../common/ui.js";import{createElement as t}from"react";function e(e){let{as:i="div",className:c,children:n,tw:a,...f}=e,p=c?`${c} ${o(f)}`:o(f);return t(i,{...r({...f,...m(a)}),className:p},n)}export{e as Box};
@@ -1,6 +1,6 @@
1
+ import { type BooleanLike } from '../common/react.ts';
1
2
  import type { Placement } from '@floating-ui/react';
2
3
  import { type ReactNode, type RefObject } from 'react';
3
- import { type BooleanLike } from '../common/react';
4
4
  import { type BoxProps } from './Box';
5
5
  /**
6
6
  * Getting ellipses to work requires that you use:
@@ -1 +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",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};
1
+ var t;import{Fragment as n,jsx as e,jsxs as o}from"react/jsx-runtime";import{KEY as r,isEscape as i}from"../common/keys.js";import{classes as u}from"../common/react.js";import{computeBoxClassName as l,computeBoxProps as c}from"../common/ui.js";import{createRef as a,useEffect as s,useRef as f,useState as m}from"react";import{Box as p}from"./Box.js";import{Icon as d}from"./Icon.js";import{Tooltip as B}from"./Tooltip.js";function h(t){let{captureKeys:n=!0,children:a,circular:s,className:f,color:m="default",compact:p,content:h,disabled:y,ellipsis:k,fluid:g,icon:v,iconColor:x,iconPosition:C,iconRotation:b,iconSize:j,iconSpin:N,onClick:_,selected:w,tooltip:D,tooltipPosition:I,verticalAlignContent:T,...A}=t,$=h||a,q=e(d,{className:"Button--icon",color:x,name:v||"",rotation:b,size:j,spin:N}),E=e("div",{className:u(["Button",g&&"Button--fluid",y&&"Button--disabled",w&&"Button--selected",s&&"Button--circular",p&&"Button--compact",!$&&"Button--empty",v&&"Button--hasIcon",C&&`Button--icon-${C}`,T&&"Button--flex",T&&g&&"Button--flex--fluid",T&&`Button--verticalAlignContent--${T}`,m&&"string"==typeof m&&`Button--color--${m}`,f,l(A)]),onClick:t=>{!y&&_&&_(t)},onKeyDown:t=>{if(n){if(t.key===r.Space||t.key===r.Enter){t.preventDefault(),!y&&_&&_(t);return}i(t.key)&&t.preventDefault()}},tabIndex:y?void 0:0,...c(A),children:o("div",{className:u(["Button__content",k&&"Button__content--ellipsis"]),children:[v&&"right"!==C&&q,k?e("span",{className:"Button--ellipsis",children:$}):$,v&&"right"===C&&q]})});return D&&(E=e(B,{content:D,position:I,children:E})),E}(t=h||(h={})).Checkbox=function(t){let{checked:n,...o}=t;return e(h,{color:"transparent",icon:n?"check-square-o":"square-o",selected:n,...o})},t.Confirm=function(t){let{children:n,color:o,confirmColor:r="bad",confirmContent:i="Confirm?",confirmIcon:u,ellipsis:l=!0,icon:c,onBlur:a,onClick:s,...f}=t,[p,d]=m(!1);return e(h,{color:p?r:o,icon:p?u:c,onBlur:function(t){d(!1),a?.(t)},onClick:function(t){if(!p)return void d(!0);s?.(t),d(!1)},...f,children:p?i:n})},t.Input=function(t){let{buttonText:n,children:l,color:c="default",disabled:B,fluid:h,icon:y,iconRotation:k,iconSpin:g,maxLength:v,onCommit:x,ref:C,value:b="",...j}=t,[N,_]=m(b),[w,D]=m(!1),I=f(!1),T=a(),A=C??T;return s(()=>{w&&(A.current?.focus(),A.current?.select())},[w]),s(()=>{w||b===N||_(b)},[w,b]),o(p,{className:u(["Button",h&&"Button--fluid",B&&"Button--disabled",`Button--color--${c}`]),onClick:()=>D(!0),...j,children:[y&&e(d,{name:y,rotation:k,spin:g}),n??N,e("input",{className:"NumberInput__input",disabled:!!B,maxLength:v,onBlur:function(){I.current||b===N||(x?.(N),I.current=!1),D(!1)},onChange:function(t){_(t.currentTarget.value)},onKeyDown:function(t){if(t.key===r.Enter){t.preventDefault(),t.currentTarget.blur();return}if(i(t.key)){t.preventDefault(),I.current=!0,t.currentTarget.blur();return}},ref:A,spellCheck:"false",style:{display:w?"":"none",textAlign:"left"},type:"text",value:N})]})},t.File=function(t){let{accept:r,multiple:i,onSelectFiles:u,...l}=t,c=f(null);async function a(t){let n=Array.from(t).map(t=>{let n=new FileReader;return new Promise(e=>{n.onload=()=>e(n.result),n.readAsText(t)})});return await Promise.all(n)}async function s(t){let n=t.target.files;if(n?.length){let t=await a(n);u(i?t:t[0])}}return o(n,{children:[e(h,{onClick:()=>c.current?.click(),...l}),e("input",{accept:r,hidden:!0,multiple:i,onChange:s,ref:c,type:"file"})]})};export{h as Button};
@@ -1 +1 @@
1
- import*as e from"react/jsx-runtime";import*as n from"react";import*as t from"../common/timer.js";import*as o from"../common/ui.js";let r=[];function i(i){let{params:s,phonehome:d,...u}=i,l=(0,n.useRef)(null),m=(0,n.useRef)(function(e,n=!0){let t=r.length;r.push(null);let o=e||`byondui_${t}`;return{render:e=>{n&&Byond.sendMessage("renderByondUi",{renderByondUi:o}),r[t]=o,Byond.winset(o,e)},unmount:()=>{n&&Byond.sendMessage("unmountByondUi",{renderByondUi:o}),r[t]=null,Byond.winset(o,{parent:""})}}}(s?.id,d));function f(){let e=l.current;if(!e)return;let n=function(e){let n=window.devicePixelRatio??1,t=e.getBoundingClientRect();return{pos:[t.left*n,t.top*n],size:[(t.right-t.left)*n,(t.bottom-t.top)*n]}}(e);m.current.render({parent:Byond.windowId,...s,pos:`${n.pos[0]},${n.pos[1]}`,size:`${n.size[0]}x${n.size[1]}`})}let p=(0,t.debounce)(()=>{f()},100);return(0,n.useEffect)(()=>(window.addEventListener("resize",p),f(),()=>{window.removeEventListener("resize",p),m.current.unmount()}),[]),(0,e.jsx)("div",{ref:l,...(0,o.computeBoxProps)(u),children:(0,e.jsx)("div",{style:{minHeight:"22px"}})})}window.addEventListener("beforeunload",()=>{for(let e=0;e<r.length;e++){let n=r[e];"string"==typeof n&&(r[e]=null,Byond.winset(n,{parent:""}))}});export{i as ByondUi};
1
+ import{jsx as e}from"react/jsx-runtime";import{debounce as n}from"../common/timer.js";import{computeBoxProps as t}from"../common/ui.js";import{useEffect as o,useRef as r}from"react";let i=[];function d(d){let{params:s,phonehome:l,...u}=d,m=r(null),p=r(function(e,n=!0){let t=i.length;i.push(null);let o=e||`byondui_${t}`;return{render:e=>{n&&Byond.sendMessage("renderByondUi",{renderByondUi:o}),i[t]=o,Byond.winset(o,e)},unmount:()=>{n&&Byond.sendMessage("unmountByondUi",{renderByondUi:o}),i[t]=null,Byond.winset(o,{parent:""})}}}(s?.id,l));function f(){let e=m.current;if(!e)return;let n=function(e){let n=window.devicePixelRatio??1,t=e.getBoundingClientRect();return{pos:[t.left*n,t.top*n],size:[(t.right-t.left)*n,(t.bottom-t.top)*n]}}(e);p.current.render({parent:Byond.windowId,...s,pos:`${n.pos[0]},${n.pos[1]}`,size:`${n.size[0]}x${n.size[1]}`})}let c=n(()=>{f()},100);return o(()=>(window.addEventListener("resize",c),f(),()=>{window.removeEventListener("resize",c),p.current.unmount()}),[]),e("div",{ref:m,...t(u),children:e("div",{style:{minHeight:"22px"}})})}window.addEventListener("beforeunload",()=>{for(let e=0;e<i.length;e++){let n=i[e];"string"==typeof n&&(i[e]=null,Byond.winset(n,{parent:""}))}});export{d as ByondUi};
@@ -1 +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={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};
1
+ import{jsx as e,jsxs as t}from"react/jsx-runtime";import{zip as n}from"../common/collections.js";import{useEffect as r,useRef as i,useState as o}from"react";import{Box as l}from"./Box.js";let s={bottom:0,left:0,overflow:"hidden",position:"absolute",right:0,top:0};function f(f){let{data:h=[],rangeX:m,rangeY:p,fillColor:a="none",strokeColor:c="#ffffff",strokeWidth:u=2,...d}=f,v=i(null),[g,w]=o([600,200]),x=function(e,t,r,i){if(0===e.length)return[];let o=n(...e),l=o.map(e=>Math.min(...e)),s=o.map(e=>Math.max(...e));return void 0!==r&&(l[0]=r[0],s[0]=r[1]),void 0!==i&&(l[1]=i[0],s[1]=i[1]),e.map(e=>n(e,l,s,t).map(([e,t,n,r])=>(e-t)/(n-t)*r))}(h,g,m,p);if(x.length>0){let e=x[0],t=x[x.length-1];x.push([g[0]+u,t[1]]),x.push([g[0]+u,-u]),x.push([-u,-u]),x.push([-u,e[1]])}let $=function(e){let t="";for(let n=0;n<e.length;n++){let r=e[n];t+=`${r[0]},${r[1]} `}return t}(x);function j(){let e=v.current;if(!e)return;let t=e.getBoundingClientRect();w([t.width,t.height])}return r(()=>(window.addEventListener("resize",j),j(),()=>{window.removeEventListener("resize",j)}),[]),e(l,{position:"relative",...d,children:e("div",{ref:v,style:s,children:t("svg",{preserveAspectRatio:"none",style:s,viewBox:`0 0 ${g[0]} ${g[1]}`,children:[e("title",{children:"chart"}),e("polyline",{fill:a,points:$,stroke:c,strokeWidth:u,transform:`scale(1, -1) translate(0, -${g[1]})`})]})})})}f.Line=f;export{f as Chart};
@@ -1 +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,{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};
1
+ import{jsx as l,jsxs as e}from"react/jsx-runtime";import{useState as r}from"react";import{Box as o}from"./Box.js";import{Button as c}from"./Button.js";function i(i){let{children:n,child_mt:t=1,childStyles:a,color:m,title:s,buttons:d,icon:h,...p}=i,[b,f]=r(i.open);return e(o,{mb:1,children:[e("div",{className:"Table",children:[l("div",{className:"Table__cell",children:l(c,{color:m,fluid:!0,icon:h||(b?"chevron-down":"chevron-right"),onClick:()=>f(!b),...p,children:s})}),d&&l("div",{className:"Table__cell Table__cell--collapsing",children:d})]}),b&&l(o,{mt:t,style:a,children:n})]})}export{i as Collapsible};
@@ -1 +1 @@
1
- import*as o from"react/jsx-runtime";import*as r from"../common/react.js";import*as m from"../common/ui.js";function s(s){let{content:e,children:l,className:t,...a}=s;return a.color=e?null:"default",a.backgroundColor=s.color||"default",(0,o.jsx)("div",{className:(0,r.classes)(["ColorBox",t,(0,m.computeBoxClassName)(a)]),...(0,m.computeBoxProps)(a),children:e||""})}export{s as ColorBox};
1
+ import{jsx as o}from"react/jsx-runtime";import{classes as r}from"../common/react.js";import{computeBoxClassName as l,computeBoxProps as m}from"../common/ui.js";function t(t){let{content:c,children:e,className:n,...i}=t;return i.color=c?null:"default",i.backgroundColor=t.color||"default",o("div",{className:r(["ColorBox",n,l(i)]),...m(i),children:c||""})}export{t as ColorBox};
@@ -1 +1 @@
1
- import*as t from"react/jsx-runtime";import*as o from"./Box.js";import*as i from"./Button.js";function e(e){let{title:n,onClose:l,children:s,width:r,height:a}=e;return(0,t.jsx)("div",{className:"Dialog",children:(0,t.jsxs)(o.Box,{className:"Dialog__content",height:a,width:r||"370px",children:[(0,t.jsxs)("div",{className:"Dialog__header",children:[(0,t.jsx)("div",{className:"Dialog__title",children:n}),(0,t.jsx)(o.Box,{mr:2,children:(0,t.jsx)(i.Button,{color:"transparent",icon:"window-close-o",lineHeight:"22px",mr:"-3px",onClick:l,textAlign:"center",tooltip:"Close",tooltipPosition:"bottom-start",width:"26px"})})]}),s]})})}e.Button=function(o){let{onClick:e,children:n}=o;return(0,t.jsx)(i.Button,{className:"Dialog__button",onClick:e,verticalAlignContent:"middle",children:n})};export{e as Dialog};
1
+ import{jsx as t,jsxs as i}from"react/jsx-runtime";import{Box as o}from"./Box.js";import{Button as e}from"./Button.js";function l(l){let{title:n,onClose:r,children:a,width:c,height:s}=l;return t("div",{className:"Dialog",children:i(o,{className:"Dialog__content",height:s,width:c||"370px",children:[i("div",{className:"Dialog__header",children:[t("div",{className:"Dialog__title",children:n}),t(o,{mr:2,children:t(e,{color:"transparent",icon:"window-close-o",lineHeight:"22px",mr:"-3px",onClick:r,textAlign:"center",tooltip:"Close",tooltipPosition:"bottom-start",width:"26px"})})]}),a]})})}l.Button=function(i){let{onClick:o,children:l}=i;return t(e,{className:"Dialog__button",onClick:o,verticalAlignContent:"middle",children:l})};export{l as Dialog};
@@ -1 +1 @@
1
- import*as r from"react/jsx-runtime";import*as m from"../common/react.js";import*as e from"./Box.js";function s(s){let{className:i,children:o,...a}=s;return(0,r.jsx)(e.Box,{className:(0,m.classes)(["Dimmer",i]),...a,children:(0,r.jsx)("div",{className:"Dimmer__inner",children:o})})}export{s as Dimmer};
1
+ import{jsx as r}from"react/jsx-runtime";import{classes as m}from"../common/react.js";import{Box as e}from"./Box.js";function i(i){let{className:o,children:t,...n}=i;return r(e,{className:m(["Dimmer",o]),...n,children:r("div",{className:"Dimmer__inner",children:t})})}export{i as Dimmer};
@@ -1 +1 @@
1
- import*as i from"react/jsx-runtime";import*as r from"../common/react.js";function e(e){let{hidden:t,vertical:o}=e;return(0,i.jsx)("div",{className:(0,r.classes)(["Divider",t&&"Divider--hidden",o?"Divider--vertical":"Divider--horizontal"])})}export{e as Divider};
1
+ import{jsx as i}from"react/jsx-runtime";import{classes as r}from"../common/react.js";function e(e){let{hidden:t,vertical:o}=e;return i("div",{className:r(["Divider",t&&"Divider--hidden",o?"Divider--vertical":"Divider--horizontal"])})}export{e as Divider};
@@ -1 +1 @@
1
- import*as T from"react/jsx-runtime";import*as r from"./Image.js";var S,e=((S={})[S.NORTH=1]="NORTH",S[S.SOUTH=2]="SOUTH",S[S.EAST=4]="EAST",S[S.WEST=8]="WEST",S[S.NORTHEAST=5]="NORTHEAST",S[S.NORTHWEST=9]="NORTHWEST",S[S.SOUTHEAST=6]="SOUTHEAST",S[S.SOUTHWEST=10]="SOUTHWEST",S);function t(S){let{direction:e=2,fallback:t,frame:o=1,icon_state:E,icon:i,movement:m=!1,...n}=S,H=Byond.iconRefMap?.[i];if(!H)return t;let O=`${H}?state=${E}&dir=${e}&movement=${!!m}&frame=${o}`;return(0,T.jsx)(r.Image,{fixErrors:!0,src:O,...n})}export{e as Direction,t as DmIcon};
1
+ import{jsx as T}from"react/jsx-runtime";import{Image as r}from"./Image.js";var S,o=((S={})[S.NORTH=1]="NORTH",S[S.SOUTH=2]="SOUTH",S[S.EAST=4]="EAST",S[S.WEST=8]="WEST",S[S.NORTHEAST=5]="NORTHEAST",S[S.NORTHWEST=9]="NORTHWEST",S[S.SOUTHEAST=6]="SOUTHEAST",S[S.SOUTHWEST=10]="SOUTHWEST",S);function e(S){let{direction:o=2,fallback:e,frame:t=1,icon_state:E,icon:H,movement:O=!1,...i}=S,m=Byond.iconRefMap?.[H];return m?T(r,{fixErrors:!0,src:`${m}?state=${E}&dir=${o}&movement=${!!O}&frame=${t}`,...i}):e}export{o as Direction,e as DmIcon};
@@ -29,7 +29,10 @@ type Props = {
29
29
  maxValue: number;
30
30
  /** The minimum value. */
31
31
  minValue: number;
32
- /** An event which fires when you release the input, or successfully enter a number. */
32
+ /**
33
+ * An event which fires when you release the input or successfully enter a
34
+ * number. This is the default value event for controls.
35
+ */
33
36
  onChange: (event: Event, value: number) => void;
34
37
  /** An event which fires when you drag the input. */
35
38
  onDrag: (event: MouseEvent, value: number) => void;
@@ -1 +1 @@
1
- import*as e from"react/jsx-runtime";import*as r from"react";import*as t from"../common/keys.js";import*as n from"../common/math.js";import*as u from"./AnimatedNumber.js";function c(e,r){return e.screenX*r[0]+e.screenY*r[1]}function o(o){let{animated:a,children:s,dragMatrix:m=[1,0],format:i,maxValue:l=Number.POSITIVE_INFINITY,minValue:v=Number.NEGATIVE_INFINITY,onChange:f,onDrag:d,step:p=1,stepPixelSize:N=1,unclamped:E,unit:I,updateRate:b=400,fontSize:g,height:y,lineHeight:T}=o,[j,R]=(0,r.useState)(o.value),[h,S]=(0,r.useState)(!1),x=(0,r.useRef)(!1),F=(0,r.useRef)(o.value),L=(0,r.useRef)(0),Y=(0,r.useRef)(-1),_=(0,r.useRef)(null),k=(0,r.useRef)(null),A=(0,r.useRef)(null);function D(e){let r=c(e,m),t=r-Y.current,u=Number.isFinite(v)?v%p:0;L.current=(0,n.clamp)(L.current+t*p/N,v-p,l+p);let o=(0,n.clamp)(L.current-L.current%p+u,v,l);F.current=o,R(o),Y.current=r}function K(e){document.body.style["pointer-events"]="auto",k.current&&clearInterval(k.current),Y.current=-1,document.removeEventListener("mousemove",D),document.removeEventListener("mouseup",K),x.current&&(f?.(e,F.current),d?.(e,F.current),x.current=!1)}(0,r.useEffect)(()=>{o.value!==F.current&&(F.current=o.value,R(o.value))},[o.value]);let V=o.value;x.current&&(V=F.current);let w=(0,e.jsxs)(e.Fragment,{children:[a&&!x.current?(0,e.jsx)(u.AnimatedNumber,{format:i,value:V}):i?i(V):V,I?` ${I}`:""]}),z=(0,e.jsx)("input",{className:"NumberInput__input",onBlur:function(e){let r=Number.parseFloat(e.currentTarget.value);if(E||(r=(0,n.clamp)(r,v,l)),Number.isNaN(r))return void S(!1);L.current=r,F.current=r,R(r),f?.(e.nativeEvent,r),h&&S(!1)},onKeyDown:function(e){(e.key===t.KEY.Enter||(0,t.isEscape)(e.key))&&S(!1)},ref:_,style:{display:h?void 0:"none",fontSize:g,height:y,lineHeight:T}});return s({displayElement:w,displayValue:V,dragging:x.current,editing:h,handleDragStart:function(e){h||(document.body.style["pointer-events"]="none",Y.current=c(e.nativeEvent,m),L.current=o.value,x.current=!0,document.addEventListener("mouseup",K),A.current=setTimeout(()=>{var r=e.nativeEvent;if(x.current)document.addEventListener("mousemove",D),k.current=setInterval(()=>{x.current&&d?.(r,o.value)},b);else if(S(!0),_.current){let e=_.current;e.value=L.current.toString(),setTimeout(()=>{e.focus(),e.select()},10)}A.current&&clearTimeout(A.current)},100))},inputElement:z})}export{o as DraggableControl};
1
+ import{Fragment as e,jsx as r,jsxs as t}from"react/jsx-runtime";import{KEY as n,isEscape as u}from"../common/keys.js";import{clamp as c}from"../common/math.js";import{useEffect as o,useRef as i,useState as l}from"react";import{AnimatedNumber as m}from"./AnimatedNumber.js";function a(e,r){return e.screenX*r[0]+e.screenY*r[1]}function v(v){let{animated:s,children:d,dragMatrix:f=[1,0],format:p,maxValue:N=Number.POSITIVE_INFINITY,minValue:I=Number.NEGATIVE_INFINITY,onChange:E,onDrag:b,step:g=1,stepPixelSize:y=1,unclamped:T,unit:h,updateRate:j=400,fontSize:F,height:L,lineHeight:S}=v,[_,k]=l(v.value),[D,Y]=l(!1),x=i(!1),A=i(v.value),V=i(0),w=i(-1),z=i(null),B=i(null),C=i(null);function G(e){let r=a(e,f),t=r-w.current,n=Number.isFinite(I)?I%g:0;V.current=c(V.current+t*g/y,I-g,N+g);let u=c(V.current-V.current%g+n,I,N);A.current=u,k(u),w.current=r}function H(e){document.body.style["pointer-events"]="auto",B.current&&clearInterval(B.current),w.current=-1,document.removeEventListener("mousemove",G),document.removeEventListener("mouseup",H),x.current&&(E?.(e,A.current),b?.(e,A.current),x.current=!1)}o(()=>{v.value!==A.current&&(A.current=v.value,k(v.value))},[v.value]);let K=v.value;x.current&&(K=A.current);let O=t(e,{children:[s&&!x.current?r(m,{format:p,value:K}):p?p(K):K,h?` ${h}`:""]}),P=r("input",{className:"NumberInput__input",onBlur:function(e){let r=Number.parseFloat(e.currentTarget.value);if(T||(r=c(r,I,N)),Number.isNaN(r))return void Y(!1);V.current=r,A.current=r,k(r),E?.(e.nativeEvent,r),D&&Y(!1)},onKeyDown:function(e){(e.key===n.Enter||u(e.key))&&Y(!1)},ref:z,style:{display:D?void 0:"none",fontSize:F,height:L,lineHeight:S}});return d({displayElement:O,displayValue:K,dragging:x.current,editing:D,handleDragStart:function(e){D||(document.body.style["pointer-events"]="none",w.current=a(e.nativeEvent,f),V.current=v.value,x.current=!0,document.addEventListener("mouseup",H),C.current=setTimeout(()=>{var r=e.nativeEvent;if(x.current)document.addEventListener("mousemove",G),B.current=setInterval(()=>{x.current&&b?.(r,v.value)},j);else if(Y(!0),z.current){let e=z.current;e.value=V.current.toString(),setTimeout(()=>{e.focus(),e.select()},10)}C.current&&clearTimeout(C.current)},100))},inputElement:P})}export{v as DraggableControl};
@@ -38,6 +38,8 @@ type Props = {
38
38
  noChevron: boolean;
39
39
  /** Dropdown renders over instead of below */
40
40
  over: boolean;
41
+ /** Fill all available horizontal space */
42
+ fluid: boolean;
41
43
  /** Text to show when nothing has been selected. */
42
44
  placeholder: string;
43
45
  /** @deprecated If you want to allow dropdown breaks layout, set width 100% */
@@ -1 +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,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};
1
+ import{Fragment as o,jsx as n,jsxs as e}from"react/jsx-runtime";import{KEY as t}from"../common/keys.js";import{classes as r}from"../common/react.js";import{unit as l}from"../common/ui.js";import{useRef as i,useState as c}from"react";import{Button as d}from"./Button.js";import{Floating as s}from"./Floating.js";import{Icon as a}from"./Icon.js";function m(o){return"string"==typeof o?o:o.value}function p(p){let{autoScroll:u=!0,buttons:_,className:w,color:f="default",disabled:h,displayText:D,icon:y,iconRotation:v,iconSpin:N,iconOnly:g,menuWidth:b,noChevron:x,onClick:j,onSelected:k,options:C=[],over:B,placeholder:I="Select...",selected:T,fluid:A,width:E=15}=p,[K,O]=c(!1),S=i(null),$=C.findIndex(o=>m(o)===T)||0;function F(o){let n=o;n=o<$?o<2?0:o-2:o>C.length-3?C.length-1:o-2;let e=S.current,t=e?.children[n];e&&t&&(e.scrollTop=t.offsetTop)}function M(o){let n;if(C.length<1||h)return;let e=C.length-1;n=$<0?"next"===o?e:0:"next"===o?$===e?0:$+1:0===$?e:$-1,K&&u&&F(n),k?.(m(C[n]))}let W=B?"top":"bottom";return g&&(W=`${W}-start`),e("div",{className:r(["Dropdown",A&&"Dropdown--fluid"]),children:[n(s,{allowedOutsideClasses:".Dropdown__button",closeAfterInteract:!0,content:n("div",{className:"Dropdown__menu",ref:S,children:0===C.length?n("div",{className:"Dropdown__menu--entry",children:"No options"}):C.map(o=>{let e=m(o);return n("div",{className:r(["Dropdown__menu--entry",T===e&&"selected"]),onClick:()=>{k?.(e)},onKeyDown:o=>{o.key===t.Enter&&k?.(e)},children:"string"==typeof o?o:o.displayText},e)})}),contentAutoWidth:!b,contentClasses:"Dropdown__menu--wrapper",contentStyles:{width:b?l(b):void 0},disabled:h,onMounted:()=>{K&&u&&-1!==$&&F($)},onOpenChange:O,placement:W,children:e("div",{className:r(["Dropdown__control",`Button--color--${f}`,h&&"Button--disabled",g&&"Dropdown__control--icon-only",w]),onClick:o=>{(!h||K)&&j?.(o)},onKeyDown:o=>{o.key!==t.Enter||h||j?.(o)},style:{width:l(E)},children:[y&&n(a,{className:"Dropdown__icon",name:y,rotation:v,spin:N}),!g&&e(o,{children:[n("span",{className:"Dropdown__selected-text",children:D||T&&m(T)||I}),!x&&n(a,{className:r(["Dropdown__icon","Dropdown__icon--arrow",B&&"over",K&&"open"]),name:"chevron-down"})]})]})}),_&&e(o,{children:[n(d,{className:"Dropdown__button",disabled:h,icon:"chevron-left",onClick:()=>{M("previous")}}),n(d,{className:"Dropdown__button",disabled:h,icon:"chevron-right",onClick:()=>{M("next")}})]})]})}export{p as Dropdown};
@@ -1 +1 @@
1
- import*as e from"react/jsx-runtime";import*as t from"react";class i extends t.Component{ref=(0,t.createRef)();state={fontSize:0};constructor(e){super(e),this.resize=this.resize.bind(this),window.addEventListener("resize",this.resize)}componentDidUpdate(e){e.children!==this.props.children&&this.resize()}componentWillUnmount(){window.removeEventListener("resize",this.resize)}resize(){let e=this.ref.current;if(!e)return;let t=this.props.maxWidth,i=0,s=this.props.maxFontSize;for(let r=0;r<10;r++){let r=Math.round((i+s)/2);e.style.fontSize=`${r}px`;let n=e.offsetWidth-t;if(n>0)s=r;else if(n<(this.props.acceptableDifference??5))i=r;else break}this.setState({fontSize:Math.round((i+s)/2)})}componentDidMount(){this.resize()}render(){return(0,e.jsx)("span",{ref:this.ref,style:{fontSize:`${this.state.fontSize}px`,..."object"==typeof this.props.native?.style?this.props.native.style:{}},children:this.props.children})}}export{i as FitText};
1
+ import{jsx as e}from"react/jsx-runtime";import{Component as t,createRef as i}from"react";class s extends t{ref=i();state={fontSize:0};constructor(e){super(e),this.resize=this.resize.bind(this),window.addEventListener("resize",this.resize)}componentDidUpdate(e){e.children!==this.props.children&&this.resize()}componentWillUnmount(){window.removeEventListener("resize",this.resize)}resize(){let e=this.ref.current;if(!e)return;let t=this.props.maxWidth,i=0,s=this.props.maxFontSize;for(let r=0;r<10;r++){let r=Math.round((i+s)/2);e.style.fontSize=`${r}px`;let n=e.offsetWidth-t;if(n>0)s=r;else if(n<(this.props.acceptableDifference??5))i=r;else break}this.setState({fontSize:Math.round((i+s)/2)})}componentDidMount(){this.resize()}render(){return e("span",{ref:this.ref,style:{fontSize:`${this.state.fontSize}px`,..."object"==typeof this.props.native?.style?this.props.native.style:{}},children:this.props.children})}}export{s as FitText};
@@ -95,7 +95,7 @@ export declare function Flex(props: any): import("react/jsx-runtime").JSX.Elemen
95
95
  export declare namespace Flex {
96
96
  var Item: typeof FlexItem;
97
97
  }
98
- export declare const computeFlexItemClassName: (props: FlexItemProps) => string;
98
+ export declare function computeFlexItemClassName(props: FlexItemProps): string;
99
99
  export type FlexItemProps = Partial<{
100
100
  /** This allows the default alignment (or the one specified by align-items) to be overridden for individual flex items. */
101
101
  align: string | boolean;
@@ -1 +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,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};
1
+ import{jsx as e}from"react/jsx-runtime";import{classes as t}from"../common/react.js";import{computeBoxClassName as r,computeBoxProps as n,unit as o}from"../common/ui.js";function i(e){return t(["Flex",e.inlineFlex&&"Flex--inline",r(e)])}function l(e){let{direction:t,wrap:r,align:o,justify:i,...l}=e;return n({style:{...l.style,alignItems:o,flexDirection:t,flexWrap:!0===r?"wrap":r,justifyContent:i},...l})}function m(r){let{className:n,...o}=r;return e("div",{className:t([n,i(o)]),...l(o)})}function u(e){return t(["Flex__item",r(e)])}function s(e){let{style:t,grow:r,order:i,shrink:l,basis:m,align:u,...s}=e,c=m??e.width??(void 0!==r?0:void 0);return n({style:{...t,alignSelf:u,flexBasis:o(c),flexGrow:void 0!==r&&Number(r),flexShrink:void 0!==l&&Number(l),order:i},...s})}m.Item=function(r){let{className:n,...o}=r;return e("div",{className:t([n,u(r)]),...s(o)})};export{m as Flex,i as computeFlexClassName,u as computeFlexItemClassName,s as computeFlexItemProps,l as computeFlexProps};
@@ -1,6 +1,6 @@
1
+ import { type BooleanLike } from '../common/react.ts';
1
2
  import { type Placement } from '@floating-ui/react';
2
3
  import { type CSSProperties, type ReactNode } from 'react';
3
- import { type BooleanLike } from '../common/react';
4
4
  type Props = {
5
5
  /** Interacting with this element will open the floating element. */
6
6
  children: ReactNode;
@@ -74,6 +74,7 @@ type Props = {
74
74
  * ## Floating
75
75
  *
76
76
  * Floating lets you position elements so that they don't go out of the bounds of the window.
77
+ *
77
78
  * - [Documentation](https://floating-ui.com/docs/react) for more information.
78
79
  */
79
80
  export declare function Floating(props: Props): import("react/jsx-runtime").JSX.Element;
@@ -1 +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)({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};
1
+ import{Fragment as e,jsx as t,jsxs as n}from"react/jsx-runtime";import{classes as o}from"../common/react.js";import{FloatingPortal as i,autoUpdate as r,flip as a,offset as l,shift as s,size as c,useClick as d,useDismiss as m,useFloating as p,useHover as f,useInteractions as g,useTransitionStatus as h}from"@floating-ui/react";import{cloneElement as u,isValidElement as C,useEffect as v,useId as w,useState as F}from"react";function b(b){let x,{allowedOutsideClasses:y,animationDuration:O,children:R,closeAfterInteract:j,content:k,contentAutoWidth:z,contentClasses:E,contentOffset:M=6,contentStyles:P,disabled:S,hoverDelay:N,hoverOpen:$,handleOpen:q,onMounted:A,placement:B,preventPortal:D,stopChildPropagation:G,onOpenChange:H}=b,I=w(),[J,K]=F(!1),{refs:L,floatingStyles:Q,context:T}=p({middleware:[l(M),a({padding:6}),s(),z&&c({apply({rects:e,elements:t}){t.floating.style.width=`${e.reference.width}px`}})],onOpenChange(e){K(e),H?.(e)},open:J,placement:B||"bottom",transform:!1,whileElementsMounted:(e,t,n)=>(void 0!==A&&A(),r(e,t,n,{ancestorResize:!1,ancestorScroll:!1,elementResize:!z}))}),{isMounted:U,status:V}=h(T,{duration:O||200}),W=m(T,{ancestorScroll:!0,outsidePress:e=>!y||e.target instanceof Element&&!e.target.closest(y)}),X=d(T,{enabled:!S}),Y=f(T,{enabled:!S,restMs:N||200}),Z=void 0!==q,{getReferenceProps:_,getFloatingProps:ee}=g(Z?[]:[W,$?Y:X]),et=_({ref:L.setReference,...G&&{onClick:e=>e.stopPropagation()}}),en=ee({onClick:()=>{j&&T.onOpenChange(!1)},ref:L.setFloating});v(()=>{Z&&T.onOpenChange(q)},[q]),x=C(R)?u(R,et):t("div",{...et,children:R});let eo=t("div",{className:o(["Floating",!O&&"Floating--animated",E]),"data-position":T.placement,"data-transition":V,style:{...Q,...P},...en,children:k});return n(e,{children:[x,U&&!!k&&(D?eo:t(i,{id:I,children:eo}))]})}export{b as Floating};
@@ -1,4 +1,4 @@
1
- import { type BooleanLike } from '../common/react';
1
+ import { type BooleanLike } from '../common/react.ts';
2
2
  import type { BoxProps } from './Box';
3
3
  type Props = {
4
4
  /** Icon name. @see https://fontawesome.com/v6/search?o=r&m=free */
@@ -1 +1 @@
1
- import*as s from"react/jsx-runtime";import*as t from"../common/react.js";import*as e from"../common/ui.js";let o=/-o$/;function a(a){let{name:r="",size:c,spin:m,className:n,rotation:l,...i}=a,f=i.style||{};c&&(f.fontSize=`${100*c}%`),l&&(f.transform=`rotate(${l}deg)`),i.style=f;let p=(0,e.computeBoxProps)(i),u="";if(r.startsWith("tg-"))u=r;else{let s=o.test(r),t=r.replace(o,""),e=!t.startsWith("fa-");u=s?"far ":"fas ",e&&(u+="fa-"),u+=t,m&&(u+=" fa-spin")}return(0,s.jsx)("i",{className:(0,t.classes)(["Icon",u,n,(0,e.computeBoxClassName)(i)]),...p})}(a||(a={})).Stack=function(o){let{className:a,children:r,...c}=o;return(0,s.jsx)("span",{className:(0,t.classes)(["IconStack",a,(0,e.computeBoxClassName)(c)]),...(0,e.computeBoxProps)(c),children:r})};export{a as Icon};
1
+ import{jsx as t}from"react/jsx-runtime";import{classes as e}from"../common/react.js";import{computeBoxClassName as o,computeBoxProps as r}from"../common/ui.js";let a=/-o$/;function s(s){let{name:n="",size:c,spin:i,className:m,rotation:f,...l}=s,p=l.style||{};c&&(p.fontSize=`${100*c}%`),f&&(p.transform=`rotate(${f}deg)`),l.style=p;let u=r(l),I="";if(n.startsWith("tg-"))I=n;else{let t=a.test(n),e=n.replace(a,""),o=!e.startsWith("fa-");I=t?"far ":"fas ",o&&(I+="fa-"),I+=e,i&&(I+=" fa-spin")}return t("i",{className:e(["Icon",I,m,o(l)]),...u})}(s||(s={})).Stack=function(a){let{className:s,children:n,...c}=a;return t("span",{className:e(["IconStack",s,o(c)]),...r(c),children:n})};export{s as Icon};
@@ -9,6 +9,12 @@ type Props = Partial<{
9
9
  fixErrors: boolean;
10
10
  /** Fill is default. */
11
11
  objectFit: 'contain' | 'cover';
12
+ /**
13
+ * The image source.
14
+ *
15
+ * Use transparent base64 pixel if there is no src so we don't get a broken
16
+ * image icon when using assets.
17
+ */
12
18
  src: string;
13
19
  }> & BoxProps;
14
20
  /**
@@ -16,7 +22,7 @@ type Props = Partial<{
16
22
  *
17
23
  * A wrapper for the `<img>` element.
18
24
  *
19
- * By default, it will attempt to fix broken images by fetching them again.
25
+ * It can attempt to fix broken images by fetching them again with `fixErrors`.
20
26
  *
21
27
  * It will also try to fix blurry images by rendering them pixelated.
22
28
  */
@@ -1 +1 @@
1
- import*as A from"react/jsx-runtime";import*as e from"react";import*as r from"../common/ui.js";function t(t){let{fixBlur:o=!0,fixErrors:m=!1,objectFit:a="fill",src:i,...n}=t,s=(0,e.useRef)(0),c=(0,r.computeBoxProps)(n);return c.style={...c.style,imageRendering:o?"pixelated":"auto",objectFit:a},(0,A.jsx)("img",{onError:A=>{if(m&&s.current<5){let e=A.currentTarget;setTimeout(()=>{e.src=`${i}?attempt=${s.current}`,s.current++},1e3)}},src:i||"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVR42mNkYAAAAAYAAjCB0C8AAAAASUVORK5CYII=",...c,alt:"dm icon"})}export{t as Image};
1
+ import{jsx as r}from"react/jsx-runtime";import{computeBoxProps as e}from"../common/ui.js";import{useEffect as t,useRef as A}from"react";function n(n){let{fixBlur:u=!0,fixErrors:c,objectFit:i="fill",src:m="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVR42mNkYAAAAAYAAjCB0C8AAAAASUVORK5CYII=",...o}=n,a=A(0),l=A(null),g=e(o);return g.style={...g.style,imageRendering:u?"pixelated":"auto",objectFit:i},t(()=>()=>{l.current&&clearTimeout(l.current)},[]),r("img",{alt:"dm icon",onError:function(r){if(!c||a.current>=5){l.current&&clearTimeout(l.current);return}let e=r.currentTarget;l.current=setTimeout(()=>{e.src=`${m}?attempt=${a.current}`,a.current++},1e3)},src:m,...g})}export{n as Image};
@@ -3,9 +3,9 @@
3
3
  * @copyright 2024 Aylong (https://github.com/AyIong)
4
4
  * @license MIT
5
5
  */
6
+ import { type BooleanLike } from '../common/react.ts';
6
7
  import type { Placement } from '@floating-ui/react';
7
8
  import type { ReactNode } from 'react';
8
- import { type BooleanLike } from '../common/react';
9
9
  import type { BoxProps } from './Box';
10
10
  import { type Direction } from './DmIcon';
11
11
  type Props = Partial<{