@cronus-ui/ui 0.6.0

package/dist/charts/radar-axis.js

@@ -0,0 +1,24 @@
+"use client";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { motion } from "motion/react";
+import { radarCssVars, useRadarStable } from "./radar-context.js";
+export function RadarAxis({ stroke = radarCssVars.border, strokeOpacity = 0.6, className = "", }) {
+    const { metrics, radius, getAngle, animate } = useRadarStable();
+    // Animation delay base
+    const axisBaseDelay = 0;
+    return (_jsx("g", { className: className, children: metrics.map((metric, i) => {
+            const angle = getAngle(i);
+            const targetX = radius * Math.cos(angle);
+            const targetY = radius * Math.sin(angle);
+            return (_jsx(motion.line, { animate: { x2: targetX, y2: targetY }, initial: animate ? { x2: 0, y2: 0 } : { x2: targetX, y2: targetY }, stroke: stroke, strokeOpacity: strokeOpacity, strokeWidth: 1, transition: {
+                    type: "spring",
+                    stiffness: 80,
+                    damping: 15,
+                    mass: 1,
+                    delay: animate ? axisBaseDelay + i * 0.05 : 0,
+                }, x1: 0, y1: 0 }, `axis-${metric.key}`));
+        }) }));
+}
+RadarAxis.displayName = "RadarAxis";
+export default RadarAxis;
+//# sourceMappingURL=radar-axis.js.map

package/dist/charts/radar-chart.d.ts

@@ -0,0 +1,36 @@
+import type { Transition } from "motion/react";
+import { type ReactNode } from "react";
+import { type RadarData, type RadarMetric } from "./radar-context.js";
+export interface RadarChartProps {
+    /** Data array - each item represents a data series (polygon) */
+    data: RadarData[];
+    /** Metrics to display on the radar */
+    metrics: RadarMetric[];
+    /** Chart size in pixels. If not provided, uses parent container size */
+    size?: number;
+    /** Number of concentric grid circles. Default: 5 */
+    levels?: number;
+    /** Margin around the chart. Default: 60 */
+    margin?: number;
+    /** Enable animations. Default: true */
+    animate?: boolean;
+    /** Enter animation budget in ms. Default: 1100 */
+    enterDurationMs?: number;
+    /** Scales stagger timing (1 = default). */
+    staggerScale?: number;
+    /** Motion enter transition (spring or cubic-bezier tween). */
+    enterTransition?: Transition;
+    /** Changes when motion settings change — replays enter animations. */
+    motionReplayKey?: string;
+    /** Controlled hover state - index of hovered area */
+    hoveredIndex?: number | null;
+    /** Callback when hover state changes */
+    onHoverChange?: (index: number | null) => void;
+    /** Additional class name for the container */
+    className?: string;
+    /** Child components (RadarGrid, RadarAxis, RadarLabels, RadarArea) */
+    children: ReactNode;
+}
+export declare function RadarChart({ data, metrics, size: fixedSize, levels, margin, animate, enterDurationMs, staggerScale, enterTransition, motionReplayKey, className, hoveredIndex, onHoverChange, children, }: RadarChartProps): import("react").JSX.Element;
+export default RadarChart;
+//# sourceMappingURL=radar-chart.d.ts.map

package/dist/charts/radar-chart.js

@@ -0,0 +1,89 @@
+"use client";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Group } from "@visx/group";
+import { ParentSize } from "@visx/responsive";
+import { scaleLinear } from "@visx/scale";
+import { useCallback, useState } from "react";
+import { cn } from "../lib/cn.js";
+import { defaultRadarColors, RadarProvider, } from "./radar-context.js";
+function RadarChartInner({ width, height, data, metrics, levels, margin, animate, enterDurationMs, staggerScale, enterTransition, motionReplayKey, children, hoveredIndexProp, onHoverChange, }) {
+    const [internalHoveredIndex, setInternalHoveredIndex] = useState(null);
+    // Use controlled or uncontrolled hover state
+    const isControlled = hoveredIndexProp !== undefined;
+    const hoveredIndex = isControlled ? hoveredIndexProp : internalHoveredIndex;
+    const setHoveredIndex = useCallback((index) => {
+        if (isControlled) {
+            onHoverChange?.(index);
+        }
+        else {
+            setInternalHoveredIndex(index);
+        }
+    }, [isControlled, onHoverChange]);
+    // Use the smaller dimension
+    const size = Math.min(width, height);
+    const radius = (size - margin * 2) / 2;
+    // Scale for converting values (0-100) to radius
+    const yScale = useCallback((value) => {
+        const scale = scaleLinear({
+            range: [0, radius],
+            domain: [0, 100],
+        });
+        return scale(value) ?? 0;
+    }, [radius]);
+    // Get angle for a metric index (rotated so first metric is at top)
+    const getAngle = useCallback((metricIndex) => {
+        const step = (Math.PI * 2) / metrics.length;
+        const angleOffset = -Math.PI / 2; // Rotate so first axis is at top
+        return metricIndex * step + angleOffset;
+    }, [metrics.length]);
+    // Get x,y position for a metric at a given value
+    const getPointPosition = useCallback((metricIndex, value) => {
+        const angle = getAngle(metricIndex);
+        const r = yScale(value);
+        return {
+            x: r * Math.cos(angle),
+            y: r * Math.sin(angle),
+        };
+    }, [getAngle, yScale]);
+    // Get color for a data index
+    const getColor = useCallback((index) => {
+        const item = data[index];
+        if (item?.color) {
+            return item.color;
+        }
+        return defaultRadarColors[index % defaultRadarColors.length];
+    }, [data]);
+    // Early return if dimensions not ready
+    if (size < 10) {
+        return null;
+    }
+    const contextValue = {
+        data,
+        metrics,
+        size,
+        radius,
+        levels,
+        hoveredIndex,
+        setHoveredIndex,
+        animate,
+        enterDurationMs,
+        staggerScale,
+        enterTransition,
+        motionReplayKey,
+        getColor,
+        getAngle,
+        getPointPosition,
+        yScale,
+    };
+    return (_jsx(RadarProvider, { value: contextValue, children: _jsx("svg", { "aria-hidden": "true", height: size, style: { overflow: "visible" }, width: size, children: _jsx(Group, { left: size / 2, top: size / 2, children: children }) }) }));
+}
+export function RadarChart({ data, metrics, size: fixedSize, levels = 5, margin = 60, animate = true, enterDurationMs = 1100, staggerScale = 1, enterTransition, motionReplayKey = "", className = "", hoveredIndex, onHoverChange, children, }) {
+    // If fixed size is provided, use it directly
+    if (fixedSize) {
+        return (_jsx("div", { "data-slot": "radar-chart", className: cn("relative flex items-center justify-center", className), style: { width: fixedSize, height: fixedSize }, children: _jsx(RadarChartInner, { animate: animate, data: data, enterDurationMs: enterDurationMs, enterTransition: enterTransition, height: fixedSize, hoveredIndexProp: hoveredIndex, levels: levels, margin: margin, metrics: metrics, motionReplayKey: motionReplayKey, onHoverChange: onHoverChange, staggerScale: staggerScale, width: fixedSize, children: children }) }));
+    }
+    // Otherwise use ParentSize for responsive sizing
+    return (_jsx("div", { className: cn("relative aspect-square w-full", className), children: _jsx(ParentSize, { debounceTime: 10, children: ({ width, height }) => (_jsx(RadarChartInner, { animate: animate, data: data, enterDurationMs: enterDurationMs, enterTransition: enterTransition, height: height, hoveredIndexProp: hoveredIndex, levels: levels, margin: margin, metrics: metrics, motionReplayKey: motionReplayKey, onHoverChange: onHoverChange, staggerScale: staggerScale, width: width, children: children })) }) }));
+}
+export default RadarChart;
+//# sourceMappingURL=radar-chart.js.map

package/dist/charts/radar-context.d.ts

@@ -0,0 +1,68 @@
+import type { Transition } from "motion/react";
+import { type ReactNode } from "react";
+export declare const radarCssVars: {
+    background: string;
+    foreground: string;
+    foregroundMuted: string;
+    label: string;
+    grid: string;
+    border: string;
+    area1: string;
+    area2: string;
+    area3: string;
+    area4: string;
+    area5: string;
+};
+export declare const defaultRadarColors: string[];
+export interface RadarMetric {
+    /** Unique key for the metric */
+    key: string;
+    /** Display label for the metric */
+    label: string;
+}
+export interface RadarData {
+    /** Display label for this data series */
+    label: string;
+    /** Color for this data series (defaults to chart-1 through chart-5) */
+    color?: string;
+    /** Metric values (key -> value, normalized 0-100) */
+    values: Record<string, number>;
+}
+export interface RadarHoverContextValue {
+    hoveredIndex: number | null;
+    setHoveredIndex: (index: number | null) => void;
+}
+export interface RadarStableContextValue {
+    data: RadarData[];
+    metrics: RadarMetric[];
+    size: number;
+    radius: number;
+    levels: number;
+    animate: boolean;
+    /** Total enter animation budget in ms */
+    enterDurationMs: number;
+    /** Scales stagger delays between grid / campaigns / metrics */
+    staggerScale: number;
+    /** Motion enter transition (spring or cubic-bezier tween). */
+    enterTransition?: Transition;
+    /** Changes when motion settings change — replays enter animations. */
+    motionReplayKey: string;
+    getColor: (index: number) => string;
+    getAngle: (metricIndex: number) => number;
+    getPointPosition: (metricIndex: number, value: number) => {
+        x: number;
+        y: number;
+    };
+    yScale: (value: number) => number;
+}
+export type RadarContextValue = RadarStableContextValue & RadarHoverContextValue;
+declare const RadarStableContext: import("react").Context<RadarStableContextValue | null>;
+export declare function RadarProvider({ children, value, }: {
+    children: ReactNode;
+    value: RadarContextValue;
+}): import("react").JSX.Element;
+export declare function useRadarStable(): RadarStableContextValue;
+export declare function useRadarHover(): RadarHoverContextValue;
+export declare function useRadar(): RadarContextValue;
+export default RadarStableContext;
+//# sourceMappingURL=radar-context.d.ts.map

package/dist/charts/radar-context.js

@@ -0,0 +1,87 @@
+"use client";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { createContext, useContext, useMemo } from "react";
+// CSS variable references for radar chart theming
+export const radarCssVars = {
+    background: "var(--chart-background)",
+    foreground: "var(--chart-foreground)",
+    foregroundMuted: "var(--chart-foreground-muted)",
+    label: "var(--chart-label, oklch(0.65 0.01 260))",
+    grid: "var(--chart-grid)",
+    border: "var(--border)",
+    // Default radar colors from chart palette
+    area1: "var(--chart-1)",
+    area2: "var(--chart-2)",
+    area3: "var(--chart-3)",
+    area4: "var(--chart-4)",
+    area5: "var(--chart-5)",
+};
+// Default radar color palette
+export const defaultRadarColors = [
+    radarCssVars.area1,
+    radarCssVars.area2,
+    radarCssVars.area3,
+    radarCssVars.area4,
+    radarCssVars.area5,
+];
+const RadarStableContext = createContext(null);
+const RadarHoverContext = createContext(null);
+export function RadarProvider({ children, value, }) {
+    const stable = useMemo(() => ({
+        data: value.data,
+        metrics: value.metrics,
+        size: value.size,
+        radius: value.radius,
+        levels: value.levels,
+        animate: value.animate,
+        enterDurationMs: value.enterDurationMs,
+        staggerScale: value.staggerScale,
+        enterTransition: value.enterTransition,
+        motionReplayKey: value.motionReplayKey,
+        getColor: value.getColor,
+        getAngle: value.getAngle,
+        getPointPosition: value.getPointPosition,
+        yScale: value.yScale,
+    }), [
+        value.data,
+        value.metrics,
+        value.size,
+        value.radius,
+        value.levels,
+        value.animate,
+        value.enterDurationMs,
+        value.staggerScale,
+        value.enterTransition,
+        value.motionReplayKey,
+        value.getColor,
+        value.getAngle,
+        value.getPointPosition,
+        value.yScale,
+    ]);
+    const hover = useMemo(() => ({
+        hoveredIndex: value.hoveredIndex,
+        setHoveredIndex: value.setHoveredIndex,
+    }), [value.hoveredIndex, value.setHoveredIndex]);
+    return (_jsx(RadarStableContext.Provider, { value: stable, children: _jsx(RadarHoverContext.Provider, { value: hover, children: children }) }));
+}
+export function useRadarStable() {
+    const context = useContext(RadarStableContext);
+    if (!context) {
+        throw new Error("useRadarStable must be used within a RadarProvider. " +
+            "Make sure your component is wrapped in <RadarChart>.");
+    }
+    return context;
+}
+export function useRadarHover() {
+    const context = useContext(RadarHoverContext);
+    if (!context) {
+        throw new Error("useRadarHover must be used within a RadarProvider. " +
+            "Make sure your component is wrapped in <RadarChart>.");
+    }
+    return context;
+}
+export function useRadar() {
+    return { ...useRadarStable(), ...useRadarHover() };
+}
+export default RadarStableContext;
+//# sourceMappingURL=radar-context.js.map

package/dist/charts/radar-grid.d.ts

@@ -0,0 +1,16 @@
+export interface RadarGridProps {
+    /** Show level value labels. Default: true */
+    showLabels?: boolean;
+    /** Grid line stroke color. Default: var(--border) */
+    stroke?: string;
+    /** Grid line stroke opacity. Default: 0.6 */
+    strokeOpacity?: number;
+    /** Additional class name */
+    className?: string;
+}
+export declare function RadarGrid({ showLabels, stroke, strokeOpacity, className, }: RadarGridProps): import("react").JSX.Element;
+export declare namespace RadarGrid {
+    var displayName: string;
+}
+export default RadarGrid;
+//# sourceMappingURL=radar-grid.d.ts.map

package/dist/charts/radar-grid.js

@@ -0,0 +1,40 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { scaleLinear } from "@visx/scale";
+import { LineRadial } from "@visx/shape";
+import { motion } from "motion/react";
+import { transitionWithDelay } from "./motion-utils.js";
+import { radarCssVars, useRadarStable } from "./radar-context.js";
+export function RadarGrid({ showLabels = true, stroke = radarCssVars.border, strokeOpacity = 0.6, className = "", }) {
+    const { metrics, radius, levels, animate, enterTransition, staggerScale, enterDurationMs, motionReplayKey, } = useRadarStable();
+    const durationFactor = enterDurationMs / 1100;
+    const gridStagger = 0.08 * staggerScale * durationFactor;
+    // Generate angles for the radial lines (one per metric)
+    const degrees = 360;
+    const angles = [...new Array(metrics.length + 1)].map((_, i) => ({
+        angle: i * (degrees / metrics.length) + degrees / metrics.length / 2,
+    }));
+    // Radial scale for converting degrees to radians
+    const radialScale = scaleLinear({
+        range: [0, Math.PI * 2],
+        domain: [degrees, 0],
+    });
+    const labelDelay = levels * gridStagger * 0.5;
+    return (_jsxs("g", { className: className, children: [[...new Array(levels)].map((_, i) => {
+                const targetRadius = ((i + 1) * radius) / levels;
+                return (_jsx(motion.g, { animate: { scale: 1, opacity: 1 }, initial: animate ? { scale: 0, opacity: 0 } : { scale: 1, opacity: 1 }, style: { transformOrigin: "0px 0px" }, transition: animate
+                        ? transitionWithDelay(enterTransition, i * gridStagger, {
+                            type: "spring",
+                            stiffness: 100,
+                            damping: 15,
+                            mass: 1,
+                        })
+                        : undefined, children: _jsx(LineRadial, { angle: (d) => radialScale(d.angle) ?? 0, data: angles, fill: "none", radius: targetRadius, stroke: stroke, strokeLinecap: "round", strokeOpacity: strokeOpacity, strokeWidth: 1 }) }, `grid-${i}-${motionReplayKey}`));
+            }), showLabels &&
+                [...new Array(levels)].map((_, i) => (_jsx(motion.g, { animate: { opacity: 1 }, initial: animate ? { opacity: 0 } : { opacity: 1 }, transition: animate
+                        ? transitionWithDelay(enterTransition, labelDelay + i * 0.06 * durationFactor)
+                        : undefined, children: _jsx("text", { dominantBaseline: "middle", fill: radarCssVars.foregroundMuted, fontSize: 9, textAnchor: "start", x: 4, y: -((i + 1) * radius) / levels, children: ((i + 1) * 100) / levels }) }, `level-label-${i}-${motionReplayKey}`)))] }));
+}
+RadarGrid.displayName = "RadarGrid";
+export default RadarGrid;
+//# sourceMappingURL=radar-grid.js.map

package/dist/charts/radar-labels.d.ts

@@ -0,0 +1,16 @@
+export interface RadarLabelsProps {
+    /** Distance from the chart edge. Default: 24 */
+    offset?: number;
+    /** Font size for labels. Default: 11 */
+    fontSize?: number;
+    /** Enable interactive hover on labels. Default: false */
+    interactive?: boolean;
+    /** Additional class name */
+    className?: string;
+}
+export declare function RadarLabels({ offset, fontSize, interactive, className, }: RadarLabelsProps): import("react").JSX.Element;
+export declare namespace RadarLabels {
+    var displayName: string;
+}
+export default RadarLabels;
+//# sourceMappingURL=radar-labels.d.ts.map

package/dist/charts/radar-labels.js

@@ -0,0 +1,29 @@
+"use client";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { motion } from "motion/react";
+import { radarCssVars, useRadarStable } from "./radar-context.js";
+export function RadarLabels({ offset = 24, fontSize = 11, interactive = false, className = "", }) {
+    const { metrics, radius, levels, getAngle, animate } = useRadarStable();
+    // Label animation delay (starts after grid begins)
+    const gridStagger = 0.08;
+    const labelDelay = levels * gridStagger * 0.5;
+    const labelRadius = radius + offset;
+    return (_jsx("g", { className: className, children: metrics.map((metric, i) => {
+            const angle = getAngle(i);
+            const x = labelRadius * Math.cos(angle);
+            const y = labelRadius * Math.sin(angle);
+            return (_jsx(motion.g, { animate: { opacity: 1, x, y }, initial: animate ? { opacity: 0, x: 0, y: 0 } : { opacity: 1, x, y }, transition: {
+                    opacity: {
+                        duration: 0.5,
+                        delay: animate ? labelDelay + i * 0.08 : 0,
+                    },
+                    x: { type: "spring", stiffness: 80, damping: 15 },
+                    y: { type: "spring", stiffness: 80, damping: 15 },
+                }, children: _jsx("text", { className: interactive
+                        ? "cursor-pointer transition-opacity duration-150 hover:opacity-100"
+                        : "", dominantBaseline: "middle", fontSize: fontSize, fontWeight: 500, opacity: interactive ? 0.8 : 1, style: { fill: radarCssVars.label }, textAnchor: "middle", x: 0, y: 0, children: metric.label }) }, `label-${metric.key}`));
+        }) }));
+}
+RadarLabels.displayName = "RadarLabels";
+export default RadarLabels;
+//# sourceMappingURL=radar-labels.js.map

package/dist/charts/reference-area-config.d.ts

@@ -0,0 +1,10 @@
+import { type ReactNode } from "react";
+export interface ReferenceAreaConfig {
+    yAxisId: string;
+    y1?: number;
+    y2?: number;
+    axisLabelColor?: string;
+}
+/** Collect {@link ReferenceArea} props from chart children for axis label styling. */
+export declare function extractReferenceAreaConfigs(children: ReactNode): ReferenceAreaConfig[];
+//# sourceMappingURL=reference-area-config.d.ts.map

package/dist/charts/reference-area-config.js

@@ -0,0 +1,39 @@
+import { Children, isValidElement } from "react";
+import { normalizeYAxisId } from "./y-axis-scales.js";
+function getChildComponentName(child) {
+    const childType = child.type;
+    return typeof child.type === "function" ? childType.displayName || childType.name || "" : "";
+}
+function isReferenceAreaElement(child) {
+    return getChildComponentName(child) === "ReferenceArea";
+}
+/** Collect {@link ReferenceArea} props from chart children for axis label styling. */
+export function extractReferenceAreaConfigs(children) {
+    const configs = [];
+    const visit = (node) => {
+        Children.forEach(node, (child) => {
+            if (!isValidElement(child)) {
+                return;
+            }
+            if (isReferenceAreaElement(child)) {
+                const props = child.props;
+                if (props) {
+                    configs.push({
+                        yAxisId: normalizeYAxisId(props.yAxisId),
+                        y1: props.y1,
+                        y2: props.y2,
+                        axisLabelColor: props.axisLabelColor,
+                    });
+                }
+                return;
+            }
+            const childProps = child.props;
+            if (childProps?.children) {
+                visit(childProps.children);
+            }
+        });
+    };
+    visit(children);
+    return configs;
+}
+//# sourceMappingURL=reference-area-config.js.map

package/dist/charts/reference-area-geometry.d.ts

@@ -0,0 +1,23 @@
+export type ReferenceAreaIfOverflow = "hidden" | "visible" | "discard";
+export interface ReferenceAreaRect {
+    x: number;
+    y: number;
+    width: number;
+    height: number;
+}
+export interface ComputeReferenceAreaRectOptions {
+    innerWidth: number;
+    innerHeight: number;
+    x1?: Date | number;
+    x2?: Date | number;
+    y1?: number;
+    y2?: number;
+    ifOverflow?: ReferenceAreaIfOverflow;
+    xScale: (value: Date) => number;
+    yScale: (value: number) => number;
+}
+/** Map data bounds to plot pixels for a reference rectangle. */
+export declare function computeReferenceAreaRect(options: ComputeReferenceAreaRectOptions): ReferenceAreaRect | null;
+/** Inclusive data range for axis label highlighting. */
+export declare function resolveReferenceDataRange(y1: number | undefined, y2: number | undefined, domain: [number, number]): [number, number];
+//# sourceMappingURL=reference-area-geometry.d.ts.map

package/dist/charts/reference-area-geometry.js

@@ -0,0 +1,68 @@
+function toDate(value) {
+    return value instanceof Date ? value : new Date(value);
+}
+function resolveXPixel(xScale, value, fallback) {
+    if (value == null) {
+        return fallback;
+    }
+    return xScale(toDate(value));
+}
+function resolveYPixel(yScale, value, fallback) {
+    if (value == null) {
+        return fallback;
+    }
+    return yScale(value);
+}
+function clampRectToPlot(rect, innerWidth, innerHeight) {
+    const x1 = Math.max(0, rect.x);
+    const y1 = Math.max(0, rect.y);
+    const x2 = Math.min(innerWidth, rect.x + rect.width);
+    const y2 = Math.min(innerHeight, rect.y + rect.height);
+    const width = x2 - x1;
+    const height = y2 - y1;
+    if (width <= 0 || height <= 0) {
+        return null;
+    }
+    return { x: x1, y: y1, width, height };
+}
+function isFullyInsidePlot(rect, innerWidth, innerHeight) {
+    return (rect.x >= 0 &&
+        rect.y >= 0 &&
+        rect.x + rect.width <= innerWidth &&
+        rect.y + rect.height <= innerHeight);
+}
+/** Map data bounds to plot pixels for a reference rectangle. */
+export function computeReferenceAreaRect(options) {
+    const { innerWidth, innerHeight, x1, x2, y1, y2, ifOverflow = "hidden", xScale, yScale, } = options;
+    if (innerWidth <= 0 || innerHeight <= 0) {
+        return null;
+    }
+    const left = resolveXPixel(xScale, x1, 0);
+    const right = resolveXPixel(xScale, x2, innerWidth);
+    const top = resolveYPixel(yScale, y1, 0);
+    const bottom = resolveYPixel(yScale, y2, innerHeight);
+    const x = Math.min(left, right);
+    const y = Math.min(top, bottom);
+    const width = Math.abs(right - left);
+    const height = Math.abs(bottom - top);
+    if (width <= 0 || height <= 0) {
+        return null;
+    }
+    const rect = { x, y, width, height };
+    if (ifOverflow === "visible") {
+        return rect;
+    }
+    if (ifOverflow === "discard") {
+        return isFullyInsidePlot(rect, innerWidth, innerHeight) ? rect : null;
+    }
+    return clampRectToPlot(rect, innerWidth, innerHeight);
+}
+/** Inclusive data range for axis label highlighting. */
+export function resolveReferenceDataRange(y1, y2, domain) {
+    const dMin = Math.min(domain[0], domain[1]);
+    const dMax = Math.max(domain[0], domain[1]);
+    const low = y1 ?? dMin;
+    const high = y2 ?? dMax;
+    return [Math.min(low, high), Math.max(low, high)];
+}
+//# sourceMappingURL=reference-area-geometry.js.map

package/dist/charts/reference-area-registration-context.d.ts

@@ -0,0 +1,8 @@
+import type { ReferenceAreaConfig } from "./reference-area-config.js";
+export interface ReferenceAreaRegistrationContextValue {
+    registerReferenceArea: (id: string, config: ReferenceAreaConfig) => void;
+    unregisterReferenceArea: (id: string) => void;
+}
+export declare const ReferenceAreaRegistrationContext: import("react").Context<ReferenceAreaRegistrationContextValue | null>;
+export declare function useReferenceAreaRegistration(): ReferenceAreaRegistrationContextValue | null;
+//# sourceMappingURL=reference-area-registration-context.d.ts.map

package/dist/charts/reference-area-registration-context.js

@@ -0,0 +1,7 @@
+"use client";
+import { createContext, useContext } from "react";
+export const ReferenceAreaRegistrationContext = createContext(null);
+export function useReferenceAreaRegistration() {
+    return useContext(ReferenceAreaRegistrationContext);
+}
+//# sourceMappingURL=reference-area-registration-context.js.map

package/dist/charts/reference-area.d.ts

@@ -0,0 +1,52 @@
+import { type PatternPresetId } from "./pattern-preset.js";
+import { type ReferenceAreaIfOverflow } from "./reference-area-geometry.js";
+export type ReferenceAreaStrokeStyle = "solid" | "dashed";
+export interface ReferenceAreaProps {
+    /** Lower Y data bound (extends to plot top when omitted). */
+    y1?: number;
+    /** Upper Y data bound (extends to plot bottom when omitted). */
+    y2?: number;
+    /** Starting X data coordinate (extends to plot left when omitted). */
+    x1?: Date | number;
+    /** Ending X data coordinate (extends to plot right when omitted). */
+    x2?: Date | number;
+    /** Y-scale group id. Default: `"left"`. */
+    yAxisId?: string | number;
+    /** Solid fill when `pattern` is `"none"`. */
+    fill?: string;
+    fillOpacity?: number;
+    /** Pattern preset. `"none"` uses solid `fill`. */
+    pattern?: PatternPresetId;
+    /** Pattern stroke / tile color. */
+    patternColor?: string;
+    patternScale?: number;
+    patternStrokeWidth?: number;
+    patternRadius?: number;
+    patternComplement?: boolean;
+    patternFill?: string;
+    patternDotFill?: boolean;
+    patternTileBackground?: string;
+    stroke?: string;
+    strokeWidth?: number;
+    strokeStyle?: ReferenceAreaStrokeStyle;
+    /** Dash array when `strokeStyle` is `"dashed"`. Default: `"4,4"`. */
+    strokeDasharray?: string;
+    /** Fade fill and edge lines at left/right. Default: true */
+    fadeEdges?: boolean;
+    /** Horizontal fade zone as % of plot width per edge. Default: 10 */
+    fadeEdgesLength?: number;
+    /** Y-axis tick label color for values inside this band. */
+    axisLabelColor?: string;
+    /** Inward bracket markers at the horizontal center of the band. */
+    showMarkers?: boolean;
+    markerColor?: string;
+    markerSize?: number;
+    ifOverflow?: ReferenceAreaIfOverflow;
+    className?: string;
+}
+export declare function ReferenceArea({ y1, y2, x1, x2, yAxisId, fill, fillOpacity, pattern, patternColor, patternScale, patternStrokeWidth, patternRadius, patternComplement, patternFill, patternDotFill, patternTileBackground, stroke, strokeWidth, strokeStyle, strokeDasharray, fadeEdges, fadeEdgesLength, axisLabelColor, showMarkers, markerColor, markerSize, ifOverflow, className, }: ReferenceAreaProps): import("react").JSX.Element | null;
+export declare namespace ReferenceArea {
+    var displayName: string;
+}
+export default ReferenceArea;
+//# sourceMappingURL=reference-area.d.ts.map