@persona/design-system 0.10.9 → 0.10.11

package/dist/components/Chart/index.mjs

@@ -0,0 +1,680 @@
+import { a as styled, o as useTheme, r as css } from "../../styledComponentsInterop-Cs5CCPRy.mjs";
+import { chartingColors, semanticColor } from "../../lib/semanticColor.mjs";
+import { focusOutline } from "../../mixins/focus.mjs";
+import { Hairline } from "../../variables/effect.mjs";
+import { paragraphMixins } from "../../mixins/text.mjs";
+import { chartingDark } from "../../variables/charting.mjs";
+import { c as usePDSLocale } from "../../i18n-DaOKaFc2.mjs";
+import { i as Paragraph } from "../../Text-D0vEReED.mjs";
+import { n as Stack } from "../../Stack-Bzom2BTR.mjs";
+import { BorderRadius, Color, Spacing, Typography } from "@persona/design-tokens";
+import { createContext, useCallback, useContext, useMemo, useState } from "react";
+import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
+//#region src/components/Chart/chartColors.ts
+/** @experimental */
+const CHART_PALETTE_TOKENS = {
+	qualitative: "Qualitative",
+	sequentialMono: "SequentialMono",
+	sequentialDivergent: "SequentialDivergent"
+};
+/** @experimental */
+const DEFAULT_CHART_PALETTE = "qualitative";
+/**
+* Marks a series colour override as a deliberate chart colour. It returns its argument unchanged;
+* its job is to type-check the override (Persona tokens only, never hex) and to tell the
+* `pds/semantic-color` lint rule that the `Color.*` inside is intended.
+*
+* ```ts
+* { key: 'fraud', label: 'Fraud', color: chartColor(Color.CoreRed600) }
+* { key: 'fraud', label: 'Fraud', color: chartColor({ light: Color.CoreRed600, dark: Color.CoreRed400 }) }
+* ```
+*
+* @experimental
+*/
+const chartColor = (color) => color;
+/** The ordered colours of `palette` in `tokens`. @experimental */
+const chartPaletteColors = (tokens, palette = DEFAULT_CHART_PALETTE) => tokens[CHART_PALETTE_TOKENS[palette]];
+/** Resolves an override to the single token for `mode`. @experimental */
+const resolveChartColor = (color, mode) => typeof color === "string" ? color : color[mode];
+/** `'dark'` when `theme` carries the dark charting palettes, else `'light'`. @experimental */
+const chartColorModeOf = (theme) => theme?.charting === chartingDark ? "dark" : "light";
+const warnedPaletteOverflow = /* @__PURE__ */ new Set();
+/**
+* Assigns each series a colour token, keyed by series key.
+*
+* Series without an override take the palette colour at their own index, so a series keeps its
+* colour when another is hidden or overridden. Past the end of the palette colours repeat and a
+* development warning suggests grouping the extra series (e.g. into "Other"): never invent colours.
+*
+* @experimental
+*/
+function resolveSeriesColors(series, { tokens = chartingColors(void 0), palette, mode = "light" } = {}) {
+	const colors = chartPaletteColors(tokens, palette);
+	const resolved = {};
+	series.forEach(({ key, color }, index) => {
+		resolved[key] = color ? resolveChartColor(color, mode) : colors[index % colors.length];
+	});
+	const overflowKey = `${palette ?? "qualitative"}:${series.length}`;
+	if (process.env.NODE_ENV !== "production" && series.length > colors.length && !warnedPaletteOverflow.has(overflowKey)) {
+		warnedPaletteOverflow.add(overflowKey);
+		console.warn(`[PDS charts] ${series.length} series exceed the ${colors.length}-colour ${palette ?? "qualitative"} palette, so colours repeat. Group the extra series (for example into "Other") instead of adding colours.`);
+	}
+	return resolved;
+}
+//#endregion
+//#region src/components/Chart/useChartColors.ts
+/**
+* The chart colours for the current PDS colour mode. Reads the charting palettes `PDSProvider` /
+* `ColorModeScope` install on the styled-components theme, so charts follow dark mode with no
+* extra setup; without a PDS colour mode it returns the light `ChartingColors`.
+*
+* ```tsx
+* const { resolve } = useChartColors();
+* const colors = resolve([{ key: 'approved' }, { key: 'declined', color: chartColor(Color.CoreRed600) }]);
+* <Bar dataKey='approved' fill={colors.approved} />
+* ```
+*
+* @experimental
+*/
+function useChartColors(palette = DEFAULT_CHART_PALETTE) {
+	const theme = useTheme();
+	const tokens = chartingColors(theme);
+	const mode = chartColorModeOf(theme);
+	const colors = chartPaletteColors(tokens, palette);
+	const resolve = useCallback((series) => resolveSeriesColors(series, {
+		tokens,
+		palette,
+		mode
+	}), [
+		tokens,
+		palette,
+		mode
+	]);
+	return useMemo(() => ({
+		mode,
+		colors,
+		resolve
+	}), [
+		mode,
+		colors,
+		resolve
+	]);
+}
+//#endregion
+//#region src/components/Chart/chartFrameLayout.ts
+/** @experimental */
+const DEFAULT_CHART_LEGEND_POSITION = "stack";
+/**
+* Plot height in px when a `ChartFrame` is given none. The plot always fills the frame's width.
+*
+* @experimental
+*/
+const CHART_DEFAULT_HEIGHT = 300;
+/**
+* Opacity of a de-emphasised series: a hidden series' legend swatch, and the series a pointer is
+* not on (its popover row and its segment in the hovered bar).
+*
+* @experimental
+*/
+const CHART_INACTIVE_OPACITY = .65;
+/**
+* Recharts margin for a plot inside a `ChartFrame`. The frame owns the spacing around the plot
+* (`Spacing[3]` between legend and plot) and lets axis labels overflow the SVG, so the chart adds
+* no margin of its own: `<BarChart margin={CHART_PLOT_MARGIN} ...>`.
+*
+* @experimental
+*/
+const CHART_PLOT_MARGIN = {
+	top: 0,
+	right: 0,
+	bottom: 0,
+	left: 0
+};
+const ChartLegendPositionContext = createContext(void 0);
+/** Provided by `ChartFrame` so its `ChartLegend` lays its items out to match. */
+const ChartLegendPositionProvider = ChartLegendPositionContext.Provider;
+/** The legend position of the enclosing `ChartFrame`, or `undefined` outside one. */
+const useChartLegendPosition = () => useContext(ChartLegendPositionContext);
+//#endregion
+//#region src/components/Chart/ChartFrame.tsx
+const Frame = styled.figure`
+  display: flex;
+  gap: ${({ $position }) => $position === "right" ? Spacing[3] : Spacing[4]};
+  box-sizing: border-box;
+  width: 100%;
+  margin: 0;
+  min-width: 0;
+  ${({ $position }) => $position === "right" ? css`
+          flex-direction: row-reverse;
+          align-items: flex-start;
+        ` : css`
+          flex-direction: column;
+          align-items: flex-start;
+        `}
+`;
+const INLINE_LEGEND_MAX_WIDTH = "200px";
+const LegendSlot = styled.div`
+  min-width: 0;
+  ${({ $position }) => $position === "right" && css`
+      flex: 0 0 auto;
+      width: max-content; /* fits the longest label, on one line */
+      max-width: min(${INLINE_LEGEND_MAX_WIDTH}, 33%);
+    `}
+`;
+const Plot = styled.div`
+  align-self: stretch;
+  flex: 1 1 auto;
+  min-width: 0;
+  height: ${({ $height }) => $height}px;
+
+  /* Axis labels may overflow the plot box instead of needing a Recharts margin. */
+  .recharts-surface {
+    overflow: visible;
+  }
+`;
+/**
+* Lays out a chart: its legend and the plot area, `Spacing[4]` apart stacked (`Spacing[3]` inline), with the legend left-aligned
+* above the plot (`legendPosition='stack'`, the default) or inline on its right (`'right'`). The
+* frame has no header, border or surface of its own: titles, descriptions and controls belong to
+* the surrounding container (for example a `CardV2`), which also names the chart via
+* `aria-labelledby`.
+*
+* Size: the chart fills 100% of its container's width, and the plot is 300px tall
+* (`CHART_DEFAULT_HEIGHT`) unless `height` overrides it.
+*
+* @experimental Part of the in-progress PDS charting components; the API may change.
+*/
+function ChartFrame({ legend, legendPosition = DEFAULT_CHART_LEGEND_POSITION, height = 300, children, className, ...label }) {
+	return /* @__PURE__ */ jsx(ChartLegendPositionProvider, {
+		value: legendPosition,
+		children: /* @__PURE__ */ jsxs(Frame, {
+			$position: legendPosition,
+			className,
+			"data-legend-position": legendPosition,
+			...label,
+			children: [legend && /* @__PURE__ */ jsx(LegendSlot, {
+				$position: legendPosition,
+				children: legend
+			}), /* @__PURE__ */ jsx(Plot, {
+				$height: height,
+				children
+			})]
+		})
+	});
+}
+//#endregion
+//#region src/components/Chart/ChartLegend.tsx
+const SWATCH_SIZE = Spacing[3];
+const List = styled(Stack)`
+  min-width: 0;
+  max-width: 100%;
+  margin: 0;
+  padding: 0;
+  list-style: none;
+`;
+const ListItem = styled.li`
+  display: flex;
+  min-width: 0;
+  max-width: 100%;
+`;
+const Label = styled(Paragraph)`
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+`;
+const Swatch$1 = styled.span`
+  flex-shrink: 0;
+  width: ${SWATCH_SIZE};
+  height: ${SWATCH_SIZE};
+  border-radius: ${BorderRadius.Sm};
+  background: ${({ $color }) => $color};
+  opacity: ${({ $hidden }) => $hidden ? CHART_INACTIVE_OPACITY : 1};
+`;
+const ToggleButton = styled.button`
+  ${paragraphMixins.md};
+  display: flex;
+  align-items: center;
+  gap: ${Spacing[2]};
+  min-width: 0;
+  max-width: 100%;
+  margin: 0;
+  padding: 0;
+  border: 0;
+  border-radius: ${BorderRadius.Sm};
+  background: none;
+  color: inherit;
+  text-align: start;
+  cursor: pointer;
+  ${focusOutline}
+
+  /* Hover and pressed fill, as on a text Button. The same-colour spread ring paints the fill a
+     little past the item without changing the legend's layout. */
+  &:hover {
+    ${({ theme }) => {
+	const fill = semanticColor(theme, "ActionNeutralHover", Color.CoreSlate100);
+	return `background-color: ${fill}; box-shadow: 0 0 0 ${Spacing[1]} ${fill};`;
+}}
+  }
+
+  &:active {
+    ${({ theme }) => {
+	const fill = semanticColor(theme, "ActionNeutralActive", Color.CoreSlate200);
+	return `background-color: ${fill}; box-shadow: 0 0 0 ${Spacing[1]} ${fill};`;
+}}
+  }
+`;
+const StaticItem = styled.span`
+  ${paragraphMixins.md};
+  display: flex;
+  align-items: center;
+  gap: ${Spacing[2]};
+  min-width: 0;
+  max-width: 100%;
+`;
+const GroupTitle = styled.span`
+  ${paragraphMixins.smMono};
+  text-transform: uppercase;
+  color: ${({ theme }) => semanticColor(theme, "FgSecondary", Color.TextSecondary)};
+`;
+function LegendItems({ items, hidden, onToggle, "aria-label": ariaLabel, vertical, className }) {
+	return /* @__PURE__ */ jsx(List, {
+		as: "ul",
+		className,
+		"aria-label": ariaLabel,
+		direction: vertical ? "vertical" : "horizontal",
+		spacing: vertical ? Spacing[2] : Spacing[4],
+		wrap: vertical ? void 0 : "wrap",
+		align: vertical ? "flex-start" : "center",
+		children: items.map(({ key, label, color }) => {
+			const isHidden = hidden.includes(key);
+			const content = /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx(Swatch$1, {
+				$color: color,
+				$hidden: isHidden,
+				"aria-hidden": true
+			}), /* @__PURE__ */ jsx(Label, {
+				as: "span",
+				size: "md",
+				color: isHidden ? "tertiary" : "primary",
+				title: label,
+				children: label
+			})] });
+			return /* @__PURE__ */ jsx(ListItem, { children: onToggle ? /* @__PURE__ */ jsx(ToggleButton, {
+				type: "button",
+				"aria-pressed": !isHidden,
+				onClick: () => onToggle(key),
+				children: content
+			}) : /* @__PURE__ */ jsx(StaticItem, { children: content }) }, key);
+		})
+	});
+}
+/**
+* The series key for a chart: a square colour swatch and a `TextMedium` label per series, laid out
+* in a row that wraps (a column when it sits right of the plot in a `ChartFrame`). With `onToggle`,
+* each item toggles its series; a hidden series keeps a filled swatch at 65% opacity and gets a
+* muted label.
+*
+* Pass `groups` instead of `items` for a grouped legend: groups stack `Spacing[2]` apart, each with
+* an uppercase mono title `Spacing[1]` above its row of items.
+*
+* @experimental Part of the in-progress PDS charting components; the API may change.
+*/
+function ChartLegend({ items, groups, hidden = [], onToggle, "aria-label": ariaLabel = "Chart legend", className }) {
+	const vertical = useChartLegendPosition() === "right";
+	if (!groups) return /* @__PURE__ */ jsx(LegendItems, {
+		items,
+		hidden,
+		onToggle,
+		"aria-label": ariaLabel,
+		vertical,
+		className
+	});
+	return /* @__PURE__ */ jsx(Stack, {
+		role: "group",
+		"aria-label": ariaLabel,
+		className,
+		spacing: Spacing[2],
+		align: "flex-start",
+		children: groups.map((group) => /* @__PURE__ */ jsxs(Stack, {
+			spacing: Spacing[1],
+			align: "flex-start",
+			children: [/* @__PURE__ */ jsx(GroupTitle, {
+				"aria-hidden": true,
+				children: group.label
+			}), /* @__PURE__ */ jsx(LegendItems, {
+				items: group.items,
+				hidden,
+				onToggle,
+				"aria-label": group.label,
+				vertical
+			})]
+		}, group.key))
+	});
+}
+//#endregion
+//#region src/components/Chart/useChartSeriesVisibility.ts
+/**
+* Show/hide state for a chart's series, driven by a {@link ChartLegend}. Every series may be hidden.
+* Hide a Recharts series with its `hide` prop (`<Bar hide={isHidden(key)} />`) rather than
+* unmounting it, so colours and axes stay put.
+*
+* @experimental
+*/
+function useChartSeriesVisibility(keys, initialHidden = []) {
+	const [hiddenSet, setHiddenSet] = useState(() => new Set(initialHidden));
+	const toggle = useCallback((key) => {
+		setHiddenSet((current) => {
+			const next = new Set(current);
+			if (next.has(key)) next.delete(key);
+			else next.add(key);
+			return next;
+		});
+	}, []);
+	const isHidden = useCallback((key) => hiddenSet.has(key), [hiddenSet]);
+	return useMemo(() => {
+		const hidden = keys.filter((key) => hiddenSet.has(key));
+		return {
+			hidden,
+			toggle,
+			isHidden,
+			allHidden: keys.length > 0 && hidden.length === keys.length
+		};
+	}, [
+		keys,
+		hiddenSet,
+		toggle,
+		isHidden
+	]);
+}
+//#endregion
+//#region src/components/Chart/ChartPopover.tsx
+/** Default popover widths in px (Figma). @experimental */
+const CHART_POPOVER_WIDTH = {
+	default: 256,
+	condensed: 210
+};
+const SPACING = {
+	default: {
+		padding: Spacing[3],
+		gap: Spacing[2]
+	},
+	condensed: {
+		padding: Spacing[2],
+		gap: Spacing[1]
+	}
+};
+const Panel = styled.div`
+  ${paragraphMixins.md};
+  box-sizing: border-box;
+  display: flex;
+  flex-direction: column;
+  gap: ${({ $size }) => SPACING[$size].gap};
+  padding: ${({ $size }) => SPACING[$size].padding};
+  border-radius: ${BorderRadius.Md};
+  background-color: ${({ theme }) => semanticColor(theme, "SurfacePrimary", Color.BackgroundPrimary)};
+  box-shadow: ${"0px 8px 14px 0px rgba(0, 0, 0, 0.06), 0px 3px 24px 0px rgba(0, 0, 0, 0.06)"};
+  color: ${({ theme }) => semanticColor(theme, "FgPrimary", Color.TextPrimary)};
+  pointer-events: none;
+`;
+const Header = styled.div`
+  ${paragraphMixins.mdBold};
+`;
+const Rows = styled.ul`
+  display: flex;
+  flex-direction: column;
+  gap: ${({ $size }) => SPACING[$size].gap};
+  margin: 0;
+  padding: 0;
+  list-style: none;
+`;
+const Row = styled.li`
+  display: grid;
+  grid-template-columns: auto minmax(0, 1fr) auto;
+  align-items: center;
+  column-gap: ${Spacing[2]};
+  opacity: ${({ $dimmed }) => $dimmed ? CHART_INACTIVE_OPACITY : 1};
+`;
+const TotalRow = styled(Row)`
+  padding-top: ${Spacing[1]};
+  box-shadow: ${Hairline.Top};
+`;
+const Swatch = styled.span`
+  width: ${Spacing[3]};
+  height: ${Spacing[3]};
+  border-radius: ${"2px"};
+  flex-shrink: 0;
+`;
+const SeriesName = styled.span`
+  overflow: hidden;
+  color: ${({ theme }) => semanticColor(theme, "FgSecondary", Color.TextSecondary)};
+  text-overflow: ellipsis;
+  white-space: nowrap;
+`;
+const Value = styled.span`
+  ${paragraphMixins.md};
+  text-align: right;
+  white-space: nowrap;
+`;
+const isPresent = (value) => typeof value === "number" ? !Number.isNaN(value) : typeof value === "string" && value !== "";
+/**
+* The chart popover body: an optional header, one row per series (swatch, name, right-aligned
+* value) and an optional total row. Use it directly for a popover drawn outside Recharts; inside a
+* Recharts chart use {@link ChartPopover}.
+*
+* @experimental Part of the in-progress PDS charting components; the API may change.
+*/
+function ChartPopoverPanel({ label, rows, valueFormatter, showTotal = false, total, totalLabel = "Total", size = "default", width, activeSeries, className }) {
+	const locale = usePDSLocale();
+	const format = (value, key) => {
+		if (valueFormatter) return valueFormatter(value, key);
+		return typeof value === "number" ? value.toLocaleString(locale) : value;
+	};
+	const totalValue = total ?? rows.reduce((sum, { value }) => typeof value === "number" && !Number.isNaN(value) ? sum + value : sum, 0);
+	const hasLabel = label !== void 0 && label !== null && label !== "";
+	return /* @__PURE__ */ jsxs(Panel, {
+		$size: size,
+		className,
+		"data-size": size,
+		"data-test": "chart-popover",
+		style: { width: width ?? CHART_POPOVER_WIDTH[size] },
+		children: [hasLabel && /* @__PURE__ */ jsx(Header, { children: label }), /* @__PURE__ */ jsxs(Rows, {
+			$size: size,
+			children: [rows.map((row) => /* @__PURE__ */ jsxs(Row, {
+				$dimmed: activeSeries !== void 0 && row.key !== activeSeries,
+				"data-active": activeSeries === row.key || void 0,
+				children: [
+					/* @__PURE__ */ jsx(Swatch, {
+						"aria-hidden": true,
+						style: { background: row.color }
+					}),
+					/* @__PURE__ */ jsx(SeriesName, {
+						title: typeof row.label === "string" ? row.label : void 0,
+						children: row.label
+					}),
+					/* @__PURE__ */ jsx(Value, { children: isPresent(row.value) ? format(row.value, row.key) : "–" })
+				]
+			}, row.key)), showTotal && size !== "condensed" && /* @__PURE__ */ jsxs(TotalRow, { children: [
+				/* @__PURE__ */ jsx(Swatch, { "aria-hidden": true }),
+				/* @__PURE__ */ jsx("span", { children: totalLabel }),
+				/* @__PURE__ */ jsx(Value, { children: format(totalValue, "total") })
+			] })]
+		})]
+	});
+}
+const entryKey = ({ dataKey, name }) => {
+	if (typeof dataKey === "string" || typeof dataKey === "number") return String(dataKey);
+	return typeof name === "string" || typeof name === "number" ? String(name) : void 0;
+};
+const isEntryVisible = (entry) => !entry.hide && !entry.inactive && entry.type !== "none";
+/**
+* Builds the popover rows from a Recharts tooltip payload: drops hidden and inactive series, then
+* orders, labels and colours the rest by `series` (or keeps the payload order without it).
+*
+* @experimental
+*/
+function chartPopoverRows(payload, series, hiddenSeries) {
+	const hidden = new Set(hiddenSeries ?? []);
+	const visible = /* @__PURE__ */ new Map();
+	for (const entry of payload) {
+		const key = entryKey(entry);
+		if (key !== void 0 && !hidden.has(key) && isEntryVisible(entry) && !visible.has(key)) visible.set(key, entry);
+	}
+	const payloadColor = (entry) => entry.color ?? entry.fill ?? entry.stroke;
+	if (!series) return [...visible].map(([key, entry]) => ({
+		key,
+		label: isPresent(entry.name) ? entry.name : key,
+		color: payloadColor(entry),
+		value: entry.value
+	}));
+	return series.flatMap(({ key, label, color }) => {
+		const entry = visible.get(key);
+		return entry ? [{
+			key,
+			label,
+			color: color ?? payloadColor(entry),
+			value: entry.value
+		}] : [];
+	});
+}
+/**
+* Chart popover (tooltip) content for Recharts 2 and 3. Pass it to `<Tooltip content={...} />`;
+* Recharts injects `active`, `payload` and `label`.
+*
+* ```tsx
+* const series = [{ key: 'approved', label: 'Approved', color: colors.approved }, ...];
+* <Tooltip cursor={false} content={<ChartPopover series={series} hiddenSeries={hidden} />} />
+* ```
+*
+* Renders nothing while inactive or when every series is hidden.
+*
+* @experimental Part of the in-progress PDS charting components; the API may change.
+*/
+function ChartPopover({ active, payload, label, series, hiddenSeries, labelFormatter, ...panelProps }) {
+	if (!active || !payload || payload.length === 0) return null;
+	const rows = chartPopoverRows(payload, series, hiddenSeries);
+	if (rows.length === 0) return null;
+	const header = labelFormatter ? labelFormatter(label, payload) : label;
+	return /* @__PURE__ */ jsx(ChartPopoverPanel, {
+		...panelProps,
+		label: header,
+		rows
+	});
+}
+//#endregion
+//#region src/components/Chart/useChartStyles.ts
+const GRID_Z_INDEX = 250;
+/**
+* PDS styling for hand-built Recharts charts, as props to spread on Recharts' own components so a
+* custom chart (reference lines, formatters, extra children) keeps the PDS look:
+*
+* ```tsx
+* const styles = useChartStyles();
+* <BarChart data={data} margin={CHART_PLOT_MARGIN}>
+*   <Tooltip cursor={styles.barCursor} content={<ChartPopover series={series} />} />
+*   <CartesianGrid {...styles.grid} />
+*   <XAxis dataKey='month' {...styles.xAxis} tickFormatter={formatMonth} />
+*   <YAxis {...styles.yAxis} />
+*   <ReferenceLine y={target} stroke={styles.colors.axis} strokeDasharray='4 4' />
+*   ...
+* </BarChart>
+* ```
+*
+* Colours come from semantic tokens, so they follow light and dark mode.
+*
+* @experimental Part of the in-progress PDS charting components; the API may change.
+*/
+function useChartStyles() {
+	const theme = useTheme();
+	const colors = {
+		grid: semanticColor(theme, "BorderDivider", Color.BorderHairline),
+		axis: semanticColor(theme, "BorderDefault", Color.BorderDivider),
+		text: semanticColor(theme, "FgSecondary", Color.TextSecondary),
+		surface: semanticColor(theme, "SurfacePrimary", Color.BackgroundPrimary),
+		hover: semanticColor(theme, "SurfaceHover", Color.BackgroundSecondary)
+	};
+	const tick = {
+		fill: colors.text,
+		fontSize: Typography.TextSmall.fontSize,
+		fontFamily: Typography.TextSmall.fontFamily
+	};
+	return {
+		colors,
+		/**
+		* `<CartesianGrid>`: horizontal gridlines only, drawn over the tooltip cursor band so they stay
+		* visible through it. Recharts 3 layers by `zIndex` (its cursor band is 200, bars 300); Recharts 2
+		* ignores `zIndex` and layers by child order, so put `<Tooltip>` before `<CartesianGrid>`.
+		*/
+		grid: {
+			vertical: false,
+			stroke: colors.grid,
+			zIndex: GRID_Z_INDEX
+		},
+		/** `<XAxis>`: no tick marks, a baseline in the default border colour. */
+		xAxis: {
+			tick,
+			tickLine: false,
+			axisLine: { stroke: colors.axis }
+		},
+		/** `<YAxis>`: no tick marks or axis line. */
+		yAxis: {
+			tick,
+			tickLine: false,
+			axisLine: false
+		},
+		/** `<Tooltip cursor>` for bar charts: a translucent band, so gridlines show through. */
+		barCursor: {
+			fill: colors.hover,
+			fillOpacity: CHART_INACTIVE_OPACITY
+		},
+		/** `<Tooltip cursor>` for line charts: a vertical line. */
+		lineCursor: { stroke: colors.axis },
+		/** `<Bar>` in a stack: a 1px surface-coloured line between segments. */
+		segmentGap: {
+			stroke: colors.surface,
+			strokeWidth: 1
+		},
+		/** `<Line activeDot>`: the hovered point, ringed in the surface colour. */
+		activeDot: {
+			r: 4,
+			stroke: colors.surface,
+			strokeWidth: 2
+		}
+	};
+}
+/**
+* Hover emphasis for bars holding several series (stacked or grouped): the segment under the
+* pointer stays at full strength, the other segments of the same category drop to 65% opacity, and
+* `activeSeries` dims the matching popover rows.
+*
+* ```tsx
+* const { activeSeries, barHandlers, segmentOpacity } = useChartActiveSeries<Key>();
+* <Tooltip content={<ChartPopover series={series} activeSeries={activeSeries} />} />
+* {series.map(({ key }) => (
+*   <Bar key={key} dataKey={key} {...barHandlers(key)}>
+*     {data.map((_, i) => <Cell key={i} fillOpacity={segmentOpacity(key, i)} />)}
+*   </Bar>
+* ))}
+* ```
+*
+* @experimental
+*/
+function useChartActiveSeries() {
+	const [active, setActive] = useState(null);
+	const barHandlers = useCallback((key) => ({
+		onMouseEnter: (_data, index) => setActive({
+			key,
+			index
+		}),
+		onMouseLeave: () => setActive(null)
+	}), []);
+	const segmentOpacity = (key, index) => active && active.index === index && active.key !== key ? CHART_INACTIVE_OPACITY : 1;
+	return {
+		activeSeries: active?.key,
+		barHandlers,
+		segmentOpacity
+	};
+}
+//#endregion
+export { CHART_DEFAULT_HEIGHT, CHART_INACTIVE_OPACITY, CHART_PALETTE_TOKENS, CHART_PLOT_MARGIN, ChartFrame, ChartLegend, ChartPopover, ChartPopoverPanel, DEFAULT_CHART_LEGEND_POSITION, DEFAULT_CHART_PALETTE, chartColor, chartColorModeOf, chartPaletteColors, chartPopoverRows, resolveChartColor, resolveSeriesColors, useChartActiveSeries, useChartColors, useChartSeriesVisibility, useChartStyles };
+
+//# sourceMappingURL=index.mjs.map