[joy-ui][Box] Added boxClasses (mui#39895)

docs/pages/joy-ui/api/box.json

@@ -11,7 +11,7 @@
   },
   "name": "Box",
   "imports": ["import Box from '@mui/joy/Box';", "import { Box } from '@mui/joy';"],
-  "styles": { "classes": [], "globalClasses": {}, "name": null },
+  "styles": { "classes": ["root"], "globalClasses": {}, "name": "MuiBox" },
   "spread": true,
   "themeDefaultProps": false,
   "muiName": "JoyBox",

docs/translations/api-docs-joy/box/box.json

@@ -8,5 +8,5 @@
       "description": "The system prop that allows defining system overrides as well as additional CSS styles."
     }
   },
-  "classDescriptions": {}
+  "classDescriptions": { "root": { "description": "Class name applied to the root element." } }
 }

packages/mui-joy/src/Box/Box.tsx

@@ -5,6 +5,7 @@ import { unstable_ClassNameGenerator as ClassNameGenerator } from '../className'
 import { Theme } from '../styles/types';
 import defaultTheme from '../styles/defaultTheme';
 import THEME_ID from '../styles/identifier';
+import boxClasses from './boxClasses';
 /**
  *
  * Demos:
@@ -18,7 +19,7 @@ import THEME_ID from '../styles/identifier';
 const Box = createBox<Theme>({
   themeId: THEME_ID,
   defaultTheme,
-  defaultClassName: 'MuiBox-root',
+  defaultClassName: boxClasses.root,
   generateClassName: ClassNameGenerator.generate,
 });
 

packages/mui-joy/src/Box/boxClasses.ts

@@ -0,0 +1,12 @@
+import { unstable_generateUtilityClasses as generateUtilityClasses } from '@mui/utils';
+
+export interface BoxClasses {
+  /** Class name applied to the root element. */
+  root: string;
+}
+
+export type BoxClassKey = keyof BoxClasses;
+
+const boxClasses: BoxClasses = generateUtilityClasses('MuiBox', ['root']);
+
+export default boxClasses;

packages/mui-joy/src/Box/index.ts

@@ -1,3 +1,6 @@
 'use client';
 export { default } from './Box';
 export * from './BoxProps';
+
+export { default as boxClasses } from './boxClasses';
+export * from './boxClasses';