tgui-core 5.3.1 → 5.4.1

package/dist/common/color.d.ts

@@ -21,5 +21,56 @@ export declare class Color {
      * Loops up the color in the provided list of colors
      * with linear interpolation.
      */
-    static lookup(value: number, colors: Color[]): Color;
+    static lookup(value: number, colors?: Color[]): Color;
 }
+export interface RgbColor {
+    r: number;
+    g: number;
+    b: number;
+}
+export interface RgbaColor extends RgbColor {
+    a: number;
+}
+export interface HslColor {
+    h: number;
+    s: number;
+    l: number;
+}
+export interface HslaColor extends HslColor {
+    a: number;
+}
+export interface HsvColor {
+    h: number;
+    s: number;
+    v: number;
+}
+export interface HsvaColor extends HsvColor {
+    a: number;
+}
+export type ObjectColor = RgbColor | HslColor | HsvColor | RgbaColor | HslaColor | HsvaColor;
+export type AnyColor = string | ObjectColor;
+export declare function hexToHsva(hex: string): HsvaColor;
+export declare function hexToRgba(hex: string): RgbaColor;
+export declare function parseHue(value: string, unit?: string): number;
+export declare function hslStringToHsva(hslString: string): HsvaColor;
+export declare function hslaToHsva({ h, s, l, a }: HslaColor): HsvaColor;
+export declare function hsvaToHex(hsva: HsvaColor): string;
+export declare function hsvaToHsla({ h, s, v, a }: HsvaColor): HslaColor;
+export declare function hsvaToHslString(hsva: HsvaColor): string;
+export declare function hsvaToHsvString(hsva: HsvaColor): string;
+export declare function hsvaToHsvaString(hsva: HsvaColor): string;
+export declare function hsvaToHslaString(hsva: HsvaColor): string;
+export declare function hsvaToRgba({ h, s, v, a }: HsvaColor): RgbaColor;
+export declare function hsvaToRgbString(hsva: HsvaColor): string;
+export declare function hsvaToRgbaString(hsva: HsvaColor): string;
+export declare function hsvStringToHsva(hsvString: string): HsvaColor;
+export declare function rgbStringToHsva(rgbaString: string): HsvaColor;
+export declare function rgbaToHex({ r, g, b, a }: RgbaColor): string;
+export declare function rgbaToHsva({ r, g, b, a }: RgbaColor): HsvaColor;
+export declare function roundHsva(hsva: HsvaColor): HsvaColor;
+export declare function rgbaToRgb({ r, g, b }: RgbaColor): RgbColor;
+export declare function hslaToHsl({ h, s, l }: HslaColor): HslColor;
+export declare function hsvaToHsv(hsva: HsvaColor): HsvColor;
+export declare function validHex(value: string, alpha?: boolean): boolean;
+export declare function luminance(rgb: RgbColor): number;
+export declare function contrast(foreground: RgbColor, background: RgbColor): number;

package/dist/common/color.js

@@ -1 +1 @@
-class r{r;g;b;a;constructor(r=0,t=0,e=0,s=1){this.r=r,this.g=t,this.b=e,this.a=s}toString(){let r=this.a;return"string"==typeof r&&(r=Number.parseFloat(this.a)),Number.isNaN(r)&&(r=1),`rgba(${0|this.r}, ${0|this.g}, ${0|this.b}, ${r})`}darken(t){let e=t/100;return new r(this.r-this.r*e,this.g-this.g*e,this.b-this.b*e,this.a)}lighten(r){return this.darken(-r)}static fromHex(t){if(7===t.length)return new r(Number.parseInt(t.slice(1,3),16),Number.parseInt(t.slice(3,5),16),Number.parseInt(t.slice(5,7),16));if(9===t.length)return new r(Number.parseInt(t.slice(1,3),16),Number.parseInt(t.slice(3,5),16),Number.parseInt(t.slice(5,7),16),Number.parseInt(t.slice(7,9),16)/256);throw Error("Invalid hex color format. Expected #RRGGBB or #RRGGBBAA.")}static lerp(t,e,s){return new r((e.r-t.r)*s+t.r,(e.g-t.g)*s+t.g,(e.b-t.b)*s+t.b,(e.a-t.a)*s+t.a)}static lookup(t,e){let s=e.length;if(s<2)throw Error("Needs at least two colors!");let i=t*(s-1);if(t<1e-4)return e[0];if(t>=.9999)return e[s-1];let n=0|i;return r.lerp(e[n],e[n+1],i%1)}}export{r as Color};
+class r{r;g;b;a;constructor(r=0,t=0,e=0,n=1){this.r=r,this.g=t,this.b=e,this.a=n}toString(){let r=this.a;return"string"==typeof r&&(r=Number.parseFloat(this.a)),Number.isNaN(r)&&(r=1),`rgba(${0|this.r}, ${0|this.g}, ${0|this.b}, ${r})`}darken(t){let e=t/100;return new r(this.r-this.r*e,this.g-this.g*e,this.b-this.b*e,this.a)}lighten(r){return this.darken(-r)}static fromHex(t){if(7===t.length)return new r(Number.parseInt(t.slice(1,3),16),Number.parseInt(t.slice(3,5),16),Number.parseInt(t.slice(5,7),16));if(9===t.length)return new r(Number.parseInt(t.slice(1,3),16),Number.parseInt(t.slice(3,5),16),Number.parseInt(t.slice(5,7),16),Number.parseInt(t.slice(7,9),16)/256);throw Error("Invalid hex color format. Expected #RRGGBB or #RRGGBBAA.")}static lerp(t,e,n){return new r((e.r-t.r)*n+t.r,(e.g-t.g)*n+t.g,(e.b-t.b)*n+t.b,(e.a-t.a)*n+t.a)}static lookup(t,e=[]){let n=e.length;if(n<2)throw Error("Needs at least two colors!");let s=t*(n-1);if(t<1e-4)return e[0];if(t>=.9999)return e[n-1];let a=0|s;return r.lerp(e[a],e[a+1],s%1)}}function t(r,e=0,n=10**e){return Math.round(n*r)/n}let e={grad:.9,turn:360,rad:360/(2*Math.PI)};function n(r){return S(s(r))}function s(r){return("#"===r[0]&&(r=r.substring(1)),r.length<6)?{r:parseInt(r[0]+r[0],16),g:parseInt(r[1]+r[1],16),b:parseInt(r[2]+r[2],16),a:4===r.length?t(parseInt(r[3]+r[3],16)/255,2):1}:{r:parseInt(r.substring(0,2),16),g:parseInt(r.substring(2,4),16),b:parseInt(r.substring(4,6),16),a:8===r.length?t(parseInt(r.substring(6,8),16)/255,2):1}}function a(r,t="deg"){return Number(r)*(e[t]||1)}let u=/hsla?\(?\s*(-?\d*\.?\d+)(deg|rad|grad|turn)?[,\s]+(-?\d*\.?\d+)%?[,\s]+(-?\d*\.?\d+)%?,?\s*[/\s]*(-?\d*\.?\d+)?(%)?\s*\)?/i,i=/hsva?\(?\s*(-?\d*\.?\d+)(deg|rad|grad|turn)?[,\s]+(-?\d*\.?\d+)%?[,\s]+(-?\d*\.?\d+)%?,?\s*[/\s]*(-?\d*\.?\d+)?(%)?\s*\)?/i,o=/rgba?\(?\s*(-?\d*\.?\d+)(%)?[,\s]+(-?\d*\.?\d+)(%)?[,\s]+(-?\d*\.?\d+)(%)?,?\s*[/\s]*(-?\d*\.?\d+)?(%)?\s*\)?/i,h=/^#?([0-9A-F]{3,8})$/i;function l(r){let t=u.exec(r);return t?g({h:a(t[1],t[2]),s:Number(t[3]),l:Number(t[4]),a:void 0===t[5]?1:Number(t[5])/(t[6]?100:1)}):{h:0,s:0,v:0,a:1}}function g({h:r,s:t,l:e,a:n}){return{h:r,s:(t*=(e<50?e:100-e)/100)>0?2*t/(e+t)*100:0,v:e+t,a:n}}function b(r){return x(m(r))}function c({h:r,s:e,v:n,a:s}){let a=(200-e)*n/100;return{h:t(r),s:t(a>0&&a<200?e*n/100/(a<=100?a:200-a)*100:0),l:t(a/2),a:t(s,2)}}function d(r){let{h:t,s:e,l:n}=c(r);return`hsl(${t}, ${e}%, ${n}%)`}function v(r){let{h:t,s:e,v:n}=R(r);return`hsv(${t}, ${e}%, ${n}%)`}function f(r){let{h:t,s:e,v:n,a:s}=R(r);return`hsva(${t}, ${e}%, ${n}%, ${s})`}function $(r){let{h:t,s:e,l:n,a:s}=c(r);return`hsla(${t}, ${e}%, ${n}%, ${s})`}function m({h:r,s:e,v:n,a:s}){let a=Math.floor(r=r/360*6),u=(n/=100)*(1-(e/=100)),i=n*(1-(r-a)*e),o=n*(1-(1-r+a)*e),h=a%6;return{r:255*[n,i,u,u,o,n][h],g:255*[o,n,n,i,u,u][h],b:255*[u,u,o,n,n,i][h],a:t(s,2)}}function p(r){let{r:e,g:n,b:s}=m(r);return`rgb(${t(e)}, ${t(n)}, ${t(s)})`}function N(r){let{r:e,g:n,b:s,a}=m(r);return`rgba(${t(e)}, ${t(n)}, ${t(s)}, ${t(a,2)})`}function T(r){let t=i.exec(r);return t?R({h:a(t[1],t[2]),s:Number(t[3]),v:Number(t[4]),a:void 0===t[5]?1:Number(t[5])/(t[6]?100:1)}):{h:0,s:0,v:0,a:1}}function H(r){let t=o.exec(r);return t?S({r:Number(t[1])/(t[2]?100/255:1),g:Number(t[3])/(t[4]?100/255:1),b:Number(t[5])/(t[6]?100/255:1),a:void 0===t[7]?1:Number(t[7])/(t[8]?100:1)}):{h:0,s:0,v:0,a:1}}function I(r){let t=r.toString(16);return t.length<2?`0${t}`:t}function x({r,g:e,b:n,a:s}){let a=s<1?I(t(255*s)):"";return`#${I(t(r))}${I(t(e))}${I(t(n))}${a}`}function S({r,g:t,b:e,a:n}){let s=Math.max(r,t,e),a=s-Math.min(r,t,e),u=a?s===r?(t-e)/a:s===t?2+(e-r)/a:4+(r-t)/a:0;return{h:60*(u<0?u+6:u),s:s?a/s*100:0,v:s/255*100,a:n}}function R(r){return{h:t(r.h),s:t(r.s),v:t(r.v),a:t(r.a,2)}}function w({r,g:t,b:e}){return{r,g:t,b:e}}function M({h:r,s:t,l:e}){return{h:r,s:t,l:e}}function B(r){let{h:t,s:e,v:n}=R(r);return{h:t,s:e,v:n}}function G(r,t){let e=h.exec(r),n=e?e[1].length:0;return 3===n||6===n||!!t&&4===n||!!t&&8===n}function k(r){let[t,e,n]=[r.r,r.g,r.b].map(r=>(r/=255)<=.03928?r/12.92:((r+.055)/1.055)**2.4);return .2126*t+.7152*e+.0722*n}function A(r,t){let e=k(r),n=k(t);return n<e?(n+.05)/(e+.05):(e+.05)/(n+.05)}export{r as Color,A as contrast,n as hexToHsva,s as hexToRgba,l as hslStringToHsva,M as hslaToHsl,g as hslaToHsva,T as hsvStringToHsva,b as hsvaToHex,d as hsvaToHslString,c as hsvaToHsla,$ as hsvaToHslaString,B as hsvaToHsv,v as hsvaToHsvString,f as hsvaToHsvaString,p as hsvaToRgbString,m as hsvaToRgba,N as hsvaToRgbaString,k as luminance,a as parseHue,H as rgbStringToHsva,x as rgbaToHex,S as rgbaToHsva,w as rgbaToRgb,R as roundHsva,G as validHex};

package/dist/common/fuzzysearch.js

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

package/dist/common/ui.d.ts

@@ -118,6 +118,6 @@ type StyleMap = StringStyleMap & BooleanStyleMap;
 /** Super light implementation of tailwind-like class names. */
 export declare function computeTwClass(input: string | undefined): StyleMap;
 /** Short list of accepted DOM event handlers */
-export declare const eventHandlers: ["onClick", "onContextMenu", "onDoubleClick", "onKeyDown", "onKeyUp", "onMouseDown", "onMouseLeave", "onMouseMove", "onMouseOver", "onMouseUp", "onScroll", "onDrag", "onDragEnd", "onDragEnter", "onDragExit", "onDragLeave", "onDragOver", "onDragStart", "onDrop"];
+export declare const eventHandlers: ["onClick", "onContextMenu", "onDoubleClick", "onKeyDown", "onKeyUp", "onMouseDown", "onMouseLeave", "onMouseMove", "onMouseOver", "onMouseUp", "onScroll", "onWheel", "onDrag", "onDragEnd", "onDragEnter", "onDragExit", "onDragLeave", "onDragOver", "onDragStart", "onDrop"];
 export type EventHandlers<TElement = HTMLDivElement> = Pick<DOMAttributes<TElement>, (typeof eventHandlers)[number]>;
 export {};

package/dist/common/ui.js

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

package/dist/components/AnimatedNumber.js

@@ -1 +1 @@
-import{jsx as r}from"react/jsx-runtime";import{clamp as t,isSafeNumber as n,toFixed as e}from"../common/math.js";import{useEffect as u,useRef as l,useState as i}from"react";let o=1e3/60;function c(c){let{format:m,initial:a,value:f}=c,p=l(null),[s,h]=i(void 0!==a&&n(a)?a:n(f)?f:0);function d(){null!==p.current&&(clearInterval(p.current),p.current=null)}function v(){if(!n(f))return void d();h(r=>{let t=.8333*r+.16669999999999996*f;return Math.abs(f-t)<Math.max(.001,.001*f)?(d(),f):t})}return u(()=>(s!==f&&null===p.current&&(p.current=setInterval(v,o)),()=>d()),[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};
+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 l,useRef as u,useState as c}from"react";let i=1e3/60;function m(m){let o,{format:a,initial:f,value:p}=m,s=u(null),[h,d]=c(void 0!==f&&n(f)?f:n(p)?p:0);l(()=>(h!==p&&null===s.current&&(s.current=setInterval(v,i)),()=>g()),[p]),l(()=>()=>g(),[]);function g(){null!==s.current&&(clearInterval(s.current),s.current=null)}function v(){n(p)?d(r=>{let t=.8333*r+.16669999999999996*p;return Math.abs(p-t)<Math.max(.001,.001*p)?(g(),p):t}):g()}return r("span",{children:n(p)?a?a(h):e(h,t((o=String(p).split(".")[1])?o.length:0,0,8)):String(p)})}export{m as AnimatedNumber};

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){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:()=>{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 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};

package/dist/components/ByondUi.js

@@ -1 +1 @@
-import{jsx as e}from"react/jsx-runtime";import{debounce as n}from"../common/timer.js";import{computeBoxProps as t}from"../common/ui.js";import{useEffect as o,useRef as r}from"react";let i=[];function d(d){let{params:s,phonehome:l,...u}=d,m=r(null),p=r(function(e,n=!0){let t=i.length;i.push(null);let o=e||`byondui_${t}`;return{render:e=>{n&&Byond.sendMessage("renderByondUi",{renderByondUi:o}),i[t]=o,Byond.winset(o,e)},unmount:()=>{n&&Byond.sendMessage("unmountByondUi",{renderByondUi:o}),i[t]=null,Byond.winset(o,{parent:""})}}}(s?.id,l));function f(){let e=m.current;if(!e)return;let n=function(e){let n=window.devicePixelRatio??1,t=e.getBoundingClientRect();return{pos:[t.left*n,t.top*n],size:[(t.right-t.left)*n,(t.bottom-t.top)*n]}}(e);p.current.render({parent:Byond.windowId,...s,pos:`${n.pos[0]},${n.pos[1]}`,size:`${n.size[0]}x${n.size[1]}`})}let c=n(()=>{f()},100);return o(()=>(window.addEventListener("resize",c),f(),()=>{window.removeEventListener("resize",c),p.current.unmount()}),[]),e("div",{ref:m,...t(u),children:e("div",{style:{minHeight:"22px"}})})}window.addEventListener("beforeunload",()=>{for(let e=0;e<i.length;e++){let n=i[e];"string"==typeof n&&(i[e]=null,Byond.winset(n,{parent:""}))}});export{d as ByondUi};
+import{jsx as e}from"react/jsx-runtime";import{debounce as n}from"../common/timer.js";import{computeBoxProps as t}from"../common/ui.js";import{useEffect as o,useRef as r}from"react";let i=[];function d(d){let{params:s,phonehome:l,...u}=d,m=r(null),p=r(function(e,n=!0){let t=i.length;i.push(null);let o=e||`byondui_${t}`;return{render:e=>{n&&Byond.sendMessage("renderByondUi",{renderByondUi:o}),i[t]=o,Byond.winset(o,e)},unmount:()=>{n&&Byond.sendMessage("unmountByondUi",{renderByondUi:o}),i[t]=null,Byond.winset(o,{parent:""})}}}(s?.id,l));function f(){let e,n,t=m.current;if(!t)return;let o=(e=window.devicePixelRatio??1,{pos:[(n=t.getBoundingClientRect()).left*e,n.top*e],size:[(n.right-n.left)*e,(n.bottom-n.top)*e]});p.current.render({parent:Byond.windowId,...s,pos:`${o.pos[0]},${o.pos[1]}`,size:`${o.size[0]}x${o.size[1]}`})}let y=n(()=>{f()},100);return o(()=>(window.addEventListener("resize",y),f(),()=>{window.removeEventListener("resize",y),p.current.unmount()}),[]),e("div",{ref:m,...t(u),children:e("div",{style:{minHeight:"22px"}})})}window.addEventListener("beforeunload",()=>{for(let e=0;e<i.length;e++){let n=i[e];"string"==typeof n&&(i[e]=null,Byond.winset(n,{parent:""}))}});export{d as ByondUi};

package/dist/components/DraggableControl.js

@@ -1 +1 @@
-import{Fragment as e,jsx as r,jsxs as t}from"react/jsx-runtime";import{KEY as n,isEscape as u}from"../common/keys.js";import{clamp as o}from"../common/math.js";import{useEffect as l,useRef as c,useState as i}from"react";import{AnimatedNumber as a}from"./AnimatedNumber.js";function s(e,r){return e.screenX*r[0]+e.screenY*r[1]}function m(m){let{animated:f,children:v,dragMatrix:p=[1,0],tickWhileDragging:d,format:h,maxValue:y=1/0,minValue:g=-1/0,onChange:E,step:b=1,stepPixelSize:N,unclamped:w,unit:T,updateRate:j=400,fontSize:x,height:L,lineHeight:S}=m,[k,z]=i(m.value),[D,I]=i(!1),F=c(!1),M=c(m.value),O=c(0),$=c(0),_=c(null),A=c(null),B=c(null),C=c(null);function H(e){let r=$.current;if(null===r)throw Error("Origin is unset.");let t=s(e,p),n=_.current;if(null===n)throw Error("Final step pixel size has not been computed.");let u=O.current;if(null===u)throw Error("Original value is unset.");let l=o(Math.floor(u/b)*b+Math.trunc((t-r)/n)*b,g,y);M.current=l,z(l)}function K(e){document.body.style["pointer-events"]="auto",B.current&&clearInterval(B.current),$.current=null,_.current=null,O.current=null,document.removeEventListener("mousemove",H),document.removeEventListener("mouseup",K),F.current&&(E?.(e,M.current),F.current=!1)}l(()=>{m.value!==M.current&&(M.current=m.value,z(m.value))},[m.value]);let P=m.value;F.current&&(P=M.current);let U=t(e,{children:[f&&!F.current?r(a,{format:h,value:P}):h?h(P):P,T?` ${T}`:""]}),W=r("input",{className:"NumberInput__input",onBlur:function(e){let r=Number.parseFloat(e.currentTarget.value);if(w||(r=o(r,g,y)),Number.isNaN(r))return void I(!1);M.current=r,z(r),E?.(e.nativeEvent,r),D&&I(!1)},onKeyDown:function(e){(e.key===n.Enter||u(e.key))&&I(!1)},ref:A,style:{display:D?void 0:"none",fontSize:x,height:L,lineHeight:S}});return v({displayElement:U,displayValue:P,dragging:F.current,editing:D,handleDragStart:function(e){if(!D){if("number"!=typeof N){let r=e.currentTarget.offsetWidth/((y-g)/b);if(void 0===N)_.current=r;else if("function"==typeof N)_.current=N(r);else throw Error(`Unsupported value for stepPixelSize of type ${typeof N}`)}else _.current=N;document.body.style["pointer-events"]="none",$.current=s(e.nativeEvent,p),O.current=m.value,F.current=!0,document.addEventListener("mouseup",K),C.current=setTimeout(()=>{var r=e.nativeEvent;if(F.current)document.addEventListener("mousemove",H),B.current=setInterval(()=>{F.current&&d&&E?.(r,M.current)},j);else if(I(!0),A.current){let e=A.current;e.value=M.current.toString(),setTimeout(()=>{e.focus(),e.select()},10)}C.current&&clearTimeout(C.current)},100)}},inputElement:W})}export{m as DraggableControl};
+import{Fragment as e,jsx as r,jsxs as t}from"react/jsx-runtime";import{KEY as n,isEscape as u}from"../common/keys.js";import{clamp as o}from"../common/math.js";import{useEffect as l,useRef as c,useState as i}from"react";import{AnimatedNumber as a}from"./AnimatedNumber.js";function s(e,r){return e.screenX*r[0]+e.screenY*r[1]}function m(m){let{animated:f,children:v,dragMatrix:p=[1,0],tickWhileDragging:d,format:h,maxValue:y=1/0,minValue:g=-1/0,onChange:E,step:b=1,stepPixelSize:N,unclamped:w,unit:T,updateRate:j=400,fontSize:x,height:L,lineHeight:S}=m,[k,z]=i(m.value),[D,I]=i(!1),F=c(!1),M=c(m.value),O=c(0),$=c(0),_=c(null),A=c(null),B=c(null),C=c(null);function H(e){let r=$.current;if(null===r)throw Error("Origin is unset.");let t=s(e,p),n=_.current;if(null===n)throw Error("Final step pixel size has not been computed.");let u=O.current;if(null===u)throw Error("Original value is unset.");let l=o(Math.floor(u/b)*b+Math.trunc((t-r)/n)*b,g,y);M.current=l,z(l)}function K(e){document.body.style["pointer-events"]="auto",B.current&&clearInterval(B.current),$.current=null,_.current=null,O.current=null,document.removeEventListener("mousemove",H),document.removeEventListener("mouseup",K),F.current&&(E?.(e,M.current),F.current=!1)}l(()=>{m.value!==M.current&&(M.current=m.value,z(m.value))},[m.value]);let P=m.value;F.current&&(P=M.current);let U=t(e,{children:[f&&!F.current?r(a,{format:h,value:P}):h?h(P):P,T?` ${T}`:""]}),W=r("input",{className:"NumberInput__input",onBlur:function(e){let r=Number.parseFloat(e.currentTarget.value);(w||(r=o(r,g,y)),Number.isNaN(r))?I(!1):(M.current=r,z(r),E?.(e.nativeEvent,r),D&&I(!1))},onKeyDown:function(e){(e.key===n.Enter||u(e.key))&&I(!1)},ref:A,style:{display:D?void 0:"none",fontSize:x,height:L,lineHeight:S}});return v({displayElement:U,displayValue:P,dragging:F.current,editing:D,handleDragStart:function(e){if(!D){if("number"!=typeof N){let r=e.currentTarget.offsetWidth/((y-g)/b);if(void 0===N)_.current=r;else if("function"==typeof N)_.current=N(r);else throw Error(`Unsupported value for stepPixelSize of type ${typeof N}`)}else _.current=N;document.body.style["pointer-events"]="none",$.current=s(e.nativeEvent,p),O.current=m.value,F.current=!0,document.addEventListener("mouseup",K),C.current=setTimeout(()=>{var r=e.nativeEvent;if(F.current)document.addEventListener("mousemove",H),B.current=setInterval(()=>{F.current&&d&&E?.(r,M.current)},j);else if(I(!0),A.current){let e=A.current;e.value=M.current.toString(),setTimeout(()=>{e.focus(),e.select()},10)}C.current&&clearTimeout(C.current)},100)}},inputElement:W})}export{m as DraggableControl};

package/dist/components/Floating.d.ts

@@ -43,6 +43,12 @@ type Props = {
      * @default 200
      */
     hoverDelay: number;
+    /**
+     * Content will not close if the mouse moves out of the children while
+     * trying to move into the content.
+     * - Works only if used `hoverOpen` prop.
+     */
+    hoverSafePolygon: boolean;
     /**
      * Whitelisted classes.
      * Used to allow to add some secured classes,

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:!1}))}),{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 r,autoUpdate as i,flip as a,offset as l,safePolygon as s,shift as c,size as d,useClick as m,useDismiss as p,useFloating as g,useHover as f,useInteractions as h,useTransitionStatus as u}from"@floating-ui/react";import{cloneElement as C,isValidElement as v,useEffect 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:q,hoverOpen:I,hoverSafePolygon:N,handleOpen:$,onMounted:A,placement:B,preventPortal:D,stopChildPropagation:G,onOpenChange:H}=b,[J,K]=F(!1),{refs:L,floatingStyles:Q,context:T}=g({middleware:[l(M),a({padding:6}),c(),z&&d({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(),i(e,t,n,{ancestorResize:!1,ancestorScroll:!1,elementResize:!1}))}),{isMounted:U,status:V}=u(T,{duration:O||200}),W=p(T,{ancestorScroll:!0,outsidePress:e=>!y||e.target instanceof Element&&!e.target.closest(y)}),X=m(T,{enabled:!S}),Y=f(T,{enabled:!S,restMs:q||200,handleClose:N?s({requireIntent:!1}):null}),Z=void 0!==$,{getReferenceProps:_,getFloatingProps:ee}=h(Z?[]:[W,I?Y:X]),et=_({ref:L.setReference,...G&&{onClick:e=>e.stopPropagation()}}),en=ee({onClick:()=>{j&&T.onOpenChange(!1)},ref:L.setFloating});w(()=>{Z&&T.onOpenChange($)},[$]),x=v(R)?C(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(r,{id:"tgui-root",children:eo}))]})}export{b as Floating};

package/dist/components/Interactive.d.ts

@@ -0,0 +1,39 @@
+/**
+ * MIT License
+ * https://github.com/omgovich/react-colorful/
+ *
+ * Copyright (c) 2020 Vlad Shilov <omgovich@ya.ru>
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+ * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+ * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+ * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+ * SOFTWARE.
+ */
+import type { CSSProperties, ReactNode, RefObject } from 'react';
+export type Interaction = {
+    left: number;
+    top: number;
+};
+export type InteractiveProps = {
+    /** Callback when interaction moves */
+    onMove: (interaction: Interaction) => void;
+    /** Callback when key is pressed */
+    onKey: (offset: Interaction) => void;
+    /** Child elements */
+    children: ReactNode;
+    /** Ref to the container element */
+    containerRef: RefObject<HTMLDivElement | null>;
+    /** Optional styles */
+    style?: CSSProperties;
+};
+/**
+ * ## Interactive
+ *
+ * A low-level component that handles pointer and keyboard interactions.
+ *
+ * See an example of usage in the story:
+ * - [View Colorpicker story](https://tgstation.github.io/tgui-core/?path=/story/interfaces-colorpickermodal--default)
+ */
+export declare function Interactive(props: InteractiveProps): import("react/jsx-runtime").JSX.Element;

package/dist/components/Interactive.js

@@ -0,0 +1 @@
+import{jsx as e}from"react/jsx-runtime";import{clamp as t}from"../common/math.js";import{KEY as n,isArrow as r}from"../common/keys.js";function o(e){return e?.ownerDocument?.defaultView||self}function i(e,n){let r=e.getBoundingClientRect();return{left:t((n.pageX-(r.left+o(e).pageXOffset))/r.width,0,1),top:t((n.pageY-(r.top+o(e).pageYOffset))/r.height,0,1)}}function f(t){let{onMove:o,onKey:f,children:u,containerRef:a,style:c,...p}=t;return e("div",{...p,className:"react-colorful__interactive",onKeyDown:function(e){let t=e.key;r(t)&&(e.preventDefault(),f({left:t===n.Right?.05:t===n.Left?-.05:0,top:t===n.Down?.05:t===n.Up?-.05:0}))},onPointerDown:function(e){let t=a.current;t&&(e.preventDefault(),t.focus(),t.setPointerCapture(e.pointerId),o(i(t,e.nativeEvent)))},onPointerMove:function(e){e.preventDefault(),a.current?.hasPointerCapture(e.pointerId)&&o(i(a.current,e.nativeEvent))},onPointerUp:function(e){a.current?.releasePointerCapture(e.pointerId)},ref:a,role:"slider",style:c,tabIndex:0,children:u})}export{f as Interactive};

package/dist/components/MenuBar.d.ts

@@ -1,4 +1,5 @@
-import { type ReactNode } from 'react';
+import { type BooleanLike } from '../common/react.ts';
+import { type PropsWithChildren, type ReactNode } from 'react';
 type MenuBarItemProps = {
     children: ReactNode;
     className?: string;
@@ -13,15 +14,24 @@ type MenuBarItemProps = {
 };
 declare function MenuDropdown(props: MenuBarItemProps): import("react/jsx-runtime").JSX.Element;
 declare namespace MenuDropdown {
-    var MenuItemToggle: (props: any) => import("react/jsx-runtime").JSX.Element;
     var MenuItem: (props: MenuItemProps) => import("react/jsx-runtime").JSX.Element;
+    var MenuItemToggle: (props: MenuItemToggleProps) => import("react/jsx-runtime").JSX.Element;
+    var Submenu: typeof MenuItemSubmenu;
     var Separator: () => import("react/jsx-runtime").JSX.Element;
 }
 type MenuItemProps = Partial<{
     value: any;
-    displayText: string;
+    displayText: ReactNode;
+    disabled: BooleanLike;
     onClick: (value: any) => void;
 }>;
+type MenuItemToggleProps = MenuItemProps & Partial<{
+    checked: BooleanLike;
+}>;
+type MenuItemSubmenuProps = PropsWithChildren<Omit<MenuItemProps, 'value' | 'onClick'> & Partial<{
+    openWidth: string;
+}>>;
+declare function MenuItemSubmenu(props: MenuItemSubmenuProps): import("react/jsx-runtime").JSX.Element;
 type MenuBarProps = {
     children: ReactNode;
 };

package/dist/components/MenuBar.js

@@ -1 +1 @@
-import{jsx as e,jsxs as n}from"react/jsx-runtime";import{classes as r}from"../common/react.js";import{useRef as a}from"react";import{Box as t}from"./Box.js";import{Floating as o}from"./Floating.js";import{Icon as u}from"./Icon.js";function l(n){let{children:u,className:l,disabled:i,display:c,onClick:s,onMouseOver:m,open:_,openWidth:M,onOutsideClick:d,...B}=n,h=a(null);return e(o,{allowedOutsideClasses:".Menubar_inner",content:e("div",{className:"MenuBar__menu",style:{width:M},children:u}),children:e("div",{className:"Menubar_inner",ref:h,children:e(t,{className:r(["MenuBar__MenuBarButton","MenuBar__font","MenuBar__hover",l]),...B,onClick:i?()=>null:s,onMouseOver:m,children:e("span",{className:"MenuBar__MenuBarButton-text",children:c})})})})}function i(n){let{entry:r,children:a,openWidth:t,display:o,setOpenMenuBar:u,openMenuBar:i,setOpenOnHover:c,openOnHover:s,disabled:m,className:_}=n;return e(l,{className:_,disabled:m,display:o,onClick:()=>{u(i===r?null:r),c(!s)},onMouseOver:()=>{s&&u(r)},onOutsideClick:()=>{u(null),c(!1)},open:i===r,openWidth:t,children:a})}function c(n){let{children:r}=n;return e(t,{className:"MenuBar",children:r})}c.Dropdown=i,i.MenuItemToggle=function(a){let{value:o,displayText:l,onClick:i,checked:c}=a;return n(t,{className:r(["MenuBar__font","MenuBar__MenuItem","MenuBar__MenuItemToggle","MenuBar__hover"]),onClick:()=>i(o),children:[e("div",{className:"MenuBar__MenuItemToggle__check",children:e(u,{name:c?"check":"",size:1.3})}),l]})},i.MenuItem=function(n){let{value:a,displayText:o,onClick:u}=n;return e(t,{className:r(["MenuBar__font","MenuBar__MenuItem","MenuBar__hover"]),onClick:()=>u?.(a),children:o})},i.Separator=function(){return e("div",{className:"MenuBar__Separator"})};export{c as MenuBar};
+import{jsx as e,jsxs as n}from"react/jsx-runtime";import{classes as r}from"../common/react.js";import{useRef as a,useState as t}from"react";import{Box as u}from"./Box.js";import{Floating as o}from"./Floating.js";import{Icon as l}from"./Icon.js";function i(n){let{children:t,className:l,disabled:i,display:_,onClick:c,onMouseOver:s,open:m,openWidth:M,onOutsideClick:d,...B}=n,h=a(null);return e(o,{placement:"bottom-start",allowedOutsideClasses:".Menubar_inner",content:e("div",{className:"MenuBar__menu",style:{width:M},children:t}),children:e("div",{className:"Menubar_inner",ref:h,children:e(u,{className:r(["MenuBar__MenuBarButton",i&&"MenuBar__disabled","MenuBar__font","MenuBar__hover",l]),...B,onClick:i?()=>null:c,onMouseOver:s,children:e("span",{className:"MenuBar__MenuBarButton-text",children:_})})})})}function _(n){let{entry:r,children:a,openWidth:t,display:u,setOpenMenuBar:o,openMenuBar:l,setOpenOnHover:_,openOnHover:c,disabled:s,className:m}=n;return e(i,{className:m,disabled:s,display:u,onClick:()=>{o(l===r?null:r),_(!c)},onMouseOver:()=>{c&&o(r)},onOutsideClick:()=>{o(null),_(!1)},open:l===r,openWidth:t,children:a})}function c(n){let{children:r}=n;return e(u,{className:"MenuBar",children:r})}c.Dropdown=_,_.MenuItem=function(n){let{value:a,disabled:t,displayText:o,onClick:l}=n;return e(u,{className:r(["MenuBar__font",t&&"MenuBar__disabled","MenuBar__MenuItem","MenuBar__hover"]),onClick:()=>l?.(a),children:o})},_.MenuItemToggle=function(a){let{value:t,disabled:o,displayText:i,onClick:_,checked:c}=a;return n(u,{className:r(["MenuBar__font",o&&"MenuBar__disabled","MenuBar__MenuItem","MenuBar__MenuItemToggle","MenuBar__hover"]),onClick:()=>_?.(t),children:[e("div",{className:"MenuBar__MenuItemToggle__check",children:e(l,{name:c?"check":"",size:1.3})}),i]})},_.Submenu=function(a){let{displayText:i,disabled:_,openWidth:c,children:s}=a,[m,M]=t(!1);return e(o,{hoverOpen:!0,hoverDelay:250,hoverSafePolygon:!0,contentOffset:0,disabled:_,placement:"right-start",onOpenChange:M,content:e("div",{className:"MenuBar__menu",style:{width:c},children:s}),children:n(u,{className:r(["MenuBar__font",_&&"MenuBar__disabled","MenuBar__MenuItem","MenuBar__MenuItemSubmenu",m&&"MenuBar__MenuItemSubmenu__Open","MenuBar__hover"]),children:[i,e(l,{name:"chevron-right"})]})})},_.Separator=function(){return e("div",{className:"MenuBar__Separator"})};export{c as MenuBar};

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 n,round as s}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 n=Number.parseFloat(t.toString());this.setState({currentValue:n,dragging:!1,origin:e.screenY,previousValue:n}),this.dragTimeout=setTimeout(()=>{this.setState({dragging:!0})},250),this.dragInterval=setInterval(()=>{let{dragging:e,currentValue:t,previousValue:r}=this.state,{onChange:i,tickWhileDragging:n}=this.props;e&&n&&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=n(u.currentValue+l*i/o,t-i,r+i);Math.abs(m-u.currentValue)>=i?(u.currentValue=n(s(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:n}=this.props;if(!n){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:s,onChange:a,disabled:o}=this.props;if(o||!t)return;let u=n(Number.parseFloat(e.target.value),i,s);if(Number.isNaN(u))return void this.setState({editing:!1});this.setState({currentValue:u,editing:!1,previousValue:u}),r!==u&&a?.(u)};handleKeyDown=e=>{let{minValue:t,maxValue:s,onChange:a,disabled:o}=this.props;if(o)return;let{previousValue:u}=this.state;if(e.key===r.Enter){let r=n(Number.parseFloat(e.currentTarget.value),t,s);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:s}=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=s);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:`${n((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 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};

package/dist/components/Pointer.d.ts

@@ -0,0 +1,20 @@
+/**
+ * MIT License
+ * https://github.com/omgovich/react-colorful/
+ *
+ * Copyright (c) 2020 Vlad Shilov <omgovich@ya.ru>
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+ * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+ * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+ * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+ * SOFTWARE.
+ */
+export type PointerProps = {
+    className?: string;
+    top?: number;
+    left: number;
+    color: string;
+};
+export declare function Pointer(props: PointerProps): import("react/jsx-runtime").JSX.Element;

package/dist/components/Pointer.js

@@ -0,0 +1 @@
+import{jsx as r}from"react/jsx-runtime";import{classes as o}from"../common/react.js";function t(t){let{className:e,color:l,left:c,top:i=.5}=t;return r("div",{className:o(["react-colorful__pointer",e]),style:{top:`${100*i}%`,left:`${100*c}%`},children:r("div",{className:"react-colorful__pointer-fill",style:{backgroundColor:l}})})}export{t as Pointer};

package/dist/components/index.d.ts

@@ -22,6 +22,7 @@ export { Image } from './Image';
 export { ImageButton } from './ImageButton';
 export { InfinitePlane } from './InfinitePlane';
 export { Input } from './Input';
+export { Interactive } from './Interactive';
 export { KeyListener } from './KeyListener';
 export { Knob } from './Knob';
 export { LabeledControls } from './LabeledControls';
@@ -30,6 +31,7 @@ export { MenuBar } from './MenuBar';
 export { Modal } from './Modal';
 export { NoticeBox } from './NoticeBox';
 export { NumberInput } from './NumberInput';
+export { Pointer } from './Pointer';
 export { Popper } from './Popper';
 export { ProgressBar } from './ProgressBar';
 export { RestrictedInput } from './RestrictedInput';

package/dist/components/index.js

@@ -1 +1 @@
-import{AnimatedNumber as o}from"./AnimatedNumber.js";import{Autofocus as r}from"./Autofocus.js";import{Blink as m}from"./Blink.js";import{BlockQuote as t}from"./BlockQuote.js";import{Box as i}from"./Box.js";import{Button as e}from"./Button.js";import{ByondUi as s}from"./ByondUi.js";import{Chart as p}from"./Chart.js";import{Collapsible as f}from"./Collapsible.js";import{ColorBox as a}from"./ColorBox.js";import{Dialog as l}from"./Dialog.js";import{Dimmer as j}from"./Dimmer.js";import{Divider as n}from"./Divider.js";import{DmIcon as u}from"./DmIcon.js";import{DraggableControl as c}from"./DraggableControl.js";import{Dropdown as d}from"./Dropdown.js";import{FitText as b}from"./FitText.js";import{Flex as B}from"./Flex.js";import{Floating as g}from"./Floating.js";import{Icon as I}from"./Icon.js";import{Image as D}from"./Image.js";import{ImageButton as T}from"./ImageButton.js";import{InfinitePlane as x}from"./InfinitePlane.js";import{Input as C}from"./Input.js";import{KeyListener as k}from"./KeyListener.js";import{Knob as L}from"./Knob.js";import{LabeledControls as S}from"./LabeledControls.js";import{LabeledList as y}from"./LabeledList.js";import{MenuBar as A}from"./MenuBar.js";import{Modal as F}from"./Modal.js";import{NoticeBox as N}from"./NoticeBox.js";import{NumberInput as P}from"./NumberInput.js";import{Popper as K}from"./Popper.js";import{ProgressBar as M}from"./ProgressBar.js";import{RestrictedInput as R}from"./RestrictedInput.js";import{RoundGauge as h}from"./RoundGauge.js";import{Section as v}from"./Section.js";import{Slider as w}from"./Slider.js";import{Stack as G}from"./Stack.js";import{StyleableSection as O}from"./StyleableSection.js";import{Table as Q}from"./Table.js";import{Tabs as U}from"./Tabs.js";import{TextArea as V}from"./TextArea.js";import{TimeDisplay as q}from"./TimeDisplay.js";import{Tooltip as z}from"./Tooltip.js";import{TrackOutsideClicks as E}from"./TrackOutsideClicks.js";import{VirtualList as H}from"./VirtualList.js";export{o as AnimatedNumber,r as Autofocus,m as Blink,t as BlockQuote,i as Box,e as Button,s as ByondUi,p as Chart,f as Collapsible,a as ColorBox,l as Dialog,j as Dimmer,n as Divider,u as DmIcon,c as DraggableControl,d as Dropdown,b as FitText,B as Flex,g as Floating,I as Icon,D as Image,T as ImageButton,x as InfinitePlane,C as Input,k as KeyListener,L as Knob,S as LabeledControls,y as LabeledList,A as MenuBar,F as Modal,N as NoticeBox,P as NumberInput,K as Popper,M as ProgressBar,R as RestrictedInput,h as RoundGauge,v as Section,w as Slider,G as Stack,O as StyleableSection,Q as Table,U as Tabs,V as TextArea,q as TimeDisplay,z as Tooltip,E as TrackOutsideClicks,H as VirtualList};
+import{AnimatedNumber as o}from"./AnimatedNumber.js";import{Autofocus as r}from"./Autofocus.js";import{Blink as t}from"./Blink.js";import{BlockQuote as m}from"./BlockQuote.js";import{Box as i}from"./Box.js";import{Button as e}from"./Button.js";import{ByondUi as s}from"./ByondUi.js";import{Chart as p}from"./Chart.js";import{Collapsible as f}from"./Collapsible.js";import{ColorBox as a}from"./ColorBox.js";import{Dialog as n}from"./Dialog.js";import{Dimmer as j}from"./Dimmer.js";import{Divider as l}from"./Divider.js";import{DmIcon as u}from"./DmIcon.js";import{DraggableControl as c}from"./DraggableControl.js";import{Dropdown as d}from"./Dropdown.js";import{FitText as b}from"./FitText.js";import{Flex as B}from"./Flex.js";import{Floating as I}from"./Floating.js";import{Icon as g}from"./Icon.js";import{Image as D}from"./Image.js";import{ImageButton as T}from"./ImageButton.js";import{InfinitePlane as x}from"./InfinitePlane.js";import{Input as C}from"./Input.js";import{Interactive as k}from"./Interactive.js";import{KeyListener as L}from"./KeyListener.js";import{Knob as S}from"./Knob.js";import{LabeledControls as y}from"./LabeledControls.js";import{LabeledList as P}from"./LabeledList.js";import{MenuBar as A}from"./MenuBar.js";import{Modal as F}from"./Modal.js";import{NoticeBox as N}from"./NoticeBox.js";import{NumberInput as v}from"./NumberInput.js";import{Pointer as K}from"./Pointer.js";import{Popper as M}from"./Popper.js";import{ProgressBar as R}from"./ProgressBar.js";import{RestrictedInput as h}from"./RestrictedInput.js";import{RoundGauge as w}from"./RoundGauge.js";import{Section as G}from"./Section.js";import{Slider as O}from"./Slider.js";import{Stack as Q}from"./Stack.js";import{StyleableSection as U}from"./StyleableSection.js";import{Table as V}from"./Table.js";import{Tabs as q}from"./Tabs.js";import{TextArea as z}from"./TextArea.js";import{TimeDisplay as E}from"./TimeDisplay.js";import{Tooltip as H}from"./Tooltip.js";import{TrackOutsideClicks as J}from"./TrackOutsideClicks.js";import{VirtualList as W}from"./VirtualList.js";export{o as AnimatedNumber,r as Autofocus,t as Blink,m as BlockQuote,i as Box,e as Button,s as ByondUi,p as Chart,f as Collapsible,a as ColorBox,n as Dialog,j as Dimmer,l as Divider,u as DmIcon,c as DraggableControl,d as Dropdown,b as FitText,B as Flex,I as Floating,g as Icon,D as Image,T as ImageButton,x as InfinitePlane,C as Input,k as Interactive,L as KeyListener,S as Knob,y as LabeledControls,P as LabeledList,A as MenuBar,F as Modal,N as NoticeBox,v as NumberInput,K as Pointer,M as Popper,R as ProgressBar,h as RestrictedInput,w as RoundGauge,G as Section,O as Slider,Q as Stack,U as StyleableSection,V as Table,q as Tabs,z as TextArea,E as TimeDisplay,H as Tooltip,J as TrackOutsideClicks,W as VirtualList};

package/package.json

@@ -6,21 +6,19 @@
   },
   "description": "TGUI core component library",
   "devDependencies": {
-    "@biomejs/biome": "^2.2.3",
-    "@rsbuild/core": "^1.5.4",
-    "@rsbuild/plugin-react": "^1.4.0",
+    "@biomejs/biome": "^2.3.8",
+    "@rsbuild/core": "^1.6.11",
+    "@rsbuild/plugin-react": "^1.4.2",
     "@rsbuild/plugin-sass": "^1.4.0",
-    "@rslib/core": "^0.12.4",
-    "@storybook/addon-docs": "^9.1.5",
+    "@rslib/core": "^0.18.2",
+    "@storybook/addon-docs": "^10.1.2",
     "@types/bun": "latest",
     "@types/react": "latest",
     "@types/react-dom": "latest",
-    "prettier": "^3.6.2",
-    "sass": "^1.92.1",
-    "storybook": "^9.1.5",
-    "storybook-addon-sass-postcss": "^0.3.2",
-    "storybook-react-rsbuild": "^2.1.0",
-    "typescript": "^5.9.2"
+    "prettier": "^3.7.3",
+    "storybook": "^10.1.2",
+    "storybook-react-rsbuild": "^3.0.0",
+    "typescript": "^5.9.3"
   },
   "exports": {
     "./*": {
@@ -69,5 +67,5 @@
     "test": "bun test"
   },
   "type": "module",
-  "version": "5.3.1"
+  "version": "5.4.1"
 }

package/styles/colors.scss

@@ -35,10 +35,8 @@ $label: var(--color-label) !default;
 // Mappings of color names
 $color-map: ();
 
-// prettier-ignore
 $_gen_map: (
-  /* Base colors */
-  "red": var(--color-red),
+  /* Base colors */ "red": var(--color-red),
   "orange": var(--color-orange),
   "yellow": var(--color-yellow),
   "olive": var(--color-olive),
@@ -49,24 +47,18 @@ $_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),
+  /* 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),
+  /* Semantic colors */ "primary": var(--color-primary),
   "good": var(--color-good),
   "average": var(--color-average),
   "bad": var(--color-bad),
-  "label": var(--color-label),
+  "label": var(--color-label)
 );
 $low-contrast-color-map: ("yellow", "white") !default;
 

package/styles/components/ColorPicker.scss

@@ -0,0 +1,153 @@
+/**
+ * MIT License
+ * https://github.com/omgovich/react-colorful/
+ *
+ * Copyright (c) 2020 Vlad Shilov <omgovich@ya.ru>
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+ * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+ * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+ * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+ * SOFTWARE.
+ */
+
+@use '../colors.scss';
+@use '../base.scss';
+
+.react-colorful {
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  width: 200px;
+  height: 200px;
+  user-select: none;
+  cursor: default;
+}
+
+.react-colorful__saturation_value {
+  position: relative;
+  flex-grow: 1;
+  border-color: transparent; /* Fixes https://github.com/omgovich/react-colorful/issues/139 */
+  border-bottom: 12px solid #000;
+  border-radius: 8px 8px 0 0;
+  background-image: linear-gradient(
+      to top,
+      rgba(0, 0, 0, 255),
+      rgba(0, 0, 0, 0)
+    ),
+    linear-gradient(to right, rgba(255, 255, 255, 255), rgba(255, 255, 255, 0));
+}
+
+.react-colorful__pointer-fill,
+.react-colorful__alpha-gradient {
+  content: '';
+  position: absolute;
+  left: 0;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  pointer-events: none;
+  border-radius: inherit;
+}
+
+/* Improve elements rendering on light backgrounds */
+.react-colorful__alpha-gradient,
+.react-colorful__saturation_value {
+  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.05);
+}
+
+.react-colorful__hue,
+.react-colorful__r,
+.react-colorful__g,
+.react-colorful__b,
+.react-colorful__alpha,
+.react-colorful__saturation,
+.react-colorful__value {
+  position: relative;
+  height: 24px;
+}
+
+.react-colorful__hue {
+  background: linear-gradient(
+    to right,
+    #f00 0%,
+    #ff0 17%,
+    #0f0 33%,
+    #0ff 50%,
+    #00f 67%,
+    #f0f 83%,
+    #f00 100%
+  );
+}
+
+.react-colorful__r {
+  background: linear-gradient(to right, #000, #f00);
+}
+
+.react-colorful__g {
+  background: linear-gradient(to right, #000, #0f0);
+}
+
+.react-colorful__b {
+  background: linear-gradient(to right, #000, #00f);
+}
+
+/* Round bottom corners of the last element: `Hue` for `ColorPicker` or `Alpha` for `AlphaColorPicker` */
+.react-colorful__last-control {
+  border-radius: 0 0 8px 8px;
+}
+
+.react-colorful__interactive {
+  position: absolute;
+  left: 0;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  border-radius: inherit;
+  outline: none;
+  /* Don't trigger the default scrolling behavior when the event is originating from this element */
+  touch-action: none;
+}
+
+.react-colorful__pointer {
+  position: absolute;
+  z-index: 1;
+  box-sizing: border-box;
+  width: 28px;
+  height: 28px;
+  transform: translate(-50%, -50%);
+  background-color: #cfcfcf;
+  border: 2px solid #cfcfcf;
+  border-radius: 50%;
+  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.4);
+}
+
+.react-colorful__interactive:focus .react-colorful__pointer {
+  transform: translate(-50%, -50%) scale(1.1);
+  background-color: #fff;
+  border-color: #fff;
+}
+
+/* Chessboard-like pattern for alpha related elements */
+.react-colorful__alpha,
+.react-colorful__alpha-pointer {
+  background-color: #fff;
+  background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill-opacity=".05"><rect x="8" width="8" height="8"/><rect y="8" width="8" height="8"/></svg>');
+}
+
+.react-colorful__saturation-pointer,
+.react-colorful__value-pointer,
+.react-colorful__hue-pointer,
+.react-colorful__r-pointer,
+.react-colorful__g-pointer,
+.react-colorful__b-pointer {
+  z-index: 1;
+  width: 20px;
+  height: 20px;
+}
+
+/* Display the saturation value pointer over the hue one */
+.react-colorful__saturation_value-pointer {
+  z-index: 3;
+}

package/styles/components/MenuBar.scss

@@ -8,6 +8,10 @@
   font-family: var(--menu-bar-font-family);
   font-size: base.em(12px);
   line-height: base.em(17px);
+
+  &.MenuBar__disabled {
+    color: hsl(from currentColor h s l / 0.2);
+  }
 }
 
 .MenuBar__hover {
@@ -15,6 +19,10 @@
     background-color: hsl(from var(--menu-bar-background) h s calc(l + 20));
     transition: background-color 0ms;
   }
+
+  &.MenuBar__disabled {
+    background-color: var(--menu-bar-background);
+  }
 }
 
 .MenuBar__MenuBarButton {
@@ -49,6 +57,16 @@
   padding-left: var(--space-sm);
 }
 
+.MenuBar__MenuItemSubmenu {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+
+.MenuBar__MenuItemSubmenu__Open {
+  background-color: hsl(from var(--menu-bar-background) h s calc(l + 20));
+}
+
 .MenuBar__over {
   top: auto;
   bottom: 100%;

package/styles/main.scss

@@ -12,6 +12,7 @@
 @include meta.load-css("./components/BlockQuote.scss");
 @include meta.load-css("./components/Button.scss");
 @include meta.load-css("./components/ColorBox.scss");
+@include meta.load-css("./components/ColorPicker.scss");
 @include meta.load-css("./components/Dialog.scss");
 @include meta.load-css("./components/Dimmer.scss");
 @include meta.load-css("./components/Divider.scss");