@zag-js/radio-group 1.41.1 → 2.0.0-next.0

package/dist/radio-group.connect.js

@@ -84,9 +84,8 @@ function connect(service, normalize) {
     },
     getRootProps() {
       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,
@@ -104,7 +103,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 +117,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 +152,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 +161,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 +171,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 +216,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

@@ -50,9 +50,8 @@ function connect(service, normalize) {
     },
     getRootProps() {
       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,
@@ -70,7 +69,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 +83,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 +118,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 +127,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 +137,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 +182,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,23 +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 ownerId = CSS.escape(getRootId(ctx));
-  const selector = `input[type=radio][data-ownedby='${ownerId}']: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,21 +1,19 @@
 // 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));
+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 ownerId = CSS.escape(getRootId(ctx));
-  const selector = `input[type=radio][data-ownedby='${ownerId}']: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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@zag-js/radio-group",
-  "version": "1.41.1",
+  "version": "2.0.0-next.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.41.1",
-    "@zag-js/focus-visible": "1.41.1",
-    "@zag-js/utils": "1.41.1",
-    "@zag-js/core": "1.41.1",
-    "@zag-js/dom-query": "1.41.1",
-    "@zag-js/types": "1.41.1"
+    "@zag-js/anatomy": "2.0.0-next.0",
+    "@zag-js/dom-query": "2.0.0-next.0",
+    "@zag-js/focus-visible": "2.0.0-next.0",
+    "@zag-js/utils": "2.0.0-next.0",
+    "@zag-js/core": "2.0.0-next.0",
+    "@zag-js/types": "2.0.0-next.0"
   },
   "devDependencies": {
     "clean-package": "2.2.0"