@heyramzi/ui 2.24.0 → 3.0.0

package/src/charts/gauge-chart.svelte.d.ts

@@ -0,0 +1,58 @@
+import "./chart-tokens.css";
+import "./gauge-chart.css";
+interface Props {
+    /** Arc fill, 0-100 (how many notches light up). */
+    value: number;
+    /** "gauge" = notched arc, "ring" = continuous swept arc. */
+    variant?: "gauge" | "ring";
+    /** Show the center value/label. Off when the number sits beside the gauge. */
+    showValue?: boolean;
+    /** Active arc color (CSS color or var). Alias for `activeFill`. */
+    color?: string;
+    /** Single-hue gradient along the active arc. Alias for `useGradient`. */
+    gradient?: boolean;
+    /** Center label under the value. Alias for `defaultLabel`. */
+    label?: string;
+    /** Center statistic. Defaults to `value`. Formatted via `formatOptions`. */
+    centerValue?: number;
+    /** Notch count around the arc. */
+    totalNotches?: number;
+    /** Gap between notches as a percentage of the arc. */
+    spacing?: number;
+    /** Radial depth of the notch band as a percentage of the default. */
+    notchLengthPercent?: number;
+    /** Corner fillet in viewBox units (0 = sharp). Defaults to a soft pill. */
+    notchCornerRadius?: number;
+    /** Rectangular notches instead of angular/tapered. */
+    uniformWidth?: boolean;
+    /** Arc start in degrees (default 135, sweeping to 405 = 270deg with a bottom gap). */
+    startAngle?: number;
+    endAngle?: number;
+    /** Single-hue gradient along the active arc instead of a flat fill. */
+    useGradient?: boolean;
+    /** Hex stops for the active gradient. Defaults to a tonal ramp of `activeFill`. */
+    activeGradient?: [string, string];
+    /** Active notch color (CSS color or var). */
+    activeFill?: string;
+    /** Track notch color. Defaults to `activeFill`. */
+    inactiveFill?: string;
+    activeFillOpacity?: number;
+    inactiveFillOpacity?: number;
+    /** Center label under the value. */
+    defaultLabel?: string;
+    /** Intl formatting for the center value. */
+    formatOptions?: Intl.NumberFormatOptions;
+    locale?: string;
+    prefix?: string;
+    suffix?: string;
+    /** Fixed square size in px. Omit to fill the parent (responsive). */
+    size?: number;
+    /** Minimum width when responsive. */
+    minWidth?: number;
+    /** Accessible description, e.g. "ARR run rate". */
+    ariaLabel?: string;
+    class?: string;
+}
+declare const $$Component: import("svelte").Component<Props, {}, "">;
+type $$Component = ReturnType<typeof $$Component>;
+export default $$Component;

package/src/charts/hover-focus.svelte.d.ts

@@ -0,0 +1,14 @@
+import type { Snippet } from "svelte";
+interface Props {
+    /** The series: dims while a point is hovered. */
+    children: Snippet;
+    /** The strokes alone, redrawn at full strength around the hovered point. */
+    segment: Snippet;
+    /** Headroom above and below the plot so a thick stroke is not cut. */
+    bleed?: number;
+    /** How far the band reaches each side of the point, as a share of the gap to its neighbour. */
+    reach?: number;
+}
+declare const $$Component: import("svelte").Component<Props, {}, "">;
+type $$Component = ReturnType<typeof $$Component>;
+export default $$Component;

package/src/charts/legend.css

@@ -1,123 +1,134 @@
+@layer theme, base, components, utilities;
+
 /* Styles for Legend. Plain stylesheet (see area-chart.css for why). Selectors
    are namespaced under `.hr-legend`; the `.horizontal` layout modifier sits on
    the same root element. */
 
-.hr-legend {
-  width: 100%;
-  font-size: 0.8125rem;
-}
-
-.hr-legend-title {
-  margin: 0 0 0.625rem;
-  font-size: 0.8125rem;
-  font-weight: 600;
-  color: var(--foreground);
-}
+@layer components {
+  .hr-legend {
+    width: 100%;
+    font-size: 0.8125rem;
+  }
 
-.hr-legend-items {
-  list-style: none;
-  margin: 0;
-  padding: 0;
-  display: flex;
-  flex-direction: column;
-  gap: 0.125rem;
-}
+  .hr-legend-title {
+    margin: 0 0 0.625rem;
+    font-size: 0.8125rem;
+    font-weight: 600;
+    color: var(--foreground);
+  }
 
-.hr-legend.horizontal .hr-legend-items {
-  flex-direction: row;
-  flex-wrap: wrap;
-  gap: 0.5rem 1rem;
-}
+  .hr-legend-items {
+    list-style: none;
+    margin: 0;
+    padding: 0;
+    display: flex;
+    flex-direction: column;
+    gap: 0.125rem;
+  }
 
-.hr-legend-item {
-  width: 100%;
-  display: grid;
-  grid-template-columns: auto 1fr auto;
-  align-items: center;
-  gap: 0.5rem 0.625rem;
-  padding: 0.375rem 0.5rem;
-  border: 0;
-  border-radius: 0.5rem;
-  background: transparent;
-  font: inherit;
-  color: var(--foreground);
-  text-align: left;
-  cursor: pointer;
-  transition:
-    background 160ms ease,
-    opacity 160ms ease;
-}
+  .hr-legend.horizontal .hr-legend-items {
+    flex-direction: row;
+    flex-wrap: wrap;
+    gap: 0.5rem 1rem;
+  }
 
-.hr-legend.horizontal .hr-legend-item {
-  width: auto;
-  grid-template-columns: auto auto;
-  padding: 0.25rem 0.375rem;
-}
+  .hr-legend-item {
+    width: 100%;
+    display: grid;
+    grid-template-columns: auto 1fr auto;
+    align-items: center;
+    gap: 0.5rem 0.625rem;
+    padding: 0.375rem 0.5rem;
+    border: 0;
+    border-radius: 0.5rem;
+    background: transparent;
+    font: inherit;
+    color: var(--foreground);
+    text-align: left;
+    cursor: pointer;
+    transition:
+      background 160ms ease,
+      opacity 160ms ease;
+  }
 
-.hr-legend-item:focus-visible {
-  background: var(--muted);
-  outline: none;
-}
+  .hr-legend.horizontal .hr-legend-item {
+    width: auto;
+    grid-template-columns: auto auto;
+    padding: 0.25rem 0.375rem;
+  }
 
-@media (hover: hover) and (pointer: fine) {
-  .hr-legend-item:hover {
+  .hr-legend-item:focus-visible {
     background: var(--muted);
+    outline: none;
   }
-}
 
-.hr-legend-item.dimmed {
-  opacity: 0.4;
-}
+  @media (hover: hover) and (pointer: fine) {
+    .hr-legend-item:hover {
+      background: var(--muted);
+    }
+  }
 
-.hr-legend-marker {
-  width: 0.625rem;
-  height: 0.625rem;
-  border-radius: 3px;
-  flex-shrink: 0;
-}
+  .hr-legend-item.dimmed {
+    opacity: 0.4;
+  }
 
-.hr-legend-label {
-  font-weight: 500;
-  white-space: nowrap;
-  overflow: hidden;
-  text-overflow: ellipsis;
-}
+  .hr-legend-marker {
+    width: 0.625rem;
+    height: 0.625rem;
+    border-radius: 3px;
+    flex-shrink: 0;
+  }
 
-.hr-legend-value {
-  display: inline-flex;
-  align-items: baseline;
-  gap: 0.3125rem;
-  font-variant-numeric: tabular-nums;
-  color: var(--foreground);
-  white-space: nowrap;
-}
+  .hr-legend-label {
+    font-weight: 500;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+  }
 
-.hr-legend-pct {
-  font-size: 0.6875rem;
-  color: var(--muted-foreground);
-}
+  .hr-legend-value {
+    display: inline-flex;
+    align-items: baseline;
+    gap: 0.3125rem;
+    font-variant-numeric: tabular-nums;
+    color: var(--foreground);
+    white-space: nowrap;
+  }
 
-.hr-legend-track {
-  grid-column: 1 / -1;
-  height: 0.375rem;
-  border-radius: 999px;
-  background: var(--muted);
-  overflow: hidden;
-}
+  .hr-legend-pct {
+    font-size: 0.6875rem;
+    color: var(--muted-foreground);
+  }
 
-.hr-legend-bar {
-  display: block;
-  width: 100%;
-  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. */
-  transform-origin: left center;
-  transform: scaleX(var(--hr-bar-scale, 0));
-  animation: hr-legend-fill var(--chart-motion-reveal, 1100ms)
-    var(--chart-ease-reveal, cubic-bezier(0.85, 0, 0.15, 1)) both;
-  transition: transform var(--chart-motion-slow, 1.1s)
-    var(--chart-ease-out, cubic-bezier(0.22, 1, 0.36, 1));
+  .hr-legend-track {
+    grid-column: 1 / -1;
+    height: 0.375rem;
+    border-radius: 999px;
+    background: var(--muted);
+    overflow: hidden;
+  }
+
+  .hr-legend-bar {
+    display: block;
+    width: 100%;
+    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. */
+    transform-origin: left center;
+    transform: scaleX(var(--hr-bar-scale, 0));
+    animation: hr-legend-fill var(--chart-motion-reveal, 1100ms)
+      var(--chart-ease-reveal, cubic-bezier(0.85, 0, 0.15, 1)) both;
+    transition: transform var(--chart-motion-slow, 1.1s)
+      var(--chart-ease-out, cubic-bezier(0.22, 1, 0.36, 1));
+  }
+
+  @media (prefers-reduced-motion: reduce) {
+    .hr-legend-bar {
+      animation: none;
+      transition: none;
+    }
+  }
 }
 
 @keyframes hr-legend-fill {
@@ -125,10 +136,3 @@
     transform: scaleX(0);
   }
 }
-
-@media (prefers-reduced-motion: reduce) {
-  .hr-legend-bar {
-    animation: none;
-    transition: none;
-  }
-}

package/src/charts/legend.svelte

@@ -32,7 +32,7 @@
 		formatPercentage?: (p: number) => string;
 		/** Hovered index, bindable for chart hover-sync. */
 		hoveredIndex?: number | null;
-		onHoverChange?: (index: number | null) => void;
+		onHoveredIndexChange?: (index: number | null) => void;
 		class?: string;
 	}
 
@@ -49,7 +49,7 @@
 		formatValue = (v) => v.toLocaleString(),
 		formatPercentage = (p) => `${p.toFixed(0)}%`,
 		hoveredIndex = $bindable(null),
-		onHoverChange,
+		onHoveredIndexChange,
 		class: className,
 	}: Props = $props();
 
@@ -63,7 +63,7 @@
 
 	function setHover(index: number | null) {
 		hoveredIndex = index;
-		onHoverChange?.(index);
+		onHoveredIndexChange?.(index);
 	}
 </script>
 

package/src/charts/legend.svelte.d.ts

@@ -0,0 +1,30 @@
+import "./chart-tokens.css";
+import "./legend.css";
+type LegendItem = {
+    label: string;
+    value: number;
+    /** Required when `showProgress` or `showPercentage` is set. */
+    maxValue?: number;
+    color: string;
+};
+interface 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;
+    onHoveredIndexChange?: (index: number | null) => void;
+    class?: string;
+}
+declare const $$Component: import("svelte").Component<Props, {}, "hoveredIndex">;
+type $$Component = ReturnType<typeof $$Component>;
+export default $$Component;

package/src/charts/line-chart.css

@@ -1,26 +1,32 @@
+@layer theme, base, components, utilities;
+
 /* 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%;
-}
+@layer components {
+  .hr-line-chart {
+    width: 100%;
+    display: flex;
+    flex-direction: column;
+    gap: 0.5rem;
+  }
 
-.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;
+  .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

@@ -14,7 +14,10 @@
 		Spline,
 		Svg,
 		Tooltip,
+		type ChartState,
 	} from "layerchart";
+	import { chartTable } from "./chart-a11y.js";
+	import ChartPlot from "./chart-plot.svelte";
 	import { curveMonotoneX } from "d3-shape";
 	import Crosshair from "./crosshair.svelte";
 	import EdgeFade from "./edge-fade.svelte";
@@ -58,6 +61,8 @@
 		dashArray?: string;
 		formatValue?: (v: number) => string;
 		formatX?: (v: unknown) => string;
+		/** The chart's accessible name. Its data range and values are read after it. */
+		label?: string;
 		class?: string;
 	}
 
@@ -78,6 +83,7 @@
 		dashArray = "5 4",
 		formatValue = (v) => v.toLocaleString(),
 		formatX = (v) => String(v),
+		label = "Line chart",
 		class: className,
 	}: Props = $props();
 
@@ -85,6 +91,7 @@
 	// STATE
 	// =========================
 	let active = $state<TData | null>(null);
+	let context = $state<ChartState<TData>>();
 
 	// ========================= 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.
 
@@ -96,6 +103,15 @@
 		return formatX(d[xKey]);
 	}
 
+	function step(i: number | null) {
+		if (i === null) {
+			context?.tooltip.hide();
+			active = null;
+			return;
+		}
+		context?.tooltip.show({ data: data[i] });
+	}
+
 	// =========================
 	// DERIVED
 	// =========================
@@ -133,52 +149,59 @@
 			? series.map((s) => ({ value: Number(display[s.key]), label: s.label, color: s.color }))
 			: null,
 	);
+	const table = $derived(
+		chartTable(
+			data,
+			(d) => formatX(d[xKey]),
+			series.map((s) => ({ label: s.label, value: (d: TData) => d[s.key] })),
+			formatValue,
+			{ xLabel: xKey },
+		),
+	);
 </script>
 
 <!-- =========================== -->
 <!-- LINE CHART -->
 <!-- =========================== -->
-<div
-	class="hr-line-chart {className ?? ''}"
-	role="img"
-	aria-label="Line chart"
-	onpointerleave={() => (active = null)}
->
+<!-- WHY: leaving only resets the hover readout; the keyboard path is ChartPlot's. -->
+<!-- svelte-ignore a11y_no_static_element_interactions -->
+<div class="hr-line-chart {className ?? ''}" 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}
+	{#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}
+
+	<ChartPlot class="hr-chart-body" height="{height}px" {label} {table} onStep={step}>
 		{#if data.length === 0}
 			<div class="empty"><p>No data</p></div>
 		{:else}
@@ -191,8 +214,9 @@
 				padding={{ left: 48, bottom: 28, top: 8, right: 12 }}
 				tooltipContext={{ mode: "bisect-x" }}
 				motion={DOMAIN_MOTION}
+				bind:context
 			>
-				<Svg>
+				<Svg aria-hidden="true">
 					<Axis placement="left" format={(v) => tick(Number(v))} ticks={4} />
 					<Axis placement="bottom" format={(v) => formatX(v)} />
 					<g class="hr-line-grid">
@@ -256,5 +280,5 @@
 				</Tooltip.Root>
 			</Chart>
 		{/if}
-	</div>
+	</ChartPlot>
 </div>

package/src/charts/line-chart.svelte.d.ts

@@ -0,0 +1,53 @@
+import "./chart-tokens.css";
+import "./line-chart.css";
+declare function $$render<TData extends Record<string, unknown>>(): {
+    props: {
+        data: TData[];
+        xKey: keyof TData & string;
+        yKey?: keyof TData & string;
+        series?: {
+            key: keyof TData & string;
+            label?: string;
+            color?: string;
+        }[];
+        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.
+         */
+        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;
+        /** The chart's accessible name. Its data range and values are read after it. */
+        label?: string;
+        class?: string;
+    };
+    exports: {};
+    bindings: "";
+    slots: {};
+    events: {};
+};
+declare class __sveltets_Render<TData extends Record<string, unknown>> {
+    props(): ReturnType<typeof $$render<TData>>['props'];
+    events(): ReturnType<typeof $$render<TData>>['events'];
+    slots(): ReturnType<typeof $$render<TData>>['slots'];
+    bindings(): "";
+    exports(): {};
+}
+interface $$IsomorphicComponent {
+    new <TData extends Record<string, unknown>>(options: import('svelte').ComponentConstructorOptions<ReturnType<__sveltets_Render<TData>['props']>>): import('svelte').SvelteComponent<ReturnType<__sveltets_Render<TData>['props']>, ReturnType<__sveltets_Render<TData>['events']>, ReturnType<__sveltets_Render<TData>['slots']>> & {
+        $$bindings?: ReturnType<__sveltets_Render<TData>['bindings']>;
+    } & ReturnType<__sveltets_Render<TData>['exports']>;
+    <TData extends Record<string, unknown>>(internal: unknown, props: ReturnType<__sveltets_Render<TData>['props']> & {}): ReturnType<__sveltets_Render<TData>['exports']>;
+    z_$$bindings?: ReturnType<__sveltets_Render<any>['bindings']>;
+}
+declare const $$Component: $$IsomorphicComponent;
+type $$Component<TData extends Record<string, unknown>> = InstanceType<typeof $$Component<TData>>;
+export default $$Component;