@zag-js/radio-group 0.53.0 → 0.55.0

package/dist/index.d.mts

@@ -122,21 +122,21 @@ interface MachineApi<T extends PropTypes = PropTypes> {
      * Returns the state details of a radio input
      */
     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"];
 }
 
 declare function connect<T extends PropTypes>(state: State, send: Send, normalize: NormalizeProps<T>): MachineApi<T>;
 
 declare function machine(userContext: UserDefinedContext): _zag_js_core.Machine<MachineContext, MachineState, _zag_js_core.StateMachine.AnyEventObject>;
 
-declare const props: ("value" | "dir" | "id" | "getRootNode" | "form" | "name" | "disabled" | "orientation" | "ids" | "readOnly" | "onValueChange")[];
-declare const splitProps: <Props extends Partial<UserDefinedContext>>(props: Props) => [Partial<UserDefinedContext>, Omit<Props, "value" | "dir" | "id" | "getRootNode" | "form" | "name" | "disabled" | "orientation" | "ids" | "readOnly" | "onValueChange">];
+declare const props: ("form" | "value" | "dir" | "id" | "getRootNode" | "name" | "disabled" | "orientation" | "ids" | "readOnly" | "onValueChange")[];
+declare const splitProps: <Props extends Partial<UserDefinedContext>>(props: Props) => [Partial<UserDefinedContext>, Omit<Props, "form" | "value" | "dir" | "id" | "getRootNode" | "name" | "disabled" | "orientation" | "ids" | "readOnly" | "onValueChange">];
 declare const itemProps: (keyof ItemProps)[];
 declare const splitItemProps: <Props extends ItemProps>(props: Props) => [ItemProps, Omit<Props, keyof ItemProps>];
 

package/dist/index.d.ts

@@ -122,21 +122,21 @@ interface MachineApi<T extends PropTypes = PropTypes> {
      * Returns the state details of a radio input
      */
     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"];
 }
 
 declare function connect<T extends PropTypes>(state: State, send: Send, normalize: NormalizeProps<T>): MachineApi<T>;
 
 declare function machine(userContext: UserDefinedContext): _zag_js_core.Machine<MachineContext, MachineState, _zag_js_core.StateMachine.AnyEventObject>;
 
-declare const props: ("value" | "dir" | "id" | "getRootNode" | "form" | "name" | "disabled" | "orientation" | "ids" | "readOnly" | "onValueChange")[];
-declare const splitProps: <Props extends Partial<UserDefinedContext>>(props: Props) => [Partial<UserDefinedContext>, Omit<Props, "value" | "dir" | "id" | "getRootNode" | "form" | "name" | "disabled" | "orientation" | "ids" | "readOnly" | "onValueChange">];
+declare const props: ("form" | "value" | "dir" | "id" | "getRootNode" | "name" | "disabled" | "orientation" | "ids" | "readOnly" | "onValueChange")[];
+declare const splitProps: <Props extends Partial<UserDefinedContext>>(props: Props) => [Partial<UserDefinedContext>, Omit<Props, "form" | "value" | "dir" | "id" | "getRootNode" | "name" | "disabled" | "orientation" | "ids" | "readOnly" | "onValueChange">];
 declare const itemProps: (keyof ItemProps)[];
 declare const splitItemProps: <Props extends ItemProps>(props: Props) => [ItemProps, Omit<Props, keyof ItemProps>];
 

package/dist/index.js

@@ -1,2 +1,465 @@
-"use strict";var __defProp=Object.defineProperty;var __getOwnPropDesc=Object.getOwnPropertyDescriptor;var __getOwnPropNames=Object.getOwnPropertyNames;var __hasOwnProp=Object.prototype.hasOwnProperty;var __export=(target,all)=>{for(var name in all)__defProp(target,name,{get:all[name],enumerable:true})};var __copyProps=(to,from,except,desc)=>{if(from&&typeof from==="object"||typeof from==="function"){for(let key of __getOwnPropNames(from))if(!__hasOwnProp.call(to,key)&&key!==except)__defProp(to,key,{get:()=>from[key],enumerable:!(desc=__getOwnPropDesc(from,key))||desc.enumerable})}return to};var __toCommonJS=mod=>__copyProps(__defProp({},"__esModule",{value:true}),mod);var src_exports={};__export(src_exports,{anatomy:()=>anatomy,connect:()=>connect,itemProps:()=>itemProps,machine:()=>machine,props:()=>props,splitItemProps:()=>splitItemProps,splitProps:()=>splitProps});module.exports=__toCommonJS(src_exports);var import_anatomy=require("@zag-js/anatomy");var anatomy=(0,import_anatomy.createAnatomy)("radio-group").parts("root","label","item","itemText","itemControl","indicator");var parts=anatomy.build();var import_dom_query2=require("@zag-js/dom-query");var import_dom_query=require("@zag-js/dom-query");var dom=(0,import_dom_query.createScope)({getRootId:ctx=>ctx.ids?.root??`radio-group:${ctx.id}`,getLabelId:ctx=>ctx.ids?.label??`radio-group:${ctx.id}:label`,getItemId:(ctx,value)=>ctx.ids?.item?.(value)??`radio-group:${ctx.id}:radio:${value}`,getItemHiddenInputId:(ctx,value)=>ctx.ids?.itemHiddenInput?.(value)??`radio-group:${ctx.id}:radio:input:${value}`,getItemControlId:(ctx,value)=>ctx.ids?.itemControl?.(value)??`radio-group:${ctx.id}:radio:control:${value}`,getItemLabelId:(ctx,value)=>ctx.ids?.itemLabel?.(value)??`radio-group:${ctx.id}:radio:label:${value}`,getIndicatorId:ctx=>ctx.ids?.indicator??`radio-group:${ctx.id}:indicator`,getRootEl:ctx=>dom.getById(ctx,dom.getRootId(ctx)),getItemHiddenInputEl:(ctx,value)=>dom.getById(ctx,dom.getItemHiddenInputId(ctx,value)),getIndicatorEl:ctx=>dom.getById(ctx,dom.getIndicatorId(ctx)),getFirstEnabledInputEl:ctx=>dom.getRootEl(ctx)?.querySelector("input:not(:disabled)"),getFirstEnabledAndCheckedInputEl:ctx=>dom.getRootEl(ctx)?.querySelector("input:not(:disabled):checked"),getInputEls:ctx=>{const ownerId=CSS.escape(dom.getRootId(ctx));const selector=`input[type=radio][data-ownedby='${ownerId}']:not([disabled])`;return(0,import_dom_query.queryAll)(dom.getRootEl(ctx),selector)},getActiveRadioEl:ctx=>{if(!ctx.value)return;return dom.getById(ctx,dom.getItemId(ctx,ctx.value))},getOffsetRect:el=>({left:el?.offsetLeft??0,top:el?.offsetTop??0,width:el?.offsetWidth??0,height:el?.offsetHeight??0}),getRectById:(ctx,id)=>{const radioEl=dom.getById(ctx,dom.getItemId(ctx,id));if(!radioEl)return;return dom.resolveRect(dom.getOffsetRect(radioEl))},resolveRect:rect=>({width:`${rect.width}px`,height:`${rect.height}px`,left:`${rect.left}px`,top:`${rect.top}px`})});function connect(state,send,normalize){const groupDisabled=state.context.isDisabled;const readOnly=state.context.readOnly;function getItemState(props2){return{invalid:!!props2.invalid,disabled:!!props2.disabled||groupDisabled,checked:state.context.value===props2.value,focused:state.context.focusedValue===props2.value,hovered:state.context.hoveredValue===props2.value,active:state.context.activeValue===props2.value}}function getItemDataAttrs(props2){const radioState=getItemState(props2);return{"data-focus":(0,import_dom_query2.dataAttr)(radioState.focused),"data-disabled":(0,import_dom_query2.dataAttr)(radioState.disabled),"dats-readonly":(0,import_dom_query2.dataAttr)(readOnly),"data-state":radioState.checked?"checked":"unchecked","data-hover":(0,import_dom_query2.dataAttr)(radioState.hovered),"data-invalid":(0,import_dom_query2.dataAttr)(radioState.invalid),"data-orientation":state.context.orientation}}const focus=()=>{const firstEnabledAndCheckedInput=dom.getFirstEnabledAndCheckedInputEl(state.context);if(firstEnabledAndCheckedInput){firstEnabledAndCheckedInput.focus();return}const firstEnabledInput=dom.getFirstEnabledInputEl(state.context);firstEnabledInput?.focus()};return{focus,value:state.context.value,setValue(value){send({type:"SET_VALUE",value,isTrusted:false})},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":(0,import_dom_query2.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":(0,import_dom_query2.dataAttr)(groupDisabled),id:dom.getLabelId(state.context),onClick:focus}),getItemProps(props2){const itemState=getItemState(props2);return normalize.label({...parts.item.attrs,dir:state.context.dir,id:dom.getItemId(state.context,props2.value),htmlFor:dom.getItemHiddenInputId(state.context,props2.value),...getItemDataAttrs(props2),onPointerMove(){if(itemState.disabled)return;if(itemState.hovered)return;send({type:"SET_HOVERED",value:props2.value,hovered:true})},onPointerLeave(){if(itemState.disabled)return;send({type:"SET_HOVERED",value:null})},onPointerDown(event){if(itemState.disabled)return;if(itemState.focused&&event.pointerType==="mouse"){event.preventDefault()}send({type:"SET_ACTIVE",value:props2.value,active:true})},onPointerUp(){if(itemState.disabled)return;send({type:"SET_ACTIVE",value:null})}})},getItemTextProps(props2){return normalize.element({...parts.itemText.attrs,dir:state.context.dir,id:dom.getItemLabelId(state.context,props2.value),...getItemDataAttrs(props2)})},getItemControlProps(props2){const controlState=getItemState(props2);return normalize.element({...parts.itemControl.attrs,dir:state.context.dir,id:dom.getItemControlId(state.context,props2.value),"data-active":(0,import_dom_query2.dataAttr)(controlState.active),"aria-hidden":true,...getItemDataAttrs(props2)})},getItemHiddenInputProps(props2){const inputState=getItemState(props2);return normalize.input({"data-ownedby":dom.getRootId(state.context),id:dom.getItemHiddenInputId(state.context,props2.value),type:"radio",name:state.context.name||state.context.id,form:state.context.form,value:props2.value,onChange(event){if(readOnly){event.preventDefault();return}if(event.target.checked){send({type:"SET_VALUE",value:props2.value,isTrusted:true})}},onBlur(){send({type:"SET_FOCUSED",value:null})},onFocus(){send({type:"SET_FOCUSED",value:props2.value,focused:true})},onKeyDown(event){if(event.defaultPrevented)return;if(event.key===" "){send({type:"SET_ACTIVE",value:props2.value,active:true})}},onKeyUp(event){if(event.defaultPrevented)return;if(event.key===" "){send({type:"SET_ACTIVE",value:null})}},disabled:inputState.disabled,defaultChecked:inputState.checked,style:import_dom_query2.visuallyHiddenStyle})},indicatorProps:normalize.element({id:dom.getIndicatorId(state.context),...parts.indicator.attrs,dir:state.context.dir,hidden:state.context.value==null,"data-disabled":(0,import_dom_query2.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)"}})}}var import_core=require("@zag-js/core");var import_dom_query3=require("@zag-js/dom-query");var import_element_rect=require("@zag-js/element-rect");var import_form_utils=require("@zag-js/form-utils");var import_utils=require("@zag-js/utils");var{not}=import_core.guards;function machine(userContext){const ctx=(0,import_utils.compact)(userContext);return(0,import_core.createMachine)({id:"radio",initial:"idle",context:{value:null,activeValue:null,focusedValue:null,hoveredValue:null,disabled:false,orientation:"vertical",...ctx,indicatorRect:{},canIndicatorTransition:false,fieldsetDisabled:false},computed:{isDisabled:ctx2=>!!ctx2.disabled||ctx2.fieldsetDisabled},entry:["syncIndicatorRect"],exit:["cleanupObserver"],activities:["trackFormControlState"],watch:{value:["setIndicatorTransition","syncIndicatorRect","syncInputElements"]},on:{SET_VALUE:[{guard:not("isTrusted"),actions:["setValue","dispatchChangeEvent"]},{actions:["setValue"]}],SET_HOVERED:{actions:"setHovered"},SET_ACTIVE:{actions:"setActive"},SET_FOCUSED:{actions:"setFocused"}},states:{idle:{}}},{guards:{isTrusted:(_ctx,evt)=>!!evt.isTrusted},activities:{trackFormControlState(ctx2,_evt,{send,initialContext}){return(0,import_form_utils.trackFormControl)(dom.getRootEl(ctx2),{onFieldsetDisabledChange(disabled){ctx2.fieldsetDisabled=disabled},onFormReset(){send({type:"SET_VALUE",value:initialContext.value})}})}},actions:{setValue(ctx2,evt){set.value(ctx2,evt.value)},setHovered(ctx2,evt){ctx2.hoveredValue=evt.value},setActive(ctx2,evt){ctx2.activeValue=evt.value},setFocused(ctx2,evt){ctx2.focusedValue=evt.value},syncInputElements(ctx2){const inputs=dom.getInputEls(ctx2);inputs.forEach(input=>{input.checked=input.value===ctx2.value})},setIndicatorTransition(ctx2){ctx2.canIndicatorTransition=(0,import_utils.isString)(ctx2.value)},cleanupObserver(ctx2){ctx2.indicatorCleanup?.()},syncIndicatorRect(ctx2){ctx2.indicatorCleanup?.();if(!dom.getIndicatorEl(ctx2))return;const value=ctx2.value;const radioEl=dom.getActiveRadioEl(ctx2);if(value==null||!radioEl){ctx2.indicatorRect={};return}ctx2.indicatorCleanup=(0,import_element_rect.trackElementRect)(radioEl,{getRect(el){return dom.getOffsetRect(el)},onChange(rect){ctx2.indicatorRect=dom.resolveRect(rect);(0,import_dom_query3.nextTick)(()=>{ctx2.canIndicatorTransition=false})}})},dispatchChangeEvent(ctx2){const inputEls=dom.getInputEls(ctx2);inputEls.forEach(inputEl=>{const checked=inputEl.value===ctx2.value;if(checked===inputEl.checked)return;(0,import_form_utils.dispatchInputCheckedEvent)(inputEl,{checked})})}}})}var invoke={change:ctx=>{if(ctx.value==null)return;ctx.onValueChange?.({value:ctx.value})}};var set={value:(ctx,value)=>{if((0,import_utils.isEqual)(ctx.value,value))return;ctx.value=value;invoke.change(ctx)}};var import_types=require("@zag-js/types");var import_utils2=require("@zag-js/utils");var props=(0,import_types.createProps)()(["dir","disabled","form","getRootNode","id","ids","name","onValueChange","orientation","readOnly","value"]);var splitProps=(0,import_utils2.createSplitProps)(props);var itemProps=(0,import_types.createProps)()(["value","disabled","invalid"]);var splitItemProps=(0,import_utils2.createSplitProps)(itemProps);0&&(module.exports={anatomy,connect,itemProps,machine,props,splitItemProps,splitProps});
+"use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/index.ts
+var src_exports = {};
+__export(src_exports, {
+  anatomy: () => anatomy,
+  connect: () => connect,
+  itemProps: () => itemProps,
+  machine: () => machine,
+  props: () => props,
+  splitItemProps: () => splitItemProps,
+  splitProps: () => splitProps
+});
+module.exports = __toCommonJS(src_exports);
+
+// src/radio-group.anatomy.ts
+var import_anatomy = require("@zag-js/anatomy");
+var anatomy = (0, import_anatomy.createAnatomy)("radio-group").parts(
+  "root",
+  "label",
+  "item",
+  "itemText",
+  "itemControl",
+  "indicator"
+);
+var parts = anatomy.build();
+
+// src/radio-group.connect.ts
+var import_dom_query2 = require("@zag-js/dom-query");
+
+// src/radio-group.dom.ts
+var import_dom_query = require("@zag-js/dom-query");
+var dom = (0, import_dom_query.createScope)({
+  getRootId: (ctx) => ctx.ids?.root ?? `radio-group:${ctx.id}`,
+  getLabelId: (ctx) => ctx.ids?.label ?? `radio-group:${ctx.id}:label`,
+  getItemId: (ctx, value) => ctx.ids?.item?.(value) ?? `radio-group:${ctx.id}:radio:${value}`,
+  getItemHiddenInputId: (ctx, value) => ctx.ids?.itemHiddenInput?.(value) ?? `radio-group:${ctx.id}:radio:input:${value}`,
+  getItemControlId: (ctx, value) => ctx.ids?.itemControl?.(value) ?? `radio-group:${ctx.id}:radio:control:${value}`,
+  getItemLabelId: (ctx, value) => ctx.ids?.itemLabel?.(value) ?? `radio-group:${ctx.id}:radio:label:${value}`,
+  getIndicatorId: (ctx) => ctx.ids?.indicator ?? `radio-group:${ctx.id}:indicator`,
+  getRootEl: (ctx) => dom.getById(ctx, dom.getRootId(ctx)),
+  getItemHiddenInputEl: (ctx, value) => dom.getById(ctx, dom.getItemHiddenInputId(ctx, value)),
+  getIndicatorEl: (ctx) => dom.getById(ctx, dom.getIndicatorId(ctx)),
+  getFirstEnabledInputEl: (ctx) => dom.getRootEl(ctx)?.querySelector("input:not(:disabled)"),
+  getFirstEnabledAndCheckedInputEl: (ctx) => dom.getRootEl(ctx)?.querySelector("input:not(:disabled):checked"),
+  getInputEls: (ctx) => {
+    const ownerId = CSS.escape(dom.getRootId(ctx));
+    const selector = `input[type=radio][data-ownedby='${ownerId}']:not([disabled])`;
+    return (0, import_dom_query.queryAll)(dom.getRootEl(ctx), selector);
+  },
+  getActiveRadioEl: (ctx) => {
+    if (!ctx.value)
+      return;
+    return dom.getById(ctx, dom.getItemId(ctx, ctx.value));
+  },
+  getOffsetRect: (el) => ({
+    left: el?.offsetLeft ?? 0,
+    top: el?.offsetTop ?? 0,
+    width: el?.offsetWidth ?? 0,
+    height: el?.offsetHeight ?? 0
+  }),
+  getRectById: (ctx, id) => {
+    const radioEl = dom.getById(ctx, dom.getItemId(ctx, id));
+    if (!radioEl)
+      return;
+    return dom.resolveRect(dom.getOffsetRect(radioEl));
+  },
+  resolveRect: (rect) => ({
+    width: `${rect.width}px`,
+    height: `${rect.height}px`,
+    left: `${rect.left}px`,
+    top: `${rect.top}px`
+  })
+});
+
+// src/radio-group.connect.ts
+function connect(state, send, normalize) {
+  const groupDisabled = state.context.isDisabled;
+  const readOnly = state.context.readOnly;
+  function getItemState(props2) {
+    return {
+      invalid: !!props2.invalid,
+      disabled: !!props2.disabled || groupDisabled,
+      checked: state.context.value === props2.value,
+      focused: state.context.focusedValue === props2.value,
+      hovered: state.context.hoveredValue === props2.value,
+      active: state.context.activeValue === props2.value
+    };
+  }
+  function getItemDataAttrs(props2) {
+    const radioState = getItemState(props2);
+    return {
+      "data-focus": (0, import_dom_query2.dataAttr)(radioState.focused),
+      "data-disabled": (0, import_dom_query2.dataAttr)(radioState.disabled),
+      "dats-readonly": (0, import_dom_query2.dataAttr)(readOnly),
+      "data-state": radioState.checked ? "checked" : "unchecked",
+      "data-hover": (0, import_dom_query2.dataAttr)(radioState.hovered),
+      "data-invalid": (0, import_dom_query2.dataAttr)(radioState.invalid),
+      "data-orientation": state.context.orientation
+    };
+  }
+  const focus = () => {
+    const firstEnabledAndCheckedInput = dom.getFirstEnabledAndCheckedInputEl(state.context);
+    if (firstEnabledAndCheckedInput) {
+      firstEnabledAndCheckedInput.focus();
+      return;
+    }
+    const firstEnabledInput = dom.getFirstEnabledInputEl(state.context);
+    firstEnabledInput?.focus();
+  };
+  return {
+    focus,
+    value: state.context.value,
+    setValue(value) {
+      send({ type: "SET_VALUE", value, isTrusted: false });
+    },
+    clearValue() {
+      send({ type: "SET_VALUE", value: null, isTrusted: false });
+    },
+    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": (0, import_dom_query2.dataAttr)(groupDisabled),
+        "aria-orientation": state.context.orientation,
+        dir: state.context.dir,
+        style: {
+          position: "relative"
+        }
+      });
+    },
+    getLabelProps() {
+      return normalize.element({
+        ...parts.label.attrs,
+        dir: state.context.dir,
+        "data-orientation": state.context.orientation,
+        "data-disabled": (0, import_dom_query2.dataAttr)(groupDisabled),
+        id: dom.getLabelId(state.context),
+        onClick: focus
+      });
+    },
+    getItemState,
+    getItemProps(props2) {
+      const itemState = getItemState(props2);
+      return normalize.label({
+        ...parts.item.attrs,
+        dir: state.context.dir,
+        id: dom.getItemId(state.context, props2.value),
+        htmlFor: dom.getItemHiddenInputId(state.context, props2.value),
+        ...getItemDataAttrs(props2),
+        onPointerMove() {
+          if (itemState.disabled)
+            return;
+          if (itemState.hovered)
+            return;
+          send({ type: "SET_HOVERED", value: props2.value, hovered: true });
+        },
+        onPointerLeave() {
+          if (itemState.disabled)
+            return;
+          send({ type: "SET_HOVERED", value: null });
+        },
+        onPointerDown(event) {
+          if (itemState.disabled)
+            return;
+          if (itemState.focused && event.pointerType === "mouse") {
+            event.preventDefault();
+          }
+          send({ type: "SET_ACTIVE", value: props2.value, active: true });
+        },
+        onPointerUp() {
+          if (itemState.disabled)
+            return;
+          send({ type: "SET_ACTIVE", value: null });
+        }
+      });
+    },
+    getItemTextProps(props2) {
+      return normalize.element({
+        ...parts.itemText.attrs,
+        dir: state.context.dir,
+        id: dom.getItemLabelId(state.context, props2.value),
+        ...getItemDataAttrs(props2)
+      });
+    },
+    getItemControlProps(props2) {
+      const controlState = getItemState(props2);
+      return normalize.element({
+        ...parts.itemControl.attrs,
+        dir: state.context.dir,
+        id: dom.getItemControlId(state.context, props2.value),
+        "data-active": (0, import_dom_query2.dataAttr)(controlState.active),
+        "aria-hidden": true,
+        ...getItemDataAttrs(props2)
+      });
+    },
+    getItemHiddenInputProps(props2) {
+      const inputState = getItemState(props2);
+      return normalize.input({
+        "data-ownedby": dom.getRootId(state.context),
+        id: dom.getItemHiddenInputId(state.context, props2.value),
+        type: "radio",
+        name: state.context.name || state.context.id,
+        form: state.context.form,
+        value: props2.value,
+        onChange(event) {
+          if (readOnly) {
+            event.preventDefault();
+            return;
+          }
+          if (event.target.checked) {
+            send({ type: "SET_VALUE", value: props2.value, isTrusted: true });
+          }
+        },
+        onBlur() {
+          send({ type: "SET_FOCUSED", value: null });
+        },
+        onFocus() {
+          send({ type: "SET_FOCUSED", value: props2.value, focused: true });
+        },
+        onKeyDown(event) {
+          if (event.defaultPrevented)
+            return;
+          if (event.key === " ") {
+            send({ type: "SET_ACTIVE", value: props2.value, active: true });
+          }
+        },
+        onKeyUp(event) {
+          if (event.defaultPrevented)
+            return;
+          if (event.key === " ") {
+            send({ type: "SET_ACTIVE", value: null });
+          }
+        },
+        disabled: inputState.disabled,
+        defaultChecked: inputState.checked,
+        style: import_dom_query2.visuallyHiddenStyle
+      });
+    },
+    getIndicatorProps() {
+      return normalize.element({
+        id: dom.getIndicatorId(state.context),
+        ...parts.indicator.attrs,
+        dir: state.context.dir,
+        hidden: state.context.value == null,
+        "data-disabled": (0, import_dom_query2.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)"
+        }
+      });
+    }
+  };
+}
+
+// src/radio-group.machine.ts
+var import_core = require("@zag-js/core");
+var import_dom_query3 = require("@zag-js/dom-query");
+var import_element_rect = require("@zag-js/element-rect");
+var import_form_utils = require("@zag-js/form-utils");
+var import_utils = require("@zag-js/utils");
+var { not } = import_core.guards;
+function machine(userContext) {
+  const ctx = (0, import_utils.compact)(userContext);
+  return (0, import_core.createMachine)(
+    {
+      id: "radio",
+      initial: "idle",
+      context: {
+        value: null,
+        activeValue: null,
+        focusedValue: null,
+        hoveredValue: null,
+        disabled: false,
+        orientation: "vertical",
+        ...ctx,
+        indicatorRect: {},
+        canIndicatorTransition: false,
+        fieldsetDisabled: false
+      },
+      computed: {
+        isDisabled: (ctx2) => !!ctx2.disabled || ctx2.fieldsetDisabled
+      },
+      entry: ["syncIndicatorRect"],
+      exit: ["cleanupObserver"],
+      activities: ["trackFormControlState"],
+      watch: {
+        value: ["setIndicatorTransition", "syncIndicatorRect", "syncInputElements"]
+      },
+      on: {
+        SET_VALUE: [
+          {
+            guard: not("isTrusted"),
+            actions: ["setValue", "dispatchChangeEvent"]
+          },
+          {
+            actions: ["setValue"]
+          }
+        ],
+        SET_HOVERED: {
+          actions: "setHovered"
+        },
+        SET_ACTIVE: {
+          actions: "setActive"
+        },
+        SET_FOCUSED: {
+          actions: "setFocused"
+        }
+      },
+      states: {
+        idle: {}
+      }
+    },
+    {
+      guards: {
+        isTrusted: (_ctx, evt) => !!evt.isTrusted
+      },
+      activities: {
+        trackFormControlState(ctx2, _evt, { send, initialContext }) {
+          return (0, import_form_utils.trackFormControl)(dom.getRootEl(ctx2), {
+            onFieldsetDisabledChange(disabled) {
+              ctx2.fieldsetDisabled = disabled;
+            },
+            onFormReset() {
+              send({ type: "SET_VALUE", value: initialContext.value });
+            }
+          });
+        }
+      },
+      actions: {
+        setValue(ctx2, evt) {
+          set.value(ctx2, evt.value);
+        },
+        setHovered(ctx2, evt) {
+          ctx2.hoveredValue = evt.value;
+        },
+        setActive(ctx2, evt) {
+          ctx2.activeValue = evt.value;
+        },
+        setFocused(ctx2, evt) {
+          ctx2.focusedValue = evt.value;
+        },
+        syncInputElements(ctx2) {
+          const inputs = dom.getInputEls(ctx2);
+          inputs.forEach((input) => {
+            input.checked = input.value === ctx2.value;
+          });
+        },
+        setIndicatorTransition(ctx2) {
+          ctx2.canIndicatorTransition = (0, import_utils.isString)(ctx2.value);
+        },
+        cleanupObserver(ctx2) {
+          ctx2.indicatorCleanup?.();
+        },
+        syncIndicatorRect(ctx2) {
+          ctx2.indicatorCleanup?.();
+          if (!dom.getIndicatorEl(ctx2))
+            return;
+          const value = ctx2.value;
+          const radioEl = dom.getActiveRadioEl(ctx2);
+          if (value == null || !radioEl) {
+            ctx2.indicatorRect = {};
+            return;
+          }
+          ctx2.indicatorCleanup = (0, import_element_rect.trackElementRect)(radioEl, {
+            getRect(el) {
+              return dom.getOffsetRect(el);
+            },
+            onChange(rect) {
+              ctx2.indicatorRect = dom.resolveRect(rect);
+              (0, import_dom_query3.nextTick)(() => {
+                ctx2.canIndicatorTransition = false;
+              });
+            }
+          });
+        },
+        dispatchChangeEvent(ctx2) {
+          const inputEls = dom.getInputEls(ctx2);
+          inputEls.forEach((inputEl) => {
+            const checked = inputEl.value === ctx2.value;
+            if (checked === inputEl.checked)
+              return;
+            (0, import_form_utils.dispatchInputCheckedEvent)(inputEl, { checked });
+          });
+        }
+      }
+    }
+  );
+}
+var invoke = {
+  change: (ctx) => {
+    if (ctx.value == null)
+      return;
+    ctx.onValueChange?.({ value: ctx.value });
+  }
+};
+var set = {
+  value: (ctx, value) => {
+    if ((0, import_utils.isEqual)(ctx.value, value))
+      return;
+    ctx.value = value;
+    invoke.change(ctx);
+  }
+};
+
+// src/radio-group.props.ts
+var import_types = require("@zag-js/types");
+var import_utils2 = require("@zag-js/utils");
+var props = (0, import_types.createProps)()([
+  "dir",
+  "disabled",
+  "form",
+  "getRootNode",
+  "id",
+  "ids",
+  "name",
+  "onValueChange",
+  "orientation",
+  "readOnly",
+  "value"
+]);
+var splitProps = (0, import_utils2.createSplitProps)(props);
+var itemProps = (0, import_types.createProps)()(["value", "disabled", "invalid"]);
+var splitItemProps = (0, import_utils2.createSplitProps)(itemProps);
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  anatomy,
+  connect,
+  itemProps,
+  machine,
+  props,
+  splitItemProps,
+  splitProps
+});
 //# sourceMappingURL=index.js.map