@payfit/unity-components 3.1.13 → 3.1.15

package/dist/esm/core/components/input/Input.js

@@ -0,0 +1,123 @@
+import { Icon as e } from "../icon/Icon.js";
+import { Spinner as t } from "../spinner/Spinner.js";
+import { CircularIconButton as n } from "../icon-button/CircularIconButton.js";
+import { forwardRef as r } from "react";
+import { uyTv as i } from "@payfit/unity-themes";
+import { jsx as a, jsxs as o } from "react/jsx-runtime";
+import { useIntl as s } from "react-intl";
+import { Input as c } from "react-aria-components/Input";
+//#region src/core/components/input/Input.tsx
+var l = i({
+	slots: {
+		base: "uy:flex uy:h-5.5 uy:sm:h-500 uy:border uy:border-solid uy:rounded-100 uy:sm:rounded-75 uy:focus-within:outline-none uy:focus-within:ring-2 uy:focus-within:ring-utility-focus-ring uy:focus-within:ring-offset-2 uy:active:border-border-form-active",
+		prefix: "uy:flex-grow-0 uy:text-content-form-enabled uy:content-center uy:py-125 uy:sm:py-100 uy:px-150 uy:border-r uy:border-solid uy:rounded-l-100 uy:sm:rounded-l-75 uy:active:border-border-form-active",
+		inputWrapper: "uy:flex uy:gap-50 uy:flex-grow uy:flex-nowrap uy:py-125 uy:sm:py-100 uy:px-150 uy:rounded-100 uy:sm:rounded-75 uy:max-w-full uy:justify-between",
+		input: "uy:w-full uy:flex-1 uy:outline-none uy:typography-body uy:placeholder:text-content-neutral-lowest uy:min-w-0 uy:max-w-full",
+		state: "uy:flex uy:gap-50 uy:items-center uy:shrink-0",
+		suffix: "uy:flex-grow-0 uy:text-content-form-enabled uy:content-center uy:py-125 uy:sm:py-100 uy:px-150 uy:border-l uy:border-solid uy:rounded-r-100 uy:sm:rounded-r-75 uy:active:border-border-form-active"
+	},
+	variants: {
+		isInvalid: { true: {
+			base: "uy:border-border-form-error uy:bg-surface-form-error",
+			prefix: "uy:bg-surface-form-error uy:border-border-form-error",
+			inputWrapper: "uy:bg-surface-form-error",
+			input: "uy:bg-surface-form-error",
+			state: "uy:text-content-form-error",
+			suffix: "uy:bg-surface-form-error uy:border-border-form-error"
+		} },
+		isReadOnly: { true: {
+			base: "uy:border-border-form-disabled uy:bg-surface-form-disabled",
+			prefix: "uy:bg-surface-form-disabled uy:border-border-form-disabled uy:text-content-form-readonly",
+			inputWrapper: "uy:border-border-form-disabled uy:bg-surface-form-disabled",
+			input: "uy:bg-surface-form-disabled uy:text-content-form-readonly",
+			suffix: "uy:bg-surface-form-disabled uy:border-border-form-disabled uy:text-content-form-readonly"
+		} },
+		isDisabled: { true: {
+			base: "uy:border-border-form-disabled uy:bg-surface-form-disabled",
+			prefix: "uy:bg-surface-form-disabled uy:border-border-form-disabled uy:text-content-form-disabled",
+			inputWrapper: "uy:bg-surface-form-disabled uy:text-content-form-disabled",
+			input: "uy:bg-surface-form-disabled uy:text-content-form-disabled",
+			suffix: "uy:bg-surface-form-disabled uy:border-border-form-disabled uy:text-content-form-disabled"
+		} }
+	},
+	compoundVariants: [{
+		isInvalid: !1,
+		isDisabled: !1,
+		isReadOnly: !1,
+		className: {
+			base: "uy:border-border-form-enabled uy:bg-surface-form-enabled",
+			prefix: "uy:bg-surface-neutral-low uy:border-border-form-enabled uy:text-content-form-enabled",
+			inputWrapper: "uy:border-border-form-enabled uy:bg-surface-form-enabled",
+			input: "uy:text-content-form-enabled uy:bg-surface-form-enabled",
+			state: "uy:text-content-neutral-disabled",
+			suffix: "uy:border-border-form-enabled uy:bg-surface-neutral-low uy:text-content-form-enabled"
+		}
+	}]
+}), u = r(({ type: r = "text", prefix: i, suffix: u, isInvalid: d, isLoading: f, isDisabled: p, isReadOnly: m, onClearButtonPress: h, ...g }, _) => {
+	let v = s(), { base: y, prefix: b, inputWrapper: x, input: S, state: C, suffix: w } = l({
+		isInvalid: !!d,
+		isReadOnly: !!m,
+		isDisabled: !!p
+	}), T = g.value && !f && !m && !p;
+	return delete g.isRequired, /* @__PURE__ */ o("div", {
+		className: y(),
+		children: [
+			i ? /* @__PURE__ */ a("span", {
+				className: b(),
+				children: i
+			}) : null,
+			/* @__PURE__ */ o("div", {
+				className: x(),
+				children: [/* @__PURE__ */ a(c, {
+					"data-dd-privacy": "mask",
+					...g,
+					ref: _,
+					type: r,
+					className: S(),
+					"aria-busy": f,
+					"aria-invalid": d,
+					readOnly: m,
+					disabled: p
+				}), /* @__PURE__ */ o("div", {
+					className: C(),
+					children: [
+						f && /* @__PURE__ */ a(t, {
+							color: "inherit",
+							size: "small",
+							label: v.formatMessage({
+								id: "unity:component:common:loading:label",
+								defaultMessage: "Loading..."
+							})
+						}),
+						d && /* @__PURE__ */ a(e, {
+							src: "WarningCircleOutlined",
+							color: "content.form.invalid",
+							alt: v.formatMessage({
+								id: "unity:component:form-field:form-input:error:alt",
+								defaultMessage: "Error"
+							})
+						}),
+						T && /* @__PURE__ */ a(n, {
+							title: v.formatMessage({
+								id: "unity:component:common:clear:title",
+								defaultMessage: "Clear"
+							}),
+							color: "content.neutral.low",
+							icon: "CloseOutlined",
+							onPress: () => {
+								h?.();
+							}
+						})
+					]
+				})]
+			}),
+			u ? /* @__PURE__ */ a("span", {
+				className: w(),
+				children: u
+			}) : null
+		]
+	});
+});
+u.displayName = "Input";
+//#endregion
+export { u as Input };

package/dist/esm/core/components/label/Label.js

@@ -0,0 +1,52 @@
+import { forwardRef as e } from "react";
+import { uyTv as t } from "@payfit/unity-themes";
+import { jsx as n, jsxs as r } from "react/jsx-runtime";
+import { useIntl as i } from "react-intl";
+import { InputContext as a } from "react-aria-components/Input";
+import { Label as o } from "react-aria-components/Label";
+import { useSlottedContext as s } from "react-aria-components/slots";
+import { mergeProps as c } from "react-aria/mergeProps";
+//#region src/core/components/label/Label.tsx
+var l = t({
+	slots: {
+		base: "uy:typography-body-strong uy:text-content-neutral-enabled uy:leading-[1lh]",
+		asterisk: "uy:text-content-danger uy:inline-block uy:ml-25",
+		optionalTag: "uy:typography-body uy:inline-block uy:ml-25"
+	},
+	variants: { variant: {
+		strong: { base: "uy:typography-body-strong" },
+		body: { base: "uy:typography-body" }
+	} },
+	defaultVariants: { variant: "strong" }
+}), u = e(({ children: e, ...t }, u) => {
+	let d = i(), { isRequired: f = !1, requiredVariant: p = "required", ...m } = c({ isRequired: s(a)?.["aria-required"] }, t), { base: h, asterisk: g, optionalTag: _ } = l();
+	return /* @__PURE__ */ r(o, {
+		"data-dd-privacy": "allow",
+		...m,
+		ref: u,
+		className: h({ className: t.className }),
+		children: [
+			e,
+			p === "required" && f && /* @__PURE__ */ r("span", {
+				className: g(),
+				children: ["*", /* @__PURE__ */ n("span", {
+					className: "uy:sr-only",
+					children: d.formatMessage({
+						id: "unity:component:label:required",
+						defaultMessage: "required"
+					})
+				})]
+			}),
+			p === "optional" && !f && /* @__PURE__ */ n("span", {
+				className: _({ className: t.className }),
+				children: d.formatMessage({
+					id: "unity:component:label:optional",
+					defaultMessage: "(optional)"
+				})
+			})
+		]
+	});
+});
+u.displayName = "Label";
+//#endregion
+export { u as Label };

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

@@ -0,0 +1,109 @@
+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/core/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: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"] },
+			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:text-content-neutral-lowest-enabled uy:hover:text-content-neutral-lowest-hover uy:active:text-content-neutral-lowest-active uy:data-[pressed]:text-content-neutral-lowest-pressed uy:data-[current]:text-content-neutral-lowest-active uy: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: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/core/components/link/utils.js

@@ -0,0 +1,13 @@
+//#region src/core/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);
+	}
+}
+//#endregion
+export { e as isExternalUrl };

package/dist/esm/core/components/link-button/LinkButton.variants.js

@@ -0,0 +1,113 @@
+import { buttonFilled as e, buttonGhost as t, buttonOutlined as n } from "../button/Button.variants.js";
+import { uyTv as r } from "@payfit/unity-themes";
+//#region src/core/components/link-button/LinkButton.variants.ts
+var i = "uy:not-data-[disabled]:data-[focus-visible=\"true\"]:outline-2 uy:not-data-[disabled]:data-[focus-visible=\"true\"]:outline-solid uy:not-data-[disabled]:data-[focus-visible=\"true\"]:outline-offset-2 uy:not-data-[disabled]:data-[focus-visible=\"true\"]:outline-utility-focus-ring", a = {
+	isDisabled: {
+		true: "",
+		false: ""
+	},
+	isLoading: {
+		true: "",
+		false: ""
+	}
+}, o = r({
+	extend: e,
+	base: i,
+	variants: {
+		...a,
+		color: {
+			primary: [
+				" uy:not-data-[disabled]:data-[hovered=\"true\"]:bg-surface-neutral-highest-hover uy:not-data-[disabled]:data-[hovered=\"true\"]:text-content-inverted-hover",
+				"uy:not-data-[disabled]:active:bg-surface-neutral-highest-active uy:not-data-[disabled]:active:text-content-inverted-hover",
+				" uy:not-data-[disabled]:data-[pressed=\"true\"]:bg-surface-neutral-highest-pressed uy:not-data-[disabled]:data-[pressed=\"true\"]:text-content-inverted-pressed"
+			],
+			warning: [
+				"uy:not-data-[disabled]:data-[hovered=\"true\"]:bg-surface-warning-hover uy:not-data-[disabled]:data-[hovered=\"true\"]:text-content-neutral-hover",
+				"uy:not-data-[disabled]:active:bg-surface-warning-active uy:not-data-[disabled]:active:text-content-neutral-active",
+				"uy:not-data-[disabled]:data-[pressed=\"true\"]:bg-surface-warning-pressed uy:not-data-[disabled]:data-[pressed=\"true\"]:text-content-neutral-pressed"
+			],
+			danger: [
+				"uy:not-data-[disabled]:data-[hovered=\"true\"]:bg-surface-danger-hover",
+				"uy:not-data-[disabled]:active:bg-surface-danger-active ",
+				"uy:not-data-[disabled]:data-[pressed=\"true\"]:bg-surface-danger-pressed"
+			],
+			neutral: [
+				"uy:not-data-[disabled]:data-[hovered=\"true\"]:bg-surface-neutral-low-hover uy:not-data-[disabled]:data-[hovered=\"true\"]:text-content-neutral-hover",
+				"uy:not-data-[disabled]:active:bg-surface-neutral-low-active uy:not-data-[disabled]:active:text-content-neutral-active",
+				"uy:not-data-[disabled]:data-[pressed=\"true\"]:bg-surface-neutral-low-pressed uy:not-data-[disabled]:data-[pressed=\"true\"]:text-content-neutral-pressed"
+			],
+			inverted: [
+				"uy:not-data-[disabled]:data-[hovered=\"true\"]:bg-surface-neutral-hover uy:not-data-[disabled]:data-[hovered=\"true\"]:text-content-neutral-hover",
+				"uy:not-data-[disabled]:active:bg-surface-neutral-active uy:not-data-[disabled]:active:text-content-neutral-active",
+				"uy:not-data-[disabled]:data-[pressed=\"true\"]:bg-surface-neutral-active uy:not-data-[disabled]:data-[pressed=\"true\"]:text-content-neutral-pressed",
+				"uy:not-data-[disabled]:data-[focus-visible]:outline-utility-inverted-focus-ring uy:not-data-[disabled]:data-[focus-visible]:text-content-neutral-focus uy:not-data-[disabled]:data-[focus-visible]:bg-surface-neutral-focus"
+			],
+			"inverted.low": [
+				"uy:not-data-[disabled]:data-[hovered=\"true\"]:bg-surface-inverted-low-hover uy:not-data-[disabled]:data-[hovered=\"true\"]:text-content-inverted-hover",
+				"uy:not-data-[disabled]:active:bg-surface-inverted-low-active uy:not-data-[disabled]:active:text-content-inverted-active",
+				"uy:not-data-[disabled]:data-[pressed=\"true\"]:bg-surface-inverted-low-pressed uy:not-data-[disabled]:data-[pressed=\"true\"]:text-content-inverted-pressed",
+				"uy:not-data-[disabled]:data-[focus-visible=\"true\"]:outline-utility-inverted-focus-ring uy:not-data-[disabled]:data-[focus-visible=\"true\"]:text-content-inverted-focus uy:not-data-[disabled]:data-[focus-visible=\"true\"]:bg-surface-inverted-low-focus"
+			]
+		}
+	}
+}), s = r({
+	extend: n,
+	base: i,
+	variants: {
+		...a,
+		color: {
+			primary: [
+				"uy:not-data-[disabled]:data-[hovered=\"true\"]:text-content-neutral-hover uy:not-data-[disabled]:data-[hovered=\"true\"]:border-border-neutral-high-hover",
+				"uy:not-data-[disabled]:data-[pressed=\"true\"]:text-content-neutral-pressed uy:not-data-[disabled]:data-[pressed=\"true\"]:bg-surface-neutral-low-pressed uy:not-data-[disabled]:data-[pressed=\"true\"]:border-surface-neutral-low-pressed",
+				"uy:not-data-[disabled]:data-[focus-visible=\"true\"]:border-border-neutral-high-focus uy:not-data-[disabled]:data-[focus-visible=\"true\"]:text-content-neutral-focus"
+			],
+			inverted: ["uy:not-data-[disabled]:data-[pressed=\"true\"]:text-content-neutral-pressed uy:not-data-[disabled]:data-[pressed=\"true\"]:bg-surface-neutral-low-pressed uy:not-data-[disabled]:data-[pressed=\"true\"]:border-surface-neutral-low-pressed", "uy:not-data-[disabled]:data-[focus-visible]:outline-utility-inverted-focus-ring"]
+		}
+	}
+}), c = r({
+	extend: t,
+	base: i,
+	variants: {
+		...a,
+		color: {
+			primary: [
+				" uy:not-data-[disabled]:data-[hovered=\"true\"]:bg-surface-neutral-hover  uy:not-data-[disabled]:data-[hovered=\"true\"]:text-content-neutral-hover",
+				"uy:not-data-[disabled]:active:bg-surface-neutral-active  uy:not-data-[disabled]:active:text-content-neutral-active",
+				" uy:not-data-[disabled]:data-[pressed=\"true\"]:bg-surface-neutral-pressed  uy:not-data-[disabled]:data-[pressed=\"true\"]:text-content-neutral-pressed",
+				"uy:not-data-[disabled]:data-[focus-visible]:bg-transparent uy:not-data-[disabled]:data-[focus-visible]:text-content-neutral-focus"
+			],
+			warning: [
+				"uy:not-data-[disabled]:data-[hovered=\"true\"]:bg-surface-warning-lowest-hover uy:not-data-[disabled]:data-[hovered=\"true\"]:text-content-warning-hover",
+				"uy:not-data-[disabled]:active:bg-surface-warning-lowest-active uy:not-data-[disabled]:active:text-content-warning-active",
+				"uy:not-data-[disabled]:data-[pressed=\"true\"]:bg-surface-warning-lowest-pressed uy:not-data-[disabled]:data-[pressed=\"true\"]:text-content-warning-pressed",
+				"uy:not-data-[disabled]:data-[focus-visible]:bg-transparent"
+			],
+			danger: [
+				"uy:not-data-[disabled]:data-[hovered=\"true\"]:bg-surface-danger-lowest-hover uy:not-data-[disabled]:data-[hovered=\"true\"]:text-content-danger-hover",
+				"uy:not-data-[disabled]:active:bg-surface-danger-lowest-active uy:not-data-[disabled]:active:text-content-danger-active",
+				"uy:not-data-[disabled]:data-[pressed=\"true\"]:bg-surface-danger-lowest-pressed uy:not-data-[disabled]:data-[pressed=\"true\"]:text-content-danger-pressed",
+				"uy:not-data-[disabled]:data-[focus-visible]:bg-transparent"
+			],
+			neutral: [
+				"uy:not-data-[disabled]:data-[hovered=\"true\"]:bg-surface-neutral-hover uy:not-data-[disabled]:data-[hovered=\"true\"]:text-content-neutral-hover",
+				"uy:not-data-[disabled]:active:bg-surface-neutral-active uy:not-data-[disabled]:active:text-content-neutral-active",
+				"uy:not-data-[disabled]:data-[pressed=\"true\"]:bg-surface-neutral-pressed uy:not-data-[disabled]:data-[pressed=\"true\"]:text-content-neutral-pressed",
+				"uy:not-data-[disabled]:data-[focus-visible]:bg-transparent"
+			],
+			"neutral.lowest": [
+				"uy:not-data-[disabled]:data-[hovered=\"true\"]:bg-surface-neutral-lowest-hover uy:not-data-[disabled]:data-[hovered=\"true\"]:text-content-neutral-hover",
+				"uy:not-data-[disabled]:active:bg-surface-neutral-lowest-active uy:not-data-[disabled]:active:text-content-neutral-active",
+				"uy:not-data-[disabled]:data-[pressed=\"true\"]:bg-surface-neutral-lowest-pressed uy:not-data-[disabled]:data-[pressed=\"true\"]:text-content-neutral-pressed",
+				"uy:not-data-[disabled]:data-[focus-visible]:bg-transparent"
+			],
+			inverted: [
+				"uy:not-data-[disabled]:data-[hovered=\"true\"]:bg-surface-inverted-hover uy:not-data-[disabled]:data-[hovered=\"true\"]:text-content-inverted-hover",
+				"uy:not-data-[disabled]:active:bg-surface-inverted-active uy:not-data-[disabled]:active:text-content-inverted-active",
+				"uy:not-data-[disabled]:data-[pressed=\"true\"]:bg-surface-inverted-pressed uy:not-data-[disabled]:data-[pressed=\"true\"]:text-content-inverted-pressed",
+				"uy:not-data-[disabled]:data-[focus-visible]:outline-utility-inverted-focus-ring uy:not-data-[disabled]:data-[focus-visible]:bg-transparent"
+			]
+		}
+	}
+});
+//#endregion
+export { o as linkButtonFilled, c as linkButtonGhost, s as linkButtonOutlined };

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

@@ -0,0 +1,97 @@
+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/core/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 };

package/dist/esm/core/components/list-view/ListView.d.ts

@@ -0,0 +1,56 @@
+import { JSX, Ref } from 'react';
+import { ListBoxProps } from 'react-aria-components/ListBox';
+export type ListViewProps<TItem extends object> = Omit<ListBoxProps<TItem>, 'layout' | 'selectionBehavior' | 'selectionMode' | 'selectedKeys' | 'defaultSelectedKeys' | 'onSelectionChange' | 'shouldSelectOnPressUp' | 'disallowEmptySelection' | 'escapeKeyBehavior' | 'className'> & {
+    /**
+     * Controls whether to enable virtualization for the list.
+     * @default false
+     */
+    enableVirtualization?: boolean;
+    /**
+     * Additional CSS classes to apply to the list container. Use this to customize height or other container styles.
+     */
+    className?: string;
+};
+type ListViewComponentType = {
+    <TItem extends object>(props: ListViewProps<TItem> & {
+        ref?: Ref<HTMLDivElement>;
+    }): JSX.Element;
+    displayName: string;
+};
+/**
+ * The ListView component displays a vertically scrollable list of interactive items, allowing users to browse and navigate content in an organized manner.
+ *
+ * ListView supports both static and dynamic content rendering, sectioned layouts, keyboard navigation, disabled items, custom empty states, and virtualization for optimal performance with large datasets. Primarily designed for navigation-first mobile experiences like iOS mail apps and settings lists.
+ * @param {ListViewProps} props - The props for the ListView component, including all ListBox props from React Aria Components plus `enableVirtualization`
+ * @example
+ * ```tsx
+ * import { ListView, RawListViewItem, ListViewItemLabel } from '@payfit/unity-components'
+ *
+ * function Example() {
+ *   return (
+ *     <ListView aria-label="My list">
+ *       <RawListViewItem id="1" href="/items/1">
+ *         <ListViewItemLabel>Item 1</ListViewItemLabel>
+ *       </RawListViewItem>
+ *       <RawListViewItem id="2" href="/items/2">
+ *         <ListViewItemLabel>Item 2</ListViewItemLabel>
+ *       </RawListViewItem>
+ *     </ListView>
+ *   )
+ * }
+ * ```
+ * @remarks
+ * - Items can include an `href` prop to render as semantic links for navigation
+ * - Set `enableVirtualization` to `true` when working with large datasets (hundreds or thousands of items)
+ * - Combine with `ListViewSection` to organize items into labeled groups
+ * - Use `disabledKeys` to disable specific items by their ID
+ * - Provide `renderEmptyState` to display custom content when the list is empty
+ * - Always provide an accessible label using `aria-label` or `aria-labelledby`
+ * @see {@link ListViewProps} for all available props
+ * @see Source code in {@link https://github.com/PayFit/hr-apps/tree/master/libs/shared/unity/components/src/core/components/list-view GitHub}
+ * @see Design specs {@link https://www.figma.com/design/poaMyU7abAgL9VRhx4ygyy/Unity-DS-%3E-Components-Library?node-id=15306-115&m=dev Figma}
+ * @see Design docs in {@link https://www.payfit.design/ Payfit.design}
+ * @see Developer docs in {@link https://unity-components.payfit.io/?path=/docs/component-reference-listview--docs unity-components.payfit.io}
+ */
+declare const ListView: ListViewComponentType;
+export { ListView };

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

@@ -0,0 +1,40 @@
+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/core/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 };

package/dist/esm/core/components/list-view/parts/ListViewItemLabel.d.ts

@@ -0,0 +1,34 @@
+import { TextProps } from '../../text/Text.js';
+export type ListViewItemLabelProps = Omit<TextProps, 'variant' | 'color'>;
+/**
+ * The ListViewItemLabel component displays the primary text label for a list item, providing accessible identification and consistent typography.
+ * ListViewItemLabel applies action-style typography with automatic text truncation after three lines, ensuring labels remain scannable while accommodating varying content lengths. This component is required for proper accessibility within list items, as it helps screen readers identify each item's purpose.
+ * @param {ListViewItemLabelProps} props - The props for the ListViewItemLabel component, inheriting all Text props except `variant` and `color` (which are preset)
+ * @example
+ * ```tsx
+ * import { ListView, RawListViewItem, ListViewItemLabel } from '@payfit/unity-components'
+ *
+ * function Example() {
+ *   return (
+ *     <ListView selectionMode="single">
+ *       <RawListViewItem>
+ *         <ListViewItemLabel>Employee Name</ListViewItemLabel>
+ *       </RawListViewItem>
+ *     </ListView>
+ *   )
+ * }
+ * ```
+ * @remarks
+ * - This component is required for accessibility - always include it in your RawListViewItem or provide `aria-label`/`textValue`
+ * - Text automatically truncates after 3 lines using `lineClamp` to maintain consistent item heights
+ * - Uses action-style typography (medium weight) to emphasize the label as the primary identifier
+ * - Content is automatically masked for privacy in Datadog recordings via `data-dd-privacy="mask"`
+ * - Inherits the disabled state styling from its parent RawListViewItem
+ * @see {@link ListViewItemLabelProps} for all available props
+ * @see Source code in {@link https://github.com/PayFit/hr-apps/tree/master/libs/shared/unity/components/src/core/components/list-view/parts GitHub}
+ * @see Design specs {@link https://www.figma.com/design/poaMyU7abAgL9VRhx4ygyy/Unity-DS-%3E-Components-Library?node-id=15306-942&m=dev Figma}
+ * @see Design docs in {@link https://www.payfit.design/ Payfit.design}
+ * @see Developer docs in {@link https://unity-components.payfit.io/?path=/docs/component-reference-listview-listviewitemlabel--docs unity-components.payfit.io}
+ */
+declare const ListViewItemLabel: import('react').ForwardRefExoticComponent<ListViewItemLabelProps & import('react').RefAttributes<HTMLElement>>;
+export { ListViewItemLabel };

package/dist/esm/core/components/list-view/parts/ListViewItemLabel.js

@@ -0,0 +1,17 @@
+import { Text as e } from "../../text/Text.js";
+import { forwardRef as t } from "react";
+import { jsx as n } from "react/jsx-runtime";
+//#region src/core/components/list-view/parts/ListViewItemLabel.tsx
+var r = t(({ children: t, ...r }, i) => /* @__PURE__ */ n(e, {
+	...r,
+	ref: i,
+	color: "inherit",
+	variant: "action",
+	"data-dd-privacy": "mask",
+	"data-unity-slot": "ListViewItemLabel",
+	lineClamp: 3,
+	children: t
+}));
+r.displayName = "ListViewItemLabel";
+//#endregion
+export { r as ListViewItemLabel };