@zag-js/avatar 0.10.4 → 0.11.0

package/dist/index.d.mts

@@ -0,0 +1,50 @@
+import * as _zag_js_anatomy from '@zag-js/anatomy';
+import { RequiredBy, CommonProperties, Context, PropTypes, NormalizeProps } from '@zag-js/types';
+import * as _zag_js_core from '@zag-js/core';
+import { StateMachine } from '@zag-js/core';
+
+declare const anatomy: _zag_js_anatomy.AnatomyInstance<"root" | "image" | "fallback">;
+
+type PublicContext = CommonProperties & {
+    onLoad?: () => void;
+    onError?: () => void;
+};
+type PrivateContext = Context<{}>;
+type ComputedContext = Readonly<{}>;
+type UserDefinedContext = RequiredBy<PublicContext, "id">;
+type MachineContext = PublicContext & PrivateContext & ComputedContext;
+type MachineState = {
+    value: "loading" | "error" | "loaded";
+};
+type State = StateMachine.State<MachineContext, MachineState>;
+type Send = StateMachine.Send<StateMachine.AnyEventObject>;
+
+declare function connect<T extends PropTypes>(state: State, send: Send, normalize: NormalizeProps<T>): {
+    /**
+     * Whether the image is loaded.
+     */
+    isLoaded: boolean;
+    /**
+     * Whether the fallback is shown.
+     */
+    showFallback: boolean;
+    /**
+     * Function to set new src.
+     */
+    setSrc(src: string): void;
+    /**
+     * Function to set loaded state.
+     */
+    setLoaded(): void;
+    /**
+     * Function to set error state.
+     */
+    setError(): void;
+    rootProps: T["element"];
+    imageProps: T["img"];
+    fallbackProps: T["element"];
+};
+
+declare function machine(userContext: UserDefinedContext): _zag_js_core.Machine<MachineContext, MachineState, _zag_js_core.StateMachine.AnyEventObject>;
+
+export { UserDefinedContext as Context, anatomy, connect, machine };

package/dist/index.d.ts

@@ -1,4 +1,50 @@
-export { anatomy } from "./avatar.anatomy";
-export { connect } from "./avatar.connect";
-export { machine } from "./avatar.machine";
-export type { UserDefinedContext as Context } from "./avatar.types";
+import * as _zag_js_anatomy from '@zag-js/anatomy';
+import { RequiredBy, CommonProperties, Context, PropTypes, NormalizeProps } from '@zag-js/types';
+import * as _zag_js_core from '@zag-js/core';
+import { StateMachine } from '@zag-js/core';
+
+declare const anatomy: _zag_js_anatomy.AnatomyInstance<"root" | "image" | "fallback">;
+
+type PublicContext = CommonProperties & {
+    onLoad?: () => void;
+    onError?: () => void;
+};
+type PrivateContext = Context<{}>;
+type ComputedContext = Readonly<{}>;
+type UserDefinedContext = RequiredBy<PublicContext, "id">;
+type MachineContext = PublicContext & PrivateContext & ComputedContext;
+type MachineState = {
+    value: "loading" | "error" | "loaded";
+};
+type State = StateMachine.State<MachineContext, MachineState>;
+type Send = StateMachine.Send<StateMachine.AnyEventObject>;
+
+declare function connect<T extends PropTypes>(state: State, send: Send, normalize: NormalizeProps<T>): {
+    /**
+     * Whether the image is loaded.
+     */
+    isLoaded: boolean;
+    /**
+     * Whether the fallback is shown.
+     */
+    showFallback: boolean;
+    /**
+     * Function to set new src.
+     */
+    setSrc(src: string): void;
+    /**
+     * Function to set loaded state.
+     */
+    setLoaded(): void;
+    /**
+     * Function to set error state.
+     */
+    setError(): void;
+    rootProps: T["element"];
+    imageProps: T["img"];
+    fallbackProps: T["element"];
+};
+
+declare function machine(userContext: UserDefinedContext): _zag_js_core.Machine<MachineContext, MachineState, _zag_js_core.StateMachine.AnyEventObject>;
+
+export { UserDefinedContext as Context, anatomy, connect, machine };

package/dist/index.js

@@ -1,13 +1,210 @@
-'use strict';
+"use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
 
-Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
+// src/index.ts
+var src_exports = {};
+__export(src_exports, {
+  anatomy: () => anatomy,
+  connect: () => connect,
+  machine: () => machine
+});
+module.exports = __toCommonJS(src_exports);
 
-const avatar_anatomy = require('./avatar.anatomy.js');
-const avatar_connect = require('./avatar.connect.js');
-const avatar_machine = require('./avatar.machine.js');
+// src/avatar.anatomy.ts
+var import_anatomy = require("@zag-js/anatomy");
+var anatomy = (0, import_anatomy.createAnatomy)("avatar").parts("root", "image", "fallback");
+var parts = anatomy.build();
 
+// src/avatar.connect.ts
+var import_dom_query2 = require("@zag-js/dom-query");
 
+// src/avatar.dom.ts
+var import_dom_query = require("@zag-js/dom-query");
+var dom = (0, import_dom_query.createScope)({
+  getRootId: (ctx) => `avatar:${ctx.id}`,
+  getImageId: (ctx) => `avatar:${ctx.id}:image`,
+  getFallbackId: (ctx) => `avatar:${ctx.id}:fallback`,
+  getRootEl: (ctx) => dom.getById(ctx, dom.getRootId(ctx)),
+  getImageEl: (ctx) => dom.getById(ctx, dom.getImageId(ctx))
+});
 
-exports.anatomy = avatar_anatomy.anatomy;
-exports.connect = avatar_connect.connect;
-exports.machine = avatar_machine.machine;
+// src/avatar.connect.ts
+function connect(state, send, normalize) {
+  const isLoaded = state.matches("loaded");
+  const showFallback = !isLoaded;
+  return {
+    /**
+     * Whether the image is loaded.
+     */
+    isLoaded,
+    /**
+     * Whether the fallback is shown.
+     */
+    showFallback,
+    /**
+     * Function to set new src.
+     */
+    setSrc(src) {
+      send({ type: "SRC.SET", src });
+    },
+    /**
+     * Function to set loaded state.
+     */
+    setLoaded() {
+      send({ type: "IMG.LOADED", src: "api" });
+    },
+    /**
+     * Function to set error state.
+     */
+    setError() {
+      send({ type: "IMG.ERROR", src: "api" });
+    },
+    rootProps: normalize.element({
+      ...parts.root.attrs,
+      id: dom.getRootId(state.context),
+      style: {
+        display: "grid",
+        gridTemplateRows: "1fr 1fr",
+        overflow: "hidden"
+      }
+    }),
+    imageProps: normalize.img({
+      ...parts.image.attrs,
+      id: dom.getImageId(state.context),
+      "data-loaded": (0, import_dom_query2.dataAttr)(isLoaded),
+      onLoad() {
+        send({ type: "IMG.LOADED", src: "element" });
+      },
+      onError() {
+        send({ type: "IMG.ERROR", src: "element" });
+      },
+      style: {
+        gridArea: "1 / 1 / 2 / 2",
+        visibility: !isLoaded ? "hidden" : void 0
+      }
+    }),
+    fallbackProps: normalize.element({
+      ...parts.fallback.attrs,
+      id: dom.getFallbackId(state.context),
+      hidden: !showFallback,
+      style: {
+        gridArea: "1 / 1 / 2 / 2"
+      }
+    })
+  };
+}
+
+// src/avatar.machine.ts
+var import_core = require("@zag-js/core");
+var import_utils = require("@zag-js/utils");
+var import_mutation_observer = require("@zag-js/mutation-observer");
+function machine(userContext) {
+  const ctx = (0, import_utils.compact)(userContext);
+  return (0, import_core.createMachine)(
+    {
+      id: "avatar",
+      initial: "loading",
+      activities: ["trackImageRemoval"],
+      context: ctx,
+      on: {
+        "SRC.CHANGE": {
+          target: "loading"
+        },
+        "IMG.UNMOUNT": {
+          target: "error"
+        }
+      },
+      states: {
+        loading: {
+          activities: ["trackSrcChange"],
+          entry: ["checkImgStatus"],
+          on: {
+            "IMG.LOADED": {
+              target: "loaded",
+              actions: ["invokeOnLoad"]
+            },
+            "IMG.ERROR": {
+              target: "error",
+              actions: ["invokeOnError"]
+            }
+          }
+        },
+        error: {
+          activities: ["trackSrcChange"],
+          on: {
+            "IMG.LOADED": {
+              target: "loaded",
+              actions: ["invokeOnLoad"]
+            }
+          }
+        },
+        loaded: {
+          activities: ["trackSrcChange"],
+          on: {
+            "IMG.ERROR": {
+              target: "error",
+              actions: ["invokeOnError"]
+            }
+          }
+        }
+      }
+    },
+    {
+      activities: {
+        trackSrcChange(ctx2, _evt, { send }) {
+          const img = dom.getImageEl(ctx2);
+          return (0, import_mutation_observer.observeAttributes)(img, ["src", "srcset"], () => {
+            send({ type: "SRC.CHANGE" });
+          });
+        },
+        trackImageRemoval(ctx2, _evt, { send }) {
+          const rootEl = dom.getRootEl(ctx2);
+          return (0, import_mutation_observer.observeChildren)(rootEl, (records) => {
+            const removedNodes = Array.from(records[0].removedNodes);
+            const removed = removedNodes.find((node) => node.matches("[data-scope=avatar][data-part=image]"));
+            if (removed) {
+              send({ type: "IMG.UNMOUNT" });
+            }
+          });
+        }
+      },
+      actions: {
+        invokeOnLoad(ctx2) {
+          ctx2.onLoad?.();
+        },
+        invokeOnError(ctx2) {
+          ctx2.onError?.();
+        },
+        checkImgStatus(ctx2, _evt, { send }) {
+          const img = dom.getImageEl(ctx2);
+          if (img?.complete) {
+            send({ type: "IMG.LOADED", src: "ssr" });
+          }
+        }
+      }
+    }
+  );
+}
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  anatomy,
+  connect,
+  machine
+});
+//# sourceMappingURL=index.js.map

package/dist/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/index.ts","../src/avatar.anatomy.ts","../src/avatar.connect.ts","../src/avatar.dom.ts","../src/avatar.machine.ts"],"sourcesContent":["export { anatomy } from \"./avatar.anatomy\"\nexport { connect } from \"./avatar.connect\"\nexport { machine } from \"./avatar.machine\"\nexport type { UserDefinedContext as Context } from \"./avatar.types\"\n","import { createAnatomy } from \"@zag-js/anatomy\"\n\nexport const anatomy = createAnatomy(\"avatar\").parts(\"root\", \"image\", \"fallback\")\n\nexport const parts = anatomy.build()\n","import { dataAttr } from \"@zag-js/dom-query\"\nimport { NormalizeProps, type PropTypes } from \"@zag-js/types\"\nimport { parts } from \"./avatar.anatomy\"\nimport { dom } from \"./avatar.dom\"\nimport { Send, State } from \"./avatar.types\"\n\nexport function connect<T extends PropTypes>(state: State, send: Send, normalize: NormalizeProps<T>) {\n  const isLoaded = state.matches(\"loaded\")\n  const showFallback = !isLoaded\n\n  return {\n    /**\n     * Whether the image is loaded.\n     */\n    isLoaded,\n    /**\n     * Whether the fallback is shown.\n     */\n    showFallback,\n    /**\n     * Function to set new src.\n     */\n    setSrc(src: string) {\n      send({ type: \"SRC.SET\", src })\n    },\n    /**\n     * Function to set loaded state.\n     */\n    setLoaded() {\n      send({ type: \"IMG.LOADED\", src: \"api\" })\n    },\n    /**\n     * Function to set error state.\n     */\n    setError() {\n      send({ type: \"IMG.ERROR\", src: \"api\" })\n    },\n\n    rootProps: normalize.element({\n      ...parts.root.attrs,\n      id: dom.getRootId(state.context),\n      style: {\n        display: \"grid\",\n        gridTemplateRows: \"1fr 1fr\",\n        overflow: \"hidden\",\n      },\n    }),\n\n    imageProps: normalize.img({\n      ...parts.image.attrs,\n      id: dom.getImageId(state.context),\n      \"data-loaded\": dataAttr(isLoaded),\n      onLoad() {\n        send({ type: \"IMG.LOADED\", src: \"element\" })\n      },\n      onError() {\n        send({ type: \"IMG.ERROR\", src: \"element\" })\n      },\n      style: {\n        gridArea: \"1 / 1 / 2 / 2\",\n        visibility: !isLoaded ? \"hidden\" : undefined,\n      },\n    }),\n\n    fallbackProps: normalize.element({\n      ...parts.fallback.attrs,\n      id: dom.getFallbackId(state.context),\n      hidden: !showFallback,\n      style: {\n        gridArea: \"1 / 1 / 2 / 2\",\n      },\n    }),\n  }\n}\n","import { createScope } from \"@zag-js/dom-query\"\nimport type { MachineContext as Ctx } from \"./avatar.types\"\n\nexport const dom = createScope({\n  getRootId: (ctx: Ctx) => `avatar:${ctx.id}`,\n  getImageId: (ctx: Ctx) => `avatar:${ctx.id}:image`,\n  getFallbackId: (ctx: Ctx) => `avatar:${ctx.id}:fallback`,\n\n  getRootEl: (ctx: Ctx) => dom.getById(ctx, dom.getRootId(ctx)),\n  getImageEl: (ctx: Ctx) => dom.getById<HTMLImageElement>(ctx, dom.getImageId(ctx)),\n})\n","import { createMachine } from \"@zag-js/core\"\nimport { compact } from \"@zag-js/utils\"\nimport { observeAttributes, observeChildren } from \"@zag-js/mutation-observer\"\nimport { MachineContext, MachineState, UserDefinedContext } from \"./avatar.types\"\nimport { dom } from \"./avatar.dom\"\n\nexport function machine(userContext: UserDefinedContext) {\n  const ctx = compact(userContext)\n  return createMachine<MachineContext, MachineState>(\n    {\n      id: \"avatar\",\n      initial: \"loading\",\n      activities: [\"trackImageRemoval\"],\n\n      context: ctx,\n\n      on: {\n        \"SRC.CHANGE\": {\n          target: \"loading\",\n        },\n        \"IMG.UNMOUNT\": {\n          target: \"error\",\n        },\n      },\n\n      states: {\n        loading: {\n          activities: [\"trackSrcChange\"],\n          entry: [\"checkImgStatus\"],\n          on: {\n            \"IMG.LOADED\": {\n              target: \"loaded\",\n              actions: [\"invokeOnLoad\"],\n            },\n            \"IMG.ERROR\": {\n              target: \"error\",\n              actions: [\"invokeOnError\"],\n            },\n          },\n        },\n        error: {\n          activities: [\"trackSrcChange\"],\n          on: {\n            \"IMG.LOADED\": {\n              target: \"loaded\",\n              actions: [\"invokeOnLoad\"],\n            },\n          },\n        },\n        loaded: {\n          activities: [\"trackSrcChange\"],\n          on: {\n            \"IMG.ERROR\": {\n              target: \"error\",\n              actions: [\"invokeOnError\"],\n            },\n          },\n        },\n      },\n    },\n    {\n      activities: {\n        trackSrcChange(ctx, _evt, { send }) {\n          const img = dom.getImageEl(ctx)\n          return observeAttributes(img, [\"src\", \"srcset\"], () => {\n            send({ type: \"SRC.CHANGE\" })\n          })\n        },\n        trackImageRemoval(ctx, _evt, { send }) {\n          const rootEl = dom.getRootEl(ctx)\n          return observeChildren(rootEl, (records) => {\n            const removedNodes = Array.from(records[0].removedNodes) as HTMLElement[]\n            const removed = removedNodes.find((node) => node.matches(\"[data-scope=avatar][data-part=image]\"))\n            if (removed) {\n              send({ type: \"IMG.UNMOUNT\" })\n            }\n          })\n        },\n      },\n      actions: {\n        invokeOnLoad(ctx) {\n          ctx.onLoad?.()\n        },\n        invokeOnError(ctx) {\n          ctx.onError?.()\n        },\n        checkImgStatus(ctx, _evt, { send }) {\n          const img = dom.getImageEl(ctx)\n          if (img?.complete) {\n            send({ type: \"IMG.LOADED\", src: \"ssr\" })\n          }\n        },\n      },\n    },\n  )\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;;ACAA,qBAA8B;AAEvB,IAAM,cAAU,8BAAc,QAAQ,EAAE,MAAM,QAAQ,SAAS,UAAU;AAEzE,IAAM,QAAQ,QAAQ,MAAM;;;ACJnC,IAAAA,oBAAyB;;;ACAzB,uBAA4B;AAGrB,IAAM,UAAM,8BAAY;AAAA,EAC7B,WAAW,CAAC,QAAa,UAAU,IAAI;AAAA,EACvC,YAAY,CAAC,QAAa,UAAU,IAAI;AAAA,EACxC,eAAe,CAAC,QAAa,UAAU,IAAI;AAAA,EAE3C,WAAW,CAAC,QAAa,IAAI,QAAQ,KAAK,IAAI,UAAU,GAAG,CAAC;AAAA,EAC5D,YAAY,CAAC,QAAa,IAAI,QAA0B,KAAK,IAAI,WAAW,GAAG,CAAC;AAClF,CAAC;;;ADJM,SAAS,QAA6B,OAAc,MAAY,WAA8B;AACnG,QAAM,WAAW,MAAM,QAAQ,QAAQ;AACvC,QAAM,eAAe,CAAC;AAEtB,SAAO;AAAA;AAAA;AAAA;AAAA,IAIL;AAAA;AAAA;AAAA;AAAA,IAIA;AAAA;AAAA;AAAA;AAAA,IAIA,OAAO,KAAa;AAClB,WAAK,EAAE,MAAM,WAAW,IAAI,CAAC;AAAA,IAC/B;AAAA;AAAA;AAAA;AAAA,IAIA,YAAY;AACV,WAAK,EAAE,MAAM,cAAc,KAAK,MAAM,CAAC;AAAA,IACzC;AAAA;AAAA;AAAA;AAAA,IAIA,WAAW;AACT,WAAK,EAAE,MAAM,aAAa,KAAK,MAAM,CAAC;AAAA,IACxC;AAAA,IAEA,WAAW,UAAU,QAAQ;AAAA,MAC3B,GAAG,MAAM,KAAK;AAAA,MACd,IAAI,IAAI,UAAU,MAAM,OAAO;AAAA,MAC/B,OAAO;AAAA,QACL,SAAS;AAAA,QACT,kBAAkB;AAAA,QAClB,UAAU;AAAA,MACZ;AAAA,IACF,CAAC;AAAA,IAED,YAAY,UAAU,IAAI;AAAA,MACxB,GAAG,MAAM,MAAM;AAAA,MACf,IAAI,IAAI,WAAW,MAAM,OAAO;AAAA,MAChC,mBAAe,4BAAS,QAAQ;AAAA,MAChC,SAAS;AACP,aAAK,EAAE,MAAM,cAAc,KAAK,UAAU,CAAC;AAAA,MAC7C;AAAA,MACA,UAAU;AACR,aAAK,EAAE,MAAM,aAAa,KAAK,UAAU,CAAC;AAAA,MAC5C;AAAA,MACA,OAAO;AAAA,QACL,UAAU;AAAA,QACV,YAAY,CAAC,WAAW,WAAW;AAAA,MACrC;AAAA,IACF,CAAC;AAAA,IAED,eAAe,UAAU,QAAQ;AAAA,MAC/B,GAAG,MAAM,SAAS;AAAA,MAClB,IAAI,IAAI,cAAc,MAAM,OAAO;AAAA,MACnC,QAAQ,CAAC;AAAA,MACT,OAAO;AAAA,QACL,UAAU;AAAA,MACZ;AAAA,IACF,CAAC;AAAA,EACH;AACF;;;AEzEA,kBAA8B;AAC9B,mBAAwB;AACxB,+BAAmD;AAI5C,SAAS,QAAQ,aAAiC;AACvD,QAAM,UAAM,sBAAQ,WAAW;AAC/B,aAAO;AAAA,IACL;AAAA,MACE,IAAI;AAAA,MACJ,SAAS;AAAA,MACT,YAAY,CAAC,mBAAmB;AAAA,MAEhC,SAAS;AAAA,MAET,IAAI;AAAA,QACF,cAAc;AAAA,UACZ,QAAQ;AAAA,QACV;AAAA,QACA,eAAe;AAAA,UACb,QAAQ;AAAA,QACV;AAAA,MACF;AAAA,MAEA,QAAQ;AAAA,QACN,SAAS;AAAA,UACP,YAAY,CAAC,gBAAgB;AAAA,UAC7B,OAAO,CAAC,gBAAgB;AAAA,UACxB,IAAI;AAAA,YACF,cAAc;AAAA,cACZ,QAAQ;AAAA,cACR,SAAS,CAAC,cAAc;AAAA,YAC1B;AAAA,YACA,aAAa;AAAA,cACX,QAAQ;AAAA,cACR,SAAS,CAAC,eAAe;AAAA,YAC3B;AAAA,UACF;AAAA,QACF;AAAA,QACA,OAAO;AAAA,UACL,YAAY,CAAC,gBAAgB;AAAA,UAC7B,IAAI;AAAA,YACF,cAAc;AAAA,cACZ,QAAQ;AAAA,cACR,SAAS,CAAC,cAAc;AAAA,YAC1B;AAAA,UACF;AAAA,QACF;AAAA,QACA,QAAQ;AAAA,UACN,YAAY,CAAC,gBAAgB;AAAA,UAC7B,IAAI;AAAA,YACF,aAAa;AAAA,cACX,QAAQ;AAAA,cACR,SAAS,CAAC,eAAe;AAAA,YAC3B;AAAA,UACF;AAAA,QACF;AAAA,MACF;AAAA,IACF;AAAA,IACA;AAAA,MACE,YAAY;AAAA,QACV,eAAeC,MAAK,MAAM,EAAE,KAAK,GAAG;AAClC,gBAAM,MAAM,IAAI,WAAWA,IAAG;AAC9B,qBAAO,4CAAkB,KAAK,CAAC,OAAO,QAAQ,GAAG,MAAM;AACrD,iBAAK,EAAE,MAAM,aAAa,CAAC;AAAA,UAC7B,CAAC;AAAA,QACH;AAAA,QACA,kBAAkBA,MAAK,MAAM,EAAE,KAAK,GAAG;AACrC,gBAAM,SAAS,IAAI,UAAUA,IAAG;AAChC,qBAAO,0CAAgB,QAAQ,CAAC,YAAY;AAC1C,kBAAM,eAAe,MAAM,KAAK,QAAQ,CAAC,EAAE,YAAY;AACvD,kBAAM,UAAU,aAAa,KAAK,CAAC,SAAS,KAAK,QAAQ,sCAAsC,CAAC;AAChG,gBAAI,SAAS;AACX,mBAAK,EAAE,MAAM,cAAc,CAAC;AAAA,YAC9B;AAAA,UACF,CAAC;AAAA,QACH;AAAA,MACF;AAAA,MACA,SAAS;AAAA,QACP,aAAaA,MAAK;AAChB,UAAAA,KAAI,SAAS;AAAA,QACf;AAAA,QACA,cAAcA,MAAK;AACjB,UAAAA,KAAI,UAAU;AAAA,QAChB;AAAA,QACA,eAAeA,MAAK,MAAM,EAAE,KAAK,GAAG;AAClC,gBAAM,MAAM,IAAI,WAAWA,IAAG;AAC9B,cAAI,KAAK,UAAU;AACjB,iBAAK,EAAE,MAAM,cAAc,KAAK,MAAM,CAAC;AAAA,UACzC;AAAA,QACF;AAAA,MACF;AAAA,IACF;AAAA,EACF;AACF;","names":["import_dom_query","ctx"]}

package/dist/index.mjs

@@ -1,3 +1,181 @@
-export { anatomy } from './avatar.anatomy.mjs';
-export { connect } from './avatar.connect.mjs';
-export { machine } from './avatar.machine.mjs';
+// src/avatar.anatomy.ts
+import { createAnatomy } from "@zag-js/anatomy";
+var anatomy = createAnatomy("avatar").parts("root", "image", "fallback");
+var parts = anatomy.build();
+
+// src/avatar.connect.ts
+import { dataAttr } from "@zag-js/dom-query";
+
+// src/avatar.dom.ts
+import { createScope } from "@zag-js/dom-query";
+var dom = createScope({
+  getRootId: (ctx) => `avatar:${ctx.id}`,
+  getImageId: (ctx) => `avatar:${ctx.id}:image`,
+  getFallbackId: (ctx) => `avatar:${ctx.id}:fallback`,
+  getRootEl: (ctx) => dom.getById(ctx, dom.getRootId(ctx)),
+  getImageEl: (ctx) => dom.getById(ctx, dom.getImageId(ctx))
+});
+
+// src/avatar.connect.ts
+function connect(state, send, normalize) {
+  const isLoaded = state.matches("loaded");
+  const showFallback = !isLoaded;
+  return {
+    /**
+     * Whether the image is loaded.
+     */
+    isLoaded,
+    /**
+     * Whether the fallback is shown.
+     */
+    showFallback,
+    /**
+     * Function to set new src.
+     */
+    setSrc(src) {
+      send({ type: "SRC.SET", src });
+    },
+    /**
+     * Function to set loaded state.
+     */
+    setLoaded() {
+      send({ type: "IMG.LOADED", src: "api" });
+    },
+    /**
+     * Function to set error state.
+     */
+    setError() {
+      send({ type: "IMG.ERROR", src: "api" });
+    },
+    rootProps: normalize.element({
+      ...parts.root.attrs,
+      id: dom.getRootId(state.context),
+      style: {
+        display: "grid",
+        gridTemplateRows: "1fr 1fr",
+        overflow: "hidden"
+      }
+    }),
+    imageProps: normalize.img({
+      ...parts.image.attrs,
+      id: dom.getImageId(state.context),
+      "data-loaded": dataAttr(isLoaded),
+      onLoad() {
+        send({ type: "IMG.LOADED", src: "element" });
+      },
+      onError() {
+        send({ type: "IMG.ERROR", src: "element" });
+      },
+      style: {
+        gridArea: "1 / 1 / 2 / 2",
+        visibility: !isLoaded ? "hidden" : void 0
+      }
+    }),
+    fallbackProps: normalize.element({
+      ...parts.fallback.attrs,
+      id: dom.getFallbackId(state.context),
+      hidden: !showFallback,
+      style: {
+        gridArea: "1 / 1 / 2 / 2"
+      }
+    })
+  };
+}
+
+// src/avatar.machine.ts
+import { createMachine } from "@zag-js/core";
+import { compact } from "@zag-js/utils";
+import { observeAttributes, observeChildren } from "@zag-js/mutation-observer";
+function machine(userContext) {
+  const ctx = compact(userContext);
+  return createMachine(
+    {
+      id: "avatar",
+      initial: "loading",
+      activities: ["trackImageRemoval"],
+      context: ctx,
+      on: {
+        "SRC.CHANGE": {
+          target: "loading"
+        },
+        "IMG.UNMOUNT": {
+          target: "error"
+        }
+      },
+      states: {
+        loading: {
+          activities: ["trackSrcChange"],
+          entry: ["checkImgStatus"],
+          on: {
+            "IMG.LOADED": {
+              target: "loaded",
+              actions: ["invokeOnLoad"]
+            },
+            "IMG.ERROR": {
+              target: "error",
+              actions: ["invokeOnError"]
+            }
+          }
+        },
+        error: {
+          activities: ["trackSrcChange"],
+          on: {
+            "IMG.LOADED": {
+              target: "loaded",
+              actions: ["invokeOnLoad"]
+            }
+          }
+        },
+        loaded: {
+          activities: ["trackSrcChange"],
+          on: {
+            "IMG.ERROR": {
+              target: "error",
+              actions: ["invokeOnError"]
+            }
+          }
+        }
+      }
+    },
+    {
+      activities: {
+        trackSrcChange(ctx2, _evt, { send }) {
+          const img = dom.getImageEl(ctx2);
+          return observeAttributes(img, ["src", "srcset"], () => {
+            send({ type: "SRC.CHANGE" });
+          });
+        },
+        trackImageRemoval(ctx2, _evt, { send }) {
+          const rootEl = dom.getRootEl(ctx2);
+          return observeChildren(rootEl, (records) => {
+            const removedNodes = Array.from(records[0].removedNodes);
+            const removed = removedNodes.find((node) => node.matches("[data-scope=avatar][data-part=image]"));
+            if (removed) {
+              send({ type: "IMG.UNMOUNT" });
+            }
+          });
+        }
+      },
+      actions: {
+        invokeOnLoad(ctx2) {
+          ctx2.onLoad?.();
+        },
+        invokeOnError(ctx2) {
+          ctx2.onError?.();
+        },
+        checkImgStatus(ctx2, _evt, { send }) {
+          const img = dom.getImageEl(ctx2);
+          if (img?.complete) {
+            send({ type: "IMG.LOADED", src: "ssr" });
+          }
+        }
+      }
+    }
+  );
+}
+export {
+  anatomy,
+  connect,
+  machine
+};
+//# sourceMappingURL=index.mjs.map

package/dist/index.mjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/avatar.anatomy.ts","../src/avatar.connect.ts","../src/avatar.dom.ts","../src/avatar.machine.ts"],"sourcesContent":["import { createAnatomy } from \"@zag-js/anatomy\"\n\nexport const anatomy = createAnatomy(\"avatar\").parts(\"root\", \"image\", \"fallback\")\n\nexport const parts = anatomy.build()\n","import { dataAttr } from \"@zag-js/dom-query\"\nimport { NormalizeProps, type PropTypes } from \"@zag-js/types\"\nimport { parts } from \"./avatar.anatomy\"\nimport { dom } from \"./avatar.dom\"\nimport { Send, State } from \"./avatar.types\"\n\nexport function connect<T extends PropTypes>(state: State, send: Send, normalize: NormalizeProps<T>) {\n  const isLoaded = state.matches(\"loaded\")\n  const showFallback = !isLoaded\n\n  return {\n    /**\n     * Whether the image is loaded.\n     */\n    isLoaded,\n    /**\n     * Whether the fallback is shown.\n     */\n    showFallback,\n    /**\n     * Function to set new src.\n     */\n    setSrc(src: string) {\n      send({ type: \"SRC.SET\", src })\n    },\n    /**\n     * Function to set loaded state.\n     */\n    setLoaded() {\n      send({ type: \"IMG.LOADED\", src: \"api\" })\n    },\n    /**\n     * Function to set error state.\n     */\n    setError() {\n      send({ type: \"IMG.ERROR\", src: \"api\" })\n    },\n\n    rootProps: normalize.element({\n      ...parts.root.attrs,\n      id: dom.getRootId(state.context),\n      style: {\n        display: \"grid\",\n        gridTemplateRows: \"1fr 1fr\",\n        overflow: \"hidden\",\n      },\n    }),\n\n    imageProps: normalize.img({\n      ...parts.image.attrs,\n      id: dom.getImageId(state.context),\n      \"data-loaded\": dataAttr(isLoaded),\n      onLoad() {\n        send({ type: \"IMG.LOADED\", src: \"element\" })\n      },\n      onError() {\n        send({ type: \"IMG.ERROR\", src: \"element\" })\n      },\n      style: {\n        gridArea: \"1 / 1 / 2 / 2\",\n        visibility: !isLoaded ? \"hidden\" : undefined,\n      },\n    }),\n\n    fallbackProps: normalize.element({\n      ...parts.fallback.attrs,\n      id: dom.getFallbackId(state.context),\n      hidden: !showFallback,\n      style: {\n        gridArea: \"1 / 1 / 2 / 2\",\n      },\n    }),\n  }\n}\n","import { createScope } from \"@zag-js/dom-query\"\nimport type { MachineContext as Ctx } from \"./avatar.types\"\n\nexport const dom = createScope({\n  getRootId: (ctx: Ctx) => `avatar:${ctx.id}`,\n  getImageId: (ctx: Ctx) => `avatar:${ctx.id}:image`,\n  getFallbackId: (ctx: Ctx) => `avatar:${ctx.id}:fallback`,\n\n  getRootEl: (ctx: Ctx) => dom.getById(ctx, dom.getRootId(ctx)),\n  getImageEl: (ctx: Ctx) => dom.getById<HTMLImageElement>(ctx, dom.getImageId(ctx)),\n})\n","import { createMachine } from \"@zag-js/core\"\nimport { compact } from \"@zag-js/utils\"\nimport { observeAttributes, observeChildren } from \"@zag-js/mutation-observer\"\nimport { MachineContext, MachineState, UserDefinedContext } from \"./avatar.types\"\nimport { dom } from \"./avatar.dom\"\n\nexport function machine(userContext: UserDefinedContext) {\n  const ctx = compact(userContext)\n  return createMachine<MachineContext, MachineState>(\n    {\n      id: \"avatar\",\n      initial: \"loading\",\n      activities: [\"trackImageRemoval\"],\n\n      context: ctx,\n\n      on: {\n        \"SRC.CHANGE\": {\n          target: \"loading\",\n        },\n        \"IMG.UNMOUNT\": {\n          target: \"error\",\n        },\n      },\n\n      states: {\n        loading: {\n          activities: [\"trackSrcChange\"],\n          entry: [\"checkImgStatus\"],\n          on: {\n            \"IMG.LOADED\": {\n              target: \"loaded\",\n              actions: [\"invokeOnLoad\"],\n            },\n            \"IMG.ERROR\": {\n              target: \"error\",\n              actions: [\"invokeOnError\"],\n            },\n          },\n        },\n        error: {\n          activities: [\"trackSrcChange\"],\n          on: {\n            \"IMG.LOADED\": {\n              target: \"loaded\",\n              actions: [\"invokeOnLoad\"],\n            },\n          },\n        },\n        loaded: {\n          activities: [\"trackSrcChange\"],\n          on: {\n            \"IMG.ERROR\": {\n              target: \"error\",\n              actions: [\"invokeOnError\"],\n            },\n          },\n        },\n      },\n    },\n    {\n      activities: {\n        trackSrcChange(ctx, _evt, { send }) {\n          const img = dom.getImageEl(ctx)\n          return observeAttributes(img, [\"src\", \"srcset\"], () => {\n            send({ type: \"SRC.CHANGE\" })\n          })\n        },\n        trackImageRemoval(ctx, _evt, { send }) {\n          const rootEl = dom.getRootEl(ctx)\n          return observeChildren(rootEl, (records) => {\n            const removedNodes = Array.from(records[0].removedNodes) as HTMLElement[]\n            const removed = removedNodes.find((node) => node.matches(\"[data-scope=avatar][data-part=image]\"))\n            if (removed) {\n              send({ type: \"IMG.UNMOUNT\" })\n            }\n          })\n        },\n      },\n      actions: {\n        invokeOnLoad(ctx) {\n          ctx.onLoad?.()\n        },\n        invokeOnError(ctx) {\n          ctx.onError?.()\n        },\n        checkImgStatus(ctx, _evt, { send }) {\n          const img = dom.getImageEl(ctx)\n          if (img?.complete) {\n            send({ type: \"IMG.LOADED\", src: \"ssr\" })\n          }\n        },\n      },\n    },\n  )\n}\n"],"mappings":"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","names":["ctx"]}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@zag-js/avatar",
-  "version": "0.10.4",
+  "version": "0.11.0",
   "description": "Core logic for the avatar widget implemented as a state machine",
   "keywords": [
     "js",
@@ -28,12 +28,12 @@
     "url": "https://github.com/chakra-ui/zag/issues"
   },
   "dependencies": {
-    "@zag-js/anatomy": "0.10.4",
-    "@zag-js/mutation-observer": "0.10.4",
-    "@zag-js/core": "0.10.4",
-    "@zag-js/dom-query": "0.10.4",
-    "@zag-js/utils": "0.10.4",
-    "@zag-js/types": "0.10.4"
+    "@zag-js/anatomy": "0.11.0",
+    "@zag-js/mutation-observer": "0.11.0",
+    "@zag-js/core": "0.11.0",
+    "@zag-js/dom-query": "0.11.0",
+    "@zag-js/utils": "0.11.0",
+    "@zag-js/types": "0.11.0"
   },
   "devDependencies": {
     "clean-package": "2.2.0"
@@ -50,7 +50,7 @@
     "./package.json": "./package.json"
   },
   "scripts": {
-    "build": "vite build -c ../../../vite.config.ts",
+    "build": "tsup",
     "lint": "eslint src --ext .ts,.tsx",
     "typecheck": "tsc --noEmit"
   }

package/dist/avatar.anatomy.d.ts

@@ -1,3 +0,0 @@
-import { AnatomyInstance, AnatomyPart } from '@zag-js/anatomy';
-export declare const anatomy: AnatomyInstance<"root" | "image" | "fallback">;
-export declare const parts: Record<"root" | "image" | "fallback", AnatomyPart>;

package/dist/avatar.anatomy.js

@@ -1,11 +0,0 @@
-'use strict';
-
-Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
-
-const anatomy$1 = require('@zag-js/anatomy');
-
-const anatomy = anatomy$1.createAnatomy("avatar").parts("root", "image", "fallback");
-const parts = anatomy.build();
-
-exports.anatomy = anatomy;
-exports.parts = parts;

package/dist/avatar.anatomy.mjs

@@ -1,6 +0,0 @@
-import { createAnatomy } from '@zag-js/anatomy';
-
-const anatomy = createAnatomy("avatar").parts("root", "image", "fallback");
-const parts = anatomy.build();
-
-export { anatomy, parts };

package/dist/avatar.connect.d.ts

@@ -1,27 +0,0 @@
-import { NormalizeProps, type PropTypes } from "@zag-js/types";
-import { Send, State } from "./avatar.types";
-export declare function connect<T extends PropTypes>(state: State, send: Send, normalize: NormalizeProps<T>): {
-    /**
-     * Whether the image is loaded.
-     */
-    isLoaded: boolean;
-    /**
-     * Whether the fallback is shown.
-     */
-    showFallback: boolean;
-    /**
-     * Function to set new src.
-     */
-    setSrc(src: string): void;
-    /**
-     * Function to set loaded state.
-     */
-    setLoaded(): void;
-    /**
-     * Function to set error state.
-     */
-    setError(): void;
-    rootProps: T["element"];
-    imageProps: T["img"];
-    fallbackProps: T["element"];
-};

package/dist/avatar.connect.js

@@ -1,74 +0,0 @@
-'use strict';
-
-Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
-
-const domQuery = require('@zag-js/dom-query');
-const avatar_anatomy = require('./avatar.anatomy.js');
-const avatar_dom = require('./avatar.dom.js');
-
-function connect(state, send, normalize) {
-  const isLoaded = state.matches("loaded");
-  const showFallback = !isLoaded;
-  return {
-    /**
-     * Whether the image is loaded.
-     */
-    isLoaded,
-    /**
-     * Whether the fallback is shown.
-     */
-    showFallback,
-    /**
-     * Function to set new src.
-     */
-    setSrc(src) {
-      send({ type: "SRC.SET", src });
-    },
-    /**
-     * Function to set loaded state.
-     */
-    setLoaded() {
-      send({ type: "IMG.LOADED", src: "api" });
-    },
-    /**
-     * Function to set error state.
-     */
-    setError() {
-      send({ type: "IMG.ERROR", src: "api" });
-    },
-    rootProps: normalize.element({
-      ...avatar_anatomy.parts.root.attrs,
-      id: avatar_dom.dom.getRootId(state.context),
-      style: {
-        display: "grid",
-        gridTemplateRows: "1fr 1fr",
-        overflow: "hidden"
-      }
-    }),
-    imageProps: normalize.img({
-      ...avatar_anatomy.parts.image.attrs,
-      id: avatar_dom.dom.getImageId(state.context),
-      "data-loaded": domQuery.dataAttr(isLoaded),
-      onLoad() {
-        send({ type: "IMG.LOADED", src: "element" });
-      },
-      onError() {
-        send({ type: "IMG.ERROR", src: "element" });
-      },
-      style: {
-        gridArea: "1 / 1 / 2 / 2",
-        visibility: !isLoaded ? "hidden" : void 0
-      }
-    }),
-    fallbackProps: normalize.element({
-      ...avatar_anatomy.parts.fallback.attrs,
-      id: avatar_dom.dom.getFallbackId(state.context),
-      hidden: !showFallback,
-      style: {
-        gridArea: "1 / 1 / 2 / 2"
-      }
-    })
-  };
-}
-
-exports.connect = connect;

package/dist/avatar.connect.mjs

@@ -1,70 +0,0 @@
-import { dataAttr } from '@zag-js/dom-query';
-import { parts } from './avatar.anatomy.mjs';
-import { dom } from './avatar.dom.mjs';
-
-function connect(state, send, normalize) {
-  const isLoaded = state.matches("loaded");
-  const showFallback = !isLoaded;
-  return {
-    /**
-     * Whether the image is loaded.
-     */
-    isLoaded,
-    /**
-     * Whether the fallback is shown.
-     */
-    showFallback,
-    /**
-     * Function to set new src.
-     */
-    setSrc(src) {
-      send({ type: "SRC.SET", src });
-    },
-    /**
-     * Function to set loaded state.
-     */
-    setLoaded() {
-      send({ type: "IMG.LOADED", src: "api" });
-    },
-    /**
-     * Function to set error state.
-     */
-    setError() {
-      send({ type: "IMG.ERROR", src: "api" });
-    },
-    rootProps: normalize.element({
-      ...parts.root.attrs,
-      id: dom.getRootId(state.context),
-      style: {
-        display: "grid",
-        gridTemplateRows: "1fr 1fr",
-        overflow: "hidden"
-      }
-    }),
-    imageProps: normalize.img({
-      ...parts.image.attrs,
-      id: dom.getImageId(state.context),
-      "data-loaded": dataAttr(isLoaded),
-      onLoad() {
-        send({ type: "IMG.LOADED", src: "element" });
-      },
-      onError() {
-        send({ type: "IMG.ERROR", src: "element" });
-      },
-      style: {
-        gridArea: "1 / 1 / 2 / 2",
-        visibility: !isLoaded ? "hidden" : void 0
-      }
-    }),
-    fallbackProps: normalize.element({
-      ...parts.fallback.attrs,
-      id: dom.getFallbackId(state.context),
-      hidden: !showFallback,
-      style: {
-        gridArea: "1 / 1 / 2 / 2"
-      }
-    })
-  };
-}
-
-export { connect };

package/dist/avatar.dom.d.ts

@@ -1,27 +0,0 @@
-import type { MachineContext as Ctx } from "./avatar.types";
-export declare const dom: {
-    getRootNode: (ctx: {
-        getRootNode?: (() => Node | Document | ShadowRoot) | undefined;
-    }) => Document | ShadowRoot;
-    getDoc: (ctx: {
-        getRootNode?: (() => Node | Document | ShadowRoot) | undefined;
-    }) => Document;
-    getWin: (ctx: {
-        getRootNode?: (() => Node | Document | ShadowRoot) | undefined;
-    }) => Window & typeof globalThis;
-    getActiveElement: (ctx: {
-        getRootNode?: (() => Node | Document | ShadowRoot) | undefined;
-    }) => HTMLElement | null;
-    getById: <T extends HTMLElement = HTMLElement>(ctx: {
-        getRootNode?: (() => Node | Document | ShadowRoot) | undefined;
-    }, id: string) => T | null;
-    queryById: <T_1 extends HTMLElement = HTMLElement>(ctx: {
-        getRootNode?: (() => Node | Document | ShadowRoot) | undefined;
-    }, id: string) => T_1;
-} & {
-    getRootId: (ctx: Ctx) => string;
-    getImageId: (ctx: Ctx) => string;
-    getFallbackId: (ctx: Ctx) => string;
-    getRootEl: (ctx: Ctx) => HTMLElement | null;
-    getImageEl: (ctx: Ctx) => HTMLImageElement | null;
-};

package/dist/avatar.dom.js

@@ -1,15 +0,0 @@
-'use strict';
-
-Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
-
-const domQuery = require('@zag-js/dom-query');
-
-const dom = domQuery.createScope({
-  getRootId: (ctx) => `avatar:${ctx.id}`,
-  getImageId: (ctx) => `avatar:${ctx.id}:image`,
-  getFallbackId: (ctx) => `avatar:${ctx.id}:fallback`,
-  getRootEl: (ctx) => dom.getById(ctx, dom.getRootId(ctx)),
-  getImageEl: (ctx) => dom.getById(ctx, dom.getImageId(ctx))
-});
-
-exports.dom = dom;

package/dist/avatar.dom.mjs

@@ -1,11 +0,0 @@
-import { createScope } from '@zag-js/dom-query';
-
-const dom = createScope({
-  getRootId: (ctx) => `avatar:${ctx.id}`,
-  getImageId: (ctx) => `avatar:${ctx.id}:image`,
-  getFallbackId: (ctx) => `avatar:${ctx.id}:fallback`,
-  getRootEl: (ctx) => dom.getById(ctx, dom.getRootId(ctx)),
-  getImageEl: (ctx) => dom.getById(ctx, dom.getImageId(ctx))
-});
-
-export { dom };

package/dist/avatar.machine.d.ts

@@ -1,3 +0,0 @@
-import { Machine, StateMachine } from '@zag-js/core';
-import { MachineContext, MachineState, UserDefinedContext } from "./avatar.types";
-export declare function machine(userContext: UserDefinedContext): Machine<MachineContext, MachineState, StateMachine.AnyEventObject>;

package/dist/avatar.machine.js

@@ -1,98 +0,0 @@
-'use strict';
-
-Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
-
-const core = require('@zag-js/core');
-const utils = require('@zag-js/utils');
-const mutationObserver = require('@zag-js/mutation-observer');
-const avatar_dom = require('./avatar.dom.js');
-
-function machine(userContext) {
-  const ctx = utils.compact(userContext);
-  return core.createMachine(
-    {
-      id: "avatar",
-      initial: "loading",
-      activities: ["trackImageRemoval"],
-      context: ctx,
-      on: {
-        "SRC.CHANGE": {
-          target: "loading"
-        },
-        "IMG.UNMOUNT": {
-          target: "error"
-        }
-      },
-      states: {
-        loading: {
-          activities: ["trackSrcChange"],
-          entry: ["checkImgStatus"],
-          on: {
-            "IMG.LOADED": {
-              target: "loaded",
-              actions: ["invokeOnLoad"]
-            },
-            "IMG.ERROR": {
-              target: "error",
-              actions: ["invokeOnError"]
-            }
-          }
-        },
-        error: {
-          activities: ["trackSrcChange"],
-          on: {
-            "IMG.LOADED": {
-              target: "loaded",
-              actions: ["invokeOnLoad"]
-            }
-          }
-        },
-        loaded: {
-          activities: ["trackSrcChange"],
-          on: {
-            "IMG.ERROR": {
-              target: "error",
-              actions: ["invokeOnError"]
-            }
-          }
-        }
-      }
-    },
-    {
-      activities: {
-        trackSrcChange(ctx2, _evt, { send }) {
-          const img = avatar_dom.dom.getImageEl(ctx2);
-          return mutationObserver.observeAttributes(img, ["src", "srcset"], () => {
-            send({ type: "SRC.CHANGE" });
-          });
-        },
-        trackImageRemoval(ctx2, _evt, { send }) {
-          const rootEl = avatar_dom.dom.getRootEl(ctx2);
-          return mutationObserver.observeChildren(rootEl, (records) => {
-            const removedNodes = Array.from(records[0].removedNodes);
-            const removed = removedNodes.find((node) => node.matches("[data-scope=avatar][data-part=image]"));
-            if (removed) {
-              send({ type: "IMG.UNMOUNT" });
-            }
-          });
-        }
-      },
-      actions: {
-        invokeOnLoad(ctx2) {
-          ctx2.onLoad?.();
-        },
-        invokeOnError(ctx2) {
-          ctx2.onError?.();
-        },
-        checkImgStatus(ctx2, _evt, { send }) {
-          const img = avatar_dom.dom.getImageEl(ctx2);
-          if (img?.complete) {
-            send({ type: "IMG.LOADED", src: "ssr" });
-          }
-        }
-      }
-    }
-  );
-}
-
-exports.machine = machine;

package/dist/avatar.machine.mjs

@@ -1,94 +0,0 @@
-import { createMachine } from '@zag-js/core';
-import { compact } from '@zag-js/utils';
-import { observeAttributes, observeChildren } from '@zag-js/mutation-observer';
-import { dom } from './avatar.dom.mjs';
-
-function machine(userContext) {
-  const ctx = compact(userContext);
-  return createMachine(
-    {
-      id: "avatar",
-      initial: "loading",
-      activities: ["trackImageRemoval"],
-      context: ctx,
-      on: {
-        "SRC.CHANGE": {
-          target: "loading"
-        },
-        "IMG.UNMOUNT": {
-          target: "error"
-        }
-      },
-      states: {
-        loading: {
-          activities: ["trackSrcChange"],
-          entry: ["checkImgStatus"],
-          on: {
-            "IMG.LOADED": {
-              target: "loaded",
-              actions: ["invokeOnLoad"]
-            },
-            "IMG.ERROR": {
-              target: "error",
-              actions: ["invokeOnError"]
-            }
-          }
-        },
-        error: {
-          activities: ["trackSrcChange"],
-          on: {
-            "IMG.LOADED": {
-              target: "loaded",
-              actions: ["invokeOnLoad"]
-            }
-          }
-        },
-        loaded: {
-          activities: ["trackSrcChange"],
-          on: {
-            "IMG.ERROR": {
-              target: "error",
-              actions: ["invokeOnError"]
-            }
-          }
-        }
-      }
-    },
-    {
-      activities: {
-        trackSrcChange(ctx2, _evt, { send }) {
-          const img = dom.getImageEl(ctx2);
-          return observeAttributes(img, ["src", "srcset"], () => {
-            send({ type: "SRC.CHANGE" });
-          });
-        },
-        trackImageRemoval(ctx2, _evt, { send }) {
-          const rootEl = dom.getRootEl(ctx2);
-          return observeChildren(rootEl, (records) => {
-            const removedNodes = Array.from(records[0].removedNodes);
-            const removed = removedNodes.find((node) => node.matches("[data-scope=avatar][data-part=image]"));
-            if (removed) {
-              send({ type: "IMG.UNMOUNT" });
-            }
-          });
-        }
-      },
-      actions: {
-        invokeOnLoad(ctx2) {
-          ctx2.onLoad?.();
-        },
-        invokeOnError(ctx2) {
-          ctx2.onError?.();
-        },
-        checkImgStatus(ctx2, _evt, { send }) {
-          const img = dom.getImageEl(ctx2);
-          if (img?.complete) {
-            send({ type: "IMG.LOADED", src: "ssr" });
-          }
-        }
-      }
-    }
-  );
-}
-
-export { machine };

package/dist/avatar.types.d.ts

@@ -1,16 +0,0 @@
-import type { StateMachine as S } from "@zag-js/core";
-import type { CommonProperties, Context, RequiredBy } from "@zag-js/types";
-type PublicContext = CommonProperties & {
-    onLoad?: () => void;
-    onError?: () => void;
-};
-type PrivateContext = Context<{}>;
-type ComputedContext = Readonly<{}>;
-export type UserDefinedContext = RequiredBy<PublicContext, "id">;
-export type MachineContext = PublicContext & PrivateContext & ComputedContext;
-export type MachineState = {
-    value: "loading" | "error" | "loaded";
-};
-export type State = S.State<MachineContext, MachineState>;
-export type Send = S.Send<S.AnyEventObject>;
-export {};