@ark-ui/react 4.0.0 → 4.1.0

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

@@ -6,6 +6,7 @@ Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
 const jsxRuntime = require('react/jsx-runtime');
 const react$1 = require('@zag-js/react');
 const react = require('react');
+const composeRefs = require('../../utils/compose-refs.cjs');
 const factory = require('../factory.cjs');
 const usePresenceContext = require('../presence/use-presence-context.cjs');
 const useColorPickerContext = require('./use-color-picker-context.cjs');
@@ -16,13 +17,13 @@ const ColorPickerContent = react.forwardRef(
     const presence = usePresenceContext.usePresenceContext();
     const mergedProps = react$1.mergeProps(
       colorPicker.getContentProps(),
-      presence.getPresenceProps(ref),
+      presence.getPresenceProps(),
       props
     );
     if (presence.unmounted) {
       return null;
     }
-    return /* @__PURE__ */ jsxRuntime.jsx(factory.ark.div, { ...mergedProps });
+    return /* @__PURE__ */ jsxRuntime.jsx(factory.ark.div, { ...mergedProps, ref: composeRefs.composeRefs(presence.ref, ref) });
   }
 );
 ColorPickerContent.displayName = "ColorPickerContent";

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

@@ -2,6 +2,7 @@
 import { jsx } from 'react/jsx-runtime';
 import { mergeProps } from '@zag-js/react';
 import { forwardRef } from 'react';
+import { composeRefs } from '../../utils/compose-refs.js';
 import { ark } from '../factory.js';
 import { usePresenceContext } from '../presence/use-presence-context.js';
 import { useColorPickerContext } from './use-color-picker-context.js';
@@ -12,13 +13,13 @@ const ColorPickerContent = forwardRef(
     const presence = usePresenceContext();
     const mergedProps = mergeProps(
       colorPicker.getContentProps(),
-      presence.getPresenceProps(ref),
+      presence.getPresenceProps(),
       props
     );
     if (presence.unmounted) {
       return null;
     }
-    return /* @__PURE__ */ jsx(ark.div, { ...mergedProps });
+    return /* @__PURE__ */ jsx(ark.div, { ...mergedProps, ref: composeRefs(presence.ref, ref) });
   }
 );
 ColorPickerContent.displayName = "ColorPickerContent";

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

@@ -6,6 +6,7 @@ Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
 const jsxRuntime = require('react/jsx-runtime');
 const react$1 = require('@zag-js/react');
 const react = require('react');
+const composeRefs = require('../../utils/compose-refs.cjs');
 const factory = require('../factory.cjs');
 const usePresenceContext = require('../presence/use-presence-context.cjs');
 const useComboboxContext = require('./use-combobox-context.cjs');
@@ -13,11 +14,11 @@ const useComboboxContext = require('./use-combobox-context.cjs');
 const ComboboxContent = react.forwardRef((props, ref) => {
   const combobox = useComboboxContext.useComboboxContext();
   const presence = usePresenceContext.usePresenceContext();
-  const mergedProps = react$1.mergeProps(combobox.getContentProps(), presence.getPresenceProps(ref), props);
+  const mergedProps = react$1.mergeProps(combobox.getContentProps(), presence.getPresenceProps(), props);
   if (presence.unmounted) {
     return null;
   }
-  return /* @__PURE__ */ jsxRuntime.jsx(factory.ark.div, { ...mergedProps });
+  return /* @__PURE__ */ jsxRuntime.jsx(factory.ark.div, { ...mergedProps, ref: composeRefs.composeRefs(presence.ref, ref) });
 });
 ComboboxContent.displayName = "ComboboxContent";
 

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

@@ -2,6 +2,7 @@
 import { jsx } from 'react/jsx-runtime';
 import { mergeProps } from '@zag-js/react';
 import { forwardRef } from 'react';
+import { composeRefs } from '../../utils/compose-refs.js';
 import { ark } from '../factory.js';
 import { usePresenceContext } from '../presence/use-presence-context.js';
 import { useComboboxContext } from './use-combobox-context.js';
@@ -9,11 +10,11 @@ import { useComboboxContext } from './use-combobox-context.js';
 const ComboboxContent = forwardRef((props, ref) => {
   const combobox = useComboboxContext();
   const presence = usePresenceContext();
-  const mergedProps = mergeProps(combobox.getContentProps(), presence.getPresenceProps(ref), props);
+  const mergedProps = mergeProps(combobox.getContentProps(), presence.getPresenceProps(), props);
   if (presence.unmounted) {
     return null;
   }
-  return /* @__PURE__ */ jsx(ark.div, { ...mergedProps });
+  return /* @__PURE__ */ jsx(ark.div, { ...mergedProps, ref: composeRefs(presence.ref, ref) });
 });
 ComboboxContent.displayName = "ComboboxContent";
 

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

@@ -6,6 +6,7 @@ Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
 const jsxRuntime = require('react/jsx-runtime');
 const react$1 = require('@zag-js/react');
 const react = require('react');
+const composeRefs = require('../../utils/compose-refs.cjs');
 const factory = require('../factory.cjs');
 const usePresenceContext = require('../presence/use-presence-context.cjs');
 const useDatePickerContext = require('./use-date-picker-context.cjs');
@@ -14,15 +15,11 @@ const DatePickerContent = react.forwardRef(
   (props, ref) => {
     const datePicker = useDatePickerContext.useDatePickerContext();
     const presence = usePresenceContext.usePresenceContext();
-    const mergedProps = react$1.mergeProps(
-      datePicker.getContentProps(),
-      presence.getPresenceProps(ref),
-      props
-    );
+    const mergedProps = react$1.mergeProps(datePicker.getContentProps(), presence.getPresenceProps(), props);
     if (presence.unmounted) {
       return null;
     }
-    return /* @__PURE__ */ jsxRuntime.jsx(factory.ark.div, { ...mergedProps });
+    return /* @__PURE__ */ jsxRuntime.jsx(factory.ark.div, { ...mergedProps, ref: composeRefs.composeRefs(presence.ref, ref) });
   }
 );
 DatePickerContent.displayName = "DatePickerContent";

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

@@ -2,6 +2,7 @@
 import { jsx } from 'react/jsx-runtime';
 import { mergeProps } from '@zag-js/react';
 import { forwardRef } from 'react';
+import { composeRefs } from '../../utils/compose-refs.js';
 import { ark } from '../factory.js';
 import { usePresenceContext } from '../presence/use-presence-context.js';
 import { useDatePickerContext } from './use-date-picker-context.js';
@@ -10,15 +11,11 @@ const DatePickerContent = forwardRef(
   (props, ref) => {
     const datePicker = useDatePickerContext();
     const presence = usePresenceContext();
-    const mergedProps = mergeProps(
-      datePicker.getContentProps(),
-      presence.getPresenceProps(ref),
-      props
-    );
+    const mergedProps = mergeProps(datePicker.getContentProps(), presence.getPresenceProps(), props);
     if (presence.unmounted) {
       return null;
     }
-    return /* @__PURE__ */ jsx(ark.div, { ...mergedProps });
+    return /* @__PURE__ */ jsx(ark.div, { ...mergedProps, ref: composeRefs(presence.ref, ref) });
   }
 );
 DatePickerContent.displayName = "DatePickerContent";

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

@@ -6,6 +6,7 @@ Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
 const jsxRuntime = require('react/jsx-runtime');
 const react$1 = require('@zag-js/react');
 const react = require('react');
+const composeRefs = require('../../utils/compose-refs.cjs');
 const renderStrategy = require('../../utils/render-strategy.cjs');
 const factory = require('../factory.cjs');
 const usePresence = require('../presence/use-presence.cjs');
@@ -15,11 +16,11 @@ const DialogBackdrop = react.forwardRef((props, ref) => {
   const dialog = useDialogContext.useDialogContext();
   const renderStrategyProps = renderStrategy.useRenderStrategyPropsContext();
   const presence = usePresence.usePresence({ ...renderStrategyProps, present: dialog.open });
-  const mergedProps = react$1.mergeProps(dialog.getBackdropProps(), presence.getPresenceProps(ref), props);
+  const mergedProps = react$1.mergeProps(dialog.getBackdropProps(), presence.getPresenceProps(), props);
   if (presence.unmounted) {
     return null;
   }
-  return /* @__PURE__ */ jsxRuntime.jsx(factory.ark.div, { ...mergedProps });
+  return /* @__PURE__ */ jsxRuntime.jsx(factory.ark.div, { ...mergedProps, ref: composeRefs.composeRefs(presence.ref, ref) });
 });
 DialogBackdrop.displayName = "DialogBackdrop";
 

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

@@ -2,6 +2,7 @@
 import { jsx } from 'react/jsx-runtime';
 import { mergeProps } from '@zag-js/react';
 import { forwardRef } from 'react';
+import { composeRefs } from '../../utils/compose-refs.js';
 import { useRenderStrategyPropsContext } from '../../utils/render-strategy.js';
 import { ark } from '../factory.js';
 import { usePresence } from '../presence/use-presence.js';
@@ -11,11 +12,11 @@ const DialogBackdrop = forwardRef((props, ref) => {
   const dialog = useDialogContext();
   const renderStrategyProps = useRenderStrategyPropsContext();
   const presence = usePresence({ ...renderStrategyProps, present: dialog.open });
-  const mergedProps = mergeProps(dialog.getBackdropProps(), presence.getPresenceProps(ref), props);
+  const mergedProps = mergeProps(dialog.getBackdropProps(), presence.getPresenceProps(), props);
   if (presence.unmounted) {
     return null;
   }
-  return /* @__PURE__ */ jsx(ark.div, { ...mergedProps });
+  return /* @__PURE__ */ jsx(ark.div, { ...mergedProps, ref: composeRefs(presence.ref, ref) });
 });
 DialogBackdrop.displayName = "DialogBackdrop";
 

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

@@ -6,6 +6,7 @@ Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
 const jsxRuntime = require('react/jsx-runtime');
 const react$1 = require('@zag-js/react');
 const react = require('react');
+const composeRefs = require('../../utils/compose-refs.cjs');
 const factory = require('../factory.cjs');
 const usePresenceContext = require('../presence/use-presence-context.cjs');
 const useDialogContext = require('./use-dialog-context.cjs');
@@ -13,11 +14,11 @@ const useDialogContext = require('./use-dialog-context.cjs');
 const DialogContent = react.forwardRef((props, ref) => {
   const dialog = useDialogContext.useDialogContext();
   const presence = usePresenceContext.usePresenceContext();
-  const mergedProps = react$1.mergeProps(dialog.getContentProps(), presence.getPresenceProps(ref), props);
+  const mergedProps = react$1.mergeProps(dialog.getContentProps(), presence.getPresenceProps(), props);
   if (presence.unmounted) {
     return null;
   }
-  return /* @__PURE__ */ jsxRuntime.jsx(factory.ark.div, { ...mergedProps });
+  return /* @__PURE__ */ jsxRuntime.jsx(factory.ark.div, { ...mergedProps, ref: composeRefs.composeRefs(presence.ref, ref) });
 });
 DialogContent.displayName = "DialogContent";
 

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

@@ -2,6 +2,7 @@
 import { jsx } from 'react/jsx-runtime';
 import { mergeProps } from '@zag-js/react';
 import { forwardRef } from 'react';
+import { composeRefs } from '../../utils/compose-refs.js';
 import { ark } from '../factory.js';
 import { usePresenceContext } from '../presence/use-presence-context.js';
 import { useDialogContext } from './use-dialog-context.js';
@@ -9,11 +10,11 @@ import { useDialogContext } from './use-dialog-context.js';
 const DialogContent = forwardRef((props, ref) => {
   const dialog = useDialogContext();
   const presence = usePresenceContext();
-  const mergedProps = mergeProps(dialog.getContentProps(), presence.getPresenceProps(ref), props);
+  const mergedProps = mergeProps(dialog.getContentProps(), presence.getPresenceProps(), props);
   if (presence.unmounted) {
     return null;
   }
-  return /* @__PURE__ */ jsx(ark.div, { ...mergedProps });
+  return /* @__PURE__ */ jsx(ark.div, { ...mergedProps, ref: composeRefs(presence.ref, ref) });
 });
 DialogContent.displayName = "DialogContent";
 

package/dist/components/factory.cjs

@@ -6,10 +6,18 @@ const core = require('@zag-js/core');
 const react = require('react');
 const composeRefs = require('../utils/compose-refs.cjs');
 
-function getRef(child) {
-  if ("ref" in child.props) return child.props.ref;
-  if ("ref" in child) return child.ref;
-  return null;
+function getRef(element) {
+  let getter = Object.getOwnPropertyDescriptor(element.props, "ref")?.get;
+  let mayWarn = getter && "isReactWarning" in getter && getter.isReactWarning;
+  if (mayWarn) {
+    return element.ref;
+  }
+  getter = Object.getOwnPropertyDescriptor(element, "ref")?.get;
+  mayWarn = getter && "isReactWarning" in getter && getter.isReactWarning;
+  if (mayWarn) {
+    return element.props.ref;
+  }
+  return element.props.ref || element.ref;
 }
 const withAsChild = (Component) => {
   const Comp = react.memo(

package/dist/components/factory.js

@@ -2,10 +2,18 @@ import { mergeProps } from '@zag-js/core';
 import { memo, forwardRef, createElement, Children, isValidElement, cloneElement } from 'react';
 import { composeRefs } from '../utils/compose-refs.js';
 
-function getRef(child) {
-  if ("ref" in child.props) return child.props.ref;
-  if ("ref" in child) return child.ref;
-  return null;
+function getRef(element) {
+  let getter = Object.getOwnPropertyDescriptor(element.props, "ref")?.get;
+  let mayWarn = getter && "isReactWarning" in getter && getter.isReactWarning;
+  if (mayWarn) {
+    return element.ref;
+  }
+  getter = Object.getOwnPropertyDescriptor(element, "ref")?.get;
+  mayWarn = getter && "isReactWarning" in getter && getter.isReactWarning;
+  if (mayWarn) {
+    return element.props.ref;
+  }
+  return element.props.ref || element.ref;
 }
 const withAsChild = (Component) => {
   const Comp = memo(

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

@@ -4,14 +4,14 @@
 Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
 
 const jsxRuntime = require('react/jsx-runtime');
-const core = require('@zag-js/core');
+const react$1 = require('@zag-js/react');
 const react = require('react');
 const factory = require('../factory.cjs');
 const useFieldContext = require('./use-field-context.cjs');
 
 const FieldTextarea = react.forwardRef((props, ref) => {
   const field = useFieldContext.useFieldContext();
-  const mergedProps = core.mergeProps(field?.getTextareaProps(), props);
+  const mergedProps = react$1.mergeProps(field?.getTextareaProps(), props);
   return /* @__PURE__ */ jsxRuntime.jsx(factory.ark.textarea, { ...mergedProps, ref });
 });
 FieldTextarea.displayName = "FieldTextarea";

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

@@ -1,6 +1,6 @@
 'use client';
 import { jsx } from 'react/jsx-runtime';
-import { mergeProps } from '@zag-js/core';
+import { mergeProps } from '@zag-js/react';
 import { forwardRef } from 'react';
 import { ark } from '../factory.js';
 import { useFieldContext } from './use-field-context.js';

package/dist/components/file-upload/file-upload-item-preview-image.cjs

@@ -16,7 +16,7 @@ const FileUploadItemPreviewImage = react.forwardRef((props, ref) => {
   const itemProps = useFileUploadItemPropsContext.useFileUploadItemPropsContext();
   const mergedProps = react$1.mergeProps(fileUpload.getItemPreviewImageProps({ ...itemProps, url }), props);
   react.useEffect(() => {
-    fileUpload.createFileUrl(itemProps.file, (url2) => setUrl(url2));
+    return fileUpload.createFileUrl(itemProps.file, (url2) => setUrl(url2));
   }, [itemProps, fileUpload]);
   return /* @__PURE__ */ jsxRuntime.jsx(factory.ark.img, { ...mergedProps, ref });
 });

package/dist/components/file-upload/file-upload-item-preview-image.js

@@ -12,7 +12,7 @@ const FileUploadItemPreviewImage = forwardRef((props, ref) => {
   const itemProps = useFileUploadItemPropsContext();
   const mergedProps = mergeProps(fileUpload.getItemPreviewImageProps({ ...itemProps, url }), props);
   useEffect(() => {
-    fileUpload.createFileUrl(itemProps.file, (url2) => setUrl(url2));
+    return fileUpload.createFileUrl(itemProps.file, (url2) => setUrl(url2));
   }, [itemProps, fileUpload]);
   return /* @__PURE__ */ jsx(ark.img, { ...mergedProps, ref });
 });

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

@@ -6,6 +6,7 @@ Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
 const jsxRuntime = require('react/jsx-runtime');
 const react$1 = require('@zag-js/react');
 const react = require('react');
+const composeRefs = require('../../utils/compose-refs.cjs');
 const factory = require('../factory.cjs');
 const usePresenceContext = require('../presence/use-presence-context.cjs');
 const useHoverCardContext = require('./use-hover-card-context.cjs');
@@ -13,11 +14,11 @@ const useHoverCardContext = require('./use-hover-card-context.cjs');
 const HoverCardContent = react.forwardRef((props, ref) => {
   const hoverCard = useHoverCardContext.useHoverCardContext();
   const presence = usePresenceContext.usePresenceContext();
-  const mergedProps = react$1.mergeProps(hoverCard.getContentProps(), presence.getPresenceProps(ref), props);
+  const mergedProps = react$1.mergeProps(hoverCard.getContentProps(), presence.getPresenceProps(), props);
   if (presence.unmounted) {
     return null;
   }
-  return /* @__PURE__ */ jsxRuntime.jsx(factory.ark.div, { ...mergedProps });
+  return /* @__PURE__ */ jsxRuntime.jsx(factory.ark.div, { ...mergedProps, ref: composeRefs.composeRefs(presence.ref, ref) });
 });
 HoverCardContent.displayName = "HoverCardContent";
 

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

@@ -2,6 +2,7 @@
 import { jsx } from 'react/jsx-runtime';
 import { mergeProps } from '@zag-js/react';
 import { forwardRef } from 'react';
+import { composeRefs } from '../../utils/compose-refs.js';
 import { ark } from '../factory.js';
 import { usePresenceContext } from '../presence/use-presence-context.js';
 import { useHoverCardContext } from './use-hover-card-context.js';
@@ -9,11 +10,11 @@ import { useHoverCardContext } from './use-hover-card-context.js';
 const HoverCardContent = forwardRef((props, ref) => {
   const hoverCard = useHoverCardContext();
   const presence = usePresenceContext();
-  const mergedProps = mergeProps(hoverCard.getContentProps(), presence.getPresenceProps(ref), props);
+  const mergedProps = mergeProps(hoverCard.getContentProps(), presence.getPresenceProps(), props);
   if (presence.unmounted) {
     return null;
   }
-  return /* @__PURE__ */ jsx(ark.div, { ...mergedProps });
+  return /* @__PURE__ */ jsx(ark.div, { ...mergedProps, ref: composeRefs(presence.ref, ref) });
 });
 HoverCardContent.displayName = "HoverCardContent";
 

package/dist/components/index.cjs

@@ -535,6 +535,13 @@ const toastTitle = require('./toast/toast-title.cjs');
 const toaster = require('./toast/toaster.cjs');
 const useToastContext = require('./toast/use-toast-context.cjs');
 const toast$1 = require('./toast/toast.cjs');
+const toggleContext = require('./toggle/toggle-context.cjs');
+const toggleIndicator = require('./toggle/toggle-indicator.cjs');
+const toggleRoot = require('./toggle/toggle-root.cjs');
+const toggle_anatomy = require('./toggle/toggle.anatomy.cjs');
+const useToggle = require('./toggle/use-toggle.cjs');
+const useToggleContext = require('./toggle/use-toggle-context.cjs');
+const toggle = require('./toggle/toggle.cjs');
 const toggleGroupContext = require('./toggle-group/toggle-group-context.cjs');
 const toggleGroupItem = require('./toggle-group/toggle-group-item.cjs');
 const toggleGroupRoot = require('./toggle-group/toggle-group-root.cjs');
@@ -1147,6 +1154,13 @@ exports.ToastTitle = toastTitle.ToastTitle;
 exports.Toaster = toaster.Toaster;
 exports.useToastContext = useToastContext.useToastContext;
 exports.Toast = toast$1;
+exports.ToggleContext = toggleContext.ToggleContext;
+exports.ToggleIndicator = toggleIndicator.ToggleIndicator;
+exports.ToggleRoot = toggleRoot.ToggleRoot;
+exports.toggleAnatomy = toggle_anatomy.toggleAnatomy;
+exports.useToggle = useToggle.useToggle;
+exports.useToggleContext = useToggleContext.useToggleContext;
+exports.Toggle = toggle;
 exports.ToggleGroupContext = toggleGroupContext.ToggleGroupContext;
 exports.ToggleGroupItem = toggleGroupItem.ToggleGroupItem;
 exports.ToggleGroupRoot = toggleGroupRoot.ToggleGroupRoot;

package/dist/components/index.d.cts

@@ -40,6 +40,7 @@ export * from './tags-input';
 export * from './time-picker';
 export * from './timer';
 export * from './toast';
+export * from './toggle';
 export * from './toggle-group';
 export * from './tooltip';
 export * from './tree-view';

package/dist/components/index.d.ts

@@ -40,6 +40,7 @@ export * from './tags-input';
 export * from './time-picker';
 export * from './timer';
 export * from './toast';
+export * from './toggle';
 export * from './toggle-group';
 export * from './tooltip';
 export * from './tree-view';

package/dist/components/index.js

@@ -568,6 +568,14 @@ export { Toaster } from './toast/toaster.js';
 export { useToastContext } from './toast/use-toast-context.js';
 import * as toast from './toast/toast.js';
 export { toast as Toast };
+export { ToggleContext } from './toggle/toggle-context.js';
+export { ToggleIndicator } from './toggle/toggle-indicator.js';
+export { ToggleRoot } from './toggle/toggle-root.js';
+export { toggleAnatomy } from './toggle/toggle.anatomy.js';
+export { useToggle } from './toggle/use-toggle.js';
+export { useToggleContext } from './toggle/use-toggle-context.js';
+import * as toggle from './toggle/toggle.js';
+export { toggle as Toggle };
 export { ToggleGroupContext } from './toggle-group/toggle-group-context.js';
 export { ToggleGroupItem } from './toggle-group/toggle-group-item.js';
 export { ToggleGroupRoot } from './toggle-group/toggle-group-root.js';

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

@@ -6,6 +6,7 @@ Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
 const jsxRuntime = require('react/jsx-runtime');
 const react$1 = require('@zag-js/react');
 const react = require('react');
+const composeRefs = require('../../utils/compose-refs.cjs');
 const factory = require('../factory.cjs');
 const usePresenceContext = require('../presence/use-presence-context.cjs');
 const useMenuContext = require('./use-menu-context.cjs');
@@ -13,11 +14,11 @@ const useMenuContext = require('./use-menu-context.cjs');
 const MenuContent = react.forwardRef((props, ref) => {
   const menu = useMenuContext.useMenuContext();
   const presence = usePresenceContext.usePresenceContext();
-  const mergedProps = react$1.mergeProps(menu.getContentProps(), presence.getPresenceProps(ref), props);
+  const mergedProps = react$1.mergeProps(menu.getContentProps(), presence.getPresenceProps(), props);
   if (presence.unmounted) {
     return null;
   }
-  return /* @__PURE__ */ jsxRuntime.jsx(factory.ark.div, { ...mergedProps });
+  return /* @__PURE__ */ jsxRuntime.jsx(factory.ark.div, { ...mergedProps, ref: composeRefs.composeRefs(presence.ref, ref) });
 });
 MenuContent.displayName = "MenuContent";
 

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

@@ -2,6 +2,7 @@
 import { jsx } from 'react/jsx-runtime';
 import { mergeProps } from '@zag-js/react';
 import { forwardRef } from 'react';
+import { composeRefs } from '../../utils/compose-refs.js';
 import { ark } from '../factory.js';
 import { usePresenceContext } from '../presence/use-presence-context.js';
 import { useMenuContext } from './use-menu-context.js';
@@ -9,11 +10,11 @@ import { useMenuContext } from './use-menu-context.js';
 const MenuContent = forwardRef((props, ref) => {
   const menu = useMenuContext();
   const presence = usePresenceContext();
-  const mergedProps = mergeProps(menu.getContentProps(), presence.getPresenceProps(ref), props);
+  const mergedProps = mergeProps(menu.getContentProps(), presence.getPresenceProps(), props);
   if (presence.unmounted) {
     return null;
   }
-  return /* @__PURE__ */ jsx(ark.div, { ...mergedProps });
+  return /* @__PURE__ */ jsx(ark.div, { ...mergedProps, ref: composeRefs(presence.ref, ref) });
 });
 MenuContent.displayName = "MenuContent";
 

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

@@ -6,6 +6,7 @@ Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
 const jsxRuntime = require('react/jsx-runtime');
 const react$1 = require('@zag-js/react');
 const react = require('react');
+const composeRefs = require('../../utils/compose-refs.cjs');
 const factory = require('../factory.cjs');
 const usePresenceContext = require('../presence/use-presence-context.cjs');
 const usePopoverContext = require('./use-popover-context.cjs');
@@ -13,11 +14,11 @@ const usePopoverContext = require('./use-popover-context.cjs');
 const PopoverContent = react.forwardRef((props, ref) => {
   const popover = usePopoverContext.usePopoverContext();
   const presence = usePresenceContext.usePresenceContext();
-  const mergedProps = react$1.mergeProps(popover.getContentProps(), presence.getPresenceProps(ref), props);
+  const mergedProps = react$1.mergeProps(popover.getContentProps(), presence.getPresenceProps(), props);
   if (presence.unmounted) {
     return null;
   }
-  return /* @__PURE__ */ jsxRuntime.jsx(factory.ark.div, { ...mergedProps });
+  return /* @__PURE__ */ jsxRuntime.jsx(factory.ark.div, { ...mergedProps, ref: composeRefs.composeRefs(presence.ref, ref) });
 });
 PopoverContent.displayName = "PopoverContent";
 

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

@@ -2,6 +2,7 @@
 import { jsx } from 'react/jsx-runtime';
 import { mergeProps } from '@zag-js/react';
 import { forwardRef } from 'react';
+import { composeRefs } from '../../utils/compose-refs.js';
 import { ark } from '../factory.js';
 import { usePresenceContext } from '../presence/use-presence-context.js';
 import { usePopoverContext } from './use-popover-context.js';
@@ -9,11 +10,11 @@ import { usePopoverContext } from './use-popover-context.js';
 const PopoverContent = forwardRef((props, ref) => {
   const popover = usePopoverContext();
   const presence = usePresenceContext();
-  const mergedProps = mergeProps(popover.getContentProps(), presence.getPresenceProps(ref), props);
+  const mergedProps = mergeProps(popover.getContentProps(), presence.getPresenceProps(), props);
   if (presence.unmounted) {
     return null;
   }
-  return /* @__PURE__ */ jsx(ark.div, { ...mergedProps });
+  return /* @__PURE__ */ jsx(ark.div, { ...mergedProps, ref: composeRefs(presence.ref, ref) });
 });
 PopoverContent.displayName = "PopoverContent";
 

package/dist/components/presence/presence.cjs

@@ -4,6 +4,7 @@ Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
 
 const jsxRuntime = require('react/jsx-runtime');
 const react = require('react');
+const composeRefs = require('../../utils/compose-refs.cjs');
 const factory = require('../factory.cjs');
 const splitPresenceProps = require('./split-presence-props.cjs');
 const usePresence = require('./use-presence.cjs');
@@ -18,9 +19,10 @@ const Presence = react.forwardRef((props, ref) => {
     factory.ark.div,
     {
       ...localProps,
-      ...presence.getPresenceProps(ref),
+      ...presence.getPresenceProps(),
       "data-scope": "presence",
-      "data-part": "root"
+      "data-part": "root",
+      ref: composeRefs.composeRefs(presence.ref, ref)
     }
   );
 });

package/dist/components/presence/presence.js

@@ -1,5 +1,6 @@
 import { jsx } from 'react/jsx-runtime';
 import { forwardRef } from 'react';
+import { composeRefs } from '../../utils/compose-refs.js';
 import { ark } from '../factory.js';
 import { splitPresenceProps } from './split-presence-props.js';
 import { usePresence } from './use-presence.js';
@@ -14,9 +15,10 @@ const Presence = forwardRef((props, ref) => {
     ark.div,
     {
       ...localProps,
-      ...presence.getPresenceProps(ref),
+      ...presence.getPresenceProps(),
       "data-scope": "presence",
-      "data-part": "root"
+      "data-part": "root",
+      ref: composeRefs(presence.ref, ref)
     }
   );
 });

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

@@ -6,7 +6,6 @@ Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
 const presence = require('@zag-js/presence');
 const react$1 = require('@zag-js/react');
 const react = require('react');
-const composeRefs = require('../../utils/compose-refs.cjs');
 const useEvent = require('../../utils/use-event.cjs');
 
 function _interopNamespaceDefault(e) {
@@ -41,12 +40,12 @@ const usePresence = (props) => {
     wasEverPresent.current = true;
   }
   const unmounted = !api.present && !wasEverPresent.current && lazyMount || unmountOnExit && !api.present && wasEverPresent.current;
-  const getPresenceProps = (ref) => ({
-    ref: composeRefs.composeRefs(api.setNode, ref),
+  const getPresenceProps = () => ({
     "data-state": props.present ? "open" : "closed",
     hidden: !api.present
   });
   return {
+    ref: api.setNode,
     getPresenceProps,
     present: api.present,
     unmounted

package/dist/components/presence/use-presence.d.cts

@@ -1,4 +1,3 @@
-import { ForwardedRef } from 'react';
 import { Optional } from '../../types';
 import { RenderStrategyProps } from '../../utils/render-strategy';
 import * as presence from '@zag-js/presence';
@@ -6,8 +5,8 @@ export interface UsePresenceProps extends Optional<presence.Context, 'present'>,
 }
 export type UsePresenceReturn = ReturnType<typeof usePresence>;
 export declare const usePresence: (props: UsePresenceProps) => {
-    getPresenceProps: <T extends HTMLElement>(ref: ForwardedRef<T>) => {
-        ref: ForwardedRef<T>;
+    ref: (node: HTMLElement | null) => void;
+    getPresenceProps: () => {
         'data-state': string;
         hidden: boolean;
     };

package/dist/components/presence/use-presence.d.ts

@@ -1,4 +1,3 @@
-import { ForwardedRef } from 'react';
 import { Optional } from '../../types';
 import { RenderStrategyProps } from '../../utils/render-strategy';
 import * as presence from '@zag-js/presence';
@@ -6,8 +5,8 @@ export interface UsePresenceProps extends Optional<presence.Context, 'present'>,
 }
 export type UsePresenceReturn = ReturnType<typeof usePresence>;
 export declare const usePresence: (props: UsePresenceProps) => {
-    getPresenceProps: <T extends HTMLElement>(ref: ForwardedRef<T>) => {
-        ref: ForwardedRef<T>;
+    ref: (node: HTMLElement | null) => void;
+    getPresenceProps: () => {
         'data-state': string;
         hidden: boolean;
     };