@cronus-ui/ui 0.6.0

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

@@ -0,0 +1,31 @@
+/** Consumer-facing fetch / display status on time-series charts. */
+export type ChartStatus = "loading" | "ready";
+/** Loading animation style: the default traveling pulse, or a diagonal
+ * shimmer that sweeps across the skeleton. */
+export type LoadingStyle = "pulse" | "sweep";
+/**
+ * Internal visual lifecycle phase. Forward and reverse transitions add
+ * intermediate phases in later stack branches.
+ */
+export type ChartPhase = "loading" | "exiting" | "gridTweenReady" | "revealing" | "ready" | "exitingReady" | "gridTweenLoading" | "revealingLoading";
+export declare const DEFAULT_CHART_STATUS: ChartStatus;
+/** Default Y-domain tween when transitioning loading ↔ ready (ms). */
+export declare const DEFAULT_Y_DOMAIN_TWEEN_MS = 500;
+/** Relative domain delta below which Y tween may be skipped (see plan). */
+export declare const Y_DOMAIN_TWEEN_SKIP_THRESHOLD = 0.02;
+/** Resting phase for a given status before transition orchestration runs. */
+export declare function resolveRestingChartPhase(status: ChartStatus): ChartPhase;
+export declare function isChartInteractionPhase(phase: ChartPhase): boolean;
+export declare const DEFAULT_CHART_LIFECYCLE: {
+    readonly chartPhase: "ready";
+    readonly chartStatus: "ready";
+    readonly loadingLabel: undefined;
+    readonly yDomainTweenDuration: 500;
+    readonly yDomainSkeletonByAxis: {
+        readonly left: [number, number];
+    };
+    readonly yDomainTargetByAxis: {
+        readonly left: [number, number];
+    };
+};
+//# sourceMappingURL=chart-phase.d.ts.map

package/dist/charts/chart-phase.js

@@ -0,0 +1,21 @@
+export const DEFAULT_CHART_STATUS = "ready";
+/** Default Y-domain tween when transitioning loading ↔ ready (ms). */
+export const DEFAULT_Y_DOMAIN_TWEEN_MS = 500;
+/** Relative domain delta below which Y tween may be skipped (see plan). */
+export const Y_DOMAIN_TWEEN_SKIP_THRESHOLD = 0.02;
+/** Resting phase for a given status before transition orchestration runs. */
+export function resolveRestingChartPhase(status) {
+    return status === "loading" ? "loading" : "ready";
+}
+export function isChartInteractionPhase(phase) {
+    return phase === "ready";
+}
+export const DEFAULT_CHART_LIFECYCLE = {
+    chartPhase: "ready",
+    chartStatus: "ready",
+    loadingLabel: undefined,
+    yDomainTweenDuration: DEFAULT_Y_DOMAIN_TWEEN_MS,
+    yDomainSkeletonByAxis: { left: [0, 100] },
+    yDomainTargetByAxis: { left: [0, 100] },
+};
+//# sourceMappingURL=chart-phase.js.map

package/dist/charts/chart-reveal-clip.d.ts

@@ -0,0 +1,24 @@
+import type { Transition } from "motion/react";
+export type ChartRevealClipMode = "reveal" | "conceal";
+export interface ChartRevealClipProps {
+    clipPathId: string;
+    height: number;
+    targetWidth: number;
+    enterTransition?: Transition;
+    /** Bumps when motion settings change to replay the reveal. */
+    revealEpoch: number;
+    /** Extra inset around the clip rect so edge glyphs are not cut off. */
+    padding?: number;
+    /** When false, clip stays at full width (no grow animation). */
+    animating?: boolean;
+    /** Reveal grows 0 → full; conceal shrinks full → 0 (ready → loading). */
+    mode?: ChartRevealClipMode;
+    /** Called when a conceal animation finishes. */
+    onComplete?: () => void;
+}
+/**
+ * Left-to-right clip reveal for cartesian series.
+ * Grows clip rect width from 0 → full (true LTR; scaleX is avoided — it reveals from center).
+ */
+export declare function ChartRevealClip({ clipPathId, height, targetWidth, enterTransition, revealEpoch, padding, animating, mode, onComplete, }: ChartRevealClipProps): import("react").JSX.Element;
+//# sourceMappingURL=chart-reveal-clip.d.ts.map

package/dist/charts/chart-reveal-clip.js

@@ -0,0 +1,24 @@
+"use client";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { motion } from "motion/react";
+import { clipRevealTransition } from "./animation.js";
+/**
+ * Left-to-right clip reveal for cartesian series.
+ * Grows clip rect width from 0 → full (true LTR; scaleX is avoided — it reveals from center).
+ */
+export function ChartRevealClip({ clipPathId, height, targetWidth, enterTransition, revealEpoch, padding = 0, animating = true, mode = "reveal", onComplete, }) {
+    const transition = clipRevealTransition(enterTransition);
+    const paddedWidth = Math.max(0, targetWidth + padding * 2);
+    const paddedHeight = height + padding * 2;
+    if (!animating) {
+        return (_jsx("clipPath", { id: clipPathId, children: _jsx("rect", { height: paddedHeight, width: paddedWidth, x: -padding, y: -padding }) }));
+    }
+    if (mode === "conceal") {
+        // Mirror the LTR reveal: advance the clip's left edge rightward while width
+        // shrinks (same geometry as `LineLoadingPulseStroke` exit half-cycle).
+        const rightEdge = -padding + paddedWidth;
+        return (_jsx("clipPath", { id: clipPathId, children: _jsx(motion.rect, { animate: { width: 0, x: rightEdge }, height: paddedHeight, initial: { width: paddedWidth, x: -padding }, onAnimationComplete: () => onComplete?.(), transition: transition, y: -padding }, `conceal-${revealEpoch}`) }));
+    }
+    return (_jsx("clipPath", { id: clipPathId, children: _jsx(motion.rect, { animate: { width: paddedWidth }, height: paddedHeight, initial: { width: 0 }, transition: transition, width: paddedWidth, x: -padding, y: -padding }, `reveal-${revealEpoch}`) }));
+}
+//# sourceMappingURL=chart-reveal-clip.js.map

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

@@ -0,0 +1,12 @@
+/** Sequential scale CSS variables for heatmaps, choropleths, and binned data (01 = lowest, 05 = highest). */
+export declare const CHART_SCALE_VARS: readonly ["var(--chart-scale-01)", "var(--chart-scale-02)", "var(--chart-scale-03)", "var(--chart-scale-04)", "var(--chart-scale-05)"];
+export type ChartScaleVars = typeof CHART_SCALE_VARS;
+export declare const chartScaleCssVars: {
+    readonly scale01: "var(--chart-scale-01)";
+    readonly scale02: "var(--chart-scale-02)";
+    readonly scale03: "var(--chart-scale-03)";
+    readonly scale04: "var(--chart-scale-04)";
+    readonly scale05: "var(--chart-scale-05)";
+    readonly patternColor: "var(--chart-scale-pattern-color)";
+};
+//# sourceMappingURL=chart-scale.d.ts.map

package/dist/charts/chart-scale.js

@@ -0,0 +1,17 @@
+/** Sequential scale CSS variables for heatmaps, choropleths, and binned data (01 = lowest, 05 = highest). */
+export const CHART_SCALE_VARS = [
+    "var(--chart-scale-01)",
+    "var(--chart-scale-02)",
+    "var(--chart-scale-03)",
+    "var(--chart-scale-04)",
+    "var(--chart-scale-05)",
+];
+export const chartScaleCssVars = {
+    scale01: CHART_SCALE_VARS[0],
+    scale02: CHART_SCALE_VARS[1],
+    scale03: CHART_SCALE_VARS[2],
+    scale04: CHART_SCALE_VARS[3],
+    scale05: CHART_SCALE_VARS[4],
+    patternColor: "var(--chart-scale-pattern-color)",
+};
+//# sourceMappingURL=chart-scale.js.map

package/dist/charts/chart-stat-flow.d.ts

@@ -0,0 +1,36 @@
+import { type ReactNode } from "react";
+/** Subset of `Intl.NumberFormatOptions` used by pie / ring / gauge centers. */
+export interface ChartStatFlowFormat {
+    notation?: "standard" | "compact";
+    compactDisplay?: "short" | "long";
+    minimumFractionDigits?: number;
+    maximumFractionDigits?: number;
+    minimumIntegerDigits?: number;
+    minimumSignificantDigits?: number;
+    maximumSignificantDigits?: number;
+    style?: "decimal" | "percent" | "currency";
+    currency?: string;
+    currencyDisplay?: "symbol" | "narrowSymbol" | "code" | "name";
+    unit?: string;
+    unitDisplay?: "short" | "long" | "narrow";
+}
+export declare const defaultChartStatFlowFormat: ChartStatFlowFormat;
+export interface ChartStatFlowProps {
+    value: number;
+    label: string;
+    formatOptions?: ChartStatFlowFormat;
+    prefix?: string;
+    suffix?: string;
+    valueClassName?: string;
+    labelClassName?: string;
+    icon?: ReactNode;
+}
+/**
+ * Shared value + label stack (same layout as pie / ring centers).
+ * Parent should provide flex alignment and sizing when needed.
+ */
+export declare function ChartStatFlow({ value, label, formatOptions, prefix, suffix, valueClassName, labelClassName, icon, }: ChartStatFlowProps): import("react").JSX.Element;
+export declare namespace ChartStatFlow {
+    var displayName: string;
+}
+//# sourceMappingURL=chart-stat-flow.d.ts.map

package/dist/charts/chart-stat-flow.js

@@ -0,0 +1,23 @@
+"use client";
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { useMemo } from "react";
+import { AnimatedNumber } from "../components/animated-number.js";
+import { cn } from "../lib/cn.js";
+export const defaultChartStatFlowFormat = {
+    notation: "standard",
+    maximumFractionDigits: 0,
+};
+function formatStatValue(value, formatOptions, prefix, suffix) {
+    const formatted = new Intl.NumberFormat("en-US", formatOptions).format(value);
+    return `${prefix ?? ""}${formatted}${suffix ?? ""}`;
+}
+/**
+ * Shared value + label stack (same layout as pie / ring centers).
+ * Parent should provide flex alignment and sizing when needed.
+ */
+export function ChartStatFlow({ value, label, formatOptions = defaultChartStatFlowFormat, prefix, suffix, valueClassName = "text-2xl font-medium", labelClassName = "text-xs", icon, }) {
+    const format = useMemo(() => (n) => formatStatValue(n, formatOptions, prefix, suffix), [formatOptions, prefix, suffix]);
+    return (_jsxs(_Fragment, { children: [icon ? (_jsx("div", { className: "mb-2 flex h-12 w-12 items-center justify-center rounded-full bg-muted/50", children: icon })) : null, _jsx("span", { className: cn("text-foreground tabular-nums", valueClassName), children: _jsx(AnimatedNumber, { format: format, value: value }) }), _jsx("span", { className: cn("mt-0.5 text-chart-label", labelClassName), children: label })] }));
+}
+ChartStatFlow.displayName = "ChartStatFlow";
+//# sourceMappingURL=chart-stat-flow.js.map

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

@@ -0,0 +1,43 @@
+import type { TransformMatrix } from "@visx/zoom";
+import type { FeatureCollection, Geometry } from "geojson";
+import type { Transition } from "motion/react";
+import React, { type ReactNode } from "react";
+import { type ChoroplethFeatureProperties, type Margin } from "./choropleth-context.js";
+export interface ChoroplethChartProps {
+    /** GeoJSON FeatureCollection data */
+    data: FeatureCollection<Geometry, ChoroplethFeatureProperties>;
+    /** Chart margins */
+    margin?: Partial<Margin>;
+    /** Animation duration in milliseconds. Default: 800 */
+    animationDuration?: number;
+    /** Motion enter transition (spring or cubic-bezier tween). */
+    enterTransition?: Transition;
+    /** Signature of motion URL state — triggers enter replay when it changes. */
+    revealSignature?: string;
+    /** Aspect ratio as "width / height". Default: "16 / 9" */
+    aspectRatio?: string;
+    /** Projection scale. If not provided, auto-calculated based on width */
+    scale?: number;
+    /** Center coordinates [longitude, latitude]. Default: [0, 20] */
+    center?: [number, number];
+    /** Translate offset [x, y]. If not provided, auto-calculated to center */
+    translate?: [number, number];
+    /** Enable zoom and pan. Default: false */
+    zoomEnabled?: boolean;
+    /** Minimum zoom scale. Default: 0.5 */
+    zoomMin?: number;
+    /** Maximum zoom scale. Default: 4 */
+    zoomMax?: number;
+    /** Initial zoom transform */
+    initialZoom?: TransformMatrix;
+    /** Additional class name for the container */
+    className?: string;
+    /** Child components (ChoroplethFeature, ChoroplethGraticule, ChoroplethTooltip) */
+    children: ReactNode;
+}
+export declare function ChoroplethChart({ data, margin: marginProp, animationDuration, enterTransition, revealSignature, aspectRatio, scale, center, translate, zoomEnabled, zoomMin, zoomMax, initialZoom, className, children, }: ChoroplethChartProps): React.JSX.Element;
+export declare namespace ChoroplethChart {
+    var displayName: string;
+}
+export default ChoroplethChart;
+//# sourceMappingURL=choropleth-chart.d.ts.map

package/dist/charts/choropleth/choropleth-chart.js

@@ -0,0 +1,218 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Mercator } from "@visx/geo";
+import { ParentSize } from "@visx/responsive";
+import { Zoom } from "@visx/zoom";
+import React, { memo, useCallback, useEffect, useMemo, useRef, useState, } from "react";
+import { cn } from "../../lib/cn.js";
+import { ChoroplethInteractionShell, ChoroplethStableProvider, ChoroplethZoomContext, useChoroplethInteraction, } from "./choropleth-context.js";
+import { ChoroplethFeature as ChoroplethFeatureLayer } from "./choropleth-feature.js";
+import { ChoroplethGraticule as ChoroplethGraticuleLayer } from "./choropleth-graticule.js";
+import { ChoroplethTooltip as ChoroplethTooltipLayer } from "./choropleth-tooltip.js";
+const DEFAULT_MARGIN = { top: 0, right: 0, bottom: 0, left: 0 };
+// Known SVG component displayNames
+const SVG_COMPONENT_NAMES = new Set([
+    "ChoroplethFeature",
+    "ChoroplethGraticule",
+    "ChoroplethTooltip",
+]);
+const SVG_COMPONENT_TYPES = new Set([
+    ChoroplethFeatureLayer,
+    ChoroplethGraticuleLayer,
+    ChoroplethTooltipLayer,
+]);
+function resolveComponentType(type) {
+    if (typeof type === "object" &&
+        type !== null &&
+        "type" in type &&
+        type.type) {
+        return type.type;
+    }
+    return type;
+}
+function getComponentDisplayName(type) {
+    if (typeof type === "function") {
+        const fn = type;
+        return fn.displayName ?? fn.name ?? null;
+    }
+    if (typeof type === "object" && type !== null) {
+        const wrapped = type;
+        if (wrapped.displayName) {
+            return wrapped.displayName;
+        }
+        const inner = wrapped.type;
+        if (typeof inner === "function") {
+            const innerFn = inner;
+            return innerFn.displayName ?? innerFn.name ?? null;
+        }
+    }
+    return null;
+}
+function isChoroplethSvgChild(type) {
+    if (SVG_COMPONENT_TYPES.has(type)) {
+        return true;
+    }
+    const resolved = resolveComponentType(type);
+    if (resolved !== type && SVG_COMPONENT_TYPES.has(resolved)) {
+        return true;
+    }
+    const displayName = getComponentDisplayName(type);
+    return displayName !== null && SVG_COMPONENT_NAMES.has(displayName);
+}
+// HTML elements that should render in overlay layer
+const HTML_ELEMENTS = new Set(["div", "span", "button", "p", "a"]);
+// Separate children into SVG and overlay layers
+function separateChildren(children) {
+    const childArray = React.Children.toArray(children);
+    const svgChildren = [];
+    const overlayChildren = [];
+    for (const child of childArray) {
+        if (!React.isValidElement(child)) {
+            svgChildren.push(child);
+            continue;
+        }
+        if (isChoroplethSvgChild(child.type)) {
+            svgChildren.push(child);
+        }
+        else if (typeof child.type === "string") {
+            if (HTML_ELEMENTS.has(child.type)) {
+                overlayChildren.push(child);
+            }
+            else {
+                svgChildren.push(child);
+            }
+        }
+        else {
+            overlayChildren.push(child);
+        }
+    }
+    return { svgChildren, overlayChildren };
+}
+const DEFAULT_INITIAL_ZOOM = {
+    scaleX: 1,
+    scaleY: 1,
+    translateX: 0,
+    translateY: 0,
+    skewX: 0,
+    skewY: 0,
+};
+const ChoroplethSvg = memo(function ChoroplethSvg({ height, width, svgChildren, zoom, }) {
+    const { setHoveredFeatureIndex, setTooltipData } = useChoroplethInteraction();
+    const handleMouseLeave = useCallback(() => {
+        setHoveredFeatureIndex(null);
+        setTooltipData(null);
+    }, [setHoveredFeatureIndex, setTooltipData]);
+    return (_jsx("svg", { "aria-hidden": "true", height: height, onMouseLeave: handleMouseLeave, ref: zoom?.containerRef, style: {
+            contain: "layout style paint",
+            cursor: zoom?.isDragging ? "grabbing" : "grab",
+            touchAction: "none",
+        }, width: width, children: _jsx("g", { style: {
+                transition: zoom?.isDragging ? "none" : "transform 0.18s ease-out",
+            }, transform: zoom ? zoom.toString() : undefined, children: svgChildren }) }));
+});
+const ChoroplethMercatorContent = memo(function ChoroplethMercatorContent({ mercator, data, width, height, innerWidth, innerHeight, margin, animationDuration, enterTransition, revealEpoch, isLoaded, containerRef, svgChildren, overlayChildren, zoom, }) {
+    const featurePaths = data.features.map((feature) => mercator.path(feature) ?? null);
+    const pathGenerator = useCallback((feature) => mercator.path(feature) ?? undefined, [mercator]);
+    const rawPathGenerator = useCallback(
+    // biome-ignore lint/suspicious/noExplicitAny: GeoJSON types are complex
+    (geo) => mercator.path(geo), [mercator]);
+    const projectPoint = useCallback((coords) => {
+        const projected = mercator.projection(coords);
+        if (!projected) {
+            return null;
+        }
+        return projected;
+    }, [mercator]);
+    const stableValue = useMemo(() => ({
+        features: data.features,
+        featureCollection: data,
+        featurePaths,
+        pathGenerator,
+        rawPathGenerator,
+        projectPoint,
+        width,
+        height,
+        innerWidth,
+        innerHeight,
+        margin,
+        containerRef,
+        isLoaded,
+        animationDuration,
+        enterTransition,
+        revealEpoch,
+    }), [
+        animationDuration,
+        containerRef,
+        data,
+        enterTransition,
+        featurePaths,
+        height,
+        innerHeight,
+        innerWidth,
+        isLoaded,
+        margin,
+        pathGenerator,
+        projectPoint,
+        rawPathGenerator,
+        revealEpoch,
+        width,
+    ]);
+    return (_jsx(ChoroplethZoomContext.Provider, { value: { zoom: zoom ?? null }, children: _jsx(ChoroplethStableProvider, { value: stableValue, children: _jsx(ChoroplethInteractionShell, { children: _jsxs("div", { className: "relative h-full w-full", ref: containerRef, children: [_jsx(ChoroplethSvg, { height: height, svgChildren: svgChildren, width: width, zoom: zoom }), overlayChildren] }) }) }) }));
+});
+function ChoroplethChartInner({ data, width, height, margin, animationDuration, enterTransition, revealSignature = "", scale: scaleProp, center, translate: translateProp, zoomEnabled, zoomMin, zoomMax, initialZoom, children, }) {
+    const containerRef = useRef(null);
+    const [isLoaded, setIsLoaded] = useState(false);
+    const [revealEpoch, setRevealEpoch] = useState(0);
+    const innerWidth = width - margin.left - margin.right;
+    const innerHeight = height - margin.top - margin.bottom;
+    const scale = scaleProp ?? (innerWidth / 630) * 100;
+    const translate = translateProp ?? [
+        innerWidth / 2 + margin.left,
+        innerHeight / 2 + margin.top + 50,
+    ];
+    const { svgChildren, overlayChildren } = useMemo(() => separateChildren(children), [children]);
+    // biome-ignore lint/correctness/useExhaustiveDependencies: revealSignature
+    useEffect(() => {
+        setRevealEpoch((n) => n + 1);
+        setIsLoaded(false);
+        const timeout = setTimeout(() => {
+            setIsLoaded(true);
+        }, animationDuration);
+        return () => clearTimeout(timeout);
+    }, [animationDuration, revealSignature]);
+    if (width < 10 || height < 10) {
+        return null;
+    }
+    const mercatorContentProps = {
+        animationDuration,
+        containerRef,
+        data,
+        enterTransition,
+        height,
+        innerHeight,
+        innerWidth,
+        isLoaded,
+        margin,
+        overlayChildren,
+        revealEpoch,
+        svgChildren,
+        width,
+    };
+    return (_jsx(Mercator, { center: center, data: data.features, scale: scale, translate: translate, children: (mercator) => {
+            const content = (zoom) => (_jsx(ChoroplethMercatorContent, { ...mercatorContentProps, mercator: mercator, zoom: zoom }));
+            if (zoomEnabled) {
+                return (_jsx(Zoom, { height: height, initialTransformMatrix: initialZoom, scaleXMax: zoomMax, scaleXMin: zoomMin, scaleYMax: zoomMax, scaleYMin: zoomMin, wheelDelta: (event) => {
+                        const zoomScale = event.deltaY > 0 ? 0.95 : 1.05;
+                        return { scaleX: zoomScale, scaleY: zoomScale };
+                    }, width: width, children: (zoom) => content(zoom) }));
+            }
+            return content();
+        } }));
+}
+export function ChoroplethChart({ data, margin: marginProp, animationDuration = 800, enterTransition, revealSignature, aspectRatio = "16 / 9", scale, center = [0, 20], translate, zoomEnabled = false, zoomMin = 0.5, zoomMax = 4, initialZoom = DEFAULT_INITIAL_ZOOM, className = "", children, }) {
+    const margin = { ...DEFAULT_MARGIN, ...marginProp };
+    return (_jsx("div", { "data-slot": "choropleth-chart", className: cn("relative w-full", className), style: { aspectRatio }, children: _jsx(ParentSize, { debounceTime: 10, children: ({ width, height }) => width > 0 && height > 0 ? (_jsx(ChoroplethChartInner, { animationDuration: animationDuration, center: center, data: data, enterTransition: enterTransition, height: height, initialZoom: initialZoom, margin: margin, revealSignature: revealSignature, scale: scale, translate: translate, width: width, zoomEnabled: zoomEnabled, zoomMax: zoomMax, zoomMin: zoomMin, children: children })) : null }) }));
+}
+ChoroplethChart.displayName = "ChoroplethChart";
+export default ChoroplethChart;
+//# sourceMappingURL=choropleth-chart.js.map

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

@@ -0,0 +1,86 @@
+import type { ProvidedZoom, TransformMatrix } from "@visx/zoom";
+import type { Feature, FeatureCollection, Geometry } from "geojson";
+import type { Transition } from "motion/react";
+import { type Dispatch, type RefObject, type SetStateAction } from "react";
+interface ZoomState {
+    initialTransformMatrix: TransformMatrix;
+    transformMatrix: TransformMatrix;
+    isDragging: boolean;
+}
+export type ZoomInstance<E extends Element> = ProvidedZoom<E> & ZoomState;
+interface ChoroplethZoomContextValue {
+    zoom: ZoomInstance<SVGSVGElement> | null;
+}
+export declare const ChoroplethZoomContext: import("react").Context<ChoroplethZoomContextValue>;
+export declare function useChoroplethZoom(): ChoroplethZoomContextValue;
+export interface Margin {
+    top: number;
+    right: number;
+    bottom: number;
+    left: number;
+}
+export interface ChoroplethFeatureProperties {
+    name?: string;
+    id?: string | number;
+    [key: string]: unknown;
+}
+export type ChoroplethFeature = Feature<Geometry, ChoroplethFeatureProperties>;
+export interface ChoroplethTooltipData {
+    featureIndex: number;
+    x: number;
+    y: number;
+    feature: ChoroplethFeature;
+}
+export interface ChoroplethInteractionContextValue {
+    hoveredFeatureIndex: number | null;
+    setHoveredFeatureIndex: (index: number | null) => void;
+    tooltipData: ChoroplethTooltipData | null;
+    setTooltipData: Dispatch<SetStateAction<ChoroplethTooltipData | null>>;
+}
+export interface ChoroplethStableContextValue {
+    features: ChoroplethFeature[];
+    featureCollection: FeatureCollection<Geometry, ChoroplethFeatureProperties>;
+    /** Precomputed SVG path strings — one per feature index. */
+    featurePaths: readonly (string | null)[];
+    pathGenerator: (feature: ChoroplethFeature) => string | undefined;
+    rawPathGenerator: (geo: any) => string | null;
+    projectPoint: (coords: [number, number]) => [number, number] | null;
+    width: number;
+    height: number;
+    innerWidth: number;
+    innerHeight: number;
+    margin: Margin;
+    containerRef: RefObject<HTMLDivElement | null>;
+    isLoaded: boolean;
+    animationDuration: number;
+    enterTransition?: Transition;
+    revealEpoch: number;
+}
+export type ChoroplethContextValue = ChoroplethStableContextValue & ChoroplethInteractionContextValue;
+export declare function ChoroplethStableProvider({ children, value, }: {
+    children: React.ReactNode;
+    value: ChoroplethStableContextValue;
+}): import("react").JSX.Element;
+export declare function ChoroplethInteractionShell({ children }: {
+    children: React.ReactNode;
+}): import("react").JSX.Element;
+export declare function ChoroplethProvider({ children, value, }: {
+    children: React.ReactNode;
+    value: ChoroplethContextValue;
+}): import("react").JSX.Element;
+export declare function useChoroplethStable(): ChoroplethStableContextValue;
+export declare function useChoroplethInteraction(): ChoroplethInteractionContextValue;
+export declare function useChoropleth(): ChoroplethContextValue;
+export declare const choroplethCssVars: {
+    scale01: "var(--chart-scale-01)";
+    scale02: "var(--chart-scale-02)";
+    scale03: "var(--chart-scale-03)";
+    scale04: "var(--chart-scale-04)";
+    scale05: "var(--chart-scale-05)";
+    patternColor: "var(--chart-scale-pattern-color)";
+    stroke: string;
+    background: string;
+};
+export declare const defaultChoroplethColors: ("var(--chart-scale-01)" | "var(--chart-scale-02)" | "var(--chart-scale-03)" | "var(--chart-scale-04)" | "var(--chart-scale-05)")[];
+export {};
+//# sourceMappingURL=choropleth-context.d.ts.map

package/dist/charts/choropleth/choropleth-context.js

@@ -0,0 +1,106 @@
+"use client";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { createContext, useContext, useMemo, useState, } from "react";
+export const ChoroplethZoomContext = createContext({
+    zoom: null,
+});
+export function useChoroplethZoom() {
+    return useContext(ChoroplethZoomContext);
+}
+const ChoroplethStableContext = createContext(null);
+const ChoroplethInteractionContext = createContext(null);
+export function ChoroplethStableProvider({ children, value, }) {
+    return (_jsx(ChoroplethStableContext.Provider, { value: value, children: children }));
+}
+export function ChoroplethInteractionShell({ children }) {
+    const [hoveredFeatureIndex, setHoveredFeatureIndex] = useState(null);
+    const [tooltipData, setTooltipData] = useState(null);
+    const interaction = useMemo(() => ({
+        hoveredFeatureIndex,
+        setHoveredFeatureIndex,
+        tooltipData,
+        setTooltipData,
+    }), [hoveredFeatureIndex, tooltipData]);
+    return (_jsx(ChoroplethInteractionContext.Provider, { value: interaction, children: children }));
+}
+export function ChoroplethProvider({ children, value, }) {
+    const stable = useMemo(() => ({
+        features: value.features,
+        featureCollection: value.featureCollection,
+        featurePaths: value.featurePaths,
+        pathGenerator: value.pathGenerator,
+        rawPathGenerator: value.rawPathGenerator,
+        projectPoint: value.projectPoint,
+        width: value.width,
+        height: value.height,
+        innerWidth: value.innerWidth,
+        innerHeight: value.innerHeight,
+        margin: value.margin,
+        containerRef: value.containerRef,
+        isLoaded: value.isLoaded,
+        animationDuration: value.animationDuration,
+        enterTransition: value.enterTransition,
+        revealEpoch: value.revealEpoch,
+    }), [
+        value.features,
+        value.featureCollection,
+        value.featurePaths,
+        value.pathGenerator,
+        value.rawPathGenerator,
+        value.projectPoint,
+        value.width,
+        value.height,
+        value.innerWidth,
+        value.innerHeight,
+        value.margin,
+        value.containerRef,
+        value.isLoaded,
+        value.animationDuration,
+        value.enterTransition,
+        value.revealEpoch,
+    ]);
+    const interaction = useMemo(() => ({
+        hoveredFeatureIndex: value.hoveredFeatureIndex,
+        setHoveredFeatureIndex: value.setHoveredFeatureIndex,
+        tooltipData: value.tooltipData,
+        setTooltipData: value.setTooltipData,
+    }), [
+        value.hoveredFeatureIndex,
+        value.setHoveredFeatureIndex,
+        value.tooltipData,
+        value.setTooltipData,
+    ]);
+    return (_jsx(ChoroplethStableProvider, { value: stable, children: _jsx(ChoroplethInteractionContext.Provider, { value: interaction, children: children }) }));
+}
+export function useChoroplethStable() {
+    const context = useContext(ChoroplethStableContext);
+    if (!context) {
+        throw new Error("useChoroplethStable must be used within a ChoroplethProvider");
+    }
+    return context;
+}
+export function useChoroplethInteraction() {
+    const context = useContext(ChoroplethInteractionContext);
+    if (!context) {
+        throw new Error("useChoroplethInteraction must be used within a ChoroplethProvider");
+    }
+    return context;
+}
+export function useChoropleth() {
+    return { ...useChoroplethStable(), ...useChoroplethInteraction() };
+}
+import { CHART_SCALE_VARS, chartScaleCssVars } from "../chart-scale.js";
+// CSS variables for choropleth theming
+export const choroplethCssVars = {
+    scale01: chartScaleCssVars.scale01,
+    scale02: chartScaleCssVars.scale02,
+    scale03: chartScaleCssVars.scale03,
+    scale04: chartScaleCssVars.scale04,
+    scale05: chartScaleCssVars.scale05,
+    patternColor: chartScaleCssVars.patternColor,
+    stroke: "var(--chart-grid)",
+    background: "var(--chart-background)",
+};
+// Default colors array for cycling through features
+export const defaultChoroplethColors = [...CHART_SCALE_VARS];
+//# sourceMappingURL=choropleth-context.js.map

package/dist/charts/choropleth/choropleth-feature.d.ts

@@ -0,0 +1,13 @@
+import { type ChoroplethFeature as ChoroplethFeatureType } from "./choropleth-context.js";
+export interface ChoroplethFeatureProps {
+    fill?: string;
+    stroke?: string;
+    strokeWidth?: number;
+    fadedOpacity?: number;
+    getFeatureColor?: (feature: ChoroplethFeatureType, index: number) => string;
+    patterns?: React.ReactNode;
+    getFeaturePattern?: (feature: ChoroplethFeatureType, index: number) => string | null | undefined;
+}
+export declare const ChoroplethFeature: import("react").MemoExoticComponent<({ fill, stroke, strokeWidth, fadedOpacity, getFeatureColor, patterns, getFeaturePattern, }: ChoroplethFeatureProps) => import("react").JSX.Element>;
+export default ChoroplethFeature;
+//# sourceMappingURL=choropleth-feature.d.ts.map