@konstructio/ui/dist/components/ProgressBar/ProgressBar.js

A set of reusable and customizable React components built for konstruct.io

import { jsxs as i, jsx as e } from "react/jsx-runtime";
import { cn as s } from "../../utils/index.js";
import { progressBarProgress as f, progressBarVariants as N } from "./ProgressBar.variants.js";
const j = ({
  backgroundBarClassName: t,
  label: r,
  labelClassName: o,
  labelWrapperClassName: l,
  percent: a,
  percentClassName: n,
  progressBarClassName: d,
  status: m,
  theme: c,
  wrapperClassName: h
}) => /* @__PURE__ */ i(
  "div",
  {
    className: s("w-full text-inherit", h),
    "data-theme": c,
    children: [
      /* @__PURE__ */ i(
        "div",
        {
          className: s(
            "flex font-semibold",
            {
              "justify-between": r,
              "justify-end": !r
            },
            l
          ),
          children: [
            r ? /* @__PURE__ */ e("label", { className: s(o), children: r }) : null,
            /* @__PURE__ */ i("span", { className: s(n), children: [
              a,
              "%"
            ] })
          ]
        }
      ),
      /* @__PURE__ */ e(
        "div",
        {
          className: s(N({ className: t })),
          children: /* @__PURE__ */ e(
            "div",
            {
              className: s(
                f({ status: m, className: d }),
                a > 0 && a < 99 ? "transition-width duration-500" : "transition-colors duration-0"
              ),
              style: { width: `${a}%` }
            }
          )
        }
      )
    ]
  }
);
export {
  j as ProgressBar
};