@payfit/unity-components
Version:
110 lines (109 loc) • 4.67 kB
JavaScript
import { useRouter as e } from "../../providers/router/RouterProvider.js";
import { isExternalUrl as t } from "./utils.js";
import { forwardRef as n } from "react";
import { uyTv as r } from "@payfit/unity-themes";
import { jsx as i, jsxs as a } from "react/jsx-runtime";
import { IconSprite as o } from "@payfit/unity-icons";
import { Link as s } from "react-aria-components/Link";
//#region src/components/link/RawLink.tsx
var c = r({
slots: {
base: [
"uy:rounded-50 uy:underline uy:transition-colors uy:underline-offset-3",
"uy:disabled:text-content-neutral-disabled",
"uy:focus-visible:outline-none uy:focus-visible:text-content-neutral-focus uy:focus-visible:ring-2 uy:focus-visible:ring-offset-2 uy:focus-visible:ring-utility-focus-ring"
],
icon: ["uy:inline uy:ml-25"]
},
variants: {
variant: {
inline: {
base: "uy:inline uy:text-(length:inherit) uy:font-medium uy:leading-inherit",
icon: "uy:align-text-top uy:w-[0.95em] uy:h-[1.2em]"
},
standalone: {
base: "uy:typography-action uy:flex uy:gap-x-25 uy:items-end uy:py-50 uy:sm:p-0",
icon: "uy:self-center uy:size-[1.1em]"
}
},
size: {
default: { base: "uy:typography-action" },
large: { base: "uy:typography-action-large" },
small: { base: "uy:typography-action-small" },
inherit: { base: "uy:text-inherit" }
},
color: {
primary: { base: ["uy:text-content-primary-enabled uy:hover:text-content-primary-hover uy:active:text-content-primary-active uy:data-[pressed]:text-content-primary-active uy:data-[current]:text-content-primary-active uy:aria-[current]:text-content-primary-active", "uy:theme-rebrand:text-content-neutral-enabled uy:theme-rebrand:hover:text-content-neutral-hover uy:theme-rebrand:active:text-content-neutral-active uy:theme-rebrand:data-[pressed]:text-content-neutral-pressed uy:theme-rebrand:data-[current]:text-content-neutral-active uy:theme-rebrand:aria-[current]:text-content-neutral-active"] },
secondary: { base: ["uy:text-content-neutral-enabled uy:hover:text-content-neutral-hover uy:active:text-content-neutral-active uy:data-[pressed]:text-content-neutral-pressed uy:data-[current]:text-content-neutral-active uy:aria-[current]:text-content-neutral-active", "uy:theme-rebrand:text-content-neutral-lowest-enabled uy:theme-rebrand:hover:text-content-neutral-lowest-hover uy:theme-rebrand:active:text-content-neutral-lowest-active uy:theme-rebrand:data-[pressed]:text-content-neutral-lowest-pressed uy:theme-rebrand:data-[current]:text-content-neutral-lowest-active uy:theme-rebrand:aria-[current]:text-content-neutral-lowest-active"] },
inherit: { base: "uy:text-(color:inherit)" }
},
isDisabled: {
true: { base: "uy:data-[disabled]:cursor-not-allowed" },
false: { base: "uy:enabled:cursor-pointer" }
},
isTruncated: {
true: { base: "uy:truncate uy:max-w-[var(--uy-link-max-w)]" },
false: { base: "" }
}
},
compoundVariants: [
{
color: "primary",
isDisabled: !0,
class: { base: ["uy:data-[disabled]:text-content-primary-disabled", "uy:theme-rebrand:data-[disabled]:text-content-neutral-disabled"] }
},
{
color: "secondary",
isDisabled: !0,
class: { base: "uy:data-[disabled]:text-content-neutral-lowest-disabled" }
},
{
color: "inherit",
isDisabled: !0,
class: { base: "uy:data-[disabled]:text-content-neutral-lowest-disabled" }
},
{
size: "inherit",
variant: "inline",
class: { base: "uy:text-(length:inherit)" }
}
],
defaultVariants: {
variant: "inline",
color: "primary",
isDisabled: !1,
size: "inherit"
}
}), l = n(({ href: n, children: r, variant: l = "inline", color: u = "primary", isDisabled: d = !1, isExact: f = !1, isCurrent: p, isExternal: m, maxCharactersTruncation: h, maxWidthTruncation: g, size: _ = "inherit", ...v }, y) => {
let b = e(), x = m ?? t(n), S = !x && b ? b.isActive(n.toString(), f) : p, { base: C, icon: w } = c({
variant: l,
color: u,
isDisabled: d,
size: _,
isTruncated: !!h || !!g
}), T = h === void 0 ? g === void 0 ? void 0 : typeof g == "number" ? `${g}px` : g : `${h}ch`, E = b && { ...S !== void 0 && {
"data-current": S,
"aria-current": S ? "page" : void 0
} };
return /* @__PURE__ */ a(s, {
"data-dd-privacy": "allow",
...v,
href: n,
ref: y,
style: T ? { "--uy-link-max-w": T } : {},
className: C(),
isDisabled: d,
target: x ? "_blank" : v.target,
rel: x && !v.rel ? "noopener noreferrer" : v.rel,
...E,
children: [r, x && /* @__PURE__ */ i(o, {
src: "ArrowSquareOutOutlined",
color: "currentColor",
role: "presentation",
className: w()
})]
});
});
l.displayName = "Link";
//#endregion
export { l as RawLink, c as link };