@payfit/unity-components 2.47.4 → 2.47.6

package/dist/esm/components/link/RawLink.js

@@ -1,165 +1,109 @@
-import { jsxs as g, jsx as w } from "react/jsx-runtime";
-import { forwardRef as k } from "react";
-import { IconSprite as z } from "@payfit/unity-icons";
-import { uyTv as D } from "@payfit/unity-themes";
-import { Link as A } from "react-aria-components/Link";
-import { useRouter as E } from "../../providers/router/RouterProvider.js";
-import { isExternalUrl as L } from "./utils.js";
-const N = D({
-  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: [
-          //legacy theme
-          "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",
-          //rebrand theme
-          "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: [
-          //legacy
-          "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",
-          //rebrand
-          "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: [
-          // legacy
-          "uy:data-[disabled]:text-content-primary-disabled",
-          // rebrand
-          "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"
-  }
-}), R = k(
-  ({
-    href: a,
-    children: l,
-    variant: c = "inline",
-    color: y = "primary",
-    isDisabled: s = !1,
-    isExact: d = !1,
-    isCurrent: b,
-    isExternal: m,
-    maxCharactersTruncation: n,
-    maxWidthTruncation: e,
-    size: p = "inherit",
-    ...t
-  }, v) => {
-    const i = E(), r = m ?? L(a), o = !r && i ? i.isActive(a.toString(), d) : b, { base: x, icon: h } = N({
-      variant: c,
-      color: y,
-      isDisabled: s,
-      size: p,
-      isTruncated: !!n || !!e
-    }), u = n !== void 0 ? `${n}ch` : e !== void 0 ? typeof e == "number" ? `${e}px` : e : void 0, f = i && {
-      ...o !== void 0 && {
-        "data-current": o,
-        "aria-current": o ? "page" : void 0
-      }
-    };
-    return /* @__PURE__ */ g(
-      A,
-      {
-        "data-dd-privacy": "allow",
-        ...t,
-        href: a,
-        ref: v,
-        style: u ? {
-          "--uy-link-max-w": u
-        } : {},
-        className: x(),
-        isDisabled: s,
-        target: r ? "_blank" : t.target,
-        rel: r && !t.rel ? "noopener noreferrer" : t.rel,
-        ...f,
-        children: [
-          l,
-          r && /* @__PURE__ */ w(
-            z,
-            {
-              src: "ArrowSquareOutOutlined",
-              color: "currentColor",
-              role: "presentation",
-              className: h()
-            }
-          )
-        ]
-      }
-    );
-  }
-);
-R.displayName = "Link";
-export {
-  R as RawLink,
-  N as link
-};
+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 };

package/dist/esm/components/link/utils.js

@@ -1,16 +1,13 @@
-function a(i) {
-  if (!i) return !1;
-  const n = (t) => t.startsWith("/") || // absolute path
-  t.startsWith("./") || // relative path
-  t.startsWith("../") || // relative path
-  t.startsWith("#"), s = (t) => t.includes("://");
-  try {
-    const t = new URL(i, window.location.origin);
-    return t.origin !== window.location.origin || s(t.pathname) ? !0 : !n(t.pathname);
-  } catch {
-    return !n(i);
-  }
+//#region src/components/link/utils.ts
+function e(e) {
+	if (!e) return !1;
+	let t = (e) => e.startsWith("/") || e.startsWith("./") || e.startsWith("../") || e.startsWith("#"), n = (e) => e.includes("://");
+	try {
+		let r = new URL(e, window.location.origin);
+		return r.origin !== window.location.origin || n(r.pathname) ? !0 : !t(r.pathname);
+	} catch {
+		return !t(e);
+	}
 }
-export {
-  a as isExternalUrl
-};
+//#endregion
+export { e as isExternalUrl };

package/dist/esm/components/link-button/RawLinkButton.js

@@ -1,127 +1,100 @@
-import { jsx as s, jsxs as C } from "react/jsx-runtime";
-import { forwardRef as E, useMemo as F } from "react";
-import { useUnityTheme as R, uyMerge as n } from "@payfit/unity-themes";
-import { Link as j } from "react-aria-components/Link";
-import { buttonOutlined as f, buttonGhost as z, buttonFilled as h } from "../button/Button.variants.js";
-import { Icon as k } from "../icon/Icon.js";
-import { isExternalUrl as M } from "../link/utils.js";
-import { Spinner as U } from "../spinner/Spinner.js";
-const $ = (r, l) => r ? /* @__PURE__ */ s(U, { size: "small", color: "inherit", label: "Loading..." }) : l ? /* @__PURE__ */ s(
-  k,
-  {
-    src: l,
-    size: 20,
-    color: "inherit",
-    role: "presentation",
-    "data-unity-icon": "prefix"
-  }
-) : null, v = E(
-  ({
-    variant: r,
-    href: l,
-    children: m,
-    color: t = "primary",
-    size: p = "default",
-    isDisabled: u = !1,
-    isLoading: e = !1,
-    prefixIcon: x,
-    suffixIcon: y,
-    truncateLabelLength: d,
-    isExternal: w,
-    ...i
-  }, g) => {
-    const b = w ?? M(l), { theme: c } = R(), B = F(() => {
-      const o = { size: p, isDisabled: u, isLoading: e };
-      let a;
-      switch (r) {
-        case "primary": {
-          a = n(
-            h({
-              ...o,
-              color: t
-            })
-          );
-          break;
-        }
-        case "secondary": {
-          c === "rebrand" ? a = n(
-            h({ ...o, color: t === "inverted" ? "inverted.low" : "neutral" })
-          ) : a = n(
-            f({
-              ...o,
-              color: t
-            })
-          );
-          break;
-        }
-        case "ghost": {
-          a = n(
-            z({
-              ...o,
-              color: t
-            })
-          );
-          break;
-        }
-        case "outlined": {
-          a = n(
-            f({
-              ...o,
-              color: t
-            })
-          );
-          break;
-        }
-      }
-      return n(
-        a,
-        "uy:no-underline",
-        u || e ? `${r === "primary" || r === "secondary" && c === "rebrand" ? "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` : "",
-        e ? "uy:data-[disabled]:cursor-progress" : ""
-      );
-    }, [r, t, p, u, e, c]), N = {
-      ...e && { "data-loading": e }
-    };
-    return /* @__PURE__ */ s(
-      j,
-      {
-        "data-dd-privacy": "allow",
-        ...i,
-        href: l,
-        ref: g,
-        isDisabled: u || e,
-        className: B,
-        target: b ? "_blank" : i.target,
-        rel: b && !i.rel ? "noopener noreferrer" : i.rel,
-        ...N,
-        children: /* @__PURE__ */ C("span", { className: "uy:inline-flex uy:gap-50 uy:items-center", children: [
-          $(e, x),
-          d && d > 0 ? /* @__PURE__ */ s(
-            "span",
-            {
-              style: {
-                "--uy-button-label-truncation-length": `${d}ch`
-              },
-              className: "uy:truncate uy:min-w-0 uy:w-(--uy-button-label-truncation-length)",
-              children: m
-            }
-          ) : m,
-          y && /* @__PURE__ */ s(
-            k,
-            {
-              src: y,
-              size: 20,
-              color: "inherit",
-              role: "presentation",
-              "data-unity-icon": "suffix"
-            }
-          )
-        ] })
-      }
-    );
-  }
-);
-v.displayName = "RawLinkButton";
-export {
-  v as RawLinkButton
-};
+import { Icon as e } from "../icon/Icon.js";
+import { Spinner as t } from "../spinner/Spinner.js";
+import { buttonFilled as n, buttonGhost as r, buttonOutlined as i } from "../button/Button.variants.js";
+import { isExternalUrl as a } from "../link/utils.js";
+import { forwardRef as o, useMemo as s } from "react";
+import { useUnityTheme as c, uyMerge as l } from "@payfit/unity-themes";
+import { jsx as u, jsxs as d } from "react/jsx-runtime";
+import { Link as f } from "react-aria-components/Link";
+//#region src/components/link-button/RawLinkButton.tsx
+var p = (n, r) => n ? /* @__PURE__ */ u(t, {
+	size: "small",
+	color: "inherit",
+	label: "Loading..."
+}) : r ? /* @__PURE__ */ u(e, {
+	src: r,
+	size: 20,
+	color: "inherit",
+	role: "presentation",
+	"data-unity-icon": "prefix"
+}) : null, m = o(({ variant: t, href: o, children: m, color: h = "primary", size: g = "default", isDisabled: _ = !1, isLoading: v = !1, prefixIcon: y, suffixIcon: b, truncateLabelLength: x, isExternal: S, ...C }, w) => {
+	let T = S ?? a(o), { theme: E } = c(), D = s(() => {
+		let e = {
+			size: g,
+			isDisabled: _,
+			isLoading: v
+		}, a;
+		switch (t) {
+			case "primary":
+				a = l(n({
+					...e,
+					color: h
+				}));
+				break;
+			case "secondary":
+				if (E === "rebrand") {
+					let t = h === "inverted" ? "inverted.low" : "neutral";
+					a = l(n({
+						...e,
+						color: t
+					}));
+				} else a = l(i({
+					...e,
+					color: h
+				}));
+				break;
+			case "ghost":
+				a = l(r({
+					...e,
+					color: h
+				}));
+				break;
+			case "outlined":
+				a = l(i({
+					...e,
+					color: h
+				}));
+				break;
+		}
+		return l(a, "uy:no-underline", _ || v ? `${t === "primary" || t === "secondary" && E === "rebrand" ? "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` : "", v ? "uy:data-[disabled]:cursor-progress" : "");
+	}, [
+		t,
+		h,
+		g,
+		_,
+		v,
+		E
+	]), O = { ...v && { "data-loading": v } };
+	return /* @__PURE__ */ u(f, {
+		"data-dd-privacy": "allow",
+		...C,
+		href: o,
+		ref: w,
+		isDisabled: _ || v,
+		className: D,
+		target: T ? "_blank" : C.target,
+		rel: T && !C.rel ? "noopener noreferrer" : C.rel,
+		...O,
+		children: /* @__PURE__ */ d("span", {
+			className: "uy:inline-flex uy:gap-50 uy:items-center",
+			children: [
+				p(v, y),
+				x && x > 0 ? /* @__PURE__ */ u("span", {
+					style: { "--uy-button-label-truncation-length": `${x}ch` },
+					className: "uy:truncate uy:min-w-0 uy:w-(--uy-button-label-truncation-length)",
+					children: m
+				}) : m,
+				b && /* @__PURE__ */ u(e, {
+					src: b,
+					size: 20,
+					color: "inherit",
+					role: "presentation",
+					"data-unity-icon": "suffix"
+				})
+			]
+		})
+	});
+});
+m.displayName = "RawLinkButton";
+//#endregion
+export { m as RawLinkButton };

package/dist/esm/components/list-view/ListView.js

@@ -1,45 +1,40 @@
-import { jsx as t } from "react/jsx-runtime";
-import { forwardRef as m } from "react";
-import { uyTv as l } from "@payfit/unity-themes";
-import { ListBox as o } from "react-aria-components/ListBox";
-import { Virtualizer as p, ListLayout as c } from "react-aria-components/Virtualizer";
-const u = l({
-  base: [
-    "uy:pb-500 uy:data-[empty=true]:pb-0",
-    'uy:[&_[data-unity-slot="ListViewSection"]]:pb-300',
-    'uy:[&_[data-unity-slot="ListViewSection"]:last-child]:pb-0'
-  ]
-}), y = {
-  layout: c,
-  layoutOptions: {
-    estimatedRowHeight: 56,
-    estimatedHeadingHeight: 24,
-    gap: 0,
-    padding: 0
-  }
-}, w = (r, i) => {
-  const { children: a, enableVirtualization: n, className: d, ...e } = r, s = u({ className: d });
-  return n ? /* @__PURE__ */ t(p, { ...y, children: /* @__PURE__ */ t(
-    o,
-    {
-      ...e,
-      ref: i,
-      "data-dd-privacy": "show",
-      className: s,
-      children: a
-    }
-  ) }) : /* @__PURE__ */ t(
-    o,
-    {
-      ...e,
-      ref: i,
-      "data-dd-privacy": "show",
-      className: s,
-      children: a
-    }
-  );
-}, V = m(w);
-V.displayName = "ListView";
-export {
-  V as ListView
-};
+import { forwardRef as e } from "react";
+import { uyTv as t } from "@payfit/unity-themes";
+import { jsx as n } from "react/jsx-runtime";
+import { ListBox as r } from "react-aria-components/ListBox";
+import { ListLayout as i, Virtualizer as a } from "react-aria-components/Virtualizer";
+//#region src/components/list-view/ListView.tsx
+var o = t({ base: [
+	"uy:pb-500 uy:data-[empty=true]:pb-0",
+	"uy:[&_[data-unity-slot=\"ListViewSection\"]]:pb-300",
+	"uy:[&_[data-unity-slot=\"ListViewSection\"]:last-child]:pb-0"
+] }), s = {
+	layout: i,
+	layoutOptions: {
+		estimatedRowHeight: 56,
+		estimatedHeadingHeight: 24,
+		gap: 0,
+		padding: 0
+	}
+}, c = e((e, t) => {
+	let { children: i, enableVirtualization: c, className: l, ...u } = e, d = o({ className: l });
+	return c ? /* @__PURE__ */ n(a, {
+		...s,
+		children: /* @__PURE__ */ n(r, {
+			...u,
+			ref: t,
+			"data-dd-privacy": "show",
+			className: d,
+			children: i
+		})
+	}) : /* @__PURE__ */ n(r, {
+		...u,
+		ref: t,
+		"data-dd-privacy": "show",
+		className: d,
+		children: i
+	});
+});
+c.displayName = "ListView";
+//#endregion
+export { c as ListView };