@payfit/unity-components
Version:
100 lines (99 loc) • 4.08 kB
JavaScript
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/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:theme-legacy:rounded-75 uy:theme-rebrand:rounded-100 uy:outline-0 uy:transition-all uy:min-h-5.5 uy:md:min-h-auto",
"uy:bg-transparent uy:theme-rebrand:border-1 uy:theme-rebrand:border-solid uy:theme-rebrand:border-transparent",
"uy:theme-legacy:data-[hovered]:bg-surface-neutral-low-hover",
"uy:theme-rebrand:data-[hovered]:bg-surface-neutral-lowest-hover uy:theme-rebrand:data-[hovered]:border-border-neutral-lowest-hover",
"uy:theme-legacy:active:bg-surface-neutral-low-active uy:theme-legacy:data-[pressed]:bg-surface-neutral-low-pressed",
"uy:theme-rebrand:active:bg-surface-neutral-lowest-active uy:theme-rebrand:active:border-border-neutral-lowest-pressed uy:theme-rebrand:data-[pressed]:bg-surface-neutral-lowest-pressed uy:theme-rebrand: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:theme-legacy:p-25 uy:theme-rebrand: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:theme-legacy:bg-surface-neutral-low-active uy:theme-rebrand:data-[level=1]:bg-surface-neutral-lowest-active", "uy:theme-rebrand:data-[level=0]:bg-surface-neutral uy:theme-rebrand:data-[level=0]:border-1 uy:theme-rebrand:data-[level=0]:border-solid uy:theme-rebrand:data-[level=0]:border-border-neutral uy:theme-rebrand:data-[level=0]:shadow-100"],
prefix: ["uy:theme-legacy:text-content-neutral", "uy:theme-rebrand: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 };