tgui-core 3.1.2 → 3.1.4

package/dist/common/constants.d.ts

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

package/dist/common/constants.js

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

package/dist/common/eventbus.d.ts

@@ -0,0 +1,49 @@
+/**
+ * ## EventBus
+ *
+ * Handles different event messages from byond and TGUI.
+ *
+ * Don't fret! This is a simple class under the hood. Using some typescript-fu,
+ * it's able to provide type safety for the event types and their payloads.
+ *
+ * The philosophy: This interacts directly with state managers in vanilla JS,
+ * offering a way to handle browser events. UIs then subscribe to these states
+ * and update accordingly.
+ *
+ * @usage
+ * ```ts
+ * const bus = new EventBus(listeners);
+ *
+ * // These are the event types and their corresponding callbacks.
+ * const listeners = {
+ *   'messageTypeA': (message) => { logger.log(message.payload); },
+ * } as const;
+ *
+ * // You can further shorten this by linking a function to the event type:
+ * function messageTypeA(payload: { text: string }) {
+ *  logger.log(payload.text);
+ * }
+ *
+ * const listeners = {
+ *   messageTypeA,
+ * } as const;
+ *
+ *
+ * // Later, dispatch a message:
+ * const message: ByondMessage = {
+ *   type: 'messageTypeA',
+ *   payload: { text: 'Hello, world!' },
+ * };
+ *
+ * bus.dispatch(message);
+ * ```
+ */
+export declare class EventBus<TListeners extends Readonly<Record<string, (payload: unknown) => void>>> {
+    private listeners;
+    constructor(initialListeners: TListeners);
+    /** Dispatch a message to the appropriate listener. */
+    dispatch<TType extends keyof TListeners>(message: {
+        type: TType;
+        payload?: Parameters<TListeners[TType]>[0];
+    }): void;
+}

package/dist/common/eventbus.js

@@ -0,0 +1 @@
+class s{listeners={};constructor(s){this.listeners=s}dispatch(s){this.listeners[s.type]?.(s.payload)}}export{s as EventBus};

package/dist/common/keycodes.d.ts

@@ -61,6 +61,16 @@ export declare const KEY_W = 87;
 export declare const KEY_X = 88;
 export declare const KEY_Y = 89;
 export declare const KEY_Z = 90;
+export declare const KEY_NUMPAD_0 = 96;
+export declare const KEY_NUMPAD_1 = 97;
+export declare const KEY_NUMPAD_2 = 98;
+export declare const KEY_NUMPAD_3 = 99;
+export declare const KEY_NUMPAD_4 = 100;
+export declare const KEY_NUMPAD_5 = 101;
+export declare const KEY_NUMPAD_6 = 102;
+export declare const KEY_NUMPAD_7 = 103;
+export declare const KEY_NUMPAD_8 = 104;
+export declare const KEY_NUMPAD_9 = 105;
 export declare const KEY_F1 = 112;
 export declare const KEY_F2 = 113;
 export declare const KEY_F3 = 114;

package/dist/common/keycodes.js

@@ -1 +1 @@
-let E=8,K=9,_=13,Y=16,A=17,F=18,T=19,S=20,C=27,L=32,P=33,O=34,R=35,I=36,N=37,H=38,U=39,B=40,D=45,M=46,G=48,Q=49,W=50,e=51,t=52,l=53,o=54,p=55,r=56,x=57,J=65,V=66,X=67,Z=68,a=69,b=70,c=71,d=72,f=73,g=74,h=75,i=76,j=77,k=78,m=79,n=80,q=81,s=82,u=83,v=84,w=85,y=86,z=87,$=88,EE=89,EK=90,E_=112,EY=113,EA=114,EF=115,ET=116,ES=117,EC=118,EL=119,EP=120,EO=121,ER=122,EI=123,EN=186,EH=187,EU=188,EB=189,ED=190,EM=191,EG=219,EQ=220,EW=221,Ee=222;export{G as KEY_0,Q as KEY_1,W as KEY_2,e as KEY_3,t as KEY_4,l as KEY_5,o as KEY_6,p as KEY_7,r as KEY_8,x as KEY_9,J as KEY_A,F as KEY_ALT,V as KEY_B,EQ as KEY_BACKSLASH,E as KEY_BACKSPACE,X as KEY_C,S as KEY_CAPSLOCK,EU as KEY_COMMA,A as KEY_CTRL,Z as KEY_D,M as KEY_DELETE,B as KEY_DOWN,a as KEY_E,R as KEY_END,_ as KEY_ENTER,EH as KEY_EQUAL,C as KEY_ESCAPE,b as KEY_F,E_ as KEY_F1,EO as KEY_F10,ER as KEY_F11,EI as KEY_F12,EY as KEY_F2,EA as KEY_F3,EF as KEY_F4,ET as KEY_F5,ES as KEY_F6,EC as KEY_F7,EL as KEY_F8,EP as KEY_F9,c as KEY_G,d as KEY_H,I as KEY_HOME,f as KEY_I,D as KEY_INSERT,g as KEY_J,h as KEY_K,i as KEY_L,N as KEY_LEFT,EG as KEY_LEFT_BRACKET,j as KEY_M,EB as KEY_MINUS,k as KEY_N,m as KEY_O,n as KEY_P,O as KEY_PAGEDOWN,P as KEY_PAGEUP,T as KEY_PAUSE,ED as KEY_PERIOD,q as KEY_Q,Ee as KEY_QUOTE,s as KEY_R,U as KEY_RIGHT,EW as KEY_RIGHT_BRACKET,u as KEY_S,EN as KEY_SEMICOLON,Y as KEY_SHIFT,EM as KEY_SLASH,L as KEY_SPACE,v as KEY_T,K as KEY_TAB,w as KEY_U,H as KEY_UP,y as KEY_V,z as KEY_W,$ as KEY_X,EE as KEY_Y,EK as KEY_Z};
+let E=8,_=9,K=13,Y=16,A=17,P=18,N=19,U=20,D=27,F=32,M=33,T=34,S=35,C=36,L=37,O=38,R=39,I=40,H=45,B=46,G=48,Q=49,W=50,e=51,t=52,l=53,o=54,p=55,r=56,x=57,J=65,V=66,X=67,Z=68,a=69,b=70,c=71,d=72,f=73,g=74,h=75,i=76,j=77,k=78,m=79,n=80,q=81,s=82,u=83,v=84,w=85,y=86,z=87,$=88,EE=89,E_=90,EK=96,EY=97,EA=98,EP=99,EN=100,EU=101,ED=102,EF=103,EM=104,ET=105,ES=112,EC=113,EL=114,EO=115,ER=116,EI=117,EH=118,EB=119,EG=120,EQ=121,EW=122,Ee=123,Et=186,El=187,Eo=188,Ep=189,Er=190,Ex=191,EJ=219,EV=220,EX=221,EZ=222;export{G as KEY_0,Q as KEY_1,W as KEY_2,e as KEY_3,t as KEY_4,l as KEY_5,o as KEY_6,p as KEY_7,r as KEY_8,x as KEY_9,J as KEY_A,P as KEY_ALT,V as KEY_B,EV as KEY_BACKSLASH,E as KEY_BACKSPACE,X as KEY_C,U as KEY_CAPSLOCK,Eo as KEY_COMMA,A as KEY_CTRL,Z as KEY_D,B as KEY_DELETE,I as KEY_DOWN,a as KEY_E,S as KEY_END,K as KEY_ENTER,El as KEY_EQUAL,D as KEY_ESCAPE,b as KEY_F,ES as KEY_F1,EQ as KEY_F10,EW as KEY_F11,Ee as KEY_F12,EC as KEY_F2,EL as KEY_F3,EO as KEY_F4,ER as KEY_F5,EI as KEY_F6,EH as KEY_F7,EB as KEY_F8,EG as KEY_F9,c as KEY_G,d as KEY_H,C as KEY_HOME,f as KEY_I,H as KEY_INSERT,g as KEY_J,h as KEY_K,i as KEY_L,L as KEY_LEFT,EJ as KEY_LEFT_BRACKET,j as KEY_M,Ep as KEY_MINUS,k as KEY_N,EK as KEY_NUMPAD_0,EY as KEY_NUMPAD_1,EA as KEY_NUMPAD_2,EP as KEY_NUMPAD_3,EN as KEY_NUMPAD_4,EU as KEY_NUMPAD_5,ED as KEY_NUMPAD_6,EF as KEY_NUMPAD_7,EM as KEY_NUMPAD_8,ET as KEY_NUMPAD_9,m as KEY_O,n as KEY_P,T as KEY_PAGEDOWN,M as KEY_PAGEUP,N as KEY_PAUSE,Er as KEY_PERIOD,q as KEY_Q,EZ as KEY_QUOTE,s as KEY_R,R as KEY_RIGHT,EX as KEY_RIGHT_BRACKET,u as KEY_S,Et as KEY_SEMICOLON,Y as KEY_SHIFT,Ex as KEY_SLASH,F as KEY_SPACE,v as KEY_T,_ as KEY_TAB,w as KEY_U,O as KEY_UP,y as KEY_V,z as KEY_W,$ as KEY_X,EE as KEY_Y,E_ as KEY_Z};

package/dist/common/math.d.ts

@@ -41,3 +41,7 @@ export declare function numberOfDecimalDigits(value: number): number;
  * Ensures the number is valid and not infinite/NaN.
  */
 export declare function isSafeNumber(value: number): boolean;
+/**
+ * Converts a value in radians to degrees.
+ */
+export declare function rad2deg(rad: number): number;

package/dist/common/math.js

@@ -1 +1 @@
-function n(n,t,e){return n<t?t:n>e?e:n}function t(n){return n<0?0:n>1?1:n}function e(n,t=0,r=100){return(n-t)/(r-t)}function r(n,t){return Number.parseFloat((Math.round(n*10**t+1e-4*(n>=0?1:-1))/10**t).toFixed(t))}function u(n,t=0){return Number(n).toFixed(Math.max(t,0))}function i(n,t){return t&&n>=t[0]&&n<=t[1]}function o(n,t){for(let e of Object.keys(t))if(i(n,t[e]))return e}function f(n){return Math.floor(n)!==n&&n.toString().split(".")[1].length||0}function a(n){return"number"==typeof n&&Number.isFinite(n)&&!Number.isNaN(n)}export{n as clamp,t as clamp01,i as inRange,a as isSafeNumber,o as keyOfMatchingRange,f as numberOfDecimalDigits,r as round,e as scale,u as toFixed};
+function n(n,t,e){return n<t?t:n>e?e:n}function t(n){return n<0?0:n>1?1:n}function e(n,t=0,r=100){return(n-t)/(r-t)}function r(n,t){return Number.parseFloat((Math.round(n*10**t+1e-4*(n>=0?1:-1))/10**t).toFixed(t))}function u(n,t=0){return Number(n).toFixed(Math.max(t,0))}function i(n,t){return t&&n>=t[0]&&n<=t[1]}function o(n,t){for(let e of Object.keys(t))if(i(n,t[e]))return e}function f(n){return Math.floor(n)!==n&&n.toString().split(".")[1].length||0}function a(n){return"number"==typeof n&&Number.isFinite(n)&&!Number.isNaN(n)}function c(n){return 180/Math.PI*n}export{n as clamp,t as clamp01,i as inRange,a as isSafeNumber,o as keyOfMatchingRange,f as numberOfDecimalDigits,c as rad2deg,r as round,e as scale,u as toFixed};

package/dist/components/Floating.d.ts

@@ -33,6 +33,8 @@ type Props = {
      * @default 200
      */
     animationDuration: number;
+    /** Direct content open state control. */
+    handleOpen: boolean;
     /** Content will open when you hover over children. */
     hoverOpen: boolean;
     /**
@@ -48,6 +50,8 @@ type Props = {
      * - Classes must be sent like this: `".class1, .class2"`
      */
     allowedOutsideClasses: string;
+    /** Do not wrap content in FloatingPortal, thus preventing it from moving into the body */
+    preventPortal: true;
     /** Stops event propagation on children. */
     stopChildPropagation: boolean;
     /** Close the content after interaction with it. */

package/dist/components/Floating.js

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

package/dist/components/Input.d.ts

@@ -26,6 +26,8 @@ export type BaseInputProps = Partial<{
 export type TextInputProps = Partial<{
     /** The maximum length of the input value */
     maxLength: number;
+    /** Fires each time focus leaves the input, including if Esc or Enter are pressed */
+    onBlur: (value: string) => void;
     /** Fires each time the input has been changed */
     onChange: (value: string) => void;
     /** Fires once the enter key is pressed */

package/dist/components/Input.js

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

package/dist/components/Knob.d.ts

@@ -1,3 +1,4 @@
+import type { Placement } from '@floating-ui/react';
 import { type BooleanLike } from '../common/react';
 import type { BoxProps } from './Box';
 type Props = {
@@ -46,6 +47,8 @@ type Props = {
     unclamped: boolean;
     /** Unit to display to the right of value. */
     unit: string;
+    /** Value popup placement, like on tooltips. */
+    popupPosition: Placement;
 }> & BoxProps;
 /**
  * ## Knob

package/dist/components/Knob.js

@@ -1 +1 @@
-import*as s from"react/jsx-runtime";import*as o from"../common/math.js";import*as r from"../common/react.js";import*as e from"../common/ui.js";import*as a from"./DraggableControl.js";function c(c){let{animated:l,format:n,maxValue:i,minValue:t,onChange:m,onDrag:x,step:_,stepPixelSize:b,unclamped:d,unit:j,value:g,bipolar:h,className:K,color:f,fillValue:p,ranges:u={},size:v=1,style:N,...y}=c;return(0,s.jsx)(a.DraggableControl,{dragMatrix:[0,-1],animated:l,format:n,maxValue:i,minValue:t,onChange:m,onDrag:x,step:_,stepPixelSize:b,unclamped:d,unit:j,value:g,children:a=>{let{displayElement:c,displayValue:l,dragging:n,handleDragStart:m,inputElement:x}=a,_=(0,o.scale)(p??l,t,i),b=(0,o.scale)(l,t,i),d=f||(0,o.keyOfMatchingRange)(p??g,u)||"default",j=Math.min((b-.5)*270,225);return(0,s.jsxs)("div",{className:(0,r.classes)(["Knob",`Knob--color--${d}`,h&&"Knob--bipolar",K,(0,e.computeBoxClassName)(y)]),...(0,e.computeBoxProps)({style:{fontSize:`${v}em`,...N},...y}),onMouseDown:m,children:[(0,s.jsx)("div",{className:"Knob__circle",children:(0,s.jsx)("div",{className:"Knob__cursorBox",style:{transform:`rotate(${j}deg)`},children:(0,s.jsx)("div",{className:"Knob__cursor"})})}),n&&(0,s.jsx)("div",{className:"Knob__popupValue",children:c}),(0,s.jsxs)("svg",{className:"Knob__ring Knob__ringTrackPivot",viewBox:"0 0 100 100",children:[(0,s.jsx)("circle",{className:"Knob__ringTrack",cx:"50",cy:"50",r:"50"}),(0,s.jsx)("title",{children:"track"})]}),(0,s.jsxs)("svg",{className:"Knob__ring Knob__ringFillPivot",viewBox:"0 0 100 100",children:[(0,s.jsx)("title",{children:"fill"}),(0,s.jsx)("circle",{className:"Knob__ringFill",style:{strokeDashoffset:Math.max(((h?2.75:2)-1.5*_)*Math.PI*50,0)},cx:"50",cy:"50",r:"50"})]}),x]})}})}export{c as Knob};
+import*as o from"react/jsx-runtime";import*as s from"../common/math.js";import*as e from"../common/react.js";import*as r from"../common/ui.js";import*as a from"./DraggableControl.js";import*as n from"./Floating.js";function t(t){let{animated:l,format:c,maxValue:i,minValue:m,onChange:x,onDrag:_,step:g,stepPixelSize:j,unclamped:p,unit:b,value:d,bipolar:h,popupPosition:f,className:K,color:u,fillValue:v,ranges:N={},size:y=1,style:M,...k}=t;return(0,o.jsx)(a.DraggableControl,{dragMatrix:[0,-1],animated:l,format:c,maxValue:i,minValue:m,onChange:x,onDrag:_,step:g,stepPixelSize:j,unclamped:p,unit:b,value:d,children:a=>{let{displayElement:t,displayValue:l,dragging:c,handleDragStart:x,inputElement:_}=a,g=(0,s.scale)(v??l,m,i),j=(0,s.scale)(l,m,i),p=u||(0,s.keyOfMatchingRange)(v??d,N)||"default",b=Math.min((j-.5)*270,225);return(0,o.jsx)(n.Floating,{preventPortal:!0,handleOpen:c,contentClasses:"Knob__popupValue",content:t,placement:f||"top",children:(0,o.jsxs)("div",{className:(0,e.classes)(["Knob",`Knob--color--${p}`,h&&"Knob--bipolar",K,(0,r.computeBoxClassName)(k)]),...(0,r.computeBoxProps)({style:{fontSize:`${y}em`,...M},...k}),onMouseDown:x,children:[(0,o.jsx)("div",{className:"Knob__circle",children:(0,o.jsx)("div",{className:"Knob__cursorBox",style:{transform:`rotate(${b}deg)`},children:(0,o.jsx)("div",{className:"Knob__cursor"})})}),(0,o.jsxs)("svg",{className:"Knob__ring Knob__ringTrackPivot",viewBox:"0 0 100 100",children:[(0,o.jsx)("circle",{className:"Knob__ringTrack",cx:"50",cy:"50",r:"50"}),(0,o.jsx)("title",{children:"track"})]}),(0,o.jsxs)("svg",{className:"Knob__ring Knob__ringFillPivot",viewBox:"0 0 100 100",children:[(0,o.jsx)("title",{children:"fill"}),(0,o.jsx)("circle",{className:"Knob__ringFill",style:{strokeDashoffset:Math.max(((h?2.75:2)-1.5*g)*Math.PI*50,0)},cx:"50",cy:"50",r:"50"})]}),_]})})}})}export{t as Knob};

package/dist/components/LabeledList.d.ts

@@ -1,3 +1,4 @@
+import type { Placement } from '@floating-ui/react';
 import type { PropsWithChildren, ReactNode } from 'react';
 import { type BooleanLike } from '../common/react';
 export declare function LabeledList(props: PropsWithChildren): import("react/jsx-runtime").JSX.Element;
@@ -33,6 +34,8 @@ type LabeledListItemProps = Partial<{
     textAlign: string;
     /** Tooltip text. */
     tooltip: string;
+    /** Tooltip position. See Tooltip for valid values. */
+    tooltipPosition: Placement;
     /**
      * Align both the label and the content vertically.
      *
@@ -42,6 +45,8 @@ type LabeledListItemProps = Partial<{
      * - `bottom`
      */
     verticalAlign: string;
+    /** Preserves line-breaks and spacing in Labeled.Item text. */
+    preserveWhitespace: boolean;
 }>;
 declare function LabeledListItem(props: LabeledListItemProps): import("react/jsx-runtime").JSX.Element;
 type LabeledListDividerProps = {

package/dist/components/LabeledList.js

@@ -1 +1 @@
-var e;import*as s from"react/jsx-runtime";import*as t from"../common/react.js";import*as l from"../common/ui.js";import*as i from"./Box.js";import*as a from"./Divider.js";import*as o from"./Tooltip.js";function r(e){let{children:t}=e;return(0,s.jsx)("table",{className:"LabeledList",children:(0,s.jsx)("tbody",{children:t})})}(e=r||(r={})).Divider=function(e){let t=e.size?(0,l.unit)(Math.max(0,e.size-1)):0;return(0,s.jsx)("tr",{className:"LabeledList__row",children:(0,s.jsx)("td",{colSpan:3,style:{paddingTop:t,paddingBottom:t},children:(0,s.jsx)(a.Divider,{})})})},e.Item=function(e){let l,{className:a,label:r,labelColor:d="label",labelWrap:n,color:c,textAlign:m,buttons:L,content:x,children:b,verticalAlign:p="baseline",tooltip:j}=e;r&&(l=r,"string"==typeof r&&(l+=":")),void 0!==j&&(l=(0,s.jsx)(o.Tooltip,{content:j,children:(0,s.jsx)(i.Box,{as:"span",style:{borderBottom:"2px dotted rgba(255, 255, 255, 0.8)"},children:l})}));let _=(0,s.jsx)(i.Box,{as:"td",color:d,className:(0,t.classes)(["LabeledList__cell",!n&&"LabeledList__label--nowrap"]),verticalAlign:p,children:l});return(0,s.jsxs)("tr",{className:(0,t.classes)(["LabeledList__row",a]),children:[_,(0,s.jsxs)(i.Box,{as:"td",color:c,textAlign:m,className:"LabeledList__cell",colSpan:L?void 0:2,verticalAlign:p,children:[x,b]}),L&&(0,s.jsx)("td",{className:"LabeledList__cell LabeledList__buttons",children:L})]})};export{r as LabeledList};
+var e;import*as s from"react/jsx-runtime";import*as t from"../common/react.js";import*as l from"../common/ui.js";import*as i from"./Box.js";import*as a from"./Divider.js";import*as o from"./Tooltip.js";function r(e){let{children:t}=e;return(0,s.jsx)("table",{className:"LabeledList",children:(0,s.jsx)("tbody",{children:t})})}(e=r||(r={})).Divider=function(e){let t=e.size?(0,l.unit)(Math.max(0,e.size-1)):0;return(0,s.jsx)("tr",{className:"LabeledList__row",children:(0,s.jsx)("td",{colSpan:3,style:{paddingTop:t,paddingBottom:t},children:(0,s.jsx)(a.Divider,{})})})},e.Item=function(e){let l,{className:a,label:r,labelColor:d="label",labelWrap:n,color:c,textAlign:m,buttons:L,content:p,children:x,verticalAlign:b="baseline",preserveWhitespace:j,tooltip:_,tooltipPosition:h}=e;r&&(l=r,"string"==typeof r&&(l+=":")),void 0!==_&&(l=(0,s.jsx)(o.Tooltip,{content:_,position:h,children:(0,s.jsx)(i.Box,{as:"span",style:{borderBottom:"2px dotted rgba(255, 255, 255, 0.8)"},children:l})}));let f=(0,s.jsx)(i.Box,{as:"td",color:d,className:(0,t.classes)(["LabeledList__cell",!n&&"LabeledList__label--nowrap"]),verticalAlign:b,preserveWhitespace:j,children:l});return(0,s.jsxs)("tr",{className:(0,t.classes)(["LabeledList__row",a]),children:[f,(0,s.jsxs)(i.Box,{as:"td",color:c,textAlign:m,className:"LabeledList__cell",colSpan:L?void 0:2,verticalAlign:b,children:[p,x]}),L&&(0,s.jsx)("td",{className:"LabeledList__cell LabeledList__buttons",children:L})]})};export{r as LabeledList};

package/dist/components/RestrictedInput.d.ts

@@ -6,6 +6,8 @@ type Props = Partial<{
     maxValue: number;
     /** Min value. 0 by default. */
     minValue: number;
+    /** Fires each time focus leaves the input, including if Esc or Enter are pressed */
+    onBlur: (value: number) => void;
     /** Fires each time the input has been changed */
     onChange: (value: number) => void;
     /** Fires once the enter key is pressed */

package/dist/components/RestrictedInput.js

@@ -1 +1 @@
-import*as e from"react/jsx-runtime";import*as t from"../common/react.js";import*as r from"../common/timer.js";import*as u from"../common/ui.js";import*as n from"react";import*as o from"../common/keys.js";let s=(0,r.debounce)(e=>e(),250);function c(r){let{allowFloats:c,autoFocus:m,autoSelect:a,className:i,disabled:l,expensive:f,fluid:p,maxValue:d=1e4,minValue:v=0,monospace:y,onChange:E,onEnter:b,onEscape:I,onValidationChange:j,value:x,...k}=r,C=(0,n.useRef)(null),[D,R]=(0,n.useState)(x??v),[K,N]=(0,n.useState)(!0);function g(e){E&&(f?s(()=>E(e)):E(e))}(0,n.useEffect)(()=>{let e;return(m||a)&&(e=setTimeout(()=>{C.current?.focus(),a&&C.current?.select()},1)),()=>clearTimeout(e)},[]),(0,n.useEffect)(()=>{if(C.current){let e=C.current.validity.valid;K!==e&&(N(e),j?.(e))}},[D]),(0,n.useEffect)(()=>{C.current&&document.activeElement!==C.current&&x!==D&&R(x??v)},[x]);let h=(0,u.computeBoxProps)(k),B=(0,t.classes)(["Input","RestrictedInput",l&&"Input--disabled",p&&"Input--fluid",y&&"Input--monospace",(0,u.computeBoxClassName)(k),i,!K&&"RestrictedInput--invalid"]);return(0,e.jsx)("input",{...h,autoComplete:"off",className:B,disabled:l,max:d,min:v,onChange:function(e){let t=Number(e.target.value);R(t),g(t)},onKeyDown:function(e){if(e.key===o.KEY.Enter){e.preventDefault(),b?.(D),C.current?.blur();return}if((0,o.isEscape)(e.key)){e.preventDefault(),I?.(D),C.current?.blur();return}if(e.key===o.KEY.Minus){e.preventDefault(),R(-1*D),g(D);return}},ref:C,spellCheck:!1,step:c?"any":"1",type:"number",value:D})}export{c as RestrictedInput};
+import*as e from"react/jsx-runtime";import*as t from"../common/react.js";import*as r from"../common/timer.js";import*as n from"../common/ui.js";import*as u from"react";import*as o from"../common/keys.js";let s=(0,r.debounce)(e=>e(),250);function c(r){let{allowFloats:c,autoFocus:i,autoSelect:m,className:a,disabled:l,expensive:f,fluid:p,maxValue:d=1e4,minValue:v=0,monospace:y,onBlur:E,onChange:b,onEnter:I,onEscape:j,onValidationChange:x,value:k,...C}=r,D=(0,u.useRef)(null),[R,B]=(0,u.useState)(k??v),[K,N]=(0,u.useState)(!0);function g(e){b&&(f?s(()=>b(e)):b(e))}(0,u.useEffect)(()=>{let e;return(i||m)&&(e=setTimeout(()=>{D.current?.focus(),m&&D.current?.select()},1)),()=>clearTimeout(e)},[]),(0,u.useEffect)(()=>{if(D.current){let e=D.current.validity.valid;K!==e&&(N(e),x?.(e))}},[R]),(0,u.useEffect)(()=>{D.current&&document.activeElement!==D.current&&k!==R&&B(k??v)},[k]);let h=(0,n.computeBoxProps)(C),S=(0,t.classes)(["Input","RestrictedInput",l&&"Input--disabled",p&&"Input--fluid",y&&"Input--monospace",(0,n.computeBoxClassName)(C),a,!K&&"RestrictedInput--invalid"]);return(0,e.jsx)("input",{...h,autoComplete:"off",className:S,disabled:l,max:d,min:v,onBlur:function(e){E?.(R)},onChange:function(e){let t=Number(e.target.value);B(t),g(t)},onKeyDown:function(e){if(e.key===o.KEY.Enter){e.preventDefault(),I?.(R),D.current?.blur();return}if((0,o.isEscape)(e.key)){e.preventDefault(),j?.(R),D.current?.blur();return}if(e.key===o.KEY.Minus){e.preventDefault();let t=-1*R;B(t),g(t);return}},ref:D,spellCheck:!1,step:c?"any":"1",type:"number",value:R})}export{c as RestrictedInput};

package/dist/components/TextArea.js

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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "tgui-core",
-  "version": "3.1.2",
+  "version": "3.1.4",
   "description": "TGUI core component library",
   "keywords": ["TGUI", "library", "typescript"],
   "files": ["dist", "styles"],

package/styles/colors.scss

@@ -34,9 +34,10 @@ $label: var(--color-label) !default;
 
 // Mappings of color names
 $color-map: ();
+
+// prettier-ignore
 $_gen_map: (
-  "black": var(--color-black),
-  "white": var(--color-white),
+  /* Base colors */
   "red": var(--color-red),
   "orange": var(--color-orange),
   "yellow": var(--color-yellow),
@@ -48,10 +49,20 @@ $_gen_map: (
   "purple": var(--color-purple),
   "pink": var(--color-pink),
   "brown": var(--color-brown),
+
+  /* Additional colors */
+  "gold": var(--color-gold),
+
+  /* Grayscale colors */
+  "black": var(--color-black),
+  "white": var(--color-white),
   "grey": var(--color-grey),
   "gray": var(--color-grey),
   "light-grey": var(--color-light-grey),
   "light-gray": var(--color-light-grey),
+
+  /* Semantic colors */
+  "primary": var(--color-primary),
   "good": var(--color-good),
   "average": var(--color-average),
   "bad": var(--color-bad),

package/styles/components/Button.scss

@@ -148,14 +148,19 @@ $border-radius: 0 !default;
   &:not(.Button--disabled) {
     &:hover {
       background-color: var(--color-hover);
-      color: var(--color-text);
+      color: hsl(from var(--button-color-transparent) h s l / 1);
     }
 
     &:active {
       background-color: var(--color-active);
-      color: var(--color-text);
+      color: hsl(from var(--button-color-transparent) h s l / 1);
     }
   }
+
+  &.Button--disabled {
+    --button-color-transparent: var(--color-text-translucent-light);
+    background-color: hsl(from var(--color-bad) h s l / 0.33) !important;
+  }
 }
 
 .Button--color--default {

package/styles/components/ImageButton.scss

@@ -53,6 +53,12 @@ $bg-map: colors.$color-map !default;
 
 @each $color-name, $color-value in $bg-map {
   .ImageButton__color--#{$color-name} {
+    @each $color in colors.$low-contrast-color-map {
+      @if $color-name == $color {
+        --color-text-fixed-white: var(--color-black);
+      }
+    }
+
     @include button-style($color-value);
   }
 }

package/styles/components/Input.scss

@@ -1,4 +1,5 @@
 .Input {
+  font-size: 1rem;
   background-color: var(--input-background);
   border-radius: var(--input-border-radius);
   border: var(--border-thickness-tiny) solid var(--input-border-color);

package/styles/vars-colors.scss

@@ -56,6 +56,9 @@
   --color-pink: hsl(325, 70%, 50%);
   --color-brown: hsl(25, 47.5%, 45%);
 
+  /* Additional colors */
+  --color-gold: hsl(40, 90%, 50%);
+
   /* Grayscale colors */
   --color-black: hsl(0, 0%, 0%);
   --color-white: hsl(0, 0%, 100%);