tgui-core 2.0.6 → 2.1.0

package/dist/components/ProgressBar.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 = {
     /**
      * Current progress as a floating point number between `minValue` (default: 0) and `maxValue` (default: 1).

package/dist/components/ProgressBar.js

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

package/dist/components/RestrictedInput.d.ts

@@ -0,0 +1,29 @@
+import type { BoxProps } from './Box';
+type Props = {
+    value: number;
+} & Partial<{
+    allowFloats: boolean;
+    autoFocus: boolean;
+    autoSelect: boolean;
+    disabled: boolean;
+    fluid: boolean;
+    maxValue: number | null;
+    minValue: number | null;
+    onBlur: (e: Event, value: number) => void;
+    onChange: (e: Event, value: number) => void;
+    onEnter: (e: Event, value: number) => void;
+}> & BoxProps;
+/**
+ * ## RestrictedInput
+ * Creates an input which rejects improper keys.
+ *
+ * @deprecated Use `NumberInput` instead.
+ *
+ * This will server as a wrapper for NumberInput until removal. This decision was
+ * made because it's poor UX. Users should be allowed to type in whatever they
+ * want, but have the UI notify them it's invalid after it's entered.
+ *
+ * It also gives a false sense of security. It's just an annoying input.
+ */
+export declare function RestrictedInput(props: Props): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/components/RestrictedInput.js

@@ -1,161 +1 @@
-import { jsxs as E, jsx as h } from "react/jsx-runtime";
-import { Component as N, createRef as S } from "react";
-import { KEY_ENTER as I, KEY_ESCAPE as b } from "../common/keycodes.js";
-import { clamp as d } from "../common/math.js";
-import { classes as v } from "../common/react.js";
-import { Box as F } from "./Box.js";
-const g = 0, x = 1e4;
-function C(s, e, t, n) {
-  const i = e || g, o = t || t === 0 ? t : x;
-  let r = n ? s.replace(/[^\-\d.]/g, "") : s.replace(/[^\-\d]/g, "");
-  return n && (r = V(r, i), r = m(".", r)), e < 0 ? (r = _(r), r = m("-", r)) : r = r.replaceAll("-", ""), i <= 1 && o >= 0 ? M(r, i, o, n) : r;
-}
-const M = (s, e, t, n) => {
-  const i = n ? Number.parseFloat(s) : Number.parseInt(s, 10);
-  if (!Number.isNaN(i) && (s.slice(-1) !== "." || i < Math.floor(e))) {
-    const o = d(i, e, t);
-    if (i !== o)
-      return String(o);
-  }
-  return s;
-};
-function _(s) {
-  let e = s;
-  const t = s.indexOf("-");
-  if (t > 0) {
-    const n = s.replace("-", "");
-    e = "-".concat(n);
-  } else t === 0 && s.indexOf("-", t + 1) > 0 && (e = s.replaceAll("-", ""));
-  return e;
-}
-function V(s, e) {
-  let t = s;
-  const n = Math.sign(e) * Math.floor(Math.abs(e));
-  return s.indexOf(".") === 0 ? t = String(n).concat(s) : s.indexOf("-") === 0 && s.indexOf(".") === 1 && (t = n + ".".concat(s.slice(2))), t;
-}
-function m(s, e) {
-  const t = e.indexOf(s), n = e.length;
-  let i = e;
-  if (t !== -1 && t < n - 1) {
-    let o = e.slice(t + 1, n);
-    o = o.replaceAll(s, ""), i = e.slice(0, t + 1).concat(o);
-  }
-  return i;
-}
-function f(s, e, t, n) {
-  const i = e || g, o = t || t === 0 ? t : x;
-  if (!s || !s.length)
-    return String(i);
-  const r = n ? Number.parseFloat(s.replace(/[^\-\d.]/g, "")) : Number.parseInt(s.replace(/[^\-\d]/g, ""), 10);
-  return Number.isNaN(r) ? String(i) : String(d(r, i, o));
-}
-class B extends N {
-  constructor(e) {
-    super(e), this.inputRef = S(), this.state = {
-      editing: !1
-    }, this.handleBlur = (t) => {
-      const { maxValue: n, minValue: i, onBlur: o, allowFloats: r } = this.props, { editing: l } = this.state;
-      l && this.setEditing(!1);
-      const a = f(
-        t.target.value,
-        i,
-        n,
-        r
-      );
-      o && o(t, +a);
-    }, this.handleChange = (t) => {
-      const { maxValue: n, minValue: i, onChange: o, allowFloats: r } = this.props;
-      t.target.value = C(
-        t.target.value,
-        i,
-        n,
-        r
-      ), o && o(t, +t.target.value);
-    }, this.handleFocus = (t) => {
-      const { editing: n } = this.state;
-      n || this.setEditing(!0);
-    }, this.handleInput = (t) => {
-      const { editing: n } = this.state, { onInput: i } = this.props;
-      n || this.setEditing(!0), i && i(t, +t.target.value);
-    }, this.handleKeyDown = (t) => {
-      const { maxValue: n, minValue: i, onChange: o, onEnter: r, allowFloats: l } = this.props;
-      if (t.keyCode === I) {
-        const a = f(
-          t.target.value,
-          i,
-          n,
-          l
-        );
-        this.setEditing(!1), o && o(t, +a), r && r(t, +a), t.target.blur();
-        return;
-      }
-      if (t.keyCode === b) {
-        if (this.props.onEscape) {
-          this.props.onEscape(t);
-          return;
-        }
-        this.setEditing(!1), t.target.value = this.props.value, t.target.blur();
-        return;
-      }
-    };
-  }
-  componentDidMount() {
-    var r;
-    const { maxValue: e, minValue: t, allowFloats: n } = this.props, i = (r = this.props.value) == null ? void 0 : r.toString(), o = this.inputRef.current;
-    o && (o.value = f(
-      i,
-      t,
-      e,
-      n
-    )), (this.props.autoFocus || this.props.autoSelect) && setTimeout(() => {
-      o.focus(), this.props.autoSelect && o.select();
-    }, 1);
-  }
-  componentDidUpdate(e, t) {
-    var c, p;
-    const { maxValue: n, minValue: i, allowFloats: o } = this.props, { editing: r } = this.state, l = (c = e.value) == null ? void 0 : c.toString(), a = (p = this.props.value) == null ? void 0 : p.toString(), u = this.inputRef.current;
-    u && !r && a !== l && a !== u.value && (u.value = f(
-      a,
-      i,
-      n,
-      o
-    ));
-  }
-  setEditing(e) {
-    this.setState({ editing: e });
-  }
-  render() {
-    const { props: e } = this, { onChange: t, onEnter: n, onInput: i, onBlur: o, value: r, ...l } = e, { className: a, fluid: u, monospace: c, ...p } = l;
-    return /* @__PURE__ */ E(
-      F,
-      {
-        className: v([
-          "Input",
-          u && "Input--fluid",
-          c && "Input--monospace",
-          a
-        ]),
-        ...p,
-        children: [
-          /* @__PURE__ */ h("div", { className: "Input__baseline", children: "." }),
-          /* @__PURE__ */ h(
-            "input",
-            {
-              className: "Input__input",
-              onChange: this.handleChange,
-              onInput: this.handleInput,
-              onFocus: this.handleFocus,
-              onBlur: this.handleBlur,
-              onKeyDown: this.handleKeyDown,
-              ref: this.inputRef,
-              type: "number | string"
-            }
-          )
-        ]
-      }
-    );
-  }
-}
-export {
-  B as RestrictedInput
-};
+import*as e from"react/jsx-runtime";import*as r from"../common/keys.js";import*as t from"./NumberInput.js";function m(m){let{minValue:n,maxValue:u,onChange:o,onEnter:a,onBlur:s,...p}=m;return(0,e.jsx)(t.NumberInput,{...p,minValue:n??0,maxValue:u??Number.POSITIVE_INFINITY,onChange:e=>{o?.({},e)},onKeyDown:e=>{e.key===r.KEY.Enter&&a?.({},Number(e.currentTarget.value))},step:1})}export{m as RestrictedInput};

package/dist/components/RoundGauge.d.ts

@@ -1,5 +1,5 @@
-import { CSSProperties } from 'react';
-import { BoxProps } from './Box';
+import type { CSSProperties } from 'react';
+import type { BoxProps } from './Box';
 type Props = {
     /** The current value of the metric. */
     value: number;

package/dist/components/RoundGauge.js

@@ -1,114 +1 @@
-import { jsxs as m, jsx as e } from "react/jsx-runtime";
-import { scale as d, keyOfMatchingRange as M, clamp01 as v } from "../common/math.js";
-import { classes as p } from "../common/react.js";
-import { computeBoxProps as k, computeBoxClassName as $ } from "../common/ui.js";
-import { AnimatedNumber as B } from "./AnimatedNumber.js";
-function b(_) {
-  const {
-    alertAfter: a,
-    alertBefore: t,
-    className: h,
-    format: R,
-    maxValue: c = 1,
-    minValue: u = 1,
-    ranges: n,
-    size: y = 1,
-    style: G,
-    value: r,
-    ...g
-  } = _, N = d(r, u, c), f = v(N), s = n ? {} : { primary: [0, 1] };
-  if (n)
-    for (const o in n) {
-      const l = n[o];
-      s[o] = [
-        d(l[0], u, c),
-        d(l[1], u, c)
-      ];
-    }
-  function x() {
-    return !!(a && t && r > a && r < t || a && r > a || t && r < t);
-  }
-  const C = x() && M(f, s);
-  return /* @__PURE__ */ m("div", { className: "RoundGauge__wrapper", children: [
-    /* @__PURE__ */ e(
-      "div",
-      {
-        className: p([
-          "RoundGauge",
-          h,
-          $(g)
-        ]),
-        ...k({
-          style: {
-            fontSize: `${y}em`,
-            ...G
-          },
-          ...g
-        }),
-        children: /* @__PURE__ */ m("svg", { viewBox: "0 0 100 50", children: [
-          (a || t) && /* @__PURE__ */ e(
-            "g",
-            {
-              className: p([
-                "RoundGauge__alert",
-                C ? `active RoundGauge__alert--${C}` : ""
-              ]),
-              children: /* @__PURE__ */ 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" })
-            }
-          ),
-          /* @__PURE__ */ e("g", { children: /* @__PURE__ */ e("circle", { className: "RoundGauge__ringTrack", cx: "50", cy: "50", r: "45" }) }),
-          /* @__PURE__ */ e("g", { children: Object.keys(s).map((o, l) => {
-            const i = s[o];
-            return /* @__PURE__ */ e(
-              "circle",
-              {
-                className: `RoundGauge__ringFill RoundGauge--color--${o}`,
-                style: {
-                  strokeDashoffset: Math.max(
-                    (2 - (i[1] - i[0])) * Math.PI * 50,
-                    0
-                  )
-                },
-                transform: `rotate(${180 + 180 * i[0]} 50 50)`,
-                cx: "50",
-                cy: "50",
-                r: "45"
-              },
-              l
-            );
-          }) }),
-          /* @__PURE__ */ m(
-            "g",
-            {
-              className: "RoundGauge__needle",
-              transform: `rotate(${f * 180 - 90} 50 50)`,
-              children: [
-                /* @__PURE__ */ e(
-                  "polygon",
-                  {
-                    className: "RoundGauge__needleLine",
-                    points: "46,50 50,0 54,50"
-                  }
-                ),
-                /* @__PURE__ */ e(
-                  "circle",
-                  {
-                    className: "RoundGauge__needleMiddle",
-                    cx: "50",
-                    cy: "50",
-                    r: "8"
-                  }
-                )
-              ]
-            }
-          ),
-          /* @__PURE__ */ e("title", { children: "alert" })
-        ] })
-      }
-    ),
-    /* @__PURE__ */ e(B, { value: r, format: R })
-  ] });
-}
-export {
-  b as RoundGauge
-};
+import*as e from"react/jsx-runtime";import*as a from"../common/math.js";import*as s from"../common/react.js";import*as r from"../common/ui.js";import*as o from"./AnimatedNumber.js";function c(c){let{alertAfter:l,alertBefore:t,className:n,format:m,maxValue:i=1,minValue:u=1,ranges:d,size:x=1,style:g,value:j,...C}=c,p=(0,a.scale)(j,u,i),_=(0,a.clamp01)(p),f=d?{}:{primary:[0,1]};if(d)for(let e in d){let s=d[e];f[e]=[(0,a.scale)(s[0],u,i),(0,a.scale)(s[1],u,i)]}let h=(!!l&&!!t&&!!(j>l)&&!!(j<t)||!!l&&!!(j>l)||!!t&&!!(j<t))&&(0,a.keyOfMatchingRange)(_,f);return(0,e.jsxs)("div",{className:"RoundGauge__wrapper",children:[(0,e.jsx)("div",{className:(0,s.classes)(["RoundGauge",n,(0,r.computeBoxClassName)(C)]),...(0,r.computeBoxProps)({style:{fontSize:`${x}em`,...g},...C}),children:(0,e.jsxs)("svg",{viewBox:"0 0 100 50",children:[(l||t)&&(0,e.jsx)("g",{className:(0,s.classes)(["RoundGauge__alert",h?`active RoundGauge__alert--${h}`:""]),children:(0,e.jsx)("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"})}),(0,e.jsx)("g",{children:(0,e.jsx)("circle",{className:"RoundGauge__ringTrack",cx:"50",cy:"50",r:"45"})}),(0,e.jsx)("g",{children:Object.keys(f).map((a,s)=>{let r=f[a];return(0,e.jsx)("circle",{className:`RoundGauge__ringFill RoundGauge--color--${a}`,style:{strokeDashoffset:Math.max((2-(r[1]-r[0]))*Math.PI*50,0)},transform:`rotate(${180+180*r[0]} 50 50)`,cx:"50",cy:"50",r:"45"},s)})}),(0,e.jsxs)("g",{className:"RoundGauge__needle",transform:`rotate(${180*_-90} 50 50)`,children:[(0,e.jsx)("polygon",{className:"RoundGauge__needleLine",points:"46,50 50,0 54,50"}),(0,e.jsx)("circle",{className:"RoundGauge__needleMiddle",cx:"50",cy:"50",r:"8"})]}),(0,e.jsx)("title",{children:"alert"})]})}),(0,e.jsx)(o.AnimatedNumber,{value:j,format:m})]})}export{c as RoundGauge};

package/dist/components/Section.d.ts

@@ -1,5 +1,5 @@
-import { ReactNode, RefObject } from 'react';
-import { BoxProps } from './Box';
+import { type ReactNode, type RefObject } from 'react';
+import type { BoxProps } from './Box';
 type Props = Partial<{
     /** Buttons to render aside the section title. */
     buttons: ReactNode;

package/dist/components/Section.js

@@ -1,65 +1 @@
-import { jsxs as s, jsx as e } from "react/jsx-runtime";
-import { useRef as T, useEffect as C } from "react";
-import { addScrollableNode as P, removeScrollableNode as g } from "../common/events.js";
-import { canRender as a, classes as d } from "../common/react.js";
-import { computeBoxProps as j, computeBoxClassName as z } from "../common/ui.js";
-function k(m) {
-  const {
-    buttons: c,
-    children: S,
-    className: f,
-    container_id: u = "",
-    fill: _,
-    fitted: p,
-    flexGrow: N,
-    noTopPadding: h,
-    onScroll: b,
-    ref: o,
-    scrollable: n,
-    scrollableHorizontal: i,
-    stretchContents: x,
-    title: l,
-    ...r
-  } = m, t = T((o == null ? void 0 : o.current) ?? null), v = a(l) || a(c);
-  return C(() => (t != null && t.current && (n || i) && P(t.current), () => {
-    t != null && t.current && g(t.current);
-  }), []), /* @__PURE__ */ s(
-    "div",
-    {
-      id: u,
-      className: d([
-        "Section",
-        _ && "Section--fill",
-        p && "Section--fitted",
-        n && "Section--scrollable",
-        i && "Section--scrollableHorizontal",
-        N && "Section--flex",
-        f,
-        z(r)
-      ]),
-      ...j(r),
-      children: [
-        v && /* @__PURE__ */ s("div", { className: "Section__title", children: [
-          /* @__PURE__ */ e("span", { className: "Section__titleText", children: l }),
-          /* @__PURE__ */ e("div", { className: "Section__buttons", children: c })
-        ] }),
-        /* @__PURE__ */ e("div", { className: "Section__rest", children: /* @__PURE__ */ e(
-          "div",
-          {
-            className: d([
-              "Section__content",
-              x && "Section__content--stretchContents",
-              h && "Section__content--noTopPadding"
-            ]),
-            onScroll: b,
-            ref: t,
-            children: S
-          }
-        ) })
-      ]
-    }
-  );
-}
-export {
-  k as Section
-};
+import*as e from"react/jsx-runtime";import*as t from"react";import*as o from"../common/events.js";import*as c from"../common/react.js";import*as n from"../common/ui.js";function s(s){let{buttons:r,children:i,className:l,container_id:a="",fill:m,fitted:d,flexGrow:S,noTopPadding:u,onScroll:_,ref:f,scrollable:x,scrollableHorizontal:p,stretchContents:j,title:N,...h}=s,v=(0,c.canRender)(N)||(0,c.canRender)(r),b=(0,t.useRef)(null),R=f??b;return(0,t.useEffect)(()=>(R.current&&(x||p)&&(0,o.addScrollableNode)(R.current),()=>{R.current&&(0,o.removeScrollableNode)(R.current)}),[]),(0,e.jsxs)("div",{id:a,className:(0,c.classes)(["Section",m&&"Section--fill",d&&"Section--fitted",x&&"Section--scrollable",p&&"Section--scrollableHorizontal",S&&"Section--flex",l,(0,n.computeBoxClassName)(h)]),...(0,n.computeBoxProps)(h),children:[v&&(0,e.jsxs)("div",{className:"Section__title",children:[(0,e.jsx)("span",{className:"Section__titleText",children:N}),(0,e.jsx)("div",{className:"Section__buttons",children:r})]}),(0,e.jsx)("div",{className:"Section__rest",children:(0,e.jsx)("div",{className:(0,c.classes)(["Section__content",j&&"Section__content--stretchContents",u&&"Section__content--noTopPadding"]),onScroll:_,ref:R,children:i})})]})}export{s as Section};

package/dist/components/Slider.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 = {
     /** Highest possible value. */
     maxValue: number;

package/dist/components/Slider.js

@@ -1,113 +1 @@
-import { jsx as e, jsxs as u } from "react/jsx-runtime";
-import { keyOfMatchingRange as F, clamp01 as s, scale as p } from "../common/math.js";
-import { classes as g } from "../common/react.js";
-import { computeBoxProps as O, computeBoxClassName as b } from "../common/ui.js";
-import { DraggableControl as k } from "./DraggableControl.js";
-function H(f) {
-  const {
-    // Draggable props (passthrough)
-    animated: _,
-    format: h,
-    maxValue: l,
-    minValue: r,
-    onChange: v,
-    onDrag: N,
-    step: x,
-    stepPixelSize: y,
-    unit: B,
-    value: i,
-    // Own props
-    className: P,
-    fillValue: a,
-    color: S,
-    ranges: V = {},
-    children: o,
-    ...t
-  } = f, C = o !== void 0;
-  return /* @__PURE__ */ e(
-    k,
-    {
-      dragMatrix: [1, 0],
-      animated: _,
-      format: h,
-      maxValue: l,
-      minValue: r,
-      onChange: v,
-      onDrag: N,
-      step: x,
-      stepPixelSize: y,
-      unit: B,
-      value: i,
-      children: (D) => {
-        const {
-          displayElement: n,
-          displayValue: c,
-          dragging: w,
-          handleDragStart: M,
-          inputElement: $
-        } = D, j = a != null, d = p(
-          a ?? c,
-          r,
-          l
-        ), m = p(c, r, l), E = S || F(a ?? i, V) || "default";
-        return /* @__PURE__ */ u(
-          "div",
-          {
-            className: g([
-              "Slider",
-              "ProgressBar",
-              `ProgressBar--color--${E}`,
-              P,
-              b(t)
-            ]),
-            ...O(t),
-            onMouseDown: M,
-            children: [
-              /* @__PURE__ */ e(
-                "div",
-                {
-                  className: g([
-                    "ProgressBar__fill",
-                    j && "ProgressBar__fill--animated"
-                  ]),
-                  style: {
-                    width: `${s(d) * 100}%`,
-                    opacity: 0.4
-                  }
-                }
-              ),
-              /* @__PURE__ */ e(
-                "div",
-                {
-                  className: "ProgressBar__fill",
-                  style: {
-                    width: `${s(Math.min(d, m)) * 100}%`
-                  }
-                }
-              ),
-              /* @__PURE__ */ u(
-                "div",
-                {
-                  className: "Slider__cursorOffset",
-                  style: {
-                    width: `${s(m) * 100}%`
-                  },
-                  children: [
-                    /* @__PURE__ */ e("div", { className: "Slider__cursor" }),
-                    /* @__PURE__ */ e("div", { className: "Slider__pointer" }),
-                    w && /* @__PURE__ */ e("div", { className: "Slider__popupValue", children: n })
-                  ]
-                }
-              ),
-              /* @__PURE__ */ e("div", { className: "ProgressBar__content", children: C ? o : n }),
-              $
-            ]
-          }
-        );
-      }
-    }
-  );
-}
-export {
-  H as Slider
-};
+import*as s from"react/jsx-runtime";import*as r from"../common/math.js";import*as e from"../common/react.js";import*as a from"../common/ui.js";import*as l from"./DraggableControl.js";function o(o){let{animated:i,format:t,maxValue:c,minValue:m,onChange:d,onDrag:n,step:p,stepPixelSize:_,unit:j,value:u,className:x,fillValue:f,color:g,ranges:h={},children:v,...N}=o,B=void 0!==v;return(0,s.jsx)(l.DraggableControl,{dragMatrix:[1,0],animated:i,format:t,maxValue:c,minValue:m,onChange:d,onDrag:n,step:p,stepPixelSize:_,unit:j,value:u,children:l=>{let{displayElement:o,displayValue:i,dragging:t,handleDragStart:d,inputElement:n}=l,p=null!=f,_=(0,r.scale)(f??i,m,c),j=(0,r.scale)(i,m,c),P=g||(0,r.keyOfMatchingRange)(f??u,h)||"default";return(0,s.jsxs)("div",{className:(0,e.classes)(["Slider","ProgressBar",`ProgressBar--color--${P}`,x,(0,a.computeBoxClassName)(N)]),...(0,a.computeBoxProps)(N),onMouseDown:d,children:[(0,s.jsx)("div",{className:(0,e.classes)(["ProgressBar__fill",p&&"ProgressBar__fill--animated"]),style:{width:`${100*(0,r.clamp01)(_)}%`,opacity:.4}}),(0,s.jsx)("div",{className:"ProgressBar__fill",style:{width:`${100*(0,r.clamp01)(Math.min(_,j))}%`}}),(0,s.jsxs)("div",{className:"Slider__cursorOffset",style:{width:`${100*(0,r.clamp01)(j)}%`},children:[(0,s.jsx)("div",{className:"Slider__cursor"}),(0,s.jsx)("div",{className:"Slider__pointer"}),t&&(0,s.jsx)("div",{className:"Slider__popupValue",children:o})]}),(0,s.jsx)("div",{className:"ProgressBar__content",children:B?v:o}),n]})}})}export{o as Slider};

package/dist/components/Stack.d.ts

@@ -1,5 +1,5 @@
-import { RefObject } from 'react';
-import { FlexItemProps, FlexProps } from './Flex';
+import { type RefObject } from 'react';
+import { type FlexItemProps, type FlexProps } from './Flex';
 type Props = Partial<{
     /** Fills available space. */
     fill: boolean;

package/dist/components/Stack.js

@@ -1,58 +1 @@
-import { jsx as i } from "react/jsx-runtime";
-import { useRef as S } from "react";
-import { classes as s } from "../common/react.js";
-import { computeBoxClassName as o } from "../common/ui.js";
-import { computeFlexProps as k, computeFlexClassName as v, computeFlexItemProps as m } from "./Flex.js";
-function l(r) {
-  const { className: c, vertical: e, fill: t, reverse: a, zebra: n, ...d } = r, u = e ? "column" : "row", f = a ? "-reverse" : "";
-  return /* @__PURE__ */ i(
-    "div",
-    {
-      className: s([
-        "Stack",
-        t && "Stack--fill",
-        e ? "Stack--vertical" : "Stack--horizontal",
-        n && "Stack--zebra",
-        a && `Stack--reverse${e ? "--vertical" : ""}`,
-        c,
-        v(r)
-      ]),
-      ...k({
-        direction: `${u}${f}`,
-        ...d
-      })
-    }
-  );
-}
-function p(r) {
-  const { className: c, innerRef: e, ...t } = r, a = S((e == null ? void 0 : e.current) ?? null);
-  return /* @__PURE__ */ i(
-    "div",
-    {
-      className: s(["Stack__item", c, o(t)]),
-      ref: a,
-      ...m(t)
-    }
-  );
-}
-l.Item = p;
-function x(r) {
-  const { className: c, hidden: e, ...t } = r;
-  return /* @__PURE__ */ i(
-    "div",
-    {
-      className: s([
-        "Stack__item",
-        "Stack__divider",
-        e && "Stack__divider--hidden",
-        c,
-        o(t)
-      ]),
-      ...m(t)
-    }
-  );
-}
-l.Divider = x;
-export {
-  l as Stack
-};
+import*as e from"react/jsx-runtime";import*as t from"react";import*as r from"../common/react.js";import*as s from"../common/ui.js";import*as a from"./Flex.js";function c(t){let{className:s,vertical:c,fill:o,reverse:m,zebra:i,...l}=t,n=m?"-reverse":"";return(0,e.jsx)("div",{className:(0,r.classes)(["Stack",o&&"Stack--fill",c?"Stack--vertical":"Stack--horizontal",i&&"Stack--zebra",m&&`Stack--reverse${c?"--vertical":""}`,s,(0,a.computeFlexClassName)(t)]),...(0,a.computeFlexProps)({direction:`${c?"column":"row"}${n}`,...l})})}c.Item=function(c){let{className:o,innerRef:m,...i}=c,l=(0,t.useRef)(m?.current??null);return(0,e.jsx)("div",{className:(0,r.classes)(["Stack__item",o,(0,s.computeBoxClassName)(i)]),ref:l,...(0,a.computeFlexItemProps)(i)})},c.Divider=function(t){let{className:c,hidden:o,...m}=t;return(0,e.jsx)("div",{className:(0,r.classes)(["Stack__item","Stack__divider",o&&"Stack__divider--hidden",c,(0,s.computeBoxClassName)(m)]),...(0,a.computeFlexItemProps)(m)})};export{c as Stack};

package/dist/components/StyleableSection.d.ts

@@ -1,4 +1,4 @@
-import { PropsWithChildren, ReactNode } from 'react';
+import type { PropsWithChildren, ReactNode } from 'react';
 type Props = Partial<{
     style: Record<string, any>;
     textStyle: Record<string, any>;

package/dist/components/StyleableSection.js

@@ -1,16 +1 @@
-import { jsxs as l, jsx as e } from "react/jsx-runtime";
-import { Box as t } from "./Box.js";
-function m(i) {
-  const { children: c, titleStyle: n, titleSubtext: s, title: o, textStyle: r, style: a } = i;
-  return /* @__PURE__ */ l(t, { style: a, children: [
-    /* @__PURE__ */ l(t, { className: "Section__title", style: n, children: [
-      /* @__PURE__ */ e(t, { className: "Section__titleText", style: r, children: o }),
-      /* @__PURE__ */ e("div", { className: "Section__buttons", children: s }),
-      " "
-    ] }),
-    /* @__PURE__ */ e(t, { className: "Section__rest", children: /* @__PURE__ */ e(t, { className: "Section__content", children: c }) })
-  ] });
-}
-export {
-  m as StyleableSection
-};
+import*as e from"react/jsx-runtime";import*as t from"./Box.js";function s(s){let{children:c,titleStyle:o,titleSubtext:i,title:l,textStyle:n,style:r}=s;return(0,e.jsxs)(t.Box,{style:r,children:[(0,e.jsxs)(t.Box,{className:"Section__title",style:o,children:[(0,e.jsx)(t.Box,{className:"Section__titleText",style:n,children:l}),(0,e.jsx)("div",{className:"Section__buttons",children:i})," "]}),(0,e.jsx)(t.Box,{className:"Section__rest",children:(0,e.jsx)(t.Box,{className:"Section__content",children:c})})]})}export{s as StyleableSection};

package/dist/components/Table.d.ts

@@ -1,4 +1,4 @@
-import { BoxProps } from './Box';
+import type { BoxProps } from './Box';
 type Props = Partial<{
     /** Collapses table to the smallest possible size. */
     collapsing: boolean;