@geomak/ui 1.5.3 → 1.6.0
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 +31 -14
- package/dist/index.cjs.map +1 -1
- package/dist/index.js +31 -14
- package/dist/index.js.map +1 -1
- package/dist/styles.css +20 -0
- package/package.json +1 -1
package/dist/index.js
CHANGED
|
@@ -785,8 +785,11 @@ function NotificationItem({
|
|
|
785
785
|
onClose,
|
|
786
786
|
reduced
|
|
787
787
|
}) {
|
|
788
|
+
const [hovered, setHovered] = useState(false);
|
|
788
789
|
const initial = getInitialMotion(pos, reduced);
|
|
789
790
|
const center = pos.endsWith("center");
|
|
791
|
+
const duration = n.duration ?? 4e3;
|
|
792
|
+
const showProgress = !reduced && isFinite(duration) && duration > 0;
|
|
790
793
|
return /* @__PURE__ */ jsx(
|
|
791
794
|
motion.div,
|
|
792
795
|
{
|
|
@@ -801,11 +804,13 @@ function NotificationItem({
|
|
|
801
804
|
scale: { type: "tween", duration: 0.22, ease: [0.16, 1, 0.3, 1] },
|
|
802
805
|
layout: { duration: 0.18 }
|
|
803
806
|
},
|
|
804
|
-
|
|
807
|
+
onMouseEnter: () => setHovered(true),
|
|
808
|
+
onMouseLeave: () => setHovered(false),
|
|
809
|
+
children: /* @__PURE__ */ jsxs(
|
|
805
810
|
Toast.Root,
|
|
806
811
|
{
|
|
807
812
|
open: true,
|
|
808
|
-
duration
|
|
813
|
+
duration,
|
|
809
814
|
onOpenChange: (o) => {
|
|
810
815
|
if (!o) onClose(n.id);
|
|
811
816
|
},
|
|
@@ -815,22 +820,34 @@ function NotificationItem({
|
|
|
815
820
|
"focus:outline-none",
|
|
816
821
|
TYPE_BG[n.type ?? "info"]
|
|
817
822
|
].join(" "),
|
|
818
|
-
children:
|
|
819
|
-
/* @__PURE__ */
|
|
820
|
-
|
|
821
|
-
/* @__PURE__ */
|
|
822
|
-
|
|
823
|
+
children: [
|
|
824
|
+
/* @__PURE__ */ jsxs("div", { className: "flex items-start gap-3 p-3 pr-2.5", children: [
|
|
825
|
+
/* @__PURE__ */ jsx("span", { className: "mt-0.5 flex-shrink-0 text-white/90", children: /* @__PURE__ */ jsx(TypeIcon, { type: n.type ?? "info" }) }),
|
|
826
|
+
/* @__PURE__ */ jsxs("div", { className: "flex-1 min-w-0", children: [
|
|
827
|
+
/* @__PURE__ */ jsx(Toast.Title, { className: "text-sm font-semibold text-white leading-snug", children: n.title }),
|
|
828
|
+
n.description && /* @__PURE__ */ jsx(Toast.Description, { className: "mt-0.5 text-xs text-white/75 leading-relaxed", children: n.description })
|
|
829
|
+
] }),
|
|
830
|
+
/* @__PURE__ */ jsx(Toast.Action, { asChild: true, altText: "Close", children: /* @__PURE__ */ jsx(
|
|
831
|
+
"button",
|
|
832
|
+
{
|
|
833
|
+
"aria-label": "Close",
|
|
834
|
+
onClick: () => onClose(n.id),
|
|
835
|
+
className: "flex-shrink-0 mt-0.5 rounded p-1 text-white/60 hover:text-white hover:bg-white/15 transition-colors duration-100 focus:outline-none focus-visible:ring-1 focus-visible:ring-white/50",
|
|
836
|
+
children: /* @__PURE__ */ jsx("svg", { width: "12", height: "12", viewBox: "0 0 12 12", fill: "none", "aria-hidden": "true", children: /* @__PURE__ */ jsx("path", { d: "M9 3L3 9M3 3l6 6", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round" }) })
|
|
837
|
+
}
|
|
838
|
+
) })
|
|
823
839
|
] }),
|
|
824
|
-
/* @__PURE__ */ jsx(
|
|
825
|
-
"
|
|
840
|
+
showProgress && /* @__PURE__ */ jsx("div", { className: "relative h-[3px] bg-white/20 overflow-hidden", children: /* @__PURE__ */ jsx(
|
|
841
|
+
"div",
|
|
826
842
|
{
|
|
827
|
-
"
|
|
828
|
-
|
|
829
|
-
|
|
830
|
-
|
|
843
|
+
className: "absolute inset-0 bg-white/60 [transform-origin:left]",
|
|
844
|
+
style: {
|
|
845
|
+
animation: `notification-progress ${duration}ms linear forwards`,
|
|
846
|
+
animationPlayState: hovered ? "paused" : "running"
|
|
847
|
+
}
|
|
831
848
|
}
|
|
832
849
|
) })
|
|
833
|
-
]
|
|
850
|
+
]
|
|
834
851
|
}
|
|
835
852
|
)
|
|
836
853
|
}
|