@glyphui/ui 0.3.0 → 0.5.0

package/dist/patterns/chart/radial.js

@@ -0,0 +1,282 @@
+"use client";
+import { useControllableState } from "../../hooks/use-controllable-state.js";
+import { useMotionSettings } from "../../motion/use-motion-settings.js";
+import { ChartFrame, categoryColor, defaultFormatter, resolveColor, toggleIn, useChartAnimation, useChartParts } from "./chart-parts.js";
+import { chartTooltip, useCartesian } from "./cartesian.js";
+import { useEffect, useId, useState } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import * as R from "recharts";
+//#region src/patterns/chart/radial.tsx
+/** Compare a few items across several measures, e.g. plans by feature score. */
+function RadarChart(props) {
+	const { resolved, table, legend, onLegendToggle, valueFormatter } = useCartesian(props);
+	const animation = useChartAnimation();
+	const height = props.height ?? 280;
+	return /* @__PURE__ */ jsx(ChartFrame, {
+		title: props.title,
+		description: props.description,
+		hideTitle: props.hideTitle,
+		className: props.className,
+		legend,
+		onLegendToggle,
+		table,
+		height,
+		isEmpty: props.data.length === 0,
+		loading: props.loading,
+		error: props.error,
+		onRetry: props.onRetry,
+		empty: props.empty,
+		children: /* @__PURE__ */ jsx(R.ResponsiveContainer, {
+			width: "100%",
+			height,
+			children: /* @__PURE__ */ jsxs(R.RadarChart, {
+				accessibilityLayer: false,
+				data: props.data,
+				outerRadius: "72%",
+				children: [
+					/* @__PURE__ */ jsx(R.PolarGrid, { stroke: "var(--glyph-border)" }),
+					/* @__PURE__ */ jsx(R.PolarAngleAxis, {
+						dataKey: props.index,
+						tick: {
+							fill: "var(--glyph-muted-foreground)",
+							fontSize: 12
+						}
+					}),
+					/* @__PURE__ */ jsx(R.PolarRadiusAxis, {
+						angle: 90,
+						tick: false,
+						axisLine: false,
+						...props.max !== void 0 && { domain: [0, props.max] }
+					}),
+					chartTooltip(valueFormatter, false),
+					resolved.map((item) => /* @__PURE__ */ jsx(R.Radar, {
+						dataKey: item.key,
+						name: item.label,
+						hide: item.hidden,
+						stroke: item.stroke,
+						strokeWidth: 2,
+						fill: item.stroke,
+						fillOpacity: .14,
+						dot: {
+							r: 3,
+							fill: item.stroke,
+							strokeWidth: 0
+						},
+						...animation
+					}, item.key))
+				]
+			})
+		})
+	});
+}
+/** Progress of a few items toward the same goal, as concentric rings. */
+function RadialBarChart(props) {
+	const { data, category, value, valueFormatter = defaultFormatter, size = 220 } = props;
+	const { s, slots } = useChartParts();
+	const animation = useChartAnimation();
+	const [hidden, setHidden] = useControllableState({ defaultValue: [] });
+	const rows = data.map((row, i) => ({
+		row,
+		name: String(row[category]),
+		color: categoryColor(props.colors?.[i], i)
+	}));
+	const visible = rows.filter((item) => !hidden.includes(item.name));
+	const max = props.max ?? Math.max(0, ...rows.map((item) => Number(item.row[value]) || 0));
+	const table = {
+		columns: [String(category), String(value)],
+		rows: rows.map((item) => [item.name, valueFormatter(Number(item.row[value]))])
+	};
+	const legend = props.showLegend ?? true ? rows.map((item) => ({
+		key: item.name,
+		label: item.name,
+		color: item.color,
+		hidden: hidden.includes(item.name)
+	})) : void 0;
+	return /* @__PURE__ */ jsx(ChartFrame, {
+		title: props.title,
+		description: props.description,
+		hideTitle: props.hideTitle,
+		className: props.className,
+		legend,
+		onLegendToggle: rows.length > 1 ? (key) => setHidden(toggleIn(hidden, key, rows.length)) : void 0,
+		table,
+		height: size,
+		isEmpty: data.length === 0,
+		loading: props.loading,
+		error: props.error,
+		onRetry: props.onRetry,
+		empty: props.empty,
+		children: /* @__PURE__ */ jsxs("div", {
+			className: "relative mx-auto",
+			style: {
+				width: size,
+				maxWidth: "100%",
+				height: size
+			},
+			children: [/* @__PURE__ */ jsx(R.ResponsiveContainer, {
+				width: "100%",
+				height: "100%",
+				children: /* @__PURE__ */ jsxs(R.RadialBarChart, {
+					accessibilityLayer: false,
+					data: visible.map((item) => ({
+						...item.row,
+						fill: item.color
+					})),
+					innerRadius: "30%",
+					outerRadius: "100%",
+					startAngle: 90,
+					endAngle: -270,
+					barCategoryGap: "22%",
+					children: [
+						/* @__PURE__ */ jsx(R.PolarAngleAxis, {
+							type: "number",
+							domain: [0, max || 1],
+							tick: false
+						}),
+						chartTooltip(valueFormatter, false),
+						/* @__PURE__ */ jsx(R.RadialBar, {
+							dataKey: value,
+							name: String(value),
+							background: { fill: "var(--glyph-muted)" },
+							cornerRadius: 99,
+							...animation,
+							children: visible.map((item) => /* @__PURE__ */ jsx(R.Cell, {
+								fill: item.color,
+								name: item.name
+							}, item.name))
+						})
+					]
+				})
+			}), props.centerLabel && /* @__PURE__ */ jsx("div", {
+				className: s.center({ class: slots.center }),
+				children: props.centerLabel
+			})]
+		})
+	});
+}
+const ARC = 240;
+const START = 150;
+function polar(cx, cy, r, angle) {
+	const rad = angle * Math.PI / 180;
+	return {
+		x: cx + r * Math.cos(rad),
+		y: cy + r * Math.sin(rad)
+	};
+}
+function arcPath(cx, cy, r, from, to) {
+	const a = polar(cx, cy, r, from);
+	const b = polar(cx, cy, r, to);
+	const large = to - from > 180 ? 1 : 0;
+	return `M ${a.x} ${a.y} A ${r} ${r} 0 ${large} 1 ${b.x} ${b.y}`;
+}
+/** A single value against a range, e.g. latency, quota used or a health score. */
+function Gauge({ value, min = 0, max = 100, title, description, hideTitle, bands, color, valueFormatter = defaultFormatter, label, size = 220, className }) {
+	const { s, slots } = useChartParts();
+	const { animate } = useMotionSettings();
+	const id = useId();
+	const span = max - min || 1;
+	const clamped = Math.min(Math.max(value, min), max);
+	const share = (clamped - min) / span;
+	const [shown, setShown] = useState(animate ? 0 : share);
+	useEffect(() => {
+		const frame = requestAnimationFrame(() => setShown(share));
+		return () => cancelAnimationFrame(frame);
+	}, [share]);
+	const band = bands?.find((item) => clamped <= item.to) ?? bands?.[bands.length - 1];
+	const stroke = resolveColor(band?.color ?? color ?? "chart-1", 0);
+	const width = 200;
+	const r = 80;
+	const cx = 100;
+	const cy = 100;
+	const thickness = 14;
+	const length = Math.PI * r * ARC / 180;
+	const text = valueFormatter(value);
+	const bandMarks = [];
+	if (bands?.length) {
+		let previous = min;
+		for (const item of bands) {
+			const to = Math.min(item.to, max);
+			bandMarks.push({
+				from: START + (previous - min) / span * ARC,
+				to: START + (to - min) / span * ARC,
+				color: resolveColor(item.color, 0)
+			});
+			previous = to;
+		}
+	}
+	return /* @__PURE__ */ jsxs("figure", {
+		"data-slot": "gauge",
+		"aria-labelledby": `${id}-title`,
+		className: s.root({ class: [slots.root, className] }),
+		children: [/* @__PURE__ */ jsxs("figcaption", {
+			className: hideTitle ? s.srOnly() : s.caption({ class: slots.caption }),
+			children: [/* @__PURE__ */ jsx("span", {
+				id: `${id}-title`,
+				className: s.title({ class: slots.title }),
+				children: title
+			}), description && /* @__PURE__ */ jsx("span", {
+				className: s.description({ class: slots.description }),
+				children: description
+			})]
+		}), /* @__PURE__ */ jsxs("div", {
+			role: "meter",
+			"aria-labelledby": `${id}-title`,
+			"aria-valuenow": value,
+			"aria-valuemin": min,
+			"aria-valuemax": max,
+			"aria-valuetext": band?.label ? `${text}, ${band.label}` : text,
+			className: "relative mx-auto w-full",
+			style: { maxWidth: size },
+			children: [
+				/* @__PURE__ */ jsxs("svg", {
+					viewBox: `0 0 ${width} 172`,
+					className: "block h-auto w-full",
+					"aria-hidden": "true",
+					children: [
+						/* @__PURE__ */ jsx("path", {
+							d: arcPath(cx, cy, r, START, 390),
+							fill: "none",
+							stroke: "var(--glyph-muted)",
+							strokeWidth: thickness,
+							strokeLinecap: "round"
+						}),
+						bandMarks.map((mark, i) => /* @__PURE__ */ jsx("path", {
+							d: arcPath(cx, cy, 92, mark.from + .5, mark.to - .5),
+							fill: "none",
+							stroke: mark.color,
+							strokeWidth: 3,
+							strokeOpacity: .55
+						}, i)),
+						/* @__PURE__ */ jsx("path", {
+							"data-slot": "gauge-value",
+							d: arcPath(cx, cy, r, START, 390),
+							fill: "none",
+							stroke,
+							strokeWidth: thickness,
+							strokeLinecap: "round",
+							strokeDasharray: length,
+							strokeDashoffset: length * (1 - shown),
+							style: animate ? { transition: "stroke-dashoffset calc(var(--glyph-duration-slow) * 2.5) var(--glyph-ease-emphasized), stroke var(--glyph-duration-base)" } : void 0
+						})
+					]
+				}),
+				/* @__PURE__ */ jsxs("div", {
+					className: "pointer-events-none absolute inset-x-0 top-[38%] flex flex-col items-center text-center",
+					children: [/* @__PURE__ */ jsx("span", {
+						className: "font-display text-h3 tabular-nums text-foreground",
+						children: text
+					}), (label || band?.label) && /* @__PURE__ */ jsx("span", {
+						className: "text-caption text-muted-foreground",
+						children: label ?? band?.label
+					})]
+				}),
+				/* @__PURE__ */ jsxs("div", {
+					className: "flex justify-between px-[9%] text-caption text-muted-foreground tabular-nums",
+					children: [/* @__PURE__ */ jsx("span", { children: valueFormatter(min) }), /* @__PURE__ */ jsx("span", { children: valueFormatter(max) })]
+				})
+			]
+		})]
+	});
+}
+//#endregion
+export { Gauge, RadarChart, RadialBarChart };

package/dist/patterns/chart/sankey.d.ts

@@ -0,0 +1,29 @@
+import { ChartColorValue, ChartStateProps } from "./chart-parts.js";
+import { ReactNode } from "react";
+//#region src/patterns/chart/sankey.d.ts
+export interface SankeyLink {
+  /** Name of the node the flow starts at. */
+  source: string;
+  /** Name of the node the flow ends at. */
+  target: string;
+  value: number;
+}
+export interface SankeyNode {
+  name: string;
+  color?: ChartColorValue;
+}
+export interface SankeyChartProps extends ChartStateProps {
+  links: readonly SankeyLink[];
+  /** Node order and colors. Defaults to every name in `links`, in order of appearance. */
+  nodes?: readonly (SankeyNode | string)[];
+  title: string;
+  description?: ReactNode;
+  hideTitle?: boolean;
+  valueFormatter?: (value: number) => string;
+  /** Plot height in pixels. Default 300. */
+  height?: number;
+  className?: string;
+}
+/** Where a quantity flows between stages, e.g. traffic sources to pages to signups. */
+export declare function SankeyChart(props: SankeyChartProps): import("react").JSX.Element;
+//#endregion

package/dist/patterns/chart/sankey.js

@@ -0,0 +1,136 @@
+"use client";
+import { ChartFrame, categoryColor, defaultFormatter, useChartParts } from "./chart-parts.js";
+import { useElementWidth } from "./use-element-width.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+import * as R from "recharts";
+//#region src/patterns/chart/sankey.tsx
+/** Where a quantity flows between stages, e.g. traffic sources to pages to signups. */
+function SankeyChart(props) {
+	const { links, valueFormatter = defaultFormatter, height = 300 } = props;
+	const { s, slots } = useChartParts();
+	const [ref, width] = useElementWidth();
+	const declared = (props.nodes ?? []).map((node) => typeof node === "string" ? { name: node } : node);
+	const names = declared.map((node) => node.name);
+	for (const link of links) {
+		if (!names.includes(link.source)) names.push(link.source);
+		if (!names.includes(link.target)) names.push(link.target);
+	}
+	const colors = names.map((name, i) => categoryColor(declared.find((node) => node.name === name)?.color, i));
+	const data = {
+		nodes: names.map((name) => ({ name })),
+		links: links.filter((link) => link.value > 0 && link.source !== link.target).map((link) => ({
+			source: names.indexOf(link.source),
+			target: names.indexOf(link.target),
+			value: link.value
+		}))
+	};
+	const table = {
+		columns: [
+			"Source",
+			"Target",
+			"Value"
+		],
+		rows: links.map((link) => [
+			link.source,
+			link.target,
+			valueFormatter(link.value)
+		])
+	};
+	const labelRoom = Math.min(140, width * .25);
+	const renderNode = ({ x, y, width: w, height: h, index, payload }) => {
+		const right = x + w > width - labelRoom;
+		return /* @__PURE__ */ jsxs("g", { children: [/* @__PURE__ */ jsx("rect", {
+			x,
+			y,
+			width: w,
+			height: Math.max(h, 1),
+			rx: 2,
+			fill: colors[index]
+		}), h > 10 && /* @__PURE__ */ jsxs("text", {
+			x: right ? x - 8 : x + w + 8,
+			y: y + h / 2,
+			dominantBaseline: "central",
+			textAnchor: right ? "end" : "start",
+			fontSize: 12,
+			fill: "var(--glyph-foreground)",
+			stroke: "var(--glyph-surface)",
+			strokeWidth: 3,
+			strokeLinejoin: "round",
+			paintOrder: "stroke",
+			children: [payload.name, /* @__PURE__ */ jsx("tspan", {
+				fill: "var(--glyph-muted-foreground)",
+				dx: 6,
+				children: valueFormatter(payload.value)
+			})]
+		})] });
+	};
+	const renderLink = (link) => {
+		const color = colors[names.indexOf(link.payload.source.name)];
+		return /* @__PURE__ */ jsx("path", {
+			d: `M${link.sourceX},${link.sourceY} C${link.sourceControlX},${link.sourceY} ${link.targetControlX},${link.targetY} ${link.targetX},${link.targetY}`,
+			fill: "none",
+			stroke: color,
+			strokeWidth: Math.max(link.linkWidth, 1),
+			strokeOpacity: .28,
+			className: "transition-[stroke-opacity] hover:[stroke-opacity:0.5]"
+		});
+	};
+	return /* @__PURE__ */ jsx(ChartFrame, {
+		title: props.title,
+		description: props.description,
+		hideTitle: props.hideTitle,
+		className: props.className,
+		table,
+		height,
+		isEmpty: data.links.length === 0,
+		loading: props.loading,
+		error: props.error,
+		onRetry: props.onRetry,
+		empty: props.empty,
+		children: /* @__PURE__ */ jsx("div", {
+			ref,
+			className: "w-full",
+			children: /* @__PURE__ */ jsx(R.Sankey, {
+				width,
+				height,
+				data,
+				nodeWidth: 10,
+				nodePadding: 18,
+				linkCurvature: .5,
+				iterations: 48,
+				margin: {
+					top: 8,
+					bottom: 8,
+					left: 0,
+					right: 0
+				},
+				node: renderNode,
+				link: renderLink,
+				children: /* @__PURE__ */ jsx(R.Tooltip, {
+					isAnimationActive: false,
+					content: (p) => {
+						const payload = (p.payload?.[0])?.payload?.payload;
+						if (!p.active || !payload) return null;
+						const label = payload.source ? `${payload.source.name} → ${payload.target?.name}` : payload.name;
+						return /* @__PURE__ */ jsx("div", {
+							"data-slot": "chart-tooltip",
+							className: s.tooltip({ class: slots.tooltip }),
+							children: /* @__PURE__ */ jsxs("div", {
+								className: s.tooltipRow({ class: slots.tooltipRow }),
+								children: [/* @__PURE__ */ jsx("span", {
+									className: s.tooltipName({ class: slots.tooltipName }),
+									children: label
+								}), /* @__PURE__ */ jsx("span", {
+									className: s.tooltipValue({ class: slots.tooltipValue }),
+									children: valueFormatter(Number(payload.value))
+								})]
+							})
+						});
+					}
+				})
+			})
+		})
+	});
+}
+//#endregion
+export { SankeyChart };

package/dist/patterns/chart/scatter.d.ts

@@ -0,0 +1,42 @@
+import { ChartColorValue, ChartStateProps, Key } from "./chart-parts.js";
+import { ChartAxisOptions, ChartReferenceArea, ChartReferenceLine } from "./cartesian.js";
+import { ReactNode } from "react";
+//#region src/patterns/chart/scatter.d.ts
+export interface ScatterChartProps<T extends object> extends ChartStateProps {
+  data: readonly T[];
+  /** Field for the horizontal position. */
+  x: Key<T>;
+  /** Field for the vertical position. */
+  y: Key<T>;
+  /** Field for the point size. Turns the scatter into a bubble chart. */
+  size?: Key<T>;
+  /** Field naming each point, shown in the tooltip. */
+  name?: Key<T>;
+  /** Field that splits points into colored groups with a legend. */
+  groupBy?: Key<T>;
+  title: string;
+  description?: ReactNode;
+  hideTitle?: boolean;
+  /** Axis titles and tick formatters. Name the axes: a scatter has no other labels. */
+  xAxis?: ChartAxisOptions;
+  yAxis?: ChartAxisOptions;
+  /** Smallest and largest bubble area in pixels. Default `[40, 600]`. */
+  sizeRange?: readonly [number, number];
+  /** One color per group, in order. */
+  colors?: readonly ChartColorValue[];
+  /** Formats `size` in the tooltip. */
+  sizeFormatter?: (value: number) => string;
+  referenceLines?: readonly ChartReferenceLine[];
+  referenceAreas?: readonly ChartReferenceArea[];
+  /** Plot height in pixels. Default 280. */
+  height?: number;
+  showGrid?: boolean;
+  showLegend?: boolean;
+  hiddenGroups?: readonly string[];
+  onHiddenGroupsChange?: (hidden: string[]) => void;
+  onPointClick?: (row: T) => void;
+  className?: string;
+}
+/** How two measures relate, one dot per item. Add `size` for a third measure. */
+export declare function ScatterChart<T extends object>(props: ScatterChartProps<T>): import("react").JSX.Element;
+//#endregion

package/dist/patterns/chart/scatter.js

@@ -0,0 +1,203 @@
+"use client";
+import { useControllableState } from "../../hooks/use-controllable-state.js";
+import { ChartFrame, categoryColor, defaultFormatter, toggleIn, useChartAnimation, useChartParts } from "./chart-parts.js";
+import { axisTick, axisWidth, overlays } from "./cartesian.js";
+import { useMemo } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import * as R from "recharts";
+//#region src/patterns/chart/scatter.tsx
+/** How two measures relate, one dot per item. Add `size` for a third measure. */
+function ScatterChart(props) {
+	const { data, x, y, size, name, groupBy, height = 280 } = props;
+	const { s, slots } = useChartParts();
+	const animation = useChartAnimation();
+	const [hidden, setHidden] = useControllableState({
+		value: props.hiddenGroups,
+		defaultValue: [],
+		onChange: props.onHiddenGroupsChange
+	});
+	const xFormat = props.xAxis?.formatter ?? defaultFormatter;
+	const yFormat = props.yAxis?.formatter ?? defaultFormatter;
+	const sizeFormat = props.sizeFormatter ?? defaultFormatter;
+	const groups = useMemo(() => {
+		const order = [];
+		const byGroup = /* @__PURE__ */ new Map();
+		for (const row of data) {
+			const key = groupBy ? String(row[groupBy]) : props.title;
+			if (!byGroup.has(key)) {
+				byGroup.set(key, []);
+				order.push(key);
+			}
+			byGroup.get(key).push(row);
+		}
+		return order.map((key, i) => ({
+			key,
+			rows: byGroup.get(key),
+			color: categoryColor(props.colors?.[i], i)
+		}));
+	}, [
+		data,
+		groupBy,
+		props.colors,
+		props.title
+	]);
+	const columns = [
+		...name ? [String(name)] : [],
+		...groupBy ? [String(groupBy)] : [],
+		props.xAxis?.label ?? String(x),
+		props.yAxis?.label ?? String(y),
+		...size ? [String(size)] : []
+	];
+	const table = {
+		columns: name || groupBy ? columns : ["#", ...columns],
+		rows: data.map((row, i) => [
+			...name ? [String(row[name])] : [],
+			...groupBy ? [String(row[groupBy])] : [],
+			...name || groupBy ? [] : [i + 1],
+			xFormat(Number(row[x])),
+			yFormat(Number(row[y])),
+			...size ? [sizeFormat(Number(row[size]))] : []
+		])
+	};
+	const legend = props.showLegend ?? groups.length > 1 ? groups.map((group) => ({
+		key: group.key,
+		label: group.key,
+		color: group.color,
+		hidden: hidden.includes(group.key)
+	})) : void 0;
+	const cartesian = props;
+	const content = ({ active, payload }) => {
+		const row = payload?.[0]?.payload;
+		if (!active || !row) return null;
+		const lines = [
+			[props.xAxis?.label ?? String(x), xFormat(Number(row[x]))],
+			[props.yAxis?.label ?? String(y), yFormat(Number(row[y]))],
+			...size ? [[String(size), sizeFormat(Number(row[size]))]] : []
+		];
+		return /* @__PURE__ */ jsxs("div", {
+			"data-slot": "chart-tooltip",
+			className: s.tooltip({ class: slots.tooltip }),
+			children: [(name || groupBy) && /* @__PURE__ */ jsx("p", {
+				className: s.tooltipLabel({ class: slots.tooltipLabel }),
+				children: String(row[name ?? groupBy])
+			}), lines.map(([label, value]) => /* @__PURE__ */ jsxs("div", {
+				className: s.tooltipRow({ class: slots.tooltipRow }),
+				children: [/* @__PURE__ */ jsx("span", {
+					className: s.tooltipName({ class: slots.tooltipName }),
+					children: label
+				}), /* @__PURE__ */ jsx("span", {
+					className: s.tooltipValue({ class: slots.tooltipValue }),
+					children: value
+				})]
+			}, label))]
+		});
+	};
+	return /* @__PURE__ */ jsx(ChartFrame, {
+		title: props.title,
+		description: props.description,
+		hideTitle: props.hideTitle,
+		className: props.className,
+		legend,
+		onLegendToggle: groups.length > 1 ? (key) => setHidden(toggleIn(hidden, key, groups.length)) : void 0,
+		table,
+		height,
+		isEmpty: data.length === 0,
+		loading: props.loading,
+		error: props.error,
+		onRetry: props.onRetry,
+		empty: props.empty,
+		children: /* @__PURE__ */ jsx(R.ResponsiveContainer, {
+			width: "100%",
+			height,
+			children: /* @__PURE__ */ jsxs(R.ScatterChart, {
+				accessibilityLayer: false,
+				margin: {
+					top: 8,
+					right: 12,
+					bottom: props.xAxis?.label ? 16 : 0,
+					left: 0
+				},
+				children: [
+					(props.showGrid ?? true) && /* @__PURE__ */ jsx(R.CartesianGrid, {
+						stroke: "var(--glyph-border)",
+						strokeDasharray: "3 3",
+						yAxisId: "left"
+					}),
+					/* @__PURE__ */ jsx(R.XAxis, {
+						type: "number",
+						dataKey: x,
+						name: props.xAxis?.label ?? String(x),
+						hide: props.xAxis?.hide,
+						tick: axisTick,
+						tickLine: false,
+						axisLine: false,
+						tickMargin: 8,
+						tickFormatter: xFormat,
+						domain: props.xAxis?.domain ?? ["auto", "auto"],
+						...props.xAxis?.label && { label: {
+							value: props.xAxis.label,
+							position: "insideBottom",
+							offset: -12,
+							...axisTick
+						} }
+					}),
+					/* @__PURE__ */ jsx(R.YAxis, {
+						yAxisId: "left",
+						type: "number",
+						dataKey: y,
+						name: props.yAxis?.label ?? String(y),
+						hide: props.yAxis?.hide,
+						tick: axisTick,
+						tickLine: false,
+						axisLine: false,
+						width: props.yAxis?.width ?? axisWidth(data, [y], yFormat, props.yAxis?.label ? 18 : 0),
+						tickFormatter: yFormat,
+						domain: props.yAxis?.domain ?? ["auto", "auto"],
+						...props.yAxis?.label && { label: {
+							value: props.yAxis.label,
+							angle: -90,
+							position: "insideLeft",
+							...axisTick
+						} }
+					}),
+					size && /* @__PURE__ */ jsx(R.ZAxis, {
+						type: "number",
+						dataKey: size,
+						range: props.sizeRange ?? [40, 600]
+					}),
+					/* @__PURE__ */ jsx(R.Tooltip, {
+						cursor: {
+							stroke: "var(--glyph-border-strong)",
+							strokeDasharray: "3 3"
+						},
+						isAnimationActive: false,
+						content: (p) => content(p)
+					}),
+					overlays({
+						...cartesian,
+						brush: false
+					}),
+					groups.map((group) => /* @__PURE__ */ jsx(R.Scatter, {
+						yAxisId: "left",
+						name: group.key,
+						data: group.rows,
+						fill: group.color,
+						fillOpacity: size ? .65 : .9,
+						stroke: "var(--glyph-surface)",
+						strokeWidth: 1.5,
+						hide: hidden.includes(group.key),
+						...props.onPointClick && {
+							onClick: (point) => {
+								if (point.payload) props.onPointClick?.(point.payload);
+							},
+							style: { cursor: "pointer" }
+						},
+						...animation
+					}, group.key))
+				]
+			})
+		})
+	});
+}
+//#endregion
+export { ScatterChart };