@heyramzi/ui 6.1.0 → 8.0.0

package/src/charts/legend.svelte

@@ -1,112 +0,0 @@
-<script lang="ts">
-	// =========================
-	// IMPORTS
-	// =========================
-	import "./legend.css";
-	import { cn } from "@heyramzi/utils";
-
-	// =========================
-	// TYPES
-	// =========================
-	type LegendItem = {
-		label: string;
-		value: number;
-		/** Required when `showProgress` or `showPercentage` is set. */
-		maxValue?: number;
-		color: string;
-	};
-
-	type Props = {
-		items: LegendItem[];
-		title?: string;
-		/** Stacked rows vs inline wrap. */
-		layout?: "vertical" | "horizontal";
-		/** Render a progress bar under each row (needs maxValue). */
-		showProgress?: boolean;
-		/** Show the value beside each label. */
-		showValue?: boolean;
-		/** Append a percentage (needs maxValue). */
-		showPercentage?: boolean;
-		formatValue?: (v: number) => string;
-		formatPercentage?: (p: number) => string;
-		/** Hovered index, bindable for chart hover-sync. */
-		hoveredIndex?: number | null;
-		onHoverChange?: (index: number | null) => void;
-		class?: string;
-	};
-
-	// =========================
-	// PROPS
-	// =========================
-	let {
-		items,
-		title,
-		layout = "vertical",
-		showProgress = false,
-		showValue = true,
-		showPercentage = false,
-		formatValue = (v) => v.toLocaleString(),
-		formatPercentage = (p) => `${p.toFixed(0)}%`,
-		hoveredIndex = $bindable(null),
-		onHoverChange,
-		class: className,
-	}: Props = $props();
-
-	// =========================
-	// FUNCTIONS
-	// =========================
-	function pct(item: LegendItem): number {
-		if (!item.maxValue || item.maxValue <= 0) return 0;
-		return Math.max(0, Math.min(100, (item.value / item.maxValue) * 100));
-	}
-
-	function setHover(index: number | null) {
-		hoveredIndex = index;
-		onHoverChange?.(index);
-	}
-</script>
-
-<!-- =========================== -->
-<!-- MARKUP -->
-<!-- =========================== -->
-<div class={cn("hr-legend", className)} class:horizontal={layout === "horizontal"}>
-	{#if title}
-		<p class="hr-legend-title">{title}</p>
-	{/if}
-	<ul class="hr-legend-items">
-		{#each items as item, i (item.label + i)}
-			{@const dimmed = hoveredIndex !== null && hoveredIndex !== i}
-			<li>
-				<button
-					type="button"
-					class="hr-legend-item"
-					class:dimmed
-					onmouseenter={() => setHover(i)}
-					onmouseleave={() => setHover(null)}
-					onfocus={() => setHover(i)}
-					onblur={() => setHover(null)}
-				>
-					<span class="hr-legend-marker" style:background={item.color}></span>
-					<span class="hr-legend-label">{item.label}</span>
-					{#if showValue}
-						<span class="hr-legend-value">
-							{formatValue(item.value)}{#if showPercentage && item.maxValue}<span
-									class="hr-legend-pct">{formatPercentage(pct(item))}</span
-								>{/if}
-						</span>
-					{/if}
-					{#if showProgress && item.maxValue}
-						<span class="hr-legend-track">
-							<span
-								class="hr-legend-bar"
-								style:--hr-bar-scale={pct(item) / 100}
-								style:background={item.color}
-								style:animation-delay="{160 + i * 120}ms"
-							></span>
-						</span>
-					{/if}
-				</button>
-			</li>
-		{/each}
-	</ul>
-</div>

package/src/charts/line-chart.css

@@ -1,26 +0,0 @@
-/* Styles for LineChart. Plain stylesheet (see area-chart.css for why). Selectors
-   are namespaced under `.hr-line-chart`. */
-
-.hr-line-chart {
-  width: 100%;
-  display: flex;
-  flex-direction: column;
-  gap: 0.5rem;
-}
-.hr-line-chart .hr-chart-body {
-  width: 100%;
-}
-
-.hr-line-chart .empty {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  height: 100%;
-  border: 1px dashed var(--chart-grid, oklch(0.5 0.01 286 / 0.2));
-  border-radius: 0.5rem;
-}
-.hr-line-chart .empty p {
-  font-size: 0.8125rem;
-  color: var(--chart-label, oklch(0.5 0.01 286));
-  margin: 0;
-}

package/src/charts/line-chart.svelte

@@ -1,256 +0,0 @@
-<script lang="ts" generics="TData extends Record<string, unknown>">
-	// =========================
-	// IMPORTS
-	// =========================
-	import "./line-chart.css";
-	import {
-		Area,
-		Axis,
-		Chart,
-		Highlight,
-		LinearGradient,
-		Points,
-		Spline,
-		Svg,
-		Tooltip,
-	} from "layerchart";
-	import { curveMonotoneX } from "d3-shape";
-	import Crosshair from "./crosshair.svelte";
-	import EdgeFade from "./edge-fade.svelte";
-	import { resolveEdgeFade } from "./edge-fade.js";
-	import Figure from "./figure.svelte";
-	import HoverFocus from "./hover-focus.svelte";
-	import { DOMAIN_MOTION, TOOLTIP_GAP, TOOLTIP_TOP } from "./motion.js";
-	import Reveal from "./reveal.svelte";
-
-	// =========================
-	// TYPES
-	// =========================
-	type Series = {
-		key: keyof TData & string;
-		label?: string;
-		color?: string;
-	};
-
-	type Props = {
-		data: TData[];
-		xKey: keyof TData & string;
-		yKey?: keyof TData & string;
-		series?: Series[];
-		color?: string;
-		height?: number;
-		smooth?: boolean;
-		/**
-		 * Softens the left and right ends of the gradient fill instead of cutting them off at the plot edge.
-		 */
-
-		/*
-		 * `true` fades 8% of the width per side, a number sets the fraction (0-0.45), `false` keeps the hard edges.
-		 */
-		edgeFade?: boolean | number;
-		/** Draw a ring marker at every data point. */
-		showMarkers?: boolean;
-		/** Inclusive index where a dashed "in progress" tail begins (e.g. the latest, still-open period). */
-		dashFromIndex?: number;
-		/** Dash pattern for the tail segment. */
-		dashArray?: string;
-		formatValue?: (v: number) => string;
-		formatX?: (v: unknown) => string;
-		class?: string;
-	};
-
-	// =========================
-	// PROPS
-	// =========================
-	let {
-		data,
-		xKey,
-		yKey,
-		series: seriesInput,
-		color = "var(--chart-1)",
-		height = 240,
-		smooth = true,
-		edgeFade = true,
-		showMarkers = false,
-		dashFromIndex,
-		dashArray = "5 4",
-		formatValue = (v) => v.toLocaleString(),
-		formatX = (v) => String(v),
-		class: className,
-	}: Props = $props();
-
-	// =========================
-	// STATE
-	// =========================
-	let active = $state<TData | null>(null);
-
-	// ========================= FUNCTIONS ========================= WHY: called from the tooltip header's value expression so it re-runs on every active-point change; an unread {@const} side effect only evaluates once.
-
-	// The microtask defers the state write out of template evaluation.
-	function trackActive(d: TData): string {
-		queueMicrotask(() => {
-			active = d;
-		});
-		return formatX(d[xKey]);
-	}
-
-	// =========================
-	// DERIVED
-	// =========================
-	const uid = `hr-line-${Math.random().toString(36).slice(2, 8)}`;
-	const series = $derived(
-		seriesInput && seriesInput.length > 0
-			? seriesInput.map((s, i) => ({
-					key: s.key,
-					label: s.label ?? s.key,
-					color: s.color ?? `var(--chart-${(i % 5) + 1})`,
-				}))
-			: yKey
-				? [{ key: yKey, label: yKey, color }]
-				: [],
-	);
-	const yMax = $derived(
-		Math.max(0, ...data.flatMap((d) => series.map((s) => Number(d[s.key] ?? 0)))),
-	);
-	const curve = $derived(smooth ? curveMonotoneX : undefined);
-	const fade = $derived(resolveEdgeFade(edgeFade));
-	const fadeMask = $derived(fade > 0 ? `url(#${uid}-fade)` : undefined);
-	const fallback = $derived(data.length > 0 ? data[data.length - 1] : null);
-	const display = $derived(active ?? fallback);
-	// WHY: a dashed tail is two splines sharing the boundary point so the solid
-	// and dashed segments meet without a gap.
-	const hasTail = $derived(
-		dashFromIndex != null && dashFromIndex >= 0 && dashFromIndex < data.length - 1,
-	);
-	const solidData = $derived(hasTail ? data.slice(0, (dashFromIndex as number) + 1) : data);
-	const tailData = $derived(hasTail ? data.slice(dashFromIndex as number) : []);
-	const figureRows = $derived(
-		display
-			? series.map((s) => ({ value: Number(display[s.key]), label: s.label, color: s.color }))
-			: null,
-	);
-</script>
-
-<!-- =========================== -->
-<!-- LINE CHART -->
-<!-- =========================== -->
-<div
-	class="hr-line-chart {className ?? ''}"
-	role="img"
-	aria-label="Line chart"
-	onpointerleave={() => (active = null)}
->
-	{#if figureRows && display}
-		<Figure series={figureRows} eyebrow={formatX(display[xKey])} format={formatValue} size="md" />
-	{:else}
-		<Figure value="—" eyebrow="Latest" size="md" />
-	{/if}
-
-	<div class="hr-chart-body" style:height="{height}px">
-		{#snippet strokes(s: (typeof series)[number])}
-			{#if hasTail}
-				<Spline
-					data={solidData}
-					y={s.key}
-					{curve}
-					style="stroke: {s.color}; fill: none"
-					stroke-width="2"
-					stroke-linecap="round"
-				/>
-				<Spline
-					data={tailData}
-					y={s.key}
-					{curve}
-					style="stroke: {s.color}; fill: none"
-					stroke-width="2"
-					stroke-dasharray={dashArray}
-				/>
-			{:else}
-				<Spline
-					y={s.key}
-					{curve}
-					style="stroke: {s.color}; fill: none"
-					stroke-width="2"
-					stroke-linecap="round"
-				/>
-			{/if}
-		{/snippet}
-		{#if data.length === 0}
-			<div class="empty"><p>No data</p></div>
-		{:else}
-			<Chart
-				{data}
-				x={xKey}
-				y={series[0]?.key}
-				yDomain={[0, yMax || 1]}
-				yNice
-				padding={{ left: 48, bottom: 28, top: 8, right: 12 }}
-				tooltipContext={{ mode: "bisect-x" }}
-				motion={DOMAIN_MOTION}
-			>
-				<Svg>
-					<Axis placement="left" format={(v) => formatValue(Number(v))} ticks={4} />
-					<Axis placement="bottom" format={(v) => formatX(v)} />
-					<g class="hr-line-grid">
-						<Axis placement="left" grid rule={false} ticks={4} format={() => ""} />
-					</g>
-					{#if fade > 0}
-						<EdgeFade id="{uid}-fade" amount={fade} />
-					{/if}
-					<Crosshair id="{uid}-cross" />
-					<HoverFocus>
-						<Reveal>
-							{#each series as s, i (s.key)}
-								<LinearGradient id="{uid}-{i}" vertical>
-									{#snippet stopsContent()}
-										<stop offset="0%" stop-color={s.color} stop-opacity="0.22" />
-										<stop offset="100%" stop-color={s.color} stop-opacity="0.01" />
-									{/snippet}
-								</LinearGradient>
-								<Area
-									y1={s.key}
-									{curve}
-									fill="url(#{uid}-{i})"
-									mask={fadeMask}
-									line={false}
-									class="hr-line-area"
-								/>
-								{@render strokes(s)}
-								{#if showMarkers}
-									<Points
-										y={s.key}
-										r={3}
-										fill="var(--background, white)"
-										stroke={s.color}
-										stroke-width={2}
-										class="hr-line-marker"
-									/>
-								{/if}
-							{/each}
-						</Reveal>
-						{#snippet segment()}
-							{#each series as s (s.key)}
-								{@render strokes(s)}
-							{/each}
-						{/snippet}
-					</HoverFocus>
-					<Highlight points lines={{ style: `stroke: url(#${uid}-cross)` }} />
-				</Svg>
-				<Tooltip.Root x="data" y={TOOLTIP_TOP} xOffset={TOOLTIP_GAP}>
-					{#snippet children({ data: d })}
-						<Tooltip.Header value={trackActive(d as TData)} />
-						<Tooltip.List>
-							{#each series as s (s.key)}
-								<Tooltip.Item
-									label={s.label}
-									value={formatValue(Number(d[s.key]))}
-									color={s.color}
-								/>
-							{/each}
-						</Tooltip.List>
-					{/snippet}
-				</Tooltip.Root>
-			</Chart>
-		{/if}
-	</div>
-</div>

package/src/charts/motion.ts

@@ -1,19 +0,0 @@
-import { cubicInOut } from "svelte/easing";
-
-/** Mirrors `--chart-motion-reveal` in charts.css, for when no element is mounted to read it from. */
-export const REVEAL_MS = 1100;
-
-/** Rescales the axes when the data changes; the first render never animates. */
-export const DOMAIN_MOTION = { type: "tween", duration: 500, easing: cubicInOut } as const;
-
-/** The tooltip sits beside the hovered point at the top of the plot, so it never chases the cursor. */
-export const TOOLTIP_TOP = 8;
-export const TOOLTIP_GAP = 16;
-
-/** A chart duration token in ms, read off a mounted element; both `ms` and `s` parse. */
-export function tokenMs(el: Element, name: string, fallback: number): number {
-  const raw = getComputedStyle(el).getPropertyValue(name).trim();
-  const n = Number.parseFloat(raw);
-  if (Number.isNaN(n)) return fallback;
-  return raw.endsWith("ms") ? n : n * 1000;
-}

package/src/charts/number-chart.css

@@ -1,168 +0,0 @@
-/* Styles for NumberChart. Plain stylesheet (see area-chart.css for why). All
-   selectors are already namespaced under `.hr-number-chart`. */
-
-.hr-number-chart {
-  display: flex;
-  flex-direction: column;
-  gap: 0.375rem;
-  min-width: 0;
-  padding: 1rem 1.25rem;
-  border: 1px solid var(--border, oklch(0.92 0.004 286));
-  border-radius: 0.75rem;
-  background: var(--card, white);
-  box-shadow: var(--chart-card-shadow);
-  transition: border-color var(--chart-motion, 250ms) var(--chart-ease-out, ease);
-}
-.hr-number-chart:hover {
-  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. */
-.hr-number-chart[data-bare] {
-  padding: 1rem;
-  border: 0;
-  border-radius: 0;
-  box-shadow: none;
-}
-.hr-number-chart[data-bare]:hover {
-  border-color: transparent;
-}
-
-.hr-number-label {
-  display: flex;
-  align-items: center;
-  gap: 0.375rem;
-  margin: 0;
-  font-size: 0.75rem;
-  font-weight: 500;
-  line-height: 1.4;
-  color: var(--muted-foreground, oklch(0.5 0.01 286));
-}
-.hr-number-label-text {
-  min-width: 0;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-}
-.hr-number-icon {
-  display: inline-flex;
-  align-items: center;
-  flex: none;
-}
-.hr-number-trailing {
-  margin-left: auto;
-  flex: none;
-  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. */
-.hr-number-row {
-  display: flex;
-  align-items: baseline;
-  justify-content: space-between;
-  gap: 0.5rem;
-}
-
-/* WHY the heading family and not the body one: a figure is structure, not
-   prose, and tabular digits are what makes a column of them scannable. */
-.hr-number-value {
-  font-family: var(--font-heading, inherit);
-  font-weight: 600;
-  font-variant-numeric: tabular-nums;
-  font-feature-settings: "tnum";
-  line-height: 1.15;
-  letter-spacing: -0.015em;
-  color: var(--foreground, oklch(0.2 0.01 286));
-  min-width: 0;
-}
-.hr-number-chart[data-size="md"] .hr-number-value {
-  font-size: 1.25rem;
-}
-/* WHY the lead figure is size and not colour: the accent is spent on actions,
-   active states, marks and links. A number is none of those. */
-.hr-number-chart[data-size="lg"] .hr-number-value {
-  font-size: 1.5rem;
-}
-
-.hr-number-delta {
-  display: inline-flex;
-  align-items: center;
-  gap: 0.125rem;
-  flex: none;
-  font-size: 0.75rem;
-  font-weight: 500;
-  line-height: 1.2;
-  color: var(--muted-foreground, oklch(0.5 0.01 286));
-}
-.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. */
-.hr-number-delta[data-tone="up"] {
-  color: color-mix(
-    in oklab,
-    var(--stat-up, var(--success, oklch(0.6 0.13 163))) 72%,
-    var(--foreground, oklch(0.2 0.01 286))
-  );
-}
-.hr-number-delta[data-tone="down"] {
-  color: color-mix(
-    in oklab,
-    var(--stat-down, var(--destructive, oklch(0.58 0.22 25))) 72%,
-    var(--foreground, oklch(0.2 0.01 286))
-  );
-}
-.hr-number-delta[data-tone="none"] {
-  color: color-mix(in srgb, var(--muted-foreground, oklch(0.5 0.01 286)) 40%, transparent);
-}
-.hr-number-chart .hr-number-arrow {
-  width: 0.875rem;
-  height: 0.875rem;
-  flex: none;
-}
-
-.hr-number-track {
-  height: 0.25rem;
-  border-radius: 999px;
-  overflow: hidden;
-  background: color-mix(in srgb, var(--border, oklch(0.92 0.004 286)) 80%, transparent);
-}
-.hr-number-fill {
-  display: block;
-  height: 100%;
-  border-radius: inherit;
-  transform-origin: left center;
-  animation: hr-number-fill-in var(--chart-motion-slow, 800ms) var(--chart-ease-out, ease) both;
-  transition: width var(--chart-motion, 250ms) var(--chart-ease-out, ease);
-}
-@keyframes hr-number-fill-in {
-  from {
-    transform: scaleX(0);
-  }
-}
-
-.hr-number-caption {
-  margin: 0;
-  font-size: 0.75rem;
-  line-height: 1.4;
-  color: var(--muted-foreground, oklch(0.5 0.01 286));
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-}
-.hr-number-share {
-  font-variant-numeric: tabular-nums;
-  font-weight: 600;
-  color: var(--foreground, oklch(0.2 0.01 286));
-}
-
-@media (prefers-reduced-motion: reduce) {
-  .hr-number-fill {
-    animation: none;
-  }
-}