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

React component library

import { jsxs as X, jsx as x } from "react/jsx-runtime";
import { forwardRef as q, useRef as H, useState as O, useEffect as J, useCallback as L } from "react";
import { d as Q } from "./index-Dt62UGku.js";
import { s } from "./emotion-styled.browser.esm-DfbrHHed.js";
import { e as c, c as t, b as Y, f as Z, i as F, d as v } from "./utils-BUdHa0nB.js";
import { u as ee } from "./emotion-element-f0de968e.browser.esm-CkCiQliQ.js";
const ae = s.div`
  display: flex;
  align-items: center;

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

  ${(e) => e.focused && e.readOnly !== !0 ? Z(e.theme) : ""}
  /* ${(e) => e.disabled === !0 ? F(e.theme) : ""} */
  ${(e) => e.disabled === !0 && `background-color: ${t(
  e.theme,
  "Input",
  e.color,
  "disabled",
  "background",
  "backgroundOpacity"
)};
        color: ${(l) => t(
  l.theme,
  "Input",
  l.color,
  "disabled",
  "text"
)};`}
`, T = s.span`
  padding: 0 12px;
  color: ${(e) => t(
  e.theme,
  "Input",
  e.focused === !0 ? "primary" : e.color,
  "enabled",
  "prefix"
)};
`, te = s(T)``, le = s.input`
  background: none;
  border: none;
  outline: none;
  padding-top: 0.625rem;
  padding-bottom: 0.625rem;
  width: 100%;

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

  &:read-only {
    cursor: default;
  }

  &:disabled {
    /* ${(e) => F(e.theme)} */
    ${(e) => `background-color: ${t(
  e.theme,
  "Input",
  e.color,
  "disabled",
  "background",
  "backgroundOpacity"
)};
        color: ${(l) => t(
  l.theme,
  "Input",
  l.color,
  "disabled",
  "text"
)};`}
    background: none;
  }
`, fe = q((e, l) => {
  const {
    disabled: I,
    readOnly: k,
    debounceTime: w = 0,
    step: _ = 1,
    min: A = Number.MIN_SAFE_INTEGER,
    max: B = Number.MAX_SAFE_INTEGER,
    prefix: m,
    suffix: h,
    placeholder: W,
    value: r,
    defaultValue: p,
    //----------------
    onChange: o,
    onBlur: f,
    onFocus: b,
    onKeyDown: g,
    maxDecimalPlaces: C,
    //----------------
    className: j = "",
    style: G = {},
    size: S = "small",
    color: d = "primary",
    ...K
  } = e, n = ee(), i = H(r || p || ""), [M, N] = O(r || p || ""), [y, V] = O(!1);
  J(() => {
    r != null && (i.current = r, N(i.current));
  }, [r]);
  const P = L(
    Q((a, u) => U(a, u), w),
    [o]
  ), U = (a, u) => {
    o && (o == null || o(a, u));
  };
  return /* @__PURE__ */ X(
    ae,
    {
      style: G,
      className: j,
      theme: n,
      color: d,
      size: S,
      focused: y,
      disabled: I,
      readOnly: k,
      children: [
        m && /* @__PURE__ */ x(
          T,
          {
            theme: n,
            color: d,
            focused: y,
            className: "lnc-input-prefix",
            children: m
          }
        ),
        /* @__PURE__ */ x(
          le,
          {
            ref: l,
            type: "number",
            theme: n,
            color: d,
            size: S,
            placeholder: W,
            prefix: m,
            suffix: h,
            disabled: I,
            readOnly: k,
            step: _,
            min: A,
            max: B,
            value: M,
            onFocus: (a) => {
              V(!0), b == null || b(a);
            },
            onBlur: (a) => {
              V(!1), f == null || f(a);
            },
            onChange: (a) => {
              i.current = a.target.value, N(i.current), P(a, a.target.value);
            },
            onKeyDown: (a) => {
              var u, z, E, R, D;
              if (((z = (u = a == null ? void 0 : a.target) == null ? void 0 : u.value) == null ? void 0 : z.length) > 0 && (a.key === "+" || a.key === "-") && a.preventDefault(), ((E = a == null ? void 0 : a.target) == null ? void 0 : E.value) === "" && (a.key === "+" || a.key === "-") && (a.target.value = a.key), (R = a == null ? void 0 : a.target) != null && R.value.includes(".") && C) {
                const $ = (D = a == null ? void 0 : a.target) == null ? void 0 : D.value.split(".")[1];
                ($ == null ? void 0 : $.length) >= C && a.preventDefault();
              }
              g == null || g(a);
            },
            ...K
          }
        ),
        h && /* @__PURE__ */ x(
          te,
          {
            theme: n,
            color: d,
            focused: y,
            className: "lnc-input-suffix",
            children: h
          }
        )
      ]
    }
  );
});
export {
  fe as default
};