@ctrl-ui/react 0.8.20 → 0.9.0

package/dist/ui/chart-marks.js

@@ -0,0 +1,227 @@
+import { chartColor } from "./chart-colors.js";
+import { ruleX, ruleY, text } from "@tanstack/charts";
+import { decorative } from "@tanstack/charts/mark/decorative";
+import { tooltip } from "@tanstack/charts/tooltip";
+//#region src/ui/chart-marks.ts
+function withSceneNodes(mark, transform) {
+	return {
+		...mark,
+		initialize(context) {
+			const initialized = mark.initialize(context);
+			const { resolveLayout } = initialized;
+			return {
+				...initialized,
+				render: (renderContext) => {
+					const scene = initialized.render(renderContext);
+					return {
+						...scene,
+						nodes: transform(scene.nodes, renderContext)
+					};
+				},
+				resolveLayout: resolveLayout ? (layoutContext) => {
+					const layout = resolveLayout(layoutContext);
+					return {
+						...layout,
+						render: (renderContext) => {
+							const scene = layout.render(renderContext);
+							return {
+								...scene,
+								nodes: transform(scene.nodes, renderContext)
+							};
+						}
+					};
+				} : void 0
+			};
+		}
+	};
+}
+function withClass(node, className) {
+	return {
+		...node,
+		className: node.className ? `${node.className} ${className}` : className
+	};
+}
+function chartPart(mark, ...parts) {
+	const partClass = parts.map((part) => `cui-chart-${part}`).join(" ");
+	return withSceneNodes(mark, (nodes) => nodes.map((node) => withClass(node, partClass)));
+}
+const BASELINE_TOLERANCE = .5;
+function withNegativeBars(nodes, axis, baseline) {
+	return nodes.map((node) => {
+		if (node.kind === "group") return {
+			...node,
+			children: withNegativeBars(node.children, axis, baseline)
+		};
+		if (node.kind !== "rect") return node;
+		return (axis === "y" ? node.y >= baseline - BASELINE_TOLERANCE : node.x + node.width <= baseline + BASELINE_TOLERANCE) ? withClass(node, "cui-chart-bar-negative") : node;
+	});
+}
+function chartBars(mark, axis) {
+	return withSceneNodes(mark, (nodes, renderContext) => {
+		const valueScale = renderContext.scales[axis];
+		return (valueScale ? withNegativeBars(nodes, axis, valueScale.map(0)) : [...nodes]).map((node) => withClass(node, `cui-chart-bar-${axis}`));
+	});
+}
+const BAR_STOPS = [[0, 1], [1, .55]];
+const GRADIENT_GEOMETRY = {
+	area: {
+		x1: 0,
+		y1: 0,
+		x2: 0,
+		y2: 1,
+		stops: [
+			[0, .5],
+			[.6, .12],
+			[1, 0]
+		]
+	},
+	"bar-y": {
+		x1: 0,
+		y1: 0,
+		x2: 0,
+		y2: 1,
+		stops: BAR_STOPS
+	},
+	"bar-y-negative": {
+		x1: 0,
+		y1: 1,
+		x2: 0,
+		y2: 0,
+		stops: BAR_STOPS
+	},
+	"bar-x": {
+		x1: 1,
+		y1: 0,
+		x2: 0,
+		y2: 0,
+		stops: BAR_STOPS
+	},
+	"bar-x-negative": {
+		x1: 0,
+		y1: 0,
+		x2: 1,
+		y2: 0,
+		stops: BAR_STOPS
+	},
+	arc: {
+		x1: 0,
+		y1: 0,
+		x2: 1,
+		y2: 1,
+		stops: [[0, 1], [
+			1,
+			1,
+			.1
+		]]
+	}
+};
+function chartGradient(color, kind) {
+	const { stops, ...geometry } = GRADIENT_GEOMETRY[kind];
+	return {
+		...geometry,
+		id: `cui-${kind}-${color}`,
+		stops: stops.map(([offset, opacity, lightnessLift]) => ({
+			offset,
+			opacity,
+			color: lightnessLift ? `oklch(from ${chartColor(color)} calc(l + ${lightnessLift}) c h)` : chartColor(color)
+		}))
+	};
+}
+function chartGradients(colors, kind) {
+	return [...new Set(colors)].map((color) => chartGradient(color, kind));
+}
+function chartHatch(color) {
+	return `var(--_cui-chart-hatch-${color}, ${chartColor(color)})`;
+}
+function chartFillPaint(color, fill, kind) {
+	if (fill === "gradient") return `url(#cui-${kind}-${color})`;
+	if (fill === "hatched") return chartHatch(color);
+	return kind === "area" ? `oklch(from ${chartColor(color)} l c h / 0.2)` : chartColor(color);
+}
+function barGradientKind(axis, value) {
+	return value !== null && value < 0 ? `bar-${axis}-negative` : `bar-${axis}`;
+}
+function chartBarFill(row, axis) {
+	return chartFillPaint(row.color, row.fill, barGradientKind(axis, row.value));
+}
+function chartBarGradients(rows, axis) {
+	const gradients = /* @__PURE__ */ new Map();
+	for (const row of rows) {
+		if (row.fill !== "gradient") continue;
+		const gradient = chartGradient(row.color, barGradientKind(axis, row.value));
+		gradients.set(gradient.id, gradient);
+	}
+	return [...gradients.values()];
+}
+function chartOutline(color, fill) {
+	return fill === "hatched" ? chartColor(color) : "none";
+}
+function quietAxis(format) {
+	return {
+		line: false,
+		ticks: {
+			line: false,
+			padding: 8,
+			format
+		}
+	};
+}
+const quietGrid = { strokeDasharray: "3 3" };
+const dimUnfocused = [{
+	when: { focus: "unmatched" },
+	style: { opacity: .4 }
+}];
+function chartReferenceMarks(references, axis, anchor) {
+	if (references.length === 0) return [];
+	const paint = {
+		strokeDasharray: "4 4",
+		strokeOpacity: .7,
+		stroke: (reference) => chartColor(reference.color ?? "neutral")
+	};
+	const labelled = references.filter((reference) => reference.label);
+	const labelPaint = {
+		text: "label",
+		fill: (reference) => chartColor(reference.color ?? "neutral"),
+		fontSize: 11
+	};
+	const rules = axis === "y" ? ruleY(references, {
+		y: "value",
+		...paint
+	}) : ruleX(references, {
+		x: "value",
+		...paint
+	});
+	const marks = [decorative(chartPart(rules, "reference"))];
+	if (labelled.length === 0 || anchor === void 0) return marks;
+	const labels = axis === "y" ? text(labelled, {
+		...labelPaint,
+		x: () => anchor,
+		y: "value",
+		anchor: "end",
+		dy: -6
+	}) : text(labelled, {
+		...labelPaint,
+		x: "value",
+		y: () => anchor,
+		anchor: "start",
+		dx: 6
+	});
+	return [...marks, decorative(labels)];
+}
+function seriesTooltip(seriesLabels, formatX, formatValue) {
+	const seriesRank = (point) => seriesLabels.indexOf(point.datum.series);
+	return {
+		use: tooltip,
+		content: (points, context) => ({
+			title: points[0] ? formatX(points[0].datum.x) : void 0,
+			rows: [...points].sort((left, right) => seriesRank(left) - seriesRank(right)).flatMap((point) => point.datum.value === null ? [] : {
+				label: point.datum.series,
+				value: formatValue(point.datum.value),
+				color: chartColor(point.datum.color),
+				active: point.key === context.primaryPoint?.key
+			})
+		})
+	};
+}
+//#endregion
+export { chartBarFill, chartBarGradients, chartBars, chartFillPaint, chartGradient, chartGradients, chartHatch, chartOutline, chartPart, chartReferenceMarks, dimUnfocused, quietAxis, quietGrid, seriesTooltip };

package/dist/ui/chart-polar.d.ts

@@ -0,0 +1,103 @@
+import { ChartColor } from "./chart-colors.js";
+import { ChartFill, ChartValueKey, ChartXKey } from "./chart-series.js";
+//#region src/ui/chart-polar.d.ts
+export type ChartSliceOptions<TDatum> = {
+  data: readonly TDatum[];
+  label: ChartXKey<TDatum>;
+  value: ChartValueKey<TDatum>;
+  colors?: Partial<Record<string, ChartColor>>;
+  fill?: ChartFill;
+  fills?: Partial<Record<string, ChartFill>>;
+  formatValue?: (value: number) => string;
+  locale?: Intl.LocalesArgument;
+};
+export type ChartSlice = {
+  id: string;
+  label: string;
+  value: number;
+  color: ChartColor;
+  fill: ChartFill;
+};
+export declare function resolveChartSlices<TDatum>(options: ChartSliceOptions<TDatum>): ChartSlice[];
+export type DonutChartOptions<TDatum> = ChartSliceOptions<TDatum> & {
+  innerRadius?: number;
+};
+export declare function donutChart<TDatum>(options: DonutChartOptions<TDatum>): Omit<import("@tanstack/charts").StaticChartDefinition<import("@tanstack/charts/polar").PieDatum<ChartSlice>, number, number, string>, keyof import("@tanstack/charts").ChartDefinitionOptions<unknown, import("@tanstack/charts").ChartValue, import("@tanstack/charts").ChartValue, string> | keyof import("@tanstack/charts/types/core").StoredChartSpec> & Omit<{
+  readonly marks: readonly [import("@tanstack/charts").ChartMark<import("@tanstack/charts/polar").PieDatum<ChartSlice>, number, number, never, never, "x", "y">];
+  readonly scales: {
+    x: null;
+    y: null;
+  };
+  readonly gradients: import("@tanstack/charts").ChartLinearGradient[];
+  readonly tooltip: {
+    readonly use: import("@tanstack/charts").ChartTooltipExtension;
+    readonly content: (points: readonly import("@tanstack/charts").ChartPoint<NoInfer<import("@tanstack/charts/polar").PieDatum<ChartSlice>>, number, number>[], context: import("@tanstack/charts").ChartTooltipContentContext) => {
+      rows: {
+        label: string;
+        value: string;
+        color: string;
+        active: boolean;
+      }[];
+    };
+  };
+}, keyof import("@tanstack/charts").ChartDefinitionOptions<unknown, import("@tanstack/charts").ChartValue, import("@tanstack/charts").ChartValue, string>> & Pick<import("@tanstack/charts").StaticChartDefinition<import("@tanstack/charts/polar").PieDatum<ChartSlice>, number, number, string>, never> & Pick<{
+  readonly marks: readonly [import("@tanstack/charts").ChartMark<import("@tanstack/charts/polar").PieDatum<ChartSlice>, number, number, never, never, "x", "y">];
+  readonly scales: {
+    x: null;
+    y: null;
+  };
+  readonly gradients: import("@tanstack/charts").ChartLinearGradient[];
+  readonly tooltip: {
+    readonly use: import("@tanstack/charts").ChartTooltipExtension;
+    readonly content: (points: readonly import("@tanstack/charts").ChartPoint<NoInfer<import("@tanstack/charts/polar").PieDatum<ChartSlice>>, number, number>[], context: import("@tanstack/charts").ChartTooltipContentContext) => {
+      rows: {
+        label: string;
+        value: string;
+        color: string;
+        active: boolean;
+      }[];
+    };
+  };
+}, "tooltip">;
+export type RadialBarChartOptions<TDatum> = ChartSliceOptions<TDatum> & {
+  max?: number;
+  track?: "hatched" | "solid" | "none";
+};
+export declare function radialBarChart<TDatum>(options: RadialBarChartOptions<TDatum>): Omit<import("@tanstack/charts").StaticChartDefinition<ChartSlice, number, string, string>, keyof import("@tanstack/charts").ChartDefinitionOptions<unknown, import("@tanstack/charts").ChartValue, import("@tanstack/charts").ChartValue, string> | keyof import("@tanstack/charts/types/core").StoredChartSpec> & Omit<{
+  readonly marks: readonly [...import("@tanstack/charts/types/core").DecorativeChartMark<import("@tanstack/charts").ChartMark<ChartSlice, number, string, never, never, "x", "y">>[], import("@tanstack/charts").ChartMark<ChartSlice, number, string, never, never, "x", "y">];
+  readonly scales: {
+    x: null;
+    y: null;
+  };
+  readonly gradients: import("@tanstack/charts").ChartLinearGradient[];
+  readonly tooltip: {
+    readonly use: import("@tanstack/charts").ChartTooltipExtension;
+    readonly content: (points: readonly import("@tanstack/charts").ChartPoint<NoInfer<ChartSlice>, number, string>[], context: import("@tanstack/charts").ChartTooltipContentContext) => {
+      rows: {
+        label: string;
+        value: string;
+        color: string;
+        active: boolean;
+      }[];
+    };
+  };
+}, keyof import("@tanstack/charts").ChartDefinitionOptions<unknown, import("@tanstack/charts").ChartValue, import("@tanstack/charts").ChartValue, string>> & Pick<import("@tanstack/charts").StaticChartDefinition<ChartSlice, number, string, string>, never> & Pick<{
+  readonly marks: readonly [...import("@tanstack/charts/types/core").DecorativeChartMark<import("@tanstack/charts").ChartMark<ChartSlice, number, string, never, never, "x", "y">>[], import("@tanstack/charts").ChartMark<ChartSlice, number, string, never, never, "x", "y">];
+  readonly scales: {
+    x: null;
+    y: null;
+  };
+  readonly gradients: import("@tanstack/charts").ChartLinearGradient[];
+  readonly tooltip: {
+    readonly use: import("@tanstack/charts").ChartTooltipExtension;
+    readonly content: (points: readonly import("@tanstack/charts").ChartPoint<NoInfer<ChartSlice>, number, string>[], context: import("@tanstack/charts").ChartTooltipContentContext) => {
+      rows: {
+        label: string;
+        value: string;
+        color: string;
+        active: boolean;
+      }[];
+    };
+  };
+}, "tooltip">;
+//#endregion

package/dist/ui/chart-polar.js

@@ -0,0 +1,124 @@
+import { chartColor, chartSeriesColor } from "./chart-colors.js";
+import { chartFillPaint, chartGradients, chartHatch, chartOutline, dimUnfocused } from "./chart-marks.js";
+import { chartFormatters } from "./chart-series.js";
+import { defineChart } from "@tanstack/charts";
+import { decorative } from "@tanstack/charts/mark/decorative";
+import { scaleBand } from "@tanstack/charts/scales/band";
+import { scaleLinear } from "@tanstack/charts/scales/linear";
+import { tooltip } from "@tanstack/charts/tooltip";
+import { pie, polar, radialArc, radialBarAngle } from "@tanstack/charts/polar";
+//#region src/ui/chart-polar.ts
+function resolveChartSlices(options) {
+	return options.data.flatMap((datum, index) => {
+		const label = datum[options.label];
+		const value = datum[options.value];
+		if (typeof label !== "string" || typeof value !== "number" || !Number.isFinite(value) || value < 0) return [];
+		return {
+			id: label,
+			label,
+			value,
+			color: options.colors?.[label] ?? chartSeriesColor(index),
+			fill: options.fills?.[label] ?? options.fill ?? "gradient"
+		};
+	});
+}
+function donutChart(options) {
+	const slices = resolveChartSlices(options);
+	const innerRadius = options.innerRadius ?? .62;
+	const formats = chartFormatters(options.locale);
+	const formatValue = options.formatValue ?? formats.value;
+	return defineChart({
+		marks: [polar({
+			marks: [radialArc(pie(slices, {
+				value: "value",
+				gapAngle: .025
+			}), {
+				key: "label",
+				innerRadius: ({ radius }) => radius * innerRadius,
+				cornerRadius: 4,
+				fill: (slice) => chartFillPaint(slice.color, slice.fill, "arc"),
+				stroke: (slice) => chartOutline(slice.color, slice.fill),
+				strokeWidth: 1,
+				className: "cui-chart-arc",
+				states: dimUnfocused
+			})],
+			scales: {
+				angle: null,
+				radius: null
+			},
+			inset: 4
+		})],
+		scales: {
+			x: null,
+			y: null
+		},
+		gradients: chartGradients(slices.filter((slice) => slice.fill === "gradient").map((slice) => slice.color), "arc"),
+		tooltip: {
+			use: tooltip,
+			content: (points, context) => ({ rows: points.map((point) => ({
+				label: point.datum.label,
+				value: `${formatValue(point.datum.value)} · ${formats.percent(point.datum.fraction)}`,
+				color: chartColor(point.datum.color),
+				active: point.key === context.primaryPoint?.key
+			})) })
+		}
+	});
+}
+function radialBarChart(options) {
+	const rows = resolveChartSlices(options);
+	const max = options.max ?? Math.max(1, ...rows.map((row) => row.value));
+	const track = options.track ?? "hatched";
+	const formatValue = options.formatValue ?? chartFormatters(options.locale).value;
+	const ringScales = () => ({
+		angle: { scale: scaleLinear().domain([0, max]) },
+		radius: {
+			scale: () => scaleBand().padding(.3),
+			range: [({ radius }) => radius * .4, ({ radius }) => radius]
+		}
+	});
+	const trackMarks = track === "none" ? [] : [decorative(polar({
+		className: "cui-chart-radial-track",
+		marks: [radialBarAngle(rows, {
+			id: "track",
+			key: "id",
+			radius: "label",
+			angle: () => max,
+			cornerRadius: "full",
+			fill: track === "hatched" ? chartHatch("neutral") : "oklch(from var(--chart-neutral) l c h / 0.15)"
+		})],
+		scales: ringScales()
+	}))];
+	return defineChart({
+		marks: [...trackMarks, polar({
+			marks: [radialBarAngle(rows, {
+				id: "value",
+				key: "id",
+				radius: "label",
+				angle: "value",
+				cornerRadius: "full",
+				fill: (row) => chartFillPaint(row.color, row.fill, "arc"),
+				stroke: (row) => chartOutline(row.color, row.fill),
+				strokeWidth: 1,
+				className: "cui-chart-radial-bar",
+				states: dimUnfocused
+			})],
+			scales: ringScales()
+		})],
+		scales: {
+			x: null,
+			y: null
+		},
+		gradients: chartGradients(rows.filter((row) => row.fill === "gradient").map((row) => row.color), "arc"),
+		tooltip: {
+			use: tooltip,
+			content: (points, context) => ({ rows: points.map((point) => ({
+				label: point.datum.label,
+				value: `${formatValue(point.datum.value)} / ${formatValue(max)}`,
+				color: chartColor(point.datum.color),
+				active: point.key === context.primaryPoint?.key
+			})) })
+		}
+	});
+}
+//#endregion
+export { donutChart, radialBarChart, resolveChartSlices };

package/dist/ui/chart-series.d.ts

@@ -0,0 +1,36 @@
+import { ChartColor } from "./chart-colors.js";
+import { ChartPositionScaleOptions } from "@tanstack/charts";
+//#region src/ui/chart-series.d.ts
+export type ChartFill = "gradient" | "hatched" | "solid";
+export type ChartXValue = string | number | Date;
+export type ChartXKey<TDatum> = { [K in keyof TDatum]-?: TDatum[K] extends ChartXValue ? K : never; }[keyof TDatum] & keyof TDatum & string;
+export type ChartValueKey<TDatum> = { [K in keyof TDatum]-?: TDatum[K] extends number | null | undefined ? K : never; }[keyof TDatum] & keyof TDatum & string;
+export type ChartSeries<TDatum> = {
+  key: ChartValueKey<TDatum>;
+  label?: string;
+  color?: ChartColor;
+  fill?: ChartFill;
+  dashed?: boolean;
+};
+export type ResolvedChartSeries<TDatum> = Required<ChartSeries<TDatum>>;
+export type ChartSeriesRow = {
+  id: string;
+  x: ChartXValue;
+  value: number | null;
+  series: string;
+  color: ChartColor;
+  fill: ChartFill;
+};
+export declare function resolveChartSeries<TDatum>(series: readonly ChartSeries<TDatum>[], fill?: ChartFill): ResolvedChartSeries<TDatum>[];
+export declare function chartSeriesRows<TDatum>(data: readonly TDatum[], x: ChartXKey<TDatum>, series: readonly ResolvedChartSeries<TDatum>[]): ChartSeriesRow[];
+export type ChartFormatters = {
+  x: (value: ChartXValue) => string;
+  value: (value: number) => string;
+  tick: (value: number) => string;
+  percent: (value: number) => string;
+};
+export declare function chartFormatters(locale?: Intl.LocalesArgument): ChartFormatters;
+export declare function chartXScale(rows: readonly {
+  x: ChartXValue;
+}[], kind: "point" | "band", override?: Partial<ChartPositionScaleOptions>): ChartPositionScaleOptions;
+//#endregion

package/dist/ui/chart-series.js

@@ -0,0 +1,71 @@
+import { chartSeriesColor } from "./chart-colors.js";
+import { scaleBand } from "@tanstack/charts/scales/band";
+import { scaleLinear } from "@tanstack/charts/scales/linear";
+import { scalePoint } from "@tanstack/charts/scales/point";
+//#region src/ui/chart-series.ts
+function resolveChartSeries(series, fill = "gradient") {
+	return series.map((entry, index) => ({
+		key: entry.key,
+		label: entry.label ?? entry.key,
+		color: entry.color ?? chartSeriesColor(index),
+		fill: entry.fill ?? fill,
+		dashed: entry.dashed ?? false
+	}));
+}
+function isChartXValue(value) {
+	return typeof value === "string" || typeof value === "number" && Number.isFinite(value) || value instanceof Date;
+}
+function chartSeriesRows(data, x, series) {
+	return series.flatMap((entry) => data.flatMap((datum) => {
+		const xValue = datum[x];
+		if (!isChartXValue(xValue)) return [];
+		const value = datum[entry.key];
+		return {
+			id: `${entry.key}:${xValue instanceof Date ? xValue.toISOString() : String(xValue)}`,
+			x: xValue,
+			value: typeof value === "number" && Number.isFinite(value) ? value : null,
+			series: entry.label,
+			color: entry.color,
+			fill: entry.fill
+		};
+	}));
+}
+function chartFormatters(locale = "en-US") {
+	const plainNumber = new Intl.NumberFormat(locale);
+	const compactNumber = new Intl.NumberFormat(locale, { notation: "compact" });
+	const percentNumber = new Intl.NumberFormat(locale, { style: "percent" });
+	const shortDay = new Intl.DateTimeFormat(locale, {
+		month: "short",
+		day: "numeric",
+		timeZone: "UTC"
+	});
+	return {
+		x: (value) => {
+			if (value instanceof Date) return shortDay.format(value);
+			if (typeof value === "number") return plainNumber.format(value);
+			return value;
+		},
+		value: (value) => plainNumber.format(value),
+		tick: (value) => compactNumber.format(value),
+		percent: (value) => percentNumber.format(value)
+	};
+}
+function chartXScale(rows, kind, override) {
+	if (override?.scale) return {
+		...override,
+		scale: override.scale
+	};
+	const first = rows[0]?.x;
+	if (first instanceof Date) throw new Error("Chart presets need an xScale for Date x values, for example { scale: scaleUtc } from d3-scale.");
+	if (typeof first === "number") return {
+		scale: scaleLinear,
+		nice: true,
+		...override
+	};
+	return {
+		scale: kind === "band" ? () => scaleBand().padding(.3) : scalePoint,
+		...override
+	};
+}
+//#endregion
+export { chartFormatters, chartSeriesRows, chartXScale, resolveChartSeries };

package/dist/ui/chart.d.ts

@@ -0,0 +1,32 @@
+import { ChartKnobStyle } from "../knob-contracts/chart-knobs.js";
+import { ChartColor } from "./chart-colors.js";
+import { ChartFill } from "./chart-series.js";
+import { CSSProperties, ComponentProps, ReactNode } from "react";
+import { ChartTooltipContent, ChartValue } from "@tanstack/charts";
+import { ChartProps } from "@tanstack/charts/react/tooltip";
+//#region src/ui/chart.d.ts
+type ChartStyle = CSSProperties & ChartKnobStyle;
+export type ChartRootProps = Omit<ComponentProps<"div">, "style"> & {
+  style?: ChartStyle;
+};
+export declare function Chart({ className, style, ...props }: ChartRootProps): import("react").JSX.Element;
+export type ChartPlotProps<TDatum, TXValue extends ChartValue = ChartValue, TYValue extends ChartValue = ChartValue> = Omit<ChartProps<TDatum, TXValue, TYValue>, "style" | "className"> & {
+  className?: string;
+  style?: ChartStyle;
+  children?: ReactNode;
+};
+export declare function ChartPlot<TDatum, TXValue extends ChartValue = ChartValue, TYValue extends ChartValue = ChartValue>({ className, style, children, ...props }: ChartPlotProps<TDatum, TXValue, TYValue>): import("react").JSX.Element;
+export declare function ChartCenter({ className, ...props }: ComponentProps<"div">): import("react").JSX.Element;
+export declare function ChartLegend({ className, ...props }: ComponentProps<"ul">): import("react").JSX.Element;
+export type ChartLegendItemProps = Omit<ComponentProps<"li">, "color"> & {
+  color: ChartColor;
+  fill?: ChartFill;
+  hidden?: boolean;
+  onHiddenChange?: (hidden: boolean) => void;
+};
+export declare function ChartLegendItem({ color, fill, hidden, onHiddenChange, children, className, style, ...props }: ChartLegendItemProps): import("react").JSX.Element;
+export type ChartTooltipBodyProps = Omit<ComponentProps<"div">, "content"> & {
+  content: string | ChartTooltipContent;
+};
+export declare function ChartTooltipBody({ content, className, ...props }: ChartTooltipBodyProps): import("react").JSX.Element;
+//#endregion