@langchain/macaw-components 1.0.0-beta.0

package/dist/components/LineChart/LineChart.utils.js

@@ -0,0 +1,123 @@
+import { scaleBand, scaleLinear } from "@visx/scale";
+//#region packages/components/src/components/LineChart/LineChart.utils.ts
+var getSelectionBounds = (start, end, maximum) => {
+	if (start == null || end == null || !Number.isFinite(start) || !Number.isFinite(end)) return null;
+	const clampedStart = Math.max(0, Math.min(maximum, start));
+	const clampedEnd = Math.max(0, Math.min(maximum, end));
+	return {
+		x: Math.min(clampedStart, clampedEnd),
+		width: Math.abs(clampedEnd - clampedStart)
+	};
+};
+var expandFlatDomain = (value) => {
+	const padding = Math.max(Math.abs(value) * .05, 1);
+	return [value - padding, value + padding];
+};
+var interpolateValue = (value, inputs, outputs) => {
+	const firstInput = inputs[0];
+	const firstOutput = outputs[0];
+	if (firstInput == null || firstOutput == null) return 0;
+	if (inputs.length === 1) return firstOutput;
+	const lastInput = inputs.at(-1);
+	const lastOutput = outputs.at(-1);
+	if (lastInput == null || lastOutput == null) return firstOutput;
+	const upperIndex = inputs.findIndex((input, index) => index > 0 && value <= input);
+	const resolvedUpperIndex = upperIndex === -1 ? inputs.length - 1 : upperIndex;
+	const input = inputs[resolvedUpperIndex];
+	const previousInput = inputs[resolvedUpperIndex - 1];
+	const output = outputs[resolvedUpperIndex];
+	const previousOutput = outputs[resolvedUpperIndex - 1];
+	if (input == null || previousInput == null || output == null || previousOutput == null) return lastOutput;
+	const inputDistance = input - previousInput;
+	if (inputDistance === 0) return previousOutput;
+	return previousOutput + (value - previousInput) / inputDistance * (output - previousOutput);
+};
+var createLineChartXScaleAdapter = ({ type, domain, values, width, nice }) => {
+	if (type === "band") {
+		const scale = scaleBand({
+			domain: Array.from(values),
+			range: [0, width],
+			padding: .1
+		});
+		const positions = values.map((value) => (scale(value) ?? 0) + scale.bandwidth() / 2);
+		const getBandPosition = (value) => {
+			const firstValue = values[0];
+			if (firstValue == null) return NaN;
+			if (values.length === 1 && value !== firstValue) return value < firstValue ? -scale.step() : width + scale.step();
+			return interpolateValue(value, values, positions);
+		};
+		return {
+			scale,
+			getPosition: getBandPosition,
+			getValue: (position) => Math.max(domain[0], Math.min(domain[1], interpolateValue(position, positions, values))),
+			getRangePosition: getBandPosition
+		};
+	}
+	const scale = scaleLinear({
+		domain: Array.from(domain),
+		range: [0, width],
+		nice
+	});
+	return {
+		scale,
+		getPosition: (value) => scale(value),
+		getValue: (position) => scale.invert(position),
+		getRangePosition: (value) => scale(value)
+	};
+};
+var getNumericDomain = (values, configuredDomain) => {
+	if (configuredDomain != null && Number.isFinite(configuredDomain[0]) && Number.isFinite(configuredDomain[1])) {
+		const minimum = Math.min(configuredDomain[0], configuredDomain[1]);
+		const maximum = Math.max(configuredDomain[0], configuredDomain[1]);
+		return minimum === maximum ? expandFlatDomain(minimum) : [minimum, maximum];
+	}
+	const finiteValues = values.filter(Number.isFinite);
+	if (finiteValues.length === 0) return [0, 1];
+	const minimum = Math.min(...finiteValues);
+	const maximum = Math.max(...finiteValues);
+	return minimum === maximum ? expandFlatDomain(minimum) : [minimum, maximum];
+};
+var normalizeLineChartSeries = (series) => series.map((item) => ({
+	...item,
+	points: item.points.reduce((points, point) => {
+		if (!Number.isFinite(point.x)) return points;
+		points.push({
+			x: point.x,
+			y: point.y != null && Number.isFinite(point.y) ? point.y : null
+		});
+		return points;
+	}, []).sort((left, right) => left.x - right.x)
+}));
+var getLineSegments = (points, connectNulls = true) => {
+	if (connectNulls) {
+		const validPoints = points.filter((point) => point.y != null);
+		return validPoints.length === 0 ? [] : [validPoints];
+	}
+	const segments = [];
+	let current = [];
+	for (const point of points) if (point.y == null) {
+		if (current.length > 0) segments.push(current);
+		current = [];
+	} else current.push(point);
+	if (current.length > 0) segments.push(current);
+	return segments;
+};
+var getLineChartYDomainValues = (points, domain, connectNulls = true) => {
+	const values = points.flatMap((point) => point.x >= domain[0] && point.x <= domain[1] && point.y != null ? [point.y] : []);
+	const renderedPoints = connectNulls ? points.filter((point) => point.y != null) : points;
+	for (let index = 1; index < renderedPoints.length; index += 1) {
+		const previousPoint = renderedPoints[index - 1];
+		const point = renderedPoints[index];
+		if (previousPoint?.y == null || point?.y == null || previousPoint.x === point.x) continue;
+		for (const boundary of domain) {
+			if (previousPoint.x >= boundary || point.x <= boundary) continue;
+			const ratio = (boundary - previousPoint.x) / (point.x - previousPoint.x);
+			values.push(previousPoint.y + ratio * (point.y - previousPoint.y));
+		}
+	}
+	return values;
+};
+//#endregion
+export { createLineChartXScaleAdapter, getLineChartYDomainValues, getLineSegments, getNumericDomain, getSelectionBounds, normalizeLineChartSeries };
+
+//# sourceMappingURL=LineChart.utils.js.map

package/dist/components/LineChart/LineChart.utils.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"LineChart.utils.js","names":[],"sources":["../../../src/components/LineChart/LineChart.utils.ts"],"sourcesContent":["import { scaleBand, scaleLinear } from '@visx/scale';\n\nimport type {\n  LineChartPoint,\n  LineChartSeries,\n  LineChartXScale,\n} from './LineChart.types';\n\nexport type NormalizedLineChartSeries = Omit<LineChartSeries, 'points'> & {\n  points: readonly LineChartPoint[];\n};\n\ntype CreateLineChartXScaleAdapterArgs = {\n  type: LineChartXScale;\n  domain: readonly [number, number];\n  values: readonly number[];\n  width: number;\n  nice: boolean;\n};\n\nexport type LineChartScale =\n  | ReturnType<typeof scaleBand<number>>\n  | ReturnType<typeof scaleLinear<number>>;\n\nexport type LineChartXScaleAdapter = {\n  scale: LineChartScale;\n  getPosition: (value: number) => number;\n  getValue: (position: number) => number;\n  getRangePosition: (value: number) => number;\n};\n\nexport const getSelectionBounds = (\n  start: number | null,\n  end: number | null,\n  maximum: number\n) => {\n  if (\n    start == null ||\n    end == null ||\n    !Number.isFinite(start) ||\n    !Number.isFinite(end)\n  ) {\n    return null;\n  }\n  const clampedStart = Math.max(0, Math.min(maximum, start));\n  const clampedEnd = Math.max(0, Math.min(maximum, end));\n  return {\n    x: Math.min(clampedStart, clampedEnd),\n    width: Math.abs(clampedEnd - clampedStart),\n  };\n};\n\nconst expandFlatDomain = (value: number): [number, number] => {\n  const padding = Math.max(Math.abs(value) * 0.05, 1);\n  return [value - padding, value + padding];\n};\n\nconst interpolateValue = (\n  value: number,\n  inputs: readonly number[],\n  outputs: readonly number[]\n): number => {\n  const firstInput = inputs[0];\n  const firstOutput = outputs[0];\n  if (firstInput == null || firstOutput == null) return 0;\n  if (inputs.length === 1) return firstOutput;\n\n  const lastInput = inputs.at(-1);\n  const lastOutput = outputs.at(-1);\n  if (lastInput == null || lastOutput == null) return firstOutput;\n\n  const upperIndex = inputs.findIndex(\n    (input, index) => index > 0 && value <= input\n  );\n  const resolvedUpperIndex = upperIndex === -1 ? inputs.length - 1 : upperIndex;\n  const input = inputs[resolvedUpperIndex];\n  const previousInput = inputs[resolvedUpperIndex - 1];\n  const output = outputs[resolvedUpperIndex];\n  const previousOutput = outputs[resolvedUpperIndex - 1];\n  if (\n    input == null ||\n    previousInput == null ||\n    output == null ||\n    previousOutput == null\n  ) {\n    return lastOutput;\n  }\n\n  const inputDistance = input - previousInput;\n  if (inputDistance === 0) return previousOutput;\n  const ratio = (value - previousInput) / inputDistance;\n  return previousOutput + ratio * (output - previousOutput);\n};\n\nexport const createLineChartXScaleAdapter = ({\n  type,\n  domain,\n  values,\n  width,\n  nice,\n}: CreateLineChartXScaleAdapterArgs): LineChartXScaleAdapter => {\n  if (type === 'band') {\n    const scale = scaleBand<number>({\n      domain: Array.from(values),\n      range: [0, width],\n      padding: 0.1,\n    });\n    const positions = values.map(\n      (value) => (scale(value) ?? 0) + scale.bandwidth() / 2\n    );\n    const getBandPosition = (value: number) => {\n      const firstValue = values[0];\n      if (firstValue == null) return Number.NaN;\n      if (values.length === 1 && value !== firstValue) {\n        return value < firstValue ? -scale.step() : width + scale.step();\n      }\n      return interpolateValue(value, values, positions);\n    };\n    return {\n      scale,\n      getPosition: getBandPosition,\n      getValue: (position: number) =>\n        Math.max(\n          domain[0],\n          Math.min(domain[1], interpolateValue(position, positions, values))\n        ),\n      getRangePosition: getBandPosition,\n    };\n  }\n\n  const scale = scaleLinear<number>({\n    domain: Array.from(domain),\n    range: [0, width],\n    nice,\n  });\n  return {\n    scale,\n    getPosition: (value: number) => scale(value),\n    getValue: (position: number) => scale.invert(position),\n    getRangePosition: (value: number) => scale(value),\n  };\n};\n\nexport const getNumericDomain = (\n  values: readonly number[],\n  configuredDomain?: readonly [number, number]\n): [number, number] => {\n  if (\n    configuredDomain != null &&\n    Number.isFinite(configuredDomain[0]) &&\n    Number.isFinite(configuredDomain[1])\n  ) {\n    const minimum = Math.min(configuredDomain[0], configuredDomain[1]);\n    const maximum = Math.max(configuredDomain[0], configuredDomain[1]);\n    return minimum === maximum ? expandFlatDomain(minimum) : [minimum, maximum];\n  }\n\n  const finiteValues = values.filter(Number.isFinite);\n  if (finiteValues.length === 0) return [0, 1];\n\n  const minimum = Math.min(...finiteValues);\n  const maximum = Math.max(...finiteValues);\n  return minimum === maximum ? expandFlatDomain(minimum) : [minimum, maximum];\n};\n\nexport const normalizeLineChartSeries = (\n  series: readonly LineChartSeries[]\n): readonly NormalizedLineChartSeries[] =>\n  series.map((item) => ({\n    ...item,\n    points: item.points\n      .reduce<LineChartPoint[]>((points, point) => {\n        if (!Number.isFinite(point.x)) return points;\n        points.push({\n          x: point.x,\n          y: point.y != null && Number.isFinite(point.y) ? point.y : null,\n        });\n        return points;\n      }, [])\n      .sort((left, right) => left.x - right.x),\n  }));\n\nexport const getLineSegments = (\n  points: readonly LineChartPoint[],\n  connectNulls = true\n): readonly LineChartPoint[][] => {\n  if (connectNulls) {\n    const validPoints = points.filter((point) => point.y != null);\n    return validPoints.length === 0 ? [] : [validPoints];\n  }\n\n  const segments: LineChartPoint[][] = [];\n  let current: LineChartPoint[] = [];\n\n  for (const point of points) {\n    if (point.y == null) {\n      if (current.length > 0) segments.push(current);\n      current = [];\n    } else {\n      current.push(point);\n    }\n  }\n\n  if (current.length > 0) segments.push(current);\n  return segments;\n};\n\nexport const getLineChartYDomainValues = (\n  points: readonly LineChartPoint[],\n  domain: readonly [number, number],\n  connectNulls = true\n): number[] => {\n  const values = points.flatMap((point) =>\n    point.x >= domain[0] && point.x <= domain[1] && point.y != null\n      ? [point.y]\n      : []\n  );\n  const renderedPoints = connectNulls\n    ? points.filter((point) => point.y != null)\n    : points;\n\n  for (let index = 1; index < renderedPoints.length; index += 1) {\n    const previousPoint = renderedPoints[index - 1];\n    const point = renderedPoints[index];\n    if (\n      previousPoint?.y == null ||\n      point?.y == null ||\n      previousPoint.x === point.x\n    ) {\n      continue;\n    }\n\n    for (const boundary of domain) {\n      if (previousPoint.x >= boundary || point.x <= boundary) continue;\n      const ratio = (boundary - previousPoint.x) / (point.x - previousPoint.x);\n      values.push(previousPoint.y + ratio * (point.y - previousPoint.y));\n    }\n  }\n\n  return values;\n};\n"],"mappings":"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"}

package/dist/components/LineChart/LineChartPlot.d.ts

@@ -0,0 +1,43 @@
+import { type AriaAttributes, type PointerEvent } from 'react';
+import type { scaleBand, scaleLinear } from '@visx/scale';
+import type { LineChartDisplayAxis, LineChartDisplaySeries, LineChartInteractionDatum, LineChartSelectionRange, LineChartYBand } from './LineChart.types.js';
+type LineChartPlotProps = {
+    width: number;
+    height: number;
+    innerWidth: number;
+    innerHeight: number;
+    chartMargin: {
+        top: number;
+        right: number;
+        bottom: number;
+        left: number;
+    };
+    xScale: ReturnType<typeof scaleLinear<number>> | ReturnType<typeof scaleBand<number>>;
+    getXPosition: (value: number) => number;
+    getXValue: (position: number) => number;
+    getXRangePosition: (value: number) => number;
+    uniqueXValues: readonly number[];
+    axes: readonly LineChartDisplayAxis[];
+    series: readonly LineChartDisplaySeries[];
+    formatXValue: (value: number) => string;
+    xTickCount?: number;
+    xTickValues?: readonly number[];
+    showPoints: boolean;
+    connectNulls: boolean;
+    showGridRows: boolean;
+    showGridColumns: boolean;
+    activeX?: number;
+    activeLegendItemId?: string | null;
+    selectionRange?: LineChartSelectionRange;
+    yBands: readonly LineChartYBand[];
+    shouldAnimate: boolean;
+    isRendering: boolean;
+    'aria-describedby'?: AriaAttributes['aria-describedby'];
+    'aria-label': string;
+    onDatumPointerDown?: (datum: LineChartInteractionDatum, event: PointerEvent<SVGSVGElement>) => void;
+    onDatumPointerMove?: (datum: LineChartInteractionDatum, event: PointerEvent<SVGSVGElement>) => void;
+    onDatumPointerOut?: () => void;
+    onDatumPointerUp?: (datum: LineChartInteractionDatum, event: PointerEvent<SVGSVGElement>) => void;
+};
+export declare const LineChartPlot: ({ width, height, innerWidth, innerHeight, chartMargin, xScale, getXPosition, getXValue, getXRangePosition, uniqueXValues, axes, series, formatXValue, xTickCount, xTickValues, showPoints, connectNulls, showGridRows, showGridColumns, activeX, activeLegendItemId, selectionRange, yBands, shouldAnimate, isRendering, onDatumPointerDown, onDatumPointerMove, onDatumPointerOut, onDatumPointerUp, ...ariaProps }: LineChartPlotProps) => import("react").JSX.Element;
+export {};

package/dist/components/LineChart/LineChartPlot.js

@@ -0,0 +1,306 @@
+import { cn } from "../../utils/cn.js";
+import { Tooltip } from "../Tooltip/Tooltip.js";
+import { CHART_DIMMED_OPACITY } from "../../utils/chartConstants.js";
+import { getChartTickValues, getNearestChartValue } from "../../utils/chartValues.js";
+import { getChartAxisLabelOffset, getSecondaryChartAxisOffset } from "../../utils/chartAxisLayout.js";
+import "./constants.js";
+import { getLineSegments, getSelectionBounds } from "./LineChart.utils.js";
+import { useId, useRef } from "react";
+import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
+import { animated, useReducedMotion, useSpring } from "@react-spring/web";
+import { Group } from "@visx/group";
+import { AxisBottom, AxisLeft, AxisRight } from "@visx/axis";
+import { GridColumns, GridRows } from "@visx/grid";
+import { LinePath } from "@visx/shape";
+import { curveLinear } from "@visx/curve";
+//#region packages/components/src/components/LineChart/LineChartPlot.tsx
+var defaultFormatValue = new Intl.NumberFormat("en-US", { maximumFractionDigits: 2 }).format;
+var getInteractionDatum = (nearestX, series, xPosition, pointerX) => ({
+	x: nearestX,
+	pointerX,
+	xPosition,
+	points: series.map((item) => ({
+		seriesId: item.id,
+		seriesLabel: item.label,
+		color: item.color,
+		value: item.points.find((point) => point.x === nearestX)?.y ?? null
+	}))
+});
+var LineChartPlot = ({ width, height, innerWidth, innerHeight, chartMargin, xScale, getXPosition, getXValue, getXRangePosition, uniqueXValues, axes, series, formatXValue, xTickCount, xTickValues, showPoints, connectNulls, showGridRows, showGridColumns, activeX, activeLegendItemId, selectionRange, yBands, shouldAnimate, isRendering, onDatumPointerDown, onDatumPointerMove, onDatumPointerOut, onDatumPointerUp, ...ariaProps }) => {
+	const activePointerId = useRef(null);
+	const clipPathId = `line-chart-${useId().replace(/:/g, "")}`;
+	const revealClipPathId = `${clipPathId}-reveal`;
+	const axisById = new Map(axes.map((axis) => [axis.id, axis]));
+	const primaryAxis = axes[0];
+	const hasPointerInteraction = onDatumPointerDown != null || onDatumPointerMove != null || onDatumPointerUp != null;
+	const resolvedXTickCount = xTickCount ?? (width < 480 ? 3 : 5);
+	const resolvedXTickValues = xTickValues == null ? getChartTickValues(uniqueXValues, resolvedXTickCount) : Array.from(xTickValues);
+	const activeXPosition = activeX == null ? null : getXPosition(activeX);
+	const hasActiveX = activeXPosition != null && activeXPosition >= 0 && activeXPosition <= innerWidth;
+	const canRender = isRendering && innerWidth > 0 && innerHeight > 0;
+	const isReducedMotion = (useReducedMotion() ?? false) || !shouldAnimate;
+	const hasRenderedSeries = canRender && series.length > 0;
+	const getSeriesOpacity = (item) => item.opacity * (activeLegendItemId != null && activeLegendItemId !== item.id ? CHART_DIMMED_OPACITY : 1);
+	const visibleSeriesKey = JSON.stringify(series.map((item) => item.id));
+	const [animation] = useSpring(() => ({
+		from: { progress: 0 },
+		to: { progress: hasRenderedSeries ? 1 : 0 },
+		reset: true,
+		immediate: isReducedMotion
+	}), [
+		visibleSeriesKey,
+		hasRenderedSeries,
+		isReducedMotion
+	]);
+	const getDatumFromPointer = (event) => {
+		if (uniqueXValues.length === 0 || innerWidth === 0) return null;
+		const bounds = event.currentTarget.getBoundingClientRect();
+		const rawX = event.clientX - bounds.left - chartMargin.left;
+		const plotX = activePointerId.current === event.pointerId ? Math.max(0, Math.min(innerWidth, rawX)) : rawX;
+		const plotY = event.clientY - bounds.top - chartMargin.top;
+		if (plotX < 0 || plotX > innerWidth || plotY < 0 || plotY > innerHeight) return null;
+		const pointerX = getXValue(plotX);
+		const nearestX = getNearestChartValue(uniqueXValues, plotX, getXPosition);
+		if (nearestX == null) return null;
+		return getInteractionDatum(nearestX, series, chartMargin.left + getXPosition(nearestX), pointerX);
+	};
+	const selectionStartX = selectionRange == null ? null : getXRangePosition(selectionRange.from);
+	const selectionEndX = selectionRange == null ? null : getXRangePosition(selectionRange.to);
+	const selectionBounds = getSelectionBounds(selectionStartX, selectionEndX, innerWidth);
+	const handlePointerExit = () => {
+		activePointerId.current = null;
+		onDatumPointerOut?.();
+	};
+	const handlePointerMove = (event) => {
+		const datum = getDatumFromPointer(event);
+		if (datum == null) handlePointerExit();
+		else onDatumPointerMove?.(datum, event);
+	};
+	const handlePointerDown = (event) => {
+		const datum = getDatumFromPointer(event);
+		if (datum == null || onDatumPointerDown == null) return;
+		if (event.button === 0) activePointerId.current = event.pointerId;
+		onDatumPointerDown(datum, event);
+	};
+	const handlePointerUp = (event) => {
+		const datum = getDatumFromPointer(event);
+		if (datum == null) return handlePointerExit();
+		activePointerId.current = null;
+		onDatumPointerUp?.(datum, event);
+	};
+	return /* @__PURE__ */ jsxs("svg", {
+		width,
+		height,
+		role: "graphics-document group",
+		...ariaProps,
+		focusable: "false",
+		className: cn("block size-full", hasPointerInteraction && "cursor-crosshair"),
+		onPointerMove: handlePointerMove,
+		onPointerDown: handlePointerDown,
+		onPointerLeave: handlePointerExit,
+		onPointerCancel: handlePointerExit,
+		onPointerUp: handlePointerUp,
+		children: [canRender && /* @__PURE__ */ jsxs(Group, {
+			left: chartMargin.left,
+			top: chartMargin.top,
+			children: [
+				/* @__PURE__ */ jsxs("defs", { children: [/* @__PURE__ */ jsx("clipPath", {
+					id: clipPathId,
+					children: /* @__PURE__ */ jsx("rect", {
+						width: innerWidth,
+						height: innerHeight
+					})
+				}), /* @__PURE__ */ jsx("clipPath", {
+					id: revealClipPathId,
+					children: /* @__PURE__ */ jsx(animated.rect, {
+						width: animation.progress.to((progress) => progress * innerWidth),
+						height: innerHeight
+					})
+				})] }),
+				/* @__PURE__ */ jsx("g", {
+					clipPath: `url(#${clipPathId})`,
+					children: yBands.map((band) => {
+						const axis = band.yAxisId == null ? primaryAxis : axisById.get(band.yAxisId);
+						if (axis == null) return null;
+						const domain = axis.scale.domain();
+						const from = band.from ?? domain[0];
+						const to = band.to ?? domain.at(-1);
+						if (from == null || to == null) return null;
+						const fromY = axis.scale(from);
+						const toY = axis.scale(to);
+						return /* @__PURE__ */ jsx("rect", {
+							width: innerWidth,
+							height: Math.abs(toY - fromY),
+							y: Math.min(fromY, toY),
+							fill: band.color,
+							fillOpacity: band.opacity ?? .12
+						}, band.id);
+					})
+				}),
+				showGridRows && primaryAxis != null && /* @__PURE__ */ jsx(GridRows, {
+					scale: primaryAxis.scale,
+					width: innerWidth,
+					numTicks: primaryAxis.tickCount ?? 4,
+					tickValues: primaryAxis.tickValues == null ? void 0 : Array.from(primaryAxis.tickValues),
+					stroke: "var(--border-subtle)",
+					strokeDasharray: "4 2"
+				}),
+				showGridColumns && /* @__PURE__ */ jsx(GridColumns, {
+					scale: xScale,
+					height: innerHeight,
+					numTicks: resolvedXTickCount,
+					tickValues: resolvedXTickValues,
+					stroke: "var(--border-subtle)",
+					strokeDasharray: "4 2"
+				}),
+				/* @__PURE__ */ jsx(AxisBottom, {
+					scale: xScale,
+					top: innerHeight,
+					numTicks: resolvedXTickCount,
+					tickValues: resolvedXTickValues,
+					hideAxisLine: true,
+					hideTicks: true,
+					tickFormat: (value) => formatXValue(value.valueOf()),
+					tickLabelProps: {
+						fill: "var(--text-tertiary)",
+						fontSize: 12,
+						textAnchor: "middle",
+						dy: "0.5em"
+					}
+				}),
+				axes.map((axis, index) => {
+					const tickFormat = (value) => (axis.formatValue ?? defaultFormatValue)(value.valueOf());
+					const textAnchor = index === 0 ? "end" : "start";
+					const tickValues = axis.tickValues == null ? void 0 : Array.from(axis.tickValues);
+					const axisProps = {
+						scale: axis.scale,
+						numTicks: axis.tickCount ?? 4,
+						tickValues,
+						tickLength: 8,
+						hideAxisLine: true,
+						hideTicks: true,
+						tickFormat,
+						tickLabelProps: {
+							fill: "var(--text-tertiary)",
+							fontSize: 12,
+							textAnchor,
+							dx: index === 0 ? "-0.25em" : "0.25em",
+							dy: "0.25em"
+						}
+					};
+					return index === 0 ? /* @__PURE__ */ jsx(AxisLeft, { ...axisProps }, axis.id) : /* @__PURE__ */ jsx(AxisRight, {
+						...axisProps,
+						left: innerWidth + getSecondaryChartAxisOffset(axes, index)
+					}, axis.id);
+				}),
+				/* @__PURE__ */ jsxs("g", {
+					clipPath: `url(#${clipPathId})`,
+					children: [
+						/* @__PURE__ */ jsxs("g", {
+							clipPath: `url(#${revealClipPathId})`,
+							children: [series.map((item) => {
+								const axis = axisById.get(item.yAxisId);
+								if (axis == null) return null;
+								return /* @__PURE__ */ jsx("g", {
+									role: "group",
+									"aria-label": `${item["aria-label"] ?? item.id} series`,
+									children: getLineSegments(item.points, connectNulls).map((segment, index) => /* @__PURE__ */ jsx(LinePath, {
+										data: segment,
+										curve: curveLinear,
+										fill: "none",
+										stroke: item.color,
+										strokeWidth: item.strokeWidth,
+										strokeDasharray: item.strokeDasharray,
+										opacity: getSeriesOpacity(item),
+										className: "transition-opacity duration-fast motion-reduce:transition-none",
+										strokeLinecap: "round",
+										strokeLinejoin: "round",
+										x: (point) => getXPosition(point.x),
+										y: (point) => axis.scale(point.y ?? 0)
+									}, index))
+								}, item.id);
+							}), showPoints && series.flatMap((item) => {
+								const axis = axisById.get(item.yAxisId);
+								if (axis == null) return [];
+								return item.points.flatMap((point, pointIndex) => point.y == null ? [] : [/* @__PURE__ */ jsx("circle", {
+									cx: getXPosition(point.x),
+									cy: axis.scale(point.y),
+									r: 2.5,
+									fill: item.color,
+									opacity: getSeriesOpacity(item),
+									className: "transition-opacity duration-fast motion-reduce:transition-none"
+								}, `${item.id}-${point.x}-${pointIndex}`)]);
+							})]
+						}),
+						selectionBounds != null && /* @__PURE__ */ jsx("g", {
+							role: "group",
+							"aria-label": `Selected range from ${formatXValue(Math.min(selectionRange?.from ?? 0, selectionRange?.to ?? 0))} to ${formatXValue(Math.max(selectionRange?.from ?? 0, selectionRange?.to ?? 0))}`,
+							children: /* @__PURE__ */ jsx("rect", {
+								"aria-hidden": "true",
+								x: selectionBounds.x,
+								y: 0,
+								width: selectionBounds.width,
+								height: innerHeight,
+								fill: "var(--bg-brand)",
+								fillOpacity: .1,
+								stroke: "var(--border-brand)",
+								pointerEvents: "none"
+							})
+						}),
+						hasActiveX && /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx("line", {
+							x1: activeXPosition,
+							x2: activeXPosition,
+							y1: 0,
+							y2: innerHeight,
+							stroke: "currentColor",
+							strokeWidth: 1,
+							strokeDasharray: "4 2",
+							className: "text-quaternary"
+						}), series.flatMap((item) => {
+							if (!item.showActiveMarker) return [];
+							const axis = axisById.get(item.yAxisId);
+							const point = item.points.find((candidate) => candidate.x === activeX);
+							if (axis == null || point?.y == null) return [];
+							return [/* @__PURE__ */ jsx("circle", {
+								cx: activeXPosition,
+								cy: axis.scale(point.y),
+								r: 3,
+								fill: item.color,
+								opacity: getSeriesOpacity(item),
+								className: "transition-opacity duration-fast motion-reduce:transition-none",
+								stroke: "var(--bg-surface-level-1)",
+								strokeWidth: 1.5
+							}, `active-${item.id}`)];
+						})] })
+					]
+				}),
+				hasPointerInteraction && /* @__PURE__ */ jsx("rect", {
+					width: innerWidth,
+					height: innerHeight,
+					fill: "transparent"
+				})
+			]
+		}), canRender && axes.map((axis, index) => {
+			if (axis.label == null) return null;
+			const x = index === 0 ? chartMargin.left - getChartAxisLabelOffset(axis.thickness) : chartMargin.left + innerWidth + getSecondaryChartAxisOffset(axes, index) + getChartAxisLabelOffset(axis.thickness);
+			const y = chartMargin.top + innerHeight / 2;
+			return /* @__PURE__ */ jsx(Tooltip, {
+				title: axis.label,
+				children: /* @__PURE__ */ jsx("text", {
+					x,
+					y,
+					fill: "var(--text-quaternary)",
+					fontSize: 12,
+					fontWeight: 500,
+					textAnchor: "middle",
+					transform: `rotate(-90, ${x}, ${y})`,
+					children: axis.label
+				})
+			}, axis.id);
+		})]
+	});
+};
+//#endregion
+export { LineChartPlot };
+
+//# sourceMappingURL=LineChartPlot.js.map

package/dist/components/LineChart/LineChartPlot.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"LineChartPlot.js","names":[],"sources":["../../../src/components/LineChart/LineChartPlot.tsx"],"sourcesContent":["import { useId, useRef, type AriaAttributes, type PointerEvent } from 'react';\n\nimport { animated, useReducedMotion, useSpring } from '@react-spring/web';\nimport { AxisBottom, AxisLeft, AxisRight } from '@visx/axis';\nimport { curveLinear } from '@visx/curve';\nimport { GridColumns, GridRows } from '@visx/grid';\nimport { Group } from '@visx/group';\nimport type { scaleBand, scaleLinear } from '@visx/scale';\nimport { LinePath } from '@visx/shape';\n\nimport {\n  getChartAxisLabelOffset,\n  getSecondaryChartAxisOffset,\n} from '../../utils/chartAxisLayout';\nimport {\n  CHART_DIMMED_OPACITY,\n  CHART_DASHED_STROKE_DASHARRAY,\n  CHART_TICK_FONT_SIZE,\n  CHART_VALUE_AXIS_TICK_LENGTH,\n} from '../../utils/chartConstants';\nimport {\n  getChartTickValues,\n  getNearestChartValue,\n} from '../../utils/chartValues';\nimport { cn } from '../../utils/cn';\nimport { Tooltip } from '../Tooltip';\nimport { LINE_CHART_DEFAULT_TICK_COUNT } from './constants';\nimport type {\n  LineChartDisplayAxis,\n  LineChartDisplaySeries,\n  LineChartInteractionDatum,\n  LineChartSelectionRange,\n  LineChartYBand,\n} from './LineChart.types';\nimport { getLineSegments, getSelectionBounds } from './LineChart.utils';\n\nconst defaultFormatValue = new Intl.NumberFormat('en-US', {\n  maximumFractionDigits: 2,\n}).format;\n\nconst getInteractionDatum = (\n  nearestX: number,\n  series: readonly LineChartDisplaySeries[],\n  xPosition: number,\n  pointerX: number\n): LineChartInteractionDatum => ({\n  x: nearestX,\n  pointerX,\n  xPosition,\n  points: series.map((item) => ({\n    seriesId: item.id,\n    seriesLabel: item.label,\n    color: item.color,\n    value: item.points.find((point) => point.x === nearestX)?.y ?? null,\n  })),\n});\n\ntype LineChartPlotProps = {\n  width: number;\n  height: number;\n  innerWidth: number;\n  innerHeight: number;\n  chartMargin: { top: number; right: number; bottom: number; left: number };\n  xScale:\n    | ReturnType<typeof scaleLinear<number>>\n    | ReturnType<typeof scaleBand<number>>;\n  getXPosition: (value: number) => number;\n  getXValue: (position: number) => number;\n  getXRangePosition: (value: number) => number;\n  uniqueXValues: readonly number[];\n  axes: readonly LineChartDisplayAxis[];\n  series: readonly LineChartDisplaySeries[];\n  formatXValue: (value: number) => string;\n  xTickCount?: number;\n  xTickValues?: readonly number[];\n  showPoints: boolean;\n  connectNulls: boolean;\n  showGridRows: boolean;\n  showGridColumns: boolean;\n  activeX?: number;\n  activeLegendItemId?: string | null;\n  selectionRange?: LineChartSelectionRange;\n  yBands: readonly LineChartYBand[];\n  shouldAnimate: boolean;\n  isRendering: boolean;\n  'aria-describedby'?: AriaAttributes['aria-describedby'];\n  'aria-label': string;\n  onDatumPointerDown?: (\n    datum: LineChartInteractionDatum,\n    event: PointerEvent<SVGSVGElement>\n  ) => void;\n  onDatumPointerMove?: (\n    datum: LineChartInteractionDatum,\n    event: PointerEvent<SVGSVGElement>\n  ) => void;\n  onDatumPointerOut?: () => void;\n  onDatumPointerUp?: (\n    datum: LineChartInteractionDatum,\n    event: PointerEvent<SVGSVGElement>\n  ) => void;\n};\n\nexport const LineChartPlot = ({\n  width,\n  height,\n  innerWidth,\n  innerHeight,\n  chartMargin,\n  xScale,\n  getXPosition,\n  getXValue,\n  getXRangePosition,\n  uniqueXValues,\n  axes,\n  series,\n  formatXValue,\n  xTickCount,\n  xTickValues,\n  showPoints,\n  connectNulls,\n  showGridRows,\n  showGridColumns,\n  activeX,\n  activeLegendItemId,\n  selectionRange,\n  yBands,\n  shouldAnimate,\n  isRendering,\n  onDatumPointerDown,\n  onDatumPointerMove,\n  onDatumPointerOut,\n  onDatumPointerUp,\n  ...ariaProps\n}: LineChartPlotProps) => {\n  const activePointerId = useRef<number | null>(null);\n  const clipPathId = `line-chart-${useId().replace(/:/g, '')}`;\n  const revealClipPathId = `${clipPathId}-reveal`;\n  const axisById = new Map(axes.map((axis) => [axis.id, axis]));\n  const primaryAxis = axes[0];\n  const hasPointerInteraction =\n    onDatumPointerDown != null ||\n    onDatumPointerMove != null ||\n    onDatumPointerUp != null;\n  const resolvedXTickCount = xTickCount ?? (width < 480 ? 3 : 5);\n  const resolvedXTickValues =\n    xTickValues == null\n      ? getChartTickValues(uniqueXValues, resolvedXTickCount)\n      : Array.from(xTickValues);\n  const activeXPosition = activeX == null ? null : getXPosition(activeX);\n  const hasActiveX =\n    activeXPosition != null &&\n    activeXPosition >= 0 &&\n    activeXPosition <= innerWidth;\n  const canRender = isRendering && innerWidth > 0 && innerHeight > 0;\n  const isReducedMotion = (useReducedMotion() ?? false) || !shouldAnimate;\n  const hasRenderedSeries = canRender && series.length > 0;\n  const getSeriesOpacity = (item: LineChartDisplaySeries) =>\n    item.opacity *\n    (activeLegendItemId != null && activeLegendItemId !== item.id\n      ? CHART_DIMMED_OPACITY\n      : 1);\n  const visibleSeriesKey = JSON.stringify(series.map((item) => item.id));\n  const [animation] = useSpring(\n    () => ({\n      from: { progress: 0 },\n      to: { progress: hasRenderedSeries ? 1 : 0 },\n      reset: true,\n      immediate: isReducedMotion,\n    }),\n    [visibleSeriesKey, hasRenderedSeries, isReducedMotion]\n  );\n\n  const getDatumFromPointer = (event: PointerEvent<SVGSVGElement>) => {\n    if (uniqueXValues.length === 0 || innerWidth === 0) return null;\n    const bounds = event.currentTarget.getBoundingClientRect();\n    const rawX = event.clientX - bounds.left - chartMargin.left;\n    // Keep an in-progress range selection at its endpoint through the gutter.\n    const plotX =\n      activePointerId.current === event.pointerId\n        ? Math.max(0, Math.min(innerWidth, rawX))\n        : rawX;\n    const plotY = event.clientY - bounds.top - chartMargin.top;\n    if (plotX < 0 || plotX > innerWidth || plotY < 0 || plotY > innerHeight)\n      return null;\n    const pointerX = getXValue(plotX);\n    const nearestX = getNearestChartValue(uniqueXValues, plotX, getXPosition);\n    if (nearestX == null) return null;\n    return getInteractionDatum(\n      nearestX,\n      series,\n      chartMargin.left + getXPosition(nearestX),\n      pointerX\n    );\n  };\n\n  const selectionStartX =\n    selectionRange == null ? null : getXRangePosition(selectionRange.from);\n  const selectionEndX =\n    selectionRange == null ? null : getXRangePosition(selectionRange.to);\n  const selectionBounds = getSelectionBounds(\n    selectionStartX,\n    selectionEndX,\n    innerWidth\n  );\n  const handlePointerExit = () => {\n    activePointerId.current = null;\n    onDatumPointerOut?.();\n  };\n  const handlePointerMove = (event: PointerEvent<SVGSVGElement>) => {\n    const datum = getDatumFromPointer(event);\n    if (datum == null) handlePointerExit();\n    else onDatumPointerMove?.(datum, event);\n  };\n  const handlePointerDown = (event: PointerEvent<SVGSVGElement>) => {\n    const datum = getDatumFromPointer(event);\n    if (datum == null || onDatumPointerDown == null) return;\n    if (event.button === 0) activePointerId.current = event.pointerId;\n    onDatumPointerDown(datum, event);\n  };\n  const handlePointerUp = (event: PointerEvent<SVGSVGElement>) => {\n    const datum = getDatumFromPointer(event);\n    if (datum == null) return handlePointerExit();\n    activePointerId.current = null;\n    onDatumPointerUp?.(datum, event);\n  };\n\n  return (\n    <svg\n      width={width}\n      height={height}\n      role=\"graphics-document group\"\n      {...ariaProps}\n      focusable=\"false\"\n      className={cn(\n        'block size-full',\n        hasPointerInteraction && 'cursor-crosshair'\n      )}\n      onPointerMove={handlePointerMove}\n      onPointerDown={handlePointerDown}\n      onPointerLeave={handlePointerExit}\n      onPointerCancel={handlePointerExit}\n      onPointerUp={handlePointerUp}\n    >\n      {canRender && (\n        <Group left={chartMargin.left} top={chartMargin.top}>\n          <defs>\n            <clipPath id={clipPathId}>\n              <rect width={innerWidth} height={innerHeight} />\n            </clipPath>\n            <clipPath id={revealClipPathId}>\n              <animated.rect\n                width={animation.progress.to(\n                  (progress) => progress * innerWidth\n                )}\n                height={innerHeight}\n              />\n            </clipPath>\n          </defs>\n          <g clipPath={`url(#${clipPathId})`}>\n            {yBands.map((band) => {\n              const axis =\n                band.yAxisId == null ? primaryAxis : axisById.get(band.yAxisId);\n              if (axis == null) return null;\n              const domain = axis.scale.domain();\n              const from = band.from ?? domain[0];\n              const to = band.to ?? domain.at(-1);\n              if (from == null || to == null) return null;\n              const fromY = axis.scale(from);\n              const toY = axis.scale(to);\n              return (\n                <rect\n                  key={band.id}\n                  width={innerWidth}\n                  height={Math.abs(toY - fromY)}\n                  y={Math.min(fromY, toY)}\n                  fill={band.color}\n                  fillOpacity={band.opacity ?? 0.12}\n                />\n              );\n            })}\n          </g>\n          {showGridRows && primaryAxis != null && (\n            <GridRows\n              scale={primaryAxis.scale}\n              width={innerWidth}\n              numTicks={primaryAxis.tickCount ?? LINE_CHART_DEFAULT_TICK_COUNT}\n              tickValues={\n                primaryAxis.tickValues == null\n                  ? undefined\n                  : Array.from(primaryAxis.tickValues)\n              }\n              stroke=\"var(--border-subtle)\"\n              strokeDasharray={CHART_DASHED_STROKE_DASHARRAY}\n            />\n          )}\n          {showGridColumns && (\n            <GridColumns\n              scale={xScale}\n              height={innerHeight}\n              numTicks={resolvedXTickCount}\n              tickValues={resolvedXTickValues}\n              stroke=\"var(--border-subtle)\"\n              strokeDasharray={CHART_DASHED_STROKE_DASHARRAY}\n            />\n          )}\n          <AxisBottom\n            scale={xScale}\n            top={innerHeight}\n            numTicks={resolvedXTickCount}\n            tickValues={resolvedXTickValues}\n            hideAxisLine\n            hideTicks\n            tickFormat={(value) => formatXValue(value.valueOf())}\n            tickLabelProps={{\n              fill: 'var(--text-tertiary)',\n              fontSize: CHART_TICK_FONT_SIZE,\n              textAnchor: 'middle',\n              dy: '0.5em',\n            }}\n          />\n          {axes.map((axis, index) => {\n            const tickFormat = (value: { valueOf(): number }) =>\n              (axis.formatValue ?? defaultFormatValue)(value.valueOf());\n            const textAnchor: 'end' | 'start' = index === 0 ? 'end' : 'start';\n            const tickValues =\n              axis.tickValues == null ? undefined : Array.from(axis.tickValues);\n            const axisProps = {\n              scale: axis.scale,\n              numTicks: axis.tickCount ?? LINE_CHART_DEFAULT_TICK_COUNT,\n              tickValues,\n              tickLength: CHART_VALUE_AXIS_TICK_LENGTH,\n              hideAxisLine: true,\n              hideTicks: true,\n              tickFormat,\n              tickLabelProps: {\n                fill: 'var(--text-tertiary)',\n                fontSize: CHART_TICK_FONT_SIZE,\n                textAnchor,\n                dx: index === 0 ? '-0.25em' : '0.25em',\n                dy: '0.25em',\n              },\n            };\n            return index === 0 ? (\n              <AxisLeft key={axis.id} {...axisProps} />\n            ) : (\n              <AxisRight\n                key={axis.id}\n                {...axisProps}\n                left={innerWidth + getSecondaryChartAxisOffset(axes, index)}\n              />\n            );\n          })}\n          <g clipPath={`url(#${clipPathId})`}>\n            <g clipPath={`url(#${revealClipPathId})`}>\n              {series.map((item) => {\n                const axis = axisById.get(item.yAxisId);\n                if (axis == null) return null;\n                return (\n                  <g\n                    key={item.id}\n                    role=\"group\"\n                    aria-label={`${item['aria-label'] ?? item.id} series`}\n                  >\n                    {getLineSegments(item.points, connectNulls).map(\n                      (segment, index) => (\n                        <LinePath\n                          key={index}\n                          data={segment}\n                          curve={curveLinear}\n                          fill=\"none\"\n                          stroke={item.color}\n                          strokeWidth={item.strokeWidth}\n                          strokeDasharray={item.strokeDasharray}\n                          opacity={getSeriesOpacity(item)}\n                          className=\"transition-opacity duration-fast motion-reduce:transition-none\"\n                          strokeLinecap=\"round\"\n                          strokeLinejoin=\"round\"\n                          x={(point) => getXPosition(point.x)}\n                          y={(point) => axis.scale(point.y ?? 0)}\n                        />\n                      )\n                    )}\n                  </g>\n                );\n              })}\n              {showPoints &&\n                series.flatMap((item) => {\n                  const axis = axisById.get(item.yAxisId);\n                  if (axis == null) return [];\n                  return item.points.flatMap((point, pointIndex) =>\n                    point.y == null\n                      ? []\n                      : [\n                          <circle\n                            key={`${item.id}-${point.x}-${pointIndex}`}\n                            cx={getXPosition(point.x)}\n                            cy={axis.scale(point.y)}\n                            r={2.5}\n                            fill={item.color}\n                            opacity={getSeriesOpacity(item)}\n                            className=\"transition-opacity duration-fast motion-reduce:transition-none\"\n                          />,\n                        ]\n                  );\n                })}\n            </g>\n            {selectionBounds != null && (\n              <g\n                role=\"group\"\n                aria-label={`Selected range from ${formatXValue(\n                  Math.min(selectionRange?.from ?? 0, selectionRange?.to ?? 0)\n                )} to ${formatXValue(\n                  Math.max(selectionRange?.from ?? 0, selectionRange?.to ?? 0)\n                )}`}\n              >\n                <rect\n                  aria-hidden=\"true\"\n                  x={selectionBounds.x}\n                  y={0}\n                  width={selectionBounds.width}\n                  height={innerHeight}\n                  fill=\"var(--bg-brand)\"\n                  fillOpacity={0.1}\n                  stroke=\"var(--border-brand)\"\n                  pointerEvents=\"none\"\n                />\n              </g>\n            )}\n            {hasActiveX && (\n              <>\n                <line\n                  x1={activeXPosition}\n                  x2={activeXPosition}\n                  y1={0}\n                  y2={innerHeight}\n                  stroke=\"currentColor\"\n                  strokeWidth={1}\n                  strokeDasharray={CHART_DASHED_STROKE_DASHARRAY}\n                  className=\"text-quaternary\"\n                />\n                {series.flatMap((item) => {\n                  if (!item.showActiveMarker) return [];\n                  const axis = axisById.get(item.yAxisId);\n                  const point = item.points.find(\n                    (candidate) => candidate.x === activeX\n                  );\n                  if (axis == null || point?.y == null) return [];\n                  return [\n                    <circle\n                      key={`active-${item.id}`}\n                      cx={activeXPosition}\n                      cy={axis.scale(point.y)}\n                      r={3}\n                      fill={item.color}\n                      opacity={getSeriesOpacity(item)}\n                      className=\"transition-opacity duration-fast motion-reduce:transition-none\"\n                      stroke=\"var(--bg-surface-level-1)\"\n                      strokeWidth={1.5}\n                    />,\n                  ];\n                })}\n              </>\n            )}\n          </g>\n          {hasPointerInteraction && (\n            <rect width={innerWidth} height={innerHeight} fill=\"transparent\" />\n          )}\n        </Group>\n      )}\n      {canRender &&\n        axes.map((axis, index) => {\n          if (axis.label == null) return null;\n          const x =\n            index === 0\n              ? chartMargin.left - getChartAxisLabelOffset(axis.thickness)\n              : chartMargin.left +\n                innerWidth +\n                getSecondaryChartAxisOffset(axes, index) +\n                getChartAxisLabelOffset(axis.thickness);\n          const y = chartMargin.top + innerHeight / 2;\n          return (\n            <Tooltip title={axis.label} key={axis.id}>\n              <text\n                x={x}\n                y={y}\n                fill=\"var(--text-quaternary)\"\n                fontSize={CHART_TICK_FONT_SIZE}\n                fontWeight={500}\n                textAnchor=\"middle\"\n                transform={`rotate(-90, ${x}, ${y})`}\n              >\n                {axis.label}\n              </text>\n            </Tooltip>\n          );\n        })}\n    </svg>\n  );\n};\n"],"mappings":"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"}

package/dist/components/LineChart/constants.d.ts

@@ -0,0 +1,3 @@
+/** Narrowest a value axis gets before its tick labels are measured. */
+export declare const LINE_CHART_VALUE_AXIS_THICKNESS = 64;
+export declare const LINE_CHART_DEFAULT_TICK_COUNT = 4;

package/dist/components/LineChart/constants.js

@@ -0,0 +1,8 @@
+//#region packages/components/src/components/LineChart/constants.ts
+/** Narrowest a value axis gets before its tick labels are measured. */
+var LINE_CHART_VALUE_AXIS_THICKNESS = 64;
+var LINE_CHART_DEFAULT_TICK_COUNT = 4;
+//#endregion
+export { LINE_CHART_DEFAULT_TICK_COUNT, LINE_CHART_VALUE_AXIS_THICKNESS };
+
+//# sourceMappingURL=constants.js.map

package/dist/components/LineChart/constants.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"constants.js","names":[],"sources":["../../../src/components/LineChart/constants.ts"],"sourcesContent":["/** Narrowest a value axis gets before its tick labels are measured. */\nexport const LINE_CHART_VALUE_AXIS_THICKNESS = 64;\nexport const LINE_CHART_DEFAULT_TICK_COUNT = 4;\n"],"mappings":";;AACA,IAAa,kCAAkC;AAC/C,IAAa,gCAAgC"}

package/dist/components/LineChart/index.d.ts

@@ -0,0 +1,2 @@
+export { LineChart } from './LineChart.js';
+export type { LineChartInteractionDatum, LineChartInteractionPoint, LineChartGrid, LineChartPoint, LineChartProps, LineChartSelectionRange, LineChartSeries, LineChartXScale, LineChartYBand, LineChartYAxis, } from './LineChart.types.js';

package/dist/components/LineChart/index.js

@@ -0,0 +1,2 @@
+import { LineChart } from "./LineChart.js";
+export { LineChart };

package/dist/components/LinearProgress/LinearProgress.d.ts

@@ -0,0 +1,16 @@
+import { type HTMLAttributes } from 'react';
+interface LinearProgressProps extends Omit<HTMLAttributes<HTMLDivElement>, 'children' | 'color'> {
+    /** Current progress value. Passing a value renders a determinate bar. */
+    value?: number;
+    /** Minimum value for determinate progress. */
+    min?: number;
+    /** Maximum value for determinate progress. */
+    max?: number;
+    /** Progress mode. Defaults to indeterminate unless a value is provided. */
+    variant?: 'indeterminate' | 'determinate';
+    /** Custom bar height in pixels. Defaults to 2px. */
+    thicknessPx?: number;
+}
+declare const LinearProgress: import("react").ForwardRefExoticComponent<LinearProgressProps & import("react").RefAttributes<HTMLDivElement>>;
+export { LinearProgress };
+export type { LinearProgressProps };

package/dist/components/LinearProgress/LinearProgress.js

@@ -0,0 +1,42 @@
+import { cn } from "../../utils/cn.js";
+import { forwardRef } from "react";
+import { jsx } from "react/jsx-runtime";
+//#region packages/components/src/components/LinearProgress/LinearProgress.tsx
+function clampValue(value, min, max) {
+	if (max <= min) return min;
+	return Math.min(Math.max(value, min), max);
+}
+function getPercent(value, min, max) {
+	if (max <= min) return 0;
+	return (clampValue(value, min, max) - min) / (max - min) * 100;
+}
+function getFiniteValue(value, fallback) {
+	return Number.isFinite(value) ? value : fallback;
+}
+var LinearProgress = forwardRef(({ value, min = 0, max = 100, variant, thicknessPx, className, style, ...props }, ref) => {
+	const isDeterminate = variant === "determinate" || value !== void 0;
+	const safeValue = getFiniteValue(value ?? min, min);
+	const clampedValue = clampValue(safeValue, min, max);
+	const progressPercent = getPercent(safeValue, min, max);
+	const rootStyle = { ...style };
+	if (thicknessPx !== void 0) rootStyle["--linear-progress-thickness"] = `${thicknessPx}px`;
+	return /* @__PURE__ */ jsx("div", {
+		...props,
+		ref,
+		role: "progressbar",
+		"aria-valuemin": isDeterminate ? min : void 0,
+		"aria-valuemax": isDeterminate ? max : void 0,
+		"aria-valuenow": isDeterminate ? Math.round(clampedValue) : void 0,
+		className: cn("relative w-full flex-none overflow-hidden", thicknessPx === void 0 ? "h-0.5" : "h-[var(--linear-progress-thickness)]", "bg-brand-subtle", "rounded-none", className),
+		style: rootStyle,
+		children: /* @__PURE__ */ jsx("div", {
+			className: cn("absolute inset-y-0 left-0", "bg-brand", "rounded-none", isDeterminate ? "transition-[width] duration-200 ease-out" : "w-[12.5%] animate-linear-progress-indeterminate motion-reduce:animate-none"),
+			style: isDeterminate ? { width: `${progressPercent}%` } : void 0
+		})
+	});
+});
+LinearProgress.displayName = "LinearProgress";
+//#endregion
+export { LinearProgress };
+
+//# sourceMappingURL=LinearProgress.js.map