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

React component library

import { jsxs as U, jsx as x } from "react/jsx-runtime";
import { forwardRef as D, useRef as E, useState as V, useEffect as P, useCallback as q } from "react";
import { d as A } from "./index-Dt62UGku.js";
import { s } from "./emotion-styled.browser.esm-DfbrHHed.js";
import { e as i, c as a, b as G, f as H, i as S, d as J } from "./utils-BUdHa0nB.js";
import { u as K } from "./emotion-element-f0de968e.browser.esm-CkCiQliQ.js";
const L = s.div`
  display: flex;
  align-items: center;

  min-height: ${(e) => i(e.theme, e.size)};
  max-height: ${(e) => i(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) => G(e.theme, "regular")};

  ${(e) => e.focused && e.readOnly !== !0 ? H(e.theme) : ""}
  /* ${(e) => e.disabled === !0 ? S(e.theme) : ""} */
  ${(e) => e.disabled === !0 ? `background-color: ${a(
  e.theme,
  "Input",
  e.color,
  "disabled",
  "background",
  "backgroundOpacity"
)};
        color: ${(n) => a(
  n.theme,
  "Input",
  n.color,
  "disabled",
  "text"
)};` : ""}
`, z = s.span`
  padding: 0 12px;
  color: ${(e) => a(
  e.theme,
  "Input",
  e.focused === !0 ? "primary" : e.color,
  "enabled",
  "prefix"
)};
`, M = s(z)``, Q = s.input`
  background: none;
  border: none;
  outline: none;
  padding-top: 0.625rem;
  padding-bottom: 0.625rem;
  width: 100%;

  ${(e) => J(e.theme, "Input", e.size, "enabled")}
  min-height: ${(e) => i(e.theme, e.size)};
  max-height: ${(e) => i(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) => S(e.theme)} */
    ${(e) => `background-color: ${a(
  e.theme,
  "Input",
  e.color,
  "disabled",
  "background",
  "backgroundOpacity"
)};
        color: ${(n) => a(
  n.theme,
  "Input",
  n.color,
  "disabled",
  "text"
)};`}
    background: none;
  }
`, de = D((e, n) => {
  const {
    disabled: $,
    readOnly: y,
    defaultValue: I,
    value: l,
    debounceTime: v = 0,
    type: O = "text",
    placeholder: R,
    tabIndex: T,
    prefix: m,
    suffix: h,
    //----------------
    onChange: d,
    onBlur: b,
    onFocus: f,
    //----------------
    className: B = "",
    style: F = {},
    size: k = "small",
    color: o = "primary",
    ...N
  } = e, r = K(), u = E(l || I || ""), [W, C] = V(l || I || ""), [c, p] = V(!1);
  P(() => {
    l != null && (u.current = l, C(u.current));
  }, [l]);
  const j = q(
    A((t, g) => w(t, g), v),
    [d]
  ), w = (t, g) => {
    d && (d == null || d(t, g));
  };
  return /* @__PURE__ */ U(
    L,
    {
      style: F,
      className: B,
      theme: r,
      color: o,
      size: k,
      focused: c,
      disabled: $,
      readOnly: y,
      children: [
        m && /* @__PURE__ */ x(
          z,
          {
            theme: r,
            color: o,
            focused: c,
            className: "lnc-input-prefix",
            children: m
          }
        ),
        /* @__PURE__ */ x(
          Q,
          {
            ref: n,
            type: O,
            theme: r,
            color: o,
            size: k,
            placeholder: R,
            prefix: m,
            suffix: h,
            disabled: $,
            readOnly: y,
            focused: c,
            onFocus: (t) => {
              p(!0), f == null || f(t);
            },
            onBlur: (t) => {
              p(!1), b == null || b(t);
            },
            onChange: (t) => {
              u.current = t.target.value, C(u.current), j(t, t.target.value);
            },
            tabIndex: T,
            value: W,
            ...N
          }
        ),
        h && /* @__PURE__ */ x(
          M,
          {
            theme: r,
            color: o,
            focused: c,
            className: "lnc-input-suffix",
            children: h
          }
        )
      ]
    }
  );
});
export {
  de as default
};