@payfit/unity-components 3.1.13 → 3.1.15

package/dist/esm/core/components/actionable/Actionable.js

@@ -0,0 +1,68 @@
+import { forwardRef as e, useMemo as t, useState as n } from "react";
+import { uyTv as r } from "@payfit/unity-themes";
+import { mergeProps as i, useFocus as a, useHover as o, useObjectRef as s } from "react-aria";
+import { useFocusRing as c } from "react-aria/useFocusRing";
+import { useButton as l } from "react-aria/useButton";
+import { jsx as u } from "react/jsx-runtime";
+//#region src/core/components/actionable/Actionable.tsx
+var d = r({
+	base: "uy:group",
+	variants: { isUnstyled: {
+		true: "",
+		false: [
+			"uy:cursor-pointer",
+			"uy:aria-disabled:cursor-not-allowed",
+			"uy:aria-disabled:text-content-neutral-disabled"
+		]
+	} },
+	defaultVariants: { isUnstyled: !1 }
+}), f = e((e, r) => {
+	let { asElement: f = "div", isUnstyled: p = !1, className: m, children: h, ...g } = e;
+	r = s(r);
+	let { isFocusVisible: _, focusProps: v } = c(), { isHovered: y, hoverProps: b } = o({
+		onHoverStart: g.onHoverStart,
+		onHoverEnd: g.onHoverEnd,
+		onHoverChange: g.onHoverChange,
+		isDisabled: g.isDisabled
+	}), [x, S] = n(!1), { focusProps: C } = a({
+		onFocusChange: S,
+		isDisabled: g.isDisabled
+	}), { buttonProps: w, isPressed: T } = l({
+		...g,
+		isDisabled: g.isDisabled,
+		elementType: f
+	}, r), E = t(() => d({
+		isUnstyled: p,
+		className: m
+	}), [m, p]), D = f, O = (e) => {
+		if (g.isDisabled) {
+			e.preventDefault(), e.stopPropagation();
+			return;
+		}
+		let t = i(w, b, C, v);
+		t.onClick && t.onClick(e);
+	}, { onClick: k, ...A } = i(w, b, C, v);
+	return /* @__PURE__ */ u(D, {
+		...A,
+		onClick: O,
+		className: E,
+		...T && { "data-pressed": T },
+		...x && { "data-focused": x },
+		...y && { "data-hovered": y },
+		...g.isDisabled && { "data-disabled": g.isDisabled },
+		...x && _ && { "data-focus-visible": _ },
+		ref: r,
+		children: typeof h == "function" ? h({
+			isHovered: y,
+			isPressed: T,
+			isFocused: x,
+			isDisabled: !!g.isDisabled,
+			isFocusVisible: _,
+			isPending: !1,
+			defaultChildren: null
+		}) : h
+	});
+});
+f.displayName = "Actionable";
+//#endregion
+export { f as Actionable };

package/dist/esm/core/components/alert/Alert.js

@@ -0,0 +1,84 @@
+import { Icon as e } from "../icon/Icon.js";
+import { CircularIconButton as t } from "../icon-button/CircularIconButton.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";
+//#region src/core/components/alert/Alert.tsx
+var o = r({
+	slots: {
+		base: "uy:p-200 uy:flex uy:flex-col uy:sm:flex-row uy:gap-100 uy:sm:gap-200 uy:border uy:border-solid uy:rounded-150 uy:sm:rounded-100",
+		content: "uy:flex uy:flex-col uy:flex-1 uy:[&>header:has(+*:not(footer))]:mb-100 uy:[&>*+footer]:mt-200 uy:[&>*:first-child:not(header)]:sm:pt-50",
+		icon: "uy:sm:mt-50 uy:flex uy:justify-between uy:items-center uy:sm:items-start"
+	},
+	variants: { variant: {
+		info: {
+			base: "uy:bg-surface-info-lowest uy:border-border-info-lowest",
+			icon: "uy:text-content-info"
+		},
+		warning: {
+			base: "uy:bg-surface-warning-lowest uy:border-border-warning-lowest",
+			icon: "uy:text-content-warning"
+		},
+		success: {
+			base: "uy:bg-surface-success-lowest uy:border-border-success-lowest",
+			icon: "uy:text-content-success"
+		},
+		danger: {
+			base: "uy:bg-surface-danger-lowest uy:border-border-danger-lowest",
+			icon: "uy:text-content-danger"
+		},
+		insight: {
+			base: "uy:bg-surface-neutral-lowest uy:border-surface-neutral-lowest",
+			icon: "uy:text-content-neutral-lowest"
+		}
+	} },
+	defaultVariants: { variant: "info" }
+}), s = {
+	info: "InfoFilled",
+	warning: "WarningFilled",
+	success: "CheckCircleFilled",
+	danger: "WarningCircleFilled",
+	insight: "LightbulbFilamentFilled"
+}, c = n(({ children: n, variant: r = "info", isDismissable: c = !1, onDismiss: l, dismissButtonLabel: u, ...d }, f) => {
+	let { base: p, content: m, icon: h } = o({ variant: r }), g = s[r], _ = {
+		role: r === "danger" ? "alert" : "status",
+		"aria-live": r === "danger" ? "assertive" : "polite",
+		"aria-atomic": !0,
+		"aria-relevant": "additions removals"
+	};
+	return /* @__PURE__ */ a("div", {
+		...d,
+		"data-dd-privacy": "mask",
+		ref: f,
+		className: p(),
+		..._,
+		children: [
+			/* @__PURE__ */ a("div", {
+				className: h(),
+				children: [/* @__PURE__ */ i(e, {
+					src: g,
+					size: 24,
+					role: "presentation"
+				}), c && u && /* @__PURE__ */ i(t, {
+					title: u,
+					icon: "CloseOutlined",
+					onPress: l,
+					className: "uy:sm:hidden"
+				})]
+			}),
+			/* @__PURE__ */ i("section", {
+				className: m(),
+				children: n
+			}),
+			c && u && /* @__PURE__ */ i(t, {
+				title: u,
+				icon: "CloseOutlined",
+				onPress: l,
+				className: "uy:hidden uy:sm:flex"
+			})
+		]
+	});
+});
+c.displayName = "Alert";
+//#endregion
+export { c as Alert };

package/dist/esm/core/components/alert/parts/AlertActions.js

@@ -0,0 +1,19 @@
+import { forwardRef as e } from "react";
+import { uyTv as t } from "@payfit/unity-themes";
+import { jsx as n } from "react/jsx-runtime";
+//#region src/core/components/alert/parts/AlertActions.tsx
+var r = t({
+	base: "uy:flex uy:gap-100",
+	variants: { direction: {
+		row: "uy:flex-row",
+		column: "uy:flex-col"
+	} },
+	defaultVariants: { direction: "column" }
+}), i = e(({ children: e, direction: t = "column" }, i) => /* @__PURE__ */ n("footer", {
+	ref: i,
+	className: r({ direction: t }),
+	children: e
+}));
+i.displayName = "AlertActions";
+//#endregion
+export { i as AlertActions };

package/dist/esm/core/components/alert/parts/AlertContent.js

@@ -0,0 +1,13 @@
+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/alert/parts/AlertContent.tsx
+var r = t(({ children: t, ...r }, i) => /* @__PURE__ */ n(e, {
+	variant: "body",
+	ref: i,
+	...r,
+	children: t
+}));
+r.displayName = "AlertContent";
+//#endregion
+export { r as AlertContent };

package/dist/esm/core/components/alert/parts/AlertTitle.js

@@ -0,0 +1,15 @@
+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/alert/parts/AlertTitle.tsx
+var r = t(({ children: t, asElement: r = "h3", ...i }, a) => /* @__PURE__ */ n("header", { children: /* @__PURE__ */ n(e, {
+	variant: "h4",
+	asElement: r,
+	ref: a,
+	className: "uy:sm:pt-50",
+	...i,
+	children: t
+}) }));
+r.displayName = "AlertTitle";
+//#endregion
+export { r as AlertTitle };

package/dist/esm/core/components/anchor/Anchor.js

@@ -0,0 +1,41 @@
+import { cloneElement as e, useMemo as t } from "react";
+import { uyTv as n } from "@payfit/unity-themes";
+import { jsx as r, jsxs as i } from "react/jsx-runtime";
+//#region src/core/components/anchor/Anchor.tsx
+var a = n({
+	slots: {
+		root: "uy:relative uy:inline-block uy:leading-[0]",
+		main: "uy:relative uy:leading-[0]",
+		anchor: "uy:absolute uy:leading-[0] uy:scale-100"
+	},
+	variants: { position: {
+		"top-left": { anchor: "uy:origin-top-left uy:-translate-x-1/2 uy:-translate-y-1/2 uy:-top-[var(--anchor-offset-y)] uy:-left-[var(--anchor-offset-x)]" },
+		"top-right": { anchor: "uy:origin-top-right uy:translate-x-1/2 uy:-translate-y-1/2 uy:-top-[var(--anchor-offset-y)] uy:-right-[var(--anchor-offset-x)]" },
+		"bottom-right": { anchor: "uy:origin-bottom-right uy:translate-x-1/2 uy:translate-y-1/2 uy:-bottom-[var(--anchor-offset-x)] uy:-right-[var(--anchor-offset-y)]" },
+		"bottom-left": { anchor: "uy:origin-bottom-left uy:-translate-x-1/2 uy:translate-y-1/2 uy:-bottom-[var(--anchor-offset-x)] uy:-left-[var(--anchor-offset-y)]" }
+	} }
+}), o = ({ children: n, position: o = "top-right", offset: s = 0 }) => {
+	let [c, l] = n;
+	if (!c || !l) throw Error("Badge component requires exactly 2 children");
+	let u = t(() => Array.isArray(s) ? {
+		"--anchor-offset-x": `${s[0]}px`,
+		"--anchor-offset-y": `${s[1]}px`
+	} : {
+		"--anchor-offset-x": `${s}px`,
+		"--anchor-offset-y": `${s}px`
+	}, [s]), { root: d, main: f, anchor: p } = a({ position: o });
+	return /* @__PURE__ */ i("div", {
+		className: d(),
+		style: u,
+		children: [/* @__PURE__ */ r("div", {
+			className: f(),
+			children: e(c)
+		}), /* @__PURE__ */ r("div", {
+			className: p(),
+			children: e(l)
+		})]
+	});
+};
+o.displayName = "Anchor";
+//#endregion
+export { o as Anchor };

package/dist/esm/core/components/app-layout/AppLayout.js

@@ -0,0 +1,77 @@
+import { useRef as e } from "react";
+import { uyTv as t } from "@payfit/unity-themes";
+import { jsx as n, jsxs as r } from "react/jsx-runtime";
+import { useResizeObserver as i } from "usehooks-ts";
+//#region src/core/components/app-layout/AppLayout.tsx
+var a = t({
+	slots: {
+		body: "uy:min-h-dvh uy:relative uy:flex uy:flex-col uy:pt-(--uy-app-layout-header-sticky-offset)",
+		header: "uy:fixed uy:top-0 uy:left-0 uy:right-0 uy:z-30",
+		layoutWrapper: ["uy:flex uy:w-full uy:flex-1 uy:flex-col", "uy:md:flex-row"],
+		menu: [
+			"uy:sticky uy:top-(--uy-app-layout-header-sticky-offset) uy:z-20 uy:w-full uy:bg-canvas",
+			"uy:[&:has([data-mobile-open=true])]:fixed uy:[&:has([data-mobile-open=true])]:inset-x-0 uy:[&:has([data-mobile-open=true])]:bottom-0",
+			"uy:md:[&:has([data-mobile-open=true])]:sticky uy:md:[&:has([data-mobile-open=true])]:bottom-auto",
+			"uy:md:h-[calc(100dvh-var(--uy-app-layout-header-sticky-offset))] uy:md:max-w-app-menu uy:md:shrink-0"
+		],
+		contentWrapper: ["uy:flex uy:min-w-0 uy:flex-1 uy:flex-col uy:relative", "uy:md:[&:has([data-unity-page])]:pl-0"],
+		contentHeader: "uy:hidden uy:md:contents",
+		content: ["uy:isolate uy:flex uy:flex-1 uy:flex-col", "uy:md:[&:has([data-unity-page])]:pr-0 uy:md:[&:has([data-unity-page])]:pt-0"],
+		footer: "uy:hidden uy:md:block"
+	},
+	variants: { withoutContentPadding: {
+		false: {
+			content: [
+				"uy:md:pr-300",
+				"uy:md:pt-250",
+				"&:has()"
+			],
+			contentWrapper: ["uy:md:pl-100"]
+		},
+		true: {
+			content: [],
+			contentWrapper: []
+		}
+	} }
+});
+function o({ children: t, menu: o, header: s, contentHeader: c, footer: l, withoutContentPadding: u = !1 }) {
+	let d = e(null), { height: f = 0 } = i({
+		ref: d,
+		box: "border-box"
+	}), { body: p, header: m, menu: h, layoutWrapper: g, contentWrapper: _, contentHeader: v, content: y, footer: b } = a({ withoutContentPadding: u }), x = { "--uy-app-layout-header-sticky-offset": `${f}px` };
+	return /* @__PURE__ */ r("div", {
+		className: p(),
+		style: x,
+		children: [s && /* @__PURE__ */ n("div", {
+			ref: d,
+			className: m(),
+			role: "alert",
+			"aria-live": "assertive",
+			children: s
+		}), /* @__PURE__ */ r("div", {
+			className: g(),
+			children: [o && /* @__PURE__ */ n("div", {
+				className: h(),
+				children: o
+			}), /* @__PURE__ */ r("div", {
+				className: _(),
+				children: [
+					c && /* @__PURE__ */ n("div", {
+						className: v(),
+						children: c
+					}),
+					/* @__PURE__ */ n("div", {
+						className: y(),
+						children: t
+					}),
+					l && /* @__PURE__ */ n("footer", {
+						className: b(),
+						children: l
+					})
+				]
+			})]
+		})]
+	});
+}
+//#endregion
+export { o as AppLayout };

package/dist/esm/core/components/app-menu/AppMenu.js

@@ -0,0 +1,17 @@
+import { isMobileBreakpoint as e, useBreakpointListener as t } from "../../hooks/use-breakpoint-listener.js";
+import { AppMenuContextProvider as n, useAppMenuContext as r } from "./parts/AppMenu.context.js";
+import { usePreventScroll as i } from "react-aria";
+import { jsx as a } from "react/jsx-runtime";
+//#region src/core/components/app-menu/AppMenu.tsx
+var o = ({ children: n }) => {
+	let { isMobileMenuOpen: o } = r(), s = t();
+	return i({ isDisabled: !(o && e(s)) }), /* @__PURE__ */ a("div", {
+		className: "uy:relative uy:z-1 uy:flex uy:flex-col uy:px-150 uy:py-200 uy:gap-y-300 uy:data-[mobile-open=true]:h-full uy:md:h-full uy:md:max-w-app-menu",
+		"data-dd-privacy": "allow",
+		"data-mobile-open": o,
+		children: n
+	});
+}, s = ({ children: e }) => /* @__PURE__ */ a(n, { children: /* @__PURE__ */ a(o, { children: e }) });
+s.displayName = "AppMenu";
+//#endregion
+export { s as AppMenu };

package/dist/esm/core/components/app-menu/parts/AppMenu.context.js

@@ -0,0 +1,24 @@
+import { createContext as e, useContext as t, useState as n } from "react";
+import { jsx as r } from "react/jsx-runtime";
+//#region src/core/components/app-menu/parts/AppMenu.context.tsx
+var i = e({
+	isMobileMenuOpen: !1,
+	toggleMobileMenu: () => null
+});
+function a({ children: e }) {
+	let [t, a] = n(!1), o = {
+		toggleMobileMenu: () => {
+			a((e) => !e);
+		},
+		isMobileMenuOpen: t
+	};
+	return /* @__PURE__ */ r(i.Provider, {
+		value: o,
+		children: e
+	});
+}
+function o() {
+	return t(i);
+}
+//#endregion
+export { i as AppMenuContext, a as AppMenuContextProvider, o as useAppMenuContext };

package/dist/esm/core/components/app-menu/parts/AppMenuFooter.js

@@ -0,0 +1,24 @@
+import { isDesktopBreakpoint as e, useBreakpointListener as t } from "../../../hooks/use-breakpoint-listener.js";
+import { useAppMenuContext as n } from "./AppMenu.context.js";
+import { AppProfileMenuButton as r } from "../../app-profile-menu-button/AppProfileMenuButton.js";
+import { jsx as i, jsxs as a } from "react/jsx-runtime";
+//#region src/core/components/app-menu/parts/AppMenuFooter.tsx
+var o = ({ children: o, computeSlot: s, isProfileMenuButtonVisibleOnDesktop: c = !0, updateNotificationSlot: l, ...u }) => {
+	let { isMobileMenuOpen: d } = n(), f = t();
+	return /* @__PURE__ */ a("aside", {
+		className: "uy:shrink-0 uy:bg-canvas uy:md:mt-auto uy:md:bg-[transparent] uy:data-[mobile-open=false]:hidden uy:md:data-[mobile-open=false]:block uy:data-[mobile-open=true]:block",
+		"data-mobile-open": d,
+		id: "app-menu-profile-button",
+		children: [
+			s,
+			l,
+			(c || !e(f)) && /* @__PURE__ */ i(r, {
+				...u,
+				variant: "large",
+				children: o
+			})
+		]
+	});
+};
+//#endregion
+export { o as AppMenuFooter };

package/dist/esm/core/components/app-menu/parts/AppMenuHeader.d.ts

@@ -0,0 +1,96 @@
+import { ReactNode } from 'react';
+export interface AppMenuHeaderProps {
+    /**
+     * The application environment. Determines which brand logo variant to display.
+     */
+    environment: 'prod' | 'staging' | 'dev' | 'local';
+    /**
+     * Accessible label for the brand logo link.
+     */
+    brandLabel: string;
+    /**
+     * Optional help component to display while the mobile menu is open.
+     */
+    helpComponent?: ReactNode;
+    /**
+     * Optional notification component to display in the header.
+     */
+    notificationsComponent?: ReactNode;
+    /**
+     * Optional search component to display in the header.
+     */
+    searchComponent?: ReactNode;
+    /**
+     * Render function for the brand logo link. Enables integration with any routing library.
+     * Provides href and children (the logo component) for flexible link implementation.
+     * Defaults to React Aria's Link component, which works with Unity's RouterProvider for router-agnostic behavior.
+     * @example
+     * ```tsx
+     * // With Tanstack Router
+     * import { Link } from '@tanstack/react-router'
+     *
+     * <AppMenuHeader
+     *   renderLink={({ href, children }) => (
+     *     <Link to={href}>{children}</Link>
+     *   )}
+     * />
+     *
+     * // With React Router v5/v6
+     * import { Link } from 'react-router-dom'
+     *
+     * <AppMenuHeader
+     *   renderLink={({ href, children }) => (
+     *     <Link to={href}>{children}</Link>
+     *   )}
+     * />
+     *
+     * // With plain HTML link
+     * <AppMenuHeader
+     *   renderLink={({ href, children }) => (
+     *     <a href={href}>{children}</a>
+     *   )}
+     * />
+     * ```
+     */
+    renderLink?: (props: {
+        children: ReactNode;
+    }) => ReactNode;
+}
+/**
+ * The header section of the AppMenu component, displaying the PayFit brand logo, search, and notifications.
+ * Provides a router-agnostic approach through a render prop pattern for the brand logo link.
+ * @param props - Component props
+ * @param props.environment - The application environment (determines brand logo variant)
+ * @param props.brandLabel - Accessible label for the brand logo link
+ * @param props.helpComponent - Optional help component displayed while the mobile menu is open
+ * @param props.notificationsComponent - Optional notification component to display
+ * @param props.searchComponent - Optional search component to display
+ * @param props.renderLink - Optional render function for custom link implementation
+ * @example
+ * ```tsx
+ * import { AppMenuHeader } from '@payfit/unity-components'
+ *
+ * function AppShell() {
+ *   return (
+ *     <AppMenu>
+ *       <AppMenuHeader
+ *         environment="production"
+ *         linkHref="/"
+ *         linkLabel="PayFit Home"
+ *       />
+ *     </AppMenu>
+ *   )
+ * }
+ * ```
+ * @remarks
+ * - The brand logo automatically adapts based on the environment prop (production displays standard logo, others display pre-production variants)
+ * - By default, uses React Aria's Link component which integrates with Unity's RouterProvider
+ * - For router-specific implementations, pass a custom `renderLink` function with your router's Link component
+ * - On mobile viewports, displays a menu toggle button; on desktop, displays the brand logo with optional search and notifications
+ * @see {@link AppMenuHeaderProps} for all available props
+ * @see Source code in {@link https://github.com/PayFit/hr-apps/tree/master/libs/shared/unity/components/src/core/components/app-menu GitHub}
+ * @see Design specs {@link https://www.figma.com/design/poaMyU7abAgL9VRhx4ygyy/Unity-DS-%3E-Components-Library Figma}
+ * @see Design docs in {@link https://www.payfit.design/ Payfit.design}
+ * @see Developer docs in {@link https://unity-components.payfit.io/?path=/ unity-components.payfit.io}
+ */
+export declare const AppMenuHeader: ({ environment, brandLabel: linkLabel, helpComponent, notificationsComponent, searchComponent, renderLink, }: AppMenuHeaderProps) => import("react/jsx-runtime").JSX.Element;

package/dist/esm/core/components/app-menu/parts/AppMenuHeader.js

@@ -0,0 +1,60 @@
+import { isMobileBreakpoint as e, useBreakpointListener as t } from "../../../hooks/use-breakpoint-listener.js";
+import { Button as n } from "../../button/Button.js";
+import { useAppMenuContext as r } from "./AppMenu.context.js";
+import { PayFitBrand as i } from "../../payfit-brand/PayFitBrand.js";
+import { PayFitBrandPreprod as a } from "../../payfit-brand/PayFitPreprod.js";
+import { useMemo as o } from "react";
+import { jsx as s, jsxs as c } from "react/jsx-runtime";
+import { useIntl as l } from "react-intl";
+import { Link as u } from "react-aria-components/Link";
+//#region src/core/components/app-menu/parts/AppMenuHeader.tsx
+var d = ({ environment: d, brandLabel: f, helpComponent: p, notificationsComponent: m, searchComponent: h, renderLink: g = ({ children: e }) => /* @__PURE__ */ s(u, {
+	href: "/",
+	children: e
+}) }) => {
+	let { isMobileMenuOpen: _, toggleMobileMenu: v } = r(), y = l(), b = e(t()), x = b && _, S = o(() => b ? 36 : 78, [b]);
+	return /* @__PURE__ */ c("header", {
+		className: "uy:flex uy:shrink-0 uy:flex-col uy:gap-y-200 uy:pl-25 uy:pr-25",
+		children: [/* @__PURE__ */ c("div", {
+			className: "uy:flex uy:items-center uy:justify-between",
+			children: [/* @__PURE__ */ s("div", {
+				className: "uy:flex-0",
+				children: g({ children: d === "prod" ? /* @__PURE__ */ s(i, {
+					label: f,
+					width: S,
+					showOnlyMonogram: b
+				}) : /* @__PURE__ */ s(a, {
+					label: f,
+					env: d,
+					showOnlyMonogram: b
+				}) })
+			}), /* @__PURE__ */ c("div", {
+				className: "uy:flex uy:gap-150 uy:items-center",
+				children: [
+					x ? p : null,
+					m,
+					/* @__PURE__ */ s("div", {
+						className: "uy:block uy:md:hidden",
+						children: /* @__PURE__ */ s(n, {
+							variant: "ghost",
+							color: "neutral",
+							prefixIcon: _ ? "CloseOutlined" : "ListOutlined",
+							onPress: v,
+							"aria-expanded": _,
+							"aria-controls": "app-menu-nav-container app-menu-profile-button",
+							children: y.formatMessage({
+								id: _ ? "unity:component:app-menu:header:menu-close" : "unity:component:app-menu:header:menu-open",
+								defaultMessage: _ ? "Close navigation" : "Open navigation"
+							})
+						})
+					})
+				]
+			})]
+		}), /* @__PURE__ */ s("div", {
+			className: "uy:hidden uy:md:flex",
+			children: h
+		})]
+	});
+};
+//#endregion
+export { d as AppMenuHeader };

package/dist/esm/core/components/app-menu/parts/AppMenuNavContent.js

@@ -0,0 +1,15 @@
+import { useAppMenuContext as e } from "./AppMenu.context.js";
+import { uyMerge as t } from "@payfit/unity-themes";
+import { jsx as n } from "react/jsx-runtime";
+//#region src/core/components/app-menu/parts/AppMenuNavContent.tsx
+var r = ({ children: r }) => {
+	let { isMobileMenuOpen: i } = e();
+	return /* @__PURE__ */ n("div", {
+		className: t("uy:min-h-0 uy:flex-1 uy:flex-col uy:overflow-y-auto uy:overflow-x-hidden uy:gap-y-100 uy:pl-200 uy:pr-200 uy:pb-200 uy:scroll-py-100 uy:md:flex", "uy:bg-canvas uy:md:bg-[transparent]", "uy:md:pl-50 uy:md:pr-50 uy:md:pb-50", "uy:data-[mobile-open=false]:hidden uy:md:data-[mobile-open=false]:flex uy:data-[mobile-open=true]:flex"),
+		"data-mobile-open": i,
+		id: "app-menu-nav-container",
+		children: r
+	});
+};
+//#endregion
+export { r as AppMenuNavContent };

package/dist/esm/core/components/app-profile-menu-button/AppProfileMenuButton.js

@@ -0,0 +1,73 @@
+import { Actionable as e } from "../actionable/Actionable.js";
+import { Menu as t } from "../menu/Menu.js";
+import { MenuContent as n } from "../menu/parts/MenuContent.js";
+import { MenuTrigger as r } from "../menu/parts/MenuTrigger.js";
+import { MenuHeader as i } from "../menu/parts/MenuHeader.js";
+import { AppProfileMenuHeader as a } from "./parts/AppProfileMenuHeader.js";
+import { useId as o, useRef as s } from "react";
+import { uyTv as c } from "@payfit/unity-themes";
+import { jsx as l, jsxs as u } from "react/jsx-runtime";
+//#region src/core/components/app-profile-menu-button/AppProfileMenuButton.tsx
+var d = c({
+	base: [
+		"uy:transition-colors uy:rounded-75",
+		"uy:data-[hovered=true]:bg-surface-neutral-low-hover uy:hover:bg-surface-neutral-low-hover",
+		"uy:data-[pressed=true]:bg-surface-neutral-low-pressed uy:active:bg-surface-neutral-low-active",
+		"uy:data-[focus-visible=true]:outline-none uy:data-[focus-visible=true]:ring-2 uy:data-[focus-visible=true]:ring-utility-focus-ring uy:data-[focus-visible=true]:ring-offset-2"
+	],
+	variants: { variant: {
+		large: "uy:w-full uy:px-150 uy:py-100",
+		small: "uy:pr-0 uy:pl-100 uy:py-50"
+	} }
+}), f = c({ base: [
+	"uy:transition-all uy:duration-200 uy:ease-out uy:data-[entering]:opacity-100 uy:data-[exiting]:opacity-0",
+	"uy:data-[entering]:data-[placement=\"bottom\"]:-translate-y-100 uy:data-[exiting]:data-[placement=\"bottom\"]:translate-y-0",
+	"uy:data-[entering]:data-[placement=\"top\"]:translate-y-100 uy:data-[exiting]:data-[placement=\"top\"]:translate-y-0",
+	"uy:motion-reduce:transition-none"
+] }), p = ({ avatar: c, avatarPair: p, avatarVariant: m = "square", badgeLabel: h, children: g, defaultOpen: _, description: v, isOpen: y, menuTriggerDescription: b, onOpenChange: x, placement: S, title: C, uploadAvatarCallback: w, uploadAvatarDescription: T, uploadAvatarLabel: E, variant: D = "large" }) => {
+	let O = s(null), k = o(), A = o(), j = {
+		avatar: c,
+		avatarPair: p,
+		avatarSize: D === "small" ? "md" : "lg",
+		avatarVariant: m,
+		badgeLabel: h,
+		description: v,
+		labelId: k,
+		menuTriggerDescription: b,
+		title: C,
+		triggerDescriptionId: A,
+		triggerVariant: D,
+		uploadAvatarCallback: w,
+		uploadAvatarDescription: T,
+		uploadAvatarLabel: E
+	};
+	return /* @__PURE__ */ u(t, {
+		defaultOpen: _,
+		isOpen: y,
+		onOpenChange: x,
+		placement: S ?? (D === "small" ? "bottom right" : "top left"),
+		popoverClassName: f(),
+		triggerRef: O,
+		children: [/* @__PURE__ */ l(r, {
+			asChild: !0,
+			children: /* @__PURE__ */ l(e, {
+				ref: O,
+				"aria-describedby": A,
+				"aria-labelledby": k,
+				className: d({ variant: D }),
+				children: /* @__PURE__ */ l(a, { ...j })
+			})
+		}), /* @__PURE__ */ u(n, {
+			width: 312,
+			children: [/* @__PURE__ */ l(i, {
+				className: "uy:rounded-75",
+				children: /* @__PURE__ */ l(a, {
+					...j,
+					asMenuHeader: !0
+				})
+			}), g]
+		})]
+	});
+};
+//#endregion
+export { p as AppProfileMenuButton };