@glyphui/ui 0.3.0 → 0.5.0

package/dist/patterns/chart/chart.styles.js

@@ -0,0 +1,43 @@
+"use client";
+import { focusRing, themedBorder } from "../../utils/styles.js";
+import { tv } from "../../utils/tv.js";
+//#region src/patterns/chart/chart.styles.ts
+const chartStyles = /* @__PURE__ */ tv({ slots: {
+	root: "m-0 grid min-w-0 gap-3",
+	caption: "grid gap-0.5",
+	title: "text-small font-medium text-foreground",
+	description: "text-caption text-muted-foreground",
+	plot: [
+		"relative min-w-0 [&_.recharts-surface]:overflow-visible",
+		"[&_.recharts-text]:fill-muted-foreground [&_.recharts-cartesian-axis-tick_text]:tabular-nums",
+		"[&_.recharts-layer]:outline-none [&_.recharts-sector]:outline-none [&_.recharts-rectangle]:outline-none"
+	],
+	state: "flex items-center justify-center",
+	skeleton: "h-full w-full rounded-md",
+	legend: "flex flex-wrap items-center gap-x-4 gap-y-1 text-caption text-muted-foreground",
+	legendItem: "inline-flex items-center gap-1.5",
+	legendButton: [
+		"-mx-1 inline-flex cursor-pointer items-center gap-1.5 rounded-xs px-1 py-0.5 transition-opacity hover:text-foreground",
+		"aria-[pressed=false]:opacity-45 aria-[pressed=false]:line-through aria-[pressed=false]:decoration-faint-foreground",
+		focusRing
+	],
+	swatch: "size-2.5 shrink-0 rounded-[2px]",
+	tooltip: ["grid min-w-36 gap-1.5 rounded-md border-border bg-raised px-3 py-2 text-caption text-foreground shadow-lg", themedBorder],
+	tooltipLabel: "font-medium text-foreground",
+	tooltipRow: "flex items-center gap-2",
+	tooltipName: "flex-1 text-muted-foreground",
+	tooltipValue: "font-mono font-medium tabular-nums text-foreground",
+	tooltipTotal: "mt-0.5 flex items-center gap-2 border-t border-border pt-1.5",
+	center: "pointer-events-none absolute inset-0 flex flex-col items-center justify-center text-center",
+	table: "max-h-96 overflow-auto rounded-md border-(length:--glyph-border-width) border-border",
+	srOnly: "sr-only"
+} });
+const chartCardStyles = /* @__PURE__ */ tv({ slots: {
+	root: "min-w-0",
+	header: "flex flex-wrap items-start justify-between gap-3",
+	heading: "grid min-w-0 gap-1",
+	controls: "flex flex-wrap items-center gap-2",
+	body: "min-w-0"
+} });
+//#endregion
+export { chartCardStyles, chartStyles };

package/dist/patterns/chart/export.d.ts

@@ -0,0 +1,45 @@
+import { RefObject } from "react";
+//#region src/patterns/chart/export.d.ts
+export interface ExportChartOptions {
+  /** Default `png`. */
+  format?: 'png' | 'svg';
+  /** File name without extension. Default `chart`. */
+  fileName?: string;
+  /** PNG pixel density. Defaults to the screen's devicePixelRatio (at least 2). */
+  scale?: number;
+  /**
+   * Background color. Defaults to the chart's surface, so the export reads the same as the
+   * page. Pass `"transparent"` for none.
+   */
+  background?: string;
+  /** Set false to only return the file, without downloading it. Default true. */
+  download?: boolean;
+  /** Draw the chart's title in the file. Default true. Pass a string to use other text. */
+  title?: boolean | string;
+  /** Draw the chart's legend in the file. Default true. */
+  legend?: boolean;
+}
+type Target = Element | RefObject<Element | null> | null | undefined;
+export interface SerializeChartOptions {
+  /** Background color. Defaults to the chart's surface; `"transparent"` for none. */
+  background?: string;
+  /** Draw the chart's title above it. Default true. Pass a string to use other text. */
+  title?: boolean | string;
+  /** Draw the chart's legend below it. Default true. */
+  legend?: boolean;
+}
+/**
+ * Clones a chart's SVG with every theme variable resolved and every style inlined, and adds
+ * the chart's title and legend, so the file renders identically outside the page.
+ */
+export declare function serializeChart(target: Target, options?: SerializeChartOptions): {
+  svg: string;
+  width: number;
+  height: number;
+};
+/**
+ * Downloads a chart as PNG or SVG, with the theme's colors baked in. Pass the chart's
+ * element (or a ref to it, or to any wrapper such as a ChartCard). Resolves with the file.
+ */
+export declare function exportChart(target: Target, options?: ExportChartOptions): Promise<Blob>;
+//#endregion

package/dist/patterns/chart/export.js

@@ -0,0 +1,293 @@
+"use client";
+//#region src/patterns/chart/export.ts
+/** Presentation properties copied from computed styles, so the file needs no stylesheet. */
+const PROPERTIES = [
+	"fill",
+	"fill-opacity",
+	"stroke",
+	"stroke-opacity",
+	"stroke-width",
+	"stroke-dasharray",
+	"stroke-linecap",
+	"stroke-linejoin",
+	"opacity",
+	"stop-color",
+	"stop-opacity",
+	"font-family",
+	"font-size",
+	"font-weight",
+	"font-variant-numeric",
+	"letter-spacing",
+	"text-anchor",
+	"dominant-baseline",
+	"visibility",
+	"display"
+];
+const VAR = /var\(\s*(--[\w-]+)\s*(?:,\s*([^()]*(?:\([^()]*\))?[^()]*))?\)/;
+/** Replaces `var(--x)` references with their values, read from `element` and its ancestors. */
+function resolveCssVariables(value, element, depth = 0) {
+	let result = value;
+	for (let guard = 0; guard < 32; guard++) {
+		const match = VAR.exec(result);
+		if (!match) break;
+		const [whole, name, fallback] = match;
+		let resolved = "";
+		for (let node = element; node && !resolved; node = node.parentElement) {
+			resolved = getComputedStyle(node).getPropertyValue(name).trim();
+			if (!resolved && node instanceof HTMLElement) resolved = node.style.getPropertyValue(name).trim();
+			if (!resolved && node instanceof SVGElement) resolved = node.style.getPropertyValue(name).trim();
+		}
+		if (!resolved) resolved = fallback?.trim() ?? "";
+		if (depth < 8 && resolved.includes("var(")) resolved = resolveCssVariables(resolved, element, depth + 1);
+		result = result.replace(whole, resolved);
+	}
+	return result;
+}
+function findSvg(target) {
+	const element = target && "current" in target ? target.current : target;
+	if (!element) throw new Error("exportChart: no element to export.");
+	if (element instanceof SVGSVGElement) return element;
+	const svgs = Array.from(element.querySelectorAll("svg"));
+	let best;
+	let bestArea = -1;
+	for (const svg of svgs) {
+		const box = svg.getBoundingClientRect();
+		const area = box.width * box.height;
+		if (area > bestArea) {
+			best = svg;
+			bestArea = area;
+		}
+	}
+	if (!best) throw new Error("exportChart: the element contains no chart.");
+	return best;
+}
+function surfaceColor(svg) {
+	for (let node = svg; node; node = node.parentElement) {
+		const color = getComputedStyle(node).backgroundColor;
+		if (color && color !== "transparent" && !/rgba\(.*,\s*0\)$/.test(color)) return color;
+	}
+	return resolveCssVariables("var(--glyph-surface, #ffffff)", svg);
+}
+const SVG_NS = "http://www.w3.org/2000/svg";
+function svgElement(name, attributes) {
+	const element = document.createElementNS(SVG_NS, name);
+	for (const [key, value] of Object.entries(attributes)) element.setAttribute(key, String(value));
+	return element;
+}
+function colorOf(element, property) {
+	const computed = getComputedStyle(element)[property];
+	if (computed && !computed.includes("var(")) return computed;
+	const inline = element.style?.[property === "color" ? "color" : "background"];
+	return inline ? resolveCssVariables(inline, element) : "";
+}
+/** Content bounds of an svg in its own units, including labels drawn outside it. */
+function contentBox(svg, width, height) {
+	const viewBox = svg.getAttribute("viewBox");
+	if (viewBox) {
+		const [x = 0, y = 0, w = width, h = height] = viewBox.split(/[\s,]+/).map(Number);
+		return {
+			x,
+			y,
+			width: w,
+			height: h,
+			scale: width / (w || width)
+		};
+	}
+	let box = {
+		x: 0,
+		y: 0,
+		width,
+		height
+	};
+	try {
+		const bounds = svg.getBBox();
+		if (bounds.width > 0 && bounds.height > 0) {
+			const x = Math.min(0, bounds.x);
+			const y = Math.min(0, bounds.y);
+			box = {
+				x,
+				y,
+				width: Math.max(width, bounds.x + bounds.width) - x,
+				height: Math.max(height, bounds.y + bounds.height) - y
+			};
+		}
+	} catch {}
+	return {
+		...box,
+		scale: 1
+	};
+}
+/**
+* Clones a chart's SVG with every theme variable resolved and every style inlined, and adds
+* the chart's title and legend, so the file renders identically outside the page.
+*/
+function serializeChart(target, options = {}) {
+	const source = findSvg(target);
+	const clone = source.cloneNode(true);
+	const originals = [source, ...Array.from(source.querySelectorAll("*"))];
+	const copies = [clone, ...Array.from(clone.querySelectorAll("*"))];
+	originals.forEach((original, i) => {
+		const copy = copies[i];
+		if (!copy) return;
+		const computed = getComputedStyle(original);
+		for (const property of PROPERTIES) {
+			const attribute = original.getAttribute(property);
+			let value = computed.getPropertyValue(property).trim();
+			if ((!value || value.includes("var(")) && attribute) value = attribute;
+			if (!value) continue;
+			if (value.includes("var(")) value = resolveCssVariables(value, original);
+			if (value) copy.setAttribute(property, value);
+		}
+		const inline = copy.getAttribute("style");
+		if (inline?.includes("var(")) copy.setAttribute("style", resolveCssVariables(inline, original));
+		copy.removeAttribute("class");
+		copy.removeAttribute("tabindex");
+		copy.removeAttribute("role");
+	});
+	const rect = source.getBoundingClientRect();
+	const box = contentBox(source, Math.round(rect.width || Number(source.getAttribute("width")) || 600), Math.round(rect.height || Number(source.getAttribute("height")) || 300));
+	const innerWidth = Math.round(box.width * box.scale);
+	const innerHeight = Math.round(box.height * box.scale);
+	const figure = source.closest("[data-slot=chart], [data-slot=gauge]");
+	const fontFamily = getComputedStyle(figure ?? source).fontFamily || "system-ui, sans-serif";
+	const pad = 16;
+	const titleElement = figure?.querySelector("figcaption [id]") ?? null;
+	const titleText = options.title === false ? "" : typeof options.title === "string" ? options.title : (titleElement?.textContent ?? "").trim();
+	const header = titleText ? 30 : 0;
+	const legendItems = options.legend === false || !figure ? [] : Array.from(figure.querySelectorAll("[data-slot=chart-legend] li")).map((item) => {
+		const swatch = item.querySelector("span[style]");
+		const button = item.querySelector("button");
+		return {
+			label: (item.textContent ?? "").trim(),
+			color: swatch ? colorOf(swatch, "backgroundColor") : "",
+			hidden: button?.getAttribute("aria-pressed") === "false",
+			text: colorOf(item, "color") || colorOf(figure, "color")
+		};
+	});
+	const legendRows = [];
+	let cursor = 0;
+	let row = 0;
+	for (const item of legendItems) {
+		const itemWidth = 16 + item.label.length * 6.6 + 16;
+		if (cursor > 0 && cursor + itemWidth > innerWidth) {
+			cursor = 0;
+			row++;
+		}
+		legendRows.push({
+			x: cursor,
+			row,
+			item
+		});
+		cursor += itemWidth;
+	}
+	const legendHeight = legendItems.length > 0 ? (row + 1) * 20 + 8 : 0;
+	const width = innerWidth + 32;
+	const height = pad + header + innerHeight + legendHeight + pad;
+	const root = svgElement("svg", {
+		xmlns: SVG_NS,
+		width,
+		height,
+		viewBox: `0 0 ${width} ${height}`,
+		"font-family": fontFamily
+	});
+	const fill = options.background ?? surfaceColor(source);
+	if (fill !== "transparent") root.append(svgElement("rect", {
+		x: 0,
+		y: 0,
+		width,
+		height,
+		fill
+	}));
+	if (titleText) {
+		const title = svgElement("text", {
+			x: pad,
+			y: 30,
+			"font-size": 14,
+			"font-weight": 600,
+			fill: titleElement ? colorOf(titleElement, "color") : colorOf(source, "color")
+		});
+		title.textContent = titleText;
+		root.append(title);
+	}
+	clone.removeAttribute("style");
+	clone.setAttribute("x", String(pad));
+	clone.setAttribute("y", String(pad + header));
+	clone.setAttribute("width", String(innerWidth));
+	clone.setAttribute("height", String(innerHeight));
+	clone.setAttribute("viewBox", `${box.x} ${box.y} ${box.width} ${box.height}`);
+	clone.setAttribute("overflow", "visible");
+	root.append(clone);
+	for (const { x, row: line, item } of legendRows) {
+		const y = pad + header + innerHeight + 12 + line * 20;
+		const group = svgElement("g", { opacity: item.hidden ? .45 : 1 });
+		group.append(svgElement("rect", {
+			x: pad + x,
+			y,
+			width: 10,
+			height: 10,
+			rx: 2,
+			fill: item.color
+		}));
+		const label = svgElement("text", {
+			x: pad + x + 16,
+			y: y + 9,
+			"font-size": 12,
+			fill: item.text
+		});
+		label.textContent = item.label;
+		group.append(label);
+		root.append(group);
+	}
+	return {
+		svg: new XMLSerializer().serializeToString(root),
+		width,
+		height
+	};
+}
+function save(blob, name) {
+	const url = URL.createObjectURL(blob);
+	const link = document.createElement("a");
+	link.href = url;
+	link.download = name;
+	document.body.append(link);
+	link.click();
+	link.remove();
+	setTimeout(() => URL.revokeObjectURL(url), 1e3);
+}
+/**
+* Downloads a chart as PNG or SVG, with the theme's colors baked in. Pass the chart's
+* element (or a ref to it, or to any wrapper such as a ChartCard). Resolves with the file.
+*/
+async function exportChart(target, options = {}) {
+	const { format = "png", fileName = "chart", download = true } = options;
+	const { svg, width, height } = serializeChart(target, {
+		...options.background !== void 0 && { background: options.background },
+		...options.title !== void 0 && { title: options.title },
+		...options.legend !== void 0 && { legend: options.legend }
+	});
+	let blob;
+	if (format === "svg") blob = new Blob([svg], { type: "image/svg+xml;charset=utf-8" });
+	else {
+		const scale = options.scale ?? Math.max(window.devicePixelRatio || 1, 2);
+		const image = new Image();
+		image.decoding = "async";
+		const loaded = new Promise((resolve, reject) => {
+			image.onload = () => resolve();
+			image.onerror = () => reject(/* @__PURE__ */ new Error("exportChart: the chart could not be rendered."));
+		});
+		image.src = `data:image/svg+xml;charset=utf-8,${encodeURIComponent(svg)}`;
+		await loaded;
+		const canvas = document.createElement("canvas");
+		canvas.width = Math.round(width * scale);
+		canvas.height = Math.round(height * scale);
+		const context = canvas.getContext("2d");
+		if (!context) throw new Error("exportChart: canvas is not available.");
+		context.scale(scale, scale);
+		context.drawImage(image, 0, 0, width, height);
+		blob = await new Promise((resolve, reject) => canvas.toBlob((result) => result ? resolve(result) : reject(/* @__PURE__ */ new Error("exportChart: PNG encoding failed.")), "image/png"));
+	}
+	if (download) save(blob, `${fileName}.${format}`);
+	return blob;
+}
+//#endregion
+export { exportChart, resolveCssVariables, serializeChart };

package/dist/patterns/chart/funnel.d.ts

@@ -0,0 +1,23 @@
+import { ChartColorValue, ChartStateProps, Key } from "./chart-parts.js";
+import { ReactNode } from "react";
+//#region src/patterns/chart/funnel.d.ts
+export interface FunnelChartProps<T extends object> extends ChartStateProps {
+  /** One row per stage, in order. */
+  data: readonly T[];
+  /** Field naming each stage, e.g. `"stage"`. */
+  category: Key<T>;
+  /** Field holding how many reached the stage. */
+  value: Key<T>;
+  title: string;
+  description?: ReactNode;
+  hideTitle?: boolean;
+  /** Default `chart-1`. Later stages are lighter tints of it. */
+  color?: ChartColorValue;
+  valueFormatter?: (value: number) => string;
+  /** Under each value: share of the first stage or of the previous one. Default `previous`. */
+  conversion?: 'first' | 'previous' | 'none';
+  className?: string;
+}
+/** How many make it through each step of a flow, e.g. visit → signup → paid. */
+export declare function FunnelChart<T extends object>(props: FunnelChartProps<T>): import("react").JSX.Element;
+//#endregion

package/dist/patterns/chart/funnel.js

@@ -0,0 +1,129 @@
+"use client";
+import { useMotionSettings } from "../../motion/use-motion-settings.js";
+import { ChartFrame, defaultFormatter, resolveColor } from "./chart-parts.js";
+import { useElementWidth } from "./use-element-width.js";
+import { useEffect, useState } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/patterns/chart/funnel.tsx
+const ROW = 44;
+const GAP = 6;
+const percent = (value) => `${value >= .1 ? Math.round(value * 100) : Math.round(value * 1e3) / 10}%`;
+/** How many make it through each step of a flow, e.g. visit → signup → paid. */
+function FunnelChart(props) {
+	const { data, category, value, valueFormatter = defaultFormatter, conversion = "previous" } = props;
+	const { animate } = useMotionSettings();
+	const [ref, width] = useElementWidth();
+	const [grown, setGrown] = useState(!animate);
+	useEffect(() => {
+		const frame = requestAnimationFrame(() => setGrown(true));
+		return () => cancelAnimationFrame(frame);
+	}, []);
+	const rows = data.map((row) => ({
+		name: String(row[category]),
+		value: Number(row[value]) || 0
+	}));
+	const first = rows[0]?.value || 1;
+	const base = resolveColor(props.color ?? "chart-1", 0);
+	const labelWidth = Math.min(Math.max(width * .26, 88), 180);
+	const valueWidth = Math.min(Math.max(width * .2, 84), 132);
+	const area = Math.max(width - labelWidth - valueWidth - 16, 40);
+	const height = rows.length * ROW + Math.max(rows.length - 1, 0) * GAP;
+	const rate = (i) => {
+		const reference = conversion === "first" ? first : rows[i - 1]?.value ?? first;
+		return rows[i].value / (reference || 1);
+	};
+	const table = {
+		columns: [
+			String(category),
+			String(value),
+			...conversion === "none" ? [] : [conversion === "first" ? "% of first" : "% of previous"]
+		],
+		rows: rows.map((row, i) => [
+			row.name,
+			valueFormatter(row.value),
+			...conversion === "none" ? [] : [i === 0 ? "100%" : percent(rate(i))]
+		])
+	};
+	return /* @__PURE__ */ jsx(ChartFrame, {
+		title: props.title,
+		description: props.description,
+		hideTitle: props.hideTitle,
+		className: props.className,
+		table,
+		height: height || 200,
+		isEmpty: rows.length === 0,
+		loading: props.loading,
+		error: props.error,
+		onRetry: props.onRetry,
+		empty: props.empty,
+		children: /* @__PURE__ */ jsx("div", {
+			ref,
+			className: "w-full",
+			children: /* @__PURE__ */ jsx("svg", {
+				width,
+				height,
+				viewBox: `0 0 ${width} ${height}`,
+				className: "block",
+				"aria-hidden": "true",
+				children: rows.map((row, i) => {
+					const y = i * 50;
+					const barWidth = Math.max(row.value / first * area, 2);
+					const x = labelWidth + 8 + (area - barWidth) / 2;
+					const mix = Math.max(100 - i * 14, 40);
+					const fill = i === 0 ? base : `color-mix(in oklab, ${base} ${mix}%, var(--glyph-surface))`;
+					return /* @__PURE__ */ jsxs("g", { children: [
+						/* @__PURE__ */ jsx("text", {
+							x: 0,
+							y: y + ROW / 2,
+							dominantBaseline: "central",
+							fill: "var(--glyph-foreground)",
+							fontSize: 13,
+							children: row.name
+						}),
+						/* @__PURE__ */ jsx("rect", {
+							x,
+							y: y + 4,
+							width: barWidth,
+							height: 36,
+							rx: 4,
+							fill,
+							style: {
+								transformBox: "fill-box",
+								transformOrigin: "center",
+								transform: grown ? "scaleX(1)" : "scaleX(0)",
+								transition: animate ? `transform calc(var(--glyph-duration-slow) * 2) var(--glyph-ease-emphasized) ${i * 60}ms` : void 0
+							}
+						}),
+						/* @__PURE__ */ jsx("text", {
+							x: width,
+							y: conversion === "none" || i === 0 ? y + ROW / 2 : y + ROW / 2 - 8,
+							dominantBaseline: "central",
+							textAnchor: "end",
+							fill: "var(--glyph-foreground)",
+							fontSize: 13,
+							fontWeight: 500,
+							style: { fontVariantNumeric: "tabular-nums" },
+							children: valueFormatter(row.value)
+						}),
+						conversion !== "none" && i > 0 && /* @__PURE__ */ jsxs("text", {
+							x: width,
+							y: y + ROW / 2 + 9,
+							dominantBaseline: "central",
+							textAnchor: "end",
+							fill: "var(--glyph-muted-foreground)",
+							fontSize: 11,
+							style: { fontVariantNumeric: "tabular-nums" },
+							children: [
+								percent(rate(i)),
+								" ",
+								conversion === "first" ? "of total" : "converted"
+							]
+						})
+					] }, row.name);
+				})
+			})
+		})
+	});
+}
+//#endregion
+export { FunnelChart };

package/dist/patterns/chart/heatmap.d.ts

@@ -0,0 +1,37 @@
+import { ChartColorValue, ChartStateProps, Key } from "./chart-parts.js";
+import { ReactNode } from "react";
+//#region src/patterns/chart/heatmap.d.ts
+export interface HeatmapProps<T extends object> extends ChartStateProps {
+  /** One row per day. Missing days count as zero. */
+  data: readonly T[];
+  /** Field holding the day: a Date, a timestamp or a `YYYY-MM-DD` string. */
+  date: Key<T>;
+  /** Field holding the day's value. */
+  value: Key<T>;
+  title: string;
+  description?: ReactNode;
+  hideTitle?: boolean;
+  /** First day shown. Defaults to 52 weeks before `to`. */
+  from?: Date;
+  /** Last day shown. Defaults to the latest day in `data`, or today. */
+  to?: Date;
+  /** 0 starts weeks on Sunday, 1 on Monday. Default 0. */
+  weekStart?: 0 | 1;
+  /** Default `chart-1`. Busier days get stronger tints of it. */
+  color?: ChartColorValue;
+  /** Number of tint steps above zero. Default 4. */
+  levels?: number;
+  valueFormatter?: (value: number) => string;
+  /** Noun read after the value, e.g. `"deploys"` → "12 deploys on Mon, Oct 6". */
+  unit?: string;
+  /** Locale for month and day names. Defaults to the browser's. */
+  locale?: string;
+  onCellClick?: (date: Date, value: number) => void;
+  className?: string;
+}
+/**
+ * Activity per day over months, like a contribution calendar. Each day is a keyboard
+ * reachable cell: Tab into the grid, then use the arrow keys, Home and End.
+ */
+export declare function Heatmap<T extends object>(props: HeatmapProps<T>): import("react").JSX.Element;
+//#endregion