@payfit/unity-components 3.1.13 → 3.1.15

package/dist/esm/core/components/multi-select/MultiSelect.js

@@ -0,0 +1,254 @@
+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 { Badge as r } from "../badge/Badge.js";
+import { reactAriaValueToSet as ee, setToReactAriaDefaultValue as i, setToReactAriaValue as te } from "./utils/selection-adapter.js";
+import { Search as ne } from "../search/Search.js";
+import { MultiSelectContext as re } from "./Multiselect.context.js";
+import { forwardRef as a, useCallback as o, useMemo as s, useRef as c, useState as l } from "react";
+import { uyTv as u } from "@payfit/unity-themes";
+import { jsx as d, jsxs as f } from "react/jsx-runtime";
+import { useIntl as ie } from "react-intl";
+import { Button as ae, ButtonContext as oe } from "react-aria-components/Button";
+import { Separator as se } from "react-aria-components/Separator";
+import { ListBox as p } from "react-aria-components/ListBox";
+import { Popover as ce } from "react-aria-components/Popover";
+import { Autocomplete as le, useFilter as ue } from "react-aria-components/Autocomplete";
+import { Select as de } from "react-aria-components/Select";
+//#region src/core/components/multi-select/MultiSelect.tsx
+var fe = u({
+	slots: {
+		root: "uy:relative uy:flex uy:flex-col uy:gap-100 uy:w-full",
+		trigger: "uy:relative uy:h-5.5 uy:sm:h-500 uy:flex uy:items-center uy:justify-between uy:py-125 uy:sm:py-100 uy:px-150 uy:w-full uy:border uy:border-solid uy:rounded-100 uy:sm:rounded-75 uy:focus-visible:outline-none uy:focus-visible:ring-2 uy:focus-visible:ring-utility-focus-ring uy:focus-visible:ring-offset-2 uy:active:not([disabled]):border-border-form-active uy:pointer-events-auto!",
+		inputValue: "uy:flex-1 uy:typography-body uy:text-left uy:line-clamp-1",
+		state: "uy:grow-0 uy:outline-none uy:typography-body uy:placeholder:text-content-neutral-lowest uy:inline-flex uy:gap-50 uy:items-center uy:px-100",
+		suffix: "uy:text-content-neutral-lowest",
+		clearButton: "uy:absolute uy:right-[36px] uy:top-1/2 uy:z-10 uy:-translate-y-1/2",
+		popover: "uy:shadow-300 uy:z-50 uy:w-(--trigger-width) uy:max-h-[min(var(--popover-available-height,300px),300px)] uy:rounded-100 uy:sm:rounded-75 uy:border uy:border-solid uy:border-border-neutral uy:bg-surface-neutral uy:overflow-y-auto uy:overflow-x-hidden uy:outline-none",
+		list: "uy:p-100 uy:overflow-y-auto uy:overflow-x-hidden"
+	},
+	variants: {
+		isDisabled: { true: {
+			trigger: "uy:bg-surface-form-disabled uy:cursor-not-allowed uy:border-border-form-disabled uy:text-content-form-disabled",
+			inputValue: "uy:text-content-form-disabled!",
+			state: "uy:text-content-form-disabled",
+			suffix: "uy:text-content-form-disabled"
+		} },
+		isReadOnly: { true: {
+			trigger: "uy:bg-surface-form-disabled uy:cursor-not-allowed uy:border-border-form-disabled",
+			inputValue: "uy:text-content-form-disabled",
+			state: "uy:text-content-form-disabled",
+			suffix: "uy:text-content-form-disabled"
+		} },
+		isInvalid: { true: {
+			trigger: "uy:bg-surface-form-error uy:border-border-form-error",
+			inputValue: "uy:text-content-form-error",
+			state: "uy:text-content-form-error"
+		} },
+		isEmpty: {
+			true: { inputValue: "uy:text-content-neutral-lowest" },
+			false: { inputValue: "uy:text-content-form-enabled" }
+		}
+	},
+	compoundVariants: [{
+		isInvalid: !1,
+		isDisabled: !1,
+		isReadOnly: !1,
+		className: {
+			trigger: "uy:border-border-form-enabled uy:bg-surface-form-enabled",
+			inputValue: "uy:text-content-form-enabled uy:bg-surface-form-enabled",
+			state: "uy:text-content-neutral-disabled"
+		}
+	}, {
+		isEmpty: !0,
+		isDisabled: !1,
+		isReadOnly: !1,
+		isInvalid: !1,
+		className: { inputValue: "uy:text-content-neutral-lowest" }
+	}]
+});
+function m(e) {
+	return e instanceof Map;
+}
+function pe(e) {
+	return !Object.prototype.hasOwnProperty.call(e, "items");
+}
+function h(e) {
+	return typeof e == "object" && e && "value" in e && (typeof e.value == "string" || typeof e.value == "number") ? e.value : typeof e == "object" && e && "id" in e && (typeof e.id == "string" || typeof e.id == "number") ? e.id : typeof e == "string" || typeof e == "number" ? e : String(e);
+}
+var g = (e) => Array.from(e).map(String).join(", "), _ = (e) => Array.from(e).map((e) => h(e)).join(", ");
+function v(a, u) {
+	let v = ie(), y = c(null), me = c(null), [he, b] = l(!1), x = pe(a), S = a, C = a, { placeholder: w, isDisabled: T, isReadOnly: E, isLoading: D, isInvalid: O, onClearButtonPress: k, onBlur: ge, onFocus: _e, onChange: A, onOpenChange: j, value: M, defaultValue: N, isSearchable: P, renderValue: F, maxVisibleItems: I = 7, children: L, searchOptions: ve, ...ye } = a, [R, be] = l(() => new Set(N ?? [])), z = x ? void 0 : S.items, B = x ? void 0 : S.getItemValue, V = M !== void 0, H = s(() => V ? new Set(M) : R, [
+		V,
+		M,
+		R
+	]), U = F ?? (x ? g : _), W = o((e) => x || !B ? h(e) : B(e), [B, x]), G = o(() => x || !z ? [] : m(z) ? Array.from(z.values()).flat() : Array.from(z), [z, x]), xe = s(() => {
+		if (x) return new Set(H);
+		let e = G(), t = /* @__PURE__ */ new Set();
+		return H.forEach((n) => {
+			let r = e.find((e) => W(e) === n);
+			r && t.add(r);
+		}), t;
+	}, [
+		G,
+		x,
+		W,
+		H
+	]), K = Array.from(xe), q = Math.max(K.length - I, 0), J = H.size > 0 && !T && !E && !D, { root: Se, trigger: Ce, inputValue: we, state: Te, suffix: Ee, clearButton: De, popover: Y, list: X } = fe({
+		isDisabled: !!T,
+		isReadOnly: !!E,
+		isInvalid: !!O,
+		isEmpty: H.size === 0
+	}), Oe = s(() => {
+		if (K.length === 0) return w;
+		let e = K.slice(0, I), t = new Set(e);
+		return U(t);
+	}, [
+		I,
+		w,
+		U,
+		K
+	]), Z = o((e) => {
+		V || be(e), A?.(e);
+	}, [V, A]), ke = o((e) => {
+		Z(ee(e));
+	}, [Z]), Ae = o(() => {
+		Z(/* @__PURE__ */ new Set()), k?.();
+	}, [k, Z]), je = o((e) => {
+		b(e), j?.(e);
+	}, [b, j]), Q = o(() => {
+		if (x) return C.children;
+		if (!z) return null;
+		if (m(z)) {
+			let e = z;
+			return Array.from(e.entries()).map(([e, t]) => L(e, t));
+		}
+		return Array.from(z).map((e) => L(e));
+	}, [
+		L,
+		z,
+		x,
+		C.children
+	]), $ = s(() => Q(), [Q]), { contains: Me } = ue(ve ?? { sensitivity: "base" });
+	return /* @__PURE__ */ d(de, {
+		...ye,
+		ref: y,
+		className: Se(),
+		isDisabled: T || E,
+		isInvalid: O,
+		onBlur: ge,
+		onChange: ke,
+		onFocus: _e,
+		onOpenChange: je,
+		placeholder: w,
+		selectionMode: "multiple",
+		shouldCloseOnSelect: !1,
+		value: te(H),
+		defaultValue: i(N),
+		allowsEmptyCollection: !0,
+		children: /* @__PURE__ */ f(re.Provider, {
+			value: {
+				isSearchable: P,
+				maxVisibleItems: I,
+				selectedKeys: H
+			},
+			children: [
+				/* @__PURE__ */ f(ae, {
+					ref: u,
+					className: Ce(),
+					"data-dd-privacy": "mask",
+					isDisabled: T || E,
+					"aria-invalid": O,
+					"aria-readonly": E,
+					children: [
+						/* @__PURE__ */ d("span", {
+							className: we(),
+							translate: "no",
+							children: H.size > 0 ? Oe : w
+						}),
+						/* @__PURE__ */ f("span", {
+							className: Te(),
+							children: [
+								D && /* @__PURE__ */ d(t, {
+									color: "inherit",
+									size: "small",
+									label: v.formatMessage({
+										id: "unity:component:form-field:form-input:spinner:label",
+										defaultMessage: "Loading"
+									})
+								}),
+								O && /* @__PURE__ */ d(e, {
+									src: "WarningCircleOutlined",
+									color: "content.form.invalid",
+									alt: v.formatMessage({
+										id: "unity:component:form-field:form-input:error:alt",
+										defaultMessage: "Error"
+									})
+								}),
+								q > 0 && /* @__PURE__ */ f(r, {
+									variant: "numeric",
+									children: ["+", q]
+								}),
+								J && /* @__PURE__ */ d("span", {
+									className: "uy:w-300 uy:shrink-0",
+									"aria-hidden": !0
+								})
+							]
+						}),
+						/* @__PURE__ */ d(e, {
+							className: Ee(),
+							src: he ? "CaretUpOutlined" : "CaretDownOutlined",
+							role: "presentation"
+						})
+					]
+				}),
+				J && /* @__PURE__ */ d(oe.Provider, {
+					value: null,
+					children: /* @__PURE__ */ d(n, {
+						title: v.formatMessage({
+							id: "unity:component:common:clear:title",
+							defaultMessage: "Clear"
+						}),
+						className: De(),
+						icon: "CloseOutlined",
+						onPress: Ae,
+						asElement: "button"
+					})
+				}),
+				/* @__PURE__ */ d(ce, {
+					ref: me,
+					offset: 1,
+					containerPadding: 8,
+					className: Y(),
+					children: P ? /* @__PURE__ */ f(le, {
+						filter: Me,
+						children: [
+							/* @__PURE__ */ d("div", {
+								className: "uy:m-100",
+								children: /* @__PURE__ */ d(ne, {
+									label: v.formatMessage({
+										id: "unity:component:select:search:label",
+										defaultMessage: "Search options"
+									}),
+									"data-dd-privacy": "mask"
+								})
+							}),
+							/* @__PURE__ */ d(se, { className: "uy:mx-100 uy:border-t uy:border-border-neutral uy:border-solid" }),
+							/* @__PURE__ */ d(p, {
+								className: X(),
+								children: $
+							})
+						]
+					}) : /* @__PURE__ */ d(p, {
+						className: X(),
+						children: $
+					})
+				})
+			]
+		})
+	});
+}
+var y = a(v);
+y.displayName = "MultiSelect";
+//#endregion
+export { y as MultiSelect };

package/dist/esm/core/components/multi-select/Multiselect.context.js

@@ -0,0 +1,8 @@
+import { createContext as e } from "react";
+//#region src/core/components/multi-select/Multiselect.context.tsx
+var t = e({
+	isSearchable: !1,
+	selectedKeys: /* @__PURE__ */ new Set()
+});
+//#endregion
+export { t as MultiSelectContext };

package/dist/esm/core/components/multi-select/parts/MultiSelectOptGroup.js

@@ -0,0 +1,37 @@
+import { uyTv as e } from "@payfit/unity-themes";
+import { Fragment as t, jsx as n, jsxs as r } from "react/jsx-runtime";
+import { Header as i } from "react-aria-components/Header";
+import { Separator as a } from "react-aria-components/Separator";
+import { ListBoxSection as o } from "react-aria-components/ListBox";
+import { Collection as s } from "react-aria-components/Collection";
+//#region src/core/components/multi-select/parts/MultiSelectOptGroup.tsx
+var c = e({ slots: {
+	base: "uy:flex uy:flex-col uy:bg-surface-neutral",
+	label: "uy:px-150 uy:py-100 uy:typography-body-strong uy:text-content-neutral",
+	separator: "uy:my-100 uy:border-t uy:border-border-neutral uy:border-solid"
+} });
+function l(e) {
+	return "items" in e && Array.isArray(e.items) && typeof e.children == "function";
+}
+function u(e) {
+	let { base: u, label: d, separator: f } = c(), { label: p, withSeparator: m, className: h, ...g } = e;
+	return /* @__PURE__ */ r(t, { children: [/* @__PURE__ */ r(o, {
+		...g,
+		id: p,
+		className: u({ className: h }),
+		children: [/* @__PURE__ */ n(i, {
+			className: d(),
+			children: p
+		}), l(e) ? /* @__PURE__ */ n(s, {
+			items: e.items,
+			children: e.children
+		}) : e.children]
+	}), m && /* @__PURE__ */ n(a, {
+		orientation: "horizontal",
+		className: f(),
+		"aria-hidden": !0
+	})] });
+}
+u.displayName = "MultiSelectOptGroup";
+//#endregion
+export { u as MultiSelectOptGroup };

package/dist/esm/core/components/multi-select/parts/MultiSelectOption.js

@@ -0,0 +1,63 @@
+import e from "../../../hooks/use-id.js";
+import { CheckboxIndicator as t } from "../../checkbox/parts/CheckboxIndicator.js";
+import { forwardRef as n } from "react";
+import { uyTv as r } from "@payfit/unity-themes";
+import { Fragment as i, jsx as a, jsxs as o } from "react/jsx-runtime";
+import { ListBoxItem as s } from "react-aria-components/ListBox";
+//#region src/core/components/multi-select/parts/MultiSelectOption.tsx
+var c = r({
+	slots: {
+		base: [
+			"uy:flex uy:flex-col uy:transition",
+			"uy:w-full uy:px-150 uy:py-100",
+			"uy:rounded-50 uy:cursor-pointer",
+			"uy:outline-none",
+			"uy:data-[hovered=true]:bg-surface-neutral-hover",
+			"uy:data-[pressed=true]:bg-surface-neutral-pressed",
+			"uy:data-[focus-visible=true]:outline uy:data-[focus-visible=true]:outline-2 uy:data-[focus-visible=true]:outline-solid uy:data-[focus-visible=true]:outline-utility-focus-ring uy:data-[focus-visible=true]:-outline-offset-2"
+		],
+		label: "uy:inline-flex uy:items-center uy:gap-100 uy:text-content-neutral uy:typography-body",
+		helperText: "uy:inline-block uy:typography-body uy:text-content-neutral-low uy:pl-3.5"
+	},
+	variants: { isDisabled: {
+		true: {
+			base: "uy:cursor-not-allowed!",
+			label: "uy:text-content-neutral-disabled",
+			helperText: "uy:text-content-neutral-disabled"
+		},
+		false: { base: "" }
+	} }
+});
+function l(e, t) {
+	if (t !== void 0) return t;
+	if (typeof e == "string") return e;
+}
+function u({ value: n, children: r, isDisabled: u, helperText: d, textValue: f, ...p }, m) {
+	let h = e(), { base: g, label: _, helperText: v } = c({ isDisabled: u });
+	return /* @__PURE__ */ a(s, {
+		"data-dd-privacy": "mask",
+		...p,
+		ref: m,
+		id: n,
+		isDisabled: u,
+		textValue: l(r, f),
+		className: g(),
+		"aria-describedby": d ? `${h}-helper-text` : void 0,
+		children: ({ isSelected: e }) => /* @__PURE__ */ o(i, { children: [/* @__PURE__ */ o("div", {
+			className: _(),
+			children: [/* @__PURE__ */ a(t, {
+				isSelected: e,
+				isDisabled: u,
+				"data-dd-privacy": "hidden"
+			}), r]
+		}), d && /* @__PURE__ */ a("span", {
+			id: `${h}-helper-text`,
+			className: v(),
+			children: d
+		})] })
+	});
+}
+u.displayName = "MultiSelectOption";
+var d = n(u);
+//#endregion
+export { d as MultiSelectOption };

package/dist/esm/core/components/multi-select/utils/selection-adapter.js

@@ -0,0 +1,12 @@
+//#region src/core/components/multi-select/utils/selection-adapter.ts
+function e(e) {
+	if (e !== void 0) return Array.from(e);
+}
+function t(e) {
+	if (e !== void 0) return Array.from(e);
+}
+function n(e) {
+	return new Set(e.filter((e) => typeof e == "string" || typeof e == "number"));
+}
+//#endregion
+export { n as reactAriaValueToSet, t as setToReactAriaDefaultValue, e as setToReactAriaValue };

package/dist/esm/core/components/multi-select-field/test-utils.js

@@ -0,0 +1,22 @@
+import { expect as e, screen as t, userEvent as n, within as r } from "storybook/test";
+//#region src/core/components/multi-select-field/test-utils.ts
+var i = (i) => ({
+	selectOption: async ({ labelText: e, optionNames: a, container: o = i.canvasElement }) => {
+		await i.step(`Select options "${a.join(", ")}" in "${e}"`, async () => {
+			let i = r(o).getByLabelText(e, { exact: !1 });
+			if (!i) throw Error(`Multi-select not found for label ${e}`);
+			await n.click(i, { delay: 100 });
+			for (let e of a) await n.click(t.getByRole("option", { name: e }), { delay: 100 });
+			await n.keyboard("{Escape}", { delay: 100 });
+		});
+	},
+	assertSelectedOptions: async ({ labelText: t, expectedDisplayValue: n, container: a = i.canvasElement }) => {
+		await i.step(`Assert selected options "${n}" in "${t}"`, async () => {
+			let i = r(a).getByLabelText(t, { exact: !1 });
+			if (!i) throw Error(`Multi-select not found for label ${t}`);
+			await e(i).toHaveTextContent(n);
+		});
+	}
+});
+//#endregion
+export { i as getTestingUtilsMultiSelect };

package/dist/esm/core/components/nav/Nav.js

@@ -0,0 +1,22 @@
+import e from "../../hooks/use-id.js";
+import { jsx as t, jsxs as n } from "react/jsx-runtime";
+//#region src/core/components/nav/Nav.tsx
+function r({ children: r, title: i, ...a }) {
+	let o = `nav-title-${e()}`;
+	return /* @__PURE__ */ n("nav", {
+		...a,
+		className: "uy:flex uy:flex-col uy:gap-50 uy:min-w-[264px]",
+		"aria-labelledby": o,
+		children: [/* @__PURE__ */ t("h3", {
+			id: o,
+			className: "uy:typography-body-strong uy:text-content-neutral uy:py-100 uy:px-150",
+			children: i
+		}), /* @__PURE__ */ t("ul", {
+			className: "uy:flex uy:flex-col uy:gap-50 uy:list-none",
+			children: r
+		})]
+	});
+}
+r.displayName = "Nav";
+//#endregion
+export { r as Nav };

package/dist/esm/core/components/nav/parts/NavGroup.js

@@ -0,0 +1,105 @@
+import { Icon as e } from "../../icon/Icon.js";
+import t from "../../../hooks/use-id.js";
+import { navItemBase as n } from "./RawNavItem.js";
+import r, { useCallback as i, useMemo as a, useState as o } from "react";
+import { uyTv as s } from "@payfit/unity-themes";
+import { jsx as c, jsxs as l } from "react/jsx-runtime";
+import { Button as u } from "react-aria-components/Button";
+//#region src/core/components/nav/parts/NavGroup.tsx
+var d = s({
+	extend: n,
+	slots: {
+		base: "uy:border-1 uy:border-solid",
+		caret: "uy:transition-transform uy:duration-150 uy:delay-25 uy:ease-linear motion-reduce:transition-none",
+		contentWrapper: "uy:transition-[max-height] uy:duration-200 uy:ease-linear motion-reduce:transition-none",
+		content: "uy:list-none uy:flex uy:flex-col uy:gap-50 uy:transition-opacity uy:duration-150 uy:delay-25 uy:ease-linear"
+	},
+	variants: { expanded: {
+		true: {
+			base: ["", "uy:bg-surface-neutral uy:border-border-neutral uy:shadow-100"],
+			prefix: ["", "uy:text-content-primary"],
+			caret: "uy:rotate-180",
+			contentWrapper: "uy:max-h-[1000px] uy:overflow-visible",
+			label: "uy:typography-body-strong",
+			content: "uy:opacity-100 uy:visible"
+		},
+		false: {
+			caret: "uy:rotate-0",
+			contentWrapper: "uy:max-h-0 uy:overflow-hidden",
+			content: "uy:opacity-0 uy:invisible uy:pointer-events-none",
+			label: "uy:typography-body",
+			base: "uy:border-transparent"
+		}
+	} }
+});
+function f({ children: n, label: s, prefix: f, suffix: p, defaultExpanded: m = !1, isExpanded: h, onToggle: g, ..._ }) {
+	let v = t(), [y, b] = o(m), x = h !== void 0, S = x ? h : y, C = i(() => {
+		x || b((e) => !e), g?.(!S);
+	}, [
+		x,
+		S,
+		g
+	]), w = r.Children.map(n, (e) => r.isValidElement(e) ? r.cloneElement(e, {
+		isDisabled: !S,
+		level: 1
+	}) : e), T = `${v}-toggle`, E = `${v}-content`, { baseClassName: D, prefixClassName: O, labelClassName: k, suffixClassName: A, contentClassName: j, contentWrapperClassName: M, caretClassName: N } = a(() => {
+		let e = d({
+			level: 0,
+			expanded: S
+		});
+		return {
+			baseClassName: e.base({ className: "uy:w-full" }),
+			prefixClassName: e.prefix(),
+			suffixClassName: e.suffix(),
+			labelClassName: e.label(),
+			contentWrapperClassName: e.contentWrapper(),
+			contentClassName: e.content(),
+			caretClassName: e.caret()
+		};
+	}, [S]);
+	return /* @__PURE__ */ l("li", {
+		className: "uy:flex uy:flex-col uy:gap-50",
+		children: [/* @__PURE__ */ l(u, {
+			id: T,
+			className: D,
+			onPress: C,
+			"aria-expanded": S,
+			"aria-controls": E,
+			..._,
+			children: [
+				f && /* @__PURE__ */ c("span", {
+					className: O,
+					children: f({ isExpanded: S })
+				}),
+				/* @__PURE__ */ c("span", {
+					className: k,
+					children: s
+				}),
+				/* @__PURE__ */ l("span", {
+					className: A,
+					role: "presentation",
+					children: [p, /* @__PURE__ */ c(e, {
+						src: "CaretDownOutlined",
+						alt: "expand group",
+						size: 20,
+						className: N,
+						color: "inherit"
+					})]
+				})
+			]
+		}), /* @__PURE__ */ c("div", {
+			className: M,
+			style: { maxHeight: S ? 1e3 : 0 },
+			children: /* @__PURE__ */ c("ul", {
+				id: E,
+				className: j,
+				"aria-labelledby": T,
+				"aria-hidden": !S,
+				children: w
+			})
+		})]
+	});
+}
+f.displayName = "NavGroup";
+//#endregion
+export { f as NavGroup };

package/dist/esm/core/components/nav/parts/RawNavItem.js

@@ -0,0 +1,99 @@
+import { useRouter as e } from "../../../providers/router/RouterProvider.js";
+import { forwardRef as t, useMemo as n } from "react";
+import { uyMerge as r, uyTv as i } from "@payfit/unity-themes";
+import { jsx as a, jsxs as o } from "react/jsx-runtime";
+import { Button as s } from "react-aria-components/Button";
+import { Link as c } from "react-aria-components/Link";
+//#region src/core/components/nav/parts/RawNavItem.tsx
+var l = i({
+	slots: {
+		base: [
+			"uy:group uy:cursor-pointer uy:grid uy:w-full uy:grid-cols-[auto_1fr_auto] uy:items-center uy:py-100 uy:px-150 uy:gap-100  uy:rounded-100 uy:outline-0 uy:transition-all uy:min-h-5.5 uy:md:min-h-auto",
+			"uy:bg-transparent uy:border-1 uy:border-solid uy:border-transparent",
+			"",
+			"uy:data-[hovered]:bg-surface-neutral-lowest-hover uy:data-[hovered]:border-border-neutral-lowest-hover",
+			" ",
+			"uy:active:bg-surface-neutral-lowest-active uy:active:border-border-neutral-lowest-pressed uy:data-[pressed]:bg-surface-neutral-lowest-pressed uy:data-[pressed]:border-border-neutral-lowest-pressed",
+			"uy:focus:outline-0 uy:data-[focus-visible]:outline-none uy:data-[focus-visible]:ring-2 uy:data-[focus-visible]:ring-utility-focus-ring uy:data-[focus-visible]:ring-offset-2"
+		],
+		prefix: "uy:px-25 uy:empty:hidden uy:text-content-neutral-low",
+		suffix: "uy:flex uy:gap-100 uy:items-center uy:text-content-neutral-low uy:justify-self-end uy:text-right uy:empty:hidden",
+		label: ["uy:flex-1 uy:basis-full uy:text-left uy:truncate uy:overflow-hidden uy:whitespace-break-spaces uy:typography-body uy:text-content-neutral"]
+	},
+	variants: {
+		level: {
+			0: "uy:pl-150",
+			1: "uy:pl-600"
+		},
+		isDisabled: {
+			true: {
+				base: "uy:pointer-events-none",
+				label: "uy:text-content-neutral-disabled"
+			},
+			false: ""
+		}
+	}
+}), u = i({
+	extend: l,
+	variants: { isActive: {
+		true: {
+			base: ["uy:data-[level=1]:bg-surface-neutral-lowest-active", "uy:data-[level=0]:bg-surface-neutral uy:data-[level=0]:border-1 uy:data-[level=0]:border-solid uy:data-[level=0]:border-border-neutral uy:data-[level=0]:shadow-100"],
+			prefix: ["", "uy:text-content-primary"],
+			label: "uy:typography-body-strong"
+		},
+		false: {
+			base: "",
+			prefix: "uy:text-content-neutral-low",
+			label: "uy:typography-body"
+		}
+	} }
+}), d = t(({ children: t, level: i = 0, prefix: l, suffix: d, onPress: f, href: p, isCurrent: m, isDisabled: h = !1, isExact: g = !1, ..._ }, v) => {
+	let y = e(), b = p ? c : s, x = y && p ? y.isActive(p, g) : m, { rawNavItemClassName: S, labelClassName: C, prefixClassName: w, suffixClassName: T } = n(() => {
+		let e = u({
+			level: i,
+			isActive: x,
+			isDisabled: h
+		});
+		return {
+			rawNavItemClassName: r(e.base(), e.label()),
+			prefixClassName: e.prefix(),
+			suffixClassName: e.suffix(),
+			labelClassName: e.label()
+		};
+	}, [
+		x,
+		h,
+		i
+	]);
+	return /* @__PURE__ */ a("li", { children: /* @__PURE__ */ o(b, {
+		...Object.assign({}, x !== void 0 && {
+			"data-current": x,
+			"aria-current": x ? "page" : void 0
+		}, !p && { tabIndex: h ? -1 : void 0 }),
+		..._,
+		ref: v,
+		className: S,
+		href: p,
+		onPress: f,
+		isDisabled: h,
+		"data-level": i,
+		"data-selected": x,
+		children: [
+			l && /* @__PURE__ */ a("span", {
+				className: w,
+				children: l({ isCurrent: x ?? !1 })
+			}),
+			/* @__PURE__ */ a("span", {
+				className: C,
+				children: t
+			}),
+			d && /* @__PURE__ */ a("span", {
+				className: T,
+				children: d
+			})
+		]
+	}) });
+});
+d.displayName = "RawNavItem";
+//#endregion
+export { d as RawNavItem, l as navItemBase };

package/dist/esm/core/components/navigation-card/NavigationCard.context.js

@@ -0,0 +1,12 @@
+import { createContext as e, useContext as t } from "react";
+//#region src/core/components/navigation-card/NavigationCard.context.tsx
+var n = e({
+	id: "",
+	labelId: "",
+	descriptionId: ""
+});
+function r() {
+	return t(n);
+}
+//#endregion
+export { n as NavigationCardContext, r as useNavigationCardContext };