@heyramzi/ui 2.23.0 → 3.0.0

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

@@ -0,0 +1,58 @@
+/**
+ * Which way a metric has to move to be good news.
+ */
+export type NumberDirection = "up-good" | "down-good" | "neutral";
+import "./chart-tokens.css";
+import "./number-chart.css";
+import "./chart-a11y.css";
+import type { Snippet } from "svelte";
+interface Props {
+    /** Metric name, above the figure. */
+    label: string;
+    /**
+     * The figure.
+     */
+    value: number | string;
+    /** Formatter for a numeric `value`. Wins over `formatOptions`. */
+    format?: (v: number) => string;
+    /** Intl options for a numeric `value` (currency, compact, percent). */
+    formatOptions?: Intl.NumberFormatOptions;
+    /** BCP-47 locale for `formatOptions`. */
+    locale?: string;
+    /**
+     * Change against the period before this one, as a percentage. `null` is
+     * "nothing to compare against", which is not zero and is drawn as a dash.
+     */
+    delta?: number | null;
+    /** Which way `delta` has to point to be good news. */
+    direction?: NumberDirection;
+    /** Movement below this many points is noise and draws as a dash. */
+    deltaThreshold?: number;
+    /**
+     * The chart. A fraction from 0 to 1 that gives the figure its scale: a share of a total, a run against a target, a rate against its ceiling.
+     */
+    share?: number;
+    /** What the track measures, e.g. "of revenue". Only with `share`. */
+    shareLabel?: string;
+    /** Track colour. Defaults to the first series token. */
+    color?: string;
+    /** md is a figure in a row; lg is the one figure the screen exists to answer. */
+    size?: "md" | "lg";
+    /** A quiet line under the figure: the window it covers, or why it is a dash. */
+    caption?: string;
+    /** A loss or an overrun: the figure turns the destructive colour. */
+    negative?: boolean;
+    /**
+     * Drop the card chrome. For a figure that sits in a band or a panel of its
+     * own, where a second border would draw a box inside a box.
+     */
+    bare?: boolean;
+    /** Leading icon before the label. */
+    icon?: Snippet;
+    /** Rendered at the right of the label row. */
+    trailing?: Snippet;
+    class?: string;
+}
+declare const $$Component: import("svelte").Component<Props, {}, "">;
+type $$Component = ReturnType<typeof $$Component>;
+export default $$Component;

package/src/charts/pop-value.svelte.d.ts

@@ -0,0 +1,9 @@
+import "../animations/digit-pop-in.css";
+interface Props {
+    /** The formatted value. Characters that change between renders pop in; the rest stay still. */
+    value: string;
+    class?: string;
+}
+declare const $$Component: import("svelte").Component<Props, {}, "">;
+type $$Component = ReturnType<typeof $$Component>;
+export default $$Component;

package/src/charts/primitives/chart-container.svelte.d.ts

@@ -0,0 +1,9 @@
+import type { HTMLAttributes } from "svelte/elements";
+import { type WithElementRef } from "../../lib/utils.js";
+import { type ChartConfig } from "./chart-utils.js";
+type $$ComponentProps = WithElementRef<HTMLAttributes<HTMLElement>> & {
+    config: ChartConfig;
+};
+declare const $$Component: import("svelte").Component<$$ComponentProps, {}, "ref">;
+type $$Component = ReturnType<typeof $$Component>;
+export default $$Component;

package/src/charts/primitives/chart-style.svelte.d.ts

@@ -0,0 +1,8 @@
+import { type ChartConfig } from "./chart-utils.js";
+type $$ComponentProps = {
+    id: string;
+    config: ChartConfig;
+};
+declare const $$Component: import("svelte").Component<$$ComponentProps, {}, "">;
+type $$Component = ReturnType<typeof $$Component>;
+export default $$Component;

package/src/charts/primitives/chart-tooltip.svelte

@@ -121,7 +121,7 @@
 						})}
 					{:else}
 						{#if itemConfig?.icon}
-							<itemConfig.icon />
+							<itemConfig.icon aria-hidden="true" />
 						{:else if !hideIndicator}
 							<div
 								style="--color-bg: {indicatorColor}; --color-border: {indicatorColor};"

package/src/charts/primitives/chart-tooltip.svelte.d.ts

@@ -0,0 +1,26 @@
+import type { Snippet } from "svelte";
+import type { HTMLAttributes } from "svelte/elements";
+import { type WithElementRef, type WithoutChildren } from "../../lib/utils.js";
+import { type TooltipSeriesItem } from "./chart-utils.js";
+type $$ComponentProps = WithoutChildren<WithElementRef<HTMLAttributes<HTMLDivElement>>> & {
+    hideLabel?: boolean;
+    label?: string;
+    indicator?: "line" | "dot" | "dashed";
+    nameKey?: string;
+    labelKey?: string;
+    hideIndicator?: boolean;
+    labelClassName?: string;
+    labelFormatter?: ((value: unknown, series: TooltipSeriesItem[]) => string | number | Snippet) | null;
+    formatter?: Snippet<[
+        {
+            value: unknown;
+            name: string;
+            item: TooltipSeriesItem;
+            index: number;
+            series: TooltipSeriesItem[];
+        }
+    ]>;
+};
+declare const $$Component: import("svelte").Component<$$ComponentProps, {}, "ref">;
+type $$Component = ReturnType<typeof $$Component>;
+export default $$Component;

package/src/charts/primitives/chart-utils.test.ts

@@ -0,0 +1,17 @@
+import { describe, expect, it } from "vite-plus/test";
+import { valueTick } from "./chart-utils.js";
+
+describe("valueTick", () => {
+  const tick = valueTick((v) => v.toLocaleString("en-US"));
+
+  it("keeps a label of 6 characters or fewer as the formatter wrote it", () => {
+    expect(tick(1234)).toBe("1,234");
+    expect(tick(12345)).toBe("12,345");
+  });
+
+  it("shortens a longer label to compact notation", () => {
+    expect(tick(1_000_000)).toBe("1M");
+    expect(tick(1_234_567)).toBe("1.2M");
+    expect(tick(-12345)).toBe("-12.3K");
+  });
+});

package/src/charts/primitives/chart-utils.ts

@@ -39,6 +39,22 @@ export function getPayloadConfigFromPayload(
   return configLabelKey in config ? config[configLabelKey] : config[key as keyof typeof config];
 }
 
+const compact = new Intl.NumberFormat(undefined, {
+  notation: "compact",
+  maximumFractionDigits: 1,
+});
+
+/**
+ * An axis tick formatter. "1,000,000" overflows the 48px gutter and the gap between ticks, so a
+ * label over 6 characters falls back to "1M"; the tooltip keeps the full value.
+ */
+export function valueTick(format: (v: number) => string): (v: number) => string {
+  return (v) => {
+    const full = format(v);
+    return full.length > 6 && Number.isFinite(v) ? compact.format(v) : full;
+  };
+}
+
 type ChartContextValue = {
   config: ChartConfig;
 };

package/src/charts/reference-line.css

@@ -1,18 +1,22 @@
+@layer theme, base, components, utilities;
+
 /* Styles for the reference line. Plain stylesheet (see area-chart.css for why). */
 
-.hr-reference-line line,
-.hr-reference-line path {
-  stroke: var(--hr-reference-color);
-  stroke-width: 1.5;
-  stroke-dasharray: 4 4;
-  opacity: 0.7;
-}
+@layer components {
+  .hr-reference-line line,
+  .hr-reference-line path {
+    stroke: var(--hr-reference-color);
+    stroke-width: 1.5;
+    stroke-dasharray: 4 4;
+    opacity: 0.7;
+  }
 
-.hr-reference-line text {
-  fill: var(--hr-reference-color);
-  font-size: 0.75rem;
-  font-weight: 500;
-  stroke: var(--card);
-  stroke-width: 3;
-  paint-order: stroke;
+  .hr-reference-line text {
+    fill: var(--hr-reference-color);
+    font-size: 0.75rem;
+    font-weight: 500;
+    stroke: var(--card);
+    stroke-width: 3;
+    paint-order: stroke;
+  }
 }

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

@@ -0,0 +1,15 @@
+/** A target the data is judged against: a deal, a budget, a limit. */
+export type ChartReference = {
+    value: number;
+    /** Already formatted, figure included: "Deal €61,500". */
+    label: string;
+    /** A status token when crossing it means something, e.g. `var(--destructive)`. */
+    color?: string;
+};
+import "./reference-line.css";
+interface Props {
+    reference: ChartReference;
+}
+declare const $$Component: import("svelte").Component<Props, {}, "">;
+type $$Component = ReturnType<typeof $$Component>;
+export default $$Component;

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

@@ -0,0 +1,9 @@
+import { type Snippet } from "svelte";
+interface Props {
+    children: Snippet;
+    /** Headroom around the plot so a stroke at the series max is not cut. */
+    bleed?: number;
+}
+declare const $$Component: import("svelte").Component<Props, {}, "">;
+type $$Component = ReturnType<typeof $$Component>;
+export default $$Component;

package/src/charts/ring-chart.css

@@ -1,86 +1,101 @@
+@layer theme, base, components, utilities;
+
 /* RingChart styles, namespaced under `.hr-ring` because unscoped, the generic names
    below collide with GaugeChart's (area-chart.css says why it's plain CSS). */
 
-.hr-ring {
-  position: relative;
-  display: inline-grid;
-  place-items: center;
-  aspect-ratio: 1;
-  container-type: size;
-}
+@layer components {
+  .hr-ring {
+    position: relative;
+    display: inline-grid;
+    place-items: center;
+    aspect-ratio: 1;
+    container-type: size;
+  }
 
-.hr-ring svg {
-  grid-area: 1 / 1;
-  width: 100%;
-  height: 100%;
-  overflow: visible;
-}
+  .hr-ring svg {
+    grid-area: 1 / 1;
+    width: 100%;
+    height: 100%;
+    overflow: visible;
+  }
 
-.hr-ring .track {
-  opacity: 0.14;
-}
+  .hr-ring .track {
+    opacity: 0.14;
+  }
 
-.hr-ring .fill {
-  stroke-dasharray: 100;
-  cursor: pointer;
-  outline: none;
-  transition:
-    stroke-dashoffset var(--chart-motion-slow, 1.1s)
-      var(--chart-ease-out, cubic-bezier(0.22, 1, 0.36, 1)),
-    opacity 200ms ease;
-}
+  .hr-ring .fill {
+    stroke-dasharray: 100;
+    cursor: pointer;
+    outline: none;
+    transition:
+      stroke-dashoffset var(--chart-motion-slow, 1.1s)
+        var(--chart-ease-out, cubic-bezier(0.22, 1, 0.36, 1)),
+      opacity 200ms ease;
+  }
 
-.hr-ring .fill.animate {
-  animation: hr-ring-sweep var(--chart-motion-reveal, 1100ms)
-    var(--chart-ease-reveal, cubic-bezier(0.85, 0, 0.15, 1)) both;
-}
+  .hr-ring .fill.animate {
+    animation: hr-ring-sweep var(--chart-motion-reveal, 1100ms)
+      var(--chart-ease-reveal, cubic-bezier(0.85, 0, 0.15, 1)) both;
+  }
 
-@media (hover: hover) and (pointer: fine) {
-  .hr-ring.glow .fill:hover {
-    filter: drop-shadow(0 0 5px var(--ring-color));
+  @media (hover: hover) and (pointer: fine) {
+    .hr-ring.glow .fill:hover {
+      filter: drop-shadow(0 0 5px var(--ring-color));
+    }
   }
-}
 
-@keyframes hr-ring-sweep {
-  from {
-    stroke-dashoffset: 100;
+  .hr-ring .center {
+    grid-area: 1 / 1;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    /* WHY: keep the readout inside the innermost ring's clear center so the
+  	   number never collides with the green ring. */
+    max-width: 40cqmin;
+    pointer-events: none;
+    text-align: center;
   }
-}
 
-.hr-ring .center {
-  grid-area: 1 / 1;
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  justify-content: center;
-  /* WHY: keep the readout inside the innermost ring's clear center so the
-	   number never collides with the green ring. */
-  max-width: 40cqmin;
-  pointer-events: none;
-  text-align: center;
-}
+  /* WHY: a custom center fills the innermost ring's clear area instead of the
+     readout's narrower cap. */
+  .hr-ring .center.custom {
+    max-width: none;
+  }
 
-/* WHY: a custom center fills the innermost ring's clear area instead of the
-   readout's narrower cap. */
-.hr-ring .center.custom {
-  max-width: none;
-}
+  .hr-ring .value {
+    font-size: max(0.75rem, 9.5cqmin);
+    font-weight: 650;
+    line-height: 1;
+    letter-spacing: -0.02em;
+    font-variant-numeric: tabular-nums;
+    color: var(--foreground);
+  }
 
-.hr-ring .value {
-  font-size: max(0.75rem, 9.5cqmin);
-  font-weight: 650;
-  line-height: 1;
-  letter-spacing: -0.02em;
-  font-variant-numeric: tabular-nums;
-  color: var(--foreground);
+  .hr-ring .label {
+    margin-top: 1.5cqmin;
+    font-size: max(0.5rem, 5cqmin);
+    font-weight: 500;
+    color: var(--muted-foreground);
+    animation: hr-ring-label-in 180ms ease-out both;
+  }
+
+  @media (prefers-reduced-motion: reduce) {
+    .hr-ring .fill,
+    .hr-ring .fill.animate {
+      transition: opacity 120ms ease;
+      animation: none;
+    }
+    .hr-ring .label {
+      animation: none;
+    }
+  }
 }
 
-.hr-ring .label {
-  margin-top: 1.5cqmin;
-  font-size: max(0.5rem, 5cqmin);
-  font-weight: 500;
-  color: var(--muted-foreground);
-  animation: hr-ring-label-in 180ms ease-out both;
+@keyframes hr-ring-sweep {
+  from {
+    stroke-dashoffset: 100;
+  }
 }
 
 @keyframes hr-ring-label-in {
@@ -89,14 +104,3 @@
     transform: translateY(2px);
   }
 }
-
-@media (prefers-reduced-motion: reduce) {
-  .hr-ring .fill,
-  .hr-ring .fill.animate {
-    transition: opacity 120ms ease;
-    animation: none;
-  }
-  .hr-ring .label {
-    animation: none;
-  }
-}

package/src/charts/ring-chart.svelte

@@ -40,7 +40,7 @@
 		showGlow?: boolean;
 		/** Hovered ring index, bindable for legend hover-sync. */
 		hoveredIndex?: number | null;
-		onHoverChange?: (index: number | null) => void;
+		onHoveredIndexChange?: (index: number | null) => void;
 		minWidth?: number;
 		ariaLabel?: string;
 		/** Replaces the center readout, for a number that isn't the ring's own value. */
@@ -63,7 +63,7 @@
 		animate = true,
 		showGlow = true,
 		hoveredIndex = $bindable(null),
-		onHoverChange,
+		onHoveredIndexChange,
 		minWidth = 170,
 		ariaLabel,
 		children,
@@ -99,7 +99,7 @@
 	// =========================
 	function setHover(index: number | null) {
 		hoveredIndex = index;
-		onHoverChange?.(index);
+		onHoveredIndexChange?.(index);
 	}
 </script>
 

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

@@ -0,0 +1,41 @@
+import "./chart-tokens.css";
+import "./ring-chart.css";
+import type { Snippet } from "svelte";
+type RingData = {
+    label: string;
+    value: number;
+    /** Denominator for the progress arc. */
+    maxValue: number;
+    /** CSS color or var. Falls back to --chart-series-1..6. */
+    color?: string;
+};
+interface 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;
+    onHoveredIndexChange?: (index: number | null) => void;
+    minWidth?: number;
+    ariaLabel?: string;
+    /** Replaces the center readout, for a number that isn't the ring's own value. */
+    children?: Snippet;
+    class?: string;
+}
+declare const $$Component: import("svelte").Component<Props, {}, "hoveredIndex">;
+type $$Component = ReturnType<typeof $$Component>;
+export default $$Component;

package/src/charts/sparkline.css

@@ -1,45 +1,54 @@
+@layer theme, base, components, utilities;
+
 /* 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;
-}
+@layer components {
+  .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 .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;
+  .hr-sparkline-value {
+    flex-shrink: 0;
+    font-size: 0.8125rem;
+    font-weight: 600;
+    font-variant-numeric: tabular-nums;
+    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;
+  }
+
+  @media (prefers-reduced-motion: reduce) {
+    .hr-sparkline .hr-sparkline-end {
+      animation: none;
+    }
+  }
 }
+
 @keyframes hr-sparkline-pop {
   from {
     opacity: 0;
     transform: scale(0.9);
   }
 }
-@media (prefers-reduced-motion: reduce) {
-  .hr-sparkline .hr-sparkline-end {
-    animation: none;
-  }
-}