@zag-js/toast 0.0.0-dev-20220713183215 → 0.0.0-dev-20220730065001

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2021 Chakra UI
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/dist/index.d.ts

@@ -1,11 +1,201 @@
-import { groupConnect } from "./toast-group.connect";
-import { groupMachine } from "./toast-group.machine";
-import { createToastMachine as createMachine } from "./toast.machine";
-export { connect } from "./toast.connect";
-export type { GroupMachineContext, MachineContext, MachineState, Placement, Service, Type } from "./toast.types";
-export { createMachine };
-export declare const group: {
+import * as _zag_js_core from '@zag-js/core';
+import { Machine, StateMachine } from '@zag-js/core';
+import { RootProperties, CommonProperties, Direction, DirectionProperty, Context, RequiredBy, PropTypes, NormalizeProps } from '@zag-js/types';
+
+declare type Type = "success" | "error" | "loading" | "info" | "custom";
+declare type Placement = "top-start" | "top" | "top-end" | "bottom-start" | "bottom" | "bottom-end";
+declare type SharedContext = {
+    /**
+     * Whether to pause toast when the user leaves the browser tab
+     */
+    pauseOnPageIdle?: boolean;
+    /**
+     * Whether to pause the toast when interacted with
+     */
+    pauseOnInteraction?: boolean;
+};
+declare type ToastOptions = {
+    /**
+     * The unique id of the toast
+     */
+    id: string;
+    /**
+     * The type of the toast
+     */
+    type: Type;
+    /**
+     * The placement of the toast
+     */
+    placement: Placement;
+    /**
+     * The message of the toast
+     */
+    title?: string;
+    /**
+     * The description of the toast
+     */
+    description?: string;
+    /**
+     * The duration the toast will be visible
+     */
+    duration: number;
+    /**
+     * Custom function to render the toast element.
+     */
+    render?: (options: RenderOptions) => any;
+    /**
+     * The duration for the toast to kept alive before it is removed.
+     * Useful for exit transitions.
+     */
+    removeDelay?: number;
+    /**
+     * Function called when the toast has been closed and removed
+     */
+    onClose?: VoidFunction;
+    /**
+     * Function called when the toast is leaving
+     */
+    onClosing?: VoidFunction;
+    /**
+     * Function called when the toast is shown
+     */
+    onOpen?: VoidFunction;
+    /**
+     * Function called when the toast is updated
+     */
+    onUpdate?: VoidFunction;
+};
+declare type Options = Partial<ToastOptions>;
+declare type RenderOptions = Omit<ToastOptions, "render"> & {
+    dismiss(): void;
+};
+declare type MachineContext = SharedContext & RootProperties & CommonProperties & Omit<ToastOptions, "removeDelay"> & {
+    /**
+     * The duration for the toast to kept alive before it is removed.
+     * Useful for exit transitions.
+     */
+    removeDelay: number;
+    /**
+     * The document's text/writing direction.
+     */
+    dir?: Direction;
+    /**
+     * The time the toast was created
+     */
+    createdAt: number;
+    /**
+     * The time left before the toast is removed
+     */
+    remaining: number;
+};
+declare type MachineState = {
+    value: "active" | "active:temp" | "dismissing" | "inactive" | "persist";
+    tags: "visible" | "paused" | "updating";
+};
+declare type State = StateMachine.State<MachineContext, MachineState>;
+declare type Send = StateMachine.Send;
+declare type Service = Machine<MachineContext, MachineState>;
+declare type GroupPublicContext = SharedContext & DirectionProperty & CommonProperties & {
+    /**
+     * The gutter or spacing between toasts
+     */
+    gutter: string;
+    /**
+     * The z-index applied to each toast group
+     */
+    zIndex: number;
+    /**
+     * The maximum number of toasts that can be shown at once
+     */
+    max: number;
+    /**
+     * The offset from the safe environment edge of the viewport
+     */
+    offsets: string | Record<"left" | "right" | "bottom" | "top", string>;
+};
+declare type UserDefinedGroupContext = RequiredBy<GroupPublicContext, "id">;
+declare type GroupComputedContext = Readonly<{
+    /**
+     * @computed
+     * The total number of toasts in the group
+     */
+    readonly count: number;
+}>;
+declare type GroupPrivateContext = Context<{}>;
+declare type GroupMachineContext = GroupPublicContext & GroupComputedContext & GroupPrivateContext;
+declare type GroupState = StateMachine.State<GroupMachineContext>;
+declare type GroupSend = (event: StateMachine.Event<StateMachine.AnyEventObject>) => void;
+declare type MaybeFunction<Value, Args> = Value | ((arg: Args) => Value);
+declare type PromiseOptions<Value> = {
+    loading: ToastOptions;
+    success: MaybeFunction<ToastOptions, Value>;
+    error: MaybeFunction<ToastOptions, Error>;
+};
+declare type GroupProps = {
+    placement: Placement;
+    label?: string;
+};
+declare type Toaster = {
+    count: number;
+    isVisible(id: string): boolean;
+    upsert(options: ToastOptions): string | undefined;
+    create(options: ToastOptions): string | undefined;
+    success(options: ToastOptions): string | undefined;
+    error(options: ToastOptions): string | undefined;
+    loading(options: ToastOptions): string | undefined;
+    dismiss(id?: string | undefined): void;
+    remove(id?: string | undefined): void;
+    promise<T>(promise: Promise<T>, options: PromiseOptions<T>, shared?: ToastOptions): Promise<T>;
+};
+
+declare function groupConnect<T extends PropTypes>(state: GroupState, send: GroupSend, normalize: NormalizeProps<T>): {
+    count: number;
+    toasts: Service[];
+    toastsByPlacement: Partial<Record<Placement, Service[]>>;
+    isVisible(id: string): boolean;
+    create(options: Options): string | undefined;
+    upsert(options: Options): string | undefined;
+    dismiss(id?: string): void;
+    remove(id?: string): void;
+    dismissByPlacement(placement: Placement): void;
+    update(id: string, options: Options): string | undefined;
+    loading(options: Options): string | undefined;
+    success(options: Options): string | undefined;
+    error(options: Options): string | undefined;
+    promise<T_1>(promise: Promise<T_1>, options: PromiseOptions<T_1>, shared?: Options): Promise<T_1>;
+    pause(id?: string): void;
+    resume(id?: string): void;
+    getGroupProps(options: GroupProps): T["element"];
+    createPortal(): HTMLElement;
+    subscribe(fn: (toasts: GroupMachineContext["toasts"]) => void): () => void;
+};
+
+declare function groupMachine(ctx: UserDefinedGroupContext): _zag_js_core.Machine<GroupMachineContext, _zag_js_core.StateMachine.StateSchema, _zag_js_core.StateMachine.AnyEventObject>;
+
+declare function createToastMachine(options?: Options): _zag_js_core.Machine<MachineContext, MachineState, _zag_js_core.StateMachine.AnyEventObject>;
+
+declare function connect<T extends PropTypes>(state: State, send: Send, normalize: NormalizeProps<T>): {
+    type: Type;
+    title: string | undefined;
+    description: string | undefined;
+    placement: Placement;
+    isVisible: boolean;
+    isPaused: boolean;
+    pause(): void;
+    resume(): void;
+    dismiss(): void;
+    rootProps: T["element"];
+    progressbarProps: T["element"];
+    titleProps: T["element"];
+    descriptionProps: T["element"];
+    closeButtonProps: T["button"];
+    render(): any;
+};
+
+declare const group: {
     connect: typeof groupConnect;
     machine: typeof groupMachine;
 };
-export declare function api(): import("./toast.types").Toaster;
+declare function api(): Toaster | undefined;
+
+export { GroupMachineContext, MachineContext, MachineState, Placement, Service, Type, api, connect, createToastMachine as createMachine, group };

package/dist/index.js

@@ -1,37 +1,8 @@
 "use strict";
 var __defProp = Object.defineProperty;
-var __defProps = Object.defineProperties;
 var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
-var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
 var __getOwnPropNames = Object.getOwnPropertyNames;
-var __getOwnPropSymbols = Object.getOwnPropertySymbols;
 var __hasOwnProp = Object.prototype.hasOwnProperty;
-var __propIsEnum = Object.prototype.propertyIsEnumerable;
-var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
-var __spreadValues = (a, b) => {
-  for (var prop in b || (b = {}))
-    if (__hasOwnProp.call(b, prop))
-      __defNormalProp(a, prop, b[prop]);
-  if (__getOwnPropSymbols)
-    for (var prop of __getOwnPropSymbols(b)) {
-      if (__propIsEnum.call(b, prop))
-        __defNormalProp(a, prop, b[prop]);
-    }
-  return a;
-};
-var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
-var __objRest = (source, exclude) => {
-  var target = {};
-  for (var prop in source)
-    if (__hasOwnProp.call(source, prop) && exclude.indexOf(prop) < 0)
-      target[prop] = source[prop];
-  if (source != null && __getOwnPropSymbols)
-    for (var prop of __getOwnPropSymbols(source)) {
-      if (exclude.indexOf(prop) < 0 && __propIsEnum.call(source, prop))
-        target[prop] = source[prop];
-    }
-  return target;
-};
 var __export = (target, all) => {
   for (var name in all)
     __defProp(target, name, { get: all[name], enumerable: true });
@@ -57,29 +28,13 @@ __export(src_exports, {
 module.exports = __toCommonJS(src_exports);
 
 // ../../utilities/dom/dist/index.mjs
-var __defProp2 = Object.defineProperty;
-var __getOwnPropSymbols2 = Object.getOwnPropertySymbols;
-var __hasOwnProp2 = Object.prototype.hasOwnProperty;
-var __propIsEnum2 = Object.prototype.propertyIsEnumerable;
-var __defNormalProp2 = (obj, key, value) => key in obj ? __defProp2(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
-var __spreadValues2 = (a, b) => {
-  for (var prop in b || (b = {}))
-    if (__hasOwnProp2.call(b, prop))
-      __defNormalProp2(a, prop, b[prop]);
-  if (__getOwnPropSymbols2)
-    for (var prop of __getOwnPropSymbols2(b)) {
-      if (__propIsEnum2.call(b, prop))
-        __defNormalProp2(a, prop, b[prop]);
-    }
-  return a;
-};
 var dataAttr = (guard) => {
   return guard ? "" : void 0;
 };
 var MAX_Z_INDEX = 2147483647;
 var runIfFn = (v, ...a) => {
   const res = typeof v === "function" ? v(...a) : v;
-  return res != null ? res : void 0;
+  return res ?? void 0;
 };
 var cast = (v) => v;
 var hasProp = (obj, prop) => Object.prototype.hasOwnProperty.call(obj, prop);
@@ -91,28 +46,27 @@ function isWindow(value) {
   return (value == null ? void 0 : value.toString()) === "[object Window]";
 }
 function getDocument(el) {
-  var _a;
   if (isWindow(el))
     return el.document;
   if (isDocument(el))
     return el;
-  return (_a = el == null ? void 0 : el.ownerDocument) != null ? _a : document;
+  return (el == null ? void 0 : el.ownerDocument) ?? document;
 }
 function defineDomHelpers(helpers) {
   const dom2 = {
     getRootNode: (ctx) => {
-      var _a, _b;
-      return (_b = (_a = ctx.getRootNode) == null ? void 0 : _a.call(ctx)) != null ? _b : document;
-    },
-    getDoc: (ctx) => getDocument(dom2.getRootNode(ctx)),
-    getWin: (ctx) => {
       var _a;
-      return (_a = dom2.getDoc(ctx).defaultView) != null ? _a : window;
+      return ((_a = ctx.getRootNode) == null ? void 0 : _a.call(ctx)) ?? document;
     },
+    getDoc: (ctx) => getDocument(dom2.getRootNode(ctx)),
+    getWin: (ctx) => dom2.getDoc(ctx).defaultView ?? window,
     getActiveElement: (ctx) => dom2.getDoc(ctx).activeElement,
     getById: (ctx, id) => dom2.getRootNode(ctx).getElementById(id)
   };
-  return __spreadValues2(__spreadValues2({}, dom2), helpers);
+  return {
+    ...dom2,
+    ...helpers
+  };
 }
 var isRef = (v) => hasProp(v, "current");
 function addDomEvent(target, eventName, handler, options) {
@@ -133,7 +87,7 @@ function trackDocumentVisibility(_doc, callback) {
 // ../../utilities/core/dist/index.mjs
 var runIfFn2 = (v, ...a) => {
   const res = typeof v === "function" ? v(...a) : v;
-  return res != null ? res : void 0;
+  return res ?? void 0;
 };
 var uuid = /* @__PURE__ */ (() => {
   let id = 0;
@@ -145,7 +99,7 @@ var uuid = /* @__PURE__ */ (() => {
 function warn(...a) {
   const m = a.length === 1 ? a[0] : a[1];
   const c = a.length === 2 ? a[0] : true;
-  if (c && void 0 !== "production") {
+  if (c && process.env.NODE_ENV !== "production") {
     console.warn(m);
   }
 }
@@ -158,6 +112,7 @@ var dom = defineDomHelpers({
   getGroupId: (placement) => `toast-group:${placement}`,
   getContainerId: (ctx) => `toast:${ctx.id}`,
   getTitleId: (ctx) => `toast-title:${ctx.id}`,
+  getDescriptionId: (ctx) => `toast-description:${ctx.id}`,
   getCloseButtonId: (ctx) => `toast-close-button:${ctx.id}`,
   getPortalId: (ctx) => `toast-portal:${ctx.id}`,
   getPortalEl: (ctx) => dom.getDoc(ctx).getElementById(dom.getPortalId(ctx)),
@@ -189,7 +144,7 @@ var defaultTimeouts = {
   custom: 5e3
 };
 function getToastDuration(duration, type) {
-  return duration != null ? duration : defaultTimeouts[type];
+  return duration ?? defaultTimeouts[type];
 }
 function getGroupPlacementStyle(ctx, placement) {
   const offset = ctx.offsets;
@@ -248,7 +203,7 @@ function groupConnect(state, send, normalize) {
       const id = options.id ? options.id : uid;
       if (group2.isVisible(id))
         return;
-      send({ type: "ADD_TOAST", toast: __spreadProps(__spreadValues({}, options), { id }) });
+      send({ type: "ADD_TOAST", toast: { ...options, id } });
       return id;
     },
     upsert(options) {
@@ -299,13 +254,13 @@ function groupConnect(state, send, normalize) {
       return group2.upsert(options);
     },
     promise(promise, options, shared = {}) {
-      const id = group2.loading(__spreadValues(__spreadValues({}, shared), options.loading));
+      const id = group2.loading({ ...shared, ...options.loading });
       promise.then((response) => {
         const successOptions = runIfFn2(options.success, response);
-        group2.success(__spreadProps(__spreadValues(__spreadValues({}, shared), successOptions), { id }));
+        group2.success({ ...shared, ...successOptions, id });
       }).catch((error) => {
         const errorOptions = runIfFn2(options.error, error);
-        group2.error(__spreadProps(__spreadValues(__spreadValues({}, shared), errorOptions), { id }));
+        group2.error({ ...shared, ...errorOptions, id });
       });
       return promise;
     },
@@ -361,21 +316,22 @@ var import_core3 = require("@zag-js/core");
 var import_core2 = require("@zag-js/core");
 var { not, and, or } = import_core2.guards;
 function createToastMachine(options = {}) {
-  const _a = options, { type = "info", duration, id = "toast", placement = "bottom", removeDelay = 500 } = _a, rest = __objRest(_a, ["type", "duration", "id", "placement", "removeDelay"]);
+  const { type = "info", duration, id = "toast", placement = "bottom", removeDelay = 500, ...rest } = options;
   const __duration = getToastDuration(duration, type);
   return (0, import_core2.createMachine)({
     id,
     entry: "invokeOnOpen",
     initial: type === "loading" ? "persist" : "active",
-    context: __spreadValues({
+    context: {
       id,
       type,
       remaining: __duration,
       duration: __duration,
       removeDelay,
       createdAt: Date.now(),
-      placement
-    }, rest),
+      placement,
+      ...rest
+    },
     on: {
       UPDATE: [
         {
@@ -452,17 +408,17 @@ function createToastMachine(options = {}) {
     },
     guards: {
       isChangingToLoading: (_, evt) => {
-        var _a2;
-        return ((_a2 = evt.toast) == null ? void 0 : _a2.type) === "loading";
+        var _a;
+        return ((_a = evt.toast) == null ? void 0 : _a.type) === "loading";
       },
       isLoadingType: (ctx) => ctx.type === "loading",
       hasTypeChanged: (ctx, evt) => {
-        var _a2;
-        return ((_a2 = evt.toast) == null ? void 0 : _a2.type) !== ctx.type;
+        var _a;
+        return ((_a = evt.toast) == null ? void 0 : _a.type) !== ctx.type;
       },
       hasDurationChanged: (ctx, evt) => {
-        var _a2;
-        return ((_a2 = evt.toast) == null ? void 0 : _a2.duration) !== ctx.duration;
+        var _a;
+        return ((_a = evt.toast) == null ? void 0 : _a.duration) !== ctx.duration;
       }
     },
     delays: {
@@ -480,25 +436,25 @@ function createToastMachine(options = {}) {
         self.sendParent({ type: "REMOVE_TOAST", id: self.id });
       },
       invokeOnClosing(ctx) {
-        var _a2;
-        (_a2 = ctx.onClosing) == null ? void 0 : _a2.call(ctx);
+        var _a;
+        (_a = ctx.onClosing) == null ? void 0 : _a.call(ctx);
       },
       invokeOnClose(ctx) {
-        var _a2;
-        (_a2 = ctx.onClose) == null ? void 0 : _a2.call(ctx);
+        var _a;
+        (_a = ctx.onClose) == null ? void 0 : _a.call(ctx);
       },
       invokeOnOpen(ctx) {
-        var _a2;
-        (_a2 = ctx.onOpen) == null ? void 0 : _a2.call(ctx);
+        var _a;
+        (_a = ctx.onOpen) == null ? void 0 : _a.call(ctx);
       },
       invokeOnUpdate(ctx) {
-        var _a2;
-        (_a2 = ctx.onUpdate) == null ? void 0 : _a2.call(ctx);
+        var _a;
+        (_a = ctx.onUpdate) == null ? void 0 : _a.call(ctx);
       },
       setContext(ctx, evt) {
         const { duration: duration2, type: type2 } = evt.toast;
         const time = getToastDuration(duration2, type2);
-        Object.assign(ctx, __spreadProps(__spreadValues({}, evt.toast), { duration: time, remaining: time }));
+        Object.assign(ctx, { ...evt.toast, duration: time, remaining: time });
       }
     }
   });
@@ -509,7 +465,7 @@ function groupMachine(ctx) {
   return (0, import_core3.createMachine)({
     id: "toaster",
     initial: "active",
-    context: __spreadValues({
+    context: {
       dir: "ltr",
       max: Number.MAX_SAFE_INTEGER,
       toasts: [],
@@ -517,8 +473,9 @@ function groupMachine(ctx) {
       zIndex: MAX_Z_INDEX,
       pauseOnPageIdle: false,
       pauseOnInteraction: true,
-      offsets: { left: "0px", right: "0px", top: "0px", bottom: "0px" }
-    }, ctx),
+      offsets: { left: "0px", right: "0px", top: "0px", bottom: "0px" },
+      ...ctx
+    },
     computed: {
       count: (ctx2) => ctx2.toasts.length
     },
@@ -547,13 +504,13 @@ function groupMachine(ctx) {
       ADD_TOAST: {
         guard: (ctx2) => ctx2.toasts.length < ctx2.max,
         actions: (ctx2, evt, { self }) => {
-          var _a;
-          const options = __spreadProps(__spreadValues({}, evt.toast), {
+          const options = {
+            ...evt.toast,
             pauseOnPageIdle: ctx2.pauseOnPageIdle,
             pauseOnInteraction: ctx2.pauseOnInteraction,
             dir: ctx2.dir,
-            doc: (0, import_core3.ref)((_a = ctx2.doc) != null ? _a : document)
-          });
+            getRootNode: ctx2.getRootNode
+          };
           const toast = createToastMachine(options);
           const actor = self.spawn(toast);
           ctx2.toasts.push(actor);
@@ -604,6 +561,7 @@ function connect(state, send, normalize) {
   return {
     type: state.context.type,
     title: state.context.title,
+    description: state.context.description,
     placement,
     isVisible,
     isPaused,
@@ -676,6 +634,10 @@ function connect(state, send, normalize) {
       "data-part": "title",
       id: dom.getTitleId(state.context)
     }),
+    descriptionProps: normalize.element({
+      "data-part": "description",
+      id: dom.getDescriptionId(state.context)
+    }),
     closeButtonProps: normalize.button({
       id: dom.getCloseButtonId(state.context),
       "data-part": "close-button",
@@ -714,3 +676,10 @@ function api() {
     return toaster;
   }
 }
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  api,
+  connect,
+  createMachine,
+  group
+});

package/dist/index.mjs

@@ -1,59 +1,11 @@
-var __defProp = Object.defineProperty;
-var __defProps = Object.defineProperties;
-var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
-var __getOwnPropSymbols = Object.getOwnPropertySymbols;
-var __hasOwnProp = Object.prototype.hasOwnProperty;
-var __propIsEnum = Object.prototype.propertyIsEnumerable;
-var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
-var __spreadValues = (a, b) => {
-  for (var prop in b || (b = {}))
-    if (__hasOwnProp.call(b, prop))
-      __defNormalProp(a, prop, b[prop]);
-  if (__getOwnPropSymbols)
-    for (var prop of __getOwnPropSymbols(b)) {
-      if (__propIsEnum.call(b, prop))
-        __defNormalProp(a, prop, b[prop]);
-    }
-  return a;
-};
-var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
-var __objRest = (source, exclude) => {
-  var target = {};
-  for (var prop in source)
-    if (__hasOwnProp.call(source, prop) && exclude.indexOf(prop) < 0)
-      target[prop] = source[prop];
-  if (source != null && __getOwnPropSymbols)
-    for (var prop of __getOwnPropSymbols(source)) {
-      if (exclude.indexOf(prop) < 0 && __propIsEnum.call(source, prop))
-        target[prop] = source[prop];
-    }
-  return target;
-};
-
 // ../../utilities/dom/dist/index.mjs
-var __defProp2 = Object.defineProperty;
-var __getOwnPropSymbols2 = Object.getOwnPropertySymbols;
-var __hasOwnProp2 = Object.prototype.hasOwnProperty;
-var __propIsEnum2 = Object.prototype.propertyIsEnumerable;
-var __defNormalProp2 = (obj, key, value) => key in obj ? __defProp2(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
-var __spreadValues2 = (a, b) => {
-  for (var prop in b || (b = {}))
-    if (__hasOwnProp2.call(b, prop))
-      __defNormalProp2(a, prop, b[prop]);
-  if (__getOwnPropSymbols2)
-    for (var prop of __getOwnPropSymbols2(b)) {
-      if (__propIsEnum2.call(b, prop))
-        __defNormalProp2(a, prop, b[prop]);
-    }
-  return a;
-};
 var dataAttr = (guard) => {
   return guard ? "" : void 0;
 };
 var MAX_Z_INDEX = 2147483647;
 var runIfFn = (v, ...a) => {
   const res = typeof v === "function" ? v(...a) : v;
-  return res != null ? res : void 0;
+  return res ?? void 0;
 };
 var cast = (v) => v;
 var hasProp = (obj, prop) => Object.prototype.hasOwnProperty.call(obj, prop);
@@ -65,28 +17,27 @@ function isWindow(value) {
   return (value == null ? void 0 : value.toString()) === "[object Window]";
 }
 function getDocument(el) {
-  var _a;
   if (isWindow(el))
     return el.document;
   if (isDocument(el))
     return el;
-  return (_a = el == null ? void 0 : el.ownerDocument) != null ? _a : document;
+  return (el == null ? void 0 : el.ownerDocument) ?? document;
 }
 function defineDomHelpers(helpers) {
   const dom2 = {
     getRootNode: (ctx) => {
-      var _a, _b;
-      return (_b = (_a = ctx.getRootNode) == null ? void 0 : _a.call(ctx)) != null ? _b : document;
-    },
-    getDoc: (ctx) => getDocument(dom2.getRootNode(ctx)),
-    getWin: (ctx) => {
       var _a;
-      return (_a = dom2.getDoc(ctx).defaultView) != null ? _a : window;
+      return ((_a = ctx.getRootNode) == null ? void 0 : _a.call(ctx)) ?? document;
     },
+    getDoc: (ctx) => getDocument(dom2.getRootNode(ctx)),
+    getWin: (ctx) => dom2.getDoc(ctx).defaultView ?? window,
     getActiveElement: (ctx) => dom2.getDoc(ctx).activeElement,
     getById: (ctx, id) => dom2.getRootNode(ctx).getElementById(id)
   };
-  return __spreadValues2(__spreadValues2({}, dom2), helpers);
+  return {
+    ...dom2,
+    ...helpers
+  };
 }
 var isRef = (v) => hasProp(v, "current");
 function addDomEvent(target, eventName, handler, options) {
@@ -107,7 +58,7 @@ function trackDocumentVisibility(_doc, callback) {
 // ../../utilities/core/dist/index.mjs
 var runIfFn2 = (v, ...a) => {
   const res = typeof v === "function" ? v(...a) : v;
-  return res != null ? res : void 0;
+  return res ?? void 0;
 };
 var uuid = /* @__PURE__ */ (() => {
   let id = 0;
@@ -119,7 +70,7 @@ var uuid = /* @__PURE__ */ (() => {
 function warn(...a) {
   const m = a.length === 1 ? a[0] : a[1];
   const c = a.length === 2 ? a[0] : true;
-  if (c && void 0 !== "production") {
+  if (c && process.env.NODE_ENV !== "production") {
     console.warn(m);
   }
 }
@@ -132,6 +83,7 @@ var dom = defineDomHelpers({
   getGroupId: (placement) => `toast-group:${placement}`,
   getContainerId: (ctx) => `toast:${ctx.id}`,
   getTitleId: (ctx) => `toast-title:${ctx.id}`,
+  getDescriptionId: (ctx) => `toast-description:${ctx.id}`,
   getCloseButtonId: (ctx) => `toast-close-button:${ctx.id}`,
   getPortalId: (ctx) => `toast-portal:${ctx.id}`,
   getPortalEl: (ctx) => dom.getDoc(ctx).getElementById(dom.getPortalId(ctx)),
@@ -163,7 +115,7 @@ var defaultTimeouts = {
   custom: 5e3
 };
 function getToastDuration(duration, type) {
-  return duration != null ? duration : defaultTimeouts[type];
+  return duration ?? defaultTimeouts[type];
 }
 function getGroupPlacementStyle(ctx, placement) {
   const offset = ctx.offsets;
@@ -222,7 +174,7 @@ function groupConnect(state, send, normalize) {
       const id = options.id ? options.id : uid;
       if (group2.isVisible(id))
         return;
-      send({ type: "ADD_TOAST", toast: __spreadProps(__spreadValues({}, options), { id }) });
+      send({ type: "ADD_TOAST", toast: { ...options, id } });
       return id;
     },
     upsert(options) {
@@ -273,13 +225,13 @@ function groupConnect(state, send, normalize) {
       return group2.upsert(options);
     },
     promise(promise, options, shared = {}) {
-      const id = group2.loading(__spreadValues(__spreadValues({}, shared), options.loading));
+      const id = group2.loading({ ...shared, ...options.loading });
       promise.then((response) => {
         const successOptions = runIfFn2(options.success, response);
-        group2.success(__spreadProps(__spreadValues(__spreadValues({}, shared), successOptions), { id }));
+        group2.success({ ...shared, ...successOptions, id });
       }).catch((error) => {
         const errorOptions = runIfFn2(options.error, error);
-        group2.error(__spreadProps(__spreadValues(__spreadValues({}, shared), errorOptions), { id }));
+        group2.error({ ...shared, ...errorOptions, id });
       });
       return promise;
     },
@@ -329,27 +281,28 @@ function groupConnect(state, send, normalize) {
 }
 
 // src/toast-group.machine.ts
-import { createMachine as createMachine2, ref } from "@zag-js/core";
+import { createMachine as createMachine2 } from "@zag-js/core";
 
 // src/toast.machine.ts
 import { createMachine, guards } from "@zag-js/core";
 var { not, and, or } = guards;
 function createToastMachine(options = {}) {
-  const _a = options, { type = "info", duration, id = "toast", placement = "bottom", removeDelay = 500 } = _a, rest = __objRest(_a, ["type", "duration", "id", "placement", "removeDelay"]);
+  const { type = "info", duration, id = "toast", placement = "bottom", removeDelay = 500, ...rest } = options;
   const __duration = getToastDuration(duration, type);
   return createMachine({
     id,
     entry: "invokeOnOpen",
     initial: type === "loading" ? "persist" : "active",
-    context: __spreadValues({
+    context: {
       id,
       type,
       remaining: __duration,
       duration: __duration,
       removeDelay,
       createdAt: Date.now(),
-      placement
-    }, rest),
+      placement,
+      ...rest
+    },
     on: {
       UPDATE: [
         {
@@ -426,17 +379,17 @@ function createToastMachine(options = {}) {
     },
     guards: {
       isChangingToLoading: (_, evt) => {
-        var _a2;
-        return ((_a2 = evt.toast) == null ? void 0 : _a2.type) === "loading";
+        var _a;
+        return ((_a = evt.toast) == null ? void 0 : _a.type) === "loading";
       },
       isLoadingType: (ctx) => ctx.type === "loading",
       hasTypeChanged: (ctx, evt) => {
-        var _a2;
-        return ((_a2 = evt.toast) == null ? void 0 : _a2.type) !== ctx.type;
+        var _a;
+        return ((_a = evt.toast) == null ? void 0 : _a.type) !== ctx.type;
       },
       hasDurationChanged: (ctx, evt) => {
-        var _a2;
-        return ((_a2 = evt.toast) == null ? void 0 : _a2.duration) !== ctx.duration;
+        var _a;
+        return ((_a = evt.toast) == null ? void 0 : _a.duration) !== ctx.duration;
       }
     },
     delays: {
@@ -454,25 +407,25 @@ function createToastMachine(options = {}) {
         self.sendParent({ type: "REMOVE_TOAST", id: self.id });
       },
       invokeOnClosing(ctx) {
-        var _a2;
-        (_a2 = ctx.onClosing) == null ? void 0 : _a2.call(ctx);
+        var _a;
+        (_a = ctx.onClosing) == null ? void 0 : _a.call(ctx);
       },
       invokeOnClose(ctx) {
-        var _a2;
-        (_a2 = ctx.onClose) == null ? void 0 : _a2.call(ctx);
+        var _a;
+        (_a = ctx.onClose) == null ? void 0 : _a.call(ctx);
       },
       invokeOnOpen(ctx) {
-        var _a2;
-        (_a2 = ctx.onOpen) == null ? void 0 : _a2.call(ctx);
+        var _a;
+        (_a = ctx.onOpen) == null ? void 0 : _a.call(ctx);
       },
       invokeOnUpdate(ctx) {
-        var _a2;
-        (_a2 = ctx.onUpdate) == null ? void 0 : _a2.call(ctx);
+        var _a;
+        (_a = ctx.onUpdate) == null ? void 0 : _a.call(ctx);
       },
       setContext(ctx, evt) {
         const { duration: duration2, type: type2 } = evt.toast;
         const time = getToastDuration(duration2, type2);
-        Object.assign(ctx, __spreadProps(__spreadValues({}, evt.toast), { duration: time, remaining: time }));
+        Object.assign(ctx, { ...evt.toast, duration: time, remaining: time });
       }
     }
   });
@@ -483,7 +436,7 @@ function groupMachine(ctx) {
   return createMachine2({
     id: "toaster",
     initial: "active",
-    context: __spreadValues({
+    context: {
       dir: "ltr",
       max: Number.MAX_SAFE_INTEGER,
       toasts: [],
@@ -491,8 +444,9 @@ function groupMachine(ctx) {
       zIndex: MAX_Z_INDEX,
       pauseOnPageIdle: false,
       pauseOnInteraction: true,
-      offsets: { left: "0px", right: "0px", top: "0px", bottom: "0px" }
-    }, ctx),
+      offsets: { left: "0px", right: "0px", top: "0px", bottom: "0px" },
+      ...ctx
+    },
     computed: {
       count: (ctx2) => ctx2.toasts.length
     },
@@ -521,13 +475,13 @@ function groupMachine(ctx) {
       ADD_TOAST: {
         guard: (ctx2) => ctx2.toasts.length < ctx2.max,
         actions: (ctx2, evt, { self }) => {
-          var _a;
-          const options = __spreadProps(__spreadValues({}, evt.toast), {
+          const options = {
+            ...evt.toast,
             pauseOnPageIdle: ctx2.pauseOnPageIdle,
             pauseOnInteraction: ctx2.pauseOnInteraction,
             dir: ctx2.dir,
-            doc: ref((_a = ctx2.doc) != null ? _a : document)
-          });
+            getRootNode: ctx2.getRootNode
+          };
           const toast = createToastMachine(options);
           const actor = self.spawn(toast);
           ctx2.toasts.push(actor);
@@ -578,6 +532,7 @@ function connect(state, send, normalize) {
   return {
     type: state.context.type,
     title: state.context.title,
+    description: state.context.description,
     placement,
     isVisible,
     isPaused,
@@ -650,6 +605,10 @@ function connect(state, send, normalize) {
       "data-part": "title",
       id: dom.getTitleId(state.context)
     }),
+    descriptionProps: normalize.element({
+      "data-part": "description",
+      id: dom.getDescriptionId(state.context)
+    }),
     closeButtonProps: normalize.button({
       id: dom.getCloseButtonId(state.context),
       "data-part": "close-button",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@zag-js/toast",
-  "version": "0.0.0-dev-20220713183215",
+  "version": "0.0.0-dev-20220730065001",
   "description": "Core logic for the toast widget implemented as a state machine",
   "keywords": [
     "js",
@@ -29,20 +29,21 @@
     "url": "https://github.com/chakra-ui/zag/issues"
   },
   "dependencies": {
-    "@zag-js/core": "0.0.0-dev-20220713183215",
-    "@zag-js/types": "0.0.0-dev-20220713183215"
+    "@zag-js/core": "0.1.9",
+    "@zag-js/types": "0.2.3"
   },
   "devDependencies": {
-    "@zag-js/dom-utils": "0.0.0-dev-20220713183215",
-    "@zag-js/utils": "0.1.2"
+    "@zag-js/dom-utils": "0.1.8",
+    "@zag-js/utils": "0.1.3"
   },
   "scripts": {
-    "build:fast": "zag build",
-    "start": "zag build --watch",
-    "build": "zag build --prod",
+    "build-fast": "tsup src/index.ts --format=esm,cjs",
+    "start": "pnpm build --watch",
+    "build": "tsup src/index.ts --format=esm,cjs --dts",
     "test": "jest --config ../../../jest.config.js --rootDir . --passWithNoTests",
     "lint": "eslint src --ext .ts,.tsx",
-    "test:ci": "yarn test --ci --runInBand",
-    "test:watch": "yarn test --watch --updateSnapshot"
+    "test-ci": "pnpm test --ci --runInBand",
+    "test-watch": "pnpm test --watch -u",
+    "typecheck": "tsc --noEmit"
   }
-}
+}

package/dist/toast-group.connect.d.ts

@@ -1,24 +0,0 @@
-import type { NormalizeProps, PropTypes } from "@zag-js/types";
-import type { GroupMachineContext, GroupProps, GroupSend, GroupState, Placement, PromiseOptions, Toaster, Options } from "./toast.types";
-export declare let toaster: Toaster;
-export declare function groupConnect<T extends PropTypes>(state: GroupState, send: GroupSend, normalize: NormalizeProps<T>): {
-    count: number;
-    toasts: import("./toast.types").Service[];
-    toastsByPlacement: Partial<Record<Placement, import("./toast.types").Service[]>>;
-    isVisible(id: string): boolean;
-    create(options: Options): string;
-    upsert(options: Options): string;
-    dismiss(id?: string): void;
-    remove(id?: string): void;
-    dismissByPlacement(placement: Placement): void;
-    update(id: string, options: Options): string;
-    loading(options: Options): string;
-    success(options: Options): string;
-    error(options: Options): string;
-    promise<T_1>(promise: Promise<T_1>, options: PromiseOptions<T_1>, shared?: Options): Promise<T_1>;
-    pause(id?: string): void;
-    resume(id?: string): void;
-    getGroupProps(options: GroupProps): T["element"];
-    createPortal(): HTMLElement;
-    subscribe(fn: (toasts: GroupMachineContext["toasts"]) => void): () => void;
-};

package/dist/toast-group.machine.d.ts

@@ -1,2 +0,0 @@
-import type { GroupMachineContext, UserDefinedGroupContext } from "./toast.types";
-export declare function groupMachine(ctx: UserDefinedGroupContext): import("@zag-js/core").Machine<GroupMachineContext, import("@zag-js/core").StateMachine.StateSchema, import("@zag-js/core").StateMachine.AnyEventObject>;

package/dist/toast.connect.d.ts

@@ -1,17 +0,0 @@
-import type { NormalizeProps, PropTypes } from "@zag-js/types";
-import type { Send, State } from "./toast.types";
-export declare function connect<T extends PropTypes>(state: State, send: Send, normalize: NormalizeProps<T>): {
-    type: import("./toast.types").Type;
-    title: string;
-    placement: import("./toast.types").Placement;
-    isVisible: boolean;
-    isPaused: boolean;
-    pause(): void;
-    resume(): void;
-    dismiss(): void;
-    rootProps: T["element"];
-    progressbarProps: T["element"];
-    titleProps: T["element"];
-    closeButtonProps: T["button"];
-    render(): any;
-};

package/dist/toast.dom.d.ts

@@ -1,26 +0,0 @@
-import type { GroupMachineContext as GroupCtx, MachineContext as Ctx, Placement } from "./toast.types";
-export declare const dom: {
-    getRootNode: (ctx: {
-        getRootNode?: () => Node | Document | ShadowRoot;
-    }) => Document | ShadowRoot;
-    getDoc: (ctx: {
-        getRootNode?: () => Node | Document | ShadowRoot;
-    }) => Document;
-    getWin: (ctx: {
-        getRootNode?: () => Node | Document | ShadowRoot;
-    }) => Window & typeof globalThis;
-    getActiveElement: (ctx: {
-        getRootNode?: () => Node | Document | ShadowRoot;
-    }) => HTMLElement;
-    getById: (ctx: {
-        getRootNode?: () => Node | Document | ShadowRoot;
-    }, id: string) => HTMLElement;
-} & {
-    getGroupId: (placement: Placement) => string;
-    getContainerId: (ctx: Ctx) => string;
-    getTitleId: (ctx: Ctx) => string;
-    getCloseButtonId: (ctx: Ctx) => string;
-    getPortalId: (ctx: GroupCtx) => string;
-    getPortalEl: (ctx: GroupCtx) => HTMLElement;
-    createPortalEl: (ctx: GroupCtx) => HTMLElement;
-};

package/dist/toast.machine.d.ts

@@ -1,2 +0,0 @@
-import type { MachineContext, MachineState, Options } from "./toast.types";
-export declare function createToastMachine(options?: Options): import("@zag-js/core").Machine<MachineContext, MachineState, import("@zag-js/core").StateMachine.AnyEventObject>;

package/dist/toast.types.d.ts

@@ -1,154 +0,0 @@
-import type { Machine, StateMachine as S } from "@zag-js/core";
-import type { CommonProperties, Context, Direction, DirectionProperty, RequiredBy, RootProperties } from "@zag-js/types";
-export declare type Type = "success" | "error" | "loading" | "info" | "custom";
-export declare type Placement = "top-start" | "top" | "top-end" | "bottom-start" | "bottom" | "bottom-end";
-declare type SharedContext = {
-    /**
-     * Whether to pause toast when the user leaves the browser tab
-     */
-    pauseOnPageIdle?: boolean;
-    /**
-     * Whether to pause the toast when interacted with
-     */
-    pauseOnInteraction?: boolean;
-};
-export declare type ToastOptions = {
-    /**
-     * The unique id of the toast
-     */
-    id: string;
-    /**
-     * The type of the toast
-     */
-    type: Type;
-    /**
-     * The placement of the toast
-     */
-    placement: Placement;
-    /**
-     * The message of the toast
-     */
-    title?: string;
-    /**
-     * The description of the toast
-     */
-    description?: string;
-    /**
-     * The duration the toast will be visible
-     */
-    duration: number;
-    /**
-     * Custom function to render the toast element.
-     */
-    render?: (options: RenderOptions) => any;
-    /**
-     * The duration for the toast to kept alive before it is removed.
-     * Useful for exit transitions.
-     */
-    removeDelay?: number;
-    /**
-     * Function called when the toast has been closed and removed
-     */
-    onClose?: VoidFunction;
-    /**
-     * Function called when the toast is leaving
-     */
-    onClosing?: VoidFunction;
-    /**
-     * Function called when the toast is shown
-     */
-    onOpen?: VoidFunction;
-    /**
-     * Function called when the toast is updated
-     */
-    onUpdate?: VoidFunction;
-};
-export declare type Options = Partial<ToastOptions>;
-export declare type RenderOptions = Omit<ToastOptions, "render"> & {
-    dismiss(): void;
-};
-export declare type MachineContext = SharedContext & RootProperties & CommonProperties & Omit<ToastOptions, "removeDelay"> & {
-    /**
-     * The duration for the toast to kept alive before it is removed.
-     * Useful for exit transitions.
-     */
-    removeDelay: number;
-    /**
-     * The document's text/writing direction.
-     */
-    dir?: Direction;
-    /**
-     * The time the toast was created
-     */
-    createdAt: number;
-    /**
-     * The time left before the toast is removed
-     */
-    remaining: number;
-};
-export declare type MachineState = {
-    value: "active" | "active:temp" | "dismissing" | "inactive" | "persist";
-    tags: "visible" | "paused" | "updating";
-};
-export declare type State = S.State<MachineContext, MachineState>;
-export declare type Send = S.Send;
-export declare type Service = Machine<MachineContext, MachineState>;
-declare type GroupPublicContext = SharedContext & DirectionProperty & CommonProperties & {
-    /**
-     * The gutter or spacing between toasts
-     */
-    gutter: string;
-    /**
-     * The z-index applied to each toast group
-     */
-    zIndex: number;
-    /**
-     * The maximum number of toasts that can be shown at once
-     */
-    max: number;
-    /**
-     * The offset from the safe environment edge of the viewport
-     */
-    offsets: string | Record<"left" | "right" | "bottom" | "top", string>;
-};
-export declare type UserDefinedGroupContext = RequiredBy<GroupPublicContext, "id">;
-declare type GroupComputedContext = Readonly<{
-    /**
-     * @computed
-     * The total number of toasts in the group
-     */
-    readonly count: number;
-}>;
-declare type GroupPrivateContext = Context<{
-    /**
-     * @internal
-     * The child toast machines (spawned by the toast group)
-     */
-    toasts: Service[];
-}>;
-export declare type GroupMachineContext = GroupPublicContext & GroupComputedContext & GroupPrivateContext;
-export declare type GroupState = S.State<GroupMachineContext>;
-export declare type GroupSend = (event: S.Event<S.AnyEventObject>) => void;
-declare type MaybeFunction<Value, Args> = Value | ((arg: Args) => Value);
-export declare type PromiseOptions<Value> = {
-    loading: ToastOptions;
-    success: MaybeFunction<ToastOptions, Value>;
-    error: MaybeFunction<ToastOptions, Error>;
-};
-export declare type GroupProps = {
-    placement: Placement;
-    label?: string;
-};
-export declare type Toaster = {
-    count: number;
-    isVisible(id: string): boolean;
-    upsert(options: ToastOptions): string | undefined;
-    create(options: ToastOptions): string | undefined;
-    success(options: ToastOptions): string | undefined;
-    error(options: ToastOptions): string | undefined;
-    loading(options: ToastOptions): string | undefined;
-    dismiss(id?: string | undefined): void;
-    remove(id?: string | undefined): void;
-    promise<T>(promise: Promise<T>, options: PromiseOptions<T>, shared?: ToastOptions): Promise<T>;
-};
-export {};

package/dist/toast.utils.d.ts

@@ -1,6 +0,0 @@
-import type { Style } from "@zag-js/types";
-import type { GroupMachineContext, MachineContext, Placement, Service, Type } from "./toast.types";
-export declare function getToastsByPlacement(toasts: Service[]): Partial<Record<Placement, Service[]>>;
-export declare const defaultTimeouts: Record<Type, number>;
-export declare function getToastDuration(duration: number | undefined, type: MachineContext["type"]): number;
-export declare function getGroupPlacementStyle(ctx: GroupMachineContext, placement: Placement): Style;