[docs] Move SwitchUnstyled docs to the Base space

docs/data/base/components/switch/switch.md

@@ -0,0 +1,48 @@
+---
+product: base
+title: React Switch component
+components: SwitchUnstyled
+githubLabel: 'component: switch'
+waiAria: https://www.w3.org/TR/wai-aria-practices/#switch
+packageName: '@mui/base'
+---
+
+# Switch
+
+<p class="description">Switches toggle the state of a single setting on or off.</p>
+
+Switches are the preferred way to adjust settings on mobile.
+The option that the switch controls, as well as the state it's in, should be made clear from the corresponding inline label.
+
+{{"component": "modules/components/ComponentLinkHeader.js", "design": false}}
+
+## SwitchUnstyled
+
+```jsx
+import SwitchUnstyled from '@mui/base/SwitchUnstyled';
+```
+
+The `SwitchUnstyled` component provides default components and assigns CSS classes you can style entirely on your own.
+You are free to choose any styling solution - plain CSS classes, a CSS framework, Emotion, etc.
+It is also possible to replace these default components by other HTML elements or custom components.
+
+There are three components you can override by the `components` prop: `Root`, `Thumb` and `Input`. Each one's props can be set using the `componentsProps` object.
+
+{{"demo": "UnstyledSwitches.js"}}
+
+## useSwitch
+
+For the ultimate customizability, a `useSwitch` hook is available.
+It accepts almost the same options as the SwitchUnstyled component minus the `component`, `components`, and `componentsProps` props.
+
+```jsx
+import { useSwitch } from '@mui/base/SwitchUnstyled';
+```
+
+### Basic example
+
+{{"demo": "UseSwitchesBasic.js"}}
+
+### Customized look and feel
+
+{{"demo": "UseSwitchesCustom.js"}}

docs/data/base/pages.ts

@@ -17,6 +17,7 @@ const pages = [
         children: [
           { pathname: '/base/react-button', title: 'Button' },
           { pathname: '/base/react-input', title: 'Input' },
+          { pathname: '/base/react-switch', title: 'Switch' },
         ],
       },
       {

docs/data/material/components/switches/switches.md

@@ -1,9 +1,10 @@
 ---
 product: material-ui
 title: React Switch component
-components: Switch, FormControl, FormGroup, FormLabel, FormControlLabel, SwitchUnstyled
+components: Switch, FormControl, FormGroup, FormLabel, FormControlLabel
 githubLabel: 'component: switch'
 materialDesign: https://material.io/components/selection-controls#switches
+unstyled: /base/react-switch
 ---
 
 # Switch
@@ -58,41 +59,6 @@ You can learn more about this in the [overrides documentation page](/customizati
 
 🎨 If you are looking for inspiration, you can check [MUI Treasury's customization examples](https://mui-treasury.com/styles/switch/).
 
-## Unstyled
-
-The switch also comes with an unstyled version. It's ideal for doing heavy customizations and minimizing bundle size.
-
-### Unstyled component
-
-```jsx
-import SwitchUnstyled from '@mui/base/SwitchUnstyled';
-```
-
-The `SwitchUnstyled` component provides default components and assigns CSS classes you can style entirely on your own.
-You are free to choose any styling solution - plain CSS classes, a CSS framework, Emotion, etc.
-It is also possible to replace these default components by other HTML elements or custom components.
-
-There are three components you can override by the `components` prop: `Root`, `Thumb` and `Input`. Each one's props can be set using the `componentsProps` object.
-
-{{"demo": "UnstyledSwitches.js"}}
-
-### useSwitch hook
-
-For the ultimate customizability, a `useSwitch` hook is available.
-It accepts almost the same options as the SwitchUnstyled component minus the `component`, `components`, and `componentsProps` props.
-
-```jsx
-import { useSwitch } from '@mui/base/SwitchUnstyled';
-```
-
-#### Basic example
-
-{{"demo": "UseSwitchesBasic.js"}}
-
-#### Customized look and feel
-
-{{"demo": "UseSwitchesCustom.js"}}
-
 ## Label placement
 
 You can change the placement of the label:

docs/pages/base/api/switch-unstyled.json

@@ -29,6 +29,6 @@
   "forwardsRefTo": "HTMLSpanElement",
   "filename": "/packages/mui-base/src/SwitchUnstyled/SwitchUnstyled.tsx",
   "inheritance": null,
-  "demos": "<ul><li><a href=\"/material-ui/react-switch/\">Switches</a></li></ul>",
+  "demos": "<ul><li><a href=\"/base/react-switch/\">Switch</a></li></ul>",
   "cssComponent": false
 }

docs/pages/base/react-switch.js

@@ -0,0 +1,11 @@
+import * as React from 'react';
+import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs';
+import {
+  demos,
+  docs,
+  demoComponents,
+} from 'docs/data/base/components/switch/switch.md?@mui/markdown';
+
+export default function Page() {
+  return <MarkdownDocs demos={demos} docs={docs} demoComponents={demoComponents} />;
+}

docs/scripts/buildApiUtils.ts

@@ -107,10 +107,11 @@ const migratedBaseComponents = [
   'ButtonUnstyled',
   'ClickAwayListener',
   'InputUnstyled',
-  'MenuUnstyled',
   'MenuItemUnstyled',
+  'MenuUnstyled',
   'ModalUnstyled',
   'Portal',
+  'SwitchUnstyled',
 ];
 
 export const getGenericComponentInfo = (filename: string): ComponentInfo => {

docs/src/pagesApi.js

@@ -134,7 +134,6 @@ module.exports = [
   { pathname: '/api-docs/svg-icon' },
   { pathname: '/api-docs/swipeable-drawer' },
   { pathname: '/api-docs/switch' },
-  { pathname: '/api-docs/switch-unstyled' },
   { pathname: '/api-docs/tab' },
   { pathname: '/api-docs/tab-context' },
   { pathname: '/api-docs/table' },

packages/mui-base/src/SwitchUnstyled/SwitchUnstyled.tsx

@@ -47,11 +47,11 @@ export interface SwitchUnstyledProps extends UseSwitchProps {
  *
  * Demos:
  *
- * - [Switches](https://mui.com/components/switches/)
+ * - [Switch](https://mui.com/base/react-switch/)
  *
  * API:
  *
- * - [SwitchUnstyled API](https://mui.com/api/switch-unstyled/)
+ * - [SwitchUnstyled API](https://mui.com/base/api/switch-unstyled/)
  */
 const SwitchUnstyled = React.forwardRef(function SwitchUnstyled(
   props: SwitchUnstyledProps,