@joewinke/jatui 0.40.0 → 0.41.0

package/dist/components/stats/StatCard.svelte

@@ -0,0 +1,387 @@
+<!--
+  StatCard: one KPI tile (jatui-6kitr). Label, a value that counts to its
+  new number, a delta chip toned by direction, caption, optional icon tile,
+  info tooltip and an inline sparkline (plain SVG, no chart library).
+
+  Two looks after BoardUI's stat cards (MIT, © 2026 Mertcan Dundar
+  Esmergul): `plain` and `footer` (caption + delta in a footer band). All
+  colour comes from theme tokens; deltas use success / error / neutral, never
+  fixed hues. Group several with StatGroup.
+-->
+<script lang="ts" module>
+	export type StatTone = 'primary' | 'secondary' | 'accent' | 'success' | 'info' | 'warning' | 'error' | 'neutral';
+</script>
+
+<script lang="ts">
+	import type { Snippet } from 'svelte';
+	import AnimatedNumber from '../AnimatedNumber.svelte';
+	import { tooltip } from '../../actions/tooltip';
+
+	interface Props {
+		label: string;
+		/** A number animates; a string is shown as-is. */
+		value: number | string | null | undefined;
+		format?: Intl.NumberFormatOptions;
+		/** Number animation: 'tween' (default) counts, 'roll' is the odometer, false is static. */
+		animate?: 'tween' | 'roll' | false;
+		/** A number is a FRACTION (0.125 → "+12.5%"); a string is shown as-is. */
+		delta?: number | string | null;
+		deltaFormat?: Intl.NumberFormatOptions;
+		/** 'auto' tones by sign. */
+		deltaTone?: 'auto' | 'success' | 'error' | 'neutral';
+		/** For metrics where down is good (churn, cost, response time). */
+		invertDelta?: boolean;
+		caption?: string;
+		/** Help text behind an (i) icon. */
+		info?: string;
+		/** Trend values drawn as a small inline line. */
+		sparkline?: readonly number[];
+		variant?: 'plain' | 'footer';
+		/** Icon tile tint. */
+		tone?: StatTone;
+		size?: 'sm' | 'md';
+		/** Makes the whole card a link. */
+		href?: string;
+		loading?: boolean;
+		icon?: Snippet;
+		/** Extra content under the value (or in the footer band for `footer`). */
+		children?: Snippet;
+		locale?: string;
+		class?: string;
+	}
+
+	let {
+		label,
+		value,
+		format,
+		animate = 'tween',
+		delta = null,
+		deltaFormat = { style: 'percent', maximumFractionDigits: 1, signDisplay: 'exceptZero' },
+		deltaTone = 'auto',
+		invertDelta = false,
+		caption,
+		info,
+		sparkline,
+		variant = 'plain',
+		tone = 'primary',
+		size = 'md',
+		href,
+		loading = false,
+		icon,
+		children,
+		locale,
+		class: className = ''
+	}: Props = $props();
+
+	const uid = $props.id();
+
+	const deltaText = $derived(
+		delta == null ? '' : typeof delta === 'number' ? new Intl.NumberFormat(locale, deltaFormat).format(delta) : delta
+	);
+	const direction = $derived.by((): 'up' | 'down' | 'flat' => {
+		if (delta == null) return 'flat';
+		const n = typeof delta === 'number' ? delta : parseFloat(delta.replace(/[^\d.+-]/g, ''));
+		if (!Number.isFinite(n) || n === 0) return 'flat';
+		return n > 0 ? 'up' : 'down';
+	});
+	const resolvedTone = $derived.by(() => {
+		if (deltaTone !== 'auto') return deltaTone;
+		if (direction === 'flat') return 'neutral';
+		return (direction === 'up') !== invertDelta ? 'success' : 'error';
+	});
+
+	const staticValue = $derived(
+		value == null ? '—' : typeof value === 'number' ? new Intl.NumberFormat(locale, format).format(value) : value
+	);
+
+	// Inline sparkline path in a 100×28 box.
+	const spark = $derived.by(() => {
+		const pts = (sparkline ?? []).filter((v) => Number.isFinite(v));
+		if (pts.length < 2) return null;
+		const min = Math.min(...pts);
+		const max = Math.max(...pts);
+		const span = max - min || 1;
+		const xy = pts.map((v, i) => [(i / (pts.length - 1)) * 100, 26 - ((v - min) / span) * 24] as const);
+		const line = xy.map(([x, y], i) => `${i ? 'L' : 'M'}${x.toFixed(2)} ${y.toFixed(2)}`).join(' ');
+		return { line, area: `${line} L100 28 L0 28 Z` };
+	});
+</script>
+
+{#snippet deltaChip()}
+	{#if deltaText}
+		<span class="sc-delta tone-{resolvedTone}">
+			{#if direction !== 'flat'}
+				<svg viewBox="0 0 12 12" aria-hidden="true" class:is-down={direction === 'down'}>
+					<path d="M6 2.5v7M2.75 5.5 6 2.25 9.25 5.5" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" />
+				</svg>
+				<span class="sr-only">{direction === 'up' ? 'Up' : 'Down'}</span>
+			{/if}
+			{deltaText}
+		</span>
+	{/if}
+{/snippet}
+
+{#snippet body()}
+	<div class="sc-main">
+		<div class="sc-head">
+			{#if icon}
+				<span class="sc-icon tone-{tone}" aria-hidden="true">{@render icon()}</span>
+			{/if}
+			<span class="sc-label" id="{uid}-label">{label}</span>
+			{#if info}
+				<span
+					class="sc-info"
+					role="img"
+					aria-label={info}
+					use:tooltip={{ text: info, placement: 'top' }}
+				>
+					<svg viewBox="0 0 16 16" aria-hidden="true">
+						<circle cx="8" cy="8" r="6.25" fill="none" stroke="currentColor" stroke-width="1.25" />
+						<path d="M8 7.25v3.5M8 5.1v.05" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" />
+					</svg>
+				</span>
+			{/if}
+		</div>
+		<div class="sc-value-row">
+			{#if loading}
+				<span class="sc-skeleton" aria-hidden="true"></span>
+				<span class="sr-only">Loading</span>
+			{:else}
+				<span class="sc-value">
+					{#if typeof value === 'number' && animate}
+						<AnimatedNumber {value} format={format ?? {}} mode={animate} />
+					{:else}
+						{staticValue}
+					{/if}
+				</span>
+				{#if variant === 'plain'}{@render deltaChip()}{/if}
+			{/if}
+			{#if spark && !loading}
+				<svg class="sc-spark" viewBox="0 0 100 28" preserveAspectRatio="none" aria-hidden="true">
+					<path d={spark.area} class="sc-spark-area" />
+					<path d={spark.line} class="sc-spark-line" vector-effect="non-scaling-stroke" />
+				</svg>
+			{/if}
+		</div>
+		{#if variant === 'plain' && caption}
+			<p class="sc-caption">{caption}</p>
+		{/if}
+		{#if variant === 'plain' && children}{@render children()}{/if}
+	</div>
+	{#if variant === 'footer' && (caption || deltaText || children)}
+		<div class="sc-footer">
+			{#if caption}<span class="sc-caption">{caption}</span>{/if}
+			{#if children}{@render children()}{/if}
+			{@render deltaChip()}
+		</div>
+	{/if}
+{/snippet}
+
+{#if href}
+	<a
+		{href}
+		class="jatui-stat-card sc-{variant} sc-{size} is-link {className}"
+		aria-labelledby="{uid}-label"
+		aria-busy={loading || undefined}
+	>
+		{@render body()}
+	</a>
+{:else}
+	<div
+		class="jatui-stat-card sc-{variant} sc-{size} {className}"
+		role="group"
+		aria-labelledby="{uid}-label"
+		aria-busy={loading || undefined}
+	>
+		{@render body()}
+	</div>
+{/if}
+
+<style>
+	.jatui-stat-card {
+		--sc-pad: var(--jatui-space-xl, 16px);
+		display: flex;
+		flex-direction: column;
+		min-width: 0;
+		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);
+		color: var(--color-base-content);
+		text-decoration: none;
+		overflow: hidden;
+	}
+	.sc-sm {
+		--sc-pad: var(--jatui-space-lg, 12px);
+	}
+	.is-link {
+		transition: border-color var(--motion-fast, 150ms) var(--motion-standard, ease);
+	}
+	.is-link:hover {
+		border-color: color-mix(in oklch, var(--color-base-content) 25%, transparent);
+	}
+	.is-link:focus-visible {
+		outline: 2px solid var(--color-primary);
+		outline-offset: 2px;
+	}
+
+	.sc-main {
+		display: flex;
+		flex-direction: column;
+		gap: var(--jatui-space-base, 8px);
+		padding: var(--sc-pad);
+		flex: 1 1 auto;
+	}
+	.sc-head {
+		display: flex;
+		align-items: center;
+		gap: var(--jatui-space-base, 8px);
+		min-width: 0;
+	}
+	.sc-label {
+		min-width: 0;
+		overflow: hidden;
+		text-overflow: ellipsis;
+		white-space: nowrap;
+		font-size: 0.8125rem;
+		font-weight: 500;
+		color: color-mix(in oklch, var(--color-base-content) 65%, transparent);
+	}
+	.sc-info {
+		display: inline-flex;
+		width: 0.875rem;
+		height: 0.875rem;
+		flex: none;
+		color: color-mix(in oklch, var(--color-base-content) 45%, transparent);
+		cursor: help;
+	}
+	.sc-info svg {
+		width: 100%;
+		height: 100%;
+	}
+
+	.sc-icon {
+		--sc-tone: var(--color-primary);
+		display: inline-flex;
+		align-items: center;
+		justify-content: center;
+		flex: none;
+		width: 2rem;
+		height: 2rem;
+		border-radius: var(--jatui-radius-field, 0.25rem);
+		background: color-mix(in oklch, var(--sc-tone) 14%, var(--color-base-100));
+		color: var(--sc-tone);
+	}
+	.sc-sm .sc-icon {
+		width: 1.625rem;
+		height: 1.625rem;
+	}
+	.sc-icon :global(svg) {
+		width: 55%;
+		height: 55%;
+	}
+	.sc-icon.tone-secondary { --sc-tone: var(--color-secondary); }
+	.sc-icon.tone-accent { --sc-tone: var(--color-accent); }
+	.sc-icon.tone-success { --sc-tone: var(--color-success); }
+	.sc-icon.tone-info { --sc-tone: var(--color-info); }
+	.sc-icon.tone-warning { --sc-tone: var(--color-warning); }
+	.sc-icon.tone-error { --sc-tone: var(--color-error); }
+	.sc-icon.tone-neutral { --sc-tone: var(--color-base-content); }
+
+	.sc-value-row {
+		display: flex;
+		align-items: center;
+		flex-wrap: wrap;
+		gap: var(--jatui-space-base, 8px);
+		min-height: 2.25rem;
+	}
+	.sc-value {
+		font-size: 1.75rem;
+		line-height: 1.15;
+		font-weight: 600;
+		letter-spacing: -0.01em;
+		font-variant-numeric: tabular-nums;
+	}
+	.sc-sm .sc-value {
+		font-size: 1.375rem;
+	}
+	.sc-skeleton {
+		display: block;
+		width: 6rem;
+		height: 1.75rem;
+		border-radius: var(--jatui-radius-field, 0.25rem);
+		background: color-mix(in oklch, var(--color-base-content) 10%, transparent);
+		animation: sc-pulse 1.4s ease-in-out infinite;
+	}
+	@keyframes sc-pulse {
+		50% {
+			opacity: 0.5;
+		}
+	}
+
+	.sc-delta {
+		--sc-d: var(--color-base-content);
+		display: inline-flex;
+		align-items: center;
+		gap: 2px;
+		padding: 1px var(--jatui-space-md, 6px);
+		border-radius: var(--jatui-radius-selector, 0.375rem);
+		background: color-mix(in oklch, var(--sc-d) 12%, transparent);
+		color: color-mix(in oklch, var(--sc-d) 85%, var(--color-base-content));
+		font-size: 0.75rem;
+		font-weight: 600;
+		font-variant-numeric: tabular-nums;
+		white-space: nowrap;
+	}
+	.sc-delta.tone-success { --sc-d: var(--color-success); }
+	.sc-delta.tone-error { --sc-d: var(--color-error); }
+	.sc-delta.tone-neutral {
+		--sc-d: var(--color-base-content);
+		color: color-mix(in oklch, var(--color-base-content) 65%, transparent);
+	}
+	.sc-delta svg {
+		width: 0.75rem;
+		height: 0.75rem;
+	}
+	.sc-delta svg.is-down {
+		transform: rotate(180deg);
+	}
+
+	.sc-caption {
+		margin: 0;
+		font-size: 0.75rem;
+		color: color-mix(in oklch, var(--color-base-content) 55%, transparent);
+	}
+	.sc-footer {
+		display: flex;
+		align-items: center;
+		justify-content: space-between;
+		gap: var(--jatui-space-base, 8px);
+		padding: var(--jatui-space-base, 8px) var(--sc-pad);
+		border-top: var(--jatui-border-w, 1px) solid color-mix(in oklch, var(--color-base-content) 8%, transparent);
+		background: color-mix(in oklch, var(--color-base-content) 3%, var(--color-base-100));
+	}
+
+	.sc-spark {
+		flex: 1 1 4rem;
+		max-width: 8rem;
+		height: 1.75rem;
+		margin-inline-start: auto;
+		overflow: visible;
+	}
+	.sc-spark-line {
+		fill: none;
+		stroke: var(--color-primary);
+		stroke-width: 1.5;
+		stroke-linejoin: round;
+		stroke-linecap: round;
+	}
+	.sc-spark-area {
+		fill: color-mix(in oklch, var(--color-primary) 14%, transparent);
+	}
+
+	@media (prefers-reduced-motion: reduce) {
+		.sc-skeleton {
+			animation: none;
+		}
+	}
+</style>

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

@@ -0,0 +1,37 @@
+export type StatTone = 'primary' | 'secondary' | 'accent' | 'success' | 'info' | 'warning' | 'error' | 'neutral';
+import type { Snippet } from 'svelte';
+interface Props {
+    label: string;
+    /** A number animates; a string is shown as-is. */
+    value: number | string | null | undefined;
+    format?: Intl.NumberFormatOptions;
+    /** Number animation: 'tween' (default) counts, 'roll' is the odometer, false is static. */
+    animate?: 'tween' | 'roll' | false;
+    /** A number is a FRACTION (0.125 → "+12.5%"); a string is shown as-is. */
+    delta?: number | string | null;
+    deltaFormat?: Intl.NumberFormatOptions;
+    /** 'auto' tones by sign. */
+    deltaTone?: 'auto' | 'success' | 'error' | 'neutral';
+    /** For metrics where down is good (churn, cost, response time). */
+    invertDelta?: boolean;
+    caption?: string;
+    /** Help text behind an (i) icon. */
+    info?: string;
+    /** Trend values drawn as a small inline line. */
+    sparkline?: readonly number[];
+    variant?: 'plain' | 'footer';
+    /** Icon tile tint. */
+    tone?: StatTone;
+    size?: 'sm' | 'md';
+    /** Makes the whole card a link. */
+    href?: string;
+    loading?: boolean;
+    icon?: Snippet;
+    /** Extra content under the value (or in the footer band for `footer`). */
+    children?: Snippet;
+    locale?: string;
+    class?: string;
+}
+declare const StatCard: import("svelte").Component<Props, {}, "">;
+type StatCard = ReturnType<typeof StatCard>;
+export default StatCard;

package/dist/components/stats/StatGroup.svelte

@@ -0,0 +1,67 @@
+<!--
+  StatGroup: lays out StatCards (jatui-6kitr). `cards` (default) is a
+  responsive grid of separate cards; `joined` is one bordered panel with
+  hairline dividers — the replacement for raw DaisyUI `stats` markup.
+-->
+<script lang="ts">
+	import type { Snippet } from 'svelte';
+
+	interface Props {
+		/** Fixed column count. Default: auto-fit columns of at least `minWidth`. */
+		columns?: number;
+		minWidth?: string;
+		variant?: 'cards' | 'joined';
+		/** Names the group for assistive tech. */
+		ariaLabel?: string;
+		children: Snippet;
+		class?: string;
+	}
+
+	let {
+		columns,
+		minWidth = '12rem',
+		variant = 'cards',
+		ariaLabel,
+		children,
+		class: className = ''
+	}: Props = $props();
+
+	const template = $derived(
+		columns ? `repeat(${columns}, minmax(0, 1fr))` : `repeat(auto-fit, minmax(min(${minWidth}, 100%), 1fr))`
+	);
+</script>
+
+<div
+	class="jatui-stat-group sg-{variant} {className}"
+	role={ariaLabel ? 'group' : undefined}
+	aria-label={ariaLabel}
+	style:grid-template-columns={template}
+>
+	{@render children()}
+</div>
+
+<style>
+	.jatui-stat-group {
+		display: grid;
+		gap: var(--jatui-space-lg, 12px);
+		min-width: 0;
+	}
+	.sg-joined {
+		--sg-divider: color-mix(in oklch, var(--color-base-content) 10%, transparent);
+		gap: 0;
+		border: var(--jatui-border-w, 1px) solid var(--sg-divider);
+		border-radius: var(--jatui-radius-box, 0.5rem);
+		background: var(--color-base-100);
+		overflow: hidden;
+	}
+	/* Hairlines on every card's end + bottom edge; the outer ones are clipped. */
+	.sg-joined > :global(.jatui-stat-card) {
+		border: 0;
+		border-radius: 0;
+		/* transparent so a neighbour never paints over the hairline */
+		background: transparent;
+		box-shadow:
+			var(--jatui-border-w, 1px) 0 0 var(--sg-divider),
+			0 var(--jatui-border-w, 1px) 0 var(--sg-divider);
+	}
+</style>

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

@@ -0,0 +1,14 @@
+import type { Snippet } from 'svelte';
+interface Props {
+    /** Fixed column count. Default: auto-fit columns of at least `minWidth`. */
+    columns?: number;
+    minWidth?: string;
+    variant?: 'cards' | 'joined';
+    /** Names the group for assistive tech. */
+    ariaLabel?: string;
+    children: Snippet;
+    class?: string;
+}
+declare const StatGroup: import("svelte").Component<Props, {}, "">;
+type StatGroup = ReturnType<typeof StatGroup>;
+export default StatGroup;

package/dist/components/stats/heatmap.d.ts

@@ -0,0 +1,76 @@
+/**
+ * ActivityHeatmap layout + keyboard math (jatui-6kitr). Pure and DOM-free.
+ *
+ * Days are local calendar dates, keyed "YYYY-MM-DD". The grid is 7 weekday
+ * ROWS × N week COLUMNS (GitHub contributions layout); `weekStart` picks the
+ * top row (0 = Sunday, 1 = Monday).
+ */
+export interface HeatDay {
+    /** "YYYY-MM-DD" (local). */
+    date: string;
+    count: number;
+    /** 0 (none) .. levels. */
+    level: number;
+    /** Week column, 0-based. */
+    col: number;
+    /** Weekday row, 0-based from `weekStart`. */
+    row: number;
+}
+export interface HeatmapLayout {
+    /** Every day in range, in order. */
+    days: HeatDay[];
+    /** rows[row][col] — null where the first/last week runs outside the range. */
+    rows: (HeatDay | null)[][];
+    weeks: number;
+    max: number;
+    total: number;
+    /** Days with count > 0. */
+    activeDays: number;
+    /** Month labels anchored to the first column that starts in that month. */
+    months: {
+        label: string;
+        col: number;
+    }[];
+    start: string;
+    end: string;
+}
+export interface BuildHeatmapOptions<T> {
+    data: readonly T[];
+    getDate: (d: T) => string | Date;
+    getCount: (d: T) => number;
+    /** Inclusive. Default: `end` minus one year plus one day. */
+    start?: string | Date;
+    /** Inclusive. Default: today. */
+    end?: string | Date;
+    weekStart?: 0 | 1 | 2 | 3 | 4 | 5 | 6;
+    /** Non-zero colour steps. Default 4. */
+    levels?: number;
+    /** Custom count → level (0..levels). Default: proportional to the max. */
+    levelOf?: (count: number, max: number, levels: number) => number;
+    locale?: string;
+    /** Min columns between month labels so they never overlap. Default 3. */
+    monthGap?: number;
+}
+/** Local "YYYY-MM-DD". */
+export declare function isoDay(d: Date): string;
+/** Parse a day as LOCAL noon (DST-safe arithmetic). "YYYY-MM-DD" is never read as UTC. */
+export declare function parseDay(input: string | Date): Date;
+export declare function addDays(day: string, n: number): string;
+/** Whole days from a to b (b - a). */
+export declare function daysBetween(a: string, b: string): number;
+export declare function defaultLevelOf(count: number, max: number, levels: number): number;
+export declare function buildHeatmap<T>(opts: BuildHeatmapOptions<T>): HeatmapLayout;
+/**
+ * Keyboard move inside the heatmap grid. Returns the new focused day,
+ * clamped to [start, end], or null for keys it does not handle.
+ *
+ *   ArrowUp/Down     previous / next day (row)
+ *   ArrowLeft/Right  previous / next week (column)
+ *   PageUp/PageDown  four weeks back / forward
+ *   Home / End       first / last week, same weekday (row start / end)
+ *   mod+Home/End     first / last day in range
+ */
+export declare function moveHeatFocus(day: string, key: string, range: {
+    start: string;
+    end: string;
+}, mod?: boolean): string | null;