@ark-ui/react 5.29.1 → 5.31.0

package/dist/components/index.d.cts

@@ -28,6 +28,7 @@ export * from './json-tree-view';
 export * from './listbox';
 export * from './marquee';
 export * from './menu';
+export * from './navigation-menu';
 export * from './number-input';
 export * from './pagination';
 export * from './password-input';

package/dist/components/index.d.ts

@@ -28,6 +28,7 @@ export * from './json-tree-view';
 export * from './listbox';
 export * from './marquee';
 export * from './menu';
+export * from './navigation-menu';
 export * from './number-input';
 export * from './pagination';
 export * from './password-input';

package/dist/components/index.js

@@ -181,6 +181,7 @@ export { DatePickerPositioner } from './date-picker/date-picker-positioner.js';
 export { DatePickerPresetTrigger } from './date-picker/date-picker-preset-trigger.js';
 export { DatePickerPrevTrigger } from './date-picker/date-picker-prev-trigger.js';
 export { DatePickerRangeText } from './date-picker/date-picker-range-text.js';
+export { DatePickerValueText } from './date-picker/date-picker-value-text.js';
 export { DatePickerRoot } from './date-picker/date-picker-root.js';
 export { DatePickerRootProvider } from './date-picker/date-picker-root-provider.js';
 export { DatePickerTable } from './date-picker/date-picker-table.js';
@@ -390,6 +391,23 @@ export { useMenuContext } from './menu/use-menu-context.js';
 export { useMenuItemContext } from './menu/use-menu-item-context.js';
 import * as menu from './menu/menu.js';
 export { menu as Menu };
+export { NavigationMenuArrow } from './navigation-menu/navigation-menu-arrow.js';
+export { NavigationMenuContent } from './navigation-menu/navigation-menu-content.js';
+export { NavigationMenuContext } from './navigation-menu/navigation-menu-context.js';
+export { NavigationMenuIndicator } from './navigation-menu/navigation-menu-indicator.js';
+export { NavigationMenuItem } from './navigation-menu/navigation-menu-item.js';
+export { NavigationMenuItemIndicator } from './navigation-menu/navigation-menu-item-indicator.js';
+export { NavigationMenuLink } from './navigation-menu/navigation-menu-link.js';
+export { NavigationMenuList } from './navigation-menu/navigation-menu-list.js';
+export { NavigationMenuRoot } from './navigation-menu/navigation-menu-root.js';
+export { NavigationMenuRootProvider } from './navigation-menu/navigation-menu-root-provider.js';
+export { NavigationMenuTrigger } from './navigation-menu/navigation-menu-trigger.js';
+export { NavigationMenuViewport } from './navigation-menu/navigation-menu-viewport.js';
+export { NavigationMenuViewportPositioner } from './navigation-menu/navigation-menu-viewport-positioner.js';
+export { useNavigationMenu } from './navigation-menu/use-navigation-menu.js';
+export { useNavigationMenuContext } from './navigation-menu/use-navigation-menu-context.js';
+import * as navigationMenu from './navigation-menu/navigation-menu.js';
+export { navigationMenu as NavigationMenu };
 export { NumberInputContext } from './number-input/number-input-context.js';
 export { NumberInputControl } from './number-input/number-input-control.js';
 export { NumberInputDecrementTrigger } from './number-input/number-input-decrement-trigger.js';
@@ -406,7 +424,9 @@ import * as numberInput from './number-input/number-input.js';
 export { numberInput as NumberInput };
 export { PaginationContext } from './pagination/pagination-context.js';
 export { PaginationEllipsis } from './pagination/pagination-ellipsis.js';
+export { PaginationFirstTrigger } from './pagination/pagination-first-trigger.js';
 export { PaginationItem } from './pagination/pagination-item.js';
+export { PaginationLastTrigger } from './pagination/pagination-last-trigger.js';
 export { PaginationNextTrigger } from './pagination/pagination-next-trigger.js';
 export { PaginationPrevTrigger } from './pagination/pagination-prev-trigger.js';
 export { PaginationRoot } from './pagination/pagination-root.js';
@@ -718,6 +738,8 @@ export { useTooltip } from './tooltip/use-tooltip.js';
 export { useTooltipContext } from './tooltip/use-tooltip-context.js';
 import * as tooltip from './tooltip/tooltip.js';
 export { tooltip as Tooltip };
+export { waitForElement, waitForElementValue, waitForPromise } from '@zag-js/tour';
+export { waitForEvent } from './tour/wait-for-event.js';
 export { TourActionTrigger } from './tour/tour-action-trigger.js';
 export { TourActions } from './tour/tour-actions.js';
 export { TourArrow } from './tour/tour-arrow.js';
@@ -777,6 +799,7 @@ export { anatomy as hoverCardAnatomy } from '@zag-js/hover-card';
 export { anatomy as imageCropperAnatomy } from '@zag-js/image-cropper';
 export { anatomy as marqueeAnatomy } from '@zag-js/marquee';
 export { anatomy as menuAnatomy } from '@zag-js/menu';
+export { anatomy as navigationMenuAnatomy } from '@zag-js/navigation-menu';
 export { anatomy as numberInputAnatomy } from '@zag-js/number-input';
 export { anatomy as paginationAnatomy } from '@zag-js/pagination';
 export { anatomy as passwordInputAnatomy } from '@zag-js/password-input';

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

@@ -6,9 +6,12 @@ Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
 const jsxRuntime = require('react/jsx-runtime');
 const react = require('react');
 const treeViewRootProvider = require('../tree-view/tree-view-root-provider.cjs');
+const jsonTreeViewPropsContext = require('./json-tree-view-props-context.cjs');
 
 const JsonTreeViewRootProvider = react.forwardRef((props, ref) => {
-  return /* @__PURE__ */ jsxRuntime.jsx(treeViewRootProvider.TreeViewRootProvider, { "data-scope": "json-tree-view", ...props, ref });
+  const { value, ...restProps } = props;
+  const { options, ...treeView$1 } = value;
+  return /* @__PURE__ */ jsxRuntime.jsx(jsonTreeViewPropsContext.JsonTreeViewPropsProvider, { value: options, children: /* @__PURE__ */ jsxRuntime.jsx(treeViewRootProvider.TreeViewRootProvider, { "data-scope": "json-tree-view", value: treeView$1, ...restProps, ref }) });
 });
 JsonTreeViewRootProvider.displayName = "JsonTreeViewRootProvider";
 

package/dist/components/json-tree-view/json-tree-view-root-provider.d.cts

@@ -1,6 +1,8 @@
 import { JsonNode } from '@zag-js/json-tree-utils';
 import { TreeView } from '../tree-view';
+import { UseJsonTreeViewReturn } from './use-json-tree-view';
 import { ForwardRefExoticComponent, RefAttributes } from 'react';
-export interface JsonTreeViewRootProviderProps extends TreeView.RootProviderProps<JsonNode> {
+export interface JsonTreeViewRootProviderProps extends Omit<TreeView.RootProviderProps<JsonNode>, 'value'> {
+    value: UseJsonTreeViewReturn;
 }
 export declare const JsonTreeViewRootProvider: ForwardRefExoticComponent<JsonTreeViewRootProviderProps & RefAttributes<HTMLDivElement>>;

package/dist/components/json-tree-view/json-tree-view-root-provider.d.ts

@@ -1,6 +1,8 @@
 import { JsonNode } from '@zag-js/json-tree-utils';
 import { TreeView } from '../tree-view';
+import { UseJsonTreeViewReturn } from './use-json-tree-view';
 import { ForwardRefExoticComponent, RefAttributes } from 'react';
-export interface JsonTreeViewRootProviderProps extends TreeView.RootProviderProps<JsonNode> {
+export interface JsonTreeViewRootProviderProps extends Omit<TreeView.RootProviderProps<JsonNode>, 'value'> {
+    value: UseJsonTreeViewReturn;
 }
 export declare const JsonTreeViewRootProvider: ForwardRefExoticComponent<JsonTreeViewRootProviderProps & RefAttributes<HTMLDivElement>>;

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

@@ -2,9 +2,12 @@
 import { jsx } from 'react/jsx-runtime';
 import { forwardRef } from 'react';
 import { TreeViewRootProvider } from '../tree-view/tree-view-root-provider.js';
+import { JsonTreeViewPropsProvider } from './json-tree-view-props-context.js';
 
 const JsonTreeViewRootProvider = forwardRef((props, ref) => {
-  return /* @__PURE__ */ jsx(TreeViewRootProvider, { "data-scope": "json-tree-view", ...props, ref });
+  const { value, ...restProps } = props;
+  const { options, ...treeView$1 } = value;
+  return /* @__PURE__ */ jsx(JsonTreeViewPropsProvider, { value: options, children: /* @__PURE__ */ jsx(TreeViewRootProvider, { "data-scope": "json-tree-view", value: treeView$1, ...restProps, ref }) });
 });
 JsonTreeViewRootProvider.displayName = "JsonTreeViewRootProvider";
 

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

@@ -5,12 +5,21 @@ Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
 
 const jsonTreeUtils = require('@zag-js/json-tree-utils');
 const react = require('react');
+const createSplitProps = require('../../utils/create-split-props.cjs');
 const treeCollection = require('../collection/tree-collection.cjs');
 const useTreeView = require('../tree-view/use-tree-view.cjs');
 const getBranchValue = require('./get-branch-value.cjs');
 
+const splitJsonTreeViewProps = createSplitProps.createSplitProps();
 const useJsonTreeView = (props) => {
-  const { data, defaultExpandedDepth = 1, ...restProps } = props;
+  const [jsonTreeProps, localProps] = splitJsonTreeViewProps(props, [
+    "maxPreviewItems",
+    "collapseStringsAfterLength",
+    "quotesOnKeys",
+    "groupArraysAfterLength",
+    "showNonenumerable"
+  ]);
+  const { data, defaultExpandedDepth = 1, ...restProps } = localProps;
   const collection = react.useMemo(() => {
     return treeCollection.createTreeCollection({
       nodeToValue: jsonTreeUtils.nodeToValue,
@@ -21,12 +30,13 @@ const useJsonTreeView = (props) => {
   const defaultExpandedValue = react.useMemo(() => {
     return defaultExpandedDepth != null ? getBranchValue.getBranchValues(collection, defaultExpandedDepth) : void 0;
   }, [collection, defaultExpandedDepth]);
-  return useTreeView.useTreeView({
+  const treeView = useTreeView.useTreeView({
     defaultExpandedValue,
     ...restProps,
     collection,
     typeahead: false
   });
+  return { ...treeView, options: jsonTreeProps };
 };
 
 exports.useJsonTreeView = useJsonTreeView;

package/dist/components/json-tree-view/use-json-tree-view.d.cts

@@ -1,9 +1,11 @@
 import { JsonNode } from '@zag-js/json-tree-utils';
 import { UseTreeViewProps, UseTreeViewReturn } from '../tree-view';
-export interface UseJsonTreeViewProps extends Omit<UseTreeViewProps<JsonNode>, 'collection'> {
+import { JsonTreeViewOptions } from './json-tree-view-props-context';
+export interface UseJsonTreeViewProps extends Omit<UseTreeViewProps<JsonNode>, 'collection'>, JsonTreeViewOptions {
     data: unknown;
     defaultExpandedDepth?: number;
 }
 export interface UseJsonTreeViewReturn extends UseTreeViewReturn<JsonNode> {
+    options: JsonTreeViewOptions;
 }
-export declare const useJsonTreeView: (props: UseJsonTreeViewProps) => UseTreeViewReturn<JsonNode<any>>;
+export declare const useJsonTreeView: (props: UseJsonTreeViewProps) => UseJsonTreeViewReturn;

package/dist/components/json-tree-view/use-json-tree-view.d.ts

@@ -1,9 +1,11 @@
 import { JsonNode } from '@zag-js/json-tree-utils';
 import { UseTreeViewProps, UseTreeViewReturn } from '../tree-view';
-export interface UseJsonTreeViewProps extends Omit<UseTreeViewProps<JsonNode>, 'collection'> {
+import { JsonTreeViewOptions } from './json-tree-view-props-context';
+export interface UseJsonTreeViewProps extends Omit<UseTreeViewProps<JsonNode>, 'collection'>, JsonTreeViewOptions {
     data: unknown;
     defaultExpandedDepth?: number;
 }
 export interface UseJsonTreeViewReturn extends UseTreeViewReturn<JsonNode> {
+    options: JsonTreeViewOptions;
 }
-export declare const useJsonTreeView: (props: UseJsonTreeViewProps) => UseTreeViewReturn<JsonNode<any>>;
+export declare const useJsonTreeView: (props: UseJsonTreeViewProps) => UseJsonTreeViewReturn;

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

@@ -1,12 +1,21 @@
 'use client';
-import { getRootNode, nodeToString, nodeToValue } from '@zag-js/json-tree-utils';
+import { nodeToString, nodeToValue, getRootNode } from '@zag-js/json-tree-utils';
 import { useMemo } from 'react';
+import { createSplitProps } from '../../utils/create-split-props.js';
 import { createTreeCollection } from '../collection/tree-collection.js';
 import { useTreeView } from '../tree-view/use-tree-view.js';
 import { getBranchValues } from './get-branch-value.js';
 
+const splitJsonTreeViewProps = createSplitProps();
 const useJsonTreeView = (props) => {
-  const { data, defaultExpandedDepth = 1, ...restProps } = props;
+  const [jsonTreeProps, localProps] = splitJsonTreeViewProps(props, [
+    "maxPreviewItems",
+    "collapseStringsAfterLength",
+    "quotesOnKeys",
+    "groupArraysAfterLength",
+    "showNonenumerable"
+  ]);
+  const { data, defaultExpandedDepth = 1, ...restProps } = localProps;
   const collection = useMemo(() => {
     return createTreeCollection({
       nodeToValue,
@@ -17,12 +26,13 @@ const useJsonTreeView = (props) => {
   const defaultExpandedValue = useMemo(() => {
     return defaultExpandedDepth != null ? getBranchValues(collection, defaultExpandedDepth) : void 0;
   }, [collection, defaultExpandedDepth]);
-  return useTreeView({
+  const treeView = useTreeView({
     defaultExpandedValue,
     ...restProps,
     collection,
     typeahead: false
   });
+  return { ...treeView, options: jsonTreeProps };
 };
 
 export { useJsonTreeView };

package/dist/components/marquee/index.cjs

@@ -11,8 +11,8 @@ const marqueeRootProvider = require('./marquee-root-provider.cjs');
 const marqueeViewport = require('./marquee-viewport.cjs');
 const useMarquee = require('./use-marquee.cjs');
 const useMarqueeContext = require('./use-marquee-context.cjs');
-const marquee$1 = require('./marquee.cjs');
-const marquee = require('@zag-js/marquee');
+const marquee = require('./marquee.cjs');
+const marquee$1 = require('@zag-js/marquee');
 
 
 
@@ -25,8 +25,8 @@ exports.MarqueeRootProvider = marqueeRootProvider.MarqueeRootProvider;
 exports.MarqueeViewport = marqueeViewport.MarqueeViewport;
 exports.useMarquee = useMarquee.useMarquee;
 exports.useMarqueeContext = useMarqueeContext.useMarqueeContext;
-exports.Marquee = marquee$1;
+exports.Marquee = marquee;
 Object.defineProperty(exports, "marqueeAnatomy", {
   enumerable: true,
-  get: () => marquee.anatomy
+  get: () => marquee$1.anatomy
 });

package/dist/components/menu/index.cjs

@@ -26,8 +26,8 @@ const menuTriggerItem = require('./menu-trigger-item.cjs');
 const useMenu = require('./use-menu.cjs');
 const useMenuContext = require('./use-menu-context.cjs');
 const useMenuItemContext = require('./use-menu-item-context.cjs');
-const menu$1 = require('./menu.cjs');
-const menu = require('@zag-js/menu');
+const menu = require('./menu.cjs');
+const menu$1 = require('@zag-js/menu');
 
 
 
@@ -55,8 +55,8 @@ exports.MenuTriggerItem = menuTriggerItem.MenuTriggerItem;
 exports.useMenu = useMenu.useMenu;
 exports.useMenuContext = useMenuContext.useMenuContext;
 exports.useMenuItemContext = useMenuItemContext.useMenuItemContext;
-exports.Menu = menu$1;
+exports.Menu = menu;
 Object.defineProperty(exports, "menuAnatomy", {
   enumerable: true,
-  get: () => menu.anatomy
+  get: () => menu$1.anatomy
 });

package/dist/components/navigation-menu/index.cjs

@@ -0,0 +1,44 @@
+'use strict';
+
+Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
+
+const navigationMenuArrow = require('./navigation-menu-arrow.cjs');
+const navigationMenuContent = require('./navigation-menu-content.cjs');
+const navigationMenuContext = require('./navigation-menu-context.cjs');
+const navigationMenuIndicator = require('./navigation-menu-indicator.cjs');
+const navigationMenuItem = require('./navigation-menu-item.cjs');
+const navigationMenuItemIndicator = require('./navigation-menu-item-indicator.cjs');
+const navigationMenuLink = require('./navigation-menu-link.cjs');
+const navigationMenuList = require('./navigation-menu-list.cjs');
+const navigationMenuRoot = require('./navigation-menu-root.cjs');
+const navigationMenuRootProvider = require('./navigation-menu-root-provider.cjs');
+const navigationMenuTrigger = require('./navigation-menu-trigger.cjs');
+const navigationMenuViewport = require('./navigation-menu-viewport.cjs');
+const navigationMenuViewportPositioner = require('./navigation-menu-viewport-positioner.cjs');
+const useNavigationMenu = require('./use-navigation-menu.cjs');
+const useNavigationMenuContext = require('./use-navigation-menu-context.cjs');
+const navigationMenu = require('./navigation-menu.cjs');
+const navigationMenu$1 = require('@zag-js/navigation-menu');
+
+
+
+exports.NavigationMenuArrow = navigationMenuArrow.NavigationMenuArrow;
+exports.NavigationMenuContent = navigationMenuContent.NavigationMenuContent;
+exports.NavigationMenuContext = navigationMenuContext.NavigationMenuContext;
+exports.NavigationMenuIndicator = navigationMenuIndicator.NavigationMenuIndicator;
+exports.NavigationMenuItem = navigationMenuItem.NavigationMenuItem;
+exports.NavigationMenuItemIndicator = navigationMenuItemIndicator.NavigationMenuItemIndicator;
+exports.NavigationMenuLink = navigationMenuLink.NavigationMenuLink;
+exports.NavigationMenuList = navigationMenuList.NavigationMenuList;
+exports.NavigationMenuRoot = navigationMenuRoot.NavigationMenuRoot;
+exports.NavigationMenuRootProvider = navigationMenuRootProvider.NavigationMenuRootProvider;
+exports.NavigationMenuTrigger = navigationMenuTrigger.NavigationMenuTrigger;
+exports.NavigationMenuViewport = navigationMenuViewport.NavigationMenuViewport;
+exports.NavigationMenuViewportPositioner = navigationMenuViewportPositioner.NavigationMenuViewportPositioner;
+exports.useNavigationMenu = useNavigationMenu.useNavigationMenu;
+exports.useNavigationMenuContext = useNavigationMenuContext.useNavigationMenuContext;
+exports.NavigationMenu = navigationMenu;
+Object.defineProperty(exports, "navigationMenuAnatomy", {
+  enumerable: true,
+  get: () => navigationMenu$1.anatomy
+});

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

@@ -0,0 +1,18 @@
+export type { ValueChangeDetails as NavigationMenuValueChangeDetails } from '@zag-js/navigation-menu';
+export { NavigationMenuArrow, type NavigationMenuArrowBaseProps, type NavigationMenuArrowProps, } from './navigation-menu-arrow';
+export { NavigationMenuContent, type NavigationMenuContentBaseProps, type NavigationMenuContentProps, } from './navigation-menu-content';
+export { NavigationMenuContext, type NavigationMenuContextProps } from './navigation-menu-context';
+export { NavigationMenuIndicator, type NavigationMenuIndicatorBaseProps, type NavigationMenuIndicatorProps, } from './navigation-menu-indicator';
+export { NavigationMenuItem, type NavigationMenuItemBaseProps, type NavigationMenuItemProps, } from './navigation-menu-item';
+export { NavigationMenuItemIndicator, type NavigationMenuItemIndicatorBaseProps, type NavigationMenuItemIndicatorProps, } from './navigation-menu-item-indicator';
+export { NavigationMenuLink, type NavigationMenuLinkBaseProps, type NavigationMenuLinkProps, } from './navigation-menu-link';
+export { NavigationMenuList, type NavigationMenuListBaseProps, type NavigationMenuListProps, } from './navigation-menu-list';
+export { NavigationMenuRoot, type NavigationMenuRootBaseProps, type NavigationMenuRootProps, } from './navigation-menu-root';
+export { NavigationMenuRootProvider, type NavigationMenuRootProviderBaseProps, type NavigationMenuRootProviderProps, } from './navigation-menu-root-provider';
+export { NavigationMenuTrigger, type NavigationMenuTriggerBaseProps, type NavigationMenuTriggerProps, } from './navigation-menu-trigger';
+export { NavigationMenuViewport, type NavigationMenuViewportBaseProps, type NavigationMenuViewportProps, } from './navigation-menu-viewport';
+export { NavigationMenuViewportPositioner, type NavigationMenuViewportPositionerBaseProps, type NavigationMenuViewportPositionerProps, } from './navigation-menu-viewport-positioner';
+export { navigationMenuAnatomy } from './navigation-menu.anatomy';
+export { useNavigationMenu, type UseNavigationMenuProps, type UseNavigationMenuReturn } from './use-navigation-menu';
+export { useNavigationMenuContext, type UseNavigationMenuContext } from './use-navigation-menu-context';
+export * as NavigationMenu from './navigation-menu';

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

@@ -0,0 +1,18 @@
+export type { ValueChangeDetails as NavigationMenuValueChangeDetails } from '@zag-js/navigation-menu';
+export { NavigationMenuArrow, type NavigationMenuArrowBaseProps, type NavigationMenuArrowProps, } from './navigation-menu-arrow';
+export { NavigationMenuContent, type NavigationMenuContentBaseProps, type NavigationMenuContentProps, } from './navigation-menu-content';
+export { NavigationMenuContext, type NavigationMenuContextProps } from './navigation-menu-context';
+export { NavigationMenuIndicator, type NavigationMenuIndicatorBaseProps, type NavigationMenuIndicatorProps, } from './navigation-menu-indicator';
+export { NavigationMenuItem, type NavigationMenuItemBaseProps, type NavigationMenuItemProps, } from './navigation-menu-item';
+export { NavigationMenuItemIndicator, type NavigationMenuItemIndicatorBaseProps, type NavigationMenuItemIndicatorProps, } from './navigation-menu-item-indicator';
+export { NavigationMenuLink, type NavigationMenuLinkBaseProps, type NavigationMenuLinkProps, } from './navigation-menu-link';
+export { NavigationMenuList, type NavigationMenuListBaseProps, type NavigationMenuListProps, } from './navigation-menu-list';
+export { NavigationMenuRoot, type NavigationMenuRootBaseProps, type NavigationMenuRootProps, } from './navigation-menu-root';
+export { NavigationMenuRootProvider, type NavigationMenuRootProviderBaseProps, type NavigationMenuRootProviderProps, } from './navigation-menu-root-provider';
+export { NavigationMenuTrigger, type NavigationMenuTriggerBaseProps, type NavigationMenuTriggerProps, } from './navigation-menu-trigger';
+export { NavigationMenuViewport, type NavigationMenuViewportBaseProps, type NavigationMenuViewportProps, } from './navigation-menu-viewport';
+export { NavigationMenuViewportPositioner, type NavigationMenuViewportPositionerBaseProps, type NavigationMenuViewportPositionerProps, } from './navigation-menu-viewport-positioner';
+export { navigationMenuAnatomy } from './navigation-menu.anatomy';
+export { useNavigationMenu, type UseNavigationMenuProps, type UseNavigationMenuReturn } from './use-navigation-menu';
+export { useNavigationMenuContext, type UseNavigationMenuContext } from './use-navigation-menu-context';
+export * as NavigationMenu from './navigation-menu';

package/dist/components/navigation-menu/index.js

@@ -0,0 +1,18 @@
+export { NavigationMenuArrow } from './navigation-menu-arrow.js';
+export { NavigationMenuContent } from './navigation-menu-content.js';
+export { NavigationMenuContext } from './navigation-menu-context.js';
+export { NavigationMenuIndicator } from './navigation-menu-indicator.js';
+export { NavigationMenuItem } from './navigation-menu-item.js';
+export { NavigationMenuItemIndicator } from './navigation-menu-item-indicator.js';
+export { NavigationMenuLink } from './navigation-menu-link.js';
+export { NavigationMenuList } from './navigation-menu-list.js';
+export { NavigationMenuRoot } from './navigation-menu-root.js';
+export { NavigationMenuRootProvider } from './navigation-menu-root-provider.js';
+export { NavigationMenuTrigger } from './navigation-menu-trigger.js';
+export { NavigationMenuViewport } from './navigation-menu-viewport.js';
+export { NavigationMenuViewportPositioner } from './navigation-menu-viewport-positioner.js';
+export { useNavigationMenu } from './use-navigation-menu.js';
+export { useNavigationMenuContext } from './use-navigation-menu-context.js';
+import * as navigationMenu from './navigation-menu.js';
+export { navigationMenu as NavigationMenu };
+export { anatomy as navigationMenuAnatomy } from '@zag-js/navigation-menu';

package/dist/components/navigation-menu/navigation-menu-arrow.cjs

@@ -0,0 +1,19 @@
+'use client';
+'use strict';
+
+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 factory = require('../factory.cjs');
+const useNavigationMenuContext = require('./use-navigation-menu-context.cjs');
+
+const NavigationMenuArrow = react.forwardRef((props, ref) => {
+  const navigationMenu = useNavigationMenuContext.useNavigationMenuContext();
+  const mergedProps = react$1.mergeProps(navigationMenu.getArrowProps(), props);
+  return /* @__PURE__ */ jsxRuntime.jsx(factory.ark.div, { ...mergedProps, ref });
+});
+NavigationMenuArrow.displayName = "NavigationMenuArrow";
+
+exports.NavigationMenuArrow = NavigationMenuArrow;

package/dist/components/navigation-menu/navigation-menu-arrow.d.cts

@@ -0,0 +1,7 @@
+import { HTMLProps, PolymorphicProps } from '../factory';
+import { ForwardRefExoticComponent, RefAttributes } from 'react';
+export interface NavigationMenuArrowBaseProps extends PolymorphicProps {
+}
+export interface NavigationMenuArrowProps extends HTMLProps<'div'>, NavigationMenuArrowBaseProps {
+}
+export declare const NavigationMenuArrow: ForwardRefExoticComponent<NavigationMenuArrowProps & RefAttributes<HTMLDivElement>>;

package/dist/components/navigation-menu/navigation-menu-arrow.d.ts

@@ -0,0 +1,7 @@
+import { HTMLProps, PolymorphicProps } from '../factory';
+import { ForwardRefExoticComponent, RefAttributes } from 'react';
+export interface NavigationMenuArrowBaseProps extends PolymorphicProps {
+}
+export interface NavigationMenuArrowProps extends HTMLProps<'div'>, NavigationMenuArrowBaseProps {
+}
+export declare const NavigationMenuArrow: ForwardRefExoticComponent<NavigationMenuArrowProps & RefAttributes<HTMLDivElement>>;

package/dist/components/navigation-menu/navigation-menu-arrow.js

@@ -0,0 +1,15 @@
+'use client';
+import { jsx } from 'react/jsx-runtime';
+import { mergeProps } from '@zag-js/react';
+import { forwardRef } from 'react';
+import { ark } from '../factory.js';
+import { useNavigationMenuContext } from './use-navigation-menu-context.js';
+
+const NavigationMenuArrow = forwardRef((props, ref) => {
+  const navigationMenu = useNavigationMenuContext();
+  const mergedProps = mergeProps(navigationMenu.getArrowProps(), props);
+  return /* @__PURE__ */ jsx(ark.div, { ...mergedProps, ref });
+});
+NavigationMenuArrow.displayName = "NavigationMenuArrow";
+
+export { NavigationMenuArrow };

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

@@ -0,0 +1,41 @@
+'use client';
+'use strict';
+
+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 createSplitProps = require('../../utils/create-split-props.cjs');
+const renderStrategy = require('../../utils/render-strategy.cjs');
+const factory = require('../factory.cjs');
+const portal = require('../portal/portal.cjs');
+const usePresence = require('../presence/use-presence.cjs');
+const usePresenceContext = require('../presence/use-presence-context.cjs');
+const useNavigationMenuContext = require('./use-navigation-menu-context.cjs');
+const useNavigationMenuItemPropsContext = require('./use-navigation-menu-item-props-context.cjs');
+
+const splitContentProps = createSplitProps.createSplitProps();
+const NavigationMenuContent = react.forwardRef((props, ref) => {
+  const api = useNavigationMenuContext.useNavigationMenuContext();
+  const itemContext = useNavigationMenuItemPropsContext.useNavigationMenuItemPropsContext();
+  const value = props.value ?? itemContext?.value;
+  const [contentProps, localProps] = splitContentProps({ ...props, value }, ["value"]);
+  const renderStrategyProps = renderStrategy.useRenderStrategyPropsContext();
+  const presence = usePresence.usePresence({ ...renderStrategyProps, present: api.value === value });
+  const mergedProps = react$1.mergeProps(api.getContentProps(contentProps), presence.getPresenceProps(), localProps);
+  const content = /* @__PURE__ */ jsxRuntime.jsx(usePresenceContext.PresenceProvider, { value: presence, children: presence.unmounted ? null : /* @__PURE__ */ jsxRuntime.jsx(factory.ark.div, { ...mergedProps, ref: composeRefs.composeRefs(presence.ref, ref) }) });
+  const viewportNode = api.getViewportNode();
+  if (api.isViewportRendered && viewportNode) {
+    return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+      /* @__PURE__ */ jsxRuntime.jsx("div", { ...api.getViewportProxyProps(contentProps) }),
+      /* @__PURE__ */ jsxRuntime.jsx("div", { ...api.getTriggerProxyProps(contentProps) }),
+      /* @__PURE__ */ jsxRuntime.jsx(portal.Portal, { container: { current: viewportNode }, children: content })
+    ] });
+  }
+  return content;
+});
+NavigationMenuContent.displayName = "NavigationMenuContent";
+
+exports.NavigationMenuContent = NavigationMenuContent;

package/dist/components/navigation-menu/navigation-menu-content.d.cts

@@ -0,0 +1,9 @@
+import { ContentProps } from '@zag-js/navigation-menu';
+import { Assign } from '../../types';
+import { HTMLProps, PolymorphicProps } from '../factory';
+import { ForwardRefExoticComponent, RefAttributes } from 'react';
+export interface NavigationMenuContentBaseProps extends Partial<ContentProps>, PolymorphicProps {
+}
+export interface NavigationMenuContentProps extends Assign<HTMLProps<'div'>, NavigationMenuContentBaseProps> {
+}
+export declare const NavigationMenuContent: ForwardRefExoticComponent<NavigationMenuContentProps & RefAttributes<HTMLDivElement>>;

package/dist/components/navigation-menu/navigation-menu-content.d.ts

@@ -0,0 +1,9 @@
+import { ContentProps } from '@zag-js/navigation-menu';
+import { Assign } from '../../types';
+import { HTMLProps, PolymorphicProps } from '../factory';
+import { ForwardRefExoticComponent, RefAttributes } from 'react';
+export interface NavigationMenuContentBaseProps extends Partial<ContentProps>, PolymorphicProps {
+}
+export interface NavigationMenuContentProps extends Assign<HTMLProps<'div'>, NavigationMenuContentBaseProps> {
+}
+export declare const NavigationMenuContent: ForwardRefExoticComponent<NavigationMenuContentProps & RefAttributes<HTMLDivElement>>;

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

@@ -0,0 +1,37 @@
+'use client';
+import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
+import { mergeProps } from '@zag-js/react';
+import { forwardRef } from 'react';
+import { composeRefs } from '../../utils/compose-refs.js';
+import { createSplitProps } from '../../utils/create-split-props.js';
+import { useRenderStrategyPropsContext } from '../../utils/render-strategy.js';
+import { ark } from '../factory.js';
+import { Portal } from '../portal/portal.js';
+import { usePresence } from '../presence/use-presence.js';
+import { PresenceProvider } from '../presence/use-presence-context.js';
+import { useNavigationMenuContext } from './use-navigation-menu-context.js';
+import { useNavigationMenuItemPropsContext } from './use-navigation-menu-item-props-context.js';
+
+const splitContentProps = createSplitProps();
+const NavigationMenuContent = forwardRef((props, ref) => {
+  const api = useNavigationMenuContext();
+  const itemContext = useNavigationMenuItemPropsContext();
+  const value = props.value ?? itemContext?.value;
+  const [contentProps, localProps] = splitContentProps({ ...props, value }, ["value"]);
+  const renderStrategyProps = useRenderStrategyPropsContext();
+  const presence = usePresence({ ...renderStrategyProps, present: api.value === value });
+  const mergedProps = mergeProps(api.getContentProps(contentProps), presence.getPresenceProps(), localProps);
+  const content = /* @__PURE__ */ jsx(PresenceProvider, { value: presence, children: presence.unmounted ? null : /* @__PURE__ */ jsx(ark.div, { ...mergedProps, ref: composeRefs(presence.ref, ref) }) });
+  const viewportNode = api.getViewportNode();
+  if (api.isViewportRendered && viewportNode) {
+    return /* @__PURE__ */ jsxs(Fragment, { children: [
+      /* @__PURE__ */ jsx("div", { ...api.getViewportProxyProps(contentProps) }),
+      /* @__PURE__ */ jsx("div", { ...api.getTriggerProxyProps(contentProps) }),
+      /* @__PURE__ */ jsx(Portal, { container: { current: viewportNode }, children: content })
+    ] });
+  }
+  return content;
+});
+NavigationMenuContent.displayName = "NavigationMenuContent";
+
+export { NavigationMenuContent };

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

@@ -0,0 +1,10 @@
+'use client';
+'use strict';
+
+Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
+
+const useNavigationMenuContext = require('./use-navigation-menu-context.cjs');
+
+const NavigationMenuContext = (props) => props.children(useNavigationMenuContext.useNavigationMenuContext());
+
+exports.NavigationMenuContext = NavigationMenuContext;

package/dist/components/navigation-menu/navigation-menu-context.d.cts

@@ -0,0 +1,6 @@
+import { ReactNode } from 'react';
+import { UseNavigationMenuContext } from './use-navigation-menu-context';
+export interface NavigationMenuContextProps {
+    children: (context: UseNavigationMenuContext) => ReactNode;
+}
+export declare const NavigationMenuContext: (props: NavigationMenuContextProps) => ReactNode;

package/dist/components/navigation-menu/navigation-menu-context.d.ts

@@ -0,0 +1,6 @@
+import { ReactNode } from 'react';
+import { UseNavigationMenuContext } from './use-navigation-menu-context';
+export interface NavigationMenuContextProps {
+    children: (context: UseNavigationMenuContext) => ReactNode;
+}
+export declare const NavigationMenuContext: (props: NavigationMenuContextProps) => ReactNode;

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

@@ -0,0 +1,6 @@
+'use client';
+import { useNavigationMenuContext } from './use-navigation-menu-context.js';
+
+const NavigationMenuContext = (props) => props.children(useNavigationMenuContext());
+
+export { NavigationMenuContext };

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

@@ -0,0 +1,25 @@
+'use client';
+'use strict';
+
+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');
+const usePresenceContext = require('../presence/use-presence-context.cjs');
+const useNavigationMenuContext = require('./use-navigation-menu-context.cjs');
+
+const NavigationMenuIndicator = react.forwardRef((props, ref) => {
+  const navigationMenu = useNavigationMenuContext.useNavigationMenuContext();
+  const renderStrategyProps = renderStrategy.useRenderStrategyPropsContext();
+  const presence = usePresence.usePresence({ ...renderStrategyProps, present: navigationMenu.open });
+  const mergedProps = react$1.mergeProps(navigationMenu.getIndicatorProps(), presence.getPresenceProps(), props);
+  return /* @__PURE__ */ jsxRuntime.jsx(usePresenceContext.PresenceProvider, { value: presence, children: presence.unmounted ? null : /* @__PURE__ */ jsxRuntime.jsx(factory.ark.div, { ...mergedProps, ref: composeRefs.composeRefs(presence.ref, ref) }) });
+});
+NavigationMenuIndicator.displayName = "NavigationMenuIndicator";
+
+exports.NavigationMenuIndicator = NavigationMenuIndicator;

package/dist/components/navigation-menu/navigation-menu-indicator.d.cts

@@ -0,0 +1,7 @@
+import { HTMLProps, PolymorphicProps } from '../factory';
+import { ForwardRefExoticComponent, RefAttributes } from 'react';
+export interface NavigationMenuIndicatorBaseProps extends PolymorphicProps {
+}
+export interface NavigationMenuIndicatorProps extends HTMLProps<'div'>, NavigationMenuIndicatorBaseProps {
+}
+export declare const NavigationMenuIndicator: ForwardRefExoticComponent<NavigationMenuIndicatorProps & RefAttributes<HTMLDivElement>>;