@ark-ui/react 5.37.1 → 5.38.0

package/dist/components/date-picker/date-picker-content.cjs

@@ -1,6 +1,7 @@
 "use client";
 const require_compose_refs = require("../../utils/compose-refs.cjs");
 const require_factory = require("../factory.cjs");
+const require_presence_gate = require("../presence/presence-gate.cjs");
 const require_use_presence_context = require("../presence/use-presence-context.cjs");
 const require_use_date_picker_context = require("./use-date-picker-context.cjs");
 let react = require("react");
@@ -11,10 +12,13 @@ var DatePickerContent = (0, react.forwardRef)((props, ref) => {
 	const datePicker = require_use_date_picker_context.useDatePickerContext();
 	const presence = require_use_presence_context.usePresenceContext();
 	const mergedProps = (0, _zag_js_react.mergeProps)(datePicker.getContentProps(), presence.getPresenceProps(), props);
-	if (presence.unmounted) return null;
-	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_factory.ark.div, {
-		...mergedProps,
-		ref: require_compose_refs.composeRefs(presence.ref, ref)
+	const composedRefs = require_compose_refs.useComposedRefs(presence.ref, ref);
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_presence_gate.PresenceGate, {
+		presence,
+		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_factory.ark.div, {
+			...mergedProps,
+			ref: composedRefs
+		})
 	});
 });
 DatePickerContent.displayName = "DatePickerContent";

package/dist/components/date-picker/date-picker-content.js

@@ -1,6 +1,7 @@
 "use client";
-import { composeRefs } from "../../utils/compose-refs.js";
+import { useComposedRefs } from "../../utils/compose-refs.js";
 import { ark } from "../factory.js";
+import { PresenceGate } from "../presence/presence-gate.js";
 import { usePresenceContext } from "../presence/use-presence-context.js";
 import { useDatePickerContext } from "./use-date-picker-context.js";
 import { forwardRef } from "react";
@@ -11,10 +12,13 @@ var DatePickerContent = forwardRef((props, ref) => {
 	const datePicker = useDatePickerContext();
 	const presence = usePresenceContext();
 	const mergedProps = mergeProps(datePicker.getContentProps(), presence.getPresenceProps(), props);
-	if (presence.unmounted) return null;
-	return /* @__PURE__ */ jsx(ark.div, {
-		...mergedProps,
-		ref: composeRefs(presence.ref, ref)
+	const composedRefs = useComposedRefs(presence.ref, ref);
+	return /* @__PURE__ */ jsx(PresenceGate, {
+		presence,
+		children: /* @__PURE__ */ jsx(ark.div, {
+			...mergedProps,
+			ref: composedRefs
+		})
 	});
 });
 DatePickerContent.displayName = "DatePickerContent";

package/dist/components/date-picker/date-picker.cjs

@@ -61,6 +61,35 @@ var date_picker_exports = /* @__PURE__ */ require_runtime.__exportAll({
 	YearSelect: () => require_date_picker_year_select.DatePickerYearSelect
 });
 //#endregion
+exports.ClearTrigger = require_date_picker_clear_trigger.DatePickerClearTrigger;
+exports.Content = require_date_picker_content.DatePickerContent;
+exports.Context = require_date_picker_context.DatePickerContext;
+exports.Control = require_date_picker_control.DatePickerControl;
+exports.Input = require_date_picker_input.DatePickerInput;
+exports.Label = require_date_picker_label.DatePickerLabel;
+exports.MonthSelect = require_date_picker_month_select.DatePickerMonthSelect;
+exports.NextTrigger = require_date_picker_next_trigger.DatePickerNextTrigger;
+exports.Positioner = require_date_picker_positioner.DatePickerPositioner;
+exports.PresetTrigger = require_date_picker_preset_trigger.DatePickerPresetTrigger;
+exports.PrevTrigger = require_date_picker_prev_trigger.DatePickerPrevTrigger;
+exports.RangeText = require_date_picker_range_text.DatePickerRangeText;
+exports.Root = require_date_picker_root.DatePickerRoot;
+exports.RootProvider = require_date_picker_root_provider.DatePickerRootProvider;
+exports.Table = require_date_picker_table.DatePickerTable;
+exports.TableBody = require_date_picker_table_body.DatePickerTableBody;
+exports.TableCell = require_date_picker_table_cell.DatePickerTableCell;
+exports.TableCellTrigger = require_date_picker_table_cell_trigger.DatePickerTableCellTrigger;
+exports.TableHead = require_date_picker_table_head.DatePickerTableHead;
+exports.TableHeader = require_date_picker_table_header.DatePickerTableHeader;
+exports.TableRow = require_date_picker_table_row.DatePickerTableRow;
+exports.Trigger = require_date_picker_trigger.DatePickerTrigger;
+exports.ValueText = require_date_picker_value_text.DatePickerValueText;
+exports.View = require_date_picker_view.DatePickerView;
+exports.ViewControl = require_date_picker_view_control.DatePickerViewControl;
+exports.ViewTrigger = require_date_picker_view_trigger.DatePickerViewTrigger;
+exports.WeekNumberCell = require_date_picker_week_number_cell.DatePickerWeekNumberCell;
+exports.WeekNumberHeaderCell = require_date_picker_week_number_header_cell.DatePickerWeekNumberHeaderCell;
+exports.YearSelect = require_date_picker_year_select.DatePickerYearSelect;
 Object.defineProperty(exports, "date_picker_exports", {
 	enumerable: true,
 	get: function() {

package/dist/components/date-picker/date-picker.js

@@ -61,4 +61,4 @@ var date_picker_exports = /* @__PURE__ */ __exportAll({
 	YearSelect: () => DatePickerYearSelect
 });
 //#endregion
-export { date_picker_exports };
+export { DatePickerClearTrigger as ClearTrigger, DatePickerContent as Content, DatePickerContext as Context, DatePickerControl as Control, DatePickerInput as Input, DatePickerLabel as Label, DatePickerMonthSelect as MonthSelect, DatePickerNextTrigger as NextTrigger, DatePickerPositioner as Positioner, DatePickerPresetTrigger as PresetTrigger, DatePickerPrevTrigger as PrevTrigger, DatePickerRangeText as RangeText, DatePickerRoot as Root, DatePickerRootProvider as RootProvider, DatePickerTable as Table, DatePickerTableBody as TableBody, DatePickerTableCell as TableCell, DatePickerTableCellTrigger as TableCellTrigger, DatePickerTableHead as TableHead, DatePickerTableHeader as TableHeader, DatePickerTableRow as TableRow, DatePickerTrigger as Trigger, DatePickerValueText as ValueText, DatePickerView as View, DatePickerViewControl as ViewControl, DatePickerViewTrigger as ViewTrigger, DatePickerWeekNumberCell as WeekNumberCell, DatePickerWeekNumberHeaderCell as WeekNumberHeaderCell, DatePickerYearSelect as YearSelect, date_picker_exports };

package/dist/components/dialog/dialog-backdrop.cjs

@@ -2,6 +2,7 @@
 const require_render_strategy = require("../../utils/render-strategy.cjs");
 const require_compose_refs = require("../../utils/compose-refs.cjs");
 const require_factory = require("../factory.cjs");
+const require_presence_gate = require("../presence/presence-gate.cjs");
 const require_use_presence = require("../presence/use-presence.cjs");
 const require_use_dialog_context = require("./use-dialog-context.cjs");
 let react = require("react");
@@ -15,10 +16,13 @@ var DialogBackdrop = (0, react.forwardRef)((props, ref) => {
 		present: dialog.open
 	});
 	const mergedProps = (0, _zag_js_react.mergeProps)(dialog.getBackdropProps(), presence.getPresenceProps(), props);
-	if (presence.unmounted) return null;
-	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_factory.ark.div, {
-		...mergedProps,
-		ref: require_compose_refs.composeRefs(presence.ref, ref)
+	const composedRefs = require_compose_refs.useComposedRefs(presence.ref, ref);
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_presence_gate.PresenceGate, {
+		presence,
+		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_factory.ark.div, {
+			...mergedProps,
+			ref: composedRefs
+		})
 	});
 });
 DialogBackdrop.displayName = "DialogBackdrop";

package/dist/components/dialog/dialog-backdrop.js

@@ -1,7 +1,8 @@
 "use client";
 import { useRenderStrategyPropsContext } from "../../utils/render-strategy.js";
-import { composeRefs } from "../../utils/compose-refs.js";
+import { useComposedRefs } from "../../utils/compose-refs.js";
 import { ark } from "../factory.js";
+import { PresenceGate } from "../presence/presence-gate.js";
 import { usePresence } from "../presence/use-presence.js";
 import { useDialogContext } from "./use-dialog-context.js";
 import { forwardRef } from "react";
@@ -15,10 +16,13 @@ var DialogBackdrop = forwardRef((props, ref) => {
 		present: dialog.open
 	});
 	const mergedProps = mergeProps(dialog.getBackdropProps(), presence.getPresenceProps(), props);
-	if (presence.unmounted) return null;
-	return /* @__PURE__ */ jsx(ark.div, {
-		...mergedProps,
-		ref: composeRefs(presence.ref, ref)
+	const composedRefs = useComposedRefs(presence.ref, ref);
+	return /* @__PURE__ */ jsx(PresenceGate, {
+		presence,
+		children: /* @__PURE__ */ jsx(ark.div, {
+			...mergedProps,
+			ref: composedRefs
+		})
 	});
 });
 DialogBackdrop.displayName = "DialogBackdrop";

package/dist/components/dialog/dialog-content.cjs

@@ -1,6 +1,7 @@
 "use client";
 const require_compose_refs = require("../../utils/compose-refs.cjs");
 const require_factory = require("../factory.cjs");
+const require_presence_gate = require("../presence/presence-gate.cjs");
 const require_use_presence_context = require("../presence/use-presence-context.cjs");
 const require_use_dialog_context = require("./use-dialog-context.cjs");
 let react = require("react");
@@ -11,10 +12,13 @@ var DialogContent = (0, react.forwardRef)((props, ref) => {
 	const dialog = require_use_dialog_context.useDialogContext();
 	const presence = require_use_presence_context.usePresenceContext();
 	const mergedProps = (0, _zag_js_react.mergeProps)(dialog.getContentProps(), presence.getPresenceProps(), props);
-	if (presence.unmounted) return null;
-	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_factory.ark.div, {
-		...mergedProps,
-		ref: require_compose_refs.composeRefs(presence.ref, ref)
+	const composedRefs = require_compose_refs.useComposedRefs(presence.ref, ref);
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_presence_gate.PresenceGate, {
+		presence,
+		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_factory.ark.div, {
+			...mergedProps,
+			ref: composedRefs
+		})
 	});
 });
 DialogContent.displayName = "DialogContent";

package/dist/components/dialog/dialog-content.js

@@ -1,6 +1,7 @@
 "use client";
-import { composeRefs } from "../../utils/compose-refs.js";
+import { useComposedRefs } from "../../utils/compose-refs.js";
 import { ark } from "../factory.js";
+import { PresenceGate } from "../presence/presence-gate.js";
 import { usePresenceContext } from "../presence/use-presence-context.js";
 import { useDialogContext } from "./use-dialog-context.js";
 import { forwardRef } from "react";
@@ -11,10 +12,13 @@ var DialogContent = forwardRef((props, ref) => {
 	const dialog = useDialogContext();
 	const presence = usePresenceContext();
 	const mergedProps = mergeProps(dialog.getContentProps(), presence.getPresenceProps(), props);
-	if (presence.unmounted) return null;
-	return /* @__PURE__ */ jsx(ark.div, {
-		...mergedProps,
-		ref: composeRefs(presence.ref, ref)
+	const composedRefs = useComposedRefs(presence.ref, ref);
+	return /* @__PURE__ */ jsx(PresenceGate, {
+		presence,
+		children: /* @__PURE__ */ jsx(ark.div, {
+			...mergedProps,
+			ref: composedRefs
+		})
 	});
 });
 DialogContent.displayName = "DialogContent";

package/dist/components/dialog/dialog.cjs

@@ -23,6 +23,16 @@ var dialog_exports = /* @__PURE__ */ require_runtime.__exportAll({
 	Trigger: () => require_dialog_trigger.DialogTrigger
 });
 //#endregion
+exports.Backdrop = require_dialog_backdrop.DialogBackdrop;
+exports.CloseTrigger = require_dialog_close_trigger.DialogCloseTrigger;
+exports.Content = require_dialog_content.DialogContent;
+exports.Context = require_dialog_context.DialogContext;
+exports.Description = require_dialog_description.DialogDescription;
+exports.Positioner = require_dialog_positioner.DialogPositioner;
+exports.Root = require_dialog_root.DialogRoot;
+exports.RootProvider = require_dialog_root_provider.DialogRootProvider;
+exports.Title = require_dialog_title.DialogTitle;
+exports.Trigger = require_dialog_trigger.DialogTrigger;
 Object.defineProperty(exports, "dialog_exports", {
 	enumerable: true,
 	get: function() {

package/dist/components/dialog/dialog.js

@@ -23,4 +23,4 @@ var dialog_exports = /* @__PURE__ */ __exportAll({
 	Trigger: () => DialogTrigger
 });
 //#endregion
-export { dialog_exports };
+export { DialogBackdrop as Backdrop, DialogCloseTrigger as CloseTrigger, DialogContent as Content, DialogContext as Context, DialogDescription as Description, DialogPositioner as Positioner, DialogRoot as Root, DialogRootProvider as RootProvider, DialogTitle as Title, DialogTrigger as Trigger, dialog_exports };

package/dist/components/drawer/drawer-backdrop.cjs

@@ -2,6 +2,7 @@
 const require_render_strategy = require("../../utils/render-strategy.cjs");
 const require_compose_refs = require("../../utils/compose-refs.cjs");
 const require_factory = require("../factory.cjs");
+const require_presence_gate = require("../presence/presence-gate.cjs");
 const require_use_presence = require("../presence/use-presence.cjs");
 const require_use_drawer_context = require("./use-drawer-context.cjs");
 let react = require("react");
@@ -15,10 +16,13 @@ var DrawerBackdrop = (0, react.forwardRef)((props, ref) => {
 		present: drawer.open
 	});
 	const mergedProps = (0, _zag_js_react.mergeProps)(drawer.getBackdropProps(), presence.getPresenceProps(), props);
-	if (presence.unmounted) return null;
-	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_factory.ark.div, {
-		...mergedProps,
-		ref: require_compose_refs.composeRefs(presence.ref, ref)
+	const composedRefs = require_compose_refs.useComposedRefs(presence.ref, ref);
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_presence_gate.PresenceGate, {
+		presence,
+		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_factory.ark.div, {
+			...mergedProps,
+			ref: composedRefs
+		})
 	});
 });
 DrawerBackdrop.displayName = "DrawerBackdrop";

package/dist/components/drawer/drawer-backdrop.js

@@ -1,7 +1,8 @@
 "use client";
 import { useRenderStrategyPropsContext } from "../../utils/render-strategy.js";
-import { composeRefs } from "../../utils/compose-refs.js";
+import { useComposedRefs } from "../../utils/compose-refs.js";
 import { ark } from "../factory.js";
+import { PresenceGate } from "../presence/presence-gate.js";
 import { usePresence } from "../presence/use-presence.js";
 import { useDrawerContext } from "./use-drawer-context.js";
 import { forwardRef } from "react";
@@ -15,10 +16,13 @@ var DrawerBackdrop = forwardRef((props, ref) => {
 		present: drawer.open
 	});
 	const mergedProps = mergeProps(drawer.getBackdropProps(), presence.getPresenceProps(), props);
-	if (presence.unmounted) return null;
-	return /* @__PURE__ */ jsx(ark.div, {
-		...mergedProps,
-		ref: composeRefs(presence.ref, ref)
+	const composedRefs = useComposedRefs(presence.ref, ref);
+	return /* @__PURE__ */ jsx(PresenceGate, {
+		presence,
+		children: /* @__PURE__ */ jsx(ark.div, {
+			...mergedProps,
+			ref: composedRefs
+		})
 	});
 });
 DrawerBackdrop.displayName = "DrawerBackdrop";

package/dist/components/drawer/drawer-content.cjs

@@ -2,6 +2,7 @@
 const require_create_split_props = require("../../utils/create-split-props.cjs");
 const require_compose_refs = require("../../utils/compose-refs.cjs");
 const require_factory = require("../factory.cjs");
+const require_presence_gate = require("../presence/presence-gate.cjs");
 const require_use_presence_context = require("../presence/use-presence-context.cjs");
 const require_use_drawer_context = require("./use-drawer-context.cjs");
 let react = require("react");
@@ -17,10 +18,13 @@ var DrawerContent = (0, react.forwardRef)((props, ref) => {
 		draggable: true,
 		...contentProps
 	}), presence.getPresenceProps(), localProps);
-	if (presence.unmounted) return null;
-	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_factory.ark.div, {
-		...mergedProps,
-		ref: require_compose_refs.composeRefs(presence.ref, ref)
+	const composedRefs = require_compose_refs.useComposedRefs(presence.ref, ref);
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_presence_gate.PresenceGate, {
+		presence,
+		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_factory.ark.div, {
+			...mergedProps,
+			ref: composedRefs
+		})
 	});
 });
 DrawerContent.displayName = "DrawerContent";

package/dist/components/drawer/drawer-content.js

@@ -1,7 +1,8 @@
 "use client";
 import { createSplitProps } from "../../utils/create-split-props.js";
-import { composeRefs } from "../../utils/compose-refs.js";
+import { useComposedRefs } from "../../utils/compose-refs.js";
 import { ark } from "../factory.js";
+import { PresenceGate } from "../presence/presence-gate.js";
 import { usePresenceContext } from "../presence/use-presence-context.js";
 import { useDrawerContext } from "./use-drawer-context.js";
 import { forwardRef } from "react";
@@ -17,10 +18,13 @@ var DrawerContent = forwardRef((props, ref) => {
 		draggable: true,
 		...contentProps
 	}), presence.getPresenceProps(), localProps);
-	if (presence.unmounted) return null;
-	return /* @__PURE__ */ jsx(ark.div, {
-		...mergedProps,
-		ref: composeRefs(presence.ref, ref)
+	const composedRefs = useComposedRefs(presence.ref, ref);
+	return /* @__PURE__ */ jsx(PresenceGate, {
+		presence,
+		children: /* @__PURE__ */ jsx(ark.div, {
+			...mergedProps,
+			ref: composedRefs
+		})
 	});
 });
 DrawerContent.displayName = "DrawerContent";

package/dist/components/drawer/drawer.cjs

@@ -35,6 +35,22 @@ var drawer_exports = /* @__PURE__ */ require_runtime.__exportAll({
 	Trigger: () => require_drawer_trigger.DrawerTrigger
 });
 //#endregion
+exports.Backdrop = require_drawer_backdrop.DrawerBackdrop;
+exports.CloseTrigger = require_drawer_close_trigger.DrawerCloseTrigger;
+exports.Content = require_drawer_content.DrawerContent;
+exports.Context = require_drawer_context.DrawerContext;
+exports.Description = require_drawer_description.DrawerDescription;
+exports.Grabber = require_drawer_grabber.DrawerGrabber;
+exports.GrabberIndicator = require_drawer_grabber_indicator.DrawerGrabberIndicator;
+exports.Indent = require_drawer_indent.DrawerIndent;
+exports.IndentBackground = require_drawer_indent_background.DrawerIndentBackground;
+exports.Positioner = require_drawer_positioner.DrawerPositioner;
+exports.Root = require_drawer_root.DrawerRoot;
+exports.RootProvider = require_drawer_root_provider.DrawerRootProvider;
+exports.Stack = require_drawer_stack.DrawerStack;
+exports.SwipeArea = require_drawer_swipe_area.DrawerSwipeArea;
+exports.Title = require_drawer_title.DrawerTitle;
+exports.Trigger = require_drawer_trigger.DrawerTrigger;
 Object.defineProperty(exports, "drawer_exports", {
 	enumerable: true,
 	get: function() {

package/dist/components/drawer/drawer.js

@@ -35,4 +35,4 @@ var drawer_exports = /* @__PURE__ */ __exportAll({
 	Trigger: () => DrawerTrigger
 });
 //#endregion
-export { drawer_exports };
+export { DrawerBackdrop as Backdrop, DrawerCloseTrigger as CloseTrigger, DrawerContent as Content, DrawerContext as Context, DrawerDescription as Description, DrawerGrabber as Grabber, DrawerGrabberIndicator as GrabberIndicator, DrawerIndent as Indent, DrawerIndentBackground as IndentBackground, DrawerPositioner as Positioner, DrawerRoot as Root, DrawerRootProvider as RootProvider, DrawerStack as Stack, DrawerSwipeArea as SwipeArea, DrawerTitle as Title, DrawerTrigger as Trigger, drawer_exports };

package/dist/components/editable/editable.cjs

@@ -25,6 +25,17 @@ var editable_exports = /* @__PURE__ */ require_runtime.__exportAll({
 	SubmitTrigger: () => require_editable_submit_trigger.EditableSubmitTrigger
 });
 //#endregion
+exports.Area = require_editable_area.EditableArea;
+exports.CancelTrigger = require_editable_cancel_trigger.EditableCancelTrigger;
+exports.Context = require_editable_context.EditableContext;
+exports.Control = require_editable_control.EditableControl;
+exports.EditTrigger = require_editable_edit_trigger.EditableEditTrigger;
+exports.Input = require_editable_input.EditableInput;
+exports.Label = require_editable_label.EditableLabel;
+exports.Preview = require_editable_preview.EditablePreview;
+exports.Root = require_editable_root.EditableRoot;
+exports.RootProvider = require_editable_root_provider.EditableRootProvider;
+exports.SubmitTrigger = require_editable_submit_trigger.EditableSubmitTrigger;
 Object.defineProperty(exports, "editable_exports", {
 	enumerable: true,
 	get: function() {

package/dist/components/editable/editable.js

@@ -25,4 +25,4 @@ var editable_exports = /* @__PURE__ */ __exportAll({
 	SubmitTrigger: () => EditableSubmitTrigger
 });
 //#endregion
-export { editable_exports };
+export { EditableArea as Area, EditableCancelTrigger as CancelTrigger, EditableContext as Context, EditableControl as Control, EditableEditTrigger as EditTrigger, EditableInput as Input, EditableLabel as Label, EditablePreview as Preview, EditableRoot as Root, EditableRootProvider as RootProvider, EditableSubmitTrigger as SubmitTrigger, editable_exports };

package/dist/components/factory.cjs

@@ -14,16 +14,17 @@ function getRef(element) {
 var withAsChild = (Component) => {
 	const Comp = (0, react.memo)((0, react.forwardRef)((props, ref) => {
 		const { asChild, children, ...restProps } = props;
+		const onlyChild = asChild && (0, react.isValidElement)(children) ? react.Children.only(children) : void 0;
+		const childRef = onlyChild ? getRef(onlyChild) : void 0;
+		const composedRef = require_compose_refs.useComposedRefs(ref, childRef);
 		if (!asChild) return (0, react.createElement)(Component, {
 			...restProps,
 			ref
 		}, children);
-		if (!(0, react.isValidElement)(children)) return null;
-		const onlyChild = react.Children.only(children);
-		const childRef = getRef(onlyChild);
+		if (!onlyChild) return null;
 		return (0, react.cloneElement)(onlyChild, {
 			...(0, _zag_js_core.mergeProps)(restProps, onlyChild.props),
-			ref: ref ? require_compose_refs.composeRefs(ref, childRef) : childRef
+			ref: ref ? composedRef : childRef
 		});
 	}));
 	Comp.displayName = Component.displayName || Component.name;

package/dist/components/factory.js

@@ -1,4 +1,4 @@
-import { composeRefs } from "../utils/compose-refs.js";
+import { useComposedRefs } from "../utils/compose-refs.js";
 import { Children, cloneElement, createElement, forwardRef, isValidElement, memo } from "react";
 import { mergeProps } from "@zag-js/core";
 //#region src/components/factory.ts
@@ -14,16 +14,17 @@ function getRef(element) {
 var withAsChild = (Component) => {
 	const Comp = memo(forwardRef((props, ref) => {
 		const { asChild, children, ...restProps } = props;
+		const onlyChild = asChild && isValidElement(children) ? Children.only(children) : void 0;
+		const childRef = onlyChild ? getRef(onlyChild) : void 0;
+		const composedRef = useComposedRefs(ref, childRef);
 		if (!asChild) return createElement(Component, {
 			...restProps,
 			ref
 		}, children);
-		if (!isValidElement(children)) return null;
-		const onlyChild = Children.only(children);
-		const childRef = getRef(onlyChild);
+		if (!onlyChild) return null;
 		return cloneElement(onlyChild, {
 			...mergeProps(restProps, onlyChild.props),
-			ref: ref ? composeRefs(ref, childRef) : childRef
+			ref: ref ? composedRef : childRef
 		});
 	}));
 	Comp.displayName = Component.displayName || Component.name;

package/dist/components/field/field-root.cjs

@@ -21,11 +21,12 @@ var FieldRoot = (0, react.forwardRef)((props, ref) => {
 	]);
 	const field = require_use_field.useField(useFieldProps);
 	const mergedProps = (0, _zag_js_react.mergeProps)(field.getRootProps(), localProps);
+	const composedRefs = require_compose_refs.useComposedRefs(ref, field.refs.rootRef);
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_use_field_context.FieldProvider, {
 		value: field,
 		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_factory.ark.div, {
 			...mergedProps,
-			ref: require_compose_refs.composeRefs(ref, field.refs.rootRef)
+			ref: composedRefs
 		})
 	});
 });

package/dist/components/field/field-root.js

@@ -1,6 +1,6 @@
 "use client";
 import { createSplitProps } from "../../utils/create-split-props.js";
-import { composeRefs } from "../../utils/compose-refs.js";
+import { useComposedRefs } from "../../utils/compose-refs.js";
 import { ark } from "../factory.js";
 import { FieldProvider } from "./use-field-context.js";
 import { useField } from "./use-field.js";
@@ -21,11 +21,12 @@ var FieldRoot = forwardRef((props, ref) => {
 	]);
 	const field = useField(useFieldProps);
 	const mergedProps = mergeProps(field.getRootProps(), localProps);
+	const composedRefs = useComposedRefs(ref, field.refs.rootRef);
 	return /* @__PURE__ */ jsx(FieldProvider, {
 		value: field,
 		children: /* @__PURE__ */ jsx(ark.div, {
 			...mergedProps,
-			ref: composeRefs(ref, field.refs.rootRef)
+			ref: composedRefs
 		})
 	});
 });

package/dist/components/field/field-textarea.cjs

@@ -11,13 +11,14 @@ var FieldTextarea = (0, react.forwardRef)((props, ref) => {
 	const { autoresize, ...textareaProps } = props;
 	const textareaRef = (0, react.useRef)(null);
 	const mergedProps = (0, _zag_js_react.mergeProps)(require_use_field_context.useFieldContext()?.getTextareaProps(), { style: { resize: autoresize ? "none" : void 0 } }, textareaProps);
+	const composedRefs = require_compose_refs.useComposedRefs(ref, textareaRef);
 	(0, react.useEffect)(() => {
 		if (!autoresize) return;
 		return (0, _zag_js_auto_resize.autoresizeTextarea)(textareaRef.current);
 	}, [autoresize]);
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_factory.ark.textarea, {
 		...mergedProps,
-		ref: require_compose_refs.composeRefs(ref, textareaRef)
+		ref: composedRefs
 	});
 });
 FieldTextarea.displayName = "FieldTextarea";

package/dist/components/field/field-textarea.js

@@ -1,5 +1,5 @@
 "use client";
-import { composeRefs } from "../../utils/compose-refs.js";
+import { useComposedRefs } from "../../utils/compose-refs.js";
 import { ark } from "../factory.js";
 import { useFieldContext } from "./use-field-context.js";
 import { forwardRef, useEffect, useRef } from "react";
@@ -11,13 +11,14 @@ var FieldTextarea = forwardRef((props, ref) => {
 	const { autoresize, ...textareaProps } = props;
 	const textareaRef = useRef(null);
 	const mergedProps = mergeProps(useFieldContext()?.getTextareaProps(), { style: { resize: autoresize ? "none" : void 0 } }, textareaProps);
+	const composedRefs = useComposedRefs(ref, textareaRef);
 	useEffect(() => {
 		if (!autoresize) return;
 		return autoresizeTextarea(textareaRef.current);
 	}, [autoresize]);
 	return /* @__PURE__ */ jsx(ark.textarea, {
 		...mergedProps,
-		ref: composeRefs(ref, textareaRef)
+		ref: composedRefs
 	});
 });
 FieldTextarea.displayName = "FieldTextarea";

package/dist/components/field/field.cjs

@@ -25,6 +25,17 @@ var field_exports = /* @__PURE__ */ require_runtime.__exportAll({
 	Textarea: () => require_field_textarea.FieldTextarea
 });
 //#endregion
+exports.Context = require_field_context.FieldContext;
+exports.ErrorText = require_field_error_text.FieldErrorText;
+exports.HelperText = require_field_helper_text.FieldHelperText;
+exports.Input = require_field_input.FieldInput;
+exports.Item = require_field_item.FieldItem;
+exports.Label = require_field_label.FieldLabel;
+exports.RequiredIndicator = require_field_required_indicator.FieldRequiredIndicator;
+exports.Root = require_field_root.FieldRoot;
+exports.RootProvider = require_field_root_provider.FieldRootProvider;
+exports.Select = require_field_select.FieldSelect;
+exports.Textarea = require_field_textarea.FieldTextarea;
 Object.defineProperty(exports, "field_exports", {
 	enumerable: true,
 	get: function() {

package/dist/components/field/field.js

@@ -25,4 +25,4 @@ var field_exports = /* @__PURE__ */ __exportAll({
 	Textarea: () => FieldTextarea
 });
 //#endregion
-export { field_exports };
+export { FieldContext as Context, FieldErrorText as ErrorText, FieldHelperText as HelperText, FieldInput as Input, FieldItem as Item, FieldLabel as Label, FieldRequiredIndicator as RequiredIndicator, FieldRoot as Root, FieldRootProvider as RootProvider, FieldSelect as Select, FieldTextarea as Textarea, field_exports };

package/dist/components/field/use-field.cjs

@@ -39,18 +39,6 @@ var useField = (props = {}) => {
 		errorTextId,
 		helperTextId
 	]);
-	const labelIds = (0, react.useMemo)(() => {
-		const ids = [];
-		if (hasErrorText && invalid) ids.push(errorTextId);
-		if (hasHelperText) ids.push(helperTextId);
-		return ids.join(" ") || void 0;
-	}, [
-		invalid,
-		errorTextId,
-		helperTextId,
-		hasErrorText,
-		hasHelperText
-	]);
 	const getRootProps = (0, react.useMemo)(() => () => ({
 		...require_field_anatomy.parts.root.attrs,
 		id: rootId,
@@ -83,8 +71,10 @@ var useField = (props = {}) => {
 		labelId,
 		targetControlId
 	]);
+	const errorMessageId = hasErrorText && invalid ? errorTextId : void 0;
 	const getControlProps = (0, react.useMemo)(() => () => ({
-		"aria-describedby": labelIds,
+		"aria-describedby": hasHelperText ? helperTextId : void 0,
+		"aria-errormessage": errorMessageId,
 		"aria-invalid": (0, _zag_js_dom_query.ariaAttr)(invalid),
 		"data-invalid": (0, _zag_js_dom_query.dataAttr)(invalid),
 		"data-required": (0, _zag_js_dom_query.dataAttr)(required),
@@ -94,11 +84,13 @@ var useField = (props = {}) => {
 		disabled,
 		readOnly
 	}), [
-		labelIds,
+		hasHelperText,
+		helperTextId,
 		invalid,
 		required,
 		readOnly,
 		id,
+		errorMessageId,
 		disabled
 	]);
 	const getInputProps = (0, react.useMemo)(() => () => ({
@@ -128,7 +120,7 @@ var useField = (props = {}) => {
 		...require_field_anatomy.parts.requiredIndicator.attrs
 	}), []);
 	return {
-		ariaDescribedby: labelIds,
+		ariaDescribedby: hasHelperText ? helperTextId : void 0,
 		ids: {
 			root: rootId,
 			control: id,