@geomak/ui 1.6.1 → 1.6.2
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/index.cjs +23 -14
- package/dist/index.cjs.map +1 -1
- package/dist/index.js +23 -14
- package/dist/index.js.map +1 -1
- package/dist/styles.css +8 -5
- package/package.json +1 -1
package/dist/index.cjs
CHANGED
|
@@ -767,11 +767,11 @@ var TYPE_BG = {
|
|
|
767
767
|
danger: "bg-status-error"
|
|
768
768
|
};
|
|
769
769
|
var VIEWPORT_CLASSES = {
|
|
770
|
-
"top-right": "fixed top-14 right-
|
|
771
|
-
"top-left": "fixed top-14 left-
|
|
770
|
+
"top-right": "fixed top-14 right-4 flex flex-col items-end",
|
|
771
|
+
"top-left": "fixed top-14 left-4 flex flex-col items-start",
|
|
772
772
|
"top-center": "fixed top-14 left-1/2 flex flex-col items-center -translate-x-1/2",
|
|
773
|
-
"bottom-right": "fixed bottom-4 right-
|
|
774
|
-
"bottom-left": "fixed bottom-4 left-
|
|
773
|
+
"bottom-right": "fixed bottom-4 right-4 flex flex-col-reverse items-end",
|
|
774
|
+
"bottom-left": "fixed bottom-4 left-4 flex flex-col-reverse items-start",
|
|
775
775
|
"bottom-center": "fixed bottom-4 left-1/2 flex flex-col-reverse items-center -translate-x-1/2"
|
|
776
776
|
};
|
|
777
777
|
function getInitialMotion(pos, reduced) {
|
|
@@ -779,9 +779,9 @@ function getInitialMotion(pos, reduced) {
|
|
|
779
779
|
const bottom = pos.startsWith("bottom");
|
|
780
780
|
return {
|
|
781
781
|
opacity: 0,
|
|
782
|
-
y: bottom ?
|
|
783
|
-
//
|
|
784
|
-
scale: 0.
|
|
782
|
+
y: bottom ? 24 : -24,
|
|
783
|
+
// rise from below (bottom) or drop from above (top)
|
|
784
|
+
scale: 0.92
|
|
785
785
|
};
|
|
786
786
|
}
|
|
787
787
|
function TypeIcon({ type }) {
|
|
@@ -822,15 +822,24 @@ function NotificationItem({
|
|
|
822
822
|
return /* @__PURE__ */ jsxRuntime.jsx(
|
|
823
823
|
framerMotion.motion.div,
|
|
824
824
|
{
|
|
825
|
-
layout: true,
|
|
826
825
|
initial,
|
|
827
826
|
animate: { opacity: 1, y: 0, scale: 1 },
|
|
828
|
-
exit:
|
|
827
|
+
exit: {
|
|
828
|
+
opacity: 0,
|
|
829
|
+
y: pos.startsWith("bottom") ? 16 : -16,
|
|
830
|
+
scale: 0.94,
|
|
831
|
+
transition: reduced ? { duration: 0 } : {
|
|
832
|
+
opacity: { duration: 0.14, delay: 0.06 },
|
|
833
|
+
y: { type: "tween", duration: 0.22, ease: [0.4, 0, 1, 1] },
|
|
834
|
+
scale: { type: "tween", duration: 0.22, ease: [0.4, 0, 1, 1] }
|
|
835
|
+
}
|
|
836
|
+
},
|
|
829
837
|
transition: reduced ? { duration: 0 } : {
|
|
830
|
-
|
|
831
|
-
|
|
832
|
-
|
|
833
|
-
|
|
838
|
+
// Opacity finishes in 0.15 s — card is fully opaque while y/scale
|
|
839
|
+
// still have ~55 % of their travel left → movement is clearly visible.
|
|
840
|
+
opacity: { duration: 0.15 },
|
|
841
|
+
y: { type: "tween", duration: 0.34, ease: [0.16, 1, 0.3, 1] },
|
|
842
|
+
scale: { type: "tween", duration: 0.34, ease: [0.16, 1, 0.3, 1] }
|
|
834
843
|
},
|
|
835
844
|
onMouseEnter: () => setHovered(true),
|
|
836
845
|
onMouseLeave: () => setHovered(false),
|
|
@@ -904,7 +913,7 @@ function NotificationProvider({
|
|
|
904
913
|
asChild: true,
|
|
905
914
|
className: [
|
|
906
915
|
VIEWPORT_CLASSES[position],
|
|
907
|
-
"z-[500000] gap-2 w-[
|
|
916
|
+
"z-[500000] gap-2 w-[340px] p-4 outline-none overflow-hidden"
|
|
908
917
|
].join(" "),
|
|
909
918
|
children: /* @__PURE__ */ jsxRuntime.jsx("ul", { children: /* @__PURE__ */ jsxRuntime.jsx(framerMotion.AnimatePresence, { initial: false, children: notifications.map((n) => /* @__PURE__ */ jsxRuntime.jsx(
|
|
910
919
|
NotificationItem,
|