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

React component library

"use strict";const l=require("react/jsx-runtime"),n=require("react"),i=require("./emotion-styled.browser.esm-DwHBgTPn.cjs"),r=require("./utils-BK6B_Y9X.cjs"),p=require("./emotion-element-f0de968e.browser.esm-B7k6i6lC.cjs"),x=i.styled.div`
  width: 100%;
  position: relative;
  background-color: ${e=>r.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;
`,f=i.styled.div`
  position: relative;
  height: 100%;
  width: ${e=>e.progressPercentage+"%"};
  background-color: ${e=>r.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%);
  }
`,P=i.styled.label`
  ${e=>r.getComponentTypographyCss(e.theme,"Progress",e.size,"enabled")};
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: ${e=>r.getColorRgbaValue(e.theme,"Progress",e.color,"enabled","text")};
`,y=n.forwardRef((e,$)=>{const{showLabel:a=!1,progressPercentage:o=0,className:d="",style:u={},size:c="small",color:m="primary",progressBarEndComponent:s,...b}=e,t=p.useTheme(),h=()=>{var g;if(n.isValidElement(s))return n.cloneElement(s,{className:`progress-icon ${(g=s==null?void 0:s.props)==null?void 0:g.className}`})};return l.jsxs(x,{style:u,className:"lnc-ui-progress "+d,theme:t,size:c,showLabel:a,progressPercentage:o,...b,children:[l.jsx(f,{progressPercentage:o,theme:t,color:m,children:s!==null&&h()}),a&&l.jsxs(P,{theme:t,size:c,children:[o,"%"]})]})});module.exports=y;