tgui-core 4.0.4 → 4.1.1

package/dist/common/constants.d.ts

@@ -101,6 +101,6 @@ export declare function getGasFromId(gasId: string): Gas | undefined;
 export declare function getGasFromPath(gasPath: string): Gas | undefined;
 export declare const COMPONENT_COLORS: {
     readonly spectrum: readonly ["red", "orange", "yellow", "olive", "green", "teal", "blue", "violet", "purple", "pink", "brown", "grey", "gold"];
-    readonly states: readonly ["", "good", "average", "bad", "black", "white"];
+    readonly states: readonly ["default", "good", "average", "bad", "black", "white", "transparent"];
 };
 export {};

package/dist/common/constants.js

@@ -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};
+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};

package/dist/common/events.js

@@ -1 +1 @@
-let t;import{KEY_ALT as e,KEY_CTRL as i,KEY_F1 as s,KEY_F12 as r,KEY_SHIFT as n}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,d=!1,u=(t={})=>{d=!!t.ignoreWindowFocus},h=!0;function c(e,i){if(d){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 w(){a&&(a.removeEventListener("blur",w),a=null)}let y=null,m=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!==m&&(m=e,function(t){if(a||!h)return;let e=document.body;for(;t&&t!==e;){if(p.includes(t)){if(t.contains(y))return;y=t,t.focus();return}t=t.parentElement}}(e))}),window.addEventListener("focusin",t=>{var e;m=null,y=t.target,c(!0),f(t.target)&&(e=t.target,w(),(a=e).addEventListener("blur",w))}),window.addEventListener("focusout",()=>{m=null,c(!1,!0)}),window.addEventListener("blur",()=>{m=null,c(!1,!0)}),window.addEventListener("beforeunload",()=>{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===n||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<=r?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,u as setupGlobalEvents};
+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};

package/dist/common/hotkeys.js

@@ -1 +1 @@
-import{globalEvents as e}from"./events.js";import{KEY_CTRL as t,KEY_DOWN as n,KEY_ENTER as r,KEY_ESCAPE as o,KEY_F5 as i,KEY_LEFT as s,KEY_RIGHT as l,KEY_SHIFT as f,KEY_SPACE as u,KEY_TAB as a,KEY_UP as d}from"./keycodes.js";let c={},y=[o,r,u,a,t,f,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 r=n.split("."),o=r[1],i=r[2];o&&i&&(t[o]||(t[o]={}),t[o][i]=e[n])}let n=/\\"/g;function r(e){return e.substring(1,e.length-1).replace(n,'"')}for(let e in t){let n=t[e];c[r(n.name)]=r(n.command)}}),e.on("window-blur",()=>{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 r=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(!r)return;let o=c[r];if(o)return Byond.command(o);if(e.isDown()&&!m[r]){m[r]=!0;let e=K.verbParamsFn(K.keyDownVerb,r);return Byond.command(e)}if(e.isUp()&&m[r]){m[r]=!1;let e=K.verbParamsFn(K.keyUpVerb,r);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};
+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};

package/dist/common/uuid.js

@@ -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};
+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};

package/dist/components/AnimatedNumber.d.ts

@@ -1,8 +1,5 @@
-import { Component } from 'react';
 type Props = {
-    /**
-     * The target value to approach.
-     */
+    /** The target value to approach. */
     value: number;
 } & Partial<{
     /**
@@ -22,43 +19,6 @@ type Props = {
  *
  * 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> {
-    /**
-     * The inner `<span/>` being updated sixty times per second.
-     */
-    ref: import("react").RefObject<HTMLSpanElement | null>;
-    /**
-     * The interval being used to update the inner span.
-     */
-    interval?: NodeJS.Timeout;
-    /**
-     * The current value. This values approaches the target value.
-     */
-    currentValue: number;
-    constructor(props: Props);
-    componentDidMount(): void;
-    componentWillUnmount(): void;
-    shouldComponentUpdate(newProps: Props): boolean;
-    /**
-     * Starts animating the inner span. If the inner span is already animating,
-     * this is a no-op.
-     */
-    startTicking(): void;
-    /**
-     * Stops animating the inner span.
-     */
-    stopTicking(): void;
-    /**
-     * Steps forward one frame.
-     */
-    tick(): void;
-    /**
-     * Gets the inner text of the span.
-     */
-    getText(): string;
-    render(): import("react/jsx-runtime").JSX.Element;
-}
+export declare function AnimatedNumber(props: Props): import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/components/AnimatedNumber.js

@@ -1 +1 @@
-import{jsx as t}from"react/jsx-runtime";import{clamp as e,isSafeNumber as r,toFixed as i}from"../common/math.js";import{Component as n,createRef as s}from"react";let a=1e3/60;class h extends n{ref=s();interval;currentValue=0;constructor(t){super(t);let{initial:e,value:i}=t;void 0!==e&&r(e)?this.currentValue=e:r(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(),a))}stopTicking(){void 0!==this.interval&&(clearInterval(this.interval),this.interval=void 0)}tick(){let{currentValue:t}=this,{value:e}=this.props;r(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:n}=this,{format:s,value:a}=t;if(!r(a))return String(a);if(s)return s(this.currentValue);let h=String(a).split(".")[1];return i(n,e(h?h.length:0,0,8))}render(){return t("span",{ref:this.ref,children:this.getText()})}}export{h as AnimatedNumber};
+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};

package/dist/components/Box.d.ts

@@ -29,21 +29,20 @@ type InternalProps = Partial<{
     /** The inline style of the component. */
     style: CSSProperties;
     /**
-     * ### tw
      * A shorthand classname syntax based loosely on tailwind.
      *
      * This takes all Box style props with a dash separator for params, e.g.'mb-4' or the prop name alone e.g. 'bold'.
      *
      * It's compatible with regular Box props, even on the same component, but it will take precedence.
      *
-     * ### Example:
+     * Example:
      * ```tsx
      * <Box tw="mb-2 bold fontSize-16px">
      *  // Is equivalent to
      * <Box mb={2} bold fontSize="16px">
      *  ```
      *
-     * ### Caveats:
+     * Caveats:
      * 1. You can't use this for custom props from other components.
      *
      * 2. There is no type info or safety for this method. Like the old days, it simply won't work if you use it incorrectly.

package/dist/components/Button.js

@@ -1 +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,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:T,verticalAlignContent:A,...I}=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",C&&`Button--icon-${C}`,A&&"Button--flex",A&&g&&"Button--flex--fluid",A&&`Button--verticalAlignContent--${A}`,m&&"string"==typeof m?`Button--color--${m}`:"Button--color--default",f,l(I)]),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(I),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:T,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),T=f(!1),A=a(),I=C??A;return s(()=>{w&&(I.current?.focus(),I.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(){T.current||b===N||(x?.(N),T.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(),T.current=!0,t.currentTarget.blur();return}},ref:I,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};
+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};

package/dist/components/DraggableControl.d.ts

@@ -29,7 +29,10 @@ type Props = {
     maxValue: number;
     /** The minimum value. */
     minValue: number;
-    /** An event which fires when you release the input, or successfully enter a number. */
+    /**
+     * An event which fires when you release the input or successfully enter a
+     * number. This is the default value event for controls.
+     */
     onChange: (event: Event, value: number) => void;
     /** An event which fires when you drag the input. */
     onDrag: (event: MouseEvent, value: number) => void;

package/dist/components/Flex.d.ts

@@ -95,7 +95,7 @@ export declare function Flex(props: any): import("react/jsx-runtime").JSX.Elemen
 export declare namespace Flex {
     var Item: typeof FlexItem;
 }
-export declare const computeFlexItemClassName: (props: FlexItemProps) => string;
+export declare function computeFlexItemClassName(props: FlexItemProps): string;
 export type FlexItemProps = Partial<{
     /** This allows the default alignment (or the one specified by align-items) to be overridden for individual flex items. */
     align: string | boolean;

package/dist/components/Flex.js

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

package/dist/components/Floating.d.ts

@@ -74,6 +74,7 @@ type Props = {
  * ## Floating
  *
  *  Floating lets you position elements so that they don't go out of the bounds of the window.
+ *
  * - [Documentation](https://floating-ui.com/docs/react) for more information.
  */
 export declare function Floating(props: Props): import("react/jsx-runtime").JSX.Element;

package/dist/components/Floating.js

@@ -1 +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 g,useInteractions as f,useTransitionStatus as h}from"@floating-ui/react";import{cloneElement as u,isValidElement as C,useEffect as v,useState as w}from"react";function F(F){let b,{allowedOutsideClasses:x,animationDuration:y,children:O,closeAfterInteract:R,content:j,contentAutoWidth:k,contentClasses:z,contentOffset:E=6,contentStyles:M,disabled:P,hoverDelay:S,hoverOpen:N,handleOpen:$,onMounted:q,placement:A,preventPortal:B,stopChildPropagation:D,onOpenChange:G}=F,[H,I]=w(!1),{refs:J,floatingStyles:K,context:L}=p({middleware:[l(E),a({padding:6}),s(),k&&c({apply({rects:e,elements:t}){t.floating.style.width=`${e.reference.width}px`}})],onOpenChange(e){I(e),G?.(e)},open:H,placement:A||"bottom",transform:!1,whileElementsMounted:(e,t,n)=>(void 0!==q&&q(),r(e,t,n,{ancestorResize:!1,ancestorScroll:!1,elementResize:!k}))}),{isMounted:Q,status:T}=h(L,{duration:y||200}),U=m(L,{ancestorScroll:!0,outsidePress:e=>!x||e.target instanceof Element&&!e.target.closest(x)}),V=d(L,{enabled:!P}),W=g(L,{enabled:!P,restMs:S||200}),X=void 0!==$,{getReferenceProps:Y,getFloatingProps:Z}=f(X?[]:[U,N?W:V]),_=Y({ref:J.setReference,...D&&{onClick:e=>e.stopPropagation()}}),ee=Z({onClick:()=>{R&&L.onOpenChange(!1)},ref:J.setFloating});v(()=>{X&&L.onOpenChange($)},[$]),b=C(O)?u(O,_):t("div",{..._,children:O});let et=t("div",{className:o(["Floating",!y&&"Floating--animated",z]),"data-position":L.placement,"data-transition":T,style:{...K,...M},...ee,children:j});return n(e,{children:[b,Q&&!!j&&(B?et:t(i,{id:"tgui-root",children:et}))]})}export{F as Floating};
+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};

package/dist/components/Input.d.ts

@@ -44,7 +44,8 @@ export type TextInputProps<TElement = HTMLInputElement> = Partial<{
      * Use this if you want to hold the value in the parent for external
      * manipulation. For instance:
      *
-     * ### Clearing the input
+     * Clearing the input
+     *
      * ```tsx
      * const [value, setValue] = useState('');
      *
@@ -63,7 +64,8 @@ export type TextInputProps<TElement = HTMLInputElement> = Partial<{
      * )
      * ```
      *
-     * ### Updating the value from the backend
+     * Updating the value from the backend
+     *
      * ```tsx
      * const { data } = useBackend<Data>();
      * const { valveSetting } = data;

package/dist/components/Input.js

@@ -1 +1 @@
-import{jsx as e}from"react/jsx-runtime";import{KEY as t,isEscape as r}from"../common/keys.js";import{classes as n}from"../common/react.js";import{debounce as u}from"../common/timer.js";import{computeBoxClassName as o,computeBoxProps as m}from"../common/ui.js";import{useEffect as c,useRef as l,useState as a}from"react";let i=u(e=>e(),250);function p(u){let{autoFocus:p,autoSelect:f,className:s,disabled:d,expensive:g,fluid:v,maxLength:T,monospace:j,onBlur:y,onChange:I,onEnter:b,onEscape:h,onKeyDown:k,placeholder:x,ref:C,selfClear:D,value:E,...w}=u,B=l(null),K=C??B,[L,N]=a(E??"");c(()=>{let e;return(p||f)&&(e=setTimeout(()=>{K.current?.focus(),f&&K.current?.select()},1)),()=>clearTimeout(e)},[]),c(()=>{K.current&&document.activeElement!==K.current&&E!==L&&N(E??"")},[E]);let q=m(w),z=n(["Input",d&&"Input--disabled",v&&"Input--fluid",j&&"Input--monospace",o(w),s]);return e("input",{...q,autoComplete:"off",className:z,disabled:d,maxLength:T,onBlur:function(e){y?.(L)},onChange:function(e){let t=e.currentTarget.value;N(t),g?i(()=>I?.(t)):I?.(t)},onKeyDown:function(e){if(k?.(e),e.key===t.Enter){e.preventDefault(),b?.(e.currentTarget.value),D&&N(""),e.currentTarget.blur();return}r(e.key)&&(e.preventDefault(),h?.(e.currentTarget.value),e.currentTarget.blur())},placeholder:x,ref:K,spellCheck:!1,type:"text",value:L})}export{p as Input};
+import{jsx as e}from"react/jsx-runtime";import{KEY as t,isEscape as r}from"../common/keys.js";import{classes as n}from"../common/react.js";import{debounce as u}from"../common/timer.js";import{computeBoxClassName as o,computeBoxProps as m}from"../common/ui.js";import{useEffect as c,useRef as l,useState as a}from"react";let i=u(e=>e(),250);function p(u){let{autoFocus:p,autoSelect:f,className:s,disabled:d,expensive:g,fluid:v,maxLength:T,monospace:j,onBlur:y,onChange:I,onEnter:b,onEscape:h,onKeyDown:k,placeholder:x,ref:C,selfClear:D,value:E,...w}=u,B=l(null),K=C??B,[L,N]=a(E??"");c(()=>{let e;return(p||f)&&(e=setTimeout(()=>{K.current?.focus(),f&&K.current?.select()},1)),()=>clearTimeout(e)},[]),c(()=>{K.current&&document.activeElement!==K.current&&E!==L&&N(E??"")},[E]);let q=m(w),z=n(["Input",d&&"Input--disabled",v&&"Input--fluid",j&&"Input--monospace",o(w),s]);return e("input",{...q,autoComplete:"off",className:z,disabled:d,maxLength:T,onBlur:()=>y?.(L),onChange:function(e){let t=e.currentTarget.value;N(t),g?i(()=>I?.(t)):I?.(t)},onKeyDown:function(e){if(k?.(e),e.key===t.Enter){e.preventDefault(),b?.(e.currentTarget.value),D&&N(""),e.currentTarget.blur();return}r(e.key)&&(e.preventDefault(),h?.(e.currentTarget.value),e.currentTarget.blur())},placeholder:x,ref:K,spellCheck:!1,type:"text",value:L})}export{p as Input};

package/dist/components/Knob.d.ts

@@ -22,12 +22,12 @@ type Props = {
     maxValue: number;
     /** Lowest possible value. */
     minValue: number;
-    /** Adjust value by this amount when dragging the input. */
-    onChange: (event: Event, value: number) => void;
     /**
-     * An event, which fires about every 500ms when you drag the input up and
-     * down, on release and on manual editing.
+     * An event which fires when release the knob or enter a number. This is the
+     * default value event for controls.
      */
+    onChange: (event: Event, value: number) => void;
+    /** An event which fires about every 500ms while dragging the input */
     onDrag: (event: Event, value: number) => void;
     /**
      * Applies a `color` to the outer ring around the knob based on whether the

package/dist/components/Modal.d.ts

@@ -1,10 +1,9 @@
-import type { KeyboardEvent } from 'react';
 import type { BoxProps } from './Box';
 export type ModalProps = Partial<{
     /** Fires once the enter key is pressed */
-    onEnter: (e: KeyboardEvent<HTMLInputElement>) => void;
+    onEnter: (e: React.KeyboardEvent<HTMLInputElement>) => void;
     /** Fires once the escape key is pressed */
-    onEscape: (e: KeyboardEvent<HTMLInputElement>) => void;
+    onEscape: (e: React.KeyboardEvent<HTMLInputElement>) => void;
 }> & BoxProps;
 /**
  * ## Modal

package/dist/components/NumberInput.d.ts

@@ -1,5 +1,5 @@
 import { type BooleanLike } from '../common/react.ts';
-import { Component, type FocusEventHandler, type KeyboardEventHandler, type MouseEventHandler } from 'react';
+import { Component, type FocusEventHandler, type KeyboardEventHandler } from 'react';
 import { type BoxProps } from './Box';
 type Props = Required<{
     /** Highest possible value. */
@@ -49,7 +49,7 @@ export declare class NumberInput extends Component<Props, State> {
     dragInterval: NodeJS.Timeout;
     state: State;
     componentDidMount(): void;
-    handleDragStart: MouseEventHandler<HTMLDivElement>;
+    handleDragStart: React.MouseEventHandler<HTMLDivElement>;
     handleDragMove: (event: MouseEvent) => void;
     handleDragEnd: (_event: MouseEvent) => void;
     handleBlur: FocusEventHandler<HTMLInputElement>;

package/dist/components/RestrictedInput.d.ts

@@ -22,7 +22,8 @@ type Props = Partial<{
      * Use this if you want to hold the value in the parent for external
      * manipulation. For instance:
      *
-     * ### Clearing the input
+     * Clearing the input
+     *
      * ```tsx
      * const [value, setValue] = useState(1);
      *
@@ -41,7 +42,8 @@ type Props = Partial<{
      * )
      * ```
      *
-     * ### Updating the value from the backend
+     * Updating the value from the backend
+     *
      * ```tsx
      * const { data } = useBackend<Data>();
      * const { valveSetting } = data;

package/dist/components/Slider.d.ts

@@ -23,12 +23,12 @@ type Props = {
     fillValue: number;
     /** Format value using this function before displaying it. */
     format: (value: number) => string;
-    /** Adjust value by this amount when dragging the input. */
-    onChange: (event: Event, value: number) => void;
     /**
-     * An event which fires when you release the input or successfully enter
-     * a number.
+     * An event which fires when you release the slider or enter a number. This is
+     * the default value event for controls.
      */
+    onChange: (event: Event, value: number) => void;
+    /** An event which fires only while dragging the slider. */
     onDrag: (event: Event, value: number) => void;
     /**
      * Applies a `color` to the slider based on whether the value lands in the

package/dist/components/Slider.js

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

package/dist/components/Stack.d.ts

@@ -34,7 +34,7 @@ type Props = Partial<{
  * </Stack>
  * ```
  *
- * ### High level window layout
+ * **High level window layout**
  * Stacks can be used for high level window layout.
  * Make sure to use the `fill` property.
  *

package/dist/components/Tabs.js

@@ -1 +1 @@
-import{jsx as a,jsxs as e}from"react/jsx-runtime";import{canRender as i,classes as s}from"../common/react.js";import{computeBoxClassName as r,computeBoxProps as c}from"../common/ui.js";import{Icon as l}from"./Icon.js";function t(e){let{className:i,vertical:l,fill:t,fluid:n,children:o,...m}=e;return a("div",{className:s(["Tabs",l?"Tabs--vertical":"Tabs--horizontal",t&&"Tabs--fill",n&&"Tabs--fluid",i,r(m)]),...c(m),children:o})}(t||(t={})).Tab=function(t){let{className:n,selected:o,color:m,icon:b,iconSpin:T,leftSlot:d,rightSlot:f,children:_,onClick:h,...u}=t;return e("div",{className:s(["Tab","Tabs__Tab",`Tab--color--${m}`,o&&"Tab--selected",n,r(u)]),onClick:function(a){h&&h(a)},...c(u),children:[i(d)&&a("div",{className:"Tab__left",children:d})||!!b&&a("div",{className:"Tab__left",children:a(l,{name:b,spin:T})}),a("div",{className:"Tab__text",children:_}),i(f)&&a("div",{className:"Tab__right",children:f})]})};export{t as Tabs};
+import{jsx as a,jsxs as e}from"react/jsx-runtime";import{canRender as s,classes as i}from"../common/react.js";import{computeBoxClassName as r,computeBoxProps as l}from"../common/ui.js";import{Icon as c}from"./Icon.js";function t(e){let{className:s,vertical:c,fill:t,fluid:o,children:m,...n}=e;return a("div",{className:i(["Tabs",c?"Tabs--vertical":"Tabs--horizontal",t&&"Tabs--fill",o&&"Tabs--fluid",s,r(n)]),...l(n),children:m})}(t||(t={})).Tab=function(t){let{className:o,selected:m,color:n,icon:b,iconSpin:T,leftSlot:d,rightSlot:_,children:f,onClick:h,...u}=t;return e("div",{className:i(["Tab","Tabs__Tab",`Tab--color--${n}`,m&&"Tab--selected",o,r(u)]),onClick:a=>h?.(a),...l(u),children:[s(d)&&a("div",{className:"Tab__left",children:d})||!!b&&a("div",{className:"Tab__left",children:a(c,{name:b,spin:T})}),a("div",{className:"Tab__text",children:f}),s(_)&&a("div",{className:"Tab__right",children:_})]})};export{t as Tabs};

package/package.json

@@ -11,32 +11,32 @@
     "@rsbuild/plugin-react": "^1.3.2",
     "@rsbuild/plugin-sass": "^1.3.2",
     "@rslib/core": "^0.9.2",
-    "@storybook/addon-docs": "^9.0.6",
+    "@storybook/addon-docs": "^9.0.9",
     "@types/bun": "^1.2.15",
     "@types/react": "^19.1.7",
     "@types/react-dom": "^19.1.6",
     "prettier": "^3.5.3",
     "sass": "^1.89.2",
-    "storybook": "^9.0.6",
+    "storybook": "^9.0.9",
     "storybook-addon-sass-postcss": "^0.3.2",
     "storybook-react-rsbuild": "^2.0.1",
     "typescript": "^5.8.3"
   },
   "exports": {
     "./*": {
-      "import": "./dist/common/*.js",
-      "require": "./dist/common/*.cjs"
+      "import": "./dist/common/*.js"
     },
     "./components": {
-      "import": "./dist/components/index.js",
-      "require": "./dist/components/index.cjs"
+      "import": "./dist/components/index.js"
     },
     "./styles": {
-      "sass": "./styles/main.scss",
       "default": "./styles/main.scss"
     },
+    "./styles/*": {
+      "default": "./styles/*"
+    },
     "./styles/components/*": {
-      "sass": "./styles/components/*"
+      "default": "./styles/components/*"
     }
   },
   "files": [
@@ -68,5 +68,5 @@
     "test": "bun test"
   },
   "type": "module",
-  "version": "4.0.4"
+  "version": "4.1.1"
 }

package/styles/atomic/candystripe.scss

@@ -0,0 +1,8 @@
+/* Using :where for 0 specificity - https://developer.mozilla.org/en-US/docs/Web/CSS/:where */
+:where(.candystripe:nth-child(odd)) {
+  background-color: var(--candystripe-odd);
+}
+
+:where(.candystripe:nth-child(even)) {
+  background-color: var(--candystripe-even);
+}

package/styles/atomic/centered-image.scss

@@ -0,0 +1,7 @@
+.centered-image {
+  position: absolute;
+  height: 100%;
+  left: 50%;
+  top: 50%;
+  transform: translateX(-50%) translateY(-50%);
+}

package/styles/atomic/color.scss

@@ -0,0 +1,17 @@
+@use "../colors.scss";
+
+$map-keys: colors.$color-map !default;
+
+@each $color-name, $color-value in $map-keys {
+  .color-#{$color-name} {
+    color: hsl(from $color-value h s calc(l + var(--adjust-color))) !important;
+  }
+}
+
+@each $color-name, $color-value in $map-keys {
+  .color-bg-#{$color-name} {
+    background-color: hsl(
+      from $color-value h s calc(l - var(--adjust-color))
+    ) !important;
+  }
+}

package/styles/atomic/debug-layout.scss

@@ -0,0 +1,12 @@
+.debug-layout,
+.debug-layout *:not(g):not(path) {
+  color: hsla(0, 0%, 100%, 0.9) !important;
+  background: transparent !important;
+  outline: 1px solid hsla(0, 0%, 100%, 0.5) !important;
+  box-shadow: none !important;
+  filter: none !important;
+
+  &:hover {
+    outline-color: hsla(0, 0%, 100%, 0.8) !important;
+  }
+}

package/styles/atomic/fit-text.scss

@@ -0,0 +1,15 @@
+$mqIterations: 19;
+@mixin fontResize($iterations) {
+  $i: 1;
+  @while $i <= $iterations {
+    $minWidth: 100px * $i;
+    @media all and (min-width: $minWidth) {
+      .fit-text {
+        font-size: 0.1em * $i;
+      }
+    }
+    $i: $i + 1;
+  }
+}
+
+@include fontResize($mqIterations);

package/styles/atomic/links.scss

@@ -0,0 +1,21 @@
+a {
+  cursor: var(--cursor-pointer);
+  color: var(--color-hyperlink);
+  transition: color var(--transition-time-medium);
+
+  &:hover,
+  &:active {
+    color: hsl(from var(--color-hyperlink) h s calc(l + var(--adjust-hover)));
+  }
+
+  &:visited {
+    color: var(--color-hyperlink-visited);
+
+    &:hover,
+    &:active {
+      color: hsl(
+        from var(--color-hyperlink-visited) h s calc(l + var(--adjust-hover))
+      );
+    }
+  }
+}

package/styles/atomic/outline.scss

@@ -0,0 +1,43 @@
+@use "../colors.scss";
+
+.outline-dotted {
+  outline-style: dotted !important;
+}
+
+.outline-dashed {
+  outline-style: dashed !important;
+}
+
+.outline-solid {
+  outline-style: solid !important;
+}
+
+.outline-double {
+  outline-style: double !important;
+}
+
+.outline-groove {
+  outline-style: groove !important;
+}
+
+.outline-ridge {
+  outline-style: ridge !important;
+}
+
+.outline-inset {
+  outline-style: inset !important;
+}
+
+.outline-outset {
+  outline-style: outset !important;
+}
+
+$map-keys: colors.$color-map !default;
+
+@each $color-name, $color-value in $map-keys {
+  .outline-color-#{$color-name} {
+    outline: var(--border-thickness-small)
+      solid
+      hsl(from $color-value h s calc(l + var(--adjust-color))) !important;
+  }
+}

package/styles/atomic/text.scss

@@ -0,0 +1,39 @@
+.text-left {
+  text-align: left;
+}
+
+.text-center {
+  text-align: center;
+}
+
+.text-right {
+  text-align: right;
+}
+
+.text-baseline {
+  text-align: baseline;
+}
+
+.text-justify {
+  text-align: justify;
+}
+
+.text-nowrap {
+  white-space: nowrap;
+}
+
+.text-pre {
+  white-space: pre;
+}
+
+.text-bold {
+  font-weight: bold;
+}
+
+.text-italic {
+  font-style: italic;
+}
+
+.text-underline {
+  text-decoration: underline;
+}