@smwb/ui-react 2.7.0 → 2.9.0

package/dist/headless/components/inputs/slider/slider.js

@@ -1,313 +1,382 @@
-import { jsx as i, jsxs as Q } from "react/jsx-runtime";
+import { jsx as i, jsxs as Z } from "react/jsx-runtime";
 import b from "react";
-import Z from "clsx";
-import { useForkRef as we } from "../../../hooks/useForkRef.js";
-import { useSafeLayoutEffect as he } from "../../../hooks/useSafeLayoutEffect.js";
-import { useEventCallback as ee } from "../../../hooks/useEventCallback.js";
-import { toPercent as K, coordX as ge, coordY as _e, rescale as be } from "./utils.js";
-import { TextFieldWrapper as ye } from "../textField/textFieldWrapper.js";
-import { TextField as Le } from "../textField/textField.js";
-function ke(T, m, _, y) {
-  if (!T)
+import we from "clsx";
+import { useForkRef as Ve } from "../../../hooks/useForkRef.js";
+import { useSafeLayoutEffect as Re } from "../../../hooks/useSafeLayoutEffect.js";
+import { useEventCallback as ye } from "../../../hooks/useEventCallback.js";
+import { useId as Be } from "../../../hooks/useId.js";
+import { toPercent as ee, coordX as Ie, coordY as De, rescale as $e, decimatedClamp as Ae } from "./utils.js";
+import { useHelperText as Fe } from "../../../hooks/useHelperText.js";
+import { TextFieldWrapper as xe } from "../textField/textFieldWrapper.js";
+import { TextField as Ye } from "../textField/textField.js";
+const Me = ["minimum", "maximum"];
+function Ce(I, m, _, k) {
+  if (!I)
     return [];
-  if (Array.isArray(T))
-    return T;
-  const A = y && y > 0 ? y : (_ - m) / 10, w = [];
-  for (let s = m; s <= _ + 1e-9; s += A)
+  if (Array.isArray(I))
+    return I;
+  const M = k && k > 0 ? k : (_ - m) / 10, w = [];
+  for (let s = m; s <= _ + 1e-9; s += M)
     w.push({ value: Math.round(s * 1e6) / 1e6 });
   return w;
 }
-const Me = b.forwardRef(function(m, _) {
+const We = b.forwardRef(function(m, _) {
   const {
-    defaultValue: y,
-    value: A,
+    defaultValue: k,
+    value: M,
     onChange: w,
     min: s = 0,
-    max: a = 100,
-    name: W,
-    disabled: c = !1,
-    className: te,
-    step: d,
+    max: o = 100,
+    name: te,
+    disabled: l = !1,
+    className: ge,
+    step: u,
     label: re,
+    "aria-labelledby": _e,
     helperText: se,
     error: ne,
-    size: j = "medium",
-    color: U = "primary",
-    orientation: H = "horizontal",
-    marks: O,
-    getAriaValueText: F,
-    "aria-label": z,
+    size: ae = "medium",
+    color: K = "primary",
+    orientation: oe = "horizontal",
+    marks: ie,
+    getAriaValueText: H,
+    "aria-label": D,
     // consumed by the dispatcher / not valid DOM attributes — keep them off the span
     /* eslint-disable @typescript-eslint/no-unused-vars */
-    range: ve,
-    variant: Ee,
-    valueField: ae,
-    withTicks: pe,
+    range: Se,
+    variant: ze,
+    valueField: ke,
+    withTicks: le,
     /* eslint-enable @typescript-eslint/no-unused-vars */
-    ...oe
-  } = m, g = H === "vertical", B = (e) => {
-    var t, n, o, N;
-    const r = Array.isArray(e) ? e : [s, a], p = Math.min((t = r[0]) != null ? t : s, (n = r[1]) != null ? n : a), l = Math.max((o = r[0]) != null ? o : s, (N = r[1]) != null ? N : a);
-    return [p, l];
-  }, h = A !== void 0, [ie, le] = b.useState(() => B(y)), u = h ? B(A) : ie, V = b.useRef(null), $ = we(_, V), R = b.useRef(0), D = b.useRef(!1), X = ke(O, s, a, d), v = (e) => {
-    var l;
-    const r = (l = V.current) == null ? void 0 : l.getBoundingClientRect();
+    // The slider sets this on its root too; its own handler calls the caller's first.
+    onMouseDown: R,
+    ...U
+  } = m, F = Fe(se), x = Be(), ce = `${x}-label`, j = (e) => `${x}-${Me[e]}`, ue = _e || (re && !D ? ce : void 0), L = oe === "vertical", O = (e) => {
+    var g, he, B, pe;
+    const r = Array.isArray(e) ? e : [s, o], p = Math.min((g = r[0]) != null ? g : s, (he = r[1]) != null ? he : o), c = Math.max((B = r[0]) != null ? B : s, (pe = r[1]) != null ? pe : o);
+    return [p, c];
+  }, C = M !== void 0, [de, v] = b.useState(() => O(k)), d = C ? O(M) : de, q = b.useRef(null), G = Ve(_, q), z = b.useRef(0), y = b.useRef(!1), $ = Ce(ie, s, o, u), J = (e) => {
+    var c;
+    const r = (c = q.current) == null ? void 0 : c.getBoundingClientRect();
     if (!r)
       return s;
-    if (g) {
-      const t = (typeof e.clientY == "number" ? e.clientY : _e(e)) - r.top;
-      return be(r.height - t, [0, r.height], [s, a], { step: d });
+    if (L) {
+      const g = (typeof e.clientY == "number" ? e.clientY : De(e)) - r.top;
+      return $e(r.height - g, [0, r.height], [s, o], { step: u });
     }
-    const p = (typeof e.clientX == "number" ? e.clientX : ge(e)) - r.left;
-    return be(p, [0, r.width], [s, a], { step: d });
-  }, ce = (e, r) => {
-    const p = Math.min(e[0], e[1]), l = Math.max(e[0], e[1]), t = [Math.max(s, p), Math.min(a, l)];
-    h || le(t), w == null || w(r, t, m);
-  }, k = (e, r) => {
-    const p = R.current, l = [u[0], u[1]];
-    l[p] = Math.max(s, Math.min(a, e)), ce(l, r);
-  }, Y = (e) => {
-    R.current = Math.abs(e - u[0]) <= Math.abs(e - u[1]) ? 0 : 1;
-  }, E = ee((e) => {
-    D.current && (e.preventDefault(), k(v(e), e));
-  }), f = ee(() => {
-    D.current = !1, document.removeEventListener("mousemove", E), document.removeEventListener("mouseup", f), document.removeEventListener("touchmove", E), document.removeEventListener("touchend", f);
-  }), S = (e) => {
-    if (c || e.button !== 0)
+    const p = (typeof e.clientX == "number" ? e.clientX : Ie(e)) - r.left;
+    return $e(p, [0, r.width], [s, o], { step: u });
+  }, me = (e, r) => {
+    const p = Math.min(e[0], e[1]), c = Math.max(e[0], e[1]), g = [Math.max(s, p), Math.min(o, c)];
+    C || v(g), w == null || w(r, g, m);
+  }, f = (e, r) => {
+    const p = z.current, c = [d[0], d[1]];
+    c[p] = Math.max(s, Math.min(o, e)), me(c, r);
+  }, be = (e) => {
+    z.current = Math.abs(e - d[0]) <= Math.abs(e - d[1]) ? 0 : 1;
+  }, E = ye((e) => {
+    y.current && (e.preventDefault(), f(J(e), e));
+  }), S = ye(() => {
+    y.current = !1, document.removeEventListener("mousemove", E), document.removeEventListener("mouseup", S), document.removeEventListener("touchmove", E), document.removeEventListener("touchend", S);
+  }), P = (e) => {
+    if (R == null || R(e), l || e.button !== 0)
       return;
-    const r = v(e);
-    Y(r), D.current = !0, k(r, e), document.addEventListener("mousemove", E), document.addEventListener("mouseup", f);
-  }, P = (e) => {
-    if (c)
+    const r = J(e);
+    be(r), y.current = !0, f(r, e), document.addEventListener("mousemove", E), document.addEventListener("mouseup", S);
+  }, h = (e) => {
+    if (l)
       return;
-    const r = v(e);
-    Y(r), D.current = !0, k(r, e), document.addEventListener("touchmove", E), document.addEventListener("touchend", f);
+    const r = J(e);
+    be(r), y.current = !0, f(r, e), document.addEventListener("touchmove", E), document.addEventListener("touchend", S);
   };
-  he(() => {
-    const e = V.current;
+  Re(() => {
+    const e = q.current;
     if (e)
-      return e.addEventListener("touchstart", P), () => e.removeEventListener("touchstart", P);
+      return e.addEventListener("touchstart", h), () => e.removeEventListener("touchstart", h);
   });
-  const ue = (e) => (r) => {
-    if (c)
+  const N = (e) => (r) => {
+    if (l)
       return;
-    const p = d && d > 0 ? d : 1;
-    let l = null;
-    r.key === "ArrowLeft" || r.key === "ArrowDown" ? l = u[e] - p : r.key === "ArrowRight" || r.key === "ArrowUp" ? l = u[e] + p : r.key === "Home" ? l = s : r.key === "End" && (l = a), l !== null && (r.preventDefault(), R.current = e, k(l, r));
-  }, q = Z(
+    const p = u && u > 0 ? u : 1;
+    let c = null;
+    r.key === "ArrowLeft" || r.key === "ArrowDown" ? c = d[e] - p : r.key === "ArrowRight" || r.key === "ArrowUp" ? c = d[e] + p : r.key === "Home" ? c = s : r.key === "End" && (c = o), c !== null && (r.preventDefault(), z.current = e, f(c, r));
+  }, Q = we(
     "smwb-slider",
     "smwb-slider--range",
-    te,
+    ge,
     {
-      "smwb-slider--disabled": c,
-      "smwb-slider--vertical": g
+      "smwb-slider--disabled": l,
+      "smwb-slider--vertical": L
     },
-    j !== "medium" && `smwb-slider_size-${j}`,
-    U !== "primary" && `smwb-slider_color-${U}`
-  ), L = K(u[0], s, a), M = K(u[1], s, a), G = `${Math.min(L, M)}%`, I = `${Math.abs(M - L)}%`, me = g ? { bottom: `${L}%` } : { left: `${L}%` }, de = g ? { bottom: `${M}%` } : { left: `${M}%` }, x = g ? { bottom: G, height: I } : { left: G, width: I };
-  return /* @__PURE__ */ i(ye, { label: re, helperText: se, disabled: c, error: ne, fullWidth: !0, shrink: !0, children: /* @__PURE__ */ i("div", { className: "smwb-slider__container", children: /* @__PURE__ */ Q("span", { ref: $, onMouseDown: S, className: q, ...oe, children: [
-    X.length > 0 && /* @__PURE__ */ i("span", { className: "smwb-slider__marks", "aria-hidden": "true", children: X.map((e) => {
-      const r = `${K(e.value, s, a)}%`;
-      return /* @__PURE__ */ i("span", { className: "smwb-slider__mark", style: g ? { bottom: r } : { left: r }, children: e.label != null && /* @__PURE__ */ i("span", { className: "smwb-slider__mark-label", children: e.label }) }, e.value);
-    }) }),
-    /* @__PURE__ */ i("span", { className: "smwb-slider__rail" }),
-    /* @__PURE__ */ i("span", { className: "smwb-slider__track", style: x }),
-    [0, 1].map((e) => /* @__PURE__ */ i(
-      "span",
-      {
-        className: Z("smwb-slider__thumb", `smwb-slider__thumb--${e === 0 ? "start" : "end"}`),
-        style: e === 0 ? me : de,
-        children: /* @__PURE__ */ i(
-          "input",
+    ae !== "medium" && `smwb-slider_size-${ae}`,
+    K !== "primary" && `smwb-slider_color-${K}`
+  ), X = ee(d[0], s, o), T = ee(d[1], s, o), A = `${Math.min(X, T)}%`, V = `${Math.abs(T - X)}%`, Le = L ? { bottom: `${X}%` } : { left: `${X}%` }, fe = L ? { bottom: `${T}%` } : { left: `${T}%` }, Ee = L ? { bottom: A, height: V } : { left: A, width: V };
+  return /* @__PURE__ */ i(
+    xe,
+    {
+      label: re,
+      labelId: ce,
+      helperText: se,
+      helperTextId: F.id,
+      disabled: l,
+      error: ne,
+      fullWidth: !0,
+      shrink: !0,
+      children: /* @__PURE__ */ i("div", { className: "smwb-slider__container", children: /* @__PURE__ */ Z("span", { ref: G, onMouseDown: P, className: Q, ...U, children: [
+        $.length > 0 && /* @__PURE__ */ i("span", { className: "smwb-slider__marks", "aria-hidden": "true", children: $.map((e) => {
+          const r = `${ee(e.value, s, o)}%`;
+          return /* @__PURE__ */ i("span", { className: "smwb-slider__mark", style: L ? { bottom: r } : { left: r }, children: e.label != null && /* @__PURE__ */ i("span", { className: "smwb-slider__mark-label", children: e.label }) }, e.value);
+        }) }),
+        /* @__PURE__ */ i("span", { className: "smwb-slider__rail" }),
+        /* @__PURE__ */ i("span", { className: "smwb-slider__track", style: Ee }),
+        [0, 1].map((e) => /* @__PURE__ */ Z(
+          "span",
           {
-            "data-testid": `slider-input-${e}`,
-            className: "smwb-slider__input",
-            type: "range",
-            min: s,
-            max: a,
-            step: d,
-            name: W ? `${W}[${e}]` : void 0,
-            value: u[e],
-            disabled: c,
-            onChange: () => {
-            },
-            onKeyDown: ue(e),
-            tabIndex: c ? -1 : 0,
-            "aria-label": z ? `${z} ${e === 0 ? "minimum" : "maximum"}` : void 0,
-            "aria-orientation": H,
-            "aria-valuenow": u[e],
-            "aria-valuemin": e === 0 ? s : u[0],
-            "aria-valuemax": e === 0 ? u[1] : a,
-            "aria-valuetext": F ? F(u[e]) : void 0,
-            "aria-disabled": c || void 0
-          }
-        )
-      },
-      e
-    ))
-  ] }) }) });
-}), Ne = b.forwardRef(function(m, _) {
+            className: we("smwb-slider__thumb", `smwb-slider__thumb--${e === 0 ? "start" : "end"}`),
+            style: e === 0 ? Le : fe,
+            children: [
+              /* @__PURE__ */ i(
+                "input",
+                {
+                  "data-testid": `slider-input-${e}`,
+                  className: "smwb-slider__input",
+                  type: "range",
+                  min: s,
+                  max: o,
+                  step: u,
+                  name: te ? `${te}[${e}]` : void 0,
+                  value: d[e],
+                  disabled: l,
+                  onChange: () => {
+                  },
+                  onKeyDown: N(e),
+                  tabIndex: l ? -1 : 0,
+                  "aria-label": D ? `${D} ${Me[e]}` : void 0,
+                  "aria-labelledby": ue ? `${ue} ${j(e)}` : void 0,
+                  "aria-describedby": F.describedBy,
+                  "aria-orientation": oe,
+                  "aria-valuenow": d[e],
+                  "aria-valuemin": e === 0 ? s : d[0],
+                  "aria-valuemax": e === 0 ? d[1] : o,
+                  "aria-valuetext": H ? H(d[e]) : void 0,
+                  "aria-disabled": l || void 0
+                }
+              ),
+              ue ? /* @__PURE__ */ i("span", { id: j(e), hidden: !0, children: Me[e] }) : null
+            ]
+          },
+          e
+        ))
+      ] }) })
+    }
+  );
+}), Ke = b.forwardRef(function(m, _) {
   const {
-    defaultValue: y,
-    value: A,
+    defaultValue: k,
+    value: M,
     onChange: w,
     min: s = 0,
-    max: a = 100,
-    name: W,
-    disabled: c = !1,
-    className: te,
-    step: d,
+    max: o = 100,
+    name: te,
+    disabled: l = !1,
+    className: ge,
+    step: u,
     variant: re = "continuous",
-    valueField: se,
-    withTicks: ne,
-    label: j,
-    helperText: U,
-    error: H,
-    size: O = "medium",
-    color: F = "primary",
-    orientation: z = "horizontal",
-    marks: ve,
+    valueField: _e,
+    withTicks: se,
+    label: ne,
+    "aria-labelledby": ae,
+    helperText: K,
+    error: oe,
+    size: ie = "medium",
+    color: H = "primary",
+    orientation: D = "horizontal",
+    marks: Se,
     // `range` is handled by the Slider dispatcher; destructured here to keep it off the DOM
     // eslint-disable-next-line @typescript-eslint/no-unused-vars
-    range: Ee,
-    getAriaValueText: ae,
-    "aria-label": pe,
-    ...oe
-  } = m, g = typeof y == "number" ? y : void 0, B = typeof A == "number" ? A : void 0, h = z === "vertical", [ie, le] = b.useState(g != null ? g : s), [u, V] = b.useState(!1), [$, R] = b.useState(!1), [D, X] = b.useState(!1), v = b.useRef(null), ce = we(_, v), k = b.useRef(!1), Y = B !== void 0, E = re === "discrete", f = Y ? B : ie, S = (t, n) => {
-    t < s || t > a || (Y || le(t), w == null || w(n, t, m));
-  }, P = (t, n) => be(t, [0, n], [s, a], { step: d }), ue = (t) => {
-    if (c || t.button !== 0)
+    range: ze,
+    getAriaValueText: ke,
+    "aria-label": le,
+    // The slider sets these on its root too; its own handlers call the caller's first.
+    onMouseDown: R,
+    onKeyDown: U,
+    onFocus: F,
+    onBlur: x,
+    ...ce
+  } = m, j = Fe(K), L = `${Be()}-label`, O = ae || (ne && !le ? L : void 0), C = typeof k == "number" ? k : void 0, de = typeof M == "number" ? M : void 0, v = D === "vertical", [d, q] = b.useState(C != null ? C : s), [G, z] = b.useState(!1), [y, $] = b.useState(!1), [J, me] = b.useState(!1), f = b.useRef(null), be = Ve(_, f), E = b.useRef(!1), S = de !== void 0, P = re === "discrete", h = S ? de : d, N = (t, n) => {
+    t < s || t > o || (S || q(t), w == null || w(n, t, m));
+  }, Q = (t, n) => $e(t, [0, n], [s, o], { step: u }), X = (t) => {
+    if (R == null || R(t), l || t.button !== 0)
       return;
-    k.current = !0;
-    const n = v.current, o = n == null ? void 0 : n.getBoundingClientRect();
-    if (o) {
-      const N = h ? o.height - (t.clientY - o.top) : t.clientX - o.left, C = P(N, h ? o.height : o.width);
-      $ || R(!0), S(C, t);
+    E.current = !0;
+    const n = f.current, a = n == null ? void 0 : n.getBoundingClientRect();
+    if (a) {
+      const Y = v ? a.height - (t.clientY - a.top) : t.clientX - a.left, W = Q(Y, v ? a.height : a.width);
+      y || $(!0), N(W, t);
     }
-    document.addEventListener("mousemove", L), document.addEventListener("mouseup", M);
-  }, q = (t) => {
-    var N;
-    if (c)
+    document.addEventListener("mousemove", A), document.addEventListener("mouseup", V);
+  }, T = (t) => {
+    var Y;
+    if (l)
       return;
-    k.current = !0;
-    const n = v.current, o = n == null ? void 0 : n.getBoundingClientRect();
-    if (o) {
-      const C = (N = t.changedTouches) == null ? void 0 : N[0], fe = h ? o.height - (C.clientY - o.top) : C.clientX - o.left, J = P(fe, h ? o.height : o.width);
-      $ || R(!0), S(J, t);
+    E.current = !0;
+    const n = f.current, a = n == null ? void 0 : n.getBoundingClientRect();
+    if (a) {
+      const W = (Y = t.changedTouches) == null ? void 0 : Y[0], Ne = v ? a.height - (W.clientY - a.top) : W.clientX - a.left, ve = Q(Ne, v ? a.height : a.width);
+      y || $(!0), N(ve, t);
     }
-    document.addEventListener("touchmove", L), document.addEventListener("touchend", M);
-  }, L = ee((t) => {
-    if (k.current) {
-      const n = v.current, o = n == null ? void 0 : n.getBoundingClientRect();
-      if (o) {
-        const N = ge(t), C = _e(t), fe = h ? o.height - (C - o.top) : N - o.left, J = P(fe, h ? o.height : o.width);
-        if ($ || R(!0), f === J)
+    document.addEventListener("touchmove", A), document.addEventListener("touchend", V);
+  }, A = ye((t) => {
+    if (E.current) {
+      const n = f.current, a = n == null ? void 0 : n.getBoundingClientRect();
+      if (a) {
+        const Y = Ie(t), W = De(t), Ne = v ? a.height - (W - a.top) : Y - a.left, ve = Q(Ne, v ? a.height : a.width);
+        if (y || $(!0), h === ve)
           return;
-        u || V(!0), S(J, t);
+        G || z(!0), N(ve, t);
       }
     }
-  }), M = ee(() => {
-    k.current = !1, u && V(!1), $ && R(!1), G();
-  }), G = () => {
-    document.removeEventListener("mousemove", L), document.removeEventListener("mouseup", M), document.removeEventListener("touchmove", L), document.removeEventListener("touchend", M);
-  }, I = (t) => {
-    !D || c || ((t.key === "ArrowLeft" || t.key === "ArrowDown") && S(f - (d || 1), t), (t.key === "ArrowRight" || t.key === "ArrowUp") && S(f + (d || 1), t));
-  }, me = () => {
-    X(!1), document.removeEventListener("keydown", I);
+  }), V = ye(() => {
+    E.current = !1, G && z(!1), y && $(!1), Le();
+  }), Le = () => {
+    document.removeEventListener("mousemove", A), document.removeEventListener("mouseup", V), document.removeEventListener("touchmove", A), document.removeEventListener("touchend", V);
+  }, fe = (t) => {
+    U == null || U(t), !(!J || l) && ((t.key === "ArrowLeft" || t.key === "ArrowDown") && N(h - (u || 1), t), (t.key === "ArrowRight" || t.key === "ArrowUp") && N(h + (u || 1), t));
+  }, Ee = (t) => {
+    F == null || F(t), me(!0);
+  }, e = (t) => {
+    x == null || x(t), me(!1), document.removeEventListener("keydown", fe);
+  }, [r, p] = b.useState(null), c = (t) => {
+    const n = t.target.value;
+    p(n);
+    const a = Number(n);
+    n.trim() !== "" && Ae(a, s, o, u) === a && N(a, t);
+  }, g = (t) => {
+    if (r === null) return;
+    p(null);
+    const n = Number(r);
+    if (r.trim() === "" || !Number.isFinite(n)) return;
+    const a = Ae(n, s, o, u);
+    a !== h && N(a, t);
   };
-  he(() => {
-    if (v.current)
-      return v.current.addEventListener("touchstart", q), () => {
+  Re(() => {
+    if (f.current)
+      return f.current.addEventListener("touchstart", T), () => {
         var t;
-        (t = v.current) == null || t.removeEventListener("touchstart", q);
+        (t = f.current) == null || t.removeEventListener("touchstart", T);
       };
-  }), he(() => {
+  }), Re(() => {
     var t, n;
-    c && ((t = v.current) != null && t.contains(document.activeElement)) && ((n = document.activeElement) == null || n.blur());
-  }, [c]);
-  const de = Z(
+    l && ((t = f.current) != null && t.contains(document.activeElement)) && ((n = document.activeElement) == null || n.blur());
+  }, [l]);
+  const he = we(
     "smwb-slider",
-    te,
+    ge,
     {
-      "smwb-slider--disabled": c,
-      "smwb-slider--dragging": u,
-      "smwb-slider--discrete": E,
-      "smwb-slider--vertical": h
+      "smwb-slider--disabled": l,
+      "smwb-slider--dragging": G,
+      "smwb-slider--discrete": P,
+      "smwb-slider--vertical": v
     },
-    O !== "medium" && `smwb-slider_size-${O}`,
-    F !== "primary" && `smwb-slider_color-${F}`
-  ), x = `${K(f, s, a)}%`, e = h ? { height: x } : { width: x }, r = h ? { bottom: x } : { left: x }, p = () => Array(Math.round(a / (d || 1)) + 1).fill(1), l = ke(ve, s, a, d);
-  return /* @__PURE__ */ i(ye, { label: j, helperText: U, disabled: c, error: H, fullWidth: !0, shrink: !0, children: /* @__PURE__ */ Q("div", { className: "smwb-slider__container", children: [
-    /* @__PURE__ */ Q(
-      "span",
-      {
-        onKeyDown: I,
-        ref: ce,
-        onMouseDown: ue,
-        className: de,
-        tabIndex: c ? -1 : 0,
-        onFocus: () => X(!0),
-        onBlur: me,
-        ...oe,
-        children: [
-          ne && /* @__PURE__ */ i("span", { className: "smwb-slider__ticks", style: { gap: `${d}` }, children: p().map((t, n) => /* @__PURE__ */ i("span", { className: "smwb-slider__tick" }, n)) }),
-          l.length > 0 && /* @__PURE__ */ i("span", { className: "smwb-slider__marks", "aria-hidden": "true", children: l.map((t) => {
-            const n = `${K(t.value, s, a)}%`;
-            return /* @__PURE__ */ i("span", { className: "smwb-slider__mark", style: h ? { bottom: n } : { left: n }, children: t.label != null && /* @__PURE__ */ i("span", { className: "smwb-slider__mark-label", children: t.label }) }, t.value);
-          }) }),
-          /* @__PURE__ */ i("span", { className: "smwb-slider__rail" }),
-          /* @__PURE__ */ i("span", { className: "smwb-slider__track", style: e }),
-          /* @__PURE__ */ Q(
-            "span",
-            {
-              className: Z("smwb-slider__thumb", {
-                "smwb-slider__thumb--active": $,
-                "smwb-slider__thumb--discrete": E
-              }),
-              style: r,
-              children: [
-                E && /* @__PURE__ */ i("span", { className: "smwb-slider__thumb-tooltip", children: Math.round(f) }),
-                /* @__PURE__ */ i(
-                  "input",
-                  {
-                    "data-testid": "slider-input",
-                    className: "smwb-slider__input",
-                    type: "range",
-                    min: s,
-                    max: a,
-                    name: W,
-                    value: f,
-                    readOnly: !0,
-                    "aria-label": pe,
-                    "aria-orientation": z,
-                    "aria-valuenow": f,
-                    "aria-valuemin": s,
-                    "aria-valuemax": a,
-                    "aria-valuetext": ae ? ae(f) : void 0,
-                    "aria-disabled": c || void 0
-                  }
-                )
-              ]
-            }
-          )
-        ]
-      }
-    ),
-    se && E && /* @__PURE__ */ i(
-      Le,
-      {
-        type: "number",
-        value: f,
-        onChange: (t) => S(+t.target.value, t),
-        variant: "filled",
-        helperText: null
-      }
-    )
-  ] }) });
-}), Ce = b.forwardRef(function(m, _) {
-  return m.range === !0 || Array.isArray(m.value) || Array.isArray(m.defaultValue) ? /* @__PURE__ */ i(Me, { ref: _, ...m }) : /* @__PURE__ */ i(Ne, { ref: _, ...m });
+    ie !== "medium" && `smwb-slider_size-${ie}`,
+    H !== "primary" && `smwb-slider_color-${H}`
+  ), B = `${ee(h, s, o)}%`, pe = v ? { height: B } : { width: B }, Pe = v ? { bottom: B } : { left: B }, Xe = () => Array(Math.round(o / (u || 1)) + 1).fill(1), Te = Ce(Se, s, o, u);
+  return /* @__PURE__ */ i(
+    xe,
+    {
+      label: ne,
+      labelId: L,
+      helperText: K,
+      helperTextId: j.id,
+      disabled: l,
+      error: oe,
+      fullWidth: !0,
+      shrink: !0,
+      children: /* @__PURE__ */ Z("div", { className: "smwb-slider__container", children: [
+        /* @__PURE__ */ Z(
+          "span",
+          {
+            onKeyDown: fe,
+            ref: be,
+            onMouseDown: X,
+            className: he,
+            tabIndex: l ? -1 : 0,
+            onFocus: Ee,
+            onBlur: e,
+            ...ce,
+            children: [
+              se && /* @__PURE__ */ i("span", { className: "smwb-slider__ticks", style: { gap: `${u}` }, children: Xe().map((t, n) => /* @__PURE__ */ i("span", { className: "smwb-slider__tick" }, n)) }),
+              Te.length > 0 && /* @__PURE__ */ i("span", { className: "smwb-slider__marks", "aria-hidden": "true", children: Te.map((t) => {
+                const n = `${ee(t.value, s, o)}%`;
+                return /* @__PURE__ */ i("span", { className: "smwb-slider__mark", style: v ? { bottom: n } : { left: n }, children: t.label != null && /* @__PURE__ */ i("span", { className: "smwb-slider__mark-label", children: t.label }) }, t.value);
+              }) }),
+              /* @__PURE__ */ i("span", { className: "smwb-slider__rail" }),
+              /* @__PURE__ */ i("span", { className: "smwb-slider__track", style: pe }),
+              /* @__PURE__ */ Z(
+                "span",
+                {
+                  className: we("smwb-slider__thumb", {
+                    "smwb-slider__thumb--active": y,
+                    "smwb-slider__thumb--discrete": P
+                  }),
+                  style: Pe,
+                  children: [
+                    P && /* @__PURE__ */ i("span", { className: "smwb-slider__thumb-tooltip", children: Math.round(h) }),
+                    /* @__PURE__ */ i(
+                      "input",
+                      {
+                        "data-testid": "slider-input",
+                        className: "smwb-slider__input",
+                        type: "range",
+                        min: s,
+                        max: o,
+                        name: te,
+                        value: h,
+                        readOnly: !0,
+                        "aria-label": le,
+                        "aria-labelledby": O,
+                        "aria-describedby": j.describedBy,
+                        "aria-orientation": D,
+                        "aria-valuenow": h,
+                        "aria-valuemin": s,
+                        "aria-valuemax": o,
+                        "aria-valuetext": ke ? ke(h) : void 0,
+                        "aria-disabled": l || void 0
+                      }
+                    )
+                  ]
+                }
+              )
+            ]
+          }
+        ),
+        _e && P && /* @__PURE__ */ i(
+          Ye,
+          {
+            type: "number",
+            min: s,
+            max: o,
+            step: u,
+            disabled: l,
+            value: r != null ? r : h,
+            onChange: c,
+            onBlur: g,
+            onKeyDown: (t) => {
+              t.key === "Enter" && g(t);
+            },
+            variant: "filled",
+            helperText: null,
+            "aria-label": le,
+            "aria-labelledby": O
+          }
+        )
+      ] })
+    }
+  );
+}), rt = b.forwardRef(function(m, _) {
+  return m.range === !0 || Array.isArray(m.value) || Array.isArray(m.defaultValue) ? /* @__PURE__ */ i(We, { ref: _, ...m }) : /* @__PURE__ */ i(Ke, { ref: _, ...m });
 });
 export {
-  Ce as Slider
+  rt as Slider
 };
 //# sourceMappingURL=slider.js.map