@zag-js/radio-group 1.6.0 → 1.6.2

package/dist/index.d.mts

@@ -134,27 +134,31 @@ interface ItemProps {
 }
 interface ItemState {
     /**
-     * Whether the radio is invalid
+     * The value of the item
+     */
+    value: string;
+    /**
+     * Whether the item is invalid
      */
     invalid: boolean;
     /**
-     * Whether the radio is disabled
+     * Whether the item is disabled
      */
     disabled: boolean;
     /**
-     * Whether the radio is checked
+     * Whether the item is checked
      */
     checked: boolean;
     /**
-     *  Whether the radio is focused
+     *  Whether the item is focused
      */
     focused: boolean;
     /**
-     * Whether the radio is hovered
+     * Whether the item is hovered
      */
     hovered: boolean;
     /**
-     * Whether the radio is active or pressed
+     * Whether the item is active or pressed
      */
     active: boolean;
 }

package/dist/index.d.ts

@@ -134,27 +134,31 @@ interface ItemProps {
 }
 interface ItemState {
     /**
-     * Whether the radio is invalid
+     * The value of the item
+     */
+    value: string;
+    /**
+     * Whether the item is invalid
      */
     invalid: boolean;
     /**
-     * Whether the radio is disabled
+     * Whether the item is disabled
      */
     disabled: boolean;
     /**
-     * Whether the radio is checked
+     * Whether the item is checked
      */
     checked: boolean;
     /**
-     *  Whether the radio is focused
+     *  Whether the item is focused
      */
     focused: boolean;
     /**
-     * Whether the radio is hovered
+     * Whether the item is hovered
      */
     hovered: boolean;
     /**
-     * Whether the radio is active or pressed
+     * Whether the item is active or pressed
      */
     active: boolean;
 }

package/dist/index.js

@@ -59,6 +59,7 @@ function connect(service, normalize) {
   const readOnly = prop("readOnly");
   function getItemState(props2) {
     return {
+      value: props2.value,
       invalid: !!props2.invalid,
       disabled: !!props2.disabled || groupDisabled,
       checked: context.get("value") === props2.value,
@@ -68,27 +69,22 @@ function connect(service, normalize) {
     };
   }
   function getItemDataAttrs(props2) {
-    const radioState = getItemState(props2);
+    const itemState = getItemState(props2);
     return {
-      "data-focus": domQuery.dataAttr(radioState.focused),
-      "data-focus-visible": domQuery.dataAttr(radioState.focused && context.get("focusVisible")),
-      "data-disabled": domQuery.dataAttr(radioState.disabled),
+      "data-focus": domQuery.dataAttr(itemState.focused),
+      "data-focus-visible": domQuery.dataAttr(itemState.focused && context.get("focusVisible")),
+      "data-disabled": domQuery.dataAttr(itemState.disabled),
       "data-readonly": domQuery.dataAttr(readOnly),
-      "data-state": radioState.checked ? "checked" : "unchecked",
-      "data-hover": domQuery.dataAttr(radioState.hovered),
-      "data-invalid": domQuery.dataAttr(radioState.invalid),
+      "data-state": itemState.checked ? "checked" : "unchecked",
+      "data-hover": domQuery.dataAttr(itemState.hovered),
+      "data-invalid": domQuery.dataAttr(itemState.invalid),
       "data-orientation": prop("orientation"),
       "data-ssr": domQuery.dataAttr(context.get("ssr"))
     };
   }
   const focus = () => {
-    const firstEnabledAndCheckedInput = getFirstEnabledAndCheckedInputEl(scope);
-    if (firstEnabledAndCheckedInput) {
-      firstEnabledAndCheckedInput.focus();
-      return;
-    }
-    const firstEnabledInput = getFirstEnabledInputEl(scope);
-    firstEnabledInput?.focus();
+    const nodeToFocus = getFirstEnabledAndCheckedInputEl(scope) ?? getFirstEnabledInputEl(scope);
+    nodeToFocus?.focus();
   };
   return {
     focus,
@@ -169,18 +165,18 @@ function connect(service, normalize) {
       });
     },
     getItemControlProps(props2) {
-      const controlState = getItemState(props2);
+      const itemState = getItemState(props2);
       return normalize.element({
         ...parts.itemControl.attrs,
         dir: prop("dir"),
         id: getItemControlId(scope, props2.value),
-        "data-active": domQuery.dataAttr(controlState.active),
+        "data-active": domQuery.dataAttr(itemState.active),
         "aria-hidden": true,
         ...getItemDataAttrs(props2)
       });
     },
     getItemHiddenInputProps(props2) {
-      const inputState = getItemState(props2);
+      const itemState = getItemState(props2);
       return normalize.input({
         "data-ownedby": getRootId(scope),
         id: getItemHiddenInputId(scope, props2.value),
@@ -216,8 +212,8 @@ function connect(service, normalize) {
             send({ type: "SET_ACTIVE", value: null });
           }
         },
-        disabled: inputState.disabled,
-        defaultChecked: inputState.checked,
+        disabled: itemState.disabled,
+        defaultChecked: itemState.checked,
         style: domQuery.visuallyHiddenStyle
       });
     },

package/dist/index.mjs

@@ -57,6 +57,7 @@ function connect(service, normalize) {
   const readOnly = prop("readOnly");
   function getItemState(props2) {
     return {
+      value: props2.value,
       invalid: !!props2.invalid,
       disabled: !!props2.disabled || groupDisabled,
       checked: context.get("value") === props2.value,
@@ -66,27 +67,22 @@ function connect(service, normalize) {
     };
   }
   function getItemDataAttrs(props2) {
-    const radioState = getItemState(props2);
+    const itemState = getItemState(props2);
     return {
-      "data-focus": dataAttr(radioState.focused),
-      "data-focus-visible": dataAttr(radioState.focused && context.get("focusVisible")),
-      "data-disabled": dataAttr(radioState.disabled),
+      "data-focus": dataAttr(itemState.focused),
+      "data-focus-visible": dataAttr(itemState.focused && context.get("focusVisible")),
+      "data-disabled": dataAttr(itemState.disabled),
       "data-readonly": dataAttr(readOnly),
-      "data-state": radioState.checked ? "checked" : "unchecked",
-      "data-hover": dataAttr(radioState.hovered),
-      "data-invalid": dataAttr(radioState.invalid),
+      "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 firstEnabledAndCheckedInput = getFirstEnabledAndCheckedInputEl(scope);
-    if (firstEnabledAndCheckedInput) {
-      firstEnabledAndCheckedInput.focus();
-      return;
-    }
-    const firstEnabledInput = getFirstEnabledInputEl(scope);
-    firstEnabledInput?.focus();
+    const nodeToFocus = getFirstEnabledAndCheckedInputEl(scope) ?? getFirstEnabledInputEl(scope);
+    nodeToFocus?.focus();
   };
   return {
     focus,
@@ -167,18 +163,18 @@ function connect(service, normalize) {
       });
     },
     getItemControlProps(props2) {
-      const controlState = getItemState(props2);
+      const itemState = getItemState(props2);
       return normalize.element({
         ...parts.itemControl.attrs,
         dir: prop("dir"),
         id: getItemControlId(scope, props2.value),
-        "data-active": dataAttr(controlState.active),
+        "data-active": dataAttr(itemState.active),
         "aria-hidden": true,
         ...getItemDataAttrs(props2)
       });
     },
     getItemHiddenInputProps(props2) {
-      const inputState = getItemState(props2);
+      const itemState = getItemState(props2);
       return normalize.input({
         "data-ownedby": getRootId(scope),
         id: getItemHiddenInputId(scope, props2.value),
@@ -214,8 +210,8 @@ function connect(service, normalize) {
             send({ type: "SET_ACTIVE", value: null });
           }
         },
-        disabled: inputState.disabled,
-        defaultChecked: inputState.checked,
+        disabled: itemState.disabled,
+        defaultChecked: itemState.checked,
         style: visuallyHiddenStyle
       });
     },

package/package.json

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