@mantine/charts 9.4.3-alpha.0 → 9.5.0

package/cjs/RadarChart/RadarChart.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"RadarChart.cjs","names":["Radar","Box","ResponsiveContainer","ReChartsRadarChart","PolarGrid","PolarAngleAxis","PolarRadiusAxis","Tooltip","ChartTooltip","Legend","ChartLegend","classes"],"sources":["../../src/RadarChart/RadarChart.tsx"],"sourcesContent":["import { useState } from 'react';\nimport {\n  Legend,\n  LegendProps,\n  PolarAngleAxis,\n  PolarAngleAxisProps,\n  PolarGrid,\n  PolarGridProps,\n  PolarRadiusAxis,\n  PolarRadiusAxisProps,\n  Radar,\n  RadarProps,\n  RadarChart as ReChartsRadarChart,\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  StylesApiProps,\n  useMantineTheme,\n  useProps,\n  useResolvedStylesApi,\n  useStyles,\n} from '@mantine/core';\nimport { ChartLegend, ChartLegendStylesNames } from '../ChartLegend';\nimport { ChartTooltip, ChartTooltipStylesNames } from '../ChartTooltip';\nimport { MantineChartDotProps } from '../types';\nimport classes from './RadarChart.module.css';\n\nexport interface RadarChartSeries {\n  name: string;\n  color: MantineColor;\n  strokeColor?: MantineColor;\n  opacity?: number;\n  label?: string;\n}\n\nexport type RadarChartStylesNames =\n  | 'root'\n  | 'container'\n  | ChartTooltipStylesNames\n  | ChartLegendStylesNames;\nexport type RadarChartCssVariables = {\n  root: '--chart-grid-color' | '--chart-text-color';\n};\n\nexport interface RadarChartProps\n  extends BoxProps, StylesApiProps<RadarChartFactory>, ElementProps<'div'> {\n  /** Data used in the chart */\n  data: Record<string, any>[];\n\n  /** Determines which data should be consumed from the `data` array. */\n  series: RadarChartSeries[];\n\n  /** Key of the `data` object for axis values */\n  dataKey: string;\n\n  /** Controls color of the grid lines. By default, color depends on the color scheme. */\n  gridColor?: MantineColor;\n\n  /** Controls color of all text elements. By default, color depends on the color scheme. */\n  textColor?: MantineColor;\n\n  /** Determines whether PolarGrid component should be displayed @default true. */\n  withPolarGrid?: boolean;\n\n  /** Determines whether PolarAngleAxis component should be displayed @default true */\n  withPolarAngleAxis?: boolean;\n\n  /** Determines whether PolarRadiusAxisProps component should be displayed @default false */\n  withPolarRadiusAxis?: boolean;\n\n  /** Determines whether Tooltip component should be displayed @default false */\n  withTooltip?: boolean;\n\n  /** Props passed down to recharts Radar component */\n  radarProps?:\n    | ((series: RadarChartSeries) => Partial<Omit<RadarProps, 'ref'>>)\n    | Partial<Omit<RadarProps, 'ref'>>;\n\n  /** Props passed down to recharts RadarChart component */\n  radarChartProps?: React.ComponentProps<typeof ReChartsRadarChart>;\n\n  /** Props passed down to recharts PolarGrid component */\n  polarGridProps?: Omit<PolarGridProps, 'ref'>;\n\n  /** Props passed down to recharts PolarAngleAxis component */\n  polarAngleAxisProps?: Omit<PolarAngleAxisProps, 'ref'>;\n\n  /** Props passed down to recharts PolarRadiusAxis component */\n  polarRadiusAxisProps?: Omit<PolarRadiusAxisProps, 'ref'>;\n\n  /** Props passed down to recharts Legend component */\n  legendProps?: Omit<LegendProps, 'ref'>;\n\n  /** Props passed down to recharts Tooltip component */\n  tooltipProps?: Omit<TooltipProps<any, any>, 'ref'>;\n\n  /** Tooltip position animation duration in ms @default 0 */\n  tooltipAnimationDuration?: number;\n\n  /** Determines whether the legend should be displayed @default false */\n  withLegend?: boolean;\n\n  /** Determines whether dots should be displayed @default false */\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  /** Additional components that are rendered inside recharts `RadarChart` component */\n  children?: React.ReactNode;\n}\n\nexport type RadarChartFactory = Factory<{\n  props: RadarChartProps;\n  ref: HTMLDivElement;\n  stylesNames: RadarChartStylesNames;\n  vars: RadarChartCssVariables;\n}>;\n\nconst defaultProps = {\n  withPolarGrid: true,\n  withPolarAngleAxis: true,\n  withPolarRadiusAxis: false,\n  withTooltip: false,\n  withDots: false,\n  tooltipAnimationDuration: 0,\n} satisfies Partial<RadarChartProps>;\n\nconst varsResolver = createVarsResolver<RadarChartFactory>((theme, { gridColor, textColor }) => ({\n  root: {\n    '--chart-grid-color': gridColor ? getThemeColor(gridColor, theme) : undefined,\n    '--chart-text-color': textColor ? getThemeColor(textColor, theme) : undefined,\n  },\n}));\n\nexport const RadarChart = factory<RadarChartFactory>((_props) => {\n  const props = useProps('RadarChart', defaultProps, _props);\n  const {\n    classNames,\n    className,\n    style,\n    styles,\n    unstyled,\n    vars,\n    data,\n    series,\n    dataKey,\n    gridColor,\n    textColor,\n    radarProps,\n    radarChartProps,\n    polarGridProps,\n    polarAngleAxisProps,\n    polarRadiusAxisProps,\n    tooltipProps,\n    withPolarGrid,\n    withPolarAngleAxis,\n    withPolarRadiusAxis,\n    withTooltip,\n    tooltipAnimationDuration,\n    children,\n    withLegend,\n    withDots,\n    dotProps,\n    activeDotProps,\n    legendProps,\n    attributes,\n    ...others\n  } = props;\n\n  const theme = useMantineTheme();\n\n  const getStyles = useStyles<RadarChartFactory>({\n    name: 'RadarChart',\n    classes,\n    props,\n    className,\n    style,\n    classNames,\n    styles,\n    unstyled,\n    attributes,\n    vars,\n    varsResolver,\n  });\n\n  const [highlightedArea, setHighlightedArea] = useState<string | number | null>(null);\n\n  const { resolvedClassNames, resolvedStyles } = useResolvedStylesApi<RadarChartFactory>({\n    classNames,\n    styles,\n    props,\n  });\n\n  const radars = series.map((item, index) => (\n    <Radar\n      key={index}\n      name={item.name}\n      dataKey={item.name}\n      stroke={getThemeColor(item.strokeColor || item.color, theme)}\n      fill={getThemeColor(item.color, theme)}\n      fillOpacity={\n        highlightedArea\n          ? highlightedArea === item.name\n            ? item.opacity || 0.4\n            : 0.05\n          : item.opacity || 0.4\n      }\n      dot={\n        withDots\n          ? {\n              fillOpacity: 1,\n              strokeOpacity: 0,\n              strokeWidth: 1,\n              fill: getThemeColor(item.color, theme),\n              stroke: getThemeColor(item.color, theme),\n              ...dotProps,\n            }\n          : false\n      }\n      activeDot={\n        withDots\n          ? {\n              fill: getThemeColor(item.color, theme),\n              stroke: getThemeColor(item.color, theme),\n              ...activeDotProps,\n            }\n          : false\n      }\n      strokeOpacity={highlightedArea ? (highlightedArea === item.name ? 1 : 0.1) : 1}\n      isAnimationActive={false}\n      {...(typeof radarProps === 'function' ? radarProps(item) : radarProps)}\n    />\n  ));\n\n  return (\n    <Box {...getStyles('root')} {...others}>\n      <ResponsiveContainer {...getStyles('container')}>\n        <ReChartsRadarChart data={data} {...radarChartProps}>\n          {withPolarGrid && <PolarGrid stroke=\"var(--chart-grid-color)\" {...polarGridProps} />}\n          {withPolarAngleAxis && <PolarAngleAxis dataKey={dataKey} {...polarAngleAxisProps} />}\n          {withPolarRadiusAxis && (\n            <PolarRadiusAxis stroke=\"var(--chart-grid-color)\" {...polarRadiusAxisProps} />\n          )}\n          {withTooltip && (\n            <Tooltip\n              animationDuration={tooltipAnimationDuration}\n              isAnimationActive={tooltipAnimationDuration !== 0}\n              cursor={{\n                stroke: 'var(--chart-grid-color)',\n                strokeWidth: 1,\n              }}\n              content={({ label, payload, labelFormatter }) => (\n                <ChartTooltip\n                  label={labelFormatter && payload ? labelFormatter(label, payload) : label}\n                  payload={payload}\n                  classNames={resolvedClassNames}\n                  styles={resolvedStyles}\n                  series={series}\n                  attributes={attributes}\n                />\n              )}\n              {...tooltipProps}\n            />\n          )}\n          {radars}\n          {withLegend && (\n            <Legend\n              verticalAlign=\"bottom\"\n              content={(payload) => (\n                <ChartLegend\n                  payload={payload.payload}\n                  onHighlight={setHighlightedArea}\n                  legendPosition={legendProps?.verticalAlign || 'bottom'}\n                  classNames={resolvedClassNames}\n                  styles={resolvedStyles}\n                  series={series}\n                  centered\n                  attributes={attributes}\n                />\n              )}\n              {...legendProps}\n            />\n          )}\n\n          {children}\n        </ReChartsRadarChart>\n      </ResponsiveContainer>\n    </Box>\n  );\n});\n\nRadarChart.displayName = '@mantine/charts/RadarChart';\nRadarChart.classes = classes;\nRadarChart.varsResolver = varsResolver;\n\nexport namespace RadarChart {\n  export type Props = RadarChartProps;\n  export type StylesNames = RadarChartStylesNames;\n  export type CssVariables = RadarChartCssVariables;\n  export type Factory = RadarChartFactory;\n  export type Series = RadarChartSeries;\n}\n"],"mappings":"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"}
+{"version":3,"file":"RadarChart.cjs","names":["Radar","Box","ResponsiveContainer","ReChartsRadarChart","PolarGrid","PolarAngleAxis","PolarRadiusAxis","Tooltip","ChartTooltip","Legend","ChartLegend","classes"],"sources":["../../src/RadarChart/RadarChart.tsx"],"sourcesContent":["import { useState } from 'react';\nimport {\n  Legend,\n  LegendProps,\n  PolarAngleAxis,\n  PolarAngleAxisProps,\n  PolarGrid,\n  PolarGridProps,\n  PolarRadiusAxis,\n  PolarRadiusAxisProps,\n  Radar,\n  RadarProps,\n  RadarChart as ReChartsRadarChart,\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  StylesApiProps,\n  useMantineTheme,\n  useProps,\n  useResolvedStylesApi,\n  useStyles,\n} from '@mantine/core';\nimport { ChartLegend, ChartLegendStylesNames } from '../ChartLegend';\nimport { ChartTooltip, ChartTooltipStylesNames } from '../ChartTooltip';\nimport { MantineChartDotProps } from '../types';\nimport classes from './RadarChart.module.css';\n\nexport interface RadarChartSeries {\n  name: string;\n  color: MantineColor;\n  strokeColor?: MantineColor;\n  opacity?: number;\n  label?: string;\n}\n\nexport type RadarChartStylesNames =\n  | 'root'\n  | 'container'\n  | ChartTooltipStylesNames\n  | ChartLegendStylesNames;\nexport type RadarChartCssVariables = {\n  root: '--chart-grid-color' | '--chart-text-color';\n};\n\nexport interface RadarChartProps\n  extends BoxProps, StylesApiProps<RadarChartFactory>, ElementProps<'div'> {\n  /** Data used in the chart */\n  data: Record<string, any>[];\n\n  /** Determines which data should be consumed from the `data` array. */\n  series: RadarChartSeries[];\n\n  /** Key of the `data` object for axis values */\n  dataKey: string;\n\n  /** Controls color of the grid lines. By default, color depends on the color scheme. */\n  gridColor?: MantineColor;\n\n  /** Controls color of all text elements. By default, color depends on the color scheme. */\n  textColor?: MantineColor;\n\n  /** Determines whether PolarGrid component should be displayed @default true. */\n  withPolarGrid?: boolean;\n\n  /** Determines whether PolarAngleAxis component should be displayed @default true */\n  withPolarAngleAxis?: boolean;\n\n  /** Determines whether PolarRadiusAxisProps component should be displayed @default false */\n  withPolarRadiusAxis?: boolean;\n\n  /** Determines whether Tooltip component should be displayed @default false */\n  withTooltip?: boolean;\n\n  /** Props passed down to recharts Radar component */\n  radarProps?:\n    | ((series: RadarChartSeries) => Partial<Omit<RadarProps, 'ref'>>)\n    | Partial<Omit<RadarProps, 'ref'>>;\n\n  /** Props passed down to recharts RadarChart component */\n  radarChartProps?: React.ComponentProps<typeof ReChartsRadarChart>;\n\n  /** Props passed down to recharts PolarGrid component */\n  polarGridProps?: Omit<PolarGridProps, 'ref'>;\n\n  /** Props passed down to recharts PolarAngleAxis component */\n  polarAngleAxisProps?: Omit<PolarAngleAxisProps, 'ref'>;\n\n  /** Props passed down to recharts PolarRadiusAxis component */\n  polarRadiusAxisProps?: Omit<PolarRadiusAxisProps, 'ref'>;\n\n  /** Props passed down to recharts Legend component */\n  legendProps?: Omit<LegendProps, 'ref'>;\n\n  /** Props passed down to recharts Tooltip component */\n  tooltipProps?: Omit<TooltipProps<any, any>, 'ref'>;\n\n  /** Tooltip position animation duration in ms @default 0 */\n  tooltipAnimationDuration?: number;\n\n  /** Determines whether the legend should be displayed @default false */\n  withLegend?: boolean;\n\n  /** Determines whether dots should be displayed @default false */\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  /** Additional components that are rendered inside recharts `RadarChart` component */\n  children?: React.ReactNode;\n\n  /** Determines whether the chart should be keyboard-navigable with the recharts accessibility layer, `true` by default */\n  accessibilityLayer?: boolean;\n}\n\nexport type RadarChartFactory = Factory<{\n  props: RadarChartProps;\n  ref: HTMLDivElement;\n  stylesNames: RadarChartStylesNames;\n  vars: RadarChartCssVariables;\n}>;\n\nconst defaultProps = {\n  withPolarGrid: true,\n  withPolarAngleAxis: true,\n  withPolarRadiusAxis: false,\n  withTooltip: false,\n  withDots: false,\n  tooltipAnimationDuration: 0,\n  accessibilityLayer: true,\n} satisfies Partial<RadarChartProps>;\n\nconst varsResolver = createVarsResolver<RadarChartFactory>((theme, { gridColor, textColor }) => ({\n  root: {\n    '--chart-grid-color': gridColor ? getThemeColor(gridColor, theme) : undefined,\n    '--chart-text-color': textColor ? getThemeColor(textColor, theme) : undefined,\n  },\n}));\n\nexport const RadarChart = factory<RadarChartFactory>((_props) => {\n  const props = useProps('RadarChart', defaultProps, _props);\n  const {\n    classNames,\n    className,\n    style,\n    styles,\n    unstyled,\n    vars,\n    data,\n    series,\n    dataKey,\n    gridColor,\n    textColor,\n    radarProps,\n    radarChartProps,\n    polarGridProps,\n    polarAngleAxisProps,\n    polarRadiusAxisProps,\n    tooltipProps,\n    withPolarGrid,\n    withPolarAngleAxis,\n    withPolarRadiusAxis,\n    withTooltip,\n    tooltipAnimationDuration,\n    children,\n    withLegend,\n    withDots,\n    dotProps,\n    activeDotProps,\n    legendProps,\n    attributes,\n    accessibilityLayer,\n    ...others\n  } = props;\n\n  const theme = useMantineTheme();\n\n  const getStyles = useStyles<RadarChartFactory>({\n    name: 'RadarChart',\n    classes,\n    props,\n    className,\n    style,\n    classNames,\n    styles,\n    unstyled,\n    attributes,\n    vars,\n    varsResolver,\n  });\n\n  const [highlightedArea, setHighlightedArea] = useState<string | number | null>(null);\n\n  const { resolvedClassNames, resolvedStyles } = useResolvedStylesApi<RadarChartFactory>({\n    classNames,\n    styles,\n    props,\n  });\n\n  const radars = series.map((item, index) => (\n    <Radar\n      key={index}\n      name={item.name}\n      dataKey={item.name}\n      stroke={getThemeColor(item.strokeColor || item.color, theme)}\n      fill={getThemeColor(item.color, theme)}\n      fillOpacity={\n        highlightedArea\n          ? highlightedArea === item.name\n            ? item.opacity || 0.4\n            : 0.05\n          : item.opacity || 0.4\n      }\n      dot={\n        withDots\n          ? {\n              fillOpacity: 1,\n              strokeOpacity: 0,\n              strokeWidth: 1,\n              fill: getThemeColor(item.color, theme),\n              stroke: getThemeColor(item.color, theme),\n              ...dotProps,\n            }\n          : false\n      }\n      activeDot={\n        withDots\n          ? {\n              fill: getThemeColor(item.color, theme),\n              stroke: getThemeColor(item.color, theme),\n              ...activeDotProps,\n            }\n          : false\n      }\n      strokeOpacity={highlightedArea ? (highlightedArea === item.name ? 1 : 0.1) : 1}\n      isAnimationActive={false}\n      {...(typeof radarProps === 'function' ? radarProps(item) : radarProps)}\n    />\n  ));\n\n  return (\n    <Box {...getStyles('root')} {...others}>\n      <ResponsiveContainer {...getStyles('container')}>\n        <ReChartsRadarChart\n          data={data}\n          accessibilityLayer={accessibilityLayer}\n          {...radarChartProps}\n        >\n          {withPolarGrid && <PolarGrid stroke=\"var(--chart-grid-color)\" {...polarGridProps} />}\n          {withPolarAngleAxis && <PolarAngleAxis dataKey={dataKey} {...polarAngleAxisProps} />}\n          {withPolarRadiusAxis && (\n            <PolarRadiusAxis stroke=\"var(--chart-grid-color)\" {...polarRadiusAxisProps} />\n          )}\n          {withTooltip && (\n            <Tooltip\n              animationDuration={tooltipAnimationDuration}\n              isAnimationActive={tooltipAnimationDuration !== 0}\n              cursor={{\n                stroke: 'var(--chart-grid-color)',\n                strokeWidth: 1,\n              }}\n              content={({ label, payload, labelFormatter }) => (\n                <ChartTooltip\n                  label={labelFormatter && payload ? labelFormatter(label, payload) : label}\n                  payload={payload}\n                  classNames={resolvedClassNames}\n                  styles={resolvedStyles}\n                  series={series}\n                  attributes={attributes}\n                />\n              )}\n              {...tooltipProps}\n            />\n          )}\n          {radars}\n          {withLegend && (\n            <Legend\n              verticalAlign=\"bottom\"\n              content={(payload) => (\n                <ChartLegend\n                  payload={payload.payload}\n                  onHighlight={setHighlightedArea}\n                  legendPosition={legendProps?.verticalAlign || 'bottom'}\n                  classNames={resolvedClassNames}\n                  styles={resolvedStyles}\n                  series={series}\n                  centered\n                  attributes={attributes}\n                />\n              )}\n              {...legendProps}\n            />\n          )}\n\n          {children}\n        </ReChartsRadarChart>\n      </ResponsiveContainer>\n    </Box>\n  );\n});\n\nRadarChart.displayName = '@mantine/charts/RadarChart';\nRadarChart.classes = classes;\nRadarChart.varsResolver = varsResolver;\n\nexport namespace RadarChart {\n  export type Props = RadarChartProps;\n  export type StylesNames = RadarChartStylesNames;\n  export type CssVariables = RadarChartCssVariables;\n  export type Factory = RadarChartFactory;\n  export type Series = RadarChartSeries;\n}\n"],"mappings":"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"}

package/cjs/RadarChart/RadarChart.module.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"RadarChart.module.cjs","names":[],"sources":["../../src/RadarChart/RadarChart.module.css"],"sourcesContent":[".root {\n  @mixin where-light {\n    --chart-grid-color: rgba(173, 181, 189, 0.6);\n    --chart-text-color: var(--mantine-color-gray-7);\n  }\n\n  @mixin where-dark {\n    --chart-grid-color: rgba(105, 105, 105, 0.6);\n    --chart-text-color: var(--mantine-color-dark-1);\n  }\n\n  & :where(text) {\n    font-size: var(--mantine-font-size-xs);\n    fill: var(--chart-text-color, var(--mantine-color-dimmed));\n    user-select: none;\n  }\n\n  :where(svg) {\n    outline: 0;\n  }\n}\n\n.container {\n  height: 100%;\n  width: 100%;\n}\n"],"mappings":""}
+{"version":3,"file":"RadarChart.module.cjs","names":[],"sources":["../../src/RadarChart/RadarChart.module.css"],"sourcesContent":[".root {\n  @mixin where-light {\n    --chart-grid-color: rgba(173, 181, 189, 0.6);\n    --chart-text-color: var(--mantine-color-gray-7);\n  }\n\n  @mixin where-dark {\n    --chart-grid-color: rgba(105, 105, 105, 0.6);\n    --chart-text-color: var(--mantine-color-dark-1);\n  }\n\n  & :where(text) {\n    font-size: var(--mantine-font-size-xs);\n    fill: var(--chart-text-color, var(--mantine-color-dimmed));\n    user-select: none;\n  }\n\n  :where(svg),\n  :where(svg *) {\n    outline: 0;\n  }\n\n  svg:focus-visible {\n    outline: 2px solid var(--mantine-primary-color-filled);\n    outline-offset: 2px;\n  }\n}\n\n.container {\n  height: 100%;\n  width: 100%;\n}\n"],"mappings":""}

package/cjs/RadialBarChart/RadialBarChart.cjs

@@ -3,20 +3,21 @@ const require_ChartLegend = require("../ChartLegend/ChartLegend.cjs");
 const require_RadialBarChart_module = require("./RadialBarChart.module.cjs");
 let _mantine_core = require("@mantine/core");
 let react_jsx_runtime = require("react/jsx-runtime");
-let react = require("react");
 let recharts = require("recharts");
+let react = require("react");
 //#region packages/@mantine/charts/src/RadialBarChart/RadialBarChart.tsx
 const defaultProps = {
 	barSize: 20,
 	startAngle: 90,
 	endAngle: -270,
 	withBackground: true,
-	withTooltip: true
+	withTooltip: true,
+	accessibilityLayer: true
 };
 const varsResolver = (0, _mantine_core.createVarsResolver)((theme, { emptyBackgroundColor }) => ({ root: { "--chart-empty-background": emptyBackgroundColor ? (0, _mantine_core.getThemeColor)(emptyBackgroundColor, theme) : void 0 } }));
 const RadialBarChart = (0, _mantine_core.factory)((_props) => {
 	const props = (0, _mantine_core.useProps)("RadialBarChart", defaultProps, _props);
-	const { classNames, className, style, styles, unstyled, vars, data, barSize, withBackground, dataKey, radialBarProps, radialBarChartProps, withLabels, withLegend, legendProps, withTooltip, tooltipProps, startAngle, endAngle, attributes, ...others } = props;
+	const { classNames, className, style, styles, unstyled, vars, data, barSize, withBackground, dataKey, radialBarProps, radialBarChartProps, withLabels, withLegend, legendProps, withTooltip, tooltipProps, startAngle, endAngle, attributes, accessibilityLayer, ...others } = props;
 	const [highlightedIndex, setHighlightedIndex] = (0, react.useState)(null);
 	const getStyles = (0, _mantine_core.useStyles)({
 		name: "RadialBarChart",
@@ -64,6 +65,7 @@ const RadialBarChart = (0, _mantine_core.factory)((_props) => {
 			startAngle,
 			endAngle,
 			data: dataWithResolvedColor,
+			accessibilityLayer,
 			...radialBarChartProps,
 			children: [
 				/* @__PURE__ */ (0, react_jsx_runtime.jsx)(recharts.RadialBar, {

package/cjs/RadialBarChart/RadialBarChart.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"RadialBarChart.cjs","names":["Box","ResponsiveContainer","ReChartsRadialBarChart","RadialBar","Legend","ChartLegend","Tooltip","Paper","Group","ColorSwatch","classes"],"sources":["../../src/RadialBarChart/RadialBarChart.tsx"],"sourcesContent":["import { useState } from 'react';\nimport {\n  Legend,\n  LegendProps,\n  RadialBar,\n  RadialBarProps,\n  RadialBarChart as ReChartsRadialBarChart,\n  ResponsiveContainer,\n  Tooltip,\n  TooltipProps,\n} from 'recharts';\nimport {\n  Box,\n  BoxProps,\n  ColorSwatch,\n  createVarsResolver,\n  ElementProps,\n  factory,\n  Factory,\n  getThemeColor,\n  Group,\n  Paper,\n  StylesApiProps,\n  useMantineTheme,\n  useProps,\n  useResolvedStylesApi,\n  useStyles,\n} from '@mantine/core';\nimport { ChartLegend, ChartLegendStylesNames } from '../ChartLegend';\nimport classes from './RadialBarChart.module.css';\n\nexport type RadialBarChartStylesNames = 'root' | 'tooltip' | ChartLegendStylesNames;\nexport type RadialBarChartCssVariables = {\n  root: '--chart-empty-background';\n};\n\nexport interface RadialBarChartProps\n  extends BoxProps, StylesApiProps<RadialBarChartFactory>, ElementProps<'div'> {\n  /** Chart data */\n  data: Record<string, any>[];\n\n  /** Key from data object to use as data key */\n  dataKey: string;\n\n  /** Size of bars in px, `20` by default */\n  barSize?: number;\n\n  /** Determines whether empty bars area should be visible @default true */\n  withBackground?: boolean;\n\n  /** Determines whether labels should be displayed @default false */\n  withLabels?: boolean;\n\n  /** Determines whether the legend should be displayed @default false */\n  withLegend?: boolean;\n\n  /** Determines whether the tooltip should be displayed when one of the bars is hovered @default true */\n  withTooltip?: boolean;\n\n  /** Color of the empty background, by default depends on the color scheme */\n  emptyBackgroundColor?: string;\n\n  /** Angle at which chart starts @default 90 */\n  startAngle?: number;\n\n  /** Angle at which chart ends @default -270 */\n  endAngle?: number;\n\n  /** Props passed down to recharts RadialBar component */\n  radialBarProps?: Omit<RadialBarProps, 'ref'>;\n\n  /** Props passed down to recharts RadarChartChart component */\n  radialBarChartProps?: React.ComponentProps<typeof ReChartsRadialBarChart>;\n\n  /** Props passed down to recharts Legend component */\n  legendProps?: Omit<LegendProps, 'ref'>;\n\n  /** Props passed down to `Tooltip` recharts component */\n  tooltipProps?: Omit<TooltipProps<any, any>, 'ref'>;\n}\n\nexport type RadialBarChartFactory = Factory<{\n  props: RadialBarChartProps;\n  ref: HTMLDivElement;\n  stylesNames: RadialBarChartStylesNames;\n  vars: RadialBarChartCssVariables;\n}>;\n\nconst defaultProps = {\n  barSize: 20,\n  startAngle: 90,\n  endAngle: -270,\n  withBackground: true,\n  withTooltip: true,\n} satisfies Partial<RadialBarChartProps>;\n\nconst varsResolver = createVarsResolver<RadialBarChartFactory>(\n  (theme, { emptyBackgroundColor }) => ({\n    root: {\n      '--chart-empty-background': emptyBackgroundColor\n        ? getThemeColor(emptyBackgroundColor, theme)\n        : undefined,\n    },\n  })\n);\n\nexport const RadialBarChart = factory<RadialBarChartFactory>((_props) => {\n  const props = useProps('RadialBarChart', defaultProps, _props);\n  const {\n    classNames,\n    className,\n    style,\n    styles,\n    unstyled,\n    vars,\n    data,\n    barSize,\n    withBackground,\n    dataKey,\n    radialBarProps,\n    radialBarChartProps,\n    withLabels,\n    withLegend,\n    legendProps,\n    withTooltip,\n    tooltipProps,\n    startAngle,\n    endAngle,\n    attributes,\n    ...others\n  } = props;\n  const [highlightedIndex, setHighlightedIndex] = useState<number | null>(null);\n\n  const getStyles = useStyles<RadialBarChartFactory>({\n    name: 'RadialBarChart',\n    classes,\n    props,\n    className,\n    style,\n    classNames,\n    styles,\n    unstyled,\n    attributes,\n    vars,\n    varsResolver,\n  });\n\n  const theme = useMantineTheme();\n  const dataWithResolvedColor = data.map(({ color, ...item }, index) => {\n    const resolvedColor = getThemeColor(color, theme);\n\n    return {\n      ...item,\n      __segmentIndex: index,\n      fill: resolvedColor,\n      fillOpacity:\n        highlightedIndex !== null\n          ? highlightedIndex === index\n            ? item.opacity || 1\n            : 0.05\n          : item.opacity || 1,\n    };\n  });\n\n  const { resolvedClassNames, resolvedStyles } = useResolvedStylesApi<RadialBarChartFactory>({\n    classNames,\n    styles,\n    props,\n  });\n\n  return (\n    <Box {...getStyles('root')} {...others}>\n      <ResponsiveContainer>\n        <ReChartsRadialBarChart\n          margin={{ top: 0, bottom: 0, left: 0, right: 0 }}\n          innerRadius=\"10%\"\n          outerRadius=\"100%\"\n          cx=\"50%\"\n          cy=\"50%\"\n          barSize={barSize}\n          startAngle={startAngle}\n          endAngle={endAngle}\n          data={dataWithResolvedColor}\n          {...radialBarChartProps}\n        >\n          <RadialBar\n            label={\n              withLabels\n                ? {\n                    position: 'insideStart',\n                    fill: 'var(--mantine-color-white)',\n                    fontSize: 12,\n                  }\n                : undefined\n            }\n            background={withBackground ? { fill: 'var(--chart-empty-background)' } : undefined}\n            dataKey={dataKey}\n            isAnimationActive={false}\n            {...radialBarProps}\n          />\n\n          {withLegend && (\n            <Legend\n              verticalAlign=\"bottom\"\n              content={(payload) => (\n                <ChartLegend\n                  payload={payload.payload?.map((item) => ({\n                    ...item,\n                    dataKey: (item.payload as any)?.name,\n                    highlightKey: (item.payload as any)?.__segmentIndex,\n                  }))}\n                  onHighlight={(value) =>\n                    setHighlightedIndex(typeof value === 'number' ? value : null)\n                  }\n                  legendPosition={legendProps?.verticalAlign || 'bottom'}\n                  classNames={resolvedClassNames}\n                  styles={resolvedStyles}\n                  centered\n                  attributes={attributes}\n                />\n              )}\n              {...legendProps}\n            />\n          )}\n\n          {withTooltip && (\n            <Tooltip\n              animationDuration={0}\n              isAnimationActive={false}\n              cursor={{ stroke: 'var(--chart-cursor-color)' }}\n              content={({ payload }) => (\n                <Paper {...getStyles('tooltip')}>\n                  <Group gap=\"sm\">\n                    <ColorSwatch color={payload?.[0]?.payload.fill} size={12} withShadow={false} />\n                    <span>{payload?.[0]?.payload.name}</span>\n                  </Group>\n\n                  <span>{payload?.[0]?.payload[dataKey]}</span>\n                </Paper>\n              )}\n              {...tooltipProps}\n            />\n          )}\n        </ReChartsRadialBarChart>\n      </ResponsiveContainer>\n    </Box>\n  );\n});\n\nRadialBarChart.displayName = '@mantine/core/RadialBarChart';\nRadialBarChart.classes = classes;\nRadialBarChart.varsResolver = varsResolver;\n\nexport namespace RadialBarChart {\n  export type Props = RadialBarChartProps;\n  export type StylesNames = RadialBarChartStylesNames;\n  export type CssVariables = RadialBarChartCssVariables;\n  export type Factory = RadialBarChartFactory;\n}\n"],"mappings":"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"}
+{"version":3,"file":"RadialBarChart.cjs","names":["Box","ResponsiveContainer","ReChartsRadialBarChart","RadialBar","Legend","ChartLegend","Tooltip","Paper","Group","ColorSwatch","classes"],"sources":["../../src/RadialBarChart/RadialBarChart.tsx"],"sourcesContent":["import { useState } from 'react';\nimport {\n  Legend,\n  LegendProps,\n  RadialBar,\n  RadialBarProps,\n  RadialBarChart as ReChartsRadialBarChart,\n  ResponsiveContainer,\n  Tooltip,\n  TooltipProps,\n} from 'recharts';\nimport {\n  Box,\n  BoxProps,\n  ColorSwatch,\n  createVarsResolver,\n  ElementProps,\n  factory,\n  Factory,\n  getThemeColor,\n  Group,\n  Paper,\n  StylesApiProps,\n  useMantineTheme,\n  useProps,\n  useResolvedStylesApi,\n  useStyles,\n} from '@mantine/core';\nimport { ChartLegend, ChartLegendStylesNames } from '../ChartLegend';\nimport classes from './RadialBarChart.module.css';\n\nexport type RadialBarChartStylesNames = 'root' | 'tooltip' | ChartLegendStylesNames;\nexport type RadialBarChartCssVariables = {\n  root: '--chart-empty-background';\n};\n\nexport interface RadialBarChartProps\n  extends BoxProps, StylesApiProps<RadialBarChartFactory>, ElementProps<'div'> {\n  /** Chart data */\n  data: Record<string, any>[];\n\n  /** Key from data object to use as data key */\n  dataKey: string;\n\n  /** Size of bars in px, `20` by default */\n  barSize?: number;\n\n  /** Determines whether empty bars area should be visible @default true */\n  withBackground?: boolean;\n\n  /** Determines whether labels should be displayed @default false */\n  withLabels?: boolean;\n\n  /** Determines whether the legend should be displayed @default false */\n  withLegend?: boolean;\n\n  /** Determines whether the tooltip should be displayed when one of the bars is hovered @default true */\n  withTooltip?: boolean;\n\n  /** Color of the empty background, by default depends on the color scheme */\n  emptyBackgroundColor?: string;\n\n  /** Angle at which chart starts @default 90 */\n  startAngle?: number;\n\n  /** Angle at which chart ends @default -270 */\n  endAngle?: number;\n\n  /** Props passed down to recharts RadialBar component */\n  radialBarProps?: Omit<RadialBarProps, 'ref'>;\n\n  /** Props passed down to recharts RadarChartChart component */\n  radialBarChartProps?: React.ComponentProps<typeof ReChartsRadialBarChart>;\n\n  /** Props passed down to recharts Legend component */\n  legendProps?: Omit<LegendProps, 'ref'>;\n\n  /** Props passed down to `Tooltip` recharts component */\n  tooltipProps?: Omit<TooltipProps<any, any>, 'ref'>;\n\n  /** Determines whether the chart should be keyboard-navigable with the recharts accessibility layer, `true` by default */\n  accessibilityLayer?: boolean;\n}\n\nexport type RadialBarChartFactory = Factory<{\n  props: RadialBarChartProps;\n  ref: HTMLDivElement;\n  stylesNames: RadialBarChartStylesNames;\n  vars: RadialBarChartCssVariables;\n}>;\n\nconst defaultProps = {\n  barSize: 20,\n  startAngle: 90,\n  endAngle: -270,\n  withBackground: true,\n  withTooltip: true,\n  accessibilityLayer: true,\n} satisfies Partial<RadialBarChartProps>;\n\nconst varsResolver = createVarsResolver<RadialBarChartFactory>(\n  (theme, { emptyBackgroundColor }) => ({\n    root: {\n      '--chart-empty-background': emptyBackgroundColor\n        ? getThemeColor(emptyBackgroundColor, theme)\n        : undefined,\n    },\n  })\n);\n\nexport const RadialBarChart = factory<RadialBarChartFactory>((_props) => {\n  const props = useProps('RadialBarChart', defaultProps, _props);\n  const {\n    classNames,\n    className,\n    style,\n    styles,\n    unstyled,\n    vars,\n    data,\n    barSize,\n    withBackground,\n    dataKey,\n    radialBarProps,\n    radialBarChartProps,\n    withLabels,\n    withLegend,\n    legendProps,\n    withTooltip,\n    tooltipProps,\n    startAngle,\n    endAngle,\n    attributes,\n    accessibilityLayer,\n    ...others\n  } = props;\n  const [highlightedIndex, setHighlightedIndex] = useState<number | null>(null);\n\n  const getStyles = useStyles<RadialBarChartFactory>({\n    name: 'RadialBarChart',\n    classes,\n    props,\n    className,\n    style,\n    classNames,\n    styles,\n    unstyled,\n    attributes,\n    vars,\n    varsResolver,\n  });\n\n  const theme = useMantineTheme();\n  const dataWithResolvedColor = data.map(({ color, ...item }, index) => {\n    const resolvedColor = getThemeColor(color, theme);\n\n    return {\n      ...item,\n      __segmentIndex: index,\n      fill: resolvedColor,\n      fillOpacity:\n        highlightedIndex !== null\n          ? highlightedIndex === index\n            ? item.opacity || 1\n            : 0.05\n          : item.opacity || 1,\n    };\n  });\n\n  const { resolvedClassNames, resolvedStyles } = useResolvedStylesApi<RadialBarChartFactory>({\n    classNames,\n    styles,\n    props,\n  });\n\n  return (\n    <Box {...getStyles('root')} {...others}>\n      <ResponsiveContainer>\n        <ReChartsRadialBarChart\n          margin={{ top: 0, bottom: 0, left: 0, right: 0 }}\n          innerRadius=\"10%\"\n          outerRadius=\"100%\"\n          cx=\"50%\"\n          cy=\"50%\"\n          barSize={barSize}\n          startAngle={startAngle}\n          endAngle={endAngle}\n          data={dataWithResolvedColor}\n          accessibilityLayer={accessibilityLayer}\n          {...radialBarChartProps}\n        >\n          <RadialBar\n            label={\n              withLabels\n                ? {\n                    position: 'insideStart',\n                    fill: 'var(--mantine-color-white)',\n                    fontSize: 12,\n                  }\n                : undefined\n            }\n            background={withBackground ? { fill: 'var(--chart-empty-background)' } : undefined}\n            dataKey={dataKey}\n            isAnimationActive={false}\n            {...radialBarProps}\n          />\n\n          {withLegend && (\n            <Legend\n              verticalAlign=\"bottom\"\n              content={(payload) => (\n                <ChartLegend\n                  payload={payload.payload?.map((item) => ({\n                    ...item,\n                    dataKey: (item.payload as any)?.name,\n                    highlightKey: (item.payload as any)?.__segmentIndex,\n                  }))}\n                  onHighlight={(value) =>\n                    setHighlightedIndex(typeof value === 'number' ? value : null)\n                  }\n                  legendPosition={legendProps?.verticalAlign || 'bottom'}\n                  classNames={resolvedClassNames}\n                  styles={resolvedStyles}\n                  centered\n                  attributes={attributes}\n                />\n              )}\n              {...legendProps}\n            />\n          )}\n\n          {withTooltip && (\n            <Tooltip\n              animationDuration={0}\n              isAnimationActive={false}\n              cursor={{ stroke: 'var(--chart-cursor-color)' }}\n              content={({ payload }) => (\n                <Paper {...getStyles('tooltip')}>\n                  <Group gap=\"sm\">\n                    <ColorSwatch color={payload?.[0]?.payload.fill} size={12} withShadow={false} />\n                    <span>{payload?.[0]?.payload.name}</span>\n                  </Group>\n\n                  <span>{payload?.[0]?.payload[dataKey]}</span>\n                </Paper>\n              )}\n              {...tooltipProps}\n            />\n          )}\n        </ReChartsRadialBarChart>\n      </ResponsiveContainer>\n    </Box>\n  );\n});\n\nRadialBarChart.displayName = '@mantine/core/RadialBarChart';\nRadialBarChart.classes = classes;\nRadialBarChart.varsResolver = varsResolver;\n\nexport namespace RadialBarChart {\n  export type Props = RadialBarChartProps;\n  export type StylesNames = RadialBarChartStylesNames;\n  export type CssVariables = RadialBarChartCssVariables;\n  export type Factory = RadialBarChartFactory;\n}\n"],"mappings":"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"}

package/cjs/RadialBarChart/RadialBarChart.module.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"RadialBarChart.module.cjs","names":[],"sources":["../../src/RadialBarChart/RadialBarChart.module.css"],"sourcesContent":[".root {\n  @mixin where-light {\n    --chart-empty-background: var(--mantine-color-gray-1);\n    --chart-cursor-color: var(--mantine-color-gray-4);\n  }\n\n  @mixin where-dark {\n    --chart-empty-background: var(--mantine-color-dark-6);\n    --chart-cursor-color: var(--mantine-color-dark-4);\n  }\n\n  :where(svg) {\n    outline: 0;\n  }\n}\n\n.tooltip {\n  padding: var(--mantine-spacing-md);\n  box-shadow: var(--mantine-shadow-md);\n  min-width: 200px;\n  font-size: var(--mantine-font-size-sm);\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n\n  @mixin where-light {\n    border: 1px solid var(--mantine-color-gray-2);\n  }\n\n  @mixin where-dark {\n    border: 1px solid var(--mantine-color-dark-4);\n  }\n}\n"],"mappings":""}
+{"version":3,"file":"RadialBarChart.module.cjs","names":[],"sources":["../../src/RadialBarChart/RadialBarChart.module.css"],"sourcesContent":[".root {\n  @mixin where-light {\n    --chart-empty-background: var(--mantine-color-gray-1);\n    --chart-cursor-color: var(--mantine-color-gray-4);\n  }\n\n  @mixin where-dark {\n    --chart-empty-background: var(--mantine-color-dark-6);\n    --chart-cursor-color: var(--mantine-color-dark-4);\n  }\n\n  :where(svg),\n  :where(svg *) {\n    outline: 0;\n  }\n\n  svg:focus-visible {\n    outline: 2px solid var(--mantine-primary-color-filled);\n    outline-offset: 2px;\n  }\n}\n\n.tooltip {\n  padding: var(--mantine-spacing-md);\n  box-shadow: var(--mantine-shadow-md);\n  min-width: 200px;\n  font-size: var(--mantine-font-size-sm);\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n\n  @mixin where-light {\n    border: 1px solid var(--mantine-color-gray-2);\n  }\n\n  @mixin where-dark {\n    border: 1px solid var(--mantine-color-dark-4);\n  }\n}\n"],"mappings":""}

package/cjs/SankeyChart/SankeyChart.cjs

@@ -4,9 +4,9 @@ const require_ChartTooltip = require("../ChartTooltip/ChartTooltip.cjs");
 const require_SankeyChart_module = require("./SankeyChart.module.cjs");
 let _mantine_core = require("@mantine/core");
 let react_jsx_runtime = require("react/jsx-runtime");
+let recharts = require("recharts");
 let react = require("react");
 react = require_runtime.__toESM(react);
-let recharts = require("recharts");
 //#region packages/@mantine/charts/src/SankeyChart/SankeyChart.tsx
 const defaultProps = {
 	height: 300,

package/cjs/ScatterChart/ScatterChart.cjs

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

package/cjs/ScatterChart/ScatterChart.cjs.map

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

package/cjs/Sparkline/Sparkline.cjs

@@ -3,8 +3,8 @@ const require_AreaGradient = require("../AreaChart/AreaGradient.cjs");
 const require_Sparkline_module = require("./Sparkline.module.cjs");
 let _mantine_core = require("@mantine/core");
 let react_jsx_runtime = require("react/jsx-runtime");
-let react = require("react");
 let recharts = require("recharts");
+let react = require("react");
 //#region packages/@mantine/charts/src/Sparkline/Sparkline.tsx
 const defaultProps = {
 	withGradient: true,

package/cjs/SunburstChart/SunburstChart.cjs

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

package/cjs/SunburstChart/SunburstChart.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"SunburstChart.cjs","names":["Box","ResponsiveContainer","RechartsSunburstChart","Tooltip","ChartTooltip","classes"],"sources":["../../src/SunburstChart/SunburstChart.tsx"],"sourcesContent":["import { useMemo } from 'react';\nimport {\n  ResponsiveContainer,\n  SunburstChart as RechartsSunburstChart,\n  SunburstChartProps as RechartsSunburstChartProps,\n  Tooltip,\n  TooltipProps,\n} from 'recharts';\nimport {\n  Box,\n  BoxProps,\n  createVarsResolver,\n  ElementProps,\n  factory,\n  Factory,\n  getThemeColor,\n  MantineColor,\n  MantineTheme,\n  parseThemeColor,\n  rem,\n  StylesApiProps,\n  useMantineTheme,\n  useProps,\n  useResolvedStylesApi,\n  useStyles,\n} from '@mantine/core';\nimport { ChartTooltip, ChartTooltipStylesNames } from '../ChartTooltip/ChartTooltip';\nimport classes from './SunburstChart.module.css';\n\nexport interface SunburstChartData {\n  name: string;\n  value?: number;\n  color?: MantineColor;\n  children?: SunburstChartData[];\n  [key: string]: unknown;\n}\n\nexport type SunburstChartStylesNames = 'root' | ChartTooltipStylesNames;\nexport type SunburstChartCssVariables = {\n  root: '--chart-stroke-color' | '--chart-size';\n};\n\nexport interface SunburstChartProps\n  extends BoxProps, StylesApiProps<SunburstChartFactory>, ElementProps<'div'> {\n  /** Data used to render chart */\n  data: SunburstChartData[];\n\n  /** Key in data object for the value @default 'value' */\n  dataKey?: string;\n\n  /** Determines whether the tooltip should be displayed when a node is hovered @default true */\n  withTooltip?: boolean;\n\n  /** Tooltip animation duration in ms @default 0 */\n  tooltipAnimationDuration?: number;\n\n  /** Props passed down to `Tooltip` recharts component */\n  tooltipProps?: Omit<TooltipProps<any, any>, 'ref'>;\n\n  /** Props passed down to recharts `SunburstChart` component */\n  sunburstChartProps?: Partial<Omit<RechartsSunburstChartProps, 'ref' | 'data' | 'dataKey'>>;\n\n  /** Controls color of the sectors stroke, by default depends on color scheme */\n  strokeColor?: MantineColor;\n\n  /** Controls chart width and height @default 300 */\n  size?: number;\n\n  /** Controls the radius of the inner circle at the center of the chart @default 50 */\n  innerRadius?: number;\n\n  /** Gap between sectors and rings in px @default 1 */\n  gap?: number;\n\n  /** Angle in degrees from which the chart should start @default 0 */\n  startAngle?: number;\n\n  /** Angle in degrees at which the chart should end @default 360 */\n  endAngle?: number;\n\n  /** Determines whether value labels are displayed inside each sector @default false */\n  withLabels?: boolean;\n\n  /** A function to format values inside the tooltip and labels */\n  valueFormatter?: (value: number) => string;\n\n  /** Additional elements rendered inside `SunburstChart` component */\n  children?: React.ReactNode;\n}\n\nexport type SunburstChartFactory = Factory<{\n  props: SunburstChartProps;\n  ref: HTMLDivElement;\n  stylesNames: SunburstChartStylesNames;\n  vars: SunburstChartCssVariables;\n}>;\n\nconst defaultProps = {\n  dataKey: 'value',\n  withTooltip: true,\n  tooltipAnimationDuration: 0,\n  size: 300,\n  innerRadius: 50,\n  gap: 1,\n  startAngle: 0,\n  endAngle: 360,\n} satisfies Partial<SunburstChartProps>;\n\nconst varsResolver = createVarsResolver<SunburstChartFactory>((theme, { strokeColor, size }) => ({\n  root: {\n    '--chart-stroke-color': strokeColor ? getThemeColor(strokeColor, theme) : undefined,\n    '--chart-size': rem(size),\n  },\n}));\n\nfunction resolveData(\n  data: SunburstChartData[],\n  theme: MantineTheme,\n  dataKey: string,\n  parentFill?: string\n): { resolved: any[]; total: number } {\n  let total = 0;\n\n  const resolved = data.map((item) => {\n    const resolvedColor = item.color\n      ? parseThemeColor({ color: item.color, theme }).value\n      : parentFill;\n    const fill = resolvedColor || undefined;\n\n    const result: any = {\n      ...item,\n      fill,\n    };\n\n    if (item.children) {\n      const child = resolveData(item.children, theme, dataKey, fill);\n      result.children = child.resolved;\n      if (result[dataKey] == null) {\n        result[dataKey] = child.total;\n      }\n      total += child.total;\n    } else {\n      total += Number(item[dataKey]) || 0;\n    }\n\n    return result;\n  });\n\n  return { resolved, total };\n}\n\nexport const SunburstChart = factory<SunburstChartFactory>((_props) => {\n  const props = useProps('SunburstChart', defaultProps, _props);\n  const {\n    classNames,\n    className,\n    style,\n    styles,\n    unstyled,\n    vars,\n    data,\n    dataKey,\n    withTooltip,\n    tooltipAnimationDuration,\n    tooltipProps,\n    sunburstChartProps,\n    strokeColor,\n    size,\n    innerRadius,\n    gap,\n    startAngle,\n    endAngle,\n    withLabels,\n    valueFormatter,\n    children,\n    attributes,\n    ...others\n  } = props;\n\n  const theme = useMantineTheme();\n\n  const getStyles = useStyles<SunburstChartFactory>({\n    name: 'SunburstChart',\n    classes,\n    props,\n    className,\n    style,\n    classNames,\n    styles,\n    unstyled,\n    attributes,\n    vars,\n    varsResolver,\n  });\n\n  const { resolvedClassNames, resolvedStyles } = useResolvedStylesApi<SunburstChartFactory>({\n    classNames,\n    styles,\n    props,\n  });\n\n  const rootData = useMemo(() => {\n    const { resolved, total } = resolveData(data, theme, dataKey!);\n    return {\n      name: 'root',\n      [dataKey!]: total,\n      children: resolved,\n    };\n  }, [data, theme, dataKey]);\n\n  return (\n    <Box size={size} {...getStyles('root')} {...others}>\n      <ResponsiveContainer>\n        <RechartsSunburstChart\n          data={rootData as any}\n          dataKey={dataKey as any}\n          innerRadius={innerRadius}\n          padding={gap}\n          ringPadding={0}\n          startAngle={startAngle}\n          endAngle={endAngle}\n          stroke=\"var(--chart-stroke-color, var(--mantine-color-body))\"\n          textOptions={\n            withLabels\n              ? {\n                  fontWeight: 'bold',\n                  fontSize: '.65rem',\n                  paintOrder: 'stroke fill',\n                  stroke: 'var(--chart-stroke-color, var(--mantine-color-body))',\n                  strokeWidth: 1,\n                  fill: 'var(--mantine-color-bright)',\n                  pointerEvents: 'none',\n                }\n              : { display: 'none' }\n          }\n          {...sunburstChartProps}\n        >\n          {withTooltip && (\n            <Tooltip\n              animationDuration={tooltipAnimationDuration}\n              isAnimationActive={false}\n              content={({ payload }) => (\n                <ChartTooltip\n                  payload={\n                    payload?.map((item) => ({\n                      name: item.name as string,\n                      value: item.value as number,\n                      color: (item.payload as any)?.fill || 'var(--mantine-color-blue-6)',\n                    })) || []\n                  }\n                  classNames={resolvedClassNames}\n                  styles={resolvedStyles}\n                  type=\"radial\"\n                  valueFormatter={valueFormatter}\n                  attributes={attributes}\n                />\n              )}\n              {...tooltipProps}\n            />\n          )}\n\n          {children}\n        </RechartsSunburstChart>\n      </ResponsiveContainer>\n    </Box>\n  );\n});\n\nSunburstChart.displayName = '@mantine/charts/SunburstChart';\nSunburstChart.classes = classes;\nSunburstChart.varsResolver = varsResolver;\n"],"mappings":"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"}

package/cjs/SunburstChart/SunburstChart.module.cjs

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

package/cjs/SunburstChart/SunburstChart.module.cjs.map

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

package/cjs/Treemap/Treemap.cjs

@@ -4,9 +4,9 @@ const require_ChartTooltip = require("../ChartTooltip/ChartTooltip.cjs");
 const require_Treemap_module = require("./Treemap.module.cjs");
 let _mantine_core = require("@mantine/core");
 let react_jsx_runtime = require("react/jsx-runtime");
+let recharts = require("recharts");
 let react = require("react");
 react = require_runtime.__toESM(react);
-let recharts = require("recharts");
 //#region packages/@mantine/charts/src/Treemap/Treemap.tsx
 const defaultProps = {
 	dataKey: "value",

package/cjs/grid-chart.module.cjs.map

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

package/cjs/index.cjs

@@ -1,6 +1,7 @@
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const require_ChartTooltip = require("./ChartTooltip/ChartTooltip.cjs");
 const require_ChartLegend = require("./ChartLegend/ChartLegend.cjs");
+const require_ChartBrush = require("./ChartBrush/ChartBrush.cjs");
 const require_AreaGradient = require("./AreaChart/AreaGradient.cjs");
 const require_get_split_offset = require("./AreaChart/get-split-offset.cjs");
 const require_AreaChart = require("./AreaChart/AreaChart.cjs");
@@ -19,11 +20,15 @@ const require_Heatmap = require("./Heatmap/Heatmap.cjs");
 const require_BarsList = require("./BarsList/BarsList.cjs");
 const require_Treemap = require("./Treemap/Treemap.cjs");
 const require_SankeyChart = require("./SankeyChart/SankeyChart.cjs");
+const require_SunburstChart = require("./SunburstChart/SunburstChart.cjs");
+const require_BulletChart = require("./BulletChart/BulletChart.cjs");
 exports.AreaChart = require_AreaChart.AreaChart;
 exports.AreaGradient = require_AreaGradient.AreaGradient;
 exports.BarChart = require_BarChart.BarChart;
 exports.BarsList = require_BarsList.BarsList;
 exports.BubbleChart = require_BubbleChart.BubbleChart;
+exports.BulletChart = require_BulletChart.BulletChart;
+exports.ChartBrush = require_ChartBrush.ChartBrush;
 exports.ChartLegend = require_ChartLegend.ChartLegend;
 exports.ChartTooltip = require_ChartTooltip.ChartTooltip;
 exports.CompositeChart = require_CompositeChart.CompositeChart;
@@ -37,6 +42,7 @@ exports.RadialBarChart = require_RadialBarChart.RadialBarChart;
 exports.SankeyChart = require_SankeyChart.SankeyChart;
 exports.ScatterChart = require_ScatterChart.ScatterChart;
 exports.Sparkline = require_Sparkline.Sparkline;
+exports.SunburstChart = require_SunburstChart.SunburstChart;
 exports.Treemap = require_Treemap.Treemap;
 exports.getFilteredChartLegendPayload = require_ChartLegend.getFilteredChartLegendPayload;
 exports.getFilteredChartTooltipPayload = require_ChartTooltip.getFilteredChartTooltipPayload;

package/esm/AreaChart/AreaChart.mjs

@@ -1,6 +1,7 @@
 "use client";
 import { ChartTooltip } from "../ChartTooltip/ChartTooltip.mjs";
 import { ChartLegend } from "../ChartLegend/ChartLegend.mjs";
+import { ChartBrush } from "../ChartBrush/ChartBrush.mjs";
 import { PointLabel } from "../PointLabel/PointLabel.mjs";
 import { AreaGradient } from "./AreaGradient.mjs";
 import { AreaSplit } from "./AreaSplit.mjs";
@@ -8,8 +9,8 @@ import { getDefaultSplitOffset } from "./get-split-offset.mjs";
 import grid_chart_module_default from "../grid-chart.module.mjs";
 import { Box, createVarsResolver, factory, getThemeColor, useMantineTheme, useProps, useResolvedStylesApi, useStyles } from "@mantine/core";
 import { jsx, jsxs } from "react/jsx-runtime";
-import { Fragment as Fragment$1, createElement, useId, useState } from "react";
 import { Area, AreaChart, CartesianGrid, Label, Legend, ReferenceLine, ResponsiveContainer, Tooltip as Tooltip$1, XAxis, YAxis } from "recharts";
+import { Fragment as Fragment$1, createElement, useId, useState } from "react";
 //#region packages/@mantine/charts/src/AreaChart/AreaChart.tsx
 function valueToPercent(value) {
 	return `${(value * 100).toFixed(0)}%`;
@@ -29,7 +30,8 @@ const defaultProps = {
 	gridAxis: "x",
 	type: "default",
 	splitColors: ["green.7", "red.7"],
-	orientation: "horizontal"
+	orientation: "horizontal",
+	accessibilityLayer: true
 };
 const varsResolver = createVarsResolver((theme, { textColor, gridColor }) => ({ root: {
 	"--chart-text-color": textColor ? getThemeColor(textColor, theme) : void 0,
@@ -37,7 +39,7 @@ const varsResolver = createVarsResolver((theme, { textColor, gridColor }) => ({
 } }));
 const AreaChart$1 = factory((_props) => {
 	const props = useProps("AreaChart", defaultProps, _props);
-	const { classNames, className, style, styles, unstyled, vars, data, series, withGradient, dataKey, withXAxis, withYAxis, curveType, gridProps, withDots, tickLine, strokeDasharray, gridAxis, unit, yAxisProps, xAxisProps, dotProps, activeDotProps, strokeWidth, tooltipAnimationDuration, type, legendProps, tooltipProps, withLegend, withTooltip, areaChartProps, fillOpacity, splitColors, splitOffset, connectNulls, onMouseLeave, orientation, referenceLines, dir, valueFormatter, children, areaProps, xAxisLabel, yAxisLabel, withRightYAxis, rightYAxisLabel, rightYAxisProps, withPointLabels, gridColor, textColor, attributes, ...others } = props;
+	const { classNames, className, style, styles, unstyled, vars, data, series, withGradient, dataKey, withXAxis, withYAxis, curveType, gridProps, withDots, tickLine, strokeDasharray, gridAxis, unit, yAxisProps, xAxisProps, dotProps, activeDotProps, strokeWidth, tooltipAnimationDuration, type, legendProps, tooltipProps, withLegend, withTooltip, areaChartProps, fillOpacity, splitColors, splitOffset, connectNulls, onMouseLeave, orientation, referenceLines, dir, valueFormatter, children, areaProps, xAxisLabel, yAxisLabel, withRightYAxis, rightYAxisLabel, rightYAxisProps, withPointLabels, gridColor, textColor, attributes, accessibilityLayer, withBrush, brushProps, ...others } = props;
 	const theme = useMantineTheme();
 	const baseId = useId();
 	const splitId = `${baseId}-split`;
@@ -178,6 +180,7 @@ const AreaChart$1 = factory((_props) => {
 					left: yAxisLabel ? 10 : void 0,
 					right: yAxisLabel ? 5 : void 0
 				},
+				accessibilityLayer,
 				...areaChartProps,
 				children: [
 					referenceLinesItems,
@@ -297,6 +300,12 @@ const AreaChart$1 = factory((_props) => {
 					}) }),
 					areas,
 					withDots && dotsAreas,
+					withBrush && /* @__PURE__ */ jsx(ChartBrush, {
+						dataKey,
+						classNames: resolvedClassNames,
+						styles: resolvedStyles,
+						...brushProps
+					}),
 					children
 				]
 			})