tgui-core 4.3.4 → 5.1.0

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: readonly ["onClick", "onContextMenu", "onDoubleClick", "onKeyDown", "onKeyUp", "onMouseDown", "onMouseLeave", "onMouseMove", "onMouseOver", "onMouseUp", "onScroll"];
+export declare const eventHandlers: ["onClick", "onContextMenu", "onDoubleClick", "onKeyDown", "onKeyUp", "onMouseDown", "onMouseLeave", "onMouseMove", "onMouseOver", "onMouseUp", "onScroll", "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,i=t=>"string"==typeof t?e(t):"number"==typeof t?e(.5*t):void 0;function n(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,i)=>{("number"==typeof i||"string"==typeof i)&&(e[t]=o(i))},p=(t,o)=>(e,i)=>{i&&(e[t]=o)},g=(t,o,e)=>(i,n)=>{if("number"==typeof n||"string"==typeof n)for(let r=0;r<e.length;r++)i[t+e[r]]=o(n)},a=t=>(o,e)=>{n(e)||(o[t]=e)},f={align:r("textAlign"),backgroundColor:a("backgroundColor"),bottom:l("bottom",e),color:a("color"),fontFamily:r("fontFamily"),fontSize:l("fontSize",e),fontWeight:r("fontWeight"),g:l("gap",i),gc:l("columnGap",i),gr:l("rowGap",i),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:g("margin",i,["Top","Bottom","Left","Right"]),maxHeight:l("maxHeight",e),maxWidth:l("maxWidth",e),mb:l("marginBottom",i),minHeight:l("minHeight",e),minWidth:l("minWidth",e),ml:l("marginLeft",i),mr:l("marginRight",i),mt:l("marginTop",i),mx:g("margin",i,["Left","Right"]),my:g("margin",i,["Top","Bottom"]),opacity:r("opacity"),overflow:r("overflow"),overflowX:r("overflowX"),overflowY:r("overflowY"),p:g("padding",i,["Top","Bottom","Left","Right"]),pb:l("paddingBottom",i),pl:l("paddingLeft",i),position:r("position"),pr:l("paddingRight",i),pt:l("paddingTop",i),px:g("padding",i,["Left","Right"]),py:g("padding",i,["Top","Bottom"]),right:l("right",e),textAlign:r("textAlign"),textColor:a("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 i in t){if("style"===i)continue;let n=t[i],r=f[i]||m[i];r?r(e,n):o[i]=n}return o.style={...e,...t.style},o}function u(t){let e=t.textColor||t.color,{backgroundColor:i}=t;return o([n(e)&&`color-${e}`,n(i)&&`color-bg-${i}`])}function c(t){let o={};if(!t)return o;for(let e of t.split(" ")){let[t,i]=e.split("-");if(t)if(t in f){if(""===i)continue;let e=Number(i);!Number.isNaN(e)&&Number.isFinite(e)?o[t]=e:o[t]=i}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"];export{m as booleanStyleMap,u as computeBoxClassName,s as computeBoxProps,c as computeTwClass,h as eventHandlers,i 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","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/Box.d.ts

@@ -1,6 +1,6 @@
 import type { BooleanLike } from '../common/react.ts';
 import { type BooleanStyleMap, type EventHandlers, type StringStyleMap } from '../common/ui.ts';
-import { type CSSProperties, type ReactNode } from 'react';
+import { type CSSProperties, type HTMLAttributes, type ReactNode } from 'react';
 export type BoxInternalProps = Partial<{
     /**
      * The component used for the root node.
@@ -38,7 +38,13 @@ export type BoxInternalProps = Partial<{
      */
     tw: string;
 }>;
-export interface BoxProps<TElement = HTMLDivElement> extends BoxInternalProps, BooleanStyleMap, StringStyleMap, EventHandlers<TElement> {
+type LiftedHTMLAttributes<TElement> = {
+    /** Whether this element is draggable.
+     * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Global_attributes/draggable
+     */
+    draggable?: HTMLAttributes<TElement>['draggable'];
+};
+export interface BoxProps<TElement = HTMLDivElement> extends BoxInternalProps, BooleanStyleMap, StringStyleMap, LiftedHTMLAttributes<TElement>, EventHandlers<TElement> {
 }
 type DangerDoNotUse = {
     dangerouslySetInnerHTML?: {

package/dist/components/DraggableControl.d.ts

@@ -23,6 +23,8 @@ type Props = {
     animated: boolean;
     /** The matrix to use for the drag. */
     dragMatrix: [number, number];
+    /** onChange also fires when you drag the input. */
+    tickWhileDragging: boolean;
     /** Format the value using this function before displaying it. */
     format: (value: number) => string;
     /** The maximum value. */
@@ -34,12 +36,10 @@ type Props = {
      * number. This is the default value event for controls.
      */
     onChange: (event: Event, value: number) => void;
-    /** An event which fires when you drag the input. */
-    onDrag: (event: MouseEvent, value: number) => void;
     /** The step size. */
     step: number;
     /** The step size in pixels. */
-    stepPixelSize: number;
+    stepPixelSize: number | ((defaultStepPixelSize: number) => number);
     /** Whether to unclamp the value. */
     unclamped: boolean;
     /** The unit of the value. */

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 c}from"../common/math.js";import{useEffect as o,useRef as i,useState as l}from"react";import{AnimatedNumber as m}from"./AnimatedNumber.js";function a(e,r){return e.screenX*r[0]+e.screenY*r[1]}function v(v){let{animated:s,children:d,dragMatrix:f=[1,0],format:p,maxValue:N=Number.POSITIVE_INFINITY,minValue:I=Number.NEGATIVE_INFINITY,onChange:E,onDrag:b,step:g=1,stepPixelSize:y=1,unclamped:T,unit:h,updateRate:j=400,fontSize:F,height:L,lineHeight:S}=v,[_,k]=l(v.value),[D,Y]=l(!1),x=i(!1),A=i(v.value),V=i(0),w=i(-1),z=i(null),B=i(null),C=i(null);function G(e){let r=a(e,f),t=r-w.current,n=Number.isFinite(I)?I%g:0;V.current=c(V.current+t*g/y,I-g,N+g);let u=c(V.current-V.current%g+n,I,N);A.current=u,k(u),w.current=r}function H(e){document.body.style["pointer-events"]="auto",B.current&&clearInterval(B.current),w.current=-1,document.removeEventListener("mousemove",G),document.removeEventListener("mouseup",H),x.current&&(E?.(e,A.current),b?.(e,A.current),x.current=!1)}o(()=>{v.value!==A.current&&(A.current=v.value,k(v.value))},[v.value]);let K=v.value;x.current&&(K=A.current);let O=t(e,{children:[s&&!x.current?r(m,{format:p,value:K}):p?p(K):K,h?` ${h}`:""]}),P=r("input",{className:"NumberInput__input",onBlur:function(e){let r=Number.parseFloat(e.currentTarget.value);if(T||(r=c(r,I,N)),Number.isNaN(r))return void Y(!1);V.current=r,A.current=r,k(r),E?.(e.nativeEvent,r),D&&Y(!1)},onKeyDown:function(e){(e.key===n.Enter||u(e.key))&&Y(!1)},ref:z,style:{display:D?void 0:"none",fontSize:F,height:L,lineHeight:S}});return d({displayElement:O,displayValue:K,dragging:x.current,editing:D,handleDragStart:function(e){D||(document.body.style["pointer-events"]="none",w.current=a(e.nativeEvent,f),V.current=v.value,x.current=!0,document.addEventListener("mouseup",H),C.current=setTimeout(()=>{var r=e.nativeEvent;if(x.current)document.addEventListener("mousemove",G),B.current=setInterval(()=>{x.current&&b?.(r,v.value)},j);else if(Y(!0),z.current){let e=z.current;e.value=V.current.toString(),setTimeout(()=>{e.focus(),e.select()},10)}C.current&&clearTimeout(C.current)},100))},inputElement:P})}export{v 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:v,children:f,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:[v&&!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 f({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.value)},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/Input.d.ts

@@ -22,6 +22,8 @@ export type BaseInputProps<TElement = HTMLInputElement> = Partial<{
     fluid: boolean;
     /** Mark this if you want to use a monospace font */
     monospace: boolean;
+    /** Allows to toggle on spellcheck on inputs */
+    spellcheck: boolean;
 }> & BoxProps<TElement>;
 export type TextInputProps<TElement = HTMLInputElement> = Partial<{
     /** The maximum length of the input value */

package/dist/components/Input.js

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

package/dist/components/Knob.d.ts

@@ -11,6 +11,8 @@ type Props = {
     bipolar: boolean;
     /** Color of the outer ring around the knob. */
     color: string | BooleanLike;
+    /** onChange also fires every 500ms while dragging the input. */
+    tickWhileDragging: boolean;
     /**
      * If set, this value will be used to set the fill percentage of the outer
      * ring independently of the main value.
@@ -27,8 +29,6 @@ type Props = {
      * 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
      * value lands in the range between `from` and `to`.

package/dist/components/Knob.js

@@ -1 +1 @@
-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};
+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,tickWhileDragging:_,format:d,maxValue:b,minValue:h,onChange: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,tickWhileDragging:_,format:d,maxValue:b,minValue:h,onChange:p,step:K,stepPixelSize:f,unclamped:g,unit:u,value:v,children:c=>{let{displayElement:s,displayValue:m,dragging:_,handleDragStart:d,inputElement:p}=c,K=n(M??m,h,b),f=n(m,h,b),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:d,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/NumberInput.d.ts

@@ -15,14 +15,14 @@ type Props = Required<{
     animated: boolean;
     /** Makes the input field uneditable & non draggable to prevent user changes */
     disabled: boolean;
+    /** onChange also fires about every 500ms when you drag the input up and down. */
+    tickWhileDragging: boolean;
     /** Format value using this function before displaying it. */
     format: (value: number) => string;
     /** Adjusts the width to 100% of its parent container */
     fluid: boolean;
     /** An event which fires when you release the input or successfully enter a number. */
     onChange: (value: number) => void;
-    /** An event which fires about every 500ms when you drag the input up and down, on release and on manual editing. */
-    onDrag: (value: number) => void;
     /** Screen distance mouse needs to travel to adjust value by one `step`. */
     stepPixelSize: number;
     /** Unit to display to the right of value. */

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,{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};
+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};

package/dist/components/ProgressBar.d.ts

@@ -39,9 +39,11 @@ type Props = {
      * ```
      *
      */
-    ranges: Record<string, [number, number]>;
+    ranges: Readonly<Record<string, Readonly<[number, number]>>>;
     /** Removes progress percentage text, makes no sense if children are present */
     empty: boolean;
+    /** The number of digits to appear after the percent's decimal point. */
+    fractionDigits: number;
 }> & BoxProps & PropsWithChildren;
 /**
  * ## ProgressBar

package/dist/components/ProgressBar.js

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

package/dist/components/Slider.d.ts

@@ -16,6 +16,8 @@ type Props = {
     color: string;
     /** Disables the slider. */
     disabled: boolean;
+    /** onChange also fires when you drag the input. */
+    tickWhileDragging: boolean;
     /**
      * If set, this value will be used to set the fill percentage of the
      * progress bar filler independently of the main value.
@@ -28,8 +30,6 @@ type Props = {
      * 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
      * range between `from` and `to`.

package/dist/components/Slider.js

@@ -1 +1 @@
-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};
+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,tickWhileDragging:n,format:_,maxValue:f,minValue:h,onChange: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,tickWhileDragging:n,format:_,maxValue:f,minValue:h,onChange:u,step:g,stepPixelSize:p,unit:v,value:B,children:m=>{let{displayElement:d,displayValue:c,dragging:n,editing:_,handleDragStart:u,inputElement:g}=m,p=null!=P,v=i(l(P??c,h,f)),M=i(l(c,h,f)),$=S||s(P??B,j)||"default";return e("div",{className:a(["Slider",_&&"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/TextArea.js

@@ -1 +1 @@
-import{jsx as e}from"react/jsx-runtime";import{KEY as t,isEscape as r}from"../common/keys.js";import{classes as n}from"../common/react.js";import{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};
+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,spellcheck:K=!1,userMarkup:C,value:A,...w}=a,B=l(null),L=E??B,[N,q]=m(A??"");c(()=>{(s||f)&&setTimeout(()=>{L.current?.focus(),f&&L.current?.select()},1)},[]),c(()=>{L.current&&document.activeElement!==L.current&&A!==N&&q(A??"")},[A]);let z=o(w),F=n(["Input","TextArea",y&&"Input--fluid",d&&"Input--monospace",p&&"Input--disabled",u(w),g]);return e("textarea",{...z,autoComplete:"off",className:F,maxLength:b,onBlur:function(e){k?.(N)},onChange:function(e){let t=e.currentTarget.value;q(t),$&&(v?i(()=>$(t)):$(t))},onKeyDown:function(e){if(j?.(e),e.key===t.Enter&&!e.shiftKey){e.preventDefault(),h?.(e.currentTarget.value),I&&q(""),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;q(`${t.substring(0,r)}	${t.substring(n)}`),e.currentTarget.selectionEnd=r+1,$?.(e.currentTarget.value);return}if(C&&(e.ctrlKey||e.metaKey)&&C[e.key]){e.preventDefault();let{selectionStart:t,selectionEnd:r,value:n}=e.currentTarget,u=C[e.key];q(`${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:L,spellCheck:K,value:N})}export{s as TextArea};

package/package.json

@@ -6,18 +6,18 @@
   },
   "description": "TGUI core component library",
   "devDependencies": {
-    "@biomejs/biome": "^2.0.6",
-    "@rsbuild/core": "^1.4.3",
-    "@rsbuild/plugin-react": "^1.3.2",
-    "@rsbuild/plugin-sass": "^1.3.2",
-    "@rslib/core": "^0.10.4",
-    "@storybook/addon-docs": "^9.0.15",
-    "@types/bun": "^1.2.17",
-    "@types/react": "^19.1.8",
-    "@types/react-dom": "^19.1.6",
+    "@biomejs/biome": "^2.1.1",
+    "@rsbuild/core": "^1.4.7",
+    "@rsbuild/plugin-react": "^1.3.4",
+    "@rsbuild/plugin-sass": "^1.3.3",
+    "@rslib/core": "^0.10.6",
+    "@storybook/addon-docs": "^9.0.17",
+    "@types/bun": "latest",
+    "@types/react": "latest",
+    "@types/react-dom": "latest",
     "prettier": "^3.6.2",
     "sass": "^1.89.2",
-    "storybook": "^9.0.15",
+    "storybook": "^9.0.17",
     "storybook-addon-sass-postcss": "^0.3.2",
     "storybook-react-rsbuild": "^2.0.2",
     "typescript": "^5.8.3"
@@ -69,5 +69,5 @@
     "test": "bun test"
   },
   "type": "module",
-  "version": "4.3.4"
+  "version": "5.1.0"
 }

package/styles/atomic/candystripe.scss

@@ -1,8 +1,9 @@
 /* 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);
+  /* background-color is usually overridden. So we use linear "gradient" */
+  background: linear-gradient(var(--candystripe-odd));
 }
 
 :where(.candystripe:nth-child(even)) {
-  background-color: var(--candystripe-even);
+  background: linear-gradient(var(--candystripe-even));
 }

package/styles/colors.scss

@@ -68,7 +68,7 @@ $_gen_map: (
   "bad": var(--color-bad),
   "label": var(--color-label),
 );
-$low-contrast-color-map: ("yellow", "white");
+$low-contrast-color-map: ("yellow", "white") !default;
 
 // Color names for which to generate a color map
 $color-map-keys: map.keys($_gen_map) !default;

package/styles/components/Button.scss

@@ -142,7 +142,6 @@
 @each $color-name, $color-value in colors.$color-map {
   .Button--color--#{$color-name} {
     --color: #{$color-value};
-    --button-color: var(--color-white);
 
     @each $color in colors.$low-contrast-color-map {
       @if $color-name == $color {

package/styles/components/Section.scss

@@ -69,7 +69,7 @@
   overflow-y: hidden;
 
   & > .Section__rest > .Section__content {
-    overflow-y: scroll;
+    overflow-y: auto;
     overflow-x: hidden;
   }
 }
@@ -80,7 +80,7 @@
 
   & > .Section__rest > .Section__content {
     overflow-y: hidden;
-    overflow-x: scroll;
+    overflow-x: auto;
   }
 }
 
@@ -89,8 +89,8 @@
   overflow-y: hidden;
 
   & > .Section__rest > .Section__content {
-    overflow-y: scroll;
-    overflow-x: scroll;
+    overflow-y: auto;
+    overflow-x: auto;
   }
 }