tgui-core 1.1.11 → 1.1.13

package/dist/components/RestrictedInput.js

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

package/dist/components/RoundGauge.d.ts

@@ -0,0 +1,53 @@
+import { BoxProps } from './Box';
+
+type Props = {
+    /** The current value of the metric. */
+    value: number;
+} & Partial<{
+    /** When provided, will cause an alert symbol on the gauge to begin flashing in the color upon which the needle currently rests, as defined in `ranges`. */
+    alertAfter: number;
+    /** As with alertAfter, but alerts below a value. If both are set, and alertAfter comes earlier, the alert will only flash when the needle is between both values. Otherwise, the alert will flash when on the active side of either threshold. */
+    alertBefore: number;
+    /** CSS style. */
+    className: string;
+    /** When provided, will be used to format the value of the metric for display. */
+    format: (value: number) => string;
+    /** The upper bound of the gauge. */
+    maxValue: number;
+    /** The lower bound of the gauge. */
+    minValue: number;
+    /** Provide regions of the gauge to color between two specified values of the metric. */
+    ranges: Record<string, [number, number]>;
+    /** When provided scales the gauge. */
+    size: number;
+    /** Custom css */
+    style: React.CSSProperties;
+}> & BoxProps;
+/**
+ * ## RoundGauge
+ * The RoundGauge component provides a visual representation of a single metric, as well as being capable of showing
+ * informational or cautionary boundaries related to that metric.
+ *
+ * @example
+ * ```tsx
+ * <RoundGauge
+ *  size={1.75}
+ *  value={tankPressure}
+ *  minValue={0}
+ *  maxValue={pressureLimit}
+ *  alertAfter={pressureLimit * 0.7}
+ *  ranges={{
+ *     good: [0, pressureLimit * 0.7],
+ *     average: [pressureLimit * 0.7, pressureLimit * 0.85],
+ *     bad: [pressureLimit * 0.85, pressureLimit],
+ *   }}
+ *   format={formatPressure}
+ * />
+ * ```
+ *
+ * The alert on the gauge is optional, and will only be shown if the `alertAfter` prop is defined. When defined, the alert
+ * will begin to flash the respective color upon which the needle currently rests, as defined in the `ranges` prop.
+ *
+ */
+export declare function RoundGauge(props: Props): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/components/RoundGauge.js

@@ -0,0 +1,147 @@
+import { jsxs as k, jsx as _ } from "react/jsx-runtime";
+import { scale as d, keyOfMatchingRange as M, clamp01 as N } from "../common/math.js";
+import { classes as u } from "../common/react.js";
+import { AnimatedNumber as A } from "./AnimatedNumber.js";
+import { Box as B, computeBoxClassName as G, computeBoxProps as j } from "./Box.js";
+import '../assets/RoundGauge.css';const F = "_roundGauge_gktag_17", L = "_ringTrack_gktag_25", T = "_ringFill_gktag_33", V = "_needle_gktag_41", O = "_needleLine_gktag_46", R = "_needleMiddle_gktag_47", Z = "_alert_gktag_51", z = "_max_gktag_59", P = "_color__black_gktag_63", S = "_color__white_gktag_67", $ = "_color__red_gktag_71", D = "_color__orange_gktag_75", E = "_color__yellow_gktag_79", I = "_color__olive_gktag_83", q = "_color__green_gktag_87", H = "_color__teal_gktag_91", J = "_color__blue_gktag_95", K = "_color__violet_gktag_99", Q = "_color__purple_gktag_103", U = "_color__pink_gktag_107", W = "_color__brown_gktag_111", X = "_color__grey_gktag_115", Y = "_color__good_gktag_123", __ = "_color__average_gktag_127", e_ = "_color__bad_gktag_131", l_ = "_color__label_gktag_135", o_ = "_alert__black_gktag_139", r_ = "_alertAnim_gktag_1", t_ = "_alert__white_gktag_145", a_ = "_alert__red_gktag_151", c_ = "_alert__orange_gktag_157", g_ = "_alert__yellow_gktag_163", n_ = "_alert__olive_gktag_169", s_ = "_alert__green_gktag_175", i_ = "_alert__teal_gktag_181", k_ = "_alert__blue_gktag_187", d_ = "_alert__violet_gktag_193", u_ = "_alert__purple_gktag_199", m_ = "_alert__pink_gktag_205", p_ = "_alert__brown_gktag_211", b_ = "_alert__grey_gktag_217", y_ = "_alert__good_gktag_229", h_ = "_alert__average_gktag_235", f_ = "_alert__bad_gktag_241", v_ = "_alert__label_gktag_247", e = {
+  roundGauge: F,
+  ringTrack: L,
+  ringFill: T,
+  needle: V,
+  needleLine: O,
+  needleMiddle: R,
+  alert: Z,
+  max: z,
+  color__black: P,
+  color__white: S,
+  color__red: $,
+  color__orange: D,
+  color__yellow: E,
+  color__olive: I,
+  color__green: q,
+  color__teal: H,
+  color__blue: J,
+  color__violet: K,
+  color__purple: Q,
+  color__pink: U,
+  color__brown: W,
+  color__grey: X,
+  "color__light-grey": "_color__light-grey_gktag_119",
+  color__good: Y,
+  color__average: __,
+  color__bad: e_,
+  color__label: l_,
+  alert__black: o_,
+  alertAnim: r_,
+  alert__white: t_,
+  alert__red: a_,
+  alert__orange: c_,
+  alert__yellow: g_,
+  alert__olive: n_,
+  alert__green: s_,
+  alert__teal: i_,
+  alert__blue: k_,
+  alert__violet: d_,
+  alert__purple: u_,
+  alert__pink: m_,
+  alert__brown: p_,
+  alert__grey: b_,
+  "alert__light-grey": "_alert__light-grey_gktag_223",
+  alert__good: y_,
+  alert__average: h_,
+  alert__bad: f_,
+  alert__label: v_
+};
+function A_(y) {
+  const {
+    alertAfter: o,
+    alertBefore: r,
+    className: h,
+    format: f,
+    maxValue: n = 1,
+    minValue: s = 1,
+    ranges: a,
+    size: v = 1,
+    style: w,
+    value: l,
+    ...m
+  } = y, C = d(l, s, n), p = N(C), c = a ? {} : { primary: [0, 1] };
+  a && Object.keys(a).forEach((t) => {
+    const g = a[t];
+    c[t] = [
+      d(g[0], s, n),
+      d(g[1], s, n)
+    ];
+  });
+  function x() {
+    return o && r && l > o && l < r || o && l > o ? !0 : !!(r && l < r);
+  }
+  const b = x() && M(p, c);
+  return /* @__PURE__ */ k(B, { inline: !0, children: [
+    /* @__PURE__ */ _(
+      "div",
+      {
+        className: u([
+          e.roundGauge,
+          h,
+          G(m)
+        ]),
+        ...j({
+          style: {
+            fontSize: v + "em",
+            ...w
+          },
+          ...m
+        }),
+        children: /* @__PURE__ */ k("svg", { viewBox: "0 0 100 50", children: [
+          (o || r) && /* @__PURE__ */ _(
+            "g",
+            {
+              className: u([
+                e.alert,
+                b ? e["alert__" + b] : ""
+              ]),
+              children: /* @__PURE__ */ _("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__ */ _("g", { children: /* @__PURE__ */ _("circle", { className: e.ringTrack, cx: "50", cy: "50", r: "45" }) }),
+          /* @__PURE__ */ _("g", { children: Object.keys(c).map((t, g) => {
+            const i = c[t];
+            return /* @__PURE__ */ _(
+              "circle",
+              {
+                className: u([e.ringFill, e["color__" + t]]),
+                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"
+              },
+              g
+            );
+          }) }),
+          /* @__PURE__ */ k(
+            "g",
+            {
+              className: e.needle,
+              transform: `rotate(${p * 180 - 90} 50 50)`,
+              children: [
+                /* @__PURE__ */ _("polygon", { className: e.needleLine, points: "46,50 50,0 54,50" }),
+                /* @__PURE__ */ _("circle", { className: e.needleMiddle, cx: "50", cy: "50", r: "8" })
+              ]
+            }
+          )
+        ] })
+      }
+    ),
+    /* @__PURE__ */ _(A, { value: l, format: f })
+  ] });
+}
+export {
+  A_ as RoundGauge
+};

package/dist/components/Section.d.ts

@@ -0,0 +1,63 @@
+import { ReactNode } from 'react';
+
+/**
+ * ## Section
+ * Section is a surface that displays content and actions on a single topic.
+ *
+ * They should be easy to scan for relevant and actionable information.
+ * Elements, like text and images, should be placed in them in a way that
+ * clearly indicates hierarchy.
+ *
+ * Sections can now be nested, and will automatically font size of the
+ * header according to their nesting level. Previously this was done via `level`
+ * prop, but now it is automatically calculated.
+ *
+ * Section can also be titled to clearly define its purpose.
+ *
+ * ```tsx
+ * <Section title="Cargo">Here you can order supply crates.</Section>
+ * ```
+ *
+ * If you want to have a button on the right side of an section title
+ * (for example, to perform some sort of action), there is a way to do that:
+ *
+ * ```tsx
+ * <Section title="Cargo" buttons={<Button>Send shuttle</Button>}>
+ *   Here you can order supply crates.
+ * </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;
+    /** @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;
+    /** Title of the section. */
+    title: ReactNode;
+}> & Partial<{
+    as: string;
+    children: ReactNode;
+    className: string | import('../common/react').BooleanLike;
+    style: import('react').CSSProperties;
+}> & Partial<Record<"bold" | "italic" | "nowrap" | "fillPositionedParent" | "inline" | "preserveWhitespace", boolean>> & Partial<Record<"fontWeight" | "textAlign" | "bottom" | "fontFamily" | "fontSize" | "height" | "left" | "maxHeight" | "maxWidth" | "minHeight" | "minWidth" | "opacity" | "overflow" | "overflowX" | "overflowY" | "position" | "right" | "top" | "verticalAlign" | "width" | "color" | "backgroundColor" | "align" | "lineHeight" | "m" | "mb" | "ml" | "mr" | "mt" | "mx" | "my" | "p" | "pb" | "pl" | "pr" | "pt" | "px" | "py" | "textColor", string | import('../common/react').BooleanLike>> & Partial<{
+    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>;
+    onMouseMove: import('react').MouseEventHandler<HTMLDivElement>;
+    onMouseOver: import('react').MouseEventHandler<HTMLDivElement>;
+    onMouseUp: import('react').MouseEventHandler<HTMLDivElement>;
+    onScroll: import('react').UIEventHandler<HTMLDivElement>;
+}> & import('react').RefAttributes<HTMLDivElement>>;

package/dist/components/Section.js

@@ -0,0 +1,62 @@
+import { jsxs as r, jsx as s } from "react/jsx-runtime";
+import { forwardRef as S, useEffect as j } from "react";
+import { addScrollableNode as z, removeScrollableNode as B } from "../common/events.js";
+import { classes as H, canRender as m } from "../common/react.js";
+import { s as t } from "../Section.module-CLVHJ4yA.js";
+import { computeBoxClassName as T, computeBoxProps as y } from "./Box.js";
+const q = S(
+  (a, l) => {
+    const {
+      buttons: c,
+      children: u,
+      className: p,
+      fill: N,
+      fitted: b,
+      onScroll: h,
+      scrollable: i,
+      scrollableHorizontal: e,
+      title: n,
+      container_id: v,
+      ...o
+    } = a, x = m(n) || m(c);
+    return j(() => {
+      if (l != null && l.current && !(!i && !e))
+        return z(l.current), () => {
+          l != null && l.current && B(l.current);
+        };
+    }, []), /* @__PURE__ */ r(
+      "div",
+      {
+        id: v || "",
+        className: H([
+          t.section,
+          N && t.fill,
+          b && t.fitted,
+          i && t.scrollable,
+          e && t.scrollableHorizontal,
+          p,
+          T(o)
+        ]),
+        ...y(o),
+        children: [
+          x && /* @__PURE__ */ r("div", { className: t.title, children: [
+            /* @__PURE__ */ s("span", { className: t.titleText, children: n }),
+            /* @__PURE__ */ s("div", { className: t.buttons, children: c })
+          ] }),
+          /* @__PURE__ */ s("div", { className: t.rest, children: /* @__PURE__ */ s(
+            "div",
+            {
+              className: t.content,
+              onScroll: h,
+              ref: l,
+              children: u
+            }
+          ) })
+        ]
+      }
+    );
+  }
+);
+export {
+  q as Section
+};

package/dist/components/Slider.d.ts

@@ -0,0 +1,46 @@
+import { PropsWithChildren } from 'react';
+import { BoxProps } from './Box';
+
+type Props = {
+    /** Highest possible value. */
+    maxValue: number;
+    /** Lowest possible value. */
+    minValue: number;
+    /** Value itself, controls the position of the cursor. */
+    value: number;
+} & Partial<{
+    /** Animates the value if it was changed externally. */
+    animated: boolean;
+    /** Custom css */
+    className: string;
+    /** Color of the slider. */
+    color: string;
+    /** If set, this value will be used to set the fill percentage of the progress bar filler independently of the main value. */
+    fillValue: number;
+    /** Format value using this function before displaying it. */
+    format: (value: number) => string;
+    /** Adjust value by this amount when dragging the input. */
+    onChange: (event: Event, value: number) => void;
+    /** An event, which fires when you release the input, or successfully enter a number. */
+    onDrag: (event: Event, value: number) => void;
+    /** Applies a `color` to the slider based on whether the value lands in the range between `from` and `to`. */
+    ranges: Record<string, [number, number]>;
+    /** Screen distance mouse needs to travel to adjust value by one `step`. */
+    step: number;
+    /** A number in milliseconds, for which the input will hold off from updating while events propagate through the backend. Default is about 250ms, increase it if you still see flickering. */
+    stepPixelSize: number;
+    /** Adjust value by this amount when dragging the input. */
+    suppressFlicker: boolean;
+    /** Unit to display to the right of value. */
+    unit: string;
+}> & BoxProps & PropsWithChildren;
+/**
+ * ## Slider
+ * A horizontal, progressbar-like control which allows dialing
+ * in precise values by dragging it left and right.
+ *
+ * Single click opens an input box to manually type in a number.
+ *
+ */
+export declare function Slider(props: Props): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/components/Slider.js

@@ -0,0 +1,124 @@
+import { jsx as s, jsxs as m } from "react/jsx-runtime";
+import { keyOfMatchingRange as R, clamp01 as t, scale as f } from "../common/math.js";
+import { classes as _ } from "../common/react.js";
+import { s as e } from "../ProgressBar.module-BkAFfFy0.js";
+import { computeBoxClassName as $, computeBoxProps as q } from "./Box.js";
+import { DraggableControl as A } from "./DraggableControl.js";
+import '../assets/Slider.css';const G = "_slider_1assx_9", H = "_cursorOffset_1assx_13", I = "_cursor_1assx_13", J = "_pointer_1assx_30", K = "_popupValue_1assx_41", a = {
+  slider: G,
+  cursorOffset: H,
+  cursor: I,
+  pointer: J,
+  popupValue: K
+};
+function Y(h) {
+  const {
+    // Draggable props (passthrough)
+    animated: v,
+    format: g,
+    maxValue: o,
+    minValue: r,
+    onChange: x,
+    onDrag: V,
+    step: y,
+    stepPixelSize: N,
+    suppressFlicker: C,
+    unit: D,
+    value: O,
+    // Own props
+    className: w,
+    fillValue: l,
+    color: M,
+    ranges: B = {},
+    children: i,
+    ...c
+  } = h, F = i !== void 0;
+  return /* @__PURE__ */ s(
+    A,
+    {
+      dragMatrix: [1, 0],
+      animated: v,
+      format: g,
+      maxValue: o,
+      minValue: r,
+      onChange: x,
+      onDrag: V,
+      step: y,
+      stepPixelSize: N,
+      suppressFlicker: C,
+      unit: D,
+      value: O,
+      children: (S) => {
+        const {
+          displayElement: n,
+          displayValue: p,
+          dragging: j,
+          handleDragStart: k,
+          inputElement: E,
+          value: P
+        } = S, b = l != null, u = f(
+          l ?? p,
+          r,
+          o
+        ), d = f(p, r, o), z = M || R(l ?? P, B) || "default";
+        return /* @__PURE__ */ m(
+          "div",
+          {
+            className: _([
+              a.slider,
+              e.progressBar,
+              e["color__" + z],
+              w,
+              $(c)
+            ]),
+            ...q(c),
+            onMouseDown: k,
+            children: [
+              /* @__PURE__ */ s(
+                "div",
+                {
+                  className: _([
+                    e.fill,
+                    b && e.fill__animated
+                  ]),
+                  style: {
+                    width: t(u) * 100 + "%",
+                    opacity: 0.4
+                  }
+                }
+              ),
+              /* @__PURE__ */ s(
+                "div",
+                {
+                  className: e.fill,
+                  style: {
+                    width: t(Math.min(u, d)) * 100 + "%"
+                  }
+                }
+              ),
+              /* @__PURE__ */ m(
+                "div",
+                {
+                  className: a.cursorOffset,
+                  style: {
+                    width: t(d) * 100 + "%"
+                  },
+                  children: [
+                    /* @__PURE__ */ s("div", { className: a.cursor }),
+                    /* @__PURE__ */ s("div", { className: a.pointer }),
+                    j && /* @__PURE__ */ s("div", { className: a.popupValue, children: n })
+                  ]
+                }
+              ),
+              /* @__PURE__ */ s("div", { className: e.content, children: F ? i : n }),
+              E
+            ]
+          }
+        );
+      }
+    }
+  );
+}
+export {
+  Y as Slider
+};

package/dist/components/Stack.d.ts

@@ -0,0 +1,27 @@
+import { RefObject } from 'react';
+import { FlexItemProps, FlexProps } from './Flex';
+
+type Props = Partial<{
+    /** Fills available space. */
+    fill: boolean;
+    /** Reverses the stack. */
+    reverse: boolean;
+    /** Flex column */
+    vertical: boolean;
+    /** Adds zebra striping to the stack. */
+    zebra: boolean;
+}> & FlexProps;
+export declare function Stack(props: Props): import("react/jsx-runtime").JSX.Element;
+export declare namespace Stack {
+    var Item: typeof StackItem;
+    var Divider: typeof StackDivider;
+}
+type StackItemProps = FlexItemProps & Partial<{
+    innerRef: RefObject<HTMLDivElement>;
+}>;
+declare function StackItem(props: StackItemProps): import("react/jsx-runtime").JSX.Element;
+type StackDividerProps = FlexItemProps & Partial<{
+    hidden: boolean;
+}>;
+declare function StackDivider(props: StackDividerProps): import("react/jsx-runtime").JSX.Element;
+export {};