@mantine/charts 8.3.13 → 9.0.0-alpha.0

package/lib/ChartTooltip/ChartTooltip.d.ts

@@ -1,15 +1,15 @@
 import { BoxProps, ElementProps, Factory, StylesApiProps } from '@mantine/core';
 import { ChartSeries } from '../types';
-export declare function getFilteredChartTooltipPayload(payload: Record<string, any>[], segmentId?: string): Record<string, any>[];
+export declare function getFilteredChartTooltipPayload(payload: readonly Record<string, any>[] | Record<string, any>[], segmentId?: string): Record<string, any>[];
 export type ChartTooltipStylesNames = 'tooltip' | 'tooltipItem' | 'tooltipItemBody' | 'tooltipItemColor' | 'tooltipItemName' | 'tooltipItemData' | 'tooltipLabel' | 'tooltipBody';
 export interface ChartTooltipProps extends BoxProps, StylesApiProps<ChartTooltipFactory>, ElementProps<'div'> {
     /** Main tooltip label */
     label?: React.ReactNode;
     /** Chart data provided by recharts */
-    payload: Record<string, any>[] | undefined;
+    payload: readonly Record<string, any>[] | Record<string, any>[] | undefined;
     /** Data units, provided by parent component */
     unit?: string;
-    /** Tooltip type that determines the content and styles, `area` for LineChart, AreaChart and BarChart, `radial` for DonutChart and PieChart @default `'area'` */
+    /** Tooltip type that determines the content and styles, `area` for LineChart, AreaChart and BarChart, `radial` for DonutChart and PieChart @default 'area' */
     type?: 'area' | 'radial' | 'scatter';
     /** Id of the segment to display data for. Only applicable when `type="radial"`. If not set, all data is rendered. */
     segmentId?: string;
@@ -17,7 +17,7 @@ export interface ChartTooltipProps extends BoxProps, StylesApiProps<ChartTooltip
     series?: ChartSeries[];
     /** A function to format values */
     valueFormatter?: (value: number) => string;
-    /** Determines whether the color swatch should be visible @default `true` */
+    /** Determines whether the color swatch should be visible @default true */
     showColor?: boolean;
 }
 export type ChartTooltipFactory = Factory<{

package/lib/CompositeChart/CompositeChart.d.ts

@@ -17,17 +17,17 @@ export interface CompositeChartProps extends BoxProps, Omit<GridChartBaseProps,
     data: Record<string, any>[];
     /** An array of objects with `name` and `color` keys. Determines which data should be consumed from the `data` array. */
     series: CompositeChartSeries[];
-    /** Type of the curve @default `'monotone'` */
+    /** Type of the curve @default 'monotone' */
     curveType?: CompositeChartCurveType;
-    /** Determines whether dots should be displayed @default `true` */
+    /** Determines whether dots should be displayed @default true */
     withDots?: boolean;
     /** Props passed down to all dots. Ignored if `withDots={false}` is set. */
     dotProps?: MantineChartDotProps;
     /** Props passed down to all active dots. Ignored if `withDots={false}` is set. */
     activeDotProps?: MantineChartDotProps;
-    /** Stroke width for the chart lines @default `2` */
+    /** Stroke width for the chart lines @default 2 */
     strokeWidth?: number;
-    /** Determines whether points with `null` values should be connected @default `true` */
+    /** Determines whether points with `null` values should be connected @default true */
     connectNulls?: boolean;
     /** Additional components that are rendered inside recharts `AreaChart` component */
     children?: React.ReactNode;
@@ -37,16 +37,16 @@ export interface CompositeChartProps extends BoxProps, Omit<GridChartBaseProps,
     areaProps?: ((series: CompositeChartSeries) => Partial<Omit<AreaProps, 'ref'>>) | Partial<Omit<AreaProps, 'ref'>>;
     /** Props passed down to recharts `Bar` component */
     barProps?: ((series: CompositeChartSeries) => Partial<Omit<BarProps, 'ref'>>) | Partial<Omit<BarProps, 'ref'>>;
-    /** Determines whether each point should have associated label @default `false` */
+    /** Determines whether each point should have associated label @default false */
     withPointLabels?: boolean;
-    /** Determines whether a label with bar value should be displayed on top of each bar @default `false` */
+    /** Determines whether a label with bar value should be displayed on top of each bar @default false */
     withBarValueLabel?: boolean;
-    /** Sets minimum height of the bar in px @default `0` */
+    /** Sets minimum height of the bar in px @default 0 */
     minBarSize?: number;
     /** Maximum bar width in px */
     maxBarWidth?: number;
     /** Props passed down to recharts `AreaChart` component */
-    composedChartProps?: React.ComponentPropsWithoutRef<typeof ReChartsCompositeChart>;
+    composedChartProps?: React.ComponentProps<typeof ReChartsCompositeChart>;
 }
 export type CompositeChartFactory = Factory<{
     props: CompositeChartProps;

package/lib/CompositeChart/index.d.ts

@@ -1,2 +1,11 @@
+import type { CompositeChartCssVariables, CompositeChartCurveType, CompositeChartFactory, CompositeChartProps, CompositeChartSeries, CompositeChartStylesNames } from './CompositeChart';
 export { CompositeChart } from './CompositeChart';
-export type { CompositeChartCssVariables, CompositeChartCurveType, CompositeChartFactory, CompositeChartProps, CompositeChartSeries, CompositeChartStylesNames, } from './CompositeChart';
+export type { CompositeChartProps, CompositeChartStylesNames, CompositeChartCssVariables, CompositeChartFactory, CompositeChartSeries, CompositeChartCurveType, };
+export declare namespace CompositeChart {
+    type Props = CompositeChartProps;
+    type StylesNames = CompositeChartStylesNames;
+    type CssVariables = CompositeChartCssVariables;
+    type Factory = CompositeChartFactory;
+    type Series = CompositeChartSeries;
+    type CurveType = CompositeChartCurveType;
+}

package/lib/DonutChart/DonutChart.d.ts

@@ -13,9 +13,9 @@ export type DonutChartCssVariables = {
 export interface DonutChartProps extends BoxProps, StylesApiProps<DonutChartFactory>, ElementProps<'div'> {
     /** Data used to render chart */
     data: DonutChartCell[];
-    /** Determines whether the tooltip should be displayed when one of the section is hovered @default `true` */
+    /** Determines whether the tooltip should be displayed when one of the section is hovered @default true */
     withTooltip?: boolean;
-    /** Tooltip animation duration in ms @default `0` */
+    /** Tooltip animation duration in ms @default 0 */
     tooltipAnimationDuration?: number;
     /** Props passed down to `Tooltip` recharts component */
     tooltipProps?: Omit<TooltipProps<any, any>, 'ref'>;
@@ -25,30 +25,30 @@ export interface DonutChartProps extends BoxProps, StylesApiProps<DonutChartFact
     strokeColor?: MantineColor;
     /** Controls text color of all labels, by default depends on color scheme */
     labelColor?: MantineColor;
-    /** Controls padding between segments @default `0` */
+    /** Controls padding between segments @default 0 */
     paddingAngle?: number;
-    /** Determines whether each segment should have associated label @default `false` */
+    /** Determines whether each segment should have associated label @default false */
     withLabels?: boolean;
-    /** Determines whether segments labels should have lines that connect the segment with the label @default `true` */
+    /** Determines whether segments labels should have lines that connect the segment with the label @default true */
     withLabelsLine?: boolean;
-    /** Controls thickness of the chart segments @default `20` */
+    /** Controls thickness of the chart segments @default 20 */
     thickness?: number;
-    /** Controls chart width and height, height is increased by 40 if `withLabels` prop is set. Cannot be less than `thickness`. @default `80` */
+    /** Controls chart width and height, height is increased by 40 if `withLabels` prop is set. Cannot be less than `thickness`. @default 80 */
     size?: number;
-    /** Controls width of segments stroke @default `1` */
+    /** Controls width of segments stroke @default 1 */
     strokeWidth?: number;
-    /** Controls angle at which chart starts. Set to `180` to render the chart as semicircle. @default `0` */
+    /** Controls angle at which chart starts. Set to `180` to render the chart as semicircle. @default 0 */
     startAngle?: number;
-    /** Controls angle at which charts ends. Set to `0` to render the chart as semicircle. @default `360` */
+    /** Controls angle at which charts ends. Set to `0` to render the chart as semicircle. @default 360 */
     endAngle?: number;
-    /** Determines which data is displayed in the tooltip. `'all'` – display all values, `'segment'` – display only hovered segment. @default `'all'` */
+    /** Determines which data is displayed in the tooltip. `'all'` – display all values, `'segment'` – display only hovered segment. @default 'all' */
     tooltipDataSource?: 'segment' | 'all';
     /** Chart label, displayed in the center of the chart */
     chartLabel?: string | number;
     /** Additional elements rendered inside `PieChart` component */
     children?: React.ReactNode;
     /** Props passed down to recharts `PieChart` component */
-    pieChartProps?: React.ComponentPropsWithoutRef<typeof ReChartsPieChart>;
+    pieChartProps?: React.ComponentProps<typeof ReChartsPieChart>;
     /** Type of labels to display, `'value'` by default */
     labelsType?: 'value' | 'percent';
     /** A function to format values inside the tooltip */

package/lib/DonutChart/index.d.ts

@@ -1,2 +1,10 @@
+import type { DonutChartCell, DonutChartCssVariables, DonutChartFactory, DonutChartProps, DonutChartStylesNames } from './DonutChart';
 export { DonutChart } from './DonutChart';
-export type { DonutChartCssVariables, DonutChartFactory, DonutChartProps, DonutChartStylesNames, DonutChartCell, } from './DonutChart';
+export type { DonutChartProps, DonutChartStylesNames, DonutChartFactory, DonutChartCssVariables, DonutChartCell, };
+export declare namespace DonutChart {
+    type Props = DonutChartProps;
+    type StylesNames = DonutChartStylesNames;
+    type Factory = DonutChartFactory;
+    type CssVariables = DonutChartCssVariables;
+    type Cell = DonutChartCell;
+}

package/lib/FunnelChart/FunnelChart.d.ts

@@ -14,9 +14,9 @@ export type FunnelChartCssVariables = {
 export interface FunnelChartProps extends BoxProps, StylesApiProps<FunnelChartFactory>, ElementProps<'div'> {
     /** Data used to render chart */
     data: FunnelChartCell[];
-    /** Determines whether the tooltip should be displayed when a section is hovered @default `true` */
+    /** Determines whether the tooltip should be displayed when a section is hovered @default true */
     withTooltip?: boolean;
-    /** Tooltip animation duration in ms @default `0` */
+    /** Tooltip animation duration in ms @default 0 */
     tooltipAnimationDuration?: number;
     /** Props passed down to `Tooltip` recharts component */
     tooltipProps?: Omit<TooltipProps<any, any>, 'ref'>;
@@ -24,24 +24,24 @@ export interface FunnelChartProps extends BoxProps, StylesApiProps<FunnelChartFa
     funnelProps?: Partial<Omit<FunnelProps, 'ref'>>;
     /** Controls color of the segments stroke, by default depends on color scheme */
     strokeColor?: MantineColor;
-    /** Controls text color of all labels @default `'white'` */
+    /** Controls text color of all labels @default 'white' */
     labelColor?: MantineColor;
-    /** Controls chart width and height @default `300` */
+    /** Controls chart width and height @default 300 */
     size?: number;
-    /** Controls width of segments stroke @default `1` */
+    /** Controls width of segments stroke @default 1 */
     strokeWidth?: number;
-    /** Determines whether each segment should have associated label @default `false` */
+    /** Determines whether each segment should have associated label @default false */
     withLabels?: boolean;
-    /** Controls labels position relative to the segment @default `'right'` */
+    /** Controls labels position relative to the segment @default 'right' */
     labelsPosition?: 'right' | 'left' | 'inside';
     /** A function to format values inside the tooltip and labels */
     valueFormatter?: (value: number) => string;
-    /** Determines which data is displayed in the tooltip. `'all'` – display all values, `'segment'` – display only hovered segment. @default `'all'` */
+    /** Determines which data is displayed in the tooltip. `'all'` – display all values, `'segment'` – display only hovered segment. @default 'all' */
     tooltipDataSource?: 'segment' | 'all';
     /** Additional elements rendered inside `FunnelChart` component */
     children?: React.ReactNode;
     /** Props passed down to recharts `FunnelChart` component */
-    funnelChartProps?: React.ComponentPropsWithoutRef<typeof RechartsFunnelChart>;
+    funnelChartProps?: React.ComponentProps<typeof RechartsFunnelChart>;
 }
 export type FunnelChartFactory = Factory<{
     props: FunnelChartProps;

package/lib/FunnelChart/index.d.ts

@@ -1,2 +1,10 @@
+import type { FunnelChartCell, FunnelChartCssVariables, FunnelChartFactory, FunnelChartProps, FunnelChartStylesNames } from './FunnelChart';
 export { FunnelChart } from './FunnelChart';
-export type { FunnelChartCssVariables, FunnelChartFactory, FunnelChartProps, FunnelChartStylesNames, FunnelChartCell, } from './FunnelChart';
+export type { FunnelChartProps, FunnelChartStylesNames, FunnelChartFactory, FunnelChartCssVariables, FunnelChartCell, };
+export declare namespace FunnelChart {
+    type Props = FunnelChartProps;
+    type StylesNames = FunnelChartStylesNames;
+    type Factory = FunnelChartFactory;
+    type CssVariables = FunnelChartCssVariables;
+    type Cell = FunnelChartCell;
+}

package/lib/Heatmap/Heatmap.d.ts

@@ -13,15 +13,15 @@ export interface HeatmapProps extends BoxProps, StylesApiProps<HeatmapFactory>,
     startDate?: Date | string;
     /** Heatmap end date. Current date by default. Date is normalized to UTC midnight of the intended calendar day. */
     endDate?: Date | string;
-    /** If set, month labels are displayed @default `false` */
+    /** If set, month labels are displayed @default false */
     withMonthLabels?: boolean;
     /** Month labels, array of 12 elements, can be used for localization */
     monthLabels?: string[];
-    /** If set, weekday labels are displayed @default `false` */
+    /** If set, weekday labels are displayed @default false */
     withWeekdayLabels?: boolean;
     /** Weekday labels, array of 7 elements, can be used for localization */
     weekdayLabels?: string[];
-    /** If set, trailing dates that do not fall into the given `startDate` – `endDate` range are displayed to fill empty space. @default `true` */
+    /** If set, trailing dates that do not fall into the given `startDate` – `endDate` range are displayed to fill empty space. @default true */
     withOutsideDates?: boolean;
     /** First day of week, 0 – Sunday, 1 – Monday. @default 1 – Monday */
     firstDayOfWeek?: 0 | 1 | 2 | 3 | 4 | 5 | 6;
@@ -41,13 +41,13 @@ export interface HeatmapProps extends BoxProps, StylesApiProps<HeatmapFactory>,
     fontSize?: number;
     /** A function to generate tooltip label based on the hovered rect date and value, required for the tooltip to be visible */
     getTooltipLabel?: (input: HeatmapRectData) => React.ReactNode;
-    /** If set, tooltip is displayed on rect hover @default `false` */
+    /** If set, tooltip is displayed on rect hover @default false */
     withTooltip?: boolean;
     /** Props passed down to the `Tooltip.Floating` component */
     tooltipProps?: Partial<TooltipFloatingProps>;
     /** Props passed down to each rect depending on its date and associated value */
-    getRectProps?: (input: HeatmapRectData) => React.ComponentPropsWithoutRef<'rect'>;
-    /** If set, inserts a spacer column between months @default `false` */
+    getRectProps?: (input: HeatmapRectData) => React.ComponentProps<'rect'>;
+    /** If set, inserts a spacer column between months @default false */
     splitMonths?: boolean;
 }
 export type HeatmapFactory = Factory<{

package/lib/Heatmap/HeatmapWeeks.types.d.ts

@@ -24,7 +24,7 @@ export interface HeatmapWeeksSharedProps {
     /** Function to set hovered rect state */
     setHoveredRect: (rect: HeatmapRectData | null) => void;
     /** Props passed down to each rect depending on its date and associated value */
-    getRectProps?: (input: HeatmapRectData) => React.ComponentPropsWithoutRef<'rect'>;
+    getRectProps?: (input: HeatmapRectData) => React.ComponentProps<'rect'>;
     /** Styles API getter - function that returns styles for a given selector */
     getStyles: (selector: HeatmapStylesNames) => Record<string, any>;
 }

package/lib/Heatmap/index.d.ts

@@ -1,2 +1,8 @@
+import type { HeatmapFactory, HeatmapProps, HeatmapStylesNames } from './Heatmap';
 export { Heatmap } from './Heatmap';
-export type { HeatmapProps, HeatmapFactory, HeatmapStylesNames } from './Heatmap';
+export type { HeatmapProps, HeatmapStylesNames, HeatmapFactory };
+export declare namespace Heatmap {
+    type Props = HeatmapProps;
+    type StylesNames = HeatmapStylesNames;
+    type Factory = HeatmapFactory;
+}

package/lib/LineChart/LineChart.d.ts

@@ -22,31 +22,31 @@ export interface LineChartProps extends BoxProps, GridChartBaseProps, StylesApiP
     data: Record<string, any>[];
     /** An array of objects with `name` and `color` keys. Determines which data should be consumed from the `data` array. */
     series: LineChartSeries[];
-    /** Controls styles of the line @default `'default'` */
+    /** Controls styles of the line @default 'default' */
     type?: LineChartType;
-    /** Data used to generate gradient stops @default `[{ offset: 0, color: 'red' }, { offset: 100, color: 'blue' }]` */
+    /** Data used to generate gradient stops @default [{ offset: 0, color: 'red' }, { offset: 100, color: 'blue' }] */
     gradientStops?: LineChartGradientStop[];
-    /** Type of the curve @default `'monotone'` */
+    /** Type of the curve @default 'monotone' */
     curveType?: LineChartCurveType;
-    /** Controls fill opacity of all lines @default `1` */
+    /** Controls fill opacity of all lines @default 1 */
     fillOpacity?: number;
-    /** Determines whether dots should be displayed @default `true` */
+    /** Determines whether dots should be displayed @default true */
     withDots?: boolean;
     /** Props passed down to all dots. Ignored if `withDots={false}` is set. */
     dotProps?: MantineChartDotProps;
     /** Props passed down to all active dots. Ignored if `withDots={false}` is set. */
     activeDotProps?: MantineChartDotProps;
-    /** Stroke width for the chart lines @default `2` */
+    /** Stroke width for the chart lines @default 2 */
     strokeWidth?: number;
     /** Props passed down to recharts `LineChart` component */
-    lineChartProps?: React.ComponentPropsWithoutRef<typeof ReChartsLineChart>;
-    /** Determines whether points with `null` values should be connected @default `true` */
+    lineChartProps?: React.ComponentProps<typeof ReChartsLineChart>;
+    /** Determines whether points with `null` values should be connected @default true */
     connectNulls?: boolean;
     /** Additional components that are rendered inside recharts `LineChart` component */
     children?: React.ReactNode;
     /** Props passed down to recharts `Line` component */
     lineProps?: ((series: LineChartSeries) => Partial<Omit<LineProps, 'ref'>>) | Partial<Omit<LineProps, 'ref'>>;
-    /** Determines whether each point should have associated label @default `false` */
+    /** Determines whether each point should have associated label @default false */
     withPointLabels?: boolean;
 }
 export type LineChartFactory = Factory<{

package/lib/LineChart/index.d.ts

@@ -1,2 +1,11 @@
+import type { LineChartCssVariables, LineChartCurveType, LineChartFactory, LineChartProps, LineChartSeries, LineChartStylesNames } from './LineChart';
 export { LineChart } from './LineChart';
-export type { LineChartProps, LineChartCssVariables, LineChartFactory, LineChartSeries, LineChartStylesNames, LineChartCurveType, } from './LineChart';
+export type { LineChartProps, LineChartCssVariables, LineChartFactory, LineChartSeries, LineChartStylesNames, LineChartCurveType, };
+export declare namespace LineChart {
+    type Props = LineChartProps;
+    type CssVariables = LineChartCssVariables;
+    type Factory = LineChartFactory;
+    type Series = LineChartSeries;
+    type StylesNames = LineChartStylesNames;
+    type CurveType = LineChartCurveType;
+}

package/lib/PieChart/PieChart.d.ts

@@ -14,9 +14,9 @@ export type PieChartCssVariables = {
 export interface PieChartProps extends BoxProps, StylesApiProps<PieChartFactory>, ElementProps<'div'> {
     /** Data used to render chart */
     data: PieChartCell[];
-    /** Determines whether the tooltip should be displayed when one of the section is hovered @default `true` */
+    /** Determines whether the tooltip should be displayed when one of the section is hovered @default true */
     withTooltip?: boolean;
-    /** Tooltip animation duration in ms @default `0` */
+    /** Tooltip animation duration in ms @default 0 */
     tooltipAnimationDuration?: number;
     /** Props passed down to `Tooltip` recharts component */
     tooltipProps?: Omit<TooltipProps<any, any>, 'ref'>;
@@ -26,29 +26,29 @@ export interface PieChartProps extends BoxProps, StylesApiProps<PieChartFactory>
     strokeColor?: MantineColor;
     /** Controls text color of all labels, white by default */
     labelColor?: MantineColor;
-    /** Controls padding between segments @default `0` */
+    /** Controls padding between segments @default 0 */
     paddingAngle?: number;
-    /** Determines whether each segment should have associated label @default `false` */
+    /** Determines whether each segment should have associated label @default false */
     withLabels?: boolean;
-    /** Determines whether segments labels should have lines that connect the segment with the label @default `true` */
+    /** Determines whether segments labels should have lines that connect the segment with the label @default true */
     withLabelsLine?: boolean;
-    /** Controls chart width and height, height is increased by 40 if `withLabels` prop is set. Cannot be less than `thickness`. @default `80` */
+    /** Controls chart width and height, height is increased by 40 if `withLabels` prop is set. Cannot be less than `thickness`. @default 80 */
     size?: number;
-    /** Controls width of segments stroke @default `1` */
+    /** Controls width of segments stroke @default 1 */
     strokeWidth?: number;
-    /** Controls angle at which chart starts. Set to `180` to render the chart as semicircle. @default `0` */
+    /** Controls angle at which chart starts. Set to `180` to render the chart as semicircle. @default 0 */
     startAngle?: number;
-    /** Controls angle at which charts ends. Set to `0` to render the chart as semicircle. @default `360` */
+    /** Controls angle at which charts ends. Set to `0` to render the chart as semicircle. @default 360 */
     endAngle?: number;
-    /** Determines which data is displayed in the tooltip. `'all'` – display all values, `'segment'` – display only hovered segment. @default `'all'` */
+    /** Determines which data is displayed in the tooltip. `'all'` – display all values, `'segment'` – display only hovered segment. @default 'all' */
     tooltipDataSource?: 'segment' | 'all';
     /** Additional elements rendered inside `PieChart` component */
     children?: React.ReactNode;
     /** Props passed down to recharts `PieChart` component */
-    pieChartProps?: React.ComponentPropsWithoutRef<typeof ReChartsPieChart>;
-    /** Controls labels position relative to the segment @default `'outside'` */
+    pieChartProps?: React.ComponentProps<typeof ReChartsPieChart>;
+    /** Controls labels position relative to the segment @default 'outside' */
     labelsPosition?: 'inside' | 'outside';
-    /** Type of labels to display @default `'value'` */
+    /** Type of labels to display @default 'value' */
     labelsType?: 'value' | 'percent';
     /** A function to format values inside the tooltip */
     valueFormatter?: (value: number) => string;

package/lib/PieChart/index.d.ts

@@ -1,2 +1,10 @@
+import type { PieChartCell, PieChartCssVariables, PieChartFactory, PieChartProps, PieChartStylesNames } from './PieChart';
 export { PieChart } from './PieChart';
-export type { PieChartCssVariables, PieChartFactory, PieChartProps, PieChartStylesNames, PieChartCell, } from './PieChart';
+export type { PieChartProps, PieChartStylesNames, PieChartCssVariables, PieChartFactory, PieChartCell, };
+export declare namespace PieChart {
+    type Props = PieChartProps;
+    type StylesNames = PieChartStylesNames;
+    type CssVariables = PieChartCssVariables;
+    type Factory = PieChartFactory;
+    type Cell = PieChartCell;
+}

package/lib/RadarChart/RadarChart.d.ts

@@ -25,18 +25,18 @@ export interface RadarChartProps extends BoxProps, StylesApiProps<RadarChartFact
     gridColor?: MantineColor;
     /** Controls color of all text elements. By default, color depends on the color scheme. */
     textColor?: MantineColor;
-    /** Determines whether PolarGrid component should be displayed @default `true`. */
+    /** Determines whether PolarGrid component should be displayed @default true. */
     withPolarGrid?: boolean;
-    /** Determines whether PolarAngleAxis component should be displayed @default `true` */
+    /** Determines whether PolarAngleAxis component should be displayed @default true */
     withPolarAngleAxis?: boolean;
-    /** Determines whether PolarRadiusAxisProps component should be displayed @default `false` */
+    /** Determines whether PolarRadiusAxisProps component should be displayed @default false */
     withPolarRadiusAxis?: boolean;
-    /** Determines whether Tooltip component should be displayed @default `false` */
+    /** Determines whether Tooltip component should be displayed @default false */
     withTooltip?: boolean;
     /** Props passed down to recharts Radar component */
     radarProps?: ((series: RadarChartSeries) => Partial<Omit<RadarProps, 'ref'>>) | Partial<Omit<RadarProps, 'ref'>>;
     /** Props passed down to recharts RadarChart component */
-    radarChartProps?: React.ComponentPropsWithoutRef<typeof ReChartsRadarChart>;
+    radarChartProps?: React.ComponentProps<typeof ReChartsRadarChart>;
     /** Props passed down to recharts PolarGrid component */
     polarGridProps?: Omit<PolarGridProps, 'ref'>;
     /** Props passed down to recharts PolarAngleAxis component */
@@ -47,11 +47,11 @@ export interface RadarChartProps extends BoxProps, StylesApiProps<RadarChartFact
     legendProps?: Omit<LegendProps, 'ref'>;
     /** Props passed down to recharts Tooltip component */
     tooltipProps?: Omit<TooltipProps<any, any>, 'ref'>;
-    /** Tooltip position animation duration in ms @default `0` */
+    /** Tooltip position animation duration in ms @default 0 */
     tooltipAnimationDuration?: number;
-    /** Determines whether the legend should be displayed @default `false` */
+    /** Determines whether the legend should be displayed @default false */
     withLegend?: boolean;
-    /** Determines whether dots should be displayed @default `false` */
+    /** Determines whether dots should be displayed @default false */
     withDots?: boolean;
     /** Props passed down to all dots. Ignored if `withDots={false}` is set. */
     dotProps?: MantineChartDotProps;

package/lib/RadarChart/index.d.ts

@@ -1,2 +1,10 @@
+import type { RadarChartCssVariables, RadarChartFactory, RadarChartProps, RadarChartSeries, RadarChartStylesNames } from './RadarChart';
 export { RadarChart } from './RadarChart';
-export type { RadarChartProps, RadarChartCssVariables, RadarChartFactory, RadarChartStylesNames, RadarChartSeries, } from './RadarChart';
+export type { RadarChartProps, RadarChartStylesNames, RadarChartCssVariables, RadarChartFactory, RadarChartSeries, };
+export declare namespace RadarChart {
+    type Props = RadarChartProps;
+    type StylesNames = RadarChartStylesNames;
+    type CssVariables = RadarChartCssVariables;
+    type Factory = RadarChartFactory;
+    type Series = RadarChartSeries;
+}

package/lib/RadialBarChart/RadialBarChart.d.ts

@@ -12,24 +12,24 @@ export interface RadialBarChartProps extends BoxProps, StylesApiProps<RadialBarC
     dataKey: string;
     /** Size of bars in px, `20` by default */
     barSize?: number;
-    /** Determines whether empty bars area should be visible @default `true` */
+    /** Determines whether empty bars area should be visible @default true */
     withBackground?: boolean;
-    /** Determines whether labels should be displayed @default `false` */
+    /** Determines whether labels should be displayed @default false */
     withLabels?: boolean;
-    /** Determines whether the legend should be displayed @default `false` */
+    /** Determines whether the legend should be displayed @default false */
     withLegend?: boolean;
-    /** Determines whether the tooltip should be displayed when one of the bars is hovered @default `true` */
+    /** Determines whether the tooltip should be displayed when one of the bars is hovered @default true */
     withTooltip?: boolean;
     /** Color of the empty background, by default depends on the color scheme */
     emptyBackgroundColor?: string;
-    /** Angle at which chart starts @default `90` */
+    /** Angle at which chart starts @default 90 */
     startAngle?: number;
-    /** Angle at which chart ends @default `-270` */
+    /** Angle at which chart ends @default -270 */
     endAngle?: number;
     /** Props passed down to recharts RadialBar component */
     radialBarProps?: Omit<RadialBarProps, 'ref'>;
     /** Props passed down to recharts RadarChartChart component */
-    radialBarChartProps?: React.ComponentPropsWithoutRef<typeof ReChartsRadialBarChart>;
+    radialBarChartProps?: React.ComponentProps<typeof ReChartsRadialBarChart>;
     /** Props passed down to recharts Legend component */
     legendProps?: Omit<LegendProps, 'ref'>;
     /** Props passed down to `Tooltip` recharts component */

package/lib/RadialBarChart/index.d.ts

@@ -1,2 +1,9 @@
+import type { RadialBarChartCssVariables, RadialBarChartFactory, RadialBarChartProps, RadialBarChartStylesNames } from './RadialBarChart';
 export { RadialBarChart } from './RadialBarChart';
-export type { RadialBarChartCssVariables, RadialBarChartFactory, RadialBarChartProps, RadialBarChartStylesNames, } from './RadialBarChart';
+export type { RadialBarChartProps, RadialBarChartStylesNames, RadialBarChartCssVariables, RadialBarChartFactory, };
+export declare namespace RadialBarChart {
+    type Props = RadialBarChartProps;
+    type StylesNames = RadialBarChartStylesNames;
+    type CssVariables = RadialBarChartCssVariables;
+    type Factory = RadialBarChartFactory;
+}

package/lib/ScatterChart/ScatterChart.d.ts

@@ -36,7 +36,7 @@ export interface ScatterChartProps extends Omit<GridChartBaseProps, 'dataKey' |
         y?: GridChartBaseProps['valueFormatter'];
     };
     /** Props passed down to recharts `ScatterChart` component */
-    scatterChartProps?: React.ComponentPropsWithoutRef<typeof ReChartsScatterChart>;
+    scatterChartProps?: React.ComponentProps<typeof ReChartsScatterChart>;
     /** Props passed down to recharts `Scatter` component */
     scatterProps?: Partial<Omit<ScatterProps, 'ref'>>;
     /** If set, displays labels next to points for the given axis */

package/lib/ScatterChart/index.d.ts

@@ -1,2 +1,10 @@
+import type { ScatterChartCssVariables, ScatterChartFactory, ScatterChartProps, ScatterChartSeries, ScatterChartStylesNames } from './ScatterChart';
 export { ScatterChart } from './ScatterChart';
-export type { ScatterChartProps, ScatterChartCssVariables, ScatterChartFactory, ScatterChartStylesNames, ScatterChartSeries, } from './ScatterChart';
+export type { ScatterChartProps, ScatterChartStylesNames, ScatterChartCssVariables, ScatterChartFactory, ScatterChartSeries, };
+export declare namespace ScatterChart {
+    type Props = ScatterChartProps;
+    type StylesNames = ScatterChartStylesNames;
+    type CssVariables = ScatterChartCssVariables;
+    type Factory = ScatterChartFactory;
+    type Series = ScatterChartSeries;
+}

package/lib/Sparkline/Sparkline.d.ts

@@ -13,19 +13,19 @@ export type SparklineCssVariables = {
 export interface SparklineProps extends BoxProps, StylesApiProps<SparklineFactory>, ElementProps<'div'> {
     /** Data used to render the chart */
     data: (number | null)[];
-    /** Key of `theme.colors` or any valid CSS color @default `theme.primaryColor` */
+    /** Key of `theme.colors` or any valid CSS color @default theme.primaryColor */
     color?: MantineColor;
-    /** Determines whether the chart fill should be a gradient @default `true` */
+    /** Determines whether the chart fill should be a gradient @default true */
     withGradient?: boolean;
-    /** Controls fill opacity of the area @default `0.6` */
+    /** Controls fill opacity of the area @default 0.6 */
     fillOpacity?: number;
-    /** Type of the curve @default `'linear'` */
+    /** Type of the curve @default 'linear' */
     curveType?: AreaChartCurveType;
-    /** Area stroke width @default `2` */
+    /** Area stroke width @default 2 */
     strokeWidth?: number;
     /** If set, `color` prop is ignored and chart color is determined by the difference between first and last value. */
     trendColors?: SparklineTrendColors;
-    /** Determines whether null values should be connected with other values @default `true` */
+    /** Determines whether null values should be connected with other values @default true */
     connectNulls?: boolean;
     /** Props passed down to the underlying recharts `Area` component */
     areaProps?: Omit<AreaProps, 'data' | 'dataKey' | 'ref'>;

package/lib/Sparkline/index.d.ts

@@ -1,2 +1,9 @@
+import type { SparklineCssVariables, SparklineFactory, SparklineProps, SparklineStylesNames } from './Sparkline';
 export { Sparkline } from './Sparkline';
-export type { SparklineCssVariables, SparklineFactory, SparklineProps, SparklineStylesNames, } from './Sparkline';
+export type { SparklineProps, SparklineStylesNames, SparklineCssVariables, SparklineFactory };
+export declare namespace Sparkline {
+    type Props = SparklineProps;
+    type StylesNames = SparklineStylesNames;
+    type CssVariables = SparklineCssVariables;
+    type Factory = SparklineFactory;
+}

package/lib/index.d.mts

@@ -13,4 +13,5 @@ export * from './CompositeChart/index.js';
 export * from './RadialBarChart/index.js';
 export * from './FunnelChart/index.js';
 export * from './Heatmap/index.js';
+export * from './BarsList/index.js';
 export * from './types';

package/lib/index.d.ts

@@ -13,4 +13,5 @@ export * from './CompositeChart/index.js';
 export * from './RadialBarChart/index.js';
 export * from './FunnelChart/index.js';
 export * from './Heatmap/index.js';
+export * from './BarsList/index.js';
 export * from './types';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mantine/charts",
-  "version": "8.3.13",
+  "version": "9.0.0-alpha.0",
   "description": "Charts components built with recharts and Mantine",
   "homepage": "https://mantine.dev/",
   "license": "MIT",
@@ -35,17 +35,17 @@
     "directory": "packages/@mantine/charts"
   },
   "peerDependencies": {
-    "@mantine/core": "8.3.13",
-    "@mantine/hooks": "8.3.13",
+    "@mantine/core": "9.0.0-alpha.0",
+    "@mantine/hooks": "9.0.0-alpha.0",
     "react": "^18.x || ^19.x",
     "react-dom": "^18.x || ^19.x",
-    "recharts": ">=2.13.3"
+    "recharts": ">=3.2.1"
   },
   "devDependencies": {
     "@mantine-tests/core": "workspace:*",
     "@mantine/core": "workspace:*",
     "@mantine/hooks": "workspace:*",
-    "react": "19.1.1",
-    "react-dom": "19.1.1"
+    "react": "19.2.1",
+    "react-dom": "19.2.1"
   }
 }