@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.js
CHANGED
|
@@ -735,11 +735,11 @@ var TYPE_BG = {
|
|
|
735
735
|
danger: "bg-status-error"
|
|
736
736
|
};
|
|
737
737
|
var VIEWPORT_CLASSES = {
|
|
738
|
-
"top-right": "fixed top-14 right-
|
|
739
|
-
"top-left": "fixed top-14 left-
|
|
738
|
+
"top-right": "fixed top-14 right-4 flex flex-col items-end",
|
|
739
|
+
"top-left": "fixed top-14 left-4 flex flex-col items-start",
|
|
740
740
|
"top-center": "fixed top-14 left-1/2 flex flex-col items-center -translate-x-1/2",
|
|
741
|
-
"bottom-right": "fixed bottom-4 right-
|
|
742
|
-
"bottom-left": "fixed bottom-4 left-
|
|
741
|
+
"bottom-right": "fixed bottom-4 right-4 flex flex-col-reverse items-end",
|
|
742
|
+
"bottom-left": "fixed bottom-4 left-4 flex flex-col-reverse items-start",
|
|
743
743
|
"bottom-center": "fixed bottom-4 left-1/2 flex flex-col-reverse items-center -translate-x-1/2"
|
|
744
744
|
};
|
|
745
745
|
function getInitialMotion(pos, reduced) {
|
|
@@ -747,9 +747,9 @@ function getInitialMotion(pos, reduced) {
|
|
|
747
747
|
const bottom = pos.startsWith("bottom");
|
|
748
748
|
return {
|
|
749
749
|
opacity: 0,
|
|
750
|
-
y: bottom ?
|
|
751
|
-
//
|
|
752
|
-
scale: 0.
|
|
750
|
+
y: bottom ? 24 : -24,
|
|
751
|
+
// rise from below (bottom) or drop from above (top)
|
|
752
|
+
scale: 0.92
|
|
753
753
|
};
|
|
754
754
|
}
|
|
755
755
|
function TypeIcon({ type }) {
|
|
@@ -790,15 +790,24 @@ function NotificationItem({
|
|
|
790
790
|
return /* @__PURE__ */ jsx(
|
|
791
791
|
motion.div,
|
|
792
792
|
{
|
|
793
|
-
layout: true,
|
|
794
793
|
initial,
|
|
795
794
|
animate: { opacity: 1, y: 0, scale: 1 },
|
|
796
|
-
exit:
|
|
795
|
+
exit: {
|
|
796
|
+
opacity: 0,
|
|
797
|
+
y: pos.startsWith("bottom") ? 16 : -16,
|
|
798
|
+
scale: 0.94,
|
|
799
|
+
transition: reduced ? { duration: 0 } : {
|
|
800
|
+
opacity: { duration: 0.14, delay: 0.06 },
|
|
801
|
+
y: { type: "tween", duration: 0.22, ease: [0.4, 0, 1, 1] },
|
|
802
|
+
scale: { type: "tween", duration: 0.22, ease: [0.4, 0, 1, 1] }
|
|
803
|
+
}
|
|
804
|
+
},
|
|
797
805
|
transition: reduced ? { duration: 0 } : {
|
|
798
|
-
|
|
799
|
-
|
|
800
|
-
|
|
801
|
-
|
|
806
|
+
// Opacity finishes in 0.15 s — card is fully opaque while y/scale
|
|
807
|
+
// still have ~55 % of their travel left → movement is clearly visible.
|
|
808
|
+
opacity: { duration: 0.15 },
|
|
809
|
+
y: { type: "tween", duration: 0.34, ease: [0.16, 1, 0.3, 1] },
|
|
810
|
+
scale: { type: "tween", duration: 0.34, ease: [0.16, 1, 0.3, 1] }
|
|
802
811
|
},
|
|
803
812
|
onMouseEnter: () => setHovered(true),
|
|
804
813
|
onMouseLeave: () => setHovered(false),
|
|
@@ -872,7 +881,7 @@ function NotificationProvider({
|
|
|
872
881
|
asChild: true,
|
|
873
882
|
className: [
|
|
874
883
|
VIEWPORT_CLASSES[position],
|
|
875
|
-
"z-[500000] gap-2 w-[
|
|
884
|
+
"z-[500000] gap-2 w-[340px] p-4 outline-none overflow-hidden"
|
|
876
885
|
].join(" "),
|
|
877
886
|
children: /* @__PURE__ */ jsx("ul", { children: /* @__PURE__ */ jsx(AnimatePresence, { initial: false, children: notifications.map((n) => /* @__PURE__ */ jsx(
|
|
878
887
|
NotificationItem,
|