@zag-js/avatar 0.10.1 → 0.10.3

package/dist/avatar.anatomy.d.ts

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

package/dist/avatar.anatomy.js

@@ -1,34 +1,11 @@
-"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);
+'use strict';
 
-// 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
-});
+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,8 +1,6 @@
-import {
-  anatomy,
-  parts
-} from "./chunk-LM2Q4YBK.mjs";
-export {
-  anatomy,
-  parts
-};
+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,8 +1,6 @@
-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>): {
+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.
      */
@@ -27,5 +25,3 @@ declare function connect<T extends PropTypes>(state: State, send: Send, normaliz
     imageProps: T["img"];
     fallbackProps: T["element"];
 };
-
-export { connect };

package/dist/avatar.connect.js

@@ -1,46 +1,11 @@
-"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);
+'use strict';
 
-// 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");
+Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
 
-// 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();
+const domQuery = require('@zag-js/dom-query');
+const avatar_anatomy = require('./avatar.anatomy.js');
+const avatar_dom = require('./avatar.dom.js');
 
-// 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;
@@ -72,8 +37,8 @@ function connect(state, send, normalize) {
       send({ type: "IMG.ERROR", src: "api" });
     },
     rootProps: normalize.element({
-      ...parts.root.attrs,
-      id: dom.getRootId(state.context),
+      ...avatar_anatomy.parts.root.attrs,
+      id: avatar_dom.dom.getRootId(state.context),
       style: {
         display: "grid",
         gridTemplateRows: "1fr 1fr",
@@ -81,9 +46,9 @@ function connect(state, send, normalize) {
       }
     }),
     imageProps: normalize.img({
-      ...parts.image.attrs,
-      id: dom.getImageId(state.context),
-      "data-loaded": (0, import_dom_query2.dataAttr)(isLoaded),
+      ...avatar_anatomy.parts.image.attrs,
+      id: avatar_dom.dom.getImageId(state.context),
+      "data-loaded": domQuery.dataAttr(isLoaded),
       onLoad() {
         send({ type: "IMG.LOADED", src: "element" });
       },
@@ -96,8 +61,8 @@ function connect(state, send, normalize) {
       }
     }),
     fallbackProps: normalize.element({
-      ...parts.fallback.attrs,
-      id: dom.getFallbackId(state.context),
+      ...avatar_anatomy.parts.fallback.attrs,
+      id: avatar_dom.dom.getFallbackId(state.context),
       hidden: !showFallback,
       style: {
         gridArea: "1 / 1 / 2 / 2"
@@ -105,7 +70,5 @@ function connect(state, send, normalize) {
     })
   };
 }
-// Annotate the CommonJS export names for ESM import in node:
-0 && (module.exports = {
-  connect
-});
+
+exports.connect = connect;

package/dist/avatar.connect.mjs

@@ -1,8 +1,70 @@
-import {
-  connect
-} from "./chunk-KGWU4KVZ.mjs";
-import "./chunk-LM2Q4YBK.mjs";
-import "./chunk-ORAGSSGY.mjs";
-export {
-  connect
-};
+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,32 +1,27 @@
-import { MachineContext } from './avatar.types.js';
-import '@zag-js/core';
-import '@zag-js/types';
-
-declare const dom: {
+import type { MachineContext as Ctx } from "./avatar.types";
+export declare const dom: {
     getRootNode: (ctx: {
-        getRootNode?: (() => Node | Document | ShadowRoot) | undefined;
-    }) => Document | ShadowRoot;
+        getRootNode?: (() => Node | ShadowRoot | Document) | undefined;
+    }) => ShadowRoot | Document;
     getDoc: (ctx: {
-        getRootNode?: (() => Node | Document | ShadowRoot) | undefined;
+        getRootNode?: (() => Node | ShadowRoot | Document) | undefined;
     }) => Document;
     getWin: (ctx: {
-        getRootNode?: (() => Node | Document | ShadowRoot) | undefined;
+        getRootNode?: (() => Node | ShadowRoot | Document) | undefined;
     }) => Window & typeof globalThis;
     getActiveElement: (ctx: {
-        getRootNode?: (() => Node | Document | ShadowRoot) | undefined;
+        getRootNode?: (() => Node | ShadowRoot | Document) | undefined;
     }) => HTMLElement | null;
     getById: <T extends HTMLElement = HTMLElement>(ctx: {
-        getRootNode?: (() => Node | Document | ShadowRoot) | undefined;
+        getRootNode?: (() => Node | ShadowRoot | Document) | undefined;
     }, id: string) => T | null;
     queryById: <T_1 extends HTMLElement = HTMLElement>(ctx: {
-        getRootNode?: (() => Node | Document | ShadowRoot) | undefined;
+        getRootNode?: (() => Node | ShadowRoot | Document) | 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;
+    getRootId: (ctx: Ctx) => string;
+    getImageId: (ctx: Ctx) => string;
+    getFallbackId: (ctx: Ctx) => string;
+    getRootEl: (ctx: Ctx) => HTMLElement | null;
+    getImageEl: (ctx: Ctx) => HTMLImageElement | null;
 };
-
-export { dom };

package/dist/avatar.dom.js

@@ -1,37 +1,15 @@
-"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);
+'use strict';
 
-// 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)({
+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))
 });
-// Annotate the CommonJS export names for ESM import in node:
-0 && (module.exports = {
-  dom
-});
+
+exports.dom = dom;

package/dist/avatar.dom.mjs

@@ -1,6 +1,11 @@
-import {
-  dom
-} from "./chunk-ORAGSSGY.mjs";
-export {
-  dom
-};
+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,7 +1,3 @@
-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 };
+import type { 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,46 +1,15 @@
-"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);
+'use strict';
 
-// 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");
+Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
 
-// 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))
-});
+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');
 
-// src/avatar.machine.ts
 function machine(userContext) {
-  const ctx = (0, import_utils.compact)(userContext);
-  return (0, import_core.createMachine)(
+  const ctx = utils.compact(userContext);
+  return core.createMachine(
     {
       id: "avatar",
       initial: "loading",
@@ -86,14 +55,14 @@ function machine(userContext) {
     {
       activities: {
         trackSrcChange(ctx2, _evt, { send }) {
-          const img = dom.getImageEl(ctx2);
-          return (0, import_mutation_observer.observeAttributes)(img, ["src", "srcset"], () => {
+          const img = avatar_dom.dom.getImageEl(ctx2);
+          return mutationObserver.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 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) {
@@ -110,7 +79,7 @@ function machine(userContext) {
           ctx2.onError?.();
         },
         checkImgStatus(ctx2, _evt, { send }) {
-          const img = dom.getImageEl(ctx2);
+          const img = avatar_dom.dom.getImageEl(ctx2);
           if (img?.complete) {
             send({ type: "IMG.LOADED", src: "ssr" });
           }
@@ -119,7 +88,5 @@ function machine(userContext) {
     }
   );
 }
-// Annotate the CommonJS export names for ESM import in node:
-0 && (module.exports = {
-  machine
-});
+
+exports.machine = machine;

package/dist/avatar.machine.mjs

@@ -1,7 +1,88 @@
-import {
-  machine
-} from "./chunk-SKBVPI7R.mjs";
-import "./chunk-ORAGSSGY.mjs";
-export {
-  machine
-};
+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"]
+        }
+      }
+    },
+    {
+      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,18 +1,16 @@
-import { StateMachine } from '@zag-js/core';
-import { RequiredBy, CommonProperties, Context } from '@zag-js/types';
-
+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<{}>;
-type UserDefinedContext = RequiredBy<PublicContext, "id">;
-type MachineContext = PublicContext & PrivateContext & ComputedContext;
-type MachineState = {
+export type UserDefinedContext = RequiredBy<PublicContext, "id">;
+export type MachineContext = PublicContext & PrivateContext & ComputedContext;
+export type MachineState = {
     value: "loading" | "error" | "loaded";
 };
-type State = StateMachine.State<MachineContext, MachineState>;
-type Send = StateMachine.Send<StateMachine.AnyEventObject>;
-
-export { MachineContext, MachineState, Send, State, UserDefinedContext };
+export type State = S.State<MachineContext, MachineState>;
+export type Send = S.Send<S.AnyEventObject>;
+export {};

package/dist/index.d.ts

@@ -1,5 +1,4 @@
-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';
+export { anatomy } from "./avatar.anatomy";
+export { connect } from "./avatar.connect";
+export { machine } from "./avatar.machine";
+export type { UserDefinedContext as Context } from "./avatar.types";

package/dist/index.js

@@ -1,201 +1,13 @@
-"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);
+'use strict';
 
-// src/index.ts
-var src_exports = {};
-__export(src_exports, {
-  connect: () => connect,
-  machine: () => machine
-});
-module.exports = __toCommonJS(src_exports);
+Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
 
-// src/avatar.connect.ts
-var import_dom_query2 = require("@zag-js/dom-query");
+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.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
-});
+exports.anatomy = avatar_anatomy.anatomy;
+exports.connect = avatar_connect.connect;
+exports.machine = avatar_machine.machine;

package/dist/index.mjs

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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@zag-js/avatar",
-  "version": "0.10.1",
+  "version": "0.10.3",
   "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.1",
-    "@zag-js/mutation-observer": "0.10.1",
-    "@zag-js/core": "0.10.1",
-    "@zag-js/dom-query": "0.10.1",
-    "@zag-js/utils": "0.10.1",
-    "@zag-js/types": "0.10.1"
+    "@zag-js/anatomy": "0.10.3",
+    "@zag-js/mutation-observer": "0.10.3",
+    "@zag-js/core": "0.10.3",
+    "@zag-js/dom-query": "0.10.3",
+    "@zag-js/utils": "0.10.3",
+    "@zag-js/types": "0.10.3"
   },
   "devDependencies": {
     "clean-package": "2.2.0"
@@ -50,13 +50,8 @@
     "./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",
+    "build": "vite build -c ../../../vite.config.ts",
     "lint": "eslint src --ext .ts,.tsx",
-    "test-ci": "pnpm test --ci --runInBand",
-    "test-watch": "pnpm test --watch -u",
     "typecheck": "tsc --noEmit"
   }
 }

package/src/index.ts

@@ -1,3 +1,4 @@
+export { anatomy } from "./avatar.anatomy"
 export { connect } from "./avatar.connect"
 export { machine } from "./avatar.machine"
 export type { UserDefinedContext as Context } from "./avatar.types"

package/dist/avatar.types.js

@@ -1,18 +0,0 @@
-"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

@@ -1,77 +0,0 @@
-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

@@ -1,9 +0,0 @@
-// 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

@@ -1,13 +0,0 @@
-// 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

@@ -1,93 +0,0 @@
-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
-};