@zag-js/tabs 0.50.0 → 0.51.1

package/dist/index.js

@@ -1,585 +1,2 @@
-"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, {
-  anatomy: () => anatomy,
-  connect: () => connect,
-  contentProps: () => contentProps,
-  machine: () => machine,
-  props: () => props,
-  splitContentProps: () => splitContentProps,
-  splitProps: () => splitProps,
-  splitTriggerProps: () => splitTriggerProps,
-  triggerProps: () => triggerProps
-});
-module.exports = __toCommonJS(src_exports);
-
-// src/tabs.anatomy.ts
-var import_anatomy = require("@zag-js/anatomy");
-var anatomy = (0, import_anatomy.createAnatomy)("tabs").parts("root", "list", "trigger", "content", "indicator");
-var parts = anatomy.build();
-
-// src/tabs.connect.ts
-var import_dom_event = require("@zag-js/dom-event");
-var import_dom_query2 = require("@zag-js/dom-query");
-
-// src/tabs.dom.ts
-var import_dom_query = require("@zag-js/dom-query");
-var import_utils = require("@zag-js/utils");
-var dom = (0, import_dom_query.createScope)({
-  getRootId: (ctx) => ctx.ids?.root ?? `tabs:${ctx.id}`,
-  getListId: (ctx) => ctx.ids?.list ?? `tabs:${ctx.id}:list`,
-  getContentId: (ctx, id) => ctx.ids?.content ?? `tabs:${ctx.id}:content-${id}`,
-  getTriggerId: (ctx, id) => ctx.ids?.trigger ?? `tabs:${ctx.id}:trigger-${id}`,
-  getIndicatorId: (ctx) => ctx.ids?.indicator ?? `tabs:${ctx.id}:indicator`,
-  getListEl: (ctx) => dom.getById(ctx, dom.getListId(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.getListId(ctx));
-    const selector = `[role=tab][data-ownedby='${ownerId}']:not([disabled])`;
-    return (0, import_dom_query.queryAll)(dom.getListEl(ctx), selector);
-  },
-  getFirstTriggerEl: (ctx) => (0, import_utils.first)(dom.getElements(ctx)),
-  getLastTriggerEl: (ctx) => (0, import_utils.last)(dom.getElements(ctx)),
-  getNextTriggerEl: (ctx, id) => (0, import_dom_query.nextById)(dom.getElements(ctx), dom.getTriggerId(ctx, id), ctx.loopFocus),
-  getPrevTriggerEl: (ctx, id) => (0, import_dom_query.prevById)(dom.getElements(ctx), dom.getTriggerId(ctx, id), ctx.loopFocus),
-  getSelectedContentEl: (ctx) => {
-    if (!ctx.value)
-      return;
-    return dom.getContentEl(ctx, ctx.value);
-  },
-  getSelectedTriggerEl: (ctx) => {
-    if (!ctx.value)
-      return;
-    return dom.getTriggerEl(ctx, ctx.value);
-  },
-  getOffsetRect: (el) => {
-    return {
-      left: el?.offsetLeft ?? 0,
-      top: el?.offsetTop ?? 0,
-      width: el?.offsetWidth ?? 0,
-      height: el?.offsetHeight ?? 0
-    };
-  },
-  getRectById: (ctx, id) => {
-    const tab = (0, import_dom_query.itemById)(dom.getElements(ctx), dom.getTriggerId(ctx, id));
-    return dom.resolveRect(dom.getOffsetRect(tab));
-  },
-  resolveRect: (rect) => ({
-    width: `${rect.width}px`,
-    height: `${rect.height}px`,
-    left: `${rect.left}px`,
-    top: `${rect.top}px`
-  })
-});
-
-// src/tabs.connect.ts
-function connect(state, send, normalize) {
-  const translations = state.context.translations;
-  const focused = state.matches("focused");
-  const isVertical = state.context.orientation === "vertical";
-  const isHorizontal = state.context.orientation === "horizontal";
-  const composite = state.context.composite;
-  const indicator = state.context.indicatorState;
-  function getTriggerState(props2) {
-    return {
-      selected: state.context.value === props2.value,
-      focused: state.context.focusedValue === props2.value,
-      disabled: !!props2.disabled
-    };
-  }
-  return {
-    value: state.context.value,
-    focusedValue: state.context.focusedValue,
-    setValue(value) {
-      send({ type: "SET_VALUE", value });
-    },
-    clearValue() {
-      send({ type: "CLEAR_VALUE" });
-    },
-    setIndicatorRect(value) {
-      const id = dom.getTriggerId(state.context, value);
-      send({ type: "SET_INDICATOR_RECT", id });
-    },
-    syncTabIndex() {
-      send("SYNC_TAB_INDEX");
-    },
-    selectNext(fromValue) {
-      send({ type: "TAB_FOCUS", value: fromValue, src: "selectNext" });
-      send({ type: "ARROW_NEXT", src: "selectNext" });
-    },
-    selectPrev(fromValue) {
-      send({ type: "TAB_FOCUS", value: fromValue, src: "selectPrev" });
-      send({ type: "ARROW_PREV", src: "selectPrev" });
-    },
-    focus() {
-      dom.getSelectedTriggerEl(state.context)?.focus();
-    },
-    getTriggerState,
-    rootProps: normalize.element({
-      ...parts.root.attrs,
-      id: dom.getRootId(state.context),
-      "data-orientation": state.context.orientation,
-      "data-focus": (0, import_dom_query2.dataAttr)(focused),
-      dir: state.context.dir
-    }),
-    listProps: normalize.element({
-      ...parts.list.attrs,
-      id: dom.getListId(state.context),
-      role: "tablist",
-      dir: state.context.dir,
-      "data-focus": (0, import_dom_query2.dataAttr)(focused),
-      "aria-orientation": state.context.orientation,
-      "data-orientation": state.context.orientation,
-      "aria-label": translations?.listLabel,
-      onKeyDown(event) {
-        if (event.defaultPrevented)
-          return;
-        const evt = (0, import_dom_event.getNativeEvent)(event);
-        if (!(0, import_dom_query2.isSelfTarget)(evt))
-          return;
-        if (evt.isComposing)
-          return;
-        const keyMap = {
-          ArrowDown() {
-            if (isHorizontal)
-              return;
-            send({ type: "ARROW_NEXT", key: "ArrowDown" });
-          },
-          ArrowUp() {
-            if (isHorizontal)
-              return;
-            send({ type: "ARROW_PREV", key: "ArrowUp" });
-          },
-          ArrowLeft() {
-            if (isVertical)
-              return;
-            send({ type: "ARROW_PREV", key: "ArrowLeft" });
-          },
-          ArrowRight() {
-            if (isVertical)
-              return;
-            send({ type: "ARROW_NEXT", key: "ArrowRight" });
-          },
-          Home() {
-            send("HOME");
-          },
-          End() {
-            send("END");
-          },
-          Enter() {
-            send({ type: "ENTER" });
-          }
-        };
-        let key = (0, import_dom_event.getEventKey)(event, state.context);
-        const exec = keyMap[key];
-        if (exec) {
-          event.preventDefault();
-          exec(event);
-        }
-      }
-    }),
-    getTriggerProps(props2) {
-      const { value, disabled } = props2;
-      const triggerState = getTriggerState(props2);
-      return normalize.button({
-        ...parts.trigger.attrs,
-        role: "tab",
-        type: "button",
-        disabled,
-        dir: state.context.dir,
-        "data-orientation": state.context.orientation,
-        "data-disabled": (0, import_dom_query2.dataAttr)(disabled),
-        "aria-disabled": disabled,
-        "data-value": value,
-        "aria-selected": triggerState.selected,
-        "data-selected": (0, import_dom_query2.dataAttr)(triggerState.selected),
-        "data-focus": (0, import_dom_query2.dataAttr)(triggerState.focused),
-        "aria-controls": triggerState.selected ? dom.getContentId(state.context, value) : void 0,
-        "data-ownedby": dom.getListId(state.context),
-        id: dom.getTriggerId(state.context, value),
-        tabIndex: triggerState.selected && composite ? 0 : -1,
-        onFocus() {
-          send({ type: "TAB_FOCUS", value });
-        },
-        onBlur(event) {
-          const target = event.relatedTarget;
-          if (target?.getAttribute("role") !== "tab") {
-            send({ type: "TAB_BLUR" });
-          }
-        },
-        onClick(event) {
-          if (event.defaultPrevented)
-            return;
-          if (disabled)
-            return;
-          if ((0, import_dom_query2.isSafari)()) {
-            event.currentTarget.focus();
-          }
-          send({ type: "TAB_CLICK", value });
-        }
-      });
-    },
-    getContentProps(props2) {
-      const { value } = props2;
-      const selected = state.context.value === value;
-      return normalize.element({
-        ...parts.content.attrs,
-        dir: state.context.dir,
-        id: dom.getContentId(state.context, value),
-        tabIndex: composite ? 0 : -1,
-        "aria-labelledby": dom.getTriggerId(state.context, value),
-        role: "tabpanel",
-        "data-ownedby": dom.getListId(state.context),
-        "data-selected": (0, import_dom_query2.dataAttr)(selected),
-        "data-orientation": state.context.orientation,
-        hidden: !selected
-      });
-    },
-    indicatorProps: normalize.element({
-      id: dom.getIndicatorId(state.context),
-      ...parts.indicator.attrs,
-      dir: state.context.dir,
-      "data-orientation": state.context.orientation,
-      style: {
-        "--transition-property": "left, right, top, bottom, width, height",
-        "--left": indicator.rect?.left,
-        "--top": indicator.rect?.top,
-        "--width": indicator.rect?.width,
-        "--height": indicator.rect?.height,
-        position: "absolute",
-        willChange: "var(--transition-property)",
-        transitionProperty: "var(--transition-property)",
-        transitionDuration: indicator.transition ? "var(--transition-duration, 150ms)" : "0ms",
-        transitionTimingFunction: "var(--transition-timing-function)",
-        [isHorizontal ? "left" : "top"]: isHorizontal ? "var(--left)" : "var(--top)"
-      }
-    })
-  };
-}
-
-// src/tabs.machine.ts
-var import_core = require("@zag-js/core");
-var import_dom_event2 = require("@zag-js/dom-event");
-var import_dom_query3 = require("@zag-js/dom-query");
-var import_element_rect = require("@zag-js/element-rect");
-var import_utils2 = require("@zag-js/utils");
-var { not } = import_core.guards;
-function machine(userContext) {
-  const ctx = (0, import_utils2.compact)(userContext);
-  return (0, import_core.createMachine)(
-    {
-      initial: "idle",
-      context: {
-        dir: "ltr",
-        orientation: "horizontal",
-        activationMode: "automatic",
-        value: null,
-        loopFocus: true,
-        composite: true,
-        ...ctx,
-        focusedValue: ctx.value ?? null,
-        indicatorState: {
-          rendered: false,
-          transition: false,
-          rect: { left: "0px", top: "0px", width: "0px", height: "0px" }
-        }
-      },
-      watch: {
-        value: ["allowIndicatorTransition", "syncIndicatorRect", "syncTabIndex", "clickIfLink"],
-        dir: ["syncIndicatorRect"],
-        orientation: ["syncIndicatorRect"]
-      },
-      on: {
-        SET_VALUE: {
-          actions: "setValue"
-        },
-        CLEAR_VALUE: {
-          actions: "clearValue"
-        },
-        SET_INDICATOR_RECT: {
-          actions: "setIndicatorRect"
-        },
-        SYNC_TAB_INDEX: {
-          actions: "syncTabIndex"
-        }
-      },
-      created: ["syncFocusedValue"],
-      entry: ["checkRenderedElements", "syncIndicatorRect", "syncTabIndex"],
-      exit: ["cleanupObserver"],
-      states: {
-        idle: {
-          on: {
-            TAB_FOCUS: {
-              target: "focused",
-              actions: "setFocusedValue"
-            },
-            TAB_CLICK: {
-              target: "focused",
-              actions: ["setFocusedValue", "setValue"]
-            }
-          }
-        },
-        focused: {
-          on: {
-            TAB_CLICK: {
-              target: "focused",
-              actions: ["setFocusedValue", "setValue"]
-            },
-            ARROW_PREV: [
-              {
-                guard: "selectOnFocus",
-                actions: ["focusPrevTab", "selectFocusedTab"]
-              },
-              {
-                actions: "focusPrevTab"
-              }
-            ],
-            ARROW_NEXT: [
-              {
-                guard: "selectOnFocus",
-                actions: ["focusNextTab", "selectFocusedTab"]
-              },
-              {
-                actions: "focusNextTab"
-              }
-            ],
-            HOME: [
-              {
-                guard: "selectOnFocus",
-                actions: ["focusFirstTab", "selectFocusedTab"]
-              },
-              {
-                actions: "focusFirstTab"
-              }
-            ],
-            END: [
-              {
-                guard: "selectOnFocus",
-                actions: ["focusLastTab", "selectFocusedTab"]
-              },
-              {
-                actions: "focusLastTab"
-              }
-            ],
-            ENTER: {
-              guard: not("selectOnFocus"),
-              actions: "selectFocusedTab"
-            },
-            TAB_FOCUS: {
-              actions: ["setFocusedValue"]
-            },
-            TAB_BLUR: {
-              target: "idle",
-              actions: "clearFocusedValue"
-            }
-          }
-        }
-      }
-    },
-    {
-      guards: {
-        selectOnFocus: (ctx2) => ctx2.activationMode === "automatic"
-      },
-      actions: {
-        syncFocusedValue(ctx2) {
-          if (ctx2.value != null && ctx2.focusedValue == null) {
-            ctx2.focusedValue = ctx2.value;
-          }
-        },
-        selectFocusedTab(ctx2) {
-          (0, import_dom_query3.raf)(() => {
-            set.value(ctx2, ctx2.focusedValue);
-          });
-        },
-        setFocusedValue(ctx2, evt) {
-          if (evt.value == null)
-            return;
-          set.focusedValue(ctx2, evt.value);
-        },
-        clearFocusedValue(ctx2) {
-          set.focusedValue(ctx2, null);
-        },
-        setValue(ctx2, evt) {
-          set.value(ctx2, evt.value);
-        },
-        clearValue(ctx2) {
-          set.value(ctx2, null);
-        },
-        focusFirstTab(ctx2) {
-          (0, import_dom_query3.raf)(() => {
-            dom.getFirstTriggerEl(ctx2)?.focus();
-          });
-        },
-        focusLastTab(ctx2) {
-          (0, import_dom_query3.raf)(() => {
-            dom.getLastTriggerEl(ctx2)?.focus();
-          });
-        },
-        focusNextTab(ctx2) {
-          if (!ctx2.focusedValue)
-            return;
-          const triggerEl = dom.getNextTriggerEl(ctx2, ctx2.focusedValue);
-          (0, import_dom_query3.raf)(() => {
-            if (ctx2.composite) {
-              triggerEl?.focus();
-            } else if (triggerEl?.dataset.value != null) {
-              set.focusedValue(ctx2, triggerEl.dataset.value);
-            }
-          });
-        },
-        focusPrevTab(ctx2) {
-          if (!ctx2.focusedValue)
-            return;
-          const triggerEl = dom.getPrevTriggerEl(ctx2, ctx2.focusedValue);
-          (0, import_dom_query3.raf)(() => {
-            if (ctx2.composite) {
-              triggerEl?.focus();
-            } else if (triggerEl?.dataset.value != null) {
-              set.focusedValue(ctx2, triggerEl.dataset.value);
-            }
-          });
-        },
-        checkRenderedElements(ctx2) {
-          ctx2.indicatorState.rendered = !!dom.getIndicatorEl(ctx2);
-        },
-        syncTabIndex(ctx2) {
-          (0, import_dom_query3.raf)(() => {
-            const contentEl = dom.getSelectedContentEl(ctx2);
-            if (!contentEl)
-              return;
-            const focusables = (0, import_dom_query3.getFocusables)(contentEl);
-            if (focusables.length > 0) {
-              contentEl.removeAttribute("tabindex");
-            } else {
-              contentEl.setAttribute("tabindex", "0");
-            }
-          });
-        },
-        cleanupObserver(ctx2) {
-          ctx2.indicatorCleanup?.();
-        },
-        allowIndicatorTransition(ctx2) {
-          ctx2.indicatorState.transition = true;
-        },
-        setIndicatorRect(ctx2, evt) {
-          const value = evt.id ?? ctx2.value;
-          if (!ctx2.indicatorState.rendered || !value)
-            return;
-          const triggerEl = dom.getTriggerEl(ctx2, value);
-          if (!triggerEl)
-            return;
-          ctx2.indicatorState.rect = dom.getRectById(ctx2, value);
-          (0, import_dom_query3.nextTick)(() => {
-            ctx2.indicatorState.transition = false;
-          });
-        },
-        syncIndicatorRect(ctx2) {
-          ctx2.indicatorCleanup?.();
-          const value = ctx2.value;
-          if (!ctx2.indicatorState.rendered || !value)
-            return;
-          const triggerEl = dom.getSelectedTriggerEl(ctx2);
-          if (!triggerEl)
-            return;
-          ctx2.indicatorCleanup = (0, import_element_rect.trackElementRect)(triggerEl, {
-            getRect(el) {
-              return dom.getOffsetRect(el);
-            },
-            onChange(rect) {
-              ctx2.indicatorState.rect = dom.resolveRect(rect);
-              (0, import_dom_query3.nextTick)(() => {
-                ctx2.indicatorState.transition = false;
-              });
-            }
-          });
-        },
-        clickIfLink(ctx2) {
-          (0, import_dom_event2.clickIfLink)(dom.getSelectedTriggerEl(ctx2));
-        }
-      }
-    }
-  );
-}
-var invoke = {
-  change: (ctx) => {
-    if (ctx.value == null)
-      return;
-    ctx.onValueChange?.({ value: ctx.value });
-  },
-  focusChange: (ctx) => {
-    if (ctx.focusedValue == null)
-      return;
-    ctx.onFocusChange?.({ focusedValue: ctx.focusedValue });
-  }
-};
-var set = {
-  value: (ctx, value) => {
-    if ((0, import_utils2.isEqual)(value, ctx.value))
-      return;
-    ctx.value = value;
-    invoke.change(ctx);
-  },
-  focusedValue: (ctx, value) => {
-    if ((0, import_utils2.isEqual)(value, ctx.focusedValue))
-      return;
-    ctx.focusedValue = value;
-    invoke.focusChange(ctx);
-  }
-};
-
-// src/tabs.props.ts
-var import_types = require("@zag-js/types");
-var import_utils3 = require("@zag-js/utils");
-var props = (0, import_types.createProps)()([
-  "activationMode",
-  "composite",
-  "dir",
-  "getRootNode",
-  "id",
-  "ids",
-  "loopFocus",
-  "onFocusChange",
-  "onValueChange",
-  "orientation",
-  "translations",
-  "value"
-]);
-var splitProps = (0, import_utils3.createSplitProps)(props);
-var triggerProps = (0, import_types.createProps)()(["disabled", "value"]);
-var splitTriggerProps = (0, import_utils3.createSplitProps)(triggerProps);
-var contentProps = (0, import_types.createProps)()(["value"]);
-var splitContentProps = (0, import_utils3.createSplitProps)(contentProps);
-// Annotate the CommonJS export names for ESM import in node:
-0 && (module.exports = {
-  anatomy,
-  connect,
-  contentProps,
-  machine,
-  props,
-  splitContentProps,
-  splitProps,
-  splitTriggerProps,
-  triggerProps
-});
+"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);var src_exports={};__export(src_exports,{anatomy:()=>anatomy,connect:()=>connect,contentProps:()=>contentProps,machine:()=>machine,props:()=>props,splitContentProps:()=>splitContentProps,splitProps:()=>splitProps,splitTriggerProps:()=>splitTriggerProps,triggerProps:()=>triggerProps});module.exports=__toCommonJS(src_exports);var import_anatomy=require("@zag-js/anatomy");var anatomy=(0,import_anatomy.createAnatomy)("tabs").parts("root","list","trigger","content","indicator");var parts=anatomy.build();var import_dom_event=require("@zag-js/dom-event");var import_dom_query2=require("@zag-js/dom-query");var import_dom_query=require("@zag-js/dom-query");var import_utils=require("@zag-js/utils");var dom=(0,import_dom_query.createScope)({getRootId:ctx=>ctx.ids?.root??`tabs:${ctx.id}`,getListId:ctx=>ctx.ids?.list??`tabs:${ctx.id}:list`,getContentId:(ctx,id)=>ctx.ids?.content??`tabs:${ctx.id}:content-${id}`,getTriggerId:(ctx,id)=>ctx.ids?.trigger??`tabs:${ctx.id}:trigger-${id}`,getIndicatorId:ctx=>ctx.ids?.indicator??`tabs:${ctx.id}:indicator`,getListEl:ctx=>dom.getById(ctx,dom.getListId(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.getListId(ctx));const selector=`[role=tab][data-ownedby='${ownerId}']:not([disabled])`;return(0,import_dom_query.queryAll)(dom.getListEl(ctx),selector)},getFirstTriggerEl:ctx=>(0,import_utils.first)(dom.getElements(ctx)),getLastTriggerEl:ctx=>(0,import_utils.last)(dom.getElements(ctx)),getNextTriggerEl:(ctx,id)=>(0,import_dom_query.nextById)(dom.getElements(ctx),dom.getTriggerId(ctx,id),ctx.loopFocus),getPrevTriggerEl:(ctx,id)=>(0,import_dom_query.prevById)(dom.getElements(ctx),dom.getTriggerId(ctx,id),ctx.loopFocus),getSelectedContentEl:ctx=>{if(!ctx.value)return;return dom.getContentEl(ctx,ctx.value)},getSelectedTriggerEl:ctx=>{if(!ctx.value)return;return dom.getTriggerEl(ctx,ctx.value)},getOffsetRect:el=>{return{left:el?.offsetLeft??0,top:el?.offsetTop??0,width:el?.offsetWidth??0,height:el?.offsetHeight??0}},getRectById:(ctx,id)=>{const tab=(0,import_dom_query.itemById)(dom.getElements(ctx),dom.getTriggerId(ctx,id));return dom.resolveRect(dom.getOffsetRect(tab))},resolveRect:rect=>({width:`${rect.width}px`,height:`${rect.height}px`,left:`${rect.left}px`,top:`${rect.top}px`})});function connect(state,send,normalize){const translations=state.context.translations;const focused=state.matches("focused");const isVertical=state.context.orientation==="vertical";const isHorizontal=state.context.orientation==="horizontal";const composite=state.context.composite;const indicator=state.context.indicatorState;function getTriggerState(props2){return{selected:state.context.value===props2.value,focused:state.context.focusedValue===props2.value,disabled:!!props2.disabled}}return{value:state.context.value,focusedValue:state.context.focusedValue,setValue(value){send({type:"SET_VALUE",value})},clearValue(){send({type:"CLEAR_VALUE"})},setIndicatorRect(value){const id=dom.getTriggerId(state.context,value);send({type:"SET_INDICATOR_RECT",id})},syncTabIndex(){send("SYNC_TAB_INDEX")},selectNext(fromValue){send({type:"TAB_FOCUS",value:fromValue,src:"selectNext"});send({type:"ARROW_NEXT",src:"selectNext"})},selectPrev(fromValue){send({type:"TAB_FOCUS",value:fromValue,src:"selectPrev"});send({type:"ARROW_PREV",src:"selectPrev"})},focus(){dom.getSelectedTriggerEl(state.context)?.focus()},getTriggerState,rootProps:normalize.element({...parts.root.attrs,id:dom.getRootId(state.context),"data-orientation":state.context.orientation,"data-focus":(0,import_dom_query2.dataAttr)(focused),dir:state.context.dir}),listProps:normalize.element({...parts.list.attrs,id:dom.getListId(state.context),role:"tablist",dir:state.context.dir,"data-focus":(0,import_dom_query2.dataAttr)(focused),"aria-orientation":state.context.orientation,"data-orientation":state.context.orientation,"aria-label":translations?.listLabel,onKeyDown(event){if(event.defaultPrevented)return;const evt=(0,import_dom_event.getNativeEvent)(event);if(!(0,import_dom_query2.isSelfTarget)(evt))return;if(evt.isComposing)return;const keyMap={ArrowDown(){if(isHorizontal)return;send({type:"ARROW_NEXT",key:"ArrowDown"})},ArrowUp(){if(isHorizontal)return;send({type:"ARROW_PREV",key:"ArrowUp"})},ArrowLeft(){if(isVertical)return;send({type:"ARROW_PREV",key:"ArrowLeft"})},ArrowRight(){if(isVertical)return;send({type:"ARROW_NEXT",key:"ArrowRight"})},Home(){send("HOME")},End(){send("END")},Enter(){send({type:"ENTER"})}};let key=(0,import_dom_event.getEventKey)(event,state.context);const exec=keyMap[key];if(exec){event.preventDefault();exec(event)}}}),getTriggerProps(props2){const{value,disabled}=props2;const triggerState=getTriggerState(props2);return normalize.button({...parts.trigger.attrs,role:"tab",type:"button",disabled,dir:state.context.dir,"data-orientation":state.context.orientation,"data-disabled":(0,import_dom_query2.dataAttr)(disabled),"aria-disabled":disabled,"data-value":value,"aria-selected":triggerState.selected,"data-selected":(0,import_dom_query2.dataAttr)(triggerState.selected),"data-focus":(0,import_dom_query2.dataAttr)(triggerState.focused),"aria-controls":triggerState.selected?dom.getContentId(state.context,value):void 0,"data-ownedby":dom.getListId(state.context),id:dom.getTriggerId(state.context,value),tabIndex:triggerState.selected&&composite?0:-1,onFocus(){send({type:"TAB_FOCUS",value})},onBlur(event){const target=event.relatedTarget;if(target?.getAttribute("role")!=="tab"){send({type:"TAB_BLUR"})}},onClick(event){if(event.defaultPrevented)return;if(disabled)return;if((0,import_dom_query2.isSafari)()){event.currentTarget.focus()}send({type:"TAB_CLICK",value})}})},getContentProps(props2){const{value}=props2;const selected=state.context.value===value;return normalize.element({...parts.content.attrs,dir:state.context.dir,id:dom.getContentId(state.context,value),tabIndex:composite?0:-1,"aria-labelledby":dom.getTriggerId(state.context,value),role:"tabpanel","data-ownedby":dom.getListId(state.context),"data-selected":(0,import_dom_query2.dataAttr)(selected),"data-orientation":state.context.orientation,hidden:!selected})},indicatorProps:normalize.element({id:dom.getIndicatorId(state.context),...parts.indicator.attrs,dir:state.context.dir,"data-orientation":state.context.orientation,style:{"--transition-property":"left, right, top, bottom, width, height","--left":indicator.rect?.left,"--top":indicator.rect?.top,"--width":indicator.rect?.width,"--height":indicator.rect?.height,position:"absolute",willChange:"var(--transition-property)",transitionProperty:"var(--transition-property)",transitionDuration:indicator.transition?"var(--transition-duration, 150ms)":"0ms",transitionTimingFunction:"var(--transition-timing-function)",[isHorizontal?"left":"top"]:isHorizontal?"var(--left)":"var(--top)"}})}}var import_core=require("@zag-js/core");var import_dom_event2=require("@zag-js/dom-event");var import_dom_query3=require("@zag-js/dom-query");var import_element_rect=require("@zag-js/element-rect");var import_utils2=require("@zag-js/utils");var{not}=import_core.guards;function machine(userContext){const ctx=(0,import_utils2.compact)(userContext);return(0,import_core.createMachine)({initial:"idle",context:{dir:"ltr",orientation:"horizontal",activationMode:"automatic",value:null,loopFocus:true,composite:true,...ctx,focusedValue:ctx.value??null,indicatorState:{rendered:false,transition:false,rect:{left:"0px",top:"0px",width:"0px",height:"0px"}}},watch:{value:["allowIndicatorTransition","syncIndicatorRect","syncTabIndex","clickIfLink"],dir:["syncIndicatorRect"],orientation:["syncIndicatorRect"]},on:{SET_VALUE:{actions:"setValue"},CLEAR_VALUE:{actions:"clearValue"},SET_INDICATOR_RECT:{actions:"setIndicatorRect"},SYNC_TAB_INDEX:{actions:"syncTabIndex"}},created:["syncFocusedValue"],entry:["checkRenderedElements","syncIndicatorRect","syncTabIndex"],exit:["cleanupObserver"],states:{idle:{on:{TAB_FOCUS:{target:"focused",actions:"setFocusedValue"},TAB_CLICK:{target:"focused",actions:["setFocusedValue","setValue"]}}},focused:{on:{TAB_CLICK:{target:"focused",actions:["setFocusedValue","setValue"]},ARROW_PREV:[{guard:"selectOnFocus",actions:["focusPrevTab","selectFocusedTab"]},{actions:"focusPrevTab"}],ARROW_NEXT:[{guard:"selectOnFocus",actions:["focusNextTab","selectFocusedTab"]},{actions:"focusNextTab"}],HOME:[{guard:"selectOnFocus",actions:["focusFirstTab","selectFocusedTab"]},{actions:"focusFirstTab"}],END:[{guard:"selectOnFocus",actions:["focusLastTab","selectFocusedTab"]},{actions:"focusLastTab"}],ENTER:{guard:not("selectOnFocus"),actions:"selectFocusedTab"},TAB_FOCUS:{actions:["setFocusedValue"]},TAB_BLUR:{target:"idle",actions:"clearFocusedValue"}}}}},{guards:{selectOnFocus:ctx2=>ctx2.activationMode==="automatic"},actions:{syncFocusedValue(ctx2){if(ctx2.value!=null&&ctx2.focusedValue==null){ctx2.focusedValue=ctx2.value}},selectFocusedTab(ctx2){(0,import_dom_query3.raf)(()=>{set.value(ctx2,ctx2.focusedValue)})},setFocusedValue(ctx2,evt){if(evt.value==null)return;set.focusedValue(ctx2,evt.value)},clearFocusedValue(ctx2){set.focusedValue(ctx2,null)},setValue(ctx2,evt){set.value(ctx2,evt.value)},clearValue(ctx2){set.value(ctx2,null)},focusFirstTab(ctx2){(0,import_dom_query3.raf)(()=>{dom.getFirstTriggerEl(ctx2)?.focus()})},focusLastTab(ctx2){(0,import_dom_query3.raf)(()=>{dom.getLastTriggerEl(ctx2)?.focus()})},focusNextTab(ctx2){if(!ctx2.focusedValue)return;const triggerEl=dom.getNextTriggerEl(ctx2,ctx2.focusedValue);(0,import_dom_query3.raf)(()=>{if(ctx2.composite){triggerEl?.focus()}else if(triggerEl?.dataset.value!=null){set.focusedValue(ctx2,triggerEl.dataset.value)}})},focusPrevTab(ctx2){if(!ctx2.focusedValue)return;const triggerEl=dom.getPrevTriggerEl(ctx2,ctx2.focusedValue);(0,import_dom_query3.raf)(()=>{if(ctx2.composite){triggerEl?.focus()}else if(triggerEl?.dataset.value!=null){set.focusedValue(ctx2,triggerEl.dataset.value)}})},checkRenderedElements(ctx2){ctx2.indicatorState.rendered=!!dom.getIndicatorEl(ctx2)},syncTabIndex(ctx2){(0,import_dom_query3.raf)(()=>{const contentEl=dom.getSelectedContentEl(ctx2);if(!contentEl)return;const focusables=(0,import_dom_query3.getFocusables)(contentEl);if(focusables.length>0){contentEl.removeAttribute("tabindex")}else{contentEl.setAttribute("tabindex","0")}})},cleanupObserver(ctx2){ctx2.indicatorCleanup?.()},allowIndicatorTransition(ctx2){ctx2.indicatorState.transition=true},setIndicatorRect(ctx2,evt){const value=evt.id??ctx2.value;if(!ctx2.indicatorState.rendered||!value)return;const triggerEl=dom.getTriggerEl(ctx2,value);if(!triggerEl)return;ctx2.indicatorState.rect=dom.getRectById(ctx2,value);(0,import_dom_query3.nextTick)(()=>{ctx2.indicatorState.transition=false})},syncIndicatorRect(ctx2){ctx2.indicatorCleanup?.();const value=ctx2.value;if(!ctx2.indicatorState.rendered||!value)return;const triggerEl=dom.getSelectedTriggerEl(ctx2);if(!triggerEl)return;ctx2.indicatorCleanup=(0,import_element_rect.trackElementRect)(triggerEl,{getRect(el){return dom.getOffsetRect(el)},onChange(rect){ctx2.indicatorState.rect=dom.resolveRect(rect);(0,import_dom_query3.nextTick)(()=>{ctx2.indicatorState.transition=false})}})},clickIfLink(ctx2){(0,import_dom_event2.clickIfLink)(dom.getSelectedTriggerEl(ctx2))}}})}var invoke={change:ctx=>{if(ctx.value==null)return;ctx.onValueChange?.({value:ctx.value})},focusChange:ctx=>{if(ctx.focusedValue==null)return;ctx.onFocusChange?.({focusedValue:ctx.focusedValue})}};var set={value:(ctx,value)=>{if((0,import_utils2.isEqual)(value,ctx.value))return;ctx.value=value;invoke.change(ctx)},focusedValue:(ctx,value)=>{if((0,import_utils2.isEqual)(value,ctx.focusedValue))return;ctx.focusedValue=value;invoke.focusChange(ctx)}};var import_types=require("@zag-js/types");var import_utils3=require("@zag-js/utils");var props=(0,import_types.createProps)()(["activationMode","composite","dir","getRootNode","id","ids","loopFocus","onFocusChange","onValueChange","orientation","translations","value"]);var splitProps=(0,import_utils3.createSplitProps)(props);var triggerProps=(0,import_types.createProps)()(["disabled","value"]);var splitTriggerProps=(0,import_utils3.createSplitProps)(triggerProps);var contentProps=(0,import_types.createProps)()(["value"]);var splitContentProps=(0,import_utils3.createSplitProps)(contentProps);0&&(module.exports={anatomy,connect,contentProps,machine,props,splitContentProps,splitProps,splitTriggerProps,triggerProps});
 //# sourceMappingURL=index.js.map