@zag-js/tabs 0.1.11 → 0.1.12

package/dist/index.js

@@ -382,199 +382,202 @@ function connect(state, send, normalize) {
 var import_core = require("@zag-js/core");
 var { not } = import_core.guards;
 function machine(ctx) {
-  return (0, import_core.createMachine)({
-    initial: "unknown",
-    context: {
-      dir: "ltr",
-      orientation: "horizontal",
-      activationMode: "automatic",
-      value: null,
-      focusedValue: null,
-      previousValues: [],
-      indicatorRect: { left: "0px", top: "0px", width: "0px", height: "0px" },
-      hasMeasuredRect: false,
-      isIndicatorRendered: false,
-      loop: true,
-      messages: {},
-      ...ctx
-    },
-    computed: {
-      isHorizontal: (ctx2) => ctx2.orientation === "horizontal",
-      isVertical: (ctx2) => ctx2.orientation === "vertical"
-    },
-    created: ["setPrevSelectedTabs"],
-    watch: {
-      focusedValue: "invokeOnFocus",
-      value: ["invokeOnChange", "setPrevSelectedTabs", "setIndicatorRect", "setContentTabIndex"],
-      dir: ["clearMeasured", "setIndicatorRect"]
-    },
-    on: {
-      SET_VALUE: {
-        actions: "setValue"
+  return (0, import_core.createMachine)(
+    {
+      initial: "unknown",
+      context: {
+        dir: "ltr",
+        orientation: "horizontal",
+        activationMode: "automatic",
+        value: null,
+        focusedValue: null,
+        previousValues: [],
+        indicatorRect: { left: "0px", top: "0px", width: "0px", height: "0px" },
+        hasMeasuredRect: false,
+        isIndicatorRendered: false,
+        loop: true,
+        messages: {},
+        ...ctx
       },
-      DELETE: {
-        actions: "deleteValue"
-      }
-    },
-    states: {
-      unknown: {
-        on: {
-          SETUP: {
-            target: "idle",
-            actions: ["checkRenderedElements", "setIndicatorRect", "setContentTabIndex"]
-          }
-        }
+      computed: {
+        isHorizontal: (ctx2) => ctx2.orientation === "horizontal",
+        isVertical: (ctx2) => ctx2.orientation === "vertical"
       },
-      idle: {
-        on: {
-          TAB_FOCUS: {
-            guard: "selectOnFocus",
-            target: "focused",
-            actions: ["setFocusedValue", "setValue"]
-          },
-          TAB_CLICK: {
-            target: "focused",
-            actions: ["setFocusedValue", "setValue"]
-          }
+      created: ["setPrevSelectedTabs"],
+      watch: {
+        focusedValue: "invokeOnFocus",
+        value: ["invokeOnChange", "setPrevSelectedTabs", "setIndicatorRect", "setContentTabIndex"],
+        dir: ["clearMeasured", "setIndicatorRect"]
+      },
+      on: {
+        SET_VALUE: {
+          actions: "setValue"
+        },
+        DELETE: {
+          actions: "deleteValue"
         }
       },
-      focused: {
-        on: {
-          TAB_CLICK: {
-            target: "focused",
-            actions: ["setFocusedValue", "setValue"]
-          },
-          ARROW_LEFT: {
-            guard: "isHorizontal",
-            actions: "focusPrevTab"
-          },
-          ARROW_RIGHT: {
-            guard: "isHorizontal",
-            actions: "focusNextTab"
-          },
-          ARROW_UP: {
-            guard: "isVertical",
-            actions: "focusPrevTab"
-          },
-          ARROW_DOWN: {
-            guard: "isVertical",
-            actions: "focusNextTab"
-          },
-          HOME: {
-            actions: "focusFirstTab"
-          },
-          END: {
-            actions: "focusLastTab"
-          },
-          ENTER: {
-            guard: not("selectOnFocus"),
-            actions: "setValue"
-          },
-          TAB_FOCUS: [
-            {
+      states: {
+        unknown: {
+          on: {
+            SETUP: {
+              target: "idle",
+              actions: ["checkRenderedElements", "setIndicatorRect", "setContentTabIndex"]
+            }
+          }
+        },
+        idle: {
+          on: {
+            TAB_FOCUS: {
               guard: "selectOnFocus",
+              target: "focused",
+              actions: ["setFocusedValue", "setValue"]
+            },
+            TAB_CLICK: {
+              target: "focused",
               actions: ["setFocusedValue", "setValue"]
+            }
+          }
+        },
+        focused: {
+          on: {
+            TAB_CLICK: {
+              target: "focused",
+              actions: ["setFocusedValue", "setValue"]
+            },
+            ARROW_LEFT: {
+              guard: "isHorizontal",
+              actions: "focusPrevTab"
             },
-            { actions: "setFocusedValue" }
-          ],
-          TAB_BLUR: {
-            target: "idle",
-            actions: "clearFocusedValue"
+            ARROW_RIGHT: {
+              guard: "isHorizontal",
+              actions: "focusNextTab"
+            },
+            ARROW_UP: {
+              guard: "isVertical",
+              actions: "focusPrevTab"
+            },
+            ARROW_DOWN: {
+              guard: "isVertical",
+              actions: "focusNextTab"
+            },
+            HOME: {
+              actions: "focusFirstTab"
+            },
+            END: {
+              actions: "focusLastTab"
+            },
+            ENTER: {
+              guard: not("selectOnFocus"),
+              actions: "setValue"
+            },
+            TAB_FOCUS: [
+              {
+                guard: "selectOnFocus",
+                actions: ["setFocusedValue", "setValue"]
+              },
+              { actions: "setFocusedValue" }
+            ],
+            TAB_BLUR: {
+              target: "idle",
+              actions: "clearFocusedValue"
+            }
           }
         }
       }
-    }
-  }, {
-    guards: {
-      isVertical: (ctx2) => ctx2.isVertical,
-      isHorizontal: (ctx2) => ctx2.isHorizontal,
-      selectOnFocus: (ctx2) => ctx2.activationMode === "automatic"
     },
-    actions: {
-      setFocusedValue(ctx2, evt) {
-        ctx2.focusedValue = evt.value;
-      },
-      clearFocusedValue(ctx2) {
-        ctx2.focusedValue = null;
-      },
-      setValue(ctx2, evt) {
-        ctx2.value = evt.value;
+    {
+      guards: {
+        isVertical: (ctx2) => ctx2.isVertical,
+        isHorizontal: (ctx2) => ctx2.isHorizontal,
+        selectOnFocus: (ctx2) => ctx2.activationMode === "automatic"
       },
-      invokeOnDelete(ctx2, evt) {
-        var _a;
-        (_a = ctx2.onDelete) == null ? void 0 : _a.call(ctx2, { value: evt.value });
-      },
-      focusFirstTab(ctx2) {
-        raf(() => {
-          var _a;
-          return (_a = dom.getFirstEl(ctx2)) == null ? void 0 : _a.focus();
-        });
-      },
-      focusLastTab(ctx2) {
-        raf(() => {
+      actions: {
+        setFocusedValue(ctx2, evt) {
+          ctx2.focusedValue = evt.value;
+        },
+        clearFocusedValue(ctx2) {
+          ctx2.focusedValue = null;
+        },
+        setValue(ctx2, evt) {
+          ctx2.value = evt.value;
+        },
+        invokeOnDelete(ctx2, evt) {
           var _a;
-          return (_a = dom.getLastEl(ctx2)) == null ? void 0 : _a.focus();
-        });
-      },
-      focusNextTab(ctx2) {
-        if (!ctx2.focusedValue)
-          return;
-        const next = dom.getNextEl(ctx2, ctx2.focusedValue);
-        raf(() => next == null ? void 0 : next.focus());
-      },
-      focusPrevTab(ctx2) {
-        if (!ctx2.focusedValue)
-          return;
-        const prev = dom.getPrevEl(ctx2, ctx2.focusedValue);
-        raf(() => prev == null ? void 0 : prev.focus());
-      },
-      setIndicatorRect(ctx2) {
-        nextTick(() => {
-          if (!ctx2.isIndicatorRendered || !ctx2.value)
+          (_a = ctx2.onDelete) == null ? void 0 : _a.call(ctx2, { value: evt.value });
+        },
+        focusFirstTab(ctx2) {
+          raf(() => {
+            var _a;
+            return (_a = dom.getFirstEl(ctx2)) == null ? void 0 : _a.focus();
+          });
+        },
+        focusLastTab(ctx2) {
+          raf(() => {
+            var _a;
+            return (_a = dom.getLastEl(ctx2)) == null ? void 0 : _a.focus();
+          });
+        },
+        focusNextTab(ctx2) {
+          if (!ctx2.focusedValue)
             return;
-          ctx2.indicatorRect = dom.getRectById(ctx2, ctx2.value);
-          if (ctx2.hasMeasuredRect)
+          const next = dom.getNextEl(ctx2, ctx2.focusedValue);
+          raf(() => next == null ? void 0 : next.focus());
+        },
+        focusPrevTab(ctx2) {
+          if (!ctx2.focusedValue)
             return;
+          const prev = dom.getPrevEl(ctx2, ctx2.focusedValue);
+          raf(() => prev == null ? void 0 : prev.focus());
+        },
+        setIndicatorRect(ctx2) {
           nextTick(() => {
-            ctx2.hasMeasuredRect = true;
+            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) {
-        var _a;
-        (_a = ctx2.onChange) == null ? void 0 : _a.call(ctx2, { value: ctx2.value });
-      },
-      invokeOnFocus(ctx2) {
-        var _a;
-        (_a = ctx2.onFocus) == null ? void 0 : _a.call(ctx2, { value: ctx2.focusedValue });
-      },
-      setPrevSelectedTabs(ctx2) {
-        if (ctx2.value != null) {
-          const newSelected = Array.from(ctx2.previousValues).concat(ctx2.value);
-          ctx2.previousValues = Array.from(new Set(newSelected));
-        }
-      },
-      setContentTabIndex(ctx2) {
-        raf(() => {
-          const panel = dom.getActiveContentEl(ctx2);
-          if (!panel)
-            return;
-          const focusables = getFocusables(panel);
-          if (focusables.length > 0) {
-            panel.removeAttribute("tabindex");
-          } else {
-            panel.setAttribute("tabindex", "0");
+        },
+        checkRenderedElements(ctx2) {
+          ctx2.isIndicatorRendered = !!dom.getIndicatorEl(ctx2);
+        },
+        clearMeasured(ctx2) {
+          ctx2.hasMeasuredRect = false;
+        },
+        invokeOnChange(ctx2) {
+          var _a;
+          (_a = ctx2.onChange) == null ? void 0 : _a.call(ctx2, { value: ctx2.value });
+        },
+        invokeOnFocus(ctx2) {
+          var _a;
+          (_a = ctx2.onFocus) == null ? void 0 : _a.call(ctx2, { value: ctx2.focusedValue });
+        },
+        setPrevSelectedTabs(ctx2) {
+          if (ctx2.value != null) {
+            const newSelected = Array.from(ctx2.previousValues).concat(ctx2.value);
+            ctx2.previousValues = Array.from(new Set(newSelected));
           }
-        });
+        },
+        setContentTabIndex(ctx2) {
+          raf(() => {
+            const panel = dom.getActiveContentEl(ctx2);
+            if (!panel)
+              return;
+            const focusables = getFocusables(panel);
+            if (focusables.length > 0) {
+              panel.removeAttribute("tabindex");
+            } else {
+              panel.setAttribute("tabindex", "0");
+            }
+          });
+        }
       }
     }
-  });
+  );
 }
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {

package/dist/index.mjs

@@ -355,199 +355,202 @@ function connect(state, send, normalize) {
 import { createMachine, guards } from "@zag-js/core";
 var { not } = guards;
 function machine(ctx) {
-  return createMachine({
-    initial: "unknown",
-    context: {
-      dir: "ltr",
-      orientation: "horizontal",
-      activationMode: "automatic",
-      value: null,
-      focusedValue: null,
-      previousValues: [],
-      indicatorRect: { left: "0px", top: "0px", width: "0px", height: "0px" },
-      hasMeasuredRect: false,
-      isIndicatorRendered: false,
-      loop: true,
-      messages: {},
-      ...ctx
-    },
-    computed: {
-      isHorizontal: (ctx2) => ctx2.orientation === "horizontal",
-      isVertical: (ctx2) => ctx2.orientation === "vertical"
-    },
-    created: ["setPrevSelectedTabs"],
-    watch: {
-      focusedValue: "invokeOnFocus",
-      value: ["invokeOnChange", "setPrevSelectedTabs", "setIndicatorRect", "setContentTabIndex"],
-      dir: ["clearMeasured", "setIndicatorRect"]
-    },
-    on: {
-      SET_VALUE: {
-        actions: "setValue"
+  return createMachine(
+    {
+      initial: "unknown",
+      context: {
+        dir: "ltr",
+        orientation: "horizontal",
+        activationMode: "automatic",
+        value: null,
+        focusedValue: null,
+        previousValues: [],
+        indicatorRect: { left: "0px", top: "0px", width: "0px", height: "0px" },
+        hasMeasuredRect: false,
+        isIndicatorRendered: false,
+        loop: true,
+        messages: {},
+        ...ctx
       },
-      DELETE: {
-        actions: "deleteValue"
-      }
-    },
-    states: {
-      unknown: {
-        on: {
-          SETUP: {
-            target: "idle",
-            actions: ["checkRenderedElements", "setIndicatorRect", "setContentTabIndex"]
-          }
-        }
+      computed: {
+        isHorizontal: (ctx2) => ctx2.orientation === "horizontal",
+        isVertical: (ctx2) => ctx2.orientation === "vertical"
       },
-      idle: {
-        on: {
-          TAB_FOCUS: {
-            guard: "selectOnFocus",
-            target: "focused",
-            actions: ["setFocusedValue", "setValue"]
-          },
-          TAB_CLICK: {
-            target: "focused",
-            actions: ["setFocusedValue", "setValue"]
-          }
+      created: ["setPrevSelectedTabs"],
+      watch: {
+        focusedValue: "invokeOnFocus",
+        value: ["invokeOnChange", "setPrevSelectedTabs", "setIndicatorRect", "setContentTabIndex"],
+        dir: ["clearMeasured", "setIndicatorRect"]
+      },
+      on: {
+        SET_VALUE: {
+          actions: "setValue"
+        },
+        DELETE: {
+          actions: "deleteValue"
         }
       },
-      focused: {
-        on: {
-          TAB_CLICK: {
-            target: "focused",
-            actions: ["setFocusedValue", "setValue"]
-          },
-          ARROW_LEFT: {
-            guard: "isHorizontal",
-            actions: "focusPrevTab"
-          },
-          ARROW_RIGHT: {
-            guard: "isHorizontal",
-            actions: "focusNextTab"
-          },
-          ARROW_UP: {
-            guard: "isVertical",
-            actions: "focusPrevTab"
-          },
-          ARROW_DOWN: {
-            guard: "isVertical",
-            actions: "focusNextTab"
-          },
-          HOME: {
-            actions: "focusFirstTab"
-          },
-          END: {
-            actions: "focusLastTab"
-          },
-          ENTER: {
-            guard: not("selectOnFocus"),
-            actions: "setValue"
-          },
-          TAB_FOCUS: [
-            {
+      states: {
+        unknown: {
+          on: {
+            SETUP: {
+              target: "idle",
+              actions: ["checkRenderedElements", "setIndicatorRect", "setContentTabIndex"]
+            }
+          }
+        },
+        idle: {
+          on: {
+            TAB_FOCUS: {
               guard: "selectOnFocus",
+              target: "focused",
+              actions: ["setFocusedValue", "setValue"]
+            },
+            TAB_CLICK: {
+              target: "focused",
               actions: ["setFocusedValue", "setValue"]
+            }
+          }
+        },
+        focused: {
+          on: {
+            TAB_CLICK: {
+              target: "focused",
+              actions: ["setFocusedValue", "setValue"]
+            },
+            ARROW_LEFT: {
+              guard: "isHorizontal",
+              actions: "focusPrevTab"
             },
-            { actions: "setFocusedValue" }
-          ],
-          TAB_BLUR: {
-            target: "idle",
-            actions: "clearFocusedValue"
+            ARROW_RIGHT: {
+              guard: "isHorizontal",
+              actions: "focusNextTab"
+            },
+            ARROW_UP: {
+              guard: "isVertical",
+              actions: "focusPrevTab"
+            },
+            ARROW_DOWN: {
+              guard: "isVertical",
+              actions: "focusNextTab"
+            },
+            HOME: {
+              actions: "focusFirstTab"
+            },
+            END: {
+              actions: "focusLastTab"
+            },
+            ENTER: {
+              guard: not("selectOnFocus"),
+              actions: "setValue"
+            },
+            TAB_FOCUS: [
+              {
+                guard: "selectOnFocus",
+                actions: ["setFocusedValue", "setValue"]
+              },
+              { actions: "setFocusedValue" }
+            ],
+            TAB_BLUR: {
+              target: "idle",
+              actions: "clearFocusedValue"
+            }
           }
         }
       }
-    }
-  }, {
-    guards: {
-      isVertical: (ctx2) => ctx2.isVertical,
-      isHorizontal: (ctx2) => ctx2.isHorizontal,
-      selectOnFocus: (ctx2) => ctx2.activationMode === "automatic"
     },
-    actions: {
-      setFocusedValue(ctx2, evt) {
-        ctx2.focusedValue = evt.value;
-      },
-      clearFocusedValue(ctx2) {
-        ctx2.focusedValue = null;
-      },
-      setValue(ctx2, evt) {
-        ctx2.value = evt.value;
+    {
+      guards: {
+        isVertical: (ctx2) => ctx2.isVertical,
+        isHorizontal: (ctx2) => ctx2.isHorizontal,
+        selectOnFocus: (ctx2) => ctx2.activationMode === "automatic"
       },
-      invokeOnDelete(ctx2, evt) {
-        var _a;
-        (_a = ctx2.onDelete) == null ? void 0 : _a.call(ctx2, { value: evt.value });
-      },
-      focusFirstTab(ctx2) {
-        raf(() => {
-          var _a;
-          return (_a = dom.getFirstEl(ctx2)) == null ? void 0 : _a.focus();
-        });
-      },
-      focusLastTab(ctx2) {
-        raf(() => {
+      actions: {
+        setFocusedValue(ctx2, evt) {
+          ctx2.focusedValue = evt.value;
+        },
+        clearFocusedValue(ctx2) {
+          ctx2.focusedValue = null;
+        },
+        setValue(ctx2, evt) {
+          ctx2.value = evt.value;
+        },
+        invokeOnDelete(ctx2, evt) {
           var _a;
-          return (_a = dom.getLastEl(ctx2)) == null ? void 0 : _a.focus();
-        });
-      },
-      focusNextTab(ctx2) {
-        if (!ctx2.focusedValue)
-          return;
-        const next = dom.getNextEl(ctx2, ctx2.focusedValue);
-        raf(() => next == null ? void 0 : next.focus());
-      },
-      focusPrevTab(ctx2) {
-        if (!ctx2.focusedValue)
-          return;
-        const prev = dom.getPrevEl(ctx2, ctx2.focusedValue);
-        raf(() => prev == null ? void 0 : prev.focus());
-      },
-      setIndicatorRect(ctx2) {
-        nextTick(() => {
-          if (!ctx2.isIndicatorRendered || !ctx2.value)
+          (_a = ctx2.onDelete) == null ? void 0 : _a.call(ctx2, { value: evt.value });
+        },
+        focusFirstTab(ctx2) {
+          raf(() => {
+            var _a;
+            return (_a = dom.getFirstEl(ctx2)) == null ? void 0 : _a.focus();
+          });
+        },
+        focusLastTab(ctx2) {
+          raf(() => {
+            var _a;
+            return (_a = dom.getLastEl(ctx2)) == null ? void 0 : _a.focus();
+          });
+        },
+        focusNextTab(ctx2) {
+          if (!ctx2.focusedValue)
             return;
-          ctx2.indicatorRect = dom.getRectById(ctx2, ctx2.value);
-          if (ctx2.hasMeasuredRect)
+          const next = dom.getNextEl(ctx2, ctx2.focusedValue);
+          raf(() => next == null ? void 0 : next.focus());
+        },
+        focusPrevTab(ctx2) {
+          if (!ctx2.focusedValue)
             return;
+          const prev = dom.getPrevEl(ctx2, ctx2.focusedValue);
+          raf(() => prev == null ? void 0 : prev.focus());
+        },
+        setIndicatorRect(ctx2) {
           nextTick(() => {
-            ctx2.hasMeasuredRect = true;
+            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) {
-        var _a;
-        (_a = ctx2.onChange) == null ? void 0 : _a.call(ctx2, { value: ctx2.value });
-      },
-      invokeOnFocus(ctx2) {
-        var _a;
-        (_a = ctx2.onFocus) == null ? void 0 : _a.call(ctx2, { value: ctx2.focusedValue });
-      },
-      setPrevSelectedTabs(ctx2) {
-        if (ctx2.value != null) {
-          const newSelected = Array.from(ctx2.previousValues).concat(ctx2.value);
-          ctx2.previousValues = Array.from(new Set(newSelected));
-        }
-      },
-      setContentTabIndex(ctx2) {
-        raf(() => {
-          const panel = dom.getActiveContentEl(ctx2);
-          if (!panel)
-            return;
-          const focusables = getFocusables(panel);
-          if (focusables.length > 0) {
-            panel.removeAttribute("tabindex");
-          } else {
-            panel.setAttribute("tabindex", "0");
+        },
+        checkRenderedElements(ctx2) {
+          ctx2.isIndicatorRendered = !!dom.getIndicatorEl(ctx2);
+        },
+        clearMeasured(ctx2) {
+          ctx2.hasMeasuredRect = false;
+        },
+        invokeOnChange(ctx2) {
+          var _a;
+          (_a = ctx2.onChange) == null ? void 0 : _a.call(ctx2, { value: ctx2.value });
+        },
+        invokeOnFocus(ctx2) {
+          var _a;
+          (_a = ctx2.onFocus) == null ? void 0 : _a.call(ctx2, { value: ctx2.focusedValue });
+        },
+        setPrevSelectedTabs(ctx2) {
+          if (ctx2.value != null) {
+            const newSelected = Array.from(ctx2.previousValues).concat(ctx2.value);
+            ctx2.previousValues = Array.from(new Set(newSelected));
           }
-        });
+        },
+        setContentTabIndex(ctx2) {
+          raf(() => {
+            const panel = dom.getActiveContentEl(ctx2);
+            if (!panel)
+              return;
+            const focusables = getFocusables(panel);
+            if (focusables.length > 0) {
+              panel.removeAttribute("tabindex");
+            } else {
+              panel.setAttribute("tabindex", "0");
+            }
+          });
+        }
       }
     }
-  });
+  );
 }
 export {
   connect,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@zag-js/tabs",
-  "version": "0.1.11",
+  "version": "0.1.12",
   "description": "Core logic for the tabs widget implemented as a state machine",
   "keywords": [
     "js",
@@ -30,10 +30,10 @@
   },
   "dependencies": {
     "@zag-js/core": "0.1.9",
-    "@zag-js/types": "0.2.3"
+    "@zag-js/types": "0.2.4"
   },
   "devDependencies": {
-    "@zag-js/dom-utils": "0.1.8",
+    "@zag-js/dom-utils": "0.1.10",
     "@zag-js/utils": "0.1.3"
   },
   "scripts": {