@frontify/fondue
Version:
Design system of Frontify
59 lines (58 loc) • 1.5 kB
JavaScript
import { jsx as r } from "react/jsx-runtime";
import { merge as s } from "../../utilities/merge.es.js";
var l = /* @__PURE__ */ ((e) => (e.Small = "Small", e.Medium = "Medium", e.Large = "Large", e.XLarge = "XLarge", e))(l || {}), n = /* @__PURE__ */ ((e) => (e.Progress = "Progress", e.Success = "Success", e.Error = "Error", e))(n || {});
const w = {
Small: "tw-h-1",
Medium: "tw-h-2",
Large: "tw-h-3",
XLarge: "tw-h-4"
}, o = {
Error: {
outer: "tw-bg-box-negative",
inner: "tw-bg-text-negative"
},
Success: {
outer: "tw-bg-box-positive",
inner: "tw-bg-text-positive"
},
Progress: {
outer: "tw-bg-box-selected",
inner: "tw-bg-text-interactive"
}
}, d = ({
percentage: e = 0,
size: a = "Medium",
state: t = "Progress",
rounded: i = !1
}) => /* @__PURE__ */ r(
"div",
{
className: s([
"tw-overflow-hidden tw-w-full tw-relative",
w[a],
i && "tw-rounded",
o[t].outer
]),
"data-test-id": "loading-bar-outer",
children: /* @__PURE__ */ r(
"div",
{
className: s([
"tw-left-0 tw-top-0 tw-h-full tw-absolute tw-transition-width",
o[t].inner
]),
style: { width: `${e}%` },
"data-test-id": "loading-bar-inner"
}
)
}
);
d.displayName = "FondueLoadingBar";
export {
d as LoadingBar,
l as LoadingBarSize,
n as LoadingBarState,
w as loadingBarSizeClasses,
o as loadingBarStateClasses
};
//# sourceMappingURL=LoadingBar.es.js.map