@mantine/charts 9.4.2 → 9.5.0

package/esm/ScatterChart/ScatterChart.mjs

@@ -4,8 +4,8 @@ import { ChartLegend } from "../ChartLegend/ChartLegend.mjs";
 import grid_chart_module_default from "../grid-chart.module.mjs";
 import { Box, createVarsResolver, factory, getThemeColor, useMantineTheme, useProps, useResolvedStylesApi, useStyles } from "@mantine/core";
 import { jsx, jsxs } from "react/jsx-runtime";
-import { useState } from "react";
 import { CartesianGrid, Label, LabelList, Legend, ReferenceLine, ResponsiveContainer, Scatter, ScatterChart, Tooltip as Tooltip$1, XAxis, YAxis } from "recharts";
+import { useState } from "react";
 //#region packages/@mantine/charts/src/ScatterChart/ScatterChart.tsx
 function getAxis(key, dataKey) {
 	return key === dataKey.x ? "x" : "y";
@@ -17,7 +17,8 @@ const defaultProps = {
 	tooltipAnimationDuration: 0,
 	tickLine: "y",
 	strokeDasharray: "5 5",
-	gridAxis: "x"
+	gridAxis: "x",
+	accessibilityLayer: true
 };
 const varsResolver = createVarsResolver((theme, { textColor, gridColor }) => ({ root: {
 	"--chart-text-color": textColor ? getThemeColor(textColor, theme) : void 0,
@@ -25,7 +26,7 @@ const varsResolver = createVarsResolver((theme, { textColor, gridColor }) => ({
 } }));
 const ScatterChart$1 = factory((_props) => {
 	const props = useProps("ScatterChart", defaultProps, _props);
-	const { classNames, className, style, styles, unstyled, vars, referenceLines, dir, withLegend, withTooltip, withXAxis, withYAxis, xAxisProps, yAxisProps, orientation, scatterChartProps, legendProps, data, gridAxis, tickLine, strokeDasharray, gridProps, tooltipAnimationDuration, tooltipProps, children, onMouseLeave, dataKey, textColor, gridColor, xAxisLabel, yAxisLabel, unit, labels, valueFormatter, scatterProps, pointLabels, attributes, ...others } = props;
+	const { classNames, className, style, styles, unstyled, vars, referenceLines, dir, withLegend, withTooltip, withXAxis, withYAxis, xAxisProps, yAxisProps, orientation, scatterChartProps, legendProps, data, gridAxis, tickLine, strokeDasharray, gridProps, tooltipAnimationDuration, tooltipProps, children, onMouseLeave, dataKey, textColor, gridColor, xAxisLabel, yAxisLabel, unit, labels, valueFormatter, scatterProps, pointLabels, attributes, accessibilityLayer, ...others } = props;
 	const getFormatter = (axis) => typeof valueFormatter === "function" ? valueFormatter : valueFormatter?.[axis];
 	const xFormatter = getFormatter("x");
 	const yFormatter = getFormatter("y");
@@ -106,6 +107,7 @@ const ScatterChart$1 = factory((_props) => {
 					left: yAxisLabel ? 10 : void 0,
 					right: yAxisLabel ? 5 : void 0
 				},
+				accessibilityLayer,
 				...scatterChartProps,
 				children: [
 					/* @__PURE__ */ jsx(CartesianGrid, {

package/esm/ScatterChart/ScatterChart.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"ScatterChart.mjs","names":["ScatterChart","ReChartsScatterChart","Tooltip","classes"],"sources":["../../src/ScatterChart/ScatterChart.tsx"],"sourcesContent":["import { useState } from 'react';\nimport {\n  CartesianGrid,\n  Label,\n  LabelList,\n  Legend,\n  ScatterChart as ReChartsScatterChart,\n  ReferenceLine,\n  ResponsiveContainer,\n  Scatter,\n  ScatterProps,\n  Tooltip,\n  XAxis,\n  YAxis,\n} from 'recharts';\nimport {\n  Box,\n  BoxProps,\n  createVarsResolver,\n  ElementProps,\n  factory,\n  Factory,\n  getThemeColor,\n  MantineColor,\n  StylesApiProps,\n  useMantineTheme,\n  useProps,\n  useResolvedStylesApi,\n  useStyles,\n} from '@mantine/core';\nimport { ChartLegend, ChartLegendStylesNames } from '../ChartLegend';\nimport { ChartTooltip, ChartTooltipStylesNames } from '../ChartTooltip';\nimport { BaseChartStylesNames, GridChartBaseProps } from '../types';\nimport classes from '../grid-chart.module.css';\n\nexport interface ScatterChartSeries {\n  color: MantineColor;\n  name: string;\n  data: Record<string, number>[];\n}\n\nexport type ScatterChartStylesNames =\n  | 'scatter'\n  | BaseChartStylesNames\n  | ChartLegendStylesNames\n  | ChartTooltipStylesNames;\n\nexport type ScatterChartCssVariables = {\n  root: '--chart-text-color' | '--chart-grid-color';\n};\n\nexport interface ScatterChartProps\n  extends\n    Omit<GridChartBaseProps, 'dataKey' | 'data' | 'unit' | 'valueFormatter'>,\n    BoxProps,\n    StylesApiProps<ScatterChartFactory>,\n    ElementProps<'div'> {\n  /** Keys that should be used to retrieve data from the data array on x and y axis */\n  dataKey: { x: string; y: string };\n\n  /** Data that is used to build the chart */\n  data: ScatterChartSeries[];\n\n  /** Units displayed after value on axis and inside the tooltip */\n  unit?: { x?: string; y?: string };\n\n  /** Labels that should be used instead of keys names in the tooltip */\n  labels?: { x?: string; y?: string };\n\n  /** A function to format values on x/y axis and in the tooltip */\n  valueFormatter?:\n    | GridChartBaseProps['valueFormatter']\n    | { x?: GridChartBaseProps['valueFormatter']; y?: GridChartBaseProps['valueFormatter'] };\n\n  /** Props passed down to recharts `ScatterChart` component */\n  scatterChartProps?: React.ComponentProps<typeof ReChartsScatterChart>;\n\n  /** Props passed down to recharts `Scatter` component */\n  scatterProps?: Partial<Omit<ScatterProps, 'ref'>>;\n\n  /** If set, displays labels next to points for the given axis */\n  pointLabels?: 'x' | 'y';\n}\n\nfunction getAxis(key: string, dataKey: { x: string; y: string }) {\n  return key === dataKey.x ? 'x' : 'y';\n}\n\nexport type ScatterChartFactory = Factory<{\n  props: ScatterChartProps;\n  ref: HTMLDivElement;\n  stylesNames: ScatterChartStylesNames;\n  vars: ScatterChartCssVariables;\n}>;\n\nconst defaultProps = {\n  withXAxis: true,\n  withYAxis: true,\n  withTooltip: true,\n  tooltipAnimationDuration: 0,\n  tickLine: 'y',\n  strokeDasharray: '5 5',\n  gridAxis: 'x',\n} satisfies Partial<ScatterChartProps>;\n\nconst varsResolver = createVarsResolver<ScatterChartFactory>((theme, { textColor, gridColor }) => ({\n  root: {\n    '--chart-text-color': textColor ? getThemeColor(textColor, theme) : undefined,\n    '--chart-grid-color': gridColor ? getThemeColor(gridColor, theme) : undefined,\n  },\n}));\n\nexport const ScatterChart = factory<ScatterChartFactory>((_props) => {\n  const props = useProps('ScatterChart', defaultProps, _props);\n  const {\n    classNames,\n    className,\n    style,\n    styles,\n    unstyled,\n    vars,\n    referenceLines,\n    dir,\n    withLegend,\n    withTooltip,\n    withXAxis,\n    withYAxis,\n    xAxisProps,\n    yAxisProps,\n    orientation,\n    scatterChartProps,\n    legendProps,\n    data,\n    gridAxis,\n    tickLine,\n    strokeDasharray,\n    gridProps,\n    tooltipAnimationDuration,\n    tooltipProps,\n    children,\n    onMouseLeave,\n    dataKey,\n    textColor,\n    gridColor,\n    xAxisLabel,\n    yAxisLabel,\n    unit,\n    labels,\n    valueFormatter,\n    scatterProps,\n    pointLabels,\n    attributes,\n    ...others\n  } = props;\n\n  const getFormatter = (axis: 'x' | 'y') =>\n    typeof valueFormatter === 'function' ? valueFormatter : valueFormatter?.[axis];\n  const xFormatter = getFormatter('x');\n  const yFormatter = getFormatter('y');\n\n  const theme = useMantineTheme();\n\n  const mappedData = data.map((item) => ({\n    ...item,\n    data: item.data.map((point) => ({ ...point, name: item.name })),\n  }));\n\n  const { resolvedClassNames, resolvedStyles } = useResolvedStylesApi<ScatterChartFactory>({\n    classNames,\n    styles,\n    props,\n  });\n\n  const getStyles = useStyles<ScatterChartFactory>({\n    name: 'ScatterChart',\n    classes,\n    props,\n    className,\n    style,\n    classNames,\n    styles,\n    unstyled,\n    attributes,\n    vars,\n    varsResolver,\n  });\n\n  const withXTickLine = gridAxis !== 'none' && (tickLine === 'x' || tickLine === 'xy');\n  const withYTickLine = gridAxis !== 'none' && (tickLine === 'y' || tickLine === 'xy');\n  const [highlightedArea, setHighlightedArea] = useState<string | number | null>(null);\n  const shouldHighlight = highlightedArea !== null;\n  const handleMouseLeave = (event: React.MouseEvent<HTMLDivElement>) => {\n    setHighlightedArea(null);\n    onMouseLeave?.(event);\n  };\n\n  const referenceLinesItems = referenceLines?.map((line, index) => {\n    const color = getThemeColor(line.color, theme);\n    return (\n      <ReferenceLine\n        key={index}\n        stroke={line.color ? color : 'var(--chart-grid-color)'}\n        strokeWidth={1}\n        {...line}\n        label={{\n          fill: line.color ? color : 'currentColor',\n          fontSize: 12,\n          position: line.labelPosition ?? 'insideBottomLeft',\n          ...(typeof line.label === 'object' ? line.label : { value: line.label }),\n        }}\n        {...getStyles('referenceLine')}\n      />\n    );\n  });\n\n  const scatters = mappedData.map((item, index) => {\n    const dimmed = shouldHighlight && highlightedArea !== item.name;\n    return (\n      <Scatter\n        data={item.data}\n        fill={getThemeColor(item.color, theme)}\n        key={index}\n        isAnimationActive={false}\n        fillOpacity={dimmed ? 0.1 : 1}\n        {...scatterProps}\n      >\n        {pointLabels && <LabelList dataKey={dataKey[pointLabels]} fontSize={8} dy={10} />}\n        {scatterProps?.children}\n      </Scatter>\n    );\n  });\n\n  return (\n    <Box {...getStyles('root')} onMouseLeave={handleMouseLeave} dir={dir || 'ltr'} {...others}>\n      <ResponsiveContainer {...getStyles('container')}>\n        <ReChartsScatterChart\n          margin={{\n            bottom: xAxisLabel ? 30 : undefined,\n            left: yAxisLabel ? 10 : undefined,\n            right: yAxisLabel ? 5 : undefined,\n          }}\n          {...scatterChartProps}\n        >\n          <CartesianGrid\n            strokeDasharray={strokeDasharray as string}\n            vertical={gridAxis === 'y' || gridAxis === 'xy'}\n            horizontal={gridAxis === 'x' || gridAxis === 'xy'}\n            {...getStyles('grid')}\n            {...gridProps}\n          />\n          <XAxis\n            type=\"number\"\n            hide={!withXAxis}\n            dataKey={dataKey.x}\n            tick={{ transform: 'translate(0, 10)', fontSize: 12, fill: 'currentColor' }}\n            stroke=\"\"\n            interval=\"preserveStartEnd\"\n            tickLine={withXTickLine ? { stroke: 'currentColor' } : false}\n            minTickGap={5}\n            unit={unit?.x}\n            tickFormatter={xFormatter}\n            {...getStyles('axis')}\n            {...xAxisProps}\n          >\n            {xAxisLabel && (\n              <Label position=\"insideBottom\" offset={-20} fontSize={12} {...getStyles('axisLabel')}>\n                {xAxisLabel}\n              </Label>\n            )}\n            {xAxisProps?.children}\n          </XAxis>\n          <YAxis\n            type=\"number\"\n            hide={!withYAxis}\n            axisLine={false}\n            dataKey={dataKey.y}\n            tickLine={withYTickLine ? { stroke: 'currentColor' } : false}\n            tick={{ transform: 'translate(-10, 0)', fontSize: 12, fill: 'currentColor' }}\n            allowDecimals\n            unit={unit?.y}\n            tickFormatter={yFormatter}\n            {...getStyles('axis')}\n            {...yAxisProps}\n          >\n            {yAxisLabel && (\n              <Label\n                position=\"insideLeft\"\n                angle={-90}\n                textAnchor=\"middle\"\n                fontSize={12}\n                offset={-5}\n                {...getStyles('axisLabel')}\n              >\n                {yAxisLabel}\n              </Label>\n            )}\n            {yAxisProps?.children}\n          </YAxis>\n\n          {withTooltip && (\n            <Tooltip\n              animationDuration={tooltipAnimationDuration}\n              isAnimationActive={tooltipAnimationDuration !== 0}\n              position={{ y: 0 }}\n              cursor={{\n                stroke: 'var(--chart-grid-color)',\n                strokeWidth: 1,\n                strokeDasharray,\n              }}\n              content={({ label, payload, labelFormatter }) => (\n                <ChartTooltip\n                  type=\"scatter\"\n                  label={labelFormatter && payload ? labelFormatter(label, payload) : label}\n                  payload={\n                    labels\n                      ? payload?.map((item) => ({\n                          ...item,\n                          name: labels[getAxis(item.name as string, dataKey)] || item.name,\n                          value:\n                            getFormatter(getAxis(item.name as string, dataKey))?.(\n                              item.value as number\n                            ) ?? item.value,\n                        }))\n                      : payload?.map((item) => ({\n                          ...item,\n                          value:\n                            getFormatter(getAxis(item.name as string, dataKey))?.(\n                              item.value as number\n                            ) ?? item.value,\n                        }))\n                  }\n                  classNames={resolvedClassNames}\n                  styles={resolvedStyles}\n                  series={data}\n                  attributes={attributes}\n                />\n              )}\n              {...tooltipProps}\n            />\n          )}\n\n          {withLegend && (\n            <Legend\n              verticalAlign=\"top\"\n              content={(payload) => (\n                <ChartLegend\n                  payload={payload.payload?.map((item, index) => ({\n                    ...item,\n                    dataKey: data[index].name,\n                  }))}\n                  onHighlight={setHighlightedArea}\n                  legendPosition={legendProps?.verticalAlign || 'top'}\n                  classNames={resolvedClassNames}\n                  styles={resolvedStyles}\n                  series={data}\n                  attributes={attributes}\n                />\n              )}\n              height={44}\n              {...legendProps}\n            />\n          )}\n\n          {referenceLinesItems}\n          {scatters}\n        </ReChartsScatterChart>\n      </ResponsiveContainer>\n    </Box>\n  );\n});\n\nScatterChart.displayName = '@mantine/charts/ScatterChart';\nScatterChart.classes = classes;\nScatterChart.varsResolver = varsResolver;\n\nexport namespace ScatterChart {\n  export type Props = ScatterChartProps;\n  export type StylesNames = ScatterChartStylesNames;\n  export type CssVariables = ScatterChartCssVariables;\n  export type Factory = ScatterChartFactory;\n  export type Series = ScatterChartSeries;\n}\n"],"mappings":"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"}
+{"version":3,"file":"ScatterChart.mjs","names":["ScatterChart","ReChartsScatterChart","Tooltip","classes"],"sources":["../../src/ScatterChart/ScatterChart.tsx"],"sourcesContent":["import { useState } from 'react';\nimport {\n  CartesianGrid,\n  Label,\n  LabelList,\n  Legend,\n  ScatterChart as ReChartsScatterChart,\n  ReferenceLine,\n  ResponsiveContainer,\n  Scatter,\n  ScatterProps,\n  Tooltip,\n  XAxis,\n  YAxis,\n} from 'recharts';\nimport {\n  Box,\n  BoxProps,\n  createVarsResolver,\n  ElementProps,\n  factory,\n  Factory,\n  getThemeColor,\n  MantineColor,\n  StylesApiProps,\n  useMantineTheme,\n  useProps,\n  useResolvedStylesApi,\n  useStyles,\n} from '@mantine/core';\nimport { ChartLegend, ChartLegendStylesNames } from '../ChartLegend';\nimport { ChartTooltip, ChartTooltipStylesNames } from '../ChartTooltip';\nimport { BaseChartStylesNames, GridChartBaseProps } from '../types';\nimport classes from '../grid-chart.module.css';\n\nexport interface ScatterChartSeries {\n  color: MantineColor;\n  name: string;\n  data: Record<string, number>[];\n}\n\nexport type ScatterChartStylesNames =\n  | 'scatter'\n  | Exclude<BaseChartStylesNames, 'brush'>\n  | ChartLegendStylesNames\n  | ChartTooltipStylesNames;\n\nexport type ScatterChartCssVariables = {\n  root: '--chart-text-color' | '--chart-grid-color';\n};\n\nexport interface ScatterChartProps\n  extends\n    Omit<\n      GridChartBaseProps,\n      'dataKey' | 'data' | 'unit' | 'valueFormatter' | 'withBrush' | 'brushProps'\n    >,\n    BoxProps,\n    StylesApiProps<ScatterChartFactory>,\n    ElementProps<'div'> {\n  /** Keys that should be used to retrieve data from the data array on x and y axis */\n  dataKey: { x: string; y: string };\n\n  /** Data that is used to build the chart */\n  data: ScatterChartSeries[];\n\n  /** Units displayed after value on axis and inside the tooltip */\n  unit?: { x?: string; y?: string };\n\n  /** Labels that should be used instead of keys names in the tooltip */\n  labels?: { x?: string; y?: string };\n\n  /** A function to format values on x/y axis and in the tooltip */\n  valueFormatter?:\n    | GridChartBaseProps['valueFormatter']\n    | { x?: GridChartBaseProps['valueFormatter']; y?: GridChartBaseProps['valueFormatter'] };\n\n  /** Props passed down to recharts `ScatterChart` component */\n  scatterChartProps?: React.ComponentProps<typeof ReChartsScatterChart>;\n\n  /** Props passed down to recharts `Scatter` component */\n  scatterProps?: Partial<Omit<ScatterProps, 'ref'>>;\n\n  /** If set, displays labels next to points for the given axis */\n  pointLabels?: 'x' | 'y';\n}\n\nfunction getAxis(key: string, dataKey: { x: string; y: string }) {\n  return key === dataKey.x ? 'x' : 'y';\n}\n\nexport type ScatterChartFactory = Factory<{\n  props: ScatterChartProps;\n  ref: HTMLDivElement;\n  stylesNames: ScatterChartStylesNames;\n  vars: ScatterChartCssVariables;\n}>;\n\nconst defaultProps = {\n  withXAxis: true,\n  withYAxis: true,\n  withTooltip: true,\n  tooltipAnimationDuration: 0,\n  tickLine: 'y',\n  strokeDasharray: '5 5',\n  gridAxis: 'x',\n  accessibilityLayer: true,\n} satisfies Partial<ScatterChartProps>;\n\nconst varsResolver = createVarsResolver<ScatterChartFactory>((theme, { textColor, gridColor }) => ({\n  root: {\n    '--chart-text-color': textColor ? getThemeColor(textColor, theme) : undefined,\n    '--chart-grid-color': gridColor ? getThemeColor(gridColor, theme) : undefined,\n  },\n}));\n\nexport const ScatterChart = factory<ScatterChartFactory>((_props) => {\n  const props = useProps('ScatterChart', defaultProps, _props);\n  const {\n    classNames,\n    className,\n    style,\n    styles,\n    unstyled,\n    vars,\n    referenceLines,\n    dir,\n    withLegend,\n    withTooltip,\n    withXAxis,\n    withYAxis,\n    xAxisProps,\n    yAxisProps,\n    orientation,\n    scatterChartProps,\n    legendProps,\n    data,\n    gridAxis,\n    tickLine,\n    strokeDasharray,\n    gridProps,\n    tooltipAnimationDuration,\n    tooltipProps,\n    children,\n    onMouseLeave,\n    dataKey,\n    textColor,\n    gridColor,\n    xAxisLabel,\n    yAxisLabel,\n    unit,\n    labels,\n    valueFormatter,\n    scatterProps,\n    pointLabels,\n    attributes,\n    accessibilityLayer,\n    ...others\n  } = props;\n\n  const getFormatter = (axis: 'x' | 'y') =>\n    typeof valueFormatter === 'function' ? valueFormatter : valueFormatter?.[axis];\n  const xFormatter = getFormatter('x');\n  const yFormatter = getFormatter('y');\n\n  const theme = useMantineTheme();\n\n  const mappedData = data.map((item) => ({\n    ...item,\n    data: item.data.map((point) => ({ ...point, name: item.name })),\n  }));\n\n  const { resolvedClassNames, resolvedStyles } = useResolvedStylesApi<ScatterChartFactory>({\n    classNames,\n    styles,\n    props,\n  });\n\n  const getStyles = useStyles<ScatterChartFactory>({\n    name: 'ScatterChart',\n    classes,\n    props,\n    className,\n    style,\n    classNames,\n    styles,\n    unstyled,\n    attributes,\n    vars,\n    varsResolver,\n  });\n\n  const withXTickLine = gridAxis !== 'none' && (tickLine === 'x' || tickLine === 'xy');\n  const withYTickLine = gridAxis !== 'none' && (tickLine === 'y' || tickLine === 'xy');\n  const [highlightedArea, setHighlightedArea] = useState<string | number | null>(null);\n  const shouldHighlight = highlightedArea !== null;\n  const handleMouseLeave = (event: React.MouseEvent<HTMLDivElement>) => {\n    setHighlightedArea(null);\n    onMouseLeave?.(event);\n  };\n\n  const referenceLinesItems = referenceLines?.map((line, index) => {\n    const color = getThemeColor(line.color, theme);\n    return (\n      <ReferenceLine\n        key={index}\n        stroke={line.color ? color : 'var(--chart-grid-color)'}\n        strokeWidth={1}\n        {...line}\n        label={{\n          fill: line.color ? color : 'currentColor',\n          fontSize: 12,\n          position: line.labelPosition ?? 'insideBottomLeft',\n          ...(typeof line.label === 'object' ? line.label : { value: line.label }),\n        }}\n        {...getStyles('referenceLine')}\n      />\n    );\n  });\n\n  const scatters = mappedData.map((item, index) => {\n    const dimmed = shouldHighlight && highlightedArea !== item.name;\n    return (\n      <Scatter\n        data={item.data}\n        fill={getThemeColor(item.color, theme)}\n        key={index}\n        isAnimationActive={false}\n        fillOpacity={dimmed ? 0.1 : 1}\n        {...scatterProps}\n      >\n        {pointLabels && <LabelList dataKey={dataKey[pointLabels]} fontSize={8} dy={10} />}\n        {scatterProps?.children}\n      </Scatter>\n    );\n  });\n\n  return (\n    <Box {...getStyles('root')} onMouseLeave={handleMouseLeave} dir={dir || 'ltr'} {...others}>\n      <ResponsiveContainer {...getStyles('container')}>\n        <ReChartsScatterChart\n          margin={{\n            bottom: xAxisLabel ? 30 : undefined,\n            left: yAxisLabel ? 10 : undefined,\n            right: yAxisLabel ? 5 : undefined,\n          }}\n          accessibilityLayer={accessibilityLayer}\n          {...scatterChartProps}\n        >\n          <CartesianGrid\n            strokeDasharray={strokeDasharray as string}\n            vertical={gridAxis === 'y' || gridAxis === 'xy'}\n            horizontal={gridAxis === 'x' || gridAxis === 'xy'}\n            {...getStyles('grid')}\n            {...gridProps}\n          />\n          <XAxis\n            type=\"number\"\n            hide={!withXAxis}\n            dataKey={dataKey.x}\n            tick={{ transform: 'translate(0, 10)', fontSize: 12, fill: 'currentColor' }}\n            stroke=\"\"\n            interval=\"preserveStartEnd\"\n            tickLine={withXTickLine ? { stroke: 'currentColor' } : false}\n            minTickGap={5}\n            unit={unit?.x}\n            tickFormatter={xFormatter}\n            {...getStyles('axis')}\n            {...xAxisProps}\n          >\n            {xAxisLabel && (\n              <Label position=\"insideBottom\" offset={-20} fontSize={12} {...getStyles('axisLabel')}>\n                {xAxisLabel}\n              </Label>\n            )}\n            {xAxisProps?.children}\n          </XAxis>\n          <YAxis\n            type=\"number\"\n            hide={!withYAxis}\n            axisLine={false}\n            dataKey={dataKey.y}\n            tickLine={withYTickLine ? { stroke: 'currentColor' } : false}\n            tick={{ transform: 'translate(-10, 0)', fontSize: 12, fill: 'currentColor' }}\n            allowDecimals\n            unit={unit?.y}\n            tickFormatter={yFormatter}\n            {...getStyles('axis')}\n            {...yAxisProps}\n          >\n            {yAxisLabel && (\n              <Label\n                position=\"insideLeft\"\n                angle={-90}\n                textAnchor=\"middle\"\n                fontSize={12}\n                offset={-5}\n                {...getStyles('axisLabel')}\n              >\n                {yAxisLabel}\n              </Label>\n            )}\n            {yAxisProps?.children}\n          </YAxis>\n\n          {withTooltip && (\n            <Tooltip\n              animationDuration={tooltipAnimationDuration}\n              isAnimationActive={tooltipAnimationDuration !== 0}\n              position={{ y: 0 }}\n              cursor={{\n                stroke: 'var(--chart-grid-color)',\n                strokeWidth: 1,\n                strokeDasharray,\n              }}\n              content={({ label, payload, labelFormatter }) => (\n                <ChartTooltip\n                  type=\"scatter\"\n                  label={labelFormatter && payload ? labelFormatter(label, payload) : label}\n                  payload={\n                    labels\n                      ? payload?.map((item) => ({\n                          ...item,\n                          name: labels[getAxis(item.name as string, dataKey)] || item.name,\n                          value:\n                            getFormatter(getAxis(item.name as string, dataKey))?.(\n                              item.value as number\n                            ) ?? item.value,\n                        }))\n                      : payload?.map((item) => ({\n                          ...item,\n                          value:\n                            getFormatter(getAxis(item.name as string, dataKey))?.(\n                              item.value as number\n                            ) ?? item.value,\n                        }))\n                  }\n                  classNames={resolvedClassNames}\n                  styles={resolvedStyles}\n                  series={data}\n                  attributes={attributes}\n                />\n              )}\n              {...tooltipProps}\n            />\n          )}\n\n          {withLegend && (\n            <Legend\n              verticalAlign=\"top\"\n              content={(payload) => (\n                <ChartLegend\n                  payload={payload.payload?.map((item, index) => ({\n                    ...item,\n                    dataKey: data[index].name,\n                  }))}\n                  onHighlight={setHighlightedArea}\n                  legendPosition={legendProps?.verticalAlign || 'top'}\n                  classNames={resolvedClassNames}\n                  styles={resolvedStyles}\n                  series={data}\n                  attributes={attributes}\n                />\n              )}\n              height={44}\n              {...legendProps}\n            />\n          )}\n\n          {referenceLinesItems}\n          {scatters}\n        </ReChartsScatterChart>\n      </ResponsiveContainer>\n    </Box>\n  );\n});\n\nScatterChart.displayName = '@mantine/charts/ScatterChart';\nScatterChart.classes = classes;\nScatterChart.varsResolver = varsResolver;\n\nexport namespace ScatterChart {\n  export type Props = ScatterChartProps;\n  export type StylesNames = ScatterChartStylesNames;\n  export type CssVariables = ScatterChartCssVariables;\n  export type Factory = ScatterChartFactory;\n  export type Series = ScatterChartSeries;\n}\n"],"mappings":"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"}

package/esm/Sparkline/Sparkline.mjs

@@ -3,8 +3,8 @@ import { AreaGradient } from "../AreaChart/AreaGradient.mjs";
 import Sparkline_module_default from "./Sparkline.module.mjs";
 import { Box, createVarsResolver, factory, getThemeColor, useProps, useStyles } from "@mantine/core";
 import { jsx, jsxs } from "react/jsx-runtime";
-import { useId, useMemo } from "react";
 import { Area, AreaChart, ResponsiveContainer } from "recharts";
+import { useId, useMemo } from "react";
 //#region packages/@mantine/charts/src/Sparkline/Sparkline.tsx
 const defaultProps = {
 	withGradient: true,

package/esm/SunburstChart/SunburstChart.mjs

@@ -0,0 +1,129 @@
+"use client";
+import { ChartTooltip } from "../ChartTooltip/ChartTooltip.mjs";
+import SunburstChart_module_default from "./SunburstChart.module.mjs";
+import { Box, createVarsResolver, factory, getThemeColor, parseThemeColor, rem, useMantineTheme, useProps, useResolvedStylesApi, useStyles } from "@mantine/core";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { ResponsiveContainer, SunburstChart, Tooltip as Tooltip$1 } from "recharts";
+import { useMemo } from "react";
+//#region packages/@mantine/charts/src/SunburstChart/SunburstChart.tsx
+const defaultProps = {
+	dataKey: "value",
+	withTooltip: true,
+	tooltipAnimationDuration: 0,
+	size: 300,
+	innerRadius: 50,
+	gap: 1,
+	startAngle: 0,
+	endAngle: 360
+};
+const varsResolver = createVarsResolver((theme, { strokeColor, size }) => ({ root: {
+	"--chart-stroke-color": strokeColor ? getThemeColor(strokeColor, theme) : void 0,
+	"--chart-size": rem(size)
+} }));
+function resolveData(data, theme, dataKey, parentFill) {
+	let total = 0;
+	return {
+		resolved: data.map((item) => {
+			const fill = (item.color ? parseThemeColor({
+				color: item.color,
+				theme
+			}).value : parentFill) || void 0;
+			const result = {
+				...item,
+				fill
+			};
+			if (item.children) {
+				const child = resolveData(item.children, theme, dataKey, fill);
+				result.children = child.resolved;
+				if (result[dataKey] == null) result[dataKey] = child.total;
+				total += child.total;
+			} else total += Number(item[dataKey]) || 0;
+			return result;
+		}),
+		total
+	};
+}
+const SunburstChart$1 = factory((_props) => {
+	const props = useProps("SunburstChart", defaultProps, _props);
+	const { classNames, className, style, styles, unstyled, vars, data, dataKey, withTooltip, tooltipAnimationDuration, tooltipProps, sunburstChartProps, strokeColor, size, innerRadius, gap, startAngle, endAngle, withLabels, valueFormatter, children, attributes, ...others } = props;
+	const theme = useMantineTheme();
+	const getStyles = useStyles({
+		name: "SunburstChart",
+		classes: SunburstChart_module_default,
+		props,
+		className,
+		style,
+		classNames,
+		styles,
+		unstyled,
+		attributes,
+		vars,
+		varsResolver
+	});
+	const { resolvedClassNames, resolvedStyles } = useResolvedStylesApi({
+		classNames,
+		styles,
+		props
+	});
+	const rootData = useMemo(() => {
+		const { resolved, total } = resolveData(data, theme, dataKey);
+		return {
+			name: "root",
+			[dataKey]: total,
+			children: resolved
+		};
+	}, [
+		data,
+		theme,
+		dataKey
+	]);
+	return /* @__PURE__ */ jsx(Box, {
+		size,
+		...getStyles("root"),
+		...others,
+		children: /* @__PURE__ */ jsx(ResponsiveContainer, { children: /* @__PURE__ */ jsxs(SunburstChart, {
+			data: rootData,
+			dataKey,
+			innerRadius,
+			padding: gap,
+			ringPadding: 0,
+			startAngle,
+			endAngle,
+			stroke: "var(--chart-stroke-color, var(--mantine-color-body))",
+			textOptions: withLabels ? {
+				fontWeight: "bold",
+				fontSize: ".65rem",
+				paintOrder: "stroke fill",
+				stroke: "var(--chart-stroke-color, var(--mantine-color-body))",
+				strokeWidth: 1,
+				fill: "var(--mantine-color-bright)",
+				pointerEvents: "none"
+			} : { display: "none" },
+			...sunburstChartProps,
+			children: [withTooltip && /* @__PURE__ */ jsx(Tooltip$1, {
+				animationDuration: tooltipAnimationDuration,
+				isAnimationActive: false,
+				content: ({ payload }) => /* @__PURE__ */ jsx(ChartTooltip, {
+					payload: payload?.map((item) => ({
+						name: item.name,
+						value: item.value,
+						color: item.payload?.fill || "var(--mantine-color-blue-6)"
+					})) || [],
+					classNames: resolvedClassNames,
+					styles: resolvedStyles,
+					type: "radial",
+					valueFormatter,
+					attributes
+				}),
+				...tooltipProps
+			}), children]
+		}) })
+	});
+});
+SunburstChart$1.displayName = "@mantine/charts/SunburstChart";
+SunburstChart$1.classes = SunburstChart_module_default;
+SunburstChart$1.varsResolver = varsResolver;
+//#endregion
+export { SunburstChart$1 as SunburstChart };
+
+//# sourceMappingURL=SunburstChart.mjs.map

package/esm/SunburstChart/SunburstChart.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"SunburstChart.mjs","names":["SunburstChart","RechartsSunburstChart","Tooltip","classes"],"sources":["../../src/SunburstChart/SunburstChart.tsx"],"sourcesContent":["import { useMemo } from 'react';\nimport {\n  ResponsiveContainer,\n  SunburstChart as RechartsSunburstChart,\n  SunburstChartProps as RechartsSunburstChartProps,\n  Tooltip,\n  TooltipProps,\n} from 'recharts';\nimport {\n  Box,\n  BoxProps,\n  createVarsResolver,\n  ElementProps,\n  factory,\n  Factory,\n  getThemeColor,\n  MantineColor,\n  MantineTheme,\n  parseThemeColor,\n  rem,\n  StylesApiProps,\n  useMantineTheme,\n  useProps,\n  useResolvedStylesApi,\n  useStyles,\n} from '@mantine/core';\nimport { ChartTooltip, ChartTooltipStylesNames } from '../ChartTooltip/ChartTooltip';\nimport classes from './SunburstChart.module.css';\n\nexport interface SunburstChartData {\n  name: string;\n  value?: number;\n  color?: MantineColor;\n  children?: SunburstChartData[];\n  [key: string]: unknown;\n}\n\nexport type SunburstChartStylesNames = 'root' | ChartTooltipStylesNames;\nexport type SunburstChartCssVariables = {\n  root: '--chart-stroke-color' | '--chart-size';\n};\n\nexport interface SunburstChartProps\n  extends BoxProps, StylesApiProps<SunburstChartFactory>, ElementProps<'div'> {\n  /** Data used to render chart */\n  data: SunburstChartData[];\n\n  /** Key in data object for the value @default 'value' */\n  dataKey?: string;\n\n  /** Determines whether the tooltip should be displayed when a node is hovered @default true */\n  withTooltip?: boolean;\n\n  /** Tooltip animation duration in ms @default 0 */\n  tooltipAnimationDuration?: number;\n\n  /** Props passed down to `Tooltip` recharts component */\n  tooltipProps?: Omit<TooltipProps<any, any>, 'ref'>;\n\n  /** Props passed down to recharts `SunburstChart` component */\n  sunburstChartProps?: Partial<Omit<RechartsSunburstChartProps, 'ref' | 'data' | 'dataKey'>>;\n\n  /** Controls color of the sectors stroke, by default depends on color scheme */\n  strokeColor?: MantineColor;\n\n  /** Controls chart width and height @default 300 */\n  size?: number;\n\n  /** Controls the radius of the inner circle at the center of the chart @default 50 */\n  innerRadius?: number;\n\n  /** Gap between sectors and rings in px @default 1 */\n  gap?: number;\n\n  /** Angle in degrees from which the chart should start @default 0 */\n  startAngle?: number;\n\n  /** Angle in degrees at which the chart should end @default 360 */\n  endAngle?: number;\n\n  /** Determines whether value labels are displayed inside each sector @default false */\n  withLabels?: boolean;\n\n  /** A function to format values inside the tooltip and labels */\n  valueFormatter?: (value: number) => string;\n\n  /** Additional elements rendered inside `SunburstChart` component */\n  children?: React.ReactNode;\n}\n\nexport type SunburstChartFactory = Factory<{\n  props: SunburstChartProps;\n  ref: HTMLDivElement;\n  stylesNames: SunburstChartStylesNames;\n  vars: SunburstChartCssVariables;\n}>;\n\nconst defaultProps = {\n  dataKey: 'value',\n  withTooltip: true,\n  tooltipAnimationDuration: 0,\n  size: 300,\n  innerRadius: 50,\n  gap: 1,\n  startAngle: 0,\n  endAngle: 360,\n} satisfies Partial<SunburstChartProps>;\n\nconst varsResolver = createVarsResolver<SunburstChartFactory>((theme, { strokeColor, size }) => ({\n  root: {\n    '--chart-stroke-color': strokeColor ? getThemeColor(strokeColor, theme) : undefined,\n    '--chart-size': rem(size),\n  },\n}));\n\nfunction resolveData(\n  data: SunburstChartData[],\n  theme: MantineTheme,\n  dataKey: string,\n  parentFill?: string\n): { resolved: any[]; total: number } {\n  let total = 0;\n\n  const resolved = data.map((item) => {\n    const resolvedColor = item.color\n      ? parseThemeColor({ color: item.color, theme }).value\n      : parentFill;\n    const fill = resolvedColor || undefined;\n\n    const result: any = {\n      ...item,\n      fill,\n    };\n\n    if (item.children) {\n      const child = resolveData(item.children, theme, dataKey, fill);\n      result.children = child.resolved;\n      if (result[dataKey] == null) {\n        result[dataKey] = child.total;\n      }\n      total += child.total;\n    } else {\n      total += Number(item[dataKey]) || 0;\n    }\n\n    return result;\n  });\n\n  return { resolved, total };\n}\n\nexport const SunburstChart = factory<SunburstChartFactory>((_props) => {\n  const props = useProps('SunburstChart', defaultProps, _props);\n  const {\n    classNames,\n    className,\n    style,\n    styles,\n    unstyled,\n    vars,\n    data,\n    dataKey,\n    withTooltip,\n    tooltipAnimationDuration,\n    tooltipProps,\n    sunburstChartProps,\n    strokeColor,\n    size,\n    innerRadius,\n    gap,\n    startAngle,\n    endAngle,\n    withLabels,\n    valueFormatter,\n    children,\n    attributes,\n    ...others\n  } = props;\n\n  const theme = useMantineTheme();\n\n  const getStyles = useStyles<SunburstChartFactory>({\n    name: 'SunburstChart',\n    classes,\n    props,\n    className,\n    style,\n    classNames,\n    styles,\n    unstyled,\n    attributes,\n    vars,\n    varsResolver,\n  });\n\n  const { resolvedClassNames, resolvedStyles } = useResolvedStylesApi<SunburstChartFactory>({\n    classNames,\n    styles,\n    props,\n  });\n\n  const rootData = useMemo(() => {\n    const { resolved, total } = resolveData(data, theme, dataKey!);\n    return {\n      name: 'root',\n      [dataKey!]: total,\n      children: resolved,\n    };\n  }, [data, theme, dataKey]);\n\n  return (\n    <Box size={size} {...getStyles('root')} {...others}>\n      <ResponsiveContainer>\n        <RechartsSunburstChart\n          data={rootData as any}\n          dataKey={dataKey as any}\n          innerRadius={innerRadius}\n          padding={gap}\n          ringPadding={0}\n          startAngle={startAngle}\n          endAngle={endAngle}\n          stroke=\"var(--chart-stroke-color, var(--mantine-color-body))\"\n          textOptions={\n            withLabels\n              ? {\n                  fontWeight: 'bold',\n                  fontSize: '.65rem',\n                  paintOrder: 'stroke fill',\n                  stroke: 'var(--chart-stroke-color, var(--mantine-color-body))',\n                  strokeWidth: 1,\n                  fill: 'var(--mantine-color-bright)',\n                  pointerEvents: 'none',\n                }\n              : { display: 'none' }\n          }\n          {...sunburstChartProps}\n        >\n          {withTooltip && (\n            <Tooltip\n              animationDuration={tooltipAnimationDuration}\n              isAnimationActive={false}\n              content={({ payload }) => (\n                <ChartTooltip\n                  payload={\n                    payload?.map((item) => ({\n                      name: item.name as string,\n                      value: item.value as number,\n                      color: (item.payload as any)?.fill || 'var(--mantine-color-blue-6)',\n                    })) || []\n                  }\n                  classNames={resolvedClassNames}\n                  styles={resolvedStyles}\n                  type=\"radial\"\n                  valueFormatter={valueFormatter}\n                  attributes={attributes}\n                />\n              )}\n              {...tooltipProps}\n            />\n          )}\n\n          {children}\n        </RechartsSunburstChart>\n      </ResponsiveContainer>\n    </Box>\n  );\n});\n\nSunburstChart.displayName = '@mantine/charts/SunburstChart';\nSunburstChart.classes = classes;\nSunburstChart.varsResolver = varsResolver;\n"],"mappings":";;;;;;;;AAiGA,MAAM,eAAe;CACnB,SAAS;CACT,aAAa;CACb,0BAA0B;CAC1B,MAAM;CACN,aAAa;CACb,KAAK;CACL,YAAY;CACZ,UAAU;AACZ;AAEA,MAAM,eAAe,oBAA0C,OAAO,EAAE,aAAa,YAAY,EAC/F,MAAM;CACJ,wBAAwB,cAAc,cAAc,aAAa,KAAK,IAAI,KAAA;CAC1E,gBAAgB,IAAI,IAAI;AAC1B,EACF,EAAE;AAEF,SAAS,YACP,MACA,OACA,SACA,YACoC;CACpC,IAAI,QAAQ;CA2BZ,OAAO;EAAE,UAzBQ,KAAK,KAAK,SAAS;GAIlC,MAAM,QAHgB,KAAK,QACvB,gBAAgB;IAAE,OAAO,KAAK;IAAO;GAAM,CAAC,CAAC,CAAC,QAC9C,eAC0B,KAAA;GAE9B,MAAM,SAAc;IAClB,GAAG;IACH;GACF;GAEA,IAAI,KAAK,UAAU;IACjB,MAAM,QAAQ,YAAY,KAAK,UAAU,OAAO,SAAS,IAAI;IAC7D,OAAO,WAAW,MAAM;IACxB,IAAI,OAAO,YAAY,MACrB,OAAO,WAAW,MAAM;IAE1B,SAAS,MAAM;GACjB,OACE,SAAS,OAAO,KAAK,QAAQ,KAAK;GAGpC,OAAO;EACT,CAEgB;EAAG;CAAM;AAC3B;AAEA,MAAaA,kBAAgB,SAA+B,WAAW;CACrE,MAAM,QAAQ,SAAS,iBAAiB,cAAc,MAAM;CAC5D,MAAM,EACJ,YACA,WACA,OACA,QACA,UACA,MACA,MACA,SACA,aACA,0BACA,cACA,oBACA,aACA,MACA,aACA,KACA,YACA,UACA,YACA,gBACA,UACA,YACA,GAAG,WACD;CAEJ,MAAM,QAAQ,gBAAgB;CAE9B,MAAM,YAAY,UAAgC;EAChD,MAAM;EACN,SAAA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;CACF,CAAC;CAED,MAAM,EAAE,oBAAoB,mBAAmB,qBAA2C;EACxF;EACA;EACA;CACF,CAAC;CAED,MAAM,WAAW,cAAc;EAC7B,MAAM,EAAE,UAAU,UAAU,YAAY,MAAM,OAAO,OAAQ;EAC7D,OAAO;GACL,MAAM;IACL,UAAW;GACZ,UAAU;EACZ;CACF,GAAG;EAAC;EAAM;EAAO;CAAO,CAAC;CAEzB,OACE,oBAAC,KAAD;EAAW;EAAM,GAAI,UAAU,MAAM;EAAG,GAAI;YAC1C,oBAAC,qBAAD,EAAA,UACE,qBAACC,eAAD;GACE,MAAM;GACG;GACI;GACb,SAAS;GACT,aAAa;GACD;GACF;GACV,QAAO;GACP,aACE,aACI;IACE,YAAY;IACZ,UAAU;IACV,YAAY;IACZ,QAAQ;IACR,aAAa;IACb,MAAM;IACN,eAAe;GACjB,IACA,EAAE,SAAS,OAAO;GAExB,GAAI;aAtBN,CAwBG,eACC,oBAACC,WAAD;IACE,mBAAmB;IACnB,mBAAmB;IACnB,UAAU,EAAE,cACV,oBAAC,cAAD;KACE,SACE,SAAS,KAAK,UAAU;MACtB,MAAM,KAAK;MACX,OAAO,KAAK;MACZ,OAAQ,KAAK,SAAiB,QAAQ;KACxC,EAAE,KAAK,CAAC;KAEV,YAAY;KACZ,QAAQ;KACR,MAAK;KACW;KACJ;IACb,CAAA;IAEH,GAAI;GACL,CAAA,GAGF,QACoB;KACJ,CAAA;CAClB,CAAA;AAET,CAAC;AAED,gBAAc,cAAc;AAC5B,gBAAc,UAAUC;AACxB,gBAAc,eAAe"}

package/esm/SunburstChart/SunburstChart.module.mjs

@@ -0,0 +1,7 @@
+"use client";
+//#region packages/@mantine/charts/src/SunburstChart/SunburstChart.module.css
+var SunburstChart_module_default = { "root": "m_a73eff05" };
+//#endregion
+export { SunburstChart_module_default as default };
+
+//# sourceMappingURL=SunburstChart.module.mjs.map

package/esm/SunburstChart/SunburstChart.module.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"SunburstChart.module.mjs","names":[],"sources":["../../src/SunburstChart/SunburstChart.module.css"],"sourcesContent":[".root {\n  min-height: var(--chart-size, auto);\n  height: var(--chart-size, auto);\n  width: var(--chart-size, auto);\n  min-width: var(--chart-size, auto);\n\n  & :where(*) {\n    outline: 0;\n  }\n}\n"],"mappings":""}

package/esm/Treemap/Treemap.mjs

@@ -3,8 +3,8 @@ import { ChartTooltip } from "../ChartTooltip/ChartTooltip.mjs";
 import Treemap_module_default from "./Treemap.module.mjs";
 import { Box, createVarsResolver, factory, getAutoContrastValue, getThemeColor, isLightColor, parseThemeColor, rem, useMantineTheme, useProps, useResolvedStylesApi, useStyles } from "@mantine/core";
 import { jsx, jsxs } from "react/jsx-runtime";
-import "react";
 import { ResponsiveContainer, Tooltip as Tooltip$1, Treemap } from "recharts";
+import "react";
 //#region packages/@mantine/charts/src/Treemap/Treemap.tsx
 const defaultProps = {
 	dataKey: "value",

package/esm/grid-chart.module.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"grid-chart.module.mjs","names":[],"sources":["../src/grid-chart.module.css"],"sourcesContent":[".root {\n  display: block;\n  width: 100%;\n\n  --chart-bar-label-color: var(--mantine-color-dimmed);\n\n  svg {\n    overflow: visible;\n    outline: 0;\n  }\n\n  @mixin where-light {\n    --chart-grid-color: rgba(173, 181, 189, 0.6);\n    --chart-cursor-fill: rgba(173, 181, 189, 0.15);\n  }\n\n  @mixin where-dark {\n    --chart-cursor-fill: rgba(105, 105, 105, 0.15);\n    --chart-grid-color: rgba(105, 105, 105, 0.6);\n  }\n\n  & :where(text) {\n    font-family: var(--mantine-font-family);\n    color: var(--chart-text-color, var(--mantine-color-dimmed));\n  }\n}\n\n.container {\n  height: 100%;\n  width: 100%;\n}\n\n.grid {\n  stroke: var(--chart-grid-color);\n}\n\n.axis {\n  color: var(--chart-grid-color);\n}\n\n.axisLabel {\n  color: var(--chart-text-color, var(--mantine-color-dimmed));\n}\n\n.tooltip {\n  min-width: 200px;\n  background-color: var(--mantine-color-body);\n  box-shadow: var(--mantine-shadow-md);\n  border-radius: var(--mantine-radius-default);\n  padding: var(--mantine-spacing-sm);\n\n  @mixin where-light {\n    border: 1px solid var(--mantine-color-gray-3);\n  }\n\n  @mixin where-dark {\n    border: 1px solid var(--mantine-color-dark-4);\n  }\n}\n"],"mappings":""}
+{"version":3,"file":"grid-chart.module.mjs","names":[],"sources":["../src/grid-chart.module.css"],"sourcesContent":[".root {\n  display: block;\n  width: 100%;\n\n  --chart-bar-label-color: var(--mantine-color-dimmed);\n\n  svg {\n    overflow: visible;\n    outline: 0;\n  }\n\n  :where(svg *) {\n    outline: 0;\n  }\n\n  svg:focus-visible {\n    outline: 2px solid var(--mantine-primary-color-filled);\n    outline-offset: 2px;\n  }\n\n  @mixin where-light {\n    --chart-grid-color: rgba(173, 181, 189, 0.6);\n    --chart-cursor-fill: rgba(173, 181, 189, 0.15);\n  }\n\n  @mixin where-dark {\n    --chart-cursor-fill: rgba(105, 105, 105, 0.15);\n    --chart-grid-color: rgba(105, 105, 105, 0.6);\n  }\n\n  & :where(text) {\n    font-family: var(--mantine-font-family);\n    color: var(--chart-text-color, var(--mantine-color-dimmed));\n  }\n}\n\n.container {\n  height: 100%;\n  width: 100%;\n}\n\n.grid {\n  stroke: var(--chart-grid-color);\n}\n\n.axis {\n  color: var(--chart-grid-color);\n}\n\n.axisLabel {\n  color: var(--chart-text-color, var(--mantine-color-dimmed));\n}\n\n.tooltip {\n  min-width: 200px;\n  background-color: var(--mantine-color-body);\n  box-shadow: var(--mantine-shadow-md);\n  border-radius: var(--mantine-radius-default);\n  padding: var(--mantine-spacing-sm);\n\n  @mixin where-light {\n    border: 1px solid var(--mantine-color-gray-3);\n  }\n\n  @mixin where-dark {\n    border: 1px solid var(--mantine-color-dark-4);\n  }\n}\n"],"mappings":""}

package/esm/index.mjs

@@ -1,5 +1,6 @@
 import { ChartTooltip, getFilteredChartTooltipPayload } from "./ChartTooltip/ChartTooltip.mjs";
 import { ChartLegend, getFilteredChartLegendPayload } from "./ChartLegend/ChartLegend.mjs";
+import { ChartBrush } from "./ChartBrush/ChartBrush.mjs";
 import { AreaGradient } from "./AreaChart/AreaGradient.mjs";
 import { getSplitOffset } from "./AreaChart/get-split-offset.mjs";
 import { AreaChart } from "./AreaChart/AreaChart.mjs";
@@ -18,4 +19,6 @@ import { Heatmap } from "./Heatmap/Heatmap.mjs";
 import { BarsList } from "./BarsList/BarsList.mjs";
 import { Treemap } from "./Treemap/Treemap.mjs";
 import { SankeyChart } from "./SankeyChart/SankeyChart.mjs";
-export { AreaChart, AreaGradient, BarChart, BarsList, BubbleChart, ChartLegend, ChartTooltip, CompositeChart, DonutChart, FunnelChart, Heatmap, LineChart, PieChart, RadarChart, RadialBarChart, SankeyChart, ScatterChart, Sparkline, Treemap, getFilteredChartLegendPayload, getFilteredChartTooltipPayload, getSplitOffset };
+import { SunburstChart } from "./SunburstChart/SunburstChart.mjs";
+import { BulletChart } from "./BulletChart/BulletChart.mjs";
+export { AreaChart, AreaGradient, BarChart, BarsList, BubbleChart, BulletChart, ChartBrush, ChartLegend, ChartTooltip, CompositeChart, DonutChart, FunnelChart, Heatmap, LineChart, PieChart, RadarChart, RadialBarChart, SankeyChart, ScatterChart, Sparkline, SunburstChart, Treemap, getFilteredChartLegendPayload, getFilteredChartTooltipPayload, getSplitOffset };

package/lib/BubbleChart/BubbleChart.d.ts

@@ -38,6 +38,8 @@ export interface BubbleChartProps extends BoxProps, StylesApiProps<BubbleChartFa
     withTooltip?: boolean;
     /** Function to format z axis values */
     valueFormatter?: (value: number) => string;
+    /** Determines whether the chart should be keyboard-navigable with the recharts accessibility layer, `true` by default */
+    accessibilityLayer?: boolean;
 }
 export type BubbleChartFactory = Factory<{
     props: BubbleChartProps;

package/lib/BulletChart/BulletChart.d.ts

@@ -0,0 +1,58 @@
+import { BoxProps, ElementProps, Factory, MantineColor, StylesApiProps } from '@mantine/core';
+export interface BulletChartRange {
+    /** Upper bound value for this range */
+    value: number;
+    /** Background color of the range band */
+    color: MantineColor;
+    /** Optional label for the range */
+    label?: string;
+}
+export type BulletChartStylesNames = 'root' | 'label' | 'trackWrapper' | 'track' | 'range' | 'bar' | 'target' | 'rangeLabel' | 'barLabel' | 'targetLabel';
+export type BulletChartCssVariables = {
+    root: '--bullet-size' | '--bullet-bar-size';
+};
+export interface BulletChartProps extends BoxProps, StylesApiProps<BulletChartFactory>, ElementProps<'div'> {
+    /** Current actual value */
+    value: number;
+    /** Target value, displayed as a marker line */
+    target?: number;
+    /** Qualitative ranges displayed as background bands */
+    ranges: BulletChartRange[];
+    /** Orientation, @default 'horizontal' */
+    orientation?: 'horizontal' | 'vertical';
+    /** Label displayed next to the chart */
+    label?: React.ReactNode;
+    /** Value formatter for tooltip/display and labels */
+    valueFormatter?: (value: number) => string;
+    /** Color of the actual value bar, @default 'white' */
+    barColor?: MantineColor;
+    /** Color of the target marker, @default 'dark' for light, 'white' for dark */
+    targetColor?: MantineColor;
+    /** Height of the chart track area (ranges), @default 32 */
+    size?: number | string;
+    /** Height of the actual value bar, @default 16 */
+    barSize?: number | string;
+    /** Target marker size relative to chart size, @default 0.7 */
+    targetRatio?: number;
+    /** Target marker thickness, @default 2 */
+    targetSize?: number | string;
+    /** Whether to show tooltip on hover, @default false */
+    withTooltip?: boolean;
+    /** Custom tooltip content */
+    getTooltipLabel?: (data: {
+        value: number;
+        target?: number;
+    }) => React.ReactNode;
+}
+export type BulletChartFactory = Factory<{
+    props: BulletChartProps;
+    ref: HTMLDivElement;
+    stylesNames: BulletChartStylesNames;
+    vars: BulletChartCssVariables;
+}>;
+export declare const BulletChart: import("@mantine/core").MantineComponent<{
+    props: BulletChartProps;
+    ref: HTMLDivElement;
+    stylesNames: BulletChartStylesNames;
+    vars: BulletChartCssVariables;
+}>;

package/lib/BulletChart/index.d.ts

@@ -0,0 +1,9 @@
+import type { BulletChartFactory, BulletChartProps, BulletChartRange, BulletChartStylesNames } from './BulletChart';
+export { BulletChart } from './BulletChart';
+export type { BulletChartProps, BulletChartStylesNames, BulletChartFactory, BulletChartRange };
+export declare namespace BulletChart {
+    type Props = BulletChartProps;
+    type StylesNames = BulletChartStylesNames;
+    type Factory = BulletChartFactory;
+    type Range = BulletChartRange;
+}

package/lib/ChartBrush/ChartBrush.d.ts

@@ -0,0 +1,15 @@
+import { BrushProps } from 'recharts';
+import { Factory, StylesApiProps } from '@mantine/core';
+export type ChartBrushStylesNames = 'brush';
+export interface ChartBrushProps extends Omit<BrushProps, 'ref'>, StylesApiProps<ChartBrushFactory> {
+}
+export type ChartBrushFactory = Factory<{
+    props: ChartBrushProps;
+    ref: SVGElement;
+    stylesNames: ChartBrushStylesNames;
+}>;
+export declare const ChartBrush: import("@mantine/core").MantineComponent<{
+    props: ChartBrushProps;
+    ref: SVGElement;
+    stylesNames: ChartBrushStylesNames;
+}>;

package/lib/ChartBrush/index.d.ts

@@ -0,0 +1,2 @@
+export { ChartBrush } from './ChartBrush';
+export type { ChartBrushFactory, ChartBrushProps, ChartBrushStylesNames } from './ChartBrush';

package/lib/DonutChart/DonutChart.d.ts

@@ -60,6 +60,8 @@ export interface DonutChartProps extends BoxProps, StylesApiProps<DonutChartFact
     valueFormatter?: (value: number) => string;
     /** Props passed down to each segment of the chart */
     cellProps?: ((series: DonutChartCell) => Partial<Omit<React.SVGProps<SVGElement>, 'ref'>>) | Partial<Omit<React.SVGProps<SVGElement>, 'ref'>>;
+    /** Determines whether the chart should be keyboard-navigable with the recharts accessibility layer, `true` by default */
+    accessibilityLayer?: boolean;
 }
 export type DonutChartFactory = Factory<{
     props: DonutChartProps;

package/lib/FunnelChart/FunnelChart.d.ts

@@ -47,6 +47,8 @@ export interface FunnelChartProps extends BoxProps, StylesApiProps<FunnelChartFa
     children?: React.ReactNode;
     /** Props passed down to recharts `FunnelChart` component */
     funnelChartProps?: React.ComponentProps<typeof RechartsFunnelChart>;
+    /** Determines whether the chart should be keyboard-navigable with the recharts accessibility layer, `true` by default */
+    accessibilityLayer?: boolean;
 }
 export type FunnelChartFactory = Factory<{
     props: FunnelChartProps;

package/lib/Heatmap/Heatmap.d.ts

@@ -15,6 +15,8 @@ export interface HeatmapProps extends BoxProps, StylesApiProps<HeatmapFactory>,
     endDate?: Date | string;
     /** If set, month labels are displayed @default false */
     withMonthLabels?: boolean;
+    /** Month labels position relative to the heatmap @default 'top' */
+    monthLabelsPosition?: 'top' | 'bottom';
     /** Month labels, array of 12 elements, can be used for localization */
     monthLabels?: string[];
     /** If set, weekday labels are displayed @default false */

package/lib/PieChart/PieChart.d.ts

@@ -59,6 +59,8 @@ export interface PieChartProps extends BoxProps, StylesApiProps<PieChartFactory>
     valueFormatter?: (value: number) => string;
     /** Props passed down to each segment of the chart */
     cellProps?: ((series: PieChartCell) => Partial<Omit<React.SVGProps<SVGElement>, 'ref'>>) | Partial<Omit<React.SVGProps<SVGElement>, 'ref'>>;
+    /** Determines whether the chart should be keyboard-navigable with the recharts accessibility layer, `true` by default */
+    accessibilityLayer?: boolean;
 }
 export type PieChartFactory = Factory<{
     props: PieChartProps;

package/lib/RadarChart/RadarChart.d.ts

@@ -59,6 +59,8 @@ export interface RadarChartProps extends BoxProps, StylesApiProps<RadarChartFact
     activeDotProps?: MantineChartDotProps;
     /** Additional components that are rendered inside recharts `RadarChart` component */
     children?: React.ReactNode;
+    /** Determines whether the chart should be keyboard-navigable with the recharts accessibility layer, `true` by default */
+    accessibilityLayer?: boolean;
 }
 export type RadarChartFactory = Factory<{
     props: RadarChartProps;

package/lib/RadialBarChart/RadialBarChart.d.ts

@@ -34,6 +34,8 @@ export interface RadialBarChartProps extends BoxProps, StylesApiProps<RadialBarC
     legendProps?: Omit<LegendProps, 'ref'>;
     /** Props passed down to `Tooltip` recharts component */
     tooltipProps?: Omit<TooltipProps<any, any>, 'ref'>;
+    /** Determines whether the chart should be keyboard-navigable with the recharts accessibility layer, `true` by default */
+    accessibilityLayer?: boolean;
 }
 export type RadialBarChartFactory = Factory<{
     props: RadialBarChartProps;

package/lib/ScatterChart/ScatterChart.d.ts

@@ -8,11 +8,11 @@ export interface ScatterChartSeries {
     name: string;
     data: Record<string, number>[];
 }
-export type ScatterChartStylesNames = 'scatter' | BaseChartStylesNames | ChartLegendStylesNames | ChartTooltipStylesNames;
+export type ScatterChartStylesNames = 'scatter' | Exclude<BaseChartStylesNames, 'brush'> | ChartLegendStylesNames | ChartTooltipStylesNames;
 export type ScatterChartCssVariables = {
     root: '--chart-text-color' | '--chart-grid-color';
 };
-export interface ScatterChartProps extends Omit<GridChartBaseProps, 'dataKey' | 'data' | 'unit' | 'valueFormatter'>, BoxProps, StylesApiProps<ScatterChartFactory>, ElementProps<'div'> {
+export interface ScatterChartProps extends Omit<GridChartBaseProps, 'dataKey' | 'data' | 'unit' | 'valueFormatter' | 'withBrush' | 'brushProps'>, BoxProps, StylesApiProps<ScatterChartFactory>, ElementProps<'div'> {
     /** Keys that should be used to retrieve data from the data array on x and y axis */
     dataKey: {
         x: string;

package/lib/SunburstChart/SunburstChart.d.ts

@@ -0,0 +1,58 @@
+import { SunburstChartProps as RechartsSunburstChartProps, TooltipProps } from 'recharts';
+import { BoxProps, ElementProps, Factory, MantineColor, StylesApiProps } from '@mantine/core';
+import { ChartTooltipStylesNames } from '../ChartTooltip/ChartTooltip';
+export interface SunburstChartData {
+    name: string;
+    value?: number;
+    color?: MantineColor;
+    children?: SunburstChartData[];
+    [key: string]: unknown;
+}
+export type SunburstChartStylesNames = 'root' | ChartTooltipStylesNames;
+export type SunburstChartCssVariables = {
+    root: '--chart-stroke-color' | '--chart-size';
+};
+export interface SunburstChartProps extends BoxProps, StylesApiProps<SunburstChartFactory>, ElementProps<'div'> {
+    /** Data used to render chart */
+    data: SunburstChartData[];
+    /** Key in data object for the value @default 'value' */
+    dataKey?: string;
+    /** Determines whether the tooltip should be displayed when a node is hovered @default true */
+    withTooltip?: boolean;
+    /** Tooltip animation duration in ms @default 0 */
+    tooltipAnimationDuration?: number;
+    /** Props passed down to `Tooltip` recharts component */
+    tooltipProps?: Omit<TooltipProps<any, any>, 'ref'>;
+    /** Props passed down to recharts `SunburstChart` component */
+    sunburstChartProps?: Partial<Omit<RechartsSunburstChartProps, 'ref' | 'data' | 'dataKey'>>;
+    /** Controls color of the sectors stroke, by default depends on color scheme */
+    strokeColor?: MantineColor;
+    /** Controls chart width and height @default 300 */
+    size?: number;
+    /** Controls the radius of the inner circle at the center of the chart @default 50 */
+    innerRadius?: number;
+    /** Gap between sectors and rings in px @default 1 */
+    gap?: number;
+    /** Angle in degrees from which the chart should start @default 0 */
+    startAngle?: number;
+    /** Angle in degrees at which the chart should end @default 360 */
+    endAngle?: number;
+    /** Determines whether value labels are displayed inside each sector @default false */
+    withLabels?: boolean;
+    /** A function to format values inside the tooltip and labels */
+    valueFormatter?: (value: number) => string;
+    /** Additional elements rendered inside `SunburstChart` component */
+    children?: React.ReactNode;
+}
+export type SunburstChartFactory = Factory<{
+    props: SunburstChartProps;
+    ref: HTMLDivElement;
+    stylesNames: SunburstChartStylesNames;
+    vars: SunburstChartCssVariables;
+}>;
+export declare const SunburstChart: import("@mantine/core").MantineComponent<{
+    props: SunburstChartProps;
+    ref: HTMLDivElement;
+    stylesNames: SunburstChartStylesNames;
+    vars: SunburstChartCssVariables;
+}>;

package/lib/SunburstChart/index.d.ts

@@ -0,0 +1,10 @@
+import type { SunburstChartCssVariables, SunburstChartData, SunburstChartFactory, SunburstChartProps, SunburstChartStylesNames } from './SunburstChart';
+export { SunburstChart } from './SunburstChart';
+export type { SunburstChartProps, SunburstChartStylesNames, SunburstChartCssVariables, SunburstChartFactory, SunburstChartData, };
+export declare namespace SunburstChart {
+    type Props = SunburstChartProps;
+    type StylesNames = SunburstChartStylesNames;
+    type CssVariables = SunburstChartCssVariables;
+    type Factory = SunburstChartFactory;
+    type Data = SunburstChartData;
+}

package/lib/index.d.mts

@@ -1,5 +1,6 @@
 export * from './ChartTooltip/index.js';
 export * from './ChartLegend/index.js';
+export * from './ChartBrush/index.js';
 export * from './AreaChart/index.js';
 export * from './BarChart/index.js';
 export * from './LineChart/index.js';
@@ -16,4 +17,6 @@ export * from './Heatmap/index.js';
 export * from './BarsList/index.js';
 export * from './Treemap/index.js';
 export * from './SankeyChart/index.js';
+export * from './SunburstChart/index.js';
+export * from './BulletChart/index.js';
 export * from './types';

package/lib/index.d.ts

@@ -1,5 +1,6 @@
 export * from './ChartTooltip/index.js';
 export * from './ChartLegend/index.js';
+export * from './ChartBrush/index.js';
 export * from './AreaChart/index.js';
 export * from './BarChart/index.js';
 export * from './LineChart/index.js';
@@ -16,4 +17,6 @@ export * from './Heatmap/index.js';
 export * from './BarsList/index.js';
 export * from './Treemap/index.js';
 export * from './SankeyChart/index.js';
+export * from './SunburstChart/index.js';
+export * from './BulletChart/index.js';
 export * from './types';