@zag-js/avatar 0.65.0 → 0.66.0

package/dist/index.js

@@ -162,7 +162,9 @@ function machine(userContext) {
           return (0, import_dom_query2.observeChildren)(rootEl, {
             callback(records) {
               const removedNodes = Array.from(records[0].removedNodes);
-              const removed = removedNodes.find((node) => node.matches("[data-scope=avatar][data-part=image]"));
+              const removed = removedNodes.find(
+                (node) => node.nodeType === Node.ELEMENT_NODE && node.matches("[data-scope=avatar][data-part=image]")
+              );
               if (removed) {
                 send({ type: "IMG.UNMOUNT" });
               }

package/dist/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/index.ts","../src/avatar.anatomy.ts","../src/avatar.dom.ts","../src/avatar.connect.ts","../src/avatar.machine.ts","../src/avatar.props.ts"],"sourcesContent":["export { anatomy } from \"./avatar.anatomy\"\nexport { connect } from \"./avatar.connect\"\nexport { machine } from \"./avatar.machine\"\nexport * from \"./avatar.props\"\nexport type {\n  MachineApi as Api,\n  UserDefinedContext as Context,\n  ElementIds,\n  LoadStatus,\n  StatusChangeDetails,\n  Service,\n} from \"./avatar.types\"\n","import { createAnatomy } from \"@zag-js/anatomy\"\n\nexport const anatomy = createAnatomy(\"avatar\").parts(\"root\", \"image\", \"fallback\")\n\nexport const parts = anatomy.build()\n","import { createScope } from \"@zag-js/dom-query\"\nimport type { MachineContext as Ctx } from \"./avatar.types\"\n\nexport const dom = createScope({\n  getRootId: (ctx: Ctx) => ctx.ids?.root ?? `avatar:${ctx.id}`,\n  getImageId: (ctx: Ctx) => ctx.ids?.image ?? `avatar:${ctx.id}:image`,\n  getFallbackId: (ctx: Ctx) => ctx.ids?.fallback ?? `avatar:${ctx.id}:fallback`,\n\n  getRootEl: (ctx: Ctx) => dom.getById(ctx, dom.getRootId(ctx)),\n  getImageEl: (ctx: Ctx) => dom.getById<HTMLImageElement>(ctx, dom.getImageId(ctx)),\n})\n","import type { NormalizeProps, PropTypes } from \"@zag-js/types\"\nimport { parts } from \"./avatar.anatomy\"\nimport { dom } from \"./avatar.dom\"\nimport type { MachineApi, Send, State } from \"./avatar.types\"\n\nexport function connect<T extends PropTypes>(state: State, send: Send, normalize: NormalizeProps<T>): MachineApi<T> {\n  const loaded = state.matches(\"loaded\")\n  return {\n    loaded,\n    setSrc(src) {\n      send({ type: \"SRC.SET\", src })\n    },\n    setLoaded() {\n      send({ type: \"IMG.LOADED\", src: \"api\" })\n    },\n    setError() {\n      send({ type: \"IMG.ERROR\", src: \"api\" })\n    },\n\n    getRootProps() {\n      return normalize.element({\n        ...parts.root.attrs,\n        dir: state.context.dir,\n        id: dom.getRootId(state.context),\n      })\n    },\n\n    getImageProps() {\n      return normalize.img({\n        ...parts.image.attrs,\n        hidden: !loaded,\n        dir: state.context.dir,\n        id: dom.getImageId(state.context),\n        \"data-state\": loaded ? \"visible\" : \"hidden\",\n        onLoad() {\n          send({ type: \"IMG.LOADED\", src: \"element\" })\n        },\n        onError() {\n          send({ type: \"IMG.ERROR\", src: \"element\" })\n        },\n      })\n    },\n\n    getFallbackProps() {\n      return normalize.element({\n        ...parts.fallback.attrs,\n        dir: state.context.dir,\n        id: dom.getFallbackId(state.context),\n        hidden: loaded,\n        \"data-state\": loaded ? \"hidden\" : \"visible\",\n      })\n    },\n  }\n}\n","import { createMachine } from \"@zag-js/core\"\nimport { observeAttributes, observeChildren } from \"@zag-js/dom-query\"\nimport { compact } from \"@zag-js/utils\"\nimport { dom } from \"./avatar.dom\"\nimport type { MachineContext, MachineState, UserDefinedContext } from \"./avatar.types\"\n\nexport function machine(userContext: UserDefinedContext) {\n  const ctx = compact(userContext)\n  return createMachine<MachineContext, MachineState>(\n    {\n      id: \"avatar\",\n      initial: \"loading\",\n      activities: [\"trackImageRemoval\"],\n\n      context: ctx,\n\n      on: {\n        \"SRC.CHANGE\": {\n          target: \"loading\",\n        },\n        \"IMG.UNMOUNT\": {\n          target: \"error\",\n        },\n      },\n\n      states: {\n        loading: {\n          activities: [\"trackSrcChange\"],\n          entry: [\"checkImageStatus\"],\n          on: {\n            \"IMG.LOADED\": {\n              target: \"loaded\",\n              actions: [\"invokeOnLoad\"],\n            },\n            \"IMG.ERROR\": {\n              target: \"error\",\n              actions: [\"invokeOnError\"],\n            },\n          },\n        },\n        error: {\n          activities: [\"trackSrcChange\"],\n          on: {\n            \"IMG.LOADED\": {\n              target: \"loaded\",\n              actions: [\"invokeOnLoad\"],\n            },\n          },\n        },\n        loaded: {\n          activities: [\"trackSrcChange\"],\n          on: {\n            \"IMG.ERROR\": {\n              target: \"error\",\n              actions: [\"invokeOnError\"],\n            },\n          },\n        },\n      },\n    },\n    {\n      activities: {\n        trackSrcChange(ctx, _evt, { send }) {\n          const imageEl = dom.getImageEl(ctx)\n          return observeAttributes(imageEl, {\n            attributes: [\"src\", \"srcset\"],\n            callback() {\n              send({ type: \"SRC.CHANGE\" })\n            },\n          })\n        },\n        trackImageRemoval(ctx, _evt, { send }) {\n          const rootEl = dom.getRootEl(ctx)\n          return observeChildren(rootEl, {\n            callback(records) {\n              const removedNodes = Array.from(records[0].removedNodes) as HTMLElement[]\n              const removed = removedNodes.find((node) => node.matches(\"[data-scope=avatar][data-part=image]\"))\n              if (removed) {\n                send({ type: \"IMG.UNMOUNT\" })\n              }\n            },\n          })\n        },\n      },\n      actions: {\n        invokeOnLoad(ctx) {\n          ctx.onStatusChange?.({ status: \"loaded\" })\n        },\n        invokeOnError(ctx) {\n          ctx.onStatusChange?.({ status: \"error\" })\n        },\n        checkImageStatus(ctx, _evt, { send }) {\n          const imageEl = dom.getImageEl(ctx)\n          if (imageEl?.complete) {\n            const type = hasLoaded(imageEl) ? \"IMG.LOADED\" : \"IMG.ERROR\"\n            send({ type, src: \"ssr\" })\n          }\n        },\n      },\n    },\n  )\n}\n\nfunction hasLoaded(image: HTMLImageElement) {\n  return image.complete && image.naturalWidth !== 0 && image.naturalHeight !== 0\n}\n","import { createProps } from \"@zag-js/types\"\nimport { createSplitProps } from \"@zag-js/utils\"\nimport type { UserDefinedContext } from \"./avatar.types\"\n\nexport const props = createProps<UserDefinedContext>()([\"dir\", \"id\", \"ids\", \"onStatusChange\", \"getRootNode\"])\nexport const splitProps = createSplitProps<Partial<UserDefinedContext>>(props)\n"],"mappings":"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","names":["import_dom_query","ctx","import_utils"]}
+{"version":3,"sources":["../src/index.ts","../src/avatar.anatomy.ts","../src/avatar.dom.ts","../src/avatar.connect.ts","../src/avatar.machine.ts","../src/avatar.props.ts"],"sourcesContent":["export { anatomy } from \"./avatar.anatomy\"\nexport { connect } from \"./avatar.connect\"\nexport { machine } from \"./avatar.machine\"\nexport * from \"./avatar.props\"\nexport type {\n  MachineApi as Api,\n  UserDefinedContext as Context,\n  ElementIds,\n  LoadStatus,\n  StatusChangeDetails,\n  Service,\n} from \"./avatar.types\"\n","import { createAnatomy } from \"@zag-js/anatomy\"\n\nexport const anatomy = createAnatomy(\"avatar\").parts(\"root\", \"image\", \"fallback\")\n\nexport const parts = anatomy.build()\n","import { createScope } from \"@zag-js/dom-query\"\nimport type { MachineContext as Ctx } from \"./avatar.types\"\n\nexport const dom = createScope({\n  getRootId: (ctx: Ctx) => ctx.ids?.root ?? `avatar:${ctx.id}`,\n  getImageId: (ctx: Ctx) => ctx.ids?.image ?? `avatar:${ctx.id}:image`,\n  getFallbackId: (ctx: Ctx) => ctx.ids?.fallback ?? `avatar:${ctx.id}:fallback`,\n\n  getRootEl: (ctx: Ctx) => dom.getById(ctx, dom.getRootId(ctx)),\n  getImageEl: (ctx: Ctx) => dom.getById<HTMLImageElement>(ctx, dom.getImageId(ctx)),\n})\n","import type { NormalizeProps, PropTypes } from \"@zag-js/types\"\nimport { parts } from \"./avatar.anatomy\"\nimport { dom } from \"./avatar.dom\"\nimport type { MachineApi, Send, State } from \"./avatar.types\"\n\nexport function connect<T extends PropTypes>(state: State, send: Send, normalize: NormalizeProps<T>): MachineApi<T> {\n  const loaded = state.matches(\"loaded\")\n  return {\n    loaded,\n    setSrc(src) {\n      send({ type: \"SRC.SET\", src })\n    },\n    setLoaded() {\n      send({ type: \"IMG.LOADED\", src: \"api\" })\n    },\n    setError() {\n      send({ type: \"IMG.ERROR\", src: \"api\" })\n    },\n\n    getRootProps() {\n      return normalize.element({\n        ...parts.root.attrs,\n        dir: state.context.dir,\n        id: dom.getRootId(state.context),\n      })\n    },\n\n    getImageProps() {\n      return normalize.img({\n        ...parts.image.attrs,\n        hidden: !loaded,\n        dir: state.context.dir,\n        id: dom.getImageId(state.context),\n        \"data-state\": loaded ? \"visible\" : \"hidden\",\n        onLoad() {\n          send({ type: \"IMG.LOADED\", src: \"element\" })\n        },\n        onError() {\n          send({ type: \"IMG.ERROR\", src: \"element\" })\n        },\n      })\n    },\n\n    getFallbackProps() {\n      return normalize.element({\n        ...parts.fallback.attrs,\n        dir: state.context.dir,\n        id: dom.getFallbackId(state.context),\n        hidden: loaded,\n        \"data-state\": loaded ? \"hidden\" : \"visible\",\n      })\n    },\n  }\n}\n","import { createMachine } from \"@zag-js/core\"\nimport { observeAttributes, observeChildren } from \"@zag-js/dom-query\"\nimport { compact } from \"@zag-js/utils\"\nimport { dom } from \"./avatar.dom\"\nimport type { MachineContext, MachineState, UserDefinedContext } from \"./avatar.types\"\n\nexport function machine(userContext: UserDefinedContext) {\n  const ctx = compact(userContext)\n  return createMachine<MachineContext, MachineState>(\n    {\n      id: \"avatar\",\n      initial: \"loading\",\n      activities: [\"trackImageRemoval\"],\n\n      context: ctx,\n\n      on: {\n        \"SRC.CHANGE\": {\n          target: \"loading\",\n        },\n        \"IMG.UNMOUNT\": {\n          target: \"error\",\n        },\n      },\n\n      states: {\n        loading: {\n          activities: [\"trackSrcChange\"],\n          entry: [\"checkImageStatus\"],\n          on: {\n            \"IMG.LOADED\": {\n              target: \"loaded\",\n              actions: [\"invokeOnLoad\"],\n            },\n            \"IMG.ERROR\": {\n              target: \"error\",\n              actions: [\"invokeOnError\"],\n            },\n          },\n        },\n        error: {\n          activities: [\"trackSrcChange\"],\n          on: {\n            \"IMG.LOADED\": {\n              target: \"loaded\",\n              actions: [\"invokeOnLoad\"],\n            },\n          },\n        },\n        loaded: {\n          activities: [\"trackSrcChange\"],\n          on: {\n            \"IMG.ERROR\": {\n              target: \"error\",\n              actions: [\"invokeOnError\"],\n            },\n          },\n        },\n      },\n    },\n    {\n      activities: {\n        trackSrcChange(ctx, _evt, { send }) {\n          const imageEl = dom.getImageEl(ctx)\n          return observeAttributes(imageEl, {\n            attributes: [\"src\", \"srcset\"],\n            callback() {\n              send({ type: \"SRC.CHANGE\" })\n            },\n          })\n        },\n        trackImageRemoval(ctx, _evt, { send }) {\n          const rootEl = dom.getRootEl(ctx)\n          return observeChildren(rootEl, {\n            callback(records) {\n              const removedNodes = Array.from(records[0].removedNodes) as HTMLElement[]\n              const removed = removedNodes.find(\n                (node) => node.nodeType === Node.ELEMENT_NODE && node.matches(\"[data-scope=avatar][data-part=image]\"),\n              )\n              if (removed) {\n                send({ type: \"IMG.UNMOUNT\" })\n              }\n            },\n          })\n        },\n      },\n      actions: {\n        invokeOnLoad(ctx) {\n          ctx.onStatusChange?.({ status: \"loaded\" })\n        },\n        invokeOnError(ctx) {\n          ctx.onStatusChange?.({ status: \"error\" })\n        },\n        checkImageStatus(ctx, _evt, { send }) {\n          const imageEl = dom.getImageEl(ctx)\n          if (imageEl?.complete) {\n            const type = hasLoaded(imageEl) ? \"IMG.LOADED\" : \"IMG.ERROR\"\n            send({ type, src: \"ssr\" })\n          }\n        },\n      },\n    },\n  )\n}\n\nfunction hasLoaded(image: HTMLImageElement) {\n  return image.complete && image.naturalWidth !== 0 && image.naturalHeight !== 0\n}\n","import { createProps } from \"@zag-js/types\"\nimport { createSplitProps } from \"@zag-js/utils\"\nimport type { UserDefinedContext } from \"./avatar.types\"\n\nexport const props = createProps<UserDefinedContext>()([\"dir\", \"id\", \"ids\", \"onStatusChange\", \"getRootNode\"])\nexport const splitProps = createSplitProps<Partial<UserDefinedContext>>(props)\n"],"mappings":"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","names":["import_dom_query","ctx","import_utils"]}

package/dist/index.mjs

@@ -132,7 +132,9 @@ function machine(userContext) {
           return observeChildren(rootEl, {
             callback(records) {
               const removedNodes = Array.from(records[0].removedNodes);
-              const removed = removedNodes.find((node) => node.matches("[data-scope=avatar][data-part=image]"));
+              const removed = removedNodes.find(
+                (node) => node.nodeType === Node.ELEMENT_NODE && node.matches("[data-scope=avatar][data-part=image]")
+              );
               if (removed) {
                 send({ type: "IMG.UNMOUNT" });
               }

package/dist/index.mjs.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/avatar.anatomy.ts","../src/avatar.dom.ts","../src/avatar.connect.ts","../src/avatar.machine.ts","../src/avatar.props.ts"],"sourcesContent":["import { createAnatomy } from \"@zag-js/anatomy\"\n\nexport const anatomy = createAnatomy(\"avatar\").parts(\"root\", \"image\", \"fallback\")\n\nexport const parts = anatomy.build()\n","import { createScope } from \"@zag-js/dom-query\"\nimport type { MachineContext as Ctx } from \"./avatar.types\"\n\nexport const dom = createScope({\n  getRootId: (ctx: Ctx) => ctx.ids?.root ?? `avatar:${ctx.id}`,\n  getImageId: (ctx: Ctx) => ctx.ids?.image ?? `avatar:${ctx.id}:image`,\n  getFallbackId: (ctx: Ctx) => ctx.ids?.fallback ?? `avatar:${ctx.id}:fallback`,\n\n  getRootEl: (ctx: Ctx) => dom.getById(ctx, dom.getRootId(ctx)),\n  getImageEl: (ctx: Ctx) => dom.getById<HTMLImageElement>(ctx, dom.getImageId(ctx)),\n})\n","import type { NormalizeProps, PropTypes } from \"@zag-js/types\"\nimport { parts } from \"./avatar.anatomy\"\nimport { dom } from \"./avatar.dom\"\nimport type { MachineApi, Send, State } from \"./avatar.types\"\n\nexport function connect<T extends PropTypes>(state: State, send: Send, normalize: NormalizeProps<T>): MachineApi<T> {\n  const loaded = state.matches(\"loaded\")\n  return {\n    loaded,\n    setSrc(src) {\n      send({ type: \"SRC.SET\", src })\n    },\n    setLoaded() {\n      send({ type: \"IMG.LOADED\", src: \"api\" })\n    },\n    setError() {\n      send({ type: \"IMG.ERROR\", src: \"api\" })\n    },\n\n    getRootProps() {\n      return normalize.element({\n        ...parts.root.attrs,\n        dir: state.context.dir,\n        id: dom.getRootId(state.context),\n      })\n    },\n\n    getImageProps() {\n      return normalize.img({\n        ...parts.image.attrs,\n        hidden: !loaded,\n        dir: state.context.dir,\n        id: dom.getImageId(state.context),\n        \"data-state\": loaded ? \"visible\" : \"hidden\",\n        onLoad() {\n          send({ type: \"IMG.LOADED\", src: \"element\" })\n        },\n        onError() {\n          send({ type: \"IMG.ERROR\", src: \"element\" })\n        },\n      })\n    },\n\n    getFallbackProps() {\n      return normalize.element({\n        ...parts.fallback.attrs,\n        dir: state.context.dir,\n        id: dom.getFallbackId(state.context),\n        hidden: loaded,\n        \"data-state\": loaded ? \"hidden\" : \"visible\",\n      })\n    },\n  }\n}\n","import { createMachine } from \"@zag-js/core\"\nimport { observeAttributes, observeChildren } from \"@zag-js/dom-query\"\nimport { compact } from \"@zag-js/utils\"\nimport { dom } from \"./avatar.dom\"\nimport type { MachineContext, MachineState, UserDefinedContext } from \"./avatar.types\"\n\nexport function machine(userContext: UserDefinedContext) {\n  const ctx = compact(userContext)\n  return createMachine<MachineContext, MachineState>(\n    {\n      id: \"avatar\",\n      initial: \"loading\",\n      activities: [\"trackImageRemoval\"],\n\n      context: ctx,\n\n      on: {\n        \"SRC.CHANGE\": {\n          target: \"loading\",\n        },\n        \"IMG.UNMOUNT\": {\n          target: \"error\",\n        },\n      },\n\n      states: {\n        loading: {\n          activities: [\"trackSrcChange\"],\n          entry: [\"checkImageStatus\"],\n          on: {\n            \"IMG.LOADED\": {\n              target: \"loaded\",\n              actions: [\"invokeOnLoad\"],\n            },\n            \"IMG.ERROR\": {\n              target: \"error\",\n              actions: [\"invokeOnError\"],\n            },\n          },\n        },\n        error: {\n          activities: [\"trackSrcChange\"],\n          on: {\n            \"IMG.LOADED\": {\n              target: \"loaded\",\n              actions: [\"invokeOnLoad\"],\n            },\n          },\n        },\n        loaded: {\n          activities: [\"trackSrcChange\"],\n          on: {\n            \"IMG.ERROR\": {\n              target: \"error\",\n              actions: [\"invokeOnError\"],\n            },\n          },\n        },\n      },\n    },\n    {\n      activities: {\n        trackSrcChange(ctx, _evt, { send }) {\n          const imageEl = dom.getImageEl(ctx)\n          return observeAttributes(imageEl, {\n            attributes: [\"src\", \"srcset\"],\n            callback() {\n              send({ type: \"SRC.CHANGE\" })\n            },\n          })\n        },\n        trackImageRemoval(ctx, _evt, { send }) {\n          const rootEl = dom.getRootEl(ctx)\n          return observeChildren(rootEl, {\n            callback(records) {\n              const removedNodes = Array.from(records[0].removedNodes) as HTMLElement[]\n              const removed = removedNodes.find((node) => node.matches(\"[data-scope=avatar][data-part=image]\"))\n              if (removed) {\n                send({ type: \"IMG.UNMOUNT\" })\n              }\n            },\n          })\n        },\n      },\n      actions: {\n        invokeOnLoad(ctx) {\n          ctx.onStatusChange?.({ status: \"loaded\" })\n        },\n        invokeOnError(ctx) {\n          ctx.onStatusChange?.({ status: \"error\" })\n        },\n        checkImageStatus(ctx, _evt, { send }) {\n          const imageEl = dom.getImageEl(ctx)\n          if (imageEl?.complete) {\n            const type = hasLoaded(imageEl) ? \"IMG.LOADED\" : \"IMG.ERROR\"\n            send({ type, src: \"ssr\" })\n          }\n        },\n      },\n    },\n  )\n}\n\nfunction hasLoaded(image: HTMLImageElement) {\n  return image.complete && image.naturalWidth !== 0 && image.naturalHeight !== 0\n}\n","import { createProps } from \"@zag-js/types\"\nimport { createSplitProps } from \"@zag-js/utils\"\nimport type { UserDefinedContext } from \"./avatar.types\"\n\nexport const props = createProps<UserDefinedContext>()([\"dir\", \"id\", \"ids\", \"onStatusChange\", \"getRootNode\"])\nexport const splitProps = createSplitProps<Partial<UserDefinedContext>>(props)\n"],"mappings":";AAAA,SAAS,qBAAqB;AAEvB,IAAM,UAAU,cAAc,QAAQ,EAAE,MAAM,QAAQ,SAAS,UAAU;AAEzE,IAAM,QAAQ,QAAQ,MAAM;;;ACJnC,SAAS,mBAAmB;AAGrB,IAAM,MAAM,YAAY;AAAA,EAC7B,WAAW,CAAC,QAAa,IAAI,KAAK,QAAQ,UAAU,IAAI,EAAE;AAAA,EAC1D,YAAY,CAAC,QAAa,IAAI,KAAK,SAAS,UAAU,IAAI,EAAE;AAAA,EAC5D,eAAe,CAAC,QAAa,IAAI,KAAK,YAAY,UAAU,IAAI,EAAE;AAAA,EAElE,WAAW,CAAC,QAAa,IAAI,QAAQ,KAAK,IAAI,UAAU,GAAG,CAAC;AAAA,EAC5D,YAAY,CAAC,QAAa,IAAI,QAA0B,KAAK,IAAI,WAAW,GAAG,CAAC;AAClF,CAAC;;;ACLM,SAAS,QAA6B,OAAc,MAAY,WAA6C;AAClH,QAAM,SAAS,MAAM,QAAQ,QAAQ;AACrC,SAAO;AAAA,IACL;AAAA,IACA,OAAO,KAAK;AACV,WAAK,EAAE,MAAM,WAAW,IAAI,CAAC;AAAA,IAC/B;AAAA,IACA,YAAY;AACV,WAAK,EAAE,MAAM,cAAc,KAAK,MAAM,CAAC;AAAA,IACzC;AAAA,IACA,WAAW;AACT,WAAK,EAAE,MAAM,aAAa,KAAK,MAAM,CAAC;AAAA,IACxC;AAAA,IAEA,eAAe;AACb,aAAO,UAAU,QAAQ;AAAA,QACvB,GAAG,MAAM,KAAK;AAAA,QACd,KAAK,MAAM,QAAQ;AAAA,QACnB,IAAI,IAAI,UAAU,MAAM,OAAO;AAAA,MACjC,CAAC;AAAA,IACH;AAAA,IAEA,gBAAgB;AACd,aAAO,UAAU,IAAI;AAAA,QACnB,GAAG,MAAM,MAAM;AAAA,QACf,QAAQ,CAAC;AAAA,QACT,KAAK,MAAM,QAAQ;AAAA,QACnB,IAAI,IAAI,WAAW,MAAM,OAAO;AAAA,QAChC,cAAc,SAAS,YAAY;AAAA,QACnC,SAAS;AACP,eAAK,EAAE,MAAM,cAAc,KAAK,UAAU,CAAC;AAAA,QAC7C;AAAA,QACA,UAAU;AACR,eAAK,EAAE,MAAM,aAAa,KAAK,UAAU,CAAC;AAAA,QAC5C;AAAA,MACF,CAAC;AAAA,IACH;AAAA,IAEA,mBAAmB;AACjB,aAAO,UAAU,QAAQ;AAAA,QACvB,GAAG,MAAM,SAAS;AAAA,QAClB,KAAK,MAAM,QAAQ;AAAA,QACnB,IAAI,IAAI,cAAc,MAAM,OAAO;AAAA,QACnC,QAAQ;AAAA,QACR,cAAc,SAAS,WAAW;AAAA,MACpC,CAAC;AAAA,IACH;AAAA,EACF;AACF;;;ACrDA,SAAS,qBAAqB;AAC9B,SAAS,mBAAmB,uBAAuB;AACnD,SAAS,eAAe;AAIjB,SAAS,QAAQ,aAAiC;AACvD,QAAM,MAAM,QAAQ,WAAW;AAC/B,SAAO;AAAA,IACL;AAAA,MACE,IAAI;AAAA,MACJ,SAAS;AAAA,MACT,YAAY,CAAC,mBAAmB;AAAA,MAEhC,SAAS;AAAA,MAET,IAAI;AAAA,QACF,cAAc;AAAA,UACZ,QAAQ;AAAA,QACV;AAAA,QACA,eAAe;AAAA,UACb,QAAQ;AAAA,QACV;AAAA,MACF;AAAA,MAEA,QAAQ;AAAA,QACN,SAAS;AAAA,UACP,YAAY,CAAC,gBAAgB;AAAA,UAC7B,OAAO,CAAC,kBAAkB;AAAA,UAC1B,IAAI;AAAA,YACF,cAAc;AAAA,cACZ,QAAQ;AAAA,cACR,SAAS,CAAC,cAAc;AAAA,YAC1B;AAAA,YACA,aAAa;AAAA,cACX,QAAQ;AAAA,cACR,SAAS,CAAC,eAAe;AAAA,YAC3B;AAAA,UACF;AAAA,QACF;AAAA,QACA,OAAO;AAAA,UACL,YAAY,CAAC,gBAAgB;AAAA,UAC7B,IAAI;AAAA,YACF,cAAc;AAAA,cACZ,QAAQ;AAAA,cACR,SAAS,CAAC,cAAc;AAAA,YAC1B;AAAA,UACF;AAAA,QACF;AAAA,QACA,QAAQ;AAAA,UACN,YAAY,CAAC,gBAAgB;AAAA,UAC7B,IAAI;AAAA,YACF,aAAa;AAAA,cACX,QAAQ;AAAA,cACR,SAAS,CAAC,eAAe;AAAA,YAC3B;AAAA,UACF;AAAA,QACF;AAAA,MACF;AAAA,IACF;AAAA,IACA;AAAA,MACE,YAAY;AAAA,QACV,eAAeA,MAAK,MAAM,EAAE,KAAK,GAAG;AAClC,gBAAM,UAAU,IAAI,WAAWA,IAAG;AAClC,iBAAO,kBAAkB,SAAS;AAAA,YAChC,YAAY,CAAC,OAAO,QAAQ;AAAA,YAC5B,WAAW;AACT,mBAAK,EAAE,MAAM,aAAa,CAAC;AAAA,YAC7B;AAAA,UACF,CAAC;AAAA,QACH;AAAA,QACA,kBAAkBA,MAAK,MAAM,EAAE,KAAK,GAAG;AACrC,gBAAM,SAAS,IAAI,UAAUA,IAAG;AAChC,iBAAO,gBAAgB,QAAQ;AAAA,YAC7B,SAAS,SAAS;AAChB,oBAAM,eAAe,MAAM,KAAK,QAAQ,CAAC,EAAE,YAAY;AACvD,oBAAM,UAAU,aAAa,KAAK,CAAC,SAAS,KAAK,QAAQ,sCAAsC,CAAC;AAChG,kBAAI,SAAS;AACX,qBAAK,EAAE,MAAM,cAAc,CAAC;AAAA,cAC9B;AAAA,YACF;AAAA,UACF,CAAC;AAAA,QACH;AAAA,MACF;AAAA,MACA,SAAS;AAAA,QACP,aAAaA,MAAK;AAChB,UAAAA,KAAI,iBAAiB,EAAE,QAAQ,SAAS,CAAC;AAAA,QAC3C;AAAA,QACA,cAAcA,MAAK;AACjB,UAAAA,KAAI,iBAAiB,EAAE,QAAQ,QAAQ,CAAC;AAAA,QAC1C;AAAA,QACA,iBAAiBA,MAAK,MAAM,EAAE,KAAK,GAAG;AACpC,gBAAM,UAAU,IAAI,WAAWA,IAAG;AAClC,cAAI,SAAS,UAAU;AACrB,kBAAM,OAAO,UAAU,OAAO,IAAI,eAAe;AACjD,iBAAK,EAAE,MAAM,KAAK,MAAM,CAAC;AAAA,UAC3B;AAAA,QACF;AAAA,MACF;AAAA,IACF;AAAA,EACF;AACF;AAEA,SAAS,UAAU,OAAyB;AAC1C,SAAO,MAAM,YAAY,MAAM,iBAAiB,KAAK,MAAM,kBAAkB;AAC/E;;;ACzGA,SAAS,mBAAmB;AAC5B,SAAS,wBAAwB;AAG1B,IAAM,QAAQ,YAAgC,EAAE,CAAC,OAAO,MAAM,OAAO,kBAAkB,aAAa,CAAC;AACrG,IAAM,aAAa,iBAA8C,KAAK;","names":["ctx"]}
+{"version":3,"sources":["../src/avatar.anatomy.ts","../src/avatar.dom.ts","../src/avatar.connect.ts","../src/avatar.machine.ts","../src/avatar.props.ts"],"sourcesContent":["import { createAnatomy } from \"@zag-js/anatomy\"\n\nexport const anatomy = createAnatomy(\"avatar\").parts(\"root\", \"image\", \"fallback\")\n\nexport const parts = anatomy.build()\n","import { createScope } from \"@zag-js/dom-query\"\nimport type { MachineContext as Ctx } from \"./avatar.types\"\n\nexport const dom = createScope({\n  getRootId: (ctx: Ctx) => ctx.ids?.root ?? `avatar:${ctx.id}`,\n  getImageId: (ctx: Ctx) => ctx.ids?.image ?? `avatar:${ctx.id}:image`,\n  getFallbackId: (ctx: Ctx) => ctx.ids?.fallback ?? `avatar:${ctx.id}:fallback`,\n\n  getRootEl: (ctx: Ctx) => dom.getById(ctx, dom.getRootId(ctx)),\n  getImageEl: (ctx: Ctx) => dom.getById<HTMLImageElement>(ctx, dom.getImageId(ctx)),\n})\n","import type { NormalizeProps, PropTypes } from \"@zag-js/types\"\nimport { parts } from \"./avatar.anatomy\"\nimport { dom } from \"./avatar.dom\"\nimport type { MachineApi, Send, State } from \"./avatar.types\"\n\nexport function connect<T extends PropTypes>(state: State, send: Send, normalize: NormalizeProps<T>): MachineApi<T> {\n  const loaded = state.matches(\"loaded\")\n  return {\n    loaded,\n    setSrc(src) {\n      send({ type: \"SRC.SET\", src })\n    },\n    setLoaded() {\n      send({ type: \"IMG.LOADED\", src: \"api\" })\n    },\n    setError() {\n      send({ type: \"IMG.ERROR\", src: \"api\" })\n    },\n\n    getRootProps() {\n      return normalize.element({\n        ...parts.root.attrs,\n        dir: state.context.dir,\n        id: dom.getRootId(state.context),\n      })\n    },\n\n    getImageProps() {\n      return normalize.img({\n        ...parts.image.attrs,\n        hidden: !loaded,\n        dir: state.context.dir,\n        id: dom.getImageId(state.context),\n        \"data-state\": loaded ? \"visible\" : \"hidden\",\n        onLoad() {\n          send({ type: \"IMG.LOADED\", src: \"element\" })\n        },\n        onError() {\n          send({ type: \"IMG.ERROR\", src: \"element\" })\n        },\n      })\n    },\n\n    getFallbackProps() {\n      return normalize.element({\n        ...parts.fallback.attrs,\n        dir: state.context.dir,\n        id: dom.getFallbackId(state.context),\n        hidden: loaded,\n        \"data-state\": loaded ? \"hidden\" : \"visible\",\n      })\n    },\n  }\n}\n","import { createMachine } from \"@zag-js/core\"\nimport { observeAttributes, observeChildren } from \"@zag-js/dom-query\"\nimport { compact } from \"@zag-js/utils\"\nimport { dom } from \"./avatar.dom\"\nimport type { MachineContext, MachineState, UserDefinedContext } from \"./avatar.types\"\n\nexport function machine(userContext: UserDefinedContext) {\n  const ctx = compact(userContext)\n  return createMachine<MachineContext, MachineState>(\n    {\n      id: \"avatar\",\n      initial: \"loading\",\n      activities: [\"trackImageRemoval\"],\n\n      context: ctx,\n\n      on: {\n        \"SRC.CHANGE\": {\n          target: \"loading\",\n        },\n        \"IMG.UNMOUNT\": {\n          target: \"error\",\n        },\n      },\n\n      states: {\n        loading: {\n          activities: [\"trackSrcChange\"],\n          entry: [\"checkImageStatus\"],\n          on: {\n            \"IMG.LOADED\": {\n              target: \"loaded\",\n              actions: [\"invokeOnLoad\"],\n            },\n            \"IMG.ERROR\": {\n              target: \"error\",\n              actions: [\"invokeOnError\"],\n            },\n          },\n        },\n        error: {\n          activities: [\"trackSrcChange\"],\n          on: {\n            \"IMG.LOADED\": {\n              target: \"loaded\",\n              actions: [\"invokeOnLoad\"],\n            },\n          },\n        },\n        loaded: {\n          activities: [\"trackSrcChange\"],\n          on: {\n            \"IMG.ERROR\": {\n              target: \"error\",\n              actions: [\"invokeOnError\"],\n            },\n          },\n        },\n      },\n    },\n    {\n      activities: {\n        trackSrcChange(ctx, _evt, { send }) {\n          const imageEl = dom.getImageEl(ctx)\n          return observeAttributes(imageEl, {\n            attributes: [\"src\", \"srcset\"],\n            callback() {\n              send({ type: \"SRC.CHANGE\" })\n            },\n          })\n        },\n        trackImageRemoval(ctx, _evt, { send }) {\n          const rootEl = dom.getRootEl(ctx)\n          return observeChildren(rootEl, {\n            callback(records) {\n              const removedNodes = Array.from(records[0].removedNodes) as HTMLElement[]\n              const removed = removedNodes.find(\n                (node) => node.nodeType === Node.ELEMENT_NODE && node.matches(\"[data-scope=avatar][data-part=image]\"),\n              )\n              if (removed) {\n                send({ type: \"IMG.UNMOUNT\" })\n              }\n            },\n          })\n        },\n      },\n      actions: {\n        invokeOnLoad(ctx) {\n          ctx.onStatusChange?.({ status: \"loaded\" })\n        },\n        invokeOnError(ctx) {\n          ctx.onStatusChange?.({ status: \"error\" })\n        },\n        checkImageStatus(ctx, _evt, { send }) {\n          const imageEl = dom.getImageEl(ctx)\n          if (imageEl?.complete) {\n            const type = hasLoaded(imageEl) ? \"IMG.LOADED\" : \"IMG.ERROR\"\n            send({ type, src: \"ssr\" })\n          }\n        },\n      },\n    },\n  )\n}\n\nfunction hasLoaded(image: HTMLImageElement) {\n  return image.complete && image.naturalWidth !== 0 && image.naturalHeight !== 0\n}\n","import { createProps } from \"@zag-js/types\"\nimport { createSplitProps } from \"@zag-js/utils\"\nimport type { UserDefinedContext } from \"./avatar.types\"\n\nexport const props = createProps<UserDefinedContext>()([\"dir\", \"id\", \"ids\", \"onStatusChange\", \"getRootNode\"])\nexport const splitProps = createSplitProps<Partial<UserDefinedContext>>(props)\n"],"mappings":";AAAA,SAAS,qBAAqB;AAEvB,IAAM,UAAU,cAAc,QAAQ,EAAE,MAAM,QAAQ,SAAS,UAAU;AAEzE,IAAM,QAAQ,QAAQ,MAAM;;;ACJnC,SAAS,mBAAmB;AAGrB,IAAM,MAAM,YAAY;AAAA,EAC7B,WAAW,CAAC,QAAa,IAAI,KAAK,QAAQ,UAAU,IAAI,EAAE;AAAA,EAC1D,YAAY,CAAC,QAAa,IAAI,KAAK,SAAS,UAAU,IAAI,EAAE;AAAA,EAC5D,eAAe,CAAC,QAAa,IAAI,KAAK,YAAY,UAAU,IAAI,EAAE;AAAA,EAElE,WAAW,CAAC,QAAa,IAAI,QAAQ,KAAK,IAAI,UAAU,GAAG,CAAC;AAAA,EAC5D,YAAY,CAAC,QAAa,IAAI,QAA0B,KAAK,IAAI,WAAW,GAAG,CAAC;AAClF,CAAC;;;ACLM,SAAS,QAA6B,OAAc,MAAY,WAA6C;AAClH,QAAM,SAAS,MAAM,QAAQ,QAAQ;AACrC,SAAO;AAAA,IACL;AAAA,IACA,OAAO,KAAK;AACV,WAAK,EAAE,MAAM,WAAW,IAAI,CAAC;AAAA,IAC/B;AAAA,IACA,YAAY;AACV,WAAK,EAAE,MAAM,cAAc,KAAK,MAAM,CAAC;AAAA,IACzC;AAAA,IACA,WAAW;AACT,WAAK,EAAE,MAAM,aAAa,KAAK,MAAM,CAAC;AAAA,IACxC;AAAA,IAEA,eAAe;AACb,aAAO,UAAU,QAAQ;AAAA,QACvB,GAAG,MAAM,KAAK;AAAA,QACd,KAAK,MAAM,QAAQ;AAAA,QACnB,IAAI,IAAI,UAAU,MAAM,OAAO;AAAA,MACjC,CAAC;AAAA,IACH;AAAA,IAEA,gBAAgB;AACd,aAAO,UAAU,IAAI;AAAA,QACnB,GAAG,MAAM,MAAM;AAAA,QACf,QAAQ,CAAC;AAAA,QACT,KAAK,MAAM,QAAQ;AAAA,QACnB,IAAI,IAAI,WAAW,MAAM,OAAO;AAAA,QAChC,cAAc,SAAS,YAAY;AAAA,QACnC,SAAS;AACP,eAAK,EAAE,MAAM,cAAc,KAAK,UAAU,CAAC;AAAA,QAC7C;AAAA,QACA,UAAU;AACR,eAAK,EAAE,MAAM,aAAa,KAAK,UAAU,CAAC;AAAA,QAC5C;AAAA,MACF,CAAC;AAAA,IACH;AAAA,IAEA,mBAAmB;AACjB,aAAO,UAAU,QAAQ;AAAA,QACvB,GAAG,MAAM,SAAS;AAAA,QAClB,KAAK,MAAM,QAAQ;AAAA,QACnB,IAAI,IAAI,cAAc,MAAM,OAAO;AAAA,QACnC,QAAQ;AAAA,QACR,cAAc,SAAS,WAAW;AAAA,MACpC,CAAC;AAAA,IACH;AAAA,EACF;AACF;;;ACrDA,SAAS,qBAAqB;AAC9B,SAAS,mBAAmB,uBAAuB;AACnD,SAAS,eAAe;AAIjB,SAAS,QAAQ,aAAiC;AACvD,QAAM,MAAM,QAAQ,WAAW;AAC/B,SAAO;AAAA,IACL;AAAA,MACE,IAAI;AAAA,MACJ,SAAS;AAAA,MACT,YAAY,CAAC,mBAAmB;AAAA,MAEhC,SAAS;AAAA,MAET,IAAI;AAAA,QACF,cAAc;AAAA,UACZ,QAAQ;AAAA,QACV;AAAA,QACA,eAAe;AAAA,UACb,QAAQ;AAAA,QACV;AAAA,MACF;AAAA,MAEA,QAAQ;AAAA,QACN,SAAS;AAAA,UACP,YAAY,CAAC,gBAAgB;AAAA,UAC7B,OAAO,CAAC,kBAAkB;AAAA,UAC1B,IAAI;AAAA,YACF,cAAc;AAAA,cACZ,QAAQ;AAAA,cACR,SAAS,CAAC,cAAc;AAAA,YAC1B;AAAA,YACA,aAAa;AAAA,cACX,QAAQ;AAAA,cACR,SAAS,CAAC,eAAe;AAAA,YAC3B;AAAA,UACF;AAAA,QACF;AAAA,QACA,OAAO;AAAA,UACL,YAAY,CAAC,gBAAgB;AAAA,UAC7B,IAAI;AAAA,YACF,cAAc;AAAA,cACZ,QAAQ;AAAA,cACR,SAAS,CAAC,cAAc;AAAA,YAC1B;AAAA,UACF;AAAA,QACF;AAAA,QACA,QAAQ;AAAA,UACN,YAAY,CAAC,gBAAgB;AAAA,UAC7B,IAAI;AAAA,YACF,aAAa;AAAA,cACX,QAAQ;AAAA,cACR,SAAS,CAAC,eAAe;AAAA,YAC3B;AAAA,UACF;AAAA,QACF;AAAA,MACF;AAAA,IACF;AAAA,IACA;AAAA,MACE,YAAY;AAAA,QACV,eAAeA,MAAK,MAAM,EAAE,KAAK,GAAG;AAClC,gBAAM,UAAU,IAAI,WAAWA,IAAG;AAClC,iBAAO,kBAAkB,SAAS;AAAA,YAChC,YAAY,CAAC,OAAO,QAAQ;AAAA,YAC5B,WAAW;AACT,mBAAK,EAAE,MAAM,aAAa,CAAC;AAAA,YAC7B;AAAA,UACF,CAAC;AAAA,QACH;AAAA,QACA,kBAAkBA,MAAK,MAAM,EAAE,KAAK,GAAG;AACrC,gBAAM,SAAS,IAAI,UAAUA,IAAG;AAChC,iBAAO,gBAAgB,QAAQ;AAAA,YAC7B,SAAS,SAAS;AAChB,oBAAM,eAAe,MAAM,KAAK,QAAQ,CAAC,EAAE,YAAY;AACvD,oBAAM,UAAU,aAAa;AAAA,gBAC3B,CAAC,SAAS,KAAK,aAAa,KAAK,gBAAgB,KAAK,QAAQ,sCAAsC;AAAA,cACtG;AACA,kBAAI,SAAS;AACX,qBAAK,EAAE,MAAM,cAAc,CAAC;AAAA,cAC9B;AAAA,YACF;AAAA,UACF,CAAC;AAAA,QACH;AAAA,MACF;AAAA,MACA,SAAS;AAAA,QACP,aAAaA,MAAK;AAChB,UAAAA,KAAI,iBAAiB,EAAE,QAAQ,SAAS,CAAC;AAAA,QAC3C;AAAA,QACA,cAAcA,MAAK;AACjB,UAAAA,KAAI,iBAAiB,EAAE,QAAQ,QAAQ,CAAC;AAAA,QAC1C;AAAA,QACA,iBAAiBA,MAAK,MAAM,EAAE,KAAK,GAAG;AACpC,gBAAM,UAAU,IAAI,WAAWA,IAAG;AAClC,cAAI,SAAS,UAAU;AACrB,kBAAM,OAAO,UAAU,OAAO,IAAI,eAAe;AACjD,iBAAK,EAAE,MAAM,KAAK,MAAM,CAAC;AAAA,UAC3B;AAAA,QACF;AAAA,MACF;AAAA,IACF;AAAA,EACF;AACF;AAEA,SAAS,UAAU,OAAyB;AAC1C,SAAO,MAAM,YAAY,MAAM,iBAAiB,KAAK,MAAM,kBAAkB;AAC/E;;;AC3GA,SAAS,mBAAmB;AAC5B,SAAS,wBAAwB;AAG1B,IAAM,QAAQ,YAAgC,EAAE,CAAC,OAAO,MAAM,OAAO,kBAAkB,aAAa,CAAC;AACrG,IAAM,aAAa,iBAA8C,KAAK;","names":["ctx"]}

package/package.json

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

package/src/avatar.machine.ts

@@ -74,7 +74,9 @@ export function machine(userContext: UserDefinedContext) {
           return observeChildren(rootEl, {
             callback(records) {
               const removedNodes = Array.from(records[0].removedNodes) as HTMLElement[]
-              const removed = removedNodes.find((node) => node.matches("[data-scope=avatar][data-part=image]"))
+              const removed = removedNodes.find(
+                (node) => node.nodeType === Node.ELEMENT_NODE && node.matches("[data-scope=avatar][data-part=image]"),
+              )
               if (removed) {
                 send({ type: "IMG.UNMOUNT" })
               }