bj-web-components 0.2.27 → 0.2.28

package/dist/web/InputNumber/BInputNumber.mjs

@@ -1,204 +1,312 @@
-import { jsxs as pe, jsx as o } from "react/jsx-runtime";
-import { forwardRef as Se, useRef as g, useState as z, useCallback as B, useMemo as U } from "react";
+import { jsxs, jsx } from "react/jsx-runtime";
+import { forwardRef, useRef, useState, useCallback, useMemo } from "react";
 /* empty css                   */
-import We from "./hooks/useCursor.mjs";
-import Ye from "./hooks/useFrame.mjs";
-import Ge from "./StepHandler.mjs";
-import { getDecimal as i, getNumberPrecision as de, validateNumber as Je, toFixed as O, getDecupleSteps as ge } from "./utils/decimal.mjs";
-function je(I) {
-  if (I == null) return null;
-  const u = i(I);
-  return u.isInvalidate() ? null : u;
+import useCursor from "./hooks/useCursor.mjs";
+import useFrame from "./hooks/useFrame.mjs";
+import StepHandler from "./StepHandler.mjs";
+import { getDecimal, getNumberPrecision, validateNumber, toFixed, getDecupleSteps } from "./utils/decimal.mjs";
+function getDecimalIfValid(value) {
+  if (value === void 0 || value === null) return null;
+  const decimal = getDecimal(value);
+  return decimal.isInvalidate() ? null : decimal;
 }
-const Ae = Se(function({
-  value: u,
-  defaultValue: A,
-  onChange: x,
-  min: C,
-  max: K,
-  step: c = 1,
-  precision: N,
-  disabled: F = !1,
-  readOnly: $ = !1,
-  placeholder: Ie,
-  autoFocus: Ne,
-  size: T = "middle",
-  status: ee,
-  bordered: ve = !0,
-  controls: k = !0,
-  keyboard: Ve = !0,
-  changeOnWheel: De = !1,
-  changeOnBlur: Re = !0,
-  addonBefore: a,
-  addonAfter: f,
-  prefix: v,
-  suffix: V,
-  formatter: D,
-  parser: R,
-  decimalSeparator: m,
-  onStep: M,
-  onPressEnter: P,
-  onFocus: H,
-  onBlur: S,
-  id: _e,
-  name: he,
-  className: te,
-  style: ne
-}, _) {
-  const W = g(null), [Y, re] = z(!1), s = g(!1), j = g(!1), h = g(!1), G = g(""), [r, ue] = z(() => i(u ?? A)), we = (e) => {
-    u === void 0 && ue(e);
-  }, J = B(
-    (e, t) => {
-      if (!t)
-        return N !== void 0 && N >= 0 ? N : Math.max(de(e), de(c));
+const BInputNumber = forwardRef(function BInputNumber2({
+  value,
+  defaultValue,
+  onChange,
+  min,
+  max,
+  step = 1,
+  precision,
+  disabled = false,
+  readOnly = false,
+  placeholder,
+  autoFocus,
+  size = "middle",
+  status,
+  bordered = true,
+  controls = true,
+  keyboard = true,
+  changeOnWheel = false,
+  changeOnBlur = true,
+  addonBefore,
+  addonAfter,
+  prefix,
+  suffix,
+  formatter,
+  parser,
+  decimalSeparator,
+  onStep,
+  onPressEnter,
+  onFocus,
+  onBlur,
+  id,
+  name,
+  className,
+  style
+}, ref) {
+  const inputRef = useRef(null);
+  const [focused, setFocused] = useState(false);
+  const userTypingRef = useRef(false);
+  const compositionRef = useRef(false);
+  const shiftKeyRef = useRef(false);
+  const inputValueRef = useRef("");
+  const [decimalValue, setDecimalValue] = useState(() => getDecimal(value ?? defaultValue));
+  const setUncontrolledDecimalValue = (next) => {
+    if (value === void 0) setDecimalValue(next);
+  };
+  const getPrecision = useCallback(
+    (numStr, userTyping) => {
+      if (userTyping) return void 0;
+      if (precision !== void 0 && precision >= 0) return precision;
+      return Math.max(getNumberPrecision(numStr), getNumberPrecision(step));
     },
-    [N, c]
-  ), L = B(
-    (e) => {
-      if (R) return R(e);
-      let t = e;
-      return m && (t = t.replace(m, ".")), t.replace(/[^\w.-]+/g, "");
+    [precision, step]
+  );
+  const mergedParser = useCallback(
+    (num) => {
+      if (parser) return parser(num);
+      let parsedStr = num;
+      if (decimalSeparator) parsedStr = parsedStr.replace(decimalSeparator, ".");
+      return parsedStr.replace(/[^\w.-]+/g, "");
     },
-    [R, m]
-  ), ie = B(
-    (e, t) => {
-      if (D) return D(e, { userTyping: !!t, input: G.current });
-      let n = e;
-      if (!t) {
-        const l = J(n, t);
-        Je(n) && (m || (l ?? -1) >= 0) && (n = O(n, m || ".", l));
+    [parser, decimalSeparator]
+  );
+  const mergedFormatter = useCallback(
+    (number, userTyping) => {
+      if (formatter) return formatter(number, { userTyping: !!userTyping, input: inputValueRef.current });
+      let str = number;
+      if (!userTyping) {
+        const mergedPrecision = getPrecision(str, userTyping);
+        if (validateNumber(str) && (decimalSeparator || (mergedPrecision ?? -1) >= 0)) {
+          str = toFixed(str, decimalSeparator || ".", mergedPrecision);
+        }
       }
-      return n;
+      return str;
     },
-    [D, J, m]
-  ), [w, se] = z(() => {
-    const e = A ?? u;
-    return r.isInvalidate() && ["string", "number"].includes(typeof e) ? e == null || Number.isNaN(e) ? "" : String(e) : ie(r.toString(), !1);
+    [formatter, getPrecision, decimalSeparator]
+  );
+  const [inputValue, setInternalInputValue] = useState(() => {
+    const initValue = defaultValue ?? value;
+    if (decimalValue.isInvalidate() && ["string", "number"].includes(typeof initValue)) {
+      return initValue === void 0 || initValue === null || Number.isNaN(initValue) ? "" : String(initValue);
+    }
+    return mergedFormatter(decimalValue.toString(), false);
   });
-  G.current = w;
-  const q = (e, t) => {
-    se(
-      ie(e.isInvalidate() ? e.toString(!1) : e.toString(!t), t)
+  inputValueRef.current = inputValue;
+  const setInputValue = (newValue, userTyping) => {
+    setInternalInputValue(
+      mergedFormatter(newValue.isInvalidate() ? newValue.toString(false) : newValue.toString(!userTyping), userTyping)
     );
-  }, b = U(() => je(K), [K]), p = U(() => je(C), [C]), le = U(() => !b || r.isInvalidate() ? !1 : b.lessEquals(r), [b, r]), oe = U(() => !p || r.isInvalidate() ? !1 : r.lessEquals(p), [p, r]), [qe] = We(W.current, Y), ce = (e) => b && !e.lessEquals(b) ? b : p && !p.lessEquals(e) ? p : null, Q = (e) => !ce(e), y = (e, t) => {
-    let n = e, l = Q(n) || n.isEmpty();
-    if (!n.isEmpty() && !t && (n = ce(n) || n, l = !0), !$ && !F && l) {
-      const d = n.toString(), E = J(d, t);
-      return E !== void 0 && E >= 0 && (n = i(O(d, ".", E)), Q(n) || (n = i(O(d, ".", E, !0)))), n.equals(r) || (we(n), x == null || x(n.isEmpty() ? null : n.toNumber()), u === void 0 && q(n, t)), n;
+  };
+  const maxDecimal = useMemo(() => getDecimalIfValid(max), [max]);
+  const minDecimal = useMemo(() => getDecimalIfValid(min), [min]);
+  const upDisabled = useMemo(() => {
+    if (!maxDecimal || decimalValue.isInvalidate()) return false;
+    return maxDecimal.lessEquals(decimalValue);
+  }, [maxDecimal, decimalValue]);
+  const downDisabled = useMemo(() => {
+    if (!minDecimal || decimalValue.isInvalidate()) return false;
+    return decimalValue.lessEquals(minDecimal);
+  }, [minDecimal, decimalValue]);
+  const [recordCursor] = useCursor(inputRef.current, focused);
+  const getRangeValue = (target) => {
+    if (maxDecimal && !target.lessEquals(maxDecimal)) return maxDecimal;
+    if (minDecimal && !minDecimal.lessEquals(target)) return minDecimal;
+    return null;
+  };
+  const isInRange = (target) => !getRangeValue(target);
+  const triggerValueUpdate = (newValue, userTyping) => {
+    let updateValue = newValue;
+    let isRangeValidate = isInRange(updateValue) || updateValue.isEmpty();
+    if (!updateValue.isEmpty() && !userTyping) {
+      updateValue = getRangeValue(updateValue) || updateValue;
+      isRangeValidate = true;
+    }
+    if (!readOnly && !disabled && isRangeValidate) {
+      const numStr = updateValue.toString();
+      const mergedPrecision = getPrecision(numStr, userTyping);
+      if (mergedPrecision !== void 0 && mergedPrecision >= 0) {
+        updateValue = getDecimal(toFixed(numStr, ".", mergedPrecision));
+        if (!isInRange(updateValue)) {
+          updateValue = getDecimal(toFixed(numStr, ".", mergedPrecision, true));
+        }
+      }
+      if (!updateValue.equals(decimalValue)) {
+        setUncontrolledDecimalValue(updateValue);
+        onChange == null ? void 0 : onChange(updateValue.isEmpty() ? null : updateValue.toNumber());
+        if (value === void 0) setInputValue(updateValue, userTyping);
+      }
+      return updateValue;
     }
-    return r;
-  }, ye = Ye(), X = (e) => {
-    if (qe(), G.current = e, se(e), !j.current) {
-      const t = L(e), n = i(t);
-      n.isNaN() || y(n, !0);
+    return decimalValue;
+  };
+  const onNextFrame = useFrame();
+  const collectInputValue = (inputStr) => {
+    recordCursor();
+    inputValueRef.current = inputStr;
+    setInternalInputValue(inputStr);
+    if (!compositionRef.current) {
+      const finalValue = mergedParser(inputStr);
+      const finalDecimal = getDecimal(finalValue);
+      if (!finalDecimal.isNaN()) triggerValueUpdate(finalDecimal, true);
     }
-    ye(() => {
-      const t = R ? e : e.replace(/。/g, ".");
-      t !== e && X(t);
+    onNextFrame(() => {
+      const nextInputStr = parser ? inputStr : inputStr.replace(/。/g, ".");
+      if (nextInputStr !== inputStr) collectInputValue(nextInputStr);
     });
-  }, Ee = () => {
-    j.current = !0;
-  }, Ue = (e) => {
-    j.current = !1, X(e.target.value);
-  }, xe = (e) => X(e.target.value), Z = (e) => {
-    var d;
-    if (e && le || !e && oe) return;
-    s.current = !1;
-    let t = i(h.current ? ge(c) : c);
-    e || (t = t.negate());
-    const n = (r.isInvalidate() ? i(0) : r).add(t.toString()), l = y(n, !1);
-    M == null || M(l.toNumber(), { offset: h.current ? ge(c) : c, type: e ? "up" : "down" }), (d = W.current) == null || d.focus();
-  }, ae = (e) => {
-    const t = i(L(w));
-    let n;
-    t.isNaN() ? n = y(r, e) : n = y(t, e), u !== void 0 ? q(r, !1) : n.isNaN() || q(n, !1);
-  }, Ce = (e) => {
-    const { key: t, shiftKey: n } = e;
-    s.current = !0, h.current = n, t === "Enter" && (j.current || (s.current = !1), ae(!1), P == null || P(e)), Ve && !j.current && (t === "ArrowUp" || t === "ArrowDown") && (Z(t === "ArrowUp"), e.preventDefault());
-  }, Ke = () => {
-    s.current = !1, h.current = !1;
-  }, Fe = (e) => {
-    re(!0), H == null || H(e);
-  }, $e = (e) => {
-    Re && ae(!1), re(!1), s.current = !1, S == null || S(e);
-  }, fe = g(u);
-  if (fe.current !== u) {
-    fe.current = u;
-    const e = i(u);
-    if (!e.equals(r)) {
-      ue(e);
-      const t = i(L(w));
-      (!e.equals(t) || !s.current || D) && q(e, s.current);
+  };
+  const onCompositionStart = () => {
+    compositionRef.current = true;
+  };
+  const onCompositionEnd = (e) => {
+    compositionRef.current = false;
+    collectInputValue(e.target.value);
+  };
+  const onInternalInput = (e) => collectInputValue(e.target.value);
+  const onInternalStep = (up) => {
+    var _a;
+    if (up && upDisabled || !up && downDisabled) return;
+    userTypingRef.current = false;
+    let stepDecimal = getDecimal(shiftKeyRef.current ? getDecupleSteps(step) : step);
+    if (!up) stepDecimal = stepDecimal.negate();
+    const target = (decimalValue.isInvalidate() ? getDecimal(0) : decimalValue).add(stepDecimal.toString());
+    const updatedValue = triggerValueUpdate(target, false);
+    onStep == null ? void 0 : onStep(updatedValue.toNumber(), { offset: shiftKeyRef.current ? getDecupleSteps(step) : step, type: up ? "up" : "down" });
+    (_a = inputRef.current) == null ? void 0 : _a.focus();
+  };
+  const flushInputValue = (userTyping) => {
+    const parsedValue = getDecimal(mergedParser(inputValue));
+    let formatValue;
+    if (!parsedValue.isNaN()) {
+      formatValue = triggerValueUpdate(parsedValue, userTyping);
+    } else {
+      formatValue = triggerValueUpdate(decimalValue, userTyping);
+    }
+    if (value !== void 0) {
+      setInputValue(decimalValue, false);
+    } else if (!formatValue.isNaN()) {
+      setInputValue(formatValue, false);
+    }
+  };
+  const onKeyDown = (event) => {
+    const { key, shiftKey } = event;
+    userTypingRef.current = true;
+    shiftKeyRef.current = shiftKey;
+    if (key === "Enter") {
+      if (!compositionRef.current) userTypingRef.current = false;
+      flushInputValue(false);
+      onPressEnter == null ? void 0 : onPressEnter(event);
+    }
+    if (!keyboard) return;
+    if (!compositionRef.current && (key === "ArrowUp" || key === "ArrowDown")) {
+      onInternalStep(key === "ArrowUp");
+      event.preventDefault();
+    }
+  };
+  const onKeyUp = () => {
+    userTypingRef.current = false;
+    shiftKeyRef.current = false;
+  };
+  const onInternalFocus = (e) => {
+    setFocused(true);
+    onFocus == null ? void 0 : onFocus(e);
+  };
+  const onInternalBlur = (e) => {
+    if (changeOnBlur) flushInputValue(false);
+    setFocused(false);
+    userTypingRef.current = false;
+    onBlur == null ? void 0 : onBlur(e);
+  };
+  const prevValueRef = useRef(value);
+  if (prevValueRef.current !== value) {
+    prevValueRef.current = value;
+    const newValue = getDecimal(value);
+    if (!newValue.equals(decimalValue)) {
+      setDecimalValue(newValue);
+      const currentParsedValue = getDecimal(mergedParser(inputValue));
+      if (!newValue.equals(currentParsedValue) || !userTypingRef.current || formatter) {
+        setInputValue(newValue, userTypingRef.current);
+      }
     }
   }
-  const ke = (e) => {
-    W.current = e, typeof _ == "function" ? _(e) : _ && (_.current = e);
-  }, me = !!k, Me = typeof k == "object" ? k.icon : void 0, Pe = !r.isInvalidate() && !Q(r), He = [
+  const setRefs = (node) => {
+    inputRef.current = node;
+    if (typeof ref === "function") ref(node);
+    else if (ref) ref.current = node;
+  };
+  const controlsEnabled = !!controls;
+  const controlsIcon = typeof controls === "object" ? controls.icon : void 0;
+  const outOfRange = !decimalValue.isInvalidate() && !isInRange(decimalValue);
+  const rootCls = [
     "bj-input-number",
-    `bj-input-number--${T}`,
-    Y && "bj-input-number--focused",
-    F && "bj-input-number--disabled",
-    $ && "bj-input-number--readonly",
-    !ve && "bj-input-number--borderless",
-    ee && `bj-input-number--${ee}`,
-    Pe && "bj-input-number--out-of-range",
-    me && "bj-input-number--with-controls",
-    a && "bj-input-number--group-left",
-    f && "bj-input-number--group-right"
-  ].filter(Boolean).join(" "), be = /* @__PURE__ */ pe(
+    `bj-input-number--${size}`,
+    focused && "bj-input-number--focused",
+    disabled && "bj-input-number--disabled",
+    readOnly && "bj-input-number--readonly",
+    !bordered && "bj-input-number--borderless",
+    status && `bj-input-number--${status}`,
+    outOfRange && "bj-input-number--out-of-range",
+    controlsEnabled && "bj-input-number--with-controls",
+    addonBefore && "bj-input-number--group-left",
+    addonAfter && "bj-input-number--group-right"
+  ].filter(Boolean).join(" ");
+  const numberBox = /* @__PURE__ */ jsxs(
     "div",
     {
-      className: [He, !(a || f || v || V) && te].filter(Boolean).join(" "),
-      style: a || f || v || V ? void 0 : ne,
-      onKeyDown: Ce,
-      onKeyUp: Ke,
+      className: [rootCls, !(addonBefore || addonAfter || prefix || suffix) && className].filter(Boolean).join(" "),
+      style: !(addonBefore || addonAfter || prefix || suffix) ? style : void 0,
+      onKeyDown,
+      onKeyUp,
       children: [
-        v && /* @__PURE__ */ o("span", { className: "bj-input-number__prefix", children: v }),
-        /* @__PURE__ */ o("div", { className: "bj-input-number__input-wrap", children: /* @__PURE__ */ o(
+        prefix && /* @__PURE__ */ jsx("span", { className: "bj-input-number__prefix", children: prefix }),
+        /* @__PURE__ */ jsx("div", { className: "bj-input-number__input-wrap", children: /* @__PURE__ */ jsx(
           "input",
           {
-            ref: ke,
-            id: _e,
-            name: he,
+            ref: setRefs,
+            id,
+            name,
             className: "bj-input-number__input",
             autoComplete: "off",
             role: "spinbutton",
-            "aria-valuemin": C,
-            "aria-valuemax": K,
-            "aria-valuenow": r.isInvalidate() ? void 0 : r.toNumber(),
-            value: w,
-            placeholder: Ie,
-            disabled: F,
-            readOnly: $,
-            autoFocus: Ne,
-            onChange: xe,
-            onFocus: Fe,
-            onBlur: $e,
-            onCompositionStart: Ee,
-            onCompositionEnd: Ue,
-            onWheel: De ? (e) => {
-              Y && Z(e.deltaY < 0);
+            "aria-valuemin": min,
+            "aria-valuemax": max,
+            "aria-valuenow": decimalValue.isInvalidate() ? void 0 : decimalValue.toNumber(),
+            value: inputValue,
+            placeholder,
+            disabled,
+            readOnly,
+            autoFocus,
+            onChange: onInternalInput,
+            onFocus: onInternalFocus,
+            onBlur: onInternalBlur,
+            onCompositionStart,
+            onCompositionEnd,
+            onWheel: changeOnWheel ? (e) => {
+              if (!focused) return;
+              onInternalStep(e.deltaY < 0);
             } : void 0
           }
         ) }),
-        V && /* @__PURE__ */ o("span", { className: "bj-input-number__suffix", children: V }),
-        me && /* @__PURE__ */ o(Ge, { icon: Me, upDisabled: le, downDisabled: oe, onStep: Z })
+        suffix && /* @__PURE__ */ jsx("span", { className: "bj-input-number__suffix", children: suffix }),
+        controlsEnabled && /* @__PURE__ */ jsx(StepHandler, { icon: controlsIcon, upDisabled, downDisabled, onStep: onInternalStep })
       ]
     }
   );
-  return !a && !f ? be : /* @__PURE__ */ pe(
+  if (!addonBefore && !addonAfter) return numberBox;
+  return /* @__PURE__ */ jsxs(
     "div",
     {
-      className: ["bj-input-number-group", `bj-input-number-group--${T}`, te].filter(Boolean).join(" "),
-      style: ne,
+      className: ["bj-input-number-group", `bj-input-number-group--${size}`, className].filter(Boolean).join(" "),
+      style,
       children: [
-        a && /* @__PURE__ */ o("div", { className: "bj-input-number-group__addon", children: a }),
-        be,
-        f && /* @__PURE__ */ o("div", { className: "bj-input-number-group__addon", children: f })
+        addonBefore && /* @__PURE__ */ jsx("div", { className: "bj-input-number-group__addon", children: addonBefore }),
+        numberBox,
+        addonAfter && /* @__PURE__ */ jsx("div", { className: "bj-input-number-group__addon", children: addonAfter })
       ]
     }
   );
 });
 export {
-  Ae as default
+  BInputNumber as default
 };

package/dist/web/InputNumber/StepHandler.js

@@ -1 +1,69 @@
-"use strict";const e=require("react/jsx-runtime"),a=require("react"),m=600,h=200;function _({className:t}){return e.jsx("svg",{width:"24",height:"24",viewBox:"0 0 24 24",fill:"none",xmlns:"http://www.w3.org/2000/svg",className:t,children:e.jsx("path",{d:"M15.4573 13.6501C15.9047 13.6504 16.129 14.192 15.8128 14.5085L12.3352 17.9851C12.139 18.1811 11.8214 18.1811 11.6253 17.9851L8.14772 14.5085C7.83144 14.192 8.0558 13.6504 8.50319 13.6501H15.4573ZM11.6643 5.98311C11.8606 5.78688 12.179 5.78688 12.3753 5.98311L15.8518 9.45967C16.1683 9.77623 15.944 10.3171 15.4964 10.3171H8.54323C8.09567 10.3171 7.87154 9.77625 8.18776 9.45967L11.6643 5.98311Z",fill:"currentColor"})})}function j({icon:t,upDisabled:o,downDisabled:i,onStep:l}){const u=a.useRef(void 0),s=a.useRef(l);s.current=l;const r=()=>clearTimeout(u.current),c=(n,p)=>{n.preventDefault(),r(),s.current(p);function d(){s.current(p),u.current=setTimeout(d,h)}u.current=setTimeout(d,m)};a.useEffect(()=>r,[]);const b={unselectable:"on",role:"button",onMouseUp:r,onMouseLeave:r};return e.jsxs("div",{className:"bj-input-number__handler-wrap",children:[e.jsx("span",{...b,"aria-label":"Increase Value","aria-disabled":o,className:o?"bj-input-number__handler bj-input-number__handler--up bj-input-number__handler--disabled":"bj-input-number__handler bj-input-number__handler--up",onMouseDown:n=>c(n,!0)}),e.jsx("span",{...b,"aria-label":"Decrease Value","aria-disabled":i,className:i?"bj-input-number__handler bj-input-number__handler--down bj-input-number__handler--disabled":"bj-input-number__handler bj-input-number__handler--down",onMouseDown:n=>c(n,!1)}),t||e.jsxs(e.Fragment,{children:[e.jsx(_,{className:"bj-input-number__handler-icon bj-input-number__handler-icon--up"}),e.jsx(_,{className:"bj-input-number__handler-icon bj-input-number__handler-icon--down"})]})]})}module.exports=j;
+"use strict";
+const jsxRuntime = require("react/jsx-runtime");
+const react = require("react");
+const STEP_DELAY = 600;
+const STEP_INTERVAL = 200;
+function SpinnerIcon({ className }) {
+  return /* @__PURE__ */ jsxRuntime.jsx("svg", { width: "24", height: "24", viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg", className, children: /* @__PURE__ */ jsxRuntime.jsx(
+    "path",
+    {
+      d: "M15.4573 13.6501C15.9047 13.6504 16.129 14.192 15.8128 14.5085L12.3352 17.9851C12.139 18.1811 11.8214 18.1811 11.6253 17.9851L8.14772 14.5085C7.83144 14.192 8.0558 13.6504 8.50319 13.6501H15.4573ZM11.6643 5.98311C11.8606 5.78688 12.179 5.78688 12.3753 5.98311L15.8518 9.45967C16.1683 9.77623 15.944 10.3171 15.4964 10.3171H8.54323C8.09567 10.3171 7.87154 9.77625 8.18776 9.45967L11.6643 5.98311Z",
+      fill: "currentColor"
+    }
+  ) });
+}
+function StepHandler({ icon, upDisabled, downDisabled, onStep }) {
+  const stepTimeoutRef = react.useRef(void 0);
+  const onStepRef = react.useRef(onStep);
+  onStepRef.current = onStep;
+  const onStopStep = () => clearTimeout(stepTimeoutRef.current);
+  const onStepMouseDown = (e, up) => {
+    e.preventDefault();
+    onStopStep();
+    onStepRef.current(up);
+    function loopStep() {
+      onStepRef.current(up);
+      stepTimeoutRef.current = setTimeout(loopStep, STEP_INTERVAL);
+    }
+    stepTimeoutRef.current = setTimeout(loopStep, STEP_DELAY);
+  };
+  react.useEffect(() => onStopStep, []);
+  const sharedProps = {
+    unselectable: "on",
+    role: "button",
+    onMouseUp: onStopStep,
+    onMouseLeave: onStopStep
+  };
+  return (
+    // Click zones come before the icon(s) in DOM order so the icon halves
+    // can be dimmed via a `:hover ~`/`:active ~` sibling selector in CSS —
+    // the icon itself stays `pointer-events: none` and purely visual.
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "bj-input-number__handler-wrap", children: [
+      /* @__PURE__ */ jsxRuntime.jsx(
+        "span",
+        {
+          ...sharedProps,
+          "aria-label": "Increase Value",
+          "aria-disabled": upDisabled,
+          className: upDisabled ? "bj-input-number__handler bj-input-number__handler--up bj-input-number__handler--disabled" : "bj-input-number__handler bj-input-number__handler--up",
+          onMouseDown: (e) => onStepMouseDown(e, true)
+        }
+      ),
+      /* @__PURE__ */ jsxRuntime.jsx(
+        "span",
+        {
+          ...sharedProps,
+          "aria-label": "Decrease Value",
+          "aria-disabled": downDisabled,
+          className: downDisabled ? "bj-input-number__handler bj-input-number__handler--down bj-input-number__handler--disabled" : "bj-input-number__handler bj-input-number__handler--down",
+          onMouseDown: (e) => onStepMouseDown(e, false)
+        }
+      ),
+      icon || /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+        /* @__PURE__ */ jsxRuntime.jsx(SpinnerIcon, { className: "bj-input-number__handler-icon bj-input-number__handler-icon--up" }),
+        /* @__PURE__ */ jsxRuntime.jsx(SpinnerIcon, { className: "bj-input-number__handler-icon bj-input-number__handler-icon--down" })
+      ] })
+    ] })
+  );
+}
+module.exports = StepHandler;