@zag-js/radio-group 1.29.1 → 1.31.0

package/dist/index.d.mts

@@ -45,7 +45,15 @@ interface RadioGroupProps extends DirectionProperty, CommonProperties {
      */
     disabled?: boolean | undefined;
     /**
-     * Whether the checkbox is read-only
+     * If `true`, the radio group is marked as invalid.
+     */
+    invalid?: boolean | undefined;
+    /**
+     * If `true`, the radio group is marked as required.
+     */
+    required?: boolean | undefined;
+    /**
+     * Whether the radio group is read-only
      */
     readOnly?: boolean | undefined;
     /**

package/dist/index.d.ts

@@ -45,7 +45,15 @@ interface RadioGroupProps extends DirectionProperty, CommonProperties {
      */
     disabled?: boolean | undefined;
     /**
-     * Whether the checkbox is read-only
+     * If `true`, the radio group is marked as invalid.
+     */
+    invalid?: boolean | undefined;
+    /**
+     * If `true`, the radio group is marked as required.
+     */
+    required?: boolean | undefined;
+    /**
+     * Whether the radio group is read-only
      */
     readOnly?: boolean | undefined;
     /**

package/dist/index.js

@@ -49,11 +49,12 @@ var getOffsetRect = (el) => ({
 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(props2) {
     return {
       value: props2.value,
-      invalid: !!props2.invalid,
+      invalid: !!props2.invalid || !!groupInvalid,
       disabled: !!props2.disabled || groupDisabled,
       checked: context.get("value") === props2.value,
       focused: context.get("focusedValue") === props2.value,
@@ -95,8 +96,13 @@ function connect(service, normalize) {
         role: "radiogroup",
         id: getRootId(scope),
         "aria-labelledby": getLabelId(scope),
+        "aria-required": prop("required") || void 0,
+        "aria-disabled": groupDisabled || void 0,
+        "aria-readonly": readOnly || void 0,
         "data-orientation": prop("orientation"),
         "data-disabled": domQuery.dataAttr(groupDisabled),
+        "data-invalid": domQuery.dataAttr(groupInvalid),
+        "data-required": domQuery.dataAttr(prop("required")),
         "aria-orientation": prop("orientation"),
         dir: prop("dir"),
         style: {
@@ -110,6 +116,8 @@ function connect(service, normalize) {
         dir: prop("dir"),
         "data-orientation": prop("orientation"),
         "data-disabled": domQuery.dataAttr(groupDisabled),
+        "data-invalid": domQuery.dataAttr(groupInvalid),
+        "data-required": domQuery.dataAttr(prop("required")),
         id: getLabelId(scope),
         onClick: focus
       });
@@ -179,6 +187,8 @@ function connect(service, normalize) {
         name: prop("name") || prop("id"),
         form: prop("form"),
         value: props2.value,
+        required: prop("required"),
+        "aria-invalid": itemState.invalid || void 0,
         onClick(event) {
           if (readOnly) {
             event.preventDefault();
@@ -214,11 +224,12 @@ function connect(service, normalize) {
     },
     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: getIndicatorId(scope),
         ...parts.indicator.attrs,
         dir: prop("dir"),
-        hidden: context.get("value") == null || rect == null,
+        hidden: context.get("value") == null || rectIsEmpty,
         "data-disabled": domQuery.dataAttr(groupDisabled),
         "data-orientation": prop("orientation"),
         style: {
@@ -401,10 +412,12 @@ var props = types.createProps()([
   "getRootNode",
   "id",
   "ids",
+  "invalid",
   "name",
   "onValueChange",
   "orientation",
   "readOnly",
+  "required",
   "value",
   "defaultValue"
 ]);

package/dist/index.mjs

@@ -47,11 +47,12 @@ var getOffsetRect = (el) => ({
 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(props2) {
     return {
       value: props2.value,
-      invalid: !!props2.invalid,
+      invalid: !!props2.invalid || !!groupInvalid,
       disabled: !!props2.disabled || groupDisabled,
       checked: context.get("value") === props2.value,
       focused: context.get("focusedValue") === props2.value,
@@ -93,8 +94,13 @@ function connect(service, normalize) {
         role: "radiogroup",
         id: getRootId(scope),
         "aria-labelledby": 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: {
@@ -108,6 +114,8 @@ function connect(service, normalize) {
         dir: prop("dir"),
         "data-orientation": prop("orientation"),
         "data-disabled": dataAttr(groupDisabled),
+        "data-invalid": dataAttr(groupInvalid),
+        "data-required": dataAttr(prop("required")),
         id: getLabelId(scope),
         onClick: focus
       });
@@ -177,6 +185,8 @@ function connect(service, normalize) {
         name: prop("name") || prop("id"),
         form: prop("form"),
         value: props2.value,
+        required: prop("required"),
+        "aria-invalid": itemState.invalid || void 0,
         onClick(event) {
           if (readOnly) {
             event.preventDefault();
@@ -212,11 +222,12 @@ function connect(service, normalize) {
     },
     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: getIndicatorId(scope),
         ...parts.indicator.attrs,
         dir: prop("dir"),
-        hidden: context.get("value") == null || rect == null,
+        hidden: context.get("value") == null || rectIsEmpty,
         "data-disabled": dataAttr(groupDisabled),
         "data-orientation": prop("orientation"),
         style: {
@@ -399,10 +410,12 @@ var props = createProps()([
   "getRootNode",
   "id",
   "ids",
+  "invalid",
   "name",
   "onValueChange",
   "orientation",
   "readOnly",
+  "required",
   "value",
   "defaultValue"
 ]);

package/package.json

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