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

React component library

import { jsxs as A, jsx as g } from "react/jsx-runtime";
import { P as n } from "./index-S5Cd7WrG.js";
import { forwardRef as P, useState as C, useEffect as W, useCallback as G } from "react";
import { d as M } from "./index-CkWvbrVT.js";
import { n as i } from "./emotion-styled.browser.esm-CjCaF13H.js";
import { d, b as a, a as U, e as D, h as S, c as X } from "./utils-DtRLzzTZ.js";
import { u as q } from "./emotion-element-f0de968e.browser.esm-CkCiQliQ.js";
const H = i.div`
  display: flex;
  align-items: center;

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

  ${(e) => e.focused && e.readOnly !== !0 ? D(e.theme) : ""}
  ${(e) => e.disabled === !0 ? S(e.theme) : ""}
`, N = i.span`
  padding: 0 12px;
  color: ${(e) => a(
  e.theme,
  "Input",
  e.focused === !0 ? "primary" : e.color,
  "enabled",
  "prefix"
)};
`, J = i(N)``, K = i.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) => d(e.theme, e.size)};
  max-height: ${(e) => d(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)}
    background: none;
  }
`, L = P((e, T) => {
  const {
    disabled: y,
    readOnly: p,
    debounceTime: O = 0,
    step: V = 1,
    min: z = Number.MIN_SAFE_INTEGER,
    max: v = Number.MAX_SAFE_INTEGER,
    prefix: s,
    suffix: m,
    placeholder: E,
    value: r,
    defaultValue: F,
    //----------------
    onChange: l,
    onBlur: c,
    onFocus: f,
    //----------------
    className: k = "",
    style: R = {},
    size: x = "small",
    color: o = "primary",
    ...w
  } = e, u = q(), [B, $] = C(r || F || ""), [h, I] = C(!1);
  W(() => {
    r != null && $(r);
  }, [r]);
  const _ = G(
    M((t, b) => j(t, b), O),
    [l]
  ), j = (t, b) => {
    l && (l == null || l(t, b));
  };
  return /* @__PURE__ */ A(
    H,
    {
      style: R,
      className: k,
      theme: u,
      color: o,
      size: x,
      focused: h,
      disabled: y,
      readOnly: p,
      children: [
        s && /* @__PURE__ */ g(
          N,
          {
            theme: u,
            color: o,
            focused: h,
            className: "lnc-input-prefix",
            children: s
          }
        ),
        /* @__PURE__ */ g(
          K,
          {
            ref: T,
            type: "number",
            theme: u,
            color: o,
            size: x,
            placeholder: E,
            prefix: s,
            suffix: m,
            disabled: y,
            readOnly: p,
            step: V,
            min: z,
            max: v,
            value: B,
            onFocus: (t) => {
              I(!0), f == null || f(t);
            },
            onBlur: (t) => {
              I(!1), c == null || c(t);
            },
            onChange: (t) => {
              $(t.target.value), _(t, t.target.value);
            },
            ...w
          }
        ),
        m && /* @__PURE__ */ g(
          J,
          {
            theme: u,
            color: o,
            focused: h,
            className: "lnc-input-suffix",
            children: m
          }
        )
      ]
    }
  );
});
L.propTypes = {
  id: n.string,
  value: n.any,
  defaultValue: n.any,
  disabled: n.bool,
  readOnly: n.bool,
  /**
   * Time in miliseconds before onChange event fires after it has been triggered.
   */
  debounceTime: n.number,
  /**
   * The amount that is added to the current value in the input if its incremented using the arrows/spinners.
   */
  step: n.number,
  /**
   * Minimum number value user can input.
   */
  min: n.number,
  /**
   * Maximum number value user can input.
   */
  max: n.number,
  /**
   * Reserved space before input. Intented to be used with plain text or `Icon` component.
   */
  prefix: n.oneOfType([n.string, n.element]),
  /**
   * Reserved space after input. Intented to be used with plain text or `Icon` component.
   */
  suffix: n.oneOfType([n.string, n.element]),
  placeholder: n.string,
  tabIndex: n.number,
  /**
   * `(event, value) => void`
   */
  onChange: n.func,
  /**
   * `(event) => void`
   */
  onBlur: n.func,
  /**
   * `(event) => void`
   */
  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 {
  L as default
};