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

React component library

"use strict";const a=require("react/jsx-runtime"),i=require("react"),r=require("./index-BPVoEhTF.cjs"),l=require("./emotion-styled.browser.esm-Cle7tAM9.cjs"),o=require("./utils-NZLCh-J5.cjs"),P=require("./emotion-element-f0de968e.browser.esm-B7k6i6lC.cjs"),f=l.newStyled.div`
  width: 100%;
  position: relative;
  background-color: ${e=>o.getColorRgbaValue(e.theme,"Progress",e.color,"enabled","unfilled")};
  height: ${e=>e.theme.components.Progress.default.enabled.sizes[e.size]};
  border-radius: 5px;
  animation: progres 4s infinite linear;
`,x=l.newStyled.div`
  position: relative;
  height: 100%;
  width: ${e=>e.progressPercentage+"%"};
  background-color: ${e=>o.getColorRgbaValue(e.theme,"Progress",e.color,"enabled","background")};
  position: absolute;
  border-radius: ${e=>e.progressPercentage==100?"5px":"5px 0px 0px 5px"};
  transition: width 1s cubic-bezier(0.4, 0, 0.2, 1);

  & .progress-icon {
    position: absolute;
    right: 0;
    top: 50%;
    transform: translate(50%, -50%);
  }
`,w=l.newStyled.label`
  ${e=>o.getComponentTypographyCss(e.theme,"Progress",e.size,"enabled")};
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: ${e=>o.getColorRgbaValue(e.theme,"Progress",e.color,"enabled","text")};
`,d=i.forwardRef((e,T)=>{const{id:$="",showLabel:c=!1,progressPercentage:t=0,className:m="",style:u={},onChange:C=()=>{},size:g="small",color:b="primary",progressBarEndComponent:s,...h}=e,n=P.useTheme(),y=()=>{var p;if(i.isValidElement(s))return i.cloneElement(s,{className:`progress-icon ${(p=s==null?void 0:s.props)==null?void 0:p.className}`})};return a.jsxs(f,{style:u,className:"lnc-ui-progress "+m,theme:n,size:g,showLabel:c,progressPercentage:t,...h,children:[a.jsx(x,{progressPercentage:t,theme:n,color:b,children:s!==null&&y()}),c&&a.jsxs(w,{theme:n,size:g,children:[t,"%"]})]})});d.propTypes={id:r.PropTypes.string,showLabel:r.PropTypes.bool,progressPercentage:r.PropTypes.number,onChange:r.PropTypes.func,className:r.PropTypes.string,style:r.PropTypes.object,size:r.PropTypes.oneOf(["small","medium","large"]),color:r.PropTypes.oneOf(["primary","secondary","success","danger","warning","disabled","information","neutral","gray"]),progressBarEndComponent:r.PropTypes.any};module.exports=d;