@zag-js/tabs 0.16.0 → 0.18.0

package/dist/index.d.mts

@@ -1,5 +1,5 @@
 import * as _zag_js_anatomy from '@zag-js/anatomy';
-import { PropTypes, RequiredBy, DirectionProperty, CommonProperties, Context, NormalizeProps } from '@zag-js/types';
+import { RequiredBy, PropTypes, DirectionProperty, CommonProperties, Context, NormalizeProps } from '@zag-js/types';
 import * as _zag_js_core from '@zag-js/core';
 import { StateMachine } from '@zag-js/core';
 
@@ -59,22 +59,36 @@ type PublicContext = DirectionProperty & CommonProperties & {
      * Callback to be called when the selected/active tab changes
      */
     onChange?: (details: {
-        value: string | null;
+        value: string;
     }) => void;
     /**
      * Callback to be called when the focused tab changes
      */
     onFocus?: (details: {
-        value: string | null;
+        value: string;
     }) => void;
+};
+type UserDefinedContext = RequiredBy<PublicContext, "id">;
+type ComputedContext = Readonly<{
     /**
-     * Callback to be called when a tab's close button is clicked
+     * @computed
+     * Whether the tab is in the horizontal orientation
      */
-    onDelete?: (details: {
-        value: string;
-    }) => void;
+    isHorizontal: boolean;
+    /**
+     * @computed
+     * Whether the tab is in the vertical orientation
+     */
+    isVertical: boolean;
+}>;
+type PrivateContext = Context<{}>;
+type MachineContext = PublicContext & ComputedContext & PrivateContext;
+type MachineState = {
+    value: "idle" | "focused";
 };
-type PublicApi<T extends PropTypes = PropTypes> = {
+type State = StateMachine.State<MachineContext, MachineState>;
+type Send = StateMachine.Send<StateMachine.AnyEventObject>;
+type MachineApi<T extends PropTypes = PropTypes> = {
     /**
      * The current value of the tabs.
      */
@@ -105,29 +119,9 @@ type PublicApi<T extends PropTypes = PropTypes> = {
     getContentProps({ value }: ContentProps): T["element"];
     indicatorProps: T["element"];
 };
-type UserDefinedContext = RequiredBy<PublicContext, "id">;
-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;
-}>;
-type PrivateContext = Context<{}>;
-type MachineContext = PublicContext & ComputedContext & PrivateContext;
-type MachineState = {
-    value: "idle" | "focused";
-};
-type State = StateMachine.State<MachineContext, MachineState>;
-type Send = StateMachine.Send<StateMachine.AnyEventObject>;
 
-declare function connect<T extends PropTypes>(state: State, send: Send, normalize: NormalizeProps<T>): PublicApi<T>;
+declare function connect<T extends PropTypes>(state: State, send: Send, normalize: NormalizeProps<T>): MachineApi<T>;
 
 declare function machine(userContext: UserDefinedContext): _zag_js_core.Machine<MachineContext, MachineState, _zag_js_core.StateMachine.AnyEventObject>;
 
-export { ContentProps, UserDefinedContext as Context, PublicApi, TriggerProps, anatomy, connect, machine };
+export { MachineApi as Api, ContentProps, UserDefinedContext as Context, TriggerProps, anatomy, connect, machine };

package/dist/index.d.ts

@@ -1,5 +1,5 @@
 import * as _zag_js_anatomy from '@zag-js/anatomy';
-import { PropTypes, RequiredBy, DirectionProperty, CommonProperties, Context, NormalizeProps } from '@zag-js/types';
+import { RequiredBy, PropTypes, DirectionProperty, CommonProperties, Context, NormalizeProps } from '@zag-js/types';
 import * as _zag_js_core from '@zag-js/core';
 import { StateMachine } from '@zag-js/core';
 
@@ -59,22 +59,36 @@ type PublicContext = DirectionProperty & CommonProperties & {
      * Callback to be called when the selected/active tab changes
      */
     onChange?: (details: {
-        value: string | null;
+        value: string;
     }) => void;
     /**
      * Callback to be called when the focused tab changes
      */
     onFocus?: (details: {
-        value: string | null;
+        value: string;
     }) => void;
+};
+type UserDefinedContext = RequiredBy<PublicContext, "id">;
+type ComputedContext = Readonly<{
     /**
-     * Callback to be called when a tab's close button is clicked
+     * @computed
+     * Whether the tab is in the horizontal orientation
      */
-    onDelete?: (details: {
-        value: string;
-    }) => void;
+    isHorizontal: boolean;
+    /**
+     * @computed
+     * Whether the tab is in the vertical orientation
+     */
+    isVertical: boolean;
+}>;
+type PrivateContext = Context<{}>;
+type MachineContext = PublicContext & ComputedContext & PrivateContext;
+type MachineState = {
+    value: "idle" | "focused";
 };
-type PublicApi<T extends PropTypes = PropTypes> = {
+type State = StateMachine.State<MachineContext, MachineState>;
+type Send = StateMachine.Send<StateMachine.AnyEventObject>;
+type MachineApi<T extends PropTypes = PropTypes> = {
     /**
      * The current value of the tabs.
      */
@@ -105,29 +119,9 @@ type PublicApi<T extends PropTypes = PropTypes> = {
     getContentProps({ value }: ContentProps): T["element"];
     indicatorProps: T["element"];
 };
-type UserDefinedContext = RequiredBy<PublicContext, "id">;
-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;
-}>;
-type PrivateContext = Context<{}>;
-type MachineContext = PublicContext & ComputedContext & PrivateContext;
-type MachineState = {
-    value: "idle" | "focused";
-};
-type State = StateMachine.State<MachineContext, MachineState>;
-type Send = StateMachine.Send<StateMachine.AnyEventObject>;
 
-declare function connect<T extends PropTypes>(state: State, send: Send, normalize: NormalizeProps<T>): PublicApi<T>;
+declare function connect<T extends PropTypes>(state: State, send: Send, normalize: NormalizeProps<T>): MachineApi<T>;
 
 declare function machine(userContext: UserDefinedContext): _zag_js_core.Machine<MachineContext, MachineState, _zag_js_core.StateMachine.AnyEventObject>;
 
-export { ContentProps, UserDefinedContext as Context, PublicApi, TriggerProps, anatomy, connect, machine };
+export { MachineApi as Api, ContentProps, UserDefinedContext as Context, TriggerProps, anatomy, connect, machine };

package/dist/index.js

@@ -262,14 +262,7 @@ function machine(userContext) {
       entry: ["checkRenderedElements", "syncIndicatorRect", "setContentTabIndex"],
       exit: ["cleanupObserver"],
       watch: {
-        focusedValue: "invokeOnFocus",
-        value: [
-          "enableIndicatorTransition",
-          "invokeOnChange",
-          "setPrevSelectedTabs",
-          "syncIndicatorRect",
-          "setContentTabIndex"
-        ],
+        value: ["enableIndicatorTransition", "setPrevSelectedTabs", "syncIndicatorRect", "setContentTabIndex"],
         dir: ["syncIndicatorRect"],
         orientation: ["syncIndicatorRect"]
       },
@@ -359,16 +352,16 @@ function machine(userContext) {
       },
       actions: {
         setFocusedValue(ctx2, evt) {
-          ctx2.focusedValue = evt.value;
+          set.focusedValue(ctx2, evt.value);
         },
         clearFocusedValue(ctx2) {
-          ctx2.focusedValue = null;
+          set.focusedValue(ctx2, null);
         },
         setValue(ctx2, evt) {
-          ctx2.value = evt.value;
+          set.value(ctx2, evt.value);
         },
         clearValue(ctx2) {
-          ctx2.value = null;
+          set.value(ctx2, null);
         },
         focusFirstTab(ctx2) {
           (0, import_dom_query3.raf)(() => dom.getFirstEl(ctx2)?.focus());
@@ -391,12 +384,6 @@ function machine(userContext) {
         checkRenderedElements(ctx2) {
           ctx2.isIndicatorRendered = !!dom.getIndicatorEl(ctx2);
         },
-        invokeOnChange(ctx2) {
-          ctx2.onChange?.({ value: ctx2.value });
-        },
-        invokeOnFocus(ctx2) {
-          ctx2.onFocus?.({ value: ctx2.focusedValue });
-        },
         setPrevSelectedTabs(ctx2) {
           if (ctx2.value != null) {
             ctx2.previousValues = pushUnique(ctx2.previousValues, ctx2.value);
@@ -467,6 +454,28 @@ function pushUnique(arr, value) {
   newArr.push(value);
   return newArr;
 }
+var invoke = {
+  change: (ctx) => {
+    if (ctx.value == null)
+      return;
+    ctx.onChange?.({ value: ctx.value });
+  },
+  focusChange: (ctx) => {
+    if (ctx.focusedValue == null)
+      return;
+    ctx.onFocus?.({ value: ctx.focusedValue });
+  }
+};
+var set = {
+  value: (ctx, value) => {
+    ctx.value = value;
+    invoke.change(ctx);
+  },
+  focusedValue: (ctx, value) => {
+    ctx.focusedValue = value;
+    invoke.focusChange(ctx);
+  }
+};
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
   anatomy,

package/dist/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/index.ts","../src/tabs.anatomy.ts","../src/tabs.connect.ts","../src/tabs.dom.ts","../src/tabs.machine.ts"],"sourcesContent":["export { anatomy } from \"./tabs.anatomy\"\nexport { connect } from \"./tabs.connect\"\nexport { machine } from \"./tabs.machine\"\nexport type { ContentProps, UserDefinedContext as Context, PublicApi, TriggerProps } from \"./tabs.types\"\n","import { createAnatomy } from \"@zag-js/anatomy\"\n\nexport const anatomy = createAnatomy(\"tabs\").parts(\"root\", \"list\", \"trigger\", \"content\", \"indicator\")\nexport const parts = anatomy.build()\n","import { getEventKey, type EventKeyMap } from \"@zag-js/dom-event\"\nimport { dataAttr, isSafari, isSelfEvent } from \"@zag-js/dom-query\"\nimport type { NormalizeProps, PropTypes } from \"@zag-js/types\"\nimport { parts } from \"./tabs.anatomy\"\nimport { dom } from \"./tabs.dom\"\nimport type { ContentProps, PublicApi, Send, State, TriggerProps } from \"./tabs.types\"\n\nexport function connect<T extends PropTypes>(state: State, send: Send, normalize: NormalizeProps<T>): PublicApi<T> {\n  const translations = state.context.translations\n  const isFocused = state.matches(\"focused\")\n\n  return {\n    value: state.context.value,\n    focusedValue: state.context.focusedValue,\n    previousValues: Array.from(state.context.previousValues),\n\n    setValue(value: string) {\n      send({ type: \"SET_VALUE\", value })\n    },\n\n    clearValue() {\n      send({ type: \"CLEAR_VALUE\" })\n    },\n\n    setIndicatorRect(id: string | null | undefined) {\n      send({ type: \"SET_INDICATOR_RECT\", id })\n    },\n\n    rootProps: normalize.element({\n      ...parts.root.attrs,\n      id: dom.getRootId(state.context),\n      \"data-orientation\": state.context.orientation,\n      \"data-focus\": dataAttr(isFocused),\n      dir: state.context.dir,\n    }),\n\n    tablistProps: normalize.element({\n      ...parts.list.attrs,\n      id: dom.getTablistId(state.context),\n      role: \"tablist\",\n      \"data-focus\": dataAttr(isFocused),\n      \"aria-orientation\": state.context.orientation,\n      \"data-orientation\": state.context.orientation,\n      \"aria-label\": translations.tablistLabel,\n      onKeyDown(event) {\n        if (!isSelfEvent(event)) return\n\n        const keyMap: EventKeyMap = {\n          ArrowDown() {\n            send(\"ARROW_DOWN\")\n          },\n          ArrowUp() {\n            send(\"ARROW_UP\")\n          },\n          ArrowLeft() {\n            send(\"ARROW_LEFT\")\n          },\n          ArrowRight() {\n            send(\"ARROW_RIGHT\")\n          },\n          Home() {\n            send(\"HOME\")\n          },\n          End() {\n            send(\"END\")\n          },\n          Enter() {\n            send({ type: \"ENTER\", value: state.context.focusedValue })\n          },\n        }\n\n        let key = getEventKey(event, state.context)\n        const exec = keyMap[key]\n\n        if (exec) {\n          event.preventDefault()\n          exec(event)\n        }\n      },\n    }),\n\n    getTriggerProps(props: TriggerProps) {\n      const { value, disabled } = props\n      const selected = state.context.value === value\n\n      return normalize.button({\n        ...parts.trigger.attrs,\n        role: \"tab\",\n        type: \"button\",\n        disabled,\n        \"data-orientation\": state.context.orientation,\n        \"data-disabled\": dataAttr(disabled),\n        \"aria-disabled\": disabled,\n        \"data-value\": value,\n        \"aria-selected\": selected,\n        \"data-selected\": dataAttr(selected),\n        \"aria-controls\": dom.getContentId(state.context, value),\n        \"data-ownedby\": dom.getTablistId(state.context),\n        id: dom.getTriggerId(state.context, value),\n        tabIndex: selected ? 0 : -1,\n        onFocus() {\n          send({ type: \"TAB_FOCUS\", value })\n        },\n        onBlur(event) {\n          const target = event.relatedTarget as HTMLElement | null\n          if (target?.getAttribute(\"role\") !== \"tab\") {\n            send({ type: \"TAB_BLUR\" })\n          }\n        },\n        onClick(event) {\n          if (disabled) return\n          if (isSafari()) {\n            event.currentTarget.focus()\n          }\n          send({ type: \"TAB_CLICK\", value })\n        },\n      })\n    },\n\n    getContentProps({ value }: ContentProps) {\n      const selected = state.context.value === value\n      return normalize.element({\n        ...parts.content.attrs,\n        id: dom.getContentId(state.context, value),\n        tabIndex: 0,\n        \"aria-labelledby\": dom.getTriggerId(state.context, value),\n        role: \"tabpanel\",\n        \"data-ownedby\": dom.getTablistId(state.context),\n        \"data-selected\": dataAttr(selected),\n        hidden: !selected,\n      })\n    },\n\n    indicatorProps: normalize.element({\n      id: dom.getIndicatorId(state.context),\n      ...parts.indicator.attrs,\n      \"data-orientation\": state.context.orientation,\n      style: {\n        \"--transition-duration\": \"150ms\",\n        \"--transition-property\": \"left, right, top, bottom, width, height\",\n        position: \"absolute\",\n        willChange: \"var(--transition-property)\",\n        transitionProperty: \"var(--transition-property)\",\n        transitionDuration: state.context.canIndicatorTransition ? \"var(--transition-duration)\" : \"0ms\",\n        transitionTimingFunction: \"var(--transition-timing-function)\",\n        ...state.context.indicatorRect,\n      },\n    }),\n  }\n}\n","import { createScope, itemById, nextById, prevById, queryAll } from \"@zag-js/dom-query\"\nimport { first, last } from \"@zag-js/utils\"\nimport type { MachineContext as Ctx } from \"./tabs.types\"\n\nexport const dom = createScope({\n  getRootId: (ctx: Ctx) => ctx.ids?.root ?? `tabs:${ctx.id}`,\n  getTablistId: (ctx: Ctx) => ctx.ids?.tablist ?? `tabs:${ctx.id}:list`,\n  getContentId: (ctx: Ctx, id: string) => ctx.ids?.content ?? `tabs:${ctx.id}:content-${id}`,\n  getTriggerId: (ctx: Ctx, id: string) => ctx.ids?.trigger ?? `tabs:${ctx.id}:trigger-${id}`,\n  getIndicatorId: (ctx: Ctx) => ctx.ids?.indicator ?? `tabs:${ctx.id}:indicator`,\n\n  getTablistEl: (ctx: Ctx) => dom.getById(ctx, dom.getTablistId(ctx)),\n  getContentEl: (ctx: Ctx, id: string) => dom.getById(ctx, dom.getContentId(ctx, id)),\n  getTriggerEl: (ctx: Ctx, id: string) => dom.getById(ctx, dom.getTriggerId(ctx, id)),\n  getIndicatorEl: (ctx: Ctx) => dom.getById(ctx, dom.getIndicatorId(ctx)),\n\n  getElements: (ctx: Ctx) => {\n    const ownerId = CSS.escape(dom.getTablistId(ctx))\n    const selector = `[role=tab][data-ownedby='${ownerId}']:not([disabled])`\n    return queryAll(dom.getTablistEl(ctx), selector)\n  },\n\n  getFirstEl: (ctx: Ctx) => first(dom.getElements(ctx)),\n  getLastEl: (ctx: Ctx) => last(dom.getElements(ctx)),\n  getNextEl: (ctx: Ctx, id: string) => nextById(dom.getElements(ctx), dom.getTriggerId(ctx, id), ctx.loop),\n  getPrevEl: (ctx: Ctx, id: string) => prevById(dom.getElements(ctx), dom.getTriggerId(ctx, id), ctx.loop),\n  getActiveContentEl: (ctx: Ctx) => {\n    if (!ctx.value) return\n    return dom.getContentEl(ctx, ctx.value)\n  },\n  getActiveTabEl: (ctx: Ctx) => {\n    if (!ctx.value) return\n    return dom.getTriggerEl(ctx, ctx.value)\n  },\n\n  getOffsetRect: (el: HTMLElement | undefined) => {\n    return {\n      left: el?.offsetLeft ?? 0,\n      top: el?.offsetTop ?? 0,\n      width: el?.offsetWidth ?? 0,\n      height: el?.offsetHeight ?? 0,\n    }\n  },\n\n  getRectById: (ctx: Ctx, id: string) => {\n    const tab = itemById(dom.getElements(ctx), dom.getTriggerId(ctx, id))\n    return dom.resolveRect(dom.getOffsetRect(tab), ctx.orientation)\n  },\n\n  resolveRect(rect: Record<\"width\" | \"height\" | \"left\" | \"top\", number>, orientation?: \"horizontal\" | \"vertical\") {\n    const sizeProp = orientation === \"vertical\" ? \"height\" : \"width\"\n    const placementProp = orientation === \"vertical\" ? \"top\" : \"left\"\n    return {\n      [placementProp]: `${rect[placementProp]}px`,\n      [sizeProp]: `${rect[sizeProp]}px`,\n    }\n  },\n})\n","import { createMachine, guards } from \"@zag-js/core\"\nimport { nextTick, raf } from \"@zag-js/dom-query\"\nimport { trackElementRect } from \"@zag-js/element-rect\"\nimport { getFocusables } from \"@zag-js/tabbable\"\nimport { compact } from \"@zag-js/utils\"\nimport { dom } from \"./tabs.dom\"\nimport type { MachineContext, MachineState, UserDefinedContext } from \"./tabs.types\"\n\nconst { not } = guards\n\nexport function machine(userContext: UserDefinedContext) {\n  const ctx = compact(userContext)\n  return createMachine<MachineContext, MachineState>(\n    {\n      initial: \"idle\",\n\n      context: {\n        dir: \"ltr\",\n        orientation: \"horizontal\",\n        activationMode: \"automatic\",\n        value: null,\n        focusedValue: null,\n        previousValues: [],\n        indicatorRect: {\n          left: \"0px\",\n          top: \"0px\",\n          width: \"0px\",\n          height: \"0px\",\n        },\n        canIndicatorTransition: false,\n        isIndicatorRendered: false,\n        loop: true,\n        translations: {},\n        ...ctx,\n      },\n\n      computed: {\n        isHorizontal: (ctx) => ctx.orientation === \"horizontal\",\n        isVertical: (ctx) => ctx.orientation === \"vertical\",\n      },\n\n      created: [\"setPrevSelectedTabs\"],\n\n      entry: [\"checkRenderedElements\", \"syncIndicatorRect\", \"setContentTabIndex\"],\n\n      exit: [\"cleanupObserver\"],\n\n      watch: {\n        focusedValue: \"invokeOnFocus\",\n        value: [\n          \"enableIndicatorTransition\",\n          \"invokeOnChange\",\n          \"setPrevSelectedTabs\",\n          \"syncIndicatorRect\",\n          \"setContentTabIndex\",\n        ],\n        dir: [\"syncIndicatorRect\"],\n        orientation: [\"syncIndicatorRect\"],\n      },\n\n      on: {\n        SET_VALUE: {\n          actions: \"setValue\",\n        },\n        CLEAR_VALUE: {\n          actions: \"clearValue\",\n        },\n        SET_INDICATOR_RECT: {\n          actions: \"setIndicatorRect\",\n        },\n      },\n\n      states: {\n        idle: {\n          on: {\n            TAB_FOCUS: [\n              {\n                guard: \"selectOnFocus\",\n                target: \"focused\",\n                actions: [\"setFocusedValue\", \"setValue\"],\n              },\n              {\n                target: \"focused\",\n                actions: \"setFocusedValue\",\n              },\n            ],\n            TAB_CLICK: {\n              target: \"focused\",\n              actions: [\"setFocusedValue\", \"setValue\"],\n            },\n          },\n        },\n        focused: {\n          on: {\n            TAB_CLICK: {\n              target: \"focused\",\n              actions: [\"setFocusedValue\", \"setValue\"],\n            },\n            ARROW_LEFT: {\n              guard: \"isHorizontal\",\n              actions: \"focusPrevTab\",\n            },\n            ARROW_RIGHT: {\n              guard: \"isHorizontal\",\n              actions: \"focusNextTab\",\n            },\n            ARROW_UP: {\n              guard: \"isVertical\",\n              actions: \"focusPrevTab\",\n            },\n            ARROW_DOWN: {\n              guard: \"isVertical\",\n              actions: \"focusNextTab\",\n            },\n            HOME: {\n              actions: \"focusFirstTab\",\n            },\n            END: {\n              actions: \"focusLastTab\",\n            },\n            ENTER: {\n              guard: not(\"selectOnFocus\"),\n              actions: \"setValue\",\n            },\n            TAB_FOCUS: [\n              {\n                guard: \"selectOnFocus\",\n                actions: [\"setFocusedValue\", \"setValue\"],\n              },\n              { actions: \"setFocusedValue\" },\n            ],\n            TAB_BLUR: {\n              target: \"idle\",\n              actions: \"clearFocusedValue\",\n            },\n          },\n        },\n      },\n    },\n    {\n      guards: {\n        isVertical: (ctx) => ctx.isVertical,\n        isHorizontal: (ctx) => ctx.isHorizontal,\n        selectOnFocus: (ctx) => ctx.activationMode === \"automatic\",\n      },\n\n      actions: {\n        setFocusedValue(ctx, evt) {\n          ctx.focusedValue = evt.value\n        },\n        clearFocusedValue(ctx) {\n          ctx.focusedValue = null\n        },\n        setValue(ctx, evt) {\n          ctx.value = evt.value\n        },\n        clearValue(ctx) {\n          ctx.value = null\n        },\n        focusFirstTab(ctx) {\n          raf(() => dom.getFirstEl(ctx)?.focus())\n        },\n        focusLastTab(ctx) {\n          raf(() => dom.getLastEl(ctx)?.focus())\n        },\n        focusNextTab(ctx) {\n          if (!ctx.focusedValue) return\n          const next = dom.getNextEl(ctx, ctx.focusedValue)\n          raf(() => next?.focus())\n        },\n        focusPrevTab(ctx) {\n          if (!ctx.focusedValue) return\n          const prev = dom.getPrevEl(ctx, ctx.focusedValue)\n          raf(() => prev?.focus())\n        },\n        checkRenderedElements(ctx) {\n          ctx.isIndicatorRendered = !!dom.getIndicatorEl(ctx)\n        },\n        invokeOnChange(ctx) {\n          ctx.onChange?.({ value: ctx.value })\n        },\n        invokeOnFocus(ctx) {\n          ctx.onFocus?.({ value: ctx.focusedValue })\n        },\n        setPrevSelectedTabs(ctx) {\n          if (ctx.value != null) {\n            ctx.previousValues = pushUnique(ctx.previousValues, ctx.value)\n          }\n        },\n        // if tab panel contains focusable elements, remove the tabindex attribute\n        setContentTabIndex(ctx) {\n          raf(() => {\n            const panel = dom.getActiveContentEl(ctx)\n            if (!panel) return\n            const focusables = getFocusables(panel)\n            if (focusables.length > 0) {\n              panel.removeAttribute(\"tabindex\")\n            } else {\n              panel.setAttribute(\"tabindex\", \"0\")\n            }\n          })\n        },\n        cleanupObserver(ctx) {\n          ctx.indicatorCleanup?.()\n        },\n        enableIndicatorTransition(ctx) {\n          ctx.canIndicatorTransition = true\n        },\n        setIndicatorRect(ctx, evt) {\n          const value = evt.id ?? ctx.value\n          if (!ctx.isIndicatorRendered || !value) return\n\n          const tabEl = dom.getTriggerEl(ctx, value)\n          if (!tabEl) return\n\n          ctx.indicatorRect = dom.getRectById(ctx, value)\n          nextTick(() => {\n            ctx.canIndicatorTransition = false\n          })\n        },\n        syncIndicatorRect(ctx) {\n          ctx.indicatorCleanup?.()\n\n          const value = ctx.value\n          if (!ctx.isIndicatorRendered || !value) return\n\n          const tabEl = dom.getActiveTabEl(ctx)\n          if (!tabEl) return\n\n          ctx.indicatorCleanup = trackElementRect(tabEl, {\n            getRect(el) {\n              return dom.getOffsetRect(el)\n            },\n            onChange(rect) {\n              ctx.indicatorRect = dom.resolveRect(rect, ctx.orientation)\n              nextTick(() => {\n                ctx.canIndicatorTransition = false\n              })\n            },\n          })\n        },\n      },\n    },\n  )\n}\n\n// function to push value array and remove previous instances of value\nfunction pushUnique(arr: string[], value: any) {\n  const newArr = Array.from(arr).slice()\n  const index = newArr.indexOf(value)\n  if (index > -1) {\n    newArr.splice(index, 1)\n  }\n  newArr.push(value)\n  return newArr\n}\n"],"mappings":"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","names":["import_dom_query","import_dom_query","import_utils","ctx"]}
+{"version":3,"sources":["../src/index.ts","../src/tabs.anatomy.ts","../src/tabs.connect.ts","../src/tabs.dom.ts","../src/tabs.machine.ts"],"sourcesContent":["export { anatomy } from \"./tabs.anatomy\"\nexport { connect } from \"./tabs.connect\"\nexport { machine } from \"./tabs.machine\"\nexport type { ContentProps, UserDefinedContext as Context, MachineApi as Api, TriggerProps } from \"./tabs.types\"\n","import { createAnatomy } from \"@zag-js/anatomy\"\n\nexport const anatomy = createAnatomy(\"tabs\").parts(\"root\", \"list\", \"trigger\", \"content\", \"indicator\")\nexport const parts = anatomy.build()\n","import { getEventKey, type EventKeyMap } from \"@zag-js/dom-event\"\nimport { dataAttr, isSafari, isSelfEvent } from \"@zag-js/dom-query\"\nimport type { NormalizeProps, PropTypes } from \"@zag-js/types\"\nimport { parts } from \"./tabs.anatomy\"\nimport { dom } from \"./tabs.dom\"\nimport type { ContentProps, MachineApi, Send, State, TriggerProps } from \"./tabs.types\"\n\nexport function connect<T extends PropTypes>(state: State, send: Send, normalize: NormalizeProps<T>): MachineApi<T> {\n  const translations = state.context.translations\n  const isFocused = state.matches(\"focused\")\n\n  return {\n    value: state.context.value,\n    focusedValue: state.context.focusedValue,\n    previousValues: Array.from(state.context.previousValues),\n\n    setValue(value: string) {\n      send({ type: \"SET_VALUE\", value })\n    },\n\n    clearValue() {\n      send({ type: \"CLEAR_VALUE\" })\n    },\n\n    setIndicatorRect(id: string | null | undefined) {\n      send({ type: \"SET_INDICATOR_RECT\", id })\n    },\n\n    rootProps: normalize.element({\n      ...parts.root.attrs,\n      id: dom.getRootId(state.context),\n      \"data-orientation\": state.context.orientation,\n      \"data-focus\": dataAttr(isFocused),\n      dir: state.context.dir,\n    }),\n\n    tablistProps: normalize.element({\n      ...parts.list.attrs,\n      id: dom.getTablistId(state.context),\n      role: \"tablist\",\n      \"data-focus\": dataAttr(isFocused),\n      \"aria-orientation\": state.context.orientation,\n      \"data-orientation\": state.context.orientation,\n      \"aria-label\": translations.tablistLabel,\n      onKeyDown(event) {\n        if (!isSelfEvent(event)) return\n\n        const keyMap: EventKeyMap = {\n          ArrowDown() {\n            send(\"ARROW_DOWN\")\n          },\n          ArrowUp() {\n            send(\"ARROW_UP\")\n          },\n          ArrowLeft() {\n            send(\"ARROW_LEFT\")\n          },\n          ArrowRight() {\n            send(\"ARROW_RIGHT\")\n          },\n          Home() {\n            send(\"HOME\")\n          },\n          End() {\n            send(\"END\")\n          },\n          Enter() {\n            send({ type: \"ENTER\", value: state.context.focusedValue })\n          },\n        }\n\n        let key = getEventKey(event, state.context)\n        const exec = keyMap[key]\n\n        if (exec) {\n          event.preventDefault()\n          exec(event)\n        }\n      },\n    }),\n\n    getTriggerProps(props: TriggerProps) {\n      const { value, disabled } = props\n      const selected = state.context.value === value\n\n      return normalize.button({\n        ...parts.trigger.attrs,\n        role: \"tab\",\n        type: \"button\",\n        disabled,\n        \"data-orientation\": state.context.orientation,\n        \"data-disabled\": dataAttr(disabled),\n        \"aria-disabled\": disabled,\n        \"data-value\": value,\n        \"aria-selected\": selected,\n        \"data-selected\": dataAttr(selected),\n        \"aria-controls\": dom.getContentId(state.context, value),\n        \"data-ownedby\": dom.getTablistId(state.context),\n        id: dom.getTriggerId(state.context, value),\n        tabIndex: selected ? 0 : -1,\n        onFocus() {\n          send({ type: \"TAB_FOCUS\", value })\n        },\n        onBlur(event) {\n          const target = event.relatedTarget as HTMLElement | null\n          if (target?.getAttribute(\"role\") !== \"tab\") {\n            send({ type: \"TAB_BLUR\" })\n          }\n        },\n        onClick(event) {\n          if (disabled) return\n          if (isSafari()) {\n            event.currentTarget.focus()\n          }\n          send({ type: \"TAB_CLICK\", value })\n        },\n      })\n    },\n\n    getContentProps({ value }: ContentProps) {\n      const selected = state.context.value === value\n      return normalize.element({\n        ...parts.content.attrs,\n        id: dom.getContentId(state.context, value),\n        tabIndex: 0,\n        \"aria-labelledby\": dom.getTriggerId(state.context, value),\n        role: \"tabpanel\",\n        \"data-ownedby\": dom.getTablistId(state.context),\n        \"data-selected\": dataAttr(selected),\n        hidden: !selected,\n      })\n    },\n\n    indicatorProps: normalize.element({\n      id: dom.getIndicatorId(state.context),\n      ...parts.indicator.attrs,\n      \"data-orientation\": state.context.orientation,\n      style: {\n        \"--transition-duration\": \"150ms\",\n        \"--transition-property\": \"left, right, top, bottom, width, height\",\n        position: \"absolute\",\n        willChange: \"var(--transition-property)\",\n        transitionProperty: \"var(--transition-property)\",\n        transitionDuration: state.context.canIndicatorTransition ? \"var(--transition-duration)\" : \"0ms\",\n        transitionTimingFunction: \"var(--transition-timing-function)\",\n        ...state.context.indicatorRect,\n      },\n    }),\n  }\n}\n","import { createScope, itemById, nextById, prevById, queryAll } from \"@zag-js/dom-query\"\nimport { first, last } from \"@zag-js/utils\"\nimport type { MachineContext as Ctx } from \"./tabs.types\"\n\nexport const dom = createScope({\n  getRootId: (ctx: Ctx) => ctx.ids?.root ?? `tabs:${ctx.id}`,\n  getTablistId: (ctx: Ctx) => ctx.ids?.tablist ?? `tabs:${ctx.id}:list`,\n  getContentId: (ctx: Ctx, id: string) => ctx.ids?.content ?? `tabs:${ctx.id}:content-${id}`,\n  getTriggerId: (ctx: Ctx, id: string) => ctx.ids?.trigger ?? `tabs:${ctx.id}:trigger-${id}`,\n  getIndicatorId: (ctx: Ctx) => ctx.ids?.indicator ?? `tabs:${ctx.id}:indicator`,\n\n  getTablistEl: (ctx: Ctx) => dom.getById(ctx, dom.getTablistId(ctx)),\n  getContentEl: (ctx: Ctx, id: string) => dom.getById(ctx, dom.getContentId(ctx, id)),\n  getTriggerEl: (ctx: Ctx, id: string) => dom.getById(ctx, dom.getTriggerId(ctx, id)),\n  getIndicatorEl: (ctx: Ctx) => dom.getById(ctx, dom.getIndicatorId(ctx)),\n\n  getElements: (ctx: Ctx) => {\n    const ownerId = CSS.escape(dom.getTablistId(ctx))\n    const selector = `[role=tab][data-ownedby='${ownerId}']:not([disabled])`\n    return queryAll(dom.getTablistEl(ctx), selector)\n  },\n\n  getFirstEl: (ctx: Ctx) => first(dom.getElements(ctx)),\n  getLastEl: (ctx: Ctx) => last(dom.getElements(ctx)),\n  getNextEl: (ctx: Ctx, id: string) => nextById(dom.getElements(ctx), dom.getTriggerId(ctx, id), ctx.loop),\n  getPrevEl: (ctx: Ctx, id: string) => prevById(dom.getElements(ctx), dom.getTriggerId(ctx, id), ctx.loop),\n  getActiveContentEl: (ctx: Ctx) => {\n    if (!ctx.value) return\n    return dom.getContentEl(ctx, ctx.value)\n  },\n  getActiveTabEl: (ctx: Ctx) => {\n    if (!ctx.value) return\n    return dom.getTriggerEl(ctx, ctx.value)\n  },\n\n  getOffsetRect: (el: HTMLElement | undefined) => {\n    return {\n      left: el?.offsetLeft ?? 0,\n      top: el?.offsetTop ?? 0,\n      width: el?.offsetWidth ?? 0,\n      height: el?.offsetHeight ?? 0,\n    }\n  },\n\n  getRectById: (ctx: Ctx, id: string) => {\n    const tab = itemById(dom.getElements(ctx), dom.getTriggerId(ctx, id))\n    return dom.resolveRect(dom.getOffsetRect(tab), ctx.orientation)\n  },\n\n  resolveRect(rect: Record<\"width\" | \"height\" | \"left\" | \"top\", number>, orientation?: \"horizontal\" | \"vertical\") {\n    const sizeProp = orientation === \"vertical\" ? \"height\" : \"width\"\n    const placementProp = orientation === \"vertical\" ? \"top\" : \"left\"\n    return {\n      [placementProp]: `${rect[placementProp]}px`,\n      [sizeProp]: `${rect[sizeProp]}px`,\n    }\n  },\n})\n","import { createMachine, guards } from \"@zag-js/core\"\nimport { nextTick, raf } from \"@zag-js/dom-query\"\nimport { trackElementRect } from \"@zag-js/element-rect\"\nimport { getFocusables } from \"@zag-js/tabbable\"\nimport { compact } from \"@zag-js/utils\"\nimport { dom } from \"./tabs.dom\"\nimport type { MachineContext, MachineState, UserDefinedContext } from \"./tabs.types\"\n\nconst { not } = guards\n\nexport function machine(userContext: UserDefinedContext) {\n  const ctx = compact(userContext)\n  return createMachine<MachineContext, MachineState>(\n    {\n      initial: \"idle\",\n\n      context: {\n        dir: \"ltr\",\n        orientation: \"horizontal\",\n        activationMode: \"automatic\",\n        value: null,\n        focusedValue: null,\n        previousValues: [],\n        indicatorRect: {\n          left: \"0px\",\n          top: \"0px\",\n          width: \"0px\",\n          height: \"0px\",\n        },\n        canIndicatorTransition: false,\n        isIndicatorRendered: false,\n        loop: true,\n        translations: {},\n        ...ctx,\n      },\n\n      computed: {\n        isHorizontal: (ctx) => ctx.orientation === \"horizontal\",\n        isVertical: (ctx) => ctx.orientation === \"vertical\",\n      },\n\n      created: [\"setPrevSelectedTabs\"],\n\n      entry: [\"checkRenderedElements\", \"syncIndicatorRect\", \"setContentTabIndex\"],\n\n      exit: [\"cleanupObserver\"],\n\n      watch: {\n        value: [\"enableIndicatorTransition\", \"setPrevSelectedTabs\", \"syncIndicatorRect\", \"setContentTabIndex\"],\n        dir: [\"syncIndicatorRect\"],\n        orientation: [\"syncIndicatorRect\"],\n      },\n\n      on: {\n        SET_VALUE: {\n          actions: \"setValue\",\n        },\n        CLEAR_VALUE: {\n          actions: \"clearValue\",\n        },\n        SET_INDICATOR_RECT: {\n          actions: \"setIndicatorRect\",\n        },\n      },\n\n      states: {\n        idle: {\n          on: {\n            TAB_FOCUS: [\n              {\n                guard: \"selectOnFocus\",\n                target: \"focused\",\n                actions: [\"setFocusedValue\", \"setValue\"],\n              },\n              {\n                target: \"focused\",\n                actions: \"setFocusedValue\",\n              },\n            ],\n            TAB_CLICK: {\n              target: \"focused\",\n              actions: [\"setFocusedValue\", \"setValue\"],\n            },\n          },\n        },\n        focused: {\n          on: {\n            TAB_CLICK: {\n              target: \"focused\",\n              actions: [\"setFocusedValue\", \"setValue\"],\n            },\n            ARROW_LEFT: {\n              guard: \"isHorizontal\",\n              actions: \"focusPrevTab\",\n            },\n            ARROW_RIGHT: {\n              guard: \"isHorizontal\",\n              actions: \"focusNextTab\",\n            },\n            ARROW_UP: {\n              guard: \"isVertical\",\n              actions: \"focusPrevTab\",\n            },\n            ARROW_DOWN: {\n              guard: \"isVertical\",\n              actions: \"focusNextTab\",\n            },\n            HOME: {\n              actions: \"focusFirstTab\",\n            },\n            END: {\n              actions: \"focusLastTab\",\n            },\n            ENTER: {\n              guard: not(\"selectOnFocus\"),\n              actions: \"setValue\",\n            },\n            TAB_FOCUS: [\n              {\n                guard: \"selectOnFocus\",\n                actions: [\"setFocusedValue\", \"setValue\"],\n              },\n              { actions: \"setFocusedValue\" },\n            ],\n            TAB_BLUR: {\n              target: \"idle\",\n              actions: \"clearFocusedValue\",\n            },\n          },\n        },\n      },\n    },\n    {\n      guards: {\n        isVertical: (ctx) => ctx.isVertical,\n        isHorizontal: (ctx) => ctx.isHorizontal,\n        selectOnFocus: (ctx) => ctx.activationMode === \"automatic\",\n      },\n\n      actions: {\n        setFocusedValue(ctx, evt) {\n          set.focusedValue(ctx, evt.value)\n        },\n        clearFocusedValue(ctx) {\n          set.focusedValue(ctx, null)\n        },\n        setValue(ctx, evt) {\n          set.value(ctx, evt.value)\n        },\n        clearValue(ctx) {\n          set.value(ctx, null)\n        },\n        focusFirstTab(ctx) {\n          raf(() => dom.getFirstEl(ctx)?.focus())\n        },\n        focusLastTab(ctx) {\n          raf(() => dom.getLastEl(ctx)?.focus())\n        },\n        focusNextTab(ctx) {\n          if (!ctx.focusedValue) return\n          const next = dom.getNextEl(ctx, ctx.focusedValue)\n          raf(() => next?.focus())\n        },\n        focusPrevTab(ctx) {\n          if (!ctx.focusedValue) return\n          const prev = dom.getPrevEl(ctx, ctx.focusedValue)\n          raf(() => prev?.focus())\n        },\n        checkRenderedElements(ctx) {\n          ctx.isIndicatorRendered = !!dom.getIndicatorEl(ctx)\n        },\n        setPrevSelectedTabs(ctx) {\n          if (ctx.value != null) {\n            ctx.previousValues = pushUnique(ctx.previousValues, ctx.value)\n          }\n        },\n        // if tab panel contains focusable elements, remove the tabindex attribute\n        setContentTabIndex(ctx) {\n          raf(() => {\n            const panel = dom.getActiveContentEl(ctx)\n            if (!panel) return\n            const focusables = getFocusables(panel)\n            if (focusables.length > 0) {\n              panel.removeAttribute(\"tabindex\")\n            } else {\n              panel.setAttribute(\"tabindex\", \"0\")\n            }\n          })\n        },\n        cleanupObserver(ctx) {\n          ctx.indicatorCleanup?.()\n        },\n        enableIndicatorTransition(ctx) {\n          ctx.canIndicatorTransition = true\n        },\n        setIndicatorRect(ctx, evt) {\n          const value = evt.id ?? ctx.value\n          if (!ctx.isIndicatorRendered || !value) return\n\n          const tabEl = dom.getTriggerEl(ctx, value)\n          if (!tabEl) return\n\n          ctx.indicatorRect = dom.getRectById(ctx, value)\n          nextTick(() => {\n            ctx.canIndicatorTransition = false\n          })\n        },\n        syncIndicatorRect(ctx) {\n          ctx.indicatorCleanup?.()\n\n          const value = ctx.value\n          if (!ctx.isIndicatorRendered || !value) return\n\n          const tabEl = dom.getActiveTabEl(ctx)\n          if (!tabEl) return\n\n          ctx.indicatorCleanup = trackElementRect(tabEl, {\n            getRect(el) {\n              return dom.getOffsetRect(el)\n            },\n            onChange(rect) {\n              ctx.indicatorRect = dom.resolveRect(rect, ctx.orientation)\n              nextTick(() => {\n                ctx.canIndicatorTransition = false\n              })\n            },\n          })\n        },\n      },\n    },\n  )\n}\n\n// function to push value array and remove previous instances of value\nfunction pushUnique(arr: string[], value: any) {\n  const newArr = Array.from(arr).slice()\n  const index = newArr.indexOf(value)\n  if (index > -1) {\n    newArr.splice(index, 1)\n  }\n  newArr.push(value)\n  return newArr\n}\n\nconst invoke = {\n  change: (ctx: MachineContext) => {\n    if (ctx.value == null) return\n    ctx.onChange?.({ value: ctx.value })\n  },\n  focusChange: (ctx: MachineContext) => {\n    if (ctx.focusedValue == null) return\n    ctx.onFocus?.({ value: ctx.focusedValue })\n  },\n}\n\nconst set = {\n  value: (ctx: MachineContext, value: string | null) => {\n    ctx.value = value\n    invoke.change(ctx)\n  },\n  focusedValue: (ctx: MachineContext, value: string | null) => {\n    ctx.focusedValue = value\n    invoke.focusChange(ctx)\n  },\n}\n"],"mappings":"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","names":["import_dom_query","import_dom_query","import_utils","ctx"]}

package/dist/index.mjs

@@ -234,14 +234,7 @@ function machine(userContext) {
       entry: ["checkRenderedElements", "syncIndicatorRect", "setContentTabIndex"],
       exit: ["cleanupObserver"],
       watch: {
-        focusedValue: "invokeOnFocus",
-        value: [
-          "enableIndicatorTransition",
-          "invokeOnChange",
-          "setPrevSelectedTabs",
-          "syncIndicatorRect",
-          "setContentTabIndex"
-        ],
+        value: ["enableIndicatorTransition", "setPrevSelectedTabs", "syncIndicatorRect", "setContentTabIndex"],
         dir: ["syncIndicatorRect"],
         orientation: ["syncIndicatorRect"]
       },
@@ -331,16 +324,16 @@ function machine(userContext) {
       },
       actions: {
         setFocusedValue(ctx2, evt) {
-          ctx2.focusedValue = evt.value;
+          set.focusedValue(ctx2, evt.value);
         },
         clearFocusedValue(ctx2) {
-          ctx2.focusedValue = null;
+          set.focusedValue(ctx2, null);
         },
         setValue(ctx2, evt) {
-          ctx2.value = evt.value;
+          set.value(ctx2, evt.value);
         },
         clearValue(ctx2) {
-          ctx2.value = null;
+          set.value(ctx2, null);
         },
         focusFirstTab(ctx2) {
           raf(() => dom.getFirstEl(ctx2)?.focus());
@@ -363,12 +356,6 @@ function machine(userContext) {
         checkRenderedElements(ctx2) {
           ctx2.isIndicatorRendered = !!dom.getIndicatorEl(ctx2);
         },
-        invokeOnChange(ctx2) {
-          ctx2.onChange?.({ value: ctx2.value });
-        },
-        invokeOnFocus(ctx2) {
-          ctx2.onFocus?.({ value: ctx2.focusedValue });
-        },
         setPrevSelectedTabs(ctx2) {
           if (ctx2.value != null) {
             ctx2.previousValues = pushUnique(ctx2.previousValues, ctx2.value);
@@ -439,6 +426,28 @@ function pushUnique(arr, value) {
   newArr.push(value);
   return newArr;
 }
+var invoke = {
+  change: (ctx) => {
+    if (ctx.value == null)
+      return;
+    ctx.onChange?.({ value: ctx.value });
+  },
+  focusChange: (ctx) => {
+    if (ctx.focusedValue == null)
+      return;
+    ctx.onFocus?.({ value: ctx.focusedValue });
+  }
+};
+var set = {
+  value: (ctx, value) => {
+    ctx.value = value;
+    invoke.change(ctx);
+  },
+  focusedValue: (ctx, value) => {
+    ctx.focusedValue = value;
+    invoke.focusChange(ctx);
+  }
+};
 export {
   anatomy,
   connect,

package/dist/index.mjs.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/tabs.anatomy.ts","../src/tabs.connect.ts","../src/tabs.dom.ts","../src/tabs.machine.ts"],"sourcesContent":["import { createAnatomy } from \"@zag-js/anatomy\"\n\nexport const anatomy = createAnatomy(\"tabs\").parts(\"root\", \"list\", \"trigger\", \"content\", \"indicator\")\nexport const parts = anatomy.build()\n","import { getEventKey, type EventKeyMap } from \"@zag-js/dom-event\"\nimport { dataAttr, isSafari, isSelfEvent } from \"@zag-js/dom-query\"\nimport type { NormalizeProps, PropTypes } from \"@zag-js/types\"\nimport { parts } from \"./tabs.anatomy\"\nimport { dom } from \"./tabs.dom\"\nimport type { ContentProps, PublicApi, Send, State, TriggerProps } from \"./tabs.types\"\n\nexport function connect<T extends PropTypes>(state: State, send: Send, normalize: NormalizeProps<T>): PublicApi<T> {\n  const translations = state.context.translations\n  const isFocused = state.matches(\"focused\")\n\n  return {\n    value: state.context.value,\n    focusedValue: state.context.focusedValue,\n    previousValues: Array.from(state.context.previousValues),\n\n    setValue(value: string) {\n      send({ type: \"SET_VALUE\", value })\n    },\n\n    clearValue() {\n      send({ type: \"CLEAR_VALUE\" })\n    },\n\n    setIndicatorRect(id: string | null | undefined) {\n      send({ type: \"SET_INDICATOR_RECT\", id })\n    },\n\n    rootProps: normalize.element({\n      ...parts.root.attrs,\n      id: dom.getRootId(state.context),\n      \"data-orientation\": state.context.orientation,\n      \"data-focus\": dataAttr(isFocused),\n      dir: state.context.dir,\n    }),\n\n    tablistProps: normalize.element({\n      ...parts.list.attrs,\n      id: dom.getTablistId(state.context),\n      role: \"tablist\",\n      \"data-focus\": dataAttr(isFocused),\n      \"aria-orientation\": state.context.orientation,\n      \"data-orientation\": state.context.orientation,\n      \"aria-label\": translations.tablistLabel,\n      onKeyDown(event) {\n        if (!isSelfEvent(event)) return\n\n        const keyMap: EventKeyMap = {\n          ArrowDown() {\n            send(\"ARROW_DOWN\")\n          },\n          ArrowUp() {\n            send(\"ARROW_UP\")\n          },\n          ArrowLeft() {\n            send(\"ARROW_LEFT\")\n          },\n          ArrowRight() {\n            send(\"ARROW_RIGHT\")\n          },\n          Home() {\n            send(\"HOME\")\n          },\n          End() {\n            send(\"END\")\n          },\n          Enter() {\n            send({ type: \"ENTER\", value: state.context.focusedValue })\n          },\n        }\n\n        let key = getEventKey(event, state.context)\n        const exec = keyMap[key]\n\n        if (exec) {\n          event.preventDefault()\n          exec(event)\n        }\n      },\n    }),\n\n    getTriggerProps(props: TriggerProps) {\n      const { value, disabled } = props\n      const selected = state.context.value === value\n\n      return normalize.button({\n        ...parts.trigger.attrs,\n        role: \"tab\",\n        type: \"button\",\n        disabled,\n        \"data-orientation\": state.context.orientation,\n        \"data-disabled\": dataAttr(disabled),\n        \"aria-disabled\": disabled,\n        \"data-value\": value,\n        \"aria-selected\": selected,\n        \"data-selected\": dataAttr(selected),\n        \"aria-controls\": dom.getContentId(state.context, value),\n        \"data-ownedby\": dom.getTablistId(state.context),\n        id: dom.getTriggerId(state.context, value),\n        tabIndex: selected ? 0 : -1,\n        onFocus() {\n          send({ type: \"TAB_FOCUS\", value })\n        },\n        onBlur(event) {\n          const target = event.relatedTarget as HTMLElement | null\n          if (target?.getAttribute(\"role\") !== \"tab\") {\n            send({ type: \"TAB_BLUR\" })\n          }\n        },\n        onClick(event) {\n          if (disabled) return\n          if (isSafari()) {\n            event.currentTarget.focus()\n          }\n          send({ type: \"TAB_CLICK\", value })\n        },\n      })\n    },\n\n    getContentProps({ value }: ContentProps) {\n      const selected = state.context.value === value\n      return normalize.element({\n        ...parts.content.attrs,\n        id: dom.getContentId(state.context, value),\n        tabIndex: 0,\n        \"aria-labelledby\": dom.getTriggerId(state.context, value),\n        role: \"tabpanel\",\n        \"data-ownedby\": dom.getTablistId(state.context),\n        \"data-selected\": dataAttr(selected),\n        hidden: !selected,\n      })\n    },\n\n    indicatorProps: normalize.element({\n      id: dom.getIndicatorId(state.context),\n      ...parts.indicator.attrs,\n      \"data-orientation\": state.context.orientation,\n      style: {\n        \"--transition-duration\": \"150ms\",\n        \"--transition-property\": \"left, right, top, bottom, width, height\",\n        position: \"absolute\",\n        willChange: \"var(--transition-property)\",\n        transitionProperty: \"var(--transition-property)\",\n        transitionDuration: state.context.canIndicatorTransition ? \"var(--transition-duration)\" : \"0ms\",\n        transitionTimingFunction: \"var(--transition-timing-function)\",\n        ...state.context.indicatorRect,\n      },\n    }),\n  }\n}\n","import { createScope, itemById, nextById, prevById, queryAll } from \"@zag-js/dom-query\"\nimport { first, last } from \"@zag-js/utils\"\nimport type { MachineContext as Ctx } from \"./tabs.types\"\n\nexport const dom = createScope({\n  getRootId: (ctx: Ctx) => ctx.ids?.root ?? `tabs:${ctx.id}`,\n  getTablistId: (ctx: Ctx) => ctx.ids?.tablist ?? `tabs:${ctx.id}:list`,\n  getContentId: (ctx: Ctx, id: string) => ctx.ids?.content ?? `tabs:${ctx.id}:content-${id}`,\n  getTriggerId: (ctx: Ctx, id: string) => ctx.ids?.trigger ?? `tabs:${ctx.id}:trigger-${id}`,\n  getIndicatorId: (ctx: Ctx) => ctx.ids?.indicator ?? `tabs:${ctx.id}:indicator`,\n\n  getTablistEl: (ctx: Ctx) => dom.getById(ctx, dom.getTablistId(ctx)),\n  getContentEl: (ctx: Ctx, id: string) => dom.getById(ctx, dom.getContentId(ctx, id)),\n  getTriggerEl: (ctx: Ctx, id: string) => dom.getById(ctx, dom.getTriggerId(ctx, id)),\n  getIndicatorEl: (ctx: Ctx) => dom.getById(ctx, dom.getIndicatorId(ctx)),\n\n  getElements: (ctx: Ctx) => {\n    const ownerId = CSS.escape(dom.getTablistId(ctx))\n    const selector = `[role=tab][data-ownedby='${ownerId}']:not([disabled])`\n    return queryAll(dom.getTablistEl(ctx), selector)\n  },\n\n  getFirstEl: (ctx: Ctx) => first(dom.getElements(ctx)),\n  getLastEl: (ctx: Ctx) => last(dom.getElements(ctx)),\n  getNextEl: (ctx: Ctx, id: string) => nextById(dom.getElements(ctx), dom.getTriggerId(ctx, id), ctx.loop),\n  getPrevEl: (ctx: Ctx, id: string) => prevById(dom.getElements(ctx), dom.getTriggerId(ctx, id), ctx.loop),\n  getActiveContentEl: (ctx: Ctx) => {\n    if (!ctx.value) return\n    return dom.getContentEl(ctx, ctx.value)\n  },\n  getActiveTabEl: (ctx: Ctx) => {\n    if (!ctx.value) return\n    return dom.getTriggerEl(ctx, ctx.value)\n  },\n\n  getOffsetRect: (el: HTMLElement | undefined) => {\n    return {\n      left: el?.offsetLeft ?? 0,\n      top: el?.offsetTop ?? 0,\n      width: el?.offsetWidth ?? 0,\n      height: el?.offsetHeight ?? 0,\n    }\n  },\n\n  getRectById: (ctx: Ctx, id: string) => {\n    const tab = itemById(dom.getElements(ctx), dom.getTriggerId(ctx, id))\n    return dom.resolveRect(dom.getOffsetRect(tab), ctx.orientation)\n  },\n\n  resolveRect(rect: Record<\"width\" | \"height\" | \"left\" | \"top\", number>, orientation?: \"horizontal\" | \"vertical\") {\n    const sizeProp = orientation === \"vertical\" ? \"height\" : \"width\"\n    const placementProp = orientation === \"vertical\" ? \"top\" : \"left\"\n    return {\n      [placementProp]: `${rect[placementProp]}px`,\n      [sizeProp]: `${rect[sizeProp]}px`,\n    }\n  },\n})\n","import { createMachine, guards } from \"@zag-js/core\"\nimport { nextTick, raf } from \"@zag-js/dom-query\"\nimport { trackElementRect } from \"@zag-js/element-rect\"\nimport { getFocusables } from \"@zag-js/tabbable\"\nimport { compact } from \"@zag-js/utils\"\nimport { dom } from \"./tabs.dom\"\nimport type { MachineContext, MachineState, UserDefinedContext } from \"./tabs.types\"\n\nconst { not } = guards\n\nexport function machine(userContext: UserDefinedContext) {\n  const ctx = compact(userContext)\n  return createMachine<MachineContext, MachineState>(\n    {\n      initial: \"idle\",\n\n      context: {\n        dir: \"ltr\",\n        orientation: \"horizontal\",\n        activationMode: \"automatic\",\n        value: null,\n        focusedValue: null,\n        previousValues: [],\n        indicatorRect: {\n          left: \"0px\",\n          top: \"0px\",\n          width: \"0px\",\n          height: \"0px\",\n        },\n        canIndicatorTransition: false,\n        isIndicatorRendered: false,\n        loop: true,\n        translations: {},\n        ...ctx,\n      },\n\n      computed: {\n        isHorizontal: (ctx) => ctx.orientation === \"horizontal\",\n        isVertical: (ctx) => ctx.orientation === \"vertical\",\n      },\n\n      created: [\"setPrevSelectedTabs\"],\n\n      entry: [\"checkRenderedElements\", \"syncIndicatorRect\", \"setContentTabIndex\"],\n\n      exit: [\"cleanupObserver\"],\n\n      watch: {\n        focusedValue: \"invokeOnFocus\",\n        value: [\n          \"enableIndicatorTransition\",\n          \"invokeOnChange\",\n          \"setPrevSelectedTabs\",\n          \"syncIndicatorRect\",\n          \"setContentTabIndex\",\n        ],\n        dir: [\"syncIndicatorRect\"],\n        orientation: [\"syncIndicatorRect\"],\n      },\n\n      on: {\n        SET_VALUE: {\n          actions: \"setValue\",\n        },\n        CLEAR_VALUE: {\n          actions: \"clearValue\",\n        },\n        SET_INDICATOR_RECT: {\n          actions: \"setIndicatorRect\",\n        },\n      },\n\n      states: {\n        idle: {\n          on: {\n            TAB_FOCUS: [\n              {\n                guard: \"selectOnFocus\",\n                target: \"focused\",\n                actions: [\"setFocusedValue\", \"setValue\"],\n              },\n              {\n                target: \"focused\",\n                actions: \"setFocusedValue\",\n              },\n            ],\n            TAB_CLICK: {\n              target: \"focused\",\n              actions: [\"setFocusedValue\", \"setValue\"],\n            },\n          },\n        },\n        focused: {\n          on: {\n            TAB_CLICK: {\n              target: \"focused\",\n              actions: [\"setFocusedValue\", \"setValue\"],\n            },\n            ARROW_LEFT: {\n              guard: \"isHorizontal\",\n              actions: \"focusPrevTab\",\n            },\n            ARROW_RIGHT: {\n              guard: \"isHorizontal\",\n              actions: \"focusNextTab\",\n            },\n            ARROW_UP: {\n              guard: \"isVertical\",\n              actions: \"focusPrevTab\",\n            },\n            ARROW_DOWN: {\n              guard: \"isVertical\",\n              actions: \"focusNextTab\",\n            },\n            HOME: {\n              actions: \"focusFirstTab\",\n            },\n            END: {\n              actions: \"focusLastTab\",\n            },\n            ENTER: {\n              guard: not(\"selectOnFocus\"),\n              actions: \"setValue\",\n            },\n            TAB_FOCUS: [\n              {\n                guard: \"selectOnFocus\",\n                actions: [\"setFocusedValue\", \"setValue\"],\n              },\n              { actions: \"setFocusedValue\" },\n            ],\n            TAB_BLUR: {\n              target: \"idle\",\n              actions: \"clearFocusedValue\",\n            },\n          },\n        },\n      },\n    },\n    {\n      guards: {\n        isVertical: (ctx) => ctx.isVertical,\n        isHorizontal: (ctx) => ctx.isHorizontal,\n        selectOnFocus: (ctx) => ctx.activationMode === \"automatic\",\n      },\n\n      actions: {\n        setFocusedValue(ctx, evt) {\n          ctx.focusedValue = evt.value\n        },\n        clearFocusedValue(ctx) {\n          ctx.focusedValue = null\n        },\n        setValue(ctx, evt) {\n          ctx.value = evt.value\n        },\n        clearValue(ctx) {\n          ctx.value = null\n        },\n        focusFirstTab(ctx) {\n          raf(() => dom.getFirstEl(ctx)?.focus())\n        },\n        focusLastTab(ctx) {\n          raf(() => dom.getLastEl(ctx)?.focus())\n        },\n        focusNextTab(ctx) {\n          if (!ctx.focusedValue) return\n          const next = dom.getNextEl(ctx, ctx.focusedValue)\n          raf(() => next?.focus())\n        },\n        focusPrevTab(ctx) {\n          if (!ctx.focusedValue) return\n          const prev = dom.getPrevEl(ctx, ctx.focusedValue)\n          raf(() => prev?.focus())\n        },\n        checkRenderedElements(ctx) {\n          ctx.isIndicatorRendered = !!dom.getIndicatorEl(ctx)\n        },\n        invokeOnChange(ctx) {\n          ctx.onChange?.({ value: ctx.value })\n        },\n        invokeOnFocus(ctx) {\n          ctx.onFocus?.({ value: ctx.focusedValue })\n        },\n        setPrevSelectedTabs(ctx) {\n          if (ctx.value != null) {\n            ctx.previousValues = pushUnique(ctx.previousValues, ctx.value)\n          }\n        },\n        // if tab panel contains focusable elements, remove the tabindex attribute\n        setContentTabIndex(ctx) {\n          raf(() => {\n            const panel = dom.getActiveContentEl(ctx)\n            if (!panel) return\n            const focusables = getFocusables(panel)\n            if (focusables.length > 0) {\n              panel.removeAttribute(\"tabindex\")\n            } else {\n              panel.setAttribute(\"tabindex\", \"0\")\n            }\n          })\n        },\n        cleanupObserver(ctx) {\n          ctx.indicatorCleanup?.()\n        },\n        enableIndicatorTransition(ctx) {\n          ctx.canIndicatorTransition = true\n        },\n        setIndicatorRect(ctx, evt) {\n          const value = evt.id ?? ctx.value\n          if (!ctx.isIndicatorRendered || !value) return\n\n          const tabEl = dom.getTriggerEl(ctx, value)\n          if (!tabEl) return\n\n          ctx.indicatorRect = dom.getRectById(ctx, value)\n          nextTick(() => {\n            ctx.canIndicatorTransition = false\n          })\n        },\n        syncIndicatorRect(ctx) {\n          ctx.indicatorCleanup?.()\n\n          const value = ctx.value\n          if (!ctx.isIndicatorRendered || !value) return\n\n          const tabEl = dom.getActiveTabEl(ctx)\n          if (!tabEl) return\n\n          ctx.indicatorCleanup = trackElementRect(tabEl, {\n            getRect(el) {\n              return dom.getOffsetRect(el)\n            },\n            onChange(rect) {\n              ctx.indicatorRect = dom.resolveRect(rect, ctx.orientation)\n              nextTick(() => {\n                ctx.canIndicatorTransition = false\n              })\n            },\n          })\n        },\n      },\n    },\n  )\n}\n\n// function to push value array and remove previous instances of value\nfunction pushUnique(arr: string[], value: any) {\n  const newArr = Array.from(arr).slice()\n  const index = newArr.indexOf(value)\n  if (index > -1) {\n    newArr.splice(index, 1)\n  }\n  newArr.push(value)\n  return newArr\n}\n"],"mappings":"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","names":["ctx"]}
+{"version":3,"sources":["../src/tabs.anatomy.ts","../src/tabs.connect.ts","../src/tabs.dom.ts","../src/tabs.machine.ts"],"sourcesContent":["import { createAnatomy } from \"@zag-js/anatomy\"\n\nexport const anatomy = createAnatomy(\"tabs\").parts(\"root\", \"list\", \"trigger\", \"content\", \"indicator\")\nexport const parts = anatomy.build()\n","import { getEventKey, type EventKeyMap } from \"@zag-js/dom-event\"\nimport { dataAttr, isSafari, isSelfEvent } from \"@zag-js/dom-query\"\nimport type { NormalizeProps, PropTypes } from \"@zag-js/types\"\nimport { parts } from \"./tabs.anatomy\"\nimport { dom } from \"./tabs.dom\"\nimport type { ContentProps, MachineApi, Send, State, TriggerProps } from \"./tabs.types\"\n\nexport function connect<T extends PropTypes>(state: State, send: Send, normalize: NormalizeProps<T>): MachineApi<T> {\n  const translations = state.context.translations\n  const isFocused = state.matches(\"focused\")\n\n  return {\n    value: state.context.value,\n    focusedValue: state.context.focusedValue,\n    previousValues: Array.from(state.context.previousValues),\n\n    setValue(value: string) {\n      send({ type: \"SET_VALUE\", value })\n    },\n\n    clearValue() {\n      send({ type: \"CLEAR_VALUE\" })\n    },\n\n    setIndicatorRect(id: string | null | undefined) {\n      send({ type: \"SET_INDICATOR_RECT\", id })\n    },\n\n    rootProps: normalize.element({\n      ...parts.root.attrs,\n      id: dom.getRootId(state.context),\n      \"data-orientation\": state.context.orientation,\n      \"data-focus\": dataAttr(isFocused),\n      dir: state.context.dir,\n    }),\n\n    tablistProps: normalize.element({\n      ...parts.list.attrs,\n      id: dom.getTablistId(state.context),\n      role: \"tablist\",\n      \"data-focus\": dataAttr(isFocused),\n      \"aria-orientation\": state.context.orientation,\n      \"data-orientation\": state.context.orientation,\n      \"aria-label\": translations.tablistLabel,\n      onKeyDown(event) {\n        if (!isSelfEvent(event)) return\n\n        const keyMap: EventKeyMap = {\n          ArrowDown() {\n            send(\"ARROW_DOWN\")\n          },\n          ArrowUp() {\n            send(\"ARROW_UP\")\n          },\n          ArrowLeft() {\n            send(\"ARROW_LEFT\")\n          },\n          ArrowRight() {\n            send(\"ARROW_RIGHT\")\n          },\n          Home() {\n            send(\"HOME\")\n          },\n          End() {\n            send(\"END\")\n          },\n          Enter() {\n            send({ type: \"ENTER\", value: state.context.focusedValue })\n          },\n        }\n\n        let key = getEventKey(event, state.context)\n        const exec = keyMap[key]\n\n        if (exec) {\n          event.preventDefault()\n          exec(event)\n        }\n      },\n    }),\n\n    getTriggerProps(props: TriggerProps) {\n      const { value, disabled } = props\n      const selected = state.context.value === value\n\n      return normalize.button({\n        ...parts.trigger.attrs,\n        role: \"tab\",\n        type: \"button\",\n        disabled,\n        \"data-orientation\": state.context.orientation,\n        \"data-disabled\": dataAttr(disabled),\n        \"aria-disabled\": disabled,\n        \"data-value\": value,\n        \"aria-selected\": selected,\n        \"data-selected\": dataAttr(selected),\n        \"aria-controls\": dom.getContentId(state.context, value),\n        \"data-ownedby\": dom.getTablistId(state.context),\n        id: dom.getTriggerId(state.context, value),\n        tabIndex: selected ? 0 : -1,\n        onFocus() {\n          send({ type: \"TAB_FOCUS\", value })\n        },\n        onBlur(event) {\n          const target = event.relatedTarget as HTMLElement | null\n          if (target?.getAttribute(\"role\") !== \"tab\") {\n            send({ type: \"TAB_BLUR\" })\n          }\n        },\n        onClick(event) {\n          if (disabled) return\n          if (isSafari()) {\n            event.currentTarget.focus()\n          }\n          send({ type: \"TAB_CLICK\", value })\n        },\n      })\n    },\n\n    getContentProps({ value }: ContentProps) {\n      const selected = state.context.value === value\n      return normalize.element({\n        ...parts.content.attrs,\n        id: dom.getContentId(state.context, value),\n        tabIndex: 0,\n        \"aria-labelledby\": dom.getTriggerId(state.context, value),\n        role: \"tabpanel\",\n        \"data-ownedby\": dom.getTablistId(state.context),\n        \"data-selected\": dataAttr(selected),\n        hidden: !selected,\n      })\n    },\n\n    indicatorProps: normalize.element({\n      id: dom.getIndicatorId(state.context),\n      ...parts.indicator.attrs,\n      \"data-orientation\": state.context.orientation,\n      style: {\n        \"--transition-duration\": \"150ms\",\n        \"--transition-property\": \"left, right, top, bottom, width, height\",\n        position: \"absolute\",\n        willChange: \"var(--transition-property)\",\n        transitionProperty: \"var(--transition-property)\",\n        transitionDuration: state.context.canIndicatorTransition ? \"var(--transition-duration)\" : \"0ms\",\n        transitionTimingFunction: \"var(--transition-timing-function)\",\n        ...state.context.indicatorRect,\n      },\n    }),\n  }\n}\n","import { createScope, itemById, nextById, prevById, queryAll } from \"@zag-js/dom-query\"\nimport { first, last } from \"@zag-js/utils\"\nimport type { MachineContext as Ctx } from \"./tabs.types\"\n\nexport const dom = createScope({\n  getRootId: (ctx: Ctx) => ctx.ids?.root ?? `tabs:${ctx.id}`,\n  getTablistId: (ctx: Ctx) => ctx.ids?.tablist ?? `tabs:${ctx.id}:list`,\n  getContentId: (ctx: Ctx, id: string) => ctx.ids?.content ?? `tabs:${ctx.id}:content-${id}`,\n  getTriggerId: (ctx: Ctx, id: string) => ctx.ids?.trigger ?? `tabs:${ctx.id}:trigger-${id}`,\n  getIndicatorId: (ctx: Ctx) => ctx.ids?.indicator ?? `tabs:${ctx.id}:indicator`,\n\n  getTablistEl: (ctx: Ctx) => dom.getById(ctx, dom.getTablistId(ctx)),\n  getContentEl: (ctx: Ctx, id: string) => dom.getById(ctx, dom.getContentId(ctx, id)),\n  getTriggerEl: (ctx: Ctx, id: string) => dom.getById(ctx, dom.getTriggerId(ctx, id)),\n  getIndicatorEl: (ctx: Ctx) => dom.getById(ctx, dom.getIndicatorId(ctx)),\n\n  getElements: (ctx: Ctx) => {\n    const ownerId = CSS.escape(dom.getTablistId(ctx))\n    const selector = `[role=tab][data-ownedby='${ownerId}']:not([disabled])`\n    return queryAll(dom.getTablistEl(ctx), selector)\n  },\n\n  getFirstEl: (ctx: Ctx) => first(dom.getElements(ctx)),\n  getLastEl: (ctx: Ctx) => last(dom.getElements(ctx)),\n  getNextEl: (ctx: Ctx, id: string) => nextById(dom.getElements(ctx), dom.getTriggerId(ctx, id), ctx.loop),\n  getPrevEl: (ctx: Ctx, id: string) => prevById(dom.getElements(ctx), dom.getTriggerId(ctx, id), ctx.loop),\n  getActiveContentEl: (ctx: Ctx) => {\n    if (!ctx.value) return\n    return dom.getContentEl(ctx, ctx.value)\n  },\n  getActiveTabEl: (ctx: Ctx) => {\n    if (!ctx.value) return\n    return dom.getTriggerEl(ctx, ctx.value)\n  },\n\n  getOffsetRect: (el: HTMLElement | undefined) => {\n    return {\n      left: el?.offsetLeft ?? 0,\n      top: el?.offsetTop ?? 0,\n      width: el?.offsetWidth ?? 0,\n      height: el?.offsetHeight ?? 0,\n    }\n  },\n\n  getRectById: (ctx: Ctx, id: string) => {\n    const tab = itemById(dom.getElements(ctx), dom.getTriggerId(ctx, id))\n    return dom.resolveRect(dom.getOffsetRect(tab), ctx.orientation)\n  },\n\n  resolveRect(rect: Record<\"width\" | \"height\" | \"left\" | \"top\", number>, orientation?: \"horizontal\" | \"vertical\") {\n    const sizeProp = orientation === \"vertical\" ? \"height\" : \"width\"\n    const placementProp = orientation === \"vertical\" ? \"top\" : \"left\"\n    return {\n      [placementProp]: `${rect[placementProp]}px`,\n      [sizeProp]: `${rect[sizeProp]}px`,\n    }\n  },\n})\n","import { createMachine, guards } from \"@zag-js/core\"\nimport { nextTick, raf } from \"@zag-js/dom-query\"\nimport { trackElementRect } from \"@zag-js/element-rect\"\nimport { getFocusables } from \"@zag-js/tabbable\"\nimport { compact } from \"@zag-js/utils\"\nimport { dom } from \"./tabs.dom\"\nimport type { MachineContext, MachineState, UserDefinedContext } from \"./tabs.types\"\n\nconst { not } = guards\n\nexport function machine(userContext: UserDefinedContext) {\n  const ctx = compact(userContext)\n  return createMachine<MachineContext, MachineState>(\n    {\n      initial: \"idle\",\n\n      context: {\n        dir: \"ltr\",\n        orientation: \"horizontal\",\n        activationMode: \"automatic\",\n        value: null,\n        focusedValue: null,\n        previousValues: [],\n        indicatorRect: {\n          left: \"0px\",\n          top: \"0px\",\n          width: \"0px\",\n          height: \"0px\",\n        },\n        canIndicatorTransition: false,\n        isIndicatorRendered: false,\n        loop: true,\n        translations: {},\n        ...ctx,\n      },\n\n      computed: {\n        isHorizontal: (ctx) => ctx.orientation === \"horizontal\",\n        isVertical: (ctx) => ctx.orientation === \"vertical\",\n      },\n\n      created: [\"setPrevSelectedTabs\"],\n\n      entry: [\"checkRenderedElements\", \"syncIndicatorRect\", \"setContentTabIndex\"],\n\n      exit: [\"cleanupObserver\"],\n\n      watch: {\n        value: [\"enableIndicatorTransition\", \"setPrevSelectedTabs\", \"syncIndicatorRect\", \"setContentTabIndex\"],\n        dir: [\"syncIndicatorRect\"],\n        orientation: [\"syncIndicatorRect\"],\n      },\n\n      on: {\n        SET_VALUE: {\n          actions: \"setValue\",\n        },\n        CLEAR_VALUE: {\n          actions: \"clearValue\",\n        },\n        SET_INDICATOR_RECT: {\n          actions: \"setIndicatorRect\",\n        },\n      },\n\n      states: {\n        idle: {\n          on: {\n            TAB_FOCUS: [\n              {\n                guard: \"selectOnFocus\",\n                target: \"focused\",\n                actions: [\"setFocusedValue\", \"setValue\"],\n              },\n              {\n                target: \"focused\",\n                actions: \"setFocusedValue\",\n              },\n            ],\n            TAB_CLICK: {\n              target: \"focused\",\n              actions: [\"setFocusedValue\", \"setValue\"],\n            },\n          },\n        },\n        focused: {\n          on: {\n            TAB_CLICK: {\n              target: \"focused\",\n              actions: [\"setFocusedValue\", \"setValue\"],\n            },\n            ARROW_LEFT: {\n              guard: \"isHorizontal\",\n              actions: \"focusPrevTab\",\n            },\n            ARROW_RIGHT: {\n              guard: \"isHorizontal\",\n              actions: \"focusNextTab\",\n            },\n            ARROW_UP: {\n              guard: \"isVertical\",\n              actions: \"focusPrevTab\",\n            },\n            ARROW_DOWN: {\n              guard: \"isVertical\",\n              actions: \"focusNextTab\",\n            },\n            HOME: {\n              actions: \"focusFirstTab\",\n            },\n            END: {\n              actions: \"focusLastTab\",\n            },\n            ENTER: {\n              guard: not(\"selectOnFocus\"),\n              actions: \"setValue\",\n            },\n            TAB_FOCUS: [\n              {\n                guard: \"selectOnFocus\",\n                actions: [\"setFocusedValue\", \"setValue\"],\n              },\n              { actions: \"setFocusedValue\" },\n            ],\n            TAB_BLUR: {\n              target: \"idle\",\n              actions: \"clearFocusedValue\",\n            },\n          },\n        },\n      },\n    },\n    {\n      guards: {\n        isVertical: (ctx) => ctx.isVertical,\n        isHorizontal: (ctx) => ctx.isHorizontal,\n        selectOnFocus: (ctx) => ctx.activationMode === \"automatic\",\n      },\n\n      actions: {\n        setFocusedValue(ctx, evt) {\n          set.focusedValue(ctx, evt.value)\n        },\n        clearFocusedValue(ctx) {\n          set.focusedValue(ctx, null)\n        },\n        setValue(ctx, evt) {\n          set.value(ctx, evt.value)\n        },\n        clearValue(ctx) {\n          set.value(ctx, null)\n        },\n        focusFirstTab(ctx) {\n          raf(() => dom.getFirstEl(ctx)?.focus())\n        },\n        focusLastTab(ctx) {\n          raf(() => dom.getLastEl(ctx)?.focus())\n        },\n        focusNextTab(ctx) {\n          if (!ctx.focusedValue) return\n          const next = dom.getNextEl(ctx, ctx.focusedValue)\n          raf(() => next?.focus())\n        },\n        focusPrevTab(ctx) {\n          if (!ctx.focusedValue) return\n          const prev = dom.getPrevEl(ctx, ctx.focusedValue)\n          raf(() => prev?.focus())\n        },\n        checkRenderedElements(ctx) {\n          ctx.isIndicatorRendered = !!dom.getIndicatorEl(ctx)\n        },\n        setPrevSelectedTabs(ctx) {\n          if (ctx.value != null) {\n            ctx.previousValues = pushUnique(ctx.previousValues, ctx.value)\n          }\n        },\n        // if tab panel contains focusable elements, remove the tabindex attribute\n        setContentTabIndex(ctx) {\n          raf(() => {\n            const panel = dom.getActiveContentEl(ctx)\n            if (!panel) return\n            const focusables = getFocusables(panel)\n            if (focusables.length > 0) {\n              panel.removeAttribute(\"tabindex\")\n            } else {\n              panel.setAttribute(\"tabindex\", \"0\")\n            }\n          })\n        },\n        cleanupObserver(ctx) {\n          ctx.indicatorCleanup?.()\n        },\n        enableIndicatorTransition(ctx) {\n          ctx.canIndicatorTransition = true\n        },\n        setIndicatorRect(ctx, evt) {\n          const value = evt.id ?? ctx.value\n          if (!ctx.isIndicatorRendered || !value) return\n\n          const tabEl = dom.getTriggerEl(ctx, value)\n          if (!tabEl) return\n\n          ctx.indicatorRect = dom.getRectById(ctx, value)\n          nextTick(() => {\n            ctx.canIndicatorTransition = false\n          })\n        },\n        syncIndicatorRect(ctx) {\n          ctx.indicatorCleanup?.()\n\n          const value = ctx.value\n          if (!ctx.isIndicatorRendered || !value) return\n\n          const tabEl = dom.getActiveTabEl(ctx)\n          if (!tabEl) return\n\n          ctx.indicatorCleanup = trackElementRect(tabEl, {\n            getRect(el) {\n              return dom.getOffsetRect(el)\n            },\n            onChange(rect) {\n              ctx.indicatorRect = dom.resolveRect(rect, ctx.orientation)\n              nextTick(() => {\n                ctx.canIndicatorTransition = false\n              })\n            },\n          })\n        },\n      },\n    },\n  )\n}\n\n// function to push value array and remove previous instances of value\nfunction pushUnique(arr: string[], value: any) {\n  const newArr = Array.from(arr).slice()\n  const index = newArr.indexOf(value)\n  if (index > -1) {\n    newArr.splice(index, 1)\n  }\n  newArr.push(value)\n  return newArr\n}\n\nconst invoke = {\n  change: (ctx: MachineContext) => {\n    if (ctx.value == null) return\n    ctx.onChange?.({ value: ctx.value })\n  },\n  focusChange: (ctx: MachineContext) => {\n    if (ctx.focusedValue == null) return\n    ctx.onFocus?.({ value: ctx.focusedValue })\n  },\n}\n\nconst set = {\n  value: (ctx: MachineContext, value: string | null) => {\n    ctx.value = value\n    invoke.change(ctx)\n  },\n  focusedValue: (ctx: MachineContext, value: string | null) => {\n    ctx.focusedValue = value\n    invoke.focusChange(ctx)\n  },\n}\n"],"mappings":"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","names":["ctx"]}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@zag-js/tabs",
-  "version": "0.16.0",
+  "version": "0.18.0",
   "description": "Core logic for the tabs widget implemented as a state machine",
   "keywords": [
     "js",
@@ -27,14 +27,14 @@
     "url": "https://github.com/chakra-ui/zag/issues"
   },
   "dependencies": {
-    "@zag-js/anatomy": "0.16.0",
-    "@zag-js/dom-query": "0.16.0",
-    "@zag-js/dom-event": "0.16.0",
-    "@zag-js/element-rect": "0.16.0",
-    "@zag-js/tabbable": "0.16.0",
-    "@zag-js/utils": "0.16.0",
-    "@zag-js/core": "0.16.0",
-    "@zag-js/types": "0.16.0"
+    "@zag-js/anatomy": "0.18.0",
+    "@zag-js/dom-query": "0.18.0",
+    "@zag-js/dom-event": "0.18.0",
+    "@zag-js/element-rect": "0.18.0",
+    "@zag-js/tabbable": "0.18.0",
+    "@zag-js/utils": "0.18.0",
+    "@zag-js/core": "0.18.0",
+    "@zag-js/types": "0.18.0"
   },
   "devDependencies": {
     "clean-package": "2.2.0"

package/src/index.ts

@@ -1,4 +1,4 @@
 export { anatomy } from "./tabs.anatomy"
 export { connect } from "./tabs.connect"
 export { machine } from "./tabs.machine"
-export type { ContentProps, UserDefinedContext as Context, PublicApi, TriggerProps } from "./tabs.types"
+export type { ContentProps, UserDefinedContext as Context, MachineApi as Api, TriggerProps } from "./tabs.types"

package/src/tabs.connect.ts

@@ -3,9 +3,9 @@ import { dataAttr, isSafari, isSelfEvent } from "@zag-js/dom-query"
 import type { NormalizeProps, PropTypes } from "@zag-js/types"
 import { parts } from "./tabs.anatomy"
 import { dom } from "./tabs.dom"
-import type { ContentProps, PublicApi, Send, State, TriggerProps } from "./tabs.types"
+import type { ContentProps, MachineApi, Send, State, TriggerProps } from "./tabs.types"
 
-export function connect<T extends PropTypes>(state: State, send: Send, normalize: NormalizeProps<T>): PublicApi<T> {
+export function connect<T extends PropTypes>(state: State, send: Send, normalize: NormalizeProps<T>): MachineApi<T> {
   const translations = state.context.translations
   const isFocused = state.matches("focused")
 

package/src/tabs.machine.ts

@@ -46,14 +46,7 @@ export function machine(userContext: UserDefinedContext) {
       exit: ["cleanupObserver"],
 
       watch: {
-        focusedValue: "invokeOnFocus",
-        value: [
-          "enableIndicatorTransition",
-          "invokeOnChange",
-          "setPrevSelectedTabs",
-          "syncIndicatorRect",
-          "setContentTabIndex",
-        ],
+        value: ["enableIndicatorTransition", "setPrevSelectedTabs", "syncIndicatorRect", "setContentTabIndex"],
         dir: ["syncIndicatorRect"],
         orientation: ["syncIndicatorRect"],
       },
@@ -146,16 +139,16 @@ export function machine(userContext: UserDefinedContext) {
 
       actions: {
         setFocusedValue(ctx, evt) {
-          ctx.focusedValue = evt.value
+          set.focusedValue(ctx, evt.value)
         },
         clearFocusedValue(ctx) {
-          ctx.focusedValue = null
+          set.focusedValue(ctx, null)
         },
         setValue(ctx, evt) {
-          ctx.value = evt.value
+          set.value(ctx, evt.value)
         },
         clearValue(ctx) {
-          ctx.value = null
+          set.value(ctx, null)
         },
         focusFirstTab(ctx) {
           raf(() => dom.getFirstEl(ctx)?.focus())
@@ -176,12 +169,6 @@ export function machine(userContext: UserDefinedContext) {
         checkRenderedElements(ctx) {
           ctx.isIndicatorRendered = !!dom.getIndicatorEl(ctx)
         },
-        invokeOnChange(ctx) {
-          ctx.onChange?.({ value: ctx.value })
-        },
-        invokeOnFocus(ctx) {
-          ctx.onFocus?.({ value: ctx.focusedValue })
-        },
         setPrevSelectedTabs(ctx) {
           if (ctx.value != null) {
             ctx.previousValues = pushUnique(ctx.previousValues, ctx.value)
@@ -254,3 +241,25 @@ function pushUnique(arr: string[], value: any) {
   newArr.push(value)
   return newArr
 }
+
+const invoke = {
+  change: (ctx: MachineContext) => {
+    if (ctx.value == null) return
+    ctx.onChange?.({ value: ctx.value })
+  },
+  focusChange: (ctx: MachineContext) => {
+    if (ctx.focusedValue == null) return
+    ctx.onFocus?.({ value: ctx.focusedValue })
+  },
+}
+
+const set = {
+  value: (ctx: MachineContext, value: string | null) => {
+    ctx.value = value
+    invoke.change(ctx)
+  },
+  focusedValue: (ctx: MachineContext, value: string | null) => {
+    ctx.focusedValue = value
+    invoke.focusChange(ctx)
+  },
+}

package/src/tabs.types.ts

@@ -59,49 +59,13 @@ type PublicContext = DirectionProperty &
     /**
      * Callback to be called when the selected/active tab changes
      */
-    onChange?: (details: { value: string | null }) => void
+    onChange?: (details: { value: string }) => 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
+    onFocus?: (details: { value: string }) => void
   }
 
-export type PublicApi<T extends PropTypes = PropTypes> = {
-  /**
-   * The current value of the tabs.
-   */
-  value: string | null
-  /**
-   * The value of the tab that is currently focused.
-   */
-  focusedValue: string | null
-  /**
-   * The previous values of the tabs in sequence of selection.
-   */
-  previousValues: string[]
-  /**
-   * Sets the value of the tabs.
-   */
-  setValue(value: string): void
-  /**
-   * Clears the value of the tabs.
-   */
-  clearValue(): void
-  /**
-   * Sets the indicator rect to the tab with the given id.
-   */
-  setIndicatorRect(id: string | null | undefined): void
-  rootProps: T["element"]
-  tablistProps: T["element"]
-  getTriggerProps(props: TriggerProps): T["button"]
-  getContentProps({ value }: ContentProps): T["element"]
-  indicatorProps: T["element"]
-}
-
 export type UserDefinedContext = RequiredBy<PublicContext, "id">
 
 type ComputedContext = Readonly<{
@@ -159,3 +123,35 @@ export type MachineState = {
 export type State = S.State<MachineContext, MachineState>
 
 export type Send = S.Send<S.AnyEventObject>
+
+export type MachineApi<T extends PropTypes = PropTypes> = {
+  /**
+   * The current value of the tabs.
+   */
+  value: string | null
+  /**
+   * The value of the tab that is currently focused.
+   */
+  focusedValue: string | null
+  /**
+   * The previous values of the tabs in sequence of selection.
+   */
+  previousValues: string[]
+  /**
+   * Sets the value of the tabs.
+   */
+  setValue(value: string): void
+  /**
+   * Clears the value of the tabs.
+   */
+  clearValue(): void
+  /**
+   * Sets the indicator rect to the tab with the given id.
+   */
+  setIndicatorRect(id: string | null | undefined): void
+  rootProps: T["element"]
+  tablistProps: T["element"]
+  getTriggerProps(props: TriggerProps): T["button"]
+  getContentProps({ value }: ContentProps): T["element"]
+  indicatorProps: T["element"]
+}