@heyramzi/ui 6.1.0 → 7.0.0

package/src/charts/ring-chart.svelte

@@ -1,158 +0,0 @@
-<script lang="ts">
-	// =========================
-	// IMPORTS
-	// =========================
-	import "./ring-chart.css";
-	import { cn } from "@heyramzi/utils";
-	import AnimatedValue from "./animated-value.svelte";
-
-	// =========================
-	// TYPES
-	// =========================
-	type RingData = {
-		label: string;
-		value: number;
-		/** Denominator for the progress arc. */
-		maxValue: number;
-		/** CSS color or var. Falls back to --chart-1..5. */
-		color?: string;
-	};
-
-	type Props = {
-		data: RingData[];
-		/** Fixed square size in px. Omit to fill the parent (responsive). */
-		size?: number;
-		/** Ring thickness in viewBox units. */
-		strokeWidth?: number;
-		/** Gap between concentric rings in viewBox units. */
-		ringGap?: number;
-		/** Inner radius of the innermost ring in viewBox units. */
-		baseInnerRadius?: number;
-		lineCap?: "round" | "butt";
-		/** Center label when nothing is hovered. */
-		defaultLabel?: string;
-		formatValue?: (v: number) => string;
-		/** Animate arcs on mount. */
-		animate?: boolean;
-		/** Glow the hovered ring. */
-		showGlow?: boolean;
-		/** Hovered ring index, bindable for legend hover-sync. */
-		hoveredIndex?: number | null;
-		onHoverChange?: (index: number | null) => void;
-		minWidth?: number;
-		ariaLabel?: string;
-		class?: string;
-	};
-
-	// =========================
-	// PROPS
-	// =========================
-	let {
-		data,
-		size,
-		strokeWidth = 11,
-		ringGap = 6,
-		baseInnerRadius = 48,
-		lineCap = "round",
-		defaultLabel = "Total",
-		formatValue = (v) => v.toLocaleString(),
-		animate = true,
-		showGlow = true,
-		hoveredIndex = $bindable(null),
-		onHoverChange,
-		minWidth = 170,
-		ariaLabel,
-		class: className,
-	}: Props = $props();
-
-	// =========================
-	// DERIVED
-	// =========================
-	const rings = $derived.by(() =>
-		data.map((d, i) => {
-			const radius = baseInnerRadius + i * (strokeWidth + ringGap) + strokeWidth / 2;
-			const progress = d.maxValue > 0 ? Math.max(0, Math.min(1, d.value / d.maxValue)) : 0;
-			return {
-				...d,
-				index: i,
-				radius,
-				progress,
-				color: d.color ?? `var(--chart-${(i % 5) + 1})`,
-			};
-		}),
-	);
-	const maxRadius = $derived(
-		rings.length ? rings[rings.length - 1].radius + strokeWidth / 2 : baseInnerRadius,
-	);
-	const vb = $derived(maxRadius * 2 + 4);
-	const center = $derived(vb / 2);
-	const total = $derived(data.reduce((sum, d) => sum + d.value, 0));
-	const hoveredRing = $derived(hoveredIndex != null ? (rings[hoveredIndex] ?? null) : null);
-
-	// =========================
-	// FUNCTIONS
-	// =========================
-	function setHover(index: number | null) {
-		hoveredIndex = index;
-		onHoverChange?.(index);
-	}
-</script>
-
-<!-- =========================== -->
-<!-- MARKUP -->
-<!-- =========================== -->
-<div
-	class={cn("hr-ring", className)}
-	class:glow={showGlow}
-	style:width={size ? `${size}px` : "100%"}
-	style:min-width="{minWidth}px"
-	role="img"
-	aria-label={ariaLabel ?? `${defaultLabel}: ${formatValue(total)}`}
->
-	<!-- no-inline-svg-ignore -->
-	<svg viewBox="0 0 {vb} {vb}" aria-hidden="true">
-		<g transform="rotate(-90 {center} {center})">
-			{#each rings as ring (ring.index)}
-				<circle
-					class="track"
-					cx={center}
-					cy={center}
-					r={ring.radius}
-					fill="none"
-					stroke={ring.color}
-					stroke-width={strokeWidth}
-				/>
-			{/each}
-			{#each rings as ring (ring.index)}
-				{@const dimmed = hoveredIndex !== null && hoveredIndex !== ring.index}
-				<circle
-					class="fill"
-					class:animate
-					cx={center}
-					cy={center}
-					r={ring.radius}
-					pathLength="100"
-					fill="none"
-					stroke={ring.color}
-					stroke-width={strokeWidth}
-					stroke-linecap={lineCap}
-					style:stroke-dashoffset={100 - ring.progress * 100}
-					style:opacity={dimmed ? 0.25 : 1}
-					style:animation-delay="{160 + ring.index * 120}ms"
-					style:--ring-color={ring.color}
-					onmouseenter={() => setHover(ring.index)}
-					onmouseleave={() => setHover(null)}
-				></circle>
-			{/each}
-		</g>
-	</svg>
-
-	<div class="center">
-		<span class="value">
-			<AnimatedValue value={hoveredRing ? hoveredRing.value : total} format={formatValue} />
-		</span>
-		{#key hoveredRing?.label ?? defaultLabel}
-			<span class="label">{hoveredRing ? hoveredRing.label : defaultLabel}</span>
-		{/key}
-	</div>
-</div>

package/src/charts/sparkline.css

@@ -1,45 +0,0 @@
-/* Styles for Sparkline. Plain stylesheet (see area-chart.css for why).
-   Selectors are namespaced under `.hr-sparkline`. */
-
-.hr-sparkline {
-  display: flex;
-  align-items: center;
-  gap: 0.625rem;
-  width: 100%;
-}
-.hr-sparkline-chart {
-  flex: 1 1 auto;
-  min-width: 0;
-}
-/* Bare is an ornament inside another control: no inline value, so no gap. */
-.hr-sparkline[data-bare] {
-  gap: 0;
-}
-.hr-sparkline-value {
-  flex-shrink: 0;
-  font-size: 0.8125rem;
-  font-weight: 600;
-  font-feature-settings: "tnum";
-  font-family: ui-monospace, SFMono-Regular, monospace;
-}
-
-.hr-sparkline .hr-sparkline-end {
-  filter: drop-shadow(0 0 3px currentColor);
-  opacity: 0.9;
-  transform-box: fill-box;
-  transform-origin: center;
-  /* WHY: the dot lands as the reveal reaches the end of the line. */
-  animation: hr-sparkline-pop var(--duration-fast, 250ms) var(--ease-smooth-out)
-    calc(var(--chart-motion-reveal, 1100ms) * 0.85) both;
-}
-@keyframes hr-sparkline-pop {
-  from {
-    opacity: 0;
-    transform: scale(0);
-  }
-}
-@media (prefers-reduced-motion: reduce) {
-  .hr-sparkline .hr-sparkline-end {
-    animation: none;
-  }
-}

package/src/charts/sparkline.svelte

@@ -1,140 +0,0 @@
-<script lang="ts" generics="TData extends Record<string, unknown>">
-	// =========================
-	// IMPORTS
-	// =========================
-	import "./sparkline.css";
-	import { Area, Chart, Highlight, LinearGradient, Points, Spline, Svg, Tooltip } from "layerchart";
-	import { curveMonotoneX } from "d3-shape";
-	import Reveal from "./reveal.svelte";
-
-	// =========================
-	// TYPES
-	// =========================
-	type Props = {
-		data: TData[];
-		xKey: keyof TData & string;
-		yKey: keyof TData & string;
-		color?: string;
-		height?: number;
-		smooth?: boolean;
-		/** Show a dot at the latest point */
-		endCap?: boolean;
-		/** Show the latest value as inline text */
-		showLast?: boolean;
-		/**
-		 * Ornament mode: no tooltip, no highlight, no end cap, and the plot runs to the edges of its box.
-		 */
-
-		/*
-		 * For a line inside a control that already states the number and owns the pointer, such as a stat card that links.
-		 */
-		bare?: boolean;
-		formatValue?: (v: number) => string;
-		class?: string;
-	};
-
-	// =========================
-	// PROPS
-	// =========================
-	let {
-		data,
-		xKey,
-		yKey,
-		color = "var(--chart-1)",
-		height = 44,
-		smooth = true,
-		endCap = true,
-		showLast = false,
-		bare = false,
-		formatValue = (v) => v.toLocaleString(),
-		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 String(d[xKey]);
-	}
-
-	// =========================
-	// DERIVED
-	// =========================
-	const uid = `hr-spark-${Math.random().toString(36).slice(2, 8)}`;
-	const curve = $derived(smooth ? curveMonotoneX : undefined);
-	const last = $derived(data.length > 0 ? data[data.length - 1] : null);
-	const display = $derived(active ?? last);
-	const dot = $derived(endCap && !bare);
-	// Bare runs to the edges: the fill reaches the bottom of the box and the line keeps three pixels of head so its stroke is not cut at the series
-
-	// maximum.
-	const padding = $derived(
-		bare
-			? { top: 3, bottom: 0, left: 0, right: 0 }
-			: { top: 4, bottom: 4, left: 0, right: dot ? 6 : 0 },
-	);
-</script>
-
-<!-- =========================== -->
-<!-- SPARKLINE -->
-<!-- =========================== -->
-<div
-	class="hr-sparkline {className ?? ''}"
-	role={bare ? undefined : "img"}
-	aria-label={bare ? undefined : "Sparkline"}
-	aria-hidden={bare ? "true" : undefined}
-	data-bare={bare ? "" : undefined}
-	onpointerleave={() => (active = null)}
->
-	{#if data.length > 0}
-		<div class="hr-sparkline-chart" style:height="{height}px">
-			<Chart {data} x={xKey} y={yKey} {padding} tooltipContext={{ mode: "bisect-x" }}>
-				<Svg>
-					<LinearGradient id={uid} vertical>
-						{#snippet stopsContent()}
-							<stop offset="0%" stop-color={color} stop-opacity="0.38" />
-							<stop offset="100%" stop-color={color} stop-opacity="0" />
-						{/snippet}
-					</LinearGradient>
-					<Reveal bleed={3}>
-						<!-- WHY no `y0`: it defaults to the bottom of the plot, which is what
-						     a fill under a sparkline wants whatever its domain is. -->
-						<Area y1={yKey} {curve} fill="url(#{uid})" />
-						<Spline {curve} style="stroke: {color}; fill: none" stroke-width="1.5" />
-					</Reveal>
-					{#if dot && last}
-						<!-- WHY: Points resolves its own data and hands the inner circle pixel coords; Circle's data mode clobbers the sibling Spline's data in -->
-						<!-- this layerchart prerelease (and a bare object left the dot at the chart origin). -->
-						<Points data={[last]} r={3} fill={color} class="hr-sparkline-end" />
-					{/if}
-					{#if !bare}
-						<Highlight points lines={false} />
-					{/if}
-				</Svg>
-				{#if !bare}
-					<Tooltip.Root>
-						{#snippet children({ data: d })}
-							<Tooltip.Header value={trackActive(d as TData)} />
-							<Tooltip.List>
-								<Tooltip.Item label={String(yKey)} value={formatValue(Number(d[yKey]))} />
-							</Tooltip.List>
-						{/snippet}
-					</Tooltip.Root>
-				{/if}
-			</Chart>
-		</div>
-		{#if showLast && display}
-			<span class="hr-sparkline-value" style:color>
-				{formatValue(Number(display[yKey]))}
-			</span>
-		{/if}
-	{/if}
-</div>

package/src/charts/stat-card.css

@@ -1,103 +0,0 @@
-/* Styles for StatCard. Plain stylesheet (see area-chart.css for why). All
-   selectors are already namespaced under `.hr-stat-card`. */
-
-.hr-stat-card {
-  display: flex;
-  flex-direction: column;
-  gap: 0.375rem;
-  padding: 1.25rem 1.5rem;
-  border: 1px solid var(--border, oklch(0.92 0.004 286));
-  border-radius: 1rem;
-  background: var(--card, white);
-  box-shadow: var(--chart-card-shadow);
-  min-width: 0;
-  /* WHY: clips the edge-to-edge chart to the card's rounded corners. */
-  overflow: hidden;
-  transition: border-color var(--chart-motion, 250ms) var(--chart-ease-out, ease);
-}
-.hr-stat-card:hover {
-  border-color: color-mix(in srgb, var(--ring, var(--chart-1)) 28%, var(--border, transparent));
-}
-/* WHY: a bare figure, not a card. Dropping the chrome avoids a card-in-card
-   when the figure is placed inside another surface, and lets the chart be the
-   whole element. */
-.hr-stat-figure-only {
-  padding: 0;
-  gap: 0;
-  border: 0;
-  border-radius: 0;
-  background: none;
-  box-shadow: none;
-}
-
-/* WHY: the gauge variant sits the figure and a radial gauge side by side
-   instead of bleeding a chart to the bottom edge; no negative margins here. */
-.hr-stat-gauge-row {
-  display: flex;
-  flex-wrap: wrap;
-  align-items: center;
-  gap: 1rem;
-}
-/* WHY the floor: below the width a gauge and a figure share, the row wraps the
-   gauge to its own line rather than squeezing the figure to nothing. */
-.hr-stat-gauge-row .hr-stat-gauge-figure {
-  flex: 1 1 auto;
-  min-width: 6rem;
-}
-.hr-stat-gauge-row .hr-gauge {
-  flex: 0 0 auto;
-}
-
-/* WHY: the chart bleeds past the card padding to the left/right/bottom edges,
-   matching bklit's edge-to-edge stat-card chart; overflow:hidden on the card
-   clips the corners to the radius. */
-.hr-stat-chart {
-  margin: 0.5rem -1.5rem -1.25rem;
-  width: auto;
-}
-.hr-stat-figure-only .hr-stat-chart {
-  margin: 0;
-}
-
-.hr-stat-card .hr-stat-spline {
-  transition: opacity var(--chart-motion-fast, 150ms) ease;
-}
-.hr-stat-card .hr-stat-bars {
-  transform-box: fill-box;
-  transform-origin: bottom;
-  animation: hr-stat-grow var(--chart-motion-reveal, 1100ms)
-    var(--chart-ease-reveal, cubic-bezier(0.85, 0, 0.15, 1)) both;
-}
-.hr-stat-card .hr-stat-bars:nth-of-type(2) {
-  animation-delay: var(--chart-stagger, 30ms);
-}
-.hr-stat-card .hr-stat-bars:nth-of-type(3) {
-  animation-delay: calc(var(--chart-stagger, 30ms) * 2);
-}
-.hr-stat-card .hr-stat-bars:nth-of-type(4) {
-  animation-delay: calc(var(--chart-stagger, 30ms) * 3);
-}
-.hr-stat-card .hr-stat-bars:nth-of-type(5) {
-  animation-delay: calc(var(--chart-stagger, 30ms) * 4);
-}
-.hr-stat-card .hr-stat-bars:nth-of-type(6) {
-  animation-delay: calc(var(--chart-stagger, 30ms) * 5);
-}
-.hr-stat-card .hr-stat-bars:nth-of-type(n + 7) {
-  animation-delay: calc(var(--chart-stagger, 30ms) * 6);
-}
-@keyframes hr-stat-grow {
-  from {
-    transform: scaleY(0);
-  }
-}
-.hr-stat-card .hr-stat-bar-active {
-  filter: brightness(1.08);
-  pointer-events: none;
-}
-
-@media (prefers-reduced-motion: reduce) {
-  .hr-stat-card .hr-stat-bars {
-    animation: none;
-  }
-}