@octanejs/visx 0.1.4 → 0.1.5

package/src/hierarchy/hierarchies/Partition.tsrx

@@ -1,5 +1,6 @@
 import { createElement } from 'octane';
-import type { ReactNode, FunctionComponent, ComponentClass } from 'react';
+import type { FunctionComponent, ComponentClass } from 'react';
+import type { OctaneNode } from 'octane';
 import cx from 'classnames';
 import { Group } from '@octanejs/visx/group';
 import type { HierarchyNode, HierarchyRectangularNode } from 'd3-hierarchy';
@@ -12,7 +13,7 @@ export type PartitionProps<Datum> = {
 	/** The root hierarchy node from which to derive the treemap layout. */
 	root: HierarchyNode<Datum>;
 	/** Render override function which is passed the computed partition layout data. */
-	children?: (pack: HierarchyRectangularNode<Datum>) => ReactNode;
+	children?: (pack: HierarchyRectangularNode<Datum>) => OctaneNode;
 	/** top offset applied to the g element container. */
 	top?: number;
 	/** left offset applied to the g element container. */

package/src/hierarchy/hierarchies/Partition.tsrx.d.ts

@@ -1,5 +1,6 @@
 // Generated by scripts/generate-tsrx-types.mjs.
-import type { ReactNode, FunctionComponent, ComponentClass } from 'react';
+import type { FunctionComponent, ComponentClass } from 'react';
+import type { OctaneNode } from 'octane';
 import type { HierarchyNode, HierarchyRectangularNode } from 'd3-hierarchy';
 export type NodeComponentProps<Datum> = {
     node: HierarchyRectangularNode<Datum>;
@@ -8,7 +9,7 @@ export type PartitionProps<Datum> = {
     /** The root hierarchy node from which to derive the treemap layout. */
     root: HierarchyNode<Datum>;
     /** Render override function which is passed the computed partition layout data. */
-    children?: (pack: HierarchyRectangularNode<Datum>) => ReactNode;
+    children?: (pack: HierarchyRectangularNode<Datum>) => OctaneNode;
     /** top offset applied to the g element container. */
     top?: number;
     /** left offset applied to the g element container. */

package/src/hierarchy/hierarchies/Tree.tsrx

@@ -1,5 +1,6 @@
 import { createElement } from 'octane';
-import type { ReactNode, FunctionComponent, ComponentClass } from 'react';
+import type { FunctionComponent, ComponentClass } from 'react';
+import type { OctaneNode } from 'octane';
 import cx from 'classnames';
 import { Group } from '@octanejs/visx/group';
 import type { HierarchyNode, HierarchyPointNode, HierarchyPointLink } from 'd3-hierarchy';
@@ -14,7 +15,7 @@ export type TreeProps<Datum> = {
 	/** The root hierarchy node from which to derive the tree layout. */
 	root: HierarchyNode<Datum>;
 	/** Render override function which is passed the computed cluster layout data. */
-	children?: (pack: HierarchyPointNode<Datum>) => ReactNode;
+	children?: (pack: HierarchyPointNode<Datum>) => OctaneNode;
 	/** top offset applied to the g element container. */
 	top?: number;
 	/** left offset applied to the g element container. */

package/src/hierarchy/hierarchies/Tree.tsrx.d.ts

@@ -1,5 +1,6 @@
 // Generated by scripts/generate-tsrx-types.mjs.
-import type { ReactNode, FunctionComponent, ComponentClass } from 'react';
+import type { FunctionComponent, ComponentClass } from 'react';
+import type { OctaneNode } from 'octane';
 import type { HierarchyNode, HierarchyPointNode, HierarchyPointLink } from 'd3-hierarchy';
 export type NodeComponentProps<Datum> = {
     node: HierarchyPointNode<Datum>;
@@ -11,7 +12,7 @@ export type TreeProps<Datum> = {
     /** The root hierarchy node from which to derive the tree layout. */
     root: HierarchyNode<Datum>;
     /** Render override function which is passed the computed cluster layout data. */
-    children?: (pack: HierarchyPointNode<Datum>) => ReactNode;
+    children?: (pack: HierarchyPointNode<Datum>) => OctaneNode;
     /** top offset applied to the g element container. */
     top?: number;
     /** left offset applied to the g element container. */

package/src/hierarchy/hierarchies/Treemap.tsrx

@@ -1,5 +1,6 @@
 import { createElement } from 'octane';
-import type { ReactNode, FunctionComponent, ComponentClass } from 'react';
+import type { FunctionComponent, ComponentClass } from 'react';
+import type { OctaneNode } from 'octane';
 import cx from 'classnames';
 import { Group } from '@octanejs/visx/group';
 import type { HierarchyRectangularNode, HierarchyNode } from 'd3-hierarchy';
@@ -16,7 +17,7 @@ export type TreemapProps<Datum> = {
 	/** The root hierarchy node from which to derive the treemap layout. */
 	root: HierarchyNode<Datum>;
 	/** Render override function which is passed the computed pack layout data. */
-	children?: (pack: HierarchyRectangularNode<Datum>) => ReactNode;
+	children?: (pack: HierarchyRectangularNode<Datum>) => OctaneNode;
 	/** top offset applied to the g element container. */
 	top?: number;
 	/** left offset applied to the g element container. */

package/src/hierarchy/hierarchies/Treemap.tsrx.d.ts

@@ -1,5 +1,6 @@
 // Generated by scripts/generate-tsrx-types.mjs.
-import type { ReactNode, FunctionComponent, ComponentClass } from 'react';
+import type { FunctionComponent, ComponentClass } from 'react';
+import type { OctaneNode } from 'octane';
 import type { HierarchyRectangularNode, HierarchyNode } from 'd3-hierarchy';
 import type { TileMethod } from '../types';
 export type NodeComponentProps<Datum> = {
@@ -10,7 +11,7 @@ export type TreemapProps<Datum> = {
     /** The root hierarchy node from which to derive the treemap layout. */
     root: HierarchyNode<Datum>;
     /** Render override function which is passed the computed pack layout data. */
-    children?: (pack: HierarchyRectangularNode<Datum>) => ReactNode;
+    children?: (pack: HierarchyRectangularNode<Datum>) => OctaneNode;
     /** top offset applied to the g element container. */
     top?: number;
     /** left offset applied to the g element container. */

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

@@ -1,4 +1,5 @@
-import type { ReactNode, HTMLProps } from 'react';
+import type { HTMLProps } from 'react';
+import type { OctaneNode } from 'octane';
 import type { FlexDirection } from '../../types';
 
 export type LegendItemProps = {
@@ -9,7 +10,7 @@ export type LegendItemProps = {
 	/** Margin around the legend item. */
 	margin?: string | number;
 	/** Child elements to render inside the legend item (typically LegendShape and LegendLabel). */
-	children?: ReactNode;
+	children?: OctaneNode;
 	/** CSS display property for the legend item. */
 	display?: string;
 };

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

@@ -1,5 +1,6 @@
 // Generated by scripts/generate-tsrx-types.mjs.
-import type { ReactNode, HTMLProps } from 'react';
+import type { HTMLProps } from 'react';
+import type { OctaneNode } from 'octane';
 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. */
@@ -9,7 +10,7 @@ export type LegendItemProps = {
     /** Margin around the legend item. */
     margin?: string | number;
     /** Child elements to render inside the legend item (typically LegendShape and LegendLabel). */
-    children?: ReactNode;
+    children?: OctaneNode;
     /** CSS display property for the legend item. */
     display?: string;
 };

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

@@ -1,16 +1,17 @@
-import type { ReactNode, HTMLProps } from 'react';
+import type { HTMLProps } from 'react';
+import type { OctaneNode } from 'octane';
 
 export type LegendLabelOwnProps = {
 	/** Horizontal alignment of the label text. Maps to CSS justify-content property. */
 	align?: string;
 	/** The label content to display. Can be a string or any React node. */
-	label?: ReactNode;
+	label?: OctaneNode;
 	/** CSS flex property controlling how the label grows/shrinks in the legend item. */
 	flex?: string | number;
 	/** Margin around the label. */
 	margin?: string | number;
 	/** Child elements to render. If provided, overrides the label prop. */
-	children?: ReactNode;
+	children?: OctaneNode;
 };
 
 export type LegendLabelProps =

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

@@ -1,16 +1,17 @@
 // Generated by scripts/generate-tsrx-types.mjs.
-import type { ReactNode, HTMLProps } from 'react';
+import type { HTMLProps } from 'react';
+import type { OctaneNode } from 'octane';
 export type LegendLabelOwnProps = {
     /** Horizontal alignment of the label text. Maps to CSS justify-content property. */
     align?: string;
     /** The label content to display. Can be a string or any React node. */
-    label?: ReactNode;
+    label?: OctaneNode;
     /** CSS flex property controlling how the label grows/shrinks in the legend item. */
     flex?: string | number;
     /** Margin around the label. */
     margin?: string | number;
     /** Child elements to render. If provided, overrides the label prop. */
-    children?: ReactNode;
+    children?: OctaneNode;
 };
 export type LegendLabelProps = LegendLabelOwnProps & Omit<HTMLProps<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,4 +1,5 @@
-import type { ReactNode, CSSProperties } from 'react';
+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';
@@ -18,7 +19,7 @@ import type {
 
 export type LegendProps<Scale extends AnyD3Scale> = {
 	/** Optional render function override. */
-	children?: (labels: FormattedLabel<ScaleInput<Scale>, ReturnType<Scale>>[]) => ReactNode;
+	children?: (labels: FormattedLabel<ScaleInput<Scale>, ReturnType<Scale>>[]) => OctaneNode;
 	/** Classname to be applied to legend container. */
 	className?: string;
 	/** Styles to be applied to the legend container. */

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

@@ -1,11 +1,12 @@
 // Generated by scripts/generate-tsrx-types.mjs.
-import type { ReactNode, CSSProperties } from 'react';
+import type { CSSProperties } from 'react';
+import type { OctaneNode } from 'octane';
 import type { AnyD3Scale, ScaleInput } from '@octanejs/visx/scale';
 import type { LegendLabelProps } from './LegendLabel.tsrx';
 import type { FlexDirection, FormattedLabel, LabelFormatter, LabelFormatterFactory, LegendShape as LegendShapeType } from '../../types';
 export type LegendProps<Scale extends AnyD3Scale> = {
     /** Optional render function override. */
-    children?: (labels: FormattedLabel<ScaleInput<Scale>, ReturnType<Scale>>[]) => ReactNode;
+    children?: (labels: FormattedLabel<ScaleInput<Scale>, ReturnType<Scale>>[]) => OctaneNode;
     /** Classname to be applied to legend container. */
     className?: string;
     /** Styles to be applied to the legend container. */

package/src/marker/markers/Marker.tsrx

@@ -1,4 +1,5 @@
-import type { ReactNode, SVGProps } from 'react';
+import type { SVGProps } from 'react';
+import type { OctaneNode } from 'octane';
 import useStableId from '../../kernel/ids/useStableId.tsrx';
 
 export interface Props {
@@ -19,7 +20,7 @@ export interface Props {
 	/** The stroke width. constrained to a `number` type due to use in bounding box calculations */
 	strokeWidth?: number;
 	/** The <marker> contents. Typically one of: `<path>`, `<line>`, `<polyline>`, or `<polygon>` */
-	children: ReactNode;
+	children: OctaneNode;
 }
 
 export type MarkerProps = Props & Omit<SVGProps<SVGMarkerElement>, keyof Props>;

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

@@ -1,5 +1,6 @@
 // Generated by scripts/generate-tsrx-types.mjs.
-import type { ReactNode, SVGProps } from 'react';
+import type { SVGProps } from 'react';
+import type { OctaneNode } from 'octane';
 export interface Props {
     /** Unique id for the `<marker>`. Should be unique across all page elements. */
     id?: string;
@@ -18,7 +19,7 @@ export interface Props {
     /** The stroke width. constrained to a `number` type due to use in bounding box calculations */
     strokeWidth?: number;
     /** The <marker> contents. Typically one of: `<path>`, `<line>`, `<polyline>`, or `<polygon>` */
-    children: ReactNode;
+    children: OctaneNode;
 }
 export type MarkerProps = Props & Omit<SVGProps<SVGMarkerElement>, keyof Props>;
 export type MarkerComponentProps = Omit<MarkerProps, 'children'>;

package/src/pattern/patterns/Pattern.tsrx

@@ -1,4 +1,4 @@
-import type { ReactNode } from 'react';
+import type { OctaneNode } from 'octane';
 import useStableId from '../../kernel/ids/useStableId.tsrx';
 
 export type PatternProps = {
@@ -9,7 +9,7 @@ export type PatternProps = {
 	/** Height of the pattern. */
 	height: number;
 	/** Children of pattern element to render. */
-	children: ReactNode;
+	children: OctaneNode;
 };
 
 export default function Pattern({ id, width, height, children }: PatternProps) {

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

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

package/src/responsive/components/ParentSize.tsrx

@@ -1,4 +1,6 @@
-import type { CSSProperties, ReactNode, HTMLAttributes } from 'react';
+import type { CSSProperties } from 'react';
+import type { Octane } from 'octane/jsx-runtime';
+import type { OctaneNode } from 'octane';
 import type { ParentSizeState, UseParentSizeConfig } from '../hooks/useParentSize.tsrx';
 import useParentSize from '../hooks/useParentSize.tsrx';
 
@@ -17,8 +19,8 @@ export type ParentSizeProps = {
  * (`width: 100%; height: 100%; position: relative`); your values take precedence.
  * */
 		parentSizeStyles?: CSSProperties;
-		/** Child render function `({ width, height, top, left, ref, resize }) => ReactNode`. */
-		children: (args: ParentSizeProvidedProps) => ReactNode;
+		/** Child render function `({ width, height, top, left, ref, resize }) => OctaneNode`. */
+		children: (args: ParentSizeProvidedProps) => OctaneNode;
 	} & UseParentSizeConfig;
 
 const defaultOuterStyles: CSSProperties = { width: '100%', height: '100%', position: 'relative' };
@@ -43,7 +45,11 @@ export default function ParentSize({
 	resizeObserverPolyfill,
 	style,
 	...restProps
-}: ParentSizeProps & Omit<HTMLAttributes<HTMLDivElement>, keyof ParentSizeProps>) {
+}: ParentSizeProps &
+	Omit<Octane.HTMLAttributes<HTMLDivElement>, keyof ParentSizeProps | 'style'> & {
+		/** Octane's `style` also accepts a plain string; ParentSize merges styles, so keep the object form. */
+		style?: CSSProperties;
+	}) {
 	const { parentRef, node, resize, ...dimensions } = useParentSize({
 		initialSize,
 		debounceTime,

package/src/responsive/components/ParentSize.tsrx.d.ts

@@ -1,5 +1,7 @@
 // Generated by scripts/generate-tsrx-types.mjs.
-import type { CSSProperties, ReactNode, HTMLAttributes } from 'react';
+import type { CSSProperties } from 'react';
+import type { Octane } from 'octane/jsx-runtime';
+import type { OctaneNode } from 'octane';
 import type { ParentSizeState, UseParentSizeConfig } from '../hooks/useParentSize.tsrx';
 export type ParentSizeProvidedProps = ParentSizeState & {
     ref: HTMLDivElement | null;
@@ -15,7 +17,10 @@ export type ParentSizeProps = {
 * (`width: 100%; height: 100%; position: relative`); your values take precedence.
 * */
     parentSizeStyles?: CSSProperties;
-    /** Child render function `({ width, height, top, left, ref, resize }) => ReactNode`. */
-    children: (args: ParentSizeProvidedProps) => ReactNode;
+    /** Child render function `({ width, height, top, left, ref, resize }) => OctaneNode`. */
+    children: (args: ParentSizeProvidedProps) => OctaneNode;
 } & UseParentSizeConfig;
-export default function ParentSize({ className, children, debounceTime, ignoreDimensions, initialSize, parentSizeStyles, enableDebounceLeadingCall, resizeObserverPolyfill, style, ...restProps }: ParentSizeProps & Omit<HTMLAttributes<HTMLDivElement>, keyof ParentSizeProps>): import("react").JSX.Element;
+export default function ParentSize({ className, children, debounceTime, ignoreDimensions, initialSize, parentSizeStyles, enableDebounceLeadingCall, resizeObserverPolyfill, style, ...restProps }: ParentSizeProps & Omit<Octane.HTMLAttributes<HTMLDivElement>, keyof ParentSizeProps | 'style'> & {
+    /** Octane's `style` also accepts a plain string; ParentSize merges styles, so keep the object form. */
+    style?: CSSProperties;
+}): import("react").JSX.Element;

package/src/responsive/components/ScaleSVG.tsrx

@@ -1,8 +1,9 @@
-import type { ReactNode, Ref } from 'react';
+import type { Ref } from 'react';
+import type { OctaneNode } from 'octane';
 
 export type ScaleSVGProps = {
 	/** Child SVG to scale, rendered as the child of the parent wrappers provided by this component `<div><svg>{children}</svg></div>`. */
-	children?: ReactNode;
+	children?: OctaneNode;
 	/** Width of the desired SVG. */
 	width?: number | string;
 	/** Height of the desired SVG. */

package/src/responsive/components/ScaleSVG.tsrx.d.ts

@@ -1,8 +1,9 @@
 // Generated by scripts/generate-tsrx-types.mjs.
-import type { ReactNode, Ref } from 'react';
+import type { Ref } from 'react';
+import type { OctaneNode } from 'octane';
 export type ScaleSVGProps = {
     /** Child SVG to scale, rendered as the child of the parent wrappers provided by this component `<div><svg>{children}</svg></div>`. */
-    children?: ReactNode;
+    children?: OctaneNode;
     /** Width of the desired SVG. */
     width?: number | string;
     /** Height of the desired SVG. */

package/src/sankey/Sankey.tsrx

@@ -1,4 +1,5 @@
-import type { ReactNode, SVGAttributes } from 'react';
+import type { SVGAttributes } from 'react';
+import type { OctaneNode } from 'octane';
 import cx from 'classnames';
 import { Group } from '@octanejs/visx/group';
 import type { SankeyExtraProperties, SankeyGraph, SankeyLink, SankeyNode } from 'd3-sankey';
@@ -42,7 +43,7 @@ type SankeyChildrenFunction<NodeDatum extends SankeyExtraProperties, LinkDatum e
 	(args: {
 		graph: SankeyGraph<NodeDatum, LinkDatum>;
 		createPath: CreatePath<NodeDatum, LinkDatum>;
-	}) => ReactNode;
+	}) => OctaneNode;
 
 export type SankeyProps<NodeDatum extends SankeyExtraProperties, LinkDatum extends SankeyExtraProperties> = {
 	/** The root data from which to derive the sankey layout. */

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

@@ -1,5 +1,6 @@
 // Generated by scripts/generate-tsrx-types.mjs.
-import type { ReactNode, SVGAttributes } from 'react';
+import type { SVGAttributes } from 'react';
+import type { OctaneNode } from 'octane';
 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'>;
@@ -12,7 +13,7 @@ type NodeAlignment<NodeDatum extends SankeyExtraProperties, LinkDatum extends Sa
 type SankeyChildrenFunction<NodeDatum extends SankeyExtraProperties, LinkDatum extends SankeyExtraProperties> = (args: {
     graph: SankeyGraph<NodeDatum, LinkDatum>;
     createPath: CreatePath<NodeDatum, LinkDatum>;
-}) => ReactNode;
+}) => OctaneNode;
 export type SankeyProps<NodeDatum extends SankeyExtraProperties, LinkDatum extends SankeyExtraProperties> = {
     /** The root data from which to derive the sankey layout. */
     root: SankeyGraph<NodeDatum, LinkDatum>;

package/src/shape/shapes/Arc.tsrx

@@ -1,4 +1,5 @@
-import type { ReactNode, Ref } from 'react';
+import type { Ref } from 'react';
+import type { OctaneNode } from 'octane';
 import cx from 'classnames';
 import type { Arc as ArcType } from 'd3-shape';
 import type { $TSFIXME, AddSVGProps, ArcPathConfig } from '../types';
@@ -10,7 +11,7 @@ export type ArcProps<Datum> = {
 		/** A Datum for which to generate an arc. */
 		data?: Datum;
 		/** Override render function which is passed the configured arc generator as input. */
-		children?: (args: { path: ArcType<$TSFIXME, Datum> }) => ReactNode;
+		children?: (args: { path: ArcType<$TSFIXME, Datum> }) => OctaneNode;
 		/** React ref to the path element. */
 		innerRef?: Ref<SVGPathElement>;
 	} & ArcPathConfig<Datum>;

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

@@ -1,5 +1,6 @@
 // Generated by scripts/generate-tsrx-types.mjs.
-import type { ReactNode, Ref } from 'react';
+import type { Ref } from 'react';
+import type { OctaneNode } from 'octane';
 import type { Arc as ArcType } from 'd3-shape';
 import type { $TSFIXME, AddSVGProps, ArcPathConfig } from '../types';
 export type ArcProps<Datum> = {
@@ -10,7 +11,7 @@ export type ArcProps<Datum> = {
     /** Override render function which is passed the configured arc generator as input. */
     children?: (args: {
         path: ArcType<$TSFIXME, Datum>;
-    }) => ReactNode;
+    }) => OctaneNode;
     /** React ref to the path element. */
     innerRef?: Ref<SVGPathElement>;
 } & ArcPathConfig<Datum>;

package/src/shape/shapes/BarGroup.tsrx

@@ -1,4 +1,4 @@
-import type { ReactNode } from 'react';
+import type { OctaneNode } from 'octane';
 import cx from 'classnames';
 import { Group } from '@octanejs/visx/group';
 import type { ScaleInput } from '@octanejs/visx/scale';
@@ -28,7 +28,7 @@ export type BarGroupProps<Datum extends DatumObject, Key extends GroupKey = Grou
 		/** Total height of the y-axis. */
 		height: number;
 		/** Override render function which is passed the computed BarGroups. */
-		children?: (barGroups: BarGroupType<Key>[]) => ReactNode;
+		children?: (barGroups: BarGroupType<Key>[]) => OctaneNode;
 	};
 
 /**

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

@@ -1,5 +1,5 @@
 // Generated by scripts/generate-tsrx-types.mjs.
-import type { ReactNode } from 'react';
+import type { OctaneNode } from 'octane';
 import type { ScaleInput } from '@octanejs/visx/scale';
 import type { PositionScale, DatumObject, AnyScaleBand, AddSVGProps, BaseBarGroupProps, BarGroup as BarGroupType, GroupKey, Accessor } from '../types';
 export type BarGroupProps<Datum extends DatumObject, Key extends GroupKey = GroupKey, X0Scale extends AnyScaleBand = AnyScaleBand, X1Scale extends AnyScaleBand = AnyScaleBand> = BaseBarGroupProps<Datum, Key> & {
@@ -14,7 +14,7 @@ export type BarGroupProps<Datum extends DatumObject, Key extends GroupKey = Grou
     /** Total height of the y-axis. */
     height: number;
     /** Override render function which is passed the computed BarGroups. */
-    children?: (barGroups: BarGroupType<Key>[]) => ReactNode;
+    children?: (barGroups: BarGroupType<Key>[]) => OctaneNode;
 };
 /**
  * Generates bar groups as an array of objects and renders `<rect />`s for each datum grouped by `key`. A general setup might look like this:

package/src/shape/shapes/BarGroupHorizontal.tsrx

@@ -1,4 +1,4 @@
-import type { ReactNode } from 'react';
+import type { OctaneNode } from 'octane';
 import cx from 'classnames';
 import { Group } from '@octanejs/visx/group';
 import type { ScaleInput } from '@octanejs/visx/scale';
@@ -30,7 +30,7 @@ export type BarGroupHorizontalProps<Datum extends DatumObject, Key extends Group
 		/** Total width of the x-axis. */
 		width: number;
 		/** Override render function which is passed the computed Ba/rGroups. */
-		children?: (barGroups: BarGroupHorizontalType<Key>[]) => ReactNode;
+		children?: (barGroups: BarGroupHorizontalType<Key>[]) => OctaneNode;
 	};
 
 export default function BarGroupHorizontal<Datum extends DatumObject, Key extends GroupKey = GroupKey, Y0Scale extends AnyScaleBand = AnyScaleBand, Y1Scale extends AnyScaleBand = AnyScaleBand>({

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

@@ -1,5 +1,5 @@
 // Generated by scripts/generate-tsrx-types.mjs.
-import type { ReactNode } from 'react';
+import type { OctaneNode } from 'octane';
 import type { ScaleInput } from '@octanejs/visx/scale';
 import type { PositionScale, AnyScaleBand, DatumObject, AddSVGProps, BarGroupHorizontal as BarGroupHorizontalType, BaseBarGroupProps, GroupKey, Accessor } from '../types';
 export type BarGroupHorizontalProps<Datum extends DatumObject, Key extends GroupKey = GroupKey, Y0Scale extends AnyScaleBand = AnyScaleBand, Y1Scale extends AnyScaleBand = AnyScaleBand> = BaseBarGroupProps<Datum, Key> & {
@@ -16,6 +16,6 @@ export type BarGroupHorizontalProps<Datum extends DatumObject, Key extends Group
     /** Total width of the x-axis. */
     width: number;
     /** Override render function which is passed the computed Ba/rGroups. */
-    children?: (barGroups: BarGroupHorizontalType<Key>[]) => ReactNode;
+    children?: (barGroups: BarGroupHorizontalType<Key>[]) => OctaneNode;
 };
 export default function BarGroupHorizontal<Datum extends DatumObject, Key extends GroupKey = GroupKey, Y0Scale extends AnyScaleBand = AnyScaleBand, Y1Scale extends AnyScaleBand = AnyScaleBand>({ data, className, top, left, x, y0, y0Scale, y1Scale, xScale, color, keys, width, children, ...restProps }: AddSVGProps<BarGroupHorizontalProps<Datum, Key, Y0Scale, Y1Scale>, SVGRectElement>): import("react").JSX.Element;

package/src/shape/shapes/BarRounded.tsrx

@@ -1,4 +1,5 @@
-import type { ReactNode, Ref } from 'react';
+import type { Ref } from 'react';
+import type { OctaneNode } from 'octane';
 import cx from 'classnames';
 import type { AddSVGProps } from '../types';
 
@@ -40,7 +41,7 @@ export type BarRoundedProps = {
 		path,
 	}: {
 		path: string;
-	}) => ReactNode;
+	}) => OctaneNode;
 };
 
 /** Hook that returns a BarRounded path. */

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

@@ -1,5 +1,6 @@
 // Generated by scripts/generate-tsrx-types.mjs.
-import type { ReactNode, Ref } from 'react';
+import type { Ref } from 'react';
+import type { OctaneNode } from 'octane';
 import type { AddSVGProps } from '../types';
 export type BarRoundedProps = {
     /** className to apply to path element. */
@@ -37,7 +38,7 @@ export type BarRoundedProps = {
     /** Optional children override. */
     children?: ({ path, }: {
         path: string;
-    }) => ReactNode;
+    }) => OctaneNode;
 };
 /** Hook that returns a BarRounded path. */
 export declare function useBarRoundedPath({ all, bottom, bottomLeft, bottomRight, height, left, radius, right, top, topLeft, topRight, width, x, y, }: Pick<BarRoundedProps, 'all' | 'top' | 'bottom' | 'left' | 'right' | 'x' | 'y' | 'width' | 'height' | 'radius' | 'topLeft' | 'topRight' | 'bottomRight' | 'bottomLeft'>): string;

package/src/shape/shapes/LinePath.tsrx

@@ -1,4 +1,5 @@
-import type { Ref, ReactNode } from 'react';
+import type { Ref } from 'react';
+import type { OctaneNode } from 'octane';
 import cx from 'classnames';
 import type { Line as LineType } from 'd3-shape';
 import type { AddSVGProps, LinePathConfig } from '../types';
@@ -10,7 +11,7 @@ export type LinePathProps<Datum> = {
 		/** React RefObject passed to the path element. */
 		innerRef?: Ref<SVGPathElement>;
 		/** Override render function which is passed the configured path generator as input. */
-		children?: (args: { path: LineType<Datum> }) => ReactNode;
+		children?: (args: { path: LineType<Datum> }) => OctaneNode;
 		/** Fill color of the path element. */
 		fill?: string;
 		/** className applied to path element. */

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

@@ -1,5 +1,6 @@
 // Generated by scripts/generate-tsrx-types.mjs.
-import type { Ref, ReactNode } from 'react';
+import type { Ref } from 'react';
+import type { OctaneNode } from 'octane';
 import type { Line as LineType } from 'd3-shape';
 import type { AddSVGProps, LinePathConfig } from '../types';
 export type LinePathProps<Datum> = {
@@ -10,7 +11,7 @@ export type LinePathProps<Datum> = {
     /** Override render function which is passed the configured path generator as input. */
     children?: (args: {
         path: LineType<Datum>;
-    }) => ReactNode;
+    }) => OctaneNode;
     /** Fill color of the path element. */
     fill?: string;
     /** className applied to path element. */

package/src/shape/shapes/LineRadial.tsrx

@@ -1,4 +1,4 @@
-import type { ReactNode } from 'react';
+import type { OctaneNode } from 'octane';
 import cx from 'classnames';
 import type { RadialLine } from 'd3-shape';
 import type { LinePathProps } from './LinePath.tsrx';
@@ -8,7 +8,7 @@ import { radialLine } from '../util/D3ShapeFactories';
 export type LineRadialProps<Datum> =
 	Pick<LinePathProps<Datum>, 'className' | 'data' | 'fill' | 'innerRef'> & {
 		/** Override render function which is passed the configured path generator as input. */
-		children?: (args: { path: RadialLine<Datum> }) => ReactNode;
+		children?: (args: { path: RadialLine<Datum> }) => OctaneNode;
 	} & RadialLinePathConfig<Datum>;
 
 export default function LineRadial<Datum>({

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

@@ -1,5 +1,5 @@
 // Generated by scripts/generate-tsrx-types.mjs.
-import type { ReactNode } from 'react';
+import type { OctaneNode } from 'octane';
 import type { RadialLine } from 'd3-shape';
 import type { LinePathProps } from './LinePath.tsrx';
 import type { AddSVGProps, RadialLinePathConfig } from '../types';
@@ -7,6 +7,6 @@ export type LineRadialProps<Datum> = Pick<LinePathProps<Datum>, 'className' | 'd
     /** Override render function which is passed the configured path generator as input. */
     children?: (args: {
         path: RadialLine<Datum>;
-    }) => ReactNode;
+    }) => OctaneNode;
 } & RadialLinePathConfig<Datum>;
 export default function LineRadial<Datum>({ className, angle, radius, defined, curve, data, innerRef, children, fill, ...restProps }: AddSVGProps<LineRadialProps<Datum>, SVGPathElement>): import("react").JSX.Element;

package/src/shape/shapes/Pie.tsrx

@@ -1,4 +1,4 @@
-import type { ReactNode } from 'react';
+import type { OctaneNode } from 'octane';
 import cx from 'classnames';
 import { Group } from '@octanejs/visx/group';
 import type { AddSVGProps, ArcPathConfig, PiePathConfig } from '../types';
@@ -21,7 +21,7 @@ export type PieProps<Datum> = {
 		/** Array of data to generate a Pie for. */
 		data?: Datum[];
 		/** Optional render function invoked for each Datum to render something (e.g., a Label) at each pie centroid. */
-		centroid?: (xyCoords: [number, number], arc: PieArcDatum<Datum>) => ReactNode;
+		centroid?: (xyCoords: [number, number], arc: PieArcDatum<Datum>) => OctaneNode;
 		// These three fields are renamed
 		/** Invoked for each datum, returns the value for a given Pie segment/arc datum. */
 		pieValue?: PiePathConfig<Datum>['value'];
@@ -30,7 +30,7 @@ export type PieProps<Datum> = {
 		/** Comparator function to sort arc *values*, overrides pieSort if defined. If pieSort and pieSortValues are null, arcs match input data order. */
 		pieSortValues?: PiePathConfig<Datum>['sortValues'];
 		/** Render function override which is passed the configured arc generator as input. */
-		children?: (provided: ProvidedProps<Datum>) => ReactNode;
+		children?: (provided: ProvidedProps<Datum>) => OctaneNode;
 		/** Optional accessor function to return the fill string value of a given arc. */
 		fill?: string | StringAccessor<Datum>;
 	} & Pick<PiePathConfig<Datum>, 'startAngle' | 'endAngle' | 'padAngle'> & Pick<ArcPathConfig<PieArcDatum<Datum>>, 'innerRadius' | 'outerRadius' | 'cornerRadius' | 'padRadius'>;