@hitachivantara/uikit-react-core/dist/esm/ProgressBar/ProgressBar.js

Core React components for the NEXT Design System.

import { jsx, jsxs } from "react/jsx-runtime";
import { useDefaultProps, clamp } from "@hitachivantara/uikit-react-utils";
import { useClasses } from "./ProgressBar.styles.js";
import { staticClasses } from "./ProgressBar.styles.js";
import { HvTypography } from "../Typography/Typography.js";
const HvProgressBar = (props) => {
  const {
    className,
    classes: classesProp,
    value = 0,
    status = "inProgress",
    labelProps,
    hideLabel,
    ...others
  } = useDefaultProps("HvProgressBar", props);
  const { classes, cx } = useClasses(classesProp);
  const clampedValue = clamp(value, 100);
  return /* @__PURE__ */ jsx(
    "div",
    {
      className: cx(classes.root, classes.progress, className),
      role: "progressbar",
      "aria-valuemin": 0,
      "aria-valuemax": 100,
      "aria-valuenow": clampedValue,
      ...others,
      children: /* @__PURE__ */ jsxs("div", { className: classes.progressContainer, children: [
        !hideLabel && /* @__PURE__ */ jsx(
          HvTypography,
          {
            className: classes.progressBarLabel,
            variant: "caption2",
            style: { width: `${clampedValue}%` },
            ...labelProps,
            children: `${clampedValue}%`
          }
        ),
        /* @__PURE__ */ jsx("div", { className: classes.progressBarContainer, children: /* @__PURE__ */ jsx(
          "div",
          {
            style: { width: `${clampedValue}%` },
            className: cx(classes.progressBar, {
              [classes.progressDone]: status === "completed",
              [classes.progressError]: status === "error"
            })
          }
        ) })
      ] })
    }
  );
};
export {
  HvProgressBar,
  staticClasses as progressBarClasses
};