@joewinke/jatui 0.40.0 → 0.41.1

package/dist/components/stats/BarList.svelte

@@ -0,0 +1,262 @@
+<!--
+  BarList: ranked horizontal bars, "top pages / top callers" style
+  (jatui-6kitr). Own design, built from the public idea only (no BoardUI Pro
+  source). Plain HTML: each row is a list item with its label and value as
+  text; the bar is a decorative token-tinted fill sized against the largest
+  value. Long lists fold behind "Show N more".
+-->
+<script lang="ts" module>
+	export interface BarListItem {
+		/** Stable key; defaults to the label. */
+		id?: string;
+		label: string;
+		value: number;
+		href?: string;
+		/** Secondary text after the label (domain, count of sub-items…). */
+		hint?: string;
+		tone?: 'primary' | 'secondary' | 'accent' | 'success' | 'info' | 'warning' | 'error' | 'neutral';
+	}
+</script>
+
+<script lang="ts" generics="I extends BarListItem = BarListItem">
+	import type { Snippet } from 'svelte';
+
+	interface Props {
+		items: readonly I[];
+		/** 'desc' (default) ranks by value; 'none' keeps your order. */
+		sort?: 'desc' | 'asc' | 'none';
+		/** Rows shown before "Show more". Default: all. */
+		limit?: number;
+		format?: Intl.NumberFormatOptions;
+		/** Override the value text, e.g. "1.2k (34%)". */
+		formatValue?: (item: I, total: number) => string;
+		/** Column captions above the list. */
+		labelHeader?: string;
+		valueHeader?: string;
+		tone?: BarListItem['tone'];
+		size?: 'sm' | 'md';
+		/** Makes rows buttons (unless they have an href). */
+		onSelect?: (item: I) => void;
+		/** Custom label content (icon, avatar…). */
+		label?: Snippet<[I]>;
+		ariaLabel?: string;
+		emptyText?: string;
+		locale?: string;
+		class?: string;
+	}
+
+	let {
+		items,
+		sort = 'desc',
+		limit,
+		format,
+		formatValue,
+		labelHeader,
+		valueHeader,
+		tone = 'primary',
+		size = 'md',
+		onSelect,
+		label,
+		ariaLabel,
+		emptyText = 'No data',
+		locale,
+		class: className = ''
+	}: Props = $props();
+
+	let expanded = $state(false);
+	const uid = $props.id();
+
+	const ranked = $derived.by(() => {
+		const list = items.slice();
+		if (sort === 'desc') list.sort((a, b) => b.value - a.value);
+		else if (sort === 'asc') list.sort((a, b) => a.value - b.value);
+		return list;
+	});
+	const max = $derived(ranked.reduce((m, it) => Math.max(m, it.value), 0));
+	const total = $derived(ranked.reduce((s, it) => s + (Number.isFinite(it.value) ? it.value : 0), 0));
+	const visible = $derived(limit != null && !expanded ? ranked.slice(0, limit) : ranked);
+	const hidden = $derived(ranked.length - visible.length);
+	const nf = $derived(new Intl.NumberFormat(locale, format));
+	const valueText = (it: I) => (formatValue ? formatValue(it, total) : nf.format(it.value));
+	const pct = (v: number) => (max > 0 ? Math.max(0, Math.min(100, (v / max) * 100)) : 0);
+</script>
+
+{#snippet rowContent(it: I)}
+	<span class="bl-bar tone-{it.tone ?? tone}" style:--pct="{pct(it.value)}%" aria-hidden="true"></span>
+	<span class="bl-label">
+		{#if label}{@render label(it)}{:else}<span class="bl-text">{it.label}</span>{/if}
+		{#if it.hint}<span class="bl-hint">{it.hint}</span>{/if}
+	</span>
+	<span class="bl-value">{valueText(it)}</span>
+{/snippet}
+
+<div class="jatui-bar-list bl-{size} {className}">
+	{#if labelHeader || valueHeader}
+		<div class="bl-headers" aria-hidden="true">
+			<span>{labelHeader ?? ''}</span>
+			<span>{valueHeader ?? ''}</span>
+		</div>
+	{/if}
+	{#if ranked.length === 0}
+		<p class="bl-empty">{emptyText}</p>
+	{:else}
+		<ul class="bl-list" aria-label={ariaLabel} id="{uid}-list">
+			{#each visible as it, i (it.id ?? it.label + '\u0000' + i)}
+				<li>
+					{#if it.href}
+						<a class="bl-row is-interactive" href={it.href}>{@render rowContent(it)}</a>
+					{:else if onSelect}
+						<button type="button" class="bl-row is-interactive" onclick={() => onSelect(it)}>
+							{@render rowContent(it)}
+						</button>
+					{:else}
+						<div class="bl-row">{@render rowContent(it)}</div>
+					{/if}
+				</li>
+			{/each}
+		</ul>
+		{#if limit != null && ranked.length > limit}
+			<button
+				type="button"
+				class="bl-more"
+				aria-expanded={expanded}
+				aria-controls="{uid}-list"
+				onclick={() => (expanded = !expanded)}
+			>
+				{expanded ? 'Show less' : `Show ${hidden} more`}
+			</button>
+		{/if}
+	{/if}
+</div>
+
+<style>
+	.jatui-bar-list {
+		--bl-row-h: 2rem;
+		display: flex;
+		flex-direction: column;
+		gap: var(--jatui-space-sm, 4px);
+		min-width: 0;
+		font-size: 0.875rem;
+		color: var(--color-base-content);
+	}
+	.bl-sm {
+		--bl-row-h: 1.625rem;
+		font-size: 0.8125rem;
+	}
+	.bl-headers {
+		display: flex;
+		justify-content: space-between;
+		padding: 0 var(--jatui-space-base, 8px);
+		font-size: 0.75rem;
+		font-weight: 500;
+		color: color-mix(in oklch, var(--color-base-content) 55%, transparent);
+	}
+	.bl-list {
+		list-style: none;
+		margin: 0;
+		padding: 0;
+		display: flex;
+		flex-direction: column;
+		gap: var(--jatui-space-xs, 2px);
+	}
+	.bl-row {
+		position: relative;
+		display: flex;
+		align-items: center;
+		gap: var(--jatui-space-lg, 12px);
+		width: 100%;
+		min-height: var(--bl-row-h);
+		padding: 0 var(--jatui-space-base, 8px);
+		border: 0;
+		border-radius: var(--jatui-radius-field, 0.25rem);
+		background: transparent;
+		color: inherit;
+		font: inherit;
+		text-align: start;
+		text-decoration: none;
+		isolation: isolate;
+	}
+	.bl-row.is-interactive {
+		cursor: pointer;
+	}
+	.bl-row.is-interactive:hover .bl-bar {
+		background: color-mix(in oklch, var(--bl-tone) 26%, transparent);
+	}
+	.bl-row.is-interactive:focus-visible {
+		outline: 2px solid var(--color-primary);
+		outline-offset: 1px;
+	}
+	.bl-bar {
+		--bl-tone: var(--color-primary);
+		position: absolute;
+		inset-block: 0;
+		inset-inline-start: 0;
+		z-index: -1;
+		width: var(--pct);
+		min-width: 2px;
+		border-radius: var(--jatui-radius-field, 0.25rem);
+		background: color-mix(in oklch, var(--bl-tone) 16%, transparent);
+		transition:
+			width var(--motion-move, 250ms) var(--motion-glide, cubic-bezier(0.22, 1, 0.36, 1)),
+			background-color var(--motion-fast, 150ms) var(--motion-standard, ease);
+	}
+	.bl-bar.tone-secondary { --bl-tone: var(--color-secondary); }
+	.bl-bar.tone-accent { --bl-tone: var(--color-accent); }
+	.bl-bar.tone-success { --bl-tone: var(--color-success); }
+	.bl-bar.tone-info { --bl-tone: var(--color-info); }
+	.bl-bar.tone-warning { --bl-tone: var(--color-warning); }
+	.bl-bar.tone-error { --bl-tone: var(--color-error); }
+	.bl-bar.tone-neutral { --bl-tone: var(--color-base-content); }
+	.bl-label {
+		display: inline-flex;
+		align-items: center;
+		gap: var(--jatui-space-md, 6px);
+		flex: 1 1 auto;
+		min-width: 0;
+	}
+	.bl-text {
+		overflow: hidden;
+		text-overflow: ellipsis;
+		white-space: nowrap;
+	}
+	.bl-hint {
+		flex: none;
+		font-size: 0.75rem;
+		color: color-mix(in oklch, var(--color-base-content) 50%, transparent);
+	}
+	.bl-value {
+		flex: none;
+		font-variant-numeric: tabular-nums;
+		font-weight: 500;
+	}
+	.bl-more {
+		align-self: flex-start;
+		margin-top: var(--jatui-space-xs, 2px);
+		padding: var(--jatui-space-xs, 2px) var(--jatui-space-base, 8px);
+		border: 0;
+		border-radius: var(--jatui-radius-field, 0.25rem);
+		background: transparent;
+		color: var(--color-primary);
+		font: inherit;
+		font-size: 0.8125rem;
+		cursor: pointer;
+	}
+	.bl-more:hover {
+		background: color-mix(in oklch, var(--color-primary) 10%, transparent);
+	}
+	.bl-more:focus-visible {
+		outline: 2px solid var(--color-primary);
+	}
+	.bl-empty {
+		margin: 0;
+		padding: var(--jatui-space-lg, 12px);
+		text-align: center;
+		color: color-mix(in oklch, var(--color-base-content) 55%, transparent);
+	}
+
+	@media (prefers-reduced-motion: reduce) {
+		.bl-bar {
+			transition: none;
+		}
+	}
+</style>

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

@@ -0,0 +1,57 @@
+export interface BarListItem {
+    /** Stable key; defaults to the label. */
+    id?: string;
+    label: string;
+    value: number;
+    href?: string;
+    /** Secondary text after the label (domain, count of sub-items…). */
+    hint?: string;
+    tone?: 'primary' | 'secondary' | 'accent' | 'success' | 'info' | 'warning' | 'error' | 'neutral';
+}
+import type { Snippet } from 'svelte';
+declare function $$render<I extends BarListItem = BarListItem>(): {
+    props: {
+        items: readonly I[];
+        /** 'desc' (default) ranks by value; 'none' keeps your order. */
+        sort?: "desc" | "asc" | "none";
+        /** Rows shown before "Show more". Default: all. */
+        limit?: number;
+        format?: Intl.NumberFormatOptions;
+        /** Override the value text, e.g. "1.2k (34%)". */
+        formatValue?: (item: I, total: number) => string;
+        /** Column captions above the list. */
+        labelHeader?: string;
+        valueHeader?: string;
+        tone?: BarListItem["tone"];
+        size?: "sm" | "md";
+        /** Makes rows buttons (unless they have an href). */
+        onSelect?: (item: I) => void;
+        /** Custom label content (icon, avatar…). */
+        label?: Snippet<[I]>;
+        ariaLabel?: string;
+        emptyText?: string;
+        locale?: string;
+        class?: string;
+    };
+    exports: {};
+    bindings: "";
+    slots: {};
+    events: {};
+};
+declare class __sveltets_Render<I extends BarListItem = BarListItem> {
+    props(): ReturnType<typeof $$render<I>>['props'];
+    events(): ReturnType<typeof $$render<I>>['events'];
+    slots(): ReturnType<typeof $$render<I>>['slots'];
+    bindings(): "";
+    exports(): {};
+}
+interface $$IsomorphicComponent {
+    new <I extends BarListItem = BarListItem>(options: import('svelte').ComponentConstructorOptions<ReturnType<__sveltets_Render<I>['props']>>): import('svelte').SvelteComponent<ReturnType<__sveltets_Render<I>['props']>, ReturnType<__sveltets_Render<I>['events']>, ReturnType<__sveltets_Render<I>['slots']>> & {
+        $$bindings?: ReturnType<__sveltets_Render<I>['bindings']>;
+    } & ReturnType<__sveltets_Render<I>['exports']>;
+    <I extends BarListItem = BarListItem>(internal: unknown, props: ReturnType<__sveltets_Render<I>['props']> & {}): ReturnType<__sveltets_Render<I>['exports']>;
+    z_$$bindings?: ReturnType<__sveltets_Render<any>['bindings']>;
+}
+declare const BarList: $$IsomorphicComponent;
+type BarList<I extends BarListItem = BarListItem> = InstanceType<typeof BarList<I>>;
+export default BarList;

package/dist/components/stats/ChartCard.svelte

@@ -0,0 +1,230 @@
+<!--
+  ChartCard: the dashboard "headline + period switch + chart" card
+  (jatui-6kitr). A layout contract, not a chart: it draws NO chart and pulls
+  in no chart library. Your chart (layerchart, d3, Sparkline, BurndownChart,
+  plain SVG) goes in the `chart` snippet and calls `hover(point)` as the
+  pointer moves; the headline then counts to the hovered value and the
+  caption shows the point's label. `hover(null)` returns to the total.
+-->
+<script lang="ts" module>
+	export interface ChartCardPoint {
+		value: number;
+		/** Shown in place of the caption while hovering, e.g. "Tue, Nov 3". */
+		label?: string;
+		/** Optional delta for the hovered point. */
+		delta?: number | string | null;
+	}
+
+	export interface ChartCardContext<P extends string = string> {
+		period: P | undefined;
+		hover: (point: ChartCardPoint | null) => void;
+		/** The point being hovered, or null. */
+		hovered: ChartCardPoint | null;
+	}
+</script>
+
+<script lang="ts" generics="P extends string = string">
+	import type { Snippet } from 'svelte';
+	import AnimatedNumber from '../AnimatedNumber.svelte';
+	import SegmentedControl, { type SegmentedOption } from '../SegmentedControl.svelte';
+
+	interface Props {
+		label: string;
+		/** Headline value when nothing is hovered. */
+		value: number | null | undefined;
+		format?: Intl.NumberFormatOptions;
+		/** A number is a fraction (0.08 → "+8%"). */
+		delta?: number | string | null;
+		deltaFormat?: Intl.NumberFormatOptions;
+		invertDelta?: boolean;
+		caption?: string;
+		/** Period switch options; omit for none. */
+		periods?: readonly (SegmentedOption<P> | P)[];
+		period?: P;
+		onPeriodChange?: (period: P) => void;
+		/** Chart area height (CSS). Default 10rem. */
+		chartHeight?: string;
+		loading?: boolean;
+		chart: Snippet<[ChartCardContext<P>]>;
+		/** Extra header controls, right of the period switch. */
+		actions?: Snippet;
+		/** Content under the chart (legend, footnote). */
+		footer?: Snippet;
+		locale?: string;
+		class?: string;
+	}
+
+	let {
+		label,
+		value,
+		format,
+		delta = null,
+		deltaFormat = { style: 'percent', maximumFractionDigits: 1, signDisplay: 'exceptZero' },
+		invertDelta = false,
+		caption,
+		periods,
+		period = $bindable(),
+		onPeriodChange,
+		chartHeight = '10rem',
+		loading = false,
+		chart,
+		actions,
+		footer,
+		locale,
+		class: className = ''
+	}: Props = $props();
+
+	const uid = $props.id();
+	let hovered = $state<ChartCardPoint | null>(null);
+
+	function hover(point: ChartCardPoint | null) {
+		hovered = point;
+	}
+
+	const shownValue = $derived(hovered ? hovered.value : value);
+	const shownDelta = $derived(hovered && hovered.delta !== undefined ? hovered.delta : hovered ? null : delta);
+	const deltaText = $derived(
+		shownDelta == null
+			? ''
+			: typeof shownDelta === 'number'
+				? new Intl.NumberFormat(locale, deltaFormat).format(shownDelta)
+				: shownDelta
+	);
+	const deltaSign = $derived.by(() => {
+		if (shownDelta == null) return 0;
+		const n = typeof shownDelta === 'number' ? shownDelta : parseFloat(shownDelta.replace(/[^\d.+-]/g, ''));
+		return Number.isFinite(n) ? Math.sign(n) : 0;
+	});
+	const deltaTone = $derived(deltaSign === 0 ? 'neutral' : (deltaSign > 0) !== invertDelta ? 'success' : 'error');
+	const ctx = $derived<ChartCardContext<P>>({ period, hover, hovered });
+</script>
+
+<section class="jatui-chart-card {className}" aria-labelledby="{uid}-label" aria-busy={loading || undefined}>
+	<header class="cc-head">
+		<div class="cc-headline">
+			<h3 class="cc-label" id="{uid}-label">{label}</h3>
+			<div class="cc-value-row">
+				<span class="cc-value">
+					{#if loading}
+						<span class="cc-skeleton" aria-hidden="true"></span><span class="sr-only">Loading</span>
+					{:else if shownValue == null}
+						—
+					{:else}
+						<AnimatedNumber value={shownValue} format={format ?? {}} mode="tween" />
+					{/if}
+				</span>
+				{#if deltaText && !loading}
+					<span class="cc-delta tone-{deltaTone}">{deltaText}</span>
+				{/if}
+			</div>
+			{#if hovered?.label || caption}
+				<p class="cc-caption">{hovered?.label ?? caption}</p>
+			{/if}
+		</div>
+		{#if periods?.length || actions}
+			<div class="cc-controls">
+				{#if periods?.length}
+					<SegmentedControl
+						options={periods}
+						bind:value={period}
+						size="xs"
+						ariaLabel="{label} period"
+						onChange={(p) => onPeriodChange?.(p)}
+					/>
+				{/if}
+				{#if actions}{@render actions()}{/if}
+			</div>
+		{/if}
+	</header>
+	<!-- svelte-ignore a11y_no_static_element_interactions -->
+	<div class="cc-chart" style:height={chartHeight} onpointerleave={() => (hovered = null)}>
+		{@render chart(ctx)}
+	</div>
+	{#if footer}
+		<div class="cc-footer">{@render footer()}</div>
+	{/if}
+</section>
+
+<style>
+	.jatui-chart-card {
+		display: flex;
+		flex-direction: column;
+		gap: var(--jatui-space-lg, 12px);
+		min-width: 0;
+		padding: var(--jatui-space-xl, 16px);
+		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);
+	}
+	.cc-head {
+		display: flex;
+		flex-wrap: wrap;
+		align-items: flex-start;
+		justify-content: space-between;
+		gap: var(--jatui-space-lg, 12px);
+	}
+	.cc-headline {
+		display: flex;
+		flex-direction: column;
+		gap: var(--jatui-space-sm, 4px);
+		min-width: 0;
+	}
+	.cc-label {
+		margin: 0;
+		font-size: 0.8125rem;
+		font-weight: 500;
+		color: color-mix(in oklch, var(--color-base-content) 65%, transparent);
+	}
+	.cc-value-row {
+		display: flex;
+		align-items: center;
+		gap: var(--jatui-space-base, 8px);
+	}
+	.cc-value {
+		font-size: 1.75rem;
+		line-height: 1.15;
+		font-weight: 600;
+		letter-spacing: -0.01em;
+		font-variant-numeric: tabular-nums;
+	}
+	.cc-skeleton {
+		display: inline-block;
+		width: 7rem;
+		height: 1.75rem;
+		border-radius: var(--jatui-radius-field, 0.25rem);
+		background: color-mix(in oklch, var(--color-base-content) 10%, transparent);
+	}
+	.cc-delta {
+		--cc-d: var(--color-base-content);
+		padding: 1px var(--jatui-space-md, 6px);
+		border-radius: var(--jatui-radius-selector, 0.375rem);
+		background: color-mix(in oklch, var(--cc-d) 12%, transparent);
+		color: color-mix(in oklch, var(--cc-d) 85%, var(--color-base-content));
+		font-size: 0.75rem;
+		font-weight: 600;
+		font-variant-numeric: tabular-nums;
+	}
+	.cc-delta.tone-success { --cc-d: var(--color-success); }
+	.cc-delta.tone-error { --cc-d: var(--color-error); }
+	.cc-delta.tone-neutral { color: color-mix(in oklch, var(--color-base-content) 65%, transparent); }
+	.cc-caption {
+		margin: 0;
+		min-height: 1.2em;
+		font-size: 0.75rem;
+		color: color-mix(in oklch, var(--color-base-content) 55%, transparent);
+	}
+	.cc-controls {
+		display: flex;
+		align-items: center;
+		gap: var(--jatui-space-base, 8px);
+	}
+	.cc-chart {
+		position: relative;
+		min-width: 0;
+	}
+	.cc-footer {
+		font-size: 0.75rem;
+		color: color-mix(in oklch, var(--color-base-content) 60%, transparent);
+	}
+</style>

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

@@ -0,0 +1,63 @@
+export interface ChartCardPoint {
+    value: number;
+    /** Shown in place of the caption while hovering, e.g. "Tue, Nov 3". */
+    label?: string;
+    /** Optional delta for the hovered point. */
+    delta?: number | string | null;
+}
+export interface ChartCardContext<P extends string = string> {
+    period: P | undefined;
+    hover: (point: ChartCardPoint | null) => void;
+    /** The point being hovered, or null. */
+    hovered: ChartCardPoint | null;
+}
+import type { Snippet } from 'svelte';
+import { type SegmentedOption } from '../SegmentedControl.svelte';
+declare function $$render<P extends string = string>(): {
+    props: {
+        label: string;
+        /** Headline value when nothing is hovered. */
+        value: number | null | undefined;
+        format?: Intl.NumberFormatOptions;
+        /** A number is a fraction (0.08 → "+8%"). */
+        delta?: number | string | null;
+        deltaFormat?: Intl.NumberFormatOptions;
+        invertDelta?: boolean;
+        caption?: string;
+        /** Period switch options; omit for none. */
+        periods?: readonly (SegmentedOption<P> | P)[];
+        period?: P;
+        onPeriodChange?: (period: P) => void;
+        /** Chart area height (CSS). Default 10rem. */
+        chartHeight?: string;
+        loading?: boolean;
+        chart: Snippet<[ChartCardContext<P>]>;
+        /** Extra header controls, right of the period switch. */
+        actions?: Snippet;
+        /** Content under the chart (legend, footnote). */
+        footer?: Snippet;
+        locale?: string;
+        class?: string;
+    };
+    exports: {};
+    bindings: "period";
+    slots: {};
+    events: {};
+};
+declare class __sveltets_Render<P extends string = string> {
+    props(): ReturnType<typeof $$render<P>>['props'];
+    events(): ReturnType<typeof $$render<P>>['events'];
+    slots(): ReturnType<typeof $$render<P>>['slots'];
+    bindings(): "period";
+    exports(): {};
+}
+interface $$IsomorphicComponent {
+    new <P extends string = string>(options: import('svelte').ComponentConstructorOptions<ReturnType<__sveltets_Render<P>['props']>>): import('svelte').SvelteComponent<ReturnType<__sveltets_Render<P>['props']>, ReturnType<__sveltets_Render<P>['events']>, ReturnType<__sveltets_Render<P>['slots']>> & {
+        $$bindings?: ReturnType<__sveltets_Render<P>['bindings']>;
+    } & ReturnType<__sveltets_Render<P>['exports']>;
+    <P extends string = string>(internal: unknown, props: ReturnType<__sveltets_Render<P>['props']> & {}): ReturnType<__sveltets_Render<P>['exports']>;
+    z_$$bindings?: ReturnType<__sveltets_Render<any>['bindings']>;
+}
+declare const ChartCard: $$IsomorphicComponent;
+type ChartCard<P extends string = string> = InstanceType<typeof ChartCard<P>>;
+export default ChartCard;