@zag-js/tabs 0.0.0-20220813122512

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2021 Chakra UI
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,19 @@
+# @zag-js/tabs
+
+Core logic for the tabs widget implemented as a state machine
+
+## Installation
+
+```sh
+yarn add  @zag-js/tabs
+# or
+npm i  @zag-js/tabs
+```
+
+## Contribution
+
+Yes please! See the [contributing guidelines](https://github.com/chakra-ui/zag/blob/main/CONTRIBUTING.md) for details.
+
+## Licence
+
+This project is licensed under the terms of the [MIT license](https://github.com/chakra-ui/zag/blob/main/LICENSE).

package/dist/index.d.ts

@@ -0,0 +1,115 @@
+import { RequiredBy, DirectionProperty, CommonProperties, Context, PropTypes, NormalizeProps } from '@zag-js/types';
+import * as _zag_js_core from '@zag-js/core';
+import { StateMachine } from '@zag-js/core';
+
+declare type IntlMessages = {
+    tablistLabel?: string;
+    deleteLabel?(value: string): string;
+};
+declare type ElementIds = Partial<{
+    root: string;
+    trigger: string;
+    triggerGroup: string;
+    contentGroup: string;
+    content: string;
+}>;
+declare type PublicContext = DirectionProperty & CommonProperties & {
+    /**
+     * The ids of the elements in the tabs. Useful for composition.
+     */
+    ids?: ElementIds;
+    /**
+     * Specifies the localized strings that identifies the accessibility elements and their states
+     */
+    messages: IntlMessages;
+    /**
+     * Whether the keyboard navigation will loop from last tab to first, and vice versa.
+     * @default true
+     */
+    loop: boolean;
+    /**
+     * Whether the indicator is rendered.
+     */
+    isIndicatorRendered: boolean;
+    /**
+     * The selected tab id
+     */
+    value: string | null;
+    /**
+     * The orientation of the tabs. Can be `horizontal` or `vertical`
+     * - `horizontal`: only left and right arrow key navigation will work.
+     * - `vertical`: only up and down arrow key navigation will work.
+     *
+     * @default "horizontal"
+     */
+    orientation?: "horizontal" | "vertical";
+    /**
+     * The activation mode of the tabs. Can be `manual` or `automatic`
+     * - `manual`: Tabs are activated when clicked or press `enter` key.
+     * - `automatic`: Tabs are activated when receiving focus
+     * @default "automatic"
+     */
+    activationMode?: "manual" | "automatic";
+    /**
+     * Callback to be called when the selected/active tab changes
+     */
+    onChange?: (details: {
+        value: string | null;
+    }) => void;
+    /**
+     * Callback to be called when the focused tab changes
+     */
+    onFocus?: (details: {
+        value: string | null;
+    }) => void;
+    /**
+     * Callback to be called when a tab's close button is clicked
+     */
+    onDelete?: (details: {
+        value: string;
+    }) => void;
+};
+declare type UserDefinedContext = RequiredBy<PublicContext, "id">;
+declare type ComputedContext = Readonly<{
+    /**
+     * @computed
+     * Whether the tab is in the horizontal orientation
+     */
+    isHorizontal: boolean;
+    /**
+     * @computed
+     * Whether the tab is in the vertical orientation
+     */
+    isVertical: boolean;
+}>;
+declare type PrivateContext = Context<{}>;
+declare type MachineContext = PublicContext & ComputedContext & PrivateContext;
+declare type MachineState = {
+    value: "unknown" | "idle" | "focused";
+};
+declare type State = StateMachine.State<MachineContext, MachineState>;
+declare type Send = StateMachine.Send<StateMachine.AnyEventObject>;
+declare type TabProps = {
+    value: string;
+    disabled?: boolean;
+};
+
+declare function connect<T extends PropTypes>(state: State, send: Send, normalize: NormalizeProps<T>): {
+    value: string | null;
+    focusedValue: string | null;
+    previousValues: string[];
+    setValue(value: string): void;
+    rootProps: T["element"];
+    triggerGroupProps: T["element"];
+    getTriggerProps(props: TabProps): T["button"];
+    contentGroupProps: T["element"];
+    getContentProps({ value }: {
+        value: string;
+    }): T["element"];
+    getDeleteButtonProps({ value, disabled }: TabProps): T["button"];
+    indicatorProps: T["element"];
+};
+
+declare function machine(ctx: UserDefinedContext): _zag_js_core.Machine<MachineContext, MachineState, _zag_js_core.StateMachine.AnyEventObject>;
+
+export { UserDefinedContext as Context, connect, machine };

package/dist/index.js

@@ -0,0 +1,586 @@
+"use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/index.ts
+var src_exports = {};
+__export(src_exports, {
+  connect: () => connect,
+  machine: () => machine
+});
+module.exports = __toCommonJS(src_exports);
+
+// ../../utilities/dom/dist/index.mjs
+var dataAttr = (guard) => {
+  return guard ? "" : void 0;
+};
+var isDom = () => typeof window !== "undefined";
+function getPlatform() {
+  const agent = navigator.userAgentData;
+  return (agent == null ? void 0 : agent.platform) ?? navigator.platform;
+}
+var pt = (v) => isDom() && v.test(getPlatform());
+var vn = (v) => isDom() && v.test(navigator.vendor);
+var isSafari = () => isApple() && vn(/apple/i);
+var isApple = () => pt(/mac|iphone|ipad|ipod/i);
+function isDocument(el) {
+  return el.nodeType === Node.DOCUMENT_NODE;
+}
+function isWindow(value) {
+  return (value == null ? void 0 : value.toString()) === "[object Window]";
+}
+function isFrame(element) {
+  return element.localName === "iframe";
+}
+function getDocument(el) {
+  if (isWindow(el))
+    return el.document;
+  if (isDocument(el))
+    return el;
+  return (el == null ? void 0 : el.ownerDocument) ?? document;
+}
+function defineDomHelpers(helpers) {
+  const dom2 = {
+    getRootNode: (ctx) => {
+      var _a;
+      return ((_a = ctx.getRootNode) == null ? void 0 : _a.call(ctx)) ?? document;
+    },
+    getDoc: (ctx) => getDocument(dom2.getRootNode(ctx)),
+    getWin: (ctx) => dom2.getDoc(ctx).defaultView ?? window,
+    getActiveElement: (ctx) => dom2.getDoc(ctx).activeElement,
+    getById: (ctx, id) => dom2.getRootNode(ctx).getElementById(id)
+  };
+  return {
+    ...dom2,
+    ...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";
+}
+function isVisible(el) {
+  if (!isHTMLElement(el))
+    return false;
+  return el.offsetWidth > 0 || el.offsetHeight > 0 || el.getClientRects().length > 0;
+}
+var focusableSelector = "input:not([type='hidden']):not([disabled]), select:not([disabled]), textarea:not([disabled]), a[href], button:not([disabled]), [tabindex], iframe, object, embed, area[href], audio[controls], video[controls], [contenteditable]:not([contenteditable='false']), details > summary:first-of-type";
+var getFocusables = (container, includeContainer = false) => {
+  if (!container)
+    return [];
+  const elements = Array.from(container.querySelectorAll(focusableSelector));
+  const include = includeContainer == true || includeContainer == "if-empty" && elements.length === 0;
+  if (include && isHTMLElement(container) && isFocusable(container)) {
+    elements.unshift(container);
+  }
+  const focusableElements = elements.filter(isFocusable);
+  focusableElements.forEach((element, i) => {
+    if (isFrame(element) && element.contentDocument) {
+      const frameBody = element.contentDocument.body;
+      focusableElements.splice(i, 1, ...getFocusables(frameBody));
+    }
+  });
+  return focusableElements;
+};
+function isFocusable(element) {
+  if (!element)
+    return false;
+  return element.matches(focusableSelector) && isVisible(element);
+}
+var rtlKeyMap = {
+  ArrowLeft: "ArrowRight",
+  ArrowRight: "ArrowLeft",
+  Home: "End",
+  End: "Home"
+};
+var sameKeyMap = {
+  Up: "ArrowUp",
+  Down: "ArrowDown",
+  Esc: "Escape",
+  " ": "Space",
+  ",": "Comma",
+  Left: "ArrowLeft",
+  Right: "ArrowRight"
+};
+function getEventKey(event, options = {}) {
+  const { dir = "ltr", orientation = "horizontal" } = options;
+  let { key } = event;
+  key = sameKeyMap[key] ?? key;
+  const isRtl = dir === "rtl" && orientation === "horizontal";
+  if (isRtl && key in rtlKeyMap) {
+    key = rtlKeyMap[key];
+  }
+  return key;
+}
+function nextTick(fn) {
+  const set = /* @__PURE__ */ new Set();
+  function raf2(fn2) {
+    const id = globalThis.requestAnimationFrame(fn2);
+    set.add(() => globalThis.cancelAnimationFrame(id));
+  }
+  raf2(() => raf2(fn));
+  return function cleanup() {
+    set.forEach(function(fn2) {
+      fn2();
+    });
+  };
+}
+function raf(fn) {
+  const id = globalThis.requestAnimationFrame(fn);
+  return function cleanup() {
+    globalThis.cancelAnimationFrame(id);
+  };
+}
+function queryAll(root, selector) {
+  return Array.from((root == null ? void 0 : root.querySelectorAll(selector)) ?? []);
+}
+function itemById(v, id) {
+  return v.find((node) => node.id === id);
+}
+function indexOfId(v, id) {
+  const item = itemById(v, id);
+  return item ? v.indexOf(item) : -1;
+}
+function nextById(v, id, loop = true) {
+  let idx = indexOfId(v, id);
+  idx = loop ? (idx + 1) % v.length : Math.min(idx + 1, v.length - 1);
+  return v[idx];
+}
+function prevById(v, id, loop = true) {
+  let idx = indexOfId(v, id);
+  if (idx === -1)
+    return loop ? v[v.length - 1] : null;
+  idx = loop ? (idx - 1 + v.length) % v.length : Math.max(0, idx - 1);
+  return v[idx];
+}
+
+// ../../utilities/core/dist/index.mjs
+var first = (v) => v[0];
+var last = (v) => v[v.length - 1];
+
+// src/tabs.dom.ts
+var dom = defineDomHelpers({
+  getRootId: (ctx) => {
+    var _a;
+    return ((_a = ctx.ids) == null ? void 0 : _a.root) ?? `tabs:${ctx.id}`;
+  },
+  getTriggerGroupId: (ctx) => {
+    var _a;
+    return ((_a = ctx.ids) == null ? void 0 : _a.triggerGroup) ?? `tabs:${ctx.id}:trigger-group`;
+  },
+  getContentId: (ctx, id) => {
+    var _a;
+    return ((_a = ctx.ids) == null ? void 0 : _a.content) ?? `tabs:${ctx.id}:content-${id}`;
+  },
+  getContentGroupId: (ctx) => {
+    var _a;
+    return ((_a = ctx.ids) == null ? void 0 : _a.contentGroup) ?? `tabs:${ctx.id}:content-group`;
+  },
+  getTriggerId: (ctx, id) => {
+    var _a;
+    return ((_a = ctx.ids) == null ? void 0 : _a.trigger) ?? `tabs:${ctx.id}:trigger-${id}`;
+  },
+  getIndicatorId: (ctx) => `tabs:${ctx.id}:indicator`,
+  getTriggerGroupEl: (ctx) => dom.getById(ctx, dom.getTriggerGroupId(ctx)),
+  getContentEl: (ctx, id) => dom.getById(ctx, dom.getContentId(ctx, id)),
+  getTriggerEl: (ctx, id) => dom.getById(ctx, dom.getTriggerId(ctx, id)),
+  getIndicatorEl: (ctx) => dom.getById(ctx, dom.getIndicatorId(ctx)),
+  getElements: (ctx) => {
+    const ownerId = CSS.escape(dom.getTriggerGroupId(ctx));
+    const selector = `[role=tab][data-ownedby='${ownerId}']:not([disabled])`;
+    return queryAll(dom.getTriggerGroupEl(ctx), selector);
+  },
+  getFirstEl: (ctx) => first(dom.getElements(ctx)),
+  getLastEl: (ctx) => last(dom.getElements(ctx)),
+  getNextEl: (ctx, id) => nextById(dom.getElements(ctx), dom.getTriggerId(ctx, id), ctx.loop),
+  getPrevEl: (ctx, id) => prevById(dom.getElements(ctx), dom.getTriggerId(ctx, id), ctx.loop),
+  getActiveContentEl: (ctx) => {
+    if (!ctx.value)
+      return;
+    const id = dom.getContentId(ctx, ctx.value);
+    return dom.getById(ctx, id);
+  },
+  getRectById: (ctx, id) => {
+    const empty = {
+      offsetLeft: 0,
+      offsetTop: 0,
+      offsetWidth: 0,
+      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`
+      };
+    }
+    return {
+      left: `${tab.offsetLeft}px`,
+      width: `${tab.offsetWidth}px`
+    };
+  }
+});
+
+// src/tabs.connect.ts
+function connect(state, send, normalize) {
+  const messages = state.context.messages;
+  const isFocused = state.matches("focused");
+  return {
+    value: state.context.value,
+    focusedValue: state.context.focusedValue,
+    previousValues: Array.from(state.context.previousValues),
+    setValue(value) {
+      send({ type: "SET_VALUE", value });
+    },
+    rootProps: normalize.element({
+      "data-part": "root",
+      id: dom.getRootId(state.context),
+      "data-orientation": state.context.orientation,
+      "data-focus": dataAttr(isFocused),
+      dir: state.context.dir
+    }),
+    triggerGroupProps: normalize.element({
+      "data-part": "trigger-group",
+      id: dom.getTriggerGroupId(state.context),
+      role: "tablist",
+      "data-focus": dataAttr(isFocused),
+      "aria-orientation": state.context.orientation,
+      "data-orientation": state.context.orientation,
+      "aria-label": messages.tablistLabel,
+      onKeyDown(event) {
+        const keyMap = {
+          ArrowDown() {
+            send("ARROW_DOWN");
+          },
+          ArrowUp() {
+            send("ARROW_UP");
+          },
+          ArrowLeft() {
+            send("ARROW_LEFT");
+          },
+          ArrowRight() {
+            send("ARROW_RIGHT");
+          },
+          Home() {
+            send("HOME");
+          },
+          End() {
+            send("END");
+          },
+          Enter() {
+            send({ type: "ENTER", value: state.context.focusedValue });
+          }
+        };
+        let key = getEventKey(event, state.context);
+        const exec = keyMap[key];
+        if (exec) {
+          event.preventDefault();
+          exec(event);
+        }
+      }
+    }),
+    getTriggerProps(props) {
+      const { value, disabled } = props;
+      const selected = state.context.value === value;
+      return normalize.button({
+        "data-part": "trigger",
+        role: "tab",
+        type: "button",
+        disabled,
+        "data-orientation": state.context.orientation,
+        "data-disabled": dataAttr(disabled),
+        "aria-disabled": disabled,
+        "data-value": value,
+        "aria-selected": selected,
+        "data-selected": dataAttr(selected),
+        "aria-controls": dom.getContentId(state.context, value),
+        "data-ownedby": dom.getTriggerGroupId(state.context),
+        id: dom.getTriggerId(state.context, value),
+        tabIndex: selected ? 0 : -1,
+        onFocus() {
+          send({ type: "TAB_FOCUS", value });
+        },
+        onBlur(event) {
+          const target = event.relatedTarget;
+          if ((target == null ? void 0 : target.getAttribute("role")) !== "tab") {
+            send({ type: "TAB_BLUR" });
+          }
+        },
+        onClick(event) {
+          if (disabled)
+            return;
+          if (isSafari()) {
+            event.currentTarget.focus();
+          }
+          send({ type: "TAB_CLICK", value });
+        }
+      });
+    },
+    contentGroupProps: normalize.element({
+      "data-part": "content-group",
+      id: dom.getContentGroupId(state.context),
+      "data-orientation": state.context.orientation
+    }),
+    getContentProps({ value }) {
+      const selected = state.context.value === value;
+      return normalize.element({
+        "data-part": "content",
+        id: dom.getContentId(state.context, value),
+        tabIndex: 0,
+        "aria-labelledby": dom.getTriggerId(state.context, value),
+        role: "tabpanel",
+        "data-ownedby": dom.getTriggerGroupId(state.context),
+        hidden: !selected
+      });
+    },
+    getDeleteButtonProps({ value, disabled }) {
+      var _a;
+      return normalize.button({
+        "data-part": "delete-button",
+        type: "button",
+        tabIndex: -1,
+        "aria-label": (_a = messages.deleteLabel) == null ? void 0 : _a.call(messages, value),
+        disabled,
+        onClick() {
+          send({ type: "DELETE", value });
+        }
+      });
+    },
+    indicatorProps: normalize.element({
+      id: dom.getIndicatorId(state.context),
+      "data-part": "indicator",
+      "data-orientation": state.context.orientation,
+      style: {
+        "--transition-duration": "200ms",
+        "--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",
+        transitionTimingFunction: "var(--transition-timing-function)",
+        ...state.context.indicatorRect
+      }
+    })
+  };
+}
+
+// src/tabs.machine.ts
+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"
+        },
+        DELETE: {
+          actions: "deleteValue"
+        }
+      },
+      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"
+            },
+            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;
+        },
+        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(() => {
+            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)
+              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");
+            }
+          });
+        }
+      }
+    }
+  );
+}
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  connect,
+  machine
+});

package/dist/index.mjs

@@ -0,0 +1,558 @@
+// ../../utilities/dom/dist/index.mjs
+var dataAttr = (guard) => {
+  return guard ? "" : void 0;
+};
+var isDom = () => typeof window !== "undefined";
+function getPlatform() {
+  const agent = navigator.userAgentData;
+  return (agent == null ? void 0 : agent.platform) ?? navigator.platform;
+}
+var pt = (v) => isDom() && v.test(getPlatform());
+var vn = (v) => isDom() && v.test(navigator.vendor);
+var isSafari = () => isApple() && vn(/apple/i);
+var isApple = () => pt(/mac|iphone|ipad|ipod/i);
+function isDocument(el) {
+  return el.nodeType === Node.DOCUMENT_NODE;
+}
+function isWindow(value) {
+  return (value == null ? void 0 : value.toString()) === "[object Window]";
+}
+function isFrame(element) {
+  return element.localName === "iframe";
+}
+function getDocument(el) {
+  if (isWindow(el))
+    return el.document;
+  if (isDocument(el))
+    return el;
+  return (el == null ? void 0 : el.ownerDocument) ?? document;
+}
+function defineDomHelpers(helpers) {
+  const dom2 = {
+    getRootNode: (ctx) => {
+      var _a;
+      return ((_a = ctx.getRootNode) == null ? void 0 : _a.call(ctx)) ?? document;
+    },
+    getDoc: (ctx) => getDocument(dom2.getRootNode(ctx)),
+    getWin: (ctx) => dom2.getDoc(ctx).defaultView ?? window,
+    getActiveElement: (ctx) => dom2.getDoc(ctx).activeElement,
+    getById: (ctx, id) => dom2.getRootNode(ctx).getElementById(id)
+  };
+  return {
+    ...dom2,
+    ...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";
+}
+function isVisible(el) {
+  if (!isHTMLElement(el))
+    return false;
+  return el.offsetWidth > 0 || el.offsetHeight > 0 || el.getClientRects().length > 0;
+}
+var focusableSelector = "input:not([type='hidden']):not([disabled]), select:not([disabled]), textarea:not([disabled]), a[href], button:not([disabled]), [tabindex], iframe, object, embed, area[href], audio[controls], video[controls], [contenteditable]:not([contenteditable='false']), details > summary:first-of-type";
+var getFocusables = (container, includeContainer = false) => {
+  if (!container)
+    return [];
+  const elements = Array.from(container.querySelectorAll(focusableSelector));
+  const include = includeContainer == true || includeContainer == "if-empty" && elements.length === 0;
+  if (include && isHTMLElement(container) && isFocusable(container)) {
+    elements.unshift(container);
+  }
+  const focusableElements = elements.filter(isFocusable);
+  focusableElements.forEach((element, i) => {
+    if (isFrame(element) && element.contentDocument) {
+      const frameBody = element.contentDocument.body;
+      focusableElements.splice(i, 1, ...getFocusables(frameBody));
+    }
+  });
+  return focusableElements;
+};
+function isFocusable(element) {
+  if (!element)
+    return false;
+  return element.matches(focusableSelector) && isVisible(element);
+}
+var rtlKeyMap = {
+  ArrowLeft: "ArrowRight",
+  ArrowRight: "ArrowLeft",
+  Home: "End",
+  End: "Home"
+};
+var sameKeyMap = {
+  Up: "ArrowUp",
+  Down: "ArrowDown",
+  Esc: "Escape",
+  " ": "Space",
+  ",": "Comma",
+  Left: "ArrowLeft",
+  Right: "ArrowRight"
+};
+function getEventKey(event, options = {}) {
+  const { dir = "ltr", orientation = "horizontal" } = options;
+  let { key } = event;
+  key = sameKeyMap[key] ?? key;
+  const isRtl = dir === "rtl" && orientation === "horizontal";
+  if (isRtl && key in rtlKeyMap) {
+    key = rtlKeyMap[key];
+  }
+  return key;
+}
+function nextTick(fn) {
+  const set = /* @__PURE__ */ new Set();
+  function raf2(fn2) {
+    const id = globalThis.requestAnimationFrame(fn2);
+    set.add(() => globalThis.cancelAnimationFrame(id));
+  }
+  raf2(() => raf2(fn));
+  return function cleanup() {
+    set.forEach(function(fn2) {
+      fn2();
+    });
+  };
+}
+function raf(fn) {
+  const id = globalThis.requestAnimationFrame(fn);
+  return function cleanup() {
+    globalThis.cancelAnimationFrame(id);
+  };
+}
+function queryAll(root, selector) {
+  return Array.from((root == null ? void 0 : root.querySelectorAll(selector)) ?? []);
+}
+function itemById(v, id) {
+  return v.find((node) => node.id === id);
+}
+function indexOfId(v, id) {
+  const item = itemById(v, id);
+  return item ? v.indexOf(item) : -1;
+}
+function nextById(v, id, loop = true) {
+  let idx = indexOfId(v, id);
+  idx = loop ? (idx + 1) % v.length : Math.min(idx + 1, v.length - 1);
+  return v[idx];
+}
+function prevById(v, id, loop = true) {
+  let idx = indexOfId(v, id);
+  if (idx === -1)
+    return loop ? v[v.length - 1] : null;
+  idx = loop ? (idx - 1 + v.length) % v.length : Math.max(0, idx - 1);
+  return v[idx];
+}
+
+// ../../utilities/core/dist/index.mjs
+var first = (v) => v[0];
+var last = (v) => v[v.length - 1];
+
+// src/tabs.dom.ts
+var dom = defineDomHelpers({
+  getRootId: (ctx) => {
+    var _a;
+    return ((_a = ctx.ids) == null ? void 0 : _a.root) ?? `tabs:${ctx.id}`;
+  },
+  getTriggerGroupId: (ctx) => {
+    var _a;
+    return ((_a = ctx.ids) == null ? void 0 : _a.triggerGroup) ?? `tabs:${ctx.id}:trigger-group`;
+  },
+  getContentId: (ctx, id) => {
+    var _a;
+    return ((_a = ctx.ids) == null ? void 0 : _a.content) ?? `tabs:${ctx.id}:content-${id}`;
+  },
+  getContentGroupId: (ctx) => {
+    var _a;
+    return ((_a = ctx.ids) == null ? void 0 : _a.contentGroup) ?? `tabs:${ctx.id}:content-group`;
+  },
+  getTriggerId: (ctx, id) => {
+    var _a;
+    return ((_a = ctx.ids) == null ? void 0 : _a.trigger) ?? `tabs:${ctx.id}:trigger-${id}`;
+  },
+  getIndicatorId: (ctx) => `tabs:${ctx.id}:indicator`,
+  getTriggerGroupEl: (ctx) => dom.getById(ctx, dom.getTriggerGroupId(ctx)),
+  getContentEl: (ctx, id) => dom.getById(ctx, dom.getContentId(ctx, id)),
+  getTriggerEl: (ctx, id) => dom.getById(ctx, dom.getTriggerId(ctx, id)),
+  getIndicatorEl: (ctx) => dom.getById(ctx, dom.getIndicatorId(ctx)),
+  getElements: (ctx) => {
+    const ownerId = CSS.escape(dom.getTriggerGroupId(ctx));
+    const selector = `[role=tab][data-ownedby='${ownerId}']:not([disabled])`;
+    return queryAll(dom.getTriggerGroupEl(ctx), selector);
+  },
+  getFirstEl: (ctx) => first(dom.getElements(ctx)),
+  getLastEl: (ctx) => last(dom.getElements(ctx)),
+  getNextEl: (ctx, id) => nextById(dom.getElements(ctx), dom.getTriggerId(ctx, id), ctx.loop),
+  getPrevEl: (ctx, id) => prevById(dom.getElements(ctx), dom.getTriggerId(ctx, id), ctx.loop),
+  getActiveContentEl: (ctx) => {
+    if (!ctx.value)
+      return;
+    const id = dom.getContentId(ctx, ctx.value);
+    return dom.getById(ctx, id);
+  },
+  getRectById: (ctx, id) => {
+    const empty = {
+      offsetLeft: 0,
+      offsetTop: 0,
+      offsetWidth: 0,
+      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`
+      };
+    }
+    return {
+      left: `${tab.offsetLeft}px`,
+      width: `${tab.offsetWidth}px`
+    };
+  }
+});
+
+// src/tabs.connect.ts
+function connect(state, send, normalize) {
+  const messages = state.context.messages;
+  const isFocused = state.matches("focused");
+  return {
+    value: state.context.value,
+    focusedValue: state.context.focusedValue,
+    previousValues: Array.from(state.context.previousValues),
+    setValue(value) {
+      send({ type: "SET_VALUE", value });
+    },
+    rootProps: normalize.element({
+      "data-part": "root",
+      id: dom.getRootId(state.context),
+      "data-orientation": state.context.orientation,
+      "data-focus": dataAttr(isFocused),
+      dir: state.context.dir
+    }),
+    triggerGroupProps: normalize.element({
+      "data-part": "trigger-group",
+      id: dom.getTriggerGroupId(state.context),
+      role: "tablist",
+      "data-focus": dataAttr(isFocused),
+      "aria-orientation": state.context.orientation,
+      "data-orientation": state.context.orientation,
+      "aria-label": messages.tablistLabel,
+      onKeyDown(event) {
+        const keyMap = {
+          ArrowDown() {
+            send("ARROW_DOWN");
+          },
+          ArrowUp() {
+            send("ARROW_UP");
+          },
+          ArrowLeft() {
+            send("ARROW_LEFT");
+          },
+          ArrowRight() {
+            send("ARROW_RIGHT");
+          },
+          Home() {
+            send("HOME");
+          },
+          End() {
+            send("END");
+          },
+          Enter() {
+            send({ type: "ENTER", value: state.context.focusedValue });
+          }
+        };
+        let key = getEventKey(event, state.context);
+        const exec = keyMap[key];
+        if (exec) {
+          event.preventDefault();
+          exec(event);
+        }
+      }
+    }),
+    getTriggerProps(props) {
+      const { value, disabled } = props;
+      const selected = state.context.value === value;
+      return normalize.button({
+        "data-part": "trigger",
+        role: "tab",
+        type: "button",
+        disabled,
+        "data-orientation": state.context.orientation,
+        "data-disabled": dataAttr(disabled),
+        "aria-disabled": disabled,
+        "data-value": value,
+        "aria-selected": selected,
+        "data-selected": dataAttr(selected),
+        "aria-controls": dom.getContentId(state.context, value),
+        "data-ownedby": dom.getTriggerGroupId(state.context),
+        id: dom.getTriggerId(state.context, value),
+        tabIndex: selected ? 0 : -1,
+        onFocus() {
+          send({ type: "TAB_FOCUS", value });
+        },
+        onBlur(event) {
+          const target = event.relatedTarget;
+          if ((target == null ? void 0 : target.getAttribute("role")) !== "tab") {
+            send({ type: "TAB_BLUR" });
+          }
+        },
+        onClick(event) {
+          if (disabled)
+            return;
+          if (isSafari()) {
+            event.currentTarget.focus();
+          }
+          send({ type: "TAB_CLICK", value });
+        }
+      });
+    },
+    contentGroupProps: normalize.element({
+      "data-part": "content-group",
+      id: dom.getContentGroupId(state.context),
+      "data-orientation": state.context.orientation
+    }),
+    getContentProps({ value }) {
+      const selected = state.context.value === value;
+      return normalize.element({
+        "data-part": "content",
+        id: dom.getContentId(state.context, value),
+        tabIndex: 0,
+        "aria-labelledby": dom.getTriggerId(state.context, value),
+        role: "tabpanel",
+        "data-ownedby": dom.getTriggerGroupId(state.context),
+        hidden: !selected
+      });
+    },
+    getDeleteButtonProps({ value, disabled }) {
+      var _a;
+      return normalize.button({
+        "data-part": "delete-button",
+        type: "button",
+        tabIndex: -1,
+        "aria-label": (_a = messages.deleteLabel) == null ? void 0 : _a.call(messages, value),
+        disabled,
+        onClick() {
+          send({ type: "DELETE", value });
+        }
+      });
+    },
+    indicatorProps: normalize.element({
+      id: dom.getIndicatorId(state.context),
+      "data-part": "indicator",
+      "data-orientation": state.context.orientation,
+      style: {
+        "--transition-duration": "200ms",
+        "--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",
+        transitionTimingFunction: "var(--transition-timing-function)",
+        ...state.context.indicatorRect
+      }
+    })
+  };
+}
+
+// src/tabs.machine.ts
+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"
+        },
+        DELETE: {
+          actions: "deleteValue"
+        }
+      },
+      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"
+            },
+            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;
+        },
+        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(() => {
+            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)
+              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");
+            }
+          });
+        }
+      }
+    }
+  );
+}
+export {
+  connect,
+  machine
+};

package/package.json

@@ -0,0 +1,49 @@
+{
+  "name": "@zag-js/tabs",
+  "version": "0.0.0-20220813122512",
+  "description": "Core logic for the tabs widget implemented as a state machine",
+  "keywords": [
+    "js",
+    "machine",
+    "xstate",
+    "statechart",
+    "component",
+    "chakra-ui",
+    "tabs"
+  ],
+  "author": "Segun Adebayo <sage@adebayosegun.com>",
+  "homepage": "https://github.com/chakra-ui/zag#readme",
+  "license": "MIT",
+  "main": "dist/index.js",
+  "types": "dist/index.d.ts",
+  "module": "dist/index.mjs",
+  "repository": "https://github.com/chakra-ui/zag/tree/main/packages/tabs",
+  "sideEffects": false,
+  "files": [
+    "dist/**/*"
+  ],
+  "publishConfig": {
+    "access": "public"
+  },
+  "bugs": {
+    "url": "https://github.com/chakra-ui/zag/issues"
+  },
+  "dependencies": {
+    "@zag-js/core": "0.1.9",
+    "@zag-js/types": "0.0.0-20220813122512"
+  },
+  "devDependencies": {
+    "@zag-js/dom-utils": "0.0.0-20220813122512",
+    "@zag-js/utils": "0.1.3"
+  },
+  "scripts": {
+    "build-fast": "tsup src/index.ts --format=esm,cjs",
+    "start": "pnpm build --watch",
+    "build": "tsup src/index.ts --format=esm,cjs --dts",
+    "test": "jest --config ../../../jest.config.js --rootDir . --passWithNoTests",
+    "lint": "eslint src --ext .ts,.tsx",
+    "test-ci": "pnpm test --ci --runInBand",
+    "test-watch": "pnpm test --watch -u",
+    "typecheck": "tsc --noEmit"
+  }
+}