tgui-core 4.0.3 → 4.0.4
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +7 -0
- package/dist/common/events.js +1 -1
- package/dist/common/fuzzysearch.js +1 -1
- package/dist/common/hotkeys.js +1 -1
- package/dist/common/random.js +1 -1
- package/dist/common/ui.js +1 -1
- package/dist/common/vector.js +1 -1
- package/dist/components/AnimatedNumber.js +1 -1
- package/dist/components/Autofocus.js +1 -1
- package/dist/components/Blink.js +1 -1
- package/dist/components/BlockQuote.js +1 -1
- package/dist/components/Box.d.ts +2 -2
- package/dist/components/Box.js +1 -1
- package/dist/components/Button.d.ts +1 -1
- package/dist/components/Button.js +1 -1
- package/dist/components/ByondUi.js +1 -1
- package/dist/components/Chart.js +1 -1
- package/dist/components/Collapsible.js +1 -1
- package/dist/components/ColorBox.js +1 -1
- package/dist/components/Dialog.js +1 -1
- package/dist/components/Dimmer.js +1 -1
- package/dist/components/Divider.js +1 -1
- package/dist/components/DmIcon.js +1 -1
- package/dist/components/DraggableControl.js +1 -1
- package/dist/components/Dropdown.d.ts +2 -0
- package/dist/components/Dropdown.js +1 -1
- package/dist/components/FitText.js +1 -1
- package/dist/components/Flex.js +1 -1
- package/dist/components/Floating.d.ts +1 -1
- package/dist/components/Floating.js +1 -1
- package/dist/components/Icon.d.ts +1 -1
- package/dist/components/Icon.js +1 -1
- package/dist/components/Image.d.ts +7 -1
- package/dist/components/Image.js +1 -1
- package/dist/components/ImageButton.d.ts +1 -1
- package/dist/components/ImageButton.js +1 -1
- package/dist/components/InfinitePlane.js +1 -1
- package/dist/components/Input.js +1 -1
- package/dist/components/KeyListener.d.ts +1 -1
- package/dist/components/KeyListener.js +1 -1
- package/dist/components/Knob.d.ts +1 -1
- package/dist/components/Knob.js +1 -1
- package/dist/components/LabeledControls.js +1 -1
- package/dist/components/LabeledList.d.ts +1 -1
- package/dist/components/LabeledList.js +1 -1
- package/dist/components/MenuBar.js +1 -1
- package/dist/components/Modal.js +1 -1
- package/dist/components/NoticeBox.js +1 -1
- package/dist/components/NumberInput.d.ts +1 -1
- package/dist/components/NumberInput.js +1 -1
- package/dist/components/Popper.js +1 -1
- package/dist/components/ProgressBar.js +1 -1
- package/dist/components/RestrictedInput.js +1 -1
- package/dist/components/RoundGauge.js +1 -1
- package/dist/components/Section.js +1 -1
- package/dist/components/Slider.js +1 -1
- package/dist/components/Stack.js +1 -1
- package/dist/components/StyleableSection.js +1 -1
- package/dist/components/Table.js +1 -1
- package/dist/components/Tabs.js +1 -1
- package/dist/components/TextArea.js +1 -1
- package/dist/components/TimeDisplay.js +1 -1
- package/dist/components/Tooltip.js +1 -1
- package/dist/components/TrackOutsideClicks.js +1 -1
- package/dist/components/VirtualList.js +1 -1
- package/dist/components/index.js +1 -1
- package/package.json +15 -20
- package/styles/components/Button.scss +2 -1
- package/styles/components/Dropdown.scss +6 -0
- package/styles/components/Input.scss +1 -1
- package/styles/functions.scss +10 -0
- package/styles/reset.scss +1 -0
package/README.md
CHANGED
|
@@ -4,7 +4,14 @@ A collection of utilities and components for the [tgui](https://github.com/tgsta
|
|
|
4
4
|
|
|
5
5
|
This package was built to help the various downstream SS13 servers stay up to date with TGUI without having to keep a local version of each file.
|
|
6
6
|
|
|
7
|
+
## Testing / Demos
|
|
8
|
+
|
|
9
|
+
This project uses Storybook both for testing locally (via `bun storybook`) and our live demo site (https://tgstation.github.io/tgui-core/).
|
|
10
|
+
|
|
11
|
+
Storybook is a sandbox environment for UI components so you can test them in isolation without needing to boot the game.
|
|
12
|
+
|
|
7
13
|
## Links
|
|
14
|
+
|
|
8
15
|
- [GitHub](https://github.com/tgstation/tgui-core)
|
|
9
16
|
- [npm](https://www.npmjs.com/package/tgui-core)
|
|
10
17
|
- [Storybook](https://tgstation.github.io/tgui-core/?path=/docs/components-animatednumber--docs)
|
package/dist/common/events.js
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
let t;import
|
|
1
|
+
let t;import{KEY_ALT as e,KEY_CTRL as i,KEY_F1 as s,KEY_F12 as r,KEY_SHIFT as n}from"./keycodes.js";class o{listeners;constructor(){this.listeners={}}on(t,e){this.listeners[t]=this.listeners[t]||[],this.listeners[t].push(e)}off(t,e){let i=this.listeners[t];if(!i)throw Error(`There is no listeners for "${t}"`);this.listeners[t]=i.filter(t=>t!==e)}emit(t,...e){let i=this.listeners[t];if(i)for(let t=0,s=i.length;t<s;t+=1)(0,i[t])(...e)}clear(){this.listeners={}}}let l=new o,d=!1,u=(t={})=>{d=!!t.ignoreWindowFocus},h=!0;function c(e,i){if(d){h=!0;return}if(t&&(clearTimeout(t),t=null),i){t=setTimeout(()=>c(e));return}h!==e&&(h=e,l.emit(e?"window-focus":"window-blur"),l.emit("window-focus-change",e))}let a=null;function f(t){let e=String(t.tagName).toLowerCase();return"input"===e||"textarea"===e}function w(){a&&(a.removeEventListener("blur",w),a=null)}let y=null,m=null,p=[];function v(t){p.push(t)}function E(t){let e=p.indexOf(t);e>=0&&p.splice(e,1)}window.addEventListener("mousemove",t=>{let e=t.target;e!==m&&(m=e,function(t){if(a||!h)return;let e=document.body;for(;t&&t!==e;){if(p.includes(t)){if(t.contains(y))return;y=t,t.focus();return}t=t.parentElement}}(e))}),window.addEventListener("focusin",t=>{var e;m=null,y=t.target,c(!0),f(t.target)&&(e=t.target,w(),(a=e).addEventListener("blur",w))}),window.addEventListener("focusout",()=>{m=null,c(!1,!0)}),window.addEventListener("blur",()=>{m=null,c(!1,!0)}),window.addEventListener("beforeunload",()=>{c(!1)});let g={};class k{event;type;code;ctrl;shift;alt;repeat;_str;constructor(t,e,i){this.event=t,this.type=e,this.code=t.keyCode,this.ctrl=t.ctrlKey,this.shift=t.shiftKey,this.alt=t.altKey,this.repeat=!!i}hasModifierKeys(){return this.ctrl||this.alt||this.shift}isModifierKey(){return this.code===i||this.code===n||this.code===e}isDown(){return"keydown"===this.type}isUp(){return"keyup"===this.type}toString(){return this._str||(this._str="",this.ctrl&&(this._str+="Ctrl+"),this.alt&&(this._str+="Alt+"),this.shift&&(this._str+="Shift+"),this.code>=48&&this.code<=90?this._str+=String.fromCharCode(this.code):this.code>=s&&this.code<=r?this._str+=`F${this.code-111}`:this._str+=`[${this.code}]`),this._str}}document.addEventListener("keydown",t=>{if(f(t.target))return;let e=t.keyCode,i=new k(t,"keydown",g[e]);l.emit("keydown",i),l.emit("key",i),g[e]=!0}),document.addEventListener("keyup",t=>{if(f(t.target))return;let e=t.keyCode,i=new k(t,"keyup");l.emit("keyup",i),l.emit("key",i),g[e]=!1});export{o as EventEmitter,k as KeyEvent,v as addScrollableNode,f as canStealFocus,l as globalEvents,E as removeScrollableNode,u as setupGlobalEvents};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
import
|
|
1
|
+
import t from"@nozbe/microfuzz";import{useCallback as r,useState as e}from"react";function o(o){let{getSearchString:i,matchStrategy:m="smart",searchArray:u}=o,[n,f]=e(""),[a,c]=e([]),z=r(t(u,{getText:t=>[i(t)],strategy:m}),[u,i]);return{query:n,setQuery:function(t){if(f(t),""===t.trim())return void c([]);c(z(t).map(t=>t.item))},results:a}}export{o as useFuzzySearch};
|
package/dist/common/hotkeys.js
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
import
|
|
1
|
+
import{globalEvents as e}from"./events.js";import{KEY_CTRL as t,KEY_DOWN as n,KEY_ENTER as r,KEY_ESCAPE as o,KEY_F5 as i,KEY_LEFT as s,KEY_RIGHT as l,KEY_SHIFT as f,KEY_SPACE as u,KEY_TAB as a,KEY_UP as d}from"./keycodes.js";let c={},y=[o,r,u,a,t,f,d,n,s,l,i],m={},p=[];function h(e){y.push(e)}function b(e){let t=y.indexOf(e);t>=0&&y.splice(t,1)}function v(){for(let e in m)m[e]&&(m[e]=!1,Byond.command(K.verbParamsFn(K.keyUpVerb,e)))}let K={keyDownVerb:"KeyDown",keyUpVerb:"KeyUp",verbParamsFn:(e,t)=>`${e} "${t}"`};function w(t){t&&(K=t),Byond.winget("default.*").then(e=>{let t={};for(let n in e){let r=n.split("."),o=r[1],i=r[2];o&&i&&(t[o]||(t[o]={}),t[o][i]=e[n])}let n=/\\"/g;function r(e){return e.substring(1,e.length-1).replace(n,'"')}for(let e in t){let n=t[e];c[r(n.name)]=r(n.command)}}),e.on("window-blur",()=>{v()}),g()}function g(){e.on("key",F)}function k(){e.off("key",F)}function F(e){for(let t of p)t(e);!function(e){var t;let n=String(e);if("Ctrl+F5"===n||"Ctrl+R"===n)return location.reload();if("Ctrl+F"===n||e.event.defaultPrevented||e.isModifierKey()||y.includes(e.code))return;let r=16===(t=e.code)?"Shift":17===t?"Ctrl":18===t?"Alt":33===t?"Northeast":34===t?"Southeast":35===t?"Southwest":36===t?"Northwest":37===t?"West":38===t?"North":39===t?"East":40===t?"South":45===t?"Insert":46===t?"Delete":t>=48&&t<=57||t>=65&&t<=90?String.fromCharCode(t):t>=96&&t<=105?`Numpad${t-96}`:t>=112&&t<=123?`F${t-111}`:188===t?",":189===t?"-":190===t?".":void 0;if(!r)return;let o=c[r];if(o)return Byond.command(o);if(e.isDown()&&!m[r]){m[r]=!0;let e=K.verbParamsFn(K.keyDownVerb,r);return Byond.command(e)}if(e.isUp()&&m[r]){m[r]=!1;let e=K.verbParamsFn(K.keyUpVerb,r);Byond.command(e)}}(e)}function P(e){p.push(e);let t=!1;return()=>{t||(t=!0,p.splice(p.indexOf(e),1))}}export{h as acquireHotKey,P as listenForKeyEvents,v as releaseHeldKeys,b as releaseHotKey,w as setupHotKeys,g as startKeyPassthrough,k as stopKeyPassthrough};
|
package/dist/common/random.js
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
import
|
|
1
|
+
import{clamp as r}from"./math.js";function n(r,n){return Math.random()*(n-r)+r}function o(r,n){let o=Math.ceil(r);return Math.floor(Math.random()*(Math.floor(n)-o)+o)}function t(r){return r[Math.floor(Math.random()*r.length)]}function a(n){return Math.random()<=r(n,0,100)/100}export{o as randomInteger,n as randomNumber,t as randomPick,a as randomProb};
|
package/dist/common/ui.js
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
import
|
|
1
|
+
import{CSS_COLORS as t}from"./constants.js";import{classes as o}from"./react.js";let i=t=>"string"==typeof t?t.endsWith("px")?`${Number.parseFloat(t)/12}rem`:t:"number"==typeof t?`${t}rem`:void 0,e=t=>"string"==typeof t?i(t):"number"==typeof t?i(.5*t):void 0;function n(o){return"string"==typeof o&&t.includes(o)}let r=t=>(o,i)=>{("number"==typeof i||"string"==typeof i)&&(o[t]=i)},l=(t,o)=>(i,e)=>{("number"==typeof e||"string"==typeof e)&&(i[t]=o(e))},p=(t,o)=>(i,e)=>{e&&(i[t]=o)},g=(t,o,i)=>(e,n)=>{if("number"==typeof n||"string"==typeof n)for(let r=0;r<i.length;r++)e[t+i[r]]=o(n)},a=t=>(o,i)=>{n(i)||(o[t]=i)},f={align:r("textAlign"),backgroundColor:a("backgroundColor"),bottom:l("bottom",i),color:a("color"),fontFamily:r("fontFamily"),fontSize:l("fontSize",i),fontWeight:r("fontWeight"),g:l("gap",e),gc:l("columnGap",e),gr:l("rowGap",e),height:l("height",i),left:l("left",i),lineHeight:(t,o)=>{"number"==typeof o?t.lineHeight=o:"string"==typeof o&&(t.lineHeight=i(o))},m:g("margin",e,["Top","Bottom","Left","Right"]),maxHeight:l("maxHeight",i),maxWidth:l("maxWidth",i),mb:l("marginBottom",e),minHeight:l("minHeight",i),minWidth:l("minWidth",i),ml:l("marginLeft",e),mr:l("marginRight",e),mt:l("marginTop",e),mx:g("margin",e,["Left","Right"]),my:g("margin",e,["Top","Bottom"]),opacity:r("opacity"),overflow:r("overflow"),overflowX:r("overflowX"),overflowY:r("overflowY"),p:g("padding",e,["Top","Bottom","Left","Right"]),pb:l("paddingBottom",e),pl:l("paddingLeft",e),position:r("position"),pr:l("paddingRight",e),pt:l("paddingTop",e),px:g("padding",e,["Left","Right"]),py:g("padding",e,["Top","Bottom"]),right:l("right",i),textAlign:r("textAlign"),textColor:a("color"),top:l("top",i),verticalAlign:r("verticalAlign"),width:l("width",i)},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={},i={};for(let e in t){if("style"===e)continue;let n=t[e],r=f[e]||m[e];r?r(i,n):o[e]=n}return o.style={...i,...t.style},o}function h(t){let i=t.textColor||t.color,{backgroundColor:e}=t;return o([n(i)&&`color-${i}`,n(e)&&`color-bg-${e}`])}function c(t){let o={};if(!t)return o;for(let i of t.split(" ")){let[t,e]=i.split("-");if(t)if(t in f){if(""===e)continue;let i=Number(e);!Number.isNaN(i)&&Number.isFinite(i)?o[t]=i:o[t]=e}else t in m?o[t]=!0:console.warn(`Unknown prop ${t}`)}return o}export{m as booleanStyleMap,h as computeBoxClassName,s as computeBoxProps,c as computeTwClass,e as halfUnit,f as stringStyleMap,i as unit};
|
package/dist/common/vector.js
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
import
|
|
1
|
+
import{zip as e}from"./collections.js";function n(e,n){return e+n}function r(e,n){return e-n}function t(e,n){return e*n}function u(e,n){return e/n}function c(...r){return e(...r).map(e=>e.reduce(n))}function i(...n){return e(...n).map(e=>e.reduce(r))}function o(...n){return e(...n).map(e=>e.reduce(t))}function f(...n){return e(...n).map(e=>e.reduce(u))}function a(e,n){return e.map(e=>e*n)}function m(e){return e.map(e=>-e)}function p(e){return Math.sqrt(o(e,e).reduce(n))}function v(e){let n=p(e);return e.map(e=>e/n)}export{c as vecAdd,f as vecDivide,m as vecInverse,p as vecLength,o as vecMultiply,v as vecNormalize,a as vecScale,i as vecSubtract};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
import
|
|
1
|
+
import{jsx as t}from"react/jsx-runtime";import{clamp as e,isSafeNumber as r,toFixed as i}from"../common/math.js";import{Component as n,createRef as s}from"react";let a=1e3/60;class h extends n{ref=s();interval;currentValue=0;constructor(t){super(t);let{initial:e,value:i}=t;void 0!==e&&r(e)?this.currentValue=e:r(i)&&(this.currentValue=i)}componentDidMount(){this.currentValue!==this.props.value&&this.startTicking()}componentWillUnmount(){this.stopTicking()}shouldComponentUpdate(t){return t.value!==this.props.value&&this.startTicking(),!1}startTicking(){void 0===this.interval&&(this.interval=setInterval(()=>this.tick(),a))}stopTicking(){void 0!==this.interval&&(clearInterval(this.interval),this.interval=void 0)}tick(){let{currentValue:t}=this,{value:e}=this.props;r(e)?this.currentValue=.8333*t+.16669999999999996*e:this.stopTicking(),Math.abs(e-this.currentValue)<Math.max(.001,.001*e)&&(this.currentValue=e,this.stopTicking()),this.ref.current&&(this.ref.current.textContent=this.getText())}getText(){let{props:t,currentValue:n}=this,{format:s,value:a}=t;if(!r(a))return String(a);if(s)return s(this.currentValue);let h=String(a).split(".")[1];return i(n,e(h?h.length:0,0,8))}render(){return t("span",{ref:this.ref,children:this.getText()})}}export{h as AnimatedNumber};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
import
|
|
1
|
+
import{jsx as r}from"react/jsx-runtime";import{useEffect as t,useRef as e}from"react";function o(o){let{children:u}=o,n=e(null);return t(()=>{let r=setTimeout(()=>{n.current?.focus()},1);return()=>{clearTimeout(r)}},[]),r("div",{ref:n,tabIndex:-1,children:u})}export{o as Autofocus};
|
package/dist/components/Blink.js
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
import
|
|
1
|
+
import{jsx as e}from"react/jsx-runtime";import{useEffect as t,useState as r}from"react";function i(i){let{children:n,interval:l=1e3,time:o=1e3}=i,[s,a]=r(!1);return t(()=>{let e=setInterval(()=>{a(!0),setTimeout(()=>{a(!1)},o)},l+o);return()=>{clearInterval(e)}},[l,o]),e("span",{style:{visibility:s?"hidden":"visible"},children:n})}export{i as Blink};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
import
|
|
1
|
+
import{jsx as o}from"react/jsx-runtime";import{classes as r}from"../common/react.js";import{Box as t}from"./Box.js";function m(m){let{className:e,...c}=m;return o(t,{className:r(["BlockQuote",e]),...c})}export{m as BlockQuote};
|
package/dist/components/Box.d.ts
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
|
+
import type { BooleanLike } from '../common/react.ts';
|
|
2
|
+
import { type BooleanStyleMap, type StringStyleMap } from '../common/ui.ts';
|
|
1
3
|
import { type CSSProperties, type KeyboardEventHandler, type MouseEventHandler, type ReactNode, type UIEventHandler } from 'react';
|
|
2
|
-
import type { BooleanLike } from '../common/react';
|
|
3
|
-
import { type BooleanStyleMap, type StringStyleMap } from '../common/ui';
|
|
4
4
|
type EventHandlers<TElement = HTMLDivElement> = Partial<{
|
|
5
5
|
onClick: MouseEventHandler<TElement>;
|
|
6
6
|
onContextMenu: MouseEventHandler<TElement>;
|
package/dist/components/Box.js
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
import
|
|
1
|
+
import{computeBoxClassName as o,computeBoxProps as r,computeTwClass as m}from"../common/ui.js";import{createElement as t}from"react";function e(e){let{as:i="div",className:c,children:n,tw:a,...f}=e,p=c?`${c} ${o(f)}`:o(f);return t(i,{...r({...f,...m(a)}),className:p},n)}export{e as Box};
|
|
@@ -1,6 +1,6 @@
|
|
|
1
|
+
import { type BooleanLike } from '../common/react.ts';
|
|
1
2
|
import type { Placement } from '@floating-ui/react';
|
|
2
3
|
import { type ReactNode, type RefObject } from 'react';
|
|
3
|
-
import { type BooleanLike } from '../common/react';
|
|
4
4
|
import { type BoxProps } from './Box';
|
|
5
5
|
/**
|
|
6
6
|
* Getting ellipses to work requires that you use:
|
|
@@ -1 +1 @@
|
|
|
1
|
-
var t;import
|
|
1
|
+
var t;import{Fragment as n,jsx as e,jsxs as o}from"react/jsx-runtime";import{KEY as r,isEscape as i}from"../common/keys.js";import{classes as u}from"../common/react.js";import{computeBoxClassName as l,computeBoxProps as c}from"../common/ui.js";import{createRef as a,useEffect as s,useRef as f,useState as m}from"react";import{Box as p}from"./Box.js";import{Icon as d}from"./Icon.js";import{Tooltip as B}from"./Tooltip.js";function h(t){let{captureKeys:n=!0,children:a,circular:s,className:f,color:m,compact:p,content:h,disabled:y,ellipsis:k,fluid:g,icon:v,iconColor:x,iconPosition:C,iconRotation:b,iconSize:j,iconSpin:N,onClick:_,selected:w,tooltip:D,tooltipPosition:T,verticalAlignContent:A,...I}=t,$=h||a,q=e(d,{className:"Button--icon",color:x,name:v||"",rotation:b,size:j,spin:N}),E=e("div",{className:u(["Button",g&&"Button--fluid",y&&"Button--disabled",w&&"Button--selected",s&&"Button--circular",p&&"Button--compact",!$&&"Button--empty",C&&`Button--icon-${C}`,A&&"Button--flex",A&&g&&"Button--flex--fluid",A&&`Button--verticalAlignContent--${A}`,m&&"string"==typeof m?`Button--color--${m}`:"Button--color--default",f,l(I)]),onClick:t=>{!y&&_&&_(t)},onKeyDown:t=>{if(n){if(t.key===r.Space||t.key===r.Enter){t.preventDefault(),!y&&_&&_(t);return}i(t.key)&&t.preventDefault()}},tabIndex:y?void 0:0,...c(I),children:o("div",{className:u(["Button__content",k&&"Button__content--ellipsis"]),children:[v&&"right"!==C&&q,k?e("span",{className:"Button--ellipsis",children:$}):$,v&&"right"===C&&q]})});return D&&(E=e(B,{content:D,position:T,children:E})),E}(t=h||(h={})).Checkbox=function(t){let{checked:n,...o}=t;return e(h,{color:"transparent",icon:n?"check-square-o":"square-o",selected:n,...o})},t.Confirm=function(t){let{children:n,color:o,confirmColor:r="bad",confirmContent:i="Confirm?",confirmIcon:u,ellipsis:l=!0,icon:c,onBlur:a,onClick:s,...f}=t,[p,d]=m(!1);return e(h,{color:p?r:o,icon:p?u:c,onBlur:function(t){d(!1),a?.(t)},onClick:function(t){if(!p)return void d(!0);s?.(t),d(!1)},...f,children:p?i:n})},t.Input=function(t){let{buttonText:n,children:l,color:c="default",disabled:B,fluid:h,icon:y,iconRotation:k,iconSpin:g,maxLength:v,onCommit:x,ref:C,value:b="",...j}=t,[N,_]=m(b),[w,D]=m(!1),T=f(!1),A=a(),I=C??A;return s(()=>{w&&(I.current?.focus(),I.current?.select())},[w]),s(()=>{w||b===N||_(b)},[w,b]),o(p,{className:u(["Button",h&&"Button--fluid",B&&"Button--disabled",`Button--color--${c}`]),onClick:()=>D(!0),...j,children:[y&&e(d,{name:y,rotation:k,spin:g}),n??N,e("input",{className:"NumberInput__input",disabled:!!B,maxLength:v,onBlur:function(){T.current||b===N||(x?.(N),T.current=!1),D(!1)},onChange:function(t){_(t.currentTarget.value)},onKeyDown:function(t){if(t.key===r.Enter){t.preventDefault(),t.currentTarget.blur();return}if(i(t.key)){t.preventDefault(),T.current=!0,t.currentTarget.blur();return}},ref:I,spellCheck:"false",style:{display:w?"":"none",textAlign:"left"},type:"text",value:N})]})},t.File=function(t){let{accept:r,multiple:i,onSelectFiles:u,...l}=t,c=f(null);async function a(t){let n=Array.from(t).map(t=>{let n=new FileReader;return new Promise(e=>{n.onload=()=>e(n.result),n.readAsText(t)})});return await Promise.all(n)}async function s(t){let n=t.target.files;if(n?.length){let t=await a(n);u(i?t:t[0])}}return o(n,{children:[e(h,{onClick:()=>c.current?.click(),...l}),e("input",{accept:r,hidden:!0,multiple:i,onChange:s,ref:c,type:"file"})]})};export{h as Button};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
import
|
|
1
|
+
import{jsx as e}from"react/jsx-runtime";import{debounce as n}from"../common/timer.js";import{computeBoxProps as t}from"../common/ui.js";import{useEffect as o,useRef as r}from"react";let i=[];function d(d){let{params:s,phonehome:l,...u}=d,m=r(null),p=r(function(e,n=!0){let t=i.length;i.push(null);let o=e||`byondui_${t}`;return{render:e=>{n&&Byond.sendMessage("renderByondUi",{renderByondUi:o}),i[t]=o,Byond.winset(o,e)},unmount:()=>{n&&Byond.sendMessage("unmountByondUi",{renderByondUi:o}),i[t]=null,Byond.winset(o,{parent:""})}}}(s?.id,l));function f(){let e=m.current;if(!e)return;let n=function(e){let n=window.devicePixelRatio??1,t=e.getBoundingClientRect();return{pos:[t.left*n,t.top*n],size:[(t.right-t.left)*n,(t.bottom-t.top)*n]}}(e);p.current.render({parent:Byond.windowId,...s,pos:`${n.pos[0]},${n.pos[1]}`,size:`${n.size[0]}x${n.size[1]}`})}let c=n(()=>{f()},100);return o(()=>(window.addEventListener("resize",c),f(),()=>{window.removeEventListener("resize",c),p.current.unmount()}),[]),e("div",{ref:m,...t(u),children:e("div",{style:{minHeight:"22px"}})})}window.addEventListener("beforeunload",()=>{for(let e=0;e<i.length;e++){let n=i[e];"string"==typeof n&&(i[e]=null,Byond.winset(n,{parent:""}))}});export{d as ByondUi};
|
package/dist/components/Chart.js
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
import
|
|
1
|
+
import{jsx as e,jsxs as t}from"react/jsx-runtime";import{zip as n}from"../common/collections.js";import{useEffect as r,useRef as i,useState as o}from"react";import{Box as l}from"./Box.js";let s={bottom:0,left:0,overflow:"hidden",position:"absolute",right:0,top:0};function f(f){let{data:h=[],rangeX:m,rangeY:p,fillColor:a="none",strokeColor:c="#ffffff",strokeWidth:u=2,...d}=f,v=i(null),[g,w]=o([600,200]),x=function(e,t,r,i){if(0===e.length)return[];let o=n(...e),l=o.map(e=>Math.min(...e)),s=o.map(e=>Math.max(...e));return void 0!==r&&(l[0]=r[0],s[0]=r[1]),void 0!==i&&(l[1]=i[0],s[1]=i[1]),e.map(e=>n(e,l,s,t).map(([e,t,n,r])=>(e-t)/(n-t)*r))}(h,g,m,p);if(x.length>0){let e=x[0],t=x[x.length-1];x.push([g[0]+u,t[1]]),x.push([g[0]+u,-u]),x.push([-u,-u]),x.push([-u,e[1]])}let $=function(e){let t="";for(let n=0;n<e.length;n++){let r=e[n];t+=`${r[0]},${r[1]} `}return t}(x);function j(){let e=v.current;if(!e)return;let t=e.getBoundingClientRect();w([t.width,t.height])}return r(()=>(window.addEventListener("resize",j),j(),()=>{window.removeEventListener("resize",j)}),[]),e(l,{position:"relative",...d,children:e("div",{ref:v,style:s,children:t("svg",{preserveAspectRatio:"none",style:s,viewBox:`0 0 ${g[0]} ${g[1]}`,children:[e("title",{children:"chart"}),e("polyline",{fill:a,points:$,stroke:c,strokeWidth:u,transform:`scale(1, -1) translate(0, -${g[1]})`})]})})})}f.Line=f;export{f as Chart};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
import
|
|
1
|
+
import{jsx as l,jsxs as e}from"react/jsx-runtime";import{useState as r}from"react";import{Box as o}from"./Box.js";import{Button as c}from"./Button.js";function i(i){let{children:n,child_mt:t=1,childStyles:a,color:m,title:s,buttons:d,icon:h,...p}=i,[b,f]=r(i.open);return e(o,{mb:1,children:[e("div",{className:"Table",children:[l("div",{className:"Table__cell",children:l(c,{color:m,fluid:!0,icon:h||(b?"chevron-down":"chevron-right"),onClick:()=>f(!b),...p,children:s})}),d&&l("div",{className:"Table__cell Table__cell--collapsing",children:d})]}),b&&l(o,{mt:t,style:a,children:n})]})}export{i as Collapsible};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
import
|
|
1
|
+
import{jsx as o}from"react/jsx-runtime";import{classes as r}from"../common/react.js";import{computeBoxClassName as l,computeBoxProps as m}from"../common/ui.js";function t(t){let{content:c,children:e,className:n,...i}=t;return i.color=c?null:"default",i.backgroundColor=t.color||"default",o("div",{className:r(["ColorBox",n,l(i)]),...m(i),children:c||""})}export{t as ColorBox};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
import
|
|
1
|
+
import{jsx as t,jsxs as i}from"react/jsx-runtime";import{Box as o}from"./Box.js";import{Button as e}from"./Button.js";function l(l){let{title:n,onClose:r,children:a,width:c,height:s}=l;return t("div",{className:"Dialog",children:i(o,{className:"Dialog__content",height:s,width:c||"370px",children:[i("div",{className:"Dialog__header",children:[t("div",{className:"Dialog__title",children:n}),t(o,{mr:2,children:t(e,{color:"transparent",icon:"window-close-o",lineHeight:"22px",mr:"-3px",onClick:r,textAlign:"center",tooltip:"Close",tooltipPosition:"bottom-start",width:"26px"})})]}),a]})})}l.Button=function(i){let{onClick:o,children:l}=i;return t(e,{className:"Dialog__button",onClick:o,verticalAlignContent:"middle",children:l})};export{l as Dialog};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
import
|
|
1
|
+
import{jsx as r}from"react/jsx-runtime";import{classes as m}from"../common/react.js";import{Box as e}from"./Box.js";function i(i){let{className:o,children:t,...n}=i;return r(e,{className:m(["Dimmer",o]),...n,children:r("div",{className:"Dimmer__inner",children:t})})}export{i as Dimmer};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
import
|
|
1
|
+
import{jsx as i}from"react/jsx-runtime";import{classes as r}from"../common/react.js";function e(e){let{hidden:t,vertical:o}=e;return i("div",{className:r(["Divider",t&&"Divider--hidden",o?"Divider--vertical":"Divider--horizontal"])})}export{e as Divider};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
import
|
|
1
|
+
import{jsx as T}from"react/jsx-runtime";import{Image as r}from"./Image.js";var S,o=((S={})[S.NORTH=1]="NORTH",S[S.SOUTH=2]="SOUTH",S[S.EAST=4]="EAST",S[S.WEST=8]="WEST",S[S.NORTHEAST=5]="NORTHEAST",S[S.NORTHWEST=9]="NORTHWEST",S[S.SOUTHEAST=6]="SOUTHEAST",S[S.SOUTHWEST=10]="SOUTHWEST",S);function e(S){let{direction:o=2,fallback:e,frame:t=1,icon_state:E,icon:H,movement:O=!1,...i}=S,m=Byond.iconRefMap?.[H];return m?T(r,{fixErrors:!0,src:`${m}?state=${E}&dir=${o}&movement=${!!O}&frame=${t}`,...i}):e}export{o as Direction,e as DmIcon};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
import
|
|
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};
|
|
@@ -38,6 +38,8 @@ type Props = {
|
|
|
38
38
|
noChevron: boolean;
|
|
39
39
|
/** Dropdown renders over instead of below */
|
|
40
40
|
over: boolean;
|
|
41
|
+
/** Fill all available horizontal space */
|
|
42
|
+
fluid: boolean;
|
|
41
43
|
/** Text to show when nothing has been selected. */
|
|
42
44
|
placeholder: string;
|
|
43
45
|
/** @deprecated If you want to allow dropdown breaks layout, set width 100% */
|
|
@@ -1 +1 @@
|
|
|
1
|
-
import
|
|
1
|
+
import{Fragment as o,jsx as n,jsxs as e}from"react/jsx-runtime";import{KEY as t}from"../common/keys.js";import{classes as r}from"../common/react.js";import{unit as l}from"../common/ui.js";import{useRef as i,useState as c}from"react";import{Button as d}from"./Button.js";import{Floating as s}from"./Floating.js";import{Icon as a}from"./Icon.js";function m(o){return"string"==typeof o?o:o.value}function p(p){let{autoScroll:u=!0,buttons:_,className:w,color:f="default",disabled:h,displayText:D,icon:y,iconRotation:v,iconSpin:N,iconOnly:g,menuWidth:b,noChevron:x,onClick:j,onSelected:k,options:C=[],over:B,placeholder:I="Select...",selected:T,fluid:A,width:E=15}=p,[K,O]=c(!1),S=i(null),$=C.findIndex(o=>m(o)===T)||0;function F(o){let n=o;n=o<$?o<2?0:o-2:o>C.length-3?C.length-1:o-2;let e=S.current,t=e?.children[n];e&&t&&(e.scrollTop=t.offsetTop)}function M(o){let n;if(C.length<1||h)return;let e=C.length-1;n=$<0?"next"===o?e:0:"next"===o?$===e?0:$+1:0===$?e:$-1,K&&u&&F(n),k?.(m(C[n]))}let W=B?"top":"bottom";return g&&(W=`${W}-start`),e("div",{className:r(["Dropdown",A&&"Dropdown--fluid"]),children:[n(s,{allowedOutsideClasses:".Dropdown__button",closeAfterInteract:!0,content:n("div",{className:"Dropdown__menu",ref:S,children:0===C.length?n("div",{className:"Dropdown__menu--entry",children:"No options"}):C.map(o=>{let e=m(o);return n("div",{className:r(["Dropdown__menu--entry",T===e&&"selected"]),onClick:()=>{k?.(e)},onKeyDown:o=>{o.key===t.Enter&&k?.(e)},children:"string"==typeof o?o:o.displayText},e)})}),contentAutoWidth:!b,contentClasses:"Dropdown__menu--wrapper",contentStyles:{width:b?l(b):void 0},disabled:h,onMounted:()=>{K&&u&&-1!==$&&F($)},onOpenChange:O,placement:W,children:e("div",{className:r(["Dropdown__control",`Button--color--${f}`,h&&"Button--disabled",g&&"Dropdown__control--icon-only",w]),onClick:o=>{(!h||K)&&j?.(o)},onKeyDown:o=>{o.key!==t.Enter||h||j?.(o)},style:{width:l(E)},children:[y&&n(a,{className:"Dropdown__icon",name:y,rotation:v,spin:N}),!g&&e(o,{children:[n("span",{className:"Dropdown__selected-text",children:D||T&&m(T)||I}),!x&&n(a,{className:r(["Dropdown__icon","Dropdown__icon--arrow",B&&"over",K&&"open"]),name:"chevron-down"})]})]})}),_&&e(o,{children:[n(d,{className:"Dropdown__button",disabled:h,icon:"chevron-left",onClick:()=>{M("previous")}}),n(d,{className:"Dropdown__button",disabled:h,icon:"chevron-right",onClick:()=>{M("next")}})]})]})}export{p as Dropdown};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
import
|
|
1
|
+
import{jsx as e}from"react/jsx-runtime";import{Component as t,createRef as i}from"react";class s extends t{ref=i();state={fontSize:0};constructor(e){super(e),this.resize=this.resize.bind(this),window.addEventListener("resize",this.resize)}componentDidUpdate(e){e.children!==this.props.children&&this.resize()}componentWillUnmount(){window.removeEventListener("resize",this.resize)}resize(){let e=this.ref.current;if(!e)return;let t=this.props.maxWidth,i=0,s=this.props.maxFontSize;for(let r=0;r<10;r++){let r=Math.round((i+s)/2);e.style.fontSize=`${r}px`;let n=e.offsetWidth-t;if(n>0)s=r;else if(n<(this.props.acceptableDifference??5))i=r;else break}this.setState({fontSize:Math.round((i+s)/2)})}componentDidMount(){this.resize()}render(){return e("span",{ref:this.ref,style:{fontSize:`${this.state.fontSize}px`,..."object"==typeof this.props.native?.style?this.props.native.style:{}},children:this.props.children})}}export{s as FitText};
|
package/dist/components/Flex.js
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
import
|
|
1
|
+
import{jsx as e}from"react/jsx-runtime";import{classes as t}from"../common/react.js";import{computeBoxClassName as l,computeBoxProps as r,unit as o}from"../common/ui.js";function i(e){return t(["Flex",e.inlineFlex&&"Flex--inline",l(e)])}function n(e){let{direction:t,wrap:l,align:o,justify:i,...n}=e;return r({style:{...n.style,alignItems:o,flexDirection:t,flexWrap:!0===l?"wrap":l,justifyContent:i},...n})}function m(l){let{className:r,...o}=l;return e("div",{className:t([r,i(o)]),...n(o)})}let s=e=>t(["Flex__item",l(e)]);function u(e){let{style:t,grow:l,order:i,shrink:n,basis:m,align:s,...u}=e,c=m??e.width??(void 0!==l?0:void 0);return r({style:{...t,alignSelf:s,flexBasis:o(c),flexGrow:void 0!==l&&Number(l),flexShrink:void 0!==n&&Number(n),order:i},...u})}m.Item=function(l){let{className:r,...o}=l;return e("div",{className:t([r,s(l)]),...u(o)})};export{m as Flex,i as computeFlexClassName,s as computeFlexItemClassName,u as computeFlexItemProps,n as computeFlexProps};
|
|
@@ -1,6 +1,6 @@
|
|
|
1
|
+
import { type BooleanLike } from '../common/react.ts';
|
|
1
2
|
import { type Placement } from '@floating-ui/react';
|
|
2
3
|
import { type CSSProperties, type ReactNode } from 'react';
|
|
3
|
-
import { type BooleanLike } from '../common/react';
|
|
4
4
|
type Props = {
|
|
5
5
|
/** Interacting with this element will open the floating element. */
|
|
6
6
|
children: ReactNode;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
import
|
|
1
|
+
import{Fragment as e,jsx as t,jsxs as n}from"react/jsx-runtime";import{classes as o}from"../common/react.js";import{FloatingPortal as i,autoUpdate as r,flip as a,offset as l,shift as s,size as c,useClick as d,useDismiss as m,useFloating as p,useHover as g,useInteractions as f,useTransitionStatus as h}from"@floating-ui/react";import{cloneElement as u,isValidElement as C,useEffect as v,useState as w}from"react";function F(F){let b,{allowedOutsideClasses:x,animationDuration:y,children:O,closeAfterInteract:R,content:j,contentAutoWidth:k,contentClasses:z,contentOffset:E=6,contentStyles:M,disabled:P,hoverDelay:S,hoverOpen:N,handleOpen:$,onMounted:q,placement:A,preventPortal:B,stopChildPropagation:D,onOpenChange:G}=F,[H,I]=w(!1),{refs:J,floatingStyles:K,context:L}=p({middleware:[l(E),a({padding:6}),s(),k&&c({apply({rects:e,elements:t}){t.floating.style.width=`${e.reference.width}px`}})],onOpenChange(e){I(e),G?.(e)},open:H,placement:A||"bottom",transform:!1,whileElementsMounted:(e,t,n)=>(void 0!==q&&q(),r(e,t,n,{ancestorResize:!1,ancestorScroll:!1,elementResize:!k}))}),{isMounted:Q,status:T}=h(L,{duration:y||200}),U=m(L,{ancestorScroll:!0,outsidePress:e=>!x||e.target instanceof Element&&!e.target.closest(x)}),V=d(L,{enabled:!P}),W=g(L,{enabled:!P,restMs:S||200}),X=void 0!==$,{getReferenceProps:Y,getFloatingProps:Z}=f(X?[]:[U,N?W:V]),_=Y({ref:J.setReference,...D&&{onClick:e=>e.stopPropagation()}}),ee=Z({onClick:()=>{R&&L.onOpenChange(!1)},ref:J.setFloating});v(()=>{X&&L.onOpenChange($)},[$]),b=C(O)?u(O,_):t("div",{..._,children:O});let et=t("div",{className:o(["Floating",!y&&"Floating--animated",z]),"data-position":L.placement,"data-transition":T,style:{...K,...M},...ee,children:j});return n(e,{children:[b,Q&&!!j&&(B?et:t(i,{id:"tgui-root",children:et}))]})}export{F as Floating};
|
package/dist/components/Icon.js
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
import
|
|
1
|
+
import{jsx as t}from"react/jsx-runtime";import{classes as e}from"../common/react.js";import{computeBoxClassName as o,computeBoxProps as r}from"../common/ui.js";let a=/-o$/;function s(s){let{name:n="",size:c,spin:i,className:m,rotation:f,...l}=s,p=l.style||{};c&&(p.fontSize=`${100*c}%`),f&&(p.transform=`rotate(${f}deg)`),l.style=p;let u=r(l),I="";if(n.startsWith("tg-"))I=n;else{let t=a.test(n),e=n.replace(a,""),o=!e.startsWith("fa-");I=t?"far ":"fas ",o&&(I+="fa-"),I+=e,i&&(I+=" fa-spin")}return t("i",{className:e(["Icon",I,m,o(l)]),...u})}(s||(s={})).Stack=function(a){let{className:s,children:n,...c}=a;return t("span",{className:e(["IconStack",s,o(c)]),...r(c),children:n})};export{s as Icon};
|
|
@@ -9,6 +9,12 @@ type Props = Partial<{
|
|
|
9
9
|
fixErrors: boolean;
|
|
10
10
|
/** Fill is default. */
|
|
11
11
|
objectFit: 'contain' | 'cover';
|
|
12
|
+
/**
|
|
13
|
+
* The image source.
|
|
14
|
+
*
|
|
15
|
+
* Use transparent base64 pixel if there is no src so we don't get a broken
|
|
16
|
+
* image icon when using assets.
|
|
17
|
+
*/
|
|
12
18
|
src: string;
|
|
13
19
|
}> & BoxProps;
|
|
14
20
|
/**
|
|
@@ -16,7 +22,7 @@ type Props = Partial<{
|
|
|
16
22
|
*
|
|
17
23
|
* A wrapper for the `<img>` element.
|
|
18
24
|
*
|
|
19
|
-
*
|
|
25
|
+
* It can attempt to fix broken images by fetching them again with `fixErrors`.
|
|
20
26
|
*
|
|
21
27
|
* It will also try to fix blurry images by rendering them pixelated.
|
|
22
28
|
*/
|
package/dist/components/Image.js
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
import
|
|
1
|
+
import{jsx as r}from"react/jsx-runtime";import{computeBoxProps as e}from"../common/ui.js";import{useEffect as t,useRef as A}from"react";function n(n){let{fixBlur:u=!0,fixErrors:c,objectFit:i="fill",src:m="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVR42mNkYAAAAAYAAjCB0C8AAAAASUVORK5CYII=",...o}=n,a=A(0),l=A(null),g=e(o);return g.style={...g.style,imageRendering:u?"pixelated":"auto",objectFit:i},t(()=>()=>{l.current&&clearTimeout(l.current)},[]),r("img",{alt:"dm icon",onError:function(r){if(!c||a.current>=5){l.current&&clearTimeout(l.current);return}let e=r.currentTarget;l.current=setTimeout(()=>{e.src=`${m}?attempt=${a.current}`,a.current++},1e3)},src:m,...g})}export{n as Image};
|
|
@@ -3,9 +3,9 @@
|
|
|
3
3
|
* @copyright 2024 Aylong (https://github.com/AyIong)
|
|
4
4
|
* @license MIT
|
|
5
5
|
*/
|
|
6
|
+
import { type BooleanLike } from '../common/react.ts';
|
|
6
7
|
import type { Placement } from '@floating-ui/react';
|
|
7
8
|
import type { ReactNode } from 'react';
|
|
8
|
-
import { type BooleanLike } from '../common/react';
|
|
9
9
|
import type { BoxProps } from './Box';
|
|
10
10
|
import { type Direction } from './DmIcon';
|
|
11
11
|
type Props = Partial<{
|
|
@@ -1 +1 @@
|
|
|
1
|
-
import
|
|
1
|
+
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};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
import
|
|
1
|
+
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
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
import
|
|
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:function(e){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};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
import
|
|
1
|
+
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};
|
|
@@ -1,5 +1,5 @@
|
|
|
1
|
+
import { type BooleanLike } from '../common/react.ts';
|
|
1
2
|
import type { Placement } from '@floating-ui/react';
|
|
2
|
-
import { type BooleanLike } from '../common/react';
|
|
3
3
|
import type { BoxProps } from './Box';
|
|
4
4
|
type Props = {
|
|
5
5
|
/** Value itself, controls the position of the cursor. */
|
package/dist/components/Knob.js
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
import
|
|
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};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
import
|
|
1
|
+
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};
|
|
@@ -1,6 +1,6 @@
|
|
|
1
|
+
import { type BooleanLike } from '../common/react.ts';
|
|
1
2
|
import type { Placement } from '@floating-ui/react';
|
|
2
3
|
import type { PropsWithChildren, ReactNode } from 'react';
|
|
3
|
-
import { type BooleanLike } from '../common/react';
|
|
4
4
|
export declare function LabeledList(props: PropsWithChildren): import("react/jsx-runtime").JSX.Element;
|
|
5
5
|
type LabeledListItemProps = Partial<{
|
|
6
6
|
/** Buttons to render aside the content. */
|
|
@@ -1 +1 @@
|
|
|
1
|
-
var e;import
|
|
1
|
+
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};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
import
|
|
1
|
+
import{jsx as e,jsxs as n}from"react/jsx-runtime";import{classes as r}from"../common/react.js";import{useRef as a}from"react";import{Box as t}from"./Box.js";import{Floating as o}from"./Floating.js";import{Icon as u}from"./Icon.js";function l(n){let{children:u,className:l,disabled:i,display:c,onClick:s,onMouseOver:m,open:_,openWidth:M,onOutsideClick:d,...B}=n,h=a(null);return e(o,{allowedOutsideClasses:".Menubar_inner",content:e("div",{className:"MenuBar__menu",style:{width:M},children:u}),children:e("div",{className:"Menubar_inner",ref:h,children:e(t,{className:r(["MenuBar__MenuBarButton","MenuBar__font","MenuBar__hover",l]),...B,onClick:i?()=>null:s,onMouseOver:m,children:e("span",{className:"MenuBar__MenuBarButton-text",children:c})})})})}function i(n){let{entry:r,children:a,openWidth:t,display:o,setOpenMenuBar:u,openMenuBar:i,setOpenOnHover:c,openOnHover:s,disabled:m,className:_}=n;return e(l,{className:_,disabled:m,display:o,onClick:()=>{u(i===r?null:r),c(!s)},onMouseOver:()=>{s&&u(r)},onOutsideClick:()=>{u(null),c(!1)},open:i===r,openWidth:t,children:a})}function c(n){let{children:r}=n;return e(t,{className:"MenuBar",children:r})}c.Dropdown=i,i.MenuItemToggle=function(a){let{value:o,displayText:l,onClick:i,checked:c}=a;return n(t,{className:r(["MenuBar__font","MenuBar__MenuItem","MenuBar__MenuItemToggle","MenuBar__hover"]),onClick:()=>i(o),children:[e("div",{className:"MenuBar__MenuItemToggle__check",children:e(u,{name:c?"check":"",size:1.3})}),l]})},i.MenuItem=function(n){let{value:a,displayText:o,onClick:u}=n;return e(t,{className:r(["MenuBar__font","MenuBar__MenuItem","MenuBar__hover"]),onClick:()=>u?.(a),children:o})},i.Separator=function(){return e("div",{className:"MenuBar__Separator"})};export{c as MenuBar};
|
package/dist/components/Modal.js
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
import
|
|
1
|
+
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};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
import
|
|
1
|
+
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};
|
|
@@ -1,5 +1,5 @@
|
|
|
1
|
+
import { type BooleanLike } from '../common/react.ts';
|
|
1
2
|
import { Component, type FocusEventHandler, type KeyboardEventHandler, type MouseEventHandler } from 'react';
|
|
2
|
-
import { type BooleanLike } from '../common/react';
|
|
3
3
|
import { type BoxProps } from './Box';
|
|
4
4
|
type Props = Required<{
|
|
5
5
|
/** Highest possible value. */
|
|
@@ -1 +1 @@
|
|
|
1
|
-
import
|
|
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};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
import
|
|
1
|
+
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};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
import
|
|
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};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
import
|
|
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 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};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
import
|
|
1
|
+
import{jsx as e,jsxs as r}from"react/jsx-runtime";import{clamp01 as a,keyOfMatchingRange as o,scale as t}from"../common/math.js";import{classes as n}from"../common/react.js";import{computeBoxClassName as l,computeBoxProps as c}from"../common/ui.js";import{AnimatedNumber as i}from"./AnimatedNumber.js";function m(m){let{alertAfter:s,alertBefore:u,className:d,format:g,maxValue:C=1,minValue:_=1,ranges:f,size:h=1,style:p,value:G,...R}=m,N=a(t(G,_,C)),y=f?{}:{primary:[0,1]};if(f)for(let e in f){let r=f[e];y[e]=[t(r[0],_,C),t(r[1],_,C)]}let x=(!!s&&!!u&&!!(G>s)&&!!(G<u)||!!s&&!!(G>s)||!!u&&!!(G<u))&&o(N,y);return r("div",{className:"RoundGauge__wrapper",children:[e("div",{className:n(["RoundGauge",d,l(R)]),...c({style:{fontSize:`${h}em`,...p},...R}),children:r("svg",{viewBox:"0 0 100 50",children:[(s||u)&&e("g",{className:n(["RoundGauge__alert",x?`active RoundGauge__alert--${x}`:""]),children:e("path",{d:"M48.211,14.578C48.55,13.9 49.242,13.472 50,13.472C50.758,13.472 51.45,13.9 51.789,14.578C54.793,20.587 60.795,32.589 63.553,38.106C63.863,38.726 63.83,39.462 63.465,40.051C63.101,40.641 62.457,41 61.764,41C55.996,41 44.004,41 38.236,41C37.543,41 36.899,40.641 36.535,40.051C36.17,39.462 36.137,38.726 36.447,38.106C39.205,32.589 45.207,20.587 48.211,14.578ZM50,34.417C51.426,34.417 52.583,35.574 52.583,37C52.583,38.426 51.426,39.583 50,39.583C48.574,39.583 47.417,38.426 47.417,37C47.417,35.574 48.574,34.417 50,34.417ZM50,32.75C50,32.75 53,31.805 53,22.25C53,20.594 51.656,19.25 50,19.25C48.344,19.25 47,20.594 47,22.25C47,31.805 50,32.75 50,32.75Z"})}),e("g",{children:e("circle",{className:"RoundGauge__ringTrack",cx:"50",cy:"50",r:"45"})}),e("g",{children:Object.keys(y).map((r,a)=>{let o=y[r];return e("circle",{className:`RoundGauge__ringFill RoundGauge--color--${r}`,cx:"50",cy:"50",r:"45",style:{strokeDashoffset:Math.max((2-(o[1]-o[0]))*Math.PI*50,0)},transform:`rotate(${180+180*o[0]} 50 50)`},a)})}),r("g",{className:"RoundGauge__needle",transform:`rotate(${180*N-90} 50 50)`,children:[e("polygon",{className:"RoundGauge__needleLine",points:"46,50 50,0 54,50"}),e("circle",{className:"RoundGauge__needleMiddle",cx:"50",cy:"50",r:"8"})]}),e("title",{children:"alert"})]})}),e(i,{format:g,value:G})]})}export{m as RoundGauge};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
import
|
|
1
|
+
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};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
import
|
|
1
|
+
import{jsx as r,jsxs as e}from"react/jsx-runtime";import{clamp01 as s,keyOfMatchingRange as i,scale as o}from"../common/math.js";import{classes as l}from"../common/react.js";import{computeBoxClassName as a,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:u,onDrag:p,step:h,stepPixelSize:g,unit:v,value:N,className:B,fillValue:P,color:S,ranges:j={},children:w,...y}=d,$=void 0!==w;return r(m,{dragMatrix:[1,0],animated:c,format:n,maxValue:_,minValue:f,onChange:u,onDrag:p,step:h,stepPixelSize:g,unit:v,value:N,children:m=>{let{displayElement:d,displayValue:c,dragging:n,handleDragStart:u,inputElement:p}=m,h=null!=P,g=o(P??c,f,_),v=o(c,f,_),x=S||i(P??N,j)||"default";return e("div",{className:l(["Slider","ProgressBar",`ProgressBar--color--${x}`,B,a(y)]),...t(y),onMouseDown:u,children:[r("div",{className:l(["ProgressBar__fill",h&&"ProgressBar__fill--animated"]),style:{opacity:.4,width:`${100*s(g)}%`}}),r("div",{className:"ProgressBar__fill",style:{width:`${100*s(Math.min(g,v))}%`}}),e("div",{className:"Slider__cursorOffset",style:{width:`${100*s(v)}%`},children:[r("div",{className:"Slider__cursor"}),r("div",{className:"Slider__pointer"}),n&&r("div",{className:"Slider__popupValue",children:d})]}),r("div",{className:"ProgressBar__content",children:$?w:d}),p]})}})}export{d as Slider};
|
package/dist/components/Stack.js
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
import
|
|
1
|
+
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};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
import
|
|
1
|
+
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
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
var e;import
|
|
1
|
+
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
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
import
|
|
1
|
+
import{jsx as a,jsxs as e}from"react/jsx-runtime";import{canRender as i,classes as s}from"../common/react.js";import{computeBoxClassName as r,computeBoxProps as c}from"../common/ui.js";import{Icon as l}from"./Icon.js";function t(e){let{className:i,vertical:l,fill:t,fluid:n,children:o,...m}=e;return a("div",{className:s(["Tabs",l?"Tabs--vertical":"Tabs--horizontal",t&&"Tabs--fill",n&&"Tabs--fluid",i,r(m)]),...c(m),children:o})}(t||(t={})).Tab=function(t){let{className:n,selected:o,color:m,icon:b,iconSpin:T,leftSlot:d,rightSlot:f,children:_,onClick:h,...u}=t;return e("div",{className:s(["Tab","Tabs__Tab",`Tab--color--${m}`,o&&"Tab--selected",n,r(u)]),onClick:function(a){h&&h(a)},...c(u),children:[i(d)&&a("div",{className:"Tab__left",children:d})||!!b&&a("div",{className:"Tab__left",children:a(l,{name:b,spin:T})}),a("div",{className:"Tab__text",children:_}),i(f)&&a("div",{className:"Tab__right",children:f})]})};export{t as Tabs};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
import
|
|
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};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
import
|
|
1
|
+
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};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
import
|
|
1
|
+
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};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
import
|
|
1
|
+
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};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
import
|
|
1
|
+
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
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
import
|
|
1
|
+
import{AnimatedNumber as o}from"./AnimatedNumber.js";import{Autofocus as r}from"./Autofocus.js";import{Blink as m}from"./Blink.js";import{BlockQuote as t}from"./BlockQuote.js";import{Box as i}from"./Box.js";import{Button as e}from"./Button.js";import{ByondUi as s}from"./ByondUi.js";import{Chart as p}from"./Chart.js";import{Collapsible as f}from"./Collapsible.js";import{ColorBox as a}from"./ColorBox.js";import{Dialog as l}from"./Dialog.js";import{Dimmer as j}from"./Dimmer.js";import{Divider as n}from"./Divider.js";import{DmIcon as u}from"./DmIcon.js";import{DraggableControl as c}from"./DraggableControl.js";import{Dropdown as d}from"./Dropdown.js";import{FitText as b}from"./FitText.js";import{Flex as B}from"./Flex.js";import{Floating as g}from"./Floating.js";import{Icon as I}from"./Icon.js";import{Image as D}from"./Image.js";import{ImageButton as T}from"./ImageButton.js";import{InfinitePlane as x}from"./InfinitePlane.js";import{Input as C}from"./Input.js";import{KeyListener as k}from"./KeyListener.js";import{Knob as L}from"./Knob.js";import{LabeledControls as S}from"./LabeledControls.js";import{LabeledList as y}from"./LabeledList.js";import{MenuBar as A}from"./MenuBar.js";import{Modal as F}from"./Modal.js";import{NoticeBox as N}from"./NoticeBox.js";import{NumberInput as P}from"./NumberInput.js";import{Popper as K}from"./Popper.js";import{ProgressBar as M}from"./ProgressBar.js";import{RestrictedInput as R}from"./RestrictedInput.js";import{RoundGauge as h}from"./RoundGauge.js";import{Section as v}from"./Section.js";import{Slider as w}from"./Slider.js";import{Stack as G}from"./Stack.js";import{StyleableSection as O}from"./StyleableSection.js";import{Table as Q}from"./Table.js";import{Tabs as U}from"./Tabs.js";import{TextArea as V}from"./TextArea.js";import{TimeDisplay as q}from"./TimeDisplay.js";import{Tooltip as z}from"./Tooltip.js";import{TrackOutsideClicks as E}from"./TrackOutsideClicks.js";import{VirtualList as H}from"./VirtualList.js";export{o as AnimatedNumber,r as Autofocus,m as Blink,t as BlockQuote,i as Box,e as Button,s as ByondUi,p as Chart,f as Collapsible,a as ColorBox,l as Dialog,j as Dimmer,n as Divider,u as DmIcon,c as DraggableControl,d as Dropdown,b as FitText,B as Flex,g as Floating,I as Icon,D as Image,T as ImageButton,x as InfinitePlane,C as Input,k as KeyListener,L as Knob,S as LabeledControls,y as LabeledList,A as MenuBar,F as Modal,N as NoticeBox,P as NumberInput,K as Popper,M as ProgressBar,R as RestrictedInput,h as RoundGauge,v as Section,w as Slider,G as Stack,O as StyleableSection,Q as Table,U as Tabs,V as TextArea,q as TimeDisplay,z as Tooltip,E as TrackOutsideClicks,H as VirtualList};
|
package/package.json
CHANGED
|
@@ -1,30 +1,25 @@
|
|
|
1
1
|
{
|
|
2
2
|
"author": "jlsnow301",
|
|
3
3
|
"dependencies": {
|
|
4
|
-
"@floating-ui/react": "^0.27.
|
|
4
|
+
"@floating-ui/react": "^0.27.12",
|
|
5
5
|
"@nozbe/microfuzz": "^1.0.0"
|
|
6
6
|
},
|
|
7
7
|
"description": "TGUI core component library",
|
|
8
8
|
"devDependencies": {
|
|
9
|
-
"@biomejs/biome": "^2.0.0-beta.
|
|
10
|
-
"@rsbuild/core": "^1.3.
|
|
11
|
-
"@rsbuild/plugin-react": "^1.3.
|
|
12
|
-
"@rsbuild/plugin-sass": "^1.3.
|
|
13
|
-
"@rslib/core": "^0.
|
|
14
|
-
"@storybook/addon-
|
|
15
|
-
"@
|
|
16
|
-
"@
|
|
17
|
-
"@
|
|
18
|
-
"@storybook/test": "^8.6.14",
|
|
19
|
-
"@storybook/theming": "^8.6.14",
|
|
20
|
-
"@types/bun": "^1.2.13",
|
|
21
|
-
"@types/react": "^19.1.4",
|
|
22
|
-
"@types/react-dom": "^19.1.5",
|
|
9
|
+
"@biomejs/biome": "^2.0.0-beta.6",
|
|
10
|
+
"@rsbuild/core": "^1.3.22",
|
|
11
|
+
"@rsbuild/plugin-react": "^1.3.2",
|
|
12
|
+
"@rsbuild/plugin-sass": "^1.3.2",
|
|
13
|
+
"@rslib/core": "^0.9.2",
|
|
14
|
+
"@storybook/addon-docs": "^9.0.6",
|
|
15
|
+
"@types/bun": "^1.2.15",
|
|
16
|
+
"@types/react": "^19.1.7",
|
|
17
|
+
"@types/react-dom": "^19.1.6",
|
|
23
18
|
"prettier": "^3.5.3",
|
|
24
|
-
"sass": "^1.89.
|
|
25
|
-
"storybook": "^
|
|
19
|
+
"sass": "^1.89.2",
|
|
20
|
+
"storybook": "^9.0.6",
|
|
26
21
|
"storybook-addon-sass-postcss": "^0.3.2",
|
|
27
|
-
"storybook-react-rsbuild": "^
|
|
22
|
+
"storybook-react-rsbuild": "^2.0.1",
|
|
28
23
|
"typescript": "^5.8.3"
|
|
29
24
|
},
|
|
30
25
|
"exports": {
|
|
@@ -55,7 +50,7 @@
|
|
|
55
50
|
],
|
|
56
51
|
"license": "MIT",
|
|
57
52
|
"name": "tgui-core",
|
|
58
|
-
"packageManager": "bun@1.2.
|
|
53
|
+
"packageManager": "bun@1.2.15",
|
|
59
54
|
"peerDependencies": {
|
|
60
55
|
"react": "^19.1.0",
|
|
61
56
|
"react-dom": "^19.1.0"
|
|
@@ -73,5 +68,5 @@
|
|
|
73
68
|
"test": "bun test"
|
|
74
69
|
},
|
|
75
70
|
"type": "module",
|
|
76
|
-
"version": "4.0.
|
|
71
|
+
"version": "4.0.4"
|
|
77
72
|
}
|
|
@@ -143,6 +143,7 @@ $border-radius: 0 !default;
|
|
|
143
143
|
|
|
144
144
|
/* Do not move it down, cause it will override selected by specificity */
|
|
145
145
|
.Button--color--transparent {
|
|
146
|
+
cursor: var(--cursor-pointer);
|
|
146
147
|
color: var(--button-color-transparent);
|
|
147
148
|
|
|
148
149
|
&:not(.Button--disabled) {
|
|
@@ -180,7 +181,7 @@ $border-radius: 0 !default;
|
|
|
180
181
|
}
|
|
181
182
|
|
|
182
183
|
.Button--disabled {
|
|
183
|
-
cursor: var(--cursor-disabled);
|
|
184
|
+
cursor: var(--cursor-disabled) !important;
|
|
184
185
|
opacity: 0.5;
|
|
185
186
|
}
|
|
186
187
|
|
|
@@ -18,6 +18,11 @@
|
|
|
18
18
|
align-content: center;
|
|
19
19
|
}
|
|
20
20
|
|
|
21
|
+
&--fluid {
|
|
22
|
+
flex: 1;
|
|
23
|
+
width: 100%;
|
|
24
|
+
}
|
|
25
|
+
|
|
21
26
|
&__control {
|
|
22
27
|
display: flex;
|
|
23
28
|
overflow: hidden;
|
|
@@ -33,6 +38,7 @@
|
|
|
33
38
|
flex: 1;
|
|
34
39
|
display: inline-block;
|
|
35
40
|
align-content: center;
|
|
41
|
+
overflow: hidden;
|
|
36
42
|
text-overflow: ellipsis;
|
|
37
43
|
white-space: nowrap;
|
|
38
44
|
height: 100%;
|
package/styles/functions.scss
CHANGED
|
@@ -11,3 +11,13 @@
|
|
|
11
11
|
}
|
|
12
12
|
@return math.div($value, $value * 0 + 1);
|
|
13
13
|
}
|
|
14
|
+
|
|
15
|
+
// Increases perceptual color lightness.
|
|
16
|
+
@function lighten($color, $amount) {
|
|
17
|
+
@return color.adjust($color, $lightness: $amount * 1%, $space: hsl);
|
|
18
|
+
}
|
|
19
|
+
|
|
20
|
+
// Decreases perceptual color lightness.
|
|
21
|
+
@function darken($color, $amount) {
|
|
22
|
+
@return color.adjust($color, $lightness: -$amount * 1%, $space: hsl);
|
|
23
|
+
}
|