@ark-ui/react 5.30.0 → 5.32.0

package/dist/components/index.d.cts

@@ -1,7 +1,7 @@
 export * from './accordion';
 export * from './angle-slider';
 export * from './avatar';
-export * from './bottom-sheet';
+export * from './drawer';
 export * from './carousel';
 export * from './checkbox';
 export * from './client-only';
@@ -47,6 +47,7 @@ export * from './signature-pad';
 export * from './slider';
 export * from './splitter';
 export * from './steps';
+export * from './swap';
 export * from './switch';
 export * from './tabs';
 export * from './tags-input';

package/dist/components/index.d.ts

@@ -1,7 +1,7 @@
 export * from './accordion';
 export * from './angle-slider';
 export * from './avatar';
-export * from './bottom-sheet';
+export * from './drawer';
 export * from './carousel';
 export * from './checkbox';
 export * from './client-only';
@@ -47,6 +47,7 @@ export * from './signature-pad';
 export * from './slider';
 export * from './splitter';
 export * from './steps';
+export * from './swap';
 export * from './switch';
 export * from './tabs';
 export * from './tags-input';

package/dist/components/index.js

@@ -34,20 +34,25 @@ export { useAvatar } from './avatar/use-avatar.js';
 export { useAvatarContext } from './avatar/use-avatar-context.js';
 import * as avatar from './avatar/avatar.js';
 export { avatar as Avatar };
-export { BottomSheetBackdrop } from './bottom-sheet/bottom-sheet-backdrop.js';
-export { BottomSheetCloseTrigger } from './bottom-sheet/bottom-sheet-close-trigger.js';
-export { BottomSheetContent } from './bottom-sheet/bottom-sheet-content.js';
-export { BottomSheetContext } from './bottom-sheet/bottom-sheet-context.js';
-export { BottomSheetGrabber } from './bottom-sheet/bottom-sheet-grabber.js';
-export { BottomSheetGrabberIndicator } from './bottom-sheet/bottom-sheet-grabber-indicator.js';
-export { BottomSheetRoot } from './bottom-sheet/bottom-sheet-root.js';
-export { BottomSheetRootProvider } from './bottom-sheet/bottom-sheet-root-provider.js';
-export { BottomSheetTitle } from './bottom-sheet/bottom-sheet-title.js';
-export { BottomSheetTrigger } from './bottom-sheet/bottom-sheet-trigger.js';
-export { useBottomSheet } from './bottom-sheet/use-bottom-sheet.js';
-export { useBottomSheetContext } from './bottom-sheet/use-bottom-sheet-context.js';
-import * as bottomSheet from './bottom-sheet/bottom-sheet.js';
-export { bottomSheet as BottomSheet };
+export { DrawerBackdrop } from './drawer/drawer-backdrop.js';
+export { DrawerCloseTrigger } from './drawer/drawer-close-trigger.js';
+export { DrawerContent } from './drawer/drawer-content.js';
+export { DrawerContext } from './drawer/drawer-context.js';
+export { DrawerPositioner } from './drawer/drawer-positioner.js';
+export { DrawerGrabber } from './drawer/drawer-grabber.js';
+export { DrawerGrabberIndicator } from './drawer/drawer-grabber-indicator.js';
+export { DrawerRoot } from './drawer/drawer-root.js';
+export { DrawerRootProvider } from './drawer/drawer-root-provider.js';
+export { DrawerTitle } from './drawer/drawer-title.js';
+export { DrawerTrigger } from './drawer/drawer-trigger.js';
+export { DrawerIndent } from './drawer/drawer-indent.js';
+export { DrawerIndentBackground } from './drawer/drawer-indent-background.js';
+export { DrawerStack } from './drawer/drawer-stack.js';
+export { useDrawer } from './drawer/use-drawer.js';
+export { useDrawerContext } from './drawer/use-drawer-context.js';
+export { useDrawerStackContext } from './drawer/use-drawer-stack-context.js';
+import * as drawer from './drawer/drawer.js';
+export { drawer as Drawer };
 export { CarouselAutoplayIndicator } from './carousel/carousel-autoplay-indicator.js';
 export { CarouselProgressText } from './carousel/carousel-progress-text.js';
 export { CarouselAutoplayTrigger } from './carousel/carousel-autoplay-trigger.js';
@@ -181,6 +186,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';
@@ -189,6 +195,8 @@ export { DatePickerTableCell } from './date-picker/date-picker-table-cell.js';
 export { DatePickerTableCellTrigger } from './date-picker/date-picker-table-cell-trigger.js';
 export { DatePickerTableHead } from './date-picker/date-picker-table-head.js';
 export { DatePickerTableHeader } from './date-picker/date-picker-table-header.js';
+export { DatePickerWeekNumberHeaderCell } from './date-picker/date-picker-week-number-header-cell.js';
+export { DatePickerWeekNumberCell } from './date-picker/date-picker-week-number-cell.js';
 export { DatePickerTableRow } from './date-picker/date-picker-table-row.js';
 export { DatePickerTrigger } from './date-picker/date-picker-trigger.js';
 export { DatePickerView } from './date-picker/date-picker-view.js';
@@ -645,6 +653,14 @@ export { useStepsContext } from './steps/use-steps-context.js';
 export { useStepsItemContext } from './steps/use-steps-item-context.js';
 import * as steps from './steps/steps.js';
 export { steps as Steps };
+import * as swap from './swap/swap.js';
+export { swap as Swap };
+export { SwapIndicator } from './swap/swap-indicator.js';
+export { SwapRoot } from './swap/swap-root.js';
+export { SwapRootProvider } from './swap/swap-root-provider.js';
+export { swapAnatomy } from './swap/swap.anatomy.js';
+export { useSwap } from './swap/use-swap.js';
+export { useSwapContext } from './swap/use-swap-context.js';
 export { SwitchContext } from './switch/switch-context.js';
 export { SwitchControl } from './switch/switch-control.js';
 export { SwitchHiddenInput } from './switch/switch-hidden-input.js';
@@ -737,6 +753,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';
@@ -785,10 +803,10 @@ export { treeView as TreeView };
 export { anatomy as accordionAnatomy } from '@zag-js/accordion';
 export { anatomy as angleSliderAnatomy } from '@zag-js/angle-slider';
 export { anatomy as avatarAnatomy } from '@zag-js/avatar';
-export { anatomy as bottomSheetAnatomy } from '@zag-js/bottom-sheet';
 export { anatomy as clipboardAnatomy } from '@zag-js/clipboard';
 export { anatomy as collapsibleAnatomy } from '@zag-js/collapsible';
 export { anatomy as dialogAnatomy } from '@zag-js/dialog';
+export { anatomy as drawerAnatomy } from '@zag-js/drawer';
 export { anatomy as editableAnatomy } from '@zag-js/editable';
 export { anatomy as fileUploadAnatomy } from '@zag-js/file-upload';
 export { anatomy as floatingPanelAnatomy } from '@zag-js/floating-panel';

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

@@ -17,8 +17,8 @@ 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$1 = require('./navigation-menu.cjs');
-const navigationMenu = require('@zag-js/navigation-menu');
+const navigationMenu = require('./navigation-menu.cjs');
+const navigationMenu$1 = require('@zag-js/navigation-menu');
 
 
 
@@ -37,8 +37,8 @@ exports.NavigationMenuViewport = navigationMenuViewport.NavigationMenuViewport;
 exports.NavigationMenuViewportPositioner = navigationMenuViewportPositioner.NavigationMenuViewportPositioner;
 exports.useNavigationMenu = useNavigationMenu.useNavigationMenu;
 exports.useNavigationMenuContext = useNavigationMenuContext.useNavigationMenuContext;
-exports.NavigationMenu = navigationMenu$1;
+exports.NavigationMenu = navigationMenu;
 Object.defineProperty(exports, "navigationMenuAnatomy", {
   enumerable: true,
-  get: () => navigationMenu.anatomy
+  get: () => navigationMenu$1.anatomy
 });

package/dist/components/navigation-menu/navigation-menu-viewport-positioner.cjs

@@ -9,14 +9,15 @@ const react = require('react');
 const createSplitProps = require('../../utils/create-split-props.cjs');
 const factory = require('../factory.cjs');
 const useNavigationMenuContext = require('./use-navigation-menu-context.cjs');
+const useNavigationMenuViewportPropsContext = require('./use-navigation-menu-viewport-props-context.cjs');
 
 const splitViewportProps = createSplitProps.createSplitProps();
 const NavigationMenuViewportPositioner = react.forwardRef(
   (props, ref) => {
-    const [positionerProps, localProps] = splitViewportProps(props, ["align"]);
+    const [viewportProps, localProps] = splitViewportProps(props, ["align"]);
     const navigationMenu = useNavigationMenuContext.useNavigationMenuContext();
-    const mergedProps = react$1.mergeProps(navigationMenu.getViewportPositionerProps(positionerProps), localProps);
-    return /* @__PURE__ */ jsxRuntime.jsx(factory.ark.div, { ...mergedProps, ref });
+    const mergedProps = react$1.mergeProps(navigationMenu.getViewportPositionerProps(viewportProps), localProps);
+    return /* @__PURE__ */ jsxRuntime.jsx(useNavigationMenuViewportPropsContext.NavigationMenuViewportPropsProvider, { value: viewportProps, children: /* @__PURE__ */ jsxRuntime.jsx(factory.ark.div, { ...mergedProps, ref }) });
   }
 );
 NavigationMenuViewportPositioner.displayName = "NavigationMenuViewportPositioner";

package/dist/components/navigation-menu/navigation-menu-viewport-positioner.js

@@ -5,14 +5,15 @@ import { forwardRef } from 'react';
 import { createSplitProps } from '../../utils/create-split-props.js';
 import { ark } from '../factory.js';
 import { useNavigationMenuContext } from './use-navigation-menu-context.js';
+import { NavigationMenuViewportPropsProvider } from './use-navigation-menu-viewport-props-context.js';
 
 const splitViewportProps = createSplitProps();
 const NavigationMenuViewportPositioner = forwardRef(
   (props, ref) => {
-    const [positionerProps, localProps] = splitViewportProps(props, ["align"]);
+    const [viewportProps, localProps] = splitViewportProps(props, ["align"]);
     const navigationMenu = useNavigationMenuContext();
-    const mergedProps = mergeProps(navigationMenu.getViewportPositionerProps(positionerProps), localProps);
-    return /* @__PURE__ */ jsx(ark.div, { ...mergedProps, ref });
+    const mergedProps = mergeProps(navigationMenu.getViewportPositionerProps(viewportProps), localProps);
+    return /* @__PURE__ */ jsx(NavigationMenuViewportPropsProvider, { value: viewportProps, children: /* @__PURE__ */ jsx(ark.div, { ...mergedProps, ref }) });
   }
 );
 NavigationMenuViewportPositioner.displayName = "NavigationMenuViewportPositioner";

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

@@ -7,23 +7,25 @@ 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 usePresence = require('../presence/use-presence.cjs');
 const usePresenceContext = require('../presence/use-presence-context.cjs');
 const useNavigationMenuContext = require('./use-navigation-menu-context.cjs');
+const useNavigationMenuViewportPropsContext = require('./use-navigation-menu-viewport-props-context.cjs');
 
-const splitViewportProps = createSplitProps.createSplitProps();
 const NavigationMenuViewport = react.forwardRef((props, ref) => {
-  const [viewportProps, localProps] = splitViewportProps(props, ["align"]);
+  const viewportPropsContext = useNavigationMenuViewportPropsContext.useNavigationMenuViewportPropsContext();
   const navigationMenu = useNavigationMenuContext.useNavigationMenuContext();
   const renderStrategyProps = renderStrategy.useRenderStrategyPropsContext();
-  const presence = usePresence.usePresence({ ...renderStrategyProps, present: navigationMenu.open });
+  const presence = usePresence.usePresence({
+    ...renderStrategyProps,
+    present: navigationMenu.open
+  });
   const mergedProps = react$1.mergeProps(
-    navigationMenu.getViewportProps(viewportProps),
+    navigationMenu.getViewportProps(viewportPropsContext),
     presence.getPresenceProps(),
-    localProps
+    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) }) });
 });

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

@@ -1,7 +1,6 @@
-import { ViewportProps } from '@zag-js/navigation-menu';
 import { HTMLProps, PolymorphicProps } from '../factory';
 import { ForwardRefExoticComponent, RefAttributes } from 'react';
-export interface NavigationMenuViewportBaseProps extends ViewportProps, PolymorphicProps {
+export interface NavigationMenuViewportBaseProps extends PolymorphicProps {
 }
 export interface NavigationMenuViewportProps extends HTMLProps<'div'>, NavigationMenuViewportBaseProps {
 }

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

@@ -1,7 +1,6 @@
-import { ViewportProps } from '@zag-js/navigation-menu';
 import { HTMLProps, PolymorphicProps } from '../factory';
 import { ForwardRefExoticComponent, RefAttributes } from 'react';
-export interface NavigationMenuViewportBaseProps extends ViewportProps, PolymorphicProps {
+export interface NavigationMenuViewportBaseProps extends PolymorphicProps {
 }
 export interface NavigationMenuViewportProps extends HTMLProps<'div'>, NavigationMenuViewportBaseProps {
 }

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

@@ -3,23 +3,25 @@ import { jsx } 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 { usePresence } from '../presence/use-presence.js';
 import { PresenceProvider } from '../presence/use-presence-context.js';
 import { useNavigationMenuContext } from './use-navigation-menu-context.js';
+import { useNavigationMenuViewportPropsContext } from './use-navigation-menu-viewport-props-context.js';
 
-const splitViewportProps = createSplitProps();
 const NavigationMenuViewport = forwardRef((props, ref) => {
-  const [viewportProps, localProps] = splitViewportProps(props, ["align"]);
+  const viewportPropsContext = useNavigationMenuViewportPropsContext();
   const navigationMenu = useNavigationMenuContext();
   const renderStrategyProps = useRenderStrategyPropsContext();
-  const presence = usePresence({ ...renderStrategyProps, present: navigationMenu.open });
+  const presence = usePresence({
+    ...renderStrategyProps,
+    present: navigationMenu.open
+  });
   const mergedProps = mergeProps(
-    navigationMenu.getViewportProps(viewportProps),
+    navigationMenu.getViewportProps(viewportPropsContext),
     presence.getPresenceProps(),
-    localProps
+    props
   );
   return /* @__PURE__ */ jsx(PresenceProvider, { value: presence, children: presence.unmounted ? null : /* @__PURE__ */ jsx(ark.div, { ...mergedProps, ref: composeRefs(presence.ref, ref) }) });
 });

package/dist/components/navigation-menu/use-navigation-menu-viewport-props-context.cjs

@@ -0,0 +1,16 @@
+'use client';
+'use strict';
+
+Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
+
+const createContext = require('../../utils/create-context.cjs');
+
+const [NavigationMenuViewportPropsProvider, useNavigationMenuViewportPropsContext] = createContext.createContext({
+  name: "NavigationMenuViewportPropsContext",
+  hookName: "useNavigationMenuViewportPropsContext",
+  providerName: "<NavigationMenuViewportPropsProvider />",
+  strict: false
+});
+
+exports.NavigationMenuViewportPropsProvider = NavigationMenuViewportPropsProvider;
+exports.useNavigationMenuViewportPropsContext = useNavigationMenuViewportPropsContext;

package/dist/components/navigation-menu/use-navigation-menu-viewport-props-context.d.cts

@@ -0,0 +1,3 @@
+import { ViewportProps } from '@zag-js/navigation-menu';
+import { Provider } from 'react';
+export declare const NavigationMenuViewportPropsProvider: Provider<ViewportProps>, useNavigationMenuViewportPropsContext: () => ViewportProps;

package/dist/components/navigation-menu/use-navigation-menu-viewport-props-context.d.ts

@@ -0,0 +1,3 @@
+import { ViewportProps } from '@zag-js/navigation-menu';
+import { Provider } from 'react';
+export declare const NavigationMenuViewportPropsProvider: Provider<ViewportProps>, useNavigationMenuViewportPropsContext: () => ViewportProps;

package/dist/components/navigation-menu/use-navigation-menu-viewport-props-context.js

@@ -0,0 +1,11 @@
+'use client';
+import { createContext } from '../../utils/create-context.js';
+
+const [NavigationMenuViewportPropsProvider, useNavigationMenuViewportPropsContext] = createContext({
+  name: "NavigationMenuViewportPropsContext",
+  hookName: "useNavigationMenuViewportPropsContext",
+  providerName: "<NavigationMenuViewportPropsProvider />",
+  strict: false
+});
+
+export { NavigationMenuViewportPropsProvider, useNavigationMenuViewportPropsContext };

package/dist/components/number-input/index.cjs

@@ -14,8 +14,8 @@ const numberInputScrubber = require('./number-input-scrubber.cjs');
 const numberInputValueText = require('./number-input-value-text.cjs');
 const useNumberInput = require('./use-number-input.cjs');
 const useNumberInputContext = require('./use-number-input-context.cjs');
-const numberInput$1 = require('./number-input.cjs');
-const numberInput = require('@zag-js/number-input');
+const numberInput = require('./number-input.cjs');
+const numberInput$1 = require('@zag-js/number-input');
 
 
 
@@ -31,8 +31,8 @@ exports.NumberInputScrubber = numberInputScrubber.NumberInputScrubber;
 exports.NumberInputValueText = numberInputValueText.NumberInputValueText;
 exports.useNumberInput = useNumberInput.useNumberInput;
 exports.useNumberInputContext = useNumberInputContext.useNumberInputContext;
-exports.NumberInput = numberInput$1;
+exports.NumberInput = numberInput;
 Object.defineProperty(exports, "numberInputAnatomy", {
   enumerable: true,
-  get: () => numberInput.anatomy
+  get: () => numberInput$1.anatomy
 });

package/dist/components/pagination/index.cjs

@@ -13,8 +13,8 @@ const paginationRoot = require('./pagination-root.cjs');
 const paginationRootProvider = require('./pagination-root-provider.cjs');
 const usePagination = require('./use-pagination.cjs');
 const usePaginationContext = require('./use-pagination-context.cjs');
-const pagination$1 = require('./pagination.cjs');
-const pagination = require('@zag-js/pagination');
+const pagination = require('./pagination.cjs');
+const pagination$1 = require('@zag-js/pagination');
 
 
 
@@ -29,8 +29,8 @@ exports.PaginationRoot = paginationRoot.PaginationRoot;
 exports.PaginationRootProvider = paginationRootProvider.PaginationRootProvider;
 exports.usePagination = usePagination.usePagination;
 exports.usePaginationContext = usePaginationContext.usePaginationContext;
-exports.Pagination = pagination$1;
+exports.Pagination = pagination;
 Object.defineProperty(exports, "paginationAnatomy", {
   enumerable: true,
-  get: () => pagination.anatomy
+  get: () => pagination$1.anatomy
 });

package/dist/components/password-input/index.cjs

@@ -12,8 +12,8 @@ const passwordInputRootProvider = require('./password-input-root-provider.cjs');
 const passwordInputVisibilityTrigger = require('./password-input-visibility-trigger.cjs');
 const usePasswordInput = require('./use-password-input.cjs');
 const usePasswordInputContext = require('./use-password-input-context.cjs');
-const passwordInput$1 = require('./password-input.cjs');
-const passwordInput = require('@zag-js/password-input');
+const passwordInput = require('./password-input.cjs');
+const passwordInput$1 = require('@zag-js/password-input');
 
 
 
@@ -27,8 +27,8 @@ exports.PasswordInputRootProvider = passwordInputRootProvider.PasswordInputRootP
 exports.PasswordInputVisibilityTrigger = passwordInputVisibilityTrigger.PasswordInputVisibilityTrigger;
 exports.usePasswordInput = usePasswordInput.usePasswordInput;
 exports.usePasswordInputContext = usePasswordInputContext.usePasswordInputContext;
-exports.PasswordInput = passwordInput$1;
+exports.PasswordInput = passwordInput;
 Object.defineProperty(exports, "passwordInputAnatomy", {
   enumerable: true,
-  get: () => passwordInput.anatomy
+  get: () => passwordInput$1.anatomy
 });

package/dist/components/pin-input/index.cjs

@@ -11,8 +11,8 @@ const pinInputRoot = require('./pin-input-root.cjs');
 const pinInputRootProvider = require('./pin-input-root-provider.cjs');
 const usePinInput = require('./use-pin-input.cjs');
 const usePinInputContext = require('./use-pin-input-context.cjs');
-const pinInput$1 = require('./pin-input.cjs');
-const pinInput = require('@zag-js/pin-input');
+const pinInput = require('./pin-input.cjs');
+const pinInput$1 = require('@zag-js/pin-input');
 
 
 
@@ -25,8 +25,8 @@ exports.PinInputRoot = pinInputRoot.PinInputRoot;
 exports.PinInputRootProvider = pinInputRootProvider.PinInputRootProvider;
 exports.usePinInput = usePinInput.usePinInput;
 exports.usePinInputContext = usePinInputContext.usePinInputContext;
-exports.PinInput = pinInput$1;
+exports.PinInput = pinInput;
 Object.defineProperty(exports, "pinInputAnatomy", {
   enumerable: true,
-  get: () => pinInput.anatomy
+  get: () => pinInput$1.anatomy
 });