@heyramzi/ui 1.54.1 → 2.0.0

package/src/charts/charts.css

@@ -0,0 +1,201 @@
+/* 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

@@ -0,0 +1,35 @@
+<script lang="ts">
+	// =========================
+	// IMPORTS
+	// =========================
+	import { getChartContext } from "layerchart";
+
+	// =========================
+	// TYPES
+	// =========================
+	interface 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/dashboard/chart.ts

@@ -0,0 +1,5 @@
+/**
+ * The height of every dashboard chart, half width or full, so a trend is one
+ * size on every page.
+ */
+export const CHART_HEIGHT = 240;

package/src/charts/dashboard/dashboard-empty.svelte

@@ -0,0 +1,55 @@
+<script lang="ts">
+// =========================
+// IMPORTS
+// =========================
+import type { Snippet } from "svelte";
+import { cn } from "../../lib/utils.js";
+import type { PhosphorIcon } from "../../lib/icon-types.js";
+
+// =========================
+// TYPES
+// =========================
+interface Props {
+	// Not list-page's `EmptyState`: that one takes exactly one action, and a
+	// dashboard can be empty for reasons (nothing connected, nothing synced)
+	// that need two buttons.
+
+	// The dashed edge marks truly empty, not loading.
+	icon?: PhosphorIcon;
+	title: string;
+	description?: string;
+	/** One or two buttons. Omit where there is nothing the reader can do. */
+	actions?: Snippet;
+	class?: string;
+};
+
+// =========================
+// PROPS
+// =========================
+let { icon: Icon, title, description, actions, class: className }: Props = $props();
+</script>
+
+<!-- =========================== -->
+<!-- MARKUP -->
+<!-- =========================== -->
+<div
+	class={cn(
+		"rounded-xl border-2 border-dashed border-border bg-transparent p-10 text-center",
+		className,
+	)}
+>
+	<div class="mx-auto flex max-w-md flex-col items-center gap-4">
+		{#if Icon}
+			<Icon class="size-10 text-muted-foreground" aria-hidden="true" />
+		{/if}
+		<div class="space-y-1.5">
+			<h2 class="font-heading text-lg font-semibold">{title}</h2>
+			{#if description}
+				<p class="text-sm text-muted-foreground">{description}</p>
+			{/if}
+		</div>
+		{#if actions}
+			<div class="flex flex-wrap justify-center gap-2">{@render actions()}</div>
+		{/if}
+	</div>
+</div>

package/src/charts/dashboard/dashboard-section.svelte

@@ -0,0 +1,58 @@
+<script lang="ts">
+// =========================
+// IMPORTS
+// =========================
+import { ArrowRight } from "phosphor-svelte";
+import type { Snippet } from "svelte";
+import { cn } from "../../lib/utils.js";
+
+// =========================
+// TYPES
+// =========================
+interface Props {
+	title: string;
+	/** One line on the right: a window, a provenance, a count. Never a sentence. */
+	note?: string;
+	/** The page that owns this area, when one page does. */
+	href?: string;
+	/** The link's wording. Translated at the call site. */
+	openLabel?: string;
+	children: Snippet;
+	class?: string;
+};
+
+// =========================
+// PROPS
+// =========================
+let { title, note, href, openLabel = "Open", children, class: className }: Props = $props();
+</script>
+
+<!-- =========================== -->
+<!-- MARKUP -->
+<!-- =========================== -->
+<!-- An area of a dashboard, named, then its numbers. No box of its own: its
+     cards are the containers, and a card in a card is never right. -->
+<section class={cn("flex flex-col gap-4", className)}>
+	<div class="flex flex-wrap items-baseline justify-between gap-x-4 gap-y-1">
+		<h2 class="text-base font-semibold tracking-tight">{title}</h2>
+		<div class="flex items-baseline gap-3">
+			{#if note}
+				<p class="text-xs text-muted-foreground">{note}</p>
+			{/if}
+			{#if href}
+				<a
+					{href}
+					class="group inline-flex items-center gap-1 rounded-md text-xs font-medium text-muted-foreground transition-colors duration-[var(--duration-quick)] hover:text-foreground focus-visible:ring-3 focus-visible:ring-ring/50 focus-visible:outline-none"
+				>
+					{openLabel}
+					<ArrowRight
+						size={12}
+						class="shrink-0 transition-transform duration-[var(--duration-quick)] ease-out group-hover:translate-x-0.5"
+					/>
+				</a>
+			{/if}
+		</div>
+	</div>
+
+	{@render children()}
+</section>

package/src/charts/dashboard/data-panel.svelte

@@ -0,0 +1,81 @@
+<script lang="ts">
+// =========================
+// IMPORTS
+// =========================
+import type { Snippet } from "svelte";
+import { cn } from "../../lib/utils.js";
+import { panelHeaderClass, panelShellClass } from "../../lib/panel.js";
+import { SectionLabel } from "../../components/list-page/index.js";
+import type { PhosphorIcon } from "../../lib/icon-types.js";
+
+// =========================
+// TYPES
+// =========================
+interface Props {
+	/** What this section of the dashboard is. Drawn as the app's one panel label. */
+	label: string;
+	labelIcon?: PhosphorIcon;
+	/**
+	 * A row count, total or freshness stamp. It's a prop, not an action,
+	 * because hand-placed hints ended up at three type sizes on one screen.
+	 */
+	hint?: string;
+	/** Controls that act on this panel. Pinned right, after the hint. */
+	actions?: Snippet;
+	/** A line under the label, for the scope a number was measured over. */
+	sublabel?: string;
+	/** Off for a body that supplies its own padding: a table, a full-bleed list. */
+	pad?: boolean;
+	/**
+	 * The body scrolls sideways rather than squeezing. For a wide table, which is
+	 * every table on a dashboard once the window is narrower than its columns.
+	 */
+	scroll?: boolean;
+	children: Snippet;
+	class?: string;
+	bodyClass?: string;
+};
+
+// =========================
+// PROPS
+// =========================
+let {
+	label,
+	labelIcon,
+	hint,
+	actions,
+	sublabel,
+	pad = true,
+	scroll = false,
+	children,
+	class: className,
+	bodyClass,
+}: Props = $props();
+</script>
+
+<!-- =========================== -->
+<!-- MARKUP -->
+<!-- =========================== -->
+<section class={cn(panelShellClass, className)}>
+	<div class={panelHeaderClass}>
+		<div class="flex min-w-0 flex-col gap-0.5">
+			<SectionLabel icon={labelIcon}>{label}</SectionLabel>
+			{#if sublabel}
+				<span class="truncate text-xs text-muted-foreground">{sublabel}</span>
+			{/if}
+		</div>
+		{#if hint || actions}
+			<div class="flex min-w-0 shrink-0 items-center gap-3">
+				{#if hint}
+					<span class="text-xs tabular-nums text-muted-foreground">{hint}</span>
+				{/if}
+				{#if actions}
+					{@render actions()}
+				{/if}
+			</div>
+		{/if}
+	</div>
+	<div class={cn(pad && "p-4", scroll && "overflow-x-auto", bodyClass)}>
+		{@render children()}
+	</div>
+</section>

package/src/charts/dashboard/data-sort-head.svelte

@@ -0,0 +1,102 @@
+<script lang="ts">
+/*
+ * A column head that sorts the table under it. Sort buttons above a table
+ * never say which column they rank, and read as filter tabs.
+ */
+
+// Every sortable head shows its caret, at 40%, solid on the active column.
+// Hover-only makes people hunt, and it shifts the label under the pointer.
+
+// No padding of its own: it comes from the skin classes, so heads and cells
+// stay in line when a dense table tightens both.
+
+// =========================
+// IMPORTS
+// =========================
+import type { Snippet } from "svelte";
+import { CaretDown, CaretUp } from "phosphor-svelte";
+import { cn } from "../../lib/utils.js";
+import { dataThClass, dataThNumClass } from "./data-table.js";
+
+// =========================
+// TYPES
+// =========================
+interface Props {
+	/** True when the table is currently ranked by this column. */
+	active: boolean;
+	/** Which way the active column runs. Ignored while inactive. */
+	descending: boolean;
+	/** Called on click and on Enter/Space. Toggling direction is the caller's. */
+	onSort: () => void;
+	/** Numbers right-align to their digits, so their caret leads the label. */
+	numeric?: boolean;
+	/** The long form of an abbreviated head, as the browser tooltip. */
+	title?: string;
+	class?: string;
+	children: Snippet;
+};
+
+// =========================
+// PROPS
+// =========================
+let {
+	active,
+	descending,
+	onSort,
+	numeric = false,
+	title,
+	class: className,
+	children,
+}: Props = $props();
+
+// =========================
+// DERIVED
+// =========================
+const ariaSort = $derived(active ? (descending ? "descending" : "ascending") : "none");
+
+// =========================
+// FUNCTIONS
+// =========================
+function handleKeydown(event: KeyboardEvent) {
+	if (event.key === "Enter" || event.key === " ") {
+		event.preventDefault();
+		onSort();
+	}
+}
+</script>
+
+<!-- =========================== -->
+<!-- MARKUP -->
+<!-- =========================== -->
+<th
+	scope="col"
+	{title}
+	tabindex="0"
+	aria-sort={ariaSort}
+	onclick={onSort}
+	onkeydown={handleKeydown}
+	class={cn(
+		numeric ? dataThNumClass : dataThClass,
+		"cursor-pointer select-none transition-colors hover:text-foreground",
+		active && "text-foreground",
+		className,
+	)}
+>
+	<span class="inline-flex items-center gap-0.5 whitespace-nowrap">
+		{#if numeric}
+			{@render caret()}{@render children()}
+		{:else}
+			{@render children()}{@render caret()}
+		{/if}
+	</span>
+</th>
+
+{#snippet caret()}
+	{#if active && !descending}
+		<CaretUp class="size-3 shrink-0" weight="bold" />
+	{:else if active}
+		<CaretDown class="size-3 shrink-0" weight="bold" />
+	{:else}
+		<CaretDown class="size-3 shrink-0 text-muted-foreground/40" />
+	{/if}
+{/snippet}