@carton-org/react-neumorphism
Version:
A React component library implementing the neumorphism design style
61 lines (60 loc) • 5.11 kB
JavaScript
import d from "@emotion/styled/base";
import { motion as l } from "motion/react";
import { spacings as b } from "../../constants/units.js";
const o = /* @__PURE__ */ d(l.div, process.env.NODE_ENV === "production" ? {
target: "e25xlg60"
} : {
target: "e25xlg60",
label: "StyledPopover"
})("z-index:99999999;position:fixed;width:max-content;padding:", b.xs, " ", b.sm, ";background:", ({
theme: c
}) => c.background, ";border-radius:", ({
theme: c
}) => c.borderRadius, ";box-shadow:", ({
theme: c
}) => c.shadow, ";border:", ({
theme: c
}) => c.border, ";", ({
$popoverContainerStyle: c
}) => ({
...c
}), ";" + (process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi9Vc2Vycy9iZW4vRG9jdW1lbnRzL1Byb2plY3RzL3JlYWN0LW5ldW1vcnBoaXNtZS9zcmMvbGliL2NvbXBvbmVudHMvUG9wb3Zlci9wb3BvdmVyLnN0eWxlcy50c3giXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBT0UiLCJmaWxlIjoiL1VzZXJzL2Jlbi9Eb2N1bWVudHMvUHJvamVjdHMvcmVhY3QtbmV1bW9ycGhpc21lL3NyYy9saWIvY29tcG9uZW50cy9Qb3BvdmVyL3BvcG92ZXIuc3R5bGVzLnRzeCIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCBzdHlsZWQgZnJvbSBcIkBlbW90aW9uL3N0eWxlZFwiO1xuaW1wb3J0IHsgbW90aW9uIH0gZnJvbSBcIm1vdGlvbi9yZWFjdFwiO1xuaW1wb3J0IHsgc3BhY2luZ3MgfSBmcm9tIFwiLi4vLi4vY29uc3RhbnRzXCI7XG5pbXBvcnQgeyBQb3BvdmVyQWxpZ25tZW50IH0gZnJvbSBcIi4vcG9wb3Zlci50eXBlc1wiO1xuXG5leHBvcnQgY29uc3QgU3R5bGVkUG9wb3ZlciA9IHN0eWxlZChtb3Rpb24uZGl2KTx7XG4gICRwb3BvdmVyQ29udGFpbmVyU3R5bGU/OiBSZWFjdC5DU1NQcm9wZXJ0aWVzO1xufT5gXG4gIHotaW5kZXg6IDk5OTk5OTk5O1xuICBwb3NpdGlvbjogZml4ZWQ7XG4gIHdpZHRoOiBtYXgtY29udGVudDtcbiAgcGFkZGluZzogJHtzcGFjaW5ncy54c30gJHtzcGFjaW5ncy5zbX07XG4gIGJhY2tncm91bmQ6ICR7KHsgdGhlbWUgfSkgPT4gdGhlbWUuYmFja2dyb3VuZH07XG4gIGJvcmRlci1yYWRpdXM6ICR7KHsgdGhlbWUgfSkgPT4gdGhlbWUuYm9yZGVyUmFkaXVzfTtcbiAgYm94LXNoYWRvdzogJHsoeyB0aGVtZSB9KSA9PiB0aGVtZS5zaGFkb3d9O1xuICBib3JkZXI6ICR7KHsgdGhlbWUgfSkgPT4gdGhlbWUuYm9yZGVyfTtcbiAgJHsoeyAkcG9wb3ZlckNvbnRhaW5lclN0eWxlIH0pID0+ICh7IC4uLiRwb3BvdmVyQ29udGFpbmVyU3R5bGUgfSl9XG5gO1xuXG5leHBvcnQgY29uc3QgZ2V0UG9zaXRpb25TdHlsZSA9IChcbiAgd3JhcHBlcjogSFRNTEVsZW1lbnQsXG4gIHRvb2x0aXBXcmFwcGVyOiBIVE1MRWxlbWVudCxcbiAgYWxpZ25tZW50OiBQb3BvdmVyQWxpZ25tZW50LFxuKTogeyB0b3A6IHN0cmluZzsgbGVmdDogc3RyaW5nIH0gPT4ge1xuICBjb25zdCBjb29yZHMgPSB3cmFwcGVyLmdldEJvdW5kaW5nQ2xpZW50UmVjdCgpO1xuICBjb25zdCBjb29yZHNUb29sVGlwID0gdG9vbHRpcFdyYXBwZXIuZ2V0Qm91bmRpbmdDbGllbnRSZWN0KCk7XG5cbiAgc3dpdGNoIChhbGlnbm1lbnQpIHtcbiAgICBjYXNlIFwidG9wLXJpZ2h0XCI6XG4gICAgICByZXR1cm4ge1xuICAgICAgICB0b3A6IGBjYWxjKCR7Y29vcmRzLnl9cHggLSAke3NwYWNpbmdzLnNtfSAtICR7Y29vcmRzVG9vbFRpcC5oZWlnaHR9cHgpYCxcbiAgICAgICAgbGVmdDogYGNhbGMoJHtjb29yZHMueH1weCArICR7Y29vcmRzLndpZHRofXB4IC0gJHtjb29yZHNUb29sVGlwLndpZHRofXB4KWAsXG4gICAgICB9O1xuICAgIGNhc2UgXCJ0b3AtbGVmdFwiOlxuICAgICAgcmV0dXJuIHtcbiAgICAgICAgdG9wOiBgY2FsYygke2Nvb3Jkcy55fXB4IC0gJHtzcGFjaW5ncy5zbX0gLSAke2Nvb3Jkc1Rvb2xUaXAuaGVpZ2h0fXB4KWAsXG4gICAgICAgIGxlZnQ6IGAke2Nvb3Jkcy54fXB4YCxcbiAgICAgIH07XG4gICAgY2FzZSBcInRvcC1jZW50ZXJcIjpcbiAgICAgIHJldHVybiB7XG4gICAgICAgIHRvcDogYGNhbGMoJHtjb29yZHMueX1weCAtICR7c3BhY2luZ3Muc219IC0gJHtjb29yZHNUb29sVGlwLmhlaWdodH1weClgLFxuICAgICAgICBsZWZ0OiBgY2FsYygkeyhjb29yZHMud2lkdGggLSBjb29yZHNUb29sVGlwLndpZHRoKSAvIDJ9cHggKyAke2Nvb3Jkcy54fXB4KWAsXG4gICAgICB9O1xuICAgIGNhc2UgXCJib3R0b20tbGVmdFwiOlxuICAgICAgcmV0dXJuIHtcbiAgICAgICAgdG9wOiBgY2FsYygke2Nvb3Jkcy55ICsgY29vcmRzLmhlaWdodH1weCArICR7c3BhY2luZ3Muc219KWAsXG4gICAgICAgIGxlZnQ6IGAke2Nvb3Jkcy54fXB4YCxcbiAgICAgIH07XG4gICAgY2FzZSBcImJvdHRvbS1yaWdodFwiOlxuICAgICAgcmV0dXJuIHtcbiAgICAgICAgdG9wOiBgY2FsYygke2Nvb3Jkcy55ICsgY29vcmRzLmhlaWdodH1weCArICR7c3BhY2luZ3Muc219KWAsXG4gICAgICAgIGxlZnQ6IGBjYWxjKCR7Y29vcmRzLnh9cHggKyAke2Nvb3Jkcy53aWR0aH1weCAtICR7Y29vcmRzVG9vbFRpcC53aWR0aH1weClgLFxuICAgICAgfTtcbiAgICBjYXNlIFwiYm90dG9tLWNlbnRlclwiOlxuICAgIGRlZmF1bHQ6XG4gICAgICByZXR1cm4ge1xuICAgICAgICB0b3A6IGBjYWxjKCR7Y29vcmRzLnkgKyBjb29yZHMuaGVpZ2h0fXB4ICsgJHtzcGFjaW5ncy5zbX0pYCxcbiAgICAgICAgbGVmdDogYGNhbGMoJHsoY29vcmRzLndpZHRoIC0gY29vcmRzVG9vbFRpcC53aWR0aCkgLyAyfXB4ICsgJHtjb29yZHMueH1weClgLFxuICAgICAgfTtcbiAgfVxufTtcbiJdfQ== */")), A = (c, t, C) => {
const g = c.getBoundingClientRect(), I = t.getBoundingClientRect();
switch (C) {
case "top-right":
return {
top: `calc(${g.y}px - ${b.sm} - ${I.height}px)`,
left: `calc(${g.x}px + ${g.width}px - ${I.width}px)`
};
case "top-left":
return {
top: `calc(${g.y}px - ${b.sm} - ${I.height}px)`,
left: `${g.x}px`
};
case "top-center":
return {
top: `calc(${g.y}px - ${b.sm} - ${I.height}px)`,
left: `calc(${(g.width - I.width) / 2}px + ${g.x}px)`
};
case "bottom-left":
return {
top: `calc(${g.y + g.height}px + ${b.sm})`,
left: `${g.x}px`
};
case "bottom-right":
return {
top: `calc(${g.y + g.height}px + ${b.sm})`,
left: `calc(${g.x}px + ${g.width}px - ${I.width}px)`
};
case "bottom-center":
default:
return {
top: `calc(${g.y + g.height}px + ${b.sm})`,
left: `calc(${(g.width - I.width) / 2}px + ${g.x}px)`
};
}
};
export {
o as StyledPopover,
A as getPositionStyle
};