@payfit/unity-components
Version:
76 lines (75 loc) • 3.19 kB
JavaScript
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/components/app-profile-menu-button/AppProfileMenuButton.tsx
var d = c({
base: [
"uy:transition-colors uy:rounded-75",
"uy:theme-legacy:data-[hovered=true]:bg-surface-neutral-low-hover uy:theme-legacy:hover:bg-surface-neutral-low-hover",
"uy:theme-rebrand:data-[hovered=true]:bg-surface-neutral-lowest-hover uy:theme-rebrand:hover:bg-surface-neutral-lowest-hover",
"uy:theme-legacy:data-[pressed=true]:bg-surface-neutral-low-pressed uy:theme-legacy:active:bg-surface-neutral-low-active",
"uy:theme-rebrand:data-[pressed=true]:bg-surface-neutral-lowest-pressed uy:theme-rebrand:active:bg-surface-neutral-lowest-active",
"uy:focus-visible:outline-none uy:focus-visible:ring-2 uy:focus-visible:ring-utility-focus-ring uy:focus-visible:ring-offset-2"
],
variants: { variant: {
large: "uy:w-full uy:px-150 uy:py-100",
small: "uy:pr-0 uy:pl-100 uy:py-25"
} }
}), 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 };