@carton-org/react-neumorphism
Version:
A React component library implementing the neumorphism design style
41 lines (40 loc) • 9.46 kB
JavaScript
import { jsx as A } from "@emotion/react/jsx-runtime";
import { useState as W, useRef as Z, useLayoutEffect as m } from "react";
import { css as t } from "@emotion/react";
import { AnimatePresence as B, motion as V } from "motion/react";
import R from "./Toast.js";
import { getPositionStyle as p, getToastsAnimation as F, getToastAlignement as v } from "./toast.styles.js";
import { spacings as N } from "../../constants/units.js";
const o = ({
toasts: c,
removeToast: X,
position: g
}) => {
const [G, d] = W(void 0), C = Z(null);
m(() => {
C.current !== null && d(p(g, C.current));
}, [g, C]);
const b = F(g), i = g.startsWith("bottom"), u = v(g);
return /* @__PURE__ */ A("div", { ref: C, css: [/* @__PURE__ */ t({
position: "fixed",
zIndex: 99999999,
display: "flex",
flexDirection: "column",
gap: N.sm,
alignItems: u,
background: "transparent"
}, process.env.NODE_ENV === "production" ? "" : ";label:ToastContainer;", process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi9Vc2Vycy9iZW4vRG9jdW1lbnRzL1Byb2plY3RzL3JlYWN0LW5ldW1vcnBoaXNtZS9zcmMvbGliL2NvbXBvbmVudHMvVG9hc3QvVG9hc3RDb250YWluZXIudHN4Il0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQTRDUSIsImZpbGUiOiIvVXNlcnMvYmVuL0RvY3VtZW50cy9Qcm9qZWN0cy9yZWFjdC1uZXVtb3JwaGlzbWUvc3JjL2xpYi9jb21wb25lbnRzL1RvYXN0L1RvYXN0Q29udGFpbmVyLnRzeCIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB7IHVzZUxheW91dEVmZmVjdCwgdXNlUmVmLCB1c2VTdGF0ZSB9IGZyb20gXCJyZWFjdFwiO1xuaW1wb3J0IHsgY3NzLCBTZXJpYWxpemVkU3R5bGVzIH0gZnJvbSBcIkBlbW90aW9uL3JlYWN0XCI7XG5pbXBvcnQgeyBBbmltYXRlUHJlc2VuY2UsIG1vdGlvbiB9IGZyb20gXCJtb3Rpb24vcmVhY3RcIjtcbmltcG9ydCB7IEV4dGVuZGVkVG9hc3QgfSBmcm9tIFwiLi90b2FzdC50eXBlXCI7XG5pbXBvcnQgVG9hc3QgZnJvbSBcIi4vVG9hc3RcIjtcbmltcG9ydCB7IFNjcmVlblBvc2l0aW9uIH0gZnJvbSBcIi4uLy4uL3R5cGVzXCI7XG5pbXBvcnQgeyBzcGFjaW5ncyB9IGZyb20gXCIuLi8uLi9jb25zdGFudHNcIjtcbmltcG9ydCB7XG4gIGdldFBvc2l0aW9uU3R5bGUsXG4gIGdldFRvYXN0QWxpZ25lbWVudCxcbiAgZ2V0VG9hc3RzQW5pbWF0aW9uLFxufSBmcm9tIFwiLi90b2FzdC5zdHlsZXNcIjtcbmludGVyZmFjZSBUb2FzdENvbnRhaW5lclByb3BzIHtcbiAgdG9hc3RzOiBFeHRlbmRlZFRvYXN0W107XG4gIHJlbW92ZVRvYXN0OiAoaWQ6IHN0cmluZykgPT4gdm9pZDtcbiAgcG9zaXRpb246IFNjcmVlblBvc2l0aW9uO1xufVxuXG5leHBvcnQgY29uc3QgVG9hc3RDb250YWluZXI6IFJlYWN0LkZDPFRvYXN0Q29udGFpbmVyUHJvcHM+ID0gKHtcbiAgdG9hc3RzLFxuICByZW1vdmVUb2FzdCxcbiAgcG9zaXRpb24sXG59KSA9PiB7XG4gIGNvbnN0IFtwb3NpdGlvblN0eWxlLCBzZXRQb3NpdGlvblN0eWxlXSA9IHVzZVN0YXRlPFxuICAgIFNlcmlhbGl6ZWRTdHlsZXMgfCB1bmRlZmluZWRcbiAgPih1bmRlZmluZWQpO1xuICBjb25zdCBjb250YWluZXJSZWYgPSB1c2VSZWY8SFRNTERpdkVsZW1lbnQgfCBudWxsPihudWxsKTtcblxuICB1c2VMYXlvdXRFZmZlY3QoKCkgPT4ge1xuICAgIGlmIChjb250YWluZXJSZWYuY3VycmVudCA9PT0gbnVsbCkge1xuICAgICAgcmV0dXJuO1xuICAgIH1cblxuICAgIHNldFBvc2l0aW9uU3R5bGUoZ2V0UG9zaXRpb25TdHlsZShwb3NpdGlvbiwgY29udGFpbmVyUmVmLmN1cnJlbnQpKTtcbiAgfSwgW3Bvc2l0aW9uLCBjb250YWluZXJSZWZdKTtcblxuICBjb25zdCBhbmltYXRpb25Qb3NpdGlvbiA9IGdldFRvYXN0c0FuaW1hdGlvbihwb3NpdGlvbik7XG4gIGNvbnN0IG5lZWRUb1JldmVyc2UgPSBwb3NpdGlvbi5zdGFydHNXaXRoKFwiYm90dG9tXCIpO1xuICBjb25zdCBhbGlnbm1lbnQgPSBnZXRUb2FzdEFsaWduZW1lbnQocG9zaXRpb24pO1xuXG4gIHJldHVybiAoXG4gICAgPGRpdlxuICAgICAgcmVmPXtjb250YWluZXJSZWZ9XG4gICAgICBjc3M9e1tcbiAgICAgICAgY3NzKHtcbiAgICAgICAgICBwb3NpdGlvbjogXCJmaXhlZFwiLFxuICAgICAgICAgIHpJbmRleDogOTk5OTk5OTksXG4gICAgICAgICAgZGlzcGxheTogXCJmbGV4XCIsXG4gICAgICAgICAgZmxleERpcmVjdGlvbjogXCJjb2x1bW5cIixcbiAgICAgICAgICBnYXA6IHNwYWNpbmdzLnNtLFxuICAgICAgICAgIGFsaWduSXRlbXM6IGFsaWdubWVudCxcbiAgICAgICAgICBiYWNrZ3JvdW5kOiBcInRyYW5zcGFyZW50XCIsXG4gICAgICAgIH0pLFxuICAgICAgICBwb3NpdGlvblN0eWxlLFxuICAgICAgXX1cbiAgICA+XG4gICAgICA8QW5pbWF0ZVByZXNlbmNlPlxuICAgICAgICB7dG9hc3RzXG4gICAgICAgICAgLmZpbHRlcihcbiAgICAgICAgICAgICh0b2FzdCkgPT5cbiAgICAgICAgICAgICAgdG9hc3QuaXNFeGl0aW5nID09PSBmYWxzZSB8fCB0b2FzdC5pc0V4aXRpbmcgPT09IHVuZGVmaW5lZCxcbiAgICAgICAgICApXG4gICAgICAgICAgLnJlZHVjZSgoYWNjLCB0b2FzdCkgPT4ge1xuICAgICAgICAgICAgaWYgKG5lZWRUb1JldmVyc2UpIHtcbiAgICAgICAgICAgICAgcmV0dXJuIFt0b2FzdCwgLi4uYWNjXTtcbiAgICAgICAgICAgIH1cblxuICAgICAgICAgICAgcmV0dXJuIFsuLi5hY2MsIHRvYXN0XTtcbiAgICAgICAgICB9LCBbXSBhcyBFeHRlbmRlZFRvYXN0W10pXG4gICAgICAgICAgLm1hcCgodG9hc3QpID0+IChcbiAgICAgICAgICAgIDxtb3Rpb24uZGl2XG4gICAgICAgICAgICAgIGtleT17dG9hc3QuaWR9XG4gICAgICAgICAgICAgIGluaXRpYWw9e2FuaW1hdGlvblBvc2l0aW9ufVxuICAgICAgICAgICAgICBhbmltYXRlPXt7IHg6IDAsIHk6IDAgfX1cbiAgICAgICAgICAgICAgZXhpdD17YW5pbWF0aW9uUG9zaXRpb259XG4gICAgICAgICAgICAgIHRyYW5zaXRpb249e3tcbiAgICAgICAgICAgICAgICBkdXJhdGlvbjogMC4zLFxuICAgICAgICAgICAgICAgIGVhc2U6IFwiZWFzZU91dFwiLFxuICAgICAgICAgICAgICAgIGV4aXQ6IHtcbiAgICAgICAgICAgICAgICAgIGR1cmF0aW9uOiAwLjMsXG4gICAgICAgICAgICAgICAgICBlYXNlOiBcImVhc2VJblwiLFxuICAgICAgICAgICAgICAgIH0sXG4gICAgICAgICAgICAgIH19XG4gICAgICAgICAgICA+XG4gICAgICAgICAgICAgIDxUb2FzdCBrZXk9e3RvYXN0LmlkfSB0b2FzdD17dG9hc3R9IHJlbW92ZVRvYXN0PXtyZW1vdmVUb2FzdH0gLz5cbiAgICAgICAgICAgIDwvbW90aW9uLmRpdj5cbiAgICAgICAgICApKX1cbiAgICAgIDwvQW5pbWF0ZVByZXNlbmNlPlxuICAgIDwvZGl2PlxuICApO1xufTtcbiJdfQ== */"), G, process.env.NODE_ENV === "production" ? "" : ";label:ToastContainer;", process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi9Vc2Vycy9iZW4vRG9jdW1lbnRzL1Byb2plY3RzL3JlYWN0LW5ldW1vcnBoaXNtZS9zcmMvbGliL2NvbXBvbmVudHMvVG9hc3QvVG9hc3RDb250YWluZXIudHN4Il0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQTJDTSIsImZpbGUiOiIvVXNlcnMvYmVuL0RvY3VtZW50cy9Qcm9qZWN0cy9yZWFjdC1uZXVtb3JwaGlzbWUvc3JjL2xpYi9jb21wb25lbnRzL1RvYXN0L1RvYXN0Q29udGFpbmVyLnRzeCIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB7IHVzZUxheW91dEVmZmVjdCwgdXNlUmVmLCB1c2VTdGF0ZSB9IGZyb20gXCJyZWFjdFwiO1xuaW1wb3J0IHsgY3NzLCBTZXJpYWxpemVkU3R5bGVzIH0gZnJvbSBcIkBlbW90aW9uL3JlYWN0XCI7XG5pbXBvcnQgeyBBbmltYXRlUHJlc2VuY2UsIG1vdGlvbiB9IGZyb20gXCJtb3Rpb24vcmVhY3RcIjtcbmltcG9ydCB7IEV4dGVuZGVkVG9hc3QgfSBmcm9tIFwiLi90b2FzdC50eXBlXCI7XG5pbXBvcnQgVG9hc3QgZnJvbSBcIi4vVG9hc3RcIjtcbmltcG9ydCB7IFNjcmVlblBvc2l0aW9uIH0gZnJvbSBcIi4uLy4uL3R5cGVzXCI7XG5pbXBvcnQgeyBzcGFjaW5ncyB9IGZyb20gXCIuLi8uLi9jb25zdGFudHNcIjtcbmltcG9ydCB7XG4gIGdldFBvc2l0aW9uU3R5bGUsXG4gIGdldFRvYXN0QWxpZ25lbWVudCxcbiAgZ2V0VG9hc3RzQW5pbWF0aW9uLFxufSBmcm9tIFwiLi90b2FzdC5zdHlsZXNcIjtcbmludGVyZmFjZSBUb2FzdENvbnRhaW5lclByb3BzIHtcbiAgdG9hc3RzOiBFeHRlbmRlZFRvYXN0W107XG4gIHJlbW92ZVRvYXN0OiAoaWQ6IHN0cmluZykgPT4gdm9pZDtcbiAgcG9zaXRpb246IFNjcmVlblBvc2l0aW9uO1xufVxuXG5leHBvcnQgY29uc3QgVG9hc3RDb250YWluZXI6IFJlYWN0LkZDPFRvYXN0Q29udGFpbmVyUHJvcHM+ID0gKHtcbiAgdG9hc3RzLFxuICByZW1vdmVUb2FzdCxcbiAgcG9zaXRpb24sXG59KSA9PiB7XG4gIGNvbnN0IFtwb3NpdGlvblN0eWxlLCBzZXRQb3NpdGlvblN0eWxlXSA9IHVzZVN0YXRlPFxuICAgIFNlcmlhbGl6ZWRTdHlsZXMgfCB1bmRlZmluZWRcbiAgPih1bmRlZmluZWQpO1xuICBjb25zdCBjb250YWluZXJSZWYgPSB1c2VSZWY8SFRNTERpdkVsZW1lbnQgfCBudWxsPihudWxsKTtcblxuICB1c2VMYXlvdXRFZmZlY3QoKCkgPT4ge1xuICAgIGlmIChjb250YWluZXJSZWYuY3VycmVudCA9PT0gbnVsbCkge1xuICAgICAgcmV0dXJuO1xuICAgIH1cblxuICAgIHNldFBvc2l0aW9uU3R5bGUoZ2V0UG9zaXRpb25TdHlsZShwb3NpdGlvbiwgY29udGFpbmVyUmVmLmN1cnJlbnQpKTtcbiAgfSwgW3Bvc2l0aW9uLCBjb250YWluZXJSZWZdKTtcblxuICBjb25zdCBhbmltYXRpb25Qb3NpdGlvbiA9IGdldFRvYXN0c0FuaW1hdGlvbihwb3NpdGlvbik7XG4gIGNvbnN0IG5lZWRUb1JldmVyc2UgPSBwb3NpdGlvbi5zdGFydHNXaXRoKFwiYm90dG9tXCIpO1xuICBjb25zdCBhbGlnbm1lbnQgPSBnZXRUb2FzdEFsaWduZW1lbnQocG9zaXRpb24pO1xuXG4gIHJldHVybiAoXG4gICAgPGRpdlxuICAgICAgcmVmPXtjb250YWluZXJSZWZ9XG4gICAgICBjc3M9e1tcbiAgICAgICAgY3NzKHtcbiAgICAgICAgICBwb3NpdGlvbjogXCJmaXhlZFwiLFxuICAgICAgICAgIHpJbmRleDogOTk5OTk5OTksXG4gICAgICAgICAgZGlzcGxheTogXCJmbGV4XCIsXG4gICAgICAgICAgZmxleERpcmVjdGlvbjogXCJjb2x1bW5cIixcbiAgICAgICAgICBnYXA6IHNwYWNpbmdzLnNtLFxuICAgICAgICAgIGFsaWduSXRlbXM6IGFsaWdubWVudCxcbiAgICAgICAgICBiYWNrZ3JvdW5kOiBcInRyYW5zcGFyZW50XCIsXG4gICAgICAgIH0pLFxuICAgICAgICBwb3NpdGlvblN0eWxlLFxuICAgICAgXX1cbiAgICA+XG4gICAgICA8QW5pbWF0ZVByZXNlbmNlPlxuICAgICAgICB7dG9hc3RzXG4gICAgICAgICAgLmZpbHRlcihcbiAgICAgICAgICAgICh0b2FzdCkgPT5cbiAgICAgICAgICAgICAgdG9hc3QuaXNFeGl0aW5nID09PSBmYWxzZSB8fCB0b2FzdC5pc0V4aXRpbmcgPT09IHVuZGVmaW5lZCxcbiAgICAgICAgICApXG4gICAgICAgICAgLnJlZHVjZSgoYWNjLCB0b2FzdCkgPT4ge1xuICAgICAgICAgICAgaWYgKG5lZWRUb1JldmVyc2UpIHtcbiAgICAgICAgICAgICAgcmV0dXJuIFt0b2FzdCwgLi4uYWNjXTtcbiAgICAgICAgICAgIH1cblxuICAgICAgICAgICAgcmV0dXJuIFsuLi5hY2MsIHRvYXN0XTtcbiAgICAgICAgICB9LCBbXSBhcyBFeHRlbmRlZFRvYXN0W10pXG4gICAgICAgICAgLm1hcCgodG9hc3QpID0+IChcbiAgICAgICAgICAgIDxtb3Rpb24uZGl2XG4gICAgICAgICAgICAgIGtleT17dG9hc3QuaWR9XG4gICAgICAgICAgICAgIGluaXRpYWw9e2FuaW1hdGlvblBvc2l0aW9ufVxuICAgICAgICAgICAgICBhbmltYXRlPXt7IHg6IDAsIHk6IDAgfX1cbiAgICAgICAgICAgICAgZXhpdD17YW5pbWF0aW9uUG9zaXRpb259XG4gICAgICAgICAgICAgIHRyYW5zaXRpb249e3tcbiAgICAgICAgICAgICAgICBkdXJhdGlvbjogMC4zLFxuICAgICAgICAgICAgICAgIGVhc2U6IFwiZWFzZU91dFwiLFxuICAgICAgICAgICAgICAgIGV4aXQ6IHtcbiAgICAgICAgICAgICAgICAgIGR1cmF0aW9uOiAwLjMsXG4gICAgICAgICAgICAgICAgICBlYXNlOiBcImVhc2VJblwiLFxuICAgICAgICAgICAgICAgIH0sXG4gICAgICAgICAgICAgIH19XG4gICAgICAgICAgICA+XG4gICAgICAgICAgICAgIDxUb2FzdCBrZXk9e3RvYXN0LmlkfSB0b2FzdD17dG9hc3R9IHJlbW92ZVRvYXN0PXtyZW1vdmVUb2FzdH0gLz5cbiAgICAgICAgICAgIDwvbW90aW9uLmRpdj5cbiAgICAgICAgICApKX1cbiAgICAgIDwvQW5pbWF0ZVByZXNlbmNlPlxuICAgIDwvZGl2PlxuICApO1xufTtcbiJdfQ== */"], children: /* @__PURE__ */ A(B, { children: c.filter((I) => I.isExiting === !1 || I.isExiting === void 0).reduce((I, l) => i ? [l, ...I] : [...I, l], []).map((I) => /* @__PURE__ */ A(V.div, { initial: b, animate: {
x: 0,
y: 0
}, exit: b, transition: {
duration: 0.3,
ease: "easeOut",
exit: {
duration: 0.3,
ease: "easeIn"
}
}, children: /* @__PURE__ */ A(R, { toast: I, removeToast: X }, I.id) }, I.id)) }) });
};
export {
o as ToastContainer
};