@zag-js/radio-group 1.34.1 → 1.35.1

package/dist/radio-group.connect.js

@@ -0,0 +1,247 @@
+"use strict";
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/radio-group.connect.ts
+var radio_group_connect_exports = {};
+__export(radio_group_connect_exports, {
+  connect: () => connect
+});
+module.exports = __toCommonJS(radio_group_connect_exports);
+var import_dom_query = require("@zag-js/dom-query");
+var import_focus_visible = require("@zag-js/focus-visible");
+var import_utils = require("@zag-js/utils");
+var import_radio_group = require("./radio-group.anatomy.cjs");
+var dom = __toESM(require("./radio-group.dom.cjs"));
+function connect(service, normalize) {
+  const { context, send, computed, prop, scope } = service;
+  const groupDisabled = computed("isDisabled");
+  const groupInvalid = prop("invalid");
+  const readOnly = prop("readOnly");
+  function getItemState(props) {
+    return {
+      value: props.value,
+      invalid: !!props.invalid || !!groupInvalid,
+      disabled: !!props.disabled || groupDisabled,
+      checked: context.get("value") === props.value,
+      focused: context.get("focusedValue") === props.value,
+      focusVisible: context.get("focusVisibleValue") === props.value,
+      hovered: context.get("hoveredValue") === props.value,
+      active: context.get("activeValue") === props.value
+    };
+  }
+  function getItemDataAttrs(props) {
+    const itemState = getItemState(props);
+    return {
+      "data-focus": (0, import_dom_query.dataAttr)(itemState.focused),
+      "data-focus-visible": (0, import_dom_query.dataAttr)(itemState.focusVisible),
+      "data-disabled": (0, import_dom_query.dataAttr)(itemState.disabled),
+      "data-readonly": (0, import_dom_query.dataAttr)(readOnly),
+      "data-state": itemState.checked ? "checked" : "unchecked",
+      "data-hover": (0, import_dom_query.dataAttr)(itemState.hovered),
+      "data-invalid": (0, import_dom_query.dataAttr)(itemState.invalid),
+      "data-orientation": prop("orientation"),
+      "data-ssr": (0, import_dom_query.dataAttr)(context.get("ssr"))
+    };
+  }
+  const focus = () => {
+    const nodeToFocus = dom.getFirstEnabledAndCheckedInputEl(scope) ?? dom.getFirstEnabledInputEl(scope);
+    nodeToFocus?.focus();
+  };
+  return {
+    focus,
+    value: context.get("value"),
+    setValue(value) {
+      send({ type: "SET_VALUE", value, isTrusted: false });
+    },
+    clearValue() {
+      send({ type: "SET_VALUE", value: null, isTrusted: false });
+    },
+    getRootProps() {
+      return normalize.element({
+        ...import_radio_group.parts.root.attrs,
+        role: "radiogroup",
+        id: dom.getRootId(scope),
+        "aria-labelledby": dom.getLabelId(scope),
+        "aria-required": prop("required") || void 0,
+        "aria-disabled": groupDisabled || void 0,
+        "aria-readonly": readOnly || void 0,
+        "data-orientation": prop("orientation"),
+        "data-disabled": (0, import_dom_query.dataAttr)(groupDisabled),
+        "data-invalid": (0, import_dom_query.dataAttr)(groupInvalid),
+        "data-required": (0, import_dom_query.dataAttr)(prop("required")),
+        "aria-orientation": prop("orientation"),
+        dir: prop("dir"),
+        style: {
+          position: "relative"
+        }
+      });
+    },
+    getLabelProps() {
+      return normalize.element({
+        ...import_radio_group.parts.label.attrs,
+        dir: prop("dir"),
+        "data-orientation": prop("orientation"),
+        "data-disabled": (0, import_dom_query.dataAttr)(groupDisabled),
+        "data-invalid": (0, import_dom_query.dataAttr)(groupInvalid),
+        "data-required": (0, import_dom_query.dataAttr)(prop("required")),
+        id: dom.getLabelId(scope),
+        onClick: focus
+      });
+    },
+    getItemState,
+    getItemProps(props) {
+      const itemState = getItemState(props);
+      return normalize.label({
+        ...import_radio_group.parts.item.attrs,
+        dir: prop("dir"),
+        id: dom.getItemId(scope, props.value),
+        htmlFor: dom.getItemHiddenInputId(scope, props.value),
+        ...getItemDataAttrs(props),
+        onPointerMove() {
+          if (itemState.disabled) return;
+          if (itemState.hovered) return;
+          send({ type: "SET_HOVERED", value: props.value, hovered: true });
+        },
+        onPointerLeave() {
+          if (itemState.disabled) return;
+          send({ type: "SET_HOVERED", value: null });
+        },
+        onPointerDown(event) {
+          if (itemState.disabled) return;
+          if (!(0, import_dom_query.isLeftClick)(event)) return;
+          if (itemState.focused && event.pointerType === "mouse") {
+            event.preventDefault();
+          }
+          send({ type: "SET_ACTIVE", value: props.value, active: true });
+        },
+        onPointerUp() {
+          if (itemState.disabled) return;
+          send({ type: "SET_ACTIVE", value: null });
+        },
+        onClick() {
+          if (!itemState.disabled && (0, import_dom_query.isSafari)()) {
+            dom.getItemHiddenInputEl(scope, props.value)?.focus();
+          }
+        }
+      });
+    },
+    getItemTextProps(props) {
+      return normalize.element({
+        ...import_radio_group.parts.itemText.attrs,
+        dir: prop("dir"),
+        id: dom.getItemLabelId(scope, props.value),
+        ...getItemDataAttrs(props)
+      });
+    },
+    getItemControlProps(props) {
+      const itemState = getItemState(props);
+      return normalize.element({
+        ...import_radio_group.parts.itemControl.attrs,
+        dir: prop("dir"),
+        id: dom.getItemControlId(scope, props.value),
+        "data-active": (0, import_dom_query.dataAttr)(itemState.active),
+        "aria-hidden": true,
+        ...getItemDataAttrs(props)
+      });
+    },
+    getItemHiddenInputProps(props) {
+      const itemState = getItemState(props);
+      return normalize.input({
+        "data-ownedby": dom.getRootId(scope),
+        id: dom.getItemHiddenInputId(scope, props.value),
+        type: "radio",
+        name: prop("name") || prop("id"),
+        form: prop("form"),
+        value: props.value,
+        required: prop("required"),
+        "aria-invalid": itemState.invalid || void 0,
+        onClick(event) {
+          if (readOnly) {
+            event.preventDefault();
+            return;
+          }
+          if (event.currentTarget.checked) {
+            send({ type: "SET_VALUE", value: props.value, isTrusted: true });
+          }
+        },
+        onBlur() {
+          send({ type: "SET_FOCUSED", value: null, focused: false, focusVisible: false });
+        },
+        onFocus() {
+          const focusVisible = (0, import_focus_visible.isFocusVisible)();
+          send({ type: "SET_FOCUSED", value: props.value, focused: true, focusVisible });
+        },
+        onKeyDown(event) {
+          if (event.defaultPrevented) return;
+          if (event.key === " ") {
+            send({ type: "SET_ACTIVE", value: props.value, active: true });
+          }
+        },
+        onKeyUp(event) {
+          if (event.defaultPrevented) return;
+          if (event.key === " ") {
+            send({ type: "SET_ACTIVE", value: null });
+          }
+        },
+        disabled: itemState.disabled || readOnly,
+        defaultChecked: itemState.checked,
+        style: import_dom_query.visuallyHiddenStyle
+      });
+    },
+    getIndicatorProps() {
+      const rect = context.get("indicatorRect");
+      const rectIsEmpty = rect == null || rect.width === 0 && rect.height === 0 && rect.x === 0 && rect.y === 0;
+      return normalize.element({
+        id: dom.getIndicatorId(scope),
+        ...import_radio_group.parts.indicator.attrs,
+        dir: prop("dir"),
+        hidden: context.get("value") == null || rectIsEmpty,
+        "data-disabled": (0, import_dom_query.dataAttr)(groupDisabled),
+        "data-orientation": prop("orientation"),
+        style: {
+          "--transition-property": "left, top, width, height",
+          "--left": (0, import_utils.toPx)(rect?.x),
+          "--top": (0, import_utils.toPx)(rect?.y),
+          "--width": (0, import_utils.toPx)(rect?.width),
+          "--height": (0, import_utils.toPx)(rect?.height),
+          position: "absolute",
+          willChange: "var(--transition-property)",
+          transitionProperty: "var(--transition-property)",
+          transitionDuration: "var(--transition-duration, 150ms)",
+          transitionTimingFunction: "var(--transition-timing-function)",
+          [prop("orientation") === "horizontal" ? "left" : "top"]: prop("orientation") === "horizontal" ? "var(--left)" : "var(--top)"
+        }
+      });
+    }
+  };
+}
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  connect
+});

package/dist/radio-group.connect.mjs

@@ -0,0 +1,212 @@
+// src/radio-group.connect.ts
+import { dataAttr, isLeftClick, isSafari, visuallyHiddenStyle } from "@zag-js/dom-query";
+import { isFocusVisible } from "@zag-js/focus-visible";
+import { toPx } from "@zag-js/utils";
+import { parts } from "./radio-group.anatomy.mjs";
+import * as dom from "./radio-group.dom.mjs";
+function connect(service, normalize) {
+  const { context, send, computed, prop, scope } = service;
+  const groupDisabled = computed("isDisabled");
+  const groupInvalid = prop("invalid");
+  const readOnly = prop("readOnly");
+  function getItemState(props) {
+    return {
+      value: props.value,
+      invalid: !!props.invalid || !!groupInvalid,
+      disabled: !!props.disabled || groupDisabled,
+      checked: context.get("value") === props.value,
+      focused: context.get("focusedValue") === props.value,
+      focusVisible: context.get("focusVisibleValue") === props.value,
+      hovered: context.get("hoveredValue") === props.value,
+      active: context.get("activeValue") === props.value
+    };
+  }
+  function getItemDataAttrs(props) {
+    const itemState = getItemState(props);
+    return {
+      "data-focus": dataAttr(itemState.focused),
+      "data-focus-visible": dataAttr(itemState.focusVisible),
+      "data-disabled": dataAttr(itemState.disabled),
+      "data-readonly": dataAttr(readOnly),
+      "data-state": itemState.checked ? "checked" : "unchecked",
+      "data-hover": dataAttr(itemState.hovered),
+      "data-invalid": dataAttr(itemState.invalid),
+      "data-orientation": prop("orientation"),
+      "data-ssr": dataAttr(context.get("ssr"))
+    };
+  }
+  const focus = () => {
+    const nodeToFocus = dom.getFirstEnabledAndCheckedInputEl(scope) ?? dom.getFirstEnabledInputEl(scope);
+    nodeToFocus?.focus();
+  };
+  return {
+    focus,
+    value: context.get("value"),
+    setValue(value) {
+      send({ type: "SET_VALUE", value, isTrusted: false });
+    },
+    clearValue() {
+      send({ type: "SET_VALUE", value: null, isTrusted: false });
+    },
+    getRootProps() {
+      return normalize.element({
+        ...parts.root.attrs,
+        role: "radiogroup",
+        id: dom.getRootId(scope),
+        "aria-labelledby": dom.getLabelId(scope),
+        "aria-required": prop("required") || void 0,
+        "aria-disabled": groupDisabled || void 0,
+        "aria-readonly": readOnly || void 0,
+        "data-orientation": prop("orientation"),
+        "data-disabled": dataAttr(groupDisabled),
+        "data-invalid": dataAttr(groupInvalid),
+        "data-required": dataAttr(prop("required")),
+        "aria-orientation": prop("orientation"),
+        dir: prop("dir"),
+        style: {
+          position: "relative"
+        }
+      });
+    },
+    getLabelProps() {
+      return normalize.element({
+        ...parts.label.attrs,
+        dir: prop("dir"),
+        "data-orientation": prop("orientation"),
+        "data-disabled": dataAttr(groupDisabled),
+        "data-invalid": dataAttr(groupInvalid),
+        "data-required": dataAttr(prop("required")),
+        id: dom.getLabelId(scope),
+        onClick: focus
+      });
+    },
+    getItemState,
+    getItemProps(props) {
+      const itemState = getItemState(props);
+      return normalize.label({
+        ...parts.item.attrs,
+        dir: prop("dir"),
+        id: dom.getItemId(scope, props.value),
+        htmlFor: dom.getItemHiddenInputId(scope, props.value),
+        ...getItemDataAttrs(props),
+        onPointerMove() {
+          if (itemState.disabled) return;
+          if (itemState.hovered) return;
+          send({ type: "SET_HOVERED", value: props.value, hovered: true });
+        },
+        onPointerLeave() {
+          if (itemState.disabled) return;
+          send({ type: "SET_HOVERED", value: null });
+        },
+        onPointerDown(event) {
+          if (itemState.disabled) return;
+          if (!isLeftClick(event)) return;
+          if (itemState.focused && event.pointerType === "mouse") {
+            event.preventDefault();
+          }
+          send({ type: "SET_ACTIVE", value: props.value, active: true });
+        },
+        onPointerUp() {
+          if (itemState.disabled) return;
+          send({ type: "SET_ACTIVE", value: null });
+        },
+        onClick() {
+          if (!itemState.disabled && isSafari()) {
+            dom.getItemHiddenInputEl(scope, props.value)?.focus();
+          }
+        }
+      });
+    },
+    getItemTextProps(props) {
+      return normalize.element({
+        ...parts.itemText.attrs,
+        dir: prop("dir"),
+        id: dom.getItemLabelId(scope, props.value),
+        ...getItemDataAttrs(props)
+      });
+    },
+    getItemControlProps(props) {
+      const itemState = getItemState(props);
+      return normalize.element({
+        ...parts.itemControl.attrs,
+        dir: prop("dir"),
+        id: dom.getItemControlId(scope, props.value),
+        "data-active": dataAttr(itemState.active),
+        "aria-hidden": true,
+        ...getItemDataAttrs(props)
+      });
+    },
+    getItemHiddenInputProps(props) {
+      const itemState = getItemState(props);
+      return normalize.input({
+        "data-ownedby": dom.getRootId(scope),
+        id: dom.getItemHiddenInputId(scope, props.value),
+        type: "radio",
+        name: prop("name") || prop("id"),
+        form: prop("form"),
+        value: props.value,
+        required: prop("required"),
+        "aria-invalid": itemState.invalid || void 0,
+        onClick(event) {
+          if (readOnly) {
+            event.preventDefault();
+            return;
+          }
+          if (event.currentTarget.checked) {
+            send({ type: "SET_VALUE", value: props.value, isTrusted: true });
+          }
+        },
+        onBlur() {
+          send({ type: "SET_FOCUSED", value: null, focused: false, focusVisible: false });
+        },
+        onFocus() {
+          const focusVisible = isFocusVisible();
+          send({ type: "SET_FOCUSED", value: props.value, focused: true, focusVisible });
+        },
+        onKeyDown(event) {
+          if (event.defaultPrevented) return;
+          if (event.key === " ") {
+            send({ type: "SET_ACTIVE", value: props.value, active: true });
+          }
+        },
+        onKeyUp(event) {
+          if (event.defaultPrevented) return;
+          if (event.key === " ") {
+            send({ type: "SET_ACTIVE", value: null });
+          }
+        },
+        disabled: itemState.disabled || readOnly,
+        defaultChecked: itemState.checked,
+        style: visuallyHiddenStyle
+      });
+    },
+    getIndicatorProps() {
+      const rect = context.get("indicatorRect");
+      const rectIsEmpty = rect == null || rect.width === 0 && rect.height === 0 && rect.x === 0 && rect.y === 0;
+      return normalize.element({
+        id: dom.getIndicatorId(scope),
+        ...parts.indicator.attrs,
+        dir: prop("dir"),
+        hidden: context.get("value") == null || rectIsEmpty,
+        "data-disabled": dataAttr(groupDisabled),
+        "data-orientation": prop("orientation"),
+        style: {
+          "--transition-property": "left, top, width, 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: "var(--transition-duration, 150ms)",
+          transitionTimingFunction: "var(--transition-timing-function)",
+          [prop("orientation") === "horizontal" ? "left" : "top"]: prop("orientation") === "horizontal" ? "var(--left)" : "var(--top)"
+        }
+      });
+    }
+  };
+}
+export {
+  connect
+};

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

@@ -0,0 +1,30 @@
+import { Scope } from '@zag-js/core';
+
+declare const getRootId: (ctx: Scope) => any;
+declare const getLabelId: (ctx: Scope) => any;
+declare const getItemId: (ctx: Scope, value: string) => any;
+declare const getItemHiddenInputId: (ctx: Scope, value: string) => any;
+declare const getItemControlId: (ctx: Scope, value: string) => any;
+declare const getItemLabelId: (ctx: Scope, value: string) => any;
+declare const getIndicatorId: (ctx: Scope) => any;
+declare const getRootEl: (ctx: Scope) => HTMLElement | null;
+declare const getItemHiddenInputEl: (ctx: Scope, value: string) => HTMLInputElement | null;
+declare const getIndicatorEl: (ctx: Scope) => HTMLElement | null;
+declare const getFirstEnabledInputEl: (ctx: Scope) => HTMLInputElement | null | undefined;
+declare const getFirstEnabledAndCheckedInputEl: (ctx: Scope) => HTMLInputElement | null | undefined;
+declare const getInputEls: (ctx: Scope) => HTMLInputElement[];
+declare const getRadioEl: (ctx: Scope, value: string | null) => HTMLElement | null | undefined;
+declare const getOffsetRect: (el: HTMLElement | undefined) => {
+    x: number;
+    y: number;
+    width: number;
+    height: number;
+};
+declare const getRectById: (ctx: Scope, id: string) => {
+    x: number;
+    y: number;
+    width: number;
+    height: number;
+} | undefined;
+
+export { getFirstEnabledAndCheckedInputEl, getFirstEnabledInputEl, getIndicatorEl, getIndicatorId, getInputEls, getItemControlId, getItemHiddenInputEl, getItemHiddenInputId, getItemId, getItemLabelId, getLabelId, getOffsetRect, getRadioEl, getRectById, getRootEl, getRootId };

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

@@ -0,0 +1,30 @@
+import { Scope } from '@zag-js/core';
+
+declare const getRootId: (ctx: Scope) => any;
+declare const getLabelId: (ctx: Scope) => any;
+declare const getItemId: (ctx: Scope, value: string) => any;
+declare const getItemHiddenInputId: (ctx: Scope, value: string) => any;
+declare const getItemControlId: (ctx: Scope, value: string) => any;
+declare const getItemLabelId: (ctx: Scope, value: string) => any;
+declare const getIndicatorId: (ctx: Scope) => any;
+declare const getRootEl: (ctx: Scope) => HTMLElement | null;
+declare const getItemHiddenInputEl: (ctx: Scope, value: string) => HTMLInputElement | null;
+declare const getIndicatorEl: (ctx: Scope) => HTMLElement | null;
+declare const getFirstEnabledInputEl: (ctx: Scope) => HTMLInputElement | null | undefined;
+declare const getFirstEnabledAndCheckedInputEl: (ctx: Scope) => HTMLInputElement | null | undefined;
+declare const getInputEls: (ctx: Scope) => HTMLInputElement[];
+declare const getRadioEl: (ctx: Scope, value: string | null) => HTMLElement | null | undefined;
+declare const getOffsetRect: (el: HTMLElement | undefined) => {
+    x: number;
+    y: number;
+    width: number;
+    height: number;
+};
+declare const getRectById: (ctx: Scope, id: string) => {
+    x: number;
+    y: number;
+    width: number;
+    height: number;
+} | undefined;
+
+export { getFirstEnabledAndCheckedInputEl, getFirstEnabledInputEl, getIndicatorEl, getIndicatorId, getInputEls, getItemControlId, getItemHiddenInputEl, getItemHiddenInputId, getItemId, getItemLabelId, getLabelId, getOffsetRect, getRadioEl, getRectById, getRootEl, getRootId };

package/dist/radio-group.dom.js

@@ -0,0 +1,92 @@
+"use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/radio-group.dom.ts
+var radio_group_dom_exports = {};
+__export(radio_group_dom_exports, {
+  getFirstEnabledAndCheckedInputEl: () => getFirstEnabledAndCheckedInputEl,
+  getFirstEnabledInputEl: () => getFirstEnabledInputEl,
+  getIndicatorEl: () => getIndicatorEl,
+  getIndicatorId: () => getIndicatorId,
+  getInputEls: () => getInputEls,
+  getItemControlId: () => getItemControlId,
+  getItemHiddenInputEl: () => getItemHiddenInputEl,
+  getItemHiddenInputId: () => getItemHiddenInputId,
+  getItemId: () => getItemId,
+  getItemLabelId: () => getItemLabelId,
+  getLabelId: () => getLabelId,
+  getOffsetRect: () => getOffsetRect,
+  getRadioEl: () => getRadioEl,
+  getRectById: () => getRectById,
+  getRootEl: () => getRootEl,
+  getRootId: () => getRootId
+});
+module.exports = __toCommonJS(radio_group_dom_exports);
+var import_dom_query = require("@zag-js/dom-query");
+var getRootId = (ctx) => ctx.ids?.root ?? `radio-group:${ctx.id}`;
+var getLabelId = (ctx) => ctx.ids?.label ?? `radio-group:${ctx.id}:label`;
+var getItemId = (ctx, value) => ctx.ids?.item?.(value) ?? `radio-group:${ctx.id}:radio:${value}`;
+var getItemHiddenInputId = (ctx, value) => ctx.ids?.itemHiddenInput?.(value) ?? `radio-group:${ctx.id}:radio:input:${value}`;
+var getItemControlId = (ctx, value) => ctx.ids?.itemControl?.(value) ?? `radio-group:${ctx.id}:radio:control:${value}`;
+var getItemLabelId = (ctx, value) => ctx.ids?.itemLabel?.(value) ?? `radio-group:${ctx.id}:radio:label:${value}`;
+var getIndicatorId = (ctx) => ctx.ids?.indicator ?? `radio-group:${ctx.id}:indicator`;
+var getRootEl = (ctx) => ctx.getById(getRootId(ctx));
+var getItemHiddenInputEl = (ctx, value) => ctx.getById(getItemHiddenInputId(ctx, value));
+var getIndicatorEl = (ctx) => ctx.getById(getIndicatorId(ctx));
+var getFirstEnabledInputEl = (ctx) => getRootEl(ctx)?.querySelector("input:not(:disabled)");
+var getFirstEnabledAndCheckedInputEl = (ctx) => getRootEl(ctx)?.querySelector("input:not(:disabled):checked");
+var getInputEls = (ctx) => {
+  const ownerId = CSS.escape(getRootId(ctx));
+  const selector = `input[type=radio][data-ownedby='${ownerId}']:not([disabled])`;
+  return (0, import_dom_query.queryAll)(getRootEl(ctx), selector);
+};
+var getRadioEl = (ctx, value) => {
+  if (!value) return;
+  return ctx.getById(getItemId(ctx, value));
+};
+var getOffsetRect = (el) => ({
+  x: el?.offsetLeft ?? 0,
+  y: el?.offsetTop ?? 0,
+  width: el?.offsetWidth ?? 0,
+  height: el?.offsetHeight ?? 0
+});
+var getRectById = (ctx, id) => {
+  const radioEl = ctx.getById(getItemId(ctx, id));
+  if (!radioEl) return;
+  return getOffsetRect(radioEl);
+};
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  getFirstEnabledAndCheckedInputEl,
+  getFirstEnabledInputEl,
+  getIndicatorEl,
+  getIndicatorId,
+  getInputEls,
+  getItemControlId,
+  getItemHiddenInputEl,
+  getItemHiddenInputId,
+  getItemId,
+  getItemLabelId,
+  getLabelId,
+  getOffsetRect,
+  getRadioEl,
+  getRectById,
+  getRootEl,
+  getRootId
+});

package/dist/radio-group.dom.mjs

@@ -0,0 +1,52 @@
+// src/radio-group.dom.ts
+import { queryAll } from "@zag-js/dom-query";
+var getRootId = (ctx) => ctx.ids?.root ?? `radio-group:${ctx.id}`;
+var getLabelId = (ctx) => ctx.ids?.label ?? `radio-group:${ctx.id}:label`;
+var getItemId = (ctx, value) => ctx.ids?.item?.(value) ?? `radio-group:${ctx.id}:radio:${value}`;
+var getItemHiddenInputId = (ctx, value) => ctx.ids?.itemHiddenInput?.(value) ?? `radio-group:${ctx.id}:radio:input:${value}`;
+var getItemControlId = (ctx, value) => ctx.ids?.itemControl?.(value) ?? `radio-group:${ctx.id}:radio:control:${value}`;
+var getItemLabelId = (ctx, value) => ctx.ids?.itemLabel?.(value) ?? `radio-group:${ctx.id}:radio:label:${value}`;
+var getIndicatorId = (ctx) => ctx.ids?.indicator ?? `radio-group:${ctx.id}:indicator`;
+var getRootEl = (ctx) => ctx.getById(getRootId(ctx));
+var getItemHiddenInputEl = (ctx, value) => ctx.getById(getItemHiddenInputId(ctx, value));
+var getIndicatorEl = (ctx) => ctx.getById(getIndicatorId(ctx));
+var getFirstEnabledInputEl = (ctx) => getRootEl(ctx)?.querySelector("input:not(:disabled)");
+var getFirstEnabledAndCheckedInputEl = (ctx) => getRootEl(ctx)?.querySelector("input:not(:disabled):checked");
+var getInputEls = (ctx) => {
+  const ownerId = CSS.escape(getRootId(ctx));
+  const selector = `input[type=radio][data-ownedby='${ownerId}']:not([disabled])`;
+  return queryAll(getRootEl(ctx), selector);
+};
+var getRadioEl = (ctx, value) => {
+  if (!value) return;
+  return ctx.getById(getItemId(ctx, value));
+};
+var getOffsetRect = (el) => ({
+  x: el?.offsetLeft ?? 0,
+  y: el?.offsetTop ?? 0,
+  width: el?.offsetWidth ?? 0,
+  height: el?.offsetHeight ?? 0
+});
+var getRectById = (ctx, id) => {
+  const radioEl = ctx.getById(getItemId(ctx, id));
+  if (!radioEl) return;
+  return getOffsetRect(radioEl);
+};
+export {
+  getFirstEnabledAndCheckedInputEl,
+  getFirstEnabledInputEl,
+  getIndicatorEl,
+  getIndicatorId,
+  getInputEls,
+  getItemControlId,
+  getItemHiddenInputEl,
+  getItemHiddenInputId,
+  getItemId,
+  getItemLabelId,
+  getLabelId,
+  getOffsetRect,
+  getRadioEl,
+  getRectById,
+  getRootEl,
+  getRootId
+};

package/dist/radio-group.machine.d.mts

@@ -0,0 +1,7 @@
+import * as _zag_js_core from '@zag-js/core';
+import { RadioGroupSchema } from './radio-group.types.mjs';
+import '@zag-js/types';
+
+declare const machine: _zag_js_core.Machine<RadioGroupSchema>;
+
+export { machine };

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

@@ -0,0 +1,7 @@
+import * as _zag_js_core from '@zag-js/core';
+import { RadioGroupSchema } from './radio-group.types.js';
+import '@zag-js/types';
+
+declare const machine: _zag_js_core.Machine<RadioGroupSchema>;
+
+export { machine };