tgui-core 2.0.6 → 2.1.0

package/dist/components/DraggableControl.js

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

package/dist/components/Dropdown.d.ts

@@ -1,5 +1,5 @@
-import { ReactNode } from 'react';
-import { BoxProps } from './Box';
+import { type ReactNode } from 'react';
+import type { BoxProps } from './Box';
 type DropdownEntry = {
     displayText: ReactNode;
     value: string | number;

package/dist/components/Dropdown.js

@@ -1,165 +1 @@
-import { jsxs as u, jsx as r, Fragment as I } from "react/jsx-runtime";
-import { useState as S, useRef as V } from "react";
-import { KEY as O } from "../common/keys.js";
-import { classes as D } from "../common/react.js";
-import { unit as C } from "../common/ui.js";
-import { Button as E } from "./Button.js";
-import { Floating as Y } from "./Floating.js";
-import { Icon as T } from "./Icon.js";
-const q = -1;
-function f(d) {
-  return typeof d == "string" ? d : d.value;
-}
-function X(d) {
-  const {
-    autoScroll: v = !0,
-    buttons: k,
-    className: B,
-    color: K = "default",
-    disabled: i,
-    displayText: R,
-    icon: x,
-    iconRotation: j,
-    iconSpin: A,
-    iconOnly: h,
-    menuWidth: _,
-    noChevron: F,
-    onClick: a,
-    onSelected: t,
-    options: l = [],
-    over: y,
-    placeholder: W = "Select...",
-    selected: m,
-    width: $ = 15
-  } = d, [p, P] = S(!1), N = V(null), s = l.findIndex((e) => f(e) === m) || 0;
-  function g(e) {
-    let n = e;
-    e < s ? n = e < 2 ? 0 : e - 2 : n = e > l.length - 3 ? l.length - 1 : e - 2;
-    const o = N.current, c = o == null ? void 0 : o.children[n];
-    o && c && (o.scrollTop = c.offsetTop);
-  }
-  function b(e) {
-    if (l.length < 1 || i)
-      return;
-    const n = 0, o = l.length - 1;
-    let c;
-    s < 0 ? c = e === "next" ? o : n : e === "next" ? c = s === o ? n : s + 1 : c = s === n ? o : s - 1, p && v && g(c), t == null || t(f(l[c]));
-  }
-  let w = y ? "top" : "bottom";
-  return h && (w = `${w}-start`), /* @__PURE__ */ u("div", { className: "Dropdown", children: [
-    /* @__PURE__ */ r(
-      Y,
-      {
-        allowedOutsideClasses: ".Dropdown__button",
-        closeAfterInteract: !0,
-        contentAutoWidth: !_,
-        contentClasses: "Dropdown__menu--wrapper",
-        contentStyles: { width: _ ? C(_) : void 0 },
-        disabled: i,
-        onOpenChange: P,
-        placement: w,
-        content: /* @__PURE__ */ r("div", { ref: N, className: "Dropdown__menu", children: l.length === 0 ? /* @__PURE__ */ r("div", { className: "Dropdown__menu--entry", children: "No options" }) : l.map((e) => {
-          const n = f(e);
-          return /* @__PURE__ */ r(
-            "div",
-            {
-              className: D([
-                "Dropdown__menu--entry",
-                m === n && "selected"
-              ]),
-              onClick: () => {
-                t == null || t(n);
-              },
-              onKeyDown: (o) => {
-                o.key === O.Enter && (t == null || t(n));
-              },
-              children: typeof e == "string" ? e : e.displayText
-            },
-            n
-          );
-        }) }),
-        onMounted: () => {
-          p && v && s !== q && g(s);
-        },
-        children: /* @__PURE__ */ u(
-          "div",
-          {
-            className: D([
-              "Dropdown__control",
-              `Button--color--${K}`,
-              i && "Button--disabled",
-              h && "Dropdown__control--icon-only",
-              B
-            ]),
-            style: { width: C($) },
-            onClick: (e) => {
-              i && !p || a == null || a(e);
-            },
-            onKeyDown: (e) => {
-              e.key === O.Enter && !i && (a == null || a(e));
-            },
-            children: [
-              x && /* @__PURE__ */ r(
-                T,
-                {
-                  className: "Dropdown__icon",
-                  name: x,
-                  rotation: j,
-                  spin: A
-                }
-              ),
-              !h && /* @__PURE__ */ u(I, { children: [
-                /* @__PURE__ */ r("span", { className: "Dropdown__selected-text", children: R || m && f(m) || W }),
-                !F && /* @__PURE__ */ r(
-                  T,
-                  {
-                    className: D([
-                      "Dropdown__icon",
-                      "Dropdown__icon--arrow",
-                      y && "over",
-                      p && "open"
-                    ]),
-                    name: "chevron-down"
-                  }
-                )
-              ] })
-            ]
-          }
-        )
-      }
-    ),
-    k && /* @__PURE__ */ u(I, { children: [
-      /* @__PURE__ */ r(
-        E,
-        {
-          className: "Dropdown__button",
-          disabled: i,
-          icon: "chevron-left",
-          onClick: () => {
-            b(
-              "previous"
-              /* Previous */
-            );
-          }
-        }
-      ),
-      /* @__PURE__ */ r(
-        E,
-        {
-          className: "Dropdown__button",
-          disabled: i,
-          icon: "chevron-right",
-          onClick: () => {
-            b(
-              "next"
-              /* Next */
-            );
-          }
-        }
-      )
-    ] })
-  ] });
-}
-export {
-  X as Dropdown
-};
+import*as o from"react/jsx-runtime";import*as n from"react";import*as e from"../common/keys.js";import*as t from"../common/react.js";import*as s from"../common/ui.js";import*as r from"./Button.js";import*as l from"./Floating.js";import*as c from"./Icon.js";function i(o){return"string"==typeof o?o:o.value}function a(a){let{autoScroll:d=!0,buttons:m,className:p,color:u="default",disabled:_,displayText:f,icon:h,iconRotation:w,iconSpin:x,iconOnly:j,menuWidth:D,noChevron:g,onClick:y,onSelected:v,options:N=[],over:b,placeholder:k="Select...",selected:C,width:B=15}=a,[I,E]=(0,n.useState)(!1),F=(0,n.useRef)(null),K=N.findIndex(o=>i(o)===C)||0;function S(o){let n=o;n=o<K?o<2?0:o-2:o>N.length-3?N.length-1:o-2;let e=F.current,t=e?.children[n];e&&t&&(e.scrollTop=t.offsetTop)}function T(o){let n;if(N.length<1||_)return;let e=N.length-1;n=K<0?"next"===o?e:0:"next"===o?K===e?0:K+1:0===K?e:K-1,I&&d&&S(n),v?.(i(N[n]))}let A=b?"top":"bottom";return j&&(A=`${A}-start`),(0,o.jsxs)("div",{className:"Dropdown",children:[(0,o.jsx)(l.Floating,{allowedOutsideClasses:".Dropdown__button",closeAfterInteract:!0,contentAutoWidth:!D,contentClasses:"Dropdown__menu--wrapper",contentStyles:{width:D?(0,s.unit)(D):void 0},disabled:_,onOpenChange:E,placement:A,content:(0,o.jsx)("div",{ref:F,className:"Dropdown__menu",children:0===N.length?(0,o.jsx)("div",{className:"Dropdown__menu--entry",children:"No options"}):N.map(n=>{let s=i(n);return(0,o.jsx)("div",{className:(0,t.classes)(["Dropdown__menu--entry",C===s&&"selected"]),onClick:()=>{v?.(s)},onKeyDown:o=>{o.key===e.KEY.Enter&&v?.(s)},children:"string"==typeof n?n:n.displayText},s)})}),onMounted:()=>{I&&d&&-1!==K&&S(K)},children:(0,o.jsxs)("div",{className:(0,t.classes)(["Dropdown__control",`Button--color--${u}`,_&&"Button--disabled",j&&"Dropdown__control--icon-only",p]),style:{width:(0,s.unit)(B)},onClick:o=>{(!_||I)&&y?.(o)},onKeyDown:o=>{o.key!==e.KEY.Enter||_||y?.(o)},children:[h&&(0,o.jsx)(c.Icon,{className:"Dropdown__icon",name:h,rotation:w,spin:x}),!j&&(0,o.jsxs)(o.Fragment,{children:[(0,o.jsx)("span",{className:"Dropdown__selected-text",children:f||C&&i(C)||k}),!g&&(0,o.jsx)(c.Icon,{className:(0,t.classes)(["Dropdown__icon","Dropdown__icon--arrow",b&&"over",I&&"open"]),name:"chevron-down"})]})]})}),m&&(0,o.jsxs)(o.Fragment,{children:[(0,o.jsx)(r.Button,{className:"Dropdown__button",disabled:_,icon:"chevron-left",onClick:()=>{T("previous")}}),(0,o.jsx)(r.Button,{className:"Dropdown__button",disabled:_,icon:"chevron-right",onClick:()=>{T("next")}})]})]})}export{a as Dropdown};

package/dist/components/FitText.d.ts

@@ -1,4 +1,4 @@
-import { Component, HTMLAttributes, PropsWithChildren } from 'react';
+import { Component, type HTMLAttributes, type PropsWithChildren } from 'react';
 type Props = {
     acceptableDifference?: number;
     maxFontSize: number;
@@ -9,7 +9,7 @@ type State = {
     fontSize: number;
 };
 export declare class FitText extends Component<Props, State> {
-    ref: import('react').RefObject<HTMLDivElement | null>;
+    ref: import("react").RefObject<HTMLDivElement | null>;
     state: State;
     constructor(props: Props);
     componentDidUpdate(prevProps: any): void;

package/dist/components/FitText.js

@@ -1,63 +1 @@
-var d = Object.defineProperty;
-var c = (i, t, e) => t in i ? d(i, t, { enumerable: !0, configurable: !0, writable: !0, value: e }) : i[t] = e;
-var o = (i, t, e) => c(i, typeof t != "symbol" ? t + "" : t, e);
-import { jsx as a } from "react/jsx-runtime";
-import { Component as l, createRef as m } from "react";
-const z = 5;
-class S extends l {
-  constructor(e) {
-    super(e);
-    o(this, "ref", m());
-    o(this, "state", {
-      fontSize: 0
-    });
-    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() {
-    const e = this.ref.current;
-    if (!e)
-      return;
-    const f = this.props.maxWidth;
-    let s = 0, r = this.props.maxFontSize;
-    for (let p = 0; p < 10; p++) {
-      const n = Math.round((s + r) / 2);
-      e.style.fontSize = `${n}px`;
-      const h = e.offsetWidth - f;
-      if (h > 0)
-        r = n;
-      else if (h < (this.props.acceptableDifference ?? z))
-        s = n;
-      else
-        break;
-    }
-    this.setState({
-      fontSize: Math.round((s + r) / 2)
-    });
-  }
-  componentDidMount() {
-    this.resize();
-  }
-  render() {
-    var e;
-    return /* @__PURE__ */ a(
-      "span",
-      {
-        ref: this.ref,
-        style: {
-          fontSize: `${this.state.fontSize}px`,
-          ...typeof ((e = this.props.native) == null ? void 0 : e.style) == "object" ? this.props.native.style : {}
-        },
-        children: this.props.children
-      }
-    );
-  }
-}
-export {
-  S as FitText
-};
+import*as e from"react/jsx-runtime";import*as t from"react";class i extends t.Component{ref=(0,t.createRef)();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(0,e.jsx)("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{i as FitText};

package/dist/components/Flex.d.ts

@@ -1,4 +1,4 @@
-import { BoxProps } from './Box';
+import type { BoxProps } from './Box';
 export type FlexProps = Partial<{
     /**
      * Default alignment of all children.

package/dist/components/Flex.js

@@ -1,70 +1 @@
-import { jsx as l } from "react/jsx-runtime";
-import { classes as r } from "../common/react.js";
-import { computeBoxClassName as m, computeBoxProps as a, unit as f } from "../common/ui.js";
-function p(e) {
-  return r([
-    "Flex",
-    e.inlineFlex && "Flex--inline",
-    m(e)
-  ]);
-}
-function d(e) {
-  const { direction: s, wrap: t, align: i, justify: n, ...o } = e;
-  return a({
-    style: {
-      ...o.style,
-      flexDirection: s,
-      flexWrap: t === !0 ? "wrap" : t,
-      alignItems: i,
-      justifyContent: n
-    },
-    ...o
-  });
-}
-function F(e) {
-  const { className: s, ...t } = e;
-  return /* @__PURE__ */ l(
-    "div",
-    {
-      className: r([s, p(t)]),
-      ...d(t)
-    }
-  );
-}
-const N = (e) => r(["Flex__item", m(e)]);
-function v(e) {
-  const { style: s, grow: t, order: i, shrink: n, basis: o, align: c, ...u } = e, x = o ?? // IE11: Set basis to specified width if it's known, which fixes certain
-  // bugs when rendering tables inside the flex.
-  e.width ?? // If grow is used, basis should be set to 0 to be consistent with
-  // flex css shorthand `flex: 1`.
-  (t !== void 0 ? 0 : void 0);
-  return a({
-    style: {
-      ...s,
-      flexGrow: t !== void 0 && Number(t),
-      flexShrink: n !== void 0 && Number(n),
-      flexBasis: f(x),
-      order: i,
-      alignSelf: c
-    },
-    ...u
-  });
-}
-function y(e) {
-  const { className: s, ...t } = e;
-  return /* @__PURE__ */ l(
-    "div",
-    {
-      className: r([s, N(e)]),
-      ...v(t)
-    }
-  );
-}
-F.Item = y;
-export {
-  F as Flex,
-  p as computeFlexClassName,
-  N as computeFlexItemClassName,
-  v as computeFlexItemProps,
-  d as computeFlexProps
-};
+import*as e from"react/jsx-runtime";import*as t from"../common/react.js";import*as s from"../common/ui.js";function o(e){return(0,t.classes)(["Flex",e.inlineFlex&&"Flex--inline",(0,s.computeBoxClassName)(e)])}function l(e){let{direction:t,wrap:o,align:l,justify:r,...m}=e;return(0,s.computeBoxProps)({style:{...m.style,flexDirection:t,flexWrap:!0===o?"wrap":o,alignItems:l,justifyContent:r},...m})}function r(s){let{className:r,...m}=s;return(0,e.jsx)("div",{className:(0,t.classes)([r,o(m)]),...l(m)})}let m=e=>(0,t.classes)(["Flex__item",(0,s.computeBoxClassName)(e)]);function i(e){let{style:t,grow:o,order:l,shrink:r,basis:m,align:i,...n}=e,a=m??e.width??(void 0!==o?0:void 0);return(0,s.computeBoxProps)({style:{...t,flexGrow:void 0!==o&&Number(o),flexShrink:void 0!==r&&Number(r),flexBasis:(0,s.unit)(a),order:l,alignSelf:i},...n})}r.Item=function(s){let{className:o,...l}=s;return(0,e.jsx)("div",{className:(0,t.classes)([o,m(s)]),...i(l)})};export{r as Flex,o as computeFlexClassName,m as computeFlexItemClassName,i as computeFlexItemProps,l as computeFlexProps};

package/dist/components/Floating.d.ts

@@ -1,6 +1,6 @@
-import { Placement } from '@floating-ui/react';
-import { CSSProperties, ReactNode } from 'react';
-import { BooleanLike } from '../common/react';
+import { type Placement } from '@floating-ui/react';
+import { type CSSProperties, type ReactNode } from 'react';
+import { type BooleanLike } from '../common/react';
 type Props = {
     /** Interacting with this element will open the floating element. */
     children: ReactNode;