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