@mui/x-charts 9.0.0-alpha.3 → 9.0.0-alpha.4

package/RadarChart/RadarChart.js

@@ -70,12 +70,19 @@ process.env.NODE_ENV !== "production" ? RadarChart.propTypes = {
   apiRef: _propTypes.default.shape({
     current: _propTypes.default.object
   }),
+  /**
+   * A CSS class name applied to the root element.
+   */
   className: _propTypes.default.string,
   /**
    * Color palette used to colorize multiple series.
    * @default rainbowSurgePalette
    */
   colors: _propTypes.default.oneOfType([_propTypes.default.arrayOf(_propTypes.default.string), _propTypes.default.func]),
+  /**
+   * The description of the chart.
+   * Used to provide an accessible description for the chart.
+   */
   desc: _propTypes.default.string,
   /**
    * If `true`, the charts will not listen to the mouse move event.
@@ -92,6 +99,10 @@ process.env.NODE_ENV !== "production" ? RadarChart.propTypes = {
    * @default 5
    */
   divisions: _propTypes.default.number,
+  /**
+   * Options to enable features planned for the next major.
+   */
+  experimentalFeatures: _propTypes.default.object,
   /**
    * The height of the chart in px. If not defined, it takes the height of the parent element.
    */
@@ -291,6 +302,10 @@ process.env.NODE_ENV !== "production" ? RadarChart.propTypes = {
   stripeColor: _propTypes.default.func,
   sx: _propTypes.default.oneOfType([_propTypes.default.arrayOf(_propTypes.default.oneOfType([_propTypes.default.func, _propTypes.default.object, _propTypes.default.bool])), _propTypes.default.func, _propTypes.default.object]),
   theme: _propTypes.default.oneOf(['dark', 'light']),
+  /**
+   * The title of the chart.
+   * Used to provide an accessible label for the chart.
+   */
   title: _propTypes.default.string,
   /**
    * The tooltip item.

package/RadarChart/RadarChart.mjs

@@ -63,12 +63,19 @@ process.env.NODE_ENV !== "production" ? RadarChart.propTypes = {
   apiRef: PropTypes.shape({
     current: PropTypes.object
   }),
+  /**
+   * A CSS class name applied to the root element.
+   */
   className: PropTypes.string,
   /**
    * Color palette used to colorize multiple series.
    * @default rainbowSurgePalette
    */
   colors: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.string), PropTypes.func]),
+  /**
+   * The description of the chart.
+   * Used to provide an accessible description for the chart.
+   */
   desc: PropTypes.string,
   /**
    * If `true`, the charts will not listen to the mouse move event.
@@ -85,6 +92,10 @@ process.env.NODE_ENV !== "production" ? RadarChart.propTypes = {
    * @default 5
    */
   divisions: PropTypes.number,
+  /**
+   * Options to enable features planned for the next major.
+   */
+  experimentalFeatures: PropTypes.object,
   /**
    * The height of the chart in px. If not defined, it takes the height of the parent element.
    */
@@ -284,6 +295,10 @@ process.env.NODE_ENV !== "production" ? RadarChart.propTypes = {
   stripeColor: PropTypes.func,
   sx: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.func, PropTypes.object, PropTypes.bool])), PropTypes.func, PropTypes.object]),
   theme: PropTypes.oneOf(['dark', 'light']),
+  /**
+   * The title of the chart.
+   * Used to provide an accessible label for the chart.
+   */
   title: PropTypes.string,
   /**
    * The tooltip item.

package/RadarChart/RadarDataProvider/RadarDataProvider.d.mts

@@ -1,11 +1,11 @@
 import { type MakeOptional } from '@mui/x-internals/types';
 import { type RadarChartPluginSignatures } from "../RadarChart.plugins.mjs";
 import { type RadarSeriesType } from "../../models/seriesType/radar.mjs";
-import { type ChartDataProviderProps } from "../../ChartDataProvider/index.mjs";
+import { type ChartsDataProviderProps } from "../../ChartsDataProvider/index.mjs";
 import { type RadarConfig } from "./radar.types.mjs";
 import { type ChartAnyPluginSignature } from "../../internals/plugins/models/plugin.mjs";
 export type RadarSeries = MakeOptional<RadarSeriesType, 'type'>;
-export type RadarDataProviderProps<TSignatures extends readonly ChartAnyPluginSignature[] = RadarChartPluginSignatures> = Omit<ChartDataProviderProps<'radar', TSignatures>, 'series' | 'rotationAxis' | 'radiusAxis' | 'dataset' | 'experimentalFeatures'> & {
+export type RadarDataProviderProps<TSignatures extends readonly ChartAnyPluginSignature[] = RadarChartPluginSignatures> = Omit<ChartsDataProviderProps<'radar', TSignatures>, 'series' | 'rotationAxis' | 'radiusAxis' | 'dataset'> & {
   /**
    * The series to display in the bar chart.
    * An array of [[RadarSeries]] objects.

package/RadarChart/RadarDataProvider/RadarDataProvider.d.ts

@@ -1,11 +1,11 @@
 import { type MakeOptional } from '@mui/x-internals/types';
 import { type RadarChartPluginSignatures } from "../RadarChart.plugins.js";
 import { type RadarSeriesType } from "../../models/seriesType/radar.js";
-import { type ChartDataProviderProps } from "../../ChartDataProvider/index.js";
+import { type ChartsDataProviderProps } from "../../ChartsDataProvider/index.js";
 import { type RadarConfig } from "./radar.types.js";
 import { type ChartAnyPluginSignature } from "../../internals/plugins/models/plugin.js";
 export type RadarSeries = MakeOptional<RadarSeriesType, 'type'>;
-export type RadarDataProviderProps<TSignatures extends readonly ChartAnyPluginSignature[] = RadarChartPluginSignatures> = Omit<ChartDataProviderProps<'radar', TSignatures>, 'series' | 'rotationAxis' | 'radiusAxis' | 'dataset' | 'experimentalFeatures'> & {
+export type RadarDataProviderProps<TSignatures extends readonly ChartAnyPluginSignature[] = RadarChartPluginSignatures> = Omit<ChartsDataProviderProps<'radar', TSignatures>, 'series' | 'rotationAxis' | 'radiusAxis' | 'dataset'> & {
   /**
    * The series to display in the bar chart.
    * An array of [[RadarSeries]] objects.

package/RadarChart/RadarDataProvider/RadarDataProvider.js

@@ -11,7 +11,7 @@ var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends")
 var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutPropertiesLoose"));
 var React = _interopRequireWildcard(require("react"));
 var _RadarChart = require("../RadarChart.plugins");
-var _ChartDataProvider = require("../../ChartDataProvider");
+var _ChartsDataProvider = require("../../ChartsDataProvider");
 var _defaultizeMargin = require("../../internals/defaultizeMargin");
 var _seriesConfig = require("../seriesConfig");
 var _jsxRuntime = require("react/jsx-runtime");
@@ -76,7 +76,7 @@ function RadarDataProvider(props) {
     } : undefined)
   }, s)), [series, highlight]);
   const defaultizedMargin = React.useMemo(() => (0, _defaultizeMargin.defaultizeMargin)(margin, DEFAULT_RADAR_MARGIN), [margin]);
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_ChartDataProvider.ChartDataProvider, (0, _extends2.default)({}, other, {
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_ChartsDataProvider.ChartsDataProvider, (0, _extends2.default)({}, other, {
     series: defaultizedSeries,
     width: width,
     height: height,

package/RadarChart/RadarDataProvider/RadarDataProvider.mjs

@@ -5,7 +5,7 @@ import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWith
 const _excluded = ["series", "children", "width", "height", "colors", "skipAnimation", "margin", "radar", "highlight", "plugins"];
 import * as React from 'react';
 import { RADAR_PLUGINS } from "../RadarChart.plugins.mjs";
-import { ChartDataProvider } from "../../ChartDataProvider/index.mjs";
+import { ChartsDataProvider } from "../../ChartsDataProvider/index.mjs";
 import { defaultizeMargin } from "../../internals/defaultizeMargin.mjs";
 import { radarSeriesConfig } from "../seriesConfig/index.mjs";
 import { jsx as _jsx } from "react/jsx-runtime";
@@ -69,7 +69,7 @@ function RadarDataProvider(props) {
     } : undefined)
   }, s)), [series, highlight]);
   const defaultizedMargin = React.useMemo(() => defaultizeMargin(margin, DEFAULT_RADAR_MARGIN), [margin]);
-  return /*#__PURE__*/_jsx(ChartDataProvider, _extends({}, other, {
+  return /*#__PURE__*/_jsx(ChartsDataProvider, _extends({}, other, {
     series: defaultizedSeries,
     width: width,
     height: height,

package/RadarChart/RadarGrid/CircularRadarGrid.js

@@ -32,7 +32,7 @@ function CircularRadarGrid(props) {
       strokeWidth: 1,
       strokeOpacity: 0.3,
       fill: "none",
-      className: classes?.radial
+      className: classes?.gridRadial
     }, i)), divisionRadius.map(r => /*#__PURE__*/(0, _jsxRuntime.jsx)("circle", {
       cx: center.x,
       cy: center.y,
@@ -41,7 +41,7 @@ function CircularRadarGrid(props) {
       strokeWidth: 1,
       strokeOpacity: 0.3,
       fill: "none",
-      className: classes?.divider
+      className: classes?.gridDivider
     }, r))]
   });
 }

package/RadarChart/RadarGrid/CircularRadarGrid.mjs

@@ -25,7 +25,7 @@ export function CircularRadarGrid(props) {
       strokeWidth: 1,
       strokeOpacity: 0.3,
       fill: "none",
-      className: classes?.radial
+      className: classes?.gridRadial
     }, i)), divisionRadius.map(r => /*#__PURE__*/_jsx("circle", {
       cx: center.x,
       cy: center.y,
@@ -34,7 +34,7 @@ export function CircularRadarGrid(props) {
       strokeWidth: 1,
       strokeOpacity: 0.3,
       fill: "none",
-      className: classes?.divider
+      className: classes?.gridDivider
     }, r))]
   });
 }

package/RadarChart/RadarGrid/CircularRadarStripes.js

@@ -31,7 +31,7 @@ function CircularRadarStripes(props) {
         fillRule: "evenodd",
         fill: stripeColor?.(index) ?? 'none',
         fillOpacity: 0.1,
-        className: classes?.stripe
+        className: classes?.gridStripe
       }, r);
     })
   });

package/RadarChart/RadarGrid/CircularRadarStripes.mjs

@@ -24,7 +24,7 @@ export function CircularRadarStripes(props) {
         fillRule: "evenodd",
         fill: stripeColor?.(index) ?? 'none',
         fillOpacity: 0.1,
-        className: classes?.stripe
+        className: classes?.gridStripe
       }, r);
     })
   });

package/RadarChart/RadarGrid/RadarGrid.js

@@ -14,7 +14,7 @@ var _SharpRadarGrid = require("./SharpRadarGrid");
 var _CircularRadarGrid = require("./CircularRadarGrid");
 var _SharpRadarStripes = require("./SharpRadarStripes");
 var _CircularRadarStripes = require("./CircularRadarStripes");
-var _radarGridClasses = require("./radarGridClasses");
+var _radarClasses = require("../radarClasses");
 var _jsxRuntime = require("react/jsx-runtime");
 function RadarGrid(props) {
   const theme = (0, _styles.useTheme)();
@@ -24,7 +24,7 @@ function RadarGrid(props) {
     stripeColor = index => index % 2 === 1 ? (theme.vars || theme).palette.text.secondary : 'none'
   } = props;
   const gridData = (0, _useRadarGridData.useRadarGridData)();
-  const classes = (0, _radarGridClasses.useUtilityClasses)(props.classes);
+  const classes = (0, _radarClasses.useUtilityClasses)();
   if (gridData === null) {
     return null;
   }

package/RadarChart/RadarGrid/RadarGrid.mjs

@@ -6,7 +6,7 @@ import { SharpRadarGrid } from "./SharpRadarGrid.mjs";
 import { CircularRadarGrid } from "./CircularRadarGrid.mjs";
 import { SharpRadarStripes } from "./SharpRadarStripes.mjs";
 import { CircularRadarStripes } from "./CircularRadarStripes.mjs";
-import { useUtilityClasses } from "./radarGridClasses.mjs";
+import { useUtilityClasses } from "../radarClasses.mjs";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 function RadarGrid(props) {
   const theme = useTheme();
@@ -16,7 +16,7 @@ function RadarGrid(props) {
     stripeColor = index => index % 2 === 1 ? (theme.vars || theme).palette.text.secondary : 'none'
   } = props;
   const gridData = useRadarGridData();
-  const classes = useUtilityClasses(props.classes);
+  const classes = useUtilityClasses();
   if (gridData === null) {
     return null;
   }

package/RadarChart/RadarGrid/RadarGrid.types.d.mts

@@ -1,4 +1,4 @@
-import { type RadarGridClasses } from "./radarGridClasses.mjs";
+import { type RadarClasses } from "../radarClasses.mjs";
 export interface RadarGridProps {
   /**
    * The number of divisions in the radar grid.
@@ -17,12 +17,9 @@ export interface RadarGridProps {
    * @default (index) => index % 2 === 1 ? (theme.vars || theme).palette.text.secondary : 'none'
    */
   stripeColor?: ((index: number) => string) | null;
-  /**
-   * Override or extend the styles applied to the component.
-   */
-  classes?: Partial<RadarGridClasses>;
 }
-export interface RadarGridRenderProps extends Pick<RadarGridProps, 'classes'> {
+export interface RadarGridRenderProps {
+  classes?: Partial<RadarClasses>;
   center: {
     x: number;
     y: number;
@@ -35,7 +32,9 @@ export interface RadarGridRenderProps extends Pick<RadarGridProps, 'classes'> {
   radius: number;
   strokeColor: string;
 }
-export interface RadarGridStripeRenderProps extends Pick<RadarGridProps, 'stripeColor' | 'classes'> {
+export interface RadarGridStripeRenderProps {
+  stripeColor?: RadarGridProps['stripeColor'];
+  classes?: Partial<RadarClasses>;
   center: {
     x: number;
     y: number;

package/RadarChart/RadarGrid/RadarGrid.types.d.ts

@@ -1,4 +1,4 @@
-import { type RadarGridClasses } from "./radarGridClasses.js";
+import { type RadarClasses } from "../radarClasses.js";
 export interface RadarGridProps {
   /**
    * The number of divisions in the radar grid.
@@ -17,12 +17,9 @@ export interface RadarGridProps {
    * @default (index) => index % 2 === 1 ? (theme.vars || theme).palette.text.secondary : 'none'
    */
   stripeColor?: ((index: number) => string) | null;
-  /**
-   * Override or extend the styles applied to the component.
-   */
-  classes?: Partial<RadarGridClasses>;
 }
-export interface RadarGridRenderProps extends Pick<RadarGridProps, 'classes'> {
+export interface RadarGridRenderProps {
+  classes?: Partial<RadarClasses>;
   center: {
     x: number;
     y: number;
@@ -35,7 +32,9 @@ export interface RadarGridRenderProps extends Pick<RadarGridProps, 'classes'> {
   radius: number;
   strokeColor: string;
 }
-export interface RadarGridStripeRenderProps extends Pick<RadarGridProps, 'stripeColor' | 'classes'> {
+export interface RadarGridStripeRenderProps {
+  stripeColor?: RadarGridProps['stripeColor'];
+  classes?: Partial<RadarClasses>;
   center: {
     x: number;
     y: number;

package/RadarChart/RadarGrid/SharpRadarGrid.js

@@ -31,7 +31,7 @@ function SharpRadarGrid(props) {
       strokeWidth: 1,
       strokeOpacity: 0.3,
       fill: "none",
-      className: classes?.radial
+      className: classes?.gridRadial
     }, i)), divisionRatio.map(ratio => /*#__PURE__*/(0, _jsxRuntime.jsx)("path", {
       d: `M ${corners.map(({
         x,
@@ -41,7 +41,7 @@ function SharpRadarGrid(props) {
       strokeWidth: 1,
       strokeOpacity: 0.3,
       fill: "none",
-      className: classes?.divider
+      className: classes?.gridDivider
     }, ratio))]
   });
 }

package/RadarChart/RadarGrid/SharpRadarGrid.mjs

@@ -24,7 +24,7 @@ export function SharpRadarGrid(props) {
       strokeWidth: 1,
       strokeOpacity: 0.3,
       fill: "none",
-      className: classes?.radial
+      className: classes?.gridRadial
     }, i)), divisionRatio.map(ratio => /*#__PURE__*/_jsx("path", {
       d: `M ${corners.map(({
         x,
@@ -34,7 +34,7 @@ export function SharpRadarGrid(props) {
       strokeWidth: 1,
       strokeOpacity: 0.3,
       fill: "none",
-      className: classes?.divider
+      className: classes?.gridDivider
     }, ratio))]
   });
 }

package/RadarChart/RadarGrid/SharpRadarStripes.js

@@ -37,7 +37,7 @@ function SharpRadarStripes(props) {
         stroke: "none",
         fill: stripeColor?.(index) ?? 'none',
         fillOpacity: 0.1,
-        className: classes?.stripe
+        className: classes?.gridStripe
       }, ratio);
     })
   });

package/RadarChart/RadarGrid/SharpRadarStripes.mjs

@@ -30,7 +30,7 @@ export function SharpRadarStripes(props) {
         stroke: "none",
         fill: stripeColor?.(index) ?? 'none',
         fillOpacity: 0.1,
-        className: classes?.stripe
+        className: classes?.gridStripe
       }, ratio);
     })
   });

package/RadarChart/RadarGrid/index.d.mts

@@ -1,3 +1,2 @@
 export * from "./RadarGrid.mjs";
-export type { RadarGridProps } from "./RadarGrid.types.mjs";
-export { type RadarGridClasses } from "./radarGridClasses.mjs";
+export type { RadarGridProps } from "./RadarGrid.types.mjs";

package/RadarChart/RadarGrid/index.d.ts

@@ -1,3 +1,2 @@
 export * from "./RadarGrid.js";
-export type { RadarGridProps } from "./RadarGrid.types.js";
-export { type RadarGridClasses } from "./radarGridClasses.js";
+export type { RadarGridProps } from "./RadarGrid.types.js";

package/RadarChart/RadarGrid/useRadarGridData.js

@@ -7,12 +7,12 @@ exports.useRadarGridData = useRadarGridData;
 var _useScale = require("../../hooks/useScale");
 var _hooks = require("../../hooks");
 var _useChartPolarAxis = require("../../internals/plugins/featurePlugins/useChartPolarAxis");
-var _useChartContext = require("../../context/ChartProvider/useChartContext");
+var _useChartsContext = require("../../context/ChartsProvider/useChartsContext");
 function useRadarGridData() {
   const {
     instance,
     store
-  } = (0, _useChartContext.useChartContext)();
+  } = (0, _useChartsContext.useChartsContext)();
   const rotationScale = (0, _useScale.useRotationScale)();
   const {
     radiusAxis

package/RadarChart/RadarGrid/useRadarGridData.mjs

@@ -1,12 +1,12 @@
 import { useRotationScale } from "../../hooks/useScale.mjs";
 import { useRadiusAxes } from "../../hooks/index.mjs";
 import { selectorChartPolarCenter } from "../../internals/plugins/featurePlugins/useChartPolarAxis/index.mjs";
-import { useChartContext } from "../../context/ChartProvider/useChartContext.mjs";
+import { useChartsContext } from "../../context/ChartsProvider/useChartsContext.mjs";
 export function useRadarGridData() {
   const {
     instance,
     store
-  } = useChartContext();
+  } = useChartsContext();
   const rotationScale = useRotationScale();
   const {
     radiusAxis

package/RadarChart/RadarSeriesPlot/RadarSeriesArea.d.mts

@@ -1,10 +1,10 @@
 import { type RadarSeriesAreaProps } from "./RadarSeriesPlot.types.mjs";
-import { type RadarSeriesPlotClasses } from "./radarSeriesPlotClasses.mjs";
+import { type RadarClasses } from "../radarClasses.mjs";
 import type { SeriesId, HighlightItemIdentifierWithType } from "../../models/seriesType/index.mjs";
 import type { HighlightState } from "../../hooks/useItemHighlightState.mjs";
 interface GetPathPropsParams {
   seriesId: SeriesId;
-  classes: RadarSeriesPlotClasses;
+  classes: RadarClasses;
   getHighlightState: (item: HighlightItemIdentifierWithType<'radar'> | null) => HighlightState;
   points: {
     x: number;

package/RadarChart/RadarSeriesPlot/RadarSeriesArea.d.ts

@@ -1,10 +1,10 @@
 import { type RadarSeriesAreaProps } from "./RadarSeriesPlot.types.js";
-import { type RadarSeriesPlotClasses } from "./radarSeriesPlotClasses.js";
+import { type RadarClasses } from "../radarClasses.js";
 import type { SeriesId, HighlightItemIdentifierWithType } from "../../models/seriesType/index.js";
 import type { HighlightState } from "../../hooks/useItemHighlightState.js";
 interface GetPathPropsParams {
   seriesId: SeriesId;
-  classes: RadarSeriesPlotClasses;
+  classes: RadarClasses;
   getHighlightState: (item: HighlightItemIdentifierWithType<'radar'> | null) => HighlightState;
   points: {
     x: number;

package/RadarChart/RadarSeriesPlot/RadarSeriesArea.js

@@ -11,15 +11,14 @@ 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 _clsx = _interopRequireDefault(require("clsx"));
 var _useRadarSeriesData = require("./useRadarSeriesData");
 var _getAreaPath = require("./getAreaPath");
-var _radarSeriesPlotClasses = require("./radarSeriesPlotClasses");
+var _radarClasses = require("../radarClasses");
 var _useItemHighlightStateGetter = require("../../hooks/useItemHighlightStateGetter");
 var _useInteractionAllItemProps = require("./useInteractionAllItemProps");
 var _useRadarRotationIndex = require("./useRadarRotationIndex");
 var _jsxRuntime = require("react/jsx-runtime");
-const _excluded = ["seriesId", "onItemClick"];
+const _excluded = ["seriesId", "onItemClick", "classes"];
 function getPathProps(params) {
   const {
     getHighlightState,
@@ -39,7 +38,7 @@ function getPathProps(params) {
     d: (0, _getAreaPath.getAreaPath)(points),
     fill: fillArea ? color : 'transparent',
     stroke: color,
-    className: (0, _clsx.default)(classes.area, isItemHighlighted && classes.highlighted || isItemFaded && classes.faded),
+    className: classes.seriesArea,
     strokeOpacity: isItemFaded ? 0.5 : 1,
     fillOpacity: isItemHighlighted && 0.4 || isItemFaded && 0.1 || 0.2,
     strokeWidth: !fillArea && isItemHighlighted ? 2 : 1,
@@ -50,14 +49,15 @@ function getPathProps(params) {
 function RadarSeriesArea(props) {
   const {
       seriesId,
-      onItemClick
+      onItemClick,
+      classes: inClasses
     } = props,
     other = (0, _objectWithoutPropertiesLoose2.default)(props, _excluded);
   const seriesCoordinates = (0, _useRadarSeriesData.useRadarSeriesData)(seriesId);
   const getRotationIndex = (0, _useRadarRotationIndex.useRadarRotationIndex)();
   const interactionProps = (0, _useInteractionAllItemProps.useInteractionAllItemProps)(seriesCoordinates);
   const getHighlightState = (0, _useItemHighlightStateGetter.useItemHighlightStateGetter)();
-  const classes = (0, _radarSeriesPlotClasses.useUtilityClasses)(props.classes);
+  const classes = (0, _radarClasses.useUtilityClasses)(inClasses);
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(React.Fragment, {
     children: seriesCoordinates?.map(({
       seriesId: id,

package/RadarChart/RadarSeriesPlot/RadarSeriesArea.mjs

@@ -1,12 +1,11 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
-const _excluded = ["seriesId", "onItemClick"];
+const _excluded = ["seriesId", "onItemClick", "classes"];
 import * as React from 'react';
 import PropTypes from 'prop-types';
-import clsx from 'clsx';
 import { useRadarSeriesData } from "./useRadarSeriesData.mjs";
 import { getAreaPath } from "./getAreaPath.mjs";
-import { useUtilityClasses } from "./radarSeriesPlotClasses.mjs";
+import { useUtilityClasses } from "../radarClasses.mjs";
 import { useItemHighlightStateGetter } from "../../hooks/useItemHighlightStateGetter.mjs";
 import { useInteractionAllItemProps } from "./useInteractionAllItemProps.mjs";
 import { useRadarRotationIndex } from "./useRadarRotationIndex.mjs";
@@ -30,7 +29,7 @@ export function getPathProps(params) {
     d: getAreaPath(points),
     fill: fillArea ? color : 'transparent',
     stroke: color,
-    className: clsx(classes.area, isItemHighlighted && classes.highlighted || isItemFaded && classes.faded),
+    className: classes.seriesArea,
     strokeOpacity: isItemFaded ? 0.5 : 1,
     fillOpacity: isItemHighlighted && 0.4 || isItemFaded && 0.1 || 0.2,
     strokeWidth: !fillArea && isItemHighlighted ? 2 : 1,
@@ -41,14 +40,15 @@ export function getPathProps(params) {
 function RadarSeriesArea(props) {
   const {
       seriesId,
-      onItemClick
+      onItemClick,
+      classes: inClasses
     } = props,
     other = _objectWithoutPropertiesLoose(props, _excluded);
   const seriesCoordinates = useRadarSeriesData(seriesId);
   const getRotationIndex = useRadarRotationIndex();
   const interactionProps = useInteractionAllItemProps(seriesCoordinates);
   const getHighlightState = useItemHighlightStateGetter();
-  const classes = useUtilityClasses(props.classes);
+  const classes = useUtilityClasses(inClasses);
   return /*#__PURE__*/_jsx(React.Fragment, {
     children: seriesCoordinates?.map(({
       seriesId: id,

package/RadarChart/RadarSeriesPlot/RadarSeriesMarks.d.mts

@@ -1,12 +1,11 @@
-import * as React from 'react';
 import { type RadarSeriesMarksProps } from "./RadarSeriesPlot.types.mjs";
-import { type RadarSeriesPlotClasses } from "./radarSeriesPlotClasses.mjs";
+import { type RadarClasses } from "../radarClasses.mjs";
 import { type SeriesId } from "../../models/seriesType/common.mjs";
 import type { HighlightItemIdentifierWithType } from "../../models/index.mjs";
 import type { HighlightState } from "../../hooks/useItemHighlightState.mjs";
 interface GetCirclePropsParams {
   seriesId: SeriesId;
-  classes: RadarSeriesPlotClasses;
+  classes: RadarClasses;
   getHighlightState: (item: HighlightItemIdentifierWithType<'radar'> | null) => HighlightState;
   point: {
     x: number;
@@ -15,7 +14,17 @@ interface GetCirclePropsParams {
   fillArea?: boolean;
   color: string;
 }
-export declare function getCircleProps(params: GetCirclePropsParams): React.SVGProps<SVGCircleElement>;
+export declare function getCircleProps(params: GetCirclePropsParams): {
+  cx: number;
+  cy: number;
+  r: number;
+  fill: string;
+  stroke: string;
+  opacity: number;
+  className: string;
+  'data-highlighted': true | undefined;
+  'data-faded': true | undefined;
+};
 declare function RadarSeriesMarks(props: RadarSeriesMarksProps): import("react/jsx-runtime").JSX.Element;
 declare namespace RadarSeriesMarks {
   var propTypes: any;

package/RadarChart/RadarSeriesPlot/RadarSeriesMarks.d.ts

@@ -1,12 +1,11 @@
-import * as React from 'react';
 import { type RadarSeriesMarksProps } from "./RadarSeriesPlot.types.js";
-import { type RadarSeriesPlotClasses } from "./radarSeriesPlotClasses.js";
+import { type RadarClasses } from "../radarClasses.js";
 import { type SeriesId } from "../../models/seriesType/common.js";
 import type { HighlightItemIdentifierWithType } from "../../models/index.js";
 import type { HighlightState } from "../../hooks/useItemHighlightState.js";
 interface GetCirclePropsParams {
   seriesId: SeriesId;
-  classes: RadarSeriesPlotClasses;
+  classes: RadarClasses;
   getHighlightState: (item: HighlightItemIdentifierWithType<'radar'> | null) => HighlightState;
   point: {
     x: number;
@@ -15,7 +14,17 @@ interface GetCirclePropsParams {
   fillArea?: boolean;
   color: string;
 }
-export declare function getCircleProps(params: GetCirclePropsParams): React.SVGProps<SVGCircleElement>;
+export declare function getCircleProps(params: GetCirclePropsParams): {
+  cx: number;
+  cy: number;
+  r: number;
+  fill: string;
+  stroke: string;
+  opacity: number;
+  className: string;
+  'data-highlighted': true | undefined;
+  'data-faded': true | undefined;
+};
 declare function RadarSeriesMarks(props: RadarSeriesMarksProps): import("react/jsx-runtime").JSX.Element;
 declare namespace RadarSeriesMarks {
   var propTypes: any;

package/RadarChart/RadarSeriesPlot/RadarSeriesMarks.js

@@ -10,13 +10,12 @@ exports.getCircleProps = getCircleProps;
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutPropertiesLoose"));
 var React = _interopRequireWildcard(require("react"));
-var _clsx = require("clsx");
 var _propTypes = _interopRequireDefault(require("prop-types"));
 var _useRadarSeriesData = require("./useRadarSeriesData");
+var _radarClasses = require("../radarClasses");
 var _useItemHighlightStateGetter = require("../../hooks/useItemHighlightStateGetter");
-var _radarSeriesPlotClasses = require("./radarSeriesPlotClasses");
 var _jsxRuntime = require("react/jsx-runtime");
-const _excluded = ["seriesId", "onItemClick"];
+const _excluded = ["seriesId", "onItemClick", "classes"];
 function getCircleProps(params) {
   const {
     getHighlightState,
@@ -39,16 +38,19 @@ function getCircleProps(params) {
     fill: color,
     stroke: color,
     opacity: fillArea && isItemFaded ? 0.5 : 1,
-    className: (0, _clsx.clsx)(classes.mark, isItemHighlighted && classes.highlighted || isItemFaded && classes.faded)
+    className: classes.seriesMark,
+    'data-highlighted': isItemHighlighted || undefined,
+    'data-faded': isItemFaded || undefined
   };
 }
 function RadarSeriesMarks(props) {
   const {
-      onItemClick
+      onItemClick,
+      classes: inClasses
     } = props,
     other = (0, _objectWithoutPropertiesLoose2.default)(props, _excluded);
   const seriesCoordinates = (0, _useRadarSeriesData.useRadarSeriesData)(props.seriesId);
-  const classes = (0, _radarSeriesPlotClasses.useUtilityClasses)(props.classes);
+  const classes = (0, _radarClasses.useUtilityClasses)(inClasses);
   const getHighlightState = (0, _useItemHighlightStateGetter.useItemHighlightStateGetter)();
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(React.Fragment, {
     children: seriesCoordinates?.map(({