@joewinke/jatui 0.40.0 → 0.41.0

package/dist/components/settings/SettingsRow.svelte.d.ts

@@ -0,0 +1,32 @@
+export interface SettingsRowContext {
+    /** Id to put on the control (the label points at it). */
+    id: string;
+    labelId: string;
+    /** Undefined when there is no description. */
+    descriptionId: string | undefined;
+}
+import type { Snippet } from 'svelte';
+interface Props {
+    label: string;
+    description?: string;
+    /** Id of the control the label is for. Default: generated, passed as `ctx.id`. */
+    for?: string;
+    /** 'inline' (default) puts the control beside the text; 'stacked' always below. */
+    layout?: 'inline' | 'stacked';
+    /** Unsaved-change dot. */
+    dirty?: boolean;
+    disabled?: boolean;
+    /** Validation / warning text under the description. */
+    error?: string;
+    /** Anchor id for deep links. */
+    id?: string;
+    control?: Snippet<[SettingsRowContext]>;
+    /** Extra content under the row (an expanded sub-form). */
+    children?: Snippet;
+    /** Custom label content (badge, icon). It becomes the accessible name, so include the text. */
+    labelContent?: Snippet;
+    class?: string;
+}
+declare const SettingsRow: import("svelte").Component<Props, {}, "">;
+type SettingsRow = ReturnType<typeof SettingsRow>;
+export default SettingsRow;

package/dist/components/settings/SettingsSection.svelte

@@ -0,0 +1,139 @@
+<!--
+  SettingsSection: a titled group of SettingsRows (jatui-6kitr). Rows inside
+  get hairline dividers. Give it an `id` + use it with SectionNav for long
+  settings pages; `dirty` shows the same amber dot SectionNav uses.
+  Row recipe after BoardUI's settings rows (MIT, © 2026 Mertcan Dundar
+  Esmergul); the modal shell was intentionally not taken.
+-->
+<script lang="ts">
+	import type { Snippet } from 'svelte';
+
+	interface Props {
+		title?: string;
+		description?: string;
+		/** Anchor id (SectionNav target). */
+		id?: string;
+		/** 'card' (default) frames the rows; 'plain' is flush. */
+		variant?: 'card' | 'plain';
+		headingLevel?: 2 | 3 | 4;
+		/** Unsaved-changes dot beside the title. */
+		dirty?: boolean;
+		/** Header controls (Reset, Save…). */
+		actions?: Snippet;
+		/** Footer under the rows (save bar, help link). */
+		footer?: Snippet;
+		children: Snippet;
+		class?: string;
+	}
+
+	let {
+		title,
+		description,
+		id,
+		variant = 'card',
+		headingLevel = 2,
+		dirty = false,
+		actions,
+		footer,
+		children,
+		class: className = ''
+	}: Props = $props();
+
+	const uid = $props.id();
+</script>
+
+<section
+	{id}
+	class="jatui-settings-section ss-{variant} {className}"
+	aria-labelledby={title ? `${uid}-title` : undefined}
+	aria-describedby={description ? `${uid}-desc` : undefined}
+>
+	{#if title || description || actions}
+		<header class="ss-head">
+			<div class="ss-titles">
+				{#if title}
+					<svelte:element this={`h${headingLevel}`} class="ss-title" id="{uid}-title">
+						{title}
+						{#if dirty}
+							<span class="ss-dirty" aria-hidden="true"></span><span class="sr-only">(unsaved changes)</span>
+						{/if}
+					</svelte:element>
+				{/if}
+				{#if description}<p class="ss-desc" id="{uid}-desc">{description}</p>{/if}
+			</div>
+			{#if actions}<div class="ss-actions">{@render actions()}</div>{/if}
+		</header>
+	{/if}
+	<div class="ss-rows">
+		{@render children()}
+	</div>
+	{#if footer}<div class="ss-footer">{@render footer()}</div>{/if}
+</section>
+
+<style>
+	.jatui-settings-section {
+		display: flex;
+		flex-direction: column;
+		gap: var(--jatui-space-base, 8px);
+		min-width: 0;
+		scroll-margin-top: var(--jatui-space-xl, 16px);
+	}
+	.ss-head {
+		display: flex;
+		align-items: flex-end;
+		justify-content: space-between;
+		gap: var(--jatui-space-lg, 12px);
+		padding: 0 var(--jatui-space-xs, 2px);
+	}
+	.ss-titles {
+		min-width: 0;
+	}
+	.ss-title {
+		display: inline-flex;
+		align-items: center;
+		gap: var(--jatui-space-md, 6px);
+		margin: 0;
+		font-size: 0.9375rem;
+		font-weight: 600;
+		color: var(--color-base-content);
+	}
+	.ss-dirty {
+		width: 0.5rem;
+		height: 0.5rem;
+		border-radius: 9999px;
+		background: var(--color-warning);
+	}
+	.ss-desc {
+		margin: 2px 0 0;
+		font-size: 0.8125rem;
+		color: color-mix(in oklch, var(--color-base-content) 60%, transparent);
+	}
+	.ss-actions {
+		display: flex;
+		align-items: center;
+		gap: var(--jatui-space-base, 8px);
+		flex: none;
+	}
+	.ss-rows {
+		display: flex;
+		flex-direction: column;
+		container-type: inline-size;
+	}
+	.ss-card .ss-rows {
+		border: var(--jatui-border-w, 1px) solid color-mix(in oklch, var(--color-base-content) 10%, transparent);
+		border-radius: var(--jatui-radius-box, 0.5rem);
+		background: var(--color-base-100);
+	}
+	/* Hairline between rows. */
+	.ss-rows > :global(.jatui-settings-row + .jatui-settings-row) {
+		border-top: var(--jatui-border-w, 1px) solid color-mix(in oklch, var(--color-base-content) 8%, transparent);
+	}
+	.ss-card .ss-rows > :global(.jatui-settings-row) {
+		padding-inline: var(--jatui-space-xl, 16px);
+	}
+	.ss-footer {
+		display: flex;
+		justify-content: flex-end;
+		gap: var(--jatui-space-base, 8px);
+	}
+</style>

package/dist/components/settings/SettingsSection.svelte.d.ts

@@ -0,0 +1,21 @@
+import type { Snippet } from 'svelte';
+interface Props {
+    title?: string;
+    description?: string;
+    /** Anchor id (SectionNav target). */
+    id?: string;
+    /** 'card' (default) frames the rows; 'plain' is flush. */
+    variant?: 'card' | 'plain';
+    headingLevel?: 2 | 3 | 4;
+    /** Unsaved-changes dot beside the title. */
+    dirty?: boolean;
+    /** Header controls (Reset, Save…). */
+    actions?: Snippet;
+    /** Footer under the rows (save bar, help link). */
+    footer?: Snippet;
+    children: Snippet;
+    class?: string;
+}
+declare const SettingsSection: import("svelte").Component<Props, {}, "">;
+type SettingsSection = ReturnType<typeof SettingsSection>;
+export default SettingsSection;

package/dist/components/stats/ActivityHeatmap.svelte

@@ -0,0 +1,412 @@
+<!--
+  ActivityHeatmap: GitHub-style "activity per day" calendar (jatui-6kitr).
+
+  Generalised from the IDE's StreakCalendar. Built from public behaviour only
+  (no BoardUI Pro source): 7 weekday rows × week columns, a token colour ramp
+  (color-mix from one theme colour into base-100, no hex), a single tooltip,
+  a legend and a summary line. One tab stop: arrows move by day/week inside
+  the grid (role="grid"), Enter/Space selects.
+-->
+<script lang="ts" generics="T = { date: string | Date; count: number }">
+	import { untrack } from 'svelte';
+	import { buildHeatmap, moveHeatFocus, parseDay, isoDay, type HeatDay } from './heatmap';
+
+	type Tone = 'primary' | 'secondary' | 'accent' | 'success' | 'info' | 'warning' | 'error';
+
+	interface Props {
+		/** One entry per day (several per day are summed). Default shape `{ date, count }`. */
+		data: readonly T[];
+		getDate?: (d: T) => string | Date;
+		getCount?: (d: T) => number;
+		/** Inclusive range. Default: the last 12 months ending `end`. */
+		start?: string | Date;
+		end?: string | Date;
+		/** Top row weekday: 0 Sunday (default), 1 Monday. */
+		weekStart?: 0 | 1 | 2 | 3 | 4 | 5 | 6;
+		/** Unit noun for tooltips and the summary: 'call' or ['call', 'calls']. */
+		unit?: string | [string, string];
+		/** Custom tooltip / accessible label for a day. */
+		formatLabel?: (day: HeatDay) => string;
+		/** Theme colour of the ramp. Default 'primary'. */
+		tone?: Tone;
+		/** Non-zero colour steps. Default 4. */
+		levels?: number;
+		levelOf?: (count: number, max: number, levels: number) => number;
+		/** Smaller cells and labels. */
+		compact?: boolean;
+		showLegend?: boolean;
+		showWeekdays?: boolean;
+		showMonths?: boolean;
+		/** "1,204 calls in the last year". false hides; a string replaces it. */
+		summary?: boolean | string;
+		/** Selected day "YYYY-MM-DD" (bindable). */
+		selected?: string | null;
+		onSelectDay?: (date: string, count: number) => void;
+		locale?: string;
+		ariaLabel?: string;
+		class?: string;
+	}
+
+	let {
+		data,
+		getDate = (d: T) => (d as { date: string | Date }).date,
+		getCount = (d: T) => (d as { count: number }).count,
+		start,
+		end,
+		weekStart = 0,
+		unit = ['item', 'items'],
+		formatLabel,
+		tone = 'primary',
+		levels = 4,
+		levelOf,
+		compact = false,
+		showLegend = true,
+		showWeekdays = true,
+		showMonths = true,
+		summary = true,
+		selected = $bindable(null),
+		onSelectDay,
+		locale,
+		ariaLabel = 'Activity by day',
+		class: className = ''
+	}: Props = $props();
+
+	const layout = $derived(
+		buildHeatmap({ data, getDate, getCount, start, end, weekStart, levels, levelOf, locale })
+	);
+	const byDate = $derived(new Map(layout.days.map((d) => [d.date, d])));
+	const today = isoDay(new Date());
+
+	const [one, many] = $derived(Array.isArray(unit) ? unit : [unit, unit + 's']);
+	const nf = $derived(new Intl.NumberFormat(locale));
+	const df = $derived(
+		new Intl.DateTimeFormat(locale, { weekday: 'short', month: 'short', day: 'numeric', year: 'numeric' })
+	);
+	const countText = (n: number) => `${n === 0 ? 'No' : nf.format(n)} ${n === 1 ? one : many}`;
+	const labelFor = (d: HeatDay) =>
+		formatLabel ? formatLabel(d) : `${countText(d.count)} on ${df.format(parseDay(d.date))}`;
+
+	const weekdayNames = $derived.by(() => {
+		const f = new Intl.DateTimeFormat(locale, { weekday: 'short' });
+		// 2023-01-01 was a Sunday.
+		return Array.from({ length: 7 }, (_, r) => f.format(new Date(2023, 0, 1 + ((r + weekStart) % 7), 12)));
+	});
+
+	const summaryText = $derived.by(() => {
+		if (summary === false) return '';
+		if (typeof summary === 'string') return summary;
+		const days = layout.days.length;
+		const span = days >= 365 && days <= 366 ? 'in the last year' : `in ${nf.format(days)} days`;
+		return `${nf.format(layout.total)} ${layout.total === 1 ? one : many} ${span}`;
+	});
+
+	// Roving focus: selected day, else the last day in range.
+	let focusDate = $state<string | null>(untrack(() => selected));
+	const tabDate = $derived(
+		focusDate && byDate.has(focusDate) ? focusDate : selected && byDate.has(selected) ? selected : layout.end
+	);
+
+	let gridEl: HTMLDivElement | undefined = $state();
+	let scrollEl: HTMLDivElement | undefined = $state();
+	let tip = $state<{ day: HeatDay; x: number; y: number } | null>(null);
+	let wrapEl: HTMLDivElement | undefined = $state();
+
+	function showTip(day: HeatDay, cell: HTMLElement) {
+		if (!wrapEl) return;
+		const w = wrapEl.getBoundingClientRect();
+		const c = cell.getBoundingClientRect();
+		// Keep the centred tooltip inside the component.
+		const x = Math.min(Math.max(c.left - w.left + c.width / 2, 90), Math.max(90, w.width - 90));
+		tip = { day, x, y: c.top - w.top };
+	}
+
+	function cellEl(date: string): HTMLElement | null {
+		return gridEl?.querySelector<HTMLElement>(`[data-date="${date}"]`) ?? null;
+	}
+
+	function select(day: HeatDay) {
+		selected = day.date;
+		focusDate = day.date;
+		onSelectDay?.(day.date, day.count);
+	}
+
+	function onKeydown(e: KeyboardEvent) {
+		const t = e.target as HTMLElement;
+		const date = t.dataset.date;
+		if (!date) return;
+		if (e.key === 'Enter' || e.key === ' ') {
+			e.preventDefault();
+			const d = byDate.get(date);
+			if (d) select(d);
+			return;
+		}
+		if (e.key === 'Escape') {
+			tip = null;
+			return;
+		}
+		const next = moveHeatFocus(date, e.key, layout, e.ctrlKey || e.metaKey);
+		if (!next) return;
+		e.preventDefault();
+		focusDate = next;
+		queueMicrotask(() => {
+			const el = cellEl(next);
+			el?.focus();
+			el?.scrollIntoView?.({ block: 'nearest', inline: 'nearest' });
+		});
+	}
+
+	// Most recent weeks are the interesting ones: start scrolled to the end.
+	$effect(() => {
+		void layout.weeks;
+		if (scrollEl) scrollEl.scrollLeft = scrollEl.scrollWidth;
+	});
+</script>
+
+<div
+	class="jatui-heatmap tone-{tone} {className}"
+	class:is-compact={compact}
+	bind:this={wrapEl}
+	style:--weeks={layout.weeks}
+>
+	<div class="hm-scroll" bind:this={scrollEl}>
+		<div class="hm-body">
+			{#if showMonths}
+				<div class="hm-months" aria-hidden="true">
+					{#each layout.months as m (m.col)}
+						<span style:--col={m.col}>{m.label}</span>
+					{/each}
+				</div>
+			{/if}
+			<div class="hm-main">
+				{#if showWeekdays}
+					<div class="hm-weekdays" aria-hidden="true">
+						{#each weekdayNames as name, r}
+							<span>{r % 2 === 1 ? name : ''}</span>
+						{/each}
+					</div>
+				{/if}
+				<!-- svelte-ignore a11y_interactive_supports_focus -->
+				<div
+					class="hm-grid"
+					role="grid"
+					aria-label={ariaLabel}
+					tabindex="-1"
+					bind:this={gridEl}
+					onkeydown={onKeydown}
+					onmouseleave={() => (tip = null)}
+				>
+					{#each layout.rows as row, r (r)}
+						<div class="hm-row" role="row" aria-label={weekdayNames[r]}>
+							{#each row as day, c (c)}
+								{#if day}
+									<!-- Keys are handled on the grid (roving focus). -->
+									<!-- svelte-ignore a11y_click_events_have_key_events -->
+									<div
+										role="gridcell"
+										class="hm-cell lvl-{day.level}"
+										class:is-today={day.date === today}
+										class:is-selected={day.date === selected}
+										data-date={day.date}
+										tabindex={day.date === tabDate ? 0 : -1}
+										aria-label={labelFor(day)}
+										aria-selected={onSelectDay || selected != null ? day.date === selected : undefined}
+										onclick={() => select(day)}
+										onmouseenter={(e) => showTip(day, e.currentTarget as HTMLElement)}
+										onfocus={(e) => {
+											focusDate = day.date;
+											showTip(day, e.currentTarget as HTMLElement);
+										}}
+										onblur={() => (tip = null)}
+									></div>
+								{:else}
+									<div class="hm-cell is-pad" role="presentation"></div>
+								{/if}
+							{/each}
+						</div>
+					{/each}
+				</div>
+			</div>
+		</div>
+	</div>
+
+	{#if summaryText || showLegend}
+		<div class="hm-foot">
+			{#if summaryText}<span class="hm-summary">{summaryText}</span>{/if}
+			{#if showLegend}
+				<span class="hm-legend" aria-hidden="true">
+					<span>Less</span>
+					{#each Array.from({ length: levels + 1 }, (_, i) => i) as l (l)}
+						<span class="hm-cell lvl-{l}" style:--l={l}></span>
+					{/each}
+					<span>More</span>
+				</span>
+			{/if}
+		</div>
+	{/if}
+
+	{#if tip}
+		<div class="hm-tip" role="presentation" style:left="{tip.x}px" style:top="{tip.y}px">
+			{labelFor(tip.day)}
+		</div>
+	{/if}
+</div>
+
+<style>
+	.jatui-heatmap {
+		--hm-cell: 0.75rem;
+		--hm-gap: 3px;
+		--hm-tone: var(--color-primary);
+		--hm-empty: color-mix(in oklch, var(--color-base-content) 8%, var(--color-base-100));
+		position: relative;
+		display: flex;
+		flex-direction: column;
+		gap: var(--jatui-space-base, 8px);
+		min-width: 0;
+		max-width: 100%;
+		font-size: 0.75rem;
+		color: color-mix(in oklch, var(--color-base-content) 60%, transparent);
+	}
+	.jatui-heatmap.is-compact {
+		--hm-cell: 0.625rem;
+		--hm-gap: 2px;
+		font-size: 0.6875rem;
+	}
+	.tone-secondary { --hm-tone: var(--color-secondary); }
+	.tone-accent { --hm-tone: var(--color-accent); }
+	.tone-success { --hm-tone: var(--color-success); }
+	.tone-info { --hm-tone: var(--color-info); }
+	.tone-warning { --hm-tone: var(--color-warning); }
+	.tone-error { --hm-tone: var(--color-error); }
+
+	.hm-scroll {
+		overflow-x: auto;
+		overscroll-behavior-x: contain;
+		/* room for the focus ring */
+		padding: 2px;
+	}
+	.hm-body {
+		display: inline-flex;
+		flex-direction: column;
+		gap: var(--jatui-space-sm, 4px);
+	}
+	.hm-months {
+		position: relative;
+		height: 1.1em;
+		margin-inline-start: var(--hm-label-w, 0px);
+	}
+	.jatui-heatmap:has(.hm-weekdays) .hm-months {
+		--hm-label-w: calc(2.25em + var(--hm-gap));
+	}
+	.hm-months span {
+		position: absolute;
+		inset-inline-start: calc(var(--col) * (var(--hm-cell) + var(--hm-gap)));
+		white-space: nowrap;
+	}
+	.hm-main {
+		display: flex;
+		gap: var(--hm-gap);
+	}
+	.hm-weekdays {
+		display: flex;
+		flex-direction: column;
+		gap: var(--hm-gap);
+		width: 2.25em;
+	}
+	.hm-weekdays span {
+		height: var(--hm-cell);
+		line-height: var(--hm-cell);
+		font-size: 0.9em;
+	}
+	.hm-grid {
+		display: flex;
+		flex-direction: column;
+		gap: var(--hm-gap);
+		outline: none;
+	}
+	.hm-row {
+		display: flex;
+		gap: var(--hm-gap);
+	}
+	.hm-cell {
+		flex: none;
+		width: var(--hm-cell);
+		height: var(--hm-cell);
+		border-radius: calc(var(--jatui-radius-field, 0.25rem) * 0.75);
+		background: var(--hm-empty);
+		outline: none;
+	}
+	.hm-cell.is-pad {
+		background: transparent;
+	}
+	.lvl-1 { background: color-mix(in oklch, var(--hm-tone) 28%, var(--color-base-100)); }
+	.lvl-2 { background: color-mix(in oklch, var(--hm-tone) 50%, var(--color-base-100)); }
+	.lvl-3 { background: color-mix(in oklch, var(--hm-tone) 74%, var(--color-base-100)); }
+	.lvl-4,
+	.lvl-5,
+	.lvl-6 { background: var(--hm-tone); }
+	.hm-grid .hm-cell[role='gridcell'] {
+		cursor: pointer;
+		transition: transform var(--motion-fast, 150ms) var(--motion-standard, ease);
+	}
+	.hm-grid .hm-cell[role='gridcell']:hover {
+		transform: scale(1.2);
+	}
+	.hm-cell.is-today {
+		box-shadow: inset 0 0 0 1px color-mix(in oklch, var(--color-base-content) 45%, transparent);
+	}
+	.hm-cell.is-selected {
+		box-shadow:
+			0 0 0 1.5px var(--color-base-100),
+			0 0 0 3px var(--color-base-content);
+	}
+	.hm-cell:focus-visible {
+		box-shadow:
+			0 0 0 1.5px var(--color-base-100),
+			0 0 0 3px var(--color-primary);
+	}
+
+	.hm-foot {
+		display: flex;
+		flex-wrap: wrap;
+		align-items: center;
+		justify-content: space-between;
+		gap: var(--jatui-space-base, 8px);
+	}
+	.hm-legend {
+		display: inline-flex;
+		align-items: center;
+		gap: var(--hm-gap);
+		margin-inline-start: auto;
+	}
+	.hm-legend > span:first-child {
+		margin-inline-end: var(--jatui-space-sm, 4px);
+	}
+	.hm-legend > span:last-child {
+		margin-inline-start: var(--jatui-space-sm, 4px);
+	}
+
+	.hm-tip {
+		position: absolute;
+		z-index: 10;
+		transform: translate(-50%, calc(-100% - 6px));
+		padding: var(--jatui-space-sm, 4px) var(--jatui-space-base, 8px);
+		border-radius: var(--jatui-radius-field, 0.25rem);
+		background: var(--color-neutral);
+		color: var(--color-neutral-content);
+		font-size: 0.75rem;
+		white-space: nowrap;
+		pointer-events: none;
+	}
+
+	@media (prefers-reduced-motion: reduce) {
+		.hm-grid .hm-cell[role='gridcell'] {
+			transition: none;
+		}
+		.hm-grid .hm-cell[role='gridcell']:hover {
+			transform: none;
+		}
+	}
+	:global([data-motion='calm']) .hm-grid .hm-cell[role='gridcell']:hover {
+		transform: none;
+	}
+</style>

package/dist/components/stats/ActivityHeatmap.svelte.d.ts

@@ -0,0 +1,72 @@
+import { type HeatDay } from './heatmap';
+declare function $$render<T = {
+    date: string | Date;
+    count: number;
+}>(): {
+    props: {
+        /** One entry per day (several per day are summed). Default shape `{ date, count }`. */
+        data: readonly T[];
+        getDate?: (d: T) => string | Date;
+        getCount?: (d: T) => number;
+        /** Inclusive range. Default: the last 12 months ending `end`. */
+        start?: string | Date;
+        end?: string | Date;
+        /** Top row weekday: 0 Sunday (default), 1 Monday. */
+        weekStart?: 0 | 1 | 2 | 3 | 4 | 5 | 6;
+        /** Unit noun for tooltips and the summary: 'call' or ['call', 'calls']. */
+        unit?: string | [string, string];
+        /** Custom tooltip / accessible label for a day. */
+        formatLabel?: (day: HeatDay) => string;
+        /** Theme colour of the ramp. Default 'primary'. */
+        tone?: "error" | "warning" | "info" | "success" | "primary" | "secondary" | "accent";
+        /** Non-zero colour steps. Default 4. */
+        levels?: number;
+        levelOf?: (count: number, max: number, levels: number) => number;
+        /** Smaller cells and labels. */
+        compact?: boolean;
+        showLegend?: boolean;
+        showWeekdays?: boolean;
+        showMonths?: boolean;
+        /** "1,204 calls in the last year". false hides; a string replaces it. */
+        summary?: boolean | string;
+        /** Selected day "YYYY-MM-DD" (bindable). */
+        selected?: string | null;
+        onSelectDay?: (date: string, count: number) => void;
+        locale?: string;
+        ariaLabel?: string;
+        class?: string;
+    };
+    exports: {};
+    bindings: "selected";
+    slots: {};
+    events: {};
+};
+declare class __sveltets_Render<T = {
+    date: string | Date;
+    count: number;
+}> {
+    props(): ReturnType<typeof $$render<T>>['props'];
+    events(): ReturnType<typeof $$render<T>>['events'];
+    slots(): ReturnType<typeof $$render<T>>['slots'];
+    bindings(): "selected";
+    exports(): {};
+}
+interface $$IsomorphicComponent {
+    new <T = {
+        date: string | Date;
+        count: number;
+    }>(options: import('svelte').ComponentConstructorOptions<ReturnType<__sveltets_Render<T>['props']>>): import('svelte').SvelteComponent<ReturnType<__sveltets_Render<T>['props']>, ReturnType<__sveltets_Render<T>['events']>, ReturnType<__sveltets_Render<T>['slots']>> & {
+        $$bindings?: ReturnType<__sveltets_Render<T>['bindings']>;
+    } & ReturnType<__sveltets_Render<T>['exports']>;
+    <T = {
+        date: string | Date;
+        count: number;
+    }>(internal: unknown, props: ReturnType<__sveltets_Render<T>['props']> & {}): ReturnType<__sveltets_Render<T>['exports']>;
+    z_$$bindings?: ReturnType<__sveltets_Render<any>['bindings']>;
+}
+declare const ActivityHeatmap: $$IsomorphicComponent;
+type ActivityHeatmap<T = {
+    date: string | Date;
+    count: number;
+}> = InstanceType<typeof ActivityHeatmap<T>>;
+export default ActivityHeatmap;