@zag-js/avatar 0.0.0-dev-20230518155940

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/README.md

@@ -0,0 +1,19 @@
+# @zag-js/avatar
+
+Core logic for the avatar widget implemented as a state machine
+
+## Installation
+
+```sh
+yarn add @zag-js/avatar
+# or
+npm i @zag-js/avatar
+```
+
+## Contribution
+
+Yes please! See the [contributing guidelines](https://github.com/chakra-ui/zag/blob/main/CONTRIBUTING.md) for details.
+
+## Licence
+
+This project is licensed under the terms of the [MIT license](https://github.com/chakra-ui/zag/blob/main/LICENSE).

package/dist/avatar.anatomy.d.ts

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

package/dist/avatar.anatomy.js

@@ -0,0 +1,34 @@
+"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);
+
+// src/avatar.anatomy.ts
+var avatar_anatomy_exports = {};
+__export(avatar_anatomy_exports, {
+  anatomy: () => anatomy,
+  parts: () => parts
+});
+module.exports = __toCommonJS(avatar_anatomy_exports);
+var import_anatomy = require("@zag-js/anatomy");
+var anatomy = (0, import_anatomy.createAnatomy)("avatar").parts("root", "image", "fallback");
+var parts = anatomy.build();
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  anatomy,
+  parts
+});

package/dist/avatar.anatomy.mjs

@@ -0,0 +1,8 @@
+import {
+  anatomy,
+  parts
+} from "./chunk-LM2Q4YBK.mjs";
+export {
+  anatomy,
+  parts
+};

package/dist/avatar.connect.d.ts

@@ -0,0 +1,31 @@
+import { PropTypes, NormalizeProps } from '@zag-js/types';
+import { State, Send } from './avatar.types.js';
+import '@zag-js/core';
+
+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"];
+};
+
+export { connect };

package/dist/avatar.connect.js

@@ -0,0 +1,111 @@
+"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);
+
+// src/avatar.connect.ts
+var avatar_connect_exports = {};
+__export(avatar_connect_exports, {
+  connect: () => connect
+});
+module.exports = __toCommonJS(avatar_connect_exports);
+var import_dom_query2 = require("@zag-js/dom-query");
+
+// 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.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))
+});
+
+// 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"
+      }
+    })
+  };
+}
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  connect
+});

package/dist/avatar.connect.mjs

@@ -0,0 +1,8 @@
+import {
+  connect
+} from "./chunk-KGWU4KVZ.mjs";
+import "./chunk-LM2Q4YBK.mjs";
+import "./chunk-ORAGSSGY.mjs";
+export {
+  connect
+};

package/dist/avatar.dom.d.ts

@@ -0,0 +1,32 @@
+import { MachineContext } from './avatar.types.js';
+import '@zag-js/core';
+import '@zag-js/types';
+
+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: MachineContext) => string;
+    getImageId: (ctx: MachineContext) => string;
+    getFallbackId: (ctx: MachineContext) => string;
+    getRootEl: (ctx: MachineContext) => HTMLElement | null;
+    getImageEl: (ctx: MachineContext) => HTMLImageElement | null;
+};
+
+export { dom };

package/dist/avatar.dom.js

@@ -0,0 +1,37 @@
+"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);
+
+// src/avatar.dom.ts
+var avatar_dom_exports = {};
+__export(avatar_dom_exports, {
+  dom: () => dom
+});
+module.exports = __toCommonJS(avatar_dom_exports);
+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))
+});
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  dom
+});

package/dist/avatar.dom.mjs

@@ -0,0 +1,6 @@
+import {
+  dom
+} from "./chunk-ORAGSSGY.mjs";
+export {
+  dom
+};

package/dist/avatar.machine.d.ts

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

package/dist/avatar.machine.js

@@ -0,0 +1,125 @@
+"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);
+
+// src/avatar.machine.ts
+var avatar_machine_exports = {};
+__export(avatar_machine_exports, {
+  machine: () => machine
+});
+module.exports = __toCommonJS(avatar_machine_exports);
+var import_core = require("@zag-js/core");
+var import_utils = require("@zag-js/utils");
+var import_mutation_observer = require("@zag-js/mutation-observer");
+
+// 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))
+});
+
+// src/avatar.machine.ts
+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"]
+        }
+      }
+    },
+    {
+      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 = {
+  machine
+});

package/dist/avatar.machine.mjs

@@ -0,0 +1,7 @@
+import {
+  machine
+} from "./chunk-SKBVPI7R.mjs";
+import "./chunk-ORAGSSGY.mjs";
+export {
+  machine
+};

package/dist/avatar.types.d.ts

@@ -0,0 +1,18 @@
+import { StateMachine } from '@zag-js/core';
+import { RequiredBy, CommonProperties, Context } from '@zag-js/types';
+
+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>;
+
+export { MachineContext, MachineState, Send, State, UserDefinedContext };

package/dist/avatar.types.js

@@ -0,0 +1,18 @@
+"use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+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);
+
+// src/avatar.types.ts
+var avatar_types_exports = {};
+module.exports = __toCommonJS(avatar_types_exports);

package/dist/chunk-KGWU4KVZ.mjs

@@ -0,0 +1,77 @@
+import {
+  parts
+} from "./chunk-LM2Q4YBK.mjs";
+import {
+  dom
+} from "./chunk-ORAGSSGY.mjs";
+
+// src/avatar.connect.ts
+import { dataAttr } from "@zag-js/dom-query";
+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/chunk-LM2Q4YBK.mjs

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

package/dist/chunk-ORAGSSGY.mjs

@@ -0,0 +1,13 @@
+// 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))
+});
+
+export {
+  dom
+};

package/dist/chunk-SKBVPI7R.mjs

@@ -0,0 +1,93 @@
+import {
+  dom
+} from "./chunk-ORAGSSGY.mjs";
+
+// 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"]
+        }
+      }
+    },
+    {
+      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/index.d.ts

@@ -0,0 +1,5 @@
+export { connect } from './avatar.connect.js';
+export { machine } from './avatar.machine.js';
+export { UserDefinedContext as Context } from './avatar.types.js';
+import '@zag-js/types';
+import '@zag-js/core';

package/dist/index.js

@@ -0,0 +1,201 @@
+"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);
+
+// src/index.ts
+var src_exports = {};
+__export(src_exports, {
+  connect: () => connect,
+  machine: () => machine
+});
+module.exports = __toCommonJS(src_exports);
+
+// src/avatar.connect.ts
+var import_dom_query2 = require("@zag-js/dom-query");
+
+// 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.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))
+});
+
+// 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"]
+        }
+      }
+    },
+    {
+      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 = {
+  connect,
+  machine
+});

package/dist/index.mjs

@@ -0,0 +1,12 @@
+import {
+  connect
+} from "./chunk-KGWU4KVZ.mjs";
+import "./chunk-LM2Q4YBK.mjs";
+import {
+  machine
+} from "./chunk-SKBVPI7R.mjs";
+import "./chunk-ORAGSSGY.mjs";
+export {
+  connect,
+  machine
+};

package/package.json

@@ -0,0 +1,61 @@
+{
+  "name": "@zag-js/avatar",
+  "version": "0.0.0-dev-20230518155940",
+  "description": "Core logic for the avatar widget implemented as a state machine",
+  "keywords": [
+    "js",
+    "machine",
+    "xstate",
+    "statechart",
+    "component",
+    "chakra-ui",
+    "avatar"
+  ],
+  "author": "Segun Adebayo <sage@adebayosegun.com>",
+  "homepage": "https://github.com/chakra-ui/zag#readme",
+  "license": "MIT",
+  "main": "dist/index.js",
+  "repository": "https://github.com/chakra-ui/zag/tree/main/packages/avatar",
+  "sideEffects": false,
+  "files": [
+    "dist/**/*"
+  ],
+  "publishConfig": {
+    "access": "public"
+  },
+  "bugs": {
+    "url": "https://github.com/chakra-ui/zag/issues"
+  },
+  "dependencies": {
+    "@zag-js/anatomy": "0.0.0-dev-20230518155940",
+    "@zag-js/mutation-observer": "0.0.0-dev-20230518155940",
+    "@zag-js/core": "0.0.0-dev-20230518155940",
+    "@zag-js/dom-query": "0.0.0-dev-20230518155940",
+    "@zag-js/utils": "0.0.0-dev-20230518155940",
+    "@zag-js/types": "0.0.0-dev-20230518155940"
+  },
+  "devDependencies": {
+    "clean-package": "2.2.0"
+  },
+  "clean-package": "../../../clean-package.config.json",
+  "module": "dist/index.mjs",
+  "types": "dist/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.mjs",
+      "require": "./dist/index.js"
+    },
+    "./package.json": "./package.json"
+  },
+  "scripts": {
+    "build-fast": "tsup src",
+    "start": "pnpm build --watch",
+    "build": "tsup src --dts",
+    "test": "jest --config ../../../jest.config.js --rootDir . --passWithNoTests",
+    "lint": "eslint src --ext .ts,.tsx",
+    "test-ci": "pnpm test --ci --runInBand",
+    "test-watch": "pnpm test --watch -u",
+    "typecheck": "tsc --noEmit"
+  }
+}