@mantine/charts 9.0.0-alpha.6 → 9.0.0

package/cjs/CompositeChart/CompositeChart.cjs.map

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

package/cjs/DonutChart/DonutChart.cjs

@@ -1,4 +1,5 @@
 "use client";
+require("../_virtual/_rolldown/runtime.cjs");
 const require_ChartTooltip = require("../ChartTooltip/ChartTooltip.cjs");
 const require_DonutChart_module = require("./DonutChart.module.cjs");
 let _mantine_core = require("@mantine/core");
@@ -63,12 +64,13 @@ const DonutChart = (0, _mantine_core.factory)((_props) => {
 		styles,
 		props
 	});
-	const cells = data.map((item, index) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(recharts.Cell, {
+	const pieData = data.map((item) => ({
+		...item,
 		fill: (0, _mantine_core.getThemeColor)(item.color, theme),
 		stroke: "var(--chart-stroke-color, var(--mantine-color-body))",
 		strokeWidth,
 		...typeof cellProps === "function" ? cellProps(item) : cellProps
-	}, index));
+	}));
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_mantine_core.Box, {
 		size,
 		...getStyles("root"),
@@ -77,7 +79,7 @@ const DonutChart = (0, _mantine_core.factory)((_props) => {
 			...pieChartProps,
 			children: [
 				/* @__PURE__ */ (0, react_jsx_runtime.jsx)(recharts.Pie, {
-					data,
+					data: pieData,
 					innerRadius: size / 2 - thickness,
 					outerRadius: size / 2,
 					dataKey: "value",
@@ -90,8 +92,7 @@ const DonutChart = (0, _mantine_core.factory)((_props) => {
 						stroke: "var(--chart-label-color, var(--mantine-color-dimmed))",
 						strokeWidth: 1
 					} : false,
-					...pieProps,
-					children: cells
+					...pieProps
 				}),
 				chartLabel && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("text", {
 					x: "50%",

package/cjs/DonutChart/DonutChart.cjs.map

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

package/cjs/FunnelChart/FunnelChart.cjs

@@ -1,4 +1,5 @@
 "use client";
+require("../_virtual/_rolldown/runtime.cjs");
 const require_ChartTooltip = require("../ChartTooltip/ChartTooltip.cjs");
 const require_FunnelChart_module = require("./FunnelChart.module.cjs");
 let _mantine_core = require("@mantine/core");
@@ -20,7 +21,7 @@ const varsResolver = (0, _mantine_core.createVarsResolver)((theme, { strokeColor
 } }));
 const FunnelChart = (0, _mantine_core.factory)((_props) => {
 	const props = (0, _mantine_core.useProps)("FunnelChart", defaultProps, _props);
-	const { classNames, className, style, styles, unstyled, vars, data, withTooltip, tooltipAnimationDuration, tooltipProps, strokeWidth, withLabels, size, valueFormatter, children, funnelChartProps, funnelProps, labelsPosition, tooltipDataSource, attributes, ...others } = props;
+	const { classNames, className, style, styles, unstyled, vars, data, withTooltip, tooltipAnimationDuration, tooltipProps, strokeWidth, withLabels, size, valueFormatter, children, funnelChartProps, funnelProps, labelsPosition, tooltipDataSource, strokeColor, labelColor, attributes, ...others } = props;
 	const theme = (0, _mantine_core.useMantineTheme)();
 	const getStyles = (0, _mantine_core.useStyles)({
 		name: "FunnelChart",
@@ -47,14 +48,17 @@ const FunnelChart = (0, _mantine_core.factory)((_props) => {
 		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(recharts.ResponsiveContainer, { children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(recharts.FunnelChart, {
 			...funnelChartProps,
 			children: [
-				/* @__PURE__ */ (0, react_jsx_runtime.jsxs)(recharts.Funnel, {
-					data,
+				/* @__PURE__ */ (0, react_jsx_runtime.jsx)(recharts.Funnel, {
+					data: data.map((entry) => ({
+						...entry,
+						fill: (0, _mantine_core.getThemeColor)(entry.color, theme)
+					})),
 					dataKey: "value",
 					isAnimationActive: false,
 					stroke: "var(--chart-stroke-color, var(--mantine-color-body))",
 					strokeWidth,
 					...funnelProps,
-					children: [withLabels && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(recharts.LabelList, {
+					children: withLabels && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(recharts.LabelList, {
 						position: labelsPosition,
 						fill: labelsPosition === "inside" ? "var(--chart-labels-color, var(--mantine-color-white))" : "var(--chart-labels-color, var(--mantine-color-dimmed))",
 						stroke: "none",
@@ -63,11 +67,7 @@ const FunnelChart = (0, _mantine_core.factory)((_props) => {
 						dataKey: (entry) => {
 							return typeof valueFormatter === "function" ? valueFormatter(entry.value) : entry.value;
 						}
-					}), data.map((entry, index) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(recharts.Cell, {
-						fill: (0, _mantine_core.getThemeColor)(entry.color, theme),
-						stroke: "var(--chart-stroke-color, var(--mantine-color-body))",
-						strokeWidth
-					}, index))]
+					})
 				}),
 				withTooltip && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(recharts.Tooltip, {
 					animationDuration: tooltipAnimationDuration,

package/cjs/FunnelChart/FunnelChart.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"FunnelChart.cjs","names":["Box","ResponsiveContainer","RechartsFunnelChart","Funnel","LabelList","Cell","Tooltip","ChartTooltip","classes"],"sources":["../../src/FunnelChart/FunnelChart.tsx"],"sourcesContent":["import {\n  Cell,\n  Funnel,\n  FunnelProps,\n  LabelList,\n  FunnelChart as RechartsFunnelChart,\n  ResponsiveContainer,\n  Tooltip,\n  TooltipProps,\n} from 'recharts';\nimport {\n  Box,\n  BoxProps,\n  createVarsResolver,\n  ElementProps,\n  factory,\n  Factory,\n  getThemeColor,\n  MantineColor,\n  rem,\n  StylesApiProps,\n  useMantineTheme,\n  useProps,\n  useResolvedStylesApi,\n  useStyles,\n} from '@mantine/core';\nimport { ChartTooltip, ChartTooltipStylesNames } from '../ChartTooltip/ChartTooltip';\nimport classes from './FunnelChart.module.css';\n\nexport interface FunnelChartCell {\n  key?: string | number;\n  name: string;\n  value: number;\n  color: MantineColor;\n}\n\nexport type FunnelChartStylesNames = 'root' | ChartTooltipStylesNames;\nexport type FunnelChartCssVariables = {\n  root: '--chart-stroke-color' | '--chart-labels-color' | '--chart-size';\n};\n\nexport interface FunnelChartProps\n  extends BoxProps, StylesApiProps<FunnelChartFactory>, ElementProps<'div'> {\n  /** Data used to render chart */\n  data: FunnelChartCell[];\n\n  /** Determines whether the tooltip should be displayed when a section is hovered @default true */\n  withTooltip?: boolean;\n\n  /** Tooltip animation duration in ms @default 0 */\n  tooltipAnimationDuration?: number;\n\n  /** Props passed down to `Tooltip` recharts component */\n  tooltipProps?: Omit<TooltipProps<any, any>, 'ref'>;\n\n  /** Props passed down to recharts `Pie` component */\n  funnelProps?: Partial<Omit<FunnelProps, 'ref'>>;\n\n  /** Controls color of the segments stroke, by default depends on color scheme */\n  strokeColor?: MantineColor;\n\n  /** Controls text color of all labels @default 'white' */\n  labelColor?: MantineColor;\n\n  /** Controls chart width and height @default 300 */\n  size?: number;\n\n  /** Controls width of segments stroke @default 1 */\n  strokeWidth?: number;\n\n  /** Determines whether each segment should have associated label @default false */\n  withLabels?: boolean;\n\n  /** Controls labels position relative to the segment @default 'right' */\n  labelsPosition?: 'right' | 'left' | 'inside';\n\n  /** A function to format values inside the tooltip and labels */\n  valueFormatter?: (value: number) => string;\n\n  /** Determines which data is displayed in the tooltip. `'all'` – display all values, `'segment'` – display only hovered segment. @default 'all' */\n  tooltipDataSource?: 'segment' | 'all';\n\n  /** Additional elements rendered inside `FunnelChart` component */\n  children?: React.ReactNode;\n\n  /** Props passed down to recharts `FunnelChart` component */\n  funnelChartProps?: React.ComponentProps<typeof RechartsFunnelChart>;\n}\n\nexport type FunnelChartFactory = Factory<{\n  props: FunnelChartProps;\n  ref: HTMLDivElement;\n  stylesNames: FunnelChartStylesNames;\n  vars: FunnelChartCssVariables;\n}>;\n\nconst defaultProps = {\n  withTooltip: true,\n  size: 300,\n  strokeWidth: 1,\n  withLabels: false,\n  labelsPosition: 'right',\n  tooltipDataSource: 'all',\n} satisfies Partial<FunnelChartProps>;\n\nconst varsResolver = createVarsResolver<FunnelChartFactory>(\n  (theme, { strokeColor, labelColor, size }) => ({\n    root: {\n      '--chart-stroke-color': strokeColor ? getThemeColor(strokeColor, theme) : undefined,\n      '--chart-labels-color': labelColor ? getThemeColor(labelColor, theme) : undefined,\n      '--chart-size': rem(size),\n    },\n  })\n);\n\nexport const FunnelChart = factory<FunnelChartFactory>((_props) => {\n  const props = useProps('FunnelChart', defaultProps, _props);\n  const {\n    classNames,\n    className,\n    style,\n    styles,\n    unstyled,\n    vars,\n    data,\n    withTooltip,\n    tooltipAnimationDuration,\n    tooltipProps,\n    strokeWidth,\n    withLabels,\n    size,\n    valueFormatter,\n    children,\n    funnelChartProps,\n    funnelProps,\n    labelsPosition,\n    tooltipDataSource,\n    attributes,\n    ...others\n  } = props;\n\n  const theme = useMantineTheme();\n\n  const getStyles = useStyles<FunnelChartFactory>({\n    name: 'FunnelChart',\n    classes,\n    props,\n    className,\n    style,\n    classNames,\n    styles,\n    unstyled,\n    attributes,\n    vars,\n    varsResolver,\n  });\n\n  const { resolvedClassNames, resolvedStyles } = useResolvedStylesApi<FunnelChartFactory>({\n    classNames,\n    styles,\n    props,\n  });\n\n  return (\n    <Box size={size} {...getStyles('root')} {...others}>\n      <ResponsiveContainer>\n        <RechartsFunnelChart {...funnelChartProps}>\n          <Funnel\n            data={data}\n            dataKey=\"value\"\n            isAnimationActive={false}\n            stroke=\"var(--chart-stroke-color, var(--mantine-color-body))\"\n            strokeWidth={strokeWidth}\n            {...funnelProps}\n          >\n            {withLabels && (\n              <LabelList\n                position={labelsPosition}\n                fill={\n                  labelsPosition === 'inside'\n                    ? 'var(--chart-labels-color, var(--mantine-color-white))'\n                    : 'var(--chart-labels-color, var(--mantine-color-dimmed))'\n                }\n                stroke=\"none\"\n                fontFamily=\"var(--mantine-font-family)\"\n                fontSize={12}\n                dataKey={(entry) => {\n                  return typeof valueFormatter === 'function'\n                    ? valueFormatter(entry.value as number)\n                    : entry.value;\n                }}\n              />\n            )}\n            {data.map((entry, index) => (\n              <Cell\n                key={index}\n                fill={getThemeColor(entry.color, theme)}\n                stroke=\"var(--chart-stroke-color, var(--mantine-color-body))\"\n                strokeWidth={strokeWidth}\n              />\n            ))}\n          </Funnel>\n\n          {withTooltip && (\n            <Tooltip\n              animationDuration={tooltipAnimationDuration}\n              isAnimationActive={false}\n              content={({ payload }) => (\n                <ChartTooltip\n                  payload={data}\n                  classNames={resolvedClassNames}\n                  styles={resolvedStyles}\n                  type=\"radial\"\n                  segmentId={\n                    tooltipDataSource === 'segment' ? (payload?.[0]?.name as string) : undefined\n                  }\n                  valueFormatter={valueFormatter}\n                  attributes={attributes}\n                />\n              )}\n              {...tooltipProps}\n            />\n          )}\n\n          {children}\n        </RechartsFunnelChart>\n      </ResponsiveContainer>\n    </Box>\n  );\n});\n\nFunnelChart.displayName = '@mantine/charts/FunnelChart';\nFunnelChart.classes = classes;\nFunnelChart.varsResolver = varsResolver;\n"],"mappings":";;;;;;;AAgGA,MAAM,eAAe;CACnB,aAAa;CACb,MAAM;CACN,aAAa;CACb,YAAY;CACZ,gBAAgB;CAChB,mBAAmB;CACpB;AAED,MAAM,gBAAA,GAAA,cAAA,qBACH,OAAO,EAAE,aAAa,YAAY,YAAY,EAC7C,MAAM;CACJ,wBAAwB,eAAA,GAAA,cAAA,eAA4B,aAAa,MAAM,GAAG,KAAA;CAC1E,wBAAwB,cAAA,GAAA,cAAA,eAA2B,YAAY,MAAM,GAAG,KAAA;CACxE,iBAAA,GAAA,cAAA,KAAoB,KAAK;CAC1B,EACF,EACF;AAED,MAAa,eAAA,GAAA,cAAA,UAA2C,WAAW;CACjE,MAAM,SAAA,GAAA,cAAA,UAAiB,eAAe,cAAc,OAAO;CAC3D,MAAM,EACJ,YACA,WACA,OACA,QACA,UACA,MACA,MACA,aACA,0BACA,cACA,aACA,YACA,MACA,gBACA,UACA,kBACA,aACA,gBACA,mBACA,YACA,GAAG,WACD;CAEJ,MAAM,SAAA,GAAA,cAAA,kBAAyB;CAE/B,MAAM,aAAA,GAAA,cAAA,WAA0C;EAC9C,MAAM;EACN,SAAA,2BAAA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACD,CAAC;CAEF,MAAM,EAAE,oBAAoB,oBAAA,GAAA,cAAA,sBAA4D;EACtF;EACA;EACA;EACD,CAAC;AAEF,QACE,iBAAA,GAAA,kBAAA,KAACA,cAAAA,KAAD;EAAW;EAAM,GAAI,UAAU,OAAO;EAAE,GAAI;YAC1C,iBAAA,GAAA,kBAAA,KAACC,SAAAA,qBAAD,EAAA,UACE,iBAAA,GAAA,kBAAA,MAACC,SAAAA,aAAD;GAAqB,GAAI;aAAzB;IACE,iBAAA,GAAA,kBAAA,MAACC,SAAAA,QAAD;KACQ;KACN,SAAQ;KACR,mBAAmB;KACnB,QAAO;KACM;KACb,GAAI;eANN,CAQG,cACC,iBAAA,GAAA,kBAAA,KAACC,SAAAA,WAAD;MACE,UAAU;MACV,MACE,mBAAmB,WACf,0DACA;MAEN,QAAO;MACP,YAAW;MACX,UAAU;MACV,UAAU,UAAU;AAClB,cAAO,OAAO,mBAAmB,aAC7B,eAAe,MAAM,MAAgB,GACrC,MAAM;;MAEZ,CAAA,EAEH,KAAK,KAAK,OAAO,UAChB,iBAAA,GAAA,kBAAA,KAACC,SAAAA,MAAD;MAEE,OAAA,GAAA,cAAA,eAAoB,MAAM,OAAO,MAAM;MACvC,QAAO;MACM;MACb,EAJK,MAIL,CACF,CACK;;IAER,eACC,iBAAA,GAAA,kBAAA,KAACC,SAAAA,SAAD;KACE,mBAAmB;KACnB,mBAAmB;KACnB,UAAU,EAAE,cACV,iBAAA,GAAA,kBAAA,KAACC,qBAAAA,cAAD;MACE,SAAS;MACT,YAAY;MACZ,QAAQ;MACR,MAAK;MACL,WACE,sBAAsB,YAAa,UAAU,IAAI,OAAkB,KAAA;MAErD;MACJ;MACZ,CAAA;KAEJ,GAAI;KACJ,CAAA;IAGH;IACmB;MACF,CAAA;EAClB,CAAA;EAER;AAEF,YAAY,cAAc;AAC1B,YAAY,UAAUC,2BAAAA;AACtB,YAAY,eAAe"}
+{"version":3,"file":"FunnelChart.cjs","names":["Box","ResponsiveContainer","RechartsFunnelChart","Funnel","LabelList","Tooltip","ChartTooltip","classes"],"sources":["../../src/FunnelChart/FunnelChart.tsx"],"sourcesContent":["import {\n  Funnel,\n  FunnelProps,\n  LabelList,\n  FunnelChart as RechartsFunnelChart,\n  ResponsiveContainer,\n  Tooltip,\n  TooltipProps,\n} from 'recharts';\nimport {\n  Box,\n  BoxProps,\n  createVarsResolver,\n  ElementProps,\n  factory,\n  Factory,\n  getThemeColor,\n  MantineColor,\n  rem,\n  StylesApiProps,\n  useMantineTheme,\n  useProps,\n  useResolvedStylesApi,\n  useStyles,\n} from '@mantine/core';\nimport { ChartTooltip, ChartTooltipStylesNames } from '../ChartTooltip/ChartTooltip';\nimport classes from './FunnelChart.module.css';\n\nexport interface FunnelChartCell {\n  key?: string | number;\n  name: string;\n  value: number;\n  color: MantineColor;\n}\n\nexport type FunnelChartStylesNames = 'root' | ChartTooltipStylesNames;\nexport type FunnelChartCssVariables = {\n  root: '--chart-stroke-color' | '--chart-labels-color' | '--chart-size';\n};\n\nexport interface FunnelChartProps\n  extends BoxProps, StylesApiProps<FunnelChartFactory>, ElementProps<'div'> {\n  /** Data used to render chart */\n  data: FunnelChartCell[];\n\n  /** Determines whether the tooltip should be displayed when a section is hovered @default true */\n  withTooltip?: boolean;\n\n  /** Tooltip animation duration in ms @default 0 */\n  tooltipAnimationDuration?: number;\n\n  /** Props passed down to `Tooltip` recharts component */\n  tooltipProps?: Omit<TooltipProps<any, any>, 'ref'>;\n\n  /** Props passed down to recharts `Pie` component */\n  funnelProps?: Partial<Omit<FunnelProps, 'ref'>>;\n\n  /** Controls color of the segments stroke, by default depends on color scheme */\n  strokeColor?: MantineColor;\n\n  /** Controls text color of all labels @default 'white' */\n  labelColor?: MantineColor;\n\n  /** Controls chart width and height @default 300 */\n  size?: number;\n\n  /** Controls width of segments stroke @default 1 */\n  strokeWidth?: number;\n\n  /** Determines whether each segment should have associated label @default false */\n  withLabels?: boolean;\n\n  /** Controls labels position relative to the segment @default 'right' */\n  labelsPosition?: 'right' | 'left' | 'inside';\n\n  /** A function to format values inside the tooltip and labels */\n  valueFormatter?: (value: number) => string;\n\n  /** Determines which data is displayed in the tooltip. `'all'` – display all values, `'segment'` – display only hovered segment. @default 'all' */\n  tooltipDataSource?: 'segment' | 'all';\n\n  /** Additional elements rendered inside `FunnelChart` component */\n  children?: React.ReactNode;\n\n  /** Props passed down to recharts `FunnelChart` component */\n  funnelChartProps?: React.ComponentProps<typeof RechartsFunnelChart>;\n}\n\nexport type FunnelChartFactory = Factory<{\n  props: FunnelChartProps;\n  ref: HTMLDivElement;\n  stylesNames: FunnelChartStylesNames;\n  vars: FunnelChartCssVariables;\n}>;\n\nconst defaultProps = {\n  withTooltip: true,\n  size: 300,\n  strokeWidth: 1,\n  withLabels: false,\n  labelsPosition: 'right',\n  tooltipDataSource: 'all',\n} satisfies Partial<FunnelChartProps>;\n\nconst varsResolver = createVarsResolver<FunnelChartFactory>(\n  (theme, { strokeColor, labelColor, size }) => ({\n    root: {\n      '--chart-stroke-color': strokeColor ? getThemeColor(strokeColor, theme) : undefined,\n      '--chart-labels-color': labelColor ? getThemeColor(labelColor, theme) : undefined,\n      '--chart-size': rem(size),\n    },\n  })\n);\n\nexport const FunnelChart = factory<FunnelChartFactory>((_props) => {\n  const props = useProps('FunnelChart', defaultProps, _props);\n  const {\n    classNames,\n    className,\n    style,\n    styles,\n    unstyled,\n    vars,\n    data,\n    withTooltip,\n    tooltipAnimationDuration,\n    tooltipProps,\n    strokeWidth,\n    withLabels,\n    size,\n    valueFormatter,\n    children,\n    funnelChartProps,\n    funnelProps,\n    labelsPosition,\n    tooltipDataSource,\n    strokeColor,\n    labelColor,\n    attributes,\n    ...others\n  } = props;\n\n  const theme = useMantineTheme();\n\n  const getStyles = useStyles<FunnelChartFactory>({\n    name: 'FunnelChart',\n    classes,\n    props,\n    className,\n    style,\n    classNames,\n    styles,\n    unstyled,\n    attributes,\n    vars,\n    varsResolver,\n  });\n\n  const { resolvedClassNames, resolvedStyles } = useResolvedStylesApi<FunnelChartFactory>({\n    classNames,\n    styles,\n    props,\n  });\n\n  return (\n    <Box size={size} {...getStyles('root')} {...others}>\n      <ResponsiveContainer>\n        <RechartsFunnelChart {...funnelChartProps}>\n          <Funnel\n            data={data.map((entry) => ({\n              ...entry,\n              fill: getThemeColor(entry.color, theme),\n            }))}\n            dataKey=\"value\"\n            isAnimationActive={false}\n            stroke=\"var(--chart-stroke-color, var(--mantine-color-body))\"\n            strokeWidth={strokeWidth}\n            {...funnelProps}\n          >\n            {withLabels && (\n              <LabelList\n                position={labelsPosition}\n                fill={\n                  labelsPosition === 'inside'\n                    ? 'var(--chart-labels-color, var(--mantine-color-white))'\n                    : 'var(--chart-labels-color, var(--mantine-color-dimmed))'\n                }\n                stroke=\"none\"\n                fontFamily=\"var(--mantine-font-family)\"\n                fontSize={12}\n                dataKey={(entry) => {\n                  return typeof valueFormatter === 'function'\n                    ? valueFormatter(entry.value as number)\n                    : entry.value;\n                }}\n              />\n            )}\n          </Funnel>\n\n          {withTooltip && (\n            <Tooltip\n              animationDuration={tooltipAnimationDuration}\n              isAnimationActive={false}\n              content={({ payload }) => (\n                <ChartTooltip\n                  payload={data}\n                  classNames={resolvedClassNames}\n                  styles={resolvedStyles}\n                  type=\"radial\"\n                  segmentId={\n                    tooltipDataSource === 'segment' ? (payload?.[0]?.name as string) : undefined\n                  }\n                  valueFormatter={valueFormatter}\n                  attributes={attributes}\n                />\n              )}\n              {...tooltipProps}\n            />\n          )}\n\n          {children}\n        </RechartsFunnelChart>\n      </ResponsiveContainer>\n    </Box>\n  );\n});\n\nFunnelChart.displayName = '@mantine/charts/FunnelChart';\nFunnelChart.classes = classes;\nFunnelChart.varsResolver = varsResolver;\n"],"mappings":";;;;;;;;AA+FA,MAAM,eAAe;CACnB,aAAa;CACb,MAAM;CACN,aAAa;CACb,YAAY;CACZ,gBAAgB;CAChB,mBAAmB;CACpB;AAED,MAAM,gBAAA,GAAA,cAAA,qBACH,OAAO,EAAE,aAAa,YAAY,YAAY,EAC7C,MAAM;CACJ,wBAAwB,eAAA,GAAA,cAAA,eAA4B,aAAa,MAAM,GAAG,KAAA;CAC1E,wBAAwB,cAAA,GAAA,cAAA,eAA2B,YAAY,MAAM,GAAG,KAAA;CACxE,iBAAA,GAAA,cAAA,KAAoB,KAAK;CAC1B,EACF,EACF;AAED,MAAa,eAAA,GAAA,cAAA,UAA2C,WAAW;CACjE,MAAM,SAAA,GAAA,cAAA,UAAiB,eAAe,cAAc,OAAO;CAC3D,MAAM,EACJ,YACA,WACA,OACA,QACA,UACA,MACA,MACA,aACA,0BACA,cACA,aACA,YACA,MACA,gBACA,UACA,kBACA,aACA,gBACA,mBACA,aACA,YACA,YACA,GAAG,WACD;CAEJ,MAAM,SAAA,GAAA,cAAA,kBAAyB;CAE/B,MAAM,aAAA,GAAA,cAAA,WAA0C;EAC9C,MAAM;EACN,SAAA,2BAAA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACD,CAAC;CAEF,MAAM,EAAE,oBAAoB,oBAAA,GAAA,cAAA,sBAA4D;EACtF;EACA;EACA;EACD,CAAC;AAEF,QACE,iBAAA,GAAA,kBAAA,KAACA,cAAAA,KAAD;EAAW;EAAM,GAAI,UAAU,OAAO;EAAE,GAAI;YAC1C,iBAAA,GAAA,kBAAA,KAACC,SAAAA,qBAAD,EAAA,UACE,iBAAA,GAAA,kBAAA,MAACC,SAAAA,aAAD;GAAqB,GAAI;aAAzB;IACE,iBAAA,GAAA,kBAAA,KAACC,SAAAA,QAAD;KACE,MAAM,KAAK,KAAK,WAAW;MACzB,GAAG;MACH,OAAA,GAAA,cAAA,eAAoB,MAAM,OAAO,MAAM;MACxC,EAAE;KACH,SAAQ;KACR,mBAAmB;KACnB,QAAO;KACM;KACb,GAAI;eAEH,cACC,iBAAA,GAAA,kBAAA,KAACC,SAAAA,WAAD;MACE,UAAU;MACV,MACE,mBAAmB,WACf,0DACA;MAEN,QAAO;MACP,YAAW;MACX,UAAU;MACV,UAAU,UAAU;AAClB,cAAO,OAAO,mBAAmB,aAC7B,eAAe,MAAM,MAAgB,GACrC,MAAM;;MAEZ,CAAA;KAEG,CAAA;IAER,eACC,iBAAA,GAAA,kBAAA,KAACC,SAAAA,SAAD;KACE,mBAAmB;KACnB,mBAAmB;KACnB,UAAU,EAAE,cACV,iBAAA,GAAA,kBAAA,KAACC,qBAAAA,cAAD;MACE,SAAS;MACT,YAAY;MACZ,QAAQ;MACR,MAAK;MACL,WACE,sBAAsB,YAAa,UAAU,IAAI,OAAkB,KAAA;MAErD;MACJ;MACZ,CAAA;KAEJ,GAAI;KACJ,CAAA;IAGH;IACmB;MACF,CAAA;EAClB,CAAA;EAER;AAEF,YAAY,cAAc;AAC1B,YAAY,UAAUC,2BAAAA;AACtB,YAAY,eAAe"}

package/cjs/Heatmap/Heatmap.cjs

@@ -1,4 +1,5 @@
 "use client";
+require("../_virtual/_rolldown/runtime.cjs");
 const require_get_boundaries = require("./get-boundaries/get-boundaries.cjs");
 const require_get_columns = require("./get-columns/get-columns.cjs");
 const require_get_dates_range = require("./get-dates-range/get-dates-range.cjs");

package/cjs/Heatmap/Heatmap.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"Heatmap.cjs","names":["getBoundaries","rotateWeekdaysNames","getDatesRange","getMonthsRange","HeatmapSplitWeeks","HeatmapWeeks","getColumns","getFirstMonthColumnIndex","Box","Tooltip","classes"],"sources":["../../src/Heatmap/Heatmap.tsx"],"sourcesContent":["import { useMemo, useState } from 'react';\nimport {\n  Box,\n  BoxProps,\n  ElementProps,\n  factory,\n  Factory,\n  StylesApiProps,\n  Tooltip,\n  TooltipFloatingProps,\n  useProps,\n  useStyles,\n} from '@mantine/core';\nimport { getBoundaries } from './get-boundaries/get-boundaries';\nimport { getColumns, getFirstMonthColumnIndex, HeatmapColumn } from './get-columns/get-columns';\nimport { getDatesRange } from './get-dates-range/get-dates-range';\nimport { getMonthsRange } from './get-months-range/get-months-range';\nimport { HeatmapSplitWeeks } from './HeatmapSplitWeeks';\nimport { HeatmapWeeks } from './HeatmapWeeks';\nimport { rotateWeekdaysNames } from './rotate-weekdays-names/rotate-weekdays-names';\nimport classes from './Heatmap.module.css';\n\nexport type HeatmapStylesNames = 'root' | 'rect' | 'weekdayLabel' | 'monthLabel';\n\ninterface HeatmapRectData {\n  date: string;\n  value: number | null;\n}\n\nexport interface HeatmapProps\n  extends\n    BoxProps,\n    StylesApiProps<HeatmapFactory>,\n    ElementProps<'svg', 'display' | 'opacity' | 'viewBox' | 'width' | 'height'> {\n  /** Heatmap data, key is date in `YYYY-MM-DD` format (interpreted as a UTC calendar day) */\n  data: Record<string, number>;\n\n  /** Heatmap domain, array of 2 numbers, min and max values, calculated from data by default */\n  domain?: [number, number];\n\n  /** Heatmap start date. Current date - 1 year by default. Date is normalized to UTC midnight of the intended calendar day. */\n  startDate?: Date | string;\n\n  /** Heatmap end date. Current date by default. Date is normalized to UTC midnight of the intended calendar day. */\n  endDate?: Date | string;\n\n  /** If set, month labels are displayed @default false */\n  withMonthLabels?: boolean;\n\n  /** Month labels, array of 12 elements, can be used for localization */\n  monthLabels?: string[];\n\n  /** If set, weekday labels are displayed @default false */\n  withWeekdayLabels?: boolean;\n\n  /** Weekday labels, array of 7 elements, can be used for localization */\n  weekdayLabels?: string[];\n\n  /** If set, trailing dates that do not fall into the given `startDate` – `endDate` range are displayed to fill empty space. @default true */\n  withOutsideDates?: boolean;\n\n  /** First day of week, 0 – Sunday, 1 – Monday. @default 1 – Monday */\n  firstDayOfWeek?: 0 | 1 | 2 | 3 | 4 | 5 | 6;\n\n  /** Size of day rect in px @default 10 */\n  rectSize?: number;\n\n  /** Gap between rects in px @default 1 */\n  gap?: number;\n\n  /** Rect radius in px @default 2 */\n  rectRadius?: number;\n\n  /** Colors array, used to calculate color for each value, by default 4 shades of green colors are used */\n  colors?: string[];\n\n  /** Width of weekday labels column @default 30 */\n  weekdaysLabelsWidth?: number;\n\n  /** Height of month labels row @default 30 */\n  monthsLabelsHeight?: number;\n\n  /** Font size of month and weekday labels @default 12 */\n  fontSize?: number;\n\n  /** A function to generate tooltip label based on the hovered rect date and value, required for the tooltip to be visible */\n  getTooltipLabel?: (input: HeatmapRectData) => React.ReactNode;\n\n  /** If set, tooltip is displayed on rect hover @default false */\n  withTooltip?: boolean;\n\n  /** Props passed down to the `Tooltip.Floating` component */\n  tooltipProps?: Partial<TooltipFloatingProps>;\n\n  /** Props passed down to each rect depending on its date and associated value */\n  getRectProps?: (input: HeatmapRectData) => React.ComponentProps<'rect'>;\n\n  /** If set, inserts a spacer column between months @default false */\n  splitMonths?: boolean;\n}\n\nexport type HeatmapFactory = Factory<{\n  props: HeatmapProps;\n  ref: SVGSVGElement;\n  stylesNames: HeatmapStylesNames;\n}>;\n\nconst defaultProps = {\n  monthLabels: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'],\n  weekdayLabels: ['Sun', 'Mon', '', 'Wed', '', 'Fri', ''],\n  withOutsideDates: true,\n  firstDayOfWeek: 1,\n  rectSize: 10,\n  weekdaysLabelsWidth: 30,\n  monthsLabelsHeight: 14,\n  gap: 1,\n  rectRadius: 2,\n  fontSize: 12,\n  colors: [\n    'var(--heatmap-level-1)',\n    'var(--heatmap-level-2)',\n    'var(--heatmap-level-3)',\n    'var(--heatmap-level-4)',\n  ],\n} satisfies Partial<HeatmapProps>;\n\nexport const Heatmap = factory<HeatmapFactory>((_props) => {\n  const props = useProps('Heatmap', defaultProps, _props);\n  const {\n    classNames,\n    className,\n    style,\n    styles,\n    unstyled,\n    vars,\n    data,\n    startDate,\n    endDate,\n    withMonthLabels,\n    withWeekdayLabels,\n    weekdayLabels,\n    withOutsideDates,\n    monthLabels,\n    firstDayOfWeek,\n    rectSize = 10,\n    gap = 1,\n    rectRadius,\n    domain,\n    colors,\n    weekdaysLabelsWidth,\n    monthsLabelsHeight,\n    fontSize,\n    getTooltipLabel,\n    withTooltip,\n    tooltipProps,\n    getRectProps,\n    splitMonths,\n    attributes,\n    ...others\n  } = props;\n\n  const getStyles = useStyles<HeatmapFactory>({\n    name: 'Heatmap',\n    classes,\n    props,\n    className,\n    style,\n    classNames,\n    styles,\n    unstyled,\n    attributes,\n    vars,\n  });\n\n  const [hoveredRect, setHoveredRect] = useState<HeatmapRectData | null>(null);\n  const rectSizeWithGap = rectSize + gap;\n  const weekdaysOffset = withWeekdayLabels ? weekdaysLabelsWidth : 0;\n  const monthsOffset = withMonthLabels ? monthsLabelsHeight : 0;\n  const [min, max] = getBoundaries({ data, domain });\n  const rotatedWeekdayLabels = useMemo(\n    () => rotateWeekdaysNames(weekdayLabels, firstDayOfWeek),\n    [weekdayLabels, firstDayOfWeek]\n  );\n\n  const datesRange = getDatesRange({\n    startDate,\n    endDate,\n    withOutsideDates,\n    firstDayOfWeek,\n  });\n\n  // Calculate months range for labels and optional split between months\n  const monthsRange = withMonthLabels || splitMonths ? getMonthsRange(datesRange) : [];\n\n  // Shared props for weeks rendering components\n  const weeksProps = {\n    data,\n    datesRange,\n    rectSize,\n    gap,\n    rectRadius,\n    min,\n    max,\n    colors,\n    withTooltip,\n    setHoveredRect,\n    getRectProps,\n    getStyles,\n  };\n\n  // Use different rendering logic based on splitMonths\n  const weeks = splitMonths ? (\n    <HeatmapSplitWeeks {...weeksProps} />\n  ) : (\n    <HeatmapWeeks {...weeksProps} />\n  );\n\n  // Calculate total columns based on whether splitMonths is enabled\n  const totalColumns = splitMonths ? getColumns(datesRange, splitMonths).length : datesRange.length;\n\n  const computeMonthLabelX = (monthPosition: number, monthIndex: number) => {\n    if (!splitMonths) {\n      return monthPosition * rectSizeWithGap + gap + weekdaysOffset;\n    }\n\n    // For split months, find the first column index that has this month and shift label by 1 column\n    const firstMonth = monthsRange[monthIndex];\n    const columns: HeatmapColumn[] = getColumns(datesRange, splitMonths);\n    const i = getFirstMonthColumnIndex(columns, firstMonth.month);\n    const base = i >= 0 ? i : monthPosition;\n    // shift right by one column\n    return (base + 1) * rectSizeWithGap + gap + weekdaysOffset;\n  };\n\n  const monthsLabelsNodes =\n    withMonthLabels && monthLabels\n      ? monthsRange.map((month, monthIndex) => {\n          // For non-split months, use original logic with minimum size of 3\n          // For split months, use minimum size of 2\n          const minSize = splitMonths ? 2 : 3;\n          if (month.size < minSize) {\n            return null;\n          }\n\n          const monthLabel = monthLabels[month.month];\n\n          return (\n            <text\n              key={monthIndex}\n              x={computeMonthLabelX(month.position, monthIndex)}\n              y={monthsLabelsHeight - 4}\n              width={month.size * rectSizeWithGap}\n              fontSize={fontSize}\n              {...getStyles('monthLabel')}\n            >\n              {monthLabel}\n            </text>\n          );\n        })\n      : null;\n\n  const weekdayLabelsNodes =\n    withWeekdayLabels && weekdayLabels\n      ? rotatedWeekdayLabels.map((weekdayLabel, dayIndex) => (\n          <text\n            key={dayIndex}\n            x={0}\n            y={(dayIndex + 1) * rectSizeWithGap - gap + monthsOffset}\n            width={weekdaysLabelsWidth}\n            fontSize={fontSize}\n            {...getStyles('weekdayLabel')}\n          >\n            {weekdayLabel}\n          </text>\n        ))\n      : null;\n\n  const label = getTooltipLabel && hoveredRect && withTooltip ? getTooltipLabel(hoveredRect) : null;\n\n  return (\n    <Box\n      component=\"svg\"\n      width={rectSizeWithGap * totalColumns + gap + weekdaysOffset}\n      height={rectSizeWithGap * 7 + gap + monthsOffset}\n      {...getStyles('root')}\n      {...others}\n    >\n      <Tooltip.Floating\n        label={label}\n        disabled={!withTooltip || !label}\n        position=\"top\"\n        {...tooltipProps}\n      >\n        <g transform={`translate(${weekdaysOffset}, ${monthsOffset})`} data-id=\"all-weeks\">\n          {/* Required for tooltip to remain visible while gaps between rects are hovered */}\n          {withTooltip && (\n            <rect\n              fill=\"transparent\"\n              width={rectSizeWithGap * totalColumns + gap}\n              height={rectSizeWithGap * 7 + gap}\n            />\n          )}\n          {weeks}\n        </g>\n      </Tooltip.Floating>\n      {weekdayLabelsNodes}\n      {monthsLabelsNodes}\n    </Box>\n  );\n});\n\nHeatmap.displayName = '@mantine/charts/Heatmap';\nHeatmap.classes = classes;\n"],"mappings":"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"}
+{"version":3,"file":"Heatmap.cjs","names":["getBoundaries","rotateWeekdaysNames","getDatesRange","getMonthsRange","HeatmapSplitWeeks","HeatmapWeeks","getColumns","getFirstMonthColumnIndex","Box","Tooltip","classes"],"sources":["../../src/Heatmap/Heatmap.tsx"],"sourcesContent":["import { useMemo, useState } from 'react';\nimport {\n  Box,\n  BoxProps,\n  ElementProps,\n  factory,\n  Factory,\n  StylesApiProps,\n  Tooltip,\n  TooltipFloatingProps,\n  useProps,\n  useStyles,\n} from '@mantine/core';\nimport { getBoundaries } from './get-boundaries/get-boundaries';\nimport { getColumns, getFirstMonthColumnIndex, HeatmapColumn } from './get-columns/get-columns';\nimport { getDatesRange } from './get-dates-range/get-dates-range';\nimport { getMonthsRange } from './get-months-range/get-months-range';\nimport { HeatmapSplitWeeks } from './HeatmapSplitWeeks';\nimport { HeatmapWeeks } from './HeatmapWeeks';\nimport { rotateWeekdaysNames } from './rotate-weekdays-names/rotate-weekdays-names';\nimport classes from './Heatmap.module.css';\n\nexport type HeatmapStylesNames = 'root' | 'rect' | 'weekdayLabel' | 'monthLabel';\n\ninterface HeatmapRectData {\n  date: string;\n  value: number | null;\n}\n\nexport interface HeatmapProps\n  extends\n    BoxProps,\n    StylesApiProps<HeatmapFactory>,\n    ElementProps<'svg', 'display' | 'opacity' | 'viewBox' | 'width' | 'height'> {\n  /** Heatmap data, key is date in `YYYY-MM-DD` format (interpreted as a UTC calendar day) */\n  data: Record<string, number>;\n\n  /** Heatmap domain, array of 2 numbers, min and max values, calculated from data by default */\n  domain?: [number, number];\n\n  /** Heatmap start date. Current date - 1 year by default. Date is normalized to UTC midnight of the intended calendar day. */\n  startDate?: Date | string;\n\n  /** Heatmap end date. Current date by default. Date is normalized to UTC midnight of the intended calendar day. */\n  endDate?: Date | string;\n\n  /** If set, month labels are displayed @default false */\n  withMonthLabels?: boolean;\n\n  /** Month labels, array of 12 elements, can be used for localization */\n  monthLabels?: string[];\n\n  /** If set, weekday labels are displayed @default false */\n  withWeekdayLabels?: boolean;\n\n  /** Weekday labels, array of 7 elements, can be used for localization */\n  weekdayLabels?: string[];\n\n  /** If set, trailing dates that do not fall into the given `startDate` – `endDate` range are displayed to fill empty space. @default true */\n  withOutsideDates?: boolean;\n\n  /** First day of week, 0 – Sunday, 1 – Monday. @default 1 – Monday */\n  firstDayOfWeek?: 0 | 1 | 2 | 3 | 4 | 5 | 6;\n\n  /** Size of day rect in px @default 10 */\n  rectSize?: number;\n\n  /** Gap between rects in px @default 1 */\n  gap?: number;\n\n  /** Rect radius in px @default 2 */\n  rectRadius?: number;\n\n  /** Colors array, used to calculate color for each value, by default 4 shades of green colors are used */\n  colors?: string[];\n\n  /** Width of weekday labels column @default 30 */\n  weekdaysLabelsWidth?: number;\n\n  /** Height of month labels row @default 30 */\n  monthsLabelsHeight?: number;\n\n  /** Font size of month and weekday labels @default 12 */\n  fontSize?: number;\n\n  /** A function to generate tooltip label based on the hovered rect date and value, required for the tooltip to be visible */\n  getTooltipLabel?: (input: HeatmapRectData) => React.ReactNode;\n\n  /** If set, tooltip is displayed on rect hover @default false */\n  withTooltip?: boolean;\n\n  /** Props passed down to the `Tooltip.Floating` component */\n  tooltipProps?: Partial<TooltipFloatingProps>;\n\n  /** Props passed down to each rect depending on its date and associated value */\n  getRectProps?: (input: HeatmapRectData) => React.ComponentProps<'rect'>;\n\n  /** If set, inserts a spacer column between months @default false */\n  splitMonths?: boolean;\n}\n\nexport type HeatmapFactory = Factory<{\n  props: HeatmapProps;\n  ref: SVGSVGElement;\n  stylesNames: HeatmapStylesNames;\n}>;\n\nconst defaultProps = {\n  monthLabels: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'],\n  weekdayLabels: ['Sun', 'Mon', '', 'Wed', '', 'Fri', ''],\n  withOutsideDates: true,\n  firstDayOfWeek: 1,\n  rectSize: 10,\n  weekdaysLabelsWidth: 30,\n  monthsLabelsHeight: 14,\n  gap: 1,\n  rectRadius: 2,\n  fontSize: 12,\n  colors: [\n    'var(--heatmap-level-1)',\n    'var(--heatmap-level-2)',\n    'var(--heatmap-level-3)',\n    'var(--heatmap-level-4)',\n  ],\n} satisfies Partial<HeatmapProps>;\n\nexport const Heatmap = factory<HeatmapFactory>((_props) => {\n  const props = useProps('Heatmap', defaultProps, _props);\n  const {\n    classNames,\n    className,\n    style,\n    styles,\n    unstyled,\n    vars,\n    data,\n    startDate,\n    endDate,\n    withMonthLabels,\n    withWeekdayLabels,\n    weekdayLabels,\n    withOutsideDates,\n    monthLabels,\n    firstDayOfWeek,\n    rectSize = 10,\n    gap = 1,\n    rectRadius,\n    domain,\n    colors,\n    weekdaysLabelsWidth,\n    monthsLabelsHeight,\n    fontSize,\n    getTooltipLabel,\n    withTooltip,\n    tooltipProps,\n    getRectProps,\n    splitMonths,\n    attributes,\n    ...others\n  } = props;\n\n  const getStyles = useStyles<HeatmapFactory>({\n    name: 'Heatmap',\n    classes,\n    props,\n    className,\n    style,\n    classNames,\n    styles,\n    unstyled,\n    attributes,\n    vars,\n  });\n\n  const [hoveredRect, setHoveredRect] = useState<HeatmapRectData | null>(null);\n  const rectSizeWithGap = rectSize + gap;\n  const weekdaysOffset = withWeekdayLabels ? weekdaysLabelsWidth : 0;\n  const monthsOffset = withMonthLabels ? monthsLabelsHeight : 0;\n  const [min, max] = getBoundaries({ data, domain });\n  const rotatedWeekdayLabels = useMemo(\n    () => rotateWeekdaysNames(weekdayLabels, firstDayOfWeek),\n    [weekdayLabels, firstDayOfWeek]\n  );\n\n  const datesRange = getDatesRange({\n    startDate,\n    endDate,\n    withOutsideDates,\n    firstDayOfWeek,\n  });\n\n  // Calculate months range for labels and optional split between months\n  const monthsRange = withMonthLabels || splitMonths ? getMonthsRange(datesRange) : [];\n\n  // Shared props for weeks rendering components\n  const weeksProps = {\n    data,\n    datesRange,\n    rectSize,\n    gap,\n    rectRadius,\n    min,\n    max,\n    colors,\n    withTooltip,\n    setHoveredRect,\n    getRectProps,\n    getStyles,\n  };\n\n  // Use different rendering logic based on splitMonths\n  const weeks = splitMonths ? (\n    <HeatmapSplitWeeks {...weeksProps} />\n  ) : (\n    <HeatmapWeeks {...weeksProps} />\n  );\n\n  // Calculate total columns based on whether splitMonths is enabled\n  const totalColumns = splitMonths ? getColumns(datesRange, splitMonths).length : datesRange.length;\n\n  const computeMonthLabelX = (monthPosition: number, monthIndex: number) => {\n    if (!splitMonths) {\n      return monthPosition * rectSizeWithGap + gap + weekdaysOffset;\n    }\n\n    // For split months, find the first column index that has this month and shift label by 1 column\n    const firstMonth = monthsRange[monthIndex];\n    const columns: HeatmapColumn[] = getColumns(datesRange, splitMonths);\n    const i = getFirstMonthColumnIndex(columns, firstMonth.month);\n    const base = i >= 0 ? i : monthPosition;\n    // shift right by one column\n    return (base + 1) * rectSizeWithGap + gap + weekdaysOffset;\n  };\n\n  const monthsLabelsNodes =\n    withMonthLabels && monthLabels\n      ? monthsRange.map((month, monthIndex) => {\n          // For non-split months, use original logic with minimum size of 3\n          // For split months, use minimum size of 2\n          const minSize = splitMonths ? 2 : 3;\n          if (month.size < minSize) {\n            return null;\n          }\n\n          const monthLabel = monthLabels[month.month];\n\n          return (\n            <text\n              key={monthIndex}\n              x={computeMonthLabelX(month.position, monthIndex)}\n              y={monthsLabelsHeight - 4}\n              width={month.size * rectSizeWithGap}\n              fontSize={fontSize}\n              {...getStyles('monthLabel')}\n            >\n              {monthLabel}\n            </text>\n          );\n        })\n      : null;\n\n  const weekdayLabelsNodes =\n    withWeekdayLabels && weekdayLabels\n      ? rotatedWeekdayLabels.map((weekdayLabel, dayIndex) => (\n          <text\n            key={dayIndex}\n            x={0}\n            y={(dayIndex + 1) * rectSizeWithGap - gap + monthsOffset}\n            width={weekdaysLabelsWidth}\n            fontSize={fontSize}\n            {...getStyles('weekdayLabel')}\n          >\n            {weekdayLabel}\n          </text>\n        ))\n      : null;\n\n  const label = getTooltipLabel && hoveredRect && withTooltip ? getTooltipLabel(hoveredRect) : null;\n\n  return (\n    <Box\n      component=\"svg\"\n      width={rectSizeWithGap * totalColumns + gap + weekdaysOffset}\n      height={rectSizeWithGap * 7 + gap + monthsOffset}\n      {...getStyles('root')}\n      {...others}\n    >\n      <Tooltip.Floating\n        label={label}\n        disabled={!withTooltip || !label}\n        position=\"top\"\n        {...tooltipProps}\n      >\n        <g transform={`translate(${weekdaysOffset}, ${monthsOffset})`} data-id=\"all-weeks\">\n          {/* Required for tooltip to remain visible while gaps between rects are hovered */}\n          {withTooltip && (\n            <rect\n              fill=\"transparent\"\n              width={rectSizeWithGap * totalColumns + gap}\n              height={rectSizeWithGap * 7 + gap}\n            />\n          )}\n          {weeks}\n        </g>\n      </Tooltip.Floating>\n      {weekdayLabelsNodes}\n      {monthsLabelsNodes}\n    </Box>\n  );\n});\n\nHeatmap.displayName = '@mantine/charts/Heatmap';\nHeatmap.classes = classes;\n"],"mappings":"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"}

package/cjs/Heatmap/HeatmapSplitWeeks.cjs

@@ -1,4 +1,5 @@
 "use client";
+require("../_virtual/_rolldown/runtime.cjs");
 const require_get_columns = require("./get-columns/get-columns.cjs");
 const require_get_heat_color = require("./get-heat-color/get-heat-color.cjs");
 let react_jsx_runtime = require("react/jsx-runtime");

package/cjs/Heatmap/HeatmapSplitWeeks.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"HeatmapSplitWeeks.cjs","names":["getColumns","getHeatColor"],"sources":["../../src/Heatmap/HeatmapSplitWeeks.tsx"],"sourcesContent":["import { getColumns, HeatmapColumn } from './get-columns/get-columns';\nimport { getHeatColor } from './get-heat-color/get-heat-color';\nimport { HeatmapWeeksSharedProps } from './HeatmapWeeks.types';\n\nexport function HeatmapSplitWeeks({\n  data,\n  datesRange,\n  rectSize,\n  gap,\n  rectRadius,\n  min,\n  max,\n  colors,\n  withTooltip,\n  setHoveredRect,\n  getRectProps,\n  getStyles,\n}: HeatmapWeeksSharedProps) {\n  const rectSizeWithGap = rectSize + gap;\n\n  // Columns: computed by a helper so logic is isolated\n  const columns: HeatmapColumn[] = getColumns(datesRange, true);\n\n  return (\n    <>\n      {columns.map((col, columnIndex) => {\n        if (col.type === 'spacer') {\n          return (\n            <g\n              key={`spacer-${columnIndex}`}\n              transform={`translate(${columnIndex * rectSizeWithGap}, 0)`}\n            />\n          );\n        }\n\n        const week = datesRange[col.weekIndex];\n\n        const days = week.map((date, dayIndex) => {\n          if (!date) {\n            return null;\n          }\n          if (new Date(date).getUTCMonth() !== col.month) {\n            return null;\n          }\n\n          const hasValue = date in data && data[date] !== null;\n          const rectValue = hasValue ? data[date] : null;\n\n          return (\n            <rect\n              key={`${date}-${col.month}`}\n              width={rectSize}\n              height={rectSize}\n              x={gap}\n              y={dayIndex * rectSizeWithGap + gap}\n              rx={rectRadius}\n              data-empty={!hasValue || undefined}\n              fill={hasValue ? getHeatColor({ value: data[date], min, max, colors }) : undefined}\n              onPointerEnter={\n                withTooltip ? () => setHoveredRect({ date, value: rectValue }) : undefined\n              }\n              {...getRectProps?.({ date, value: rectValue })}\n              {...getStyles('rect')}\n            />\n          );\n        });\n\n        return (\n          <g\n            key={`col-${col.weekIndex}-${col.month}-${columnIndex}`}\n            transform={`translate(${columnIndex * rectSizeWithGap}, 0)`}\n            data-id=\"week\"\n          >\n            {days}\n          </g>\n        );\n      })}\n    </>\n  );\n}\n"],"mappings":";;;;;AAIA,SAAgB,kBAAkB,EAChC,MACA,YACA,UACA,KACA,YACA,KACA,KACA,QACA,aACA,gBACA,cACA,aAC0B;CAC1B,MAAM,kBAAkB,WAAW;AAKnC,QACE,iBAAA,GAAA,kBAAA,KAAA,kBAAA,UAAA,EAAA,UAH+BA,oBAAAA,WAAW,YAAY,KAAK,CAIhD,KAAK,KAAK,gBAAgB;AACjC,MAAI,IAAI,SAAS,SACf,QACE,iBAAA,GAAA,kBAAA,KAAC,KAAD,EAEE,WAAW,aAAa,cAAc,gBAAgB,OACtD,EAFK,UAAU,cAEf;EAMN,MAAM,OAFO,WAAW,IAAI,WAEV,KAAK,MAAM,aAAa;AACxC,OAAI,CAAC,KACH,QAAO;AAET,OAAI,IAAI,KAAK,KAAK,CAAC,aAAa,KAAK,IAAI,MACvC,QAAO;GAGT,MAAM,WAAW,QAAQ,QAAQ,KAAK,UAAU;GAChD,MAAM,YAAY,WAAW,KAAK,QAAQ;AAE1C,UACE,iBAAA,GAAA,kBAAA,KAAC,QAAD;IAEE,OAAO;IACP,QAAQ;IACR,GAAG;IACH,GAAG,WAAW,kBAAkB;IAChC,IAAI;IACJ,cAAY,CAAC,YAAY,KAAA;IACzB,MAAM,WAAWC,uBAAAA,aAAa;KAAE,OAAO,KAAK;KAAO;KAAK;KAAK;KAAQ,CAAC,GAAG,KAAA;IACzE,gBACE,oBAAoB,eAAe;KAAE;KAAM,OAAO;KAAW,CAAC,GAAG,KAAA;IAEnE,GAAI,eAAe;KAAE;KAAM,OAAO;KAAW,CAAC;IAC9C,GAAI,UAAU,OAAO;IACrB,EAbK,GAAG,KAAK,GAAG,IAAI,QAapB;IAEJ;AAEF,SACE,iBAAA,GAAA,kBAAA,KAAC,KAAD;GAEE,WAAW,aAAa,cAAc,gBAAgB;GACtD,WAAQ;aAEP;GACC,EALG,OAAO,IAAI,UAAU,GAAG,IAAI,MAAM,GAAG,cAKxC;GAEN,EACD,CAAA"}
+{"version":3,"file":"HeatmapSplitWeeks.cjs","names":["getColumns","getHeatColor"],"sources":["../../src/Heatmap/HeatmapSplitWeeks.tsx"],"sourcesContent":["import { getColumns, HeatmapColumn } from './get-columns/get-columns';\nimport { getHeatColor } from './get-heat-color/get-heat-color';\nimport { HeatmapWeeksSharedProps } from './HeatmapWeeks.types';\n\nexport function HeatmapSplitWeeks({\n  data,\n  datesRange,\n  rectSize,\n  gap,\n  rectRadius,\n  min,\n  max,\n  colors,\n  withTooltip,\n  setHoveredRect,\n  getRectProps,\n  getStyles,\n}: HeatmapWeeksSharedProps) {\n  const rectSizeWithGap = rectSize + gap;\n\n  // Columns: computed by a helper so logic is isolated\n  const columns: HeatmapColumn[] = getColumns(datesRange, true);\n\n  return (\n    <>\n      {columns.map((col, columnIndex) => {\n        if (col.type === 'spacer') {\n          return (\n            <g\n              key={`spacer-${columnIndex}`}\n              transform={`translate(${columnIndex * rectSizeWithGap}, 0)`}\n            />\n          );\n        }\n\n        const week = datesRange[col.weekIndex];\n\n        const days = week.map((date, dayIndex) => {\n          if (!date) {\n            return null;\n          }\n          if (new Date(date).getUTCMonth() !== col.month) {\n            return null;\n          }\n\n          const hasValue = date in data && data[date] !== null;\n          const rectValue = hasValue ? data[date] : null;\n\n          return (\n            <rect\n              key={`${date}-${col.month}`}\n              width={rectSize}\n              height={rectSize}\n              x={gap}\n              y={dayIndex * rectSizeWithGap + gap}\n              rx={rectRadius}\n              data-empty={!hasValue || undefined}\n              fill={hasValue ? getHeatColor({ value: data[date], min, max, colors }) : undefined}\n              onPointerEnter={\n                withTooltip ? () => setHoveredRect({ date, value: rectValue }) : undefined\n              }\n              {...getRectProps?.({ date, value: rectValue })}\n              {...getStyles('rect')}\n            />\n          );\n        });\n\n        return (\n          <g\n            key={`col-${col.weekIndex}-${col.month}-${columnIndex}`}\n            transform={`translate(${columnIndex * rectSizeWithGap}, 0)`}\n            data-id=\"week\"\n          >\n            {days}\n          </g>\n        );\n      })}\n    </>\n  );\n}\n"],"mappings":";;;;;;AAIA,SAAgB,kBAAkB,EAChC,MACA,YACA,UACA,KACA,YACA,KACA,KACA,QACA,aACA,gBACA,cACA,aAC0B;CAC1B,MAAM,kBAAkB,WAAW;AAKnC,QACE,iBAAA,GAAA,kBAAA,KAAA,kBAAA,UAAA,EAAA,UAH+BA,oBAAAA,WAAW,YAAY,KAAK,CAIhD,KAAK,KAAK,gBAAgB;AACjC,MAAI,IAAI,SAAS,SACf,QACE,iBAAA,GAAA,kBAAA,KAAC,KAAD,EAEE,WAAW,aAAa,cAAc,gBAAgB,OACtD,EAFK,UAAU,cAEf;EAMN,MAAM,OAFO,WAAW,IAAI,WAEV,KAAK,MAAM,aAAa;AACxC,OAAI,CAAC,KACH,QAAO;AAET,OAAI,IAAI,KAAK,KAAK,CAAC,aAAa,KAAK,IAAI,MACvC,QAAO;GAGT,MAAM,WAAW,QAAQ,QAAQ,KAAK,UAAU;GAChD,MAAM,YAAY,WAAW,KAAK,QAAQ;AAE1C,UACE,iBAAA,GAAA,kBAAA,KAAC,QAAD;IAEE,OAAO;IACP,QAAQ;IACR,GAAG;IACH,GAAG,WAAW,kBAAkB;IAChC,IAAI;IACJ,cAAY,CAAC,YAAY,KAAA;IACzB,MAAM,WAAWC,uBAAAA,aAAa;KAAE,OAAO,KAAK;KAAO;KAAK;KAAK;KAAQ,CAAC,GAAG,KAAA;IACzE,gBACE,oBAAoB,eAAe;KAAE;KAAM,OAAO;KAAW,CAAC,GAAG,KAAA;IAEnE,GAAI,eAAe;KAAE;KAAM,OAAO;KAAW,CAAC;IAC9C,GAAI,UAAU,OAAO;IACrB,EAbK,GAAG,KAAK,GAAG,IAAI,QAapB;IAEJ;AAEF,SACE,iBAAA,GAAA,kBAAA,KAAC,KAAD;GAEE,WAAW,aAAa,cAAc,gBAAgB;GACtD,WAAQ;aAEP;GACC,EALG,OAAO,IAAI,UAAU,GAAG,IAAI,MAAM,GAAG,cAKxC;GAEN,EACD,CAAA"}

package/cjs/Heatmap/HeatmapWeeks.cjs

@@ -1,4 +1,5 @@
 "use client";
+require("../_virtual/_rolldown/runtime.cjs");
 const require_get_heat_color = require("./get-heat-color/get-heat-color.cjs");
 let react_jsx_runtime = require("react/jsx-runtime");
 //#region packages/@mantine/charts/src/Heatmap/HeatmapWeeks.tsx

package/cjs/Heatmap/HeatmapWeeks.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"HeatmapWeeks.cjs","names":["getHeatColor"],"sources":["../../src/Heatmap/HeatmapWeeks.tsx"],"sourcesContent":["import { getHeatColor } from './get-heat-color/get-heat-color';\nimport { HeatmapWeeksSharedProps } from './HeatmapWeeks.types';\n\nexport function HeatmapWeeks({\n  data,\n  datesRange,\n  rectSize,\n  gap,\n  rectRadius,\n  min,\n  max,\n  colors,\n  withTooltip,\n  setHoveredRect,\n  getRectProps,\n  getStyles,\n}: HeatmapWeeksSharedProps) {\n  const rectSizeWithGap = rectSize + gap;\n\n  return (\n    <>\n      {datesRange.map((week, weekIndex) => {\n        // Original simple logic without month splitting\n        const days = week.map((date, dayIndex) => {\n          if (!date) {\n            return null;\n          }\n\n          const hasValue = date in data && data[date] !== null;\n          const rectValue = hasValue ? data[date] : null;\n\n          return (\n            <rect\n              key={date}\n              width={rectSize}\n              height={rectSize}\n              x={gap}\n              y={dayIndex * rectSizeWithGap + gap}\n              rx={rectRadius}\n              data-empty={!hasValue || undefined}\n              fill={hasValue ? getHeatColor({ value: data[date], min, max, colors }) : undefined}\n              onPointerEnter={\n                withTooltip ? () => setHoveredRect({ date, value: rectValue }) : undefined\n              }\n              {...getRectProps?.({ date, value: rectValue })}\n              {...getStyles('rect')}\n            />\n          );\n        });\n\n        return (\n          <g\n            key={weekIndex}\n            transform={`translate(${weekIndex * rectSizeWithGap}, 0)`}\n            data-id=\"week\"\n          >\n            {days}\n          </g>\n        );\n      })}\n    </>\n  );\n}\n"],"mappings":";;;;AAGA,SAAgB,aAAa,EAC3B,MACA,YACA,UACA,KACA,YACA,KACA,KACA,QACA,aACA,gBACA,cACA,aAC0B;CAC1B,MAAM,kBAAkB,WAAW;AAEnC,QACE,iBAAA,GAAA,kBAAA,KAAA,kBAAA,UAAA,EAAA,UACG,WAAW,KAAK,MAAM,cAAc;EAEnC,MAAM,OAAO,KAAK,KAAK,MAAM,aAAa;AACxC,OAAI,CAAC,KACH,QAAO;GAGT,MAAM,WAAW,QAAQ,QAAQ,KAAK,UAAU;GAChD,MAAM,YAAY,WAAW,KAAK,QAAQ;AAE1C,UACE,iBAAA,GAAA,kBAAA,KAAC,QAAD;IAEE,OAAO;IACP,QAAQ;IACR,GAAG;IACH,GAAG,WAAW,kBAAkB;IAChC,IAAI;IACJ,cAAY,CAAC,YAAY,KAAA;IACzB,MAAM,WAAWA,uBAAAA,aAAa;KAAE,OAAO,KAAK;KAAO;KAAK;KAAK;KAAQ,CAAC,GAAG,KAAA;IACzE,gBACE,oBAAoB,eAAe;KAAE;KAAM,OAAO;KAAW,CAAC,GAAG,KAAA;IAEnE,GAAI,eAAe;KAAE;KAAM,OAAO;KAAW,CAAC;IAC9C,GAAI,UAAU,OAAO;IACrB,EAbK,KAaL;IAEJ;AAEF,SACE,iBAAA,GAAA,kBAAA,KAAC,KAAD;GAEE,WAAW,aAAa,YAAY,gBAAgB;GACpD,WAAQ;aAEP;GACC,EALG,UAKH;GAEN,EACD,CAAA"}
+{"version":3,"file":"HeatmapWeeks.cjs","names":["getHeatColor"],"sources":["../../src/Heatmap/HeatmapWeeks.tsx"],"sourcesContent":["import { getHeatColor } from './get-heat-color/get-heat-color';\nimport { HeatmapWeeksSharedProps } from './HeatmapWeeks.types';\n\nexport function HeatmapWeeks({\n  data,\n  datesRange,\n  rectSize,\n  gap,\n  rectRadius,\n  min,\n  max,\n  colors,\n  withTooltip,\n  setHoveredRect,\n  getRectProps,\n  getStyles,\n}: HeatmapWeeksSharedProps) {\n  const rectSizeWithGap = rectSize + gap;\n\n  return (\n    <>\n      {datesRange.map((week, weekIndex) => {\n        // Original simple logic without month splitting\n        const days = week.map((date, dayIndex) => {\n          if (!date) {\n            return null;\n          }\n\n          const hasValue = date in data && data[date] !== null;\n          const rectValue = hasValue ? data[date] : null;\n\n          return (\n            <rect\n              key={date}\n              width={rectSize}\n              height={rectSize}\n              x={gap}\n              y={dayIndex * rectSizeWithGap + gap}\n              rx={rectRadius}\n              data-empty={!hasValue || undefined}\n              fill={hasValue ? getHeatColor({ value: data[date], min, max, colors }) : undefined}\n              onPointerEnter={\n                withTooltip ? () => setHoveredRect({ date, value: rectValue }) : undefined\n              }\n              {...getRectProps?.({ date, value: rectValue })}\n              {...getStyles('rect')}\n            />\n          );\n        });\n\n        return (\n          <g\n            key={weekIndex}\n            transform={`translate(${weekIndex * rectSizeWithGap}, 0)`}\n            data-id=\"week\"\n          >\n            {days}\n          </g>\n        );\n      })}\n    </>\n  );\n}\n"],"mappings":";;;;;AAGA,SAAgB,aAAa,EAC3B,MACA,YACA,UACA,KACA,YACA,KACA,KACA,QACA,aACA,gBACA,cACA,aAC0B;CAC1B,MAAM,kBAAkB,WAAW;AAEnC,QACE,iBAAA,GAAA,kBAAA,KAAA,kBAAA,UAAA,EAAA,UACG,WAAW,KAAK,MAAM,cAAc;EAEnC,MAAM,OAAO,KAAK,KAAK,MAAM,aAAa;AACxC,OAAI,CAAC,KACH,QAAO;GAGT,MAAM,WAAW,QAAQ,QAAQ,KAAK,UAAU;GAChD,MAAM,YAAY,WAAW,KAAK,QAAQ;AAE1C,UACE,iBAAA,GAAA,kBAAA,KAAC,QAAD;IAEE,OAAO;IACP,QAAQ;IACR,GAAG;IACH,GAAG,WAAW,kBAAkB;IAChC,IAAI;IACJ,cAAY,CAAC,YAAY,KAAA;IACzB,MAAM,WAAWA,uBAAAA,aAAa;KAAE,OAAO,KAAK;KAAO;KAAK;KAAK;KAAQ,CAAC,GAAG,KAAA;IACzE,gBACE,oBAAoB,eAAe;KAAE;KAAM,OAAO;KAAW,CAAC,GAAG,KAAA;IAEnE,GAAI,eAAe;KAAE;KAAM,OAAO;KAAW,CAAC;IAC9C,GAAI,UAAU,OAAO;IACrB,EAbK,KAaL;IAEJ;AAEF,SACE,iBAAA,GAAA,kBAAA,KAAC,KAAD;GAEE,WAAW,aAAa,YAAY,gBAAgB;GACpD,WAAQ;aAEP;GACC,EALG,UAKH;GAEN,EACD,CAAA"}

package/cjs/Heatmap/get-heat-color/get-heat-color.cjs

@@ -1,7 +1,7 @@
 "use client";
 //#region packages/@mantine/charts/src/Heatmap/get-heat-color/get-heat-color.ts
 function getHeatColor({ value, min, max, colors }) {
-	const percent = (value - min) / (max - min);
+	const percent = max === min ? 1 : (value - min) / (max - min);
 	return colors[Math.round((colors.length - 1) * percent)];
 }
 //#endregion

package/cjs/Heatmap/get-heat-color/get-heat-color.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"get-heat-color.cjs","names":[],"sources":["../../../src/Heatmap/get-heat-color/get-heat-color.ts"],"sourcesContent":["interface GetHeatColorInput {\n  value: number;\n  min: number;\n  max: number;\n  colors: string[];\n}\n\nexport function getHeatColor({ value, min, max, colors }: GetHeatColorInput) {\n  const percent = (value - min) / (max - min);\n  const colorIndex = Math.round((colors.length - 1) * percent);\n  return colors[colorIndex];\n}\n"],"mappings":";;AAOA,SAAgB,aAAa,EAAE,OAAO,KAAK,KAAK,UAA6B;CAC3E,MAAM,WAAW,QAAQ,QAAQ,MAAM;AAEvC,QAAO,OADY,KAAK,OAAO,OAAO,SAAS,KAAK,QAAQ"}
+{"version":3,"file":"get-heat-color.cjs","names":[],"sources":["../../../src/Heatmap/get-heat-color/get-heat-color.ts"],"sourcesContent":["interface GetHeatColorInput {\n  value: number;\n  min: number;\n  max: number;\n  colors: string[];\n}\n\nexport function getHeatColor({ value, min, max, colors }: GetHeatColorInput) {\n  const percent = max === min ? 1 : (value - min) / (max - min);\n  const colorIndex = Math.round((colors.length - 1) * percent);\n  return colors[colorIndex];\n}\n"],"mappings":";;AAOA,SAAgB,aAAa,EAAE,OAAO,KAAK,KAAK,UAA6B;CAC3E,MAAM,UAAU,QAAQ,MAAM,KAAK,QAAQ,QAAQ,MAAM;AAEzD,QAAO,OADY,KAAK,OAAO,OAAO,SAAS,KAAK,QAAQ"}

package/cjs/LineChart/LineChart.cjs

@@ -1,4 +1,5 @@
 "use client";
+require("../_virtual/_rolldown/runtime.cjs");
 const require_ChartTooltip = require("../ChartTooltip/ChartTooltip.cjs");
 const require_ChartLegend = require("../ChartLegend/ChartLegend.cjs");
 const require_PointLabel = require("../PointLabel/PointLabel.cjs");

package/cjs/LineChart/LineChart.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"LineChart.cjs","names":["Line","PointLabel","ReferenceLine","Box","ResponsiveContainer","ReChartsLineChart","Legend","ChartLegend","XAxis","Label","YAxis","CartesianGrid","Tooltip","ChartTooltip","classes"],"sources":["../../src/LineChart/LineChart.tsx"],"sourcesContent":["import { useState } from 'react';\nimport {\n  CartesianGrid,\n  Label,\n  Legend,\n  Line,\n  LineProps,\n  LineChart as ReChartsLineChart,\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 { useId } from '@mantine/hooks';\nimport { ChartLegend, ChartLegendStylesNames } from '../ChartLegend';\nimport { ChartTooltip, ChartTooltipStylesNames } from '../ChartTooltip';\nimport { PointLabel } from '../PointLabel/PointLabel';\nimport type {\n  BaseChartStylesNames,\n  ChartSeries,\n  GridChartBaseProps,\n  MantineChartDotProps,\n} from '../types';\nimport classes from '../grid-chart.module.css';\n\nexport type LineChartType = 'default' | 'gradient';\n\nexport interface LineChartGradientStop {\n  offset: number;\n  color: MantineColor;\n}\n\nexport type LineChartCurveType =\n  | 'bump'\n  | 'linear'\n  | 'natural'\n  | 'monotone'\n  | 'step'\n  | 'stepBefore'\n  | 'stepAfter';\n\nexport interface LineChartSeries extends ChartSeries {\n  strokeDasharray?: string | number;\n  curveType?: LineChartCurveType;\n}\n\nexport type LineChartStylesNames =\n  | 'line'\n  | BaseChartStylesNames\n  | ChartLegendStylesNames\n  | ChartTooltipStylesNames;\n\nexport type LineChartCssVariables = {\n  root: '--chart-text-color' | '--chart-grid-color';\n};\n\nexport interface LineChartProps\n  extends BoxProps, GridChartBaseProps, StylesApiProps<LineChartFactory>, 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: LineChartSeries[];\n\n  /** Controls styles of the line @default 'default' */\n  type?: LineChartType;\n\n  /** Data used to generate gradient stops @default [{ offset: 0, color: 'red' }, { offset: 100, color: 'blue' }] */\n  gradientStops?: LineChartGradientStop[];\n\n  /** Type of the curve @default 'monotone' */\n  curveType?: LineChartCurveType;\n\n  /** Controls fill opacity of all lines @default 1 */\n  fillOpacity?: number;\n\n  /** Determines whether dots should be displayed @default true */\n  withDots?: boolean;\n\n  /** Props passed down to all dots. Ignored if `withDots={false}` is set. */\n  dotProps?: MantineChartDotProps;\n\n  /** Props passed down to all active dots. Ignored if `withDots={false}` is set. */\n  activeDotProps?: MantineChartDotProps;\n\n  /** Stroke width for the chart lines @default 2 */\n  strokeWidth?: number;\n\n  /** Props passed down to recharts `LineChart` component */\n  lineChartProps?: React.ComponentProps<typeof ReChartsLineChart>;\n\n  /** Determines whether points with `null` values should be connected @default true */\n  connectNulls?: boolean;\n\n  /** Additional components that are rendered inside recharts `LineChart` component */\n  children?: React.ReactNode;\n\n  /** Props passed down to recharts `Line` component */\n  lineProps?:\n    | ((series: LineChartSeries) => Partial<Omit<LineProps, 'ref'>>)\n    | Partial<Omit<LineProps, 'ref'>>;\n\n  /** Determines whether each point should have associated label @default false */\n  withPointLabels?: boolean;\n}\n\nexport type LineChartFactory = Factory<{\n  props: LineChartProps;\n  ref: HTMLDivElement;\n  stylesNames: LineChartStylesNames;\n  vars: LineChartCssVariables;\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  withDots: true,\n  connectNulls: true,\n  strokeWidth: 2,\n  curveType: 'monotone',\n  gradientStops: [\n    { offset: 0, color: 'red' },\n    { offset: 100, color: 'blue' },\n  ],\n} satisfies Partial<LineChartProps>;\n\nconst varsResolver = createVarsResolver<LineChartFactory>((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 LineChart = factory<LineChartFactory>((_props) => {\n  const props = useProps('LineChart', defaultProps, _props);\n  const {\n    classNames,\n    className,\n    style,\n    styles,\n    unstyled,\n    vars,\n    data,\n    withLegend,\n    legendProps,\n    series,\n    onMouseLeave,\n    dataKey,\n    withTooltip,\n    withXAxis,\n    withYAxis,\n    gridAxis,\n    tickLine,\n    xAxisProps,\n    yAxisProps,\n    unit,\n    tooltipAnimationDuration,\n    strokeDasharray,\n    gridProps,\n    tooltipProps,\n    referenceLines,\n    withDots,\n    dotProps,\n    activeDotProps,\n    strokeWidth,\n    lineChartProps,\n    connectNulls,\n    fillOpacity,\n    curveType,\n    orientation,\n    dir,\n    valueFormatter,\n    children,\n    lineProps,\n    xAxisLabel,\n    yAxisLabel,\n    type,\n    gradientStops,\n    withRightYAxis,\n    rightYAxisLabel,\n    rightYAxisProps,\n    withPointLabels,\n    attributes,\n    gridColor,\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 | null>(null);\n  const shouldHighlight = highlightedArea !== null;\n  const handleMouseLeave = (event: React.MouseEvent<HTMLDivElement>) => {\n    setHighlightedArea(null);\n    onMouseLeave?.(event);\n  };\n  const { resolvedClassNames, resolvedStyles } = useResolvedStylesApi<LineChartFactory>({\n    classNames,\n    styles,\n    props,\n  });\n\n  const getStyles = useStyles<LineChartFactory>({\n    name: 'LineChart',\n    classes,\n    props,\n    className,\n    style,\n    classNames,\n    styles,\n    unstyled,\n    attributes,\n    vars,\n    varsResolver,\n  });\n\n  const id = useId();\n  const gradientId = `line-chart-gradient-${id}`;\n  const stops = gradientStops?.map((stop) => (\n    <stop\n      key={stop.color}\n      offset={`${stop.offset}%`}\n      stopColor={getThemeColor(stop.color, theme)}\n    />\n  ));\n\n  const lines = series.map((item) => {\n    const color = getThemeColor(item.color, theme);\n    const dimmed = shouldHighlight && highlightedArea !== item.name;\n\n    return (\n      <Line\n        {...getStyles('line')}\n        key={item.name}\n        name={item.name}\n        dataKey={item.name}\n        dot={\n          withDots\n            ? {\n                fillOpacity: dimmed ? 0 : 1,\n                strokeOpacity: dimmed ? 0 : 1,\n                strokeWidth: 1,\n                fill: type === 'gradient' ? 'var(--mantine-color-gray-7)' : color,\n                stroke: type === 'gradient' ? 'white' : color,\n                ...dotProps,\n              }\n            : false\n        }\n        activeDot={\n          withDots\n            ? {\n                fill: type === 'gradient' ? 'var(--mantine-color-gray-7)' : color,\n                stroke: type === 'gradient' ? 'white' : color,\n                ...activeDotProps,\n              }\n            : false\n        }\n        fill={color}\n        stroke={type === 'gradient' ? `url(#${gradientId})` : color}\n        strokeWidth={strokeWidth}\n        isAnimationActive={false}\n        fillOpacity={dimmed ? 0 : fillOpacity}\n        strokeOpacity={dimmed ? 0.5 : fillOpacity}\n        connectNulls={connectNulls}\n        type={item.curveType ?? curveType}\n        strokeDasharray={item.strokeDasharray}\n        yAxisId={item.yAxisId || undefined}\n        label={withPointLabels ? <PointLabel valueFormatter={valueFormatter} /> : undefined}\n        {...(typeof lineProps === 'function' ? lineProps(item) : lineProps)}\n      />\n    );\n  });\n\n  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          value: line.label,\n          fill: line.color ? color : 'currentColor',\n          fontSize: 12,\n          position: line.labelPosition ?? 'insideBottomLeft',\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 : valueFormatter,\n    ...getStyles('axis'),\n  };\n\n  return (\n    <Box {...getStyles('root')} onMouseLeave={handleMouseLeave} dir={dir || 'ltr'} {...others}>\n      <ResponsiveContainer {...getStyles('container')}>\n        <ReChartsLineChart\n          data={data}\n          layout={orientation}\n          margin={{\n            bottom: xAxisLabel ? 30 : undefined,\n            left: yAxisLabel ? 10 : undefined,\n            right: yAxisLabel ? 5 : undefined,\n          }}\n          {...lineChartProps}\n        >\n          {type === 'gradient' && (\n            <defs>\n              <linearGradient id={gradientId} x1=\"0\" y1=\"0\" x2=\"0\" y2=\"1\">\n                {stops}\n              </linearGradient>\n            </defs>\n          )}\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 !== 'gradient'}\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' ? valueFormatter : 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            // yAxisId=\"left\"\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              }}\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                  showColor={type !== 'gradient'}\n                  attributes={attributes}\n                />\n              )}\n              {...tooltipProps}\n            />\n          )}\n\n          {lines}\n          {referenceLinesItems}\n          {children}\n        </ReChartsLineChart>\n      </ResponsiveContainer>\n    </Box>\n  );\n});\n\nLineChart.displayName = '@mantine/charts/LineChart';\nLineChart.classes = classes;\nLineChart.varsResolver = varsResolver;\n"],"mappings":"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"}
+{"version":3,"file":"LineChart.cjs","names":["Line","PointLabel","ReferenceLine","Box","ResponsiveContainer","ReChartsLineChart","Legend","ChartLegend","XAxis","Label","YAxis","CartesianGrid","Tooltip","ChartTooltip","classes"],"sources":["../../src/LineChart/LineChart.tsx"],"sourcesContent":["import { useState } from 'react';\nimport {\n  CartesianGrid,\n  Label,\n  Legend,\n  Line,\n  LineProps,\n  LineChart as ReChartsLineChart,\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 { useId } from '@mantine/hooks';\nimport { ChartLegend, ChartLegendStylesNames } from '../ChartLegend';\nimport { ChartTooltip, ChartTooltipStylesNames } from '../ChartTooltip';\nimport { PointLabel } from '../PointLabel/PointLabel';\nimport type {\n  BaseChartStylesNames,\n  ChartSeries,\n  GridChartBaseProps,\n  MantineChartDotProps,\n} from '../types';\nimport classes from '../grid-chart.module.css';\n\nexport type LineChartType = 'default' | 'gradient';\n\nexport interface LineChartGradientStop {\n  offset: number;\n  color: MantineColor;\n}\n\nexport type LineChartCurveType =\n  | 'bump'\n  | 'linear'\n  | 'natural'\n  | 'monotone'\n  | 'step'\n  | 'stepBefore'\n  | 'stepAfter';\n\nexport interface LineChartSeries extends ChartSeries {\n  strokeDasharray?: string | number;\n  curveType?: LineChartCurveType;\n}\n\nexport type LineChartStylesNames =\n  | 'line'\n  | BaseChartStylesNames\n  | ChartLegendStylesNames\n  | ChartTooltipStylesNames;\n\nexport type LineChartCssVariables = {\n  root: '--chart-text-color' | '--chart-grid-color';\n};\n\nexport interface LineChartProps\n  extends BoxProps, GridChartBaseProps, StylesApiProps<LineChartFactory>, 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: LineChartSeries[];\n\n  /** Controls styles of the line @default 'default' */\n  type?: LineChartType;\n\n  /** Data used to generate gradient stops @default [{ offset: 0, color: 'red' }, { offset: 100, color: 'blue' }] */\n  gradientStops?: LineChartGradientStop[];\n\n  /** Type of the curve @default 'monotone' */\n  curveType?: LineChartCurveType;\n\n  /** Controls fill opacity of all lines @default 1 */\n  fillOpacity?: number;\n\n  /** Determines whether dots should be displayed @default true */\n  withDots?: boolean;\n\n  /** Props passed down to all dots. Ignored if `withDots={false}` is set. */\n  dotProps?: MantineChartDotProps;\n\n  /** Props passed down to all active dots. Ignored if `withDots={false}` is set. */\n  activeDotProps?: MantineChartDotProps;\n\n  /** Stroke width for the chart lines @default 2 */\n  strokeWidth?: number;\n\n  /** Props passed down to recharts `LineChart` component */\n  lineChartProps?: React.ComponentProps<typeof ReChartsLineChart>;\n\n  /** Determines whether points with `null` values should be connected @default true */\n  connectNulls?: boolean;\n\n  /** Additional components that are rendered inside recharts `LineChart` component */\n  children?: React.ReactNode;\n\n  /** Props passed down to recharts `Line` component */\n  lineProps?:\n    | ((series: LineChartSeries) => Partial<Omit<LineProps, 'ref'>>)\n    | Partial<Omit<LineProps, 'ref'>>;\n\n  /** Determines whether each point should have associated label @default false */\n  withPointLabels?: boolean;\n}\n\nexport type LineChartFactory = Factory<{\n  props: LineChartProps;\n  ref: HTMLDivElement;\n  stylesNames: LineChartStylesNames;\n  vars: LineChartCssVariables;\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  withDots: true,\n  connectNulls: true,\n  strokeWidth: 2,\n  curveType: 'monotone',\n  gradientStops: [\n    { offset: 0, color: 'red' },\n    { offset: 100, color: 'blue' },\n  ],\n} satisfies Partial<LineChartProps>;\n\nconst varsResolver = createVarsResolver<LineChartFactory>((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 LineChart = factory<LineChartFactory>((_props) => {\n  const props = useProps('LineChart', defaultProps, _props);\n  const {\n    classNames,\n    className,\n    style,\n    styles,\n    unstyled,\n    vars,\n    data,\n    withLegend,\n    legendProps,\n    series,\n    onMouseLeave,\n    dataKey,\n    withTooltip,\n    withXAxis,\n    withYAxis,\n    gridAxis,\n    tickLine,\n    xAxisProps,\n    yAxisProps,\n    unit,\n    tooltipAnimationDuration,\n    strokeDasharray,\n    gridProps,\n    tooltipProps,\n    referenceLines,\n    withDots,\n    dotProps,\n    activeDotProps,\n    strokeWidth,\n    lineChartProps,\n    connectNulls,\n    fillOpacity,\n    curveType,\n    orientation,\n    dir,\n    valueFormatter,\n    children,\n    lineProps,\n    xAxisLabel,\n    yAxisLabel,\n    type,\n    gradientStops,\n    withRightYAxis,\n    rightYAxisLabel,\n    rightYAxisProps,\n    withPointLabels,\n    attributes,\n    gridColor,\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 | null>(null);\n  const shouldHighlight = highlightedArea !== null;\n  const handleMouseLeave = (event: React.MouseEvent<HTMLDivElement>) => {\n    setHighlightedArea(null);\n    onMouseLeave?.(event);\n  };\n  const { resolvedClassNames, resolvedStyles } = useResolvedStylesApi<LineChartFactory>({\n    classNames,\n    styles,\n    props,\n  });\n\n  const getStyles = useStyles<LineChartFactory>({\n    name: 'LineChart',\n    classes,\n    props,\n    className,\n    style,\n    classNames,\n    styles,\n    unstyled,\n    attributes,\n    vars,\n    varsResolver,\n  });\n\n  const id = useId();\n  const gradientId = `line-chart-gradient-${id}`;\n  const stops = gradientStops?.map((stop) => (\n    <stop\n      key={stop.color}\n      offset={`${stop.offset}%`}\n      stopColor={getThemeColor(stop.color, theme)}\n    />\n  ));\n\n  const lines = series.map((item) => {\n    const color = getThemeColor(item.color, theme);\n    const dimmed = shouldHighlight && highlightedArea !== item.name;\n\n    return (\n      <Line\n        {...getStyles('line')}\n        key={item.name}\n        name={item.name}\n        dataKey={item.name}\n        dot={\n          withDots\n            ? {\n                fillOpacity: dimmed ? 0 : 1,\n                strokeOpacity: dimmed ? 0 : 1,\n                strokeWidth: 1,\n                fill: type === 'gradient' ? 'var(--mantine-color-gray-7)' : color,\n                stroke: type === 'gradient' ? 'white' : color,\n                ...dotProps,\n              }\n            : false\n        }\n        activeDot={\n          withDots\n            ? {\n                fill: type === 'gradient' ? 'var(--mantine-color-gray-7)' : color,\n                stroke: type === 'gradient' ? 'white' : color,\n                ...activeDotProps,\n              }\n            : false\n        }\n        fill={color}\n        stroke={type === 'gradient' ? `url(#${gradientId})` : color}\n        strokeWidth={strokeWidth}\n        isAnimationActive={false}\n        fillOpacity={dimmed ? 0 : fillOpacity}\n        strokeOpacity={dimmed ? 0.5 : fillOpacity}\n        connectNulls={connectNulls}\n        type={item.curveType ?? curveType}\n        strokeDasharray={item.strokeDasharray}\n        yAxisId={item.yAxisId || undefined}\n        label={withPointLabels ? <PointLabel valueFormatter={valueFormatter} /> : undefined}\n        {...(typeof lineProps === 'function' ? lineProps(item) : lineProps)}\n      />\n    );\n  });\n\n  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          value: line.label,\n          fill: line.color ? color : 'currentColor',\n          fontSize: 12,\n          position: line.labelPosition ?? 'insideBottomLeft',\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 : valueFormatter,\n    ...getStyles('axis'),\n  };\n\n  return (\n    <Box {...getStyles('root')} onMouseLeave={handleMouseLeave} dir={dir || 'ltr'} {...others}>\n      <ResponsiveContainer {...getStyles('container')}>\n        <ReChartsLineChart\n          data={data}\n          layout={orientation}\n          margin={{\n            bottom: xAxisLabel ? 30 : undefined,\n            left: yAxisLabel ? 10 : undefined,\n            right: yAxisLabel ? 5 : undefined,\n          }}\n          {...lineChartProps}\n        >\n          {type === 'gradient' && (\n            <defs>\n              <linearGradient id={gradientId} x1=\"0\" y1=\"0\" x2=\"0\" y2=\"1\">\n                {stops}\n              </linearGradient>\n            </defs>\n          )}\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 !== 'gradient'}\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' ? valueFormatter : 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            // yAxisId=\"left\"\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              }}\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                  showColor={type !== 'gradient'}\n                  attributes={attributes}\n                />\n              )}\n              {...tooltipProps}\n            />\n          )}\n\n          {lines}\n          {referenceLinesItems}\n          {children}\n        </ReChartsLineChart>\n      </ResponsiveContainer>\n    </Box>\n  );\n});\n\nLineChart.displayName = '@mantine/charts/LineChart';\nLineChart.classes = classes;\nLineChart.varsResolver = varsResolver;\n"],"mappings":"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"}

package/cjs/PieChart/PieChart.cjs

@@ -1,4 +1,5 @@
 "use client";
+require("../_virtual/_rolldown/runtime.cjs");
 const require_ChartTooltip = require("../ChartTooltip/ChartTooltip.cjs");
 const require_PieChart_module = require("./PieChart.module.cjs");
 let _mantine_core = require("@mantine/core");
@@ -76,12 +77,13 @@ const PieChart = (0, _mantine_core.factory)((_props) => {
 		styles,
 		props
 	});
-	const cells = data.map((item, index) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(recharts.Cell, {
+	const pieData = data.map((item) => ({
+		...item,
 		fill: (0, _mantine_core.getThemeColor)(item.color, theme),
 		stroke: "var(--chart-stroke-color, var(--mantine-color-body))",
 		strokeWidth,
 		...typeof cellProps === "function" ? cellProps(item) : cellProps
-	}, index));
+	}));
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_mantine_core.Box, {
 		size,
 		...getStyles("root"),
@@ -90,7 +92,7 @@ const PieChart = (0, _mantine_core.factory)((_props) => {
 			...pieChartProps,
 			children: [
 				/* @__PURE__ */ (0, react_jsx_runtime.jsx)(recharts.Pie, {
-					data,
+					data: pieData,
 					innerRadius: 0,
 					outerRadius: size / 2,
 					dataKey: "value",
@@ -103,8 +105,7 @@ const PieChart = (0, _mantine_core.factory)((_props) => {
 						stroke: "var(--chart-label-color, var(--mantine-color-dimmed))",
 						strokeWidth: 1
 					} : false,
-					...pieProps,
-					children: cells
+					...pieProps
 				}),
 				withTooltip && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(recharts.Tooltip, {
 					animationDuration: tooltipAnimationDuration,