tgui-core 2.0.5 → 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,4 +1,31 @@
-import { ReactNode } from 'react';
+import { type ReactNode, type RefObject } from 'react';
+import type { BoxProps } from './Box';
+type Props = Partial<{
+    /** Buttons to render aside the section title. */
+    buttons: ReactNode;
+    /** id to assosiate with the parent div element used by this section, for uses with procs like getElementByID */
+    container_id: string;
+    /** If true, fills all available vertical space. */
+    fill: boolean;
+    /** If true, removes all section padding. */
+    fitted: boolean;
+    /** If true, fills the area without forcing height to 100% */
+    flexGrow: boolean;
+    /** If true, removes the section top padding */
+    noTopPadding: boolean;
+    /** @member Callback function for the `scroll` event */
+    onScroll: ((this: GlobalEventHandlers, ev: Event) => any) | null;
+    /** Ref to the section element. */
+    ref: RefObject<HTMLDivElement | null>;
+    /** Shows or hides the scrollbar. */
+    scrollable: boolean;
+    /** Shows or hides the horizontal scrollbar. */
+    scrollableHorizontal: boolean;
+    /** If true, filly the area except for -3rem */
+    stretchContents: boolean;
+    /** Title of the section. */
+    title: ReactNode;
+}> & BoxProps;
 /**
  * ## Section
  * Section is a surface that displays content and actions on a single topic.
@@ -26,46 +53,5 @@ import { ReactNode } from 'react';
  * </Section>
  * ```
  */
-export declare const Section: import('react').ForwardRefExoticComponent<Partial<{
-    /** Buttons to render aside the section title. */
-    buttons: ReactNode;
-    /** id to assosiate with the parent div element used by this section, for uses with procs like getElementByID */
-    container_id: string;
-    /** If true, fills all available vertical space. */
-    fill: boolean;
-    /** If true, removes all section padding. */
-    fitted: boolean;
-    /** If true, fills the area without forcing height to 100% */
-    flexGrow: boolean;
-    /** If true, removes the section top padding */
-    noTopPadding: boolean;
-    /** @member Callback function for the `scroll` event */
-    onScroll: ((this: GlobalEventHandlers, ev: Event) => any) | null;
-    /** Shows or hides the scrollbar. */
-    scrollable: boolean;
-    /** Shows or hides the horizontal scrollbar. */
-    scrollableHorizontal: boolean;
-    /** If true, filly the area except for -3rem */
-    stretchContents: boolean;
-    /** Title of the section. */
-    title: ReactNode;
-}> & Partial<{
-    as: string;
-    children: ReactNode;
-    className: string | import('../common/react').BooleanLike;
-    id: string;
-    style: import('react').CSSProperties;
-    tw: string;
-} & import('../common/ui').BooleanStyleMap & import('../common/ui').StringStyleMap & {
-    onClick: import('react').MouseEventHandler<HTMLDivElement>;
-    onContextMenu: import('react').MouseEventHandler<HTMLDivElement>;
-    onDoubleClick: import('react').MouseEventHandler<HTMLDivElement>;
-    onKeyDown: import('react').KeyboardEventHandler<HTMLDivElement>;
-    onKeyUp: import('react').KeyboardEventHandler<HTMLDivElement>;
-    onMouseDown: import('react').MouseEventHandler<HTMLDivElement>;
-    onMouseLeave: import('react').MouseEventHandler<HTMLDivElement>;
-    onMouseMove: import('react').MouseEventHandler<HTMLDivElement>;
-    onMouseOver: import('react').MouseEventHandler<HTMLDivElement>;
-    onMouseUp: import('react').MouseEventHandler<HTMLDivElement>;
-    onScroll: import('react').UIEventHandler<HTMLDivElement>;
-}> & import('react').RefAttributes<HTMLDivElement>>;
+export declare function Section(props: Props): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/components/Section.js

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