[core] Move hooks under component directories (mui#405)

docs/data/base/components/checkbox/checkbox.md

@@ -2,7 +2,7 @@
 productId: base-ui
 title: React Checkbox component and hook
 components: CheckboxRoot, CheckboxIndicator
-hooks: useCheckbox
+hooks: useCheckboxRoot
 githubLabel: 'component: checkbox'
 waiAria: https://www.w3.org/WAI/ARIA/apg/patterns/checkbox/
 ---

docs/data/base/components/number-field/number-field.md

@@ -3,7 +3,7 @@ productId: base-ui
 title: React NumberField component and hook
 githubLabel: 'component: number-field'
 components: NumberFieldRoot, NumberFieldGroup, NumberFieldInput, NumberFieldIncrement, NumberFieldDecrement, NumberFieldScrubArea, NumberFieldScrubAreaCursor
-hooks: useNumberField
+hooks: useNumberFieldRoot
 waiAria: https://www.w3.org/WAI/ARIA/apg/patterns/spinbutton/
 ---
 

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

@@ -2,7 +2,7 @@
 productId: base-ui
 title: React Switch component and hook
 components: SwitchRoot, SwitchThumb
-hooks: useSwitch
+hooks: useSwitchRoot
 githubLabel: 'component: switch'
 waiAria: https://www.w3.org/WAI/ARIA/apg/patterns/switch/
 ---

docs/data/base/pagesApi.js

@@ -114,8 +114,8 @@ module.exports = [
   { pathname: '/base-ui/react-badge/hooks-api/#use-badge', title: 'useBadge' },
   { pathname: '/base-ui/react-button/hooks-api/#use-button', title: 'useButton' },
   {
-    pathname: '/base-ui/react-checkbox/hooks-api/#use-checkbox',
-    title: 'useCheckbox',
+    pathname: '/base-ui/react-checkbox/hooks-api/#use-checkbox-root',
+    title: 'useCheckboxRoot',
   },
   { pathname: '/base-ui/react-menu/hooks-api/#use-dropdown', title: 'useDropdown' },
   {
@@ -135,8 +135,8 @@ module.exports = [
   },
   { pathname: '/base-ui/react-modal/hooks-api/#use-modal', title: 'useModal' },
   {
-    pathname: '/base-ui/react-number-field/hooks-api/#use-number-field',
-    title: 'useNumberField',
+    pathname: '/base-ui/react-number-field/hooks-api/#use-number-field-root',
+    title: 'useNumberFieldRoot',
   },
   { pathname: '/base-ui/react-select/hooks-api/#use-option', title: 'useOption' },
   {
@@ -149,7 +149,10 @@ module.exports = [
     pathname: '/base-ui/react-snackbar/hooks-api/#use-snackbar',
     title: 'useSnackbar',
   },
-  { pathname: '/base-ui/react-switch/hooks-api/#use-switch', title: 'useSwitch' },
+  {
+    pathname: '/base-ui/react-switch/hooks-api/#use-switch-root',
+    title: 'useSwitchRoot',
+  },
   { pathname: '/base-ui/react-tabs/hooks-api/#use-tab', title: 'useTab' },
   {
     pathname: '/base-ui/react-tabs/hooks-api/#use-tab-indicator',

docs/pages/base-ui/api/checkbox-indicator.json

@@ -13,7 +13,7 @@
   "themeDefaultProps": true,
   "muiName": "CheckboxIndicator",
   "forwardsRefTo": "HTMLSpanElement",
-  "filename": "/packages/mui-base/src/Checkbox/CheckboxIndicator.tsx",
+  "filename": "/packages/mui-base/src/Checkbox/Indicator/CheckboxIndicator.tsx",
   "inheritance": null,
   "demos": "<ul><li><a href=\"/base-ui/react-checkbox/\">Checkbox</a></li></ul>",
   "cssComponent": false

docs/pages/base-ui/api/checkbox-root.json

@@ -1,10 +1,14 @@
 {
   "props": {
+    "autoFocus": { "type": { "name": "bool" }, "default": "false" },
     "checked": { "type": { "name": "bool" }, "default": "undefined" },
     "className": { "type": { "name": "union", "description": "func<br>&#124;&nbsp;string" } },
     "defaultChecked": { "type": { "name": "bool" }, "default": "false" },
     "disabled": { "type": { "name": "bool" }, "default": "false" },
     "indeterminate": { "type": { "name": "bool" }, "default": "false" },
+    "inputRef": {
+      "type": { "name": "union", "description": "func<br>&#124;&nbsp;{ current?: object }" }
+    },
     "name": { "type": { "name": "string" }, "default": "undefined" },
     "onChange": {
       "type": { "name": "func" },
@@ -26,7 +30,7 @@
   "themeDefaultProps": true,
   "muiName": "CheckboxRoot",
   "forwardsRefTo": "HTMLButtonElement",
-  "filename": "/packages/mui-base/src/Checkbox/CheckboxRoot.tsx",
+  "filename": "/packages/mui-base/src/Checkbox/Root/CheckboxRoot.tsx",
   "inheritance": null,
   "demos": "<ul><li><a href=\"/base-ui/react-checkbox/\">Checkbox</a></li></ul>",
   "cssComponent": false

docs/pages/base-ui/api/number-field-decrement.json

@@ -12,7 +12,7 @@
   "themeDefaultProps": true,
   "muiName": "NumberFieldDecrement",
   "forwardsRefTo": "HTMLButtonElement",
-  "filename": "/packages/mui-base/src/NumberField/NumberFieldDecrement.tsx",
+  "filename": "/packages/mui-base/src/NumberField/Decrement/NumberFieldDecrement.tsx",
   "inheritance": null,
   "demos": "<ul><li><a href=\"/base-ui/react-number-field/\">Number Field</a></li></ul>",
   "cssComponent": false

docs/pages/base-ui/api/number-field-group.json

@@ -12,7 +12,7 @@
   "themeDefaultProps": true,
   "muiName": "NumberFieldGroup",
   "forwardsRefTo": "HTMLDivElement",
-  "filename": "/packages/mui-base/src/NumberField/NumberFieldGroup.tsx",
+  "filename": "/packages/mui-base/src/NumberField/Group/NumberFieldGroup.tsx",
   "inheritance": null,
   "demos": "<ul><li><a href=\"/base-ui/react-number-field/\">Number Field</a></li></ul>",
   "cssComponent": false

docs/pages/base-ui/api/number-field-increment.json

@@ -12,7 +12,7 @@
   "themeDefaultProps": true,
   "muiName": "NumberFieldIncrement",
   "forwardsRefTo": "HTMLButtonElement",
-  "filename": "/packages/mui-base/src/NumberField/NumberFieldIncrement.tsx",
+  "filename": "/packages/mui-base/src/NumberField/Increment/NumberFieldIncrement.tsx",
   "inheritance": null,
   "demos": "<ul><li><a href=\"/base-ui/react-number-field/\">Number Field</a></li></ul>",
   "cssComponent": false

docs/pages/base-ui/api/number-field-input.json

@@ -12,7 +12,7 @@
   "themeDefaultProps": true,
   "muiName": "NumberFieldInput",
   "forwardsRefTo": "HTMLInputElement",
-  "filename": "/packages/mui-base/src/NumberField/NumberFieldInput.tsx",
+  "filename": "/packages/mui-base/src/NumberField/Input/NumberFieldInput.tsx",
   "inheritance": null,
   "demos": "<ul><li><a href=\"/base-ui/react-number-field/\">Number Field</a></li></ul>",
   "cssComponent": false

docs/pages/base-ui/api/number-field-root.json

@@ -37,7 +37,7 @@
   "themeDefaultProps": true,
   "muiName": "NumberFieldRoot",
   "forwardsRefTo": "HTMLDivElement",
-  "filename": "/packages/mui-base/src/NumberField/NumberFieldRoot.tsx",
+  "filename": "/packages/mui-base/src/NumberField/Root/NumberFieldRoot.tsx",
   "inheritance": null,
   "demos": "<ul><li><a href=\"/base-ui/react-number-field/\">Number Field</a></li></ul>",
   "cssComponent": false

docs/pages/base-ui/api/number-field-scrub-area-cursor.json

@@ -12,7 +12,7 @@
   "themeDefaultProps": true,
   "muiName": "NumberFieldScrubAreaCursor",
   "forwardsRefTo": "HTMLSpanElement",
-  "filename": "/packages/mui-base/src/NumberField/NumberFieldScrubAreaCursor.tsx",
+  "filename": "/packages/mui-base/src/NumberField/ScrubAreaCursor/NumberFieldScrubAreaCursor.tsx",
   "inheritance": null,
   "demos": "<ul><li><a href=\"/base-ui/react-number-field/\">Number Field</a></li></ul>",
   "cssComponent": false

docs/pages/base-ui/api/number-field-scrub-area.json

@@ -18,7 +18,7 @@
   "themeDefaultProps": true,
   "muiName": "NumberFieldScrubArea",
   "forwardsRefTo": "HTMLSpanElement",
-  "filename": "/packages/mui-base/src/NumberField/NumberFieldScrubArea.tsx",
+  "filename": "/packages/mui-base/src/NumberField/ScrubArea/NumberFieldScrubArea.tsx",
   "inheritance": null,
   "demos": "<ul><li><a href=\"/base-ui/react-number-field/\">Number Field</a></li></ul>",
   "cssComponent": false

docs/pages/base-ui/api/switch-root.json

@@ -24,7 +24,7 @@
   "themeDefaultProps": true,
   "muiName": "SwitchRoot",
   "forwardsRefTo": "HTMLButtonElement",
-  "filename": "/packages/mui-base/src/Switch/SwitchRoot.tsx",
+  "filename": "/packages/mui-base/src/Switch/Root/SwitchRoot.tsx",
   "inheritance": null,
   "demos": "<ul><li><a href=\"/base-ui/react-switch/\">Switch</a></li></ul>",
   "cssComponent": false

docs/pages/base-ui/api/switch-thumb.json

@@ -12,7 +12,7 @@
   "themeDefaultProps": true,
   "muiName": "SwitchThumb",
   "forwardsRefTo": "HTMLSpanElement",
-  "filename": "/packages/mui-base/src/Switch/SwitchThumb.tsx",
+  "filename": "/packages/mui-base/src/Switch/Thumb/SwitchThumb.tsx",
   "inheritance": null,
   "demos": "<ul><li><a href=\"/base-ui/react-switch/\">Switch</a></li></ul>",
   "cssComponent": false

docs/pages/base-ui/api/use-checkbox.json → docs/pages/base-ui/api/use-checkbox-root.json

@@ -44,8 +44,8 @@
       "required": true
     }
   },
-  "name": "useCheckbox",
-  "filename": "/packages/mui-base/src/useCheckbox/useCheckbox.ts",
-  "imports": ["import { useCheckbox } from '@base_ui/react/useCheckbox';"],
+  "name": "useCheckboxRoot",
+  "filename": "/packages/mui-base/src/Checkbox/Root/useCheckboxRoot.ts",
+  "imports": ["import { useCheckboxRoot } from '@base_ui/react/Checkbox';"],
   "demos": "<ul><li><a href=\"/base-ui/react-checkbox/#hook\">Checkbox</a></li></ul>"
 }

docs/pages/base-ui/api/use-number-field.json → docs/pages/base-ui/api/use-number-field-root.json

@@ -106,8 +106,8 @@
       "required": true
     }
   },
-  "name": "useNumberField",
-  "filename": "/packages/mui-base/src/useNumberField/useNumberField.ts",
-  "imports": ["import { useNumberField } from '@base_ui/react/useNumberField';"],
+  "name": "useNumberFieldRoot",
+  "filename": "/packages/mui-base/src/NumberField/Root/useNumberFieldRoot.ts",
+  "imports": ["import { useNumberFieldRoot } from '@base_ui/react/NumberField';"],
   "demos": "<ul><li><a href=\"/base-ui/react-number-field/#hook\">Number Field</a></li></ul>"
 }

docs/pages/base-ui/api/use-switch.json → docs/pages/base-ui/api/use-switch-root.json

@@ -36,8 +36,8 @@
       "required": true
     }
   },
-  "name": "useSwitch",
-  "filename": "/packages/mui-base/src/useSwitch/useSwitch.ts",
-  "imports": ["import { useSwitch } from '@base_ui/react/useSwitch';"],
+  "name": "useSwitchRoot",
+  "filename": "/packages/mui-base/src/Switch/Root/useSwitchRoot.ts",
+  "imports": ["import { useSwitchRoot } from '@base_ui/react/Switch';"],
   "demos": "<ul><li><a href=\"/base-ui/react-switch/#hook\">Switch</a></li></ul>"
 }

docs/pages/base-ui/react-checkbox/[docsTab]/index.js

@@ -5,7 +5,7 @@ import * as pageProps from 'docs-base/data/base/components/checkbox/checkbox.md?
 import mapApiPageTranslations from 'docs/src/modules/utils/mapApiPageTranslations';
 import CheckboxIndicatorApiJsonPageContent from '../../api/checkbox-indicator.json';
 import CheckboxRootApiJsonPageContent from '../../api/checkbox-root.json';
-import useCheckboxApiJsonPageContent from '../../api/use-checkbox.json';
+import useCheckboxRootApiJsonPageContent from '../../api/use-checkbox-root.json';
 
 export default function Page(props) {
   const { userLanguage, ...other } = props;
@@ -38,12 +38,12 @@ export const getStaticProps = () => {
   );
   const CheckboxRootApiDescriptions = mapApiPageTranslations(CheckboxRootApiReq);
 
-  const useCheckboxApiReq = require.context(
-    'docs-base/translations/api-docs/use-checkbox',
+  const useCheckboxRootApiReq = require.context(
+    'docs-base/translations/api-docs/use-checkbox-root',
     false,
-    /\.\/use-checkbox.*.json$/,
+    /\.\/use-checkbox-root.*.json$/,
   );
-  const useCheckboxApiDescriptions = mapApiPageTranslations(useCheckboxApiReq);
+  const useCheckboxRootApiDescriptions = mapApiPageTranslations(useCheckboxRootApiReq);
 
   return {
     props: {
@@ -55,8 +55,8 @@ export const getStaticProps = () => {
         CheckboxIndicator: CheckboxIndicatorApiJsonPageContent,
         CheckboxRoot: CheckboxRootApiJsonPageContent,
       },
-      hooksApiDescriptions: { useCheckbox: useCheckboxApiDescriptions },
-      hooksApiPageContents: { useCheckbox: useCheckboxApiJsonPageContent },
+      hooksApiDescriptions: { useCheckboxRoot: useCheckboxRootApiDescriptions },
+      hooksApiPageContents: { useCheckboxRoot: useCheckboxRootApiJsonPageContent },
     },
   };
 };

docs/pages/base-ui/react-number-field/[docsTab]/index.js

@@ -10,7 +10,7 @@ import NumberFieldInputApiJsonPageContent from '../../api/number-field-input.jso
 import NumberFieldRootApiJsonPageContent from '../../api/number-field-root.json';
 import NumberFieldScrubAreaApiJsonPageContent from '../../api/number-field-scrub-area.json';
 import NumberFieldScrubAreaCursorApiJsonPageContent from '../../api/number-field-scrub-area-cursor.json';
-import useNumberFieldApiJsonPageContent from '../../api/use-number-field.json';
+import useNumberFieldRootApiJsonPageContent from '../../api/use-number-field-root.json';
 
 export default function Page(props) {
   const { userLanguage, ...other } = props;
@@ -80,12 +80,12 @@ export const getStaticProps = () => {
     NumberFieldScrubAreaCursorApiReq,
   );
 
-  const useNumberFieldApiReq = require.context(
-    'docs-base/translations/api-docs/use-number-field',
+  const useNumberFieldRootApiReq = require.context(
+    'docs-base/translations/api-docs/use-number-field-root',
     false,
-    /\.\/use-number-field.*.json$/,
+    /\.\/use-number-field-root.*.json$/,
   );
-  const useNumberFieldApiDescriptions = mapApiPageTranslations(useNumberFieldApiReq);
+  const useNumberFieldRootApiDescriptions = mapApiPageTranslations(useNumberFieldRootApiReq);
 
   return {
     props: {
@@ -107,8 +107,8 @@ export const getStaticProps = () => {
         NumberFieldScrubArea: NumberFieldScrubAreaApiJsonPageContent,
         NumberFieldScrubAreaCursor: NumberFieldScrubAreaCursorApiJsonPageContent,
       },
-      hooksApiDescriptions: { useNumberField: useNumberFieldApiDescriptions },
-      hooksApiPageContents: { useNumberField: useNumberFieldApiJsonPageContent },
+      hooksApiDescriptions: { useNumberFieldRoot: useNumberFieldRootApiDescriptions },
+      hooksApiPageContents: { useNumberFieldRoot: useNumberFieldRootApiJsonPageContent },
     },
   };
 };

docs/pages/base-ui/react-switch/[docsTab]/index.js

@@ -5,7 +5,7 @@ import * as pageProps from 'docs-base/data/base/components/switch/switch.md?@mui
 import mapApiPageTranslations from 'docs/src/modules/utils/mapApiPageTranslations';
 import SwitchRootApiJsonPageContent from '../../api/switch-root.json';
 import SwitchThumbApiJsonPageContent from '../../api/switch-thumb.json';
-import useSwitchApiJsonPageContent from '../../api/use-switch.json';
+import useSwitchRootApiJsonPageContent from '../../api/use-switch-root.json';
 
 export default function Page(props) {
   const { userLanguage, ...other } = props;
@@ -38,12 +38,12 @@ export const getStaticProps = () => {
   );
   const SwitchThumbApiDescriptions = mapApiPageTranslations(SwitchThumbApiReq);
 
-  const useSwitchApiReq = require.context(
-    'docs-base/translations/api-docs/use-switch',
+  const useSwitchRootApiReq = require.context(
+    'docs-base/translations/api-docs/use-switch-root',
     false,
-    /\.\/use-switch.*.json$/,
+    /\.\/use-switch-root.*.json$/,
   );
-  const useSwitchApiDescriptions = mapApiPageTranslations(useSwitchApiReq);
+  const useSwitchRootApiDescriptions = mapApiPageTranslations(useSwitchRootApiReq);
 
   return {
     props: {
@@ -55,8 +55,8 @@ export const getStaticProps = () => {
         SwitchRoot: SwitchRootApiJsonPageContent,
         SwitchThumb: SwitchThumbApiJsonPageContent,
       },
-      hooksApiDescriptions: { useSwitch: useSwitchApiDescriptions },
-      hooksApiPageContents: { useSwitch: useSwitchApiJsonPageContent },
+      hooksApiDescriptions: { useSwitchRoot: useSwitchRootApiDescriptions },
+      hooksApiPageContents: { useSwitchRoot: useSwitchRootApiJsonPageContent },
     },
   };
 };

docs/src/modules/home/BaseUICustomization.tsx

@@ -1,7 +1,7 @@
 import * as React from 'react';
 import { styled } from '@mui/system';
 import * as BaseSwitch from '@base_ui/react/Switch';
-import { useSwitch, UseSwitchParameters } from '@base_ui/react/useSwitch';
+import { useSwitchRoot, UseSwitchRootParameters } from '@base_ui/react/Switch';
 import Box from '@mui/material/Box';
 import Grid from '@mui/material/Grid';
 import Typography from '@mui/material/Typography';
@@ -17,7 +17,7 @@ import Frame from 'docs/src/components/action/Frame';
 
 const code = `
 import * as Switch from '@base_ui/react/Switch';
-import { useSwitch } from '@base_ui/react/useSwitch';
+import { useSwitchRoot } from '@base_ui/react/Switch';
 import { styled } from '@mui/system';
 
 const StyledSwitchRoot = styled('button')(\`
@@ -82,7 +82,7 @@ const StyledSwitchThumb = styled('span')\`
 \`;
 
 function SwitchFromHook(props) {
-  const { getInputProps, getButtonProps, checked, disabled } = useSwitch(props);
+  const { getInputProps, getButtonProps, checked, disabled } = useSwitchRoot(props);
 
   const stateAttributes = {
     'data-state': checked ? 'checked' : 'unchecked',
@@ -175,8 +175,8 @@ const StyledSwitchThumb = styled('span')`
   }
 `;
 
-function SwitchFromHook(props: UseSwitchParameters) {
-  const { getInputProps, getButtonProps, checked } = useSwitch(props);
+function SwitchFromHook(props: UseSwitchRootParameters) {
+  const { getInputProps, getButtonProps, checked } = useSwitchRoot(props);
 
   const stateAttributes = {
     'data-state': checked ? 'checked' : 'unchecked',

docs/translations/api-docs/checkbox-root/checkbox-root.json

@@ -1,6 +1,7 @@
 {
   "componentDescription": "The foundation for building custom-styled checkboxes.",
   "propDescriptions": {
+    "autoFocus": { "description": "If <code>true</code>, the checkbox is focused on mount." },
     "checked": { "description": "If <code>true</code>, the component is checked." },
     "className": {
       "description": "Class names applied to the element or a function that returns them based on the component&#39;s state."
@@ -10,6 +11,7 @@
     },
     "disabled": { "description": "If <code>true</code>, the component is disabled." },
     "indeterminate": { "description": "If <code>true</code>, the checkbox will be indeterminate." },
+    "inputRef": { "description": "The ref to the input element." },
     "name": { "description": "Name of the underlying input element." },
     "onChange": {
       "description": "Callback fired when the state is changed.",