fluid-primitives 0.19.1 → 1.0.0-beta.1

package/dist/accordion.d.ts

@@ -1,10 +1,10 @@
-import { a as Machine, f as Component } from "./index-B8JCdyld.js";
+import { c as Machine, z as Component } from "./index-B06gIN_k.js";
 import * as accordion from "@zag-js/accordion";
 import * as _$_zag_js_types0 from "@zag-js/types";
 
 //#region Resources/Private/Primitives/Accordion/Accordion.d.ts
 declare class Accordion extends Component<accordion.Props, accordion.Api> {
-  static name: string;
+  static componentName: string;
   initMachine(props: accordion.Props): Machine<any>;
   initApi(): accordion.Api<_$_zag_js_types0.PropTypes<{
     [x: string]: any;

package/dist/accordion.js

@@ -1,43 +1,39 @@
-import { a as Machine, p as Component, r as normalizeProps } from "./Client-C51NSHxg.js";
+import { a as normalizeProps, at as Machine, rt as Component } from "./Client-HrMIqv7d.js";
 import * as accordion from "@zag-js/accordion";
 
 //#region Resources/Private/Primitives/Accordion/Accordion.ts
 var Accordion = class extends Component {
-	static name = "accordion";
+	static componentName = "accordion";
 	initMachine(props) {
-		return new Machine(accordion.machine, { ...props });
+		const [machineProps] = accordion.splitProps(props);
+		return new Machine(accordion.machine, machineProps);
 	}
 	initApi() {
 		return accordion.connect(this.machine.service, normalizeProps);
 	}
 	render() {
-		const rootEl = this.getElement("root");
+		const rootEl = this.hydrator.query("root");
 		if (rootEl) this.spreadProps(rootEl, this.api.getRootProps());
-		this.getElements("item").forEach((itemEl) => {
-			this.spreadProps(itemEl, this.api.getItemProps({
-				value: itemEl.getAttribute("data-value"),
-				disabled: itemEl.hasAttribute("data-disabled")
-			}));
-		});
-		this.getElements("item-trigger").forEach((trigger) => {
-			this.spreadProps(trigger, this.api.getItemTriggerProps({
-				value: trigger.getAttribute("data-value"),
-				disabled: trigger.hasAttribute("data-disabled")
-			}));
-		});
-		this.getElements("item-content").forEach((contentEl) => {
-			this.spreadProps(contentEl, this.api.getItemContentProps({
-				value: contentEl.getAttribute("data-value"),
-				disabled: contentEl.hasAttribute("data-disabled")
-			}));
-		});
-		this.getElements("item-indicator").forEach((indicatorEl) => {
-			this.spreadProps(indicatorEl, this.api.getItemIndicatorProps({
-				value: indicatorEl.getAttribute("data-value"),
-				disabled: indicatorEl.hasAttribute("data-disabled")
-			}));
-		});
-		this.getElements("item-header");
+		this.spreadPropsByValue("item", ({ el, value }) => this.api.getItemProps({
+			value,
+			disabled: el.hasAttribute("data-disabled")
+		}));
+		this.spreadPropsByValue("itemTrigger", ({ el, value }) => this.api.getItemTriggerProps({
+			value,
+			disabled: el.hasAttribute("data-disabled")
+		}));
+		this.spreadPropsByValue("itemContent", ({ el, value }) => this.api.getItemContentProps({
+			value,
+			disabled: el.hasAttribute("data-disabled")
+		}));
+		this.spreadPropsByValue("itemIndicator", ({ el, value }) => this.api.getItemIndicatorProps({
+			value,
+			disabled: el.hasAttribute("data-disabled")
+		}));
+		this.spreadPropsByValue("itemHeader", ({ el, value }) => this.api.getItemHeaderProps({
+			value,
+			disabled: el.hasAttribute("data-disabled")
+		}));
 	}
 };
 

package/dist/button.d.ts

@@ -0,0 +1,52 @@
+import { c as Machine$1, z as Component } from "./index-B06gIN_k.js";
+import { EventObject } from "@zag-js/core";
+import { PropTypes } from "@zag-js/types";
+
+//#region Resources/Private/Primitives/Button/src/button.types.d.ts
+/** What the button is doing, and which indicators are shown. `loading` wins over `disabled`. */
+type ButtonState = 'idle' | 'loading' | 'disabled';
+interface ButtonProps {
+  /** The unique identifier of the button. */
+  id: string;
+  /** The ids of the parts other elements reference: `root`. */
+  ids?: Record<string, string>;
+  /** Whether the button is disabled. */
+  disabled?: boolean;
+  /** Whether the button is loading. A loading button is disabled too. */
+  loading?: boolean;
+  /**
+   * Keeps a disabled button focusable. It then gets `aria-disabled` instead of the `disabled`
+   * attribute, and clicks and key presses are ignored.
+   */
+  focusableWhenDisabled?: boolean;
+}
+interface ButtonIndicatorProps {
+  /** The state of the button the indicator is shown in. */
+  state: ButtonState;
+}
+interface ButtonApi {
+  /** The state of the button, which decides the indicators that are shown. */
+  state: ButtonState;
+  /** Whether the button is disabled, either on its own or because it is loading. */
+  disabled: boolean;
+  /** Whether the button is loading. */
+  loading: boolean;
+  /** Disables or enables the button. A loading button stays disabled. */
+  setDisabled(value: boolean): void;
+  /** Starts or stops loading. A loading button is disabled too. */
+  setLoading(value: boolean): void;
+  /** Adds an event listener to the button element, the same as `addEventListener` of the element. */
+  addEventListener(...args: Parameters<HTMLButtonElement['addEventListener']>): void;
+  getRootProps(): PropTypes['button'];
+  getIndicatorProps(props: ButtonIndicatorProps): PropTypes['element'];
+}
+//#endregion
+//#region Resources/Private/Primitives/Button/Button.d.ts
+declare class Button extends Component<ButtonProps, ButtonApi> {
+  static componentName: string;
+  initMachine(props: ButtonProps): Machine$1<any>;
+  initApi(): ButtonApi;
+  render(): void;
+}
+//#endregion
+export { Button };

package/dist/button.js

@@ -0,0 +1,135 @@
+import { a as normalizeProps, at as Machine$1, rt as Component } from "./Client-HrMIqv7d.js";
+import { createSplitProps } from "@zag-js/utils";
+import { createAnatomy } from "@zag-js/anatomy";
+import { createMachine } from "@zag-js/core";
+import { createProps } from "@zag-js/types";
+
+//#region Resources/Private/Primitives/Button/src/button.anatomy.ts
+const anatomy = createAnatomy("button").parts("root", "indicator");
+const parts = anatomy.build();
+
+//#endregion
+//#region Resources/Private/Primitives/Button/src/button.dom.ts
+const getRootEl = (scope) => scope.query(scope.selector(parts.root));
+
+//#endregion
+//#region Resources/Private/Primitives/Button/src/button.connect.ts
+function connect(machine, normalize) {
+	const { scope, prop, computed } = machine;
+	const state = computed("state");
+	const disabled = computed("disabled");
+	const loading = state === "loading";
+	const focusableWhenDisabled = !!prop("focusableWhenDisabled");
+	return {
+		state,
+		disabled,
+		loading,
+		setDisabled(value) {
+			machine.updateProps({ disabled: value });
+		},
+		setLoading(value) {
+			machine.updateProps({ loading: value });
+		},
+		addEventListener(...args) {
+			getRootEl(scope)?.addEventListener(...args);
+		},
+		getRootProps() {
+			return normalize.button({
+				...parts.root.attrs(scope.id),
+				disabled: disabled && !focusableWhenDisabled ? true : void 0,
+				"aria-disabled": disabled && focusableWhenDisabled ? "true" : void 0,
+				"data-disabled": disabled ? "" : void 0,
+				/** Present while the button is loading. */
+				"data-loading": loading ? "" : void 0
+			});
+		},
+		getIndicatorProps({ state: indicatorState }) {
+			return normalize.element({
+				...parts.indicator.attrs(scope.id),
+				hidden: indicatorState === state ? void 0 : true
+			});
+		}
+	};
+}
+
+//#endregion
+//#region Resources/Private/Primitives/Button/src/button.machine.ts
+const machine = createMachine({
+	initialState() {
+		return "idle";
+	},
+	computed: {
+		disabled({ prop }) {
+			return !!prop("disabled") || !!prop("loading");
+		},
+		state({ prop, computed }) {
+			if (prop("loading")) return "loading";
+			return computed("disabled") ? "disabled" : "idle";
+		}
+	},
+	watch({ track, computed, prop, scope }) {
+		track([() => computed("disabled")], () => {
+			if (!computed("disabled") || prop("focusableWhenDisabled")) return;
+			const buttonEl = getRootEl(scope);
+			if (buttonEl && scope.isActiveElement(buttonEl)) console.warn("[Button] A focused button was disabled, so it loses focus. Set `focusableWhenDisabled` to keep it.", buttonEl);
+		});
+	},
+	effects: ["ignoreInteractionWhenDisabled"],
+	states: { idle: {} },
+	implementations: { effects: { ignoreInteractionWhenDisabled({ scope, computed }) {
+		const buttonEl = getRootEl(scope);
+		if (!buttonEl) return void 0;
+		const ignore = (event) => {
+			if (!computed("disabled")) return;
+			event.preventDefault();
+			event.stopImmediatePropagation();
+		};
+		const ignoreActivationKey = (event) => {
+			if (event.key === "Enter" || event.key === " ") ignore(event);
+		};
+		buttonEl.addEventListener("click", ignore, true);
+		buttonEl.addEventListener("pointerdown", ignore, true);
+		buttonEl.addEventListener("mousedown", ignore, true);
+		buttonEl.addEventListener("keydown", ignoreActivationKey, true);
+		buttonEl.addEventListener("keyup", ignoreActivationKey, true);
+		return () => {
+			buttonEl.removeEventListener("click", ignore, true);
+			buttonEl.removeEventListener("pointerdown", ignore, true);
+			buttonEl.removeEventListener("mousedown", ignore, true);
+			buttonEl.removeEventListener("keydown", ignoreActivationKey, true);
+			buttonEl.removeEventListener("keyup", ignoreActivationKey, true);
+		};
+	} } }
+});
+
+//#endregion
+//#region Resources/Private/Primitives/Button/src/button.props.ts
+const props = createProps()([
+	"id",
+	"ids",
+	"disabled",
+	"loading",
+	"focusableWhenDisabled"
+]);
+const splitProps = createSplitProps(props);
+
+//#endregion
+//#region Resources/Private/Primitives/Button/Button.ts
+var Button = class extends Component {
+	static componentName = "button";
+	initMachine(props) {
+		const [machineProps] = splitProps(props);
+		return new Machine$1(machine, machineProps);
+	}
+	initApi() {
+		return connect(this.machine, normalizeProps);
+	}
+	render() {
+		const rootEl = this.hydrator.query("root");
+		if (rootEl) this.spreadProps(rootEl, this.api.getRootProps());
+		this.spreadPropsByValue("indicator", ({ value }) => this.api.getIndicatorProps({ state: value }));
+	}
+};
+
+//#endregion
+export { Button };

package/dist/checkbox-group.d.ts

@@ -1,11 +1,12 @@
-import { a as Machine, u as FieldAwareComponent } from "./index-B8JCdyld.js";
-import { t as FieldMachine } from "./form.registry-Cb8Pvoe8.js";
+import { b as FieldClientApi, c as Machine$1, y as FieldAwareComponent } from "./index-B06gIN_k.js";
 import { EventObject } from "@zag-js/core";
 import { PropTypes } from "@zag-js/types";
 
 //#region Resources/Private/Primitives/CheckboxGroup/src/checkbox-group.types.d.ts
 interface CheckboxGroupProps {
+  /** The unique identifier of the checkbox group. */
   id: string;
+  /** The ids of the elements in the checkbox group. Useful for composition. */
   ids?: Record<string, string>;
   /** The initial value of the checkbox group (uncontrolled) */
   defaultValue?: string[];
@@ -88,9 +89,9 @@ interface CheckboxGroupApi {
 //#endregion
 //#region Resources/Private/Primitives/CheckboxGroup/CheckboxGroup.d.ts
 declare class CheckboxGroup extends FieldAwareComponent<CheckboxGroupProps, CheckboxGroupApi> {
-  static name: string;
-  propsWithField(props: CheckboxGroupProps, fieldMachine: FieldMachine): CheckboxGroupProps;
-  initMachine(props: CheckboxGroupProps): Machine<CheckboxGroupSchema>;
+  static componentName: string;
+  propsWithField(props: CheckboxGroupProps, field: FieldClientApi): CheckboxGroupProps;
+  initMachine(props: CheckboxGroupProps): Machine$1<CheckboxGroupSchema>;
   initApi(): CheckboxGroupApi;
   render(): void;
   destroy(): void;

package/dist/checkbox-group.js

@@ -1,7 +1,8 @@
-import { a as Machine, d as FieldAwareComponent, i as mergeProps, r as normalizeProps } from "./Client-C51NSHxg.js";
-import { i as connect, n as registerCheckboxGroup, r as unregisterCheckboxGroup } from "./checkbox-group.registry-CGwuF7SF.js";
-import { a as getLabelId } from "./field.dom-CJQXpQbZ.js";
+import { a as normalizeProps, at as Machine$1, o as mergeProps, s as FieldAwareComponent } from "./Client-HrMIqv7d.js";
+import { i as connect, n as registerCheckboxGroup, r as unregisterCheckboxGroup } from "./checkbox-group.registry-D8P8A4LY.js";
+import { createSplitProps } from "@zag-js/utils";
 import { createMachine } from "@zag-js/core";
+import { createProps } from "@zag-js/types";
 
 //#region Resources/Private/Primitives/CheckboxGroup/src/checkbox-group.machine.ts
 const machine = createMachine({
@@ -70,28 +71,43 @@ const machine = createMachine({
 	} }
 });
 
+//#endregion
+//#region Resources/Private/Primitives/CheckboxGroup/src/checkbox-group.props.ts
+const props = createProps()([
+	"id",
+	"ids",
+	"defaultValue",
+	"value",
+	"name",
+	"form",
+	"disabled",
+	"readOnly",
+	"required",
+	"invalid",
+	"maxSelectedValues",
+	"onValueChange"
+]);
+const splitProps = createSplitProps(props);
+
 //#endregion
 //#region Resources/Private/Primitives/CheckboxGroup/CheckboxGroup.ts
 var CheckboxGroup = class extends FieldAwareComponent {
-	static name = "checkbox-group";
-	propsWithField(props, fieldMachine) {
+	static componentName = "checkboxGroup";
+	propsWithField(props, field) {
 		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: getLabelId(fieldMachine.scope)
-			}
+			disabled: props.disabled ?? field.disabled,
+			readOnly: props.readOnly ?? field.readOnly,
+			required: props.required ?? field.required,
+			invalid: props.invalid ?? field.invalid,
+			name: props.name ?? field.name
 		};
 	}
 	initMachine(props) {
 		props = this.withFieldProps(props);
-		const createdMachine = new Machine(machine, props);
-		registerCheckboxGroup(this.getElement("root"), createdMachine);
+		const [machineProps] = splitProps(props);
+		const createdMachine = new Machine$1(machine, machineProps);
+		registerCheckboxGroup(this.hydrator.query("root"), createdMachine);
 		return createdMachine;
 	}
 	initApi() {
@@ -99,16 +115,16 @@ var CheckboxGroup = class extends FieldAwareComponent {
 	}
 	render() {
 		this.subscribeToFieldService();
-		const rootEl = this.getElement("root");
+		const rootEl = this.hydrator.query("root");
 		if (rootEl) {
-			const mergedProps = mergeProps(this.api.getRootProps(), { "aria-describedby": this.fieldMachine?.context.get("describeIds") || void 0 });
+			const mergedProps = mergeProps(this.api.getRootProps(), { "aria-describedby": this.field?.ariaDescribedby });
 			this.spreadProps(rootEl, mergedProps);
 		}
-		const labelEl = this.getElement("label");
+		const labelEl = this.hydrator.query("label");
 		if (labelEl) this.spreadProps(labelEl, this.api.getLabelProps());
 	}
 	destroy() {
-		unregisterCheckboxGroup(this.getElement("root"));
+		unregisterCheckboxGroup(this.hydrator.query("root"));
 		super.destroy();
 	}
 };

package/dist/{checkbox-group.registry-CGwuF7SF.js → checkbox-group.registry-D8P8A4LY.js}

@@ -1,6 +1,14 @@
+import { createAnatomy } from "@zag-js/anatomy";
+
+//#region Resources/Private/Primitives/CheckboxGroup/src/checkbox-group.anatomy.ts
+const anatomy = createAnatomy("checkbox-group").parts("root", "label");
+const parts = anatomy.build();
+
+//#endregion
 //#region Resources/Private/Primitives/CheckboxGroup/src/checkbox-group.dom.ts
-const getRootId = (scope) => scope.ids?.root ?? `checkbox-group:${scope.id}:root`;
 const getLabelId = (scope) => scope.ids?.label ?? `checkbox-group:${scope.id}:label`;
+/** The group's own label part, or a surrounding Field's label carrying the mapped label id. */
+const getLabelEl = (scope) => scope.query(scope.selector(parts.label)) ?? scope.getById(getLabelId(scope));
 
 //#endregion
 //#region Resources/Private/Primitives/CheckboxGroup/src/checkbox-group.connect.ts
@@ -63,14 +71,12 @@ function connect(service, normalize) {
 		},
 		getRootProps() {
 			return normalize.element({
-				id: getRootId(scope),
+				...parts.root.attrs(scope.id),
 				role: "group",
-				"data-scope": "checkbox-group",
-				"data-part": "root",
 				"data-disabled": disabled ? "" : void 0,
 				"data-readonly": readOnly ? "" : void 0,
 				"data-invalid": invalid ? "" : void 0,
-				"aria-labelledby": getLabelId(scope),
+				"aria-labelledby": getLabelEl(scope) ? getLabelId(scope) : void 0,
 				"aria-disabled": disabled || void 0,
 				"aria-invalid": invalid || void 0,
 				"aria-required": required || void 0
@@ -78,9 +84,8 @@ function connect(service, normalize) {
 		},
 		getLabelProps() {
 			return normalize.element({
+				...parts.label.attrs(scope.id),
 				id: getLabelId(scope),
-				"data-scope": "checkbox-group",
-				"data-part": "label",
 				"data-disabled": disabled ? "" : void 0,
 				"data-readonly": readOnly ? "" : void 0,
 				"data-invalid": invalid ? "" : void 0
@@ -103,7 +108,7 @@ function unregisterCheckboxGroup(root) {
 }
 function getCheckboxGroupMachineFor(el) {
 	if (!el) return void 0;
-	const root = el.closest("[data-scope=\"checkbox-group\"][data-part=\"root\"]");
+	const root = el.closest("[data-checkbox-group-root]");
 	if (!root) return void 0;
 	return registry.get(root);
 }

package/dist/checkbox.d.ts

@@ -1,17 +1,31 @@
-import { a as Machine, d as FieldMachine, u as FieldAwareComponent } from "./index-B8JCdyld.js";
-import * as checkbox from "@zag-js/checkbox";
+import { X as ConverterMachineProps, b as FieldClientApi, c as Machine, y as FieldAwareComponent } from "./index-B06gIN_k.js";
 import * as _$_zag_js_types0 from "@zag-js/types";
+import * as checkbox from "@zag-js/checkbox";
 
 //#region Resources/Private/Primitives/Checkbox/Checkbox.d.ts
+declare const checkboxPropConverters: {
+  defaultChecked: (defaultChecked: checkbox.Props["defaultChecked"]) => checkbox.CheckedState | undefined;
+};
+declare module 'fluid-primitives' {
+  interface HydrationPropsOverrides {
+    checkbox: ConverterMachineProps<typeof checkboxPropConverters>;
+  }
+}
 declare class Checkbox extends FieldAwareComponent<checkbox.Props, checkbox.Api> {
-  static name: string;
+  static componentName: string;
   private checkboxGroupMachine;
   private checkboxGroupApi;
   private groupUnsubscribe;
   private subscribedToGroup;
   private closestCheckboxGroup;
   private syncingFromGroup;
-  propsWithField(props: checkbox.Props, fieldMachine: FieldMachine): checkbox.Props;
+  propsWithField(props: checkbox.Props, field: FieldClientApi): checkbox.Props;
+  /**
+   * A checkbox in a group takes its field state from the group, which carries it to its
+   * checkboxes: the Field's `required` would otherwise mean "every one of them has to be checked".
+   * Mirrors FieldContextVariableMerger's server-side rule.
+   */
+  protected getClosestField(): HTMLElement | null;
   private getClosestCheckboxGroup;
   /**
    * Build props merged with CheckboxGroup context.

package/dist/checkbox.js

@@ -1,35 +1,37 @@
-import { a as Machine, d as FieldAwareComponent, i as mergeProps, r as normalizeProps } from "./Client-C51NSHxg.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 { K as registerClientPropConverters, a as normalizeProps, at as Machine, o as mergeProps, s as FieldAwareComponent } from "./Client-HrMIqv7d.js";
+import { i as connect, t as getCheckboxGroupMachineFor } from "./checkbox-group.registry-D8P8A4LY.js";
 import * as checkbox from "@zag-js/checkbox";
 
 //#region Resources/Private/Primitives/Checkbox/Checkbox.ts
+registerClientPropConverters("checkbox", { defaultChecked: (defaultChecked) => defaultChecked });
 var Checkbox = class extends FieldAwareComponent {
-	static name = "checkbox";
+	static componentName = "checkbox";
 	checkboxGroupMachine;
 	checkboxGroupApi;
 	groupUnsubscribe;
 	subscribedToGroup = false;
 	closestCheckboxGroup = null;
 	syncingFromGroup = false;
-	propsWithField(props, fieldMachine) {
-		const isInGroup = !!this.getClosestCheckboxGroup();
+	propsWithField(props, field) {
 		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)
-			}
+			disabled: props.disabled ?? field.disabled,
+			readOnly: props.readOnly ?? field.readOnly,
+			required: props.required ?? field.required,
+			invalid: props.invalid ?? field.invalid,
+			name: props.name ?? field.name
 		};
 	}
+	/**
+	* A checkbox in a group takes its field state from the group, which carries it to its
+	* checkboxes: the Field's `required` would otherwise mean "every one of them has to be checked".
+	* Mirrors FieldContextVariableMerger's server-side rule.
+	*/
+	getClosestField() {
+		return this.getClosestCheckboxGroup() ? null : super.getClosestField();
+	}
 	getClosestCheckboxGroup() {
-		return this.closestCheckboxGroup || this.getElement("root")?.closest("[data-scope=\"checkbox-group\"][data-part=\"root\"]");
+		return this.closestCheckboxGroup || this.hydrator.query("root")?.closest("[data-checkbox-group-root]");
 	}
 	/**
 	* Build props merged with CheckboxGroup context.
@@ -78,7 +80,8 @@ var Checkbox = class extends FieldAwareComponent {
 	initMachine(props) {
 		props = this.withFieldProps(props);
 		props = this.withGroupProps(props);
-		return new Machine(checkbox.machine, props);
+		const [machineProps] = checkbox.splitProps(props);
+		return new Machine(checkbox.machine, machineProps);
 	}
 	initApi() {
 		return checkbox.connect(this.machine.service, normalizeProps);
@@ -86,17 +89,17 @@ var Checkbox = class extends FieldAwareComponent {
 	render() {
 		this.subscribeToFieldService();
 		this.subscribeToCheckboxGroup();
-		const rootEl = this.getElement("root");
+		const rootEl = this.hydrator.query("root");
 		if (rootEl) this.spreadProps(rootEl, this.api.getRootProps());
-		const labelEl = this.getElement("label");
+		const labelEl = this.hydrator.query("label");
 		if (labelEl) this.spreadProps(labelEl, this.api.getLabelProps());
-		const controlEl = this.getElement("control");
+		const controlEl = this.hydrator.query("control");
 		if (controlEl) this.spreadProps(controlEl, this.api.getControlProps());
-		const indicatorEl = this.getElement("indicator");
+		const indicatorEl = this.hydrator.query("indicator");
 		if (indicatorEl) this.spreadProps(indicatorEl, this.api.getIndicatorProps());
-		const hiddenInputEl = this.getElement("hidden-input");
+		const hiddenInputEl = this.hydrator.query("hiddenInput");
 		if (hiddenInputEl) {
-			const mergedProps = mergeProps(this.api.getHiddenInputProps(), { "aria-describedby": this.fieldMachine?.context.get("describeIds") || void 0 });
+			const mergedProps = mergeProps(this.api.getHiddenInputProps(), { "aria-describedby": this.field?.ariaDescribedby });
 			this.spreadProps(hiddenInputEl, mergedProps);
 		}
 	}
@@ -109,8 +112,8 @@ var Checkbox = class extends FieldAwareComponent {
 		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;
+		if (this.checkboxGroupMachine && this.machine.prop("value")) {
+			const value = this.machine.prop("value");
 			this.groupUnsubscribe = this.checkboxGroupMachine.subscribe(() => {
 				queueMicrotask(() => {
 					this.checkboxGroupApi = connect(this.checkboxGroupMachine.service, normalizeProps);
@@ -124,7 +127,7 @@ var Checkbox = class extends FieldAwareComponent {
 						});
 					}
 					this.machine.updateProps({
-						disabled: this.userProps?.disabled || groupItemProps.disabled,
+						disabled: this.machine.prop("disabled") || groupItemProps.disabled,
 						invalid: groupItemProps.invalid
 					});
 				});

package/dist/client.d.ts

@@ -1,2 +1,2 @@
-import { a as Machine, c as mount, f as Component, h as FluidPrimitivesGlobals, i as mergeProps, l as mountControlled, m as ComponentInterface, n as spreadProps, o as ComponentHydrator, p as ComponentHydrationData, r as normalizeProps, s as getHydrationData, t as uid, u as FieldAwareComponent } from "./index-B8JCdyld.js";
-export { Component, ComponentHydrationData, ComponentHydrator, ComponentInterface, FieldAwareComponent, FluidPrimitivesGlobals, Machine, getHydrationData, mergeProps, mount, mountControlled, normalizeProps, spreadProps, uid };
+import { $ as AsyncList, B as ComponentHydrationData, G as HydrationPropsRegistry, H as FluidPrimitivesGlobals, I as extbase, J as ClientPropConverter, K as KnownComponentName, L as DelayedIndicator, Q as registerClientPropConverters, R as DelayedIndicatorOptions, U as HydrationPropsFor, V as ComponentInterface, W as HydrationPropsOverrides, X as ConverterMachineProps, Y as ClientPropConverterMap, Z as applyClientPropConverters, _ as mountAll, a as spreadTextControlProps, c as Machine, d as getComponentInstance, et as AsyncListOptions, f as getGlobal, g as mount, i as spreadProps, l as ComponentHydrator, m as getHydrationData, n as Template, o as normalizeProps, p as getGlobals, q as NestedComponentEntry, r as TemplateOptions, s as mergeProps, t as uid, u as destroyComponentsWithin, v as toKebabCase, y as FieldAwareComponent, z as Component } from "./index-B06gIN_k.js";
+export { AsyncList, AsyncListOptions, ClientPropConverter, ClientPropConverterMap, Component, ComponentHydrationData, ComponentHydrator, ComponentInterface, ConverterMachineProps, DelayedIndicator, DelayedIndicatorOptions, FieldAwareComponent, FluidPrimitivesGlobals, HydrationPropsFor, HydrationPropsOverrides, HydrationPropsRegistry, KnownComponentName, Machine, NestedComponentEntry, Template, TemplateOptions, applyClientPropConverters, destroyComponentsWithin, extbase, getComponentInstance, getGlobal, getGlobals, getHydrationData, mergeProps, mount, mountAll, normalizeProps, registerClientPropConverters, spreadProps, spreadTextControlProps, toKebabCase, uid };

package/dist/client.js

@@ -1,3 +1,3 @@
-import { a as Machine, d as FieldAwareComponent, i as mergeProps, l as mount, n as spreadProps, o as ComponentHydrator, p as Component, r as normalizeProps, s as getHydrationData, t as uid, u as mountControlled } from "./Client-C51NSHxg.js";
+import { G as applyClientPropConverters, J as destroyComponentsWithin, K as registerClientPropConverters, Q as getHydrationData, U as extbase, W as DelayedIndicator, X as getGlobal, Y as getComponentInstance, Z as getGlobals, a as normalizeProps, at as Machine, et as mount, i as spreadTextControlProps, it as AsyncList, n as Template, nt as toKebabCase, o as mergeProps, q as ComponentHydrator, r as spreadProps, rt as Component, s as FieldAwareComponent, t as uid, tt as mountAll } from "./Client-HrMIqv7d.js";
 
-export { Component, ComponentHydrator, FieldAwareComponent, Machine, getHydrationData, mergeProps, mount, mountControlled, normalizeProps, spreadProps, uid };
+export { AsyncList, Component, ComponentHydrator, DelayedIndicator, FieldAwareComponent, Machine, Template, applyClientPropConverters, destroyComponentsWithin, extbase, getComponentInstance, getGlobal, getGlobals, getHydrationData, mergeProps, mount, mountAll, normalizeProps, registerClientPropConverters, spreadProps, spreadTextControlProps, toKebabCase, uid };

package/dist/clipboard.d.ts

@@ -1,11 +1,18 @@
-import { a as Machine, f as Component } from "./index-B8JCdyld.js";
-import * as clipboard from "@zag-js/clipboard";
+import { c as Machine, z as Component } from "./index-B06gIN_k.js";
 import * as _$_zag_js_types0 from "@zag-js/types";
+import * as clipboard from "@zag-js/clipboard";
 
 //#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>;
+type ClipboardProps = Omit<clipboard.Props, 'translations'> & {
+  translations?: {
+    triggerLabelIdle?: string;
+    triggerLabelCopied?: string;
+  };
+};
+declare class Clipboard extends Component<ClipboardProps, clipboard.Api> {
+  static componentName: string;
+  private translations;
+  initMachine(props: ClipboardProps): Machine<any>;
   initApi(): clipboard.Api<_$_zag_js_types0.PropTypes<{
     [x: string]: any;
   }>>;