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