fluid-primitives 0.16.0 → 0.17.2-next.4.ea462ad

package/dist/checkbox.d.ts

@@ -1,16 +1,39 @@
-import { FieldAwareComponent$1 as FieldAwareComponent, FieldMachine, Machine$1 as Machine } from "./index-BpcuNDMI.js";
+import { a as Machine, l as FieldAwareComponent, u as FieldMachine } from "./index-DxZhm-zT.js";
 import * as checkbox from "@zag-js/checkbox";
-import * as _zag_js_types7 from "@zag-js/types";
+import * as _$_zag_js_types0 from "@zag-js/types";
 
 //#region Resources/Private/Primitives/Checkbox/Checkbox.d.ts
 declare class Checkbox extends FieldAwareComponent<checkbox.Props, checkbox.Api> {
   static name: string;
+  private checkboxGroupMachine;
+  private checkboxGroupApi;
+  private groupUnsubscribe;
+  private subscribedToGroup;
+  private closestCheckboxGroup;
+  private syncingFromGroup;
   propsWithField(props: checkbox.Props, fieldMachine: FieldMachine): checkbox.Props;
+  private getClosestCheckboxGroup;
+  /**
+   * Build props merged with CheckboxGroup context.
+   * Called by withGroupProps and when group registers late.
+   */
+  private buildGroupProps;
+  /**
+   * Merge props from CheckboxGroup if this checkbox is inside one.
+   * Similar to withFieldProps - handles late registration via event listener.
+   */
+  private withGroupProps;
   initMachine(props: checkbox.Props): Machine<any>;
-  initApi(): checkbox.Api<_zag_js_types7.PropTypes<{
+  initApi(): checkbox.Api<_$_zag_js_types0.PropTypes<{
     [x: string]: any;
   }>>;
   render(): void;
+  /**
+   * Subscribe to CheckboxGroup state changes to sync checked/disabled state.
+   * Similar to subscribeToFieldService.
+   */
+  private subscribeToCheckboxGroup;
+  destroy(): void;
 }
 //#endregion
 export { Checkbox };

package/dist/checkbox.js

@@ -1 +1,148 @@
-import{FieldAwareComponent as e,Machine as t,mergeProps as n,normalizeProps as r}from"./Client-CygooKu8.js";import{getControlId as i,getLabelId as a}from"./field.dom-etI2JxSW.js";import*as o from"@zag-js/checkbox";var s=class extends e{static name=`checkbox`;propsWithField(e,t){return{value:`1`,...e,disabled:e.disabled??t.context.get(`disabled`),readOnly:e.readOnly??t.context.get(`readOnly`),required:e.required??t.context.get(`required`),invalid:e.invalid??t.context.get(`invalid`),name:e.name??t.prop(`name`),ids:{...e.ids,label:a(t.scope),hiddenInput:i(t.scope)}}}initMachine(e){return e=this.withFieldProps(e),new t(o.machine,e)}initApi(){return o.connect(this.machine.service,r)}render(){this.subscribeToFieldService();let e=this.getElement(`root`);e&&this.spreadProps(e,this.api.getRootProps());let t=this.getElement(`label`);t&&this.spreadProps(t,this.api.getLabelProps());let r=this.getElement(`control`);r&&this.spreadProps(r,this.api.getControlProps());let i=this.getElement(`indicator`);i&&this.spreadProps(i,this.api.getIndicatorProps());let a=this.getElement(`hidden-input`);if(a){let e=n(this.api.getHiddenInputProps(),{"aria-describedby":this.fieldMachine?.context.get(`describeIds`)||void 0});this.spreadProps(a,e)}}};export{s as Checkbox};
+import { a as Machine, i as mergeProps, r as normalizeProps, u as FieldAwareComponent } from "./Client-D-GbQqXf.js";
+import { i as connect, t as getCheckboxGroupMachineFor } from "./checkbox-group.registry-CGwuF7SF.js";
+import { a as getLabelId, t as getControlId } from "./field.dom-CJQXpQbZ.js";
+import * as checkbox from "@zag-js/checkbox";
+
+//#region Resources/Private/Primitives/Checkbox/Checkbox.ts
+var Checkbox = class extends FieldAwareComponent {
+	static name = "checkbox";
+	checkboxGroupMachine;
+	checkboxGroupApi;
+	groupUnsubscribe;
+	subscribedToGroup = false;
+	closestCheckboxGroup = null;
+	syncingFromGroup = false;
+	propsWithField(props, fieldMachine) {
+		const isInGroup = !!this.getClosestCheckboxGroup();
+		return {
+			...props,
+			disabled: props.disabled ?? fieldMachine.context.get("disabled"),
+			readOnly: props.readOnly ?? fieldMachine.context.get("readOnly"),
+			required: props.required ?? fieldMachine.context.get("required"),
+			invalid: props.invalid ?? fieldMachine.context.get("invalid"),
+			name: props.name ?? fieldMachine.prop("name"),
+			ids: {
+				...props.ids,
+				label: isInGroup ? void 0 : getLabelId(fieldMachine.scope),
+				hiddenInput: isInGroup ? void 0 : getControlId(fieldMachine.scope)
+			}
+		};
+	}
+	getClosestCheckboxGroup() {
+		return this.closestCheckboxGroup || this.getElement("root")?.closest("[data-scope=\"checkbox-group\"][data-part=\"root\"]");
+	}
+	/**
+	* Build props merged with CheckboxGroup context.
+	* Called by withGroupProps and when group registers late.
+	*/
+	buildGroupProps(props) {
+		if (!this.checkboxGroupMachine || !props.value) return props;
+		this.checkboxGroupApi = connect(this.checkboxGroupMachine.service, normalizeProps);
+		const groupItemProps = this.checkboxGroupApi.getItemProps({ value: props.value });
+		return {
+			...props,
+			defaultChecked: groupItemProps.checked,
+			disabled: props.disabled ?? groupItemProps.disabled,
+			readOnly: props.readOnly ?? groupItemProps.readOnly,
+			invalid: props.invalid ?? groupItemProps.invalid,
+			name: props.name ?? groupItemProps.name,
+			onCheckedChange: (details) => {
+				if (this.syncingFromGroup) {
+					props.onCheckedChange?.(details);
+					return;
+				}
+				groupItemProps.onCheckedChange();
+				props.onCheckedChange?.(details);
+			}
+		};
+	}
+	/**
+	* Merge props from CheckboxGroup if this checkbox is inside one.
+	* Similar to withFieldProps - handles late registration via event listener.
+	*/
+	withGroupProps(props) {
+		this.closestCheckboxGroup = this.getClosestCheckboxGroup();
+		if (!this.closestCheckboxGroup || !props.value) return props;
+		this.checkboxGroupMachine = getCheckboxGroupMachineFor(this.closestCheckboxGroup);
+		if (this.checkboxGroupMachine) return this.buildGroupProps(props);
+		else {
+			const handler = () => {
+				this.checkboxGroupMachine = getCheckboxGroupMachineFor(this.getClosestCheckboxGroup());
+				if (this.checkboxGroupMachine) this.updateProps(this.buildGroupProps(this.userProps));
+				this.closestCheckboxGroup?.removeEventListener("fluid-primitives:checkbox-group:registered", handler);
+			};
+			this.closestCheckboxGroup.addEventListener("fluid-primitives:checkbox-group:registered", handler);
+		}
+		return props;
+	}
+	initMachine(props) {
+		props = this.withFieldProps(props);
+		props = this.withGroupProps(props);
+		return new Machine(checkbox.machine, props);
+	}
+	initApi() {
+		return checkbox.connect(this.machine.service, normalizeProps);
+	}
+	render() {
+		this.subscribeToFieldService();
+		this.subscribeToCheckboxGroup();
+		const rootEl = this.getElement("root");
+		if (rootEl) this.spreadProps(rootEl, this.api.getRootProps());
+		const labelEl = this.getElement("label");
+		if (labelEl) this.spreadProps(labelEl, this.api.getLabelProps());
+		const controlEl = this.getElement("control");
+		if (controlEl) this.spreadProps(controlEl, this.api.getControlProps());
+		const indicatorEl = this.getElement("indicator");
+		if (indicatorEl) this.spreadProps(indicatorEl, this.api.getIndicatorProps());
+		const hiddenInputEl = this.getElement("hidden-input");
+		if (hiddenInputEl) {
+			const mergedProps = mergeProps(this.api.getHiddenInputProps(), { "aria-describedby": this.fieldMachine?.context.get("describeIds") || void 0 });
+			this.spreadProps(hiddenInputEl, mergedProps);
+		}
+	}
+	/**
+	* Subscribe to CheckboxGroup state changes to sync checked/disabled state.
+	* Similar to subscribeToFieldService.
+	*/
+	subscribeToCheckboxGroup() {
+		if (this.subscribedToGroup) return;
+		this.closestCheckboxGroup = this.getClosestCheckboxGroup();
+		if (!this.closestCheckboxGroup) return;
+		if (!this.checkboxGroupMachine) this.checkboxGroupMachine = getCheckboxGroupMachineFor(this.closestCheckboxGroup);
+		if (this.checkboxGroupMachine && this.userProps?.value) {
+			const value = this.userProps.value;
+			this.groupUnsubscribe = this.checkboxGroupMachine.subscribe(() => {
+				queueMicrotask(() => {
+					this.checkboxGroupApi = connect(this.checkboxGroupMachine.service, normalizeProps);
+					const groupItemProps = this.checkboxGroupApi.getItemProps({ value });
+					const currentChecked = this.api.checked;
+					if (groupItemProps.checked !== currentChecked) {
+						this.syncingFromGroup = true;
+						this.api.setChecked(groupItemProps.checked);
+						queueMicrotask(() => {
+							this.syncingFromGroup = false;
+						});
+					}
+					this.machine.updateProps({
+						disabled: this.userProps?.disabled || groupItemProps.disabled,
+						invalid: groupItemProps.invalid
+					});
+				});
+			});
+			this.subscribedToGroup = true;
+		} else if (this.closestCheckboxGroup) {
+			const handler = () => {
+				this.subscribeToCheckboxGroup();
+				this.closestCheckboxGroup?.removeEventListener("fluid-primitives:checkbox-group:registered", handler);
+			};
+			this.closestCheckboxGroup.addEventListener("fluid-primitives:checkbox-group:registered", handler);
+		}
+	}
+	destroy() {
+		this.groupUnsubscribe?.();
+		super.destroy();
+	}
+};
+
+//#endregion
+export { Checkbox };

package/dist/client.d.ts

@@ -1,2 +1,2 @@
-import { Component$1 as Component, ComponentHydrationData, ComponentHydrator$1 as ComponentHydrator, ComponentInterface, FieldAwareComponent$1 as FieldAwareComponent, Machine$1 as Machine, getHydrationData$1 as getHydrationData, mergeProps$1 as mergeProps, mount$1 as mount, normalizeProps$1 as normalizeProps, spreadProps$1 as spreadProps, uid$1 as uid } from "./index-BpcuNDMI.js";
-export { Component, ComponentHydrationData, ComponentHydrator, ComponentInterface, FieldAwareComponent, Machine, getHydrationData, mergeProps, mount, normalizeProps, spreadProps, uid };
+import { a as Machine, c as mount, d as Component, f as ComponentHydrationData, i as mergeProps, l as FieldAwareComponent, m as FluidPrimitivesGlobals, n as spreadProps, o as ComponentHydrator, p as ComponentInterface, r as normalizeProps, s as getHydrationData, t as uid } from "./index-DxZhm-zT.js";
+export { Component, ComponentHydrationData, ComponentHydrator, ComponentInterface, FieldAwareComponent, FluidPrimitivesGlobals, Machine, getHydrationData, mergeProps, mount, normalizeProps, spreadProps, uid };

package/dist/client.js

@@ -1 +1,3 @@
-import{Component as e,ComponentHydrator as t,FieldAwareComponent as n,Machine as r,getHydrationData as i,mergeProps as a,mount as o,normalizeProps as s,spreadProps as c,uid as l}from"./Client-CygooKu8.js";export{e as Component,t as ComponentHydrator,n as FieldAwareComponent,r as Machine,i as getHydrationData,a as mergeProps,o as mount,s as normalizeProps,c as spreadProps,l as uid};
+import { a as Machine, f as Component, i as mergeProps, l as mount, n as spreadProps, o as ComponentHydrator, r as normalizeProps, s as getHydrationData, t as uid, u as FieldAwareComponent } from "./Client-D-GbQqXf.js";
+
+export { Component, ComponentHydrator, FieldAwareComponent, Machine, getHydrationData, mergeProps, mount, normalizeProps, spreadProps, uid };

package/dist/clipboard.d.ts

@@ -1,12 +1,12 @@
-import { Component$1 as Component, Machine$1 as Machine } from "./index-BpcuNDMI.js";
+import { a as Machine, d as Component } from "./index-DxZhm-zT.js";
 import * as clipboard from "@zag-js/clipboard";
-import * as _zag_js_types4 from "@zag-js/types";
+import * as _$_zag_js_types0 from "@zag-js/types";
 
 //#region Resources/Private/Primitives/Clipboard/Clipboard.d.ts
 declare class Clipboard extends Component<clipboard.Props, clipboard.Api> {
   static name: string;
   initMachine(props: clipboard.Props): Machine<any>;
-  initApi(): clipboard.Api<_zag_js_types4.PropTypes<{
+  initApi(): clipboard.Api<_$_zag_js_types0.PropTypes<{
     [x: string]: any;
   }>>;
   render(): void;

package/dist/clipboard.js

@@ -1 +1,32 @@
-import{Component as e,Machine as t,normalizeProps as n}from"./Client-CygooKu8.js";import*as r from"@zag-js/clipboard";var i=class extends e{static name=`clipboard`;initMachine(e){return new t(r.machine,e)}initApi(){return r.connect(this.machine.service,n)}render(){let e=this.getElement(`root`);e&&this.spreadProps(e,this.api.getRootProps());let t=this.getElement(`label`);t&&this.spreadProps(t,this.api.getLabelProps());let n=this.getElement(`control`);n&&this.spreadProps(n,this.api.getControlProps());let r=this.getElement(`input`);r&&this.spreadProps(r,this.api.getInputProps());let i=this.getElement(`indicator-copied`);i&&this.spreadProps(i,this.api.getIndicatorProps({copied:!0}));let a=this.getElement(`indicator-idle`);a&&this.spreadProps(a,this.api.getIndicatorProps({copied:!1}));let o=this.getElement(`trigger`);o&&this.spreadProps(o,this.api.getTriggerProps())}};export{i as Clipboard};
+import { a as Machine, f as Component, r as normalizeProps } from "./Client-D-GbQqXf.js";
+import * as clipboard from "@zag-js/clipboard";
+
+//#region Resources/Private/Primitives/Clipboard/Clipboard.ts
+var Clipboard = class extends Component {
+	static name = "clipboard";
+	initMachine(props) {
+		return new Machine(clipboard.machine, props);
+	}
+	initApi() {
+		return clipboard.connect(this.machine.service, normalizeProps);
+	}
+	render() {
+		const rootEl = this.getElement("root");
+		if (rootEl) this.spreadProps(rootEl, this.api.getRootProps());
+		const labelEl = this.getElement("label");
+		if (labelEl) this.spreadProps(labelEl, this.api.getLabelProps());
+		const controlEl = this.getElement("control");
+		if (controlEl) this.spreadProps(controlEl, this.api.getControlProps());
+		const inputEl = this.getElement("input");
+		if (inputEl) this.spreadProps(inputEl, this.api.getInputProps());
+		const indicatorCopiedEl = this.getElement("indicator-copied");
+		if (indicatorCopiedEl) this.spreadProps(indicatorCopiedEl, this.api.getIndicatorProps({ copied: true }));
+		const indicatorIdleEl = this.getElement("indicator-idle");
+		if (indicatorIdleEl) this.spreadProps(indicatorIdleEl, this.api.getIndicatorProps({ copied: false }));
+		const triggerEl = this.getElement("trigger");
+		if (triggerEl) this.spreadProps(triggerEl, this.api.getTriggerProps());
+	}
+};
+
+//#endregion
+export { Clipboard };

package/dist/collapsible.d.ts

@@ -1,12 +1,12 @@
-import { Component$1 as Component, Machine$1 as Machine } from "./index-BpcuNDMI.js";
+import { a as Machine, d as Component } from "./index-DxZhm-zT.js";
 import * as collapsible from "@zag-js/collapsible";
-import * as _zag_js_types5 from "@zag-js/types";
+import * as _$_zag_js_types0 from "@zag-js/types";
 
 //#region Resources/Private/Primitives/Collapsible/Collapsible.d.ts
 declare class Collapsible extends Component<collapsible.Props, collapsible.Api> {
   static name: string;
   initMachine(props: collapsible.Props): Machine<any>;
-  initApi(): collapsible.Api<_zag_js_types5.PropTypes<{
+  initApi(): collapsible.Api<_$_zag_js_types0.PropTypes<{
     [x: string]: any;
   }>>;
   render(): void;

package/dist/collapsible.js

@@ -1 +1,28 @@
-import{Component as e,Machine as t,normalizeProps as n}from"./Client-CygooKu8.js";import*as r from"@zag-js/collapsible";var i=class extends e{static name=`collapsible`;initMachine(e){return new t(r.machine,e)}initApi(){return r.connect(this.machine.service,n)}render(){let e=this.getElement(`root`);e&&this.spreadProps(e,this.api.getRootProps());let t=this.getElements(`trigger`);t.forEach(e=>{this.spreadProps(e,this.api.getTriggerProps())});let n=this.getElements(`trigger-text`);n.forEach(e=>{e&&e.dataset.openText&&e.dataset.closeText&&(e.textContent=this.api.open?e.dataset.closeText:e.dataset.openText)});let r=this.getElement(`content`);r&&this.spreadProps(r,this.api.getContentProps())}};export{i as Collapsible};
+import { a as Machine, f as Component, r as normalizeProps } from "./Client-D-GbQqXf.js";
+import * as collapsible from "@zag-js/collapsible";
+
+//#region Resources/Private/Primitives/Collapsible/Collapsible.ts
+var Collapsible = class extends Component {
+	static name = "collapsible";
+	initMachine(props) {
+		return new Machine(collapsible.machine, props);
+	}
+	initApi() {
+		return collapsible.connect(this.machine.service, normalizeProps);
+	}
+	render() {
+		const rootEl = this.getElement("root");
+		if (rootEl) this.spreadProps(rootEl, this.api.getRootProps());
+		this.getElements("trigger").forEach((triggerEl) => {
+			this.spreadProps(triggerEl, this.api.getTriggerProps());
+		});
+		this.getElements("trigger-text").forEach((triggerTextEl) => {
+			if (triggerTextEl && triggerTextEl.dataset.openText && triggerTextEl.dataset.closeText) triggerTextEl.textContent = this.api.open ? triggerTextEl.dataset.closeText : triggerTextEl.dataset.openText;
+		});
+		const contentEl = this.getElement("content");
+		if (contentEl) this.spreadProps(contentEl, this.api.getContentProps());
+	}
+};
+
+//#endregion
+export { Collapsible };

package/dist/dialog.d.ts

@@ -1,12 +1,12 @@
-import { Component$1 as Component, Machine$1 as Machine } from "./index-BpcuNDMI.js";
+import { a as Machine, d as Component } from "./index-DxZhm-zT.js";
 import * as dialog from "@zag-js/dialog";
-import * as _zag_js_types2 from "@zag-js/types";
+import * as _$_zag_js_types0 from "@zag-js/types";
 
 //#region Resources/Private/Primitives/Dialog/Dialog.d.ts
 declare class Dialog extends Component<dialog.Props, dialog.Api> {
   static name: string;
   initMachine(props: dialog.Props): Machine<any>;
-  initApi(): dialog.Api<_zag_js_types2.PropTypes<{
+  initApi(): dialog.Api<_$_zag_js_types0.PropTypes<{
     [x: string]: any;
   }>>;
   render(): void;

package/dist/dialog.js

@@ -1 +1,34 @@
-import{Component as e,Machine as t,normalizeProps as n}from"./Client-CygooKu8.js";import*as r from"@zag-js/dialog";var i=class extends e{static name=`dialog`;initMachine(e){return new t(r.machine,e)}initApi(){return r.connect(this.machine.service,n)}render(){let e=this.getElements(`trigger`);e.forEach(e=>{this.spreadProps(e,this.api.getTriggerProps())});let t=this.getElement(`backdrop`);t&&this.spreadProps(t,this.api.getBackdropProps());let n=this.getElement(`positioner`);n&&this.spreadProps(n,this.api.getPositionerProps());let r=this.getElement(`content`);r&&this.spreadProps(r,this.api.getContentProps());let i=this.getElement(`title`);i&&this.spreadProps(i,this.api.getTitleProps());let a=this.getElement(`description`);a&&this.spreadProps(a,this.api.getDescriptionProps());let o=this.getElements(`close-trigger`);o.forEach(e=>{this.spreadProps(e,this.api.getCloseTriggerProps())})}};export{i as Dialog};
+import { a as Machine, f as Component, r as normalizeProps } from "./Client-D-GbQqXf.js";
+import * as dialog from "@zag-js/dialog";
+
+//#region Resources/Private/Primitives/Dialog/Dialog.ts
+var Dialog = class extends Component {
+	static name = "dialog";
+	initMachine(props) {
+		return new Machine(dialog.machine, props);
+	}
+	initApi() {
+		return dialog.connect(this.machine.service, normalizeProps);
+	}
+	render() {
+		this.getElements("trigger").forEach((trigger) => {
+			this.spreadProps(trigger, this.api.getTriggerProps());
+		});
+		const backdropEl = this.getElement("backdrop");
+		if (backdropEl) this.spreadProps(backdropEl, this.api.getBackdropProps());
+		const positionerEl = this.getElement("positioner");
+		if (positionerEl) this.spreadProps(positionerEl, this.api.getPositionerProps());
+		const contentEl = this.getElement("content");
+		if (contentEl) this.spreadProps(contentEl, this.api.getContentProps());
+		const titleEl = this.getElement("title");
+		if (titleEl) this.spreadProps(titleEl, this.api.getTitleProps());
+		const descriptionEl = this.getElement("description");
+		if (descriptionEl) this.spreadProps(descriptionEl, this.api.getDescriptionProps());
+		this.getElements("close-trigger").forEach((trigger) => {
+			this.spreadProps(trigger, this.api.getCloseTriggerProps());
+		});
+	}
+};
+
+//#endregion
+export { Dialog };

package/dist/field.d.ts

@@ -1,5 +1,5 @@
-import { Component$1 as Component, Machine$1 as Machine } from "./index-BpcuNDMI.js";
-import { FormMachine } from "./form.registry-DdLr3dbX.js";
+import { a as Machine, d as Component } from "./index-DxZhm-zT.js";
+import { n as FormMachine } from "./form.registry-DjhMF6Ny.js";
 import { EventObject } from "@zag-js/core";
 import { PropTypes } from "@zag-js/types";
 

package/dist/field.dom-CJQXpQbZ.js

@@ -0,0 +1,11 @@
+//#region Resources/Private/Primitives/Field/src/field.dom.ts
+const getRootId = (scope) => scope.ids?.root ?? `field:${scope.id}:root`;
+const getLabelId = (scope) => scope.ids?.label ?? `field:${scope.id}:label`;
+const getControlId = (scope) => scope.ids?.control ?? `field:${scope.id}:control`;
+const getErrorId = (scope) => scope.ids?.error ?? `field:${scope.id}:error`;
+const getDescriptionId = (scope) => scope.ids?.description ?? `field:${scope.id}:description`;
+const getRootEl = (scope) => scope.getById(getRootId(scope));
+const getDescriptionEl = (scope) => scope.getById(getDescriptionId(scope));
+
+//#endregion
+export { getLabelId as a, getErrorId as i, getDescriptionEl as n, getRootEl as o, getDescriptionId as r, getRootId as s, getControlId as t };

package/dist/field.js

@@ -1 +1,211 @@
-import{Component as e,Machine as t,normalizeProps as n,registerFieldMachine as r}from"./Client-CygooKu8.js";import{getControlId as i,getDescriptionEl as a,getDescriptionId as o,getErrorId as s,getLabelId as c,getRootEl as l,getRootId as u}from"./field.dom-etI2JxSW.js";import{getFormMachineFor as d,registerFieldMachineForForm as f}from"./form.registry-Bv4jZGjo.js";import{createAnatomy as p}from"@zag-js/anatomy";import{createMachine as m}from"@zag-js/core";const h=p(`field`).parts(`root`,`label`,`control`,`error`,`description`),g=h.build();function _(e,t){let{scope:n,prop:r,context:a,computed:l}=e,d=a.get(`invalid`),f=a.get(`disabled`),p=a.get(`required`),m=a.get(`readOnly`),h=l(`errors`);return{getFormMachine:()=>a.get(`formMachine`),invalid:d,disabled:f,required:p,readOnly:m,errors:h,name:r(`name`),getErrorText(){return h.length>0?h.join(` `):null},getRootProps(){return t.element({...g.root.attrs,id:u(n),"data-invalid":d?``:void 0,"data-disabled":f?``:void 0,"data-readonly":m?``:void 0,"data-required":p?``:void 0,"data-name":r(`name`)})},getLabelProps(){return t.label({...g.label.attrs,id:c(n),htmlFor:i(n),"data-invalid":d?``:void 0,"data-disabled":f?``:void 0,"data-required":p?``:void 0})},getControlProps(){return t.element({...g.control.attrs,id:i(n),name:r(`name`),disabled:f||void 0,readOnly:m||void 0,required:p||void 0,"aria-invalid":d?`true`:void 0,"aria-describedby":a.get(`describeIds`)||void 0,"aria-required":p?`true`:void 0,"data-invalid":d?``:void 0,"data-disabled":f?``:void 0,"data-readonly":m?``:void 0})},getErrorProps(){return t.element({...g.error.attrs,id:s(n),hidden:!d})},getDescriptionProps(){return t.element({...g.description.attrs,id:o(n)})}}}const v=m({initialState(){return`ready`},context({bindable:e,prop:t}){return{invalid:e(()=>({defaultValue:t(`invalid`)??!1})),required:e(()=>({defaultValue:t(`required`)??!1})),disabled:e(()=>({defaultValue:t(`disabled`)??!1})),readOnly:e(()=>({defaultValue:t(`readOnly`)??!1})),formMachine:e(()=>({defaultValue:null,hash:e=>JSON.stringify({state:e?.state,errors:e?.context.get(`errors`)})})),describeIds:e(()=>({defaultValue:void 0})),hasDescription:e(()=>({defaultValue:!1}))}},entry:[`getFormMachine`,`checkForDescription`,`determineDescribeIds`,`updateInvalid`],states:{ready:{}},computed:{errors({context:e,prop:t}){let n=e.get(`formMachine`)?.context;if(!n)return[];let r=n.get(`errors`)?.[t(`name`)];return r?.messages??[]}},watch({track:e,context:t,computed:n,action:r}){e([()=>t.hash(`formMachine`),()=>n(`errors`).join(`|`)],()=>{r([`updateInvalid`])}),e([()=>t.get(`invalid`),()=>t.get(`hasDescription`)],()=>{r([`determineDescribeIds`])})},implementations:{actions:{getFormMachine({context:e,scope:t}){if(e.get(`formMachine`))return;let n=l(t);if(!n)return;let r=d(n)??null;if(r)e.set(`formMachine`,r);else{let t=n.closest(`form`);if(!t)return;let r=()=>{let i=d(n)??null;e.set(`formMachine`,i),t.removeEventListener(`fluid-primitives:form:registered`,r)};t.addEventListener(`fluid-primitives:form:registered`,r)}},checkForDescription({context:e,scope:t}){let n=a(t);e.set(`hasDescription`,!!n)},determineDescribeIds({context:e,scope:t}){let n=[];e.get(`hasDescription`)&&n.push(o(t)),e.get(`invalid`)&&n.push(s(t));let r=n.join(` `)||void 0;e.set(`describeIds`,r)},updateInvalid({context:e,prop:t}){let n=e.get(`formMachine`)?.context;if(!n){e.set(`invalid`,t(`invalid`)??!1);return}let r=n.get(`errors`)?.[t(`name`)],i=r?.messages??[];e.set(`invalid`,i.length>0)}}}});var y=class extends e{static name=`field`;subscribedToForm=!1;initMachine(e){let n=new t(v,e);return r(this.getElement(`root`),n),f(this.getElement(`root`),n),n}initApi(){return _(this.machine.service,n)}subscribeToFormMachine(){if(this.subscribedToForm)return;let e=this.api.getFormMachine();e&&(this.subscribedToForm=!0,e.subscribe(()=>{this.machine.notify()}))}render(){this.subscribeToFormMachine();let e=this.getElement(`root`);e&&this.spreadProps(e,this.api.getRootProps());let t=this.getElement(`label`);t&&this.spreadProps(t,this.api.getLabelProps());let n=this.getElement(`control`);n&&this.spreadProps(n,this.api.getControlProps());let r=this.getElement(`description`);r&&this.spreadProps(r,this.api.getDescriptionProps());let i=this.getElement(`error`);if(i){this.spreadProps(i,this.api.getErrorProps());let e=this.api.getErrorText();e&&(i.textContent=e)}}};export{y as Field};
+import { a as Machine, d as registerFieldMachine, f as Component, r as normalizeProps } from "./Client-D-GbQqXf.js";
+import { a as getLabelId, i as getErrorId, n as getDescriptionEl, o as getRootEl, r as getDescriptionId, s as getRootId, t as getControlId } from "./field.dom-CJQXpQbZ.js";
+import { n as getFormMachineFor, r as registerFieldMachineForForm } from "./form.registry-CmpTny_s.js";
+import { createMachine } from "@zag-js/core";
+import { createAnatomy } from "@zag-js/anatomy";
+
+//#region Resources/Private/Primitives/Field/src/field.anatomy.ts
+const anatomy = createAnatomy("field").parts("root", "label", "control", "error", "description");
+const parts = anatomy.build();
+
+//#endregion
+//#region Resources/Private/Primitives/Field/src/field.connect.ts
+function connect(service, normalize) {
+	const { scope, prop, context, computed } = service;
+	const invalid = context.get("invalid");
+	const disabled = context.get("disabled");
+	const required = context.get("required");
+	const readOnly = context.get("readOnly");
+	const errors = computed("errors");
+	return {
+		getFormMachine: () => context.get("formMachine"),
+		invalid,
+		disabled,
+		required,
+		readOnly,
+		errors,
+		name: prop("name"),
+		getErrorText() {
+			return errors.length > 0 ? errors.join(" ") : null;
+		},
+		getRootProps() {
+			return normalize.element({
+				...parts.root.attrs,
+				id: getRootId(scope),
+				"data-invalid": invalid ? "" : void 0,
+				"data-disabled": disabled ? "" : void 0,
+				"data-readonly": readOnly ? "" : void 0,
+				"data-required": required ? "" : void 0,
+				"data-name": prop("name")
+			});
+		},
+		getLabelProps() {
+			return normalize.label({
+				...parts.label.attrs,
+				id: getLabelId(scope),
+				htmlFor: getControlId(scope),
+				"data-invalid": invalid ? "" : void 0,
+				"data-disabled": disabled ? "" : void 0,
+				"data-required": required ? "" : void 0
+			});
+		},
+		getControlProps() {
+			return normalize.element({
+				...parts.control.attrs,
+				id: getControlId(scope),
+				name: prop("name"),
+				disabled: disabled || void 0,
+				readOnly: readOnly || void 0,
+				required: required || void 0,
+				"aria-invalid": invalid ? "true" : void 0,
+				"aria-describedby": context.get("describeIds") || void 0,
+				"aria-required": required ? "true" : void 0,
+				"data-invalid": invalid ? "" : void 0,
+				"data-disabled": disabled ? "" : void 0,
+				"data-readonly": readOnly ? "" : void 0
+			});
+		},
+		getErrorProps() {
+			return normalize.element({
+				...parts.error.attrs,
+				id: getErrorId(scope),
+				hidden: !invalid
+			});
+		},
+		getDescriptionProps() {
+			return normalize.element({
+				...parts.description.attrs,
+				id: getDescriptionId(scope)
+			});
+		}
+	};
+}
+
+//#endregion
+//#region Resources/Private/Primitives/Field/src/field.machine.ts
+const machine = createMachine({
+	initialState() {
+		return "ready";
+	},
+	context({ bindable, prop }) {
+		return {
+			invalid: bindable(() => ({ defaultValue: prop("invalid") ?? false })),
+			required: bindable(() => ({ defaultValue: prop("required") ?? false })),
+			disabled: bindable(() => ({ defaultValue: prop("disabled") ?? false })),
+			readOnly: bindable(() => ({ defaultValue: prop("readOnly") ?? false })),
+			formMachine: bindable(() => ({
+				defaultValue: null,
+				hash: (value) => JSON.stringify({
+					state: value?.state,
+					errors: value?.context.get("errors")
+				})
+			})),
+			describeIds: bindable(() => ({ defaultValue: void 0 })),
+			hasDescription: bindable(() => ({ defaultValue: false }))
+		};
+	},
+	entry: [
+		"getFormMachine",
+		"checkForDescription",
+		"determineDescribeIds",
+		"updateInvalid"
+	],
+	states: { ready: {} },
+	computed: { errors({ context, prop }) {
+		const formMachineCtx = context.get("formMachine")?.context;
+		if (!formMachineCtx) return [];
+		return (formMachineCtx.get("errors")?.[prop("name")])?.messages ?? [];
+	} },
+	watch({ track, context, computed, action }) {
+		track([() => context.hash("formMachine"), () => computed("errors").join("|")], () => {
+			action(["updateInvalid"]);
+		});
+		track([() => context.get("invalid"), () => context.get("hasDescription")], () => {
+			action(["determineDescribeIds"]);
+		});
+	},
+	implementations: { actions: {
+		getFormMachine({ context, scope }) {
+			if (context.get("formMachine")) return;
+			const fieldRootEl = getRootEl(scope);
+			if (!fieldRootEl) return;
+			const formMachine = getFormMachineFor(fieldRootEl) ?? null;
+			if (formMachine) context.set("formMachine", formMachine);
+			else {
+				const closestForm = fieldRootEl.closest("form");
+				if (!closestForm) return;
+				const handler = () => {
+					const fs = getFormMachineFor(fieldRootEl) ?? null;
+					context.set("formMachine", fs);
+					closestForm.removeEventListener("fluid-primitives:form:registered", handler);
+				};
+				closestForm.addEventListener("fluid-primitives:form:registered", handler);
+			}
+		},
+		checkForDescription({ context, scope }) {
+			const descriptionEl = getDescriptionEl(scope);
+			context.set("hasDescription", !!descriptionEl);
+		},
+		determineDescribeIds({ context, scope }) {
+			const ids = [];
+			if (context.get("hasDescription")) ids.push(getDescriptionId(scope));
+			if (context.get("invalid")) ids.push(getErrorId(scope));
+			const idsStr = ids.join(" ") || void 0;
+			context.set("describeIds", idsStr);
+		},
+		updateInvalid({ context, prop }) {
+			const formMachineCtx = context.get("formMachine")?.context;
+			if (!formMachineCtx) {
+				context.set("invalid", prop("invalid") ?? false);
+				return;
+			}
+			const errs = (formMachineCtx.get("errors")?.[prop("name")])?.messages ?? [];
+			context.set("invalid", errs.length > 0);
+		}
+	} }
+});
+
+//#endregion
+//#region Resources/Private/Primitives/Field/Field.ts
+var Field = class extends Component {
+	static name = "field";
+	subscribedToForm = false;
+	initMachine(props) {
+		const createdMachine = new Machine(machine, props);
+		registerFieldMachine(this.getElement("root"), createdMachine);
+		registerFieldMachineForForm(this.getElement("root"), createdMachine);
+		return createdMachine;
+	}
+	initApi() {
+		return connect(this.machine.service, normalizeProps);
+	}
+	subscribeToFormMachine() {
+		if (this.subscribedToForm) return;
+		const formMachine = this.api.getFormMachine();
+		if (!formMachine) return;
+		this.subscribedToForm = true;
+		formMachine.subscribe(() => {
+			this.machine.notify();
+		});
+	}
+	render() {
+		this.subscribeToFormMachine();
+		const rootEl = this.getElement("root");
+		if (rootEl) this.spreadProps(rootEl, this.api.getRootProps());
+		const labelEl = this.getElement("label");
+		if (labelEl) this.spreadProps(labelEl, this.api.getLabelProps());
+		const controlEl = this.getElement("control");
+		if (controlEl) this.spreadProps(controlEl, this.api.getControlProps());
+		const descriptionEl = this.getElement("description");
+		if (descriptionEl) this.spreadProps(descriptionEl, this.api.getDescriptionProps());
+		const errorEl = this.getElement("error");
+		if (errorEl) {
+			this.spreadProps(errorEl, this.api.getErrorProps());
+			const msg = this.api.getErrorText();
+			if (msg) errorEl.textContent = msg;
+		}
+	}
+};
+
+//#endregion
+export { Field };

package/dist/form.d.ts

@@ -1,8 +1,8 @@
-import { Component$1 as Component, Machine$1 as Machine } from "./index-BpcuNDMI.js";
-import { FieldMachine$1 as FieldMachine } from "./form.registry-DdLr3dbX.js";
+import { a as Machine, d as Component } from "./index-DxZhm-zT.js";
+import { t as FieldMachine } from "./form.registry-DjhMF6Ny.js";
 import { EventObject } from "@zag-js/core";
-import { JSX, PropTypes } from "@zag-js/types";
 import * as z from "zod";
+import { JSX, PropTypes } from "@zag-js/types";
 
 //#region Resources/Private/Primitives/Form/src/form.types.d.ts
 interface FieldError {