@octanejs/visx 0.1.0

package/src/stats/ViolinPlot.tsrx

@@ -0,0 +1,78 @@
+import type { ReactNode, SVGProps } from 'react';
+import cx from 'classnames';
+import type { PickD3Scale, ContinuousDomainScaleType } from '@octanejs/visx/scale';
+import { scaleLinear } from '@octanejs/visx/scale';
+import { line, curveCardinal } from 'd3-shape';
+import type { SharedProps } from './types';
+
+export type ViolinPlotProps<Datum extends object> = SharedProps & {
+		/** Scale for converting values to pixel offsets. */
+		valueScale: PickD3Scale<ContinuousDomainScaleType, number>;
+		/** Data used to draw the violin plot glyph. Violin plot values and counts should be able to be derived from data. */
+		data: Datum[];
+		/** Given an datum, returns the count for it. */
+		count?: (d: Datum) => number;
+		/** Given an datum, returns the value for it. */
+		value?: (d: Datum) => number;
+		/** Width of the violin plot glyph. */
+		width?: number;
+		/** Override render function to fully control the rendering of the ViolinPlot glyph. */
+		children?: (providedProps: { path: string }) => ReactNode;
+	};
+
+const defaultCountAccessor = (d: { count?: unknown }) => typeof d.count === 'number' ? d.count : 0;
+const defaultValueAccessor = (d: { value?: unknown }) => typeof d.value === 'number' ? d.value : 0;
+
+export default function ViolinPlot<Datum extends object>({
+	left = 0,
+	top = 0,
+	className,
+	data,
+	width = 10,
+	count = defaultCountAccessor,
+	value = defaultValueAccessor,
+	valueScale,
+	horizontal,
+	children,
+	...restProps
+}: ViolinPlotProps<Datum> & Omit<SVGProps<SVGPathElement>, keyof ViolinPlotProps<Datum>>) {
+	const center = (horizontal ? top : left) + width / 2;
+	const binCounts = data.map((bin) => count(bin));
+	const widthScale = scaleLinear<number>({
+		range: [0, width / 2],
+		round: true,
+		domain: [0, Math.max(...binCounts)],
+	});
+
+	let path = '';
+
+	if (horizontal) {
+		const topCurve = line<Datum>().x((d) => valueScale(value(d)) ?? 0).y(
+			(d) => center - (widthScale(count(d)) ?? 0),
+		).curve(curveCardinal);
+
+		const bottomCurve = line<Datum>().x((d) => valueScale(value(d)) ?? 0).y(
+			(d) => center + (widthScale(count(d)) ?? 0),
+		).curve(curveCardinal);
+
+		const topCurvePath = topCurve(data) || '';
+		const bottomCurvePath = bottomCurve([...data].reverse()) || '';
+		path = `${topCurvePath} ${bottomCurvePath.replace('M', 'L')} Z`;
+	} else {
+		const rightCurve = line<Datum>().x((d) => center + (widthScale(count(d)) ?? 0)).y(
+			(d) => valueScale(value(d)) ?? 0,
+		).curve(curveCardinal);
+
+		const leftCurve = line<Datum>().x((d) => center - (widthScale(count(d)) ?? 0)).y(
+			(d) => valueScale(value(d)) ?? 0,
+		).curve(curveCardinal);
+
+		const rightCurvePath = rightCurve(data) || '';
+		const leftCurvePath = leftCurve([...data].reverse()) || '';
+		path = `${rightCurvePath} ${leftCurvePath.replace('M', 'L')} Z`;
+	}
+	if (children) return <>
+		{children({ path })}
+	</>;
+	return <path className={cx('visx-violin', className)} d={path} {...restProps} />;
+}

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

@@ -0,0 +1,21 @@
+// Generated by scripts/generate-tsrx-types.mjs.
+import type { ReactNode, SVGProps } from 'react';
+import type { PickD3Scale, ContinuousDomainScaleType } from '@octanejs/visx/scale';
+import type { SharedProps } from './types';
+export type ViolinPlotProps<Datum extends object> = SharedProps & {
+    /** Scale for converting values to pixel offsets. */
+    valueScale: PickD3Scale<ContinuousDomainScaleType, number>;
+    /** Data used to draw the violin plot glyph. Violin plot values and counts should be able to be derived from data. */
+    data: Datum[];
+    /** Given an datum, returns the count for it. */
+    count?: (d: Datum) => number;
+    /** Given an datum, returns the value for it. */
+    value?: (d: Datum) => number;
+    /** Width of the violin plot glyph. */
+    width?: number;
+    /** Override render function to fully control the rendering of the ViolinPlot glyph. */
+    children?: (providedProps: {
+        path: string;
+    }) => ReactNode;
+};
+export default function ViolinPlot<Datum extends object>({ left, top, className, data, width, count, value, valueScale, horizontal, children, ...restProps }: ViolinPlotProps<Datum> & Omit<SVGProps<SVGPathElement>, keyof ViolinPlotProps<Datum>>): import("react").JSX.Element;

package/src/stats/index.ts

@@ -0,0 +1,8 @@
+// @octanejs/visx/stats
+export { default as BoxPlot } from './BoxPlot.tsrx';
+export { default as ViolinPlot } from './ViolinPlot.tsrx';
+export { default as computeStats } from './util/computeStats';
+
+export type * from './types';
+export type { BoxPlotProps } from './BoxPlot.tsrx';
+export type { ViolinPlotProps } from './ViolinPlot.tsrx';

package/src/stats/types.ts

@@ -0,0 +1,56 @@
+export interface BoxPlot {
+	min?: number;
+	firstQuartile?: number;
+	median?: number;
+	thirdQuartile?: number;
+	max?: number;
+	outliers: number[];
+}
+
+export interface BinDatum {
+	value: number;
+	count: number;
+}
+
+export interface LineCoords {
+	x1: number;
+	x2: number;
+	y1: number;
+	y2: number;
+}
+
+export type ChildRenderProps = {
+	/** Output value range of the provided scale. */
+	valueRange: number[] | [number, number];
+	/** Center (top if horizontal=true, else left) of single boxplot. */
+	center: number;
+	/** Top offset if horizontal=true, else left offset. */
+	offset: number;
+	/** Specified width of BoxPlot */
+	boxWidth?: number;
+	/** Computed coordinates of the maximum line. */
+	max: LineCoords;
+	/** Computed coordinates of the line from maximum to third quartile. */
+	maxToThird: LineCoords;
+	/** Computed coordinates of the median line. */
+	median: LineCoords;
+	/** Computed coordinates of the line from first quartile to minimum. */
+	minToFirst: LineCoords;
+	/** Computed coordinates of the minimum line. */
+	min: LineCoords;
+	/** Computed coordinates of the boxplot box (i.e., not whiskers) rect. */
+	box: LineCoords;
+	/** Computed coordinates of the entire glyph container rect. */
+	container: LineCoords;
+};
+
+export type SharedProps = {
+	/** Left pixel offset of the glyph. */
+	left?: number;
+	/** Top pixel offset of the glyph. */
+	top?: number;
+	/** Classname to apply to parent group element. */
+	className?: string;
+	/** Whether the glyph should be rendered horizontally instead of vertically. */
+	horizontal?: boolean;
+};

package/src/stats/util/computeStats.ts

@@ -0,0 +1,71 @@
+import type { BoxPlot, BinDatum } from '../types';
+
+function calcMedian(dataSet: number[]) {
+	const half = Math.floor(dataSet.length / 2);
+	if (dataSet.length % 2) return dataSet[half];
+	return (dataSet[half - 1] + dataSet[half]) / 2;
+}
+
+export default function computeStats(numericalArray: number[]) {
+	const points = [...numericalArray].sort((a, b) => a - b);
+	const sampleSize = points.length;
+
+	const median = calcMedian(points);
+
+	// calculate median of first half i.e. firstQuartile
+	const lowerHalfLength = Math.floor(sampleSize / 2);
+	const lowerHalf = points.slice(0, lowerHalfLength);
+	const firstQuartile = calcMedian(lowerHalf);
+
+	// calculate median of first half i.e. secondQuartile
+	const upperHalfLength = Math.ceil(sampleSize / 2);
+	const upperHalf = points.slice(upperHalfLength);
+	const thirdQuartile = calcMedian(upperHalf);
+	const IQR = thirdQuartile - firstQuartile;
+
+	let min = firstQuartile - 1.5 * IQR;
+	let max = thirdQuartile + 1.5 * IQR;
+
+	const outliers = points.filter((p) => p < min || p > max);
+	if (outliers.length === 0) {
+		min = Math.min(...points);
+		max = Math.max(...points);
+	}
+	const binWidth = 2 * IQR * (sampleSize - outliers.length) ** (-1 / 3);
+	const binCount = Math.round((max - min) / binWidth);
+	const actualBinWidth = (max - min) / binCount;
+
+	const bins = new Array(binCount + 2).fill(0);
+	const values = new Array(binCount + 2).fill(min);
+
+	for (let i = 1; i <= binCount; i += 1) {
+		values[i] += actualBinWidth * (i - 0.5);
+	}
+
+	values[values.length - 1] = max;
+
+	points
+		.filter((p) => p >= min && p <= max)
+		.forEach((p) => {
+			bins[Math.floor((p - min) / actualBinWidth) + 1] += 1;
+		});
+
+	const binData: BinDatum[] = values.map((v, i) => ({
+		value: v,
+		count: bins[i],
+	}));
+
+	const boxPlot: BoxPlot = {
+		min,
+		firstQuartile,
+		median,
+		thirdQuartile,
+		max,
+		outliers,
+	};
+
+	return {
+		boxPlot,
+		binData,
+	};
+}

package/src/text/Text.tsrx

@@ -0,0 +1,43 @@
+import useText from './hooks/useText.tsrx';
+import type { TextProps as TxtProps } from './types';
+
+export type TextProps = TxtProps;
+
+const SVG_STYLE = { overflow: 'visible' };
+
+export default function Text(props: TextProps) {
+	const {
+		dx = 0,
+		dy = 0,
+		textAnchor = 'start',
+		innerRef,
+		innerTextRef,
+		verticalAnchor,
+		angle,
+		lineHeight = '1em',
+		// eslint-disable-next-line @typescript-eslint/no-unused-vars
+		scaleToFit = false,
+		capHeight,
+		width,
+		...textProps
+	} = props;
+
+	const { x = 0, fontSize } = textProps;
+	const { wordsByLines, startDy, transform } = useText(props);
+
+	return <svg ref={innerRef} x={dx} y={dy} fontSize={fontSize} style={SVG_STYLE}>
+		{wordsByLines.length > 0
+			? <text
+					ref={innerTextRef}
+					transform={transform}
+					{...textProps}
+					textAnchor={textAnchor}
+				>{wordsByLines.map(
+					(line, index) =>
+						<tspan key={index} x={x} dy={index === 0 ? startDy : lineHeight}>{line.words.join(
+							' ',
+						)}</tspan>,
+				)}</text>
+			: null}
+	</svg>;
+}

package/src/text/Text.tsrx.d.ts

@@ -0,0 +1,4 @@
+// Generated by scripts/generate-tsrx-types.mjs.
+import type { TextProps as TxtProps } from './types';
+export type TextProps = TxtProps;
+export default function Text(props: TextProps): import("react").JSX.Element;

package/src/text/hooks/useText.tsrx

@@ -0,0 +1,125 @@
+import { useMemo } from 'octane';
+import reduceCSSCalc from 'reduce-css-calc';
+import type { TextProps, WordsWithWidth } from '../types';
+import getStringWidth from '../util/getStringWidth';
+
+function isNumber(val: unknown): val is number {
+	return typeof val === 'number';
+}
+
+function isXOrYInValid(xOrY: string | number | undefined) {
+	return (
+		// number that is not NaN or Infinity
+		(typeof xOrY === 'number' && Number.isFinite(xOrY)) ||
+		// for percentage
+		typeof xOrY === 'string'
+	);
+}
+
+export default function useText(props: TextProps): {
+	wordsByLines: WordsWithWidth[];
+	startDy: string;
+	transform: string;
+} {
+	const {
+		verticalAnchor = 'end',
+		scaleToFit = false,
+		angle,
+		width,
+		lineHeight = '1em',
+		capHeight = '0.71em', // Magic number from d3
+		children,
+		style,
+		...textProps
+	} = props;
+
+	const { x = 0, y = 0 } = textProps;
+	const isXOrYNotValid = !isXOrYInValid(x) || !isXOrYInValid(y);
+
+	const { wordsWithWidth, spaceWidth } = useMemo(() => {
+		const words: string[] =
+			children == null ? [] : children.toString().split(/(?:(?!\u00A0+)\s+)/);
+		return {
+			wordsWithWidth: words.map(
+				(word) => ({
+					word,
+					wordWidth: getStringWidth(word, style) || 0,
+				}),
+			),
+			spaceWidth: getStringWidth(' ', style) || 0,
+		};
+	}, [children, style]);
+
+	const wordsByLines = useMemo(() => {
+		if (isXOrYNotValid) {
+			return [];
+		}
+
+		// Only perform calculations if using features that require them (multiline, scaleToFit)
+		if (width || scaleToFit) {
+			return wordsWithWidth.reduce((result: WordsWithWidth[], { word, wordWidth }) => {
+				const currentLine = result[result.length - 1];
+
+				if (
+					currentLine &&
+						(width == null || scaleToFit ||
+							(currentLine.width || 0) + wordWidth + spaceWidth < width)
+				) {
+					// Word can be added to an existing line
+					currentLine.words.push(word);
+					currentLine.width = currentLine.width || 0;
+					currentLine.width += wordWidth + spaceWidth;
+				} else {
+					// Add first word to line or word is too long to scaleToFit on existing line
+					const newLine = { words: [word], width: wordWidth };
+					result.push(newLine);
+				}
+
+				return result;
+			}, []);
+		}
+
+		return [
+			{ words: children == null ? [] : children.toString().split(/(?:(?!\u00A0+)\s+)/) },
+		];
+	}, [isXOrYNotValid, width, scaleToFit, children, wordsWithWidth, spaceWidth]);
+
+	const startDy = useMemo(() => {
+		const startDyStr =
+			isXOrYNotValid
+				? ''
+				: verticalAnchor === 'start'
+					? reduceCSSCalc(`calc(${capHeight})`)
+					: verticalAnchor === 'middle'
+						? reduceCSSCalc(
+								`calc(${(wordsByLines.length - 1) / 2} * -${lineHeight} + (${capHeight} / 2))`,
+							)
+						: reduceCSSCalc(`calc(${wordsByLines.length - 1} * -${lineHeight})`);
+
+		return startDyStr;
+	}, [isXOrYNotValid, verticalAnchor, capHeight, wordsByLines.length, lineHeight]);
+
+	const transform = useMemo(() => {
+		const transforms: string[] = [];
+		if (isXOrYNotValid) {
+			return '';
+		}
+
+		if (isNumber(x) && isNumber(y) && isNumber(width) && scaleToFit && wordsByLines.length > 0) {
+			const lineWidth = wordsByLines[0].width || 1;
+			const sx =
+				scaleToFit === 'shrink-only' ? Math.min(width / lineWidth, 1) : width / lineWidth;
+			const sy = sx;
+			const originX = x - sx * x;
+			const originY = y - sy * y;
+			transforms.push(`matrix(${sx}, 0, 0, ${sy}, ${originX}, ${originY})`);
+		}
+		if (angle) {
+			transforms.push(`rotate(${angle}, ${x}, ${y})`);
+		}
+
+		return transforms.length > 0 ? transforms.join(' ') : '';
+	}, [isXOrYNotValid, x, y, width, scaleToFit, wordsByLines, angle]);
+
+	return { wordsByLines, startDy, transform };
+}

package/src/text/hooks/useText.tsrx.d.ts

@@ -0,0 +1,7 @@
+// Generated by scripts/generate-tsrx-types.mjs.
+import type { TextProps, WordsWithWidth } from '../types';
+export default function useText(props: TextProps): {
+    wordsByLines: WordsWithWidth[];
+    startDy: string;
+    transform: string;
+};

package/src/text/index.ts

@@ -0,0 +1,5 @@
+// @octanejs/visx/text
+export { default as Text } from './Text.tsrx';
+export { default as getStringWidth } from './util/getStringWidth';
+export { default as useText } from './hooks/useText.tsrx';
+export type * from './types';

package/src/text/types.ts

@@ -0,0 +1,54 @@
+import type { CSSProperties, Ref, SVGAttributes } from 'react';
+
+type SVGTSpanProps = SVGAttributes<SVGTSpanElement>;
+type SVGTextProps = SVGAttributes<SVGTextElement>;
+
+type OwnProps = {
+	/** className to apply to the SVGText element. */
+	className?: string;
+	/** Whether to scale the fontSize to accommodate the specified width.  */
+	scaleToFit?: boolean | 'shrink-only';
+	/** Rotational angle of the text. */
+	angle?: number;
+	/** Horizontal text anchor. */
+	textAnchor?: 'start' | 'middle' | 'end' | 'inherit';
+	/** Vertical text anchor. */
+	verticalAnchor?: 'start' | 'middle' | 'end';
+	/** Styles to be applied to the text (and used in computation of its size). */
+	style?: CSSProperties;
+	/** Ref passed to the Text SVG element. */
+	innerRef?: Ref<SVGSVGElement>;
+	/** Ref passed to the Text text element */
+	innerTextRef?: Ref<SVGTextElement>;
+	/** x position of the text. */
+	x?: string | number;
+	/** y position of the text. */
+	y?: string | number;
+	/** dx offset of the text. */
+	dx?: string | number;
+	/** dy offset of the text. */
+	dy?: string | number;
+	/** Desired "line height" of the text, implemented as y offsets. */
+	lineHeight?: SVGTSpanProps['dy'];
+	/** Cap height of the text. */
+	capHeight?: SVGTSpanProps['capHeight'];
+	/** Font size of text. */
+	fontSize?: string | number;
+	/** Font family of text. */
+	fontFamily?: string;
+	/** Fill color of text. */
+	fill?: string;
+	/** Maximum width to occupy (approximate as words are not split). */
+	width?: number;
+	/** String (or number coercible to one) to be styled and positioned. */
+	children?: string | number;
+};
+
+export type TextProps = OwnProps & Omit<SVGTextProps, keyof OwnProps>;
+
+export type compareFunction<T> = (prev: T | undefined, next: T) => boolean;
+
+export interface WordsWithWidth {
+	words: string[];
+	width?: number;
+}

package/src/text/util/getStringWidth.ts

@@ -0,0 +1,38 @@
+import memoize from './memoize';
+
+type TextStyle = {
+	fontSize?: string | number;
+	fontWeight?: string | number;
+};
+
+function characterWidth(character: string): number {
+	if (/\s/.test(character)) return 0.33;
+	if (/[ilI1|!.,'`:;]/.test(character)) return 0.29;
+	if (/[mwMW@#%&]/.test(character)) return 0.9;
+	if (/[^\u0000-\u00ff]/.test(character)) return 1;
+	if (/[A-Z0-9]/.test(character)) return 0.62;
+	return 0.56;
+}
+
+/**
+ * Deterministic font-metric approximation shared by SSR and the first client
+ * render. Browser SVG measurement during render produces different wrapping
+ * before hydration; post-adoption measurement belongs in explicit refs/hooks.
+ */
+function getStringWidth(str: string, style: object = {}): number | null {
+	const textStyle = style as TextStyle;
+	const parsedFontSize =
+		typeof textStyle.fontSize === 'number'
+			? textStyle.fontSize
+			: Number.parseFloat(textStyle.fontSize ?? '16');
+	const fontSize = Number.isFinite(parsedFontSize) ? parsedFontSize : 16;
+	const numericWeight = Number.parseFloat(String(textStyle.fontWeight ?? 400));
+	const weightFactor = Number.isFinite(numericWeight) && numericWeight >= 600 ? 1.04 : 1;
+	return (
+		[...str].reduce((width, character) => width + characterWidth(character), 0) *
+		fontSize *
+		weightFactor
+	);
+}
+
+export default memoize(getStringWidth, (str, style) => `${str}_${JSON.stringify(style)}`);

package/src/text/util/memoize.ts

@@ -0,0 +1,13 @@
+export default function memoize<T extends (...args: any[]) => any>(
+	func: T,
+	resolver: (...args: Parameters<T>) => string,
+): T {
+	const cache = new Map<string, ReturnType<T>>();
+	return function memoized(this: unknown, ...args: Parameters<T>): ReturnType<T> {
+		const key = resolver(...args);
+		if (cache.has(key)) return cache.get(key) as ReturnType<T>;
+		const result = func.apply(this, args) as ReturnType<T>;
+		cache.set(key, result);
+		return result;
+	} as T;
+}

package/src/theme/compat/fromXYChartTheme.ts

@@ -0,0 +1,132 @@
+import defineTheme from '../provider/defineTheme';
+import normalizeCategoricalColors from '../tokens/categorical';
+import lightTheme from '../tokens/light';
+import type { CategoricalColorScale, VisxThemeDefinition } from '../tokens/types';
+
+type StrokeLike = string | number;
+type FontSizeLike = string | number;
+
+type LineStyleLike = {
+	stroke?: StrokeLike;
+};
+
+type AxisStyleLike = {
+	axisLine?: LineStyleLike;
+	tickLine?: LineStyleLike;
+};
+
+export interface XYChartThemeLike {
+	backgroundColor?: string;
+	colors?: readonly string[];
+	gridStyles?: {
+		stroke?: StrokeLike;
+	};
+	axisStyles?: {
+		x?: {
+			top?: AxisStyleLike;
+			bottom?: AxisStyleLike;
+		};
+		y?: {
+			left?: AxisStyleLike;
+			right?: AxisStyleLike;
+		};
+	};
+	svgLabelBig?: {
+		fill?: string;
+		fontFamily?: string;
+		fontSize?: FontSizeLike;
+	};
+	svgLabelSmall?: {
+		fill?: string;
+		fontFamily?: string;
+		fontSize?: FontSizeLike;
+	};
+}
+
+function toStringValue(value: StrokeLike | undefined): string | undefined {
+	if (value == null) {
+		return undefined;
+	}
+
+	const stringValue = `${value}`;
+
+	return stringValue === '' ? undefined : stringValue;
+}
+
+function firstStringValue(...values: (StrokeLike | undefined)[]) {
+	for (const value of values) {
+		const stringValue = toStringValue(value);
+
+		if (stringValue !== undefined) {
+			return stringValue;
+		}
+	}
+
+	return undefined;
+}
+
+function toNumberValue(value: FontSizeLike | undefined): number | undefined {
+	if (typeof value === 'number') {
+		return Number.isFinite(value) ? value : undefined;
+	}
+
+	if (typeof value === 'string' && value.trim() !== '') {
+		const parsedValue = Number.parseFloat(value);
+
+		return Number.isFinite(parsedValue) ? parsedValue : undefined;
+	}
+
+	return undefined;
+}
+
+function normalizeXYChartColors(colors: readonly string[] | undefined) {
+	if (colors == null || colors.length === 0) {
+		return undefined;
+	}
+
+	return normalizeCategoricalColors(colors) as CategoricalColorScale;
+}
+
+export default function fromXYChartTheme(theme: XYChartThemeLike = {}): VisxThemeDefinition {
+	const axisStroke = firstStringValue(
+		theme.axisStyles?.x?.bottom?.axisLine?.stroke,
+		theme.axisStyles?.x?.top?.axisLine?.stroke,
+		theme.axisStyles?.y?.left?.axisLine?.stroke,
+		theme.axisStyles?.y?.right?.axisLine?.stroke,
+	);
+	const axisTickStroke = firstStringValue(
+		theme.axisStyles?.x?.bottom?.tickLine?.stroke,
+		theme.axisStyles?.x?.top?.tickLine?.stroke,
+		theme.axisStyles?.y?.left?.tickLine?.stroke,
+		theme.axisStyles?.y?.right?.tickLine?.stroke,
+	);
+	const gridStroke = toStringValue(theme.gridStyles?.stroke);
+	const categorical = normalizeXYChartColors(theme.colors);
+	const fontFamily = firstStringValue(
+		theme.svgLabelBig?.fontFamily,
+		theme.svgLabelSmall?.fontFamily,
+	);
+	const fontSizeLabel = toNumberValue(theme.svgLabelBig?.fontSize);
+	const fontSizeTick = toNumberValue(theme.svgLabelSmall?.fontSize);
+
+	return defineTheme(
+		{
+			name: 'xychart',
+			colors: {
+				...(categorical == null ? {} : { categorical }),
+				...(theme.backgroundColor == null ? {} : { background: theme.backgroundColor }),
+				...(theme.svgLabelBig?.fill == null ? {} : { textPrimary: theme.svgLabelBig.fill }),
+				...(theme.svgLabelSmall?.fill == null ? {} : { textMuted: theme.svgLabelSmall.fill }),
+				...(axisStroke == null ? {} : { axisStroke }),
+				...(axisTickStroke == null ? {} : { axisTickStroke }),
+				...(gridStroke == null ? {} : { gridStroke }),
+			},
+			typography: {
+				...(fontFamily == null ? {} : { fontFamily }),
+				...(fontSizeLabel == null ? {} : { fontSizeLabel }),
+				...(fontSizeTick == null ? {} : { fontSizeTick }),
+			},
+		},
+		lightTheme,
+	);
+}

package/src/theme/index.ts

@@ -0,0 +1,14 @@
+// @octanejs/visx/theme
+export { default as cssVar } from './tokens/cssVar';
+export { default as lightTheme } from './tokens/light';
+export { default as darkTheme } from './tokens/dark';
+export { default as createRuntimeTheme } from './runtime/createRuntimeTheme';
+export { default as createThemeStyle } from './tokens/style';
+export { default as defineTheme } from './provider/defineTheme';
+export { default as ThemeScope } from './provider/ThemeScope.tsrx';
+export { default as fromXYChartTheme } from './compat/fromXYChartTheme';
+
+export type * from './tokens/types';
+export type { ThemeOverrides } from './provider/defineTheme';
+export type { ThemeScopeElement, ThemeScopeProps } from './provider/ThemeScope.tsrx';
+export type { XYChartThemeLike } from './compat/fromXYChartTheme';