@trail-ui/react
Version:
31 lines (29 loc) • 1.8 kB
JavaScript
// src/progress-bar/progress-bar.tsx
import { CheckCircleFilledIcon } from "@trail-ui/icons";
import { progressBar } from "@trail-ui/theme";
import { useMemo } from "react";
import {
Label,
ProgressBar as AriaProgressBar
} from "react-aria-components";
import { Fragment, jsx, jsxs } from "react/jsx-runtime";
function ProgressBar({ label, ref, classNames, ...props }) {
const slots = useMemo(() => progressBar(), []);
const isComplete = props.value === 100;
return /* @__PURE__ */ jsx(AriaProgressBar, { ref, className: slots.base({ class: classNames == null ? void 0 : classNames.base }), ...props, children: ({ percentage, valueText }) => /* @__PURE__ */ jsx(Fragment, { children: /* @__PURE__ */ jsxs("div", { className: slots.labelWrapper({ class: classNames == null ? void 0 : classNames.labelWrapper }), children: [
/* @__PURE__ */ jsx(Label, { children: label }),
/* @__PURE__ */ jsxs("div", { className: slots.progressBarWrapper({ class: classNames == null ? void 0 : classNames.progressBarWrapper }), children: [
/* @__PURE__ */ jsx("div", { className: slots.bar({ class: classNames == null ? void 0 : classNames.bar }), children: /* @__PURE__ */ jsx(
"div",
{
className: isComplete ? slots.completeColor({ class: classNames == null ? void 0 : classNames.completeColor }) : slots.fillColor({ class: classNames == null ? void 0 : classNames.fillColor }),
style: { width: percentage + "%" }
}
) }),
isComplete ? /* @__PURE__ */ jsx(CheckCircleFilledIcon, { height: 16, width: 16, className: "text-green-800" }) : /* @__PURE__ */ jsx("span", { className: slots.valueText({ class: classNames == null ? void 0 : classNames.valueText }), children: valueText })
] })
] }) }) });
}
export {
ProgressBar
};