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

React component library

import { jsxs as D, jsx as i } from "react/jsx-runtime";
import { forwardRef as q, useRef as A, useState as x, useEffect as k, useCallback as G } from "react";
import { d as H } from "./index-Dt62UGku.js";
import J from "./Icon.js";
import { s as m } from "./emotion-styled.browser.esm-DfbrHHed.js";
import { e as f, c as o, b as K, f as M, i as O, d as Q } from "./utils-BUdHa0nB.js";
import { u as X } from "./emotion-element-f0de968e.browser.esm-CkCiQliQ.js";
const Y = m.div`
  display: flex;
  align-items: center;

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

  ${(e) => e.focused && e.readOnly !== !0 ? M(e.theme) : ""}
  /* ${(e) => e.disabled === !0 ? O(e.theme) : ""} */
  ${(e) => e.disabled === !0 && `background-color: ${o(
  e.theme,
  "Input",
  e.color,
  "disabled",
  "background",
  "backgroundOpacity"
)};
        color: ${(n) => o(
  n.theme,
  "Input",
  n.color,
  "disabled",
  "text"
)};`}
`, I = m.span`
  padding: 0 12px;
  color: ${(e) => o(
  e.theme,
  "Input",
  e.focused === !0 ? "primary" : e.color,
  "enabled",
  "prefix"
)};
`, Z = m(I)``, _ = m(I)`
  cursor: pointer;
`, ee = m.input`
  background: none;
  border: none;
  outline: none;
  padding-top: 0.625rem;
  padding-bottom: 0.625rem;
  width: 100%;

  ${(e) => Q(e.theme, "Input", e.size, "enabled")}
  min-height: ${(e) => f(e.theme, e.size)};
  max-height: ${(e) => f(e.theme, e.size)};
  color: ${(e) => o(
  e.theme,
  "Input",
  e.focused === !0 ? "primary" : e.color,
  "enabled",
  "text"
)};
  caret-color: ${(e) => o(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) => o(
  e.theme,
  "Input",
  e.color,
  "enabled",
  "placeholder"
)};
  }

  &:read-only {
    cursor: default;
  }

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