@octanejs/recharts 0.1.41 → 0.1.43

package/{LICENSE → LICENSE.recharts}

@@ -1,6 +1,6 @@
-MIT License
+The MIT License (MIT)
 
-Copyright (c) 2026 Dominic Gannaway
+Copyright (c) 2015-present recharts
 
 Permission is hereby granted, free of charge, to any person obtaining a copy
 of this software and associated documentation files (the "Software"), to deal
@@ -19,3 +19,4 @@ AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
 LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
 OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
 SOFTWARE.
+

package/README.md

@@ -13,6 +13,18 @@ byte-identical to upstream in the differential rig. The phased plan lives in
 import { BarChart, Bar, XAxis, YAxis } from '@octanejs/recharts';
 ```
 
+## TypeScript
+
+The package exports authored TypeScript and `.tsrx` source, including its component
+prop types. Check applications with `tsrx-tsc --noEmit` and the
+`octane/compiler/volar` compiler configured by the Octane CLI. Plain `tsc` does not
+check `.tsrx` implementations.
+
+The package is checked with `strict: true`, `skipLibCheck: false`, and no Node
+ambient types. `BarProps`, `PieProps`, and the other component prop exports come
+from the implementations, not a separate declaration facade. Events use native
+DOM types, and refs use Octane's ref-as-prop contract.
+
 ## Status
 
 Current scope, known divergences, and verification status are tracked in the

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@octanejs/recharts",
-  "version": "0.1.41",
+  "version": "0.1.43",
   "license": "MIT",
   "type": "module",
   "engines": {
@@ -21,31 +21,32 @@
   },
   "main": "src/index.ts",
   "module": "src/index.ts",
-  "types": "src/index.d.ts",
+  "types": "src/index.ts",
   "files": [
     "src",
-    "README.md"
+    "README.md",
+    "LICENSE.recharts"
   ],
   "exports": {
     ".": {
-      "types": "./src/index.d.ts",
+      "types": "./src/index.ts",
       "default": "./src/index.ts"
     }
   },
   "dependencies": {
-    "@reduxjs/toolkit": "^2.12.0",
+    "@reduxjs/toolkit": "~2.10.1",
     "clsx": "^2.1.1",
     "decimal.js-light": "^2.5.1",
     "es-toolkit": "^1.49.0",
     "eventemitter3": "^5.0.4",
-    "immer": "^11.1.15",
+    "immer": "^10.2.0",
     "reselect": "5.2.0",
     "tiny-invariant": "^1.3.3",
     "victory-vendor": "^37.3.6",
-    "@octanejs/redux": "0.1.41"
+    "@octanejs/redux": "0.1.43"
   },
   "peerDependencies": {
-    "octane": "0.1.44"
+    "octane": "0.1.46"
   },
   "devDependencies": {
     "@tsrx/react": "^0.2.58",
@@ -54,7 +55,7 @@
     "react-dom": "^19.2.7",
     "recharts": "3.9.2",
     "vitest": "^4.1.10",
-    "octane": "0.1.44"
+    "octane": "0.1.46"
   },
   "scripts": {
     "test": "vitest run"

package/src/animation/AnimatedItems.tsrx

@@ -1,3 +1,30 @@
+import type { MutableRefObject, OctaneNode } from '../util/OctaneTypes.ts';
+import type { EasingInput } from './easing';
+import type { AnimationItem, AnimationMatchByProp } from './matchBy';
+import type { CartesianLayout, PolarLayout } from '../util/types';
+
+export type AnimationInterpolateFn<ItemType, LayoutType extends CartesianLayout | PolarLayout> =
+	(items: | ReadonlyArray<AnimationItem<ItemType>>
+	| null, animationElapsedTime: number, layout: LayoutType) => ReadonlyArray<ItemType>;
+export type AnimatedItemsProps<ItemType, LayoutType extends CartesianLayout | PolarLayout> = {
+	animationInput: unknown;
+	animationIdPrefix: string;
+	items: ReadonlyArray<ItemType> | undefined;
+	previousItemsRef: MutableRefObject<ReadonlyArray<ItemType> | null | undefined>;
+	isAnimationActive: boolean | 'auto';
+	animationBegin: number;
+	animationDuration: number;
+	animationEasing: EasingInput;
+	onAnimationStart?: () => void;
+	onAnimationEnd?: () => void;
+	animationInterpolateFn: AnimationInterpolateFn<ItemType, LayoutType>;
+	animationMatchBy?: AnimationMatchByProp<ItemType>;
+	shouldUpdatePreviousRef?: (animationElapsedTime: number) => boolean;
+	children: (items: ReadonlyArray<
+		ItemType
+	>, animationElapsedTime: number, isEntrance: boolean) => OctaneNode;
+	layout: LayoutType;
+};
 // Port of animation/AnimatedItems.tsx — the reusable enter/update/exit
 // animation wrapper for array-based chart data (Bar, Line, Area, Pie, …).
 import { useCallback, useState } from 'octane';
@@ -9,7 +36,7 @@ import { useAnimationStartSnapshot } from './useAnimationStartSnapshot.ts';
 /**
  * Tracks animation state and provides callbacks for animation start/end.
  */
-export function useAnimationCallbacks(onAnimationStart, onAnimationEnd) {
+export function useAnimationCallbacks(onAnimationStart?: () => void, onAnimationEnd?: () => void) {
 	const [isAnimating, setIsAnimating] = useState(false);
 	const handleAnimationStart = useCallback(() => {
 		if (typeof onAnimationStart === 'function') {
@@ -30,7 +57,9 @@ export function useAnimationCallbacks(onAnimationStart, onAnimationEnd) {
 	};
 }
 
-export function AnimatedItems(props) {
+export function AnimatedItems<ItemType, LayoutType extends CartesianLayout | PolarLayout>(
+	props: AnimatedItemsProps<ItemType, LayoutType>,
+) {
 	const {
 		animationInput,
 		animationIdPrefix,
@@ -51,7 +80,11 @@ export function AnimatedItems(props) {
 	const animationId = useAnimationId(animationInput, animationIdPrefix);
 	const animationStartItems = useAnimationStartSnapshot(animationId, previousItemsRef);
 	const rawPrevItems = animationStartItems.startValue ?? null;
-	const animationItems = matchAnimationItems(rawPrevItems, items, animationMatchBy ?? matchByIndex);
+	const animationItems: ReadonlyArray<AnimationItem<ItemType>> | null = matchAnimationItems(
+		rawPrevItems,
+		items,
+		animationMatchBy ?? matchByIndex,
+	);
 	return <JavascriptAnimate
 		animationId={animationId}
 		begin={animationBegin}

package/src/animation/AnimationController.ts

@@ -1,73 +1,25 @@
-// Port of animation/AnimationController.ts — upstream ships this module as
-// types only (its compiled `es6/animation/AnimationController.js` is `export {}`),
-// so the vendoring pass that copies recharts' compiled JS skipped it and left
-// `CSSTransitionAnimate` importing a module that does not exist.
-//
-// `TimeoutController`, `CallbackType` and `CancelableTimeout` live in
-// `animation/timeoutController.ts` upstream, and `AnimationHandle` is exported
-// as a type from `animation/AnimationHandle.ts`. Both of those modules are
-// vendored here as compiled `.js`, which carries their runtime classes but
-// erases every type-only export, so they cannot be imported by name yet. They
-// are co-located here until those two modules are typed; move them back to
-// their upstream homes at that point rather than growing this module.
-import type { CSSTransitionAnimation, JavascriptAnimation } from './AnimationHandle';
+// Adapted from recharts@3.9.2, commit b3451050c027a23957ffa50a2665c9119df21e47.
+import type { CancelableTimeout, TimeoutController } from './timeoutController';
+import { AnimationHandle } from './AnimationHandle';
 
 /**
- * Callback type for the timeout function.
- * Receives current time as an argument.
- */
-export type CallbackType = (now: number) => void;
-
-/**
- * A function that, when called, cancels the timeout.
- *
- * @since 3.9
- */
-export type CancelableTimeout = () => void;
-
-/**
- * TimeoutController is responsible for controlling the movement of time.
- * Think of it as a clock.
- *
- * Recharts default implementation uses requestAnimationFrame which works great
- * in a browser. You may choose to override this which is especially useful if
- * you want to control animations.
- *
- * @see {@link https://recharts.github.io/en-US/guide/animations/ Animation guide}
- *
- * @since 3.9
- */
-export interface TimeoutController {
-	/**
-	 * Sets a timeout that executes a callback after a specified delay.
-	 * Allows setting multiple timeouts and provides a way to cancel them
-	 * independently.
-	 *
-	 * The input (`delay`) is relative — "wait for this long". The output (`now`,
-	 * the callback's parameter) is absolute — "this is the time now".
-	 */
-	setTimeout(callback: CallbackType, delay?: number): CancelableTimeout;
-}
-
-/**
- * Recharts animation state machine.
+ * JavaScript animations produce numbers and CSS transitions produce strings.
+ * Keep the listener's value type tied to the supplied animation handle.
  *
  * @see {@link https://recharts.github.io/en-US/guide/animations/ Animation guide}
  *
  * @since 3.9
  */
-export type AnimationHandle = JavascriptAnimation | CSSTransitionAnimation;
+export type OnAnimationStateUpdate<T extends number | string = number | string> = (
+	newState: T,
+) => void;
 
-/**
- * It's actually always the case that JavaScript-based animations produce numbers,
- * and CSS transition-based animations always produce strings,
- * but it's so much easier to just have them together than to deal with all the generics.
- *
- * @see {@link https://recharts.github.io/en-US/guide/animations/ Animation guide}
- *
- * @since 3.9
- */
-export type OnAnimationStateUpdate = (newState: number | string) => void;
+export type AnimationControllerHandle<T extends number | string> = Omit<
+	AnimationHandle,
+	'getInterpolated'
+> & {
+	getInterpolated(): T;
+};
 
 /**
  * AnimationController accepts the animation state machine (= RechartsAnimation) plus a timeout controller,
@@ -83,8 +35,8 @@ export type OnAnimationStateUpdate = (newState: number | string) => void;
  *
  * @since 3.9
  */
-export type AnimationController = (
+export type AnimationController = <T extends number | string>(
 	timeoutController: TimeoutController,
-	animationHandle: AnimationHandle,
-	listener: OnAnimationStateUpdate,
+	animationHandle: AnimationControllerHandle<T>,
+	listener: OnAnimationStateUpdate<T>,
 ) => CancelableTimeout;

package/src/animation/{AnimationControllerImpl.js → AnimationControllerImpl.ts}

@@ -1,5 +1,11 @@
-// Vendored verbatim from recharts@3.9.2 es6/animation/AnimationControllerImpl.js (framework-agnostic).
-// Do not edit — update by re-vendoring when the recharts devDependency moves.
+// Adapted from recharts@3.9.2, commit b3451050c027a23957ffa50a2665c9119df21e47.
+import {
+	AnimationController,
+	AnimationControllerHandle,
+	OnAnimationStateUpdate,
+} from './AnimationController';
+import { CancelableTimeout, TimeoutController } from './timeoutController';
+
 /**
  * JavaScript animations require trigger and repaint as soon as possible,
  * so this class uses the timeoutController to trigger updates as quickly as the controller allows.
@@ -7,10 +13,14 @@
  * JavaScript animation progress is represented as a stream of values. The exact type depends on the animationHandle type.
  * Each individual consumer is then responsible for mapping those values onto a React component.
  */
-export var animationControllerImpl = (timeoutController, animationHandle, listener) => {
-	var cancellable;
-	var nextUpdate = (now) => {
-		var timeRemaining = animationHandle.tick(now);
+export const animationControllerImpl: AnimationController = <T extends number | string>(
+	timeoutController: TimeoutController,
+	animationHandle: AnimationControllerHandle<T>,
+	listener: OnAnimationStateUpdate<T>,
+): CancelableTimeout => {
+	let cancellable: CancelableTimeout | undefined;
+	const nextUpdate = (now: number) => {
+		const timeRemaining = animationHandle.tick(now);
 		if (animationHandle.getState() === 'active') {
 			listener(animationHandle.getInterpolated());
 			if (animationHandle.getProgress() === 1) {
@@ -23,11 +33,8 @@ export var animationControllerImpl = (timeoutController, animationHandle, listen
 		}
 		cancellable = timeoutController.setTimeout(nextUpdate, timeRemaining);
 	};
+
 	cancellable = timeoutController.setTimeout(nextUpdate, 0);
-	return () => {
-		var _cancellable;
-		return (_cancellable = cancellable) === null || _cancellable === void 0
-			? void 0
-			: _cancellable();
-	};
+
+	return () => cancellable?.();
 };

package/src/animation/{AnimationHandle.js → AnimationHandle.ts}

@@ -1,54 +1,67 @@
-// Vendored verbatim from recharts@3.9.2 es6/animation/AnimationHandle.js (framework-agnostic).
-// Do not edit — update by re-vendoring when the recharts devDependency moves.
-function _defineProperty(e, r, t) {
-	return (
-		(r = _toPropertyKey(r)) in e
-			? Object.defineProperty(e, r, { value: t, enumerable: !0, configurable: !0, writable: !0 })
-			: (e[r] = t),
-		e
-	);
-}
-function _toPropertyKey(t) {
-	var i = _toPrimitive(t, 'string');
-	return 'symbol' == typeof i ? i : i + '';
-}
-function _toPrimitive(t, r) {
-	if ('object' != typeof t || !t) return t;
-	var e = t[Symbol.toPrimitive];
-	if (void 0 !== e) {
-		var i = e.call(t, r || 'default');
-		if ('object' != typeof i) return i;
-		throw new TypeError('@@toPrimitive must return a primitive value.');
-	}
-	return ('string' === r ? String : Number)(t);
-}
+// Adapted from recharts@3.9.2, commit b3451050c027a23957ffa50a2665c9119df21e47.
 // eslint-disable-next-line max-classes-per-file
 import { interpolate } from '../util/DataUtils';
-var INIT = 'init';
-var PENDING = 'pending';
-var ACTIVE = 'active';
-var COMPLETED = 'completed';
-function duration(time) {
+import { EasingFunction, NamedBezier } from './easing';
+
+const INIT = 'init' as const;
+const PENDING = 'pending' as const;
+const ACTIVE = 'active' as const;
+const COMPLETED = 'completed' as const;
+
+export type AnimationState = typeof INIT | typeof PENDING | typeof ACTIVE | typeof COMPLETED;
+
+type AnimationStateCallback = () => void;
+
+function duration(time: number): number {
 	return Math.max(0, time);
 }
-class RechartsAnimation {
+
+abstract class RechartsAnimation<T, E> {
 	/**
 	 * Returns the absolute time after the animationBegin delay has been completed,
 	 * and when the animationDuration started ticking.
 	 */
-	getAnimationStartedTime() {
+	public getAnimationStartedTime(): number | undefined {
 		return this.animationStartedTime;
 	}
 
 	/**
 	 * Returns the absolute time of when the animation began - now it will wait for {animationBegin} ms before the transition starts
 	 */
-	getBeginStartedTime() {
+	public getBeginStartedTime(): number | undefined {
 		return this.beginStartedTime;
 	}
-	constructor(param) {
-		var _param$onAnimationSta;
-		_defineProperty(this, 'state', INIT);
+
+	private readonly onAnimationEnd: undefined | AnimationStateCallback;
+
+	private progress: number;
+
+	private animationStartedTime: number | undefined;
+
+	private beginStartedTime: number | undefined;
+
+	protected readonly animationDuration: number;
+
+	private readonly animationBegin: number;
+
+	private readonly from: T;
+
+	private readonly to: T;
+
+	protected readonly easing: E;
+
+	private readonly animationId: string;
+
+	constructor(param: {
+		animationId: string;
+		onAnimationStart: undefined | AnimationStateCallback;
+		onAnimationEnd: undefined | AnimationStateCallback;
+		animationDuration: number;
+		animationBegin: number;
+		from: T;
+		to: T;
+		easing: E;
+	}) {
 		this.animationId = param.animationId;
 		this.onAnimationEnd = param.onAnimationEnd;
 		this.animationDuration = duration(param.animationDuration);
@@ -58,10 +71,11 @@ class RechartsAnimation {
 		this.to = param.to;
 		this.easing = param.easing;
 		// Mimic what the previous animationManager was doing - call onAnimationStart immediately and synchronously
-		(_param$onAnimationSta = param.onAnimationStart) === null ||
-			_param$onAnimationSta === void 0 ||
-			_param$onAnimationSta.call(param);
+		param.onAnimationStart?.();
 	}
+
+	private state: AnimationState = INIT;
+
 	/**
 	 * Returns the state machine current state
 	 * - `init`:       animation had just been created. It immediately calls `onAnimationStart`
@@ -70,14 +84,14 @@ class RechartsAnimation {
 	 * - `completed`:  animation has completed its transition and executed `onAnimationEnd`.
 	 *                 This state is final and the animation is no longer allowed to transition to other states.
 	 */
-	getState() {
+	public getState() {
 		return this.state;
 	}
 
 	/**
 	 * Returns the easing input or function
 	 */
-	getEasing() {
+	public getEasing(): E {
 		return this.easing;
 	}
 
@@ -85,7 +99,7 @@ class RechartsAnimation {
 	 * Returns the configuration - the duration of the transition.
 	 * Does not change in time, does not change when state changes, this is a static value.
 	 */
-	getAnimationDuration() {
+	public getAnimationDuration(): number {
 		return this.animationDuration;
 	}
 
@@ -100,38 +114,41 @@ class RechartsAnimation {
 	 * This is useful because it's the same number you can take and put into setTimeout(fn, X)
 	 * as that's how much time we need to wait until the next state transition happens.
 	 */
-	tick(now) {
+	public tick(now: number): number {
 		if (this.getState() === INIT) {
 			this.state = PENDING;
 			this.beginStartedTime = now;
 			return this.animationBegin;
 		}
+
 		if (this.getState() === PENDING) {
 			if (this.beginStartedTime == null) {
 				throw new Error();
 			}
-			var _timeElapsed = now - this.beginStartedTime;
-			if (_timeElapsed >= this.animationBegin) {
+			const timeElapsed = now - this.beginStartedTime;
+			if (timeElapsed >= this.animationBegin) {
 				this.state = ACTIVE;
 				this.animationStartedTime = now;
 				// The state flipped just now so the elapsed time is zero
 				return this.nextAnimationUpdate(0);
 			}
-			return duration(this.animationBegin - _timeElapsed);
+			return duration(this.animationBegin - timeElapsed);
 		}
+
 		if (this.getState() === ACTIVE) {
 			if (this.animationStartedTime == null) {
 				throw new Error();
 			}
-			var _timeElapsed2 = now - this.animationStartedTime;
-			this.setProgress(_timeElapsed2 / this.animationDuration);
-			return this.nextAnimationUpdate(_timeElapsed2);
+			const timeElapsed = now - this.animationStartedTime;
+			this.setProgress(timeElapsed / this.animationDuration);
+			return this.nextAnimationUpdate(timeElapsed);
 		}
 
 		// state === COMPLETED, nothing interesting is going to happen
 		return 0;
 	}
-	setProgress(newProgress) {
+
+	private setProgress(newProgress: number) {
 		this.progress = Math.min(1, Math.max(0, newProgress));
 	}
 
@@ -150,7 +167,7 @@ class RechartsAnimation {
 	 * The progress is linear with time.
 	 * If you wish for easing, use `getInterpolated()` instead.
 	 */
-	getProgress() {
+	public getProgress(): number {
 		return this.progress;
 	}
 
@@ -161,14 +178,11 @@ class RechartsAnimation {
 	 * - tick function doesn't do anything
 	 * - getState() always returns 'completed'
 	 */
-	complete() {
+	public complete() {
 		this.progress = 1;
 		if (this.state === 'active') {
-			var _this$onAnimationEnd;
 			// Do not call callbacks if the animation was interrupted before it even started!
-			(_this$onAnimationEnd = this.onAnimationEnd) === null ||
-				_this$onAnimationEnd === void 0 ||
-				_this$onAnimationEnd.call(this);
+			this.onAnimationEnd?.();
 		}
 		this.state = COMPLETED;
 	}
@@ -177,7 +191,7 @@ class RechartsAnimation {
 	 * Returns the starting value of the animation.
 	 * Does not include progress, easing, interpolation, none of that - just the static starting value
 	 */
-	getFrom() {
+	public getFrom() {
 		return this.from;
 	}
 
@@ -185,14 +199,14 @@ class RechartsAnimation {
 	 * Returns the end value of the animation.
 	 * Does not include progress, easing, interpolation, none of that - just the static end value
 	 */
-	getTo() {
+	public getTo() {
 		return this.to;
 	}
 
 	/**
 	 * Unique identifier of an animation
 	 */
-	getAnimationId() {
+	public getAnimationId(): string {
 		return this.animationId;
 	}
 
@@ -200,7 +214,7 @@ class RechartsAnimation {
 	 * Returns the configuration - the duration of delay in between animation initialization, and transition.
 	 * Does not change in time, does not change when state changes, this is a static value.
 	 */
-	getAnimationBegin() {
+	getAnimationBegin(): number {
 		return this.animationBegin;
 	}
 
@@ -208,10 +222,12 @@ class RechartsAnimation {
 	 * Returns value of the transition at the current time.
 	 * The exact details differ based on the animation type
 	 */
+	public abstract getInterpolated(): T;
 
 	/**
 	 * Returns the duration of time of when the controller should ask for the next update
 	 */
+	protected abstract nextAnimationUpdate(timeElapsed: number): number;
 }
 
 /**
@@ -220,9 +236,9 @@ class RechartsAnimation {
  *
  * @since 3.9
  */
-export class JavascriptAnimation extends RechartsAnimation {
+export class JavascriptAnimation extends RechartsAnimation<number, EasingFunction> {
 	// eslint-disable-next-line class-methods-use-this
-	nextAnimationUpdate() {
+	protected nextAnimationUpdate(): number {
 		/*
 		 * JavaScript-based animations have to update as soon as possible,
 		 * so we return 0 here to indicate that the next update should be scheduled immediately
@@ -236,7 +252,7 @@ export class JavascriptAnimation extends RechartsAnimation {
 	 * This value, unlike getProgress(), can escape the [0..1] range
 	 * because this is entirely within the easing function control. Spring typically does this.
 	 */
-	getInterpolated() {
+	public getInterpolated(): number {
 		return this.easing(interpolate(this.getFrom(), this.getTo(), this.getProgress()));
 	}
 }
@@ -247,8 +263,8 @@ export class JavascriptAnimation extends RechartsAnimation {
  *
  * @since 3.9
  */
-export class CSSTransitionAnimation extends RechartsAnimation {
-	nextAnimationUpdate(timeElapsed) {
+export class CSSTransitionAnimation extends RechartsAnimation<string, NamedBezier> {
+	protected nextAnimationUpdate(timeElapsed: number): number {
 		/**
 		 * CSS transitions do not need DOM updates past the initial render
 		 * so here we just instruct the controller to wait until the animation duration is over.
@@ -263,7 +279,7 @@ export class CSSTransitionAnimation extends RechartsAnimation {
 	 * so all we need to do here is return the final state
 	 * and let browser handle the rest.
 	 */
-	getInterpolated() {
+	public getInterpolated(): string {
 		return this.getTo();
 	}
 }
@@ -289,3 +305,4 @@ export class CSSTransitionAnimation extends RechartsAnimation {
  *
  * @since 3.9
  */
+export type AnimationHandle = JavascriptAnimation | CSSTransitionAnimation;

package/src/animation/CSSTransitionAnimate.tsrx

@@ -1,5 +1,6 @@
+import type { OctaneNode } from '../util/OctaneTypes.ts';
 import * as React from 'octane';
-import { useCallback, useEffect, useRef, useState, type OctaneNode } from 'octane';
+import { useCallback, useEffect, useRef, useState } from 'octane';
 import type { Octane } from 'octane/jsx-runtime';
 import { noop } from '../util/DataUtils';
 import { resolveDefaultProps } from '../util/resolveDefaultProps';
@@ -14,7 +15,7 @@ import type { AnimationController } from './AnimationController';
 
 // `octane` does not export `CSSProperties`. The object form of octane's JSX
 // `style` prop is the type this render prop hands out, so take it from there
-// (`octane/jsx-runtime` types it as `string | React.CSSProperties`) rather than
+// (`octane/jsx-runtime` types it as `string | CSSProperties`) rather than
 // importing @types/react, which this package does not depend on.
 type CSSProperties = Exclude<NonNullable<Octane.HTMLAttributes<Element>['style']>, string>;
 

package/src/animation/JavascriptAnimate.tsrx

@@ -1,3 +1,19 @@
+import type { OctaneNode } from '../util/OctaneTypes.ts';
+import type { EasingInput } from './easing';
+import type { AnimationController } from './AnimationController';
+
+type JavascriptAnimateProps = {
+	animationId: string;
+	animationController?: AnimationController;
+	duration?: number;
+	begin?: number;
+	easing?: EasingInput;
+	isActive?: boolean | 'auto';
+	canBegin?: boolean;
+	onAnimationStart?: () => void;
+	onAnimationEnd?: () => void;
+	children: (animationElapsedTime: number) => OctaneNode;
+};
 // Port of animation/JavascriptAnimate.tsx — the render-prop animation driver:
 // `children(t)` with t progressing 0→1 through the (vendored) animation core.
 // `isActive={false}` renders a single synchronous `children(1)` — the static
@@ -21,12 +37,12 @@ const defaultJavascriptAnimateProps = {
 	canBegin: true,
 	onAnimationEnd: () => {},
 	onAnimationStart: () => {},
-};
+} as const satisfies Partial<JavascriptAnimateProps>;
 
 const from = 0;
 const to = 1;
 
-export function JavascriptAnimate(outsideProps) {
+export function JavascriptAnimate(outsideProps: JavascriptAnimateProps) {
 	const props = resolveDefaultProps(outsideProps, defaultJavascriptAnimateProps);
 	const {
 		animationId,