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

React component library

import { jsxs as c, jsx as b } from "react/jsx-runtime";
import { forwardRef as u, isValidElement as f, cloneElement as P } from "react";
import { s as t } from "./emotion-styled.browser.esm-DfbrHHed.js";
import { c as a, d as x } from "./utils-BUdHa0nB.js";
import { u as $ } from "./emotion-element-f0de968e.browser.esm-CkCiQliQ.js";
const w = t.div`
  width: 100%;
  position: relative;
  background-color: ${(e) => a(
  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;
`, y = t.div`
  position: relative;
  height: 100%;
  width: ${(e) => e.progressPercentage + "%"};
  background-color: ${(e) => a(
  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%);
  }
`, z = t.label`
  ${(e) => x(e.theme, "Progress", e.size, "enabled")};
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: ${(e) => a(e.theme, "Progress", e.color, "enabled", "text")};
`, R = u((e, v) => {
  const {
    showLabel: i = !1,
    progressPercentage: s = 0,
    className: m = "",
    style: d = {},
    size: l = "small",
    color: g = "primary",
    progressBarEndComponent: r,
    ...p
  } = e, o = $(), h = () => {
    var n;
    if (f(r))
      return P(r, {
        className: `progress-icon ${(n = r == null ? void 0 : r.props) == null ? void 0 : n.className}`
      });
  };
  return /* @__PURE__ */ c(
    w,
    {
      style: d,
      className: "lnc-ui-progress " + m,
      theme: o,
      size: l,
      showLabel: i,
      progressPercentage: s,
      ...p,
      children: [
        /* @__PURE__ */ b(
          y,
          {
            progressPercentage: s,
            theme: o,
            color: g,
            children: r !== null && h()
          }
        ),
        i && /* @__PURE__ */ c(z, { theme: o, size: l, children: [
          s,
          "%"
        ] })
      ]
    }
  );
});
export {
  R as default
};