@zag-js/avatar 1.43.0 → 2.0.0-next.1

package/dist/avatar.connect.js

@@ -36,9 +36,11 @@ module.exports = __toCommonJS(avatar_connect_exports);
 var import_avatar = require("./avatar.anatomy.js");
 var dom = __toESM(require("./avatar.dom.js"));
 function connect(service, normalize) {
-  const { state, send, prop, scope } = service;
-  const loaded = state.matches("loaded");
+  const { send, prop, scope } = service;
+  const status = getStatus(service);
+  const loaded = status === "loaded";
   return {
+    status,
     loaded,
     setSrc(src) {
       const img = dom.getImageEl(scope);
@@ -52,17 +54,15 @@ function connect(service, normalize) {
     },
     getRootProps() {
       return normalize.element({
-        ...import_avatar.parts.root.attrs,
-        dir: prop("dir"),
-        id: dom.getRootId(scope)
+        ...import_avatar.parts.root.attrs(scope.id),
+        dir: prop("dir")
       });
     },
     getImageProps() {
       return normalize.img({
-        ...import_avatar.parts.image.attrs,
+        ...import_avatar.parts.image.attrs(scope.id),
         hidden: !loaded,
         dir: prop("dir"),
-        id: dom.getImageId(scope),
         "data-state": loaded ? "visible" : "hidden",
         onLoad() {
           send({ type: "img.loaded", src: "element" });
@@ -74,15 +74,20 @@ function connect(service, normalize) {
     },
     getFallbackProps() {
       return normalize.element({
-        ...import_avatar.parts.fallback.attrs,
+        ...import_avatar.parts.fallback.attrs(scope.id),
         dir: prop("dir"),
-        id: dom.getFallbackId(scope),
         hidden: loaded,
         "data-state": loaded ? "hidden" : "visible"
       });
     }
   };
 }
+function getStatus(service) {
+  const { state } = service;
+  if (state.matches("error")) return "error";
+  if (state.matches("loaded")) return "loaded";
+  return "loading";
+}
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
   connect

package/dist/avatar.connect.mjs

@@ -2,9 +2,11 @@
 import { parts } from "./avatar.anatomy.mjs";
 import * as dom from "./avatar.dom.mjs";
 function connect(service, normalize) {
-  const { state, send, prop, scope } = service;
-  const loaded = state.matches("loaded");
+  const { send, prop, scope } = service;
+  const status = getStatus(service);
+  const loaded = status === "loaded";
   return {
+    status,
     loaded,
     setSrc(src) {
       const img = dom.getImageEl(scope);
@@ -18,17 +20,15 @@ function connect(service, normalize) {
     },
     getRootProps() {
       return normalize.element({
-        ...parts.root.attrs,
-        dir: prop("dir"),
-        id: dom.getRootId(scope)
+        ...parts.root.attrs(scope.id),
+        dir: prop("dir")
       });
     },
     getImageProps() {
       return normalize.img({
-        ...parts.image.attrs,
+        ...parts.image.attrs(scope.id),
         hidden: !loaded,
         dir: prop("dir"),
-        id: dom.getImageId(scope),
         "data-state": loaded ? "visible" : "hidden",
         onLoad() {
           send({ type: "img.loaded", src: "element" });
@@ -40,15 +40,20 @@ function connect(service, normalize) {
     },
     getFallbackProps() {
       return normalize.element({
-        ...parts.fallback.attrs,
+        ...parts.fallback.attrs(scope.id),
         dir: prop("dir"),
-        id: dom.getFallbackId(scope),
         hidden: loaded,
         "data-state": loaded ? "hidden" : "visible"
       });
     }
   };
 }
+function getStatus(service) {
+  const { state } = service;
+  if (state.matches("error")) return "error";
+  if (state.matches("loaded")) return "loaded";
+  return "loading";
+}
 export {
   connect
 };

package/dist/avatar.dom.js

@@ -27,11 +27,12 @@ __export(avatar_dom_exports, {
   getRootId: () => getRootId
 });
 module.exports = __toCommonJS(avatar_dom_exports);
-var getRootId = (ctx) => ctx.ids?.root ?? `avatar:${ctx.id}`;
-var getImageId = (ctx) => ctx.ids?.image ?? `avatar:${ctx.id}:image`;
-var getFallbackId = (ctx) => ctx.ids?.fallback ?? `avatar:${ctx.id}:fallback`;
-var getRootEl = (ctx) => ctx.getById(getRootId(ctx));
-var getImageEl = (ctx) => ctx.getById(getImageId(ctx));
+var import_avatar = require("./avatar.anatomy.js");
+var getRootId = (ctx) => ctx.ids?.root ?? `${ctx.id}`;
+var getImageId = (ctx) => ctx.ids?.image ?? `${ctx.id}:image`;
+var getFallbackId = (ctx) => ctx.ids?.fallback ?? `${ctx.id}:fallback`;
+var getRootEl = (ctx) => ctx.query(ctx.selector(import_avatar.parts.root));
+var getImageEl = (ctx) => ctx.query(ctx.selector(import_avatar.parts.image));
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
   getFallbackId,

package/dist/avatar.dom.mjs

@@ -1,9 +1,10 @@
 // src/avatar.dom.ts
-var getRootId = (ctx) => ctx.ids?.root ?? `avatar:${ctx.id}`;
-var getImageId = (ctx) => ctx.ids?.image ?? `avatar:${ctx.id}:image`;
-var getFallbackId = (ctx) => ctx.ids?.fallback ?? `avatar:${ctx.id}:fallback`;
-var getRootEl = (ctx) => ctx.getById(getRootId(ctx));
-var getImageEl = (ctx) => ctx.getById(getImageId(ctx));
+import { parts } from "./avatar.anatomy.mjs";
+var getRootId = (ctx) => ctx.ids?.root ?? `${ctx.id}`;
+var getImageId = (ctx) => ctx.ids?.image ?? `${ctx.id}:image`;
+var getFallbackId = (ctx) => ctx.ids?.fallback ?? `${ctx.id}:fallback`;
+var getRootEl = (ctx) => ctx.query(ctx.selector(parts.root));
+var getImageEl = (ctx) => ctx.query(ctx.selector(parts.image));
 export {
   getFallbackId,
   getImageEl,

package/dist/avatar.machine.js

@@ -88,9 +88,12 @@ var machine = (0, import_core.createMachine)({
       invokeOnError({ prop }) {
         prop("onStatusChange")?.({ status: "error" });
       },
-      checkImageStatus({ send, scope }) {
+      checkImageStatus({ send, scope, prop }) {
         const imageEl = dom.getImageEl(scope);
-        if (!imageEl?.complete) return;
+        if (!imageEl?.complete) {
+          prop("onStatusChange")?.({ status: "loading" });
+          return;
+        }
         const type = hasLoaded(imageEl) ? "img.loaded" : "img.error";
         send({ type, src: "ssr" });
       }
@@ -102,7 +105,7 @@ var machine = (0, import_core.createMachine)({
           callback(records) {
             const removedNodes = Array.from(records[0].removedNodes);
             const removed = removedNodes.find(
-              (node) => node.nodeType === Node.ELEMENT_NODE && node.matches("[data-scope=avatar][data-part=image]")
+              (node) => node.nodeType === Node.ELEMENT_NODE && node.matches("[data-avatar-image]")
             );
             if (removed) {
               send({ type: "img.unmount" });

package/dist/avatar.machine.mjs

@@ -54,9 +54,12 @@ var machine = createMachine({
       invokeOnError({ prop }) {
         prop("onStatusChange")?.({ status: "error" });
       },
-      checkImageStatus({ send, scope }) {
+      checkImageStatus({ send, scope, prop }) {
         const imageEl = dom.getImageEl(scope);
-        if (!imageEl?.complete) return;
+        if (!imageEl?.complete) {
+          prop("onStatusChange")?.({ status: "loading" });
+          return;
+        }
         const type = hasLoaded(imageEl) ? "img.loaded" : "img.error";
         send({ type, src: "ssr" });
       }
@@ -68,7 +71,7 @@ var machine = createMachine({
           callback(records) {
             const removedNodes = Array.from(records[0].removedNodes);
             const removed = removedNodes.find(
-              (node) => node.nodeType === Node.ELEMENT_NODE && node.matches("[data-scope=avatar][data-part=image]")
+              (node) => node.nodeType === Node.ELEMENT_NODE && node.matches("[data-avatar-image]")
             );
             if (removed) {
               send({ type: "img.unmount" });

package/dist/avatar.types.d.mts

@@ -1,7 +1,7 @@
 import { Machine, Service } from '@zag-js/core';
 import { CommonProperties, DirectionProperty, PropTypes } from '@zag-js/types';
 
-type LoadStatus = "error" | "loaded";
+type LoadStatus = "loading" | "error" | "loaded";
 interface StatusChangeDetails {
     status: LoadStatus;
 }
@@ -42,6 +42,10 @@ interface AvatarSchema {
 type AvatarService = Service<AvatarSchema>;
 type AvatarMachine = Machine<AvatarSchema>;
 interface AvatarApi<T extends PropTypes = PropTypes> {
+    /**
+     * The current image loading status.
+     */
+    status: LoadStatus;
     /**
      * Whether the image is loaded.
      */

package/dist/avatar.types.d.ts

@@ -1,7 +1,7 @@
 import { Machine, Service } from '@zag-js/core';
 import { CommonProperties, DirectionProperty, PropTypes } from '@zag-js/types';
 
-type LoadStatus = "error" | "loaded";
+type LoadStatus = "loading" | "error" | "loaded";
 interface StatusChangeDetails {
     status: LoadStatus;
 }
@@ -42,6 +42,10 @@ interface AvatarSchema {
 type AvatarService = Service<AvatarSchema>;
 type AvatarMachine = Machine<AvatarSchema>;
 interface AvatarApi<T extends PropTypes = PropTypes> {
+    /**
+     * The current image loading status.
+     */
+    status: LoadStatus;
     /**
      * Whether the image is loaded.
      */

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@zag-js/avatar",
-  "version": "1.43.0",
+  "version": "2.0.0-next.1",
   "description": "Core logic for the avatar widget implemented as a state machine",
   "keywords": [
     "js",
@@ -30,11 +30,11 @@
     "url": "https://github.com/chakra-ui/zag/issues"
   },
   "dependencies": {
-    "@zag-js/anatomy": "1.43.0",
-    "@zag-js/core": "1.43.0",
-    "@zag-js/dom-query": "1.43.0",
-    "@zag-js/utils": "1.43.0",
-    "@zag-js/types": "1.43.0"
+    "@zag-js/anatomy": "2.0.0-next.1",
+    "@zag-js/core": "2.0.0-next.1",
+    "@zag-js/dom-query": "2.0.0-next.1",
+    "@zag-js/utils": "2.0.0-next.1",
+    "@zag-js/types": "2.0.0-next.1"
   },
   "devDependencies": {
     "clean-package": "2.2.0"