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

React component library

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

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

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

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

  &:read-only {
    cursor: default;
  }

  &:disabled {
    /* ${e=>t.getDisabledStateCss(e.theme)} */
    ${e=>`background-color: ${t.getColorRgbaValue(e.theme,"Input",e.color,"disabled","background","backgroundOpacity")};
        color: ${a=>t.getColorRgbaValue(a.theme,"Input",a.color,"disabled","text")};`}
    background: none;
  }
`,A=o.forwardRef((e,a)=>{const{disabled:y,readOnly:$,defaultValue:V,value:n,debounceTime:k=0,type:z="text",placeholder:q,tabIndex:v,prefix:b,suffix:h,onChange:r,onBlur:m,onFocus:f,className:O="",style:W={},size:C="small",color:u="primary",...j}=e,d=B.useTheme(),i=o.useRef(n||V||""),[U,R]=o.useState(n||V||""),[c,I]=o.useState(!1);o.useEffect(()=>{n!=null&&(i.current=n,R(i.current))},[n]);const w=o.useCallback(N.debounce((l,x)=>T(l,x),k),[r]),T=(l,x)=>{r&&(r==null||r(l,x))},_=l=>{i.current=l.target.value,R(i.current),w(l,l.target.value)},p=l=>{I(!0),f==null||f(l)},F=l=>{I(!1),m==null||m(l)};return s.jsxs(D,{style:W,className:O,theme:d,color:u,size:C,focused:c,disabled:y,readOnly:$,children:[b&&s.jsx(S,{theme:d,color:u,focused:c,className:"lnc-input-prefix",children:b}),s.jsx(P,{ref:a,type:z,theme:d,color:u,size:C,placeholder:q,prefix:b,suffix:h,disabled:y,readOnly:$,focused:c,onFocus:p,onBlur:F,onChange:_,tabIndex:v,value:U,...j}),h&&s.jsx(E,{theme:d,color:u,focused:c,className:"lnc-input-suffix",children:h})]})});module.exports=A;