@rpcbase/client 0.448.0 → 0.449.0

package/dist/index.js

@@ -264,6 +264,17 @@ const toastContentStyles = `
     overscroll-behavior: contain;
     scrollbar-width: thin;
   }
+
+  @media (hover: hover) and (pointer: fine) {
+    [data-sonner-toaster][data-x-position="right"] [data-sonner-toast][data-front="true"]:not([data-mounted="true"]),
+    [data-sonner-toaster][data-x-position="right"] [data-sonner-toast][data-front="true"][data-removed="true"][data-swipe-out="false"] {
+      --y: translateX(calc(100% + 24px)) !important;
+    }
+
+    [data-sonner-toaster][data-x-position="right"] [data-sonner-toast][data-front="true"][data-mounted="true"][data-removed="false"] {
+      --y: translateX(0) !important;
+    }
+  }
 `;
 const MountedLazyToaster = (props) => {
   const $ = c(3);
@@ -286,7 +297,7 @@ const MountedLazyToaster = (props) => {
   return t1;
 };
 const ActiveToaster = () => {
-  const $ = c(9);
+  const $ = c(10);
   const isCoarsePointer = useMediaQuery("(hover: none) and (pointer: coarse)");
   let t0;
   if ($[0] === /* @__PURE__ */ Symbol.for("react.memo_cache_sentinel")) {
@@ -304,29 +315,30 @@ const ActiveToaster = () => {
     t1 = $[1];
   }
   const t2 = !isCoarsePointer;
-  let t3;
+  const t3 = isCoarsePointer ? "bottom-center" : "top-right";
+  let t4;
   if ($[2] !== isCoarsePointer) {
-    t3 = isCoarsePointer ? void 0 : [];
+    t4 = isCoarsePointer ? void 0 : [];
     $[2] = isCoarsePointer;
-    $[3] = t3;
+    $[3] = t4;
   } else {
-    t3 = $[3];
+    t4 = $[3];
   }
-  let t4;
+  let t5;
   if ($[4] === /* @__PURE__ */ Symbol.for("react.memo_cache_sentinel")) {
-    t4 = {
+    t5 = {
       pointerEvents: "auto",
       "--toast-close-button-start": "unset",
       "--toast-close-button-end": "0",
       "--toast-close-button-transform": "translate(35%, -35%)"
     };
-    $[4] = t4;
+    $[4] = t5;
   } else {
-    t4 = $[4];
+    t5 = $[4];
   }
-  let t5;
+  let t6;
   if ($[5] === /* @__PURE__ */ Symbol.for("react.memo_cache_sentinel")) {
-    t5 = {
+    t6 = {
       classNames: {
         content: toastContentClassName
       },
@@ -335,23 +347,24 @@ const ActiveToaster = () => {
         userSelect: "text"
       }
     };
-    $[5] = t5;
+    $[5] = t6;
   } else {
-    t5 = $[5];
+    t6 = $[5];
   }
-  let t6;
-  if ($[6] !== t2 || $[7] !== t3) {
-    t6 = /* @__PURE__ */ jsxs(Fragment, { children: [
+  let t7;
+  if ($[6] !== t2 || $[7] !== t3 || $[8] !== t4) {
+    t7 = /* @__PURE__ */ jsxs(Fragment, { children: [
       t1,
-      /* @__PURE__ */ jsx(Suspense, { fallback: null, children: /* @__PURE__ */ jsx(MountedLazyToaster, { closeButton: t2, theme: "dark", position: "bottom-center", swipeDirections: t3, style: t4, toastOptions: t5 }) })
+      /* @__PURE__ */ jsx(Suspense, { fallback: null, children: /* @__PURE__ */ jsx(MountedLazyToaster, { closeButton: t2, theme: "dark", position: t3, swipeDirections: t4, style: t5, toastOptions: t6 }) })
     ] });
     $[6] = t2;
     $[7] = t3;
-    $[8] = t6;
+    $[8] = t4;
+    $[9] = t7;
   } else {
-    t6 = $[8];
+    t7 = $[9];
   }
-  return t6;
+  return t7;
 };
 const Toaster = () => {
   const $ = c(2);
@@ -2338,6 +2351,175 @@ const DELIVERY_LOCK_PREFIX = "rb-notifications-delivery:";
 const FALLBACK_DELIVERY_LOCK_KEY_PREFIX = "rb:notifications:delivery-lock:";
 const NOTIFICATION_TAB_ID = `${Date.now().toString(36)}-${Math.random().toString(36).slice(2)}`;
 const DEFAULT_NOTIFICATION_APP_NAME = "default";
+const notificationToastClassName = "rpcbase-notification-toast";
+const notificationToastContentClassName = "rpcbase-notification-toast-content";
+const notificationToastTitleClassName = "rpcbase-notification-toast-title";
+const notificationToastDescriptionClassName = "rpcbase-notification-toast-description";
+const notificationToastIconDotClassName = "rpcbase-notification-toast-icon-dot";
+const notificationToastCloseButtonClassName = "rpcbase-notification-toast-close";
+const notificationToastStyles = `
+  .${notificationToastClassName}[data-sonner-toast][data-styled="true"] {
+    width: min(var(--width), calc(100vw - 32px));
+    align-items: flex-start;
+    gap: 10px;
+    padding: 14px 15px;
+    border-color: rgb(226 232 240 / 0.95);
+    border-radius: 10px;
+    background: rgb(255 255 255 / 0.96);
+    color: rgb(15 23 42);
+    box-shadow: 0 18px 38px rgb(15 23 42 / 0.16), 0 2px 8px rgb(15 23 42 / 0.08);
+    backdrop-filter: blur(12px);
+  }
+
+  .${notificationToastClassName}[data-sonner-toast][data-styled="true"] .${notificationToastContentClassName} {
+    gap: 3px;
+    padding-right: 8px;
+  }
+
+  .${notificationToastClassName}[data-sonner-toast][data-styled="true"] .${notificationToastTitleClassName} {
+    color: inherit;
+    font-size: 13px;
+    font-weight: 650;
+    line-height: 1.35;
+    letter-spacing: 0;
+  }
+
+  .${notificationToastClassName}[data-sonner-toast][data-styled="true"] .${notificationToastDescriptionClassName} {
+    color: rgb(71 85 105);
+    font-size: 12.5px;
+    line-height: 1.4;
+  }
+
+  .${notificationToastClassName}[data-sonner-toast][data-styled="true"] [data-icon] {
+    position: relative;
+    isolation: isolate;
+    margin-top: 4px;
+    margin-left: 0;
+    margin-right: 2px;
+    width: 18px;
+    height: 18px;
+    justify-content: center;
+    align-items: center;
+    overflow: visible;
+  }
+
+  .${notificationToastClassName}[data-sonner-toast][data-styled="true"] [data-icon]::before {
+    content: "";
+    position: absolute;
+    inset: 5px;
+    z-index: 0;
+    border: 1px solid rgb(37 99 235 / 0.36);
+    border-radius: 999px;
+    opacity: 0;
+    transform: scale(0.9);
+    animation: rpcbase-notification-pulse 1700ms cubic-bezier(0.2, 0, 0.2, 1) infinite;
+    will-change: transform, opacity;
+  }
+
+  .${notificationToastClassName}[data-sonner-toast][data-styled="true"] .${notificationToastIconDotClassName} {
+    position: relative;
+    z-index: 1;
+    display: block;
+    width: 7px;
+    height: 7px;
+    border-radius: 999px;
+    background: rgb(37 99 235);
+    box-shadow: 0 0 0 1px rgb(255 255 255 / 0.9);
+  }
+
+  .${notificationToastClassName}[data-sonner-toast][data-styled="true"] .${notificationToastCloseButtonClassName}[data-close-button] {
+    background: rgb(255 255 255);
+    border-color: rgb(203 213 225);
+    color: rgb(71 85 105);
+  }
+
+  .${notificationToastClassName}[data-sonner-toast][data-styled="true"] .${notificationToastCloseButtonClassName}[data-close-button]:hover {
+    background: rgb(248 250 252);
+    border-color: rgb(148 163 184);
+    color: rgb(30 41 59);
+  }
+
+  .${notificationToastClassName}[data-sonner-toast][data-styled="true"] .${notificationToastCloseButtonClassName}[data-close-button]:focus-visible {
+    background: rgb(248 250 252);
+    border-color: rgb(37 99 235 / 0.5);
+    color: rgb(30 41 59);
+    box-shadow: 0 0 0 3px rgb(37 99 235 / 0.16);
+  }
+
+  .dark .${notificationToastClassName}[data-sonner-toast][data-styled="true"] {
+    border-color: rgb(51 65 85 / 0.9);
+    background: rgb(2 6 23 / 0.96);
+    color: rgb(248 250 252);
+    box-shadow: 0 18px 38px rgb(0 0 0 / 0.36), 0 2px 8px rgb(0 0 0 / 0.24);
+  }
+
+  .dark .${notificationToastClassName}[data-sonner-toast][data-styled="true"] .${notificationToastDescriptionClassName} {
+    color: rgb(203 213 225);
+  }
+
+  .dark .${notificationToastClassName}[data-sonner-toast][data-styled="true"] [data-icon]::before {
+    border-color: rgb(96 165 250 / 0.4);
+  }
+
+  .dark .${notificationToastClassName}[data-sonner-toast][data-styled="true"] .${notificationToastIconDotClassName} {
+    background: rgb(96 165 250);
+    box-shadow: 0 0 0 1px rgb(15 23 42 / 0.9);
+  }
+
+  .dark .${notificationToastClassName}[data-sonner-toast][data-styled="true"] .${notificationToastCloseButtonClassName}[data-close-button] {
+    background: rgb(15 23 42);
+    border-color: rgb(51 65 85);
+    color: rgb(226 232 240);
+  }
+
+  .dark .${notificationToastClassName}[data-sonner-toast][data-styled="true"] .${notificationToastCloseButtonClassName}[data-close-button]:hover {
+    background: rgb(30 41 59);
+    border-color: rgb(71 85 105);
+    color: rgb(248 250 252);
+  }
+
+  .dark .${notificationToastClassName}[data-sonner-toast][data-styled="true"] .${notificationToastCloseButtonClassName}[data-close-button]:focus-visible {
+    background: rgb(30 41 59);
+    border-color: rgb(96 165 250 / 0.55);
+    color: rgb(248 250 252);
+    box-shadow: 0 0 0 3px rgb(96 165 250 / 0.18);
+  }
+
+  @keyframes rpcbase-notification-pulse {
+    0% {
+      opacity: 0;
+      transform: scale(0.9);
+    }
+
+    20% {
+      opacity: 0.55;
+    }
+
+    80%,
+    100% {
+      opacity: 0;
+      transform: scale(2.65);
+    }
+  }
+
+  @media (prefers-reduced-motion: reduce) {
+    .${notificationToastClassName}[data-sonner-toast][data-styled="true"] [data-icon]::before {
+      animation: none;
+      opacity: 0.32;
+      transform: scale(2.2);
+    }
+  }
+`;
+const notificationToastOptions = {
+  icon: /* @__PURE__ */ jsx("span", { className: notificationToastIconDotClassName, "aria-hidden": "true" }),
+  classNames: {
+    toast: notificationToastClassName,
+    content: notificationToastContentClassName,
+    title: notificationToastTitleClassName,
+    description: notificationToastDescriptionClassName,
+    closeButton: notificationToastCloseButtonClassName
+  }
+};
 const NotificationsRealtimeContext = createContext(null);
 const toIso = (value) => {
   if (value instanceof Date) return value.toISOString();
@@ -2606,12 +2788,14 @@ const claimNotificationDeliveries = async (items, userId, appName, mode) => {
 const showInAppNotifications = (items) => {
   if (items.length > 3) {
     toast(`${items.length} new notifications`, {
+      ...notificationToastOptions,
       description: "Open the notifications drawer to view them."
     });
     return;
   }
   for (const item of items) {
     toast(item.title, {
+      ...notificationToastOptions,
       description: item.body
     });
   }
@@ -2710,7 +2894,7 @@ const queuePendingInAppToasts = (pendingInAppToastItems, items, userId, appName)
   flushPendingInAppToasts(pendingInAppToastItems, userId, appName);
 };
 function NotificationsRealtimeProvider(t0) {
-  const $ = c(63);
+  const $ = c(64);
   const {
     userId,
     appName,
@@ -3094,15 +3278,25 @@ function NotificationsRealtimeProvider(t0) {
   const value = t25;
   const t26 = canUseRts ? value : null;
   let t27;
-  if ($[60] !== children || $[61] !== t26) {
-    t27 = /* @__PURE__ */ jsx(NotificationsRealtimeContext.Provider, { value: t26, children });
-    $[60] = children;
-    $[61] = t26;
-    $[62] = t27;
+  if ($[60] === /* @__PURE__ */ Symbol.for("react.memo_cache_sentinel")) {
+    t27 = /* @__PURE__ */ jsx("style", { children: notificationToastStyles });
+    $[60] = t27;
+  } else {
+    t27 = $[60];
+  }
+  let t28;
+  if ($[61] !== children || $[62] !== t26) {
+    t28 = /* @__PURE__ */ jsxs(NotificationsRealtimeContext.Provider, { value: t26, children: [
+      t27,
+      children
+    ] });
+    $[61] = children;
+    $[62] = t26;
+    $[63] = t28;
   } else {
-    t27 = $[62];
+    t28 = $[63];
   }
-  return t27;
+  return t28;
 }
 function _temp5(n_2) {
   return n_2.id;