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

React component library

"use strict";const d=require("react/jsx-runtime"),t=require("./index-BPVoEhTF.cjs"),s=require("react"),_=require("./index-DaiUAQVF.cjs"),c=require("./emotion-styled.browser.esm-Cle7tAM9.cjs"),n=require("./utils-NZLCh-J5.cjs"),B=require("./emotion-element-f0de968e.browser.esm-B7k6i6lC.cjs"),D=c.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=c.newStyled.span`
  padding: 0 12px;
  color: ${e=>n.getColorRgbaValue(e.theme,"Input",e.focused===!0?"primary":e.color,"enabled","prefix")};
`,E=c.newStyled(S)``,A=c.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;
  }
`,$=s.forwardRef((e,C)=>{const{disabled:b,readOnly:f,defaultValue:V,value:o,debounceTime:I=0,type:z="text",placeholder:O,tabIndex:R,prefix:p,suffix:g,onChange:l,onBlur:m,onFocus:y,className:w="",style:q={},size:x="small",color:a="primary",...v}=e,i=B.useTheme(),[j,T]=s.useState(o||V||""),[u,P]=s.useState(!1);s.useEffect(()=>{o!=null&&T(o)},[o]);const W=s.useCallback(_.debounce((r,h)=>k(r,h),I),[l]),k=(r,h)=>{l&&(l==null||l(r,h))},U=r=>{T(r.target.value),W(r,r.target.value)},F=r=>{P(!0),y==null||y(r)},N=r=>{P(!1),m==null||m(r)};return d.jsxs(D,{style:q,className:w,theme:i,color:a,size:x,focused:u,disabled:b,readOnly:f,children:[p&&d.jsx(S,{theme:i,color:a,focused:u,className:"lnc-input-prefix",children:p}),d.jsx(A,{ref:C,type:z,theme:i,color:a,size:x,placeholder:O,prefix:p,suffix:g,disabled:b,readOnly:f,focused:u,onFocus:F,onBlur:N,onChange:U,tabIndex:R,value:j,...v}),g&&d.jsx(E,{theme:i,color:a,focused:u,className:"lnc-input-suffix",children:g})]})});$.propTypes={id:t.PropTypes.string,defaultValue:t.PropTypes.string,value:t.PropTypes.string,disabled:t.PropTypes.bool,readOnly:t.PropTypes.bool,debounceTime:t.PropTypes.number,placeholder:t.PropTypes.string,type:t.PropTypes.oneOf(["text","email"]),tabIndex:t.PropTypes.number,prefix:t.PropTypes.oneOfType([t.PropTypes.string,t.PropTypes.element]),suffix:t.PropTypes.oneOfType([t.PropTypes.string,t.PropTypes.element]),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=$;