@zag-js/tabs 0.2.4 → 0.2.6

package/dist/chunk-7NYLYFDJ.mjs

@@ -0,0 +1,285 @@
+import {
+  dom,
+  isFrame,
+  isHTMLElement,
+  isVisible
+} from "./chunk-7VZIDZFW.mjs";
+
+// src/tabs.machine.ts
+import { createMachine, guards } from "@zag-js/core";
+
+// ../../utilities/core/src/guard.ts
+var isArray = (v) => Array.isArray(v);
+var isObject = (v) => !(v == null || typeof v !== "object" || isArray(v));
+
+// ../../utilities/core/src/object.ts
+function compact(obj) {
+  if (obj === void 0)
+    return obj;
+  return Object.fromEntries(
+    Object.entries(obj).filter(([, value]) => value !== void 0).map(([key, value]) => [key, isObject(value) ? compact(value) : value])
+  );
+}
+
+// ../../utilities/dom/src/focusable.ts
+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);
+}
+
+// ../../utilities/dom/src/next-tick.ts
+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);
+  };
+}
+
+// src/tabs.machine.ts
+var { not } = guards;
+function machine(userContext) {
+  const ctx = compact(userContext);
+  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,
+        translations: {},
+        ...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"
+        },
+        CLEAR_VALUE: {
+          actions: "clearValue"
+        }
+      },
+      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;
+        },
+        clearValue(ctx2) {
+          ctx2.value = null;
+        },
+        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) {
+            ctx2.previousValues = pushUnique(Array.from(ctx2.previousValues), ctx2.value);
+          }
+        },
+        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");
+            }
+          });
+        }
+      }
+    }
+  );
+}
+function pushUnique(arr, value) {
+  const newArr = arr.slice();
+  const index = newArr.indexOf(value);
+  if (index > -1) {
+    newArr.splice(index, 1);
+  }
+  newArr.push(value);
+  return newArr;
+}
+
+export {
+  machine
+};

package/dist/chunk-7VZIDZFW.mjs

@@ -0,0 +1,163 @@
+// ../../utilities/core/src/array.ts
+var first = (v) => v[0];
+var last = (v) => v[v.length - 1];
+
+// ../../utilities/dom/src/query.ts
+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) {
+  var _a;
+  if (isWindow(el))
+    return el.document;
+  if (isDocument(el))
+    return el;
+  return (_a = el == null ? void 0 : el.ownerDocument) != null ? _a : 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;
+    },
+    getDoc: (ctx) => getDocument(dom2.getRootNode(ctx)),
+    getWin: (ctx) => {
+      var _a;
+      return (_a = dom2.getDoc(ctx).defaultView) != null ? _a : window;
+    },
+    getActiveElement: (ctx) => dom2.getDoc(ctx).activeElement,
+    getById: (ctx, id) => dom2.getRootNode(ctx).getElementById(id),
+    createEmitter: (ctx, target) => {
+      const win = dom2.getWin(ctx);
+      return function emit(evt, detail, options) {
+        const { bubbles = true, cancelable, composed = true } = options != null ? options : {};
+        const eventName = `zag:${evt}`;
+        const init = { bubbles, cancelable, composed, detail };
+        const event = new win.CustomEvent(eventName, init);
+        target.dispatchEvent(event);
+      };
+    },
+    createListener: (target) => {
+      return function listen(evt, handler) {
+        const eventName = `zag:${evt}`;
+        const listener = (e) => handler(e);
+        target.addEventListener(eventName, listener);
+        return () => target.removeEventListener(eventName, listener);
+      };
+    }
+  };
+  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;
+}
+
+// ../../utilities/dom/src/nodelist.ts
+function queryAll(root, selector) {
+  var _a;
+  return Array.from((_a = root == null ? void 0 : root.querySelectorAll(selector)) != null ? _a : []);
+}
+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];
+}
+
+// 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}`;
+  },
+  getIndicatorId: (ctx) => `tabs:${ctx.id}:indicator`,
+  getTablistEl: (ctx) => dom.getById(ctx, dom.getTablistId(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.getTablistId(ctx));
+    const selector = `[role=tab][data-ownedby='${ownerId}']:not([disabled])`;
+    return queryAll(dom.getTablistEl(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) => {
+    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;
+    if (ctx.isVertical) {
+      return {
+        top: `${tab.offsetTop}px`,
+        height: `${tab.offsetHeight}px`
+      };
+    }
+    return {
+      left: `${tab.offsetLeft}px`,
+      width: `${tab.offsetWidth}px`
+    };
+  }
+});
+
+export {
+  isFrame,
+  isHTMLElement,
+  isVisible,
+  dom
+};

package/dist/chunk-ISJ7TQVV.mjs

@@ -0,0 +1,186 @@
+import {
+  parts
+} from "./chunk-S2KW2DT4.mjs";
+import {
+  dom
+} from "./chunk-7VZIDZFW.mjs";
+
+// ../../utilities/dom/src/attrs.ts
+var dataAttr = (guard) => {
+  return guard ? "" : void 0;
+};
+
+// ../../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;
+}
+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);
+
+// ../../utilities/dom/src/keyboard-event.ts
+var rtlKeyMap = {
+  ArrowLeft: "ArrowRight",
+  ArrowRight: "ArrowLeft"
+};
+var sameKeyMap = {
+  Up: "ArrowUp",
+  Down: "ArrowDown",
+  Esc: "Escape",
+  " ": "Space",
+  ",": "Comma",
+  Left: "ArrowLeft",
+  Right: "ArrowRight"
+};
+function getEventKey(event, options = {}) {
+  var _a;
+  const { dir = "ltr", orientation = "horizontal" } = options;
+  let { key } = event;
+  key = (_a = sameKeyMap[key]) != null ? _a : key;
+  const isRtl = dir === "rtl" && orientation === "horizontal";
+  if (isRtl && key in rtlKeyMap) {
+    key = rtlKeyMap[key];
+  }
+  return key;
+}
+
+// src/tabs.connect.ts
+function connect(state, send, normalize) {
+  const translations = state.context.translations;
+  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 });
+    },
+    clearValue() {
+      send({ type: "CLEAR_VALUE" });
+    },
+    rootProps: normalize.element({
+      ...parts.root.attrs,
+      id: dom.getRootId(state.context),
+      "data-orientation": state.context.orientation,
+      "data-focus": dataAttr(isFocused),
+      dir: state.context.dir
+    }),
+    tablistProps: normalize.element({
+      ...parts.tablist.attrs,
+      id: dom.getTablistId(state.context),
+      role: "tablist",
+      "data-focus": dataAttr(isFocused),
+      "aria-orientation": state.context.orientation,
+      "data-orientation": state.context.orientation,
+      "aria-label": translations.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({
+        ...parts.trigger.attrs,
+        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.getTablistId(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({
+      ...parts.contentGroup.attrs,
+      id: dom.getContentGroupId(state.context),
+      "data-orientation": state.context.orientation
+    }),
+    getContentProps({ value }) {
+      const selected = state.context.value === value;
+      return normalize.element({
+        ...parts.content.attrs,
+        id: dom.getContentId(state.context, value),
+        tabIndex: 0,
+        "aria-labelledby": dom.getTriggerId(state.context, value),
+        role: "tabpanel",
+        "data-ownedby": dom.getTablistId(state.context),
+        hidden: !selected
+      });
+    },
+    indicatorProps: normalize.element({
+      id: dom.getIndicatorId(state.context),
+      ...parts.indicator.attrs,
+      "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
+      }
+    })
+  };
+}
+
+export {
+  connect
+};

package/dist/chunk-S2KW2DT4.mjs

@@ -0,0 +1,9 @@
+// src/tabs.anatomy.ts
+import { createAnatomy } from "@zag-js/anatomy";
+var anatomy = createAnatomy("tabs").parts("root", "tablist", "trigger", "contentGroup", "content", "indicator");
+var parts = anatomy.build();
+
+export {
+  anatomy,
+  parts
+};