@mantine/charts 9.4.3-alpha.0 → 9.5.0

package/esm/BulletChart/BulletChart.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"BulletChart.mjs","names":["classes"],"sources":["../../src/BulletChart/BulletChart.tsx"],"sourcesContent":["import {\n  Box,\n  BoxProps,\n  createVarsResolver,\n  ElementProps,\n  factory,\n  Factory,\n  getThemeColor,\n  MantineColor,\n  rem,\n  StylesApiProps,\n  Tooltip,\n  useMantineTheme,\n  useProps,\n  useStyles,\n} from '@mantine/core';\nimport classes from './BulletChart.module.css';\n\nexport interface BulletChartRange {\n  /** Upper bound value for this range */\n  value: number;\n\n  /** Background color of the range band */\n  color: MantineColor;\n\n  /** Optional label for the range */\n  label?: string;\n}\n\nexport type BulletChartStylesNames =\n  | 'root'\n  | 'label'\n  | 'trackWrapper'\n  | 'track'\n  | 'range'\n  | 'bar'\n  | 'target'\n  | 'rangeLabel'\n  | 'barLabel'\n  | 'targetLabel';\n\nexport type BulletChartCssVariables = {\n  root: '--bullet-size' | '--bullet-bar-size';\n};\n\nexport interface BulletChartProps\n  extends BoxProps, StylesApiProps<BulletChartFactory>, ElementProps<'div'> {\n  /** Current actual value */\n  value: number;\n\n  /** Target value, displayed as a marker line */\n  target?: number;\n\n  /** Qualitative ranges displayed as background bands */\n  ranges: BulletChartRange[];\n\n  /** Orientation, @default 'horizontal' */\n  orientation?: 'horizontal' | 'vertical';\n\n  /** Label displayed next to the chart */\n  label?: React.ReactNode;\n\n  /** Value formatter for tooltip/display and labels */\n  valueFormatter?: (value: number) => string;\n\n  /** Color of the actual value bar, @default 'white' */\n  barColor?: MantineColor;\n\n  /** Color of the target marker, @default 'dark' for light, 'white' for dark */\n  targetColor?: MantineColor;\n\n  /** Height of the chart track area (ranges), @default 32 */\n  size?: number | string;\n\n  /** Height of the actual value bar, @default 16 */\n  barSize?: number | string;\n\n  /** Target marker size relative to chart size, @default 0.7 */\n  targetRatio?: number;\n\n  /** Target marker thickness, @default 2 */\n  targetSize?: number | string;\n\n  /** Whether to show tooltip on hover, @default false */\n  withTooltip?: boolean;\n\n  /** Custom tooltip content */\n  getTooltipLabel?: (data: { value: number; target?: number }) => React.ReactNode;\n}\n\nexport type BulletChartFactory = Factory<{\n  props: BulletChartProps;\n  ref: HTMLDivElement;\n  stylesNames: BulletChartStylesNames;\n  vars: BulletChartCssVariables;\n}>;\n\nconst defaultProps = {\n  orientation: 'horizontal',\n  size: 32,\n  barSize: 16,\n  targetRatio: 0.7,\n  targetSize: 2,\n  withTooltip: false,\n} satisfies Partial<BulletChartProps>;\n\nconst varsResolver = createVarsResolver<BulletChartFactory>((_theme, { size, barSize }) => ({\n  root: {\n    '--bullet-size': rem(size),\n    '--bullet-bar-size': rem(barSize),\n  },\n}));\n\nexport const BulletChart = factory<BulletChartFactory>((_props) => {\n  const props = useProps('BulletChart', defaultProps, _props);\n  const {\n    classNames,\n    className,\n    style,\n    styles,\n    unstyled,\n    vars,\n    attributes,\n    value,\n    target,\n    ranges,\n    orientation,\n    label,\n    valueFormatter,\n    barColor,\n    targetColor,\n    size,\n    barSize,\n    targetRatio,\n    targetSize,\n    withTooltip,\n    getTooltipLabel,\n    variant,\n    ...others\n  } = props;\n\n  const theme = useMantineTheme();\n\n  const getStyles = useStyles<BulletChartFactory>({\n    name: 'BulletChart',\n    classes,\n    props,\n    className,\n    style,\n    classNames,\n    styles,\n    unstyled,\n    attributes,\n    vars,\n    varsResolver,\n  });\n\n  const isVertical = orientation === 'vertical';\n  const maxRange = Math.max(...ranges.map((r) => r.value), 0);\n  const formatValue = (v: number) => (valueFormatter ? valueFormatter(v) : v.toString());\n\n  // Clamp positions/sizes to the track so out-of-range values and targets never overflow it\n  const toPercentage = (v: number) =>\n    maxRange > 0 ? Math.max(0, Math.min((v / maxRange) * 100, 100)) : 0;\n\n  const resolvedBarColor = barColor ? getThemeColor(barColor, theme) : 'var(--mantine-color-white)';\n\n  const resolvedTargetColor = targetColor ? getThemeColor(targetColor, theme) : undefined;\n\n  const sortedRanges = [...ranges].sort((a, b) => b.value - a.value);\n\n  const rangeBands = sortedRanges.map((range, index) => {\n    const percentage = toPercentage(range.value);\n    const sizeStyle = isVertical\n      ? { height: `${percentage}%`, bottom: 0 }\n      : { width: `${percentage}%` };\n\n    return (\n      <div\n        key={index}\n        {...getStyles('range', {\n          style: {\n            ...sizeStyle,\n            backgroundColor: getThemeColor(range.color, theme),\n          },\n        })}\n      />\n    );\n  });\n\n  const rangeLabels = sortedRanges.map((range, index) => {\n    const percentage = toPercentage(range.value);\n    const positionStyle = isVertical ? { bottom: `${percentage}%` } : { left: `${percentage}%` };\n\n    return (\n      <div key={index} {...getStyles('rangeLabel', { style: positionStyle })}>\n        {formatValue(range.value)}\n      </div>\n    );\n  });\n\n  const barPercentage = toPercentage(value);\n  const barSizeStyle = isVertical\n    ? { height: `${barPercentage}%`, bottom: 0 }\n    : { width: `${barPercentage}%` };\n\n  const barElement = (\n    <div\n      {...getStyles('bar', {\n        style: {\n          ...barSizeStyle,\n          backgroundColor: resolvedBarColor,\n        },\n      })}\n    />\n  );\n\n  const barLabelPosition = isVertical\n    ? { bottom: `${barPercentage}%` }\n    : { left: `${barPercentage}%` };\n\n  const barLabelElement = (\n    <div {...getStyles('barLabel', { style: barLabelPosition })}>{formatValue(value)}</div>\n  );\n\n  const targetPercentage = target != null ? toPercentage(target) : 0;\n\n  const targetElement =\n    target != null ? (\n      <div\n        {...getStyles('target', {\n          style: isVertical\n            ? {\n                bottom: `${targetPercentage}%`,\n                width: `${targetRatio! * 100}%`,\n                height: rem(targetSize),\n                backgroundColor: resolvedTargetColor,\n              }\n            : {\n                left: `${targetPercentage}%`,\n                height: `${targetRatio! * 100}%`,\n                width: rem(targetSize),\n                backgroundColor: resolvedTargetColor,\n              },\n        })}\n      />\n    ) : null;\n\n  const targetLabelElement =\n    target != null ? (\n      <div\n        {...getStyles('targetLabel', {\n          style: isVertical ? { bottom: `${targetPercentage}%` } : { left: `${targetPercentage}%` },\n        })}\n      >\n        {formatValue(target)}\n      </div>\n    ) : null;\n\n  const getDefaultTooltipLabel = () => {\n    const parts = [`Value: ${formatValue(value)}`];\n    if (target != null) {\n      parts.push(`Target: ${formatValue(target)}`);\n    }\n    return parts.join(' / ');\n  };\n\n  const tooltipLabel = getTooltipLabel\n    ? getTooltipLabel({ value, target })\n    : getDefaultTooltipLabel();\n\n  const trackWrapper = (\n    <div {...getStyles('trackWrapper')} data-orientation={orientation}>\n      {rangeLabels}\n      {targetLabelElement}\n      <div {...getStyles('track')} data-orientation={orientation}>\n        {rangeBands}\n        {barElement}\n        {targetElement}\n      </div>\n      {barLabelElement}\n    </div>\n  );\n\n  return (\n    <Box {...getStyles('root')} variant={variant} mod={{ orientation }} {...others}>\n      {label && <div {...getStyles('label')}>{label}</div>}\n      {withTooltip ? (\n        <Tooltip label={tooltipLabel} position={isVertical ? 'right' : 'top'}>\n          {trackWrapper}\n        </Tooltip>\n      ) : (\n        trackWrapper\n      )}\n    </Box>\n  );\n});\n\nBulletChart.displayName = '@mantine/charts/BulletChart';\nBulletChart.classes = classes;\nBulletChart.varsResolver = varsResolver;\n"],"mappings":"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"}

package/esm/BulletChart/BulletChart.module.mjs

@@ -0,0 +1,18 @@
+"use client";
+//#region packages/@mantine/charts/src/BulletChart/BulletChart.module.css
+var BulletChart_module_default = {
+	"root": "m_f1b033",
+	"label": "m_1ce939c3",
+	"trackWrapper": "m_dcd57f19",
+	"track": "m_1d61ac1a",
+	"range": "m_1d3df40c",
+	"bar": "m_8499ea2",
+	"target": "m_8dec10a2",
+	"rangeLabel": "m_18314248",
+	"barLabel": "m_73d6c572",
+	"targetLabel": "m_abeb9372"
+};
+//#endregion
+export { BulletChart_module_default as default };
+
+//# sourceMappingURL=BulletChart.module.mjs.map

package/esm/BulletChart/BulletChart.module.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"BulletChart.module.mjs","names":[],"sources":["../../src/BulletChart/BulletChart.module.css"],"sourcesContent":[".root {\n  display: flex;\n  align-items: center;\n  gap: var(--mantine-spacing-md);\n  width: 100%;\n\n  &[data-orientation='vertical'] {\n    flex-direction: column;\n    width: auto;\n    height: 100%;\n  }\n}\n\n.label {\n  font-size: var(--mantine-font-size-sm);\n  font-weight: var(--mantine-font-weight-medium);\n  white-space: nowrap;\n  color: var(--mantine-color-text);\n}\n\n.trackWrapper {\n  position: relative;\n  flex: 1;\n  padding-top: calc(var(--mantine-font-size-xs) + rem(4px));\n  padding-bottom: calc(var(--mantine-font-size-xs) + rem(4px));\n\n  &[data-orientation='vertical'] {\n    flex: 1;\n    height: 100%;\n    padding-top: 0;\n    padding-bottom: 0;\n    padding-left: calc(var(--mantine-font-size-xs) + 40px);\n    padding-right: calc(var(--mantine-font-size-xs) + 40px);\n  }\n}\n\n.track {\n  position: relative;\n  height: var(--bullet-size);\n  border-radius: var(--mantine-radius-sm);\n  overflow: hidden;\n\n  [data-orientation='vertical'] > & {\n    width: var(--bullet-size);\n    height: 100%;\n  }\n}\n\n.range {\n  position: absolute;\n  top: 0;\n  left: 0;\n  height: 100%;\n  border-radius: var(--mantine-radius-sm);\n\n  [data-orientation='vertical'] > .track > & {\n    top: auto;\n    left: 0;\n    width: 100%;\n    height: auto;\n    border-radius: var(--mantine-radius-sm);\n  }\n}\n\n.bar {\n  position: absolute;\n  top: 50%;\n  left: 0;\n  height: var(--bullet-bar-size);\n  transform: translateY(-50%);\n  border-radius: 0 var(--mantine-radius-xs) var(--mantine-radius-xs) 0;\n  z-index: 1;\n\n  [data-orientation='vertical'] > .track > & {\n    top: auto;\n    left: 50%;\n    width: var(--bullet-bar-size);\n    height: auto;\n    transform: translateX(-50%);\n    border-radius: var(--mantine-radius-xs) var(--mantine-radius-xs) 0 0;\n  }\n}\n\n.target {\n  position: absolute;\n  top: 50%;\n  transform: translateY(-50%) translateX(-50%);\n  z-index: 2;\n  border-radius: var(--mantine-radius-xs);\n\n  @mixin where-light {\n    background-color: var(--mantine-color-dark-filled);\n  }\n\n  @mixin where-dark {\n    background-color: var(--mantine-color-white);\n  }\n\n  [data-orientation='vertical'] > .track > & {\n    top: auto;\n    left: 50%;\n    transform: translateX(-50%) translateY(50%);\n  }\n}\n\n.rangeLabel {\n  position: absolute;\n  top: 0;\n  transform: translateX(-50%);\n  font-size: var(--mantine-font-size-xs);\n  color: var(--mantine-color-dimmed);\n  white-space: nowrap;\n  line-height: 1;\n\n  [data-orientation='vertical'] > & {\n    top: auto;\n    left: auto;\n    right: 0;\n    transform: translateY(50%);\n  }\n}\n\n.barLabel {\n  position: absolute;\n  bottom: 0;\n  transform: translateX(-50%);\n  font-size: var(--mantine-font-size-xs);\n  font-weight: var(--mantine-font-weight-bold);\n  color: var(--mantine-color-text);\n  white-space: nowrap;\n  line-height: 1;\n\n  [data-orientation='vertical'] > & {\n    bottom: auto;\n    left: 0;\n    transform: translateY(50%);\n  }\n}\n\n.targetLabel {\n  position: absolute;\n  top: 0;\n  transform: translateX(-50%);\n  font-size: var(--mantine-font-size-xs);\n  color: var(--mantine-color-dimmed);\n  white-space: nowrap;\n  line-height: 1;\n\n  [data-orientation='vertical'] > & {\n    top: auto;\n    left: auto;\n    right: 0;\n    transform: translateY(50%);\n  }\n}\n"],"mappings":""}

package/esm/ChartBrush/ChartBrush.mjs

@@ -0,0 +1,35 @@
+"use client";
+import ChartBrush_module_default from "./ChartBrush.module.mjs";
+import { factory, useProps, useStyles } from "@mantine/core";
+import { jsx } from "react/jsx-runtime";
+import { Brush } from "recharts";
+//#region packages/@mantine/charts/src/ChartBrush/ChartBrush.tsx
+const defaultProps = {};
+const ChartBrush = factory((_props) => {
+	const props = useProps("ChartBrush", defaultProps, _props);
+	const { classNames, className, style, styles, unstyled, vars, attributes, ...others } = props;
+	const getStyles = useStyles({
+		name: "ChartBrush",
+		classes: ChartBrush_module_default,
+		props,
+		className,
+		style,
+		classNames,
+		styles,
+		unstyled,
+		attributes
+	});
+	return /* @__PURE__ */ jsx(Brush, {
+		dy: 8,
+		stroke: "var(--chart-grid-color)",
+		fill: "var(--mantine-color-body)",
+		...others,
+		...getStyles("brush")
+	});
+});
+ChartBrush.classes = ChartBrush_module_default;
+ChartBrush.displayName = "@mantine/charts/ChartBrush";
+//#endregion
+export { ChartBrush };
+
+//# sourceMappingURL=ChartBrush.mjs.map

package/esm/ChartBrush/ChartBrush.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"ChartBrush.mjs","names":["classes"],"sources":["../../src/ChartBrush/ChartBrush.tsx"],"sourcesContent":["import { Brush, BrushProps } from 'recharts';\nimport { factory, Factory, StylesApiProps, useProps, useStyles } from '@mantine/core';\nimport classes from './ChartBrush.module.css';\n\nexport type ChartBrushStylesNames = 'brush';\n\nexport interface ChartBrushProps\n  extends Omit<BrushProps, 'ref'>, StylesApiProps<ChartBrushFactory> {}\n\nexport type ChartBrushFactory = Factory<{\n  props: ChartBrushProps;\n  ref: SVGElement;\n  stylesNames: ChartBrushStylesNames;\n}>;\n\nconst defaultProps = {} satisfies Partial<ChartBrushProps>;\n\nexport const ChartBrush = factory<ChartBrushFactory>((_props) => {\n  const props = useProps('ChartBrush', defaultProps, _props);\n  const { classNames, className, style, styles, unstyled, vars, attributes, ...others } = props;\n\n  const getStyles = useStyles<ChartBrushFactory>({\n    name: 'ChartBrush',\n    classes,\n    props,\n    className,\n    style,\n    classNames,\n    styles,\n    unstyled,\n    attributes,\n  });\n\n  return (\n    <Brush\n      dy={8}\n      stroke=\"var(--chart-grid-color)\"\n      fill=\"var(--mantine-color-body)\"\n      {...others}\n      {...getStyles('brush')}\n    />\n  );\n});\n\nChartBrush.classes = classes;\nChartBrush.displayName = '@mantine/charts/ChartBrush';\n"],"mappings":";;;;;;AAeA,MAAM,eAAe,CAAC;AAEtB,MAAa,aAAa,SAA4B,WAAW;CAC/D,MAAM,QAAQ,SAAS,cAAc,cAAc,MAAM;CACzD,MAAM,EAAE,YAAY,WAAW,OAAO,QAAQ,UAAU,MAAM,YAAY,GAAG,WAAW;CAExF,MAAM,YAAY,UAA6B;EAC7C,MAAM;EACN,SAAA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;CACF,CAAC;CAED,OACE,oBAAC,OAAD;EACE,IAAI;EACJ,QAAO;EACP,MAAK;EACL,GAAI;EACJ,GAAI,UAAU,OAAO;CACtB,CAAA;AAEL,CAAC;AAED,WAAW,UAAUA;AACrB,WAAW,cAAc"}

package/esm/ChartBrush/ChartBrush.module.mjs

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

package/esm/ChartBrush/ChartBrush.module.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"ChartBrush.module.mjs","names":[],"sources":["../../src/ChartBrush/ChartBrush.module.css"],"sourcesContent":[".brush {\n  & :where(text) {\n    font-size: var(--mantine-font-size-xs);\n    fill: var(--chart-text-color, var(--mantine-color-dimmed));\n    font-family: var(--mantine-font-family);\n  }\n\n  & :where(:global(.recharts-brush-slide)) {\n    fill: var(--mantine-primary-color-light);\n    fill-opacity: 1;\n  }\n\n  & :where(:global(.recharts-brush-traveller)) rect {\n    fill: var(--mantine-primary-color-filled);\n  }\n}\n"],"mappings":""}

package/esm/CompositeChart/CompositeChart.mjs

@@ -1,12 +1,13 @@
 "use client";
 import { ChartTooltip } from "../ChartTooltip/ChartTooltip.mjs";
 import { ChartLegend } from "../ChartLegend/ChartLegend.mjs";
+import { ChartBrush } from "../ChartBrush/ChartBrush.mjs";
 import { PointLabel } from "../PointLabel/PointLabel.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 { createElement, useState } from "react";
 import { Area, Bar, CartesianGrid, ComposedChart, Label, LabelList, Legend, Line, ReferenceLine, ResponsiveContainer, Tooltip as Tooltip$1, XAxis, YAxis } from "recharts";
+import { createElement, useState } from "react";
 //#region packages/@mantine/charts/src/CompositeChart/CompositeChart.tsx
 const defaultProps = {
 	withXAxis: true,
@@ -19,7 +20,8 @@ const defaultProps = {
 	withDots: true,
 	connectNulls: true,
 	strokeWidth: 2,
-	curveType: "monotone"
+	curveType: "monotone",
+	accessibilityLayer: true
 };
 const varsResolver = createVarsResolver((theme, { textColor, gridColor }) => ({ root: {
 	"--chart-text-color": textColor ? getThemeColor(textColor, theme) : void 0,
@@ -27,7 +29,7 @@ const varsResolver = createVarsResolver((theme, { textColor, gridColor }) => ({
 } }));
 const CompositeChart = factory((_props) => {
 	const props = useProps("CompositeChart", defaultProps, _props);
-	const { classNames, className, style, styles, unstyled, vars, data, withLegend, legendProps, series, onMouseLeave, dataKey, withTooltip, withXAxis, withYAxis, gridAxis, tickLine, xAxisProps, yAxisProps, unit, tooltipAnimationDuration, strokeDasharray, gridProps, tooltipProps, referenceLines, withDots, dotProps, activeDotProps, strokeWidth, connectNulls, curveType, dir, valueFormatter, children, lineProps, xAxisLabel, yAxisLabel, withRightYAxis, rightYAxisLabel, rightYAxisProps, withPointLabels, areaProps, barProps, withBarValueLabel, minBarSize, maxBarWidth, composedChartProps, attributes, ...others } = props;
+	const { classNames, className, style, styles, unstyled, vars, data, withLegend, legendProps, series, onMouseLeave, dataKey, withTooltip, withXAxis, withYAxis, gridAxis, tickLine, xAxisProps, yAxisProps, unit, tooltipAnimationDuration, strokeDasharray, gridProps, tooltipProps, referenceLines, withDots, dotProps, activeDotProps, strokeWidth, connectNulls, curveType, dir, valueFormatter, children, lineProps, xAxisLabel, yAxisLabel, withRightYAxis, rightYAxisLabel, rightYAxisProps, withPointLabels, areaProps, barProps, withBarValueLabel, minBarSize, maxBarWidth, composedChartProps, attributes, accessibilityLayer, withBrush, brushProps, ...others } = props;
 	const theme = useMantineTheme();
 	const withXTickLine = gridAxis !== "none" && (tickLine === "x" || tickLine === "xy");
 	const withYTickLine = gridAxis !== "none" && (tickLine === "y" || tickLine === "xy");
@@ -183,6 +185,7 @@ const CompositeChart = factory((_props) => {
 					left: yAxisLabel ? 10 : void 0,
 					right: yAxisLabel ? 5 : void 0
 				},
+				accessibilityLayer,
 				...composedChartProps,
 				children: [
 					withLegend && /* @__PURE__ */ jsx(Legend, {
@@ -291,6 +294,12 @@ const CompositeChart = factory((_props) => {
 					}),
 					lines,
 					referenceLinesItems,
+					withBrush && /* @__PURE__ */ jsx(ChartBrush, {
+						dataKey,
+						classNames: resolvedClassNames,
+						styles: resolvedStyles,
+						...brushProps
+					}),
 					children
 				]
 			})

package/esm/CompositeChart/CompositeChart.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"CompositeChart.mjs","names":["ReChartsCompositeChart","Tooltip","classes"],"sources":["../../src/CompositeChart/CompositeChart.tsx"],"sourcesContent":["import { useState } from 'react';\nimport {\n  Area,\n  AreaProps,\n  Bar,\n  BarProps,\n  CartesianGrid,\n  Label,\n  LabelList,\n  Legend,\n  Line,\n  LineProps,\n  ComposedChart as ReChartsCompositeChart,\n  ReferenceLine,\n  ResponsiveContainer,\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  StylesApiProps,\n  useMantineTheme,\n  useProps,\n  useResolvedStylesApi,\n  useStyles,\n} from '@mantine/core';\nimport { ChartLegend, ChartLegendStylesNames } from '../ChartLegend';\nimport { ChartTooltip, ChartTooltipStylesNames } from '../ChartTooltip';\nimport { PointLabel } from '../PointLabel/PointLabel';\nimport type {\n  BaseChartStylesNames,\n  ChartSeries,\n  GridChartBaseProps,\n  MantineChartDotProps,\n} from '../types';\nimport classes from '../grid-chart.module.css';\n\nexport type CompositeChartCurveType =\n  | 'bump'\n  | 'linear'\n  | 'natural'\n  | 'monotone'\n  | 'step'\n  | 'stepBefore'\n  | 'stepAfter';\n\nexport interface CompositeChartSeries extends ChartSeries {\n  type: 'line' | 'area' | 'bar';\n  strokeDasharray?: string | number;\n}\n\nexport type CompositeChartStylesNames =\n  | 'line'\n  | 'area'\n  | 'bar'\n  | BaseChartStylesNames\n  | ChartLegendStylesNames\n  | ChartTooltipStylesNames;\n\nexport type CompositeChartCssVariables = {\n  root: '--chart-text-color' | '--chart-grid-color';\n};\n\nexport interface CompositeChartProps\n  extends\n    BoxProps,\n    Omit<GridChartBaseProps, 'orientation'>,\n    StylesApiProps<CompositeChartFactory>,\n    ElementProps<'div'> {\n  /** Data used to display chart */\n  data: Record<string, any>[];\n\n  /** An array of objects with `name` and `color` keys. Determines which data should be consumed from the `data` array. */\n  series: CompositeChartSeries[];\n\n  /** Type of the curve @default 'monotone' */\n  curveType?: CompositeChartCurveType;\n\n  /** Determines whether dots should be displayed @default true */\n  withDots?: boolean;\n\n  /** Props passed down to all dots. Ignored if `withDots={false}` is set. */\n  dotProps?: MantineChartDotProps;\n\n  /** Props passed down to all active dots. Ignored if `withDots={false}` is set. */\n  activeDotProps?: MantineChartDotProps;\n\n  /** Stroke width for the chart lines @default 2 */\n  strokeWidth?: number;\n\n  /** Determines whether points with `null` values should be connected @default true */\n  connectNulls?: boolean;\n\n  /** Additional components that are rendered inside recharts `AreaChart` component */\n  children?: React.ReactNode;\n\n  /** Props passed down to recharts `Line` component */\n  lineProps?:\n    | ((series: CompositeChartSeries) => Partial<Omit<LineProps, 'ref'>>)\n    | Partial<Omit<LineProps, 'ref'>>;\n\n  /** Props passed down to recharts `Area` component */\n  areaProps?:\n    | ((series: CompositeChartSeries) => Partial<Omit<AreaProps<any, any>, 'ref'>>)\n    | Partial<Omit<AreaProps<any, any>, 'ref'>>;\n\n  /** Props passed down to recharts `Bar` component */\n  barProps?:\n    | ((series: CompositeChartSeries) => Partial<Omit<BarProps, 'ref'>>)\n    | Partial<Omit<BarProps, 'ref'>>;\n\n  /** Determines whether each point should have associated label @default false */\n  withPointLabels?: boolean;\n\n  /** Determines whether a label with bar value should be displayed on top of each bar @default false */\n  withBarValueLabel?: boolean;\n\n  /** Sets minimum height of the bar in px @default 0 */\n  minBarSize?: number;\n\n  /** Maximum bar width in px */\n  maxBarWidth?: number;\n\n  /** Props passed down to recharts `AreaChart` component */\n  composedChartProps?: React.ComponentProps<typeof ReChartsCompositeChart>;\n}\n\nexport type CompositeChartFactory = Factory<{\n  props: CompositeChartProps;\n  ref: HTMLDivElement;\n  stylesNames: CompositeChartStylesNames;\n  vars: CompositeChartCssVariables;\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  withDots: true,\n  connectNulls: true,\n  strokeWidth: 2,\n  curveType: 'monotone',\n} satisfies Partial<CompositeChartProps>;\n\nconst varsResolver = createVarsResolver<CompositeChartFactory>(\n  (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);\n\nexport const CompositeChart = factory<CompositeChartFactory>((_props) => {\n  const props = useProps('CompositeChart', defaultProps, _props);\n  const {\n    classNames,\n    className,\n    style,\n    styles,\n    unstyled,\n    vars,\n    data,\n    withLegend,\n    legendProps,\n    series,\n    onMouseLeave,\n    dataKey,\n    withTooltip,\n    withXAxis,\n    withYAxis,\n    gridAxis,\n    tickLine,\n    xAxisProps,\n    yAxisProps,\n    unit,\n    tooltipAnimationDuration,\n    strokeDasharray,\n    gridProps,\n    tooltipProps,\n    referenceLines,\n    withDots,\n    dotProps,\n    activeDotProps,\n    strokeWidth,\n    connectNulls,\n    curveType,\n    dir,\n    valueFormatter,\n    children,\n    lineProps,\n    xAxisLabel,\n    yAxisLabel,\n    withRightYAxis,\n    rightYAxisLabel,\n    rightYAxisProps,\n    withPointLabels,\n    areaProps,\n    barProps,\n    withBarValueLabel,\n    minBarSize,\n    maxBarWidth,\n    composedChartProps,\n    attributes,\n    ...others\n  } = props;\n\n  const theme = useMantineTheme();\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  const { resolvedClassNames, resolvedStyles } = useResolvedStylesApi<CompositeChartFactory>({\n    classNames,\n    styles,\n    props,\n  });\n\n  const getStyles = useStyles<CompositeChartFactory>({\n    name: 'CompositeChart',\n    classes,\n    props,\n    className,\n    style,\n    classNames,\n    styles,\n    unstyled,\n    attributes,\n    vars,\n    varsResolver,\n  });\n\n  const lines = series.map((item) => {\n    const color = getThemeColor(item.color, theme);\n    const dimmed = shouldHighlight && highlightedArea !== item.name;\n\n    if (item.type === 'line') {\n      return (\n        <Line\n          {...getStyles('line')}\n          key={item.name}\n          name={item.name}\n          dataKey={item.name}\n          dot={\n            withDots\n              ? {\n                  fillOpacity: dimmed ? 0 : 1,\n                  strokeOpacity: dimmed ? 0 : 1,\n                  strokeWidth: 1,\n                  fill: color,\n                  stroke: color,\n                  ...dotProps,\n                }\n              : false\n          }\n          activeDot={\n            withDots\n              ? { fill: 'var(--mantine-color-white)', stroke: color, ...activeDotProps }\n              : false\n          }\n          fill={color}\n          stroke={color}\n          strokeWidth={strokeWidth}\n          isAnimationActive={false}\n          fillOpacity={dimmed ? 0 : 1}\n          strokeOpacity={dimmed ? 0.5 : 1}\n          connectNulls={connectNulls}\n          type={curveType}\n          strokeDasharray={item.strokeDasharray}\n          yAxisId={item.yAxisId || undefined}\n          label={withPointLabels ? <PointLabel valueFormatter={valueFormatter} /> : undefined}\n          {...(typeof lineProps === 'function' ? lineProps(item) : lineProps)}\n        />\n      );\n    }\n\n    if (item.type === 'area') {\n      return (\n        <Area\n          {...getStyles('area')}\n          key={item.name}\n          name={item.name}\n          type={curveType}\n          dataKey={item.name}\n          fill={color}\n          strokeWidth={strokeWidth}\n          stroke={color}\n          isAnimationActive={false}\n          connectNulls={connectNulls}\n          dot={\n            withDots\n              ? {\n                  fillOpacity: dimmed ? 0 : 1,\n                  strokeOpacity: dimmed ? 0 : 1,\n                  strokeWidth: 1,\n                  fill: color,\n                  stroke: color,\n                  ...dotProps,\n                }\n              : false\n          }\n          activeDot={\n            withDots\n              ? {\n                  fill: theme.white,\n                  stroke: color,\n                  strokeWidth: 2,\n                  r: 4,\n                  ...activeDotProps,\n                }\n              : false\n          }\n          fillOpacity={dimmed ? 0 : 0.2}\n          strokeOpacity={dimmed ? 0.5 : 1}\n          strokeDasharray={item.strokeDasharray}\n          yAxisId={item.yAxisId || undefined}\n          label={withPointLabels ? <PointLabel valueFormatter={valueFormatter} /> : undefined}\n          {...(typeof areaProps === 'function' ? areaProps(item) : areaProps)}\n        />\n      );\n    }\n\n    if (item.type === 'bar') {\n      return (\n        <Bar\n          {...getStyles('bar')}\n          key={item.name}\n          name={item.name}\n          dataKey={item.name}\n          fill={color}\n          stroke={color}\n          isAnimationActive={false}\n          fillOpacity={dimmed ? 0.1 : 1}\n          strokeOpacity={dimmed ? 0.2 : 0}\n          yAxisId={item.yAxisId || undefined}\n          minPointSize={minBarSize}\n          {...(typeof barProps === 'function' ? barProps(item) : barProps)}\n        >\n          {withBarValueLabel && (\n            <LabelList\n              position=\"top\"\n              fontSize={12}\n              fill=\"var(--chart-bar-label-color, var(--mantine-color-dimmed))\"\n              formatter={(val: any) => valueFormatter?.(val as any)}\n            />\n          )}\n        </Bar>\n      );\n    }\n\n    return null;\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        yAxisId={line.yAxisId || undefined}\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 sharedYAxisProps = {\n    axisLine: false,\n    type: 'number' as const,\n    tickLine: withYTickLine ? { stroke: 'currentColor' } : false,\n    allowDecimals: true,\n    unit,\n    tickFormatter: valueFormatter,\n    ...getStyles('axis'),\n  };\n\n  return (\n    <Box {...getStyles('root')} onMouseLeave={handleMouseLeave} dir={dir || 'ltr'} {...others}>\n      <ResponsiveContainer {...getStyles('container')}>\n        <ReChartsCompositeChart\n          data={data}\n          maxBarSize={maxBarWidth}\n          margin={{\n            bottom: xAxisLabel ? 30 : undefined,\n            left: yAxisLabel ? 10 : undefined,\n            right: yAxisLabel ? 5 : undefined,\n          }}\n          {...composedChartProps}\n        >\n          {withLegend && (\n            <Legend\n              verticalAlign=\"top\"\n              content={(payload) => (\n                <ChartLegend\n                  payload={payload.payload}\n                  onHighlight={setHighlightedArea}\n                  legendPosition={legendProps?.verticalAlign || 'top'}\n                  classNames={resolvedClassNames}\n                  styles={resolvedStyles}\n                  series={series}\n                  attributes={attributes}\n                />\n              )}\n              {...legendProps}\n            />\n          )}\n\n          <XAxis\n            hide={!withXAxis}\n            dataKey={dataKey}\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            {...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\n          <YAxis\n            orientation=\"left\"\n            tick={{ transform: 'translate(-10, 0)', fontSize: 12, fill: 'currentColor' }}\n            hide={!withYAxis}\n            {...sharedYAxisProps}\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          <YAxis\n            yAxisId=\"right\"\n            orientation=\"right\"\n            tick={{ transform: 'translate(10, 0)', fontSize: 12, fill: 'currentColor' }}\n            hide={!withRightYAxis}\n            {...sharedYAxisProps}\n            {...rightYAxisProps}\n          >\n            {rightYAxisLabel && (\n              <Label\n                position=\"insideRight\"\n                angle={90}\n                textAnchor=\"middle\"\n                fontSize={12}\n                offset={-5}\n                {...getStyles('axisLabel')}\n              >\n                {rightYAxisLabel}\n              </Label>\n            )}\n            {yAxisProps?.children}\n          </YAxis>\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\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                  label={labelFormatter && payload ? labelFormatter(label, payload) : label}\n                  payload={payload}\n                  unit={unit}\n                  classNames={resolvedClassNames}\n                  styles={resolvedStyles}\n                  series={series}\n                  valueFormatter={valueFormatter}\n                  attributes={attributes}\n                />\n              )}\n              {...tooltipProps}\n            />\n          )}\n\n          {lines}\n          {referenceLinesItems}\n          {children}\n        </ReChartsCompositeChart>\n      </ResponsiveContainer>\n    </Box>\n  );\n});\n\nCompositeChart.displayName = '@mantine/charts/CompositeChart';\nCompositeChart.classes = classes;\nCompositeChart.varsResolver = varsResolver;\n\nexport namespace CompositeChart {\n  export type Props = CompositeChartProps;\n  export type StylesNames = CompositeChartStylesNames;\n  export type CssVariables = CompositeChartCssVariables;\n  export type Factory = CompositeChartFactory;\n  export type Series = CompositeChartSeries;\n  export type CurveType = CompositeChartCurveType;\n}\n"],"mappings":"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"}
+{"version":3,"file":"CompositeChart.mjs","names":["ReChartsCompositeChart","Tooltip","classes"],"sources":["../../src/CompositeChart/CompositeChart.tsx"],"sourcesContent":["import { useState } from 'react';\nimport {\n  Area,\n  AreaProps,\n  Bar,\n  BarProps,\n  CartesianGrid,\n  Label,\n  LabelList,\n  Legend,\n  Line,\n  LineProps,\n  ComposedChart as ReChartsCompositeChart,\n  ReferenceLine,\n  ResponsiveContainer,\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  StylesApiProps,\n  useMantineTheme,\n  useProps,\n  useResolvedStylesApi,\n  useStyles,\n} from '@mantine/core';\nimport { ChartBrush } from '../ChartBrush';\nimport { ChartLegend, ChartLegendStylesNames } from '../ChartLegend';\nimport { ChartTooltip, ChartTooltipStylesNames } from '../ChartTooltip';\nimport { PointLabel } from '../PointLabel/PointLabel';\nimport type {\n  BaseChartStylesNames,\n  ChartSeries,\n  GridChartBaseProps,\n  MantineChartDotProps,\n} from '../types';\nimport classes from '../grid-chart.module.css';\n\nexport type CompositeChartCurveType =\n  | 'bump'\n  | 'linear'\n  | 'natural'\n  | 'monotone'\n  | 'step'\n  | 'stepBefore'\n  | 'stepAfter';\n\nexport interface CompositeChartSeries extends ChartSeries {\n  type: 'line' | 'area' | 'bar';\n  strokeDasharray?: string | number;\n}\n\nexport type CompositeChartStylesNames =\n  | 'line'\n  | 'area'\n  | 'bar'\n  | BaseChartStylesNames\n  | ChartLegendStylesNames\n  | ChartTooltipStylesNames;\n\nexport type CompositeChartCssVariables = {\n  root: '--chart-text-color' | '--chart-grid-color';\n};\n\nexport interface CompositeChartProps\n  extends\n    BoxProps,\n    Omit<GridChartBaseProps, 'orientation'>,\n    StylesApiProps<CompositeChartFactory>,\n    ElementProps<'div'> {\n  /** Data used to display chart */\n  data: Record<string, any>[];\n\n  /** An array of objects with `name` and `color` keys. Determines which data should be consumed from the `data` array. */\n  series: CompositeChartSeries[];\n\n  /** Type of the curve @default 'monotone' */\n  curveType?: CompositeChartCurveType;\n\n  /** Determines whether dots should be displayed @default true */\n  withDots?: boolean;\n\n  /** Props passed down to all dots. Ignored if `withDots={false}` is set. */\n  dotProps?: MantineChartDotProps;\n\n  /** Props passed down to all active dots. Ignored if `withDots={false}` is set. */\n  activeDotProps?: MantineChartDotProps;\n\n  /** Stroke width for the chart lines @default 2 */\n  strokeWidth?: number;\n\n  /** Determines whether points with `null` values should be connected @default true */\n  connectNulls?: boolean;\n\n  /** Additional components that are rendered inside recharts `AreaChart` component */\n  children?: React.ReactNode;\n\n  /** Props passed down to recharts `Line` component */\n  lineProps?:\n    | ((series: CompositeChartSeries) => Partial<Omit<LineProps, 'ref'>>)\n    | Partial<Omit<LineProps, 'ref'>>;\n\n  /** Props passed down to recharts `Area` component */\n  areaProps?:\n    | ((series: CompositeChartSeries) => Partial<Omit<AreaProps<any, any>, 'ref'>>)\n    | Partial<Omit<AreaProps<any, any>, 'ref'>>;\n\n  /** Props passed down to recharts `Bar` component */\n  barProps?:\n    | ((series: CompositeChartSeries) => Partial<Omit<BarProps, 'ref'>>)\n    | Partial<Omit<BarProps, 'ref'>>;\n\n  /** Determines whether each point should have associated label @default false */\n  withPointLabels?: boolean;\n\n  /** Determines whether a label with bar value should be displayed on top of each bar @default false */\n  withBarValueLabel?: boolean;\n\n  /** Sets minimum height of the bar in px @default 0 */\n  minBarSize?: number;\n\n  /** Maximum bar width in px */\n  maxBarWidth?: number;\n\n  /** Props passed down to recharts `AreaChart` component */\n  composedChartProps?: React.ComponentProps<typeof ReChartsCompositeChart>;\n}\n\nexport type CompositeChartFactory = Factory<{\n  props: CompositeChartProps;\n  ref: HTMLDivElement;\n  stylesNames: CompositeChartStylesNames;\n  vars: CompositeChartCssVariables;\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  withDots: true,\n  connectNulls: true,\n  strokeWidth: 2,\n  curveType: 'monotone',\n  accessibilityLayer: true,\n} satisfies Partial<CompositeChartProps>;\n\nconst varsResolver = createVarsResolver<CompositeChartFactory>(\n  (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);\n\nexport const CompositeChart = factory<CompositeChartFactory>((_props) => {\n  const props = useProps('CompositeChart', defaultProps, _props);\n  const {\n    classNames,\n    className,\n    style,\n    styles,\n    unstyled,\n    vars,\n    data,\n    withLegend,\n    legendProps,\n    series,\n    onMouseLeave,\n    dataKey,\n    withTooltip,\n    withXAxis,\n    withYAxis,\n    gridAxis,\n    tickLine,\n    xAxisProps,\n    yAxisProps,\n    unit,\n    tooltipAnimationDuration,\n    strokeDasharray,\n    gridProps,\n    tooltipProps,\n    referenceLines,\n    withDots,\n    dotProps,\n    activeDotProps,\n    strokeWidth,\n    connectNulls,\n    curveType,\n    dir,\n    valueFormatter,\n    children,\n    lineProps,\n    xAxisLabel,\n    yAxisLabel,\n    withRightYAxis,\n    rightYAxisLabel,\n    rightYAxisProps,\n    withPointLabels,\n    areaProps,\n    barProps,\n    withBarValueLabel,\n    minBarSize,\n    maxBarWidth,\n    composedChartProps,\n    attributes,\n    accessibilityLayer,\n    withBrush,\n    brushProps,\n    ...others\n  } = props;\n\n  const theme = useMantineTheme();\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  const { resolvedClassNames, resolvedStyles } = useResolvedStylesApi<CompositeChartFactory>({\n    classNames,\n    styles,\n    props,\n  });\n\n  const getStyles = useStyles<CompositeChartFactory>({\n    name: 'CompositeChart',\n    classes,\n    props,\n    className,\n    style,\n    classNames,\n    styles,\n    unstyled,\n    attributes,\n    vars,\n    varsResolver,\n  });\n\n  const lines = series.map((item) => {\n    const color = getThemeColor(item.color, theme);\n    const dimmed = shouldHighlight && highlightedArea !== item.name;\n\n    if (item.type === 'line') {\n      return (\n        <Line\n          {...getStyles('line')}\n          key={item.name}\n          name={item.name}\n          dataKey={item.name}\n          dot={\n            withDots\n              ? {\n                  fillOpacity: dimmed ? 0 : 1,\n                  strokeOpacity: dimmed ? 0 : 1,\n                  strokeWidth: 1,\n                  fill: color,\n                  stroke: color,\n                  ...dotProps,\n                }\n              : false\n          }\n          activeDot={\n            withDots\n              ? { fill: 'var(--mantine-color-white)', stroke: color, ...activeDotProps }\n              : false\n          }\n          fill={color}\n          stroke={color}\n          strokeWidth={strokeWidth}\n          isAnimationActive={false}\n          fillOpacity={dimmed ? 0 : 1}\n          strokeOpacity={dimmed ? 0.5 : 1}\n          connectNulls={connectNulls}\n          type={curveType}\n          strokeDasharray={item.strokeDasharray}\n          yAxisId={item.yAxisId || undefined}\n          label={withPointLabels ? <PointLabel valueFormatter={valueFormatter} /> : undefined}\n          {...(typeof lineProps === 'function' ? lineProps(item) : lineProps)}\n        />\n      );\n    }\n\n    if (item.type === 'area') {\n      return (\n        <Area\n          {...getStyles('area')}\n          key={item.name}\n          name={item.name}\n          type={curveType}\n          dataKey={item.name}\n          fill={color}\n          strokeWidth={strokeWidth}\n          stroke={color}\n          isAnimationActive={false}\n          connectNulls={connectNulls}\n          dot={\n            withDots\n              ? {\n                  fillOpacity: dimmed ? 0 : 1,\n                  strokeOpacity: dimmed ? 0 : 1,\n                  strokeWidth: 1,\n                  fill: color,\n                  stroke: color,\n                  ...dotProps,\n                }\n              : false\n          }\n          activeDot={\n            withDots\n              ? {\n                  fill: theme.white,\n                  stroke: color,\n                  strokeWidth: 2,\n                  r: 4,\n                  ...activeDotProps,\n                }\n              : false\n          }\n          fillOpacity={dimmed ? 0 : 0.2}\n          strokeOpacity={dimmed ? 0.5 : 1}\n          strokeDasharray={item.strokeDasharray}\n          yAxisId={item.yAxisId || undefined}\n          label={withPointLabels ? <PointLabel valueFormatter={valueFormatter} /> : undefined}\n          {...(typeof areaProps === 'function' ? areaProps(item) : areaProps)}\n        />\n      );\n    }\n\n    if (item.type === 'bar') {\n      return (\n        <Bar\n          {...getStyles('bar')}\n          key={item.name}\n          name={item.name}\n          dataKey={item.name}\n          fill={color}\n          stroke={color}\n          isAnimationActive={false}\n          fillOpacity={dimmed ? 0.1 : 1}\n          strokeOpacity={dimmed ? 0.2 : 0}\n          yAxisId={item.yAxisId || undefined}\n          minPointSize={minBarSize}\n          {...(typeof barProps === 'function' ? barProps(item) : barProps)}\n        >\n          {withBarValueLabel && (\n            <LabelList\n              position=\"top\"\n              fontSize={12}\n              fill=\"var(--chart-bar-label-color, var(--mantine-color-dimmed))\"\n              formatter={(val: any) => valueFormatter?.(val as any)}\n            />\n          )}\n        </Bar>\n      );\n    }\n\n    return null;\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        yAxisId={line.yAxisId || undefined}\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 sharedYAxisProps = {\n    axisLine: false,\n    type: 'number' as const,\n    tickLine: withYTickLine ? { stroke: 'currentColor' } : false,\n    allowDecimals: true,\n    unit,\n    tickFormatter: valueFormatter,\n    ...getStyles('axis'),\n  };\n\n  return (\n    <Box {...getStyles('root')} onMouseLeave={handleMouseLeave} dir={dir || 'ltr'} {...others}>\n      <ResponsiveContainer {...getStyles('container')}>\n        <ReChartsCompositeChart\n          data={data}\n          maxBarSize={maxBarWidth}\n          margin={{\n            bottom: xAxisLabel ? 30 : undefined,\n            left: yAxisLabel ? 10 : undefined,\n            right: yAxisLabel ? 5 : undefined,\n          }}\n          accessibilityLayer={accessibilityLayer}\n          {...composedChartProps}\n        >\n          {withLegend && (\n            <Legend\n              verticalAlign=\"top\"\n              content={(payload) => (\n                <ChartLegend\n                  payload={payload.payload}\n                  onHighlight={setHighlightedArea}\n                  legendPosition={legendProps?.verticalAlign || 'top'}\n                  classNames={resolvedClassNames}\n                  styles={resolvedStyles}\n                  series={series}\n                  attributes={attributes}\n                />\n              )}\n              {...legendProps}\n            />\n          )}\n\n          <XAxis\n            hide={!withXAxis}\n            dataKey={dataKey}\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            {...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\n          <YAxis\n            orientation=\"left\"\n            tick={{ transform: 'translate(-10, 0)', fontSize: 12, fill: 'currentColor' }}\n            hide={!withYAxis}\n            {...sharedYAxisProps}\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          <YAxis\n            yAxisId=\"right\"\n            orientation=\"right\"\n            tick={{ transform: 'translate(10, 0)', fontSize: 12, fill: 'currentColor' }}\n            hide={!withRightYAxis}\n            {...sharedYAxisProps}\n            {...rightYAxisProps}\n          >\n            {rightYAxisLabel && (\n              <Label\n                position=\"insideRight\"\n                angle={90}\n                textAnchor=\"middle\"\n                fontSize={12}\n                offset={-5}\n                {...getStyles('axisLabel')}\n              >\n                {rightYAxisLabel}\n              </Label>\n            )}\n            {yAxisProps?.children}\n          </YAxis>\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\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                  label={labelFormatter && payload ? labelFormatter(label, payload) : label}\n                  payload={payload}\n                  unit={unit}\n                  classNames={resolvedClassNames}\n                  styles={resolvedStyles}\n                  series={series}\n                  valueFormatter={valueFormatter}\n                  attributes={attributes}\n                />\n              )}\n              {...tooltipProps}\n            />\n          )}\n\n          {lines}\n          {referenceLinesItems}\n          {withBrush && (\n            <ChartBrush\n              dataKey={dataKey}\n              classNames={resolvedClassNames}\n              styles={resolvedStyles}\n              {...brushProps}\n            />\n          )}\n          {children}\n        </ReChartsCompositeChart>\n      </ResponsiveContainer>\n    </Box>\n  );\n});\n\nCompositeChart.displayName = '@mantine/charts/CompositeChart';\nCompositeChart.classes = classes;\nCompositeChart.varsResolver = varsResolver;\n\nexport namespace CompositeChart {\n  export type Props = CompositeChartProps;\n  export type StylesNames = CompositeChartStylesNames;\n  export type CssVariables = CompositeChartCssVariables;\n  export type Factory = CompositeChartFactory;\n  export type Series = CompositeChartSeries;\n  export type CurveType = CompositeChartCurveType;\n}\n"],"mappings":"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"}

package/esm/DonutChart/DonutChart.mjs

@@ -5,8 +5,8 @@ import { ChartLegend } from "../ChartLegend/ChartLegend.mjs";
 import DonutChart_module_default from "./DonutChart.module.mjs";
 import { Box, createVarsResolver, factory, getThemeColor, rem, useMantineTheme, useProps, useResolvedStylesApi, useStyles } from "@mantine/core";
 import { jsx, jsxs } from "react/jsx-runtime";
-import { useState } from "react";
 import { Legend, Pie, PieChart, ResponsiveContainer, Tooltip as Tooltip$1 } from "recharts";
+import { useState } from "react";
 //#region packages/@mantine/charts/src/DonutChart/DonutChart.tsx
 const defaultProps = {
 	withTooltip: true,
@@ -18,7 +18,8 @@ const defaultProps = {
 	startAngle: 0,
 	endAngle: 360,
 	labelsType: "value",
-	tooltipDataSource: "all"
+	tooltipDataSource: "all",
+	accessibilityLayer: true
 };
 const varsResolver = createVarsResolver((theme, { strokeColor, labelColor, withLabels, withLegend, size }) => ({ root: {
 	"--chart-stroke-color": strokeColor ? getThemeColor(strokeColor, theme) : void 0,
@@ -47,7 +48,7 @@ const getLabel = (labelsType, valueFormatter) => ({ x, y, cx, cy, percent, value
 });
 const DonutChart = factory((_props) => {
 	const props = useProps("DonutChart", defaultProps, _props);
-	const { classNames, className, style, styles, unstyled, vars, data, withTooltip, withLegend, legendProps, tooltipAnimationDuration, tooltipProps, pieProps, paddingAngle, withLabels, withLabelsLine, size, thickness, strokeWidth, startAngle, endAngle, tooltipDataSource, chartLabel, children, pieChartProps, valueFormatter, strokeColor, labelsType, attributes, cellProps, ...others } = props;
+	const { classNames, className, style, styles, unstyled, vars, data, withTooltip, withLegend, legendProps, tooltipAnimationDuration, tooltipProps, pieProps, paddingAngle, withLabels, withLabelsLine, size, thickness, strokeWidth, startAngle, endAngle, tooltipDataSource, chartLabel, children, pieChartProps, valueFormatter, strokeColor, labelsType, attributes, cellProps, accessibilityLayer, ...others } = props;
 	const theme = useMantineTheme();
 	const [highlightedIndex, setHighlightedIndex] = useState(null);
 	const getStyles = useStyles({
@@ -80,6 +81,7 @@ const DonutChart = factory((_props) => {
 		...getStyles("root"),
 		...others,
 		children: /* @__PURE__ */ jsx(ResponsiveContainer, { children: /* @__PURE__ */ jsxs(PieChart, {
+			accessibilityLayer,
 			...pieChartProps,
 			children: [
 				/* @__PURE__ */ jsx(Pie, {

package/esm/DonutChart/DonutChart.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"DonutChart.mjs","names":["ReChartsPieChart","Tooltip","classes"],"sources":["../../src/DonutChart/DonutChart.tsx"],"sourcesContent":["import { useState } from 'react';\nimport {\n  Legend,\n  LegendProps,\n  Pie,\n  PieLabel,\n  PieProps,\n  PieChart as ReChartsPieChart,\n  ResponsiveContainer,\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  rem,\n  StylesApiProps,\n  useMantineTheme,\n  useProps,\n  useResolvedStylesApi,\n  useStyles,\n} from '@mantine/core';\nimport { ChartLegend, ChartLegendStylesNames } from '../ChartLegend';\nimport { ChartTooltip, ChartTooltipStylesNames } from '../ChartTooltip/ChartTooltip';\nimport { getPieChartData } from '../utils';\nimport classes from './DonutChart.module.css';\n\nexport interface DonutChartCell {\n  name: string;\n  value: number;\n  color: MantineColor;\n}\n\nexport type DonutChartStylesNames =\n  | 'root'\n  | 'label'\n  | ChartTooltipStylesNames\n  | ChartLegendStylesNames;\nexport type DonutChartCssVariables = {\n  root: '--chart-stroke-color' | '--chart-labels-color' | '--chart-size';\n};\n\nexport interface DonutChartProps\n  extends BoxProps, StylesApiProps<DonutChartFactory>, ElementProps<'div'> {\n  /** Data used to render chart */\n  data: DonutChartCell[];\n\n  /** Determines whether the tooltip should be displayed when one of the section is hovered @default true */\n  withTooltip?: boolean;\n\n  /** Determines whether the legend should be displayed @default false */\n  withLegend?: boolean;\n\n  /** Props passed down to recharts `Legend` component */\n  legendProps?: Omit<LegendProps, 'ref'>;\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 `Pie` component */\n  pieProps?: Partial<Omit<PieProps, 'ref'>>;\n\n  /** Controls color of the segments stroke, by default depends on color scheme */\n  strokeColor?: MantineColor;\n\n  /** Controls text color of all labels, by default depends on color scheme */\n  labelColor?: MantineColor;\n\n  /** Controls padding between segments @default 0 */\n  paddingAngle?: number;\n\n  /** Determines whether each segment should have associated label @default false */\n  withLabels?: boolean;\n\n  /** Determines whether segments labels should have lines that connect the segment with the label @default true */\n  withLabelsLine?: boolean;\n\n  /** Controls thickness of the chart segments @default 20 */\n  thickness?: number;\n\n  /** Controls chart width and height, height is increased by 40 if `withLabels` prop is set. Cannot be less than `thickness`. @default 80 */\n  size?: number;\n\n  /** Controls width of segments stroke @default 1 */\n  strokeWidth?: number;\n\n  /** Controls angle at which chart starts. Set to `180` to render the chart as semicircle. @default 0 */\n  startAngle?: number;\n\n  /** Controls angle at which charts ends. Set to `0` to render the chart as semicircle. @default 360 */\n  endAngle?: number;\n\n  /** Determines which data is displayed in the tooltip. `'all'` – display all values, `'segment'` – display only hovered segment. @default 'all' */\n  tooltipDataSource?: 'segment' | 'all';\n\n  /** Chart label, displayed in the center of the chart */\n  chartLabel?: string | number;\n\n  /** Additional elements rendered inside `PieChart` component */\n  children?: React.ReactNode;\n\n  /** Props passed down to recharts `PieChart` component */\n  pieChartProps?: React.ComponentProps<typeof ReChartsPieChart>;\n\n  /** Type of labels to display, `'value'` by default */\n  labelsType?: 'value' | 'percent' | 'name';\n\n  /** A function to format values inside the tooltip */\n  valueFormatter?: (value: number) => string;\n\n  /** Props passed down to each segment of the chart */\n  cellProps?:\n    | ((series: DonutChartCell) => Partial<Omit<React.SVGProps<SVGElement>, 'ref'>>)\n    | Partial<Omit<React.SVGProps<SVGElement>, 'ref'>>;\n}\n\nexport type DonutChartFactory = Factory<{\n  props: DonutChartProps;\n  ref: HTMLDivElement;\n  stylesNames: DonutChartStylesNames;\n  vars: DonutChartCssVariables;\n}>;\n\nconst defaultProps = {\n  withTooltip: true,\n  withLabelsLine: true,\n  paddingAngle: 0,\n  thickness: 20,\n  size: 160,\n  strokeWidth: 1,\n  startAngle: 0,\n  endAngle: 360,\n  labelsType: 'value',\n  tooltipDataSource: 'all',\n} satisfies Partial<DonutChartProps>;\n\nconst varsResolver = createVarsResolver<DonutChartFactory>(\n  (theme, { strokeColor, labelColor, withLabels, withLegend, size }) => ({\n    root: {\n      '--chart-stroke-color': strokeColor ? getThemeColor(strokeColor, theme) : undefined,\n      '--chart-labels-color': labelColor ? getThemeColor(labelColor, theme) : undefined,\n      '--chart-size': rem(size! + (withLabels ? 80 : 0) + (withLegend ? 80 : 0)),\n    },\n  })\n);\n\nconst getLabelValue = (\n  labelsType: DonutChartProps['labelsType'],\n  value: number | undefined,\n  percent: number | undefined,\n  name: string | undefined,\n  valueFormatter?: DonutChartProps['valueFormatter']\n) => {\n  if (labelsType === 'name') {\n    return name;\n  }\n\n  if (labelsType === 'percent') {\n    return `${((percent || 0) * 100).toFixed(0)}%`;\n  }\n\n  if (typeof valueFormatter === 'function') {\n    return valueFormatter(value || 0);\n  }\n\n  return value;\n};\n\nconst getLabel =\n  (\n    labelsType: 'value' | 'percent' | 'name',\n    valueFormatter?: DonutChartProps['valueFormatter']\n  ): PieLabel =>\n  ({ x, y, cx, cy, percent, value, name }) => (\n    <text\n      x={x}\n      y={y}\n      cx={cx}\n      cy={cy}\n      textAnchor={x > Number(cx) ? 'start' : 'end'}\n      fill=\"var(--chart-labels-color, var(--mantine-color-dimmed))\"\n      fontFamily=\"var(--mantine-font-family)\"\n      fontSize={12}\n    >\n      <tspan x={x}>\n        {getLabelValue(labelsType, Number(value), Number(percent), name as string, valueFormatter)}\n      </tspan>\n    </text>\n  );\n\nexport const DonutChart = factory<DonutChartFactory>((_props) => {\n  const props = useProps('DonutChart', defaultProps, _props);\n  const {\n    classNames,\n    className,\n    style,\n    styles,\n    unstyled,\n    vars,\n    data,\n    withTooltip,\n    withLegend,\n    legendProps,\n    tooltipAnimationDuration,\n    tooltipProps,\n    pieProps,\n    paddingAngle,\n    withLabels,\n    withLabelsLine,\n    size,\n    thickness,\n    strokeWidth,\n    startAngle,\n    endAngle,\n    tooltipDataSource,\n    chartLabel,\n    children,\n    pieChartProps,\n    valueFormatter,\n    strokeColor,\n    labelsType,\n    attributes,\n    cellProps,\n    ...others\n  } = props;\n\n  const theme = useMantineTheme();\n  const [highlightedIndex, setHighlightedIndex] = useState<number | null>(null);\n\n  const getStyles = useStyles<DonutChartFactory>({\n    name: 'DonutChart',\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<DonutChartFactory>({\n    classNames,\n    styles,\n    props,\n  });\n\n  const pieData = getPieChartData({ data, theme, strokeWidth, highlightedIndex, cellProps });\n\n  return (\n    <Box size={size} {...getStyles('root')} {...others}>\n      <ResponsiveContainer>\n        <ReChartsPieChart {...pieChartProps}>\n          <Pie\n            data={pieData as any}\n            innerRadius={size / 2 - thickness}\n            outerRadius={size / 2}\n            dataKey=\"value\"\n            isAnimationActive={false}\n            paddingAngle={paddingAngle}\n            startAngle={startAngle}\n            endAngle={endAngle}\n            label={withLabels ? getLabel(labelsType || 'value', valueFormatter) : false}\n            labelLine={\n              withLabelsLine\n                ? {\n                    stroke: 'var(--chart-label-color, var(--mantine-color-dimmed))',\n                    strokeWidth: 1,\n                  }\n                : false\n            }\n            {...pieProps}\n          />\n\n          {chartLabel && (\n            <text\n              x=\"50%\"\n              y=\"50%\"\n              textAnchor=\"middle\"\n              dominantBaseline=\"middle\"\n              {...getStyles('label')}\n            >\n              {chartLabel}\n            </text>\n          )}\n\n          {withTooltip && (\n            <Tooltip\n              animationDuration={tooltipAnimationDuration}\n              isAnimationActive={false}\n              content={({ payload }) => (\n                <ChartTooltip\n                  payload={data}\n                  classNames={resolvedClassNames}\n                  styles={resolvedStyles}\n                  type=\"radial\"\n                  segmentId={\n                    tooltipDataSource === 'segment'\n                      ? (payload?.[0]?.payload?.__segmentIndex as number)\n                      : undefined\n                  }\n                  valueFormatter={valueFormatter}\n                  attributes={attributes}\n                />\n              )}\n              {...tooltipProps}\n            />\n          )}\n\n          {withLegend && (\n            <Legend\n              verticalAlign=\"bottom\"\n              content={(payload) => (\n                <ChartLegend\n                  payload={payload.payload?.map((item) => ({\n                    ...item,\n                    dataKey: (item.payload as any)?.name,\n                    highlightKey: (item.payload as any)?.__segmentIndex,\n                  }))}\n                  onHighlight={(value) =>\n                    setHighlightedIndex(typeof value === 'number' ? value : null)\n                  }\n                  legendPosition={legendProps?.verticalAlign || 'bottom'}\n                  classNames={resolvedClassNames}\n                  styles={resolvedStyles}\n                  centered\n                  attributes={attributes}\n                />\n              )}\n              {...legendProps}\n            />\n          )}\n\n          {children}\n        </ReChartsPieChart>\n      </ResponsiveContainer>\n    </Box>\n  );\n});\n\nDonutChart.displayName = '@mantine/charts/DonutChart';\nDonutChart.classes = classes;\nDonutChart.varsResolver = varsResolver;\n\nexport namespace DonutChart {\n  export type Props = DonutChartProps;\n  export type StylesNames = DonutChartStylesNames;\n  export type Factory = DonutChartFactory;\n  export type CssVariables = DonutChartCssVariables;\n  export type Cell = DonutChartCell;\n}\n"],"mappings":"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"}
+{"version":3,"file":"DonutChart.mjs","names":["ReChartsPieChart","Tooltip","classes"],"sources":["../../src/DonutChart/DonutChart.tsx"],"sourcesContent":["import { useState } from 'react';\nimport {\n  Legend,\n  LegendProps,\n  Pie,\n  PieLabel,\n  PieProps,\n  PieChart as ReChartsPieChart,\n  ResponsiveContainer,\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  rem,\n  StylesApiProps,\n  useMantineTheme,\n  useProps,\n  useResolvedStylesApi,\n  useStyles,\n} from '@mantine/core';\nimport { ChartLegend, ChartLegendStylesNames } from '../ChartLegend';\nimport { ChartTooltip, ChartTooltipStylesNames } from '../ChartTooltip/ChartTooltip';\nimport { getPieChartData } from '../utils';\nimport classes from './DonutChart.module.css';\n\nexport interface DonutChartCell {\n  name: string;\n  value: number;\n  color: MantineColor;\n}\n\nexport type DonutChartStylesNames =\n  | 'root'\n  | 'label'\n  | ChartTooltipStylesNames\n  | ChartLegendStylesNames;\nexport type DonutChartCssVariables = {\n  root: '--chart-stroke-color' | '--chart-labels-color' | '--chart-size';\n};\n\nexport interface DonutChartProps\n  extends BoxProps, StylesApiProps<DonutChartFactory>, ElementProps<'div'> {\n  /** Data used to render chart */\n  data: DonutChartCell[];\n\n  /** Determines whether the tooltip should be displayed when one of the section is hovered @default true */\n  withTooltip?: boolean;\n\n  /** Determines whether the legend should be displayed @default false */\n  withLegend?: boolean;\n\n  /** Props passed down to recharts `Legend` component */\n  legendProps?: Omit<LegendProps, 'ref'>;\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 `Pie` component */\n  pieProps?: Partial<Omit<PieProps, 'ref'>>;\n\n  /** Controls color of the segments stroke, by default depends on color scheme */\n  strokeColor?: MantineColor;\n\n  /** Controls text color of all labels, by default depends on color scheme */\n  labelColor?: MantineColor;\n\n  /** Controls padding between segments @default 0 */\n  paddingAngle?: number;\n\n  /** Determines whether each segment should have associated label @default false */\n  withLabels?: boolean;\n\n  /** Determines whether segments labels should have lines that connect the segment with the label @default true */\n  withLabelsLine?: boolean;\n\n  /** Controls thickness of the chart segments @default 20 */\n  thickness?: number;\n\n  /** Controls chart width and height, height is increased by 40 if `withLabels` prop is set. Cannot be less than `thickness`. @default 80 */\n  size?: number;\n\n  /** Controls width of segments stroke @default 1 */\n  strokeWidth?: number;\n\n  /** Controls angle at which chart starts. Set to `180` to render the chart as semicircle. @default 0 */\n  startAngle?: number;\n\n  /** Controls angle at which charts ends. Set to `0` to render the chart as semicircle. @default 360 */\n  endAngle?: number;\n\n  /** Determines which data is displayed in the tooltip. `'all'` – display all values, `'segment'` – display only hovered segment. @default 'all' */\n  tooltipDataSource?: 'segment' | 'all';\n\n  /** Chart label, displayed in the center of the chart */\n  chartLabel?: string | number;\n\n  /** Additional elements rendered inside `PieChart` component */\n  children?: React.ReactNode;\n\n  /** Props passed down to recharts `PieChart` component */\n  pieChartProps?: React.ComponentProps<typeof ReChartsPieChart>;\n\n  /** Type of labels to display, `'value'` by default */\n  labelsType?: 'value' | 'percent' | 'name';\n\n  /** A function to format values inside the tooltip */\n  valueFormatter?: (value: number) => string;\n\n  /** Props passed down to each segment of the chart */\n  cellProps?:\n    | ((series: DonutChartCell) => Partial<Omit<React.SVGProps<SVGElement>, 'ref'>>)\n    | Partial<Omit<React.SVGProps<SVGElement>, 'ref'>>;\n\n  /** Determines whether the chart should be keyboard-navigable with the recharts accessibility layer, `true` by default */\n  accessibilityLayer?: boolean;\n}\n\nexport type DonutChartFactory = Factory<{\n  props: DonutChartProps;\n  ref: HTMLDivElement;\n  stylesNames: DonutChartStylesNames;\n  vars: DonutChartCssVariables;\n}>;\n\nconst defaultProps = {\n  withTooltip: true,\n  withLabelsLine: true,\n  paddingAngle: 0,\n  thickness: 20,\n  size: 160,\n  strokeWidth: 1,\n  startAngle: 0,\n  endAngle: 360,\n  labelsType: 'value',\n  tooltipDataSource: 'all',\n  accessibilityLayer: true,\n} satisfies Partial<DonutChartProps>;\n\nconst varsResolver = createVarsResolver<DonutChartFactory>(\n  (theme, { strokeColor, labelColor, withLabels, withLegend, size }) => ({\n    root: {\n      '--chart-stroke-color': strokeColor ? getThemeColor(strokeColor, theme) : undefined,\n      '--chart-labels-color': labelColor ? getThemeColor(labelColor, theme) : undefined,\n      '--chart-size': rem(size! + (withLabels ? 80 : 0) + (withLegend ? 80 : 0)),\n    },\n  })\n);\n\nconst getLabelValue = (\n  labelsType: DonutChartProps['labelsType'],\n  value: number | undefined,\n  percent: number | undefined,\n  name: string | undefined,\n  valueFormatter?: DonutChartProps['valueFormatter']\n) => {\n  if (labelsType === 'name') {\n    return name;\n  }\n\n  if (labelsType === 'percent') {\n    return `${((percent || 0) * 100).toFixed(0)}%`;\n  }\n\n  if (typeof valueFormatter === 'function') {\n    return valueFormatter(value || 0);\n  }\n\n  return value;\n};\n\nconst getLabel =\n  (\n    labelsType: 'value' | 'percent' | 'name',\n    valueFormatter?: DonutChartProps['valueFormatter']\n  ): PieLabel =>\n  ({ x, y, cx, cy, percent, value, name }) => (\n    <text\n      x={x}\n      y={y}\n      cx={cx}\n      cy={cy}\n      textAnchor={x > Number(cx) ? 'start' : 'end'}\n      fill=\"var(--chart-labels-color, var(--mantine-color-dimmed))\"\n      fontFamily=\"var(--mantine-font-family)\"\n      fontSize={12}\n    >\n      <tspan x={x}>\n        {getLabelValue(labelsType, Number(value), Number(percent), name as string, valueFormatter)}\n      </tspan>\n    </text>\n  );\n\nexport const DonutChart = factory<DonutChartFactory>((_props) => {\n  const props = useProps('DonutChart', defaultProps, _props);\n  const {\n    classNames,\n    className,\n    style,\n    styles,\n    unstyled,\n    vars,\n    data,\n    withTooltip,\n    withLegend,\n    legendProps,\n    tooltipAnimationDuration,\n    tooltipProps,\n    pieProps,\n    paddingAngle,\n    withLabels,\n    withLabelsLine,\n    size,\n    thickness,\n    strokeWidth,\n    startAngle,\n    endAngle,\n    tooltipDataSource,\n    chartLabel,\n    children,\n    pieChartProps,\n    valueFormatter,\n    strokeColor,\n    labelsType,\n    attributes,\n    cellProps,\n    accessibilityLayer,\n    ...others\n  } = props;\n\n  const theme = useMantineTheme();\n  const [highlightedIndex, setHighlightedIndex] = useState<number | null>(null);\n\n  const getStyles = useStyles<DonutChartFactory>({\n    name: 'DonutChart',\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<DonutChartFactory>({\n    classNames,\n    styles,\n    props,\n  });\n\n  const pieData = getPieChartData({ data, theme, strokeWidth, highlightedIndex, cellProps });\n\n  return (\n    <Box size={size} {...getStyles('root')} {...others}>\n      <ResponsiveContainer>\n        <ReChartsPieChart accessibilityLayer={accessibilityLayer} {...pieChartProps}>\n          <Pie\n            data={pieData as any}\n            innerRadius={size / 2 - thickness}\n            outerRadius={size / 2}\n            dataKey=\"value\"\n            isAnimationActive={false}\n            paddingAngle={paddingAngle}\n            startAngle={startAngle}\n            endAngle={endAngle}\n            label={withLabels ? getLabel(labelsType || 'value', valueFormatter) : false}\n            labelLine={\n              withLabelsLine\n                ? {\n                    stroke: 'var(--chart-label-color, var(--mantine-color-dimmed))',\n                    strokeWidth: 1,\n                  }\n                : false\n            }\n            {...pieProps}\n          />\n\n          {chartLabel && (\n            <text\n              x=\"50%\"\n              y=\"50%\"\n              textAnchor=\"middle\"\n              dominantBaseline=\"middle\"\n              {...getStyles('label')}\n            >\n              {chartLabel}\n            </text>\n          )}\n\n          {withTooltip && (\n            <Tooltip\n              animationDuration={tooltipAnimationDuration}\n              isAnimationActive={false}\n              content={({ payload }) => (\n                <ChartTooltip\n                  payload={data}\n                  classNames={resolvedClassNames}\n                  styles={resolvedStyles}\n                  type=\"radial\"\n                  segmentId={\n                    tooltipDataSource === 'segment'\n                      ? (payload?.[0]?.payload?.__segmentIndex as number)\n                      : undefined\n                  }\n                  valueFormatter={valueFormatter}\n                  attributes={attributes}\n                />\n              )}\n              {...tooltipProps}\n            />\n          )}\n\n          {withLegend && (\n            <Legend\n              verticalAlign=\"bottom\"\n              content={(payload) => (\n                <ChartLegend\n                  payload={payload.payload?.map((item) => ({\n                    ...item,\n                    dataKey: (item.payload as any)?.name,\n                    highlightKey: (item.payload as any)?.__segmentIndex,\n                  }))}\n                  onHighlight={(value) =>\n                    setHighlightedIndex(typeof value === 'number' ? value : null)\n                  }\n                  legendPosition={legendProps?.verticalAlign || 'bottom'}\n                  classNames={resolvedClassNames}\n                  styles={resolvedStyles}\n                  centered\n                  attributes={attributes}\n                />\n              )}\n              {...legendProps}\n            />\n          )}\n\n          {children}\n        </ReChartsPieChart>\n      </ResponsiveContainer>\n    </Box>\n  );\n});\n\nDonutChart.displayName = '@mantine/charts/DonutChart';\nDonutChart.classes = classes;\nDonutChart.varsResolver = varsResolver;\n\nexport namespace DonutChart {\n  export type Props = DonutChartProps;\n  export type StylesNames = DonutChartStylesNames;\n  export type Factory = DonutChartFactory;\n  export type CssVariables = DonutChartCssVariables;\n  export type Cell = DonutChartCell;\n}\n"],"mappings":"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"}

package/esm/DonutChart/DonutChart.module.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"DonutChart.module.mjs","names":[],"sources":["../../src/DonutChart/DonutChart.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  & :where(:global(.recharts-surface)) {\n    overflow: visible;\n  }\n}\n\n.label {\n  fill: var(--mantine-color-text);\n  font-size: var(--mantine-font-size-sm);\n}\n"],"mappings":""}
+{"version":3,"file":"DonutChart.module.mjs","names":[],"sources":["../../src/DonutChart/DonutChart.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  & :where(:global(.recharts-surface)) {\n    overflow: visible;\n  }\n\n  svg:focus-visible {\n    outline: 2px solid var(--mantine-primary-color-filled);\n    outline-offset: 2px;\n  }\n}\n\n.label {\n  fill: var(--mantine-color-text);\n  font-size: var(--mantine-font-size-sm);\n}\n"],"mappings":""}

package/esm/FunnelChart/FunnelChart.mjs

@@ -4,8 +4,8 @@ import { ChartLegend } from "../ChartLegend/ChartLegend.mjs";
 import FunnelChart_module_default from "./FunnelChart.module.mjs";
 import { Box, createVarsResolver, factory, getThemeColor, rem, useMantineTheme, useProps, useResolvedStylesApi, useStyles } from "@mantine/core";
 import { jsx, jsxs } from "react/jsx-runtime";
-import { useState } from "react";
 import { Funnel, FunnelChart, LabelList, Legend, ResponsiveContainer, Tooltip as Tooltip$1 } from "recharts";
+import { useState } from "react";
 //#region packages/@mantine/charts/src/FunnelChart/FunnelChart.tsx
 const defaultProps = {
 	withTooltip: true,
@@ -13,7 +13,8 @@ const defaultProps = {
 	strokeWidth: 1,
 	withLabels: false,
 	labelsPosition: "right",
-	tooltipDataSource: "all"
+	tooltipDataSource: "all",
+	accessibilityLayer: true
 };
 const varsResolver = createVarsResolver((theme, { strokeColor, labelColor, size }) => ({ root: {
 	"--chart-stroke-color": strokeColor ? getThemeColor(strokeColor, theme) : void 0,
@@ -22,7 +23,7 @@ const varsResolver = createVarsResolver((theme, { strokeColor, labelColor, size
 } }));
 const FunnelChart$1 = factory((_props) => {
 	const props = useProps("FunnelChart", defaultProps, _props);
-	const { classNames, className, style, styles, unstyled, vars, data, withTooltip, withLegend, legendProps, tooltipAnimationDuration, tooltipProps, strokeWidth, withLabels, size, valueFormatter, children, funnelChartProps, funnelProps, labelsPosition, tooltipDataSource, strokeColor, labelColor, attributes, ...others } = props;
+	const { classNames, className, style, styles, unstyled, vars, data, withTooltip, withLegend, legendProps, tooltipAnimationDuration, tooltipProps, strokeWidth, withLabels, size, valueFormatter, children, funnelChartProps, funnelProps, labelsPosition, tooltipDataSource, strokeColor, labelColor, attributes, accessibilityLayer, ...others } = props;
 	const theme = useMantineTheme();
 	const [highlightedIndex, setHighlightedIndex] = useState(null);
 	const getStyles = useStyles({
@@ -48,6 +49,7 @@ const FunnelChart$1 = factory((_props) => {
 		...getStyles("root"),
 		...others,
 		children: /* @__PURE__ */ jsx(ResponsiveContainer, { children: /* @__PURE__ */ jsxs(FunnelChart, {
+			accessibilityLayer,
 			...funnelChartProps,
 			children: [
 				/* @__PURE__ */ jsx(Funnel, {

package/esm/FunnelChart/FunnelChart.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"FunnelChart.mjs","names":["FunnelChart","RechartsFunnelChart","Tooltip","classes"],"sources":["../../src/FunnelChart/FunnelChart.tsx"],"sourcesContent":["import { useState } from 'react';\nimport {\n  Funnel,\n  FunnelProps,\n  LabelList,\n  Legend,\n  LegendProps,\n  FunnelChart as RechartsFunnelChart,\n  ResponsiveContainer,\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  rem,\n  StylesApiProps,\n  useMantineTheme,\n  useProps,\n  useResolvedStylesApi,\n  useStyles,\n} from '@mantine/core';\nimport { ChartLegend, ChartLegendStylesNames } from '../ChartLegend';\nimport { ChartTooltip, ChartTooltipStylesNames } from '../ChartTooltip/ChartTooltip';\nimport classes from './FunnelChart.module.css';\n\nexport interface FunnelChartCell {\n  key?: string | number;\n  name: string;\n  value: number;\n  color: MantineColor;\n}\n\nexport type FunnelChartStylesNames = 'root' | ChartTooltipStylesNames | ChartLegendStylesNames;\nexport type FunnelChartCssVariables = {\n  root: '--chart-stroke-color' | '--chart-labels-color' | '--chart-size';\n};\n\nexport interface FunnelChartProps\n  extends BoxProps, StylesApiProps<FunnelChartFactory>, ElementProps<'div'> {\n  /** Data used to render chart */\n  data: FunnelChartCell[];\n\n  /** Determines whether the tooltip should be displayed when a section is hovered @default true */\n  withTooltip?: boolean;\n\n  /** Determines whether the legend should be displayed @default false */\n  withLegend?: boolean;\n\n  /** Props passed down to recharts `Legend` component */\n  legendProps?: Omit<LegendProps, 'ref'>;\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 `Pie` component */\n  funnelProps?: Partial<Omit<FunnelProps, 'ref'>>;\n\n  /** Controls color of the segments stroke, by default depends on color scheme */\n  strokeColor?: MantineColor;\n\n  /** Controls text color of all labels @default 'white' */\n  labelColor?: MantineColor;\n\n  /** Controls chart width and height @default 300 */\n  size?: number;\n\n  /** Controls width of segments stroke @default 1 */\n  strokeWidth?: number;\n\n  /** Determines whether each segment should have associated label @default false */\n  withLabels?: boolean;\n\n  /** Controls labels position relative to the segment @default 'right' */\n  labelsPosition?: 'right' | 'left' | 'inside';\n\n  /** A function to format values inside the tooltip and labels */\n  valueFormatter?: (value: number) => string;\n\n  /** Determines which data is displayed in the tooltip. `'all'` – display all values, `'segment'` – display only hovered segment. @default 'all' */\n  tooltipDataSource?: 'segment' | 'all';\n\n  /** Additional elements rendered inside `FunnelChart` component */\n  children?: React.ReactNode;\n\n  /** Props passed down to recharts `FunnelChart` component */\n  funnelChartProps?: React.ComponentProps<typeof RechartsFunnelChart>;\n}\n\nexport type FunnelChartFactory = Factory<{\n  props: FunnelChartProps;\n  ref: HTMLDivElement;\n  stylesNames: FunnelChartStylesNames;\n  vars: FunnelChartCssVariables;\n}>;\n\nconst defaultProps = {\n  withTooltip: true,\n  size: 300,\n  strokeWidth: 1,\n  withLabels: false,\n  labelsPosition: 'right',\n  tooltipDataSource: 'all',\n} satisfies Partial<FunnelChartProps>;\n\nconst varsResolver = createVarsResolver<FunnelChartFactory>(\n  (theme, { strokeColor, labelColor, size }) => ({\n    root: {\n      '--chart-stroke-color': strokeColor ? getThemeColor(strokeColor, theme) : undefined,\n      '--chart-labels-color': labelColor ? getThemeColor(labelColor, theme) : undefined,\n      '--chart-size': rem(size),\n    },\n  })\n);\n\nexport const FunnelChart = factory<FunnelChartFactory>((_props) => {\n  const props = useProps('FunnelChart', defaultProps, _props);\n  const {\n    classNames,\n    className,\n    style,\n    styles,\n    unstyled,\n    vars,\n    data,\n    withTooltip,\n    withLegend,\n    legendProps,\n    tooltipAnimationDuration,\n    tooltipProps,\n    strokeWidth,\n    withLabels,\n    size,\n    valueFormatter,\n    children,\n    funnelChartProps,\n    funnelProps,\n    labelsPosition,\n    tooltipDataSource,\n    strokeColor,\n    labelColor,\n    attributes,\n    ...others\n  } = props;\n\n  const theme = useMantineTheme();\n  const [highlightedIndex, setHighlightedIndex] = useState<number | null>(null);\n\n  const getStyles = useStyles<FunnelChartFactory>({\n    name: 'FunnelChart',\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<FunnelChartFactory>({\n    classNames,\n    styles,\n    props,\n  });\n\n  return (\n    <Box size={size} {...getStyles('root')} {...others}>\n      <ResponsiveContainer>\n        <RechartsFunnelChart {...funnelChartProps}>\n          <Funnel\n            data={data.map((entry, index) => ({\n              ...entry,\n              __segmentIndex: index,\n              fill: getThemeColor(entry.color, theme),\n              fillOpacity: highlightedIndex !== null ? (highlightedIndex === index ? 1 : 0.2) : 1,\n            }))}\n            dataKey=\"value\"\n            isAnimationActive={false}\n            stroke=\"var(--chart-stroke-color, var(--mantine-color-body))\"\n            strokeWidth={strokeWidth}\n            {...funnelProps}\n          >\n            {withLabels && (\n              <LabelList\n                position={labelsPosition}\n                fill={\n                  labelsPosition === 'inside'\n                    ? 'var(--chart-labels-color, var(--mantine-color-white))'\n                    : 'var(--chart-labels-color, var(--mantine-color-dimmed))'\n                }\n                stroke=\"none\"\n                fontFamily=\"var(--mantine-font-family)\"\n                fontSize={12}\n                dataKey={(entry) => {\n                  return typeof valueFormatter === 'function'\n                    ? valueFormatter(entry.value as number)\n                    : entry.value;\n                }}\n              />\n            )}\n          </Funnel>\n\n          {withTooltip && (\n            <Tooltip\n              animationDuration={tooltipAnimationDuration}\n              isAnimationActive={false}\n              content={({ payload }) => (\n                <ChartTooltip\n                  payload={data}\n                  classNames={resolvedClassNames}\n                  styles={resolvedStyles}\n                  type=\"radial\"\n                  segmentId={\n                    tooltipDataSource === 'segment'\n                      ? (payload?.[0]?.payload?.__segmentIndex as number)\n                      : undefined\n                  }\n                  valueFormatter={valueFormatter}\n                  attributes={attributes}\n                />\n              )}\n              {...tooltipProps}\n            />\n          )}\n\n          {withLegend && (\n            <Legend\n              verticalAlign=\"bottom\"\n              content={() => (\n                <ChartLegend\n                  payload={data.map((item, index) => ({\n                    value: item.name,\n                    color: getThemeColor(item.color, theme),\n                    dataKey: item.name,\n                    highlightKey: index,\n                  }))}\n                  onHighlight={(value) =>\n                    setHighlightedIndex(typeof value === 'number' ? value : null)\n                  }\n                  legendPosition={legendProps?.verticalAlign || 'bottom'}\n                  classNames={resolvedClassNames}\n                  styles={resolvedStyles}\n                  centered\n                  attributes={attributes}\n                />\n              )}\n              {...legendProps}\n            />\n          )}\n\n          {children}\n        </RechartsFunnelChart>\n      </ResponsiveContainer>\n    </Box>\n  );\n});\n\nFunnelChart.displayName = '@mantine/charts/FunnelChart';\nFunnelChart.classes = classes;\nFunnelChart.varsResolver = varsResolver;\n\nexport namespace FunnelChart {\n  export type Props = FunnelChartProps;\n  export type StylesNames = FunnelChartStylesNames;\n  export type Factory = FunnelChartFactory;\n  export type CssVariables = FunnelChartCssVariables;\n  export type Cell = FunnelChartCell;\n}\n"],"mappings":";;;;;;;;;AAyGA,MAAM,eAAe;CACnB,aAAa;CACb,MAAM;CACN,aAAa;CACb,YAAY;CACZ,gBAAgB;CAChB,mBAAmB;AACrB;AAEA,MAAM,eAAe,oBAClB,OAAO,EAAE,aAAa,YAAY,YAAY,EAC7C,MAAM;CACJ,wBAAwB,cAAc,cAAc,aAAa,KAAK,IAAI,KAAA;CAC1E,wBAAwB,aAAa,cAAc,YAAY,KAAK,IAAI,KAAA;CACxE,gBAAgB,IAAI,IAAI;AAC1B,EACF,EACF;AAEA,MAAaA,gBAAc,SAA6B,WAAW;CACjE,MAAM,QAAQ,SAAS,eAAe,cAAc,MAAM;CAC1D,MAAM,EACJ,YACA,WACA,OACA,QACA,UACA,MACA,MACA,aACA,YACA,aACA,0BACA,cACA,aACA,YACA,MACA,gBACA,UACA,kBACA,aACA,gBACA,mBACA,aACA,YACA,YACA,GAAG,WACD;CAEJ,MAAM,QAAQ,gBAAgB;CAC9B,MAAM,CAAC,kBAAkB,uBAAuB,SAAwB,IAAI;CAE5E,MAAM,YAAY,UAA8B;EAC9C,MAAM;EACN,SAAA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;CACF,CAAC;CAED,MAAM,EAAE,oBAAoB,mBAAmB,qBAAyC;EACtF;EACA;EACA;CACF,CAAC;CAED,OACE,oBAAC,KAAD;EAAW;EAAM,GAAI,UAAU,MAAM;EAAG,GAAI;YAC1C,oBAAC,qBAAD,EAAA,UACE,qBAACC,aAAD;GAAqB,GAAI;aAAzB;IACE,oBAAC,QAAD;KACE,MAAM,KAAK,KAAK,OAAO,WAAW;MAChC,GAAG;MACH,gBAAgB;MAChB,MAAM,cAAc,MAAM,OAAO,KAAK;MACtC,aAAa,qBAAqB,OAAQ,qBAAqB,QAAQ,IAAI,KAAO;KACpF,EAAE;KACF,SAAQ;KACR,mBAAmB;KACnB,QAAO;KACM;KACb,GAAI;eAEH,cACC,oBAAC,WAAD;MACE,UAAU;MACV,MACE,mBAAmB,WACf,0DACA;MAEN,QAAO;MACP,YAAW;MACX,UAAU;MACV,UAAU,UAAU;OAClB,OAAO,OAAO,mBAAmB,aAC7B,eAAe,MAAM,KAAe,IACpC,MAAM;MACZ;KACD,CAAA;IAEG,CAAA;IAEP,eACC,oBAACC,WAAD;KACE,mBAAmB;KACnB,mBAAmB;KACnB,UAAU,EAAE,cACV,oBAAC,cAAD;MACE,SAAS;MACT,YAAY;MACZ,QAAQ;MACR,MAAK;MACL,WACE,sBAAsB,YACjB,UAAU,EAAE,EAAE,SAAS,iBACxB,KAAA;MAEU;MACJ;KACb,CAAA;KAEH,GAAI;IACL,CAAA;IAGF,cACC,oBAAC,QAAD;KACE,eAAc;KACd,eACE,oBAAC,aAAD;MACE,SAAS,KAAK,KAAK,MAAM,WAAW;OAClC,OAAO,KAAK;OACZ,OAAO,cAAc,KAAK,OAAO,KAAK;OACtC,SAAS,KAAK;OACd,cAAc;MAChB,EAAE;MACF,cAAc,UACZ,oBAAoB,OAAO,UAAU,WAAW,QAAQ,IAAI;MAE9D,gBAAgB,aAAa,iBAAiB;MAC9C,YAAY;MACZ,QAAQ;MACR,UAAA;MACY;KACb,CAAA;KAEH,GAAI;IACL,CAAA;IAGF;GACkB;KACF,CAAA;CAClB,CAAA;AAET,CAAC;AAED,cAAY,cAAc;AAC1B,cAAY,UAAUC;AACtB,cAAY,eAAe"}
+{"version":3,"file":"FunnelChart.mjs","names":["FunnelChart","RechartsFunnelChart","Tooltip","classes"],"sources":["../../src/FunnelChart/FunnelChart.tsx"],"sourcesContent":["import { useState } from 'react';\nimport {\n  Funnel,\n  FunnelProps,\n  LabelList,\n  Legend,\n  LegendProps,\n  FunnelChart as RechartsFunnelChart,\n  ResponsiveContainer,\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  rem,\n  StylesApiProps,\n  useMantineTheme,\n  useProps,\n  useResolvedStylesApi,\n  useStyles,\n} from '@mantine/core';\nimport { ChartLegend, ChartLegendStylesNames } from '../ChartLegend';\nimport { ChartTooltip, ChartTooltipStylesNames } from '../ChartTooltip/ChartTooltip';\nimport classes from './FunnelChart.module.css';\n\nexport interface FunnelChartCell {\n  key?: string | number;\n  name: string;\n  value: number;\n  color: MantineColor;\n}\n\nexport type FunnelChartStylesNames = 'root' | ChartTooltipStylesNames | ChartLegendStylesNames;\nexport type FunnelChartCssVariables = {\n  root: '--chart-stroke-color' | '--chart-labels-color' | '--chart-size';\n};\n\nexport interface FunnelChartProps\n  extends BoxProps, StylesApiProps<FunnelChartFactory>, ElementProps<'div'> {\n  /** Data used to render chart */\n  data: FunnelChartCell[];\n\n  /** Determines whether the tooltip should be displayed when a section is hovered @default true */\n  withTooltip?: boolean;\n\n  /** Determines whether the legend should be displayed @default false */\n  withLegend?: boolean;\n\n  /** Props passed down to recharts `Legend` component */\n  legendProps?: Omit<LegendProps, 'ref'>;\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 `Pie` component */\n  funnelProps?: Partial<Omit<FunnelProps, 'ref'>>;\n\n  /** Controls color of the segments stroke, by default depends on color scheme */\n  strokeColor?: MantineColor;\n\n  /** Controls text color of all labels @default 'white' */\n  labelColor?: MantineColor;\n\n  /** Controls chart width and height @default 300 */\n  size?: number;\n\n  /** Controls width of segments stroke @default 1 */\n  strokeWidth?: number;\n\n  /** Determines whether each segment should have associated label @default false */\n  withLabels?: boolean;\n\n  /** Controls labels position relative to the segment @default 'right' */\n  labelsPosition?: 'right' | 'left' | 'inside';\n\n  /** A function to format values inside the tooltip and labels */\n  valueFormatter?: (value: number) => string;\n\n  /** Determines which data is displayed in the tooltip. `'all'` – display all values, `'segment'` – display only hovered segment. @default 'all' */\n  tooltipDataSource?: 'segment' | 'all';\n\n  /** Additional elements rendered inside `FunnelChart` component */\n  children?: React.ReactNode;\n\n  /** Props passed down to recharts `FunnelChart` component */\n  funnelChartProps?: React.ComponentProps<typeof RechartsFunnelChart>;\n\n  /** Determines whether the chart should be keyboard-navigable with the recharts accessibility layer, `true` by default */\n  accessibilityLayer?: boolean;\n}\n\nexport type FunnelChartFactory = Factory<{\n  props: FunnelChartProps;\n  ref: HTMLDivElement;\n  stylesNames: FunnelChartStylesNames;\n  vars: FunnelChartCssVariables;\n}>;\n\nconst defaultProps = {\n  withTooltip: true,\n  size: 300,\n  strokeWidth: 1,\n  withLabels: false,\n  labelsPosition: 'right',\n  tooltipDataSource: 'all',\n  accessibilityLayer: true,\n} satisfies Partial<FunnelChartProps>;\n\nconst varsResolver = createVarsResolver<FunnelChartFactory>(\n  (theme, { strokeColor, labelColor, size }) => ({\n    root: {\n      '--chart-stroke-color': strokeColor ? getThemeColor(strokeColor, theme) : undefined,\n      '--chart-labels-color': labelColor ? getThemeColor(labelColor, theme) : undefined,\n      '--chart-size': rem(size),\n    },\n  })\n);\n\nexport const FunnelChart = factory<FunnelChartFactory>((_props) => {\n  const props = useProps('FunnelChart', defaultProps, _props);\n  const {\n    classNames,\n    className,\n    style,\n    styles,\n    unstyled,\n    vars,\n    data,\n    withTooltip,\n    withLegend,\n    legendProps,\n    tooltipAnimationDuration,\n    tooltipProps,\n    strokeWidth,\n    withLabels,\n    size,\n    valueFormatter,\n    children,\n    funnelChartProps,\n    funnelProps,\n    labelsPosition,\n    tooltipDataSource,\n    strokeColor,\n    labelColor,\n    attributes,\n    accessibilityLayer,\n    ...others\n  } = props;\n\n  const theme = useMantineTheme();\n  const [highlightedIndex, setHighlightedIndex] = useState<number | null>(null);\n\n  const getStyles = useStyles<FunnelChartFactory>({\n    name: 'FunnelChart',\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<FunnelChartFactory>({\n    classNames,\n    styles,\n    props,\n  });\n\n  return (\n    <Box size={size} {...getStyles('root')} {...others}>\n      <ResponsiveContainer>\n        <RechartsFunnelChart accessibilityLayer={accessibilityLayer} {...funnelChartProps}>\n          <Funnel\n            data={data.map((entry, index) => ({\n              ...entry,\n              __segmentIndex: index,\n              fill: getThemeColor(entry.color, theme),\n              fillOpacity: highlightedIndex !== null ? (highlightedIndex === index ? 1 : 0.2) : 1,\n            }))}\n            dataKey=\"value\"\n            isAnimationActive={false}\n            stroke=\"var(--chart-stroke-color, var(--mantine-color-body))\"\n            strokeWidth={strokeWidth}\n            {...funnelProps}\n          >\n            {withLabels && (\n              <LabelList\n                position={labelsPosition}\n                fill={\n                  labelsPosition === 'inside'\n                    ? 'var(--chart-labels-color, var(--mantine-color-white))'\n                    : 'var(--chart-labels-color, var(--mantine-color-dimmed))'\n                }\n                stroke=\"none\"\n                fontFamily=\"var(--mantine-font-family)\"\n                fontSize={12}\n                dataKey={(entry) => {\n                  return typeof valueFormatter === 'function'\n                    ? valueFormatter(entry.value as number)\n                    : entry.value;\n                }}\n              />\n            )}\n          </Funnel>\n\n          {withTooltip && (\n            <Tooltip\n              animationDuration={tooltipAnimationDuration}\n              isAnimationActive={false}\n              content={({ payload }) => (\n                <ChartTooltip\n                  payload={data}\n                  classNames={resolvedClassNames}\n                  styles={resolvedStyles}\n                  type=\"radial\"\n                  segmentId={\n                    tooltipDataSource === 'segment'\n                      ? (payload?.[0]?.payload?.__segmentIndex as number)\n                      : undefined\n                  }\n                  valueFormatter={valueFormatter}\n                  attributes={attributes}\n                />\n              )}\n              {...tooltipProps}\n            />\n          )}\n\n          {withLegend && (\n            <Legend\n              verticalAlign=\"bottom\"\n              content={() => (\n                <ChartLegend\n                  payload={data.map((item, index) => ({\n                    value: item.name,\n                    color: getThemeColor(item.color, theme),\n                    dataKey: item.name,\n                    highlightKey: index,\n                  }))}\n                  onHighlight={(value) =>\n                    setHighlightedIndex(typeof value === 'number' ? value : null)\n                  }\n                  legendPosition={legendProps?.verticalAlign || 'bottom'}\n                  classNames={resolvedClassNames}\n                  styles={resolvedStyles}\n                  centered\n                  attributes={attributes}\n                />\n              )}\n              {...legendProps}\n            />\n          )}\n\n          {children}\n        </RechartsFunnelChart>\n      </ResponsiveContainer>\n    </Box>\n  );\n});\n\nFunnelChart.displayName = '@mantine/charts/FunnelChart';\nFunnelChart.classes = classes;\nFunnelChart.varsResolver = varsResolver;\n\nexport namespace FunnelChart {\n  export type Props = FunnelChartProps;\n  export type StylesNames = FunnelChartStylesNames;\n  export type Factory = FunnelChartFactory;\n  export type CssVariables = FunnelChartCssVariables;\n  export type Cell = FunnelChartCell;\n}\n"],"mappings":";;;;;;;;;AA4GA,MAAM,eAAe;CACnB,aAAa;CACb,MAAM;CACN,aAAa;CACb,YAAY;CACZ,gBAAgB;CAChB,mBAAmB;CACnB,oBAAoB;AACtB;AAEA,MAAM,eAAe,oBAClB,OAAO,EAAE,aAAa,YAAY,YAAY,EAC7C,MAAM;CACJ,wBAAwB,cAAc,cAAc,aAAa,KAAK,IAAI,KAAA;CAC1E,wBAAwB,aAAa,cAAc,YAAY,KAAK,IAAI,KAAA;CACxE,gBAAgB,IAAI,IAAI;AAC1B,EACF,EACF;AAEA,MAAaA,gBAAc,SAA6B,WAAW;CACjE,MAAM,QAAQ,SAAS,eAAe,cAAc,MAAM;CAC1D,MAAM,EACJ,YACA,WACA,OACA,QACA,UACA,MACA,MACA,aACA,YACA,aACA,0BACA,cACA,aACA,YACA,MACA,gBACA,UACA,kBACA,aACA,gBACA,mBACA,aACA,YACA,YACA,oBACA,GAAG,WACD;CAEJ,MAAM,QAAQ,gBAAgB;CAC9B,MAAM,CAAC,kBAAkB,uBAAuB,SAAwB,IAAI;CAE5E,MAAM,YAAY,UAA8B;EAC9C,MAAM;EACN,SAAA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;CACF,CAAC;CAED,MAAM,EAAE,oBAAoB,mBAAmB,qBAAyC;EACtF;EACA;EACA;CACF,CAAC;CAED,OACE,oBAAC,KAAD;EAAW;EAAM,GAAI,UAAU,MAAM;EAAG,GAAI;YAC1C,oBAAC,qBAAD,EAAA,UACE,qBAACC,aAAD;GAAyC;GAAoB,GAAI;aAAjE;IACE,oBAAC,QAAD;KACE,MAAM,KAAK,KAAK,OAAO,WAAW;MAChC,GAAG;MACH,gBAAgB;MAChB,MAAM,cAAc,MAAM,OAAO,KAAK;MACtC,aAAa,qBAAqB,OAAQ,qBAAqB,QAAQ,IAAI,KAAO;KACpF,EAAE;KACF,SAAQ;KACR,mBAAmB;KACnB,QAAO;KACM;KACb,GAAI;eAEH,cACC,oBAAC,WAAD;MACE,UAAU;MACV,MACE,mBAAmB,WACf,0DACA;MAEN,QAAO;MACP,YAAW;MACX,UAAU;MACV,UAAU,UAAU;OAClB,OAAO,OAAO,mBAAmB,aAC7B,eAAe,MAAM,KAAe,IACpC,MAAM;MACZ;KACD,CAAA;IAEG,CAAA;IAEP,eACC,oBAACC,WAAD;KACE,mBAAmB;KACnB,mBAAmB;KACnB,UAAU,EAAE,cACV,oBAAC,cAAD;MACE,SAAS;MACT,YAAY;MACZ,QAAQ;MACR,MAAK;MACL,WACE,sBAAsB,YACjB,UAAU,EAAE,EAAE,SAAS,iBACxB,KAAA;MAEU;MACJ;KACb,CAAA;KAEH,GAAI;IACL,CAAA;IAGF,cACC,oBAAC,QAAD;KACE,eAAc;KACd,eACE,oBAAC,aAAD;MACE,SAAS,KAAK,KAAK,MAAM,WAAW;OAClC,OAAO,KAAK;OACZ,OAAO,cAAc,KAAK,OAAO,KAAK;OACtC,SAAS,KAAK;OACd,cAAc;MAChB,EAAE;MACF,cAAc,UACZ,oBAAoB,OAAO,UAAU,WAAW,QAAQ,IAAI;MAE9D,gBAAgB,aAAa,iBAAiB;MAC9C,YAAY;MACZ,QAAQ;MACR,UAAA;MACY;KACb,CAAA;KAEH,GAAI;IACL,CAAA;IAGF;GACkB;KACF,CAAA;CAClB,CAAA;AAET,CAAC;AAED,cAAY,cAAc;AAC1B,cAAY,UAAUC;AACtB,cAAY,eAAe"}

package/esm/FunnelChart/FunnelChart.module.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"FunnelChart.module.mjs","names":[],"sources":["../../src/FunnelChart/FunnelChart.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":""}
+{"version":3,"file":"FunnelChart.module.mjs","names":[],"sources":["../../src/FunnelChart/FunnelChart.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  svg:focus-visible {\n    outline: 2px solid var(--mantine-primary-color-filled);\n    outline-offset: 2px;\n  }\n}\n"],"mappings":""}

package/esm/Heatmap/Heatmap.mjs

@@ -35,6 +35,7 @@ const defaultProps = {
 		"Fri",
 		""
 	],
+	monthLabelsPosition: "top",
 	withOutsideDates: true,
 	firstDayOfWeek: 1,
 	rectSize: 10,
@@ -53,7 +54,7 @@ const defaultProps = {
 };
 const Heatmap = factory((_props) => {
 	const props = useProps("Heatmap", defaultProps, _props);
-	const { classNames, className, style, styles, unstyled, vars, data, startDate, endDate, withMonthLabels, withWeekdayLabels, weekdayLabels, withOutsideDates, monthLabels, firstDayOfWeek, rectSize = 10, gap = 1, rectRadius, domain, colors, weekdaysLabelsWidth, monthsLabelsHeight, fontSize, getTooltipLabel, withTooltip, tooltipProps, getRectProps, splitMonths, withLegend, legendLabels, attributes, ...others } = props;
+	const { classNames, className, style, styles, unstyled, vars, data, startDate, endDate, withMonthLabels, monthLabelsPosition, withWeekdayLabels, weekdayLabels, withOutsideDates, monthLabels, firstDayOfWeek, rectSize = 10, gap = 1, rectRadius, domain, colors, weekdaysLabelsWidth, monthsLabelsHeight, fontSize, getTooltipLabel, withTooltip, tooltipProps, getRectProps, splitMonths, withLegend, legendLabels, attributes, ...others } = props;
 	const getStyles = useStyles({
 		name: "Heatmap",
 		classes: Heatmap_module_default,
@@ -69,7 +70,10 @@ const Heatmap = factory((_props) => {
 	const [hoveredRect, setHoveredRect] = useState(null);
 	const rectSizeWithGap = rectSize + gap;
 	const weekdaysOffset = withWeekdayLabels ? weekdaysLabelsWidth : 0;
-	const monthsOffset = withMonthLabels ? monthsLabelsHeight : 0;
+	const monthsLabelAtTop = withMonthLabels && monthLabelsPosition === "top";
+	const monthsLabelAtBottom = withMonthLabels && monthLabelsPosition === "bottom";
+	const monthsOffset = monthsLabelAtTop ? monthsLabelsHeight : 0;
+	const monthsBottomHeight = monthsLabelAtBottom ? monthsLabelsHeight : 0;
 	const [min, max] = getBoundaries({
 		data,
 		domain
@@ -108,9 +112,10 @@ const Heatmap = factory((_props) => {
 		const minSize = splitMonths ? 2 : 3;
 		if (month.size < minSize) return null;
 		const monthLabel = monthLabels[month.month];
+		const monthLabelY = monthsLabelAtBottom ? rectSizeWithGap * 7 + gap + monthsLabelsHeight - 4 : monthsLabelsHeight - 4;
 		return /* @__PURE__ */ jsx("text", {
 			x: computeMonthLabelX(month.position, monthIndex),
-			y: monthsLabelsHeight - 4,
+			y: monthLabelY,
 			width: month.size * rectSizeWithGap,
 			fontSize,
 			...getStyles("monthLabel"),
@@ -129,6 +134,7 @@ const Heatmap = factory((_props) => {
 	const legendPadding = 10;
 	const legendHeight = withLegend ? legendPadding + rectSize : 0;
 	const svgWidth = rectSizeWithGap * totalColumns + gap + weekdaysOffset;
+	const svgHeight = rectSizeWithGap * 7 + gap + monthsOffset + monthsBottomHeight + legendHeight;
 	const legendNode = withLegend ? (() => {
 		const lessLabel = legendLabels[0];
 		const moreLabel = legendLabels[1];
@@ -138,8 +144,9 @@ const Heatmap = factory((_props) => {
 		const allColors = [void 0, ...colors || []];
 		const rectsWidth = allColors.length * rectSize + (allColors.length - 1) * gap;
 		const moreWidth = moreLabel.length * charWidth;
+		const totalLegendWidth = lessWidth + textGap + rectsWidth + textGap + moreWidth;
 		return /* @__PURE__ */ jsxs("g", {
-			transform: `translate(${svgWidth - (lessWidth + textGap + rectsWidth + textGap + moreWidth)}, ${rectSizeWithGap * 7 + gap + monthsOffset + legendPadding})`,
+			transform: `translate(${svgWidth - totalLegendWidth}, ${rectSizeWithGap * 7 + gap + monthsOffset + monthsBottomHeight + legendPadding})`,
 			"data-id": "legend",
 			...getStyles("legend"),
 			children: [
@@ -175,7 +182,7 @@ const Heatmap = factory((_props) => {
 	return /* @__PURE__ */ jsxs(Box, {
 		component: "svg",
 		width: svgWidth,
-		height: rectSizeWithGap * 7 + gap + monthsOffset + legendHeight,
+		height: svgHeight,
 		...getStyles("root"),
 		...others,
 		children: [