tgui-core 5.6.0 → 5.7.0

package/dist/common/math.d.ts

@@ -45,3 +45,8 @@ export declare function isSafeNumber(value: number): boolean;
  * Converts a value in radians to degrees.
  */
 export declare function rad2deg(rad: number): number;
+/**
+ * Converts px to rem
+ */
+export declare function pxToRem(px: number, as: 'css' | 'string'): string;
+export declare function pxToRem(px: number, as: '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)}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};
+function n(n,e,t){return n<e?e:n>t?t:n}function e(n){return n<0?0:n>1?1:n}function t(n,e=0,r=100){return(n-e)/(r-e)}function r(n,e){return Number.parseFloat((Math.round(n*10**e+1e-4*(n>=0?1:-1))/10**e).toFixed(e))}function u(n,e=0){return Number(n).toFixed(Math.max(e,0))}function i(n,e){return e&&n>=e[0]&&n<=e[1]}function o(n,e){for(let t of Object.keys(e))if(i(n,e[t]))return t}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}function m(n,e){let t=Math.round(n/12*1e6)/1e6;return"number"===e?t:`${t}rem`}export{n as clamp,e as clamp01,i as inRange,a as isSafeNumber,o as keyOfMatchingRange,f as numberOfDecimalDigits,m as pxToRem,c as rad2deg,r as round,t as scale,u as toFixed};

package/dist/components/AnimatedNumber.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/components/Autofocus.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/components/Blink.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/components/Button.d.ts

@@ -1,6 +1,6 @@
 import { type BooleanLike } from '../common/react.ts';
 import type { Placement } from '@floating-ui/react';
-import { type ReactNode, type RefObject } from 'react';
+import { type CSSProperties, type ReactNode, type RefObject } from 'react';
 import { type BoxProps } from './Box';
 /**
  * Getting ellipses to work requires that you use:
@@ -27,6 +27,8 @@ type Props = Partial<{
     circular: boolean;
     /** Reduces the padding of the button */
     compact: boolean;
+    /** The styles to be passed to Button__content */
+    innerStyle: CSSProperties;
     /** Disables button and makes it semi-transparent */
     disabled: BooleanLike;
     /** Fill all available horizontal space */

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: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}`,`Button--color--${m||"default"}`,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){p?(s?.(t),d(!1)):d(!0)},...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:()=>{B||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};
+var t;import{Fragment as n,jsx as e,jsxs as o}from"react/jsx-runtime";import{KEY as r,isEscape as u}from"../common/keys.js";import{classes as i}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,innerStyle:y,disabled:k,ellipsis:g,fluid:v,icon:x,iconColor:C,iconPosition:b,iconRotation:j,iconSize:N,iconSpin:_,onClick:w,selected:D,tooltip:I,tooltipPosition:T,verticalAlignContent:A,...$}=t,q=h||a,E=e(d,{className:"Button--icon",color:C,name:x||"",rotation:j,size:N,spin:_}),F=e("div",{className:i(["Button",v&&"Button--fluid",k&&"Button--disabled",D&&"Button--selected",s&&"Button--circular",p&&"Button--compact",!q&&"Button--empty",x&&"Button--hasIcon",b&&`Button--icon-${b}`,A&&"Button--flex",A&&v&&"Button--flex--fluid",A&&`Button--verticalAlignContent--${A}`,`Button--color--${m||"default"}`,f,l($)]),onClick:t=>{!k&&w&&w(t)},onKeyDown:t=>{if(n){if(t.key===r.Space||t.key===r.Enter){t.preventDefault(),!k&&w&&w(t);return}u(t.key)&&t.preventDefault()}},tabIndex:k?void 0:0,...c($),children:o("div",{className:"Button__content",style:y,children:[x&&"right"!==b&&E,g?e("span",{className:"Button--ellipsis",children:q}):q,x&&"right"===b&&E]})});return I&&(F=e(B,{content:I,position:T,children:F})),F}(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:u="Confirm?",confirmIcon:i,ellipsis:l=!0,icon:c,onBlur:a,onClick:s,...f}=t,[p,d]=m(!1);return e(h,{color:p?r:o,icon:p?i:c,onBlur:function(t){d(!1),a?.(t)},onClick:function(t){p?(s?.(t),d(!1)):d(!0)},...f,children:p?u: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:i(["Button","Button__content",h&&"Button--fluid",B&&"Button--disabled",`Button--color--${c}`]),onClick:()=>{B||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(u(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:u,onSelectFiles:i,...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);i(u?t:t[0])}}return o(n,{children:[e(h,{onClick:()=>c.current?.click(),...l}),e("input",{accept:r,hidden:!0,multiple:u,onChange:s,ref:c,type:"file"})]})};export{h as Button};

package/dist/components/Button.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/components/Chart.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/components/Collapsible.d.ts

@@ -7,6 +7,8 @@ type Props = Partial<{
     child_mt: number;
     /** Icon to display with the collapsible */
     icon: string;
+    /** Icon to display to the left of the collapsible icon */
+    sideIcon: string;
     /** Whether the collapsible is open */
     open: boolean;
     /** Text to display on the button for collapsing */

package/dist/components/Collapsible.js

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

package/dist/components/Collapsible.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/components/Dialog.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/components/Input.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/components/KeyListener.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/components/Knob.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/components/NumberInput.d.ts

@@ -2,15 +2,15 @@ import { type BooleanLike } from '../common/react.ts';
 import { Component, type FocusEventHandler, type KeyboardEventHandler } from 'react';
 import { type BoxProps } from './Box';
 type Props = Required<{
+    /** Value itself. */
+    value: number | string;
+}> & Partial<{
     /** Highest possible value. */
     maxValue: number;
     /** Lowest possible value. */
     minValue: number;
     /** Adjust value by this amount when dragging the input. */
     step: number;
-    /** Value itself. */
-    value: number | string;
-}> & Partial<{
     /** Animates the value if it was changed externally. */
     animated: boolean;
     /** Makes the input field uneditable & non draggable to prevent user changes */
@@ -49,6 +49,7 @@ export declare class NumberInput extends Component<Props, State> {
     dragTimeout: NodeJS.Timeout;
     dragInterval: NodeJS.Timeout;
     state: State;
+    static defaultProps: Partial<Props>;
     componentDidMount(): void;
     handleDragStart: React.MouseEventHandler<HTMLDivElement>;
     handleDragMove: (event: MouseEvent) => void;

package/dist/components/NumberInput.js

@@ -1 +1 @@
-import{jsx as e,jsxs as t}from"react/jsx-runtime";import{KEY as r,isEscape as i}from"../common/keys.js";import{clamp as s,round as n}from"../common/math.js";import{classes as a}from"../common/react.js";import{Component as o,createRef as u}from"react";import{AnimatedNumber as l}from"./AnimatedNumber.js";import{Box as m}from"./Box.js";class h extends o{inputRef=u();dragTimeout;dragInterval;state={currentValue:0,dragging:!1,editing:!1,origin:0,previousValue:0};componentDidMount(){let e=Number.parseFloat(this.props.value.toString());this.setState({currentValue:e,previousValue:e})}handleDragStart=e=>{let{value:t,disabled:r}=this.props,{editing:i}=this.state;if(r||i)return;document.body.style["pointer-events"]="none";let s=Number.parseFloat(t.toString());this.setState({currentValue:s,dragging:!1,origin:e.screenY,previousValue:s}),this.dragTimeout=setTimeout(()=>{this.setState({dragging:!0})},250),this.dragInterval=setInterval(()=>{let{dragging:e,currentValue:t,previousValue:r}=this.state,{onChange:i,tickWhileDragging:s}=this.props;e&&s&&t!==r&&(this.setState({previousValue:t}),i?.(t))},400),document.addEventListener("mousemove",this.handleDragMove),document.addEventListener("mouseup",this.handleDragEnd)};handleDragMove=e=>{let{minValue:t,maxValue:r,step:i,stepPixelSize:a,disabled:o}=this.props;o||this.setState(o=>{let u={...o},l=u.origin-e.screenY;if(o.dragging){let o=a||1,m=s(u.currentValue+l*i/o,t-i,r+i);Math.abs(m-u.currentValue)>=i?(u.currentValue=s(n(m/i,0)*i,t,r),u.origin=e.screenY):Math.abs(l)>o&&(u.origin=e.screenY)}else Math.abs(l)>4&&(u.dragging=!0);return u})};handleDragEnd=e=>{let{dragging:t,currentValue:r}=this.state,{onChange:i,disabled:s}=this.props;if(!s){if(document.body.style["pointer-events"]="auto",clearInterval(this.dragInterval),clearTimeout(this.dragTimeout),this.setState({dragging:!1,editing:!t,previousValue:r}),t)i?.(r);else if(this.inputRef){let e=this.inputRef.current;e&&(e.value=`${r}`,setTimeout(()=>{e.focus(),e.select()},10))}document.removeEventListener("mousemove",this.handleDragMove),document.removeEventListener("mouseup",this.handleDragEnd)}};handleBlur=e=>{let{editing:t,previousValue:r}=this.state,{minValue:i,maxValue:n,onChange:a,disabled:o}=this.props;if(o||!t)return;let u=s(Number.parseFloat(e.target.value),i,n);Number.isNaN(u)?this.setState({editing:!1}):(this.setState({currentValue:u,editing:!1,previousValue:u}),r!==u&&a?.(u))};handleKeyDown=e=>{let{minValue:t,maxValue:n,onChange:a,disabled:o}=this.props;if(o)return;let{previousValue:u}=this.state;if(e.key===r.Enter){let r=s(Number.parseFloat(e.currentTarget.value),t,n);if(Number.isNaN(r))return void this.setState({editing:!1});this.setState({currentValue:r,editing:!1,previousValue:r}),u!==r&&a?.(r)}else i(e.key)&&this.setState({editing:!1})};render(){let{dragging:r,editing:i,currentValue:n}=this.state,{className:o,fluid:u,animated:h,unit:d,value:p,minValue:g,maxValue:c,height:v,width:f,lineHeight:N,fontSize:b,format:S}=this.props,V=Number.parseFloat(p.toString());r&&(V=n);let y=t("div",{className:"NumberInput__content",children:[h&&!r?e(l,{format:S,value:V}):S?S(V):V,d?` ${d}`:""]});return t(m,{className:a(["NumberInput",u&&"NumberInput--fluid",o]),fontSize:b,lineHeight:N,minHeight:v,minWidth:f,onMouseDown:this.handleDragStart,children:[e("div",{className:"NumberInput__barContainer",children:e("div",{className:"NumberInput__bar",style:{height:`${s((V-g)/(c-g)*100,0,100)}%`}})}),y,e("input",{className:"NumberInput__input",onBlur:this.handleBlur,onKeyDown:this.handleKeyDown,ref:this.inputRef,style:{display:i?"inline":"none",fontSize:b,height:v,lineHeight:N}})]})}}export{h as NumberInput};
+import{jsx as e,jsxs as t}from"react/jsx-runtime";import{KEY as r,isEscape as i}from"../common/keys.js";import{clamp as s,round as a}from"../common/math.js";import{classes as n}from"../common/react.js";import{Component as u,createRef as o}from"react";import{AnimatedNumber as l}from"./AnimatedNumber.js";import{Box as m}from"./Box.js";class h extends u{inputRef=o();dragTimeout;dragInterval;state={currentValue:Number(this.props.value??0),dragging:!1,editing:!1,origin:0,previousValue:Number(this.props.value??0)};static defaultProps={minValue:-1/0,maxValue:1/0,step:1};componentDidMount(){let e=Number.parseFloat(this.props.value.toString());this.setState({currentValue:e,previousValue:e})}handleDragStart=e=>{let{value:t,disabled:r}=this.props,{editing:i}=this.state;if(r||i)return;document.body.style["pointer-events"]="none";let s=Number.parseFloat(t.toString());this.setState({currentValue:s,dragging:!1,origin:e.screenY,previousValue:s}),this.dragTimeout=setTimeout(()=>{this.setState({dragging:!0})},250),this.dragInterval=setInterval(()=>{let{dragging:e,currentValue:t,previousValue:r}=this.state,{onChange:i,tickWhileDragging:s}=this.props;e&&s&&t!==r&&(this.setState({previousValue:t}),i?.(t))},400),document.addEventListener("mousemove",this.handleDragMove),document.addEventListener("mouseup",this.handleDragEnd)};handleDragMove=e=>{let{minValue:t=-1/0,maxValue:r=1/0,step:i=1,stepPixelSize:n,disabled:u}=this.props;u||this.setState(u=>{let o={...u},l=o.origin-e.screenY;if(u.dragging){let u=n||1,m=s(o.currentValue+l*i/u,t-i,r+i);Math.abs(m-o.currentValue)>=i?(o.currentValue=s(a(m/i,0)*i,t,r),o.origin=e.screenY):Math.abs(l)>u&&(o.origin=e.screenY)}else Math.abs(l)>4&&(o.dragging=!0);return o})};handleDragEnd=e=>{let{dragging:t,currentValue:r}=this.state,{onChange:i,disabled:s}=this.props;if(!s){if(document.body.style["pointer-events"]="auto",clearInterval(this.dragInterval),clearTimeout(this.dragTimeout),this.setState({dragging:!1,editing:!t,previousValue:r}),t)i?.(r);else if(this.inputRef){let e=this.inputRef.current;e&&(e.value=`${r}`,setTimeout(()=>{e.focus(),e.select()},10))}document.removeEventListener("mousemove",this.handleDragMove),document.removeEventListener("mouseup",this.handleDragEnd)}};handleBlur=e=>{let{editing:t,previousValue:r}=this.state,{minValue:i,maxValue:a,onChange:n,disabled:u}=this.props;if(u||!t)return;let o=s(Number.parseFloat(e.target.value),i??0,a??100);Number.isNaN(o)?this.setState({editing:!1}):(this.setState({currentValue:o,editing:!1,previousValue:o}),r!==o&&n?.(o))};handleKeyDown=e=>{let{minValue:t,maxValue:a,onChange:n,disabled:u}=this.props;if(u)return;let{previousValue:o}=this.state;if(e.key===r.Enter){let r=s(Number.parseFloat(e.currentTarget.value),t??0,a??100);if(Number.isNaN(r))return void this.setState({editing:!1});this.setState({currentValue:r,editing:!1,previousValue:r}),o!==r&&n?.(r)}else i(e.key)&&this.setState({editing:!1})};render(){let{dragging:r,editing:i,currentValue:a}=this.state,{className:u,fluid:o,animated:h,unit:d,value:p,minValue:g,maxValue:c,height:v,width:f,lineHeight:N,fontSize:b,format:S}=this.props,V=Number.parseFloat(p.toString());r&&(V=a);let y=t("div",{className:"NumberInput__content",children:[h&&!r?e(l,{format:S,value:V}):S?S(V):V,d?` ${d}`:""]});return t(m,{className:n(["NumberInput",o&&"NumberInput--fluid",u]),fontSize:b,lineHeight:N,minHeight:v,minWidth:f,onMouseDown:this.handleDragStart,children:[e("div",{className:"NumberInput__barContainer",children:e("div",{className:"NumberInput__bar",style:{height:`${s((V-g)/(c-g)*100,0,100)}%`}})}),y,e("input",{className:"NumberInput__input",onBlur:this.handleBlur,onKeyDown:this.handleKeyDown,ref:this.inputRef,style:{display:i?"inline":"none",fontSize:b,height:v,lineHeight:N}})]})}}export{h as NumberInput};

package/dist/components/NumberInput.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/components/RestrictedInput.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/components/RoundGauge.js

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

package/dist/components/RoundGauge.test.d.ts

@@ -0,0 +1 @@
+export {};

package/package.json

@@ -6,18 +6,21 @@
   },
   "description": "TGUI core component library",
   "devDependencies": {
-    "@biomejs/biome": "^2.3.8",
-    "@rsbuild/core": "^1.6.11",
+    "@biomejs/biome": "^2.3.10",
+    "@happy-dom/global-registrator": "^20.0.11",
+    "@rsbuild/core": "^1.7.1",
     "@rsbuild/plugin-react": "^1.4.2",
     "@rsbuild/plugin-sass": "^1.4.0",
-    "@rslib/core": "^0.18.2",
-    "@storybook/addon-docs": "^10.1.2",
+    "@rslib/core": "^0.18.6",
+    "@storybook/addon-docs": "^10.1.11",
+    "@testing-library/dom": "^10.4.1",
+    "@testing-library/react": "^16.3.1",
     "@types/bun": "latest",
-    "@types/react": "latest",
     "@types/react-dom": "latest",
-    "prettier": "^3.7.3",
-    "storybook": "^10.1.2",
-    "storybook-react-rsbuild": "^3.0.0",
+    "@types/react": "latest",
+    "prettier": "^3.7.4",
+    "storybook-react-rsbuild": "^3.2.0",
+    "storybook": "^10.1.11",
     "typescript": "^5.9.3"
   },
   "exports": {
@@ -68,5 +71,5 @@
     "test": "bun test"
   },
   "type": "module",
-  "version": "5.6.0"
+  "version": "5.7.0"
 }

package/styles/components/Button.scss

@@ -57,7 +57,6 @@
   position: relative;
   display: inline-block;
   white-space: nowrap;
-  line-height: var(--button-height);
   padding: 0 var(--space-m);
   margin-right: var(--space-xs);
   margin-bottom: var(--space-xs);
@@ -71,13 +70,11 @@
   }
 
   &__content {
-    display: block;
+    display: flex; // Inline flex will broke ellipsis, don't change it.
+    align-items: center;
     align-self: stretch;
-
-    &--ellipsis {
-      display: flex; // Inline flex will broke ellipsis, don't change it.
-      align-items: center;
-    }
+    min-height: var(--button-height);
+    width: 100%; // do not change to fit-content, it will break ellipsis
   }
 
   .Button--icon {
@@ -108,11 +105,14 @@
 
   &--compact {
     padding: 0 var(--space-s);
-    line-height: 1.333em;
 
     &.Button--hasIcon .Button--icon {
       margin: 0 var(--space-xxs);
     }
+
+    .Button__content {
+      min-height: calc(var(--button-height) * 0.8);
+    }
   }
 
   &--circular {
@@ -129,7 +129,12 @@
     display: block;
     overflow: hidden;
     text-overflow: ellipsis;
-    margin-right: calc(-1 * var(--space-s));
+    // margin-right: calc(-1 * var(--space-s));
+
+    white-space: nowrap;
+    .Button__content {
+      overflow: hidden;
+    }
   }
 
   // We don't need additional margin if button inside stack

package/styles/components/RoundGauge.scss

@@ -72,15 +72,15 @@ $pi: 3.1416;
   &.active {
     animation: RoundGauge__alertAnim var(--round-gauge-alert-animation)
       cubic-bezier(0.34, 1.56, 0.64, 1) infinite;
-
-    ~ .RoundGauge__needle .RoundGauge__needleLine {
-      transform-origin: bottom;
-      animation: RoundGauge__needleAlertAnim
-        var(--round-gauge-needle-alert-animation) infinite;
-    }
   }
 }
 
+.RoundGauge__needle.active .RoundGauge__needleLine {
+  transform-origin: bottom;
+  animation: RoundGauge__needleAlertAnim
+    var(--round-gauge-needle-alert-animation) infinite;
+}
+
 .RoundGauge__alert.max {
   fill: var(--color-bad);
 }