koval-ui/dist/src/lib/InputNumber/InputNumber.js

React components collection with minimalistic design. Supports theming, layout, and input validation.

"use client";
import { jsxs as f, jsx as a } from "react/jsx-runtime";
import { forwardRef as q, useCallback as m, useEffect as F, useMemo as M } from "react";
import O from "classnames";
import { useLocalTheme as Y } from "css-vars-hook";
import { IconArrowUp as G } from "../../internal/Icons/IconArrowUp.js";
import { IconArrowDown as H } from "../../internal/Icons/IconArrowDown.js";
import { ValidationState as h } from "../../internal/inputs/ValidationProps.js";
import { useValidation as J } from "../../internal/inputs/useValidation.js";
import { useRevalidateOnFormChange as K } from "../../internal/inputs/useRevalidateOnFormChange.js";
import { useExternalValidation as Q } from "../../internal/inputs/useExternalValidation.js";
import { useValidationIcon as W } from "../../internal/inputs/useValidationIcon.js";
import { useInternalRef as X } from "../../internal/hooks/useInternalRef.js";
import r from "./InputNumber.module.css.js";
const I = "change_spinner", i = new Event(I, { bubbles: !0 }), Z = q(
  ({
    className: b,
    placeholder: E = "",
    disabled: N,
    value: x,
    onChange: o = () => {
    },
    onFocus: V = () => {
    },
    onBlur: w = () => {
    },
    onKeyDown: y = () => {
    },
    onKeyUp: R = () => {
    },
    defaultValue: v,
    size: s = 10,
    step: g,
    revalidateOnFormChange: C,
    errorMessage: T = h.error,
    validation: c,
    displayIcon: p = !0,
    ...t
  }, k) => {
    const D = !!c || !!t.required || typeof t.min == "number" || typeof t.min == "string" || typeof t.max == "number" || typeof t.max == "string", { validateTextual: n, validity: d, setValidity: l } = J({ validation: c, hasValidators: D }), e = X(k);
    K(e, n, C), Q({ errorMessage: T, inputRef: e, setValidity: l, validation: c });
    const L = W(d), S = m(
      (u) => {
        o(u);
      },
      [o]
    );
    F(() => {
      e.current?.addEventListener(I, (u) => {
        o(u);
      });
    }, [e, o]);
    const _ = m(() => {
      l(h.error);
    }, [l]), j = m(() => {
      e.current.stepDown(), e.current.dispatchEvent(i), n(i);
    }, [e, n]), A = m(() => {
      e.current.stepUp(), e.current.dispatchEvent(i), n(i);
    }, [e, n]), { LocalRoot: B } = Y(), U = M(() => ({ size: s }), [s]);
    return /* @__PURE__ */ f(
      B,
      {
        className: O(
          r.wrapper,
          { [r.withValidationIcon]: p },
          b
        ),
        theme: U,
        children: [
          /* @__PURE__ */ f("div", { className: r.spinner, children: [
            /* @__PURE__ */ a(G, { tabIndex: -1, onClick: A }),
            /* @__PURE__ */ a(H, { tabIndex: -1, onClick: j })
          ] }),
          /* @__PURE__ */ a(
            "input",
            {
              ...t,
              step: g,
              size: s,
              type: "number",
              placeholder: E,
              className: r.input,
              ref: e,
              disabled: N,
              value: x,
              defaultValue: v,
              onChange: S,
              onBlur: w,
              onFocus: V,
              onKeyUp: R,
              onKeyDown: y,
              onInvalid: _,
              onInput: n
            }
          ),
          p && d && /* @__PURE__ */ a(L, { className: r.validation })
        ]
      }
    );
  }
);
Z.displayName = "InputNumber";
export {
  Z as InputNumber
};
//# sourceMappingURL=InputNumber.js.map