@galaxy-io/dls 1.2.7 → 1.3.1

package/dist/charts/ChartLegend.js

@@ -1,28 +1,51 @@
-import Text, { TextSize, TextVariant } from "../text/Text.js";
-import FlexWrapper, { AlignItems, FlexDirection } from "../containers/FlexWrapper.js";
+import Text, { TextSize } from "../text/Text.js";
 import Circle from "../shapes/Circle.js";
-import { resolveSeriesColor } from "./utils.js";
-import { jsx, jsxs } from "react/jsx-runtime";
+import { ChartMarkState } from "./types.js";
+import { ChartLegendItemButton, ChartLegendItemStatic, ChartLegendRow } from "./ChartPrimitives.js";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 //#region src/charts/ChartLegend.tsx
-var ChartLegend = ({ series, palette }) => {
-	return /* @__PURE__ */ jsx(FlexWrapper, {
-		direction: FlexDirection.ROW,
-		alignItems: AlignItems.CENTER,
-		gap: 16,
-		children: series.map((s, i) => {
-			const color = resolveSeriesColor(s, i, palette);
-			return /* @__PURE__ */ jsxs(FlexWrapper, {
-				alignItems: AlignItems.CENTER,
-				gap: 6,
-				children: [/* @__PURE__ */ jsx(Circle, {
-					size: 8,
-					hex: color
-				}), /* @__PURE__ */ jsx(Text, {
-					size: TextSize.CAPTION,
-					variant: TextVariant.TERTIARY,
-					children: s.name
-				})]
-			}, s.key);
+/**
+* Legend for the chart components.
+*
+* Hovering an entry isolates its series and clicking pins that isolation.
+*
+* Deliberately *not* a visibility toggle: hiding a series would have to rescale
+* the value axis to stay honest — otherwise the remaining bars sit mysteriously
+* short — and that belongs with the geometry layer rather than bolted on here.
+* Isolation only changes opacity, so the domain is untouched and the numbers
+* keep meaning what they did.
+*/
+var ChartLegend = ({ items, inset, hoveredKey = null, pinnedKey = null, onItemEnter, onItemLeave, onItemClick }) => {
+	if (items.length === 0) return null;
+	const isInteractive = Boolean(onItemEnter ?? onItemClick);
+	const activeKey = pinnedKey ?? hoveredKey;
+	return /* @__PURE__ */ jsx(ChartLegendRow, {
+		$inset: inset,
+		"data-active": activeKey !== null ? "true" : "false",
+		children: items.map((item) => {
+			const state = activeKey === null || item.key === activeKey ? ChartMarkState.ACTIVE : ChartMarkState.MUTED;
+			const content = /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx(Circle, {
+				size: 8,
+				hex: item.color
+			}), /* @__PURE__ */ jsx(Text, {
+				size: TextSize.BODY_SM,
+				children: item.label
+			})] });
+			if (!isInteractive) return /* @__PURE__ */ jsx(ChartLegendItemStatic, {
+				"data-state": state,
+				children: content
+			}, item.key);
+			return /* @__PURE__ */ jsx(ChartLegendItemButton, {
+				type: "button",
+				"data-state": state,
+				"aria-pressed": pinnedKey === item.key,
+				onMouseEnter: () => onItemEnter?.(item.key),
+				onMouseLeave: () => onItemLeave?.(),
+				onFocus: () => onItemEnter?.(item.key),
+				onBlur: () => onItemLeave?.(),
+				onClick: () => onItemClick?.(item.key),
+				children: content
+			}, item.key);
 		})
 	});
 };

package/dist/charts/ChartPrimitives.d.ts

@@ -0,0 +1,230 @@
+/**
+ * Outer container. Receives the measurement ref.
+ *
+ * `min-width: 0` is load-bearing rather than cosmetic — without it a chart in a
+ * flex row feeds its min-content width back into the ResizeObserver and the
+ * measurement can oscillate.
+ */
+export declare const ChartRoot: import("@linaria/react").StyledComponent<import("react").ClassAttributes<HTMLDivElement> & import("react").HTMLAttributes<HTMLDivElement> & {
+    $fillWidth?: boolean;
+    $fillHeight?: boolean;
+}>;
+/**
+ * Holds the plot, anchors the tooltip, and is the element that gets measured.
+ *
+ * Reserving the box from `aspect-ratio` or an explicit height means a
+ * `fillWidth` chart is the right size on its very first paint, instead of
+ * rendering at zero height and jumping once the observer reports.
+ *
+ * **`$fillHeight` is what makes "fill the container" tractable.** The chart root
+ * is a flex column of this box plus the legend, and the legend wraps, so its
+ * height is not known until after layout. Claiming the remaining track with
+ * `flex: 1` lets the browser do that subtraction during its own layout pass —
+ * measuring the root and subtracting a measured legend would instead be a
+ * second, dependent pass, and one that can oscillate under a ResizeObserver.
+ * `min-height: 0` is required with it: a flex item's automatic minimum size is
+ * its content, which would let the SVG hold the box open above its track.
+ */
+export declare const ChartPlotBox: import("@linaria/react").StyledComponent<import("react").ClassAttributes<HTMLDivElement> & import("react").HTMLAttributes<HTMLDivElement> & {
+    $reservedHeight?: number;
+    $reservedAspectRatio?: number;
+    $fillHeight?: boolean;
+}>;
+/**
+ * `overflow: visible` lets a value label above a full-height bar paint outside
+ * the plot rather than being clipped by the root SVG.
+ */
+export declare const ChartSvg: import("@linaria/react").StyledComponent<import("react").SVGProps<SVGSVGElement> & Record<never, unknown>>;
+/**
+ * Cancels the restore delay for every mark beneath it while a category is
+ * engaged. See {@link markState}.
+ */
+export declare const ChartPlotGroup: import("@linaria/react").StyledComponent<import("react").SVGProps<SVGGElement> & Record<never, unknown>>;
+export declare const ChartBarPath: import("@linaria/react").StyledComponent<import("react").SVGProps<SVGPathElement> & Record<never, unknown>>;
+export declare const ChartLinePath: import("@linaria/react").StyledComponent<import("react").SVGProps<SVGPathElement> & Record<never, unknown>>;
+export declare const ChartAreaPath: import("@linaria/react").StyledComponent<import("react").SVGProps<SVGPathElement> & Record<never, unknown>>;
+export declare const ChartPointCircle: import("@linaria/react").StyledComponent<import("react").SVGProps<SVGCircleElement> & Record<never, unknown>>;
+export declare const ChartArcPath: import("@linaria/react").StyledComponent<import("react").SVGProps<SVGPathElement> & Record<never, unknown>>;
+/**
+ * Wrapper for the category target layer.
+ *
+ * Exists to carry the focus-ring colour: the targets themselves are plain
+ * `styled.x` because they receive refs (see the module note above), so they
+ * cannot read the theme directly. Setting `color` here lets them use
+ * `currentColor` and still take the token rather than inheriting whatever the
+ * consumer's page happens to set.
+ */
+export declare const ChartCategoryTargetLayer: import("react").ComponentType<Pick<import("react").SVGProps<SVGGElement> & {
+    theme: import("../theme").Theme;
+} & {
+    as?: React.ElementType;
+}, "as" | keyof import("react").SVGProps<SVGGElement>> & {
+    theme?: import("@callstack/react-theme-provider").$DeepPartial<import("../theme").Theme> | undefined;
+}> & import("@callstack/react-theme-provider/typings/hoist-non-react-statics").NonReactStatics<import("react").ComponentType<import("react").SVGProps<SVGGElement> & {
+    theme: import("../theme").Theme;
+} & {
+    as?: React.ElementType;
+}> & {
+    __wyw_meta: unknown;
+} & import("react").FunctionComponent<import("react").SVGProps<SVGGElement> & {
+    theme: import("../theme").Theme;
+} & {
+    as?: React.ElementType;
+}>, {}>;
+/**
+ * Per-category hit target, rendered above the marks.
+ *
+ * Hit testing the full column rather than the bars themselves means a two-pixel
+ * bar is as easy to hover as a two-hundred-pixel one, and crossing between
+ * segments inside a category fires no events at all — so the tooltip holds
+ * still instead of chasing each segment.
+ */
+export declare const ChartHitTarget: import("@linaria/react").StyledComponent<import("react").SVGProps<SVGRectElement> & Record<never, unknown>>;
+/**
+ * The radial equivalent, reusing the arc's own `d`.
+ *
+ * A pie has no category axis to band, so its targets are the arc shapes
+ * themselves — drawn again, transparent, above the marks. That keeps hit
+ * testing and focus identical across all three charts instead of the pie
+ * hit-testing its visible arcs directly.
+ */
+export declare const ChartHitTargetPath: import("@linaria/react").StyledComponent<import("react").SVGProps<SVGPathElement> & Record<never, unknown>>;
+/** Full-plot backdrop; clicking it clears a pinned category. */
+export declare const ChartBackdrop: import("@linaria/react").StyledComponent<import("react").SVGProps<SVGRectElement> & Record<never, unknown>>;
+/**
+ * Solid hairline rather than a dashed rule, and drawn at every tick including
+ * zero — the line under the bars is what makes them read as resting on a
+ * baseline.
+ */
+export declare const ChartGridLine: import("react").ComponentType<Pick<import("react").SVGLineElementAttributes<SVGLineElement> & {
+    theme: import("../theme").Theme;
+} & {
+    as?: React.ElementType;
+}, "as" | keyof import("react").SVGLineElementAttributes<SVGLineElement>> & {
+    theme?: import("@callstack/react-theme-provider").$DeepPartial<import("../theme").Theme> | undefined;
+}> & import("@callstack/react-theme-provider/typings/hoist-non-react-statics").NonReactStatics<import("react").ComponentType<import("react").SVGLineElementAttributes<SVGLineElement> & {
+    theme: import("../theme").Theme;
+} & {
+    as?: React.ElementType;
+}> & {
+    __wyw_meta: unknown;
+} & import("react").FunctionComponent<import("react").SVGLineElementAttributes<SVGLineElement> & {
+    theme: import("../theme").Theme;
+} & {
+    as?: React.ElementType;
+}>, {}>;
+/** Vertical rule marking the hovered category on a line chart. */
+export declare const ChartCursorLine: import("react").ComponentType<Pick<import("react").SVGLineElementAttributes<SVGLineElement> & {
+    theme: import("../theme").Theme;
+} & {
+    as?: React.ElementType;
+}, "as" | keyof import("react").SVGLineElementAttributes<SVGLineElement>> & {
+    theme?: import("@callstack/react-theme-provider").$DeepPartial<import("../theme").Theme> | undefined;
+}> & import("@callstack/react-theme-provider/typings/hoist-non-react-statics").NonReactStatics<import("react").ComponentType<import("react").SVGLineElementAttributes<SVGLineElement> & {
+    theme: import("../theme").Theme;
+} & {
+    as?: React.ElementType;
+}> & {
+    __wyw_meta: unknown;
+} & import("react").FunctionComponent<import("react").SVGLineElementAttributes<SVGLineElement> & {
+    theme: import("../theme").Theme;
+} & {
+    as?: React.ElementType;
+}>, {}>;
+export declare const ChartAxisLabelBox: import("@linaria/react").StyledComponent<import("react").SVGProps<SVGForeignObjectElement> & Record<never, unknown>>;
+/**
+ * Positioned from coordinates already clamped to the chart box.
+ *
+ * `left`/`top` are transitioned so the tooltip slides between categories rather
+ * than teleporting, and it stays mounted while hidden so the fade can actually
+ * run — unmounting on hide is why a fade-out never appears.
+ */
+export declare const ChartTooltipPositioner: import("react").ComponentType<Pick<import("react").ClassAttributes<HTMLDivElement> & import("react").HTMLAttributes<HTMLDivElement> & {
+    $x: number;
+    $y: number;
+    $isVisible: boolean;
+} & {
+    theme: import("../theme").Theme;
+} & {
+    as?: React.ElementType;
+}, keyof import("react").ClassAttributes<HTMLDivElement> | keyof import("react").HTMLAttributes<HTMLDivElement> | "as" | "$x" | "$y" | "$isVisible"> & {
+    theme?: import("@callstack/react-theme-provider").$DeepPartial<import("../theme").Theme> | undefined;
+}> & import("@callstack/react-theme-provider/typings/hoist-non-react-statics").NonReactStatics<import("react").ComponentType<import("react").ClassAttributes<HTMLDivElement> & import("react").HTMLAttributes<HTMLDivElement> & {
+    $x: number;
+    $y: number;
+    $isVisible: boolean;
+} & {
+    theme: import("../theme").Theme;
+} & {
+    as?: React.ElementType;
+}> & {
+    __wyw_meta: unknown;
+} & import("react").FunctionComponent<import("react").ClassAttributes<HTMLDivElement> & import("react").HTMLAttributes<HTMLDivElement> & {
+    $x: number;
+    $y: number;
+    $isVisible: boolean;
+} & {
+    theme: import("../theme").Theme;
+} & {
+    as?: React.ElementType;
+}>, {}>;
+/**
+ * Content well inside a donut hole.
+ *
+ * Rendered as HTML positioned over the SVG rather than as `<text>`, so the
+ * caller can compose it from the same `Text` and layout primitives as the rest
+ * of the DLS. `pointer-events: none` keeps it from stealing hover from the arc
+ * behind it.
+ */
+export declare const ChartCenterBox: import("@linaria/react").StyledComponent<import("react").ClassAttributes<HTMLDivElement> & import("react").HTMLAttributes<HTMLDivElement> & {
+    $centerX: number;
+    $centerY: number;
+    $diameter: number;
+}>;
+/**
+ * Sits slightly above centre, over where the bars would be, so the axes stay
+ * legible underneath.
+ */
+export declare const ChartEmptyOverlay: import("react").ComponentType<Pick<import("react").ClassAttributes<HTMLDivElement> & import("react").HTMLAttributes<HTMLDivElement> & {
+    theme: import("../theme").Theme;
+} & {
+    as?: React.ElementType;
+}, keyof import("react").ClassAttributes<HTMLDivElement> | keyof import("react").HTMLAttributes<HTMLDivElement> | "as"> & {
+    theme?: import("@callstack/react-theme-provider").$DeepPartial<import("../theme").Theme> | undefined;
+}> & import("@callstack/react-theme-provider/typings/hoist-non-react-statics").NonReactStatics<import("react").ComponentType<import("react").ClassAttributes<HTMLDivElement> & import("react").HTMLAttributes<HTMLDivElement> & {
+    theme: import("../theme").Theme;
+} & {
+    as?: React.ElementType;
+}> & {
+    __wyw_meta: unknown;
+} & import("react").FunctionComponent<import("react").ClassAttributes<HTMLDivElement> & import("react").HTMLAttributes<HTMLDivElement> & {
+    theme: import("../theme").Theme;
+} & {
+    as?: React.ElementType;
+}>, {}>;
+/**
+ * Aligns the legend under the plot rather than the value-axis gutter.
+ *
+ * Also cancels the restore delay for its entries while the legend is dimming,
+ * exactly as {@link ChartPlotGroup} does for the marks. The legend renders
+ * *outside* the SVG, so the plot group's selector cannot reach it — without this
+ * the marks dim instantly while their legend entries sit through the full
+ * {@link CHART_RESTORE_DELAY_MS}, and the two visibly fall out of step.
+ */
+export declare const ChartLegendRow: import("@linaria/react").StyledComponent<import("react").ClassAttributes<HTMLDivElement> & import("react").HTMLAttributes<HTMLDivElement> & {
+    $inset: number;
+}>;
+/**
+ * One legend entry, when the legend is interactive.
+ *
+ * A real `<button>` rather than a styled div: it is clickable, so it has to be
+ * reachable and operable by keyboard. `aria-pressed` carries the pinned state —
+ * the only thing here a screen reader can truthfully announce, since the plot
+ * itself is `role="img"` and its marks are not in the accessibility tree.
+ *
+ * Shares the mark opacity ramp via `data-state`, so an entry recedes in step
+ * with the series it names.
+ */
+export declare const ChartLegendItemButton: import("@linaria/react").StyledComponent<import("react").ClassAttributes<HTMLButtonElement> & import("react").ButtonHTMLAttributes<HTMLButtonElement> & Record<never, unknown>>;
+/** The same row, when the legend is inert — no button semantics to announce. */
+export declare const ChartLegendItemStatic: import("@linaria/react").StyledComponent<import("react").ClassAttributes<HTMLDivElement> & import("react").HTMLAttributes<HTMLDivElement> & Record<never, unknown>>;

package/dist/charts/ChartPrimitives.js

@@ -0,0 +1,305 @@
+import { withTheme } from "../theme/GalaxyTheme.js";
+/* empty css                          */
+import { styled } from "@linaria/react";
+//#region src/charts/ChartPrimitives.tsx
+/**
+* Styled leaves shared by the chart components.
+*
+* Linaria evaluates this module at build time, so it may import from
+* `constants.ts` only — a component, framer-motion or Phosphor import here
+* would be dragged into build-time evaluation.
+*
+* **SVG marks carry state as `data-*` attributes, never as `$`-prefixed props.**
+* `@linaria/react` builds its tag allow-list as
+* `new Set([...elements.html, elements.svg])` — the spread is missing on the
+* second array, so `has('rect')` is false, `propsAsIs` turns on, and every prop
+* is forwarded verbatim to the DOM. A `$isDimmed` prop reaches the element and
+* React warns. Attribute selectors sidestep this entirely and keep the CSS
+* static, which suits a zero-runtime setup better anyway.
+*
+* Leaves that receive a ref use plain `styled.x` rather than `withTheme`: the
+* HOC's return type erases the element type, so a mismatched ref would compile.
+*/
+/**
+* Shared emphasis ramp.
+*
+* The delay asymmetry is deliberate and load-bearing: highlighting is instant,
+* but restoring waits, so sweeping the pointer across categories reads as one
+* gesture instead of a strobe. The plot sets `data-active` while any category is
+* engaged, which cancels the delay for the whole subtree.
+*/
+/**
+* Outer container. Receives the measurement ref.
+*
+* `min-width: 0` is load-bearing rather than cosmetic — without it a chart in a
+* flex row feeds its min-content width back into the ResizeObserver and the
+* measurement can oscillate.
+*/
+var _exp = () => ({ $fillWidth }) => $fillWidth ? "flex" : "inline-flex";
+var _exp2 = () => ({ $fillWidth }) => $fillWidth ? "100%" : "auto";
+var _exp3 = () => ({ $fillHeight }) => $fillHeight ? "100%" : "auto";
+var ChartRoot = /*#__PURE__*/ styled("div")({
+	name: "ChartRoot",
+	class: "c1hcga6s",
+	propsAsIs: false,
+	vars: {
+		"c1hcga6s-0": [_exp()],
+		"c1hcga6s-1": [_exp2()],
+		"c1hcga6s-2": [_exp3()]
+	}
+});
+/**
+* Holds the plot, anchors the tooltip, and is the element that gets measured.
+*
+* Reserving the box from `aspect-ratio` or an explicit height means a
+* `fillWidth` chart is the right size on its very first paint, instead of
+* rendering at zero height and jumping once the observer reports.
+*
+* **`$fillHeight` is what makes "fill the container" tractable.** The chart root
+* is a flex column of this box plus the legend, and the legend wraps, so its
+* height is not known until after layout. Claiming the remaining track with
+* `flex: 1` lets the browser do that subtraction during its own layout pass —
+* measuring the root and subtracting a measured legend would instead be a
+* second, dependent pass, and one that can oscillate under a ResizeObserver.
+* `min-height: 0` is required with it: a flex item's automatic minimum size is
+* its content, which would let the SVG hold the box open above its track.
+*/
+var _exp4 = () => ({ $reservedAspectRatio }) => $reservedAspectRatio ?? "auto";
+var _exp5 = () => ({ $reservedHeight }) => $reservedHeight ? `${$reservedHeight}px` : "auto";
+var _exp6 = () => ({ $fillHeight }) => $fillHeight ? "1 1 0%" : "0 1 auto";
+var _exp7 = () => ({ $fillHeight }) => $fillHeight ? "0" : "auto";
+var ChartPlotBox = /*#__PURE__*/ styled("div")({
+	name: "ChartPlotBox",
+	class: "c1fvbgkp",
+	propsAsIs: false,
+	vars: {
+		"c1fvbgkp-0": [_exp4()],
+		"c1fvbgkp-1": [_exp5()],
+		"c1fvbgkp-2": [_exp6()],
+		"c1fvbgkp-3": [_exp7()]
+	}
+});
+/**
+* `overflow: visible` lets a value label above a full-height bar paint outside
+* the plot rather than being clipped by the root SVG.
+*/
+var ChartSvg = /*#__PURE__*/ styled("svg")({
+	name: "ChartSvg",
+	class: "c10uj5yt",
+	propsAsIs: false
+});
+/**
+* Cancels the restore delay for every mark beneath it while a category is
+* engaged. See {@link markState}.
+*/
+var ChartPlotGroup = /*#__PURE__*/ styled("g")({
+	name: "ChartPlotGroup",
+	class: "cyuty3o",
+	propsAsIs: true
+});
+var ChartBarPath = /*#__PURE__*/ styled("path")({
+	name: "ChartBarPath",
+	class: "c1ob2op2",
+	propsAsIs: true
+});
+var ChartLinePath = /*#__PURE__*/ styled("path")({
+	name: "ChartLinePath",
+	class: "c8c506o",
+	propsAsIs: true
+});
+var ChartAreaPath = /*#__PURE__*/ styled("path")({
+	name: "ChartAreaPath",
+	class: "ceqlpek",
+	propsAsIs: true
+});
+var ChartPointCircle = /*#__PURE__*/ styled("circle")({
+	name: "ChartPointCircle",
+	class: "c1fcbddl",
+	propsAsIs: true
+});
+var ChartArcPath = /*#__PURE__*/ styled("path")({
+	name: "ChartArcPath",
+	class: "cpcxr59",
+	propsAsIs: true
+});
+/**
+* Wrapper for the category target layer.
+*
+* Exists to carry the focus-ring colour: the targets themselves are plain
+* `styled.x` because they receive refs (see the module note above), so they
+* cannot read the theme directly. Setting `color` here lets them use
+* `currentColor` and still take the token rather than inheriting whatever the
+* consumer's page happens to set.
+*/
+var _exp11 = () => ({ theme }) => theme.color.border.selected;
+var ChartCategoryTargetLayer = withTheme(/*#__PURE__*/ styled("g")({
+	name: "ChartCategoryTargetLayer",
+	class: "c1wvzvu4",
+	propsAsIs: true,
+	vars: { "c1wvzvu4-0": [_exp11()] }
+}));
+/**
+* Shared by both target shapes.
+*
+* The ring is a `stroke`, not an `outline`: `outline` on SVG elements is a late
+* arrival in WebKit and `outline-offset` behaves inconsistently across engines,
+* while a stroke on a transparent shape is universally supported — and it
+* traces a pie arc, which a rectangular outline could not.
+*/
+/**
+* Per-category hit target, rendered above the marks.
+*
+* Hit testing the full column rather than the bars themselves means a two-pixel
+* bar is as easy to hover as a two-hundred-pixel one, and crossing between
+* segments inside a category fires no events at all — so the tooltip holds
+* still instead of chasing each segment.
+*/
+var ChartHitTarget = /*#__PURE__*/ styled("rect")({
+	name: "ChartHitTarget",
+	class: "c17guewt",
+	propsAsIs: true
+});
+/**
+* The radial equivalent, reusing the arc's own `d`.
+*
+* A pie has no category axis to band, so its targets are the arc shapes
+* themselves — drawn again, transparent, above the marks. That keeps hit
+* testing and focus identical across all three charts instead of the pie
+* hit-testing its visible arcs directly.
+*/
+var ChartHitTargetPath = /*#__PURE__*/ styled("path")({
+	name: "ChartHitTargetPath",
+	class: "cblgiyf",
+	propsAsIs: true
+});
+/** Full-plot backdrop; clicking it clears a pinned category. */
+var ChartBackdrop = /*#__PURE__*/ styled("rect")({
+	name: "ChartBackdrop",
+	class: "c1lr03cc",
+	propsAsIs: true
+});
+/**
+* Solid hairline rather than a dashed rule, and drawn at every tick including
+* zero — the line under the bars is what makes them read as resting on a
+* baseline.
+*/
+var _exp14 = () => ({ theme }) => theme.color.border.primary;
+var ChartGridLine = withTheme(/*#__PURE__*/ styled("line")({
+	name: "ChartGridLine",
+	class: "cizy1s8",
+	propsAsIs: true,
+	vars: { "cizy1s8-0": [_exp14()] }
+}));
+/** Vertical rule marking the hovered category on a line chart. */
+var _exp15 = () => ({ theme }) => theme.color.border.secondary;
+var ChartCursorLine = withTheme(/*#__PURE__*/ styled("line")({
+	name: "ChartCursorLine",
+	class: "c1ukq11d",
+	propsAsIs: true,
+	vars: { "c1ukq11d-0": [_exp15()] }
+}));
+var ChartAxisLabelBox = /*#__PURE__*/ styled("foreignObject")({
+	name: "ChartAxisLabelBox",
+	class: "cwcko2m",
+	propsAsIs: true
+});
+/**
+* Positioned from coordinates already clamped to the chart box.
+*
+* `left`/`top` are transitioned so the tooltip slides between categories rather
+* than teleporting, and it stays mounted while hidden so the fade can actually
+* run — unmounting on hide is why a fade-out never appears.
+*/
+var _exp16 = () => ({ $x }) => `${$x}px`;
+var _exp17 = () => ({ $y }) => `${$y}px`;
+var _exp20 = () => ({ theme }) => theme.color.border.primary;
+var _exp21 = () => ({ theme }) => theme.color.background.primary;
+var _exp22 = () => ({ $isVisible }) => $isVisible ? 1 : 0;
+var ChartTooltipPositioner = withTheme(/*#__PURE__*/ styled("div")({
+	name: "ChartTooltipPositioner",
+	class: "cqwhvyz",
+	propsAsIs: false,
+	vars: {
+		"cqwhvyz-0": [_exp16()],
+		"cqwhvyz-1": [_exp17()],
+		"cqwhvyz-2": [_exp20()],
+		"cqwhvyz-3": [_exp21()],
+		"cqwhvyz-4": [_exp22()]
+	}
+}));
+/**
+* Content well inside a donut hole.
+*
+* Rendered as HTML positioned over the SVG rather than as `<text>`, so the
+* caller can compose it from the same `Text` and layout primitives as the rest
+* of the DLS. `pointer-events: none` keeps it from stealing hover from the arc
+* behind it.
+*/
+var _exp26 = () => ({ $centerX }) => `${$centerX}px`;
+var _exp27 = () => ({ $centerY }) => `${$centerY}px`;
+var _exp29 = () => ({ $diameter }) => `${$diameter}px`;
+var ChartCenterBox = /*#__PURE__*/ styled("div")({
+	name: "ChartCenterBox",
+	class: "c1iaray",
+	propsAsIs: false,
+	vars: {
+		"c1iaray-0": [_exp26()],
+		"c1iaray-1": [_exp27()],
+		"c1iaray-2": [_exp29()]
+	}
+});
+/**
+* Sits slightly above centre, over where the bars would be, so the axes stay
+* legible underneath.
+*/
+var _exp30 = () => ({ theme }) => theme.color.border.primary;
+var _exp31 = () => ({ theme }) => theme.color.background.tertiary;
+var ChartEmptyOverlay = withTheme(/*#__PURE__*/ styled("div")({
+	name: "ChartEmptyOverlay",
+	class: "cz6jod1",
+	propsAsIs: false,
+	vars: {
+		"cz6jod1-0": [_exp30()],
+		"cz6jod1-1": [_exp31()]
+	}
+}));
+/**
+* Aligns the legend under the plot rather than the value-axis gutter.
+*
+* Also cancels the restore delay for its entries while the legend is dimming,
+* exactly as {@link ChartPlotGroup} does for the marks. The legend renders
+* *outside* the SVG, so the plot group's selector cannot reach it — without this
+* the marks dim instantly while their legend entries sit through the full
+* {@link CHART_RESTORE_DELAY_MS}, and the two visibly fall out of step.
+*/
+var _exp32 = () => ({ $inset }) => `${$inset}px`;
+var ChartLegendRow = /*#__PURE__*/ styled("div")({
+	name: "ChartLegendRow",
+	class: "c1de5mqk",
+	propsAsIs: false,
+	vars: { "c1de5mqk-0": [_exp32()] }
+});
+/**
+* One legend entry, when the legend is interactive.
+*
+* A real `<button>` rather than a styled div: it is clickable, so it has to be
+* reachable and operable by keyboard. `aria-pressed` carries the pinned state —
+* the only thing here a screen reader can truthfully announce, since the plot
+* itself is `role="img"` and its marks are not in the accessibility tree.
+*
+* Shares the mark opacity ramp via `data-state`, so an entry recedes in step
+* with the series it names.
+*/
+var ChartLegendItemButton = /*#__PURE__*/ styled("button")({
+	name: "ChartLegendItemButton",
+	class: "cjirv6a",
+	propsAsIs: false
+});
+/** The same row, when the legend is inert — no button semantics to announce. */
+var ChartLegendItemStatic = /*#__PURE__*/ styled("div")({
+	name: "ChartLegendItemStatic",
+	class: "c1armna5",
+	propsAsIs: false
+});
+//#endregion
+export { ChartArcPath, ChartAreaPath, ChartAxisLabelBox, ChartBackdrop, ChartBarPath, ChartCategoryTargetLayer, ChartCenterBox, ChartCursorLine, ChartEmptyOverlay, ChartGridLine, ChartHitTarget, ChartHitTargetPath, ChartLegendItemButton, ChartLegendItemStatic, ChartLegendRow, ChartLinePath, ChartPlotBox, ChartPlotGroup, ChartPointCircle, ChartRoot, ChartSvg, ChartTooltipPositioner };

package/dist/charts/ChartTooltip.d.ts

@@ -1,7 +1,28 @@
-import type { ChartTooltipData, ChartValueFormatter } from "./types";
+import type { ChartTooltipModel, ChartTooltipRenderer } from "./types";
+import { ChartTooltipVerticalAlign } from "./useChartTooltipPosition";
+/**
+ * Positioned tooltip shared by the chart components.
+ *
+ * The positioner wraps a custom `renderer` too, so a caller replacing the body
+ * still gets collision handling — in V1 the custom path received no positioning
+ * at all and had to reimplement it.
+ */
 interface ChartTooltipProps {
-    data: ChartTooltipData | null;
-    valueFormatter?: ChartValueFormatter;
+    /**
+     * The model to display, or `null` when nothing is active.
+     *
+     * The element stays mounted while hidden so the fade can run; unmounting on
+     * hide is why a fade-out never appears.
+     */
+    model: ChartTooltipModel | null;
+    containerWidth: number;
+    containerHeight: number;
+    /** Half a category's width, so the tooltip sits beside the bars, not over them. */
+    anchorHalfWidth?: number;
+    /** Radial charts pass their centre so the tooltip is pushed outward. */
+    placeAwayFromX?: number;
+    verticalAlign?: ChartTooltipVerticalAlign;
+    renderer?: ChartTooltipRenderer;
 }
-declare const ChartTooltip: ({ data, valueFormatter }: ChartTooltipProps) => import("react").JSX.Element | null;
+declare const ChartTooltip: ({ model, containerWidth, containerHeight, anchorHalfWidth, placeAwayFromX, verticalAlign, renderer, }: ChartTooltipProps) => import("react").JSX.Element;
 export default ChartTooltip;