@multiplatform.one/components 6.7.0 → 7.0.0

package/dist/cjs/Toast/index.cjs

@@ -23,6 +23,9 @@ var __toCommonJS = mod => __copyProps(__defProp({}, "__esModule", {
 var Toast_exports = {};
 __export(Toast_exports, {
   TOAST_ACTION_MIN_MS: () => import_store.TOAST_ACTION_MIN_MS,
+  TOAST_DEFAULT_MS: () => import_store.TOAST_DEFAULT_MS,
+  TOAST_ERROR_MS: () => import_store.TOAST_ERROR_MS,
+  TOAST_WARNING_MS: () => import_store.TOAST_WARNING_MS,
   Toast: () => Toast,
   ToastViewport: () => ToastViewport,
   dismissAllToasts: () => import_store.dismissAllToasts,
@@ -33,9 +36,10 @@ __export(Toast_exports, {
 module.exports = __toCommonJS(Toast_exports);
 var import_react = require("@phosphor-icons/react");
 var import_theme = require("@multiplatform.one/theme");
+var import_forms = require("@multiplatform.one/forms");
 var import_toast = require("@tamagui/toast");
 var import_react2 = require("react");
-var import_react_i18next = require("react-i18next");
+var import_i18n = require("../shared/i18n.cjs");
 var import_tamagui = require("tamagui");
 var import_store = require("./store.cjs");
 var import_jsx_runtime = require("react/jsx-runtime");
@@ -54,51 +58,122 @@ function useToast() {
     toasts
   }), [toasts]);
 }
-const focusRing = {
-  outlineWidth: 2,
-  outlineStyle: "solid",
-  outlineColor: "$color8",
-  outlineOffset: 1
+const CLOSE_RING_INSET = 2;
+const CLOSE_ADJACENT_OUTSET = 6;
+const DESC_FONT_SIZE = {
+  $1: "$1",
+  $2: "$1",
+  $3: "$2",
+  $4: "$3",
+  $5: "$4"
 };
-const ToastActionButton = (0, import_tamagui.styled)(import_tamagui.View, {
+function iconPxForSize(size) {
+  return size === "small" ? 16 : size === "large" ? 20 : 18;
+}
+function closePxForSize(size) {
+  return size === "small" ? 12 : size === "large" ? 16 : 14;
+}
+function toastClosePressProps(besideAction, closeVisual) {
+  const outset = Math.max(0, Math.ceil((import_theme.MIN_PRESS_TARGET - closeVisual) / 2));
+  return {
+    ...(0, import_theme.pressTargetStyle)(),
+    ...(besideAction ? {
+      minWidth: closeVisual + CLOSE_ADJACENT_OUTSET * 2
+    } : null),
+    marginVertical: -outset,
+    marginHorizontal: -(besideAction ? CLOSE_ADJACENT_OUTSET : outset),
+    hitSlop: besideAction ? void 0 : (0, import_theme.pressTargetHitSlop)(closeVisual)
+  };
+}
+function toastActionPressProps(visualH) {
+  const outset = Math.max(0, Math.ceil((import_theme.MIN_PRESS_TARGET - visualH) / 2));
+  return {
+    ...(0, import_theme.pressTargetStyle)(),
+    marginVertical: -outset,
+    hitSlop: (0, import_theme.pressTargetHitSlop)(visualH)
+  };
+}
+const ToastActionTarget = (0, import_tamagui.styled)(import_tamagui.View, {
   name: "ToastActionButton",
   render: "button",
   role: "button",
   cursor: "pointer",
   backgroundColor: "transparent",
   borderWidth: 0,
-  paddingHorizontal: "$2",
-  paddingVertical: "$1",
   alignSelf: "center",
+  alignItems: "center",
+  justifyContent: "center",
   flexShrink: 0,
+  opacity: 0.9,
+  outlineWidth: 0,
+  hoverStyle: {
+    opacity: 1
+  },
+  pressStyle: {
+    opacity: 0.95
+  },
+  focusStyle: {
+    outlineWidth: 0
+  },
+  focusVisibleStyle: {
+    opacity: 1,
+    outlineWidth: 0
+  }
+});
+const ToastActionPill = (0, import_tamagui.styled)(import_tamagui.View, {
+  name: "ToastActionPill",
+  paddingHorizontal: "$2",
+  alignItems: "center",
+  justifyContent: "center",
   hoverStyle: {
     backgroundColor: "$color4"
   },
   pressStyle: {
     backgroundColor: "$color5"
-  },
-  focusVisibleStyle: focusRing
+  }
 });
-const ToastCloseButton = (0, import_tamagui.styled)(import_tamagui.View, {
+const ToastCloseTarget = (0, import_tamagui.styled)(import_tamagui.View, {
   name: "ToastCloseButton",
   render: "button",
   role: "button",
   cursor: "pointer",
   backgroundColor: "transparent",
   borderWidth: 0,
-  padding: "$1",
   alignSelf: "flex-start",
+  alignItems: "center",
+  justifyContent: "center",
   flexShrink: 0,
-  borderRadius: 1e3,
+  opacity: 0.8,
+  outlineWidth: 0,
+  hoverStyle: {
+    opacity: 1
+  },
+  pressStyle: {
+    opacity: 0.9
+  },
+  focusStyle: {
+    outlineWidth: 0
+  },
+  focusVisibleStyle: {
+    opacity: 1,
+    outlineWidth: 0
+  }
+});
+const ToastCloseRing = (0, import_tamagui.styled)(import_tamagui.View, {
+  name: "ToastCloseRing",
+  padding: "$0.5",
   alignItems: "center",
   justifyContent: "center",
+  // Token-valued radius: the raw `1000` never made it into the emitted CSS
+  // (square ring on an intended circle); $12 (50px) is a circle at this
+  // button's ≤44px box and survives the style compiler.
+  borderRadius: "$12",
   hoverStyle: {
     backgroundColor: "$color4"
   },
   pressStyle: {
     backgroundColor: "$color5"
-  },
-  focusVisibleStyle: focusRing
+  }
 });
 function IntentWrap({
   intent,
@@ -112,23 +187,41 @@ function IntentWrap({
     children
   });
 }
-function useToastVisuals(intent) {
+function useToastVisuals(intent, compact) {
   const {
     knobProps
   } = (0, import_theme.useResolvedKnobs)({
     intent,
-    component: "Toast"
+    component: "Toast",
+    compact
   });
+  if (typeof document !== "undefined") (0, import_theme.ensureCompositeFocusRing)();
   const theme = (0, import_tamagui.useTheme)();
   const isAccent = intent === "accent";
   const iconColor = isAccent ? theme.accentColor?.get() : theme.color11?.get();
   const accentTextColor = isAccent ? "$accentColor" : "$color11";
+  const size = knobProps.size;
+  const iconPx = iconPxForSize(size);
+  const closePx = closePxForSize(size);
+  const nestedPx = knobProps.nestedControl.px;
+  const labelFontSize = String(knobProps.label.fontSize);
+  const descFontSize = DESC_FONT_SIZE[labelFontSize] ?? knobProps.label.fontSize;
+  const closeVisual = closePx + CLOSE_RING_INSET * 2;
+  const closeRadius = knobProps.pointy ? 0 : "$12";
   return {
     knobProps,
     iconColor,
     accentTextColor,
+    iconPx,
+    closePx,
+    nestedPx,
+    closeVisual,
+    closeRadius,
+    descFontSize,
     frameProps: {
       ...knobProps.elevatedSurface,
+      ...knobProps.panelPadding,
+      ...knobProps.gap,
       // Intent accent edge (solid hue) — decorative, so no AA floor.
       // Logical start edge so the stripe mirrors in RTL. On web, inline style
       // (CSS logical props) deterministically beats the physical
@@ -144,13 +237,10 @@ function useToastVisuals(intent) {
         borderStartWidth: 3,
         borderStartColor: isAccent ? "$accentBackground" : "$color9"
       }),
-      paddingVertical: "$3",
-      paddingHorizontal: "$3.5",
       width: 360,
       maxWidth: "100%",
       flexDirection: "row",
-      alignItems: "flex-start",
-      gap: "$3"
+      alignItems: "flex-start"
     }
   };
 }
@@ -159,6 +249,9 @@ function ToastBody({
   description,
   intent,
   iconColor,
+  iconPx,
+  descFontSize,
+  labelFontProps,
   bodyFontProps
 }) {
   const Icon = intentIcons[intent];
@@ -175,11 +268,11 @@ function ToastBody({
   return /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, {
     children: [/* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.View, {
       flexShrink: 0,
-      height: 20,
+      height: iconPx,
       justifyContent: "center",
       marginTop: 1,
       children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(Icon, {
-        size: 20,
+        size: iconPx,
         weight: "fill",
         color: iconColor
       })
@@ -190,16 +283,13 @@ function ToastBody({
       minWidth: 0,
       justifyContent: "center",
       children: [/* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.SizableText, {
-        ...bodyFontProps,
+        ...labelFontProps,
         fontWeight: "600",
-        fontSize: "$3",
-        lineHeight: 20,
         color: "$color12",
         children: title
       }), description != null && description !== "" && /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.SizableText, {
         ...bodyFontProps,
-        fontSize: "$2",
-        lineHeight: 18,
+        fontSize: descFontSize,
         color: "$color11",
         children: description
       })]
@@ -209,12 +299,11 @@ function ToastBody({
 function ToastActionLabel({
   label,
   color,
-  bodyFontProps
+  labelFontProps
 }) {
   return /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.SizableText, {
-    ...bodyFontProps,
+    ...labelFontProps,
     fontWeight: "600",
-    fontSize: "$2",
     color,
     children: label
   });
@@ -226,45 +315,74 @@ function ToastInner({
   action,
   onDismiss,
   dismissible,
+  compact,
   ...props
 }) {
   const {
     t
-  } = (0, import_react_i18next.useTranslation)();
+  } = (0, import_i18n.useTranslation)();
   const {
     knobProps,
     iconColor,
     accentTextColor,
+    iconPx,
+    closePx,
+    nestedPx,
+    closeVisual,
+    closeRadius,
+    descFontSize,
     frameProps
-  } = useToastVisuals(intent);
+  } = useToastVisuals(intent, compact);
   const showClose = dismissible ?? onDismiss != null;
   return /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_tamagui.View, {
     role: "status",
     "aria-live": "polite",
     transition: knobProps.transition,
+    "data-testid": "toast",
+    "data-size": knobProps.size,
+    "data-density": knobProps.density,
+    "data-nested-px": nestedPx,
     ...frameProps,
+    alignItems: description ? "flex-start" : "center",
     ...props,
     children: [/* @__PURE__ */(0, import_jsx_runtime.jsx)(ToastBody, {
       title,
       description,
       intent,
       iconColor,
+      iconPx,
+      descFontSize,
+      labelFontProps: knobProps.label,
       bodyFontProps: knobProps.body
-    }), action && /* @__PURE__ */(0, import_jsx_runtime.jsx)(ToastActionButton, {
-      ...knobProps.borderRadiusOuter,
+    }), action && /* @__PURE__ */(0, import_jsx_runtime.jsx)(ToastActionTarget, {
+      className: "mp-chip-dismiss",
+      ...toastActionPressProps(nestedPx),
       "aria-label": action.altText ?? action.label,
       onPress: () => action.onPress(),
-      children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(ToastActionLabel, {
-        label: action.label,
-        color: accentTextColor,
-        bodyFontProps: knobProps.body
+      children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(ToastActionPill, {
+        className: "mp-chip-dismiss-ring",
+        ...knobProps.borderRadiusOuter,
+        height: nestedPx,
+        minHeight: nestedPx,
+        children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(ToastActionLabel, {
+          label: action.label,
+          color: accentTextColor,
+          labelFontProps: knobProps.label
+        })
       })
-    }), showClose && /* @__PURE__ */(0, import_jsx_runtime.jsx)(ToastCloseButton, {
+    }), showClose && /* @__PURE__ */(0, import_jsx_runtime.jsx)(ToastCloseTarget, {
+      className: "mp-chip-dismiss",
       "aria-label": t("Dismiss notification"),
+      alignSelf: description ? "flex-start" : "center",
+      ...toastClosePressProps(action != null, closeVisual),
       onPress: () => onDismiss?.(),
-      children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_react.XIcon, {
-        size: 14,
-        color: iconColor
+      children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(ToastCloseRing, {
+        className: "mp-chip-dismiss-ring",
+        borderRadius: closeRadius,
+        children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_react.XIcon, {
+          size: closePx,
+          color: iconColor
+        })
       })
     })]
   });
@@ -283,62 +401,90 @@ function Toast({
 }
 function ToastItemInner({
   entry,
-  isTop
+  isTop,
+  compact
 }) {
   const {
     t
-  } = (0, import_react_i18next.useTranslation)();
+  } = (0, import_i18n.useTranslation)();
   const {
     knobProps,
     iconColor,
     accentTextColor,
+    iconPx,
+    closePx,
+    nestedPx,
+    closeVisual,
+    closeRadius,
+    descFontSize,
     frameProps
-  } = useToastVisuals(entry.intent);
+  } = useToastVisuals(entry.intent, compact);
   const enterExit = {
     opacity: 0,
     y: isTop ? -16 : 16,
     scale: 0.97
   };
-  const duration = entry.duration === 0 || entry.duration === Number.POSITIVE_INFINITY ? Number.POSITIVE_INFINITY : entry.duration;
+  const duration = entry.duration === 0 ? Number.POSITIVE_INFINITY : entry.duration;
+  const assertive = entry.intent === "error" || entry.intent === "warning";
   return /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_toast.Toast, {
     open: entry.open,
     onOpenChange: open => {
       if (!open) (0, import_store.dismissToast)(entry.id);
     },
-    ...(duration !== void 0 ? {
-      duration
-    } : void 0),
-    type: "foreground",
+    duration,
+    type: assertive ? "foreground" : "background",
     transition: knobProps.transition,
     enterStyle: enterExit,
     exitStyle: enterExit,
+    "data-testid": "toast",
+    "data-size": knobProps.size,
+    "data-density": knobProps.density,
+    "data-nested-px": nestedPx,
     ...frameProps,
+    alignItems: entry.description ? "flex-start" : "center",
     children: [/* @__PURE__ */(0, import_jsx_runtime.jsx)(ToastBody, {
       title: entry.title,
       description: entry.description,
       intent: entry.intent,
       iconColor,
+      iconPx,
+      descFontSize,
+      labelFontProps: knobProps.label,
       bodyFontProps: knobProps.body
     }), entry.action && /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_toast.Toast.Action, {
       altText: entry.action.altText ?? entry.action.label,
       asChild: true,
-      children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(ToastActionButton, {
-        ...knobProps.borderRadiusOuter,
+      children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(ToastActionTarget, {
+        className: "mp-chip-dismiss",
+        ...toastActionPressProps(nestedPx),
         "aria-label": entry.action.altText ?? entry.action.label,
         onPress: () => entry.action?.onPress(),
-        children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(ToastActionLabel, {
-          label: entry.action.label,
-          color: accentTextColor,
-          bodyFontProps: knobProps.body
+        children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(ToastActionPill, {
+          className: "mp-chip-dismiss-ring",
+          ...knobProps.borderRadiusOuter,
+          height: nestedPx,
+          minHeight: nestedPx,
+          children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(ToastActionLabel, {
+            label: entry.action.label,
+            color: accentTextColor,
+            labelFontProps: knobProps.label
+          })
         })
       })
     }), entry.dismissible && /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_toast.Toast.Close, {
       asChild: true,
-      children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(ToastCloseButton, {
+      children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(ToastCloseTarget, {
+        className: "mp-chip-dismiss",
         "aria-label": t("Dismiss notification"),
-        children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_react.XIcon, {
-          size: 14,
-          color: iconColor
+        ...toastClosePressProps(entry.action != null, closeVisual),
+        alignSelf: entry.description ? "flex-start" : "center",
+        children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(ToastCloseRing, {
+          className: "mp-chip-dismiss-ring",
+          borderRadius: closeRadius,
+          children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_react.XIcon, {
+            size: closePx,
+            color: iconColor
+          })
         })
       })
     })]
@@ -389,26 +535,35 @@ function placementSwipeDirection(placement) {
 }
 function ToastViewport({
   placement = import_tamagui.isWeb ? "bottom-right" : "top",
-  duration = 5e3,
+  duration = import_store.TOAST_DEFAULT_MS,
   label: labelProp,
-  hotkey
+  hotkey,
+  compact
 }) {
   const {
     t
-  } = (0, import_react_i18next.useTranslation)();
+  } = (0, import_i18n.useTranslation)();
   const label = labelProp ?? t("Notification");
   const toasts = (0, import_react2.useSyncExternalStore)(import_store.subscribeToasts, import_store.getToasts, import_store.getToasts);
   const {
     knobProps
   } = (0, import_theme.useResolvedKnobs)();
   const isTop = placement.startsWith("top");
-  return /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_toast.ToastProvider, {
+  const viewportId = (0, import_react2.useId)();
+  (0, import_react2.useEffect)(() => {
+    (0, import_store.claimToastViewport)(viewportId);
+    return () => (0, import_store.releaseToastViewport)(viewportId);
+  }, [viewportId]);
+  const owner = (0, import_react2.useSyncExternalStore)(import_store.subscribeToastViewport, import_store.getToastViewportOwner, import_store.getToastViewportOwner);
+  if (owner !== viewportId) return null;
+  const content = /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_toast.ToastProvider, {
     duration,
     label,
     swipeDirection: placementSwipeDirection(placement),
     children: [toasts.map(entry => /* @__PURE__ */(0, import_jsx_runtime.jsx)(ToastItem, {
       entry,
-      isTop
+      isTop,
+      compact
     }, entry.id)), /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_toast.ToastViewport, {
       multipleToasts: true,
       ...(hotkey ? {
@@ -419,4 +574,11 @@ function ToastViewport({
       ...placementStyles[placement]
     })]
   });
+  if (!import_tamagui.isWeb) return content;
+  return /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.View, {
+    position: "absolute",
+    zIndex: import_forms.zIndex.loading,
+    "data-testid": "toast-layer",
+    children: content
+  });
 }