@trops/dash-core 0.1.331 → 0.1.332

package/dist/index.js

@@ -52296,20 +52296,65 @@ var DashboardStageInner = function DashboardStageInner(_ref3) {
     scrollable: false,
     grow: true,
     children: [toasts.length > 0 && /*#__PURE__*/jsxRuntime.jsx("div", {
-      className: "fixed bottom-4 right-4 z-[9999] flex flex-col gap-2 pointer-events-none",
+      className: "fixed bottom-4 right-4 z-[9999] flex flex-col gap-2 pointer-events-none w-80",
       children: toasts.map(function (t) {
+        var typeStyles = {
+          success: {
+            bg: "bg-emerald-950/95",
+            border: "border-emerald-500",
+            accent: "text-emerald-400",
+            icon: "circle-check"
+          },
+          error: {
+            bg: "bg-rose-950/95",
+            border: "border-rose-500",
+            accent: "text-rose-400",
+            icon: "circle-xmark"
+          },
+          warning: {
+            bg: "bg-amber-950/95",
+            border: "border-amber-500",
+            accent: "text-amber-400",
+            icon: "triangle-exclamation"
+          },
+          info: {
+            bg: "bg-sky-950/95",
+            border: "border-sky-500",
+            accent: "text-sky-400",
+            icon: "circle-info"
+          }
+        };
+        var style = typeStyles[t.type] || typeStyles.info;
         return /*#__PURE__*/jsxRuntime.jsx("div", {
-          className: "pointer-events-auto",
-          children: /*#__PURE__*/jsxRuntime.jsx(DashReact.Toast, {
-            title: t.title,
-            message: t.message,
-            onClose: function onClose() {
-              return setToasts(function (prev) {
-                return prev.filter(function (x) {
-                  return x.id !== t.id;
+          className: "pointer-events-auto rounded-md border-l-4 ".concat(style.border, " ").concat(style.bg, " shadow-lg p-3 text-white animate-in slide-in-from-right"),
+          role: "status",
+          children: /*#__PURE__*/jsxRuntime.jsxs("div", {
+            className: "flex items-start gap-3",
+            children: [/*#__PURE__*/jsxRuntime.jsx(DashReact.FontAwesomeIcon, {
+              icon: style.icon,
+              className: "h-4 w-4 mt-0.5 flex-shrink-0 ".concat(style.accent)
+            }), /*#__PURE__*/jsxRuntime.jsxs("div", {
+              className: "flex-1 min-w-0",
+              children: [t.title && /*#__PURE__*/jsxRuntime.jsx("div", {
+                className: "font-semibold text-sm ".concat(style.accent),
+                children: t.title
+              }), t.message && /*#__PURE__*/jsxRuntime.jsx("div", {
+                className: "text-sm text-white/90 break-words",
+                children: t.message
+              })]
+            }), /*#__PURE__*/jsxRuntime.jsx("button", {
+              type: "button",
+              onClick: function onClick() {
+                return setToasts(function (prev) {
+                  return prev.filter(function (x) {
+                    return x.id !== t.id;
+                  });
                 });
-              });
-            }
+              },
+              className: "text-white/60 hover:text-white text-lg leading-none flex-shrink-0",
+              "aria-label": "Close toast",
+              children: "\xD7"
+            })]
           })
         }, t.id);
       })