@mantine/charts 9.5.2 → 9.6.0

package/cjs/AreaChart/AreaChart.cjs

@@ -16,8 +16,6 @@ function valueToPercent(value) {
 	return `${(value * 100).toFixed(0)}%`;
 }
 const defaultProps = {
-	withXAxis: true,
-	withYAxis: true,
 	withDots: true,
 	withTooltip: true,
 	connectNulls: true,
@@ -39,7 +37,7 @@ const varsResolver = (0, _mantine_core.createVarsResolver)((theme, { textColor,
 } }));
 const AreaChart = (0, _mantine_core.factory)((_props) => {
 	const props = (0, _mantine_core.useProps)("AreaChart", defaultProps, _props);
-	const { classNames, className, style, styles, unstyled, vars, data, series, withGradient, dataKey, withXAxis, withYAxis, curveType, gridProps, withDots, tickLine, strokeDasharray, gridAxis, unit, yAxisProps, xAxisProps, dotProps, activeDotProps, strokeWidth, tooltipAnimationDuration, type, legendProps, tooltipProps, withLegend, withTooltip, areaChartProps, fillOpacity, splitColors, splitOffset, connectNulls, onMouseLeave, orientation, referenceLines, dir, valueFormatter, children, areaProps, xAxisLabel, yAxisLabel, withRightYAxis, rightYAxisLabel, rightYAxisProps, withPointLabels, gridColor, textColor, attributes, accessibilityLayer, withBrush, brushProps, ...others } = props;
+	const { classNames, className, style, styles, unstyled, vars, data, series, withGradient, dataKey, withXAxis: withXAxisProp, withYAxis: withYAxisProp, curveType, gridProps, withDots, tickLine, strokeDasharray, gridAxis, unit, yAxisProps, xAxisProps, dotProps, activeDotProps, strokeWidth, tooltipAnimationDuration, type, legendProps, tooltipProps, withLegend, withTooltip, areaChartProps, fillOpacity, splitColors, splitOffset, connectNulls, onMouseLeave, orientation, referenceLines, referenceAreas, referenceDots, dir, valueFormatter, children, areaProps, xAxisLabel, yAxisLabel, withRightYAxis, rightYAxisLabel, rightYAxisProps, withPointLabels, gridColor, textColor, attributes, accessibilityLayer, withBrush, brushProps, ...others } = props;
 	const theme = (0, _mantine_core.useMantineTheme)();
 	const baseId = (0, react.useId)();
 	const splitId = `${baseId}-split`;
@@ -47,7 +45,9 @@ const AreaChart = (0, _mantine_core.factory)((_props) => {
 	const withYTickLine = gridAxis !== "none" && (tickLine === "y" || tickLine === "xy");
 	const isAnimationActive = (tooltipAnimationDuration || 0) > 0;
 	const _withGradient = typeof withGradient === "boolean" ? withGradient : type === "default";
-	const stacked = type === "stacked" || type === "percent";
+	const stacked = type === "stacked" || type === "percent" || type === "stream";
+	const withXAxis = withXAxisProp ?? !(type === "stream" && orientation === "vertical");
+	const withYAxis = withYAxisProp ?? !(type === "stream" && orientation === "horizontal");
 	const [highlightedArea, setHighlightedArea] = (0, react.useState)(null);
 	const shouldHighlight = highlightedArea !== null;
 	const handleMouseLeave = (event) => {
@@ -135,22 +135,58 @@ const AreaChart = (0, _mantine_core.factory)((_props) => {
 			...typeof areaProps === "function" ? areaProps(item) : areaProps
 		})] }, item.name);
 	});
-	const referenceLinesItems = referenceLines?.map((line, index) => {
-		const color = (0, _mantine_core.getThemeColor)(line.color, theme);
+	const referenceLinesItems = referenceLines?.map(({ color: lineColor, labelPosition, ...line }, index) => {
+		const color = (0, _mantine_core.getThemeColor)(lineColor, theme);
 		return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(recharts.ReferenceLine, {
-			stroke: line.color ? color : "var(--chart-grid-color)",
+			stroke: lineColor ? color : "var(--chart-grid-color)",
 			strokeWidth: 1,
 			yAxisId: line.yAxisId || void 0,
 			...line,
 			label: {
-				fill: line.color ? color : "currentColor",
+				fill: lineColor ? color : "currentColor",
 				fontSize: 12,
-				position: line.labelPosition ?? "insideBottomLeft",
+				position: labelPosition ?? "insideBottomLeft",
 				...typeof line.label === "object" ? line.label : { value: line.label }
 			},
 			...getStyles("referenceLine")
 		}, index);
 	});
+	const referenceAreasItems = referenceAreas?.map(({ color: areaColor, labelPosition, ...area }, index) => {
+		const color = (0, _mantine_core.getThemeColor)(areaColor, theme);
+		return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(recharts.ReferenceArea, {
+			fill: areaColor ? color : "var(--chart-grid-color)",
+			fillOpacity: .2,
+			stroke: areaColor ? color : "var(--chart-grid-color)",
+			strokeOpacity: .6,
+			yAxisId: area.yAxisId || void 0,
+			...area,
+			label: {
+				fill: areaColor ? color : "currentColor",
+				fontSize: 12,
+				position: labelPosition ?? "insideTop",
+				...typeof area.label === "object" ? area.label : { value: area.label }
+			},
+			...getStyles("referenceArea")
+		}, index);
+	});
+	const referenceDotsItems = referenceDots?.map(({ color: dotColor, labelPosition, ...dot }, index) => {
+		const color = (0, _mantine_core.getThemeColor)(dotColor, theme);
+		return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(recharts.ReferenceDot, {
+			r: 5,
+			fill: dotColor ? color : "var(--chart-grid-color)",
+			stroke: "var(--mantine-color-body)",
+			strokeWidth: 2,
+			yAxisId: dot.yAxisId || void 0,
+			...dot,
+			label: {
+				fill: dotColor ? color : "currentColor",
+				fontSize: 12,
+				position: labelPosition ?? "top",
+				...typeof dot.label === "object" ? dot.label : { value: dot.label }
+			},
+			...getStyles("referenceDot")
+		}, index);
+	});
 	const tickFormatter = type === "percent" ? valueToPercent : valueFormatter;
 	const sharedYAxisProps = {
 		axisLine: false,
@@ -173,7 +209,7 @@ const AreaChart = (0, _mantine_core.factory)((_props) => {
 			...getStyles("container"),
 			children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(recharts.AreaChart, {
 				data,
-				stackOffset: type === "percent" ? "expand" : void 0,
+				stackOffset: type === "percent" ? "expand" : type === "stream" ? "wiggle" : void 0,
 				layout: orientation,
 				margin: {
 					bottom: xAxisLabel ? 30 : void 0,
@@ -183,7 +219,7 @@ const AreaChart = (0, _mantine_core.factory)((_props) => {
 				accessibilityLayer,
 				...areaChartProps,
 				children: [
-					referenceLinesItems,
+					referenceAreasItems,
 					withLegend && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(recharts.Legend, {
 						verticalAlign: "top",
 						content: (payload) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_ChartLegend.ChartLegend, {
@@ -300,6 +336,8 @@ const AreaChart = (0, _mantine_core.factory)((_props) => {
 					}) }),
 					areas,
 					withDots && dotsAreas,
+					referenceLinesItems,
+					referenceDotsItems,
 					withBrush && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_ChartBrush.ChartBrush, {
 						dataKey,
 						classNames: resolvedClassNames,

package/cjs/AreaChart/AreaChart.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"AreaChart.cjs","names":["classes","Area","Fragment","AreaGradient","PointLabel","ReferenceLine","Box","ResponsiveContainer","ReChartsAreaChart","Legend","ChartLegend","CartesianGrid","XAxis","Label","YAxis","Tooltip","ChartTooltip","AreaSplit","getDefaultSplitOffset","ChartBrush"],"sources":["../../src/AreaChart/AreaChart.tsx"],"sourcesContent":["import { Fragment, useId, useState } from 'react';\nimport {\n  Area,\n  AreaProps,\n  CartesianGrid,\n  Label,\n  Legend,\n  AreaChart as ReChartsAreaChart,\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  MantineColor,\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 { AreaGradient } from './AreaGradient';\nimport { AreaSplit } from './AreaSplit';\nimport { getDefaultSplitOffset } from './get-split-offset';\nimport classes from '../grid-chart.module.css';\n\nfunction valueToPercent(value: number) {\n  return `${(value * 100).toFixed(0)}%`;\n}\n\nexport interface AreaChartSeries extends ChartSeries {\n  strokeDasharray?: string | number;\n  color: MantineColor;\n  curveType?: AreaChartCurveType;\n}\n\nexport type AreaChartType = 'default' | 'stacked' | 'percent' | 'split';\n\nexport type AreaChartCurveType =\n  | 'bump'\n  | 'linear'\n  | 'natural'\n  | 'monotone'\n  | 'step'\n  | 'stepBefore'\n  | 'stepAfter';\n\nexport type AreaChartStylesNames =\n  | 'area'\n  | BaseChartStylesNames\n  | ChartLegendStylesNames\n  | ChartTooltipStylesNames;\n\nexport type AreaChartCSSVariables = {\n  root: '--chart-text-color' | '--chart-grid-color';\n};\n\nexport interface AreaChartProps\n  extends BoxProps, GridChartBaseProps, StylesApiProps<AreaChartFactory>, ElementProps<'div'> {\n  /** An array of objects with `name` and `color` keys. Determines which data should be consumed from the `data` array. */\n  series: AreaChartSeries[];\n\n  /** Controls how chart areas are positioned relative to each other @default 'default' */\n  type?: AreaChartType;\n\n  /** Determines whether the chart area should be represented with a gradient instead of the solid color @default false */\n  withGradient?: boolean;\n\n  /** Type of the curve @default 'monotone' */\n  curveType?: AreaChartCurveType;\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 areas @default 2 */\n  strokeWidth?: number;\n\n  /** Props passed down to recharts `AreaChart` component */\n  areaChartProps?: React.ComponentProps<typeof ReChartsAreaChart>;\n\n  /** Controls fill opacity of all areas @default 0.2 */\n  fillOpacity?: number;\n\n  /** A tuple of colors used when `type=\"split\"` is set, ignored in all other cases. A tuple may include theme colors reference or any valid CSS colors @default ['green.7', 'red.7'] */\n  splitColors?: [MantineColor, MantineColor];\n\n  /** Offset for the split gradient. By default, value is inferred from `data` and `series` if possible. Must be generated from the data array with `getSplitOffset` function. */\n  splitOffset?: number;\n\n  /** If set, points with `null` values are 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 `Area` component */\n  areaProps?:\n    | ((series: AreaChartSeries) => Partial<Omit<AreaProps<any, any>, 'ref'>>)\n    | Partial<Omit<AreaProps<any, any>, 'ref'>>;\n\n  /** If set, each point has an associated label @default false */\n  withPointLabels?: boolean;\n}\n\nexport type AreaChartFactory = Factory<{\n  props: AreaChartProps;\n  ref: HTMLDivElement;\n  stylesNames: AreaChartStylesNames;\n  vars: AreaChartCSSVariables;\n}>;\n\nconst defaultProps = {\n  withXAxis: true,\n  withYAxis: true,\n  withDots: true,\n  withTooltip: true,\n  connectNulls: true,\n  strokeWidth: 2,\n  tooltipAnimationDuration: 0,\n  fillOpacity: 0.2,\n  tickLine: 'y',\n  strokeDasharray: '5 5',\n  curveType: 'monotone',\n  gridAxis: 'x',\n  type: 'default',\n  splitColors: ['green.7', 'red.7'],\n  orientation: 'horizontal',\n  accessibilityLayer: true,\n} satisfies Partial<AreaChartProps>;\n\nconst varsResolver = createVarsResolver<AreaChartFactory>((theme, { textColor, gridColor }) => ({\n  root: {\n    '--chart-text-color': textColor ? getThemeColor(textColor, theme) : undefined,\n    '--chart-grid-color': gridColor ? getThemeColor(gridColor, theme) : undefined,\n  },\n}));\n\nexport const AreaChart = factory<AreaChartFactory>((_props) => {\n  const props = useProps('AreaChart', defaultProps, _props);\n  const {\n    classNames,\n    className,\n    style,\n    styles,\n    unstyled,\n    vars,\n    data,\n    series,\n    withGradient,\n    dataKey,\n    withXAxis,\n    withYAxis,\n    curveType,\n    gridProps,\n    withDots,\n    tickLine,\n    strokeDasharray,\n    gridAxis,\n    unit,\n    yAxisProps,\n    xAxisProps,\n    dotProps,\n    activeDotProps,\n    strokeWidth,\n    tooltipAnimationDuration,\n    type,\n    legendProps,\n    tooltipProps,\n    withLegend,\n    withTooltip,\n    areaChartProps,\n    fillOpacity,\n    splitColors,\n    splitOffset,\n    connectNulls,\n    onMouseLeave,\n    orientation,\n    referenceLines,\n    dir,\n    valueFormatter,\n    children,\n    areaProps,\n    xAxisLabel,\n    yAxisLabel,\n    withRightYAxis,\n    rightYAxisLabel,\n    rightYAxisProps,\n    withPointLabels,\n    gridColor,\n    textColor,\n    attributes,\n    accessibilityLayer,\n    withBrush,\n    brushProps,\n    ...others\n  } = props;\n\n  const theme = useMantineTheme();\n  const baseId = useId();\n  const splitId = `${baseId}-split`;\n  const withXTickLine = gridAxis !== 'none' && (tickLine === 'x' || tickLine === 'xy');\n  const withYTickLine = gridAxis !== 'none' && (tickLine === 'y' || tickLine === 'xy');\n  const isAnimationActive = (tooltipAnimationDuration || 0) > 0;\n  const _withGradient = typeof withGradient === 'boolean' ? withGradient : type === 'default';\n  const stacked = type === 'stacked' || type === 'percent';\n  const [highlightedArea, setHighlightedArea] = useState<string | number | null>(null);\n  const shouldHighlight = highlightedArea !== null;\n  const handleMouseLeave = (event: React.MouseEvent<HTMLDivElement>) => {\n    setHighlightedArea(null);\n    onMouseLeave?.(event);\n  };\n\n  const { resolvedClassNames, resolvedStyles } = useResolvedStylesApi<AreaChartFactory>({\n    classNames,\n    styles,\n    props,\n  });\n\n  const getStyles = useStyles<AreaChartFactory>({\n    name: 'AreaChart',\n    classes: classes as any,\n    props,\n    className,\n    style,\n    classNames,\n    styles,\n    unstyled,\n    attributes,\n    vars,\n    varsResolver,\n  });\n\n  const dotsAreas = series.map((item) => {\n    const color = getThemeColor(item.color, theme);\n    const dimmed = shouldHighlight && highlightedArea !== item.name;\n    return (\n      <Area\n        {...getStyles('area')}\n        activeDot={{ fill: theme.white, stroke: color, strokeWidth: 2, r: 4, ...activeDotProps }}\n        dot={{ fill: color, fillOpacity: dimmed ? 0 : 1, strokeWidth: 2, r: 4, ...dotProps }}\n        key={item.name}\n        name={item.name}\n        type={curveType}\n        dataKey={item.name}\n        fill=\"none\"\n        strokeWidth={strokeWidth}\n        stroke=\"none\"\n        isAnimationActive={false}\n        connectNulls={connectNulls}\n        stackId={stacked ? 'stack-dots' : undefined}\n        yAxisId={item.yAxisId || undefined}\n        {...(typeof areaProps === 'function' ? areaProps(item) : areaProps)}\n      />\n    );\n  });\n\n  const areas = series.map((item) => {\n    const id = `${baseId}-${item.color.replace(/[^a-zA-Z0-9]/g, '')}`;\n    const color = getThemeColor(item.color, theme);\n    const dimmed = shouldHighlight && highlightedArea !== item.name;\n\n    return (\n      <Fragment key={item.name}>\n        <defs>\n          <AreaGradient\n            color={color}\n            withGradient={_withGradient}\n            id={id}\n            fillOpacity={fillOpacity}\n          />\n        </defs>\n        <Area\n          {...getStyles('area')}\n          activeDot={false}\n          dot={false}\n          name={item.name}\n          type={item.curveType ?? curveType}\n          dataKey={item.name}\n          fill={type === 'split' ? `url(#${splitId})` : `url(#${id})`}\n          strokeWidth={strokeWidth}\n          stroke={color}\n          isAnimationActive={false}\n          connectNulls={connectNulls}\n          stackId={stacked ? 'stack' : undefined}\n          fillOpacity={dimmed ? 0 : 1}\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      </Fragment>\n    );\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 tickFormatter = type === 'percent' ? valueToPercent : valueFormatter;\n\n  const sharedYAxisProps = {\n    axisLine: false,\n    ...(orientation === 'vertical'\n      ? { dataKey, type: 'category' as const }\n      : { type: 'number' as const }),\n    tickLine: withYTickLine ? { stroke: 'currentColor' } : false,\n    allowDecimals: true,\n    unit,\n    tickFormatter: orientation === 'vertical' ? undefined : tickFormatter,\n    ...getStyles('axis'),\n  };\n\n  return (\n    <Box {...getStyles('root')} onMouseLeave={handleMouseLeave} dir={dir || 'ltr'} {...others}>\n      <ResponsiveContainer {...getStyles('container')}>\n        <ReChartsAreaChart\n          data={data}\n          stackOffset={type === 'percent' ? 'expand' : undefined}\n          layout={orientation}\n          margin={{\n            bottom: xAxisLabel ? 30 : undefined,\n            left: yAxisLabel ? 10 : undefined,\n            right: yAxisLabel ? 5 : undefined,\n          }}\n          accessibilityLayer={accessibilityLayer}\n          {...areaChartProps}\n        >\n          {referenceLinesItems}\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          <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          <XAxis\n            hide={!withXAxis}\n            {...(orientation === 'vertical' ? { type: 'number' } : { 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            tickFormatter={orientation === 'vertical' ? tickFormatter : undefined}\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          {withTooltip && (\n            <Tooltip\n              animationDuration={tooltipAnimationDuration}\n              isAnimationActive={isAnimationActive}\n              position={orientation === 'vertical' ? {} : { 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          {type === 'split' && (\n            <defs>\n              <AreaSplit\n                colors={splitColors}\n                id={splitId}\n                offset={splitOffset ?? getDefaultSplitOffset({ data, series })}\n                fillOpacity={fillOpacity}\n              />\n            </defs>\n          )}\n\n          {areas}\n          {withDots && dotsAreas}\n          {withBrush && (\n            <ChartBrush\n              dataKey={dataKey}\n              classNames={resolvedClassNames}\n              styles={resolvedStyles}\n              {...brushProps}\n            />\n          )}\n          {children}\n        </ReChartsAreaChart>\n      </ResponsiveContainer>\n    </Box>\n  );\n});\n\nAreaChart.classes = classes;\nAreaChart.varsResolver = varsResolver;\nAreaChart.displayName = '@mantine/charts/AreaChart';\n\nexport namespace AreaChart {\n  export type Props = AreaChartProps;\n  export type StylesNames = AreaChartStylesNames;\n  export type Factory = AreaChartFactory;\n  export type Type = AreaChartType;\n  export type Series = AreaChartSeries;\n  export type CurveType = AreaChartCurveType;\n}\n"],"mappings":";;;;;;;;;;;;;;AA4CA,SAAS,eAAe,OAAe;CACrC,OAAO,IAAI,QAAQ,IAAA,CAAK,QAAQ,CAAC,EAAE;AACrC;AAyFA,MAAM,eAAe;CACnB,WAAW;CACX,WAAW;CACX,UAAU;CACV,aAAa;CACb,cAAc;CACd,aAAa;CACb,0BAA0B;CAC1B,aAAa;CACb,UAAU;CACV,iBAAiB;CACjB,WAAW;CACX,UAAU;CACV,MAAM;CACN,aAAa,CAAC,WAAW,OAAO;CAChC,aAAa;CACb,oBAAoB;AACtB;AAEA,MAAM,gBAAA,GAAA,cAAA,mBAAA,EAAqD,OAAO,EAAE,WAAW,iBAAiB,EAC9F,MAAM;CACJ,sBAAsB,aAAA,GAAA,cAAA,cAAA,CAA0B,WAAW,KAAK,IAAI,KAAA;CACpE,sBAAsB,aAAA,GAAA,cAAA,cAAA,CAA0B,WAAW,KAAK,IAAI,KAAA;AACtE,EACF,EAAE;AAEF,MAAa,aAAA,GAAA,cAAA,QAAA,EAAuC,WAAW;CAC7D,MAAM,SAAA,GAAA,cAAA,SAAA,CAAiB,aAAa,cAAc,MAAM;CACxD,MAAM,EACJ,YACA,WACA,OACA,QACA,UACA,MACA,MACA,QACA,cACA,SACA,WACA,WACA,WACA,WACA,UACA,UACA,iBACA,UACA,MACA,YACA,YACA,UACA,gBACA,aACA,0BACA,MACA,aACA,cACA,YACA,aACA,gBACA,aACA,aACA,aACA,cACA,cACA,aACA,gBACA,KACA,gBACA,UACA,WACA,YACA,YACA,gBACA,iBACA,iBACA,iBACA,WACA,WACA,YACA,oBACA,WACA,YACA,GAAG,WACD;CAEJ,MAAM,SAAA,GAAA,cAAA,gBAAA,CAAwB;CAC9B,MAAM,UAAA,GAAA,MAAA,MAAA,CAAe;CACrB,MAAM,UAAU,GAAG,OAAO;CAC1B,MAAM,gBAAgB,aAAa,WAAW,aAAa,OAAO,aAAa;CAC/E,MAAM,gBAAgB,aAAa,WAAW,aAAa,OAAO,aAAa;CAC/E,MAAM,qBAAqB,4BAA4B,KAAK;CAC5D,MAAM,gBAAgB,OAAO,iBAAiB,YAAY,eAAe,SAAS;CAClF,MAAM,UAAU,SAAS,aAAa,SAAS;CAC/C,MAAM,CAAC,iBAAiB,uBAAA,GAAA,MAAA,SAAA,CAAuD,IAAI;CACnF,MAAM,kBAAkB,oBAAoB;CAC5C,MAAM,oBAAoB,UAA4C;EACpE,mBAAmB,IAAI;EACvB,eAAe,KAAK;CACtB;CAEA,MAAM,EAAE,oBAAoB,oBAAA,GAAA,cAAA,qBAAA,CAA0D;EACpF;EACA;EACA;CACF,CAAC;CAED,MAAM,aAAA,GAAA,cAAA,UAAA,CAAwC;EAC5C,MAAM;EACN,SAASA,0BAAAA;EACT;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;CACF,CAAC;CAED,MAAM,YAAY,OAAO,KAAK,SAAS;EACrC,MAAM,SAAA,GAAA,cAAA,cAAA,CAAsB,KAAK,OAAO,KAAK;EAC7C,MAAM,SAAS,mBAAmB,oBAAoB,KAAK;EAC3D,OACE,iBAAA,GAAA,MAAA,cAAA,CAACC,SAAAA,MAAD;GACE,GAAI,UAAU,MAAM;GACpB,WAAW;IAAE,MAAM,MAAM;IAAO,QAAQ;IAAO,aAAa;IAAG,GAAG;IAAG,GAAG;GAAe;GACvF,KAAK;IAAE,MAAM;IAAO,aAAa,SAAS,IAAI;IAAG,aAAa;IAAG,GAAG;IAAG,GAAG;GAAS;GACnF,KAAK,KAAK;GACV,MAAM,KAAK;GACX,MAAM;GACN,SAAS,KAAK;GACd,MAAK;GACQ;GACb,QAAO;GACP,mBAAmB;GACL;GACd,SAAS,UAAU,eAAe,KAAA;GAClC,SAAS,KAAK,WAAW,KAAA;GACzB,GAAK,OAAO,cAAc,aAAa,UAAU,IAAI,IAAI;EAC1D,CAAA;CAEL,CAAC;CAED,MAAM,QAAQ,OAAO,KAAK,SAAS;EACjC,MAAM,KAAK,GAAG,OAAO,GAAG,KAAK,MAAM,QAAQ,iBAAiB,EAAE;EAC9D,MAAM,SAAA,GAAA,cAAA,cAAA,CAAsB,KAAK,OAAO,KAAK;EAC7C,MAAM,SAAS,mBAAmB,oBAAoB,KAAK;EAE3D,OACE,iBAAA,GAAA,kBAAA,KAAA,CAACC,MAAAA,UAAD,EAAA,UAAA,CACE,iBAAA,GAAA,kBAAA,IAAA,CAAC,QAAD,EAAA,UACE,iBAAA,GAAA,kBAAA,IAAA,CAACC,qBAAAA,cAAD;GACS;GACP,cAAc;GACV;GACS;EACd,CAAA,EACG,CAAA,GACN,iBAAA,GAAA,kBAAA,IAAA,CAACF,SAAAA,MAAD;GACE,GAAI,UAAU,MAAM;GACpB,WAAW;GACX,KAAK;GACL,MAAM,KAAK;GACX,MAAM,KAAK,aAAa;GACxB,SAAS,KAAK;GACd,MAAM,SAAS,UAAU,QAAQ,QAAQ,KAAK,QAAQ,GAAG;GAC5C;GACb,QAAQ;GACR,mBAAmB;GACL;GACd,SAAS,UAAU,UAAU,KAAA;GAC7B,aAAa,SAAS,IAAI;GAC1B,eAAe,SAAS,KAAM;GAC9B,iBAAiB,KAAK;GACtB,SAAS,KAAK,WAAW,KAAA;GACzB,OAAO,kBAAkB,iBAAA,GAAA,kBAAA,IAAA,CAACG,mBAAAA,YAAD,EAA4B,eAAiB,CAAA,IAAI,KAAA;GAC1E,GAAK,OAAO,cAAc,aAAa,UAAU,IAAI,IAAI;EAC1D,CAAA,CACO,EAAA,GA7BK,KAAK,IA6BV;CAEd,CAAC;CAED,MAAM,sBAAsB,gBAAgB,KAAK,MAAM,UAAU;EAC/D,MAAM,SAAA,GAAA,cAAA,cAAA,CAAsB,KAAK,OAAO,KAAK;EAC7C,OACE,iBAAA,GAAA,kBAAA,IAAA,CAACC,SAAAA,eAAD;GAEE,QAAQ,KAAK,QAAQ,QAAQ;GAC7B,aAAa;GACb,SAAS,KAAK,WAAW,KAAA;GACzB,GAAI;GACJ,OAAO;IACL,MAAM,KAAK,QAAQ,QAAQ;IAC3B,UAAU;IACV,UAAU,KAAK,iBAAiB;IAChC,GAAI,OAAO,KAAK,UAAU,WAAW,KAAK,QAAQ,EAAE,OAAO,KAAK,MAAM;GACxE;GACA,GAAI,UAAU,eAAe;EAC9B,GAZM,KAYN;CAEL,CAAC;CAED,MAAM,gBAAgB,SAAS,YAAY,iBAAiB;CAE5D,MAAM,mBAAmB;EACvB,UAAU;EACV,GAAI,gBAAgB,aAChB;GAAE;GAAS,MAAM;EAAoB,IACrC,EAAE,MAAM,SAAkB;EAC9B,UAAU,gBAAgB,EAAE,QAAQ,eAAe,IAAI;EACvD,eAAe;EACf;EACA,eAAe,gBAAgB,aAAa,KAAA,IAAY;EACxD,GAAG,UAAU,MAAM;CACrB;CAEA,OACE,iBAAA,GAAA,kBAAA,IAAA,CAACC,cAAAA,KAAD;EAAK,GAAI,UAAU,MAAM;EAAG,cAAc;EAAkB,KAAK,OAAO;EAAO,GAAI;YACjF,iBAAA,GAAA,kBAAA,IAAA,CAACC,SAAAA,qBAAD;GAAqB,GAAI,UAAU,WAAW;aAC5C,iBAAA,GAAA,kBAAA,KAAA,CAACC,SAAAA,WAAD;IACQ;IACN,aAAa,SAAS,YAAY,WAAW,KAAA;IAC7C,QAAQ;IACR,QAAQ;KACN,QAAQ,aAAa,KAAK,KAAA;KAC1B,MAAM,aAAa,KAAK,KAAA;KACxB,OAAO,aAAa,IAAI,KAAA;IAC1B;IACoB;IACpB,GAAI;cAVN;KAYG;KACA,cACC,iBAAA,GAAA,kBAAA,IAAA,CAACC,SAAAA,QAAD;MACE,eAAc;MACd,UAAU,YACR,iBAAA,GAAA,kBAAA,IAAA,CAACC,oBAAAA,aAAD;OACE,SAAS,QAAQ;OACjB,aAAa;OACb,gBAAgB,aAAa,iBAAiB;OAC9C,YAAY;OACZ,QAAQ;OACA;OACI;MACb,CAAA;MAEH,GAAI;KACL,CAAA;KAGH,iBAAA,GAAA,kBAAA,IAAA,CAACC,SAAAA,eAAD;MACmB;MACjB,UAAU,aAAa,OAAO,aAAa;MAC3C,YAAY,aAAa,OAAO,aAAa;MAC7C,GAAI,UAAU,MAAM;MACpB,GAAI;KACL,CAAA;KAED,iBAAA,GAAA,kBAAA,KAAA,CAACC,SAAAA,OAAD;MACE,MAAM,CAAC;MACP,GAAK,gBAAgB,aAAa,EAAE,MAAM,SAAS,IAAI,EAAE,QAAQ;MACjE,MAAM;OAAE,WAAW;OAAoB,UAAU;OAAI,MAAM;MAAe;MAC1E,QAAO;MACP,UAAS;MACT,UAAU,gBAAgB,EAAE,QAAQ,eAAe,IAAI;MACvD,YAAY;MACZ,eAAe,gBAAgB,aAAa,gBAAgB,KAAA;MAC5D,GAAI,UAAU,MAAM;MACpB,GAAI;gBAVN,CAYG,cACC,iBAAA,GAAA,kBAAA,IAAA,CAACC,SAAAA,OAAD;OAAO,UAAS;OAAe,QAAQ;OAAK,UAAU;OAAI,GAAI,UAAU,WAAW;iBAChF;MACI,CAAA,GAER,YAAY,QACR;;KAEP,iBAAA,GAAA,kBAAA,KAAA,CAACC,SAAAA,OAAD;MACE,aAAY;MACZ,MAAM;OAAE,WAAW;OAAqB,UAAU;OAAI,MAAM;MAAe;MAC3E,MAAM,CAAC;MACP,GAAI;MACJ,GAAI;gBALN,CAOG,cACC,iBAAA,GAAA,kBAAA,IAAA,CAACD,SAAAA,OAAD;OACE,UAAS;OACT,OAAO;OACP,YAAW;OACX,UAAU;OACV,QAAQ;OACR,GAAI,UAAU,WAAW;iBAExB;MACI,CAAA,GAER,YAAY,QACR;;KAEP,iBAAA,GAAA,kBAAA,KAAA,CAACC,SAAAA,OAAD;MACE,SAAQ;MACR,aAAY;MACZ,MAAM;OAAE,WAAW;OAAoB,UAAU;OAAI,MAAM;MAAe;MAC1E,MAAM,CAAC;MACP,GAAI;MACJ,GAAI;gBANN,CAQG,mBACC,iBAAA,GAAA,kBAAA,IAAA,CAACD,SAAAA,OAAD;OACE,UAAS;OACT,OAAO;OACP,YAAW;OACX,UAAU;OACV,QAAQ;OACR,GAAI,UAAU,WAAW;iBAExB;MACI,CAAA,GAER,YAAY,QACR;;KAEN,eACC,iBAAA,GAAA,kBAAA,IAAA,CAACE,SAAAA,SAAD;MACE,mBAAmB;MACA;MACnB,UAAU,gBAAgB,aAAa,CAAC,IAAI,EAAE,GAAG,EAAE;MACnD,QAAQ;OACN,QAAQ;OACR,aAAa;OACb;MACF;MACA,UAAU,EAAE,OAAO,SAAS,qBAC1B,iBAAA,GAAA,kBAAA,IAAA,CAACC,qBAAAA,cAAD;OACE,OAAO,kBAAkB,UAAU,eAAe,OAAO,OAAO,IAAI;OAC3D;OACH;OACN,YAAY;OACZ,QAAQ;OACA;OACQ;OACJ;MACb,CAAA;MAEH,GAAI;KACL,CAAA;KAGF,SAAS,WACR,iBAAA,GAAA,kBAAA,IAAA,CAAC,QAAD,EAAA,UACE,iBAAA,GAAA,kBAAA,IAAA,CAACC,kBAAAA,WAAD;MACE,QAAQ;MACR,IAAI;MACJ,QAAQ,eAAeC,yBAAAA,sBAAsB;OAAE;OAAM;MAAO,CAAC;MAChD;KACd,CAAA,EACG,CAAA;KAGP;KACA,YAAY;KACZ,aACC,iBAAA,GAAA,kBAAA,IAAA,CAACC,mBAAAA,YAAD;MACW;MACT,YAAY;MACZ,QAAQ;MACR,GAAI;KACL,CAAA;KAEF;IACgB;;EACA,CAAA;CAClB,CAAA;AAET,CAAC;AAED,UAAU,UAAUnB,0BAAAA;AACpB,UAAU,eAAe;AACzB,UAAU,cAAc"}
+{"version":3,"file":"AreaChart.cjs","names":["createVarsResolver","getThemeColor","factory","useProps","useMantineTheme","useId","useState","useResolvedStylesApi","useStyles","classes","Area","Fragment","AreaGradient","PointLabel","ReferenceLine","ReferenceArea","ReferenceDot","Box","ResponsiveContainer","ReChartsAreaChart","Legend","ChartLegend","CartesianGrid","XAxis","Label","YAxis","Tooltip","ChartTooltip","AreaSplit","getDefaultSplitOffset","ChartBrush"],"sources":["../../src/AreaChart/AreaChart.tsx"],"sourcesContent":["import { Fragment, useId, useState } from 'react';\nimport {\n  Area,\n  AreaProps,\n  CartesianGrid,\n  Label,\n  Legend,\n  AreaChart as ReChartsAreaChart,\n  ReferenceArea,\n  ReferenceDot,\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  MantineColor,\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 { AreaGradient } from './AreaGradient';\nimport { AreaSplit } from './AreaSplit';\nimport { getDefaultSplitOffset } from './get-split-offset';\nimport classes from '../grid-chart.module.css';\n\nfunction valueToPercent(value: number) {\n  return `${(value * 100).toFixed(0)}%`;\n}\n\nexport interface AreaChartSeries extends ChartSeries {\n  strokeDasharray?: string | number;\n  color: MantineColor;\n  curveType?: AreaChartCurveType;\n}\n\nexport type AreaChartType = 'default' | 'stacked' | 'percent' | 'split' | 'stream';\n\nexport type AreaChartCurveType =\n  | 'bump'\n  | 'linear'\n  | 'natural'\n  | 'monotone'\n  | 'step'\n  | 'stepBefore'\n  | 'stepAfter';\n\nexport type AreaChartStylesNames =\n  | 'area'\n  | BaseChartStylesNames\n  | ChartLegendStylesNames\n  | ChartTooltipStylesNames;\n\nexport type AreaChartCSSVariables = {\n  root: '--chart-text-color' | '--chart-grid-color';\n};\n\nexport interface AreaChartProps\n  extends\n    BoxProps,\n    Omit<GridChartBaseProps, 'withXAxis' | 'withYAxis'>,\n    StylesApiProps<AreaChartFactory>,\n    ElementProps<'div'> {\n  /** An array of objects with `name` and `color` keys. Determines which data should be consumed from the `data` array. */\n  series: AreaChartSeries[];\n\n  /** Determines whether x-axis should be displayed. Defaults to `false` for `type=\"stream\"` with `orientation=\"vertical\"` – the floating baseline makes the values not meaningful to read off. @default true */\n  withXAxis?: boolean;\n\n  /** Determines whether y-axis should be displayed. Defaults to `false` for `type=\"stream\"` with `orientation=\"horizontal\"` – the floating baseline makes the values not meaningful to read off. @default true */\n  withYAxis?: boolean;\n\n  /** Controls how chart areas are positioned relative to each other. Set to `'stream'` to render a streamgraph. @default 'default' */\n  type?: AreaChartType;\n\n  /** Determines whether the chart area should be represented with a gradient instead of the solid color @default false */\n  withGradient?: boolean;\n\n  /** Type of the curve @default 'monotone' */\n  curveType?: AreaChartCurveType;\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 areas @default 2 */\n  strokeWidth?: number;\n\n  /** Props passed down to recharts `AreaChart` component */\n  areaChartProps?: React.ComponentProps<typeof ReChartsAreaChart>;\n\n  /** Controls fill opacity of all areas @default 0.2 */\n  fillOpacity?: number;\n\n  /** A tuple of colors used when `type=\"split\"` is set, ignored in all other cases. A tuple may include theme colors reference or any valid CSS colors @default ['green.7', 'red.7'] */\n  splitColors?: [MantineColor, MantineColor];\n\n  /** Offset for the split gradient. By default, value is inferred from `data` and `series` if possible. Must be generated from the data array with `getSplitOffset` function. */\n  splitOffset?: number;\n\n  /** If set, points with `null` values are 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 `Area` component */\n  areaProps?:\n    | ((series: AreaChartSeries) => Partial<Omit<AreaProps<any, any>, 'ref'>>)\n    | Partial<Omit<AreaProps<any, any>, 'ref'>>;\n\n  /** If set, each point has an associated label @default false */\n  withPointLabels?: boolean;\n}\n\nexport type AreaChartFactory = Factory<{\n  props: AreaChartProps;\n  ref: HTMLDivElement;\n  stylesNames: AreaChartStylesNames;\n  vars: AreaChartCSSVariables;\n}>;\n\nconst defaultProps = {\n  withDots: true,\n  withTooltip: true,\n  connectNulls: true,\n  strokeWidth: 2,\n  tooltipAnimationDuration: 0,\n  fillOpacity: 0.2,\n  tickLine: 'y',\n  strokeDasharray: '5 5',\n  curveType: 'monotone',\n  gridAxis: 'x',\n  type: 'default',\n  splitColors: ['green.7', 'red.7'],\n  orientation: 'horizontal',\n  accessibilityLayer: true,\n} satisfies Partial<AreaChartProps>;\n\nconst varsResolver = createVarsResolver<AreaChartFactory>((theme, { textColor, gridColor }) => ({\n  root: {\n    '--chart-text-color': textColor ? getThemeColor(textColor, theme) : undefined,\n    '--chart-grid-color': gridColor ? getThemeColor(gridColor, theme) : undefined,\n  },\n}));\n\nexport const AreaChart = factory<AreaChartFactory>((_props) => {\n  const props = useProps('AreaChart', defaultProps, _props);\n  const {\n    classNames,\n    className,\n    style,\n    styles,\n    unstyled,\n    vars,\n    data,\n    series,\n    withGradient,\n    dataKey,\n    withXAxis: withXAxisProp,\n    withYAxis: withYAxisProp,\n    curveType,\n    gridProps,\n    withDots,\n    tickLine,\n    strokeDasharray,\n    gridAxis,\n    unit,\n    yAxisProps,\n    xAxisProps,\n    dotProps,\n    activeDotProps,\n    strokeWidth,\n    tooltipAnimationDuration,\n    type,\n    legendProps,\n    tooltipProps,\n    withLegend,\n    withTooltip,\n    areaChartProps,\n    fillOpacity,\n    splitColors,\n    splitOffset,\n    connectNulls,\n    onMouseLeave,\n    orientation,\n    referenceLines,\n    referenceAreas,\n    referenceDots,\n    dir,\n    valueFormatter,\n    children,\n    areaProps,\n    xAxisLabel,\n    yAxisLabel,\n    withRightYAxis,\n    rightYAxisLabel,\n    rightYAxisProps,\n    withPointLabels,\n    gridColor,\n    textColor,\n    attributes,\n    accessibilityLayer,\n    withBrush,\n    brushProps,\n    ...others\n  } = props;\n\n  const theme = useMantineTheme();\n  const baseId = useId();\n  const splitId = `${baseId}-split`;\n  const withXTickLine = gridAxis !== 'none' && (tickLine === 'x' || tickLine === 'xy');\n  const withYTickLine = gridAxis !== 'none' && (tickLine === 'y' || tickLine === 'xy');\n  const isAnimationActive = (tooltipAnimationDuration || 0) > 0;\n  const _withGradient = typeof withGradient === 'boolean' ? withGradient : type === 'default';\n  const stacked = type === 'stacked' || type === 'percent' || type === 'stream';\n  const withXAxis = withXAxisProp ?? !(type === 'stream' && orientation === 'vertical');\n  const withYAxis = withYAxisProp ?? !(type === 'stream' && orientation === 'horizontal');\n  const [highlightedArea, setHighlightedArea] = useState<string | number | null>(null);\n  const shouldHighlight = highlightedArea !== null;\n  const handleMouseLeave = (event: React.MouseEvent<HTMLDivElement>) => {\n    setHighlightedArea(null);\n    onMouseLeave?.(event);\n  };\n\n  const { resolvedClassNames, resolvedStyles } = useResolvedStylesApi<AreaChartFactory>({\n    classNames,\n    styles,\n    props,\n  });\n\n  const getStyles = useStyles<AreaChartFactory>({\n    name: 'AreaChart',\n    classes: classes as any,\n    props,\n    className,\n    style,\n    classNames,\n    styles,\n    unstyled,\n    attributes,\n    vars,\n    varsResolver,\n  });\n\n  const dotsAreas = series.map((item) => {\n    const color = getThemeColor(item.color, theme);\n    const dimmed = shouldHighlight && highlightedArea !== item.name;\n    return (\n      <Area\n        {...getStyles('area')}\n        activeDot={{ fill: theme.white, stroke: color, strokeWidth: 2, r: 4, ...activeDotProps }}\n        dot={{ fill: color, fillOpacity: dimmed ? 0 : 1, strokeWidth: 2, r: 4, ...dotProps }}\n        key={item.name}\n        name={item.name}\n        type={curveType}\n        dataKey={item.name}\n        fill=\"none\"\n        strokeWidth={strokeWidth}\n        stroke=\"none\"\n        isAnimationActive={false}\n        connectNulls={connectNulls}\n        stackId={stacked ? 'stack-dots' : undefined}\n        yAxisId={item.yAxisId || undefined}\n        {...(typeof areaProps === 'function' ? areaProps(item) : areaProps)}\n      />\n    );\n  });\n\n  const areas = series.map((item) => {\n    const id = `${baseId}-${item.color.replace(/[^a-zA-Z0-9]/g, '')}`;\n    const color = getThemeColor(item.color, theme);\n    const dimmed = shouldHighlight && highlightedArea !== item.name;\n\n    return (\n      <Fragment key={item.name}>\n        <defs>\n          <AreaGradient\n            color={color}\n            withGradient={_withGradient}\n            id={id}\n            fillOpacity={fillOpacity}\n          />\n        </defs>\n        <Area\n          {...getStyles('area')}\n          activeDot={false}\n          dot={false}\n          name={item.name}\n          type={item.curveType ?? curveType}\n          dataKey={item.name}\n          fill={type === 'split' ? `url(#${splitId})` : `url(#${id})`}\n          strokeWidth={strokeWidth}\n          stroke={color}\n          isAnimationActive={false}\n          connectNulls={connectNulls}\n          stackId={stacked ? 'stack' : undefined}\n          fillOpacity={dimmed ? 0 : 1}\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      </Fragment>\n    );\n  });\n\n  const referenceLinesItems = referenceLines?.map(\n    ({ color: lineColor, labelPosition, ...line }, index) => {\n      const color = getThemeColor(lineColor, theme);\n      return (\n        <ReferenceLine\n          key={index}\n          stroke={lineColor ? color : 'var(--chart-grid-color)'}\n          strokeWidth={1}\n          yAxisId={line.yAxisId || undefined}\n          {...line}\n          label={{\n            fill: lineColor ? color : 'currentColor',\n            fontSize: 12,\n            position: labelPosition ?? 'insideBottomLeft',\n            ...(typeof line.label === 'object' ? line.label : { value: line.label }),\n          }}\n          {...getStyles('referenceLine')}\n        />\n      );\n    }\n  );\n\n  const referenceAreasItems = referenceAreas?.map(\n    ({ color: areaColor, labelPosition, ...area }, index) => {\n      const color = getThemeColor(areaColor, theme);\n      return (\n        <ReferenceArea\n          key={index}\n          fill={areaColor ? color : 'var(--chart-grid-color)'}\n          fillOpacity={0.2}\n          stroke={areaColor ? color : 'var(--chart-grid-color)'}\n          strokeOpacity={0.6}\n          yAxisId={area.yAxisId || undefined}\n          {...area}\n          label={{\n            fill: areaColor ? color : 'currentColor',\n            fontSize: 12,\n            position: labelPosition ?? 'insideTop',\n            ...(typeof area.label === 'object' ? area.label : { value: area.label }),\n          }}\n          {...getStyles('referenceArea')}\n        />\n      );\n    }\n  );\n\n  const referenceDotsItems = referenceDots?.map(\n    ({ color: dotColor, labelPosition, ...dot }, index) => {\n      const color = getThemeColor(dotColor, theme);\n      return (\n        <ReferenceDot\n          key={index}\n          r={5}\n          fill={dotColor ? color : 'var(--chart-grid-color)'}\n          stroke=\"var(--mantine-color-body)\"\n          strokeWidth={2}\n          yAxisId={dot.yAxisId || undefined}\n          {...dot}\n          label={{\n            fill: dotColor ? color : 'currentColor',\n            fontSize: 12,\n            position: labelPosition ?? 'top',\n            ...(typeof dot.label === 'object' ? dot.label : { value: dot.label }),\n          }}\n          {...getStyles('referenceDot')}\n        />\n      );\n    }\n  );\n\n  const tickFormatter = type === 'percent' ? valueToPercent : valueFormatter;\n\n  const sharedYAxisProps = {\n    axisLine: false,\n    ...(orientation === 'vertical'\n      ? { dataKey, type: 'category' as const }\n      : { type: 'number' as const }),\n    tickLine: withYTickLine ? { stroke: 'currentColor' } : false,\n    allowDecimals: true,\n    unit,\n    tickFormatter: orientation === 'vertical' ? undefined : tickFormatter,\n    ...getStyles('axis'),\n  };\n\n  return (\n    <Box {...getStyles('root')} onMouseLeave={handleMouseLeave} dir={dir || 'ltr'} {...others}>\n      <ResponsiveContainer {...getStyles('container')}>\n        <ReChartsAreaChart\n          data={data}\n          stackOffset={type === 'percent' ? 'expand' : type === 'stream' ? 'wiggle' : undefined}\n          layout={orientation}\n          margin={{\n            bottom: xAxisLabel ? 30 : undefined,\n            left: yAxisLabel ? 10 : undefined,\n            right: yAxisLabel ? 5 : undefined,\n          }}\n          accessibilityLayer={accessibilityLayer}\n          {...areaChartProps}\n        >\n          {referenceAreasItems}\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          <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          <XAxis\n            hide={!withXAxis}\n            {...(orientation === 'vertical' ? { type: 'number' } : { 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            tickFormatter={orientation === 'vertical' ? tickFormatter : undefined}\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          {withTooltip && (\n            <Tooltip\n              animationDuration={tooltipAnimationDuration}\n              isAnimationActive={isAnimationActive}\n              position={orientation === 'vertical' ? {} : { 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          {type === 'split' && (\n            <defs>\n              <AreaSplit\n                colors={splitColors}\n                id={splitId}\n                offset={splitOffset ?? getDefaultSplitOffset({ data, series })}\n                fillOpacity={fillOpacity}\n              />\n            </defs>\n          )}\n\n          {areas}\n          {withDots && dotsAreas}\n          {referenceLinesItems}\n          {referenceDotsItems}\n          {withBrush && (\n            <ChartBrush\n              dataKey={dataKey}\n              classNames={resolvedClassNames}\n              styles={resolvedStyles}\n              {...brushProps}\n            />\n          )}\n          {children}\n        </ReChartsAreaChart>\n      </ResponsiveContainer>\n    </Box>\n  );\n});\n\nAreaChart.classes = classes;\nAreaChart.varsResolver = varsResolver;\nAreaChart.displayName = '@mantine/charts/AreaChart';\n\nexport namespace AreaChart {\n  export type Props = AreaChartProps;\n  export type StylesNames = AreaChartStylesNames;\n  export type Factory = AreaChartFactory;\n  export type Type = AreaChartType;\n  export type Series = AreaChartSeries;\n  export type CurveType = AreaChartCurveType;\n}\n"],"mappings":"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"}

package/cjs/AreaChart/AreaGradient.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"AreaGradient.cjs","names":[],"sources":["../../src/AreaChart/AreaGradient.tsx"],"sourcesContent":["interface AreaGradientProps {\n  color: string;\n  id: string;\n  withGradient: boolean | undefined;\n  fillOpacity: number | undefined;\n}\n\nexport function AreaGradient({ color, id, withGradient, fillOpacity }: AreaGradientProps) {\n  return (\n    <>\n      {withGradient ? (\n        <linearGradient id={id} x1=\"0\" y1=\"0\" x2=\"0\" y2=\"1\">\n          <stop offset=\"0%\" stopColor={color} stopOpacity={fillOpacity} />\n          <stop offset=\"100%\" stopColor={color} stopOpacity={0.01} />\n        </linearGradient>\n      ) : (\n        <linearGradient id={id} x1=\"0\" y1=\"0\" x2=\"0\" y2=\"1\">\n          <stop stopColor={color} stopOpacity={fillOpacity ?? 0.2} />\n        </linearGradient>\n      )}\n    </>\n  );\n}\n\nAreaGradient.displayName = '@mantine/charts/AreaGradient';\n"],"mappings":";;;AAOA,SAAgB,aAAa,EAAE,OAAO,IAAI,cAAc,eAAkC;CACxF,OACE,iBAAA,GAAA,kBAAA,IAAA,CAAA,kBAAA,UAAA,EAAA,UACG,eACC,iBAAA,GAAA,kBAAA,KAAA,CAAC,kBAAD;EAAoB;EAAI,IAAG;EAAI,IAAG;EAAI,IAAG;EAAI,IAAG;YAAhD,CACE,iBAAA,GAAA,kBAAA,IAAA,CAAC,QAAD;GAAM,QAAO;GAAK,WAAW;GAAO,aAAa;EAAc,CAAA,GAC/D,iBAAA,GAAA,kBAAA,IAAA,CAAC,QAAD;GAAM,QAAO;GAAO,WAAW;GAAO,aAAa;EAAO,CAAA,CAC5C;MAEhB,iBAAA,GAAA,kBAAA,IAAA,CAAC,kBAAD;EAAoB;EAAI,IAAG;EAAI,IAAG;EAAI,IAAG;EAAI,IAAG;YAC9C,iBAAA,GAAA,kBAAA,IAAA,CAAC,QAAD;GAAM,WAAW;GAAO,aAAa,eAAe;EAAM,CAAA;CAC5C,CAAA,EAElB,CAAA;AAEN;AAEA,aAAa,cAAc"}
+{"version":3,"file":"AreaGradient.cjs","names":[],"sources":["../../src/AreaChart/AreaGradient.tsx"],"sourcesContent":["interface AreaGradientProps {\n  color: string;\n  id: string;\n  withGradient: boolean | undefined;\n  fillOpacity: number | undefined;\n}\n\nexport function AreaGradient({ color, id, withGradient, fillOpacity }: AreaGradientProps) {\n  return (\n    <>\n      {withGradient ? (\n        <linearGradient id={id} x1=\"0\" y1=\"0\" x2=\"0\" y2=\"1\">\n          <stop offset=\"0%\" stopColor={color} stopOpacity={fillOpacity} />\n          <stop offset=\"100%\" stopColor={color} stopOpacity={0.01} />\n        </linearGradient>\n      ) : (\n        <linearGradient id={id} x1=\"0\" y1=\"0\" x2=\"0\" y2=\"1\">\n          <stop stopColor={color} stopOpacity={fillOpacity ?? 0.2} />\n        </linearGradient>\n      )}\n    </>\n  );\n}\n\nAreaGradient.displayName = '@mantine/charts/AreaGradient';\n"],"mappings":";;;AAOA,SAAgB,aAAa,EAAE,OAAO,IAAI,cAAc,eAAkC;CACxF,OACE,iBAAA,GAAA,kBAAA,IAAA,CAAA,kBAAA,UAAA,EAAA,UACG,eACC,iBAAA,GAAA,kBAAA,KAAA,CAAC,kBAAD;EAAoB;EAAI,IAAG;EAAI,IAAG;EAAI,IAAG;EAAI,IAAG;EAAhD,UAAA,CACE,iBAAA,GAAA,kBAAA,IAAA,CAAC,QAAD;GAAM,QAAO;GAAK,WAAW;GAAO,aAAa;EAAc,CAAA,GAC/D,iBAAA,GAAA,kBAAA,IAAA,CAAC,QAAD;GAAM,QAAO;GAAO,WAAW;GAAO,aAAa;EAAO,CAAA,CAC5C;CAEhB,CAAA,IAAA,iBAAA,GAAA,kBAAA,IAAA,CAAC,kBAAD;EAAoB;EAAI,IAAG;EAAI,IAAG;EAAI,IAAG;EAAI,IAAG;EAC9C,UAAA,iBAAA,GAAA,kBAAA,IAAA,CAAC,QAAD;GAAM,WAAW;GAAO,aAAa,eAAe;EAAM,CAAA;CAC5C,CAAA,EAElB,CAAA;AAEN;AAEA,aAAa,cAAc"}

package/cjs/AreaChart/AreaSplit.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"AreaSplit.cjs","names":[],"sources":["../../src/AreaChart/AreaSplit.tsx"],"sourcesContent":["import { getThemeColor, MantineColor, useMantineTheme } from '@mantine/core';\n\ninterface AreaSplitProps {\n  offset: number;\n  colors: [MantineColor, MantineColor];\n  id?: string;\n  fillOpacity: number | undefined;\n}\n\nexport function AreaSplit({ offset, id, colors, fillOpacity }: AreaSplitProps) {\n  const theme = useMantineTheme();\n\n  return (\n    <linearGradient id={id} x1=\"0\" y1=\"0\" x2=\"0\" y2=\"1\">\n      <stop\n        offset={offset}\n        stopColor={getThemeColor(colors[0], theme)}\n        stopOpacity={fillOpacity ?? 0.2}\n      />\n      <stop\n        offset={offset}\n        stopColor={getThemeColor(colors[1], theme)}\n        stopOpacity={fillOpacity ?? 0.2}\n      />\n    </linearGradient>\n  );\n}\n\nAreaSplit.displayName = '@mantine/charts/AreaSplit';\n"],"mappings":";;;;AASA,SAAgB,UAAU,EAAE,QAAQ,IAAI,QAAQ,eAA+B;CAC7E,MAAM,SAAA,GAAA,cAAA,gBAAA,CAAwB;CAE9B,OACE,iBAAA,GAAA,kBAAA,KAAA,CAAC,kBAAD;EAAoB;EAAI,IAAG;EAAI,IAAG;EAAI,IAAG;EAAI,IAAG;YAAhD,CACE,iBAAA,GAAA,kBAAA,IAAA,CAAC,QAAD;GACU;GACR,YAAA,GAAA,cAAA,cAAA,CAAyB,OAAO,IAAI,KAAK;GACzC,aAAa,eAAe;EAC7B,CAAA,GACD,iBAAA,GAAA,kBAAA,IAAA,CAAC,QAAD;GACU;GACR,YAAA,GAAA,cAAA,cAAA,CAAyB,OAAO,IAAI,KAAK;GACzC,aAAa,eAAe;EAC7B,CAAA,CACa;;AAEpB;AAEA,UAAU,cAAc"}
+{"version":3,"file":"AreaSplit.cjs","names":["useMantineTheme","getThemeColor"],"sources":["../../src/AreaChart/AreaSplit.tsx"],"sourcesContent":["import { getThemeColor, MantineColor, useMantineTheme } from '@mantine/core';\n\ninterface AreaSplitProps {\n  offset: number;\n  colors: [MantineColor, MantineColor];\n  id?: string;\n  fillOpacity: number | undefined;\n}\n\nexport function AreaSplit({ offset, id, colors, fillOpacity }: AreaSplitProps) {\n  const theme = useMantineTheme();\n\n  return (\n    <linearGradient id={id} x1=\"0\" y1=\"0\" x2=\"0\" y2=\"1\">\n      <stop\n        offset={offset}\n        stopColor={getThemeColor(colors[0], theme)}\n        stopOpacity={fillOpacity ?? 0.2}\n      />\n      <stop\n        offset={offset}\n        stopColor={getThemeColor(colors[1], theme)}\n        stopOpacity={fillOpacity ?? 0.2}\n      />\n    </linearGradient>\n  );\n}\n\nAreaSplit.displayName = '@mantine/charts/AreaSplit';\n"],"mappings":";;;;AASA,SAAgB,UAAU,EAAE,QAAQ,IAAI,QAAQ,eAA+B;CAC7E,MAAM,SAAA,GAAQA,cAAAA,gBAAAA,CAAgB;CAE9B,OACE,iBAAA,GAAA,kBAAA,KAAA,CAAC,kBAAD;EAAoB;EAAI,IAAG;EAAI,IAAG;EAAI,IAAG;EAAI,IAAG;EAAhD,UAAA,CACE,iBAAA,GAAA,kBAAA,IAAA,CAAC,QAAD;GACU;GACR,YAAA,GAAWC,cAAAA,cAAAA,CAAc,OAAO,IAAI,KAAK;GACzC,aAAa,eAAe;EAC7B,CAAA,GACD,iBAAA,GAAA,kBAAA,IAAA,CAAC,QAAD;GACU;GACR,YAAA,GAAWA,cAAAA,cAAAA,CAAc,OAAO,IAAI,KAAK;GACzC,aAAa,eAAe;EAC7B,CAAA,CACa;;AAEpB;AAEA,UAAU,cAAc"}

package/cjs/BarChart/BarChart.cjs

@@ -51,7 +51,7 @@ function getBarFill(barProps, series) {
 }
 const BarChart = (0, _mantine_core.factory)((_props) => {
 	const props = (0, _mantine_core.useProps)("BarChart", 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, fillOpacity, barChartProps, type, orientation, dir, valueFormatter, children, barProps, xAxisLabel, yAxisLabel, withBarValueLabel, valueLabelProps, withRightYAxis, rightYAxisLabel, rightYAxisProps, minBarSize, maxBarWidth, mod, getBarColor, gridColor, textColor, attributes, accessibilityLayer, withBrush, brushProps, ...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, referenceAreas, referenceDots, fillOpacity, barChartProps, type, orientation, dir, valueFormatter, children, barProps, xAxisLabel, yAxisLabel, withBarValueLabel, valueLabelProps, withRightYAxis, rightYAxisLabel, rightYAxisProps, minBarSize, maxBarWidth, mod, getBarColor, gridColor, textColor, attributes, accessibilityLayer, withBrush, brushProps, ...others } = props;
 	const theme = (0, _mantine_core.useMantineTheme)();
 	const withXTickLine = gridAxis !== "none" && (tickLine === "x" || tickLine === "xy");
 	const withYTickLine = gridAxis !== "none" && (tickLine === "y" || tickLine === "xy");
@@ -124,22 +124,58 @@ const BarChart = (0, _mantine_core.factory)((_props) => {
 			...typeof valueLabelProps === "function" ? valueLabelProps(item) : valueLabelProps
 		}));
 	});
-	const referenceLinesItems = referenceLines?.map((line, index) => {
-		const color = (0, _mantine_core.getThemeColor)(line.color, theme);
+	const referenceLinesItems = referenceLines?.map(({ color: lineColor, labelPosition, ...line }, index) => {
+		const color = (0, _mantine_core.getThemeColor)(lineColor, theme);
 		return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(recharts.ReferenceLine, {
-			stroke: line.color ? color : "var(--chart-grid-color)",
+			stroke: lineColor ? color : "var(--chart-grid-color)",
 			strokeWidth: 1,
 			yAxisId: line.yAxisId || void 0,
 			...line,
 			label: {
-				fill: line.color ? color : "currentColor",
+				fill: lineColor ? color : "currentColor",
 				fontSize: 12,
-				position: line.labelPosition ?? "insideBottomLeft",
+				position: labelPosition ?? "insideBottomLeft",
 				...typeof line.label === "object" ? line.label : { value: line.label }
 			},
 			...getStyles("referenceLine")
 		}, index);
 	});
+	const referenceAreasItems = referenceAreas?.map(({ color: areaColor, labelPosition, ...area }, index) => {
+		const color = (0, _mantine_core.getThemeColor)(areaColor, theme);
+		return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(recharts.ReferenceArea, {
+			fill: areaColor ? color : "var(--chart-grid-color)",
+			fillOpacity: .2,
+			stroke: areaColor ? color : "var(--chart-grid-color)",
+			strokeOpacity: .6,
+			yAxisId: area.yAxisId || void 0,
+			...area,
+			label: {
+				fill: areaColor ? color : "currentColor",
+				fontSize: 12,
+				position: labelPosition ?? "insideTop",
+				...typeof area.label === "object" ? area.label : { value: area.label }
+			},
+			...getStyles("referenceArea")
+		}, index);
+	});
+	const referenceDotsItems = referenceDots?.map(({ color: dotColor, labelPosition, ...dot }, index) => {
+		const color = (0, _mantine_core.getThemeColor)(dotColor, theme);
+		return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(recharts.ReferenceDot, {
+			r: 5,
+			fill: dotColor ? color : "var(--chart-grid-color)",
+			stroke: "var(--mantine-color-body)",
+			strokeWidth: 2,
+			yAxisId: dot.yAxisId || void 0,
+			...dot,
+			label: {
+				fill: dotColor ? color : "currentColor",
+				fontSize: 12,
+				position: labelPosition ?? "top",
+				...typeof dot.label === "object" ? dot.label : { value: dot.label }
+			},
+			...getStyles("referenceDot")
+		}, index);
+	});
 	const sharedYAxisProps = {
 		axisLine: false,
 		...orientation === "vertical" ? {
@@ -173,6 +209,7 @@ const BarChart = (0, _mantine_core.factory)((_props) => {
 				accessibilityLayer,
 				...barChartProps,
 				children: [
+					referenceAreasItems,
 					withLegend && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(recharts.Legend, {
 						verticalAlign: "top",
 						content: (payload) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_ChartLegend.ChartLegend, {
@@ -283,6 +320,7 @@ const BarChart = (0, _mantine_core.factory)((_props) => {
 					}),
 					bars,
 					referenceLinesItems,
+					referenceDotsItems,
 					withBrush && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_ChartBrush.ChartBrush, {
 						dataKey,
 						classNames: resolvedClassNames,

package/cjs/BarChart/BarChart.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"BarChart.cjs","names":["Bar","React","Rectangle","LabelList","ReferenceLine","Box","ResponsiveContainer","ReChartsBarChart","Legend","ChartLegend","XAxis","Label","YAxis","CartesianGrid","Tooltip","ChartTooltip","ChartBrush","classes"],"sources":["../../src/BarChart/BarChart.tsx"],"sourcesContent":["import React, { useState } from 'react';\nimport {\n  Bar,\n  BarProps,\n  BarShapeProps,\n  CartesianGrid,\n  Label,\n  LabelList,\n  LabelListProps,\n  Legend,\n  BarChart as ReChartsBarChart,\n  Rectangle,\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  MantineColor,\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 type { BaseChartStylesNames, ChartSeries, GridChartBaseProps } from '../types';\nimport classes from '../grid-chart.module.css';\n\nfunction valueToPercent(value: number) {\n  return `${(value * 100).toFixed(0)}%`;\n}\n\nexport interface BarChartSeries extends ChartSeries {\n  stackId?: string;\n}\n\nexport type BarChartType = 'default' | 'stacked' | 'percent' | 'waterfall';\n\nexport type BarChartStylesNames =\n  | 'bar'\n  | BaseChartStylesNames\n  | ChartLegendStylesNames\n  | ChartTooltipStylesNames;\n\nexport type BarChartCssVariables = {\n  root:\n    | '--chart-text-color'\n    | '--chart-grid-color'\n    | '--chart-cursor-fill'\n    | '--chart-bar-label-color';\n};\n\nexport interface BarChartProps\n  extends BoxProps, GridChartBaseProps, StylesApiProps<BarChartFactory>, 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: BarChartSeries[];\n\n  /** Controls how bars are positioned relative to each other @default 'default' */\n  type?: BarChartType;\n\n  /** Controls fill opacity of all bars @default 1 */\n  fillOpacity?: number;\n\n  /** Fill of hovered bar section, by default value is based on color scheme */\n  cursorFill?: MantineColor;\n\n  /** Props passed down to recharts `BarChart` component */\n  barChartProps?: React.ComponentProps<typeof ReChartsBarChart>;\n\n  /** Additional components that are rendered inside recharts `BarChart` component */\n  children?: React.ReactNode;\n\n  /** Props passed down to recharts `Bar` component */\n  barProps?:\n    | ((series: BarChartSeries) => Partial<Omit<BarProps, 'ref'>>)\n    | Partial<Omit<BarProps, 'ref'>>;\n\n  /** Determines whether a label with bar value should be displayed on top of each bar, incompatible with `type=\"stacked\"` and `type=\"percent\"` @default false */\n  withBarValueLabel?: boolean;\n\n  /** Props passed down to recharts `LabelList` component */\n  valueLabelProps?:\n    | ((series: BarChartSeries) => Partial<Omit<LabelListProps, 'ref'>>)\n    | Partial<LabelListProps>;\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  /** Controls color of the bar label, by default the value is determined by the chart orientation */\n  barLabelColor?: MantineColor;\n\n  /** A function to assign dynamic bar color based on its value */\n  getBarColor?: (value: number, series: BarChartSeries) => MantineColor;\n}\n\nexport type BarChartFactory = Factory<{\n  props: BarChartProps;\n  ref: HTMLDivElement;\n  stylesNames: BarChartStylesNames;\n  vars: BarChartCssVariables;\n}>;\n\nconst defaultProps = {\n  withXAxis: true,\n  withYAxis: true,\n  withTooltip: true,\n  tooltipAnimationDuration: 0,\n  fillOpacity: 1,\n  tickLine: 'y',\n  strokeDasharray: '5 5',\n  gridAxis: 'x',\n  type: 'default',\n  accessibilityLayer: true,\n} satisfies Partial<BarChartProps>;\n\nconst varsResolver = createVarsResolver<BarChartFactory>(\n  (theme, { textColor, gridColor, cursorFill, barLabelColor }) => ({\n    root: {\n      '--chart-text-color': textColor ? getThemeColor(textColor, theme) : undefined,\n      '--chart-grid-color': gridColor ? getThemeColor(gridColor, theme) : undefined,\n      '--chart-cursor-fill': cursorFill ? getThemeColor(cursorFill, theme) : undefined,\n      '--chart-bar-label-color': barLabelColor ? getThemeColor(barLabelColor, theme) : undefined,\n    },\n  })\n);\n\nfunction calculateCumulativeTotal(waterfallData: Record<string, any>[], dataKey: string) {\n  let start: number = 0;\n  let end: number = 0;\n  return waterfallData.map((item) => {\n    if (item.standalone) {\n      for (const prop in item) {\n        if (typeof item[prop] === 'number' && prop !== dataKey) {\n          item[prop] = [0, item[prop]];\n        }\n      }\n    } else {\n      for (const prop in item) {\n        if (typeof item[prop] === 'number' && prop !== dataKey) {\n          end += item[prop];\n          item[prop] = [start, end];\n          start = end;\n        }\n      }\n    }\n    return item;\n  });\n}\n\nfunction getBarFill(barProps: BarChartProps['barProps'], series: BarChartSeries) {\n  if (typeof barProps === 'function') {\n    return barProps(series).fill;\n  }\n\n  return barProps?.fill;\n}\n\nexport const BarChart = factory<BarChartFactory>((_props) => {\n  const props = useProps('BarChart', 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    fillOpacity,\n    barChartProps,\n    type,\n    orientation,\n    dir,\n    valueFormatter,\n    children,\n    barProps,\n    xAxisLabel,\n    yAxisLabel,\n    withBarValueLabel,\n    valueLabelProps,\n    withRightYAxis,\n    rightYAxisLabel,\n    rightYAxisProps,\n    minBarSize,\n    maxBarWidth,\n    mod,\n    getBarColor,\n    gridColor,\n    textColor,\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 stacked = type === 'stacked' || type === 'percent';\n  const tickFormatter = type === 'percent' ? valueToPercent : valueFormatter;\n\n  const handleMouseLeave = (event: React.MouseEvent<HTMLDivElement>) => {\n    setHighlightedArea(null);\n    onMouseLeave?.(event);\n  };\n  const { resolvedClassNames, resolvedStyles } = useResolvedStylesApi<BarChartFactory>({\n    classNames,\n    styles,\n    props,\n  });\n\n  const inputData = type === 'waterfall' ? calculateCumulativeTotal(data, dataKey) : data;\n\n  const getStyles = useStyles<BarChartFactory>({\n    name: 'BarChart',\n    classes,\n    props,\n    className,\n    style,\n    classNames,\n    styles,\n    unstyled,\n    attributes,\n    vars,\n    varsResolver,\n  });\n\n  const bars = series.map((item) => {\n    const color = getThemeColor(item.color, theme);\n    const dimmed = shouldHighlight && highlightedArea !== item.name;\n    const resolvedBarProps = typeof barProps === 'function' ? barProps(item) : barProps;\n    const userShape = resolvedBarProps?.shape;\n\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 : fillOpacity}\n        strokeOpacity={dimmed ? 0.2 : 0}\n        stackId={stacked ? 'stack' : item.stackId || undefined}\n        yAxisId={item.yAxisId || undefined}\n        minPointSize={minBarSize}\n        {...resolvedBarProps}\n        shape={(shapeProps: BarShapeProps) => {\n          const entry = shapeProps.payload;\n          const cellColor = entry?.color\n            ? getThemeColor(entry.color, theme)\n            : typeof getBarColor === 'function'\n              ? getThemeColor(getBarColor(entry?.[item.name], item), theme)\n              : getBarFill(barProps, item) || color;\n          const coloredProps = { ...shapeProps, fill: cellColor };\n          if (typeof userShape === 'function') {\n            return (userShape as (props: BarShapeProps) => React.ReactElement)(coloredProps);\n          }\n          if (React.isValidElement(userShape)) {\n            return React.cloneElement(userShape, coloredProps as any);\n          }\n          if (typeof userShape === 'object' && userShape) {\n            return <Rectangle {...coloredProps} {...(userShape as any)} />;\n          }\n          return <Rectangle {...coloredProps} />;\n        }}\n      >\n        {withBarValueLabel && (\n          <LabelList\n            position={orientation === 'vertical' ? 'right' : 'top'}\n            fontSize={12}\n            fill=\"var(--chart-bar-label-color, var(--mantine-color-dimmed))\"\n            formatter={(val: any) => tickFormatter?.(val as any)}\n            {...(typeof valueLabelProps === 'function' ? valueLabelProps(item) : valueLabelProps)}\n          />\n        )}\n      </Bar>\n    );\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    ...(orientation === 'vertical'\n      ? { dataKey, type: 'category' as const }\n      : { type: 'number' as const }),\n    tickLine: withYTickLine ? { stroke: 'currentColor' } : false,\n    allowDecimals: true,\n    unit,\n    tickFormatter: orientation === 'vertical' ? undefined : tickFormatter,\n    ...getStyles('axis'),\n  };\n\n  return (\n    <Box\n      {...getStyles('root')}\n      onMouseLeave={handleMouseLeave}\n      dir={dir || 'ltr'}\n      mod={[{ orientation }, mod]}\n      {...others}\n    >\n      <ResponsiveContainer {...getStyles('container')}>\n        <ReChartsBarChart\n          data={inputData}\n          stackOffset={type === 'percent' ? 'expand' : undefined}\n          layout={orientation}\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          {...barChartProps}\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                  showColor={type !== 'waterfall'}\n                  attributes={attributes}\n                />\n              )}\n              {...legendProps}\n            />\n          )}\n\n          <XAxis\n            hide={!withXAxis}\n            {...(orientation === 'vertical' ? { type: 'number' } : { 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            tickFormatter={orientation === 'vertical' ? tickFormatter : undefined}\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={orientation === 'vertical' ? {} : { y: 0 }}\n              cursor={{\n                stroke: 'var(--chart-grid-color)',\n                strokeWidth: 1,\n                strokeDasharray,\n                fill: 'var(--chart-cursor-fill)',\n              }}\n              content={({ label, payload, labelFormatter }) => (\n                <ChartTooltip\n                  label={labelFormatter && payload ? labelFormatter(label, payload) : label}\n                  payload={payload}\n                  type={type === 'waterfall' ? 'scatter' : undefined}\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          {bars}\n          {referenceLinesItems}\n          {withBrush && (\n            <ChartBrush\n              dataKey={dataKey}\n              classNames={resolvedClassNames}\n              styles={resolvedStyles}\n              {...brushProps}\n            />\n          )}\n          {children}\n        </ReChartsBarChart>\n      </ResponsiveContainer>\n    </Box>\n  );\n});\n\nBarChart.displayName = '@mantine/charts/BarChart';\nBarChart.classes = classes;\nBarChart.varsResolver = varsResolver;\n\nexport namespace BarChart {\n  export type Props = BarChartProps;\n  export type CssVariables = BarChartCssVariables;\n  export type Factory = BarChartFactory;\n  export type Series = BarChartSeries;\n  export type StylesNames = BarChartStylesNames;\n  export type Type = BarChartType;\n}\n"],"mappings":"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"}
+{"version":3,"file":"BarChart.cjs","names":["createVarsResolver","getThemeColor","factory","useProps","useMantineTheme","useState","useResolvedStylesApi","useStyles","Bar","React","Rectangle","LabelList","ReferenceLine","ReferenceArea","ReferenceDot","Box","ResponsiveContainer","ReChartsBarChart","Legend","ChartLegend","XAxis","Label","YAxis","CartesianGrid","Tooltip","ChartTooltip","ChartBrush","classes"],"sources":["../../src/BarChart/BarChart.tsx"],"sourcesContent":["import React, { useState } from 'react';\nimport {\n  Bar,\n  BarProps,\n  BarShapeProps,\n  CartesianGrid,\n  Label,\n  LabelList,\n  LabelListProps,\n  Legend,\n  BarChart as ReChartsBarChart,\n  Rectangle,\n  ReferenceArea,\n  ReferenceDot,\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  MantineColor,\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 type { BaseChartStylesNames, ChartSeries, GridChartBaseProps } from '../types';\nimport classes from '../grid-chart.module.css';\n\nfunction valueToPercent(value: number) {\n  return `${(value * 100).toFixed(0)}%`;\n}\n\nexport interface BarChartSeries extends ChartSeries {\n  stackId?: string;\n}\n\nexport type BarChartType = 'default' | 'stacked' | 'percent' | 'waterfall';\n\nexport type BarChartStylesNames =\n  | 'bar'\n  | BaseChartStylesNames\n  | ChartLegendStylesNames\n  | ChartTooltipStylesNames;\n\nexport type BarChartCssVariables = {\n  root:\n    | '--chart-text-color'\n    | '--chart-grid-color'\n    | '--chart-cursor-fill'\n    | '--chart-bar-label-color';\n};\n\nexport interface BarChartProps\n  extends BoxProps, GridChartBaseProps, StylesApiProps<BarChartFactory>, 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: BarChartSeries[];\n\n  /** Controls how bars are positioned relative to each other @default 'default' */\n  type?: BarChartType;\n\n  /** Controls fill opacity of all bars @default 1 */\n  fillOpacity?: number;\n\n  /** Fill of hovered bar section, by default value is based on color scheme */\n  cursorFill?: MantineColor;\n\n  /** Props passed down to recharts `BarChart` component */\n  barChartProps?: React.ComponentProps<typeof ReChartsBarChart>;\n\n  /** Additional components that are rendered inside recharts `BarChart` component */\n  children?: React.ReactNode;\n\n  /** Props passed down to recharts `Bar` component */\n  barProps?:\n    | ((series: BarChartSeries) => Partial<Omit<BarProps, 'ref'>>)\n    | Partial<Omit<BarProps, 'ref'>>;\n\n  /** Determines whether a label with bar value should be displayed on top of each bar, incompatible with `type=\"stacked\"` and `type=\"percent\"` @default false */\n  withBarValueLabel?: boolean;\n\n  /** Props passed down to recharts `LabelList` component */\n  valueLabelProps?:\n    | ((series: BarChartSeries) => Partial<Omit<LabelListProps, 'ref'>>)\n    | Partial<LabelListProps>;\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  /** Controls color of the bar label, by default the value is determined by the chart orientation */\n  barLabelColor?: MantineColor;\n\n  /** A function to assign dynamic bar color based on its value */\n  getBarColor?: (value: number, series: BarChartSeries) => MantineColor;\n}\n\nexport type BarChartFactory = Factory<{\n  props: BarChartProps;\n  ref: HTMLDivElement;\n  stylesNames: BarChartStylesNames;\n  vars: BarChartCssVariables;\n}>;\n\nconst defaultProps = {\n  withXAxis: true,\n  withYAxis: true,\n  withTooltip: true,\n  tooltipAnimationDuration: 0,\n  fillOpacity: 1,\n  tickLine: 'y',\n  strokeDasharray: '5 5',\n  gridAxis: 'x',\n  type: 'default',\n  accessibilityLayer: true,\n} satisfies Partial<BarChartProps>;\n\nconst varsResolver = createVarsResolver<BarChartFactory>(\n  (theme, { textColor, gridColor, cursorFill, barLabelColor }) => ({\n    root: {\n      '--chart-text-color': textColor ? getThemeColor(textColor, theme) : undefined,\n      '--chart-grid-color': gridColor ? getThemeColor(gridColor, theme) : undefined,\n      '--chart-cursor-fill': cursorFill ? getThemeColor(cursorFill, theme) : undefined,\n      '--chart-bar-label-color': barLabelColor ? getThemeColor(barLabelColor, theme) : undefined,\n    },\n  })\n);\n\nfunction calculateCumulativeTotal(waterfallData: Record<string, any>[], dataKey: string) {\n  let start: number = 0;\n  let end: number = 0;\n  return waterfallData.map((item) => {\n    if (item.standalone) {\n      for (const prop in item) {\n        if (typeof item[prop] === 'number' && prop !== dataKey) {\n          item[prop] = [0, item[prop]];\n        }\n      }\n    } else {\n      for (const prop in item) {\n        if (typeof item[prop] === 'number' && prop !== dataKey) {\n          end += item[prop];\n          item[prop] = [start, end];\n          start = end;\n        }\n      }\n    }\n    return item;\n  });\n}\n\nfunction getBarFill(barProps: BarChartProps['barProps'], series: BarChartSeries) {\n  if (typeof barProps === 'function') {\n    return barProps(series).fill;\n  }\n\n  return barProps?.fill;\n}\n\nexport const BarChart = factory<BarChartFactory>((_props) => {\n  const props = useProps('BarChart', 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    referenceAreas,\n    referenceDots,\n    fillOpacity,\n    barChartProps,\n    type,\n    orientation,\n    dir,\n    valueFormatter,\n    children,\n    barProps,\n    xAxisLabel,\n    yAxisLabel,\n    withBarValueLabel,\n    valueLabelProps,\n    withRightYAxis,\n    rightYAxisLabel,\n    rightYAxisProps,\n    minBarSize,\n    maxBarWidth,\n    mod,\n    getBarColor,\n    gridColor,\n    textColor,\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 stacked = type === 'stacked' || type === 'percent';\n  const tickFormatter = type === 'percent' ? valueToPercent : valueFormatter;\n\n  const handleMouseLeave = (event: React.MouseEvent<HTMLDivElement>) => {\n    setHighlightedArea(null);\n    onMouseLeave?.(event);\n  };\n  const { resolvedClassNames, resolvedStyles } = useResolvedStylesApi<BarChartFactory>({\n    classNames,\n    styles,\n    props,\n  });\n\n  const inputData = type === 'waterfall' ? calculateCumulativeTotal(data, dataKey) : data;\n\n  const getStyles = useStyles<BarChartFactory>({\n    name: 'BarChart',\n    classes,\n    props,\n    className,\n    style,\n    classNames,\n    styles,\n    unstyled,\n    attributes,\n    vars,\n    varsResolver,\n  });\n\n  const bars = series.map((item) => {\n    const color = getThemeColor(item.color, theme);\n    const dimmed = shouldHighlight && highlightedArea !== item.name;\n    const resolvedBarProps = typeof barProps === 'function' ? barProps(item) : barProps;\n    const userShape = resolvedBarProps?.shape;\n\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 : fillOpacity}\n        strokeOpacity={dimmed ? 0.2 : 0}\n        stackId={stacked ? 'stack' : item.stackId || undefined}\n        yAxisId={item.yAxisId || undefined}\n        minPointSize={minBarSize}\n        {...resolvedBarProps}\n        shape={(shapeProps: BarShapeProps) => {\n          const entry = shapeProps.payload;\n          const cellColor = entry?.color\n            ? getThemeColor(entry.color, theme)\n            : typeof getBarColor === 'function'\n              ? getThemeColor(getBarColor(entry?.[item.name], item), theme)\n              : getBarFill(barProps, item) || color;\n          const coloredProps = { ...shapeProps, fill: cellColor };\n          if (typeof userShape === 'function') {\n            return (userShape as (props: BarShapeProps) => React.ReactElement)(coloredProps);\n          }\n          if (React.isValidElement(userShape)) {\n            return React.cloneElement(userShape, coloredProps as any);\n          }\n          if (typeof userShape === 'object' && userShape) {\n            return <Rectangle {...coloredProps} {...(userShape as any)} />;\n          }\n          return <Rectangle {...coloredProps} />;\n        }}\n      >\n        {withBarValueLabel && (\n          <LabelList\n            position={orientation === 'vertical' ? 'right' : 'top'}\n            fontSize={12}\n            fill=\"var(--chart-bar-label-color, var(--mantine-color-dimmed))\"\n            formatter={(val: any) => tickFormatter?.(val as any)}\n            {...(typeof valueLabelProps === 'function' ? valueLabelProps(item) : valueLabelProps)}\n          />\n        )}\n      </Bar>\n    );\n  });\n\n  const referenceLinesItems = referenceLines?.map(\n    ({ color: lineColor, labelPosition, ...line }, index) => {\n      const color = getThemeColor(lineColor, theme);\n      return (\n        <ReferenceLine\n          key={index}\n          stroke={lineColor ? color : 'var(--chart-grid-color)'}\n          strokeWidth={1}\n          yAxisId={line.yAxisId || undefined}\n          {...line}\n          label={{\n            fill: lineColor ? color : 'currentColor',\n            fontSize: 12,\n            position: labelPosition ?? 'insideBottomLeft',\n            ...(typeof line.label === 'object' ? line.label : { value: line.label }),\n          }}\n          {...getStyles('referenceLine')}\n        />\n      );\n    }\n  );\n\n  const referenceAreasItems = referenceAreas?.map(\n    ({ color: areaColor, labelPosition, ...area }, index) => {\n      const color = getThemeColor(areaColor, theme);\n      return (\n        <ReferenceArea\n          key={index}\n          fill={areaColor ? color : 'var(--chart-grid-color)'}\n          fillOpacity={0.2}\n          stroke={areaColor ? color : 'var(--chart-grid-color)'}\n          strokeOpacity={0.6}\n          yAxisId={area.yAxisId || undefined}\n          {...area}\n          label={{\n            fill: areaColor ? color : 'currentColor',\n            fontSize: 12,\n            position: labelPosition ?? 'insideTop',\n            ...(typeof area.label === 'object' ? area.label : { value: area.label }),\n          }}\n          {...getStyles('referenceArea')}\n        />\n      );\n    }\n  );\n\n  const referenceDotsItems = referenceDots?.map(\n    ({ color: dotColor, labelPosition, ...dot }, index) => {\n      const color = getThemeColor(dotColor, theme);\n      return (\n        <ReferenceDot\n          key={index}\n          r={5}\n          fill={dotColor ? color : 'var(--chart-grid-color)'}\n          stroke=\"var(--mantine-color-body)\"\n          strokeWidth={2}\n          yAxisId={dot.yAxisId || undefined}\n          {...dot}\n          label={{\n            fill: dotColor ? color : 'currentColor',\n            fontSize: 12,\n            position: labelPosition ?? 'top',\n            ...(typeof dot.label === 'object' ? dot.label : { value: dot.label }),\n          }}\n          {...getStyles('referenceDot')}\n        />\n      );\n    }\n  );\n\n  const sharedYAxisProps = {\n    axisLine: false,\n    ...(orientation === 'vertical'\n      ? { dataKey, type: 'category' as const }\n      : { type: 'number' as const }),\n    tickLine: withYTickLine ? { stroke: 'currentColor' } : false,\n    allowDecimals: true,\n    unit,\n    tickFormatter: orientation === 'vertical' ? undefined : tickFormatter,\n    ...getStyles('axis'),\n  };\n\n  return (\n    <Box\n      {...getStyles('root')}\n      onMouseLeave={handleMouseLeave}\n      dir={dir || 'ltr'}\n      mod={[{ orientation }, mod]}\n      {...others}\n    >\n      <ResponsiveContainer {...getStyles('container')}>\n        <ReChartsBarChart\n          data={inputData}\n          stackOffset={type === 'percent' ? 'expand' : undefined}\n          layout={orientation}\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          {...barChartProps}\n        >\n          {referenceAreasItems}\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                  showColor={type !== 'waterfall'}\n                  attributes={attributes}\n                />\n              )}\n              {...legendProps}\n            />\n          )}\n\n          <XAxis\n            hide={!withXAxis}\n            {...(orientation === 'vertical' ? { type: 'number' } : { 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            tickFormatter={orientation === 'vertical' ? tickFormatter : undefined}\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={orientation === 'vertical' ? {} : { y: 0 }}\n              cursor={{\n                stroke: 'var(--chart-grid-color)',\n                strokeWidth: 1,\n                strokeDasharray,\n                fill: 'var(--chart-cursor-fill)',\n              }}\n              content={({ label, payload, labelFormatter }) => (\n                <ChartTooltip\n                  label={labelFormatter && payload ? labelFormatter(label, payload) : label}\n                  payload={payload}\n                  type={type === 'waterfall' ? 'scatter' : undefined}\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          {bars}\n          {referenceLinesItems}\n          {referenceDotsItems}\n          {withBrush && (\n            <ChartBrush\n              dataKey={dataKey}\n              classNames={resolvedClassNames}\n              styles={resolvedStyles}\n              {...brushProps}\n            />\n          )}\n          {children}\n        </ReChartsBarChart>\n      </ResponsiveContainer>\n    </Box>\n  );\n});\n\nBarChart.displayName = '@mantine/charts/BarChart';\nBarChart.classes = classes;\nBarChart.varsResolver = varsResolver;\n\nexport namespace BarChart {\n  export type Props = BarChartProps;\n  export type CssVariables = BarChartCssVariables;\n  export type Factory = BarChartFactory;\n  export type Series = BarChartSeries;\n  export type StylesNames = BarChartStylesNames;\n  export type Type = BarChartType;\n}\n"],"mappings":"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"}

package/cjs/BarsList/BarsList.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"BarsList.cjs","names":["Box","classes"],"sources":["../../src/BarsList/BarsList.tsx"],"sourcesContent":["import { useMemo } from 'react';\nimport {\n  Box,\n  BoxProps,\n  createVarsResolver,\n  ElementProps,\n  factory,\n  Factory,\n  getSpacing,\n  getThemeColor,\n  MantineColor,\n  MantineSpacing,\n  rem,\n  StylesApiProps,\n  useMantineTheme,\n  useProps,\n  useStyles,\n} from '@mantine/core';\nimport classes from './BarsList.module.css';\n\nexport type BarsListStylesNames = 'root' | 'bar' | 'barLabel' | 'barValue' | 'labelsRow';\n\nexport type BarsListCssVariables = {\n  root: '--bars-list-gap' | '--bars-list-min-bar-size' | '--bars-list-bar-height';\n};\n\nexport interface BarsListBarData {\n  /** Name of the bar, displayed inside the bar */\n  name: string;\n\n  /** Numeric value of the bar */\n  value: number;\n\n  /** Bar background color */\n  color?: MantineColor;\n\n  /** Bar text color, overrides barTextColor and autoContrast for this specific bar */\n  textColor?: MantineColor;\n\n  /** Bar variant, used to calculate text color when autoContrast is enabled */\n  variant?: 'light' | 'filled';\n}\n\nexport interface BarsListProps\n  extends BoxProps, StylesApiProps<BarsListFactory>, ElementProps<'div'> {\n  /** Data for bars */\n  data: BarsListBarData[];\n\n  /** Function to format value display */\n  valueFormatter?: (value: number) => string;\n\n  /** Label displayed above the bars column */\n  barsLabel?: string;\n\n  /** Label displayed above the values column */\n  valueLabel?: string;\n\n  /** Function to pass props down to the bar depending on the bar data payload */\n  getBarProps?: (data: BarsListBarData) => React.ComponentProps<'div'>;\n\n  /** Function to completely customize bar rendering */\n  renderBar?: (data: BarsListBarData, defaultBar: React.ReactNode) => React.ReactNode;\n\n  /** Controls gap between bars @default 5 */\n  barGap?: MantineSpacing;\n\n  /** Minimum bar width @default 100 */\n  minBarSize?: number | string;\n\n  /** Bar height @default 32 */\n  barHeight?: number | string;\n\n  /** Default bar background color, used when item does not have color specified */\n  barColor?: MantineColor;\n\n  /** Bar text color, overrides autoContrast */\n  barTextColor?: MantineColor;\n\n  /** If set, adjusts text color based on background color */\n  autoContrast?: boolean;\n}\n\nexport type BarsListFactory = Factory<{\n  props: BarsListProps;\n  ref: HTMLDivElement;\n  stylesNames: BarsListStylesNames;\n  vars: BarsListCssVariables;\n}>;\n\nconst defaultProps = {\n  barGap: 5,\n  minBarSize: 0,\n  barHeight: 32,\n} satisfies Partial<BarsListProps>;\n\nconst varsResolver = createVarsResolver<BarsListFactory>(\n  (_theme, { barGap, minBarSize, barHeight }) => ({\n    root: {\n      '--bars-list-gap': getSpacing(barGap),\n      '--bars-list-min-bar-size': rem(minBarSize),\n      '--bars-list-bar-height': rem(barHeight),\n    },\n  })\n);\n\nexport const BarsList = factory<BarsListFactory>((_props) => {\n  const props = useProps('BarsList', defaultProps, _props);\n  const {\n    classNames,\n    className,\n    style,\n    styles,\n    unstyled,\n    vars,\n    attributes,\n    data,\n    valueFormatter,\n    barsLabel,\n    valueLabel,\n    getBarProps,\n    renderBar,\n    barGap,\n    minBarSize,\n    barHeight,\n    barColor,\n    barTextColor,\n    autoContrast,\n    variant,\n    ...others\n  } = props;\n\n  const theme = useMantineTheme();\n\n  const getStyles = useStyles<BarsListFactory>({\n    name: 'BarsList',\n    classes,\n    props,\n    className,\n    style,\n    classNames,\n    styles,\n    unstyled,\n    attributes,\n    vars,\n    varsResolver,\n  });\n\n  const maxValue = useMemo(() => Math.max(...data.map((item) => item.value), 0), [data]);\n\n  const formatValue = (value: number) => {\n    if (valueFormatter) {\n      return valueFormatter(value);\n    }\n    return value.toString();\n  };\n\n  const bars = data.map((item, index) => {\n    const percentage = maxValue > 0 ? (item.value / maxValue) * 100 : 0;\n    const barProps = getBarProps ? getBarProps(item) : {};\n    const { style: barPropsStyle, className: barPropsClassName, ...restBarProps } = barProps;\n\n    const itemBarColor = item.color || barColor || theme.primaryColor;\n    const colors = theme.variantColorResolver({\n      color: itemBarColor,\n      theme,\n      variant: item.variant || variant || 'light',\n      autoContrast,\n    });\n\n    const backgroundColor = colors.background;\n\n    const textColor =\n      item.textColor || barTextColor\n        ? getThemeColor(item.textColor || barTextColor, theme)\n        : colors.color;\n\n    const defaultBar = (\n      <div key={index} {...getStyles('bar')}>\n        <div\n          {...getStyles('barLabel', {\n            className: barPropsClassName,\n            style: {\n              width: `${percentage}%`,\n              backgroundColor,\n              color: textColor,\n              padding: percentage === 0 ? 0 : undefined,\n              ...barPropsStyle,\n            },\n          })}\n          {...restBarProps}\n        >\n          {item.name}\n        </div>\n        <div {...getStyles('barValue')}>{formatValue(item.value)}</div>\n      </div>\n    );\n\n    if (renderBar) {\n      return <div key={index}>{renderBar(item, defaultBar)}</div>;\n    }\n\n    return defaultBar;\n  });\n\n  const labelsRow =\n    barsLabel || valueLabel ? (\n      <div {...getStyles('labelsRow')}>\n        <div>{barsLabel}</div>\n        <div>{valueLabel}</div>\n      </div>\n    ) : null;\n\n  return (\n    <Box {...getStyles('root')} variant={variant} {...others}>\n      {labelsRow}\n      {bars}\n    </Box>\n  );\n});\n\nBarsList.displayName = '@mantine/charts/BarsList';\nBarsList.classes = classes;\nBarsList.varsResolver = varsResolver;\n\nexport namespace BarsList {\n  export type Props = BarsListProps;\n  export type StylesNames = BarsListStylesNames;\n  export type Factory = BarsListFactory;\n  export type BarData = BarsListBarData;\n}\n"],"mappings":"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"}
+{"version":3,"file":"BarsList.cjs","names":["createVarsResolver","getSpacing","rem","factory","useProps","useMantineTheme","useStyles","useMemo","getThemeColor","Box","classes"],"sources":["../../src/BarsList/BarsList.tsx"],"sourcesContent":["import { useMemo } from 'react';\nimport {\n  Box,\n  BoxProps,\n  createVarsResolver,\n  ElementProps,\n  factory,\n  Factory,\n  getSpacing,\n  getThemeColor,\n  MantineColor,\n  MantineSpacing,\n  rem,\n  StylesApiProps,\n  useMantineTheme,\n  useProps,\n  useStyles,\n} from '@mantine/core';\nimport classes from './BarsList.module.css';\n\nexport type BarsListStylesNames = 'root' | 'bar' | 'barLabel' | 'barValue' | 'labelsRow';\n\nexport type BarsListCssVariables = {\n  root: '--bars-list-gap' | '--bars-list-min-bar-size' | '--bars-list-bar-height';\n};\n\nexport interface BarsListBarData {\n  /** Name of the bar, displayed inside the bar */\n  name: string;\n\n  /** Numeric value of the bar */\n  value: number;\n\n  /** Bar background color */\n  color?: MantineColor;\n\n  /** Bar text color, overrides barTextColor and autoContrast for this specific bar */\n  textColor?: MantineColor;\n\n  /** Bar variant, used to calculate text color when autoContrast is enabled */\n  variant?: 'light' | 'filled';\n}\n\nexport interface BarsListProps\n  extends BoxProps, StylesApiProps<BarsListFactory>, ElementProps<'div'> {\n  /** Data for bars */\n  data: BarsListBarData[];\n\n  /** Function to format value display */\n  valueFormatter?: (value: number) => string;\n\n  /** Label displayed above the bars column */\n  barsLabel?: string;\n\n  /** Label displayed above the values column */\n  valueLabel?: string;\n\n  /** Function to pass props down to the bar depending on the bar data payload */\n  getBarProps?: (data: BarsListBarData) => React.ComponentProps<'div'>;\n\n  /** Function to completely customize bar rendering */\n  renderBar?: (data: BarsListBarData, defaultBar: React.ReactNode) => React.ReactNode;\n\n  /** Controls gap between bars @default 5 */\n  barGap?: MantineSpacing;\n\n  /** Minimum bar width @default 100 */\n  minBarSize?: number | string;\n\n  /** Bar height @default 32 */\n  barHeight?: number | string;\n\n  /** Default bar background color, used when item does not have color specified */\n  barColor?: MantineColor;\n\n  /** Bar text color, overrides autoContrast */\n  barTextColor?: MantineColor;\n\n  /** If set, adjusts text color based on background color */\n  autoContrast?: boolean;\n}\n\nexport type BarsListFactory = Factory<{\n  props: BarsListProps;\n  ref: HTMLDivElement;\n  stylesNames: BarsListStylesNames;\n  vars: BarsListCssVariables;\n}>;\n\nconst defaultProps = {\n  barGap: 5,\n  minBarSize: 0,\n  barHeight: 32,\n} satisfies Partial<BarsListProps>;\n\nconst varsResolver = createVarsResolver<BarsListFactory>(\n  (_theme, { barGap, minBarSize, barHeight }) => ({\n    root: {\n      '--bars-list-gap': getSpacing(barGap),\n      '--bars-list-min-bar-size': rem(minBarSize),\n      '--bars-list-bar-height': rem(barHeight),\n    },\n  })\n);\n\nexport const BarsList = factory<BarsListFactory>((_props) => {\n  const props = useProps('BarsList', defaultProps, _props);\n  const {\n    classNames,\n    className,\n    style,\n    styles,\n    unstyled,\n    vars,\n    attributes,\n    data,\n    valueFormatter,\n    barsLabel,\n    valueLabel,\n    getBarProps,\n    renderBar,\n    barGap,\n    minBarSize,\n    barHeight,\n    barColor,\n    barTextColor,\n    autoContrast,\n    variant,\n    ...others\n  } = props;\n\n  const theme = useMantineTheme();\n\n  const getStyles = useStyles<BarsListFactory>({\n    name: 'BarsList',\n    classes,\n    props,\n    className,\n    style,\n    classNames,\n    styles,\n    unstyled,\n    attributes,\n    vars,\n    varsResolver,\n  });\n\n  const maxValue = useMemo(() => Math.max(...data.map((item) => item.value), 0), [data]);\n\n  const formatValue = (value: number) => {\n    if (valueFormatter) {\n      return valueFormatter(value);\n    }\n    return value.toString();\n  };\n\n  const bars = data.map((item, index) => {\n    const percentage = maxValue > 0 ? (item.value / maxValue) * 100 : 0;\n    const barProps = getBarProps ? getBarProps(item) : {};\n    const { style: barPropsStyle, className: barPropsClassName, ...restBarProps } = barProps;\n\n    const itemBarColor = item.color || barColor || theme.primaryColor;\n    const colors = theme.variantColorResolver({\n      color: itemBarColor,\n      theme,\n      variant: item.variant || variant || 'light',\n      autoContrast,\n    });\n\n    const backgroundColor = colors.background;\n\n    const textColor =\n      item.textColor || barTextColor\n        ? getThemeColor(item.textColor || barTextColor, theme)\n        : colors.color;\n\n    const defaultBar = (\n      <div key={index} {...getStyles('bar')}>\n        <div\n          {...getStyles('barLabel', {\n            className: barPropsClassName,\n            style: {\n              width: `${percentage}%`,\n              backgroundColor,\n              color: textColor,\n              padding: percentage === 0 ? 0 : undefined,\n              ...barPropsStyle,\n            },\n          })}\n          {...restBarProps}\n        >\n          {item.name}\n        </div>\n        <div {...getStyles('barValue')}>{formatValue(item.value)}</div>\n      </div>\n    );\n\n    if (renderBar) {\n      return <div key={index}>{renderBar(item, defaultBar)}</div>;\n    }\n\n    return defaultBar;\n  });\n\n  const labelsRow =\n    barsLabel || valueLabel ? (\n      <div {...getStyles('labelsRow')}>\n        <div>{barsLabel}</div>\n        <div>{valueLabel}</div>\n      </div>\n    ) : null;\n\n  return (\n    <Box {...getStyles('root')} variant={variant} {...others}>\n      {labelsRow}\n      {bars}\n    </Box>\n  );\n});\n\nBarsList.displayName = '@mantine/charts/BarsList';\nBarsList.classes = classes;\nBarsList.varsResolver = varsResolver;\n\nexport namespace BarsList {\n  export type Props = BarsListProps;\n  export type StylesNames = BarsListStylesNames;\n  export type Factory = BarsListFactory;\n  export type BarData = BarsListBarData;\n}\n"],"mappings":"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"}

package/cjs/BubbleChart/BubbleChart.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"BubbleChart.cjs","names":["Group","Text","Box","ResponsiveContainer","ScatterChart","XAxis","YAxis","ZAxis","Tooltip","Scatter","classes"],"sources":["../../src/BubbleChart/BubbleChart.tsx"],"sourcesContent":["import {\n  ResponsiveContainer,\n  Scatter,\n  ScatterChart,\n  ScatterProps,\n  Tooltip,\n  TooltipProps,\n  XAxis,\n  XAxisProps,\n  YAxis,\n  YAxisProps,\n  ZAxis,\n  ZAxisProps,\n} from 'recharts';\nimport {\n  Box,\n  BoxProps,\n  createVarsResolver,\n  ElementProps,\n  factory,\n  Factory,\n  GetStylesApi,\n  getThemeColor,\n  Group,\n  MantineColor,\n  StylesApiProps,\n  Text,\n  useMantineTheme,\n  useProps,\n  useStyles,\n} from '@mantine/core';\nimport classes from '../grid-chart.module.css';\n\nfunction getDomain(data: Record<string, any>[], key: string) {\n  const values = data.map((item) => item[key]);\n  return [Math.min(...values), Math.max(...values)];\n}\n\ninterface BubbleChartTooltipProps {\n  payload: any;\n  active: boolean | undefined;\n  getStyles: GetStylesApi<BubbleChartFactory>;\n  valueFormatter?: (value: number) => string;\n  dataKey: BubbleChartDataKey;\n}\n\nfunction BubbleChartTooltip({\n  active,\n  payload,\n  getStyles,\n  dataKey,\n  valueFormatter,\n}: BubbleChartTooltipProps) {\n  if (active && payload && payload.length) {\n    const data = payload[0] && payload[0].payload;\n\n    return (\n      <div {...getStyles('tooltip')}>\n        <Group justify=\"space-between\">\n          <Text fz=\"sm\">{data[dataKey.x]}</Text>\n          <Text fz=\"sm\">{valueFormatter ? valueFormatter(data[dataKey.z]) : data[dataKey.z]}</Text>\n        </Group>\n      </div>\n    );\n  }\n\n  return null;\n}\n\nexport type BubbleChartStylesNames = 'root' | 'axis' | 'tooltip';\nexport type BubbleChartCssVariables = {\n  root: '--chart-text-color' | '--chart-grid-color';\n};\n\nexport interface BubbleChartDataKey {\n  x: string;\n  y: string;\n  z: string;\n}\n\nexport interface BubbleChartProps\n  extends BoxProps, StylesApiProps<BubbleChartFactory>, ElementProps<'div'> {\n  /** Chart data */\n  data: Record<string, any>[];\n\n  /** Data keys for x, y and z axis */\n  dataKey: BubbleChartDataKey;\n\n  /** Z axis range */\n  range: [number, number];\n\n  /** Color of the chart items. Key of `theme.colors` or any valid CSS color. @default blue.6 */\n  color?: MantineColor;\n\n  /** Props passed down to the `XAxis` recharts component */\n  xAxisProps?: Omit<XAxisProps, 'ref'>;\n\n  /** Props passed down to the `YAxis` recharts component */\n  yAxisProps?: Omit<YAxisProps, 'ref'>;\n\n  /** Props passed down to the `ZAxis` recharts component */\n  zAxisProps?: Omit<ZAxisProps, 'ref'>;\n\n  /** Props passed down to the `Tooltip` component */\n  tooltipProps?: Omit<TooltipProps<any, any>, 'ref'>;\n\n  /** Props passed down to the `Scatter` component */\n  scatterProps?: Partial<Omit<ScatterProps, 'ref'>>;\n\n  /** Color of the text displayed inside the chart @default 'dimmed' */\n  textColor?: MantineColor;\n\n  /** Color of the grid and cursor lines, by default depends on color scheme */\n  gridColor?: MantineColor;\n\n  /** Chart label displayed next to the x axis */\n  label?: string;\n\n  /** Determines whether the tooltip should be displayed @default true */\n  withTooltip?: boolean;\n\n  /** Function to format z axis values */\n  valueFormatter?: (value: number) => string;\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 BubbleChartFactory = Factory<{\n  props: BubbleChartProps;\n  ref: HTMLDivElement;\n  stylesNames: BubbleChartStylesNames;\n  vars: BubbleChartCssVariables;\n}>;\n\nconst defaultProps = {\n  color: 'blue.6',\n  withTooltip: true,\n  accessibilityLayer: true,\n} satisfies Partial<BubbleChartProps>;\n\nconst varsResolver = createVarsResolver<BubbleChartFactory>((theme, { textColor, gridColor }) => ({\n  root: {\n    '--chart-text-color': textColor ? getThemeColor(textColor, theme) : undefined,\n    '--chart-grid-color': gridColor ? getThemeColor(gridColor, theme) : undefined,\n  },\n}));\n\nexport const BubbleChart = factory<BubbleChartFactory>((_props) => {\n  const props = useProps('BubbleChart', defaultProps, _props);\n  const {\n    classNames,\n    className,\n    style,\n    styles,\n    unstyled,\n    vars,\n    data,\n    xAxisProps,\n    yAxisProps,\n    zAxisProps,\n    tooltipProps,\n    scatterProps,\n    color,\n    label,\n    withTooltip,\n    dataKey,\n    range,\n    valueFormatter,\n    attributes,\n    accessibilityLayer,\n    ...others\n  } = props;\n\n  const theme = useMantineTheme();\n\n  const getStyles = useStyles<BubbleChartFactory>({\n    name: 'BubbleChart',\n    classes,\n    props,\n    className,\n    style,\n    classNames,\n    styles,\n    unstyled,\n    attributes,\n    vars,\n    varsResolver,\n  });\n\n  const yAxisWidth = label ? undefined : { width: 0 };\n\n  return (\n    <Box {...getStyles('root')} {...others}>\n      <ResponsiveContainer>\n        <ScatterChart accessibilityLayer={accessibilityLayer}>\n          <XAxis\n            type=\"category\"\n            dataKey={dataKey.x}\n            interval={0}\n            tick={{ fontSize: 12, fill: 'currentColor' }}\n            tickLine={{ transform: 'translate(0, -6)', stroke: 'currentColor' }}\n            stroke=\"currentColor\"\n            {...getStyles('axis')}\n            {...xAxisProps}\n          />\n\n          <YAxis\n            type=\"number\"\n            dataKey={dataKey.y}\n            height={10}\n            {...yAxisWidth}\n            tick={false}\n            tickLine={false}\n            axisLine={false}\n            label={{ value: label, position: 'insideRight', fontSize: 12, fill: 'currentColor' }}\n            {...getStyles('axis')}\n            {...yAxisProps}\n          />\n\n          <ZAxis\n            type=\"number\"\n            dataKey={dataKey.z}\n            domain={getDomain(data, dataKey.z)}\n            range={range}\n            {...zAxisProps}\n          />\n\n          {withTooltip && (\n            <Tooltip\n              animationDuration={100}\n              isAnimationActive={false}\n              cursor={{ stroke: 'var(--chart-grid-color)', strokeWidth: 1, strokeDasharray: '3 3' }}\n              content={(payload) => (\n                <BubbleChartTooltip\n                  dataKey={dataKey}\n                  active={payload.active}\n                  payload={payload.payload}\n                  getStyles={getStyles}\n                  valueFormatter={valueFormatter}\n                />\n              )}\n              {...tooltipProps}\n            />\n          )}\n\n          <Scatter\n            data={data}\n            fill={getThemeColor(color, theme)}\n            isAnimationActive={false}\n            {...scatterProps}\n          />\n        </ScatterChart>\n      </ResponsiveContainer>\n    </Box>\n  );\n});\n\nBubbleChart.displayName = '@mantine/charts/BubbleChart';\nBubbleChart.classes = classes;\nBubbleChart.varsResolver = varsResolver;\n\nexport namespace BubbleChart {\n  export type Props = BubbleChartProps;\n  export type StylesNames = BubbleChartStylesNames;\n  export type CssVariables = BubbleChartCssVariables;\n  export type Factory = BubbleChartFactory;\n  export type DataKey = BubbleChartDataKey;\n}\n"],"mappings":";;;;;;AAiCA,SAAS,UAAU,MAA6B,KAAa;CAC3D,MAAM,SAAS,KAAK,KAAK,SAAS,KAAK,IAAI;CAC3C,OAAO,CAAC,KAAK,IAAI,GAAG,MAAM,GAAG,KAAK,IAAI,GAAG,MAAM,CAAC;AAClD;AAUA,SAAS,mBAAmB,EAC1B,QACA,SACA,WACA,SACA,kBAC0B;CAC1B,IAAI,UAAU,WAAW,QAAQ,QAAQ;EACvC,MAAM,OAAO,QAAQ,MAAM,QAAQ,EAAE,CAAC;EAEtC,OACE,iBAAA,GAAA,kBAAA,IAAA,CAAC,OAAD;GAAK,GAAI,UAAU,SAAS;aAC1B,iBAAA,GAAA,kBAAA,KAAA,CAACA,cAAAA,OAAD;IAAO,SAAQ;cAAf,CACE,iBAAA,GAAA,kBAAA,IAAA,CAACC,cAAAA,MAAD;KAAM,IAAG;eAAM,KAAK,QAAQ;IAAS,CAAA,GACrC,iBAAA,GAAA,kBAAA,IAAA,CAACA,cAAAA,MAAD;KAAM,IAAG;eAAM,iBAAiB,eAAe,KAAK,QAAQ,EAAE,IAAI,KAAK,QAAQ;IAAS,CAAA,CACnF;;EACJ,CAAA;CAET;CAEA,OAAO;AACT;AAoEA,MAAM,eAAe;CACnB,OAAO;CACP,aAAa;CACb,oBAAoB;AACtB;AAEA,MAAM,gBAAA,GAAA,cAAA,mBAAA,EAAuD,OAAO,EAAE,WAAW,iBAAiB,EAChG,MAAM;CACJ,sBAAsB,aAAA,GAAA,cAAA,cAAA,CAA0B,WAAW,KAAK,IAAI,KAAA;CACpE,sBAAsB,aAAA,GAAA,cAAA,cAAA,CAA0B,WAAW,KAAK,IAAI,KAAA;AACtE,EACF,EAAE;AAEF,MAAa,eAAA,GAAA,cAAA,QAAA,EAA2C,WAAW;CACjE,MAAM,SAAA,GAAA,cAAA,SAAA,CAAiB,eAAe,cAAc,MAAM;CAC1D,MAAM,EACJ,YACA,WACA,OACA,QACA,UACA,MACA,MACA,YACA,YACA,YACA,cACA,cACA,OACA,OACA,aACA,SACA,OACA,gBACA,YACA,oBACA,GAAG,WACD;CAEJ,MAAM,SAAA,GAAA,cAAA,gBAAA,CAAwB;CAE9B,MAAM,aAAA,GAAA,cAAA,UAAA,CAA0C;EAC9C,MAAM;EACN,SAAA,0BAAA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;CACF,CAAC;CAED,MAAM,aAAa,QAAQ,KAAA,IAAY,EAAE,OAAO,EAAE;CAElD,OACE,iBAAA,GAAA,kBAAA,IAAA,CAACC,cAAAA,KAAD;EAAK,GAAI,UAAU,MAAM;EAAG,GAAI;YAC9B,iBAAA,GAAA,kBAAA,IAAA,CAACC,SAAAA,qBAAD,EAAA,UACE,iBAAA,GAAA,kBAAA,KAAA,CAACC,SAAAA,cAAD;GAAkC;aAAlC;IACE,iBAAA,GAAA,kBAAA,IAAA,CAACC,SAAAA,OAAD;KACE,MAAK;KACL,SAAS,QAAQ;KACjB,UAAU;KACV,MAAM;MAAE,UAAU;MAAI,MAAM;KAAe;KAC3C,UAAU;MAAE,WAAW;MAAoB,QAAQ;KAAe;KAClE,QAAO;KACP,GAAI,UAAU,MAAM;KACpB,GAAI;IACL,CAAA;IAED,iBAAA,GAAA,kBAAA,IAAA,CAACC,SAAAA,OAAD;KACE,MAAK;KACL,SAAS,QAAQ;KACjB,QAAQ;KACR,GAAI;KACJ,MAAM;KACN,UAAU;KACV,UAAU;KACV,OAAO;MAAE,OAAO;MAAO,UAAU;MAAe,UAAU;MAAI,MAAM;KAAe;KACnF,GAAI,UAAU,MAAM;KACpB,GAAI;IACL,CAAA;IAED,iBAAA,GAAA,kBAAA,IAAA,CAACC,SAAAA,OAAD;KACE,MAAK;KACL,SAAS,QAAQ;KACjB,QAAQ,UAAU,MAAM,QAAQ,CAAC;KAC1B;KACP,GAAI;IACL,CAAA;IAEA,eACC,iBAAA,GAAA,kBAAA,IAAA,CAACC,SAAAA,SAAD;KACE,mBAAmB;KACnB,mBAAmB;KACnB,QAAQ;MAAE,QAAQ;MAA2B,aAAa;MAAG,iBAAiB;KAAM;KACpF,UAAU,YACR,iBAAA,GAAA,kBAAA,IAAA,CAAC,oBAAD;MACW;MACT,QAAQ,QAAQ;MAChB,SAAS,QAAQ;MACN;MACK;KACjB,CAAA;KAEH,GAAI;IACL,CAAA;IAGH,iBAAA,GAAA,kBAAA,IAAA,CAACC,SAAAA,SAAD;KACQ;KACN,OAAA,GAAA,cAAA,cAAA,CAAoB,OAAO,KAAK;KAChC,mBAAmB;KACnB,GAAI;IACL,CAAA;GACW;KACK,CAAA;CAClB,CAAA;AAET,CAAC;AAED,YAAY,cAAc;AAC1B,YAAY,UAAUC,0BAAAA;AACtB,YAAY,eAAe"}
+{"version":3,"file":"BubbleChart.cjs","names":["Group","Text","createVarsResolver","getThemeColor","factory","useProps","useMantineTheme","useStyles","Box","ResponsiveContainer","ScatterChart","XAxis","YAxis","ZAxis","Tooltip","Scatter","classes"],"sources":["../../src/BubbleChart/BubbleChart.tsx"],"sourcesContent":["import {\n  ResponsiveContainer,\n  Scatter,\n  ScatterChart,\n  ScatterProps,\n  Tooltip,\n  TooltipProps,\n  XAxis,\n  XAxisProps,\n  YAxis,\n  YAxisProps,\n  ZAxis,\n  ZAxisProps,\n} from 'recharts';\nimport {\n  Box,\n  BoxProps,\n  createVarsResolver,\n  ElementProps,\n  factory,\n  Factory,\n  GetStylesApi,\n  getThemeColor,\n  Group,\n  MantineColor,\n  StylesApiProps,\n  Text,\n  useMantineTheme,\n  useProps,\n  useStyles,\n} from '@mantine/core';\nimport classes from '../grid-chart.module.css';\n\nfunction getDomain(data: Record<string, any>[], key: string) {\n  const values = data.map((item) => item[key]);\n  return [Math.min(...values), Math.max(...values)];\n}\n\ninterface BubbleChartTooltipProps {\n  payload: any;\n  active: boolean | undefined;\n  getStyles: GetStylesApi<BubbleChartFactory>;\n  valueFormatter?: (value: number) => string;\n  dataKey: BubbleChartDataKey;\n}\n\nfunction BubbleChartTooltip({\n  active,\n  payload,\n  getStyles,\n  dataKey,\n  valueFormatter,\n}: BubbleChartTooltipProps) {\n  if (active && payload && payload.length) {\n    const data = payload[0] && payload[0].payload;\n\n    return (\n      <div {...getStyles('tooltip')}>\n        <Group justify=\"space-between\">\n          <Text fz=\"sm\">{data[dataKey.x]}</Text>\n          <Text fz=\"sm\">{valueFormatter ? valueFormatter(data[dataKey.z]) : data[dataKey.z]}</Text>\n        </Group>\n      </div>\n    );\n  }\n\n  return null;\n}\n\nexport type BubbleChartStylesNames = 'root' | 'axis' | 'tooltip';\nexport type BubbleChartCssVariables = {\n  root: '--chart-text-color' | '--chart-grid-color';\n};\n\nexport interface BubbleChartDataKey {\n  x: string;\n  y: string;\n  z: string;\n}\n\nexport interface BubbleChartProps\n  extends BoxProps, StylesApiProps<BubbleChartFactory>, ElementProps<'div'> {\n  /** Chart data */\n  data: Record<string, any>[];\n\n  /** Data keys for x, y and z axis */\n  dataKey: BubbleChartDataKey;\n\n  /** Z axis range */\n  range: [number, number];\n\n  /** Color of the chart items. Key of `theme.colors` or any valid CSS color. @default blue.6 */\n  color?: MantineColor;\n\n  /** Props passed down to the `XAxis` recharts component */\n  xAxisProps?: Omit<XAxisProps, 'ref'>;\n\n  /** Props passed down to the `YAxis` recharts component */\n  yAxisProps?: Omit<YAxisProps, 'ref'>;\n\n  /** Props passed down to the `ZAxis` recharts component */\n  zAxisProps?: Omit<ZAxisProps, 'ref'>;\n\n  /** Props passed down to the `Tooltip` component */\n  tooltipProps?: Omit<TooltipProps<any, any>, 'ref'>;\n\n  /** Props passed down to the `Scatter` component */\n  scatterProps?: Partial<Omit<ScatterProps, 'ref'>>;\n\n  /** Color of the text displayed inside the chart @default 'dimmed' */\n  textColor?: MantineColor;\n\n  /** Color of the grid and cursor lines, by default depends on color scheme */\n  gridColor?: MantineColor;\n\n  /** Chart label displayed next to the x axis */\n  label?: string;\n\n  /** Determines whether the tooltip should be displayed @default true */\n  withTooltip?: boolean;\n\n  /** Function to format z axis values */\n  valueFormatter?: (value: number) => string;\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 BubbleChartFactory = Factory<{\n  props: BubbleChartProps;\n  ref: HTMLDivElement;\n  stylesNames: BubbleChartStylesNames;\n  vars: BubbleChartCssVariables;\n}>;\n\nconst defaultProps = {\n  color: 'blue.6',\n  withTooltip: true,\n  accessibilityLayer: true,\n} satisfies Partial<BubbleChartProps>;\n\nconst varsResolver = createVarsResolver<BubbleChartFactory>((theme, { textColor, gridColor }) => ({\n  root: {\n    '--chart-text-color': textColor ? getThemeColor(textColor, theme) : undefined,\n    '--chart-grid-color': gridColor ? getThemeColor(gridColor, theme) : undefined,\n  },\n}));\n\nexport const BubbleChart = factory<BubbleChartFactory>((_props) => {\n  const props = useProps('BubbleChart', defaultProps, _props);\n  const {\n    classNames,\n    className,\n    style,\n    styles,\n    unstyled,\n    vars,\n    data,\n    xAxisProps,\n    yAxisProps,\n    zAxisProps,\n    tooltipProps,\n    scatterProps,\n    color,\n    label,\n    withTooltip,\n    dataKey,\n    range,\n    valueFormatter,\n    attributes,\n    accessibilityLayer,\n    ...others\n  } = props;\n\n  const theme = useMantineTheme();\n\n  const getStyles = useStyles<BubbleChartFactory>({\n    name: 'BubbleChart',\n    classes,\n    props,\n    className,\n    style,\n    classNames,\n    styles,\n    unstyled,\n    attributes,\n    vars,\n    varsResolver,\n  });\n\n  const yAxisWidth = label ? undefined : { width: 0 };\n\n  return (\n    <Box {...getStyles('root')} {...others}>\n      <ResponsiveContainer>\n        <ScatterChart accessibilityLayer={accessibilityLayer}>\n          <XAxis\n            type=\"category\"\n            dataKey={dataKey.x}\n            interval={0}\n            tick={{ fontSize: 12, fill: 'currentColor' }}\n            tickLine={{ transform: 'translate(0, -6)', stroke: 'currentColor' }}\n            stroke=\"currentColor\"\n            {...getStyles('axis')}\n            {...xAxisProps}\n          />\n\n          <YAxis\n            type=\"number\"\n            dataKey={dataKey.y}\n            height={10}\n            {...yAxisWidth}\n            tick={false}\n            tickLine={false}\n            axisLine={false}\n            label={{ value: label, position: 'insideRight', fontSize: 12, fill: 'currentColor' }}\n            {...getStyles('axis')}\n            {...yAxisProps}\n          />\n\n          <ZAxis\n            type=\"number\"\n            dataKey={dataKey.z}\n            domain={getDomain(data, dataKey.z)}\n            range={range}\n            {...zAxisProps}\n          />\n\n          {withTooltip && (\n            <Tooltip\n              animationDuration={100}\n              isAnimationActive={false}\n              cursor={{ stroke: 'var(--chart-grid-color)', strokeWidth: 1, strokeDasharray: '3 3' }}\n              content={(payload) => (\n                <BubbleChartTooltip\n                  dataKey={dataKey}\n                  active={payload.active}\n                  payload={payload.payload}\n                  getStyles={getStyles}\n                  valueFormatter={valueFormatter}\n                />\n              )}\n              {...tooltipProps}\n            />\n          )}\n\n          <Scatter\n            data={data}\n            fill={getThemeColor(color, theme)}\n            isAnimationActive={false}\n            {...scatterProps}\n          />\n        </ScatterChart>\n      </ResponsiveContainer>\n    </Box>\n  );\n});\n\nBubbleChart.displayName = '@mantine/charts/BubbleChart';\nBubbleChart.classes = classes;\nBubbleChart.varsResolver = varsResolver;\n\nexport namespace BubbleChart {\n  export type Props = BubbleChartProps;\n  export type StylesNames = BubbleChartStylesNames;\n  export type CssVariables = BubbleChartCssVariables;\n  export type Factory = BubbleChartFactory;\n  export type DataKey = BubbleChartDataKey;\n}\n"],"mappings":"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"}

package/cjs/BulletChart/BulletChart.cjs

@@ -59,15 +59,17 @@ const BulletChart = (0, _mantine_core.factory)((_props) => {
 		}, index);
 	});
 	const barPercentage = toPercentage(value);
+	const barSizeStyle = isVertical ? {
+		height: `${barPercentage}%`,
+		bottom: 0
+	} : { width: `${barPercentage}%` };
 	const barElement = /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", { ...getStyles("bar", { style: {
-		...isVertical ? {
-			height: `${barPercentage}%`,
-			bottom: 0
-		} : { width: `${barPercentage}%` },
+		...barSizeStyle,
 		backgroundColor: resolvedBarColor
 	} }) });
+	const barLabelPosition = isVertical ? { bottom: `${barPercentage}%` } : { left: `${barPercentage}%` };
 	const barLabelElement = /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-		...getStyles("barLabel", { style: isVertical ? { bottom: `${barPercentage}%` } : { left: `${barPercentage}%` } }),
+		...getStyles("barLabel", { style: barLabelPosition }),
 		children: formatValue(value)
 	});
 	const targetPercentage = target != null ? toPercentage(target) : 0;