@octanejs/visx 0.1.31 → 0.1.33

package/src/glyph/glyphs/GlyphDiamond.tsrx.d.ts

@@ -1,5 +1,5 @@
 // Generated by scripts/generate-tsrx-types.mjs.
-import type { SVGProps } from 'react';
+import type { Octane } from 'octane/jsx-runtime';
 import type { OctaneNode } from 'octane';
 import type { Symbol } from 'd3-shape';
 export type GlyphDiamondProps<Datum> = {
@@ -16,4 +16,4 @@ export type GlyphDiamondProps<Datum> = {
     /** Size of diamond in px, or an accessor which takes Datum as input and returns a size. */
     size?: number | ((d: Datum) => number);
 };
-export default function GlyphDiamond<Datum = unknown>({ children, className, top, left, size, ...restProps }: GlyphDiamondProps<Datum> & Omit<SVGProps<SVGPathElement>, keyof GlyphDiamondProps<Datum>>): import("react").JSX.Element;
+export default function GlyphDiamond<Datum = unknown>({ children, className, top, left, size, ...restProps }: GlyphDiamondProps<Datum> & Omit<Octane.SVGProps<SVGPathElement>, keyof GlyphDiamondProps<Datum>>): import("react").JSX.Element;

package/src/glyph/glyphs/GlyphDot.tsrx

@@ -1,4 +1,4 @@
-import type { SVGProps } from 'react';
+import type { Octane } from 'octane/jsx-runtime';
 import cx from 'classnames';
 import Glyph from './Glyph.tsrx';
 
@@ -22,7 +22,7 @@ export default function GlyphDot({
 	left = 0,
 	className,
 	...restProps
-}: GlyphDotProps & Omit<SVGProps<SVGCircleElement>, keyof GlyphDotProps>) {
+}: GlyphDotProps & Omit<Octane.SVGProps<SVGCircleElement>, keyof GlyphDotProps>) {
 	return <Glyph top={top} left={left}>
 		<circle className={cx('visx-glyph-dot', className)} {...restProps} />
 	</Glyph>;

package/src/glyph/glyphs/GlyphDot.tsrx.d.ts

@@ -1,5 +1,5 @@
 // Generated by scripts/generate-tsrx-types.mjs.
-import type { SVGProps } from 'react';
+import type { Octane } from 'octane/jsx-runtime';
 export type GlyphDotProps = {
     /** classname to apply to glyph path element. */
     className?: string;
@@ -14,4 +14,4 @@ export type GlyphDotProps = {
     /** y coordinate of the center of the dot. */
     cy?: number;
 };
-export default function GlyphDot({ top, left, className, ...restProps }: GlyphDotProps & Omit<SVGProps<SVGCircleElement>, keyof GlyphDotProps>): import("react").JSX.Element;
+export default function GlyphDot({ top, left, className, ...restProps }: GlyphDotProps & Omit<Octane.SVGProps<SVGCircleElement>, keyof GlyphDotProps>): import("react").JSX.Element;

package/src/glyph/glyphs/GlyphSquare.tsrx

@@ -1,4 +1,4 @@
-import type { SVGProps } from 'react';
+import type { Octane } from 'octane/jsx-runtime';
 import type { OctaneNode } from 'octane';
 import cx from 'classnames';
 import type { Symbol } from 'd3-shape';
@@ -29,7 +29,7 @@ export default function GlyphSquare<Datum = unknown>({
 	left,
 	size,
 	...restProps
-}: GlyphSquareProps<Datum> & Omit<SVGProps<SVGPathElement>, keyof GlyphSquareProps<Datum>>) {
+}: GlyphSquareProps<Datum> & Omit<Octane.SVGProps<SVGPathElement>, keyof GlyphSquareProps<Datum>>) {
 	const path = symbol<Datum>();
 	path.type(symbolSquare);
 

package/src/glyph/glyphs/GlyphSquare.tsrx.d.ts

@@ -1,5 +1,5 @@
 // Generated by scripts/generate-tsrx-types.mjs.
-import type { SVGProps } from 'react';
+import type { Octane } from 'octane/jsx-runtime';
 import type { OctaneNode } from 'octane';
 import type { Symbol } from 'd3-shape';
 export type GlyphSquareProps<Datum> = {
@@ -16,4 +16,4 @@ export type GlyphSquareProps<Datum> = {
     /** Size of square in px, or an accessor which takes Datum as input and returns a size. */
     size?: number | ((d: Datum) => number);
 };
-export default function GlyphSquare<Datum = unknown>({ children, className, top, left, size, ...restProps }: GlyphSquareProps<Datum> & Omit<SVGProps<SVGPathElement>, keyof GlyphSquareProps<Datum>>): import("react").JSX.Element;
+export default function GlyphSquare<Datum = unknown>({ children, className, top, left, size, ...restProps }: GlyphSquareProps<Datum> & Omit<Octane.SVGProps<SVGPathElement>, keyof GlyphSquareProps<Datum>>): import("react").JSX.Element;

package/src/glyph/glyphs/GlyphStar.tsrx

@@ -1,4 +1,4 @@
-import type { SVGProps } from 'react';
+import type { Octane } from 'octane/jsx-runtime';
 import type { OctaneNode } from 'octane';
 import cx from 'classnames';
 import type { Symbol } from 'd3-shape';
@@ -29,7 +29,7 @@ export default function GlyphStar<Datum = unknown>({
 	left,
 	size,
 	...restProps
-}: GlyphStarProps<Datum> & Omit<SVGProps<SVGPathElement>, keyof GlyphStarProps<Datum>>) {
+}: GlyphStarProps<Datum> & Omit<Octane.SVGProps<SVGPathElement>, keyof GlyphStarProps<Datum>>) {
 	const path = symbol<Datum>();
 	path.type(symbolStar);
 

package/src/glyph/glyphs/GlyphStar.tsrx.d.ts

@@ -1,5 +1,5 @@
 // Generated by scripts/generate-tsrx-types.mjs.
-import type { SVGProps } from 'react';
+import type { Octane } from 'octane/jsx-runtime';
 import type { OctaneNode } from 'octane';
 import type { Symbol } from 'd3-shape';
 export type GlyphStarProps<Datum> = {
@@ -16,4 +16,4 @@ export type GlyphStarProps<Datum> = {
     /** Size of star in px, or an accessor which takes Datum as input and returns a size. */
     size?: number | ((d: Datum) => number);
 };
-export default function GlyphStar<Datum = unknown>({ children, className, top, left, size, ...restProps }: GlyphStarProps<Datum> & Omit<SVGProps<SVGPathElement>, keyof GlyphStarProps<Datum>>): import("react").JSX.Element;
+export default function GlyphStar<Datum = unknown>({ children, className, top, left, size, ...restProps }: GlyphStarProps<Datum> & Omit<Octane.SVGProps<SVGPathElement>, keyof GlyphStarProps<Datum>>): import("react").JSX.Element;

package/src/glyph/glyphs/GlyphTriangle.tsrx

@@ -1,4 +1,4 @@
-import type { SVGProps } from 'react';
+import type { Octane } from 'octane/jsx-runtime';
 import type { OctaneNode } from 'octane';
 import cx from 'classnames';
 import type { Symbol } from 'd3-shape';
@@ -29,7 +29,7 @@ export default function GlyphTriangle<Datum = unknown>({
 	left,
 	size,
 	...restProps
-}: GlyphTriangleProps<Datum> & Omit<SVGProps<SVGPathElement>, keyof GlyphTriangleProps<Datum>>) {
+}: GlyphTriangleProps<Datum> & Omit<Octane.SVGProps<SVGPathElement>, keyof GlyphTriangleProps<Datum>>) {
 	const path = symbol<Datum>();
 	path.type(symbolTriangle);
 

package/src/glyph/glyphs/GlyphTriangle.tsrx.d.ts

@@ -1,5 +1,5 @@
 // Generated by scripts/generate-tsrx-types.mjs.
-import type { SVGProps } from 'react';
+import type { Octane } from 'octane/jsx-runtime';
 import type { OctaneNode } from 'octane';
 import type { Symbol } from 'd3-shape';
 export type GlyphTriangleProps<Datum> = {
@@ -16,4 +16,4 @@ export type GlyphTriangleProps<Datum> = {
     /** Size of triangle in px, or an accessor which takes Datum as input and returns a size. */
     size?: number | ((d: Datum) => number);
 };
-export default function GlyphTriangle<Datum = unknown>({ children, className, top, left, size, ...restProps }: GlyphTriangleProps<Datum> & Omit<SVGProps<SVGPathElement>, keyof GlyphTriangleProps<Datum>>): import("react").JSX.Element;
+export default function GlyphTriangle<Datum = unknown>({ children, className, top, left, size, ...restProps }: GlyphTriangleProps<Datum> & Omit<Octane.SVGProps<SVGPathElement>, keyof GlyphTriangleProps<Datum>>): import("react").JSX.Element;

package/src/glyph/glyphs/GlyphWye.tsrx

@@ -1,4 +1,4 @@
-import type { SVGProps } from 'react';
+import type { Octane } from 'octane/jsx-runtime';
 import type { OctaneNode } from 'octane';
 import cx from 'classnames';
 import type { Symbol } from 'd3-shape';
@@ -29,7 +29,7 @@ export default function GlyphWye<Datum = unknown>({
 	left,
 	size,
 	...restProps
-}: GlyphWyeProps<Datum> & Omit<SVGProps<SVGPathElement>, keyof GlyphWyeProps<Datum>>) {
+}: GlyphWyeProps<Datum> & Omit<Octane.SVGProps<SVGPathElement>, keyof GlyphWyeProps<Datum>>) {
 	const path = symbol<Datum>();
 	path.type(symbolWye);
 

package/src/glyph/glyphs/GlyphWye.tsrx.d.ts

@@ -1,5 +1,5 @@
 // Generated by scripts/generate-tsrx-types.mjs.
-import type { SVGProps } from 'react';
+import type { Octane } from 'octane/jsx-runtime';
 import type { OctaneNode } from 'octane';
 import type { Symbol } from 'd3-shape';
 export type GlyphWyeProps<Datum> = {
@@ -16,4 +16,4 @@ export type GlyphWyeProps<Datum> = {
     /** Size of wye glyph in px, or an accessor which takes Datum as input and returns a size. */
     size?: number | ((d: Datum) => number);
 };
-export default function GlyphWye<Datum = unknown>({ children, className, top, left, size, ...restProps }: GlyphWyeProps<Datum> & Omit<SVGProps<SVGPathElement>, keyof GlyphWyeProps<Datum>>): import("react").JSX.Element;
+export default function GlyphWye<Datum = unknown>({ children, className, top, left, size, ...restProps }: GlyphWyeProps<Datum> & Omit<Octane.SVGProps<SVGPathElement>, keyof GlyphWyeProps<Datum>>): import("react").JSX.Element;

package/src/gradient/gradients/LinearGradient.tsrx

@@ -1,4 +1,4 @@
-import type { SVGProps } from 'react';
+import type { Octane } from 'octane/jsx-runtime';
 import type { OctaneNode } from 'octane';
 import useStableId from '../../kernel/ids/useStableId.tsrx';
 
@@ -36,7 +36,7 @@ type LinearGradientOwnProps = {
 };
 
 export type LinearGradientProps =
-	LinearGradientOwnProps & Omit<SVGProps<SVGLinearGradientElement>, keyof LinearGradientOwnProps>;
+	LinearGradientOwnProps & Omit<Octane.SVGProps<SVGLinearGradientElement>, keyof LinearGradientOwnProps>;
 
 export default function LinearGradient({
 	children,

package/src/gradient/gradients/LinearGradient.tsrx.d.ts

@@ -1,5 +1,5 @@
 // Generated by scripts/generate-tsrx-types.mjs.
-import type { SVGProps } from 'react';
+import type { Octane } from 'octane/jsx-runtime';
 import type { OctaneNode } from 'octane';
 type LinearGradientOwnProps = {
     /** Unique id for the gradient. Should be unique across all page elements. */
@@ -33,6 +33,6 @@ type LinearGradientOwnProps = {
     /** (When no x or y values are passed), will orient the gradient vertically instead of horizontally. */
     vertical?: boolean;
 };
-export type LinearGradientProps = LinearGradientOwnProps & Omit<SVGProps<SVGLinearGradientElement>, keyof LinearGradientOwnProps>;
+export type LinearGradientProps = LinearGradientOwnProps & Omit<Octane.SVGProps<SVGLinearGradientElement>, keyof LinearGradientOwnProps>;
 export default function LinearGradient({ children, id, from, to, x1: _x1, y1: _y1, x2: _x2, y2: _y2, fromOffset, fromOpacity, toOffset, toOpacity, rotate, transform, vertical, ...restProps }: LinearGradientProps): import("react").JSX.Element;
 export {};

package/src/gradient/gradients/RadialGradient.tsrx

@@ -1,4 +1,4 @@
-import type { SVGProps } from 'react';
+import type { Octane } from 'octane/jsx-runtime';
 import type { LinearGradientProps } from './LinearGradient.tsrx';
 import useStableId from '../../kernel/ids/useStableId.tsrx';
 
@@ -12,7 +12,7 @@ export type RadialGradientProps =
 	| 'toOpacity'
 	| 'rotate'
 	| 'transform'
-	| 'children'> & SVGProps<SVGRadialGradientElement>; // passed as rest props to radialGradient
+	| 'children'> & Octane.SVGProps<SVGRadialGradientElement>; // passed as rest props to radialGradient
 
 export default function RadialGradient({
 	children,

package/src/gradient/gradients/RadialGradient.tsrx.d.ts

@@ -1,5 +1,5 @@
 // Generated by scripts/generate-tsrx-types.mjs.
-import type { SVGProps } from 'react';
+import type { Octane } from 'octane/jsx-runtime';
 import type { LinearGradientProps } from './LinearGradient.tsrx';
-export type RadialGradientProps = Pick<LinearGradientProps, 'id' | 'from' | 'to' | 'fromOffset' | 'fromOpacity' | 'toOffset' | 'toOpacity' | 'rotate' | 'transform' | 'children'> & SVGProps<SVGRadialGradientElement>;
+export type RadialGradientProps = Pick<LinearGradientProps, 'id' | 'from' | 'to' | 'fromOffset' | 'fromOpacity' | 'toOffset' | 'toOpacity' | 'rotate' | 'transform' | 'children'> & Octane.SVGProps<SVGRadialGradientElement>;
 export default function RadialGradient({ children, id, from, to, fromOffset, fromOpacity, toOffset, toOpacity, rotate, transform, ...restProps }: RadialGradientProps): import("react").JSX.Element;

package/src/heatmap/heatmaps/HeatmapCircle.tsrx

@@ -1,4 +1,4 @@
-import type { SVGProps } from 'react';
+import type { Octane } from 'octane/jsx-runtime';
 import type { OctaneNode } from 'octane';
 import cx from 'classnames';
 import { Group } from '@octanejs/visx/group';
@@ -59,7 +59,7 @@ export default function HeatmapCircle<ColumnDatum, BinDatum>({
 	count = (cell: any) => cell?.count, // eslint-disable-line @typescript-eslint/no-explicit-any
 	children,
 	...restProps
-}: HeatmapCircleProps<ColumnDatum, BinDatum> & Omit<SVGProps<SVGCircleElement>, | keyof HeatmapCircleProps<ColumnDatum, BinDatum>
+}: HeatmapCircleProps<ColumnDatum, BinDatum> & Omit<Octane.SVGProps<SVGCircleElement>, | keyof HeatmapCircleProps<ColumnDatum, BinDatum>
 | 'r'
 | 'cx'
 | 'cy'

package/src/heatmap/heatmaps/HeatmapCircle.tsrx.d.ts

@@ -1,5 +1,5 @@
 // Generated by scripts/generate-tsrx-types.mjs.
-import type { SVGProps } from 'react';
+import type { Octane } from 'octane/jsx-runtime';
 import type { OctaneNode } from 'octane';
 import type { GenericCell, ColorScale, OpacityScale } from '../types';
 export type HeatmapCircleProps<ColumnDatum, BinDatum> = {
@@ -42,4 +42,4 @@ export type CircleCell<ColumnDatum, BinDatum> = GenericCell<ColumnDatum, BinDatu
 };
 export default function HeatmapCircle<ColumnDatum, BinDatum>({ className, top, left, data, gap, radius, xScale, yScale, colorScale, opacityScale, bins, // eslint-disable-line @typescript-eslint/no-explicit-any
 count, // eslint-disable-line @typescript-eslint/no-explicit-any
-children, ...restProps }: HeatmapCircleProps<ColumnDatum, BinDatum> & Omit<SVGProps<SVGCircleElement>, keyof HeatmapCircleProps<ColumnDatum, BinDatum> | 'r' | 'cx' | 'cy' | 'fill' | 'fillOpacity'>): import("react").JSX.Element;
+children, ...restProps }: HeatmapCircleProps<ColumnDatum, BinDatum> & Omit<Octane.SVGProps<SVGCircleElement>, keyof HeatmapCircleProps<ColumnDatum, BinDatum> | 'r' | 'cx' | 'cy' | 'fill' | 'fillOpacity'>): import("react").JSX.Element;

package/src/heatmap/heatmaps/HeatmapRect.tsrx

@@ -1,4 +1,4 @@
-import type { SVGProps } from 'react';
+import type { Octane } from 'octane/jsx-runtime';
 import type { OctaneNode } from 'octane';
 import cx from 'classnames';
 import { Group } from '@octanejs/visx/group';
@@ -49,7 +49,7 @@ export type RectCell<ColumnDatum, BinDatum> = GenericCell<ColumnDatum, BinDatum>
 	};
 
 export type ComponentProps<ColumnDatum, BinDatum> =
-	HeatmapRectProps<ColumnDatum, BinDatum> & Omit<SVGProps<SVGRectElement>, | keyof HeatmapRectProps<ColumnDatum, BinDatum>
+	HeatmapRectProps<ColumnDatum, BinDatum> & Omit<Octane.SVGProps<SVGRectElement>, | keyof HeatmapRectProps<ColumnDatum, BinDatum>
 	| 'width'
 	| 'height'
 	| 'x'

package/src/heatmap/heatmaps/HeatmapRect.tsrx.d.ts

@@ -1,5 +1,5 @@
 // Generated by scripts/generate-tsrx-types.mjs.
-import type { SVGProps } from 'react';
+import type { Octane } from 'octane/jsx-runtime';
 import type { OctaneNode } from 'octane';
 import type { GenericCell, ColorScale, OpacityScale } from '../types';
 export type HeatmapRectProps<ColumnDatum, BinDatum> = {
@@ -44,7 +44,7 @@ export type RectCell<ColumnDatum, BinDatum> = GenericCell<ColumnDatum, BinDatum>
     /** y position of the cell rect. */
     y: number;
 };
-export type ComponentProps<ColumnDatum, BinDatum> = HeatmapRectProps<ColumnDatum, BinDatum> & Omit<SVGProps<SVGRectElement>, keyof HeatmapRectProps<ColumnDatum, BinDatum> | 'width' | 'height' | 'x' | 'y' | 'fill' | 'fillOpacity'>;
+export type ComponentProps<ColumnDatum, BinDatum> = HeatmapRectProps<ColumnDatum, BinDatum> & Omit<Octane.SVGProps<SVGRectElement>, keyof HeatmapRectProps<ColumnDatum, BinDatum> | 'width' | 'height' | 'x' | 'y' | 'fill' | 'fillOpacity'>;
 export default function HeatmapRect<ColumnDatum, BinDatum>({ className, top, left, data, binWidth, binHeight, x0, gap, xScale, yScale, colorScale, opacityScale, bins, // eslint-disable-line @typescript-eslint/no-explicit-any
 count, // eslint-disable-line @typescript-eslint/no-explicit-any
 children, ...restProps }: ComponentProps<ColumnDatum, BinDatum>): import("react").JSX.Element;

package/src/hierarchy/hierarchies/Cluster.tsrx

@@ -1,4 +1,3 @@
-import { createElement } from 'octane';
 import type { FunctionComponent, ComponentClass } from 'react';
 import type { OctaneNode } from 'octane';
 import cx from 'classnames';
@@ -56,6 +55,11 @@ export default function Cluster<Datum>({
 	linkComponent = DefaultLink,
 	nodeComponent = DefaultNode,
 }: ClusterProps<Datum>) {
+	// Octane renders a component VALUE through a capitalized JSX tag; the prop
+	// keeps upstream's React component union for type parity.
+	const LinkComponent = linkComponent;
+	const NodeComponent = nodeComponent;
+
 	const cluster = d3cluster<Datum>();
 	if (size) cluster.size(size);
 	if (nodeSize !== undefined) cluster.nodeSize(nodeSize);
@@ -71,12 +75,12 @@ export default function Cluster<Datum>({
 		{linkComponent &&
 			data.links().map(
 				(link, i) =>
-					<Group key={`cluster-link-${i}`}>{createElement(linkComponent, { link })}</Group>,
+					<Group key={`cluster-link-${i}`}><LinkComponent link={link} /></Group>,
 			)}
 		{nodeComponent &&
 			data.descendants().map(
 				(node, i) =>
-					<Group key={`cluster-node-${i}`}>{createElement(nodeComponent, { node })}</Group>,
+					<Group key={`cluster-node-${i}`}><NodeComponent node={node} /></Group>,
 			)}
 	</Group>;
 }

package/src/hierarchy/hierarchies/Pack.tsrx

@@ -1,4 +1,3 @@
-import { createElement } from 'octane';
 import type { FunctionComponent, ComponentClass } from 'react';
 import type { OctaneNode } from 'octane';
 import cx from 'classnames';
@@ -50,6 +49,10 @@ export default function Pack<Datum>({
 	children,
 	nodeComponent = DefaultNode,
 }: PackProps<Datum>) {
+	// Octane renders a component VALUE through a capitalized JSX tag; the prop
+	// keeps upstream's React component union for type parity.
+	const NodeComponent = nodeComponent;
+
 	const pack = d3pack<Datum>();
 	if (size) pack.size(size);
 	if (radius !== undefined) pack.radius(radius);
@@ -64,7 +67,7 @@ export default function Pack<Datum>({
 	return <Group top={top} left={left} className={cx('visx-pack', className)}>
 		{nodeComponent &&
 			data.descendants().map(
-				(node, i) => <Group key={`pack-node-${i}`}>{createElement(nodeComponent, { node })}</Group>,
+				(node, i) => <Group key={`pack-node-${i}`}><NodeComponent node={node} /></Group>,
 			)}
 	</Group>;
 }

package/src/hierarchy/hierarchies/Partition.tsrx

@@ -1,4 +1,3 @@
-import { createElement } from 'octane';
 import type { FunctionComponent, ComponentClass } from 'react';
 import type { OctaneNode } from 'octane';
 import cx from 'classnames';
@@ -42,6 +41,10 @@ export default function Partition<Datum>({
 	children,
 	nodeComponent = DefaultNode,
 }: PartitionProps<Datum>) {
+	// Octane renders a component VALUE through a capitalized JSX tag; the prop
+	// keeps upstream's React component union for type parity.
+	const NodeComponent = nodeComponent;
+
 	const partition = d3partition<Datum>();
 	if (size) partition.size(size);
 	if (round) partition.round(round);
@@ -57,7 +60,7 @@ export default function Partition<Datum>({
 		{nodeComponent &&
 			data.descendants().map(
 				(node, i) =>
-					<Group key={`partition-node-${i}`}>{createElement(nodeComponent, { node })}</Group>,
+					<Group key={`partition-node-${i}`}><NodeComponent node={node} /></Group>,
 			)}
 	</Group>;
 }

package/src/hierarchy/hierarchies/Tree.tsrx

@@ -1,4 +1,3 @@
-import { createElement } from 'octane';
 import type { FunctionComponent, ComponentClass } from 'react';
 import type { OctaneNode } from 'octane';
 import cx from 'classnames';
@@ -59,6 +58,11 @@ export default function Tree<Datum>({
 	linkComponent = DefaultLink,
 	nodeComponent = DefaultNode,
 }: TreeProps<Datum>) {
+	// Octane renders a component VALUE through a capitalized JSX tag; the prop
+	// keeps upstream's React component union for type parity.
+	const LinkComponent = linkComponent;
+	const NodeComponent = nodeComponent;
+
 	const tree = d3tree<Datum>();
 	if (size) tree.size(size);
 	if (nodeSize) tree.nodeSize(nodeSize);
@@ -73,11 +77,11 @@ export default function Tree<Datum>({
 	return <Group top={top} left={left} className={cx('visx-tree', className)}>
 		{linkComponent &&
 			data.links().map(
-				(link, i) => <Group key={`tree-link-${i}`}>{createElement(linkComponent, { link })}</Group>,
+				(link, i) => <Group key={`tree-link-${i}`}><LinkComponent link={link} /></Group>,
 			)}
 		{nodeComponent &&
 			data.descendants().map(
-				(node, i) => <Group key={`tree-node-${i}`}>{createElement(nodeComponent, { node })}</Group>,
+				(node, i) => <Group key={`tree-node-${i}`}><NodeComponent node={node} /></Group>,
 			)}
 	</Group>;
 }

package/src/hierarchy/hierarchies/Treemap.tsrx

@@ -1,4 +1,3 @@
-import { createElement } from 'octane';
 import type { FunctionComponent, ComponentClass } from 'react';
 import type { OctaneNode } from 'octane';
 import cx from 'classnames';
@@ -70,6 +69,10 @@ export default function Treemap<Datum>({
 	children,
 	nodeComponent = HierarchyDefaultRectNode,
 }: TreemapProps<Datum>) {
+	// Octane renders a component VALUE through a capitalized JSX tag; the prop
+	// keeps upstream's React component union for type parity.
+	const NodeComponent = nodeComponent;
+
 	const treemap = d3treemap<Datum>();
 	if (tile) treemap.tile(tile);
 	if (size) treemap.size(size);
@@ -92,7 +95,7 @@ export default function Treemap<Datum>({
 		{nodeComponent &&
 			data.descendants().map(
 				(node, i) =>
-					<Group key={`treemap-node-${i}`}>{createElement(nodeComponent, { node })}</Group>,
+					<Group key={`treemap-node-${i}`}><NodeComponent node={node} /></Group>,
 			)}
 	</Group>;
 }

package/src/marker/markers/Marker.tsrx

@@ -1,4 +1,4 @@
-import type { SVGProps } from 'react';
+import type { Octane } from 'octane/jsx-runtime';
 import type { OctaneNode } from 'octane';
 import useStableId from '../../kernel/ids/useStableId.tsrx';
 
@@ -23,7 +23,7 @@ export interface Props {
 	children: OctaneNode;
 }
 
-export type MarkerProps = Props & Omit<SVGProps<SVGMarkerElement>, keyof Props>;
+export type MarkerProps = Props & Omit<Octane.SVGProps<SVGMarkerElement>, keyof Props>;
 export type MarkerComponentProps = Omit<MarkerProps, 'children'>;
 
 export default function Marker({

package/src/marker/markers/Marker.tsrx.d.ts

@@ -1,5 +1,5 @@
 // Generated by scripts/generate-tsrx-types.mjs.
-import type { SVGProps } from 'react';
+import type { Octane } from 'octane/jsx-runtime';
 import type { OctaneNode } from 'octane';
 export interface Props {
     /** Unique id for the `<marker>`. Should be unique across all page elements. */
@@ -21,6 +21,6 @@ export interface Props {
     /** The <marker> contents. Typically one of: `<path>`, `<line>`, `<polyline>`, or `<polygon>` */
     children: OctaneNode;
 }
-export type MarkerProps = Props & Omit<SVGProps<SVGMarkerElement>, keyof Props>;
+export type MarkerProps = Props & Omit<Octane.SVGProps<SVGMarkerElement>, keyof Props>;
 export type MarkerComponentProps = Omit<MarkerProps, 'children'>;
 export default function Marker({ id, markerWidth, markerHeight, markerUnits, children, ...restProps }: MarkerProps): import("react").JSX.Element;

package/src/network/DefaultNode.tsrx

@@ -1,4 +1,4 @@
-import type { SVGProps } from 'react';
+import type { Octane } from 'octane/jsx-runtime';
 
 export type NodeProps = {
 	cx?: number;
@@ -11,6 +11,6 @@ export default function DefaultNode({
 	fill = '#21D4FD',
 	node, // Accept but don't use the node prop
 	...rest
-}: NodeProps & Omit<SVGProps<SVGCircleElement>, keyof NodeProps>) {
+}: NodeProps & Omit<Octane.SVGProps<SVGCircleElement>, keyof NodeProps>) {
 	return <circle r={r} fill={fill} {...rest} />;
 }

package/src/network/DefaultNode.tsrx.d.ts

@@ -1,9 +1,9 @@
 // Generated by scripts/generate-tsrx-types.mjs.
-import type { SVGProps } from 'react';
+import type { Octane } from 'octane/jsx-runtime';
 export type NodeProps = {
     cx?: number;
     cy?: number;
     node?: unknown;
 };
 export default function DefaultNode({ r, fill, node, // Accept but don't use the node prop
-...rest }: NodeProps & Omit<SVGProps<SVGCircleElement>, keyof NodeProps>): import("react").JSX.Element;
+...rest }: NodeProps & Omit<Octane.SVGProps<SVGCircleElement>, keyof NodeProps>): import("react").JSX.Element;

package/src/network/Links.tsrx

@@ -1,4 +1,3 @@
-import { createElement } from 'octane';
 import type { FunctionComponent, ComponentClass } from 'react';
 import cx from 'classnames';
 import { Group } from '@octanejs/visx/group';
@@ -15,13 +14,17 @@ export type LinkProps<Link> = {
 };
 
 export default function Links<Link>({ links = [], linkComponent, className }: LinkProps<Link>) {
+	// Octane renders a component VALUE through a capitalized JSX tag; the prop
+	// keeps upstream's React component union for type parity.
+	const LinkComponent = linkComponent;
+
 	return <>
 		{links.map(
 			(link, i) =>
 				<Group
 					key={`network-link-${i}`}
 					className={cx('visx-network-link', className)}
-				>{createElement(linkComponent, { link })}</Group>,
+				><LinkComponent link={link} /></Group>,
 		)}
 	</>;
 }

package/src/network/Nodes.tsrx

@@ -1,4 +1,3 @@
-import { createElement } from 'octane';
 import type { FunctionComponent, ComponentClass } from 'react';
 import cx from 'classnames';
 import { Group } from '@octanejs/visx/group';
@@ -27,6 +26,10 @@ export default function Nodes<Node>({
 	x = (d: any) => d?.x || 0, // eslint-disable-line @typescript-eslint/no-explicit-any
 	y = (d: any) => d?.y || 0, // eslint-disable-line @typescript-eslint/no-explicit-any
 }: NodeProps<Node>) {
+	// Octane renders a component VALUE through a capitalized JSX tag; the prop
+	// keeps upstream's React component union for type parity.
+	const NodeComponent = nodeComponent;
+
 	return <>
 		{nodes.map(
 			(node, i) =>
@@ -35,7 +38,7 @@ export default function Nodes<Node>({
 					className={cx('visx-network-node', className)}
 					left={x(node)}
 					top={y(node)}
-				>{createElement(nodeComponent, { node })}</Group>,
+				><NodeComponent node={node} /></Group>,
 		)}
 	</>;
 }

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

@@ -1,4 +1,4 @@
-import type { SVGProps } from 'react';
+import type { Octane } from 'octane/jsx-runtime';
 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';
@@ -8,7 +8,7 @@ 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'>;
+	} & Omit<Octane.SVGProps<SVGLineElement>, 'ref' | 'scale'> & Pick<TransitionConfig<Scale>, 'animationTrajectory' | 'animateXOrY'> & Pick<CommonGridProps, 'stroke' | 'strokeWidth' | 'lineStyle' | 'strokeDasharray'>;
 
 export default function AnimatedGridLines<Scale extends GridScale>({
 	scale,

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

@@ -1,10 +1,10 @@
 // Generated by scripts/generate-tsrx-types.mjs.
-import type { SVGProps } from 'react';
+import type { Octane } from 'octane/jsx-runtime';
 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'>;
+} & Omit<Octane.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/stats/BoxPlot.tsrx

@@ -1,4 +1,4 @@
-import type { SVGProps } from 'react';
+import type { Octane } from 'octane/jsx-runtime';
 import type { OctaneNode } from 'octane';
 import classnames from 'classnames';
 import { Group } from '@octanejs/visx/group';
@@ -44,19 +44,19 @@ export type BoxPlotProps = SharedProps & {
 		/** Array of outlier values to be rendered. */
 		outliers?: number[];
 		/** Props to pass to the median glyph line. */
-		medianProps?: SVGProps<SVGLineElement>;
+		medianProps?: Octane.SVGProps<SVGLineElement>;
 		/** Props to pass to the maximum glyph line. */
-		maxProps?: SVGProps<SVGLineElement>;
+		maxProps?: Octane.SVGProps<SVGLineElement>;
 		/** Props to pass to the minimum glyph line. */
-		minProps?: SVGProps<SVGLineElement>;
+		minProps?: Octane.SVGProps<SVGLineElement>;
 		/** Props to pass to the box glyph rect. */
-		boxProps?: SVGProps<SVGRectElement>;
+		boxProps?: Octane.SVGProps<SVGRectElement>;
 		/** Props to pass to the outlier glyph circles. */
-		outlierProps?: SVGProps<SVGCircleElement>;
+		outlierProps?: Octane.SVGProps<SVGCircleElement>;
 		/** Whether to render a container rect element (e.g., to capture mouse events). */
 		container?: boolean;
 		/** Props to pass to the container glyph rect if rendered. */
-		containerProps?: SVGProps<SVGRectElement>;
+		containerProps?: Octane.SVGProps<SVGRectElement>;
 		/** Override render function to fully control the rendering of the BoxPlot glyph. */
 		children?: (childRenderProps: ChildRenderProps) => OctaneNode;
 	};

package/src/stats/BoxPlot.tsrx.d.ts

@@ -1,5 +1,5 @@
 // Generated by scripts/generate-tsrx-types.mjs.
-import type { SVGProps } from 'react';
+import type { Octane } from 'octane/jsx-runtime';
 import type { OctaneNode } from 'octane';
 import type { PickD3Scale, ContinuousDomainScaleType } from '@octanejs/visx/scale';
 import type { SharedProps, ChildRenderProps } from './types';
@@ -33,19 +33,19 @@ export type BoxPlotProps = SharedProps & {
     /** Array of outlier values to be rendered. */
     outliers?: number[];
     /** Props to pass to the median glyph line. */
-    medianProps?: SVGProps<SVGLineElement>;
+    medianProps?: Octane.SVGProps<SVGLineElement>;
     /** Props to pass to the maximum glyph line. */
-    maxProps?: SVGProps<SVGLineElement>;
+    maxProps?: Octane.SVGProps<SVGLineElement>;
     /** Props to pass to the minimum glyph line. */
-    minProps?: SVGProps<SVGLineElement>;
+    minProps?: Octane.SVGProps<SVGLineElement>;
     /** Props to pass to the box glyph rect. */
-    boxProps?: SVGProps<SVGRectElement>;
+    boxProps?: Octane.SVGProps<SVGRectElement>;
     /** Props to pass to the outlier glyph circles. */
-    outlierProps?: SVGProps<SVGCircleElement>;
+    outlierProps?: Octane.SVGProps<SVGCircleElement>;
     /** Whether to render a container rect element (e.g., to capture mouse events). */
     container?: boolean;
     /** Props to pass to the container glyph rect if rendered. */
-    containerProps?: SVGProps<SVGRectElement>;
+    containerProps?: Octane.SVGProps<SVGRectElement>;
     /** Override render function to fully control the rendering of the BoxPlot glyph. */
     children?: (childRenderProps: ChildRenderProps) => OctaneNode;
 };