tgui-core 4.0.3 → 4.1.0

package/dist/components/ImageButton.js

@@ -1 +1 @@
-import*as t from"react/jsx-runtime";import*as e from"../common/react.js";import*as s from"../common/ui.js";import*as n from"./DmIcon.js";import*as o from"./Icon.js";import*as a from"./Image.js";import*as m from"./Tooltip.js";function i(o){let{asset:i,assetSize:l=32,base64:r,buttons:u,buttonsAlt:p,children:x,className:g,color:d,disabled:_,dmFallback:I,dmIcon:h,dmIconState:j,fluid:B,fallbackIcon:f,imageSize:$=64,imageSrc:y,onClick:N,onRightClick:b,selected:v,title:w,tooltip:k,tooltipPosition:D,...z}=o,C=(0,t.jsxs)("div",{className:"ImageButton__container",onClick:t=>{!_&&N&&N(t)},onContextMenu:t=>{t.preventDefault(),!_&&b&&b(t)},onKeyDown:t=>{"Enter"===t.key&&!_&&N&&N(t)},style:{width:B?"auto":`calc(${$}px + 0.5em + 2px)`},tabIndex:_?void 0:0,children:[(0,t.jsx)("div",{className:"ImageButton__image",children:r||y?(0,t.jsx)(a.Image,{height:`${$}px`,src:r?`data:image/png;base64,${r}`:y,width:`${$}px`}):h&&j?(0,t.jsx)(n.DmIcon,{fallback:I||(0,t.jsx)(c,{icon:"spinner",size:$,spin:!0}),height:`${$}px`,icon:h,icon_state:j,width:`${$}px`}):i?(0,t.jsx)(a.Image,{className:(0,e.classes)(i||[]),height:`${$}px`,style:{transform:`scale(${$/l})`,transformOrigin:"top left"},width:`${$}px`}):(0,t.jsx)(c,{icon:f||"question",size:$})}),B?(0,t.jsxs)("div",{className:"ImageButton__content",children:[w&&(0,t.jsx)("span",{className:(0,e.classes)(["ImageButton__content--title",!!x&&"ImageButton__content--divider"]),children:w}),x&&(0,t.jsx)("span",{className:"ImageButton__content--text",children:x})]}):!!x&&(0,t.jsx)("span",{className:"ImageButton__content",children:x})]});return k&&(C=(0,t.jsx)(m.Tooltip,{content:k,position:D,children:C})),(0,t.jsxs)("div",{className:(0,e.classes)(["ImageButton",B&&"ImageButton--fluid",v&&"ImageButton--selected",_&&"ImageButton--disabled",!x&&"ImageButton--empty",!(N||b)&&"ImageButton--noAction",d&&"string"==typeof d?`ImageButton__color--${d}`:"ImageButton__color--default",g]),...(0,s.computeBoxProps)(z),children:[C,u&&(0,t.jsx)("div",{className:(0,e.classes)(["ImageButton__buttons",!x&&"ImageButton__buttons--empty"]),style:{width:"auto"},children:u}),p&&(0,t.jsx)("div",{className:(0,e.classes)(["ImageButton__buttons","ImageButton__buttons--alt",!x&&"ImageButton__buttons--empty"]),style:{maxWidth:B?"auto":`calc(${$}px +  0.5em)`,width:`calc(${$}px + ${.5*!B}em)`},children:p})]})}function c(e){let{icon:s,spin:n,size:a=64}=e;return(0,t.jsx)(o.Icon,{className:"ImageButton__image--fallback",height:`${a}px`,name:s,spin:n,style:{fontSize:`${a}px`},width:`${a}px`})}export{i as ImageButton};
+import{jsx as t,jsxs as e}from"react/jsx-runtime";import{classes as n}from"../common/react.js";import{computeBoxProps as o}from"../common/ui.js";import{DmIcon as a}from"./DmIcon.js";import{Icon as i}from"./Icon.js";import{Image as m}from"./Image.js";import{Tooltip as s}from"./Tooltip.js";function c(i){let{asset:c,assetSize:r=32,base64:u,buttons:p,buttonsAlt:d,children:g,className:_,color:h,disabled:I,dmFallback:B,dmIcon:f,dmIconState:x,fluid:$,fallbackIcon:y,imageSize:N=64,imageSrc:b,onClick:v,onRightClick:w,selected:j,title:k,tooltip:z,tooltipPosition:D,...C}=i,q=e("div",{className:"ImageButton__container",onClick:t=>{!I&&v&&v(t)},onContextMenu:t=>{t.preventDefault(),!I&&w&&w(t)},onKeyDown:t=>{"Enter"===t.key&&!I&&v&&v(t)},style:{width:$?"auto":`calc(${N}px + 0.5em + 2px)`},tabIndex:I?void 0:0,children:[t("div",{className:"ImageButton__image",children:u||b?t(m,{height:`${N}px`,src:u?`data:image/png;base64,${u}`:b,width:`${N}px`}):f&&x?t(a,{fallback:B||t(l,{icon:"spinner",size:N,spin:!0}),height:`${N}px`,icon:f,icon_state:x,width:`${N}px`}):c?t(m,{className:n(c||[]),height:`${N}px`,style:{transform:`scale(${N/r})`,transformOrigin:"top left"},width:`${N}px`}):t(l,{icon:y||"question",size:N})}),$?e("div",{className:"ImageButton__content",children:[k&&t("span",{className:n(["ImageButton__content--title",!!g&&"ImageButton__content--divider"]),children:k}),g&&t("span",{className:"ImageButton__content--text",children:g})]}):!!g&&t("span",{className:"ImageButton__content",children:g})]});return z&&(q=t(s,{content:z,position:D,children:q})),e("div",{className:n(["ImageButton",$&&"ImageButton--fluid",j&&"ImageButton--selected",I&&"ImageButton--disabled",!g&&"ImageButton--empty",!(v||w)&&"ImageButton--noAction",h&&"string"==typeof h?`ImageButton__color--${h}`:"ImageButton__color--default",_]),...o(C),children:[q,p&&t("div",{className:n(["ImageButton__buttons",!g&&"ImageButton__buttons--empty"]),style:{width:"auto"},children:p}),d&&t("div",{className:n(["ImageButton__buttons","ImageButton__buttons--alt",!g&&"ImageButton__buttons--empty"]),style:{maxWidth:$?"auto":`calc(${N}px +  0.5em)`,width:`calc(${N}px + ${.5*!$}em)`},children:d})]})}function l(e){let{icon:n,spin:o,size:a=64}=e;return t(i,{className:"ImageButton__image--fallback",height:`${a}px`,name:n,spin:o,style:{fontSize:`${a}px`},width:`${a}px`})}export{c as ImageButton};

package/dist/components/InfinitePlane.js

@@ -1 +1 @@
-import*as e from"react/jsx-runtime";import*as t from"react";import*as o from"../common/ui.js";import*as n from"./Button.js";import*as i from"./ProgressBar.js";import*as s from"./Stack.js";function r(n){let{backgroundImage:i,children:s,imageWidth:r,zoomPadding:u=0,initialLeft:c=0,initialTop:l=0,onBackgroundMoved:d,onZoomChange:m,...p}=n,[f,x]=(0,t.useState)(0),[h,j]=(0,t.useState)(0),[g,v]=(0,t.useState)(0),[k,S]=(0,t.useState)(!1),[w,b]=(0,t.useState)(0),[M,$]=(0,t.useState)(1);function B(e){x(e.clientX-g),j(e.clientY-w),S(!0)}function y(e){if(!k)return;let t=e.clientX-f,o=e.clientY-h;d?.(t+c,o+l),v(t),b(o)}function I(){S(!1)}function P(e){if("increase"===e&&M>=1.5||"decrease"===e&&M<=.5)return;let t=Math.round((M+("increase"===e?.1:-.1))*10)/10;$(t),m?.(t)}(0,t.useEffect)(()=>(window.addEventListener("mouseup",I),()=>{window.removeEventListener("mouseup",I)}),[]);let Y=c+g,C=l+w;return(0,e.jsxs)("div",{...(0,o.computeBoxProps)({...p,style:{...p.style,height:"100%",overflow:"hidden",position:"relative",width:"100%"}}),children:[(0,e.jsx)("div",{onMouseDown:B,onMouseMove:y,onWheel:function(e){0!==e.deltaY&&(e.preventDefault(),P(e.deltaY<0?"increase":"decrease"))},style:{backgroundImage:`url("${i}")`,backgroundPosition:`${Y}px ${C}px`,backgroundRepeat:"repeat",backgroundSize:`${M*r}px`,height:"100%",inset:0,position:"absolute",width:"100%"}}),(0,e.jsx)("div",{onMouseDown:B,onMouseMove:y,style:{height:"100%",inset:0,position:"absolute",transform:`translate(${Y}px, ${C}px) scale(${M})`,transformOrigin:"top left",width:"100%"},children:s}),(0,e.jsx)(a,{padding:u,onZoomClick:P,zoom:M})]})}function a(t){let{zoom:o,padding:r,onZoomClick:a}=t;return(0,e.jsx)("div",{style:{left:5,position:"absolute",right:5+r,top:5},children:(0,e.jsxs)(s.Stack,{children:[(0,e.jsx)(s.Stack.Item,{children:(0,e.jsx)(n.Button,{disabled:o<=.5,icon:"minus",onClick:()=>a("decrease")})}),(0,e.jsx)(s.Stack.Item,{grow:!0,children:(0,e.jsxs)(i.ProgressBar,{maxValue:1.5,minValue:.5,value:o,children:[o,"x"]})}),(0,e.jsx)(s.Stack.Item,{children:(0,e.jsx)(n.Button,{disabled:o>=1.5,icon:"plus",onClick:()=>a("increase")})})]})})}export{r as InfinitePlane};
+import{jsx as e,jsxs as n}from"react/jsx-runtime";import{computeBoxProps as t}from"../common/ui.js";import{useEffect as i,useState as o}from"react";import{Button as r}from"./Button.js";import{ProgressBar as l}from"./ProgressBar.js";import{Stack as s}from"./Stack.js";function a(r){let{backgroundImage:l,children:s,imageWidth:a,zoomPadding:d=0,initialLeft:u=0,initialTop:m=0,onBackgroundMoved:p,onZoomChange:f,...h}=r,[g,v]=o(0),[w,b]=o(0),[x,k]=o(0),[M,$]=o(!1),[j,y]=o(0),[I,Y]=o(1);function C(e){v(e.clientX-x),b(e.clientY-j),$(!0)}function D(e){if(!M)return;let n=e.clientX-g,t=e.clientY-w;p?.(n+u,t+m),k(n),y(t)}function P(){$(!1)}function z(e){if("increase"===e&&I>=1.5||"decrease"===e&&I<=.5)return;let n=Math.round((I+("increase"===e?.1:-.1))*10)/10;Y(n),f?.(n)}i(()=>(window.addEventListener("mouseup",P),()=>{window.removeEventListener("mouseup",P)}),[]);let B=u+x,E=m+j;return n("div",{...t({...h,style:{...h.style,height:"100%",overflow:"hidden",position:"relative",width:"100%"}}),children:[e("div",{onMouseDown:C,onMouseMove:D,onWheel:function(e){0!==e.deltaY&&(e.preventDefault(),z(e.deltaY<0?"increase":"decrease"))},style:{backgroundImage:`url("${l}")`,backgroundPosition:`${B}px ${E}px`,backgroundRepeat:"repeat",backgroundSize:`${I*a}px`,height:"100%",inset:0,position:"absolute",width:"100%"}}),e("div",{onMouseDown:C,onMouseMove:D,style:{height:"100%",inset:0,position:"absolute",transform:`translate(${B}px, ${E}px) scale(${I})`,transformOrigin:"top left",width:"100%"},children:s}),e(c,{padding:d,onZoomClick:z,zoom:I})]})}function c(t){let{zoom:i,padding:o,onZoomClick:a}=t;return e("div",{style:{left:5,position:"absolute",right:5+o,top:5},children:n(s,{children:[e(s.Item,{children:e(r,{disabled:i<=.5,icon:"minus",onClick:()=>a("decrease")})}),e(s.Item,{grow:!0,children:n(l,{maxValue:1.5,minValue:.5,value:i,children:[i,"x"]})}),e(s.Item,{children:e(r,{disabled:i>=1.5,icon:"plus",onClick:()=>a("increase")})})]})})}export{a as InfinitePlane};

package/dist/components/Input.js

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

package/dist/components/KeyListener.d.ts

@@ -1,4 +1,4 @@
-import type { KeyEvent } from '../common/events';
+import type { KeyEvent } from '../common/events.ts';
 type Props = Partial<{
     onKey: (key: KeyEvent) => void;
     onKeyDown: (key: KeyEvent) => void;

package/dist/components/KeyListener.js

@@ -1 +1 @@
-import*as e from"react";import*as o from"../common/hotkeys.js";function n(n){return(0,e.useEffect)(()=>{let e=(0,o.listenForKeyEvents)(e=>{n.onKey&&n.onKey(e),e.isDown()&&n.onKeyDown&&n.onKeyDown(e),e.isUp()&&n.onKeyUp&&n.onKeyUp(e)});return()=>{e()}},[]),null}export{n as KeyListener};
+import{listenForKeyEvents as o}from"../common/hotkeys.js";import{useEffect as n}from"react";function e(e){return n(()=>{let n=o(o=>{e.onKey&&e.onKey(o),o.isDown()&&e.onKeyDown&&e.onKeyDown(o),o.isUp()&&e.onKeyUp&&e.onKeyUp(o)});return()=>{n()}},[]),null}export{e as KeyListener};

package/dist/components/Knob.d.ts

@@ -1,5 +1,5 @@
+import { type BooleanLike } from '../common/react.ts';
 import type { Placement } from '@floating-ui/react';
-import { type BooleanLike } from '../common/react';
 import type { BoxProps } from './Box';
 type Props = {
     /** Value itself, controls the position of the cursor. */
@@ -22,12 +22,12 @@ type Props = {
     maxValue: number;
     /** Lowest possible value. */
     minValue: number;
-    /** Adjust value by this amount when dragging the input. */
-    onChange: (event: Event, value: number) => void;
     /**
-     * An event, which fires about every 500ms when you drag the input up and
-     * down, on release and on manual editing.
+     * An event which fires when release the knob or enter a number. This is the
+     * default value event for controls.
      */
+    onChange: (event: Event, value: number) => void;
+    /** An event which fires about every 500ms while dragging the input */
     onDrag: (event: Event, value: number) => void;
     /**
      * Applies a `color` to the outer ring around the knob based on whether the

package/dist/components/Knob.js

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

package/dist/components/LabeledControls.js

@@ -1 +1 @@
-import*as e from"react/jsx-runtime";import*as t from"./Flex.js";function l(l){let{children:r,wrap:n,...i}=l;return(0,e.jsx)(t.Flex,{align:"stretch",justify:"space-between",mx:-.5,wrap:n,...i,children:r})}l.Item=function(l){let{label:r,children:n,mx:i=1,...x}=l;return(0,e.jsx)(t.Flex.Item,{mx:i,children:(0,e.jsxs)(t.Flex,{align:"center",direction:"column",height:"100%",justify:"space-between",textAlign:"center",...x,children:[(0,e.jsx)(t.Flex.Item,{}),(0,e.jsx)(t.Flex.Item,{children:n}),(0,e.jsx)(t.Flex.Item,{color:"label",children:r})]})})};export{l as LabeledControls};
+import{jsx as e,jsxs as t}from"react/jsx-runtime";import{Flex as r}from"./Flex.js";function n(t){let{children:n,wrap:i,...l}=t;return e(r,{align:"stretch",justify:"space-between",mx:-.5,wrap:i,...l,children:n})}n.Item=function(n){let{label:i,children:l,mx:c=1,...m}=n;return e(r.Item,{mx:c,children:t(r,{align:"center",direction:"column",height:"100%",justify:"space-between",textAlign:"center",...m,children:[e(r.Item,{}),e(r.Item,{children:l}),e(r.Item,{color:"label",children:i})]})})};export{n as LabeledControls};

package/dist/components/LabeledList.d.ts

@@ -1,6 +1,6 @@
+import { type BooleanLike } from '../common/react.ts';
 import type { Placement } from '@floating-ui/react';
 import type { PropsWithChildren, ReactNode } from 'react';
-import { type BooleanLike } from '../common/react';
 export declare function LabeledList(props: PropsWithChildren): import("react/jsx-runtime").JSX.Element;
 type LabeledListItemProps = Partial<{
     /** Buttons to render aside the content. */

package/dist/components/LabeledList.js

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

package/dist/components/MenuBar.js

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

package/dist/components/Modal.d.ts

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

package/dist/components/Modal.js

@@ -1 +1 @@
-import*as o from"react/jsx-runtime";import*as m from"../common/keys.js";import*as s from"../common/react.js";import*as e from"../common/ui.js";import*as r from"./Dimmer.js";function a(a){let{className:i,children:t,onEnter:c,onEscape:n,...l}=a;return(0,o.jsx)(r.Dimmer,{className:"Modal__dimmer",onKeyDown:function(o){o.key===m.KEY.Enter&&c?.(o),(0,m.isEscape)(o.key)&&n?.(o)},children:(0,o.jsx)("div",{className:(0,s.classes)(["Modal",i,(0,e.computeBoxClassName)(l)]),...(0,e.computeBoxProps)(l),children:t})})}export{a as Modal};
+import{jsx as o}from"react/jsx-runtime";import{KEY as m,isEscape as r}from"../common/keys.js";import{classes as e}from"../common/react.js";import{computeBoxClassName as i,computeBoxProps as n}from"../common/ui.js";import{Dimmer as t}from"./Dimmer.js";function c(c){let{className:s,children:a,onEnter:l,onEscape:d,...f}=c;return o(t,{className:"Modal__dimmer",onKeyDown:function(o){o.key===m.Enter&&l?.(o),r(o.key)&&d?.(o)},children:o("div",{className:e(["Modal",s,i(f)]),...n(f),children:a})})}export{c as Modal};

package/dist/components/NoticeBox.js

@@ -1 +1 @@
-import*as o from"react/jsx-runtime";import*as e from"../common/react.js";import*as t from"./Box.js";function c(c){let{className:s,color:r,info:i,success:x,danger:m,...a}=c;return(0,o.jsx)(t.Box,{className:(0,e.classes)(["NoticeBox",r&&`NoticeBox--color--${r}`,i&&"NoticeBox--type--info",x&&"NoticeBox--type--success",m&&"NoticeBox--type--danger",s]),...a})}export{c as NoticeBox};
+import{jsx as o}from"react/jsx-runtime";import{classes as t}from"../common/react.js";import{Box as e}from"./Box.js";function c(c){let{className:r,color:i,info:m,success:x,danger:s,...n}=c;return o(e,{className:t(["NoticeBox",i&&`NoticeBox--color--${i}`,m&&"NoticeBox--type--info",x&&"NoticeBox--type--success",s&&"NoticeBox--type--danger",r]),...n})}export{c as NoticeBox};

package/dist/components/NumberInput.d.ts

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

package/dist/components/NumberInput.js

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

package/dist/components/Popper.js

@@ -1 +1 @@
-import*as e from"react/jsx-runtime";import*as t from"@floating-ui/react";function n(n){let{baseZIndex:i=5,children:r,content:s,isOpen:o,onClickOutside:a,placement:l}=n,{refs:f,floatingStyles:d,context:m}=(0,t.useFloating)({middleware:[(0,t.offset)(5),(0,t.flip)(),(0,t.shift)()],onOpenChange:a,open:o,placement:l,whileElementsMounted:t.autoUpdate}),p=(0,t.useDismiss)(m),{getReferenceProps:u,getFloatingProps:c}=(0,t.useInteractions)([p]);return(0,e.jsxs)(e.Fragment,{children:[(0,e.jsx)("div",{ref:f.setReference,...u(),children:r}),o&&(0,e.jsx)("div",{ref:f.setFloating,style:{...d,zIndex:i},...c(),children:s})]})}export{n as Popper};
+import{Fragment as e,jsx as r,jsxs as n}from"react/jsx-runtime";import{autoUpdate as t,flip as i,offset as o,shift as l,useDismiss as d,useFloating as c,useInteractions as f}from"@floating-ui/react";function m(m){let{baseZIndex:p=5,children:a,content:h,isOpen:s,onClickOutside:u,placement:g}=m,{refs:x,floatingStyles:v,context:w}=c({middleware:[o(5),i(),l()],onOpenChange:u,open:s,placement:g,whileElementsMounted:t}),{getReferenceProps:j,getFloatingProps:y}=f([d(w)]);return n(e,{children:[r("div",{ref:x.setReference,...j(),children:a}),s&&r("div",{ref:x.setFloating,style:{...v,zIndex:p},...y(),children:h})]})}export{m as Popper};

package/dist/components/ProgressBar.js

@@ -1 +1 @@
-import*as s from"react/jsx-runtime";import*as o from"../common/constants.js";import*as r from"../common/math.js";import*as e from"../common/react.js";import*as a from"../common/ui.js";function m(m){let{className:t,value:c,minValue:l=0,maxValue:i=1,color:n,ranges:d={},empty:f,children:p,...u}=m,g=(0,r.scale)(c,l,i),j=void 0!==p,x=n||(0,r.keyOfMatchingRange)(c,d)||"default",B=(0,a.computeBoxProps)(u),P=["ProgressBar",t,(0,a.computeBoxClassName)(u)],_={width:`${100*(0,r.clamp01)(g)}%`};return o.CSS_COLORS.includes(x)||"default"===x?P.push(`ProgressBar--color--${x}`):(B.style={...B.style,borderColor:x},_.backgroundColor=x),(0,s.jsxs)("div",{className:(0,e.classes)(P),...B,children:[(0,s.jsx)("div",{className:"ProgressBar__fill ProgressBar__fill--animated",style:_}),(0,s.jsx)("div",{className:"ProgressBar__content",children:j?p:!f&&`${(0,r.toFixed)(100*g)}%`})]})}export{m as ProgressBar};
+import{jsx as r,jsxs as o}from"react/jsx-runtime";import{CSS_COLORS as s}from"../common/constants.js";import{clamp01 as e,keyOfMatchingRange as m,scale as t,toFixed as a}from"../common/math.js";import{classes as i}from"../common/react.js";import{computeBoxClassName as l,computeBoxProps as c}from"../common/ui.js";function n(n){let{className:d,value:f,minValue:u=0,maxValue:g=1,color:p,ranges:B={},empty:P,children:_,...h}=n,j=t(f,u,g),v=void 0!==_,y=p||m(f,B)||"default",N=c(h),$=["ProgressBar",d,l(h)],b={width:`${100*e(j)}%`};return s.includes(y)||"default"===y?$.push(`ProgressBar--color--${y}`):(N.style={...N.style,borderColor:y},b.backgroundColor=y),o("div",{className:i($),...N,children:[r("div",{className:"ProgressBar__fill ProgressBar__fill--animated",style:b}),r("div",{className:"ProgressBar__content",children:v?_:!P&&`${a(100*j)}%`})]})}export{n as ProgressBar};

package/dist/components/RestrictedInput.js

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

package/dist/components/RoundGauge.js

@@ -1 +1 @@
-import*as e from"react/jsx-runtime";import*as a from"../common/math.js";import*as s from"../common/react.js";import*as r from"../common/ui.js";import*as o from"./AnimatedNumber.js";function c(c){let{alertAfter:l,alertBefore:t,className:n,format:m,maxValue:i=1,minValue:u=1,ranges:d,size:x=1,style:g,value:j,...C}=c,p=(0,a.scale)(j,u,i),_=(0,a.clamp01)(p),f=d?{}:{primary:[0,1]};if(d)for(let e in d){let s=d[e];f[e]=[(0,a.scale)(s[0],u,i),(0,a.scale)(s[1],u,i)]}let h=(!!l&&!!t&&!!(j>l)&&!!(j<t)||!!l&&!!(j>l)||!!t&&!!(j<t))&&(0,a.keyOfMatchingRange)(_,f);return(0,e.jsxs)("div",{className:"RoundGauge__wrapper",children:[(0,e.jsx)("div",{className:(0,s.classes)(["RoundGauge",n,(0,r.computeBoxClassName)(C)]),...(0,r.computeBoxProps)({style:{fontSize:`${x}em`,...g},...C}),children:(0,e.jsxs)("svg",{viewBox:"0 0 100 50",children:[(l||t)&&(0,e.jsx)("g",{className:(0,s.classes)(["RoundGauge__alert",h?`active RoundGauge__alert--${h}`:""]),children:(0,e.jsx)("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"})}),(0,e.jsx)("g",{children:(0,e.jsx)("circle",{className:"RoundGauge__ringTrack",cx:"50",cy:"50",r:"45"})}),(0,e.jsx)("g",{children:Object.keys(f).map((a,s)=>{let r=f[a];return(0,e.jsx)("circle",{className:`RoundGauge__ringFill RoundGauge--color--${a}`,cx:"50",cy:"50",r:"45",style:{strokeDashoffset:Math.max((2-(r[1]-r[0]))*Math.PI*50,0)},transform:`rotate(${180+180*r[0]} 50 50)`},s)})}),(0,e.jsxs)("g",{className:"RoundGauge__needle",transform:`rotate(${180*_-90} 50 50)`,children:[(0,e.jsx)("polygon",{className:"RoundGauge__needleLine",points:"46,50 50,0 54,50"}),(0,e.jsx)("circle",{className:"RoundGauge__needleMiddle",cx:"50",cy:"50",r:"8"})]}),(0,e.jsx)("title",{children:"alert"})]})}),(0,e.jsx)(o.AnimatedNumber,{format:m,value:j})]})}export{c as RoundGauge};
+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};

package/dist/components/Section.js

@@ -1 +1 @@
-import*as e from"react/jsx-runtime";import*as t from"react";import*as o from"../common/events.js";import*as c from"../common/react.js";import*as n from"../common/ui.js";function s(s){let{buttons:r,children:i,className:l,container_id:a="",fill:m,fitted:d,flexGrow:S,noTopPadding:u,onScroll:_,ref:f,scrollable:x,scrollableHorizontal:p,stretchContents:j,title:N,...h}=s,v=(0,c.canRender)(N)||(0,c.canRender)(r),b=(0,t.useRef)(null),R=f??b;return(0,t.useEffect)(()=>(R.current&&(x||p)&&(0,o.addScrollableNode)(R.current),()=>{R.current&&(0,o.removeScrollableNode)(R.current)}),[]),(0,e.jsxs)("div",{className:(0,c.classes)(["Section",m&&"Section--fill",d&&"Section--fitted",x&&"Section--scrollable",p&&"Section--scrollableHorizontal",S&&"Section--flex",l,(0,n.computeBoxClassName)(h)]),id:a,...(0,n.computeBoxProps)(h),children:[v&&(0,e.jsxs)("div",{className:"Section__title",children:[(0,e.jsx)("span",{className:"Section__titleText",children:N}),(0,e.jsx)("div",{className:"Section__buttons",children:r})]}),(0,e.jsx)("div",{className:"Section__rest",children:(0,e.jsx)("div",{className:(0,c.classes)(["Section__content",j&&"Section__content--stretchContents",u&&"Section__content--noTopPadding"]),onScroll:_,ref:R,children:i})})]})}export{s as Section};
+import{jsx as e,jsxs as t}from"react/jsx-runtime";import{addScrollableNode as n,removeScrollableNode as o}from"../common/events.js";import{canRender as c,classes as i}from"../common/react.js";import{computeBoxClassName as r,computeBoxProps as l}from"../common/ui.js";import{useEffect as s,useRef as m}from"react";function a(a){let{buttons:d,children:S,className:_,container_id:f="",fill:u,fitted:p,flexGrow:h,noTopPadding:v,onScroll:N,ref:j,scrollable:x,scrollableHorizontal:b,stretchContents:T,title:g,...z}=a,C=c(g)||c(d),H=m(null),P=j??H;return s(()=>(P.current&&(x||b)&&n(P.current),()=>{P.current&&o(P.current)}),[]),t("div",{className:i(["Section",u&&"Section--fill",p&&"Section--fitted",x&&"Section--scrollable",b&&"Section--scrollableHorizontal",h&&"Section--flex",_,r(z)]),id:f,...l(z),children:[C&&t("div",{className:"Section__title",children:[e("span",{className:"Section__titleText",children:g}),e("div",{className:"Section__buttons",children:d})]}),e("div",{className:"Section__rest",children:e("div",{className:i(["Section__content",T&&"Section__content--stretchContents",v&&"Section__content--noTopPadding"]),onScroll:N,ref:P,children:S})})]})}export{a as Section};

package/dist/components/Slider.d.ts

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

package/dist/components/Slider.js

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

package/dist/components/Stack.js

@@ -1 +1 @@
-import*as e from"react/jsx-runtime";import*as t from"react";import*as r from"../common/react.js";import*as s from"../common/ui.js";import*as a from"./Flex.js";function c(t){let{className:s,vertical:c,fill:o,reverse:m,zebra:i,...l}=t,n=m?"-reverse":"";return(0,e.jsx)("div",{className:(0,r.classes)(["Stack",o&&"Stack--fill",c?"Stack--vertical":"Stack--horizontal",i&&"Stack--zebra",m&&`Stack--reverse${c?"--vertical":""}`,s,(0,a.computeFlexClassName)(t)]),...(0,a.computeFlexProps)({direction:`${c?"column":"row"}${n}`,...l})})}c.Item=function(c){let{className:o,innerRef:m,...i}=c,l=(0,t.useRef)(m?.current??null);return(0,e.jsx)("div",{className:(0,r.classes)(["Stack__item",o,(0,s.computeBoxClassName)(i)]),ref:l,...(0,a.computeFlexItemProps)(i)})},c.Divider=function(t){let{className:c,hidden:o,...m}=t;return(0,e.jsx)("div",{className:(0,r.classes)(["Stack__item","Stack__divider",o&&"Stack__divider--hidden",c,(0,s.computeBoxClassName)(m)]),...(0,a.computeFlexItemProps)(m)})};export{c as Stack};
+import{jsx as t}from"react/jsx-runtime";import{classes as r}from"../common/react.js";import{computeBoxClassName as e}from"../common/ui.js";import{useRef as i}from"react";import{computeFlexClassName as c,computeFlexItemProps as a,computeFlexProps as o}from"./Flex.js";function m(e){let{className:i,vertical:a,fill:m,reverse:n,zebra:l,...s}=e,d=n?"-reverse":"";return t("div",{className:r(["Stack",m&&"Stack--fill",a?"Stack--vertical":"Stack--horizontal",l&&"Stack--zebra",n&&`Stack--reverse${a?"--vertical":""}`,i,c(e)]),...o({direction:`${a?"column":"row"}${d}`,...s})})}m.Item=function(c){let{className:o,innerRef:m,...n}=c,l=i(m?.current??null);return t("div",{className:r(["Stack__item",o,e(n)]),ref:l,...a(n)})},m.Divider=function(i){let{className:c,hidden:o,...m}=i;return t("div",{className:r(["Stack__item","Stack__divider",o&&"Stack__divider--hidden",c,e(m)]),...a(m)})};export{m as Stack};

package/dist/components/StyleableSection.js

@@ -1 +1 @@
-import*as e from"react/jsx-runtime";import*as t from"./Box.js";function s(s){let{children:c,titleStyle:o,titleSubtext:i,title:l,textStyle:n,style:r}=s;return(0,e.jsxs)(t.Box,{style:r,children:[(0,e.jsxs)(t.Box,{className:"Section__title",style:o,children:[(0,e.jsx)(t.Box,{className:"Section__titleText",style:n,children:l}),(0,e.jsx)("div",{className:"Section__buttons",children:i})," "]}),(0,e.jsx)(t.Box,{className:"Section__rest",children:(0,e.jsx)(t.Box,{className:"Section__content",children:c})})]})}export{s as StyleableSection};
+import{jsx as e,jsxs as t}from"react/jsx-runtime";import{Box as c}from"./Box.js";function i(i){let{children:l,titleStyle:n,titleSubtext:s,title:r,textStyle:o,style:a}=i;return t(c,{style:a,children:[t(c,{className:"Section__title",style:n,children:[e(c,{className:"Section__titleText",style:o,children:r}),e("div",{className:"Section__buttons",children:s})," "]}),e(c,{className:"Section__rest",children:e(c,{className:"Section__content",children:l})})]})}export{i as StyleableSection};

package/dist/components/Table.js

@@ -1 +1 @@
-var e;import*as a from"react/jsx-runtime";import*as l from"../common/react.js";import*as s from"../common/ui.js";function o(e){let{className:o,collapsing:c,children:r,...t}=e;return(0,a.jsx)("table",{className:(0,l.classes)(["Table",c&&"Table--collapsing",o,(0,s.computeBoxClassName)(t)]),...(0,s.computeBoxProps)(t),children:(0,a.jsx)("tbody",{children:r})})}(e=o||(o={})).Cell=function(e){let{className:o,collapsing:c,colSpan:r,header:t,...m}=e;return(0,a.jsx)("td",{className:(0,l.classes)(["Table__cell",c&&"Table__cell--collapsing",t&&"Table__cell--header",o,(0,s.computeBoxClassName)(e)]),colSpan:r,...(0,s.computeBoxProps)(m)})},e.Row=function(e){let{className:o,header:c,...r}=e;return(0,a.jsx)("tr",{className:(0,l.classes)(["Table__row",c&&"Table__row--header",o,(0,s.computeBoxClassName)(e)]),...(0,s.computeBoxProps)(r)})};export{o as Table};
+var e;import{jsx as l}from"react/jsx-runtime";import{classes as a}from"../common/react.js";import{computeBoxClassName as r,computeBoxProps as o}from"../common/ui.js";function t(e){let{className:t,collapsing:c,children:n,...m}=e;return l("table",{className:a(["Table",c&&"Table--collapsing",t,r(m)]),...o(m),children:l("tbody",{children:n})})}(e=t||(t={})).Cell=function(e){let{className:t,collapsing:c,colSpan:n,header:m,...b}=e;return l("td",{className:a(["Table__cell",c&&"Table__cell--collapsing",m&&"Table__cell--header",t,r(e)]),colSpan:n,...o(b)})},e.Row=function(e){let{className:t,header:c,...n}=e;return l("tr",{className:a(["Table__row",c&&"Table__row--header",t,r(e)]),...o(n)})};export{t as Table};

package/dist/components/Tabs.js

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

package/dist/components/TextArea.js

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

package/dist/components/TimeDisplay.js

@@ -1 +1 @@
-import*as e from"react";import*as t from"../common/format.js";import*as r from"../common/math.js";function a(a){let{value:m=0,auto:u,format:o}=a,[s,f]=(0,e.useState)(()=>(0,r.isSafeNumber)(m)?m:0),[i,n]=(0,e.useState)((0,r.isSafeNumber)(m)?m:void 0),l=(0,e.useRef)(null);return((0,e.useEffect)(()=>(void 0!==u&&(l.current=setInterval(()=>{let e="up"===u?10:-10;f(t=>Math.max(0,t+e))},1e3)),()=>{l.current&&clearInterval(l.current)}),[u]),(0,e.useEffect)(()=>{m!==i&&(n(m),f(m))},[m,i]),(0,r.isSafeNumber)(m))?o?o(s):(0,t.formatTime)(s):m||null}export{a as TimeDisplay};
+import{formatTime as r}from"../common/format.js";import{isSafeNumber as t}from"../common/math.js";import{useEffect as e,useRef as o,useState as m}from"react";function n(n){let{value:l=0,auto:a,format:u}=n,[c,i]=m(()=>t(l)?l:0),[p,f]=m(t(l)?l:void 0),v=o(null);return(e(()=>(void 0!==a&&(v.current=setInterval(()=>{let r="up"===a?10:-10;i(t=>Math.max(0,t+r))},1e3)),()=>{v.current&&clearInterval(v.current)}),[a]),e(()=>{l!==p&&(f(l),i(l))},[l,p]),t(l))?u?u(c):r(c):l||null}export{n as TimeDisplay};

package/dist/components/Tooltip.js

@@ -1 +1 @@
-import*as t from"react/jsx-runtime";import*as o from"./Floating.js";function n(n){let{content:e,children:r,position:i}=n;return(0,t.jsx)(o.Floating,{content:e,contentAutoWidth:!1,contentClasses:"Tooltip",hoverOpen:!0,placement:i,children:r})}export{n as Tooltip};
+import{jsx as t}from"react/jsx-runtime";import{Floating as o}from"./Floating.js";function e(e){let{content:n,children:r,position:i}=e;return t(o,{content:n,contentAutoWidth:!1,contentClasses:"Tooltip",hoverOpen:!0,placement:i,children:r})}export{e as Tooltip};

package/dist/components/TrackOutsideClicks.js

@@ -1 +1 @@
-import*as e from"react/jsx-runtime";import*as t from"react";function r(r){let{children:n,onOutsideClick:c}=r,i=(0,t.createRef)();function o(e){e.target instanceof Node&&i.current&&!i.current.contains(e.target)&&c()}return(0,t.useEffect)(()=>(document.addEventListener("click",o),()=>{document.removeEventListener("click",o)}),[]),(0,e.jsx)("div",{ref:i,style:{userSelect:"none"},children:n})}export{r as TrackOutsideClicks};
+import{jsx as e}from"react/jsx-runtime";import{createRef as t,useEffect as r}from"react";function n(n){let{children:c,onOutsideClick:i}=n,o=t();function u(e){e.target instanceof Node&&o.current&&!o.current.contains(e.target)&&i()}return r(()=>(document.addEventListener("click",u),()=>{document.removeEventListener("click",u)}),[]),e("div",{ref:o,style:{userSelect:"none"},children:c})}export{n as TrackOutsideClicks};

package/dist/components/VirtualList.js

@@ -1 +1 @@
-import*as t from"react/jsx-runtime";import*as e from"react";function a(a){let{children:r}=a,i=(0,e.useRef)(null),[l,s]=(0,e.useState)(1),[n,u]=(0,e.useState)(0),c=(0,e.useCallback)(()=>{let{current:t}=i;if(!r||!Array.isArray(r)||!t||l>=r.length)return;let e=document.body.offsetHeight-t.getBoundingClientRect().bottom,a=Math.ceil(t.offsetHeight/l);if(e>0){let t=Math.min(r.length,l+Math.max(1,Math.ceil(e/a)));s(t),u((r.length-t)*a)}},[i,l,r]);return(0,e.useEffect)(()=>{c();let t=setInterval(c,100);return()=>clearInterval(t)},[c]),(0,t.jsxs)("div",{className:"VirtualList",children:[(0,t.jsx)("div",{className:"VirtualList__Container",ref:i,children:Array.isArray(r)?r.slice(0,l):null}),(0,t.jsx)("div",{className:"VirtualList__Padding",style:{paddingBottom:`${n}px`}})]})}export{a as VirtualList};
+import{jsx as t,jsxs as e}from"react/jsx-runtime";import{useCallback as r,useEffect as i,useRef as l,useState as a}from"react";function n(n){let{children:s}=n,o=l(null),[c,m]=a(1),[u,d]=a(0),h=r(()=>{let{current:t}=o;if(!s||!Array.isArray(s)||!t||c>=s.length)return;let e=document.body.offsetHeight-t.getBoundingClientRect().bottom,r=Math.ceil(t.offsetHeight/c);if(e>0){let t=Math.min(s.length,c+Math.max(1,Math.ceil(e/r)));m(t),d((s.length-t)*r)}},[o,c,s]);return i(()=>{h();let t=setInterval(h,100);return()=>clearInterval(t)},[h]),e("div",{className:"VirtualList",children:[t("div",{className:"VirtualList__Container",ref:o,children:Array.isArray(s)?s.slice(0,c):null}),t("div",{className:"VirtualList__Padding",style:{paddingBottom:`${u}px`}})]})}export{n as VirtualList};

package/dist/components/index.js

@@ -1 +1 @@
-import*as o from"./AnimatedNumber.js";import*as e from"./Autofocus.js";import*as s from"./Blink.js";import*as a from"./BlockQuote.js";import*as _ from"./Box.js";import*as r from"./Button.js";import*as t from"./ByondUi.js";import*as p from"./Chart.js";import*as i from"./Collapsible.js";import*as m from"./ColorBox.js";import*as l from"./Dialog.js";import*as n from"./Dimmer.js";import*as c from"./Divider.js";import*as b from"./DmIcon.js";import*as x from"./DraggableControl.js";import*as k from"./Dropdown.js";import*as u from"./FitText.js";import*as f from"./Flex.js";import*as w from"./Floating.js";import*as j from"./Icon.js";import*as d from"./Image.js";import*as B from"./ImageButton.js";import*as g from"./InfinitePlane.js";import*as I from"./Input.js";import*as D from"./KeyListener.js";import*as T from"./Knob.js";import*as C from"./LabeledControls.js";import*as L from"./LabeledList.js";import*as S from"./MenuBar.js";import*as y from"./Modal.js";import*as A from"./NoticeBox.js";import*as F from"./NumberInput.js";import*as N from"./Popper.js";import*as P from"./ProgressBar.js";import*as K from"./RestrictedInput.js";import*as M from"./RoundGauge.js";import*as R from"./Section.js";import*as v from"./Slider.js";import*as h from"./Stack.js";import*as G from"./StyleableSection.js";import*as O from"./Table.js";import*as Q from"./Tabs.js";import*as U from"./TextArea.js";import*as V from"./TimeDisplay.js";import*as q from"./Tooltip.js";import*as z from"./TrackOutsideClicks.js";import*as E from"./VirtualList.js";var H=o.AnimatedNumber,J=e.Autofocus,W=s.Blink,X=a.BlockQuote,Y=_.Box,Z=r.Button,$=t.ByondUi,oo=p.Chart,oe=i.Collapsible,os=m.ColorBox,oa=l.Dialog,o_=n.Dimmer,or=c.Divider,ot=b.DmIcon,op=x.DraggableControl,oi=k.Dropdown,om=u.FitText,ol=f.Flex,on=w.Floating,oc=j.Icon,ob=d.Image,ox=B.ImageButton,ok=g.InfinitePlane,ou=I.Input,of=D.KeyListener,ow=T.Knob,oj=C.LabeledControls,od=L.LabeledList,oB=S.MenuBar,og=y.Modal,oI=A.NoticeBox,oD=F.NumberInput,oT=N.Popper,oC=P.ProgressBar,oL=K.RestrictedInput,oS=M.RoundGauge,oy=R.Section,oA=v.Slider,oF=h.Stack,oN=G.StyleableSection,oP=O.Table,oK=Q.Tabs,oM=U.TextArea,oR=V.TimeDisplay,ov=q.Tooltip,oh=z.TrackOutsideClicks,oG=E.VirtualList;export{H as AnimatedNumber,J as Autofocus,W as Blink,X as BlockQuote,Y as Box,Z as Button,$ as ByondUi,oo as Chart,oe as Collapsible,os as ColorBox,oa as Dialog,o_ as Dimmer,or as Divider,ot as DmIcon,op as DraggableControl,oi as Dropdown,om as FitText,ol as Flex,on as Floating,oc as Icon,ob as Image,ox as ImageButton,ok as InfinitePlane,ou as Input,of as KeyListener,ow as Knob,oj as LabeledControls,od as LabeledList,oB as MenuBar,og as Modal,oI as NoticeBox,oD as NumberInput,oT as Popper,oC as ProgressBar,oL as RestrictedInput,oS as RoundGauge,oy as Section,oA as Slider,oF as Stack,oN as StyleableSection,oP as Table,oK as Tabs,oM as TextArea,oR as TimeDisplay,ov as Tooltip,oh as TrackOutsideClicks,oG as VirtualList};
+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};

package/package.json

@@ -1,30 +1,25 @@
 {
   "author": "jlsnow301",
   "dependencies": {
-    "@floating-ui/react": "^0.27.8",
+    "@floating-ui/react": "^0.27.12",
     "@nozbe/microfuzz": "^1.0.0"
   },
   "description": "TGUI core component library",
   "devDependencies": {
-    "@biomejs/biome": "^2.0.0-beta.5",
-    "@rsbuild/core": "^1.3.20",
-    "@rsbuild/plugin-react": "^1.3.1",
-    "@rsbuild/plugin-sass": "^1.3.1",
-    "@rslib/core": "^0.7.1",
-    "@storybook/addon-console": "^3.0.0",
-    "@storybook/addon-essentials": "^8.6.14",
-    "@storybook/blocks": "^8.6.14",
-    "@storybook/react": "^8.6.14",
-    "@storybook/test": "^8.6.14",
-    "@storybook/theming": "^8.6.14",
-    "@types/bun": "^1.2.13",
-    "@types/react": "^19.1.4",
-    "@types/react-dom": "^19.1.5",
+    "@biomejs/biome": "^2.0.0-beta.6",
+    "@rsbuild/core": "^1.3.22",
+    "@rsbuild/plugin-react": "^1.3.2",
+    "@rsbuild/plugin-sass": "^1.3.2",
+    "@rslib/core": "^0.9.2",
+    "@storybook/addon-docs": "^9.0.9",
+    "@types/bun": "^1.2.15",
+    "@types/react": "^19.1.7",
+    "@types/react-dom": "^19.1.6",
     "prettier": "^3.5.3",
-    "sass": "^1.89.0",
-    "storybook": "^8.6.14",
+    "sass": "^1.89.2",
+    "storybook": "^9.0.9",
     "storybook-addon-sass-postcss": "^0.3.2",
-    "storybook-react-rsbuild": "^1.0.1",
+    "storybook-react-rsbuild": "^2.0.1",
     "typescript": "^5.8.3"
   },
   "exports": {
@@ -55,7 +50,7 @@
   ],
   "license": "MIT",
   "name": "tgui-core",
-  "packageManager": "bun@1.2.13",
+  "packageManager": "bun@1.2.15",
   "peerDependencies": {
     "react": "^19.1.0",
     "react-dom": "^19.1.0"
@@ -73,5 +68,5 @@
     "test": "bun test"
   },
   "type": "module",
-  "version": "4.0.3"
+  "version": "4.1.0"
 }

package/styles/atomic/candystripe.scss

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

package/styles/atomic/centered-image.scss

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

package/styles/atomic/color.scss

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

package/styles/atomic/debug-layout.scss

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