@mui/x-charts 9.0.0 → 9.0.2

package/ChartsRadialDataProvider/ChartsRadialDataProvider.mjs

@@ -0,0 +1,109 @@
+'use client';
+
+import _extends from "@babel/runtime/helpers/esm/extends";
+import * as React from 'react';
+import PropTypes from 'prop-types';
+import { defaultSlotsMaterial } from "../internals/material/index.mjs";
+import { ChartsSlotsProvider } from "../context/ChartsSlotsContext.mjs";
+import { ChartsProvider } from "../context/ChartsProvider/index.mjs";
+import { ChartsLocalizationProvider } from "../ChartsLocalizationProvider/index.mjs";
+import { useChartsRadialDataProviderProps } from "./useChartsRadialDataProviderProps.mjs";
+import { jsx as _jsx } from "react/jsx-runtime";
+/**
+ * Orchestrates the data providers for radial chart components and hooks.
+ *
+ * Similar to `ChartsDataProvider`, but uses the radial axis plugin instead of the cartesian one,
+ * and only supports the line series config.
+ *
+ * Demos:
+ *
+ * - [Composition](https://mui.com/x/react-charts/composition/)
+ *
+ * API:
+ *
+ * - [ChartsRadialDataProvider API](https://mui.com/x/api/charts/charts-radial-data-provider/)
+ */
+function ChartsRadialDataProvider(props) {
+  const {
+    children,
+    localeText,
+    chartProviderProps,
+    slots,
+    slotProps
+  } = useChartsRadialDataProviderProps(props);
+  return /*#__PURE__*/_jsx(ChartsProvider, _extends({}, chartProviderProps, {
+    children: /*#__PURE__*/_jsx(ChartsLocalizationProvider, {
+      localeText: localeText,
+      children: /*#__PURE__*/_jsx(ChartsSlotsProvider, {
+        slots: slots,
+        slotProps: slotProps,
+        defaultSlots: defaultSlotsMaterial,
+        children: children
+      })
+    })
+  }));
+}
+process.env.NODE_ENV !== "production" ? ChartsRadialDataProvider.propTypes = {
+  // ----------------------------- Warning --------------------------------
+  // | These PropTypes are generated from the TypeScript type definitions |
+  // | To update them edit the TypeScript types and run "pnpm proptypes"  |
+  // ----------------------------------------------------------------------
+  apiRef: PropTypes.shape({
+    current: PropTypes.any
+  }),
+  /**
+   * Color palette used to colorize multiple series.
+   * @default rainbowSurgePalette
+   */
+  colors: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.string), PropTypes.func]),
+  /**
+   * The height of the chart in px. If not defined, it takes the height of the parent element.
+   */
+  height: PropTypes.number,
+  /**
+   * This prop is used to help implement the accessibility logic.
+   * If you don't provide this prop. It falls back to a randomly generated id.
+   */
+  id: PropTypes.string,
+  /**
+   * Localized text for chart components.
+   */
+  localeText: PropTypes.object,
+  /**
+   * The margin between the SVG and the drawing area.
+   * It's used for leaving some space for extra information such as the x- and y-axis or legend.
+   *
+   * Accepts a `number` to be used on all sides or an object with the optional properties: `top`, `bottom`, `left`, and `right`.
+   */
+  margin: PropTypes.oneOfType([PropTypes.number, PropTypes.shape({
+    bottom: PropTypes.number,
+    left: PropTypes.number,
+    right: PropTypes.number,
+    top: PropTypes.number
+  })]),
+  /**
+   * The array of series to display.
+   * Each type of series has its own specificity.
+   * Please refer to the appropriate docs page to learn more about it.
+   */
+  series: PropTypes.arrayOf(PropTypes.object),
+  /**
+   * If `true`, animations are skipped.
+   * If unset or `false`, the animations respects the user's `prefers-reduced-motion` setting.
+   */
+  skipAnimation: PropTypes.bool,
+  /**
+   * The props for the slots.
+   */
+  slotProps: PropTypes.object,
+  /**
+   * Slots to customize charts' components.
+   */
+  slots: PropTypes.object,
+  theme: PropTypes.oneOf(['dark', 'light']),
+  /**
+   * The width of the chart in px. If not defined, it takes the width of the parent element.
+   */
+  width: PropTypes.number
+} : void 0;
+export { ChartsRadialDataProvider as Unstable_ChartsRadialDataProvider };

package/ChartsRadialDataProvider/ChartsRadialDataProvider.plugins.d.mts

@@ -0,0 +1,9 @@
+import { type UseChartPolarAxisSignature } from "../internals/plugins/featurePlugins/useChartPolarAxis/index.mjs";
+import { type UseChartTooltipSignature } from "../internals/plugins/featurePlugins/useChartTooltip/index.mjs";
+import { type UseChartInteractionSignature } from "../internals/plugins/featurePlugins/useChartInteraction/index.mjs";
+import { type UseChartHighlightSignature } from "../internals/plugins/featurePlugins/useChartHighlight/index.mjs";
+import { type UseChartKeyboardNavigationSignature } from "../internals/plugins/featurePlugins/useChartKeyboardNavigation/index.mjs";
+import { type UseChartVisibilityManagerSignature } from "../internals/plugins/featurePlugins/useChartVisibilityManager/index.mjs";
+import type { PolarChartSeriesType } from "../models/seriesType/config.mjs";
+export declare const RADIAL_PLUGINS: readonly [import("../internals/index.mjs").ChartPlugin<UseChartTooltipSignature<any>>, import("../internals/index.mjs").ChartPlugin<UseChartInteractionSignature>, import("../internals/index.mjs").ChartPlugin<UseChartPolarAxisSignature<any>>, import("../internals/index.mjs").ChartPlugin<UseChartHighlightSignature<any>>, import("../internals/index.mjs").ChartPlugin<UseChartKeyboardNavigationSignature>, import("../internals/index.mjs").ChartPlugin<UseChartVisibilityManagerSignature<any>>];
+export type RadialPluginSignatures<SeriesType extends PolarChartSeriesType = PolarChartSeriesType> = [UseChartTooltipSignature<SeriesType>, UseChartInteractionSignature, UseChartPolarAxisSignature, UseChartHighlightSignature<SeriesType>, UseChartKeyboardNavigationSignature, UseChartVisibilityManagerSignature<SeriesType>];

package/ChartsRadialDataProvider/ChartsRadialDataProvider.plugins.d.ts

@@ -0,0 +1,9 @@
+import { type UseChartPolarAxisSignature } from "../internals/plugins/featurePlugins/useChartPolarAxis/index.js";
+import { type UseChartTooltipSignature } from "../internals/plugins/featurePlugins/useChartTooltip/index.js";
+import { type UseChartInteractionSignature } from "../internals/plugins/featurePlugins/useChartInteraction/index.js";
+import { type UseChartHighlightSignature } from "../internals/plugins/featurePlugins/useChartHighlight/index.js";
+import { type UseChartKeyboardNavigationSignature } from "../internals/plugins/featurePlugins/useChartKeyboardNavigation/index.js";
+import { type UseChartVisibilityManagerSignature } from "../internals/plugins/featurePlugins/useChartVisibilityManager/index.js";
+import type { PolarChartSeriesType } from "../models/seriesType/config.js";
+export declare const RADIAL_PLUGINS: readonly [import("../internals/index.js").ChartPlugin<UseChartTooltipSignature<any>>, import("../internals/index.js").ChartPlugin<UseChartInteractionSignature>, import("../internals/index.js").ChartPlugin<UseChartPolarAxisSignature<any>>, import("../internals/index.js").ChartPlugin<UseChartHighlightSignature<any>>, import("../internals/index.js").ChartPlugin<UseChartKeyboardNavigationSignature>, import("../internals/index.js").ChartPlugin<UseChartVisibilityManagerSignature<any>>];
+export type RadialPluginSignatures<SeriesType extends PolarChartSeriesType = PolarChartSeriesType> = [UseChartTooltipSignature<SeriesType>, UseChartInteractionSignature, UseChartPolarAxisSignature, UseChartHighlightSignature<SeriesType>, UseChartKeyboardNavigationSignature, UseChartVisibilityManagerSignature<SeriesType>];

package/ChartsRadialDataProvider/ChartsRadialDataProvider.plugins.js

@@ -0,0 +1,13 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.RADIAL_PLUGINS = void 0;
+var _useChartPolarAxis = require("../internals/plugins/featurePlugins/useChartPolarAxis");
+var _useChartTooltip = require("../internals/plugins/featurePlugins/useChartTooltip");
+var _useChartInteraction = require("../internals/plugins/featurePlugins/useChartInteraction");
+var _useChartHighlight = require("../internals/plugins/featurePlugins/useChartHighlight");
+var _useChartKeyboardNavigation = require("../internals/plugins/featurePlugins/useChartKeyboardNavigation");
+var _useChartVisibilityManager = require("../internals/plugins/featurePlugins/useChartVisibilityManager");
+const RADIAL_PLUGINS = exports.RADIAL_PLUGINS = [_useChartTooltip.useChartTooltip, _useChartInteraction.useChartInteraction, _useChartPolarAxis.useChartPolarAxis, _useChartHighlight.useChartHighlight, _useChartKeyboardNavigation.useChartKeyboardNavigation, _useChartVisibilityManager.useChartVisibilityManager];

package/ChartsRadialDataProvider/ChartsRadialDataProvider.plugins.mjs

@@ -0,0 +1,7 @@
+import { useChartPolarAxis } from "../internals/plugins/featurePlugins/useChartPolarAxis/index.mjs";
+import { useChartTooltip } from "../internals/plugins/featurePlugins/useChartTooltip/index.mjs";
+import { useChartInteraction } from "../internals/plugins/featurePlugins/useChartInteraction/index.mjs";
+import { useChartHighlight } from "../internals/plugins/featurePlugins/useChartHighlight/index.mjs";
+import { useChartKeyboardNavigation } from "../internals/plugins/featurePlugins/useChartKeyboardNavigation/index.mjs";
+import { useChartVisibilityManager } from "../internals/plugins/featurePlugins/useChartVisibilityManager/index.mjs";
+export const RADIAL_PLUGINS = [useChartTooltip, useChartInteraction, useChartPolarAxis, useChartHighlight, useChartKeyboardNavigation, useChartVisibilityManager];

package/ChartsRadialDataProvider/index.d.mts

@@ -0,0 +1,2 @@
+export * from "./ChartsRadialDataProvider.mjs";
+export * from "./ChartsRadialDataProvider.plugins.mjs";

package/ChartsRadialDataProvider/index.d.ts

@@ -0,0 +1,2 @@
+export * from "./ChartsRadialDataProvider.js";
+export * from "./ChartsRadialDataProvider.plugins.js";

package/ChartsRadialDataProvider/index.js

@@ -0,0 +1,27 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+var _ChartsRadialDataProvider = require("./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];
+    }
+  });
+});
+var _ChartsRadialDataProvider2 = require("./ChartsRadialDataProvider.plugins");
+Object.keys(_ChartsRadialDataProvider2).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _ChartsRadialDataProvider2[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _ChartsRadialDataProvider2[key];
+    }
+  });
+});

package/ChartsRadialDataProvider/index.mjs

@@ -0,0 +1,2 @@
+export * from "./ChartsRadialDataProvider.mjs";
+export * from "./ChartsRadialDataProvider.plugins.mjs";

package/ChartsRadialDataProvider/useChartsRadialDataProviderProps.d.mts

@@ -0,0 +1,13 @@
+import type { ChartsRadialDataProviderProps } from "./ChartsRadialDataProvider.mjs";
+import { type ChartsProviderProps } from "../context/ChartsProvider/index.mjs";
+import { type ChartAnyPluginSignature } from "../internals/plugins/models/index.mjs";
+import { type RadialPluginSignatures } from "./ChartsRadialDataProvider.plugins.mjs";
+import { type ChartsLocalizationProviderProps } from "../ChartsLocalizationProvider/index.mjs";
+import { type PolarChartSeriesType } from "../models/seriesType/config.mjs";
+export declare const useChartsRadialDataProviderProps: <SeriesType extends PolarChartSeriesType = PolarChartSeriesType, TSignatures extends readonly ChartAnyPluginSignature[] = RadialPluginSignatures<SeriesType>>(inProps: ChartsRadialDataProviderProps<SeriesType, TSignatures> & ChartsLocalizationProviderProps) => {
+  children: import("react").ReactNode;
+  localeText: Partial<import("../locales/index.mjs").ChartsLocaleText> | undefined;
+  chartProviderProps: ChartsProviderProps<SeriesType, TSignatures>;
+  slots: Partial<import("./ChartsRadialDataProvider.mjs").ChartsRadialDataProviderSlots> | undefined;
+  slotProps: Partial<import("./ChartsRadialDataProvider.mjs").ChartsRadialDataProviderSlotProps> | undefined;
+};

package/ChartsRadialDataProvider/useChartsRadialDataProviderProps.d.ts

@@ -0,0 +1,13 @@
+import type { ChartsRadialDataProviderProps } from "./ChartsRadialDataProvider.js";
+import { type ChartsProviderProps } from "../context/ChartsProvider/index.js";
+import { type ChartAnyPluginSignature } from "../internals/plugins/models/index.js";
+import { type RadialPluginSignatures } from "./ChartsRadialDataProvider.plugins.js";
+import { type ChartsLocalizationProviderProps } from "../ChartsLocalizationProvider/index.js";
+import { type PolarChartSeriesType } from "../models/seriesType/config.js";
+export declare const useChartsRadialDataProviderProps: <SeriesType extends PolarChartSeriesType = PolarChartSeriesType, TSignatures extends readonly ChartAnyPluginSignature[] = RadialPluginSignatures<SeriesType>>(inProps: ChartsRadialDataProviderProps<SeriesType, TSignatures> & ChartsLocalizationProviderProps) => {
+  children: import("react").ReactNode;
+  localeText: Partial<import("../locales/index.js").ChartsLocaleText> | undefined;
+  chartProviderProps: ChartsProviderProps<SeriesType, TSignatures>;
+  slots: Partial<import("./ChartsRadialDataProvider.js").ChartsRadialDataProviderSlots> | undefined;
+  slotProps: Partial<import("./ChartsRadialDataProvider.js").ChartsRadialDataProviderSlotProps> | undefined;
+};

package/ChartsRadialDataProvider/useChartsRadialDataProviderProps.js

@@ -0,0 +1,46 @@
+"use strict";
+'use client';
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.useChartsRadialDataProviderProps = void 0;
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutPropertiesLoose"));
+var _styles = require("@mui/material/styles");
+var _ChartsRadialDataProvider = require("./ChartsRadialDataProvider.plugins");
+const _excluded = ["children", "localeText", "plugins", "slots", "slotProps", "seriesConfig"];
+const RADIAL_SERIES_CONFIG = {};
+const useChartsRadialDataProviderProps = inProps => {
+  // eslint-disable-next-line mui/material-ui-name-matches-component-name
+  const props = (0, _styles.useThemeProps)({
+    props: inProps,
+    name: 'MuiChartsRadialDataProvider'
+  });
+  const {
+      children,
+      localeText,
+      plugins = _ChartsRadialDataProvider.RADIAL_PLUGINS,
+      slots,
+      slotProps,
+      seriesConfig = RADIAL_SERIES_CONFIG
+    } = props,
+    other = (0, _objectWithoutPropertiesLoose2.default)(props, _excluded);
+  const theme = (0, _styles.useTheme)();
+  const chartProviderProps = {
+    plugins: plugins,
+    pluginParams: (0, _extends2.default)({
+      theme: theme.palette.mode,
+      seriesConfig
+    }, other)
+  };
+  return {
+    children,
+    localeText,
+    chartProviderProps,
+    slots,
+    slotProps
+  };
+};
+exports.useChartsRadialDataProviderProps = useChartsRadialDataProviderProps;

package/ChartsRadialDataProvider/useChartsRadialDataProviderProps.mjs

@@ -0,0 +1,39 @@
+'use client';
+
+import _extends from "@babel/runtime/helpers/esm/extends";
+import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
+const _excluded = ["children", "localeText", "plugins", "slots", "slotProps", "seriesConfig"];
+import { useTheme, useThemeProps } from '@mui/material/styles';
+import { RADIAL_PLUGINS } from "./ChartsRadialDataProvider.plugins.mjs";
+const RADIAL_SERIES_CONFIG = {};
+export const useChartsRadialDataProviderProps = inProps => {
+  // eslint-disable-next-line mui/material-ui-name-matches-component-name
+  const props = useThemeProps({
+    props: inProps,
+    name: 'MuiChartsRadialDataProvider'
+  });
+  const {
+      children,
+      localeText,
+      plugins = RADIAL_PLUGINS,
+      slots,
+      slotProps,
+      seriesConfig = RADIAL_SERIES_CONFIG
+    } = props,
+    other = _objectWithoutPropertiesLoose(props, _excluded);
+  const theme = useTheme();
+  const chartProviderProps = {
+    plugins: plugins,
+    pluginParams: _extends({
+      theme: theme.palette.mode,
+      seriesConfig
+    }, other)
+  };
+  return {
+    children,
+    localeText,
+    chartProviderProps,
+    slots,
+    slotProps
+  };
+};

package/ChartsRadialGrid/ChartsRadialGrid.d.mts

@@ -0,0 +1,33 @@
+import { type ChartsRadialGridClasses } from "./chartsRadialGridClasses.mjs";
+export interface ChartsRadialGridProps {
+  /**
+   * A CSS class name applied to the root element.
+   */
+  className?: string;
+  /**
+   * Displays rotation (spoke) grid.
+   */
+  rotation?: boolean;
+  /**
+   * Displays radius (concentric) grid.
+   */
+  radius?: boolean;
+  /**
+   * Override or extend the styles applied to the component.
+   */
+  classes?: Partial<ChartsRadialGridClasses>;
+}
+/**
+ * Demos:
+ *
+ * - [Radar](https://mui.com/x/react-charts/radar/)
+ *
+ * API:
+ *
+ * - [ChartsRadialGrid API](https://mui.com/x/api/charts/charts-radial-grid/)
+ */
+declare function ChartsRadialGrid(inProps: ChartsRadialGridProps): import("react/jsx-runtime").JSX.Element;
+declare namespace ChartsRadialGrid {
+  var propTypes: any;
+}
+export { ChartsRadialGrid };

package/ChartsRadialGrid/ChartsRadialGrid.d.ts

@@ -0,0 +1,33 @@
+import { type ChartsRadialGridClasses } from "./chartsRadialGridClasses.js";
+export interface ChartsRadialGridProps {
+  /**
+   * A CSS class name applied to the root element.
+   */
+  className?: string;
+  /**
+   * Displays rotation (spoke) grid.
+   */
+  rotation?: boolean;
+  /**
+   * Displays radius (concentric) grid.
+   */
+  radius?: boolean;
+  /**
+   * Override or extend the styles applied to the component.
+   */
+  classes?: Partial<ChartsRadialGridClasses>;
+}
+/**
+ * Demos:
+ *
+ * - [Radar](https://mui.com/x/react-charts/radar/)
+ *
+ * API:
+ *
+ * - [ChartsRadialGrid API](https://mui.com/x/api/charts/charts-radial-grid/)
+ */
+declare function ChartsRadialGrid(inProps: ChartsRadialGridProps): import("react/jsx-runtime").JSX.Element;
+declare namespace ChartsRadialGrid {
+  var propTypes: any;
+}
+export { ChartsRadialGrid };

package/ChartsRadialGrid/ChartsRadialGrid.js

@@ -0,0 +1,99 @@
+"use strict";
+'use client';
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.ChartsRadialGrid = ChartsRadialGrid;
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutPropertiesLoose"));
+var _propTypes = _interopRequireDefault(require("prop-types"));
+var _clsx = _interopRequireDefault(require("clsx"));
+var _composeClasses = _interopRequireDefault(require("@mui/utils/composeClasses"));
+var _styles = require("@mui/material/styles");
+var _chartsRadialGridClasses = require("./chartsRadialGridClasses");
+var _styledComponents = require("./styledComponents");
+var _ChartsRotationGrid = require("./ChartsRotationGrid");
+var _ChartsRadiusGrid = require("./ChartsRadiusGrid");
+var _useAxis = require("../hooks/useAxis");
+var _jsxRuntime = require("react/jsx-runtime");
+const _excluded = ["className", "rotation", "radius"];
+const useUtilityClasses = ({
+  classes
+}) => {
+  const slots = {
+    root: ['root'],
+    rotationLine: ['line', 'rotationLine'],
+    radiusLine: ['line', 'radiusLine']
+  };
+  return (0, _composeClasses.default)(slots, _chartsRadialGridClasses.getChartsRadialGridUtilityClass, classes);
+};
+/**
+ * Demos:
+ *
+ * - [Radar](https://mui.com/x/react-charts/radar/)
+ *
+ * API:
+ *
+ * - [ChartsRadialGrid API](https://mui.com/x/api/charts/charts-radial-grid/)
+ */
+function ChartsRadialGrid(inProps) {
+  const props = (0, _styles.useThemeProps)({
+    props: inProps,
+    name: 'MuiChartsRadialGrid'
+  });
+  const {
+      className,
+      rotation,
+      radius
+    } = props,
+    other = (0, _objectWithoutPropertiesLoose2.default)(props, _excluded);
+  const {
+    rotationAxis,
+    rotationAxisIds
+  } = (0, _useAxis.useRotationAxes)();
+  const {
+    radiusAxis,
+    radiusAxisIds
+  } = (0, _useAxis.useRadiusAxes)();
+  const classes = useUtilityClasses(props);
+  const rotationAxisConfig = rotationAxis[rotationAxisIds[0]];
+  const radiusAxisConfig = radiusAxis[radiusAxisIds[0]];
+  const innerRadius = radiusAxisConfig?.scale.range()[0] ?? 0;
+  const outerRadius = radiusAxisConfig?.scale.range()[1] ?? 0;
+  const startAngle = rotationAxisConfig?.scale.range()[0] ?? 0;
+  const endAngle = rotationAxisConfig?.scale.range()[1] ?? 0;
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_styledComponents.GridRoot, (0, _extends2.default)({}, other, {
+    className: (0, _clsx.default)(classes.root, className),
+    children: [rotation && rotationAxisConfig && /*#__PURE__*/(0, _jsxRuntime.jsx)(_ChartsRotationGrid.ChartsRotationGrid, {
+      axis: rotationAxisConfig,
+      outerRadius: outerRadius,
+      innerRadius: innerRadius,
+      classes: classes
+    }), radius && radiusAxisConfig && /*#__PURE__*/(0, _jsxRuntime.jsx)(_ChartsRadiusGrid.ChartsRadiusGrid, {
+      axis: radiusAxisConfig,
+      startAngle: startAngle,
+      endAngle: endAngle,
+      classes: classes
+    })]
+  }));
+}
+process.env.NODE_ENV !== "production" ? ChartsRadialGrid.propTypes = {
+  // ----------------------------- Warning --------------------------------
+  // | These PropTypes are generated from the TypeScript type definitions |
+  // | To update them edit the TypeScript types and run "pnpm proptypes"  |
+  // ----------------------------------------------------------------------
+  /**
+   * Override or extend the styles applied to the component.
+   */
+  classes: _propTypes.default.object,
+  /**
+   * Displays radius (concentric) grid.
+   */
+  radius: _propTypes.default.bool,
+  /**
+   * Displays rotation (spoke) grid.
+   */
+  rotation: _propTypes.default.bool
+} : void 0;

package/ChartsRadialGrid/ChartsRadialGrid.mjs

@@ -0,0 +1,94 @@
+'use client';
+
+import _extends from "@babel/runtime/helpers/esm/extends";
+import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
+const _excluded = ["className", "rotation", "radius"];
+import PropTypes from 'prop-types';
+import clsx from 'clsx';
+import composeClasses from '@mui/utils/composeClasses';
+import { useThemeProps } from '@mui/material/styles';
+import { getChartsRadialGridUtilityClass } from "./chartsRadialGridClasses.mjs";
+import { GridRoot } from "./styledComponents.mjs";
+import { ChartsRotationGrid } from "./ChartsRotationGrid.mjs";
+import { ChartsRadiusGrid } from "./ChartsRadiusGrid.mjs";
+import { useRotationAxes, useRadiusAxes } from "../hooks/useAxis.mjs";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+const useUtilityClasses = ({
+  classes
+}) => {
+  const slots = {
+    root: ['root'],
+    rotationLine: ['line', 'rotationLine'],
+    radiusLine: ['line', 'radiusLine']
+  };
+  return composeClasses(slots, getChartsRadialGridUtilityClass, classes);
+};
+/**
+ * Demos:
+ *
+ * - [Radar](https://mui.com/x/react-charts/radar/)
+ *
+ * API:
+ *
+ * - [ChartsRadialGrid API](https://mui.com/x/api/charts/charts-radial-grid/)
+ */
+function ChartsRadialGrid(inProps) {
+  const props = useThemeProps({
+    props: inProps,
+    name: 'MuiChartsRadialGrid'
+  });
+  const {
+      className,
+      rotation,
+      radius
+    } = props,
+    other = _objectWithoutPropertiesLoose(props, _excluded);
+  const {
+    rotationAxis,
+    rotationAxisIds
+  } = useRotationAxes();
+  const {
+    radiusAxis,
+    radiusAxisIds
+  } = useRadiusAxes();
+  const classes = useUtilityClasses(props);
+  const rotationAxisConfig = rotationAxis[rotationAxisIds[0]];
+  const radiusAxisConfig = radiusAxis[radiusAxisIds[0]];
+  const innerRadius = radiusAxisConfig?.scale.range()[0] ?? 0;
+  const outerRadius = radiusAxisConfig?.scale.range()[1] ?? 0;
+  const startAngle = rotationAxisConfig?.scale.range()[0] ?? 0;
+  const endAngle = rotationAxisConfig?.scale.range()[1] ?? 0;
+  return /*#__PURE__*/_jsxs(GridRoot, _extends({}, other, {
+    className: clsx(classes.root, className),
+    children: [rotation && rotationAxisConfig && /*#__PURE__*/_jsx(ChartsRotationGrid, {
+      axis: rotationAxisConfig,
+      outerRadius: outerRadius,
+      innerRadius: innerRadius,
+      classes: classes
+    }), radius && radiusAxisConfig && /*#__PURE__*/_jsx(ChartsRadiusGrid, {
+      axis: radiusAxisConfig,
+      startAngle: startAngle,
+      endAngle: endAngle,
+      classes: classes
+    })]
+  }));
+}
+process.env.NODE_ENV !== "production" ? ChartsRadialGrid.propTypes = {
+  // ----------------------------- Warning --------------------------------
+  // | These PropTypes are generated from the TypeScript type definitions |
+  // | To update them edit the TypeScript types and run "pnpm proptypes"  |
+  // ----------------------------------------------------------------------
+  /**
+   * Override or extend the styles applied to the component.
+   */
+  classes: PropTypes.object,
+  /**
+   * Displays radius (concentric) grid.
+   */
+  radius: PropTypes.bool,
+  /**
+   * Displays rotation (spoke) grid.
+   */
+  rotation: PropTypes.bool
+} : void 0;
+export { ChartsRadialGrid };

package/ChartsRadialGrid/ChartsRadiusGrid.d.mts

@@ -0,0 +1,13 @@
+import { type ChartsRadialGridClasses } from "./chartsRadialGridClasses.mjs";
+import { type PolarAxisDefaultized } from "../models/axis.mjs";
+interface ChartsRadiusGridProps {
+  axis: PolarAxisDefaultized<any, any, any>;
+  startAngle: number;
+  endAngle: number;
+  classes: Partial<ChartsRadialGridClasses>;
+}
+/**
+ * @ignore - internal component.
+ */
+export declare function ChartsRadiusGrid(props: ChartsRadiusGridProps): import("react/jsx-runtime").JSX.Element;
+export {};

package/ChartsRadialGrid/ChartsRadiusGrid.d.ts

@@ -0,0 +1,13 @@
+import { type ChartsRadialGridClasses } from "./chartsRadialGridClasses.js";
+import { type PolarAxisDefaultized } from "../models/axis.js";
+interface ChartsRadiusGridProps {
+  axis: PolarAxisDefaultized<any, any, any>;
+  startAngle: number;
+  endAngle: number;
+  classes: Partial<ChartsRadialGridClasses>;
+}
+/**
+ * @ignore - internal component.
+ */
+export declare function ChartsRadiusGrid(props: ChartsRadiusGridProps): import("react/jsx-runtime").JSX.Element;
+export {};