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

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

"use client";
import { jsxs as q, jsx as a } from "react/jsx-runtime";
import { forwardRef as O, useCallback as o } from "react";
import z from "classnames";
import { ValidationState as G } from "../../internal/inputs/ValidationProps.js";
import { useValidation as H } from "../../internal/inputs/useValidation.js";
import { useRevalidateOnFormChange as J } from "../../internal/inputs/useRevalidateOnFormChange.js";
import { useExternalValidation as L } from "../../internal/inputs/useExternalValidation.js";
import { useValidationIcon as Q } from "../../internal/inputs/useValidationIcon.js";
import { IconNumeric as W } from "../../internal/Icons/IconNumeric.js";
import { useInternalId as X } from "../../internal/hooks/useInternalId.js";
import { useInternalRef as Y } from "../../internal/hooks/useInternalRef.js";
import e from "./InputNumeric.module.css.js";
const Z = {
  natural: "(?:0|[1-9]\\d*)",
  integer: "[+\\-]?(?:0|[1-9]\\d*)",
  floating: "[+\\-]?(?:0|[1-9]\\d*)(?:\\.\\d+)?",
  scientific: "[+\\-]?(?:0|[1-9]\\d*)(?:\\.\\d+)?(?:[eE][+\\-]?\\d+)?"
}, _ = O(
  ({
    className: N,
    placeholder: g = "",
    disabled: h,
    value: x,
    onChange: i = () => {
    },
    onFocus: k = () => {
    },
    onBlur: b = () => {
    },
    onKeyDown: m = () => {
    },
    onKeyUp: p = () => {
    },
    defaultValue: A,
    validation: n,
    errorMessage: R,
    id: D,
    step: l = 1,
    size: S = 12,
    mode: r = "natural",
    revalidateOnFormChange: U,
    displayIcon: d = !0,
    ...f
  }, j) => {
    const s = Y(j), V = X(D), B = !!n || !!f.required, { validateTextual: I, validity: w, setValidity: c } = H({ validation: n, hasValidators: B });
    J(s, I, U), L({ errorMessage: R, inputRef: s, setValidity: c, validation: n });
    const C = Q(w), E = o(
      (t) => {
        i(t);
      },
      [i]
    ), F = o(() => {
      c(G.error);
    }, [c]), K = o(
      (t) => {
        const y = t.target.value;
        if (t.key === "ArrowUp" && r !== "scientific") {
          const u = Number(y || 0) + l;
          t.target.value = u.toString();
        }
        if (t.key === "ArrowDown" && r !== "scientific") {
          const u = Number(y || 0) - l;
          t.target.value = u.toString();
        }
        m(t);
      },
      [r, m, l]
    ), M = o(
      (t) => {
        (t.key === "ArrowDown" || t.key === "ArrowUp") && r !== "scientific" && (t.currentTarget.reportValidity(), i(t)), p(t);
      },
      [r, i, p]
    ), T = Z[r];
    return /* @__PURE__ */ q(
      "div",
      {
        className: z(
          e.wrapper,
          { [e.withValidationIcon]: d },
          N
        ),
        children: [
          /* @__PURE__ */ a("label", { className: e.prefix, htmlFor: V, children: /* @__PURE__ */ a(W, {}) }),
          /* @__PURE__ */ a(
            "input",
            {
              ...f,
              autoComplete: "off",
              ref: s,
              size: S,
              id: V,
              type: "text",
              inputMode: "decimal",
              pattern: T,
              placeholder: g,
              className: e.input,
              disabled: h,
              value: x,
              defaultValue: A,
              onChange: E,
              onBlur: b,
              onFocus: k,
              onKeyUp: M,
              onKeyDown: K,
              onInvalid: F,
              onInput: I
            }
          ),
          d && w && /* @__PURE__ */ a(C, {})
        ]
      }
    );
  }
);
_.displayName = "InputNumeric";
export {
  _ as InputNumeric
};
//# sourceMappingURL=InputNumeric.js.map