@heyramzi/tasks 0.0.0-stage → 0.4.0

package/src/time/time-chip.svelte

@@ -0,0 +1,62 @@
+<script lang="ts">
+	import { cn } from "../lib/cn.js";
+	import { TONE_CLASS, TONE_TEXT } from "../tone.js";
+	import { budgetTone, formatMinutes } from "./duration.js";
+	import TimeDot from "./time-dot.svelte";
+	import TimeRing from "./time-ring.svelte";
+	import clockIcon from "../icons/clock.svg?raw";
+
+	type Props = {
+		/** Minutes logged on the task. */
+		minutes: number;
+		/** Minutes budgeted. Draws a small ring and tints the chip as the budget runs out. */
+		estimate?: number;
+		/** A timer is running on the task. */
+		running?: boolean;
+		/** Replaces the spoken name. Defaults to a sentence built from the numbers. */
+		label?: string;
+		class?: string;
+	};
+
+	let { minutes, estimate, running = false, label, class: className }: Props = $props();
+
+	let tone = $derived(budgetTone(minutes, estimate));
+	let visible = $derived(minutes > 0 || running || !!estimate);
+	let spoken = $derived(
+		label ??
+			[
+				`${formatMinutes(minutes)} logged`,
+				estimate ? `of ${formatMinutes(estimate)}` : "",
+				running ? "timer running" : "",
+			]
+				.filter(Boolean)
+				.join(", "),
+	);
+</script>
+
+{#if visible}
+	<span
+		role="img"
+		aria-label={spoken}
+		class={cn(
+			"inline-flex h-5 shrink-0 items-center gap-1.5 whitespace-nowrap rounded-md border px-1.5 text-xs font-medium tabular-nums",
+			running
+				? TONE_CLASS.accent
+				: tone === "neutral"
+					? "border-transparent text-muted-foreground"
+					: TONE_CLASS[tone],
+			className,
+		)}
+	>
+		{#if running}
+			<TimeDot running size={6} />
+		{:else if estimate}
+			<TimeRing value={minutes} max={estimate} size={12} stroke={6} />
+		{:else}
+			<span class="size-3 shrink-0 [&>svg]:size-full" aria-hidden="true">{@html clockIcon}</span>
+		{/if}
+		<span aria-hidden="true">
+			{formatMinutes(minutes)}{#if estimate}<span class={cn("font-normal", tone === "neutral" ? "text-muted-foreground/70" : TONE_TEXT[tone])}> / {formatMinutes(estimate)}</span>{/if}
+		</span>
+	</span>
+{/if}

package/src/time/time-dot.svelte

@@ -0,0 +1,58 @@
+<script lang="ts">
+	import { cn } from "../lib/cn.js";
+
+	type Props = {
+		/** Pulses while true. The dot takes its color from the text around it. */
+		running?: boolean;
+		size?: number;
+		class?: string;
+	};
+
+	let { running = false, size = 8, class: className }: Props = $props();
+</script>
+
+<span
+	class={cn("time-dot", running && "is-running", className)}
+	style:--time-dot-size="{size}px"
+	aria-hidden="true"
+></span>
+
+<style>
+	.time-dot {
+		position: relative;
+		display: inline-block;
+		flex: none;
+		width: var(--time-dot-size);
+		height: var(--time-dot-size);
+		border-radius: 9999px;
+		background: currentColor;
+	}
+
+	.time-dot.is-running::after {
+		content: "";
+		position: absolute;
+		inset: 0;
+		border-radius: inherit;
+		background: currentColor;
+		animation: time-dot-pulse var(--time-pulse-duration, 2000ms) var(--ease-out, ease-out) infinite;
+	}
+
+	@keyframes time-dot-pulse {
+		from {
+			transform: scale(1);
+			opacity: 0.45;
+		}
+		to {
+			transform: scale(2.8);
+			opacity: 0;
+		}
+	}
+
+	@media (prefers-reduced-motion: reduce) {
+		.time-dot.is-running::after {
+			animation: none;
+			transform: scale(1.9);
+			opacity: 0.25;
+		}
+	}
+</style>

package/src/time/time-ring.svelte

@@ -0,0 +1,74 @@
+<script lang="ts">
+	import type { Snippet } from "svelte";
+	import { cn } from "../lib/cn.js";
+	import { TONE_TEXT } from "../tone.js";
+	import { budgetTone } from "./duration.js";
+
+	type Props = {
+		/** Minutes logged. */
+		value: number;
+		/** Minutes budgeted. The ring turns warning at 90% and destructive past 100%. */
+		max: number;
+		/** Pixels. */
+		size?: number;
+		/** Stroke width in a 36 unit box. */
+		stroke?: number;
+		label?: string;
+		/** Rendered in the middle, e.g. the percentage. */
+		children?: Snippet;
+		class?: string;
+	};
+
+	let { value, max, size = 56, stroke = 4, label, children, class: className }: Props = $props();
+
+	const R = 16;
+	let tone = $derived(budgetTone(value, max));
+	let fraction = $derived(max > 0 ? Math.min(1, Math.max(0, value / max)) : 0);
+	let colorClass = $derived(tone === "neutral" ? TONE_TEXT.accent : TONE_TEXT[tone]);
+</script>
+
+<span
+	class={cn("relative inline-grid shrink-0 place-items-center", className)}
+	style:width="{size}px"
+	style:height="{size}px"
+	role={label ? "img" : undefined}
+	aria-label={label}
+	aria-hidden={label ? undefined : "true"}
+>
+	<svg viewBox="0 0 36 36" class="size-full -rotate-90" fill="none" aria-hidden="true">
+		<circle cx="18" cy="18" r={R} stroke="currentColor" stroke-width={stroke} class="text-foreground/10" />
+		<circle
+			cx="18"
+			cy="18"
+			r={R}
+			pathLength="100"
+			stroke="currentColor"
+			stroke-width={stroke}
+			stroke-linecap="round"
+			stroke-dasharray="{fraction * 100} 100"
+			class={cn("time-ring-arc", colorClass)}
+			class:is-empty={fraction === 0}
+		/>
+	</svg>
+	{#if children}
+		<span class="absolute inset-0 grid place-items-center">{@render children()}</span>
+	{/if}
+</span>
+
+<style>
+	.time-ring-arc {
+		transition:
+			stroke-dasharray var(--duration-slow, 400ms) var(--ease-smooth-out, cubic-bezier(0.22, 1, 0.36, 1)),
+			color var(--duration-fast, 250ms) var(--ease-smooth-out, cubic-bezier(0.22, 1, 0.36, 1));
+	}
+
+	.time-ring-arc.is-empty {
+		opacity: 0;
+	}
+
+	@media (prefers-reduced-motion: reduce) {
+		.time-ring-arc {
+			transition: none;
+		}
+	}
+</style>