UNPKG

@payfit/unity-components

Version:

98 lines (97 loc) 2.72 kB
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 };