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

React component library

import { jsxs as m, jsx as h } from "react/jsx-runtime";
import { forwardRef as f, isValidElement as P, cloneElement as y } from "react";
import { P as r } from "./index-S5Cd7WrG.js";
import { n as t } from "./emotion-styled.browser.esm-CjCaF13H.js";
import { b as n, c as x } from "./utils-DtRLzzTZ.js";
import { u as w } from "./emotion-element-f0de968e.browser.esm-CkCiQliQ.js";
const $ = t.div`
  width: 100%;
  position: relative;
  background-color: ${(e) => n(
  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;
`, z = t.div`
  position: relative;
  height: 100%;
  width: ${(e) => e.progressPercentage + "%"};
  background-color: ${(e) => n(
  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%);
  }
`, C = t.label`
  ${(e) => x(e.theme, "Progress", e.size, "enabled")};
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: ${(e) => n(e.theme, "Progress", e.color, "enabled", "text")};
`, N = f((e, v) => {
  const {
    id: T = "",
    showLabel: i = !1,
    progressPercentage: s = 0,
    className: g = "",
    style: d = {},
    onChange: j = () => {
    },
    size: l = "small",
    color: p = "primary",
    progressBarEndComponent: o,
    ...b
  } = e, a = w(), u = () => {
    var c;
    if (P(o))
      return y(o, {
        className: `progress-icon ${(c = o == null ? void 0 : o.props) == null ? void 0 : c.className}`
      });
  };
  return /* @__PURE__ */ m(
    $,
    {
      style: d,
      className: "lnc-ui-progress " + g,
      theme: a,
      size: l,
      showLabel: i,
      progressPercentage: s,
      ...b,
      children: [
        /* @__PURE__ */ h(
          z,
          {
            progressPercentage: s,
            theme: a,
            color: p,
            children: o !== null && u()
          }
        ),
        i && /* @__PURE__ */ m(C, { theme: a, size: l, children: [
          s,
          "%"
        ] })
      ]
    }
  );
});
N.propTypes = {
  id: r.string,
  showLabel: r.bool,
  progressPercentage: r.number,
  //-------------------------
  onChange: r.func,
  //-------------------------
  className: r.string,
  style: r.object,
  size: r.oneOf(["small", "medium", "large"]),
  color: r.oneOf([
    "primary",
    "secondary",
    "success",
    "danger",
    "warning",
    "disabled",
    "information",
    "neutral",
    "gray"
  ]),
  progressBarEndComponent: r.any
};
export {
  N as default
};