@zag-js/toast 1.34.1 → 1.35.0

package/dist/toast.utils.mjs

@@ -0,0 +1,179 @@
+// src/toast.utils.ts
+import { MAX_Z_INDEX } from "@zag-js/dom-query";
+var defaultTimeouts = {
+  info: 5e3,
+  error: 5e3,
+  success: 2e3,
+  loading: Infinity,
+  DEFAULT: 5e3
+};
+function getToastDuration(duration, type) {
+  return duration ?? defaultTimeouts[type] ?? defaultTimeouts.DEFAULT;
+}
+var getOffsets = (offsets) => typeof offsets === "string" ? { left: offsets, right: offsets, bottom: offsets, top: offsets } : offsets;
+function getGroupPlacementStyle(service, placement) {
+  const { prop, computed, context } = service;
+  const { offsets, gap } = prop("store").attrs;
+  const heights = context.get("heights");
+  const computedOffset = getOffsets(offsets);
+  const rtl = prop("dir") === "rtl";
+  const computedPlacement = placement.replace("-start", rtl ? "-right" : "-left").replace("-end", rtl ? "-left" : "-right");
+  const isRighty = computedPlacement.includes("right");
+  const isLefty = computedPlacement.includes("left");
+  const styles = {
+    position: "fixed",
+    pointerEvents: computed("count") > 0 ? void 0 : "none",
+    display: "flex",
+    flexDirection: "column",
+    "--gap": `${gap}px`,
+    "--first-height": `${heights[0]?.height || 0}px`,
+    "--viewport-offset-left": computedOffset.left,
+    "--viewport-offset-right": computedOffset.right,
+    "--viewport-offset-top": computedOffset.top,
+    "--viewport-offset-bottom": computedOffset.bottom,
+    zIndex: MAX_Z_INDEX
+  };
+  let alignItems = "center";
+  if (isRighty) alignItems = "flex-end";
+  if (isLefty) alignItems = "flex-start";
+  styles.alignItems = alignItems;
+  if (computedPlacement.includes("top")) {
+    const offset = computedOffset.top;
+    styles.top = `max(env(safe-area-inset-top, 0px), ${offset})`;
+  }
+  if (computedPlacement.includes("bottom")) {
+    const offset = computedOffset.bottom;
+    styles.bottom = `max(env(safe-area-inset-bottom, 0px), ${offset})`;
+  }
+  if (!computedPlacement.includes("left")) {
+    const offset = computedOffset.right;
+    styles.insetInlineEnd = `calc(env(safe-area-inset-right, 0px) + ${offset})`;
+  }
+  if (!computedPlacement.includes("right")) {
+    const offset = computedOffset.left;
+    styles.insetInlineStart = `calc(env(safe-area-inset-left, 0px) + ${offset})`;
+  }
+  return styles;
+}
+function getPlacementStyle(service, visible) {
+  const { prop, context, computed } = service;
+  const parent = prop("parent");
+  const placement = parent.computed("placement");
+  const { gap } = parent.prop("store").attrs;
+  const [side] = placement.split("-");
+  const mounted = context.get("mounted");
+  const remainingTime = context.get("remainingTime");
+  const height = computed("height");
+  const frontmost = computed("frontmost");
+  const sibling = !frontmost;
+  const overlap = !prop("stacked");
+  const stacked = prop("stacked");
+  const type = prop("type");
+  const duration = type === "loading" ? Number.MAX_SAFE_INTEGER : remainingTime;
+  const offset = computed("heightIndex") * gap + computed("heightBefore");
+  const styles = {
+    position: "absolute",
+    pointerEvents: "auto",
+    "--opacity": "0",
+    "--remove-delay": `${prop("removeDelay")}ms`,
+    "--duration": `${duration}ms`,
+    "--initial-height": `${height}px`,
+    "--offset": `${offset}px`,
+    "--index": prop("index"),
+    "--z-index": computed("zIndex"),
+    "--lift-amount": "calc(var(--lift) * var(--gap))",
+    "--y": "100%",
+    "--x": "0"
+  };
+  const assign = (overrides) => Object.assign(styles, overrides);
+  if (side === "top") {
+    assign({
+      top: "0",
+      "--sign": "-1",
+      "--y": "-100%",
+      "--lift": "1"
+    });
+  } else if (side === "bottom") {
+    assign({
+      bottom: "0",
+      "--sign": "1",
+      "--y": "100%",
+      "--lift": "-1"
+    });
+  }
+  if (mounted) {
+    assign({
+      "--y": "0",
+      "--opacity": "1"
+    });
+    if (stacked) {
+      assign({
+        "--y": "calc(var(--lift) * var(--offset))",
+        "--height": "var(--initial-height)"
+      });
+    }
+  }
+  if (!visible) {
+    assign({
+      "--opacity": "0",
+      pointerEvents: "none"
+    });
+  }
+  if (sibling && overlap) {
+    assign({
+      "--base-scale": "var(--index) * 0.05 + 1",
+      "--y": "calc(var(--lift-amount) * var(--index))",
+      "--scale": "calc(-1 * var(--base-scale))",
+      "--height": "var(--first-height)"
+    });
+    if (!visible) {
+      assign({
+        "--y": "calc(var(--sign) * 40%)"
+      });
+    }
+  }
+  if (sibling && stacked && !visible) {
+    assign({
+      "--y": "calc(var(--lift) * var(--offset) + var(--lift) * -100%)"
+    });
+  }
+  if (frontmost && !visible) {
+    assign({
+      "--y": "calc(var(--lift) * -100%)"
+    });
+  }
+  return styles;
+}
+function getGhostBeforeStyle(service, visible) {
+  const { computed } = service;
+  const styles = {
+    position: "absolute",
+    inset: "0",
+    scale: "1 2",
+    pointerEvents: visible ? "none" : "auto"
+  };
+  const assign = (overrides) => Object.assign(styles, overrides);
+  if (computed("frontmost") && !visible) {
+    assign({
+      height: "calc(var(--initial-height) + 80%)"
+    });
+  }
+  return styles;
+}
+function getGhostAfterStyle() {
+  return {
+    position: "absolute",
+    left: "0",
+    height: "calc(var(--gap) + 2px)",
+    bottom: "100%",
+    width: "100%"
+  };
+}
+export {
+  defaultTimeouts,
+  getGhostAfterStyle,
+  getGhostBeforeStyle,
+  getGroupPlacementStyle,
+  getPlacementStyle,
+  getToastDuration
+};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@zag-js/toast",
-  "version": "1.34.1",
+  "version": "1.35.0",
   "description": "Core logic for the toast widget implemented as a state machine",
   "keywords": [
     "js",
@@ -26,17 +26,17 @@
     "url": "https://github.com/chakra-ui/zag/issues"
   },
   "dependencies": {
-    "@zag-js/anatomy": "1.34.1",
-    "@zag-js/core": "1.34.1",
-    "@zag-js/dom-query": "1.34.1",
-    "@zag-js/dismissable": "1.34.1",
-    "@zag-js/utils": "1.34.1",
-    "@zag-js/types": "1.34.1"
+    "@zag-js/anatomy": "1.35.0",
+    "@zag-js/core": "1.35.0",
+    "@zag-js/dom-query": "1.35.0",
+    "@zag-js/dismissable": "1.35.0",
+    "@zag-js/utils": "1.35.0",
+    "@zag-js/types": "1.35.0"
   },
   "devDependencies": {
     "clean-package": "2.2.0"
   },
-  "clean-package": "../../../clean-package.config.json",
+  "clean-package": "./clean-package.config.json",
   "main": "dist/index.js",
   "module": "dist/index.mjs",
   "types": "dist/index.d.ts",
@@ -51,6 +51,16 @@
         "default": "./dist/index.js"
       }
     },
+    "./anatomy": {
+      "import": {
+        "types": "./dist/toast.anatomy.d.mts",
+        "default": "./dist/toast.anatomy.mjs"
+      },
+      "require": {
+        "types": "./dist/toast.anatomy.d.ts",
+        "default": "./dist/toast.anatomy.js"
+      }
+    },
     "./package.json": "./package.json"
   },
   "scripts": {