@zag-js/avatar 1.34.0 → 1.35.0

package/dist/avatar.types.d.ts

@@ -0,0 +1,66 @@
+import { Machine, Service } from '@zag-js/core';
+import { CommonProperties, DirectionProperty, PropTypes } from '@zag-js/types';
+
+type LoadStatus = "error" | "loaded";
+interface StatusChangeDetails {
+    status: LoadStatus;
+}
+type ElementIds = Partial<{
+    root: string;
+    image: string;
+    fallback: string;
+}>;
+interface AvatarProps extends CommonProperties, DirectionProperty {
+    /**
+     * Functional called when the image loading status changes.
+     */
+    onStatusChange?: ((details: StatusChangeDetails) => void) | undefined;
+    /**
+     * The ids of the elements in the avatar. Useful for composition.
+     */
+    ids?: ElementIds | undefined;
+}
+interface AvatarSchema {
+    props: AvatarProps;
+    context: any;
+    initial: "loading";
+    effect: "trackImageRemoval" | "trackSrcChange";
+    action: "invokeOnLoad" | "invokeOnError" | "checkImageStatus";
+    event: {
+        type: "img.loaded";
+        src?: string | undefined;
+    } | {
+        type: "img.error";
+        src?: string | undefined;
+    } | {
+        type: "img.unmount";
+    } | {
+        type: "src.change";
+    };
+    state: "loading" | "error" | "loaded";
+}
+type AvatarService = Service<AvatarSchema>;
+type AvatarMachine = Machine<AvatarSchema>;
+interface AvatarApi<T extends PropTypes = PropTypes> {
+    /**
+     * Whether the image is loaded.
+     */
+    loaded: boolean;
+    /**
+     * Function to set new src.
+     */
+    setSrc: (src: string) => void;
+    /**
+     * Function to set loaded state.
+     */
+    setLoaded: VoidFunction;
+    /**
+     * Function to set error state.
+     */
+    setError: VoidFunction;
+    getRootProps: () => T["element"];
+    getImageProps: () => T["img"];
+    getFallbackProps: () => T["element"];
+}
+
+export type { AvatarApi, AvatarMachine, AvatarProps, AvatarSchema, AvatarService, ElementIds, LoadStatus, StatusChangeDetails };

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/index.d.mts

@@ -1,77 +1,8 @@
-import * as _zag_js_anatomy from '@zag-js/anatomy';
-import { PropTypes, CommonProperties, DirectionProperty, NormalizeProps } from '@zag-js/types';
-import * as _zag_js_core from '@zag-js/core';
-import { Machine, Service } from '@zag-js/core';
-
-declare const anatomy: _zag_js_anatomy.AnatomyInstance<"root" | "image" | "fallback">;
-
-type LoadStatus = "error" | "loaded";
-interface StatusChangeDetails {
-    status: LoadStatus;
-}
-type ElementIds = Partial<{
-    root: string;
-    image: string;
-    fallback: string;
-}>;
-interface AvatarProps extends CommonProperties, DirectionProperty {
-    /**
-     * Functional called when the image loading status changes.
-     */
-    onStatusChange?: ((details: StatusChangeDetails) => void) | undefined;
-    /**
-     * The ids of the elements in the avatar. Useful for composition.
-     */
-    ids?: ElementIds | undefined;
-}
-interface AvatarSchema {
-    props: AvatarProps;
-    context: any;
-    initial: "loading";
-    effect: "trackImageRemoval" | "trackSrcChange";
-    action: "invokeOnLoad" | "invokeOnError" | "checkImageStatus";
-    event: {
-        type: "img.loaded";
-        src?: string | undefined;
-    } | {
-        type: "img.error";
-        src?: string | undefined;
-    } | {
-        type: "img.unmount";
-    } | {
-        type: "src.change";
-    };
-    state: "loading" | "error" | "loaded";
-}
-type AvatarService = Service<AvatarSchema>;
-type AvatarMachine = Machine<AvatarSchema>;
-interface AvatarApi<T extends PropTypes = PropTypes> {
-    /**
-     * Whether the image is loaded.
-     */
-    loaded: boolean;
-    /**
-     * Function to set new src.
-     */
-    setSrc: (src: string) => void;
-    /**
-     * Function to set loaded state.
-     */
-    setLoaded: VoidFunction;
-    /**
-     * Function to set error state.
-     */
-    setError: VoidFunction;
-    getRootProps: () => T["element"];
-    getImageProps: () => T["img"];
-    getFallbackProps: () => T["element"];
-}
-
-declare function connect<T extends PropTypes>(service: Service<AvatarSchema>, normalize: NormalizeProps<T>): AvatarApi<T>;
-
-declare const machine: _zag_js_core.Machine<AvatarSchema>;
-
-declare const props: (keyof AvatarProps)[];
-declare const splitProps: <Props extends Partial<AvatarProps>>(props: Props) => [Partial<AvatarProps>, Omit<Props, keyof AvatarProps>];
-
-export { type AvatarApi as Api, type ElementIds, type LoadStatus, type AvatarMachine as Machine, type AvatarProps as Props, type AvatarService as Service, type StatusChangeDetails, anatomy, connect, machine, props, splitProps };
+export { anatomy } from './avatar.anatomy.mjs';
+export { connect } from './avatar.connect.mjs';
+export { machine } from './avatar.machine.mjs';
+export { props, splitProps } from './avatar.props.mjs';
+export { AvatarApi as Api, ElementIds, LoadStatus, AvatarMachine as Machine, AvatarProps as Props, AvatarService as Service, StatusChangeDetails } from './avatar.types.mjs';
+import '@zag-js/anatomy';
+import '@zag-js/types';
+import '@zag-js/core';

package/dist/index.d.ts

@@ -1,77 +1,8 @@
-import * as _zag_js_anatomy from '@zag-js/anatomy';
-import { PropTypes, CommonProperties, DirectionProperty, NormalizeProps } from '@zag-js/types';
-import * as _zag_js_core from '@zag-js/core';
-import { Machine, Service } from '@zag-js/core';
-
-declare const anatomy: _zag_js_anatomy.AnatomyInstance<"root" | "image" | "fallback">;
-
-type LoadStatus = "error" | "loaded";
-interface StatusChangeDetails {
-    status: LoadStatus;
-}
-type ElementIds = Partial<{
-    root: string;
-    image: string;
-    fallback: string;
-}>;
-interface AvatarProps extends CommonProperties, DirectionProperty {
-    /**
-     * Functional called when the image loading status changes.
-     */
-    onStatusChange?: ((details: StatusChangeDetails) => void) | undefined;
-    /**
-     * The ids of the elements in the avatar. Useful for composition.
-     */
-    ids?: ElementIds | undefined;
-}
-interface AvatarSchema {
-    props: AvatarProps;
-    context: any;
-    initial: "loading";
-    effect: "trackImageRemoval" | "trackSrcChange";
-    action: "invokeOnLoad" | "invokeOnError" | "checkImageStatus";
-    event: {
-        type: "img.loaded";
-        src?: string | undefined;
-    } | {
-        type: "img.error";
-        src?: string | undefined;
-    } | {
-        type: "img.unmount";
-    } | {
-        type: "src.change";
-    };
-    state: "loading" | "error" | "loaded";
-}
-type AvatarService = Service<AvatarSchema>;
-type AvatarMachine = Machine<AvatarSchema>;
-interface AvatarApi<T extends PropTypes = PropTypes> {
-    /**
-     * Whether the image is loaded.
-     */
-    loaded: boolean;
-    /**
-     * Function to set new src.
-     */
-    setSrc: (src: string) => void;
-    /**
-     * Function to set loaded state.
-     */
-    setLoaded: VoidFunction;
-    /**
-     * Function to set error state.
-     */
-    setError: VoidFunction;
-    getRootProps: () => T["element"];
-    getImageProps: () => T["img"];
-    getFallbackProps: () => T["element"];
-}
-
-declare function connect<T extends PropTypes>(service: Service<AvatarSchema>, normalize: NormalizeProps<T>): AvatarApi<T>;
-
-declare const machine: _zag_js_core.Machine<AvatarSchema>;
-
-declare const props: (keyof AvatarProps)[];
-declare const splitProps: <Props extends Partial<AvatarProps>>(props: Props) => [Partial<AvatarProps>, Omit<Props, keyof AvatarProps>];
-
-export { type AvatarApi as Api, type ElementIds, type LoadStatus, type AvatarMachine as Machine, type AvatarProps as Props, type AvatarService as Service, type StatusChangeDetails, anatomy, connect, machine, props, splitProps };
+export { anatomy } from './avatar.anatomy.js';
+export { connect } from './avatar.connect.js';
+export { machine } from './avatar.machine.js';
+export { props, splitProps } from './avatar.props.js';
+export { AvatarApi as Api, ElementIds, LoadStatus, AvatarMachine as Machine, AvatarProps as Props, AvatarService as Service, StatusChangeDetails } from './avatar.types.js';
+import '@zag-js/anatomy';
+import '@zag-js/types';
+import '@zag-js/core';

package/dist/index.js

@@ -1,165 +1,39 @@
-'use strict';
-
-var anatomy$1 = require('@zag-js/anatomy');
-var domQuery = require('@zag-js/dom-query');
-var core = require('@zag-js/core');
-var types = require('@zag-js/types');
-var utils = require('@zag-js/utils');
-
-// src/avatar.anatomy.ts
-var anatomy = anatomy$1.createAnatomy("avatar").parts("root", "image", "fallback");
-var parts = anatomy.build();
-
-// 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));
-
-// src/avatar.connect.ts
-function connect(service, normalize) {
-  const { state, send, prop, scope } = service;
-  const loaded = state.matches("loaded");
-  return {
-    loaded,
-    setSrc(src) {
-      const img = getImageEl(scope);
-      img?.setAttribute("src", src);
-    },
-    setLoaded() {
-      send({ type: "img.loaded", src: "api" });
-    },
-    setError() {
-      send({ type: "img.error", src: "api" });
-    },
-    getRootProps() {
-      return normalize.element({
-        ...parts.root.attrs,
-        dir: prop("dir"),
-        id: getRootId(scope)
-      });
-    },
-    getImageProps() {
-      return normalize.img({
-        ...parts.image.attrs,
-        hidden: !loaded,
-        dir: prop("dir"),
-        id: getImageId(scope),
-        "data-state": loaded ? "visible" : "hidden",
-        onLoad() {
-          send({ type: "img.loaded", src: "element" });
-        },
-        onError() {
-          send({ type: "img.error", src: "element" });
-        }
-      });
-    },
-    getFallbackProps() {
-      return normalize.element({
-        ...parts.fallback.attrs,
-        dir: prop("dir"),
-        id: getFallbackId(scope),
-        hidden: loaded,
-        "data-state": loaded ? "hidden" : "visible"
-      });
-    }
-  };
-}
-var machine = core.createMachine({
-  initialState() {
-    return "loading";
-  },
-  effects: ["trackImageRemoval", "trackSrcChange"],
-  on: {
-    "src.change": {
-      target: "loading"
-    },
-    "img.unmount": {
-      target: "error"
-    }
-  },
-  states: {
-    loading: {
-      entry: ["checkImageStatus"],
-      on: {
-        "img.loaded": {
-          target: "loaded",
-          actions: ["invokeOnLoad"]
-        },
-        "img.error": {
-          target: "error",
-          actions: ["invokeOnError"]
-        }
-      }
-    },
-    error: {
-      on: {
-        "img.loaded": {
-          target: "loaded",
-          actions: ["invokeOnLoad"]
-        }
-      }
-    },
-    loaded: {
-      on: {
-        "img.error": {
-          target: "error",
-          actions: ["invokeOnError"]
-        }
-      }
-    }
-  },
-  implementations: {
-    actions: {
-      invokeOnLoad({ prop }) {
-        prop("onStatusChange")?.({ status: "loaded" });
-      },
-      invokeOnError({ prop }) {
-        prop("onStatusChange")?.({ status: "error" });
-      },
-      checkImageStatus({ send, scope }) {
-        const imageEl = getImageEl(scope);
-        if (!imageEl?.complete) return;
-        const type = hasLoaded(imageEl) ? "img.loaded" : "img.error";
-        send({ type, src: "ssr" });
-      }
-    },
-    effects: {
-      trackImageRemoval({ send, scope }) {
-        const rootEl = getRootEl(scope);
-        return domQuery.observeChildren(rootEl, {
-          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]")
-            );
-            if (removed) {
-              send({ type: "img.unmount" });
-            }
-          }
-        });
-      },
-      trackSrcChange({ send, scope }) {
-        const imageEl = getImageEl(scope);
-        return domQuery.observeAttributes(imageEl, {
-          attributes: ["src", "srcset"],
-          callback() {
-            send({ type: "src.change" });
-          }
-        });
-      }
-    }
+"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 });
   }
-});
-function hasLoaded(image) {
-  return image.complete && image.naturalWidth !== 0 && image.naturalHeight !== 0;
-}
-var props = types.createProps()(["dir", "id", "ids", "onStatusChange", "getRootNode"]);
-var splitProps = utils.createSplitProps(props);
+  return to;
+};
+var __reExport = (target, mod, secondTarget) => (__copyProps(target, mod, "default"), secondTarget && __copyProps(secondTarget, mod, "default"));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
 
-exports.anatomy = anatomy;
-exports.connect = connect;
-exports.machine = machine;
-exports.props = props;
-exports.splitProps = splitProps;
+// src/index.ts
+var index_exports = {};
+__export(index_exports, {
+  anatomy: () => import_avatar.anatomy,
+  connect: () => import_avatar2.connect,
+  machine: () => import_avatar3.machine
+});
+module.exports = __toCommonJS(index_exports);
+var import_avatar = require("./avatar.anatomy.cjs");
+var import_avatar2 = require("./avatar.connect.cjs");
+var import_avatar3 = require("./avatar.machine.cjs");
+__reExport(index_exports, require("./avatar.props.cjs"), module.exports);
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  anatomy,
+  connect,
+  machine,
+  ...require("./avatar.props.cjs")
+});

package/dist/index.mjs

@@ -1,159 +1,10 @@
-import { createAnatomy } from '@zag-js/anatomy';
-import { observeAttributes, observeChildren } from '@zag-js/dom-query';
-import { createMachine } from '@zag-js/core';
-import { createProps } from '@zag-js/types';
-import { createSplitProps } from '@zag-js/utils';
-
-// src/avatar.anatomy.ts
-var anatomy = createAnatomy("avatar").parts("root", "image", "fallback");
-var parts = anatomy.build();
-
-// 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));
-
-// src/avatar.connect.ts
-function connect(service, normalize) {
-  const { state, send, prop, scope } = service;
-  const loaded = state.matches("loaded");
-  return {
-    loaded,
-    setSrc(src) {
-      const img = getImageEl(scope);
-      img?.setAttribute("src", src);
-    },
-    setLoaded() {
-      send({ type: "img.loaded", src: "api" });
-    },
-    setError() {
-      send({ type: "img.error", src: "api" });
-    },
-    getRootProps() {
-      return normalize.element({
-        ...parts.root.attrs,
-        dir: prop("dir"),
-        id: getRootId(scope)
-      });
-    },
-    getImageProps() {
-      return normalize.img({
-        ...parts.image.attrs,
-        hidden: !loaded,
-        dir: prop("dir"),
-        id: getImageId(scope),
-        "data-state": loaded ? "visible" : "hidden",
-        onLoad() {
-          send({ type: "img.loaded", src: "element" });
-        },
-        onError() {
-          send({ type: "img.error", src: "element" });
-        }
-      });
-    },
-    getFallbackProps() {
-      return normalize.element({
-        ...parts.fallback.attrs,
-        dir: prop("dir"),
-        id: getFallbackId(scope),
-        hidden: loaded,
-        "data-state": loaded ? "hidden" : "visible"
-      });
-    }
-  };
-}
-var machine = createMachine({
-  initialState() {
-    return "loading";
-  },
-  effects: ["trackImageRemoval", "trackSrcChange"],
-  on: {
-    "src.change": {
-      target: "loading"
-    },
-    "img.unmount": {
-      target: "error"
-    }
-  },
-  states: {
-    loading: {
-      entry: ["checkImageStatus"],
-      on: {
-        "img.loaded": {
-          target: "loaded",
-          actions: ["invokeOnLoad"]
-        },
-        "img.error": {
-          target: "error",
-          actions: ["invokeOnError"]
-        }
-      }
-    },
-    error: {
-      on: {
-        "img.loaded": {
-          target: "loaded",
-          actions: ["invokeOnLoad"]
-        }
-      }
-    },
-    loaded: {
-      on: {
-        "img.error": {
-          target: "error",
-          actions: ["invokeOnError"]
-        }
-      }
-    }
-  },
-  implementations: {
-    actions: {
-      invokeOnLoad({ prop }) {
-        prop("onStatusChange")?.({ status: "loaded" });
-      },
-      invokeOnError({ prop }) {
-        prop("onStatusChange")?.({ status: "error" });
-      },
-      checkImageStatus({ send, scope }) {
-        const imageEl = getImageEl(scope);
-        if (!imageEl?.complete) return;
-        const type = hasLoaded(imageEl) ? "img.loaded" : "img.error";
-        send({ type, src: "ssr" });
-      }
-    },
-    effects: {
-      trackImageRemoval({ send, scope }) {
-        const rootEl = getRootEl(scope);
-        return observeChildren(rootEl, {
-          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]")
-            );
-            if (removed) {
-              send({ type: "img.unmount" });
-            }
-          }
-        });
-      },
-      trackSrcChange({ send, scope }) {
-        const imageEl = getImageEl(scope);
-        return observeAttributes(imageEl, {
-          attributes: ["src", "srcset"],
-          callback() {
-            send({ type: "src.change" });
-          }
-        });
-      }
-    }
-  }
-});
-function hasLoaded(image) {
-  return image.complete && image.naturalWidth !== 0 && image.naturalHeight !== 0;
-}
-var props = createProps()(["dir", "id", "ids", "onStatusChange", "getRootNode"]);
-var splitProps = createSplitProps(props);
-
-export { anatomy, connect, machine, props, splitProps };
+// src/index.ts
+import { anatomy } from "./avatar.anatomy.mjs";
+import { connect } from "./avatar.connect.mjs";
+import { machine } from "./avatar.machine.mjs";
+export * from "./avatar.props.mjs";
+export {
+  anatomy,
+  connect,
+  machine
+};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@zag-js/avatar",
-  "version": "1.34.0",
+  "version": "1.35.0",
   "description": "Core logic for the avatar widget implemented as a state machine",
   "keywords": [
     "js",
@@ -27,16 +27,16 @@
     "url": "https://github.com/chakra-ui/zag/issues"
   },
   "dependencies": {
-    "@zag-js/anatomy": "1.34.0",
-    "@zag-js/core": "1.34.0",
-    "@zag-js/dom-query": "1.34.0",
-    "@zag-js/utils": "1.34.0",
-    "@zag-js/types": "1.34.0"
+    "@zag-js/anatomy": "1.35.0",
+    "@zag-js/core": "1.35.0",
+    "@zag-js/dom-query": "1.35.0",
+    "@zag-js/utils": "1.35.0",
+    "@zag-js/types": "1.35.0"
   },
   "devDependencies": {
     "clean-package": "2.2.0"
   },
-  "clean-package": "../../../clean-package.config.json",
+  "clean-package": "./clean-package.config.json",
   "module": "dist/index.mjs",
   "types": "dist/index.d.ts",
   "exports": {
@@ -50,6 +50,16 @@
         "default": "./dist/index.js"
       }
     },
+    "./anatomy": {
+      "import": {
+        "types": "./dist/avatar.anatomy.d.mts",
+        "default": "./dist/avatar.anatomy.mjs"
+      },
+      "require": {
+        "types": "./dist/avatar.anatomy.d.ts",
+        "default": "./dist/avatar.anatomy.js"
+      }
+    },
     "./package.json": "./package.json"
   },
   "scripts": {