@ark-ui/react 5.29.0 → 5.30.0

package/dist/components/anatomy.cjs

@@ -28,6 +28,7 @@ const hoverCard = require('@zag-js/hover-card');
 const imageCropper = require('@zag-js/image-cropper');
 const marquee = require('@zag-js/marquee');
 const menu = require('@zag-js/menu');
+const navigationMenu = require('@zag-js/navigation-menu');
 const numberInput = require('@zag-js/number-input');
 const pagination = require('@zag-js/pagination');
 const passwordInput = require('@zag-js/password-input');
@@ -121,6 +122,10 @@ Object.defineProperty(exports, "menuAnatomy", {
 	enumerable: true,
 	get: () => menu.anatomy
 });
+Object.defineProperty(exports, "navigationMenuAnatomy", {
+	enumerable: true,
+	get: () => navigationMenu.anatomy
+});
 Object.defineProperty(exports, "numberInputAnatomy", {
 	enumerable: true,
 	get: () => numberInput.anatomy

package/dist/components/anatomy.d.cts

@@ -21,6 +21,7 @@ export { imageCropperAnatomy } from './image-cropper/image-cropper.anatomy';
 export { listboxAnatomy } from './listbox/listbox.anatomy';
 export { marqueeAnatomy } from './marquee/marquee.anatomy';
 export { menuAnatomy } from './menu/menu.anatomy';
+export { navigationMenuAnatomy } from './navigation-menu/navigation-menu.anatomy';
 export { numberInputAnatomy } from './number-input/number-input.anatomy';
 export { paginationAnatomy } from './pagination/pagination.anatomy';
 export { passwordInputAnatomy } from './password-input/password-input.anatomy';

package/dist/components/anatomy.d.ts

@@ -21,6 +21,7 @@ export { imageCropperAnatomy } from './image-cropper/image-cropper.anatomy';
 export { listboxAnatomy } from './listbox/listbox.anatomy';
 export { marqueeAnatomy } from './marquee/marquee.anatomy';
 export { menuAnatomy } from './menu/menu.anatomy';
+export { navigationMenuAnatomy } from './navigation-menu/navigation-menu.anatomy';
 export { numberInputAnatomy } from './number-input/number-input.anatomy';
 export { paginationAnatomy } from './pagination/pagination.anatomy';
 export { passwordInputAnatomy } from './password-input/password-input.anatomy';

package/dist/components/anatomy.js

@@ -24,6 +24,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/checkbox/use-checkbox-group.cjs

@@ -5,9 +5,19 @@ Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
 
 const useControllableState = require('../../utils/use-controllable-state.cjs');
 const useEvent = require('../../utils/use-event.cjs');
+const useFieldsetContext = require('../fieldset/use-fieldset-context.cjs');
 
 function useCheckboxGroup(props = {}) {
-  const { defaultValue, value: controlledValue, onValueChange, disabled, readOnly, name, invalid } = props;
+  const fieldset = useFieldsetContext.useFieldsetContext();
+  const {
+    defaultValue,
+    value: controlledValue,
+    onValueChange,
+    disabled = fieldset?.disabled,
+    readOnly,
+    name,
+    invalid = fieldset?.invalid
+  } = props;
   const interactive = !(disabled || readOnly);
   const onChangeProp = useEvent.useEvent(onValueChange, { sync: true });
   const [value, setValue] = useControllableState.useControllableState({

package/dist/components/checkbox/use-checkbox-group.d.cts

@@ -46,9 +46,9 @@ export declare function useCheckboxGroup(props?: UseCheckboxGroupProps): {
         checked: boolean | undefined;
         onCheckedChange(): void;
         name: string | undefined;
-        disabled: boolean | undefined;
+        disabled: boolean;
         readOnly: boolean | undefined;
-        invalid: boolean | undefined;
+        invalid: boolean;
     };
 };
 export type UseCheckboxGroupReturn = ReturnType<typeof useCheckboxGroup>;

package/dist/components/checkbox/use-checkbox-group.d.ts

@@ -46,9 +46,9 @@ export declare function useCheckboxGroup(props?: UseCheckboxGroupProps): {
         checked: boolean | undefined;
         onCheckedChange(): void;
         name: string | undefined;
-        disabled: boolean | undefined;
+        disabled: boolean;
         readOnly: boolean | undefined;
-        invalid: boolean | undefined;
+        invalid: boolean;
     };
 };
 export type UseCheckboxGroupReturn = ReturnType<typeof useCheckboxGroup>;

package/dist/components/checkbox/use-checkbox-group.js

@@ -1,9 +1,19 @@
 'use client';
 import { useControllableState } from '../../utils/use-controllable-state.js';
 import { useEvent } from '../../utils/use-event.js';
+import { useFieldsetContext } from '../fieldset/use-fieldset-context.js';
 
 function useCheckboxGroup(props = {}) {
-  const { defaultValue, value: controlledValue, onValueChange, disabled, readOnly, name, invalid } = props;
+  const fieldset = useFieldsetContext();
+  const {
+    defaultValue,
+    value: controlledValue,
+    onValueChange,
+    disabled = fieldset?.disabled,
+    readOnly,
+    name,
+    invalid = fieldset?.invalid
+  } = props;
   const interactive = !(disabled || readOnly);
   const onChangeProp = useEvent(onValueChange, { sync: true });
   const [value, setValue] = useControllableState({

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

@@ -29,6 +29,8 @@ const DatePickerRoot = react.forwardRef((props, ref) => {
     "format",
     "id",
     "ids",
+    "inline",
+    "invalid",
     "isDateUnavailable",
     "locale",
     "max",
@@ -47,13 +49,13 @@ const DatePickerRoot = react.forwardRef((props, ref) => {
     "placeholder",
     "positioning",
     "readOnly",
+    "required",
     "selectionMode",
     "startOfWeek",
     "timeZone",
     "translations",
     "value",
-    "view",
-    "inline"
+    "view"
   ]);
   const datePicker = useDatePicker.useDatePicker(useDatePickerProps);
   const presence = usePresence.usePresence(react$1.mergeProps({ present: datePicker.open }, presenceProps));

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

@@ -25,6 +25,8 @@ const DatePickerRoot = forwardRef((props, ref) => {
     "format",
     "id",
     "ids",
+    "inline",
+    "invalid",
     "isDateUnavailable",
     "locale",
     "max",
@@ -43,13 +45,13 @@ const DatePickerRoot = forwardRef((props, ref) => {
     "placeholder",
     "positioning",
     "readOnly",
+    "required",
     "selectionMode",
     "startOfWeek",
     "timeZone",
     "translations",
     "value",
-    "view",
-    "inline"
+    "view"
   ]);
   const datePicker = useDatePicker(useDatePickerProps);
   const presence = usePresence(mergeProps({ present: datePicker.open }, presenceProps));

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

@@ -12,8 +12,7 @@ const fieldset_anatomy = require('./fieldset.anatomy.cjs');
 const useFieldset = (props = {}) => {
   const { disabled = false, invalid = false } = props;
   const env = useEnvironmentContext.useEnvironmentContext();
-  const hasErrorText = react.useRef(false);
-  const hasHelperText = react.useRef(false);
+  const [textElements, setTextElements] = react.useState({ hasErrorText: false, hasHelperText: false });
   const uid = react.useId();
   const id = props.id ?? uid;
   const rootRef = react.useRef(null);
@@ -25,8 +24,9 @@ const useFieldset = (props = {}) => {
     if (!rootNode) return;
     const checkTextElements = () => {
       const docOrShadowRoot = env.getRootNode();
-      hasErrorText.current = !!docOrShadowRoot.getElementById(errorTextId);
-      hasHelperText.current = !!docOrShadowRoot.getElementById(helperTextId);
+      const hasErrorText = !!docOrShadowRoot.getElementById(errorTextId);
+      const hasHelperText = !!docOrShadowRoot.getElementById(helperTextId);
+      setTextElements({ hasErrorText, hasHelperText });
     };
     checkTextElements();
     const win = env.getWindow();
@@ -34,52 +34,43 @@ const useFieldset = (props = {}) => {
     observer.observe(rootNode, { childList: true, subtree: true });
     return () => observer.disconnect();
   }, [env, errorTextId, helperTextId]);
-  const labelIds = react.useMemo(() => {
-    const ids = [];
-    if (hasErrorText.current && invalid) ids.push(errorTextId);
-    if (hasHelperText.current) ids.push(helperTextId);
-    return ids.join(" ") || void 0;
-  }, [invalid, errorTextId, helperTextId]);
-  const getRootProps = react.useMemo(
-    () => () => ({
-      ...fieldset_anatomy.parts.root.attrs,
-      ref: rootRef,
-      disabled,
-      "data-disabled": domQuery.dataAttr(disabled),
-      "data-invalid": domQuery.dataAttr(invalid),
-      "aria-labelledby": legendId,
-      "aria-describedby": labelIds
-    }),
-    [disabled, invalid, legendId, labelIds]
-  );
-  const getLegendProps = react.useMemo(
-    () => () => ({
-      id: legendId,
-      ...fieldset_anatomy.parts.legend.attrs,
-      "data-disabled": domQuery.dataAttr(disabled),
-      "data-invalid": domQuery.dataAttr(invalid)
-    }),
-    [legendId, disabled, invalid]
-  );
-  const getHelperTextProps = react.useMemo(
-    () => () => ({
-      id: helperTextId,
-      ...fieldset_anatomy.parts.helperText.attrs
-    }),
-    [helperTextId]
-  );
-  const getErrorTextProps = react.useMemo(
-    () => () => ({
-      id: errorTextId,
-      ...fieldset_anatomy.parts.errorText.attrs,
-      "aria-live": "polite"
-    }),
-    [errorTextId]
-  );
+  const ids = [];
+  if (textElements.hasErrorText && invalid) ids.push(errorTextId);
+  if (textElements.hasHelperText) ids.push(helperTextId);
+  const labelIds = ids.length > 0 ? ids.join(" ") : void 0;
+  const getRootProps = () => ({
+    ...fieldset_anatomy.parts.root.attrs,
+    ref: rootRef,
+    disabled,
+    "data-disabled": domQuery.dataAttr(disabled),
+    "data-invalid": domQuery.dataAttr(invalid),
+    "aria-labelledby": legendId,
+    "aria-describedby": labelIds
+  });
+  const getLegendProps = () => ({
+    id: legendId,
+    ...fieldset_anatomy.parts.legend.attrs,
+    "data-disabled": domQuery.dataAttr(disabled),
+    "data-invalid": domQuery.dataAttr(invalid)
+  });
+  const getHelperTextProps = () => ({
+    id: helperTextId,
+    ...fieldset_anatomy.parts.helperText.attrs
+  });
+  const getErrorTextProps = () => ({
+    id: errorTextId,
+    ...fieldset_anatomy.parts.errorText.attrs,
+    "aria-live": "polite"
+  });
   return {
     refs: {
       rootRef
     },
+    ids: {
+      legend: legendId,
+      errorText: errorTextId,
+      helperText: helperTextId
+    },
     disabled,
     invalid,
     getRootProps,

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

@@ -19,6 +19,11 @@ export declare const useFieldset: (props?: UseFieldsetProps) => {
     refs: {
         rootRef: RefObject<HTMLFieldSetElement | null>;
     };
+    ids: {
+        legend: string;
+        errorText: string;
+        helperText: string;
+    };
     disabled: boolean;
     invalid: boolean;
     getRootProps: () => HTMLProps<"fieldset">;

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

@@ -19,6 +19,11 @@ export declare const useFieldset: (props?: UseFieldsetProps) => {
     refs: {
         rootRef: RefObject<HTMLFieldSetElement | null>;
     };
+    ids: {
+        legend: string;
+        errorText: string;
+        helperText: string;
+    };
     disabled: boolean;
     invalid: boolean;
     getRootProps: () => HTMLProps<"fieldset">;

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

@@ -1,6 +1,6 @@
 'use client';
 import { dataAttr } from '@zag-js/dom-query';
-import { useRef, useId, useMemo } from 'react';
+import { useState, useId, useRef } from 'react';
 import { useEnvironmentContext } from '../../providers/environment/use-environment-context.js';
 import { useSafeLayoutEffect } from '../../utils/use-safe-layout-effect.js';
 import { parts } from './fieldset.anatomy.js';
@@ -8,8 +8,7 @@ import { parts } from './fieldset.anatomy.js';
 const useFieldset = (props = {}) => {
   const { disabled = false, invalid = false } = props;
   const env = useEnvironmentContext();
-  const hasErrorText = useRef(false);
-  const hasHelperText = useRef(false);
+  const [textElements, setTextElements] = useState({ hasErrorText: false, hasHelperText: false });
   const uid = useId();
   const id = props.id ?? uid;
   const rootRef = useRef(null);
@@ -21,8 +20,9 @@ const useFieldset = (props = {}) => {
     if (!rootNode) return;
     const checkTextElements = () => {
       const docOrShadowRoot = env.getRootNode();
-      hasErrorText.current = !!docOrShadowRoot.getElementById(errorTextId);
-      hasHelperText.current = !!docOrShadowRoot.getElementById(helperTextId);
+      const hasErrorText = !!docOrShadowRoot.getElementById(errorTextId);
+      const hasHelperText = !!docOrShadowRoot.getElementById(helperTextId);
+      setTextElements({ hasErrorText, hasHelperText });
     };
     checkTextElements();
     const win = env.getWindow();
@@ -30,52 +30,43 @@ const useFieldset = (props = {}) => {
     observer.observe(rootNode, { childList: true, subtree: true });
     return () => observer.disconnect();
   }, [env, errorTextId, helperTextId]);
-  const labelIds = useMemo(() => {
-    const ids = [];
-    if (hasErrorText.current && invalid) ids.push(errorTextId);
-    if (hasHelperText.current) ids.push(helperTextId);
-    return ids.join(" ") || void 0;
-  }, [invalid, errorTextId, helperTextId]);
-  const getRootProps = useMemo(
-    () => () => ({
-      ...parts.root.attrs,
-      ref: rootRef,
-      disabled,
-      "data-disabled": dataAttr(disabled),
-      "data-invalid": dataAttr(invalid),
-      "aria-labelledby": legendId,
-      "aria-describedby": labelIds
-    }),
-    [disabled, invalid, legendId, labelIds]
-  );
-  const getLegendProps = useMemo(
-    () => () => ({
-      id: legendId,
-      ...parts.legend.attrs,
-      "data-disabled": dataAttr(disabled),
-      "data-invalid": dataAttr(invalid)
-    }),
-    [legendId, disabled, invalid]
-  );
-  const getHelperTextProps = useMemo(
-    () => () => ({
-      id: helperTextId,
-      ...parts.helperText.attrs
-    }),
-    [helperTextId]
-  );
-  const getErrorTextProps = useMemo(
-    () => () => ({
-      id: errorTextId,
-      ...parts.errorText.attrs,
-      "aria-live": "polite"
-    }),
-    [errorTextId]
-  );
+  const ids = [];
+  if (textElements.hasErrorText && invalid) ids.push(errorTextId);
+  if (textElements.hasHelperText) ids.push(helperTextId);
+  const labelIds = ids.length > 0 ? ids.join(" ") : void 0;
+  const getRootProps = () => ({
+    ...parts.root.attrs,
+    ref: rootRef,
+    disabled,
+    "data-disabled": dataAttr(disabled),
+    "data-invalid": dataAttr(invalid),
+    "aria-labelledby": legendId,
+    "aria-describedby": labelIds
+  });
+  const getLegendProps = () => ({
+    id: legendId,
+    ...parts.legend.attrs,
+    "data-disabled": dataAttr(disabled),
+    "data-invalid": dataAttr(invalid)
+  });
+  const getHelperTextProps = () => ({
+    id: helperTextId,
+    ...parts.helperText.attrs
+  });
+  const getErrorTextProps = () => ({
+    id: errorTextId,
+    ...parts.errorText.attrs,
+    "aria-live": "polite"
+  });
   return {
     refs: {
       rootRef
     },
+    ids: {
+      legend: legendId,
+      errorText: errorTextId,
+      helperText: helperTextId
+    },
     disabled,
     invalid,
     getRootProps,

package/dist/components/index.cjs

@@ -370,6 +370,22 @@ const useMenu = require('./menu/use-menu.cjs');
 const useMenuContext = require('./menu/use-menu-context.cjs');
 const useMenuItemContext = require('./menu/use-menu-item-context.cjs');
 const menu$1 = require('./menu/menu.cjs');
+const navigationMenuArrow = require('./navigation-menu/navigation-menu-arrow.cjs');
+const navigationMenuContent = require('./navigation-menu/navigation-menu-content.cjs');
+const navigationMenuContext = require('./navigation-menu/navigation-menu-context.cjs');
+const navigationMenuIndicator = require('./navigation-menu/navigation-menu-indicator.cjs');
+const navigationMenuItem = require('./navigation-menu/navigation-menu-item.cjs');
+const navigationMenuItemIndicator = require('./navigation-menu/navigation-menu-item-indicator.cjs');
+const navigationMenuLink = require('./navigation-menu/navigation-menu-link.cjs');
+const navigationMenuList = require('./navigation-menu/navigation-menu-list.cjs');
+const navigationMenuRoot = require('./navigation-menu/navigation-menu-root.cjs');
+const navigationMenuRootProvider = require('./navigation-menu/navigation-menu-root-provider.cjs');
+const navigationMenuTrigger = require('./navigation-menu/navigation-menu-trigger.cjs');
+const navigationMenuViewport = require('./navigation-menu/navigation-menu-viewport.cjs');
+const navigationMenuViewportPositioner = require('./navigation-menu/navigation-menu-viewport-positioner.cjs');
+const useNavigationMenu = require('./navigation-menu/use-navigation-menu.cjs');
+const useNavigationMenuContext = require('./navigation-menu/use-navigation-menu-context.cjs');
+const navigationMenu$1 = require('./navigation-menu/navigation-menu.cjs');
 const numberInputContext = require('./number-input/number-input-context.cjs');
 const numberInputControl = require('./number-input/number-input-control.cjs');
 const numberInputDecrementTrigger = require('./number-input/number-input-decrement-trigger.cjs');
@@ -385,7 +401,9 @@ const useNumberInputContext = require('./number-input/use-number-input-context.c
 const numberInput$1 = require('./number-input/number-input.cjs');
 const paginationContext = require('./pagination/pagination-context.cjs');
 const paginationEllipsis = require('./pagination/pagination-ellipsis.cjs');
+const paginationFirstTrigger = require('./pagination/pagination-first-trigger.cjs');
 const paginationItem = require('./pagination/pagination-item.cjs');
+const paginationLastTrigger = require('./pagination/pagination-last-trigger.cjs');
 const paginationNextTrigger = require('./pagination/pagination-next-trigger.cjs');
 const paginationPrevTrigger = require('./pagination/pagination-prev-trigger.cjs');
 const paginationRoot = require('./pagination/pagination-root.cjs');
@@ -731,6 +749,7 @@ const hoverCard = require('@zag-js/hover-card');
 const imageCropper = require('@zag-js/image-cropper');
 const marquee = require('@zag-js/marquee');
 const menu = require('@zag-js/menu');
+const navigationMenu = require('@zag-js/navigation-menu');
 const numberInput = require('@zag-js/number-input');
 const pagination = require('@zag-js/pagination');
 const passwordInput = require('@zag-js/password-input');
@@ -1132,6 +1151,22 @@ exports.useMenu = useMenu.useMenu;
 exports.useMenuContext = useMenuContext.useMenuContext;
 exports.useMenuItemContext = useMenuItemContext.useMenuItemContext;
 exports.Menu = menu$1;
+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$1;
 exports.NumberInputContext = numberInputContext.NumberInputContext;
 exports.NumberInputControl = numberInputControl.NumberInputControl;
 exports.NumberInputDecrementTrigger = numberInputDecrementTrigger.NumberInputDecrementTrigger;
@@ -1147,7 +1182,9 @@ exports.useNumberInputContext = useNumberInputContext.useNumberInputContext;
 exports.NumberInput = numberInput$1;
 exports.PaginationContext = paginationContext.PaginationContext;
 exports.PaginationEllipsis = paginationEllipsis.PaginationEllipsis;
+exports.PaginationFirstTrigger = paginationFirstTrigger.PaginationFirstTrigger;
 exports.PaginationItem = paginationItem.PaginationItem;
+exports.PaginationLastTrigger = paginationLastTrigger.PaginationLastTrigger;
 exports.PaginationNextTrigger = paginationNextTrigger.PaginationNextTrigger;
 exports.PaginationPrevTrigger = paginationPrevTrigger.PaginationPrevTrigger;
 exports.PaginationRoot = paginationRoot.PaginationRoot;
@@ -1543,6 +1580,10 @@ Object.defineProperty(exports, "menuAnatomy", {
 	enumerable: true,
 	get: () => menu.anatomy
 });
+Object.defineProperty(exports, "navigationMenuAnatomy", {
+	enumerable: true,
+	get: () => navigationMenu.anatomy
+});
 Object.defineProperty(exports, "numberInputAnatomy", {
 	enumerable: true,
 	get: () => numberInput.anatomy

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

@@ -390,6 +390,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 +423,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';
@@ -777,6 +796,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/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$1 = require('./navigation-menu.cjs');
+const navigationMenu = 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$1;
+Object.defineProperty(exports, "navigationMenuAnatomy", {
+  enumerable: true,
+  get: () => navigationMenu.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';