@nadicodeai/ui 8.1.0 → 8.3.0

package/LICENSES/SHADCN-HEATMAP-MIT.txt

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 ChingRu <hello@chingru.com>
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/NOTICE

@@ -24,3 +24,12 @@ The marks name the maker of a model the product reports, and nothing else. They
 are generated by scripts/build-brand-icons.mjs into src/components/brand-icons/,
 so a hand edit there is lost; the allow-list in that script names the marks the
 package ships.
+
+@nadicodeai/ui includes a modified CalendarHeatmap from shadcn-heatmap.
+
+shadcn-heatmap
+Copyright (c) 2026 ChingRu <hello@chingru.com>
+
+Licensed under the MIT License; the full text ships as
+LICENSES/SHADCN-HEATMAP-MIT.txt. The source is adapted to distinguish missing
+coverage from a measured zero and is composed by the shared ActivityCalendar.

package/dist/components/activity-calendar.d.ts

@@ -0,0 +1,27 @@
+import type { HTMLAttributes } from "react";
+import { type Activity } from "./heatmap/calendar-heatmap.js";
+type ActivityCalendarDatum = {
+    date: string;
+    value: number;
+};
+type ActivityCalendarLabels = {
+    ariaLabel: string;
+    unavailable: string;
+    legend: string;
+    legendLevel: string;
+    less: string;
+    more: string;
+};
+type ActivityCalendarProps = Omit<HTMLAttributes<HTMLDivElement>, "children"> & {
+    data: readonly ActivityCalendarDatum[];
+    from: string;
+    to: string;
+    locale?: string;
+    labels: ActivityCalendarLabels;
+    valueFormatter?: (value: number) => string;
+};
+declare function activityCalendarData(data: readonly ActivityCalendarDatum[], from: string, to: string): Activity[];
+declare function ActivityCalendar({ data, from, to, locale, labels, valueFormatter, className, ...props }: ActivityCalendarProps): import("react").JSX.Element;
+export { ActivityCalendar, activityCalendarData };
+export type { ActivityCalendarDatum, ActivityCalendarLabels, ActivityCalendarProps };
+//# sourceMappingURL=activity-calendar.d.ts.map

package/dist/components/activity-calendar.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"activity-calendar.d.ts","sourceRoot":"","sources":["../../src/components/activity-calendar.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,OAAO,CAAC;AAE5C,OAAO,EAML,KAAK,QAAQ,EACd,MAAM,uCAAuC,CAAC;AAG/C,KAAK,qBAAqB,GAAG;IAAE,IAAI,EAAE,MAAM,CAAC;IAAC,KAAK,EAAE,MAAM,CAAA;CAAE,CAAC;AAE7D,KAAK,sBAAsB,GAAG;IAC5B,SAAS,EAAE,MAAM,CAAC;IAClB,WAAW,EAAE,MAAM,CAAC;IACpB,MAAM,EAAE,MAAM,CAAC;IACf,WAAW,EAAE,MAAM,CAAC;IACpB,IAAI,EAAE,MAAM,CAAC;IACb,IAAI,EAAE,MAAM,CAAC;CACd,CAAC;AAEF,KAAK,qBAAqB,GAAG,IAAI,CAAC,cAAc,CAAC,cAAc,CAAC,EAAE,UAAU,CAAC,GAAG;IAC9E,IAAI,EAAE,SAAS,qBAAqB,EAAE,CAAC;IACvC,IAAI,EAAE,MAAM,CAAC;IACb,EAAE,EAAE,MAAM,CAAC;IACX,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,MAAM,EAAE,sBAAsB,CAAC;IAC/B,cAAc,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,MAAM,CAAC;CAC5C,CAAC;AAwBF,iBAAS,oBAAoB,CAC3B,IAAI,EAAE,SAAS,qBAAqB,EAAE,EACtC,IAAI,EAAE,MAAM,EACZ,EAAE,EAAE,MAAM,GACT,QAAQ,EAAE,CAKZ;AAeD,iBAAS,gBAAgB,CAAC,EACxB,IAAI,EACJ,IAAI,EACJ,EAAE,EACF,MAAM,EACN,MAAM,EACN,cAAuE,EACvE,SAAS,EACT,GAAG,KAAK,EACT,EAAE,qBAAqB,+BAwCvB;AAED,OAAO,EAAE,gBAAgB,EAAE,oBAAoB,EAAE,CAAC;AAClD,YAAY,EAAE,qBAAqB,EAAE,sBAAsB,EAAE,qBAAqB,EAAE,CAAC"}

package/dist/components/activity-calendar.js

@@ -0,0 +1,56 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { CalendarHeatmap, CalendarHeatmapBlock, CalendarHeatmapBody, CalendarHeatmapFooter, CalendarHeatmapLegend, } from "./heatmap/calendar-heatmap.js";
+import { cn } from "../lib/utils.js";
+const ISO_DAY = /^\d{4}-\d{2}-\d{2}$/;
+function utcDay(day) {
+    if (!ISO_DAY.test(day))
+        throw new RangeError(`${day} is not an ISO day`);
+    const date = new Date(`${day}T00:00:00.000Z`);
+    if (Number.isNaN(date.getTime()) || date.toISOString().slice(0, 10) !== day) {
+        throw new RangeError(`${day} is not an ISO day`);
+    }
+    return date;
+}
+function activityDays(from, to) {
+    const start = utcDay(from).getTime();
+    const end = utcDay(to).getTime();
+    if (end < start)
+        throw new RangeError("Activity range ends before it starts");
+    const days = Math.floor((end - start) / 86_400_000) + 1;
+    return Array.from({ length: days }, (_, index) => new Date(start + index * 86_400_000).toISOString().slice(0, 10));
+}
+function activityCalendarData(data, from, to) {
+    const values = new Map(data.map((entry) => [entry.date, Number.isFinite(entry.value) ? entry.value : null]));
+    return activityDays(from, to).map((date) => ({ date, value: values.get(date) ?? null }));
+}
+function localizedCalendarLabels(locale) {
+    const months = new Intl.DateTimeFormat(locale, { month: "short", timeZone: "UTC" });
+    const weekdays = new Intl.DateTimeFormat(locale, { weekday: "short", timeZone: "UTC" });
+    return {
+        months: Array.from({ length: 12 }, (_, month) => months.format(new Date(Date.UTC(2024, month, 1)))),
+        weekdays: Array.from({ length: 7 }, (_, day) => weekdays.format(new Date(Date.UTC(2024, 0, 7 + day)))),
+    };
+}
+function ActivityCalendar({ data, from, to, locale, labels, valueFormatter = (value) => new Intl.NumberFormat(locale).format(value), className, ...props }) {
+    const calendarData = activityCalendarData(data, from, to);
+    const dateFormatter = new Intl.DateTimeFormat(locale, {
+        dateStyle: "medium",
+        timeZone: "UTC",
+    });
+    const localizedLabels = localizedCalendarLabels(locale);
+    return (_jsxs(CalendarHeatmap, { data: calendarData, weekStart: 1, continuousMonths: true, singleRow: true, className: cn("w-full p-0", className), labels: {
+            ...localizedLabels,
+            unavailable: labels.unavailable,
+            heatmapLabel: labels.ariaLabel,
+            legendLabel: labels.legend,
+            legendLevelLabel: labels.legendLevel,
+            cellLabel: (activity) => {
+                const date = dateFormatter.format(utcDay(activity.date));
+                return activity.value === null
+                    ? `${date}: ${labels.unavailable}`
+                    : `${date}: ${valueFormatter(activity.value)}`;
+            },
+        }, ...props, children: [_jsx(CalendarHeatmapBody, { hideYearLabels: true, children: ({ activity, dayIndex, weekIndex }) => (_jsx(CalendarHeatmapBlock, { activity: activity, dayIndex: dayIndex, weekIndex: weekIndex })) }), _jsx(CalendarHeatmapFooter, { children: _jsx(CalendarHeatmapLegend, { labels: { less: labels.less, more: labels.more } }) })] }));
+}
+export { ActivityCalendar, activityCalendarData };

package/dist/components/agent-orb.d.ts

@@ -0,0 +1,22 @@
+import { type CSSProperties } from "react";
+import { type AgentOrbForm, type AgentOrbSize } from "../internal/agent-orb.js";
+export type { AgentOrbForm, AgentOrbSize } from "../internal/agent-orb.js";
+import type { AgentOrbState } from "../internal/agent-orb-motion.js";
+export type { AgentOrbState } from "../internal/agent-orb-motion.js";
+export type AgentOrbProps = {
+    form: AgentOrbForm;
+    color?: CSSProperties["color"];
+    size?: AgentOrbSize;
+    paused?: boolean;
+    state?: AgentOrbState;
+    motionKey?: number;
+    className?: string;
+} & ({
+    decorative: true;
+    label?: never;
+} | {
+    decorative?: false;
+    label: string;
+});
+export declare function AgentOrb({ form, color, size, paused, state, motionKey, decorative, label, className, }: AgentOrbProps): import("react").JSX.Element;
+//# sourceMappingURL=agent-orb.d.ts.map

package/dist/components/agent-orb.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"agent-orb.d.ts","sourceRoot":"","sources":["../../src/components/agent-orb.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,KAAK,aAAa,EAAqB,MAAM,OAAO,CAAC;AAE9D,OAAO,EAAE,KAAK,YAAY,EAAE,KAAK,YAAY,EAAiB,MAAM,uBAAuB,CAAC;AAG5F,YAAY,EAAE,YAAY,EAAE,YAAY,EAAE,MAAM,uBAAuB,CAAC;AAExE,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,8BAA8B,CAAC;AAClE,YAAY,EAAE,aAAa,EAAE,MAAM,8BAA8B,CAAC;AAElE,MAAM,MAAM,aAAa,GAAG;IAC1B,IAAI,EAAE,YAAY,CAAC;IACnB,KAAK,CAAC,EAAE,aAAa,CAAC,OAAO,CAAC,CAAC;IAC/B,IAAI,CAAC,EAAE,YAAY,CAAC;IACpB,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,KAAK,CAAC,EAAE,aAAa,CAAC;IACtB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB,GAAG,CAAC;IAAE,UAAU,EAAE,IAAI,CAAC;IAAC,KAAK,CAAC,EAAE,KAAK,CAAA;CAAE,GAAG;IAAE,UAAU,CAAC,EAAE,KAAK,CAAC;IAAC,KAAK,EAAE,MAAM,CAAA;CAAE,CAAC,CAAC;AAElF,wBAAgB,QAAQ,CAAC,EACvB,IAAI,EACJ,KAAK,EACL,IAAS,EACT,MAAc,EACd,KAAc,EACd,SAAa,EACb,UAAkB,EAClB,KAAK,EACL,SAAS,GACV,EAAE,aAAa,+BAyCf"}

package/dist/components/agent-orb.js

@@ -0,0 +1,28 @@
+"use client";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useEffect, useRef } from "react";
+import { mountAgentOrb } from "../internal/agent-orb.js";
+import { cn } from "../lib/utils.js";
+export function AgentOrb({ form, color, size = 32, paused = false, state = "idle", motionKey = 0, decorative = false, label, className, }) {
+    const canvas = useRef(null);
+    const renderer = useRef(null);
+    const pause = useRef(paused);
+    useEffect(() => {
+        if (!canvas.current)
+            return;
+        const mounted = mountAgentOrb(canvas.current, form, size, pause.current);
+        renderer.current = mounted;
+        return () => {
+            mounted.destroy();
+            renderer.current = null;
+        };
+    }, [form, size]);
+    useEffect(() => {
+        pause.current = paused;
+        renderer.current?.setPaused(paused);
+    }, [paused, form, size]);
+    useEffect(() => {
+        renderer.current?.setState(state);
+    }, [state, motionKey, form, size]);
+    return (_jsx("canvas", { ref: canvas, "data-slot": "agent-orb", "data-form": form, "data-state": state, role: decorative ? undefined : "img", "aria-hidden": decorative || undefined, "aria-label": decorative ? undefined : label, className: cn("inline-block shrink-0 align-middle", className), width: size, height: size, style: { color, width: size, height: size }, children: decorative ? null : label }));
+}

package/dist/components/chart-area-stacked.d.ts

@@ -1,4 +1,4 @@
 import { type ChartCardProps } from "./chart-card.js";
-declare function ChartAreaStacked({ title, description, action, footer, headingLevel, data, xKey, series, entityColorMap, valueFormatter, axisFormatter, otherLabel, emptyState, size, className, }: ChartCardProps): import("react").JSX.Element;
+declare function ChartAreaStacked({ title, description, action, summary, aside, footer, headingLevel, data, xKey, series, entityColorMap, valueFormatter, axisFormatter, otherLabel, emptyState, size, className, }: ChartCardProps): import("react").JSX.Element;
 export { ChartAreaStacked };
 //# sourceMappingURL=chart-area-stacked.d.ts.map

package/dist/components/chart-area-stacked.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"chart-area-stacked.d.ts","sourceRoot":"","sources":["../../src/components/chart-area-stacked.tsx"],"names":[],"mappings":"AAcA,OAAO,EAOL,KAAK,cAAc,EACpB,MAAM,yBAAyB,CAAC;AAGjC,iBAAS,gBAAgB,CAAC,EACxB,KAAK,EACL,WAAW,EACX,MAAM,EACN,MAAM,EACN,YAAY,EACZ,IAAI,EACJ,IAAI,EACJ,MAAM,EACN,cAAc,EACd,cAAsC,EACtC,aAAa,EACb,UAAoB,EACpB,UAAU,EACV,IAAgB,EAChB,SAAS,GACV,EAAE,cAAc,+BAwEhB;AAED,OAAO,EAAE,gBAAgB,EAAE,CAAC"}
+{"version":3,"file":"chart-area-stacked.d.ts","sourceRoot":"","sources":["../../src/components/chart-area-stacked.tsx"],"names":[],"mappings":"AAcA,OAAO,EAOL,KAAK,cAAc,EACpB,MAAM,yBAAyB,CAAC;AAGjC,iBAAS,gBAAgB,CAAC,EACxB,KAAK,EACL,WAAW,EACX,MAAM,EACN,OAAO,EACP,KAAK,EACL,MAAM,EACN,YAAY,EACZ,IAAI,EACJ,IAAI,EACJ,MAAM,EACN,cAAc,EACd,cAAsC,EACtC,aAAa,EACb,UAAoB,EACpB,UAAU,EACV,IAAgB,EAChB,SAAS,GACV,EAAE,cAAc,+BA0EhB;AAED,OAAO,EAAE,gBAAgB,EAAE,CAAC"}

package/dist/components/chart-area-stacked.js

@@ -7,11 +7,11 @@ import { ChartContainer, ChartLegend, ChartLegendContent, ChartTooltip, ChartToo
 import { CHART_Y_AXIS_TICK_COUNT, niceAxisTicks, stackedAxisMax } from "./chart-axis.js";
 import { CHART_LEGEND_CLASS, ChartCard, chartPlotClassName, chartSeriesConfig, defaultValueFormatter, foldOtherSeries, } from "./chart-card.js";
 import { entityColor } from "./chart-entity-colors.js";
-function ChartAreaStacked({ title, description, action, footer, headingLevel, data, xKey, series, entityColorMap, valueFormatter = defaultValueFormatter, axisFormatter, otherLabel = "Other", emptyState, size = "default", className, }) {
+function ChartAreaStacked({ title, description, action, summary, aside, footer, headingLevel, data, xKey, series, entityColorMap, valueFormatter = defaultValueFormatter, axisFormatter, otherLabel = "Other", emptyState, size = "default", className, }) {
     const folded = foldOtherSeries(series, data, entityColorMap, otherLabel);
     const chartConfig = chartSeriesConfig(folded.series, entityColorMap);
     const domainMax = stackedAxisMax(folded.data, folded.series.map((entry) => entry.id));
-    return (_jsx(ChartCard, { title: title, description: description, action: action, footer: footer, ...(headingLevel ? { headingLevel } : {}), className: className, children: (titleId) => emptyState && data.length === 0 ? (emptyState) : (_jsx(ChartContainer, { config: chartConfig, className: chartPlotClassName(size), children: _jsxs(AreaChart, { accessibilityLayer: true, "aria-labelledby": titleId, data: folded.data, margin: {
+    return (_jsx(ChartCard, { title: title, description: description, action: action, summary: summary, aside: aside, footer: footer, ...(headingLevel ? { headingLevel } : {}), className: className, children: (titleId) => emptyState && data.length === 0 ? (emptyState) : (_jsx(ChartContainer, { config: chartConfig, className: chartPlotClassName(size), children: _jsxs(AreaChart, { accessibilityLayer: true, "aria-labelledby": titleId, data: folded.data, margin: {
                     left: 12,
                     right: 12,
                 }, children: [_jsx(CartesianGrid, { strokeDasharray: "3 3" }), _jsx(XAxis, { dataKey: xKey, tickLine: false, axisLine: false, tickMargin: 8 }), _jsx(YAxis, { width: "auto", tickLine: false, axisLine: false, tickMargin: 8, tickCount: CHART_Y_AXIS_TICK_COUNT, ...(domainMax === undefined

package/dist/components/chart-bar-horizontal.d.ts

@@ -0,0 +1,14 @@
+import { type ChartCardProps } from "./chart-card.js";
+declare function signedAxis(data: readonly Record<string, number | string>[], valueKey: string): {
+    domain: readonly [number, number];
+    ticks: number[];
+};
+declare function ChartBarHorizontal({ title, description, action, summary, aside, footer, headingLevel, data, xKey, valueKey, displayKey, categoryDisplayKey, positiveLabel, negativeLabel, valueFormatter, axisFormatter, emptyState, size, className, }: Omit<ChartCardProps, "series" | "entityColorMap"> & {
+    valueKey: string;
+    displayKey?: string;
+    categoryDisplayKey?: string;
+    positiveLabel: string;
+    negativeLabel: string;
+}): import("react").JSX.Element;
+export { ChartBarHorizontal, signedAxis };
+//# sourceMappingURL=chart-bar-horizontal.d.ts.map

package/dist/components/chart-bar-horizontal.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"chart-bar-horizontal.d.ts","sourceRoot":"","sources":["../../src/components/chart-bar-horizontal.tsx"],"names":[],"mappings":"AAaA,OAAO,EAKL,KAAK,cAAc,EACpB,MAAM,yBAAyB,CAAC;AAOjC,iBAAS,UAAU,CAAC,IAAI,EAAE,SAAS,MAAM,CAAC,MAAM,EAAE,MAAM,GAAG,MAAM,CAAC,EAAE,EAAE,QAAQ,EAAE,MAAM;;;EAoCrF;AAED,iBAAS,kBAAkB,CAAC,EAC1B,KAAK,EACL,WAAW,EACX,MAAM,EACN,OAAO,EACP,KAAK,EACL,MAAM,EACN,YAAY,EACZ,IAAI,EACJ,IAAI,EACJ,QAAQ,EACR,UAAU,EACV,kBAAkB,EAClB,aAAa,EACb,aAAa,EACb,cAAsC,EACtC,aAAa,EACb,UAAU,EACV,IAAgB,EAChB,SAAS,GACV,EAAE,IAAI,CAAC,cAAc,EAAE,QAAQ,GAAG,gBAAgB,CAAC,GAAG;IACrD,QAAQ,EAAE,MAAM,CAAC;IACjB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,kBAAkB,CAAC,EAAE,MAAM,CAAC;IAC5B,aAAa,EAAE,MAAM,CAAC;IACtB,aAAa,EAAE,MAAM,CAAC;CACvB,+BAyGA;AAED,OAAO,EAAE,kBAAkB,EAAE,UAAU,EAAE,CAAC"}

package/dist/components/chart-bar-horizontal.js

@@ -0,0 +1,67 @@
+// Pulled from the shadcn registry item `chart-bar-horizontal`.
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Bar, BarChart, CartesianGrid, ReferenceLine, XAxis, YAxis } from "recharts";
+import { ChartContainer, ChartLegend, ChartLegendContent, ChartTooltip, ChartTooltipContent, } from "./chart.js";
+import { niceAxisMax, niceAxisTicks, niceStep } from "./chart-axis.js";
+import { CHART_LEGEND_CLASS, ChartCard, chartPlotClassName, defaultValueFormatter, } from "./chart-card.js";
+const POSITIVE_KEY = "__positive";
+const NEGATIVE_KEY = "__negative";
+const POSITIVE_BAR_COLOR = "var(--nc-success)";
+const NEGATIVE_BAR_COLOR = "var(--destructive)";
+function signedAxis(data, valueKey) {
+    const values = data.flatMap((datum) => {
+        const value = datum[valueKey];
+        return typeof value === "number" && Number.isFinite(value) ? [value] : [];
+    });
+    const minimum = Math.min(0, ...values);
+    const maximum = Math.max(0, ...values);
+    if (minimum === 0) {
+        const bound = niceAxisMax(maximum) ?? 1;
+        return { domain: [0, bound], ticks: niceAxisTicks(bound) ?? [0, bound] };
+    }
+    if (maximum === 0) {
+        const bound = niceAxisMax(Math.abs(minimum)) ?? 1;
+        return {
+            domain: [-bound, 0],
+            ticks: (niceAxisTicks(bound) ?? [0, bound]).map((value) => -value).reverse(),
+        };
+    }
+    const intervals = 4;
+    const positiveIntervals = Math.min(3, Math.max(1, Math.round((maximum / (maximum + Math.abs(minimum))) * intervals)));
+    const negativeIntervals = intervals - positiveIntervals;
+    const positiveStep = niceStep(maximum / positiveIntervals);
+    const negativeStep = niceStep(Math.abs(minimum) / negativeIntervals);
+    const negativeTicks = Array.from({ length: negativeIntervals }, (_unused, index) => -negativeStep * (negativeIntervals - index));
+    const positiveTicks = Array.from({ length: positiveIntervals }, (_unused, index) => positiveStep * (index + 1));
+    const ticks = [...negativeTicks, 0, ...positiveTicks];
+    return { domain: [ticks[0] ?? minimum, ticks.at(-1) ?? maximum], ticks };
+}
+function ChartBarHorizontal({ title, description, action, summary, aside, footer, headingLevel, data, xKey, valueKey, displayKey, categoryDisplayKey, positiveLabel, negativeLabel, valueFormatter = defaultValueFormatter, axisFormatter, emptyState, size = "default", className, }) {
+    const axis = signedAxis(data, valueKey);
+    const signedData = data.map((datum) => {
+        const value = datum[valueKey];
+        const numeric = typeof value === "number" && Number.isFinite(value) ? value : 0;
+        return {
+            ...datum,
+            [POSITIVE_KEY]: numeric > 0 ? numeric : 0,
+            [NEGATIVE_KEY]: numeric < 0 ? numeric : 0,
+        };
+    });
+    const chartConfig = {
+        [POSITIVE_KEY]: { label: positiveLabel, color: POSITIVE_BAR_COLOR },
+        [NEGATIVE_KEY]: { label: negativeLabel, color: NEGATIVE_BAR_COLOR },
+    };
+    return (_jsx(ChartCard, { title: title, description: description, action: action, summary: summary, aside: aside, footer: footer, ...(headingLevel ? { headingLevel } : {}), className: className, children: (titleId) => emptyState && data.length === 0 ? (emptyState) : (_jsx(ChartContainer, { config: chartConfig, className: chartPlotClassName(size), children: _jsxs(BarChart, { accessibilityLayer: true, "aria-labelledby": titleId, data: signedData, layout: "vertical", margin: { left: 8, right: 16 }, children: [_jsx(CartesianGrid, { horizontal: false, strokeDasharray: "3 3" }), _jsx(XAxis, { type: "number", domain: axis.domain, ticks: axis.ticks, tickLine: false, axisLine: false, tickMargin: 8, tickFormatter: (value) => (axisFormatter ?? valueFormatter)(Number(value)) }), _jsx(YAxis, { type: "category", dataKey: xKey, width: 112, tickLine: false, axisLine: false, tickMargin: 8 }), _jsx(ReferenceLine, { x: 0, stroke: "var(--border)", strokeWidth: 1.5 }), _jsx(ChartTooltip, { cursor: false, content: _jsx(ChartTooltipContent, { indicator: "line", labelFormatter: (_label, payload) => {
+                                const exact = categoryDisplayKey
+                                    ? payload?.[0]?.payload?.[categoryDisplayKey]
+                                    : undefined;
+                                return typeof exact === "string" ? exact : _label;
+                            }, formatter: (value, _name, item) => {
+                                if (Number(value) === 0)
+                                    return null;
+                                const exact = displayKey ? item.payload?.[displayKey] : undefined;
+                                return (_jsx("span", { className: "ml-auto font-mono font-medium text-foreground tabular-nums", children: typeof exact === "string" ? exact : valueFormatter(Number(value)) }));
+                            } }) }), _jsx(ChartLegend, { itemSorter: null, content: _jsx(ChartLegendContent, { className: CHART_LEGEND_CLASS }) }), _jsx(Bar, { dataKey: POSITIVE_KEY, stackId: "signed", fill: POSITIVE_BAR_COLOR, radius: [0, 4, 4, 0], maxBarSize: 32 }), _jsx(Bar, { dataKey: NEGATIVE_KEY, stackId: "signed", fill: NEGATIVE_BAR_COLOR, radius: [4, 0, 0, 4], maxBarSize: 32 })] }) })) }));
+}
+export { ChartBarHorizontal, signedAxis };

package/dist/components/chart-bar-multiple.d.ts

@@ -4,6 +4,6 @@ import { type ChartCardProps } from "./chart-card.js";
  * one unit. A rate over those measures (a margin percentage) is a KPI card, not
  * a second axis on this plot.
  */
-declare function ChartBarMultiple({ title, description, action, footer, headingLevel, data, xKey, series, entityColorMap, valueFormatter, axisFormatter, otherLabel, emptyState, size, className, }: ChartCardProps): import("react").JSX.Element;
+declare function ChartBarMultiple({ title, description, action, summary, aside, footer, headingLevel, data, xKey, series, entityColorMap, valueFormatter, axisFormatter, otherLabel, emptyState, size, className, }: ChartCardProps): import("react").JSX.Element;
 export { ChartBarMultiple };
 //# sourceMappingURL=chart-bar-multiple.d.ts.map

package/dist/components/chart-bar-multiple.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"chart-bar-multiple.d.ts","sourceRoot":"","sources":["../../src/components/chart-bar-multiple.tsx"],"names":[],"mappings":"AAcA,OAAO,EAOL,KAAK,cAAc,EACpB,MAAM,yBAAyB,CAAC;AAGjC;;;;GAIG;AACH,iBAAS,gBAAgB,CAAC,EACxB,KAAK,EACL,WAAW,EACX,MAAM,EACN,MAAM,EACN,YAAY,EACZ,IAAI,EACJ,IAAI,EACJ,MAAM,EACN,cAAc,EACd,cAAsC,EACtC,aAAa,EACb,UAAoB,EACpB,UAAU,EACV,IAAgB,EAChB,SAAS,GACV,EAAE,cAAc,+BA8DhB;AAED,OAAO,EAAE,gBAAgB,EAAE,CAAC"}
+{"version":3,"file":"chart-bar-multiple.d.ts","sourceRoot":"","sources":["../../src/components/chart-bar-multiple.tsx"],"names":[],"mappings":"AAcA,OAAO,EAOL,KAAK,cAAc,EACpB,MAAM,yBAAyB,CAAC;AAGjC;;;;GAIG;AACH,iBAAS,gBAAgB,CAAC,EACxB,KAAK,EACL,WAAW,EACX,MAAM,EACN,OAAO,EACP,KAAK,EACL,MAAM,EACN,YAAY,EACZ,IAAI,EACJ,IAAI,EACJ,MAAM,EACN,cAAc,EACd,cAAsC,EACtC,aAAa,EACb,UAAoB,EACpB,UAAU,EACV,IAAgB,EAChB,SAAS,GACV,EAAE,cAAc,+BAgEhB;AAED,OAAO,EAAE,gBAAgB,EAAE,CAAC"}

package/dist/components/chart-bar-multiple.js

@@ -12,11 +12,11 @@ import { entityColor } from "./chart-entity-colors.js";
  * one unit. A rate over those measures (a margin percentage) is a KPI card, not
  * a second axis on this plot.
  */
-function ChartBarMultiple({ title, description, action, footer, headingLevel, data, xKey, series, entityColorMap, valueFormatter = defaultValueFormatter, axisFormatter, otherLabel = "Other", emptyState, size = "default", className, }) {
+function ChartBarMultiple({ title, description, action, summary, aside, footer, headingLevel, data, xKey, series, entityColorMap, valueFormatter = defaultValueFormatter, axisFormatter, otherLabel = "Other", emptyState, size = "default", className, }) {
     const folded = foldOtherSeries(series, data, entityColorMap, otherLabel);
     const chartConfig = chartSeriesConfig(folded.series, entityColorMap);
     const domainMax = seriesAxisMax(folded.data, folded.series.map((entry) => entry.id));
-    return (_jsx(ChartCard, { title: title, description: description, action: action, footer: footer, ...(headingLevel ? { headingLevel } : {}), className: className, children: (titleId) => emptyState && data.length === 0 ? (emptyState) : (_jsx(ChartContainer, { config: chartConfig, className: chartPlotClassName(size), children: _jsxs(BarChart, { accessibilityLayer: true, "aria-labelledby": titleId, data: folded.data, children: [_jsx(CartesianGrid, { strokeDasharray: "3 3" }), _jsx(XAxis, { dataKey: xKey, tickLine: false, tickMargin: 10, axisLine: false }), _jsx(YAxis, { width: "auto", tickLine: false, axisLine: false, tickMargin: 8, tickCount: CHART_Y_AXIS_TICK_COUNT, ...(domainMax === undefined
+    return (_jsx(ChartCard, { title: title, description: description, action: action, summary: summary, aside: aside, footer: footer, ...(headingLevel ? { headingLevel } : {}), className: className, children: (titleId) => emptyState && data.length === 0 ? (emptyState) : (_jsx(ChartContainer, { config: chartConfig, className: chartPlotClassName(size), children: _jsxs(BarChart, { accessibilityLayer: true, "aria-labelledby": titleId, data: folded.data, children: [_jsx(CartesianGrid, { strokeDasharray: "3 3" }), _jsx(XAxis, { dataKey: xKey, tickLine: false, tickMargin: 10, axisLine: false }), _jsx(YAxis, { width: "auto", tickLine: false, axisLine: false, tickMargin: 8, tickCount: CHART_Y_AXIS_TICK_COUNT, ...(domainMax === undefined
                             ? {}
                             : {
                                 domain: [0, domainMax],

package/dist/components/chart-bar-stacked.d.ts

@@ -1,5 +1,5 @@
 import { type ChartCardProps } from "./chart-card.js";
-declare function ChartBarStacked({ title, description, action, footer, headingLevel, data, xKey, series, entityColorMap, valueFormatter, axisFormatter, otherLabel, emptyState, size, share, className, }: ChartCardProps & {
+declare function ChartBarStacked({ title, description, action, summary, aside, footer, headingLevel, data, xKey, series, entityColorMap, valueFormatter, axisFormatter, otherLabel, emptyState, size, share, className, }: ChartCardProps & {
     /**
      * One bar across the card, each entity a segment of 100%: the share of a
      * total with no time axis. `data` is then a single row keyed by series id.

package/dist/components/chart-bar-stacked.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"chart-bar-stacked.d.ts","sourceRoot":"","sources":["../../src/components/chart-bar-stacked.tsx"],"names":[],"mappings":"AAcA,OAAO,EAOL,KAAK,cAAc,EACpB,MAAM,yBAAyB,CAAC;AAmBjC,iBAAS,eAAe,CAAC,EACvB,KAAK,EACL,WAAW,EACX,MAAM,EACN,MAAM,EACN,YAAY,EACZ,IAAI,EACJ,IAAI,EACJ,MAAM,EACN,cAAc,EACd,cAAsC,EACtC,aAAa,EACb,UAAoB,EACpB,UAAU,EACV,IAAgB,EAChB,KAAa,EACb,SAAS,GACV,EAAE,cAAc,GAAG;IAClB;;;OAGG;IACH,KAAK,CAAC,EAAE,OAAO,CAAC;CACjB,+BA8FA;AAED,OAAO,EAAE,eAAe,EAAE,CAAC"}
+{"version":3,"file":"chart-bar-stacked.d.ts","sourceRoot":"","sources":["../../src/components/chart-bar-stacked.tsx"],"names":[],"mappings":"AAcA,OAAO,EAOL,KAAK,cAAc,EACpB,MAAM,yBAAyB,CAAC;AAmBjC,iBAAS,eAAe,CAAC,EACvB,KAAK,EACL,WAAW,EACX,MAAM,EACN,OAAO,EACP,KAAK,EACL,MAAM,EACN,YAAY,EACZ,IAAI,EACJ,IAAI,EACJ,MAAM,EACN,cAAc,EACd,cAAsC,EACtC,aAAa,EACb,UAAoB,EACpB,UAAU,EACV,IAAgB,EAChB,KAAa,EACb,SAAS,GACV,EAAE,cAAc,GAAG;IAClB;;;OAGG;IACH,KAAK,CAAC,EAAE,OAAO,CAAC;CACjB,+BAgGA;AAED,OAAO,EAAE,eAAe,EAAE,CAAC"}

package/dist/components/chart-bar-stacked.js

@@ -27,11 +27,11 @@ function shareRadius(index, count) {
         return [0, 4, 4, 0];
     return [0, 0, 0, 0];
 }
-function ChartBarStacked({ title, description, action, footer, headingLevel, data, xKey, series, entityColorMap, valueFormatter = defaultValueFormatter, axisFormatter, otherLabel = "Other", emptyState, size = "default", share = false, className, }) {
+function ChartBarStacked({ title, description, action, summary, aside, footer, headingLevel, data, xKey, series, entityColorMap, valueFormatter = defaultValueFormatter, axisFormatter, otherLabel = "Other", emptyState, size = "default", share = false, className, }) {
     const folded = foldOtherSeries(series, data, entityColorMap, otherLabel);
     const chartConfig = chartSeriesConfig(folded.series, entityColorMap);
     const domainMax = stackedAxisMax(folded.data, folded.series.map((entry) => entry.id));
-    return (_jsx(ChartCard, { title: title, description: description, action: action, footer: footer, ...(headingLevel ? { headingLevel } : {}), className: className, children: (titleId) => emptyState && data.length === 0 ? (emptyState) : share ? (_jsx(ChartContainer, { config: chartConfig, className: "aspect-auto h-16 w-full", children: _jsxs(BarChart, { accessibilityLayer: true, "aria-labelledby": titleId, data: folded.data, layout: "vertical", stackOffset: "expand", children: [_jsx(XAxis, { type: "number", hide: true }), _jsx(YAxis, { type: "category", dataKey: xKey, hide: true }), _jsx(ChartTooltip, { cursor: false, content: _jsx(ChartTooltipContent, { hideLabel: true, indicator: "line", valueFormatter: valueFormatter }) }), _jsx(ChartLegend, { itemSorter: null, content: _jsx(ChartLegendContent, { className: CHART_LEGEND_CLASS }) }), folded.series.map((entry, index) => (_jsx(Bar, { dataKey: entry.id, stackId: "a", fill: entityColor(entityColorMap, entry.id), radius: shareRadius(index, folded.series.length) }, entry.id)))] }) })) : (_jsx(ChartContainer, { config: chartConfig, className: chartPlotClassName(size), children: _jsxs(BarChart, { accessibilityLayer: true, "aria-labelledby": titleId, data: folded.data, children: [_jsx(CartesianGrid, { strokeDasharray: "3 3" }), _jsx(XAxis, { dataKey: xKey, tickLine: false, tickMargin: 10, axisLine: false }), _jsx(YAxis, { width: "auto", tickLine: false, axisLine: false, tickMargin: 8, tickCount: CHART_Y_AXIS_TICK_COUNT, ...(domainMax === undefined
+    return (_jsx(ChartCard, { title: title, description: description, action: action, summary: summary, aside: aside, footer: footer, ...(headingLevel ? { headingLevel } : {}), className: className, children: (titleId) => emptyState && data.length === 0 ? (emptyState) : share ? (_jsx(ChartContainer, { config: chartConfig, className: "aspect-auto h-16 w-full", children: _jsxs(BarChart, { accessibilityLayer: true, "aria-labelledby": titleId, data: folded.data, layout: "vertical", stackOffset: "expand", children: [_jsx(XAxis, { type: "number", hide: true }), _jsx(YAxis, { type: "category", dataKey: xKey, hide: true }), _jsx(ChartTooltip, { cursor: false, content: _jsx(ChartTooltipContent, { hideLabel: true, indicator: "line", valueFormatter: valueFormatter }) }), _jsx(ChartLegend, { itemSorter: null, content: _jsx(ChartLegendContent, { className: CHART_LEGEND_CLASS }) }), folded.series.map((entry, index) => (_jsx(Bar, { dataKey: entry.id, stackId: "a", fill: entityColor(entityColorMap, entry.id), radius: shareRadius(index, folded.series.length) }, entry.id)))] }) })) : (_jsx(ChartContainer, { config: chartConfig, className: chartPlotClassName(size), children: _jsxs(BarChart, { accessibilityLayer: true, "aria-labelledby": titleId, data: folded.data, children: [_jsx(CartesianGrid, { strokeDasharray: "3 3" }), _jsx(XAxis, { dataKey: xKey, tickLine: false, tickMargin: 10, axisLine: false }), _jsx(YAxis, { width: "auto", tickLine: false, axisLine: false, tickMargin: 8, tickCount: CHART_Y_AXIS_TICK_COUNT, ...(domainMax === undefined
                             ? {}
                             : {
                                 domain: [0, domainMax],

package/dist/components/chart-card.d.ts

@@ -1,6 +1,7 @@
 import * as React from "react";
 import type { ChartConfig } from "./chart.js";
 import { type EntityColorMap } from "./chart-entity-colors.js";
+import { type TrendDirection, type TrendTone } from "./trend-badge.js";
 /**
  * chart-card — the Card frame and series plumbing every chart in this kit
  * renders, so the four registry blocks (`chart-bar-stacked`,
@@ -17,6 +18,21 @@ type ChartSeries = {
 };
 type ChartDatum = Record<string, number | string>;
 type ChartCardSize = "default" | "lg";
+type ChartSummaryTrend = {
+    value: React.ReactNode;
+    direction: TrendDirection;
+    tone: TrendTone;
+    comparison: React.ReactNode;
+    directionLabel?: string;
+};
+type ChartSummaryProps = {
+    label: React.ReactNode;
+    value: React.ReactNode;
+    valueTitle?: string;
+    valueSize?: ChartCardSize;
+    trend?: ChartSummaryTrend;
+    status?: React.ReactNode;
+};
 type ChartCardProps = {
     title: React.ReactNode;
     description?: React.ReactNode;
@@ -24,6 +40,10 @@ type ChartCardProps = {
     headingLevel?: 2 | 3 | 4;
     /** Trailing header slot, e.g. an "Explore" link. */
     action?: React.ReactNode;
+    /** A measured summary between the header and plot. */
+    summary?: React.ReactNode;
+    /** Related ranking or breakdown beside the plot on wide cards. */
+    aside?: React.ReactNode;
     footer?: React.ReactNode;
     data: readonly ChartDatum[];
     /** The datum key carrying the category or period. */
@@ -56,10 +76,11 @@ declare function foldOtherSeries(series: readonly ChartSeries[], data: readonly
     series: ChartSeries[];
     data: ChartDatum[];
 };
-declare function ChartCard({ title, description, action, footer, headingLevel, className, children, }: Pick<ChartCardProps, "title" | "description" | "action" | "footer" | "headingLevel" | "className"> & {
+declare function ChartCard({ title, description, action, summary, aside, footer, headingLevel, className, children, }: Pick<ChartCardProps, "title" | "description" | "action" | "summary" | "aside" | "footer" | "headingLevel" | "className"> & {
     /** Receives the title's id, which the plot takes as `aria-labelledby`. */
     children: (titleId: string) => React.ReactNode;
 }): React.JSX.Element;
+declare function ChartSummary({ label, value, valueTitle, valueSize, trend, status, }: ChartSummaryProps): React.JSX.Element;
 /** The plot frame class: fixed height, no aspect ratio, full width. */
 declare function chartPlotClassName(size: ChartCardSize): string;
 /**
@@ -70,6 +91,6 @@ declare function chartPlotClassName(size: ChartCardSize): string;
 declare const CHART_FOCUS_CLASS = "[&_.recharts-surface:focus-visible]:nc-focus-outline [&_.recharts-surface:focus-visible]:outline-ring";
 /** Legend below the plot, left-aligned, wrapping to a second line. */
 declare const CHART_LEGEND_CLASS = "flex-wrap justify-start";
-export { CHART_FOCUS_CLASS, CHART_LEGEND_CLASS, ChartCard, chartPlotClassName, chartSeriesConfig, defaultValueFormatter, foldOtherSeries, };
-export type { ChartCardProps, ChartCardSize, ChartDatum, ChartSeries };
+export { CHART_FOCUS_CLASS, CHART_LEGEND_CLASS, ChartCard, ChartSummary, chartPlotClassName, chartSeriesConfig, defaultValueFormatter, foldOtherSeries, };
+export type { ChartCardProps, ChartCardSize, ChartDatum, ChartSeries, ChartSummaryProps, ChartSummaryTrend, };
 //# sourceMappingURL=chart-card.d.ts.map

package/dist/components/chart-card.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"chart-card.d.ts","sourceRoot":"","sources":["../../src/components/chart-card.tsx"],"names":[],"mappings":"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"}
+{"version":3,"file":"chart-card.d.ts","sourceRoot":"","sources":["../../src/components/chart-card.tsx"],"names":[],"mappings":"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"}

package/dist/components/chart-card.js

@@ -4,6 +4,7 @@ import * as React from "react";
 import { cn } from "../lib/utils.js";
 import { Card, CardAction, CardContent, CardDescription, CardFooter, CardHeader, CardTitle, } from "./card.js";
 import { CHART_ENTITY_OTHER_COLOR, entityColor, } from "./chart-entity-colors.js";
+import { TrendBadge } from "./trend-badge.js";
 /** Fixed plot heights, so charts on a page share one register. */
 const chartSizes = {
     default: "h-64",
@@ -52,9 +53,13 @@ function foldOtherSeries(series, data, entityColorMap, otherLabel) {
     });
     return { series: folded, data: foldedData };
 }
-function ChartCard({ title, description, action, footer, headingLevel = 2, className, children, }) {
+function ChartCard({ title, description, action, summary, aside, footer, headingLevel = 2, className, children, }) {
     const titleId = React.useId();
-    return (_jsxs(Card, { "data-slot": "chart-card", className: className, children: [_jsxs(CardHeader, { children: [_jsx(CardTitle, { id: titleId, role: "heading", "aria-level": headingLevel, children: title }), description ? _jsx(CardDescription, { children: description }) : null, action ? _jsx(CardAction, { children: action }) : null] }), _jsx(CardContent, { children: children(titleId) }), footer ? (_jsx(CardFooter, { className: "flex-col items-start gap-2 text-sm", children: footer })) : null] }));
+    return (_jsxs(Card, { "data-slot": "chart-card", className: cn("@container/chart-card", className), children: [_jsxs(CardHeader, { className: "has-data-[slot=card-action]:grid-cols-1 [&>[data-slot=card-action]]:col-start-1 [&>[data-slot=card-action]]:row-span-1 [&>[data-slot=card-action]]:row-start-3 [&>[data-slot=card-action]]:justify-self-start @md/chart-card:has-data-[slot=card-action]:grid-cols-[1fr_auto] @md/chart-card:[&>[data-slot=card-action]]:col-start-2 @md/chart-card:[&>[data-slot=card-action]]:row-span-2 @md/chart-card:[&>[data-slot=card-action]]:row-start-1 @md/chart-card:[&>[data-slot=card-action]]:justify-self-end", children: [_jsx(CardTitle, { id: titleId, role: "heading", "aria-level": headingLevel, children: title }), description ? _jsx(CardDescription, { children: description }) : null, action ? _jsx(CardAction, { children: action }) : null] }), summary ? (_jsx("div", { "data-slot": "chart-card-summary", className: "px-(--card-spacing)", children: summary })) : null, _jsxs(CardContent, { className: cn(aside &&
+                    "grid min-w-0 gap-(--card-spacing) lg:grid-cols-[minmax(0,2fr)_minmax(16rem,1fr)]"), children: [_jsx("div", { className: "min-w-0", children: children(titleId) }), aside ? (_jsx("aside", { "data-slot": "chart-card-aside", className: "min-w-0 border-t border-border pt-(--card-spacing) lg:border-t-0 lg:border-l lg:pt-0 lg:pl-(--card-spacing)", children: aside })) : null] }), footer ? (_jsx(CardFooter, { className: "flex-col items-start gap-2 text-sm", children: footer })) : null] }));
+}
+function ChartSummary({ label, value, valueTitle, valueSize = "default", trend, status, }) {
+    return (_jsxs("div", { "data-slot": "chart-summary", className: "flex flex-col items-start gap-2", children: [_jsx("div", { className: "text-muted-foreground text-sm", children: label }), _jsxs("div", { className: "flex min-w-0 flex-wrap items-center gap-3", children: [_jsx("div", { "data-slot": "chart-summary-value", className: cn("truncate font-semibold tracking-tight tabular-nums", valueSize === "lg" ? "text-3xl" : "text-2xl"), title: valueTitle, children: value }), trend ? (_jsx(TrendBadge, { direction: trend.direction, directionLabel: trend.directionLabel, tone: trend.tone, value: trend.value })) : null, status] }), trend ? (_jsx("div", { "data-slot": "chart-summary-comparison", className: "text-muted-foreground text-sm", children: trend.comparison })) : null] }));
 }
 /** The plot frame class: fixed height, no aspect ratio, full width. */
 function chartPlotClassName(size) {
@@ -68,4 +73,4 @@ function chartPlotClassName(size) {
 const CHART_FOCUS_CLASS = "[&_.recharts-surface:focus-visible]:nc-focus-outline [&_.recharts-surface:focus-visible]:outline-ring";
 /** Legend below the plot, left-aligned, wrapping to a second line. */
 const CHART_LEGEND_CLASS = "flex-wrap justify-start";
-export { CHART_FOCUS_CLASS, CHART_LEGEND_CLASS, ChartCard, chartPlotClassName, chartSeriesConfig, defaultValueFormatter, foldOtherSeries, };
+export { CHART_FOCUS_CLASS, CHART_LEGEND_CLASS, ChartCard, ChartSummary, chartPlotClassName, chartSeriesConfig, defaultValueFormatter, foldOtherSeries, };

package/dist/components/heatmap/calendar-heatmap.d.ts

@@ -0,0 +1,138 @@
+import type { Locale, Day as WeekDay } from "date-fns";
+import type { CSSProperties, HTMLAttributes, ReactNode } from "react";
+export type Activity = {
+    date: string;
+    value: number | null;
+};
+type ActivityWithLevel = Activity & {
+    level: number;
+    measured: boolean;
+};
+export type Labels = {
+    months?: string[];
+    weekdays?: string[];
+    stat?: string;
+    cellLabel?: string | ((activity: Activity) => string);
+    unavailable?: string;
+    heatmapLabel?: string;
+    legendLabel?: string;
+    legendLevelLabel?: string;
+};
+export type ColorConfig = {
+    empty?: string;
+    scale?: string;
+    unavailable?: string;
+};
+export type CalendarHeatmapProps = HTMLAttributes<HTMLDivElement> & {
+    data: Activity[];
+    weekStart?: WeekDay;
+    continuousMonths?: boolean;
+    singleRow?: boolean;
+    hasEmptyColumn?: boolean;
+    blockSize?: number;
+    blockMargin?: number;
+    blockRadius?: number;
+    blockAspectRatio?: number;
+    levels?: number;
+    isNormalized?: boolean;
+    colors?: ColorConfig;
+    locale?: Locale;
+    labels?: Labels;
+    fontSize?: number;
+    emptyState?: ReactNode;
+    totalCount?: number;
+    style?: CSSProperties;
+    className?: string;
+    children: ReactNode;
+};
+/**
+ * Calendar Heatmap
+ *
+ * A GitHub-style contribution calendar showing daily activity over months and years.
+ * Each cell represents one day, arranged in weeks (rows) and months (columns).
+ *
+ * @example
+ * ```tsx
+ * <CalendarHeatmap data={data} weekStart={1} continuousMonths>
+ *   <CalendarHeatmapBody>
+ *     {({ activity, dayIndex, weekIndex }) => (
+ *       <CalendarHeatmapBlock
+ *         activity={activity}
+ *         dayIndex={dayIndex}
+ *         weekIndex={weekIndex}
+ *       />
+ *     )}
+ *   </CalendarHeatmapBody>
+ *   <CalendarHeatmapFooter>
+ *     <CalendarHeatmapStat />
+ *     <CalendarHeatmapLegend />
+ *   </CalendarHeatmapFooter>
+ * </CalendarHeatmap>
+ * ```
+ *
+ * @param data - Array of activities with date (YYYY-MM-DD) and value
+ * @param weekStart - First day of week (0=Sunday, 1=Monday). Default: 0
+ * @param continuousMonths - Display months continuously vs. grouped by year. Default: true
+ * @param singleRow - Keep a continuous range in one row across year boundaries. Default: false
+ * @param hasEmptyColumn - Add empty column between months. Default: false
+ * @param blockAspectRatio - Width/height ratio of blocks. Default: 1
+ * @param levels - Total number of legend cells (including empty when not normalized). Default: 5
+ * @param isNormalized - When true, uses min-max normalization across the dataset (suitable for signed values). When false (default), treats 0 as empty and scales from 0 to max.
+ */
+export declare const CalendarHeatmap: ({ data, weekStart, continuousMonths, singleRow, hasEmptyColumn, blockSize, blockMargin, blockRadius, blockAspectRatio, levels: levelsProp, isNormalized, colors, locale, labels: labelsProp, fontSize, emptyState, totalCount: totalCountProp, style, className, children, ...props }: CalendarHeatmapProps) => string | number | bigint | true | import("react").JSX.Element | Iterable<ReactNode> | Promise<string | number | bigint | boolean | import("react").ReactPortal | import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>> | Iterable<ReactNode> | null | undefined> | null;
+export type CalendarHeatmapBlockProps = HTMLAttributes<SVGRectElement> & {
+    activity: ActivityWithLevel;
+    dayIndex: number;
+    weekIndex: number;
+    highlighted?: boolean;
+    onCellClick?: (activity: ActivityWithLevel) => void;
+    onCellHover?: (activity: ActivityWithLevel | null) => void;
+};
+export declare const CalendarHeatmapBlock: {
+    ({ ref, activity, dayIndex, weekIndex, highlighted, onCellClick, onCellHover, onClick, onKeyDown, onMouseEnter, onMouseLeave, className, style: styleProp, ...props }: CalendarHeatmapBlockProps & {
+        ref?: React.RefObject<SVGRectElement | null>;
+    }): import("react").JSX.Element;
+    displayName: string;
+};
+export type CalendarHeatmapBodyProps = Omit<HTMLAttributes<HTMLDivElement>, "children"> & {
+    hideMonthLabels?: boolean;
+    hideWeekdayLabels?: boolean;
+    hideYearLabels?: boolean;
+    className?: string;
+    labelClassName?: string;
+    yearClassName?: string;
+    children: (props: {
+        activity: ActivityWithLevel;
+        dayIndex: number;
+        weekIndex: number;
+    }) => ReactNode;
+    renderYearFooter?: (props: {
+        year: number;
+        totalCount: number;
+    }) => ReactNode;
+};
+export declare const CalendarHeatmapBody: ({ hideMonthLabels, hideWeekdayLabels, hideYearLabels, className, labelClassName, yearClassName, children, renderYearFooter, ...props }: CalendarHeatmapBodyProps) => import("react").JSX.Element;
+export type CalendarHeatmapFooterProps = HTMLAttributes<HTMLDivElement>;
+export declare const CalendarHeatmapFooter: ({ className, ...props }: CalendarHeatmapFooterProps) => import("react").JSX.Element;
+export type CalendarHeatmapStatProps = Omit<HTMLAttributes<HTMLDivElement>, "children"> & {
+    compute?: (data: ActivityWithLevel[]) => number | string;
+    label?: string;
+    children?: (result: {
+        value: number | string;
+        data: ActivityWithLevel[];
+        year: number;
+    }) => ReactNode;
+};
+export declare const CalendarHeatmapStat: ({ compute, label, className, children, ...props }: CalendarHeatmapStatProps) => import("react").JSX.Element;
+export type CalendarHeatmapLegendProps = Omit<HTMLAttributes<HTMLFieldSetElement>, "children"> & {
+    labels?: {
+        less?: string;
+        more?: string;
+    };
+    children?: (props: {
+        level: number;
+    }) => ReactNode;
+};
+export declare const CalendarHeatmapLegend: ({ labels: labelsProp, className, children, ...props }: CalendarHeatmapLegendProps) => import("react").JSX.Element;
+export {};
+//# sourceMappingURL=calendar-heatmap.d.ts.map