@octanejs/visx 0.1.0

package/src/theme/runtime/createRuntimeTheme.ts

@@ -0,0 +1,70 @@
+import normalizeCategoricalColors from '../tokens/categorical';
+import cssVar from '../tokens/cssVar';
+import { cssVarNames, shadcnFallbackCssVarNames } from '../tokens/names';
+import type { VisxThemeInput, VisxThemeRuntime } from '../tokens/types';
+import { resolveRuntimeThemeName, resolveThemeInput } from './resolveThemeInput';
+
+export default function createRuntimeTheme(theme: VisxThemeInput = 'auto'): VisxThemeRuntime {
+	const definition = resolveThemeInput(theme);
+	const { colors } = definition;
+	const categorical = normalizeCategoricalColors(colors.categorical);
+
+	return {
+		name: resolveRuntimeThemeName(theme),
+		colors: {
+			categorical: cssVarNames.categorical.map((name, index) => cssVar(name, categorical[index])),
+
+			sequentialFrom: cssVar(
+				cssVarNames.sequentialFrom,
+				cssVar(cssVarNames.categorical[0], categorical[0]),
+			),
+			sequentialTo: cssVar(
+				cssVarNames.sequentialTo,
+				cssVar(cssVarNames.categorical[1], categorical[1]),
+			),
+			divergingNegative: cssVar(
+				cssVarNames.divergingNegative,
+				cssVar(shadcnFallbackCssVarNames.destructive, colors.divergingNegative),
+			),
+			divergingNeutral: cssVar(
+				cssVarNames.divergingNeutral,
+				cssVar(shadcnFallbackCssVarNames.muted, colors.divergingNeutral),
+			),
+			divergingPositive: cssVar(
+				cssVarNames.divergingPositive,
+				cssVar(shadcnFallbackCssVarNames.primary, colors.divergingPositive),
+			),
+
+			background: cssVar(cssVarNames.background, colors.background),
+			surface: cssVar(cssVarNames.surface, cssVar(cssVarNames.background, colors.background)),
+			border: cssVar(cssVarNames.border, colors.border),
+			textPrimary: cssVar(cssVarNames.textPrimary, colors.textPrimary),
+			textMuted: cssVar(cssVarNames.textMuted, colors.textMuted),
+
+			positive: cssVar(cssVarNames.positive, colors.positive),
+			negative: cssVar(
+				cssVarNames.negative,
+				cssVar(shadcnFallbackCssVarNames.destructive, colors.negative),
+			),
+			highlight: cssVar(
+				cssVarNames.highlight,
+				cssVar(shadcnFallbackCssVarNames.primary, colors.highlight),
+			),
+
+			axisStroke: cssVar(cssVarNames.axisStroke, cssVar(cssVarNames.border, colors.border)),
+			axisTickStroke: cssVar(cssVarNames.axisTickStroke, cssVar(cssVarNames.border, colors.border)),
+			gridStroke: cssVar(cssVarNames.gridStroke, cssVar(cssVarNames.border, colors.border)),
+		},
+		typography: {
+			fontFamily: cssVar(cssVarNames.fontFamily, definition.typography.fontFamily),
+			fontSizeTitle: definition.typography.fontSizeTitle,
+			fontSizeLabel: definition.typography.fontSizeLabel,
+			fontSizeTick: definition.typography.fontSizeTick,
+		},
+		axis: { ...definition.axis },
+		grid: { ...definition.grid },
+		spacing: {
+			margin: { ...definition.spacing.margin },
+		},
+	};
+}

package/src/theme/runtime/resolveThemeInput.ts

@@ -0,0 +1,19 @@
+import darkTheme from '../tokens/dark';
+import lightTheme from '../tokens/light';
+import type { VisxThemeDefinition, VisxThemeInput } from '../tokens/types';
+
+export function resolveThemeInput(theme: VisxThemeInput = 'auto'): VisxThemeDefinition {
+	if (theme === 'auto' || theme === 'light') {
+		return lightTheme;
+	}
+
+	if (theme === 'dark') {
+		return darkTheme;
+	}
+
+	return theme;
+}
+
+export function resolveRuntimeThemeName(theme: VisxThemeInput = 'auto'): string {
+	return theme === 'auto' ? 'auto' : resolveThemeInput(theme).name;
+}

package/src/theme/tokens/categorical.ts

@@ -0,0 +1,18 @@
+import lightTheme from './light';
+import { CATEGORICAL_COLOR_COUNT, MIN_CATEGORICAL_COLOR_COUNT } from './names';
+import warn from '../utils/warn';
+
+export default function normalizeCategoricalColors(colors: readonly string[]): readonly string[] {
+	if (colors.length < MIN_CATEGORICAL_COLOR_COUNT) {
+		warn(
+			`[@octanejs/visx/theme] categorical palettes should include at least ${MIN_CATEGORICAL_COLOR_COUNT} colors; received ${colors.length}. The palette will be normalized to fill ${CATEGORICAL_COLOR_COUNT} runtime colors.`,
+		);
+	}
+
+	const sourceColors = colors.length > 0 ? colors : lightTheme.colors.categorical;
+
+	return Array.from(
+		{ length: CATEGORICAL_COLOR_COUNT },
+		(_, index) => sourceColors[index % sourceColors.length],
+	);
+}

package/src/theme/tokens/cssVar.ts

@@ -0,0 +1,5 @@
+import type { CSSVarName } from './types';
+
+export default function cssVar(name: CSSVarName, fallback?: string): string {
+	return fallback == null ? `var(${name})` : `var(${name}, ${fallback})`;
+}

package/src/theme/tokens/dark.ts

@@ -0,0 +1,51 @@
+import type { VisxThemeDefinition } from './types';
+import lightTheme from './light';
+
+const darkTheme: VisxThemeDefinition = {
+	...lightTheme,
+	name: 'dark',
+	colors: {
+		categorical: [
+			'#60a5fa',
+			'#34d399',
+			'#fbbf24',
+			'#f87171',
+			'#a78bfa',
+			'#22d3ee',
+			'#a3e635',
+			'#fb923c',
+			'#f472b6',
+			'#818cf8',
+			'#2dd4bf',
+			'#94a3b8',
+		],
+
+		sequentialFrom: '#60a5fa',
+		sequentialTo: '#34d399',
+		divergingNegative: '#f87171',
+		divergingNeutral: '#64748b',
+		divergingPositive: '#4ade80',
+
+		background: '#020617',
+		surface: '#0f172a',
+		border: '#334155',
+		textPrimary: '#f8fafc',
+		textMuted: '#94a3b8',
+
+		positive: '#4ade80',
+		negative: '#f87171',
+		highlight: '#60a5fa',
+
+		axisStroke: '#334155',
+		axisTickStroke: '#334155',
+		gridStroke: '#1e293b',
+	},
+	typography: { ...lightTheme.typography },
+	axis: { ...lightTheme.axis },
+	grid: { ...lightTheme.grid },
+	spacing: {
+		margin: { ...lightTheme.spacing.margin },
+	},
+};
+
+export default darkTheme;

package/src/theme/tokens/light.ts

@@ -0,0 +1,62 @@
+import type { VisxThemeDefinition } from './types';
+
+const systemSansSerif =
+	'-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif';
+
+const lightTheme: VisxThemeDefinition = {
+	name: 'light',
+	colors: {
+		categorical: [
+			'#3b82f6',
+			'#10b981',
+			'#f59e0b',
+			'#ef4444',
+			'#8b5cf6',
+			'#06b6d4',
+			'#84cc16',
+			'#f97316',
+			'#ec4899',
+			'#6366f1',
+			'#14b8a6',
+			'#64748b',
+		],
+
+		sequentialFrom: '#3b82f6',
+		sequentialTo: '#10b981',
+		divergingNegative: '#ef4444',
+		divergingNeutral: '#94a3b8',
+		divergingPositive: '#22c55e',
+
+		background: '#ffffff',
+		surface: '#ffffff',
+		border: '#e5e7eb',
+		textPrimary: '#111827',
+		textMuted: '#6b7280',
+
+		positive: '#22c55e',
+		negative: '#ef4444',
+		highlight: '#2563eb',
+
+		axisStroke: '#e5e7eb',
+		axisTickStroke: '#e5e7eb',
+		gridStroke: '#f3f4f6',
+	},
+	typography: {
+		fontFamily: systemSansSerif,
+		fontSizeTitle: 16,
+		fontSizeLabel: 12,
+		fontSizeTick: 11,
+	},
+	axis: {
+		strokeWidth: 1,
+		tickLength: 4,
+	},
+	grid: {
+		strokeWidth: 1,
+	},
+	spacing: {
+		margin: { top: 20, right: 20, bottom: 40, left: 50 },
+	},
+};
+
+export default lightTheme;

package/src/theme/tokens/names.ts

@@ -0,0 +1,49 @@
+export const CATEGORICAL_COLOR_COUNT = 12;
+export const MIN_CATEGORICAL_COLOR_COUNT = 5;
+
+export const categoricalCssVarNames = [
+	'--chart-1',
+	'--chart-2',
+	'--chart-3',
+	'--chart-4',
+	'--chart-5',
+	'--chart-6',
+	'--chart-7',
+	'--chart-8',
+	'--chart-9',
+	'--chart-10',
+	'--chart-11',
+	'--chart-12',
+] as const;
+
+export const cssVarNames = {
+	categorical: categoricalCssVarNames,
+
+	sequentialFrom: '--chart-scale-from',
+	sequentialTo: '--chart-scale-to',
+	divergingNegative: '--chart-diverge-low',
+	divergingNeutral: '--chart-diverge-mid',
+	divergingPositive: '--chart-diverge-high',
+
+	background: '--background',
+	surface: '--card',
+	border: '--border',
+	textPrimary: '--foreground',
+	textMuted: '--muted-foreground',
+
+	positive: '--chart-positive',
+	negative: '--chart-negative',
+	highlight: '--chart-highlight',
+
+	axisStroke: '--visx-axis-stroke',
+	axisTickStroke: '--visx-axis-tick-stroke',
+	gridStroke: '--visx-grid-stroke',
+
+	fontFamily: '--visx-font-family',
+} as const;
+
+export const shadcnFallbackCssVarNames = {
+	destructive: '--destructive',
+	muted: '--muted',
+	primary: '--primary',
+} as const;

package/src/theme/tokens/style.ts

@@ -0,0 +1,45 @@
+import { resolveThemeInput } from '../runtime/resolveThemeInput';
+import normalizeCategoricalColors from './categorical';
+import { cssVarNames } from './names';
+import type { CSSVarName, CSSVarStyle, VisxThemeInput } from './types';
+
+function setCssVar(style: CSSVarStyle, name: CSSVarName, value: string | undefined) {
+	if (value !== undefined) {
+		style[name] = value;
+	}
+}
+
+export default function createThemeStyle(theme: Exclude<VisxThemeInput, 'auto'>): CSSVarStyle {
+	const definition = resolveThemeInput(theme);
+	const { colors } = definition;
+	const categorical = normalizeCategoricalColors(colors.categorical);
+	const style: CSSVarStyle = {};
+
+	cssVarNames.categorical.forEach((name, index) => {
+		setCssVar(style, name, categorical[index]);
+	});
+
+	setCssVar(style, cssVarNames.sequentialFrom, colors.sequentialFrom);
+	setCssVar(style, cssVarNames.sequentialTo, colors.sequentialTo);
+	setCssVar(style, cssVarNames.divergingNegative, colors.divergingNegative);
+	setCssVar(style, cssVarNames.divergingNeutral, colors.divergingNeutral);
+	setCssVar(style, cssVarNames.divergingPositive, colors.divergingPositive);
+
+	setCssVar(style, cssVarNames.background, colors.background);
+	setCssVar(style, cssVarNames.surface, colors.surface);
+	setCssVar(style, cssVarNames.border, colors.border);
+	setCssVar(style, cssVarNames.textPrimary, colors.textPrimary);
+	setCssVar(style, cssVarNames.textMuted, colors.textMuted);
+
+	setCssVar(style, cssVarNames.positive, colors.positive);
+	setCssVar(style, cssVarNames.negative, colors.negative);
+	setCssVar(style, cssVarNames.highlight, colors.highlight);
+
+	setCssVar(style, cssVarNames.axisStroke, colors.axisStroke);
+	setCssVar(style, cssVarNames.axisTickStroke, colors.axisTickStroke);
+	setCssVar(style, cssVarNames.gridStroke, colors.gridStroke);
+
+	setCssVar(style, cssVarNames.fontFamily, definition.typography.fontFamily);
+
+	return style;
+}

package/src/theme/tokens/types.ts

@@ -0,0 +1,118 @@
+import type { ComponentType, CSSProperties } from 'react';
+
+export type VisxThemeMode = 'light' | 'dark' | 'auto';
+
+export type CategoricalColorScale = readonly [string, string, string, string, string, ...string[]];
+
+export interface VisxThemeDefinition {
+	/** Identifier for debugging and docs. Not used as a registry key. */
+	name: string;
+
+	/** Raw authoring values: hex, hsl, oklch, rgb, CSS color names, or var() references. */
+	colors: {
+		categorical: CategoricalColorScale;
+
+		sequentialFrom: string;
+		sequentialTo: string;
+		divergingNegative: string;
+		divergingNeutral: string;
+		divergingPositive: string;
+
+		background: string;
+		surface: string;
+		border: string;
+		textPrimary: string;
+		textMuted: string;
+
+		positive: string;
+		negative: string;
+		highlight: string;
+
+		axisStroke: string;
+		axisTickStroke: string;
+		gridStroke: string;
+	};
+
+	typography: {
+		fontFamily: string;
+		fontSizeTitle: number;
+		fontSizeLabel: number;
+		fontSizeTick: number;
+	};
+
+	axis: {
+		strokeWidth: number;
+		tickLength: number;
+	};
+
+	grid: {
+		strokeWidth: number;
+	};
+
+	spacing: {
+		margin: { top: number; right: number; bottom: number; left: number };
+	};
+}
+
+export type VisxThemeInput = VisxThemeMode | VisxThemeDefinition;
+
+export interface VisxThemeRuntime {
+	/** Identifier for debugging. */
+	name: string;
+
+	/** Runtime values: CSS-ready var(...) expressions for CSS-backed fields. */
+	colors: {
+		categorical: readonly string[];
+
+		sequentialFrom: string;
+		sequentialTo: string;
+		divergingNegative: string;
+		divergingNeutral: string;
+		divergingPositive: string;
+
+		background: string;
+		surface: string;
+		border: string;
+		textPrimary: string;
+		textMuted: string;
+
+		positive: string;
+		negative: string;
+		highlight: string;
+
+		axisStroke: string;
+		axisTickStroke: string;
+		gridStroke: string;
+	};
+
+	/** fontFamily is runtime CSS-ready; font sizes are JS-only numbers. */
+	typography: {
+		fontFamily: string;
+		fontSizeTitle: number;
+		fontSizeLabel: number;
+		fontSizeTick: number;
+	};
+
+	axis: VisxThemeDefinition['axis'];
+	grid: VisxThemeDefinition['grid'];
+	spacing: VisxThemeDefinition['spacing'];
+}
+
+export type CSSVarName = `--${string}`;
+
+export type CSSVarStyle = CSSProperties & {
+	[key: CSSVarName]: string | number | undefined;
+};
+
+export interface ChartSeriesConfig {
+	/** Human-readable label for legends, tooltips, and screen reader output. */
+	label: string;
+
+	/** Optional icon for legends and tooltips. Client-side only if passed across RSC boundaries. */
+	icon?: ComponentType<{ className?: string }>;
+
+	/** Explicit color override. May be any CSS color, including var(...). */
+	color?: string;
+}
+
+export type ChartConfig<K extends string = string> = Record<K, ChartSeriesConfig>;

package/src/theme/utils/warn.ts

@@ -0,0 +1,5 @@
+export default function warn(message: string) {
+	if (process.env.NODE_ENV !== 'production') {
+		console.warn(message);
+	}
+}

package/src/threshold/Threshold.tsrx

@@ -0,0 +1,112 @@
+import type { SVGProps } from 'react';
+import cx from 'classnames';
+import { Area } from '@octanejs/visx/shape';
+import type { AreaProps as AreaOwnProps } from '@octanejs/visx/shape';
+import { ClipPath } from '@octanejs/visx/clip-path';
+import useStableId from '../kernel/ids/useStableId.tsrx';
+
+type AreaProps<Datum> =
+	AreaOwnProps<Datum> & Omit<SVGProps<SVGPathElement>, keyof AreaOwnProps<Datum>>;
+
+type NumberAccessor<Datum> = (datum: Datum, index: number, data: Datum[]) => number;
+
+export type ThresholdProps<Datum> = {
+	/** className applied to container g element. */
+	className?: string;
+	/** Sets the curve factory (from @octanejs/visx/curve or d3-curve) for the area generator. Defaults to curveLinear. */
+	curve?: AreaProps<Datum>['curve'];
+	/** Specifies a constant value, or an accessor called per datum, above which the *upper area* is clipped. */
+	clipAboveTo: NumberAccessor<Datum> | number;
+	/** Specifies a constant value, or an accessor called per datum, below which the *lower area* is clipped. */
+	clipBelowTo: NumberAccessor<Datum> | number;
+	/** id for this threshold. If not set, multiple Threshold's on a page may conflict and interfere with each other. */
+	id?: string;
+	/** Array of data for which to generate a threshold area shape. */
+	data: Datum[];
+	/**
+ * The defined accessor for the shape. The final area shape includes all points for which this
+ * function returns true. By default all points are defined.
+ */
+	defined?: (datum: Datum, index: number, data: Datum[]) => boolean;
+	/**
+ * For the Area shape, specifies the x accessor function for a datum, which defaults to `d => d[0]`.
+ * Alternatively this may be a constant x value.
+ */
+	x: NumberAccessor<Datum> | number;
+	/**
+ * For the Area shape, specifies the accessor function (or constant value) which generates
+ * the "lower" area bound to which "belowAreaProps" and "clipBelow" props apply. Defaults to `d => 0`.
+ */
+	y0: NumberAccessor<Datum> | number;
+	/**
+ * For the Area shape, specifies the accessor function (or constant value) which generates
+ * the "upper" area bound to which "aboveAreaProps" and "clipAbove" props apply. Defaults to `d => d[1]`.
+ */
+	y1: NumberAccessor<Datum> | number;
+	/** Additional props passed to the "above" Area shape. */
+	aboveAreaProps?: AreaProps<Datum>;
+	/** Additional props passed to the "below" Area shape. */
+	belowAreaProps?: AreaProps<Datum>;
+};
+
+export default function Threshold<Datum>({
+	className,
+	curve,
+	clipAboveTo,
+	clipBelowTo,
+	data,
+	defined,
+	x,
+	y0,
+	y1,
+	aboveAreaProps,
+	belowAreaProps,
+	id,
+}: ThresholdProps<Datum>) {
+	const generatedId = useStableId('visx-threshold');
+	const thresholdId = id ?? generatedId;
+	return <g className={cx('visx-threshold', className)}>
+		<Area curve={curve} data={data} x={x} y1={y1} defined={defined}>
+			{({ path }) => {
+				// TS cannot infer the correct method overload
+				let belowPath = null;
+				let abovePath = null;
+				if (typeof clipBelowTo === 'number') belowPath = path.y0(clipBelowTo)(data);
+				else belowPath = path.y0(clipBelowTo)(data);
+				if (typeof clipAboveTo === 'number') abovePath = path.y0(clipAboveTo)(data);
+				else abovePath = path.y0(clipAboveTo)(data);
+
+				return <g>
+					<ClipPath id={`threshold-clip-below-${thresholdId}`}>
+						<path d={belowPath || ''} />
+					</ClipPath>
+					<ClipPath id={`threshold-clip-above-${thresholdId}`}>
+						<path d={abovePath || ''} />
+					</ClipPath>
+				</g>;
+			}}
+		</Area>
+		<Area
+			curve={curve}
+			data={data}
+			defined={defined}
+			x={x}
+			y0={y0}
+			y1={y1}
+			strokeWidth={0}
+			clipPath={`url(#threshold-clip-below-${thresholdId})`}
+			{...belowAreaProps}
+		/>
+		<Area
+			curve={curve}
+			data={data}
+			defined={defined}
+			x={x}
+			y0={y0}
+			y1={y1}
+			strokeWidth={0}
+			clipPath={`url(#threshold-clip-above-${thresholdId})`}
+			{...aboveAreaProps}
+		/>
+	</g>;
+}

package/src/threshold/Threshold.tsrx.d.ts

@@ -0,0 +1,45 @@
+// Generated by scripts/generate-tsrx-types.mjs.
+import type { SVGProps } from 'react';
+import type { AreaProps as AreaOwnProps } from '@octanejs/visx/shape';
+type AreaProps<Datum> = AreaOwnProps<Datum> & Omit<SVGProps<SVGPathElement>, keyof AreaOwnProps<Datum>>;
+type NumberAccessor<Datum> = (datum: Datum, index: number, data: Datum[]) => number;
+export type ThresholdProps<Datum> = {
+    /** className applied to container g element. */
+    className?: string;
+    /** Sets the curve factory (from @octanejs/visx/curve or d3-curve) for the area generator. Defaults to curveLinear. */
+    curve?: AreaProps<Datum>['curve'];
+    /** Specifies a constant value, or an accessor called per datum, above which the *upper area* is clipped. */
+    clipAboveTo: NumberAccessor<Datum> | number;
+    /** Specifies a constant value, or an accessor called per datum, below which the *lower area* is clipped. */
+    clipBelowTo: NumberAccessor<Datum> | number;
+    /** id for this threshold. If not set, multiple Threshold's on a page may conflict and interfere with each other. */
+    id?: string;
+    /** Array of data for which to generate a threshold area shape. */
+    data: Datum[];
+    /**
+ * The defined accessor for the shape. The final area shape includes all points for which this
+ * function returns true. By default all points are defined.
+ */
+    defined?: (datum: Datum, index: number, data: Datum[]) => boolean;
+    /**
+ * For the Area shape, specifies the x accessor function for a datum, which defaults to `d => d[0]`.
+ * Alternatively this may be a constant x value.
+ */
+    x: NumberAccessor<Datum> | number;
+    /**
+ * For the Area shape, specifies the accessor function (or constant value) which generates
+ * the "lower" area bound to which "belowAreaProps" and "clipBelow" props apply. Defaults to `d => 0`.
+ */
+    y0: NumberAccessor<Datum> | number;
+    /**
+ * For the Area shape, specifies the accessor function (or constant value) which generates
+ * the "upper" area bound to which "aboveAreaProps" and "clipAbove" props apply. Defaults to `d => d[1]`.
+ */
+    y1: NumberAccessor<Datum> | number;
+    /** Additional props passed to the "above" Area shape. */
+    aboveAreaProps?: AreaProps<Datum>;
+    /** Additional props passed to the "below" Area shape. */
+    belowAreaProps?: AreaProps<Datum>;
+};
+export default function Threshold<Datum>({ className, curve, clipAboveTo, clipBelowTo, data, defined, x, y0, y1, aboveAreaProps, belowAreaProps, id, }: ThresholdProps<Datum>): import("react").JSX.Element;
+export {};

package/src/threshold/index.ts

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

package/src/tooltip/Portal.tsrx

@@ -0,0 +1,27 @@
+import { createPortal, useEffect, useState } from 'octane';
+import type { ReactNode } from 'react';
+
+export type PortalProps = {
+	/** Optional z-index to set on the Portal. */
+	zIndex?: number | string;
+	/** Content to render in the Portal. */
+	children: NonNullable<ReactNode>;
+};
+
+/** Render within a portal using a declarative component API. */
+export default function Portal({ zIndex, children }: PortalProps) {
+	const [node, setNode] = useState<HTMLDivElement | null>(null);
+
+	useEffect(() => {
+		if (typeof document === 'undefined' || !document.body) return;
+		const target = document.createElement('div');
+		if (zIndex != null) target.style.zIndex = `${zIndex}`;
+		document.body.append(target);
+		setNode(target);
+		return () => {
+			target.remove();
+		};
+	}, [zIndex]);
+
+	return node ? createPortal(children, node) : null;
+}

package/src/tooltip/Portal.tsrx.d.ts

@@ -0,0 +1,10 @@
+// Generated by scripts/generate-tsrx-types.mjs.
+import type { ReactNode } from 'react';
+export type PortalProps = {
+    /** Optional z-index to set on the Portal. */
+    zIndex?: number | string;
+    /** Content to render in the Portal. */
+    children: NonNullable<ReactNode>;
+};
+/** Render within a portal using a declarative component API. */
+export default function Portal({ zIndex, children }: PortalProps): import("octane").PortalDescriptor | null;

package/src/tooltip/context/TooltipPositionContext.tsrx

@@ -0,0 +1,16 @@
+import { createContext, useContext } from 'octane';
+
+export type TooltipPositionContextType = {
+	isFlippedVertically: boolean;
+	isFlippedHorizontally: boolean;
+};
+
+const TooltipPositionContext = createContext<TooltipPositionContextType>({
+	isFlippedVertically: false,
+	isFlippedHorizontally: false,
+});
+
+export const TooltipPositionProvider = TooltipPositionContext.Provider;
+export const TooltipPositionConsumer = TooltipPositionContext.Consumer;
+
+export const useTooltipPosition = () => useContext(TooltipPositionContext);

package/src/tooltip/context/TooltipPositionContext.tsrx.d.ts

@@ -0,0 +1,11 @@
+// Generated by scripts/generate-tsrx-types.mjs.
+export type TooltipPositionContextType = {
+    isFlippedVertically: boolean;
+    isFlippedHorizontally: boolean;
+};
+export declare const TooltipPositionProvider: import("octane").ComponentBody<{
+    value: TooltipPositionContextType;
+    children?: any;
+}, any>;
+export declare const TooltipPositionConsumer: any;
+export declare const useTooltipPosition: () => TooltipPositionContextType;