@zag-js/tabs 0.7.0 → 0.9.0

package/dist/{chunk-OUTOSCZW.mjs → chunk-EU4R7SET.mjs}

@@ -24,26 +24,31 @@ var dom = createScope({
   getActiveContentEl: (ctx) => {
     if (!ctx.value)
       return;
-    const id = dom.getContentId(ctx, ctx.value);
-    return dom.getById(ctx, id);
+    return dom.getContentEl(ctx, ctx.value);
   },
-  getRectById: (ctx, id) => {
-    const empty = {
-      offsetLeft: 0,
-      offsetTop: 0,
-      offsetWidth: 0,
-      offsetHeight: 0
+  getActiveTabEl: (ctx) => {
+    if (!ctx.value)
+      return;
+    return dom.getTriggerEl(ctx, ctx.value);
+  },
+  getOffsetRect: (el) => {
+    return {
+      left: el?.offsetLeft ?? 0,
+      top: el?.offsetTop ?? 0,
+      width: el?.offsetWidth ?? 0,
+      height: el?.offsetHeight ?? 0
     };
-    const tab = itemById(dom.getElements(ctx), dom.getTriggerId(ctx, id)) ?? empty;
-    if (ctx.isVertical) {
-      return {
-        top: `${tab.offsetTop}px`,
-        height: `${tab.offsetHeight}px`
-      };
-    }
+  },
+  getRectById: (ctx, id) => {
+    const tab = itemById(dom.getElements(ctx), dom.getTriggerId(ctx, id));
+    return dom.resolveRect(dom.getOffsetRect(tab), ctx.orientation);
+  },
+  resolveRect(rect, orientation) {
+    const sizeProp = orientation === "vertical" ? "height" : "width";
+    const placementProp = orientation === "vertical" ? "top" : "left";
     return {
-      left: `${tab.offsetLeft}px`,
-      width: `${tab.offsetWidth}px`
+      [placementProp]: `${rect[placementProp]}px`,
+      [sizeProp]: `${rect[sizeProp]}px`
     };
   }
 });

package/dist/{chunk-FPHYRUCF.mjs → chunk-GMBCGZJ4.mjs}

@@ -3,7 +3,7 @@ import {
 } from "./chunk-S2KW2DT4.mjs";
 import {
   dom
-} from "./chunk-OUTOSCZW.mjs";
+} from "./chunk-EU4R7SET.mjs";
 
 // src/tabs.connect.ts
 import { getEventKey } from "@zag-js/dom-event";
@@ -36,6 +36,12 @@ function connect(state, send, normalize) {
     clearValue() {
       send({ type: "CLEAR_VALUE" });
     },
+    /**
+     * Sets the indicator rect to the tab with the given id.
+     */
+    setIndicatorRect(id) {
+      send({ type: "SET_INDICATOR_RECT", id });
+    },
     rootProps: normalize.element({
       ...parts.root.attrs,
       id: dom.getRootId(state.context),
@@ -142,12 +148,12 @@ function connect(state, send, normalize) {
       ...parts.indicator.attrs,
       "data-orientation": state.context.orientation,
       style: {
-        "--transition-duration": "200ms",
+        "--transition-duration": "150ms",
         "--transition-property": "left, right, top, bottom, width, height",
         position: "absolute",
         willChange: "var(--transition-property)",
         transitionProperty: "var(--transition-property)",
-        transitionDuration: state.context.hasMeasuredRect ? "var(--transition-duration)" : "0ms",
+        transitionDuration: state.context.canIndicatorTransition ? "var(--transition-duration)" : "0ms",
         transitionTimingFunction: "var(--transition-timing-function)",
         ...state.context.indicatorRect
       }

package/dist/{chunk-PH44XJ2S.mjs → chunk-HGL32F6R.mjs}

@@ -1,10 +1,11 @@
 import {
   dom
-} from "./chunk-OUTOSCZW.mjs";
+} from "./chunk-EU4R7SET.mjs";
 
 // src/tabs.machine.ts
 import { createMachine, guards } from "@zag-js/core";
 import { nextTick, raf } from "@zag-js/dom-query";
+import { trackElementRect } from "@zag-js/element-rect";
 import { getFocusables } from "@zag-js/tabbable";
 import { compact } from "@zag-js/utils";
 var { not } = guards;
@@ -20,8 +21,13 @@ function machine(userContext) {
         value: null,
         focusedValue: null,
         previousValues: [],
-        indicatorRect: { left: "0px", top: "0px", width: "0px", height: "0px" },
-        hasMeasuredRect: false,
+        indicatorRect: {
+          left: "0px",
+          top: "0px",
+          width: "0px",
+          height: "0px"
+        },
+        canIndicatorTransition: false,
         isIndicatorRendered: false,
         loop: true,
         translations: {},
@@ -32,10 +38,19 @@ function machine(userContext) {
         isVertical: (ctx2) => ctx2.orientation === "vertical"
       },
       created: ["setPrevSelectedTabs"],
+      entry: ["checkRenderedElements", "syncIndicatorRect", "setContentTabIndex"],
+      exit: ["cleanupObserver"],
       watch: {
         focusedValue: "invokeOnFocus",
-        value: ["invokeOnChange", "setPrevSelectedTabs", "setIndicatorRect", "setContentTabIndex"],
-        dir: ["clearMeasured", "setIndicatorRect"]
+        value: [
+          "enableIndicatorTransition",
+          "invokeOnChange",
+          "setPrevSelectedTabs",
+          "syncIndicatorRect",
+          "setContentTabIndex"
+        ],
+        dir: ["syncIndicatorRect"],
+        orientation: ["syncIndicatorRect"]
       },
       on: {
         SET_VALUE: {
@@ -43,17 +58,25 @@ function machine(userContext) {
         },
         CLEAR_VALUE: {
           actions: "clearValue"
+        },
+        SET_INDICATOR_RECT: {
+          actions: "setIndicatorRect"
         }
       },
-      entry: ["checkRenderedElements", "setIndicatorRect", "setContentTabIndex"],
       states: {
         idle: {
           on: {
-            TAB_FOCUS: {
-              guard: "selectOnFocus",
-              target: "focused",
-              actions: ["setFocusedValue", "setValue"]
-            },
+            TAB_FOCUS: [
+              {
+                guard: "selectOnFocus",
+                target: "focused",
+                actions: ["setFocusedValue", "setValue"]
+              },
+              {
+                target: "focused",
+                actions: "setFocusedValue"
+              }
+            ],
             TAB_CLICK: {
               target: "focused",
               actions: ["setFocusedValue", "setValue"]
@@ -126,9 +149,6 @@ function machine(userContext) {
         clearValue(ctx2) {
           ctx2.value = null;
         },
-        invokeOnDelete(ctx2, evt) {
-          ctx2.onDelete?.({ value: evt.value });
-        },
         focusFirstTab(ctx2) {
           raf(() => dom.getFirstEl(ctx2)?.focus());
         },
@@ -147,24 +167,9 @@ function machine(userContext) {
           const prev = dom.getPrevEl(ctx2, ctx2.focusedValue);
           raf(() => prev?.focus());
         },
-        setIndicatorRect(ctx2) {
-          nextTick(() => {
-            if (!ctx2.isIndicatorRendered || !ctx2.value)
-              return;
-            ctx2.indicatorRect = dom.getRectById(ctx2, ctx2.value);
-            if (ctx2.hasMeasuredRect)
-              return;
-            nextTick(() => {
-              ctx2.hasMeasuredRect = true;
-            });
-          });
-        },
         checkRenderedElements(ctx2) {
           ctx2.isIndicatorRendered = !!dom.getIndicatorEl(ctx2);
         },
-        clearMeasured(ctx2) {
-          ctx2.hasMeasuredRect = false;
-        },
         invokeOnChange(ctx2) {
           ctx2.onChange?.({ value: ctx2.value });
         },
@@ -173,7 +178,7 @@ function machine(userContext) {
         },
         setPrevSelectedTabs(ctx2) {
           if (ctx2.value != null) {
-            ctx2.previousValues = pushUnique(Array.from(ctx2.previousValues), ctx2.value);
+            ctx2.previousValues = pushUnique(ctx2.previousValues, ctx2.value);
           }
         },
         // if tab panel contains focusable elements, remove the tabindex attribute
@@ -189,13 +194,51 @@ function machine(userContext) {
               panel.setAttribute("tabindex", "0");
             }
           });
+        },
+        cleanupObserver(ctx2) {
+          ctx2.indicatorCleanup?.();
+        },
+        enableIndicatorTransition(ctx2) {
+          ctx2.canIndicatorTransition = true;
+        },
+        setIndicatorRect(ctx2, evt) {
+          const value = evt.id ?? ctx2.value;
+          if (!ctx2.isIndicatorRendered || !value)
+            return;
+          const tabEl = dom.getTriggerEl(ctx2, value);
+          if (!tabEl)
+            return;
+          ctx2.indicatorRect = dom.getRectById(ctx2, value);
+          nextTick(() => {
+            ctx2.canIndicatorTransition = false;
+          });
+        },
+        syncIndicatorRect(ctx2) {
+          ctx2.indicatorCleanup?.();
+          const value = ctx2.value;
+          if (!ctx2.isIndicatorRendered || !value)
+            return;
+          const tabEl = dom.getActiveTabEl(ctx2);
+          if (!tabEl)
+            return;
+          ctx2.indicatorCleanup = trackElementRect(tabEl, {
+            getRect(el) {
+              return dom.getOffsetRect(el);
+            },
+            onChange(rect) {
+              ctx2.indicatorRect = dom.resolveRect(rect, ctx2.orientation);
+              nextTick(() => {
+                ctx2.canIndicatorTransition = false;
+              });
+            }
+          });
         }
       }
     }
   );
 }
 function pushUnique(arr, value) {
-  const newArr = arr.slice();
+  const newArr = Array.from(arr).slice();
   const index = newArr.indexOf(value);
   if (index > -1) {
     newArr.splice(index, 1);

package/dist/index.d.ts

@@ -1,7 +1,7 @@
 export { anatomy } from './tabs.anatomy.js';
 export { connect } from './tabs.connect.js';
 export { machine } from './tabs.machine.js';
-export { UserDefinedContext as Context } from './tabs.types.js';
+export { ContentProps, UserDefinedContext as Context, TriggerProps } from './tabs.types.js';
 import '@zag-js/anatomy';
 import '@zag-js/types';
 import '@zag-js/core';

package/dist/index.js

@@ -61,26 +61,31 @@ var dom = (0, import_dom_query.createScope)({
   getActiveContentEl: (ctx) => {
     if (!ctx.value)
       return;
-    const id = dom.getContentId(ctx, ctx.value);
-    return dom.getById(ctx, id);
+    return dom.getContentEl(ctx, ctx.value);
   },
-  getRectById: (ctx, id) => {
-    const empty = {
-      offsetLeft: 0,
-      offsetTop: 0,
-      offsetWidth: 0,
-      offsetHeight: 0
+  getActiveTabEl: (ctx) => {
+    if (!ctx.value)
+      return;
+    return dom.getTriggerEl(ctx, ctx.value);
+  },
+  getOffsetRect: (el) => {
+    return {
+      left: el?.offsetLeft ?? 0,
+      top: el?.offsetTop ?? 0,
+      width: el?.offsetWidth ?? 0,
+      height: el?.offsetHeight ?? 0
     };
-    const tab = (0, import_dom_query.itemById)(dom.getElements(ctx), dom.getTriggerId(ctx, id)) ?? empty;
-    if (ctx.isVertical) {
-      return {
-        top: `${tab.offsetTop}px`,
-        height: `${tab.offsetHeight}px`
-      };
-    }
+  },
+  getRectById: (ctx, id) => {
+    const tab = (0, import_dom_query.itemById)(dom.getElements(ctx), dom.getTriggerId(ctx, id));
+    return dom.resolveRect(dom.getOffsetRect(tab), ctx.orientation);
+  },
+  resolveRect(rect, orientation) {
+    const sizeProp = orientation === "vertical" ? "height" : "width";
+    const placementProp = orientation === "vertical" ? "top" : "left";
     return {
-      left: `${tab.offsetLeft}px`,
-      width: `${tab.offsetWidth}px`
+      [placementProp]: `${rect[placementProp]}px`,
+      [sizeProp]: `${rect[sizeProp]}px`
     };
   }
 });
@@ -114,6 +119,12 @@ function connect(state, send, normalize) {
     clearValue() {
       send({ type: "CLEAR_VALUE" });
     },
+    /**
+     * Sets the indicator rect to the tab with the given id.
+     */
+    setIndicatorRect(id) {
+      send({ type: "SET_INDICATOR_RECT", id });
+    },
     rootProps: normalize.element({
       ...parts.root.attrs,
       id: dom.getRootId(state.context),
@@ -220,12 +231,12 @@ function connect(state, send, normalize) {
       ...parts.indicator.attrs,
       "data-orientation": state.context.orientation,
       style: {
-        "--transition-duration": "200ms",
+        "--transition-duration": "150ms",
         "--transition-property": "left, right, top, bottom, width, height",
         position: "absolute",
         willChange: "var(--transition-property)",
         transitionProperty: "var(--transition-property)",
-        transitionDuration: state.context.hasMeasuredRect ? "var(--transition-duration)" : "0ms",
+        transitionDuration: state.context.canIndicatorTransition ? "var(--transition-duration)" : "0ms",
         transitionTimingFunction: "var(--transition-timing-function)",
         ...state.context.indicatorRect
       }
@@ -236,6 +247,7 @@ function connect(state, send, normalize) {
 // src/tabs.machine.ts
 var import_core = require("@zag-js/core");
 var import_dom_query3 = require("@zag-js/dom-query");
+var import_element_rect = require("@zag-js/element-rect");
 var import_tabbable = require("@zag-js/tabbable");
 var import_utils2 = require("@zag-js/utils");
 var { not } = import_core.guards;
@@ -251,8 +263,13 @@ function machine(userContext) {
         value: null,
         focusedValue: null,
         previousValues: [],
-        indicatorRect: { left: "0px", top: "0px", width: "0px", height: "0px" },
-        hasMeasuredRect: false,
+        indicatorRect: {
+          left: "0px",
+          top: "0px",
+          width: "0px",
+          height: "0px"
+        },
+        canIndicatorTransition: false,
         isIndicatorRendered: false,
         loop: true,
         translations: {},
@@ -263,10 +280,19 @@ function machine(userContext) {
         isVertical: (ctx2) => ctx2.orientation === "vertical"
       },
       created: ["setPrevSelectedTabs"],
+      entry: ["checkRenderedElements", "syncIndicatorRect", "setContentTabIndex"],
+      exit: ["cleanupObserver"],
       watch: {
         focusedValue: "invokeOnFocus",
-        value: ["invokeOnChange", "setPrevSelectedTabs", "setIndicatorRect", "setContentTabIndex"],
-        dir: ["clearMeasured", "setIndicatorRect"]
+        value: [
+          "enableIndicatorTransition",
+          "invokeOnChange",
+          "setPrevSelectedTabs",
+          "syncIndicatorRect",
+          "setContentTabIndex"
+        ],
+        dir: ["syncIndicatorRect"],
+        orientation: ["syncIndicatorRect"]
       },
       on: {
         SET_VALUE: {
@@ -274,17 +300,25 @@ function machine(userContext) {
         },
         CLEAR_VALUE: {
           actions: "clearValue"
+        },
+        SET_INDICATOR_RECT: {
+          actions: "setIndicatorRect"
         }
       },
-      entry: ["checkRenderedElements", "setIndicatorRect", "setContentTabIndex"],
       states: {
         idle: {
           on: {
-            TAB_FOCUS: {
-              guard: "selectOnFocus",
-              target: "focused",
-              actions: ["setFocusedValue", "setValue"]
-            },
+            TAB_FOCUS: [
+              {
+                guard: "selectOnFocus",
+                target: "focused",
+                actions: ["setFocusedValue", "setValue"]
+              },
+              {
+                target: "focused",
+                actions: "setFocusedValue"
+              }
+            ],
             TAB_CLICK: {
               target: "focused",
               actions: ["setFocusedValue", "setValue"]
@@ -357,9 +391,6 @@ function machine(userContext) {
         clearValue(ctx2) {
           ctx2.value = null;
         },
-        invokeOnDelete(ctx2, evt) {
-          ctx2.onDelete?.({ value: evt.value });
-        },
         focusFirstTab(ctx2) {
           (0, import_dom_query3.raf)(() => dom.getFirstEl(ctx2)?.focus());
         },
@@ -378,24 +409,9 @@ function machine(userContext) {
           const prev = dom.getPrevEl(ctx2, ctx2.focusedValue);
           (0, import_dom_query3.raf)(() => prev?.focus());
         },
-        setIndicatorRect(ctx2) {
-          (0, import_dom_query3.nextTick)(() => {
-            if (!ctx2.isIndicatorRendered || !ctx2.value)
-              return;
-            ctx2.indicatorRect = dom.getRectById(ctx2, ctx2.value);
-            if (ctx2.hasMeasuredRect)
-              return;
-            (0, import_dom_query3.nextTick)(() => {
-              ctx2.hasMeasuredRect = true;
-            });
-          });
-        },
         checkRenderedElements(ctx2) {
           ctx2.isIndicatorRendered = !!dom.getIndicatorEl(ctx2);
         },
-        clearMeasured(ctx2) {
-          ctx2.hasMeasuredRect = false;
-        },
         invokeOnChange(ctx2) {
           ctx2.onChange?.({ value: ctx2.value });
         },
@@ -404,7 +420,7 @@ function machine(userContext) {
         },
         setPrevSelectedTabs(ctx2) {
           if (ctx2.value != null) {
-            ctx2.previousValues = pushUnique(Array.from(ctx2.previousValues), ctx2.value);
+            ctx2.previousValues = pushUnique(ctx2.previousValues, ctx2.value);
           }
         },
         // if tab panel contains focusable elements, remove the tabindex attribute
@@ -420,13 +436,51 @@ function machine(userContext) {
               panel.setAttribute("tabindex", "0");
             }
           });
+        },
+        cleanupObserver(ctx2) {
+          ctx2.indicatorCleanup?.();
+        },
+        enableIndicatorTransition(ctx2) {
+          ctx2.canIndicatorTransition = true;
+        },
+        setIndicatorRect(ctx2, evt) {
+          const value = evt.id ?? ctx2.value;
+          if (!ctx2.isIndicatorRendered || !value)
+            return;
+          const tabEl = dom.getTriggerEl(ctx2, value);
+          if (!tabEl)
+            return;
+          ctx2.indicatorRect = dom.getRectById(ctx2, value);
+          (0, import_dom_query3.nextTick)(() => {
+            ctx2.canIndicatorTransition = false;
+          });
+        },
+        syncIndicatorRect(ctx2) {
+          ctx2.indicatorCleanup?.();
+          const value = ctx2.value;
+          if (!ctx2.isIndicatorRendered || !value)
+            return;
+          const tabEl = dom.getActiveTabEl(ctx2);
+          if (!tabEl)
+            return;
+          ctx2.indicatorCleanup = (0, import_element_rect.trackElementRect)(tabEl, {
+            getRect(el) {
+              return dom.getOffsetRect(el);
+            },
+            onChange(rect) {
+              ctx2.indicatorRect = dom.resolveRect(rect, ctx2.orientation);
+              (0, import_dom_query3.nextTick)(() => {
+                ctx2.canIndicatorTransition = false;
+              });
+            }
+          });
         }
       }
     }
   );
 }
 function pushUnique(arr, value) {
-  const newArr = arr.slice();
+  const newArr = Array.from(arr).slice();
   const index = newArr.indexOf(value);
   if (index > -1) {
     newArr.splice(index, 1);

package/dist/index.mjs

@@ -1,13 +1,13 @@
 import {
   connect
-} from "./chunk-FPHYRUCF.mjs";
+} from "./chunk-GMBCGZJ4.mjs";
 import {
   anatomy
 } from "./chunk-S2KW2DT4.mjs";
 import {
   machine
-} from "./chunk-PH44XJ2S.mjs";
-import "./chunk-OUTOSCZW.mjs";
+} from "./chunk-HGL32F6R.mjs";
+import "./chunk-EU4R7SET.mjs";
 export {
   anatomy,
   connect,

package/dist/tabs.connect.d.ts

@@ -1,5 +1,5 @@
 import { PropTypes, NormalizeProps } from '@zag-js/types';
-import { State, Send, TabProps } from './tabs.types.js';
+import { State, Send, TriggerProps, ContentProps } from './tabs.types.js';
 import '@zag-js/core';
 
 declare function connect<T extends PropTypes>(state: State, send: Send, normalize: NormalizeProps<T>): {
@@ -23,13 +23,15 @@ declare function connect<T extends PropTypes>(state: State, send: Send, normaliz
      * Clears the value of the tabs.
      */
     clearValue(): void;
+    /**
+     * Sets the indicator rect to the tab with the given id.
+     */
+    setIndicatorRect(id: string | null | undefined): void;
     rootProps: T["element"];
     tablistProps: T["element"];
-    getTriggerProps(props: TabProps): T["button"];
+    getTriggerProps(props: TriggerProps): T["button"];
     contentGroupProps: T["element"];
-    getContentProps({ value }: {
-        value: string;
-    }): T["element"];
+    getContentProps({ value }: ContentProps): T["element"];
     indicatorProps: T["element"];
 };
 

package/dist/tabs.connect.js

@@ -57,26 +57,31 @@ var dom = (0, import_dom_query.createScope)({
   getActiveContentEl: (ctx) => {
     if (!ctx.value)
       return;
-    const id = dom.getContentId(ctx, ctx.value);
-    return dom.getById(ctx, id);
+    return dom.getContentEl(ctx, ctx.value);
   },
-  getRectById: (ctx, id) => {
-    const empty = {
-      offsetLeft: 0,
-      offsetTop: 0,
-      offsetWidth: 0,
-      offsetHeight: 0
+  getActiveTabEl: (ctx) => {
+    if (!ctx.value)
+      return;
+    return dom.getTriggerEl(ctx, ctx.value);
+  },
+  getOffsetRect: (el) => {
+    return {
+      left: el?.offsetLeft ?? 0,
+      top: el?.offsetTop ?? 0,
+      width: el?.offsetWidth ?? 0,
+      height: el?.offsetHeight ?? 0
     };
-    const tab = (0, import_dom_query.itemById)(dom.getElements(ctx), dom.getTriggerId(ctx, id)) ?? empty;
-    if (ctx.isVertical) {
-      return {
-        top: `${tab.offsetTop}px`,
-        height: `${tab.offsetHeight}px`
-      };
-    }
+  },
+  getRectById: (ctx, id) => {
+    const tab = (0, import_dom_query.itemById)(dom.getElements(ctx), dom.getTriggerId(ctx, id));
+    return dom.resolveRect(dom.getOffsetRect(tab), ctx.orientation);
+  },
+  resolveRect(rect, orientation) {
+    const sizeProp = orientation === "vertical" ? "height" : "width";
+    const placementProp = orientation === "vertical" ? "top" : "left";
     return {
-      left: `${tab.offsetLeft}px`,
-      width: `${tab.offsetWidth}px`
+      [placementProp]: `${rect[placementProp]}px`,
+      [sizeProp]: `${rect[sizeProp]}px`
     };
   }
 });
@@ -110,6 +115,12 @@ function connect(state, send, normalize) {
     clearValue() {
       send({ type: "CLEAR_VALUE" });
     },
+    /**
+     * Sets the indicator rect to the tab with the given id.
+     */
+    setIndicatorRect(id) {
+      send({ type: "SET_INDICATOR_RECT", id });
+    },
     rootProps: normalize.element({
       ...parts.root.attrs,
       id: dom.getRootId(state.context),
@@ -216,12 +227,12 @@ function connect(state, send, normalize) {
       ...parts.indicator.attrs,
       "data-orientation": state.context.orientation,
       style: {
-        "--transition-duration": "200ms",
+        "--transition-duration": "150ms",
         "--transition-property": "left, right, top, bottom, width, height",
         position: "absolute",
         willChange: "var(--transition-property)",
         transitionProperty: "var(--transition-property)",
-        transitionDuration: state.context.hasMeasuredRect ? "var(--transition-duration)" : "0ms",
+        transitionDuration: state.context.canIndicatorTransition ? "var(--transition-duration)" : "0ms",
         transitionTimingFunction: "var(--transition-timing-function)",
         ...state.context.indicatorRect
       }

package/dist/tabs.connect.mjs

@@ -1,8 +1,8 @@
 import {
   connect
-} from "./chunk-FPHYRUCF.mjs";
+} from "./chunk-GMBCGZJ4.mjs";
 import "./chunk-S2KW2DT4.mjs";
-import "./chunk-OUTOSCZW.mjs";
+import "./chunk-EU4R7SET.mjs";
 export {
   connect
 };

package/dist/tabs.dom.d.ts

@@ -38,16 +38,18 @@ declare const dom: {
     getNextEl: (ctx: MachineContext, id: string) => HTMLElement;
     getPrevEl: (ctx: MachineContext, id: string) => HTMLElement | null;
     getActiveContentEl: (ctx: MachineContext) => HTMLElement | null | undefined;
+    getActiveTabEl: (ctx: MachineContext) => HTMLElement | null | undefined;
+    getOffsetRect: (el: HTMLElement | undefined) => {
+        left: number;
+        top: number;
+        width: number;
+        height: number;
+    };
     getRectById: (ctx: MachineContext, id: string) => {
-        top: string;
-        height: string;
-        left?: undefined;
-        width?: undefined;
-    } | {
-        left: string;
-        width: string;
-        top?: undefined;
-        height?: undefined;
+        [x: string]: string;
+    };
+    resolveRect(rect: Record<"width" | "height" | "left" | "top", number>, orientation?: "horizontal" | "vertical"): {
+        [x: string]: string;
     };
 };
 

package/dist/tabs.dom.js

@@ -48,26 +48,31 @@ var dom = (0, import_dom_query.createScope)({
   getActiveContentEl: (ctx) => {
     if (!ctx.value)
       return;
-    const id = dom.getContentId(ctx, ctx.value);
-    return dom.getById(ctx, id);
+    return dom.getContentEl(ctx, ctx.value);
   },
-  getRectById: (ctx, id) => {
-    const empty = {
-      offsetLeft: 0,
-      offsetTop: 0,
-      offsetWidth: 0,
-      offsetHeight: 0
+  getActiveTabEl: (ctx) => {
+    if (!ctx.value)
+      return;
+    return dom.getTriggerEl(ctx, ctx.value);
+  },
+  getOffsetRect: (el) => {
+    return {
+      left: el?.offsetLeft ?? 0,
+      top: el?.offsetTop ?? 0,
+      width: el?.offsetWidth ?? 0,
+      height: el?.offsetHeight ?? 0
     };
-    const tab = (0, import_dom_query.itemById)(dom.getElements(ctx), dom.getTriggerId(ctx, id)) ?? empty;
-    if (ctx.isVertical) {
-      return {
-        top: `${tab.offsetTop}px`,
-        height: `${tab.offsetHeight}px`
-      };
-    }
+  },
+  getRectById: (ctx, id) => {
+    const tab = (0, import_dom_query.itemById)(dom.getElements(ctx), dom.getTriggerId(ctx, id));
+    return dom.resolveRect(dom.getOffsetRect(tab), ctx.orientation);
+  },
+  resolveRect(rect, orientation) {
+    const sizeProp = orientation === "vertical" ? "height" : "width";
+    const placementProp = orientation === "vertical" ? "top" : "left";
     return {
-      left: `${tab.offsetLeft}px`,
-      width: `${tab.offsetWidth}px`
+      [placementProp]: `${rect[placementProp]}px`,
+      [sizeProp]: `${rect[sizeProp]}px`
     };
   }
 });

package/dist/tabs.dom.mjs

@@ -1,6 +1,6 @@
 import {
   dom
-} from "./chunk-OUTOSCZW.mjs";
+} from "./chunk-EU4R7SET.mjs";
 export {
   dom
 };

package/dist/tabs.machine.js

@@ -25,6 +25,7 @@ __export(tabs_machine_exports, {
 module.exports = __toCommonJS(tabs_machine_exports);
 var import_core = require("@zag-js/core");
 var import_dom_query2 = require("@zag-js/dom-query");
+var import_element_rect = require("@zag-js/element-rect");
 var import_tabbable = require("@zag-js/tabbable");
 var import_utils2 = require("@zag-js/utils");
 
@@ -54,26 +55,31 @@ var dom = (0, import_dom_query.createScope)({
   getActiveContentEl: (ctx) => {
     if (!ctx.value)
       return;
-    const id = dom.getContentId(ctx, ctx.value);
-    return dom.getById(ctx, id);
+    return dom.getContentEl(ctx, ctx.value);
   },
-  getRectById: (ctx, id) => {
-    const empty = {
-      offsetLeft: 0,
-      offsetTop: 0,
-      offsetWidth: 0,
-      offsetHeight: 0
+  getActiveTabEl: (ctx) => {
+    if (!ctx.value)
+      return;
+    return dom.getTriggerEl(ctx, ctx.value);
+  },
+  getOffsetRect: (el) => {
+    return {
+      left: el?.offsetLeft ?? 0,
+      top: el?.offsetTop ?? 0,
+      width: el?.offsetWidth ?? 0,
+      height: el?.offsetHeight ?? 0
     };
-    const tab = (0, import_dom_query.itemById)(dom.getElements(ctx), dom.getTriggerId(ctx, id)) ?? empty;
-    if (ctx.isVertical) {
-      return {
-        top: `${tab.offsetTop}px`,
-        height: `${tab.offsetHeight}px`
-      };
-    }
+  },
+  getRectById: (ctx, id) => {
+    const tab = (0, import_dom_query.itemById)(dom.getElements(ctx), dom.getTriggerId(ctx, id));
+    return dom.resolveRect(dom.getOffsetRect(tab), ctx.orientation);
+  },
+  resolveRect(rect, orientation) {
+    const sizeProp = orientation === "vertical" ? "height" : "width";
+    const placementProp = orientation === "vertical" ? "top" : "left";
     return {
-      left: `${tab.offsetLeft}px`,
-      width: `${tab.offsetWidth}px`
+      [placementProp]: `${rect[placementProp]}px`,
+      [sizeProp]: `${rect[sizeProp]}px`
     };
   }
 });
@@ -92,8 +98,13 @@ function machine(userContext) {
         value: null,
         focusedValue: null,
         previousValues: [],
-        indicatorRect: { left: "0px", top: "0px", width: "0px", height: "0px" },
-        hasMeasuredRect: false,
+        indicatorRect: {
+          left: "0px",
+          top: "0px",
+          width: "0px",
+          height: "0px"
+        },
+        canIndicatorTransition: false,
         isIndicatorRendered: false,
         loop: true,
         translations: {},
@@ -104,10 +115,19 @@ function machine(userContext) {
         isVertical: (ctx2) => ctx2.orientation === "vertical"
       },
       created: ["setPrevSelectedTabs"],
+      entry: ["checkRenderedElements", "syncIndicatorRect", "setContentTabIndex"],
+      exit: ["cleanupObserver"],
       watch: {
         focusedValue: "invokeOnFocus",
-        value: ["invokeOnChange", "setPrevSelectedTabs", "setIndicatorRect", "setContentTabIndex"],
-        dir: ["clearMeasured", "setIndicatorRect"]
+        value: [
+          "enableIndicatorTransition",
+          "invokeOnChange",
+          "setPrevSelectedTabs",
+          "syncIndicatorRect",
+          "setContentTabIndex"
+        ],
+        dir: ["syncIndicatorRect"],
+        orientation: ["syncIndicatorRect"]
       },
       on: {
         SET_VALUE: {
@@ -115,17 +135,25 @@ function machine(userContext) {
         },
         CLEAR_VALUE: {
           actions: "clearValue"
+        },
+        SET_INDICATOR_RECT: {
+          actions: "setIndicatorRect"
         }
       },
-      entry: ["checkRenderedElements", "setIndicatorRect", "setContentTabIndex"],
       states: {
         idle: {
           on: {
-            TAB_FOCUS: {
-              guard: "selectOnFocus",
-              target: "focused",
-              actions: ["setFocusedValue", "setValue"]
-            },
+            TAB_FOCUS: [
+              {
+                guard: "selectOnFocus",
+                target: "focused",
+                actions: ["setFocusedValue", "setValue"]
+              },
+              {
+                target: "focused",
+                actions: "setFocusedValue"
+              }
+            ],
             TAB_CLICK: {
               target: "focused",
               actions: ["setFocusedValue", "setValue"]
@@ -198,9 +226,6 @@ function machine(userContext) {
         clearValue(ctx2) {
           ctx2.value = null;
         },
-        invokeOnDelete(ctx2, evt) {
-          ctx2.onDelete?.({ value: evt.value });
-        },
         focusFirstTab(ctx2) {
           (0, import_dom_query2.raf)(() => dom.getFirstEl(ctx2)?.focus());
         },
@@ -219,24 +244,9 @@ function machine(userContext) {
           const prev = dom.getPrevEl(ctx2, ctx2.focusedValue);
           (0, import_dom_query2.raf)(() => prev?.focus());
         },
-        setIndicatorRect(ctx2) {
-          (0, import_dom_query2.nextTick)(() => {
-            if (!ctx2.isIndicatorRendered || !ctx2.value)
-              return;
-            ctx2.indicatorRect = dom.getRectById(ctx2, ctx2.value);
-            if (ctx2.hasMeasuredRect)
-              return;
-            (0, import_dom_query2.nextTick)(() => {
-              ctx2.hasMeasuredRect = true;
-            });
-          });
-        },
         checkRenderedElements(ctx2) {
           ctx2.isIndicatorRendered = !!dom.getIndicatorEl(ctx2);
         },
-        clearMeasured(ctx2) {
-          ctx2.hasMeasuredRect = false;
-        },
         invokeOnChange(ctx2) {
           ctx2.onChange?.({ value: ctx2.value });
         },
@@ -245,7 +255,7 @@ function machine(userContext) {
         },
         setPrevSelectedTabs(ctx2) {
           if (ctx2.value != null) {
-            ctx2.previousValues = pushUnique(Array.from(ctx2.previousValues), ctx2.value);
+            ctx2.previousValues = pushUnique(ctx2.previousValues, ctx2.value);
           }
         },
         // if tab panel contains focusable elements, remove the tabindex attribute
@@ -261,13 +271,51 @@ function machine(userContext) {
               panel.setAttribute("tabindex", "0");
             }
           });
+        },
+        cleanupObserver(ctx2) {
+          ctx2.indicatorCleanup?.();
+        },
+        enableIndicatorTransition(ctx2) {
+          ctx2.canIndicatorTransition = true;
+        },
+        setIndicatorRect(ctx2, evt) {
+          const value = evt.id ?? ctx2.value;
+          if (!ctx2.isIndicatorRendered || !value)
+            return;
+          const tabEl = dom.getTriggerEl(ctx2, value);
+          if (!tabEl)
+            return;
+          ctx2.indicatorRect = dom.getRectById(ctx2, value);
+          (0, import_dom_query2.nextTick)(() => {
+            ctx2.canIndicatorTransition = false;
+          });
+        },
+        syncIndicatorRect(ctx2) {
+          ctx2.indicatorCleanup?.();
+          const value = ctx2.value;
+          if (!ctx2.isIndicatorRendered || !value)
+            return;
+          const tabEl = dom.getActiveTabEl(ctx2);
+          if (!tabEl)
+            return;
+          ctx2.indicatorCleanup = (0, import_element_rect.trackElementRect)(tabEl, {
+            getRect(el) {
+              return dom.getOffsetRect(el);
+            },
+            onChange(rect) {
+              ctx2.indicatorRect = dom.resolveRect(rect, ctx2.orientation);
+              (0, import_dom_query2.nextTick)(() => {
+                ctx2.canIndicatorTransition = false;
+              });
+            }
+          });
         }
       }
     }
   );
 }
 function pushUnique(arr, value) {
-  const newArr = arr.slice();
+  const newArr = Array.from(arr).slice();
   const index = newArr.indexOf(value);
   if (index > -1) {
     newArr.splice(index, 1);

package/dist/tabs.machine.mjs

@@ -1,7 +1,7 @@
 import {
   machine
-} from "./chunk-PH44XJ2S.mjs";
-import "./chunk-OUTOSCZW.mjs";
+} from "./chunk-HGL32F6R.mjs";
+import "./chunk-EU4R7SET.mjs";
 export {
   machine
 };

package/dist/tabs.types.d.ts

@@ -12,6 +12,13 @@ type ElementIds = Partial<{
     content: string;
     indicator: string;
 }>;
+type TriggerProps = {
+    value: string;
+    disabled?: boolean;
+};
+type ContentProps = {
+    value: string;
+};
 type PublicContext = DirectionProperty & CommonProperties & {
     /**
      * The ids of the elements in the tabs. Useful for composition.
@@ -84,9 +91,5 @@ type MachineState = {
 };
 type State = StateMachine.State<MachineContext, MachineState>;
 type Send = StateMachine.Send<StateMachine.AnyEventObject>;
-type TabProps = {
-    value: string;
-    disabled?: boolean;
-};
 
-export { MachineContext, MachineState, Send, State, TabProps, UserDefinedContext };
+export { ContentProps, MachineContext, MachineState, Send, State, TriggerProps, UserDefinedContext };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@zag-js/tabs",
-  "version": "0.7.0",
+  "version": "0.9.0",
   "description": "Core logic for the tabs widget implemented as a state machine",
   "keywords": [
     "js",
@@ -26,10 +26,11 @@
     "url": "https://github.com/chakra-ui/zag/issues"
   },
   "dependencies": {
-    "@zag-js/anatomy": "0.1.4",
+    "@zag-js/anatomy": "0.9.0",
     "@zag-js/dom-query": "0.1.4",
-    "@zag-js/dom-event": "0.6.0",
-    "@zag-js/tabbable": "0.1.1",
+    "@zag-js/dom-event": "0.8.0",
+    "@zag-js/element-rect": "0.8.0",
+    "@zag-js/tabbable": "0.8.0",
     "@zag-js/utils": "0.3.4",
     "@zag-js/core": "0.7.0",
     "@zag-js/types": "0.5.0"