@payfit/unity-components
Version:
61 lines (60 loc) • 2.48 kB
JavaScript
import { Icon as e } from "../icon/Icon.js";
import { cloneElement as t, forwardRef as n, isValidElement as r } from "react";
import { uyTv as i } from "@payfit/unity-themes";
import { jsx as a, jsxs as o } from "react/jsx-runtime";
import { Slot as s, Slottable as c } from "@radix-ui/react-slot";
//#region src/components/badge/Badge.tsx
var l = i({
slots: {
root: [
"uy:inline-flex uy:items-center uy:gap-50 uy:has-data-[unity-component=\"BadgeDot\"]:gap-0",
"uy:rounded-75 uy:px-75 uy:py-25 uy:has-data-[unity-component=\"BadgeDot\"]:pl-25",
"uy:font-sans uy:typography-body uy:whitespace-nowrap uy:text-center"
],
prefix: "uy:inline-flex uy:size-250 uy:shrink-0 uy:items-center uy:justify-center uy:text-inherit"
},
variants: { variant: {
success: { root: "uy:bg-surface-success-low uy:text-content-success-high" },
warning: { root: "uy:bg-surface-warning-low uy:text-content-warning-high" },
danger: { root: "uy:bg-surface-danger-low uy:text-content-danger-high" },
neutral: { root: "uy:bg-surface-neutral-lowest uy:text-content-neutral" },
promo: { root: ["uy:theme-legacy:bg-surface-promo-low uy:theme-legacy:text-content-promo-high", "uy:theme-rebrand:bg-surface-decorative-purple-low uy:theme-rebrand:text-content-decorative-purple-high"] },
attention: { root: "uy:bg-surface-danger uy:text-content-inverted" },
numeric: { root: "uy:bg-surface-info-low uy:text-content-info-high" },
contextual: { root: "uy:bg-surface-neutral uy:border uy:border-solid uy:border-border-neutral uy:text-content-neutral" }
} },
defaultVariants: { variant: "neutral" }
}), u = {
success: "status",
warning: "alert",
danger: "alert",
neutral: "status",
promo: "status",
attention: "alert",
contextual: "status",
numeric: "status"
};
function d(t) {
return r(t) && t.type === e;
}
function f(e, n) {
return !d(e) || n === "contextual" ? e : t(e, { color: "inherit" });
}
var p = n(({ className: e, variant: t = "neutral", role: n, asChild: r = !1, prefix: i, children: d, ...p }, m) => {
let h = n ?? u[t] ?? "status", g = r ? s : "span", _ = f(i, t), v = l({ variant: t });
return /* @__PURE__ */ o(g, {
"data-dd-privacy": "allow",
ref: m,
className: v.root({ className: e }),
role: h,
...p,
children: [_ ? /* @__PURE__ */ a("span", {
className: v.prefix(),
"data-unity-slot": "badge-prefix",
children: _
}) : null, /* @__PURE__ */ a(c, { children: d })]
});
});
p.displayName = "Badge";
//#endregion
export { p as Badge };