@payfit/unity-components
Version:
67 lines (66 loc) • 1.58 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/progress-bar/ProgressBar.tsx
var i = t({
slots: {
base: "uy:relative uy:bg-surface-neutral-disabled uy:w-full",
meter: "uy:absolute uy:inset-y-0 uy:left-0"
},
variants: {
variant: {
success: { meter: "uy:bg-surface-success" },
primary: { meter: "uy:bg-surface-primary" }
},
size: {
small: {
base: "uy:h-75 uy:rounded-75",
meter: "uy:rounded-l-75"
},
large: {
base: "uy:h-150 uy:rounded-150",
meter: "uy:rounded-l-150"
}
},
isFull: { true: {} }
},
compoundVariants: [{
size: "small",
isFull: !0,
class: { meter: "uy:rounded-r-75" }
}, {
size: "large",
isFull: !0,
class: { meter: "uy:rounded-r-150" }
}],
defaultVariants: {
variant: "success",
size: "large",
isFull: !1
}
}), a = e(({ value: e, range: t = [0, 100], variant: a = "success", size: o = "large", ...s }, c) => {
let [l, u] = t, { base: d, meter: f } = i({
isFull: e >= u,
variant: a,
size: o
});
return /* @__PURE__ */ n(r, {
ref: c,
value: e,
minValue: l,
maxValue: u,
"aria-label": s["aria-label"],
"data-dd-privacy": "allow",
children: ({ percentage: e }) => /* @__PURE__ */ n("div", {
className: d(),
children: /* @__PURE__ */ n("div", {
className: f(),
style: { width: `${e}%` }
})
})
});
});
a.displayName = "ProgressBar";
//#endregion
export { a as ProgressBar };