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

React component library

"use strict";const i=require("react/jsx-runtime"),t=require("./index-BPVoEhTF.cjs"),l=require("react"),U=require("./index-DaiUAQVF.cjs"),d=require("./emotion-styled.browser.esm-Cle7tAM9.cjs"),n=require("./utils-NZLCh-J5.cjs"),A=require("./emotion-element-f0de968e.browser.esm-B7k6i6lC.cjs"),B=d.newStyled.div`
  display: flex;
  align-items: center;

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

  ${e=>e.focused&&e.readOnly!==!0?n.getOutlineCss(e.theme):""}
  ${e=>e.disabled===!0?n.getDisabledStateCss(e.theme):""}
`,S=d.newStyled.span`
  padding: 0 12px;
  color: ${e=>n.getColorRgbaValue(e.theme,"Input",e.focused===!0?"primary":e.color,"enabled","prefix")};
`,D=d.newStyled(S)``,G=d.newStyled.input`
  background: none;
  border: none;
  outline: none;
  padding-top: 0.625rem;
  padding-bottom: 0.625rem;
  width: 100%;

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

  &:read-only {
    cursor: default;
  }

  &:disabled {
    ${e=>n.getDisabledStateCss(e.theme)}
    background: none;
  }
`,$=l.forwardRef((e,C)=>{const{disabled:h,readOnly:f,debounceTime:V=0,step:I=1,min:R=Number.MIN_SAFE_INTEGER,max:z=Number.MAX_SAFE_INTEGER,prefix:c,suffix:m,placeholder:N,value:o,defaultValue:w,onChange:s,onBlur:p,onFocus:y,className:O="",style:E={},size:T="small",color:a="primary",..._}=e,u=A.useTheme(),[q,x]=l.useState(o||w||""),[g,P]=l.useState(!1);l.useEffect(()=>{o!=null&&x(o)},[o]);const v=l.useCallback(U.debounce((r,b)=>j(r,b),V),[s]),j=(r,b)=>{s&&(s==null||s(r,b))},F=r=>{x(r.target.value),v(r,r.target.value)},W=r=>{P(!0),y==null||y(r)},k=r=>{P(!1),p==null||p(r)};return i.jsxs(B,{style:E,className:O,theme:u,color:a,size:T,focused:g,disabled:h,readOnly:f,children:[c&&i.jsx(S,{theme:u,color:a,focused:g,className:"lnc-input-prefix",children:c}),i.jsx(G,{ref:C,type:"number",theme:u,color:a,size:T,placeholder:N,prefix:c,suffix:m,disabled:h,readOnly:f,step:I,min:R,max:z,value:q,onFocus:W,onBlur:k,onChange:F,..._}),m&&i.jsx(D,{theme:u,color:a,focused:g,className:"lnc-input-suffix",children:m})]})});$.propTypes={id:t.PropTypes.string,value:t.PropTypes.any,defaultValue:t.PropTypes.any,disabled:t.PropTypes.bool,readOnly:t.PropTypes.bool,debounceTime:t.PropTypes.number,step:t.PropTypes.number,min:t.PropTypes.number,max:t.PropTypes.number,prefix:t.PropTypes.oneOfType([t.PropTypes.string,t.PropTypes.element]),suffix:t.PropTypes.oneOfType([t.PropTypes.string,t.PropTypes.element]),placeholder:t.PropTypes.string,tabIndex:t.PropTypes.number,onChange:t.PropTypes.func,onBlur:t.PropTypes.func,onFocus:t.PropTypes.func,className:t.PropTypes.string,style:t.PropTypes.object,size:t.PropTypes.oneOf(["small","medium","large"]),color:t.PropTypes.oneOf(["primary","secondary","success","danger","warning","information","neutral","gray"])};module.exports=$;