tgui-core 2.0.5 → 2.1.0

package/dist/components/Icon.d.ts

@@ -1,5 +1,5 @@
-import { BooleanLike } from '../common/react';
-import { BoxProps } from './Box';
+import { type BooleanLike } from '../common/react';
+import type { BoxProps } from './Box';
 type Props = {
     /** Icon name. @see https://fontawesome.com/v6/search?o=r&m=free */
     name: string;

package/dist/components/Icon.js

@@ -1,45 +1 @@
-import { jsx as l } from "react/jsx-runtime";
-import { classes as p } from "../common/react.js";
-import { computeBoxProps as u, computeBoxClassName as N } from "../common/ui.js";
-const f = /-o$/;
-function m(o) {
-  const { name: s = "", size: a, spin: e, className: x, rotation: r, ...c } = o, n = c.style || {};
-  a && (n.fontSize = `${a * 100}%`), r && (n.transform = `rotate(${r}deg)`), c.style = n;
-  const I = u(c);
-  let t = "";
-  if (s.startsWith("tg-"))
-    t = s;
-  else {
-    const S = f.test(s), i = s.replace(f, ""), d = !i.startsWith("fa-");
-    t = S ? "far " : "fas ", d && (t += "fa-"), t += i, e && (t += " fa-spin");
-  }
-  return /* @__PURE__ */ l(
-    "i",
-    {
-      className: p([
-        "Icon",
-        t,
-        x,
-        N(c)
-      ]),
-      ...I
-    }
-  );
-}
-function g(o) {
-  const { className: s, children: a, ...e } = o;
-  return /* @__PURE__ */ l(
-    "span",
-    {
-      className: p(["IconStack", s, N(e)]),
-      ...u(e),
-      children: a
-    }
-  );
-}
-((o) => {
-  o.Stack = g;
-})(m || (m = {}));
-export {
-  m as Icon
-};
+import*as s from"react/jsx-runtime";import*as t from"../common/react.js";import*as e from"../common/ui.js";let o=/-o$/;function a(a){let{name:r="",size:c,spin:m,className:n,rotation:l,...i}=a,f=i.style||{};c&&(f.fontSize=`${100*c}%`),l&&(f.transform=`rotate(${l}deg)`),i.style=f;let p=(0,e.computeBoxProps)(i),u="";if(r.startsWith("tg-"))u=r;else{let s=o.test(r),t=r.replace(o,""),e=!t.startsWith("fa-");u=s?"far ":"fas ",e&&(u+="fa-"),u+=t,m&&(u+=" fa-spin")}return(0,s.jsx)("i",{className:(0,t.classes)(["Icon",u,n,(0,e.computeBoxClassName)(i)]),...p})}(a||(a={})).Stack=function(o){let{className:a,children:r,...c}=o;return(0,s.jsx)("span",{className:(0,t.classes)(["IconStack",a,(0,e.computeBoxClassName)(c)]),...(0,e.computeBoxProps)(c),children:r})};export{a as Icon};

package/dist/components/Image.d.ts

@@ -1,4 +1,4 @@
-import { BoxProps } from './Box';
+import type { BoxProps } from './Box';
 type Props = Partial<{
     className: string;
     /** True is default, this fixes an ie thing */

package/dist/components/Image.js

@@ -1,38 +1 @@
-import { jsx as c } from "react/jsx-runtime";
-import { useRef as p } from "react";
-import { computeBoxProps as u } from "../common/ui.js";
-const g = 5;
-function C(o) {
-  const {
-    fixBlur: r = !0,
-    fixErrors: m = !1,
-    objectFit: s = "fill",
-    src: A,
-    ...n
-  } = o, t = p(0), e = u(n);
-  return e.style = {
-    ...e.style,
-    "-ms-interpolation-mode": r ? "nearest-neighbor" : "auto",
-    imageRendering: r ? "pixelated" : "auto",
-    objectFit: s
-  }, /* @__PURE__ */ c(
-    "img",
-    {
-      onError: (i) => {
-        if (m && t.current < g) {
-          const a = i.currentTarget;
-          setTimeout(() => {
-            a.src = `${A}?attempt=${t.current}`, t.current++;
-          }, 1e3);
-        }
-      },
-      src: A || /** Use transparent base64 pixel if there is no src. So we don't get broken image icon when using assets */
-      "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVR42mNkYAAAAAYAAjCB0C8AAAAASUVORK5CYII=",
-      ...e,
-      alt: "dm icon"
-    }
-  );
-}
-export {
-  C as Image
-};
+import*as e from"react/jsx-runtime";import*as A from"react";import*as t from"../common/ui.js";function r(r){let{fixBlur:o=!0,fixErrors:m=!1,objectFit:a="fill",src:i,...n}=r,s=(0,A.useRef)(0),u=(0,t.computeBoxProps)(n);return u.style={...u.style,"-ms-interpolation-mode":o?"nearest-neighbor":"auto",imageRendering:o?"pixelated":"auto",objectFit:a},(0,e.jsx)("img",{onError:e=>{if(m&&s.current<5){let A=e.currentTarget;setTimeout(()=>{A.src=`${i}?attempt=${s.current}`,s.current++},1e3)}},src:i||"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVR42mNkYAAAAAYAAjCB0C8AAAAASUVORK5CYII=",...u,alt:"dm icon"})}export{r as Image};

package/dist/components/ImageButton.d.ts

@@ -1,8 +1,13 @@
-import { Placement } from '@floating-ui/react';
-import { ReactNode } from 'react';
-import { BooleanLike } from '../common/react';
-import { BoxProps } from './Box';
-import { Direction } from './DmIcon';
+/**
+ * @file
+ * @copyright 2024 Aylong (https://github.com/AyIong)
+ * @license MIT
+ */
+import type { Placement } from '@floating-ui/react';
+import type { ReactNode } from 'react';
+import { type BooleanLike } from '../common/react';
+import type { BoxProps } from './Box';
+import { type Direction } from './DmIcon';
 type Props = Partial<{
     /** Asset cache. Example: `asset={['assetname32x32', thing.key]}` */
     asset: string[];

package/dist/components/ImageButton.js

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

package/dist/components/InfinitePlane.d.ts

@@ -1,5 +1,5 @@
-import { PropsWithChildren } from 'react';
-import { BoxProps } from './Box';
+import { type PropsWithChildren } from 'react';
+import type { BoxProps } from './Box';
 type Props = {
     /** The width of the image to display. */
     imageWidth: number;

package/dist/components/InfinitePlane.js

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

package/dist/components/Input.d.ts

@@ -1,5 +1,5 @@
-import { SyntheticEvent } from 'react';
-import { BoxProps } from './Box';
+import { type SyntheticEvent } from 'react';
+import { type BoxProps } from './Box';
 type ConditionalProps = {
     /**
      * Mark this if you want to debounce onInput.

package/dist/components/Input.js

@@ -1,96 +1 @@
-import { jsxs as S, jsx as p } from "react/jsx-runtime";
-import { useRef as j, useEffect as m } from "react";
-import { KEY as k, isEscape as v } from "../common/keys.js";
-import { classes as w } from "../common/react.js";
-import { debounce as B } from "../common/timer.js";
-import { Box as F } from "./Box.js";
-function d(r) {
-  return typeof r != "number" && typeof r != "string" ? "" : String(r);
-}
-const O = B((r) => r(), 250);
-function z(r) {
-  const {
-    autoFocus: g,
-    autoSelect: l,
-    className: I,
-    disabled: T,
-    expensive: b,
-    fluid: h,
-    maxLength: x,
-    monospace: y,
-    onChange: n,
-    onEnter: o,
-    onEscape: s,
-    onInput: a,
-    placeholder: E,
-    selfClear: N,
-    updateOnPropsChange: _,
-    value: c,
-    ...A
-  } = r, i = j(null);
-  function D(t) {
-    var u;
-    if (!a) return;
-    const e = (u = t.currentTarget) == null ? void 0 : u.value;
-    b ? O(() => a(t, e)) : a(t, e);
-  }
-  function K(t) {
-    if (t.key === k.Enter) {
-      o == null || o(t, t.currentTarget.value), N ? t.currentTarget.value = "" : (t.currentTarget.blur(), n == null || n(t, t.currentTarget.value));
-      return;
-    }
-    v(t.key) && (s == null || s(t), t.currentTarget.value = d(c), t.currentTarget.blur());
-  }
-  function f(t) {
-    const e = i.current;
-    if (!e) return;
-    const u = d(t);
-    e.value !== u && (e.value = u);
-  }
-  return m(() => {
-    const t = i.current;
-    if (t) {
-      f(c);
-      const e = g || l, u = document.activeElement === t;
-      e && !u && setTimeout(() => {
-        t.focus(), l && t.select();
-      }, 1);
-    }
-  }, []), m(() => {
-    if (_) {
-      const t = i.current;
-      t && (document.activeElement === t || f(c));
-    }
-  }, [c]), /* @__PURE__ */ S(
-    F,
-    {
-      className: w([
-        "Input",
-        h && "Input--fluid",
-        y && "Input--monospace",
-        I
-      ]),
-      ...A,
-      children: [
-        /* @__PURE__ */ p("div", { className: "Input__baseline", children: "." }),
-        /* @__PURE__ */ p(
-          "input",
-          {
-            className: "Input__input",
-            disabled: T,
-            maxLength: x,
-            onBlur: (t) => n == null ? void 0 : n(t, t.target.value),
-            onChange: D,
-            onKeyDown: K,
-            placeholder: E,
-            ref: i
-          }
-        )
-      ]
-    }
-  );
-}
-export {
-  z as Input,
-  d as toInputValue
-};
+import*as e from"react/jsx-runtime";import*as t from"react";import*as r from"../common/keys.js";import*as n from"../common/react.js";import*as u from"../common/timer.js";import*as a from"./Box.js";function o(e){return"number"!=typeof e&&"string"!=typeof e?"":String(e)}let c=(0,u.debounce)(e=>e(),250);function s(u){let{autoFocus:s,autoSelect:l,className:i,disabled:m,expensive:f,fluid:p,maxLength:g,monospace:v,onChange:d,onEnter:j,onEscape:x,onInput:T,placeholder:E,selfClear:I,updateOnPropsChange:b,value:y,...h}=u,_=(0,t.useRef)(null);function k(e){let t=_.current;if(!t)return;let r=o(e);t.value!==r&&(t.value=r)}return(0,t.useEffect)(()=>{let e=_.current;if(e){k(y);let t=document.activeElement===e;(s||l)&&!t&&setTimeout(()=>{e.focus(),l&&e.select()},1)}},[]),(0,t.useEffect)(()=>{if(b){let e=_.current;e&&document.activeElement!==e&&k(y)}},[y]),(0,e.jsxs)(a.Box,{className:(0,n.classes)(["Input",p&&"Input--fluid",v&&"Input--monospace",i]),...h,children:[(0,e.jsx)("div",{className:"Input__baseline",children:"."}),(0,e.jsx)("input",{className:"Input__input",disabled:m,maxLength:g,onBlur:e=>d?.(e,e.target.value),onChange:function(e){if(!T)return;let t=e.currentTarget?.value;f?c(()=>T(e,t)):T(e,t)},onKeyDown:function(e){if(e.key===r.KEY.Enter){j?.(e,e.currentTarget.value),I?e.currentTarget.value="":(e.currentTarget.blur(),d?.(e,e.currentTarget.value));return}(0,r.isEscape)(e.key)&&(x?.(e),e.currentTarget.value=o(y),e.currentTarget.blur())},placeholder:E,ref:_})]})}export{s as Input,o as toInputValue};

package/dist/components/KeyListener.d.ts

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

package/dist/components/KeyListener.js

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

package/dist/components/Knob.d.ts

@@ -1,5 +1,5 @@
-import { BooleanLike } from '../common/react';
-import { BoxProps } from './Box';
+import { type BooleanLike } from '../common/react';
+import type { BoxProps } from './Box';
 type Props = {
     /** Value itself, controls the position of the cursor. */
     value: number;