@heyramzi/ui 2.1.0 → 2.2.0

package/src/charts/reference-line.svelte

@@ -1,29 +1,29 @@
 <script lang="ts" module>
-/** A target the data is judged against: a deal, a budget, a limit. */
-export type ChartReference = {
-	value: number;
-	/** Already formatted, figure included: "Deal €61,500". */
-	label: string;
-	/** A status token when crossing it means something, e.g. `var(--destructive)`. */
-	color?: string;
-};
+	/** A target the data is judged against: a deal, a budget, a limit. */
+	export type ChartReference = {
+		value: number;
+		/** Already formatted, figure included: "Deal €61,500". */
+		label: string;
+		/** A status token when crossing it means something, e.g. `var(--destructive)`. */
+		color?: string;
+	};
 </script>
 
 <script lang="ts">
-/*
- * A dashed rule across the plot at a fixed value, labelled at its start.
- * Drawn inside a layerchart `<Svg>`; the chart widens its domain to keep it in view.
- */
-import "./reference-line.css";
-import { AnnotationLine } from "layerchart";
+	/*
+	 * A dashed rule across the plot at a fixed value, labelled at its start.
+	 * Drawn inside a layerchart `<Svg>`; the chart widens its domain to keep it in view.
+	 */
+	import "./reference-line.css";
+	import { AnnotationLine } from "layerchart";
 
-interface Props {
-	reference: ChartReference;
-};
+	interface Props {
+		reference: ChartReference;
+	}
 
-let { reference }: Props = $props();
+	let { reference }: Props = $props();
 
-const stroke = $derived(reference.color ?? "var(--foreground)");
+	const stroke = $derived(reference.color ?? "var(--foreground)");
 </script>
 
 <g class="hr-reference-line" style:--hr-reference-color={stroke}>

package/src/charts/reveal.svelte

@@ -15,7 +15,7 @@
 		children: Snippet;
 		/** Headroom around the plot so a stroke at the series max is not cut. */
 		bleed?: number;
-	};
+	}
 
 	// =========================
 	// PROPS

package/src/charts/ring-chart.css

@@ -1,7 +1,5 @@
-/* Styles for RingChart. Plain stylesheet (see area-chart.css for why).
-   Selectors are namespaced under `.hr-ring` (the generic ones below would
-   otherwise collide with GaugeChart's identical names once they are no longer
-   Svelte-scoped). */
+/* RingChart styles, namespaced under `.hr-ring` because unscoped, the generic names
+   below collide with GaugeChart's (area-chart.css says why it's plain CSS). */
 
 .hr-ring {
   position: relative;

package/src/charts/ring-chart.svelte

@@ -45,7 +45,7 @@
 		/** Replaces the center readout, for a number that isn't the ring's own value. */
 		children?: Snippet;
 		class?: string;
-	};
+	}
 
 	// =========================
 	// PROPS

package/src/charts/sparkline.svelte

@@ -32,7 +32,7 @@
 		bare?: boolean;
 		formatValue?: (v: number) => string;
 		class?: string;
-	};
+	}
 
 	// =========================
 	// PROPS
@@ -96,7 +96,10 @@
 	onpointerleave={() => (active = null)}
 >
 	{#if data.length > 0}
-		<div class="hr-sparkline-chart" style:height={typeof height === "number" ? `${height}px` : height}>
+		<div
+			class="hr-sparkline-chart"
+			style:height={typeof height === "number" ? `${height}px` : height}
+		>
 			<Chart {data} x={xKey} y={yKey} {padding} tooltipContext={{ mode: "bisect-x" }}>
 				<Svg>
 					<LinearGradient id={uid} vertical>

package/src/charts/stat-card.svelte

@@ -62,7 +62,7 @@
 		/** Leading icon next to the label. */
 		icon?: Snippet;
 		class?: string;
-	};
+	}
 
 	// =========================
 	// PROPS

package/src/charts/time-series-chart.css

@@ -1,8 +1,5 @@
-/* Styles for TimeSeriesChart. Shipped as a plain stylesheet (imported by the
-   component) instead of a Svelte `<style>` block: a `<style>` block becomes a
-   `?type=style&lang.css` virtual module that Tailwind v4's Vite plugin mis-parses
-   when this package is consumed as source from node_modules (tailwindlabs/
-   tailwindcss#20000). Selectors are namespaced under `.hr-ts-chart`. */
+/* A plain stylesheet, not a `<style>` block, because Tailwind v4's Vite plugin mis-parses that
+   virtual module when this package is consumed from node_modules (tailwindcss#20000). */
 
 .hr-ts-chart {
   width: 100%;

package/src/charts/trend-pill.css

@@ -11,10 +11,8 @@
   border-radius: 999px;
   border: 1px solid color-mix(in srgb, var(--stat-trend, currentColor) 22%, transparent);
   background: color-mix(in srgb, var(--stat-trend, currentColor) 10%, transparent);
-  /* WHY the mix: a trend colour is picked to read as a mark, and at 12px on its
-	   own 10% wash the raw hue measured 3.5:1. Mixing toward --foreground darkens
-	   it on a light page and lightens it on a dark one, so one rule serves both
-	   themes and the package needs to know nothing about which is on. */
+  /* The raw hue measured 3.5:1 on its own wash, so it mixes toward --foreground,
+	   which fixes the contrast in both themes with one rule. */
   color: color-mix(
     in oklab,
     var(--stat-trend, var(--muted-foreground, oklch(0.5 0.01 286))) 72%,

package/src/charts/trend-pill.svelte

@@ -18,7 +18,7 @@
 		/** Format the delta text. */
 		format?: (v: number) => string;
 		class?: string;
-	};
+	}
 
 	// =========================
 	// PROPS

package/src/components/copy/copy-button.svelte

@@ -1,101 +1,98 @@
 <script lang="ts">
-/**
- * The one copy control. No `text` prop draws the icon button; `text` draws the
- * chip. `agent` marks a payload written for a model.
- */
-
-// =========================
-// IMPORTS
-// =========================
-import { Check, Copy, StarFour } from "phosphor-svelte";
-import { cn } from "../../lib/utils.js";
-import { buttonVariants } from "../../shadcn/button/index.js";
-import type { HTMLButtonAttributes } from "svelte/elements";
-import { copyText } from "./clipboard.js";
-
-// =========================
-// TYPES
-// =========================
-interface Props extends Omit<HTMLButtonAttributes, "value" | "onclick" | "children"> {
-	/**
-	 * What lands on the clipboard. A function runs on the click, so a long list
-	 * doesn't build every prompt up front. It may return a promise.
-	 */
-	value: string | (() => string | Promise<string>);
-	/** Names the thing being copied, for a screen reader and the tooltip. */
-	label?: string;
-	/** Announced when the write lands; see `announce`. */
-	copiedLabel?: string;
-	/** The chip's visible text. Its presence is what makes this a chip. */
-	text?: string;
-	/** Marks the payload as an instruction for an AI rather than a raw string. */
-	agent?: boolean;
-	/**
-	 * `sm` matches `OpenIn`, for the icon row inside a calendar chip. `md` is
-	 * the 28px icon `Button`, for a toolbar that sits beside other icon buttons.
-	 */
-	size?: "default" | "md" | "sm";
-	/**
-	 * The icon button's `Button` variant: ghost unless it sits beside an outline
-	 * one. `inline` is for the chip: it takes the surrounding text's font and
-	 * colour, and the icon trails it.
-	 */
-	variant?: "ghost" | "outline" | "inline";
 	/**
-	 * How a screen reader hears the copy. `region` keeps the name fixed and
-	 * announces `copiedLabel` in a live region. `name` swaps the button's own name
-	 * to `copiedLabel` (write it in full) and has no region, for a page that
-	 * renders hundreds of these.
+	 * The one copy control. No `text` prop draws the icon button; `text` draws the
+	 * chip. `agent` marks a payload written for a model.
 	 */
-	announce?: "region" | "name";
-	/** Runs after a write that landed, for a toast the call site owns. */
-	onCopied?: () => void;
-	class?: string;
-}
 
-// =========================
-// PROPS
-// =========================
-let {
-	value,
-	label = "Copy",
-	copiedLabel = "Copied",
-	text,
-	agent = false,
-	size = "default",
-	variant = "ghost",
-	announce = "region",
-	onCopied,
-	class: className,
-	...restProps
-}: Props = $props();
+	// =========================
+	// IMPORTS
+	// =========================
+	import { Check, Copy, StarFour } from "phosphor-svelte";
+	import { cn } from "../../lib/utils.js";
+	import { buttonVariants } from "../../shadcn/button/index.js";
+	import type { HTMLButtonAttributes } from "svelte/elements";
+	import { copyText } from "./clipboard.js";
+
+	// =========================
+	// TYPES
+	// =========================
+	interface Props extends Omit<HTMLButtonAttributes, "value" | "onclick" | "children"> {
+		/**
+		 * What lands on the clipboard. A function runs on the click, so a long list
+		 * doesn't build every prompt up front. It may return a promise.
+		 */
+		value: string | (() => string | Promise<string>);
+		/** Names the thing being copied, for a screen reader and the tooltip. */
+		label?: string;
+		/** Announced when the write lands; see `announce`. */
+		copiedLabel?: string;
+		/** The chip's visible text. Its presence is what makes this a chip. */
+		text?: string;
+		/** Marks the payload as an instruction for an AI rather than a raw string. */
+		agent?: boolean;
+		/**
+		 * `sm` matches `OpenIn`, for the icon row inside a calendar chip. `md` is
+		 * the 28px icon `Button`, for a toolbar that sits beside other icon buttons.
+		 */
+		size?: "default" | "md" | "sm";
+		/**
+		 * Ghost unless it sits beside an outline button; `inline` is for the chip,
+		 * taking the surrounding text's font and colour.
+		 */
+		variant?: "ghost" | "outline" | "inline";
+		/**
+		 * `region` announces `copiedLabel` in a live region; `name` swaps the button's
+		 * name to it (write it in full), for a page rendering hundreds of these.
+		 */
+		announce?: "region" | "name";
+		/** Runs after a write that landed, for a toast the call site owns. */
+		onCopied?: () => void;
+		class?: string;
+	}
+
+	// =========================
+	// PROPS
+	// =========================
+	let {
+		value,
+		label = "Copy",
+		copiedLabel = "Copied",
+		text,
+		agent = false,
+		size = "default",
+		variant = "ghost",
+		announce = "region",
+		onCopied,
+		class: className,
+		...restProps
+	}: Props = $props();
 
-// =========================
-// STATE
-// =========================
-let copied = $state(false);
-let resetAt: ReturnType<typeof setTimeout> | undefined;
+	// =========================
+	// STATE
+	// =========================
+	let copied = $state(false);
+	let resetAt: ReturnType<typeof setTimeout> | undefined;
 
-// =========================
-// DERIVED
-// =========================
-const inline = $derived(text !== undefined && variant === "inline");
+	// =========================
+	// DERIVED
+	// =========================
+	const inline = $derived(text !== undefined && variant === "inline");
 
-// =========================
-// FUNCTIONS
-// =========================
-async function copy(event: MouseEvent) {
-	// Rows and cards are clickable; taking the payload out of one must not also
-	// open the record it belongs to.
-	event.stopPropagation();
-	event.preventDefault();
-	const payload = typeof value === "function" ? await value() : value;
-	if (!(await copyText(payload))) return;
-	copied = true;
-	clearTimeout(resetAt);
-	resetAt = setTimeout(() => (copied = false), 1400);
-	onCopied?.();
-}
+	// =========================
+	// FUNCTIONS
+	// =========================
+	async function copy(event: MouseEvent) {
+		// Rows and cards are clickable; taking the payload out of one must not also
+		// open the record it belongs to.
+		event.stopPropagation();
+		event.preventDefault();
+		const payload = typeof value === "function" ? await value() : value;
+		if (!(await copyText(payload))) return;
+		copied = true;
+		clearTimeout(resetAt);
+		resetAt = setTimeout(() => (copied = false), 1400);
+		onCopied?.();
+	}
 </script>
 
 <!-- =========================== -->
@@ -113,10 +110,10 @@ async function copy(event: MouseEvent) {
 			? size === "sm"
 				? "grid size-5 place-items-center rounded-md hover:bg-accent"
 				: buttonVariants({
-					variant: variant === "outline" ? "outline" : "ghost",
-					size: size === "md" ? "sm" : "default",
-					icon: true,
-				})
+						variant: variant === "outline" ? "outline" : "ghost",
+						size: size === "md" ? "sm" : "default",
+						icon: true,
+					})
 			: inline
 				? "inline-flex cursor-copy items-baseline gap-1.5 transition-colors hover:text-foreground"
 				: "flex items-center gap-1 rounded px-1.5 py-0.5 font-mono text-xs tabular-nums text-muted-foreground/70 transition-colors hover:bg-muted hover:text-foreground",
@@ -154,9 +151,7 @@ async function copy(event: MouseEvent) {
 			<Copy
 				class={cn(
 					"col-start-1 row-start-1 size-full transition-[opacity,color] duration-[var(--duration-fast)] ease-[var(--ease-smooth-out)]",
-					inline
-						? "text-current"
-						: "text-muted-foreground group-hover/copy:text-foreground",
+					inline ? "text-current" : "text-muted-foreground group-hover/copy:text-foreground",
 					copied ? "opacity-0" : "opacity-100",
 				)}
 				aria-hidden="true"

package/src/components/copy/copy-button.test.ts

@@ -51,14 +51,22 @@ describe("CopyButton", () => {
 
   it("names what it copies, so the button is not just a value", () => {
     stubClipboard();
-    const { button, done } = render({ value: "abc123", text: "abc123", label: "Copy API key abc123" });
+    const { button, done } = render({
+      value: "abc123",
+      text: "abc123",
+      label: "Copy API key abc123",
+    });
     expect(button.getAttribute("aria-label")).toBe("Copy API key abc123");
     done();
   });
 
   it("announces in a live region by default and keeps its name", async () => {
     stubClipboard();
-    const { button, target, done } = render({ value: "x", label: "Copy id", copiedLabel: "Copied" });
+    const { button, target, done } = render({
+      value: "x",
+      label: "Copy id",
+      copiedLabel: "Copied",
+    });
     await click(button);
     expect(target.querySelector("[aria-live]")?.textContent).toBe("Copied");
     expect(button.getAttribute("aria-label")).toBe("Copy id");

package/src/components/data-table/infinite-scroll.svelte

@@ -1,52 +1,52 @@
 <script lang="ts" generics="T">
-// ========================= IMPORTS
-import type { Snippet } from "svelte";
-import { Spinner } from "../../shadcn/spinner/index.js";
+	// ========================= IMPORTS
+	import type { Snippet } from "svelte";
+	import { Spinner } from "../../shadcn/spinner/index.js";
 
-// ========================= TYPES
-interface Props {
-	items: T[];
-	isDone: boolean;
-	isLoading: boolean;
-	children: Snippet<[{ items: T[] }]>;
-	/** Skeleton snippet rendered while loading more */
-	skeleton?: Snippet;
-	onLoadMore: () => void;
-	threshold?: number;
-	loadingClass?: string;
-};
+	// ========================= TYPES
+	interface Props {
+		items: T[];
+		isDone: boolean;
+		isLoading: boolean;
+		children: Snippet<[{ items: T[] }]>;
+		/** Skeleton snippet rendered while loading more */
+		skeleton?: Snippet;
+		onLoadMore: () => void;
+		threshold?: number;
+		loadingClass?: string;
+	}
 
-// ========================= PROPS
-let {
-	items,
-	isDone,
-	isLoading,
-	children,
-	skeleton,
-	onLoadMore,
-	threshold = 200,
-	loadingClass,
-}: Props = $props();
+	// ========================= PROPS
+	let {
+		items,
+		isDone,
+		isLoading,
+		children,
+		skeleton,
+		onLoadMore,
+		threshold = 200,
+		loadingClass,
+	}: Props = $props();
 
-// ========================= STATE
-let sentinelEl: HTMLDivElement | undefined = $state();
+	// ========================= STATE
+	let sentinelEl: HTMLDivElement | undefined = $state();
 
-// ========================= EFFECTS
-$effect(() => {
-	if (!sentinelEl || isDone) return;
+	// ========================= EFFECTS
+	$effect(() => {
+		if (!sentinelEl || isDone) return;
 
-	const observer = new IntersectionObserver(
-		(entries) => {
-			if (entries[0]?.isIntersecting && !isLoading && !isDone) {
-				onLoadMore();
-			}
-		},
-		{ rootMargin: `${threshold}px` },
-	);
+		const observer = new IntersectionObserver(
+			(entries) => {
+				if (entries[0]?.isIntersecting && !isLoading && !isDone) {
+					onLoadMore();
+				}
+			},
+			{ rootMargin: `${threshold}px` },
+		);
 
-	observer.observe(sentinelEl);
-	return () => observer.disconnect();
-});
+		observer.observe(sentinelEl);
+		return () => observer.disconnect();
+	});
 </script>
 
 <!-- =========================== -->

package/src/components/data-table/pagination.svelte

@@ -1,27 +1,27 @@
 <script lang="ts">
-import { CaretLeft, CaretRight } from "phosphor-svelte";
-import { Button } from "../../shadcn/button/index.js";
-import { totalPages as calcTotalPages } from "./data-table.js";
+	import { CaretLeft, CaretRight } from "phosphor-svelte";
+	import { Button } from "../../shadcn/button/index.js";
+	import { totalPages as calcTotalPages } from "./data-table.js";
 
-// ========================= TYPES
-interface Props {
-	page: number;
-	pageSize: number;
-	total: number;
-	onPageChange?: (page: number) => void;
-	/** If provided, renders <a> tags instead of buttons (for server-side pagination) */
-	buildHref?: (page: number) => string;
-};
+	// ========================= TYPES
+	interface Props {
+		page: number;
+		pageSize: number;
+		total: number;
+		onPageChange?: (page: number) => void;
+		/** If provided, renders <a> tags instead of buttons (for server-side pagination) */
+		buildHref?: (page: number) => string;
+	}
 
-// ========================= PROPS
-let { page, pageSize, total, onPageChange, buildHref }: Props = $props();
+	// ========================= PROPS
+	let { page, pageSize, total, onPageChange, buildHref }: Props = $props();
 
-// ========================= DERIVED
-let pages = $derived(calcTotalPages(total, pageSize));
-let hasPrev = $derived(page > 1);
-let hasNext = $derived(page < pages);
-let start = $derived((page - 1) * pageSize + 1);
-let end = $derived(Math.min(page * pageSize, total));
+	// ========================= DERIVED
+	let pages = $derived(calcTotalPages(total, pageSize));
+	let hasPrev = $derived(page > 1);
+	let hasNext = $derived(page < pages);
+	let start = $derived((page - 1) * pageSize + 1);
+	let end = $derived(Math.min(page * pageSize, total));
 </script>
 
 {#if pages > 1}
@@ -49,11 +49,23 @@ let end = $derived(Math.min(page * pageSize, total));
 					</Button>
 				{/if}
 			{:else}
-				<Button variant="outline" size="sm" icon disabled={!hasPrev} onclick={() => onPageChange?.(page - 1)}>
+				<Button
+					variant="outline"
+					size="sm"
+					icon
+					disabled={!hasPrev}
+					onclick={() => onPageChange?.(page - 1)}
+				>
 					<CaretLeft class="size-4" />
 				</Button>
 				<span class="mx-2 tabular-nums">{page} / {pages}</span>
-				<Button variant="outline" size="sm" icon disabled={!hasNext} onclick={() => onPageChange?.(page + 1)}>
+				<Button
+					variant="outline"
+					size="sm"
+					icon
+					disabled={!hasNext}
+					onclick={() => onPageChange?.(page + 1)}
+				>
 					<CaretRight class="size-4" />
 				</Button>
 			{/if}

package/src/components/data-table/row-arrow.svelte

@@ -1,28 +1,31 @@
 <script lang="ts">
-// =========================
-// IMPORTS
-// =========================
-import { CaretRight } from "phosphor-svelte";
-import { cn } from "../../lib/utils.js";
+	// =========================
+	// IMPORTS
+	// =========================
+	import { CaretRight } from "phosphor-svelte";
+	import { cn } from "../../lib/utils.js";
 
-// =========================
-// TYPES
-// =========================
-interface Props {
-	class?: string;
-};
+	// =========================
+	// TYPES
+	// =========================
+	interface Props {
+		class?: string;
+	}
 
-// =========================
-// PROPS
-// =========================
-let { class: className }: Props = $props();
+	// =========================
+	// PROPS
+	// =========================
+	let { class: className }: Props = $props();
 </script>
 
 <!-- =========================== -->
 <!-- MARKUP -->
 <!-- =========================== -->
 <CaretRight
-	class={cn("size-3.5 text-muted-foreground opacity-0 transition-opacity group-hover/row:opacity-100", className)}
+	class={cn(
+		"size-3.5 text-muted-foreground opacity-0 transition-opacity group-hover/row:opacity-100",
+		className,
+	)}
 	weight="bold"
 	aria-hidden="true"
 />