[base] Ban default exports (#38200)

.eslintrc.js

@@ -460,5 +460,12 @@ module.exports = {
         'import/extensions': ['error', 'ignorePackages'],
       },
     },
+    {
+      files: ['packages/mui-base/src/**/**{.ts,.tsx}'],
+      rules: {
+        'import/no-default-export': 'error',
+        'import/prefer-default-export': 'off',
+      },
+    },
   ],
 };

docs/data/base/components/autocomplete/AutocompleteIntroduction.js

@@ -1,8 +1,8 @@
 import * as React from 'react';
 import PropTypes from 'prop-types';
-import useAutocomplete from '@mui/base/useAutocomplete';
-import Button from '@mui/base/Button';
-import Popper from '@mui/base/Popper';
+import { useAutocomplete } from '@mui/base/useAutocomplete';
+import { Button } from '@mui/base/Button';
+import { Popper } from '@mui/base/Popper';
 import { styled } from '@mui/system';
 import { unstable_useForkRef as useForkRef } from '@mui/utils';
 import ArrowDropDownIcon from '@mui/icons-material/ArrowDropDown';

docs/data/base/components/autocomplete/AutocompleteIntroduction.tsx

@@ -1,7 +1,7 @@
 import * as React from 'react';
-import useAutocomplete, { UseAutocompleteProps } from '@mui/base/useAutocomplete';
-import Button from '@mui/base/Button';
-import Popper from '@mui/base/Popper';
+import { useAutocomplete, UseAutocompleteProps } from '@mui/base/useAutocomplete';
+import { Button } from '@mui/base/Button';
+import { Popper } from '@mui/base/Popper';
 import { styled } from '@mui/system';
 import { unstable_useForkRef as useForkRef } from '@mui/utils';
 import ArrowDropDownIcon from '@mui/icons-material/ArrowDropDown';

docs/data/base/components/autocomplete/ControlledStates.js

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import useAutocomplete from '@mui/base/useAutocomplete';
+import { useAutocomplete } from '@mui/base/useAutocomplete';
 import { styled } from '@mui/system';
 
 const options = ['Firefox', 'Google Chrome', 'Microsoft Edge', 'Safari', 'Opera'];

docs/data/base/components/autocomplete/ControlledStates.tsx

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import useAutocomplete from '@mui/base/useAutocomplete';
+import { useAutocomplete } from '@mui/base/useAutocomplete';
 import { styled } from '@mui/system';
 
 const options = ['Firefox', 'Google Chrome', 'Microsoft Edge', 'Safari', 'Opera'];

docs/data/base/components/autocomplete/UseAutocomplete.js

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import useAutocomplete from '@mui/base/useAutocomplete';
+import { useAutocomplete } from '@mui/base/useAutocomplete';
 import { styled } from '@mui/system';
 
 export default function UseAutocomplete() {

docs/data/base/components/autocomplete/UseAutocomplete.tsx

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import useAutocomplete from '@mui/base/useAutocomplete';
+import { useAutocomplete } from '@mui/base/useAutocomplete';
 import { styled } from '@mui/system';
 
 export default function UseAutocomplete() {

docs/data/base/components/autocomplete/UseAutocompletePopper.js

@@ -1,6 +1,6 @@
 import * as React from 'react';
-import useAutocomplete from '@mui/base/useAutocomplete';
-import Popper from '@mui/base/Popper';
+import { useAutocomplete } from '@mui/base/useAutocomplete';
+import { Popper } from '@mui/base/Popper';
 import { styled } from '@mui/system';
 import { unstable_useForkRef as useForkRef } from '@mui/utils';
 

docs/data/base/components/autocomplete/UseAutocompletePopper.tsx

@@ -1,6 +1,6 @@
 import * as React from 'react';
-import useAutocomplete, { UseAutocompleteProps } from '@mui/base/useAutocomplete';
-import Popper from '@mui/base/Popper';
+import { useAutocomplete, UseAutocompleteProps } from '@mui/base/useAutocomplete';
+import { Popper } from '@mui/base/Popper';
 import { styled } from '@mui/system';
 import { unstable_useForkRef as useForkRef } from '@mui/utils';
 

docs/data/base/components/autocomplete/autocomplete.md

@@ -35,7 +35,7 @@ To learn more about implementing a custom Autocomplete, you can explore the [`us
 After [installation](/base-ui/getting-started/quickstart/#installation), you can start building with this hook as follows:
 
 ```jsx
-import useAutocomplete from '@mui/base/useAutocomplete';
+import { useAutocomplete } from '@mui/base/useAutocomplete';
 
 export default function App() {
   const {
@@ -139,8 +139,8 @@ Base UI provides a [`<Popper />`](/base-ui/react-popper/) component built around
 To render the listbox in Base UI's Popper, the `ref`s must be merged as follows:
 
 ```jsx
-import useAutocomplete from '@mui/base/useAutocomplete';
-import Popper from '@mui/base/Popper';
+import { useAutocomplete } from '@mui/base/useAutocomplete';
+import { Popper } from '@mui/base/Popper';
 import { unstable_useForkRef as useForkRef } from '@mui/utils';
 
 export default function App(props) {

docs/data/base/components/badge/AccessibleBadges.js

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { styled } from '@mui/system';
-import Badge, { badgeClasses } from '@mui/base/Badge';
+import { Badge, badgeClasses } from '@mui/base/Badge';
 import MailIcon from '@mui/icons-material/Mail';
 
 function notificationsLabel(count) {

docs/data/base/components/badge/AccessibleBadges.tsx

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { styled } from '@mui/system';
-import Badge, { badgeClasses } from '@mui/base/Badge';
+import { Badge, badgeClasses } from '@mui/base/Badge';
 import MailIcon from '@mui/icons-material/Mail';
 
 function notificationsLabel(count: number) {

docs/data/base/components/badge/BadgeMax.js

@@ -1,7 +1,7 @@
 import * as React from 'react';
 import Stack from '@mui/material/Stack';
 import { styled } from '@mui/system';
-import Badge, { badgeClasses } from '@mui/base/Badge';
+import { Badge, badgeClasses } from '@mui/base/Badge';
 import MailIcon from '@mui/icons-material/Mail';
 
 export default function BadgeMax() {

docs/data/base/components/badge/BadgeMax.tsx

@@ -1,7 +1,7 @@
 import * as React from 'react';
 import Stack from '@mui/material/Stack';
 import { styled } from '@mui/system';
-import Badge, { badgeClasses } from '@mui/base/Badge';
+import { Badge, badgeClasses } from '@mui/base/Badge';
 import MailIcon from '@mui/icons-material/Mail';
 
 export default function BadgeMax() {

docs/data/base/components/badge/BadgeVisibility.js

@@ -1,7 +1,7 @@
 import * as React from 'react';
 import Box from '@mui/material/Box';
 import { styled } from '@mui/system';
-import Badge, { badgeClasses } from '@mui/base/Badge';
+import { Badge, badgeClasses } from '@mui/base/Badge';
 import ButtonGroup from '@mui/material/ButtonGroup';
 import Button from '@mui/material/Button';
 import AddIcon from '@mui/icons-material/Add';

docs/data/base/components/badge/BadgeVisibility.tsx

@@ -1,7 +1,7 @@
 import * as React from 'react';
 import Box from '@mui/material/Box';
 import { styled } from '@mui/system';
-import Badge, { badgeClasses } from '@mui/base/Badge';
+import { Badge, badgeClasses } from '@mui/base/Badge';
 import ButtonGroup from '@mui/material/ButtonGroup';
 import Button from '@mui/material/Button';
 import AddIcon from '@mui/icons-material/Add';

docs/data/base/components/badge/ShowZeroBadge.js

@@ -1,7 +1,7 @@
 import * as React from 'react';
 import Stack from '@mui/material/Stack';
 import { styled } from '@mui/system';
-import Badge, { badgeClasses } from '@mui/base/Badge';
+import { Badge, badgeClasses } from '@mui/base/Badge';
 import MailIcon from '@mui/icons-material/Mail';
 
 export default function ShowZeroBadge() {

docs/data/base/components/badge/ShowZeroBadge.tsx

@@ -1,7 +1,7 @@
 import * as React from 'react';
 import Stack from '@mui/material/Stack';
 import { styled } from '@mui/system';
-import Badge, { badgeClasses } from '@mui/base/Badge';
+import { Badge, badgeClasses } from '@mui/base/Badge';
 import MailIcon from '@mui/icons-material/Mail';
 
 export default function ShowZeroBadge() {

docs/data/base/components/badge/UnstyledBadge/css/index.js

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import Badge from '@mui/base/Badge';
+import { Badge } from '@mui/base/Badge';
 import { useTheme } from '@mui/system';
 
 export default function UnstyledBadge() {

docs/data/base/components/badge/UnstyledBadge/css/index.tsx

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import Badge from '@mui/base/Badge';
+import { Badge } from '@mui/base/Badge';
 import { useTheme } from '@mui/system';
 
 export default function UnstyledBadge() {

docs/data/base/components/badge/UnstyledBadge/system/index.js

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { styled, Box } from '@mui/system';
-import Badge, { badgeClasses } from '@mui/base/Badge';
+import { Badge, badgeClasses } from '@mui/base/Badge';
 
 function BadgeContent() {
   return (

docs/data/base/components/badge/UnstyledBadge/system/index.tsx

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { styled, Box } from '@mui/system';
-import Badge, { badgeClasses } from '@mui/base/Badge';
+import { Badge, badgeClasses } from '@mui/base/Badge';
 
 function BadgeContent() {
   return (

docs/data/base/components/badge/UnstyledBadge/tailwind/index.js

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import Badge from '@mui/base/Badge';
+import { Badge } from '@mui/base/Badge';
 import { useTheme } from '@mui/system';
 
 function useIsDarkMode() {

docs/data/base/components/badge/UnstyledBadge/tailwind/index.tsx

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import Badge from '@mui/base/Badge';
+import { Badge } from '@mui/base/Badge';
 import { useTheme } from '@mui/system';
 
 function useIsDarkMode() {

docs/data/base/components/badge/UnstyledBadgeIntroduction.js

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { styled, Box } from '@mui/system';
-import Badge, { badgeClasses } from '@mui/base/Badge';
+import { Badge, badgeClasses } from '@mui/base/Badge';
 
 const blue = {
   100: '#DAECFF',

docs/data/base/components/badge/UnstyledBadgeIntroduction.tsx

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { styled, Box } from '@mui/system';
-import Badge, { badgeClasses } from '@mui/base/Badge';
+import { Badge, badgeClasses } from '@mui/base/Badge';
 
 const blue = {
   100: '#DAECFF',

docs/data/base/components/badge/badge.md

@@ -30,7 +30,7 @@ The Badge component creates a badge that is applied to its child element.
 After [installation](/base-ui/getting-started/quickstart/#installation), you can start building with this component using the following basic elements:
 
 ```jsx
-import Badge from '@mui/base/Badge';
+import { Badge } from '@mui/base/Badge';
 
 export default function MyApp() {
   return <Badge>{/* the element that the badge is attached to */}</Badge>;
@@ -96,7 +96,7 @@ The same applies for props specific to custom primitive elements:
 ## Hook
 
 ```jsx
-import useBadge from '@mui/base/useBadge';
+import { useBadge } from '@mui/base/useBadge';
 ```
 
 The `useBadge` hook lets you apply the functionality of a badge to a fully custom component.

docs/data/base/components/button/UnstyledButtonCustom.js

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import PropTypes from 'prop-types';
-import Button, { buttonClasses } from '@mui/base/Button';
+import { Button, buttonClasses } from '@mui/base/Button';
 import { styled } from '@mui/system';
 
 const ButtonRoot = React.forwardRef(function ButtonRoot(props, ref) {

docs/data/base/components/button/UnstyledButtonCustom.tsx

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import Button, { ButtonProps, buttonClasses } from '@mui/base/Button';
+import { Button, ButtonProps, buttonClasses } from '@mui/base/Button';
 import { styled, Theme } from '@mui/system';
 
 const ButtonRoot = React.forwardRef(function ButtonRoot(

docs/data/base/components/button/UnstyledButtonIntroduction.js

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import Button, { buttonClasses } from '@mui/base/Button';
+import { Button, buttonClasses } from '@mui/base/Button';
 import { styled } from '@mui/system';
 import Stack from '@mui/material/Stack';
 

docs/data/base/components/button/UnstyledButtonIntroduction.tsx

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import Button, { buttonClasses } from '@mui/base/Button';
+import { Button, buttonClasses } from '@mui/base/Button';
 import { styled } from '@mui/system';
 import Stack from '@mui/material/Stack';
 

docs/data/base/components/button/UnstyledButtonsDisabledFocus.js

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import Button, { buttonClasses } from '@mui/base/Button';
+import { Button, buttonClasses } from '@mui/base/Button';
 import { styled } from '@mui/system';
 import Stack from '@mui/material/Stack';
 

docs/data/base/components/button/UnstyledButtonsDisabledFocus.tsx

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import Button, { buttonClasses } from '@mui/base/Button';
+import { Button, buttonClasses } from '@mui/base/Button';
 import { styled } from '@mui/system';
 import Stack from '@mui/material/Stack';
 

docs/data/base/components/button/UnstyledButtonsDisabledFocusCustom.js

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import Button, { buttonClasses } from '@mui/base/Button';
+import { Button, buttonClasses } from '@mui/base/Button';
 import { styled } from '@mui/system';
 import Stack from '@mui/material/Stack';
 

docs/data/base/components/button/UnstyledButtonsDisabledFocusCustom.tsx

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import Button, { buttonClasses, ButtonTypeMap } from '@mui/base/Button';
+import { Button, buttonClasses, ButtonTypeMap } from '@mui/base/Button';
 import { styled } from '@mui/system';
 import Stack from '@mui/material/Stack';
 import { PolymorphicComponent } from '@mui/base/utils';

docs/data/base/components/button/UnstyledButtonsSimple/css/index.js

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import Button, { buttonClasses } from '@mui/base/Button';
+import { Button, buttonClasses } from '@mui/base/Button';
 import Stack from '@mui/material/Stack';
 
 export default function UnstyledButtonsSimple() {

docs/data/base/components/button/UnstyledButtonsSimple/css/index.tsx

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import Button, { buttonClasses } from '@mui/base/Button';
+import { Button, buttonClasses } from '@mui/base/Button';
 import Stack from '@mui/material/Stack';
 
 export default function UnstyledButtonsSimple() {

docs/data/base/components/button/UnstyledButtonsSimple/system/index.js

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import Button, { buttonClasses } from '@mui/base/Button';
+import { Button, buttonClasses } from '@mui/base/Button';
 import { styled } from '@mui/system';
 import Stack from '@mui/material/Stack';
 

docs/data/base/components/button/UnstyledButtonsSimple/system/index.tsx

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import Button, { buttonClasses } from '@mui/base/Button';
+import { Button, buttonClasses } from '@mui/base/Button';
 import { styled } from '@mui/system';
 import Stack from '@mui/material/Stack';
 

docs/data/base/components/button/UnstyledButtonsSimple/tailwind/index.js

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import Button from '@mui/base/Button';
+import { Button } from '@mui/base/Button';
 import Stack from '@mui/material/Stack';
 
 export default function UnstyledButtonsSimple() {

docs/data/base/components/button/UnstyledButtonsSimple/tailwind/index.tsx

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import Button from '@mui/base/Button';
+import { Button } from '@mui/base/Button';
 import Stack from '@mui/material/Stack';
 
 export default function UnstyledButtonsSimple() {

docs/data/base/components/button/UnstyledButtonsSpan.js

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import Button, { buttonClasses } from '@mui/base/Button';
+import { Button, buttonClasses } from '@mui/base/Button';
 import { styled } from '@mui/system';
 import Stack from '@mui/material/Stack';
 

docs/data/base/components/button/UnstyledButtonsSpan.tsx

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import Button, { buttonClasses, ButtonTypeMap } from '@mui/base/Button';
+import { Button, buttonClasses, ButtonTypeMap } from '@mui/base/Button';
 import { styled } from '@mui/system';
 import Stack from '@mui/material/Stack';
 import { PolymorphicComponent } from '@mui/base/utils';

docs/data/base/components/button/UnstyledLinkButton.js

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import Button, { buttonClasses } from '@mui/base/Button';
+import { Button, buttonClasses } from '@mui/base/Button';
 import { styled } from '@mui/system';
 import Stack from '@mui/material/Stack';
 import Link from 'next/link';

docs/data/base/components/button/UnstyledLinkButton.tsx

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import Button, { buttonClasses } from '@mui/base/Button';
+import { Button, buttonClasses } from '@mui/base/Button';
 import { styled } from '@mui/system';
 import Stack from '@mui/material/Stack';
 import Link from 'next/link';

docs/data/base/components/button/UseButton.js

@@ -2,7 +2,7 @@ import * as React from 'react';
 import PropTypes from 'prop-types';
 import clsx from 'clsx';
 
-import useButton from '@mui/base/useButton';
+import { useButton } from '@mui/base/useButton';
 import { styled } from '@mui/system';
 import Stack from '@mui/material/Stack';
 

docs/data/base/components/button/UseButton.tsx

@@ -1,7 +1,7 @@
 import * as React from 'react';
 import clsx from 'clsx';
 import { ButtonProps } from '@mui/base/Button';
-import useButton from '@mui/base/useButton';
+import { useButton } from '@mui/base/useButton';
 import { styled } from '@mui/system';
 import Stack from '@mui/material/Stack';