npm - @zag-js/tabs - Versions diffs - 0.46.0 → 0.48.0 - Mend

@zag-js/tabs 0.46.0 → 0.48.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (12) hide show

package/dist/index.d.mts CHANGED Viewed

@@ -34,7 +34,7 @@ interface PublicContext extends DirectionProperty, CommonProperties {
      * Whether the keyboard navigation will loop from last tab to first, and vice versa.
      * @default true
      */
-    loop: boolean;
+    loopFocus: boolean;
     /**
      * The selected tab id
      */
@@ -86,14 +86,33 @@ interface MachineState {
 type State = StateMachine.State<MachineContext, MachineState>;
 type Send = StateMachine.Send<StateMachine.AnyEventObject>;
 interface TriggerProps {
+    /**
+     * The value of the tab
+     */
     value: string;
+    /**
+     * Whether the tab is disabled
+     */
     disabled?: boolean;
 }
 interface TriggerState {
-    isSelected: boolean;
-    isFocused: boolean;
+    /**
+     * Whether the tab is selected
+     */
+    selected: boolean;
+    /**
+     * Whether the tab is focused
+     */
+    focused: boolean;
+    /**
+     * Whether the tab is disabled
+     */
+    disabled: boolean;
 }
 interface ContentProps {
+    /**
+     * The value of the tab
+     */
     value: string;
 }
 interface MachineApi<T extends PropTypes = PropTypes> {
@@ -132,8 +151,8 @@ declare function connect<T extends PropTypes>(state: State, send: Send, normaliz
 declare function machine(userContext: UserDefinedContext): _zag_js_core.Machine<MachineContext, MachineState, _zag_js_core.StateMachine.AnyEventObject>;
-declare const props: ("dir" | "id" | "loop" | "value" | "orientation" | "ids" | "translations" | "activationMode" | "onValueChange" | "onFocusChange" | "getRootNode")[];
-declare const splitProps: <Props extends Partial<UserDefinedContext>>(props: Props) => [Partial<UserDefinedContext>, Omit<Props, "dir" | "id" | "loop" | "value" | "orientation" | "ids" | "translations" | "activationMode" | "onValueChange" | "onFocusChange" | "getRootNode">];
+declare const props: ("value" | "dir" | "id" | "orientation" | "ids" | "translations" | "loopFocus" | "activationMode" | "onValueChange" | "onFocusChange" | "getRootNode")[];
+declare const splitProps: <Props extends Partial<UserDefinedContext>>(props: Props) => [Partial<UserDefinedContext>, Omit<Props, "value" | "dir" | "id" | "orientation" | "ids" | "translations" | "loopFocus" | "activationMode" | "onValueChange" | "onFocusChange" | "getRootNode">];
 declare const triggerProps: (keyof TriggerProps)[];
 declare const splitTriggerProps: <Props extends TriggerProps>(props: Props) => [TriggerProps, Omit<Props, keyof TriggerProps>];
 declare const contentProps: "value"[];

package/dist/index.d.ts CHANGED Viewed

@@ -34,7 +34,7 @@ interface PublicContext extends DirectionProperty, CommonProperties {
      * Whether the keyboard navigation will loop from last tab to first, and vice versa.
      * @default true
      */
-    loop: boolean;
+    loopFocus: boolean;
     /**
      * The selected tab id
      */
@@ -86,14 +86,33 @@ interface MachineState {
 type State = StateMachine.State<MachineContext, MachineState>;
 type Send = StateMachine.Send<StateMachine.AnyEventObject>;
 interface TriggerProps {
+    /**
+     * The value of the tab
+     */
     value: string;
+    /**
+     * Whether the tab is disabled
+     */
     disabled?: boolean;
 }
 interface TriggerState {
-    isSelected: boolean;
-    isFocused: boolean;
+    /**
+     * Whether the tab is selected
+     */
+    selected: boolean;
+    /**
+     * Whether the tab is focused
+     */
+    focused: boolean;
+    /**
+     * Whether the tab is disabled
+     */
+    disabled: boolean;
 }
 interface ContentProps {
+    /**
+     * The value of the tab
+     */
     value: string;
 }
 interface MachineApi<T extends PropTypes = PropTypes> {
@@ -132,8 +151,8 @@ declare function connect<T extends PropTypes>(state: State, send: Send, normaliz
 declare function machine(userContext: UserDefinedContext): _zag_js_core.Machine<MachineContext, MachineState, _zag_js_core.StateMachine.AnyEventObject>;
-declare const props: ("dir" | "id" | "loop" | "value" | "orientation" | "ids" | "translations" | "activationMode" | "onValueChange" | "onFocusChange" | "getRootNode")[];
-declare const splitProps: <Props extends Partial<UserDefinedContext>>(props: Props) => [Partial<UserDefinedContext>, Omit<Props, "dir" | "id" | "loop" | "value" | "orientation" | "ids" | "translations" | "activationMode" | "onValueChange" | "onFocusChange" | "getRootNode">];
+declare const props: ("value" | "dir" | "id" | "orientation" | "ids" | "translations" | "loopFocus" | "activationMode" | "onValueChange" | "onFocusChange" | "getRootNode")[];
+declare const splitProps: <Props extends Partial<UserDefinedContext>>(props: Props) => [Partial<UserDefinedContext>, Omit<Props, "value" | "dir" | "id" | "orientation" | "ids" | "translations" | "loopFocus" | "activationMode" | "onValueChange" | "onFocusChange" | "getRootNode">];
 declare const triggerProps: (keyof TriggerProps)[];
 declare const splitTriggerProps: <Props extends TriggerProps>(props: Props) => [TriggerProps, Omit<Props, keyof TriggerProps>];
 declare const contentProps: "value"[];

package/dist/index.js CHANGED Viewed

@@ -61,8 +61,8 @@ var dom = (0, import_dom_query.createScope)({
   },
   getFirstEl: (ctx) => (0, import_utils.first)(dom.getElements(ctx)),
   getLastEl: (ctx) => (0, import_utils.last)(dom.getElements(ctx)),
-  getNextEl: (ctx, id) => (0, import_dom_query.nextById)(dom.getElements(ctx), dom.getTriggerId(ctx, id), ctx.loop),
-  getPrevEl: (ctx, id) => (0, import_dom_query.prevById)(dom.getElements(ctx), dom.getTriggerId(ctx, id), ctx.loop),
+  getNextEl: (ctx, id) => (0, import_dom_query.nextById)(dom.getElements(ctx), dom.getTriggerId(ctx, id), ctx.loopFocus),
+  getPrevEl: (ctx, id) => (0, import_dom_query.prevById)(dom.getElements(ctx), dom.getTriggerId(ctx, id), ctx.loopFocus),
   getActiveContentEl: (ctx) => {
     if (!ctx.value)
       return;
@@ -96,12 +96,12 @@ var dom = (0, import_dom_query.createScope)({
 // src/tabs.connect.ts
 function connect(state, send, normalize) {
   const translations = state.context.translations;
-  const isFocused = state.matches("focused");
+  const focused = state.matches("focused");
   function getTriggerState(props2) {
     return {
-      isSelected: state.context.value === props2.value,
-      isFocused: state.context.focusedValue === props2.value,
-      isDisabled: !!props2.disabled
+      selected: state.context.value === props2.value,
+      focused: state.context.focusedValue === props2.value,
+      disabled: !!props2.disabled
     };
   }
   return {
@@ -122,7 +122,7 @@ function connect(state, send, normalize) {
       ...parts.root.attrs,
       id: dom.getRootId(state.context),
       "data-orientation": state.context.orientation,
-      "data-focus": (0, import_dom_query2.dataAttr)(isFocused),
+      "data-focus": (0, import_dom_query2.dataAttr)(focused),
       dir: state.context.dir
     }),
     listProps: normalize.element({
@@ -130,13 +130,15 @@ function connect(state, send, normalize) {
       id: dom.getListId(state.context),
       role: "tablist",
       dir: state.context.dir,
-      "data-focus": (0, import_dom_query2.dataAttr)(isFocused),
+      "data-focus": (0, import_dom_query2.dataAttr)(focused),
       "aria-orientation": state.context.orientation,
       "data-orientation": state.context.orientation,
       "aria-label": translations.listLabel,
       onKeyDown(event) {
-        const evt = event.nativeEvent || event;
-        if (!(0, import_dom_query2.isSelfEvent)(evt))
+        if (event.defaultPrevented)
+          return;
+        const evt = (0, import_dom_event.getNativeEvent)(event);
+        if (!(0, import_dom_query2.isSelfTarget)(evt))
           return;
         const keyMap = {
           ArrowDown() {
@@ -182,13 +184,13 @@ function connect(state, send, normalize) {
         "data-disabled": (0, import_dom_query2.dataAttr)(disabled),
         "aria-disabled": disabled,
         "data-value": value,
-        "aria-selected": triggerState.isSelected,
-        "data-selected": (0, import_dom_query2.dataAttr)(triggerState.isSelected),
-        "data-focus": (0, import_dom_query2.dataAttr)(triggerState.isFocused),
+        "aria-selected": triggerState.selected,
+        "data-selected": (0, import_dom_query2.dataAttr)(triggerState.selected),
+        "data-focus": (0, import_dom_query2.dataAttr)(triggerState.focused),
         "aria-controls": dom.getContentId(state.context, value),
         "data-ownedby": dom.getListId(state.context),
         id: dom.getTriggerId(state.context, value),
-        tabIndex: triggerState.isSelected ? 0 : -1,
+        tabIndex: triggerState.selected ? 0 : -1,
         onFocus() {
           send({ type: "TAB_FOCUS", value });
         },
@@ -199,6 +201,8 @@ function connect(state, send, normalize) {
           }
         },
         onClick(event) {
+          if (event.defaultPrevented)
+            return;
           if (disabled)
             return;
           if ((0, import_dom_query2.isSafari)()) {
@@ -248,6 +252,7 @@ function connect(state, send, normalize) {
 // src/tabs.machine.ts
 var import_core = require("@zag-js/core");
+var import_dom_event2 = require("@zag-js/dom-event");
 var import_dom_query3 = require("@zag-js/dom-query");
 var import_element_rect = require("@zag-js/element-rect");
 var import_tabbable = require("@zag-js/tabbable");
@@ -272,7 +277,7 @@ function machine(userContext) {
         },
         canIndicatorTransition: false,
         isIndicatorRendered: false,
-        loop: true,
+        loopFocus: true,
         translations: {},
         ...ctx
       },
@@ -283,7 +288,7 @@ function machine(userContext) {
       entry: ["checkRenderedElements", "syncIndicatorRect", "setContentTabIndex"],
       exit: ["cleanupObserver"],
       watch: {
-        value: ["enableIndicatorTransition", "syncIndicatorRect", "setContentTabIndex"],
+        value: ["enableIndicatorTransition", "syncIndicatorRect", "setContentTabIndex", "clickIfLink"],
         dir: ["syncIndicatorRect"],
         orientation: ["syncIndicatorRect"]
       },
@@ -456,6 +461,9 @@ function machine(userContext) {
               });
             }
           });
+        },
+        clickIfLink(ctx2) {
+          (0, import_dom_event2.clickIfLink)(dom.getActiveTabEl(ctx2));
         }
       }
     }
@@ -497,7 +505,7 @@ var props = (0, import_types.createProps)()([
   "getRootNode",
   "id",
   "ids",
-  "loop",
+  "loopFocus",
   "onFocusChange",
   "onValueChange",
   "orientation",

package/dist/index.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"sources":["../src/index.ts","../src/tabs.anatomy.ts","../src/tabs.connect.ts","../src/tabs.dom.ts","../src/tabs.machine.ts","../src/tabs.props.ts"],"sourcesContent":["export { anatomy } from \"./tabs.anatomy\"\nexport { connect } from \"./tabs.connect\"\nexport { machine } from \"./tabs.machine\"\nexport * from \"./tabs.props\"\nexport type {\n MachineApi as Api,\n ContentProps,\n UserDefinedContext as Context,\n ElementIds,\n FocusChangeDetails,\n IntlTranslations,\n TriggerProps,\n ValueChangeDetails,\n} 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 { 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 function getTriggerState(props: TriggerProps) {\n return {\n isSelected: state.context.value === props.value,\n isFocused: state.context.focusedValue === props.value,\n isDisabled: !!props.disabled,\n }\n }\n\n return {\n value: state.context.value,\n focusedValue: state.context.focusedValue,\n setValue(value) {\n send({ type: \"SET_VALUE\", value })\n },\n clearValue() {\n send({ type: \"CLEAR_VALUE\" })\n },\n setIndicatorRect(value) {\n const id = dom.getTriggerId(state.context, value)\n send({ type: \"SET_INDICATOR_RECT\", id })\n },\n getTriggerState,\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 listProps: normalize.element({\n ...parts.list.attrs,\n id: dom.getListId(state.context),\n role: \"tablist\",\n dir: state.context.dir,\n \"data-focus\": dataAttr(isFocused),\n \"aria-orientation\": state.context.orientation,\n \"data-orientation\": state.context.orientation,\n \"aria-label\": translations.listLabel,\n onKeyDown(event) {\n const evt = event.nativeEvent \|\| event\n if (!isSelfEvent(evt)) 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) {\n const { value, disabled } = props\n const triggerState = getTriggerState(props)\n\n return normalize.button({\n ...parts.trigger.attrs,\n role: \"tab\",\n type: \"button\",\n disabled,\n dir: state.context.dir,\n \"data-orientation\": state.context.orientation,\n \"data-disabled\": dataAttr(disabled),\n \"aria-disabled\": disabled,\n \"data-value\": value,\n \"aria-selected\": triggerState.isSelected,\n \"data-selected\": dataAttr(triggerState.isSelected),\n \"data-focus\": dataAttr(triggerState.isFocused),\n \"aria-controls\": dom.getContentId(state.context, value),\n \"data-ownedby\": dom.getListId(state.context),\n id: dom.getTriggerId(state.context, value),\n tabIndex: triggerState.isSelected ? 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(props) {\n const { value } = props\n const selected = state.context.value === value\n return normalize.element({\n ...parts.content.attrs,\n dir: state.context.dir,\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.getListId(state.context),\n \"data-selected\": dataAttr(selected),\n \"data-orientation\": state.context.orientation,\n hidden: !selected,\n })\n },\n\n indicatorProps: normalize.element({\n id: dom.getIndicatorId(state.context),\n ...parts.indicator.attrs,\n dir: state.context.dir,\n \"data-orientation\": state.context.orientation,\n style: {\n \"--transition-property\": \"left, right, top, bottom, width, height\",\n \"--left\": state.context.indicatorRect?.left,\n \"--top\": state.context.indicatorRect?.top,\n \"--width\": state.context.indicatorRect?.width,\n \"--height\": state.context.indicatorRect?.height,\n position: \"absolute\",\n willChange: \"var(--transition-property)\",\n transitionProperty: \"var(--transition-property)\",\n transitionDuration: state.context.canIndicatorTransition ? \"var(--transition-duration, 150ms)\" : \"0ms\",\n transitionTimingFunction: \"var(--transition-timing-function)\",\n [state.context.orientation === \"horizontal\" ? \"left\" : \"top\"]:\n state.context.orientation === \"horizontal\" ? \"var(--left)\" : \"var(--top)\",\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 getListId: (ctx: Ctx) => ctx.ids?.list ?? `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 getListEl: (ctx: Ctx) => dom.getById(ctx, dom.getListId(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.getListId(ctx))\n const selector = `[role=tab][data-ownedby='${ownerId}']:not([disabled])`\n return queryAll(dom.getListEl(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))\n },\n\n resolveRect: (rect: Record<\"width\" \| \"height\" \| \"left\" \| \"top\", number>) => ({\n width: `${rect.width}px`,\n height: `${rect.height}px`,\n left: `${rect.left}px`,\n top: `${rect.top}px`,\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, isEqual } 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 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 entry: [\"checkRenderedElements\", \"syncIndicatorRect\", \"setContentTabIndex\"],\n\n exit: [\"cleanupObserver\"],\n\n watch: {\n value: [\"enableIndicatorTransition\", \"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 // 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)\n nextTick(() => {\n ctx.canIndicatorTransition = false\n })\n },\n })\n },\n },\n },\n )\n}\n\nconst invoke = {\n change: (ctx: MachineContext) => {\n if (ctx.value == null) return\n ctx.onValueChange?.({ value: ctx.value })\n },\n focusChange: (ctx: MachineContext) => {\n if (ctx.focusedValue == null) return\n ctx.onFocusChange?.({ focusedValue: ctx.focusedValue })\n },\n}\n\nconst set = {\n value: (ctx: MachineContext, value: string \| null) => {\n if (isEqual(value, ctx.value)) return\n ctx.value = value\n invoke.change(ctx)\n },\n focusedValue: (ctx: MachineContext, value: string \| null) => {\n if (isEqual(value, ctx.focusedValue)) return\n ctx.focusedValue = value\n invoke.focusChange(ctx)\n },\n}\n","import { createProps } from \"@zag-js/types\"\nimport { createSplitProps } from \"@zag-js/utils\"\nimport type { ContentProps, TriggerProps, UserDefinedContext } from \"./tabs.types\"\n\nexport const props = createProps<UserDefinedContext>()([\n \"activationMode\",\n \"dir\",\n \"getRootNode\",\n \"id\",\n \"ids\",\n \"loop\",\n \"onFocusChange\",\n \"onValueChange\",\n \"orientation\",\n \"translations\",\n \"value\",\n])\n\nexport const splitProps = createSplitProps<Partial<UserDefinedContext>>(props)\n\nexport const triggerProps = createProps<TriggerProps>()([\"disabled\", \"value\"])\nexport const splitTriggerProps = createSplitProps<TriggerProps>(triggerProps)\n\nexport const contentProps = createProps<ContentProps>()([\"value\"])\nexport const splitContentProps = createSplitProps<ContentProps>(contentProps)\n"],"mappings":";;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;;ACAA,qBAA8B;AAEvB,IAAM,cAAU,8BAAc,MAAM,EAAE,MAAM,QAAQ,QAAQ,WAAW,WAAW,WAAW;AAC7F,IAAM,QAAQ,QAAQ,MAAM;;;ACHnC,uBAA8C;AAC9C,IAAAA,oBAAgD;;;ACDhD,uBAAoE;AACpE,mBAA4B;AAGrB,IAAM,UAAM,8BAAY;AAAA,EAC7B,WAAW,CAAC,QAAa,IAAI,KAAK,QAAQ,QAAQ,IAAI,EAAE;AAAA,EACxD,WAAW,CAAC,QAAa,IAAI,KAAK,QAAQ,QAAQ,IAAI,EAAE;AAAA,EACxD,cAAc,CAAC,KAAU,OAAe,IAAI,KAAK,WAAW,QAAQ,IAAI,EAAE,YAAY,EAAE;AAAA,EACxF,cAAc,CAAC,KAAU,OAAe,IAAI,KAAK,WAAW,QAAQ,IAAI,EAAE,YAAY,EAAE;AAAA,EACxF,gBAAgB,CAAC,QAAa,IAAI,KAAK,aAAa,QAAQ,IAAI,EAAE;AAAA,EAElE,WAAW,CAAC,QAAa,IAAI,QAAQ,KAAK,IAAI,UAAU,GAAG,CAAC;AAAA,EAC5D,cAAc,CAAC,KAAU,OAAe,IAAI,QAAQ,KAAK,IAAI,aAAa,KAAK,EAAE,CAAC;AAAA,EAClF,cAAc,CAAC,KAAU,OAAe,IAAI,QAAQ,KAAK,IAAI,aAAa,KAAK,EAAE,CAAC;AAAA,EAClF,gBAAgB,CAAC,QAAa,IAAI,QAAQ,KAAK,IAAI,eAAe,GAAG,CAAC;AAAA,EAEtE,aAAa,CAAC,QAAa;AACzB,UAAM,UAAU,IAAI,OAAO,IAAI,UAAU,GAAG,CAAC;AAC7C,UAAM,WAAW,4BAA4B,OAAO;AACpD,eAAO,2BAAS,IAAI,UAAU,GAAG,GAAG,QAAQ;AAAA,EAC9C;AAAA,EAEA,YAAY,CAAC,YAAa,oBAAM,IAAI,YAAY,GAAG,CAAC;AAAA,EACpD,WAAW,CAAC,YAAa,mBAAK,IAAI,YAAY,GAAG,CAAC;AAAA,EAClD,WAAW,CAAC,KAAU,WAAe,2BAAS,IAAI,YAAY,GAAG,GAAG,IAAI,aAAa,KAAK,EAAE,GAAG,IAAI,IAAI;AAAA,EACvG,WAAW,CAAC,KAAU,WAAe,2BAAS,IAAI,YAAY,GAAG,GAAG,IAAI,aAAa,KAAK,EAAE,GAAG,IAAI,IAAI;AAAA,EACvG,oBAAoB,CAAC,QAAa;AAChC,QAAI,CAAC,IAAI;AAAO;AAChB,WAAO,IAAI,aAAa,KAAK,IAAI,KAAK;AAAA,EACxC;AAAA,EACA,gBAAgB,CAAC,QAAa;AAC5B,QAAI,CAAC,IAAI;AAAO;AAChB,WAAO,IAAI,aAAa,KAAK,IAAI,KAAK;AAAA,EACxC;AAAA,EAEA,eAAe,CAAC,OAAgC;AAC9C,WAAO;AAAA,MACL,MAAM,IAAI,cAAc;AAAA,MACxB,KAAK,IAAI,aAAa;AAAA,MACtB,OAAO,IAAI,eAAe;AAAA,MAC1B,QAAQ,IAAI,gBAAgB;AAAA,IAC9B;AAAA,EACF;AAAA,EAEA,aAAa,CAAC,KAAU,OAAe;AACrC,UAAM,UAAM,2BAAS,IAAI,YAAY,GAAG,GAAG,IAAI,aAAa,KAAK,EAAE,CAAC;AACpE,WAAO,IAAI,YAAY,IAAI,cAAc,GAAG,CAAC;AAAA,EAC/C;AAAA,EAEA,aAAa,CAAC,UAA+D;AAAA,IAC3E,OAAO,GAAG,KAAK,KAAK;AAAA,IACpB,QAAQ,GAAG,KAAK,MAAM;AAAA,IACtB,MAAM,GAAG,KAAK,IAAI;AAAA,IAClB,KAAK,GAAG,KAAK,GAAG;AAAA,EAClB;AACF,CAAC;;;ADhDM,SAAS,QAA6B,OAAc,MAAY,WAA6C;AAClH,QAAM,eAAe,MAAM,QAAQ;AACnC,QAAM,YAAY,MAAM,QAAQ,SAAS;AAEzC,WAAS,gBAAgBC,QAAqB;AAC5C,WAAO;AAAA,MACL,YAAY,MAAM,QAAQ,UAAUA,OAAM;AAAA,MAC1C,WAAW,MAAM,QAAQ,iBAAiBA,OAAM;AAAA,MAChD,YAAY,CAAC,CAACA,OAAM;AAAA,IACtB;AAAA,EACF;AAEA,SAAO;AAAA,IACL,OAAO,MAAM,QAAQ;AAAA,IACrB,cAAc,MAAM,QAAQ;AAAA,IAC5B,SAAS,OAAO;AACd,WAAK,EAAE,MAAM,aAAa,MAAM,CAAC;AAAA,IACnC;AAAA,IACA,aAAa;AACX,WAAK,EAAE,MAAM,cAAc,CAAC;AAAA,IAC9B;AAAA,IACA,iBAAiB,OAAO;AACtB,YAAM,KAAK,IAAI,aAAa,MAAM,SAAS,KAAK;AAChD,WAAK,EAAE,MAAM,sBAAsB,GAAG,CAAC;AAAA,IACzC;AAAA,IACA;AAAA,IAEA,WAAW,UAAU,QAAQ;AAAA,MAC3B,GAAG,MAAM,KAAK;AAAA,MACd,IAAI,IAAI,UAAU,MAAM,OAAO;AAAA,MAC/B,oBAAoB,MAAM,QAAQ;AAAA,MAClC,kBAAc,4BAAS,SAAS;AAAA,MAChC,KAAK,MAAM,QAAQ;AAAA,IACrB,CAAC;AAAA,IAED,WAAW,UAAU,QAAQ;AAAA,MAC3B,GAAG,MAAM,KAAK;AAAA,MACd,IAAI,IAAI,UAAU,MAAM,OAAO;AAAA,MAC/B,MAAM;AAAA,MACN,KAAK,MAAM,QAAQ;AAAA,MACnB,kBAAc,4BAAS,SAAS;AAAA,MAChC,oBAAoB,MAAM,QAAQ;AAAA,MAClC,oBAAoB,MAAM,QAAQ;AAAA,MAClC,cAAc,aAAa;AAAA,MAC3B,UAAU,OAAO;AACf,cAAM,MAAM,MAAM,eAAe;AACjC,YAAI,KAAC,+BAAY,GAAG;AAAG;AAEvB,cAAM,SAAsB;AAAA,UAC1B,YAAY;AACV,iBAAK,YAAY;AAAA,UACnB;AAAA,UACA,UAAU;AACR,iBAAK,UAAU;AAAA,UACjB;AAAA,UACA,YAAY;AACV,iBAAK,YAAY;AAAA,UACnB;AAAA,UACA,aAAa;AACX,iBAAK,aAAa;AAAA,UACpB;AAAA,UACA,OAAO;AACL,iBAAK,MAAM;AAAA,UACb;AAAA,UACA,MAAM;AACJ,iBAAK,KAAK;AAAA,UACZ;AAAA,UACA,QAAQ;AACN,iBAAK,EAAE,MAAM,SAAS,OAAO,MAAM,QAAQ,aAAa,CAAC;AAAA,UAC3D;AAAA,QACF;AAEA,YAAI,UAAM,8BAAY,OAAO,MAAM,OAAO;AAC1C,cAAM,OAAO,OAAO,GAAG;AAEvB,YAAI,MAAM;AACR,gBAAM,eAAe;AACrB,eAAK,KAAK;AAAA,QACZ;AAAA,MACF;AAAA,IACF,CAAC;AAAA,IAED,gBAAgBA,QAAO;AACrB,YAAM,EAAE,OAAO,SAAS,IAAIA;AAC5B,YAAM,eAAe,gBAAgBA,MAAK;AAE1C,aAAO,UAAU,OAAO;AAAA,QACtB,GAAG,MAAM,QAAQ;AAAA,QACjB,MAAM;AAAA,QACN,MAAM;AAAA,QACN;AAAA,QACA,KAAK,MAAM,QAAQ;AAAA,QACnB,oBAAoB,MAAM,QAAQ;AAAA,QAClC,qBAAiB,4BAAS,QAAQ;AAAA,QAClC,iBAAiB;AAAA,QACjB,cAAc;AAAA,QACd,iBAAiB,aAAa;AAAA,QAC9B,qBAAiB,4BAAS,aAAa,UAAU;AAAA,QACjD,kBAAc,4BAAS,aAAa,SAAS;AAAA,QAC7C,iBAAiB,IAAI,aAAa,MAAM,SAAS,KAAK;AAAA,QACtD,gBAAgB,IAAI,UAAU,MAAM,OAAO;AAAA,QAC3C,IAAI,IAAI,aAAa,MAAM,SAAS,KAAK;AAAA,QACzC,UAAU,aAAa,aAAa,IAAI;AAAA,QACxC,UAAU;AACR,eAAK,EAAE,MAAM,aAAa,MAAM,CAAC;AAAA,QACnC;AAAA,QACA,OAAO,OAAO;AACZ,gBAAM,SAAS,MAAM;AACrB,cAAI,QAAQ,aAAa,MAAM,MAAM,OAAO;AAC1C,iBAAK,EAAE,MAAM,WAAW,CAAC;AAAA,UAC3B;AAAA,QACF;AAAA,QACA,QAAQ,OAAO;AACb,cAAI;AAAU;AACd,kBAAI,4BAAS,GAAG;AACd,kBAAM,cAAc,MAAM;AAAA,UAC5B;AACA,eAAK,EAAE,MAAM,aAAa,MAAM,CAAC;AAAA,QACnC;AAAA,MACF,CAAC;AAAA,IACH;AAAA,IAEA,gBAAgBA,QAAO;AACrB,YAAM,EAAE,MAAM,IAAIA;AAClB,YAAM,WAAW,MAAM,QAAQ,UAAU;AACzC,aAAO,UAAU,QAAQ;AAAA,QACvB,GAAG,MAAM,QAAQ;AAAA,QACjB,KAAK,MAAM,QAAQ;AAAA,QACnB,IAAI,IAAI,aAAa,MAAM,SAAS,KAAK;AAAA,QACzC,UAAU;AAAA,QACV,mBAAmB,IAAI,aAAa,MAAM,SAAS,KAAK;AAAA,QACxD,MAAM;AAAA,QACN,gBAAgB,IAAI,UAAU,MAAM,OAAO;AAAA,QAC3C,qBAAiB,4BAAS,QAAQ;AAAA,QAClC,oBAAoB,MAAM,QAAQ;AAAA,QAClC,QAAQ,CAAC;AAAA,MACX,CAAC;AAAA,IACH;AAAA,IAEA,gBAAgB,UAAU,QAAQ;AAAA,MAChC,IAAI,IAAI,eAAe,MAAM,OAAO;AAAA,MACpC,GAAG,MAAM,UAAU;AAAA,MACnB,KAAK,MAAM,QAAQ;AAAA,MACnB,oBAAoB,MAAM,QAAQ;AAAA,MAClC,OAAO;AAAA,QACL,yBAAyB;AAAA,QACzB,UAAU,MAAM,QAAQ,eAAe;AAAA,QACvC,SAAS,MAAM,QAAQ,eAAe;AAAA,QACtC,WAAW,MAAM,QAAQ,eAAe;AAAA,QACxC,YAAY,MAAM,QAAQ,eAAe;AAAA,QACzC,UAAU;AAAA,QACV,YAAY;AAAA,QACZ,oBAAoB;AAAA,QACpB,oBAAoB,MAAM,QAAQ,yBAAyB,sCAAsC;AAAA,QACjG,0BAA0B;AAAA,QAC1B,CAAC,MAAM,QAAQ,gBAAgB,eAAe,SAAS,KAAK,GAC1D,MAAM,QAAQ,gBAAgB,eAAe,gBAAgB;AAAA,MACjE;AAAA,IACF,CAAC;AAAA,EACH;AACF;;;AEvKA,kBAAsC;AACtC,IAAAC,oBAA8B;AAC9B,0BAAiC;AACjC,sBAA8B;AAC9B,IAAAC,gBAAiC;AAIjC,IAAM,EAAE,IAAI,IAAI;AAET,SAAS,QAAQ,aAAiC;AACvD,QAAM,UAAM,uBAAQ,WAAW;AAC/B,aAAO;AAAA,IACL;AAAA,MACE,SAAS;AAAA,MAET,SAAS;AAAA,QACP,KAAK;AAAA,QACL,aAAa;AAAA,QACb,gBAAgB;AAAA,QAChB,OAAO;AAAA,QACP,cAAc;AAAA,QACd,eAAe;AAAA,UACb,MAAM;AAAA,UACN,KAAK;AAAA,UACL,OAAO;AAAA,UACP,QAAQ;AAAA,QACV;AAAA,QACA,wBAAwB;AAAA,QACxB,qBAAqB;AAAA,QACrB,MAAM;AAAA,QACN,cAAc,CAAC;AAAA,QACf,GAAG;AAAA,MACL;AAAA,MAEA,UAAU;AAAA,QACR,cAAc,CAACC,SAAQA,KAAI,gBAAgB;AAAA,QAC3C,YAAY,CAACA,SAAQA,KAAI,gBAAgB;AAAA,MAC3C;AAAA,MAEA,OAAO,CAAC,yBAAyB,qBAAqB,oBAAoB;AAAA,MAE1E,MAAM,CAAC,iBAAiB;AAAA,MAExB,OAAO;AAAA,QACL,OAAO,CAAC,6BAA6B,qBAAqB,oBAAoB;AAAA,QAC9E,KAAK,CAAC,mBAAmB;AAAA,QACzB,aAAa,CAAC,mBAAmB;AAAA,MACnC;AAAA,MAEA,IAAI;AAAA,QACF,WAAW;AAAA,UACT,SAAS;AAAA,QACX;AAAA,QACA,aAAa;AAAA,UACX,SAAS;AAAA,QACX;AAAA,QACA,oBAAoB;AAAA,UAClB,SAAS;AAAA,QACX;AAAA,MACF;AAAA,MAEA,QAAQ;AAAA,QACN,MAAM;AAAA,UACJ,IAAI;AAAA,YACF,WAAW;AAAA,cACT;AAAA,gBACE,OAAO;AAAA,gBACP,QAAQ;AAAA,gBACR,SAAS,CAAC,mBAAmB,UAAU;AAAA,cACzC;AAAA,cACA;AAAA,gBACE,QAAQ;AAAA,gBACR,SAAS;AAAA,cACX;AAAA,YACF;AAAA,YACA,WAAW;AAAA,cACT,QAAQ;AAAA,cACR,SAAS,CAAC,mBAAmB,UAAU;AAAA,YACzC;AAAA,UACF;AAAA,QACF;AAAA,QACA,SAAS;AAAA,UACP,IAAI;AAAA,YACF,WAAW;AAAA,cACT,QAAQ;AAAA,cACR,SAAS,CAAC,mBAAmB,UAAU;AAAA,YACzC;AAAA,YACA,YAAY;AAAA,cACV,OAAO;AAAA,cACP,SAAS;AAAA,YACX;AAAA,YACA,aAAa;AAAA,cACX,OAAO;AAAA,cACP,SAAS;AAAA,YACX;AAAA,YACA,UAAU;AAAA,cACR,OAAO;AAAA,cACP,SAAS;AAAA,YACX;AAAA,YACA,YAAY;AAAA,cACV,OAAO;AAAA,cACP,SAAS;AAAA,YACX;AAAA,YACA,MAAM;AAAA,cACJ,SAAS;AAAA,YACX;AAAA,YACA,KAAK;AAAA,cACH,SAAS;AAAA,YACX;AAAA,YACA,OAAO;AAAA,cACL,OAAO,IAAI,eAAe;AAAA,cAC1B,SAAS;AAAA,YACX;AAAA,YACA,WAAW;AAAA,cACT;AAAA,gBACE,OAAO;AAAA,gBACP,SAAS,CAAC,mBAAmB,UAAU;AAAA,cACzC;AAAA,cACA,EAAE,SAAS,kBAAkB;AAAA,YAC/B;AAAA,YACA,UAAU;AAAA,cACR,QAAQ;AAAA,cACR,SAAS;AAAA,YACX;AAAA,UACF;AAAA,QACF;AAAA,MACF;AAAA,IACF;AAAA,IACA;AAAA,MACE,QAAQ;AAAA,QACN,YAAY,CAACA,SAAQA,KAAI;AAAA,QACzB,cAAc,CAACA,SAAQA,KAAI;AAAA,QAC3B,eAAe,CAACA,SAAQA,KAAI,mBAAmB;AAAA,MACjD;AAAA,MAEA,SAAS;AAAA,QACP,gBAAgBA,MAAK,KAAK;AACxB,cAAI,aAAaA,MAAK,IAAI,KAAK;AAAA,QACjC;AAAA,QACA,kBAAkBA,MAAK;AACrB,cAAI,aAAaA,MAAK,IAAI;AAAA,QAC5B;AAAA,QACA,SAASA,MAAK,KAAK;AACjB,cAAI,MAAMA,MAAK,IAAI,KAAK;AAAA,QAC1B;AAAA,QACA,WAAWA,MAAK;AACd,cAAI,MAAMA,MAAK,IAAI;AAAA,QACrB;AAAA,QACA,cAAcA,MAAK;AACjB,qCAAI,MAAM,IAAI,WAAWA,IAAG,GAAG,MAAM,CAAC;AAAA,QACxC;AAAA,QACA,aAAaA,MAAK;AAChB,qCAAI,MAAM,IAAI,UAAUA,IAAG,GAAG,MAAM,CAAC;AAAA,QACvC;AAAA,QACA,aAAaA,MAAK;AAChB,cAAI,CAACA,KAAI;AAAc;AACvB,gBAAM,OAAO,IAAI,UAAUA,MAAKA,KAAI,YAAY;AAChD,qCAAI,MAAM,MAAM,MAAM,CAAC;AAAA,QACzB;AAAA,QACA,aAAaA,MAAK;AAChB,cAAI,CAACA,KAAI;AAAc;AACvB,gBAAM,OAAO,IAAI,UAAUA,MAAKA,KAAI,YAAY;AAChD,qCAAI,MAAM,MAAM,MAAM,CAAC;AAAA,QACzB;AAAA,QACA,sBAAsBA,MAAK;AACzB,UAAAA,KAAI,sBAAsB,CAAC,CAAC,IAAI,eAAeA,IAAG;AAAA,QACpD;AAAA;AAAA,QAEA,mBAAmBA,MAAK;AACtB,qCAAI,MAAM;AACR,kBAAM,QAAQ,IAAI,mBAAmBA,IAAG;AACxC,gBAAI,CAAC;AAAO;AACZ,kBAAM,iBAAa,+BAAc,KAAK;AACtC,gBAAI,WAAW,SAAS,GAAG;AACzB,oBAAM,gBAAgB,UAAU;AAAA,YAClC,OAAO;AACL,oBAAM,aAAa,YAAY,GAAG;AAAA,YACpC;AAAA,UACF,CAAC;AAAA,QACH;AAAA,QACA,gBAAgBA,MAAK;AACnB,UAAAA,KAAI,mBAAmB;AAAA,QACzB;AAAA,QACA,0BAA0BA,MAAK;AAC7B,UAAAA,KAAI,yBAAyB;AAAA,QAC/B;AAAA,QACA,iBAAiBA,MAAK,KAAK;AACzB,gBAAM,QAAQ,IAAI,MAAMA,KAAI;AAC5B,cAAI,CAACA,KAAI,uBAAuB,CAAC;AAAO;AAExC,gBAAM,QAAQ,IAAI,aAAaA,MAAK,KAAK;AACzC,cAAI,CAAC;AAAO;AAEZ,UAAAA,KAAI,gBAAgB,IAAI,YAAYA,MAAK,KAAK;AAC9C,0CAAS,MAAM;AACb,YAAAA,KAAI,yBAAyB;AAAA,UAC/B,CAAC;AAAA,QACH;AAAA,QACA,kBAAkBA,MAAK;AACrB,UAAAA,KAAI,mBAAmB;AAEvB,gBAAM,QAAQA,KAAI;AAClB,cAAI,CAACA,KAAI,uBAAuB,CAAC;AAAO;AAExC,gBAAM,QAAQ,IAAI,eAAeA,IAAG;AACpC,cAAI,CAAC;AAAO;AAEZ,UAAAA,KAAI,uBAAmB,sCAAiB,OAAO;AAAA,YAC7C,QAAQ,IAAI;AACV,qBAAO,IAAI,cAAc,EAAE;AAAA,YAC7B;AAAA,YACA,SAAS,MAAM;AACb,cAAAA,KAAI,gBAAgB,IAAI,YAAY,IAAI;AACxC,8CAAS,MAAM;AACb,gBAAAA,KAAI,yBAAyB;AAAA,cAC/B,CAAC;AAAA,YACH;AAAA,UACF,CAAC;AAAA,QACH;AAAA,MACF;AAAA,IACF;AAAA,EACF;AACF;AAEA,IAAM,SAAS;AAAA,EACb,QAAQ,CAAC,QAAwB;AAC/B,QAAI,IAAI,SAAS;AAAM;AACvB,QAAI,gBAAgB,EAAE,OAAO,IAAI,MAAM,CAAC;AAAA,EAC1C;AAAA,EACA,aAAa,CAAC,QAAwB;AACpC,QAAI,IAAI,gBAAgB;AAAM;AAC9B,QAAI,gBAAgB,EAAE,cAAc,IAAI,aAAa,CAAC;AAAA,EACxD;AACF;AAEA,IAAM,MAAM;AAAA,EACV,OAAO,CAAC,KAAqB,UAAyB;AACpD,YAAI,uBAAQ,OAAO,IAAI,KAAK;AAAG;AAC/B,QAAI,QAAQ;AACZ,WAAO,OAAO,GAAG;AAAA,EACnB;AAAA,EACA,cAAc,CAAC,KAAqB,UAAyB;AAC3D,YAAI,uBAAQ,OAAO,IAAI,YAAY;AAAG;AACtC,QAAI,eAAe;AACnB,WAAO,YAAY,GAAG;AAAA,EACxB;AACF;;;ACvPA,mBAA4B;AAC5B,IAAAC,gBAAiC;AAG1B,IAAM,YAAQ,0BAAgC,EAAE;AAAA,EACrD;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,CAAC;AAEM,IAAM,iBAAa,gCAA8C,KAAK;AAEtE,IAAM,mBAAe,0BAA0B,EAAE,CAAC,YAAY,OAAO,CAAC;AACtE,IAAM,wBAAoB,gCAA+B,YAAY;AAErE,IAAM,mBAAe,0BAA0B,EAAE,CAAC,OAAO,CAAC;AAC1D,IAAM,wBAAoB,gCAA+B,YAAY;","names":["import_dom_query","props","import_dom_query","import_utils","ctx","import_utils"]}
1	+ {"version":3,"sources":["../src/index.ts","../src/tabs.anatomy.ts","../src/tabs.connect.ts","../src/tabs.dom.ts","../src/tabs.machine.ts","../src/tabs.props.ts"],"sourcesContent":["export { anatomy } from \"./tabs.anatomy\"\nexport { connect } from \"./tabs.connect\"\nexport { machine } from \"./tabs.machine\"\nexport * from \"./tabs.props\"\nexport type {\n MachineApi as Api,\n ContentProps,\n UserDefinedContext as Context,\n ElementIds,\n FocusChangeDetails,\n IntlTranslations,\n TriggerProps,\n ValueChangeDetails,\n} 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, getNativeEvent, type EventKeyMap } from \"@zag-js/dom-event\"\nimport { dataAttr, isSafari, isSelfTarget } 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 { MachineApi, Send, State, TriggerProps, TriggerState } 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 focused = state.matches(\"focused\")\n\n function getTriggerState(props: TriggerProps): TriggerState {\n return {\n selected: state.context.value === props.value,\n focused: state.context.focusedValue === props.value,\n disabled: !!props.disabled,\n }\n }\n\n return {\n value: state.context.value,\n focusedValue: state.context.focusedValue,\n setValue(value) {\n send({ type: \"SET_VALUE\", value })\n },\n clearValue() {\n send({ type: \"CLEAR_VALUE\" })\n },\n setIndicatorRect(value) {\n const id = dom.getTriggerId(state.context, value)\n send({ type: \"SET_INDICATOR_RECT\", id })\n },\n getTriggerState,\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(focused),\n dir: state.context.dir,\n }),\n\n listProps: normalize.element({\n ...parts.list.attrs,\n id: dom.getListId(state.context),\n role: \"tablist\",\n dir: state.context.dir,\n \"data-focus\": dataAttr(focused),\n \"aria-orientation\": state.context.orientation,\n \"data-orientation\": state.context.orientation,\n \"aria-label\": translations.listLabel,\n onKeyDown(event) {\n if (event.defaultPrevented) return\n const evt = getNativeEvent(event)\n if (!isSelfTarget(evt)) 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) {\n const { value, disabled } = props\n const triggerState = getTriggerState(props)\n\n return normalize.button({\n ...parts.trigger.attrs,\n role: \"tab\",\n type: \"button\",\n disabled,\n dir: state.context.dir,\n \"data-orientation\": state.context.orientation,\n \"data-disabled\": dataAttr(disabled),\n \"aria-disabled\": disabled,\n \"data-value\": value,\n \"aria-selected\": triggerState.selected,\n \"data-selected\": dataAttr(triggerState.selected),\n \"data-focus\": dataAttr(triggerState.focused),\n \"aria-controls\": dom.getContentId(state.context, value),\n \"data-ownedby\": dom.getListId(state.context),\n id: dom.getTriggerId(state.context, value),\n tabIndex: triggerState.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 (event.defaultPrevented) return\n if (disabled) return\n if (isSafari()) {\n event.currentTarget.focus()\n }\n send({ type: \"TAB_CLICK\", value })\n },\n })\n },\n\n getContentProps(props) {\n const { value } = props\n const selected = state.context.value === value\n return normalize.element({\n ...parts.content.attrs,\n dir: state.context.dir,\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.getListId(state.context),\n \"data-selected\": dataAttr(selected),\n \"data-orientation\": state.context.orientation,\n hidden: !selected,\n })\n },\n\n indicatorProps: normalize.element({\n id: dom.getIndicatorId(state.context),\n ...parts.indicator.attrs,\n dir: state.context.dir,\n \"data-orientation\": state.context.orientation,\n style: {\n \"--transition-property\": \"left, right, top, bottom, width, height\",\n \"--left\": state.context.indicatorRect?.left,\n \"--top\": state.context.indicatorRect?.top,\n \"--width\": state.context.indicatorRect?.width,\n \"--height\": state.context.indicatorRect?.height,\n position: \"absolute\",\n willChange: \"var(--transition-property)\",\n transitionProperty: \"var(--transition-property)\",\n transitionDuration: state.context.canIndicatorTransition ? \"var(--transition-duration, 150ms)\" : \"0ms\",\n transitionTimingFunction: \"var(--transition-timing-function)\",\n [state.context.orientation === \"horizontal\" ? \"left\" : \"top\"]:\n state.context.orientation === \"horizontal\" ? \"var(--left)\" : \"var(--top)\",\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 getListId: (ctx: Ctx) => ctx.ids?.list ?? `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 getListEl: (ctx: Ctx) => dom.getById(ctx, dom.getListId(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.getListId(ctx))\n const selector = `[role=tab][data-ownedby='${ownerId}']:not([disabled])`\n return queryAll(dom.getListEl(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.loopFocus),\n getPrevEl: (ctx: Ctx, id: string) => prevById(dom.getElements(ctx), dom.getTriggerId(ctx, id), ctx.loopFocus),\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))\n },\n\n resolveRect: (rect: Record<\"width\" \| \"height\" \| \"left\" \| \"top\", number>) => ({\n width: `${rect.width}px`,\n height: `${rect.height}px`,\n left: `${rect.left}px`,\n top: `${rect.top}px`,\n }),\n})\n","import { createMachine, guards } from \"@zag-js/core\"\nimport { clickIfLink } from \"@zag-js/dom-event\"\nimport { nextTick, raf } from \"@zag-js/dom-query\"\nimport { trackElementRect } from \"@zag-js/element-rect\"\nimport { getFocusables } from \"@zag-js/tabbable\"\nimport { compact, isEqual } 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 indicatorRect: {\n left: \"0px\",\n top: \"0px\",\n width: \"0px\",\n height: \"0px\",\n },\n canIndicatorTransition: false,\n isIndicatorRendered: false,\n loopFocus: true,\n translations: {},\n ...ctx,\n },\n\n computed: {\n isHorizontal: (ctx) => ctx.orientation === \"horizontal\",\n isVertical: (ctx) => ctx.orientation === \"vertical\",\n },\n\n entry: [\"checkRenderedElements\", \"syncIndicatorRect\", \"setContentTabIndex\"],\n\n exit: [\"cleanupObserver\"],\n\n watch: {\n value: [\"enableIndicatorTransition\", \"syncIndicatorRect\", \"setContentTabIndex\", \"clickIfLink\"],\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 // 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)\n nextTick(() => {\n ctx.canIndicatorTransition = false\n })\n },\n })\n },\n clickIfLink(ctx) {\n clickIfLink(dom.getActiveTabEl(ctx))\n },\n },\n },\n )\n}\n\nconst invoke = {\n change: (ctx: MachineContext) => {\n if (ctx.value == null) return\n ctx.onValueChange?.({ value: ctx.value })\n },\n focusChange: (ctx: MachineContext) => {\n if (ctx.focusedValue == null) return\n ctx.onFocusChange?.({ focusedValue: ctx.focusedValue })\n },\n}\n\nconst set = {\n value: (ctx: MachineContext, value: string \| null) => {\n if (isEqual(value, ctx.value)) return\n ctx.value = value\n invoke.change(ctx)\n },\n focusedValue: (ctx: MachineContext, value: string \| null) => {\n if (isEqual(value, ctx.focusedValue)) return\n ctx.focusedValue = value\n invoke.focusChange(ctx)\n },\n}\n","import { createProps } from \"@zag-js/types\"\nimport { createSplitProps } from \"@zag-js/utils\"\nimport type { ContentProps, TriggerProps, UserDefinedContext } from \"./tabs.types\"\n\nexport const props = createProps<UserDefinedContext>()([\n \"activationMode\",\n \"dir\",\n \"getRootNode\",\n \"id\",\n \"ids\",\n \"loopFocus\",\n \"onFocusChange\",\n \"onValueChange\",\n \"orientation\",\n \"translations\",\n \"value\",\n])\n\nexport const splitProps = createSplitProps<Partial<UserDefinedContext>>(props)\n\nexport const triggerProps = createProps<TriggerProps>()([\"disabled\", \"value\"])\nexport const splitTriggerProps = createSplitProps<TriggerProps>(triggerProps)\n\nexport const contentProps = createProps<ContentProps>()([\"value\"])\nexport const splitContentProps = createSplitProps<ContentProps>(contentProps)\n"],"mappings":"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","names":["import_dom_query","props","import_dom_event","import_dom_query","import_utils","ctx","import_utils"]}

package/dist/index.mjs CHANGED Viewed

@@ -4,8 +4,8 @@ var anatomy = createAnatomy("tabs").parts("root", "list", "trigger", "content",
 var parts = anatomy.build();
 // src/tabs.connect.ts
-import { getEventKey } from "@zag-js/dom-event";
-import { dataAttr, isSafari, isSelfEvent } from "@zag-js/dom-query";
+import { getEventKey, getNativeEvent } from "@zag-js/dom-event";
+import { dataAttr, isSafari, isSelfTarget } from "@zag-js/dom-query";
 // src/tabs.dom.ts
 import { createScope, itemById, nextById, prevById, queryAll } from "@zag-js/dom-query";
@@ -27,8 +27,8 @@ var dom = createScope({
   },
   getFirstEl: (ctx) => first(dom.getElements(ctx)),
   getLastEl: (ctx) => last(dom.getElements(ctx)),
-  getNextEl: (ctx, id) => nextById(dom.getElements(ctx), dom.getTriggerId(ctx, id), ctx.loop),
-  getPrevEl: (ctx, id) => prevById(dom.getElements(ctx), dom.getTriggerId(ctx, id), ctx.loop),
+  getNextEl: (ctx, id) => nextById(dom.getElements(ctx), dom.getTriggerId(ctx, id), ctx.loopFocus),
+  getPrevEl: (ctx, id) => prevById(dom.getElements(ctx), dom.getTriggerId(ctx, id), ctx.loopFocus),
   getActiveContentEl: (ctx) => {
     if (!ctx.value)
       return;
@@ -62,12 +62,12 @@ var dom = createScope({
 // src/tabs.connect.ts
 function connect(state, send, normalize) {
   const translations = state.context.translations;
-  const isFocused = state.matches("focused");
+  const focused = state.matches("focused");
   function getTriggerState(props2) {
     return {
-      isSelected: state.context.value === props2.value,
-      isFocused: state.context.focusedValue === props2.value,
-      isDisabled: !!props2.disabled
+      selected: state.context.value === props2.value,
+      focused: state.context.focusedValue === props2.value,
+      disabled: !!props2.disabled
     };
   }
   return {
@@ -88,7 +88,7 @@ function connect(state, send, normalize) {
       ...parts.root.attrs,
       id: dom.getRootId(state.context),
       "data-orientation": state.context.orientation,
-      "data-focus": dataAttr(isFocused),
+      "data-focus": dataAttr(focused),
       dir: state.context.dir
     }),
     listProps: normalize.element({
@@ -96,13 +96,15 @@ function connect(state, send, normalize) {
       id: dom.getListId(state.context),
       role: "tablist",
       dir: state.context.dir,
-      "data-focus": dataAttr(isFocused),
+      "data-focus": dataAttr(focused),
       "aria-orientation": state.context.orientation,
       "data-orientation": state.context.orientation,
       "aria-label": translations.listLabel,
       onKeyDown(event) {
-        const evt = event.nativeEvent || event;
-        if (!isSelfEvent(evt))
+        if (event.defaultPrevented)
+          return;
+        const evt = getNativeEvent(event);
+        if (!isSelfTarget(evt))
           return;
         const keyMap = {
           ArrowDown() {
@@ -148,13 +150,13 @@ function connect(state, send, normalize) {
         "data-disabled": dataAttr(disabled),
         "aria-disabled": disabled,
         "data-value": value,
-        "aria-selected": triggerState.isSelected,
-        "data-selected": dataAttr(triggerState.isSelected),
-        "data-focus": dataAttr(triggerState.isFocused),
+        "aria-selected": triggerState.selected,
+        "data-selected": dataAttr(triggerState.selected),
+        "data-focus": dataAttr(triggerState.focused),
         "aria-controls": dom.getContentId(state.context, value),
         "data-ownedby": dom.getListId(state.context),
         id: dom.getTriggerId(state.context, value),
-        tabIndex: triggerState.isSelected ? 0 : -1,
+        tabIndex: triggerState.selected ? 0 : -1,
         onFocus() {
           send({ type: "TAB_FOCUS", value });
         },
@@ -165,6 +167,8 @@ function connect(state, send, normalize) {
           }
         },
         onClick(event) {
+          if (event.defaultPrevented)
+            return;
           if (disabled)
             return;
           if (isSafari()) {
@@ -214,6 +218,7 @@ function connect(state, send, normalize) {
 // src/tabs.machine.ts
 import { createMachine, guards } from "@zag-js/core";
+import { clickIfLink } from "@zag-js/dom-event";
 import { nextTick, raf } from "@zag-js/dom-query";
 import { trackElementRect } from "@zag-js/element-rect";
 import { getFocusables } from "@zag-js/tabbable";
@@ -238,7 +243,7 @@ function machine(userContext) {
         },
         canIndicatorTransition: false,
         isIndicatorRendered: false,
-        loop: true,
+        loopFocus: true,
         translations: {},
         ...ctx
       },
@@ -249,7 +254,7 @@ function machine(userContext) {
       entry: ["checkRenderedElements", "syncIndicatorRect", "setContentTabIndex"],
       exit: ["cleanupObserver"],
       watch: {
-        value: ["enableIndicatorTransition", "syncIndicatorRect", "setContentTabIndex"],
+        value: ["enableIndicatorTransition", "syncIndicatorRect", "setContentTabIndex", "clickIfLink"],
         dir: ["syncIndicatorRect"],
         orientation: ["syncIndicatorRect"]
       },
@@ -422,6 +427,9 @@ function machine(userContext) {
               });
             }
           });
+        },
+        clickIfLink(ctx2) {
+          clickIfLink(dom.getActiveTabEl(ctx2));
         }
       }
     }
@@ -463,7 +471,7 @@ var props = createProps()([
   "getRootNode",
   "id",
   "ids",
-  "loop",
+  "loopFocus",
   "onFocusChange",
   "onValueChange",
   "orientation",

package/dist/index.mjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"sources":["../src/tabs.anatomy.ts","../src/tabs.connect.ts","../src/tabs.dom.ts","../src/tabs.machine.ts","../src/tabs.props.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 { 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 function getTriggerState(props: TriggerProps) {\n return {\n isSelected: state.context.value === props.value,\n isFocused: state.context.focusedValue === props.value,\n isDisabled: !!props.disabled,\n }\n }\n\n return {\n value: state.context.value,\n focusedValue: state.context.focusedValue,\n setValue(value) {\n send({ type: \"SET_VALUE\", value })\n },\n clearValue() {\n send({ type: \"CLEAR_VALUE\" })\n },\n setIndicatorRect(value) {\n const id = dom.getTriggerId(state.context, value)\n send({ type: \"SET_INDICATOR_RECT\", id })\n },\n getTriggerState,\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 listProps: normalize.element({\n ...parts.list.attrs,\n id: dom.getListId(state.context),\n role: \"tablist\",\n dir: state.context.dir,\n \"data-focus\": dataAttr(isFocused),\n \"aria-orientation\": state.context.orientation,\n \"data-orientation\": state.context.orientation,\n \"aria-label\": translations.listLabel,\n onKeyDown(event) {\n const evt = event.nativeEvent \|\| event\n if (!isSelfEvent(evt)) 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) {\n const { value, disabled } = props\n const triggerState = getTriggerState(props)\n\n return normalize.button({\n ...parts.trigger.attrs,\n role: \"tab\",\n type: \"button\",\n disabled,\n dir: state.context.dir,\n \"data-orientation\": state.context.orientation,\n \"data-disabled\": dataAttr(disabled),\n \"aria-disabled\": disabled,\n \"data-value\": value,\n \"aria-selected\": triggerState.isSelected,\n \"data-selected\": dataAttr(triggerState.isSelected),\n \"data-focus\": dataAttr(triggerState.isFocused),\n \"aria-controls\": dom.getContentId(state.context, value),\n \"data-ownedby\": dom.getListId(state.context),\n id: dom.getTriggerId(state.context, value),\n tabIndex: triggerState.isSelected ? 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(props) {\n const { value } = props\n const selected = state.context.value === value\n return normalize.element({\n ...parts.content.attrs,\n dir: state.context.dir,\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.getListId(state.context),\n \"data-selected\": dataAttr(selected),\n \"data-orientation\": state.context.orientation,\n hidden: !selected,\n })\n },\n\n indicatorProps: normalize.element({\n id: dom.getIndicatorId(state.context),\n ...parts.indicator.attrs,\n dir: state.context.dir,\n \"data-orientation\": state.context.orientation,\n style: {\n \"--transition-property\": \"left, right, top, bottom, width, height\",\n \"--left\": state.context.indicatorRect?.left,\n \"--top\": state.context.indicatorRect?.top,\n \"--width\": state.context.indicatorRect?.width,\n \"--height\": state.context.indicatorRect?.height,\n position: \"absolute\",\n willChange: \"var(--transition-property)\",\n transitionProperty: \"var(--transition-property)\",\n transitionDuration: state.context.canIndicatorTransition ? \"var(--transition-duration, 150ms)\" : \"0ms\",\n transitionTimingFunction: \"var(--transition-timing-function)\",\n [state.context.orientation === \"horizontal\" ? \"left\" : \"top\"]:\n state.context.orientation === \"horizontal\" ? \"var(--left)\" : \"var(--top)\",\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 getListId: (ctx: Ctx) => ctx.ids?.list ?? `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 getListEl: (ctx: Ctx) => dom.getById(ctx, dom.getListId(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.getListId(ctx))\n const selector = `[role=tab][data-ownedby='${ownerId}']:not([disabled])`\n return queryAll(dom.getListEl(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))\n },\n\n resolveRect: (rect: Record<\"width\" \| \"height\" \| \"left\" \| \"top\", number>) => ({\n width: `${rect.width}px`,\n height: `${rect.height}px`,\n left: `${rect.left}px`,\n top: `${rect.top}px`,\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, isEqual } 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 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 entry: [\"checkRenderedElements\", \"syncIndicatorRect\", \"setContentTabIndex\"],\n\n exit: [\"cleanupObserver\"],\n\n watch: {\n value: [\"enableIndicatorTransition\", \"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 // 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)\n nextTick(() => {\n ctx.canIndicatorTransition = false\n })\n },\n })\n },\n },\n },\n )\n}\n\nconst invoke = {\n change: (ctx: MachineContext) => {\n if (ctx.value == null) return\n ctx.onValueChange?.({ value: ctx.value })\n },\n focusChange: (ctx: MachineContext) => {\n if (ctx.focusedValue == null) return\n ctx.onFocusChange?.({ focusedValue: ctx.focusedValue })\n },\n}\n\nconst set = {\n value: (ctx: MachineContext, value: string \| null) => {\n if (isEqual(value, ctx.value)) return\n ctx.value = value\n invoke.change(ctx)\n },\n focusedValue: (ctx: MachineContext, value: string \| null) => {\n if (isEqual(value, ctx.focusedValue)) return\n ctx.focusedValue = value\n invoke.focusChange(ctx)\n },\n}\n","import { createProps } from \"@zag-js/types\"\nimport { createSplitProps } from \"@zag-js/utils\"\nimport type { ContentProps, TriggerProps, UserDefinedContext } from \"./tabs.types\"\n\nexport const props = createProps<UserDefinedContext>()([\n \"activationMode\",\n \"dir\",\n \"getRootNode\",\n \"id\",\n \"ids\",\n \"loop\",\n \"onFocusChange\",\n \"onValueChange\",\n \"orientation\",\n \"translations\",\n \"value\",\n])\n\nexport const splitProps = createSplitProps<Partial<UserDefinedContext>>(props)\n\nexport const triggerProps = createProps<TriggerProps>()([\"disabled\", \"value\"])\nexport const splitTriggerProps = createSplitProps<TriggerProps>(triggerProps)\n\nexport const contentProps = createProps<ContentProps>()([\"value\"])\nexport const splitContentProps = createSplitProps<ContentProps>(contentProps)\n"],"mappings":"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","names":["props","ctx"]}
1	+ {"version":3,"sources":["../src/tabs.anatomy.ts","../src/tabs.connect.ts","../src/tabs.dom.ts","../src/tabs.machine.ts","../src/tabs.props.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, getNativeEvent, type EventKeyMap } from \"@zag-js/dom-event\"\nimport { dataAttr, isSafari, isSelfTarget } 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 { MachineApi, Send, State, TriggerProps, TriggerState } 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 focused = state.matches(\"focused\")\n\n function getTriggerState(props: TriggerProps): TriggerState {\n return {\n selected: state.context.value === props.value,\n focused: state.context.focusedValue === props.value,\n disabled: !!props.disabled,\n }\n }\n\n return {\n value: state.context.value,\n focusedValue: state.context.focusedValue,\n setValue(value) {\n send({ type: \"SET_VALUE\", value })\n },\n clearValue() {\n send({ type: \"CLEAR_VALUE\" })\n },\n setIndicatorRect(value) {\n const id = dom.getTriggerId(state.context, value)\n send({ type: \"SET_INDICATOR_RECT\", id })\n },\n getTriggerState,\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(focused),\n dir: state.context.dir,\n }),\n\n listProps: normalize.element({\n ...parts.list.attrs,\n id: dom.getListId(state.context),\n role: \"tablist\",\n dir: state.context.dir,\n \"data-focus\": dataAttr(focused),\n \"aria-orientation\": state.context.orientation,\n \"data-orientation\": state.context.orientation,\n \"aria-label\": translations.listLabel,\n onKeyDown(event) {\n if (event.defaultPrevented) return\n const evt = getNativeEvent(event)\n if (!isSelfTarget(evt)) 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) {\n const { value, disabled } = props\n const triggerState = getTriggerState(props)\n\n return normalize.button({\n ...parts.trigger.attrs,\n role: \"tab\",\n type: \"button\",\n disabled,\n dir: state.context.dir,\n \"data-orientation\": state.context.orientation,\n \"data-disabled\": dataAttr(disabled),\n \"aria-disabled\": disabled,\n \"data-value\": value,\n \"aria-selected\": triggerState.selected,\n \"data-selected\": dataAttr(triggerState.selected),\n \"data-focus\": dataAttr(triggerState.focused),\n \"aria-controls\": dom.getContentId(state.context, value),\n \"data-ownedby\": dom.getListId(state.context),\n id: dom.getTriggerId(state.context, value),\n tabIndex: triggerState.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 (event.defaultPrevented) return\n if (disabled) return\n if (isSafari()) {\n event.currentTarget.focus()\n }\n send({ type: \"TAB_CLICK\", value })\n },\n })\n },\n\n getContentProps(props) {\n const { value } = props\n const selected = state.context.value === value\n return normalize.element({\n ...parts.content.attrs,\n dir: state.context.dir,\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.getListId(state.context),\n \"data-selected\": dataAttr(selected),\n \"data-orientation\": state.context.orientation,\n hidden: !selected,\n })\n },\n\n indicatorProps: normalize.element({\n id: dom.getIndicatorId(state.context),\n ...parts.indicator.attrs,\n dir: state.context.dir,\n \"data-orientation\": state.context.orientation,\n style: {\n \"--transition-property\": \"left, right, top, bottom, width, height\",\n \"--left\": state.context.indicatorRect?.left,\n \"--top\": state.context.indicatorRect?.top,\n \"--width\": state.context.indicatorRect?.width,\n \"--height\": state.context.indicatorRect?.height,\n position: \"absolute\",\n willChange: \"var(--transition-property)\",\n transitionProperty: \"var(--transition-property)\",\n transitionDuration: state.context.canIndicatorTransition ? \"var(--transition-duration, 150ms)\" : \"0ms\",\n transitionTimingFunction: \"var(--transition-timing-function)\",\n [state.context.orientation === \"horizontal\" ? \"left\" : \"top\"]:\n state.context.orientation === \"horizontal\" ? \"var(--left)\" : \"var(--top)\",\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 getListId: (ctx: Ctx) => ctx.ids?.list ?? `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 getListEl: (ctx: Ctx) => dom.getById(ctx, dom.getListId(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.getListId(ctx))\n const selector = `[role=tab][data-ownedby='${ownerId}']:not([disabled])`\n return queryAll(dom.getListEl(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.loopFocus),\n getPrevEl: (ctx: Ctx, id: string) => prevById(dom.getElements(ctx), dom.getTriggerId(ctx, id), ctx.loopFocus),\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))\n },\n\n resolveRect: (rect: Record<\"width\" \| \"height\" \| \"left\" \| \"top\", number>) => ({\n width: `${rect.width}px`,\n height: `${rect.height}px`,\n left: `${rect.left}px`,\n top: `${rect.top}px`,\n }),\n})\n","import { createMachine, guards } from \"@zag-js/core\"\nimport { clickIfLink } from \"@zag-js/dom-event\"\nimport { nextTick, raf } from \"@zag-js/dom-query\"\nimport { trackElementRect } from \"@zag-js/element-rect\"\nimport { getFocusables } from \"@zag-js/tabbable\"\nimport { compact, isEqual } 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 indicatorRect: {\n left: \"0px\",\n top: \"0px\",\n width: \"0px\",\n height: \"0px\",\n },\n canIndicatorTransition: false,\n isIndicatorRendered: false,\n loopFocus: true,\n translations: {},\n ...ctx,\n },\n\n computed: {\n isHorizontal: (ctx) => ctx.orientation === \"horizontal\",\n isVertical: (ctx) => ctx.orientation === \"vertical\",\n },\n\n entry: [\"checkRenderedElements\", \"syncIndicatorRect\", \"setContentTabIndex\"],\n\n exit: [\"cleanupObserver\"],\n\n watch: {\n value: [\"enableIndicatorTransition\", \"syncIndicatorRect\", \"setContentTabIndex\", \"clickIfLink\"],\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 // 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)\n nextTick(() => {\n ctx.canIndicatorTransition = false\n })\n },\n })\n },\n clickIfLink(ctx) {\n clickIfLink(dom.getActiveTabEl(ctx))\n },\n },\n },\n )\n}\n\nconst invoke = {\n change: (ctx: MachineContext) => {\n if (ctx.value == null) return\n ctx.onValueChange?.({ value: ctx.value })\n },\n focusChange: (ctx: MachineContext) => {\n if (ctx.focusedValue == null) return\n ctx.onFocusChange?.({ focusedValue: ctx.focusedValue })\n },\n}\n\nconst set = {\n value: (ctx: MachineContext, value: string \| null) => {\n if (isEqual(value, ctx.value)) return\n ctx.value = value\n invoke.change(ctx)\n },\n focusedValue: (ctx: MachineContext, value: string \| null) => {\n if (isEqual(value, ctx.focusedValue)) return\n ctx.focusedValue = value\n invoke.focusChange(ctx)\n },\n}\n","import { createProps } from \"@zag-js/types\"\nimport { createSplitProps } from \"@zag-js/utils\"\nimport type { ContentProps, TriggerProps, UserDefinedContext } from \"./tabs.types\"\n\nexport const props = createProps<UserDefinedContext>()([\n \"activationMode\",\n \"dir\",\n \"getRootNode\",\n \"id\",\n \"ids\",\n \"loopFocus\",\n \"onFocusChange\",\n \"onValueChange\",\n \"orientation\",\n \"translations\",\n \"value\",\n])\n\nexport const splitProps = createSplitProps<Partial<UserDefinedContext>>(props)\n\nexport const triggerProps = createProps<TriggerProps>()([\"disabled\", \"value\"])\nexport const splitTriggerProps = createSplitProps<TriggerProps>(triggerProps)\n\nexport const contentProps = createProps<ContentProps>()([\"value\"])\nexport const splitContentProps = createSplitProps<ContentProps>(contentProps)\n"],"mappings":"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","names":["props","ctx"]}

package/package.json CHANGED Viewed

@@ -1,6 +1,6 @@
 {
   "name": "@zag-js/tabs",
-  "version": "0.46.0",
+  "version": "0.48.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.46.0",
-    "@zag-js/dom-query": "0.46.0",
-    "@zag-js/dom-event": "0.46.0",
-    "@zag-js/element-rect": "0.46.0",
-    "@zag-js/tabbable": "0.46.0",
-    "@zag-js/utils": "0.46.0",
-    "@zag-js/core": "0.46.0",
-    "@zag-js/types": "0.46.0"
+    "@zag-js/anatomy": "0.48.0",
+    "@zag-js/dom-query": "0.48.0",
+    "@zag-js/dom-event": "0.48.0",
+    "@zag-js/element-rect": "0.48.0",
+    "@zag-js/tabbable": "0.48.0",
+    "@zag-js/utils": "0.48.0",
+    "@zag-js/core": "0.48.0",
+    "@zag-js/types": "0.48.0"
   },
   "devDependencies": {
     "clean-package": "2.2.0"

package/src/tabs.connect.ts CHANGED Viewed

@@ -1,19 +1,19 @@
-import { getEventKey, type EventKeyMap } from "@zag-js/dom-event"
-import { dataAttr, isSafari, isSelfEvent } from "@zag-js/dom-query"
+import { getEventKey, getNativeEvent, type EventKeyMap } from "@zag-js/dom-event"
+import { dataAttr, isSafari, isSelfTarget } 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 { MachineApi, Send, State, TriggerProps } from "./tabs.types"
+import type { MachineApi, Send, State, TriggerProps, TriggerState } from "./tabs.types"
 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")
+  const focused = state.matches("focused")
-  function getTriggerState(props: TriggerProps) {
+  function getTriggerState(props: TriggerProps): TriggerState {
     return {
-      isSelected: state.context.value === props.value,
-      isFocused: state.context.focusedValue === props.value,
-      isDisabled: !!props.disabled,
+      selected: state.context.value === props.value,
+      focused: state.context.focusedValue === props.value,
+      disabled: !!props.disabled,
     }
   }
@@ -36,7 +36,7 @@ export function connect<T extends PropTypes>(state: State, send: Send, normalize
       ...parts.root.attrs,
       id: dom.getRootId(state.context),
       "data-orientation": state.context.orientation,
-      "data-focus": dataAttr(isFocused),
+      "data-focus": dataAttr(focused),
       dir: state.context.dir,
     }),
@@ -45,13 +45,14 @@ export function connect<T extends PropTypes>(state: State, send: Send, normalize
       id: dom.getListId(state.context),
       role: "tablist",
       dir: state.context.dir,
-      "data-focus": dataAttr(isFocused),
+      "data-focus": dataAttr(focused),
       "aria-orientation": state.context.orientation,
       "data-orientation": state.context.orientation,
       "aria-label": translations.listLabel,
       onKeyDown(event) {
-        const evt = event.nativeEvent || event
-        if (!isSelfEvent(evt)) return
+        if (event.defaultPrevented) return
+        const evt = getNativeEvent(event)
+        if (!isSelfTarget(evt)) return
         const keyMap: EventKeyMap = {
           ArrowDown() {
@@ -101,13 +102,13 @@ export function connect<T extends PropTypes>(state: State, send: Send, normalize
         "data-disabled": dataAttr(disabled),
         "aria-disabled": disabled,
         "data-value": value,
-        "aria-selected": triggerState.isSelected,
-        "data-selected": dataAttr(triggerState.isSelected),
-        "data-focus": dataAttr(triggerState.isFocused),
+        "aria-selected": triggerState.selected,
+        "data-selected": dataAttr(triggerState.selected),
+        "data-focus": dataAttr(triggerState.focused),
         "aria-controls": dom.getContentId(state.context, value),
         "data-ownedby": dom.getListId(state.context),
         id: dom.getTriggerId(state.context, value),
-        tabIndex: triggerState.isSelected ? 0 : -1,
+        tabIndex: triggerState.selected ? 0 : -1,
         onFocus() {
           send({ type: "TAB_FOCUS", value })
         },
@@ -118,6 +119,7 @@ export function connect<T extends PropTypes>(state: State, send: Send, normalize
           }
         },
         onClick(event) {
+          if (event.defaultPrevented) return
           if (disabled) return
           if (isSafari()) {
             event.currentTarget.focus()

package/src/tabs.dom.ts CHANGED Viewed

@@ -22,8 +22,8 @@ export const dom = createScope({
   getFirstEl: (ctx: Ctx) => first(dom.getElements(ctx)),
   getLastEl: (ctx: Ctx) => last(dom.getElements(ctx)),
-  getNextEl: (ctx: Ctx, id: string) => nextById(dom.getElements(ctx), dom.getTriggerId(ctx, id), ctx.loop),
-  getPrevEl: (ctx: Ctx, id: string) => prevById(dom.getElements(ctx), dom.getTriggerId(ctx, id), ctx.loop),
+  getNextEl: (ctx: Ctx, id: string) => nextById(dom.getElements(ctx), dom.getTriggerId(ctx, id), ctx.loopFocus),
+  getPrevEl: (ctx: Ctx, id: string) => prevById(dom.getElements(ctx), dom.getTriggerId(ctx, id), ctx.loopFocus),
   getActiveContentEl: (ctx: Ctx) => {
     if (!ctx.value) return
     return dom.getContentEl(ctx, ctx.value)

package/src/tabs.machine.ts CHANGED Viewed

@@ -1,4 +1,5 @@
 import { createMachine, guards } from "@zag-js/core"
+import { clickIfLink } from "@zag-js/dom-event"
 import { nextTick, raf } from "@zag-js/dom-query"
 import { trackElementRect } from "@zag-js/element-rect"
 import { getFocusables } from "@zag-js/tabbable"
@@ -28,7 +29,7 @@ export function machine(userContext: UserDefinedContext) {
         },
         canIndicatorTransition: false,
         isIndicatorRendered: false,
-        loop: true,
+        loopFocus: true,
         translations: {},
         ...ctx,
       },
@@ -43,7 +44,7 @@ export function machine(userContext: UserDefinedContext) {
       exit: ["cleanupObserver"],
       watch: {
-        value: ["enableIndicatorTransition", "syncIndicatorRect", "setContentTabIndex"],
+        value: ["enableIndicatorTransition", "syncIndicatorRect", "setContentTabIndex", "clickIfLink"],
         dir: ["syncIndicatorRect"],
         orientation: ["syncIndicatorRect"],
       },
@@ -218,6 +219,9 @@ export function machine(userContext: UserDefinedContext) {
             },
           })
         },
+        clickIfLink(ctx) {
+          clickIfLink(dom.getActiveTabEl(ctx))
+        },
       },
     },
   )

package/src/tabs.props.ts CHANGED Viewed

@@ -8,7 +8,7 @@ export const props = createProps<UserDefinedContext>()([
   "getRootNode",
   "id",
   "ids",
-  "loop",
+  "loopFocus",
   "onFocusChange",
   "onValueChange",
   "orientation",

package/src/tabs.types.ts CHANGED Viewed

@@ -42,7 +42,7 @@ interface PublicContext extends DirectionProperty, CommonProperties {
    * Whether the keyboard navigation will loop from last tab to first, and vice versa.
    * @default true
    */
-  loop: boolean
+  loopFocus: boolean
   /**
    * The selected tab id
    */
@@ -130,16 +130,35 @@ export type Send = S.Send<S.AnyEventObject>
  * -----------------------------------------------------------------------------*/
 export interface TriggerProps {
+  /**
+   * The value of the tab
+   */
   value: string
+  /**
+   * Whether the tab is disabled
+   */
   disabled?: boolean
 }
 export interface TriggerState {
-  isSelected: boolean
-  isFocused: boolean
+  /**
+   * Whether the tab is selected
+   */
+  selected: boolean
+  /**
+   * Whether the tab is focused
+   */
+  focused: boolean
+  /**
+   * Whether the tab is disabled
+   */
+  disabled: boolean
 }
 export interface ContentProps {
+  /**
+   * The value of the tab
+   */
   value: string
 }