@zag-js/radio-group 1.27.0 → 1.28.0

package/dist/index.d.mts

@@ -1,5 +1,5 @@
 import * as _zag_js_anatomy from '@zag-js/anatomy';
-import { RequiredBy, DirectionProperty, CommonProperties, PropTypes, NormalizeProps } from '@zag-js/types';
+import { RequiredBy, DirectionProperty, CommonProperties, Rect, PropTypes, NormalizeProps } from '@zag-js/types';
 import * as _zag_js_core from '@zag-js/core';
 import { Service, EventObject, Machine } from '@zag-js/core';
 
@@ -57,12 +57,6 @@ interface RadioGroupProps extends DirectionProperty, CommonProperties {
      */
     orientation?: "horizontal" | "vertical" | undefined;
 }
-interface IndicatorRect {
-    left: string;
-    top: string;
-    width: string;
-    height: string;
-}
 interface PrivateContext {
     /**
      * The value of the checked radio
@@ -83,11 +77,7 @@ interface PrivateContext {
     /**
      * The active tab indicator's dom rect
      */
-    indicatorRect: Partial<IndicatorRect>;
-    /**
-     * Whether the active tab indicator's rect can transition
-     */
-    canIndicatorTransition: boolean;
+    indicatorRect: Rect | null;
     /**
      * Whether the radio group's fieldset is disabled
      */

package/dist/index.d.ts

@@ -1,5 +1,5 @@
 import * as _zag_js_anatomy from '@zag-js/anatomy';
-import { RequiredBy, DirectionProperty, CommonProperties, PropTypes, NormalizeProps } from '@zag-js/types';
+import { RequiredBy, DirectionProperty, CommonProperties, Rect, PropTypes, NormalizeProps } from '@zag-js/types';
 import * as _zag_js_core from '@zag-js/core';
 import { Service, EventObject, Machine } from '@zag-js/core';
 
@@ -57,12 +57,6 @@ interface RadioGroupProps extends DirectionProperty, CommonProperties {
      */
     orientation?: "horizontal" | "vertical" | undefined;
 }
-interface IndicatorRect {
-    left: string;
-    top: string;
-    width: string;
-    height: string;
-}
 interface PrivateContext {
     /**
      * The value of the checked radio
@@ -83,11 +77,7 @@ interface PrivateContext {
     /**
      * The active tab indicator's dom rect
      */
-    indicatorRect: Partial<IndicatorRect>;
-    /**
-     * Whether the active tab indicator's rect can transition
-     */
-    canIndicatorTransition: boolean;
+    indicatorRect: Rect | null;
     /**
      * Whether the radio group's fieldset is disabled
      */

package/dist/index.js

@@ -3,8 +3,8 @@
 var anatomy$1 = require('@zag-js/anatomy');
 var domQuery = require('@zag-js/dom-query');
 var focusVisible = require('@zag-js/focus-visible');
-var core = require('@zag-js/core');
 var utils = require('@zag-js/utils');
+var core = require('@zag-js/core');
 var types = require('@zag-js/types');
 
 // src/radio-group.anatomy.ts
@@ -39,17 +39,11 @@ var getRadioEl = (ctx, value) => {
   return ctx.getById(getItemId(ctx, value));
 };
 var getOffsetRect = (el) => ({
-  left: el?.offsetLeft ?? 0,
-  top: el?.offsetTop ?? 0,
+  x: el?.offsetLeft ?? 0,
+  y: el?.offsetTop ?? 0,
   width: el?.offsetWidth ?? 0,
   height: el?.offsetHeight ?? 0
 });
-var resolveRect = (rect) => ({
-  width: `${rect.width}px`,
-  height: `${rect.height}px`,
-  left: `${rect.left}px`,
-  top: `${rect.top}px`
-});
 
 // src/radio-group.connect.ts
 function connect(service, normalize) {
@@ -224,19 +218,19 @@ function connect(service, normalize) {
         id: getIndicatorId(scope),
         ...parts.indicator.attrs,
         dir: prop("dir"),
-        hidden: context.get("value") == null,
+        hidden: context.get("value") == null || rect == null,
         "data-disabled": domQuery.dataAttr(groupDisabled),
         "data-orientation": prop("orientation"),
         style: {
           "--transition-property": "left, top, width, height",
-          "--left": rect?.left,
-          "--top": rect?.top,
-          "--width": rect?.width,
-          "--height": rect?.height,
+          "--left": utils.toPx(rect?.x),
+          "--top": utils.toPx(rect?.y),
+          "--width": utils.toPx(rect?.width),
+          "--height": utils.toPx(rect?.height),
           position: "absolute",
           willChange: "var(--transition-property)",
           transitionProperty: "var(--transition-property)",
-          transitionDuration: context.get("canIndicatorTransition") ? "var(--transition-duration, 150ms)" : "0ms",
+          transitionDuration: "var(--transition-duration, 150ms)",
           transitionTimingFunction: "var(--transition-timing-function)",
           [prop("orientation") === "horizontal" ? "left" : "top"]: prop("orientation") === "horizontal" ? "var(--left)" : "var(--top)"
         }
@@ -274,10 +268,7 @@ var machine = core.createMachine({
         defaultValue: null
       })),
       indicatorRect: bindable(() => ({
-        defaultValue: {}
-      })),
-      canIndicatorTransition: bindable(() => ({
-        defaultValue: false
+        defaultValue: null
       })),
       fieldsetDisabled: bindable(() => ({
         defaultValue: false
@@ -301,7 +292,7 @@ var machine = core.createMachine({
   effects: ["trackFormControlState", "trackFocusVisible"],
   watch({ track, action, context }) {
     track([() => context.get("value")], () => {
-      action(["setIndicatorTransition", "syncIndicatorRect", "syncInputElements"]);
+      action(["syncIndicatorRect", "syncInputElements"]);
     });
   },
   on: {
@@ -366,9 +357,6 @@ var machine = core.createMachine({
           input.checked = input.value === context.get("value");
         });
       },
-      setIndicatorTransition({ context }) {
-        context.set("canIndicatorTransition", utils.isString(context.get("value")));
-      },
       cleanupObserver({ refs }) {
         refs.get("indicatorCleanup")?.();
       },
@@ -381,18 +369,14 @@ var machine = core.createMachine({
         const value = context.get("value");
         const radioEl = getRadioEl(scope, value);
         if (value == null || !radioEl) {
-          context.set("canIndicatorTransition", false);
-          context.set("indicatorRect", {});
+          context.set("indicatorRect", null);
           return;
         }
-        const indicatorCleanup = domQuery.trackElementRect([radioEl], {
-          measure(el) {
-            return getOffsetRect(el);
-          },
-          onEntry({ rects }) {
-            context.set("indicatorRect", resolveRect(rects[0]));
-          }
-        });
+        const exec = () => {
+          context.set("indicatorRect", getOffsetRect(radioEl));
+        };
+        exec();
+        const indicatorCleanup = domQuery.resizeObserverBorderBox.observe(radioEl, exec);
         refs.set("indicatorCleanup", indicatorCleanup);
       },
       dispatchChangeEvent({ context, scope }) {

package/dist/index.mjs

@@ -1,8 +1,8 @@
 import { createAnatomy } from '@zag-js/anatomy';
-import { dispatchInputCheckedEvent, trackElementRect, trackFormControl, queryAll, dataAttr, visuallyHiddenStyle, isSafari, isLeftClick } from '@zag-js/dom-query';
+import { dispatchInputCheckedEvent, resizeObserverBorderBox, trackFormControl, queryAll, dataAttr, visuallyHiddenStyle, isSafari, isLeftClick } from '@zag-js/dom-query';
 import { trackFocusVisible, isFocusVisible } from '@zag-js/focus-visible';
+import { createSplitProps, toPx } from '@zag-js/utils';
 import { createGuards, createMachine } from '@zag-js/core';
-import { isString, createSplitProps } from '@zag-js/utils';
 import { createProps } from '@zag-js/types';
 
 // src/radio-group.anatomy.ts
@@ -37,17 +37,11 @@ var getRadioEl = (ctx, value) => {
   return ctx.getById(getItemId(ctx, value));
 };
 var getOffsetRect = (el) => ({
-  left: el?.offsetLeft ?? 0,
-  top: el?.offsetTop ?? 0,
+  x: el?.offsetLeft ?? 0,
+  y: el?.offsetTop ?? 0,
   width: el?.offsetWidth ?? 0,
   height: el?.offsetHeight ?? 0
 });
-var resolveRect = (rect) => ({
-  width: `${rect.width}px`,
-  height: `${rect.height}px`,
-  left: `${rect.left}px`,
-  top: `${rect.top}px`
-});
 
 // src/radio-group.connect.ts
 function connect(service, normalize) {
@@ -222,19 +216,19 @@ function connect(service, normalize) {
         id: getIndicatorId(scope),
         ...parts.indicator.attrs,
         dir: prop("dir"),
-        hidden: context.get("value") == null,
+        hidden: context.get("value") == null || rect == null,
         "data-disabled": dataAttr(groupDisabled),
         "data-orientation": prop("orientation"),
         style: {
           "--transition-property": "left, top, width, height",
-          "--left": rect?.left,
-          "--top": rect?.top,
-          "--width": rect?.width,
-          "--height": rect?.height,
+          "--left": toPx(rect?.x),
+          "--top": toPx(rect?.y),
+          "--width": toPx(rect?.width),
+          "--height": toPx(rect?.height),
           position: "absolute",
           willChange: "var(--transition-property)",
           transitionProperty: "var(--transition-property)",
-          transitionDuration: context.get("canIndicatorTransition") ? "var(--transition-duration, 150ms)" : "0ms",
+          transitionDuration: "var(--transition-duration, 150ms)",
           transitionTimingFunction: "var(--transition-timing-function)",
           [prop("orientation") === "horizontal" ? "left" : "top"]: prop("orientation") === "horizontal" ? "var(--left)" : "var(--top)"
         }
@@ -272,10 +266,7 @@ var machine = createMachine({
         defaultValue: null
       })),
       indicatorRect: bindable(() => ({
-        defaultValue: {}
-      })),
-      canIndicatorTransition: bindable(() => ({
-        defaultValue: false
+        defaultValue: null
       })),
       fieldsetDisabled: bindable(() => ({
         defaultValue: false
@@ -299,7 +290,7 @@ var machine = createMachine({
   effects: ["trackFormControlState", "trackFocusVisible"],
   watch({ track, action, context }) {
     track([() => context.get("value")], () => {
-      action(["setIndicatorTransition", "syncIndicatorRect", "syncInputElements"]);
+      action(["syncIndicatorRect", "syncInputElements"]);
     });
   },
   on: {
@@ -364,9 +355,6 @@ var machine = createMachine({
           input.checked = input.value === context.get("value");
         });
       },
-      setIndicatorTransition({ context }) {
-        context.set("canIndicatorTransition", isString(context.get("value")));
-      },
       cleanupObserver({ refs }) {
         refs.get("indicatorCleanup")?.();
       },
@@ -379,18 +367,14 @@ var machine = createMachine({
         const value = context.get("value");
         const radioEl = getRadioEl(scope, value);
         if (value == null || !radioEl) {
-          context.set("canIndicatorTransition", false);
-          context.set("indicatorRect", {});
+          context.set("indicatorRect", null);
           return;
         }
-        const indicatorCleanup = trackElementRect([radioEl], {
-          measure(el) {
-            return getOffsetRect(el);
-          },
-          onEntry({ rects }) {
-            context.set("indicatorRect", resolveRect(rects[0]));
-          }
-        });
+        const exec = () => {
+          context.set("indicatorRect", getOffsetRect(radioEl));
+        };
+        exec();
+        const indicatorCleanup = resizeObserverBorderBox.observe(radioEl, exec);
         refs.set("indicatorCleanup", indicatorCleanup);
       },
       dispatchChangeEvent({ context, scope }) {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@zag-js/radio-group",
-  "version": "1.27.0",
+  "version": "1.28.0",
   "description": "Core logic for the radio group widget implemented as a state machine",
   "keywords": [
     "js",
@@ -27,12 +27,12 @@
     "url": "https://github.com/chakra-ui/zag/issues"
   },
   "dependencies": {
-    "@zag-js/anatomy": "1.27.0",
-    "@zag-js/dom-query": "1.27.0",
-    "@zag-js/focus-visible": "1.27.0",
-    "@zag-js/utils": "1.27.0",
-    "@zag-js/core": "1.27.0",
-    "@zag-js/types": "1.27.0"
+    "@zag-js/anatomy": "1.28.0",
+    "@zag-js/dom-query": "1.28.0",
+    "@zag-js/focus-visible": "1.28.0",
+    "@zag-js/utils": "1.28.0",
+    "@zag-js/core": "1.28.0",
+    "@zag-js/types": "1.28.0"
   },
   "devDependencies": {
     "clean-package": "2.2.0"