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

React component library

"use strict";const s=require("react/jsx-runtime"),o=require("react"),H=require("./index-Cp66dWMi.cjs"),g=require("./emotion-styled.browser.esm-DwHBgTPn.cjs"),l=require("./utils-BK6B_Y9X.cjs"),J=require("./emotion-element-f0de968e.browser.esm-B7k6i6lC.cjs"),L=g.styled.div`
  display: flex;
  align-items: center;

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

  ${e=>e.focused&&e.readOnly!==!0?l.getOutlineCss(e.theme):""}
  /* ${e=>e.disabled===!0?l.getDisabledStateCss(e.theme):""} */
  ${e=>e.disabled===!0&&`background-color: ${l.getColorRgbaValue(e.theme,"Input",e.color,"disabled","background","backgroundOpacity")};
        color: ${a=>l.getColorRgbaValue(a.theme,"Input",a.color,"disabled","text")};`}
`,q=g.styled.span`
  padding: 0 12px;
  color: ${e=>l.getColorRgbaValue(e.theme,"Input",e.focused===!0?"primary":e.color,"enabled","prefix")};
`,Q=g.styled(q)``,Y=g.styled.input`
  background: none;
  border: none;
  outline: none;
  padding-top: 0.625rem;
  padding-bottom: 0.625rem;
  width: 100%;

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

  &:read-only {
    cursor: default;
  }

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