@octanejs/visx 0.1.0

package/src/pattern/patterns/Path.tsrx.d.ts

@@ -0,0 +1,28 @@
+// Generated by scripts/generate-tsrx-types.mjs.
+export type PatternPathProps = {
+    /** Unique id for the pattern. */
+    id?: string;
+    /** Width of the pattern element. */
+    width: number;
+    /** Height of the pattern element. */
+    height: number;
+    /** d attribute of the path element */
+    path?: string;
+    /** fill color applied to path. */
+    fill?: string;
+    /** className applied to the path element. */
+    className?: string;
+    /** Background color applied behind path. */
+    background?: string;
+    /** Stroke color applied to path. */
+    stroke?: string;
+    /** strokeWidth applied to path. */
+    strokeWidth?: number | string;
+    /** strokeDasharray applied to path. */
+    strokeDasharray?: string | number;
+    /** strokeLinecap applied to path. */
+    strokeLinecap?: 'square' | 'butt' | 'round' | 'inherit';
+    /** shapeRendering applied to path. */
+    shapeRendering?: string | number;
+};
+export default function Path({ id, width, height, path, fill, stroke, strokeWidth, strokeDasharray, strokeLinecap, shapeRendering, background, className, }: PatternPathProps): import("react").JSX.Element;

package/src/pattern/patterns/Pattern.tsrx

@@ -0,0 +1,25 @@
+import type { ReactNode } from 'react';
+import useStableId from '../../kernel/ids/useStableId.tsrx';
+
+export type PatternProps = {
+	/** Unique id of the pattern element. */
+	id?: string;
+	/** Width of the pattern. */
+	width: number;
+	/** Height of the pattern. */
+	height: number;
+	/** Children of pattern element to render. */
+	children: ReactNode;
+};
+
+export default function Pattern({ id, width, height, children }: PatternProps) {
+	const generatedId = useStableId('visx-pattern');
+	return <defs>
+		<pattern
+			id={id ?? generatedId}
+			width={width}
+			height={height}
+			patternUnits="userSpaceOnUse"
+		>{children}</pattern>
+	</defs>;
+}

package/src/pattern/patterns/Pattern.tsrx.d.ts

@@ -0,0 +1,13 @@
+// Generated by scripts/generate-tsrx-types.mjs.
+import type { ReactNode } from 'react';
+export type PatternProps = {
+    /** Unique id of the pattern element. */
+    id?: string;
+    /** Width of the pattern. */
+    width: number;
+    /** Height of the pattern. */
+    height: number;
+    /** Children of pattern element to render. */
+    children: ReactNode;
+};
+export default function Pattern({ id, width, height, children }: PatternProps): import("react").JSX.Element;

package/src/pattern/patterns/Waves.tsrx

@@ -0,0 +1,69 @@
+import cx from 'classnames';
+import Path from './Path.tsrx';
+
+export type PatternWavesProps = {
+	/** Unique id for the pattern. */
+	id?: string;
+	/** Width of the pattern element. */
+	width: number;
+	/** Height of the pattern element. */
+	height: number;
+	/** fill color applied to path. */
+	fill?: string;
+	/** className applied to the path element. */
+	className?: string;
+	/** Background color applied behind path. */
+	background?: string;
+	/** Stroke color applied to path. */
+	stroke?: string;
+	/** strokeWidth applied to path. */
+	strokeWidth?: number | string;
+	/** strokeDasharray applied to path. */
+	strokeDasharray?: string | number;
+	/** strokeLinecap applied to path. */
+	strokeLinecap?: 'square' | 'butt' | 'round' | 'inherit';
+	/** shapeRendering applied to path. */
+	shapeRendering?: string | number;
+};
+
+export default function Waves({
+	id,
+	width,
+	height,
+	fill,
+	stroke,
+	strokeWidth,
+	strokeDasharray,
+	strokeLinecap,
+	shapeRendering,
+	background,
+	className,
+}: PatternWavesProps) {
+	return <Path
+		className={cx('visx-pattern-wave', className)}
+		path={`M 0 ${height / 2} c ${height / 8} ${-height / 4} , ${(height * 3) / 8} ${
+			-height / 4
+		} , ${height / 2} 0
+             c ${height / 8} ${height / 4} , ${(height * 3) / 8} ${
+			height / 4
+		} , ${height / 2} 0 M ${-height / 2} ${height / 2}
+             c ${height / 8} ${
+			height / 4
+		} , ${(height * 3) / 8} ${height / 4} , ${height / 2} 0 M ${height} ${
+			height / 2
+		}
+             c ${height / 8} ${-height / 4} , ${(height * 3) / 8} ${-height / 4} , ${
+			height / 2
+		} 0`}
+		id={id}
+		width={width}
+		height={height}
+		fill={fill}
+		stroke={stroke}
+		strokeWidth={strokeWidth}
+		strokeDasharray={strokeDasharray}
+		strokeLinecap={strokeLinecap}
+		shapeRendering={shapeRendering}
+		background={background}
+	/>;
+}

package/src/pattern/patterns/Waves.tsrx.d.ts

@@ -0,0 +1,26 @@
+// Generated by scripts/generate-tsrx-types.mjs.
+export type PatternWavesProps = {
+    /** Unique id for the pattern. */
+    id?: string;
+    /** Width of the pattern element. */
+    width: number;
+    /** Height of the pattern element. */
+    height: number;
+    /** fill color applied to path. */
+    fill?: string;
+    /** className applied to the path element. */
+    className?: string;
+    /** Background color applied behind path. */
+    background?: string;
+    /** Stroke color applied to path. */
+    stroke?: string;
+    /** strokeWidth applied to path. */
+    strokeWidth?: number | string;
+    /** strokeDasharray applied to path. */
+    strokeDasharray?: string | number;
+    /** strokeLinecap applied to path. */
+    strokeLinecap?: 'square' | 'butt' | 'round' | 'inherit';
+    /** shapeRendering applied to path. */
+    shapeRendering?: string | number;
+};
+export default function Waves({ id, width, height, fill, stroke, strokeWidth, strokeDasharray, strokeLinecap, shapeRendering, background, className, }: PatternWavesProps): import("react").JSX.Element;

package/src/point/Point.ts

@@ -0,0 +1,20 @@
+export default class Point {
+	public x: number = 0;
+	public y: number = 0;
+
+	constructor({ x = 0, y = 0 }) {
+		this.x = x;
+		this.y = y;
+	}
+
+	value() {
+		return {
+			x: this.x,
+			y: this.y,
+		};
+	}
+
+	toArray() {
+		return [this.x, this.y];
+	}
+}

package/src/point/index.ts

@@ -0,0 +1,4 @@
+// @octanejs/visx/point
+export { default as Point } from './Point';
+export { default as sumPoints } from './sumPoints';
+export { default as subtractPoints } from './subtractPoints';

package/src/point/subtractPoints.ts

@@ -0,0 +1,8 @@
+import Point from './Point';
+
+export default function subtractPoints(point1: Point, point2: Point) {
+	return new Point({
+		x: point1.x - point2.x,
+		y: point1.y - point2.y,
+	});
+}

package/src/point/sumPoints.ts

@@ -0,0 +1,8 @@
+import Point from './Point';
+
+export default function sumPoints(point1: Point, point2: Point) {
+	return new Point({
+		x: point1.x + point2.x,
+		y: point1.y + point2.y,
+	});
+}

package/src/react-spring/axis/AnimatedAxis.tsrx

@@ -0,0 +1,28 @@
+import { useMemo } from 'octane';
+import { Axis } from '@octanejs/visx/axis';
+import type { AxisProps, AxisScale, TicksRendererProps } from '@octanejs/visx/axis';
+import AnimatedTicks from './AnimatedTicks.tsrx';
+import type { AnimationTrajectory } from '../types';
+
+export type AnimatedAxisProps<Scale extends AxisScale> =
+	Omit<AxisProps<Scale>, 'ticksComponent'> & { animationTrajectory?: AnimationTrajectory };
+
+export default function AnimatedAxis<Scale extends AxisScale>({
+	animationTrajectory,
+	tickComponent,
+	...axisProps
+}: AnimatedAxisProps<Scale>) {
+	// wrap the ticksComponent so we can pass animationTrajectory
+	const ticksComponent = useMemo(
+		() => // eslint-disable-next-line react/no-unstable-nested-components
+		function TicksComponent(ticks: TicksRendererProps<Scale>) {
+			return <AnimatedTicks
+				{...ticks}
+				tickComponent={tickComponent}
+				animationTrajectory={animationTrajectory}
+			/>;
+		},
+		[animationTrajectory, tickComponent],
+	);
+	return <Axis {...axisProps} ticksComponent={ticksComponent} />;
+}

package/src/react-spring/axis/AnimatedAxis.tsrx.d.ts

@@ -0,0 +1,7 @@
+// Generated by scripts/generate-tsrx-types.mjs.
+import type { AxisProps, AxisScale } from '@octanejs/visx/axis';
+import type { AnimationTrajectory } from '../types';
+export type AnimatedAxisProps<Scale extends AxisScale> = Omit<AxisProps<Scale>, 'ticksComponent'> & {
+    animationTrajectory?: AnimationTrajectory;
+};
+export default function AnimatedAxis<Scale extends AxisScale>({ animationTrajectory, tickComponent, ...axisProps }: AnimatedAxisProps<Scale>): import("react").JSX.Element;

package/src/react-spring/axis/AnimatedTicks.tsrx

@@ -0,0 +1,85 @@
+import { animated, useTransition as useSpringTransition, to } from '../../internal/spring.tsrx';
+import type { SpringValue } from '../../internal/spring.tsrx';
+import cx from 'classnames';
+import { Orientation } from '@octanejs/visx/axis';
+import type { ComputedTick, TicksRendererProps, AxisScale } from '@octanejs/visx/axis';
+import { Text } from '@octanejs/visx/text';
+
+import useLineTransitionConfig from '../spring-configs/useLineTransitionConfig.tsrx';
+import type { AnimationTrajectory } from '../types';
+
+export default function AnimatedTicks<Scale extends AxisScale>({
+	hideTicks,
+	horizontal,
+	orientation,
+	scale,
+	tickClassName,
+	tickComponent,
+	tickLabelProps: allTickLabelProps,
+	tickStroke = '#222',
+	tickTransform,
+	ticks,
+	tickLineProps,
+	animationTrajectory,
+}: TicksRendererProps<Scale> & { animationTrajectory?: AnimationTrajectory }) {
+	const animatedTicks = useSpringTransition(ticks, {
+		...useLineTransitionConfig({
+			scale,
+			animateXOrY: horizontal ? 'x' : 'y',
+			animationTrajectory,
+		}),
+		keys: (tick: ComputedTick<Scale>) => `tick-${tick.value}-${tick.index}`,
+	});
+
+	return <>
+		{/* @ts-expect-error react-spring's type inference issue on the styles */}
+		{animatedTicks(({ fromX, toX, fromY, toY, opacity }, item, { key }, index) => {
+			const tickLabelProps = allTickLabelProps[index] ?? allTickLabelProps[0] ?? {};
+			return item == null || key == null
+				? null
+				: <animated.g
+						key={key}
+						className={cx('visx-axis-tick', tickClassName)}
+						transform={tickTransform}
+					>
+						{!hideTicks &&
+							<animated.line
+								x1={fromX}
+								x2={toX}
+								y1={fromY}
+								y2={toY}
+								stroke={tickStroke}
+								strokeLinecap="square"
+								strokeOpacity={opacity}
+								{...tickLineProps}
+							/>}
+						{/** animate the group, not the Text */}
+						<animated.g
+							key={index}
+							transform={to(
+								[toX as SpringValue<number>, toY as SpringValue<number>],
+								(interpolatedX, interpolatedY) => `translate(${interpolatedX},${
+									interpolatedY +
+										(orientation === Orientation.bottom &&
+										typeof tickLabelProps.fontSize === 'number'
+											? tickLabelProps.fontSize ?? 10
+											: 0)
+								})`,
+							)}
+							opacity={opacity}
+						>
+							{tickComponent
+								? (tickComponent({
+										...tickLabelProps,
+										x: toX,
+										y: toY,
+										formattedValue: item?.formattedValue,
+									}))
+								: <Text {...tickLabelProps}>
+										{item?.formattedValue}
+									</Text>}
+						</animated.g>
+					</animated.g>;
+		})}
+	</>;
+}

package/src/react-spring/axis/AnimatedTicks.tsrx.d.ts

@@ -0,0 +1,6 @@
+// Generated by scripts/generate-tsrx-types.mjs.
+import type { TicksRendererProps, AxisScale } from '@octanejs/visx/axis';
+import type { AnimationTrajectory } from '../types';
+export default function AnimatedTicks<Scale extends AxisScale>({ hideTicks, horizontal, orientation, scale, tickClassName, tickComponent, tickLabelProps: allTickLabelProps, tickStroke, tickTransform, ticks, tickLineProps, animationTrajectory, }: TicksRendererProps<Scale> & {
+    animationTrajectory?: AnimationTrajectory;
+}): import("react").JSX.Element;

package/src/react-spring/grid/AnimatedGridColumns.tsrx

@@ -0,0 +1,38 @@
+import type { GridColumnsProps, GridScale } from '@octanejs/visx/grid';
+import { GridColumns } from '@octanejs/visx/grid';
+import AnimatedGridLines from './AnimatedGridLines.tsrx';
+import type { AnimationTrajectory } from '../types';
+
+export default function AnimatedGridColumns<Scale extends GridScale>({
+	scale,
+	height,
+	numTicks,
+	tickValues,
+	offset,
+	className,
+	animationTrajectory,
+	top,
+	left,
+	...lineProps
+}: Omit<GridColumnsProps<Scale>, 'children'> & { animationTrajectory?: AnimationTrajectory }) {
+	return <GridColumns
+		scale={scale}
+		height={height}
+		numTicks={numTicks}
+		tickValues={tickValues}
+		className={className}
+		offset={offset}
+		top={top}
+		left={left}
+	>
+		{({ lines }) =>
+			<AnimatedGridLines
+				scale={scale}
+				lines={lines}
+				animationTrajectory={animationTrajectory}
+				animateXOrY="x"
+				lineKey={(line) => `column-${line?.from?.x ?? ''}-${line.index}`}
+				{...lineProps}
+			/>}
+	</GridColumns>;
+}

package/src/react-spring/grid/AnimatedGridColumns.tsrx.d.ts

@@ -0,0 +1,6 @@
+// Generated by scripts/generate-tsrx-types.mjs.
+import type { GridColumnsProps, GridScale } from '@octanejs/visx/grid';
+import type { AnimationTrajectory } from '../types';
+export default function AnimatedGridColumns<Scale extends GridScale>({ scale, height, numTicks, tickValues, offset, className, animationTrajectory, top, left, ...lineProps }: Omit<GridColumnsProps<Scale>, 'children'> & {
+    animationTrajectory?: AnimationTrajectory;
+}): import("react").JSX.Element;

package/src/react-spring/grid/AnimatedGridLines.tsrx

@@ -0,0 +1,47 @@
+import type { SVGProps } from 'react';
+import { animated, useTransition as useSpringTransition } from '../../internal/spring.tsrx';
+import type { GridScale, GridLines, CommonGridProps } from '@octanejs/visx/grid';
+import type { TransitionConfig } from '../spring-configs/useLineTransitionConfig.tsrx';
+import useLineTransitionConfig from '../spring-configs/useLineTransitionConfig.tsrx';
+
+export type AnimatedGridLinesProps<Scale extends GridScale> = {
+		lines: GridLines;
+		lineKey: (line: GridLines[number]) => string;
+		scale: Scale;
+	} & Omit<SVGProps<SVGLineElement>, 'ref' | 'scale'> & Pick<TransitionConfig<Scale>, 'animationTrajectory' | 'animateXOrY'> & Pick<CommonGridProps, 'stroke' | 'strokeWidth' | 'lineStyle' | 'strokeDasharray'>;
+
+export default function AnimatedGridLines<Scale extends GridScale>({
+	scale,
+	lines,
+	animationTrajectory,
+	animateXOrY,
+	lineKey,
+	lineStyle,
+	...lineProps
+}: AnimatedGridLinesProps<Scale>) {
+	const animatedLines = useSpringTransition(lines, {
+		...useLineTransitionConfig({
+			scale,
+			animateXOrY,
+			animationTrajectory,
+		}),
+		key: lineKey,
+	});
+
+	return <>
+		{/* @ts-expect-error react-spring's type inference issue on the styles */}
+		{animatedLines(
+			({ fromX, toX, fromY, toY, opacity }, _, { key }) =>
+				<animated.line
+					key={key}
+					x1={fromX}
+					x2={toX}
+					y1={fromY}
+					y2={toY}
+					strokeOpacity={opacity}
+					style={lineStyle}
+					{...lineProps}
+				/>,
+		)}
+	</>;
+}

package/src/react-spring/grid/AnimatedGridLines.tsrx.d.ts

@@ -0,0 +1,10 @@
+// Generated by scripts/generate-tsrx-types.mjs.
+import type { SVGProps } from 'react';
+import type { GridScale, GridLines, CommonGridProps } from '@octanejs/visx/grid';
+import type { TransitionConfig } from '../spring-configs/useLineTransitionConfig.tsrx';
+export type AnimatedGridLinesProps<Scale extends GridScale> = {
+    lines: GridLines;
+    lineKey: (line: GridLines[number]) => string;
+    scale: Scale;
+} & Omit<SVGProps<SVGLineElement>, 'ref' | 'scale'> & Pick<TransitionConfig<Scale>, 'animationTrajectory' | 'animateXOrY'> & Pick<CommonGridProps, 'stroke' | 'strokeWidth' | 'lineStyle' | 'strokeDasharray'>;
+export default function AnimatedGridLines<Scale extends GridScale>({ scale, lines, animationTrajectory, animateXOrY, lineKey, lineStyle, ...lineProps }: AnimatedGridLinesProps<Scale>): import("react").JSX.Element;

package/src/react-spring/grid/AnimatedGridRows.tsrx

@@ -0,0 +1,38 @@
+import type { GridRowsProps, GridScale } from '@octanejs/visx/grid';
+import { GridRows } from '@octanejs/visx/grid';
+import AnimatedGridLines from './AnimatedGridLines.tsrx';
+import type { AnimationTrajectory } from '../types';
+
+export default function AnimatedGridRows<Scale extends GridScale>({
+	scale,
+	width,
+	numTicks,
+	tickValues,
+	offset,
+	className,
+	animationTrajectory,
+	top,
+	left,
+	...lineProps
+}: Omit<GridRowsProps<Scale>, 'children'> & { animationTrajectory?: AnimationTrajectory }) {
+	return <GridRows
+		scale={scale}
+		width={width}
+		numTicks={numTicks}
+		tickValues={tickValues}
+		className={className}
+		top={top}
+		left={left}
+		offset={offset}
+	>
+		{({ lines }) =>
+			<AnimatedGridLines
+				scale={scale}
+				lines={lines}
+				animationTrajectory={animationTrajectory}
+				animateXOrY="y"
+				lineKey={(line) => `row-${line?.from?.y ?? ''}-${line.index}`}
+				{...lineProps}
+			/>}
+	</GridRows>;
+}

package/src/react-spring/grid/AnimatedGridRows.tsrx.d.ts

@@ -0,0 +1,6 @@
+// Generated by scripts/generate-tsrx-types.mjs.
+import type { GridRowsProps, GridScale } from '@octanejs/visx/grid';
+import type { AnimationTrajectory } from '../types';
+export default function AnimatedGridRows<Scale extends GridScale>({ scale, width, numTicks, tickValues, offset, className, animationTrajectory, top, left, ...lineProps }: Omit<GridRowsProps<Scale>, 'children'> & {
+    animationTrajectory?: AnimationTrajectory;
+}): import("react").JSX.Element;

package/src/react-spring/index.ts

@@ -0,0 +1,7 @@
+// @octanejs/visx/react-spring
+export { default as AnimatedTicks } from './axis/AnimatedTicks.tsrx';
+export { default as AnimatedAxis } from './axis/AnimatedAxis.tsrx';
+export { default as AnimatedGridRows } from './grid/AnimatedGridRows.tsrx';
+export { default as AnimatedGridColumns } from './grid/AnimatedGridColumns.tsrx';
+
+export type * from './types';

package/src/react-spring/spring-configs/useLineTransitionConfig.tsrx

@@ -0,0 +1,102 @@
+import { useMemo } from 'octane';
+import { coerceNumber } from '@octanejs/visx/scale';
+import type { AxisScale } from '@octanejs/visx/axis';
+import type { GridScale } from '@octanejs/visx/grid';
+import type { AnimationTrajectory } from '../types';
+
+interface Point {
+	x?: number;
+	y?: number;
+}
+
+interface Line {
+	from: Point;
+	to: Point;
+}
+
+function animatedValue(
+	animationTrajectory: AnimationTrajectory,
+	positionOnScale: number | undefined,
+	scaleMin: number | undefined,
+	scaleMax: number | undefined,
+	scaleHalfwayPoint: number,
+): number {
+	switch (animationTrajectory) {
+		case 'center':
+			return scaleHalfwayPoint;
+		case 'min':
+			return scaleMin ?? 0;
+		case 'max':
+			return scaleMax ?? 0;
+		case 'outside':
+		default:
+			return ((positionOnScale ?? 0) < scaleHalfwayPoint ? scaleMin : scaleMax) ?? 0;
+	}
+}
+
+function enterUpdate({ from, to }: Line) {
+	return {
+		fromX: from.x,
+		toX: to.x,
+		fromY: from.y,
+		toY: to.y,
+		opacity: 1,
+	};
+}
+
+export type TransitionConfig<Scale extends AxisScale | GridScale> = {
+	/** Scale along which animation occurs. */
+	scale: Scale;
+	/** Whether to animate the `x` or `y` values of a Line. */
+	animateXOrY: 'x' | 'y';
+	/** The scale position entering lines come from, and exiting lines leave to. */
+	animationTrajectory?: AnimationTrajectory;
+};
+
+/**
+ * A hook that returns `react-spring` transition config for animating a Line
+ * horizontally, vertically, and from a specific starting point.
+ */
+export default function useLineTransitionConfig<Scale extends AxisScale | GridScale>({
+	scale,
+	animateXOrY,
+	animationTrajectory: initAnimationTrajectory = 'outside',
+}: TransitionConfig<Scale>) {
+	const shouldAnimateX = animateXOrY === 'x';
+	return useMemo(() => {
+		const [a, b] = scale.range().map(coerceNumber);
+		const isDescending = b != null && a != null && b < a;
+		const [scaleMin, scaleMax] = isDescending ? [b, a] : [a, b];
+		const scaleLength =
+			b != null && a != null ? Math.abs(b - a) : 0;
+		const scaleHalfwayPoint = (scaleMin ?? 0) + scaleLength / 2;
+		let animationTrajectory = initAnimationTrajectory;
+
+		// correct direction for y-axis which is inverted due to svg coords
+		if (!shouldAnimateX && initAnimationTrajectory === 'min') animationTrajectory = 'max';
+		if (!shouldAnimateX && initAnimationTrajectory === 'max') animationTrajectory = 'min';
+
+		const fromLeave = ({ from, to }: Line) => ({
+			fromX: shouldAnimateX
+				? animatedValue(animationTrajectory, from.x, scaleMin, scaleMax, scaleHalfwayPoint)
+				: from.x,
+			toX: shouldAnimateX
+				? animatedValue(animationTrajectory, from.x, scaleMin, scaleMax, scaleHalfwayPoint)
+				: to.x,
+			fromY: shouldAnimateX
+				? from.y
+				: animatedValue(animationTrajectory, from.y, scaleMin, scaleMax, scaleHalfwayPoint),
+			toY: shouldAnimateX
+				? to.y
+				: animatedValue(animationTrajectory, from.y, scaleMin, scaleMax, scaleHalfwayPoint),
+			opacity: 0,
+		});
+
+		return {
+			from: fromLeave,
+			leave: fromLeave,
+			enter: enterUpdate,
+			update: enterUpdate,
+		};
+	}, [scale, shouldAnimateX, initAnimationTrajectory]);
+}

package/src/react-spring/spring-configs/useLineTransitionConfig.tsrx.d.ts

@@ -0,0 +1,50 @@
+// Generated by scripts/generate-tsrx-types.mjs.
+import type { AxisScale } from '@octanejs/visx/axis';
+import type { GridScale } from '@octanejs/visx/grid';
+import type { AnimationTrajectory } from '../types';
+interface Point {
+    x?: number;
+    y?: number;
+}
+interface Line {
+    from: Point;
+    to: Point;
+}
+declare function enterUpdate({ from, to }: Line): {
+    fromX: number | undefined;
+    toX: number | undefined;
+    fromY: number | undefined;
+    toY: number | undefined;
+    opacity: number;
+};
+export type TransitionConfig<Scale extends AxisScale | GridScale> = {
+    /** Scale along which animation occurs. */
+    scale: Scale;
+    /** Whether to animate the `x` or `y` values of a Line. */
+    animateXOrY: 'x' | 'y';
+    /** The scale position entering lines come from, and exiting lines leave to. */
+    animationTrajectory?: AnimationTrajectory;
+};
+/**
+ * A hook that returns `react-spring` transition config for animating a Line
+ * horizontally, vertically, and from a specific starting point.
+ */
+export default function useLineTransitionConfig<Scale extends AxisScale | GridScale>({ scale, animateXOrY, animationTrajectory: initAnimationTrajectory, }: TransitionConfig<Scale>): {
+    from: ({ from, to }: Line) => {
+        fromX: number | undefined;
+        toX: number | undefined;
+        fromY: number | undefined;
+        toY: number | undefined;
+        opacity: number;
+    };
+    leave: ({ from, to }: Line) => {
+        fromX: number | undefined;
+        toX: number | undefined;
+        fromY: number | undefined;
+        toY: number | undefined;
+        opacity: number;
+    };
+    enter: typeof enterUpdate;
+    update: typeof enterUpdate;
+};
+export {};

package/src/react-spring/types/index.ts

@@ -0,0 +1 @@
+export type AnimationTrajectory = 'outside' | 'center' | 'min' | 'max';