@zag-js/avatar 0.82.1 → 1.0.0

package/dist/index.d.mts

@@ -1,7 +1,7 @@
 import * as _zag_js_anatomy from '@zag-js/anatomy';
-import { RequiredBy, PropTypes, CommonProperties, DirectionProperty, NormalizeProps } from '@zag-js/types';
+import { CommonProperties, DirectionProperty, PropTypes, NormalizeProps } from '@zag-js/types';
 import * as _zag_js_core from '@zag-js/core';
-import { Machine, StateMachine } from '@zag-js/core';
+import { Service } from '@zag-js/core';
 
 declare const anatomy: _zag_js_anatomy.AnatomyInstance<"root" | "image" | "fallback">;
 
@@ -14,7 +14,7 @@ type ElementIds = Partial<{
     image: string;
     fallback: string;
 }>;
-interface PublicContext extends CommonProperties, DirectionProperty {
+interface AvatarProps extends CommonProperties, DirectionProperty {
     /**
      * Functional called when the image loading status changes.
      */
@@ -24,19 +24,27 @@ interface PublicContext extends CommonProperties, DirectionProperty {
      */
     ids?: ElementIds | undefined;
 }
-interface PrivateContext {
+interface AvatarSchema {
+    props: AvatarProps;
+    context: any;
+    initial: "loading";
+    effect: "trackImageRemoval" | "trackSrcChange";
+    action: "invokeOnLoad" | "invokeOnError" | "checkImageStatus";
+    event: {
+        type: "img.loaded";
+        src?: string;
+    } | {
+        type: "img.error";
+        src?: string;
+    } | {
+        type: "img.unmount";
+    } | {
+        type: "src.change";
+    };
+    state: "loading" | "error" | "loaded";
 }
-type ComputedContext = Readonly<{}>;
-type UserDefinedContext = RequiredBy<PublicContext, "id">;
-interface MachineContext extends PublicContext, PrivateContext, ComputedContext {
-}
-interface MachineState {
-    value: "loading" | "error" | "loaded";
-}
-type State = StateMachine.State<MachineContext, MachineState>;
-type Send = StateMachine.Send<StateMachine.AnyEventObject>;
-type Service = Machine<MachineContext, MachineState, StateMachine.AnyEventObject>;
-interface MachineApi<T extends PropTypes = PropTypes> {
+type AvatarService = Service<AvatarSchema>;
+interface AvatarApi<T extends PropTypes = PropTypes> {
     /**
      * Whether the image is loaded.
      */
@@ -58,11 +66,11 @@ interface MachineApi<T extends PropTypes = PropTypes> {
     getFallbackProps(): T["element"];
 }
 
-declare function connect<T extends PropTypes>(state: State, send: Send, normalize: NormalizeProps<T>): MachineApi<T>;
+declare function connect<T extends PropTypes>(service: Service<AvatarSchema>, normalize: NormalizeProps<T>): AvatarApi<T>;
 
-declare function machine(userContext: UserDefinedContext): _zag_js_core.Machine<MachineContext, MachineState, _zag_js_core.StateMachine.AnyEventObject>;
+declare const machine: _zag_js_core.MachineConfig<AvatarSchema>;
 
-declare const props: ("dir" | "id" | "getRootNode" | "onStatusChange" | "ids")[];
-declare const splitProps: <Props extends Partial<UserDefinedContext>>(props: Props) => [Partial<UserDefinedContext>, Omit<Props, "dir" | "id" | "getRootNode" | "onStatusChange" | "ids">];
+declare const props: (keyof AvatarProps)[];
+declare const splitProps: <Props extends Partial<AvatarProps>>(props: Props) => [Partial<AvatarProps>, Omit<Props, keyof AvatarProps>];
 
-export { type MachineApi as Api, type UserDefinedContext as Context, type ElementIds, type LoadStatus, type Service, type StatusChangeDetails, anatomy, connect, machine, props, splitProps };
+export { type AvatarApi as Api, type ElementIds, type LoadStatus, type AvatarProps as Props, type AvatarService as Service, type StatusChangeDetails, anatomy, connect, machine, props, splitProps };

package/dist/index.d.ts

@@ -1,7 +1,7 @@
 import * as _zag_js_anatomy from '@zag-js/anatomy';
-import { RequiredBy, PropTypes, CommonProperties, DirectionProperty, NormalizeProps } from '@zag-js/types';
+import { CommonProperties, DirectionProperty, PropTypes, NormalizeProps } from '@zag-js/types';
 import * as _zag_js_core from '@zag-js/core';
-import { Machine, StateMachine } from '@zag-js/core';
+import { Service } from '@zag-js/core';
 
 declare const anatomy: _zag_js_anatomy.AnatomyInstance<"root" | "image" | "fallback">;
 
@@ -14,7 +14,7 @@ type ElementIds = Partial<{
     image: string;
     fallback: string;
 }>;
-interface PublicContext extends CommonProperties, DirectionProperty {
+interface AvatarProps extends CommonProperties, DirectionProperty {
     /**
      * Functional called when the image loading status changes.
      */
@@ -24,19 +24,27 @@ interface PublicContext extends CommonProperties, DirectionProperty {
      */
     ids?: ElementIds | undefined;
 }
-interface PrivateContext {
+interface AvatarSchema {
+    props: AvatarProps;
+    context: any;
+    initial: "loading";
+    effect: "trackImageRemoval" | "trackSrcChange";
+    action: "invokeOnLoad" | "invokeOnError" | "checkImageStatus";
+    event: {
+        type: "img.loaded";
+        src?: string;
+    } | {
+        type: "img.error";
+        src?: string;
+    } | {
+        type: "img.unmount";
+    } | {
+        type: "src.change";
+    };
+    state: "loading" | "error" | "loaded";
 }
-type ComputedContext = Readonly<{}>;
-type UserDefinedContext = RequiredBy<PublicContext, "id">;
-interface MachineContext extends PublicContext, PrivateContext, ComputedContext {
-}
-interface MachineState {
-    value: "loading" | "error" | "loaded";
-}
-type State = StateMachine.State<MachineContext, MachineState>;
-type Send = StateMachine.Send<StateMachine.AnyEventObject>;
-type Service = Machine<MachineContext, MachineState, StateMachine.AnyEventObject>;
-interface MachineApi<T extends PropTypes = PropTypes> {
+type AvatarService = Service<AvatarSchema>;
+interface AvatarApi<T extends PropTypes = PropTypes> {
     /**
      * Whether the image is loaded.
      */
@@ -58,11 +66,11 @@ interface MachineApi<T extends PropTypes = PropTypes> {
     getFallbackProps(): T["element"];
 }
 
-declare function connect<T extends PropTypes>(state: State, send: Send, normalize: NormalizeProps<T>): MachineApi<T>;
+declare function connect<T extends PropTypes>(service: Service<AvatarSchema>, normalize: NormalizeProps<T>): AvatarApi<T>;
 
-declare function machine(userContext: UserDefinedContext): _zag_js_core.Machine<MachineContext, MachineState, _zag_js_core.StateMachine.AnyEventObject>;
+declare const machine: _zag_js_core.MachineConfig<AvatarSchema>;
 
-declare const props: ("dir" | "id" | "getRootNode" | "onStatusChange" | "ids")[];
-declare const splitProps: <Props extends Partial<UserDefinedContext>>(props: Props) => [Partial<UserDefinedContext>, Omit<Props, "dir" | "id" | "getRootNode" | "onStatusChange" | "ids">];
+declare const props: (keyof AvatarProps)[];
+declare const splitProps: <Props extends Partial<AvatarProps>>(props: Props) => [Partial<AvatarProps>, Omit<Props, keyof AvatarProps>];
 
-export { type MachineApi as Api, type UserDefinedContext as Context, type ElementIds, type LoadStatus, type Service, type StatusChangeDetails, anatomy, connect, machine, props, splitProps };
+export { type AvatarApi as Api, type ElementIds, type LoadStatus, type AvatarProps as Props, type AvatarService as Service, type StatusChangeDetails, anatomy, connect, machine, props, splitProps };

package/dist/index.js

@@ -3,162 +3,155 @@
 var anatomy$1 = require('@zag-js/anatomy');
 var domQuery = require('@zag-js/dom-query');
 var core = require('@zag-js/core');
-var utils = require('@zag-js/utils');
 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();
-var dom = domQuery.createScope({
-  getRootId: (ctx) => ctx.ids?.root ?? `avatar:${ctx.id}`,
-  getImageId: (ctx) => ctx.ids?.image ?? `avatar:${ctx.id}:image`,
-  getFallbackId: (ctx) => ctx.ids?.fallback ?? `avatar:${ctx.id}:fallback`,
-  getRootEl: (ctx) => dom.getById(ctx, dom.getRootId(ctx)),
-  getImageEl: (ctx) => dom.getById(ctx, dom.getImageId(ctx))
-});
+
+// 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(state, send, normalize) {
+function connect(service, normalize) {
+  const { state, send, prop, scope } = service;
   const loaded = state.matches("loaded");
   return {
     loaded,
     setSrc(src) {
-      send({ type: "SRC.SET", src });
+      const img = getImageEl(scope);
+      img?.setAttribute("src", src);
     },
     setLoaded() {
-      send({ type: "IMG.LOADED", src: "api" });
+      send({ type: "img.loaded", src: "api" });
     },
     setError() {
-      send({ type: "IMG.ERROR", src: "api" });
+      send({ type: "img.error", src: "api" });
     },
     getRootProps() {
       return normalize.element({
         ...parts.root.attrs,
-        dir: state.context.dir,
-        id: dom.getRootId(state.context)
+        dir: prop("dir"),
+        id: getRootId(scope)
       });
     },
     getImageProps() {
       return normalize.img({
         ...parts.image.attrs,
         hidden: !loaded,
-        dir: state.context.dir,
-        id: dom.getImageId(state.context),
+        dir: prop("dir"),
+        id: getImageId(scope),
         "data-state": loaded ? "visible" : "hidden",
         onLoad() {
-          send({ type: "IMG.LOADED", src: "element" });
+          send({ type: "img.loaded", src: "element" });
         },
         onError() {
-          send({ type: "IMG.ERROR", src: "element" });
+          send({ type: "img.error", src: "element" });
         }
       });
     },
     getFallbackProps() {
       return normalize.element({
         ...parts.fallback.attrs,
-        dir: state.context.dir,
-        id: dom.getFallbackId(state.context),
+        dir: prop("dir"),
+        id: getFallbackId(scope),
         hidden: loaded,
         "data-state": loaded ? "hidden" : "visible"
       });
     }
   };
 }
-function machine(userContext) {
-  const ctx = utils.compact(userContext);
-  return core.createMachine(
-    {
-      id: "avatar",
-      initial: "loading",
-      activities: ["trackImageRemoval"],
-      context: ctx,
+var machine = core.createMachine({
+  initialState() {
+    return "loading";
+  },
+  effects: ["trackImageRemoval", "trackSrcChange"],
+  on: {
+    "src.change": {
+      target: "loading"
+    },
+    "img.unmount": {
+      target: "error"
+    }
+  },
+  states: {
+    loading: {
+      entry: ["checkImageStatus"],
       on: {
-        "SRC.CHANGE": {
-          target: "loading"
+        "img.loaded": {
+          target: "loaded",
+          actions: ["invokeOnLoad"]
         },
-        "IMG.UNMOUNT": {
-          target: "error"
+        "img.error": {
+          target: "error",
+          actions: ["invokeOnError"]
         }
-      },
-      states: {
-        loading: {
-          activities: ["trackSrcChange"],
-          entry: ["checkImageStatus"],
-          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"],
-          on: {
-            "IMG.ERROR": {
-              target: "error",
-              actions: ["invokeOnError"]
-            }
-          }
+      }
+    },
+    error: {
+      on: {
+        "img.loaded": {
+          target: "loaded",
+          actions: ["invokeOnLoad"]
         }
       }
     },
-    {
-      activities: {
-        trackSrcChange(ctx2, _evt, { send }) {
-          const imageEl = dom.getImageEl(ctx2);
-          return domQuery.observeAttributes(imageEl, {
-            attributes: ["src", "srcset"],
-            callback() {
-              send({ type: "SRC.CHANGE" });
-            }
-          });
-        },
-        trackImageRemoval(ctx2, _evt, { send }) {
-          const rootEl = dom.getRootEl(ctx2);
-          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" });
-              }
-            }
-          });
+    loaded: {
+      on: {
+        "img.error": {
+          target: "error",
+          actions: ["invokeOnError"]
         }
+      }
+    }
+  },
+  implementations: {
+    actions: {
+      invokeOnLoad({ prop }) {
+        prop("onStatusChange")?.({ status: "loaded" });
       },
-      actions: {
-        invokeOnLoad(ctx2) {
-          ctx2.onStatusChange?.({ status: "loaded" });
-        },
-        invokeOnError(ctx2) {
-          ctx2.onStatusChange?.({ status: "error" });
-        },
-        checkImageStatus(ctx2, _evt, { send }) {
-          const imageEl = dom.getImageEl(ctx2);
-          if (imageEl?.complete) {
-            const type = hasLoaded(imageEl) ? "IMG.LOADED" : "IMG.ERROR";
-            send({ type, src: "ssr" });
+      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" });
+          }
+        });
       }
     }
-  );
-}
+  }
+});
 function hasLoaded(image) {
   return image.complete && image.naturalWidth !== 0 && image.naturalHeight !== 0;
 }

package/dist/index.mjs

@@ -1,162 +1,155 @@
 import { createAnatomy } from '@zag-js/anatomy';
-import { createScope, observeAttributes, observeChildren } from '@zag-js/dom-query';
+import { observeChildren, observeAttributes } from '@zag-js/dom-query';
 import { createMachine } from '@zag-js/core';
-import { createSplitProps, compact } from '@zag-js/utils';
 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();
-var dom = createScope({
-  getRootId: (ctx) => ctx.ids?.root ?? `avatar:${ctx.id}`,
-  getImageId: (ctx) => ctx.ids?.image ?? `avatar:${ctx.id}:image`,
-  getFallbackId: (ctx) => ctx.ids?.fallback ?? `avatar:${ctx.id}:fallback`,
-  getRootEl: (ctx) => dom.getById(ctx, dom.getRootId(ctx)),
-  getImageEl: (ctx) => dom.getById(ctx, dom.getImageId(ctx))
-});
+
+// 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(state, send, normalize) {
+function connect(service, normalize) {
+  const { state, send, prop, scope } = service;
   const loaded = state.matches("loaded");
   return {
     loaded,
     setSrc(src) {
-      send({ type: "SRC.SET", src });
+      const img = getImageEl(scope);
+      img?.setAttribute("src", src);
     },
     setLoaded() {
-      send({ type: "IMG.LOADED", src: "api" });
+      send({ type: "img.loaded", src: "api" });
     },
     setError() {
-      send({ type: "IMG.ERROR", src: "api" });
+      send({ type: "img.error", src: "api" });
     },
     getRootProps() {
       return normalize.element({
         ...parts.root.attrs,
-        dir: state.context.dir,
-        id: dom.getRootId(state.context)
+        dir: prop("dir"),
+        id: getRootId(scope)
       });
     },
     getImageProps() {
       return normalize.img({
         ...parts.image.attrs,
         hidden: !loaded,
-        dir: state.context.dir,
-        id: dom.getImageId(state.context),
+        dir: prop("dir"),
+        id: getImageId(scope),
         "data-state": loaded ? "visible" : "hidden",
         onLoad() {
-          send({ type: "IMG.LOADED", src: "element" });
+          send({ type: "img.loaded", src: "element" });
         },
         onError() {
-          send({ type: "IMG.ERROR", src: "element" });
+          send({ type: "img.error", src: "element" });
         }
       });
     },
     getFallbackProps() {
       return normalize.element({
         ...parts.fallback.attrs,
-        dir: state.context.dir,
-        id: dom.getFallbackId(state.context),
+        dir: prop("dir"),
+        id: getFallbackId(scope),
         hidden: loaded,
         "data-state": loaded ? "hidden" : "visible"
       });
     }
   };
 }
-function machine(userContext) {
-  const ctx = compact(userContext);
-  return createMachine(
-    {
-      id: "avatar",
-      initial: "loading",
-      activities: ["trackImageRemoval"],
-      context: ctx,
+var machine = createMachine({
+  initialState() {
+    return "loading";
+  },
+  effects: ["trackImageRemoval", "trackSrcChange"],
+  on: {
+    "src.change": {
+      target: "loading"
+    },
+    "img.unmount": {
+      target: "error"
+    }
+  },
+  states: {
+    loading: {
+      entry: ["checkImageStatus"],
       on: {
-        "SRC.CHANGE": {
-          target: "loading"
+        "img.loaded": {
+          target: "loaded",
+          actions: ["invokeOnLoad"]
         },
-        "IMG.UNMOUNT": {
-          target: "error"
+        "img.error": {
+          target: "error",
+          actions: ["invokeOnError"]
         }
-      },
-      states: {
-        loading: {
-          activities: ["trackSrcChange"],
-          entry: ["checkImageStatus"],
-          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"],
-          on: {
-            "IMG.ERROR": {
-              target: "error",
-              actions: ["invokeOnError"]
-            }
-          }
+      }
+    },
+    error: {
+      on: {
+        "img.loaded": {
+          target: "loaded",
+          actions: ["invokeOnLoad"]
         }
       }
     },
-    {
-      activities: {
-        trackSrcChange(ctx2, _evt, { send }) {
-          const imageEl = dom.getImageEl(ctx2);
-          return observeAttributes(imageEl, {
-            attributes: ["src", "srcset"],
-            callback() {
-              send({ type: "SRC.CHANGE" });
-            }
-          });
-        },
-        trackImageRemoval(ctx2, _evt, { send }) {
-          const rootEl = dom.getRootEl(ctx2);
-          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" });
-              }
-            }
-          });
+    loaded: {
+      on: {
+        "img.error": {
+          target: "error",
+          actions: ["invokeOnError"]
         }
+      }
+    }
+  },
+  implementations: {
+    actions: {
+      invokeOnLoad({ prop }) {
+        prop("onStatusChange")?.({ status: "loaded" });
       },
-      actions: {
-        invokeOnLoad(ctx2) {
-          ctx2.onStatusChange?.({ status: "loaded" });
-        },
-        invokeOnError(ctx2) {
-          ctx2.onStatusChange?.({ status: "error" });
-        },
-        checkImageStatus(ctx2, _evt, { send }) {
-          const imageEl = dom.getImageEl(ctx2);
-          if (imageEl?.complete) {
-            const type = hasLoaded(imageEl) ? "IMG.LOADED" : "IMG.ERROR";
-            send({ type, src: "ssr" });
+      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;
 }

package/package.json

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