@octanejs/visx 0.1.36 → 0.1.38

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@octanejs/visx",
-  "version": "0.1.36",
+  "version": "0.1.38",
   "license": "MIT",
   "type": "module",
   "engines": {
@@ -123,10 +123,10 @@
     "mitt": "^2.1.0",
     "reduce-css-calc": "^1.3.0",
     "svg-path-properties": "2.0.2",
-    "@octanejs/floating-ui": "0.1.41"
+    "@octanejs/floating-ui": "0.1.43"
   },
   "peerDependencies": {
-    "octane": "0.1.42"
+    "octane": "0.1.44"
   },
   "devDependencies": {
     "@juggle/resize-observer": "^3.4.0",
@@ -149,7 +149,7 @@
     "react-dom": "^19.2.7",
     "typescript": "^5.9.3",
     "vitest": "^4.1.10",
-    "octane": "0.1.42"
+    "octane": "0.1.44"
   },
   "scripts": {
     "compile:check": "node scripts/check-tsrx-compile.mjs",

package/src/annotation/components/EditableAnnotation.tsrx

@@ -1,9 +1,12 @@
 /* eslint-disable react/jsx-handler-names */
 import { useCallback, useRef } from 'octane';
-import type { MouseEvent, TouchEvent } from 'react';
 import type { Octane } from 'octane/jsx-runtime';
 import type { OctaneNode } from 'octane';
-import type { UseDrag, HandlerArgs as DragHandlerArgs } from '@octanejs/visx/drag';
+import type {
+	UseDrag,
+	HandlerArgs as DragHandlerArgs,
+	MouseTouchOrPointerEvent,
+} from '@octanejs/visx/drag';
 import { useDrag } from '@octanejs/visx/drag';
 import type { AnnotationContextType } from '../types';
 import Annotation from './Annotation.tsrx';
@@ -36,7 +39,7 @@ export type HandlerArgs = {
 	y: number;
 	dx: number;
 	dy: number;
-	event: MouseEvent | TouchEvent;
+	event: MouseTouchOrPointerEvent;
 };
 
 const defaultDragHandleProps = {

package/src/annotation/components/EditableAnnotation.tsrx.d.ts

@@ -1,7 +1,7 @@
 // Generated by scripts/generate-tsrx-types.mjs.
-import type { MouseEvent, TouchEvent } from 'react';
 import type { Octane } from 'octane/jsx-runtime';
 import type { OctaneNode } from 'octane';
+import type { MouseTouchOrPointerEvent } from '@octanejs/visx/drag';
 import type { AnnotationContextType } from '../types';
 export type EditableAnnotationProps = Pick<AnnotationContextType, 'x' | 'y' | 'dx' | 'dy'> & {
     /** Width of the possible drag canvas (e.g., SVG container). */
@@ -30,6 +30,6 @@ export type HandlerArgs = {
     y: number;
     dx: number;
     dy: number;
-    event: MouseEvent | TouchEvent;
+    event: MouseTouchOrPointerEvent;
 };
 export default function EditableAnnotation({ canEditLabel, canEditSubject, children, dx: labelDx, dy: labelDy, height, labelDragHandleProps, onDragEnd, onDragMove, onDragStart, subjectDragHandleProps, width, x: subjectX, y: subjectY, }: EditableAnnotationProps): import("react").JSX.Element;

package/src/annotation/components/Label.tsrx

@@ -62,6 +62,15 @@ export type LabelProps = {
 
 const DEFAULT_PADDING = { top: 12, right: 12, bottom: 12, left: 12 };
 
+function toFontSizeNumber(value: string | number | undefined): number {
+	if (typeof value === 'number' && Number.isFinite(value)) return value;
+	if (typeof value === 'string') {
+		const parsed = Number.parseFloat(value);
+		if (Number.isFinite(parsed)) return parsed;
+	}
+	return 0;
+}
+
 function getCompletePadding(padding: LabelProps['backgroundPadding']) {
 	if (typeof padding === 'undefined') return DEFAULT_PADDING;
 	if (typeof padding === 'number') {
@@ -122,10 +131,10 @@ export default function Label({
 	});
 
 	const fallbackTitleHeight = title
-		? Math.max(1, titleWordsByLine.length) * titleFontSize * 1.1
+		? Math.max(1, titleWordsByLine.length) * toFontSizeNumber(titleFontSize) * 1.1
 		: 0;
 	const fallbackSubtitleHeight = subtitle
-		? Math.max(1, subtitleWordsByLine.length) * subtitleFontSize * 1.1
+		? Math.max(1, subtitleWordsByLine.length) * toFontSizeNumber(subtitleFontSize) * 1.1
 		: 0;
 	// Keep annotation geometry byte-stable across SSR and hydration. Browser font
 	// measurement would move the label after adoption; useText's deterministic

package/src/axis/axis/Axis.tsrx

@@ -1,13 +1,15 @@
 import cx from 'classnames';
 import { createElement } from 'octane';
 import { Group } from '@octanejs/visx/group';
-import type { SharedAxisProps, AxisScale } from '../types';
+import type { SharedAxisProps, AxisScale, AxisRendererProps } from '../types';
 import AxisRenderer from './AxisRenderer.tsrx';
 import type { OrientationType } from '../constants/orientation';
 import Orientation from '../constants/orientation';
 import useAxis from '../react/useAxis.tsrx';
 
-const renderAxis = (axis: Parameters<typeof AxisRenderer>[0]) => createElement(AxisRenderer, axis);
+function renderAxis<Scale extends AxisScale>(axis: AxisRendererProps<Scale>) {
+	return createElement(AxisRenderer, axis as Parameters<typeof AxisRenderer>[0]);
+}
 
 export type AxisProps<Scale extends AxisScale> = SharedAxisProps<Scale> & {
 		orientation?: OrientationType;

package/src/brush/BaseBrush.tsrx

@@ -1,5 +1,4 @@
 import { useCallback, useEffect, useLayoutEffect, useMemo, useRef, useState } from 'octane';
-import type { PointerEvent } from 'react';
 import type { Octane } from 'octane/jsx-runtime';
 import type { OctaneNode } from 'octane';
 import { Group } from '@octanejs/visx/group';
@@ -22,7 +21,7 @@ import type {
 } from './types';
 import { debounce, getPageCoordinates, normalizeBrushStartEnd } from './utils';
 
-type PointerHandlerEvent = PointerEvent<SVGRectElement>;
+type PointerHandlerEvent = PointerEvent | MouseEvent;
 
 const DEFAULT_MARGIN = { left: 0, top: 0, right: 0, bottom: 0 };
 const DEFAULT_RESIZE_TRIGGER_AREAS: ResizeTriggerAreas[] = ['left', 'right'];
@@ -45,7 +44,7 @@ export type BaseBrushProps = {
 	onMouseUp?: (event: PointerHandlerEvent) => void;
 	onMouseMove?: (event: PointerHandlerEvent) => void;
 	onClick?: (event: PointerHandlerEvent) => void;
-	clickSensitivity: number;
+	clickSensitivity?: number;
 	disableDraggingSelection: boolean;
 	disableDraggingOverlay?: boolean;
 	resetOnEnd?: boolean;
@@ -162,7 +161,7 @@ export function BaseBrush(inputProps: BaseBrushProps) {
 			const start = { ...previous.start };
 			const end = { ...previous.end };
 			normalizeBrushStartEnd(start, end, previous.extent);
-			let next = {
+			let next: BaseBrushState = {
 				...previous,
 				start,
 				end,
@@ -330,7 +329,7 @@ export function BaseBrush(inputProps: BaseBrushProps) {
 		const { onBrushEnd, resetOnEnd, useWindowMoveEvents } = propsRef.current;
 		if (useWindowMoveEvents) return;
 		updateBrush((previous) => {
-			let next = {
+			let next: BaseBrushState = {
 				...previous,
 				start: { x: previous.extent.x0, y: previous.extent.y0 },
 				end: { x: previous.extent.x1, y: previous.extent.y1 },
@@ -449,7 +448,7 @@ export function BaseBrush(inputProps: BaseBrushProps) {
 					height={stageHeight}
 					onClick={(event) => {
 						const duration = mouseUpTimeRef.current - mouseDownTimeRef.current;
-						if (onClick && duration < clickSensitivity) onClick(event);
+						if (onClick && duration < (clickSensitivity ?? 200)) onClick(event);
 					}}
 					style={{ cursor: 'default' }}
 				/>
@@ -470,7 +469,7 @@ export function BaseBrush(inputProps: BaseBrushProps) {
 							onDoubleClick={reset}
 							onClick={(event: PointerHandlerEvent) => {
 								const duration = mouseUpTimeRef.current - mouseDownTimeRef.current;
-								if (onClick && duration < clickSensitivity) onClick(event);
+								if (onClick && duration < (clickSensitivity ?? 200)) onClick(event);
 							}}
 							onPointerDown={(event: PointerHandlerEvent) => {
 								mouseDownTimeRef.current = Date.now();

package/src/brush/BaseBrush.tsrx.d.ts

@@ -1,10 +1,9 @@
 // Generated by scripts/generate-tsrx-types.mjs.
-import type { PointerEvent } from 'react';
 import type { Octane } from 'octane/jsx-runtime';
 import type { OctaneNode } from 'octane';
 import type { BrushHandleRenderProps } from './BrushHandle.tsrx';
 import type { MarginShape, BrushShape, ResizeTriggerAreas, PartialBrushStartEnd, BrushingType, BrushPageOffset } from './types';
-type PointerHandlerEvent = PointerEvent<SVGRectElement>;
+type PointerHandlerEvent = PointerEvent | MouseEvent;
 export type BaseBrushProps = {
     brushDirection?: 'horizontal' | 'vertical' | 'both';
     initialBrushPosition?: PartialBrushStartEnd;
@@ -23,7 +22,7 @@ export type BaseBrushProps = {
     onMouseUp?: (event: PointerHandlerEvent) => void;
     onMouseMove?: (event: PointerHandlerEvent) => void;
     onClick?: (event: PointerHandlerEvent) => void;
-    clickSensitivity: number;
+    clickSensitivity?: number;
     disableDraggingSelection: boolean;
     disableDraggingOverlay?: boolean;
     resetOnEnd?: boolean;

package/src/brush/BrushOverlay.tsrx

@@ -1,17 +1,20 @@
-import type { CSSProperties, PointerEvent } from 'react';
+import type { CSSProperties } from 'react';
+import type { Octane } from 'octane/jsx-runtime';
 import { Bar } from '@octanejs/visx/shape';
 
 type BrushOverlayProps = {
 	width: number;
 	height: number;
 	style?: CSSProperties;
-	onClick?: (event: PointerEvent<SVGRectElement>) => void;
-	onDoubleClick?: (event: PointerEvent<SVGRectElement>) => void;
-	onPointerDown?: (event: PointerEvent<SVGRectElement>) => void;
-	onPointerLeave?: (event: PointerEvent<SVGRectElement>) => void;
-	onPointerMove?: (event: PointerEvent<SVGRectElement>) => void;
-	onPointerUp?: (event: PointerEvent<SVGRectElement>) => void;
-};
+} & Pick<
+	Octane.SVGProps<SVGRectElement>,
+	| 'onClick'
+	| 'onDoubleClick'
+	| 'onPointerDown'
+	| 'onPointerLeave'
+	| 'onPointerMove'
+	| 'onPointerUp'
+>;
 
 export default function BrushOverlay(props: BrushOverlayProps) {
 	return <Bar className="visx-brush-overlay" fill="transparent" x={0} y={0} {...props} />;

package/src/brush/BrushOverlay.tsrx.d.ts

@@ -1,15 +1,10 @@
 // Generated by scripts/generate-tsrx-types.mjs.
-import type { CSSProperties, PointerEvent } from 'react';
+import type { CSSProperties } from 'react';
+import type { Octane } from 'octane/jsx-runtime';
 type BrushOverlayProps = {
     width: number;
     height: number;
     style?: CSSProperties;
-    onClick?: (event: PointerEvent<SVGRectElement>) => void;
-    onDoubleClick?: (event: PointerEvent<SVGRectElement>) => void;
-    onPointerDown?: (event: PointerEvent<SVGRectElement>) => void;
-    onPointerLeave?: (event: PointerEvent<SVGRectElement>) => void;
-    onPointerMove?: (event: PointerEvent<SVGRectElement>) => void;
-    onPointerUp?: (event: PointerEvent<SVGRectElement>) => void;
-};
+} & Pick<Octane.SVGProps<SVGRectElement>, 'onClick' | 'onDoubleClick' | 'onPointerDown' | 'onPointerLeave' | 'onPointerMove' | 'onPointerUp'>;
 export default function BrushOverlay(props: BrushOverlayProps): import("react").JSX.Element;
 export {};

package/src/brush/BrushSelection.tsrx

@@ -1,5 +1,4 @@
 /* eslint react/jsx-handler-names: 0 */
-import type { PointerEvent } from 'react';
 import type { Octane } from 'octane/jsx-runtime';
 import type { HandlerArgs as DragArgs } from '@octanejs/visx/drag';
 import { Drag } from '@octanejs/visx/drag';
@@ -10,7 +9,7 @@ import { getPageCoordinates } from './utils';
 
 const DRAGGING_OVERLAY_STYLES = { cursor: 'move' };
 
-type PointerHandler = (event: PointerEvent<SVGRectElement>) => void;
+type PointerHandler = (event: PointerEvent) => void;
 
 export type BrushSelectionProps = {
 	width: number;
@@ -167,7 +166,7 @@ export default function BrushSelection(props: BrushSelectionProps) {
 							if (onMouseUp) onMouseUp(event);
 						}}
 						onClick={(event) => {
-							if (onClick) onClick(event as PointerEvent<SVGRectElement>);
+							if (onClick) onClick(event as unknown as PointerEvent);
 						}}
 						style={{
 							pointerEvents: brush.isBrushing || brush.activeHandle ? 'none' : 'all',

package/src/brush/BrushSelection.tsrx.d.ts

@@ -1,10 +1,9 @@
 // Generated by scripts/generate-tsrx-types.mjs.
-import type { PointerEvent } from 'react';
 import type { Octane } from 'octane/jsx-runtime';
 import type { HandlerArgs as DragArgs } from '@octanejs/visx/drag';
 import type { BaseBrushState as BrushState, UpdateBrush } from './BaseBrush.tsrx';
 import type { BrushPageOffset, BrushingType } from './types';
-type PointerHandler = (event: PointerEvent<SVGRectElement>) => void;
+type PointerHandler = (event: PointerEvent) => void;
 export type BrushSelectionProps = {
     width: number;
     height: number;

package/src/internal/useMeasure.tsrx

@@ -19,7 +19,7 @@ export type ResizeObserverConstructor =
 export type Options = {
 	debounce?: number | { scroll?: number; resize?: number };
 	scroll?: boolean;
-	polyfill?: ResizeObserverConstructor;
+	polyfill?: ResizeObserverConstructor | (new (callback: ResizeObserverCallback) => ResizeObserver);
 	offsetSize?: boolean;
 };
 

package/src/internal/useMeasure.tsrx.d.ts

@@ -16,7 +16,7 @@ export type Options = {
         resize?: number;
     };
     scroll?: boolean;
-    polyfill?: ResizeObserverConstructor;
+    polyfill?: ResizeObserverConstructor | (new (callback: ResizeObserverCallback) => ResizeObserver);
     offsetSize?: boolean;
 };
 export default function useMeasure(options?: Options): readonly [(element: HTMLElement | SVGElement | null) => void, RectReadOnly, () => void];

package/src/legend/legends/Legend/LegendItem.tsrx

@@ -1,5 +1,5 @@
-import type { HTMLProps } from 'react';
 import type { OctaneNode } from 'octane';
+import type { Octane } from 'octane/jsx-runtime';
 import type { FlexDirection } from '../../types';
 
 export type LegendItemProps = {
@@ -22,7 +22,7 @@ export default function LegendItem({
 	display = 'flex',
 	children,
 	...restProps
-}: LegendItemProps & Omit<HTMLProps<HTMLDivElement>, keyof LegendItemProps>) {
+}: LegendItemProps & Omit<Octane.HTMLAttributes<HTMLDivElement>, keyof LegendItemProps>) {
 	return <div
 		className="visx-legend-item"
 		style={{

package/src/legend/legends/Legend/LegendItem.tsrx.d.ts

@@ -1,6 +1,6 @@
 // Generated by scripts/generate-tsrx-types.mjs.
-import type { HTMLProps } from 'react';
 import type { OctaneNode } from 'octane';
+import type { Octane } from 'octane/jsx-runtime';
 import type { FlexDirection } from '../../types';
 export type LegendItemProps = {
     /** Flex direction for the legend item layout. Determines if the shape and label are arranged horizontally or vertically. */
@@ -14,4 +14,4 @@ export type LegendItemProps = {
     /** CSS display property for the legend item. */
     display?: string;
 };
-export default function LegendItem({ flexDirection, alignItems, margin, display, children, ...restProps }: LegendItemProps & Omit<HTMLProps<HTMLDivElement>, keyof LegendItemProps>): import("react").JSX.Element;
+export default function LegendItem({ flexDirection, alignItems, margin, display, children, ...restProps }: LegendItemProps & Omit<Octane.HTMLAttributes<HTMLDivElement>, keyof LegendItemProps>): import("react").JSX.Element;

package/src/legend/legends/Legend/LegendLabel.tsrx

@@ -1,5 +1,5 @@
-import type { HTMLProps } from 'react';
 import type { OctaneNode } from 'octane';
+import type { Octane } from 'octane/jsx-runtime';
 
 export type LegendLabelOwnProps = {
 	/** Horizontal alignment of the label text. Maps to CSS justify-content property. */
@@ -15,7 +15,7 @@ export type LegendLabelOwnProps = {
 };
 
 export type LegendLabelProps =
-	LegendLabelOwnProps & Omit<HTMLProps<HTMLDivElement>, keyof LegendLabelOwnProps>;
+	LegendLabelOwnProps & Omit<Octane.HTMLAttributes<HTMLDivElement>, keyof LegendLabelOwnProps>;
 
 export default function LegendLabel({
 	flex = '1',

package/src/legend/legends/Legend/LegendLabel.tsrx.d.ts

@@ -1,6 +1,6 @@
 // Generated by scripts/generate-tsrx-types.mjs.
-import type { HTMLProps } from 'react';
 import type { OctaneNode } from 'octane';
+import type { Octane } from 'octane/jsx-runtime';
 export type LegendLabelOwnProps = {
     /** Horizontal alignment of the label text. Maps to CSS justify-content property. */
     align?: string;
@@ -13,5 +13,5 @@ export type LegendLabelOwnProps = {
     /** Child elements to render. If provided, overrides the label prop. */
     children?: OctaneNode;
 };
-export type LegendLabelProps = LegendLabelOwnProps & Omit<HTMLProps<HTMLDivElement>, keyof LegendLabelOwnProps>;
+export type LegendLabelProps = LegendLabelOwnProps & Omit<Octane.HTMLAttributes<HTMLDivElement>, keyof LegendLabelOwnProps>;
 export default function LegendLabel({ flex, label, margin, align, children, ...restProps }: LegendLabelProps): import("react").JSX.Element;

package/src/legend/legends/Legend/index.tsrx

@@ -1,6 +1,5 @@
 import type { CSSProperties } from 'react';
 import type { OctaneNode } from 'octane';
-import { createElement } from 'octane';
 import cx from 'classnames';
 import type { AnyD3Scale, ScaleInput } from '@octanejs/visx/scale';
 import LegendItem from './LegendItem.tsrx';
@@ -100,36 +99,36 @@ export default function Legend<Scale extends AnyD3Scale>({
 	if (children) return <>
 		{children(labels)}
 	</>;
-	const legendItems = labels.map(
-		(label, i) => createElement(
-			LegendItem,
-			{
-				key: `legend-${label.text}-${i}`,
-				margin: itemMargin,
-				flexDirection: itemDirection,
-				...legendItemProps,
-			},
-			createElement(LegendShape, {
-				shape,
-				height: shapeHeight,
-				width: shapeWidth,
-				margin: shapeMargin,
-				item: domain[i],
-				itemIndex: i,
-				label,
-				fill,
-				size,
-				shapeStyle,
-			}),
-			createElement(LegendLabel, {
-				label: label.text,
-				flex: labelFlex,
-				margin: labelMargin,
-				align: labelAlign,
-				...legendLabelProps,
-			}),
-		),
-	);
+	const legendItems = labels.map(function (label, i) {
+		return (
+			<LegendItem
+				key={`legend-${label.text}-${i}`}
+				margin={itemMargin}
+				flexDirection={itemDirection}
+				{...legendItemProps}
+			>
+				<LegendShape
+					shape={shape}
+					height={shapeHeight}
+					width={shapeWidth}
+					margin={shapeMargin}
+					item={domain[i]}
+					itemIndex={i}
+					label={label}
+					fill={fill}
+					size={size}
+					shapeStyle={shapeStyle}
+				/>
+				<LegendLabel
+					label={label.text}
+					flex={labelFlex}
+					margin={labelMargin}
+					align={labelAlign}
+					{...legendLabelProps}
+				/>
+			</LegendItem>
+		);
+	});
 
 	return <div
 		className={cx('visx-legend', className)}

package/src/legend/types/index.ts

@@ -1,5 +1,6 @@
 import type { AnyD3Scale, ScaleInput } from '@octanejs/visx/scale';
-import type { ComponentClass, CSSProperties, FC } from 'react';
+import type { ComponentBody } from 'octane';
+import type { CSSProperties } from 'react';
 
 export type LabelFormatterFactory<Scale extends AnyD3Scale> = (args: {
 	scale: Scale;
@@ -35,11 +36,7 @@ export type RenderShapeProvidedProps<Data, Output> = {
 };
 
 export type LegendShape<Data, Output> =
-	| 'rect'
-	| 'circle'
-	| 'line'
-	| FC<RenderShapeProvidedProps<Data, Output>>
-	| ComponentClass<RenderShapeProvidedProps<Data, Output>>;
+	'rect' | 'circle' | 'line' | ComponentBody<RenderShapeProvidedProps<Data, Output>>;
 
 export type FillAccessor<Datum, Output> = (
 	label: FormattedLabel<Datum, Output>,

package/src/responsive/types/index.ts

@@ -1,26 +1,8 @@
-// @TODO remove all these types when upgraded to TS 4 which has its own declaration
-interface ResizeObserverEntry {
-	contentRect: {
-		left: number;
-		top: number;
-		width: number;
-		height: number;
-	};
-}
-
-type ResizeObserverCallback = (entries: ResizeObserverEntry[], observer: ResizeObserver) => void;
+export type ResizeObserver = globalThis.ResizeObserver;
 
-export declare class ResizeObserver {
-	constructor(callback: ResizeObserverCallback);
-	observe(target: Element, options?: any): void;
-	unobserve(target: Element): void;
-	disconnect(): void;
-	static toString(): string;
-}
-
-export interface ResizeObserverPolyfill {
+export type ResizeObserverPolyfill = {
 	new (callback: ResizeObserverCallback): ResizeObserver;
-}
+};
 
 export interface PrivateWindow {
 	ResizeObserver: ResizeObserverPolyfill;

package/src/sankey/Sankey.tsrx

@@ -1,5 +1,5 @@
-import type { SVGAttributes } from 'react';
 import type { OctaneNode } from 'octane';
+import type { Octane } from 'octane/jsx-runtime';
 import cx from 'classnames';
 import { Group } from '@octanejs/visx/group';
 import type { SankeyExtraProperties, SankeyGraph, SankeyLink, SankeyNode } from 'd3-sankey';
@@ -9,13 +9,13 @@ import type { Link } from 'd3-shape';
 const DEFAULT_COLOR = '#000';
 
 type NodeProps =
-	Pick<SVGAttributes<SVGRectElement>, | 'stroke'
+	Pick<Octane.SVGProps<SVGRectElement>, | 'stroke'
 	| 'strokeOpacity'
 	| 'strokeWidth'
 	| 'fill'
 	| 'fillOpacity'>;
 type LinkProps =
-	Pick<SVGAttributes<SVGPathElement>, | 'fill'
+	Pick<Octane.SVGProps<SVGPathElement>, | 'fill'
 	| 'fillOpacity'
 	| 'stroke'
 	| 'strokeOpacity'
@@ -113,8 +113,12 @@ export default function Sankey<NodeDatum extends SankeyExtraProperties, LinkDatu
 	if (extent) sankey.extent(extent);
 	if (size) sankey.size(size);
 	if (iterations) sankey.iterations(iterations);
-	if (nodeSort) sankey.nodeSort(nodeSort);
-	if (linkSort) sankey.linkSort(linkSort);
+	if (nodeSort) {
+		sankey.nodeSort(nodeSort as (a: SankeyNode<NodeDatum, LinkDatum>, b: SankeyNode<NodeDatum, LinkDatum>) => number);
+	}
+	if (linkSort) {
+		sankey.linkSort(linkSort as (a: SankeyLink<NodeDatum, LinkDatum>, b: SankeyLink<NodeDatum, LinkDatum>) => number);
+	}
 
 	const graph = sankey(root);
 	const createPath = sankeyLinkHorizontal<NodeDatum, LinkDatum>();

package/src/sankey/Sankey.tsrx.d.ts

@@ -1,10 +1,10 @@
 // Generated by scripts/generate-tsrx-types.mjs.
-import type { SVGAttributes } from 'react';
 import type { OctaneNode } from 'octane';
+import type { Octane } from 'octane/jsx-runtime';
 import type { SankeyExtraProperties, SankeyGraph, SankeyLink, SankeyNode } from 'd3-sankey';
 import type { Link } from 'd3-shape';
-type NodeProps = Pick<SVGAttributes<SVGRectElement>, 'stroke' | 'strokeOpacity' | 'strokeWidth' | 'fill' | 'fillOpacity'>;
-type LinkProps = Pick<SVGAttributes<SVGPathElement>, 'fill' | 'fillOpacity' | 'stroke' | 'strokeOpacity' | 'strokeWidth' | 'strokeDasharray' | 'strokeDashoffset'>;
+type NodeProps = Pick<Octane.SVGProps<SVGRectElement>, 'stroke' | 'strokeOpacity' | 'strokeWidth' | 'fill' | 'fillOpacity'>;
+type LinkProps = Pick<Octane.SVGProps<SVGPathElement>, 'fill' | 'fillOpacity' | 'stroke' | 'strokeOpacity' | 'strokeWidth' | 'strokeDasharray' | 'strokeDashoffset'>;
 type CreatePath<NodeDatum extends SankeyExtraProperties, LinkDatum extends SankeyExtraProperties> = Link<any, SankeyLink<NodeDatum, LinkDatum>, [number, number]>;
 type NodeIdAccessor<NodeDatum extends SankeyExtraProperties, LinkDatum extends SankeyExtraProperties> = (node: SankeyNode<NodeDatum, LinkDatum>) => string | number;
 type SourceAccessor<NodeDatum extends SankeyExtraProperties, LinkDatum extends SankeyExtraProperties> = Exclude<Parameters<CreatePath<NodeDatum, LinkDatum>['source']>, undefined>[0];

package/src/shape/shapes/Bar.tsrx

@@ -1,10 +1,11 @@
 import type { Ref } from 'react';
+import type { Octane } from 'octane/jsx-runtime';
 import cx from 'classnames';
 import type { AddSVGProps } from '../types';
 
 export type BarProps = {
 	/** className to apply to rect element. */
-	className?: string;
+	className?: Octane.SVGProps<SVGRectElement>['className'];
 	/** reference to rect element. */
 	innerRef?: Ref<SVGRectElement>;
 };

package/src/shape/shapes/Bar.tsrx.d.ts

@@ -1,9 +1,10 @@
 // Generated by scripts/generate-tsrx-types.mjs.
 import type { Ref } from 'react';
+import type { Octane } from 'octane/jsx-runtime';
 import type { AddSVGProps } from '../types';
 export type BarProps = {
     /** className to apply to rect element. */
-    className?: string;
+    className?: Octane.SVGProps<SVGRectElement>['className'];
     /** reference to rect element. */
     innerRef?: Ref<SVGRectElement>;
 };

package/src/shape/shapes/BarRounded.tsrx

@@ -1,11 +1,12 @@
 import type { Ref } from 'react';
+import type { Octane } from 'octane/jsx-runtime';
 import type { OctaneNode } from 'octane';
 import cx from 'classnames';
 import type { AddSVGProps } from '../types';
 
 export type BarRoundedProps = {
 	/** className to apply to path element. */
-	className?: string;
+	className?: Octane.SVGProps<SVGPathElement>['className'];
 	/** reference to path element. */
 	innerRef?: Ref<SVGPathElement>;
 	/** left position of the bar */

package/src/shape/shapes/BarRounded.tsrx.d.ts

@@ -1,10 +1,11 @@
 // Generated by scripts/generate-tsrx-types.mjs.
 import type { Ref } from 'react';
+import type { Octane } from 'octane/jsx-runtime';
 import type { OctaneNode } from 'octane';
 import type { AddSVGProps } from '../types';
 export type BarRoundedProps = {
     /** className to apply to path element. */
-    className?: string;
+    className?: Octane.SVGProps<SVGPathElement>['className'];
     /** reference to path element. */
     innerRef?: Ref<SVGPathElement>;
     /** left position of the bar */

package/src/shape/shapes/Line.tsrx

@@ -1,4 +1,5 @@
 import type { Ref } from 'react';
+import type { Octane } from 'octane/jsx-runtime';
 import cx from 'classnames';
 import type { AddSVGProps } from '../types';
 
@@ -9,7 +10,7 @@ interface Point {
 
 export type LineProps = {
 	/** className to apply to line element. */
-	className?: string;
+	className?: Octane.SVGProps<SVGLineElement>['className'];
 	/** reference to line element. */
 	innerRef?: Ref<SVGLineElement>;
 	/** fill color applied to line element. */

package/src/shape/shapes/Line.tsrx.d.ts

@@ -1,5 +1,6 @@
 // Generated by scripts/generate-tsrx-types.mjs.
 import type { Ref } from 'react';
+import type { Octane } from 'octane/jsx-runtime';
 import type { AddSVGProps } from '../types';
 interface Point {
     x?: number;
@@ -7,7 +8,7 @@ interface Point {
 }
 export type LineProps = {
     /** className to apply to line element. */
-    className?: string;
+    className?: Octane.SVGProps<SVGLineElement>['className'];
     /** reference to line element. */
     innerRef?: Ref<SVGLineElement>;
     /** fill color applied to line element. */