@cronus-ui/ui 0.6.0

package/dist/charts/heatmap/heatmap-legend-gradient.js

@@ -0,0 +1,44 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { motion } from "motion/react";
+import { memo } from "react";
+import { buildHeatmapLegendGradient, resolveHeatmapHoverStyle } from "./heatmap-utils.js";
+const HEATMAP_INACTIVE_TRANSITION = {
+    duration: 0.22,
+    ease: [0.4, 0, 0.2, 1],
+};
+export const HeatmapLegendGradient = memo(function HeatmapLegendGradient({ levels, levelStyles, cellSize, gap, cornerRadius, gradientSpan, highlightedLevel, isDimming, inactiveOpacity, inactiveScale, activeScale, isInteractive, onEnter, onLeave, }) {
+    const barWidth = gradientSpan * cellSize + (gradientSpan - 1) * gap;
+    const barHeight = cellSize;
+    const pillRadius = Math.min(cornerRadius, barHeight / 2);
+    const segmentWidth = barWidth / levels.length;
+    const gradient = buildHeatmapLegendGradient(levelStyles);
+    return (_jsxs("div", { className: "relative shrink-0", style: { width: barWidth, height: barHeight }, children: [_jsx(motion.div, { animate: {
+                    opacity: isDimming && highlightedLevel === null ? inactiveOpacity : 1,
+                    scale: 1,
+                }, "aria-hidden": "true", className: "absolute inset-0", initial: { opacity: 1, scale: 1 }, style: {
+                    borderRadius: pillRadius,
+                    background: gradient,
+                }, transition: HEATMAP_INACTIVE_TRANSITION }), levels.map((level, index) => {
+                const isHighlighted = highlightedLevel === level;
+                const isDimmed = isDimming && !isHighlighted;
+                const hoverStyle = resolveHeatmapHoverStyle(isHighlighted, isDimmed, {
+                    inactiveOpacity,
+                    inactiveScale,
+                    activeScale,
+                });
+                return (_jsx(motion.span, { animate: {
+                        opacity: hoverStyle.opacity,
+                        scale: hoverStyle.scale,
+                    }, className: "absolute top-0 block", initial: { opacity: 1, scale: 1 }, onPointerEnter: () => onEnter(level), onPointerLeave: onLeave, style: {
+                        left: index * segmentWidth,
+                        width: segmentWidth,
+                        height: barHeight,
+                        cursor: isInteractive ? "pointer" : undefined,
+                        transformOrigin: "center center",
+                    }, transition: HEATMAP_INACTIVE_TRANSITION }, level));
+            })] }));
+});
+HeatmapLegendGradient.displayName = "HeatmapLegendGradient";
+export default HeatmapLegendGradient;
+//# sourceMappingURL=heatmap-legend-gradient.js.map

package/dist/charts/heatmap/heatmap-legend-swatch.d.ts

@@ -0,0 +1,8 @@
+import { type HeatmapLevelStyle } from "./heatmap-colors.js";
+export declare const HeatmapLegendSwatch: import("react").MemoExoticComponent<({ level, style, cellSize, cornerRadius, }: {
+    level: number;
+    style: HeatmapLevelStyle;
+    cellSize: number;
+    cornerRadius: number;
+}) => import("react").JSX.Element>;
+//# sourceMappingURL=heatmap-legend-swatch.d.ts.map

package/dist/charts/heatmap/heatmap-legend-swatch.js

@@ -0,0 +1,26 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { memo } from "react";
+import { renderPatternPreset } from "../pattern-preset.js";
+import { heatmapLevelPatternId, heatmapLevelPatternRenderOptions, isHeatmapLevelPattern, } from "./heatmap-colors.js";
+export const HeatmapLegendSwatch = memo(function HeatmapLegendSwatch({ level, style, cellSize, cornerRadius, }) {
+    const shellStyle = {
+        width: cellSize,
+        height: cellSize,
+        borderRadius: cornerRadius,
+    };
+    if (isHeatmapLevelPattern(style) && style.pattern) {
+        const patternId = heatmapLevelPatternId(level);
+        const patternNode = renderPatternPreset(style.pattern, patternId, heatmapLevelPatternRenderOptions(style));
+        const opacity = style.patternOpacity ?? 1;
+        return (_jsx("span", { "aria-hidden": "true", className: "block shrink-0 overflow-hidden", style: { ...shellStyle, opacity }, children: _jsxs("svg", { "aria-hidden": "true", className: "block size-full", viewBox: `0 0 ${cellSize} ${cellSize}`, children: [patternNode ? _jsx("defs", { children: patternNode }) : null, _jsx("rect", { fill: patternNode ? `url(#${patternId})` : style.color, height: cellSize, rx: cornerRadius, ry: cornerRadius, width: cellSize })] }) }));
+    }
+    return (_jsx("span", { "aria-hidden": "true", className: "block shrink-0", style: {
+            ...shellStyle,
+            backgroundColor: style.color,
+            border: level === 0 ? `1px solid ${style.color}` : undefined,
+            boxSizing: "border-box",
+        } }));
+});
+HeatmapLegendSwatch.displayName = "HeatmapLegendSwatch";
+//# sourceMappingURL=heatmap-legend-swatch.js.map

package/dist/charts/heatmap/heatmap-legend.d.ts

@@ -0,0 +1,41 @@
+import { type HeatmapLevelStyles } from "./heatmap-colors.js";
+export declare const HEATMAP_LEGEND_LEVELS: readonly [0, 1, 2, 3, 4];
+export type HeatmapLegendVariant = "swatches" | "gradient";
+export interface HeatmapLegendProps {
+    /** Side label before the swatches. Default: "Less" */
+    lessLabel?: string;
+    /** Side label after the swatches. Default: "More" */
+    moreLabel?: string;
+    /** Swatch size in pixels. Default: 11 */
+    cellSize?: number;
+    /** Gap between swatches. Default: 2 */
+    gap?: number;
+    /** Corner radius for swatches. Default: 2 */
+    cornerRadius?: number;
+    /** Horizontal alignment within the legend cell. Default: "end" */
+    align?: "start" | "center" | "end";
+    /** Legend layout — discrete swatches or a continuous gradient bar. Default: `"swatches"` */
+    variant?: HeatmapLegendVariant;
+    /** Gradient bar width in swatch units when `variant="gradient"`. Default: 5 */
+    gradientSpan?: number;
+    /** Font size in pixels for side labels. */
+    fontSize?: number;
+    /** Additional class name for less/more labels. */
+    labelClassName?: string;
+    /** Shared level styles for cells and legend swatches. */
+    levelStyles?: HeatmapLevelStyles;
+    /** Override the default color scale (used when `levelStyles` is omitted). */
+    colorScale?: (count: number | null | undefined) => string;
+    /** Opacity for inactive swatches while interacting. Default: 0.3 */
+    inactiveOpacity?: number;
+    /** Scale for inactive swatches while interacting. Default: 1 */
+    inactiveScale?: number;
+    /** Scale for the highlighted swatch while interacting. Default: 1 */
+    activeScale?: number;
+    /** Sync dimming with chart hover. Default: true when inside HeatmapInteractionProvider */
+    interactive?: boolean;
+    className?: string;
+}
+export declare const HeatmapLegend: import("react").MemoExoticComponent<({ lessLabel, moreLabel, cellSize, gap, cornerRadius, align, variant, gradientSpan, fontSize, labelClassName, levelStyles: levelStylesProp, colorScale, inactiveOpacity, inactiveScale, activeScale, interactive, className, }: HeatmapLegendProps) => import("react").JSX.Element>;
+export default HeatmapLegend;
+//# sourceMappingURL=heatmap-legend.d.ts.map

package/dist/charts/heatmap/heatmap-legend.js

@@ -0,0 +1,68 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { motion } from "motion/react";
+import { memo, useCallback } from "react";
+import { cn } from "../../lib/cn.js";
+import { defaultHeatmapColorScale } from "./heatmap-colors.js";
+import { useHeatmapInteractionOptional } from "./heatmap-context.js";
+import { HeatmapLegendGradient } from "./heatmap-legend-gradient.js";
+import { HeatmapLegendSwatch } from "./heatmap-legend-swatch.js";
+import { getHeatmapContributionLevel, isHeatmapHoverEffectEnabled, resolveHeatmapHoverStyle, } from "./heatmap-utils.js";
+export const HEATMAP_LEGEND_LEVELS = [0, 1, 2, 3, 4];
+const HEATMAP_INACTIVE_OPACITY = 0.3;
+/** Smooth tween for inactive opacity + scale on hover. */
+const HEATMAP_INACTIVE_TRANSITION = {
+    duration: 0.22,
+    ease: [0.4, 0, 0.2, 1],
+};
+export const HeatmapLegend = memo(function HeatmapLegend({ lessLabel = "Less", moreLabel = "More", cellSize = 11, gap = 2, cornerRadius = 2, align = "end", variant = "swatches", gradientSpan = 5, fontSize, labelClassName, levelStyles: levelStylesProp, colorScale = defaultHeatmapColorScale, inactiveOpacity = HEATMAP_INACTIVE_OPACITY, inactiveScale = 1, activeScale = 1, interactive, className, }) {
+    const interaction = useHeatmapInteractionOptional();
+    const isInteractive = interactive ?? interaction != null;
+    const levelStyles = levelStylesProp ??
+        HEATMAP_LEGEND_LEVELS.map((level) => ({
+            color: colorScale(level),
+            fillMode: "solid",
+            pattern: "none",
+        }));
+    const { hoveredLegendLevel, tooltipData, setHoveredCell, setHoveredLegendLevel, setTooltipData } = interaction ?? {
+        hoveredLegendLevel: null,
+        tooltipData: null,
+        setHoveredCell: () => undefined,
+        setHoveredLegendLevel: () => undefined,
+        setTooltipData: () => undefined,
+    };
+    const highlightedLevel = hoveredLegendLevel ?? (tooltipData ? getHeatmapContributionLevel(tooltipData.count) : null);
+    const hoverParams = { inactiveOpacity, inactiveScale, activeScale };
+    const inactiveEnabled = isHeatmapHoverEffectEnabled(hoverParams);
+    const isDimming = isInteractive && highlightedLevel !== null && inactiveEnabled;
+    const handleLegendEnter = useCallback((level) => {
+        if (!isInteractive) {
+            return;
+        }
+        setHoveredLegendLevel(level);
+        setHoveredCell(null);
+        setTooltipData(null);
+    }, [isInteractive, setHoveredCell, setHoveredLegendLevel, setTooltipData]);
+    const handleLegendLeave = useCallback(() => {
+        if (!isInteractive) {
+            return;
+        }
+        setHoveredLegendLevel(null);
+    }, [isInteractive, setHoveredLegendLevel]);
+    const labelStyle = fontSize == null ? undefined : { fontSize };
+    return (_jsxs("div", { className: cn("flex w-full items-center gap-1.5 text-chart-label text-xs", align === "start" && "justify-start", align === "center" && "justify-center", align === "end" && "justify-end", className), style: labelStyle, children: [_jsx("span", { className: labelClassName, children: lessLabel }), variant === "gradient" ? (_jsx(HeatmapLegendGradient, { activeScale: activeScale, cellSize: cellSize, cornerRadius: cornerRadius, gap: gap, gradientSpan: gradientSpan, highlightedLevel: highlightedLevel, inactiveOpacity: inactiveOpacity, inactiveScale: inactiveScale, isDimming: isDimming, isInteractive: isInteractive, levelStyles: levelStyles, levels: HEATMAP_LEGEND_LEVELS, onEnter: handleLegendEnter, onLeave: handleLegendLeave })) : (_jsx("div", { className: "flex items-center", style: { gap }, children: HEATMAP_LEGEND_LEVELS.map((level) => {
+                    const isHighlighted = highlightedLevel === level;
+                    const isDimmed = isDimming && !isHighlighted;
+                    const hoverStyle = resolveHeatmapHoverStyle(isHighlighted, isDimmed, hoverParams);
+                    const style = levelStyles[level];
+                    return (_jsx(motion.span, { animate: {
+                            opacity: hoverStyle.opacity,
+                            scale: hoverStyle.scale,
+                        }, "aria-hidden": "true", className: "block shrink-0 leading-none", initial: { opacity: 1, scale: 1 }, onPointerEnter: () => handleLegendEnter(level), onPointerLeave: handleLegendLeave, style: {
+                            cursor: isInteractive ? "pointer" : undefined,
+                        }, transition: HEATMAP_INACTIVE_TRANSITION, children: _jsx(HeatmapLegendSwatch, { cellSize: cellSize, cornerRadius: cornerRadius, level: level, style: style }) }, level));
+                }) })), _jsx("span", { className: labelClassName, children: moreLabel })] }));
+});
+HeatmapLegend.displayName = "HeatmapLegend";
+export default HeatmapLegend;
+//# sourceMappingURL=heatmap-legend.js.map

package/dist/charts/heatmap/heatmap-pattern-defs.d.ts

@@ -0,0 +1,5 @@
+import { type HeatmapLevelStyles } from "./heatmap-colors.js";
+export declare const HeatmapPatternDefs: import("react").MemoExoticComponent<({ levelStyles, }: {
+    levelStyles: HeatmapLevelStyles;
+}) => import("react").JSX.Element | null>;
+//# sourceMappingURL=heatmap-pattern-defs.d.ts.map

package/dist/charts/heatmap/heatmap-pattern-defs.js

@@ -0,0 +1,25 @@
+"use client";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Fragment, memo } from "react";
+import { renderPatternPreset } from "../pattern-preset.js";
+import { heatmapLevelPatternId, heatmapLevelPatternRenderOptions, isHeatmapLevelPattern, } from "./heatmap-colors.js";
+export const HeatmapPatternDefs = memo(function HeatmapPatternDefs({ levelStyles, }) {
+    const nodes = levelStyles.flatMap((style, level) => {
+        if (!isHeatmapLevelPattern(style)) {
+            return [];
+        }
+        const id = heatmapLevelPatternId(level);
+        const pattern = style.pattern;
+        if (!pattern) {
+            return [];
+        }
+        const node = renderPatternPreset(pattern, id, heatmapLevelPatternRenderOptions(style));
+        return node ? [_jsx(Fragment, { children: node }, id)] : [];
+    });
+    if (nodes.length === 0) {
+        return null;
+    }
+    return _jsx("defs", { children: nodes });
+});
+HeatmapPatternDefs.displayName = "HeatmapPatternDefs";
+//# sourceMappingURL=heatmap-pattern-defs.js.map

package/dist/charts/heatmap/heatmap-resolve-separator.d.ts

@@ -0,0 +1,8 @@
+import type { ReactNode } from "react";
+import type { HeatmapColumn } from "./heatmap-context.js";
+import type { HeatmapSeparatorLayout, HeatmapSeparatorParsedConfig } from "./heatmap-utils.js";
+/** Reads the first {@link HeatmapSeparator} child for separator config. */
+export declare function resolveHeatmapSeparatorConfig(children: ReactNode, chartSeparators?: HeatmapSeparatorParsedConfig | null): HeatmapSeparatorParsedConfig | null;
+/** Merges chart prop and child-derived config, then resolves column indices from data. */
+export declare function resolveHeatmapSeparatorConfigWithData(children: ReactNode, columns: HeatmapColumn[], chartSeparators?: HeatmapSeparatorParsedConfig | null): HeatmapSeparatorLayout | null;
+//# sourceMappingURL=heatmap-resolve-separator.d.ts.map

package/dist/charts/heatmap/heatmap-resolve-separator.js

@@ -0,0 +1,82 @@
+import { Children, isValidElement } from "react";
+import { resolveChartChildElement } from "../chart-child-passthrough.js";
+import { HEATMAP_SEPARATOR_MARKER, HeatmapSeparator } from "./heatmap-separator.js";
+import { resolveHeatmapSeparatorLayout } from "./heatmap-utils.js";
+function getChildComponentName(child) {
+    const childType = child.type;
+    return typeof child.type === "function" ? childType.displayName || childType.name || "" : "";
+}
+function isHeatmapSeparatorElement(child) {
+    const resolved = resolveChartChildElement(child);
+    const type = resolved.type;
+    return (resolved.type === HeatmapSeparator ||
+        type[HEATMAP_SEPARATOR_MARKER] === true ||
+        getChildComponentName(resolved) === "HeatmapSeparator");
+}
+function readHeatmapSeparatorConfig(child) {
+    const props = resolveChartChildElement(child).props;
+    const groupBy = props.groupBy ?? "every";
+    if (groupBy === "quarter") {
+        return {
+            groupBy: "quarter",
+            spacing: props.spacing ?? 0,
+        };
+    }
+    if (props.every == null || props.every <= 0) {
+        return null;
+    }
+    return {
+        groupBy: "every",
+        every: props.every,
+        spacing: props.spacing ?? 0,
+    };
+}
+/** Reads the first {@link HeatmapSeparator} child for separator config. */
+export function resolveHeatmapSeparatorConfig(children, chartSeparators) {
+    let config = null;
+    const visit = (node) => {
+        if (config) {
+            return;
+        }
+        Children.forEach(node, (child) => {
+            if (config || !isValidElement(child)) {
+                return;
+            }
+            if (isHeatmapSeparatorElement(child)) {
+                config = readHeatmapSeparatorConfig(child);
+                return;
+            }
+            const childProps = child.props;
+            if (childProps?.children) {
+                visit(childProps.children);
+            }
+        });
+    };
+    visit(children);
+    return config ?? normalizeHeatmapSeparatorConfig(chartSeparators);
+}
+function normalizeHeatmapSeparatorConfig(config) {
+    if (!config) {
+        return null;
+    }
+    if (config.groupBy === "quarter") {
+        return {
+            groupBy: "quarter",
+            spacing: config.spacing ?? 0,
+        };
+    }
+    if (!config.every || config.every <= 0) {
+        return null;
+    }
+    return {
+        groupBy: "every",
+        every: config.every,
+        spacing: config.spacing ?? 0,
+    };
+}
+/** Merges chart prop and child-derived config, then resolves column indices from data. */
+export function resolveHeatmapSeparatorConfigWithData(children, columns, chartSeparators) {
+    const config = resolveHeatmapSeparatorConfig(children, chartSeparators);
+    return resolveHeatmapSeparatorLayout(config, columns);
+}
+//# sourceMappingURL=heatmap-resolve-separator.js.map

package/dist/charts/heatmap/heatmap-separator.d.ts

@@ -0,0 +1,63 @@
+import { type HeatmapSeparatorGradient, type HeatmapSeparatorStrokeStyle } from "./heatmap-utils.js";
+/** Marker for reliably identifying {@link HeatmapSeparator} in chart child trees. */
+export declare const HEATMAP_SEPARATOR_MARKER: "__isHeatmapSeparator";
+export interface HeatmapSeparatorProps {
+    /**
+     * Insert a separator before every Nth column (e.g. 4 = divide every four weeks).
+     * Used when `groupBy="every"`. When omitted, uses `columnSeparators` from
+     * {@link HeatmapChart} or a sibling {@link HeatmapSeparator} parsed for layout.
+     */
+    every?: number;
+    /**
+     * Group columns by fixed interval (`every`) or calendar quarter (`quarter`).
+     * Default: `"every"`.
+     */
+    groupBy?: "every" | "quarter";
+    /** Additional class name for each separator group. */
+    className?: string;
+    /**
+     * Extra horizontal gap between column groups in pixels (shifts cells apart).
+     * Parsed from this component by {@link HeatmapChart} for layout. Default: 0
+     */
+    spacing?: number;
+    /** Half-width of the line band in pixels (line is centered). Default: 0 */
+    paddingX?: number;
+    /** Inset from the bottom of the plot in pixels. Default: 0 */
+    paddingY?: number;
+    /**
+     * Distance from the chart container top to the line start, in pixels.
+     * Use to align with {@link HeatmapXAxis} labels (e.g. `14`). The line always
+     * extends to the plot bottom. Default: plot top (`margin.top`).
+     */
+    startOffset?: number;
+    /**
+     * Distance below the separator line top to place quarter labels.
+     * `0` aligns labels with the line top. Default: 0.
+     */
+    labelOffset?: number;
+    /** Draw Q1–Q4 labels at the start of each quarter group. Default: false */
+    showLabels?: boolean;
+    /** Format quarter group labels. Default: `Q{n}` */
+    labelFormat?: (quarter: number, startDate: Date) => string;
+    /** Additional class name for quarter labels */
+    labelClassName?: string;
+    /** Solid or dashed separator line. Default: `"solid"` */
+    strokeStyle?: HeatmapSeparatorStrokeStyle;
+    /** Dash pattern when `strokeStyle="dashed"`. Default: `"4,4"` */
+    strokeDasharray?: string;
+    /** Line stroke color when `gradient` is omitted. Default: `var(--border)` */
+    stroke?: string;
+    /**
+     * Vertical stroke gradient aligned to each line's span.
+     * Use matching `from`/`via`/`to` colors with fading opacities to soften the
+     * top and bottom (e.g. `{ fromOpacity: 0, viaOpacity: 1, toOpacity: 0 }`).
+     */
+    gradient?: HeatmapSeparatorGradient;
+    /** Line stroke width in pixels. Default: 1 */
+    strokeWidth?: number;
+    /** Multiplier applied to solid strokes or gradient stop opacities. Default: 1 */
+    strokeOpacity?: number;
+}
+export declare const HeatmapSeparator: import("react").MemoExoticComponent<({ className, paddingX, paddingY, startOffset, labelOffset, showLabels, labelFormat, labelClassName, strokeStyle, strokeDasharray, stroke, gradient, strokeWidth, strokeOpacity, }: HeatmapSeparatorProps) => import("react").JSX.Element | null>;
+export default HeatmapSeparator;
+//# sourceMappingURL=heatmap-separator.d.ts.map

package/dist/charts/heatmap/heatmap-separator.js

@@ -0,0 +1,71 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { memo, useEffect, useId, useMemo, useState } from "react";
+import { createPortal } from "react-dom";
+import { cn } from "../../lib/cn.js";
+import { useHeatmap } from "./heatmap-context.js";
+import { buildHeatmapSeparatorGradientStops, getHeatmapSeparatorLineY, getHeatmapSeparatorX, resolveHeatmapSeparatorStrokeDasharray, } from "./heatmap-utils.js";
+/** Marker for reliably identifying {@link HeatmapSeparator} in chart child trees. */
+export const HEATMAP_SEPARATOR_MARKER = "__isHeatmapSeparator";
+export const HeatmapSeparator = memo(function HeatmapSeparator({ className, paddingX = 0, paddingY = 0, startOffset, labelOffset = 0, showLabels = false, labelFormat = (quarter) => `Q${quarter}`, labelClassName, strokeStyle = "solid", strokeDasharray, stroke = "var(--border)", gradient, strokeWidth = 1, strokeOpacity = 1, }) {
+    const { gap, innerHeight, margin, separatorLayout, xScale, containerRef } = useHeatmap();
+    const [mounted, setMounted] = useState(false);
+    const reactId = useId().replace(/:/g, "");
+    const gradientId = `heatmap-separator-gradient-${reactId}`;
+    useEffect(() => {
+        setMounted(true);
+    }, []);
+    const separators = useMemo(() => {
+        if (!separatorLayout) {
+            return [];
+        }
+        return separatorLayout.atColumns.map((columnIndex) => ({
+            columnIndex,
+            x: getHeatmapSeparatorX(columnIndex, gap, separatorLayout, xScale),
+        }));
+    }, [gap, separatorLayout, xScale]);
+    const labels = useMemo(() => {
+        if (!(showLabels && separatorLayout?.groups.length)) {
+            return [];
+        }
+        return separatorLayout.groups.map((group) => ({
+            key: `${group.year}-Q${group.quarter}-${group.startColumnIndex}`,
+            label: labelFormat(group.quarter, group.startDate),
+            x: margin.left + xScale(group.startColumnIndex),
+        }));
+    }, [labelFormat, margin.left, separatorLayout, showLabels, xScale]);
+    if (!separatorLayout) {
+        return null;
+    }
+    const { y1: lineY1, y2: lineY2 } = getHeatmapSeparatorLineY({
+        innerHeight,
+        marginTop: margin.top,
+        startOffset,
+        paddingY,
+    });
+    const separatorTop = startOffset ?? margin.top;
+    const labelTop = separatorTop + labelOffset;
+    const resolvedStroke = gradient ? `url(#${gradientId})` : stroke;
+    const resolvedStrokeDasharray = resolveHeatmapSeparatorStrokeDasharray(strokeStyle, strokeDasharray);
+    const gradientStops = gradient
+        ? buildHeatmapSeparatorGradientStops(gradient, strokeOpacity)
+        : null;
+    const container = containerRef.current;
+    const labelPortal = mounted && container && labels.length > 0
+        ? createPortal(labels.map((tick) => (_jsx("div", { className: "pointer-events-none absolute", style: {
+                top: labelTop,
+                left: tick.x,
+                width: 0,
+                display: "flex",
+                justifyContent: "flex-start",
+            }, children: _jsx("span", { className: cn("whitespace-nowrap text-chart-label text-xs", labelClassName), children: tick.label }) }, tick.key))), container)
+        : null;
+    if (separators.length === 0) {
+        return labelPortal;
+    }
+    return (_jsxs(_Fragment, { children: [gradientStops ? (_jsx("defs", { children: _jsx("linearGradient", { gradientUnits: "userSpaceOnUse", id: gradientId, x1: 0, x2: 0, y1: lineY1, y2: lineY2, children: gradientStops.map((stop) => (_jsx("stop", { offset: stop.offset, stopColor: stop.color, stopOpacity: stop.opacity }, stop.offset))) }) })) : null, _jsx("g", { children: separators.map((separator) => (_jsxs("g", { className: cn(className), transform: `translate(${separator.x}, 0)`, children: [paddingX > 0 ? (_jsx("rect", { fill: "transparent", height: lineY2 - lineY1, width: paddingX * 2, x: -paddingX, y: lineY1 })) : null, _jsx("line", { stroke: resolvedStroke, strokeDasharray: resolvedStrokeDasharray, strokeOpacity: gradient ? undefined : strokeOpacity, strokeWidth: strokeWidth, x1: 0, x2: 0, y1: lineY1, y2: lineY2 })] }, separator.columnIndex))) }), labelPortal] }));
+});
+HeatmapSeparator[HEATMAP_SEPARATOR_MARKER] = true;
+HeatmapSeparator.displayName = "HeatmapSeparator";
+export default HeatmapSeparator;
+//# sourceMappingURL=heatmap-separator.js.map

package/dist/charts/heatmap/heatmap-tooltip.d.ts

@@ -0,0 +1,30 @@
+export interface HeatmapTooltipProps {
+    /** Custom contribution line (bottom section). Default: `N contribution(s)`. */
+    formatLabel?: (count: number, date: Date) => string;
+    /** Custom class name */
+    className?: string;
+    /** Inline styles for the tooltip panel (background, blur, etc.). */
+    panelStyle?: React.CSSProperties;
+    /**
+     * Tooltip panel background color (CSS variable or color value).
+     * Default: `var(--chart-tooltip-background)`.
+     */
+    backgroundColor?: string;
+    /**
+     * Delay before showing the tooltip on first hover (ms).
+     * Moving between cells updates immediately once visible.
+     */
+    showDelay?: number;
+    /**
+     * Grace period before hiding when the pointer leaves a cell (ms).
+     * Helps avoid flicker when moving quickly between adjacent cells.
+     */
+    hideDelay?: number;
+    /**
+     * When true, the tooltip appears and disappears instantly with no motion.
+     */
+    instant?: boolean;
+}
+export declare const HeatmapTooltip: import("react").MemoExoticComponent<({ formatLabel, className, panelStyle, backgroundColor, showDelay, hideDelay, instant, }: HeatmapTooltipProps) => import("react").JSX.Element | null>;
+export default HeatmapTooltip;
+//# sourceMappingURL=heatmap-tooltip.d.ts.map

package/dist/charts/heatmap/heatmap-tooltip.js

@@ -0,0 +1,20 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { memo } from "react";
+import { TooltipBox } from "../tooltip/tooltip-box.js";
+import { useHeatmap, useHeatmapInteraction } from "./heatmap-context.js";
+import { formatHeatmapContributionLabel, formatHeatmapTooltipDate, formatHeatmapTooltipWeekday, } from "./heatmap-utils.js";
+import { useDelayedTooltipData } from "./use-delayed-tooltip-data.js";
+export const HeatmapTooltip = memo(function HeatmapTooltip({ formatLabel = formatHeatmapContributionLabel, className = "", panelStyle, backgroundColor, showDelay = 0, hideDelay = 120, instant = false, }) {
+    const { containerRef, width, height } = useHeatmap();
+    const { tooltipData } = useHeatmapInteraction();
+    const displayData = useDelayedTooltipData(tooltipData, showDelay, hideDelay);
+    if (!displayData) {
+        return null;
+    }
+    const { count, date } = displayData;
+    return (_jsx(TooltipBox, { animate: false, backgroundColor: backgroundColor, className: className, containerHeight: height, containerRef: containerRef, containerWidth: width, entrance: !instant, panelStyle: panelStyle, visible: true, x: displayData.x, y: displayData.y, children: _jsx("div", { className: "overflow-hidden", children: _jsxs("div", { className: "px-3 py-2.5 text-left", children: [_jsx("div", { className: "font-medium text-chart-tooltip-foreground text-xs", children: formatHeatmapTooltipDate(date) }), _jsx("div", { className: "mt-0.5 text-chart-tooltip-muted text-xs", children: formatHeatmapTooltipWeekday(date) }), _jsx("div", { className: "my-2 border-chart-tooltip-muted/30 border-t" }), _jsx("div", { className: "text-chart-tooltip-foreground text-sm", children: formatLabel(count, date) })] }) }) }));
+});
+HeatmapTooltip.displayName = "HeatmapTooltip";
+export default HeatmapTooltip;
+//# sourceMappingURL=heatmap-tooltip.js.map