[core] Add import extensions

.eslintrc.js

@@ -94,5 +94,11 @@ module.exports = {
         'filenames/match-exported': ['error'],
       },
     },
+    {
+      files: ['packages/**/*'],
+      rules: {
+        'import/extensions': ['error', 'ignorePackages'],
+      },
+    },
   ],
 };

docs/next.config.mjs

@@ -72,6 +72,11 @@ const nextConfig = {
           ...config.resolve.alias,
           docs: path.resolve(workspaceRoot, 'docs'),
         },
+        extensionAlias: {
+          '.js': ['.js', '.jsx', '.ts', '.tsx'],
+          '.mjs': ['.mjs', '.mts'],
+          '.cjs': ['.cjs', '.cts'],
+        },
       },
       module: {
         ...config.module,

packages/mui-base/src/Accordion/Header/AccordionHeader.test.tsx

@@ -1,10 +1,10 @@
 import * as React from 'react';
 import { Accordion } from '@base_ui/react/Accordion';
 import { describeConformance, createRenderer } from '#test-utils';
-import { NOOP } from '../../utils/noop';
-import { CollapsibleRootContext } from '../../Collapsible/Root/CollapsibleRootContext';
-import { AccordionRootContext } from '../Root/AccordionRootContext';
-import { AccordionItemContext } from '../Item/AccordionItemContext';
+import { NOOP } from '../../utils/noop.js';
+import { CollapsibleRootContext } from '../../Collapsible/Root/CollapsibleRootContext.js';
+import { AccordionRootContext } from '../Root/AccordionRootContext.js';
+import { AccordionItemContext } from '../Item/AccordionItemContext.js';
 
 const accordionRootContextValue: AccordionRootContext = {
   accordionItemRefs: { current: [] },

packages/mui-base/src/Accordion/Header/AccordionHeader.tsx

@@ -1,11 +1,11 @@
 'use client';
 import * as React from 'react';
 import PropTypes from 'prop-types';
-import { BaseUIComponentProps } from '../../utils/types';
-import { useComponentRenderer } from '../../utils/useComponentRenderer';
-import type { AccordionItem } from '../Item/AccordionItem';
-import { useAccordionItemContext } from '../Item/AccordionItemContext';
-import { accordionStyleHookMapping } from '../Item/styleHooks';
+import { BaseUIComponentProps } from '../../utils/types.js';
+import { useComponentRenderer } from '../../utils/useComponentRenderer.js';
+import type { AccordionItem } from '../Item/AccordionItem.js';
+import { useAccordionItemContext } from '../Item/AccordionItemContext.js';
+import { accordionStyleHookMapping } from '../Item/styleHooks.js';
 
 /**
  *

packages/mui-base/src/Accordion/Item/AccordionItem.test.tsx

@@ -1,8 +1,8 @@
 import * as React from 'react';
 import { Accordion } from '@base_ui/react/Accordion';
 import { describeConformance, createRenderer } from '#test-utils';
-import { NOOP } from '../../utils/noop';
-import { AccordionRootContext } from '../Root/AccordionRootContext';
+import { NOOP } from '../../utils/noop.js';
+import { AccordionRootContext } from '../Root/AccordionRootContext.js';
 
 const accordionRootContextValue: AccordionRootContext = {
   accordionItemRefs: { current: [] },

packages/mui-base/src/Accordion/Item/AccordionItem.tsx

@@ -1,20 +1,20 @@
 'use client';
 import * as React from 'react';
 import PropTypes from 'prop-types';
-import { useForkRef } from '../../utils/useForkRef';
-import { BaseUIComponentProps } from '../../utils/types';
-import { useComponentRenderer } from '../../utils/useComponentRenderer';
-import { useEventCallback } from '../../utils/useEventCallback';
-import { useId } from '../../utils/useId';
-import type { TransitionStatus } from '../../utils/useTransitionStatus';
-import { useCollapsibleRoot } from '../../Collapsible/Root/useCollapsibleRoot';
-import type { CollapsibleRoot } from '../../Collapsible/Root/CollapsibleRoot';
-import { CollapsibleRootContext } from '../../Collapsible/Root/CollapsibleRootContext';
-import { useCompositeListItem } from '../../Composite/List/useCompositeListItem';
-import type { AccordionRoot } from '../Root/AccordionRoot';
-import { useAccordionRootContext } from '../Root/AccordionRootContext';
-import { AccordionItemContext } from './AccordionItemContext';
-import { accordionStyleHookMapping } from './styleHooks';
+import { useForkRef } from '../../utils/useForkRef.js';
+import { BaseUIComponentProps } from '../../utils/types.js';
+import { useComponentRenderer } from '../../utils/useComponentRenderer.js';
+import { useEventCallback } from '../../utils/useEventCallback.js';
+import { useId } from '../../utils/useId.js';
+import type { TransitionStatus } from '../../utils/useTransitionStatus.js';
+import { useCollapsibleRoot } from '../../Collapsible/Root/useCollapsibleRoot.js';
+import type { CollapsibleRoot } from '../../Collapsible/Root/CollapsibleRoot.js';
+import { CollapsibleRootContext } from '../../Collapsible/Root/CollapsibleRootContext.js';
+import { useCompositeListItem } from '../../Composite/List/useCompositeListItem.js';
+import type { AccordionRoot } from '../Root/AccordionRoot.js';
+import { useAccordionRootContext } from '../Root/AccordionRootContext.js';
+import { AccordionItemContext } from './AccordionItemContext.js';
+import { accordionStyleHookMapping } from './styleHooks.js';
 
 /**
  *

packages/mui-base/src/Accordion/Item/AccordionItemContext.ts

@@ -1,6 +1,6 @@
 'use client';
 import * as React from 'react';
-import type { AccordionItem } from './AccordionItem';
+import type { AccordionItem } from './AccordionItem.js';
 
 export interface AccordionItemContext {
   open: boolean;

packages/mui-base/src/Accordion/Item/styleHooks.ts

@@ -1,6 +1,6 @@
-import type { CustomStyleHookMapping } from '../../utils/getStyleHookProps';
-import { collapsibleOpenStateMapping as baseMapping } from '../../utils/collapsibleOpenStateMapping';
-import type { AccordionItem } from './AccordionItem';
+import type { CustomStyleHookMapping } from '../../utils/getStyleHookProps.js';
+import { collapsibleOpenStateMapping as baseMapping } from '../../utils/collapsibleOpenStateMapping.js';
+import type { AccordionItem } from './AccordionItem.js';
 
 export const accordionStyleHookMapping: CustomStyleHookMapping<AccordionItem.OwnerState> = {
   ...baseMapping,

packages/mui-base/src/Accordion/Panel/AccordionPanel.test.tsx

@@ -1,10 +1,10 @@
 import * as React from 'react';
 import { Accordion } from '@base_ui/react/Accordion';
 import { describeConformance, createRenderer } from '#test-utils';
-import { NOOP } from '../../utils/noop';
-import { CollapsibleRootContext } from '../../Collapsible/Root/CollapsibleRootContext';
-import { AccordionRootContext } from '../Root/AccordionRootContext';
-import { AccordionItemContext } from '../Item/AccordionItemContext';
+import { NOOP } from '../../utils/noop.js';
+import { CollapsibleRootContext } from '../../Collapsible/Root/CollapsibleRootContext.js';
+import { AccordionRootContext } from '../Root/AccordionRootContext.js';
+import { AccordionItemContext } from '../Item/AccordionItemContext.js';
 
 const accordionRootContextValue: AccordionRootContext = {
   accordionItemRefs: { current: [] },

packages/mui-base/src/Accordion/Panel/AccordionPanel.tsx

@@ -1,14 +1,14 @@
 'use client';
 import * as React from 'react';
 import PropTypes from 'prop-types';
-import { BaseUIComponentProps } from '../../utils/types';
-import { useComponentRenderer } from '../../utils/useComponentRenderer';
-import { useCollapsibleRootContext } from '../../Collapsible/Root/CollapsibleRootContext';
-import { useCollapsiblePanel } from '../../Collapsible/Panel/useCollapsiblePanel';
-import { useAccordionRootContext } from '../Root/AccordionRootContext';
-import type { AccordionItem } from '../Item/AccordionItem';
-import { useAccordionItemContext } from '../Item/AccordionItemContext';
-import { accordionStyleHookMapping } from '../Item/styleHooks';
+import { BaseUIComponentProps } from '../../utils/types.js';
+import { useComponentRenderer } from '../../utils/useComponentRenderer.js';
+import { useCollapsibleRootContext } from '../../Collapsible/Root/CollapsibleRootContext.js';
+import { useCollapsiblePanel } from '../../Collapsible/Panel/useCollapsiblePanel.js';
+import { useAccordionRootContext } from '../Root/AccordionRootContext.js';
+import type { AccordionItem } from '../Item/AccordionItem.js';
+import { useAccordionItemContext } from '../Item/AccordionItemContext.js';
+import { accordionStyleHookMapping } from '../Item/styleHooks.js';
 
 /**
  *

packages/mui-base/src/Accordion/Root/AccordionRoot.tsx

@@ -1,11 +1,11 @@
 'use client';
 import * as React from 'react';
 import PropTypes from 'prop-types';
-import { BaseUIComponentProps } from '../../utils/types';
-import { useComponentRenderer } from '../../utils/useComponentRenderer';
-import { CompositeList } from '../../Composite/List/CompositeList';
-import { useAccordionRoot } from './useAccordionRoot';
-import { AccordionRootContext } from './AccordionRootContext';
+import { BaseUIComponentProps } from '../../utils/types.js';
+import { useComponentRenderer } from '../../utils/useComponentRenderer.js';
+import { CompositeList } from '../../Composite/List/CompositeList.js';
+import { useAccordionRoot } from './useAccordionRoot.js';
+import { AccordionRootContext } from './AccordionRootContext.js';
 
 const rootStyleHookMapping = {
   value: () => null,

packages/mui-base/src/Accordion/Root/AccordionRootContext.ts

@@ -1,7 +1,7 @@
 'use client';
 import * as React from 'react';
-import type { AccordionRoot } from './AccordionRoot';
-import type { useAccordionRoot } from './useAccordionRoot';
+import type { AccordionRoot } from './AccordionRoot.js';
+import type { useAccordionRoot } from './useAccordionRoot.js';
 
 export interface AccordionRootContext extends Omit<useAccordionRoot.ReturnValue, 'getRootProps'> {
   ownerState: AccordionRoot.OwnerState;

packages/mui-base/src/Accordion/Root/useAccordionRoot.ts

@@ -1,9 +1,9 @@
 'use client';
 import * as React from 'react';
-import { mergeReactProps } from '../../utils/mergeReactProps';
-import { NOOP } from '../../utils/noop';
-import { useControlled } from '../../utils/useControlled';
-import { ARROW_DOWN, ARROW_UP, ARROW_RIGHT, ARROW_LEFT } from '../../Composite/composite';
+import { mergeReactProps } from '../../utils/mergeReactProps.js';
+import { NOOP } from '../../utils/noop.js';
+import { useControlled } from '../../utils/useControlled.js';
+import { ARROW_DOWN, ARROW_UP, ARROW_RIGHT, ARROW_LEFT } from '../../Composite/composite.js';
 
 const SUPPORTED_KEYS = [ARROW_DOWN, ARROW_UP, ARROW_RIGHT, ARROW_LEFT, 'Home', 'End'];
 

packages/mui-base/src/Accordion/Trigger/AccordionTrigger.test.tsx

@@ -1,10 +1,10 @@
 import * as React from 'react';
 import { Accordion } from '@base_ui/react/Accordion';
 import { describeConformance, createRenderer } from '#test-utils';
-import { NOOP } from '../../utils/noop';
-import { CollapsibleRootContext } from '../../Collapsible/Root/CollapsibleRootContext';
-import { AccordionRootContext } from '../Root/AccordionRootContext';
-import { AccordionItemContext } from '../Item/AccordionItemContext';
+import { NOOP } from '../../utils/noop.js';
+import { CollapsibleRootContext } from '../../Collapsible/Root/CollapsibleRootContext.js';
+import { AccordionRootContext } from '../Root/AccordionRootContext.js';
+import { AccordionItemContext } from '../Item/AccordionItemContext.js';
 
 const accordionRootContextValue: AccordionRootContext = {
   accordionItemRefs: { current: [] },

packages/mui-base/src/Accordion/Trigger/AccordionTrigger.tsx

@@ -1,14 +1,14 @@
 'use client';
 import * as React from 'react';
 import PropTypes from 'prop-types';
-import { triggerOpenStateMapping } from '../../utils/collapsibleOpenStateMapping';
-import { useComponentRenderer } from '../../utils/useComponentRenderer';
-import { useEnhancedEffect } from '../../utils/useEnhancedEffect';
-import { BaseUIComponentProps } from '../../utils/types';
-import { useCollapsibleRootContext } from '../../Collapsible/Root/CollapsibleRootContext';
-import { useCollapsibleTrigger } from '../../Collapsible/Trigger/useCollapsibleTrigger';
-import type { AccordionItem } from '../Item/AccordionItem';
-import { useAccordionItemContext } from '../Item/AccordionItemContext';
+import { triggerOpenStateMapping } from '../../utils/collapsibleOpenStateMapping.js';
+import { useComponentRenderer } from '../../utils/useComponentRenderer.js';
+import { useEnhancedEffect } from '../../utils/useEnhancedEffect.js';
+import { BaseUIComponentProps } from '../../utils/types.js';
+import { useCollapsibleRootContext } from '../../Collapsible/Root/CollapsibleRootContext.js';
+import { useCollapsibleTrigger } from '../../Collapsible/Trigger/useCollapsibleTrigger.js';
+import type { AccordionItem } from '../Item/AccordionItem.js';
+import { useAccordionItemContext } from '../Item/AccordionItemContext.js';
 
 /**
  *

packages/mui-base/src/Accordion/index.parts.ts

@@ -1,5 +1,5 @@
-export { AccordionRoot as Root } from './Root/AccordionRoot';
-export { AccordionItem as Item } from './Item/AccordionItem';
-export { AccordionHeader as Header } from './Header/AccordionHeader';
-export { AccordionTrigger as Trigger } from './Trigger/AccordionTrigger';
-export { AccordionPanel as Panel } from './Panel/AccordionPanel';
+export { AccordionRoot as Root } from './Root/AccordionRoot.js';
+export { AccordionItem as Item } from './Item/AccordionItem.js';
+export { AccordionHeader as Header } from './Header/AccordionHeader.js';
+export { AccordionTrigger as Trigger } from './Trigger/AccordionTrigger.js';
+export { AccordionPanel as Panel } from './Panel/AccordionPanel.js';

packages/mui-base/src/Accordion/index.ts

@@ -1 +1 @@
-export * as Accordion from './index.parts';
+export * as Accordion from './index.parts.js';

packages/mui-base/src/AlertDialog/Backdrop/AlertDialogBackdrop.tsx

@@ -2,13 +2,13 @@
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import { FloatingPortal } from '@floating-ui/react';
-import { useAlertDialogRootContext } from '../Root/AlertDialogRootContext';
-import { useDialogBackdrop } from '../../Dialog/Backdrop/useDialogBackdrop';
-import { useComponentRenderer } from '../../utils/useComponentRenderer';
-import type { TransitionStatus } from '../../utils/useTransitionStatus';
-import type { BaseUIComponentProps } from '../../utils/types';
-import type { CustomStyleHookMapping } from '../../utils/getStyleHookProps';
-import { popupOpenStateMapping as baseMapping } from '../../utils/popupOpenStateMapping';
+import { useAlertDialogRootContext } from '../Root/AlertDialogRootContext.js';
+import { useDialogBackdrop } from '../../Dialog/Backdrop/useDialogBackdrop.js';
+import { useComponentRenderer } from '../../utils/useComponentRenderer.js';
+import type { TransitionStatus } from '../../utils/useTransitionStatus.js';
+import type { BaseUIComponentProps } from '../../utils/types.js';
+import type { CustomStyleHookMapping } from '../../utils/getStyleHookProps.js';
+import { popupOpenStateMapping as baseMapping } from '../../utils/popupOpenStateMapping.js';
 
 const customStyleHookMapping: CustomStyleHookMapping<AlertDialogBackdrop.OwnerState> = {
   ...baseMapping,

packages/mui-base/src/AlertDialog/Close/AlertDialogClose.tsx

@@ -1,10 +1,10 @@
 'use client';
 import * as React from 'react';
 import PropTypes from 'prop-types';
-import { useAlertDialogRootContext } from '../Root/AlertDialogRootContext';
-import { useDialogClose } from '../../Dialog/Close/useDialogClose';
-import { useComponentRenderer } from '../../utils/useComponentRenderer';
-import type { BaseUIComponentProps } from '../../utils/types';
+import { useAlertDialogRootContext } from '../Root/AlertDialogRootContext.js';
+import { useDialogClose } from '../../Dialog/Close/useDialogClose.js';
+import { useComponentRenderer } from '../../utils/useComponentRenderer.js';
+import type { BaseUIComponentProps } from '../../utils/types.js';
 
 const ownerState = {};
 

packages/mui-base/src/AlertDialog/Description/AlertDialogDescription.tsx

@@ -1,11 +1,11 @@
 'use client';
 import * as React from 'react';
 import PropTypes from 'prop-types';
-import { useAlertDialogRootContext } from '../Root/AlertDialogRootContext';
-import { useComponentRenderer } from '../../utils/useComponentRenderer';
-import { useEnhancedEffect } from '../../utils/useEnhancedEffect';
-import { useId } from '../../utils/useId';
-import type { BaseUIComponentProps } from '../../utils/types';
+import { useAlertDialogRootContext } from '../Root/AlertDialogRootContext.js';
+import { useComponentRenderer } from '../../utils/useComponentRenderer.js';
+import { useEnhancedEffect } from '../../utils/useEnhancedEffect.js';
+import { useId } from '../../utils/useId.js';
+import type { BaseUIComponentProps } from '../../utils/types.js';
 
 const ownerState = {};
 

packages/mui-base/src/AlertDialog/Popup/AlertDialogPopup.tsx

@@ -2,16 +2,16 @@
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import { FloatingFocusManager, FloatingPortal } from '@floating-ui/react';
-import { useDialogPopup } from '../../Dialog/Popup/useDialogPopup';
-import { useAlertDialogRootContext } from '../Root/AlertDialogRootContext';
-import { useComponentRenderer } from '../../utils/useComponentRenderer';
-import { refType, HTMLElementType } from '../../utils/proptypes';
-import type { BaseUIComponentProps } from '../../utils/types';
-import type { TransitionStatus } from '../../utils/useTransitionStatus';
-import type { CustomStyleHookMapping } from '../../utils/getStyleHookProps';
-import { popupOpenStateMapping as baseMapping } from '../../utils/popupOpenStateMapping';
-import { useForkRef } from '../../utils/useForkRef';
-import { InteractionType } from '../../utils/useEnhancedClickHandler';
+import { useDialogPopup } from '../../Dialog/Popup/useDialogPopup.js';
+import { useAlertDialogRootContext } from '../Root/AlertDialogRootContext.js';
+import { useComponentRenderer } from '../../utils/useComponentRenderer.js';
+import { refType, HTMLElementType } from '../../utils/proptypes.js';
+import type { BaseUIComponentProps } from '../../utils/types.js';
+import type { TransitionStatus } from '../../utils/useTransitionStatus.js';
+import type { CustomStyleHookMapping } from '../../utils/getStyleHookProps.js';
+import { popupOpenStateMapping as baseMapping } from '../../utils/popupOpenStateMapping.js';
+import { useForkRef } from '../../utils/useForkRef.js';
+import { InteractionType } from '../../utils/useEnhancedClickHandler.js';
 
 const customStyleHookMapping: CustomStyleHookMapping<AlertDialogPopup.OwnerState> = {
   ...baseMapping,

packages/mui-base/src/AlertDialog/Root/AlertDialogRoot.tsx

@@ -1,9 +1,9 @@
 'use client';
 import * as React from 'react';
 import PropTypes from 'prop-types';
-import type { DialogRoot } from '../../Dialog/Root/DialogRoot';
-import { AlertDialogRootContext } from './AlertDialogRootContext';
-import { useDialogRoot } from '../../Dialog/Root/useDialogRoot';
+import type { DialogRoot } from '../../Dialog/Root/DialogRoot.js';
+import { AlertDialogRootContext } from './AlertDialogRootContext.js';
+import { useDialogRoot } from '../../Dialog/Root/useDialogRoot.js';
 
 /**
  *

packages/mui-base/src/AlertDialog/Root/AlertDialogRootContext.ts

@@ -1,6 +1,6 @@
 'use client';
 import * as React from 'react';
-import { type useDialogRoot } from '../../Dialog/Root/useDialogRoot';
+import { type useDialogRoot } from '../../Dialog/Root/useDialogRoot.js';
 
 export interface AlertDialogRootContext extends useDialogRoot.ReturnValue {
   /**

packages/mui-base/src/AlertDialog/Title/AlertDialogTitle.tsx

@@ -1,11 +1,11 @@
 'use client';
 import * as React from 'react';
 import PropTypes from 'prop-types';
-import { useAlertDialogRootContext } from '../Root/AlertDialogRootContext';
-import { useComponentRenderer } from '../../utils/useComponentRenderer';
-import { useEnhancedEffect } from '../../utils/useEnhancedEffect';
-import { useId } from '../../utils/useId';
-import type { BaseUIComponentProps } from '../../utils/types';
+import { useAlertDialogRootContext } from '../Root/AlertDialogRootContext.js';
+import { useComponentRenderer } from '../../utils/useComponentRenderer.js';
+import { useEnhancedEffect } from '../../utils/useEnhancedEffect.js';
+import { useId } from '../../utils/useId.js';
+import type { BaseUIComponentProps } from '../../utils/types.js';
 
 const ownerState = {};
 

packages/mui-base/src/AlertDialog/Trigger/AlertDialogTrigger.tsx

@@ -1,11 +1,11 @@
 'use client';
 import * as React from 'react';
 import PropTypes from 'prop-types';
-import { useAlertDialogRootContext } from '../Root/AlertDialogRootContext';
-import { useComponentRenderer } from '../../utils/useComponentRenderer';
-import { useForkRef } from '../../utils/useForkRef';
-import type { BaseUIComponentProps } from '../../utils/types';
-import { triggerOpenStateMapping } from '../../utils/popupOpenStateMapping';
+import { useAlertDialogRootContext } from '../Root/AlertDialogRootContext.js';
+import { useComponentRenderer } from '../../utils/useComponentRenderer.js';
+import { useForkRef } from '../../utils/useForkRef.js';
+import type { BaseUIComponentProps } from '../../utils/types.js';
+import { triggerOpenStateMapping } from '../../utils/popupOpenStateMapping.js';
 
 /**
  *