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

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

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