tgui-core 5.3.0 → 5.3.2

package/dist/common/ui.d.ts

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

package/dist/common/ui.js

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

package/dist/components/Tabs.js

@@ -1 +1 @@
-import{Fragment as e,jsx as r,jsxs as t}from"react/jsx-runtime";import{canRender as l,classes as n}from"../common/react.js";import{computeBoxClassName as i,computeBoxProps as o}from"../common/ui.js";import{useEffect as a,useRef as c,useState as s}from"react";import{Button as d}from"./Button.js";import{Icon as m}from"./Icon.js";function b(l){let{className:d,vertical:m,scrollable:b,fill:u,fluid:h,children:T,...v}=l,_=c(!0),p=c(null),[L,N]=s(!1),[w,E]=s(!1);function j(e){if(!p.current)return;let r=p.current,t=.5*r.clientWidth;r.scrollBy({left:"left"===e?-t:t,behavior:"smooth"})}a(()=>{if(!b||m||!p.current)return;let e=p.current;if(e.scrollWidth<e.clientWidth)return;function r(){N(e.scrollLeft>0),E(e.scrollLeft+e.clientWidth<e.scrollWidth)}function t(r){Math.abs(r.deltaY)>Math.abs(r.deltaX)&&(e.scrollLeft+=r.deltaY)}let l=e.querySelector(".Tab--selected");if(l)return l.scrollIntoView({behavior:_.current?"auto":"smooth",inline:"center"}),_.current=!1,e.addEventListener("wheel",t),e.addEventListener("scroll",r),window.addEventListener("resize",r),r(),()=>{e.removeEventListener("wheel",t),e.removeEventListener("scroll",r),window.removeEventListener("resize",r)}},[b,m,T]);let W=T;return b&&!m&&(W=t(e,{children:[L&&r(f,{direction:"left",makeScroll:j}),r("div",{ref:p,className:n(["Tabs--scrollable-content",L&&"scrollable-left",w&&"scrollable-right"]),children:T}),w&&r(f,{direction:"right",makeScroll:j})]})),r("div",{className:n(["Tabs",m?"Tabs--vertical":"Tabs--horizontal",u&&"Tabs--fill",h&&"Tabs--fluid",!m&&b&&"Tabs--scrollable",d,i(v)]),...o(v),children:W})}function f(e){let{direction:t,makeScroll:l}=e;return r(d,{className:`scroll-${t}`,color:"transparent",icon:`angle-${t}`,onClick:()=>l(t)})}(b||(b={})).Tab=function(e){let{className:a,selected:c,color:s,icon:d,iconSpin:b,leftSlot:f,rightSlot:u,children:h,onClick:T,...v}=e;return t("div",{className:n(["Tab","Tabs__Tab",`Tab--color--${s}`,c&&"Tab--selected",a,i(v)]),onClick:e=>T?.(e),...o(v),children:[l(f)&&r("div",{className:"Tab__left",children:f})||!!d&&r("div",{className:"Tab__left",children:r(m,{name:d,spin:b})}),r("div",{className:"Tab__text",children:h}),l(u)&&r("div",{className:"Tab__right",children:u})]})};export{b as Tabs};
+import{Fragment as e,jsx as r,jsxs as t}from"react/jsx-runtime";import{canRender as l,classes as n}from"../common/react.js";import{computeBoxClassName as i,computeBoxProps as c}from"../common/ui.js";import{useEffect as a,useRef as o,useState as s}from"react";import{Button as d}from"./Button.js";import{Icon as m}from"./Icon.js";function b(l){let{className:d,vertical:m,scrollable:b,fill:f,fluid:h,children:T,...v}=l,_=o(!0),p=o(null),L=o(null),[N,w]=s(!1),[E,j]=s(!1);function W(e){if(!p.current)return;let r=p.current,t=.5*r.clientWidth;r.scrollBy({left:"left"===e?-t:t,behavior:"smooth"})}a(()=>{if(!b||m||!p.current)return;let e=p.current;if(e.scrollWidth<e.clientWidth)return;function r(){w(e.scrollLeft>0),j(e.scrollLeft+e.clientWidth<e.scrollWidth)}function t(r){Math.abs(r.deltaY)>Math.abs(r.deltaX)&&(e.scrollLeft+=r.deltaY)}let l=e.querySelector(".Tab--selected");if(l)return L.current!==l&&(L.current=l,l.scrollIntoView({behavior:_.current?"auto":"smooth",inline:"center"})),_.current=!1,e.addEventListener("wheel",t,{passive:!0}),e.addEventListener("scroll",r),window.addEventListener("resize",r),r(),()=>{e.removeEventListener("wheel",t),e.removeEventListener("scroll",r),window.removeEventListener("resize",r)}},[b,m,T]);let g=T;return b&&!m&&(g=t(e,{children:[N&&r(u,{direction:"left",makeScroll:W}),r("div",{ref:p,className:n(["Tabs--scrollable-content",N&&"scrollable-left",E&&"scrollable-right"]),children:T}),E&&r(u,{direction:"right",makeScroll:W})]})),r("div",{className:n(["Tabs",m?"Tabs--vertical":"Tabs--horizontal",f&&"Tabs--fill",h&&"Tabs--fluid",!m&&b&&"Tabs--scrollable",d,i(v)]),...c(v),children:g})}function u(e){let{direction:t,makeScroll:l}=e;return r(d,{className:`scroll-${t}`,color:"transparent",icon:`angle-${t}`,onClick:()=>l(t)})}(b||(b={})).Tab=function(e){let{className:a,selected:o,color:s,icon:d,iconSpin:b,leftSlot:u,rightSlot:f,children:h,onClick:T,...v}=e;return t("div",{className:n(["Tab","Tabs__Tab",`Tab--color--${s}`,o&&"Tab--selected",a,i(v)]),onClick:e=>T?.(e),...c(v),children:[l(u)&&r("div",{className:"Tab__left",children:u})||!!d&&r("div",{className:"Tab__left",children:r(m,{name:d,spin:b})}),r("div",{className:"Tab__text",children:h}),l(f)&&r("div",{className:"Tab__right",children:f})]})};export{b as Tabs};

package/package.json

@@ -69,5 +69,5 @@
     "test": "bun test"
   },
   "type": "module",
-  "version": "5.3.0"
+  "version": "5.3.2"
 }

package/styles/components/Tabs.scss

@@ -136,23 +136,26 @@
 }
 
 .Tabs--scrollable {
-  --mask-width: 3.25rem;
+  --mask-width: 3.25em;
   --mask-left: 0rem;
   --mask-right: 0rem;
 
+  display: grid;
+  padding: 0;
+
   &-content {
     overflow: auto;
     scrollbar-width: none;
     overscroll-behavior: none;
     display: flex;
     flex-wrap: nowrap;
-    width: 100%;
+    padding: var(--space-s) var(--space-s) 0;
     mask-image: linear-gradient(
       90deg,
-      transparent calc(var(--mask-left) * 0.5),
+      transparent calc(var(--mask-left) * 0.66),
       black calc(0% + var(--mask-left)),
       black calc(100% - var(--mask-right)),
-      transparent calc(100% - calc(var(--mask-right) * 0.5))
+      transparent calc(100% - calc(var(--mask-right) * 0.66))
     );
 
     &.scrollable-left.scrollable-right {
@@ -175,8 +178,8 @@
     align-content: center;
     top: 0;
     height: 100%;
-    margin: none;
-    border-radius: unset;
+    margin: 0;
+    border-radius: 0;
     z-index: 1;
   }