@ark-ui/react 4.9.1 → 5.0.0

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

@@ -4,26 +4,19 @@ import { useMachine, normalizeProps } from '@zag-js/react';
 import { useId } from 'react';
 import { useEnvironmentContext } from '../../providers/environment/use-environment-context.js';
 import { useLocaleContext } from '../../providers/locale/use-locale-context.js';
-import { useEvent } from '../../utils/use-event.js';
 
 const useHoverCard = (props = {}) => {
+  const id = useId();
   const { getRootNode } = useEnvironmentContext();
   const { dir } = useLocaleContext();
-  const initialContext = {
-    id: useId(),
+  const machineProps = {
+    id,
     dir,
     getRootNode,
-    open: props.defaultOpen,
-    "open.controlled": props.open !== void 0,
     ...props
   };
-  const context = {
-    ...initialContext,
-    open: props.open,
-    onOpenChange: useEvent(props.onOpenChange, { sync: true })
-  };
-  const [state, send] = useMachine(hoverCard.machine(initialContext), { context });
-  return hoverCard.connect(state, send, normalizeProps);
+  const service = useMachine(hoverCard.machine, machineProps);
+  return hoverCard.connect(service, normalizeProps);
 };
 
 export { useHoverCard };

package/dist/components/index.cjs

@@ -226,6 +226,7 @@ const fileUploadTrigger = require('./file-upload/file-upload-trigger.cjs');
 const useFileUpload = require('./file-upload/use-file-upload.cjs');
 const useFileUploadContext = require('./file-upload/use-file-upload-context.cjs');
 const fileUpload$1 = require('./file-upload/file-upload.cjs');
+const focusTrap = require('./focus-trap/focus-trap.cjs');
 const formatByte = require('./format/format-byte.cjs');
 const formatNumber = require('./format/format-number.cjs');
 const format = require('./format/format.cjs');
@@ -872,6 +873,7 @@ exports.FileUploadTrigger = fileUploadTrigger.FileUploadTrigger;
 exports.useFileUpload = useFileUpload.useFileUpload;
 exports.useFileUploadContext = useFileUploadContext.useFileUploadContext;
 exports.FileUpload = fileUpload$1;
+exports.FocusTrap = focusTrap.FocusTrap;
 exports.FormatByte = formatByte.FormatByte;
 exports.FormatNumber = formatNumber.FormatNumber;
 exports.Format = format;

package/dist/components/index.d.cts

@@ -14,6 +14,7 @@ export * from './factory';
 export * from './field';
 export * from './fieldset';
 export * from './file-upload';
+export * from './focus-trap';
 export * from './format';
 export * from './frame';
 export * from './highlight';

package/dist/components/index.d.ts

@@ -14,6 +14,7 @@ export * from './factory';
 export * from './field';
 export * from './fieldset';
 export * from './file-upload';
+export * from './focus-trap';
 export * from './format';
 export * from './frame';
 export * from './highlight';

package/dist/components/index.js

@@ -236,6 +236,7 @@ export { useFileUpload } from './file-upload/use-file-upload.js';
 export { useFileUploadContext } from './file-upload/use-file-upload-context.js';
 import * as fileUpload from './file-upload/file-upload.js';
 export { fileUpload as FileUpload };
+export { FocusTrap } from './focus-trap/focus-trap.js';
 export { FormatByte } from './format/format-byte.js';
 export { FormatNumber } from './format/format-number.js';
 import * as format from './format/format.js';

package/dist/components/menu/index.d.cts

@@ -1,25 +1,25 @@
 export type { HighlightChangeDetails as MenuHighlightChangeDetails, OpenChangeDetails as MenuOpenChangeDetails, SelectionDetails as MenuSelectionDetails, } from '@zag-js/menu';
 export { MenuArrow, type MenuArrowBaseProps, type MenuArrowProps } from './menu-arrow';
 export { MenuArrowTip, type MenuArrowTipBaseProps, type MenuArrowTipProps } from './menu-arrow-tip';
-export { MenuCheckboxItem, type MenuCheckboxItemBaseProps, type MenuCheckboxItemProps, } from './menu-checkbox-item';
+export { MenuCheckboxItem, type MenuCheckboxItemBaseProps, type MenuCheckboxItemProps } from './menu-checkbox-item';
 export { MenuContent, type MenuContentBaseProps, type MenuContentProps } from './menu-content';
 export { MenuContext, type MenuContextProps } from './menu-context';
 export { MenuContextTrigger, type MenuContextTriggerBaseProps, type MenuContextTriggerProps, } from './menu-context-trigger';
-export { MenuIndicator, type MenuIndicatorBaseProps, type MenuIndicatorProps, } from './menu-indicator';
+export { MenuIndicator, type MenuIndicatorBaseProps, type MenuIndicatorProps } from './menu-indicator';
 export { MenuItem, type MenuItemBaseProps, type MenuItemProps } from './menu-item';
 export { MenuItemContext, type MenuItemContextProps } from './menu-item-context';
-export { MenuItemGroup, type MenuItemGroupBaseProps, type MenuItemGroupProps, } from './menu-item-group';
+export { MenuItemGroup, type MenuItemGroupBaseProps, type MenuItemGroupProps } from './menu-item-group';
 export { MenuItemGroupLabel, type MenuItemGroupLabelBaseProps, type MenuItemGroupLabelProps, } from './menu-item-group-label';
-export { MenuItemIndicator, type MenuItemIndicatorBaseProps, type MenuItemIndicatorProps, } from './menu-item-indicator';
+export { MenuItemIndicator, type MenuItemIndicatorBaseProps, type MenuItemIndicatorProps } from './menu-item-indicator';
 export { MenuItemText, type MenuItemTextBaseProps, type MenuItemTextProps } from './menu-item-text';
-export { MenuPositioner, type MenuPositionerBaseProps, type MenuPositionerProps, } from './menu-positioner';
-export { MenuRadioItem, type MenuRadioItemBaseProps, type MenuRadioItemProps, } from './menu-radio-item';
+export { MenuPositioner, type MenuPositionerBaseProps, type MenuPositionerProps } from './menu-positioner';
+export { MenuRadioItem, type MenuRadioItemBaseProps, type MenuRadioItemProps } from './menu-radio-item';
 export { MenuRadioItemGroup, type MenuRadioItemGroupBaseProps, type MenuRadioItemGroupProps, } from './menu-radio-item-group';
 export { MenuRoot, type MenuRootBaseProps, type MenuRootProps } from './menu-root';
-export { MenuRootProvider, type MenuRootProviderBaseProps, type MenuRootProviderProps, } from './menu-root-provider';
-export { MenuSeparator, type MenuSeparatorBaseProps, type MenuSeparatorProps, } from './menu-separator';
+export { MenuRootProvider, type MenuRootProviderBaseProps, type MenuRootProviderProps } from './menu-root-provider';
+export { MenuSeparator, type MenuSeparatorBaseProps, type MenuSeparatorProps } from './menu-separator';
 export { MenuTrigger, type MenuTriggerBaseProps, type MenuTriggerProps } from './menu-trigger';
-export { MenuTriggerItem, type MenuTriggerItemBaseProps, type MenuTriggerItemProps, } from './menu-trigger-item';
+export { MenuTriggerItem, type MenuTriggerItemBaseProps, type MenuTriggerItemProps } from './menu-trigger-item';
 export { menuAnatomy } from './menu.anatomy';
 export { useMenu, type UseMenuProps, type UseMenuReturn } from './use-menu';
 export { useMenuContext, type UseMenuContext } from './use-menu-context';

package/dist/components/menu/index.d.ts

@@ -1,25 +1,25 @@
 export type { HighlightChangeDetails as MenuHighlightChangeDetails, OpenChangeDetails as MenuOpenChangeDetails, SelectionDetails as MenuSelectionDetails, } from '@zag-js/menu';
 export { MenuArrow, type MenuArrowBaseProps, type MenuArrowProps } from './menu-arrow';
 export { MenuArrowTip, type MenuArrowTipBaseProps, type MenuArrowTipProps } from './menu-arrow-tip';
-export { MenuCheckboxItem, type MenuCheckboxItemBaseProps, type MenuCheckboxItemProps, } from './menu-checkbox-item';
+export { MenuCheckboxItem, type MenuCheckboxItemBaseProps, type MenuCheckboxItemProps } from './menu-checkbox-item';
 export { MenuContent, type MenuContentBaseProps, type MenuContentProps } from './menu-content';
 export { MenuContext, type MenuContextProps } from './menu-context';
 export { MenuContextTrigger, type MenuContextTriggerBaseProps, type MenuContextTriggerProps, } from './menu-context-trigger';
-export { MenuIndicator, type MenuIndicatorBaseProps, type MenuIndicatorProps, } from './menu-indicator';
+export { MenuIndicator, type MenuIndicatorBaseProps, type MenuIndicatorProps } from './menu-indicator';
 export { MenuItem, type MenuItemBaseProps, type MenuItemProps } from './menu-item';
 export { MenuItemContext, type MenuItemContextProps } from './menu-item-context';
-export { MenuItemGroup, type MenuItemGroupBaseProps, type MenuItemGroupProps, } from './menu-item-group';
+export { MenuItemGroup, type MenuItemGroupBaseProps, type MenuItemGroupProps } from './menu-item-group';
 export { MenuItemGroupLabel, type MenuItemGroupLabelBaseProps, type MenuItemGroupLabelProps, } from './menu-item-group-label';
-export { MenuItemIndicator, type MenuItemIndicatorBaseProps, type MenuItemIndicatorProps, } from './menu-item-indicator';
+export { MenuItemIndicator, type MenuItemIndicatorBaseProps, type MenuItemIndicatorProps } from './menu-item-indicator';
 export { MenuItemText, type MenuItemTextBaseProps, type MenuItemTextProps } from './menu-item-text';
-export { MenuPositioner, type MenuPositionerBaseProps, type MenuPositionerProps, } from './menu-positioner';
-export { MenuRadioItem, type MenuRadioItemBaseProps, type MenuRadioItemProps, } from './menu-radio-item';
+export { MenuPositioner, type MenuPositionerBaseProps, type MenuPositionerProps } from './menu-positioner';
+export { MenuRadioItem, type MenuRadioItemBaseProps, type MenuRadioItemProps } from './menu-radio-item';
 export { MenuRadioItemGroup, type MenuRadioItemGroupBaseProps, type MenuRadioItemGroupProps, } from './menu-radio-item-group';
 export { MenuRoot, type MenuRootBaseProps, type MenuRootProps } from './menu-root';
-export { MenuRootProvider, type MenuRootProviderBaseProps, type MenuRootProviderProps, } from './menu-root-provider';
-export { MenuSeparator, type MenuSeparatorBaseProps, type MenuSeparatorProps, } from './menu-separator';
+export { MenuRootProvider, type MenuRootProviderBaseProps, type MenuRootProviderProps } from './menu-root-provider';
+export { MenuSeparator, type MenuSeparatorBaseProps, type MenuSeparatorProps } from './menu-separator';
 export { MenuTrigger, type MenuTriggerBaseProps, type MenuTriggerProps } from './menu-trigger';
-export { MenuTriggerItem, type MenuTriggerItemBaseProps, type MenuTriggerItemProps, } from './menu-trigger-item';
+export { MenuTriggerItem, type MenuTriggerItemBaseProps, type MenuTriggerItemProps } from './menu-trigger-item';
 export { menuAnatomy } from './menu.anatomy';
 export { useMenu, type UseMenuProps, type UseMenuReturn } from './use-menu';
 export { useMenuContext, type UseMenuContext } from './use-menu-context';

package/dist/components/menu/menu-context-trigger.cjs

@@ -9,13 +9,11 @@ const react = require('react');
 const factory = require('../factory.cjs');
 const useMenuContext = require('./use-menu-context.cjs');
 
-const MenuContextTrigger = react.forwardRef(
-  (props, ref) => {
-    const menu = useMenuContext.useMenuContext();
-    const mergedProps = react$1.mergeProps(menu.getContextTriggerProps(), props);
-    return /* @__PURE__ */ jsxRuntime.jsx(factory.ark.button, { ...mergedProps, ref });
-  }
-);
+const MenuContextTrigger = react.forwardRef((props, ref) => {
+  const menu = useMenuContext.useMenuContext();
+  const mergedProps = react$1.mergeProps(menu.getContextTriggerProps(), props);
+  return /* @__PURE__ */ jsxRuntime.jsx(factory.ark.button, { ...mergedProps, ref });
+});
 MenuContextTrigger.displayName = "MenuContextTrigger";
 
 exports.MenuContextTrigger = MenuContextTrigger;

package/dist/components/menu/menu-context-trigger.js

@@ -5,13 +5,11 @@ import { forwardRef } from 'react';
 import { ark } from '../factory.js';
 import { useMenuContext } from './use-menu-context.js';
 
-const MenuContextTrigger = forwardRef(
-  (props, ref) => {
-    const menu = useMenuContext();
-    const mergedProps = mergeProps(menu.getContextTriggerProps(), props);
-    return /* @__PURE__ */ jsx(ark.button, { ...mergedProps, ref });
-  }
-);
+const MenuContextTrigger = forwardRef((props, ref) => {
+  const menu = useMenuContext();
+  const mergedProps = mergeProps(menu.getContextTriggerProps(), props);
+  return /* @__PURE__ */ jsx(ark.button, { ...mergedProps, ref });
+});
 MenuContextTrigger.displayName = "MenuContextTrigger";
 
 export { MenuContextTrigger };

package/dist/components/menu/menu-item-group-label.cjs

@@ -10,14 +10,12 @@ const factory = require('../factory.cjs');
 const useMenuContext = require('./use-menu-context.cjs');
 const useMenuItemGroupContext = require('./use-menu-item-group-context.cjs');
 
-const MenuItemGroupLabel = react.forwardRef(
-  (props, ref) => {
-    const menu = useMenuContext.useMenuContext();
-    const itemGroup = useMenuItemGroupContext.useMenuItemGroupContext();
-    const mergedProps = react$1.mergeProps(menu.getItemGroupLabelProps({ htmlFor: itemGroup.id }), props);
-    return /* @__PURE__ */ jsxRuntime.jsx(factory.ark.div, { ...mergedProps, ref });
-  }
-);
+const MenuItemGroupLabel = react.forwardRef((props, ref) => {
+  const menu = useMenuContext.useMenuContext();
+  const itemGroup = useMenuItemGroupContext.useMenuItemGroupContext();
+  const mergedProps = react$1.mergeProps(menu.getItemGroupLabelProps({ htmlFor: itemGroup.id }), props);
+  return /* @__PURE__ */ jsxRuntime.jsx(factory.ark.div, { ...mergedProps, ref });
+});
 MenuItemGroupLabel.displayName = "MenuItemGroupLabel";
 
 exports.MenuItemGroupLabel = MenuItemGroupLabel;

package/dist/components/menu/menu-item-group-label.js

@@ -6,14 +6,12 @@ import { ark } from '../factory.js';
 import { useMenuContext } from './use-menu-context.js';
 import { useMenuItemGroupContext } from './use-menu-item-group-context.js';
 
-const MenuItemGroupLabel = forwardRef(
-  (props, ref) => {
-    const menu = useMenuContext();
-    const itemGroup = useMenuItemGroupContext();
-    const mergedProps = mergeProps(menu.getItemGroupLabelProps({ htmlFor: itemGroup.id }), props);
-    return /* @__PURE__ */ jsx(ark.div, { ...mergedProps, ref });
-  }
-);
+const MenuItemGroupLabel = forwardRef((props, ref) => {
+  const menu = useMenuContext();
+  const itemGroup = useMenuItemGroupContext();
+  const mergedProps = mergeProps(menu.getItemGroupLabelProps({ htmlFor: itemGroup.id }), props);
+  return /* @__PURE__ */ jsx(ark.div, { ...mergedProps, ref });
+});
 MenuItemGroupLabel.displayName = "MenuItemGroupLabel";
 
 export { MenuItemGroupLabel };

package/dist/components/menu/menu-item-group.cjs

@@ -12,9 +12,7 @@ const useMenuContext = require('./use-menu-context.cjs');
 const useMenuItemGroupContext = require('./use-menu-item-group-context.cjs');
 
 const MenuItemGroup = react.forwardRef((props, ref) => {
-  const [optionalItemGroupProps, localProps] = createSplitProps.createSplitProps()(props, [
-    "id"
-  ]);
+  const [optionalItemGroupProps, localProps] = createSplitProps.createSplitProps()(props, ["id"]);
   const menu = useMenuContext.useMenuContext();
   const id = react.useId();
   const itemGroupProps = { id, ...optionalItemGroupProps };

package/dist/components/menu/menu-item-group.js

@@ -8,9 +8,7 @@ import { useMenuContext } from './use-menu-context.js';
 import { MenuItemGroupProvider } from './use-menu-item-group-context.js';
 
 const MenuItemGroup = forwardRef((props, ref) => {
-  const [optionalItemGroupProps, localProps] = createSplitProps()(props, [
-    "id"
-  ]);
+  const [optionalItemGroupProps, localProps] = createSplitProps()(props, ["id"]);
   const menu = useMenuContext();
   const id = useId();
   const itemGroupProps = { id, ...optionalItemGroupProps };

package/dist/components/menu/menu-item-indicator.cjs

@@ -10,14 +10,12 @@ const factory = require('../factory.cjs');
 const useMenuContext = require('./use-menu-context.cjs');
 const useMenuOptionItemPropsContext = require('./use-menu-option-item-props-context.cjs');
 
-const MenuItemIndicator = react.forwardRef(
-  (props, ref) => {
-    const menu = useMenuContext.useMenuContext();
-    const optionItemProps = useMenuOptionItemPropsContext.useMenuOptionItemPropsContext();
-    const mergedProps = react$1.mergeProps(menu.getItemIndicatorProps(optionItemProps), props);
-    return /* @__PURE__ */ jsxRuntime.jsx(factory.ark.div, { ...mergedProps, ref });
-  }
-);
+const MenuItemIndicator = react.forwardRef((props, ref) => {
+  const menu = useMenuContext.useMenuContext();
+  const optionItemProps = useMenuOptionItemPropsContext.useMenuOptionItemPropsContext();
+  const mergedProps = react$1.mergeProps(menu.getItemIndicatorProps(optionItemProps), props);
+  return /* @__PURE__ */ jsxRuntime.jsx(factory.ark.div, { ...mergedProps, ref });
+});
 MenuItemIndicator.displayName = "MenuItemIndicator";
 
 exports.MenuItemIndicator = MenuItemIndicator;

package/dist/components/menu/menu-item-indicator.js

@@ -6,14 +6,12 @@ import { ark } from '../factory.js';
 import { useMenuContext } from './use-menu-context.js';
 import { useMenuOptionItemPropsContext } from './use-menu-option-item-props-context.js';
 
-const MenuItemIndicator = forwardRef(
-  (props, ref) => {
-    const menu = useMenuContext();
-    const optionItemProps = useMenuOptionItemPropsContext();
-    const mergedProps = mergeProps(menu.getItemIndicatorProps(optionItemProps), props);
-    return /* @__PURE__ */ jsx(ark.div, { ...mergedProps, ref });
-  }
-);
+const MenuItemIndicator = forwardRef((props, ref) => {
+  const menu = useMenuContext();
+  const optionItemProps = useMenuOptionItemPropsContext();
+  const mergedProps = mergeProps(menu.getItemIndicatorProps(optionItemProps), props);
+  return /* @__PURE__ */ jsx(ark.div, { ...mergedProps, ref });
+});
 MenuItemIndicator.displayName = "MenuItemIndicator";
 
 export { MenuItemIndicator };

package/dist/components/menu/menu-radio-item-group.cjs

@@ -11,16 +11,18 @@ const factory = require('../factory.cjs');
 const useMenuContext = require('./use-menu-context.cjs');
 const useMenuItemGroupContext = require('./use-menu-item-group-context.cjs');
 
-const MenuRadioItemGroup = react.forwardRef(
-  (props, ref) => {
-    const [optionalItemGroupProps, localProps] = createSplitProps.createSplitProps()(props, ["id", "onValueChange", "value"]);
-    const menu = useMenuContext.useMenuContext();
-    const id = react.useId();
-    const itemGroupProps = { id, ...optionalItemGroupProps };
-    const mergedProps = react$1.mergeProps(menu.getItemGroupProps({ id: itemGroupProps.id }), localProps);
-    return /* @__PURE__ */ jsxRuntime.jsx(useMenuItemGroupContext.MenuItemGroupProvider, { value: itemGroupProps, children: /* @__PURE__ */ jsxRuntime.jsx(factory.ark.div, { ...mergedProps, ref }) });
-  }
-);
+const MenuRadioItemGroup = react.forwardRef((props, ref) => {
+  const [optionalItemGroupProps, localProps] = createSplitProps.createSplitProps()(props, [
+    "id",
+    "onValueChange",
+    "value"
+  ]);
+  const menu = useMenuContext.useMenuContext();
+  const id = react.useId();
+  const itemGroupProps = { id, ...optionalItemGroupProps };
+  const mergedProps = react$1.mergeProps(menu.getItemGroupProps({ id: itemGroupProps.id }), localProps);
+  return /* @__PURE__ */ jsxRuntime.jsx(useMenuItemGroupContext.MenuItemGroupProvider, { value: itemGroupProps, children: /* @__PURE__ */ jsxRuntime.jsx(factory.ark.div, { ...mergedProps, ref }) });
+});
 MenuRadioItemGroup.displayName = "MenuRadioItemGroup";
 
 exports.MenuRadioItemGroup = MenuRadioItemGroup;

package/dist/components/menu/menu-radio-item-group.js

@@ -7,16 +7,18 @@ import { ark } from '../factory.js';
 import { useMenuContext } from './use-menu-context.js';
 import { MenuItemGroupProvider } from './use-menu-item-group-context.js';
 
-const MenuRadioItemGroup = forwardRef(
-  (props, ref) => {
-    const [optionalItemGroupProps, localProps] = createSplitProps()(props, ["id", "onValueChange", "value"]);
-    const menu = useMenuContext();
-    const id = useId();
-    const itemGroupProps = { id, ...optionalItemGroupProps };
-    const mergedProps = mergeProps(menu.getItemGroupProps({ id: itemGroupProps.id }), localProps);
-    return /* @__PURE__ */ jsx(MenuItemGroupProvider, { value: itemGroupProps, children: /* @__PURE__ */ jsx(ark.div, { ...mergedProps, ref }) });
-  }
-);
+const MenuRadioItemGroup = forwardRef((props, ref) => {
+  const [optionalItemGroupProps, localProps] = createSplitProps()(props, [
+    "id",
+    "onValueChange",
+    "value"
+  ]);
+  const menu = useMenuContext();
+  const id = useId();
+  const itemGroupProps = { id, ...optionalItemGroupProps };
+  const mergedProps = mergeProps(menu.getItemGroupProps({ id: itemGroupProps.id }), localProps);
+  return /* @__PURE__ */ jsx(MenuItemGroupProvider, { value: itemGroupProps, children: /* @__PURE__ */ jsx(ark.div, { ...mergedProps, ref }) });
+});
 MenuRadioItemGroup.displayName = "MenuRadioItemGroup";
 
 export { MenuRadioItemGroup };

package/dist/components/menu/menu-root-provider.cjs

@@ -18,19 +18,16 @@ const MenuRootProvider = (props) => {
   const parentApi = useMenuContext.useMenuContext();
   const parentMachine = useMenuMachineContext.useMenuMachineContext();
   const [presenceProps, { value: menu, children }] = splitPresenceProps.splitPresenceProps(props);
-  const { api, machine } = menu;
+  const { api, service } = menu;
   const presence = usePresence.usePresence(react.mergeProps({ present: api.open }, presenceProps));
   useEffectOnce.useEffectOnce(() => {
     if (!parentMachine) return;
     if (!parentApi) return;
-    parentApi.setChild(machine);
+    parentApi.setChild(service);
     api.setParent(parentMachine);
   });
-  const triggerItemContext = react$1.useCallback(
-    () => parentApi?.getTriggerItemProps(api),
-    [api, parentApi]
-  );
-  return /* @__PURE__ */ jsxRuntime.jsx(useMenuTriggerItemContext.MenuTriggerItemProvider, { value: triggerItemContext, children: /* @__PURE__ */ jsxRuntime.jsx(useMenuMachineContext.MenuMachineProvider, { value: machine, children: /* @__PURE__ */ jsxRuntime.jsx(useMenuContext.MenuProvider, { value: api, children: /* @__PURE__ */ jsxRuntime.jsx(usePresenceContext.PresenceProvider, { value: presence, children }) }) }) });
+  const triggerItemContext = react$1.useCallback(() => parentApi?.getTriggerItemProps(api), [api, parentApi]);
+  return /* @__PURE__ */ jsxRuntime.jsx(useMenuTriggerItemContext.MenuTriggerItemProvider, { value: triggerItemContext, children: /* @__PURE__ */ jsxRuntime.jsx(useMenuMachineContext.MenuMachineProvider, { value: service, children: /* @__PURE__ */ jsxRuntime.jsx(useMenuContext.MenuProvider, { value: api, children: /* @__PURE__ */ jsxRuntime.jsx(usePresenceContext.PresenceProvider, { value: presence, children }) }) }) });
 };
 
 exports.MenuRootProvider = MenuRootProvider;

package/dist/components/menu/menu-root-provider.js

@@ -14,19 +14,16 @@ const MenuRootProvider = (props) => {
   const parentApi = useMenuContext();
   const parentMachine = useMenuMachineContext();
   const [presenceProps, { value: menu, children }] = splitPresenceProps(props);
-  const { api, machine } = menu;
+  const { api, service } = menu;
   const presence = usePresence(mergeProps({ present: api.open }, presenceProps));
   useEffectOnce(() => {
     if (!parentMachine) return;
     if (!parentApi) return;
-    parentApi.setChild(machine);
+    parentApi.setChild(service);
     api.setParent(parentMachine);
   });
-  const triggerItemContext = useCallback(
-    () => parentApi?.getTriggerItemProps(api),
-    [api, parentApi]
-  );
-  return /* @__PURE__ */ jsx(MenuTriggerItemProvider, { value: triggerItemContext, children: /* @__PURE__ */ jsx(MenuMachineProvider, { value: machine, children: /* @__PURE__ */ jsx(MenuProvider, { value: api, children: /* @__PURE__ */ jsx(PresenceProvider, { value: presence, children }) }) }) });
+  const triggerItemContext = useCallback(() => parentApi?.getTriggerItemProps(api), [api, parentApi]);
+  return /* @__PURE__ */ jsx(MenuTriggerItemProvider, { value: triggerItemContext, children: /* @__PURE__ */ jsx(MenuMachineProvider, { value: service, children: /* @__PURE__ */ jsx(MenuProvider, { value: api, children: /* @__PURE__ */ jsx(PresenceProvider, { value: presence, children }) }) }) });
 };
 
 export { MenuRootProvider };

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

@@ -23,6 +23,7 @@ const MenuRoot = (props) => {
     "aria-label",
     "closeOnSelect",
     "composite",
+    "defaultHighlightedValue",
     "defaultOpen",
     "highlightedValue",
     "id",
@@ -42,19 +43,16 @@ const MenuRoot = (props) => {
   ]);
   const parentApi = useMenuContext.useMenuContext();
   const parentMachine = useMenuMachineContext.useMenuMachineContext();
-  const { api, machine } = useMenu.useMenu(useMenuProps);
+  const { api, service } = useMenu.useMenu(useMenuProps);
   const presence = usePresence.usePresence(react.mergeProps({ present: api.open }, presenceProps));
   useEffectOnce.useEffectOnce(() => {
     if (!parentMachine) return;
     if (!parentApi) return;
-    parentApi.setChild(machine);
+    parentApi.setChild(service);
     api.setParent(parentMachine);
   });
-  const triggerItemContext = react$1.useCallback(
-    () => parentApi?.getTriggerItemProps(api),
-    [api, parentApi]
-  );
-  return /* @__PURE__ */ jsxRuntime.jsx(useMenuTriggerItemContext.MenuTriggerItemProvider, { value: triggerItemContext, children: /* @__PURE__ */ jsxRuntime.jsx(useMenuMachineContext.MenuMachineProvider, { value: machine, children: /* @__PURE__ */ jsxRuntime.jsx(useMenuContext.MenuProvider, { value: api, children: /* @__PURE__ */ jsxRuntime.jsx(usePresenceContext.PresenceProvider, { value: presence, ...localProps }) }) }) });
+  const triggerItemContext = react$1.useCallback(() => parentApi?.getTriggerItemProps(api), [api, parentApi]);
+  return /* @__PURE__ */ jsxRuntime.jsx(useMenuTriggerItemContext.MenuTriggerItemProvider, { value: triggerItemContext, children: /* @__PURE__ */ jsxRuntime.jsx(useMenuMachineContext.MenuMachineProvider, { value: service, children: /* @__PURE__ */ jsxRuntime.jsx(useMenuContext.MenuProvider, { value: api, children: /* @__PURE__ */ jsxRuntime.jsx(usePresenceContext.PresenceProvider, { value: presence, ...localProps }) }) }) });
 };
 
 exports.MenuRoot = MenuRoot;

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

@@ -19,6 +19,7 @@ const MenuRoot = (props) => {
     "aria-label",
     "closeOnSelect",
     "composite",
+    "defaultHighlightedValue",
     "defaultOpen",
     "highlightedValue",
     "id",
@@ -38,19 +39,16 @@ const MenuRoot = (props) => {
   ]);
   const parentApi = useMenuContext();
   const parentMachine = useMenuMachineContext();
-  const { api, machine } = useMenu(useMenuProps);
+  const { api, service } = useMenu(useMenuProps);
   const presence = usePresence(mergeProps({ present: api.open }, presenceProps));
   useEffectOnce(() => {
     if (!parentMachine) return;
     if (!parentApi) return;
-    parentApi.setChild(machine);
+    parentApi.setChild(service);
     api.setParent(parentMachine);
   });
-  const triggerItemContext = useCallback(
-    () => parentApi?.getTriggerItemProps(api),
-    [api, parentApi]
-  );
-  return /* @__PURE__ */ jsx(MenuTriggerItemProvider, { value: triggerItemContext, children: /* @__PURE__ */ jsx(MenuMachineProvider, { value: machine, children: /* @__PURE__ */ jsx(MenuProvider, { value: api, children: /* @__PURE__ */ jsx(PresenceProvider, { value: presence, ...localProps }) }) }) });
+  const triggerItemContext = useCallback(() => parentApi?.getTriggerItemProps(api), [api, parentApi]);
+  return /* @__PURE__ */ jsx(MenuTriggerItemProvider, { value: triggerItemContext, children: /* @__PURE__ */ jsx(MenuMachineProvider, { value: service, children: /* @__PURE__ */ jsx(MenuProvider, { value: api, children: /* @__PURE__ */ jsx(PresenceProvider, { value: presence, ...localProps }) }) }) });
 };
 
 export { MenuRoot };

package/dist/components/menu/menu.d.cts

@@ -6,8 +6,8 @@ export { MenuContent as Content, type MenuContentBaseProps as ContentBaseProps,
 export { MenuContext as Context, type MenuContextProps as ContextProps } from './menu-context';
 export { MenuContextTrigger as ContextTrigger, type MenuContextTriggerBaseProps as ContextTriggerBaseProps, type MenuContextTriggerProps as ContextTriggerProps, } from './menu-context-trigger';
 export { MenuIndicator as Indicator, type MenuIndicatorBaseProps as IndicatorBaseProps, type MenuIndicatorProps as IndicatorProps, } from './menu-indicator';
-export { MenuItem as Item, type MenuItemBaseProps as ItemBaseProps, type MenuItemProps as ItemProps, } from './menu-item';
-export { MenuItemContext as ItemContext, type MenuItemContextProps as ItemContextProps, } from './menu-item-context';
+export { MenuItem as Item, type MenuItemBaseProps as ItemBaseProps, type MenuItemProps as ItemProps } from './menu-item';
+export { MenuItemContext as ItemContext, type MenuItemContextProps as ItemContextProps } from './menu-item-context';
 export { MenuItemGroup as ItemGroup, type MenuItemGroupBaseProps as ItemGroupBaseProps, type MenuItemGroupProps as ItemGroupProps, } from './menu-item-group';
 export { MenuItemGroupLabel as ItemGroupLabel, type MenuItemGroupLabelBaseProps as ItemGroupLabelBaseProps, type MenuItemGroupLabelProps as ItemGroupLabelProps, } from './menu-item-group-label';
 export { MenuItemIndicator as ItemIndicator, type MenuItemIndicatorBaseProps as ItemIndicatorBaseProps, type MenuItemIndicatorProps as ItemIndicatorProps, } from './menu-item-indicator';
@@ -15,7 +15,7 @@ export { MenuItemText as ItemText, type MenuItemTextBaseProps as ItemTextBasePro
 export { MenuPositioner as Positioner, type MenuPositionerBaseProps as PositionerBaseProps, type MenuPositionerProps as PositionerProps, } from './menu-positioner';
 export { MenuRadioItem as RadioItem, type MenuRadioItemBaseProps as RadioItemBaseProps, type MenuRadioItemProps as RadioItemProps, } from './menu-radio-item';
 export { MenuRadioItemGroup as RadioItemGroup, type MenuRadioItemGroupBaseProps as RadioItemGroupBaseProps, type MenuRadioItemGroupProps as RadioItemGroupProps, } from './menu-radio-item-group';
-export { MenuRoot as Root, type MenuRootBaseProps as RootBaseProps, type MenuRootProps as RootProps, } from './menu-root';
+export { MenuRoot as Root, type MenuRootBaseProps as RootBaseProps, type MenuRootProps as RootProps } from './menu-root';
 export { MenuRootProvider as RootProvider, type MenuRootProviderBaseProps as RootProviderBaseProps, type MenuRootProviderProps as RootProviderProps, } from './menu-root-provider';
 export { MenuSeparator as Separator, type MenuSeparatorBaseProps as SeparatorBaseProps, type MenuSeparatorProps as SeparatorProps, } from './menu-separator';
 export { MenuTrigger as Trigger, type MenuTriggerBaseProps as TriggerBaseProps, type MenuTriggerProps as TriggerProps, } from './menu-trigger';

package/dist/components/menu/menu.d.ts

@@ -6,8 +6,8 @@ export { MenuContent as Content, type MenuContentBaseProps as ContentBaseProps,
 export { MenuContext as Context, type MenuContextProps as ContextProps } from './menu-context';
 export { MenuContextTrigger as ContextTrigger, type MenuContextTriggerBaseProps as ContextTriggerBaseProps, type MenuContextTriggerProps as ContextTriggerProps, } from './menu-context-trigger';
 export { MenuIndicator as Indicator, type MenuIndicatorBaseProps as IndicatorBaseProps, type MenuIndicatorProps as IndicatorProps, } from './menu-indicator';
-export { MenuItem as Item, type MenuItemBaseProps as ItemBaseProps, type MenuItemProps as ItemProps, } from './menu-item';
-export { MenuItemContext as ItemContext, type MenuItemContextProps as ItemContextProps, } from './menu-item-context';
+export { MenuItem as Item, type MenuItemBaseProps as ItemBaseProps, type MenuItemProps as ItemProps } from './menu-item';
+export { MenuItemContext as ItemContext, type MenuItemContextProps as ItemContextProps } from './menu-item-context';
 export { MenuItemGroup as ItemGroup, type MenuItemGroupBaseProps as ItemGroupBaseProps, type MenuItemGroupProps as ItemGroupProps, } from './menu-item-group';
 export { MenuItemGroupLabel as ItemGroupLabel, type MenuItemGroupLabelBaseProps as ItemGroupLabelBaseProps, type MenuItemGroupLabelProps as ItemGroupLabelProps, } from './menu-item-group-label';
 export { MenuItemIndicator as ItemIndicator, type MenuItemIndicatorBaseProps as ItemIndicatorBaseProps, type MenuItemIndicatorProps as ItemIndicatorProps, } from './menu-item-indicator';
@@ -15,7 +15,7 @@ export { MenuItemText as ItemText, type MenuItemTextBaseProps as ItemTextBasePro
 export { MenuPositioner as Positioner, type MenuPositionerBaseProps as PositionerBaseProps, type MenuPositionerProps as PositionerProps, } from './menu-positioner';
 export { MenuRadioItem as RadioItem, type MenuRadioItemBaseProps as RadioItemBaseProps, type MenuRadioItemProps as RadioItemProps, } from './menu-radio-item';
 export { MenuRadioItemGroup as RadioItemGroup, type MenuRadioItemGroupBaseProps as RadioItemGroupBaseProps, type MenuRadioItemGroupProps as RadioItemGroupProps, } from './menu-radio-item-group';
-export { MenuRoot as Root, type MenuRootBaseProps as RootBaseProps, type MenuRootProps as RootProps, } from './menu-root';
+export { MenuRoot as Root, type MenuRootBaseProps as RootBaseProps, type MenuRootProps as RootProps } from './menu-root';
 export { MenuRootProvider as RootProvider, type MenuRootProviderBaseProps as RootProviderBaseProps, type MenuRootProviderProps as RootProviderProps, } from './menu-root-provider';
 export { MenuSeparator as Separator, type MenuSeparatorBaseProps as SeparatorBaseProps, type MenuSeparatorProps as SeparatorProps, } from './menu-separator';
 export { MenuTrigger as Trigger, type MenuTriggerBaseProps as TriggerBaseProps, type MenuTriggerProps as TriggerProps, } from './menu-trigger';

package/dist/components/menu/use-menu-machine-context.d.cts

@@ -1,4 +1,4 @@
 import { UseMenuReturn } from './use-menu';
 import { Provider } from 'react';
-export type UseMenuMachineContext = UseMenuReturn['machine'] | undefined;
+export type UseMenuMachineContext = UseMenuReturn['service'] | undefined;
 export declare const MenuMachineProvider: Provider<UseMenuMachineContext>, useMenuMachineContext: () => UseMenuMachineContext;

package/dist/components/menu/use-menu-machine-context.d.ts

@@ -1,4 +1,4 @@
 import { UseMenuReturn } from './use-menu';
 import { Provider } from 'react';
-export type UseMenuMachineContext = UseMenuReturn['machine'] | undefined;
+export type UseMenuMachineContext = UseMenuReturn['service'] | undefined;
 export declare const MenuMachineProvider: Provider<UseMenuMachineContext>, useMenuMachineContext: () => UseMenuMachineContext;

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

@@ -8,7 +8,6 @@ const react$1 = require('@zag-js/react');
 const react = require('react');
 const useEnvironmentContext = require('../../providers/environment/use-environment-context.cjs');
 const useLocaleContext = require('../../providers/locale/use-locale-context.cjs');
-const useEvent = require('../../utils/use-event.cjs');
 
 function _interopNamespaceDefault(e) {
   const n = Object.create(null, { [Symbol.toStringTag]: { value: 'Module' } });
@@ -30,24 +29,18 @@ function _interopNamespaceDefault(e) {
 const menu__namespace = /*#__PURE__*/_interopNamespaceDefault(menu);
 
 const useMenu = (props = {}) => {
+  const id = react.useId();
   const { getRootNode } = useEnvironmentContext.useEnvironmentContext();
   const { dir } = useLocaleContext.useLocaleContext();
-  const initialContext = {
-    id: react.useId(),
+  const machineProps = {
+    id,
     dir,
     getRootNode,
-    open: props.defaultOpen,
-    "open.controlled": props.open !== void 0,
     ...props
   };
-  const context = {
-    ...initialContext,
-    onOpenChange: useEvent.useEvent(props.onOpenChange),
-    onSelect: useEvent.useEvent(props.onSelect)
-  };
-  const [state, send, machine] = react$1.useMachine(menu__namespace.machine(initialContext), { context });
-  const api = menu__namespace.connect(state, send, react$1.normalizeProps);
-  return { api, machine };
+  const service = react$1.useMachine(menu__namespace.machine, machineProps);
+  const api = menu__namespace.connect(service, react$1.normalizeProps);
+  return { api, service };
 };
 
 exports.useMenu = useMenu;

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

@@ -1,15 +1,10 @@
 import { PropTypes } from '@zag-js/react';
 import { Optional } from '../../types';
 import * as menu from '@zag-js/menu';
-export interface UseMenuProps extends Optional<Omit<menu.Context, 'open.controlled' | 'dir' | 'getRootNode'>, 'id'> {
-    /**
-     * The initial open state of the menu when it is first rendered.
-     * Use when you do not need to control its open state.
-     */
-    defaultOpen?: menu.Context['open'];
+export interface UseMenuProps extends Optional<Omit<menu.Props, 'dir' | 'getRootNode'>, 'id'> {
 }
 export interface UseMenuReturn {
-    machine: menu.Service;
     api: menu.Api<PropTypes>;
+    service: menu.Service;
 }
 export declare const useMenu: (props?: UseMenuProps) => UseMenuReturn;