@lanaco/lnc-react-ui/dist/PasswordInput.js

React component library

import { jsxs as q, jsx as u } from "react/jsx-runtime";
import { forwardRef as A, useRef as G, useState as $, useEffect as I, useCallback as H } from "react";
import { P as n } from "./index-S5Cd7WrG.js";
import { d as J } from "./index-CkWvbrVT.js";
import K from "./Icon.js";
import { n as m } from "./emotion-styled.browser.esm-CjCaF13H.js";
import { d as g, b as a, a as M, e as Q, h as O, c as X } from "./utils-DtRLzzTZ.js";
import { u as Y } from "./emotion-element-f0de968e.browser.esm-CkCiQliQ.js";
const Z = m.div`
  display: flex;
  align-items: center;

  min-height: ${(e) => g(e.theme, e.size)};
  max-height: ${(e) => g(e.theme, e.size)};
  background-color: ${(e) => a(
  e.theme,
  "Input",
  e.color,
  "enabled",
  "background"
)};
  border: 1px solid
    ${(e) => a(
  e.theme,
  "Input",
  e.focused === !0 ? "primary" : e.color,
  e.disabled === !0 ? "disabled" : "enabled",
  "border"
)};
  border-radius: ${(e) => M(e.theme, "regular")};

  ${(e) => e.focused && e.readOnly !== !0 ? Q(e.theme) : ""}
  ${(e) => e.disabled === !0 ? O(e.theme) : ""}
`, C = m.span`
  padding: 0 12px;
  color: ${(e) => a(
  e.theme,
  "Input",
  e.focused === !0 ? "primary" : e.color,
  "enabled",
  "prefix"
)};
`, _ = m(C)``, ee = m(C)`
  cursor: pointer;
`, te = m.input`
  background: none;
  border: none;
  outline: none;
  padding-top: 0.625rem;
  padding-bottom: 0.625rem;
  width: 100%;

  ${(e) => X(e.theme, "Input", e.size, "enabled")}
  min-height: ${(e) => g(e.theme, e.size)};
  max-height: ${(e) => g(e.theme, e.size)};
  color: ${(e) => a(
  e.theme,
  "Input",
  e.focused === !0 ? "primary" : e.color,
  "enabled",
  "text"
)};
  caret-color: ${(e) => a(e.theme, "Input", e.color, "enabled", "caret")};
  padding-right: ${(e) => e.suffix ? "0" : "0.75rem"};
  padding-left: ${(e) => e.prefix ? "0" : "0.75rem"};

  &::placeholder {
    color: ${(e) => a(
  e.theme,
  "Input",
  e.color,
  "enabled",
  "placeholder"
)};
  }

  &:read-only {
    cursor: default;
  }

  &:disabled {
    ${(e) => O(e.theme)}
    background: none;
  }
`, ne = A((e, h) => {
  const {
    wrapperRef: T,
    disabled: S,
    readOnly: k,
    debounceTime: V = 0,
    placeholder: B,
    prefix: b,
    suffix: y,
    value: l,
    defaultValue: F,
    //----------------
    onChange: s,
    onBlur: p,
    onFocus: x,
    //----------------
    className: N = "",
    style: P = {},
    size: v = "small",
    color: d = "primary",
    ...R
  } = e, r = G(), c = Y(), [j, z] = $(l || F || "");
  I(() => {
    l != null && z(l);
  }, [l]);
  const [f, L] = $(!0), [i, w] = $(!1);
  I(() => {
    var o;
    const t = ((o = r == null ? void 0 : r.current) == null ? void 0 : o.value) || "";
    r.current.selectionStart = t != null && t.length ? t.length : 0, r.current.selectionEnd = t != null && t.length ? t.length : 0;
  }, [f]), I(() => {
    h != null && (h.current = r.current);
  }, [h, r]);
  const W = H(
    J((t, o) => E(t, o), V),
    [s]
  ), E = (t, o) => {
    s && (s == null || s(t, o));
  }, U = (t) => {
    z(t.target.value), W(t, t.target.value);
  }, D = () => {
    L(!f), r.current.focus();
  };
  return /* @__PURE__ */ q(
    Z,
    {
      ref: T,
      style: P,
      className: N,
      theme: c,
      color: d,
      size: v,
      focused: i,
      disabled: S,
      readOnly: k,
      children: [
        b && /* @__PURE__ */ u(
          C,
          {
            theme: c,
            color: d,
            focused: i,
            className: "lnc-input-prefix",
            children: b
          }
        ),
        /* @__PURE__ */ u(
          te,
          {
            ref: r,
            type: f ? "password" : "text",
            theme: c,
            color: d,
            size: v,
            placeholder: B,
            prefix: b,
            suffix: y,
            disabled: S,
            readOnly: k,
            focused: i,
            onFocus: (t) => {
              w(!0), x == null || x(t);
            },
            onBlur: (t) => {
              w(!1), p == null || p(t);
            },
            onChange: U,
            value: j,
            ...R
          }
        ),
        /* @__PURE__ */ u(
          ee,
          {
            theme: c,
            color: d,
            focused: i,
            onClick: D,
            children: /* @__PURE__ */ u(K, { icon: f ? "eye-slash" : "eye" })
          }
        ),
        y && /* @__PURE__ */ u(
          _,
          {
            theme: c,
            color: d,
            focused: i,
            className: "lnc-input-suffix",
            children: y
          }
        )
      ]
    }
  );
});
ne.propTypes = {
  id: n.string,
  value: n.string,
  defaultValue: n.string,
  disabled: n.bool,
  readOnly: n.bool,
  debounceTime: n.number,
  placeholder: n.string,
  tabIndex: n.number,
  //----------------
  onChange: n.func,
  onBlur: n.func,
  onFocus: n.func,
  //----------------
  className: n.string,
  style: n.object,
  size: n.oneOf(["small", "medium", "large"]),
  color: n.oneOf([
    "primary",
    "secondary",
    "success",
    "danger",
    "warning",
    "information",
    "neutral",
    "gray"
  ])
};
export {
  ne as default
};