@payfit/unity-components
Version:
49 lines (48 loc) • 1.41 kB
JavaScript
import { forwardRef as e } from "react";
import { uyTv as t } from "@payfit/unity-themes";
import { jsx as n } from "react/jsx-runtime";
//#region src/components/pill/Pill.tsx
var r = t({
base: "uy:min-w-200 uy:h-200 uy:max-w-400 uy:inline-flex uy:items-center uy:justify-center uy:text-center uy:typography-body-small-strong",
variants: {
variant: {
critical: "uy:bg-surface-danger uy:text-content-inverted",
info: ["uy:theme-legacy:bg-surface-primary uy:theme-legacy:text-content-inverted", "uy:theme-rebrand:bg-surface-info uy:theme-rebrand:text-content-info-high"],
neutral: "uy:bg-surface-neutral-lowest uy:text-content-neutral"
},
shape: {
circle: "uy:rounded-circle",
pill: "uy:rounded-pill uy:px-50"
},
isVisible: {
true: "uy:visible",
false: "uy:invisible"
}
},
defaultVariants: {
variant: "critical",
shape: "pill",
isVisible: !0
}
}), i = (e, t) => {
let n = 10 ** t - 1;
return e > n ? `${n}+` : e.toString();
}, a = e(({ variant: e = "critical", isVisible: t = !0, maxDigits: a = 2, value: o, ...s }, c) => {
let l = i(Math.abs(o), a), u = r({
variant: e,
isVisible: t,
shape: l.length === 1 ? "circle" : "pill"
});
return /* @__PURE__ */ n("span", {
"data-dd-privacy": "allow",
...s,
ref: c,
role: "status",
className: u,
"aria-atomic": "true",
children: l
});
});
a.displayName = "Pill";
//#endregion
export { a as Pill };