@payfit/unity-components
Version:
40 lines (39 loc) • 1.18 kB
JavaScript
import { forwardRef as e } from "react";
import { uyTv as t } from "@payfit/unity-themes";
import { jsx as n } from "react/jsx-runtime";
import { ProgressBar as r } from "react-aria-components/ProgressBar";
//#region src/components/funnel-layout/parts/FunnelProgressBar.tsx
var i = t({
slots: {
base: ["uy:bg-surface-neutral-disabled", "uy:w-full uy:h-50"],
meter: [
"uy:h-full uy:w-[var(--uy-progressbar-value)] uy:transition-all uy:duration-200 uy:ease-linear",
"uy:bg-surface-primary",
"uy:rounded-r-pill"
]
},
variants: { isFull: {
true: { meter: "uy:rounded-r-0" },
false: { meter: "uy:rounded-r-pill" }
} },
defaultVariants: { isFull: !1 }
}), a = e(({ value: e, ...t }, a) => {
let { base: o, meter: s } = i({ isFull: e >= 100 });
return /* @__PURE__ */ n(r, {
ref: a,
value: e,
"aria-label": "progress bar",
"data-dd-privacy": "allow",
...t,
children: ({ percentage: e }) => /* @__PURE__ */ n("div", {
className: o(),
children: /* @__PURE__ */ n("div", {
className: s(),
style: { "--uy-progressbar-value": `${e}%` }
})
})
});
});
a.displayName = "FunnelProgressBar";
//#endregion
export { a as FunnelProgressBar };