@zag-js/tabs 0.8.0 → 0.9.1

package/dist/{chunk-SVFEUEGP.mjs → chunk-EU4R7SET.mjs}

@@ -44,11 +44,11 @@ var dom = createScope({
     return dom.resolveRect(dom.getOffsetRect(tab), ctx.orientation);
   },
   resolveRect(rect, orientation) {
-    const prop = orientation === "vertical" ? "height" : "width";
+    const sizeProp = orientation === "vertical" ? "height" : "width";
+    const placementProp = orientation === "vertical" ? "top" : "left";
     return {
-      left: `${rect.left}px`,
-      top: `${rect.top}px`,
-      [prop]: `${rect[prop]}px`
+      [placementProp]: `${rect[placementProp]}px`,
+      [sizeProp]: `${rect[sizeProp]}px`
     };
   }
 });

package/dist/{chunk-N7U3IQEQ.mjs → chunk-GMBCGZJ4.mjs}

@@ -3,7 +3,7 @@ import {
 } from "./chunk-S2KW2DT4.mjs";
 import {
   dom
-} from "./chunk-SVFEUEGP.mjs";
+} from "./chunk-EU4R7SET.mjs";
 
 // src/tabs.connect.ts
 import { getEventKey } from "@zag-js/dom-event";

package/dist/{chunk-N5FVPJXW.mjs → chunk-HGL32F6R.mjs}

@@ -1,6 +1,6 @@
 import {
   dom
-} from "./chunk-SVFEUEGP.mjs";
+} from "./chunk-EU4R7SET.mjs";
 
 // src/tabs.machine.ts
 import { createMachine, guards } from "@zag-js/core";
@@ -21,7 +21,12 @@ function machine(userContext) {
         value: null,
         focusedValue: null,
         previousValues: [],
-        indicatorRect: { left: "0px", top: "0px", width: "0px", height: "0px" },
+        indicatorRect: {
+          left: "0px",
+          top: "0px",
+          width: "0px",
+          height: "0px"
+        },
         canIndicatorTransition: false,
         isIndicatorRendered: false,
         loop: true,
@@ -44,7 +49,8 @@ function machine(userContext) {
           "syncIndicatorRect",
           "setContentTabIndex"
         ],
-        dir: ["syncIndicatorRect"]
+        dir: ["syncIndicatorRect"],
+        orientation: ["syncIndicatorRect"]
       },
       on: {
         SET_VALUE: {
@@ -60,11 +66,17 @@ function machine(userContext) {
       states: {
         idle: {
           on: {
-            TAB_FOCUS: {
-              guard: "selectOnFocus",
-              target: "focused",
-              actions: ["setFocusedValue", "setValue"]
-            },
+            TAB_FOCUS: [
+              {
+                guard: "selectOnFocus",
+                target: "focused",
+                actions: ["setFocusedValue", "setValue"]
+              },
+              {
+                target: "focused",
+                actions: "setFocusedValue"
+              }
+            ],
             TAB_CLICK: {
               target: "focused",
               actions: ["setFocusedValue", "setValue"]

package/dist/index.d.ts

@@ -1,7 +1,7 @@
 export { anatomy } from './tabs.anatomy.js';
 export { connect } from './tabs.connect.js';
 export { machine } from './tabs.machine.js';
-export { UserDefinedContext as Context } from './tabs.types.js';
+export { ContentProps, UserDefinedContext as Context, TriggerProps } from './tabs.types.js';
 import '@zag-js/anatomy';
 import '@zag-js/types';
 import '@zag-js/core';

package/dist/index.js

@@ -81,11 +81,11 @@ var dom = (0, import_dom_query.createScope)({
     return dom.resolveRect(dom.getOffsetRect(tab), ctx.orientation);
   },
   resolveRect(rect, orientation) {
-    const prop = orientation === "vertical" ? "height" : "width";
+    const sizeProp = orientation === "vertical" ? "height" : "width";
+    const placementProp = orientation === "vertical" ? "top" : "left";
     return {
-      left: `${rect.left}px`,
-      top: `${rect.top}px`,
-      [prop]: `${rect[prop]}px`
+      [placementProp]: `${rect[placementProp]}px`,
+      [sizeProp]: `${rect[sizeProp]}px`
     };
   }
 });
@@ -263,7 +263,12 @@ function machine(userContext) {
         value: null,
         focusedValue: null,
         previousValues: [],
-        indicatorRect: { left: "0px", top: "0px", width: "0px", height: "0px" },
+        indicatorRect: {
+          left: "0px",
+          top: "0px",
+          width: "0px",
+          height: "0px"
+        },
         canIndicatorTransition: false,
         isIndicatorRendered: false,
         loop: true,
@@ -286,7 +291,8 @@ function machine(userContext) {
           "syncIndicatorRect",
           "setContentTabIndex"
         ],
-        dir: ["syncIndicatorRect"]
+        dir: ["syncIndicatorRect"],
+        orientation: ["syncIndicatorRect"]
       },
       on: {
         SET_VALUE: {
@@ -302,11 +308,17 @@ function machine(userContext) {
       states: {
         idle: {
           on: {
-            TAB_FOCUS: {
-              guard: "selectOnFocus",
-              target: "focused",
-              actions: ["setFocusedValue", "setValue"]
-            },
+            TAB_FOCUS: [
+              {
+                guard: "selectOnFocus",
+                target: "focused",
+                actions: ["setFocusedValue", "setValue"]
+              },
+              {
+                target: "focused",
+                actions: "setFocusedValue"
+              }
+            ],
             TAB_CLICK: {
               target: "focused",
               actions: ["setFocusedValue", "setValue"]

package/dist/index.mjs

@@ -1,13 +1,13 @@
 import {
   connect
-} from "./chunk-N7U3IQEQ.mjs";
+} from "./chunk-GMBCGZJ4.mjs";
 import {
   anatomy
 } from "./chunk-S2KW2DT4.mjs";
 import {
   machine
-} from "./chunk-N5FVPJXW.mjs";
-import "./chunk-SVFEUEGP.mjs";
+} from "./chunk-HGL32F6R.mjs";
+import "./chunk-EU4R7SET.mjs";
 export {
   anatomy,
   connect,

package/dist/tabs.connect.d.ts

@@ -1,5 +1,5 @@
 import { PropTypes, NormalizeProps } from '@zag-js/types';
-import { State, Send, TabProps } from './tabs.types.js';
+import { State, Send, TriggerProps, ContentProps } from './tabs.types.js';
 import '@zag-js/core';
 
 declare function connect<T extends PropTypes>(state: State, send: Send, normalize: NormalizeProps<T>): {
@@ -29,11 +29,9 @@ declare function connect<T extends PropTypes>(state: State, send: Send, normaliz
     setIndicatorRect(id: string | null | undefined): void;
     rootProps: T["element"];
     tablistProps: T["element"];
-    getTriggerProps(props: TabProps): T["button"];
+    getTriggerProps(props: TriggerProps): T["button"];
     contentGroupProps: T["element"];
-    getContentProps({ value }: {
-        value: string;
-    }): T["element"];
+    getContentProps({ value }: ContentProps): T["element"];
     indicatorProps: T["element"];
 };
 

package/dist/tabs.connect.js

@@ -77,11 +77,11 @@ var dom = (0, import_dom_query.createScope)({
     return dom.resolveRect(dom.getOffsetRect(tab), ctx.orientation);
   },
   resolveRect(rect, orientation) {
-    const prop = orientation === "vertical" ? "height" : "width";
+    const sizeProp = orientation === "vertical" ? "height" : "width";
+    const placementProp = orientation === "vertical" ? "top" : "left";
     return {
-      left: `${rect.left}px`,
-      top: `${rect.top}px`,
-      [prop]: `${rect[prop]}px`
+      [placementProp]: `${rect[placementProp]}px`,
+      [sizeProp]: `${rect[sizeProp]}px`
     };
   }
 });

package/dist/tabs.connect.mjs

@@ -1,8 +1,8 @@
 import {
   connect
-} from "./chunk-N7U3IQEQ.mjs";
+} from "./chunk-GMBCGZJ4.mjs";
 import "./chunk-S2KW2DT4.mjs";
-import "./chunk-SVFEUEGP.mjs";
+import "./chunk-EU4R7SET.mjs";
 export {
   connect
 };

package/dist/tabs.dom.d.ts

@@ -47,13 +47,9 @@ declare const dom: {
     };
     getRectById: (ctx: MachineContext, id: string) => {
         [x: string]: string;
-        left: string;
-        top: string;
     };
     resolveRect(rect: Record<"width" | "height" | "left" | "top", number>, orientation?: "horizontal" | "vertical"): {
         [x: string]: string;
-        left: string;
-        top: string;
     };
 };
 

package/dist/tabs.dom.js

@@ -68,11 +68,11 @@ var dom = (0, import_dom_query.createScope)({
     return dom.resolveRect(dom.getOffsetRect(tab), ctx.orientation);
   },
   resolveRect(rect, orientation) {
-    const prop = orientation === "vertical" ? "height" : "width";
+    const sizeProp = orientation === "vertical" ? "height" : "width";
+    const placementProp = orientation === "vertical" ? "top" : "left";
     return {
-      left: `${rect.left}px`,
-      top: `${rect.top}px`,
-      [prop]: `${rect[prop]}px`
+      [placementProp]: `${rect[placementProp]}px`,
+      [sizeProp]: `${rect[sizeProp]}px`
     };
   }
 });

package/dist/tabs.dom.mjs

@@ -1,6 +1,6 @@
 import {
   dom
-} from "./chunk-SVFEUEGP.mjs";
+} from "./chunk-EU4R7SET.mjs";
 export {
   dom
 };

package/dist/tabs.machine.js

@@ -75,11 +75,11 @@ var dom = (0, import_dom_query.createScope)({
     return dom.resolveRect(dom.getOffsetRect(tab), ctx.orientation);
   },
   resolveRect(rect, orientation) {
-    const prop = orientation === "vertical" ? "height" : "width";
+    const sizeProp = orientation === "vertical" ? "height" : "width";
+    const placementProp = orientation === "vertical" ? "top" : "left";
     return {
-      left: `${rect.left}px`,
-      top: `${rect.top}px`,
-      [prop]: `${rect[prop]}px`
+      [placementProp]: `${rect[placementProp]}px`,
+      [sizeProp]: `${rect[sizeProp]}px`
     };
   }
 });
@@ -98,7 +98,12 @@ function machine(userContext) {
         value: null,
         focusedValue: null,
         previousValues: [],
-        indicatorRect: { left: "0px", top: "0px", width: "0px", height: "0px" },
+        indicatorRect: {
+          left: "0px",
+          top: "0px",
+          width: "0px",
+          height: "0px"
+        },
         canIndicatorTransition: false,
         isIndicatorRendered: false,
         loop: true,
@@ -121,7 +126,8 @@ function machine(userContext) {
           "syncIndicatorRect",
           "setContentTabIndex"
         ],
-        dir: ["syncIndicatorRect"]
+        dir: ["syncIndicatorRect"],
+        orientation: ["syncIndicatorRect"]
       },
       on: {
         SET_VALUE: {
@@ -137,11 +143,17 @@ function machine(userContext) {
       states: {
         idle: {
           on: {
-            TAB_FOCUS: {
-              guard: "selectOnFocus",
-              target: "focused",
-              actions: ["setFocusedValue", "setValue"]
-            },
+            TAB_FOCUS: [
+              {
+                guard: "selectOnFocus",
+                target: "focused",
+                actions: ["setFocusedValue", "setValue"]
+              },
+              {
+                target: "focused",
+                actions: "setFocusedValue"
+              }
+            ],
             TAB_CLICK: {
               target: "focused",
               actions: ["setFocusedValue", "setValue"]

package/dist/tabs.machine.mjs

@@ -1,7 +1,7 @@
 import {
   machine
-} from "./chunk-N5FVPJXW.mjs";
-import "./chunk-SVFEUEGP.mjs";
+} from "./chunk-HGL32F6R.mjs";
+import "./chunk-EU4R7SET.mjs";
 export {
   machine
 };

package/dist/tabs.types.d.ts

@@ -12,6 +12,13 @@ type ElementIds = Partial<{
     content: string;
     indicator: string;
 }>;
+type TriggerProps = {
+    value: string;
+    disabled?: boolean;
+};
+type ContentProps = {
+    value: string;
+};
 type PublicContext = DirectionProperty & CommonProperties & {
     /**
      * The ids of the elements in the tabs. Useful for composition.
@@ -84,9 +91,5 @@ type MachineState = {
 };
 type State = StateMachine.State<MachineContext, MachineState>;
 type Send = StateMachine.Send<StateMachine.AnyEventObject>;
-type TabProps = {
-    value: string;
-    disabled?: boolean;
-};
 
-export { MachineContext, MachineState, Send, State, TabProps, UserDefinedContext };
+export { ContentProps, MachineContext, MachineState, Send, State, TriggerProps, UserDefinedContext };

package/package.json

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