@zag-js/tabs 0.2.7 → 0.2.9

package/dist/{chunk-T4EOWSTO.mjs → chunk-3DBUWLYX.mjs}

@@ -3,7 +3,7 @@ import {
   isFrame,
   isHTMLElement,
   isVisible
-} from "./chunk-OIIQ7RFL.mjs";
+} from "./chunk-4CROPD6E.mjs";
 
 // src/tabs.machine.ts
 import { createMachine, guards } from "@zag-js/core";
@@ -73,7 +73,7 @@ function machine(userContext) {
   const ctx = compact(userContext);
   return createMachine(
     {
-      initial: "unknown",
+      initial: "idle",
       context: {
         dir: "ltr",
         orientation: "horizontal",
@@ -106,15 +106,8 @@ function machine(userContext) {
           actions: "clearValue"
         }
       },
+      entry: ["checkRenderedElements", "setIndicatorRect", "setContentTabIndex"],
       states: {
-        unknown: {
-          on: {
-            SETUP: {
-              target: "idle",
-              actions: ["checkRenderedElements", "setIndicatorRect", "setContentTabIndex"]
-            }
-          }
-        },
         idle: {
           on: {
             TAB_FOCUS: {
@@ -195,32 +188,25 @@ function machine(userContext) {
           ctx2.value = null;
         },
         invokeOnDelete(ctx2, evt) {
-          var _a;
-          (_a = ctx2.onDelete) == null ? void 0 : _a.call(ctx2, { value: evt.value });
+          ctx2.onDelete?.({ value: evt.value });
         },
         focusFirstTab(ctx2) {
-          raf(() => {
-            var _a;
-            return (_a = dom.getFirstEl(ctx2)) == null ? void 0 : _a.focus();
-          });
+          raf(() => dom.getFirstEl(ctx2)?.focus());
         },
         focusLastTab(ctx2) {
-          raf(() => {
-            var _a;
-            return (_a = dom.getLastEl(ctx2)) == null ? void 0 : _a.focus();
-          });
+          raf(() => dom.getLastEl(ctx2)?.focus());
         },
         focusNextTab(ctx2) {
           if (!ctx2.focusedValue)
             return;
           const next = dom.getNextEl(ctx2, ctx2.focusedValue);
-          raf(() => next == null ? void 0 : next.focus());
+          raf(() => next?.focus());
         },
         focusPrevTab(ctx2) {
           if (!ctx2.focusedValue)
             return;
           const prev = dom.getPrevEl(ctx2, ctx2.focusedValue);
-          raf(() => prev == null ? void 0 : prev.focus());
+          raf(() => prev?.focus());
         },
         setIndicatorRect(ctx2) {
           nextTick(() => {
@@ -241,12 +227,10 @@ function machine(userContext) {
           ctx2.hasMeasuredRect = false;
         },
         invokeOnChange(ctx2) {
-          var _a;
-          (_a = ctx2.onChange) == null ? void 0 : _a.call(ctx2, { value: ctx2.value });
+          ctx2.onChange?.({ value: ctx2.value });
         },
         invokeOnFocus(ctx2) {
-          var _a;
-          (_a = ctx2.onFocus) == null ? void 0 : _a.call(ctx2, { value: ctx2.focusedValue });
+          ctx2.onFocus?.({ value: ctx2.focusedValue });
         },
         setPrevSelectedTabs(ctx2) {
           if (ctx2.value != null) {

package/dist/{chunk-OIIQ7RFL.mjs → chunk-4CROPD6E.mjs}

@@ -7,30 +7,23 @@ function isDocument(el) {
   return el.nodeType === Node.DOCUMENT_NODE;
 }
 function isWindow(value) {
-  return (value == null ? void 0 : value.toString()) === "[object Window]";
+  return value?.toString() === "[object Window]";
 }
 function isFrame(element) {
   return element.localName === "iframe";
 }
 function getDocument(el) {
-  var _a;
   if (isWindow(el))
     return el.document;
   if (isDocument(el))
     return el;
-  return (_a = el == null ? void 0 : el.ownerDocument) != null ? _a : document;
+  return el?.ownerDocument ?? document;
 }
 function defineDomHelpers(helpers) {
   const dom2 = {
-    getRootNode: (ctx) => {
-      var _a, _b;
-      return (_b = (_a = ctx.getRootNode) == null ? void 0 : _a.call(ctx)) != null ? _b : document;
-    },
+    getRootNode: (ctx) => ctx.getRootNode?.() ?? document,
     getDoc: (ctx) => getDocument(dom2.getRootNode(ctx)),
-    getWin: (ctx) => {
-      var _a;
-      return (_a = dom2.getDoc(ctx).defaultView) != null ? _a : window;
-    },
+    getWin: (ctx) => dom2.getDoc(ctx).defaultView ?? window,
     getActiveElement: (ctx) => dom2.getDoc(ctx).activeElement,
     getById: (ctx, id) => dom2.getRootNode(ctx).getElementById(id)
   };
@@ -40,7 +33,7 @@ function defineDomHelpers(helpers) {
   };
 }
 function isHTMLElement(v) {
-  return typeof v === "object" && (v == null ? void 0 : v.nodeType) === Node.ELEMENT_NODE && typeof (v == null ? void 0 : v.nodeName) === "string";
+  return typeof v === "object" && v?.nodeType === Node.ELEMENT_NODE && typeof v?.nodeName === "string";
 }
 function isVisible(el) {
   if (!isHTMLElement(el))
@@ -50,8 +43,7 @@ function isVisible(el) {
 
 // ../../utilities/dom/src/nodelist.ts
 function queryAll(root, selector) {
-  var _a;
-  return Array.from((_a = root == null ? void 0 : root.querySelectorAll(selector)) != null ? _a : []);
+  return Array.from(root?.querySelectorAll(selector) ?? []);
 }
 function itemById(v, id) {
   return v.find((node) => node.id === id);
@@ -75,26 +67,11 @@ function prevById(v, id, loop = true) {
 
 // src/tabs.dom.ts
 var dom = defineDomHelpers({
-  getRootId: (ctx) => {
-    var _a, _b;
-    return (_b = (_a = ctx.ids) == null ? void 0 : _a.root) != null ? _b : `tabs:${ctx.id}`;
-  },
-  getTablistId: (ctx) => {
-    var _a, _b;
-    return (_b = (_a = ctx.ids) == null ? void 0 : _a.tablist) != null ? _b : `tabs:${ctx.id}:list`;
-  },
-  getContentId: (ctx, id) => {
-    var _a, _b;
-    return (_b = (_a = ctx.ids) == null ? void 0 : _a.content) != null ? _b : `tabs:${ctx.id}:content-${id}`;
-  },
-  getContentGroupId: (ctx) => {
-    var _a, _b;
-    return (_b = (_a = ctx.ids) == null ? void 0 : _a.contentGroup) != null ? _b : `tabs:${ctx.id}:content-group`;
-  },
-  getTriggerId: (ctx, id) => {
-    var _a, _b;
-    return (_b = (_a = ctx.ids) == null ? void 0 : _a.trigger) != null ? _b : `tabs:${ctx.id}:trigger-${id}`;
-  },
+  getRootId: (ctx) => ctx.ids?.root ?? `tabs:${ctx.id}`,
+  getTablistId: (ctx) => ctx.ids?.tablist ?? `tabs:${ctx.id}:list`,
+  getContentId: (ctx, id) => ctx.ids?.content ?? `tabs:${ctx.id}:content-${id}`,
+  getContentGroupId: (ctx) => ctx.ids?.contentGroup ?? `tabs:${ctx.id}:content-group`,
+  getTriggerId: (ctx, id) => ctx.ids?.trigger ?? `tabs:${ctx.id}:trigger-${id}`,
   getIndicatorId: (ctx) => `tabs:${ctx.id}:indicator`,
   getTablistEl: (ctx) => dom.getById(ctx, dom.getTablistId(ctx)),
   getContentEl: (ctx, id) => dom.getById(ctx, dom.getContentId(ctx, id)),
@@ -116,14 +93,13 @@ var dom = defineDomHelpers({
     return dom.getById(ctx, id);
   },
   getRectById: (ctx, id) => {
-    var _a;
     const empty = {
       offsetLeft: 0,
       offsetTop: 0,
       offsetWidth: 0,
       offsetHeight: 0
     };
-    const tab = (_a = itemById(dom.getElements(ctx), dom.getTriggerId(ctx, id))) != null ? _a : empty;
+    const tab = itemById(dom.getElements(ctx), dom.getTriggerId(ctx, id)) ?? empty;
     if (ctx.isVertical) {
       return {
         top: `${tab.offsetTop}px`,

package/dist/{chunk-B2NPUA5Z.mjs → chunk-IVTIBLCN.mjs}

@@ -3,7 +3,7 @@ import {
 } from "./chunk-S2KW2DT4.mjs";
 import {
   dom
-} from "./chunk-OIIQ7RFL.mjs";
+} from "./chunk-4CROPD6E.mjs";
 
 // ../../utilities/dom/src/attrs.ts
 var dataAttr = (guard) => {
@@ -13,9 +13,8 @@ var dataAttr = (guard) => {
 // ../../utilities/dom/src/platform.ts
 var isDom = () => typeof window !== "undefined";
 function getPlatform() {
-  var _a;
   const agent = navigator.userAgentData;
-  return (_a = agent == null ? void 0 : agent.platform) != null ? _a : navigator.platform;
+  return agent?.platform ?? navigator.platform;
 }
 var pt = (v) => isDom() && v.test(getPlatform());
 var vn = (v) => isDom() && v.test(navigator.vendor);
@@ -37,10 +36,9 @@ var sameKeyMap = {
   Right: "ArrowRight"
 };
 function getEventKey(event, options = {}) {
-  var _a;
   const { dir = "ltr", orientation = "horizontal" } = options;
   let { key } = event;
-  key = (_a = sameKeyMap[key]) != null ? _a : key;
+  key = sameKeyMap[key] ?? key;
   const isRtl = dir === "rtl" && orientation === "horizontal";
   if (isRtl && key in rtlKeyMap) {
     key = rtlKeyMap[key];
@@ -132,7 +130,7 @@ function connect(state, send, normalize) {
         },
         onBlur(event) {
           const target = event.relatedTarget;
-          if ((target == null ? void 0 : target.getAttribute("role")) !== "tab") {
+          if (target?.getAttribute("role") !== "tab") {
             send({ type: "TAB_BLUR" });
           }
         },

package/dist/index.js

@@ -56,9 +56,8 @@ function compact(obj) {
 // ../../utilities/dom/src/platform.ts
 var isDom = () => typeof window !== "undefined";
 function getPlatform() {
-  var _a;
   const agent = navigator.userAgentData;
-  return (_a = agent == null ? void 0 : agent.platform) != null ? _a : navigator.platform;
+  return agent?.platform ?? navigator.platform;
 }
 var pt = (v) => isDom() && v.test(getPlatform());
 var vn = (v) => isDom() && v.test(navigator.vendor);
@@ -70,30 +69,23 @@ function isDocument(el) {
   return el.nodeType === Node.DOCUMENT_NODE;
 }
 function isWindow(value) {
-  return (value == null ? void 0 : value.toString()) === "[object Window]";
+  return value?.toString() === "[object Window]";
 }
 function isFrame(element) {
   return element.localName === "iframe";
 }
 function getDocument(el) {
-  var _a;
   if (isWindow(el))
     return el.document;
   if (isDocument(el))
     return el;
-  return (_a = el == null ? void 0 : el.ownerDocument) != null ? _a : document;
+  return el?.ownerDocument ?? document;
 }
 function defineDomHelpers(helpers) {
   const dom2 = {
-    getRootNode: (ctx) => {
-      var _a, _b;
-      return (_b = (_a = ctx.getRootNode) == null ? void 0 : _a.call(ctx)) != null ? _b : document;
-    },
+    getRootNode: (ctx) => ctx.getRootNode?.() ?? document,
     getDoc: (ctx) => getDocument(dom2.getRootNode(ctx)),
-    getWin: (ctx) => {
-      var _a;
-      return (_a = dom2.getDoc(ctx).defaultView) != null ? _a : window;
-    },
+    getWin: (ctx) => dom2.getDoc(ctx).defaultView ?? window,
     getActiveElement: (ctx) => dom2.getDoc(ctx).activeElement,
     getById: (ctx, id) => dom2.getRootNode(ctx).getElementById(id)
   };
@@ -103,7 +95,7 @@ function defineDomHelpers(helpers) {
   };
 }
 function isHTMLElement(v) {
-  return typeof v === "object" && (v == null ? void 0 : v.nodeType) === Node.ELEMENT_NODE && typeof (v == null ? void 0 : v.nodeName) === "string";
+  return typeof v === "object" && v?.nodeType === Node.ELEMENT_NODE && typeof v?.nodeName === "string";
 }
 function isVisible(el) {
   if (!isHTMLElement(el))
@@ -151,10 +143,9 @@ var sameKeyMap = {
   Right: "ArrowRight"
 };
 function getEventKey(event, options = {}) {
-  var _a;
   const { dir = "ltr", orientation = "horizontal" } = options;
   let { key } = event;
-  key = (_a = sameKeyMap[key]) != null ? _a : key;
+  key = sameKeyMap[key] ?? key;
   const isRtl = dir === "rtl" && orientation === "horizontal";
   if (isRtl && key in rtlKeyMap) {
     key = rtlKeyMap[key];
@@ -185,8 +176,7 @@ function raf(fn) {
 
 // ../../utilities/dom/src/nodelist.ts
 function queryAll(root, selector) {
-  var _a;
-  return Array.from((_a = root == null ? void 0 : root.querySelectorAll(selector)) != null ? _a : []);
+  return Array.from(root?.querySelectorAll(selector) ?? []);
 }
 function itemById(v, id) {
   return v.find((node) => node.id === id);
@@ -210,26 +200,11 @@ function prevById(v, id, loop = true) {
 
 // src/tabs.dom.ts
 var dom = defineDomHelpers({
-  getRootId: (ctx) => {
-    var _a, _b;
-    return (_b = (_a = ctx.ids) == null ? void 0 : _a.root) != null ? _b : `tabs:${ctx.id}`;
-  },
-  getTablistId: (ctx) => {
-    var _a, _b;
-    return (_b = (_a = ctx.ids) == null ? void 0 : _a.tablist) != null ? _b : `tabs:${ctx.id}:list`;
-  },
-  getContentId: (ctx, id) => {
-    var _a, _b;
-    return (_b = (_a = ctx.ids) == null ? void 0 : _a.content) != null ? _b : `tabs:${ctx.id}:content-${id}`;
-  },
-  getContentGroupId: (ctx) => {
-    var _a, _b;
-    return (_b = (_a = ctx.ids) == null ? void 0 : _a.contentGroup) != null ? _b : `tabs:${ctx.id}:content-group`;
-  },
-  getTriggerId: (ctx, id) => {
-    var _a, _b;
-    return (_b = (_a = ctx.ids) == null ? void 0 : _a.trigger) != null ? _b : `tabs:${ctx.id}:trigger-${id}`;
-  },
+  getRootId: (ctx) => ctx.ids?.root ?? `tabs:${ctx.id}`,
+  getTablistId: (ctx) => ctx.ids?.tablist ?? `tabs:${ctx.id}:list`,
+  getContentId: (ctx, id) => ctx.ids?.content ?? `tabs:${ctx.id}:content-${id}`,
+  getContentGroupId: (ctx) => ctx.ids?.contentGroup ?? `tabs:${ctx.id}:content-group`,
+  getTriggerId: (ctx, id) => ctx.ids?.trigger ?? `tabs:${ctx.id}:trigger-${id}`,
   getIndicatorId: (ctx) => `tabs:${ctx.id}:indicator`,
   getTablistEl: (ctx) => dom.getById(ctx, dom.getTablistId(ctx)),
   getContentEl: (ctx, id) => dom.getById(ctx, dom.getContentId(ctx, id)),
@@ -251,14 +226,13 @@ var dom = defineDomHelpers({
     return dom.getById(ctx, id);
   },
   getRectById: (ctx, id) => {
-    var _a;
     const empty = {
       offsetLeft: 0,
       offsetTop: 0,
       offsetWidth: 0,
       offsetHeight: 0
     };
-    const tab = (_a = itemById(dom.getElements(ctx), dom.getTriggerId(ctx, id))) != null ? _a : empty;
+    const tab = itemById(dom.getElements(ctx), dom.getTriggerId(ctx, id)) ?? empty;
     if (ctx.isVertical) {
       return {
         top: `${tab.offsetTop}px`,
@@ -356,7 +330,7 @@ function connect(state, send, normalize) {
         },
         onBlur(event) {
           const target = event.relatedTarget;
-          if ((target == null ? void 0 : target.getAttribute("role")) !== "tab") {
+          if (target?.getAttribute("role") !== "tab") {
             send({ type: "TAB_BLUR" });
           }
         },
@@ -412,7 +386,7 @@ function machine(userContext) {
   const ctx = compact(userContext);
   return (0, import_core.createMachine)(
     {
-      initial: "unknown",
+      initial: "idle",
       context: {
         dir: "ltr",
         orientation: "horizontal",
@@ -445,15 +419,8 @@ function machine(userContext) {
           actions: "clearValue"
         }
       },
+      entry: ["checkRenderedElements", "setIndicatorRect", "setContentTabIndex"],
       states: {
-        unknown: {
-          on: {
-            SETUP: {
-              target: "idle",
-              actions: ["checkRenderedElements", "setIndicatorRect", "setContentTabIndex"]
-            }
-          }
-        },
         idle: {
           on: {
             TAB_FOCUS: {
@@ -534,32 +501,25 @@ function machine(userContext) {
           ctx2.value = null;
         },
         invokeOnDelete(ctx2, evt) {
-          var _a;
-          (_a = ctx2.onDelete) == null ? void 0 : _a.call(ctx2, { value: evt.value });
+          ctx2.onDelete?.({ value: evt.value });
         },
         focusFirstTab(ctx2) {
-          raf(() => {
-            var _a;
-            return (_a = dom.getFirstEl(ctx2)) == null ? void 0 : _a.focus();
-          });
+          raf(() => dom.getFirstEl(ctx2)?.focus());
         },
         focusLastTab(ctx2) {
-          raf(() => {
-            var _a;
-            return (_a = dom.getLastEl(ctx2)) == null ? void 0 : _a.focus();
-          });
+          raf(() => dom.getLastEl(ctx2)?.focus());
         },
         focusNextTab(ctx2) {
           if (!ctx2.focusedValue)
             return;
           const next = dom.getNextEl(ctx2, ctx2.focusedValue);
-          raf(() => next == null ? void 0 : next.focus());
+          raf(() => next?.focus());
         },
         focusPrevTab(ctx2) {
           if (!ctx2.focusedValue)
             return;
           const prev = dom.getPrevEl(ctx2, ctx2.focusedValue);
-          raf(() => prev == null ? void 0 : prev.focus());
+          raf(() => prev?.focus());
         },
         setIndicatorRect(ctx2) {
           nextTick(() => {
@@ -580,12 +540,10 @@ function machine(userContext) {
           ctx2.hasMeasuredRect = false;
         },
         invokeOnChange(ctx2) {
-          var _a;
-          (_a = ctx2.onChange) == null ? void 0 : _a.call(ctx2, { value: ctx2.value });
+          ctx2.onChange?.({ value: ctx2.value });
         },
         invokeOnFocus(ctx2) {
-          var _a;
-          (_a = ctx2.onFocus) == null ? void 0 : _a.call(ctx2, { value: ctx2.focusedValue });
+          ctx2.onFocus?.({ value: ctx2.focusedValue });
         },
         setPrevSelectedTabs(ctx2) {
           if (ctx2.value != null) {

package/dist/index.mjs

@@ -1,13 +1,13 @@
 import {
   connect
-} from "./chunk-B2NPUA5Z.mjs";
+} from "./chunk-IVTIBLCN.mjs";
 import {
   anatomy
 } from "./chunk-S2KW2DT4.mjs";
 import {
   machine
-} from "./chunk-T4EOWSTO.mjs";
-import "./chunk-OIIQ7RFL.mjs";
+} from "./chunk-3DBUWLYX.mjs";
+import "./chunk-4CROPD6E.mjs";
 export {
   anatomy,
   connect,

package/dist/tabs.connect.js

@@ -36,9 +36,8 @@ var last = (v) => v[v.length - 1];
 // ../../utilities/dom/src/platform.ts
 var isDom = () => typeof window !== "undefined";
 function getPlatform() {
-  var _a;
   const agent = navigator.userAgentData;
-  return (_a = agent == null ? void 0 : agent.platform) != null ? _a : navigator.platform;
+  return agent?.platform ?? navigator.platform;
 }
 var pt = (v) => isDom() && v.test(getPlatform());
 var vn = (v) => isDom() && v.test(navigator.vendor);
@@ -50,27 +49,20 @@ function isDocument(el) {
   return el.nodeType === Node.DOCUMENT_NODE;
 }
 function isWindow(value) {
-  return (value == null ? void 0 : value.toString()) === "[object Window]";
+  return value?.toString() === "[object Window]";
 }
 function getDocument(el) {
-  var _a;
   if (isWindow(el))
     return el.document;
   if (isDocument(el))
     return el;
-  return (_a = el == null ? void 0 : el.ownerDocument) != null ? _a : document;
+  return el?.ownerDocument ?? document;
 }
 function defineDomHelpers(helpers) {
   const dom2 = {
-    getRootNode: (ctx) => {
-      var _a, _b;
-      return (_b = (_a = ctx.getRootNode) == null ? void 0 : _a.call(ctx)) != null ? _b : document;
-    },
+    getRootNode: (ctx) => ctx.getRootNode?.() ?? document,
     getDoc: (ctx) => getDocument(dom2.getRootNode(ctx)),
-    getWin: (ctx) => {
-      var _a;
-      return (_a = dom2.getDoc(ctx).defaultView) != null ? _a : window;
-    },
+    getWin: (ctx) => dom2.getDoc(ctx).defaultView ?? window,
     getActiveElement: (ctx) => dom2.getDoc(ctx).activeElement,
     getById: (ctx, id) => dom2.getRootNode(ctx).getElementById(id)
   };
@@ -95,10 +87,9 @@ var sameKeyMap = {
   Right: "ArrowRight"
 };
 function getEventKey(event, options = {}) {
-  var _a;
   const { dir = "ltr", orientation = "horizontal" } = options;
   let { key } = event;
-  key = (_a = sameKeyMap[key]) != null ? _a : key;
+  key = sameKeyMap[key] ?? key;
   const isRtl = dir === "rtl" && orientation === "horizontal";
   if (isRtl && key in rtlKeyMap) {
     key = rtlKeyMap[key];
@@ -108,8 +99,7 @@ function getEventKey(event, options = {}) {
 
 // ../../utilities/dom/src/nodelist.ts
 function queryAll(root, selector) {
-  var _a;
-  return Array.from((_a = root == null ? void 0 : root.querySelectorAll(selector)) != null ? _a : []);
+  return Array.from(root?.querySelectorAll(selector) ?? []);
 }
 function itemById(v, id) {
   return v.find((node) => node.id === id);
@@ -138,26 +128,11 @@ var parts = anatomy.build();
 
 // src/tabs.dom.ts
 var dom = defineDomHelpers({
-  getRootId: (ctx) => {
-    var _a, _b;
-    return (_b = (_a = ctx.ids) == null ? void 0 : _a.root) != null ? _b : `tabs:${ctx.id}`;
-  },
-  getTablistId: (ctx) => {
-    var _a, _b;
-    return (_b = (_a = ctx.ids) == null ? void 0 : _a.tablist) != null ? _b : `tabs:${ctx.id}:list`;
-  },
-  getContentId: (ctx, id) => {
-    var _a, _b;
-    return (_b = (_a = ctx.ids) == null ? void 0 : _a.content) != null ? _b : `tabs:${ctx.id}:content-${id}`;
-  },
-  getContentGroupId: (ctx) => {
-    var _a, _b;
-    return (_b = (_a = ctx.ids) == null ? void 0 : _a.contentGroup) != null ? _b : `tabs:${ctx.id}:content-group`;
-  },
-  getTriggerId: (ctx, id) => {
-    var _a, _b;
-    return (_b = (_a = ctx.ids) == null ? void 0 : _a.trigger) != null ? _b : `tabs:${ctx.id}:trigger-${id}`;
-  },
+  getRootId: (ctx) => ctx.ids?.root ?? `tabs:${ctx.id}`,
+  getTablistId: (ctx) => ctx.ids?.tablist ?? `tabs:${ctx.id}:list`,
+  getContentId: (ctx, id) => ctx.ids?.content ?? `tabs:${ctx.id}:content-${id}`,
+  getContentGroupId: (ctx) => ctx.ids?.contentGroup ?? `tabs:${ctx.id}:content-group`,
+  getTriggerId: (ctx, id) => ctx.ids?.trigger ?? `tabs:${ctx.id}:trigger-${id}`,
   getIndicatorId: (ctx) => `tabs:${ctx.id}:indicator`,
   getTablistEl: (ctx) => dom.getById(ctx, dom.getTablistId(ctx)),
   getContentEl: (ctx, id) => dom.getById(ctx, dom.getContentId(ctx, id)),
@@ -179,14 +154,13 @@ var dom = defineDomHelpers({
     return dom.getById(ctx, id);
   },
   getRectById: (ctx, id) => {
-    var _a;
     const empty = {
       offsetLeft: 0,
       offsetTop: 0,
       offsetWidth: 0,
       offsetHeight: 0
     };
-    const tab = (_a = itemById(dom.getElements(ctx), dom.getTriggerId(ctx, id))) != null ? _a : empty;
+    const tab = itemById(dom.getElements(ctx), dom.getTriggerId(ctx, id)) ?? empty;
     if (ctx.isVertical) {
       return {
         top: `${tab.offsetTop}px`,
@@ -284,7 +258,7 @@ function connect(state, send, normalize) {
         },
         onBlur(event) {
           const target = event.relatedTarget;
-          if ((target == null ? void 0 : target.getAttribute("role")) !== "tab") {
+          if (target?.getAttribute("role") !== "tab") {
             send({ type: "TAB_BLUR" });
           }
         },

package/dist/tabs.connect.mjs

@@ -1,8 +1,8 @@
 import {
   connect
-} from "./chunk-B2NPUA5Z.mjs";
+} from "./chunk-IVTIBLCN.mjs";
 import "./chunk-S2KW2DT4.mjs";
-import "./chunk-OIIQ7RFL.mjs";
+import "./chunk-4CROPD6E.mjs";
 export {
   connect
 };

package/dist/tabs.dom.js

@@ -33,27 +33,20 @@ function isDocument(el) {
   return el.nodeType === Node.DOCUMENT_NODE;
 }
 function isWindow(value) {
-  return (value == null ? void 0 : value.toString()) === "[object Window]";
+  return value?.toString() === "[object Window]";
 }
 function getDocument(el) {
-  var _a;
   if (isWindow(el))
     return el.document;
   if (isDocument(el))
     return el;
-  return (_a = el == null ? void 0 : el.ownerDocument) != null ? _a : document;
+  return el?.ownerDocument ?? document;
 }
 function defineDomHelpers(helpers) {
   const dom2 = {
-    getRootNode: (ctx) => {
-      var _a, _b;
-      return (_b = (_a = ctx.getRootNode) == null ? void 0 : _a.call(ctx)) != null ? _b : document;
-    },
+    getRootNode: (ctx) => ctx.getRootNode?.() ?? document,
     getDoc: (ctx) => getDocument(dom2.getRootNode(ctx)),
-    getWin: (ctx) => {
-      var _a;
-      return (_a = dom2.getDoc(ctx).defaultView) != null ? _a : window;
-    },
+    getWin: (ctx) => dom2.getDoc(ctx).defaultView ?? window,
     getActiveElement: (ctx) => dom2.getDoc(ctx).activeElement,
     getById: (ctx, id) => dom2.getRootNode(ctx).getElementById(id)
   };
@@ -65,8 +58,7 @@ function defineDomHelpers(helpers) {
 
 // ../../utilities/dom/src/nodelist.ts
 function queryAll(root, selector) {
-  var _a;
-  return Array.from((_a = root == null ? void 0 : root.querySelectorAll(selector)) != null ? _a : []);
+  return Array.from(root?.querySelectorAll(selector) ?? []);
 }
 function itemById(v, id) {
   return v.find((node) => node.id === id);
@@ -90,26 +82,11 @@ function prevById(v, id, loop = true) {
 
 // src/tabs.dom.ts
 var dom = defineDomHelpers({
-  getRootId: (ctx) => {
-    var _a, _b;
-    return (_b = (_a = ctx.ids) == null ? void 0 : _a.root) != null ? _b : `tabs:${ctx.id}`;
-  },
-  getTablistId: (ctx) => {
-    var _a, _b;
-    return (_b = (_a = ctx.ids) == null ? void 0 : _a.tablist) != null ? _b : `tabs:${ctx.id}:list`;
-  },
-  getContentId: (ctx, id) => {
-    var _a, _b;
-    return (_b = (_a = ctx.ids) == null ? void 0 : _a.content) != null ? _b : `tabs:${ctx.id}:content-${id}`;
-  },
-  getContentGroupId: (ctx) => {
-    var _a, _b;
-    return (_b = (_a = ctx.ids) == null ? void 0 : _a.contentGroup) != null ? _b : `tabs:${ctx.id}:content-group`;
-  },
-  getTriggerId: (ctx, id) => {
-    var _a, _b;
-    return (_b = (_a = ctx.ids) == null ? void 0 : _a.trigger) != null ? _b : `tabs:${ctx.id}:trigger-${id}`;
-  },
+  getRootId: (ctx) => ctx.ids?.root ?? `tabs:${ctx.id}`,
+  getTablistId: (ctx) => ctx.ids?.tablist ?? `tabs:${ctx.id}:list`,
+  getContentId: (ctx, id) => ctx.ids?.content ?? `tabs:${ctx.id}:content-${id}`,
+  getContentGroupId: (ctx) => ctx.ids?.contentGroup ?? `tabs:${ctx.id}:content-group`,
+  getTriggerId: (ctx, id) => ctx.ids?.trigger ?? `tabs:${ctx.id}:trigger-${id}`,
   getIndicatorId: (ctx) => `tabs:${ctx.id}:indicator`,
   getTablistEl: (ctx) => dom.getById(ctx, dom.getTablistId(ctx)),
   getContentEl: (ctx, id) => dom.getById(ctx, dom.getContentId(ctx, id)),
@@ -131,14 +108,13 @@ var dom = defineDomHelpers({
     return dom.getById(ctx, id);
   },
   getRectById: (ctx, id) => {
-    var _a;
     const empty = {
       offsetLeft: 0,
       offsetTop: 0,
       offsetWidth: 0,
       offsetHeight: 0
     };
-    const tab = (_a = itemById(dom.getElements(ctx), dom.getTriggerId(ctx, id))) != null ? _a : empty;
+    const tab = itemById(dom.getElements(ctx), dom.getTriggerId(ctx, id)) ?? empty;
     if (ctx.isVertical) {
       return {
         top: `${tab.offsetTop}px`,

package/dist/tabs.dom.mjs

@@ -1,6 +1,6 @@
 import {
   dom
-} from "./chunk-OIIQ7RFL.mjs";
+} from "./chunk-4CROPD6E.mjs";
 export {
   dom
 };

package/dist/tabs.machine.js

@@ -47,30 +47,23 @@ function isDocument(el) {
   return el.nodeType === Node.DOCUMENT_NODE;
 }
 function isWindow(value) {
-  return (value == null ? void 0 : value.toString()) === "[object Window]";
+  return value?.toString() === "[object Window]";
 }
 function isFrame(element) {
   return element.localName === "iframe";
 }
 function getDocument(el) {
-  var _a;
   if (isWindow(el))
     return el.document;
   if (isDocument(el))
     return el;
-  return (_a = el == null ? void 0 : el.ownerDocument) != null ? _a : document;
+  return el?.ownerDocument ?? document;
 }
 function defineDomHelpers(helpers) {
   const dom2 = {
-    getRootNode: (ctx) => {
-      var _a, _b;
-      return (_b = (_a = ctx.getRootNode) == null ? void 0 : _a.call(ctx)) != null ? _b : document;
-    },
+    getRootNode: (ctx) => ctx.getRootNode?.() ?? document,
     getDoc: (ctx) => getDocument(dom2.getRootNode(ctx)),
-    getWin: (ctx) => {
-      var _a;
-      return (_a = dom2.getDoc(ctx).defaultView) != null ? _a : window;
-    },
+    getWin: (ctx) => dom2.getDoc(ctx).defaultView ?? window,
     getActiveElement: (ctx) => dom2.getDoc(ctx).activeElement,
     getById: (ctx, id) => dom2.getRootNode(ctx).getElementById(id)
   };
@@ -80,7 +73,7 @@ function defineDomHelpers(helpers) {
   };
 }
 function isHTMLElement(v) {
-  return typeof v === "object" && (v == null ? void 0 : v.nodeType) === Node.ELEMENT_NODE && typeof (v == null ? void 0 : v.nodeName) === "string";
+  return typeof v === "object" && v?.nodeType === Node.ELEMENT_NODE && typeof v?.nodeName === "string";
 }
 function isVisible(el) {
   if (!isHTMLElement(el))
@@ -136,8 +129,7 @@ function raf(fn) {
 
 // ../../utilities/dom/src/nodelist.ts
 function queryAll(root, selector) {
-  var _a;
-  return Array.from((_a = root == null ? void 0 : root.querySelectorAll(selector)) != null ? _a : []);
+  return Array.from(root?.querySelectorAll(selector) ?? []);
 }
 function itemById(v, id) {
   return v.find((node) => node.id === id);
@@ -161,26 +153,11 @@ function prevById(v, id, loop = true) {
 
 // src/tabs.dom.ts
 var dom = defineDomHelpers({
-  getRootId: (ctx) => {
-    var _a, _b;
-    return (_b = (_a = ctx.ids) == null ? void 0 : _a.root) != null ? _b : `tabs:${ctx.id}`;
-  },
-  getTablistId: (ctx) => {
-    var _a, _b;
-    return (_b = (_a = ctx.ids) == null ? void 0 : _a.tablist) != null ? _b : `tabs:${ctx.id}:list`;
-  },
-  getContentId: (ctx, id) => {
-    var _a, _b;
-    return (_b = (_a = ctx.ids) == null ? void 0 : _a.content) != null ? _b : `tabs:${ctx.id}:content-${id}`;
-  },
-  getContentGroupId: (ctx) => {
-    var _a, _b;
-    return (_b = (_a = ctx.ids) == null ? void 0 : _a.contentGroup) != null ? _b : `tabs:${ctx.id}:content-group`;
-  },
-  getTriggerId: (ctx, id) => {
-    var _a, _b;
-    return (_b = (_a = ctx.ids) == null ? void 0 : _a.trigger) != null ? _b : `tabs:${ctx.id}:trigger-${id}`;
-  },
+  getRootId: (ctx) => ctx.ids?.root ?? `tabs:${ctx.id}`,
+  getTablistId: (ctx) => ctx.ids?.tablist ?? `tabs:${ctx.id}:list`,
+  getContentId: (ctx, id) => ctx.ids?.content ?? `tabs:${ctx.id}:content-${id}`,
+  getContentGroupId: (ctx) => ctx.ids?.contentGroup ?? `tabs:${ctx.id}:content-group`,
+  getTriggerId: (ctx, id) => ctx.ids?.trigger ?? `tabs:${ctx.id}:trigger-${id}`,
   getIndicatorId: (ctx) => `tabs:${ctx.id}:indicator`,
   getTablistEl: (ctx) => dom.getById(ctx, dom.getTablistId(ctx)),
   getContentEl: (ctx, id) => dom.getById(ctx, dom.getContentId(ctx, id)),
@@ -202,14 +179,13 @@ var dom = defineDomHelpers({
     return dom.getById(ctx, id);
   },
   getRectById: (ctx, id) => {
-    var _a;
     const empty = {
       offsetLeft: 0,
       offsetTop: 0,
       offsetWidth: 0,
       offsetHeight: 0
     };
-    const tab = (_a = itemById(dom.getElements(ctx), dom.getTriggerId(ctx, id))) != null ? _a : empty;
+    const tab = itemById(dom.getElements(ctx), dom.getTriggerId(ctx, id)) ?? empty;
     if (ctx.isVertical) {
       return {
         top: `${tab.offsetTop}px`,
@@ -229,7 +205,7 @@ function machine(userContext) {
   const ctx = compact(userContext);
   return (0, import_core.createMachine)(
     {
-      initial: "unknown",
+      initial: "idle",
       context: {
         dir: "ltr",
         orientation: "horizontal",
@@ -262,15 +238,8 @@ function machine(userContext) {
           actions: "clearValue"
         }
       },
+      entry: ["checkRenderedElements", "setIndicatorRect", "setContentTabIndex"],
       states: {
-        unknown: {
-          on: {
-            SETUP: {
-              target: "idle",
-              actions: ["checkRenderedElements", "setIndicatorRect", "setContentTabIndex"]
-            }
-          }
-        },
         idle: {
           on: {
             TAB_FOCUS: {
@@ -351,32 +320,25 @@ function machine(userContext) {
           ctx2.value = null;
         },
         invokeOnDelete(ctx2, evt) {
-          var _a;
-          (_a = ctx2.onDelete) == null ? void 0 : _a.call(ctx2, { value: evt.value });
+          ctx2.onDelete?.({ value: evt.value });
         },
         focusFirstTab(ctx2) {
-          raf(() => {
-            var _a;
-            return (_a = dom.getFirstEl(ctx2)) == null ? void 0 : _a.focus();
-          });
+          raf(() => dom.getFirstEl(ctx2)?.focus());
         },
         focusLastTab(ctx2) {
-          raf(() => {
-            var _a;
-            return (_a = dom.getLastEl(ctx2)) == null ? void 0 : _a.focus();
-          });
+          raf(() => dom.getLastEl(ctx2)?.focus());
         },
         focusNextTab(ctx2) {
           if (!ctx2.focusedValue)
             return;
           const next = dom.getNextEl(ctx2, ctx2.focusedValue);
-          raf(() => next == null ? void 0 : next.focus());
+          raf(() => next?.focus());
         },
         focusPrevTab(ctx2) {
           if (!ctx2.focusedValue)
             return;
           const prev = dom.getPrevEl(ctx2, ctx2.focusedValue);
-          raf(() => prev == null ? void 0 : prev.focus());
+          raf(() => prev?.focus());
         },
         setIndicatorRect(ctx2) {
           nextTick(() => {
@@ -397,12 +359,10 @@ function machine(userContext) {
           ctx2.hasMeasuredRect = false;
         },
         invokeOnChange(ctx2) {
-          var _a;
-          (_a = ctx2.onChange) == null ? void 0 : _a.call(ctx2, { value: ctx2.value });
+          ctx2.onChange?.({ value: ctx2.value });
         },
         invokeOnFocus(ctx2) {
-          var _a;
-          (_a = ctx2.onFocus) == null ? void 0 : _a.call(ctx2, { value: ctx2.focusedValue });
+          ctx2.onFocus?.({ value: ctx2.focusedValue });
         },
         setPrevSelectedTabs(ctx2) {
           if (ctx2.value != null) {

package/dist/tabs.machine.mjs

@@ -1,7 +1,7 @@
 import {
   machine
-} from "./chunk-T4EOWSTO.mjs";
-import "./chunk-OIIQ7RFL.mjs";
+} from "./chunk-3DBUWLYX.mjs";
+import "./chunk-4CROPD6E.mjs";
 export {
   machine
 };

package/dist/tabs.types.d.ts

@@ -83,7 +83,7 @@ type ComputedContext = Readonly<{
 type PrivateContext = Context<{}>;
 type MachineContext = PublicContext & ComputedContext & PrivateContext;
 type MachineState = {
-    value: "unknown" | "idle" | "focused";
+    value: "idle" | "focused";
 };
 type State = StateMachine.State<MachineContext, MachineState>;
 type Send = StateMachine.Send<StateMachine.AnyEventObject>;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@zag-js/tabs",
-  "version": "0.2.7",
+  "version": "0.2.9",
   "description": "Core logic for the tabs widget implemented as a state machine",
   "keywords": [
     "js",
@@ -26,14 +26,14 @@
     "url": "https://github.com/chakra-ui/zag/issues"
   },
   "dependencies": {
-    "@zag-js/anatomy": "0.1.3",
-    "@zag-js/core": "0.2.5",
-    "@zag-js/types": "0.3.3"
+    "@zag-js/anatomy": "0.1.4",
+    "@zag-js/core": "0.2.7",
+    "@zag-js/types": "0.3.4"
   },
   "devDependencies": {
     "clean-package": "2.2.0",
-    "@zag-js/dom-utils": "0.2.3",
-    "@zag-js/utils": "0.3.2"
+    "@zag-js/dom-utils": "0.2.4",
+    "@zag-js/utils": "0.3.3"
   },
   "clean-package": "../../../clean-package.config.json",
   "main": "dist/index.js",