@ark-ui/react 5.37.1 → 5.38.0

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

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

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

@@ -17,11 +17,12 @@ var FieldsetRoot = (0, react.forwardRef)((props, ref) => {
 	]);
 	const fieldset = require_use_fieldset.useFieldset(useFieldsetProps);
 	const mergedProps = (0, _zag_js_react.mergeProps)(fieldset.getRootProps(), localProps);
+	const composedRefs = require_compose_refs.useComposedRefs(ref, fieldset.refs.rootRef);
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_use_fieldset_context.FieldsetProvider, {
 		value: fieldset,
 		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_factory.ark.fieldset, {
 			...mergedProps,
-			ref: require_compose_refs.composeRefs(ref, fieldset.refs.rootRef)
+			ref: composedRefs
 		})
 	});
 });

package/dist/components/fieldset/fieldset-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 { FieldsetProvider } from "./use-fieldset-context.js";
 import { useFieldset } from "./use-fieldset.js";
@@ -17,11 +17,12 @@ var FieldsetRoot = forwardRef((props, ref) => {
 	]);
 	const fieldset = useFieldset(useFieldsetProps);
 	const mergedProps = mergeProps(fieldset.getRootProps(), localProps);
+	const composedRefs = useComposedRefs(ref, fieldset.refs.rootRef);
 	return /* @__PURE__ */ jsx(FieldsetProvider, {
 		value: fieldset,
 		children: /* @__PURE__ */ jsx(ark.fieldset, {
 			...mergedProps,
-			ref: composeRefs(ref, fieldset.refs.rootRef)
+			ref: composedRefs
 		})
 	});
 });

package/dist/components/fieldset/fieldset.cjs

@@ -15,6 +15,12 @@ var fieldset_exports = /* @__PURE__ */ require_runtime.__exportAll({
 	RootProvider: () => require_fieldset_root_provider.FieldsetRootProvider
 });
 //#endregion
+exports.Context = require_fieldset_context.FieldsetContext;
+exports.ErrorText = require_fieldset_error_text.FieldsetErrorText;
+exports.HelperText = require_fieldset_helper_text.FieldsetHelperText;
+exports.Legend = require_fieldset_legend.FieldsetLegend;
+exports.Root = require_fieldset_root.FieldsetRoot;
+exports.RootProvider = require_fieldset_root_provider.FieldsetRootProvider;
 Object.defineProperty(exports, "fieldset_exports", {
 	enumerable: true,
 	get: function() {

package/dist/components/fieldset/fieldset.js

@@ -15,4 +15,4 @@ var fieldset_exports = /* @__PURE__ */ __exportAll({
 	RootProvider: () => FieldsetRootProvider
 });
 //#endregion
-export { fieldset_exports };
+export { FieldsetContext as Context, FieldsetErrorText as ErrorText, FieldsetHelperText as HelperText, FieldsetLegend as Legend, FieldsetRoot as Root, FieldsetRootProvider as RootProvider, fieldset_exports };

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

@@ -23,9 +23,11 @@ var useFieldset = (props = {}) => {
 		if (!rootNode) return;
 		const checkTextElements = () => {
 			const docOrShadowRoot = env.getRootNode();
+			const hasErrorText = !!docOrShadowRoot.getElementById(errorTextId);
+			const hasHelperText = !!docOrShadowRoot.getElementById(helperTextId);
 			setTextElements({
-				hasErrorText: !!docOrShadowRoot.getElementById(errorTextId),
-				hasHelperText: !!docOrShadowRoot.getElementById(helperTextId)
+				hasErrorText,
+				hasHelperText
 			});
 		};
 		checkTextElements();

package/dist/components/fieldset/use-fieldset.js

@@ -23,9 +23,11 @@ var useFieldset = (props = {}) => {
 		if (!rootNode) return;
 		const checkTextElements = () => {
 			const docOrShadowRoot = env.getRootNode();
+			const hasErrorText = !!docOrShadowRoot.getElementById(errorTextId);
+			const hasHelperText = !!docOrShadowRoot.getElementById(helperTextId);
 			setTextElements({
-				hasErrorText: !!docOrShadowRoot.getElementById(errorTextId),
-				hasHelperText: !!docOrShadowRoot.getElementById(helperTextId)
+				hasErrorText,
+				hasHelperText
 			});
 		};
 		checkTextElements();

package/dist/components/file-upload/file-upload.cjs

@@ -33,6 +33,21 @@ var file_upload_exports = /* @__PURE__ */ require_runtime.__exportAll({
 	Trigger: () => require_file_upload_trigger.FileUploadTrigger
 });
 //#endregion
+exports.ClearTrigger = require_file_upload_clear_trigger.FileUploadClearTrigger;
+exports.Context = require_file_upload_context.FileUploadContext;
+exports.Dropzone = require_file_upload_dropzone.FileUploadDropzone;
+exports.HiddenInput = require_file_upload_hidden_input.FileUploadHiddenInput;
+exports.Item = require_file_upload_item.FileUploadItem;
+exports.ItemDeleteTrigger = require_file_upload_item_delete_trigger.FileUploadItemDeleteTrigger;
+exports.ItemGroup = require_file_upload_item_group.FileUploadItemGroup;
+exports.ItemName = require_file_upload_item_name.FileUploadItemName;
+exports.ItemPreview = require_file_upload_item_preview.FileUploadItemPreview;
+exports.ItemPreviewImage = require_file_upload_item_preview_image.FileUploadItemPreviewImage;
+exports.ItemSizeText = require_file_upload_item_size_text.FileUploadItemSizeText;
+exports.Label = require_file_upload_label.FileUploadLabel;
+exports.Root = require_file_upload_root.FileUploadRoot;
+exports.RootProvider = require_file_upload_root_provider.FileUploadRootProvider;
+exports.Trigger = require_file_upload_trigger.FileUploadTrigger;
 Object.defineProperty(exports, "file_upload_exports", {
 	enumerable: true,
 	get: function() {

package/dist/components/file-upload/file-upload.js

@@ -33,4 +33,4 @@ var file_upload_exports = /* @__PURE__ */ __exportAll({
 	Trigger: () => FileUploadTrigger
 });
 //#endregion
-export { file_upload_exports };
+export { FileUploadClearTrigger as ClearTrigger, FileUploadContext as Context, FileUploadDropzone as Dropzone, FileUploadHiddenInput as HiddenInput, FileUploadItem as Item, FileUploadItemDeleteTrigger as ItemDeleteTrigger, FileUploadItemGroup as ItemGroup, FileUploadItemName as ItemName, FileUploadItemPreview as ItemPreview, FileUploadItemPreviewImage as ItemPreviewImage, FileUploadItemSizeText as ItemSizeText, FileUploadLabel as Label, FileUploadRoot as Root, FileUploadRootProvider as RootProvider, FileUploadTrigger as Trigger, file_upload_exports };

package/dist/components/floating-panel/floating-panel-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_floating_panel_context = require("./use-floating-panel-context.cjs");
 let react = require("react");
@@ -11,10 +12,13 @@ var FloatingPanelContent = (0, react.forwardRef)((props, ref) => {
 	const floatingPanel = require_use_floating_panel_context.useFloatingPanelContext();
 	const presence = require_use_presence_context.usePresenceContext();
 	const mergedProps = (0, _zag_js_react.mergeProps)(floatingPanel.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
+		})
 	});
 });
 FloatingPanelContent.displayName = "FloatingPanelContent";

package/dist/components/floating-panel/floating-panel-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 { useFloatingPanelContext } from "./use-floating-panel-context.js";
 import { forwardRef } from "react";
@@ -11,10 +12,13 @@ var FloatingPanelContent = forwardRef((props, ref) => {
 	const floatingPanel = useFloatingPanelContext();
 	const presence = usePresenceContext();
 	const mergedProps = mergeProps(floatingPanel.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
+		})
 	});
 });
 FloatingPanelContent.displayName = "FloatingPanelContent";

package/dist/components/floating-panel/floating-panel.cjs

@@ -33,9 +33,29 @@ var floating_panel_exports = /* @__PURE__ */ require_runtime.__exportAll({
 	resizeTriggerAxes: () => _zag_js_floating_panel.resizeTriggerAxes
 });
 //#endregion
+exports.Body = require_floating_panel_body.FloatingPanelBody;
+exports.CloseTrigger = require_floating_panel_close_trigger.FloatingPanelCloseTrigger;
+exports.Content = require_floating_panel_content.FloatingPanelContent;
+exports.Context = require_floating_panel_context.FloatingPanelContext;
+exports.Control = require_floating_panel_control.FloatingPanelControl;
+exports.DragTrigger = require_floating_panel_drag_trigger.FloatingPanelDragTrigger;
+exports.Header = require_floating_panel_header.FloatingPanelHeader;
+exports.Positioner = require_floating_panel_positioner.FloatingPanelPositioner;
+exports.ResizeTrigger = require_floating_panel_resize_trigger.FloatingPanelResizeTrigger;
+exports.Root = require_floating_panel_root.FloatingPanelRoot;
+exports.RootProvider = require_floating_panel_root_provider.FloatingPanelRootProvider;
+exports.StageTrigger = require_floating_panel_stage_trigger.FloatingPanelStageTrigger;
+exports.Title = require_floating_panel_title.FloatingPanelTitle;
+exports.Trigger = require_floating_panel_trigger.FloatingPanelTrigger;
 Object.defineProperty(exports, "floating_panel_exports", {
 	enumerable: true,
 	get: function() {
 		return floating_panel_exports;
 	}
 });
+Object.defineProperty(exports, "resizeTriggerAxes", {
+	enumerable: true,
+	get: function() {
+		return _zag_js_floating_panel.resizeTriggerAxes;
+	}
+});

package/dist/components/floating-panel/floating-panel.js

@@ -33,4 +33,4 @@ var floating_panel_exports = /* @__PURE__ */ __exportAll({
 	resizeTriggerAxes: () => resizeTriggerAxes
 });
 //#endregion
-export { floating_panel_exports };
+export { FloatingPanelBody as Body, FloatingPanelCloseTrigger as CloseTrigger, FloatingPanelContent as Content, FloatingPanelContext as Context, FloatingPanelControl as Control, FloatingPanelDragTrigger as DragTrigger, FloatingPanelHeader as Header, FloatingPanelPositioner as Positioner, FloatingPanelResizeTrigger as ResizeTrigger, FloatingPanelRoot as Root, FloatingPanelRootProvider as RootProvider, FloatingPanelStageTrigger as StageTrigger, FloatingPanelTitle as Title, FloatingPanelTrigger as Trigger, floating_panel_exports, resizeTriggerAxes };

package/dist/components/focus-trap/focus-trap.cjs

@@ -17,15 +17,17 @@ var FocusTrap = (0, react.forwardRef)((props, ref) => {
 		"initialFocus",
 		"fallbackFocus",
 		"returnFocusOnDeactivate",
-		"setReturnFocus"
+		"setReturnFocus",
+		"persistentElements"
 	]);
+	const composedRefs = require_compose_refs.useComposedRefs(localRef, ref);
 	require_use_safe_layout_effect.useSafeLayoutEffect(() => {
 		const node = localRef.current;
 		if (!node || trapProps.disabled) return;
 		return (0, _zag_js_focus_trap.trapFocus)(node, trapProps);
 	}, [ref, trapProps]);
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_factory.ark.div, {
-		ref: require_compose_refs.composeRefs(localRef, ref),
+		ref: composedRefs,
 		...localProps
 	});
 });

package/dist/{src/components → components}/focus-trap/focus-trap.d.cts

@@ -2,7 +2,7 @@ import { FocusTrapOptions } from '@zag-js/focus-trap';
 import { Assign } from '../../types.js';
 import { HTMLProps, PolymorphicProps } from '../factory.js';
 import { ForwardRefExoticComponent, RefAttributes } from 'react';
-export interface TrapOptions extends Pick<FocusTrapOptions, 'onActivate' | 'onDeactivate' | 'initialFocus' | 'fallbackFocus' | 'returnFocusOnDeactivate' | 'setReturnFocus'> {
+export interface TrapOptions extends Pick<FocusTrapOptions, 'onActivate' | 'onDeactivate' | 'initialFocus' | 'fallbackFocus' | 'returnFocusOnDeactivate' | 'setReturnFocus' | 'persistentElements'> {
     /**
      * Whether the focus trap is disabled.
      */

package/dist/{src/components → components}/focus-trap/focus-trap.d.ts

@@ -2,7 +2,7 @@ import { FocusTrapOptions } from '@zag-js/focus-trap';
 import { Assign } from '../../types.js';
 import { HTMLProps, PolymorphicProps } from '../factory.js';
 import { ForwardRefExoticComponent, RefAttributes } from 'react';
-export interface TrapOptions extends Pick<FocusTrapOptions, 'onActivate' | 'onDeactivate' | 'initialFocus' | 'fallbackFocus' | 'returnFocusOnDeactivate' | 'setReturnFocus'> {
+export interface TrapOptions extends Pick<FocusTrapOptions, 'onActivate' | 'onDeactivate' | 'initialFocus' | 'fallbackFocus' | 'returnFocusOnDeactivate' | 'setReturnFocus' | 'persistentElements'> {
     /**
      * Whether the focus trap is disabled.
      */

package/dist/components/focus-trap/focus-trap.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 { useSafeLayoutEffect } from "../../utils/use-safe-layout-effect.js";
 import { forwardRef, useRef } from "react";
@@ -17,15 +17,17 @@ var FocusTrap = forwardRef((props, ref) => {
 		"initialFocus",
 		"fallbackFocus",
 		"returnFocusOnDeactivate",
-		"setReturnFocus"
+		"setReturnFocus",
+		"persistentElements"
 	]);
+	const composedRefs = useComposedRefs(localRef, ref);
 	useSafeLayoutEffect(() => {
 		const node = localRef.current;
 		if (!node || trapProps.disabled) return;
 		return trapFocus(node, trapProps);
 	}, [ref, trapProps]);
 	return /* @__PURE__ */ jsx(ark.div, {
-		ref: composeRefs(localRef, ref),
+		ref: composedRefs,
 		...localProps
 	});
 });

package/dist/components/format/format.cjs

@@ -11,6 +11,10 @@ var format_exports = /* @__PURE__ */ require_runtime.__exportAll({
 	Time: () => require_format_time.FormatTime
 });
 //#endregion
+exports.Byte = require_format_byte.FormatByte;
+exports.Number = require_format_number.FormatNumber;
+exports.RelativeTime = require_format_relative_time.FormatRelativeTime;
+exports.Time = require_format_time.FormatTime;
 Object.defineProperty(exports, "format_exports", {
 	enumerable: true,
 	get: function() {

package/dist/components/format/format.js

@@ -11,4 +11,4 @@ var format_exports = /* @__PURE__ */ __exportAll({
 	Time: () => FormatTime
 });
 //#endregion
-export { format_exports };
+export { FormatByte as Byte, FormatNumber as Number, FormatRelativeTime as RelativeTime, FormatTime as Time, format_exports };

package/dist/components/frame/frame.cjs

@@ -17,6 +17,7 @@ var Frame = (0, react.forwardRef)((props, ref) => {
 	const { children, head, onMount, onUnmount, srcDoc = initialSrcDoc, ...rest } = props;
 	const [frameRef, setFrameRef] = (0, react.useState)(null);
 	const [mountNode, setMountNode] = (0, react.useState)(null);
+	const composedRefs = require_compose_refs.useComposedRefs(ref, setFrameRef);
 	require_use_safe_layout_effect.useSafeLayoutEffect(() => {
 		if (!frameRef) return;
 		const doc = frameRef.contentWindow?.document;
@@ -50,7 +51,7 @@ var Frame = (0, react.forwardRef)((props, ref) => {
 		value: () => frameRef?.contentDocument ?? document,
 		children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("iframe", {
 			title: `frame:${(0, react.useId)()}`,
-			ref: require_compose_refs.composeRefs(ref, setFrameRef),
+			ref: composedRefs,
 			...rest,
 			children: [mountNode ? (0, react_dom.createPortal)(/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_frame_content.FrameContent, {
 				onMount,

package/dist/components/frame/frame.js

@@ -1,5 +1,5 @@
 "use client";
-import { composeRefs } from "../../utils/compose-refs.js";
+import { useComposedRefs } from "../../utils/compose-refs.js";
 import { EnvironmentProvider } from "../../providers/environment/environment-provider.js";
 import { useSafeLayoutEffect } from "../../utils/use-safe-layout-effect.js";
 import { FrameContent } from "./frame-content.js";
@@ -17,6 +17,7 @@ var Frame = forwardRef((props, ref) => {
 	const { children, head, onMount, onUnmount, srcDoc = initialSrcDoc, ...rest } = props;
 	const [frameRef, setFrameRef] = useState(null);
 	const [mountNode, setMountNode] = useState(null);
+	const composedRefs = useComposedRefs(ref, setFrameRef);
 	useSafeLayoutEffect(() => {
 		if (!frameRef) return;
 		const doc = frameRef.contentWindow?.document;
@@ -50,7 +51,7 @@ var Frame = forwardRef((props, ref) => {
 		value: () => frameRef?.contentDocument ?? document,
 		children: /* @__PURE__ */ jsxs("iframe", {
 			title: `frame:${useId()}`,
-			ref: composeRefs(ref, setFrameRef),
+			ref: composedRefs,
 			...rest,
 			children: [mountNode ? createPortal(/* @__PURE__ */ jsx(FrameContent, {
 				onMount,

package/dist/components/hover-card/hover-card-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_hover_card_context = require("./use-hover-card-context.cjs");
 let react = require("react");
@@ -11,10 +12,13 @@ var HoverCardContent = (0, react.forwardRef)((props, ref) => {
 	const hoverCard = require_use_hover_card_context.useHoverCardContext();
 	const presence = require_use_presence_context.usePresenceContext();
 	const mergedProps = (0, _zag_js_react.mergeProps)(hoverCard.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
+		})
 	});
 });
 HoverCardContent.displayName = "HoverCardContent";

package/dist/components/hover-card/hover-card-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 { useHoverCardContext } from "./use-hover-card-context.js";
 import { forwardRef } from "react";
@@ -11,10 +12,13 @@ var HoverCardContent = forwardRef((props, ref) => {
 	const hoverCard = useHoverCardContext();
 	const presence = usePresenceContext();
 	const mergedProps = mergeProps(hoverCard.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
+		})
 	});
 });
 HoverCardContent.displayName = "HoverCardContent";

package/dist/components/hover-card/hover-card.cjs

@@ -19,6 +19,14 @@ var hover_card_exports = /* @__PURE__ */ require_runtime.__exportAll({
 	Trigger: () => require_hover_card_trigger.HoverCardTrigger
 });
 //#endregion
+exports.Arrow = require_hover_card_arrow.HoverCardArrow;
+exports.ArrowTip = require_hover_card_arrow_tip.HoverCardArrowTip;
+exports.Content = require_hover_card_content.HoverCardContent;
+exports.Context = require_hover_card_context.HoverCardContext;
+exports.Positioner = require_hover_card_positioner.HoverCardPositioner;
+exports.Root = require_hover_card_root.HoverCardRoot;
+exports.RootProvider = require_hover_card_root_provider.HoverCardRootProvider;
+exports.Trigger = require_hover_card_trigger.HoverCardTrigger;
 Object.defineProperty(exports, "hover_card_exports", {
 	enumerable: true,
 	get: function() {

package/dist/components/hover-card/hover-card.js

@@ -19,4 +19,4 @@ var hover_card_exports = /* @__PURE__ */ __exportAll({
 	Trigger: () => HoverCardTrigger
 });
 //#endregion
-export { hover_card_exports };
+export { HoverCardArrow as Arrow, HoverCardArrowTip as ArrowTip, HoverCardContent as Content, HoverCardContext as Context, HoverCardPositioner as Positioner, HoverCardRoot as Root, HoverCardRootProvider as RootProvider, HoverCardTrigger as Trigger, hover_card_exports };

package/dist/components/image-cropper/image-cropper.cjs

@@ -21,6 +21,20 @@ var image_cropper_exports = /* @__PURE__ */ require_runtime.__exportAll({
 	handles: () => _zag_js_image_cropper.handles
 });
 //#endregion
+exports.Context = require_image_cropper_context.ImageCropperContext;
+exports.Grid = require_image_cropper_grid.ImageCropperGrid;
+exports.Handle = require_image_cropper_handle.ImageCropperHandle;
+exports.Image = require_image_cropper_image.ImageCropperImage;
+exports.Root = require_image_cropper_root.ImageCropperRoot;
+exports.RootProvider = require_image_cropper_root_provider.ImageCropperRootProvider;
+exports.Selection = require_image_cropper_selection.ImageCropperSelection;
+exports.Viewport = require_image_cropper_viewport.ImageCropperViewport;
+Object.defineProperty(exports, "handles", {
+	enumerable: true,
+	get: function() {
+		return _zag_js_image_cropper.handles;
+	}
+});
 Object.defineProperty(exports, "image_cropper_exports", {
 	enumerable: true,
 	get: function() {

package/dist/components/image-cropper/image-cropper.js

@@ -21,4 +21,4 @@ var image_cropper_exports = /* @__PURE__ */ __exportAll({
 	handles: () => handles
 });
 //#endregion
-export { image_cropper_exports };
+export { ImageCropperContext as Context, ImageCropperGrid as Grid, ImageCropperHandle as Handle, ImageCropperImage as Image, ImageCropperRoot as Root, ImageCropperRootProvider as RootProvider, ImageCropperSelection as Selection, ImageCropperViewport as Viewport, handles, image_cropper_exports };

package/dist/components/json-tree-view/json-tree-view.cjs

@@ -9,6 +9,9 @@ var json_tree_view_exports = /* @__PURE__ */ require_runtime.__exportAll({
 	Tree: () => require_json_tree_view_tree.JsonTreeViewTree
 });
 //#endregion
+exports.Root = require_json_tree_view_root.JsonTreeViewRoot;
+exports.RootProvider = require_json_tree_view_root_provider.JsonTreeViewRootProvider;
+exports.Tree = require_json_tree_view_tree.JsonTreeViewTree;
 Object.defineProperty(exports, "json_tree_view_exports", {
 	enumerable: true,
 	get: function() {

package/dist/components/json-tree-view/json-tree-view.js

@@ -9,4 +9,4 @@ var json_tree_view_exports = /* @__PURE__ */ __exportAll({
 	Tree: () => JsonTreeViewTree
 });
 //#endregion
-export { json_tree_view_exports };
+export { JsonTreeViewRoot as Root, JsonTreeViewRootProvider as RootProvider, JsonTreeViewTree as Tree, json_tree_view_exports };

package/dist/components/listbox/listbox.cjs

@@ -31,6 +31,20 @@ var listbox_exports = /* @__PURE__ */ require_runtime.__exportAll({
 	ValueText: () => require_listbox_value_text.ListboxValueText
 });
 //#endregion
+exports.Content = require_listbox_content.ListboxContent;
+exports.Context = require_listbox_context.ListboxContext;
+exports.Empty = require_listbox_empty.ListboxEmpty;
+exports.Input = require_listbox_input.ListboxInput;
+exports.Item = require_listbox_item.ListboxItem;
+exports.ItemContext = require_listbox_item_context.ListboxItemContext;
+exports.ItemGroup = require_listbox_item_group.ListboxItemGroup;
+exports.ItemGroupLabel = require_listbox_item_group_label.ListboxItemGroupLabel;
+exports.ItemIndicator = require_listbox_item_indicator.ListboxItemIndicator;
+exports.ItemText = require_listbox_item_text.ListboxItemText;
+exports.Label = require_listbox_label.ListboxLabel;
+exports.Root = require_listbox_root.ListboxRoot;
+exports.RootProvider = require_listbox_root_provider.ListboxRootProvider;
+exports.ValueText = require_listbox_value_text.ListboxValueText;
 Object.defineProperty(exports, "listbox_exports", {
 	enumerable: true,
 	get: function() {

package/dist/components/listbox/listbox.js

@@ -31,4 +31,4 @@ var listbox_exports = /* @__PURE__ */ __exportAll({
 	ValueText: () => ListboxValueText
 });
 //#endregion
-export { listbox_exports };
+export { ListboxContent as Content, ListboxContext as Context, ListboxEmpty as Empty, ListboxInput as Input, ListboxItem as Item, ListboxItemContext as ItemContext, ListboxItemGroup as ItemGroup, ListboxItemGroupLabel as ItemGroupLabel, ListboxItemIndicator as ItemIndicator, ListboxItemText as ItemText, ListboxLabel as Label, ListboxRoot as Root, ListboxRootProvider as RootProvider, ListboxValueText as ValueText, listbox_exports };

package/dist/components/marquee/marquee.cjs

@@ -17,6 +17,13 @@ var marquee_exports = /* @__PURE__ */ require_runtime.__exportAll({
 	Viewport: () => require_marquee_viewport.MarqueeViewport
 });
 //#endregion
+exports.Content = require_marquee_content.MarqueeContent;
+exports.Context = require_marquee_context.MarqueeContext;
+exports.Edge = require_marquee_edge.MarqueeEdge;
+exports.Item = require_marquee_item.MarqueeItem;
+exports.Root = require_marquee_root.MarqueeRoot;
+exports.RootProvider = require_marquee_root_provider.MarqueeRootProvider;
+exports.Viewport = require_marquee_viewport.MarqueeViewport;
 Object.defineProperty(exports, "marquee_exports", {
 	enumerable: true,
 	get: function() {

package/dist/components/marquee/marquee.js

@@ -17,4 +17,4 @@ var marquee_exports = /* @__PURE__ */ __exportAll({
 	Viewport: () => MarqueeViewport
 });
 //#endregion
-export { marquee_exports };
+export { MarqueeContent as Content, MarqueeContext as Context, MarqueeEdge as Edge, MarqueeItem as Item, MarqueeRoot as Root, MarqueeRootProvider as RootProvider, MarqueeViewport as Viewport, marquee_exports };

package/dist/components/menu/menu-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_menu_context = require("./use-menu-context.cjs");
 let react = require("react");
@@ -11,10 +12,13 @@ var MenuContent = (0, react.forwardRef)((props, ref) => {
 	const menu = require_use_menu_context.useMenuContext();
 	const presence = require_use_presence_context.usePresenceContext();
 	const mergedProps = (0, _zag_js_react.mergeProps)(menu.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
+		})
 	});
 });
 MenuContent.displayName = "MenuContent";

package/dist/components/menu/menu-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 { useMenuContext } from "./use-menu-context.js";
 import { forwardRef } from "react";
@@ -11,10 +12,13 @@ var MenuContent = forwardRef((props, ref) => {
 	const menu = useMenuContext();
 	const presence = usePresenceContext();
 	const mergedProps = mergeProps(menu.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
+		})
 	});
 });
 MenuContent.displayName = "MenuContent";