@payfit/unity-components
Version:
98 lines (97 loc) • 2.72 kB
JavaScript
import { Icon as e } from "../icon/Icon.js";
import { Spinner as t } from "../spinner/Spinner.js";
import { isExternalUrl as n } from "../link/utils.js";
import { linkButtonFilled as r, linkButtonGhost as i, linkButtonOutlined as a } from "./LinkButton.variants.js";
import { forwardRef as o, useMemo as s } from "react";
import { uyMerge as c } from "@payfit/unity-themes";
import { jsx as l, jsxs as u } from "react/jsx-runtime";
import { Link as d } from "react-aria-components/Link";
//#region src/components/link-button/RawLinkButton.tsx
var f = (n, r) => n ? /* @__PURE__ */ l(t, {
size: "small",
color: "inherit",
label: "Loading..."
}) : r ? /* @__PURE__ */ l(e, {
src: r,
size: 20,
color: "inherit",
role: "presentation",
"data-unity-icon": "prefix"
}) : null, p = o(({ variant: t, href: o, children: p, color: m = "primary", size: h = "default", isDisabled: g = !1, isLoading: _ = !1, prefixIcon: v, suffixIcon: y, truncateLabelLength: b, mode: x = "default", isExternal: S, ...C }, w) => {
let T = S ?? n(o), E = s(() => {
let e = {
size: h,
isDisabled: g,
isLoading: _,
mode: x
}, n;
switch (t) {
case "primary":
n = r({
...e,
color: m
});
break;
case "secondary": {
let t = m === "inverted" ? "inverted.low" : "neutral";
n = r({
...e,
color: t
});
break;
}
case "ghost":
n = i({
...e,
color: m
});
break;
case "outlined":
n = a({
...e,
color: m
});
break;
}
return c(n, "uy:no-underline", g || _ ? `${t === "primary" || t === "secondary" ? "uy:data-[disabled]:bg-surface-neutral-disabled" : "uy:data-[disabled]:bg-transparent"} uy:data-[disabled]:text-content-neutral-disabled uy:data-[disabled]:cursor-not-allowed` : "", _ ? "uy:data-[disabled]:cursor-progress" : "");
}, [
t,
m,
h,
g,
_,
x
]), D = { ..._ && { "data-loading": _ } };
return /* @__PURE__ */ l(d, {
"data-dd-privacy": "allow",
...C,
href: o,
ref: w,
isDisabled: g || _,
className: E,
target: T ? "_blank" : C.target,
rel: T && !C.rel ? "noopener noreferrer" : C.rel,
...D,
children: /* @__PURE__ */ u("span", {
className: "uy:inline-flex uy:gap-50 uy:items-center",
children: [
f(_, v),
b && b > 0 ? /* @__PURE__ */ l("span", {
style: { "--uy-button-label-truncation-length": `${b}ch` },
className: "uy:truncate uy:min-w-0 uy:w-(--uy-button-label-truncation-length)",
children: p
}) : p,
y && /* @__PURE__ */ l(e, {
src: y,
size: 20,
color: "inherit",
role: "presentation",
"data-unity-icon": "suffix"
})
]
})
});
});
p.displayName = "RawLinkButton";
//#endregion
export { p as RawLinkButton };