@heyramzi/ui 2.0.1 → 2.2.0

package/src/charts/dashboard/panel-grid.svelte

@@ -1,37 +1,37 @@
 <script lang="ts">
-// =========================
-// IMPORTS
-// =========================
-import type { Snippet } from "svelte";
-import { cn } from "../../lib/utils.js";
+	// =========================
+	// IMPORTS
+	// =========================
+	import type { Snippet } from "svelte";
+	import { cn } from "../../lib/utils.js";
 
-// =========================
-// TYPES
-// =========================
-interface Props {
-	/** `<DataPanel>` children, or tiles standing beside one. */
-	children: Snippet;
-	/**
-	 * Panels per row: two charts, three breakdowns, or `main`, where the first
-	 * child takes two thirds and the rates beside it one third.
-	 */
-	columns?: 2 | 3 | "main";
-	class?: string;
-};
+	// =========================
+	// TYPES
+	// =========================
+	interface Props {
+		/** `<DataPanel>` children, or tiles standing beside one. */
+		children: Snippet;
+		/**
+		 * Panels per row: two charts, three breakdowns, or `main`, where the first
+		 * child takes two thirds and the rates beside it one third.
+		 */
+		columns?: 2 | 3 | "main";
+		class?: string;
+	}
 
-// =========================
-// PROPS
-// =========================
-let { children, columns = 2, class: className }: Props = $props();
+	// =========================
+	// PROPS
+	// =========================
+	let { children, columns = 2, class: className }: Props = $props();
 
-// =========================
-// CONSTANTS
-// =========================
-const COLUMNS: Record<2 | 3 | "main", string> = {
-	2: "lg:grid-cols-2",
-	3: "lg:grid-cols-2 xl:grid-cols-3",
-	main: "lg:grid-cols-3 lg:[&>*:first-child]:col-span-2",
-};
+	// =========================
+	// CONSTANTS
+	// =========================
+	const COLUMNS: Record<2 | 3 | "main", string> = {
+		2: "lg:grid-cols-2",
+		3: "lg:grid-cols-2 xl:grid-cols-3",
+		main: "lg:grid-cols-3 lg:[&>*:first-child]:col-span-2",
+	};
 </script>
 
 <!-- =========================== -->

package/src/charts/dashboard/period-filter.svelte

@@ -1,31 +1,31 @@
 <script lang="ts" generics="T extends string">
-// =========================
-// IMPORTS
-// =========================
-import { cn } from "../../lib/utils.js";
-import { SegmentedFilter, SegmentedNav, type TabDef } from "../../components/segmented/index.js";
+	// =========================
+	// IMPORTS
+	// =========================
+	import { cn } from "../../lib/utils.js";
+	import { SegmentedFilter, SegmentedNav, type TabDef } from "../../components/segmented/index.js";
 
-// =========================
-// TYPES
-// =========================
-interface Props {
-	options: readonly TabDef<T>[];
-	value: T;
-	/**
-	 * Give this and the strip is links, so the choice survives reload, back and a
-	 * shared link. Omit it and the strip is a `<SegmentedFilter>` the caller owns.
-	 */
-	href?: (value: T) => string;
-	/** Filter mode only. Ignored when `href` is set. */
-	onValueChange?: (value: T) => void;
-	ariaLabel: string;
-	class?: string;
-};
+	// =========================
+	// TYPES
+	// =========================
+	interface Props {
+		options: readonly TabDef<T>[];
+		value: T;
+		/**
+		 * Give this and the strip is links, so the choice survives reload, back and a
+		 * shared link. Omit it and the strip is a `<SegmentedFilter>` the caller owns.
+		 */
+		href?: (value: T) => string;
+		/** Filter mode only. Ignored when `href` is set. */
+		onValueChange?: (value: T) => void;
+		ariaLabel: string;
+		class?: string;
+	}
 
-// =========================
-// PROPS
-// =========================
-let { options, value, href, onValueChange, ariaLabel, class: className }: Props = $props();
+	// =========================
+	// PROPS
+	// =========================
+	let { options, value, href, onValueChange, ariaLabel, class: className }: Props = $props();
 </script>
 
 <!-- =========================== -->

package/src/charts/dashboard/rating-chip.svelte

@@ -1,26 +1,26 @@
 <script lang="ts">
-/*
- * One A to E grade on one colour scale, so a C means one thing everywhere.
- * Light mode takes the 800 shades, since amber on cream fails contrast.
- */
-import { cn } from "../../lib/utils.js";
+	/*
+	 * One A to E grade on one colour scale, so a C means one thing everywhere.
+	 * Light mode takes the 800 shades, since amber on cream fails contrast.
+	 */
+	import { cn } from "../../lib/utils.js";
 
-interface Props {
-	grade: string;
-	/** What the letter hides: the score and what it was charged for. */
-	hint?: string;
-	class?: string;
-};
+	interface Props {
+		grade: string;
+		/** What the letter hides: the score and what it was charged for. */
+		hint?: string;
+		class?: string;
+	}
 
-let { grade, hint, class: className }: Props = $props();
+	let { grade, hint, class: className }: Props = $props();
 
-const TONE: Record<string, string> = {
-	A: "bg-success/12 text-success-800 dark:text-success",
-	B: "bg-success/12 text-success-800 dark:text-success",
-	C: "bg-muted text-foreground",
-	D: "bg-warning/18 text-warning-800 dark:text-warning",
-	E: "bg-destructive/12 text-destructive",
-};
+	const TONE: Record<string, string> = {
+		A: "bg-success/12 text-success-800 dark:text-success",
+		B: "bg-success/12 text-success-800 dark:text-success",
+		C: "bg-muted text-foreground",
+		D: "bg-warning/18 text-warning-800 dark:text-warning",
+		E: "bg-destructive/12 text-destructive",
+	};
 </script>
 
 <span

package/src/charts/dashboard/stat-band.svelte

@@ -1,39 +1,39 @@
 <script lang="ts">
-// =========================
-// IMPORTS
-// =========================
-import type { Snippet } from "svelte";
-import { cn } from "../../lib/utils.js";
+	// =========================
+	// IMPORTS
+	// =========================
+	import type { Snippet } from "svelte";
+	import { cn } from "../../lib/utils.js";
 
-// =========================
-// TYPES
-// =========================
-interface Props {
-	/** `<StatTile>` children. Four to a row on a desk, two on a phone. */
-	children: Snippet;
-	/**
-	 * Cards per row at the widest breakpoint, four unless the set is smaller.
-	 * Five and six are only for a fixed scorecard. The headline stays one row.
-	 */
-	columns?: 2 | 3 | 4 | 5 | 6;
-	class?: string;
-};
+	// =========================
+	// TYPES
+	// =========================
+	interface Props {
+		/** `<StatTile>` children. Four to a row on a desk, two on a phone. */
+		children: Snippet;
+		/**
+		 * Cards per row at the widest breakpoint, four unless the set is smaller.
+		 * Five and six are only for a fixed scorecard. The headline stays one row.
+		 */
+		columns?: 2 | 3 | 4 | 5 | 6;
+		class?: string;
+	}
 
-// =========================
-// PROPS
-// =========================
-let { children, columns = 4, class: className }: Props = $props();
+	// =========================
+	// PROPS
+	// =========================
+	let { children, columns = 4, class: className }: Props = $props();
 
-// =========================
-// DERIVED
-// =========================
-const COLUMNS: Record<2 | 3 | 4 | 5 | 6, string> = {
-	2: "sm:grid-cols-2",
-	3: "sm:grid-cols-2 lg:grid-cols-3",
-	4: "sm:grid-cols-2 lg:grid-cols-4",
-	5: "sm:grid-cols-3 lg:grid-cols-5",
-	6: "sm:grid-cols-3 xl:grid-cols-6",
-};
+	// =========================
+	// DERIVED
+	// =========================
+	const COLUMNS: Record<2 | 3 | 4 | 5 | 6, string> = {
+		2: "sm:grid-cols-2",
+		3: "sm:grid-cols-2 lg:grid-cols-3",
+		4: "sm:grid-cols-2 lg:grid-cols-4",
+		5: "sm:grid-cols-3 lg:grid-cols-5",
+		6: "sm:grid-cols-3 xl:grid-cols-6",
+	};
 </script>
 
 <!-- =========================== -->

package/src/charts/dashboard/stat-tile.svelte

@@ -1,108 +1,108 @@
 <script lang="ts" module>
-/**
- * Which way a metric has to move to be good news. `neutral` fits a figure like
- * spend, which isn't a win or a loss until the return sits beside it.
- */
-export type StatDirection = "up-good" | "down-good" | "neutral";
+	/**
+	 * Which way a metric has to move to be good news. `neutral` fits a figure like
+	 * spend, which isn't a win or a loss until the return sits beside it.
+	 */
+	export type StatDirection = "up-good" | "down-good" | "neutral";
 </script>
 
 <script lang="ts">
-// =========================
-// IMPORTS
-// =========================
-import NumberChart from "../number-chart.svelte";
-import Sparkline from "../sparkline.svelte";
-import type { Snippet } from "svelte";
-import { cn } from "../../lib/utils.js";
-import { Icon } from "../../components/icon/index.js";
-import type { PhosphorIcon } from "../../lib/icon-types.js";
+	// =========================
+	// IMPORTS
+	// =========================
+	import NumberChart from "../number-chart.svelte";
+	import Sparkline from "../sparkline.svelte";
+	import type { Snippet } from "svelte";
+	import { cn } from "../../lib/utils.js";
+	import { Icon } from "../../components/icon/index.js";
+	import type { PhosphorIcon } from "../../lib/icon-types.js";
 
-// =========================
-// TYPES
-// =========================
-interface Props {
-	label: string;
-	/** Already formatted. The tile never guesses a currency or a locale. */
-	value: string;
-	/**
-	 * Percent change against the previous period. `null` means nothing to
-	 * compare yet and draws a dash. Omit it when the figure has no period at all.
-	 */
-	deltaPct?: number | null;
-	direction?: StatDirection;
-	/** The one figure the screen was opened to read. Set it on exactly one tile. */
-	lead?: boolean;
-	/** A quiet line under the value: what it was measured over, or why it is a dash. */
-	hint?: string;
-	/**
-	 * 0 to 1, drawn as a track under the value: share of a total or progress to
-	 * a target. Omit it for a cash balance.
-	 */
-	share?: number;
-	/** What `share` is measured against, e.g. "of revenue". Only with `share`. */
-	shareLabel?: string;
-	/** Track colour. The first series token unless a tile means something else. */
-	color?: string;
-	/**
-	 * A shape behind the figure, oldest first, bled along the card's bottom.
-	 * The treatment every tile gives a number with a history. Omit when there
-	 * is none.
-	 */
-	series?: number[];
-	/** Leading mark before the label. */
-	icon?: PhosphorIcon;
-	/**
-	 * Makes the tile a link, like a balance that opens the bank. It lives here so
-	 * a linked figure isn't drawn as a second, different card style.
-	 */
-	href?: string;
-	/** What the link opens, shown on hover. Only with `href`. */
-	hrefLabel?: string;
-	/**
-	 * `_blank` for a figure that leaves the app (a bank, a provider console),
-	 * `_self` for one that is another page of this app. Only with `href`.
-	 */
-	target?: "_self" | "_blank";
-	/**
-	 * A chip at the end of the label row: the limit the figure is judged against,
-	 * the state it is in. Wins over `hrefLabel`, which is only a hover hint.
-	 */
-	badge?: Snippet;
-	/** A loss or an overrun: the figure turns the destructive colour. */
-	negative?: boolean;
-	class?: string;
-};
+	// =========================
+	// TYPES
+	// =========================
+	interface Props {
+		label: string;
+		/** Already formatted. The tile never guesses a currency or a locale. */
+		value: string;
+		/**
+		 * Percent change against the previous period. `null` means nothing to
+		 * compare yet and draws a dash. Omit it when the figure has no period at all.
+		 */
+		deltaPct?: number | null;
+		direction?: StatDirection;
+		/** The one figure the screen was opened to read. Set it on exactly one tile. */
+		lead?: boolean;
+		/** A quiet line under the value: what it was measured over, or why it is a dash. */
+		hint?: string;
+		/**
+		 * 0 to 1, drawn as a track under the value: share of a total or progress to
+		 * a target. Omit it for a cash balance.
+		 */
+		share?: number;
+		/** What `share` is measured against, e.g. "of revenue". Only with `share`. */
+		shareLabel?: string;
+		/** Track colour. The first series token unless a tile means something else. */
+		color?: string;
+		/**
+		 * A shape behind the figure, oldest first, bled along the card's bottom.
+		 * The treatment every tile gives a number with a history. Omit when there
+		 * is none.
+		 */
+		series?: number[];
+		/** Leading mark before the label. */
+		icon?: PhosphorIcon;
+		/**
+		 * Makes the tile a link, like a balance that opens the bank. It lives here so
+		 * a linked figure isn't drawn as a second, different card style.
+		 */
+		href?: string;
+		/** What the link opens, shown on hover. Only with `href`. */
+		hrefLabel?: string;
+		/**
+		 * `_blank` for a figure that leaves the app (a bank, a provider console),
+		 * `_self` for one that is another page of this app. Only with `href`.
+		 */
+		target?: "_self" | "_blank";
+		/**
+		 * A chip at the end of the label row: the limit the figure is judged against,
+		 * the state it is in. Wins over `hrefLabel`, which is only a hover hint.
+		 */
+		badge?: Snippet;
+		/** A loss or an overrun: the figure turns the destructive colour. */
+		negative?: boolean;
+		class?: string;
+	}
 
-// =========================
-// PROPS
-// =========================
-let {
-	label,
-	value,
-	deltaPct,
-	direction = "neutral",
-	lead = false,
-	hint,
-	share,
-	shareLabel,
-	color,
-	series,
-	icon,
-	href,
-	hrefLabel,
-	target = "_blank",
-	badge,
-	negative = false,
-	class: className,
-}: Props = $props();
+	// =========================
+	// PROPS
+	// =========================
+	let {
+		label,
+		value,
+		deltaPct,
+		direction = "neutral",
+		lead = false,
+		hint,
+		share,
+		shareLabel,
+		color,
+		series,
+		icon,
+		href,
+		hrefLabel,
+		target = "_blank",
+		badge,
+		negative = false,
+		class: className,
+	}: Props = $props();
 
-// =========================
-// DERIVED
-// =========================
-// `Sparkline` plots rows, and a card carries a bare series. Two points is a
-// line, not a shape, so it is not drawn.
-let points = $derived(series?.map((value, index) => ({ i: index, v: value })) ?? []);
-let hasSeries = $derived(points.length > 2);
+	// =========================
+	// DERIVED
+	// =========================
+	// `Sparkline` plots rows, and a card carries a bare series. Two points is a
+	// line, not a shape, so it is not drawn.
+	let points = $derived(series?.map((value, index) => ({ i: index, v: value })) ?? []);
+	let hasSeries = $derived(points.length > 2);
 </script>
 
 <!-- =========================== -->
@@ -155,7 +155,14 @@ let hasSeries = $derived(points.length > 2);
 			class="pointer-events-none absolute inset-x-px bottom-px h-12 overflow-hidden rounded-b-[calc(var(--radius-xl)-1px)]"
 			aria-hidden="true"
 		>
-			<Sparkline data={points} xKey="i" yKey="v" color={color ?? "var(--chart-1)"} height={48} bare />
+			<Sparkline
+				data={points}
+				xKey="i"
+				yKey="v"
+				color={color ?? "var(--chart-1)"}
+				height={48}
+				bare
+			/>
 		</div>
 	{/if}
 </svelte:element>

package/src/charts/donut-chart.svelte

@@ -25,7 +25,7 @@
 		/** Format the center value */
 		formatValue?: (v: number) => string;
 		class?: string;
-	};
+	}
 
 	// =========================
 	// PROPS

package/src/charts/edge-fade.svelte

@@ -12,7 +12,7 @@
 		id: string;
 		/** Fraction of the shape's width faded at each side, 0-0.45. */
 		amount?: number;
-	};
+	}
 
 	// =========================
 	// PROPS

package/src/charts/figure.svelte

@@ -41,7 +41,7 @@
 		/** Leading icon before the title. */
 		icon?: Snippet;
 		class?: string;
-	};
+	}
 
 	// =========================
 	// PROPS

package/src/charts/gauge-chart.css

@@ -1,7 +1,5 @@
-/* Styles for GaugeChart. Plain stylesheet (see area-chart.css for why).
-   Selectors are namespaced under `.hr-gauge` (the generic ones below would
-   otherwise collide with RingChart's identical `.value`/`.label`/`.center`/
-   `.fill`/`svg` names once they are no longer Svelte-scoped). */
+/* A plain stylesheet (see area-chart.css), namespaced under `.hr-gauge` because RingChart's
+   unscoped `.value`, `.label` and `.center` would otherwise collide. */
 
 .hr-gauge {
   position: relative;
@@ -51,9 +49,8 @@
 /* WHY: active paint comes from the fill attribute (flat or gradient url), so
    no CSS fill here, which would override it. */
 .hr-gauge .fill {
-  /* WHY: each active notch fades up in arc order; the per-notch stagger
-	   sweeps the colour around the arc so the gauge reads as filling, instead
-	   of every notch popping in from the centre at once. */
+  /* WHY: active notches fade up in arc order, so the gauge reads as filling
+	   instead of every notch popping in at once. */
   animation: hr-gauge-notch-in 0.3s var(--chart-ease-out, cubic-bezier(0.22, 1, 0.36, 1)) both;
 }
 

package/src/charts/gauge-chart.svelte

@@ -67,7 +67,7 @@
 		/** Accessible description, e.g. "ARR run rate". */
 		ariaLabel?: string;
 		class?: string;
-	};
+	}
 
 	// =========================
 	// PROPS

package/src/charts/hover-focus.svelte

@@ -20,7 +20,7 @@
 		bleed?: number;
 		/** How far the band reaches each side of the point, as a share of the gap to its neighbour. */
 		reach?: number;
-	};
+	}
 
 	// =========================
 	// PROPS

package/src/charts/legend.css

@@ -111,9 +111,7 @@
   height: 100%;
   border-radius: 999px;
   /* WHY: scaleX from the left avoids the layout thrash of animating width;
-	   the bar's fill fraction is set inline as --hr-bar-scale. The entrance
-	   sweeps from 0 once (delays match the ring sweep); the transition takes
-	   over for later data changes. */
+	   the bar's fill fraction is set inline as --hr-bar-scale. */
   transform-origin: left center;
   transform: scaleX(var(--hr-bar-scale, 0));
   animation: hr-legend-fill var(--chart-motion-reveal, 1100ms)

package/src/charts/legend.svelte

@@ -33,7 +33,7 @@
 		hoveredIndex?: number | null;
 		onHoverChange?: (index: number | null) => void;
 		class?: string;
-	};
+	}
 
 	// =========================
 	// PROPS

package/src/charts/line-chart.svelte

@@ -57,7 +57,7 @@
 		formatValue?: (v: number) => string;
 		formatX?: (v: unknown) => string;
 		class?: string;
-	};
+	}
 
 	// =========================
 	// PROPS

package/src/charts/number-chart.css

@@ -18,9 +18,8 @@
     border-color: color-mix(in srgb, var(--ring, var(--chart-1)) 28%, var(--border, transparent));
   }
 }
-/* WHY a bare mode and not a second component: a band is one panel with
-   hairlines through it, so a figure inside it must bring no edge of its own.
-   Same object, one less border. */
+/* A band is one panel with hairlines through it, so a figure inside it must bring no
+   edge of its own. */
 .hr-number-chart[data-bare] {
   padding: 1rem;
   border: 0;
@@ -60,9 +59,8 @@
   font-size: 0.625rem;
 }
 
-/* WHY the row is baseline-aligned and top-anchored: a band mixes figures that
-   carry a caption with figures that do not, and every value in the row has to
-   sit on one line. The slack falls to the bottom, where nothing reads it. */
+/* Baseline-aligned and top-anchored, so values sit on one line even when only some
+   figures carry a caption. */
 .hr-number-row {
   display: flex;
   align-items: baseline;
@@ -108,9 +106,8 @@
 .hr-number-delta-text {
   font-variant-numeric: tabular-nums;
 }
-/* The readable form of a trend colour: a hue picked to read as a mark measures
-   about 3.5:1 as 12px text, so it is mixed toward the page foreground. One rule
-   serves both themes and the package needs to know nothing about which is on. */
+/* A trend hue measures about 3.5:1 as 12px text, so it's mixed toward the foreground,
+   which works in both themes. */
 .hr-number-delta[data-tone="up"] {
   color: color-mix(
     in oklab,

package/src/charts/number-chart.svelte

@@ -80,7 +80,7 @@
 		/** Rendered at the right of the label row. */
 		trailing?: Snippet;
 		class?: string;
-	};
+	}
 
 	// =========================
 	// PROPS