@zag-js/radio-group 0.7.0 → 0.8.0

package/dist/{chunk-BVCYFZ6N.mjs → chunk-DM5GVJFW.mjs}

@@ -1,9 +1,9 @@
 import {
   parts
-} from "./chunk-MGLN5L3R.mjs";
+} from "./chunk-R5YJZPCP.mjs";
 import {
   dom
-} from "./chunk-ITVKBCBK.mjs";
+} from "./chunk-DVMAGSYZ.mjs";
 
 // src/radio-group.connect.ts
 import { ariaAttr, dataAttr } from "@zag-js/dom-query";
@@ -192,7 +192,22 @@ function connect(state, send, normalize) {
         "aria-checked": ariaAttr(inputState.isChecked),
         style: visuallyHiddenStyle
       });
-    }
+    },
+    indicatorProps: normalize.element({
+      id: dom.getIndicatorId(state.context),
+      ...parts.indicator.attrs,
+      "data-orientation": state.context.orientation,
+      style: {
+        "--transition-duration": "150ms",
+        "--transition-property": "left, top, width, height",
+        position: "absolute",
+        willChange: "var(--transition-property)",
+        transitionProperty: "var(--transition-property)",
+        transitionDuration: state.context.canIndicatorTransition ? "var(--transition-duration)" : "0ms",
+        transitionTimingFunction: "var(--transition-timing-function)",
+        ...state.context.indicatorRect
+      }
+    })
   };
 }
 

package/dist/{chunk-ITVKBCBK.mjs → chunk-DVMAGSYZ.mjs}

@@ -7,14 +7,41 @@ var dom = createScope({
   getRadioInputId: (ctx, value) => ctx.ids?.radioInput?.(value) ?? `radio-group:${ctx.id}:radio:input:${value}`,
   getRadioControlId: (ctx, value) => ctx.ids?.radioControl?.(value) ?? `radio-group:${ctx.id}:radio:control:${value}`,
   getRadioLabelId: (ctx, value) => ctx.ids?.radioLabel?.(value) ?? `radio-group:${ctx.id}:radio:label:${value}`,
+  getIndicatorId: (ctx) => ctx.ids?.indicator ?? `tabs:${ctx.id}:indicator`,
   getRootEl: (ctx) => dom.getById(ctx, dom.getRootId(ctx)),
   getRadioInputEl: (ctx, value) => dom.getById(ctx, dom.getRadioInputId(ctx, value)),
+  getIndicatorEl: (ctx) => dom.getById(ctx, dom.getIndicatorId(ctx)),
   getFirstEnabledInputEl: (ctx) => dom.getRootEl(ctx)?.querySelector("input:not(:disabled)"),
   getFirstEnabledAndCheckedInputEl: (ctx) => dom.getRootEl(ctx)?.querySelector("input:not(:disabled):checked"),
   getInputEls: (ctx) => {
     const ownerId = CSS.escape(dom.getRootId(ctx));
     const selector = `input[type=radio][data-ownedby='${ownerId}']:not([disabled])`;
     return queryAll(dom.getRootEl(ctx), selector);
+  },
+  getActiveRadioEl: (ctx) => {
+    if (!ctx.value)
+      return;
+    return dom.getById(ctx, dom.getRadioId(ctx, ctx.value));
+  },
+  getOffsetRect: (el) => {
+    return {
+      left: el?.offsetLeft ?? 0,
+      top: el?.offsetTop ?? 0,
+      width: el?.offsetWidth ?? 0,
+      height: el?.offsetHeight ?? 0
+    };
+  },
+  getRectById: (ctx, id) => {
+    const tab = dom.queryById(ctx, dom.getRadioId(ctx, id));
+    return dom.resolveRect(dom.getOffsetRect(tab));
+  },
+  resolveRect(rect) {
+    return {
+      width: `${rect.width}px`,
+      height: `${rect.height}px`,
+      left: `${rect.left}px`,
+      top: `${rect.top}px`
+    };
   }
 });
 

package/dist/{chunk-MGLN5L3R.mjs → chunk-R5YJZPCP.mjs}

@@ -6,7 +6,8 @@ var anatomy = createAnatomy("radio-group").parts(
   "radio",
   "radioLabel",
   "radioControl",
-  "radioInput"
+  "radioInput",
+  "indicator"
 );
 var parts = anatomy.build();
 

package/dist/chunk-UMCKI3BN.mjs

@@ -0,0 +1,133 @@
+import {
+  dom
+} from "./chunk-DVMAGSYZ.mjs";
+
+// src/radio-group.machine.ts
+import { createMachine } from "@zag-js/core";
+import { nextTick } from "@zag-js/dom-query";
+import { trackElementRect } from "@zag-js/element-rect";
+import { trackFormControl } from "@zag-js/form-utils";
+import { compact, isString } from "@zag-js/utils";
+function machine(userContext) {
+  const ctx = compact(userContext);
+  return createMachine(
+    {
+      id: "radio",
+      initial: "idle",
+      context: {
+        previousValue: null,
+        value: null,
+        activeId: null,
+        focusedId: null,
+        hoveredId: null,
+        indicatorRect: {},
+        canIndicatorTransition: false,
+        ...ctx
+      },
+      entry: ["syncIndicatorRect"],
+      exit: ["cleanupObserver"],
+      activities: ["trackFormControlState"],
+      watch: {
+        value: [
+          "setIndicatorTransition",
+          // important to set this after `setIndicatorTransition`
+          "setPreviousValue",
+          "invokeOnChange",
+          "syncIndicatorRect",
+          "syncInputElements"
+        ]
+      },
+      on: {
+        SET_VALUE: {
+          actions: ["setValue"]
+        },
+        SET_HOVERED: {
+          actions: "setHovered"
+        },
+        SET_ACTIVE: {
+          actions: "setActive"
+        },
+        SET_FOCUSED: {
+          actions: "setFocused"
+        }
+      },
+      states: {
+        idle: {}
+      }
+    },
+    {
+      activities: {
+        trackFormControlState(ctx2, _evt, { send, initialContext }) {
+          return trackFormControl(dom.getRootEl(ctx2), {
+            onFieldsetDisabled() {
+              ctx2.disabled = true;
+            },
+            onFormReset() {
+              send({ type: "SET_VALUE", value: initialContext.value });
+            }
+          });
+        }
+      },
+      actions: {
+        setValue(ctx2, evt) {
+          ctx2.value = evt.value;
+        },
+        setHovered(ctx2, evt) {
+          ctx2.hoveredId = evt.value;
+        },
+        setActive(ctx2, evt) {
+          ctx2.activeId = evt.value;
+        },
+        setFocused(ctx2, evt) {
+          ctx2.focusedId = evt.value;
+        },
+        invokeOnChange(ctx2, evt) {
+          ctx2.onChange?.({ value: evt.value });
+        },
+        syncInputElements(ctx2) {
+          const inputs = dom.getInputEls(ctx2);
+          inputs.forEach((input) => {
+            input.checked = input.value === ctx2.value;
+          });
+        },
+        setPreviousValue(ctx2) {
+          ctx2.previousValue = ctx2.value;
+        },
+        setIndicatorTransition(ctx2) {
+          ctx2.canIndicatorTransition = isString(ctx2.previousValue) && isString(ctx2.value);
+        },
+        cleanupObserver(ctx2) {
+          ctx2.indicatorCleanup?.();
+        },
+        syncIndicatorRect(ctx2) {
+          ctx2.indicatorCleanup?.();
+          if (!dom.getIndicatorEl(ctx2))
+            return;
+          const value = ctx2.value;
+          if (value == null) {
+            ctx2.indicatorRect = {};
+            return;
+          }
+          const radioEl = dom.getActiveRadioEl(ctx2);
+          if (!radioEl)
+            return;
+          ctx2.indicatorCleanup = trackElementRect(radioEl, {
+            getRect(el) {
+              return dom.getOffsetRect(el);
+            },
+            onChange(rect) {
+              ctx2.indicatorRect = dom.resolveRect(rect);
+              nextTick(() => {
+                ctx2.canIndicatorTransition = false;
+              });
+            }
+          });
+        }
+      }
+    }
+  );
+}
+
+export {
+  machine
+};

package/dist/index.js

@@ -34,7 +34,8 @@ var anatomy = (0, import_anatomy.createAnatomy)("radio-group").parts(
   "radio",
   "radioLabel",
   "radioControl",
-  "radioInput"
+  "radioInput",
+  "indicator"
 );
 var parts = anatomy.build();
 
@@ -51,14 +52,41 @@ var dom = (0, import_dom_query.createScope)({
   getRadioInputId: (ctx, value) => ctx.ids?.radioInput?.(value) ?? `radio-group:${ctx.id}:radio:input:${value}`,
   getRadioControlId: (ctx, value) => ctx.ids?.radioControl?.(value) ?? `radio-group:${ctx.id}:radio:control:${value}`,
   getRadioLabelId: (ctx, value) => ctx.ids?.radioLabel?.(value) ?? `radio-group:${ctx.id}:radio:label:${value}`,
+  getIndicatorId: (ctx) => ctx.ids?.indicator ?? `tabs:${ctx.id}:indicator`,
   getRootEl: (ctx) => dom.getById(ctx, dom.getRootId(ctx)),
   getRadioInputEl: (ctx, value) => dom.getById(ctx, dom.getRadioInputId(ctx, value)),
+  getIndicatorEl: (ctx) => dom.getById(ctx, dom.getIndicatorId(ctx)),
   getFirstEnabledInputEl: (ctx) => dom.getRootEl(ctx)?.querySelector("input:not(:disabled)"),
   getFirstEnabledAndCheckedInputEl: (ctx) => dom.getRootEl(ctx)?.querySelector("input:not(:disabled):checked"),
   getInputEls: (ctx) => {
     const ownerId = CSS.escape(dom.getRootId(ctx));
     const selector = `input[type=radio][data-ownedby='${ownerId}']:not([disabled])`;
     return (0, import_dom_query.queryAll)(dom.getRootEl(ctx), selector);
+  },
+  getActiveRadioEl: (ctx) => {
+    if (!ctx.value)
+      return;
+    return dom.getById(ctx, dom.getRadioId(ctx, ctx.value));
+  },
+  getOffsetRect: (el) => {
+    return {
+      left: el?.offsetLeft ?? 0,
+      top: el?.offsetTop ?? 0,
+      width: el?.offsetWidth ?? 0,
+      height: el?.offsetHeight ?? 0
+    };
+  },
+  getRectById: (ctx, id) => {
+    const tab = dom.queryById(ctx, dom.getRadioId(ctx, id));
+    return dom.resolveRect(dom.getOffsetRect(tab));
+  },
+  resolveRect(rect) {
+    return {
+      width: `${rect.width}px`,
+      height: `${rect.height}px`,
+      left: `${rect.left}px`,
+      top: `${rect.top}px`
+    };
   }
 });
 
@@ -247,12 +275,29 @@ function connect(state, send, normalize) {
         "aria-checked": (0, import_dom_query2.ariaAttr)(inputState.isChecked),
         style: import_visually_hidden.visuallyHiddenStyle
       });
-    }
+    },
+    indicatorProps: normalize.element({
+      id: dom.getIndicatorId(state.context),
+      ...parts.indicator.attrs,
+      "data-orientation": state.context.orientation,
+      style: {
+        "--transition-duration": "150ms",
+        "--transition-property": "left, top, width, height",
+        position: "absolute",
+        willChange: "var(--transition-property)",
+        transitionProperty: "var(--transition-property)",
+        transitionDuration: state.context.canIndicatorTransition ? "var(--transition-duration)" : "0ms",
+        transitionTimingFunction: "var(--transition-timing-function)",
+        ...state.context.indicatorRect
+      }
+    })
   };
 }
 
 // src/radio-group.machine.ts
 var import_core = require("@zag-js/core");
+var import_dom_query3 = require("@zag-js/dom-query");
+var import_element_rect = require("@zag-js/element-rect");
 var import_form_utils = require("@zag-js/form-utils");
 var import_utils = require("@zag-js/utils");
 function machine(userContext) {
@@ -262,14 +307,28 @@ function machine(userContext) {
       id: "radio",
       initial: "idle",
       context: {
+        previousValue: null,
         value: null,
-        initialValue: null,
         activeId: null,
         focusedId: null,
         hoveredId: null,
+        indicatorRect: {},
+        canIndicatorTransition: false,
         ...ctx
       },
+      entry: ["syncIndicatorRect"],
+      exit: ["cleanupObserver"],
       activities: ["trackFormControlState"],
+      watch: {
+        value: [
+          "setIndicatorTransition",
+          // important to set this after `setIndicatorTransition`
+          "setPreviousValue",
+          "invokeOnChange",
+          "syncIndicatorRect",
+          "syncInputElements"
+        ]
+      },
       on: {
         SET_VALUE: {
           actions: ["setValue"]
@@ -284,31 +343,24 @@ function machine(userContext) {
           actions: "setFocused"
         }
       },
-      watch: {
-        value: ["dispatchChangeEvent", "invokeOnChange", "syncInputElements"]
-      },
-      entry: ["checkValue"],
       states: {
         idle: {}
       }
     },
     {
       activities: {
-        trackFormControlState(ctx2, _evt, { send }) {
+        trackFormControlState(ctx2, _evt, { send, initialContext }) {
           return (0, import_form_utils.trackFormControl)(dom.getRootEl(ctx2), {
             onFieldsetDisabled() {
               ctx2.disabled = true;
             },
             onFormReset() {
-              send({ type: "SET_VALUE", value: ctx2.initialValue });
+              send({ type: "SET_VALUE", value: initialContext.value });
             }
           });
         }
       },
       actions: {
-        checkValue(ctx2) {
-          ctx2.initialValue = ctx2.value;
-        },
         setValue(ctx2, evt) {
           ctx2.value = evt.value;
         },
@@ -324,17 +376,44 @@ function machine(userContext) {
         invokeOnChange(ctx2, evt) {
           ctx2.onChange?.({ value: evt.value });
         },
-        dispatchChangeEvent(ctx2, evt) {
-          if (!evt.manual)
-            return;
-          const el = dom.getRadioInputEl(ctx2, evt.value);
-          (0, import_form_utils.dispatchInputCheckedEvent)(el, !!evt.value);
-        },
         syncInputElements(ctx2) {
           const inputs = dom.getInputEls(ctx2);
           inputs.forEach((input) => {
             input.checked = input.value === ctx2.value;
           });
+        },
+        setPreviousValue(ctx2) {
+          ctx2.previousValue = ctx2.value;
+        },
+        setIndicatorTransition(ctx2) {
+          ctx2.canIndicatorTransition = (0, import_utils.isString)(ctx2.previousValue) && (0, import_utils.isString)(ctx2.value);
+        },
+        cleanupObserver(ctx2) {
+          ctx2.indicatorCleanup?.();
+        },
+        syncIndicatorRect(ctx2) {
+          ctx2.indicatorCleanup?.();
+          if (!dom.getIndicatorEl(ctx2))
+            return;
+          const value = ctx2.value;
+          if (value == null) {
+            ctx2.indicatorRect = {};
+            return;
+          }
+          const radioEl = dom.getActiveRadioEl(ctx2);
+          if (!radioEl)
+            return;
+          ctx2.indicatorCleanup = (0, import_element_rect.trackElementRect)(radioEl, {
+            getRect(el) {
+              return dom.getOffsetRect(el);
+            },
+            onChange(rect) {
+              ctx2.indicatorRect = dom.resolveRect(rect);
+              (0, import_dom_query3.nextTick)(() => {
+                ctx2.canIndicatorTransition = false;
+              });
+            }
+          });
         }
       }
     }

package/dist/index.mjs

@@ -1,13 +1,13 @@
 import {
   connect
-} from "./chunk-BVCYFZ6N.mjs";
+} from "./chunk-DM5GVJFW.mjs";
 import {
   anatomy
-} from "./chunk-MGLN5L3R.mjs";
+} from "./chunk-R5YJZPCP.mjs";
 import {
   machine
-} from "./chunk-DYVEYVKH.mjs";
-import "./chunk-ITVKBCBK.mjs";
+} from "./chunk-UMCKI3BN.mjs";
+import "./chunk-DVMAGSYZ.mjs";
 export {
   anatomy,
   connect,

package/dist/radio-group.anatomy.d.ts

@@ -1,6 +1,6 @@
 import * as _zag_js_anatomy from '@zag-js/anatomy';
 
-declare const anatomy: _zag_js_anatomy.AnatomyInstance<"root" | "label" | "radio" | "radioLabel" | "radioControl" | "radioInput">;
-declare const parts: Record<"root" | "label" | "radio" | "radioLabel" | "radioControl" | "radioInput", _zag_js_anatomy.AnatomyPart>;
+declare const anatomy: _zag_js_anatomy.AnatomyInstance<"root" | "label" | "radio" | "radioLabel" | "radioControl" | "radioInput" | "indicator">;
+declare const parts: Record<"root" | "label" | "radio" | "radioLabel" | "radioControl" | "radioInput" | "indicator", _zag_js_anatomy.AnatomyPart>;
 
 export { anatomy, parts };

package/dist/radio-group.anatomy.js

@@ -31,7 +31,8 @@ var anatomy = (0, import_anatomy.createAnatomy)("radio-group").parts(
   "radio",
   "radioLabel",
   "radioControl",
-  "radioInput"
+  "radioInput",
+  "indicator"
 );
 var parts = anatomy.build();
 // Annotate the CommonJS export names for ESM import in node:

package/dist/radio-group.anatomy.mjs

@@ -1,7 +1,7 @@
 import {
   anatomy,
   parts
-} from "./chunk-MGLN5L3R.mjs";
+} from "./chunk-R5YJZPCP.mjs";
 export {
   anatomy,
   parts

package/dist/radio-group.connect.d.ts

@@ -42,6 +42,7 @@ declare function connect<T extends PropTypes>(state: State, send: Send, normaliz
     getRadioLabelProps(props: RadioProps): T["element"];
     getRadioControlProps(props: RadioProps): T["element"];
     getRadioInputProps(props: InputProps): T["input"];
+    indicatorProps: T["element"];
 };
 
 export { connect };

package/dist/radio-group.connect.js

@@ -34,7 +34,8 @@ var anatomy = (0, import_anatomy.createAnatomy)("radio-group").parts(
   "radio",
   "radioLabel",
   "radioControl",
-  "radioInput"
+  "radioInput",
+  "indicator"
 );
 var parts = anatomy.build();
 
@@ -47,14 +48,41 @@ var dom = (0, import_dom_query.createScope)({
   getRadioInputId: (ctx, value) => ctx.ids?.radioInput?.(value) ?? `radio-group:${ctx.id}:radio:input:${value}`,
   getRadioControlId: (ctx, value) => ctx.ids?.radioControl?.(value) ?? `radio-group:${ctx.id}:radio:control:${value}`,
   getRadioLabelId: (ctx, value) => ctx.ids?.radioLabel?.(value) ?? `radio-group:${ctx.id}:radio:label:${value}`,
+  getIndicatorId: (ctx) => ctx.ids?.indicator ?? `tabs:${ctx.id}:indicator`,
   getRootEl: (ctx) => dom.getById(ctx, dom.getRootId(ctx)),
   getRadioInputEl: (ctx, value) => dom.getById(ctx, dom.getRadioInputId(ctx, value)),
+  getIndicatorEl: (ctx) => dom.getById(ctx, dom.getIndicatorId(ctx)),
   getFirstEnabledInputEl: (ctx) => dom.getRootEl(ctx)?.querySelector("input:not(:disabled)"),
   getFirstEnabledAndCheckedInputEl: (ctx) => dom.getRootEl(ctx)?.querySelector("input:not(:disabled):checked"),
   getInputEls: (ctx) => {
     const ownerId = CSS.escape(dom.getRootId(ctx));
     const selector = `input[type=radio][data-ownedby='${ownerId}']:not([disabled])`;
     return (0, import_dom_query.queryAll)(dom.getRootEl(ctx), selector);
+  },
+  getActiveRadioEl: (ctx) => {
+    if (!ctx.value)
+      return;
+    return dom.getById(ctx, dom.getRadioId(ctx, ctx.value));
+  },
+  getOffsetRect: (el) => {
+    return {
+      left: el?.offsetLeft ?? 0,
+      top: el?.offsetTop ?? 0,
+      width: el?.offsetWidth ?? 0,
+      height: el?.offsetHeight ?? 0
+    };
+  },
+  getRectById: (ctx, id) => {
+    const tab = dom.queryById(ctx, dom.getRadioId(ctx, id));
+    return dom.resolveRect(dom.getOffsetRect(tab));
+  },
+  resolveRect(rect) {
+    return {
+      width: `${rect.width}px`,
+      height: `${rect.height}px`,
+      left: `${rect.left}px`,
+      top: `${rect.top}px`
+    };
   }
 });
 
@@ -243,7 +271,22 @@ function connect(state, send, normalize) {
         "aria-checked": (0, import_dom_query2.ariaAttr)(inputState.isChecked),
         style: import_visually_hidden.visuallyHiddenStyle
       });
-    }
+    },
+    indicatorProps: normalize.element({
+      id: dom.getIndicatorId(state.context),
+      ...parts.indicator.attrs,
+      "data-orientation": state.context.orientation,
+      style: {
+        "--transition-duration": "150ms",
+        "--transition-property": "left, top, width, height",
+        position: "absolute",
+        willChange: "var(--transition-property)",
+        transitionProperty: "var(--transition-property)",
+        transitionDuration: state.context.canIndicatorTransition ? "var(--transition-duration)" : "0ms",
+        transitionTimingFunction: "var(--transition-timing-function)",
+        ...state.context.indicatorRect
+      }
+    })
   };
 }
 // Annotate the CommonJS export names for ESM import in node:

package/dist/radio-group.connect.mjs

@@ -1,8 +1,8 @@
 import {
   connect
-} from "./chunk-BVCYFZ6N.mjs";
-import "./chunk-MGLN5L3R.mjs";
-import "./chunk-ITVKBCBK.mjs";
+} from "./chunk-DM5GVJFW.mjs";
+import "./chunk-R5YJZPCP.mjs";
+import "./chunk-DVMAGSYZ.mjs";
 export {
   connect
 };

package/dist/radio-group.dom.d.ts

@@ -28,11 +28,32 @@ declare const dom: {
     getRadioInputId: (ctx: MachineContext, value: string) => string;
     getRadioControlId: (ctx: MachineContext, value: string) => string;
     getRadioLabelId: (ctx: MachineContext, value: string) => string;
+    getIndicatorId: (ctx: MachineContext) => string;
     getRootEl: (ctx: MachineContext) => HTMLElement | null;
     getRadioInputEl: (ctx: MachineContext, value: string) => HTMLInputElement | null;
+    getIndicatorEl: (ctx: MachineContext) => HTMLElement | null;
     getFirstEnabledInputEl: (ctx: MachineContext) => HTMLInputElement | null | undefined;
     getFirstEnabledAndCheckedInputEl: (ctx: MachineContext) => HTMLInputElement | null | undefined;
     getInputEls: (ctx: MachineContext) => HTMLInputElement[];
+    getActiveRadioEl: (ctx: MachineContext) => HTMLElement | null | undefined;
+    getOffsetRect: (el: HTMLElement | undefined) => {
+        left: number;
+        top: number;
+        width: number;
+        height: number;
+    };
+    getRectById: (ctx: MachineContext, id: string) => {
+        width: string;
+        height: string;
+        left: string;
+        top: string;
+    };
+    resolveRect(rect: Record<"width" | "height" | "left" | "top", number>): {
+        width: string;
+        height: string;
+        left: string;
+        top: string;
+    };
 };
 
 export { dom };

package/dist/radio-group.dom.js

@@ -31,14 +31,41 @@ var dom = (0, import_dom_query.createScope)({
   getRadioInputId: (ctx, value) => ctx.ids?.radioInput?.(value) ?? `radio-group:${ctx.id}:radio:input:${value}`,
   getRadioControlId: (ctx, value) => ctx.ids?.radioControl?.(value) ?? `radio-group:${ctx.id}:radio:control:${value}`,
   getRadioLabelId: (ctx, value) => ctx.ids?.radioLabel?.(value) ?? `radio-group:${ctx.id}:radio:label:${value}`,
+  getIndicatorId: (ctx) => ctx.ids?.indicator ?? `tabs:${ctx.id}:indicator`,
   getRootEl: (ctx) => dom.getById(ctx, dom.getRootId(ctx)),
   getRadioInputEl: (ctx, value) => dom.getById(ctx, dom.getRadioInputId(ctx, value)),
+  getIndicatorEl: (ctx) => dom.getById(ctx, dom.getIndicatorId(ctx)),
   getFirstEnabledInputEl: (ctx) => dom.getRootEl(ctx)?.querySelector("input:not(:disabled)"),
   getFirstEnabledAndCheckedInputEl: (ctx) => dom.getRootEl(ctx)?.querySelector("input:not(:disabled):checked"),
   getInputEls: (ctx) => {
     const ownerId = CSS.escape(dom.getRootId(ctx));
     const selector = `input[type=radio][data-ownedby='${ownerId}']:not([disabled])`;
     return (0, import_dom_query.queryAll)(dom.getRootEl(ctx), selector);
+  },
+  getActiveRadioEl: (ctx) => {
+    if (!ctx.value)
+      return;
+    return dom.getById(ctx, dom.getRadioId(ctx, ctx.value));
+  },
+  getOffsetRect: (el) => {
+    return {
+      left: el?.offsetLeft ?? 0,
+      top: el?.offsetTop ?? 0,
+      width: el?.offsetWidth ?? 0,
+      height: el?.offsetHeight ?? 0
+    };
+  },
+  getRectById: (ctx, id) => {
+    const tab = dom.queryById(ctx, dom.getRadioId(ctx, id));
+    return dom.resolveRect(dom.getOffsetRect(tab));
+  },
+  resolveRect(rect) {
+    return {
+      width: `${rect.width}px`,
+      height: `${rect.height}px`,
+      left: `${rect.left}px`,
+      top: `${rect.top}px`
+    };
   }
 });
 // Annotate the CommonJS export names for ESM import in node:

package/dist/radio-group.dom.mjs

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

package/dist/radio-group.machine.js

@@ -24,6 +24,8 @@ __export(radio_group_machine_exports, {
 });
 module.exports = __toCommonJS(radio_group_machine_exports);
 var import_core = require("@zag-js/core");
+var import_dom_query2 = require("@zag-js/dom-query");
+var import_element_rect = require("@zag-js/element-rect");
 var import_form_utils = require("@zag-js/form-utils");
 var import_utils = require("@zag-js/utils");
 
@@ -36,14 +38,41 @@ var dom = (0, import_dom_query.createScope)({
   getRadioInputId: (ctx, value) => ctx.ids?.radioInput?.(value) ?? `radio-group:${ctx.id}:radio:input:${value}`,
   getRadioControlId: (ctx, value) => ctx.ids?.radioControl?.(value) ?? `radio-group:${ctx.id}:radio:control:${value}`,
   getRadioLabelId: (ctx, value) => ctx.ids?.radioLabel?.(value) ?? `radio-group:${ctx.id}:radio:label:${value}`,
+  getIndicatorId: (ctx) => ctx.ids?.indicator ?? `tabs:${ctx.id}:indicator`,
   getRootEl: (ctx) => dom.getById(ctx, dom.getRootId(ctx)),
   getRadioInputEl: (ctx, value) => dom.getById(ctx, dom.getRadioInputId(ctx, value)),
+  getIndicatorEl: (ctx) => dom.getById(ctx, dom.getIndicatorId(ctx)),
   getFirstEnabledInputEl: (ctx) => dom.getRootEl(ctx)?.querySelector("input:not(:disabled)"),
   getFirstEnabledAndCheckedInputEl: (ctx) => dom.getRootEl(ctx)?.querySelector("input:not(:disabled):checked"),
   getInputEls: (ctx) => {
     const ownerId = CSS.escape(dom.getRootId(ctx));
     const selector = `input[type=radio][data-ownedby='${ownerId}']:not([disabled])`;
     return (0, import_dom_query.queryAll)(dom.getRootEl(ctx), selector);
+  },
+  getActiveRadioEl: (ctx) => {
+    if (!ctx.value)
+      return;
+    return dom.getById(ctx, dom.getRadioId(ctx, ctx.value));
+  },
+  getOffsetRect: (el) => {
+    return {
+      left: el?.offsetLeft ?? 0,
+      top: el?.offsetTop ?? 0,
+      width: el?.offsetWidth ?? 0,
+      height: el?.offsetHeight ?? 0
+    };
+  },
+  getRectById: (ctx, id) => {
+    const tab = dom.queryById(ctx, dom.getRadioId(ctx, id));
+    return dom.resolveRect(dom.getOffsetRect(tab));
+  },
+  resolveRect(rect) {
+    return {
+      width: `${rect.width}px`,
+      height: `${rect.height}px`,
+      left: `${rect.left}px`,
+      top: `${rect.top}px`
+    };
   }
 });
 
@@ -55,14 +84,28 @@ function machine(userContext) {
       id: "radio",
       initial: "idle",
       context: {
+        previousValue: null,
         value: null,
-        initialValue: null,
         activeId: null,
         focusedId: null,
         hoveredId: null,
+        indicatorRect: {},
+        canIndicatorTransition: false,
         ...ctx
       },
+      entry: ["syncIndicatorRect"],
+      exit: ["cleanupObserver"],
       activities: ["trackFormControlState"],
+      watch: {
+        value: [
+          "setIndicatorTransition",
+          // important to set this after `setIndicatorTransition`
+          "setPreviousValue",
+          "invokeOnChange",
+          "syncIndicatorRect",
+          "syncInputElements"
+        ]
+      },
       on: {
         SET_VALUE: {
           actions: ["setValue"]
@@ -77,31 +120,24 @@ function machine(userContext) {
           actions: "setFocused"
         }
       },
-      watch: {
-        value: ["dispatchChangeEvent", "invokeOnChange", "syncInputElements"]
-      },
-      entry: ["checkValue"],
       states: {
         idle: {}
       }
     },
     {
       activities: {
-        trackFormControlState(ctx2, _evt, { send }) {
+        trackFormControlState(ctx2, _evt, { send, initialContext }) {
           return (0, import_form_utils.trackFormControl)(dom.getRootEl(ctx2), {
             onFieldsetDisabled() {
               ctx2.disabled = true;
             },
             onFormReset() {
-              send({ type: "SET_VALUE", value: ctx2.initialValue });
+              send({ type: "SET_VALUE", value: initialContext.value });
             }
           });
         }
       },
       actions: {
-        checkValue(ctx2) {
-          ctx2.initialValue = ctx2.value;
-        },
         setValue(ctx2, evt) {
           ctx2.value = evt.value;
         },
@@ -117,17 +153,44 @@ function machine(userContext) {
         invokeOnChange(ctx2, evt) {
           ctx2.onChange?.({ value: evt.value });
         },
-        dispatchChangeEvent(ctx2, evt) {
-          if (!evt.manual)
-            return;
-          const el = dom.getRadioInputEl(ctx2, evt.value);
-          (0, import_form_utils.dispatchInputCheckedEvent)(el, !!evt.value);
-        },
         syncInputElements(ctx2) {
           const inputs = dom.getInputEls(ctx2);
           inputs.forEach((input) => {
             input.checked = input.value === ctx2.value;
           });
+        },
+        setPreviousValue(ctx2) {
+          ctx2.previousValue = ctx2.value;
+        },
+        setIndicatorTransition(ctx2) {
+          ctx2.canIndicatorTransition = (0, import_utils.isString)(ctx2.previousValue) && (0, import_utils.isString)(ctx2.value);
+        },
+        cleanupObserver(ctx2) {
+          ctx2.indicatorCleanup?.();
+        },
+        syncIndicatorRect(ctx2) {
+          ctx2.indicatorCleanup?.();
+          if (!dom.getIndicatorEl(ctx2))
+            return;
+          const value = ctx2.value;
+          if (value == null) {
+            ctx2.indicatorRect = {};
+            return;
+          }
+          const radioEl = dom.getActiveRadioEl(ctx2);
+          if (!radioEl)
+            return;
+          ctx2.indicatorCleanup = (0, import_element_rect.trackElementRect)(radioEl, {
+            getRect(el) {
+              return dom.getOffsetRect(el);
+            },
+            onChange(rect) {
+              ctx2.indicatorRect = dom.resolveRect(rect);
+              (0, import_dom_query2.nextTick)(() => {
+                ctx2.canIndicatorTransition = false;
+              });
+            }
+          });
         }
       }
     }

package/dist/radio-group.machine.mjs

@@ -1,7 +1,7 @@
 import {
   machine
-} from "./chunk-DYVEYVKH.mjs";
-import "./chunk-ITVKBCBK.mjs";
+} from "./chunk-UMCKI3BN.mjs";
+import "./chunk-DVMAGSYZ.mjs";
 export {
   machine
 };

package/dist/radio-group.types.d.ts

@@ -4,6 +4,7 @@ import { RequiredBy, DirectionProperty, CommonProperties, Context } from '@zag-j
 type ElementIds = Partial<{
     root: string;
     label: string;
+    indicator: string;
     radio(value: string): string;
     radioLabel(value: string): string;
     radioControl(value: string): string;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@zag-js/radio-group",
-  "version": "0.7.0",
+  "version": "0.8.0",
   "description": "Core logic for the radio group widget implemented as a state machine",
   "keywords": [
     "js",
@@ -29,6 +29,7 @@
   "dependencies": {
     "@zag-js/anatomy": "0.1.4",
     "@zag-js/dom-query": "0.1.4",
+    "@zag-js/element-rect": "0.8.0",
     "@zag-js/form-utils": "0.2.5",
     "@zag-js/visually-hidden": "0.0.1",
     "@zag-js/utils": "0.3.4",

package/dist/chunk-DYVEYVKH.mjs

@@ -1,97 +0,0 @@
-import {
-  dom
-} from "./chunk-ITVKBCBK.mjs";
-
-// src/radio-group.machine.ts
-import { createMachine } from "@zag-js/core";
-import { dispatchInputCheckedEvent, trackFormControl } from "@zag-js/form-utils";
-import { compact } from "@zag-js/utils";
-function machine(userContext) {
-  const ctx = compact(userContext);
-  return createMachine(
-    {
-      id: "radio",
-      initial: "idle",
-      context: {
-        value: null,
-        initialValue: null,
-        activeId: null,
-        focusedId: null,
-        hoveredId: null,
-        ...ctx
-      },
-      activities: ["trackFormControlState"],
-      on: {
-        SET_VALUE: {
-          actions: ["setValue"]
-        },
-        SET_HOVERED: {
-          actions: "setHovered"
-        },
-        SET_ACTIVE: {
-          actions: "setActive"
-        },
-        SET_FOCUSED: {
-          actions: "setFocused"
-        }
-      },
-      watch: {
-        value: ["dispatchChangeEvent", "invokeOnChange", "syncInputElements"]
-      },
-      entry: ["checkValue"],
-      states: {
-        idle: {}
-      }
-    },
-    {
-      activities: {
-        trackFormControlState(ctx2, _evt, { send }) {
-          return trackFormControl(dom.getRootEl(ctx2), {
-            onFieldsetDisabled() {
-              ctx2.disabled = true;
-            },
-            onFormReset() {
-              send({ type: "SET_VALUE", value: ctx2.initialValue });
-            }
-          });
-        }
-      },
-      actions: {
-        checkValue(ctx2) {
-          ctx2.initialValue = ctx2.value;
-        },
-        setValue(ctx2, evt) {
-          ctx2.value = evt.value;
-        },
-        setHovered(ctx2, evt) {
-          ctx2.hoveredId = evt.value;
-        },
-        setActive(ctx2, evt) {
-          ctx2.activeId = evt.value;
-        },
-        setFocused(ctx2, evt) {
-          ctx2.focusedId = evt.value;
-        },
-        invokeOnChange(ctx2, evt) {
-          ctx2.onChange?.({ value: evt.value });
-        },
-        dispatchChangeEvent(ctx2, evt) {
-          if (!evt.manual)
-            return;
-          const el = dom.getRadioInputEl(ctx2, evt.value);
-          dispatchInputCheckedEvent(el, !!evt.value);
-        },
-        syncInputElements(ctx2) {
-          const inputs = dom.getInputEls(ctx2);
-          inputs.forEach((input) => {
-            input.checked = input.value === ctx2.value;
-          });
-        }
-      }
-    }
-  );
-}
-
-export {
-  machine
-};