@payfit/unity-components
Version:
42 lines (41 loc) • 1.75 kB
JavaScript
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/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 };