@heyramzi/ui 6.1.0 → 8.0.0

package/src/charts/bar-chart.svelte

@@ -1,269 +0,0 @@
-<script lang="ts" generics="TData extends Record<string, unknown>">
-	// =========================
-	// IMPORTS
-	// =========================
-	import "./bar-chart.css";
-	import { Axis, Bars, Chart, Highlight, Svg, Tooltip } from "layerchart";
-	import { scaleBand } from "d3-scale";
-	import Figure from "./figure.svelte";
-	import { TOOLTIP_GAP, TOOLTIP_TOP } from "./motion.js";
-
-	// =========================
-	// TYPES
-	// =========================
-	type Series = { key: keyof TData & string; label: string; color: string };
-
-	type Props = {
-		data: TData[];
-		xKey: keyof TData & string;
-		/** The bar's value. Required unless `series` is set. */
-		yKey?: keyof TData & string;
-		/** Stacks these keys into one bar per row; the bar's value is their sum. */
-		series?: Series[];
-		color?: string;
-		/** A fill per bar, for bands whose meaning changes along the axis. */
-		colorOf?: (d: TData) => string;
-		/** Body height in px, or "fill" to grow to the parent's height (parent must
-		 * be a flex column that gives the chart a determinate height). Default 240. */
-		height?: number | "fill";
-		orientation?: "vertical" | "horizontal";
-		/** Left padding for horizontal charts (label space). Default 80. */
-		leftPadding?: number;
-		formatValue?: (v: number) => string;
-		formatX?: (v: unknown) => string;
-		/** Axis tick label. Return "" to skip a tick. Defaults to formatX. */
-		formatTick?: (v: unknown) => string;
-		/** Screen-reader summary; also renders an sr-only data table when set. */
-		label?: string;
-		/** Column header for the x values in the sr-only table. */
-		xLabel?: string;
-		/** Column header for the y values in the sr-only table, and the tooltip's label. */
-		yLabel?: string;
-		/** Show the value/label figure above the chart. */
-		showFigure?: boolean;
-		class?: string;
-	};
-
-	// =========================
-	// PROPS
-	// =========================
-	let {
-		data,
-		xKey,
-		yKey,
-		series,
-		color = "var(--chart-1)",
-		colorOf,
-		height = 240,
-		orientation = "vertical",
-		leftPadding = 80,
-		formatValue = (v) => v.toLocaleString(),
-		formatX = (v) => String(v),
-		formatTick,
-		label,
-		xLabel,
-		yLabel,
-		showFigure = true,
-		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-band 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]);
-	}
-
-	function valueOf(d: TData): number {
-		if (series) return series.reduce((sum, s) => sum + Number(d[s.key] ?? 0), 0);
-		return Number(yKey ? (d[yKey] ?? 0) : 0);
-	}
-
-	/** Where one series' segment starts and ends inside its stacked bar. */
-	function span(d: TData, key: string): [number, number] {
-		let at = 0;
-		for (const s of series ?? []) {
-			const next = at + Number(d[s.key] ?? 0);
-			if (s.key === key) return [at, next];
-			at = next;
-		}
-		return [0, 0];
-	}
-
-	// =========================
-	// DERIVED
-	// =========================
-	const yMax = $derived(Math.max(0, ...data.map(valueOf)));
-	const total = $derived(data.reduce((sum, d) => sum + valueOf(d), 0));
-	const valueLabel = $derived(yLabel ?? String(yKey ?? "value"));
-	const fill = $derived(height === "fill");
-	const horizontal = $derived(orientation === "horizontal");
-	const radius = $derived(horizontal ? "right" : "top");
-	// One Bars layer per fill: a stacked series, a colorOf group, or the single color.
-	const layers = $derived.by(() => {
-		if (series) {
-			return series.map((s) => ({
-				key: s.key,
-				color: s.color,
-				rows: data,
-				at: (d: TData) => span(d, s.key),
-			}));
-		}
-		const groups = new Map<string, TData[]>();
-		for (const d of data) {
-			const c = colorOf?.(d) ?? color;
-			groups.set(c, [...(groups.get(c) ?? []), d]);
-		}
-		return [...groups].map(([c, rows]) => ({ key: c, color: c, rows, at: undefined }));
-	});
-	const activeColor = $derived(active && colorOf ? colorOf(active) : color);
-</script>
-
-<!-- =========================== -->
-<!-- BAR CHART -->
-<!-- =========================== -->
-<div
-	class="hr-bar-chart {className ?? ''}"
-	class:hr-bar-horizontal={horizontal}
-	class:hr-bar-fill={fill}
-	class:hr-bar-has-active={active !== null && !series}
-	role="img"
-	aria-label={label ?? "Bar chart"}
-	onpointerleave={() => (active = null)}
->
-	{#if showFigure}
-		<Figure
-			value={active ? valueOf(active) : total}
-			color="var(--chart-1)"
-			eyebrow={active ? formatX(active[xKey]) : "Total"}
-			format={formatValue}
-			size="md"
-		/>
-	{/if}
-
-	<div class="hr-chart-body" style:height={fill ? null : `${height}px`}>
-		{#if data.length === 0}
-			<div class="empty"><p>No data</p></div>
-		{:else}
-			<Chart
-				{data}
-				x={horizontal ? valueOf : xKey}
-				y={horizontal ? xKey : valueOf}
-				xScale={horizontal ? undefined : scaleBand().padding(0.3)}
-				yScale={horizontal ? scaleBand().padding(0.3) : undefined}
-				xDomain={horizontal ? [0, yMax || 1] : undefined}
-				yDomain={horizontal ? undefined : [0, yMax || 1]}
-				xNice={horizontal}
-				yNice={!horizontal}
-				padding={{ left: horizontal ? leftPadding : 48, bottom: 28, top: 8, right: 12 }}
-				tooltipContext={{ mode: "band" }}
-			>
-				<Svg>
-					{#if horizontal}
-						<Axis placement="left" format={(v) => (formatTick ?? formatX)(v)} />
-						<Axis placement="bottom" format={(v) => formatValue(Number(v))} ticks={4} />
-						<g class="hr-bar-grid">
-							<Axis placement="bottom" grid rule={false} ticks={4} format={() => ""} />
-						</g>
-					{:else}
-						<Axis placement="left" format={(v) => formatValue(Number(v))} ticks={4} />
-						<Axis placement="bottom" format={(v) => (formatTick ?? formatX)(v)} />
-						<g class="hr-bar-grid">
-							<Axis placement="left" grid rule={false} ticks={4} format={() => ""} />
-						</g>
-					{/if}
-					{#each layers as layer (layer.key)}
-						{#if layer.at && horizontal}
-							<Bars x={layer.at} style="fill: {layer.color}" class="hr-bar-bars" />
-						{:else if layer.at}
-							<Bars y={layer.at} style="fill: {layer.color}" class="hr-bar-bars" />
-						{:else}
-							<Bars
-								data={layer.rows}
-								rounded={radius}
-								radius={4}
-								style="fill: {layer.color}"
-								class="hr-bar-bars"
-							/>
-						{/if}
-					{/each}
-					<!-- WHY: the band tooltip layer eats pointer events, so bar :hover never
-				     fires. The active bar is a Highlight copy; motion "none" keeps it from
-				     sliding between bands. -->
-					{#if !series}
-						<Highlight
-							motion="none"
-							bar={{ rounded: radius, radius: 4, fill: activeColor, class: "hr-bar-active" }}
-						/>
-					{/if}
-				</Svg>
-				<Tooltip.Root
-					x={horizontal ? "pointer" : "data"}
-					y={horizontal ? "data" : TOOLTIP_TOP}
-					xOffset={TOOLTIP_GAP}
-				>
-					{#snippet children({ data: d })}
-						<Tooltip.Header value={trackActive(d as TData)} />
-						<Tooltip.List>
-							{#if series}
-								{#each series as s (s.key)}
-									<Tooltip.Item
-										label={s.label}
-										value={formatValue(Number(d[s.key] ?? 0))}
-										color={s.color}
-									/>
-								{/each}
-							{:else}
-								<Tooltip.Item
-									label={valueLabel}
-									value={formatValue(valueOf(d as TData))}
-									color={colorOf ? colorOf(d as TData) : color}
-								/>
-							{/if}
-						</Tooltip.List>
-					{/snippet}
-				</Tooltip.Root>
-			</Chart>
-		{/if}
-	</div>
-
-	{#if label && data.length > 0}
-		<table class="hr-sr-only">
-			<caption>{label}</caption>
-			<thead>
-				<tr>
-					<th scope="col">{xLabel}</th>
-					{#if series}
-						{#each series as s (s.key)}
-							<th scope="col">{s.label}</th>
-						{/each}
-					{:else}
-						<th scope="col">{yLabel}</th>
-					{/if}
-				</tr>
-			</thead>
-			<tbody>
-				{#each data as d, i (i)}
-					<tr>
-						<th scope="row">{formatX(d[xKey])}</th>
-						{#if series}
-							{#each series as s (s.key)}
-								<td>{formatValue(Number(d[s.key] ?? 0))}</td>
-							{/each}
-						{:else}
-							<td>{formatValue(valueOf(d))}</td>
-						{/if}
-					</tr>
-				{/each}
-			</tbody>
-		</table>
-	{/if}
-</div>

package/src/charts/charts.css

@@ -1,201 +0,0 @@
-/* Global theming for layerchart-rendered chrome shared by every chart in this
-   package (tooltip surface, header, rows). Ships with `@heyramzi/ui/charts`, so
-   any consumer that defines the shadcn token set gets a legible tooltip in both
-   themes for free.
-
-   WHY: layerchart's built-in `default` tooltip paints itself with
-   `light-dark(var(--color-surface-100, white), var(--color-surface-300, black))`
-   and a `backdrop-filter` blur. Apps that don't define `--color-surface-*` (and
-   don't set `color-scheme`) fall back to a translucent white card, which is
-   unreadable on a dark page. These rules repaint it with `--popover` /
-   `--border` / `--muted-foreground`, which already flip per theme. The selectors
-   stay unlayered so they beat layerchart's `@layer component` defaults
-   regardless of specificity. */
-
-.lc-tooltip-container[data-variant="default"] {
-  color: var(--popover-foreground, var(--foreground));
-  background-color: var(--popover, #fff);
-  border: 1px solid var(--border, transparent);
-  border-radius: 0.5rem;
-  padding: 0.625rem 0.75rem;
-  min-width: 8.75rem;
-  backdrop-filter: none;
-  box-shadow:
-    0 1px 2px -1px oklch(0 0 0 / 0.2),
-    0 10px 28px -10px oklch(0 0 0 / 0.32);
-  /* WHY: opacity only; the container's transform is inline positioning, so
-	   animating transform here would fight it and make the tooltip jump. */
-  transform-origin: top left;
-  animation: hr-tooltip-in var(--duration-fast, 250ms) var(--ease-smooth-out) both;
-}
-
-/* WHY `scale` and `translate`, not `transform`: the container's inline transform is
-   its position, and the individual properties compose with it instead of fighting. */
-@keyframes hr-tooltip-in {
-  from {
-    opacity: 0;
-    scale: var(--scale-large, 0.96);
-    translate: calc(var(--distance-small, 6px) * -1) 0;
-  }
-}
-
-@media (prefers-reduced-motion: reduce) {
-  .lc-tooltip-container[data-variant="default"] {
-    animation: none;
-  }
-}
-
-/* bklit-ui's panel: a small title with no rule under it, and a dot on every row. */
-.lc-tooltip-header {
-  color: var(--popover-foreground, var(--foreground));
-  font-size: 0.75rem;
-  font-weight: 500;
-  border-bottom: none;
-  margin-bottom: 0.5rem;
-  padding-bottom: 0;
-}
-
-.lc-tooltip-list {
-  gap: 0.375rem 1rem;
-  font-size: 0.8125rem;
-}
-
-.lc-tooltip-item-color {
-  width: 0.625rem;
-  height: 0.625rem;
-}
-
-.lc-tooltip-item-label,
-.lc-tooltip-container .label {
-  color: var(--muted-foreground);
-}
-
-.lc-tooltip-item-value,
-.lc-tooltip-container .value {
-  color: var(--popover-foreground, var(--foreground));
-  font-weight: 500;
-  font-variant-numeric: tabular-nums;
-}
-
-/* Shared chart tokens, held at zero specificity by `:where()`. The reveal pair
-   is the entrance every chart shares; motion.ts mirrors its duration. */
-:where(
-  .hr-area-chart,
-  .hr-bar-chart,
-  .hr-line-chart,
-  .hr-sparkline,
-  .hr-number-chart,
-  .hr-stat-card,
-  .hr-legend,
-  .hr-ts-chart,
-  .hr-donut-chart,
-  .hr-ring,
-  .hr-gauge
-) {
-  --chart-label: var(--muted-foreground, oklch(0.5 0.01 286));
-  --chart-grid: color-mix(in srgb, var(--border, oklch(0.5 0.01 286)) 65%, transparent);
-  --chart-ease-out: cubic-bezier(0.22, 1, 0.36, 1);
-  --chart-motion-fast: 150ms;
-  --chart-motion: 250ms;
-  --chart-motion-slow: 800ms;
-  --chart-motion-reveal: 1100ms;
-  --chart-ease-reveal: cubic-bezier(0.85, 0, 0.15, 1);
-  --chart-stagger: 30ms;
-  --chart-crosshair: color-mix(
-    in srgb,
-    var(--muted-foreground, oklch(0.5 0.01 286)) 60%,
-    transparent
-  );
-  --chart-card-shadow: 0 1px 2px 0 oklch(0 0 0 / 0.04), 0 1px 3px 0 oklch(0 0 0 / 0.06);
-}
-
-/* Shared layerchart chrome: axis labels, grid rules, and hover highlights were
-   duplicated identically across every chart's scoped <style>. Centralize them
-   here, scoped to the chart roots, so the look is defined once. `:where()` keeps
-   specificity at 0 so a component can still override locally if it must. */
-:where(
-    .hr-area-chart,
-    .hr-bar-chart,
-    .hr-line-chart,
-    .hr-scatter-chart,
-    .hr-live-line-chart,
-    .hr-sparkline,
-    .hr-stat-card,
-    .hr-donut-chart
-  )
-  .lc-axis-tick-label {
-  fill: var(--chart-label);
-  font-size: 11px;
-}
-:where(
-    .hr-area-chart,
-    .hr-bar-chart,
-    .hr-line-chart,
-    .hr-scatter-chart,
-    .hr-live-line-chart,
-    .hr-sparkline,
-    .hr-stat-card,
-    .hr-donut-chart
-  )
-  .lc-axis-tick {
-  stroke: transparent;
-}
-:where(
-    .hr-area-chart,
-    .hr-bar-chart,
-    .hr-line-chart,
-    .hr-scatter-chart,
-    .hr-live-line-chart,
-    .hr-sparkline,
-    .hr-stat-card,
-    .hr-donut-chart
-  )
-  :is(.lc-grid-x-rule, .lc-grid-y-rule) {
-  stroke: var(--chart-grid);
-  stroke-dasharray: 4 4;
-}
-:where(
-    .hr-area-chart,
-    .hr-bar-chart,
-    .hr-line-chart,
-    .hr-scatter-chart,
-    .hr-live-line-chart,
-    .hr-sparkline,
-    .hr-stat-card,
-    .hr-donut-chart
-  )
-  .lc-highlight-point {
-  stroke: var(--background, white);
-  stroke-width: 2;
-}
-:where(
-    .hr-area-chart,
-    .hr-bar-chart,
-    .hr-line-chart,
-    .hr-scatter-chart,
-    .hr-live-line-chart,
-    .hr-sparkline,
-    .hr-stat-card,
-    .hr-donut-chart
-  )
-  .lc-highlight-line {
-  stroke: var(--chart-grid);
-  stroke-width: 1;
-  stroke-dasharray: none;
-}
-/* bklit-ui's hover: the series drops to 0.3 and hover-focus.svelte redraws the
-   stretch around the point at full strength. */
-.hr-hover-dim {
-  transition: opacity 400ms ease-in-out;
-}
-.hr-hover-dim.hr-hover-dimmed {
-  opacity: 0.3;
-}
-@media (prefers-reduced-motion: reduce) {
-  .hr-hover-dim {
-    transition: none;
-  }
-}
-.hr-crosshair-stop {
-  stop-color: var(--chart-crosshair);
-}

package/src/charts/crosshair.svelte

@@ -1,35 +0,0 @@
-<script lang="ts">
-	// =========================
-	// IMPORTS
-	// =========================
-	import { getChartContext } from "layerchart";
-
-	// =========================
-	// TYPES
-	// =========================
-	type Props = {
-		/** Gradient id. Paint the highlight line with `stroke: url(#id)`. */
-		id: string;
-	};
-
-	// =========================
-	// PROPS
-	// =========================
-	let { id }: Props = $props();
-
-	const ctx = getChartContext();
-</script>
-
-<!-- =========================== -->
-<!-- CROSSHAIR -->
-<!-- =========================== -->
-<!-- WHY userSpaceOnUse: a vertical line has a zero-width bounding box, so an
-     objectBoundingBox gradient on it paints nothing. -->
-<defs>
-	<linearGradient {id} gradientUnits="userSpaceOnUse" x1="0" y1="0" x2="0" y2={ctx.height}>
-		<stop offset="0" class="hr-crosshair-stop" stop-opacity="0" />
-		<stop offset="0.12" class="hr-crosshair-stop" />
-		<stop offset="0.88" class="hr-crosshair-stop" />
-		<stop offset="1" class="hr-crosshair-stop" stop-opacity="0" />
-	</linearGradient>
-</defs>

package/src/charts/donut-chart.css

@@ -1,56 +0,0 @@
-/* Styles for DonutChart. Plain stylesheet (see area-chart.css for why).
-   Selectors are namespaced under `.hr-donut-chart`. */
-
-.hr-donut-chart {
-  width: 100%;
-  display: flex;
-  justify-content: center;
-}
-
-.hr-donut-chart .empty {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  width: 100%;
-  border: 1px dashed var(--chart-grid, oklch(0.5 0.01 286 / 0.2));
-  border-radius: 0.5rem;
-}
-.hr-donut-chart .empty p {
-  font-size: 0.8125rem;
-  color: var(--chart-label, oklch(0.5 0.01 286));
-  margin: 0;
-}
-
-/* The slice slides out a little slower than it slides back: a close is always the quicker. */
-.hr-donut-chart .hr-donut-arc {
-  cursor: pointer;
-  transition:
-    opacity var(--chart-motion-fast, 150ms) ease,
-    translate var(--duration-quick, 150ms) var(--ease-smooth-out, ease-out);
-}
-.hr-donut-chart .hr-donut-arc[data-hovered] {
-  transition:
-    opacity var(--chart-motion-fast, 150ms) ease,
-    translate var(--duration-fast, 250ms) var(--ease-smooth-out);
-}
-
-.hr-donut-chart .hr-donut-center-value {
-  fill: var(--foreground, oklch(0.18 0.02 240));
-  font-size: 16px;
-  font-weight: 600;
-  font-feature-settings: "tnum";
-  transition: opacity 180ms ease;
-}
-
-.hr-donut-chart .hr-donut-center-label {
-  fill: var(--chart-label, oklch(0.5 0.01 286));
-  font-size: 11px;
-  transition: opacity 180ms ease;
-}
-
-@media (prefers-reduced-motion: reduce) {
-  .hr-donut-chart .hr-donut-arc,
-  .hr-donut-chart .hr-donut-arc[data-hovered] {
-    transition: opacity 120ms ease;
-  }
-}