Update dir structure

docs/data/api/toggle-button-root.json

@@ -0,0 +1,31 @@
+{
+  "props": {
+    "aria-label": { "type": { "name": "string" } },
+    "aria-labelledby": { "type": { "name": "string" } },
+    "className": { "type": { "name": "union", "description": "func<br>&#124;&nbsp;string" } },
+    "defaultPressed": { "type": { "name": "bool" }, "default": "false" },
+    "disabled": { "type": { "name": "bool" }, "default": "false" },
+    "onPressedChange": {
+      "type": { "name": "func" },
+      "signature": {
+        "type": "function(pressed: boolean, event: Event) => void",
+        "describedArgs": ["pressed", "event"]
+      }
+    },
+    "pressed": { "type": { "name": "bool" }, "default": "undefined" },
+    "render": { "type": { "name": "union", "description": "element<br>&#124;&nbsp;func" } }
+  },
+  "name": "ToggleButtonRoot",
+  "imports": [
+    "import { ToggleButton } from '@base_ui/react/ToggleButton';\nconst ToggleButtonRoot = ToggleButton.Root;"
+  ],
+  "classes": [],
+  "spread": true,
+  "themeDefaultProps": true,
+  "muiName": "ToggleButtonRoot",
+  "forwardsRefTo": "HTMLButtonElement",
+  "filename": "/packages/mui-base/src/ToggleButton/Root/ToggleButtonRoot.tsx",
+  "inheritance": null,
+  "demos": "<ul><li><a href=\"/components/react-toggle-button/\">ToggleButton</a></li></ul>",
+  "cssComponent": false
+}

docs/data/components/toggle-button/toggle-button.mdx

@@ -2,8 +2,7 @@
 productId: base-ui
 title: React ToggleButton component
 description: Toggle Buttons are a two-state button that can either be off (not pressed) or on (pressed).
-components: ToggleButton
-hooks: useToggleButton
+components: ToggleButtonRoot
 githubLabel: 'component: toggle button'
 waiAria: https://www.w3.org/WAI/ARIA/apg/patterns/button/
 packageName: '@base_ui/react'

packages/mui-base/src/ToggleButton/ToggleButton.tsx → packages/mui-base/src/ToggleButton/Root/ToggleButtonRoot.tsx

@@ -1,9 +1,9 @@
 'use client';
 import * as React from 'react';
 import PropTypes from 'prop-types';
-import { useComponentRenderer } from '../utils/useComponentRenderer';
-import type { BaseUIComponentProps } from '../utils/types';
-import { useToggleButton } from './useToggleButton';
+import { useComponentRenderer } from '../../utils/useComponentRenderer';
+import type { BaseUIComponentProps } from '../../utils/types';
+import { useToggleButtonRoot } from './useToggleButtonRoot';
 
 const customStyleHookMapping = {
   disabled: () => null,
@@ -17,10 +17,10 @@ const customStyleHookMapping = {
  *
  * API:
  *
- * - [ToggleButton API](https://base-ui.netlify.app/components/react-toggle-button/#api-reference-ToggleButton)
+ * - [ToggleButtonRoot API](https://base-ui.netlify.app/components/react-toggle-button/#api-reference-ToggleButtonRoot)
  */
-const ToggleButton = React.forwardRef(function ToggleButton(
-  props: ToggleButton.Props,
+const ToggleButtonRoot = React.forwardRef(function ToggleButtonRoot(
+  props: ToggleButtonRoot.Props,
   forwardedRef: React.ForwardedRef<HTMLButtonElement>,
 ) {
   const {
@@ -33,15 +33,15 @@ const ToggleButton = React.forwardRef(function ToggleButton(
     ...otherProps
   } = props;
 
-  const { disabled, pressed, getRootProps } = useToggleButton({
+  const { disabled, pressed, getRootProps } = useToggleButtonRoot({
     pressed: pressedProp,
     defaultPressed: defaultPressedProp,
     disabled: disabledProp,
     onPressedChange,
     buttonRef: forwardedRef,
   });
 
-  const ownerState: ToggleButton.OwnerState = React.useMemo(
+  const ownerState: ToggleButtonRoot.OwnerState = React.useMemo(
     () => ({
       disabled,
       pressed,
@@ -56,15 +56,38 @@ const ToggleButton = React.forwardRef(function ToggleButton(
     ownerState,
     className,
     customStyleHookMapping,
-    extraProps: {
-      ...otherProps,
-    },
+    extraProps: otherProps,
   });
 
   return renderElement();
 });
 
-ToggleButton.propTypes /* remove-proptypes */ = {
+export { ToggleButtonRoot };
+
+export namespace ToggleButtonRoot {
+  export interface OwnerState {
+    pressed: boolean;
+    disabled: boolean;
+  }
+
+  export interface Props
+    extends Pick<
+        useToggleButtonRoot.Parameters,
+        'pressed' | 'defaultPressed' | 'disabled' | 'onPressedChange'
+      >,
+      BaseUIComponentProps<'button', OwnerState> {
+    /**
+     * The label for the ToggleButton.
+     */
+    'aria-label'?: React.AriaAttributes['aria-label'];
+    /**
+     * An id or space-separated list of ids of elements that label the ToggleButton.
+     */
+    'aria-labelledby'?: React.AriaAttributes['aria-labelledby'];
+  }
+}
+
+ToggleButtonRoot.propTypes /* remove-proptypes */ = {
   // ┌────────────────────────────── Warning ──────────────────────────────┐
   // │ These PropTypes are generated from the TypeScript type definitions. │
   // │ To update them, edit the TypeScript types and run `pnpm proptypes`. │
@@ -115,28 +138,3 @@ ToggleButton.propTypes /* remove-proptypes */ = {
    */
   render: PropTypes.oneOfType([PropTypes.element, PropTypes.func]),
 } as any;
-
-export { ToggleButton };
-
-export namespace ToggleButton {
-  export interface OwnerState {
-    pressed: boolean;
-    disabled: boolean;
-  }
-
-  export interface Props
-    extends Pick<
-        useToggleButton.Parameters,
-        'pressed' | 'defaultPressed' | 'disabled' | 'onPressedChange'
-      >,
-      BaseUIComponentProps<'button', OwnerState> {
-    /**
-     * The label for the ToggleButton.
-     */
-    'aria-label'?: React.AriaAttributes['aria-label'];
-    /**
-     * An id or space-separated list of ids of elements that label the ToggleButton.
-     */
-    'aria-labelledby'?: React.AriaAttributes['aria-labelledby'];
-  }
-}

packages/mui-base/src/ToggleButton/useToggleButton.ts → packages/mui-base/src/ToggleButton/Root/useToggleButtonRoot.ts

@@ -1,15 +1,15 @@
 'use client';
 import * as React from 'react';
-import { mergeReactProps } from '../utils/mergeReactProps';
-import { NOOP } from '../utils/noop';
-import { GenericHTMLProps } from '../utils/types';
-import { useControlled } from '../utils/useControlled';
-import { useEventCallback } from '../utils/useEventCallback';
-import { useButton } from '../useButton/useButton';
+import { mergeReactProps } from '../../utils/mergeReactProps';
+import { NOOP } from '../../utils/noop';
+import { GenericHTMLProps } from '../../utils/types';
+import { useControlled } from '../../utils/useControlled';
+import { useEventCallback } from '../../utils/useEventCallback';
+import { useButton } from '../../useButton/useButton';
 
-export function useToggleButton(
-  parameters: useToggleButton.Parameters,
-): useToggleButton.ReturnValue {
+export function useToggleButtonRoot(
+  parameters: useToggleButtonRoot.Parameters,
+): useToggleButtonRoot.ReturnValue {
   const {
     pressed: pressedProp,
     onPressedChange: onPressedChangeProp = NOOP,
@@ -62,7 +62,7 @@ export function useToggleButton(
   );
 }
 
-export namespace useToggleButton {
+export namespace useToggleButtonRoot {
   export interface Parameters {
     buttonRef?: React.Ref<HTMLElement>;
     /**

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

@@ -0,0 +1 @@
+export { ToggleButtonRoot as Root } from './Root/ToggleButtonRoot';

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

@@ -1 +1 @@
-export { ToggleButton } from './ToggleButton';
+export { Root as ToggleButton } from './index.parts';