@zag-js/radio-group 1.43.0 → 2.0.0-next.1

package/dist/index.d.mts

@@ -2,7 +2,7 @@ export { anatomy } from './radio-group.anatomy.mjs';
 export { connect } from './radio-group.connect.mjs';
 export { machine } from './radio-group.machine.mjs';
 export { itemProps, props, splitItemProps, splitProps } from './radio-group.props.mjs';
-export { RadioGroupApi as Api, ElementIds, ItemProps, ItemState, RadioGroupMachine as Machine, RadioGroupProps as Props, RadioGroupService as Service, ValueChangeDetails } from './radio-group.types.mjs';
+export { RadioGroupApi as Api, ElementIds, ItemProps, ItemState, RadioGroupMachine as Machine, RadioGroupProps as Props, RootState, RadioGroupService as Service, ValueChangeDetails } from './radio-group.types.mjs';
 import '@zag-js/anatomy';
 import '@zag-js/types';
 import '@zag-js/core';

package/dist/index.d.ts

@@ -2,7 +2,7 @@ export { anatomy } from './radio-group.anatomy.js';
 export { connect } from './radio-group.connect.js';
 export { machine } from './radio-group.machine.js';
 export { itemProps, props, splitItemProps, splitProps } from './radio-group.props.js';
-export { RadioGroupApi as Api, ElementIds, ItemProps, ItemState, RadioGroupMachine as Machine, RadioGroupProps as Props, RadioGroupService as Service, ValueChangeDetails } from './radio-group.types.js';
+export { RadioGroupApi as Api, ElementIds, ItemProps, ItemState, RadioGroupMachine as Machine, RadioGroupProps as Props, RootState, RadioGroupService as Service, ValueChangeDetails } from './radio-group.types.js';
 import '@zag-js/anatomy';
 import '@zag-js/types';
 import '@zag-js/core';

package/dist/radio-group.connect.js

@@ -41,8 +41,17 @@ var dom = __toESM(require("./radio-group.dom.js"));
 function connect(service, normalize) {
   const { context, send, computed, prop, scope } = service;
   const groupDisabled = computed("isDisabled");
-  const groupInvalid = prop("invalid");
-  const readOnly = prop("readOnly");
+  const groupInvalid = !!prop("invalid");
+  const readOnly = !!prop("readOnly");
+  function getRootState() {
+    return {
+      disabled: groupDisabled,
+      invalid: groupInvalid,
+      required: !!prop("required"),
+      readOnly,
+      orientation: prop("orientation")
+    };
+  }
   function getItemState(props) {
     return {
       value: props.value,
@@ -82,20 +91,21 @@ function connect(service, normalize) {
     clearValue() {
       send({ type: "SET_VALUE", value: null, isTrusted: false });
     },
+    getRootState,
     getRootProps() {
+      const rootState = getRootState();
       return normalize.element({
-        ...import_radio_group.parts.root.attrs,
+        ...import_radio_group.parts.root.attrs(scope.id),
         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"),
+        "aria-required": rootState.required || void 0,
+        "aria-disabled": rootState.disabled || void 0,
+        "aria-readonly": rootState.readOnly || void 0,
+        "data-orientation": rootState.orientation,
+        "data-disabled": (0, import_dom_query.dataAttr)(rootState.disabled),
+        "data-invalid": (0, import_dom_query.dataAttr)(rootState.invalid),
+        "data-required": (0, import_dom_query.dataAttr)(rootState.required),
+        "aria-orientation": rootState.orientation,
         dir: prop("dir"),
         style: {
           position: "relative"
@@ -104,7 +114,7 @@ function connect(service, normalize) {
     },
     getLabelProps() {
       return normalize.element({
-        ...import_radio_group.parts.label.attrs,
+        ...import_radio_group.parts.label.attrs(scope.id),
         dir: prop("dir"),
         "data-orientation": prop("orientation"),
         "data-disabled": (0, import_dom_query.dataAttr)(groupDisabled),
@@ -118,7 +128,7 @@ function connect(service, normalize) {
     getItemProps(props) {
       const itemState = getItemState(props);
       return normalize.label({
-        ...import_radio_group.parts.item.attrs,
+        ...import_radio_group.parts.item.attrs(scope.id),
         dir: prop("dir"),
         id: dom.getItemId(scope, props.value),
         htmlFor: dom.getItemHiddenInputId(scope, props.value),
@@ -153,7 +163,7 @@ function connect(service, normalize) {
     },
     getItemTextProps(props) {
       return normalize.element({
-        ...import_radio_group.parts.itemText.attrs,
+        ...import_radio_group.parts.itemText.attrs(scope.id),
         dir: prop("dir"),
         id: dom.getItemLabelId(scope, props.value),
         ...getItemDataAttrs(props)
@@ -162,9 +172,8 @@ function connect(service, normalize) {
     getItemControlProps(props) {
       const itemState = getItemState(props);
       return normalize.element({
-        ...import_radio_group.parts.itemControl.attrs,
+        ...import_radio_group.parts.itemControl.attrs(scope.id),
         dir: prop("dir"),
-        id: dom.getItemControlId(scope, props.value),
         "data-active": (0, import_dom_query.dataAttr)(itemState.active),
         "aria-hidden": true,
         ...getItemDataAttrs(props)
@@ -173,7 +182,6 @@ function connect(service, normalize) {
     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"),
@@ -219,8 +227,7 @@ function connect(service, normalize) {
       const rect = context.get("indicatorRect");
       const animateIndicator = context.get("animateIndicator");
       return normalize.element({
-        id: dom.getIndicatorId(scope),
-        ...import_radio_group.parts.indicator.attrs,
+        ...import_radio_group.parts.indicator.attrs(scope.id),
         dir: prop("dir"),
         hidden: context.get("value") == null || isRectEmpty(rect),
         "data-disabled": (0, import_dom_query.dataAttr)(groupDisabled),

package/dist/radio-group.connect.mjs

@@ -7,8 +7,17 @@ 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");
+  const groupInvalid = !!prop("invalid");
+  const readOnly = !!prop("readOnly");
+  function getRootState() {
+    return {
+      disabled: groupDisabled,
+      invalid: groupInvalid,
+      required: !!prop("required"),
+      readOnly,
+      orientation: prop("orientation")
+    };
+  }
   function getItemState(props) {
     return {
       value: props.value,
@@ -48,20 +57,21 @@ function connect(service, normalize) {
     clearValue() {
       send({ type: "SET_VALUE", value: null, isTrusted: false });
     },
+    getRootState,
     getRootProps() {
+      const rootState = getRootState();
       return normalize.element({
-        ...parts.root.attrs,
+        ...parts.root.attrs(scope.id),
         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"),
+        "aria-required": rootState.required || void 0,
+        "aria-disabled": rootState.disabled || void 0,
+        "aria-readonly": rootState.readOnly || void 0,
+        "data-orientation": rootState.orientation,
+        "data-disabled": dataAttr(rootState.disabled),
+        "data-invalid": dataAttr(rootState.invalid),
+        "data-required": dataAttr(rootState.required),
+        "aria-orientation": rootState.orientation,
         dir: prop("dir"),
         style: {
           position: "relative"
@@ -70,7 +80,7 @@ function connect(service, normalize) {
     },
     getLabelProps() {
       return normalize.element({
-        ...parts.label.attrs,
+        ...parts.label.attrs(scope.id),
         dir: prop("dir"),
         "data-orientation": prop("orientation"),
         "data-disabled": dataAttr(groupDisabled),
@@ -84,7 +94,7 @@ function connect(service, normalize) {
     getItemProps(props) {
       const itemState = getItemState(props);
       return normalize.label({
-        ...parts.item.attrs,
+        ...parts.item.attrs(scope.id),
         dir: prop("dir"),
         id: dom.getItemId(scope, props.value),
         htmlFor: dom.getItemHiddenInputId(scope, props.value),
@@ -119,7 +129,7 @@ function connect(service, normalize) {
     },
     getItemTextProps(props) {
       return normalize.element({
-        ...parts.itemText.attrs,
+        ...parts.itemText.attrs(scope.id),
         dir: prop("dir"),
         id: dom.getItemLabelId(scope, props.value),
         ...getItemDataAttrs(props)
@@ -128,9 +138,8 @@ function connect(service, normalize) {
     getItemControlProps(props) {
       const itemState = getItemState(props);
       return normalize.element({
-        ...parts.itemControl.attrs,
+        ...parts.itemControl.attrs(scope.id),
         dir: prop("dir"),
-        id: dom.getItemControlId(scope, props.value),
         "data-active": dataAttr(itemState.active),
         "aria-hidden": true,
         ...getItemDataAttrs(props)
@@ -139,7 +148,6 @@ function connect(service, normalize) {
     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"),
@@ -185,8 +193,7 @@ function connect(service, normalize) {
       const rect = context.get("indicatorRect");
       const animateIndicator = context.get("animateIndicator");
       return normalize.element({
-        id: dom.getIndicatorId(scope),
-        ...parts.indicator.attrs,
+        ...parts.indicator.attrs(scope.id),
         dir: prop("dir"),
         hidden: context.get("value") == null || isRectEmpty(rect),
         "data-disabled": dataAttr(groupDisabled),

package/dist/radio-group.dom.js

@@ -38,22 +38,21 @@ __export(radio_group_dom_exports, {
   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 import_radio_group = require("./radio-group.anatomy.js");
+var getRootId = (ctx) => ctx.ids?.root ?? `${ctx.id}`;
+var getLabelId = (ctx) => ctx.ids?.label ?? `${ctx.id}:label`;
+var getItemId = (ctx, value) => ctx.ids?.item?.(value) ?? `${ctx.id}:radio:${value}`;
+var getItemHiddenInputId = (ctx, value) => ctx.ids?.itemHiddenInput?.(value) ?? `${ctx.id}:radio-input:${value}`;
+var getItemControlId = (ctx, value) => ctx.ids?.itemControl?.(value) ?? `${ctx.id}:radio-control:${value}`;
+var getItemLabelId = (ctx, value) => ctx.ids?.itemLabel?.(value) ?? `${ctx.id}:radio-label:${value}`;
+var getIndicatorId = (ctx) => ctx.ids?.indicator ?? `${ctx.id}:indicator`;
+var getRootEl = (ctx) => ctx.query(ctx.selector(import_radio_group.parts.root));
 var getItemHiddenInputEl = (ctx, value) => ctx.getById(getItemHiddenInputId(ctx, value));
-var getIndicatorEl = (ctx) => ctx.getById(getIndicatorId(ctx));
+var getIndicatorEl = (ctx) => ctx.query(ctx.selector(import_radio_group.parts.indicator));
 var getFirstEnabledInputEl = (ctx) => getRootEl(ctx)?.querySelector("input:not(:disabled)");
 var getFirstEnabledAndCheckedInputEl = (ctx) => getRootEl(ctx)?.querySelector("input:not(:disabled):checked");
 var getInputEls = (ctx) => {
-  const selector = `input[type=radio]${(0, import_dom_query.getByOwnerId)(getRootId(ctx))}:not([disabled])`;
-  return (0, import_dom_query.queryAll)(getRootEl(ctx), selector);
+  return ctx.queryAll(`${ctx.selector(import_radio_group.parts.item)} input[type=radio]:not([disabled])`);
 };
 var getRadioEl = (ctx, value) => {
   if (!value) return;

package/dist/radio-group.dom.mjs

@@ -1,20 +1,19 @@
 // src/radio-group.dom.ts
-import { getByOwnerId, 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));
+import { parts } from "./radio-group.anatomy.mjs";
+var getRootId = (ctx) => ctx.ids?.root ?? `${ctx.id}`;
+var getLabelId = (ctx) => ctx.ids?.label ?? `${ctx.id}:label`;
+var getItemId = (ctx, value) => ctx.ids?.item?.(value) ?? `${ctx.id}:radio:${value}`;
+var getItemHiddenInputId = (ctx, value) => ctx.ids?.itemHiddenInput?.(value) ?? `${ctx.id}:radio-input:${value}`;
+var getItemControlId = (ctx, value) => ctx.ids?.itemControl?.(value) ?? `${ctx.id}:radio-control:${value}`;
+var getItemLabelId = (ctx, value) => ctx.ids?.itemLabel?.(value) ?? `${ctx.id}:radio-label:${value}`;
+var getIndicatorId = (ctx) => ctx.ids?.indicator ?? `${ctx.id}:indicator`;
+var getRootEl = (ctx) => ctx.query(ctx.selector(parts.root));
 var getItemHiddenInputEl = (ctx, value) => ctx.getById(getItemHiddenInputId(ctx, value));
-var getIndicatorEl = (ctx) => ctx.getById(getIndicatorId(ctx));
+var getIndicatorEl = (ctx) => ctx.query(ctx.selector(parts.indicator));
 var getFirstEnabledInputEl = (ctx) => getRootEl(ctx)?.querySelector("input:not(:disabled)");
 var getFirstEnabledAndCheckedInputEl = (ctx) => getRootEl(ctx)?.querySelector("input:not(:disabled):checked");
 var getInputEls = (ctx) => {
-  const selector = `input[type=radio]${getByOwnerId(getRootId(ctx))}:not([disabled])`;
-  return queryAll(getRootEl(ctx), selector);
+  return ctx.queryAll(`${ctx.selector(parts.item)} input[type=radio]:not([disabled])`);
 };
 var getRadioEl = (ctx, value) => {
   if (!value) return;

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

@@ -168,6 +168,28 @@ interface ItemState {
      */
     active: boolean;
 }
+interface RootState {
+    /**
+     * Whether the radio group is disabled
+     */
+    disabled: boolean;
+    /**
+     * Whether the radio group is invalid
+     */
+    invalid: boolean;
+    /**
+     * Whether the radio group is required
+     */
+    required: boolean;
+    /**
+     * Whether the radio group is read-only
+     */
+    readOnly: boolean;
+    /**
+     * The orientation of the radio group
+     */
+    orientation: "horizontal" | "vertical" | undefined;
+}
 interface RadioGroupApi<T extends PropTypes = PropTypes> {
     /**
      * The current value of the radio group
@@ -189,6 +211,10 @@ interface RadioGroupApi<T extends PropTypes = PropTypes> {
      * Returns the state details of a radio input
      */
     getItemState: (props: ItemProps) => ItemState;
+    /**
+     * Returns the state of the radio group
+     */
+    getRootState: () => RootState;
     getRootProps: () => T["element"];
     getLabelProps: () => T["element"];
     getItemProps: (props: ItemProps) => T["label"];
@@ -198,4 +224,4 @@ interface RadioGroupApi<T extends PropTypes = PropTypes> {
     getIndicatorProps: () => T["element"];
 }
 
-export type { ElementIds, ItemProps, ItemState, RadioGroupApi, RadioGroupMachine, RadioGroupProps, RadioGroupSchema, RadioGroupService, ValueChangeDetails };
+export type { ElementIds, ItemProps, ItemState, RadioGroupApi, RadioGroupMachine, RadioGroupProps, RadioGroupSchema, RadioGroupService, RootState, ValueChangeDetails };

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

@@ -168,6 +168,28 @@ interface ItemState {
      */
     active: boolean;
 }
+interface RootState {
+    /**
+     * Whether the radio group is disabled
+     */
+    disabled: boolean;
+    /**
+     * Whether the radio group is invalid
+     */
+    invalid: boolean;
+    /**
+     * Whether the radio group is required
+     */
+    required: boolean;
+    /**
+     * Whether the radio group is read-only
+     */
+    readOnly: boolean;
+    /**
+     * The orientation of the radio group
+     */
+    orientation: "horizontal" | "vertical" | undefined;
+}
 interface RadioGroupApi<T extends PropTypes = PropTypes> {
     /**
      * The current value of the radio group
@@ -189,6 +211,10 @@ interface RadioGroupApi<T extends PropTypes = PropTypes> {
      * Returns the state details of a radio input
      */
     getItemState: (props: ItemProps) => ItemState;
+    /**
+     * Returns the state of the radio group
+     */
+    getRootState: () => RootState;
     getRootProps: () => T["element"];
     getLabelProps: () => T["element"];
     getItemProps: (props: ItemProps) => T["label"];
@@ -198,4 +224,4 @@ interface RadioGroupApi<T extends PropTypes = PropTypes> {
     getIndicatorProps: () => T["element"];
 }
 
-export type { ElementIds, ItemProps, ItemState, RadioGroupApi, RadioGroupMachine, RadioGroupProps, RadioGroupSchema, RadioGroupService, ValueChangeDetails };
+export type { ElementIds, ItemProps, ItemState, RadioGroupApi, RadioGroupMachine, RadioGroupProps, RadioGroupSchema, RadioGroupService, RootState, ValueChangeDetails };

package/package.json

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