@danielwh2/contribution-graph 1.0.14

package/dist/hudGraph.d.ts

@@ -0,0 +1,25 @@
+/**
+ * HUD renderer for contribution-graph.
+ *
+ * Wraps the SVG graph in a cinematic "GIT COMMITS" heads-up display: a
+ * corner-bracketed glass panel over an animated teal→ember glitch backdrop,
+ * with auto-computed week stats and commit streak rolling in via slot-text.
+ *
+ * Everything is scoped inside the host element (no fixed/full-viewport chrome)
+ * so the HUD stays a self-contained, embeddable component.
+ */
+import { type ContributionDay, type ContributionGraphOptions } from "./contributionGraph.js";
+export interface HudGraphHandle {
+    update(data: ContributionDay[], options: ContributionGraphOptions): void;
+    destroy(): void;
+}
+export interface HudStats {
+    thisWeek: number;
+    lastWeek: number;
+    deltaPct: number;
+    streak: number;
+}
+export declare function buildHudGraph(element: HTMLElement, data: ContributionDay[], options?: ContributionGraphOptions): HudGraphHandle;
+export declare function clearHudGraph(element: HTMLElement): void;
+/** Week totals, delta, and current streak derived from the data, ending at `until`. */
+export declare function computeStats(data: ContributionDay[], options: ContributionGraphOptions): HudStats;

package/dist/hudGraph.js

@@ -0,0 +1,194 @@
+/**
+ * HUD renderer for contribution-graph.
+ *
+ * Wraps the SVG graph in a cinematic "GIT COMMITS" heads-up display: a
+ * corner-bracketed glass panel over an animated teal→ember glitch backdrop,
+ * with auto-computed week stats and commit streak rolling in via slot-text.
+ *
+ * Everything is scoped inside the host element (no fixed/full-viewport chrome)
+ * so the HUD stays a self-contained, embeddable component.
+ */
+import { slotText } from "slot-text";
+import { buildGraph, clearGraph, formatDate, resolveOptions, } from "./contributionGraph.js";
+import { attachTooltip } from "./tooltip.js";
+const HUD_CLASS = "cg-hud";
+/** Monochrome dark→white ramp used by the HUD heatmap. */
+const HUD_COLORS = ["#1d2422", "#3a4441", "#6c7873", "#aab4ae", "#f1f4f1"];
+const HUD_WEEKDAYS = ["S", "M", "T", "W", "T", "F", "S"];
+const ASCII_CHARS = "01xX#@$+=·:.SBO80";
+const FLAME_PATH = "M12 2.5c.6 3.2-1.2 4.7-2.6 6C7.8 9.9 6 11.4 6 14.5A6 6 0 0 0 18 15c0-2.4-1-4-2.2-5.4-.3 1-.9 1.7-1.7 2-.2-2.6-1-4.6-2.1-9.1z";
+const HUD_TEMPLATE = `
+  <div class="cg-hud-bg" aria-hidden="true"></div>
+  <pre class="cg-hud-ascii cg-hud-ascii--top" aria-hidden="true"></pre>
+  <pre class="cg-hud-ascii cg-hud-ascii--bot" aria-hidden="true"></pre>
+  <div class="cg-hud-scan" aria-hidden="true"></div>
+  <section class="cg-hud-panel" aria-label="Git commits">
+    <span class="cg-hud-corner cg-hud-corner--tl" aria-hidden="true"></span>
+    <span class="cg-hud-corner cg-hud-corner--tr" aria-hidden="true"></span>
+    <span class="cg-hud-corner cg-hud-corner--bl" aria-hidden="true"></span>
+    <span class="cg-hud-corner cg-hud-corner--br" aria-hidden="true"></span>
+    <header class="cg-hud-head"><h2 class="cg-hud-title">GIT COMMITS</h2></header>
+    <div class="cg-hud-rule"></div>
+    <div class="cg-hud-week">
+      <span class="cg-hud-stat">
+        <span class="cg-hud-k">THIS WEEK:</span>
+        <span class="cg-hud-big" data-hud="this">0</span>
+        <span class="cg-hud-delta" data-hud="delta">+0%</span>
+      </span>
+      <span class="cg-hud-stat">
+        <span class="cg-hud-k">LAST WEEK:</span>
+        <span class="cg-hud-big" data-hud="last">0</span>
+      </span>
+    </div>
+    <div class="cg-hud-graph-wrap"><div class="cg-hud-graph"></div></div>
+    <div class="cg-hud-rule"></div>
+    <div class="cg-hud-foot">
+      <div class="cg-hud-streak" title="Current commit streak">
+        <svg class="cg-hud-flame" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true"><path d="${FLAME_PATH}"/></svg>
+        <span data-hud="streak">0</span>&nbsp;DAY STREAK
+      </div>
+    </div>
+  </section>
+`;
+export function buildHudGraph(element, data, options = {}) {
+    clearHudGraph(element);
+    element.classList.add(HUD_CLASS);
+    element.innerHTML = HUD_TEMPLATE;
+    const graphEl = element.querySelector(".cg-hud-graph");
+    const deltaEl = element.querySelector('[data-hud="delta"]');
+    const reduce = typeof matchMedia === "function" && matchMedia("(prefers-reduced-motion: reduce)").matches;
+    const rollers = {
+        this: slotText(element.querySelector('[data-hud="this"]'), "0"),
+        delta: slotText(deltaEl, "0%"),
+        last: slotText(element.querySelector('[data-hud="last"]'), "0"),
+        streak: slotText(element.querySelector('[data-hud="streak"]'), "0"),
+    };
+    fillAscii(element);
+    let graphOptions = mergeGraphOptions(options);
+    buildGraph(graphEl, data, graphOptions);
+    const cleanupTooltip = attachTooltip(graphEl, () => resolveOptions(graphOptions));
+    const instant = { duration: 0, stagger: 0 };
+    const applyStats = (stats, animate) => {
+        deltaEl.classList.toggle("is-neg", stats.deltaPct < 0);
+        const delta = `${stats.deltaPct >= 0 ? "+" : ""}${stats.deltaPct}%`;
+        const roll = (ctrl, text, duration, stagger) => ctrl.set(text, animate ? { direction: "up", duration, stagger } : instant);
+        roll(rollers.this, String(stats.thisWeek), 700, 50);
+        roll(rollers.delta, delta, 750, 45);
+        roll(rollers.last, String(stats.lastWeek), 700, 50);
+        roll(rollers.streak, String(stats.streak), 650, 60);
+    };
+    let stats = computeStats(data, options);
+    let bootTimer;
+    let pulseTimer;
+    if (reduce) {
+        applyStats(stats, false);
+    }
+    else {
+        applyStats(stats, false);
+        bootTimer = setTimeout(() => applyStats(stats, true), 420);
+        pulseTimer = setInterval(() => {
+            const enter = { direction: "up", duration: 600, stagger: 40 };
+            rollers.this.flash(String(stats.thisWeek), { revertAfter: 1, enter });
+            rollers.streak.flash(String(stats.streak), { revertAfter: 1, enter });
+        }, 6500);
+    }
+    return {
+        update(nextData, nextOptions) {
+            graphOptions = mergeGraphOptions(nextOptions);
+            buildGraph(graphEl, nextData, graphOptions);
+            stats = computeStats(nextData, nextOptions);
+            applyStats(stats, !reduce);
+        },
+        destroy() {
+            if (bootTimer)
+                clearTimeout(bootTimer);
+            if (pulseTimer)
+                clearInterval(pulseTimer);
+            cleanupTooltip();
+            rollers.this.destroy();
+            rollers.delta.destroy();
+            rollers.last.destroy();
+            rollers.streak.destroy();
+            clearGraph(graphEl);
+            clearHudGraph(element);
+        },
+    };
+}
+export function clearHudGraph(element) {
+    element.classList.remove(HUD_CLASS);
+    element.replaceChildren();
+}
+/** HUD heatmap defaults; any explicit caller option still wins. */
+function mergeGraphOptions(options) {
+    const { hud, showCounts, ...rest } = options;
+    return {
+        weekStart: 0,
+        cellSize: 15,
+        cellGap: 3,
+        cellRadius: 1,
+        colors: HUD_COLORS,
+        showMonthLabels: false,
+        labelColor: "#8a988f",
+        labelFontSize: 12,
+        weekdayLabels: HUD_WEEKDAYS,
+        tooltip: defaultTooltip,
+        ...rest,
+    };
+}
+function defaultTooltip(day) {
+    return day.count === 0
+        ? `no commits · ${day.dateLabel}`
+        : `${day.count} commits · ${day.dateLabel}`;
+}
+/** Week totals, delta, and current streak derived from the data, ending at `until`. */
+export function computeStats(data, options) {
+    const until = resolveOptions(options).until;
+    const counts = new Map();
+    for (const d of data)
+        counts.set(d.date, d.count);
+    const countAt = (offset) => {
+        const day = new Date(Date.UTC(until.getUTCFullYear(), until.getUTCMonth(), until.getUTCDate() - offset));
+        return counts.get(formatDate(day)) ?? 0;
+    };
+    let thisWeek = 0;
+    let lastWeek = 0;
+    for (let i = 0; i < 7; i++)
+        thisWeek += countAt(i);
+    for (let i = 7; i < 14; i++)
+        lastWeek += countAt(i);
+    const deltaPct = lastWeek === 0
+        ? thisWeek > 0
+            ? 100
+            : 0
+        : Math.round(((thisWeek - lastWeek) / lastWeek) * 100);
+    let streak = 0;
+    const cap = Math.max(data.length, 1) + 1;
+    for (let i = 0; i < cap; i++) {
+        if (countAt(i) > 0)
+            streak++;
+        else
+            break;
+    }
+    return { thisWeek, lastWeek, deltaPct, streak };
+}
+/** Paint the decorative glitch ASCII bands once. */
+function fillAscii(element) {
+    const width = element.clientWidth || 1080;
+    const cols = Math.ceil(width / 8) + 4;
+    const paint = (selector, rows) => {
+        const el = element.querySelector(selector);
+        if (!el)
+            return;
+        let html = "";
+        for (let r = 0; r < rows; r++) {
+            for (let c = 0; c < cols; c++) {
+                const ch = ASCII_CHARS[(Math.random() * ASCII_CHARS.length) | 0];
+                html += Math.random() < 0.06 ? `<span>${ch}</span>` : ch;
+            }
+            html += "\n";
+        }
+        el.innerHTML = html;
+    };
+    paint(".cg-hud-ascii--top", 11);
+    paint(".cg-hud-ascii--bot", 13);
+}

package/dist/index.d.ts

@@ -0,0 +1,40 @@
+/**
+ * contribution-graph — GitHub-style contribution heatmap for any framework.
+ *
+ * Import `contribution-graph/style.css` once in your app, then:
+ *
+ *   import { contributionGraph } from "contribution-graph";
+ *
+ *   const graph = contributionGraph(element, data, {
+ *     until: "2026-06-22",
+ *     onCellClick: (day) => console.log(day.date, day.count),
+ *   });
+ *
+ *   graph.set(newData);
+ *   graph.destroy();
+ *
+ * For HTML cells and optional animated count labels, set `showCounts: true`
+ * and import `slot-text/style.css` with the graph stylesheet:
+ *
+ *   import "contribution-graph/style.css";
+ *   import "slot-text/style.css";
+ *
+ *   contributionGraph(element, data, { showCounts: true, countFontSize: 9 });
+ */
+export { buildGraph, clearGraph, computeGrid, formatDate, formatHumanDate, levelForCount, parseDate, resolveOptions, type ContributionDay, type ContributionDayContext, type ContributionGraphOptions, type Grid, type GridCell, type ResolvedOptions, } from "./contributionGraph.js";
+export { buildHtmlGraph, clearHtmlGraph, type HtmlGraphHandle, } from "./htmlGraph.js";
+export { buildHudGraph, clearHudGraph, type HudGraphHandle, } from "./hudGraph.js";
+export { fetchGitHubContributions, type FetchGitHubContributionsOptions, type GitHubContributionsResult, } from "./github.js";
+export { buildProfileGraph, clearProfileGraph, type ProfileGraphHandle, } from "./profileGraph.js";
+import { type ContributionDay, type ContributionGraphOptions } from "./contributionGraph.js";
+export interface ContributionGraphController {
+    readonly element: HTMLElement;
+    /** Re-render with new data and/or options. */
+    set(data: ContributionDay[], options?: ContributionGraphOptions): void;
+    /** Remove the graph and clean up listeners. */
+    destroy(): void;
+}
+/**
+ * Create a contribution graph controller for one element.
+ */
+export declare function contributionGraph(element: HTMLElement, data: ContributionDay[], options?: ContributionGraphOptions): ContributionGraphController;

package/dist/index.js

@@ -0,0 +1,109 @@
+/**
+ * contribution-graph — GitHub-style contribution heatmap for any framework.
+ *
+ * Import `contribution-graph/style.css` once in your app, then:
+ *
+ *   import { contributionGraph } from "contribution-graph";
+ *
+ *   const graph = contributionGraph(element, data, {
+ *     until: "2026-06-22",
+ *     onCellClick: (day) => console.log(day.date, day.count),
+ *   });
+ *
+ *   graph.set(newData);
+ *   graph.destroy();
+ *
+ * For HTML cells and optional animated count labels, set `showCounts: true`
+ * and import `slot-text/style.css` with the graph stylesheet:
+ *
+ *   import "contribution-graph/style.css";
+ *   import "slot-text/style.css";
+ *
+ *   contributionGraph(element, data, { showCounts: true, countFontSize: 9 });
+ */
+export { buildGraph, clearGraph, computeGrid, formatDate, formatHumanDate, levelForCount, parseDate, resolveOptions, } from "./contributionGraph.js";
+export { buildHtmlGraph, clearHtmlGraph, } from "./htmlGraph.js";
+export { buildHudGraph, clearHudGraph, } from "./hudGraph.js";
+export { fetchGitHubContributions, } from "./github.js";
+export { buildProfileGraph, clearProfileGraph, } from "./profileGraph.js";
+import { buildGraph, clearGraph, resolveOptions, } from "./contributionGraph.js";
+import { buildHtmlGraph, } from "./htmlGraph.js";
+import { buildHudGraph, clearHudGraph, } from "./hudGraph.js";
+import { buildProfileGraph, clearProfileGraph, } from "./profileGraph.js";
+import { attachTooltip } from "./tooltip.js";
+function modeFor(options) {
+    if (options.hud)
+        return "hud";
+    if (options.profile)
+        return "profile";
+    return options.showCounts ? "html" : "svg";
+}
+/**
+ * Create a contribution graph controller for one element.
+ */
+export function contributionGraph(element, data, options = {}) {
+    let currentOptions = options;
+    let mode = null;
+    // HTML count mode and HUD mode both expose an update/destroy handle.
+    let handle = null;
+    let cleanupTooltip = null;
+    const teardown = () => {
+        cleanupTooltip?.();
+        cleanupTooltip = null;
+        handle?.destroy();
+        handle = null;
+        if (mode === "svg")
+            clearGraph(element);
+        if (mode === "hud")
+            clearHudGraph(element);
+        if (mode === "profile")
+            clearProfileGraph(element);
+    };
+    const render = (nextData, nextOptions) => {
+        const nextMode = modeFor(nextOptions);
+        currentOptions = nextOptions;
+        if (nextMode !== mode) {
+            teardown();
+            mode = nextMode;
+            if (nextMode === "hud") {
+                // The HUD owns its own graph + tooltip; no outer tooltip needed.
+                handle = buildHudGraph(element, nextData, nextOptions);
+            }
+            else if (nextMode === "profile") {
+                handle = buildProfileGraph(element, nextData, nextOptions);
+            }
+            else if (nextMode === "html") {
+                handle = buildHtmlGraph(element, nextData, nextOptions);
+                cleanupTooltip = attachTooltip(element, () => resolveOptions(currentOptions));
+            }
+            else {
+                buildGraph(element, nextData, nextOptions);
+                cleanupTooltip = attachTooltip(element, () => resolveOptions(currentOptions));
+            }
+            return;
+        }
+        if (nextMode === "hud") {
+            handle.update(nextData, nextOptions);
+        }
+        else if (nextMode === "profile") {
+            handle.update(nextData, nextOptions);
+        }
+        else if (nextMode === "html") {
+            handle.update(nextData, resolveOptions(nextOptions));
+        }
+        else {
+            buildGraph(element, nextData, nextOptions);
+        }
+    };
+    render(data, currentOptions);
+    return {
+        element,
+        set(data, options) {
+            render(data, options ?? currentOptions);
+        },
+        destroy() {
+            teardown();
+            mode = null;
+        },
+    };
+}

package/dist/profileGraph.d.ts

@@ -0,0 +1,7 @@
+import { type ContributionDay, type ContributionGraphOptions } from "./contributionGraph.js";
+export interface ProfileGraphHandle {
+    update(data: ContributionDay[], options: ContributionGraphOptions): void;
+    destroy(): void;
+}
+export declare function buildProfileGraph(element: HTMLElement, data: ContributionDay[], options?: ContributionGraphOptions): ProfileGraphHandle;
+export declare function clearProfileGraph(element: HTMLElement): void;

package/dist/profileGraph.js

@@ -0,0 +1,81 @@
+import { buildGraph, clearGraph, resolveOptions, } from "./contributionGraph.js";
+import { attachTooltip } from "./tooltip.js";
+const PROFILE_CLASS = "cg-profile";
+const GITHUB_SVG = `<svg viewBox="0 0 24 24" width="22" height="22" fill="currentColor" aria-hidden="true"><path d="M12 2C6.477 2 2 6.477 2 12c0 4.418 2.865 8.166 6.839 9.489.5.092.682-.217.682-.482 0-.237-.009-.866-.013-1.699-2.782.603-3.369-1.34-3.369-1.34-.454-1.156-1.11-1.462-1.11-1.462-.908-.62.069-.608.069-.608 1.003.07 1.531 1.03 1.531 1.03.892 1.529 2.341 1.087 2.91.831.092-.646.35-1.086.636-1.336-2.22-.253-4.555-1.11-4.555-4.943 0-1.091.39-1.984 1.029-2.683-.103-.253-.446-1.27.098-2.647 0 0 .84-.269 2.75 1.025A9.578 9.578 0 0112 6.836c.85.004 1.705.114 2.504.336 1.909-1.294 2.747-1.025 2.747-1.025.546 1.379.203 2.394.1 2.647.64.699 1.028 1.592 1.028 2.683 0 3.842-2.339 4.687-4.566 4.935.359.309.678.919.678 1.852 0 1.336-.012 2.415-.012 2.743 0 .267.18.578.688.48C19.138 20.161 22 16.416 22 12c0-5.523-4.477-10-10-10z"></path></svg>`;
+export function buildProfileGraph(element, data, options = {}) {
+    clearProfileGraph(element);
+    element.classList.add(PROFILE_CLASS);
+    const username = typeof options.profile === "object" && options.profile.username
+        ? options.profile.username
+        : "";
+    let total = 0;
+    for (const day of data) {
+        total += day.count;
+    }
+    const formattedTotal = new Intl.NumberFormat("en-US").format(total);
+    element.innerHTML = `
+    <div class="cg-profile-header">
+      <span class="cg-profile-logo">${GITHUB_SVG}</span>
+      <span class="cg-profile-brand">GitHub</span>
+      ${username ? `<span class="cg-profile-sep" aria-hidden="true"></span><span class="cg-profile-user">@${username}</span>` : ''}
+    </div>
+    <div class="cg-profile-inner">
+      <div class="cg-profile-graph"></div>
+      <div class="cg-profile-footer">
+        <div class="cg-profile-legend">
+          <span>Less</span>
+          <div class="cg-profile-legend-colors">
+            <i></i><i></i><i></i><i></i><i></i>
+          </div>
+          <span>More</span>
+        </div>
+        <div class="cg-profile-total">
+          <strong>${formattedTotal}</strong> contributions this year
+        </div>
+      </div>
+    </div>
+  `;
+    const graphEl = element.querySelector(".cg-profile-graph");
+    // Luxury graph options
+    let graphOptions = mergeGraphOptions(options);
+    buildGraph(graphEl, data, graphOptions);
+    const cleanupTooltip = attachTooltip(graphEl, () => resolveOptions(graphOptions));
+    return {
+        update(nextData, nextOptions) {
+            graphOptions = mergeGraphOptions(nextOptions);
+            buildGraph(graphEl, nextData, graphOptions);
+            let nextTotal = 0;
+            for (const day of nextData)
+                nextTotal += day.count;
+            const fTotal = new Intl.NumberFormat("en-US").format(nextTotal);
+            const totalEl = element.querySelector(".cg-profile-total strong");
+            if (totalEl)
+                totalEl.textContent = fTotal;
+        },
+        destroy() {
+            cleanupTooltip();
+            clearGraph(graphEl);
+            clearProfileGraph(element);
+        },
+    };
+}
+export function clearProfileGraph(element) {
+    element.classList.remove(PROFILE_CLASS);
+    element.replaceChildren();
+}
+/** Profile mode heatmap defaults */
+function mergeGraphOptions(options) {
+    const { profile, ...rest } = options;
+    return {
+        // GitHub light-theme green ramp
+        colors: ["#ebedf0", "#9be9a8", "#40c463", "#30a14e", "#216e39"],
+        cellSize: 15,
+        cellGap: 3,
+        cellRadius: 4,
+        labelColor: "#71717a",
+        labelFontSize: 13,
+        weekStart: 0,
+        weekdayLabels: ["", "Mon", "", "Wed", "", "Fri", ""], // usually only Mon/Wed/Fri are shown
+        ...rest,
+    };
+}

package/dist/react.d.ts

@@ -0,0 +1,7 @@
+import { type HTMLAttributes } from "react";
+import { type ContributionDay, type ContributionGraphOptions } from "./index.js";
+export interface ContributionGraphProps extends Omit<HTMLAttributes<HTMLDivElement>, "data"> {
+    data: ContributionDay[];
+    options?: ContributionGraphOptions;
+}
+export declare const ContributionGraph: import("react").ForwardRefExoticComponent<ContributionGraphProps & import("react").RefAttributes<HTMLDivElement>>;

package/dist/react.js

@@ -0,0 +1,22 @@
+import { createElement, forwardRef, useEffect, useImperativeHandle, useRef, } from "react";
+import { contributionGraph, } from "./index.js";
+export const ContributionGraph = forwardRef(({ data, options, ...props }, forwardedRef) => {
+    const elementRef = useRef(null);
+    const controllerRef = useRef(null);
+    useImperativeHandle(forwardedRef, () => elementRef.current, []);
+    useEffect(() => {
+        const element = elementRef.current;
+        if (!element)
+            return;
+        controllerRef.current = contributionGraph(element, data, options);
+        return () => {
+            controllerRef.current?.destroy();
+            controllerRef.current = null;
+        };
+    }, []); // eslint-disable-line react-hooks/exhaustive-deps
+    useEffect(() => {
+        controllerRef.current?.set(data, options);
+    }, [data, options]);
+    return createElement("div", { ...props, ref: elementRef });
+});
+ContributionGraph.displayName = "ContributionGraph";

package/dist/solid.d.ts

@@ -0,0 +1,14 @@
+import { type Accessor } from "solid-js";
+import { type ContributionDay, type ContributionGraphOptions } from "./index.js";
+export interface ContributionGraphParams {
+    data: ContributionDay[];
+    options?: ContributionGraphOptions;
+}
+export declare function contributionGraph(element: HTMLElement, accessor: Accessor<ContributionGraphParams>): void;
+declare module "solid-js" {
+    namespace JSX {
+        interface Directives {
+            contributionGraph: ContributionGraphParams;
+        }
+    }
+}

package/dist/solid.js

@@ -0,0 +1,13 @@
+import { createRenderEffect, onCleanup } from "solid-js";
+import { contributionGraph as createContributionGraph, } from "./index.js";
+export function contributionGraph(element, accessor) {
+    const initial = accessor();
+    const controller = createContributionGraph(element, initial.data, initial.options);
+    createRenderEffect(() => {
+        const next = accessor();
+        controller.set(next.data, next.options);
+    });
+    onCleanup(() => {
+        controller.destroy();
+    });
+}

package/dist/svelte.d.ts

@@ -0,0 +1,9 @@
+import { type ContributionDay, type ContributionGraphOptions } from "./index.js";
+export interface ContributionGraphParams {
+    data: ContributionDay[];
+    options?: ContributionGraphOptions;
+}
+export declare function contributionGraph(element: HTMLElement, params: ContributionGraphParams): {
+    update(params: ContributionGraphParams): void;
+    destroy(): void;
+};

package/dist/svelte.js

@@ -0,0 +1,12 @@
+import { contributionGraph as createContributionGraph, } from "./index.js";
+export function contributionGraph(element, params) {
+    const controller = createContributionGraph(element, params.data, params.options);
+    return {
+        update(params) {
+            controller.set(params.data, params.options);
+        },
+        destroy() {
+            controller.destroy();
+        },
+    };
+}

package/dist/tooltip.d.ts

@@ -0,0 +1,2 @@
+import { type ResolvedOptions } from "./contributionGraph.js";
+export declare function attachTooltip(container: HTMLElement, getOptions: () => ResolvedOptions): () => void;

package/dist/tooltip.js

@@ -0,0 +1,84 @@
+import { slotText } from "slot-text";
+import { formatHumanDate } from "./contributionGraph.js";
+let tooltipEl = null;
+let textController = null;
+function getTooltip() {
+    if (!tooltipEl || !textController) {
+        tooltipEl = document.createElement("div");
+        tooltipEl.className = "cg-tooltip";
+        const textSpan = document.createElement("span");
+        textSpan.className = "cg-tooltip-text";
+        tooltipEl.appendChild(textSpan);
+        document.body.appendChild(tooltipEl);
+        textController = slotText(textSpan, "", {
+            direction: "up",
+            duration: 250,
+            stagger: 20,
+        });
+    }
+    return { el: tooltipEl, controller: textController };
+}
+export function attachTooltip(container, getOptions) {
+    let activeDate = null;
+    const show = (event) => {
+        const target = event.target;
+        const cell = target?.closest("rect, .cg-cell");
+        if (!cell) {
+            hide();
+            return;
+        }
+        const date = cell.getAttribute("data-date");
+        if (!date)
+            return;
+        if (activeDate === date && tooltipEl?.classList.contains("is-visible")) {
+            return;
+        }
+        const count = Number(cell.getAttribute("data-count") ?? 0);
+        const level = Number(cell.getAttribute("data-level") ?? 0);
+        const opts = getOptions();
+        if (!opts.tooltip)
+            return;
+        const day = { date, count, level, dateLabel: formatHumanDate(date) };
+        const tip = opts.tooltip(day);
+        if (!tip) {
+            hide();
+            return;
+        }
+        activeDate = date;
+        const { el, controller } = getTooltip();
+        controller.set(tip, { skipUnchanged: true, direction: "up" });
+        const rect = cell.getBoundingClientRect();
+        const left = rect.left + window.scrollX + rect.width / 2;
+        const top = rect.top + window.scrollY - 6;
+        el.style.left = `${left}px`;
+        el.style.top = `${top}px`;
+        el.classList.add("is-visible");
+    };
+    const hide = (event) => {
+        if (event && event.type === "mouseout") {
+            const e = event;
+            const target = e.target;
+            const cell = target?.closest("rect, .cg-cell");
+            const related = e.relatedTarget;
+            if (cell && related && cell.contains(related)) {
+                // Mouse moved between children of the same cell; ignore.
+                return;
+            }
+        }
+        activeDate = null;
+        if (tooltipEl) {
+            tooltipEl.classList.remove("is-visible");
+        }
+    };
+    container.addEventListener("mouseover", show);
+    container.addEventListener("mouseout", hide);
+    container.addEventListener("focusin", show);
+    container.addEventListener("focusout", hide);
+    return () => {
+        container.removeEventListener("mouseover", show);
+        container.removeEventListener("mouseout", hide);
+        container.removeEventListener("focusin", show);
+        container.removeEventListener("focusout", hide);
+        hide();
+    };
+}

package/dist/vue.d.ts

@@ -0,0 +1,25 @@
+import { type PropType } from "vue";
+import { type ContributionDay, type ContributionGraphOptions } from "./index.js";
+export declare const ContributionGraph: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
+    data: {
+        type: PropType<ContributionDay[]>;
+        required: true;
+    };
+    options: {
+        type: PropType<ContributionGraphOptions>;
+        default: undefined;
+    };
+}>, () => import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
+    [key: string]: any;
+}>, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
+    data: {
+        type: PropType<ContributionDay[]>;
+        required: true;
+    };
+    options: {
+        type: PropType<ContributionGraphOptions>;
+        default: undefined;
+    };
+}>> & Readonly<{}>, {
+    options: ContributionGraphOptions;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;