@mui/x-charts-pro 9.0.0 → 9.0.2

package/ChartsDataProviderPro/ChartsDataProviderPro.js

@@ -18,8 +18,8 @@ var _useChartsDataProviderProProps = require("./useChartsDataProviderProProps");
 var _ChartsWatermark = require("../internals/ChartsWatermark");
 var _jsxRuntime = require("react/jsx-runtime");
 const packageInfo = {
-  releaseDate: "MTc3NTYwNjQwMDAwMA==",
-  version: "9.0.0",
+  releaseDate: "MTc3NjIxMTIwMDAwMA==",
+  version: "9.0.2",
   name: 'x-charts-pro'
 };
 const defaultSeriesConfigPro = exports.defaultSeriesConfigPro = _internals.defaultSeriesConfig;

package/ChartsDataProviderPro/ChartsDataProviderPro.mjs

@@ -11,8 +11,8 @@ import { useChartsDataProviderProProps } from "./useChartsDataProviderProProps.m
 import { ChartsWatermark } from "../internals/ChartsWatermark.mjs";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const packageInfo = {
-  releaseDate: "MTc3NTYwNjQwMDAwMA==",
-  version: "9.0.0",
+  releaseDate: "MTc3NjIxMTIwMDAwMA==",
+  version: "9.0.2",
   name: 'x-charts-pro'
 };
 export const defaultSeriesConfigPro = defaultSeriesConfig;

package/ChartsRadialDataProvider/index.d.mts

@@ -0,0 +1 @@
+export * from '@mui/x-charts/ChartsRadialDataProvider';

package/ChartsRadialDataProvider/index.d.ts

@@ -0,0 +1 @@
+export * from '@mui/x-charts/ChartsRadialDataProvider';

package/ChartsRadialDataProvider/index.js

@@ -0,0 +1,16 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+var _ChartsRadialDataProvider = require("@mui/x-charts/ChartsRadialDataProvider");
+Object.keys(_ChartsRadialDataProvider).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _ChartsRadialDataProvider[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _ChartsRadialDataProvider[key];
+    }
+  });
+});

package/ChartsRadialDataProvider/index.mjs

@@ -0,0 +1,2 @@
+// Re-export automatically generated, to customize, simply remove this line.
+export * from '@mui/x-charts/ChartsRadialDataProvider';

package/ChartsRadialGrid/index.d.mts

@@ -0,0 +1 @@
+export * from '@mui/x-charts/ChartsRadialGrid';

package/ChartsRadialGrid/index.d.ts

@@ -0,0 +1 @@
+export * from '@mui/x-charts/ChartsRadialGrid';

package/ChartsRadialGrid/index.js

@@ -0,0 +1,16 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+var _ChartsRadialGrid = require("@mui/x-charts/ChartsRadialGrid");
+Object.keys(_ChartsRadialGrid).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _ChartsRadialGrid[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _ChartsRadialGrid[key];
+    }
+  });
+});

package/ChartsRadialGrid/index.mjs

@@ -0,0 +1,2 @@
+// Re-export automatically generated, to customize, simply remove this line.
+export * from '@mui/x-charts/ChartsRadialGrid';

package/ChartsToolbarPro/ChartsToolbarImageExportTrigger.js

@@ -75,6 +75,7 @@ process.env.NODE_ENV !== "production" ? ChartsToolbarImageExportTrigger.propType
    * A function to customize the rendering of the component.
    */
   render: _propTypes.default.oneOfType([_propTypes.default.element, _propTypes.default.func]),
+  size: _propTypes.default.oneOf(['large', 'medium', 'small']),
   style: _propTypes.default.object,
   tabIndex: _propTypes.default.number
 } : void 0;

package/ChartsToolbarPro/ChartsToolbarImageExportTrigger.mjs

@@ -67,6 +67,7 @@ process.env.NODE_ENV !== "production" ? ChartsToolbarImageExportTrigger.propType
    * A function to customize the rendering of the component.
    */
   render: PropTypes.oneOfType([PropTypes.element, PropTypes.func]),
+  size: PropTypes.oneOf(['large', 'medium', 'small']),
   style: PropTypes.object,
   tabIndex: PropTypes.number
 } : void 0;

package/ChartsToolbarPro/ChartsToolbarPrintExportTrigger.js

@@ -73,6 +73,7 @@ process.env.NODE_ENV !== "production" ? ChartsToolbarPrintExportTrigger.propType
    * A function to customize the rendering of the component.
    */
   render: _propTypes.default.oneOfType([_propTypes.default.element, _propTypes.default.func]),
+  size: _propTypes.default.oneOf(['large', 'medium', 'small']),
   style: _propTypes.default.object,
   tabIndex: _propTypes.default.number
 } : void 0;

package/ChartsToolbarPro/ChartsToolbarPrintExportTrigger.mjs

@@ -65,6 +65,7 @@ process.env.NODE_ENV !== "production" ? ChartsToolbarPrintExportTrigger.propType
    * A function to customize the rendering of the component.
    */
   render: PropTypes.oneOfType([PropTypes.element, PropTypes.func]),
+  size: PropTypes.oneOf(['large', 'medium', 'small']),
   style: PropTypes.object,
   tabIndex: PropTypes.number
 } : void 0;

package/ChartsToolbarPro/ChartsToolbarPro.d.mts

@@ -1,9 +1,37 @@
 import { type ChartsToolbarProps } from '@mui/x-charts/Toolbar';
+import { type AxisId } from '@mui/x-charts/internals';
+import { type RangeButtonValue } from "./rangeButtonValueToZoom.mjs";
 import { type ChartsToolbarPrintExportOptions } from "./ChartsToolbarPrintExportTrigger.mjs";
 import { type ChartsToolbarImageExportOptions } from "./ChartsToolbarImageExportTrigger.mjs";
+export type { RangeButtonFunctionParams } from "./rangeButtonValueToZoom.mjs";
+export interface RangeButtonConfig {
+  /**
+   * The label displayed on the button (e.g., "1M", "3M", "1Y").
+   */
+  label: string;
+  /**
+   * The range value.
+   *
+   * - `{ unit, step }` — A calendar interval from the end of the data (e.g., `{ unit: 'month', step: 3 }` for 3 months).
+   * - `[start, end]` — An absolute date range.
+   * - `(params) => { start, end }` — A function that receives axis context (`scaleType`, `data`, `domain`) and returns zoom percentages (0-100).
+   * - `null` — Resets zoom to show all data.
+   */
+  value: RangeButtonValue;
+}
 export interface ChartsToolbarProProps extends ChartsToolbarProps {
   printOptions?: ChartsToolbarPrintExportOptions;
   imageExportOptions?: ChartsToolbarImageExportOptions[];
+  /**
+   * Configuration for range buttons shown in the toolbar.
+   * Each button zooms the chart to a predefined time range from the end of the data.
+   */
+  rangeButtons?: RangeButtonConfig[];
+  /**
+   * The axis ID to apply range buttons to.
+   * Defaults to the first x-axis with zoom enabled and a time scale.
+   */
+  rangeButtonsAxisId?: AxisId;
 }
 /**
  * The chart toolbar component for the pro package.
@@ -11,6 +39,8 @@ export interface ChartsToolbarProProps extends ChartsToolbarProps {
 declare function ChartsToolbarPro({
   printOptions,
   imageExportOptions: rawImageExportOptions,
+  rangeButtons,
+  rangeButtonsAxisId,
   ...other
 }: ChartsToolbarProProps): import("react/jsx-runtime").JSX.Element | null;
 declare namespace ChartsToolbarPro {

package/ChartsToolbarPro/ChartsToolbarPro.d.ts

@@ -1,9 +1,37 @@
 import { type ChartsToolbarProps } from '@mui/x-charts/Toolbar';
+import { type AxisId } from '@mui/x-charts/internals';
+import { type RangeButtonValue } from "./rangeButtonValueToZoom.js";
 import { type ChartsToolbarPrintExportOptions } from "./ChartsToolbarPrintExportTrigger.js";
 import { type ChartsToolbarImageExportOptions } from "./ChartsToolbarImageExportTrigger.js";
+export type { RangeButtonFunctionParams } from "./rangeButtonValueToZoom.js";
+export interface RangeButtonConfig {
+  /**
+   * The label displayed on the button (e.g., "1M", "3M", "1Y").
+   */
+  label: string;
+  /**
+   * The range value.
+   *
+   * - `{ unit, step }` — A calendar interval from the end of the data (e.g., `{ unit: 'month', step: 3 }` for 3 months).
+   * - `[start, end]` — An absolute date range.
+   * - `(params) => { start, end }` — A function that receives axis context (`scaleType`, `data`, `domain`) and returns zoom percentages (0-100).
+   * - `null` — Resets zoom to show all data.
+   */
+  value: RangeButtonValue;
+}
 export interface ChartsToolbarProProps extends ChartsToolbarProps {
   printOptions?: ChartsToolbarPrintExportOptions;
   imageExportOptions?: ChartsToolbarImageExportOptions[];
+  /**
+   * Configuration for range buttons shown in the toolbar.
+   * Each button zooms the chart to a predefined time range from the end of the data.
+   */
+  rangeButtons?: RangeButtonConfig[];
+  /**
+   * The axis ID to apply range buttons to.
+   * Defaults to the first x-axis with zoom enabled and a time scale.
+   */
+  rangeButtonsAxisId?: AxisId;
 }
 /**
  * The chart toolbar component for the pro package.
@@ -11,6 +39,8 @@ export interface ChartsToolbarProProps extends ChartsToolbarProps {
 declare function ChartsToolbarPro({
   printOptions,
   imageExportOptions: rawImageExportOptions,
+  rangeButtons,
+  rangeButtonsAxisId,
   ...other
 }: ChartsToolbarProProps): import("react/jsx-runtime").JSX.Element | null;
 declare namespace ChartsToolbarPro {

package/ChartsToolbarPro/ChartsToolbarPro.js

@@ -11,6 +11,8 @@ var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends")
 var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutPropertiesLoose"));
 var React = _interopRequireWildcard(require("react"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
+var _styles = require("@mui/material/styles");
+var _ToggleButtonGroup = _interopRequireDefault(require("@mui/material/ToggleButtonGroup"));
 var _Toolbar = require("@mui/x-charts/Toolbar");
 var _internals = require("@mui/x-charts/internals");
 var _hooks = require("@mui/x-charts/hooks");
@@ -20,13 +22,25 @@ var _ChartsMenu = require("./internals/ChartsMenu");
 var _useChartProZoom = require("../internals/plugins/useChartProZoom");
 var _ChartsToolbarZoomInTrigger = require("./ChartsToolbarZoomInTrigger");
 var _ChartsToolbarZoomOutTrigger = require("./ChartsToolbarZoomOutTrigger");
+var _ChartsToolbarRangeButtonTrigger = require("./ChartsToolbarRangeButtonTrigger");
 var _ChartsToolbarPrintExportTrigger = require("./ChartsToolbarPrintExportTrigger");
 var _ChartsToolbarImageExportTrigger = require("./ChartsToolbarImageExportTrigger");
 var _jsxRuntime = require("react/jsx-runtime");
-const _excluded = ["printOptions", "imageExportOptions"];
+const _excluded = ["printOptions", "imageExportOptions", "rangeButtons", "rangeButtonsAxisId"];
 const DEFAULT_IMAGE_EXPORT_OPTIONS = [{
   type: 'image/png'
 }];
+const RangeButtonGroup = (0, _styles.styled)(_ToggleButtonGroup.default, {
+  name: 'MuiChartsToolbarRangeButtons',
+  slot: 'Root'
+})({
+  alignSelf: 'stretch',
+  '& .MuiToggleButton-root': {
+    fontSize: '0.75rem',
+    minWidth: 'unset',
+    border: 'none'
+  }
+});
 
 /**
  * The chart toolbar component for the pro package.
@@ -34,7 +48,9 @@ const DEFAULT_IMAGE_EXPORT_OPTIONS = [{
 function ChartsToolbarPro(_ref) {
   let {
       printOptions,
-      imageExportOptions: rawImageExportOptions
+      imageExportOptions: rawImageExportOptions,
+      rangeButtons,
+      rangeButtonsAxisId
     } = _ref,
     other = (0, _objectWithoutPropertiesLoose2.default)(_ref, _excluded);
   const {
@@ -56,29 +72,46 @@ function ChartsToolbarPro(_ref) {
   const showExportMenu = !printOptions?.disableToolbarButton || imageExportOptionList.length > 0;
   const children = [];
   if (isZoomEnabled) {
+    if (rangeButtons && rangeButtons.length > 0) {
+      children.push(/*#__PURE__*/(0, _jsxRuntime.jsx)(RangeButtonGroup, {
+        exclusive: true,
+        size: "small",
+        children: rangeButtons.map(rangeButton => /*#__PURE__*/(0, _jsxRuntime.jsx)(_ChartsToolbarRangeButtonTrigger.ChartsToolbarRangeButtonTrigger, {
+          value: rangeButton.value,
+          label: rangeButton.label,
+          axisId: rangeButtonsAxisId,
+          children: rangeButton.label
+        }, rangeButton.label))
+      }, "range-buttons"));
+      children.push(/*#__PURE__*/(0, _jsxRuntime.jsx)(_ChartsToolbarDivider.ChartsToolbarDivider, {}, "range-divider"));
+    }
     const Tooltip = slots.baseTooltip;
     const ZoomOutIcon = slots.zoomOutIcon;
     const ZoomInIcon = slots.zoomInIcon;
     children.push(/*#__PURE__*/(0, _jsxRuntime.jsx)(Tooltip, (0, _extends2.default)({}, slotProps.baseTooltip, {
       title: localeText.zoomIn,
-      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_ChartsToolbarZoomInTrigger.ChartsToolbarZoomInTrigger, {
-        render: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Toolbar.ToolbarButton, {
-          size: "small"
-        }),
-        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(ZoomInIcon, (0, _extends2.default)({
-          fontSize: "small"
-        }, slotProps.zoomInIcon))
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_ChartsToolbarZoomInTrigger.ChartsToolbarZoomInTrigger, {
+          render: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Toolbar.ToolbarButton, {
+            size: "small"
+          }),
+          children: /*#__PURE__*/(0, _jsxRuntime.jsx)(ZoomInIcon, (0, _extends2.default)({
+            fontSize: "small"
+          }, slotProps.zoomInIcon))
+        })
       })
     }), "zoom-in"));
     children.push(/*#__PURE__*/(0, _jsxRuntime.jsx)(Tooltip, (0, _extends2.default)({}, slotProps.baseTooltip, {
       title: localeText.zoomOut,
-      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_ChartsToolbarZoomOutTrigger.ChartsToolbarZoomOutTrigger, {
-        render: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Toolbar.ToolbarButton, {
-          size: "small"
-        }),
-        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(ZoomOutIcon, (0, _extends2.default)({
-          fontSize: "small"
-        }, slotProps.zoomOutIcon))
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_ChartsToolbarZoomOutTrigger.ChartsToolbarZoomOutTrigger, {
+          render: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Toolbar.ToolbarButton, {
+            size: "small"
+          }),
+          children: /*#__PURE__*/(0, _jsxRuntime.jsx)(ZoomOutIcon, (0, _extends2.default)({
+            fontSize: "small"
+          }, slotProps.zoomOutIcon))
+        })
       })
     }), "zoom-out"));
   }
@@ -165,7 +198,23 @@ process.env.NODE_ENV !== "production" ? ChartsToolbarPro.propTypes = {
     quality: _propTypes.default.number,
     type: _propTypes.default.string.isRequired
   })),
-  printOptions: _propTypes.default.object
+  printOptions: _propTypes.default.object,
+  /**
+   * Configuration for range buttons shown in the toolbar.
+   * Each button zooms the chart to a predefined time range from the end of the data.
+   */
+  rangeButtons: _propTypes.default.arrayOf(_propTypes.default.shape({
+    label: _propTypes.default.string.isRequired,
+    value: _propTypes.default.oneOfType([_propTypes.default.arrayOf(_propTypes.default.instanceOf(Date).isRequired), _propTypes.default.func, _propTypes.default.shape({
+      step: _propTypes.default.number,
+      unit: _propTypes.default.oneOf(['day', 'hour', 'microsecond', 'millisecond', 'minute', 'month', 'second', 'week', 'year']).isRequired
+    })])
+  })),
+  /**
+   * The axis ID to apply range buttons to.
+   * Defaults to the first x-axis with zoom enabled and a time scale.
+   */
+  rangeButtonsAxisId: _propTypes.default.oneOfType([_propTypes.default.number, _propTypes.default.string])
 } : void 0;
 function isHideMenuKey(key) {
   return key === 'Tab' || key === 'Escape';

package/ChartsToolbarPro/ChartsToolbarPro.mjs

@@ -2,9 +2,11 @@
 
 import _extends from "@babel/runtime/helpers/esm/extends";
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
-const _excluded = ["printOptions", "imageExportOptions"];
+const _excluded = ["printOptions", "imageExportOptions", "rangeButtons", "rangeButtonsAxisId"];
 import * as React from 'react';
 import PropTypes from 'prop-types';
+import { styled } from '@mui/material/styles';
+import ToggleButtonGroup from '@mui/material/ToggleButtonGroup';
 import { Toolbar, ToolbarButton } from '@mui/x-charts/Toolbar';
 import { useChartsContext, useChartsSlots } from '@mui/x-charts/internals';
 import { useChartsLocalization } from '@mui/x-charts/hooks';
@@ -14,12 +16,24 @@ import { ChartsMenu } from "./internals/ChartsMenu.mjs";
 import { selectorChartZoomIsEnabled } from "../internals/plugins/useChartProZoom/index.mjs";
 import { ChartsToolbarZoomInTrigger } from "./ChartsToolbarZoomInTrigger.mjs";
 import { ChartsToolbarZoomOutTrigger } from "./ChartsToolbarZoomOutTrigger.mjs";
+import { ChartsToolbarRangeButtonTrigger } from "./ChartsToolbarRangeButtonTrigger.mjs";
 import { ChartsToolbarPrintExportTrigger } from "./ChartsToolbarPrintExportTrigger.mjs";
 import { ChartsToolbarImageExportTrigger } from "./ChartsToolbarImageExportTrigger.mjs";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const DEFAULT_IMAGE_EXPORT_OPTIONS = [{
   type: 'image/png'
 }];
+const RangeButtonGroup = styled(ToggleButtonGroup, {
+  name: 'MuiChartsToolbarRangeButtons',
+  slot: 'Root'
+})({
+  alignSelf: 'stretch',
+  '& .MuiToggleButton-root': {
+    fontSize: '0.75rem',
+    minWidth: 'unset',
+    border: 'none'
+  }
+});
 
 /**
  * The chart toolbar component for the pro package.
@@ -27,7 +41,9 @@ const DEFAULT_IMAGE_EXPORT_OPTIONS = [{
 function ChartsToolbarPro(_ref) {
   let {
       printOptions,
-      imageExportOptions: rawImageExportOptions
+      imageExportOptions: rawImageExportOptions,
+      rangeButtons,
+      rangeButtonsAxisId
     } = _ref,
     other = _objectWithoutPropertiesLoose(_ref, _excluded);
   const {
@@ -49,29 +65,46 @@ function ChartsToolbarPro(_ref) {
   const showExportMenu = !printOptions?.disableToolbarButton || imageExportOptionList.length > 0;
   const children = [];
   if (isZoomEnabled) {
+    if (rangeButtons && rangeButtons.length > 0) {
+      children.push(/*#__PURE__*/_jsx(RangeButtonGroup, {
+        exclusive: true,
+        size: "small",
+        children: rangeButtons.map(rangeButton => /*#__PURE__*/_jsx(ChartsToolbarRangeButtonTrigger, {
+          value: rangeButton.value,
+          label: rangeButton.label,
+          axisId: rangeButtonsAxisId,
+          children: rangeButton.label
+        }, rangeButton.label))
+      }, "range-buttons"));
+      children.push(/*#__PURE__*/_jsx(ChartsToolbarDivider, {}, "range-divider"));
+    }
     const Tooltip = slots.baseTooltip;
     const ZoomOutIcon = slots.zoomOutIcon;
     const ZoomInIcon = slots.zoomInIcon;
     children.push(/*#__PURE__*/_jsx(Tooltip, _extends({}, slotProps.baseTooltip, {
       title: localeText.zoomIn,
-      children: /*#__PURE__*/_jsx(ChartsToolbarZoomInTrigger, {
-        render: /*#__PURE__*/_jsx(ToolbarButton, {
-          size: "small"
-        }),
-        children: /*#__PURE__*/_jsx(ZoomInIcon, _extends({
-          fontSize: "small"
-        }, slotProps.zoomInIcon))
+      children: /*#__PURE__*/_jsx("span", {
+        children: /*#__PURE__*/_jsx(ChartsToolbarZoomInTrigger, {
+          render: /*#__PURE__*/_jsx(ToolbarButton, {
+            size: "small"
+          }),
+          children: /*#__PURE__*/_jsx(ZoomInIcon, _extends({
+            fontSize: "small"
+          }, slotProps.zoomInIcon))
+        })
       })
     }), "zoom-in"));
     children.push(/*#__PURE__*/_jsx(Tooltip, _extends({}, slotProps.baseTooltip, {
       title: localeText.zoomOut,
-      children: /*#__PURE__*/_jsx(ChartsToolbarZoomOutTrigger, {
-        render: /*#__PURE__*/_jsx(ToolbarButton, {
-          size: "small"
-        }),
-        children: /*#__PURE__*/_jsx(ZoomOutIcon, _extends({
-          fontSize: "small"
-        }, slotProps.zoomOutIcon))
+      children: /*#__PURE__*/_jsx("span", {
+        children: /*#__PURE__*/_jsx(ChartsToolbarZoomOutTrigger, {
+          render: /*#__PURE__*/_jsx(ToolbarButton, {
+            size: "small"
+          }),
+          children: /*#__PURE__*/_jsx(ZoomOutIcon, _extends({
+            fontSize: "small"
+          }, slotProps.zoomOutIcon))
+        })
       })
     }), "zoom-out"));
   }
@@ -158,7 +191,23 @@ process.env.NODE_ENV !== "production" ? ChartsToolbarPro.propTypes = {
     quality: PropTypes.number,
     type: PropTypes.string.isRequired
   })),
-  printOptions: PropTypes.object
+  printOptions: PropTypes.object,
+  /**
+   * Configuration for range buttons shown in the toolbar.
+   * Each button zooms the chart to a predefined time range from the end of the data.
+   */
+  rangeButtons: PropTypes.arrayOf(PropTypes.shape({
+    label: PropTypes.string.isRequired,
+    value: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.instanceOf(Date).isRequired), PropTypes.func, PropTypes.shape({
+      step: PropTypes.number,
+      unit: PropTypes.oneOf(['day', 'hour', 'microsecond', 'millisecond', 'minute', 'month', 'second', 'week', 'year']).isRequired
+    })])
+  })),
+  /**
+   * The axis ID to apply range buttons to.
+   * Defaults to the first x-axis with zoom enabled and a time scale.
+   */
+  rangeButtonsAxisId: PropTypes.oneOfType([PropTypes.number, PropTypes.string])
 } : void 0;
 export { ChartsToolbarPro };
 function isHideMenuKey(key) {

package/ChartsToolbarPro/ChartsToolbarRangeButtonTrigger.d.mts

@@ -0,0 +1,41 @@
+import * as React from 'react';
+import { type ChartsSlotProps, type AxisId } from '@mui/x-charts/internals';
+import { type RenderProp } from '@mui/x-internals/useComponentRenderer';
+import { type RangeButtonValue } from "./rangeButtonValueToZoom.mjs";
+export interface ChartsToolbarRangeButtonTriggerProps {
+  /**
+   * A function to customize the rendering of the component.
+   */
+  render?: RenderProp<ChartsSlotProps['baseToggleButton']>;
+  /**
+   * The range value. Specifies how far back from the end of the data to zoom.
+   *
+   * - `{ unit, step }` — A calendar interval from the end of the data (e.g., `{ unit: 'month', step: 3 }` for 3 months).
+   * - `[start, end]` — An absolute date range.
+   * - `(params) => { start, end }` — A function that receives axis context (`scaleType`, `data`, `domain`) and returns zoom percentages (0-100).
+   * - `null` — Resets zoom to show all data.
+   */
+  value: RangeButtonValue;
+  /**
+   * The axis ID to apply the range to.
+   * Defaults to the first x-axis with zoom enabled.
+   */
+  axisId?: AxisId;
+  /**
+   * The label used to identify the button for active-state tracking.
+   */
+  label: string;
+  /**
+   * The size of the button.
+   * @default 'small'
+   */
+  size?: 'small' | 'medium' | 'large';
+}
+/**
+ * A button that sets the chart zoom to a predefined range.
+ * It renders the `baseToggleButton` slot.
+ */
+declare const ChartsToolbarRangeButtonTrigger: React.ForwardRefExoticComponent<ChartsToolbarRangeButtonTriggerProps & {
+  children?: React.ReactNode | undefined;
+} & React.RefAttributes<HTMLButtonElement>>;
+export { ChartsToolbarRangeButtonTrigger };

package/ChartsToolbarPro/ChartsToolbarRangeButtonTrigger.d.ts

@@ -0,0 +1,41 @@
+import * as React from 'react';
+import { type ChartsSlotProps, type AxisId } from '@mui/x-charts/internals';
+import { type RenderProp } from '@mui/x-internals/useComponentRenderer';
+import { type RangeButtonValue } from "./rangeButtonValueToZoom.js";
+export interface ChartsToolbarRangeButtonTriggerProps {
+  /**
+   * A function to customize the rendering of the component.
+   */
+  render?: RenderProp<ChartsSlotProps['baseToggleButton']>;
+  /**
+   * The range value. Specifies how far back from the end of the data to zoom.
+   *
+   * - `{ unit, step }` — A calendar interval from the end of the data (e.g., `{ unit: 'month', step: 3 }` for 3 months).
+   * - `[start, end]` — An absolute date range.
+   * - `(params) => { start, end }` — A function that receives axis context (`scaleType`, `data`, `domain`) and returns zoom percentages (0-100).
+   * - `null` — Resets zoom to show all data.
+   */
+  value: RangeButtonValue;
+  /**
+   * The axis ID to apply the range to.
+   * Defaults to the first x-axis with zoom enabled.
+   */
+  axisId?: AxisId;
+  /**
+   * The label used to identify the button for active-state tracking.
+   */
+  label: string;
+  /**
+   * The size of the button.
+   * @default 'small'
+   */
+  size?: 'small' | 'medium' | 'large';
+}
+/**
+ * A button that sets the chart zoom to a predefined range.
+ * It renders the `baseToggleButton` slot.
+ */
+declare const ChartsToolbarRangeButtonTrigger: React.ForwardRefExoticComponent<ChartsToolbarRangeButtonTriggerProps & {
+  children?: React.ReactNode | undefined;
+} & React.RefAttributes<HTMLButtonElement>>;
+export { ChartsToolbarRangeButtonTrigger };