@zag-js/tabs 0.52.0 → 0.54.0

package/dist/index.mjs

@@ -1,2 +1,555 @@
-import{createAnatomy}from"@zag-js/anatomy";var anatomy=createAnatomy("tabs").parts("root","list","trigger","content","indicator");var parts=anatomy.build();import{getEventKey}from"@zag-js/dom-event";import{dataAttr,isComposingEvent,isSafari,isSelfTarget}from"@zag-js/dom-query";import{createScope,itemById,nextById,prevById,queryAll}from"@zag-js/dom-query";import{first,last}from"@zag-js/utils";var dom=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 queryAll(dom.getListEl(ctx),selector)},getFirstTriggerEl:ctx=>first(dom.getElements(ctx)),getLastTriggerEl:ctx=>last(dom.getElements(ctx)),getNextTriggerEl:(ctx,id)=>nextById(dom.getElements(ctx),dom.getTriggerId(ctx,id),ctx.loopFocus),getPrevTriggerEl:(ctx,id)=>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=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":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":dataAttr(focused),"aria-orientation":state.context.orientation,"data-orientation":state.context.orientation,"aria-label":translations?.listLabel,onKeyDown(event){if(event.defaultPrevented)return;if(!isSelfTarget(event))return;if(isComposingEvent(event))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=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":dataAttr(disabled),"aria-disabled":disabled,"data-value":value,"aria-selected":triggerState.selected,"data-selected":dataAttr(triggerState.selected),"data-focus":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(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":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)"}})}}import{createMachine,guards}from"@zag-js/core";import{clickIfLink}from"@zag-js/dom-event";import{nextTick,raf,getFocusables}from"@zag-js/dom-query";import{trackElementRect}from"@zag-js/element-rect";import{compact,isEqual}from"@zag-js/utils";var{not}=guards;function machine(userContext){const ctx=compact(userContext);return 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){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){raf(()=>{dom.getFirstTriggerEl(ctx2)?.focus()})},focusLastTab(ctx2){raf(()=>{dom.getLastTriggerEl(ctx2)?.focus()})},focusNextTab(ctx2){if(!ctx2.focusedValue)return;const triggerEl=dom.getNextTriggerEl(ctx2,ctx2.focusedValue);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);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){raf(()=>{const contentEl=dom.getSelectedContentEl(ctx2);if(!contentEl)return;const focusables=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);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=trackElementRect(triggerEl,{getRect(el){return dom.getOffsetRect(el)},onChange(rect){ctx2.indicatorState.rect=dom.resolveRect(rect);nextTick(()=>{ctx2.indicatorState.transition=false})}})},clickIfLink(ctx2){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(isEqual(value,ctx.value))return;ctx.value=value;invoke.change(ctx)},focusedValue:(ctx,value)=>{if(isEqual(value,ctx.focusedValue))return;ctx.focusedValue=value;invoke.focusChange(ctx)}};import{createProps}from"@zag-js/types";import{createSplitProps}from"@zag-js/utils";var props=createProps()(["activationMode","composite","dir","getRootNode","id","ids","loopFocus","onFocusChange","onValueChange","orientation","translations","value"]);var splitProps=createSplitProps(props);var triggerProps=createProps()(["disabled","value"]);var splitTriggerProps=createSplitProps(triggerProps);var contentProps=createProps()(["value"]);var splitContentProps=createSplitProps(contentProps);export{anatomy,connect,contentProps,machine,props,splitContentProps,splitProps,splitTriggerProps,triggerProps};
+// src/tabs.anatomy.ts
+import { createAnatomy } from "@zag-js/anatomy";
+var anatomy = createAnatomy("tabs").parts("root", "list", "trigger", "content", "indicator");
+var parts = anatomy.build();
+
+// src/tabs.connect.ts
+import { getEventKey } from "@zag-js/dom-event";
+import { dataAttr, isComposingEvent, isSafari, isSelfTarget } from "@zag-js/dom-query";
+
+// src/tabs.dom.ts
+import { createScope, itemById, nextById, prevById, queryAll } from "@zag-js/dom-query";
+import { first, last } from "@zag-js/utils";
+var dom = 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 queryAll(dom.getListEl(ctx), selector);
+  },
+  getFirstTriggerEl: (ctx) => first(dom.getElements(ctx)),
+  getLastTriggerEl: (ctx) => last(dom.getElements(ctx)),
+  getNextTriggerEl: (ctx, id) => nextById(dom.getElements(ctx), dom.getTriggerId(ctx, id), ctx.loopFocus),
+  getPrevTriggerEl: (ctx, id) => 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 = 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();
+    },
+    getRootProps() {
+      return normalize.element({
+        ...parts.root.attrs,
+        id: dom.getRootId(state.context),
+        "data-orientation": state.context.orientation,
+        "data-focus": dataAttr(focused),
+        dir: state.context.dir
+      });
+    },
+    getListProps() {
+      return normalize.element({
+        ...parts.list.attrs,
+        id: dom.getListId(state.context),
+        role: "tablist",
+        dir: state.context.dir,
+        "data-focus": dataAttr(focused),
+        "aria-orientation": state.context.orientation,
+        "data-orientation": state.context.orientation,
+        "aria-label": translations?.listLabel,
+        onKeyDown(event) {
+          if (event.defaultPrevented)
+            return;
+          if (!isSelfTarget(event))
+            return;
+          if (isComposingEvent(event))
+            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 = getEventKey(event, state.context);
+          const exec = keyMap[key];
+          if (exec) {
+            event.preventDefault();
+            exec(event);
+          }
+        }
+      });
+    },
+    getTriggerState,
+    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": dataAttr(disabled),
+        "aria-disabled": disabled,
+        "data-value": value,
+        "aria-selected": triggerState.selected,
+        "data-selected": dataAttr(triggerState.selected),
+        "data-focus": 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 (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": dataAttr(selected),
+        "data-orientation": state.context.orientation,
+        hidden: !selected
+      });
+    },
+    getIndicatorProps() {
+      return 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
+import { createMachine, guards } from "@zag-js/core";
+import { clickIfLink } from "@zag-js/dom-event";
+import { nextTick, raf, getFocusables } from "@zag-js/dom-query";
+import { trackElementRect } from "@zag-js/element-rect";
+import { compact, isEqual } from "@zag-js/utils";
+var { not } = guards;
+function machine(userContext) {
+  const ctx = compact(userContext);
+  return 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) {
+          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) {
+          raf(() => {
+            dom.getFirstTriggerEl(ctx2)?.focus();
+          });
+        },
+        focusLastTab(ctx2) {
+          raf(() => {
+            dom.getLastTriggerEl(ctx2)?.focus();
+          });
+        },
+        focusNextTab(ctx2) {
+          if (!ctx2.focusedValue)
+            return;
+          const triggerEl = dom.getNextTriggerEl(ctx2, ctx2.focusedValue);
+          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);
+          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) {
+          raf(() => {
+            const contentEl = dom.getSelectedContentEl(ctx2);
+            if (!contentEl)
+              return;
+            const focusables = 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);
+          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 = trackElementRect(triggerEl, {
+            getRect(el) {
+              return dom.getOffsetRect(el);
+            },
+            onChange(rect) {
+              ctx2.indicatorState.rect = dom.resolveRect(rect);
+              nextTick(() => {
+                ctx2.indicatorState.transition = false;
+              });
+            }
+          });
+        },
+        clickIfLink(ctx2) {
+          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 (isEqual(value, ctx.value))
+      return;
+    ctx.value = value;
+    invoke.change(ctx);
+  },
+  focusedValue: (ctx, value) => {
+    if (isEqual(value, ctx.focusedValue))
+      return;
+    ctx.focusedValue = value;
+    invoke.focusChange(ctx);
+  }
+};
+
+// src/tabs.props.ts
+import { createProps } from "@zag-js/types";
+import { createSplitProps } from "@zag-js/utils";
+var props = createProps()([
+  "activationMode",
+  "composite",
+  "dir",
+  "getRootNode",
+  "id",
+  "ids",
+  "loopFocus",
+  "onFocusChange",
+  "onValueChange",
+  "orientation",
+  "translations",
+  "value"
+]);
+var splitProps = createSplitProps(props);
+var triggerProps = createProps()(["disabled", "value"]);
+var splitTriggerProps = createSplitProps(triggerProps);
+var contentProps = createProps()(["value"]);
+var splitContentProps = createSplitProps(contentProps);
+export {
+  anatomy,
+  connect,
+  contentProps,
+  machine,
+  props,
+  splitContentProps,
+  splitProps,
+  splitTriggerProps,
+  triggerProps
+};
 //# sourceMappingURL=index.mjs.map