@zag-js/radio-group 0.53.0 → 0.54.0

package/src/radio-group.connect.ts

@@ -53,32 +53,37 @@ export function connect<T extends PropTypes>(state: State, send: Send, normalize
     clearValue() {
       send({ type: "SET_VALUE", value: null, isTrusted: false })
     },
-    getItemState,
 
-    rootProps: normalize.element({
-      ...parts.root.attrs,
-      role: "radiogroup",
-      id: dom.getRootId(state.context),
-      "aria-labelledby": dom.getLabelId(state.context),
-      "data-orientation": state.context.orientation,
-      "data-disabled": dataAttr(groupDisabled),
-      "aria-orientation": state.context.orientation,
-      dir: state.context.dir,
-      style: {
-        position: "relative",
-      },
-    }),
-
-    labelProps: normalize.element({
-      ...parts.label.attrs,
-      dir: state.context.dir,
-      "data-orientation": state.context.orientation,
-      "data-disabled": dataAttr(groupDisabled),
-      id: dom.getLabelId(state.context),
-      onClick: focus,
-    }),
+    getRootProps() {
+      return normalize.element({
+        ...parts.root.attrs,
+        role: "radiogroup",
+        id: dom.getRootId(state.context),
+        "aria-labelledby": dom.getLabelId(state.context),
+        "data-orientation": state.context.orientation,
+        "data-disabled": dataAttr(groupDisabled),
+        "aria-orientation": state.context.orientation,
+        dir: state.context.dir,
+        style: {
+          position: "relative",
+        },
+      })
+    },
 
-    getItemProps(props: ItemProps) {
+    getLabelProps() {
+      return normalize.element({
+        ...parts.label.attrs,
+        dir: state.context.dir,
+        "data-orientation": state.context.orientation,
+        "data-disabled": dataAttr(groupDisabled),
+        id: dom.getLabelId(state.context),
+        onClick: focus,
+      })
+    },
+
+    getItemState,
+
+    getItemProps(props) {
       const itemState = getItemState(props)
 
       return normalize.label({
@@ -112,7 +117,7 @@ export function connect<T extends PropTypes>(state: State, send: Send, normalize
       })
     },
 
-    getItemTextProps(props: ItemProps) {
+    getItemTextProps(props) {
       return normalize.element({
         ...parts.itemText.attrs,
         dir: state.context.dir,
@@ -121,7 +126,7 @@ export function connect<T extends PropTypes>(state: State, send: Send, normalize
       })
     },
 
-    getItemControlProps(props: ItemProps) {
+    getItemControlProps(props) {
       const controlState = getItemState(props)
 
       return normalize.element({
@@ -134,7 +139,7 @@ export function connect<T extends PropTypes>(state: State, send: Send, normalize
       })
     },
 
-    getItemHiddenInputProps(props: ItemProps) {
+    getItemHiddenInputProps(props) {
       const inputState = getItemState(props)
 
       return normalize.input({
@@ -178,27 +183,29 @@ export function connect<T extends PropTypes>(state: State, send: Send, normalize
       })
     },
 
-    indicatorProps: normalize.element({
-      id: dom.getIndicatorId(state.context),
-      ...parts.indicator.attrs,
-      dir: state.context.dir,
-      hidden: state.context.value == null,
-      "data-disabled": dataAttr(groupDisabled),
-      "data-orientation": state.context.orientation,
-      style: {
-        "--transition-property": "left, top, width, height",
-        "--left": state.context.indicatorRect?.left,
-        "--top": state.context.indicatorRect?.top,
-        "--width": state.context.indicatorRect?.width,
-        "--height": state.context.indicatorRect?.height,
-        position: "absolute",
-        willChange: "var(--transition-property)",
-        transitionProperty: "var(--transition-property)",
-        transitionDuration: state.context.canIndicatorTransition ? "var(--transition-duration, 150ms)" : "0ms",
-        transitionTimingFunction: "var(--transition-timing-function)",
-        [state.context.orientation === "horizontal" ? "left" : "top"]:
-          state.context.orientation === "horizontal" ? "var(--left)" : "var(--top)",
-      },
-    }),
+    getIndicatorProps() {
+      return normalize.element({
+        id: dom.getIndicatorId(state.context),
+        ...parts.indicator.attrs,
+        dir: state.context.dir,
+        hidden: state.context.value == null,
+        "data-disabled": dataAttr(groupDisabled),
+        "data-orientation": state.context.orientation,
+        style: {
+          "--transition-property": "left, top, width, height",
+          "--left": state.context.indicatorRect?.left,
+          "--top": state.context.indicatorRect?.top,
+          "--width": state.context.indicatorRect?.width,
+          "--height": state.context.indicatorRect?.height,
+          position: "absolute",
+          willChange: "var(--transition-property)",
+          transitionProperty: "var(--transition-property)",
+          transitionDuration: state.context.canIndicatorTransition ? "var(--transition-duration, 150ms)" : "0ms",
+          transitionTimingFunction: "var(--transition-timing-function)",
+          [state.context.orientation === "horizontal" ? "left" : "top"]:
+            state.context.orientation === "horizontal" ? "var(--left)" : "var(--top)",
+        },
+      })
+    },
   }
 }

package/src/radio-group.types.ts

@@ -177,11 +177,11 @@ export interface MachineApi<T extends PropTypes = PropTypes> {
    */
   getItemState(props: ItemProps): ItemState
 
-  rootProps: T["element"]
-  labelProps: T["element"]
+  getRootProps(): T["element"]
+  getLabelProps(): T["element"]
   getItemProps(props: ItemProps): T["label"]
   getItemTextProps(props: ItemProps): T["element"]
   getItemControlProps(props: ItemProps): T["element"]
   getItemHiddenInputProps(props: ItemProps): T["input"]
-  indicatorProps: T["element"]
+  getIndicatorProps(): T["element"]
 }