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

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

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