@mantine/charts 9.4.3-alpha.0 → 9.5.0

package/esm/AreaChart/AreaChart.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"AreaChart.mjs","names":["AreaChart","classes","Fragment","ReChartsAreaChart","Tooltip"],"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 { 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} 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    ...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          {...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          {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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"}
+{"version":3,"file":"AreaChart.mjs","names":["AreaChart","classes","Fragment","ReChartsAreaChart","Tooltip"],"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":"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"}

package/esm/BarChart/BarChart.mjs

@@ -1,11 +1,12 @@
 "use client";
 import { ChartTooltip } from "../ChartTooltip/ChartTooltip.mjs";
 import { ChartLegend } from "../ChartLegend/ChartLegend.mjs";
+import { ChartBrush } from "../ChartBrush/ChartBrush.mjs";
 import grid_chart_module_default from "../grid-chart.module.mjs";
 import { Box, createVarsResolver, factory, getThemeColor, useMantineTheme, useProps, useResolvedStylesApi, useStyles } from "@mantine/core";
 import { jsx, jsxs } from "react/jsx-runtime";
-import React, { createElement, useState } from "react";
 import { Bar, BarChart, CartesianGrid, Label, LabelList, Legend, Rectangle, ReferenceLine, ResponsiveContainer, Tooltip as Tooltip$1, XAxis, YAxis } from "recharts";
+import React, { createElement, useState } from "react";
 //#region packages/@mantine/charts/src/BarChart/BarChart.tsx
 function valueToPercent(value) {
 	return `${(value * 100).toFixed(0)}%`;
@@ -19,7 +20,8 @@ const defaultProps = {
 	tickLine: "y",
 	strokeDasharray: "5 5",
 	gridAxis: "x",
-	type: "default"
+	type: "default",
+	accessibilityLayer: true
 };
 const varsResolver = createVarsResolver((theme, { textColor, gridColor, cursorFill, barLabelColor }) => ({ root: {
 	"--chart-text-color": textColor ? getThemeColor(textColor, theme) : void 0,
@@ -47,7 +49,7 @@ function getBarFill(barProps, series) {
 }
 const BarChart$1 = factory((_props) => {
 	const props = 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, ...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, 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 = useMantineTheme();
 	const withXTickLine = gridAxis !== "none" && (tickLine === "x" || tickLine === "xy");
 	const withYTickLine = gridAxis !== "none" && (tickLine === "y" || tickLine === "xy");
@@ -166,6 +168,7 @@ const BarChart$1 = factory((_props) => {
 					left: yAxisLabel ? 10 : void 0,
 					right: yAxisLabel ? 5 : void 0
 				},
+				accessibilityLayer,
 				...barChartProps,
 				children: [
 					withLegend && /* @__PURE__ */ jsx(Legend, {
@@ -278,6 +281,12 @@ const BarChart$1 = factory((_props) => {
 					}),
 					bars,
 					referenceLinesItems,
+					withBrush && /* @__PURE__ */ jsx(ChartBrush, {
+						dataKey,
+						classNames: resolvedClassNames,
+						styles: resolvedStyles,
+						...brushProps
+					}),
 					children
 				]
 			})

package/esm/BarChart/BarChart.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"BarChart.mjs","names":["BarChart","ReChartsBarChart","Tooltip","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 { 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} 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    ...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          {...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          {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.mjs","names":["BarChart","ReChartsBarChart","Tooltip","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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"}

package/esm/BubbleChart/BubbleChart.mjs

@@ -29,7 +29,8 @@ function BubbleChartTooltip({ active, payload, getStyles, dataKey, valueFormatte
 }
 const defaultProps = {
 	color: "blue.6",
-	withTooltip: true
+	withTooltip: true,
+	accessibilityLayer: true
 };
 const varsResolver = createVarsResolver((theme, { textColor, gridColor }) => ({ root: {
 	"--chart-text-color": textColor ? getThemeColor(textColor, theme) : void 0,
@@ -37,7 +38,7 @@ const varsResolver = createVarsResolver((theme, { textColor, gridColor }) => ({
 } }));
 const BubbleChart = factory((_props) => {
 	const props = useProps("BubbleChart", defaultProps, _props);
-	const { classNames, className, style, styles, unstyled, vars, data, xAxisProps, yAxisProps, zAxisProps, tooltipProps, scatterProps, color, label, withTooltip, dataKey, range, valueFormatter, attributes, ...others } = props;
+	const { classNames, className, style, styles, unstyled, vars, data, xAxisProps, yAxisProps, zAxisProps, tooltipProps, scatterProps, color, label, withTooltip, dataKey, range, valueFormatter, attributes, accessibilityLayer, ...others } = props;
 	const theme = useMantineTheme();
 	const getStyles = useStyles({
 		name: "BubbleChart",
@@ -56,71 +57,74 @@ const BubbleChart = factory((_props) => {
 	return /* @__PURE__ */ jsx(Box, {
 		...getStyles("root"),
 		...others,
-		children: /* @__PURE__ */ jsx(ResponsiveContainer, { children: /* @__PURE__ */ jsxs(ScatterChart, { children: [
-			/* @__PURE__ */ jsx(XAxis, {
-				type: "category",
-				dataKey: dataKey.x,
-				interval: 0,
-				tick: {
-					fontSize: 12,
-					fill: "currentColor"
-				},
-				tickLine: {
-					transform: "translate(0, -6)",
-					stroke: "currentColor"
-				},
-				stroke: "currentColor",
-				...getStyles("axis"),
-				...xAxisProps
-			}),
-			/* @__PURE__ */ jsx(YAxis, {
-				type: "number",
-				dataKey: dataKey.y,
-				height: 10,
-				...yAxisWidth,
-				tick: false,
-				tickLine: false,
-				axisLine: false,
-				label: {
-					value: label,
-					position: "insideRight",
-					fontSize: 12,
-					fill: "currentColor"
-				},
-				...getStyles("axis"),
-				...yAxisProps
-			}),
-			/* @__PURE__ */ jsx(ZAxis, {
-				type: "number",
-				dataKey: dataKey.z,
-				domain: getDomain(data, dataKey.z),
-				range,
-				...zAxisProps
-			}),
-			withTooltip && /* @__PURE__ */ jsx(Tooltip$1, {
-				animationDuration: 100,
-				isAnimationActive: false,
-				cursor: {
-					stroke: "var(--chart-grid-color)",
-					strokeWidth: 1,
-					strokeDasharray: "3 3"
-				},
-				content: (payload) => /* @__PURE__ */ jsx(BubbleChartTooltip, {
-					dataKey,
-					active: payload.active,
-					payload: payload.payload,
-					getStyles,
-					valueFormatter
+		children: /* @__PURE__ */ jsx(ResponsiveContainer, { children: /* @__PURE__ */ jsxs(ScatterChart, {
+			accessibilityLayer,
+			children: [
+				/* @__PURE__ */ jsx(XAxis, {
+					type: "category",
+					dataKey: dataKey.x,
+					interval: 0,
+					tick: {
+						fontSize: 12,
+						fill: "currentColor"
+					},
+					tickLine: {
+						transform: "translate(0, -6)",
+						stroke: "currentColor"
+					},
+					stroke: "currentColor",
+					...getStyles("axis"),
+					...xAxisProps
 				}),
-				...tooltipProps
-			}),
-			/* @__PURE__ */ jsx(Scatter, {
-				data,
-				fill: getThemeColor(color, theme),
-				isAnimationActive: false,
-				...scatterProps
-			})
-		] }) })
+				/* @__PURE__ */ jsx(YAxis, {
+					type: "number",
+					dataKey: dataKey.y,
+					height: 10,
+					...yAxisWidth,
+					tick: false,
+					tickLine: false,
+					axisLine: false,
+					label: {
+						value: label,
+						position: "insideRight",
+						fontSize: 12,
+						fill: "currentColor"
+					},
+					...getStyles("axis"),
+					...yAxisProps
+				}),
+				/* @__PURE__ */ jsx(ZAxis, {
+					type: "number",
+					dataKey: dataKey.z,
+					domain: getDomain(data, dataKey.z),
+					range,
+					...zAxisProps
+				}),
+				withTooltip && /* @__PURE__ */ jsx(Tooltip$1, {
+					animationDuration: 100,
+					isAnimationActive: false,
+					cursor: {
+						stroke: "var(--chart-grid-color)",
+						strokeWidth: 1,
+						strokeDasharray: "3 3"
+					},
+					content: (payload) => /* @__PURE__ */ jsx(BubbleChartTooltip, {
+						dataKey,
+						active: payload.active,
+						payload: payload.payload,
+						getStyles,
+						valueFormatter
+					}),
+					...tooltipProps
+				}),
+				/* @__PURE__ */ jsx(Scatter, {
+					data,
+					fill: getThemeColor(color, theme),
+					isAnimationActive: false,
+					...scatterProps
+				})
+			]
+		}) })
 	});
 });
 BubbleChart.displayName = "@mantine/charts/BubbleChart";

package/esm/BubbleChart/BubbleChart.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"BubbleChart.mjs","names":["Tooltip","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\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} 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    ...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>\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,oBAAC,OAAD;GAAK,GAAI,UAAU,SAAS;aAC1B,qBAAC,OAAD;IAAO,SAAQ;cAAf,CACE,oBAAC,MAAD;KAAM,IAAG;eAAM,KAAK,QAAQ;IAAS,CAAA,GACrC,oBAAC,MAAD;KAAM,IAAG;eAAM,iBAAiB,eAAe,KAAK,QAAQ,EAAE,IAAI,KAAK,QAAQ;IAAS,CAAA,CACnF;;EACJ,CAAA;CAET;CAEA,OAAO;AACT;AAiEA,MAAM,eAAe;CACnB,OAAO;CACP,aAAa;AACf;AAEA,MAAM,eAAe,oBAAwC,OAAO,EAAE,WAAW,iBAAiB,EAChG,MAAM;CACJ,sBAAsB,YAAY,cAAc,WAAW,KAAK,IAAI,KAAA;CACpE,sBAAsB,YAAY,cAAc,WAAW,KAAK,IAAI,KAAA;AACtE,EACF,EAAE;AAEF,MAAa,cAAc,SAA6B,WAAW;CACjE,MAAM,QAAQ,SAAS,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,GAAG,WACD;CAEJ,MAAM,QAAQ,gBAAgB;CAE9B,MAAM,YAAY,UAA8B;EAC9C,MAAM;EACN,SAAA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;CACF,CAAC;CAED,MAAM,aAAa,QAAQ,KAAA,IAAY,EAAE,OAAO,EAAE;CAElD,OACE,oBAAC,KAAD;EAAK,GAAI,UAAU,MAAM;EAAG,GAAI;YAC9B,oBAAC,qBAAD,EAAA,UACE,qBAAC,cAAD,EAAA,UAAA;GACE,oBAAC,OAAD;IACE,MAAK;IACL,SAAS,QAAQ;IACjB,UAAU;IACV,MAAM;KAAE,UAAU;KAAI,MAAM;IAAe;IAC3C,UAAU;KAAE,WAAW;KAAoB,QAAQ;IAAe;IAClE,QAAO;IACP,GAAI,UAAU,MAAM;IACpB,GAAI;GACL,CAAA;GAED,oBAAC,OAAD;IACE,MAAK;IACL,SAAS,QAAQ;IACjB,QAAQ;IACR,GAAI;IACJ,MAAM;IACN,UAAU;IACV,UAAU;IACV,OAAO;KAAE,OAAO;KAAO,UAAU;KAAe,UAAU;KAAI,MAAM;IAAe;IACnF,GAAI,UAAU,MAAM;IACpB,GAAI;GACL,CAAA;GAED,oBAAC,OAAD;IACE,MAAK;IACL,SAAS,QAAQ;IACjB,QAAQ,UAAU,MAAM,QAAQ,CAAC;IAC1B;IACP,GAAI;GACL,CAAA;GAEA,eACC,oBAACA,WAAD;IACE,mBAAmB;IACnB,mBAAmB;IACnB,QAAQ;KAAE,QAAQ;KAA2B,aAAa;KAAG,iBAAiB;IAAM;IACpF,UAAU,YACR,oBAAC,oBAAD;KACW;KACT,QAAQ,QAAQ;KAChB,SAAS,QAAQ;KACN;KACK;IACjB,CAAA;IAEH,GAAI;GACL,CAAA;GAGH,oBAAC,SAAD;IACQ;IACN,MAAM,cAAc,OAAO,KAAK;IAChC,mBAAmB;IACnB,GAAI;GACL,CAAA;EACW,EAAA,CAAA,EACK,CAAA;CAClB,CAAA;AAET,CAAC;AAED,YAAY,cAAc;AAC1B,YAAY,UAAUC;AACtB,YAAY,eAAe"}
+{"version":3,"file":"BubbleChart.mjs","names":["Tooltip","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/esm/BulletChart/BulletChart.mjs

@@ -0,0 +1,137 @@
+"use client";
+import BulletChart_module_default from "./BulletChart.module.mjs";
+import { Box, Tooltip, createVarsResolver, factory, getThemeColor, rem, useMantineTheme, useProps, useStyles } from "@mantine/core";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region packages/@mantine/charts/src/BulletChart/BulletChart.tsx
+const defaultProps = {
+	orientation: "horizontal",
+	size: 32,
+	barSize: 16,
+	targetRatio: .7,
+	targetSize: 2,
+	withTooltip: false
+};
+const varsResolver = createVarsResolver((_theme, { size, barSize }) => ({ root: {
+	"--bullet-size": rem(size),
+	"--bullet-bar-size": rem(barSize)
+} }));
+const BulletChart = factory((_props) => {
+	const props = useProps("BulletChart", defaultProps, _props);
+	const { classNames, className, style, styles, unstyled, vars, attributes, value, target, ranges, orientation, label, valueFormatter, barColor, targetColor, size, barSize, targetRatio, targetSize, withTooltip, getTooltipLabel, variant, ...others } = props;
+	const theme = useMantineTheme();
+	const getStyles = useStyles({
+		name: "BulletChart",
+		classes: BulletChart_module_default,
+		props,
+		className,
+		style,
+		classNames,
+		styles,
+		unstyled,
+		attributes,
+		vars,
+		varsResolver
+	});
+	const isVertical = orientation === "vertical";
+	const maxRange = Math.max(...ranges.map((r) => r.value), 0);
+	const formatValue = (v) => valueFormatter ? valueFormatter(v) : v.toString();
+	const toPercentage = (v) => maxRange > 0 ? Math.max(0, Math.min(v / maxRange * 100, 100)) : 0;
+	const resolvedBarColor = barColor ? getThemeColor(barColor, theme) : "var(--mantine-color-white)";
+	const resolvedTargetColor = targetColor ? getThemeColor(targetColor, theme) : void 0;
+	const sortedRanges = [...ranges].sort((a, b) => b.value - a.value);
+	const rangeBands = sortedRanges.map((range, index) => {
+		const percentage = toPercentage(range.value);
+		const sizeStyle = isVertical ? {
+			height: `${percentage}%`,
+			bottom: 0
+		} : { width: `${percentage}%` };
+		return /* @__PURE__ */ jsx("div", { ...getStyles("range", { style: {
+			...sizeStyle,
+			backgroundColor: getThemeColor(range.color, theme)
+		} }) }, index);
+	});
+	const rangeLabels = sortedRanges.map((range, index) => {
+		const percentage = toPercentage(range.value);
+		const positionStyle = isVertical ? { bottom: `${percentage}%` } : { left: `${percentage}%` };
+		return /* @__PURE__ */ jsx("div", {
+			...getStyles("rangeLabel", { style: positionStyle }),
+			children: formatValue(range.value)
+		}, index);
+	});
+	const barPercentage = toPercentage(value);
+	const barElement = /* @__PURE__ */ jsx("div", { ...getStyles("bar", { style: {
+		...isVertical ? {
+			height: `${barPercentage}%`,
+			bottom: 0
+		} : { width: `${barPercentage}%` },
+		backgroundColor: resolvedBarColor
+	} }) });
+	const barLabelElement = /* @__PURE__ */ jsx("div", {
+		...getStyles("barLabel", { style: isVertical ? { bottom: `${barPercentage}%` } : { left: `${barPercentage}%` } }),
+		children: formatValue(value)
+	});
+	const targetPercentage = target != null ? toPercentage(target) : 0;
+	const targetElement = target != null ? /* @__PURE__ */ jsx("div", { ...getStyles("target", { style: isVertical ? {
+		bottom: `${targetPercentage}%`,
+		width: `${targetRatio * 100}%`,
+		height: rem(targetSize),
+		backgroundColor: resolvedTargetColor
+	} : {
+		left: `${targetPercentage}%`,
+		height: `${targetRatio * 100}%`,
+		width: rem(targetSize),
+		backgroundColor: resolvedTargetColor
+	} }) }) : null;
+	const targetLabelElement = target != null ? /* @__PURE__ */ jsx("div", {
+		...getStyles("targetLabel", { style: isVertical ? { bottom: `${targetPercentage}%` } : { left: `${targetPercentage}%` } }),
+		children: formatValue(target)
+	}) : null;
+	const getDefaultTooltipLabel = () => {
+		const parts = [`Value: ${formatValue(value)}`];
+		if (target != null) parts.push(`Target: ${formatValue(target)}`);
+		return parts.join(" / ");
+	};
+	const tooltipLabel = getTooltipLabel ? getTooltipLabel({
+		value,
+		target
+	}) : getDefaultTooltipLabel();
+	const trackWrapper = /* @__PURE__ */ jsxs("div", {
+		...getStyles("trackWrapper"),
+		"data-orientation": orientation,
+		children: [
+			rangeLabels,
+			targetLabelElement,
+			/* @__PURE__ */ jsxs("div", {
+				...getStyles("track"),
+				"data-orientation": orientation,
+				children: [
+					rangeBands,
+					barElement,
+					targetElement
+				]
+			}),
+			barLabelElement
+		]
+	});
+	return /* @__PURE__ */ jsxs(Box, {
+		...getStyles("root"),
+		variant,
+		mod: { orientation },
+		...others,
+		children: [label && /* @__PURE__ */ jsx("div", {
+			...getStyles("label"),
+			children: label
+		}), withTooltip ? /* @__PURE__ */ jsx(Tooltip, {
+			label: tooltipLabel,
+			position: isVertical ? "right" : "top",
+			children: trackWrapper
+		}) : trackWrapper]
+	});
+});
+BulletChart.displayName = "@mantine/charts/BulletChart";
+BulletChart.classes = BulletChart_module_default;
+BulletChart.varsResolver = varsResolver;
+//#endregion
+export { BulletChart };
+
+//# sourceMappingURL=BulletChart.mjs.map