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

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

"use client";
import { jsxs as D, jsx as n } from "react/jsx-runtime";
import { forwardRef as G, useCallback as p, Fragment as H } from "react";
import J from "classnames";
import { IconValid as K } from "../../internal/Icons/IconValid.js";
import { IconLoader as M } from "../../internal/Icons/IconLoader.js";
import { IconErrorOutline as O } from "../../internal/Icons/IconErrorOutline.js";
import { ValidationState as t } from "../../internal/inputs/ValidationProps.js";
import { useValidation as Q } from "../../internal/inputs/useValidation.js";
import { useRevalidateOnFormChange as U } from "../../internal/inputs/useRevalidateOnFormChange.js";
import { useExternalValidation as W } from "../../internal/inputs/useExternalValidation.js";
import { useInternalId as X } from "../../internal/hooks/useInternalId.js";
import { useInternalRef as Y } from "../../internal/hooks/useInternalRef.js";
import o from "./InputText.module.css.js";
const Z = G(
  ({
    prefix: c,
    className: x,
    type: g = "text",
    placeholder: V = "",
    disabled: N,
    value: b,
    onChange: f = () => {
    },
    onFocus: R = () => {
    },
    onBlur: v = () => {
    },
    onKeyDown: w = () => {
    },
    onKeyUp: y = () => {
    },
    defaultValue: C,
    readOnly: a,
    size: F = 16,
    id: L,
    required: e,
    revalidateOnFormChange: S,
    errorMessage: T = t.error,
    validation: i,
    displayIcon: d = !0,
    ...r
  }, j) => {
    const m = Y(j), B = !!i || !!e || typeof r.maxLength == "number" || typeof r.minLength == "number" || typeof r.pattern == "string", { validateTextual: u, validity: I, setValidity: l } = Q({
      validation: i,
      hasValidators: B
    });
    W({ errorMessage: T, inputRef: m, setValidity: l, validation: i }), U(m, u, S);
    const E = {
      [t.error]: O,
      [t.valid]: K,
      [t.inProgress]: M,
      [t.pristine]: H
    }[I], k = p(
      (s) => {
        f(s);
      },
      [f]
    ), z = p(() => {
      e && l(t.error);
    }, [e, l]), A = p(
      (s) => {
        a && s.target.select();
      },
      [a]
    ), h = X(L);
    return /* @__PURE__ */ D(
      "div",
      {
        className: J(
          o.wrapper,
          { [o.withValidationIcon]: d },
          x
        ),
        children: [
          c && /* @__PURE__ */ n("label", { className: o.prefix, htmlFor: h, children: /* @__PURE__ */ n(c, {}) }),
          /* @__PURE__ */ n(
            "input",
            {
              ...r,
              required: e,
              size: F,
              id: h,
              readOnly: a,
              placeholder: V,
              className: o.input,
              ref: m,
              disabled: N,
              type: g,
              value: b,
              defaultValue: C,
              onChange: k,
              onBlur: v,
              onFocus: R,
              onKeyUp: y,
              onKeyDown: w,
              onInvalid: z,
              onInput: u,
              onSelect: A
            }
          ),
          d && I && /* @__PURE__ */ n(E, { className: o.validation })
        ]
      }
    );
  }
);
Z.displayName = "InputText";
export {
  Z as InputText
};
//# sourceMappingURL=InputText.js.map