@octanejs/visx 0.1.0

package/src/grid/grids/GridPolar.tsrx

@@ -0,0 +1,189 @@
+import type { CSSProperties, SVGProps } from 'react';
+import cx from 'classnames';
+import { Group } from '@octanejs/visx/group';
+import type { ScaleInput } from '@octanejs/visx/scale';
+import type { LineProps } from '@octanejs/visx/shape';
+import GridAngle from './GridAngle.tsrx';
+import GridRadial from './GridRadial.tsrx';
+
+import type { CommonGridProps, GridScale } from '../types';
+
+export type GridPolarProps<AngleScale extends GridScale, RadialScale extends GridScale> =
+	CommonGridProps & {
+		/**
+ * If specified, the arc of each radial grid line will have this thickness, useful for fills.
+ */
+		/**
+ * If specified, the arc of each radial grid line will have this thickness, useful for fills.
+ */
+		/**
+ * If specified, the arc of each radial grid line will have this thickness, useful for fills.
+ */
+		/**
+ * If specified, the arc of each radial grid line will have this thickness, useful for fills.
+ */
+		arcThickness?: number;
+		/**
+ * The class name applied to the angle grid group.
+ */
+		classNameAngle?: string;
+		/**
+ * The class name applied to the radial grid group.
+ */
+		classNameRadial?: string;
+		/**
+ * The end angle of the arc of radial grid lines in radians.
+ */
+		endAngle?: number;
+		/**
+ * The color applied to the fill of the radial lines.
+ */
+		fillRadial?: string;
+		/**
+ * Radius which determines the start position of angle lines.
+ */
+		innerRadius?: number;
+		/**
+ * Classname applied to all angle line paths.
+ */
+		lineClassNameAngle?: string;
+		/**
+ * Classname applied to all radial line paths.
+ */
+		lineClassNameRadial?: string;
+		/**
+ * Style object set as the angle line path style attribute.
+ */
+		lineStyleAngle?: CSSProperties & LineProps & Omit<SVGProps<SVGLineElement>, keyof LineProps>;
+		/**
+ * Style object set as the radius line path style attribute.
+ */
+		lineStyleRadial?: CSSProperties & LineProps & Omit<SVGProps<SVGLineElement>, keyof LineProps>;
+		/**
+ * The number of angle ticks wanted for the grid. Note this is approximate due to d3's algorithm,
+ * you can use tickValues for greater control
+ */
+		numTicksAngle?: number;
+		/**
+ * The number of radial ticks wanted for the grid. Note this is approximate due to d3's algorithm,
+ * you can use tickValues for greater control
+ */
+		numTicksRadial?: number;
+		/**
+ * Radius which determines the end position of angle lines.
+ */
+		outerRadius: number;
+		/**
+ * A [d3](https://github.com/d3/d3-scale) or [visx](https://github.com/airbnb/visx/tree/master/packages/visx-scale)
+ * scale function used to generate the angle of angle lines.
+ */
+		scaleAngle: AngleScale;
+		/**
+ * A [d3](https://github.com/d3/d3-scale) or [visx](https://github.com/airbnb/visx/tree/master/packages/visx-scale)
+ * scale function used to generate the radius of radial lines.
+ */
+		scaleRadial: RadialScale;
+		/**
+ * The start angle of the arc of radial grid lines in radians.
+ */
+		startAngle?: number;
+		/**
+ * The color applied to the stroke of the angle lines.
+ */
+		strokeAngle?: string;
+		/**
+ * The color applied to the stroke of the radial lines.
+ */
+		strokeRadial?: string;
+		/**
+ * The pattern of dashes for angle line stroke.
+ */
+		strokeDasharrayAngle?: string;
+		/**
+ * The pattern of dashes for angle radial stroke.
+ */
+		strokeDasharrayRadial?: string;
+		/**
+ * The pixel value for the width of the angle lines.
+ */
+		strokeWidthAngle?: string | number;
+		/**
+ * The pixel value for the width of the radial lines.
+ */
+		strokeWidthRadial?: string | number;
+		/**
+ * An array of values that determine the number and values of the angle ticks. Falls
+ * back to `scale.ticks()` or `.domain()`.
+ */
+		tickValuesAngle?: ScaleInput<AngleScale>[];
+		/**
+ * An array of values that determine the number and values of the radial ticks. Falls
+ * back to `scale.ticks()` or `.domain()`.
+ */
+		tickValuesRadial?: ScaleInput<RadialScale>[];
+		/**
+ * A top pixel offset applied to the entire grid group.
+ */
+		top?: number;
+	};
+
+export default function GridPolar<Scale extends GridScale>({
+	arcThickness,
+	className,
+	classNameAngle,
+	classNameRadial,
+	endAngle,
+	fillRadial,
+	innerRadius,
+	left,
+	lineClassNameAngle,
+	lineClassNameRadial,
+	lineStyleAngle,
+	lineStyleRadial,
+	numTicksAngle,
+	numTicksRadial,
+	outerRadius,
+	scaleAngle,
+	scaleRadial,
+	startAngle,
+	strokeAngle,
+	strokeRadial,
+	strokeWidthAngle,
+	strokeWidthRadial,
+	strokeDasharrayAngle,
+	strokeDasharrayRadial,
+	tickValuesAngle,
+	tickValuesRadial,
+	top,
+}: GridPolarProps<Scale, Scale>) {
+	return <Group className={cx('visx-grid-polar', className)} top={top} left={left}>
+		<GridAngle
+			className={classNameAngle}
+			innerRadius={innerRadius}
+			lineClassName={lineClassNameAngle}
+			lineStyle={lineStyleAngle}
+			numTicks={numTicksAngle}
+			outerRadius={outerRadius}
+			scale={scaleAngle}
+			stroke={strokeAngle}
+			strokeWidth={strokeWidthAngle}
+			strokeDasharray={strokeDasharrayAngle}
+			tickValues={tickValuesAngle}
+		/>
+		<GridRadial
+			arcThickness={arcThickness}
+			className={classNameRadial}
+			endAngle={endAngle}
+			fill={fillRadial}
+			lineClassName={lineClassNameRadial}
+			lineStyle={lineStyleRadial}
+			numTicks={numTicksRadial}
+			scale={scaleRadial}
+			startAngle={startAngle}
+			stroke={strokeRadial}
+			strokeWidth={strokeWidthRadial}
+			strokeDasharray={strokeDasharrayRadial}
+			tickValues={tickValuesRadial}
+		/>
+	</Group>;
+}

package/src/grid/grids/GridPolar.tsrx.d.ts

@@ -0,0 +1,123 @@
+// Generated by scripts/generate-tsrx-types.mjs.
+import type { CSSProperties, SVGProps } from 'react';
+import type { ScaleInput } from '@octanejs/visx/scale';
+import type { LineProps } from '@octanejs/visx/shape';
+import type { CommonGridProps, GridScale } from '../types';
+export type GridPolarProps<AngleScale extends GridScale, RadialScale extends GridScale> = CommonGridProps & {
+    /**
+* If specified, the arc of each radial grid line will have this thickness, useful for fills.
+*/
+    /**
+* If specified, the arc of each radial grid line will have this thickness, useful for fills.
+*/
+    /**
+* If specified, the arc of each radial grid line will have this thickness, useful for fills.
+*/
+    /**
+* If specified, the arc of each radial grid line will have this thickness, useful for fills.
+*/
+    arcThickness?: number;
+    /**
+* The class name applied to the angle grid group.
+*/
+    classNameAngle?: string;
+    /**
+* The class name applied to the radial grid group.
+*/
+    classNameRadial?: string;
+    /**
+* The end angle of the arc of radial grid lines in radians.
+*/
+    endAngle?: number;
+    /**
+* The color applied to the fill of the radial lines.
+*/
+    fillRadial?: string;
+    /**
+* Radius which determines the start position of angle lines.
+*/
+    innerRadius?: number;
+    /**
+* Classname applied to all angle line paths.
+*/
+    lineClassNameAngle?: string;
+    /**
+* Classname applied to all radial line paths.
+*/
+    lineClassNameRadial?: string;
+    /**
+* Style object set as the angle line path style attribute.
+*/
+    lineStyleAngle?: CSSProperties & LineProps & Omit<SVGProps<SVGLineElement>, keyof LineProps>;
+    /**
+* Style object set as the radius line path style attribute.
+*/
+    lineStyleRadial?: CSSProperties & LineProps & Omit<SVGProps<SVGLineElement>, keyof LineProps>;
+    /**
+* The number of angle ticks wanted for the grid. Note this is approximate due to d3's algorithm,
+* you can use tickValues for greater control
+*/
+    numTicksAngle?: number;
+    /**
+* The number of radial ticks wanted for the grid. Note this is approximate due to d3's algorithm,
+* you can use tickValues for greater control
+*/
+    numTicksRadial?: number;
+    /**
+* Radius which determines the end position of angle lines.
+*/
+    outerRadius: number;
+    /**
+* A [d3](https://github.com/d3/d3-scale) or [visx](https://github.com/airbnb/visx/tree/master/packages/visx-scale)
+* scale function used to generate the angle of angle lines.
+*/
+    scaleAngle: AngleScale;
+    /**
+* A [d3](https://github.com/d3/d3-scale) or [visx](https://github.com/airbnb/visx/tree/master/packages/visx-scale)
+* scale function used to generate the radius of radial lines.
+*/
+    scaleRadial: RadialScale;
+    /**
+* The start angle of the arc of radial grid lines in radians.
+*/
+    startAngle?: number;
+    /**
+* The color applied to the stroke of the angle lines.
+*/
+    strokeAngle?: string;
+    /**
+* The color applied to the stroke of the radial lines.
+*/
+    strokeRadial?: string;
+    /**
+* The pattern of dashes for angle line stroke.
+*/
+    strokeDasharrayAngle?: string;
+    /**
+* The pattern of dashes for angle radial stroke.
+*/
+    strokeDasharrayRadial?: string;
+    /**
+* The pixel value for the width of the angle lines.
+*/
+    strokeWidthAngle?: string | number;
+    /**
+* The pixel value for the width of the radial lines.
+*/
+    strokeWidthRadial?: string | number;
+    /**
+* An array of values that determine the number and values of the angle ticks. Falls
+* back to `scale.ticks()` or `.domain()`.
+*/
+    tickValuesAngle?: ScaleInput<AngleScale>[];
+    /**
+* An array of values that determine the number and values of the radial ticks. Falls
+* back to `scale.ticks()` or `.domain()`.
+*/
+    tickValuesRadial?: ScaleInput<RadialScale>[];
+    /**
+* A top pixel offset applied to the entire grid group.
+*/
+    top?: number;
+};
+export default function GridPolar<Scale extends GridScale>({ arcThickness, className, classNameAngle, classNameRadial, endAngle, fillRadial, innerRadius, left, lineClassNameAngle, lineClassNameRadial, lineStyleAngle, lineStyleRadial, numTicksAngle, numTicksRadial, outerRadius, scaleAngle, scaleRadial, startAngle, strokeAngle, strokeRadial, strokeWidthAngle, strokeWidthRadial, strokeDasharrayAngle, strokeDasharrayRadial, tickValuesAngle, tickValuesRadial, top, }: GridPolarProps<Scale, Scale>): import("react").JSX.Element;

package/src/grid/grids/GridRadial.tsrx

@@ -0,0 +1,92 @@
+import type { ReactNode, SVGProps } from 'react';
+import cx from 'classnames';
+import { Arc } from '@octanejs/visx/shape';
+import type { ArcProps } from '@octanejs/visx/shape';
+import { Group } from '@octanejs/visx/group';
+import type { ScaleInput } from '@octanejs/visx/scale';
+import { getTicks } from '@octanejs/visx/scale';
+
+import type { CommonGridProps, GridScale } from '../types';
+
+export type GridRadialProps<Scale extends GridScale> = CommonGridProps & {
+		/** `@octanejs/visx/scale` or `d3-scale` object used to convert value to position. */
+		scale: Scale;
+		/**
+ * Exact values used to generate grid lines using `scale`.
+ * Overrides `numTicks` if specified.
+ */
+		tickValues?: ScaleInput<Scale>[];
+		/**
+ * If specified, the arc of each radial grid line will have this thickness, useful for fills.
+ */
+		arcThickness?: number;
+		/**
+ * The end angle of the arc of radial grid lines in radians.
+ */
+		endAngle?: number;
+		/**
+ * The class name applied to all radial lines.
+ */
+		lineClassName?: string;
+		/**
+ * The color applied to the fill of the radial lines.
+ */
+		fill?: string;
+		/**
+ * The fill opacity applied to the fill of the radial lines.
+ */
+		fillOpacity?: number;
+		/**
+ * The start angle of the arc of radial grid lines in radians.
+ */
+		startAngle?: number;
+		/**
+ * Child components to the Arc.
+ */
+		children?: () => ReactNode;
+	};
+
+export type AllGridRadialProps<Scale extends GridScale, Datum> =
+	GridRadialProps<Scale> & Omit<ArcProps<Datum> & Omit<SVGProps<SVGPathElement>, keyof ArcProps<Datum>>, keyof GridRadialProps<Scale>>;
+
+export default function GridRadial<Scale extends GridScale, Datum>({
+	arcThickness,
+	className,
+	endAngle = 2 * Math.PI,
+	fill = 'transparent',
+	fillOpacity = 1,
+	left = 0,
+	lineClassName,
+	lineStyle,
+	numTicks = 10,
+	scale,
+	startAngle = 0,
+	stroke = '#eaf0f6',
+	strokeWidth = 1,
+	strokeDasharray,
+	tickValues,
+	top = 0,
+	...restProps
+}: AllGridRadialProps<Scale, Datum>) {
+	const radii = tickValues ?? getTicks(scale, numTicks);
+	const innerRadius = Math.min(...scale.domain());
+
+	return <Group className={cx('visx-grid-radial', className)} top={top} left={left}>{radii.map(
+		(radius, i) =>
+			<Arc
+				key={`radial-grid-${radius}-${i}`}
+				className={lineClassName}
+				startAngle={startAngle}
+				endAngle={endAngle}
+				innerRadius={scale(arcThickness ? radius - arcThickness : innerRadius) as number}
+				outerRadius={scale(radius) as number}
+				fill={fill}
+				fillOpacity={fillOpacity}
+				stroke={stroke}
+				strokeWidth={strokeWidth}
+				strokeDasharray={strokeDasharray}
+				style={lineStyle}
+				{...restProps}
+			/>,
+	)}</Group>;
+}

package/src/grid/grids/GridRadial.tsrx.d.ts

@@ -0,0 +1,44 @@
+// Generated by scripts/generate-tsrx-types.mjs.
+import type { ReactNode, SVGProps } from 'react';
+import type { ArcProps } from '@octanejs/visx/shape';
+import type { ScaleInput } from '@octanejs/visx/scale';
+import type { CommonGridProps, GridScale } from '../types';
+export type GridRadialProps<Scale extends GridScale> = CommonGridProps & {
+    /** `@octanejs/visx/scale` or `d3-scale` object used to convert value to position. */
+    scale: Scale;
+    /**
+* Exact values used to generate grid lines using `scale`.
+* Overrides `numTicks` if specified.
+*/
+    tickValues?: ScaleInput<Scale>[];
+    /**
+* If specified, the arc of each radial grid line will have this thickness, useful for fills.
+*/
+    arcThickness?: number;
+    /**
+* The end angle of the arc of radial grid lines in radians.
+*/
+    endAngle?: number;
+    /**
+* The class name applied to all radial lines.
+*/
+    lineClassName?: string;
+    /**
+* The color applied to the fill of the radial lines.
+*/
+    fill?: string;
+    /**
+* The fill opacity applied to the fill of the radial lines.
+*/
+    fillOpacity?: number;
+    /**
+* The start angle of the arc of radial grid lines in radians.
+*/
+    startAngle?: number;
+    /**
+* Child components to the Arc.
+*/
+    children?: () => ReactNode;
+};
+export type AllGridRadialProps<Scale extends GridScale, Datum> = GridRadialProps<Scale> & Omit<ArcProps<Datum> & Omit<SVGProps<SVGPathElement>, keyof ArcProps<Datum>>, keyof GridRadialProps<Scale>>;
+export default function GridRadial<Scale extends GridScale, Datum>({ arcThickness, className, endAngle, fill, fillOpacity, left, lineClassName, lineStyle, numTicks, scale, startAngle, stroke, strokeWidth, strokeDasharray, tickValues, top, ...restProps }: AllGridRadialProps<Scale, Datum>): import("react").JSX.Element;

package/src/grid/grids/GridRows.tsrx

@@ -0,0 +1,76 @@
+import type { SVGProps } from 'react';
+import cx from 'classnames';
+import { Line } from '@octanejs/visx/shape';
+import type { LineProps } from '@octanejs/visx/shape';
+import { Group } from '@octanejs/visx/group';
+import { Point } from '@octanejs/visx/point';
+import type { ScaleInput } from '@octanejs/visx/scale';
+import { getTicks, coerceNumber } from '@octanejs/visx/scale';
+import type { CommonGridProps, GridScale } from '../types';
+import getScaleBandwidth from '../utils/getScaleBandwidth';
+
+export type GridRowsProps<Scale extends GridScale> = CommonGridProps & {
+		/** `@octanejs/visx/scale` or `d3-scale` object used to convert value to position. */
+		scale: Scale;
+		/**
+ * Exact values used to generate grid lines using `scale`.
+ * Overrides `numTicks` if specified.
+ */
+		tickValues?: ScaleInput<Scale>[];
+		/** Total width of each grid row line. */
+		width: number;
+	};
+
+export type AllGridRowsProps<Scale extends GridScale> =
+	GridRowsProps<Scale> & Omit<LineProps & Omit<SVGProps<SVGLineElement>, keyof LineProps>, keyof GridRowsProps<Scale>>;
+
+export default function GridRows<Scale extends GridScale>({
+	top = 0,
+	left = 0,
+	scale,
+	width,
+	stroke = '#eaf0f6',
+	strokeWidth = 1,
+	strokeDasharray,
+	className,
+	children,
+	numTicks = 10,
+	lineStyle,
+	offset,
+	tickValues,
+	...restProps
+}: AllGridRowsProps<Scale>) {
+	const ticks = tickValues ?? getTicks(scale, numTicks);
+	const scaleOffset = (offset ?? 0) + getScaleBandwidth(scale) / 2;
+	const tickLines = ticks.map((d, index) => {
+		const y = (coerceNumber(scale(d)) ?? 0) + scaleOffset;
+		return {
+			index,
+			from: new Point({
+				x: 0,
+				y,
+			}),
+			to: new Point({
+				x: width,
+				y,
+			}),
+		};
+	});
+	return <Group className={cx('visx-rows', className)} top={top} left={left}>
+		{children
+			? children({ lines: tickLines })
+			: tickLines.map(
+					({ from, to, index }) =>
+						<Line
+							key={`row-line-${index}`}
+							from={from}
+							to={to}
+							stroke={stroke}
+							strokeWidth={strokeWidth}
+							strokeDasharray={strokeDasharray}
+							style={lineStyle}
+							{...restProps}
+						/>,
+				)}
+	</Group>;
+}

package/src/grid/grids/GridRows.tsrx.d.ts

@@ -0,0 +1,18 @@
+// Generated by scripts/generate-tsrx-types.mjs.
+import type { SVGProps } from 'react';
+import type { LineProps } from '@octanejs/visx/shape';
+import type { ScaleInput } from '@octanejs/visx/scale';
+import type { CommonGridProps, GridScale } from '../types';
+export type GridRowsProps<Scale extends GridScale> = CommonGridProps & {
+    /** `@octanejs/visx/scale` or `d3-scale` object used to convert value to position. */
+    scale: Scale;
+    /**
+* Exact values used to generate grid lines using `scale`.
+* Overrides `numTicks` if specified.
+*/
+    tickValues?: ScaleInput<Scale>[];
+    /** Total width of each grid row line. */
+    width: number;
+};
+export type AllGridRowsProps<Scale extends GridScale> = GridRowsProps<Scale> & Omit<LineProps & Omit<SVGProps<SVGLineElement>, keyof LineProps>, keyof GridRowsProps<Scale>>;
+export default function GridRows<Scale extends GridScale>({ top, left, scale, width, stroke, strokeWidth, strokeDasharray, className, children, numTicks, lineStyle, offset, tickValues, ...restProps }: AllGridRowsProps<Scale>): import("react").JSX.Element;

package/src/grid/index.ts

@@ -0,0 +1,11 @@
+// @octanejs/visx/grid
+export { default as GridRows } from './grids/GridRows.tsrx';
+export type { GridRowsProps, AllGridRowsProps } from './grids/GridRows.tsrx';
+export { default as GridColumns } from './grids/GridColumns.tsrx';
+export type { GridColumnsProps, AllGridColumnsProps } from './grids/GridColumns.tsrx';
+export { default as Grid } from './grids/Grid.tsrx';
+export { default as GridAngle } from './grids/GridAngle.tsrx';
+export { default as GridRadial } from './grids/GridRadial.tsrx';
+export { default as GridPolar } from './grids/GridPolar.tsrx';
+
+export type * from './types';

package/src/grid/types.ts

@@ -0,0 +1,40 @@
+import type { CSSProperties, ReactNode } from 'react';
+import type { D3Scale, NumberLike } from '@octanejs/visx/scale';
+
+// In order to plot values on an axis, output of the scale must be number.
+// Some scales return undefined.
+export type GridScaleOutput = number | NumberLike | undefined;
+
+/** A catch-all type for scales that are compatible with grid */
+export type GridScale<Output extends GridScaleOutput = GridScaleOutput> =
+	// eslint-disable-next-line @typescript-eslint/no-explicit-any
+	D3Scale<Output, any, any>;
+
+export type GridLines = {
+	from: { x?: number; y?: number };
+	to: { x?: number; y?: number };
+	index: number;
+}[];
+
+export type CommonGridProps = {
+	/** classname to apply to line group element. */
+	className?: string;
+	/** Optionally override rendering of grid lines. */
+	children?: (props: { lines: GridLines }) => ReactNode;
+	/** Top offset to apply to glyph g element container. */
+	top?: number;
+	/** Left offset to apply to glyph g element container. */
+	left?: number;
+	/** Grid line stroke color. */
+	stroke?: string;
+	/** Grid line stroke thickness. */
+	strokeWidth?: string | number;
+	/** Grid line stroke-dasharray attribute. */
+	strokeDasharray?: string;
+	/** Approximate number of grid lines. Approximate due to d3 alogrithm, specify `tickValues` for precise control. */
+	numTicks?: number;
+	/** Styles to apply as grid line style. */
+	lineStyle?: CSSProperties;
+	/** Pixel offset to apply as a translation (y- for Rows, x- for Columns) to each grid lines. */
+	offset?: number;
+};

package/src/grid/utils/getScaleBandwidth.ts

@@ -0,0 +1,5 @@
+import type { GridScale } from '../types';
+
+export default function getScaleBandwidth(scale: GridScale) {
+	return 'bandwidth' in scale ? scale.bandwidth() : 0;
+}

package/src/grid/utils/polarToCartesian.ts

@@ -0,0 +1,16 @@
+export type PolarCoordinate = {
+	radius: number;
+	angle: number;
+};
+
+export type CartesianCoordinate = {
+	x: number;
+	y: number;
+};
+
+export default function polarToCartesian({ radius, angle }: PolarCoordinate): CartesianCoordinate {
+	return {
+		x: radius * Math.cos(angle),
+		y: radius * Math.sin(angle),
+	};
+}

package/src/group/Group.tsrx

@@ -0,0 +1,33 @@
+import type { ReactNode, Ref, SVGProps } from 'react';
+import cx from 'classnames';
+
+export type GroupProps = {
+	/** Top offset applied to `<g/>`. */
+	top?: number;
+	/** Left offset applied to `<g/>`. */
+	left?: number;
+	/** Override `top` and `left` to provide the entire `transform` string. */
+	transform?: string;
+	/** className to apply to `<g/>`. */
+	className?: string;
+	children?: ReactNode;
+	/** ref to underlying `<g/>`. */
+	innerRef?: Ref<SVGGElement>;
+};
+
+export default function Group({
+	top = 0,
+	left = 0,
+	transform,
+	className,
+	children,
+	innerRef,
+	...restProps
+}: GroupProps & Omit<SVGProps<SVGGElement>, keyof GroupProps>) {
+	return <g
+		ref={innerRef}
+		className={cx('visx-group', className)}
+		transform={transform || `translate(${left}, ${top})`}
+		{...restProps}
+	>{children}</g>;
+}

package/src/group/Group.tsrx.d.ts

@@ -0,0 +1,16 @@
+// Generated by scripts/generate-tsrx-types.mjs.
+import type { ReactNode, Ref, SVGProps } from 'react';
+export type GroupProps = {
+    /** Top offset applied to `<g/>`. */
+    top?: number;
+    /** Left offset applied to `<g/>`. */
+    left?: number;
+    /** Override `top` and `left` to provide the entire `transform` string. */
+    transform?: string;
+    /** className to apply to `<g/>`. */
+    className?: string;
+    children?: ReactNode;
+    /** ref to underlying `<g/>`. */
+    innerRef?: Ref<SVGGElement>;
+};
+export default function Group({ top, left, transform, className, children, innerRef, ...restProps }: GroupProps & Omit<SVGProps<SVGGElement>, keyof GroupProps>): import("react").JSX.Element;

package/src/group/index.ts

@@ -0,0 +1,2 @@
+// @octanejs/visx/group
+export { default as Group } from './Group.tsrx';