@payfit/unity-components
Version:
39 lines (38 loc) • 1.41 kB
JavaScript
import { Icon as e } from "../../icon/Icon.js";
import { uyTv as t } from "@payfit/unity-themes";
import { jsx as n } from "react/jsx-runtime";
import { Button as r } from "react-aria-components/Button";
//#region src/components/tabs/parts/NavigationButton.tsx
var i = t({
slots: {
base: "uy:absolute uy:pt-150 uy:pb-150",
button: [
"uy:hover:text-content-neutral-hover uy:focus-visible:outline-2 uy:focus-visible:outline-offset-2 uy:focus-visible:outline-utility-focus-ring",
"uy:theme-legacy:rounded-circle",
"uy:theme-rebrand:rounded-75"
],
icon: "uy:text-content-neutral-enabled"
},
variants: { direction: {
left: { base: "uy:top-0 uy:left-0 uy:z-10 uy:bg-gradient-to-r uy:from-grayscale-l0/100 uy:to-grayscale-L0/0 uy:pl-50 uy:pr-200" },
right: { base: "uy:right-0 uy:top-0 uy:z-10 uy:bg-gradient-to-l uy:from-grayscale-l0/100 uy:to-grayscale-L0/0 uy:pl-200 uy:pr-50" }
} }
}), a = ({ direction: t, onPress: a }) => {
let { base: o, button: s, icon: c } = i({ direction: t });
return /* @__PURE__ */ n("div", {
className: o(),
children: /* @__PURE__ */ n(r, {
id: `scroll-${t}`,
className: s(),
"aria-label": `Scroll ${t}`,
onPress: a,
children: /* @__PURE__ */ n(e, {
className: c(),
"aria-labelledby": `scroll-${t}`,
src: t === "left" ? "CaretLeftOutlined" : "CaretRightOutlined"
})
})
});
};
//#endregion
export { a as NavigationButton };